diff --git a/browser_tests/tests/bottomPanelShortcuts.spec.ts b/browser_tests/tests/bottomPanelShortcuts.spec.ts index d3493f6996..fba61ebd4b 100644 --- a/browser_tests/tests/bottomPanelShortcuts.spec.ts +++ b/browser_tests/tests/bottomPanelShortcuts.spec.ts @@ -113,21 +113,45 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => { expect(hasModifiers).toBeTruthy() }) - test('should maintain panel state when switching to terminal', async ({ + test('should maintain panel state when switching between panels', async ({ comfyPage }) => { const { bottomPanel } = comfyPage + // Open shortcuts panel first await bottomPanel.keyboardShortcutsButton.click() await expect(bottomPanel.root).toBeVisible() - - await bottomPanel.toggleButton.click() - await expect(bottomPanel.root).toBeVisible() - - await bottomPanel.keyboardShortcutsButton.click() await expect( comfyPage.page.locator('[id*="tab_shortcuts-essentials"]') ).toBeVisible() + + // Try to open terminal panel - may show terminal OR close shortcuts + // depending on whether terminal tabs have loaded (async loading) + await bottomPanel.toggleButton.click() + + // Check if terminal tabs loaded (Logs tab visible) or fell back to shortcuts toggle + const logsTab = comfyPage.page.getByRole('tab', { name: /Logs/i }) + const hasTerminalTabs = await logsTab.isVisible().catch(() => false) + + if (hasTerminalTabs) { + // Terminal panel is visible - verify we can switch back to shortcuts + await expect(bottomPanel.root).toBeVisible() + + // Switch back to shortcuts + await bottomPanel.keyboardShortcutsButton.click() + + // Should show shortcuts content again + await expect( + comfyPage.page.locator('[id*="tab_shortcuts-essentials"]') + ).toBeVisible() + } else { + // Terminal tabs not loaded - button toggled shortcuts off, reopen for verification + await bottomPanel.keyboardShortcutsButton.click() + await expect(bottomPanel.root).toBeVisible() + await expect( + comfyPage.page.locator('[id*="tab_shortcuts-essentials"]') + ).toBeVisible() + } }) test('should handle keyboard navigation', async ({ comfyPage }) => { diff --git a/browser_tests/tests/menu.spec.ts b/browser_tests/tests/menu.spec.ts index d028870134..50005afc55 100644 --- a/browser_tests/tests/menu.spec.ts +++ b/browser_tests/tests/menu.spec.ts @@ -107,7 +107,6 @@ test.describe('Menu', { tag: '@ui' }, () => { // Checkmark should be invisible initially (panel is hidden) await expect(checkmark).toHaveClass(/invisible/) - // Click Bottom Panel to toggle it on await bottomPanelItem.click() // Verify menu is still visible after clicking diff --git a/src/composables/bottomPanelTabs/useTerminalTabs.ts b/src/composables/bottomPanelTabs/useTerminalTabs.ts index 2abc79c938..03b16e675c 100644 --- a/src/composables/bottomPanelTabs/useTerminalTabs.ts +++ b/src/composables/bottomPanelTabs/useTerminalTabs.ts @@ -1,27 +1,27 @@ import { markRaw } from 'vue' import { useI18n } from 'vue-i18n' -import CommandTerminal from '@/components/bottomPanel/tabs/terminal/CommandTerminal.vue' import LogsTerminal from '@/components/bottomPanel/tabs/terminal/LogsTerminal.vue' +import CommandTerminal from '@/components/bottomPanel/tabs/terminal/CommandTerminal.vue' import type { BottomPanelExtension } from '@/types/extensionTypes' -export const useLogsTerminalTab = (): BottomPanelExtension => { +export function useLogsTerminalTab(): BottomPanelExtension { const { t } = useI18n() return { id: 'logs-terminal', - title: t('g.logs'), // For command labels (collected by i18n workflow) - titleKey: 'g.logs', // For dynamic translation in UI + title: t('g.logs'), + titleKey: 'g.logs', component: markRaw(LogsTerminal), type: 'vue' } } -export const useCommandTerminalTab = (): BottomPanelExtension => { +export function useCommandTerminalTab(): BottomPanelExtension { const { t } = useI18n() return { id: 'command-terminal', - title: t('g.terminal'), // For command labels (collected by i18n workflow) - titleKey: 'g.terminal', // For dynamic translation in UI + title: t('g.terminal'), + titleKey: 'g.terminal', component: markRaw(CommandTerminal), type: 'vue' } diff --git a/src/composables/useCoreCommands.ts b/src/composables/useCoreCommands.ts index 6a8153a28d..644d33ac95 100644 --- a/src/composables/useCoreCommands.ts +++ b/src/composables/useCoreCommands.ts @@ -8,6 +8,7 @@ import { DEFAULT_DARK_COLOR_PALETTE, DEFAULT_LIGHT_COLOR_PALETTE } from '@/constants/coreColorPalettes' + import { tryToggleWidgetPromotion } from '@/core/graph/subgraph/proxyWidgetUtils' import { t } from '@/i18n' import { diff --git a/src/platform/keybindings/keybindingService.ts b/src/platform/keybindings/keybindingService.ts index 31552ed437..f8c822273e 100644 --- a/src/platform/keybindings/keybindingService.ts +++ b/src/platform/keybindings/keybindingService.ts @@ -1,3 +1,4 @@ +import { isCloud } from '@/platform/distribution/types' import { useSettingStore } from '@/platform/settings/settingStore' import { app } from '@/scripts/app' import { useCommandStore } from '@/stores/commandStore' @@ -108,6 +109,12 @@ export function useKeybindingService() { function registerCoreKeybindings() { for (const keybinding of CORE_KEYBINDINGS) { + if ( + isCloud && + keybinding.commandId === 'Workspace.ToggleBottomPanelTab.logs-terminal' + ) { + continue + } keybindingStore.addDefaultKeybinding(new KeybindingImpl(keybinding)) } } @@ -119,6 +126,12 @@ export function useKeybindingService() { } const newBindings = settingStore.get('Comfy.Keybinding.NewBindings') for (const keybinding of newBindings) { + if ( + isCloud && + keybinding.commandId === 'Workspace.ToggleBottomPanelTab.logs-terminal' + ) { + continue + } keybindingStore.addUserKeybinding(new KeybindingImpl(keybinding)) } } diff --git a/src/stores/workspace/bottomPanelStore.ts b/src/stores/workspace/bottomPanelStore.ts index 017c2e0b29..5a5e7090ea 100644 --- a/src/stores/workspace/bottomPanelStore.ts +++ b/src/stores/workspace/bottomPanelStore.ts @@ -2,10 +2,7 @@ import { defineStore } from 'pinia' import { computed, ref } from 'vue' import { useShortcutsTab } from '@/composables/bottomPanelTabs/useShortcutsTab' -import { - useCommandTerminalTab, - useLogsTerminalTab -} from '@/composables/bottomPanelTabs/useTerminalTabs' + import { useCommandStore } from '@/stores/commandStore' import type { ComfyExtension } from '@/types/comfy' import type { BottomPanelExtension } from '@/types/extensionTypes' @@ -75,8 +72,18 @@ export const useBottomPanelStore = defineStore('bottomPanel', () => { } const toggleBottomPanel = () => { - // Legacy method - toggles terminal panel - togglePanel('terminal') + // Toggles the terminal panel if available, otherwise falls back to shortcuts + // Terminal tabs are loaded asynchronously, so may not be available immediately + const terminalPanel = panels.value.terminal + if (terminalPanel.tabs.length > 0) { + togglePanel('terminal') + } else { + // Terminal tabs not loaded yet - fall back to shortcuts panel + // If no panel is open, open shortcuts + // If shortcuts is already open, close it + // If another panel is open (shouldn't happen), switch to shortcuts + togglePanel('shortcuts') + } } const setActiveTab = (tabId: string) => { @@ -121,12 +128,23 @@ export const useBottomPanelStore = defineStore('bottomPanel', () => { }) } - const registerCoreBottomPanelTabs = () => { - registerBottomPanelTab(useLogsTerminalTab()) - if (isElectron()) { - registerBottomPanelTab(useCommandTerminalTab()) - } + const registerCoreBottomPanelTabs = async () => { + // Register shortcuts tabs first (synchronous, always available) useShortcutsTab().forEach(registerBottomPanelTab) + + // Use __DISTRIBUTION__ directly for proper dead code elimination + if (__DISTRIBUTION__ !== 'cloud') { + try { + const { useLogsTerminalTab, useCommandTerminalTab } = + await import('@/composables/bottomPanelTabs/useTerminalTabs') + registerBottomPanelTab(useLogsTerminalTab()) + if (isElectron()) { + registerBottomPanelTab(useCommandTerminalTab()) + } + } catch (error) { + console.error('Failed to load terminal tabs:', error) + } + } } const registerExtensionBottomPanelTabs = (extension: ComfyExtension) => { diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue index bbe22d1a1a..4b5ec6d4a5 100644 --- a/src/views/GraphView.vue +++ b/src/views/GraphView.vue @@ -198,7 +198,7 @@ useCommandStore().registerCommands(coreCommands) useMenuItemStore().registerCoreMenuCommands() useKeybindingService().registerCoreKeybindings() useSidebarTabStore().registerCoreSidebarTabs() -useBottomPanelStore().registerCoreBottomPanelTabs() +void useBottomPanelStore().registerCoreBottomPanelTabs() const queuePendingTaskCountStore = useQueuePendingTaskCountStore() const sidebarTabStore = useSidebarTabStore()