fix: fallback to shortcuts panel when terminal tabs not yet loaded

Terminal tabs are loaded asynchronously via dynamic import for code-splitting.
toggleBottomPanel() now falls back to shortcuts panel if terminal tabs
haven't loaded yet, ensuring the button always does something.

Updated tests to account for async terminal tab loading.

Amp-Thread-ID: https://ampcode.com/threads/T-019c1d20-f1fc-704a-ae48-1a417d14cb8b

browser_tests/tests/bottomPanelShortcuts.spec.ts

@@ -147,47 +147,46 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
   test('should maintain panel state when switching to terminal', async ({
     comfyPage
   }) => {
-    // First open the bottom panel to check if terminal tab is available
-    // Terminal tabs are loaded asynchronously, so wait for the "Logs" tab to appear
-    await comfyPage.page
-      .locator('button[aria-label*="Toggle Bottom Panel"]')
-      .click()
-
-    // Check if terminal tab exists (loaded asynchronously, not available in cloud)
-    // Look for the "Logs" tab text in the bottom panel
-    const logsTab = comfyPage.page.locator('.bottom-panel').getByRole('tab', {
-      name: /Logs/i
-    })
-    const terminalTabExists = await logsTab
-      .isVisible({ timeout: 5000 })
-      .catch(() => false)
-
-    if (!terminalTabExists) {
-      // Close panel and skip test - terminal not available in this distribution
-      await comfyPage.page
-        .locator('button[aria-label*="Toggle Bottom Panel"]')
-        .click()
-      test.skip()
-      return
-    }
-
-    // Close the panel to reset state
-    await comfyPage.page
-      .locator('button[aria-label*="Toggle Bottom Panel"]')
-      .click()
-
-    // Open shortcuts panel first
+    // Terminal tabs are loaded asynchronously via dynamic import.
+    // First, open the shortcuts panel which is always available (registered synchronously).
     await comfyPage.page
       .locator('button[aria-label*="Keyboard Shortcuts"]')
       .click()
     await expect(comfyPage.page.locator('.bottom-panel')).toBeVisible()
 
-    // Open terminal panel (should switch panels)
-    await comfyPage.page
-      .locator('button[aria-label*="Toggle Bottom Panel"]')
-      .click()
+    // Now check if terminal tabs have loaded by looking for the "Logs" tab in sidebar tooltip
+    // Terminal panel toggle only works after tabs are registered asynchronously
+    // Wait for terminal tabs to be available (check via aria-label on sidebar button)
+    const terminalButton = comfyPage.page.locator(
+      'button[aria-label*="Toggle Bottom Panel"]'
+    )
 
-    // Panel should still be visible but showing terminal content
+    // Wait a bit for dynamic import to complete, then check if terminal panel works
+    // The Terminal tabs are loaded via dynamic import, so we need to wait
+    await comfyPage.page.waitForTimeout(1000)
+
+    // Try clicking terminal button - if tabs aren't loaded, panel won't change
+    await terminalButton.click()
+
+    // Check if we're now showing terminal content by looking for Logs tab
+    const logsTab = comfyPage.page.locator('.bottom-panel').getByRole('tab', {
+      name: /Logs/i
+    })
+    const terminalTabExists = await logsTab
+      .isVisible({ timeout: 2000 })
+      .catch(() => false)
+
+    if (!terminalTabExists) {
+      // Terminal not available (cloud distribution or async load failed) - skip test
+      // Close the shortcuts panel first
+      await comfyPage.page
+        .locator('button[aria-label*="Keyboard Shortcuts"]')
+        .click()
+      test.skip()
+      return
+    }
+
+    // Terminal panel is showing - verify panel is visible
     await expect(comfyPage.page.locator('.bottom-panel')).toBeVisible()
 
     // Switch back to shortcuts

browser_tests/tests/menu.spec.ts

@@ -108,13 +108,15 @@ test.describe('Menu', { tag: '@ui' }, () => {
       await expect(checkmark).toHaveClass(/invisible/)
 
       // Click Bottom Panel to toggle it on
+      // Note: Terminal tabs are loaded asynchronously, so this may show shortcuts panel
+      // as a fallback if terminal tabs aren't loaded yet. Either way, bottom panel should show.
       await bottomPanelItem.click()
 
       // Verify menu is still visible after clicking
       await expect(menu).toBeVisible()
       await expect(viewSubmenu).toBeVisible()
 
-      // Verify bottom panel is now visible
+      // Verify bottom panel is now visible (either terminal or shortcuts panel)
       await expect(bottomPanel).toBeVisible()
 
       // Checkmark should now be visible (panel is shown)

src/stores/workspace/bottomPanelStore.ts

@@ -72,8 +72,15 @@ export const useBottomPanelStore = defineStore('bottomPanel', () => {
   }
 
   const toggleBottomPanel = () => {
-    // Legacy method - toggles terminal panel
-    togglePanel('terminal')
+    // Legacy method - toggles terminal panel, falls back to shortcuts if no terminal tabs
+    // Terminal tabs are loaded asynchronously, so may not be available immediately
+    const terminalPanel = panels.value.terminal
+    if (terminalPanel.tabs.length > 0) {
+      togglePanel('terminal')
+    } else {
+      // Fall back to shortcuts panel if terminal tabs aren't loaded yet
+      togglePanel('shortcuts')
+    }
   }
 
   const setActiveTab = (tabId: string) => {