perf: code-split xterm bundle and gate terminal features for cloud (#8528)

## Summary

Code-splits the ~400KB xterm bundle and excludes terminal features from
cloud distribution where they are not needed.

### Changes

- **bottomPanelStore.ts**: Gate terminal tab registration behind
`__DISTRIBUTION__ !== 'cloud'` check with dynamic import, enabling
tree-shaking
- **keybindingService.ts**: Skip logs-terminal keybinding registration
for cloud distribution
- **vite.config.mts**: Add `vendor-xterm` code splitting group

### Bundle Impact

| Distribution | xterm in bundle | Terminal tabs |
|--------------|-----------------|---------------|
| cloud |  No (~400KB saved) | None |
| localhost |  Yes (vendor-xterm chunk) | Logs terminal |
| desktop |  Yes (vendor-xterm chunk) | Logs + Command terminal |

### Verification Script

Run locally to verify xterm exclusion works correctly:

```bash
#!/bin/bash
set -e

echo "=== Verifying xterm bundle exclusion ==="
echo

# Clear Nx cache to ensure fresh builds
pnpm nx reset 2>/dev/null

# Build cloud distribution
echo "Building CLOUD distribution..."
rm -rf dist
DISTRIBUTION=cloud pnpm build --mode production 2>/dev/null

echo "Cloud build - checking for xterm:"
if grep -r "xterm" dist/assets/*.js >/dev/null 2>&1; then
  echo "   FAIL: xterm found in cloud bundle"
  grep -l "xterm" dist/assets/*.js | head -5
else
  echo "   PASS: xterm NOT in cloud bundle"
fi
echo

# Build localhost distribution
echo "Building LOCALHOST distribution..."
pnpm nx reset 2>/dev/null
rm -rf dist
DISTRIBUTION=localhost pnpm build --mode production 2>/dev/null

echo "Localhost build - checking for xterm:"
if grep -r "xterm" dist/assets/*.js >/dev/null 2>&1; then
  echo "   PASS: xterm found in localhost bundle"
  echo "  Files containing xterm:"
  grep -l "xterm" dist/assets/*.js | while read f; do
    size=$(wc -c < "$f")
    echo "    $(basename $f) ($(numfmt --to=iec $size))"
  done
else
  echo "   FAIL: xterm NOT in localhost bundle"
fi
echo

echo "=== Verification complete ==="
```

**Note**: Nx cache must be reset between builds with different
`DISTRIBUTION` values or it may return stale results.

## Test Plan

- [x] Quality gates pass (typecheck, lint, format, tests)
- [x] Cloud build verified: xterm NOT present
- [x] Localhost build verified: xterm present as vendor-xterm chunk

Fixes COM-14129

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8528-perf-code-split-xterm-bundle-and-gate-terminal-features-for-cloud-2fa6d73d365081a093ecc74ca7ce6e7c)
by [Unito](https://www.unito.io)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Refactor**
* Terminal tab declarations adjusted (no user-visible behavior change).
* Bottom panel tabs now load asynchronously; panel toggle falls back to
shortcuts when terminal tabs aren’t loaded.

* **Chores**
* Terminal tabs and related keybindings suppressed in cloud deployments.
  * Core commands wired to a new utility to support widget promotion.

* **Tests**
* E2E tests updated to handle async terminal-tab loading and minor test
cleanup.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
This commit is contained in:
Christian Byrne
2026-02-03 15:15:37 -08:00
committed by GitHub
parent cfc24e3567
commit 32da91ea32
7 changed files with 81 additions and 26 deletions

View File

@@ -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) => {