Pin the host multi-select bar to the top of the page (#793)

The bulk-action bar for multi-select (selected count, Select All /
Deselect All / Delete / close) was rendered inside the Hosts
section, so it scrolled out of view as soon as the user moved
past the first row of cards.

Hoist the bar out of the scroll container and render it as a
sibling right after the top header. It is now always visible below
the header while multi-select is active in the Hosts section, and
slims down visually:

- Single flat row (no inner pill, no secondary border)
- Compact button sizing: h-7, px-2, text-xs, icon-12
- Bottom-only border for separation from the scroll area
- Count label forced to h-7 + leading-none so it vertically
  centers against the buttons

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

.github/workflows/build.yml

@@ -43,6 +43,21 @@ jobs:
       - name: Install deps
         run: npm ci
 
+      - name: Install cross-platform native binaries
+        shell: bash
+        run: |
+          # npm ci only installs optional deps for the host platform, but
+          # electron-builder produces both arm64 and x64 binaries, so we
+          # need the native codex-acp binary for the other architecture too.
+          # Platform-specific codex-acp packages declare cpu/os constraints,
+          # so --force is needed to install the non-host-arch binary.
+          CODEX_VER=$(node -e "console.log(require('./node_modules/@zed-industries/codex-acp/package.json').version)")
+          if [[ "${{ matrix.name }}" == "macos" ]]; then
+            npm install "@zed-industries/codex-acp-darwin-x64@${CODEX_VER}" "@zed-industries/codex-acp-darwin-arm64@${CODEX_VER}" --no-save --force
+          elif [[ "${{ matrix.name }}" == "windows" ]]; then
+            npm install "@zed-industries/codex-acp-win32-x64@${CODEX_VER}" "@zed-industries/codex-acp-win32-arm64@${CODEX_VER}" --no-save --force
+          fi
+
       - name: Set version
         shell: bash
         run: |

AGENTS.md

@@ -18,7 +18,7 @@ This project is wired around three layers: domain (pure logic), application stat
 - **UI** (`components/`, `App.tsx`): Presentation; depends on hooks and domain helpers only.
 
 ## How Things Talk
-- UI calls application hooks → hooks call domain helpers → persistence/config via infrastructure adapters.
+- UI calls application hooks -> hooks call domain helpers -> persistence/config via infrastructure adapters.
 - `App.tsx` wires hooks to components; no business logic should live in components beyond view glue.
 - Local storage keys are centralized in `infrastructure/config/storageKeys.ts`; avoid ad-hoc `localStorage` calls elsewhere.
 
@@ -44,6 +44,12 @@ This project is wired around three layers: domain (pure logic), application stat
 - Avoid direct network/fetch in components; add a service/adaptor first.
 - Maintain ASCII-only unless required by existing file content.
 
+## Review Boundaries
+- Treat `electron/cli/*`, `netcatty-tool-cli`, the CLI discovery file, and the local TCP bridge as internal Netcatty integration surfaces unless a task explicitly says otherwise.
+- Do not review those surfaces as public APIs by default, and do not assume they must support third-party callers, manual launches, or non-Netcatty agents.
+- On supported first-party paths, assume Netcatty's own launcher provides required integration environment such as `NETCATTY_TOOL_CLI_DISCOVERY_FILE`.
+- If a review concern depends on external exposure, third-party compatibility, or public API stability, call it out as out of scope unless the task explicitly includes that contract.
+
 ---
 
 ## Aside Panel Design System
@@ -54,20 +60,20 @@ VaultView subpages (Hosts, Keychain, Port Forwarding, Snippets, Known Hosts) sha
 
 Import from `./ui/aside-panel`:
 ```tsx
-import { 
-  AsidePanel, 
-  AsidePanelHeader, 
-  AsidePanelContent, 
+import {
+  AsidePanel,
+  AsidePanelHeader,
+  AsidePanelContent,
   AsidePanelFooter,
   AsideActionMenu,
-  AsideActionMenuItem 
+  AsideActionMenuItem
 } from "./ui/aside-panel";
 ```
 
 ### Basic Usage
 ```tsx
-<AsidePanel 
-  open={isOpen} 
+<AsidePanel
+  open={isOpen}
   onClose={handleClose}
   title="Panel Title"
   subtitle="Optional subtitle"

application/i18n/locales/en.ts

@@ -21,6 +21,7 @@ const en: Messages = {
   'common.clear': 'Clear',
   'common.optional': 'Optional',
   'common.selectPlaceholder': 'Select...',
+  'common.add': 'Add',
   'common.rename': 'Rename',
   'common.refresh': 'Refresh',
   'common.continue': 'Continue',
@@ -55,6 +56,11 @@ const en: Messages = {
   'confirm.deleteHost': 'Delete Host "{name}"?',
   'confirm.deleteIdentity': 'Delete Identity "{name}"?',
   'confirm.removeProvider': 'Remove provider "{name}"?',
+  'confirm.closeBusyTerminal.title': 'Confirm close',
+  'confirm.closeBusyTerminal.message': 'Process "{command}" is still running and will be terminated.',
+  'confirm.closeBusyTerminal.messageWithMore': 'Process "{command}" and {count} other running process(es) will be terminated.',
+  'confirm.closeBusyTerminal.cancel': 'Cancel',
+  'confirm.closeBusyTerminal.close': 'Close',
   'dialog.createWorkspace.title': 'Create Workspace',
   'dialog.renameWorkspace.title': 'Rename workspace',
   'dialog.renameSession.title': 'Rename session',
@@ -196,6 +202,15 @@ const en: Messages = {
   'settings.application.github.subtitle': 'Source code',
   'settings.application.whatsNew': "What's new",
   'settings.application.whatsNew.subtitle': 'Show release notes',
+  'settings.application.openExternal.failedTitle': 'Cannot open link',
+  'settings.application.openExternal.failedBody': 'The link could not be opened in either the system browser or the built-in browser window.',
+  'settings.vault.title': 'Vault',
+  'settings.vault.showRecentHosts': 'Show recently connected hosts',
+  'settings.vault.showRecentHostsDesc': 'Display a section of recently connected hosts at the top of the vault',
+  'settings.vault.showOnlyUngroupedHostsInRoot': 'Only show ungrouped hosts at root',
+  'settings.vault.showOnlyUngroupedHostsInRootDesc': 'When enabled, the root host list only shows hosts without a group. Open a group from the sidebar to see grouped hosts.',
+  'settings.vault.showSftpTab': 'Show SFTP tab',
+  'settings.vault.showSftpTabDesc': 'Display the standalone SFTP view in the top tab bar. When hidden, use the in-session SFTP side panel instead.',
 
   // Update notifications
   'update.available.title': 'Update Available',
@@ -231,14 +246,11 @@ const en: Messages = {
   'settings.appearance.themeColor.desc': 'Pick a preset palette for each theme',
   'settings.appearance.themeColor.light': 'Light palette',
   'settings.appearance.themeColor.dark': 'Dark palette',
-  'settings.appearance.immersiveMode': 'Immersive Mode',
-  'settings.appearance.immersiveMode.desc':
-    'When enabled, the UI chrome (tab bar, sidebar, status bar) adapts its colors to match the active terminal theme for a visually cohesive experience.',
   'settings.appearance.customCss': 'Custom CSS',
   'settings.appearance.customCss.desc':
-    'Add custom CSS to personalize the app appearance. Changes apply immediately.',
+    'Add custom CSS to personalize the app appearance. Changes apply immediately. Major UI regions expose a [data-section="..."] attribute you can target — e.g. snippets-panel, host-details-panel, group-details-panel, serial-host-details-panel, ai-chat-panel, vault-sidebar, vault-main, vault-hosts-header, vault-host-list, vault-view, terminal-workspace, terminal-workspace-sidebar, top-tabs.',
   'settings.appearance.customCss.placeholder':
-    '/* Example: */\n.terminal { background: #1a1a2e !important; }\n:root { --radius: 0.25rem; }',
+    '/* Examples — use !important to beat Tailwind utility specificity */\n\n/* Make snippet sidebar text larger */\n[data-section="snippets-panel"] {\n  font-size: 14px !important;\n}\n\n/* Custom terminal background */\n.terminal { background: #1a1a2e !important; }\n\n/* Tweak global border radius */\n:root { --radius: 0.25rem; }',
   'settings.appearance.language': 'Language',
   'settings.appearance.language.desc': 'Choose the UI language',
   'settings.appearance.uiFont': 'Interface Font',
@@ -250,6 +262,8 @@ const en: Messages = {
   'settings.terminal.themeModal.darkThemes': 'Dark Themes',
   'settings.terminal.themeModal.lightThemes': 'Light Themes',
   'settings.terminal.theme.selectButton': 'Select Theme',
+  'settings.terminal.theme.followApp': 'Follow Application Theme',
+  'settings.terminal.theme.followApp.desc': 'Automatically match the terminal background to the current app theme for a seamless look.',
   'settings.terminal.section.font': 'Font',
   'settings.terminal.section.cursor': 'Cursor',
   'settings.terminal.section.keyboard': 'Keyboard',
@@ -292,6 +306,12 @@ const en: Messages = {
   'settings.terminal.behavior.bracketedPaste': 'Bracketed paste mode',
   'settings.terminal.behavior.bracketedPaste.desc':
     'Wrap pasted text with escape sequences so the shell can distinguish paste from typed input. Disable if you see ^[[200~ artifacts.',
+  'settings.terminal.behavior.clearWipesScrollback': '`clear` wipes scrollback',
+  'settings.terminal.behavior.clearWipesScrollback.desc':
+    'Make `clear` also wipe the scrollback buffer (POSIX default). Disable to keep history visible after `clear`.',
+  'settings.terminal.behavior.preserveSelectionOnInput': 'Keep selection while typing',
+  'settings.terminal.behavior.preserveSelectionOnInput.desc':
+    'Don\'t clear mouse-selected text when typing — useful for selecting a path then pasting it after a command prefix like `sz `.',
   'settings.terminal.behavior.osc52Clipboard': 'OSC-52 clipboard',
   'settings.terminal.behavior.osc52Clipboard.desc':
     'Allow remote programs (tmux, vim, etc.) to access the local clipboard via OSC-52 escape sequences.',
@@ -327,6 +347,14 @@ const en: Messages = {
   'settings.terminal.scrollback.rows': 'Number of rows *',
   'settings.terminal.keywordHighlight.title': 'Keyword highlighting',
   'settings.terminal.keywordHighlight.resetColors': 'Reset to default colors',
+  'settings.terminal.keywordHighlight.addCustom': 'Add Custom Rule',
+  'settings.terminal.keywordHighlight.editCustom': 'Edit Rule',
+  'settings.terminal.keywordHighlight.labelField': 'Label & Color',
+  'settings.terminal.keywordHighlight.labelPlaceholder': 'Label (e.g., Down)',
+  'settings.terminal.keywordHighlight.patternField': 'Regex Pattern',
+  'settings.terminal.keywordHighlight.patternPlaceholder': 'Regex (e.g., \\bdown\\b)',
+  'settings.terminal.keywordHighlight.invalidPattern': 'Invalid regex pattern',
+  'settings.terminal.keywordHighlight.preview': 'Preview',
   'settings.terminal.section.localShell': 'Local Shell',
   'settings.terminal.localShell.shell': 'Shell executable',
   'settings.terminal.localShell.shell.desc': 'Path to the shell executable (e.g., /bin/zsh, pwsh.exe). Leave empty for system default.',
@@ -334,6 +362,11 @@ const en: Messages = {
   'settings.terminal.localShell.shell.detected': 'Detected',
   'settings.terminal.localShell.shell.notFound': 'Shell executable not found',
   'settings.terminal.localShell.shell.isDirectory': 'Path is a directory, not an executable',
+  'settings.terminal.localShell.shell.default': 'System Default',
+  'settings.terminal.localShell.shell.custom': 'Custom...',
+  'settings.terminal.localShell.shell.customPath': 'Shell executable path',
+  'settings.terminal.localShell.shell.commonPaths': 'Common paths',
+  'settings.terminal.localShell.shell.pathValid': 'Path valid',
   'settings.terminal.localShell.startDir': 'Starting directory',
   'settings.terminal.localShell.startDir.desc': 'Directory to start in when opening a local terminal. Leave empty for home directory.',
   'settings.terminal.localShell.startDir.placeholder': 'Home directory',
@@ -352,9 +385,25 @@ const en: Messages = {
   // Settings > Terminal > Rendering
   'settings.terminal.section.rendering': 'Rendering',
   'settings.terminal.rendering.renderer': 'Renderer',
-  'settings.terminal.rendering.renderer.desc': 'Choose the terminal rendering technology. Auto will use Canvas on low-memory devices. Changes take effect on new terminal sessions.',
+  'settings.terminal.rendering.renderer.desc': 'Choose the terminal rendering technology. Auto will use DOM on low-memory devices. Changes take effect on new terminal sessions.',
   'settings.terminal.rendering.auto': 'Auto',
 
+  // Settings > Terminal > Workspace Focus Indicator
+  'settings.terminal.section.workspaceFocus': 'Workspace Focus Indicator',
+  'settings.terminal.workspaceFocus.style': 'Focus indicator style',
+  'settings.terminal.workspaceFocus.style.desc': 'How to indicate which pane is focused in split view.',
+  'settings.terminal.workspaceFocus.dim': 'Dim unfocused panes',
+  'settings.terminal.workspaceFocus.border': 'Border on focused pane',
+
+  // Settings > Terminal > Autocomplete
+  'settings.terminal.section.autocomplete': 'Autocomplete',
+  'settings.terminal.autocomplete.enabled': 'Enable autocomplete',
+  'settings.terminal.autocomplete.enabled.desc': 'Show command suggestions based on history and command specs as you type.',
+  'settings.terminal.autocomplete.ghostText': 'Ghost text',
+  'settings.terminal.autocomplete.ghostText.desc': 'Show inline gray suggestion text after the cursor (like fish shell).',
+  'settings.terminal.autocomplete.popupMenu': 'Popup menu',
+  'settings.terminal.autocomplete.popupMenu.desc': 'Show a floating list of multiple suggestions.',
+
   // Settings > Shortcuts
   'settings.shortcuts.section.scheme': 'Hotkey Scheme',
   'settings.shortcuts.scheme.label': 'Keyboard shortcuts',
@@ -366,6 +415,7 @@ const en: Messages = {
   'settings.shortcuts.resetAll': 'Reset All',
   'settings.shortcuts.recording': 'Press keys...',
   'settings.shortcuts.none': 'None',
+  'settings.shortcuts.setDisabled': 'Set to disabled',
   'settings.shortcuts.category.tabs': 'Tabs',
   'settings.shortcuts.category.terminal': 'Terminal',
   'settings.shortcuts.category.navigation': 'Navigation',
@@ -405,13 +455,54 @@ const en: Messages = {
   'sync.toast.completedMessage': 'Sync completed successfully',
   'sync.toast.errorTitle': 'Sync Error',
   'sync.autoSync.failedTitle': 'Sync failed',
+  'sync.autoSync.inspectFailedTitle': 'Sync paused',
+  'sync.autoSync.inspectFailedMessage': 'Could not reach the cloud to check for changes. Auto-sync will retry when data changes or the app is restarted.',
   'sync.autoSync.syncedTitle': 'Synced from cloud',
   'sync.autoSync.syncedMessage': 'Your data has been updated from the cloud.',
   'sync.autoSync.noProvider': 'No cloud provider connected. Open Settings → Sync & Cloud to connect one.',
   'sync.autoSync.alreadySyncing': 'Sync is already in progress.',
+  'sync.autoSync.restoreInProgress': 'A vault restore is in progress in another window. Please wait for it to finish.',
+  'sync.autoSync.interruptedApplyTitle': 'Sync paused — previous restore interrupted',
+  'sync.autoSync.interruptedApplyMessage': 'A previous restore did not finish cleanly, so the local vault may be inconsistent. Open Settings → Sync & Cloud → Restore and apply a protective backup before auto-sync resumes.',
   'sync.autoSync.vaultLocked': 'Vault is locked. Open Settings → Sync & Cloud to unlock.',
   'sync.autoSync.conflictDetected': 'Sync conflict detected. Open Settings → Sync & Cloud to resolve.',
   'sync.autoSync.syncFailed': 'Sync failed',
+  'sync.autoSync.restoredTitle': 'Vault restored',
+  'sync.autoSync.restoredMessage': 'Your vault has been restored from the cloud.',
+  'sync.autoSync.keptLocalTitle': 'Kept local vault',
+  'sync.autoSync.keptLocalMessage': 'Your empty local vault was kept. Cloud data was not applied.',
+  'sync.autoSync.emptyVaultConflict.title': 'Empty Vault Detected',
+  'sync.autoSync.emptyVaultConflict.description': 'Your local vault is empty, but the cloud has data. This usually happens after an update or storage reset. What would you like to do?',
+  'sync.autoSync.emptyVaultConflict.cloudLabel': 'Cloud',
+  'sync.autoSync.emptyVaultConflict.restore': 'Restore from Cloud',
+  'sync.autoSync.emptyVaultConflict.restoreDesc': 'Recommended — recover your hosts, keys, and snippets from the cloud backup',
+  'sync.autoSync.emptyVaultConflict.keepEmpty': 'Keep Empty',
+  'sync.autoSync.emptyVaultConflict.keepEmptyDesc': 'Start fresh with an empty vault',
+  'sync.autoSync.emptyVaultConflict.cloudSummary': '{hosts} hosts, {keys} keys, {snippets} snippets',
+  'sync.autoSync.emptyVaultManual': 'Cannot sync: the local vault is empty. Restore from a local backup or enable Force Push in the sync panel first.',
+
+  'sync.blocked.title': 'Sync paused',
+  'sync.blocked.reason.bulkShrink': 'Would delete {lost} of {baseCount} {entityType} from cloud ({percent}% reduction).',
+  'sync.blocked.reason.largeShrink': 'Would delete {lost} {entityType} from cloud.',
+  'sync.blocked.detail': 'This is usually caused by a degraded local state (keychain failure, partial data load). Restore from a local backup, or force-push if you truly meant to remove these entries.',
+  'sync.blocked.restoreButton': 'Restore from local backup',
+  'sync.blocked.forcePushButton': 'Force push anyway',
+
+  'sync.forcePush.title': 'Confirm force push',
+  'sync.forcePush.body': 'You are about to remove {lost} {entityType} from the cloud. This cannot be undone. Proceed?',
+  'sync.forcePush.confirm': 'Yes, push anyway',
+  'sync.forcePush.cancel': 'Cancel',
+
+  'sync.entityType.hosts': 'hosts',
+  'sync.entityType.keys': 'keys',
+  'sync.entityType.identities': 'identities',
+  'sync.entityType.snippets': 'snippets',
+  'sync.entityType.customGroups': 'groups',
+  'sync.entityType.snippetPackages': 'snippet packages',
+  'sync.entityType.knownHosts': 'known-host entries',
+  'sync.entityType.portForwardingRules': 'port-forwarding rules',
+  'sync.entityType.groupConfigs': 'group configs',
+
   'sync.credentialsUnavailable': 'This device cannot decrypt some saved credentials. Re-enter credentials locally before syncing.',
   'time.never': 'Never',
   'time.justNow': 'Just now',
@@ -445,8 +536,24 @@ const en: Messages = {
   'vault.groups.placeholder.example': 'e.g. Production',
   'vault.groups.parentLabel': 'Parent',
   'vault.groups.pathLabel': 'Path',
+  'vault.groups.settings': 'Group Settings',
+  'vault.groups.details': 'Group Details',
+  'vault.groups.details.general': 'General',
+  'vault.groups.details.ssh': 'SSH',
+  'vault.groups.details.telnet': 'Telnet',
+  'vault.groups.details.advanced': 'Advanced',
+  'vault.groups.details.appearance': 'Appearance',
+  'vault.groups.details.mosh': 'Mosh',
+  'vault.groups.details.parentGroup': 'Parent Group',
+  'vault.groups.details.none': 'None',
+  'vault.groups.details.inherited': 'Inherited from group',
+  'vault.groups.details.addProtocol': 'Add Protocol',
+  'vault.groups.details.removeProtocol': 'Remove Protocol',
+  'vault.groups.details.fontFamily': 'Font Family',
+  'vault.groups.details.fontSize': 'Font Size',
   'vault.groups.errors.required': 'Group name is required.',
   'vault.groups.errors.invalidChars': "Group name cannot include '/' or '\\\\'.",
+  'vault.groups.errors.duplicatePath': 'A group with this name already exists at this location.',
 
   'vault.managedSource.unmanage': 'Unmanage',
   'vault.managedSource.unmanageSuccess': 'Successfully unmanaged group',
@@ -470,6 +577,10 @@ const en: Messages = {
   'vault.hosts.export.toast.successWithSkipped': 'Exported {count} hosts to CSV ({skipped} unsupported hosts skipped)',
   'vault.hosts.export.toast.noHosts': 'No hosts to export',
   'vault.hosts.allHosts': 'All hosts',
+  'vault.hosts.pinned': 'Pinned',
+  'vault.hosts.recentlyConnected': 'Recently Connected',
+  'vault.hosts.pinToTop': 'Pin to Top',
+  'vault.hosts.unpin': 'Unpin',
   'vault.hosts.copyCredentials': 'Copy Credentials',
   'vault.hosts.copyCredentials.toast.success': 'Credentials copied to clipboard',
   'vault.hosts.copyCredentials.toast.noPassword': 'No password saved for this host',
@@ -479,6 +590,7 @@ const en: Messages = {
   'vault.hosts.deselectAll': 'Deselect All',
   'vault.hosts.deleteSelected': 'Delete ({count})',
   'vault.hosts.deleteMultiple.success': 'Deleted {count} hosts',
+  'vault.hosts.moveToGroup.success': 'Moved {host} to {group}',
   'vault.hosts.empty.title': 'Set up your hosts',
   'vault.hosts.empty.desc': 'Save hosts to quickly connect to your servers, VMs, and containers.',
 
@@ -604,6 +716,8 @@ const en: Messages = {
   'sftp.filter.placeholder': 'Filter by filename...',
   'sftp.bookmark.add': 'Bookmark this path',
   'sftp.bookmark.remove': 'Remove bookmark',
+  'sftp.bookmark.addGlobal': '+Global',
+  'sftp.bookmark.addGlobalTooltip': 'Save as global bookmark (shared across all hosts)',
   'sftp.bookmark.empty': 'No bookmarks yet',
   'sftp.columns.name': 'Name',
   'sftp.columns.modified': 'Modified',
@@ -620,8 +734,21 @@ const en: Messages = {
   'sftp.dragDropToUpload': 'Drag and drop files here to upload',
   'sftp.retry': 'Retry',
   'sftp.context.open': 'Open',
+  'sftp.context.navigateTo': 'Navigate to',
+  'sftp.context.moveTo': 'Move to...',
+  'sftp.context.moveToParent': 'Move to parent directory',
+  'sftp.moveTo.title': 'Move to directory',
+  'sftp.moveTo.placeholder': 'Enter target directory path',
+  'sftp.moveTo.confirm': 'Move',
+  'sftp.moveTo.pathNotFound': 'Directory not found or inaccessible',
   'sftp.context.download': 'Download',
   'sftp.context.copyToOtherPane': 'Copy to other pane',
+  'sftp.viewMode.label': 'View mode',
+  'sftp.viewMode.list': 'List view',
+  'sftp.viewMode.tree': 'Tree view',
+  'sftp.tree.loadError': 'Failed to load directory',
+  'sftp.tree.loading': 'Loading...',
+  'sftp.kind.folder': 'Folder',
   'sftp.context.rename': 'Rename',
   'sftp.context.permissions': 'Permissions',
   'sftp.context.delete': 'Delete',
@@ -642,6 +769,13 @@ const en: Messages = {
   'sftp.transfers.active': '{count} active',
   'sftp.transfers.clearCompleted': 'Clear completed',
   'sftp.transfers.calculatingTotal': 'Calculating total size...',
+  'sftp.transfers.filesCount': '{count} files',
+  'sftp.transfers.filesProgress': '{current}/{total} files',
+  'sftp.transfers.expandChildren': 'Show files',
+  'sftp.transfers.collapseChildren': 'Hide files',
+  'sftp.transfers.expandChildList': 'Show detail',
+  'sftp.transfers.collapseChildList': 'Hide',
+  'sftp.transfers.dragToResize': 'Drag to resize',
   'sftp.goUp': 'Go up',
   'sftp.goToTerminalCwd': 'Go to terminal directory',
   'sftp.encoding.label': 'Filename Encoding',
@@ -661,6 +795,9 @@ const en: Messages = {
   'sftp.deleteConfirm.single': 'Delete "{name}"?',
   'sftp.deleteConfirm.title': 'Delete {count} item(s)?',
   'sftp.deleteConfirm.desc': 'This action cannot be undone. The following will be deleted:',
+  'sftp.deleteConfirm.descSingle': 'This action cannot be undone.',
+  'sftp.deleteConfirm.host': 'Host',
+  'sftp.deleteConfirm.path': 'Path',
   'sftp.error.loadFailed': 'Failed to load directory',
   'sftp.error.downloadFailed': 'Download failed',
   'sftp.error.uploadFailed': 'Upload failed',
@@ -752,6 +889,15 @@ const en: Messages = {
 
   // Settings > SFTP File Associations
   'settings.tab.sftpFileAssociations': 'SFTP',
+  'settings.sftp.transferConcurrency': 'Transfer Concurrency',
+  'settings.sftp.transferConcurrency.desc': 'Number of files to transfer in parallel when uploading or downloading folders. Higher values may improve speed but can overwhelm some servers.',
+  'settings.sftp.defaultOpener': 'Default File Opener',
+  'settings.sftp.defaultOpener.desc': 'Choose the default application for opening files without a specific file association',
+  'settings.sftp.defaultOpener.ask': 'Always ask',
+  'settings.sftp.defaultOpener.askDesc': 'Show a dialog to choose an application each time',
+  'settings.sftp.defaultOpener.builtInDesc': 'Open text files in the built-in editor by default',
+  'settings.sftp.defaultOpener.systemApp': 'Choose Application...',
+  'settings.sftp.defaultOpener.systemAppDesc': 'Open files with a specific application by default',
   'settings.sftpFileAssociations.title': 'SFTP File Associations',
   'settings.sftpFileAssociations.desc': 'Configure default applications for opening files by extension',
   'settings.sftpFileAssociations.extension': 'Extension',
@@ -780,6 +926,13 @@ const en: Messages = {
   'settings.sftp.autoOpenSidebar.enable': 'Enable auto-open sidebar',
   'settings.sftp.autoOpenSidebar.enableDesc': 'The SFTP sidebar will open automatically when a terminal session connects to a remote host',
 
+  'settings.sftp.defaultViewMode': 'Default View Mode',
+  'settings.sftp.defaultViewMode.desc': 'Choose the default view mode when opening a new SFTP tab. Per-host preferences override this setting.',
+  'settings.sftp.defaultViewMode.list': 'List View',
+  'settings.sftp.defaultViewMode.listDesc': 'Display files in a flat list for the current directory',
+  'settings.sftp.defaultViewMode.tree': 'Tree View',
+  'settings.sftp.defaultViewMode.treeDesc': 'Display files in a hierarchical tree structure',
+
   'sftp.autoSync.success': 'File synced to remote: {fileName}',
   'sftp.autoSync.error': 'Failed to sync file: {error}',
 
@@ -825,6 +978,8 @@ const en: Messages = {
   'qs.search.placeholder': 'Search hosts or tabs',
   'qs.jumpTo': 'Jump To',
   'qs.localTerminal': 'Local Terminal',
+  'qs.localShells': 'Local Shells',
+  'qs.default': 'Default',
 
   // Select Host panel
   'selectHost.title': 'Select Host',
@@ -890,6 +1045,14 @@ const en: Messages = {
   'hostDetails.distro.option.almalinux': 'AlmaLinux',
   'hostDetails.distro.option.oracle': 'Oracle Linux',
   'hostDetails.distro.option.kali': 'Kali Linux',
+  'hostDetails.distro.option.cisco': 'Cisco',
+  'hostDetails.distro.option.juniper': 'Juniper Networks',
+  'hostDetails.distro.option.huawei': 'Huawei',
+  'hostDetails.distro.option.hpe': 'HPE / H3C',
+  'hostDetails.distro.option.mikrotik': 'MikroTik',
+  'hostDetails.distro.option.fortinet': 'Fortinet',
+  'hostDetails.distro.option.paloalto': 'Palo Alto Networks',
+  'hostDetails.distro.option.zyxel': 'ZyXEL',
   'hostDetails.section.mosh': 'Mosh',
   'hostDetails.username.placeholder': 'Username',
   'hostDetails.password.placeholder': 'Password',
@@ -914,10 +1077,16 @@ const en: Messages = {
   'hostDetails.agentForwarding.agentNotRunning': 'SSH Agent is not available',
   'hostDetails.agentForwarding.agentNotRunningHint': 'No SSH agent detected. Enable OpenSSH Authentication Agent in Windows Services, or use a compatible agent such as Bitwarden, 1Password, or gpg-agent.',
   'hostDetails.section.agentForwarding': 'SSH Agent',
+  'hostDetails.section.deviceType': 'Device Type',
+  'hostDetails.deviceType': 'Network Device Mode',
+  'hostDetails.deviceType.desc': 'Enable for network equipment (switches, routers, firewalls) connected via SSH. Commands are sent as-is without shell wrapping, compatible with vendor CLIs like Huawei VRP and Cisco IOS.',
+  'hostDetails.deviceType.warning': 'AI agent commands will be sent directly without exit code tracking. Only enable for devices that do not run a standard shell.',
   'hostDetails.section.legacyAlgorithms': 'Legacy Algorithms',
   'hostDetails.legacyAlgorithms': 'Allow Legacy Algorithms',
   'hostDetails.legacyAlgorithms.desc': 'Enable deprecated SSH algorithms (diffie-hellman-group1, ssh-dss, 3des-cbc, etc.) for connecting to older network equipment.',
   'hostDetails.legacyAlgorithms.warning': 'These algorithms have known security weaknesses. Only enable for legacy devices that do not support modern cryptography.',
+  'hostDetails.backspaceBehavior': 'Backspace Behavior',
+  'hostDetails.backspaceBehavior.default': 'Default',
   'hostDetails.jumpHosts': 'Proxy via Hosts',
   'hostDetails.jumpHosts.hops': '{count} hop(s)',
   'hostDetails.jumpHosts.direct': 'Direct',
@@ -1024,11 +1193,12 @@ const en: Messages = {
   'terminal.toolbar.openSftp': 'Open SFTP',
   'terminal.toolbar.availableAfterConnect': 'Available after connect',
   'terminal.toolbar.sftp': 'SFTP',
+  'terminal.toolbar.more': 'More actions',
   'terminal.toolbar.scripts': 'Scripts',
   'terminal.toolbar.library': 'Library',
   'terminal.toolbar.noSnippets': 'No snippets available',
   'terminal.toolbar.terminalSettings': 'Terminal settings',
-  'terminal.toolbar.searchTerminal': 'Search terminal (Ctrl+F)',
+  'terminal.toolbar.searchTerminal': 'Search terminal',
   'terminal.toolbar.search': 'Search',
   'terminal.toolbar.broadcast': 'Broadcast',
   'terminal.toolbar.broadcastEnable': 'Enable Broadcast Mode',
@@ -1084,6 +1254,7 @@ const en: Messages = {
   'terminal.search.nextMatch': 'Next match (Enter)',
   'terminal.menu.copy': 'Copy',
   'terminal.menu.paste': 'Paste',
+  'terminal.menu.pasteSelection': 'Paste Selection',
   'terminal.menu.selectAll': 'Select All',
   'terminal.menu.splitHorizontal': 'Split Horizontal',
   'terminal.menu.splitVertical': 'Split Vertical',
@@ -1125,8 +1296,14 @@ const en: Messages = {
   'terminal.themeModal.globalTheme': 'Global Theme',
   'terminal.themeModal.globalFont': 'Global Font',
   'terminal.themeModal.fontSize': 'Font Size',
+  'terminal.themeModal.fontWeight': 'Font Weight',
   'terminal.themeModal.livePreview': 'Live Preview',
   'terminal.themeModal.themeType': '{type} theme',
+  'terminal.hiddenTheme.title': 'Current hidden theme',
+  'terminal.hiddenTheme.desc': 'This theme is hidden from manual picks and will be replaced when you choose another theme.',
+  'topTabs.toggleTheme.systemExitTitle': 'System theme is active',
+  'topTabs.toggleTheme.systemExitMessage': 'Open Settings to choose a fixed Light or Dark theme.',
+  'topTabs.toggleTheme.openSettings': 'Open Settings',
 
   // Custom Themes
   'terminal.customTheme.section': 'Custom Themes',
@@ -1256,6 +1433,47 @@ const en: Messages = {
   'cloudSync.history.download': 'Download',
   'cloudSync.history.resolved': 'Resolved',
   'cloudSync.history.error': 'Error',
+  'cloudSync.localBackups.title': 'Local Backup History',
+  'cloudSync.localBackups.desc': 'Netcatty keeps local restore points before app version changes and before vault restores.',
+  'cloudSync.localBackups.retentionTitle': 'Backup Retention',
+  'cloudSync.localBackups.retentionDesc': 'Choose how many local backups Netcatty should keep.',
+  'cloudSync.localBackups.maxCount': 'Max backups',
+  'cloudSync.localBackups.maxSaved': 'Saved backup retention: {count}',
+  'cloudSync.localBackups.maxInvalid': 'Please enter a number between 1 and 100.',
+  'cloudSync.localBackups.empty': 'No local backups yet.',
+  'cloudSync.localBackups.reason.appVersionChange': 'Before app version change',
+  'cloudSync.localBackups.reason.beforeRestore': 'Before restore',
+  'cloudSync.localBackups.versionChange': '{from} -> {to}',
+  'cloudSync.localBackups.counts': '{hosts} hosts, {keys} keys, {snippets} snippets',
+  'cloudSync.localBackups.restore': 'Restore',
+  'cloudSync.localBackups.restoreSuccess': 'Local backup restored.',
+  'cloudSync.localBackups.restoreFailedTitle': 'Restore failed',
+  'cloudSync.localBackups.restoreMissing': 'Backup not found.',
+  'cloudSync.localBackups.protectiveBackupFailed': 'Safety backup could not be created, so the restore was aborted to protect your current data. Resolve the underlying issue (e.g. keychain access) and try again. Details: {message}',
+  'cloudSync.localBackups.restoreConfirmTitle': 'Restore this backup?',
+  'cloudSync.localBackups.restoreConfirmDesc': 'Your current hosts, keys, snippets and settings will be replaced with the contents of this backup. A protective snapshot of your current data is taken automatically first.',
+  'cloudSync.localBackups.restoreConfirmButton': 'Restore',
+  'cloudSync.localBackups.restoreConfirmCancel': 'Cancel',
+  'cloudSync.localBackups.unavailableTitle': 'Local backups unavailable',
+  'cloudSync.localBackups.unavailableDesc': 'This platform does not expose a secure keychain to Netcatty, so local backups cannot be written safely. Install Netcatty on a system with a supported keychain to enable the local backup history.',
+  'cloudSync.localBackups.lockedTitle': 'Master key required',
+  'cloudSync.localBackups.lockedDesc': 'Set up or unlock your master key before restoring a backup, so restored credentials remain encrypted.',
+  'cloudSync.revisionHistory.viewButton': 'History',
+  'cloudSync.revisionHistory.title': 'Vault Version History',
+  'cloudSync.revisionHistory.description': 'Browse and restore previous versions of your vault from the Gist revision history.',
+  'cloudSync.revisionHistory.empty': 'No revisions found.',
+  'cloudSync.revisionHistory.current': 'Current',
+  'cloudSync.revisionHistory.revision': 'Revision',
+  'cloudSync.revisionHistory.revisionPreview': 'Revision Contents',
+  'cloudSync.revisionHistory.device': 'Device',
+  'cloudSync.revisionHistory.hosts': 'Hosts',
+  'cloudSync.revisionHistory.keys': 'Keys',
+  'cloudSync.revisionHistory.snippets': 'Snippets',
+  'cloudSync.revisionHistory.identities': 'Identities',
+  'cloudSync.revisionHistory.restoreButton': 'Restore This Version',
+  'cloudSync.revisionHistory.restored': 'Vault restored from selected revision.',
+  'cloudSync.revisionHistory.revisionNotFound': 'Revision not found or does not contain vault data.',
+  'cloudSync.revisionHistory.decryptFailed': 'Cannot decrypt this revision. It may have been encrypted with a different master password.',
   'cloudSync.changeKey.title': 'Change Master Key',
   'cloudSync.changeKey.current': 'Current Master Key',
   'cloudSync.changeKey.new': 'New Master Key',
@@ -1423,6 +1641,9 @@ const en: Messages = {
   'tabs.logPrefix': 'Log:',
   'tabs.logLocal': 'Local',
   'tabs.copyTab': 'Copy Tab',
+  'tabs.closeOthers': 'Close Others',
+  'tabs.closeToRight': 'Close Tabs to the Right',
+  'tabs.closeAll': 'Close All',
   'keychain.edit.labelRequired': 'Label *',
   'keychain.edit.keyLabelPlaceholder': 'Key label',
   'keychain.edit.privateKeyRequired': 'Private key *',
@@ -1462,6 +1683,8 @@ const en: Messages = {
   'snippets.breadcrumb.separator': '›',
   'snippets.empty.title': 'Create snippet',
   'snippets.empty.desc': 'Save your most used commands as snippets to reuse them in one click.',
+  'snippets.search.noResults.title': 'No matches',
+  'snippets.search.noResults.desc': 'No snippets or packages match "{query}". Try a different search term or clear the search to browse.',
   'snippets.section.packages': 'Packages',
   'snippets.section.snippets': 'Snippets',
   'snippets.package.count': '{count} snippet(s)',
@@ -1522,6 +1745,7 @@ const en: Messages = {
   'serial.field.localEchoDesc': 'Echo typed characters locally (for devices without remote echo)',
   'serial.field.lineMode': 'Line Mode',
   'serial.field.lineModeDesc': 'Buffer input and send on Enter (instead of character-by-character)',
+  'serial.field.charset': 'Charset',
   'serial.connectionError': 'Failed to connect to serial port',
   'serial.field.baudRatePlaceholder': 'Select or enter baud rate...',
   'serial.field.baudRateEmpty': 'Enter a custom baud rate',
@@ -1542,10 +1766,7 @@ const en: Messages = {
   'keyboard.interactive.enterResponse': 'Enter response',
   'keyboard.interactive.submit': 'Submit',
   'keyboard.interactive.verifying': 'Verifying...',
-  'keyboard.interactive.fill': 'Fill',
-  'keyboard.interactive.fillSaved': 'Fill with saved password',
-  'keyboard.interactive.useSaved': 'Use saved',
-  'keyboard.interactive.useSavedPassword': 'Use saved password',
+  'keyboard.interactive.savePassword': 'Save password',
 
   // Passphrase Modal for encrypted SSH keys
   'passphrase.title': 'SSH Key Passphrase',
@@ -1588,16 +1809,24 @@ const en: Messages = {
   'ai.providers.noMatchingModels': 'No matching models',
   'ai.providers.clickToLoadModels': 'Click to load models',
   'ai.providers.showingModels': 'Showing first 100 of {count} models. Type to filter.',
+  'ai.providers.advancedParams': 'Advanced Parameters',
+  'ai.providers.advancedParams.hint': 'Leave blank to use provider defaults.',
+  'ai.providers.advancedParams.maxTokens.placeholder': 'e.g. 4096',
+  'ai.providers.advancedParams.default': 'Provider default',
 
   // AI Codex
   'ai.codex': 'Codex',
   'ai.codex.title': 'Codex CLI',
-  'ai.codex.description': 'Uses codex + codex-acp for ACP protocol streaming. Login with ChatGPT subscription here, or configure an OpenAI provider API key (passed as CODEX_API_KEY).',
+  'ai.codex.description': 'Uses codex + codex-acp for ACP protocol streaming. Login with ChatGPT here, or enable an OpenAI-compatible provider API key and custom endpoint in Settings.',
   'ai.codex.detecting': 'Detecting...',
   'ai.codex.notFound': 'Not found',
   'ai.codex.awaitingLogin': 'Awaiting login',
   'ai.codex.connectedChatGPT': 'Connected via ChatGPT',
   'ai.codex.connectedApiKey': 'Connected via API key',
+  'ai.codex.connectedCustomConfig': 'Connected via ~/.codex/config.toml',
+  'ai.codex.customConfigIncomplete': 'Custom config detected (env var missing)',
+  'ai.codex.customConfigHint': 'Using custom provider "{provider}" configured in ~/.codex/config.toml — no ChatGPT login needed.',
+  'ai.codex.customConfigMissingEnvKey': 'Warning: {envKey} is not set in your shell environment. Export it (or launch netcatty from a shell that has it) so Codex can authenticate.',
   'ai.codex.notConnected': 'Not connected',
   'ai.codex.statusUnknown': 'Status unknown',
   'ai.codex.path': 'Path:',
@@ -1608,7 +1837,6 @@ const en: Messages = {
   'ai.codex.logout': 'Logout',
   'ai.codex.connectChatGPT': 'Connect ChatGPT',
   'ai.codex.refreshStatus': 'Refresh Status',
-  'ai.codex.apiKeyHint': 'Enabled OpenAI provider API key detected. Codex ACP can also authenticate without ChatGPT login.',
 
   // AI Claude Code
   'ai.claude.title': 'Claude Code',
@@ -1621,10 +1849,37 @@ const en: Messages = {
   'ai.claude.customPathPlaceholder': 'e.g. /usr/local/bin/claude',
   'ai.claude.check': 'Check',
 
+  // AI GitHub Copilot CLI
+  'ai.copilot.title': 'GitHub Copilot CLI',
+  'ai.copilot.description': 'Uses GitHub Copilot CLI via ACP over stdio (`copilot --acp --stdio`). Once detected, it can be selected as an external coding agent.',
+  'ai.copilot.detecting': 'Detecting...',
+  'ai.copilot.detected': 'Detected',
+  'ai.copilot.notFound': 'Not found',
+  'ai.copilot.path': 'Path:',
+  'ai.copilot.notFoundHint': 'Could not find copilot in PATH. Install it or specify the executable path below.',
+  'ai.copilot.customPathPlaceholder': 'e.g. /usr/local/bin/copilot',
+  'ai.copilot.check': 'Check',
+
   // AI Default Agent
   'ai.defaultAgent': 'Default Agent',
   'ai.defaultAgent.description': 'Agent to use when starting a new AI session',
   'ai.defaultAgent.catty': 'Catty (Built-in)',
+  'ai.toolAccess.title': 'Tool Access',
+  'ai.toolAccess.mode': 'Netcatty Access Mode',
+  'ai.toolAccess.description': 'Choose how external ACP agents access Netcatty sessions. MCP exposes the built-in server, while Skills + CLI points agents to the local Netcatty skill and CLI commands.',
+  'ai.toolAccess.mode.mcp': 'MCP',
+  'ai.toolAccess.mode.skills': 'Skills + CLI',
+  'ai.userSkills.title': 'User Skills',
+  'ai.userSkills.description': 'Open the Netcatty skills folder to add your own skill directories. Netcatty scans these skills automatically and injects only lightweight indexes unless a skill clearly matches the current request.',
+  'ai.userSkills.openFolder': 'Open Skills Folder',
+  'ai.userSkills.reload': 'Reload Skills',
+  'ai.userSkills.location': 'Location',
+  'ai.userSkills.loading': 'Scanning user skills...',
+  'ai.userSkills.summary': '{ready} ready, {warnings} warnings',
+  'ai.userSkills.empty': 'No user skills found yet. Open the folder to add skill directories with a SKILL.md file.',
+  'ai.userSkills.unavailable': 'User skills are unavailable in this environment.',
+  'ai.userSkills.status.ready': 'Ready',
+  'ai.userSkills.status.warning': 'Warning',
 
   // AI Chat
   'ai.chat.noProvider': 'No AI provider is configured. Go to **Settings → AI → Providers** to add and enable a provider.',
@@ -1679,6 +1934,7 @@ const en: Messages = {
   'ai.chat.menuFiles': 'Files',
   'ai.chat.menuImage': 'Image',
   'ai.chat.menuMentionHost': 'Mention Host',
+  'ai.chat.menuUserSkills': 'User Skills',
 
   // AI Error
   'ai.codex.bridgeError': 'Codex main-process handlers are not loaded yet. Fully restart Netcatty, or restart the Electron dev process, then try again.',
@@ -1701,7 +1957,7 @@ const en: Messages = {
   // AI Safety Settings
   'ai.safety.title': 'Safety',
   'ai.safety.permissionMode': 'Permission Mode',
-  'ai.safety.permissionMode.description': 'Controls how the AI interacts with your terminals. Observer mode blocks all write operations via MCP Server, enforced for both built-in and ACP agents. Confirm mode is advisory for ACP agents (they control their own tool approval flow).',
+  'ai.safety.permissionMode.description': 'Controls how the AI interacts with your terminals. Observer mode blocks all write operations through Netcatty, enforced for both built-in and ACP agents. Confirm mode is advisory for ACP agents (they control their own tool approval flow).',
   'ai.safety.permissionMode.observer': 'Observer - Read only, no actions',
   'ai.safety.permissionMode.confirm': 'Confirm - Ask before actions',
   'ai.safety.permissionMode.autonomous': 'Autonomous - Execute freely',
@@ -1711,7 +1967,7 @@ const en: Messages = {
   'ai.safety.maxIterations': 'Max Iterations',
   'ai.safety.maxIterations.description': 'Maximum number of AI tool-use loops to prevent runaway execution. ACP agents may have their own internal iteration limits that take precedence.',
   'ai.safety.blocklist': 'Command Blocklist',
-  'ai.safety.blocklist.description': 'Regex patterns to block dangerous commands. Applies to both built-in and ACP agents via MCP Server.',
+  'ai.safety.blocklist.description': 'Regex patterns to block dangerous commands. Applies to both built-in and ACP agents through Netcatty execution.',
   'ai.safety.blocklist.placeholder': 'Regex pattern...',
   'ai.safety.blocklist.reset': 'Reset to defaults',
   'ai.safety.blocklist.add': 'Add pattern',

application/i18n/locales/zh-CN.ts

@@ -13,6 +13,7 @@ const zhCN: Messages = {
   'common.connect': '连接',
   'common.terminal': '终端',
   'common.create': '创建',
+  'common.add': '添加',
   'common.rename': '重命名',
   'common.refresh': '刷新',
   'common.continue': '继续',
@@ -42,6 +43,11 @@ const zhCN: Messages = {
   'confirm.deleteHost': '删除主机 "{name}"？',
   'confirm.deleteIdentity': '删除身份 "{name}"？',
   'confirm.removeProvider': '移除提供商 "{name}"？',
+  'confirm.closeBusyTerminal.title': '确认关闭',
+  'confirm.closeBusyTerminal.message': '进程 "{command}" 仍在运行，关闭后会被终止。',
+  'confirm.closeBusyTerminal.messageWithMore': '进程 "{command}" 及其他 {count} 个正在运行的进程将被终止。',
+  'confirm.closeBusyTerminal.cancel': '取消',
+  'confirm.closeBusyTerminal.close': '关闭',
   'dialog.renameWorkspace.title': '重命名工作区',
   'dialog.renameSession.title': '重命名会话',
   'field.name': '名称',
@@ -180,6 +186,15 @@ const zhCN: Messages = {
   'settings.application.github.subtitle': '源代码',
   'settings.application.whatsNew': '更新内容',
   'settings.application.whatsNew.subtitle': '查看发布说明',
+  'settings.application.openExternal.failedTitle': '无法打开链接',
+  'settings.application.openExternal.failedBody': '系统浏览器和内置浏览器窗口都无法打开该链接。',
+  'settings.vault.title': '主机库',
+  'settings.vault.showRecentHosts': '显示最近连接的主机',
+  'settings.vault.showRecentHostsDesc': '在主机列表顶部显示最近连接过的主机',
+  'settings.vault.showOnlyUngroupedHostsInRoot': '根目录只显示未分组主机',
+  'settings.vault.showOnlyUngroupedHostsInRootDesc': '开启后，主机库根目录的主机列表只显示没有分组的主机，已分组主机请从左侧分组进入查看。',
+  'settings.vault.showSftpTab': '显示 SFTP 标签页',
+  'settings.vault.showSftpTabDesc': '在顶部标签栏显示独立的 SFTP 视图。关闭后可改用会话内左侧的 SFTP 侧栏。',
 
   // Update notifications
   'update.available.title': '发现新版本',
@@ -215,13 +230,11 @@ const zhCN: Messages = {
   'settings.appearance.themeColor.desc': '为浅色与深色主题选择预设配色',
   'settings.appearance.themeColor.light': '浅色主题',
   'settings.appearance.themeColor.dark': '深色主题',
-  'settings.appearance.immersiveMode': '沉浸模式',
-  'settings.appearance.immersiveMode.desc':
-    '启用后，UI 外观（标签栏、侧边栏、状态栏）会自动适配当前终端主题的配色，营造视觉一体化的沉浸体验。',
   'settings.appearance.customCss': '自定义 CSS',
-  'settings.appearance.customCss.desc': '使用自定义 CSS 个性化界面，修改会立即生效。',
+  'settings.appearance.customCss.desc':
+    '使用自定义 CSS 个性化界面，修改会立即生效。主要 UI 区块都暴露了 [data-section="..."] 属性供你定位，比如：snippets-panel、host-details-panel、group-details-panel、serial-host-details-panel、ai-chat-panel、vault-sidebar、vault-main、vault-hosts-header、vault-host-list、vault-view、terminal-workspace、terminal-workspace-sidebar、top-tabs。',
   'settings.appearance.customCss.placeholder':
-    '/* 示例：*/\n.terminal { background: #1a1a2e !important; }\n:root { --radius: 0.25rem; }',
+    '/* 示例 — 由于 Tailwind 优先级较高，需要使用 !important */\n\n/* 放大代码片段侧边栏字号 */\n[data-section="snippets-panel"] {\n  font-size: 14px !important;\n}\n\n/* 自定义终端背景色 */\n.terminal { background: #1a1a2e !important; }\n\n/* 调整全局圆角 */\n:root { --radius: 0.25rem; }',
   'settings.appearance.language': '语言',
   'settings.appearance.language.desc': '选择界面语言',
   'settings.appearance.uiFont': '界面字体',
@@ -254,13 +267,54 @@ const zhCN: Messages = {
   'sync.toast.completedMessage': '同步完成',
   'sync.toast.errorTitle': '同步错误',
   'sync.autoSync.failedTitle': '同步失败',
+  'sync.autoSync.inspectFailedTitle': '同步已暂停',
+  'sync.autoSync.inspectFailedMessage': '无法访问云端以检查变更。数据改动或下次启动时会自动重试。',
   'sync.autoSync.syncedTitle': '已从云端同步',
   'sync.autoSync.syncedMessage': '你的数据已从云端更新。',
   'sync.autoSync.noProvider': '未连接云同步 provider。请打开 设置 → Sync & Cloud 进行连接。',
   'sync.autoSync.alreadySyncing': '同步正在进行中。',
+  'sync.autoSync.restoreInProgress': '另一个窗口中的本地备份恢复正在进行中，请等待其完成。',
+  'sync.autoSync.interruptedApplyTitle': '同步已暂停 — 上次恢复未完成',
+  'sync.autoSync.interruptedApplyMessage': '上次本地恢复过程未正常结束，本地数据可能处于半应用状态。请打开「设置 → Sync & Cloud → 恢复」，从保护性备份中恢复后再让自动同步继续。',
   'sync.autoSync.vaultLocked': 'Vault 处于锁定状态。请打开 设置 → Sync & Cloud 解锁。',
   'sync.autoSync.conflictDetected': '检测到同步冲突。请打开 设置 → Sync & Cloud 处理。',
   'sync.autoSync.syncFailed': '同步失败',
+  'sync.autoSync.restoredTitle': '已恢复',
+  'sync.autoSync.restoredMessage': '已从云端恢复主机库数据。',
+  'sync.autoSync.keptLocalTitle': '已保留本地数据',
+  'sync.autoSync.keptLocalMessage': '保留了空的本地主机库，未应用云端数据。',
+  'sync.autoSync.emptyVaultConflict.title': '检测到空主机库',
+  'sync.autoSync.emptyVaultConflict.description': '本地主机库为空，但云端有数据。这通常发生在应用更新或存储重置之后。请选择如何处理：',
+  'sync.autoSync.emptyVaultConflict.cloudLabel': '云端',
+  'sync.autoSync.emptyVaultConflict.restore': '从云端恢复',
+  'sync.autoSync.emptyVaultConflict.restoreDesc': '推荐 — 从云端备份恢复主机、密钥和代码片段',
+  'sync.autoSync.emptyVaultConflict.keepEmpty': '保持为空',
+  'sync.autoSync.emptyVaultConflict.keepEmptyDesc': '从头开始，使用空的主机库',
+  'sync.autoSync.emptyVaultConflict.cloudSummary': '{hosts} 台主机，{keys} 个密钥，{snippets} 个代码片段',
+  'sync.autoSync.emptyVaultManual': '无法同步：本地 vault 为空。请先从本地备份恢复，或在同步面板里使用"强制推送"。',
+
+  'sync.blocked.title': '同步已暂停',
+  'sync.blocked.reason.bulkShrink': '即将从云端删除 {baseCount} 条 {entityType} 中的 {lost} 条（缩减 {percent}%）。',
+  'sync.blocked.reason.largeShrink': '即将从云端删除 {lost} 条 {entityType}。',
+  'sync.blocked.detail': '通常是本地状态异常（钥匙串故障、数据加载不全）导致。请从本地备份恢复，如果确实要删这些条目请使用强制推送。',
+  'sync.blocked.restoreButton': '从本地备份恢复',
+  'sync.blocked.forcePushButton': '强制推送',
+
+  'sync.forcePush.title': '确认强制推送',
+  'sync.forcePush.body': '你将从云端移除 {lost} 条 {entityType}，此操作不可撤销。继续？',
+  'sync.forcePush.confirm': '确认推送',
+  'sync.forcePush.cancel': '取消',
+
+  'sync.entityType.hosts': '主机',
+  'sync.entityType.keys': '密钥',
+  'sync.entityType.identities': '身份',
+  'sync.entityType.snippets': '代码片段',
+  'sync.entityType.customGroups': '分组',
+  'sync.entityType.snippetPackages': '片段包',
+  'sync.entityType.knownHosts': '主机密钥记录',
+  'sync.entityType.portForwardingRules': '端口转发规则',
+  'sync.entityType.groupConfigs': '分组配置',
+
   'sync.credentialsUnavailable': '当前设备无法解密部分已保存凭据。请先在本地重新输入凭据后再同步。',
   'time.never': '从未',
   'time.justNow': '刚刚',
@@ -294,8 +348,24 @@ const zhCN: Messages = {
   'vault.groups.placeholder.example': '例如：Production',
   'vault.groups.parentLabel': '父级',
   'vault.groups.pathLabel': '路径',
+  'vault.groups.settings': '分组设置',
+  'vault.groups.details': '分组详情',
+  'vault.groups.details.general': '常规',
+  'vault.groups.details.ssh': 'SSH',
+  'vault.groups.details.telnet': 'Telnet',
+  'vault.groups.details.advanced': '高级',
+  'vault.groups.details.appearance': '外观',
+  'vault.groups.details.mosh': 'Mosh',
+  'vault.groups.details.parentGroup': '父分组',
+  'vault.groups.details.none': '无',
+  'vault.groups.details.inherited': '继承自分组',
+  'vault.groups.details.addProtocol': '添加协议',
+  'vault.groups.details.removeProtocol': '移除协议',
+  'vault.groups.details.fontFamily': '字体',
+  'vault.groups.details.fontSize': '字号',
   'vault.groups.errors.required': '分组名称不能为空。',
   'vault.groups.errors.invalidChars': "分组名称不能包含 '/' 或 '\\\\'.",
+  'vault.groups.errors.duplicatePath': '该位置已存在同名分组。',
 
   'vault.managedSource.unmanage': '取消托管',
   'vault.managedSource.unmanageSuccess': '已取消托管分组',
@@ -319,6 +389,10 @@ const zhCN: Messages = {
   'vault.hosts.export.toast.successWithSkipped': '已导出 {count} 个主机到 CSV（跳过 {skipped} 个不支持的主机）',
   'vault.hosts.export.toast.noHosts': '没有主机可导出',
   'vault.hosts.allHosts': '全部主机',
+  'vault.hosts.pinned': '已置顶',
+  'vault.hosts.recentlyConnected': '最近连接',
+  'vault.hosts.pinToTop': '置顶',
+  'vault.hosts.unpin': '取消置顶',
   'vault.hosts.copyCredentials': '复制账密信息',
   'vault.hosts.copyCredentials.toast.success': '账密信息已复制到剪贴板',
   'vault.hosts.copyCredentials.toast.noPassword': '该主机未保存密码',
@@ -328,6 +402,7 @@ const zhCN: Messages = {
   'vault.hosts.deselectAll': '取消全选',
   'vault.hosts.deleteSelected': '删除 ({count})',
   'vault.hosts.deleteMultiple.success': '已删除 {count} 个主机',
+  'vault.hosts.moveToGroup.success': '已将 {host} 移动到 {group}',
   'vault.hosts.empty.title': '设置你的主机',
   'vault.hosts.empty.desc': '保存主机以快速连接到你的服务器、虚拟机和容器。',
 
@@ -428,6 +503,8 @@ const zhCN: Messages = {
   'sftp.filter.placeholder': '按文件名筛选...',
   'sftp.bookmark.add': '收藏此路径',
   'sftp.bookmark.remove': '取消收藏',
+  'sftp.bookmark.addGlobal': '+全局',
+  'sftp.bookmark.addGlobalTooltip': '保存为全局收藏（所有主机共享）',
   'sftp.bookmark.empty': '暂无收藏路径',
   'sftp.columns.name': '名称',
   'sftp.columns.modified': '修改时间',
@@ -444,8 +521,21 @@ const zhCN: Messages = {
   'sftp.dragDropToUpload': '拖拽文件到这里上传',
   'sftp.retry': '重试',
   'sftp.context.open': '打开',
+  'sftp.context.navigateTo': '跳转到这里',
+  'sftp.context.moveTo': '移动到...',
+  'sftp.context.moveToParent': '移动到上级目录',
+  'sftp.moveTo.title': '移动到目录',
+  'sftp.moveTo.placeholder': '输入目标目录路径',
+  'sftp.moveTo.confirm': '移动',
+  'sftp.moveTo.pathNotFound': '目录不存在或无法访问',
   'sftp.context.download': '下载',
   'sftp.context.copyToOtherPane': '复制到另一侧',
+  'sftp.viewMode.label': '视图模式',
+  'sftp.viewMode.list': '列表视图',
+  'sftp.viewMode.tree': '树形视图',
+  'sftp.tree.loadError': '加载目录失败',
+  'sftp.tree.loading': '加载中...',
+  'sftp.kind.folder': '文件夹',
   'sftp.context.rename': '重命名',
   'sftp.context.permissions': '权限',
   'sftp.context.delete': '删除',
@@ -466,6 +556,13 @@ const zhCN: Messages = {
   'sftp.transfers.active': '{count} 个进行中',
   'sftp.transfers.clearCompleted': '清除已完成',
   'sftp.transfers.calculatingTotal': '正在统计总大小...',
+  'sftp.transfers.filesCount': '{count} 个文件',
+  'sftp.transfers.filesProgress': '{current}/{total} 个文件',
+  'sftp.transfers.expandChildren': '展开文件',
+  'sftp.transfers.collapseChildren': '收起文件',
+  'sftp.transfers.expandChildList': '展开详情',
+  'sftp.transfers.collapseChildList': '收起',
+  'sftp.transfers.dragToResize': '拖拽调整高度',
   'sftp.goUp': '上一级',
   'sftp.goToTerminalCwd': '定位到终端当前目录',
   'sftp.encoding.label': '文件名编码',
@@ -485,6 +582,9 @@ const zhCN: Messages = {
   'sftp.deleteConfirm.single': '删除 "{name}"？',
   'sftp.deleteConfirm.title': '删除 {count} 个项目？',
   'sftp.deleteConfirm.desc': '此操作不可撤销，将删除以下内容：',
+  'sftp.deleteConfirm.descSingle': '此操作不可撤销。',
+  'sftp.deleteConfirm.host': '主机',
+  'sftp.deleteConfirm.path': '路径',
   'sftp.error.loadFailed': '加载目录失败',
   'sftp.error.downloadFailed': '下载失败',
   'sftp.error.uploadFailed': '上传失败',
@@ -517,6 +617,8 @@ const zhCN: Messages = {
   'qs.search.placeholder': '搜索主机或标签页',
   'qs.jumpTo': '跳转到',
   'qs.localTerminal': '本地终端',
+  'qs.localShells': '本地 Shell',
+  'qs.default': '默认',
 
   // Select Host panel
   'selectHost.title': '选择主机',
@@ -578,6 +680,14 @@ const zhCN: Messages = {
   'hostDetails.distro.option.almalinux': 'AlmaLinux',
   'hostDetails.distro.option.oracle': 'Oracle Linux',
   'hostDetails.distro.option.kali': 'Kali Linux',
+  'hostDetails.distro.option.cisco': '思科',
+  'hostDetails.distro.option.juniper': '瞻博网络',
+  'hostDetails.distro.option.huawei': '华为',
+  'hostDetails.distro.option.hpe': '慧与 / H3C',
+  'hostDetails.distro.option.mikrotik': 'MikroTik',
+  'hostDetails.distro.option.fortinet': '飞塔',
+  'hostDetails.distro.option.paloalto': 'Palo Alto Networks',
+  'hostDetails.distro.option.zyxel': '合勤',
   'hostDetails.section.mosh': 'Mosh',
   'hostDetails.username.placeholder': '用户名',
   'hostDetails.password.placeholder': '密码',
@@ -602,10 +712,16 @@ const zhCN: Messages = {
   'hostDetails.agentForwarding.agentNotRunning': 'SSH Agent 不可用',
   'hostDetails.agentForwarding.agentNotRunningHint': '未检测到 SSH Agent。请启用 Windows OpenSSH Authentication Agent 服务，或使用兼容的 Agent（如 Bitwarden、1Password、gpg-agent）。',
   'hostDetails.section.agentForwarding': 'SSH 代理',
+  'hostDetails.section.deviceType': '设备类型',
+  'hostDetails.deviceType': '网络设备模式',
+  'hostDetails.deviceType.desc': '适用于通过 SSH 连接的网络设备（交换机、路由器、防火墙）。命令将原样发送，不进行 Shell 包装，兼容华为 VRP、Cisco IOS 等厂商 CLI。',
+  'hostDetails.deviceType.warning': 'AI 代理命令将直接发送，无法获取退出码。仅建议在设备不运行标准 Shell 时启用。',
   'hostDetails.section.legacyAlgorithms': '旧版算法',
   'hostDetails.legacyAlgorithms': '允许旧版算法',
   'hostDetails.legacyAlgorithms.desc': '启用已弃用的 SSH 算法（diffie-hellman-group1、ssh-dss、3des-cbc 等）以连接老旧网络设备。',
   'hostDetails.legacyAlgorithms.warning': '这些算法存在已知安全漏洞，仅建议在老旧设备不支持现代加密时启用。',
+  'hostDetails.backspaceBehavior': 'Backspace 行为',
+  'hostDetails.backspaceBehavior.default': '默认',
   'hostDetails.jumpHosts': '通过主机代理',
   'hostDetails.jumpHosts.hops': '{count} 跳',
   'hostDetails.jumpHosts.direct': '直连',
@@ -683,11 +799,12 @@ const zhCN: Messages = {
   'terminal.toolbar.openSftp': '打开 SFTP',
   'terminal.toolbar.availableAfterConnect': '连接后可用',
   'terminal.toolbar.sftp': 'SFTP',
+  'terminal.toolbar.more': '更多操作',
   'terminal.toolbar.scripts': '脚本',
   'terminal.toolbar.library': '库',
   'terminal.toolbar.noSnippets': '暂无代码片段',
   'terminal.toolbar.terminalSettings': '终端设置',
-  'terminal.toolbar.searchTerminal': '搜索终端 (Ctrl+F)',
+  'terminal.toolbar.searchTerminal': '搜索终端',
   'terminal.toolbar.search': '搜索',
   'terminal.toolbar.broadcast': '广播',
   'terminal.toolbar.broadcastEnable': '启用广播模式',
@@ -743,6 +860,7 @@ const zhCN: Messages = {
   'terminal.search.nextMatch': '下一个匹配 (Enter)',
   'terminal.menu.copy': '复制',
   'terminal.menu.paste': '粘贴',
+  'terminal.menu.pasteSelection': '粘贴选中文本',
   'terminal.menu.selectAll': '全选',
   'terminal.menu.splitHorizontal': '水平分屏',
   'terminal.menu.splitVertical': '垂直分屏',
@@ -785,8 +903,14 @@ const zhCN: Messages = {
   'terminal.themeModal.globalTheme': '全局主题',
   'terminal.themeModal.globalFont': '全局字体',
   'terminal.themeModal.fontSize': '字体大小',
+  'terminal.themeModal.fontWeight': '字体粗细',
   'terminal.themeModal.livePreview': '实时预览',
   'terminal.themeModal.themeType': '{type} 主题',
+  'terminal.hiddenTheme.title': '当前隐藏主题',
+  'terminal.hiddenTheme.desc': '这个主题已从手动选择列表中隐藏；当你选择其他可见主题后，它会被替换。',
+  'topTabs.toggleTheme.systemExitTitle': '当前正在跟随系统主题',
+  'topTabs.toggleTheme.systemExitMessage': '请到设置里选择固定的浅色或深色主题。',
+  'topTabs.toggleTheme.openSettings': '打开设置',
 
   // Custom Themes
   'terminal.customTheme.section': '自定义主题',
@@ -915,6 +1039,47 @@ const zhCN: Messages = {
   'cloudSync.history.download': '下载',
   'cloudSync.history.resolved': '已解决',
   'cloudSync.history.error': '错误',
+  'cloudSync.localBackups.title': '本地备份历史',
+  'cloudSync.localBackups.desc': 'Netcatty 会在版本变化前，以及恢复主机库前，自动留下一份本地恢复点。',
+  'cloudSync.localBackups.retentionTitle': '备份保留数量',
+  'cloudSync.localBackups.retentionDesc': '设置 Netcatty 最多保留多少份本地备份。',
+  'cloudSync.localBackups.maxCount': '最多保留',
+  'cloudSync.localBackups.maxSaved': '已保存保留数量：{count}',
+  'cloudSync.localBackups.maxInvalid': '请输入 1 到 100 之间的数字。',
+  'cloudSync.localBackups.empty': '还没有本地备份。',
+  'cloudSync.localBackups.reason.appVersionChange': '版本变化前',
+  'cloudSync.localBackups.reason.beforeRestore': '恢复前',
+  'cloudSync.localBackups.versionChange': '{from} -> {to}',
+  'cloudSync.localBackups.counts': '{hosts} 台主机，{keys} 个密钥，{snippets} 个代码片段',
+  'cloudSync.localBackups.restore': '恢复',
+  'cloudSync.localBackups.restoreSuccess': '已恢复本地备份。',
+  'cloudSync.localBackups.restoreFailedTitle': '恢复失败',
+  'cloudSync.localBackups.restoreMissing': '找不到这份备份。',
+  'cloudSync.localBackups.protectiveBackupFailed': '无法创建保护性备份，已中止恢复以避免覆盖当前数据。请先解决底层问题（例如钥匙串访问）后重试。详情：{message}',
+  'cloudSync.localBackups.restoreConfirmTitle': '确认恢复此备份？',
+  'cloudSync.localBackups.restoreConfirmDesc': '当前的主机、密钥、代码片段与设置将被替换为此备份中的内容。系统会先自动创建一个保护性快照，便于撤销。',
+  'cloudSync.localBackups.restoreConfirmButton': '恢复',
+  'cloudSync.localBackups.restoreConfirmCancel': '取消',
+  'cloudSync.localBackups.unavailableTitle': '无法使用本地备份',
+  'cloudSync.localBackups.unavailableDesc': '当前平台未提供受支持的安全密钥库，Netcatty 无法安全地写入本地备份。请在支持系统钥匙串的环境中运行，或改用云同步保留恢复点。',
+  'cloudSync.localBackups.lockedTitle': '需要主密钥',
+  'cloudSync.localBackups.lockedDesc': '请先配置或解锁主密钥再恢复备份，以确保恢复后的凭据仍保持加密。',
+  'cloudSync.revisionHistory.viewButton': '历史版本',
+  'cloudSync.revisionHistory.title': '主机库版本历史',
+  'cloudSync.revisionHistory.description': '浏览并恢复 Gist 修订历史中的旧版主机库数据。',
+  'cloudSync.revisionHistory.empty': '未找到修订记录。',
+  'cloudSync.revisionHistory.current': '当前版本',
+  'cloudSync.revisionHistory.revision': '修订',
+  'cloudSync.revisionHistory.revisionPreview': '修订内容',
+  'cloudSync.revisionHistory.device': '设备',
+  'cloudSync.revisionHistory.hosts': '主机',
+  'cloudSync.revisionHistory.keys': '密钥',
+  'cloudSync.revisionHistory.snippets': '代码片段',
+  'cloudSync.revisionHistory.identities': '身份',
+  'cloudSync.revisionHistory.restoreButton': '恢复此版本',
+  'cloudSync.revisionHistory.restored': '已从选中的修订恢复主机库数据。',
+  'cloudSync.revisionHistory.revisionNotFound': '修订未找到或不包含主机库数据。',
+  'cloudSync.revisionHistory.decryptFailed': '无法解密此修订。可能是使用了不同的主密钥加密的。',
   'cloudSync.changeKey.title': '更改主密钥',
   'cloudSync.changeKey.current': '当前主密钥',
   'cloudSync.changeKey.new': '新的主密钥',
@@ -1093,6 +1258,15 @@ const zhCN: Messages = {
 
   // Settings > SFTP File Associations
   'settings.tab.sftpFileAssociations': 'SFTP',
+  'settings.sftp.transferConcurrency': '传输并发数',
+  'settings.sftp.transferConcurrency.desc': '上传或下载文件夹时并行传输的文件数量。较高的值可能提高速度，但可能导致某些服务器过载。',
+  'settings.sftp.defaultOpener': '默认文件打开方式',
+  'settings.sftp.defaultOpener.desc': '选择没有特定文件关联时的默认打开方式',
+  'settings.sftp.defaultOpener.ask': '每次询问',
+  'settings.sftp.defaultOpener.askDesc': '每次打开文件时弹出选择对话框',
+  'settings.sftp.defaultOpener.builtInDesc': '默认使用内置编辑器打开文本文件',
+  'settings.sftp.defaultOpener.systemApp': '选择应用程序...',
+  'settings.sftp.defaultOpener.systemAppDesc': '默认使用指定的外部应用程序打开文件',
   'settings.sftpFileAssociations.title': 'SFTP 文件关联',
   'settings.sftpFileAssociations.desc': '配置按扩展名打开文件的默认应用程序',
   'settings.sftpFileAssociations.extension': '扩展名',
@@ -1121,6 +1295,13 @@ const zhCN: Messages = {
   'settings.sftp.autoOpenSidebar.enable': '启用自动打开侧栏',
   'settings.sftp.autoOpenSidebar.enableDesc': '当终端会话连接到远程主机时，SFTP 侧栏将自动打开',
 
+  'settings.sftp.defaultViewMode': '默认视图模式',
+  'settings.sftp.defaultViewMode.desc': '选择打开新 SFTP 标签页时的默认视图模式。每个主机的偏好设置会覆盖此全局设置。',
+  'settings.sftp.defaultViewMode.list': '列表视图',
+  'settings.sftp.defaultViewMode.listDesc': '以平面列表显示当前目录的文件',
+  'settings.sftp.defaultViewMode.tree': '树形视图',
+  'settings.sftp.defaultViewMode.treeDesc': '以层级树形结构显示文件',
+
   'sftp.autoSync.success': '文件已同步到远程：{fileName}',
   'sftp.autoSync.error': '同步文件失败：{error}',
 
@@ -1168,6 +1349,8 @@ const zhCN: Messages = {
   'settings.terminal.themeModal.darkThemes': '深色主题',
   'settings.terminal.themeModal.lightThemes': '浅色主题',
   'settings.terminal.theme.selectButton': '选择主题',
+  'settings.terminal.theme.followApp': '跟随应用主题',
+  'settings.terminal.theme.followApp.desc': '终端背景色自动匹配当前应用主题，保持视觉一致性。',
   'settings.terminal.section.font': '字体',
   'settings.terminal.section.cursor': '光标',
   'settings.terminal.section.keyboard': '键盘',
@@ -1207,6 +1390,12 @@ const zhCN: Messages = {
   'settings.terminal.behavior.bracketedPaste': '括号粘贴模式',
   'settings.terminal.behavior.bracketedPaste.desc':
     '粘贴文本时使用转义序列包裹，以便终端区分粘贴和键入。如果出现 ^[[200~ 字样请关闭此选项。',
+  'settings.terminal.behavior.clearWipesScrollback': '`clear` 同时清空回滚历史',
+  'settings.terminal.behavior.clearWipesScrollback.desc':
+    '`clear` 命令同时清空回滚历史（POSIX 默认行为）。关闭则保留历史。',
+  'settings.terminal.behavior.preserveSelectionOnInput': '输入时保留选区',
+  'settings.terminal.behavior.preserveSelectionOnInput.desc':
+    '键盘输入时不清除鼠标选中的文本，方便选中路径后输入 `sz ` 之类命令再粘贴。',
   'settings.terminal.behavior.osc52Clipboard': 'OSC-52 剪贴板',
   'settings.terminal.behavior.osc52Clipboard.desc':
     '允许远程程序（tmux、vim 等）通过 OSC-52 转义序列访问本地剪贴板。',
@@ -1238,6 +1427,14 @@ const zhCN: Messages = {
   'settings.terminal.scrollback.rows': '行数 *',
   'settings.terminal.keywordHighlight.title': '关键字高亮',
   'settings.terminal.keywordHighlight.resetColors': '重置为默认颜色',
+  'settings.terminal.keywordHighlight.addCustom': '添加自定义规则',
+  'settings.terminal.keywordHighlight.editCustom': '编辑规则',
+  'settings.terminal.keywordHighlight.labelField': '标签与颜色',
+  'settings.terminal.keywordHighlight.labelPlaceholder': '标签（如 Down）',
+  'settings.terminal.keywordHighlight.patternField': '正则表达式',
+  'settings.terminal.keywordHighlight.patternPlaceholder': '正则表达式（如 \\bdown\\b）',
+  'settings.terminal.keywordHighlight.invalidPattern': '无效的正则表达式',
+  'settings.terminal.keywordHighlight.preview': '预览',
   'settings.terminal.section.localShell': '本地 Shell',
   'settings.terminal.localShell.shell': 'Shell 可执行文件',
   'settings.terminal.localShell.shell.desc': 'Shell 可执行文件的路径（例如 /bin/zsh、pwsh.exe）。留空使用系统默认。',
@@ -1245,6 +1442,11 @@ const zhCN: Messages = {
   'settings.terminal.localShell.shell.detected': '检测到',
   'settings.terminal.localShell.shell.notFound': '未找到 Shell 可执行文件',
   'settings.terminal.localShell.shell.isDirectory': '路径是目录，不是可执行文件',
+  'settings.terminal.localShell.shell.default': '系统默认',
+  'settings.terminal.localShell.shell.custom': '自定义...',
+  'settings.terminal.localShell.shell.customPath': 'Shell 可执行文件路径',
+  'settings.terminal.localShell.shell.commonPaths': '常用路径',
+  'settings.terminal.localShell.shell.pathValid': '路径有效',
   'settings.terminal.localShell.startDir': '起始目录',
   'settings.terminal.localShell.startDir.desc': '打开本地终端时的起始目录。留空使用用户主目录。',
   'settings.terminal.localShell.startDir.placeholder': '用户主目录',
@@ -1263,9 +1465,18 @@ const zhCN: Messages = {
   // Settings > Terminal > Rendering
   'settings.terminal.section.rendering': '渲染',
   'settings.terminal.rendering.renderer': '渲染器',
-  'settings.terminal.rendering.renderer.desc': '选择终端渲染技术。自动模式会在低内存设备上使用 Canvas。更改将在新终端会话中生效。',
+  'settings.terminal.rendering.renderer.desc': '选择终端渲染技术。自动模式会在低内存设备上使用 DOM 渲染。更改将在新终端会话中生效。',
   'settings.terminal.rendering.auto': '自动',
 
+  // Settings > Terminal > Autocomplete
+  'settings.terminal.section.autocomplete': '自动补全',
+  'settings.terminal.autocomplete.enabled': '启用自动补全',
+  'settings.terminal.autocomplete.enabled.desc': '输入时根据历史命令和命令规范显示补全建议。',
+  'settings.terminal.autocomplete.ghostText': '行内建议',
+  'settings.terminal.autocomplete.ghostText.desc': '在光标后显示灰色的建议文本（类似 fish shell）。',
+  'settings.terminal.autocomplete.popupMenu': '弹出菜单',
+  'settings.terminal.autocomplete.popupMenu.desc': '显示包含多个建议的浮动列表。',
+
   // Settings > Shortcuts
   'settings.shortcuts.section.scheme': '快捷键方案',
   'settings.shortcuts.scheme.label': '键盘快捷键',
@@ -1277,6 +1488,7 @@ const zhCN: Messages = {
   'settings.shortcuts.resetAll': '全部重置',
   'settings.shortcuts.recording': '请按键...',
   'settings.shortcuts.none': '无',
+  'settings.shortcuts.setDisabled': '设为禁用',
   'settings.shortcuts.category.tabs': '标签页',
   'settings.shortcuts.category.terminal': '终端',
   'settings.shortcuts.category.navigation': '导航',
@@ -1301,6 +1513,7 @@ const zhCN: Messages = {
   'settings.shortcuts.binding.port-forwarding': '打开端口转发',
   'settings.shortcuts.binding.command-palette': '打开命令面板',
   'settings.shortcuts.binding.quick-switch': '快速切换',
+  'settings.shortcuts.binding.new-workspace': '新建工作区',
   'settings.shortcuts.binding.snippets': '打开代码片段',
   'settings.shortcuts.binding.broadcast': '切换广播模式',
   'settings.shortcuts.binding.sftp-copy': '复制文件',
@@ -1437,6 +1650,9 @@ const zhCN: Messages = {
   'tabs.logPrefix': '日志：',
   'tabs.logLocal': '本地',
   'tabs.copyTab': '复制标签页',
+  'tabs.closeOthers': '关闭其他标签',
+  'tabs.closeToRight': '关闭右侧标签',
+  'tabs.closeAll': '关闭所有标签',
   'keychain.edit.labelRequired': 'Label *',
   'keychain.edit.keyLabelPlaceholder': '密钥 Label',
   'keychain.edit.privateKeyRequired': '私钥 *',
@@ -1476,6 +1692,8 @@ const zhCN: Messages = {
   'snippets.breadcrumb.separator': '›',
   'snippets.empty.title': '创建代码片段',
   'snippets.empty.desc': '将常用命令保存为代码片段，一键复用。',
+  'snippets.search.noResults.title': '无匹配结果',
+  'snippets.search.noResults.desc': '没有代码片段或代码包与"{query}"匹配。换一个关键字，或清除搜索进行浏览。',
   'snippets.section.packages': '代码包',
   'snippets.section.snippets': '代码片段',
   'snippets.package.count': '{count} 个代码片段',
@@ -1536,6 +1754,7 @@ const zhCN: Messages = {
   'serial.field.localEchoDesc': '本地回显输入字符（用于没有远程回显的设备）',
   'serial.field.lineMode': '行模式',
   'serial.field.lineModeDesc': '缓冲输入，按回车后发送（而不是逐字符发送）',
+  'serial.field.charset': '字符编码',
   'serial.connectionError': '连接串口失败',
   'serial.field.baudRatePlaceholder': '选择或输入波特率...',
   'serial.field.baudRateEmpty': '输入自定义波特率',
@@ -1556,10 +1775,7 @@ const zhCN: Messages = {
   'keyboard.interactive.enterResponse': '输入响应',
   'keyboard.interactive.submit': '提交',
   'keyboard.interactive.verifying': '验证中...',
-  'keyboard.interactive.fill': '填入',
-  'keyboard.interactive.fillSaved': '填入已保存的密码',
-  'keyboard.interactive.useSaved': '使用已保存',
-  'keyboard.interactive.useSavedPassword': '使用已保存的密码',
+  'keyboard.interactive.savePassword': '保存密码',
 
   // Passphrase Modal for encrypted SSH keys
   'passphrase.title': 'SSH 密钥密码',
@@ -1602,16 +1818,24 @@ const zhCN: Messages = {
   'ai.providers.noMatchingModels': '没有匹配的模型',
   'ai.providers.clickToLoadModels': '点击加载模型',
   'ai.providers.showingModels': '显示前 100 个，共 {count} 个模型。输入以筛选。',
+  'ai.providers.advancedParams': '高级参数',
+  'ai.providers.advancedParams.hint': '留空则使用提供商默认值。',
+  'ai.providers.advancedParams.maxTokens.placeholder': '例如 4096',
+  'ai.providers.advancedParams.default': '提供商默认',
 
   // AI Codex
   'ai.codex': 'Codex',
   'ai.codex.title': 'Codex CLI',
-  'ai.codex.description': '使用 codex + codex-acp 进行 ACP 协议流式传输。在此通过 ChatGPT 订阅登录，或配置 OpenAI 提供商的 API Key（将作为 CODEX_API_KEY 传递）。',
+  'ai.codex.description': '使用 codex + codex-acp 进行 ACP 协议流式传输。可以在这里连接 ChatGPT，也可以在设置里启用兼容 OpenAI 的 API Key 和自定义接口地址。',
   'ai.codex.detecting': '检测中...',
   'ai.codex.notFound': '未找到',
   'ai.codex.awaitingLogin': '等待登录',
   'ai.codex.connectedChatGPT': '已通过 ChatGPT 连接',
   'ai.codex.connectedApiKey': '已通过 API Key 连接',
+  'ai.codex.connectedCustomConfig': '使用 ~/.codex/config.toml 自定义 provider',
+  'ai.codex.customConfigIncomplete': '检测到自定义配置（缺少环境变量）',
+  'ai.codex.customConfigHint': '使用 ~/.codex/config.toml 中配置的自定义 provider "{provider}"，无需 ChatGPT 登录。',
+  'ai.codex.customConfigMissingEnvKey': '警告：环境变量 {envKey} 未在当前 shell 中设置。请 export 它（或从包含该变量的 shell 启动 netcatty），否则 Codex 无法鉴权。',
   'ai.codex.notConnected': '未连接',
   'ai.codex.statusUnknown': '状态未知',
   'ai.codex.path': '路径：',
@@ -1622,7 +1846,6 @@ const zhCN: Messages = {
   'ai.codex.logout': '退出登录',
   'ai.codex.connectChatGPT': '连接 ChatGPT',
   'ai.codex.refreshStatus': '刷新状态',
-  'ai.codex.apiKeyHint': '检测到已启用的 OpenAI 提供商 API Key。Codex ACP 也可以无需 ChatGPT 登录进行认证。',
 
   // AI Claude Code
   'ai.claude.title': 'Claude Code',
@@ -1635,10 +1858,37 @@ const zhCN: Messages = {
   'ai.claude.customPathPlaceholder': '例如 /usr/local/bin/claude',
   'ai.claude.check': '检查',
 
+  // AI GitHub Copilot CLI
+  'ai.copilot.title': 'GitHub Copilot CLI',
+  'ai.copilot.description': '通过 ACP over stdio（`copilot --acp --stdio`）接入 GitHub Copilot CLI。检测到后即可作为外部编程 Agent 使用。',
+  'ai.copilot.detecting': '检测中...',
+  'ai.copilot.detected': '已检测到',
+  'ai.copilot.notFound': '未找到',
+  'ai.copilot.path': '路径：',
+  'ai.copilot.notFoundHint': '在 PATH 中未找到 copilot。请安装或在下方指定可执行文件路径。',
+  'ai.copilot.customPathPlaceholder': '例如 /usr/local/bin/copilot',
+  'ai.copilot.check': '检查',
+
   // AI Default Agent
   'ai.defaultAgent': '默认 Agent',
   'ai.defaultAgent.description': '创建新 AI 会话时使用的 Agent',
   'ai.defaultAgent.catty': 'Catty（内置）',
+  'ai.toolAccess.title': '工具接入',
+  'ai.toolAccess.mode': 'Netcatty 接入模式',
+  'ai.toolAccess.description': '选择外部 ACP Agent 访问 Netcatty 会话的方式。MCP 会暴露内置服务器，Skills + CLI 会引导 Agent 读取本地 Skill 并调用 Netcatty CLI。',
+  'ai.toolAccess.mode.mcp': 'MCP',
+  'ai.toolAccess.mode.skills': 'Skills + CLI',
+  'ai.userSkills.title': '用户 Skills',
+  'ai.userSkills.description': '打开 Netcatty 的 Skills 文件夹以添加你自己的技能目录。Netcatty 会自动扫描这些 skills，默认只注入轻量索引，只有在请求明显命中某个 skill 时才展开正文。',
+  'ai.userSkills.openFolder': '打开 Skills 文件夹',
+  'ai.userSkills.reload': '重新加载 Skills',
+  'ai.userSkills.location': '位置',
+  'ai.userSkills.loading': '正在扫描用户 skills...',
+  'ai.userSkills.summary': '已就绪 {ready} 个，警告 {warnings} 个',
+  'ai.userSkills.empty': '暂未发现用户 skills。打开文件夹后可添加包含 SKILL.md 的技能目录。',
+  'ai.userSkills.unavailable': '当前环境不支持用户 skills。',
+  'ai.userSkills.status.ready': '正常',
+  'ai.userSkills.status.warning': '警告',
 
   // AI Chat
   'ai.chat.noProvider': '尚未配置 AI 提供商。请前往 **设置 → AI → 提供商** 添加并启用一个提供商。',
@@ -1693,6 +1943,7 @@ const zhCN: Messages = {
   'ai.chat.menuFiles': '文件',
   'ai.chat.menuImage': '图片',
   'ai.chat.menuMentionHost': '提及主机',
+  'ai.chat.menuUserSkills': '用户 Skills',
 
   // AI Error
   'ai.codex.bridgeError': 'Codex 主进程处理器尚未加载。请完全重启 Netcatty 或重启 Electron 开发进程，然后重试。',
@@ -1715,7 +1966,7 @@ const zhCN: Messages = {
   // AI Safety Settings
   'ai.safety.title': '安全',
   'ai.safety.permissionMode': '权限模式',
-  'ai.safety.permissionMode.description': '控制 AI 与终端的交互方式。观察者模式通过 MCP Server 阻止所有写操作，对内置和 ACP Agent 均生效。确认模式对 ACP Agent 仅为建议性（ACP Agent 有自己的工具审批流程）。',
+  'ai.safety.permissionMode.description': '控制 AI 与终端的交互方式。观察者模式会通过 Netcatty 阻止所有写操作，对内置和 ACP Agent 均生效。确认模式对 ACP Agent 仅为建议性（ACP Agent 有自己的工具审批流程）。',
   'ai.safety.permissionMode.observer': '观察者 - 只读，禁止操作',
   'ai.safety.permissionMode.confirm': '确认 - 操作前询问',
   'ai.safety.permissionMode.autonomous': '自主 - 自由执行',
@@ -1725,7 +1976,7 @@ const zhCN: Messages = {
   'ai.safety.maxIterations': '最大迭代次数',
   'ai.safety.maxIterations.description': '防止 AI 失控执行的最大工具调用循环次数。ACP Agent 可能有自己的内部迭代限制，以其为准。',
   'ai.safety.blocklist': '命令黑名单',
-  'ai.safety.blocklist.description': '用于拦截危险命令的正则表达式。通过 MCP Server 对内置和 ACP Agent 均生效。',
+  'ai.safety.blocklist.description': '用于拦截危险命令的正则表达式。通过 Netcatty 执行层对内置和 ACP Agent 均生效。',
   'ai.safety.blocklist.placeholder': '正则表达式...',
   'ai.safety.blocklist.reset': '恢复默认',
   'ai.safety.blocklist.add': '添加规则',

application/localVaultBackups.ts

@@ -0,0 +1,495 @@
+import type { SyncPayload } from '../domain/sync';
+import {
+  STORAGE_KEY_LOCAL_VAULT_BACKUP_LAST_APP_VERSION,
+  STORAGE_KEY_LOCAL_VAULT_BACKUP_MAX_COUNT,
+  STORAGE_KEY_VAULT_APPLY_IN_PROGRESS,
+  STORAGE_KEY_VAULT_RESTORE_IN_PROGRESS_UNTIL,
+} from '../infrastructure/config/storageKeys';
+import { localStorageAdapter } from '../infrastructure/persistence/localStorageAdapter';
+import { getCloudSyncManager } from '../infrastructure/services/CloudSyncManager';
+import { netcattyBridge } from '../infrastructure/services/netcattyBridge';
+import { hasMeaningfulSyncData } from './syncPayload';
+
+/**
+ * Snapshot the current sync data version (the integer that increments
+ * on each successful cloud sync). Returns undefined when the value is
+ * 0 (never synced) or unavailable, so the UI can fall back to timestamp.
+ */
+function captureCurrentSyncDataVersion(): number | undefined {
+  try {
+    const state = getCloudSyncManager().getState();
+    const v = state.localVersion;
+    return typeof v === 'number' && v > 0 ? v : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+export type LocalVaultBackupReason = 'app_version_change' | 'before_restore';
+
+export interface LocalVaultBackupPreview {
+  id: string;
+  createdAt: number;
+  reason: LocalVaultBackupReason;
+  /** Sync-data version at the time the snapshot was taken (the integer
+   * that the CloudSyncManager increments on each successful cloud sync).
+   * Undefined when the user had never synced yet, or for legacy backups
+   * persisted before this field was added. */
+  syncDataVersion?: number;
+  /** App version transition fields, only for `app_version_change` records.
+   * Kept for backward compatibility with already-persisted backups. */
+  sourceAppVersion?: string;
+  targetAppVersion?: string;
+  fingerprint: string;
+  preview: {
+    hostCount: number;
+    keyCount: number;
+    snippetCount: number;
+    identityCount: number;
+    portForwardingRuleCount: number;
+  };
+}
+
+export interface LocalVaultBackupDetails {
+  backup: LocalVaultBackupPreview;
+  payload: SyncPayload;
+}
+
+export const DEFAULT_LOCAL_VAULT_BACKUP_MAX_COUNT = 20;
+export const MIN_LOCAL_VAULT_BACKUP_MAX_COUNT = 1;
+export const MAX_LOCAL_VAULT_BACKUP_MAX_COUNT = 100;
+
+export const sanitizeLocalVaultBackupMaxCount = (value: number): number => {
+  if (!Number.isFinite(value)) return DEFAULT_LOCAL_VAULT_BACKUP_MAX_COUNT;
+  return Math.max(
+    MIN_LOCAL_VAULT_BACKUP_MAX_COUNT,
+    Math.min(MAX_LOCAL_VAULT_BACKUP_MAX_COUNT, Math.round(value)),
+  );
+};
+
+export const getLocalVaultBackupMaxCount = (): number => {
+  const stored = localStorageAdapter.readNumber(STORAGE_KEY_LOCAL_VAULT_BACKUP_MAX_COUNT);
+  return sanitizeLocalVaultBackupMaxCount(
+    stored ?? DEFAULT_LOCAL_VAULT_BACKUP_MAX_COUNT,
+  );
+};
+
+export const setLocalVaultBackupMaxCount = (value: number): number => {
+  const sanitized = sanitizeLocalVaultBackupMaxCount(value);
+  localStorageAdapter.writeNumber(STORAGE_KEY_LOCAL_VAULT_BACKUP_MAX_COUNT, sanitized);
+  return sanitized;
+};
+
+export async function trimLocalVaultBackups(maxCount = getLocalVaultBackupMaxCount()): Promise<void> {
+  const bridge = netcattyBridge.get();
+  await bridge?.trimVaultBackups?.({ maxCount });
+}
+
+export async function getLocalVaultBackupCapabilities(): Promise<{
+  encryptionAvailable: boolean;
+}> {
+  const bridge = netcattyBridge.get();
+  const caps = await bridge?.getVaultBackupCapabilities?.();
+  // Conservatively treat a missing bridge (non-Electron environments, early
+  // boot) as unavailable so callers fall back to the locked-down UI path
+  // instead of assuming capabilities they can't verify.
+  return { encryptionAvailable: Boolean(caps?.encryptionAvailable) };
+}
+
+export async function listLocalVaultBackups(): Promise<LocalVaultBackupPreview[]> {
+  const bridge = netcattyBridge.get();
+  const entries = await bridge?.listVaultBackups?.();
+  return Array.isArray(entries) ? entries : [];
+}
+
+export async function readLocalVaultBackup(id: string): Promise<LocalVaultBackupDetails | null> {
+  const bridge = netcattyBridge.get();
+  if (!bridge?.readVaultBackup) return null;
+  return bridge.readVaultBackup({ id });
+}
+
+export async function openLocalVaultBackupDir(): Promise<void> {
+  const bridge = netcattyBridge.get();
+  await bridge?.openVaultBackupDir?.();
+}
+
+export async function createLocalVaultBackup(
+  payload: SyncPayload,
+  options: {
+    reason: LocalVaultBackupReason;
+    syncDataVersion?: number;
+    sourceAppVersion?: string;
+    targetAppVersion?: string;
+    maxCount?: number;
+  },
+): Promise<LocalVaultBackupPreview | null> {
+  // Intentional: an empty-vault backup has nothing to restore from, so we
+  // early-return instead of writing a zero-entry record. Callers that rely
+  // on a backup (protective-before-restore, version-change on first run)
+  // must treat `null` as "no safety net this time" and continue — blocking
+  // the user's flow on a missing backup would be worse than allowing the
+  // apply to proceed without one.
+  if (!hasMeaningfulSyncData(payload)) {
+    return null;
+  }
+
+  const bridge = netcattyBridge.get();
+  if (!bridge?.createVaultBackup) {
+    return null;
+  }
+
+  try {
+    const result = await bridge.createVaultBackup({
+      payload,
+      reason: options.reason,
+      // Default to the live cloud-sync version so every new backup carries
+      // it even when the caller didn't pass one explicitly. Bridge sanitizer
+      // drops invalid values (non-positive / non-finite), so this is safe.
+      syncDataVersion: options.syncDataVersion ?? captureCurrentSyncDataVersion(),
+      sourceAppVersion: options.sourceAppVersion,
+      targetAppVersion: options.targetAppVersion,
+      maxCount: options.maxCount ?? getLocalVaultBackupMaxCount(),
+    });
+    return result?.backup ?? null;
+  } catch (error) {
+    // The main-process bridge refuses to write backups when safeStorage is
+    // unavailable (VAULT_BACKUP_ENCRYPTION_UNAVAILABLE) because SyncPayload
+    // carries plaintext credentials that must never touch disk unencrypted.
+    // Callers (startup version-change, protective-before-restore) intentionally
+    // continue without a backup rather than blocking the user's flow, so we
+    // log and return null here.
+    const message = error instanceof Error ? error.message : String(error);
+    console.warn('[localVaultBackups] Backup skipped:', message);
+    return null;
+  }
+}
+
+/**
+ * Thrown when a caller requires a protective backup and the backup
+ * couldn't be written — safeStorage unavailable, bridge missing,
+ * main-process rejection, disk error.
+ *
+ * Callers should surface this as a user-visible abort rather than
+ * proceeding with the destructive apply. Separate from "nothing to
+ * back up" (empty vault) which is returned as `null`.
+ */
+export class ProtectiveBackupUnavailableError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'ProtectiveBackupUnavailableError';
+  }
+}
+
+/**
+ * Create a protective local backup before a destructive apply (restore
+ * from backup list, restore from Gist revision, cloud download applied
+ * over meaningful local state).
+ *
+ * Returns `null` when there is nothing meaningful to back up — in that
+ * case the caller can safely proceed with the apply, because there is
+ * no local data to lose.
+ *
+ * Throws `ProtectiveBackupUnavailableError` when pre-apply state IS
+ * meaningful but the backup attempt failed. Callers MUST abort the
+ * destructive apply in that case and surface the error to the user,
+ * otherwise we regress the exact safety contract the backup system
+ * was added to enforce (the `console.error`-and-proceed pattern that
+ * previously swallowed safeStorage/keychain failures and continued).
+ */
+export async function createRequiredProtectiveLocalVaultBackup(
+  payload: SyncPayload,
+): Promise<LocalVaultBackupPreview | null> {
+  if (!hasMeaningfulSyncData(payload)) {
+    // Nothing to protect — an empty-vault backup would produce a
+    // useless record, not a safety net.
+    return null;
+  }
+
+  const bridge = netcattyBridge.get();
+  if (!bridge?.createVaultBackup) {
+    throw new ProtectiveBackupUnavailableError(
+      'Vault backup bridge is not available in this environment.',
+    );
+  }
+
+  try {
+    const result = await bridge.createVaultBackup({
+      payload,
+      reason: 'before_restore',
+      maxCount: getLocalVaultBackupMaxCount(),
+    });
+    return result?.backup ?? null;
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    throw new ProtectiveBackupUnavailableError(message);
+  }
+}
+
+/**
+ * How long each heartbeat extends the cross-window restore barrier.
+ * Short enough that an abandoned lock (crashed window, hung task)
+ * clears itself quickly without user intervention. The heartbeat
+ * interval below refreshes the deadline as long as the caller's task
+ * is still running, so large vaults or slow keychain unlocks cannot
+ * expose a mid-apply window to concurrent auto-sync even when the
+ * total apply time exceeds this value.
+ */
+const RESTORE_BARRIER_HOLD_MS = 60_000;
+
+/**
+ * How often the heartbeat refreshes the barrier. Picked to ensure at
+ * least two refreshes land before the current deadline would expire,
+ * so a single missed tick (event-loop stall, GC pause) cannot drop
+ * the barrier prematurely.
+ */
+const RESTORE_BARRIER_HEARTBEAT_MS = Math.max(1_000, Math.floor(RESTORE_BARRIER_HOLD_MS / 3));
+
+/**
+ * Run `task` while holding a cross-window "restore in progress" barrier.
+ *
+ * The barrier is a localStorage key readable by every window of the same
+ * origin. useAutoSync reads it on each auto-sync and on each data-change
+ * debounce tick, refusing to push while the deadline is still in the
+ * future. We write a time-bounded deadline (rather than a boolean) so a
+ * crashed window can never leave sync permanently wedged.
+ *
+ * While the task runs, a heartbeat timer re-writes the deadline so a
+ * slow apply (large vault, slow keychain) keeps the barrier held rather
+ * than exposing a post-deadline window to concurrent auto-sync. The
+ * heartbeat is cleared and the barrier is released in a finally block
+ * so success, throw, and unexpected early-return all converge on the
+ * same cleanup.
+ */
+export async function withRestoreBarrier<T>(
+  task: () => Promise<T>,
+  holdMs: number = RESTORE_BARRIER_HOLD_MS,
+): Promise<T> {
+  const writeDeadline = () => {
+    try {
+      localStorageAdapter.writeNumber(
+        STORAGE_KEY_VAULT_RESTORE_IN_PROGRESS_UNTIL,
+        Date.now() + holdMs,
+      );
+    } catch (error) {
+      // If we can't write the barrier we still proceed — the UI-side
+      // `isSyncBusy` guard and same-window debounce cancellation are a
+      // secondary defense. Better to complete the restore than refuse on
+      // a broken localStorage.
+      console.warn('[localVaultBackups] Failed to set restore barrier:', error);
+    }
+  };
+
+  writeDeadline();
+  const heartbeat = setInterval(
+    writeDeadline,
+    Math.max(1_000, Math.min(holdMs / 3, RESTORE_BARRIER_HEARTBEAT_MS)),
+  );
+
+  try {
+    return await task();
+  } finally {
+    clearInterval(heartbeat);
+    try {
+      localStorageAdapter.writeNumber(STORAGE_KEY_VAULT_RESTORE_IN_PROGRESS_UNTIL, 0);
+    } catch {
+      /* ignore — the deadline will expire naturally */
+    }
+  }
+}
+
+/**
+ * Shape of the apply-in-progress sentinel record. Persisted as JSON in
+ * `STORAGE_KEY_VAULT_APPLY_IN_PROGRESS` so the next session can
+ * distinguish "the last apply completed cleanly" from "the last apply
+ * crashed mid-way and the local vault is a partial mix of states."
+ */
+export interface VaultApplyInProgressRecord {
+  startedAt: number;
+  protectiveBackupId: string | null;
+}
+
+/**
+ * Returns the persisted apply-in-progress record if a previous apply
+ * was interrupted before clearing it. Callers (notably auto-sync) use
+ * this to refuse to push a partial-apply local state over an intact
+ * cloud copy. See `applyProtectedSyncPayload` for the write side.
+ *
+ * `null` here means "no interrupted apply detected" — either nothing
+ * was ever applied, or the last apply finished cleanly.
+ */
+export function readInterruptedVaultApply(): VaultApplyInProgressRecord | null {
+  try {
+    const raw = localStorageAdapter.readString(STORAGE_KEY_VAULT_APPLY_IN_PROGRESS);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== 'object') return null;
+    const startedAt = typeof parsed.startedAt === 'number' ? parsed.startedAt : 0;
+    const protectiveBackupId =
+      typeof parsed.protectiveBackupId === 'string' ? parsed.protectiveBackupId : null;
+    if (!startedAt) return null;
+    return { startedAt, protectiveBackupId };
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Clears the apply-in-progress sentinel. The normal completion path
+ * inside `applyProtectedSyncPayload` clears it automatically; this
+ * export exists so the user's explicit recovery action ("I've restored
+ * from a backup, resume sync") can acknowledge the interrupted state
+ * from the UI without re-running an apply.
+ */
+export function clearInterruptedVaultApply(): void {
+  try {
+    localStorageAdapter.remove(STORAGE_KEY_VAULT_APPLY_IN_PROGRESS);
+  } catch {
+    /* ignore — next clean apply will overwrite */
+  }
+}
+
+function writeApplyInProgressSentinel(record: VaultApplyInProgressRecord): void {
+  try {
+    localStorageAdapter.writeString(
+      STORAGE_KEY_VAULT_APPLY_IN_PROGRESS,
+      JSON.stringify(record),
+    );
+  } catch (error) {
+    // Sentinel write is best-effort: a failure here means a later crash
+    // won't be detected, but does NOT compromise the apply itself.
+    // Log so a systematic storage outage is diagnosable.
+    console.warn('[localVaultBackups] Failed to set apply-in-progress sentinel:', error);
+  }
+}
+
+/**
+ * Shared "apply a remote-sourced payload safely" helper.
+ *
+ * Holds the cross-window restore barrier, snapshots the pre-apply vault
+ * into a protective backup, persists an apply-in-progress sentinel, and
+ * only then runs the supplied `applyPayload` callback. Every destructive
+ * apply path (startup merge, conflict resolution, empty-vault restore,
+ * manual Gist-revision restore) must go through this so the protections
+ * can't drift out of sync between the main window and the settings
+ * window.
+ *
+ * The sentinel closes the partial-apply-then-crash window: `applyPayload`
+ * writes to several localStorage keys non-atomically (hosts, keys, port-
+ * forwarding rules, settings). A crash mid-sequence leaves the vault in
+ * a state that is neither pre-apply nor post-apply, and the next
+ * auto-sync would otherwise push that partial state over an intact cloud
+ * copy. The sentinel flags "local may be inconsistent" for the next
+ * session; `readInterruptedVaultApply` exposes that to callers that
+ * enforce "don't auto-push a half-applied vault."
+ *
+ * `buildPreApplyPayload` is invoked *before* the apply to snapshot the
+ * current vault. Callers pass their own React-closure builder (hosts,
+ * keys, port-forwarding rules) because the caller owns that state.
+ *
+ * `translateProtectiveBackupFailure` converts the
+ * `ProtectiveBackupUnavailableError` into a user-visible message in the
+ * caller's locale. It runs only on the thrown-and-caught path.
+ */
+export function applyProtectedSyncPayload(options: {
+  buildPreApplyPayload: () => SyncPayload;
+  applyPayload: () => void | Promise<void>;
+  translateProtectiveBackupFailure: (message: string) => string;
+}): Promise<void> {
+  const { buildPreApplyPayload, applyPayload, translateProtectiveBackupFailure } = options;
+  return withRestoreBarrier(async () => {
+    const pre = buildPreApplyPayload();
+    let protectiveBackupId: string | null = null;
+    try {
+      const backup = await createRequiredProtectiveLocalVaultBackup(pre);
+      protectiveBackupId = backup?.id ?? null;
+    } catch (error) {
+      // Destructive apply without a working safety net is exactly the
+      // overwrite-without-recovery regression this module was added to
+      // prevent. Surface the failure to the caller; every call site
+      // currently aborts the apply and shows a user-visible error.
+      if (error instanceof ProtectiveBackupUnavailableError) {
+        throw new Error(translateProtectiveBackupFailure(error.message));
+      }
+      throw error;
+    }
+
+    // Mark the apply as in-progress. If the renderer crashes between
+    // the first localStorage write inside `applyPayload` and the
+    // successful completion below, the next session will observe this
+    // sentinel and refuse to auto-sync the partial state.
+    writeApplyInProgressSentinel({
+      startedAt: Date.now(),
+      protectiveBackupId,
+    });
+
+    // Only clear the sentinel on successful completion. A throw from
+    // `applyPayload` deliberately leaves the sentinel set: the partial
+    // write is still on disk, and the next session must observe the
+    // flag so auto-sync refuses to push the half-applied state.
+    await applyPayload();
+    clearInterruptedVaultApply();
+  });
+}
+
+export async function ensureVersionChangeBackup(
+  payload: SyncPayload,
+  currentAppVersion: string | null | undefined,
+): Promise<{ created: boolean; backup: LocalVaultBackupPreview | null }> {
+  const normalizedVersion = currentAppVersion?.trim() || '';
+  if (!normalizedVersion) {
+    return { created: false, backup: null };
+  }
+
+  const previousVersion =
+    localStorageAdapter.readString(STORAGE_KEY_LOCAL_VAULT_BACKUP_LAST_APP_VERSION)?.trim() || '';
+
+  if (!previousVersion) {
+    localStorageAdapter.writeString(STORAGE_KEY_LOCAL_VAULT_BACKUP_LAST_APP_VERSION, normalizedVersion);
+    return { created: false, backup: null };
+  }
+
+  if (previousVersion === normalizedVersion) {
+    return { created: false, backup: null };
+  }
+
+  let backup: LocalVaultBackupPreview | null = null;
+  const payloadIsMeaningful = hasMeaningfulSyncData(payload);
+  if (payloadIsMeaningful) {
+    backup = await createLocalVaultBackup(payload, {
+      reason: 'app_version_change',
+      sourceAppVersion: previousVersion,
+      targetAppVersion: normalizedVersion,
+    });
+  }
+
+  // Only advance the stored version stamp when we actually wrote a
+  // backup. Two failure modes we must NOT collapse into "advance":
+  //
+  //   1. Meaningful payload + backup failed (transient keychain lock,
+  //      disk error) — leaving the stamp unchanged means the next
+  //      launch retries, instead of turning a transient error into a
+  //      permanent "the version-change backup never happened" hole.
+  //
+  //   2. Non-meaningful payload at the moment we checked — on startup
+  //      the async vault rehydrate may not have finished yet, so
+  //      `hasMeaningfulSyncData` can return false transiently even
+  //      though the user has real data. Advancing in that window would
+  //      burn the one-shot upgrade opportunity; holding keeps the
+  //      retry available on the next launch when rehydrate has
+  //      completed (or when the user genuinely starts from empty and
+  //      the next migration-boundary arrives).
+  //
+  // Trade-off: a user who truly starts empty and never adds data will
+  // hit this branch on every launch until they do. That's cheap (a
+  // single meaningful-data check) and strictly safer than silently
+  // skipping the first real upgrade backup.
+  const shouldAdvanceVersion = payloadIsMeaningful && backup !== null;
+  if (shouldAdvanceVersion) {
+    localStorageAdapter.writeString(STORAGE_KEY_LOCAL_VAULT_BACKUP_LAST_APP_VERSION, normalizedVersion);
+  }
+
+  return {
+    created: Boolean(backup),
+    backup,
+  };
+}

application/notification.ts

@@ -0,0 +1,38 @@
+/**
+ * Application-layer notification port.
+ *
+ * UI layers (e.g. toast) register their implementation via `setNotify`.
+ * Application code calls `notify.*` without importing any UI module.
+ */
+
+export interface NotifyOptions {
+  title?: string;
+  duration?: number;
+  onClick?: () => void;
+  actionLabel?: string;
+}
+
+type NotifyFn = (message: string, titleOrOptions?: string | NotifyOptions) => void;
+
+interface Notify {
+  success: NotifyFn;
+  error: NotifyFn;
+  warning: NotifyFn;
+  info: NotifyFn;
+}
+
+const noop: NotifyFn = () => {};
+
+let _impl: Notify = { success: noop, error: noop, warning: noop, info: noop };
+
+/** Called once by the UI layer to wire up the real implementation. */
+export function setNotify(impl: Notify): void {
+  _impl = impl;
+}
+
+export const notify: Notify = {
+  success: (...args) => _impl.success(...args),
+  error: (...args) => _impl.error(...args),
+  warning: (...args) => _impl.warning(...args),
+  info: (...args) => _impl.info(...args),
+};

application/state/activeTabStore.ts

@@ -6,6 +6,7 @@ type Listener = () => void;
 class ActiveTabStore {
   private activeTabId: string = 'vault';
   private listeners = new Set<Listener>();
+  private pendingNotify = false;
 
   getActiveTabId = () => this.activeTabId;
 
@@ -13,7 +14,10 @@ class ActiveTabStore {
     if (this.activeTabId !== id) {
       this.activeTabId = id;
       // Defer listener notification to avoid "setState during render" if called from a render phase
+      if (this.pendingNotify) return;
+      this.pendingNotify = true;
       Promise.resolve().then(() => {
+        this.pendingNotify = false;
         this.listeners.forEach(listener => listener());
       });
     }

application/state/aiDraftState.test.ts

@@ -0,0 +1,349 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import {
+  activateDraftView,
+  bumpDraftMutationVersionState,
+  bumpDraftUploadGenerationState,
+  clearScopeDraftState,
+  createEmptyDraft,
+  ensureDraftForScopeState,
+  getDraftMutationVersionState,
+  getDraftUploadGenerationState,
+  pruneTerminalScopeState,
+  pruneTerminalTransientState,
+  resolvePanelView,
+  selectDraftForAgentSwitch,
+  setDraftView,
+  setSessionView,
+  updateDraftForScope,
+} from "./aiDraftState.ts";
+
+test("createEmptyDraft seeds selected agent and empty inputs", () => {
+  const draft = createEmptyDraft("agent-alpha");
+
+  assert.equal(draft.agentId, "agent-alpha");
+  assert.equal(draft.text, "");
+  assert.deepEqual(draft.attachments, []);
+  assert.deepEqual(draft.selectedUserSkillSlugs, []);
+  assert.equal(typeof draft.updatedAt, "number");
+});
+
+test("resolvePanelView defaults to draft when no explicit view exists", () => {
+  assert.deepEqual(resolvePanelView({}, "terminal:123"), { mode: "draft" });
+});
+
+test("setDraftView records draft mode", () => {
+  assert.deepEqual(setDraftView({}, "terminal:123"), {
+    "terminal:123": { mode: "draft" },
+  });
+});
+
+test("activateDraftView clears the terminal scope's active session owner", () => {
+  const activeSessionIdMap = {
+    "terminal:123": "session-123",
+    "workspace:abc": "session-workspace",
+  };
+  const panelViewByScope = {
+    "terminal:123": { mode: "session", sessionId: "session-123" },
+    "workspace:abc": { mode: "session", sessionId: "session-workspace" },
+  } satisfies Record<string, { mode: "draft" } | { mode: "session"; sessionId: string }>;
+
+  const next = activateDraftView(
+    activeSessionIdMap,
+    panelViewByScope,
+    "terminal:123",
+  );
+
+  assert.deepEqual(next.activeSessionIdMap, {
+    "workspace:abc": "session-workspace",
+  });
+  assert.deepEqual(next.panelViewByScope, {
+    "terminal:123": { mode: "draft" },
+    "workspace:abc": panelViewByScope["workspace:abc"],
+  });
+});
+
+test("activateDraftView is a no-op when the scope already has explicit draft view", () => {
+  const activeSessionIdMap = {
+    "workspace:abc": "session-workspace",
+  };
+  const panelViewByScope = {
+    "terminal:123": { mode: "draft" },
+    "workspace:abc": { mode: "session", sessionId: "session-workspace" },
+  } satisfies Record<string, { mode: "draft" } | { mode: "session"; sessionId: string }>;
+
+  const next = activateDraftView(
+    activeSessionIdMap,
+    panelViewByScope,
+    "terminal:123",
+  );
+
+  assert.equal(next.activeSessionIdMap, activeSessionIdMap);
+  assert.equal(next.panelViewByScope, panelViewByScope);
+});
+
+test("setSessionView records target session id", () => {
+  assert.deepEqual(setSessionView({}, "workspace:abc", "session-123"), {
+    "workspace:abc": { mode: "session", sessionId: "session-123" },
+  });
+});
+
+test("clearScopeDraftState removes both the draft and current panel view", () => {
+  const draftsByScope = {
+    "terminal:1": createEmptyDraft("agent-alpha"),
+    "workspace:2": createEmptyDraft("agent-beta"),
+  };
+  const panelViewByScope = {
+    "terminal:1": { mode: "session", sessionId: "session-123" },
+    "workspace:2": { mode: "draft" },
+  } satisfies Record<string, { mode: "draft" } | { mode: "session"; sessionId: string }>;
+
+  const next = clearScopeDraftState(draftsByScope, panelViewByScope, "terminal:1");
+
+  assert.deepEqual(next.draftsByScope, {
+    "workspace:2": draftsByScope["workspace:2"],
+  });
+  assert.deepEqual(next.panelViewByScope, {
+    "workspace:2": panelViewByScope["workspace:2"],
+  });
+});
+
+test("clearScopeDraftState is a no-op when the scope is already cleared", () => {
+  const draftsByScope = {
+    "workspace:2": createEmptyDraft("agent-beta"),
+  };
+  const panelViewByScope = {
+    "workspace:2": { mode: "draft" },
+  } satisfies Record<string, { mode: "draft" } | { mode: "session"; sessionId: string }>;
+
+  const next = clearScopeDraftState(draftsByScope, panelViewByScope, "terminal:closed");
+
+  assert.equal(next.draftsByScope, draftsByScope);
+  assert.equal(next.panelViewByScope, panelViewByScope);
+});
+
+test("updateDraftForScope creates a draft on first write and keeps other scopes untouched", () => {
+  const draftsByScope = {
+    "workspace:2": createEmptyDraft("agent-beta"),
+  };
+
+  const next = updateDraftForScope(
+    draftsByScope,
+    "terminal:1",
+    "agent-alpha",
+    (draft) => ({
+      ...draft,
+      text: "hello world",
+    }),
+  );
+
+  assert.equal(next["terminal:1"].agentId, "agent-alpha");
+  assert.equal(next["terminal:1"].text, "hello world");
+  assert.equal(next["workspace:2"], draftsByScope["workspace:2"]);
+});
+
+test("ensureDraftForScopeState adds the missing scope without dropping siblings", () => {
+  const draftsByScope = {
+    "workspace:2": createEmptyDraft("agent-beta"),
+  };
+
+  const next = ensureDraftForScopeState(
+    draftsByScope,
+    "terminal:1",
+    "agent-alpha",
+  );
+
+  assert.equal(next["terminal:1"].agentId, "agent-alpha");
+  assert.equal(next["terminal:1"].text, "");
+  assert.equal(next["workspace:2"], draftsByScope["workspace:2"]);
+});
+
+test("ensureDraftForScopeState returns the original ref when the scope already exists", () => {
+  const draftsByScope = {
+    "terminal:1": createEmptyDraft("agent-alpha"),
+  };
+
+  const next = ensureDraftForScopeState(
+    draftsByScope,
+    "terminal:1",
+    "agent-beta",
+  );
+
+  assert.equal(next, draftsByScope);
+});
+
+test("selectDraftForAgentSwitch preserves hidden draft content when leaving a populated chat session", () => {
+  const currentDraft = {
+    ...createEmptyDraft("agent-alpha"),
+    text: "keep me only if I was already drafting",
+    attachments: [{ id: "file-1", filename: "note.txt", dataUrl: "", base64Data: "", mediaType: "text/plain" }],
+    selectedUserSkillSlugs: ["skill-a"],
+  };
+
+  const next = selectDraftForAgentSwitch(currentDraft, "agent-beta", true);
+
+  assert.equal(next.agentId, "agent-beta");
+  assert.equal(next.text, "keep me only if I was already drafting");
+  assert.deepEqual(next.attachments, currentDraft.attachments);
+  assert.deepEqual(next.selectedUserSkillSlugs, ["skill-a"]);
+});
+
+test("selectDraftForAgentSwitch resets to an empty draft when leaving a populated chat session without pending draft content", () => {
+  const currentDraft = createEmptyDraft("agent-alpha");
+
+  const next = selectDraftForAgentSwitch(currentDraft, "agent-beta", true);
+
+  assert.equal(next.agentId, "agent-beta");
+  assert.equal(next.text, "");
+  assert.deepEqual(next.attachments, []);
+  assert.deepEqual(next.selectedUserSkillSlugs, []);
+});
+
+test("selectDraftForAgentSwitch preserves an existing draft while only changing agent", () => {
+  const currentDraft = {
+    ...createEmptyDraft("agent-alpha"),
+    text: "unfinished prompt",
+    selectedUserSkillSlugs: ["skill-a"],
+  };
+
+  const next = selectDraftForAgentSwitch(currentDraft, "agent-beta", false);
+
+  assert.equal(next.agentId, "agent-beta");
+  assert.equal(next.text, "unfinished prompt");
+  assert.deepEqual(next.selectedUserSkillSlugs, ["skill-a"]);
+});
+
+test("draft mutation version increments on every mutation for the same scope", () => {
+  const scopeKey = "terminal:1";
+  const initialVersion = getDraftMutationVersionState({}, scopeKey);
+  const nextVersions = bumpDraftMutationVersionState({}, scopeKey);
+  const finalVersions = bumpDraftMutationVersionState(nextVersions, scopeKey);
+
+  assert.equal(initialVersion, 0);
+  assert.equal(getDraftMutationVersionState(nextVersions, scopeKey), 1);
+  assert.equal(getDraftMutationVersionState(finalVersions, scopeKey), 2);
+});
+
+test("draft upload generation only increments when the draft lifecycle rolls over", () => {
+  const scopeKey = "terminal:1";
+  const initialGeneration = getDraftUploadGenerationState({}, scopeKey);
+  const nextGenerations = bumpDraftUploadGenerationState({}, scopeKey);
+  const finalGenerations = bumpDraftUploadGenerationState(nextGenerations, scopeKey);
+
+  assert.equal(initialGeneration, 0);
+  assert.equal(getDraftUploadGenerationState(nextGenerations, scopeKey), 1);
+  assert.equal(getDraftUploadGenerationState(finalGenerations, scopeKey), 2);
+});
+
+test("pruneTerminalScopeState removes closed terminal drafts and views only", () => {
+  const draftsByScope = {
+    "terminal:closed": createEmptyDraft("agent-alpha"),
+    "terminal:open": createEmptyDraft("agent-beta"),
+    "workspace:keep": createEmptyDraft("agent-gamma"),
+  };
+  const panelViewByScope = {
+    "terminal:closed": { mode: "draft" },
+    "terminal:open": { mode: "session", sessionId: "session-open" },
+    "workspace:keep": { mode: "session", sessionId: "session-workspace" },
+  } satisfies Record<string, { mode: "draft" } | { mode: "session"; sessionId: string }>;
+
+  const next = pruneTerminalScopeState(
+    draftsByScope,
+    panelViewByScope,
+    new Set(["open"]),
+  );
+
+  assert.deepEqual(next.draftsByScope, {
+    "terminal:open": draftsByScope["terminal:open"],
+    "workspace:keep": draftsByScope["workspace:keep"],
+  });
+  assert.deepEqual(next.panelViewByScope, {
+    "terminal:open": panelViewByScope["terminal:open"],
+    "workspace:keep": panelViewByScope["workspace:keep"],
+  });
+});
+
+test("pruneTerminalScopeState returns original refs when nothing is pruned", () => {
+  const draftsByScope = {
+    "terminal:open": createEmptyDraft("agent-alpha"),
+    "workspace:keep": createEmptyDraft("agent-beta"),
+  };
+  const panelViewByScope = {
+    "terminal:open": { mode: "draft" },
+    "workspace:keep": { mode: "session", sessionId: "session-1" },
+  } satisfies Record<string, { mode: "draft" } | { mode: "session"; sessionId: string }>;
+
+  const next = pruneTerminalScopeState(
+    draftsByScope,
+    panelViewByScope,
+    new Set(["open"]),
+  );
+
+  assert.equal(next.draftsByScope, draftsByScope);
+  assert.equal(next.panelViewByScope, panelViewByScope);
+});
+
+test("pruneTerminalTransientState clears closed terminal active session, draft, and view state only", () => {
+  const activeSessionIdMap = {
+    "terminal:closed": "session-closed",
+    "terminal:open": "session-open",
+    "workspace:keep": "session-workspace",
+  };
+  const draftsByScope = {
+    "terminal:closed": createEmptyDraft("agent-alpha"),
+    "terminal:open": createEmptyDraft("agent-beta"),
+    "workspace:keep": createEmptyDraft("agent-gamma"),
+  };
+  const panelViewByScope = {
+    "terminal:closed": { mode: "draft" },
+    "terminal:open": { mode: "session", sessionId: "session-open" },
+    "workspace:keep": { mode: "session", sessionId: "session-workspace" },
+  } satisfies Record<string, { mode: "draft" } | { mode: "session"; sessionId: string }>;
+
+  const next = pruneTerminalTransientState(
+    activeSessionIdMap,
+    draftsByScope,
+    panelViewByScope,
+    new Set(["open"]),
+  );
+
+  assert.deepEqual(next.activeSessionIdMap, {
+    "terminal:open": "session-open",
+    "workspace:keep": "session-workspace",
+  });
+  assert.deepEqual(next.draftsByScope, {
+    "terminal:open": draftsByScope["terminal:open"],
+    "workspace:keep": draftsByScope["workspace:keep"],
+  });
+  assert.deepEqual(next.panelViewByScope, {
+    "terminal:open": panelViewByScope["terminal:open"],
+    "workspace:keep": panelViewByScope["workspace:keep"],
+  });
+});
+
+test("pruneTerminalTransientState returns original refs when no terminal scopes close", () => {
+  const activeSessionIdMap = {
+    "terminal:open": "session-open",
+    "workspace:keep": "session-workspace",
+  };
+  const draftsByScope = {
+    "terminal:open": createEmptyDraft("agent-alpha"),
+    "workspace:keep": createEmptyDraft("agent-beta"),
+  };
+  const panelViewByScope = {
+    "terminal:open": { mode: "draft" },
+    "workspace:keep": { mode: "session", sessionId: "session-workspace" },
+  } satisfies Record<string, { mode: "draft" } | { mode: "session"; sessionId: string }>;
+
+  const next = pruneTerminalTransientState(
+    activeSessionIdMap,
+    draftsByScope,
+    panelViewByScope,
+    new Set(["open"]),
+  );
+
+  assert.equal(next.activeSessionIdMap, activeSessionIdMap);
+  assert.equal(next.draftsByScope, draftsByScope);
+  assert.equal(next.panelViewByScope, panelViewByScope);
+});

application/state/aiDraftState.ts

@@ -0,0 +1,282 @@
+import type {
+  AIDraft,
+  AIPanelView,
+} from '../../infrastructure/ai/types';
+
+type DraftsByScope = Partial<Record<string, AIDraft>>;
+type PanelViewByScope = Partial<Record<string, AIPanelView>>;
+type ActiveSessionIdMap = Record<string, string | null>;
+type DraftMutationVersionByScope = Record<string, number>;
+type DraftUploadGenerationByScope = Record<string, number>;
+
+const DEFAULT_PANEL_VIEW: AIPanelView = { mode: 'draft' };
+
+export function createEmptyDraft(agentId: string): AIDraft {
+  return {
+    text: '',
+    agentId,
+    attachments: [],
+    selectedUserSkillSlugs: [],
+    updatedAt: Date.now(),
+  };
+}
+
+export function getDraftMutationVersionState(
+  versionsByScope: DraftMutationVersionByScope,
+  scopeKey: string,
+): number {
+  return versionsByScope[scopeKey] ?? 0;
+}
+
+export function bumpDraftMutationVersionState(
+  versionsByScope: DraftMutationVersionByScope,
+  scopeKey: string,
+): DraftMutationVersionByScope {
+  return {
+    ...versionsByScope,
+    [scopeKey]: getDraftMutationVersionState(versionsByScope, scopeKey) + 1,
+  };
+}
+
+export function getDraftUploadGenerationState(
+  generationsByScope: DraftUploadGenerationByScope,
+  scopeKey: string,
+): number {
+  return generationsByScope[scopeKey] ?? 0;
+}
+
+export function bumpDraftUploadGenerationState(
+  generationsByScope: DraftUploadGenerationByScope,
+  scopeKey: string,
+): DraftUploadGenerationByScope {
+  return {
+    ...generationsByScope,
+    [scopeKey]: getDraftUploadGenerationState(generationsByScope, scopeKey) + 1,
+  };
+}
+
+export function resolvePanelView(
+  panelViewByScope: PanelViewByScope,
+  scopeKey: string,
+): AIPanelView {
+  return panelViewByScope[scopeKey] ?? DEFAULT_PANEL_VIEW;
+}
+
+export function setDraftView(
+  panelViewByScope: PanelViewByScope,
+  scopeKey: string,
+): PanelViewByScope {
+  const currentPanelView = panelViewByScope[scopeKey];
+  if (currentPanelView?.mode === 'draft') {
+    return panelViewByScope;
+  }
+
+  return {
+    ...panelViewByScope,
+    [scopeKey]: DEFAULT_PANEL_VIEW,
+  };
+}
+
+export function activateDraftView(
+  activeSessionIdMap: ActiveSessionIdMap,
+  panelViewByScope: PanelViewByScope,
+  scopeKey: string,
+): {
+  activeSessionIdMap: ActiveSessionIdMap;
+  panelViewByScope: PanelViewByScope;
+} {
+  const nextPanelViewByScope = setDraftView(panelViewByScope, scopeKey);
+  const hasActiveSession = activeSessionIdMap[scopeKey] != null;
+
+  if (!hasActiveSession) {
+    return {
+      activeSessionIdMap,
+      panelViewByScope: nextPanelViewByScope,
+    };
+  }
+
+  const nextActiveSessionIdMap = { ...activeSessionIdMap };
+  delete nextActiveSessionIdMap[scopeKey];
+
+  return {
+    activeSessionIdMap: nextActiveSessionIdMap,
+    panelViewByScope: nextPanelViewByScope,
+  };
+}
+
+export function setSessionView(
+  panelViewByScope: PanelViewByScope,
+  scopeKey: string,
+  sessionId: string,
+): PanelViewByScope {
+  return {
+    ...panelViewByScope,
+    [scopeKey]: { mode: 'session', sessionId },
+  };
+}
+
+export function updateDraftForScope(
+  draftsByScope: DraftsByScope,
+  scopeKey: string,
+  fallbackAgentId: string,
+  updater: (draft: AIDraft) => AIDraft,
+): DraftsByScope {
+  const currentDraft = draftsByScope[scopeKey] ?? createEmptyDraft(fallbackAgentId);
+  const nextDraft = updater(currentDraft);
+
+  return {
+    ...draftsByScope,
+    [scopeKey]: nextDraft,
+  };
+}
+
+export function ensureDraftForScopeState(
+  draftsByScope: DraftsByScope,
+  scopeKey: string,
+  agentId: string,
+): DraftsByScope {
+  if (draftsByScope[scopeKey]) {
+    return draftsByScope;
+  }
+
+  return {
+    ...draftsByScope,
+    [scopeKey]: createEmptyDraft(agentId),
+  };
+}
+
+export function selectDraftForAgentSwitch(
+  currentDraft: AIDraft | null | undefined,
+  agentId: string,
+  startFresh: boolean,
+): AIDraft {
+  const hasPendingDraftContent = Boolean(
+    currentDraft
+    && (
+      currentDraft.text.length > 0
+      || currentDraft.attachments.length > 0
+      || currentDraft.selectedUserSkillSlugs.length > 0
+    ),
+  );
+
+  if (startFresh && !hasPendingDraftContent) {
+    return createEmptyDraft(agentId);
+  }
+
+  const baseDraft = currentDraft ?? createEmptyDraft(agentId);
+  return {
+    ...baseDraft,
+    agentId,
+  };
+}
+
+export function clearScopeDraftState(
+  draftsByScope: DraftsByScope,
+  panelViewByScope: PanelViewByScope,
+  scopeKey: string,
+): {
+  draftsByScope: DraftsByScope;
+  panelViewByScope: PanelViewByScope;
+} {
+  const hasDraft = Object.prototype.hasOwnProperty.call(draftsByScope, scopeKey);
+  const hasPanelView = Object.prototype.hasOwnProperty.call(panelViewByScope, scopeKey);
+
+  if (!hasDraft && !hasPanelView) {
+    return {
+      draftsByScope,
+      panelViewByScope,
+    };
+  }
+
+  return {
+    draftsByScope: hasDraft
+      ? (() => {
+          const nextDrafts = { ...draftsByScope };
+          delete nextDrafts[scopeKey];
+          return nextDrafts;
+        })()
+      : draftsByScope,
+    panelViewByScope: hasPanelView
+      ? (() => {
+          const nextPanelViews = { ...panelViewByScope };
+          delete nextPanelViews[scopeKey];
+          return nextPanelViews;
+        })()
+      : panelViewByScope,
+  };
+}
+
+function isClosedTerminalScope(scopeKey: string, activeTerminalTargetIds: Set<string>) {
+  if (!scopeKey.startsWith('terminal:')) return false;
+
+  const targetId = scopeKey.slice('terminal:'.length);
+  if (!targetId) return false;
+
+  return !activeTerminalTargetIds.has(targetId);
+}
+
+export function pruneTerminalScopeState(
+  draftsByScope: DraftsByScope,
+  panelViewByScope: PanelViewByScope,
+  activeTerminalTargetIds: Set<string>,
+): {
+  draftsByScope: DraftsByScope;
+  panelViewByScope: PanelViewByScope;
+} {
+  const nextDraftsByScope = { ...draftsByScope };
+  const nextPanelViewByScope = { ...panelViewByScope };
+  let draftsChanged = false;
+  let panelViewsChanged = false;
+
+  for (const scopeKey of Object.keys(nextDraftsByScope)) {
+    if (!isClosedTerminalScope(scopeKey, activeTerminalTargetIds)) continue;
+    delete nextDraftsByScope[scopeKey];
+    draftsChanged = true;
+  }
+
+  for (const scopeKey of Object.keys(nextPanelViewByScope)) {
+    if (!isClosedTerminalScope(scopeKey, activeTerminalTargetIds)) continue;
+    delete nextPanelViewByScope[scopeKey];
+    panelViewsChanged = true;
+  }
+
+  return {
+    draftsByScope: draftsChanged ? nextDraftsByScope : draftsByScope,
+    panelViewByScope: panelViewsChanged ? nextPanelViewByScope : panelViewByScope,
+  };
+}
+
+export function pruneTerminalTransientState(
+  activeSessionIdMap: ActiveSessionIdMap,
+  draftsByScope: DraftsByScope,
+  panelViewByScope: PanelViewByScope,
+  activeTerminalTargetIds: Set<string>,
+): {
+  activeSessionIdMap: ActiveSessionIdMap;
+  draftsByScope: DraftsByScope;
+  panelViewByScope: PanelViewByScope;
+} {
+  let activeSessionMapChanged = false;
+  const nextActiveSessionIdMap: ActiveSessionIdMap = {};
+
+  for (const [scopeKey, sessionId] of Object.entries(activeSessionIdMap)) {
+    if (isClosedTerminalScope(scopeKey, activeTerminalTargetIds)) {
+      activeSessionMapChanged = true;
+      continue;
+    }
+
+    nextActiveSessionIdMap[scopeKey] = sessionId;
+  }
+
+  const nextTerminalScopeState = pruneTerminalScopeState(
+    draftsByScope,
+    panelViewByScope,
+    activeTerminalTargetIds,
+  );
+
+  return {
+    activeSessionIdMap: activeSessionMapChanged ? nextActiveSessionIdMap : activeSessionIdMap,
+    draftsByScope: nextTerminalScopeState.draftsByScope,
+    panelViewByScope: nextTerminalScopeState.panelViewByScope,
+  };
+}

application/state/aiScopeCleanup.test.ts

@@ -0,0 +1,160 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import type {
+  AIPanelView,
+  AISession,
+} from "../../infrastructure/ai/types.ts";
+import { createEmptyDraft } from "./aiDraftState.ts";
+import {
+  pruneInactiveScopedSessions,
+  pruneInactiveScopedTransientState,
+} from "./aiScopeCleanup.ts";
+
+function createSession(id: string, scope: AISession["scope"], externalSessionId?: string): AISession {
+  return {
+    id,
+    title: id,
+    agentId: "catty",
+    scope,
+    messages: [],
+    externalSessionId,
+    createdAt: 1,
+    updatedAt: 1,
+  };
+}
+
+test("pruneInactiveScopedTransientState removes closed workspace and terminal scope state", () => {
+  const activeSessionIdMap = {
+    "terminal:open-terminal": "session-open",
+    "terminal:closed-terminal": "session-closed-terminal",
+    "workspace:open-workspace": "session-open-workspace",
+    "workspace:closed-workspace": "session-closed-workspace",
+  };
+  const draftsByScope = {
+    "terminal:open-terminal": createEmptyDraft("catty"),
+    "terminal:closed-terminal": createEmptyDraft("catty"),
+    "workspace:open-workspace": createEmptyDraft("catty"),
+    "workspace:closed-workspace": createEmptyDraft("catty"),
+  };
+  const panelViewByScope = {
+    "terminal:open-terminal": { mode: "draft" },
+    "terminal:closed-terminal": { mode: "session", sessionId: "session-closed-terminal" },
+    "workspace:open-workspace": { mode: "draft" },
+    "workspace:closed-workspace": { mode: "session", sessionId: "session-closed-workspace" },
+  } satisfies Record<string, AIPanelView>;
+
+  const next = pruneInactiveScopedTransientState(
+    activeSessionIdMap,
+    draftsByScope,
+    panelViewByScope,
+    new Set(["open-terminal", "open-workspace"]),
+  );
+
+  assert.deepEqual(next.activeSessionIdMap, {
+    "terminal:open-terminal": "session-open",
+    "workspace:open-workspace": "session-open-workspace",
+  });
+  assert.deepEqual(next.draftsByScope, {
+    "terminal:open-terminal": draftsByScope["terminal:open-terminal"],
+    "workspace:open-workspace": draftsByScope["workspace:open-workspace"],
+  });
+  assert.deepEqual(next.panelViewByScope, {
+    "terminal:open-terminal": panelViewByScope["terminal:open-terminal"],
+    "workspace:open-workspace": panelViewByScope["workspace:open-workspace"],
+  });
+});
+
+test("pruneInactiveScopedSessions preserves restorable terminal ACP ids across reconnects", () => {
+  const sessions = [
+    createSession("terminal-restorable", {
+      type: "terminal",
+      targetId: "closed-restorable",
+      hostIds: ["host-1"],
+    }, "ext-1"),
+    createSession("terminal-local", {
+      type: "terminal",
+      targetId: "closed-local",
+      hostIds: ["local-shell"],
+    }, "ext-2"),
+    createSession("workspace-closed", {
+      type: "workspace",
+      targetId: "closed-workspace",
+    }, "ext-3"),
+    createSession("terminal-open", {
+      type: "terminal",
+      targetId: "open-terminal",
+      hostIds: ["host-2"],
+    }, "ext-4"),
+  ];
+
+  const next = pruneInactiveScopedSessions(
+    sessions,
+    new Set(["open-terminal"]),
+  );
+
+  assert.deepEqual(next.orphanedSessionIds, [
+    "terminal-restorable",
+    "terminal-local",
+    "workspace-closed",
+  ]);
+  assert.deepEqual(next.sessions, [
+    sessions[0],
+    sessions[3],
+  ]);
+});
+
+test("pruneInactiveScopedSessions preserves original sessions when orphaned restorable chats are already detached", () => {
+  const sessions = [
+    createSession("terminal-restorable", {
+      type: "terminal",
+      targetId: "closed-restorable",
+      hostIds: ["host-1"],
+    }),
+    createSession("terminal-open", {
+      type: "terminal",
+      targetId: "open-terminal",
+      hostIds: ["host-2"],
+    }, "ext-4"),
+  ];
+
+  const next = pruneInactiveScopedSessions(
+    sessions,
+    new Set(["open-terminal"]),
+  );
+
+  assert.deepEqual(next.orphanedSessionIds, ["terminal-restorable"]);
+  assert.equal(next.sessions, sessions);
+});
+
+test("pruneInactiveScopedSessions treats sessions displayed elsewhere as in-use, not orphaned", () => {
+  // terminal-restorable's original scope (terminal-closed-A) is gone, but
+  // the user resumed it into terminal-open-B from history. The session's
+  // externalSessionId must be preserved and it must not appear in the
+  // orphaned list, otherwise the active chat loses ACP continuity.
+  const resumedElsewhere = createSession("terminal-restorable", {
+    type: "terminal",
+    targetId: "terminal-closed-A",
+    hostIds: ["host-1"],
+  }, "ext-resumed");
+
+  const trulyOrphaned = createSession("terminal-stale", {
+    type: "terminal",
+    targetId: "terminal-closed-C",
+    hostIds: ["host-2"],
+  }, "ext-stale");
+
+  const sessions = [resumedElsewhere, trulyOrphaned];
+
+  const next = pruneInactiveScopedSessions(
+    sessions,
+    new Set(["terminal-open-B"]),
+    new Set(["terminal-restorable"]),
+  );
+
+  // Only the one not being displayed anywhere should show up as orphaned.
+  assert.deepEqual(next.orphanedSessionIds, ["terminal-stale"]);
+  // The resumed session must retain its externalSessionId.
+  const resumedNext = next.sessions.find((s) => s.id === "terminal-restorable");
+  assert.equal(resumedNext?.externalSessionId, "ext-resumed");
+});

application/state/aiScopeCleanup.ts

@@ -0,0 +1,145 @@
+import type {
+  AIDraft,
+  AIPanelView,
+  AISession,
+} from "../../infrastructure/ai/types";
+
+type DraftsByScope = Partial<Record<string, AIDraft>>;
+type PanelViewByScope = Partial<Record<string, AIPanelView>>;
+type ActiveSessionIdMap = Record<string, string | null>;
+
+function isInactiveScopedTarget(
+  scopeKey: string,
+  activeTargetIds: Set<string>,
+): boolean {
+  const separatorIndex = scopeKey.indexOf(":");
+  if (separatorIndex === -1) return false;
+
+  const scopeType = scopeKey.slice(0, separatorIndex);
+  if (scopeType !== "terminal" && scopeType !== "workspace") return false;
+
+  const targetId = scopeKey.slice(separatorIndex + 1);
+  if (!targetId) return false;
+
+  return !activeTargetIds.has(targetId);
+}
+
+export function pruneInactiveScopedState(
+  draftsByScope: DraftsByScope,
+  panelViewByScope: PanelViewByScope,
+  activeTargetIds: Set<string>,
+): {
+  draftsByScope: DraftsByScope;
+  panelViewByScope: PanelViewByScope;
+} {
+  const nextDraftsByScope = { ...draftsByScope };
+  const nextPanelViewByScope = { ...panelViewByScope };
+  let draftsChanged = false;
+  let panelViewsChanged = false;
+
+  for (const scopeKey of Object.keys(nextDraftsByScope)) {
+    if (!isInactiveScopedTarget(scopeKey, activeTargetIds)) continue;
+    delete nextDraftsByScope[scopeKey];
+    draftsChanged = true;
+  }
+
+  for (const scopeKey of Object.keys(nextPanelViewByScope)) {
+    if (!isInactiveScopedTarget(scopeKey, activeTargetIds)) continue;
+    delete nextPanelViewByScope[scopeKey];
+    panelViewsChanged = true;
+  }
+
+  return {
+    draftsByScope: draftsChanged ? nextDraftsByScope : draftsByScope,
+    panelViewByScope: panelViewsChanged ? nextPanelViewByScope : panelViewByScope,
+  };
+}
+
+export function pruneInactiveScopedTransientState(
+  activeSessionIdMap: ActiveSessionIdMap,
+  draftsByScope: DraftsByScope,
+  panelViewByScope: PanelViewByScope,
+  activeTargetIds: Set<string>,
+): {
+  activeSessionIdMap: ActiveSessionIdMap;
+  draftsByScope: DraftsByScope;
+  panelViewByScope: PanelViewByScope;
+} {
+  let activeSessionMapChanged = false;
+  const nextActiveSessionIdMap: ActiveSessionIdMap = {};
+
+  for (const [scopeKey, sessionId] of Object.entries(activeSessionIdMap)) {
+    if (isInactiveScopedTarget(scopeKey, activeTargetIds)) {
+      activeSessionMapChanged = true;
+      continue;
+    }
+
+    nextActiveSessionIdMap[scopeKey] = sessionId;
+  }
+
+  const nextScopedState = pruneInactiveScopedState(
+    draftsByScope,
+    panelViewByScope,
+    activeTargetIds,
+  );
+
+  return {
+    activeSessionIdMap: activeSessionMapChanged ? nextActiveSessionIdMap : activeSessionIdMap,
+    draftsByScope: nextScopedState.draftsByScope,
+    panelViewByScope: nextScopedState.panelViewByScope,
+  };
+}
+
+function isRestorableTerminalSession(session: AISession): boolean {
+  return session.scope.type === "terminal"
+    && !!session.scope.hostIds?.length
+    && session.scope.hostIds.some((id) => !id.startsWith("local-") && !id.startsWith("serial-"));
+}
+
+export function pruneInactiveScopedSessions(
+  sessions: AISession[],
+  activeTargetIds: Set<string>,
+  /**
+   * Session ids currently displayed by any live scope. A session whose
+   * `scope.targetId` is inactive but whose id is still in use somewhere
+   * (e.g. resumed from history into a different terminal) must not be
+   * treated as orphaned — deleting it outright would break the chat the
+   * user is actively continuing.
+   */
+  activeSessionIds: Set<string> = new Set(),
+): {
+  sessions: AISession[];
+  orphanedSessionIds: string[];
+} {
+  const orphanedSessionIds = sessions
+    .filter((session) => session.scope.targetId && !activeTargetIds.has(session.scope.targetId))
+    .filter((session) => !activeSessionIds.has(session.id))
+    .map((session) => session.id);
+
+  if (orphanedSessionIds.length === 0) {
+    return {
+      sessions,
+      orphanedSessionIds,
+    };
+  }
+
+  const orphanedSessionIdSet = new Set(orphanedSessionIds);
+  let sessionsChanged = false;
+
+  const nextSessions = sessions.flatMap((session) => {
+    if (!orphanedSessionIdSet.has(session.id)) {
+      return [session];
+    }
+
+    if (!isRestorableTerminalSession(session)) {
+      sessionsChanged = true;
+      return [];
+    }
+    return [session];
+  });
+
+  return {
+    sessions: sessionsChanged ? nextSessions : sessions,
+    orphanedSessionIds,
+  };
+}

application/state/customThemeStore.ts

@@ -75,7 +75,6 @@ class CustomThemeStore {
                 if (payload.key === STORAGE_KEY_CUSTOM_THEMES) {
                     // Another window changed custom themes — reload from localStorage
                     this.loadFromStorage();
-                    this.notify();
                 }
             });
         } catch {
@@ -129,6 +128,13 @@ class CustomThemeStore {
         this.notify();
         this.broadcastChange();
     };
+
+    replaceThemes = (themes: TerminalTheme[]) => {
+        this.themes = themes.map((theme) => ({ ...theme, colors: { ...theme.colors }, isCustom: true }));
+        this.saveToStorage();
+        this.notify();
+        this.broadcastChange();
+    };
 }
 
 // Singleton
@@ -172,5 +178,9 @@ export const useCustomThemeActions = () => {
         customThemeStore.deleteTheme(id);
     }, []);
 
-    return { addTheme, updateTheme, deleteTheme };
+    const replaceThemes = useCallback((themes: TerminalTheme[]) => {
+        customThemeStore.replaceThemes(themes);
+    }, []);
+
+    return { addTheme, updateTheme, deleteTheme, replaceThemes };
 };

application/state/fontStore.ts

@@ -68,8 +68,14 @@ class FontStore {
       // Add default fonts first
       TERMINAL_FONTS.forEach(font => fontMap.set(font.id, font));
 
-      // Add local fonts with a distinct ID namespace to avoid collisions
+      // Build a set of built-in font family names for dedup (case-insensitive)
+      const builtinFamilyNames = new Set(
+        TERMINAL_FONTS.map(f => f.name.toLowerCase())
+      );
+
+      // Add local fonts, skipping those already covered by built-in fonts
       localFonts.forEach(font => {
+        if (builtinFamilyNames.has(font.name.toLowerCase())) return;
         const localId = font.id.startsWith('local-') ? font.id : `local-${font.id}`;
         fontMap.set(localId, { ...font, id: localId });
       });

application/state/resolveCloseIntent.test.ts

@@ -0,0 +1,110 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import { resolveCloseIntent } from "./resolveCloseIntent.ts";
+
+const baseWorkspace = {
+  id: "w1",
+  focusedSessionId: "s1",
+};
+
+const baseSession = { id: "s1" };
+
+test("non-workspace tab → closeSingleTab with session id", () => {
+  const result = resolveCloseIntent({
+    activeTabId: "s1",
+    workspace: null,
+    sessionForTab: baseSession,
+    activeSidePanelTab: null,
+    focusIsInsideTerminal: true,
+  });
+  assert.deepEqual(result, { kind: "closeSingleTab", sessionId: "s1" });
+});
+
+test("non-workspace session tab + sidebar open → closeSidePanel (sidebar beats session close)", () => {
+  const r = resolveCloseIntent({
+    activeTabId: "s1",
+    workspace: null,
+    sessionForTab: { id: "s1" },
+    activeSidePanelTab: "ai",
+    focusIsInsideTerminal: true, // focus IS in terminal, but sidebar wins
+  });
+  assert.deepEqual(r, { kind: "closeSidePanel" });
+});
+
+test("vault/sftp tab → noop", () => {
+  const r = resolveCloseIntent({
+    activeTabId: "vault",
+    workspace: null,
+    sessionForTab: null,
+    activeSidePanelTab: null,
+    focusIsInsideTerminal: false,
+  });
+  assert.deepEqual(r, { kind: "noop" });
+});
+
+test("workspace + focus in terminal + sidebar open → closeSidePanel wins (sidebar beats focus)", () => {
+  const r = resolveCloseIntent({
+    activeTabId: "w1",
+    workspace: baseWorkspace,
+    sessionForTab: null,
+    activeSidePanelTab: "ai",
+    focusIsInsideTerminal: true,
+  });
+  assert.deepEqual(r, { kind: "closeSidePanel" });
+});
+
+test("workspace + focus NOT in terminal + sidebar open → closeSidePanel", () => {
+  const r = resolveCloseIntent({
+    activeTabId: "w1",
+    workspace: baseWorkspace,
+    sessionForTab: null,
+    activeSidePanelTab: "sftp",
+    focusIsInsideTerminal: false,
+  });
+  assert.deepEqual(r, { kind: "closeSidePanel" });
+});
+
+test("workspace + sidebar closed + focus in terminal → closeTerminal", () => {
+  const r = resolveCloseIntent({
+    activeTabId: "w1",
+    workspace: baseWorkspace,
+    sessionForTab: null,
+    activeSidePanelTab: null,
+    focusIsInsideTerminal: true,
+  });
+  assert.deepEqual(r, { kind: "closeTerminal", sessionId: "s1" });
+});
+
+test("workspace + sidebar closed + focus NOT in terminal → closeWorkspace", () => {
+  const r = resolveCloseIntent({
+    activeTabId: "w1",
+    workspace: baseWorkspace,
+    sessionForTab: null,
+    activeSidePanelTab: null,
+    focusIsInsideTerminal: false,
+  });
+  assert.deepEqual(r, { kind: "closeWorkspace", workspaceId: "w1" });
+});
+
+test("workspace with no focused session + sidebar closed → closeWorkspace", () => {
+  const r = resolveCloseIntent({
+    activeTabId: "w1",
+    workspace: { id: "w1", focusedSessionId: undefined },
+    sessionForTab: null,
+    activeSidePanelTab: null,
+    focusIsInsideTerminal: true, // even if flag true, no focused id → cannot closeTerminal
+  });
+  assert.deepEqual(r, { kind: "closeWorkspace", workspaceId: "w1" });
+});
+
+test("workspace with no focused session + sidebar open → closeSidePanel", () => {
+  const r = resolveCloseIntent({
+    activeTabId: "w1",
+    workspace: { id: "w1", focusedSessionId: undefined },
+    sessionForTab: null,
+    activeSidePanelTab: "ai",
+    focusIsInsideTerminal: false,
+  });
+  assert.deepEqual(r, { kind: "closeSidePanel" });
+});

application/state/resolveCloseIntent.ts

@@ -0,0 +1,43 @@
+export type CloseIntent =
+  | { kind: 'closeTerminal'; sessionId: string }
+  | { kind: 'closeSidePanel' }
+  | { kind: 'closeWorkspace'; workspaceId: string }
+  | { kind: 'closeSingleTab'; sessionId: string }
+  | { kind: 'noop' };
+
+export interface ResolveCloseInput {
+  activeTabId: string | null;
+  workspace: { id: string; focusedSessionId?: string } | null;
+  sessionForTab: { id: string } | null;
+  activeSidePanelTab: string | null;
+  focusIsInsideTerminal: boolean;
+}
+
+export function resolveCloseIntent(input: ResolveCloseInput): CloseIntent {
+  const { activeTabId, workspace, sessionForTab, activeSidePanelTab, focusIsInsideTerminal } = input;
+
+  if (!activeTabId) return { kind: 'noop' };
+
+  // Sidebar always wins — applies to any tab type (workspace, single-session, etc.).
+  // Modals take priority over this but are intercepted upstream in App.tsx before the
+  // hotkey reaches resolveCloseIntent.
+  if (activeSidePanelTab !== null) {
+    return { kind: 'closeSidePanel' };
+  }
+
+  if (sessionForTab && !workspace) {
+    return { kind: 'closeSingleTab', sessionId: sessionForTab.id };
+  }
+
+  if (!workspace) {
+    // e.g. 'vault', 'sftp', or any non-closable pinned tab
+    return { kind: 'noop' };
+  }
+
+  const focusedSessionId = workspace.focusedSessionId;
+  if (focusedSessionId && focusIsInsideTerminal) {
+    return { kind: 'closeTerminal', sessionId: focusedSessionId };
+  }
+
+  return { kind: 'closeWorkspace', workspaceId: workspace.id };
+}

application/state/sessionActivity.ts

@@ -0,0 +1,46 @@
+import { TerminalSession } from '../../types';
+
+type SessionActivityMap = Record<string, boolean>;
+
+export const getValidSessionActivityIds = (sessions: TerminalSession[]): Set<string> => {
+  return new Set(sessions.map((session) => session.id));
+};
+
+export const shouldMarkSessionActivity = (
+  activeTabId: string | null,
+  session: Pick<TerminalSession, 'id' | 'workspaceId'>,
+): boolean => {
+  return activeTabId !== session.id && activeTabId !== session.workspaceId;
+};
+
+export const getSessionActivityIdsToClear = (
+  activeTabId: string | null,
+  sessions: TerminalSession[],
+): string[] => {
+  if (!activeTabId || activeTabId === 'vault' || activeTabId === 'sftp') {
+    return [];
+  }
+
+  const activeSession = sessions.find((session) => session.id === activeTabId);
+  if (activeSession) {
+    return [activeSession.id];
+  }
+
+  return sessions
+    .filter((session) => session.workspaceId === activeTabId)
+    .map((session) => session.id);
+};
+
+export const buildWorkspaceActivityMap = (
+  sessions: TerminalSession[],
+  sessionActivityMap: SessionActivityMap,
+): Map<string, boolean> => {
+  const workspaceActivityMap = new Map<string, boolean>();
+
+  for (const session of sessions) {
+    if (!session.workspaceId || !sessionActivityMap[session.id]) continue;
+    workspaceActivityMap.set(session.workspaceId, true);
+  }
+
+  return workspaceActivityMap;
+};

application/state/sessionActivityStore.ts

@@ -0,0 +1,78 @@
+import { useSyncExternalStore } from 'react';
+
+type Listener = () => void;
+
+class SessionActivityStore {
+  private snapshot: Record<string, boolean> = {};
+  private listeners = new Set<Listener>();
+
+  getSnapshot = () => this.snapshot;
+
+  subscribe = (listener: Listener) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+
+  private emit() {
+    this.listeners.forEach((listener) => listener());
+  }
+
+  setTabActive = (tabId: string, hasActivity: boolean) => {
+    const alreadyActive = !!this.snapshot[tabId];
+    if (alreadyActive === hasActivity) return;
+
+    if (hasActivity) {
+      this.snapshot = { ...this.snapshot, [tabId]: true };
+    } else {
+      const { [tabId]: _removed, ...rest } = this.snapshot;
+      this.snapshot = rest;
+    }
+
+    this.emit();
+  };
+
+  clearTab = (tabId: string) => {
+    this.setTabActive(tabId, false);
+  };
+
+  clearTabs = (tabIds: Iterable<string>) => {
+    let changed = false;
+    const next = { ...this.snapshot };
+
+    for (const tabId of tabIds) {
+      if (!next[tabId]) continue;
+      delete next[tabId];
+      changed = true;
+    }
+
+    if (!changed) return;
+    this.snapshot = next;
+    this.emit();
+  };
+
+  prune = (validTabIds: Set<string>) => {
+    let changed = false;
+    const next: Record<string, boolean> = {};
+
+    for (const tabId of Object.keys(this.snapshot)) {
+      if (validTabIds.has(tabId)) {
+        next[tabId] = true;
+      } else {
+        changed = true;
+      }
+    }
+
+    if (!changed) return;
+    this.snapshot = next;
+    this.emit();
+  };
+}
+
+export const sessionActivityStore = new SessionActivityStore();
+
+export const useSessionActivityMap = () => {
+  return useSyncExternalStore(
+    sessionActivityStore.subscribe,
+    sessionActivityStore.getSnapshot,
+  );
+};

application/state/sftp/types.ts

@@ -12,6 +12,7 @@ export interface SftpPane {
   filter: string;
   filenameEncoding: SftpFilenameEncoding;
   showHiddenFiles: boolean;
+  transferMutationToken: number;
 }
 
 // Multi-tab state for left and right sides
@@ -39,6 +40,7 @@ export const createEmptyPane = (
   filter: "",
   filenameEncoding: "auto",
   showHiddenFiles,
+  transferMutationToken: 0,
 });
 
 // File watch event types

application/state/sftp/useSftpConnections.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import type { MutableRefObject } from "react";
 import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
 import type { Host, Identity, SftpConnection, SftpFileEntry, SftpFilenameEncoding, SSHKey } from "../../../domain/models";
@@ -88,6 +88,8 @@ export const useSftpConnections = ({
 
       if (!activeTabId) return;
 
+      const isReconnectAttempt = reconnectingRef.current[side];
+
       // Notify caller of the tab ID synchronously, before any async work.
       // This allows callers to map metadata (e.g. connection keys) to the tab
       // immediately, avoiding race conditions with deferred effects.
@@ -466,7 +468,11 @@ export const useSftpConnections = ({
                   error: err instanceof Error ? err.message : "Connection failed",
                 }
               : null,
-            error: err instanceof Error ? err.message : "Connection failed",
+            files: isReconnectAttempt ? [] : prev.files,
+            selectedFiles: isReconnectAttempt ? new Set<string>() : prev.selectedFiles,
+            error: isReconnectAttempt
+              ? "sftp.error.reconnectFailed"
+              : (err instanceof Error ? err.message : "Connection failed"),
             loading: false,
             reconnecting: false,
           }));
@@ -496,32 +502,39 @@ export const useSftpConnections = ({
       !initialConnectDoneRef.current &&
       leftTabs.tabs.length === 0
     ) {
-      initialConnectDoneRef.current = true;
-      setTimeout(() => {
+      const timer = window.setTimeout(() => {
+        initialConnectDoneRef.current = true;
         connect("left", "local");
       }, 0);
+      return () => window.clearTimeout(timer);
     }
   }, [autoConnectLocalOnMount, connect, leftTabs.tabs.length]);
 
   useEffect(() => {
-    const attemptReconnect = async (side: "left" | "right") => {
+    const reconnectTimers: number[] = [];
+
+    const scheduleReconnect = (side: "left" | "right") => {
       const lastHost = lastConnectedHostRef.current[side];
-      if (lastHost && reconnectingRef.current[side]) {
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-        if (reconnectingRef.current[side]) {
-          connect(side, lastHost);
-        }
-      }
+      if (!lastHost || !reconnectingRef.current[side]) return;
+
+      const timer = window.setTimeout(() => {
+        if (!reconnectingRef.current[side]) return;
+        void connect(side, lastHost);
+      }, 1000);
+      reconnectTimers.push(timer);
     };
 
     if (leftPane.reconnecting && reconnectingRef.current.left) {
-      attemptReconnect("left");
+      scheduleReconnect("left");
     }
     if (rightPane.reconnecting && reconnectingRef.current.right) {
-      attemptReconnect("right");
+      scheduleReconnect("right");
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [leftPane.reconnecting, rightPane.reconnecting, connect]);
+
+    return () => {
+      reconnectTimers.forEach((timer) => window.clearTimeout(timer));
+    };
+  }, [leftPane.reconnecting, rightPane.reconnecting, connect, lastConnectedHostRef, reconnectingRef]);
 
   const disconnect = useCallback(
     async (side: "left" | "right") => {

application/state/sftp/useSftpExternalOperations.ts

@@ -45,7 +45,8 @@ interface SftpExternalOperationsResult {
   activeFileWatchCountRef: React.MutableRefObject<number>;
   uploadExternalFiles: (
     side: "left" | "right",
-    dataTransfer: DataTransfer
+    dataTransfer: DataTransfer,
+    targetPath?: string
   ) => Promise<UploadResult[]>;
   uploadExternalEntries: (
     side: "left" | "right",
@@ -377,6 +378,7 @@ export const useSftpExternalOperations = (
             speed: 0,
             startTime: Date.now(),
             isDirectory: true,
+            progressMode: "bytes",
           };
           addExternalUpload(scanningTask);
         }
@@ -404,6 +406,8 @@ export const useSftpExternalOperations = (
             speed: 0,
             startTime: Date.now(),
             isDirectory: task.isDirectory,
+            progressMode: task.progressMode ?? "bytes",
+            parentTaskId: task.parentTaskId,
           };
           addExternalUpload(transferTask);
         }
@@ -505,7 +509,7 @@ export const useSftpExternalOperations = (
   }, []);
 
   const uploadExternalFiles = useCallback(
-    async (side: "left" | "right", dataTransfer: DataTransfer): Promise<UploadResult[]> => {
+    async (side: "left" | "right", dataTransfer: DataTransfer, targetPath?: string): Promise<UploadResult[]> => {
       const pane = getActivePane(side);
       if (!pane?.connection) {
         throw new Error("No active connection");
@@ -525,13 +529,14 @@ export const useSftpExternalOperations = (
       }
 
       const uploadPaneId = pane.id;
+      const uploadTargetPath = targetPath || pane.connection.currentPath;
       // Create a new upload controller for this upload
       const controller = new UploadController();
       uploadControllerRef.current = controller;
 
       const callbacks = createUploadCallbacks(
         pane.connection.id,
-        pane.connection.currentPath,
+        uploadTargetPath,
         pane.connection.isLocal ? undefined : pane.connection.hostId,
         pane.connection.isLocal ? undefined : connectionCacheKeyMapRef.current.get(pane.connection.id),
       );
@@ -540,7 +545,7 @@ export const useSftpExternalOperations = (
         const results = await uploadFromDataTransfer(
           dataTransfer,
           {
-            targetPath: pane.connection.currentPath,
+            targetPath: uploadTargetPath,
             sftpId,
             isLocal: pane.connection.isLocal,
             bridge: createUploadBridge,
@@ -551,7 +556,14 @@ export const useSftpExternalOperations = (
           controller
         );
 
-        await refresh(side, { tabId: uploadPaneId });
+        // Invalidate cache for the upload target so returning to that path
+        // triggers a fresh listing.
+        if (clearDirCacheEntry && targetPath) {
+          clearDirCacheEntry(pane.connection.id, uploadTargetPath);
+        }
+        if (uploadTargetPath === pane.connection.currentPath) {
+          await refresh(side, { tabId: uploadPaneId });
+        }
         return results;
       } catch (error) {
         logger.error("[SFTP] Upload failed:", error);
@@ -561,6 +573,7 @@ export const useSftpExternalOperations = (
       }
     },
     [
+      clearDirCacheEntry,
       connectionCacheKeyMapRef,
       getActivePane,
       refresh,
@@ -634,7 +647,9 @@ export const useSftpExternalOperations = (
         if (clearDirCacheEntry) {
           clearDirCacheEntry(pane.connection.id, uploadTargetPath);
         }
-        await refresh(side, { tabId: uploadPaneId });
+        if (uploadTargetPath === pane.connection.currentPath) {
+          await refresh(side, { tabId: uploadPaneId });
+        }
         return results;
       } catch (error) {
         logger.error("[SFTP] Upload failed:", error);

application/state/sftp/useSftpPaneActions.ts

@@ -1,11 +1,14 @@
-import { useCallback, useRef } from "react";
+import React, { useCallback, useRef } from "react";
 import type { Host, SftpFileEntry, SftpFilenameEncoding } from "../../../domain/models";
 import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
 import { logger } from "../../../lib/logger";
 import { SftpPane } from "./types";
-import { getParentPath, isNavigableDirectory, isWindowsRoot, joinPath } from "./utils";
+import { getFileName, getParentPath, isNavigableDirectory, isWindowsRoot, joinPath } from "./utils";
 import { buildCacheKey, setSharedRemoteHostCache } from "./sharedRemoteHostCache";
 
+/** Shared empty set for navigation resets — never mutate this. */
+const EMPTY_SET = new Set<string>();
+
 interface UseSftpPaneActionsParams {
   hosts: Host[];
   getActivePane: (side: "left" | "right") => SftpPane | null;
@@ -25,6 +28,7 @@ interface UseSftpPaneActionsParams {
   listRemoteFiles: (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => Promise<SftpFileEntry[]>;
   handleSessionError: (side: "left" | "right", error: Error) => void;
   isSessionError: (err: unknown) => boolean;
+  clearSelectionsExcept: (target: { side: "left" | "right"; tabId: string } | null) => void;
   dirCacheTtlMs: number;
 }
 
@@ -40,7 +44,9 @@ interface UseSftpPaneActionsResult {
   setFilter: (side: "left" | "right", filter: string) => void;
   getFilteredFiles: (pane: SftpPane) => SftpFileEntry[];
   createDirectory: (side: "left" | "right", name: string) => Promise<void>;
+  createDirectoryAtPath: (side: "left" | "right", path: string, name: string) => Promise<void>;
   createFile: (side: "left" | "right", name: string) => Promise<void>;
+  createFileAtPath: (side: "left" | "right", path: string, name: string) => Promise<void>;
   deleteFiles: (side: "left" | "right", fileNames: string[]) => Promise<void>;
   deleteFilesAtPath: (
     side: "left" | "right",
@@ -49,6 +55,8 @@ interface UseSftpPaneActionsResult {
     fileNames: string[],
   ) => Promise<void>;
   renameFile: (side: "left" | "right", oldName: string, newName: string) => Promise<void>;
+  renameFileAtPath: (side: "left" | "right", oldPath: string, newName: string) => Promise<void>;
+  moveEntriesToPath: (side: "left" | "right", sourcePaths: string[], targetPath: string) => Promise<void>;
   changePermissions: (side: "left" | "right", filePath: string, mode: string) => Promise<void>;
 }
 
@@ -71,8 +79,39 @@ export const useSftpPaneActions = ({
   listRemoteFiles,
   handleSessionError,
   isSessionError,
+  clearSelectionsExcept,
   dirCacheTtlMs,
 }: UseSftpPaneActionsParams): UseSftpPaneActionsResult => {
+  const normalizePathForCompare = useCallback((path: string): string => {
+    if (isWindowsRoot(path)) return path.replace(/\//g, "\\").toLowerCase();
+    if (/^[A-Za-z]:/.test(path)) {
+      return path.replace(/\//g, "\\").replace(/[\\]+$/, "").toLowerCase();
+    }
+    if (path === "/") return "/";
+    return path.replace(/\/+$/, "");
+  }, []);
+
+  const isSamePath = useCallback((a: string, b: string): boolean => {
+    return normalizePathForCompare(a) === normalizePathForCompare(b);
+  }, [normalizePathForCompare]);
+
+  const isDescendantPath = useCallback((candidate: string, parent: string): boolean => {
+    const normalizedCandidate = normalizePathForCompare(candidate);
+    const normalizedParent = normalizePathForCompare(parent);
+    if (normalizedCandidate === normalizedParent) return false;
+
+    if (/^[a-z]:\\$/.test(normalizedParent)) {
+      return normalizedCandidate.startsWith(normalizedParent);
+    }
+
+    if (normalizedParent === "/") {
+      return normalizedCandidate.startsWith("/");
+    }
+
+    const separator = normalizedParent.includes("\\") ? "\\" : "/";
+    return normalizedCandidate.startsWith(`${normalizedParent}${separator}`);
+  }, [normalizePathForCompare]);
+
   // Build the shared cache key for the active pane. Prefer the last connected
   // host (which includes session-time overrides), fall back to the vault hosts list.
   const hostsRef = useRef(hosts);
@@ -146,7 +185,7 @@ export const useSftpPaneActions = ({
           connectionId,
           path,
           files: cached.files,
-          selectedFiles: new Set(),
+          selectedFiles: EMPTY_SET,
         });
         updateTab(side, targetTabId, (prev) => ({
           ...prev,
@@ -156,7 +195,7 @@ export const useSftpPaneActions = ({
           files: cached.files,
           loading: false,
           error: null,
-          selectedFiles: new Set(),
+          selectedFiles: EMPTY_SET,
         }));
         if (!pane.connection.isLocal) {
           // Use hostId as the shared cache key — this is safe because the
@@ -200,7 +239,7 @@ export const useSftpPaneActions = ({
         connection: prev.connection
           ? { ...prev.connection, currentPath: path }
           : null,
-        selectedFiles: new Set(),
+        selectedFiles: EMPTY_SET,
         loading: true,
         error: null,
       }));
@@ -270,7 +309,7 @@ export const useSftpPaneActions = ({
           connectionId,
           path,
           files,
-          selectedFiles: new Set(),
+          selectedFiles: EMPTY_SET,
         });
 
         updateTab(side, targetTabId, (prev) => ({
@@ -280,7 +319,7 @@ export const useSftpPaneActions = ({
             : null,
           files,
           loading: false,
-          selectedFiles: new Set(),
+          selectedFiles: EMPTY_SET,
         }));
         if (!pane.connection.isLocal) {
           setSharedRemoteHostCache(getActivePaneCacheKey(side, pane.connection.hostId, pane.connection.id), {
@@ -340,6 +379,25 @@ export const useSftpPaneActions = ({
         ? sideTabs.tabs.find((t) => t.id === options.tabId) ?? null
         : getActivePane(side);
       if (pane?.connection) {
+        const hasRemoteSession = pane.connection.isLocal || sftpSessionsRef.current.has(pane.connection.id);
+        if (!hasRemoteSession) {
+          if (options?.tabId) return;
+          const lastHost = lastConnectedHostRef.current[side];
+          if (lastHost && !reconnectingRef.current[side]) {
+            reconnectingRef.current[side] = true;
+            updateActiveTab(side, (prev) => ({
+              ...prev,
+              reconnecting: true,
+              error: "sftp.reconnecting.title",
+            }));
+          } else if (!lastHost) {
+            updateActiveTab(side, (prev) => ({
+              ...prev,
+              error: "sftp.error.connectionLostManual",
+            }));
+          }
+          return;
+        }
         await navigateTo(side, pane.connection.currentPath, { force: true, tabId: options?.tabId });
       } else if (!pane?.connection && pane?.error) {
         // For background tabs, don't trigger reconnection (it operates on
@@ -362,7 +420,7 @@ export const useSftpPaneActions = ({
         }
       }
     },
-    [getActivePane, leftTabsRef, rightTabsRef, navigateTo, updateActiveTab, lastConnectedHostRef, reconnectingRef],
+    [getActivePane, leftTabsRef, rightTabsRef, navigateTo, updateActiveTab, lastConnectedHostRef, reconnectingRef, sftpSessionsRef],
   );
 
   const navigateUp = useCallback(
@@ -409,6 +467,10 @@ export const useSftpPaneActions = ({
 
   const toggleSelection = useCallback(
     (side: "left" | "right", fileName: string, multiSelect: boolean) => {
+      const activeTabId = (side === "left" ? leftTabsRef : rightTabsRef).current.activeTabId;
+      if (activeTabId) {
+        clearSelectionsExcept({ side, tabId: activeTabId });
+      }
       updateActiveTab(side, (prev) => {
         const newSelection = new Set(multiSelect ? prev.selectedFiles : []);
         if (newSelection.has(fileName)) {
@@ -419,11 +481,15 @@ export const useSftpPaneActions = ({
         return { ...prev, selectedFiles: newSelection };
       });
     },
-    [updateActiveTab],
+    [updateActiveTab, clearSelectionsExcept, leftTabsRef, rightTabsRef],
   );
 
   const rangeSelect = useCallback(
     (side: "left" | "right", fileNames: string[]) => {
+      const activeTabId = (side === "left" ? leftTabsRef : rightTabsRef).current.activeTabId;
+      if (activeTabId) {
+        clearSelectionsExcept({ side, tabId: activeTabId });
+      }
       const newSelection = new Set<string>();
       for (const name of fileNames) {
         if (name && name !== "..") {
@@ -433,11 +499,11 @@ export const useSftpPaneActions = ({
 
       updateActiveTab(side, (prev) => ({ ...prev, selectedFiles: newSelection }));
     },
-    [updateActiveTab],
+    [updateActiveTab, clearSelectionsExcept, leftTabsRef, rightTabsRef],
   );
 
   const clearSelection = useCallback((side: "left" | "right") => {
-    updateActiveTab(side, (prev) => ({ ...prev, selectedFiles: new Set() }));
+    updateActiveTab(side, (prev) => ({ ...prev, selectedFiles: EMPTY_SET }));
   }, [updateActiveTab]);
 
   const selectAll = useCallback(
@@ -467,12 +533,12 @@ export const useSftpPaneActions = ({
     );
   }, []);
 
-  const createDirectory = useCallback(
-    async (side: "left" | "right", name: string) => {
+  const createDirectoryAtPath = useCallback(
+    async (side: "left" | "right", path: string, name: string) => {
       const pane = getActivePane(side);
       if (!pane?.connection) return;
 
-      const fullPath = joinPath(pane.connection.currentPath, name);
+      const fullPath = joinPath(path, name);
 
       try {
         if (pane.connection.isLocal) {
@@ -485,7 +551,9 @@ export const useSftpPaneActions = ({
           }
           await netcattyBridge.get()?.mkdirSftp(sftpId, fullPath, pane.filenameEncoding);
         }
-        await refresh(side);
+        if (pane.connection.currentPath === path) {
+          await refresh(side);
+        }
       } catch (err) {
         if (isSessionError(err)) {
           handleSessionError(side, err as Error);
@@ -497,12 +565,21 @@ export const useSftpPaneActions = ({
     [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
   );
 
-  const createFile = useCallback(
+  const createDirectory = useCallback(
     async (side: "left" | "right", name: string) => {
       const pane = getActivePane(side);
       if (!pane?.connection) return;
+      await createDirectoryAtPath(side, pane.connection.currentPath, name);
+    },
+    [createDirectoryAtPath, getActivePane],
+  );
 
-      const fullPath = joinPath(pane.connection.currentPath, name);
+  const createFileAtPath = useCallback(
+    async (side: "left" | "right", path: string, name: string) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+
+      const fullPath = joinPath(path, name);
 
       try {
         if (pane.connection.isLocal) {
@@ -529,7 +606,9 @@ export const useSftpPaneActions = ({
             throw new Error("No write method available");
           }
         }
-        await refresh(side);
+        if (pane.connection.currentPath === path) {
+          await refresh(side);
+        }
       } catch (err) {
         if (isSessionError(err)) {
           handleSessionError(side, err as Error);
@@ -541,6 +620,15 @@ export const useSftpPaneActions = ({
     [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
   );
 
+  const createFile = useCallback(
+    async (side: "left" | "right", name: string) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+      await createFileAtPath(side, pane.connection.currentPath, name);
+    },
+    [createFileAtPath, getActivePane],
+  );
+
   const deleteFiles = useCallback(
     async (side: "left" | "right", fileNames: string[]) => {
       const pane = getActivePane(side);
@@ -686,6 +774,139 @@ export const useSftpPaneActions = ({
     [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
   );
 
+  // Rename using a full source path (for tree view where entryPath is already absolute).
+  // newName is still a basename; the new path is built as joinPath(parent, newName).
+  const renameFileAtPath = useCallback(
+    async (side: "left" | "right", oldPath: string, newName: string) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+
+      const parentPath = getParentPath(oldPath);
+      const newPath = joinPath(parentPath, newName);
+
+      try {
+        if (pane.connection.isLocal) {
+          await netcattyBridge.get()?.renameLocalFile?.(oldPath, newPath);
+        } else {
+          const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+          if (!sftpId) {
+            handleSessionError(side, new Error("SFTP session not found"));
+            return;
+          }
+          await netcattyBridge.get()?.renameSftp?.(sftpId, oldPath, newPath, pane.filenameEncoding);
+        }
+        if (pane.connection.currentPath === parentPath) {
+          await refresh(side);
+        }
+      } catch (err) {
+        if (isSessionError(err)) {
+          handleSessionError(side, err as Error);
+          return;
+        }
+        throw err;
+      }
+    },
+    [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
+  );
+
+  const moveEntriesToPath = useCallback(
+    async (side: "left" | "right", sourcePaths: string[], targetPath: string) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection || sourcePaths.length === 0) return;
+
+      const uniqueSources = Array.from(new Set(sourcePaths.filter(Boolean)));
+      const filteredSources = uniqueSources
+        .sort((a, b) => a.length - b.length)
+        .filter((path, index, arr) =>
+          !arr.slice(0, index).some((otherPath) => isSamePath(path, otherPath) || isDescendantPath(path, otherPath)),
+        );
+
+      const movableSources = filteredSources.filter((sourcePath) => {
+        if (isSamePath(sourcePath, targetPath)) return false;
+        if (isDescendantPath(targetPath, sourcePath)) return false;
+        const destinationPath = joinPath(targetPath, getFileName(sourcePath));
+        return !isSamePath(destinationPath, sourcePath);
+      });
+
+      if (movableSources.length === 0) return;
+
+      const sourceParentNames = new Map<string, string[]>();
+      for (const sourcePath of movableSources) {
+        const parentPath = getParentPath(sourcePath);
+        const names = sourceParentNames.get(parentPath) ?? [];
+        names.push(getFileName(sourcePath));
+        sourceParentNames.set(parentPath, names);
+      }
+
+      try {
+        if (pane.connection.isLocal) {
+          const renameLocalFile = netcattyBridge.get()?.renameLocalFile;
+          if (!renameLocalFile) {
+            throw new Error("Local rename unavailable");
+          }
+          for (const sourcePath of movableSources) {
+            const destinationPath = joinPath(targetPath, getFileName(sourcePath));
+            await renameLocalFile(sourcePath, destinationPath);
+          }
+        } else {
+          const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+          if (!sftpId) {
+            handleSessionError(side, new Error("SFTP session not found"));
+            return;
+          }
+          const renameSftp = netcattyBridge.get()?.renameSftp;
+          if (!renameSftp) {
+            throw new Error("SFTP rename unavailable");
+          }
+          for (const sourcePath of movableSources) {
+            const destinationPath = joinPath(targetPath, getFileName(sourcePath));
+            await renameSftp(sftpId, sourcePath, destinationPath, pane.filenameEncoding);
+          }
+        }
+        clearCacheForConnection(pane.connection.id);
+        const currentPath = pane.connection.currentPath;
+        const sourceParents = Array.from(sourceParentNames.keys());
+        const currentPathAffected =
+          sourceParents.some((path) => isSamePath(path, currentPath)) ||
+          isSamePath(targetPath, currentPath);
+
+        if (currentPathAffected) {
+          await refresh(side);
+        } else {
+          updateActiveTab(side, (prev) => {
+            if (!prev.connection || prev.connection.id !== pane.connection?.id) {
+              return prev;
+            }
+
+            const namesInCurrentPath = sourceParentNames.get(prev.connection.currentPath);
+            if (!namesInCurrentPath || namesInCurrentPath.length === 0) {
+              return prev;
+            }
+
+            const removeSet = new Set(namesInCurrentPath);
+            const nextSelection = new Set(prev.selectedFiles);
+            for (const name of removeSet) {
+              nextSelection.delete(name);
+            }
+
+            return {
+              ...prev,
+              files: prev.files.filter((file) => !removeSet.has(file.name)),
+              selectedFiles: nextSelection,
+            };
+          });
+        }
+      } catch (err) {
+        if (isSessionError(err)) {
+          handleSessionError(side, err as Error);
+          return;
+        }
+        throw err;
+      }
+    },
+    [clearCacheForConnection, getActivePane, handleSessionError, isDescendantPath, isSamePath, isSessionError, refresh, sftpSessionsRef, updateActiveTab],
+  );
+
   const changePermissions = useCallback(
     async (
       side: "left" | "right",
@@ -730,10 +951,14 @@ export const useSftpPaneActions = ({
     setFilter,
     getFilteredFiles,
     createDirectory,
+    createDirectoryAtPath,
     createFile,
+    createFileAtPath,
     deleteFiles,
     deleteFilesAtPath,
     renameFile,
+    renameFileAtPath,
+    moveEntriesToPath,
     changePermissions,
   };
 };

application/state/sftp/useSftpTabsState.ts

@@ -14,6 +14,7 @@ interface SftpTabsState {
   getActivePane: (side: "left" | "right") => SftpPane | null;
   updateTab: (side: "left" | "right", tabId: string, updater: (pane: SftpPane) => SftpPane) => void;
   updateActiveTab: (side: "left" | "right", updater: (pane: SftpPane) => SftpPane) => void;
+  clearSelectionsExcept: (target: { side: "left" | "right"; tabId: string } | null) => void;
   setTabShowHiddenFiles: (side: "left" | "right", tabId: string, showHiddenFiles: boolean) => void;
   addTab: (side: "left" | "right") => string;
   closeTab: (side: "left" | "right", tabId: string) => void;
@@ -34,6 +35,8 @@ interface SftpTabsState {
   getActiveTabId: (side: "left" | "right") => string | null;
 }
 
+const EMPTY_SELECTION = new Set<string>();
+
 export const useSftpTabsState = ({
   defaultShowHiddenFiles = false,
 }: {
@@ -95,6 +98,31 @@ export const useSftpTabsState = ({
     [updateTab],
   );
 
+  const clearSelectionsExcept = useCallback(
+    (target: { side: "left" | "right"; tabId: string } | null) => {
+      const clearSideSelections = (
+        prev: SftpSideTabs,
+        side: "left" | "right",
+      ): SftpSideTabs => {
+        let changed = false;
+        const tabs = prev.tabs.map((tab) => {
+          const shouldKeepSelection =
+            target?.side === side && target.tabId === tab.id;
+          if (shouldKeepSelection || tab.selectedFiles.size === 0) {
+            return tab;
+          }
+          changed = true;
+          return { ...tab, selectedFiles: EMPTY_SELECTION };
+        });
+        return changed ? { ...prev, tabs } : prev;
+      };
+
+      setLeftTabs((prev) => clearSideSelections(prev, "left"));
+      setRightTabs((prev) => clearSideSelections(prev, "right"));
+    },
+    [],
+  );
+
   const setTabShowHiddenFiles = useCallback(
     (side: "left" | "right", tabId: string, showHiddenFiles: boolean) => {
       updateTab(side, tabId, (prev) => {
@@ -258,6 +286,7 @@ export const useSftpTabsState = ({
     getActivePane,
     updateTab,
     updateActiveTab,
+    clearSelectionsExcept,
     setTabShowHiddenFiles,
     addTab,
     closeTab,

application/state/useAIState.ts

@@ -5,6 +5,7 @@ import {
   STORAGE_KEY_AI_ACTIVE_PROVIDER,
   STORAGE_KEY_AI_ACTIVE_MODEL,
   STORAGE_KEY_AI_PERMISSION_MODE,
+  STORAGE_KEY_AI_TOOL_INTEGRATION_MODE,
   STORAGE_KEY_AI_HOST_PERMISSIONS,
   STORAGE_KEY_AI_EXTERNAL_AGENTS,
   STORAGE_KEY_AI_DEFAULT_AGENT,
@@ -17,8 +18,11 @@ import {
   STORAGE_KEY_AI_WEB_SEARCH,
 } from '../../infrastructure/config/storageKeys';
 import type {
+  AIDraft,
+  AIPanelView,
   AISession,
   AIPermissionMode,
+  AIToolIntegrationMode,
   ProviderConfig,
   HostAIPermission,
   ExternalAgentConfig,
@@ -27,13 +31,42 @@ import type {
   WebSearchConfig,
 } from '../../infrastructure/ai/types';
 import { DEFAULT_COMMAND_BLOCKLIST } from '../../infrastructure/ai/types';
+import {
+  activateDraftView,
+  bumpDraftMutationVersionState,
+  bumpDraftUploadGenerationState,
+  clearScopeDraftState,
+  ensureDraftForScopeState,
+  getDraftUploadGenerationState,
+  setSessionView,
+  updateDraftForScope,
+} from './aiDraftState';
+import {
+  pruneInactiveScopedSessions,
+  pruneInactiveScopedTransientState,
+} from './aiScopeCleanup';
+import { convertFilesToUploads } from './useFileUpload';
 
 /** Typed accessor for the Electron IPC bridge exposed on `window.netcatty`. */
+interface AIBridge {
+  aiAcpCleanup?: (chatSessionId: string) => Promise<{ ok: boolean }>;
+  aiMcpSetPermissionMode?: (mode: AIPermissionMode) => Promise<unknown> | unknown;
+  aiMcpSetToolIntegrationMode?: (mode: AIToolIntegrationMode) => Promise<unknown> | unknown;
+  aiMcpSetCommandBlocklist?: (blocklist: string[]) => Promise<unknown> | unknown;
+  aiMcpSetCommandTimeout?: (timeout: number) => Promise<unknown> | unknown;
+  aiMcpSetMaxIterations?: (maxIterations: number) => Promise<unknown> | unknown;
+}
+
 function getAIBridge() {
-  return (window as unknown as { netcatty?: Record<string, (...args: unknown[]) => unknown> }).netcatty;
+  return (window as unknown as { netcatty?: AIBridge }).netcatty;
 }
 
 const AI_STATE_CHANGED_EVENT = 'netcatty:ai-state-changed';
+const AI_STATE_CHANGED_DRAFTS_BY_SCOPE = 'netcatty:ai-drafts-by-scope';
+const AI_STATE_CHANGED_PANEL_VIEW_BY_SCOPE = 'netcatty:ai-panel-view-by-scope';
+
+type DraftsByScope = Partial<Record<string, AIDraft>>;
+type PanelViewByScope = Partial<Record<string, AIPanelView>>;
 
 function emitAIStateChanged(key: string) {
   window.dispatchEvent(new CustomEvent<{ key: string }>(AI_STATE_CHANGED_EVENT, { detail: { key } }));
@@ -47,39 +80,62 @@ function cleanupAcpSessions(sessionIds: string[]) {
   }
 }
 
+function isScopeKeyActive(scopeKey: string, activeTargetIds: Set<string>) {
+  const separatorIndex = scopeKey.indexOf(':');
+  if (separatorIndex === -1) return true;
+
+  const targetId = scopeKey.slice(separatorIndex + 1);
+  if (!targetId) return true;
+
+  return activeTargetIds.has(targetId);
+}
+
 export function cleanupOrphanedAISessions(activeTargetIds: Set<string>) {
   const currentSessions = latestAISessionsSnapshot
     ?? localStorageAdapter.read<AISession[]>(STORAGE_KEY_AI_SESSIONS)
     ?? [];
-  const removedSessionIds = currentSessions
-    .filter((session) => session.scope.targetId && !activeTargetIds.has(session.scope.targetId))
-    .map((session) => session.id);
 
-  if (removedSessionIds.length === 0) return;
-
-  cleanupAcpSessions(removedSessionIds);
-
-  const removedSessionIdSet = new Set(removedSessionIds);
-
-  const nextSessions = currentSessions.filter((session) => {
-    if (!session.scope.targetId) return true;
-    return activeTargetIds.has(session.scope.targetId);
-  });
-  setLatestAISessionsSnapshot(nextSessions);
-  localStorageAdapter.write(STORAGE_KEY_AI_SESSIONS, pruneSessionsForStorage(nextSessions));
-  emitAIStateChanged(STORAGE_KEY_AI_SESSIONS);
-
-  const activeSessionIdMap = latestAIActiveSessionMapSnapshot
+  // Sessions shown by a still-live scope must be protected from cleanup
+  // even when their own `scope.targetId` points at a closed terminal —
+  // history can be resumed into a different terminal and we must not
+  // delete it outright while it's actively being used.
+  const preCleanupActiveSessionMap = latestAIActiveSessionMapSnapshot
     ?? localStorageAdapter.read<Record<string, string | null>>(STORAGE_KEY_AI_ACTIVE_SESSION_MAP)
     ?? {};
+  const activeSessionIds = new Set<string>();
+  for (const [scopeKey, sessionId] of Object.entries(preCleanupActiveSessionMap)) {
+    if (!sessionId) continue;
+    if (!isScopeKeyActive(scopeKey, activeTargetIds)) continue;
+    activeSessionIds.add(sessionId);
+  }
+
+  const nextSessionCleanup = pruneInactiveScopedSessions(
+    currentSessions,
+    activeTargetIds,
+    activeSessionIds,
+  );
+
+  if (nextSessionCleanup.orphanedSessionIds.length > 0) {
+    cleanupAcpSessions(nextSessionCleanup.orphanedSessionIds);
+  }
+
+  if (nextSessionCleanup.sessions !== currentSessions) {
+    setLatestAISessionsSnapshot(nextSessionCleanup.sessions);
+    localStorageAdapter.write(
+      STORAGE_KEY_AI_SESSIONS,
+      pruneSessionsForStorage(nextSessionCleanup.sessions),
+    );
+    emitAIStateChanged(STORAGE_KEY_AI_SESSIONS);
+  }
+
+  const activeSessionIdMap = preCleanupActiveSessionMap;
   let activeSessionMapChanged = false;
   const nextActiveSessionIdMap = { ...activeSessionIdMap };
 
-  for (const [scopeKey, sessionId] of Object.entries(activeSessionIdMap)) {
-    if (sessionId && removedSessionIdSet.has(sessionId)) {
-      nextActiveSessionIdMap[scopeKey] = null;
-      activeSessionMapChanged = true;
-    }
+  for (const scopeKey of Object.keys(activeSessionIdMap)) {
+    if (isScopeKeyActive(scopeKey, activeTargetIds)) continue;
+    delete nextActiveSessionIdMap[scopeKey];
+    activeSessionMapChanged = true;
   }
 
   if (activeSessionMapChanged) {
@@ -87,6 +143,46 @@ export function cleanupOrphanedAISessions(activeTargetIds: Set<string>) {
     localStorageAdapter.write(STORAGE_KEY_AI_ACTIVE_SESSION_MAP, nextActiveSessionIdMap);
     emitAIStateChanged(STORAGE_KEY_AI_ACTIVE_SESSION_MAP);
   }
+
+  const currentActiveSessionIdMap = activeSessionMapChanged
+    ? nextActiveSessionIdMap
+    : activeSessionIdMap;
+  const currentDraftsByScope = latestAIDraftsByScopeSnapshot ?? {};
+  const currentPanelViewByScope = latestAIPanelViewByScopeSnapshot ?? {};
+  const prunedScopedTransientState = pruneInactiveScopedTransientState(
+    currentActiveSessionIdMap,
+    currentDraftsByScope,
+    currentPanelViewByScope,
+    activeTargetIds,
+  );
+
+  if (prunedScopedTransientState.activeSessionIdMap !== currentActiveSessionIdMap) {
+    setLatestAIActiveSessionMapSnapshot(prunedScopedTransientState.activeSessionIdMap);
+    localStorageAdapter.write(
+      STORAGE_KEY_AI_ACTIVE_SESSION_MAP,
+      prunedScopedTransientState.activeSessionIdMap,
+    );
+    emitAIStateChanged(STORAGE_KEY_AI_ACTIVE_SESSION_MAP);
+  }
+
+  if (prunedScopedTransientState.draftsByScope !== currentDraftsByScope) {
+    for (const scopeKey of Object.keys(currentDraftsByScope)) {
+      if (scopeKey in prunedScopedTransientState.draftsByScope) continue;
+      bumpDraftMutationVersion(scopeKey);
+      bumpDraftUploadGeneration(scopeKey);
+    }
+    setLatestAIDraftsByScopeSnapshot(prunedScopedTransientState.draftsByScope);
+    emitAIStateChanged(AI_STATE_CHANGED_DRAFTS_BY_SCOPE);
+  }
+
+  if (prunedScopedTransientState.panelViewByScope !== currentPanelViewByScope) {
+    for (const scopeKey of Object.keys(currentPanelViewByScope)) {
+      if (scopeKey in prunedScopedTransientState.panelViewByScope) continue;
+      bumpDraftMutationVersion(scopeKey);
+    }
+    setLatestAIPanelViewByScopeSnapshot(prunedScopedTransientState.panelViewByScope);
+    emitAIStateChanged(AI_STATE_CHANGED_PANEL_VIEW_BY_SCOPE);
+  }
 }
 
 
@@ -117,6 +213,10 @@ function pruneSessionsForStorage(sessions: AISession[]): AISession[] {
 
 let latestAISessionsSnapshot: AISession[] | null = null;
 let latestAIActiveSessionMapSnapshot: Record<string, string | null> | null = null;
+let latestAIDraftsByScopeSnapshot: DraftsByScope | null = null;
+let latestAIPanelViewByScopeSnapshot: PanelViewByScope | null = null;
+let latestAIDraftMutationVersionByScopeSnapshot: Record<string, number> = {};
+let latestAIDraftUploadGenerationByScopeSnapshot: Record<string, number> = {};
 
 function setLatestAISessionsSnapshot(sessions: AISession[]) {
   latestAISessionsSnapshot = sessions;
@@ -126,6 +226,35 @@ function setLatestAIActiveSessionMapSnapshot(activeSessionIdMap: Record<string,
   latestAIActiveSessionMapSnapshot = activeSessionIdMap;
 }
 
+function setLatestAIDraftsByScopeSnapshot(draftsByScope: DraftsByScope) {
+  latestAIDraftsByScopeSnapshot = draftsByScope;
+}
+
+function setLatestAIPanelViewByScopeSnapshot(panelViewByScope: PanelViewByScope) {
+  latestAIPanelViewByScopeSnapshot = panelViewByScope;
+}
+
+function bumpDraftMutationVersion(scopeKey: string) {
+  latestAIDraftMutationVersionByScopeSnapshot = bumpDraftMutationVersionState(
+    latestAIDraftMutationVersionByScopeSnapshot,
+    scopeKey,
+  );
+}
+
+function getDraftUploadGeneration(scopeKey: string) {
+  return getDraftUploadGenerationState(
+    latestAIDraftUploadGenerationByScopeSnapshot,
+    scopeKey,
+  );
+}
+
+function bumpDraftUploadGeneration(scopeKey: string) {
+  latestAIDraftUploadGenerationByScopeSnapshot = bumpDraftUploadGenerationState(
+    latestAIDraftUploadGenerationByScopeSnapshot,
+    scopeKey,
+  );
+}
+
 export function useAIState() {
   // ── Provider Config ──
   const [providers, setProvidersRaw] = useState<ProviderConfig[]>(() =>
@@ -144,6 +273,10 @@ export function useAIState() {
     if (stored === 'observer' || stored === 'confirm' || stored === 'autonomous') return stored;
     return 'confirm';
   });
+  const [toolIntegrationMode, setToolIntegrationModeRaw] = useState<AIToolIntegrationMode>(() => {
+    const stored = localStorageAdapter.readString(STORAGE_KEY_AI_TOOL_INTEGRATION_MODE);
+    return stored === 'skills' ? 'skills' : 'mcp';
+  });
   const [hostPermissions, setHostPermissionsRaw] = useState<HostAIPermission[]>(() =>
     localStorageAdapter.read<HostAIPermission[]>(STORAGE_KEY_AI_HOST_PERMISSIONS) ?? []
   );
@@ -180,6 +313,14 @@ export function useAIState() {
   const [activeSessionIdMap, setActiveSessionIdMapRaw] = useState<Record<string, string | null>>(() =>
     localStorageAdapter.read<Record<string, string | null>>(STORAGE_KEY_AI_ACTIVE_SESSION_MAP) ?? {}
   );
+  // Per-scope draft/view state is intentionally memory-only so a relaunch
+  // does not restore stale composer input or panel intent against new history.
+  const [draftsByScope, setDraftsByScopeRaw] = useState<DraftsByScope>(() =>
+    latestAIDraftsByScopeSnapshot ?? {}
+  );
+  const [panelViewByScope, setPanelViewByScopeRaw] = useState<PanelViewByScope>(() =>
+    latestAIPanelViewByScopeSnapshot ?? {}
+  );
 
   // Per-agent model selection: remembers last selected model per agent
   const [agentModelMap, setAgentModelMapRaw] = useState<Record<string, string>>(() =>
@@ -199,12 +340,20 @@ export function useAIState() {
     setLatestAIActiveSessionMapSnapshot(activeSessionIdMap);
   }, [activeSessionIdMap]);
 
+  useEffect(() => {
+    setLatestAIDraftsByScopeSnapshot(draftsByScope);
+  }, [draftsByScope]);
+
+  useEffect(() => {
+    setLatestAIPanelViewByScopeSnapshot(panelViewByScope);
+  }, [panelViewByScope]);
+
   useEffect(() => {
     const validSessionIds = new Set(sessions.map((session) => session.id));
     let changed = false;
     const nextActiveSessionIdMap: Record<string, string | null> = {};
 
-    for (const [scopeKey, sessionId] of Object.entries(activeSessionIdMap)) {
+    for (const [scopeKey, sessionId] of Object.entries(activeSessionIdMap) as Array<[string, string | null]>) {
       const nextSessionId = sessionId && validSessionIds.has(sessionId) ? sessionId : null;
       nextActiveSessionIdMap[scopeKey] = nextSessionId;
       if (nextSessionId !== sessionId) {
@@ -221,13 +370,39 @@ export function useAIState() {
   }, [sessions, activeSessionIdMap]);
 
   const setActiveSessionId = useCallback((scopeKey: string, id: string | null) => {
+    let nextActiveSessionIdMap: Record<string, string | null> | null = null;
+
     setActiveSessionIdMapRaw(prev => {
+      if (prev[scopeKey] === id) {
+        return prev;
+      }
+
       const next = { ...prev, [scopeKey]: id };
-      setLatestAIActiveSessionMapSnapshot(next);
-      localStorageAdapter.write(STORAGE_KEY_AI_ACTIVE_SESSION_MAP, next);
-      emitAIStateChanged(STORAGE_KEY_AI_ACTIVE_SESSION_MAP);
+      nextActiveSessionIdMap = next;
       return next;
     });
+
+    if (!nextActiveSessionIdMap) return;
+
+    setLatestAIActiveSessionMapSnapshot(nextActiveSessionIdMap);
+    localStorageAdapter.write(STORAGE_KEY_AI_ACTIVE_SESSION_MAP, nextActiveSessionIdMap);
+    emitAIStateChanged(STORAGE_KEY_AI_ACTIVE_SESSION_MAP);
+  }, []);
+
+  const setPanelViewByScope = useCallback((value: PanelViewByScope | ((prev: PanelViewByScope) => PanelViewByScope)) => {
+    let nextPanelViewByScope: PanelViewByScope | null = null;
+
+    setPanelViewByScopeRaw((prev) => {
+      const next = typeof value === 'function' ? value(prev) : value;
+      if (next === prev) return prev;
+      nextPanelViewByScope = next;
+      return next;
+    });
+
+    if (!nextPanelViewByScope) return;
+
+    setLatestAIPanelViewByScopeSnapshot(nextPanelViewByScope);
+    emitAIStateChanged(AI_STATE_CHANGED_PANEL_VIEW_BY_SCOPE);
   }, []);
 
   const setAgentModel = useCallback((agentId: string, modelId: string) => {
@@ -282,6 +457,13 @@ export function useAIState() {
     });
   }, []);
 
+  const setToolIntegrationMode = useCallback((mode: AIToolIntegrationMode) => {
+    setToolIntegrationModeRaw(mode);
+    localStorageAdapter.writeString(STORAGE_KEY_AI_TOOL_INTEGRATION_MODE, mode);
+    const bridge = getAIBridge();
+    bridge?.aiMcpSetToolIntegrationMode?.(mode);
+  }, []);
+
   const setExternalAgents = useCallback((value: ExternalAgentConfig[] | ((prev: ExternalAgentConfig[]) => ExternalAgentConfig[])) => {
     setExternalAgentsRaw(prev => {
       const next = typeof value === 'function' ? value(prev) : value;
@@ -348,6 +530,15 @@ export function useAIState() {
             }
             break;
           }
+          case STORAGE_KEY_AI_TOOL_INTEGRATION_MODE:
+            {
+              const mode = localStorageAdapter.readString(STORAGE_KEY_AI_TOOL_INTEGRATION_MODE) === 'skills'
+                ? 'skills'
+                : 'mcp';
+              setToolIntegrationModeRaw(mode);
+              getAIBridge()?.aiMcpSetToolIntegrationMode?.(mode);
+            }
+            break;
           case STORAGE_KEY_AI_EXTERNAL_AGENTS: {
             const agents = localStorageAdapter.read<ExternalAgentConfig[]>(STORAGE_KEY_AI_EXTERNAL_AGENTS);
             if (agents != null && !Array.isArray(agents)) {
@@ -443,6 +634,12 @@ export function useAIState() {
               ?? {},
           );
           return;
+        case AI_STATE_CHANGED_DRAFTS_BY_SCOPE:
+          setDraftsByScopeRaw(latestAIDraftsByScopeSnapshot ?? {});
+          return;
+        case AI_STATE_CHANGED_PANEL_VIEW_BY_SCOPE:
+          setPanelViewByScopeRaw(latestAIPanelViewByScopeSnapshot ?? {});
+          return;
         default:
           handleStorage({ key } as StorageEvent);
       }
@@ -463,8 +660,17 @@ export function useAIState() {
     bridge?.aiMcpSetCommandTimeout?.(initialTimeout);
     const initialMaxIter = localStorageAdapter.readNumber(STORAGE_KEY_AI_MAX_ITERATIONS) ?? 20;
     bridge?.aiMcpSetMaxIterations?.(initialMaxIter);
-    const initialPermMode = localStorageAdapter.readString(STORAGE_KEY_AI_PERMISSION_MODE) ?? 'confirm';
+    const storedPermMode = localStorageAdapter.readString(STORAGE_KEY_AI_PERMISSION_MODE);
+    const initialPermMode: AIPermissionMode =
+      storedPermMode === 'observer' || storedPermMode === 'confirm' || storedPermMode === 'autonomous'
+        ? storedPermMode
+        : 'confirm';
     bridge?.aiMcpSetPermissionMode?.(initialPermMode);
+    const initialToolMode: AIToolIntegrationMode =
+      localStorageAdapter.readString(STORAGE_KEY_AI_TOOL_INTEGRATION_MODE) === 'skills'
+        ? 'skills'
+        : 'mcp';
+    bridge?.aiMcpSetToolIntegrationMode?.(initialToolMode);
   }, []);
 
   // ── Session CRUD ──
@@ -665,14 +871,193 @@ export function useAIState() {
     });
   }, [persistSessions]);
 
+  const ensureDraftForScope = useCallback((scopeKey: string, agentId: string): void => {
+    let nextDraftsByScope: DraftsByScope | null = null;
+
+    setDraftsByScopeRaw((prev) => {
+      const next = ensureDraftForScopeState(prev, scopeKey, agentId);
+      if (next === prev) return prev;
+      nextDraftsByScope = next;
+      return next;
+    });
+
+    if (!nextDraftsByScope) return;
+
+    bumpDraftMutationVersion(scopeKey);
+    setLatestAIDraftsByScopeSnapshot(nextDraftsByScope);
+    emitAIStateChanged(AI_STATE_CHANGED_DRAFTS_BY_SCOPE);
+  }, []);
+
+  const updateDraft = useCallback((
+    scopeKey: string,
+    fallbackAgentId: string,
+    updater: (draft: AIDraft) => AIDraft,
+  ): void => {
+    setDraftsByScopeRaw((prev) => {
+      const next = updateDraftForScope(
+        prev,
+        scopeKey,
+        fallbackAgentId,
+        (draft) => {
+          return {
+            ...updater(draft),
+            updatedAt: Date.now(),
+          };
+        },
+      );
+      setLatestAIDraftsByScopeSnapshot(next);
+      emitAIStateChanged(AI_STATE_CHANGED_DRAFTS_BY_SCOPE);
+      return next;
+    });
+    bumpDraftMutationVersion(scopeKey);
+  }, []);
+
+  const updateDraftIfPresent = useCallback((
+    scopeKey: string,
+    updater: (draft: AIDraft) => AIDraft,
+  ): void => {
+    let updated = false;
+
+    setDraftsByScopeRaw((prev) => {
+      const currentDraft = prev[scopeKey];
+      if (!currentDraft) return prev;
+
+      const nextDraft = {
+        ...updater(currentDraft),
+        updatedAt: Date.now(),
+      };
+      const next = {
+        ...prev,
+        [scopeKey]: nextDraft,
+      };
+      updated = true;
+      setLatestAIDraftsByScopeSnapshot(next);
+      emitAIStateChanged(AI_STATE_CHANGED_DRAFTS_BY_SCOPE);
+      return next;
+    });
+
+    if (updated) {
+      bumpDraftMutationVersion(scopeKey);
+    }
+  }, []);
+
+  const showDraftView = useCallback((scopeKey: string) => {
+    const currentPanelViewByScope = panelViewByScope;
+    let nextActiveSessionIdMap: Record<string, string | null> | null = null;
+    let nextPanelViewByScope: PanelViewByScope | null = null;
+    let activeSessionMapChanged = false;
+    let panelViewChanged = false;
+
+    setActiveSessionIdMapRaw((prevActiveSessionIdMap) => {
+      const next = activateDraftView(
+        prevActiveSessionIdMap,
+        currentPanelViewByScope,
+        scopeKey,
+      );
+      activeSessionMapChanged = next.activeSessionIdMap !== prevActiveSessionIdMap;
+      panelViewChanged = next.panelViewByScope !== currentPanelViewByScope;
+      nextActiveSessionIdMap = next.activeSessionIdMap;
+      nextPanelViewByScope = next.panelViewByScope;
+      return activeSessionMapChanged ? next.activeSessionIdMap : prevActiveSessionIdMap;
+    });
+
+    if (activeSessionMapChanged && nextActiveSessionIdMap) {
+      setLatestAIActiveSessionMapSnapshot(nextActiveSessionIdMap);
+      localStorageAdapter.write(STORAGE_KEY_AI_ACTIVE_SESSION_MAP, nextActiveSessionIdMap);
+      emitAIStateChanged(STORAGE_KEY_AI_ACTIVE_SESSION_MAP);
+    }
+
+    if (panelViewChanged && nextPanelViewByScope) {
+      setLatestAIPanelViewByScopeSnapshot(nextPanelViewByScope);
+      setPanelViewByScopeRaw(nextPanelViewByScope);
+      emitAIStateChanged(AI_STATE_CHANGED_PANEL_VIEW_BY_SCOPE);
+    }
+  }, [panelViewByScope]);
+
+  const showSessionView = useCallback((scopeKey: string, sessionId: string) => {
+    setPanelViewByScope((prev) => setSessionView(prev, scopeKey, sessionId));
+  }, [setPanelViewByScope]);
+
+  const clearDraftForScope = useCallback((scopeKey: string) => {
+    const currentPanelViewByScope = panelViewByScope;
+    let nextDraftsByScope: DraftsByScope | null = null;
+    let nextPanelViewByScope: PanelViewByScope | null = null;
+    let draftsChanged = false;
+    let panelViewChanged = false;
+
+    setDraftsByScopeRaw((prevDraftsByScope) => {
+      const next = clearScopeDraftState(
+        prevDraftsByScope,
+        currentPanelViewByScope,
+        scopeKey,
+      );
+      draftsChanged = next.draftsByScope !== prevDraftsByScope;
+      panelViewChanged = next.panelViewByScope !== currentPanelViewByScope;
+      nextDraftsByScope = next.draftsByScope;
+      nextPanelViewByScope = next.panelViewByScope;
+      return draftsChanged ? next.draftsByScope : prevDraftsByScope;
+    });
+
+    if (!draftsChanged && !panelViewChanged) return;
+
+    bumpDraftMutationVersion(scopeKey);
+    bumpDraftUploadGeneration(scopeKey);
+
+    if (draftsChanged && nextDraftsByScope) {
+      setLatestAIDraftsByScopeSnapshot(nextDraftsByScope);
+      emitAIStateChanged(AI_STATE_CHANGED_DRAFTS_BY_SCOPE);
+    }
+
+    if (panelViewChanged && nextPanelViewByScope) {
+      setLatestAIPanelViewByScopeSnapshot(nextPanelViewByScope);
+      setPanelViewByScopeRaw(nextPanelViewByScope);
+      emitAIStateChanged(AI_STATE_CHANGED_PANEL_VIEW_BY_SCOPE);
+    }
+  }, [panelViewByScope]);
+
+  const addDraftFiles = useCallback(async (
+    scopeKey: string,
+    fallbackAgentId: string,
+    inputFiles: File[],
+  ) => {
+    ensureDraftForScope(scopeKey, fallbackAgentId);
+    const initialUploadGeneration = getDraftUploadGeneration(scopeKey);
+    const uploads = await convertFilesToUploads(inputFiles);
+    if (uploads.length === 0) return;
+
+    if (getDraftUploadGeneration(scopeKey) !== initialUploadGeneration) {
+      return;
+    }
+
+    updateDraftIfPresent(scopeKey, (draft) => ({
+      ...draft,
+      attachments: [...draft.attachments, ...uploads],
+    }));
+  }, [ensureDraftForScope, updateDraftIfPresent]);
+
+  const removeDraftFile = useCallback((scopeKey: string, fallbackAgentId: string, fileId: string) => {
+    updateDraft(scopeKey, fallbackAgentId, (draft) => ({
+      ...draft,
+      attachments: draft.attachments.filter((file) => file.id !== fileId),
+    }));
+  }, [updateDraft]);
+
   const cleanupOrphanedSessions = useCallback((activeTargetIds: Set<string>) => {
     cleanupOrphanedAISessions(activeTargetIds);
-    setSessionsRaw(latestAISessionsSnapshot ?? localStorageAdapter.read<AISession[]>(STORAGE_KEY_AI_SESSIONS) ?? []);
+
+    const nextSessions =
+      latestAISessionsSnapshot
+      ?? localStorageAdapter.read<AISession[]>(STORAGE_KEY_AI_SESSIONS)
+      ?? [];
+    sessionsRef.current = nextSessions;
+    setSessionsRaw(nextSessions);
     setActiveSessionIdMapRaw(
       latestAIActiveSessionMapSnapshot
         ?? localStorageAdapter.read<Record<string, string | null>>(STORAGE_KEY_AI_ACTIVE_SESSION_MAP)
         ?? {},
     );
+    setDraftsByScopeRaw(latestAIDraftsByScopeSnapshot ?? {});
+    setPanelViewByScopeRaw(latestAIPanelViewByScopeSnapshot ?? {});
   }, []);
 
   // ── Provider CRUD helpers ──
@@ -716,6 +1101,8 @@ export function useAIState() {
     // Permission model
     globalPermissionMode,
     setGlobalPermissionMode,
+    toolIntegrationMode,
+    setToolIntegrationMode,
     hostPermissions,
     setHostPermissions,
 
@@ -744,7 +1131,16 @@ export function useAIState() {
     // Sessions (per-scope active session)
     sessions,
     activeSessionIdMap,
+    draftsByScope,
+    panelViewByScope,
     setActiveSessionId,
+    ensureDraftForScope,
+    updateDraft,
+    showDraftView,
+    showSessionView,
+    clearDraftForScope,
+    addDraftFiles,
+    removeDraftFile,
     createSession,
     deleteSession,
     deleteSessionsByTarget,

application/state/useApplicationBackend.ts

@@ -15,15 +15,15 @@ export type SshAgentStatus = {
 
 export const useApplicationBackend = () => {
   const openExternal = useCallback(async (url: string) => {
-    try {
-      const bridge = netcattyBridge.get();
-      if (bridge?.openExternal) {
-        await bridge.openExternal(url);
-        return;
-      }
-    } catch {
-      // Ignore and fall back below
+    const bridge = netcattyBridge.get();
+    if (bridge?.openExternal) {
+      // Bridge resolves on success (either via system browser or in-app
+      // fallback window) and rejects only when both paths fail. Let the
+      // rejection propagate so callers can present a user-facing message.
+      await bridge.openExternal(url);
+      return;
     }
+    // Fallback for non-Electron environments (tests, dev server, etc.).
     window.open(url, "_blank", "noopener,noreferrer");
   }, []);
 

application/state/useAutoSync.ts

@@ -7,7 +7,7 @@
  * - Debounced sync to avoid too frequent API calls
  */
 
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCloudSync } from './useCloudSync';
 import { useI18n } from '../i18n/I18nProvider';
 import { getCloudSyncManager } from '../../infrastructure/services/CloudSyncManager';
@@ -16,11 +16,15 @@ import {
   findSyncPayloadEncryptedCredentialPaths,
 } from '../../domain/credentials';
 import { isProviderReadyForSync, type CloudProvider, type SyncPayload } from '../../domain/sync';
-import { collectSyncableSettings } from '../../domain/syncPayload';
-import { STORAGE_KEY_PORT_FORWARDING } from '../../infrastructure/config/storageKeys';
+import { collectSyncableSettings, hasMeaningfulSyncData } from '../syncPayload';
+import { readInterruptedVaultApply } from '../localVaultBackups';
+import {
+  STORAGE_KEY_PORT_FORWARDING,
+  STORAGE_KEY_VAULT_RESTORE_IN_PROGRESS_UNTIL,
+} from '../../infrastructure/config/storageKeys';
 import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
 import { getEffectiveKnownHosts } from '../../infrastructure/syncHelpers';
-import { toast } from '../../components/ui/toast';
+import { notify } from '../notification';
 
 interface AutoSyncConfig {
   // Data to sync
@@ -32,17 +36,52 @@ interface AutoSyncConfig {
   snippetPackages?: SyncPayload['snippetPackages'];
   portForwardingRules?: SyncPayload['portForwardingRules'];
   knownHosts?: SyncPayload['knownHosts'];
+  groupConfigs?: SyncPayload['groupConfigs'];
   /** Opaque token that changes whenever a synced setting changes. */
   settingsVersion?: number;
+  startupReady?: boolean;
 
   // Callbacks
-  onApplyPayload: (payload: SyncPayload) => void;
+  onApplyPayload: (payload: SyncPayload) => void | Promise<void>;
 }
 
 // Get manager singleton for direct state access
 const manager = getCloudSyncManager();
 const AUTO_SYNC_PROVIDER_ORDER: CloudProvider[] = ['github', 'google', 'onedrive', 'webdav', 's3'];
 
+// Cross-window restore barrier: stored as an epoch-ms deadline. Any value
+// in the future means a restore is applying in some window and auto-sync
+// must not push concurrently. The writer (`withRestoreBarrier`) heartbeats
+// the deadline to keep it alive; a crashed window naturally expires within
+// ~RESTORE_BARRIER_HOLD_MS. We still defend against two degenerate cases:
+// (1) a stale deadline sitting in the past — harmless but pollutes debug
+//     state, so we opportunistically clear it; (2) a deadline absurdly far
+//     in the future (clock skew between windows, pathological holdMs, or a
+//     tampered value) — would otherwise lock auto-sync indefinitely, so we
+//     clear it and treat the barrier as inactive.
+const RESTORE_BARRIER_SANITY_MAX_MS = 10 * 60 * 1000; // 10 minutes
+const isRestoreInProgress = (): boolean => {
+  const raw = localStorageAdapter.readNumber(STORAGE_KEY_VAULT_RESTORE_IN_PROGRESS_UNTIL);
+  if (typeof raw !== 'number' || raw <= 0) return false;
+  const now = Date.now();
+  if (raw <= now) {
+    // Deadline is in the past — either a clean finish that failed to
+    // overwrite the key, or a crashed heartbeat. Clear so subsequent
+    // reads are cheap and the key doesn't linger forever.
+    localStorageAdapter.writeNumber(STORAGE_KEY_VAULT_RESTORE_IN_PROGRESS_UNTIL, 0);
+    return false;
+  }
+  if (raw - now > RESTORE_BARRIER_SANITY_MAX_MS) {
+    console.warn(
+      '[useAutoSync] Restore barrier deadline is absurdly far in the future; treating as corrupt and clearing.',
+      { deadline: raw, now },
+    );
+    localStorageAdapter.writeNumber(STORAGE_KEY_VAULT_RESTORE_IN_PROGRESS_UNTIL, 0);
+    return false;
+  }
+  return true;
+};
+
 type SyncTrigger = 'auto' | 'manual';
 
 interface SyncNowOptions {
@@ -56,10 +95,35 @@ export const useAutoSync = (config: AutoSyncConfig) => {
   const syncTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const lastSyncedDataRef = useRef<string>('');
   const hasCheckedRemoteRef = useRef(false);
+  /** True once checkRemoteVersion has completed (success or failure). Until
+   *  this is set, the debounced auto-sync effect will not fire, preventing
+   *  an empty local vault from racing ahead and overwriting a non-empty
+   *  cloud vault before the startup pull has run. See #679. */
+  const remoteCheckDoneRef = useRef(false);
   const isInitializedRef = useRef(false);
   const isSyncRunningRef = useRef(false);
   const skipNextSyncRef = useRef(false);
 
+  // State for the empty-vault-vs-cloud confirmation dialog (Fix D).
+  // When checkRemoteVersion detects that the local vault is empty but
+  // the cloud has data, it pauses and exposes this state so the root
+  // component can render a confirmation dialog.
+  const [emptyVaultConflict, setEmptyVaultConflict] = useState<{
+    remotePayload: SyncPayload;
+    hostCount: number;
+    keyCount: number;
+    snippetCount: number;
+  } | null>(null);
+  const emptyVaultResolveRef = useRef<((action: 'restore' | 'keep-empty') => void) | null>(null);
+
+  // Listen for SFTP bookmark changes to trigger auto-sync
+  const [bookmarksVersion, setBookmarksVersion] = useState(0);
+  useEffect(() => {
+    const handler = () => setBookmarksVersion((v) => v + 1);
+    window.addEventListener('sftp-bookmarks-changed', handler);
+    return () => window.removeEventListener('sftp-bookmarks-changed', handler);
+  }, []);
+
   const getSyncSnapshot = useCallback(() => {
     let effectivePFRules = config.portForwardingRules;
     if (!effectivePFRules || effectivePFRules.length === 0) {
@@ -87,6 +151,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
       snippetPackages: config.snippetPackages,
       portForwardingRules: effectivePFRules,
       knownHosts: effectiveKnownHosts,
+      groupConfigs: config.groupConfigs,
     };
   }, [
     config.hosts,
@@ -97,6 +162,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
     config.snippetPackages,
     config.portForwardingRules,
     config.knownHosts,
+    config.groupConfigs,
   ]);
 
   // Build sync payload
@@ -136,6 +202,50 @@ export const useAutoSync = (config: AutoSyncConfig) => {
         throw new Error(t('sync.autoSync.alreadySyncing'));
       }
 
+      // Cross-window guard: another window may be in the middle of
+      // applying a local vault restore. If we push right now we'd upload
+      // the pre-restore snapshot (the main window's React state hasn't
+      // observed the localStorage writes yet), clobbering the just-
+      // restored cloud copy. Skip silently on auto triggers and fail
+      // loudly on manual ones so the user understands why their click
+      // did nothing.
+      //
+      // Pairs with `withRestoreBarrier` in application/localVaultBackups.ts
+      // (the writer) and with the matching early-return in the
+      // debounced-sync effect below (the other reader, which prevents
+      // scheduling a push while the barrier is held).
+      if (isRestoreInProgress()) {
+        if (trigger === 'auto') {
+          console.info('[AutoSync] Skipping: a vault restore is in progress in another window.');
+          return;
+        }
+        throw new Error(t('sync.autoSync.restoreInProgress'));
+      }
+
+      // Refuse to auto-push when a previous apply crashed mid-way and
+      // left the vault in a partial state. `applyProtectedSyncPayload`
+      // sets a sentinel before its non-atomic localStorage writes and
+      // clears it on successful completion; the sentinel's presence
+      // here means the renderer crashed between a first write and the
+      // clean-up, so the in-memory payload is a mix of pre-apply and
+      // post-apply entries. Pushing that would silently overwrite an
+      // intact cloud copy with corrupted data.
+      //
+      // Manual triggers surface a user-visible error that points the
+      // user at the Restore UI; auto triggers return quietly (the
+      // next startup toast below flags the state).
+      const interruptedApply = readInterruptedVaultApply();
+      if (interruptedApply) {
+        if (trigger === 'auto') {
+          console.warn(
+            '[AutoSync] Skipping: previous apply was interrupted — refusing to push partial state.',
+            interruptedApply,
+          );
+          return;
+        }
+        throw new Error(t('sync.autoSync.interruptedApplyMessage'));
+      }
+
       // If another window unlocked, reuse the in-memory session password from main process.
       if (state.securityState !== 'UNLOCKED') {
         const bridge = netcattyBridge.get();
@@ -162,13 +272,32 @@ export const useAutoSync = (config: AutoSyncConfig) => {
         throw new Error(t('sync.credentialsUnavailable'));
       }
 
+      // Refuse to push an empty vault to cloud. This is almost always
+      // a sign that the local state was lost (update, import failure,
+      // storage corruption) rather than a deliberate "delete everything".
+      // Both auto and manual triggers are blocked; the user can still
+      // use Force Push from the SyncBlocked banner if they genuinely
+      // want to wipe the cloud.
+      //
+      // This pairs with the inspect-failure "fail open" behavior in
+      // checkRemoteVersion below: if inspect transiently errors we still
+      // let auto-sync run, trusting this guard to refuse if local is
+      // truly empty rather than letting an empty state clobber remote.
+      if (!hasMeaningfulSyncData(payload)) {
+        if (trigger === 'auto') {
+          console.warn('[AutoSync] Blocked: refusing to auto-sync an empty vault to cloud');
+          return;
+        }
+        throw new Error(t('sync.autoSync.emptyVaultManual'));
+      }
+
       const results = await sync.syncNow(payload);
 
       // Apply merged payloads first (before checking for failures) so local
       // state gets updated even when some providers failed
       for (const result of results.values()) {
         if (result.mergedPayload) {
-          onApplyPayload(result.mergedPayload);
+          await Promise.resolve(onApplyPayload(result.mergedPayload));
           skipNextSyncRef.current = true;
           break; // All providers share the same merged payload
         }
@@ -184,12 +313,24 @@ export const useAutoSync = (config: AutoSyncConfig) => {
       }
 
       lastSyncedDataRef.current = dataHash;
+
+      // Successful sync implies a successful per-provider
+      // `checkProviderConflict` (which inspects remote) — equivalent
+      // to a successful startup reconciliation from the auto-sync
+      // gate's point of view. Opening the gate here is the escape
+      // hatch when a network outage exhausted the startup retry
+      // timer: a user-triggered manual sync (or any first successful
+      // auto sync that somehow ran anyway) resumes auto-sync for the
+      // rest of the session. Without this, a degraded-startup session
+      // would require the user to manually sync after every edit.
+      hasCheckedRemoteRef.current = true;
+      remoteCheckDoneRef.current = true;
     } catch (error) {
       if (trigger === 'manual') {
         throw error;
       }
       console.error('[AutoSync] Sync failed:', error);
-      toast.error(
+      notify.error(
         error instanceof Error ? error.message : t('common.unknownError'),
         t('sync.autoSync.failedTitle'),
       );
@@ -197,46 +338,232 @@ export const useAutoSync = (config: AutoSyncConfig) => {
       isSyncRunningRef.current = false;
     }
   }, [sync, buildPayload, getDataHash, onApplyPayload, t]);
-  
+
+  // One-shot toast per mount when a previous apply was interrupted, so the
+  // user understands why auto-sync is silently paused and where to go to
+  // recover. `applyProtectedSyncPayload` clears the sentinel on a clean
+  // apply, so this only fires once per genuine crash and naturally stops
+  // after the user completes a recovery.
+  const interruptedApplyNotifiedRef = useRef(false);
+  useEffect(() => {
+    if (interruptedApplyNotifiedRef.current) return;
+    if (!sync.isUnlocked) return;
+    const interrupted = readInterruptedVaultApply();
+    if (!interrupted) return;
+    interruptedApplyNotifiedRef.current = true;
+    notify.error(
+      t('sync.autoSync.interruptedApplyMessage'),
+      t('sync.autoSync.interruptedApplyTitle'),
+    );
+  }, [sync.isUnlocked, t]);
+
+  // Stabilize the fields `checkRemoteVersion` reads from `config`.
+  // AutoSyncConfig is a fresh object literal on every App render, so a
+  // naive `config` dep would rebuild `checkRemoteVersion`'s identity on
+  // every unrelated state change — re-firing the retry effect with
+  // `attempt=0` and spawning overlapping in-flight inspections. The
+  // refs below let `checkRemoteVersion` read the latest callback and
+  // readiness flag without pulling the object identity into deps.
+  const onApplyPayloadRef = useRef(config.onApplyPayload);
+  useEffect(() => {
+    onApplyPayloadRef.current = config.onApplyPayload;
+  }, [config.onApplyPayload]);
+  const startupReadyRef = useRef(config.startupReady);
+  useEffect(() => {
+    startupReadyRef.current = config.startupReady;
+  }, [config.startupReady]);
+  // `buildPayload` closes over live React state so its identity flips
+  // on every vault edit; route it through a ref so `checkRemoteVersion`
+  // can read the latest builder without churning its memo identity.
+  const buildPayloadRef = useRef(buildPayload);
+  useEffect(() => {
+    buildPayloadRef.current = buildPayload;
+  }, [buildPayload]);
+
+  // Serialize `checkRemoteVersion` invocations. Overlapping runs would
+  // race on `commitRemoteInspection` + `onApplyPayload`: two merges
+  // could both write-then-clear the apply-in-progress sentinel around
+  // interleaved applies, and both could push post-merge snapshots to
+  // remote. The cross-window `withRestoreBarrier` protects other
+  // windows but does NOT serialize same-window re-entry, so this
+  // in-flight guard closes that gap at the top of the call.
+  const checkRemoteInFlightRef = useRef(false);
+
   // Check remote version and pull if newer (on startup)
   const checkRemoteVersion = useCallback(async () => {
+    if (checkRemoteInFlightRef.current) {
+      return;
+    }
     const state = manager.getState();
     const hasProvider = Object.values(state.providers).some((provider) => isProviderReadyForSync(provider));
     const unlocked = state.securityState === 'UNLOCKED';
-    
-    if (!hasProvider || !unlocked || hasCheckedRemoteRef.current) {
+
+    if (!hasProvider || !unlocked || hasCheckedRemoteRef.current || startupReadyRef.current === false) {
       return;
     }
-    
-    hasCheckedRemoteRef.current = true;
-    
-    // Find connected provider
+
+    // Find connected provider BEFORE acquiring the in-flight lock so the
+    // "nothing to check" early return doesn't leak the lock and wedge
+    // the retry timer. Any path that takes the lock MUST reach the
+    // finally-release below.
     const connectedProvider = AUTO_SYNC_PROVIDER_ORDER.find((provider) =>
       isProviderReadyForSync(state.providers[provider]),
     ) ?? null;
-    
-    if (!connectedProvider) return;
-    
+
+    if (!connectedProvider) {
+      // Nothing to check — mark as done so the auto-sync gate opens.
+      remoteCheckDoneRef.current = true;
+      return;
+    }
+
+    checkRemoteInFlightRef.current = true;
+
+    // Track whether the startup path completed in a state where the anchor/base
+    // are consistent with the local vault. Only then should we latch
+    // hasCheckedRemoteRef so that transient failures are retryable.
+    let startupConsistent = false;
     try {
-      // Load base BEFORE downloading (downloadFromProvider overwrites the base)
+      // Load base BEFORE observing the remote payload (commitRemoteInspection overwrites the base).
       const base = await manager.loadSyncBase(connectedProvider);
-      const remotePayload = await sync.downloadFromProvider(connectedProvider);
+      const inspection = await manager.inspectProviderRemote(connectedProvider);
 
-      if (remotePayload && remotePayload.syncedAt > state.localUpdatedAt) {
-        const { mergeSyncPayloads } = await import('../../domain/syncMerge');
-        const localPayload = buildPayload();
-        const mergeResult = mergeSyncPayloads(base, localPayload, remotePayload);
+      if (!inspection.payload || !inspection.remoteChanged || !inspection.remoteFile) {
+        // Remote unchanged (or empty) — no local mutation needed; anchor/base
+        // are already in sync with remote from a previous run.
+        startupConsistent = true;
+        return;
+      }
 
-        config.onApplyPayload(mergeResult.payload);
-        // Don't save base or skip auto-sync — let the data-change effect
-        // naturally trigger an upload of the merged payload (which will
-        // go through syncAllProviders and save base on success).
-        toast.success(t('sync.autoSync.syncedMessage'), t('sync.autoSync.syncedTitle'));
+      const remoteFile = inspection.remoteFile;
+      const remotePayload = inspection.payload;
+      const localPayload = buildPayloadRef.current();
+      const localIsEmpty = !hasMeaningfulSyncData(localPayload);
+      const remoteHasData = hasMeaningfulSyncData(remotePayload);
+
+      // If local vault is empty but cloud has data, this almost certainly
+      // means the user's data was lost (update, storage corruption, etc.).
+      // Pause and ask the user what to do instead of silently merging.
+      if (localIsEmpty && remoteHasData) {
+        const userAction = await new Promise<'restore' | 'keep-empty'>((resolve) => {
+          emptyVaultResolveRef.current = resolve;
+          setEmptyVaultConflict({
+            remotePayload,
+            hostCount: remotePayload.hosts?.length ?? 0,
+            keyCount: remotePayload.keys?.length ?? 0,
+            snippetCount: remotePayload.snippets?.length ?? 0,
+          });
+        });
+        setEmptyVaultConflict(null);
+        emptyVaultResolveRef.current = null;
+
+        if (userAction === 'restore') {
+          // Apply remote FIRST; only commit anchor/base after the UI-side
+          // state has accepted the remote payload, otherwise a failure
+          // between commit and apply would leave the anchor pointing at
+          // remote while local is still empty — the exact overwrite window
+          // we're trying to close.
+          await Promise.resolve(onApplyPayloadRef.current(remotePayload));
+          await manager.commitRemoteInspection(connectedProvider, remoteFile, remotePayload);
+          skipNextSyncRef.current = true;
+          startupConsistent = true;
+          notify.success(t('sync.autoSync.restoredMessage'), t('sync.autoSync.restoredTitle'));
+        } else {
+          // User chose to keep the empty vault. Deliberately do NOT advance
+          // the anchor or base — the next sync must still treat remote as
+          // "unseen" so the empty-vault-push guard (`hasMeaningfulSyncData`)
+          // keeps protecting the cloud copy. startupConsistent stays false
+          // so hasCheckedRemoteRef is not latched and the next startup will
+          // re-prompt if the user still has not added anything.
+          notify.info(t('sync.autoSync.keptLocalMessage'), t('sync.autoSync.keptLocalTitle'));
+        }
+        return;
+      }
+
+      const { mergeSyncPayloads } = await import('../../domain/syncMerge');
+      const mergeResult = mergeSyncPayloads(base, localPayload, remotePayload);
+
+      // Apply merged payload to local state BEFORE committing. If the apply
+      // throws, the next startup will re-run the merge with fresh data.
+      await Promise.resolve(onApplyPayloadRef.current(mergeResult.payload));
+      // Base is the last-agreed remote snapshot; `commitRemoteInspection`
+      // stores remotePayload as the base so the next diff is computed
+      // against what the cloud actually has, not against the merged
+      // local-only state.
+      await manager.commitRemoteInspection(connectedProvider, remoteFile, remotePayload);
+      startupConsistent = true;
+      notify.success(t('sync.autoSync.syncedMessage'), t('sync.autoSync.syncedTitle'));
+
+      // If the three-way merge introduced any local-only additions that the
+      // remote does not yet have, we MUST round-trip those to the cloud.
+      // Previously this branch stopped after applying merge locally, so the
+      // merged-in additions lived only on the device that ran the merge
+      // until the user's next edit.
+      //
+      // We push the merged payload *directly* through the manager rather
+      // than going through the React-state-driven `syncNow`. syncNow
+      // rebuilds the payload from hooks state, which may not yet reflect
+      // the onApplyPayload we awaited above (React commit phase is async
+      // relative to the awaited promise resolution). Passing mergeResult
+      // in explicitly removes the race entirely and avoids a setTimeout(0)
+      // that only approximated the correct ordering.
+      if (mergeResult.payload) {
+        try {
+          const roundTripResults = await manager.syncAllProviders(mergeResult.payload);
+          const wasShrinkBlocked = Array.from(roundTripResults.values()).some(
+            (r) => r.shrinkBlocked === true,
+          );
+          if (wasShrinkBlocked) {
+            // The merged payload is already applied locally and is the source of truth
+            // for THIS device. The blocking only prevents pushing it to cloud, which
+            // is acceptable here — the next user-edit-triggered sync will re-check
+            // (and the user can also force-push from the Settings banner if they
+            // navigate there). Reset syncState so we don't leave the manager wedged
+            // in BLOCKED with no banner visible.
+            console.warn('[AutoSync] Post-merge round-trip was shrink-blocked; merged data applied locally, reset syncState to IDLE for next attempt.');
+            manager.clearShrinkBlockedState();
+          }
+          // Suppress the debounced follow-up tick that otherwise fires
+          // once React commits the applied state, since we've just
+          // already pushed that exact payload upstream.
+          skipNextSyncRef.current = true;
+        } catch (error) {
+          // Non-fatal: the next user edit will drive another sync cycle.
+          console.warn('[AutoSync] Post-merge round-trip push failed:', error);
+        }
       }
     } catch (error) {
       console.error('[AutoSync] Failed to check remote version:', error);
+      // Surface a degraded-sync hint to the user rather than silently
+      // opening the auto-sync gate. Auto-sync will still retry on next
+      // data change (see finally block), but without this toast the user
+      // has no visible signal that startup reconciliation failed.
+      notify.error(
+        t('sync.autoSync.inspectFailedMessage'),
+        t('sync.autoSync.inspectFailedTitle'),
+      );
+      // Leave hasCheckedRemoteRef=false so the next startup (or the next
+      // provider/unlock transition) can retry.
+    } finally {
+      if (startupConsistent) {
+        hasCheckedRemoteRef.current = true;
+        // Only open the auto-sync gate when the inspect actually
+        // validated the remote state. Leaving the gate closed on
+        // inspect failure is intentional: an edit made during a
+        // degraded startup must not race ahead and push a partially-
+        // hydrated vault over an intact remote. The retry effect
+        // below re-fires checkRemoteVersion on the next provider/
+        // unlock/startupReady transition, and a manual sync from
+        // Settings remains available as an escape hatch.
+        remoteCheckDoneRef.current = true;
+      }
+      checkRemoteInFlightRef.current = false;
     }
-  }, [sync, config, buildPayload, t]);
+    // Intentionally minimal deps: `buildPayload`, `config.onApplyPayload`,
+    // and `config.startupReady` are read through refs above so their
+    // identity flips (every vault edit produces a fresh `buildPayload`
+    // and a fresh AutoSyncConfig literal) cannot re-memoize this
+    // callback and restart the retry-timer's exponential backoff.
+  }, [t]);
   
   // Debounced auto-sync when data changes
   useEffect(() => {
@@ -244,7 +571,15 @@ export const useAutoSync = (config: AutoSyncConfig) => {
     if (!sync.hasAnyConnectedProvider || !sync.autoSyncEnabled || !sync.isUnlocked) {
       return;
     }
-    
+
+    // Don't auto-sync until the startup remote check has completed.
+    // Without this gate, an empty local vault can push to the cloud
+    // before checkRemoteVersion even runs, overwriting a non-empty
+    // remote vault — the exact bug described in #679.
+    if (!remoteCheckDoneRef.current) {
+      return;
+    }
+
     // Skip initial render
     if (!isInitializedRef.current) {
       isInitializedRef.current = true;
@@ -272,6 +607,23 @@ export const useAutoSync = (config: AutoSyncConfig) => {
     if (sync.isSyncing || isSyncRunningRef.current) {
       return;
     }
+
+    // Hold off on scheduling a new push while another window is applying
+    // a restore — the restore is about to land via localStorage and the
+    // debounce-fired syncNow would otherwise race it. The next data-
+    // change tick after the restore barrier clears will re-enter here.
+    if (isRestoreInProgress()) {
+      return;
+    }
+
+    // Don't even schedule a push while the apply-in-progress sentinel
+    // is held. The syncNow path re-checks and refuses too, but dropping
+    // the debounced schedule here avoids spinning a 3-second timer for
+    // every keystroke while the user is in the Restore UI working
+    // through recovery.
+    if (readInterruptedVaultApply()) {
+      return;
+    }
     
     // Clear existing timeout
     if (syncTimeoutRef.current) {
@@ -288,33 +640,113 @@ export const useAutoSync = (config: AutoSyncConfig) => {
         clearTimeout(syncTimeoutRef.current);
       }
     };
-  }, [sync.hasAnyConnectedProvider, sync.autoSyncEnabled, sync.isUnlocked, sync.isSyncing, getDataHash, syncNow, config.settingsVersion]);
+  }, [sync.hasAnyConnectedProvider, sync.autoSyncEnabled, sync.isUnlocked, sync.isSyncing, getDataHash, syncNow, config.settingsVersion, bookmarksVersion]);
   
-  // Check remote version on startup/unlock
+  // Check remote version on startup/unlock, then retry with backoff
+  // while the inspect keeps failing. Without the timer-based retry,
+  // a failure that doesn't coincide with a dep change would wedge the
+  // auto-sync gate closed until the user restarts or manually triggers
+  // sync from Settings — the 30s/60s/90s cadence below lets a short
+  // outage (network blip, provider rate-limit) self-heal.
   useEffect(() => {
-    if (sync.hasAnyConnectedProvider && sync.isUnlocked && !hasCheckedRemoteRef.current) {
-      // Delay check to ensure everything is loaded
-      const timer = setTimeout(() => {
-        checkRemoteVersion();
-      }, 1000);
-      
-      return () => clearTimeout(timer);
+    if (
+      !sync.hasAnyConnectedProvider ||
+      !sync.isUnlocked ||
+      hasCheckedRemoteRef.current ||
+      config.startupReady === false
+    ) {
+      return;
     }
-  }, [sync.hasAnyConnectedProvider, sync.isUnlocked, checkRemoteVersion]);
+
+    let cancelled = false;
+    let attempt = 0;
+    let timerId: NodeJS.Timeout | null = null;
+
+    const tick = () => {
+      if (cancelled) return;
+      void (async () => {
+        await checkRemoteVersion();
+        if (cancelled || hasCheckedRemoteRef.current) return;
+        // Cap retries at ~5 minutes total (30s + 60s + 120s + 240s). A
+        // persistent failure beyond that is almost certainly a
+        // misconfiguration that needs user action rather than more
+        // auto-retries.
+        //
+        // When retries exhaust we deliberately leave the auto-sync gate
+        // CLOSED. Opening it here would allow a partially-lost local
+        // vault to silently clobber an unchanged remote: anchor still
+        // matches, `checkProviderConflict` sees no remote change,
+        // `hasMeaningfulSyncData` doesn't flag non-empty-but-partial
+        // local, and the empty-vault prompt never fires.
+        //
+        // Escape hatch: a successful manual sync from Settings opens
+        // the gate via `syncNow`'s success path. That path runs the
+        // same per-provider inspect we use here, so a successful
+        // manual sync is equivalent to a successful startup inspect
+        // from the gate's point of view — the user's explicit click
+        // authorizes both the push and the subsequent auto-sync
+        // resumption. Until then, auto-sync stays paused and the
+        // "sync paused" toast is the user's signal to act.
+        if (attempt >= 4) return;
+        const delayMs = Math.min(240_000, 30_000 * 2 ** attempt);
+        attempt += 1;
+        timerId = setTimeout(tick, delayMs);
+      })();
+    };
+
+    tick();
+
+    return () => {
+      cancelled = true;
+      if (timerId) clearTimeout(timerId);
+    };
+  }, [sync.hasAnyConnectedProvider, sync.isUnlocked, config.startupReady, checkRemoteVersion]);
   
-  // Reset check flag when provider disconnects
+  // Reset check flags when provider disconnects
   useEffect(() => {
     if (!sync.hasAnyConnectedProvider) {
       hasCheckedRemoteRef.current = false;
+      remoteCheckDoneRef.current = false;
     }
   }, [sync.hasAnyConnectedProvider]);
+
+  // On unmount, release any pending empty-vault confirmation. Without
+  // this, an unmount mid-dialog (window close, workspace switch) leaves
+  // the resolver promise dangling forever and the `checkRemoteVersion`
+  // finally block never sets remoteCheckDoneRef — in practice React
+  // tears down the hook first, but leaking the resolve callback and
+  // referenced remotePayload keeps them pinned by the awaiter until
+  // the next reload. Resolving with 'keep-empty' is the safe default:
+  // it mirrors the "don't touch remote" choice and leaves the version
+  // stamp untouched so the next mount re-prompts.
+  useEffect(() => {
+    return () => {
+      const resolve = emptyVaultResolveRef.current;
+      if (resolve) {
+        emptyVaultResolveRef.current = null;
+        resolve('keep-empty');
+      }
+    };
+  }, []);
   
+  const resolveEmptyVaultConflict = useCallback((action: 'restore' | 'keep-empty') => {
+    // Guard: resolve only once (prevents double-click from entering an
+    // inconsistent state). The ref is nulled immediately so subsequent
+    // calls are no-ops.
+    const resolve = emptyVaultResolveRef.current;
+    if (!resolve) return;
+    emptyVaultResolveRef.current = null;
+    resolve(action);
+  }, []);
+
   return {
     syncNow,
     buildPayload,
     isSyncing: sync.isSyncing,
     isConnected: sync.hasAnyConnectedProvider,
     autoSyncEnabled: sync.autoSyncEnabled,
+    emptyVaultConflict,
+    resolveEmptyVaultConflict,
   };
 };
 

application/state/useCloudSync.ts

@@ -6,7 +6,7 @@
  * Uses useSyncExternalStore for real-time state synchronization across all components.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
 import {
   type CloudProvider,
   type SecurityState,
@@ -24,10 +24,11 @@ import {
   isProviderReadyForSync,
 } from '../../domain/sync';
 import {
-  CloudSyncManager,
   getCloudSyncManager,
   type SyncManagerState,
+  type SyncEventCallback,
 } from '../../infrastructure/services/CloudSyncManager';
+import type { ShrinkFinding } from '../../domain/syncGuards';
 import { netcattyBridge } from '../../infrastructure/services/netcattyBridge';
 import type { DeviceFlowState } from '../../infrastructure/services/adapters/GitHubAdapter';
 
@@ -56,7 +57,7 @@ export interface CloudSyncHook {
   // Computed
   hasAnyConnectedProvider: boolean;
   connectedProviderCount: number;
-  overallSyncStatus: 'none' | 'synced' | 'syncing' | 'error' | 'conflict';
+  overallSyncStatus: 'none' | 'synced' | 'syncing' | 'error' | 'conflict' | 'blocked';
   
   // Master Key Actions
   setupMasterKey: (password: string, confirmPassword: string) => Promise<void>;
@@ -82,14 +83,30 @@ export interface CloudSyncHook {
     code: string,
     redirectUri: string
   ) => Promise<void>;
+  cancelOAuthConnect: () => void;
   disconnectProvider: (provider: CloudProvider) => Promise<void>;
-  
+  resetProviderStatus: (provider: CloudProvider) => void;
+
   // Sync Actions
-  syncNow: (payload: SyncPayload) => Promise<Map<CloudProvider, SyncResult>>;
-  syncToProvider: (provider: CloudProvider, payload: SyncPayload) => Promise<SyncResult>;
+  syncNow: (payload: SyncPayload, opts?: { overrideShrink?: boolean }) => Promise<Map<CloudProvider, SyncResult>>;
+  syncToProvider: (provider: CloudProvider, payload: SyncPayload, opts?: { overrideShrink?: boolean }) => Promise<SyncResult>;
   downloadFromProvider: (provider: CloudProvider) => Promise<SyncPayload | null>;
   resolveConflict: (resolution: ConflictResolution) => Promise<SyncPayload | null>;
-  
+
+  // Gist Revision History
+  getGistRevisionHistory: () => Promise<Array<{ version: string; date: Date }>>;
+  downloadGistRevision: (sha: string) => Promise<{
+    payload: SyncPayload;
+    meta: import('../../domain/sync').SyncFileMeta;
+    preview: {
+      hostCount: number;
+      keyCount: number;
+      snippetCount: number;
+      identityCount: number;
+      portForwardingRuleCount: number;
+    };
+  } | null>;
+
   // Settings
   setAutoSync: (enabled: boolean, intervalMinutes?: number) => void;
   setDeviceName: (name: string) => void;
@@ -101,12 +118,12 @@ export interface CloudSyncHook {
   formatLastSync: (timestamp?: number) => string;
   getProviderDotColor: (provider: CloudProvider) => string;
   refresh: () => void;
-}
 
-export interface GitHubAuthState {
-  isAuthenticating: boolean;
-  deviceFlowState: DeviceFlowState | null;
-  error: string | null;
+  // Event subscription (for non-state events like SYNC_BLOCKED_SHRINK)
+  subscribeToEvents: (callback: SyncEventCallback) => () => void;
+
+  // Shrink-block state query (for banner hydration on mount)
+  getShrinkBlockedFinding: () => Extract<ShrinkFinding, { suspicious: true }> | null;
 }
 
 // ============================================================================
@@ -127,17 +144,6 @@ const getSnapshot = (): SyncManagerState => {
 };
 
 export const useCloudSync = (): CloudSyncHook => {
-  // Force update mechanism to ensure React re-renders
-  const [, forceUpdate] = useState(0);
-  
-  // Subscribe to state changes and force update
-  useEffect(() => {
-    const unsubscribe = manager.subscribeToStateChanges(() => {
-      forceUpdate(n => n + 1);
-    });
-    return unsubscribe;
-  }, []);
-  
   // Use useSyncExternalStore for real-time state sync across all components
   const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 
@@ -192,7 +198,8 @@ export const useCloudSync = (): CloudSyncHook => {
     ).length;
   }, [state.providers]);
   
-  const overallSyncStatus = useMemo((): 'none' | 'synced' | 'syncing' | 'error' | 'conflict' => {
+  const overallSyncStatus = useMemo((): 'none' | 'synced' | 'syncing' | 'error' | 'conflict' | 'blocked' => {
+    if (state.syncState === 'BLOCKED') return 'blocked';
     if (state.syncState === 'CONFLICT') return 'conflict';
     if (state.syncState === 'ERROR') return 'error';
     if (state.syncState === 'SYNCING') return 'syncing';
@@ -273,7 +280,7 @@ export const useCloudSync = (): CloudSyncHook => {
       throw new Error('Unexpected auth type');
     }
     const data = result.data as { url: string; redirectUri: string };
-    
+
     // Start OAuth callback server in Electron and wait for authorization
     const bridge = netcattyBridge.get();
     const startCallback = bridge?.startOAuthCallback;
@@ -281,32 +288,44 @@ export const useCloudSync = (): CloudSyncHook => {
       // Get state from adapter for CSRF protection
       const adapter = manager.getAdapter('google') as { getPKCEState?: () => string | null } | undefined;
       const expectedState = adapter?.getPKCEState?.() || undefined;
-      
-      // Start callback server and open browser
+
+      // Start callback server and open system browser
       const callbackPromise = startCallback(expectedState);
-      
-      // Open browser after starting server
-      setTimeout(() => {
-        window.open(data.url, "_blank", "width=600,height=700,noopener,noreferrer");
-      }, 100);
-      
-      // Wait for callback
-      const { code } = await callbackPromise;
-      
-      // Complete auth with the received code
-      await manager.completePKCEAuth('google', code, data.redirectUri);
+
+      // Use system browser to avoid white-screen issues in popup windows (#563)
+      // Race: if browser launch fails, surface the error immediately
+      let openTimer: ReturnType<typeof setTimeout> | null = null;
+      const browserPromise = new Promise<never>((_resolve, reject) => {
+        openTimer = setTimeout(async () => {
+          try {
+            await bridge?.openExternal(data.url);
+          } catch (err) {
+            bridge?.cancelOAuthCallback?.();
+            reject(err instanceof Error ? err : new Error('Failed to open browser for authentication'));
+          }
+        }, 100);
+      });
+
+      try {
+        const { code } = await Promise.race([callbackPromise, browserPromise]);
+
+        // Complete auth with the received code
+        await manager.completePKCEAuth('google', code, data.redirectUri);
+      } finally {
+        if (openTimer) clearTimeout(openTimer);
+      }
     }
-    
+
     return data.url;
   }, []);
-  
+
   const connectOneDrive = useCallback(async (): Promise<string> => {
     const result = await manager.startProviderAuth('onedrive');
     if (result.type !== 'url') {
       throw new Error('Unexpected auth type');
     }
     const data = result.data as { url: string; redirectUri: string };
-    
+
     // Start OAuth callback server in Electron and wait for authorization
     const bridge = netcattyBridge.get();
     const startCallback = bridge?.startOAuthCallback;
@@ -314,22 +333,33 @@ export const useCloudSync = (): CloudSyncHook => {
       // Get state from adapter for CSRF protection
       const adapter = manager.getAdapter('onedrive') as { getPKCEState?: () => string | null } | undefined;
       const expectedState = adapter?.getPKCEState?.() || undefined;
-      
-      // Start callback server and open browser
+
+      // Start callback server and open system browser
       const callbackPromise = startCallback(expectedState);
-      
-      // Open browser after starting server
-      setTimeout(() => {
-        window.open(data.url, "_blank", "width=600,height=700,noopener,noreferrer");
-      }, 100);
-      
-      // Wait for callback
-      const { code } = await callbackPromise;
-      
-      // Complete auth with the received code
-      await manager.completePKCEAuth('onedrive', code, data.redirectUri);
+
+      // Use system browser to avoid white-screen issues in popup windows (#563)
+      let openTimer: ReturnType<typeof setTimeout> | null = null;
+      const browserPromise = new Promise<never>((_resolve, reject) => {
+        openTimer = setTimeout(async () => {
+          try {
+            await bridge?.openExternal(data.url);
+          } catch (err) {
+            bridge?.cancelOAuthCallback?.();
+            reject(err instanceof Error ? err : new Error('Failed to open browser for authentication'));
+          }
+        }, 100);
+      });
+
+      try {
+        const { code } = await Promise.race([callbackPromise, browserPromise]);
+
+        // Complete auth with the received code
+        await manager.completePKCEAuth('onedrive', code, data.redirectUri);
+      } finally {
+        if (openTimer) clearTimeout(openTimer);
+      }
     }
-    
+
     return data.url;
   }, []);
   
@@ -345,6 +375,10 @@ export const useCloudSync = (): CloudSyncHook => {
     await manager.disconnectProvider(provider);
   }, []);
 
+  const resetProviderStatus = useCallback((provider: CloudProvider): void => {
+    manager.resetProviderStatus(provider);
+  }, []);
+
   const connectWebDAV = useCallback(async (config: WebDAVConfig): Promise<void> => {
     await manager.connectConfigProvider('webdav', config);
   }, []);
@@ -353,6 +387,11 @@ export const useCloudSync = (): CloudSyncHook => {
     await manager.connectConfigProvider('s3', config);
   }, []);
   
+  const cancelOAuthConnect = useCallback(() => {
+    const bridge = netcattyBridge.get();
+    bridge?.cancelOAuthCallback?.();
+  }, []);
+
   // ========== Settings ==========
   
   const setAutoSync = useCallback((enabled: boolean, intervalMinutes?: number) => {
@@ -392,14 +431,14 @@ export const useCloudSync = (): CloudSyncHook => {
     throw new Error('Vault is locked');
   }, []);
 
-  const syncNowWithUnlock = useCallback(async (payload: SyncPayload) => {
+  const syncNowWithUnlock = useCallback(async (payload: SyncPayload, opts?: { overrideShrink?: boolean }) => {
     await ensureUnlocked();
-    return await manager.syncAllProviders(payload);
+    return await manager.syncAllProviders(payload, opts);
   }, [ensureUnlocked]);
 
-  const syncToProviderWithUnlock = useCallback(async (provider: CloudProvider, payload: SyncPayload) => {
+  const syncToProviderWithUnlock = useCallback(async (provider: CloudProvider, payload: SyncPayload, opts?: { overrideShrink?: boolean }) => {
     await ensureUnlocked();
-    return await manager.syncToProvider(provider, payload);
+    return await manager.syncToProvider(provider, payload, opts);
   }, [ensureUnlocked]);
 
   const downloadFromProviderWithUnlock = useCallback(async (provider: CloudProvider) => {
@@ -407,6 +446,16 @@ export const useCloudSync = (): CloudSyncHook => {
     return await manager.downloadFromProvider(provider);
   }, [ensureUnlocked]);
 
+  const subscribeToEvents = useCallback(
+    (callback: SyncEventCallback) => manager.subscribe(callback),
+    [],
+  );
+
+  const getShrinkBlockedFinding = useCallback(
+    () => manager.getShrinkBlockedFinding(),
+    [],
+  );
+
   const resolveConflictWithUnlock = useCallback(async (resolution: ConflictResolution) => {
     await ensureUnlocked();
     return await manager.resolveConflict(resolution);
@@ -450,13 +499,19 @@ export const useCloudSync = (): CloudSyncHook => {
     connectWebDAV,
     connectS3,
     completePKCEAuth,
+    cancelOAuthConnect,
     disconnectProvider,
-    
+    resetProviderStatus,
+
     // Sync Actions
     syncNow: syncNowWithUnlock,
     syncToProvider: syncToProviderWithUnlock,
     downloadFromProvider: downloadFromProviderWithUnlock,
     resolveConflict: resolveConflictWithUnlock,
+
+    // Gist Revision History (#679)
+    getGistRevisionHistory: manager.getGistRevisionHistory.bind(manager),
+    downloadGistRevision: manager.downloadGistRevision.bind(manager),
     
     // Settings
     setAutoSync,
@@ -469,62 +524,12 @@ export const useCloudSync = (): CloudSyncHook => {
     formatLastSync,
     getProviderDotColor,
     refresh,
-  };
-};
 
-// ============================================================================
-// Convenience Hooks
-// ============================================================================
+    // Event subscription
+    subscribeToEvents,
 
-/**
- * Hook for just the security state (lighter weight)
- */
-export const useSecurityState = () => {
-  const [manager] = useState<CloudSyncManager>(() => getCloudSyncManager());
-  const [securityState, setSecurityState] = useState<SecurityState>(
-    () => manager.getSecurityState()
-  );
-  
-  useEffect(() => {
-    const unsubscribe = manager.subscribe((event) => {
-      if (event.type === 'SECURITY_STATE_CHANGED') {
-        setSecurityState(event.state);
-      }
-    });
-    return unsubscribe;
-  }, [manager]);
-  
-  return {
-    securityState,
-    isUnlocked: securityState === 'UNLOCKED',
-    isLocked: securityState === 'LOCKED',
-    hasNoKey: securityState === 'NO_KEY',
-  };
-};
-
-/**
- * Hook for provider status indicators
- */
-export const useProviderStatus = (provider: CloudProvider) => {
-  const [manager] = useState<CloudSyncManager>(() => getCloudSyncManager());
-  const [connection, setConnection] = useState<ProviderConnection>(
-    () => manager.getProviderConnection(provider)
-  );
-  
-  useEffect(() => {
-    const unsubscribe = manager.subscribe(() => {
-      setConnection(manager.getProviderConnection(provider));
-    });
-    return unsubscribe;
-  }, [manager, provider]);
-  
-  return {
-    ...connection,
-    isConnected: isProviderReadyForSync(connection),
-    isSyncing: connection.status === 'syncing',
-    hasError: connection.status === 'error',
-    dotColor: getSyncDotColor(connection.status),
-    lastSyncFormatted: formatLastSync(connection.lastSync),
+    // Shrink-block state query
+    getShrinkBlockedFinding,
   };
 };
 

application/state/useFileUpload.ts

@@ -1,20 +1,13 @@
 /**
- * useFileUpload - Handle file paste/drop with base64 conversion
+ * File upload conversion helpers for AI draft attachments.
  *
  * Supports images, PDFs, and other document types.
  * Ported from 1code's use-agents-file-upload.ts
  */
-import { useCallback, useState } from 'react';
+import type { UploadedFile } from '../../infrastructure/ai/types';
 import { getPathForFile } from '../../lib/sftpFileUtils';
 
-export interface UploadedFile {
-  id: string;
-  filename: string;
-  dataUrl: string;      // data:...;base64,... for preview
-  base64Data: string;   // raw base64 for API
-  mediaType: string;    // MIME type e.g. "image/png", "application/pdf"
-  filePath?: string;    // original filesystem path (Electron only)
-}
+export type { UploadedFile } from '../../infrastructure/ai/types';
 
 /** Reject only known binary blobs that AI models can't process */
 const REJECTED_MIME_PREFIXES = ['video/', 'audio/'];
@@ -38,42 +31,32 @@ async function fileToDataUrl(file: File): Promise<{ dataUrl: string; base64: str
   });
 }
 
-export function useFileUpload() {
-  const [files, setFiles] = useState<UploadedFile[]>([]);
+export async function convertFilesToUploads(inputFiles: File[]): Promise<UploadedFile[]> {
+  const supported = inputFiles.filter(isSupportedFile);
+  if (supported.length === 0) return [];
 
-  const addFiles = useCallback(async (inputFiles: File[]) => {
-    const supported = inputFiles.filter(isSupportedFile);
-    if (supported.length === 0) return;
-
-    const newFiles: UploadedFile[] = await Promise.all(
-      supported.map(async (file) => {
-        const id = crypto.randomUUID();
-        const filename = file.name || `file-${Date.now()}`;
-        const mediaType = file.type || 'application/octet-stream';
-        let dataUrl = '';
-        let base64Data = '';
-        try {
-          const result = await fileToDataUrl(file);
-          dataUrl = result.dataUrl;
-          base64Data = result.base64;
-        } catch (err) {
-          console.error('[useFileUpload] Failed to convert:', err);
-        }
+  const uploads: Array<UploadedFile | null> = await Promise.all(
+    supported.map(async (file) => {
+      const id = crypto.randomUUID();
+      const filename = file.name || `file-${Date.now()}`;
+      const mediaType = file.type || 'application/octet-stream';
+      try {
+        const result = await fileToDataUrl(file);
         const filePath = getPathForFile(file);
-        return { id, filename, dataUrl, base64Data, mediaType, filePath };
-      }),
-    );
+        return {
+          id,
+          filename,
+          dataUrl: result.dataUrl,
+          base64Data: result.base64,
+          mediaType,
+          filePath,
+        };
+      } catch (err) {
+        console.error('[useFileUpload] Failed to convert:', err);
+        return null;
+      }
+    }),
+  );
 
-    setFiles((prev) => [...prev, ...newFiles]);
-  }, []);
-
-  const removeFile = useCallback((id: string) => {
-    setFiles((prev) => prev.filter((f) => f.id !== id));
-  }, []);
-
-  const clearFiles = useCallback(() => {
-    setFiles([]);
-  }, []);
-
-  return { files, addFiles, removeFile, clearFiles };
+  return uploads.filter((upload): upload is UploadedFile => upload !== null);
 }

application/state/useGlobalHotkeys.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { KeyBinding, matchesKeyBinding } from '../../domain/models';
 
-export interface HotkeyActions {
+interface HotkeyActions {
   // Tab management
   switchToTab: (tabIndex: number) => void;
   nextTab: () => void;
@@ -13,6 +13,7 @@ export interface HotkeyActions {
   openHosts: () => void;
   openSftp: () => void;
   quickSwitch: () => void;
+  newWorkspace: () => void;
   commandPalette: () => void;
   portForwarding: () => void;
   snippets: () => void;
@@ -61,6 +62,7 @@ export const getAppLevelActions = (): Set<string> => {
     'openHosts',
     'openSftp',
     'quickSwitch',
+    'newWorkspace',
     'commandPalette',
     'portForwarding',
     'snippets',
@@ -77,6 +79,7 @@ export const getTerminalPassthroughActions = (): Set<string> => {
   return new Set([
     'copy',
     'paste',
+    'pasteSelection',
     'selectAll',
     'clearBuffer',
     'searchTerminal',
@@ -167,6 +170,9 @@ export const useGlobalHotkeys = ({
       case 'quickSwitch':
         currentActions.quickSwitch?.();
         break;
+      case 'newWorkspace':
+        currentActions.newWorkspace?.();
+        break;
       case 'commandPalette':
         currentActions.commandPalette?.();
         break;

application/state/useImmersiveMode.ts

@@ -144,6 +144,7 @@ function applyImmersiveStyle(css: string, isDark: boolean, bg: string) {
 
 function removeImmersiveStyle() {
   document.getElementById(STYLE_ID)?.remove();
+  delete document.documentElement.dataset.immersiveTheme;
 }
 
 // ---------------------------------------------------------------------------
@@ -151,12 +152,10 @@ function removeImmersiveStyle() {
 // ---------------------------------------------------------------------------
 
 export function useImmersiveMode({
-  isImmersive,
   activeTabId,
   activeTerminalTheme,
   restoreOriginalTheme,
 }: {
-  isImmersive: boolean;
   activeTabId: string;
   activeTerminalTheme: TerminalTheme | null;
   restoreOriginalTheme: () => void;
@@ -170,18 +169,19 @@ export function useImmersiveMode({
 
   // APPLY: useLayoutEffect — runs before paint, O(1) Map lookup, single DOM write
   useLayoutEffect(() => {
-    if (isImmersive && isTerminalTab && activeTerminalTheme) {
+    if (isTerminalTab && activeTerminalTheme) {
       const fp = themeFingerprint(activeTerminalTheme);
       if (appliedFpRef.current === fp) return;
       overrideActiveRef.current = true;
       appliedFpRef.current = fp;
       applyImmersiveStyle(getImmersiveCss(activeTerminalTheme), activeTerminalTheme.type === 'dark', activeTerminalTheme.colors.background);
+      document.documentElement.dataset.immersiveTheme = fp;
     }
-  }, [isImmersive, isTerminalTab, activeTerminalTheme]);
+  }, [isTerminalTab, activeTerminalTheme]);
 
   // RESTORE: useEffect — runs after paint, with fade overlay
   useEffect(() => {
-    if (isImmersive && isTerminalTab && activeTerminalTheme) return;
+    if (isTerminalTab && activeTerminalTheme) return;
     if (!overrideActiveRef.current) return;
     overrideActiveRef.current = false;
     appliedFpRef.current = null;
@@ -198,7 +198,7 @@ export function useImmersiveMode({
     });
     const fallback = setTimeout(() => { if (overlay.parentNode) overlay.remove(); }, 400);
     return () => { clearTimeout(fallback); if (overlay.parentNode) overlay.remove(); };
-  }, [isImmersive, isTerminalTab, activeTerminalTheme, restoreOriginalTheme]);
+  }, [isTerminalTab, activeTerminalTheme, restoreOriginalTheme]);
 
   // Cleanup on unmount
   useEffect(() => {

application/state/useLocalVaultBackups.ts

@@ -0,0 +1,95 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+  type LocalVaultBackupPreview,
+  getLocalVaultBackupCapabilities,
+  getLocalVaultBackupMaxCount,
+  listLocalVaultBackups,
+  openLocalVaultBackupDir,
+  readLocalVaultBackup,
+  setLocalVaultBackupMaxCount,
+  trimLocalVaultBackups,
+} from '../localVaultBackups';
+import { netcattyBridge } from '../../infrastructure/services/netcattyBridge';
+
+export function useLocalVaultBackups() {
+  const [backups, setBackups] = useState<LocalVaultBackupPreview[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [maxBackups, setMaxBackupsState] = useState(() => getLocalVaultBackupMaxCount());
+  // `null` while we're still asking the main process. The UI should treat
+  // `null` as "unknown, don't render restore controls yet" so we never expose
+  // a destructive action that might later be disabled.
+  const [encryptionAvailable, setEncryptionAvailable] = useState<boolean | null>(null);
+
+  const refreshBackups = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const next = await listLocalVaultBackups();
+      setBackups(next);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const caps = await getLocalVaultBackupCapabilities();
+        if (!cancelled) {
+          setEncryptionAvailable(caps.encryptionAvailable);
+        }
+      } catch {
+        if (!cancelled) {
+          setEncryptionAvailable(false);
+        }
+      }
+    })();
+    void refreshBackups();
+    return () => {
+      cancelled = true;
+    };
+  }, [refreshBackups]);
+
+  // Cross-window live refresh: the main process broadcasts when any
+  // renderer's createBackup or trimBackups actually mutated the on-disk
+  // set. Without this subscription, a protective backup written by the
+  // main window wouldn't show up in the Settings window's list until
+  // the user manually navigated away and back, silently under-reporting
+  // the most recent recovery points.
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+    const subscribe = bridge?.onVaultBackupsChanged;
+    if (typeof subscribe !== 'function') return undefined;
+    const unsubscribe = subscribe(() => {
+      void refreshBackups();
+    });
+    return () => {
+      try { unsubscribe?.(); } catch { /* ignore */ }
+    };
+  }, [refreshBackups]);
+
+  const updateMaxBackups = useCallback(async (value: number) => {
+    const sanitized = setLocalVaultBackupMaxCount(value);
+    setMaxBackupsState(sanitized);
+    await trimLocalVaultBackups(sanitized);
+    await refreshBackups();
+    return sanitized;
+  }, [refreshBackups]);
+
+  const openBackupDirectory = useCallback(async () => {
+    await openLocalVaultBackupDir();
+  }, []);
+
+  return {
+    backups,
+    isLoading,
+    maxBackups,
+    encryptionAvailable,
+    refreshBackups,
+    readBackup: readLocalVaultBackup,
+    setMaxBackups: updateMaxBackups,
+    openBackupDirectory,
+  };
+}
+
+export default useLocalVaultBackups;

application/state/usePortForwardingAutoStart.ts

@@ -4,7 +4,8 @@
  * when the application starts, not when the user navigates to the port forwarding page.
  */
 import { useCallback, useEffect, useRef } from "react";
-import { Host, Identity, PortForwardingRule, SSHKey } from "../../domain/models";
+import { GroupConfig, Host, Identity, PortForwardingRule, SSHKey } from "../../domain/models";
+import { resolveGroupDefaults, applyGroupDefaults } from "../../domain/groupConfig";
 import { STORAGE_KEY_PORT_FORWARDING } from "../../infrastructure/config/storageKeys";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
 import {
@@ -19,6 +20,7 @@ export interface UsePortForwardingAutoStartOptions {
   hosts: Host[];
   keys: SSHKey[];
   identities: Identity[];
+  groupConfigs: GroupConfig[];
 }
 
 /**
@@ -29,11 +31,13 @@ export const usePortForwardingAutoStart = ({
   hosts,
   keys,
   identities,
+  groupConfigs,
 }: UsePortForwardingAutoStartOptions): void => {
   const autoStartExecutedRef = useRef(false);
   const hostsRef = useRef<Host[]>(hosts);
   const keysRef = useRef<SSHKey[]>(keys);
   const identitiesRef = useRef<Identity[]>(identities);
+  const groupConfigsRef = useRef<GroupConfig[]>(groupConfigs);
 
   const isHostAuthReady = useCallback((host: Host, seen = new Set<string>()): boolean => {
     if (!host || seen.has(host.id)) return true;
@@ -73,6 +77,16 @@ export const usePortForwardingAutoStart = ({
     identitiesRef.current = identities;
   }, [identities]);
 
+  useEffect(() => {
+    groupConfigsRef.current = groupConfigs;
+  }, [groupConfigs]);
+
+  const resolveEffectiveHost = useCallback((host: Host): Host => {
+    if (!host.group) return host;
+    const defaults = resolveGroupDefaults(host.group, groupConfigsRef.current);
+    return applyGroupDefaults(host, defaults);
+  }, []);
+
   // Set up the reconnect callback
   useEffect(() => {
     const handleReconnect = async (
@@ -89,11 +103,12 @@ export const usePortForwardingAutoStart = ({
         return { success: false, error: "Rule or host not found" };
       }
 
-      const host = hostsRef.current.find((h) => h.id === rule.hostId);
-      if (!host) {
+      const rawHost = hostsRef.current.find((h) => h.id === rule.hostId);
+      if (!rawHost) {
         return { success: false, error: "Host not found" };
       }
 
+      const host = resolveEffectiveHost(rawHost);
       return startPortForward(rule, host, hostsRef.current, keysRef.current, identitiesRef.current, onStatusChange, true);
     };
 
@@ -101,7 +116,7 @@ export const usePortForwardingAutoStart = ({
     return () => {
       setReconnectCallback(null);
     };
-  }, []);
+  }, [resolveEffectiveHost]);
 
   // Auto-start rules on app launch
   useEffect(() => {
@@ -146,8 +161,9 @@ export const usePortForwardingAutoStart = ({
 
       // Start each auto-start rule
       for (const rule of autoStartRules) {
-        const host = hosts.find((h) => h.id === rule.hostId);
-        if (host) {
+        const rawHost = hosts.find((h) => h.id === rule.hostId);
+        if (rawHost) {
+          const host = resolveEffectiveHost(rawHost);
           void startPortForward(
             rule,
             host,
@@ -180,5 +196,5 @@ export const usePortForwardingAutoStart = ({
     };
 
     void runAutoStart();
-  }, [hosts, identities, isHostAuthReady, keys]);
+  }, [hosts, identities, isHostAuthReady, keys, resolveEffectiveHost]);
 };

application/state/useSessionState.ts

@@ -1,6 +1,7 @@
-import { MouseEvent,useCallback,useMemo,useState } from 'react';
+import { MouseEvent,useCallback,useMemo,useRef,useState } from 'react';
 import { ConnectionLog,Host,SerialConfig,Snippet,TerminalSession,Workspace,WorkspaceViewMode } from '../../domain/models';
 import {
+appendPaneToWorkspaceRoot,
 collectSessionIds,
 createWorkspaceFromSessions as createWorkspaceEntity,
 createWorkspaceFromSessionIds,
@@ -24,6 +25,12 @@ export interface LogView {
 export const useSessionState = () => {
   const [sessions, setSessions] = useState<TerminalSession[]>([]);
   const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  // Latest workspaces snapshot for synchronous existence checks outside
+  // setWorkspaces updaters — React doesn't guarantee updaters run
+  // synchronously, so relying on a flag flipped inside them to decide
+  // whether to also call setSessions is racy and can leave orphan panes.
+  const workspacesRef = useRef(workspaces);
+  workspacesRef.current = workspaces;
   // activeTabId is now managed by external store - components subscribe directly
   const setActiveTabId = activeTabStore.setActiveTabId;
   const [draggingSessionId, setDraggingSessionId] = useState<string | null>(null);
@@ -40,25 +47,33 @@ export const useSessionState = () => {
 
   const createLocalTerminal = useCallback((options?: {
     shellType?: TerminalSession['shellType'];
+    shell?: string;
+    shellArgs?: string[];
+    shellName?: string;
+    shellIcon?: string;
   }) => {
     const sessionId = crypto.randomUUID();
     const localHostId = `local-${sessionId}`;
     const newSession: TerminalSession = {
       id: sessionId,
       hostId: localHostId,
-      hostLabel: 'Local Terminal',
+      hostLabel: options?.shellName || 'Local Terminal',
       hostname: 'localhost',
       username: 'local',
       status: 'connecting',
       protocol: 'local',
       shellType: options?.shellType,
+      localShell: options?.shell,
+      localShellArgs: options?.shellArgs,
+      localShellName: options?.shellName,
+      localShellIcon: options?.shellIcon,
     };
     setSessions(prev => [...prev, newSession]);
     setActiveTabId(sessionId);
     return sessionId;
   }, [setActiveTabId]);
 
-  const createSerialSession = useCallback((config: SerialConfig) => {
+  const createSerialSession = useCallback((config: SerialConfig, options?: { charset?: string }) => {
     const sessionId = crypto.randomUUID();
     const serialHostId = `serial-${sessionId}`;
     const portName = config.path.split('/').pop() || config.path;
@@ -71,6 +86,7 @@ export const useSessionState = () => {
       status: 'connecting',
       protocol: 'serial',
       serialConfig: config,
+      charset: options?.charset,
     };
     setSessions(prev => [...prev, newSession]);
     setActiveTabId(sessionId);
@@ -103,6 +119,7 @@ export const useSessionState = () => {
         status: 'connecting',
         protocol: 'serial',
         serialConfig: serialConfig,
+        charset: host.charset,
       };
       setSessions(prev => [...prev, newSession]);
       setActiveTabId(sessionId);
@@ -120,6 +137,7 @@ export const useSessionState = () => {
       protocol: host.protocol,
       port: host.port,
       moshEnabled: host.moshEnabled,
+      charset: host.charset,
     };
     setSessions(prev => [...prev, newSession]);
     setActiveTabId(newSession.id);
@@ -130,19 +148,48 @@ export const useSessionState = () => {
     setSessions(prev => prev.map(s => s.id === sessionId ? { ...s, status } : s));
   }, []);
 
+  const closeWorkspace = useCallback((workspaceId: string) => {
+    setWorkspaces(prevWorkspaces => {
+      const remainingWorkspaces = prevWorkspaces.filter(w => w.id !== workspaceId);
+
+      setSessions(prevSessions => prevSessions.filter(s => s.workspaceId !== workspaceId));
+
+      const currentActiveTabId = activeTabStore.getActiveTabId();
+      if (currentActiveTabId === workspaceId) {
+        if (remainingWorkspaces.length > 0) {
+          setActiveTabId(remainingWorkspaces[remainingWorkspaces.length - 1].id);
+        } else {
+          setActiveTabId('vault');
+        }
+      }
+
+      return remainingWorkspaces;
+    });
+  }, [setActiveTabId]);
+
   const closeSession = useCallback((sessionId: string, e?: MouseEvent) => {
     e?.stopPropagation();
-    
+
+    // Pre-compute outside the setSessions updater so we don't depend on React
+    // having run the updater by the time we queue the microtask. React 18+ does
+    // not guarantee updater execution timing under concurrent scheduling.
+    const sessionBeingClosed = sessions.find(s => s.id === sessionId);
+    const workspaceIdToMaybeClose =
+      sessionBeingClosed?.workspaceId &&
+      sessions.every(s => s.id === sessionId || s.workspaceId !== sessionBeingClosed.workspaceId)
+        ? sessionBeingClosed.workspaceId
+        : undefined;
+
     setSessions(prevSessions => {
       const targetSession = prevSessions.find(s => s.id === sessionId);
       const wsId = targetSession?.workspaceId;
-      
+
       setWorkspaces(prevWorkspaces => {
         let removedWorkspaceId: string | null = null;
         let nextWorkspaces = prevWorkspaces;
         let dissolvedWorkspaceId: string | null = null;
         let lastRemainingSessionId: string | null = null;
-        
+
         if (wsId) {
           nextWorkspaces = prevWorkspaces
             .map(ws => {
@@ -152,7 +199,7 @@ export const useSessionState = () => {
                 removedWorkspaceId = ws.id;
                 return null;
               }
-              
+
               // Check if only 1 session remains - dissolve workspace
               const remainingSessionIds = collectSessionIds(pruned);
               if (remainingSessionIds.length === 1) {
@@ -160,12 +207,12 @@ export const useSessionState = () => {
                 lastRemainingSessionId = remainingSessionIds[0];
                 return null;
               }
-              
+
               return { ...ws, root: pruned };
             })
             .filter((ws): ws is Workspace => Boolean(ws));
         }
-        
+
         const remainingSessions = prevSessions.filter(s => s.id !== sessionId);
         const fallbackWorkspace = nextWorkspaces[nextWorkspaces.length - 1];
         const fallbackSolo = remainingSessions.filter(s => !s.workspaceId).slice(-1)[0];
@@ -187,10 +234,10 @@ export const useSessionState = () => {
         } else if (wsId && currentActiveTabId === wsId && !nextWorkspaces.find(w => w.id === wsId)) {
           setActiveTabId(getFallback());
         }
-        
+
         return nextWorkspaces;
       });
-      
+
       // Check if we need to dissolve a workspace (convert remaining session to orphan)
       if (targetSession?.workspaceId) {
         const ws = workspaces.find(w => w.id === targetSession.workspaceId);
@@ -207,29 +254,14 @@ export const useSessionState = () => {
           }
         }
       }
-	      
-	      return prevSessions.filter(s => s.id !== sessionId);
-	    });
-	  }, [workspaces, setActiveTabId]);
 
-  const closeWorkspace = useCallback((workspaceId: string) => {
-    setWorkspaces(prevWorkspaces => {
-      const remainingWorkspaces = prevWorkspaces.filter(w => w.id !== workspaceId);
-      
-      setSessions(prevSessions => prevSessions.filter(s => s.workspaceId !== workspaceId));
-      
-      const currentActiveTabId = activeTabStore.getActiveTabId();
-      if (currentActiveTabId === workspaceId) {
-        if (remainingWorkspaces.length > 0) {
-          setActiveTabId(remainingWorkspaces[remainingWorkspaces.length - 1].id);
-        } else {
-          setActiveTabId('vault');
-        }
-      }
-      
-	      return remainingWorkspaces;
-	    });
-	  }, [setActiveTabId]);
+      return prevSessions.filter(s => s.id !== sessionId);
+    });
+
+    if (workspaceIdToMaybeClose) {
+      queueMicrotask(() => closeWorkspace(workspaceIdToMaybeClose!));
+    }
+  }, [sessions, workspaces, setActiveTabId, closeWorkspace]);
 
   const startSessionRename = useCallback((sessionId: string) => {
     setSessions(prevSessions => {
@@ -321,6 +353,7 @@ export const useSessionState = () => {
           status: 'connecting',
           protocol: 'serial',
           serialConfig: serialConfig,
+          charset: host.charset,
         };
       }
 
@@ -334,6 +367,7 @@ export const useSessionState = () => {
         protocol: host.protocol,
         port: host.port,
         moshEnabled: host.moshEnabled,
+        charset: host.charset,
       };
     });
 
@@ -356,6 +390,89 @@ export const useSessionState = () => {
     setActiveTabId(workspace.id);
   }, [setActiveTabId]);
 
+  // Like createWorkspaceWithHosts but supports mixed targets — each
+  // entry is either an SSH host or a local terminal. Used by the
+  // "New Workspace" flow in QuickSwitcher.
+  type WorkspaceTarget =
+    | { kind: 'local'; shellType?: TerminalSession['shellType']; shell?: string; shellArgs?: string[]; shellName?: string; shellIcon?: string }
+    | { kind: 'host'; host: Host };
+
+  const createWorkspaceFromTargets = useCallback((targets: WorkspaceTarget[], name: string = 'Workspace'): string | null => {
+    if (targets.length === 0) return null;
+
+    const newSessions: TerminalSession[] = targets.map((target) => {
+      if (target.kind === 'local') {
+        const sessionId = crypto.randomUUID();
+        return {
+          id: sessionId,
+          hostId: `local-${sessionId}`,
+          hostLabel: target.shellName || 'Local Terminal',
+          hostname: 'localhost',
+          username: 'local',
+          status: 'connecting',
+          protocol: 'local',
+          shellType: target.shellType,
+          localShell: target.shell,
+          localShellArgs: target.shellArgs,
+          localShellName: target.shellName,
+          localShellIcon: target.shellIcon,
+        };
+      }
+      const host = target.host;
+      if (host.protocol === 'serial') {
+        const serialConfig: SerialConfig = host.serialConfig || {
+          path: host.hostname,
+          baudRate: host.port || 115200,
+          dataBits: 8,
+          stopBits: 1,
+          parity: 'none',
+          flowControl: 'none',
+          localEcho: false,
+          lineMode: false,
+        };
+        const portName = serialConfig.path.split('/').pop() || serialConfig.path;
+        return {
+          id: crypto.randomUUID(),
+          hostId: host.id,
+          hostLabel: host.label || `Serial: ${portName}`,
+          hostname: serialConfig.path,
+          username: '',
+          status: 'connecting',
+          protocol: 'serial',
+          serialConfig,
+          charset: host.charset,
+        };
+      }
+      return {
+        id: crypto.randomUUID(),
+        hostId: host.id,
+        hostLabel: host.label,
+        hostname: host.hostname,
+        username: host.username,
+        status: 'connecting',
+        protocol: host.protocol,
+        port: host.port,
+        moshEnabled: host.moshEnabled,
+        charset: host.charset,
+      };
+    });
+
+    const sessionIds = newSessions.map((s) => s.id);
+    // Default to focus-mode (sidebar layout) regardless of target
+    // count — matches the intent behind the QuickSwitcher "New
+    // Workspace" flow, which the user expects to land in focus view.
+    const workspace = createWorkspaceFromSessionIds(sessionIds, {
+      title: name,
+      viewMode: 'focus',
+    });
+    const sessionsWithWorkspace = newSessions.map((s) => ({ ...s, workspaceId: workspace.id }));
+
+    setSessions((prev) => [...prev, ...sessionsWithWorkspace]);
+    setWorkspaces((prev) => [...prev, workspace]);
+    setActiveTabId(workspace.id);
+    return workspace.id;
+  }, [setActiveTabId]);
+
   const createWorkspaceFromSessions = useCallback((
     baseSessionId: string,
     joiningSessionId: string,
@@ -407,6 +524,118 @@ export const useSessionState = () => {
 	    });
 	  }, [setActiveTabId]);
 
+  // Add a host into an existing workspace by creating a new session for
+  // that host and appending it as the last pane at the workspace root.
+  // Sibling sizes are rebalanced equally by appendPaneToWorkspaceRoot.
+  // Unlike addSessionToWorkspace (which takes a pre-created orphan
+  // session and a SplitHint), this is atomic — the new session is born
+  // already bound to the target workspace and focused.
+  const appendHostToWorkspace = useCallback((
+    workspaceId: string,
+    host: Host,
+    direction: SplitDirection = 'vertical',
+  ): string | null => {
+    // Serial hosts use a different session constructor; they currently
+    // only enter workspaces via createSerialSession + drag, so reject
+    // them here to avoid a partially-constructed session.
+    if (host.protocol === 'serial') return null;
+
+    // Cheap early-exit using the ref when the workspace is clearly
+    // absent. The authoritative check lives inside the setWorkspaces
+    // updater below so we also cover the concurrent-close race.
+    if (!workspacesRef.current.some(w => w.id === workspaceId)) return null;
+
+    const newSessionId = crypto.randomUUID();
+    const newSession: TerminalSession = {
+      id: newSessionId,
+      hostId: host.id,
+      hostLabel: host.label,
+      hostname: host.hostname,
+      username: host.username,
+      status: 'connecting',
+      protocol: host.protocol,
+      port: host.port,
+      moshEnabled: host.moshEnabled,
+      charset: host.charset,
+      workspaceId,
+    };
+
+    // Nest setSessions + setActiveTabId inside the setWorkspaces updater
+    // so we only commit the session when the workspace update actually
+    // matched — otherwise a concurrent closeWorkspace between the ref
+    // check and the updater firing would leave an orphan session with a
+    // workspaceId pointing at nothing, and active tab would jump to a
+    // closed id. The inner setSessions is idempotent (id dedupe) so
+    // StrictMode's dev-time double-invoke does not duplicate the row.
+    setWorkspaces(prev => {
+      const target = prev.find(w => w.id === workspaceId);
+      if (!target) return prev;
+      setSessions(s => s.some(x => x.id === newSessionId) ? s : [...s, newSession]);
+      setActiveTabId(workspaceId);
+      return prev.map(ws => {
+        if (ws.id !== workspaceId) return ws;
+        return {
+          ...ws,
+          root: appendPaneToWorkspaceRoot(ws.root, newSessionId, direction),
+          focusedSessionId: newSessionId,
+        };
+      });
+    });
+    return newSessionId;
+  }, [setActiveTabId]);
+
+  // Atomic "append a local terminal pane" — mirror of appendHostToWorkspace
+  // but constructs a local-protocol session instead of an SSH one.
+  const appendLocalTerminalToWorkspace = useCallback((
+    workspaceId: string,
+    options?: {
+      shellType?: TerminalSession['shellType'];
+      shell?: string;
+      shellArgs?: string[];
+      shellName?: string;
+      shellIcon?: string;
+    },
+    direction: SplitDirection = 'vertical',
+  ): string | null => {
+    // Same pattern as appendHostToWorkspace — ref guard + authoritative
+    // inside-updater match to cover concurrent closeWorkspace.
+    if (!workspacesRef.current.some(w => w.id === workspaceId)) return null;
+
+    const newSessionId = crypto.randomUUID();
+    const localHostId = `local-${newSessionId}`;
+    const newSession: TerminalSession = {
+      id: newSessionId,
+      hostId: localHostId,
+      hostLabel: options?.shellName || 'Local Terminal',
+      hostname: 'localhost',
+      username: 'local',
+      status: 'connecting',
+      protocol: 'local',
+      shellType: options?.shellType,
+      localShell: options?.shell,
+      localShellArgs: options?.shellArgs,
+      localShellName: options?.shellName,
+      localShellIcon: options?.shellIcon,
+      workspaceId,
+    };
+
+    setWorkspaces(prev => {
+      const target = prev.find(w => w.id === workspaceId);
+      if (!target) return prev;
+      setSessions(s => s.some(x => x.id === newSessionId) ? s : [...s, newSession]);
+      setActiveTabId(workspaceId);
+      return prev.map(ws => {
+        if (ws.id !== workspaceId) return ws;
+        return {
+          ...ws,
+          root: appendPaneToWorkspaceRoot(ws.root, newSessionId, direction),
+          focusedSessionId: newSessionId,
+        };
+      });
+    });
+    return newSessionId;
+  }, [setActiveTabId]);
+
   const updateSplitSizes = useCallback((workspaceId: string, splitId: string, sizes: number[]) => {
     setWorkspaces(prev => prev.map(ws => {
       if (ws.id !== workspaceId) return ws;
@@ -445,8 +674,13 @@ export const useSessionState = () => {
           port: session.port,
           moshEnabled: session.moshEnabled,
           shellType: nextShellType,
+          charset: session.charset,
+          localShell: session.localShell,
+          localShellArgs: session.localShellArgs,
+          localShellName: session.localShellName,
+          localShellIcon: session.localShellIcon,
         };
-        
+
         // Add pane to existing workspace
         const hint: SplitHint = {
           direction,
@@ -476,13 +710,18 @@ export const useSessionState = () => {
         port: session.port,
         moshEnabled: session.moshEnabled,
         shellType: nextShellType,
+        charset: session.charset,
+        localShell: session.localShell,
+        localShellArgs: session.localShellArgs,
+        localShellName: session.localShellName,
+        localShellIcon: session.localShellIcon,
       };
-      
+
       const hint: SplitHint = {
         direction,
         position: direction === 'horizontal' ? 'bottom' : 'right',
       };
-      
+
       const newWorkspace = createWorkspaceEntity(sessionId, newSession.id, hint);
       setWorkspaces(prev => [...prev, newWorkspace]);
       setActiveTabId(newWorkspace.id);
@@ -563,6 +802,7 @@ export const useSessionState = () => {
       hostname: host.hostname,
       username: host.username,
       status: 'connecting' as const,
+      charset: host.charset,
       // workspaceId will be set after workspace is created
     }));
 
@@ -630,16 +870,22 @@ export const useSessionState = () => {
   const copySession = useCallback((sessionId: string, options?: {
     localShellType?: TerminalSession['shellType'];
   }) => {
+    // Pre-allocate the new id outside the updater so StrictMode's
+    // double-invocation of the functional updater doesn't mint two ids.
+    const newSessionId = crypto.randomUUID();
+
     setSessions(prevSessions => {
       const session = prevSessions.find(s => s.id === sessionId);
+      // Source may have been closed between the user's action and this
+      // update running; in that case skip entirely — do NOT switch the
+      // active tab or insert into tabOrder, which would leave dangling ids.
       if (!session) return prevSessions;
       const nextShellType = session.protocol === 'local'
         ? options?.localShellType
         : session.shellType;
 
-      // Create a new session with the same connection info
       const newSession: TerminalSession = {
-        id: crypto.randomUUID(),
+        id: newSessionId,
         hostId: session.hostId,
         hostLabel: session.hostLabel,
         hostname: session.hostname,
@@ -649,13 +895,48 @@ export const useSessionState = () => {
         port: session.port,
         moshEnabled: session.moshEnabled,
         shellType: nextShellType,
+        charset: session.charset,
         serialConfig: session.serialConfig,
+        localShell: session.localShell,
+        localShellArgs: session.localShellArgs,
+        localShellName: session.localShellName,
+        localShellIcon: session.localShellIcon,
       };
 
-      setActiveTabId(newSession.id);
+      // Schedule the activeTab + tabOrder updates only when creation
+      // actually happens. These nested setStates are idempotent, so
+      // StrictMode's double-invocation is harmless.
+      setActiveTabId(newSessionId);
+      setTabOrder(prevTabOrder => {
+        // Fast path: source is already tracked in tabOrder — splice directly.
+        const directIdx = prevTabOrder.indexOf(sessionId);
+        if (directIdx !== -1) {
+          const next = [...prevTabOrder];
+          next.splice(directIdx + 1, 0, newSessionId);
+          return next;
+        }
+        // Fallback: source is only in the derived tab collections. Rebuild the
+        // effective order (same pattern as reorderTabs) to locate its position.
+        const allTabIds = [
+          ...orphanSessions.map(s => s.id),
+          ...workspaces.map(w => w.id),
+          ...logViews.map(lv => lv.id),
+        ];
+        const allTabIdSet = new Set(allTabIds);
+        const orderedIds = prevTabOrder.filter(id => allTabIdSet.has(id));
+        const orderedIdSet = new Set(orderedIds);
+        const newIds = allTabIds.filter(id => !orderedIdSet.has(id));
+        const currentOrder = [...orderedIds, ...newIds];
+        const sourceIdx = currentOrder.indexOf(sessionId);
+        if (sourceIdx === -1) return [...prevTabOrder, newSessionId];
+        const next = [...currentOrder];
+        next.splice(sourceIdx + 1, 0, newSessionId);
+        return next;
+      });
+
       return [...prevSessions, newSession];
     });
-  }, [setActiveTabId]);
+  }, [orphanSessions, workspaces, logViews, setActiveTabId]);
 
   // Toggle broadcast mode for a workspace
   const toggleBroadcast = useCallback((workspaceId: string) => {
@@ -682,9 +963,11 @@ export const useSessionState = () => {
       ...workspaces.map(w => w.id),
       ...logViews.map(lv => lv.id),
     ];
+    const allTabIdSet = new Set(allTabIds);
     // Filter tabOrder to only include existing tabs, then add any new tabs at the end
-    const orderedIds = tabOrder.filter(id => allTabIds.includes(id));
-    const newIds = allTabIds.filter(id => !orderedIds.includes(id));
+    const orderedIds = tabOrder.filter(id => allTabIdSet.has(id));
+    const orderedIdSet = new Set(orderedIds);
+    const newIds = allTabIds.filter(id => !orderedIdSet.has(id));
     return [...orderedIds, ...newIds];
   }, [orphanSessions, workspaces, logViews, tabOrder]);
 
@@ -698,10 +981,12 @@ export const useSessionState = () => {
         ...workspaces.map(w => w.id),
         ...logViews.map(lv => lv.id),
       ];
+      const allTabIdSet = new Set(allTabIds);
       
       // Build current effective order: existing order + new tabs at end
-      const orderedIds = prevTabOrder.filter(id => allTabIds.includes(id));
-      const newIds = allTabIds.filter(id => !orderedIds.includes(id));
+      const orderedIds = prevTabOrder.filter(id => allTabIdSet.has(id));
+      const orderedIdSet = new Set(orderedIds);
+      const newIds = allTabIds.filter(id => !orderedIdSet.has(id));
       const currentOrder = [...orderedIds, ...newIds];
       
       const draggedIndex = currentOrder.indexOf(draggedId);
@@ -755,8 +1040,11 @@ export const useSessionState = () => {
     closeWorkspace,
     updateSessionStatus,
     createWorkspaceWithHosts,
+    createWorkspaceFromTargets,
     createWorkspaceFromSessions,
     addSessionToWorkspace,
+    appendHostToWorkspace,
+    appendLocalTerminalToWorkspace,
     updateSplitSizes,
     splitSession,
     toggleWorkspaceViewMode,

application/state/useSettingsState.ts

@@ -4,6 +4,7 @@ import {
   STORAGE_KEY_COLOR,
   STORAGE_KEY_SYNC,
   STORAGE_KEY_TERM_THEME,
+  STORAGE_KEY_TERM_FOLLOW_APP_THEME,
   STORAGE_KEY_THEME,
   STORAGE_KEY_TERM_FONT_FAMILY,
   STORAGE_KEY_TERM_FONT_SIZE,
@@ -22,6 +23,8 @@ import {
   STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES,
   STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD,
   STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR,
+  STORAGE_KEY_SFTP_TRANSFER_CONCURRENCY,
+  STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE,
   STORAGE_KEY_EDITOR_WORD_WRAP,
   STORAGE_KEY_SESSION_LOGS_ENABLED,
   STORAGE_KEY_SESSION_LOGS_DIR,
@@ -30,10 +33,14 @@ import {
   STORAGE_KEY_CLOSE_TO_TRAY,
   STORAGE_KEY_GLOBAL_HOTKEY_ENABLED,
   STORAGE_KEY_AUTO_UPDATE_ENABLED,
-  STORAGE_KEY_IMMERSIVE_MODE,
+  STORAGE_KEY_WORKSPACE_FOCUS_STYLE,
+  STORAGE_KEY_SHOW_RECENT_HOSTS,
+  STORAGE_KEY_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT,
+  STORAGE_KEY_SHOW_SFTP_TAB,
 } from '../../infrastructure/config/storageKeys';
 import { DEFAULT_UI_LOCALE, resolveSupportedLocale } from '../../infrastructure/config/i18n';
 import { TERMINAL_THEMES } from '../../infrastructure/config/terminalThemes';
+import { getTerminalThemeForUiTheme } from '../../domain/terminalAppearance';
 import { customThemeStore, useCustomThemes } from '../state/customThemeStore';
 import { DEFAULT_FONT_SIZE } from '../../infrastructure/config/fonts';
 import { DARK_UI_THEMES, LIGHT_UI_THEMES, UiThemeTokens, getUiThemeById } from '../../infrastructure/config/uiThemes';
@@ -65,6 +72,10 @@ const DEFAULT_SFTP_AUTO_SYNC = false;
 const DEFAULT_SFTP_SHOW_HIDDEN_FILES = false;
 const DEFAULT_SFTP_USE_COMPRESSED_UPLOAD = true;
 const DEFAULT_SFTP_AUTO_OPEN_SIDEBAR = false;
+const DEFAULT_SFTP_DEFAULT_VIEW_MODE: 'list' | 'tree' = 'list';
+const DEFAULT_SHOW_RECENT_HOSTS = true;
+const DEFAULT_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT = false;
+const DEFAULT_SHOW_SFTP_TAB = true;
 
 // Editor defaults
 const DEFAULT_EDITOR_WORD_WRAP = false;
@@ -121,7 +132,7 @@ const applyThemeTokens = (
   accentOverride: string,
 ) => {
   const root = window.document.documentElement;
-  // If immersive mode is active (style tag present), it owns the dark/light class — don't override
+  // If immersive override is active (style tag present), it owns the dark/light class — don't override
   if (!document.getElementById('netcatty-immersive-override')) {
     root.classList.remove('light', 'dark');
     root.classList.add(resolvedTheme);
@@ -191,6 +202,17 @@ export const useSettingsState = () => {
   });
   const [syncConfig, setSyncConfig] = useState<SyncConfig | null>(() => localStorageAdapter.read<SyncConfig>(STORAGE_KEY_SYNC));
   const [terminalThemeId, setTerminalThemeId] = useState<string>(() => localStorageAdapter.readString(STORAGE_KEY_TERM_THEME) || DEFAULT_TERMINAL_THEME);
+  const [followAppTerminalTheme, setFollowAppTerminalThemeState] = useState<boolean>(() => {
+    const stored = localStorageAdapter.readString(STORAGE_KEY_TERM_FOLLOW_APP_THEME);
+    if (stored !== null) return stored === 'true';
+    // First time seeing this key. For genuinely fresh installs (no existing
+    // terminal theme in storage) default ON so the terminal matches the app
+    // theme out of the box. For upgrades from an older version (existing
+    // terminal theme present) default OFF to avoid silently overriding the
+    // user's manual choice.
+    const isUpgrade = !!localStorageAdapter.readString(STORAGE_KEY_TERM_THEME);
+    return !isUpgrade;
+  });
   const [terminalFontFamilyId, setTerminalFontFamilyId] = useState<string>(() => localStorageAdapter.readString(STORAGE_KEY_TERM_FONT_FAMILY) || DEFAULT_FONT_FAMILY);
   const [terminalFontSize, setTerminalFontSize] = useState<number>(() => localStorageAdapter.readNumber(STORAGE_KEY_TERM_FONT_SIZE) || DEFAULT_FONT_SIZE);
   const [uiLanguage, setUiLanguage] = useState<UILanguage>(() => {
@@ -239,6 +261,26 @@ export const useSettingsState = () => {
     const stored = readStoredString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR);
     return stored === 'true' ? true : DEFAULT_SFTP_AUTO_OPEN_SIDEBAR;
   });
+  const [sftpDefaultViewMode, setSftpDefaultViewMode] = useState<'list' | 'tree'>(() => {
+    const stored = readStoredString(STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE);
+    return (stored === 'list' || stored === 'tree') ? stored : DEFAULT_SFTP_DEFAULT_VIEW_MODE;
+  });
+  const [showRecentHosts, setShowRecentHostsState] = useState<boolean>(() => {
+    const stored = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_RECENT_HOSTS);
+    return stored ?? DEFAULT_SHOW_RECENT_HOSTS;
+  });
+  const [showOnlyUngroupedHostsInRoot, setShowOnlyUngroupedHostsInRootState] = useState<boolean>(() => {
+    const stored = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT);
+    return stored ?? DEFAULT_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT;
+  });
+  const [showSftpTab, setShowSftpTabState] = useState<boolean>(() => {
+    const stored = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_SFTP_TAB);
+    return stored ?? DEFAULT_SHOW_SFTP_TAB;
+  });
+  const [sftpTransferConcurrency, setSftpTransferConcurrencyState] = useState<number>(() => {
+    const stored = localStorageAdapter.readNumber(STORAGE_KEY_SFTP_TRANSFER_CONCURRENCY);
+    return stored != null && stored >= 1 && stored <= 16 ? stored : 4;
+  });
 
   // Editor Settings
   const [editorWordWrap, setEditorWordWrapState] = useState<boolean>(() => {
@@ -328,19 +370,22 @@ export const useSettingsState = () => {
     }
   }, []);
 
-  const [immersiveMode, setImmersiveModeState] = useState<boolean>(() => {
-    const stored = localStorageAdapter.readString(STORAGE_KEY_IMMERSIVE_MODE);
-    if (stored === null || stored === '') {
-      // Persist default so collectSyncableSettings() can include it
-      localStorageAdapter.writeString(STORAGE_KEY_IMMERSIVE_MODE, 'true');
-      return true;
-    }
-    return stored === 'true';
+
+  const setSftpTransferConcurrency = useCallback((value: number) => {
+    const clamped = Math.max(1, Math.min(16, Math.round(value)));
+    setSftpTransferConcurrencyState(clamped);
+    localStorageAdapter.writeString(STORAGE_KEY_SFTP_TRANSFER_CONCURRENCY, String(clamped));
+    notifySettingsChanged(STORAGE_KEY_SFTP_TRANSFER_CONCURRENCY, clamped);
+  }, [notifySettingsChanged]);
+
+  const [workspaceFocusStyle, setWorkspaceFocusStyleState] = useState<'dim' | 'border'>(() => {
+    const stored = localStorageAdapter.readString(STORAGE_KEY_WORKSPACE_FOCUS_STYLE);
+    return stored === 'border' ? 'border' : 'dim';
   });
-  const setImmersiveMode = useCallback((enabled: boolean) => {
-    setImmersiveModeState(enabled);
-    localStorageAdapter.writeString(STORAGE_KEY_IMMERSIVE_MODE, String(enabled));
-    notifySettingsChanged(STORAGE_KEY_IMMERSIVE_MODE, enabled);
+  const setWorkspaceFocusStyle = useCallback((style: 'dim' | 'border') => {
+    setWorkspaceFocusStyleState(style);
+    localStorageAdapter.writeString(STORAGE_KEY_WORKSPACE_FOCUS_STYLE, style);
+    notifySettingsChanged(STORAGE_KEY_WORKSPACE_FOCUS_STYLE, style);
   }, [notifySettingsChanged]);
 
   const syncAppearanceFromStorage = useCallback(() => {
@@ -433,18 +478,22 @@ export const useSettingsState = () => {
     if (storedCompress === 'true' || storedCompress === 'false') setSftpUseCompressedUpload(storedCompress === 'true');
     const storedAutoOpenSidebar = readStoredString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR);
     if (storedAutoOpenSidebar === 'true' || storedAutoOpenSidebar === 'false') setSftpAutoOpenSidebar(storedAutoOpenSidebar === 'true');
+    const storedDefaultViewMode = readStoredString(STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE);
+    if (storedDefaultViewMode === 'list' || storedDefaultViewMode === 'tree') setSftpDefaultViewMode(storedDefaultViewMode);
+    const storedShowRecentHosts = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_RECENT_HOSTS);
+    setShowRecentHostsState(storedShowRecentHosts ?? DEFAULT_SHOW_RECENT_HOSTS);
+    const storedShowOnlyUngroupedHostsInRoot = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT);
+    setShowOnlyUngroupedHostsInRootState(storedShowOnlyUngroupedHostsInRoot ?? DEFAULT_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT);
+    const storedShowSftpTab = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_SFTP_TAB);
+    setShowSftpTabState(storedShowSftpTab ?? DEFAULT_SHOW_SFTP_TAB);
 
-    // Immersive mode
-    const storedImmersive = readStoredString(STORAGE_KEY_IMMERSIVE_MODE);
-    if (storedImmersive === 'true' || storedImmersive === 'false') {
-      const val = storedImmersive === 'true';
-      setImmersiveModeState(val);
-      notifySettingsChanged(STORAGE_KEY_IMMERSIVE_MODE, val);
-    }
+    // Workspace focus style
+    const storedFocusStyle = readStoredString(STORAGE_KEY_WORKSPACE_FOCUS_STYLE);
+    if (storedFocusStyle === 'dim' || storedFocusStyle === 'border') setWorkspaceFocusStyleState(storedFocusStyle);
 
     // Custom terminal themes
     customThemeStore.loadFromStorage();
-  }, [syncAppearanceFromStorage, syncCustomCssFromStorage, setTerminalSettings, notifySettingsChanged]);
+  }, [syncAppearanceFromStorage, syncCustomCssFromStorage, setTerminalSettings]);
 
   useLayoutEffect(() => {
     const tokens = getUiThemeById(resolvedTheme, resolvedTheme === 'dark' ? darkUiThemeId : lightUiThemeId).tokens;
@@ -526,6 +575,10 @@ export const useSettingsState = () => {
       if (key === STORAGE_KEY_TERM_THEME && typeof value === 'string') {
         setTerminalThemeId(value);
       }
+      if (key === STORAGE_KEY_TERM_FOLLOW_APP_THEME) {
+        const next = value === true || value === 'true';
+        setFollowAppTerminalThemeState((prev) => (prev === next ? prev : next));
+      }
       if (key === STORAGE_KEY_TERM_FONT_FAMILY && typeof value === 'string') {
         setTerminalFontFamilyId(value);
       }
@@ -585,8 +638,16 @@ export const useSettingsState = () => {
       if (key === STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR && typeof value === 'boolean') {
         setSftpAutoOpenSidebar((prev) => (prev === value ? prev : value));
       }
-      if (key === STORAGE_KEY_IMMERSIVE_MODE && typeof value === 'boolean') {
-        setImmersiveModeState((prev) => (prev === value ? prev : value));
+      if (key === STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE && typeof value === 'string') {
+        if (value === 'list' || value === 'tree') {
+          setSftpDefaultViewMode((prev) => (prev === value ? prev : value));
+        }
+      }
+      if (key === STORAGE_KEY_WORKSPACE_FOCUS_STYLE && (value === 'dim' || value === 'border')) {
+        setWorkspaceFocusStyleState((prev) => (prev === value ? prev : value));
+      }
+      if (key === STORAGE_KEY_SFTP_TRANSFER_CONCURRENCY && typeof value === 'number') {
+        setSftpTransferConcurrencyState((prev) => (prev === value ? prev : value));
       }
     });
     return () => {
@@ -621,20 +682,22 @@ export const useSettingsState = () => {
   const settingsSnapshotRef = useRef({
     theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent,
     customCSS, uiFontFamilyId, hotkeyScheme, uiLanguage,
-    terminalThemeId, terminalFontFamilyId, terminalFontSize,
+    terminalThemeId, followAppTerminalTheme, terminalFontFamilyId, terminalFontSize,
     sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles,
-    sftpUseCompressedUpload, sftpAutoOpenSidebar,
+    sftpUseCompressedUpload, sftpAutoOpenSidebar, sftpDefaultViewMode,
+    showRecentHosts, showOnlyUngroupedHostsInRoot, showSftpTab,
     editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat,
-    globalHotkeyEnabled, autoUpdateEnabled, immersiveMode,
+    globalHotkeyEnabled, autoUpdateEnabled,
   });
   settingsSnapshotRef.current = {
     theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent,
     customCSS, uiFontFamilyId, hotkeyScheme, uiLanguage,
-    terminalThemeId, terminalFontFamilyId, terminalFontSize,
+    terminalThemeId, followAppTerminalTheme, terminalFontFamilyId, terminalFontSize,
     sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles,
-    sftpUseCompressedUpload, sftpAutoOpenSidebar,
+    sftpUseCompressedUpload, sftpAutoOpenSidebar, sftpDefaultViewMode,
+    showRecentHosts, showOnlyUngroupedHostsInRoot, showSftpTab,
     editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat,
-    globalHotkeyEnabled, autoUpdateEnabled, immersiveMode,
+    globalHotkeyEnabled, autoUpdateEnabled,
   };
 
   // Listen for storage changes from other windows (cross-window sync)
@@ -711,6 +774,13 @@ export const useSettingsState = () => {
           setTerminalThemeId(e.newValue);
         }
       }
+      // Sync follow-app-theme toggle from other windows
+      if (e.key === STORAGE_KEY_TERM_FOLLOW_APP_THEME && e.newValue) {
+        const next = e.newValue === 'true';
+        if (next !== s.followAppTerminalTheme) {
+          setFollowAppTerminalThemeState(next);
+        }
+      }
       // Sync terminal font family from other windows
       if (e.key === STORAGE_KEY_TERM_FONT_FAMILY && e.newValue) {
         if (e.newValue !== s.terminalFontFamilyId) {
@@ -783,6 +853,30 @@ export const useSettingsState = () => {
           setSftpAutoOpenSidebar(newValue);
         }
       }
+      // Sync SFTP default view mode from other windows
+      if (e.key === STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE && e.newValue) {
+        if ((e.newValue === 'list' || e.newValue === 'tree') && e.newValue !== s.sftpDefaultViewMode) {
+          setSftpDefaultViewMode(e.newValue);
+        }
+      }
+      if (e.key === STORAGE_KEY_SHOW_RECENT_HOSTS && e.newValue !== null) {
+        const newValue = e.newValue === 'true';
+        if (newValue !== s.showRecentHosts) {
+          setShowRecentHostsState(newValue);
+        }
+      }
+      if (e.key === STORAGE_KEY_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT && e.newValue !== null) {
+        const newValue = e.newValue === 'true';
+        if (newValue !== s.showOnlyUngroupedHostsInRoot) {
+          setShowOnlyUngroupedHostsInRootState(newValue);
+        }
+      }
+      if (e.key === STORAGE_KEY_SHOW_SFTP_TAB && e.newValue !== null) {
+        const newValue = e.newValue === 'true';
+        if (newValue !== s.showSftpTab) {
+          setShowSftpTabState(newValue);
+        }
+      }
       // Sync global hotkey enabled setting from other windows
       if (e.key === STORAGE_KEY_GLOBAL_HOTKEY_ENABLED && e.newValue !== null) {
         const newValue = e.newValue === 'true';
@@ -797,11 +891,17 @@ export const useSettingsState = () => {
           setAutoUpdateEnabled(newValue);
         }
       }
-      // Sync immersive mode from other windows
-      if (e.key === STORAGE_KEY_IMMERSIVE_MODE && e.newValue !== null) {
-        const newValue = e.newValue === 'true';
-        if (newValue !== s.immersiveMode) {
-          setImmersiveModeState(newValue);
+      // Sync workspace focus style from other windows
+      if (e.key === STORAGE_KEY_WORKSPACE_FOCUS_STYLE && e.newValue !== null) {
+        if (e.newValue === 'dim' || e.newValue === 'border') {
+          setWorkspaceFocusStyleState(e.newValue);
+        }
+      }
+      // Sync transfer concurrency from other windows
+      if (e.key === STORAGE_KEY_SFTP_TRANSFER_CONCURRENCY && e.newValue !== null) {
+        const num = Number(e.newValue);
+        if (num >= 1 && num <= 16) {
+          setSftpTransferConcurrencyState(num);
         }
       }
     };
@@ -816,6 +916,12 @@ export const useSettingsState = () => {
     notifySettingsChanged(STORAGE_KEY_TERM_THEME, terminalThemeId);
   }, [terminalThemeId, notifySettingsChanged]);
 
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_TERM_FOLLOW_APP_THEME, String(followAppTerminalTheme));
+    if (!persistMountedRef.current) return;
+    notifySettingsChanged(STORAGE_KEY_TERM_FOLLOW_APP_THEME, String(followAppTerminalTheme));
+  }, [followAppTerminalTheme, notifySettingsChanged]);
+
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_TERM_FONT_FAMILY, terminalFontFamilyId);
     if (!persistMountedRef.current) return;
@@ -860,6 +966,27 @@ export const useSettingsState = () => {
     notifySettingsChanged(STORAGE_KEY_HOTKEY_RECORDING, isRecording);
   }, [notifySettingsChanged]);
 
+  const setShowRecentHosts = useCallback((enabled: boolean) => {
+    setShowRecentHostsState(enabled);
+    localStorageAdapter.writeBoolean(STORAGE_KEY_SHOW_RECENT_HOSTS, enabled);
+    if (!persistMountedRef.current) return;
+    notifySettingsChanged(STORAGE_KEY_SHOW_RECENT_HOSTS, enabled);
+  }, [notifySettingsChanged]);
+
+  const setShowOnlyUngroupedHostsInRoot = useCallback((enabled: boolean) => {
+    setShowOnlyUngroupedHostsInRootState(enabled);
+    localStorageAdapter.writeBoolean(STORAGE_KEY_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT, enabled);
+    if (!persistMountedRef.current) return;
+    notifySettingsChanged(STORAGE_KEY_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT, enabled);
+  }, [notifySettingsChanged]);
+
+  const setShowSftpTab = useCallback((enabled: boolean) => {
+    setShowSftpTabState(enabled);
+    localStorageAdapter.writeBoolean(STORAGE_KEY_SHOW_SFTP_TAB, enabled);
+    if (!persistMountedRef.current) return;
+    notifySettingsChanged(STORAGE_KEY_SHOW_SFTP_TAB, enabled);
+  }, [notifySettingsChanged]);
+
   // Apply and persist custom CSS
   useEffect(() => {
     // Always apply CSS to document (needed on mount)
@@ -911,6 +1038,13 @@ export const useSettingsState = () => {
     notifySettingsChanged(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR, sftpAutoOpenSidebar);
   }, [sftpAutoOpenSidebar, notifySettingsChanged]);
 
+  // Persist SFTP default view mode
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE, sftpDefaultViewMode);
+    if (!persistMountedRef.current) return;
+    notifySettingsChanged(STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE, sftpDefaultViewMode);
+  }, [sftpDefaultViewMode, notifySettingsChanged]);
+
   // Persist Session Logs settings
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_SESSION_LOGS_ENABLED, sessionLogsEnabled ? 'true' : 'false');
@@ -1076,12 +1210,21 @@ export const useSettingsState = () => {
   // Subscribe to custom theme changes so editing in-place triggers re-render
   const customThemes = useCustomThemes();
 
-  const currentTerminalTheme = useMemo(
-    () => TERMINAL_THEMES.find(t => t.id === terminalThemeId)
+  const currentTerminalTheme = useMemo(() => {
+    // When "Follow Application Theme" is enabled, pick the terminal theme
+    // whose background matches the active UI theme preset.
+    if (followAppTerminalTheme) {
+      const activeUiThemeId = resolvedTheme === 'dark' ? darkUiThemeId : lightUiThemeId;
+      const mapped = getTerminalThemeForUiTheme(activeUiThemeId);
+      if (mapped) {
+        const found = TERMINAL_THEMES.find(t => t.id === mapped);
+        if (found) return found;
+      }
+    }
+    return TERMINAL_THEMES.find(t => t.id === terminalThemeId)
       || customThemes.find(t => t.id === terminalThemeId)
-      || TERMINAL_THEMES[0],
-    [terminalThemeId, customThemes]
-  );
+      || TERMINAL_THEMES[0];
+  }, [terminalThemeId, customThemes, followAppTerminalTheme, resolvedTheme, lightUiThemeId, darkUiThemeId]);
 
   const updateTerminalSetting = useCallback(<K extends keyof TerminalSettings>(
     key: K,
@@ -1116,6 +1259,8 @@ export const useSettingsState = () => {
     setUiLanguage,
     terminalThemeId,
     setTerminalThemeId,
+    followAppTerminalTheme,
+    setFollowAppTerminalTheme: setFollowAppTerminalThemeState,
     currentTerminalTheme,
     terminalFontFamilyId,
     setTerminalFontFamilyId,
@@ -1145,6 +1290,16 @@ export const useSettingsState = () => {
     setSftpUseCompressedUpload,
     sftpAutoOpenSidebar,
     setSftpAutoOpenSidebar,
+    sftpDefaultViewMode,
+    setSftpDefaultViewMode,
+    showRecentHosts,
+    setShowRecentHosts,
+    showOnlyUngroupedHostsInRoot,
+    setShowOnlyUngroupedHostsInRoot,
+    showSftpTab,
+    setShowSftpTab,
+    sftpTransferConcurrency,
+    setSftpTransferConcurrency,
     // Editor Settings
     editorWordWrap,
     setEditorWordWrap: useCallback((enabled: boolean) => {
@@ -1171,8 +1326,8 @@ export const useSettingsState = () => {
     setGlobalHotkeyEnabled,
     rehydrateAllFromStorage,
     reapplyCurrentTheme,
-    immersiveMode,
-    setImmersiveMode,
+    workspaceFocusStyle,
+    setWorkspaceFocusStyle,
     // Opaque version that changes when any synced setting changes, used by useAutoSync.
     // eslint-disable-next-line react-hooks/exhaustive-deps
     settingsVersion: useMemo(() => Math.random(), [
@@ -1180,8 +1335,9 @@ export const useSettingsState = () => {
       uiFontFamilyId, uiLanguage, customCSS,
       terminalThemeId, terminalFontFamilyId, terminalFontSize, terminalSettings,
       customKeyBindings, editorWordWrap,
-      sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload, sftpAutoOpenSidebar,
-      customThemes, immersiveMode,
+      sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload, sftpAutoOpenSidebar, sftpDefaultViewMode,
+      showRecentHosts, showOnlyUngroupedHostsInRoot, showSftpTab,
+      customThemes, workspaceFocusStyle,
     ]),
   };
 };

application/state/useSftpFileAssociations.ts

@@ -3,10 +3,10 @@
  * Uses a shared state pattern to sync across components
  */
 import { useCallback, useEffect, useSyncExternalStore } from 'react';
-import { STORAGE_KEY_SFTP_FILE_ASSOCIATIONS } from '../../infrastructure/config/storageKeys';
+import { STORAGE_KEY_SFTP_FILE_ASSOCIATIONS, STORAGE_KEY_SFTP_DEFAULT_OPENER } from '../../infrastructure/config/storageKeys';
 import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
 import type { FileAssociation, FileOpenerType, SystemAppInfo } from '../../lib/sftpFileUtils';
-import { getFileExtension } from '../../lib/sftpFileUtils';
+import { getFileExtension, isKnownBinaryFile } from '../../lib/sftpFileUtils';
 
 export interface FileAssociationEntry {
   openerType: FileOpenerType;
@@ -17,10 +17,12 @@ export interface FileAssociationsMap {
   [extension: string]: FileAssociationEntry;
 }
 
-// Shared state and subscribers for cross-component synchronization
+// ---------------------------------------------------------------------------
+// Per-extension associations store
+// ---------------------------------------------------------------------------
+
 const subscribers = new Set<() => void>();
 
-// Use a wrapper object so we can update the reference for useSyncExternalStore
 let snapshotRef: { associations: FileAssociationsMap } = { associations: {} };
 
 function loadFromStorage(): FileAssociationsMap {
@@ -39,7 +41,6 @@ function loadFromStorage(): FileAssociationsMap {
   return {};
 }
 
-// Initialize from storage
 snapshotRef = { associations: loadFromStorage() };
 
 function saveToStorage(associations: FileAssociationsMap) {
@@ -47,7 +48,6 @@ function saveToStorage(associations: FileAssociationsMap) {
 }
 
 function updateAssociations(newAssociations: FileAssociationsMap) {
-  // Create new reference so useSyncExternalStore detects change
   snapshotRef = { associations: newAssociations };
   saveToStorage(newAssociations);
   subscribers.forEach(callback => callback());
@@ -62,15 +62,54 @@ function getSnapshot() {
   return snapshotRef;
 }
 
+// ---------------------------------------------------------------------------
+// Default opener store (separate from per-extension associations)
+// ---------------------------------------------------------------------------
+
+const defaultOpenerSubscribers = new Set<() => void>();
+
+let defaultOpenerSnapshot: { entry: FileAssociationEntry | null } = {
+  entry: localStorageAdapter.read<FileAssociationEntry>(STORAGE_KEY_SFTP_DEFAULT_OPENER) ?? null,
+};
+
+function subscribeDefaultOpener(callback: () => void) {
+  defaultOpenerSubscribers.add(callback);
+  return () => defaultOpenerSubscribers.delete(callback);
+}
+
+function getDefaultOpenerSnapshot() {
+  return defaultOpenerSnapshot;
+}
+
+function updateDefaultOpener(entry: FileAssociationEntry | null) {
+  defaultOpenerSnapshot = { entry };
+  if (entry) {
+    localStorageAdapter.write(STORAGE_KEY_SFTP_DEFAULT_OPENER, entry);
+  } else {
+    localStorageAdapter.remove(STORAGE_KEY_SFTP_DEFAULT_OPENER);
+  }
+  defaultOpenerSubscribers.forEach(callback => callback());
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
 export function useSftpFileAssociations() {
   const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   const associations = snapshot.associations;
 
+  const defaultOpenerState = useSyncExternalStore(subscribeDefaultOpener, getDefaultOpenerSnapshot, getDefaultOpenerSnapshot);
+
   // Listen for storage events from other tabs/windows
   useEffect(() => {
     const handleStorage = (e: StorageEvent) => {
       if (e.key === STORAGE_KEY_SFTP_FILE_ASSOCIATIONS) {
         updateAssociations(loadFromStorage());
+      } else if (e.key === STORAGE_KEY_SFTP_DEFAULT_OPENER) {
+        updateDefaultOpener(
+          localStorageAdapter.read<FileAssociationEntry>(STORAGE_KEY_SFTP_DEFAULT_OPENER) ?? null,
+        );
       }
     };
     window.addEventListener('storage', handleStorage);
@@ -78,18 +117,46 @@ export function useSftpFileAssociations() {
   }, []);
 
   /**
-   * Get the opener entry for a file based on its extension
+   * Get the opener entry for a file based on its extension.
+   * Falls back to the default opener when no per-extension association exists.
    */
   const getOpenerForFile = useCallback((fileName: string): FileAssociationEntry | null => {
     const ext = getFileExtension(fileName);
-    return associations[ext] || null;
-  }, [associations]);
+    if (associations[ext]) return associations[ext];
+    // Fall back to default opener, but skip built-in editor for binary files
+    const fallback = defaultOpenerState.entry;
+    if (fallback && fallback.openerType === 'builtin-editor' && isKnownBinaryFile(fileName)) {
+      return null;
+    }
+    return fallback;
+  }, [associations, defaultOpenerState]);
+
+  /**
+   * Get the default (fallback) opener, if set.
+   */
+  const getDefaultOpener = useCallback((): FileAssociationEntry | null => {
+    return defaultOpenerState.entry;
+  }, [defaultOpenerState]);
+
+  /**
+   * Set the default opener used when no per-extension association exists.
+   */
+  const setDefaultOpener = useCallback((openerType: FileOpenerType, systemApp?: SystemAppInfo) => {
+    updateDefaultOpener({ openerType, systemApp });
+  }, []);
+
+  /**
+   * Remove the default opener.
+   */
+  const removeDefaultOpener = useCallback(() => {
+    updateDefaultOpener(null);
+  }, []);
 
   /**
    * Set the opener type for a specific extension
    */
   const setOpenerForExtension = useCallback((
-    extension: string, 
+    extension: string,
     openerType: FileOpenerType,
     systemApp?: SystemAppInfo
   ) => {
@@ -109,7 +176,7 @@ export function useSftpFileAssociations() {
   }, []);
 
   /**
-   * Get all associations as an array
+   * Get all per-extension associations as an array.
    */
   const getAllAssociations = useCallback((): FileAssociation[] => {
     return Object.entries(associations).map(([extension, entry]: [string, FileAssociationEntry]) => ({
@@ -129,6 +196,9 @@ export function useSftpFileAssociations() {
   return {
     associations,
     getOpenerForFile,
+    getDefaultOpener,
+    setDefaultOpener,
+    removeDefaultOpener,
     setOpenerForExtension,
     removeAssociation,
     getAllAssociations,

application/state/useSftpState.ts

@@ -57,6 +57,7 @@ export const useSftpState = (
     getActivePane,
     updateTab,
     updateActiveTab,
+    clearSelectionsExcept,
     setTabShowHiddenFiles,
     addTab,
     closeTab,
@@ -110,6 +111,30 @@ export const useSftpState = (
     }
   }, []);
 
+  const getPaneByConnectionId = useCallback((connectionId: string) => {
+    for (const tab of leftTabsRef.current.tabs) {
+      if (tab.connection?.id === connectionId) return tab;
+    }
+    for (const tab of rightTabsRef.current.tabs) {
+      if (tab.connection?.id === connectionId) return tab;
+    }
+    return null;
+  }, [leftTabsRef, rightTabsRef]);
+
+  const getTabByConnectionId = useCallback((connectionId: string) => {
+    for (const tab of leftTabsRef.current.tabs) {
+      if (tab.connection?.id === connectionId) {
+        return { side: "left" as const, tabId: tab.id, pane: tab };
+      }
+    }
+    for (const tab of rightTabsRef.current.tabs) {
+      if (tab.connection?.id === connectionId) {
+        return { side: "right" as const, tabId: tab.id, pane: tab };
+      }
+    }
+    return null;
+  }, [leftTabsRef, rightTabsRef]);
+
   // Ref to track pending reconnections to avoid multiple reconnect attempts
   const reconnectingRef = useRef<{ left: boolean; right: boolean }>({
     left: false,
@@ -183,10 +208,14 @@ export const useSftpState = (
     selectAll,
     getFilteredFiles,
     createDirectory,
+    createDirectoryAtPath,
     createFile,
+    createFileAtPath,
     deleteFiles,
     deleteFilesAtPath,
     renameFile,
+    renameFileAtPath,
+    moveEntriesToPath,
     changePermissions,
   } = useSftpPaneActions({
     hosts,
@@ -207,6 +236,7 @@ export const useSftpState = (
     listRemoteFiles,
     handleSessionError,
     isSessionError,
+    clearSelectionsExcept,
     dirCacheTtlMs: DIR_CACHE_TTL_MS,
   });
 
@@ -244,6 +274,7 @@ export const useSftpState = (
     conflicts,
     activeTransfersCount,
     startTransfer,
+    downloadToLocal,
     addExternalUpload,
     updateExternalUpload,
     cancelTransfer,
@@ -254,8 +285,13 @@ export const useSftpState = (
     resolveConflict,
   } = useSftpTransfers({
     getActivePane,
+    getPaneByConnectionId,
+    getTabByConnectionId,
+    updateTab,
     refresh,
+    clearCacheForConnection,
     sftpSessionsRef,
+    connectionCacheKeyMapRef,
     listLocalFiles,
     listRemoteFiles,
     handleSessionError,
@@ -305,15 +341,20 @@ export const useSftpState = (
     toggleSelection,
     rangeSelect,
     clearSelection,
+    clearSelectionsExcept,
     selectAll,
     setFilter,
     setFilenameEncoding,
     setShowHiddenFiles,
     createDirectory,
+    createDirectoryAtPath,
     createFile,
+    createFileAtPath,
     deleteFiles,
     deleteFilesAtPath,
     renameFile,
+    renameFileAtPath,
+    moveEntriesToPath,
     changePermissions,
     readTextFile,
     readBinaryFile,
@@ -324,6 +365,7 @@ export const useSftpState = (
     cancelExternalUpload,
     selectApplication,
     startTransfer,
+    downloadToLocal,
     addExternalUpload,
     updateExternalUpload,
     cancelTransfer,
@@ -332,6 +374,7 @@ export const useSftpState = (
     dismissTransfer,
     resolveConflict,
     getSftpIdForConnection,
+    reportSessionError: handleSessionError,
   });
   methodsRef.current = {
     getFilteredFiles,
@@ -352,15 +395,20 @@ export const useSftpState = (
     toggleSelection,
     rangeSelect,
     clearSelection,
+    clearSelectionsExcept,
     selectAll,
     setFilter,
     setFilenameEncoding,
     setShowHiddenFiles,
     createDirectory,
+    createDirectoryAtPath,
     createFile,
+    createFileAtPath,
     deleteFiles,
     deleteFilesAtPath,
     renameFile,
+    renameFileAtPath,
+    moveEntriesToPath,
     changePermissions,
     readTextFile,
     readBinaryFile,
@@ -371,6 +419,7 @@ export const useSftpState = (
     cancelExternalUpload,
     selectApplication,
     startTransfer,
+    downloadToLocal,
     addExternalUpload,
     updateExternalUpload,
     cancelTransfer,
@@ -379,6 +428,7 @@ export const useSftpState = (
     dismissTransfer,
     resolveConflict,
     getSftpIdForConnection,
+    reportSessionError: handleSessionError,
   };
 
   // Create stable method wrappers that call through methodsRef
@@ -402,6 +452,8 @@ export const useSftpState = (
     toggleSelection: (...args: Parameters<typeof toggleSelection>) => methodsRef.current.toggleSelection(...args),
     rangeSelect: (...args: Parameters<typeof rangeSelect>) => methodsRef.current.rangeSelect(...args),
     clearSelection: (...args: Parameters<typeof clearSelection>) => methodsRef.current.clearSelection(...args),
+    clearSelectionsExcept: (...args: Parameters<typeof clearSelectionsExcept>) =>
+      methodsRef.current.clearSelectionsExcept(...args),
     selectAll: (...args: Parameters<typeof selectAll>) => methodsRef.current.selectAll(...args),
     setFilter: (...args: Parameters<typeof setFilter>) => methodsRef.current.setFilter(...args),
     setFilenameEncoding: (...args: Parameters<typeof setFilenameEncoding>) =>
@@ -409,11 +461,17 @@ export const useSftpState = (
     setShowHiddenFiles: (...args: Parameters<typeof setShowHiddenFiles>) =>
       methodsRef.current.setShowHiddenFiles(...args),
     createDirectory: (...args: Parameters<typeof createDirectory>) => methodsRef.current.createDirectory(...args),
+    createDirectoryAtPath: (...args: Parameters<typeof createDirectoryAtPath>) =>
+      methodsRef.current.createDirectoryAtPath(...args),
     createFile: (...args: Parameters<typeof createFile>) => methodsRef.current.createFile(...args),
+    createFileAtPath: (...args: Parameters<typeof createFileAtPath>) =>
+      methodsRef.current.createFileAtPath(...args),
     deleteFiles: (...args: Parameters<typeof deleteFiles>) => methodsRef.current.deleteFiles(...args),
     deleteFilesAtPath: (...args: Parameters<typeof deleteFilesAtPath>) =>
       methodsRef.current.deleteFilesAtPath(...args),
     renameFile: (...args: Parameters<typeof renameFile>) => methodsRef.current.renameFile(...args),
+    renameFileAtPath: (...args: Parameters<typeof renameFileAtPath>) => methodsRef.current.renameFileAtPath(...args),
+    moveEntriesToPath: (...args: Parameters<typeof moveEntriesToPath>) => methodsRef.current.moveEntriesToPath(...args),
     changePermissions: (...args: Parameters<typeof changePermissions>) => methodsRef.current.changePermissions(...args),
     readTextFile: (...args: Parameters<typeof readTextFile>) => methodsRef.current.readTextFile(...args),
     readBinaryFile: (...args: Parameters<typeof readBinaryFile>) => methodsRef.current.readBinaryFile(...args),
@@ -425,6 +483,7 @@ export const useSftpState = (
     cancelExternalUpload: () => methodsRef.current.cancelExternalUpload(),
     selectApplication: () => methodsRef.current.selectApplication(),
     startTransfer: (...args: Parameters<typeof startTransfer>) => methodsRef.current.startTransfer(...args),
+    downloadToLocal: (...args: Parameters<typeof downloadToLocal>) => methodsRef.current.downloadToLocal(...args),
     addExternalUpload: (...args: Parameters<typeof addExternalUpload>) => methodsRef.current.addExternalUpload(...args),
     updateExternalUpload: (...args: Parameters<typeof updateExternalUpload>) => methodsRef.current.updateExternalUpload(...args),
     cancelTransfer: (...args: Parameters<typeof cancelTransfer>) => methodsRef.current.cancelTransfer(...args),
@@ -433,6 +492,7 @@ export const useSftpState = (
     dismissTransfer: (...args: Parameters<typeof dismissTransfer>) => methodsRef.current.dismissTransfer(...args),
     resolveConflict: (...args: Parameters<typeof resolveConflict>) => methodsRef.current.resolveConflict(...args),
     getSftpIdForConnection: (...args: Parameters<typeof getSftpIdForConnection>) => methodsRef.current.getSftpIdForConnection(...args),
+    reportSessionError: (...args: Parameters<typeof handleSessionError>) => methodsRef.current.reportSessionError(...args),
     activeFileWatchCountRef,
   }), [activeFileWatchCountRef]); // activeFileWatchCountRef is a stable ref
 

application/state/useStoredBoolean.ts

@@ -1,8 +1,10 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
 
 /**
  * Hook for persisting a boolean value to localStorage.
+ * Syncs across components in the same window via a custom event,
+ * and across windows via the native storage event.
  * @param storageKey - The key to use for localStorage
  * @param fallback - The default value if no stored value exists (defaults to false)
  * @returns A tuple of [value, setValue] similar to useState
@@ -16,9 +18,38 @@ export const useStoredBoolean = (
         return stored ?? fallback;
     });
 
-    useEffect(() => {
-        localStorageAdapter.writeBoolean(storageKey, value);
-    }, [storageKey, value]);
+    const setAndPersist = useCallback((next: boolean | ((prev: boolean) => boolean)) => {
+        setValue((prev) => {
+            const resolved = typeof next === "function" ? next(prev) : next;
+            localStorageAdapter.writeBoolean(storageKey, resolved);
+            // Notify other same-window consumers
+            window.dispatchEvent(
+                new CustomEvent("stored-boolean-change", { detail: { key: storageKey, value: resolved } }),
+            );
+            return resolved;
+        });
+    }, [storageKey]);
 
-    return [value, setValue] as const;
+    useEffect(() => {
+        // Sync from other components in the same window
+        const handleCustom = (e: Event) => {
+            const { key, value: newValue } = (e as CustomEvent).detail;
+            if (key === storageKey) setValue(newValue);
+        };
+        // Sync from other windows
+        const handleStorage = (e: StorageEvent) => {
+            if (e.key === storageKey) {
+                const stored = localStorageAdapter.readBoolean(storageKey);
+                setValue(stored ?? fallback);
+            }
+        };
+        window.addEventListener("stored-boolean-change", handleCustom);
+        window.addEventListener("storage", handleStorage);
+        return () => {
+            window.removeEventListener("stored-boolean-change", handleCustom);
+            window.removeEventListener("storage", handleStorage);
+        };
+    }, [storageKey, fallback]);
+
+    return [value, setAndPersist] as const;
 };

application/state/useStoredNumber.ts

@@ -0,0 +1,29 @@
+import { useCallback, useState } from "react";
+import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
+
+/**
+ * Hook for reading a number from localStorage with lazy persistence.
+ * Unlike useStoredString/useStoredBoolean, this hook does NOT auto-persist
+ * on every state change — call `persist()` explicitly when ready (e.g. on
+ * mouseup after a drag). This avoids flooding localStorage during
+ * high-frequency updates like resize drags.
+ */
+export const useStoredNumber = (
+    storageKey: string,
+    fallback: number,
+    clamp?: { min: number; max: number },
+) => {
+    const [value, setValue] = useState<number>(() => {
+        const stored = localStorageAdapter.readNumber(storageKey);
+        if (stored === null) return fallback;
+        if (clamp) return Math.max(clamp.min, Math.min(clamp.max, stored));
+        return stored;
+    });
+
+    const persist = useCallback(
+        (v: number) => localStorageAdapter.writeNumber(storageKey, v),
+        [storageKey],
+    );
+
+    return [value, setValue, persist] as const;
+};

application/state/useTerminalBackend.ts

@@ -128,6 +128,22 @@ export const useTerminalBackend = () => {
     return bridge.getSessionPwd(sessionId);
   }, []);
 
+  const getSessionRemoteInfo = useCallback(async (sessionId: string) => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.getSessionRemoteInfo) {
+      return { success: false, error: 'getSessionRemoteInfo unavailable' };
+    }
+    return bridge.getSessionRemoteInfo(sessionId);
+  }, []);
+
+  const getSessionDistroInfo = useCallback(async (sessionId: string) => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.getSessionDistroInfo) {
+      return { success: false, error: 'getSessionDistroInfo unavailable' };
+    }
+    return bridge.getSessionDistroInfo(sessionId);
+  }, []);
+
   const getServerStats = useCallback(async (sessionId: string) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.getServerStats) return { success: false, error: 'getServerStats unavailable' };
@@ -150,6 +166,8 @@ export const useTerminalBackend = () => {
     listSerialPorts,
     execCommand,
     getSessionPwd,
+    getSessionRemoteInfo,
+    getSessionDistroInfo,
     getServerStats,
     writeToSession,
     resizeSession,

application/state/useUpdateCheck.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { checkForUpdates, getReleaseUrl, type ReleaseInfo, type UpdateCheckResult } from '../../infrastructure/services/updateService';
 import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
-import { STORAGE_KEY_UPDATE_DISMISSED_VERSION, STORAGE_KEY_UPDATE_LAST_CHECK, STORAGE_KEY_UPDATE_LATEST_RELEASE, STORAGE_KEY_AUTO_UPDATE_ENABLED } from '../../infrastructure/config/storageKeys';
+import { STORAGE_KEY_UPDATE_DISMISSED_VERSION, STORAGE_KEY_UPDATE_LAST_CHECK, STORAGE_KEY_UPDATE_LATEST_RELEASE, STORAGE_KEY_AUTO_UPDATE_ENABLED, STORAGE_KEY_DEBUG_UPDATE_DEMO } from '../../infrastructure/config/storageKeys';
 import { netcattyBridge } from '../../infrastructure/services/netcattyBridge';
 
 // Check for updates at most once per hour
@@ -13,8 +13,7 @@ const UPDATE_CHECK_INTERVAL_MS = 60 * 60 * 1000;
 // arrives after 8s the duplicate check is avoided.
 const STARTUP_CHECK_DELAY_MS = 8000;
 // Enable demo mode for development (set via localStorage: localStorage.setItem('debug.updateDemo', '1'))
-const IS_UPDATE_DEMO_MODE = typeof window !== 'undefined' && 
-  window.localStorage?.getItem('debug.updateDemo') === '1';
+const IS_UPDATE_DEMO_MODE = localStorageAdapter.readString(STORAGE_KEY_DEBUG_UPDATE_DEMO) === '1';
 
 // Debug logging for update checks (no-op in production)
 const debugLog = (..._args: unknown[]) => {};
@@ -44,6 +43,8 @@ export interface UseUpdateCheckResult {
   dismissUpdate: () => void;
   openReleasePage: () => void;
   installUpdate: () => void;
+  startDownload: () => void;
+  isUpdateDemoMode: boolean;
 }
 
 /**
@@ -514,6 +515,46 @@ export function useUpdateCheck(options?: { autoUpdateEnabled?: boolean }): UseUp
     netcattyBridge.get()?.installUpdate?.();
   }, []);
 
+  const startDownload = useCallback(async () => {
+    if (autoDownloadStatusRef.current === 'downloading' || autoDownloadStatusRef.current === 'ready') return;
+    const bridge = netcattyBridge.get();
+    try {
+      const checkResult = await bridge?.checkForUpdate?.();
+      if (!checkResult || checkResult.checking === true || checkResult.ready === true || checkResult.downloading === true) return;
+      if (checkResult.supported === false) {
+        openReleasePage();
+        return;
+      }
+      if (checkResult.available === false) {
+        openReleasePage();
+        return;
+      }
+    } catch {
+      return;
+    }
+    setUpdateState((prev) => ({
+      ...prev,
+      autoDownloadStatus: 'downloading',
+      downloadPercent: 0,
+      downloadError: null,
+    }));
+    void bridge?.downloadUpdate?.().then((res) => {
+      if (res && !res.success) {
+        setUpdateState((prev) => ({
+          ...prev,
+          autoDownloadStatus: 'error',
+          downloadError: res.error || 'Download failed',
+        }));
+      }
+    }).catch(() => {
+      setUpdateState((prev) => ({
+        ...prev,
+        autoDownloadStatus: 'error',
+        downloadError: 'Download failed',
+      }));
+    });
+  }, [openReleasePage]);
+
   // Startup check with delay - runs once on mount
   useEffect(() => {
     debugLog('Startup check effect mounted, IS_UPDATE_DEMO_MODE:', IS_UPDATE_DEMO_MODE);
@@ -653,5 +694,7 @@ export function useUpdateCheck(options?: { autoUpdateEnabled?: boolean }): UseUp
     dismissUpdate,
     openReleasePage,
     installUpdate,
+    startDownload,
+    isUpdateDemoMode: IS_UPDATE_DEMO_MODE,
   };
 }

application/state/useVaultState.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { normalizeDistroId, sanitizeHost } from "../../domain/host";
 import {
   ConnectionLog,
+  GroupConfig,
   Host,
   Identity,
   KeyCategory,
@@ -17,6 +18,7 @@ import {
 } from "../../infrastructure/config/defaultData";
 import {
   STORAGE_KEY_CONNECTION_LOGS,
+  STORAGE_KEY_GROUP_CONFIGS,
   STORAGE_KEY_GROUPS,
   STORAGE_KEY_HOSTS,
   STORAGE_KEY_IDENTITIES,
@@ -30,9 +32,11 @@ import {
 } from "../../infrastructure/config/storageKeys";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
 import {
+  decryptGroupConfigs,
   decryptHosts,
   decryptIdentities,
   decryptKeys,
+  encryptGroupConfigs,
   encryptHosts,
   encryptIdentities,
   encryptKeys,
@@ -46,6 +50,7 @@ type ExportableVaultData = {
   customGroups: string[];
   snippetPackages?: string[];
   knownHosts?: KnownHost[];
+  groupConfigs?: GroupConfig[];
 };
 
 type LegacyKeyRecord = Record<string, unknown> & { id?: string; source?: string };
@@ -97,6 +102,7 @@ const safeParse = <T,>(value: string | null): T | null => {
 };
 
 export const useVaultState = () => {
+  const [isInitialized, setIsInitialized] = useState(false);
   const [hosts, setHosts] = useState<Host[]>([]);
   const [keys, setKeys] = useState<SSHKey[]>([]);
   const [identities, setIdentities] = useState<Identity[]>([]);
@@ -107,6 +113,7 @@ export const useVaultState = () => {
   const [shellHistory, setShellHistory] = useState<ShellHistoryEntry[]>([]);
   const [connectionLogs, setConnectionLogs] = useState<ConnectionLog[]>([]);
   const [managedSources, setManagedSources] = useState<ManagedSource[]>([]);
+  const [groupConfigs, setGroupConfigs] = useState<GroupConfig[]>([]);
 
   // Write-version counters prevent out-of-order async writes from overwriting
   // newer data.  Each update bumps the counter; the .then() callback only
@@ -114,6 +121,7 @@ export const useVaultState = () => {
   const hostsWriteVersion = useRef(0);
   const keysWriteVersion = useRef(0);
   const identitiesWriteVersion = useRef(0);
+  const groupConfigsWriteVersion = useRef(0);
 
   // Read-sequence counters for cross-window storage events.  Each incoming
   // event bumps the counter; the async decrypt callback only applies state if
@@ -122,6 +130,7 @@ export const useVaultState = () => {
   const hostsReadSeq = useRef(0);
   const keysReadSeq = useRef(0);
   const identitiesReadSeq = useRef(0);
+  const groupConfigsReadSeq = useRef(0);
 
   const updateHosts = useCallback((data: Host[]) => {
     const cleaned = data.map(sanitizeHost);
@@ -176,6 +185,15 @@ export const useVaultState = () => {
     localStorageAdapter.write(STORAGE_KEY_MANAGED_SOURCES, data);
   }, []);
 
+  const updateGroupConfigs = useCallback((data: GroupConfig[]) => {
+    setGroupConfigs(data);
+    const ver = ++groupConfigsWriteVersion.current;
+    encryptGroupConfigs(data).then((enc) => {
+      if (ver === groupConfigsWriteVersion.current)
+        localStorageAdapter.write(STORAGE_KEY_GROUP_CONFIGS, enc);
+    });
+  }, []);
+
   const clearVaultData = useCallback(() => {
     updateHosts([]);
     updateKeys([]);
@@ -185,6 +203,7 @@ export const useVaultState = () => {
     updateCustomGroups([]);
     updateKnownHosts([]);
     updateManagedSources([]);
+    updateGroupConfigs([]);
     localStorageAdapter.remove(STORAGE_KEY_LEGACY_KEYS);
   }, [
     updateHosts,
@@ -195,6 +214,7 @@ export const useVaultState = () => {
     updateCustomGroups,
     updateKnownHosts,
     updateManagedSources,
+    updateGroupConfigs,
   ]);
 
   const addShellHistoryEntry = useCallback(
@@ -320,116 +340,134 @@ export const useVaultState = () => {
 
   useEffect(() => {
     const init = async () => {
-      const savedHosts = localStorageAdapter.read<Host[]>(STORAGE_KEY_HOSTS);
+      try {
+        const savedHosts = localStorageAdapter.read<Host[]>(STORAGE_KEY_HOSTS);
 
-      if (savedHosts) {
-        // Capture version before the async gap so that any write occurring
-        // during decryption (storage event, user edit) advances the counter
-        // and causes this stale result to be discarded.
-        const ver = ++hostsWriteVersion.current;
-        const decrypted = await decryptHosts(savedHosts);
-        if (ver === hostsWriteVersion.current) {
-          const sanitized = decrypted.map(sanitizeHost);
-          setHosts(sanitized);
-          encryptHosts(sanitized).then((enc) => {
-            if (ver === hostsWriteVersion.current)
-              localStorageAdapter.write(STORAGE_KEY_HOSTS, enc);
-          });
+        if (savedHosts) {
+          // Capture version before the async gap so that any write occurring
+          // during decryption (storage event, user edit) advances the counter
+          // and causes this stale result to be discarded.
+          const ver = ++hostsWriteVersion.current;
+          const decrypted = await decryptHosts(savedHosts);
+          if (ver === hostsWriteVersion.current) {
+            const sanitized = decrypted.map(sanitizeHost);
+            setHosts(sanitized);
+            encryptHosts(sanitized).then((enc) => {
+              if (ver === hostsWriteVersion.current)
+                localStorageAdapter.write(STORAGE_KEY_HOSTS, enc);
+            });
+          }
+        } else {
+          updateHosts(INITIAL_HOSTS);
         }
-      } else {
-        updateHosts(INITIAL_HOSTS);
-      }
 
-      // Read keys fresh here (not before the hosts await) so we don't apply
-      // a stale snapshot if keys were updated during host decryption.
-      const savedKeysRaw = localStorageAdapter.read<unknown[]>(STORAGE_KEY_KEYS);
+        // Read keys fresh here (not before the hosts await) so we don't apply
+        // a stale snapshot if keys were updated during host decryption.
+        const savedKeysRaw = localStorageAdapter.read<unknown[]>(STORAGE_KEY_KEYS);
 
-      // Migrate old keys to new format with source/category fields
-      if (savedKeysRaw?.length) {
-        const migratedKeys: SSHKey[] = [];
-        const legacyKeys: LegacyKeyRecord[] = [];
+        // Migrate old keys to new format with source/category fields
+        if (savedKeysRaw?.length) {
+          const migratedKeys: SSHKey[] = [];
+          const legacyKeys: LegacyKeyRecord[] = [];
 
-        for (const entry of savedKeysRaw) {
-          const record =
-            entry && typeof entry === "object" ? (entry as LegacyKeyRecord) : null;
-          if (!record) continue;
+          for (const entry of savedKeysRaw) {
+            const record =
+              entry && typeof entry === "object" ? (entry as LegacyKeyRecord) : null;
+            if (!record) continue;
 
-          if (isLegacyUnsupportedKey(record)) {
-            legacyKeys.push(record);
-            continue;
+            if (isLegacyUnsupportedKey(record)) {
+              legacyKeys.push(record);
+              continue;
+            }
+
+            migratedKeys.push(migrateKey(record as Partial<SSHKey>));
           }
 
-          migratedKeys.push(migrateKey(record as Partial<SSHKey>));
+          // Decrypt sensitive fields (passphrase, privateKey)
+          const keyVer = ++keysWriteVersion.current;
+          const decryptedKeys = await decryptKeys(migratedKeys);
+          if (keyVer === keysWriteVersion.current) {
+            setKeys(decryptedKeys);
+            encryptKeys(decryptedKeys).then((enc) => {
+              if (keyVer === keysWriteVersion.current)
+                localStorageAdapter.write(STORAGE_KEY_KEYS, enc);
+            });
+          }
+          if (legacyKeys.length) {
+            localStorageAdapter.write(STORAGE_KEY_LEGACY_KEYS, legacyKeys);
+          }
         }
 
-        // Decrypt sensitive fields (passphrase, privateKey)
-        const keyVer = ++keysWriteVersion.current;
-        const decryptedKeys = await decryptKeys(migratedKeys);
-        if (keyVer === keysWriteVersion.current) {
-          setKeys(decryptedKeys);
-          encryptKeys(decryptedKeys).then((enc) => {
-            if (keyVer === keysWriteVersion.current)
-              localStorageAdapter.write(STORAGE_KEY_KEYS, enc);
-          });
+        // Read identities fresh here (not before the hosts/keys awaits) so we
+        // don't apply a stale snapshot if identities were updated during prior decryption.
+        const savedIdentities =
+          localStorageAdapter.read<Identity[]>(STORAGE_KEY_IDENTITIES);
+        if (savedIdentities) {
+          const idVer = ++identitiesWriteVersion.current;
+          const decryptedIds = await decryptIdentities(savedIdentities);
+          if (idVer === identitiesWriteVersion.current) {
+            setIdentities(decryptedIds);
+            encryptIdentities(decryptedIds).then((enc) => {
+              if (idVer === identitiesWriteVersion.current)
+                localStorageAdapter.write(STORAGE_KEY_IDENTITIES, enc);
+            });
+          }
         }
-        if (legacyKeys.length) {
-          localStorageAdapter.write(STORAGE_KEY_LEGACY_KEYS, legacyKeys);
+
+        // Read remaining non-encrypted data fresh after all async gaps above
+        const savedGroups = localStorageAdapter.read<string[]>(STORAGE_KEY_GROUPS);
+        const savedSnippets =
+          localStorageAdapter.read<Snippet[]>(STORAGE_KEY_SNIPPETS);
+        const savedSnippetPackages = localStorageAdapter.read<string[]>(
+          STORAGE_KEY_SNIPPET_PACKAGES,
+        );
+
+        if (savedSnippets) setSnippets(savedSnippets);
+        else updateSnippets(INITIAL_SNIPPETS);
+
+        if (savedGroups) setCustomGroups(savedGroups);
+        if (savedSnippetPackages) setSnippetPackages(savedSnippetPackages);
+
+        // Load known hosts
+        const savedKnownHosts = localStorageAdapter.read<KnownHost[]>(
+          STORAGE_KEY_KNOWN_HOSTS,
+        );
+        if (savedKnownHosts) setKnownHosts(savedKnownHosts);
+
+        // Load shell history
+        const savedShellHistory = localStorageAdapter.read<ShellHistoryEntry[]>(
+          STORAGE_KEY_SHELL_HISTORY,
+        );
+        if (savedShellHistory) setShellHistory(savedShellHistory);
+
+        // Load connection logs
+        const savedConnectionLogs = localStorageAdapter.read<ConnectionLog[]>(
+          STORAGE_KEY_CONNECTION_LOGS,
+        );
+        if (savedConnectionLogs) setConnectionLogs(savedConnectionLogs);
+
+        // Load managed sources
+        const savedManagedSources = localStorageAdapter.read<ManagedSource[]>(
+          STORAGE_KEY_MANAGED_SOURCES,
+        );
+        if (savedManagedSources) setManagedSources(savedManagedSources);
+
+        // Load group configs
+        const savedGroupConfigs = localStorageAdapter.read<GroupConfig[]>(STORAGE_KEY_GROUP_CONFIGS);
+        if (savedGroupConfigs) {
+          const gcVer = ++groupConfigsWriteVersion.current;
+          const decryptedGC = await decryptGroupConfigs(savedGroupConfigs);
+          if (gcVer === groupConfigsWriteVersion.current) {
+            setGroupConfigs(decryptedGC);
+            encryptGroupConfigs(decryptedGC).then((enc) => {
+              if (gcVer === groupConfigsWriteVersion.current)
+                localStorageAdapter.write(STORAGE_KEY_GROUP_CONFIGS, enc);
+            });
+          }
         }
+      } finally {
+        setIsInitialized(true);
       }
-
-      // Read identities fresh here (not before the hosts/keys awaits) so we
-      // don't apply a stale snapshot if identities were updated during prior decryption.
-      const savedIdentities =
-        localStorageAdapter.read<Identity[]>(STORAGE_KEY_IDENTITIES);
-      if (savedIdentities) {
-        const idVer = ++identitiesWriteVersion.current;
-        const decryptedIds = await decryptIdentities(savedIdentities);
-        if (idVer === identitiesWriteVersion.current) {
-          setIdentities(decryptedIds);
-          encryptIdentities(decryptedIds).then((enc) => {
-            if (idVer === identitiesWriteVersion.current)
-              localStorageAdapter.write(STORAGE_KEY_IDENTITIES, enc);
-          });
-        }
-      }
-
-      // Read remaining non-encrypted data fresh after all async gaps above
-      const savedGroups = localStorageAdapter.read<string[]>(STORAGE_KEY_GROUPS);
-      const savedSnippets =
-        localStorageAdapter.read<Snippet[]>(STORAGE_KEY_SNIPPETS);
-      const savedSnippetPackages = localStorageAdapter.read<string[]>(
-        STORAGE_KEY_SNIPPET_PACKAGES,
-      );
-
-      if (savedSnippets) setSnippets(savedSnippets);
-      else updateSnippets(INITIAL_SNIPPETS);
-
-      if (savedGroups) setCustomGroups(savedGroups);
-      if (savedSnippetPackages) setSnippetPackages(savedSnippetPackages);
-
-      // Load known hosts
-      const savedKnownHosts = localStorageAdapter.read<KnownHost[]>(
-        STORAGE_KEY_KNOWN_HOSTS,
-      );
-      if (savedKnownHosts) setKnownHosts(savedKnownHosts);
-
-      // Load shell history
-      const savedShellHistory = localStorageAdapter.read<ShellHistoryEntry[]>(
-        STORAGE_KEY_SHELL_HISTORY,
-      );
-      if (savedShellHistory) setShellHistory(savedShellHistory);
-
-      // Load connection logs
-      const savedConnectionLogs = localStorageAdapter.read<ConnectionLog[]>(
-        STORAGE_KEY_CONNECTION_LOGS,
-      );
-      if (savedConnectionLogs) setConnectionLogs(savedConnectionLogs);
-
-      // Load managed sources
-      const savedManagedSources = localStorageAdapter.read<ManagedSource[]>(
-        STORAGE_KEY_MANAGED_SOURCES,
-      );
-      if (savedManagedSources) setManagedSources(savedManagedSources);
     };
 
     init();
@@ -529,6 +567,19 @@ export const useVaultState = () => {
       if (key === STORAGE_KEY_MANAGED_SOURCES) {
         const next = safeParse<ManagedSource[]>(event.newValue) ?? [];
         setManagedSources(next);
+        return;
+      }
+
+      if (key === STORAGE_KEY_GROUP_CONFIGS) {
+        const next = safeParse<GroupConfig[]>(event.newValue) ?? [];
+        ++groupConfigsWriteVersion.current;
+        const seq = ++groupConfigsReadSeq.current;
+        const writeAtStart = groupConfigsWriteVersion.current;
+        decryptGroupConfigs(next).then((dec) => {
+          if (seq === groupConfigsReadSeq.current && writeAtStart === groupConfigsWriteVersion.current)
+            setGroupConfigs(dec);
+        });
+        return;
       }
     };
 
@@ -536,6 +587,20 @@ export const useVaultState = () => {
     return () => window.removeEventListener("storage", handleStorage);
   }, []);
 
+  const updateHostLastConnected = useCallback((hostId: string) => {
+    setHosts((prev) => {
+      const next = prev.map((h) =>
+        h.id === hostId ? { ...h, lastConnectedAt: Date.now() } : h,
+      );
+      const ver = ++hostsWriteVersion.current;
+      encryptHosts(next).then((enc) => {
+        if (ver === hostsWriteVersion.current)
+          localStorageAdapter.write(STORAGE_KEY_HOSTS, enc);
+      });
+      return next;
+    });
+  }, []);
+
   const updateHostDistro = useCallback((hostId: string, distro: string) => {
     const normalized = normalizeDistroId(distro);
     setHosts((prev) => {
@@ -560,8 +625,9 @@ export const useVaultState = () => {
       customGroups,
       snippetPackages,
       knownHosts,
+      groupConfigs,
     }),
-    [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts],
+    [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts, groupConfigs],
   );
 
   const importData = useCallback(
@@ -573,6 +639,7 @@ export const useVaultState = () => {
       if (payload.customGroups) updateCustomGroups(payload.customGroups);
       if (payload.snippetPackages) updateSnippetPackages(payload.snippetPackages);
       if (payload.knownHosts) updateKnownHosts(payload.knownHosts);
+      if (Array.isArray(payload.groupConfigs)) updateGroupConfigs(payload.groupConfigs);
     },
     [
       updateHosts,
@@ -582,6 +649,7 @@ export const useVaultState = () => {
       updateCustomGroups,
       updateSnippetPackages,
       updateKnownHosts,
+      updateGroupConfigs,
     ],
   );
 
@@ -594,6 +662,7 @@ export const useVaultState = () => {
   );
 
   return {
+    isInitialized,
     hosts,
     keys,
     identities,
@@ -604,6 +673,7 @@ export const useVaultState = () => {
     shellHistory,
     connectionLogs,
     managedSources,
+    groupConfigs,
     updateHosts,
     updateKeys,
     updateIdentities,
@@ -612,6 +682,7 @@ export const useVaultState = () => {
     updateCustomGroups,
     updateKnownHosts,
     updateManagedSources,
+    updateGroupConfigs,
     addShellHistoryEntry,
     clearShellHistory,
     addConnectionLog,
@@ -620,6 +691,7 @@ export const useVaultState = () => {
     deleteConnectionLog,
     clearUnsavedConnectionLogs,
     updateHostDistro,
+    updateHostLastConnected,
     convertKnownHostToHost,
     exportData,
     importDataFromString,

application/syncPayload.ts

@@ -8,15 +8,18 @@
  */
 
 import type {
+  GroupConfig,
   Host,
   Identity,
   KnownHost,
   PortForwardingRule,
+  SftpBookmark,
   Snippet,
   SSHKey,
-} from './models';
-import type { SyncPayload } from './sync';
+} from '../domain/models';
+import type { SyncPayload } from '../domain/sync';
 import { localStorageAdapter } from '../infrastructure/persistence/localStorageAdapter';
+import { rehydrateGlobalBookmarks } from '../components/sftp/hooks/useGlobalSftpBookmarks';
 import {
   STORAGE_KEY_THEME,
   STORAGE_KEY_UI_THEME_LIGHT,
@@ -37,8 +40,11 @@ import {
   STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES,
   STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD,
   STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR,
+  STORAGE_KEY_SFTP_GLOBAL_BOOKMARKS,
   STORAGE_KEY_CUSTOM_THEMES,
-  STORAGE_KEY_IMMERSIVE_MODE,
+  STORAGE_KEY_SHOW_RECENT_HOSTS,
+  STORAGE_KEY_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT,
+  STORAGE_KEY_SHOW_SFTP_TAB,
 } from '../infrastructure/config/storageKeys';
 
 // ---------------------------------------------------------------------------
@@ -54,6 +60,30 @@ export interface SyncableVaultData {
   customGroups: string[];
   snippetPackages?: string[];
   knownHosts: KnownHost[];
+  groupConfigs?: GroupConfig[];
+}
+
+/**
+ * Returns true when the payload contains any meaningful user data worth
+ * protecting or syncing.
+ */
+export function hasMeaningfulSyncData(payload: SyncPayload): boolean {
+  const hasEntities =
+    (payload.hosts?.length ?? 0) > 0 ||
+    (payload.keys?.length ?? 0) > 0 ||
+    (payload.snippets?.length ?? 0) > 0 ||
+    (payload.identities?.length ?? 0) > 0 ||
+    (payload.customGroups?.length ?? 0) > 0 ||
+    (payload.snippetPackages?.length ?? 0) > 0 ||
+    (payload.portForwardingRules?.length ?? 0) > 0 ||
+    (payload.knownHosts?.length ?? 0) > 0 ||
+    (payload.groupConfigs?.length ?? 0) > 0;
+
+  if (hasEntities) return true;
+
+  return Boolean(
+    payload.settings && Object.values(payload.settings).some((value) => value !== undefined),
+  );
 }
 
 /** Callbacks used by `applySyncPayload` to import data into local state. */
@@ -78,7 +108,10 @@ const SYNCABLE_TERMINAL_KEYS = [
   'smoothScrolling',
   'rightClickBehavior', 'copyOnSelect', 'middleClickPaste', 'wordSeparators',
   'linkModifier', 'keywordHighlightEnabled', 'keywordHighlightRules',
-  'keepaliveInterval', 'disableBracketedPaste', 'osc52Clipboard',
+  'keepaliveInterval', 'disableBracketedPaste', 'clearWipesScrollback',
+  'preserveSelectionOnInput', 'osc52Clipboard',
+  'autocompleteEnabled', 'autocompleteGhostText', 'autocompletePopupMenu',
+  'autocompleteDebounceMs', 'autocompleteMinChars', 'autocompleteMaxSuggestions',
 ] as const;
 
 /**
@@ -159,9 +192,17 @@ export function collectSyncableSettings(): SyncPayload['settings'] {
   const autoOpenSidebar = localStorageAdapter.readString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR);
   if (autoOpenSidebar === 'true' || autoOpenSidebar === 'false') settings.sftpAutoOpenSidebar = autoOpenSidebar === 'true';
 
-  // Immersive mode
-  const immersive = localStorageAdapter.readString(STORAGE_KEY_IMMERSIVE_MODE);
-  if (immersive === 'true' || immersive === 'false') settings.immersiveMode = immersive === 'true';
+  // SFTP Bookmarks (global only — local bookmarks are device-specific)
+  const globalBookmarks = localStorageAdapter.read<SftpBookmark[]>(STORAGE_KEY_SFTP_GLOBAL_BOOKMARKS);
+  if (globalBookmarks && Array.isArray(globalBookmarks)) settings.sftpGlobalBookmarks = globalBookmarks;
+
+
+  const showRecent = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_RECENT_HOSTS);
+  if (showRecent != null) settings.showRecentHosts = showRecent;
+  const showOnlyUngroupedHostsInRoot = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT);
+  if (showOnlyUngroupedHostsInRoot != null) settings.showOnlyUngroupedHostsInRoot = showOnlyUngroupedHostsInRoot;
+  const showSftpTab = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_SFTP_TAB);
+  if (showSftpTab != null) settings.showSftpTab = showSftpTab;
 
   return Object.keys(settings).length > 0 ? settings : undefined;
 }
@@ -222,8 +263,20 @@ function applySyncableSettings(settings: NonNullable<SyncPayload['settings']>):
   if (settings.sftpUseCompressedUpload != null) localStorageAdapter.writeString(STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD, String(settings.sftpUseCompressedUpload));
   if (settings.sftpAutoOpenSidebar != null) localStorageAdapter.writeString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR, String(settings.sftpAutoOpenSidebar));
 
-  // Immersive mode
-  if (settings.immersiveMode != null) localStorageAdapter.writeString(STORAGE_KEY_IMMERSIVE_MODE, String(settings.immersiveMode));
+  // SFTP Bookmarks (global only)
+  if (settings.sftpGlobalBookmarks != null) localStorageAdapter.write(STORAGE_KEY_SFTP_GLOBAL_BOOKMARKS, settings.sftpGlobalBookmarks);
+
+  // Immersive mode (legacy — always enabled, ignore incoming value)
+  if (settings.showRecentHosts != null) localStorageAdapter.writeBoolean(STORAGE_KEY_SHOW_RECENT_HOSTS, settings.showRecentHosts);
+  if (settings.showOnlyUngroupedHostsInRoot != null) {
+    localStorageAdapter.writeBoolean(
+      STORAGE_KEY_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT,
+      settings.showOnlyUngroupedHostsInRoot,
+    );
+  }
+  if (settings.showSftpTab != null) {
+    localStorageAdapter.writeBoolean(STORAGE_KEY_SHOW_SFTP_TAB, settings.showSftpTab);
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -249,6 +302,7 @@ export function buildSyncPayload(
     customGroups: vault.customGroups,
     snippetPackages: vault.snippetPackages,
     knownHosts: vault.knownHosts,
+    groupConfigs: vault.groupConfigs,
     portForwardingRules,
     settings: collectSyncableSettings(),
     syncedAt: Date.now(),
@@ -282,6 +336,9 @@ export function applySyncPayload(
   if (payload.knownHosts !== undefined) {
     vaultImport.knownHosts = payload.knownHosts;
   }
+  if (Array.isArray(payload.groupConfigs)) {
+    vaultImport.groupConfigs = payload.groupConfigs;
+  }
 
   importers.importVaultData(JSON.stringify(vaultImport));
 
@@ -296,6 +353,8 @@ export function applySyncPayload(
   // Apply synced settings
   if (payload.settings) {
     applySyncableSettings(payload.settings);
+    // Rehydrate in-memory bookmark snapshot after localStorage was updated
+    if (payload.settings.sftpGlobalBookmarks != null) rehydrateGlobalBookmarks();
     importers.onSettingsApplied?.();
   }
 }

components/AppLogo.tsx

@@ -1,38 +1,58 @@
 import React from 'react';
 
 interface AppLogoProps {
-    className?: string;
+  className?: string;
 }
 
-/**
- * App logo component that dynamically uses the accent color (--primary CSS variable).
- * The original logo.svg file remains unchanged; this component renders an inline SVG
- * with colors bound to the current theme's accent color.
- */
 export const AppLogo: React.FC<AppLogoProps> = ({ className }) => (
-    <svg viewBox="0 0 64 64" className={className}>
-        {/* Main background - uses accent color */}
-        <rect x="4" y="4" width="56" height="56" rx="12" fill="hsl(var(--primary))" />
-        {/* Terminal window */}
-        <rect x="14" y="17" width="36" height="24" rx="4" fill="white" />
-        {/* Title bar - light accent tint */}
-        <rect x="14" y="17" width="36" height="5" rx="4" fill="hsl(var(--primary) / 0.15)" />
-        {/* Window buttons */}
-        <circle cx="18" cy="19.5" r="1" fill="hsl(var(--primary))" />
-        <circle cx="22" cy="19.5" r="1" fill="hsl(var(--primary))" opacity="0.7" />
-        <circle cx="26" cy="19.5" r="1" fill="hsl(var(--primary))" opacity="0.5" />
-        {/* Terminal prompt arrow */}
-        <path d="M20 32 L24 30 L20 28" stroke="hsl(var(--primary))" fill="none" strokeWidth="1.6" />
-        {/* Cursor line */}
-        <path d="M28 34 H34" stroke="hsl(var(--primary))" strokeWidth="1.6" />
-        {/* Cat ears */}
-        <path d="M24 17 L26 12 L28 17Z" fill="white" />
-        <path d="M36 17 L38 12 L40 17Z" fill="white" />
-        {/* Cat tail */}
-        <path d="M40 37 C44 40,46 42,46 46 C46 49,44 51,41 51" stroke="white" fill="none" strokeWidth="3.2" />
-        {/* Connector/plug */}
-        <rect x="38" y="48" width="6" height="5" rx="1" fill="white" stroke="hsl(var(--primary))" />
-    </svg>
+  <svg
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <rect
+      x="0"
+      y="0"
+      width="1024"
+      height="1024"
+      rx="192"
+      ry="192"
+      fill="hsl(var(--primary))"
+    />
+    <g transform="translate(85.64 85.64) scale(0.68)">
+      <g><path style={{opacity:1}} fill="#f9f9f9" d="M 618.5,240.5 C 647.925,240.677 677.258,242.344 706.5,245.5C 753.323,252.113 798.49,265.113 842,284.5C 870.064,257.538 902.23,236.704 938.5,222C 966.969,211.263 988.469,219.096 1003,245.5C 1011.08,263.079 1016.75,281.412 1020,300.5C 1022.13,320.204 1024.29,339.871 1026.5,359.5C 1026.17,379.674 1026.5,399.674 1027.5,419.5C 1072.74,473.648 1102.74,535.314 1117.5,604.5C 1117.29,607.495 1117.96,610.162 1119.5,612.5C 1126.08,656.83 1126.08,701.163 1119.5,745.5C 1118.23,747.905 1117.57,750.572 1117.5,753.5C 1107.38,802.706 1088.05,847.872 1059.5,889C 1053.04,888.572 1046.71,887.405 1040.5,885.5C 1036.79,883.864 1032.79,883.198 1028.5,883.5C 1011.79,881.938 995.122,882.271 978.5,884.5C 975.572,884.565 972.905,885.232 970.5,886.5C 928.686,895.489 896.519,918.156 874,954.5C 864.791,970.962 859.958,988.628 859.5,1007.5C 793.269,1029.39 725.269,1041.72 655.5,1044.5C 633.833,1044.5 612.167,1044.5 590.5,1044.5C 524.821,1041.8 460.821,1029.63 398.5,1008C 396.254,996.177 393.421,984.344 390,972.5C 387.524,964.881 384.024,957.881 379.5,951.5C 363.815,925.334 341.815,906.667 313.5,895.5C 297.343,888.573 280.343,884.406 262.5,883C 248.055,882.038 233.722,882.538 219.5,884.5C 216.572,884.565 213.905,885.232 211.5,886.5C 211.167,886.5 210.833,886.5 210.5,886.5C 207.848,886.41 205.515,887.076 203.5,888.5C 200.823,889.614 198.156,889.614 195.5,888.5C 149.432,819.968 128.098,744.301 131.5,661.5C 131.502,654.48 131.835,647.48 132.5,640.5C 133.461,638.735 133.795,636.735 133.5,634.5C 135.136,630.79 135.802,626.79 135.5,622.5C 137.764,609.333 140.431,596.333 143.5,583.5C 144.924,581.485 145.59,579.152 145.5,576.5C 156.228,537.714 172.395,501.381 194,467.5C 204.685,451.452 215.852,435.786 227.5,420.5C 228.042,388.62 229.375,356.62 231.5,324.5C 234.549,300.253 240.382,276.586 249,253.5C 253.868,241.906 261.035,232.073 270.5,224C 279.336,218.042 289.002,216.042 299.5,218C 314.655,220.607 328.988,225.607 342.5,233C 368.29,247.23 391.957,264.396 413.5,284.5C 478.68,255.797 547.014,241.13 618.5,240.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#1f2657" d="M 706.5,245.5 C 677.258,242.344 647.925,240.677 618.5,240.5C 649.662,238.284 680.995,239.784 712.5,245C 710.527,245.495 708.527,245.662 706.5,245.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#18214c" d="M 231.5,324.5 C 229.375,356.62 228.042,388.62 227.5,420.5C 226.104,392.965 226.604,365.298 229,337.5C 229.17,331.677 230.003,327.344 231.5,324.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#0c1943" d="M 1026.5,359.5 C 1027.92,371.971 1028.59,384.637 1028.5,397.5C 1028.5,405.008 1028.17,412.341 1027.5,419.5C 1026.5,399.674 1026.17,379.674 1026.5,359.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#505c83" d="M 817.5,544.5 C 815.162,546.04 812.495,546.706 809.5,546.5C 811.905,545.232 814.572,544.565 817.5,544.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#919ab0" d="M 445.5,545.5 C 448.152,545.41 450.485,546.076 452.5,547.5C 449.848,547.59 447.515,546.924 445.5,545.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#022551" d="M 445.5,545.5 C 447.515,546.924 449.848,547.59 452.5,547.5C 479.103,555.885 499.269,572.218 513,596.5C 515.435,607.525 511.268,614.191 500.5,616.5C 497.302,616.378 494.302,615.545 491.5,614C 485.302,604.13 477.969,595.13 469.5,587C 459.207,579.735 447.873,574.902 435.5,572.5C 415.88,568.656 398.213,573.156 382.5,586C 380.905,585.383 379.572,585.716 378.5,587C 378.957,587.414 379.291,587.914 379.5,588.5C 376.839,591.423 374.005,593.423 371,594.5C 369.606,600.126 366.772,603.96 362.5,606C 363.517,607.049 363.684,608.216 363,609.5C 355.276,616.472 347.943,616.139 341,608.5C 339.805,603.4 340.638,598.733 343.5,594.5C 344.086,594.709 344.586,595.043 345,595.5C 344.718,590.888 346.551,587.055 350.5,584C 351.515,582.627 351.515,581.46 350.5,580.5C 375.329,550.884 406.995,539.218 445.5,545.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#032551" d="M 817.5,544.5 C 862.791,541.392 895.958,559.726 917,599.5C 917.138,612.028 910.971,617.528 898.5,616C 897.167,615.333 895.833,614.667 894.5,614C 884.255,595.245 869.255,582.078 849.5,574.5C 843.812,571.54 837.645,570.207 831,570.5C 822.066,570.919 813.233,572.086 804.5,574C 798.217,577.721 792.05,581.554 786,585.5C 785.667,585.167 785.333,584.833 785,584.5C 782.92,587.065 781.087,589.732 779.5,592.5C 774.384,597.792 770.218,603.792 767,610.5C 759.55,618.016 751.883,618.349 744,611.5C 742.878,609.593 742.045,607.593 741.5,605.5C 741.508,602.455 741.841,599.455 742.5,596.5C 757.037,569.397 779.371,552.73 809.5,546.5C 812.495,546.706 815.162,546.04 817.5,544.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#0c1a4d" d="M 849.5,574.5 C 822.908,568.314 799.574,574.314 779.5,592.5C 781.087,589.732 782.92,587.065 785,584.5C 785.333,584.833 785.667,585.167 786,585.5C 792.05,581.554 798.217,577.721 804.5,574C 813.233,572.086 822.066,570.919 831,570.5C 837.645,570.207 843.812,571.54 849.5,574.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#98a2bf" d="M 423.5,572.5 C 419.684,573.482 415.684,574.149 411.5,574.5C 415.183,572.75 419.183,572.083 423.5,572.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#9ea6be" d="M 145.5,576.5 C 145.59,579.152 144.924,581.485 143.5,583.5C 143.41,580.848 144.076,578.515 145.5,576.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#132152" d="M 435.5,572.5 C 431.5,572.5 427.5,572.5 423.5,572.5C 419.183,572.083 415.183,572.75 411.5,574.5C 389.242,579.57 372.909,592.403 362.5,613C 356.408,617.241 350.075,617.574 343.5,614C 337.996,608.137 337.163,601.637 341,594.5C 343.929,589.631 347.096,584.965 350.5,580.5C 351.515,581.46 351.515,582.627 350.5,584C 346.551,587.055 344.718,590.888 345,595.5C 344.586,595.043 344.086,594.709 343.5,594.5C 340.638,598.733 339.805,603.4 341,608.5C 347.943,616.139 355.276,616.472 363,609.5C 363.684,608.216 363.517,607.049 362.5,606C 366.772,603.96 369.606,600.126 371,594.5C 374.005,593.423 376.839,591.423 379.5,588.5C 379.291,587.914 378.957,587.414 378.5,587C 379.572,585.716 380.905,585.383 382.5,586C 398.213,573.156 415.88,568.656 435.5,572.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#6c7794" d="M 742.5,596.5 C 741.841,599.455 741.508,602.455 741.5,605.5C 740.848,604.551 740.514,603.385 740.5,602C 740.393,599.779 741.06,597.946 742.5,596.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#6f7b97" d="M 1117.5,604.5 C 1118.77,606.905 1119.43,609.572 1119.5,612.5C 1117.96,610.162 1117.29,607.495 1117.5,604.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#a8aec5" d="M 135.5,622.5 C 135.802,626.79 135.136,630.79 133.5,634.5C 133.717,630.295 134.383,626.295 135.5,622.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#677393" d="M 653.5,662.5 C 634.473,662.218 615.473,662.551 596.5,663.5C 597.263,662.732 598.263,662.232 599.5,662C 617.671,661.171 635.671,661.338 653.5,662.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#032551" d="M 653.5,662.5 C 664.536,665.228 669.036,672.228 667,683.5C 665.861,687.112 664.194,690.446 662,693.5C 656.35,700.317 650.184,706.65 643.5,712.5C 643.058,737.755 654.725,754.922 678.5,764C 709.272,768.521 729.105,756.021 738,726.5C 747.413,717.842 755.746,718.842 763,729.5C 759.409,758.463 743.909,778.297 716.5,789C 713.111,789.776 709.778,790.609 706.5,791.5C 697.533,792.383 688.533,792.716 679.5,792.5C 657.328,788.994 639.828,777.994 627,759.5C 607.084,786.202 580.584,797.035 547.5,792C 516.901,784.235 497.901,765.068 490.5,734.5C 493.257,721.955 500.59,718.121 512.5,723C 517.164,727.124 519.998,732.291 521,738.5C 533.515,761.003 552.348,769.17 577.5,763C 599.78,754.048 610.947,737.548 611,713.5C 604.698,706.197 598.032,699.197 591,692.5C 586.824,686.46 585.491,679.794 587,672.5C 589.072,668.26 592.238,665.26 596.5,663.5C 615.473,662.551 634.473,662.218 653.5,662.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#01103f" d="M 132.5,640.5 C 131.835,647.48 131.502,654.48 131.5,661.5C 130.669,675.994 130.169,690.661 130,705.5C 128.188,682.722 128.854,660.055 132,637.5C 132.483,638.448 132.649,639.448 132.5,640.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#7c869d" d="M 1119.5,745.5 C 1119.71,748.495 1119.04,751.162 1117.5,753.5C 1117.57,750.572 1118.23,747.905 1119.5,745.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#7581a0" d="M 706.5,791.5 C 705.737,792.268 704.737,792.768 703.5,793C 695.323,793.823 687.323,793.656 679.5,792.5C 688.533,792.716 697.533,792.383 706.5,791.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#a7aec3" d="M 1028.5,883.5 C 1032.79,883.198 1036.79,883.864 1040.5,885.5C 1036.29,885.283 1032.29,884.617 1028.5,883.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#f9f9f9" d="M 233.5,904.5 C 242.833,904.5 252.167,904.5 261.5,904.5C 263.833,904.5 266.167,904.5 268.5,904.5C 304.989,908.827 334.489,925.494 357,954.5C 374.323,977.781 379.323,1003.45 372,1031.5C 365.153,1050.01 351.986,1060.85 332.5,1064C 324.173,1064.5 315.84,1064.67 307.5,1064.5C 307.947,1050.43 307.447,1036.43 306,1022.5C 296.93,1011.58 288.263,1011.91 280,1023.5C 279.833,1038.51 279.333,1053.51 278.5,1068.5C 271.841,1075.83 263.508,1080 253.5,1081C 248.845,1081.5 244.179,1081.67 239.5,1081.5C 237.485,1080.08 235.152,1079.41 232.5,1079.5C 225.481,1077.32 219.315,1073.66 214,1068.5C 213.667,1053.5 213.333,1038.5 213,1023.5C 208.464,1016.16 201.964,1013.66 193.5,1016C 190.333,1017.83 187.833,1020.33 186,1023.5C 185.5,1037.83 185.333,1052.16 185.5,1066.5C 160.376,1072.2 140.21,1064.86 125,1044.5C 120.792,1037.38 118.292,1029.71 117.5,1021.5C 117.482,1013.15 117.815,1004.82 118.5,996.5C 129.171,955.493 154.504,927.826 194.5,913.5C 200.166,912.61 205.5,910.943 210.5,908.5C 211.568,907.566 212.901,907.232 214.5,907.5C 221.111,907.453 227.444,906.453 233.5,904.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#f8f8f9" d="M 1133.5,985.5 C 1133.41,988.152 1134.08,990.485 1135.5,992.5C 1136.26,1002.48 1136.59,1012.48 1136.5,1022.5C 1133.68,1047.82 1119.68,1062.66 1094.5,1067C 1086.48,1067.61 1078.48,1067.44 1070.5,1066.5C 1070.67,1052.83 1070.5,1039.16 1070,1025.5C 1066.12,1016.96 1059.62,1013.79 1050.5,1016C 1047.33,1017.83 1044.83,1020.33 1043,1023.5C 1042.67,1038.17 1042.33,1052.83 1042,1067.5C 1035.97,1075.1 1028.14,1079.43 1018.5,1080.5C 1013.2,1081.27 1007.87,1081.61 1002.5,1081.5C 991.789,1080.39 982.955,1075.73 976,1067.5C 975.667,1052.83 975.333,1038.17 975,1023.5C 971.569,1017.53 966.402,1014.87 959.5,1015.5C 953.942,1016.72 950.275,1020.06 948.5,1025.5C 947.505,1037.99 947.171,1050.66 947.5,1063.5C 946.209,1063.26 945.209,1063.6 944.5,1064.5C 903.542,1067.19 882.208,1048.02 880.5,1007C 880.658,1002.81 880.991,998.641 881.5,994.5C 883.277,991.495 884.277,988.162 884.5,984.5C 894.73,953.43 914.73,930.93 944.5,917C 978.246,903.385 1012.91,900.718 1048.5,909C 1082.5,918.575 1108.67,938.409 1127,968.5C 1129.86,973.928 1132.03,979.595 1133.5,985.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#adb2c9" d="M 233.5,904.5 C 227.444,906.453 221.111,907.453 214.5,907.5C 220.536,905.419 226.869,904.419 233.5,904.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#bec4d7" d="M 210.5,908.5 C 205.5,910.943 200.166,912.61 194.5,913.5C 199.5,911.057 204.834,909.39 210.5,908.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#9ba0b8" d="M 884.5,984.5 C 884.277,988.162 883.277,991.495 881.5,994.5C 881.723,990.838 882.723,987.505 884.5,984.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#9aa5bc" d="M 1133.5,985.5 C 1134.92,987.515 1135.59,989.848 1135.5,992.5C 1134.08,990.485 1133.41,988.152 1133.5,985.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#adb1c6" d="M 118.5,996.5 C 117.815,1004.82 117.482,1013.15 117.5,1021.5C 116.835,1018.69 116.502,1015.69 116.5,1012.5C 116.429,1006.93 117.096,1001.6 118.5,996.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#c9d0dc" d="M 1135.5,992.5 C 1136.96,998.434 1137.63,1004.6 1137.5,1011C 1137.5,1015.02 1137.17,1018.85 1136.5,1022.5C 1136.59,1012.48 1136.26,1002.48 1135.5,992.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#b5bfcb" d="M 948.5,1025.5 C 948.5,1038.5 948.5,1051.5 948.5,1064.5C 947.167,1064.5 945.833,1064.5 944.5,1064.5C 945.209,1063.6 946.209,1063.26 947.5,1063.5C 947.171,1050.66 947.505,1037.99 948.5,1025.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#8193aa" d="M 232.5,1079.5 C 235.152,1079.41 237.485,1080.08 239.5,1081.5C 236.848,1081.59 234.515,1080.92 232.5,1079.5 Z"/></g>
+    </g>
+  </svg>
 );
 
 export default AppLogo;

components/CreateWorkspaceDialog.tsx

@@ -67,27 +67,27 @@ export const CreateWorkspaceDialog: React.FC<CreateWorkspaceDialogProps> = ({
     <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
       <DialogContent className="max-w-md flex flex-col max-h-[80vh]">
         <DialogHeader>
-          <DialogTitle>{t('dialog.createWorkspace.title', 'Create Workspace')}</DialogTitle>
+          <DialogTitle>{t('dialog.createWorkspace.title', { defaultValue: 'Create Workspace' })}</DialogTitle>
         </DialogHeader>
 
         <div className="space-y-4 py-2 flex-1 flex flex-col min-h-0">
           <div className="space-y-2">
-            <Label htmlFor="workspace-name">{t('field.name', 'Name')}</Label>
+            <Label htmlFor="workspace-name">{t('field.name', { defaultValue: 'Name' })}</Label>
             <Input
               id="workspace-name"
               value={name}
               onChange={(e) => setName(e.target.value)}
-              placeholder={t('placeholder.workspaceName', 'Workspace Name')}
+              placeholder={t('placeholder.workspaceName', { defaultValue: 'Workspace Name' })}
               autoFocus
             />
           </div>
 
           <div className="space-y-2 flex-1 flex flex-col min-h-0">
-            <Label>{t('field.selectHosts', 'Select Hosts')}</Label>
+            <Label>{t('field.selectHosts', { defaultValue: 'Select Hosts' })}</Label>
             <div className="relative">
                 <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                 <Input
-                placeholder={t('placeholder.searchHosts', 'Search hosts...')}
+                placeholder={t('placeholder.searchHosts', { defaultValue: 'Search hosts...' })}
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
                 className="pl-8"
@@ -99,7 +99,7 @@ export const CreateWorkspaceDialog: React.FC<CreateWorkspaceDialogProps> = ({
                     <div className="p-2 space-y-1">
                         {filteredHosts.length === 0 ? (
                             <div className="text-center py-4 text-sm text-muted-foreground">
-                                {t('common.noResults', 'No hosts found')}
+                                {t('common.noResults', { defaultValue: 'No hosts found' })}
                             </div>
                         ) : (
                             filteredHosts.map(host => {
@@ -126,15 +126,15 @@ export const CreateWorkspaceDialog: React.FC<CreateWorkspaceDialogProps> = ({
                 </ScrollArea>
             </div>
             <div className="text-xs text-muted-foreground text-right">
-                {selectedHostIds.size} {t('common.selected', 'selected')}
+                {selectedHostIds.size} {t('common.selected', { defaultValue: 'selected' })}
             </div>
           </div>
         </div>
 
         <DialogFooter>
-          <Button variant="ghost" onClick={onClose}>{t('common.cancel', 'Cancel')}</Button>
+          <Button variant="ghost" onClick={onClose}>{t('common.cancel', { defaultValue: 'Cancel' })}</Button>
           <Button onClick={handleCreate} disabled={!name.trim() || selectedHostIds.size === 0}>
-            {t('common.create', 'Create')}
+            {t('common.create', { defaultValue: 'Create' })}
           </Button>
         </DialogFooter>
       </DialogContent>

components/DistroAvatar.tsx

@@ -22,6 +22,16 @@ export const DISTRO_LOGOS: Record<string, string> = {
   macos: "/distro/macos.svg",
   windows: "/distro/windows.svg",
   linux: "/distro/linux.svg",
+  // Network device vendors — auto-detected from the SSH server
+  // identification string (see domain/host.ts `detectVendorFromSshVersion`).
+  cisco: "/distro/cisco.svg",
+  juniper: "/distro/juniper.svg",
+  huawei: "/distro/huawei.svg",
+  hpe: "/distro/hpe.svg",
+  mikrotik: "/distro/mikrotik.svg",
+  fortinet: "/distro/fortinet.svg",
+  paloalto: "/distro/paloalto.svg",
+  zyxel: "/distro/zyxel.svg",
 };
 
 export const DISTRO_COLORS: Record<string, string> = {
@@ -42,6 +52,15 @@ export const DISTRO_COLORS: Record<string, string> = {
   macos: "bg-[#333333]",
   windows: "bg-[#0078D4]",
   linux: "bg-[#333333]",
+  // Network device vendor brand colors
+  cisco: "bg-[#1BA0D7]",
+  juniper: "bg-[#0A6EB4]",
+  huawei: "bg-[#CF0A2C]",
+  hpe: "bg-[#01A982]",
+  mikrotik: "bg-[#293239]",
+  fortinet: "bg-[#EE3124]",
+  paloalto: "bg-[#FA582D]",
+  zyxel: "bg-[#00497A]",
   default: "bg-slate-600",
 };
 
@@ -65,8 +84,8 @@ const DistroAvatarInner: React.FC<DistroAvatarProps> = ({
 
   // Size variants - all use rounded corners for consistency
   const sizeClasses = {
-    sm: "h-6 w-6 rounded-md",
-    md: "h-11 w-11 rounded-xl",
+    sm: "h-6 w-6 rounded",
+    md: "h-11 w-11 rounded-lg",
     lg: "h-14 w-14 rounded-xl",
   };
   const iconSizes = {
@@ -98,7 +117,7 @@ const DistroAvatarInner: React.FC<DistroAvatarProps> = ({
       <div
         className={cn(
           containerClass,
-          "flex items-center justify-center border border-border/40 overflow-hidden",
+          "flex items-center justify-center overflow-hidden",
           bg,
           className,
         )}

components/HostDetailsPanel.tsx

@@ -25,13 +25,18 @@ import {
   Trash2,
   Variable,
   Wifi,
+  Router,
   X,
 } from "lucide-react";
 import React, { useEffect, useMemo, useState, useCallback } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { useApplicationBackend } from "../application/state/useApplicationBackend";
-import { useSettingsState } from "../application/state/useSettingsState";
-import { getEffectiveHostDistro, LINUX_DISTRO_OPTIONS } from "../domain/host";
+import { resolveGroupDefaults, resolveGroupTerminalThemeId } from "../domain/groupConfig";
+import {
+  getEffectiveHostDistro,
+  LINUX_DISTRO_OPTIONS,
+  NETWORK_DEVICE_OPTIONS,
+} from "../domain/host";
 import { customThemeStore } from "../application/state/customThemeStore";
 import {
   clearHostFontSizeOverride,
@@ -43,7 +48,7 @@ import {
 } from "../domain/terminalAppearance";
 import { MIN_FONT_SIZE, MAX_FONT_SIZE } from "../infrastructure/config/fonts";
 import { cn } from "../lib/utils";
-import { EnvVar, Host, Identity, ManagedSource, ProxyConfig, SSHKey } from "../types";
+import { EnvVar, GroupConfig, Host, Identity, ManagedSource, ProxyConfig, SSHKey } from "../types";
 import { DISTRO_COLORS, DISTRO_LOGOS } from "./DistroAvatar";
 import { DistroAvatar } from "./DistroAvatar";
 import ThemeSelectPanel from "./ThemeSelectPanel";
@@ -51,6 +56,7 @@ import {
   AsidePanel,
   AsidePanelContent,
   AsidePanelFooter,
+  type AsidePanelLayout,
 } from "./ui/aside-panel";
 import { Badge } from "./ui/badge";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
@@ -82,7 +88,10 @@ type SubPanel =
   | "theme-select"
   | "telnet-theme-select";
 
-const LINUX_DISTRO_OPTION_IDS = [...LINUX_DISTRO_OPTIONS];
+const LINUX_DISTRO_OPTION_IDS = [
+  ...LINUX_DISTRO_OPTIONS,
+  ...NETWORK_DEVICE_OPTIONS,
+];
 
 interface HostDetailsPanelProps {
   initialData?: Host | null;
@@ -93,10 +102,15 @@ interface HostDetailsPanelProps {
   allTags?: string[]; // All available tags for autocomplete
   allHosts?: Host[]; // All hosts for chain selection
   defaultGroup?: string | null; // Default group for new hosts (from current navigation)
+  terminalThemeId: string;
+  terminalFontSize: number;
   onSave: (host: Host) => void;
   onCancel: () => void;
   onCreateGroup?: (groupPath: string) => void; // Callback to create a new group
   onCreateTag?: (tag: string) => void; // Callback to create a new tag
+  groupDefaults?: Partial<import('../domain/models').GroupConfig>;
+  groupConfigs?: GroupConfig[];
+  layout?: AsidePanelLayout;
 }
 
 const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
@@ -108,14 +122,18 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   allTags = [],
   allHosts = [],
   defaultGroup,
+  terminalThemeId,
+  terminalFontSize,
   onSave,
   onCancel,
   onCreateGroup,
   onCreateTag,
+  groupDefaults,
+  groupConfigs = [],
+  layout = "overlay",
 }) => {
   const { t } = useI18n();
   const { checkSshAgent } = useApplicationBackend();
-  const { terminalThemeId, terminalFontSize } = useSettingsState();
   const [form, setForm] = useState<Host>(
     () =>
       initialData ||
@@ -123,13 +141,13 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         id: crypto.randomUUID(),
         label: "",
         hostname: "",
-        port: 22,
-        username: "root",
+        port: groupDefaults?.port ? undefined : 22,
+        username: groupDefaults?.username ? "" : "root",
         protocol: "ssh",
         tags: [],
         os: "linux",
         authMethod: "password",
-        charset: "UTF-8",
+        charset: groupDefaults?.charset ? undefined : "UTF-8",
         distroMode: "auto",
         createdAt: Date.now(),
         group: defaultGroup || undefined, // Pre-fill with current navigation group
@@ -196,9 +214,17 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
     setForm((prev) => ({ ...prev, [key]: value }));
   };
 
+  const effectiveGroupDefaults = useMemo(() => {
+    const currentGroupPath = form.group || defaultGroup;
+    if (currentGroupPath && groupConfigs.length > 0) {
+      return resolveGroupDefaults(currentGroupPath, groupConfigs);
+    }
+    return groupDefaults;
+  }, [defaultGroup, form.group, groupConfigs, groupDefaults]);
+
   const effectiveThemeId = useMemo(
-    () => resolveHostTerminalThemeId(form, terminalThemeId),
-    [form, terminalThemeId],
+    () => resolveHostTerminalThemeId(form, resolveGroupTerminalThemeId(effectiveGroupDefaults, terminalThemeId)),
+    [effectiveGroupDefaults, form, terminalThemeId],
   );
   const effectiveFontSize = useMemo(
     () => resolveHostTerminalFontSize(form, terminalFontSize),
@@ -279,12 +305,10 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   };
 
   const removeHostFromChain = (index: number) => {
-    setForm((prev) => ({
-      ...prev,
-      hostChain: {
-        hostIds: (prev.hostChain?.hostIds || []).filter((_, i) => i !== index),
-      },
-    }));
+    setForm((prev) => {
+      const ids = (prev.hostChain?.hostIds || []).filter((_, i) => i !== index);
+      return { ...prev, hostChain: ids.length > 0 ? { hostIds: ids } : undefined };
+    });
   };
 
   const clearHostChain = useCallback(() => {
@@ -310,12 +334,10 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   };
 
   const removeEnvVar = (index: number) => {
-    setForm((prev) => ({
-      ...prev,
-      environmentVariables: (prev.environmentVariables || []).filter(
-        (_, i) => i !== index,
-      ),
-    }));
+    setForm((prev) => {
+      const filtered = (prev.environmentVariables || []).filter((_, i) => i !== index);
+      return { ...prev, environmentVariables: filtered.length > 0 ? filtered : undefined };
+    });
   };
 
   const handleSubmit = () => {
@@ -360,7 +382,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
       label: finalLabel,
       group: finalGroup,
       tags: form.tags || [],
-      port: form.port || 22,
+      port: form.port ?? (groupDefaults?.port ? undefined : 22),
       // Clear password if savePassword is explicitly set to false
       password: form.savePassword === false ? undefined : form.password,
       managedSourceId: finalManagedSourceId,
@@ -501,6 +523,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         onSave={handleCreateGroup}
         onBack={() => setActiveSubPanel("none")}
         onCancel={onCancel}
+        layout={layout}
       />
     );
   }
@@ -513,6 +536,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         onClearProxy={clearProxyConfig}
         onBack={() => setActiveSubPanel("none")}
         onCancel={onCancel}
+        layout={layout}
       />
     );
   }
@@ -530,6 +554,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         onClearChain={clearHostChain}
         onBack={() => setActiveSubPanel("none")}
         onCancel={onCancel}
+        layout={layout}
       />
     );
   }
@@ -558,6 +583,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         }}
         onBack={() => setActiveSubPanel("none")}
         onCancel={onCancel}
+        layout={layout}
       />
     );
   }
@@ -569,12 +595,17 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         open={true}
         selectedThemeId={effectiveThemeId}
         onSelect={(themeId) => {
+          if (themeId === effectiveThemeId && !hasEffectiveThemeOverride) {
+            setActiveSubPanel("none");
+            return;
+          }
           setForm((prev) => ({ ...prev, theme: themeId, themeOverride: true }));
           setActiveSubPanel("none");
         }}
         onClose={onCancel}
         onBack={() => setActiveSubPanel("none")}
         showBackButton={true}
+        layout={layout}
       />
     );
   }
@@ -613,6 +644,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         onClose={onCancel}
         onBack={() => setActiveSubPanel("none")}
         showBackButton={true}
+        layout={layout}
       />
     );
   }
@@ -622,6 +654,9 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
     <AsidePanel
       open={true}
       onClose={onCancel}
+      width="w-[420px]"
+      layout={layout}
+      dataSection="host-details-panel"
       title={
         initialData ? t("hostDetails.title.details") : t("hostDetails.title.new")
       }
@@ -735,7 +770,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
           </div>
         </Card>
 
-        <Card className="p-3 space-y-3 bg-card border-border/80">
+        <Card className="p-3 space-y-3 bg-card border-border/80 overflow-hidden">
           <div className="flex items-center gap-2">
             <KeyRound size={14} className="text-muted-foreground" />
             <p className="text-xs font-semibold">
@@ -748,8 +783,9 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               <div className="ml-auto w-1/2 min-w-0 flex items-center gap-2 justify-end">
                 <Input
                   type="number"
-                  value={form.port}
-                  onChange={(e) => update("port", Number(e.target.value))}
+                  value={form.port ?? ""}
+                  onChange={(e) => update("port", e.target.value ? Number(e.target.value) : undefined)}
+                  placeholder={groupDefaults?.port ? String(groupDefaults.port) : "22"}
                   className="h-8 flex-1 min-w-0 text-center"
                 />
                 <span className="text-xs text-muted-foreground">
@@ -801,7 +837,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                 if (!hasIdentities) {
                   return (
                     <Input
-                      placeholder={t("hostDetails.username.placeholder")}
+                      placeholder={groupDefaults?.username || t("hostDetails.username.placeholder")}
                       value={form.username}
                       onChange={(e) => update("username", e.target.value)}
                       className="h-10"
@@ -820,7 +856,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                     <PopoverTrigger asChild>
                       <div className="relative">
                         <Input
-                          placeholder={t("hostDetails.username.placeholder")}
+                          placeholder={groupDefaults?.username || t("hostDetails.username.placeholder")}
                           value={form.username}
                           onChange={(e) => {
                             const next = e.target.value;
@@ -980,9 +1016,9 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
             {!selectedIdentity && !form.identityFileId && form.identityFilePaths && form.identityFilePaths.length > 0 && (
               <div className="space-y-1.5">
                 {form.identityFilePaths.map((keyPath, idx) => (
-                  <div key={idx} className="flex items-center gap-2 p-2 rounded-md bg-secondary/50 border border-border/60">
+                  <div key={idx} className="flex items-center gap-2 p-2 rounded-md bg-secondary/50 border border-border/60 overflow-hidden">
                     <FileKey size={14} className="text-primary shrink-0" />
-                    <span className="text-xs flex-1 truncate font-mono" title={keyPath}>
+                    <span className="text-xs w-0 flex-1 truncate font-mono" title={keyPath}>
                       {keyPath}
                     </span>
                     <Button
@@ -1175,10 +1211,10 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               selectedCredentialType === "localKeyFile" &&
               !form.identityFileId && (
                 <div className="space-y-1.5">
-                  <div className="flex items-center gap-1">
+                  <div className="flex items-center gap-1 min-w-0">
                     <input
                       type="text"
-                      className="flex-1 h-8 px-2 text-xs font-mono bg-background border border-border/60 rounded-md focus:outline-none focus:ring-1 focus:ring-ring"
+                      className="flex-1 min-w-0 h-8 px-2 text-xs font-mono bg-background border border-border/60 rounded-md focus:outline-none focus:ring-1 focus:ring-ring"
                       placeholder={t("hostDetails.credential.localKeyFilePlaceholder")}
                       value={newKeyFilePath}
                       onChange={(e) => setNewKeyFilePath(e.target.value)}
@@ -1259,18 +1295,20 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               {t("hostDetails.sftp.sudo.passwordWarning")}
             </p>
           )}
-          <div className="space-y-1">
-            <div className="text-sm font-medium">
-              {t("hostDetails.sftp.encoding")}
-            </div>
-            <div className="text-xs text-muted-foreground">
-              {t("hostDetails.sftp.encoding.desc")}
+          <div className="flex items-center justify-between gap-4">
+            <div className="space-y-0.5">
+              <div className="text-sm font-medium">
+                {t("hostDetails.sftp.encoding")}
+              </div>
+              <div className="text-xs text-muted-foreground">
+                {t("hostDetails.sftp.encoding.desc")}
+              </div>
             </div>
             <Select
               value={form.sftpEncoding || "auto"}
               onValueChange={(val) => update("sftpEncoding", val as Host["sftpEncoding"])}
             >
-              <SelectTrigger className="h-8">
+              <SelectTrigger className="h-8 w-28">
                 <SelectValue placeholder={t("sftp.encoding.label")} />
               </SelectTrigger>
               <SelectContent>
@@ -1282,6 +1320,111 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
           </div>
         </Card>
 
+        {form.os === "linux" && (
+          <Card className="p-3 space-y-3 bg-card border-border/80">
+            <div className="flex items-center gap-2">
+              <img src="/distro/linux.svg" alt="Linux" className="h-3.5 w-3.5 opacity-70 dark:invert" />
+              <p className="text-xs font-semibold">{t("hostDetails.distro.title")}</p>
+            </div>
+            <p className="text-xs text-muted-foreground">{t("hostDetails.distro.desc")}</p>
+
+            <div className="grid gap-2 md:grid-cols-2">
+              <div className="space-y-1">
+                <span className="text-xs text-muted-foreground">{t("hostDetails.distro.mode")}</span>
+                <Select
+                  value={form.distroMode || "auto"}
+                  onValueChange={(val) => handleDistroModeChange(val as "auto" | "manual")}
+                >
+                  <SelectTrigger className="h-8" aria-label={t("hostDetails.distro.mode")}>
+                    <span className="truncate whitespace-nowrap pr-2 text-left">
+                      {form.distroMode === "manual"
+                        ? t("hostDetails.distro.mode.manual")
+                        : t("hostDetails.distro.mode.auto")}
+                    </span>
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="auto">{t("hostDetails.distro.mode.auto")}</SelectItem>
+                    <SelectItem value="manual">{t("hostDetails.distro.mode.manual")}</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {form.distroMode === "manual" ? (
+                <div className="space-y-1">
+                  <span className="text-xs text-muted-foreground">{t("hostDetails.distro.manualLabel")}</span>
+                  <Select
+                    value={form.manualDistro}
+                    onValueChange={(val) => update("manualDistro", val)}
+                  >
+                    <SelectTrigger className="h-8" aria-label={t("hostDetails.distro.manualLabel")}>
+                      {(() => {
+                        const selectedOption = distroOptions.find((option) => option.value === form.manualDistro);
+                        return selectedOption ? (
+                          <div className="flex min-w-0 items-center gap-2 pr-2">
+                            <div
+                              className={cn(
+                                "flex h-4 w-4 shrink-0 items-center justify-center overflow-hidden rounded-[2px]",
+                                selectedOption.bgClass,
+                              )}
+                            >
+                              {selectedOption.icon ? (
+                                <img
+                                  src={selectedOption.icon}
+                                  alt={selectedOption.label}
+                                  className="h-3 w-3 object-contain invert brightness-0"
+                                />
+                              ) : (
+                                <div className="h-2 w-2 rounded-full bg-white/70" />
+                              )}
+                            </div>
+                            <span className="truncate whitespace-nowrap">{selectedOption.label}</span>
+                          </div>
+                        ) : (
+                          <SelectValue placeholder={t("hostDetails.distro.unknown")} />
+                        );
+                      })()}
+                    </SelectTrigger>
+                    <SelectContent className="min-w-[14rem]">
+                      {distroOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          <div className="flex items-center gap-2">
+                            <div
+                              className={cn(
+                                "flex h-4 w-4 shrink-0 items-center justify-center overflow-hidden rounded-[2px]",
+                                option.bgClass,
+                              )}
+                            >
+                              {option.icon ? (
+                                <img
+                                  src={option.icon}
+                                  alt={option.label}
+                                  className="h-3 w-3 object-contain invert brightness-0"
+                                />
+                              ) : (
+                                <div className="h-2 w-2 rounded-full bg-white/70" />
+                              )}
+                            </div>
+                            <span className="whitespace-nowrap">{option.label}</span>
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              ) : (
+                <div className="space-y-1">
+                  <span className="text-xs text-muted-foreground">{t("hostDetails.distro.detectedLabel")}</span>
+                  <div className="flex h-8 items-center rounded-md border border-border/60 bg-background/50 px-3 text-sm">
+                    {effectiveFormDistro
+                      ? getDistroOptionLabel(effectiveFormDistro)
+                      : t("hostDetails.distro.unknown")}
+                  </div>
+                </div>
+              )}
+            </div>
+          </Card>
+        )}
+
         <Card className="p-3 space-y-3 bg-card border-border/80">
           <div className="flex items-center gap-2">
             <Palette size={14} className="text-muted-foreground" />
@@ -1290,113 +1433,6 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
             </p>
           </div>
 
-          {form.os === "linux" && (
-            <div className="space-y-2 rounded-lg border border-border/70 bg-secondary/30 p-3">
-              <div className="flex items-start gap-2">
-                <Globe size={14} className="mt-0.5 text-muted-foreground" />
-                <div className="space-y-0.5">
-                  <p className="text-xs font-semibold">{t("hostDetails.distro.title")}</p>
-                  <p className="text-xs text-muted-foreground">{t("hostDetails.distro.desc")}</p>
-                </div>
-              </div>
-
-              <div className="grid gap-2 md:grid-cols-2">
-                <div className="space-y-1">
-                  <span className="text-xs text-muted-foreground">{t("hostDetails.distro.mode")}</span>
-                  <Select
-                    value={form.distroMode || "auto"}
-                    onValueChange={(val) => handleDistroModeChange(val as "auto" | "manual")}
-                  >
-                    <SelectTrigger className="h-8" aria-label={t("hostDetails.distro.mode")}>
-                      <span className="truncate whitespace-nowrap pr-2 text-left">
-                        {form.distroMode === "manual"
-                          ? t("hostDetails.distro.mode.manual")
-                          : t("hostDetails.distro.mode.auto")}
-                      </span>
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="auto">{t("hostDetails.distro.mode.auto")}</SelectItem>
-                      <SelectItem value="manual">{t("hostDetails.distro.mode.manual")}</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                {form.distroMode === "manual" ? (
-                  <div className="space-y-1">
-                    <span className="text-xs text-muted-foreground">{t("hostDetails.distro.manualLabel")}</span>
-                    <Select
-                      value={form.manualDistro}
-                      onValueChange={(val) => update("manualDistro", val)}
-                    >
-                      <SelectTrigger className="h-8" aria-label={t("hostDetails.distro.manualLabel")}>
-                        {(() => {
-                          const selectedOption = distroOptions.find((option) => option.value === form.manualDistro);
-                          return selectedOption ? (
-                            <div className="flex min-w-0 items-center gap-2 pr-2">
-                              <div
-                                className={cn(
-                                  "flex h-4 w-4 shrink-0 items-center justify-center overflow-hidden rounded-[2px]",
-                                  selectedOption.bgClass,
-                                )}
-                              >
-                                {selectedOption.icon ? (
-                                  <img
-                                    src={selectedOption.icon}
-                                    alt={selectedOption.label}
-                                    className="h-3 w-3 object-contain invert brightness-0"
-                                  />
-                                ) : (
-                                  <div className="h-2 w-2 rounded-full bg-white/70" />
-                                )}
-                              </div>
-                              <span className="truncate whitespace-nowrap">{selectedOption.label}</span>
-                            </div>
-                          ) : (
-                            <SelectValue placeholder={t("hostDetails.distro.unknown")} />
-                          );
-                        })()}
-                      </SelectTrigger>
-                      <SelectContent className="min-w-[14rem]">
-                        {distroOptions.map((option) => (
-                          <SelectItem key={option.value} value={option.value}>
-                            <div className="flex items-center gap-2">
-                              <div
-                                className={cn(
-                                  "flex h-4 w-4 shrink-0 items-center justify-center overflow-hidden rounded-[2px]",
-                                  option.bgClass,
-                                )}
-                              >
-                                {option.icon ? (
-                                  <img
-                                    src={option.icon}
-                                    alt={option.label}
-                                    className="h-3 w-3 object-contain invert brightness-0"
-                                  />
-                                ) : (
-                                  <div className="h-2 w-2 rounded-full bg-white/70" />
-                                )}
-                              </div>
-                              <span className="whitespace-nowrap">{option.label}</span>
-                            </div>
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                ) : (
-                  <div className="space-y-1">
-                    <span className="text-xs text-muted-foreground">{t("hostDetails.distro.detectedLabel")}</span>
-                    <div className="flex h-8 items-center rounded-md border border-border/60 bg-background/50 px-3 text-sm">
-                      {effectiveFormDistro
-                        ? getDistroOptionLabel(effectiveFormDistro)
-                        : t("hostDetails.distro.unknown")}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-
           {/* SSH Theme Selection */}
           <button
             type="button"
@@ -1513,7 +1549,15 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
           <ToggleRow
             label="Mosh"
             enabled={!!form.moshEnabled}
-            onToggle={() => update("moshEnabled", !form.moshEnabled)}
+            onToggle={() => {
+              const enabling = !form.moshEnabled;
+              if (enabling && form.deviceType === 'network') {
+                // Network device mode is incompatible with Mosh — clear it
+                setForm(prev => ({ ...prev, moshEnabled: true, deviceType: undefined }));
+              } else {
+                update("moshEnabled", enabling);
+              }
+            }}
           />
         </Card>
 
@@ -1546,6 +1590,32 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
           )}
         </Card>
 
+        {/* Network Device Mode — only for SSH hosts without Mosh (serial already uses raw mode) */}
+        {(!form.protocol || form.protocol === 'ssh') && !form.moshEnabled && (
+        <Card className="p-3 space-y-2 bg-card border-border/80">
+          <div className="flex items-center gap-2">
+            <Router size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">{t("hostDetails.section.deviceType")}</p>
+          </div>
+          <ToggleRow
+            label={t("hostDetails.deviceType")}
+            enabled={form.deviceType === 'network'}
+            onToggle={() => update("deviceType", form.deviceType === 'network' ? undefined : 'network')}
+          />
+          <p className="text-xs text-muted-foreground break-words">
+            {t("hostDetails.deviceType.desc")}
+          </p>
+          {form.deviceType === 'network' && (
+            <div className="flex items-start gap-2 p-2 rounded-md bg-yellow-500/10 border border-yellow-500/20">
+              <AlertTriangle size={14} className="text-yellow-500 mt-0.5 flex-shrink-0" />
+              <p className="text-xs text-yellow-600 dark:text-yellow-400 break-words">
+                {t("hostDetails.deviceType.warning")}
+              </p>
+            </div>
+          )}
+        </Card>
+        )}
+
         {/* Legacy Algorithms */}
         <Card className="p-3 space-y-2 bg-card border-border/80">
           <div className="flex items-center gap-2">
@@ -1568,6 +1638,17 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               </p>
             </div>
           )}
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-muted-foreground">{t("hostDetails.backspaceBehavior")}</p>
+            <select
+              className="h-8 rounded-md border border-input bg-background px-2 text-xs"
+              value={form.backspaceBehavior ?? ""}
+              onChange={(e) => update("backspaceBehavior", e.target.value || undefined)}
+            >
+              <option value="">{t("hostDetails.backspaceBehavior.default")}</option>
+              <option value="ctrl-h">^H (0x08)</option>
+            </select>
+          </div>
         </Card>
 
         {/* Proxy via Hosts (Jump Hosts / ProxyJump) */}
@@ -1717,7 +1798,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                 className="text-muted-foreground hover:text-destructive flex-shrink-0 ml-auto"
                 onClick={(e) => {
                   e.stopPropagation();
-                  setForm((prev) => ({ ...prev, environmentVariables: [] }));
+                  setForm((prev) => ({ ...prev, environmentVariables: undefined }));
                 }}
               />
             </button>
@@ -1740,7 +1821,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
             <p className="text-xs font-semibold">{t("hostDetails.startupCommand")}</p>
           </div>
           <Textarea
-            placeholder={t("hostDetails.startupCommand.placeholder")}
+            placeholder={groupDefaults?.startupCommand || t("hostDetails.startupCommand.placeholder")}
             value={form.startupCommand || ""}
             onChange={(e) => update("startupCommand", e.target.value)}
             className="min-h-[80px] font-mono text-sm"
@@ -1804,7 +1885,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
 
             {/* Telnet Charset */}
             <Input
-              placeholder={t("hostDetails.charset.placeholder")}
+              placeholder={groupDefaults?.charset || t("hostDetails.charset.placeholder")}
               value={form.charset || "UTF-8"}
               onChange={(e) => update("charset", e.target.value)}
               className="h-10"

components/HostTreeView.tsx

@@ -1,4 +1,4 @@
-import { CheckSquare, ChevronRight, FileSymlink, Folder, FolderOpen, Monitor, Server, Square, Expand, Minimize2 } from 'lucide-react';
+import { CheckSquare, ChevronRight, Edit2, FileSymlink, Folder, FolderOpen, Monitor, Server, Square, Expand, Minimize2 } from 'lucide-react';
 import React, { useMemo } from 'react';
 import { useI18n } from '../application/i18n/I18nProvider';
 import { useTreeExpandedState } from '../application/state/useTreeExpandedState';
@@ -32,9 +32,12 @@ interface HostTreeViewProps {
   moveGroup: (sourcePath: string, targetPath: string) => void;
   managedGroupPaths?: Set<string>;
   onUnmanageGroup?: (groupPath: string) => void;
+
   isMultiSelectMode?: boolean;
   selectedHostIds?: Set<string>;
   toggleHostSelection?: (hostId: string) => void;
+  getDropTargetClasses?: (target: string) => string;
+  setDragOverDropTarget?: (target: string | null) => void;
 }
 
 interface TreeNodeProps {
@@ -56,9 +59,12 @@ interface TreeNodeProps {
   moveGroup: (sourcePath: string, targetPath: string) => void;
   managedGroupPaths?: Set<string>;
   onUnmanageGroup?: (groupPath: string) => void;
+
   isMultiSelectMode?: boolean;
   selectedHostIds?: Set<string>;
   toggleHostSelection?: (hostId: string) => void;
+  getDropTargetClasses?: (target: string) => string;
+  setDragOverDropTarget?: (target: string | null) => void;
 }
 
 
@@ -81,9 +87,12 @@ const TreeNode: React.FC<TreeNodeProps> = ({
   moveGroup,
   managedGroupPaths,
   onUnmanageGroup,
+
   isMultiSelectMode,
   selectedHostIds,
   toggleHostSelection,
+  getDropTargetClasses,
+  setDragOverDropTarget,
 }) => {
   const { t } = useI18n();
   const isExpanded = expandedPaths.has(node.path);
@@ -137,6 +146,7 @@ const TreeNode: React.FC<TreeNodeProps> = ({
               <div
                 className={cn(
                   "flex items-center py-2 pr-3 text-sm font-medium cursor-pointer transition-colors select-none group hover:bg-secondary/60 rounded-lg",
+                  getDropTargetClasses?.(node.path),
                 )}
                 style={{ paddingLeft }}
                 draggable
@@ -144,10 +154,19 @@ const TreeNode: React.FC<TreeNodeProps> = ({
                 onDragOver={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
+                  setDragOverDropTarget?.(node.path);
+                }}
+                onDragLeave={(e) => {
+                  const nextTarget = e.relatedTarget;
+                  if (nextTarget instanceof Node && e.currentTarget.contains(nextTarget)) {
+                    return;
+                  }
+                  setDragOverDropTarget?.(null);
                 }}
                 onDrop={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
+                  setDragOverDropTarget?.(null);
                   const hostId = e.dataTransfer.getData("host-id");
                   const groupPath = e.dataTransfer.getData("group-path");
                   if (hostId) moveHostToGroup(hostId, node.path);
@@ -176,6 +195,15 @@ const TreeNode: React.FC<TreeNodeProps> = ({
                     {hostsCountInNode}
                   </span>
                 )}
+                <button
+                  className="h-7 w-7 flex items-center justify-center rounded-md hover:bg-secondary/80 transition-colors opacity-0 group-hover:opacity-100 shrink-0"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEditGroup(node.path);
+                  }}
+                >
+                  <Edit2 size={13} />
+                </button>
               </div>
             </CollapsibleTrigger>
           </ContextMenuTrigger>
@@ -226,9 +254,12 @@ const TreeNode: React.FC<TreeNodeProps> = ({
               moveGroup={moveGroup}
               managedGroupPaths={managedGroupPaths}
               onUnmanageGroup={onUnmanageGroup}
+
               isMultiSelectMode={isMultiSelectMode}
               selectedHostIds={selectedHostIds}
               toggleHostSelection={toggleHostSelection}
+              getDropTargetClasses={getDropTargetClasses}
+              setDragOverDropTarget={setDragOverDropTarget}
             />
           ))}
 
@@ -244,6 +275,7 @@ const TreeNode: React.FC<TreeNodeProps> = ({
               onDeleteHost={onDeleteHost}
               onCopyCredentials={onCopyCredentials}
               moveHostToGroup={moveHostToGroup}
+
               isMultiSelectMode={isMultiSelectMode}
               selectedHostIds={selectedHostIds}
               toggleHostSelection={toggleHostSelection}
@@ -264,6 +296,7 @@ interface HostTreeItemProps {
   onDeleteHost: (host: Host) => void;
   onCopyCredentials: (host: Host) => void;
   moveHostToGroup: (hostId: string, groupPath: string | null) => void;
+
   isMultiSelectMode?: boolean;
   selectedHostIds?: Set<string>;
   toggleHostSelection?: (hostId: string) => void;
@@ -278,6 +311,7 @@ const HostTreeItem: React.FC<HostTreeItemProps> = ({
   onDeleteHost,
   onCopyCredentials,
   moveHostToGroup: _moveHostToGroup,
+
   isMultiSelectMode,
   selectedHostIds,
   toggleHostSelection,
@@ -348,6 +382,15 @@ const HostTreeItem: React.FC<HostTreeItemProps> = ({
                 {tags.length > 2 && '...'}
               </span>
             )}
+            <button
+              className="h-7 w-7 flex items-center justify-center rounded-md hover:bg-secondary/80 transition-colors"
+              onClick={(e) => {
+                e.stopPropagation();
+                onEditHost(host);
+              }}
+            >
+              <Edit2 size={13} />
+            </button>
           </div>
         </div>
       </ContextMenuTrigger>
@@ -364,7 +407,7 @@ const HostTreeItem: React.FC<HostTreeItemProps> = ({
         <ContextMenuItem onClick={() => onCopyCredentials(host)}>
           <Server className="mr-2 h-4 w-4" /> {t("vault.hosts.copyCredentials")}
         </ContextMenuItem>
-        <ContextMenuItem 
+        <ContextMenuItem
           onClick={() => onDeleteHost(host)}
           className="text-destructive focus:text-destructive"
         >
@@ -396,12 +439,15 @@ export const HostTreeView: React.FC<HostTreeViewProps> = ({
   moveGroup,
   managedGroupPaths,
   onUnmanageGroup,
+
   isMultiSelectMode,
   selectedHostIds,
   toggleHostSelection,
+  getDropTargetClasses,
+  setDragOverDropTarget,
 }) => {
   const { t } = useI18n();
-  
+
   // Use external state if provided, otherwise use local persistent state
   const localTreeState = useTreeExpandedState(STORAGE_KEY_VAULT_HOSTS_TREE_EXPANDED);
   
@@ -522,6 +568,8 @@ export const HostTreeView: React.FC<HostTreeViewProps> = ({
           isMultiSelectMode={isMultiSelectMode}
           selectedHostIds={selectedHostIds}
           toggleHostSelection={toggleHostSelection}
+          getDropTargetClasses={getDropTargetClasses}
+          setDragOverDropTarget={setDragOverDropTarget}
         />
       ))}
 
@@ -552,4 +600,4 @@ export const HostTreeView: React.FC<HostTreeViewProps> = ({
       )}
     </div>
   );
-};
+};

components/KeyboardInteractiveModal.tsx

@@ -4,7 +4,7 @@
  * This modal displays prompts from the SSH server and collects user responses.
  */
 import { Eye, EyeOff, KeyRound, Loader2 } from "lucide-react";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { Button } from "./ui/button";
 import {
@@ -24,6 +24,7 @@ export interface KeyboardInteractivePrompt {
 
 export interface KeyboardInteractiveRequest {
   requestId: string;
+  sessionId?: string;
   name: string;
   instructions: string;
   prompts: KeyboardInteractivePrompt[];
@@ -31,9 +32,18 @@ export interface KeyboardInteractiveRequest {
   savedPassword?: string | null;
 }
 
+const isAPasswordPrompt = (prompt: KeyboardInteractivePrompt) => {
+  if (prompt.echo) return false;
+  const lower = prompt.prompt.toLowerCase();
+  if (!lower.includes("password")) return false;
+  // Exclude OTP / one-time password / verification code prompts
+  if (lower.includes("one-time") || lower.includes("otp") || lower.includes("verification") || lower.includes("token") || lower.includes("code")) return false;
+  return true;
+};
+
 interface KeyboardInteractiveModalProps {
   request: KeyboardInteractiveRequest | null;
-  onSubmit: (requestId: string, responses: string[]) => void;
+  onSubmit: (requestId: string, responses: string[], savePassword?: string) => void;
   onCancel: (requestId: string) => void;
 }
 
@@ -46,15 +56,28 @@ export const KeyboardInteractiveModal: React.FC<KeyboardInteractiveModalProps> =
   const [responses, setResponses] = useState<string[]>([]);
   const [showPasswords, setShowPasswords] = useState<boolean[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [savePassword, setSavePassword] = useState(false);
+
+  // Index of the first password prompt (if any)
+  const passwordPromptIndex = useMemo(() => {
+    if (!request) return -1;
+    return request.prompts.findIndex(p => isAPasswordPrompt(p));
+  }, [request]);
 
   // Reset state when request changes
   useEffect(() => {
     if (request) {
-      setResponses(request.prompts.map(() => ""));
+      const initial = request.prompts.map(() => "");
+      // Auto-fill saved password into the password prompt
+      if (request.savedPassword && passwordPromptIndex >= 0) {
+        initial[passwordPromptIndex] = request.savedPassword;
+      }
+      setResponses(initial);
       setShowPasswords(request.prompts.map(() => false));
       setIsSubmitting(false);
+      setSavePassword(false);
     }
-  }, [request]);
+  }, [request, passwordPromptIndex]);
 
   const handleResponseChange = useCallback((index: number, value: string) => {
     setResponses((prev) => {
@@ -75,8 +98,11 @@ export const KeyboardInteractiveModal: React.FC<KeyboardInteractiveModalProps> =
   const handleSubmit = useCallback(() => {
     if (!request || isSubmitting) return;
     setIsSubmitting(true);
-    onSubmit(request.requestId, responses);
-  }, [request, responses, onSubmit, isSubmitting]);
+    const passwordToSave = savePassword && passwordPromptIndex >= 0
+      ? responses[passwordPromptIndex]
+      : undefined;
+    onSubmit(request.requestId, responses, passwordToSave);
+  }, [request, responses, onSubmit, isSubmitting, savePassword, passwordPromptIndex]);
 
   const handleCancel = useCallback(() => {
     if (!request) return;
@@ -154,19 +180,20 @@ export const KeyboardInteractiveModal: React.FC<KeyboardInteractiveModalProps> =
                     </button>
                   )}
                 </div>
-                {/* Use saved password button - shown below input, right-aligned */}
-                {isPassword && request.savedPassword && !responses[index] && (
-                  <div className="flex justify-end">
-                    <button
-                      type="button"
-                      className="flex items-center gap-1 text-xs text-primary hover:text-primary/80 disabled:opacity-50"
-                      onClick={() => handleResponseChange(index, request.savedPassword!)}
+                {/* Save password checkbox - shown only for the first password prompt */}
+                {index === passwordPromptIndex && (
+                  <label className="flex items-center gap-2 cursor-pointer select-none">
+                    <input
+                      type="checkbox"
+                      checked={savePassword}
+                      onChange={(e) => setSavePassword(e.target.checked)}
                       disabled={isSubmitting}
-                    >
-                      <KeyRound size={12} />
-                      <span>{t("keyboard.interactive.useSavedPassword")}</span>
-                    </button>
-                  </div>
+                      className="accent-primary"
+                    />
+                    <span className="text-xs text-muted-foreground">
+                      {t("keyboard.interactive.savePassword")}
+                    </span>
+                  </label>
                 )}
               </div>
             );

components/KeychainManager.tsx

@@ -515,12 +515,12 @@ echo $3 >> "$FILE"`);
       {/* Main Content */}
       <div
         className={cn(
-          "flex-1 overflow-y-auto transition-all duration-200",
+          "flex-1 flex flex-col min-h-0 transition-all duration-200",
           panel.type !== "closed" && "mr-[380px]",
         )}
       >
         {/* Toolbar */}
-        <div className="flex flex-wrap items-center gap-3 bg-secondary/60 border-b border-border/70 px-3 py-1.5">
+        <div className="h-14 px-4 py-2 flex items-center gap-3 bg-secondary/80 backdrop-blur border-b border-border/50 shrink-0">
           {/* Filter Tabs */}
           <div className="flex items-center gap-1">
             {/* KEY button with split interaction: left=switch view, right=dropdown */}
@@ -528,16 +528,15 @@ echo $3 >> "$FILE"`);
               <div
                 className={cn(
                   "flex items-center rounded-md transition-colors",
-                  activeFilter === "key" ? "bg-primary/15" : "hover:bg-accent",
+                  activeFilter === "key"
+                    ? "bg-foreground/10 text-foreground hover:bg-foreground/15"
+                    : "bg-foreground/5 text-foreground hover:bg-foreground/10",
                 )}
               >
                 <Button
                   size="sm"
                   variant="ghost"
-                  className={cn(
-                    "h-8 px-3 gap-2 rounded-r-none hover:bg-transparent",
-                    activeFilter === "key" && "text-primary",
-                  )}
+                  className="h-10 px-3 gap-2 rounded-r-none hover:bg-transparent text-inherit"
                   onClick={() => setActiveFilter("key")}
                 >
                   <Key size={14} />
@@ -547,10 +546,7 @@ echo $3 >> "$FILE"`);
                   <Button
                     size="sm"
                     variant="ghost"
-                    className={cn(
-                      "h-8 px-1.5 rounded-l-none hover:bg-transparent",
-                      activeFilter === "key" && "text-primary",
-                    )}
+                    className="h-10 px-1.5 rounded-l-none hover:bg-transparent text-inherit"
                   >
                     <ChevronDown size={12} />
                   </Button>
@@ -589,33 +585,24 @@ echo $3 >> "$FILE"`);
                 className={cn(
                   "flex items-center rounded-md transition-colors",
                   activeFilter === "certificate"
-                    ? "bg-primary/15"
-                    : "hover:bg-accent",
+                    ? "bg-foreground/10 text-foreground hover:bg-foreground/15"
+                    : "bg-foreground/5 text-foreground hover:bg-foreground/10",
                 )}
               >
                 <Button
                   size="sm"
                   variant="ghost"
-                  className={cn(
-                    "h-8 px-3 gap-2 rounded-r-none hover:bg-transparent",
-                    activeFilter === "certificate" && "text-primary",
-                  )}
+                  className="h-10 px-3 gap-2 rounded-r-none hover:bg-transparent text-inherit"
                   onClick={() => setActiveFilter("certificate")}
                 >
                   <BadgeCheck size={14} />
                   {t("keychain.filter.certificate")}
-                  <span className="text-[10px] px-1.5 rounded-full bg-muted text-muted-foreground">
-                    {keys.filter((k) => k.certificate).length}
-                  </span>
                 </Button>
                 <DropdownTrigger asChild>
                   <Button
                     size="sm"
                     variant="ghost"
-                    className={cn(
-                      "h-8 px-1.5 rounded-l-none hover:bg-transparent",
-                      activeFilter === "certificate" && "text-primary",
-                    )}
+                    className="h-10 px-1.5 rounded-l-none hover:bg-transparent text-inherit"
                   >
                     <ChevronDown size={12} />
                   </Button>
@@ -645,7 +632,7 @@ echo $3 >> "$FILE"`);
                   value={search}
                   onChange={(e) => setSearch(e.target.value)}
                   placeholder={t("common.searchPlaceholder")}
-                  className="h-9 pl-8 w-full"
+                  className="h-10 pl-9 w-full bg-secondary border-border/60 text-sm"
                 />
               </div>
             )}
@@ -654,7 +641,7 @@ echo $3 >> "$FILE"`);
                 <Button
                   variant="ghost"
                   size="icon"
-                  className="h-9 w-9 flex-shrink-0"
+                  className="h-10 w-10 flex-shrink-0"
                 >
                   {viewMode === "grid" ? (
                     <LayoutGrid size={16} />
@@ -684,8 +671,10 @@ echo $3 >> "$FILE"`);
           </div>
         </div>
 
-        {/* Keys Section */}
-        <div className="space-y-3 p-3">
+        {/* Scrollable Content */}
+        <div className="flex-1 overflow-y-auto">
+          {/* Keys Section */}
+          <div className="space-y-3 p-3">
           <div className="flex items-center justify-between">
             <h2 className="text-base font-semibold text-muted-foreground">
               {t("keychain.section.keys")}
@@ -817,6 +806,7 @@ echo $3 >> "$FILE"`);
             </div>
           </div>
         )}
+        </div>
       </div>
 
       {/* Slide-out Panel */}

components/KnownHostsManager.tsx

@@ -455,7 +455,7 @@ const KnownHostsManager: React.FC<KnownHostsManagerProps> = ({
   return (
     <div className="h-full flex flex-col">
       {/* Header */}
-      <div className="flex items-center gap-3 px-4 py-3 border-b border-border/50 bg-secondary/50">
+      <div className="h-14 px-4 py-2 flex items-center gap-3 border-b border-border/50 bg-secondary/80 backdrop-blur">
         <div className="flex-1 min-w-0 flex items-center gap-2">
           <div className="relative flex-1 max-w-xs">
             <Search
@@ -464,7 +464,7 @@ const KnownHostsManager: React.FC<KnownHostsManagerProps> = ({
             />
             <Input
               placeholder={t("knownHosts.search.placeholder")}
-              className="pl-9 h-9 bg-background border-border/60 text-sm"
+              className="pl-9 h-10 bg-secondary border-border/60 text-sm"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
             />
@@ -474,7 +474,7 @@ const KnownHostsManager: React.FC<KnownHostsManagerProps> = ({
           {/* View Mode Toggle */}
           <Dropdown>
             <DropdownTrigger asChild>
-              <Button variant="ghost" size="icon" className="h-9 w-9">
+              <Button variant="ghost" size="icon" className="h-10 w-10">
                 {viewMode === "grid" ? (
                   <LayoutGrid size={16} />
                 ) : (
@@ -505,15 +505,14 @@ const KnownHostsManager: React.FC<KnownHostsManagerProps> = ({
           <SortDropdown
             value={sortMode}
             onChange={setSortMode}
-            className="h-9 w-9"
+            className="h-10 w-10"
           />
         </div>
         <div className="w-px h-5 bg-border/50" />
         <div className="flex items-center gap-2">
           <Button
-            variant="ghost"
-            size="sm"
-            className="h-9 px-3 text-xs"
+            variant="secondary"
+            className="h-10 px-3 bg-foreground/5 text-foreground hover:bg-foreground/10 border-border/40"
             onClick={() => handleScanSystem()}
             disabled={isScanning}
           >
@@ -532,8 +531,7 @@ const KnownHostsManager: React.FC<KnownHostsManagerProps> = ({
           />
           <Button
             variant="secondary"
-            size="sm"
-            className="h-9 px-3 text-xs"
+            className="h-10 px-3 bg-foreground/5 text-foreground hover:bg-foreground/10 border-border/40"
             onClick={openFilePicker}
           >
             <Import size={14} className="mr-2" />

components/LogView.tsx

@@ -36,19 +36,35 @@ const LogViewComponent: React.FC<LogViewProps> = ({
     const [isReady, setIsReady] = useState(false);
     const [themeModalOpen, setThemeModalOpen] = useState(false);
     const [isExporting, setIsExporting] = useState(false);
+    const [previewTheme, setPreviewTheme] = useState<TerminalTheme | null>(null);
 
     // Subscribe to custom theme changes so editing triggers re-render
     const customThemes = useCustomThemes();
+    const explicitThemeId = useMemo(() => {
+        if (!log.themeId) return undefined;
+        const exists = TERMINAL_THEMES.some((theme) => theme.id === log.themeId)
+            || customThemes.some((theme) => theme.id === log.themeId);
+        return exists ? log.themeId : undefined;
+    }, [customThemes, log.themeId]);
+
+    useEffect(() => {
+        if (log.themeId && !explicitThemeId) {
+            onUpdateLog(log.id, { themeId: undefined });
+        }
+    }, [explicitThemeId, log.id, log.themeId, onUpdateLog]);
 
     // Use log's saved theme/fontSize or fall back to defaults
     const currentTheme = useMemo(() => {
-        if (log.themeId) {
-            return TERMINAL_THEMES.find(t => t.id === log.themeId)
-                || customThemes.find(t => t.id === log.themeId)
+        if (previewTheme) {
+            return previewTheme;
+        }
+        if (explicitThemeId) {
+            return TERMINAL_THEMES.find(t => t.id === explicitThemeId)
+                || customThemes.find(t => t.id === explicitThemeId)
                 || defaultTerminalTheme;
         }
         return defaultTerminalTheme;
-    }, [log.themeId, defaultTerminalTheme, customThemes]);
+    }, [customThemes, defaultTerminalTheme, explicitThemeId, previewTheme]);
 
     const currentFontSize = log.fontSize ?? defaultFontSize;
 
@@ -69,6 +85,12 @@ const LogViewComponent: React.FC<LogViewProps> = ({
         onUpdateLog(log.id, { themeId });
     }, [log.id, onUpdateLog]);
 
+    useEffect(() => {
+        if (!themeModalOpen) {
+            setPreviewTheme(null);
+        }
+    }, [themeModalOpen]);
+
     // Handle font size change
     const handleFontSizeChange = useCallback((fontSize: number) => {
         onUpdateLog(log.id, { fontSize });
@@ -295,10 +317,13 @@ const LogViewComponent: React.FC<LogViewProps> = ({
             <ThemeCustomizeModal
                 open={themeModalOpen}
                 onClose={() => setThemeModalOpen(false)}
-                currentThemeId={currentTheme.id}
+                currentThemeId={explicitThemeId}
+                displayThemeId={currentTheme.id}
                 currentFontSize={currentFontSize}
                 onThemeChange={handleThemeChange}
+                onThemeReset={() => onUpdateLog(log.id, { themeId: undefined })}
                 onFontSizeChange={handleFontSizeChange}
+                onPreviewThemeChange={setPreviewTheme}
             />
         </div>
     );

components/PortForwardingNew.tsx

@@ -14,12 +14,14 @@ import React, { useCallback, useState } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { usePortForwardingState } from "../application/state/usePortForwardingState";
 import {
+  GroupConfig,
   Host,
   ManagedSource,
   PortForwardingRule,
   PortForwardingType,
   SSHKey,
 } from "../domain/models";
+import { resolveGroupDefaults, applyGroupDefaults } from "../domain/groupConfig";
 import { cn } from "../lib/utils";
 import SelectHostPanel from "./SelectHostPanel";
 import {
@@ -66,6 +68,7 @@ interface PortForwardingProps {
   identities?: import('../domain/models').Identity[];
   customGroups: string[];
   managedSources?: ManagedSource[];
+  groupConfigs?: GroupConfig[];
   onNewHost?: () => void;
   onSaveHost?: (host: Host) => void;
   onCreateGroup?: (groupPath: string) => void;
@@ -77,6 +80,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
   identities = [],
   customGroups: _customGroups,
   managedSources = [],
+  groupConfigs = [],
   onNewHost: _onNewHost,
   onSaveHost,
   onCreateGroup: _onCreateGroup,
@@ -113,8 +117,8 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
   // Start a port forwarding tunnel
   const handleStartTunnel = useCallback(
     async (rule: PortForwardingRule) => {
-      const _host = hosts.find((h) => h.id === rule.hostId);
-      if (!_host) {
+      const _rawHost = hosts.find((h) => h.id === rule.hostId);
+      if (!_rawHost) {
         setRuleStatus(rule.id, "error", t("pf.error.hostNotFound"));
         toast.error(
           t("pf.error.hostNotFound"),
@@ -123,6 +127,10 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
         return;
       }
 
+      const _host = _rawHost.group
+        ? applyGroupDefaults(_rawHost, resolveGroupDefaults(_rawHost.group, groupConfigs))
+        : _rawHost;
+
       setPendingOperations((prev) => new Set([...prev, rule.id]));
       let errorShown = false;
 
@@ -161,7 +169,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
         });
       }
     },
-    [hosts, identities, keys, setRuleStatus, startTunnel, t],
+    [hosts, identities, keys, groupConfigs, setRuleStatus, startTunnel, t],
   );
 
   // Stop a port forwarding tunnel
@@ -559,10 +567,13 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
         )}
       >
         {/* Toolbar */}
-        <div className="h-14 px-4 flex items-center gap-3 bg-secondary/60 border-b border-border/60 relative z-20">
+        <div className="h-14 px-4 py-2 flex items-center gap-3 bg-secondary/80 backdrop-blur border-b border-border/50 relative z-20">
           <Dropdown open={showNewMenu} onOpenChange={setShowNewMenu}>
             <DropdownTrigger asChild>
-              <Button variant="secondary" className="h-9 px-3 gap-2">
+              <Button
+                variant="secondary"
+                className="h-10 px-3 gap-2 bg-foreground/5 text-foreground hover:bg-foreground/10 border-border/40"
+              >
                 <Zap size={14} />
                 {t("pf.action.newForwarding")}
                 <ChevronDown
@@ -610,7 +621,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
               />
               <Input
                 placeholder={t("common.searchPlaceholder")}
-                className="h-9 pl-8 w-44"
+                className="h-10 pl-9 w-44 bg-secondary border-border/60 text-sm"
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
               />
@@ -619,7 +630,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
             {/* View mode toggle */}
             <Dropdown>
               <DropdownTrigger asChild>
-                <Button variant="ghost" size="icon" className="h-9 w-9">
+                <Button variant="ghost" size="icon" className="h-10 w-10">
                   {viewMode === "grid" ? (
                     <LayoutGrid size={16} />
                   ) : (
@@ -656,7 +667,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
             <SortDropdown
               value={sortMode}
               onChange={setSortMode}
-              className="h-9 w-9"
+              className="h-10 w-10"
             />
           </div>
         </div>

components/QuickAddSnippetDialog.tsx

@@ -0,0 +1,219 @@
+/**
+ * QuickAddSnippetDialog — lightweight "new snippet" modal mounted at the
+ * App root and triggered by the `netcatty:snippets:add` window event.
+ *
+ * Intentionally minimal: label + command + package only. Advanced fields
+ * (target hosts, shortkey, tags) can be set later via the full Snippets
+ * manager. This keeps the user in their terminal context instead of
+ * navigating to the Vault view just to add a command.
+ */
+
+import { Package } from 'lucide-react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useI18n } from '../application/i18n/I18nProvider';
+import type { Snippet } from '../domain/models';
+import { Button } from './ui/button';
+import { Combobox } from './ui/combobox';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Textarea } from './ui/textarea';
+
+export interface QuickAddSnippetDialogProps {
+  snippets: Snippet[];
+  packages: string[];
+  onCreateSnippet: (snippet: Snippet) => void;
+  onUpdateSnippet?: (snippet: Snippet) => void;
+  onCreatePackage?: (packagePath: string) => void;
+}
+
+export const QuickAddSnippetDialog: React.FC<QuickAddSnippetDialogProps> = ({
+  snippets,
+  packages,
+  onCreateSnippet,
+  onUpdateSnippet,
+  onCreatePackage,
+}) => {
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const [label, setLabel] = useState('');
+  const [command, setCommand] = useState('');
+  const [packagePath, setPackagePath] = useState('');
+  const [editing, setEditing] = useState<Snippet | null>(null);
+  const labelInputRef = useRef<HTMLInputElement>(null);
+
+  // Listen for the global "add snippet" request dispatched by the
+  // terminal-side ScriptsSidePanel + button. We reset form state on
+  // every open so stale input from a previous cancel does not leak.
+  useEffect(() => {
+    const handler = () => {
+      setEditing(null);
+      setLabel('');
+      setCommand('');
+      setPackagePath('');
+      setOpen(true);
+    };
+    window.addEventListener('netcatty:snippets:add', handler);
+    return () => window.removeEventListener('netcatty:snippets:add', handler);
+  }, []);
+
+  // Sibling event for editing an existing snippet from the ScriptsSidePanel
+  // context menu. Prefills the form and flips the dialog into update mode.
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent<{ snippet?: Snippet }>).detail;
+      const snippet = detail?.snippet;
+      if (!snippet) return;
+      setEditing(snippet);
+      setLabel(snippet.label ?? '');
+      setCommand(snippet.command ?? '');
+      setPackagePath(snippet.package ?? '');
+      setOpen(true);
+    };
+    window.addEventListener('netcatty:snippets:edit', handler);
+    return () => window.removeEventListener('netcatty:snippets:edit', handler);
+  }, []);
+
+  // Auto-focus the label input once the dialog renders, so the user can
+  // start typing immediately after clicking the + button.
+  useEffect(() => {
+    if (!open) return;
+    const id = window.setTimeout(() => labelInputRef.current?.focus(), 50);
+    return () => window.clearTimeout(id);
+  }, [open]);
+
+  // Derive combobox options from the union of existing packages (from
+  // props) and any package path referenced by an existing snippet, so
+  // the user can reuse anything they see in the main snippets view.
+  const packageOptions = useMemo(() => {
+    const set = new Set<string>();
+    for (const p of packages) {
+      if (p) set.add(p);
+    }
+    for (const s of snippets) {
+      if (s.package) set.add(s.package);
+    }
+    return Array.from(set).sort().map((value) => ({ value, label: value }));
+  }, [packages, snippets]);
+
+  const canSave = label.trim().length > 0 && command.trim().length > 0;
+
+  const handleSave = useCallback(() => {
+    if (!canSave) return;
+    const trimmedPackage = packagePath.trim();
+    // If the user typed a brand new package name, surface it to the parent
+    // so it can be added to the user's package list alongside the snippet.
+    if (trimmedPackage && !packages.includes(trimmedPackage)) {
+      onCreatePackage?.(trimmedPackage);
+    }
+    if (editing && onUpdateSnippet) {
+      // Preserve tags/targets/shortkey/noAutoRun etc. that this lightweight
+      // dialog does not expose — only the three quick-edit fields change.
+      onUpdateSnippet({
+        ...editing,
+        label: label.trim(),
+        command,
+        package: trimmedPackage || '',
+      });
+    } else {
+      onCreateSnippet({
+        id: crypto.randomUUID(),
+        label: label.trim(),
+        command, // preserve whitespace in multi-line commands
+        tags: [],
+        package: trimmedPackage || '',
+        targets: [],
+      });
+    }
+    setOpen(false);
+  }, [canSave, packagePath, packages, onCreatePackage, onCreateSnippet, onUpdateSnippet, editing, label, command]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      // Cmd/Ctrl+Enter from anywhere in the dialog saves the snippet.
+      if ((e.metaKey || e.ctrlKey) && e.key === 'Enter' && canSave) {
+        e.preventDefault();
+        handleSave();
+      }
+    },
+    [canSave, handleSave],
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="max-w-md" onKeyDown={handleKeyDown}>
+        <DialogHeader>
+          <DialogTitle>
+            {t(editing ? 'snippets.panel.editTitle' : 'snippets.panel.newTitle')}
+          </DialogTitle>
+          <DialogDescription>
+            {t('snippets.empty.desc')}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3">
+          <div className="space-y-1.5">
+            <Label htmlFor="quick-add-snippet-label" className="text-xs">
+              {t('snippets.field.description')}
+            </Label>
+            <Input
+              id="quick-add-snippet-label"
+              ref={labelInputRef}
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+              placeholder={t('snippets.field.descriptionPlaceholder')}
+              className="h-9"
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="quick-add-snippet-command" className="text-xs">
+              {t('snippets.field.scriptRequired')}
+            </Label>
+            <Textarea
+              id="quick-add-snippet-command"
+              value={command}
+              onChange={(e) => setCommand(e.target.value)}
+              placeholder="echo hello"
+              className="min-h-[120px] font-mono text-xs"
+              spellCheck={false}
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label className="text-xs flex items-center gap-1.5">
+              <Package size={12} /> {t('snippets.field.package')}
+            </Label>
+            <Combobox
+              value={packagePath}
+              onValueChange={setPackagePath}
+              options={packageOptions}
+              placeholder={t('snippets.field.packagePlaceholder')}
+              allowCreate
+              onCreateNew={setPackagePath}
+              createText={t('snippets.field.createPackage')}
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={handleSave} disabled={!canSave}>
+            {t('common.save')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default QuickAddSnippetDialog;

components/QuickSwitcher.tsx

@@ -1,8 +1,9 @@
 import {
   Folder,
+  FolderLock,
   LayoutGrid,
+  Plus,
   Search,
-  Shield,
   Terminal,
   TerminalSquare,
 } from "lucide-react";
@@ -10,9 +11,10 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "
 import { useI18n } from "../application/i18n/I18nProvider";
 import { Host, TerminalSession, Workspace } from "../types";
 import { KeyBinding } from "../domain/models";
+import { useDiscoveredShells, getShellIconPath, isMonochromeShellIcon } from "../lib/useDiscoveredShells";
 
 type QuickSwitcherItem = {
-  type: "host" | "tab" | "workspace" | "action";
+  type: "host" | "tab" | "workspace" | "action" | "shell";
   id: string;
   data?: Host | TerminalSession | Workspace;
 };
@@ -66,9 +68,10 @@ interface QuickSwitcherProps {
   onSelect: (host: Host) => void;
   onSelectTab: (tabId: string) => void;
   onClose: () => void;
-  onCreateLocalTerminal?: () => void;
-  // onCreateWorkspace removed - feature not currently used
+  onCreateLocalTerminal?: (shell?: { command: string; args?: string[]; name?: string; icon?: string }) => void;
+  onCreateWorkspace?: () => void;
   keyBindings?: KeyBinding[];
+  showSftpTab: boolean;
 }
 
 const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
@@ -82,9 +85,23 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
   onSelectTab,
   onClose,
   onCreateLocalTerminal,
+  onCreateWorkspace,
   keyBindings,
+  showSftpTab,
 }) => {
   const { t } = useI18n();
+  const discoveredShells = useDiscoveredShells();
+
+  const filteredShells = useMemo(() => {
+    const list = !query.trim()
+      ? discoveredShells
+      : discoveredShells.filter(
+          (s) => s.name.toLowerCase().includes(query.toLowerCase()) || s.id.toLowerCase().includes(query.toLowerCase())
+        );
+    // Default shell first
+    return [...list].sort((a, b) => (a.isDefault === b.isDefault ? 0 : a.isDefault ? -1 : 1));
+  }, [discoveredShells, query]);
+
   // Get hotkey display strings
   const getHotkeyLabel = useCallback((actionId: string) => {
     const binding = keyBindings?.find(k => k.id === actionId);
@@ -98,13 +115,17 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
 
   // Reset state when opening
   useEffect(() => {
-    if (isOpen) {
-      setSelectedIndex(0);
-      // Auto focus the input after a short delay
-      setTimeout(() => {
-        inputRef.current?.focus();
-      }, 50);
-    }
+    if (!isOpen) return;
+
+    const focusTimer = window.setTimeout(() => {
+      inputRef.current?.focus();
+    }, 50);
+
+    setSelectedIndex(0);
+
+    return () => {
+      window.clearTimeout(focusTimer);
+    };
   }, [isOpen]);
 
   // Handle clicks outside the container
@@ -144,20 +165,30 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
       );
       // Tabs (built-in + sessions + workspaces)
       items.push({ type: "tab", id: "vault" });
-      items.push({ type: "tab", id: "sftp" });
+      if (showSftpTab) items.push({ type: "tab", id: "sftp" });
       orphanSessions.forEach((s) =>
         items.push({ type: "tab", id: s.id, data: s }),
       );
       workspaces.forEach((w) =>
         items.push({ type: "workspace", id: w.id, data: w }),
       );
-      // Quick connect actions
-      items.push({ type: "action", id: "local-terminal" });
+      // Local shells (or fallback action if discovery not ready)
+      if (filteredShells.length > 0) {
+        filteredShells.forEach((shell) =>
+          items.push({ type: "shell", id: shell.id }),
+        );
+      } else {
+        items.push({ type: "action", id: "local-terminal" });
+      }
     } else {
       // Recent connections only
       results.forEach((host) =>
         items.push({ type: "host", id: host.id, data: host }),
       );
+      // Also include matching shells in search results
+      filteredShells.forEach((shell) =>
+        items.push({ type: "shell", id: shell.id }),
+      );
     }
 
     // Build index map for O(1) lookup
@@ -167,7 +198,7 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
     });
 
     return { flatItems: items, itemIndexMap: indexMap };
-  }, [showCategorized, results, orphanSessions, workspaces]);
+  }, [showCategorized, results, orphanSessions, workspaces, filteredShells, showSftpTab]);
 
   // O(1) index lookup
   const getItemIndex = useCallback((type: string, id: string) => {
@@ -206,6 +237,14 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
           onClose();
         }
         break;
+      case "shell": {
+        const shell = discoveredShells.find(s => s.id === item.id);
+        if (shell && onCreateLocalTerminal) {
+          onCreateLocalTerminal({ command: shell.command, args: shell.args, name: shell.name, icon: shell.icon });
+          onClose();
+        }
+        break;
+      }
     }
   };
 
@@ -243,7 +282,7 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
         <ScrollArea className="flex-1 h-full">
           {/* Categorized view: Hosts/Tabs/Quick connect */}
           <div>
-            {/* Jump To hint */}
+            {/* Jump To hint + New Workspace action */}
             <div className="px-4 py-2 flex items-center gap-2">
               <span className="text-xs text-muted-foreground">{t("qs.jumpTo")}</span>
               {quickSwitchKey && (
@@ -251,6 +290,20 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
                   {quickSwitchKey.replace(/ \+ /g, '+')}
                 </kbd>
               )}
+              {onCreateWorkspace && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    onCreateWorkspace();
+                    onClose();
+                  }}
+                  className="ml-auto inline-flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground border border-border rounded px-1.5 py-0.5 transition-colors hover:bg-muted/50"
+                  title="New Workspace"
+                >
+                  <Plus size={11} />
+                  <span>New Workspace</span>
+                </button>
+              )}
             </div>
 
             {/* Hosts section */}
@@ -282,12 +335,12 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
               </div>
 
               {/* Built-in tabs */}
-              {["vault", "sftp"].map((tabId) => {
+              {(showSftpTab ? ["vault", "sftp"] : ["vault"]).map((tabId) => {
                 const idx = getItemIndex("tab", tabId);
                 const isSelected = idx === selectedIndex;
                 const icon =
                   tabId === "vault" ? (
-                    <Shield size={16} />
+                    <FolderLock size={16} />
                   ) : (
                     <Folder size={16} />
                   );
@@ -365,21 +418,60 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
               })}
             </div>
 
-            {/* Quick connect section */}
-            <div>
-              <div className="px-4 py-1.5">
-                <span className="text-xs font-medium text-muted-foreground">
-                  Quick connect
-                </span>
+            {/* Local Shells section */}
+            {/* Local Shells or fallback Local Terminal */}
+            {filteredShells.length > 0 ? (
+              <div>
+                <div className="px-4 py-1.5">
+                  <span className="text-xs font-medium text-muted-foreground">
+                    {t("qs.localShells")}
+                  </span>
+                </div>
+                {filteredShells.map((shell) => {
+                  const idx = getItemIndex("shell", shell.id);
+                  const isSelected = idx === selectedIndex;
+                  return (
+                    <div
+                      key={shell.id}
+                      className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${
+                        isSelected ? "bg-primary/15" : "hover:bg-muted/50"
+                      }`}
+                      onClick={() => {
+                        if (onCreateLocalTerminal) {
+                          onCreateLocalTerminal({ command: shell.command, args: shell.args, name: shell.name, icon: shell.icon });
+                          onClose();
+                        }
+                      }}
+                      onMouseEnter={() => setSelectedIndex(idx)}
+                    >
+                      <img
+                        src={getShellIconPath(shell.icon)}
+                        alt={shell.name}
+                        className={`h-6 w-6 shrink-0${isMonochromeShellIcon(shell.icon) ? " dark:invert" : ""}`}
+                      />
+                      <span className="text-sm font-medium">{shell.name}</span>
+                      {shell.isDefault && (
+                        <span className="text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
+                          {t("qs.default")}
+                        </span>
+                      )}
+                    </div>
+                  );
+                })}
               </div>
-
-              {/* Local Terminal */}
-              {onCreateLocalTerminal && (
+            ) : onCreateLocalTerminal && (
+              <div>
+                <div className="px-4 py-1.5">
+                  <span className="text-xs font-medium text-muted-foreground">
+                    {t("qs.localShells")}
+                  </span>
+                </div>
                 <div
-                  className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${getItemIndex("action", "local-terminal") === selectedIndex
-                    ? "bg-primary/15"
-                    : "hover:bg-muted/50"
-                    }`}
+                  className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${
+                    getItemIndex("action", "local-terminal") === selectedIndex
+                      ? "bg-primary/15"
+                      : "hover:bg-muted/50"
+                  }`}
                   onClick={() => {
                     onCreateLocalTerminal();
                     onClose();
@@ -393,10 +485,8 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
                   </div>
                   <span className="text-sm font-medium">{t("qs.localTerminal")}</span>
                 </div>
-              )}
-
-              {/* Serial removed (not supported) */}
-            </div>
+              </div>
+            )}
           </div>
         </ScrollArea>
       </div>

components/ScriptsSidePanel.tsx

@@ -5,11 +5,17 @@
  * Clicking a snippet executes it in the focused terminal session.
  */
 
-import { ChevronRight, Package, Search, Zap } from 'lucide-react';
+import { ChevronRight, Edit2, Package, Plus, Search, Trash2, Zap } from 'lucide-react';
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { useI18n } from '../application/i18n/I18nProvider';
 import { cn } from '../lib/utils';
 import { Snippet } from '../types';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from './ui/context-menu';
 import { Input } from './ui/input';
 import { ScrollArea } from './ui/scroll-area';
 
@@ -119,15 +125,37 @@ const ScriptsSidePanelInner: React.FC<ScriptsSidePanelProps> = ({
     onSnippetClick(command, noAutoRun);
   }, [onSnippetClick]);
 
+  const handleAddSnippet = useCallback(() => {
+    // Let the App shell listen and navigate to the Snippets section with
+    // the "add" panel pre-opened, so the user does not have to leave the
+    // terminal to jump back and click "New Snippet".
+    window.dispatchEvent(new CustomEvent('netcatty:snippets:add'));
+  }, []);
+
+  const handleEditSnippet = useCallback((snippet: Snippet) => {
+    window.dispatchEvent(
+      new CustomEvent('netcatty:snippets:edit', { detail: { snippet } }),
+    );
+  }, []);
+
+  const handleDeleteSnippet = useCallback((id: string) => {
+    window.dispatchEvent(
+      new CustomEvent('netcatty:snippets:delete', { detail: { id } }),
+    );
+  }, []);
+
   if (!isVisible) return null;
 
   const hasAnyContent = snippets.length > 0 || packages.length > 0;
 
   return (
-    <div className="h-full flex flex-col bg-background overflow-hidden">
-      {/* Search */}
-      <div className="shrink-0 px-2 py-1.5 border-b border-border/50">
-        <div className="relative">
+    <div
+      className="h-full flex flex-col bg-background overflow-hidden"
+      data-section="snippets-panel"
+    >
+      {/* Search + Add */}
+      <div className="shrink-0 px-2 py-1.5 border-b border-border/50 flex items-center gap-1.5">
+        <div className="relative flex-1 min-w-0">
           <Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
           <Input
             value={search}
@@ -136,6 +164,15 @@ const ScriptsSidePanelInner: React.FC<ScriptsSidePanelProps> = ({
             className="h-7 pl-7 text-xs bg-muted/30 border-none"
           />
         </div>
+        <button
+          type="button"
+          onClick={handleAddSnippet}
+          title={t('snippets.action.newSnippet')}
+          aria-label={t('snippets.action.newSnippet')}
+          className="shrink-0 h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors"
+        >
+          <Plus size={14} />
+        </button>
       </div>
 
       {/* Breadcrumb */}
@@ -194,16 +231,30 @@ const ScriptsSidePanelInner: React.FC<ScriptsSidePanelProps> = ({
 
           {/* Snippets */}
           {displayedSnippets.map((s) => (
-            <button
-              key={s.id}
-              onClick={() => handleSnippetClick(s.command, s.noAutoRun)}
-              className="w-full text-left px-3 py-2 hover:bg-accent/50 transition-colors flex flex-col gap-0.5"
-            >
-              <span className="text-xs font-medium truncate">{s.label}</span>
-              <span className="text-muted-foreground truncate font-mono text-[10px] max-w-full">
-                {s.command}
-              </span>
-            </button>
+            <ContextMenu key={s.id}>
+              <ContextMenuTrigger asChild>
+                <button
+                  onClick={() => handleSnippetClick(s.command, s.noAutoRun)}
+                  className="w-full text-left px-3 py-2 hover:bg-accent/50 transition-colors flex flex-col gap-0.5"
+                >
+                  <span className="text-xs font-medium truncate">{s.label}</span>
+                  <span className="text-muted-foreground truncate font-mono text-[10px] max-w-full">
+                    {s.command}
+                  </span>
+                </button>
+              </ContextMenuTrigger>
+              <ContextMenuContent>
+                <ContextMenuItem onClick={() => handleEditSnippet(s)}>
+                  <Edit2 className="mr-2 h-4 w-4" /> {t('action.edit')}
+                </ContextMenuItem>
+                <ContextMenuItem
+                  className="text-destructive"
+                  onClick={() => handleDeleteSnippet(s.id)}
+                >
+                  <Trash2 className="mr-2 h-4 w-4" /> {t('action.delete')}
+                </ContextMenuItem>
+              </ContextMenuContent>
+            </ContextMenu>
           ))}
 
           {hasAnyContent && displayedSnippets.length === 0 && filteredPackages.length === 0 && search.trim() && (

components/SelectHostPanel.tsx

@@ -1,11 +1,9 @@
 import {
-  ArrowLeft,
   Check,
   ChevronRight,
   LayoutGrid,
   Plus,
   Search,
-  X,
 } from "lucide-react";
 import React, { useMemo, useState } from "react";
 import { cn } from "../lib/utils";
@@ -14,11 +12,18 @@ import { Host, SSHKey } from "../types";
 import { ManagedSource } from "../domain/models";
 import { DistroAvatar } from "./DistroAvatar";
 import HostDetailsPanel from "./HostDetailsPanel";
+import { AsidePanel, type AsidePanelLayout } from "./ui/aside-panel";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import { ScrollArea } from "./ui/scroll-area";
 import { SortDropdown, SortMode } from "./ui/sort-dropdown";
 import { TagFilterDropdown } from "./ui/tag-filter-dropdown";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./ui/tooltip";
 
 interface SelectHostPanelProps {
   hosts: Host[];
@@ -38,6 +43,7 @@ interface SelectHostPanelProps {
   title?: string;
   subtitle?: string;
   className?: string;
+  layout?: AsidePanelLayout;
 }
 
 const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
@@ -57,6 +63,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
   title,
   subtitle,
   className,
+  layout = "overlay",
 }) => {
   const { t } = useI18n();
   const panelTitle = title ?? t("selectHost.title");
@@ -198,35 +205,21 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
   }, [currentPath]);
 
   return (
-    <div
+    <TooltipProvider delayDuration={300}>
+    <AsidePanel
+      open={true}
+      onClose={onBack}
+      title={panelTitle}
+      subtitle={subtitle}
+      showBackButton={true}
+      onBack={onBack}
       className={cn(
-        "absolute right-0 top-0 bottom-0 w-[380px] border-l border-border/60 bg-background z-40 flex flex-col app-no-drag",
+        layout === "overlay" && "z-40",
+        showNewHostPanel && "overflow-visible",
         className,
       )}
+      layout={layout}
     >
-      {/* Header */}
-      <div className="px-4 py-3 border-b border-border/60 flex items-center justify-between gap-3 shrink-0">
-        <div className="flex items-center gap-3 min-w-0">
-          <button
-            onClick={onBack}
-            className="p-1 hover:bg-muted rounded-md transition-colors cursor-pointer shrink-0"
-          >
-            <ArrowLeft size={18} />
-          </button>
-          <div className="min-w-0">
-            <h3 className="text-sm font-semibold">{panelTitle}</h3>
-            {subtitle && (
-              <p className="text-xs text-muted-foreground">{subtitle}</p>
-            )}
-          </div>
-        </div>
-        <button
-          onClick={onBack}
-          className="p-1.5 hover:bg-muted rounded-md transition-colors cursor-pointer shrink-0"
-        >
-          <X size={18} />
-        </button>
-      </div>
 
       {/* Toolbar */}
       <div className="px-4 py-3 flex items-center gap-2 border-b border-border/60 shrink-0">
@@ -270,8 +263,8 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
       </div>
 
       {/* Content */}
-      <ScrollArea className="flex-1">
-        <div className="p-4 space-y-4">
+      <ScrollArea className="flex-1 min-w-0">
+        <div className="p-3 space-y-3">
           {/* Breadcrumbs */}
           {currentPath && (
             <div className="flex items-center gap-1 text-xs text-muted-foreground">
@@ -301,20 +294,20 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
           )}
           {groupsWithCounts.length > 0 && (
             <div>
-              <h4 className="text-sm font-semibold mb-3">{t("vault.groups.title")}</h4>
+              <h4 className="text-xs font-semibold mb-2 text-muted-foreground">{t("vault.groups.title")}</h4>
               <div className="space-y-1">
                 {groupsWithCounts.map((group) => (
                   <div
                     key={group.path}
-                    className="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-muted/70 cursor-pointer transition-colors"
+                    className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg hover:bg-muted/70 cursor-pointer transition-colors"
                     onClick={() => setCurrentPath(group.path)}
                   >
-                    <div className="h-10 w-10 rounded-lg bg-primary/15 text-primary flex items-center justify-center">
-                      <LayoutGrid size={18} />
+                    <div className="h-8 w-8 rounded-lg bg-primary/15 text-primary flex items-center justify-center shrink-0">
+                      <LayoutGrid size={15} />
                     </div>
                     <div className="flex-1 min-w-0">
-                      <div className="font-medium">{group.name}</div>
-                      <div className="text-xs text-muted-foreground">
+                      <div className="text-[13px] font-medium truncate">{group.name}</div>
+                      <div className="text-[11px] text-muted-foreground">
                         {t("vault.groups.hostsCount", { count: group.count })}
                       </div>
                     </div>
@@ -327,18 +320,19 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
           {/* Hosts Section */}
           {filteredHosts.length > 0 && (
             <div>
-              <h4 className="text-sm font-semibold mb-3">{t("vault.nav.hosts")}</h4>
+              <h4 className="text-xs font-semibold mb-2 text-muted-foreground">{t("vault.nav.hosts")}</h4>
               <div className="space-y-1">
                 {filteredHosts.map((host) => {
                   const isSelected = selectedHostIds.includes(host.id);
+                  const connectionStr = `${host.username}@${host.hostname}:${host.port || 22}`;
 
                   return (
                     <div
                       key={host.id}
                       className={cn(
-                        "flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-colors",
+                        "flex items-center gap-2.5 px-2.5 py-2 rounded-lg cursor-pointer transition-colors",
                         isSelected
-                          ? "bg-muted border border-border"
+                          ? "bg-muted"
                           : "hover:bg-muted/70",
                       )}
                       onClick={() => onSelect(host)}
@@ -346,16 +340,32 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
                       <DistroAvatar
                         host={host}
                         fallback={host.os[0].toUpperCase()}
-                        className="h-10 w-10"
+                        className="h-8 w-8 rounded-md"
                       />
                       <div className="flex-1 min-w-0">
-                        <div className="font-medium">{host.label}</div>
-                        <div className="text-xs text-muted-foreground truncate">
-                          {host.username}@{host.hostname}:{host.port || 22}
-                        </div>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <div className="text-[13px] font-medium truncate">
+                              {host.label}
+                            </div>
+                          </TooltipTrigger>
+                          <TooltipContent side="top" align="start">
+                            <p>{host.label}</p>
+                          </TooltipContent>
+                        </Tooltip>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <div className="text-[11px] text-muted-foreground truncate">
+                              {connectionStr}
+                            </div>
+                          </TooltipTrigger>
+                          <TooltipContent side="top" align="start">
+                            <p>{connectionStr}</p>
+                          </TooltipContent>
+                        </Tooltip>
                       </div>
                       {isSelected && (
-                        <Check size={16} className="text-primary" />
+                        <Check size={14} className="text-primary shrink-0" />
                       )}
                     </div>
                   );
@@ -374,7 +384,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
       </ScrollArea>
 
       {/* Footer */}
-      <div className="px-4 py-3 border-t border-border/60">
+      <div className="px-4 py-3 border-t border-border/60 shrink-0">
         <Button
           className="w-full"
           disabled={selectedHostIds.length === 0}
@@ -412,7 +422,8 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
           onCreateGroup={onCreateGroup}
         />
       )}
-    </div>
+    </AsidePanel>
+    </TooltipProvider>
   );
 };
 

components/SerialConnectModal.tsx

@@ -35,7 +35,7 @@ interface SerialPort {
 interface SerialConnectModalProps {
   open: boolean;
   onClose: () => void;
-  onConnect: (config: SerialConfig) => void;
+  onConnect: (config: SerialConfig, options?: { charset?: string }) => void;
   onSaveHost?: (host: Host) => void;
 }
 
@@ -65,6 +65,7 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
   const [flowControl, setFlowControl] = useState<SerialFlowControl>('none');
   const [localEcho, setLocalEcho] = useState(false);
   const [lineMode, setLineMode] = useState(false);
+  const [charset, setCharset] = useState('UTF-8');
 
   // Save configuration state
   const [saveConfig, setSaveConfig] = useState(false);
@@ -131,12 +132,13 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
         tags: ['serial'],
         protocol: 'serial',
         createdAt: Date.now(),
+        charset,
         serialConfig: config, // Store full serial configuration for connection
       };
       onSaveHost(host);
     }
 
-    onConnect(config);
+    onConnect(config, { charset });
     onClose();
   };
 
@@ -164,7 +166,7 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
 
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
-      <DialogContent className="max-w-md">
+      <DialogContent className="max-w-md max-h-[85vh] flex flex-col">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Usb size={18} />
@@ -175,7 +177,7 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-4 py-2">
+        <div className="space-y-4 py-2 overflow-y-auto flex-1 min-h-0">
           {/* Serial Port Selection */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
@@ -368,6 +370,20 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
                     className="h-4 w-4 rounded border-input"
                   />
                 </div>
+
+                {/* Charset */}
+                <div className="space-y-1">
+                  <Label htmlFor="serial-charset" className="text-sm font-medium">
+                    {t('serial.field.charset')}
+                  </Label>
+                  <Input
+                    id="serial-charset"
+                    placeholder={t("hostDetails.charset.placeholder")}
+                    value={charset}
+                    onChange={(e) => setCharset(e.target.value)}
+                    className="h-9"
+                  />
+                </div>
               </div>
             </CollapsibleContent>
           </Collapsible>

components/SerialHostDetailsPanel.tsx

@@ -17,6 +17,7 @@ import {
   AsidePanel,
   AsidePanelContent,
   AsidePanelFooter,
+  type AsidePanelLayout,
 } from './ui/aside-panel';
 
 interface SerialPort {
@@ -35,6 +36,7 @@ interface SerialHostDetailsPanelProps {
   groups?: string[];
   onSave: (host: Host) => void;
   onCancel: () => void;
+  layout?: AsidePanelLayout;
 }
 
 const BAUD_RATES = [300, 1200, 2400, 4800, 9600, 19200, 38400, 57600, 115200, 230400, 460800, 921600];
@@ -49,6 +51,7 @@ export const SerialHostDetailsPanel: React.FC<SerialHostDetailsPanelProps> = ({
   groups = [],
   onSave,
   onCancel,
+  layout = 'overlay',
 }) => {
   const { t } = useI18n();
   const terminalBackend = useTerminalBackend();
@@ -66,6 +69,7 @@ export const SerialHostDetailsPanel: React.FC<SerialHostDetailsPanelProps> = ({
   const [flowControl, setFlowControl] = useState<SerialFlowControl>(initialData.serialConfig?.flowControl || 'none');
   const [localEcho, setLocalEcho] = useState(initialData.serialConfig?.localEcho || false);
   const [lineMode, setLineMode] = useState(initialData.serialConfig?.lineMode || false);
+  const [charset, setCharset] = useState(initialData.charset || 'UTF-8');
   const [tags, setTags] = useState<string[]>(initialData.tags || []);
   const [group, setGroup] = useState(initialData.group || '');
 
@@ -107,6 +111,7 @@ export const SerialHostDetailsPanel: React.FC<SerialHostDetailsPanelProps> = ({
       port: baudRate,
       tags,
       group,
+      charset,
       serialConfig: config,
     };
 
@@ -162,6 +167,8 @@ export const SerialHostDetailsPanel: React.FC<SerialHostDetailsPanelProps> = ({
       title={t('serial.edit.title')}
       subtitle={initialData.label}
       className="z-40"
+      layout={layout}
+      dataSection="serial-host-details-panel"
     >
       <AsidePanelContent>
         {/* Label */}
@@ -392,6 +399,20 @@ export const SerialHostDetailsPanel: React.FC<SerialHostDetailsPanelProps> = ({
                   className="h-4 w-4 rounded border-input"
                 />
               </div>
+
+              {/* Charset */}
+              <div className="space-y-1">
+                <Label htmlFor="serial-charset" className="text-sm font-medium">
+                  {t('serial.field.charset')}
+                </Label>
+                <Input
+                  id="serial-charset"
+                  placeholder={t("hostDetails.charset.placeholder")}
+                  value={charset}
+                  onChange={(e) => setCharset(e.target.value)}
+                  className="h-9"
+                />
+              </div>
             </div>
           </CollapsibleContent>
         </Collapsible>

components/SettingsApplicationTab.tsx

@@ -68,9 +68,11 @@ interface SettingsApplicationTabProps {
   checkNow: UseUpdateCheckResult['checkNow'];
   openReleasePage: UseUpdateCheckResult['openReleasePage'];
   installUpdate: UseUpdateCheckResult['installUpdate'];
+  startDownload: UseUpdateCheckResult['startDownload'];
+  isUpdateDemoMode: boolean;
 }
 
-export default function SettingsApplicationTab({ updateState, checkNow, openReleasePage, installUpdate }: SettingsApplicationTabProps) {
+export default function SettingsApplicationTab({ updateState, checkNow, openReleasePage, installUpdate, startDownload, isUpdateDemoMode }: SettingsApplicationTabProps) {
   const { t } = useI18n();
   const { openExternal, getApplicationInfo } = useApplicationBackend();
   const [appInfo, setAppInfo] = useState<AppInfo>({ name: "Netcatty", version: "" });
@@ -94,9 +96,17 @@ export default function SettingsApplicationTab({ updateState, checkNow, openRele
     };
   }, [getApplicationInfo]);
 
-  // Check if demo mode is enabled for development testing
-  const isUpdateDemoMode = typeof window !== 'undefined' &&
-    window.localStorage?.getItem('debug.updateDemo') === '1';
+  const handleOpenExternal = async (url: string) => {
+    try {
+      await openExternal(url);
+    } catch (err) {
+      console.warn("[SettingsApplicationTab] openExternal failed:", err);
+      toast.error(
+        t("settings.application.openExternal.failedBody"),
+        t("settings.application.openExternal.failedTitle"),
+      );
+    }
+  };
 
   const handleCheckForUpdates = async () => {
     // In demo mode, allow checking even for dev builds
@@ -142,7 +152,14 @@ export default function SettingsApplicationTab({ updateState, checkNow, openRele
           <div className="flex items-center gap-4">
             <AppLogo className="w-16 h-16" />
             <div>
-              <div className="text-3xl font-semibold leading-none">{appInfo.name}</div>
+              {/* Match the Vault sidebar wordmark so the Netcatty brand
+                  reads consistently across surfaces — same italic heavy
+                  cut, just scaled up for the Settings hero area and
+                  using the branded mixed-case "Netcatty" instead of
+                  the lowercase electron app name. */}
+              <div className="text-3xl font-black italic tracking-tight leading-none text-foreground">
+                Netcatty
+              </div>
               <div className="flex items-center gap-2 mt-1">
                 <span className="text-sm text-muted-foreground">
                   {appInfo.version ? appInfo.version : " "}
@@ -150,7 +167,7 @@ export default function SettingsApplicationTab({ updateState, checkNow, openRele
                 {/* Update badge - reflects auto-download state */}
                 {updateState.latestRelease && (updateState.hasUpdate || updateState.autoDownloadStatus === 'downloading' || updateState.autoDownloadStatus === 'ready') && (
                   <button
-                    onClick={() => updateState.autoDownloadStatus === 'ready' ? installUpdate() : void openReleasePage()}
+                    onClick={() => updateState.autoDownloadStatus === 'ready' ? installUpdate() : updateState.autoDownloadStatus === 'downloading' ? undefined : startDownload()}
                     className={cn(
                       "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium",
                       updateState.autoDownloadStatus === 'ready'
@@ -177,7 +194,7 @@ export default function SettingsApplicationTab({ updateState, checkNow, openRele
               variant="secondary"
               className="gap-2"
               onClick={() => void handleCheckForUpdates()}
-              disabled={updateState.isChecking}
+              disabled={updateState.isChecking || updateState.manualCheckStatus === 'checking' || updateState.autoDownloadStatus === 'downloading' || updateState.autoDownloadStatus === 'ready'}
             >
               {updateState.isChecking ? (
                 <Loader2 size={16} className="animate-spin" />
@@ -200,25 +217,25 @@ export default function SettingsApplicationTab({ updateState, checkNow, openRele
               icon={<Bug size={18} />}
               title={t("settings.application.reportProblem")}
               subtitle={t("settings.application.reportProblem.subtitle")}
-              onClick={() => void openExternal(issueUrl)}
+              onClick={() => void handleOpenExternal(issueUrl)}
             />
             <ActionRow
               icon={<MessageCircle size={18} />}
               title={t("settings.application.community")}
               subtitle={t("settings.application.community.subtitle")}
-              onClick={() => void openExternal(discussionsUrl)}
+              onClick={() => void handleOpenExternal(discussionsUrl)}
             />
             <ActionRow
               icon={<Github size={18} />}
               title="GitHub"
               subtitle={t("settings.application.github.subtitle")}
-              onClick={() => void openExternal(REPO_URL)}
+              onClick={() => void handleOpenExternal(REPO_URL)}
             />
             <ActionRow
               icon={<Newspaper size={18} />}
               title={t("settings.application.whatsNew")}
               subtitle={t("settings.application.whatsNew.subtitle")}
-              onClick={() => void openExternal(releasesUrl)}
+              onClick={() => void handleOpenExternal(releasesUrl)}
             />
           </div>
         </div>

components/SettingsPage.tsx

@@ -41,7 +41,7 @@ class AITabErrorBoundary extends React.Component<
         </div>
       );
     }
-    return this.props.children;
+    return (this.props as { children: React.ReactNode }).children;
   }
 }
 
@@ -56,6 +56,8 @@ const SettingsTerminalTabContainer: React.FC<{ settings: SettingsState }> = ({ s
         <SettingsTerminalTab
             terminalThemeId={settings.terminalThemeId}
             setTerminalThemeId={settings.setTerminalThemeId}
+            followAppTerminalTheme={settings.followAppTerminalTheme}
+            setFollowAppTerminalTheme={settings.setFollowAppTerminalTheme}
             terminalFontFamilyId={settings.terminalFontFamilyId}
             setTerminalFontFamilyId={settings.setTerminalFontFamilyId}
             terminalFontSize={settings.terminalFontSize}
@@ -63,6 +65,8 @@ const SettingsTerminalTabContainer: React.FC<{ settings: SettingsState }> = ({ s
             terminalSettings={settings.terminalSettings}
             updateTerminalSetting={settings.updateTerminalSetting}
             availableFonts={availableFonts}
+            workspaceFocusStyle={settings.workspaceFocusStyle}
+            setWorkspaceFocusStyle={settings.setWorkspaceFocusStyle}
         />
     );
 };
@@ -84,6 +88,8 @@ const SettingsAITabContainer: React.FC = () => {
                     setActiveModelId={aiState.setActiveModelId}
                     globalPermissionMode={aiState.globalPermissionMode}
                     setGlobalPermissionMode={aiState.setGlobalPermissionMode}
+                    toolIntegrationMode={aiState.toolIntegrationMode}
+                    setToolIntegrationMode={aiState.setToolIntegrationMode}
                     externalAgents={aiState.externalAgents}
                     setExternalAgents={aiState.setExternalAgents}
                     defaultAgentId={aiState.defaultAgentId}
@@ -111,6 +117,7 @@ const SettingsSyncTabWithVault: React.FC<{ onSettingsApplied?: () => void }> = (
         customGroups,
         snippetPackages,
         knownHosts,
+        groupConfigs,
         importDataFromString,
         clearVaultData,
     } = useVaultState();
@@ -130,8 +137,8 @@ const SettingsSyncTabWithVault: React.FC<{ onSettingsApplied?: () => void }> = (
     );
 
     const vault = useMemo(
-        () => ({ hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts }),
-        [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts],
+        () => ({ hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts, groupConfigs }),
+        [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts, groupConfigs],
     );
 
     return (
@@ -149,13 +156,9 @@ const SettingsSyncTabWithVault: React.FC<{ onSettingsApplied?: () => void }> = (
 const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }) => {
     const { t } = useI18n();
     const { notifyRendererReady, closeSettingsWindow } = useWindowControls();
-    const { updateState, checkNow, installUpdate, openReleasePage } = useUpdateCheck({ autoUpdateEnabled: settings.autoUpdateEnabled });
+    const { updateState, checkNow, installUpdate, openReleasePage, startDownload, isUpdateDemoMode } = useUpdateCheck({ autoUpdateEnabled: settings.autoUpdateEnabled });
     const [activeTab, setActiveTab] = useState("application");
     const [mountedTabs, setMountedTabs] = useState(() => new Set(["application"]));
-    const isImmersive = settings.immersiveMode;
-    const toggleImmersive = useCallback(() => {
-        settings.setImmersiveMode(!isImmersive);
-    }, [settings, isImmersive]);
 
     useEffect(() => {
         notifyRendererReady();
@@ -260,6 +263,8 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                             checkNow={checkNow}
                             openReleasePage={openReleasePage}
                             installUpdate={installUpdate}
+                            startDownload={startDownload}
+                            isUpdateDemoMode={isUpdateDemoMode}
                         />
                     )}
 
@@ -281,8 +286,12 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                             setUiLanguage={settings.setUiLanguage}
                             customCSS={settings.customCSS}
                             setCustomCSS={settings.setCustomCSS}
-                            isImmersive={isImmersive}
-                            onToggleImmersive={toggleImmersive}
+                            showRecentHosts={settings.showRecentHosts}
+                            setShowRecentHosts={settings.setShowRecentHosts}
+                            showOnlyUngroupedHostsInRoot={settings.showOnlyUngroupedHostsInRoot}
+                            setShowOnlyUngroupedHostsInRoot={settings.setShowOnlyUngroupedHostsInRoot}
+                            showSftpTab={settings.showSftpTab}
+                            setShowSftpTab={settings.setShowSftpTab}
                         />
                     )}
 
@@ -337,6 +346,7 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                             checkNow={checkNow}
                             installUpdate={installUpdate}
                             openReleasePage={openReleasePage}
+                            startDownload={startDownload}
                         />
                     )}
                 </div>

components/SftpSidePanel.tsx

@@ -10,7 +10,7 @@
  * Used in TerminalLayer to provide SFTP alongside terminal sessions.
  */
 
-import React, { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { formatHostPort } from "../domain/host";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { useSftpState } from "../application/state/useSftpState";
@@ -31,12 +31,17 @@ import { SftpTransferQueue } from "./sftp/SftpTransferQueue";
 import { SftpContextProvider } from "./sftp";
 import { useSftpViewPaneCallbacks } from "./sftp/hooks/useSftpViewPaneCallbacks";
 import { useSftpViewTabs } from "./sftp/hooks/useSftpViewTabs";
+import { useSftpKeyboardShortcuts } from "./sftp/hooks/useSftpKeyboardShortcuts";
+import { sftpFocusStore } from "./sftp/hooks/useSftpFocusedPane";
+import { keepOnlyPaneSelections } from "./sftp/hooks/selectionScope";
+import { KeyBinding, HotkeyScheme } from "../domain/models";
 
 interface SftpSidePanelProps {
   hosts: Host[];
   keys: SSHKey[];
   identities: Identity[];
   updateHosts: (hosts: Host[]) => void;
+  sftpDefaultViewMode: "list" | "tree";
   /** The host to connect to (follows focused terminal) */
   activeHost: Host | null;
   initialLocation?: { hostId: string; path: string } | null;
@@ -55,6 +60,8 @@ interface SftpSidePanelProps {
   sftpAutoSync: boolean;
   sftpShowHiddenFiles: boolean;
   sftpUseCompressedUpload: boolean;
+  hotkeyScheme: HotkeyScheme;
+  keyBindings: KeyBinding[];
   editorWordWrap: boolean;
   setEditorWordWrap: (value: boolean) => void;
   onGetTerminalCwd?: () => Promise<string | null>;
@@ -65,6 +72,7 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
   keys,
   identities,
   updateHosts,
+  sftpDefaultViewMode,
   activeHost,
   initialLocation,
   showWorkspaceHostHeader = false,
@@ -76,6 +84,8 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
   sftpAutoSync,
   sftpShowHiddenFiles,
   sftpUseCompressedUpload,
+  hotkeyScheme,
+  keyBindings,
   editorWordWrap,
   setEditorWordWrap,
   onGetTerminalCwd,
@@ -109,6 +119,7 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
     listSftp,
     mkdirLocal,
     deleteLocalFile,
+    listLocalDir,
   } = useSftpBackend();
 
   const sftpRef = useRef(sftp);
@@ -119,6 +130,17 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
 
   const autoSyncRef = useRef(sftpAutoSync);
   autoSyncRef.current = sftpAutoSync;
+  const panelRootRef = useRef<HTMLDivElement>(null);
+  const dialogActionScopeIdRef = useRef(`sftp-side-panel:${crypto.randomUUID()}`);
+  const [hasPaneFocus, setHasPaneFocus] = useState(false);
+
+  useSftpKeyboardShortcuts({
+    keyBindings,
+    hotkeyScheme,
+    sftpRef,
+    dialogActionScopeId: dialogActionScopeIdRef.current,
+    isActive: isVisible && hasPaneFocus,
+  });
 
   const { getOpenerForFile, setOpenerForExtension } = useSftpFileAssociations();
   const getOpenerForFileRef = useRef(getOpenerForFile);
@@ -130,10 +152,60 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
     sftpRef.current.setShowHiddenFiles("left", paneId, !pane.showHiddenFiles);
   }, []);
 
+  const syncFocusedSelection = useCallback((tabId: string | null) => {
+    if (tabId) {
+      keepOnlyPaneSelections(sftpRef.current, { side: "left", tabId });
+      return;
+    }
+    keepOnlyPaneSelections(sftpRef.current, null);
+  }, []);
+
+  const handlePaneFocus = useCallback(() => {
+    sftpFocusStore.setFocusedSide("left");
+    setHasPaneFocus(true);
+    syncFocusedSelection(sftpRef.current.getActiveTabId("left"));
+  }, [syncFocusedSelection]);
+
   // NOTE: We intentionally do NOT sync to activeTabStore here.
   // activeTabStore is a global singleton shared with SftpView.
   // Writing to it here would corrupt SftpView's left pane visibility.
 
+  useEffect(() => {
+    if (!isVisible) {
+      setHasPaneFocus(false);
+      syncFocusedSelection(null);
+    }
+  }, [isVisible, syncFocusedSelection]);
+
+  useEffect(() => {
+    if (!isVisible) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target as Node | null;
+      const elementTarget = target instanceof Element ? target : null;
+      const isPortalInteraction = !!elementTarget?.closest(
+        '#netcatty-context-menu-root, [role="dialog"], [data-radix-popper-content-wrapper]',
+      );
+      if (isPortalInteraction) {
+        return;
+      }
+
+      if (panelRootRef.current?.contains(target)) {
+        sftpFocusStore.setFocusedSide("left");
+        setHasPaneFocus(true);
+        syncFocusedSelection(sftpRef.current.getActiveTabId("left"));
+      } else {
+        setHasPaneFocus(false);
+        syncFocusedSelection(null);
+      }
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+    };
+  }, [isVisible, syncFocusedSelection]);
+
   const {
     leftCallbacks,
     rightCallbacks,
@@ -168,6 +240,7 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
     selectDirectory,
     startStreamTransfer,
     getSftpIdForConnection: sftp.getSftpIdForConnection,
+    listLocalFiles: listLocalDir,
   });
 
   const {
@@ -432,6 +505,7 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
     // Filter transfers to those relevant to the active connection's host,
     // so workspace focus switches don't show transfers from other hosts.
     const filtered = sftp.transfers.filter((t) => {
+      if (t.parentTaskId) return false; // Child tasks rendered by SftpTransferQueue
       if (connection.isLocal) {
         return t.sourceConnectionId === connection.id || t.targetConnectionId === connection.id;
       }
@@ -504,9 +578,11 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
       rightCallbacks={rightCallbacks}
     >
       <div
+        ref={panelRootRef}
         className="h-full flex flex-col bg-background overflow-hidden"
         style={isVisible ? undefined : { display: "none" }}
         aria-hidden={!isVisible}
+        onClick={handlePaneFocus}
       >
         {showWorkspaceHostHeader && displayHost && (
           <div className="shrink-0 border-b border-border/50 bg-muted/20 px-3 py-1.5">
@@ -546,8 +622,12 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
                 <SftpPaneView
                   side="left"
                   pane={pane}
+                  dialogActionScopeId={dialogActionScopeIdRef.current}
+                  isPaneFocused={isVisible && hasPaneFocus}
+                  sftpDefaultViewMode={sftpDefaultViewMode}
                   showHeader
                   showEmptyHeader
+                  forceActive
                   onToggleShowHiddenFiles={() => handleToggleHiddenFiles(pane.id)}
                   onGoToTerminalCwd={onGetTerminalCwd ? handleGoToTerminalCwd : undefined}
                 />
@@ -558,6 +638,7 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
         <SftpTransferQueue
           sftp={sftp}
           visibleTransfers={visibleTransfers}
+          allTransfers={sftp.transfers}
           canRevealTransferTarget={canRevealTransferTarget}
           onRevealTransferTarget={handleRevealTransferTarget}
         />
@@ -590,6 +671,8 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
           handleSaveTextFile={handleSaveTextFile}
           editorWordWrap={editorWordWrap}
           setEditorWordWrap={setEditorWordWrap}
+          hotkeyScheme={hotkeyScheme}
+          keyBindings={keyBindings}
           showFileOpenerDialog={showFileOpenerDialog}
           setShowFileOpenerDialog={setShowFileOpenerDialog}
           fileOpenerTarget={fileOpenerTarget}
@@ -608,6 +691,7 @@ const sidePanelAreEqual = (prev: SftpSidePanelProps, next: SftpSidePanelProps):
   prev.keys === next.keys &&
   prev.identities === next.identities &&
   prev.updateHosts === next.updateHosts &&
+  prev.sftpDefaultViewMode === next.sftpDefaultViewMode &&
   prev.activeHost === next.activeHost &&
   prev.showWorkspaceHostHeader === next.showWorkspaceHostHeader &&
   prev.isVisible === next.isVisible &&
@@ -618,6 +702,8 @@ const sidePanelAreEqual = (prev: SftpSidePanelProps, next: SftpSidePanelProps):
   prev.sftpAutoSync === next.sftpAutoSync &&
   prev.sftpShowHiddenFiles === next.sftpShowHiddenFiles &&
   prev.sftpUseCompressedUpload === next.sftpUseCompressedUpload &&
+  prev.hotkeyScheme === next.hotkeyScheme &&
+  prev.keyBindings === next.keyBindings &&
   prev.editorWordWrap === next.editorWordWrap &&
   prev.setEditorWordWrap === next.setEditorWordWrap &&
   prev.onGetTerminalCwd === next.onGetTerminalCwd &&

components/SftpView.tsx

@@ -19,11 +19,13 @@ import { useI18n } from "../application/i18n/I18nProvider";
 import { useIsSftpActive } from "../application/state/activeTabStore";
 import { useSftpState } from "../application/state/useSftpState";
 import { useSftpBackend } from "../application/state/useSftpBackend";
-import { useSettingsState } from "../application/state/useSettingsState";
+import { HotkeyScheme, KeyBinding } from "../domain/models";
 import { logger } from "../lib/logger";
 import { useRenderTracker } from "../lib/useRenderTracker";
 import { cn } from "../lib/utils";
+import { useInstantThemeSwitch } from "../lib/useInstantThemeSwitch";
 import { Host, Identity, SSHKey } from "../types";
+import { resolveGroupDefaults, applyGroupDefaults } from "../domain/groupConfig";
 import { useSftpFileAssociations } from "../application/state/useSftpFileAssociations";
 import { toast } from "./ui/toast";
 
@@ -39,6 +41,8 @@ import { useSftpViewPaneCallbacks } from "./sftp/hooks/useSftpViewPaneCallbacks"
 import { useSftpViewTabs } from "./sftp/hooks/useSftpViewTabs";
 import { useSftpKeyboardShortcuts } from "./sftp/hooks/useSftpKeyboardShortcuts";
 import { sftpFocusStore, SftpFocusedSide, useSftpFocusedSide } from "./sftp/hooks/useSftpFocusedPane";
+import { keepOnlyActivePaneSelections, keepOnlyPaneSelections } from "./sftp/hooks/selectionScope";
+
 
 // Wrapper component that subscribes to activeTabId for CSS visibility
 // This isolates the activeTabId subscription - only this component re-renders on tab switch
@@ -48,22 +52,41 @@ interface SftpViewProps {
   hosts: Host[];
   keys: SSHKey[];
   identities: Identity[];
+  groupConfigs?: import('../domain/models').GroupConfig[];
   updateHosts: (hosts: Host[]) => void;
+  sftpDefaultViewMode: "list" | "tree";
+  sftpDoubleClickBehavior: "open" | "transfer";
+  sftpAutoSync: boolean;
+  sftpShowHiddenFiles: boolean;
+  sftpUseCompressedUpload: boolean;
+  hotkeyScheme: HotkeyScheme;
+  keyBindings: KeyBinding[];
+  editorWordWrap: boolean;
+  setEditorWordWrap: (enabled: boolean) => void;
 }
 
-const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updateHosts }) => {
+const SftpViewInner: React.FC<SftpViewProps> = ({
+  hosts,
+  keys,
+  identities,
+  groupConfigs = [],
+  updateHosts,
+  sftpDefaultViewMode,
+  sftpDoubleClickBehavior,
+  sftpAutoSync,
+  sftpShowHiddenFiles,
+  sftpUseCompressedUpload,
+  hotkeyScheme,
+  keyBindings,
+  editorWordWrap,
+  setEditorWordWrap,
+}) => {
   const { t } = useI18n();
   const isActive = useIsSftpActive();
-  const {
-    sftpDoubleClickBehavior,
-    sftpAutoSync,
-    sftpShowHiddenFiles,
-    sftpUseCompressedUpload,
-    hotkeyScheme,
-    keyBindings,
-    editorWordWrap,
-    setEditorWordWrap,
-  } = useSettingsState();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const dialogActionScopeIdRef = useRef("sftp-main-view");
+
+  useInstantThemeSwitch(rootRef);
 
   // File watch event handlers (stable refs to avoid re-creating the useSftpState options)
   const fileWatchHandlers = useMemo(() => ({
@@ -84,7 +107,17 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
     defaultShowHiddenFiles: sftpShowHiddenFiles,
   }), [fileWatchHandlers, sftpUseCompressedUpload, sftpShowHiddenFiles]);
 
-  const sftp = useSftpState(hosts, keys, identities, sftpOptions);
+  // Pre-resolve group defaults so SFTP connections inherit group config
+  const effectiveHosts = useMemo(() =>
+    hosts.map(h => {
+      if (!h.group) return h;
+      const defaults = resolveGroupDefaults(h.group, groupConfigs);
+      return applyGroupDefaults(h, defaults);
+    }),
+    [hosts, groupConfigs],
+  );
+
+  const sftp = useSftpState(effectiveHosts, keys, identities, sftpOptions);
 
   // Get backend helpers for file downloads and local filesystem writes.
   const {
@@ -94,6 +127,7 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
     listSftp,
     mkdirLocal,
     deleteLocalFile,
+    listLocalDir,
   } = useSftpBackend();
 
   // Store sftp in a ref so callbacks can access the latest instance
@@ -114,6 +148,7 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
     keyBindings,
     hotkeyScheme,
     sftpRef,
+    dialogActionScopeId: dialogActionScopeIdRef.current,
     isActive,
   });
 
@@ -121,8 +156,18 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
   const focusedSide = useSftpFocusedSide();
 
   // Handle pane focus when clicking on a pane container
-  const handlePaneFocus = useCallback((side: SftpFocusedSide) => {
+  // Clear the opposite side's selection so file operations only affect the focused pane
+  const handlePaneFocus = useCallback((side: SftpFocusedSide, targetTabId?: string) => {
+    const prevSide = sftpFocusStore.getFocusedSide();
     sftpFocusStore.setFocusedSide(side);
+    if (prevSide !== side) {
+      if (targetTabId) {
+        keepOnlyPaneSelections(sftpRef.current, { side, tabId: targetTabId });
+      } else {
+        // Focus side changed — clear other panes but keep the newly focused pane intact.
+        keepOnlyActivePaneSelections(sftpRef.current, side);
+      }
+    }
   }, []);
 
   const handleToggleHiddenFiles = useCallback((side: "left" | "right", paneId: string) => {
@@ -190,10 +235,11 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
     selectDirectory,
     startStreamTransfer,
     getSftpIdForConnection: sftp.getSftpIdForConnection,
+    listLocalFiles: listLocalDir,
   });
 
   const visibleTransfers = useMemo(
-    () => [...sftp.transfers].reverse().slice(0, 5),
+    () => [...sftp.transfers].filter((t) => !t.parentTaskId).reverse().slice(0, 5),
     [sftp.transfers],
   );
 
@@ -236,6 +282,26 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
     handleHostSelectRight,
   } = useSftpViewTabs({ sftp, sftpRef });
 
+  const handleAddTabLeftWithFocus = useCallback(() => {
+    const tabId = handleAddTabLeft();
+    handlePaneFocus("left", tabId);
+  }, [handleAddTabLeft, handlePaneFocus]);
+
+  const handleAddTabRightWithFocus = useCallback(() => {
+    const tabId = handleAddTabRight();
+    handlePaneFocus("right", tabId);
+  }, [handleAddTabRight, handlePaneFocus]);
+
+  const handleSelectTabLeftWithFocus = useCallback((tabId: string) => {
+    handleSelectTabLeft(tabId);
+    handlePaneFocus("left", tabId);
+  }, [handlePaneFocus, handleSelectTabLeft]);
+
+  const handleSelectTabRightWithFocus = useCallback((tabId: string) => {
+    handleSelectTabRight(tabId);
+    handlePaneFocus("right", tabId);
+  }, [handlePaneFocus, handleSelectTabRight]);
+
   return (
     <SftpContextProvider
       hosts={hosts}
@@ -246,6 +312,7 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
       rightCallbacks={rightCallbacks}
     >
       <div
+        ref={rootRef}
         className={cn(
           "absolute inset-0 min-h-0 flex flex-col",
           isActive ? "z-20" : "",
@@ -275,9 +342,9 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
               <SftpTabBar
                 tabs={leftTabsInfo}
                 side="left"
-                onSelectTab={handleSelectTabLeft}
+                onSelectTab={handleSelectTabLeftWithFocus}
                 onCloseTab={handleCloseTabLeft}
-                onAddTab={handleAddTabLeft}
+                onAddTab={handleAddTabLeftWithFocus}
                 onReorderTabs={handleReorderTabsLeft}
                 onMoveTabToOtherSide={handleMoveTabFromRightToLeft}
               />
@@ -293,6 +360,9 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
                   <SftpPaneView
                     side="left"
                     pane={pane}
+                    dialogActionScopeId={dialogActionScopeIdRef.current}
+                    isPaneFocused={focusedSide === "left"}
+                    sftpDefaultViewMode={sftpDefaultViewMode}
                     showHeader
                     showEmptyHeader={false}
                     onToggleShowHiddenFiles={() => handleToggleHiddenFiles("left", pane.id)}
@@ -332,9 +402,9 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
               <SftpTabBar
                 tabs={rightTabsInfo}
                 side="right"
-                onSelectTab={handleSelectTabRight}
+                onSelectTab={handleSelectTabRightWithFocus}
                 onCloseTab={handleCloseTabRight}
-                onAddTab={handleAddTabRight}
+                onAddTab={handleAddTabRightWithFocus}
                 onReorderTabs={handleReorderTabsRight}
                 onMoveTabToOtherSide={handleMoveTabFromLeftToRight}
               />
@@ -350,6 +420,9 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
                   <SftpPaneView
                     side="right"
                     pane={pane}
+                    dialogActionScopeId={dialogActionScopeIdRef.current}
+                    isPaneFocused={focusedSide === "right"}
+                    sftpDefaultViewMode={sftpDefaultViewMode}
                     showHeader
                     showEmptyHeader={false}
                     onToggleShowHiddenFiles={() => handleToggleHiddenFiles("right", pane.id)}
@@ -394,6 +467,8 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
           handleSaveTextFile={handleSaveTextFile}
           editorWordWrap={editorWordWrap}
           setEditorWordWrap={setEditorWordWrap}
+          hotkeyScheme={hotkeyScheme}
+          keyBindings={keyBindings}
           showFileOpenerDialog={showFileOpenerDialog}
           setShowFileOpenerDialog={setShowFileOpenerDialog}
           fileOpenerTarget={fileOpenerTarget}
@@ -408,7 +483,19 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
 };
 
 const sftpViewAreEqual = (prev: SftpViewProps, next: SftpViewProps): boolean =>
-  prev.hosts === next.hosts && prev.keys === next.keys && prev.identities === next.identities;
+  prev.hosts === next.hosts &&
+  prev.keys === next.keys &&
+  prev.identities === next.identities &&
+  prev.groupConfigs === next.groupConfigs &&
+  prev.sftpDefaultViewMode === next.sftpDefaultViewMode &&
+  prev.sftpDoubleClickBehavior === next.sftpDoubleClickBehavior &&
+  prev.sftpAutoSync === next.sftpAutoSync &&
+  prev.sftpShowHiddenFiles === next.sftpShowHiddenFiles &&
+  prev.sftpUseCompressedUpload === next.sftpUseCompressedUpload &&
+  prev.hotkeyScheme === next.hotkeyScheme &&
+  prev.keyBindings === next.keyBindings &&
+  prev.editorWordWrap === next.editorWordWrap &&
+  prev.setEditorWordWrap === next.setEditorWordWrap;
 
 export const SftpView = memo(SftpViewInner, sftpViewAreEqual);
 SftpView.displayName = "SftpView";

components/SnippetsManager.tsx

@@ -8,7 +8,7 @@ import { Host, ShellHistoryEntry, Snippet, SSHKey } from '../types';
 import { HotkeyScheme, KeyBinding, keyEventToString, ManagedSource, matchesKeyBinding, parseKeyCombo } from '../domain/models';
 import { DistroAvatar } from './DistroAvatar';
 import SelectHostPanel from './SelectHostPanel';
-import { AsidePanel, AsidePanelContent } from './ui/aside-panel';
+import { AsidePanel, AsidePanelContent, AsidePanelFooter } from './ui/aside-panel';
 import { Button } from './ui/button';
 import { Card } from './ui/card';
 import { Combobox, ComboboxOption } from './ui/combobox';
@@ -18,6 +18,7 @@ import { Input } from './ui/input';
 import { Label } from './ui/label';
 import { SortDropdown, SortMode } from './ui/sort-dropdown';
 import { Textarea } from './ui/textarea';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
 
 interface SnippetsManagerProps {
   snippets: Snippet[];
@@ -401,9 +402,15 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
   }, [packages, selectedPackage, snippets]);
 
   const displayedSnippets = useMemo(() => {
-    let result = snippets.filter((s) => (s.package || '') === (selectedPackage || ''));
-    // Apply search filter
-    if (search.trim()) {
+    // Search spans all packages (#777): when the user types in the search
+    // box we drop the current-package scoping so cross-package matches are
+    // reachable without navigating into each one. Otherwise the user is
+    // browsing and we keep the package scope.
+    const hasSearch = search.trim().length > 0;
+    let result = hasSearch
+      ? snippets
+      : snippets.filter((s) => (s.package || '') === (selectedPackage || ''));
+    if (hasSearch) {
       const s = search.toLowerCase();
       result = result.filter(sn =>
         sn.label.toLowerCase().includes(s) ||
@@ -720,6 +727,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
           onSaveHost={onSaveHost}
           onCreateGroup={onCreateGroup}
           title={t('snippets.targets.add')}
+          layout="inline"
         />
       );
     }
@@ -730,17 +738,37 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
           open={true}
           onClose={handleClosePanel}
           title={editingSnippet.id ? t('snippets.panel.editTitle') : t('snippets.panel.newTitle')}
+          layout="inline"
           actions={
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8"
-              onClick={handleSubmit}
-              disabled={!editingSnippet.label || !editingSnippet.command}
-              aria-label={t('common.save')}
-            >
-              <Check size={16} />
-            </Button>
+            <>
+              {editingSnippet.id && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 text-destructive hover:text-destructive"
+                  onClick={() => {
+                    const id = editingSnippet.id;
+                    if (!id) return;
+                    onDelete(id);
+                    handleClosePanel();
+                  }}
+                  aria-label={t('common.delete')}
+                  title={t('common.delete')}
+                >
+                  <Trash2 size={16} />
+                </Button>
+              )}
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={handleSubmit}
+                disabled={!editingSnippet.label || !editingSnippet.command}
+                aria-label={t('common.save')}
+              >
+                <Check size={16} />
+              </Button>
+            </>
           }
         >
           <AsidePanelContent>
@@ -883,7 +911,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
           </AsidePanelContent>
 
           {/* Footer */}
-          <div className="px-4 py-3 border-t border-border/60 shrink-0">
+          <AsidePanelFooter>
             <Button
               className="w-full"
               onClick={handleSubmit}
@@ -891,7 +919,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
             >
               {editingSnippet.targets?.length ? t('action.run') : t('common.save')}
             </Button>
-          </div>
+          </AsidePanelFooter>
         </AsidePanel>
       );
     }
@@ -905,6 +933,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
           subtitle={t('snippets.history.subtitle', { count: shellHistory.length })}
           showBackButton={true}
           onBack={handleClosePanel}
+          layout="inline"
         >
           {/* History List */}
           <div
@@ -951,10 +980,11 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
   };
 
   return (
-    <div className="h-full flex gap-3 relative">
-      <div className="flex-1 flex flex-col min-h-0">
+    <TooltipProvider delayDuration={300}>
+    <div className="h-full min-h-0 flex relative">
+      <div className="flex-1 flex flex-col min-h-0 min-w-0 overflow-hidden">
         <header className="border-b border-border/50 bg-secondary/80 backdrop-blur">
-          <div className="h-14 px-4 py-2 flex items-center gap-2">
+          <div className="h-14 px-4 py-2 flex items-center gap-3">
             {/* Search box */}
             <div className="relative w-64">
               <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
@@ -975,7 +1005,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
               }}
               size="sm"
               variant="secondary"
-              className="h-10 gap-2"
+              className="h-10 gap-2 bg-foreground/5 text-foreground hover:bg-foreground/10 border-border/40"
             >
               <FolderPlus size={14} className="mr-1" /> {t('snippets.action.newPackage')}
             </Button>
@@ -1044,7 +1074,10 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
         )}
 
         <div className="flex-1 space-y-3 overflow-y-auto px-4 pb-4">
-          {displayedPackages.length > 0 && (
+          {/* Hide the sub-package grid while searching (#777) — search spans
+              all packages, so showing the package tiles alongside a flat
+              cross-package snippet list is noisy. */}
+          {displayedPackages.length > 0 && !search.trim() && (
             <>
               <div className="flex items-center justify-between">
                 <h3 className="text-sm font-semibold text-muted-foreground">{t('snippets.section.packages')}</h3>
@@ -1059,7 +1092,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
                     <ContextMenuTrigger>
                       <div
                         className={cn(
-                          "group cursor-pointer",
+                          "group cursor-pointer overflow-hidden",
                           viewMode === 'grid'
                             ? "soft-card elevate rounded-xl h-[68px] px-3 py-2"
                             : "h-14 px-3 py-2 hover:bg-secondary/60 rounded-lg transition-colors"
@@ -1079,11 +1112,11 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
                         }}
                         onClick={() => setSelectedPackage(pkg.path)}
                       >
-                        <div className="flex items-center gap-3 h-full">
+                        <div className="flex items-center gap-3 h-full min-w-0">
                           <div className="h-11 w-11 rounded-xl bg-primary/15 text-primary flex items-center justify-center flex-shrink-0">
                             <Package size={18} />
                           </div>
-                          <div className="min-w-0 flex-1">
+                          <div className="w-0 flex-1">
                             <div className="text-sm font-semibold truncate">{pkg.name}</div>
                             <div className="text-[11px] text-muted-foreground">{t('snippets.package.count', { count: pkg.count })}</div>
                           </div>
@@ -1114,7 +1147,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
                     <ContextMenuTrigger>
                       <div
                         className={cn(
-                          "group cursor-pointer",
+                          "group cursor-pointer overflow-hidden",
                           viewMode === 'grid'
                             ? "soft-card elevate rounded-xl h-[68px] px-3 py-2"
                             : "h-14 px-3 py-2 hover:bg-secondary/60 rounded-lg transition-colors"
@@ -1126,15 +1159,22 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
                         }}
                         onClick={() => handleEdit(snippet)}
                       >
-                        <div className="flex items-center gap-3 h-full">
+                        <div className="flex items-center gap-3 h-full min-w-0">
                           <div className="h-11 w-11 rounded-xl bg-primary/15 text-primary flex items-center justify-center flex-shrink-0">
                             <FileCode size={18} />
                           </div>
-                          <div className="min-w-0 flex-1">
+                          <div className="w-0 flex-1">
                             <div className="text-sm font-semibold truncate">{snippet.label}</div>
-                            <div className="text-[11px] text-muted-foreground font-mono leading-4 truncate">
-                              {snippet.command.replace(/\s+/g, ' ') || t('snippets.commandFallback')}
-                            </div>
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <div className="text-[11px] text-muted-foreground font-mono leading-4 truncate">
+                                  {snippet.command.replace(/\s+/g, ' ') || t('snippets.commandFallback')}
+                                </div>
+                              </TooltipTrigger>
+                              <TooltipContent side="bottom" className="max-w-sm break-all font-mono text-xs">
+                                {snippet.command}
+                              </TooltipContent>
+                            </Tooltip>
                           </div>
                           {snippet.shortkey && (
                             <div className="shrink-0 px-2 py-1 text-[10px] font-mono rounded border border-border bg-muted/50 text-muted-foreground">
@@ -1184,6 +1224,29 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
               </div>
             </div>
           )}
+
+          {/* Search-with-no-results feedback (#777 codex follow-up). Package
+              tiles are already hidden during search, so the only visible
+              surface is the flat snippet list — if that's empty the content
+              area would be blank without this fallback. The gate intentionally
+              excludes the fully-empty workspace (snippets.length === 0 AND
+              displayedPackages.length === 0), which the global "Create
+              snippet" empty state renders instead — avoids stacking two
+              empty states. Package-only workspaces (no snippets yet) still
+              get this feedback when searching. */}
+          {search.trim() && displayedSnippets.length === 0 && (snippets.length > 0 || displayedPackages.length > 0) && (
+            <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+              <div className="h-14 w-14 rounded-2xl bg-secondary/80 flex items-center justify-center mb-3">
+                <Search size={24} className="opacity-60" />
+              </div>
+              <h3 className="text-base font-semibold text-foreground mb-1">
+                {t('snippets.search.noResults.title')}
+              </h3>
+              <p className="text-xs text-center max-w-sm">
+                {t('snippets.search.noResults.desc', { query: search.trim() })}
+              </p>
+            </div>
+          )}
         </div>
       </div>
 
@@ -1254,6 +1317,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
       {/* Right Panel */}
       {renderRightPanel()}
     </div>
+    </TooltipProvider>
   );
 };
 

components/SyncStatusButton.tsx

@@ -136,7 +136,13 @@ export const SyncStatusButton: React.FC<SyncStatusButtonProps> = ({
     // Determine overall status for the button indicator
     const getOverallStatus = (): StatusIndicatorProps['status'] => {
         if (sync.overallSyncStatus === 'syncing') return 'syncing';
-        if (sync.overallSyncStatus === 'error' || sync.overallSyncStatus === 'conflict') return 'error';
+        if (
+            sync.overallSyncStatus === 'error' ||
+            sync.overallSyncStatus === 'conflict' ||
+            sync.overallSyncStatus === 'blocked'
+        ) {
+            return 'error';
+        }
         if (sync.overallSyncStatus === 'synced') return 'synced';
         return 'none';
     };

components/Terminal.tsx

@@ -4,8 +4,8 @@ import { SerializeAddon } from "@xterm/addon-serialize";
 import { SearchAddon } from "@xterm/addon-search";
 import "@xterm/xterm/css/xterm.css";
 import { Cpu, HardDrive, Maximize2, MemoryStick, Radio, ArrowDownToLine, ArrowUpFromLine } from "lucide-react";
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-// flushSync removed - no longer needed
+import React, { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import ReactDOM from "react-dom";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { logger } from "../lib/logger";
 import { cn, normalizeLineEndings, wrapBracketedPaste } from "../lib/utils";
@@ -26,10 +26,9 @@ import {
   shouldScrollOnTerminalInput,
 } from "../domain/terminalScroll";
 import {
-  resolveHostTerminalFontFamilyId,
-  resolveHostTerminalFontSize,
   resolveHostTerminalThemeId,
 } from "../domain/terminalAppearance";
+import { classifyDistroId } from "../domain/host";
 import { resolveHostAuth } from "../domain/sshAuth";
 import { useTerminalBackend } from "../application/state/useTerminalBackend";
 import KnownHostConfirmDialog, { HostKeyInfo } from "./KnownHostConfirmDialog";
@@ -46,14 +45,19 @@ import { TerminalToolbar } from "./terminal/TerminalToolbar";
 import { TerminalComposeBar } from "./terminal/TerminalComposeBar";
 import { TerminalContextMenu } from "./terminal/TerminalContextMenu";
 import { TerminalSearchBar } from "./terminal/TerminalSearchBar";
+import { ZmodemProgressIndicator } from "./terminal/ZmodemProgressIndicator";
+import { useZmodemTransfer } from "./terminal/hooks/useZmodemTransfer";
 import { createTerminalSessionStarters, type PendingAuth } from "./terminal/runtime/createTerminalSessionStarters";
-import { createXTermRuntime, type XTermRuntime } from "./terminal/runtime/createXTermRuntime";
+import { createXTermRuntime, primaryFontFamily, type XTermRuntime } from "./terminal/runtime/createXTermRuntime";
+import { shouldPreserveTerminalFocusOnMouseDown } from "./terminal/toolbarFocus";
+import { preserveTerminalViewportInScrollback } from "./terminal/clearTerminalViewport";
 import { XTERM_PERFORMANCE_CONFIG } from "../infrastructure/config/xtermPerformance";
 import { useTerminalSearch } from "./terminal/hooks/useTerminalSearch";
 import { useTerminalContextActions } from "./terminal/hooks/useTerminalContextActions";
 import { useTerminalAuthState } from "./terminal/hooks/useTerminalAuthState";
 import { useServerStats } from "./terminal/hooks/useServerStats";
 import { extractDropEntries, getPathForFile, DropEntry } from "../lib/sftpFileUtils";
+import { useTerminalAutocomplete, AutocompletePopup } from "./terminal/autocomplete";
 
 /**
  * Extract unique root paths from drop entries for local terminal path insertion.
@@ -110,7 +114,8 @@ interface TerminalProps {
   keys: SSHKey[];
   identities: Identity[];
   snippets: Snippet[];
-  allHosts?: Host[];
+  chainHosts?: Host[];
+  themePreviewId?: string;
   knownHosts?: KnownHost[];
   isVisible: boolean;
   inWorkspace?: boolean;
@@ -120,6 +125,7 @@ interface TerminalProps {
   fontFamilyId: string;
   fontSize: number;
   terminalTheme: TerminalTheme;
+  followAppTerminalTheme?: boolean;
   terminalSettings?: TerminalSettings;
   sessionId: string;
   startupCommand?: string;
@@ -183,7 +189,8 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   keys,
   identities,
   snippets,
-  allHosts = [],
+  chainHosts = [],
+  themePreviewId,
   knownHosts: _knownHosts = [],
   isVisible,
   inWorkspace,
@@ -193,6 +200,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   fontFamilyId,
   fontSize,
   terminalTheme,
+  followAppTerminalTheme = false,
   terminalSettings,
   sessionId,
   startupCommand,
@@ -233,11 +241,19 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const serializeAddonRef = useRef<SerializeAddon | null>(null);
   const searchAddonRef = useRef<SearchAddon | null>(null);
   const xtermRuntimeRef = useRef<XTermRuntime | null>(null);
+  const knownCwdRef = useRef<string | undefined>(undefined);
   const disposeDataRef = useRef<(() => void) | null>(null);
   const disposeExitRef = useRef<(() => void) | null>(null);
   const sessionRef = useRef<string | null>(null);
   const hasConnectedRef = useRef(false);
   const hasRunStartupCommandRef = useRef(false);
+  // Token for an in-flight retry chain. handleRetry sets this to a fresh
+  // symbol; any cancel/close/teardown/subsequent-retry invalidates it. The
+  // chained xterm.write callbacks verify the token before proceeding so a
+  // cancelled retry can't fire a startNewSession after the fact.
+  const retryTokenRef = useRef<symbol | null>(null);
+  const terminalDataCapturedRef = useRef(false);
+  const onTerminalDataCaptureRef = useRef(onTerminalDataCapture);
   const commandBufferRef = useRef<string>("");
   const [hasMouseTracking, setHasMouseTracking] = useState(false);
   const mouseTrackingRef = useRef(false);
@@ -245,10 +261,12 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
   const terminalSettingsRef = useRef(terminalSettings);
   terminalSettingsRef.current = terminalSettings;
+  onTerminalDataCaptureRef.current = onTerminalDataCapture;
   const isVisibleRef = useRef(isVisible);
   isVisibleRef.current = isVisible;
   const pendingOutputScrollRef = useRef(false);
   const lastFittedSizeRef = useRef<{ width: number; height: number } | null>(null);
+  const fontWeightFixupDoneRef = useRef(false);
 
   useEffect(() => {
     if (xtermRuntimeRef.current) {
@@ -296,6 +314,11 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const snippetsRef = useRef(snippets);
   snippetsRef.current = snippets;
 
+  // Autocomplete handler refs (set after hook initialization)
+  const autocompleteKeyEventRef = useRef<((e: KeyboardEvent) => boolean) | undefined>(undefined);
+  const autocompleteInputRef = useRef<((data: string) => void) | undefined>(undefined);
+  const autocompleteRepositionRef = useRef<(() => void) | undefined>(undefined);
+
   const terminalBackend = useTerminalBackend();
   const { resizeSession, setSessionEncoding } = terminalBackend;
 
@@ -317,6 +340,23 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const statusRef = useRef<TerminalSession["status"]>(status);
   statusRef.current = status;
 
+  // Work around xterm.js WebGL renderer bug: glyphs rendered via the constructor
+  // look different from dynamically-set ones. After text appears on screen (status
+  // becomes "connected"), do a fontWeight round-trip to normalize the rendering.
+  useEffect(() => {
+    if (status !== 'connected' || fontWeightFixupDoneRef.current || !termRef.current) return;
+    fontWeightFixupDoneRef.current = true;
+    const timer = setTimeout(() => {
+      if (!termRef.current) return;
+      // Re-read the current weight at fire time to avoid stale closures
+      const w = termRef.current.options.fontWeight;
+      if (w === 'normal' || w === 400) return;
+      termRef.current.options.fontWeight = 'normal';
+      termRef.current.options.fontWeight = w;
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [status]);
+
   const [chainProgress, setChainProgress] = useState<{
     currentHop: number;
     totalHops: number;
@@ -347,19 +387,191 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     handleCloseSearch,
   } = terminalSearch;
 
+  // Terminal autocomplete — onAcceptText writes directly to session (no CustomEvent)
+  const autocompleteAcceptTextRef = useRef<((text: string) => void) | undefined>(undefined);
+  autocompleteAcceptTextRef.current = (text: string) => {
+    const id = sessionRef.current;
+    if (id && text) {
+      // Serial line mode: buffer text and handle local echo instead of direct send
+      if (host.protocol === "serial" && serialConfig?.lineMode) {
+        for (const ch of text) {
+          if (ch === "\r") {
+            const line = serialLineBufferRef.current + "\r";
+            terminalBackend.writeToSession(id, line);
+            serialLineBufferRef.current = "";
+            if (serialConfig?.localEcho) termRef.current?.write("\r\n");
+          } else if (ch === "\x15") {
+            if (serialConfig?.localEcho && serialLineBufferRef.current.length > 0) {
+              termRef.current?.write("\b \b".repeat(serialLineBufferRef.current.length));
+            }
+            serialLineBufferRef.current = "";
+          } else if (ch === "\b" || ch === "\x7f") {
+            if (serialLineBufferRef.current.length > 0) {
+              serialLineBufferRef.current = serialLineBufferRef.current.slice(0, -1);
+              if (serialConfig?.localEcho) termRef.current?.write("\b \b");
+            }
+          } else if (ch.charCodeAt(0) >= 32) {
+            serialLineBufferRef.current += ch;
+            if (serialConfig?.localEcho) termRef.current?.write(ch);
+          }
+        }
+        // Still update commandBuffer and broadcast for serial line mode
+        // (fall through to shared bookkeeping below — don't return early)
+      } else if (host.protocol === "serial" && serialConfig?.localEcho) {
+        // Serial character mode with local echo: echo accepted text locally
+        terminalBackend.writeToSession(id, text);
+        for (const ch of text) {
+          if (ch === "\r") {
+            termRef.current?.write("\r\n");
+          } else if (ch.charCodeAt(0) >= 32) {
+            termRef.current?.write(ch);
+          }
+        }
+      } else {
+        terminalBackend.writeToSession(id, text);
+      }
+
+      // Broadcast to other sessions if broadcast mode is enabled
+      if (isBroadcastEnabledRef.current && onBroadcastInputRef.current) {
+        onBroadcastInputRef.current(text, sessionId);
+      }
+
+      // Update command buffer for onCommandExecuted tracking
+      for (const ch of text) {
+        if (ch === "\r" || ch === "\n") {
+          const cmd = commandBufferRef.current.trim();
+          if (cmd && onCommandExecuted) onCommandExecuted(cmd, host.id, host.label, sessionId);
+          commandBufferRef.current = "";
+        } else if (ch === "\x15") {
+          // Ctrl+U: clear line — reset command buffer (fuzzy match sends this)
+          commandBufferRef.current = "";
+        } else if (ch === "\b" || ch === "\x7f") {
+          // Backspace: remove last character (Windows fuzzy replacement uses \b)
+          commandBufferRef.current = commandBufferRef.current.slice(0, -1);
+        } else if (ch.charCodeAt(0) >= 32) {
+          commandBufferRef.current += ch;
+        }
+      }
+    }
+  };
+
+  const autocomplete = useTerminalAutocomplete({
+    termRef,
+    sessionId,
+    hostId: host.id,
+    hostOs: host.os || (host.protocol === "local"
+      ? (navigator.platform?.startsWith("Win") ? "windows" : navigator.platform?.startsWith("Mac") ? "macos" : "linux")
+      : "linux"),
+    settings: terminalSettings ? {
+      enabled: terminalSettings.autocompleteEnabled ?? true,
+      showGhostText: terminalSettings.autocompleteGhostText ?? true,
+      showPopupMenu: terminalSettings.autocompletePopupMenu ?? true,
+      debounceMs: terminalSettings.autocompleteDebounceMs ?? 100,
+      minChars: terminalSettings.autocompleteMinChars ?? 1,
+      maxSuggestions: terminalSettings.autocompleteMaxSuggestions ?? 8,
+    } : undefined,
+    onAcceptText: (text) => autocompleteAcceptTextRef.current?.(text),
+    protocol: host.protocol,
+    getCwd: () => knownCwdRef.current ?? xtermRuntimeRef.current?.currentCwd,
+  });
+
+  // Wire up autocomplete handler refs so createXTermRuntime can use them
+  autocompleteKeyEventRef.current = autocomplete.handleKeyEvent;
+  autocompleteInputRef.current = autocomplete.handleInput;
+  autocompleteRepositionRef.current = autocomplete.repositionPopup;
+  const autocompleteClosePopup = autocomplete.closePopup;
+
+  useEffect(() => {
+    knownCwdRef.current = undefined;
+  }, [sessionId, host.id]);
+
+  useEffect(() => {
+    if (host.protocol === "local" || host.protocol === "serial" || host.protocol === "telnet") {
+      return;
+    }
+    if (status !== "connected" || !sessionRef.current || knownCwdRef.current) return;
+
+    let cancelled = false;
+    const timer = setTimeout(async () => {
+      if (!sessionRef.current) return;
+      try {
+        const result = await terminalBackend.getSessionPwd(sessionRef.current);
+        if (!cancelled && result.success && result.cwd) {
+          knownCwdRef.current = result.cwd;
+        }
+      } catch {
+        // Best effort only.
+      }
+    }, 150);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [host.protocol, status, terminalBackend]);
+
+  useEffect(() => {
+    if (!isVisible) {
+      autocompleteClosePopup();
+    }
+  }, [isVisible, autocompleteClosePopup]);
+
   // Check if this is a local or serial connection (doesn't need connection dialog during connecting)
   const isLocalConnection = host.protocol === "local";
   const isSerialConnection = host.protocol === "serial";
 
-  // Server stats (CPU, Memory, Disk) — only for Linux/macOS
+  // Server stats (CPU, Memory, Disk) — only for Linux/macOS, and never
+  // for hosts classified as network devices (either via explicit
+  // deviceType='network' or via SSH banner detection that populated
+  // host.distro with a network-vendor ID). See #674: polling the stats
+  // command on Cisco / Huawei / Juniper etc. generates one AAA session
+  // log entry per poll because each exec channel is counted as a new
+  // session on those devices.
+  //
+  // IMPORTANT: this gating must NOT go through getEffectiveHostDistro()
+  // because that honors the manual distro override (`distroMode: 'manual'`
+  // + `manualDistro`) which is purely a cosmetic icon choice. A user who
+  // pinned an "ubuntu" icon on what is actually a Cisco host would
+  // otherwise silently re-enable the polling loop and re-introduce the
+  // AAA log flood this patch is meant to eliminate. The display icon can
+  // still be overridden (see DistroAvatar) — gating uses the raw detected
+  // `host.distro` and the explicit `host.deviceType` only.
+  const detectedDeviceClass = classifyDistroId(host.distro);
+  const isNetworkDevice =
+    host.deviceType === 'network' || detectedDeviceClass === 'network-device';
+  const isSupportedOs =
+    !isNetworkDevice &&
+    (host.os === 'linux' || host.os === 'macos' || detectedDeviceClass === 'linux-like');
   const { stats: serverStats } = useServerStats({
     sessionId,
     enabled: terminalSettings?.showServerStats ?? true,
     refreshInterval: terminalSettings?.serverStatsRefreshInterval ?? 5,
-    isSupportedOs: host.os === 'linux' || host.os === 'macos',
+    isSupportedOs,
     isConnected: status === 'connected',
+    isVisible,
   });
 
+  const zmodem = useZmodemTransfer(sessionId);
+
+  const zmodemToastedRef = useRef(false);
+  useEffect(() => {
+    if (zmodem.active) {
+      zmodemToastedRef.current = false;
+      return;
+    }
+    if (zmodemToastedRef.current) return;
+    if (zmodem.error) {
+      zmodemToastedRef.current = true;
+      toast.error(zmodem.error, 'ZMODEM');
+    } else if (zmodem.filename) {
+      zmodemToastedRef.current = true;
+      toast.success(
+        `${zmodem.transferType === 'upload' ? 'Uploaded' : 'Downloaded'}: ${zmodem.filename}`,
+        'ZMODEM',
+      );
+    }
+  }, [zmodem.active, zmodem.error, zmodem.filename, zmodem.transferType]);
+
   useEffect(() => {
     if (!error) {
       lastToastedErrorRef.current = null;
@@ -409,29 +621,64 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     termRef.current?.focus();
   }, []);
 
+  const handleTopOverlayMouseDownCapture = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.button !== 0) return;
+    if (!shouldPreserveTerminalFocusOnMouseDown(e.target)) return;
+    e.preventDefault();
+  }, []);
+
   // Subscribe to custom theme changes so editing triggers re-render
   const customThemes = useCustomThemes();
+  const hasFontSizeOverride = host.fontSizeOverride === true || (host.fontSizeOverride === undefined && host.fontSize != null);
+  const hasFontFamilyOverride = host.fontFamilyOverride === true || (host.fontFamilyOverride === undefined && !!host.fontFamily);
+  const hasFontWeightOverride = host.fontWeightOverride === true || (host.fontWeightOverride === undefined && host.fontWeight != null);
+  const effectiveFontSize = useMemo(
+    () => (hasFontSizeOverride && host.fontSize != null ? host.fontSize : fontSize),
+    [fontSize, hasFontSizeOverride, host.fontSize],
+  );
+  const effectiveFontWeight = useMemo(
+    () => (hasFontWeightOverride && host.fontWeight != null ? host.fontWeight : (terminalSettings?.fontWeight ?? 400)),
+    [terminalSettings?.fontWeight, hasFontWeightOverride, host.fontWeight],
+  );
+  const resolvedFontFamily = useMemo(() => {
+    const hostFontId = hasFontFamilyOverride && host.fontFamily
+      ? host.fontFamily
+      : fontFamilyId;
+    const resolvedFontId = hostFontId || "menlo";
+    return (availableFonts.find((f) => f.id === resolvedFontId) || availableFonts[0]).family;
+  }, [availableFonts, fontFamilyId, hasFontFamilyOverride, host.fontFamily]);
 
   const effectiveTheme = useMemo(() => {
-    const themeId = resolveHostTerminalThemeId(host, terminalTheme.id);
+    // When "Follow Application Theme" is on and there's no active
+    // preview, skip per-host overrides — all terminals should use the
+    // UI-matched theme passed via terminalTheme prop.
+    if (followAppTerminalTheme && !themePreviewId) return terminalTheme;
+    const themeId = themePreviewId ?? resolveHostTerminalThemeId(
+      { theme: host.theme, themeOverride: host.themeOverride } as Pick<Host, 'theme' | 'themeOverride'>,
+      terminalTheme.id,
+    );
     if (themeId) {
       const hostTheme = TERMINAL_THEMES.find((t) => t.id === themeId)
         || customThemes.find((t) => t.id === themeId);
       if (hostTheme) return hostTheme;
     }
     return terminalTheme;
-  }, [host, terminalTheme, customThemes]);
+  }, [customThemes, followAppTerminalTheme, host.theme, host.themeOverride, terminalTheme, themePreviewId]);
 
   const resolvedChainHosts =
-    (host.hostChain?.hostIds
-      ?.map((id) => allHosts.find((h) => h.id === id))
-      .filter(Boolean) as Host[]) || [];
+    chainHosts;
 
   const updateStatus = (next: TerminalSession["status"]) => {
     setStatus(next);
     hasConnectedRef.current = next === "connected";
     onStatusChange?.(sessionId, next);
   };
+  const handleTerminalDataCaptureOnce = useCallback((capturedSessionId: string, data: string) => {
+    const captureHandler = onTerminalDataCaptureRef.current;
+    if (!captureHandler || terminalDataCapturedRef.current) return;
+    terminalDataCapturedRef.current = true;
+    captureHandler(capturedSessionId, data);
+  }, []);
 
   const cleanupSession = () => {
     disposeDataRef.current?.();
@@ -450,6 +697,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   };
 
   const teardown = () => {
+    retryTokenRef.current = null;
     cleanupSession();
     xtermRuntimeRef.current?.dispose();
     xtermRuntimeRef.current = null;
@@ -499,7 +747,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       }
     },
     onSessionExit,
-    onTerminalDataCapture,
+    onTerminalDataCapture: handleTerminalDataCaptureOnce,
     onOsDetected,
     onCommandExecuted,
     sessionLog,
@@ -508,6 +756,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
   useEffect(() => {
     let disposed = false;
+    terminalDataCapturedRef.current = false;
     setError(null);
     hasConnectedRef.current = false;
     pendingOutputScrollRef.current = false;
@@ -544,7 +793,14 @@ const TerminalComponent: React.FC<TerminalProps> = ({
           serialLocalEcho: serialConfig?.localEcho,
           serialLineMode: serialConfig?.lineMode,
           serialLineBufferRef,
+          onCwdChange: (cwd: string) => {
+            knownCwdRef.current = cwd;
+          },
           onOsc52ReadRequest: handleOsc52ReadRequest,
+          // Autocomplete integration
+          onAutocompleteKeyEvent: (e: KeyboardEvent) => autocompleteKeyEventRef.current?.(e) ?? true,
+          onAutocompleteInput: (data: string) => autocompleteInputRef.current?.(data),
+          isRestoringSelectionRef,
         });
 
         xtermRuntimeRef.current = runtime;
@@ -619,11 +875,11 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
     return () => {
       disposed = true;
-      if (onTerminalDataCapture && serializeAddonRef.current) {
+      if (!terminalDataCapturedRef.current && serializeAddonRef.current) {
         try {
           const terminalData = serializeAddonRef.current.serialize();
           logger.info("[Terminal] Capturing data on unmount", { sessionId, dataLength: terminalData.length });
-          onTerminalDataCapture(sessionId, terminalData);
+          handleTerminalDataCaptureOnce(sessionId, terminalData);
         } catch (err) {
           logger.warn("Failed to serialize terminal data on unmount:", err);
         }
@@ -631,7 +887,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       teardown();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps -- Effect only runs on host.id/sessionId change, internal functions are stable
-  }, [host.id, sessionId]);
+  }, [handleTerminalDataCaptureOnce, host.id, sessionId]);
 
   // Connection timeline and timeout visuals
   useEffect(() => {
@@ -696,6 +952,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     if (!options?.force) {
       const lastSize = lastFittedSizeRef.current;
       if (lastSize && lastSize.width === width && lastSize.height === height) {
+        autocompleteRepositionRef.current?.();
         return;
       }
     }
@@ -704,6 +961,13 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       try {
         lastFittedSizeRef.current = { width, height };
         fitAddon.fit();
+        if (typeof requestAnimationFrame === "function") {
+          requestAnimationFrame(() => {
+            autocompleteRepositionRef.current?.();
+          });
+        } else {
+          autocompleteRepositionRef.current?.();
+        }
       } catch (err) {
         logger.warn("Fit failed", err);
       }
@@ -719,21 +983,29 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     }
   };
 
-  useEffect(() => {
+  // Sync xterm theme before browser paint so canvas + DOM CSS vars update in the same frame
+  useLayoutEffect(() => {
     if (termRef.current) {
-      const effectiveFontSize = resolveHostTerminalFontSize(host, fontSize);
-      termRef.current.options.fontSize = effectiveFontSize;
-
       termRef.current.options.theme = {
         ...effectiveTheme.colors,
         selectionBackground: effectiveTheme.colors.selection,
+        scrollbarSliderBackground: effectiveTheme.colors.foreground + '33',
+        scrollbarSliderHoverBackground: effectiveTheme.colors.foreground + '66',
+        scrollbarSliderActiveBackground: effectiveTheme.colors.foreground + '80',
       };
+    }
+  }, [effectiveTheme]);
+
+  useEffect(() => {
+    if (termRef.current) {
+      termRef.current.options.fontSize = effectiveFontSize;
+      termRef.current.options.fontFamily = resolvedFontFamily;
 
       if (terminalSettings) {
         termRef.current.options.cursorStyle = terminalSettings.cursorShape;
         termRef.current.options.cursorBlink = terminalSettings.cursorBlink;
-        termRef.current.options.scrollback = terminalSettings.scrollback;
-        termRef.current.options.fontWeight = terminalSettings.fontWeight as
+        termRef.current.options.scrollback = terminalSettings.scrollback === 0 ? 999999 : terminalSettings.scrollback;
+        termRef.current.options.fontWeight = effectiveFontWeight as
           | 100
           | 200
           | 300
@@ -748,10 +1020,10 @@ const TerminalComponent: React.FC<TerminalProps> = ({
           if (typeof document === "undefined" || !document.fonts?.check) {
             return terminalSettings.fontWeightBold;
           }
-          const weightSpec = `${terminalSettings.fontWeightBold} ${effectiveFontSize}px ${fontFamily}`;
+          const weightSpec = `${terminalSettings.fontWeightBold} ${effectiveFontSize}px ${primaryFontFamily(fontFamily)}`;
           return document.fonts.check(weightSpec)
             ? terminalSettings.fontWeightBold
-            : terminalSettings.fontWeight;
+            : effectiveFontWeight;
         })();
 
         termRef.current.options.fontWeightBold = resolvedFontWeightBold as
@@ -780,27 +1052,13 @@ const TerminalComponent: React.FC<TerminalProps> = ({
         termRef.current.options.ignoreBracketedPasteMode = terminalSettings.disableBracketedPaste ?? false;
       }
 
-      setTimeout(() => safeFit({ force: true }), 50);
+      if (isVisibleRef.current) {
+        setTimeout(() => safeFit({ force: true, requireVisible: true }), 50);
+      } else {
+        lastFittedSizeRef.current = null;
+      }
     }
-  }, [fontSize, effectiveTheme, terminalSettings, host]);
-
-  useEffect(() => {
-    if (termRef.current) {
-      const effectiveFontSize = resolveHostTerminalFontSize(host, fontSize);
-      termRef.current.options.fontSize = effectiveFontSize;
-
-      const hostFontId = resolveHostTerminalFontFamilyId(host, fontFamilyId) || "menlo";
-      const fontObj = availableFonts.find((f) => f.id === hostFontId) || availableFonts[0];
-      termRef.current.options.fontFamily = fontObj.family;
-
-      termRef.current.options.theme = {
-        ...effectiveTheme.colors,
-        selectionBackground: effectiveTheme.colors.selection,
-      };
-
-      setTimeout(() => safeFit({ force: true }), 50);
-    }
-  }, [host, fontFamilyId, fontSize, effectiveTheme, availableFonts]);
+  }, [effectiveFontSize, effectiveFontWeight, resolvedFontFamily, terminalSettings]);
 
   useEffect(() => {
     if (!isVisible) return;
@@ -848,12 +1106,11 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
         if (terminalSettings && termRef.current) {
           const fontFamily = termRef.current.options?.fontFamily || "";
-          const effectiveFontSize = resolveHostTerminalFontSize(host, fontSize);
           if (typeof document !== "undefined" && document.fonts?.check) {
-            const weightSpec = `${terminalSettings.fontWeightBold} ${effectiveFontSize}px ${fontFamily}`;
+            const weightSpec = `${terminalSettings.fontWeightBold} ${effectiveFontSize}px ${primaryFontFamily(fontFamily)}`;
             const resolvedBold = document.fonts.check(weightSpec)
               ? terminalSettings.fontWeightBold
-              : terminalSettings.fontWeight;
+              : effectiveFontWeight;
             termRef.current.options.fontWeightBold = resolvedBold as
               | 100
               | 200
@@ -884,7 +1141,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     return () => {
       cancelled = true;
     };
-  }, [host, fontFamilyId, fontSize, resizeSession, sessionId, terminalSettings]);
+  }, [effectiveFontSize, effectiveFontWeight, resizeSession, terminalSettings]);
 
   useEffect(() => {
     if (!isVisible || !containerRef.current || !fitAddonRef.current) return;
@@ -921,12 +1178,38 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
   useEffect(() => {
     if (!isVisible || !fitAddonRef.current) return;
-    const timer = setTimeout(() => {
+    // Fit twice: once after initial layout (100ms) and again after layout settles
+    // (350ms) to handle race conditions during split operations where the container
+    // dimensions may not be final on the first pass.
+    const timer1 = setTimeout(() => {
       safeFit({ requireVisible: true });
     }, 100);
-    return () => clearTimeout(timer);
+    const timer2 = setTimeout(() => {
+      safeFit({ force: true, requireVisible: true });
+    }, 350);
+    return () => { clearTimeout(timer1); clearTimeout(timer2); };
   }, [inWorkspace, isVisible]);
 
+  // When search bar opens/closes, re-fit terminal and maintain scroll position
+  useEffect(() => {
+    const term = termRef.current;
+    if (!term || !fitAddonRef.current) return;
+    const buffer = term.buffer.active;
+    const wasAtBottom = buffer.viewportY >= buffer.baseY;
+    const prevViewportY = buffer.viewportY;
+    const timer = setTimeout(() => {
+      safeFit({ force: true, requireVisible: true });
+      requestAnimationFrame(() => {
+        if (wasAtBottom) {
+          term.scrollToBottom();
+        } else {
+          term.scrollToLine(prevViewportY);
+        }
+      });
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [isSearchOpen]);
+
   useEffect(() => {
     const shouldAutoFocus = isVisible && termRef.current && (!inWorkspace || isFocusMode);
     if (shouldAutoFocus) {
@@ -955,7 +1238,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       const hasText = !!selection && selection.length > 0;
       setHasSelection(hasText);
 
-      if (hasText && terminalSettings?.copyOnSelect) {
+      if (hasText && terminalSettings?.copyOnSelect && !isRestoringSelectionRef.current) {
         navigator.clipboard.writeText(selection).catch((err) => {
           logger.warn("Copy on select failed:", err);
         });
@@ -1022,6 +1305,8 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   }, [sessionId]);
 
   useEffect(() => {
+    if (!isVisible) return;
+
     let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
 
     const handler = () => {
@@ -1039,11 +1324,17 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       if (resizeTimeout) clearTimeout(resizeTimeout);
       window.removeEventListener("resize", handler);
     };
-  }, []);
+  }, [isVisible]);
 
   const disableBracketedPasteRef = useRef(terminalSettings?.disableBracketedPaste ?? false);
   disableBracketedPasteRef.current = terminalSettings?.disableBracketedPaste ?? false;
 
+  // True only while createXTermRuntime is programmatically restoring the
+  // selection right after a keystroke (preserveSelectionOnInput). Lets
+  // copy-on-select skip a redundant clipboard write that would otherwise
+  // clobber whatever the user copied elsewhere in the meantime.
+  const isRestoringSelectionRef = useRef(false);
+
   const scrollOnPasteRef = useRef(terminalSettings?.scrollOnPaste ?? true);
   scrollOnPasteRef.current = terminalSettings?.scrollOnPaste ?? true;
 
@@ -1128,6 +1419,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   };
 
   const handleCancelConnect = () => {
+    retryTokenRef.current = null;
     setIsCancelling(true);
     auth.setNeedsAuth(false);
     auth.setAuthRetryMessage(null);
@@ -1147,6 +1439,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   };
 
   const handleCloseDisconnectedSession = () => {
+    retryTokenRef.current = null;
     onCloseSession?.(sessionId);
   };
 
@@ -1188,24 +1481,68 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const handleRetry = () => {
     if (!termRef.current) return;
     cleanupSession();
+    const term = termRef.current;
+    // Claim a fresh retry token. If the user cancels / closes / unmounts /
+    // kicks off another retry while the chained writes below are still
+    // queued, the token will be invalidated and our callbacks will abort
+    // before opening a ghost backend session with no owning UI.
+    const retryToken = Symbol("retry");
+    retryTokenRef.current = retryToken;
+    const retryStillActive = () => retryTokenRef.current === retryToken && termRef.current === term;
+
     auth.resetForRetry();
+    terminalDataCapturedRef.current = false;
     hasRunStartupCommandRef.current = false;
     setIsDisconnectedDialogDismissed(false);
     setStatus("connecting");
     setError(null);
     setProgressLogs(["Retrying secure channel..."]);
     setShowLogs(true);
-    if (host.protocol === "serial") {
-      sessionStarters.startSerial(termRef.current);
-    } else if (host.protocol === "local" || host.hostname === "localhost") {
-      sessionStarters.startLocal(termRef.current);
-    } else if (host.protocol === "telnet") {
-      sessionStarters.startTelnet(termRef.current);
-    } else if (host.moshEnabled) {
-      sessionStarters.startMosh(termRef.current);
-    } else {
-      sessionStarters.startSSH(termRef.current);
-    }
+
+    const startNewSession = () => {
+      if (!retryStillActive()) return;
+      if (host.protocol === "serial") {
+        sessionStarters.startSerial(term);
+      } else if (host.protocol === "local" || host.hostname === "localhost") {
+        sessionStarters.startLocal(term);
+      } else if (host.protocol === "telnet") {
+        sessionStarters.startTelnet(term);
+      } else if (host.moshEnabled) {
+        sessionStarters.startMosh(term);
+      } else {
+        sessionStarters.startSSH(term);
+      }
+    };
+
+    // Chain the whole preparation through xterm.write callbacks so everything
+    // lands in strict order — see #695. xterm.write is async, so without
+    // chaining, a fast reconnect path (local/serial especially) can interleave
+    // the new session's first bytes with our reset sequence, corrupting the
+    // first screen.
+    //
+    // 1. Exit the alternate screen first. preserveTerminalViewportInScrollback
+    //    is a no-op on the alt buffer (disconnect while in vim/less/top), so
+    //    we must be on the normal buffer before preserving.
+    term.write('\x1b[?1049l', () => {
+      if (!retryStillActive()) return;
+      // 2. Push the previous session's viewport into scrollback so the user
+      //    can still read it after reconnect.
+      preserveTerminalViewportInScrollback(term);
+      // 3. Soft terminal reset (DECSTR, \x1b[!p) resets VT220-era modes that
+      //    full-screen apps may have left on — DECCKM (otherwise arrow keys
+      //    emit SS3 and break readline history), keypad mode, SGR,
+      //    insert/replace, origin, cursor visibility — without clearing the
+      //    buffer. DECSTR does not cover xterm-specific extensions, so also
+      //    explicitly disable mouse tracking (1000/1002/1003/1006) and
+      //    bracketed paste (2004). Finally home the cursor.
+      term.write(
+        '\x1b[!p\x1b[?1000l\x1b[?1002l\x1b[?1003l\x1b[?1006l\x1b[?2004l\x1b[H',
+        // 4. Only now — after every prep byte has been applied to the
+        //    terminal — start the new session, so its first output can't
+        //    interleave with the reset sequence.
+        startNewSession,
+      );
+    });
   };
 
   const shouldShowConnectionDialog = status !== "connected"
@@ -1322,6 +1659,14 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       : status === "connecting"
         ? "bg-amber-400"
         : "bg-rose-500";
+  const terminalPreviewVars = useMemo(() => ({
+    ['--terminal-ui-bg' as never]: `var(--terminal-preview-bg, ${effectiveTheme.colors.background})`,
+    ['--terminal-ui-fg' as never]: `var(--terminal-preview-fg, ${effectiveTheme.colors.foreground})`,
+    ['--terminal-ui-border' as never]: `var(--terminal-preview-border, color-mix(in srgb, ${effectiveTheme.colors.foreground} 8%, ${effectiveTheme.colors.background} 92%))`,
+    ['--terminal-ui-toolbar-btn' as never]: `var(--terminal-preview-toolbar-btn, color-mix(in srgb, ${effectiveTheme.colors.background} 88%, ${effectiveTheme.colors.foreground} 12%))`,
+    ['--terminal-ui-toolbar-btn-hover' as never]: `var(--terminal-preview-toolbar-btn-hover, color-mix(in srgb, ${effectiveTheme.colors.background} 78%, ${effectiveTheme.colors.foreground} 22%))`,
+    ['--terminal-ui-toolbar-btn-active' as never]: `var(--terminal-preview-toolbar-btn-active, color-mix(in srgb, ${effectiveTheme.colors.background} 68%, ${effectiveTheme.colors.foreground} 32%))`,
+  }), [effectiveTheme.colors.background, effectiveTheme.colors.foreground]);
 
   return (
     <TerminalContextMenu
@@ -1332,6 +1677,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       isAlternateScreen={hasMouseTracking}
       onCopy={terminalContextActions.onCopy}
       onPaste={terminalContextActions.onPaste}
+      onPasteSelection={terminalContextActions.onPasteSelection}
       onSelectAll={terminalContextActions.onSelectAll}
       onClear={terminalContextActions.onClear}
       onSelectWord={terminalContextActions.onSelectWord}
@@ -1344,6 +1690,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
           "relative h-full w-full flex overflow-hidden bg-gradient-to-br from-[#050910] via-[#06101a] to-[#0b1220]",
           isComposeBarOpen && !inWorkspace && "flex-col"
         )}
+        style={terminalPreviewVars}
         onDragEnter={handleDragEnter}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
@@ -1372,16 +1719,17 @@ const TerminalComponent: React.FC<TerminalProps> = ({
         )}
         <div className="absolute left-0 right-0 top-0 z-20 pointer-events-none">
           <div
-            className="flex items-center gap-1 px-2 py-0.5 backdrop-blur-md pointer-events-auto min-w-0 border-b-[0.5px]"
+            className="flex items-center gap-1 px-2 py-0.5 backdrop-blur-md pointer-events-auto min-w-0"
+            onMouseDownCapture={handleTopOverlayMouseDownCapture}
             style={{
-              backgroundColor: effectiveTheme.colors.background,
-              color: effectiveTheme.colors.foreground,
-              borderColor: `color-mix(in srgb, ${effectiveTheme.colors.foreground} 8%, ${effectiveTheme.colors.background} 92%)`,
-              ['--terminal-toolbar-fg' as never]: effectiveTheme.colors.foreground,
-              ['--terminal-toolbar-bg' as never]: effectiveTheme.colors.background,
-              ['--terminal-toolbar-btn' as never]: `color-mix(in srgb, ${effectiveTheme.colors.background} 88%, ${effectiveTheme.colors.foreground} 12%)`,
-              ['--terminal-toolbar-btn-hover' as never]: `color-mix(in srgb, ${effectiveTheme.colors.background} 78%, ${effectiveTheme.colors.foreground} 22%)`,
-              ['--terminal-toolbar-btn-active' as never]: `color-mix(in srgb, ${effectiveTheme.colors.background} 68%, ${effectiveTheme.colors.foreground} 32%)`,
+              backgroundColor: 'var(--terminal-ui-bg)',
+              color: 'var(--terminal-ui-fg)',
+              borderColor: 'var(--terminal-ui-border)',
+              ['--terminal-toolbar-fg' as never]: 'var(--terminal-ui-fg)',
+              ['--terminal-toolbar-bg' as never]: 'var(--terminal-ui-bg)',
+              ['--terminal-toolbar-btn' as never]: 'var(--terminal-ui-toolbar-btn)',
+              ['--terminal-toolbar-btn-hover' as never]: 'var(--terminal-ui-toolbar-btn-hover)',
+              ['--terminal-toolbar-btn-active' as never]: 'var(--terminal-ui-toolbar-btn-active)',
             }}
           >
             <div className="flex items-center gap-1 text-[11px] font-semibold">
@@ -1756,18 +2104,42 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
         <div
           className="h-full flex-1 min-w-0 relative overflow-hidden pt-8"
-          style={{ backgroundColor: effectiveTheme.colors.background }}
+          style={{ backgroundColor: 'var(--terminal-ui-bg)' }}
         >
           <div
             ref={containerRef}
-            className="absolute inset-x-0 bottom-0"
+            className="xterm-container absolute inset-x-0 bottom-0"
             style={{
               top: isSearchOpen ? "64px" : "30px",
               paddingLeft: 6,
-              backgroundColor: effectiveTheme.colors.background,
+              backgroundColor: 'var(--terminal-ui-bg)',
             }}
           />
 
+          {/* Autocomplete popup — rendered via Portal to escape overflow:hidden */}
+          {isVisible && autocomplete.state.popupVisible && autocomplete.state.suggestions.length > 0 &&
+            ReactDOM.createPortal(
+              <AutocompletePopup
+                suggestions={autocomplete.state.suggestions}
+                selectedIndex={autocomplete.state.selectedIndex}
+                position={autocomplete.state.popupPosition}
+                cursorLineTop={autocomplete.state.popupCursorLineTop}
+                cursorLineBottom={autocomplete.state.popupCursorLineBottom}
+                visible={autocomplete.state.popupVisible}
+                expandUpward={autocomplete.state.expandUpward}
+                themeColors={effectiveTheme.colors}
+                onSelect={autocomplete.selectSuggestion}
+                subDirPanels={autocomplete.state.subDirPanels}
+                subDirFocusLevel={autocomplete.state.subDirFocusLevel}
+                containerRef={containerRef}
+                onRequestReposition={autocomplete.repositionPopup}
+                searchBarOffset={isSearchOpen ? 64 : 30}
+                onDismiss={autocompleteClosePopup}
+              />,
+              document.body,
+            )
+          }
+
           {needsHostKeyVerification && pendingHostKeyInfo && (
             <div className="absolute inset-0 z-30 bg-background">
               <KnownHostConfirmDialog
@@ -1847,6 +2219,22 @@ const TerminalComponent: React.FC<TerminalProps> = ({
                 }}
               />
             )}
+
+          {/* ZMODEM transfer progress indicator */}
+          {zmodem.active && (
+            <div className="absolute bottom-4 right-4 z-[25] pointer-events-auto">
+              <ZmodemProgressIndicator
+                transferType={zmodem.transferType}
+                filename={zmodem.filename}
+                transferred={zmodem.transferred}
+                total={zmodem.total}
+                fileIndex={zmodem.fileIndex}
+                fileCount={zmodem.fileCount}
+                finalizing={zmodem.finalizing}
+                onCancel={zmodem.cancel}
+              />
+            </div>
+          )}
         </div>
 
         {/* Compose Bar (solo sessions only; workspace uses TerminalLayer's global bar) */}

components/TextEditorModal.tsx

@@ -20,6 +20,7 @@ loader.config({ paths: { vs: monacoBasePath } });
 
 import { useI18n } from '../application/i18n/I18nProvider';
 import { useClipboardBackend } from '../application/state/useClipboardBackend';
+import { HotkeyScheme, KeyBinding, matchesKeyBinding } from '../domain/models';
 import { getLanguageId, getLanguageName, getSupportedLanguages } from '../lib/sftpFileUtils';
 import { Button } from './ui/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
@@ -34,6 +35,8 @@ interface TextEditorModalProps {
   onSave: (content: string) => Promise<void>;
   editorWordWrap: boolean;
   onToggleWordWrap: () => void;
+  hotkeyScheme: HotkeyScheme;
+  keyBindings: KeyBinding[];
 }
 
 // Map our language IDs to Monaco language IDs
@@ -122,12 +125,38 @@ const hslToHex = (hslString: string): string => {
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 };
 
-// Get background color from CSS variable
-const getBackgroundColor = (): string => {
-  const bgValue = getComputedStyle(document.documentElement)
-    .getPropertyValue('--background')
+// Read a CSS custom-property and convert from HSL to hex
+const getCssColor = (varName: string, fallback: string): string => {
+  const value = getComputedStyle(document.documentElement)
+    .getPropertyValue(varName)
     .trim();
-  return bgValue ? hslToHex(bgValue) : '#1e1e1e';
+  return value ? hslToHex(value) : fallback;
+};
+
+interface EditorColors {
+  bg: string;
+  fg: string;
+  primary: string;
+  card: string;
+  mutedFg: string;
+  border: string;
+}
+
+/** Read all UI CSS variables that matter for the Monaco theme. */
+const getEditorColors = (isDark: boolean): EditorColors => ({
+  bg: getCssColor('--background', isDark ? '#1e1e1e' : '#ffffff'),
+  fg: getCssColor('--foreground', isDark ? '#d4d4d4' : '#1e1e1e'),
+  primary: getCssColor('--primary', isDark ? '#569cd6' : '#0078d4'),
+  card: getCssColor('--card', isDark ? '#252526' : '#f3f3f3'),
+  mutedFg: getCssColor('--muted-foreground', isDark ? '#858585' : '#858585'),
+  border: getCssColor('--border', isDark ? '#3c3c3c' : '#d4d4d4'),
+});
+
+/** Build a fingerprint string so we can detect immersive-mode color changes cheaply. */
+const getThemeSignal = (): string => {
+  const root = document.documentElement;
+  return root.dataset.immersiveTheme
+    ?? getComputedStyle(root).getPropertyValue('--background').trim();
 };
 
 export const TextEditorModal: React.FC<TextEditorModalProps> = ({
@@ -138,6 +167,8 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
   onSave,
   editorWordWrap,
   onToggleWordWrap,
+  hotkeyScheme,
+  keyBindings,
 }) => {
   const { t } = useI18n();
   const { readClipboardText: readClipboardTextFromBridge } = useClipboardBackend();
@@ -158,49 +189,64 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
     document.documentElement.classList.contains('dark')
   );
 
-  // Track background color for custom theme
-  const [bgColor, setBgColor] = useState(() => getBackgroundColor());
+  // Track a signal that changes whenever immersive-mode or base theme colors change
+  const [themeSignal, setThemeSignal] = useState(() => getThemeSignal());
 
   // Custom theme name
   const customThemeName = isDarkTheme ? 'netcatty-dark' : 'netcatty-light';
 
-  // Define and update custom Monaco themes based on UI background color
+  // Define and update custom Monaco themes — syncs with immersive-mode / base UI colors
   useEffect(() => {
     if (!monaco) return;
 
-    // Define dark theme with custom background
+    const colors = getEditorColors(isDarkTheme);
+
+    const themeColors: Record<string, string> = {
+      'editor.background': colors.bg,
+      'editor.foreground': colors.fg,
+      'editorCursor.foreground': colors.primary,
+      'editor.selectionBackground': colors.primary + '40',
+      'editor.inactiveSelectionBackground': colors.primary + '25',
+      'editorLineNumber.foreground': colors.mutedFg,
+      'editorLineNumber.activeForeground': colors.fg,
+      'editor.lineHighlightBackground': colors.fg + '08',
+      'editorWidget.background': colors.card,
+      'editorWidget.foreground': colors.fg,
+      'editorWidget.border': colors.border,
+      'input.background': colors.card,
+      'input.foreground': colors.fg,
+      'input.border': colors.border,
+    };
+
     monaco.editor.defineTheme('netcatty-dark', {
       base: 'vs-dark',
       inherit: true,
       rules: [],
-      colors: {
-        'editor.background': bgColor,
-      },
+      colors: themeColors,
     });
 
-    // Define light theme with custom background
     monaco.editor.defineTheme('netcatty-light', {
       base: 'vs',
       inherit: true,
       rules: [],
-      colors: {
-        'editor.background': bgColor,
-      },
+      colors: themeColors,
     });
 
-    // Apply the current theme
     monaco.editor.setTheme(customThemeName);
-  }, [monaco, isDarkTheme, bgColor, customThemeName]);
+  }, [monaco, isDarkTheme, themeSignal, customThemeName]);
 
-  // Listen for theme changes via MutationObserver on <html> class and style
+  // Listen for theme changes via MutationObserver on <html> class, style, and immersive data attr
   useEffect(() => {
     const root = document.documentElement;
     const updateTheme = () => {
       setIsDarkTheme(root.classList.contains('dark'));
-      setBgColor(getBackgroundColor());
+      setThemeSignal(getThemeSignal());
     };
     const observer = new MutationObserver(updateTheme);
-    observer.observe(root, { attributes: true, attributeFilter: ['class', 'style'] });
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: ['class', 'style', 'data-immersive-theme'],
+    });
     return () => observer.disconnect();
   }, []);
 
@@ -216,6 +262,11 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
     setHasChanges(content !== initialContent);
   }, [content, initialContent]);
 
+  const closeTabBinding = useMemo(
+    () => keyBindings.find((binding) => binding.action === 'closeTab'),
+    [keyBindings],
+  );
+
   const handleSave = useCallback(async () => {
     if (saving) return;
     setSaving(true);
@@ -347,8 +398,33 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
       }
       void handlePasteRef.current();
     });
+
+    editor.focus();
   }, []);
 
+  useEffect(() => {
+    if (!open) return;
+
+    const frame = window.requestAnimationFrame(() => {
+      editorRef.current?.focus();
+    });
+
+    return () => window.cancelAnimationFrame(frame);
+  }, [open]);
+
+  const handleDialogKeyDownCapture = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (hotkeyScheme === 'disabled' || !closeTabBinding) return;
+
+    const isMac = hotkeyScheme === 'mac';
+    const keyStr = isMac ? closeTabBinding.mac : closeTabBinding.pc;
+    if (!matchesKeyBinding(e.nativeEvent, keyStr, isMac)) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+    e.nativeEvent.stopPropagation();
+    handleClose();
+  }, [closeTabBinding, handleClose, hotkeyScheme]);
+
   // Trigger search dialog
   const handleSearch = useCallback(() => {
     if (editorRef.current) {
@@ -370,7 +446,12 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
 
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
-      <DialogContent className="max-w-5xl h-[85vh] flex flex-col p-0 gap-0" hideCloseButton>
+      <DialogContent
+        className="max-w-5xl h-[85vh] flex flex-col p-0 gap-0"
+        hideCloseButton
+        data-hotkey-close-tab="true"
+        onKeyDownCapture={handleDialogKeyDownCapture}
+      >
         {/* Header */}
         <DialogHeader className="px-4 py-3 border-b border-border/60 flex-shrink-0">
           <div className="flex items-center justify-between gap-4">

components/ThemeList.tsx

@@ -0,0 +1,161 @@
+/**
+ * Shared theme list component used by both ThemeSelectPanel and ThemeSelectModal
+ */
+import React, { memo, useMemo } from 'react';
+import { Check } from 'lucide-react';
+import { useI18n } from '../application/i18n/I18nProvider';
+import { TERMINAL_THEMES, USER_VISIBLE_TERMINAL_THEMES, isUiMatchTerminalThemeId } from '../infrastructure/config/terminalThemes';
+import { useCustomThemes } from '../application/state/customThemeStore';
+import { cn } from '../lib/utils';
+import { TerminalTheme } from '../types';
+
+// Memoized theme item component
+export const ThemeItem = memo(({
+    theme,
+    isSelected,
+    onSelect
+}: {
+    theme: TerminalTheme;
+    isSelected: boolean;
+    onSelect: (id: string) => void;
+}) => (
+    <button
+        onClick={() => onSelect(theme.id)}
+        className={cn(
+            'w-full flex items-center gap-3 px-3 py-2.5 text-left transition-all',
+            isSelected
+                ? 'bg-primary/10'
+                : 'hover:bg-muted'
+        )}
+    >
+        {/* Color swatch preview */}
+        <div
+            className="w-12 h-8 rounded-[4px] flex-shrink-0 flex flex-col justify-center items-start pl-1.5 gap-0.5 border border-border/50"
+            style={{ backgroundColor: theme.colors.background }}
+        >
+            <div className="h-1 w-4 rounded-full" style={{ backgroundColor: theme.colors.green }} />
+            <div className="h-1 w-6 rounded-full" style={{ backgroundColor: theme.colors.blue }} />
+            <div className="h-1 w-3 rounded-full" style={{ backgroundColor: theme.colors.yellow }} />
+        </div>
+        <div className="flex-1 min-w-0">
+            <div className={cn('text-sm font-medium truncate', isSelected ? 'text-primary' : 'text-foreground')}>
+                {theme.name}
+            </div>
+            <div className="text-[10px] text-muted-foreground capitalize">{theme.type}</div>
+        </div>
+        {isSelected && (
+            <Check size={16} className="text-primary flex-shrink-0" />
+        )}
+    </button>
+));
+ThemeItem.displayName = 'ThemeItem';
+
+interface ThemeListProps {
+    selectedThemeId: string;
+    onSelect: (themeId: string) => void;
+}
+
+export const ThemeList: React.FC<ThemeListProps> = ({ selectedThemeId, onSelect }) => {
+    const { t } = useI18n();
+    const customThemes = useCustomThemes();
+    const deletedSelectedTheme = useMemo(
+        () => (selectedThemeId
+            && !isUiMatchTerminalThemeId(selectedThemeId)
+            && !TERMINAL_THEMES.some((theme) => theme.id === selectedThemeId)
+            && !customThemes.some((theme) => theme.id === selectedThemeId)
+            ? selectedThemeId
+            : null),
+        [customThemes, selectedThemeId],
+    );
+    const hiddenSelectedTheme = useMemo(
+        () => (isUiMatchTerminalThemeId(selectedThemeId)
+            ? TERMINAL_THEMES.find(theme => theme.id === selectedThemeId) || null
+            : null),
+        [selectedThemeId],
+    );
+
+    const { darkThemes, lightThemes } = useMemo(() => {
+        const dark = USER_VISIBLE_TERMINAL_THEMES.filter(t => t.type === 'dark');
+        const light = USER_VISIBLE_TERMINAL_THEMES.filter(t => t.type === 'light');
+        return { darkThemes: dark, lightThemes: light };
+    }, []);
+
+    return (
+        <>
+            {hiddenSelectedTheme && (
+                <div className="mb-4 rounded-lg border border-border/60 bg-muted/30 px-3 py-2.5">
+                    <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1 font-semibold">
+                        {t('terminal.hiddenTheme.title')}
+                    </div>
+                    <div className="text-sm font-medium text-foreground">{hiddenSelectedTheme.name}</div>
+                    <div className="text-[11px] text-muted-foreground mt-1">
+                        {t('terminal.hiddenTheme.desc')}
+                    </div>
+                </div>
+            )}
+            {deletedSelectedTheme && (
+                <div className="mb-4 rounded-lg border border-border/60 bg-muted/30 px-3 py-2.5">
+                    <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1 font-semibold">
+                        Missing Theme
+                    </div>
+                    <div className="text-sm font-medium text-foreground">{deletedSelectedTheme}</div>
+                    <div className="text-[11px] text-muted-foreground mt-1">
+                        This custom theme is no longer available. Pick another theme to replace it.
+                    </div>
+                </div>
+            )}
+            {/* Dark Themes Section */}
+            <div className="mb-4">
+                <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-semibold px-3">
+                    {t('settings.terminal.themeModal.darkThemes')}
+                </div>
+                <div className="space-y-1">
+                    {darkThemes.map(theme => (
+                        <ThemeItem
+                            key={theme.id}
+                            theme={theme}
+                            isSelected={selectedThemeId === theme.id}
+                            onSelect={onSelect}
+                        />
+                    ))}
+                </div>
+            </div>
+
+            {/* Light Themes Section */}
+            <div>
+                <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-semibold px-3">
+                    {t('settings.terminal.themeModal.lightThemes')}
+                </div>
+                <div className="space-y-1">
+                    {lightThemes.map(theme => (
+                        <ThemeItem
+                            key={theme.id}
+                            theme={theme}
+                            isSelected={selectedThemeId === theme.id}
+                            onSelect={onSelect}
+                        />
+                    ))}
+                </div>
+            </div>
+
+            {/* Custom Themes Section */}
+            {customThemes.length > 0 && (
+                <div className="mt-4">
+                    <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-semibold px-3">
+                        {t('terminal.customTheme.section')}
+                    </div>
+                    <div className="space-y-1">
+                        {customThemes.map(theme => (
+                            <ThemeItem
+                                key={theme.id}
+                                theme={theme}
+                                isSelected={selectedThemeId === theme.id}
+                                onSelect={onSelect}
+                            />
+                        ))}
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};

components/ThemeSelectPanel.tsx

@@ -1,13 +1,11 @@
-import React, { useMemo, useState } from 'react';
-import { TERMINAL_THEMES } from '../infrastructure/config/terminalThemes';
-import { useCustomThemes } from '../application/state/customThemeStore';
-import { cn } from '../lib/utils';
-import { TerminalTheme } from '../types';
+import React from 'react';
 import {
     AsidePanel,
     AsidePanelContent,
+    type AsidePanelLayout,
 } from './ui/aside-panel';
 import { ScrollArea } from './ui/scroll-area';
+import { ThemeList } from './ThemeList';
 
 interface ThemeSelectPanelProps {
     open: boolean;
@@ -16,42 +14,9 @@ interface ThemeSelectPanelProps {
     onClose: () => void;
     onBack?: () => void;
     showBackButton?: boolean;
+    layout?: AsidePanelLayout;
 }
 
-// Mini terminal preview component
-const TerminalPreview: React.FC<{ theme: TerminalTheme; isSelected: boolean }> = ({
-    theme,
-    isSelected
-}) => {
-    return (
-        <div
-            className={cn(
-                "w-16 h-10 rounded-md overflow-hidden border-2 flex-shrink-0",
-                isSelected ? "border-primary" : "border-transparent"
-            )}
-            style={{ backgroundColor: theme.colors.background }}
-        >
-            <div className="p-1 text-[4px] font-mono leading-tight" style={{ color: theme.colors.foreground }}>
-                <div>
-                    <span style={{ color: theme.colors.green }}>$</span>{' '}
-                    <span style={{ color: theme.colors.cyan }}>ls</span>
-                </div>
-                <div className="flex gap-0.5 flex-wrap">
-                    <span style={{ color: theme.colors.blue }}>dir/</span>
-                    <span style={{ color: theme.colors.green }}>file</span>
-                </div>
-                <div>
-                    <span style={{ color: theme.colors.green }}>$</span>{' '}
-                    <span
-                        className="inline-block w-1 h-1.5"
-                        style={{ backgroundColor: theme.colors.cursor }}
-                    />
-                </div>
-            </div>
-        </div>
-    );
-};
-
 const ThemeSelectPanel: React.FC<ThemeSelectPanelProps> = ({
     open,
     selectedThemeId,
@@ -59,52 +24,8 @@ const ThemeSelectPanel: React.FC<ThemeSelectPanelProps> = ({
     onClose,
     onBack,
     showBackButton = true,
+    layout = 'overlay',
 }) => {
-    // Reserved for future hover preview feature
-    const [_hoveredThemeId, setHoveredThemeId] = useState<string | null>(null);
-
-    const customThemes = useCustomThemes();
-
-    // All themes combined
-    const allThemes = useMemo(() => {
-        return [...TERMINAL_THEMES, ...customThemes];
-    }, [customThemes]);
-
-    const renderThemeItem = (theme: TerminalTheme) => {
-        const isSelected = theme.id === selectedThemeId;
-
-        return (
-            <button
-                key={theme.id}
-                className={cn(
-                    "w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors text-left",
-                    isSelected
-                        ? "bg-primary/10"
-                        : "hover:bg-secondary/50"
-                )}
-                onClick={() => onSelect(theme.id)}
-                onMouseEnter={() => setHoveredThemeId(theme.id)}
-                onMouseLeave={() => setHoveredThemeId(null)}
-            >
-                <TerminalPreview theme={theme} isSelected={isSelected} />
-                <div className="flex-1 min-w-0">
-                    <div className={cn(
-                        "text-sm font-medium truncate",
-                        isSelected && "text-primary"
-                    )}>
-                        {theme.name}
-                    </div>
-                    {theme.id === 'netcatty-dark' && (
-                        <div className="text-xs text-muted-foreground">Default</div>
-                    )}
-                    {theme.id === 'netcatty-light' && (
-                        <div className="text-xs text-muted-foreground">Light mode</div>
-                    )}
-                </div>
-            </button>
-        );
-    };
-
     return (
         <AsidePanel
             open={open}
@@ -112,12 +33,15 @@ const ThemeSelectPanel: React.FC<ThemeSelectPanelProps> = ({
             title="Select Color Theme"
             showBackButton={showBackButton}
             onBack={onBack}
+            layout={layout}
         >
             <AsidePanelContent className="p-0">
                 <ScrollArea className="h-full">
                     <div className="py-2">
-                        {/* All themes in a single list */}
-                        {allThemes.map(renderThemeItem)}
+                        <ThemeList
+                            selectedThemeId={selectedThemeId || ''}
+                            onSelect={onSelect}
+                        />
                     </div>
                 </ScrollArea>
             </AsidePanelContent>

components/TopTabs.tsx

@@ -1,6 +1,8 @@
-import { Bell, Copy, FileText, Folder, LayoutGrid, Minus, Moon, MoreHorizontal, Plus, Server, Shield, Sparkles, Square, Sun, TerminalSquare, Usb, X } from 'lucide-react';
+import { Bell, Copy, FileText, Folder, FolderLock, LayoutGrid, Minus, Moon, MoreHorizontal, Plus, Server, Sparkles, Square, Sun, TerminalSquare, Usb, X } from 'lucide-react';
 import React, { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { activeTabStore, useActiveTabId } from '../application/state/activeTabStore';
+import { buildWorkspaceActivityMap } from '../application/state/sessionActivity';
+import { useSessionActivityMap } from '../application/state/sessionActivityStore';
 import { LogView } from '../application/state/useSessionState';
 import { useWindowControls } from '../application/state/useWindowControls';
 import { useI18n } from '../application/i18n/I18nProvider';
@@ -8,8 +10,9 @@ import { getEffectiveHostDistro } from '../domain/host';
 import { cn } from '../lib/utils';
 import { Host, TerminalSession, Workspace } from '../types';
 import { DISTRO_LOGOS, DISTRO_COLORS } from './DistroAvatar';
+import { getShellIconPath, isMonochromeShellIcon } from '../lib/useDiscoveredShells';
 import { Button } from './ui/button';
-import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from './ui/context-menu';
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger } from './ui/context-menu';
 import { SyncStatusButton } from './SyncStatusButton';
 
 // Helper styles for Electron drag regions (use type assertion to include non-standard WebkitAppRegion)
@@ -18,6 +21,7 @@ const dragRegionNoSelect = { WebkitAppRegion: 'drag', userSelect: 'none' } as Re
 
 interface TopTabsProps {
   theme: 'dark' | 'light';
+  followAppTerminalTheme?: boolean;
   hosts: Host[];
   sessions: TerminalSession[];
   orphanSessions: TerminalSession[];
@@ -32,6 +36,7 @@ interface TopTabsProps {
   onRenameWorkspace: (workspaceId: string) => void;
   onCloseWorkspace: (workspaceId: string) => void;
   onCloseLogView: (logViewId: string) => void;
+  onCloseTabsBatch: (targetIds: string[]) => void;
   onOpenQuickSwitcher: () => void;
   onToggleTheme: () => void;
   onOpenSettings: () => void;
@@ -40,6 +45,7 @@ interface TopTabsProps {
   onStartSessionDrag: (sessionId: string) => void;
   onEndSessionDrag: () => void;
   onReorderTabs: (draggedId: string, targetId: string, position: 'before' | 'after') => void;
+  showSftpTab: boolean;
 }
 
 // Detect local OS for local terminal tab icons
@@ -52,10 +58,10 @@ const localOsId = (() => {
 })();
 
 // Lightweight OS/distro icon for session tabs — matches DistroAvatar "sm" style
-const SessionTabIcon: React.FC<{ host: Host | undefined; isActive: boolean; protocol?: string }> = memo(({ host, isActive, protocol }) => {
+const SessionTabIcon: React.FC<{ host: Host | undefined; isActive: boolean; protocol?: string; shellIcon?: string }> = memo(({ host, isActive, protocol, shellIcon }) => {
   const boxBase = "shrink-0 h-4 w-4 rounded flex items-center justify-center";
   const iconSize = "h-2.5 w-2.5";
-  const fallbackIcon = cn(iconSize, isActive ? "text-accent" : "text-muted-foreground");
+  const fallbackStyle = { color: isActive ? 'var(--top-tabs-accent, hsl(var(--accent)))' : 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' };
 
   // Serial protocol → USB icon
   if (protocol === 'serial' || host?.protocol === 'serial') {
@@ -66,8 +72,19 @@ const SessionTabIcon: React.FC<{ host: Host | undefined; isActive: boolean; prot
     );
   }
 
-  // Local protocol → OS-specific icon (protocol may be undefined for local sessions)
+  // Local protocol → shell-specific icon if available, else OS-specific icon
   if (protocol === 'local' || host?.protocol === 'local' || (!protocol && !host)) {
+    // Use shell icon from discovery when available
+    const iconId = shellIcon || host?.localShellIcon;
+    if (iconId) {
+      return (
+        <img
+          src={getShellIconPath(iconId)}
+          alt={iconId}
+          className={cn("shrink-0 h-4 w-4 object-contain", isMonochromeShellIcon(iconId) && "dark:invert")}
+        />
+      );
+    }
     const logo = DISTRO_LOGOS[localOsId];
     const bg = DISTRO_COLORS[localOsId] || DISTRO_COLORS.default;
     if (logo) {
@@ -82,7 +99,7 @@ const SessionTabIcon: React.FC<{ host: Host | undefined; isActive: boolean; prot
       );
     }
     return (
-      <div className={cn(boxBase, "bg-primary/15 text-primary")}>
+      <div className={boxBase} style={{ backgroundColor: 'color-mix(in srgb, var(--top-tabs-accent, hsl(var(--accent))) 15%, transparent)', color: 'var(--top-tabs-accent, hsl(var(--accent)))' }}>
         <TerminalSquare className={iconSize} />
       </div>
     );
@@ -109,22 +126,33 @@ const SessionTabIcon: React.FC<{ host: Host | undefined; isActive: boolean; prot
   // Fallback: generic server icon for remote, terminal for unknown
   if (host && host.protocol !== 'local') {
     return (
-      <div className={cn(boxBase, "bg-primary/15 text-primary")}>
+      <div className={boxBase} style={{ backgroundColor: 'color-mix(in srgb, var(--top-tabs-accent, hsl(var(--accent))) 15%, transparent)', color: 'var(--top-tabs-accent, hsl(var(--accent)))' }}>
         <Server className={iconSize} />
       </div>
     );
   }
-  return <TerminalSquare className={fallbackIcon} />;
+  return <TerminalSquare className={iconSize} style={fallbackStyle} />;
 });
 SessionTabIcon.displayName = 'SessionTabIcon';
 
-const sessionStatusDot = (status: TerminalSession['status']) => {
+const sessionStatusDot = (status: TerminalSession['status'], hasActivity: boolean) => {
   const tone = status === 'connected'
     ? "bg-emerald-400"
     : status === 'connecting'
       ? "bg-amber-400"
       : "bg-rose-500";
-  return <span className={cn("inline-block h-2 w-2 rounded-full ring-2 ring-background/60", tone)} />;
+  return (
+    <span className="relative inline-flex h-2 w-2 shrink-0 items-center justify-center">
+      <span
+        className={cn(
+          "relative inline-block h-2 w-2 rounded-full ring-2",
+          tone,
+          hasActivity && "session-activity-dot",
+        )}
+        style={{ boxShadow: '0 0 0 2px color-mix(in srgb, var(--top-tabs-active-bg, hsl(var(--background))) 60%, transparent)' }}
+      />
+    </span>
+  );
 };
 
 // Custom window controls for Windows/Linux (frameless window)
@@ -168,14 +196,16 @@ const WindowControls: React.FC = memo(() => {
     <div className="flex items-center app-drag h-full">
       <button
         onClick={handleMinimize}
-        className="h-full w-10 flex items-center justify-center text-muted-foreground hover:bg-foreground/10 hover:text-foreground transition-all duration-150 app-no-drag"
+        className="h-full w-10 flex items-center justify-center transition-all duration-150 app-no-drag"
+        style={{ color: 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}
         title="Minimize"
       >
         <Minus size={16} />
       </button>
       <button
         onClick={handleMaximize}
-        className="h-full w-10 flex items-center justify-center text-muted-foreground hover:bg-foreground/10 hover:text-foreground transition-all duration-150 app-no-drag"
+        className="h-full w-10 flex items-center justify-center transition-all duration-150 app-no-drag"
+        style={{ color: 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}
         title={isMaximized ? "Restore" : "Maximize"}
       >
         {isMaximized ? (
@@ -200,6 +230,7 @@ WindowControls.displayName = 'WindowControls';
 
 const TopTabsInner: React.FC<TopTabsProps> = ({
   theme,
+  followAppTerminalTheme = false,
   hosts,
   sessions,
   orphanSessions,
@@ -214,6 +245,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
   onRenameWorkspace,
   onCloseWorkspace,
   onCloseLogView,
+  onCloseTabsBatch,
   onOpenQuickSwitcher,
   onToggleTheme,
   onOpenSettings,
@@ -222,11 +254,13 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
   onStartSessionDrag,
   onEndSessionDrag,
   onReorderTabs,
+  showSftpTab,
 }) => {
   const { t } = useI18n();
   // Subscribe to activeTabId from external store
   const { maximize, isFullscreen, onFullscreenChanged } = useWindowControls();
   const activeTabId = useActiveTabId();
+  const sessionActivityMap = useSessionActivityMap();
   const isVaultActive = activeTabId === 'vault';
   const isSftpActive = activeTabId === 'sftp';
   const onSelectTab = activeTabStore.setActiveTabId;
@@ -272,11 +306,23 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
     updateScrollState();
     const container = tabsContainerRef.current;
     if (container) {
+      // Translate vertical wheel to horizontal scroll so users can reach
+      // off-screen tabs with a standard mouse wheel. Trackpad gestures that
+      // already carry horizontal delta are left alone so native two-finger
+      // swiping still works.
+      const handleWheel = (e: WheelEvent) => {
+        if (e.deltaY !== 0 && e.deltaX === 0) {
+          e.preventDefault();
+          container.scrollLeft += e.deltaY;
+        }
+      };
       container.addEventListener('scroll', updateScrollState);
+      container.addEventListener('wheel', handleWheel, { passive: false });
       const resizeObserver = new ResizeObserver(updateScrollState);
       resizeObserver.observe(container);
       return () => {
         container.removeEventListener('scroll', updateScrollState);
+        container.removeEventListener('wheel', handleWheel);
         resizeObserver.disconnect();
       };
     }
@@ -330,6 +376,10 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
     return map;
   }, [hosts]);
 
+  const workspaceActivityMap = useMemo(() => {
+    return buildWorkspaceActivityMap(sessions, sessionActivityMap);
+  }, [sessionActivityMap, sessions]);
+
   // Pre-compute session counts per workspace for O(1) access
   const workspacePaneCounts = useMemo(() => {
     const counts = new Map<string, number>();
@@ -446,6 +496,37 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
     }).filter(Boolean);
   }, [orderedTabs, orphanSessionMap, workspaceMap, logViewMap, workspacePaneCounts]);
 
+  // Bulk-close menu items shared by session and workspace context menus.
+  // Anchor is the tab the user right-clicked on (matches VSCode/JetBrains UX).
+  const renderBulkCloseItems = (anchorId: string) => {
+    const anchorIdx = orderedTabs.indexOf(anchorId);
+    const othersIds = orderedTabs.filter((id) => id !== anchorId);
+    const rightIds = anchorIdx >= 0 ? orderedTabs.slice(anchorIdx + 1) : [];
+    return (
+      <>
+        <ContextMenuSeparator />
+        <ContextMenuItem
+          disabled={othersIds.length === 0}
+          onClick={() => onCloseTabsBatch(othersIds)}
+        >
+          {t('tabs.closeOthers')}
+        </ContextMenuItem>
+        <ContextMenuItem
+          disabled={rightIds.length === 0}
+          onClick={() => onCloseTabsBatch(rightIds)}
+        >
+          {t('tabs.closeToRight')}
+        </ContextMenuItem>
+        <ContextMenuItem
+          className="text-destructive"
+          onClick={() => onCloseTabsBatch(orderedTabs)}
+        >
+          {t('tabs.closeAll')}
+        </ContextMenuItem>
+      </>
+    );
+  };
+
   // Render the tabs
   const renderOrderedTabs = () => {
     return orderedTabItems.map((item) => {
@@ -453,6 +534,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
 
       if (item.type === 'session') {
         const session = item.session;
+        const hasActivity = !!sessionActivityMap[session.id];
         const isBeingDragged = draggingSessionId === session.id;
         const shiftStyle = tabShiftStyles[session.id] || {};
         const showDropIndicatorBefore = dropIndicator?.tabId === session.id && dropIndicator.position === 'before';
@@ -463,6 +545,8 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
             <ContextMenuTrigger asChild>
               <div
                 data-tab-id={session.id}
+                data-tab-type="session"
+                data-state={activeTabId === session.id ? 'active' : 'inactive'}
                 onClick={() => onSelectTab(session.id)}
                 draggable
                 onDragStart={(e) => handleTabDragStart(e, session.id)}
@@ -471,31 +555,50 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                 onDragLeave={handleTabDragLeave}
                 onDrop={(e) => handleTabDrop(e, session.id)}
                 className={cn(
-                  "relative h-7 pl-3 pr-2 min-w-[140px] max-w-[240px] rounded-none text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
-                  "transition-all duration-150",
-                  activeTabId === session.id
-                    ? "bg-background text-foreground"
-                    : "text-muted-foreground hover:bg-background/40 hover:text-foreground",
+                  "netcatty-tab relative h-7 pl-3 pr-2 min-w-[140px] max-w-[240px] rounded-t-md overflow-hidden text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
+                  "transition-transform duration-150",
                   isBeingDragged && isDraggingForReorder ? "opacity-40 scale-95" : ""
                 )}
-                style={shiftStyle}
+                style={{
+                  ...shiftStyle,
+                  backgroundColor: activeTabId === session.id
+                    ? 'var(--top-tabs-active-bg, hsl(var(--background)))'
+                    : 'transparent',
+                  color: activeTabId === session.id
+                    ? 'var(--top-tabs-fg, hsl(var(--foreground)))'
+                    : 'var(--top-tabs-muted, hsl(var(--muted-foreground)))',
+                }}
+                onMouseEnter={(e) => {
+                  if (activeTabId !== session.id) {
+                    e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--top-tabs-active-bg, hsl(var(--background))) 40%, transparent)';
+                    e.currentTarget.style.color = 'var(--top-tabs-fg, hsl(var(--foreground)))';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (activeTabId !== session.id) {
+                    e.currentTarget.style.backgroundColor = 'transparent';
+                    e.currentTarget.style.color = 'var(--top-tabs-muted, hsl(var(--muted-foreground)))';
+                  }
+                }}
               >
-                {/* Active tab top accent line */}
-                {activeTabId === session.id && (
-                  <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent" />
-                )}
                 {/* Drop indicator line - before */}
                 {showDropIndicatorBefore && isDraggingForReorder && (
-                  <div className="absolute -left-0.5 top-1 bottom-1 w-0.5 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
+                  <div
+                    className="absolute -left-0.5 top-1 bottom-1 w-0.5 rounded-full animate-pulse"
+                    style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))', boxShadow: '0 0 8px 2px color-mix(in srgb, var(--top-tabs-accent, hsl(var(--accent))) 50%, transparent)' }}
+                  />
                 )}
                 {/* Drop indicator line - after */}
                 {showDropIndicatorAfter && isDraggingForReorder && (
-                  <div className="absolute -right-0.5 top-1 bottom-1 w-0.5 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
+                  <div
+                    className="absolute -right-0.5 top-1 bottom-1 w-0.5 rounded-full animate-pulse"
+                    style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))', boxShadow: '0 0 8px 2px color-mix(in srgb, var(--top-tabs-accent, hsl(var(--accent))) 50%, transparent)' }}
+                  />
                 )}
                 <div className="flex items-center gap-2 min-w-0 flex-1">
-                  <SessionTabIcon host={hostMap.get(session.hostId)} isActive={activeTabId === session.id} protocol={session.protocol} />
+                  <SessionTabIcon host={hostMap.get(session.hostId)} isActive={activeTabId === session.id} protocol={session.protocol} shellIcon={session.localShellIcon} />
                   <span className="truncate">{session.hostLabel}</span>
-                  <div className="flex-shrink-0">{sessionStatusDot(session.status)}</div>
+                  <div className="flex-shrink-0">{sessionStatusDot(session.status, hasActivity)}</div>
                 </div>
                 <button
                   onClick={(e) => onCloseSession(session.id, e)}
@@ -516,6 +619,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
               <ContextMenuItem className="text-destructive" onClick={() => onCloseSession(session.id)}>
                 {t('common.close')}
               </ContextMenuItem>
+              {renderBulkCloseItems(session.id)}
             </ContextMenuContent>
           </ContextMenu>
         );
@@ -524,6 +628,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
       if (item.type === 'workspace') {
         const workspace = item.workspace;
         const paneCount = item.paneCount;
+        const hasActivity = !!workspaceActivityMap.get(workspace.id);
         const isActive = activeTabId === workspace.id;
         const isBeingDragged = draggingSessionId === workspace.id;
         const shiftStyle = tabShiftStyles[workspace.id] || {};
@@ -535,6 +640,8 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
             <ContextMenuTrigger asChild>
               <div
                 data-tab-id={workspace.id}
+                data-tab-type="workspace"
+                data-state={isActive ? 'active' : 'inactive'}
                 onClick={() => onSelectTab(workspace.id)}
                 draggable
                 onDragStart={(e) => handleTabDragStart(e, workspace.id)}
@@ -543,33 +650,65 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                 onDragLeave={handleTabDragLeave}
                 onDrop={(e) => handleTabDrop(e, workspace.id)}
                 className={cn(
-                  "relative h-7 pl-3 pr-2 min-w-[150px] max-w-[260px] rounded-none text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
-                  "transition-all duration-150",
-                  isActive
-                    ? "bg-background text-foreground"
-                    : "text-muted-foreground hover:bg-background/40 hover:text-foreground",
+                  "netcatty-tab relative h-7 pl-3 pr-2 min-w-[150px] max-w-[260px] rounded-t-md overflow-hidden text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
+                  "transition-transform duration-150",
                   isBeingDragged && isDraggingForReorder ? "opacity-40 scale-95" : ""
                 )}
-                style={shiftStyle}
+                style={{
+                  ...shiftStyle,
+                  backgroundColor: isActive
+                    ? 'var(--top-tabs-active-bg, hsl(var(--background)))'
+                    : 'transparent',
+                  color: isActive
+                    ? 'var(--top-tabs-fg, hsl(var(--foreground)))'
+                    : 'var(--top-tabs-muted, hsl(var(--muted-foreground)))',
+                }}
+                onMouseEnter={(e) => {
+                  if (!isActive) {
+                    e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--top-tabs-active-bg, hsl(var(--background))) 40%, transparent)';
+                    e.currentTarget.style.color = 'var(--top-tabs-fg, hsl(var(--foreground)))';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!isActive) {
+                    e.currentTarget.style.backgroundColor = 'transparent';
+                    e.currentTarget.style.color = 'var(--top-tabs-muted, hsl(var(--muted-foreground)))';
+                  }
+                }}
               >
-                {/* Active tab top accent line */}
-                {isActive && (
-                  <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent" />
-                )}
                 {/* Drop indicator line - before */}
                 {showDropIndicatorBefore && isDraggingForReorder && (
-                  <div className="absolute -left-0.5 top-1 bottom-1 w-0.5 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
+                  <div
+                    className="absolute -left-0.5 top-1 bottom-1 w-0.5 rounded-full animate-pulse"
+                    style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))', boxShadow: '0 0 8px 2px color-mix(in srgb, var(--top-tabs-accent, hsl(var(--accent))) 50%, transparent)' }}
+                  />
                 )}
                 {/* Drop indicator line - after */}
                 {showDropIndicatorAfter && isDraggingForReorder && (
-                  <div className="absolute -right-0.5 top-1 bottom-1 w-0.5 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
+                  <div
+                    className="absolute -right-0.5 top-1 bottom-1 w-0.5 rounded-full animate-pulse"
+                    style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))', boxShadow: '0 0 8px 2px color-mix(in srgb, var(--top-tabs-accent, hsl(var(--accent))) 50%, transparent)' }}
+                  />
                 )}
                 <div className="flex items-center gap-2 truncate">
-                  <LayoutGrid size={14} className={cn("shrink-0", isActive ? "text-primary" : "text-muted-foreground")} />
+                  <LayoutGrid
+                    size={14}
+                    className="shrink-0"
+                    style={{ color: isActive ? 'var(--top-tabs-accent, hsl(var(--accent)))' : 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}
+                  />
                   <span className="truncate">{workspace.title}</span>
                 </div>
-                <div className="text-[10px] px-1.5 py-0.5 rounded-full border border-border/70 bg-background/60 min-w-[22px] text-center">
-                  {paneCount}
+                <div className="flex items-center gap-1.5 shrink-0">
+                  {hasActivity && sessionStatusDot('connected', true)}
+                  <div
+                    className="text-[10px] px-1.5 py-0.5 rounded-full min-w-[22px] text-center"
+                    style={{
+                      border: '1px solid color-mix(in srgb, var(--top-tabs-fg, hsl(var(--foreground))) 18%, transparent)',
+                      backgroundColor: 'color-mix(in srgb, var(--top-tabs-active-bg, hsl(var(--background))) 60%, transparent)',
+                    }}
+                  >
+                    {paneCount}
+                  </div>
                 </div>
               </div>
             </ContextMenuTrigger>
@@ -580,6 +719,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
               <ContextMenuItem className="text-destructive" onClick={() => onCloseWorkspace(workspace.id)}>
                 {t('common.close')}
               </ContextMenuItem>
+              {renderBulkCloseItems(workspace.id)}
             </ContextMenuContent>
           </ContextMenu>
         );
@@ -594,21 +734,39 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
           <div
             key={logView.id}
             data-tab-id={logView.id}
+            data-tab-type="logView"
+            data-state={isActive ? 'active' : 'inactive'}
             onClick={() => onSelectTab(logView.id)}
             className={cn(
-              "relative h-7 pl-3 pr-2 min-w-[140px] max-w-[240px] rounded-none text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
-              "transition-colors duration-150",
-              isActive
-                ? "bg-background text-foreground"
-                : "text-muted-foreground hover:bg-background/40 hover:text-foreground"
+              "netcatty-tab relative h-7 pl-3 pr-2 min-w-[140px] max-w-[240px] rounded-t-md overflow-hidden text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
             )}
+            style={{
+              backgroundColor: isActive
+                ? 'var(--top-tabs-active-bg, hsl(var(--background)))'
+                : 'transparent',
+              color: isActive
+                ? 'var(--top-tabs-fg, hsl(var(--foreground)))'
+                : 'var(--top-tabs-muted, hsl(var(--muted-foreground)))',
+            }}
+            onMouseEnter={(e) => {
+              if (!isActive) {
+                e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--top-tabs-active-bg, hsl(var(--background))) 40%, transparent)';
+                e.currentTarget.style.color = 'var(--top-tabs-fg, hsl(var(--foreground)))';
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (!isActive) {
+                e.currentTarget.style.backgroundColor = 'transparent';
+                e.currentTarget.style.color = 'var(--top-tabs-muted, hsl(var(--muted-foreground)))';
+              }
+            }}
           >
-            {/* Active tab top accent line */}
-            {isActive && (
-              <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent" />
-            )}
             <div className="flex items-center gap-2 min-w-0 flex-1">
-              <FileText size={14} className={cn("shrink-0", isActive ? "text-accent" : "text-muted-foreground")} />
+              <FileText
+                size={14}
+                className="shrink-0"
+                style={{ color: isActive ? 'var(--top-tabs-accent, hsl(var(--accent)))' : 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}
+              />
               <span className="truncate">
                 {t('tabs.logPrefix')} {isLocal ? t('tabs.logLocal') : logView.log.hostname}
               </span>
@@ -642,8 +800,14 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
 
   return (
     <div
+      data-top-tabs-root
+      data-section="top-tabs"
       className="relative w-full bg-secondary app-drag"
-      style={dragRegionNoSelect}
+      style={{
+        ...dragRegionNoSelect,
+        backgroundColor: 'var(--top-tabs-bg, hsl(var(--secondary)))',
+        color: 'var(--top-tabs-fg, hsl(var(--foreground)))',
+      }}
       onDoubleClick={handleTitleBarDoubleClick}
     >
       {/* Always-on drag stripe so the window can be moved even when tabs fill the bar */}
@@ -655,30 +819,69 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
         {/* Fixed left tabs: Vaults and SFTP */}
         <div className="flex items-end gap-0 flex-shrink-0 app-drag">
           <div
+            data-tab-id="vault"
+            data-tab-type="root"
+            data-state={isVaultActive ? 'active' : 'inactive'}
             onClick={() => onSelectTab('vault')}
             className={cn(
-              "relative h-7 px-3 rounded text-xs font-semibold cursor-pointer flex items-center gap-2 app-no-drag",
-              "transition-colors duration-150",
-              isVaultActive
-                ? "bg-foreground/10 text-foreground"
-                : "text-muted-foreground hover:bg-background/40 hover:text-foreground"
+              "netcatty-tab relative h-7 px-3 rounded text-xs font-semibold cursor-pointer flex items-center gap-2 app-no-drag",
             )}
+            style={{
+              backgroundColor: isVaultActive
+                ? 'var(--top-tabs-active-bg, hsl(var(--background)))'
+                : 'transparent',
+              color: isVaultActive
+                ? 'var(--top-tabs-fg, hsl(var(--foreground)))'
+                : 'var(--top-tabs-muted, hsl(var(--muted-foreground)))',
+            }}
+            onMouseEnter={(e) => {
+              if (!isVaultActive) {
+                e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--top-tabs-active-bg, hsl(var(--background))) 40%, transparent)';
+                e.currentTarget.style.color = 'var(--top-tabs-fg, hsl(var(--foreground)))';
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (!isVaultActive) {
+                e.currentTarget.style.backgroundColor = 'transparent';
+                e.currentTarget.style.color = 'var(--top-tabs-muted, hsl(var(--muted-foreground)))';
+              }
+            }}
           >
-            <Shield size={14} /> Vaults
-          </div>
-          <div
-            onClick={() => onSelectTab('sftp')}
-            className={cn(
-              "relative h-7 px-3 rounded-none text-xs font-semibold cursor-pointer flex items-center gap-2 app-no-drag",
-              "transition-colors duration-150",
-              isSftpActive
-                ? "bg-background text-foreground"
-                : "text-muted-foreground hover:bg-background/40 hover:text-foreground"
-            )}
-          >
-            {isSftpActive && <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent" />}
-            <Folder size={14} /> SFTP
+            <FolderLock size={14} /> Vaults
           </div>
+          {showSftpTab && (
+            <div
+              data-tab-id="sftp"
+              data-tab-type="root"
+              data-state={isSftpActive ? 'active' : 'inactive'}
+              onClick={() => onSelectTab('sftp')}
+              className={cn(
+                "netcatty-tab relative h-7 px-3 rounded-t-md overflow-hidden text-xs font-semibold cursor-pointer flex items-center gap-2 app-no-drag",
+              )}
+              style={{
+                backgroundColor: isSftpActive
+                  ? 'var(--top-tabs-active-bg, hsl(var(--background)))'
+                  : 'transparent',
+                color: isSftpActive
+                  ? 'var(--top-tabs-fg, hsl(var(--foreground)))'
+                  : 'var(--top-tabs-muted, hsl(var(--muted-foreground)))',
+              }}
+              onMouseEnter={(e) => {
+                if (!isSftpActive) {
+                  e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--top-tabs-active-bg, hsl(var(--background))) 40%, transparent)';
+                  e.currentTarget.style.color = 'var(--top-tabs-fg, hsl(var(--foreground)))';
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (!isSftpActive) {
+                  e.currentTarget.style.backgroundColor = 'transparent';
+                  e.currentTarget.style.color = 'var(--top-tabs-muted, hsl(var(--muted-foreground)))';
+                }
+              }}
+            >
+              <Folder size={14} /> SFTP
+            </div>
+          )}
         </div>
 
         {/* Scrollable tabs container with fade masks */}
@@ -698,7 +901,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
           {canScrollLeft && (
             <div
               className="absolute left-0 top-0 bottom-0 w-8 pointer-events-none z-10"
-              style={{ background: 'linear-gradient(to right, hsl(var(--secondary) / 0.9), transparent)' }}
+              style={{ background: 'linear-gradient(to right, var(--top-tabs-bg, hsl(var(--secondary))), transparent)' }}
             />
           )}
 
@@ -715,6 +918,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                 variant="ghost"
                 size="icon"
                 className="h-7 w-7 flex-shrink-0 app-no-drag mb-0 rounded-none"
+                style={{ color: 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}
                 onClick={onOpenQuickSwitcher}
                 title="Open quick switcher"
               >
@@ -729,7 +933,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
           {canScrollRight && (
             <div
               className="absolute right-0 top-0 bottom-0 w-8 pointer-events-none z-10"
-              style={{ background: 'linear-gradient(to left, hsl(var(--secondary) / 0.9), transparent)' }}
+              style={{ background: 'linear-gradient(to left, var(--top-tabs-bg, hsl(var(--secondary))), transparent)' }}
             />
           )}
         </div>
@@ -740,6 +944,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
             variant="ghost"
             size="icon"
             className="h-7 w-7 flex-shrink-0 app-no-drag self-end rounded-none"
+            style={{ color: 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}
             onClick={onOpenQuickSwitcher}
             title="More tabs"
           >
@@ -752,22 +957,24 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
           <Button
             variant="ghost"
             size="icon"
-            className="h-6 w-6 text-muted-foreground hover:text-foreground app-no-drag"
+            className="h-6 w-6 app-no-drag"
+            style={{ color: 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}
             title="AI Assistant"
             onClick={() => window.dispatchEvent(new CustomEvent('netcatty:toggle-ai-panel'))}
           >
             <Sparkles size={16} />
           </Button>
-          <Button variant="ghost" size="icon" className="h-6 w-6 text-muted-foreground hover:text-foreground app-no-drag">
+          <Button variant="ghost" size="icon" className="h-6 w-6 app-no-drag" style={{ color: 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}>
             <Bell size={16} />
           </Button>
           <SyncStatusButton onOpenSettings={onOpenSettings} onSyncNow={onSyncNow} />
           <Button
             variant="ghost"
             size="icon"
-            className="h-6 w-6 text-muted-foreground hover:text-foreground app-no-drag"
+            className="h-6 w-6 app-no-drag"
+            style={{ color: 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}
             onClick={onToggleTheme}
-            disabled={isImmersiveActive}
+            disabled={isImmersiveActive && !followAppTerminalTheme}
             title="Toggle theme"
           >
             {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
@@ -796,7 +1003,10 @@ const topTabsAreEqual = (prev: TopTabsProps, next: TopTabsProps): boolean => {
     prev.isMacClient === next.isMacClient &&
     prev.onOpenSettings === next.onOpenSettings &&
     prev.onSyncNow === next.onSyncNow &&
-    prev.isImmersiveActive === next.isImmersiveActive
+    prev.onToggleTheme === next.onToggleTheme &&
+    prev.followAppTerminalTheme === next.followAppTerminalTheme &&
+    prev.isImmersiveActive === next.isImmersiveActive &&
+    prev.showSftpTab === next.showSftpTab
   );
 };
 

components/TrayPanel.tsx

@@ -10,6 +10,7 @@ import { I18nProvider } from "../application/i18n/I18nProvider";
 import { useSettingsState } from "../application/state/useSettingsState";
 import { useTrayPanelBackend } from "../application/state/useTrayPanelBackend";
 import { useActiveTabId } from "../application/state/activeTabStore";
+import { resolveGroupDefaults, applyGroupDefaults } from "../domain/groupConfig";
 import { X, Maximize2, ChevronRight, ChevronDown, Power } from "lucide-react";
 import { AppLogo } from "./AppLogo";
 
@@ -116,7 +117,7 @@ const TrayPanelContent: React.FC = () => {
     onTrayPanelMenuData,
   } = useTrayPanelBackend();
 
-  const { hosts, keys, identities } = useVaultState();
+  const { hosts, keys, identities, groupConfigs } = useVaultState();
   useSessionState();
   const { rules: portForwardingRules, startTunnel, stopTunnel } = usePortForwardingState();
   const activeTabId = useActiveTabId();
@@ -326,14 +327,17 @@ const TrayPanelContent: React.FC = () => {
                     disabled={isConnecting}
                     title={label}
                     onClick={() => {
-                      const host = rule.hostId ? hosts.find((h) => h.id === rule.hostId) : undefined;
-                      if (!host) {
+                      const rawHost = rule.hostId ? hosts.find((h) => h.id === rule.hostId) : undefined;
+                      if (!rawHost) {
                         toast.error(t("pf.error.hostNotFound"));
                         return;
                       }
                       if (isActive) {
                         void stopTunnel(rule.id);
                       } else {
+                        const host = rawHost.group
+                          ? applyGroupDefaults(rawHost, resolveGroupDefaults(rawHost.group, groupConfigs))
+                          : rawHost;
                         void startTunnel(rule, host, hosts, keys, identities, (status, error) => {
                           if (status === "error" && error) toast.error(error);
                         }, rule.autoStart);

components/ai-elements/conversation.tsx

@@ -1,5 +1,5 @@
 import { cn } from '../../lib/utils';
-import type { ComponentProps, HTMLAttributes, ReactNode } from 'react';
+import type { ComponentProps } from 'react';
 import React, { useCallback } from 'react';
 import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
 import { ArrowDown } from 'lucide-react';
@@ -8,7 +8,7 @@ export type ConversationProps = ComponentProps<typeof StickToBottom>;
 
 export const Conversation = ({ className, ...props }: ConversationProps) => (
   <StickToBottom
-    className={cn('relative flex-1 overflow-y-hidden', className)}
+    className={cn('relative flex-1 overflow-x-hidden overflow-y-hidden', className)}
     initial="instant"
     resize="smooth"
     role="log"
@@ -20,46 +20,11 @@ export type ConversationContentProps = ComponentProps<typeof StickToBottom.Conte
 
 export const ConversationContent = ({ className, ...props }: ConversationContentProps) => (
   <StickToBottom.Content
-    className={cn('flex flex-col gap-4 p-4', className)}
+    className={cn('flex min-w-0 max-w-full flex-col gap-4 overflow-x-hidden p-4', className)}
     {...props}
   />
 );
 
-export interface ConversationEmptyStateProps extends HTMLAttributes<HTMLDivElement> {
-  title?: string;
-  description?: string;
-  icon?: ReactNode;
-}
-
-export const ConversationEmptyState = ({
-  className,
-  title,
-  description,
-  icon,
-  children,
-  ...props
-}: ConversationEmptyStateProps) => (
-  <div
-    className={cn(
-      'flex size-full flex-col items-center justify-center gap-3 p-8 text-center',
-      className,
-    )}
-    {...props}
-  >
-    {children ?? (
-      <>
-        {icon && <div className="text-muted-foreground">{icon}</div>}
-        <div className="space-y-1">
-          <h3 className="font-medium text-sm">{title}</h3>
-          {description && (
-            <p className="text-muted-foreground text-sm">{description}</p>
-          )}
-        </div>
-      </>
-    )}
-  </div>
-);
-
 export const ConversationScrollButton = ({ className, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
   const { isAtBottom, scrollToBottom } = useStickToBottomContext();
 

components/ai-elements/message.tsx

@@ -25,8 +25,8 @@ export type MessageContentProps = HTMLAttributes<HTMLDivElement>;
 export const MessageContent = ({ children, className, ...props }: MessageContentProps) => (
   <div
     className={cn(
-      'flex w-fit min-w-0 max-w-full flex-col gap-1.5 overflow-hidden text-[13px] leading-relaxed',
-      'group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:border group-[.is-user]:border-border/50 group-[.is-user]:bg-muted/50 group-[.is-user]:px-2.5 group-[.is-user]:py-2',
+      'flex w-fit min-w-0 max-w-full flex-col gap-1.5 text-[13px] leading-relaxed',
+      'group-[.is-user]:ml-auto group-[.is-user]:overflow-hidden group-[.is-user]:rounded-lg group-[.is-user]:border group-[.is-user]:border-border/50 group-[.is-user]:bg-muted/50 group-[.is-user]:px-2.5 group-[.is-user]:py-2',
       'group-[.is-assistant]:w-full group-[.is-assistant]:text-foreground/90',
       className,
     )}
@@ -62,7 +62,7 @@ export const MessageResponse = memo(
         // Style the rendered markdown
         // Code: base styles (code-block overrides are in index.css)
         '[&_code]:text-[12px] [&_code]:font-mono',
-        '[&_p_code]:px-[0.4em] [&_p_code]:py-[0.15em] [&_p_code]:rounded [&_p_code]:bg-foreground/[0.06] [&_p_code]:text-[85%]',
+        '[&_p_code]:px-[0.4em] [&_p_code]:py-[0.15em] [&_p_code]:rounded [&_p_code]:bg-foreground/[0.06] [&_p_code]:text-[85%] [&_p_code]:whitespace-normal [&_p_code]:[overflow-wrap:anywhere]',
         '[&_p]:my-1.5',
         '[&_ul]:my-1.5 [&_ul]:pl-4 [&_ul]:list-disc',
         '[&_ol]:my-1.5 [&_ol]:pl-4 [&_ol]:list-decimal',

components/ai-elements/prompt-input.tsx

@@ -8,8 +8,6 @@
 import { ArrowUp, Square, X } from 'lucide-react';
 import type {
   ComponentProps,
-  ComponentPropsWithoutRef,
-  ElementRef,
   FormEvent,
   HTMLAttributes,
   KeyboardEvent,
@@ -17,13 +15,6 @@ import type {
 } from 'react';
 import { forwardRef, useCallback, useRef } from 'react';
 import { cn } from '../../lib/utils';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../ui/select';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
 import {
   InputGroup,
@@ -254,30 +245,3 @@ export const PromptInputSubmit = forwardRef<HTMLButtonElement, PromptInputSubmit
 );
 PromptInputSubmit.displayName = 'PromptInputSubmit';
 
-// ---------------------------------------------------------------------------
-// PromptInputSelect (thin wrappers around the project's Select component)
-// ---------------------------------------------------------------------------
-
-export const PromptInputSelect = Select;
-
-export const PromptInputSelectTrigger = forwardRef<
-  ElementRef<typeof SelectTrigger>,
-  ComponentPropsWithoutRef<typeof SelectTrigger>
->(({ className, ...props }, ref) => (
-  <SelectTrigger
-    ref={ref}
-    className={cn(
-      'h-7 min-w-0 w-auto gap-1 border-none bg-transparent px-2 text-[11px]',
-      'text-muted-foreground/40 hover:text-muted-foreground/70',
-      'focus:ring-0 focus:ring-offset-0',
-      '[&>svg]:h-3 [&>svg]:w-3 [&>svg]:opacity-40',
-      className,
-    )}
-    {...props}
-  />
-));
-PromptInputSelectTrigger.displayName = 'PromptInputSelectTrigger';
-
-export const PromptInputSelectContent = SelectContent;
-export const PromptInputSelectItem = SelectItem;
-export const PromptInputSelectValue = SelectValue;

components/ai-elements/tool-call.tsx

@@ -1,12 +1,47 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type { HTMLAttributes } from 'react';
 import { cn } from '../../lib/utils';
 import { Check, ChevronDown, ChevronRight, CheckCircle2, Loader2, ShieldAlert, X, XCircle, Slash } from 'lucide-react';
-import React, { useCallback, useEffect, useRef, useState, type HTMLAttributes } from 'react';
 import { Button } from '../ui/button';
 import { Badge } from '../ui/badge';
 import { useI18n } from '../../application/i18n/I18nProvider';
 
+/**
+ * Format tool result for display. Extracts stdout/stderr from structured
+ * command results for terminal-like output.
+ */
+function formatToolResult(result: unknown): string {
+  let parsed = result;
+
+  if (typeof parsed === 'string') {
+    try {
+      const obj = JSON.parse(parsed);
+      if (obj && typeof obj === 'object') parsed = obj;
+    } catch {
+      return parsed;
+    }
+  }
+
+  if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+    const obj = parsed as Record<string, unknown>;
+    if (typeof obj.stdout === 'string' || typeof obj.stderr === 'string') {
+      const parts: string[] = [];
+      if (typeof obj.stdout === 'string' && obj.stdout) parts.push(obj.stdout);
+      if (typeof obj.stderr === 'string' && obj.stderr) parts.push(obj.stderr);
+      if (typeof obj.exitCode === 'number' && obj.exitCode !== 0) {
+        parts.push(`exit code: ${obj.exitCode}`);
+      }
+      if (parts.length > 0) return parts.join('\n');
+    }
+  }
+
+  if (typeof parsed === 'string') return parsed;
+  return JSON.stringify(parsed, null, 2);
+}
+
 export interface ToolCallProps extends HTMLAttributes<HTMLDivElement> {
   name: string;
+  className?: string;
   args?: Record<string, unknown>;
   result?: unknown;
   isError?: boolean;
@@ -133,7 +168,7 @@ export const ToolCall = ({
           {args && Object.keys(args).length > 0 && (
             <div className="px-3 py-2">
               <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground/30 mb-1">Arguments</div>
-              <pre className="text-[11px] font-mono text-muted-foreground/50 whitespace-pre-wrap break-all">
+              <pre className="max-h-64 overflow-auto text-[11px] font-mono text-muted-foreground/50 whitespace-pre [overflow-wrap:normal]">
                 {JSON.stringify(args, null, 2)}
               </pre>
             </div>
@@ -174,10 +209,10 @@ export const ToolCall = ({
             <div className="px-3 py-2 border-t border-border/20">
               <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground/30 mb-1">Result</div>
               <pre className={cn(
-                'text-[11px] font-mono whitespace-pre-wrap break-all',
+                'max-h-64 overflow-auto text-[11px] font-mono whitespace-pre [overflow-wrap:normal]',
                 isError ? 'text-red-400/60' : 'text-muted-foreground/50',
               )}>
-                {typeof result === 'string' ? result : JSON.stringify(result, null, 2)}
+                {formatToolResult(result)}
               </pre>
             </div>
           )}

components/ai/AgentIconBadge.tsx

@@ -11,6 +11,7 @@ type AgentLike = {
 
 type AgentIconKey =
   | 'catty'
+  | 'copilot'
   | 'openai'
   | 'claude'
   | 'anthropic'
@@ -20,7 +21,7 @@ type AgentIconKey =
   | 'openrouter'
   | 'zed'
   | 'atom'
-| 'terminal'
+  | 'terminal'
   | 'plus';
 
 type AgentIconVisual = {
@@ -35,6 +36,11 @@ const AGENT_ICON_VISUALS: Record<AgentIconKey, AgentIconVisual> = {
     badgeClassName: 'border-violet-500/20 bg-violet-500/10',
     imageClassName: 'object-contain dark:brightness-0 dark:invert opacity-90',
   },
+  copilot: {
+    src: '/ai/agents/copilot.svg',
+    badgeClassName: 'border-zinc-300 bg-white',
+    imageClassName: 'object-contain brightness-0',
+  },
   openai: {
     src: '/ai/providers/openai.svg',
     badgeClassName: 'border-emerald-500/22 bg-emerald-500/12',
@@ -115,6 +121,9 @@ function getAgentIconKey(agent: AgentLike | 'add-more'): AgentIconKey {
   if (tokens.some((token) => token.includes('claude'))) {
     return 'claude';
   }
+  if (tokens.some((token) => token.includes('copilot'))) {
+    return 'copilot';
+  }
   if (tokens.some((token) => token.includes('anthropic'))) {
     return 'anthropic';
   }
@@ -154,20 +163,14 @@ function getAgentIconKey(agent: AgentLike | 'add-more'): AgentIconKey {
   return 'terminal';
 }
 
-export function getAgentCommandLabel(agent: AgentLike): string | undefined {
-  if (agent.type === 'builtin') {
-    return 'Built-in terminal assistant';
-  }
-  return agent.command ? `CLI: ${agent.command}` : 'External CLI agent';
-}
-
 export const AgentIconBadge: React.FC<{
   agent: AgentLike | 'add-more';
   size?: 'xs' | 'sm' | 'md' | 'lg';
   variant?: 'plain' | 'badge';
   className?: string;
 }> = ({ agent, size = 'md', variant = 'badge', className }) => {
-  const visual = AGENT_ICON_VISUALS[getAgentIconKey(agent)];
+  const iconKey = getAgentIconKey(agent);
+  const visual = AGENT_ICON_VISUALS[iconKey];
   const badgeSize =
     size === 'xs'
       ? 'h-4 w-4 rounded-sm'

components/ai/AgentSelector.tsx

@@ -9,6 +9,10 @@ import { ChevronDown, RefreshCw, Plus, Settings } from 'lucide-react';
 import React, { useCallback, useMemo, useState } from 'react';
 import { cn } from '../../lib/utils';
 import { useI18n } from '../../application/i18n/I18nProvider';
+import {
+  isSettingsManagedDiscoveredAgent,
+  matchesManagedAgentConfig,
+} from '../../infrastructure/ai/managedAgents';
 import type { AgentInfo, ExternalAgentConfig, DiscoveredAgent } from '../../infrastructure/ai/types';
 import AgentIconBadge from './AgentIconBadge';
 import {
@@ -140,7 +144,12 @@ const AgentSelector: React.FC<AgentSelectorProps> = ({
   const unconfiguredDiscovered = useMemo(
     () =>
       discoveredAgents.filter(
-        (da) => !externalAgents.some((ea) => ea.command === da.command || ea.command === da.path),
+        (da) => {
+          if (isSettingsManagedDiscoveredAgent(da)) {
+            return !externalAgents.some((ea) => matchesManagedAgentConfig(ea, da.command));
+          }
+          return !externalAgents.some((ea) => ea.command === da.command || ea.command === da.path);
+        },
       ),
     [discoveredAgents, externalAgents],
   );

components/ai/ChatInput.tsx

@@ -6,12 +6,11 @@
  * and a bottom toolbar with muted controls + subtle send button.
  */
 
-import { AtSign, Check, ChevronDown, ChevronRight, Cpu, Expand, Eye, FileText, ImageIcon, Plus, ShieldCheck, X, Zap } from 'lucide-react';
-import React, { useCallback, useRef, useState } from 'react';
+import { AtSign, Check, ChevronDown, ChevronRight, Cpu, Expand, Eye, FileText, ImageIcon, Package, Plus, ShieldCheck, X, Zap } from 'lucide-react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useI18n } from '../../application/i18n/I18nProvider';
 import { createPortal } from 'react-dom';
 import type { FormEvent } from 'react';
-import type { UploadedFile } from '../../application/state/useFileUpload';
 import {
   PromptInput,
   PromptInputFooter,
@@ -21,7 +20,11 @@ import {
 } from '../ai-elements/prompt-input';
 import type { PromptInputStatus } from '../ai-elements/prompt-input';
 import { formatThinkingLabel } from '../../infrastructure/ai/types';
-import type { AgentModelPreset, AIPermissionMode } from '../../infrastructure/ai/types';
+import type { AgentModelPreset, AIPermissionMode, UploadedFile } from '../../infrastructure/ai/types';
+import { ScrollArea } from '../ui/scroll-area';
+
+// Keep in sync with the popover's Tailwind max-width below.
+const MODEL_PICKER_MAX_WIDTH = 360;
 
 interface ChatInputProps {
   value: string;
@@ -48,6 +51,14 @@ interface ChatInputProps {
   onRemoveFile?: (id: string) => void;
   /** Available hosts for @ mention */
   hosts?: Array<{ sessionId: string; hostname: string; label: string; connected: boolean }>;
+  /** User skills currently selected for the next send */
+  selectedUserSkills?: Array<{ id: string; slug: string; name: string; description: string }>;
+  /** Available user skills for /skill-slug insertion */
+  userSkills?: Array<{ id: string; slug: string; name: string; description: string }>;
+  /** Callback to add a selected user skill */
+  onAddUserSkill?: (slug: string) => void;
+  /** Callback to remove a selected user skill */
+  onRemoveUserSkill?: (slug: string) => void;
   /** Permission mode (only shown for Catty Agent) */
   permissionMode?: AIPermissionMode;
   /** Callback when user changes permission mode */
@@ -72,38 +83,76 @@ const ChatInput: React.FC<ChatInputProps> = ({
   onAddFiles,
   onRemoveFile,
   hosts = [],
+  selectedUserSkills = [],
+  userSkills = [],
+  onAddUserSkill,
+  onRemoveUserSkill,
   permissionMode,
   onPermissionModeChange,
 }) => {
   const { t } = useI18n();
   const [expanded, setExpanded] = useState(false);
   // Consolidate menu state into a single discriminated union to prevent multiple menus open simultaneously
-  type ActiveMenu = 'model' | 'attach' | 'atMention' | 'perm' | null;
+  type ActiveMenu = 'model' | 'attach' | 'atMention' | 'slashSkill' | 'perm' | null;
   const [activeMenu, setActiveMenu] = useState<ActiveMenu>(null);
   const [menuPos, setMenuPos] = useState<{ left: number; bottom: number } | null>(null);
+  const [inputPanelPos, setInputPanelPos] = useState<{ left: number; bottom: number; width: number } | null>(null);
   const [hoveredModelId, setHoveredModelId] = useState<string | null>(null);
-  const [showHostSubmenu, setShowHostSubmenu] = useState(false);
+  const [slashQuery, setSlashQuery] = useState('');
+  const [slashRange, setSlashRange] = useState<{ start: number; end: number } | null>(null);
+  // Active highlight index for @ mention / slash skill keyboard navigation
+  const [activeMenuIndex, setActiveMenuIndex] = useState(0);
 
   // Derived booleans for readability
   const showModelPicker = activeMenu === 'model';
   const showAttachMenu = activeMenu === 'attach';
   const showAtMention = activeMenu === 'atMention';
+  const showSlashSkillPicker = activeMenu === 'slashSkill';
   const showPermPicker = activeMenu === 'perm';
 
   const closeAllMenus = useCallback(() => {
     setActiveMenu(null);
     setMenuPos(null);
+    setInputPanelPos(null);
     setHoveredModelId(null);
-    setShowHostSubmenu(false);
+    setSlashQuery('');
+    setSlashRange(null);
   }, []);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const inputShellRef = useRef<HTMLDivElement>(null);
   const modelBtnRef = useRef<HTMLButtonElement>(null);
   const permBtnRef = useRef<HTMLButtonElement>(null);
   const attachBtnRef = useRef<HTMLButtonElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  const findSlashTrigger = useCallback((text: string, caretPosition: number) => {
+    const beforeCaret = text.slice(0, caretPosition);
+    const match = /(^|\s)\/([a-z0-9-]*)$/i.exec(beforeCaret);
+    if (!match) return null;
+    const start = beforeCaret.length - match[0].length + match[1].length;
+    return {
+      start,
+      end: beforeCaret.length,
+      query: String(match[2] || '').toLowerCase(),
+    };
+  }, []);
+
+  const getInputPanelMenuPos = useCallback(() => {
+    const rect = inputShellRef.current?.getBoundingClientRect();
+    if (!rect) return null;
+    const horizontalMargin = 12;
+    const safeRight = window.innerWidth - horizontalMargin;
+    const width = Math.min(rect.width, safeRight - rect.left);
+    return {
+      left: rect.left,
+      bottom: window.innerHeight - rect.top + 8,
+      width,
+    };
+  }, []);
+
   const handleInputChange = useCallback((newValue: string) => {
     onChange(newValue);
+    const caretPosition = textareaRef.current?.selectionStart ?? newValue.length;
     // Detect if user just typed @
     if (
       hosts.length > 0 &&
@@ -111,16 +160,28 @@ const ChatInput: React.FC<ChatInputProps> = ({
       newValue.endsWith('@')
     ) {
       // Position the popover near the textarea
-      const el = textareaRef.current;
-      if (el) {
-        const rect = el.getBoundingClientRect();
-        setMenuPos({ left: rect.left + 12, bottom: window.innerHeight - rect.top + 4 });
-      }
+      const pos = getInputPanelMenuPos();
+      if (pos) setInputPanelPos(pos);
       setActiveMenu('atMention');
-    } else if (showAtMention && !newValue.includes('@')) {
-      setActiveMenu(null);
+      return;
     }
-  }, [onChange, value, hosts.length, showAtMention]);
+
+    const slashTrigger = findSlashTrigger(newValue, caretPosition);
+    if (userSkills.length > 0 && slashTrigger) {
+      const pos = getInputPanelMenuPos();
+      if (pos) setInputPanelPos(pos);
+      setSlashQuery(slashTrigger.query);
+      setSlashRange({ start: slashTrigger.start, end: slashTrigger.end });
+      setActiveMenu('slashSkill');
+      return;
+    }
+
+    if (showAtMention && !newValue.includes('@')) {
+      setActiveMenu(null);
+    } else if (showSlashSkillPicker) {
+      closeAllMenus();
+    }
+  }, [onChange, value, hosts.length, showAtMention, findSlashTrigger, userSkills.length, showSlashSkillPicker, closeAllMenus, getInputPanelMenuPos]);
 
   const handleSelectAtMention = useCallback((host: { label: string; hostname: string }) => {
     // Replace the trailing @ with @hostname
@@ -133,10 +194,117 @@ const ChatInput: React.FC<ChatInputProps> = ({
     closeAllMenus();
   }, [value, onChange, closeAllMenus]);
 
+  const openInputPanelMenu = useCallback((menu: 'atMention' | 'slashSkill') => {
+    const pos = getInputPanelMenuPos();
+    if (!pos) return;
+    setInputPanelPos(pos);
+    if (menu === 'slashSkill') {
+      setSlashQuery('');
+      setSlashRange(null);
+    }
+    setActiveMenu(menu);
+  }, [getInputPanelMenuPos]);
+
+  const filteredUserSkills = useMemo(() => userSkills.filter((skill) => {
+    if (!slashQuery) return true;
+    const lowerQuery = slashQuery.toLowerCase();
+    return skill.slug.toLowerCase().startsWith(lowerQuery) || skill.name.toLowerCase().includes(lowerQuery);
+  }), [userSkills, slashQuery]);
+
+  const removeSlashQueryFromInput = useCallback(() => {
+    if (!slashRange) return value;
+    const before = value.slice(0, slashRange.start);
+    const after = value.slice(slashRange.end);
+    if (/\s$/.test(before) && /^\s/.test(after)) {
+      return `${before}${after.slice(1)}`;
+    }
+    return `${before}${after}`;
+  }, [slashRange, value]);
+
+  const insertUserSkillToken = useCallback((skill: { slug: string }) => {
+    onAddUserSkill?.(skill.slug);
+    if (slashRange) {
+      onChange(removeSlashQueryFromInput());
+    }
+    closeAllMenus();
+  }, [closeAllMenus, onAddUserSkill, onChange, removeSlashQueryFromInput, slashRange]);
+
+  // Reset active highlight when a menu opens or when the *identity* of the
+  // visible items changes. Watching only `.length` misses cases where the
+  // filter produces a different set with the same count (e.g. user types
+  // another character into the slash query) — Enter would then commit an
+  // unexpected item. Derive a stable key from the visible ids instead.
+  const atMentionKey = useMemo(
+    () => hosts.map((h) => h.sessionId).join('|'),
+    [hosts],
+  );
+  const slashSkillKey = useMemo(
+    () => filteredUserSkills.map((s) => s.id).join('|'),
+    [filteredUserSkills],
+  );
+  useEffect(() => {
+    if (showAtMention) setActiveMenuIndex(0);
+  }, [showAtMention, atMentionKey]);
+  useEffect(() => {
+    if (showSlashSkillPicker) setActiveMenuIndex(0);
+  }, [showSlashSkillPicker, slashSkillKey]);
+
+  const handleTextareaKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.nativeEvent.isComposing) return;
+    // @ mention popover keyboard navigation
+    if (showAtMention && hosts.length > 0) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setActiveMenuIndex((i) => (i + 1) % hosts.length);
+        return;
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setActiveMenuIndex((i) => (i - 1 + hosts.length) % hosts.length);
+        return;
+      }
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        const host = hosts[Math.min(activeMenuIndex, hosts.length - 1)];
+        if (host) handleSelectAtMention(host);
+        return;
+      }
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        closeAllMenus();
+        return;
+      }
+    }
+    // / skill popover keyboard navigation
+    if (showSlashSkillPicker && filteredUserSkills.length > 0) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setActiveMenuIndex((i) => (i + 1) % filteredUserSkills.length);
+        return;
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setActiveMenuIndex((i) => (i - 1 + filteredUserSkills.length) % filteredUserSkills.length);
+        return;
+      }
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        const skill = filteredUserSkills[Math.min(activeMenuIndex, filteredUserSkills.length - 1)];
+        if (skill) insertUserSkillToken(skill);
+        return;
+      }
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        closeAllMenus();
+        return;
+      }
+    }
+  }, [showAtMention, hosts, showSlashSkillPicker, filteredUserSkills, activeMenuIndex, handleSelectAtMention, insertUserSkillToken, closeAllMenus]);
+
   const handlePaste = useCallback((e: React.ClipboardEvent) => {
     const pastedFiles = Array.from(e.clipboardData.items)
-      .map((item) => item.getAsFile())
-      .filter(Boolean) as File[];
+      .map((item: DataTransferItem) => item.getAsFile())
+      .filter((f): f is File => !!f);
     if (pastedFiles.length > 0) {
       e.preventDefault();
       onAddFiles?.(pastedFiles);
@@ -166,21 +334,40 @@ const ChatInput: React.FC<ChatInputProps> = ({
 
   // Permission mode chip removed — agents run in autonomous mode
 
-  // selectedModelId may be "model/thinking" for codex
-  const selectedBaseModelId = selectedModelId?.split('/')[0];
-  const selectedThinking = selectedModelId?.includes('/') ? selectedModelId.split('/')[1] : undefined;
-  const selectedPreset = modelPresets.find(m => m.id === selectedBaseModelId);
+  // selectedModelId may be "<modelId>/<thinkingLevel>" for codex ChatGPT models
+  // (e.g. "gpt-5.4/high"). Note: custom config.toml / OpenRouter model ids
+  // themselves can contain '/' (e.g. "qwen/qwen3.6-plus"), so don't just
+  // split on the first '/'. Match against the full id first; only treat the
+  // trailing segment as a thinking level when we find a preset whose
+  // declared thinkingLevels make the combined form equal to selectedModelId.
+  const { selectedPreset, selectedThinking } = (() => {
+    if (!selectedModelId) return { selectedPreset: undefined, selectedThinking: undefined };
+    const direct = modelPresets.find(m => m.id === selectedModelId);
+    if (direct) return { selectedPreset: direct, selectedThinking: undefined };
+    const viaThinking = modelPresets.find(
+      m => m.thinkingLevels?.some(level => `${m.id}/${level}` === selectedModelId),
+    );
+    if (viaThinking) {
+      const thinking = selectedModelId.slice(viaThinking.id.length + 1);
+      return { selectedPreset: viaThinking, selectedThinking: thinking };
+    }
+    return { selectedPreset: undefined, selectedThinking: undefined };
+  })();
+  const selectedBaseModelId = selectedPreset?.id;
   const modelLabel = selectedPreset
     ? selectedPreset.name + (selectedThinking ? ` / ${formatThinkingLabel(selectedThinking)}` : '')
     : modelName || providerName || t('ai.chat.noModel');
   const hasModelPicker = modelPresets.length > 0 && onModelSelect;
   const chipClassName =
     'inline-flex h-6 items-center gap-1 rounded-full px-1.5 text-[10.5px] text-foreground/72';
+  const selectedSkillChipClassName =
+    'inline-flex h-7 items-center gap-1.5 rounded-full border border-primary/18 bg-primary/8 pl-2.5 pr-1.5 text-[11px] font-medium text-foreground/86 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]';
   const iconButtonClassName =
     'h-6 w-6 rounded-full bg-transparent text-foreground/62 hover:bg-muted/24 hover:text-foreground';
 
   return (
     <div className="shrink-0 px-4 pb-4">
+      <div ref={inputShellRef} className="relative">
       <PromptInput onSubmit={handleSubmit}>
         {/* File attachment chips */}
         {files.length > 0 && (
@@ -224,13 +411,44 @@ const ChatInput: React.FC<ChatInputProps> = ({
 
         {/* Textarea with expand toggle */}
         <div className="relative" onPaste={handlePaste} onDrop={handleDrop} onDragOver={(e) => e.preventDefault()}>
+          {selectedUserSkills.length > 0 && (
+            <div className="px-3 pt-3 pb-1.5">
+              <div className="flex flex-wrap gap-2">
+                {selectedUserSkills.map((skill) => (
+                  <div
+                    key={skill.id}
+                    className={selectedSkillChipClassName}
+                    title={skill.description || skill.name || skill.slug}
+                  >
+                    <Package size={11} className="text-primary/72 shrink-0" />
+                    <span className="truncate max-w-[180px]">
+                      {skill.name && skill.name !== skill.slug ? skill.name : `/${skill.slug}`}
+                    </span>
+                    <button
+                      type="button"
+                      onClick={() => onRemoveUserSkill?.(skill.slug)}
+                      className="inline-flex h-4.5 w-4.5 items-center justify-center rounded-full text-foreground/42 hover:bg-primary/10 hover:text-foreground/72 transition-colors cursor-pointer"
+                      aria-label={`Remove skill ${skill.name || skill.slug}`}
+                    >
+                      <X size={9} />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
           <PromptInputTextarea
             ref={textareaRef}
             value={value}
             onChange={(e) => handleInputChange(e.target.value)}
+            onKeyDown={handleTextareaKeyDown}
             placeholder={placeholder || defaultPlaceholder}
-            disabled={disabled || isStreaming}
-            className={expanded ? 'max-h-[220px]' : undefined}
+            disabled={disabled}
+            className={[
+              selectedUserSkills.length > 0 ? 'pt-1.5' : undefined,
+              expanded ? 'max-h-[220px]' : undefined,
+            ].filter(Boolean).join(' ')}
+            maxLength={100000}
           />
           <button
             type="button"
@@ -243,31 +461,93 @@ const ChatInput: React.FC<ChatInputProps> = ({
         </div>
 
         {/* @ mention popover */}
-        {showAtMention && hosts.length > 0 && menuPos && createPortal(
+        {showAtMention && hosts.length > 0 && inputPanelPos && createPortal(
           <>
             <div className="fixed inset-0 z-[999]" onClick={closeAllMenus} />
             <div
               role="listbox"
               aria-label="Mention host"
-              className="fixed z-[1000] min-w-[160px] rounded-lg border border-border/50 bg-popover shadow-lg py-1"
-              style={{ left: menuPos.left, bottom: menuPos.bottom }}
+              aria-activedescendant={hosts[activeMenuIndex] ? `at-mention-${hosts[activeMenuIndex].sessionId}` : undefined}
+              className="fixed z-[1000] overflow-hidden rounded-lg border border-border/50 bg-popover shadow-lg"
+              style={{ left: inputPanelPos.left, bottom: inputPanelPos.bottom, width: 'auto', minWidth: Math.min(200, inputPanelPos.width), maxWidth: inputPanelPos.width }}
             >
-              <div className="px-3 py-1 text-[10px] text-muted-foreground/40 tracking-wide">{t('ai.chat.menuHosts')}</div>
-              {hosts.map(host => (
-                <button
-                  key={host.sessionId}
-                  type="button"
-                  role="option"
-                  onClick={() => handleSelectAtMention(host)}
-                  className="w-full flex items-center gap-2 px-3 py-1.5 text-left text-[12px] hover:bg-muted/30 transition-colors cursor-pointer whitespace-nowrap"
-                >
-                  <span className={`h-1.5 w-1.5 rounded-full shrink-0 ${host.connected ? 'bg-green-500' : 'bg-muted-foreground/30'}`} />
-                  <span className="text-foreground/85 truncate">{host.label || host.hostname}</span>
-                  {host.label && host.hostname !== host.label && (
-                    <span className="text-[10px] text-muted-foreground/40">{host.hostname}</span>
-                  )}
-                </button>
-              ))}
+              <ScrollArea className="max-h-[280px]">
+                <div className="p-1">
+                  {hosts.map((host, idx) => {
+                    const isActive = idx === activeMenuIndex;
+                    const showHostnameLine = host.label
+                      && host.hostname !== host.label
+                      && !host.label.includes(host.hostname);
+                    return (
+                      <button
+                        id={`at-mention-${host.sessionId}`}
+                        key={host.sessionId}
+                        type="button"
+                        role="option"
+                        aria-selected={isActive}
+                        onMouseEnter={() => setActiveMenuIndex(idx)}
+                        onClick={() => handleSelectAtMention(host)}
+                        className={`w-full rounded-md px-2 py-1 text-left transition-colors cursor-pointer ${isActive ? 'bg-muted/40' : 'hover:bg-muted/30'}`}
+                      >
+                        <div className="flex items-center gap-2 text-[12px] text-foreground/90">
+                          <span className={`h-1.5 w-1.5 rounded-full shrink-0 ${host.connected ? 'bg-green-500' : 'bg-muted-foreground/30'}`} />
+                          <span className="truncate">{host.label || host.hostname}</span>
+                        </div>
+                        {showHostnameLine ? (
+                          <div className="pl-3.5 text-[10px] text-muted-foreground/60 truncate">
+                            {host.hostname}
+                          </div>
+                        ) : null}
+                      </button>
+                    );
+                  })}
+                </div>
+              </ScrollArea>
+            </div>
+          </>,
+          document.body,
+        )}
+
+        {/* / skill popover */}
+        {showSlashSkillPicker && filteredUserSkills.length > 0 && inputPanelPos && createPortal(
+          <>
+            <div className="fixed inset-0 z-[999]" onClick={closeAllMenus} />
+            <div
+              role="listbox"
+              aria-label="Insert user skill"
+              aria-activedescendant={filteredUserSkills[activeMenuIndex] ? `slash-skill-${filteredUserSkills[activeMenuIndex].id}` : undefined}
+              className="fixed z-[1000] overflow-hidden rounded-lg border border-border/50 bg-popover shadow-lg"
+              style={{ left: inputPanelPos.left, bottom: inputPanelPos.bottom, width: 'auto', minWidth: Math.min(200, inputPanelPos.width), maxWidth: inputPanelPos.width }}
+            >
+              <ScrollArea className="max-h-[280px]">
+                <div className="p-1">
+                  {filteredUserSkills.map((skill, idx) => {
+                    const isActive = idx === activeMenuIndex;
+                    return (
+                      <button
+                        id={`slash-skill-${skill.id}`}
+                        key={skill.id}
+                        type="button"
+                        role="option"
+                        aria-selected={isActive}
+                        onMouseEnter={() => setActiveMenuIndex(idx)}
+                        onClick={() => insertUserSkillToken(skill)}
+                        className={`w-full rounded-md px-2 py-1 text-left transition-colors cursor-pointer ${isActive ? 'bg-muted/40' : 'hover:bg-muted/30'}`}
+                      >
+                        <div className="flex items-center gap-2 text-[12px]">
+                          <Package size={12} className="text-muted-foreground/55 shrink-0" />
+                          <span className="text-foreground/90">/{skill.slug}</span>
+                        </div>
+                        {skill.description ? (
+                          <div className="pl-5 text-[10px] leading-4.5 text-muted-foreground/62 line-clamp-2">
+                            {skill.description}
+                          </div>
+                        ) : null}
+                      </button>
+                    );
+                  })}
+                </div>
+              </ScrollArea>
             </div>
           </>,
           document.body,
@@ -322,48 +602,30 @@ const ChatInput: React.FC<ChatInputProps> = ({
                     <ImageIcon size={13} className="text-muted-foreground/60" />
                     <span className="text-foreground/85">{t('ai.chat.menuImage')}</span>
                   </button>
-                  <div
-                    className="relative"
-                    onMouseEnter={() => setShowHostSubmenu(true)}
-                    onMouseLeave={() => setShowHostSubmenu(false)}
-                    onFocus={() => setShowHostSubmenu(true)}
-                    onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) setShowHostSubmenu(false); }}
+                  <button
+                    type="button"
+                    role="menuitem"
+                    aria-label="Mention host"
+                    onClick={() => openInputPanelMenu('atMention')}
+                    className="w-full flex items-center gap-2.5 px-3 py-1.5 text-left text-[12px] hover:bg-muted/30 transition-colors cursor-pointer whitespace-nowrap"
                   >
+                    <AtSign size={13} className="text-muted-foreground/60" />
+                    <span className="flex-1 text-foreground/85">{t('ai.chat.menuMentionHost')}</span>
+                    {hosts.length > 0 && <ChevronRight size={10} className="text-muted-foreground/50" />}
+                  </button>
+                  {userSkills.length > 0 && (
                     <button
                       type="button"
                       role="menuitem"
-                      aria-label="Mention host"
-                      aria-expanded={showHostSubmenu && hosts.length > 0}
+                      aria-label="Insert user skill"
+                      onClick={() => openInputPanelMenu('slashSkill')}
                       className="w-full flex items-center gap-2.5 px-3 py-1.5 text-left text-[12px] hover:bg-muted/30 transition-colors cursor-pointer whitespace-nowrap"
                     >
-                      <AtSign size={13} className="text-muted-foreground/60" />
-                      <span className="flex-1 text-foreground/85">{t('ai.chat.menuMentionHost')}</span>
-                      {hosts.length > 0 && <ChevronRight size={10} className="text-muted-foreground/50" />}
+                      <Package size={13} className="text-muted-foreground/60" />
+                      <span className="flex-1 text-foreground/85">{t('ai.chat.menuUserSkills')}</span>
+                      <ChevronRight size={10} className="text-muted-foreground/50" />
                     </button>
-                    {showHostSubmenu && hosts.length > 0 && (
-                      <div role="menu" className="absolute left-full top-0 ml-1 min-w-[160px] rounded-lg border border-border/50 bg-popover shadow-lg py-1 z-[1001]">
-                        {hosts.map(host => (
-                          <button
-                            key={host.sessionId}
-                            type="button"
-                            role="menuitem"
-                            onClick={() => {
-                              const mention = `@${host.label || host.hostname} `;
-                              onChange(value + mention);
-                              closeAllMenus();
-                            }}
-                            className="w-full flex items-center gap-2 px-3 py-1.5 text-left text-[12px] hover:bg-muted/30 transition-colors cursor-pointer whitespace-nowrap"
-                          >
-                            <span className={`h-1.5 w-1.5 rounded-full shrink-0 ${host.connected ? 'bg-green-500' : 'bg-muted-foreground/30'}`} />
-                            <span className="text-foreground/85 truncate">{host.label || host.hostname}</span>
-                            {host.label && host.hostname !== host.label && (
-                              <span className="text-[10px] text-muted-foreground/40">{host.hostname}</span>
-                            )}
-                          </button>
-                        ))}
-                      </div>
-                    )}
-                  </div>
+                  )}
                 </div>
               </>,
               document.body,
@@ -375,7 +637,13 @@ const ChatInput: React.FC<ChatInputProps> = ({
                 if (!hasModelPicker) return;
                 if (!showModelPicker) {
                   const rect = modelBtnRef.current?.getBoundingClientRect();
-                  if (rect) setMenuPos({ left: rect.left, bottom: window.innerHeight - rect.top + 6 });
+                  if (rect) {
+                    // Clamp so the popover stays inside the viewport when
+                    // the chip is near the right edge of a narrow AI side
+                    // panel.
+                    const left = Math.max(8, Math.min(rect.left, window.innerWidth - MODEL_PICKER_MAX_WIDTH - 8));
+                    setMenuPos({ left, bottom: window.innerHeight - rect.top + 6 });
+                  }
                   setActiveMenu('model');
                 } else {
                   closeAllMenus();
@@ -395,8 +663,8 @@ const ChatInput: React.FC<ChatInputProps> = ({
                 <div
                   role="listbox"
                   aria-label="Select model"
-                  className="fixed z-[1000] min-w-[160px] rounded-lg border border-border/50 bg-popover shadow-lg py-1"
-                  style={{ left: menuPos.left, bottom: menuPos.bottom }}
+                  className="fixed z-[1000] w-max min-w-[160px] rounded-lg border border-border/50 bg-popover shadow-lg py-1"
+                  style={{ left: menuPos.left, bottom: menuPos.bottom, maxWidth: MODEL_PICKER_MAX_WIDTH }}
                   onMouseLeave={() => setHoveredModelId(null)}
                 >
                   {modelPresets.map(preset => {
@@ -420,12 +688,11 @@ const ChatInput: React.FC<ChatInputProps> = ({
                               closeAllMenus();
                             }
                           }}
-                          className="w-full flex items-center gap-1.5 px-3 py-1.5 text-left text-[12px] hover:bg-muted/30 transition-colors cursor-pointer whitespace-nowrap"
+                          className="w-full min-w-0 flex items-center gap-1.5 px-3 py-1.5 text-left text-[12px] hover:bg-muted/30 transition-colors cursor-pointer"
                         >
                           {isSelected ? <Check size={11} className="text-primary shrink-0" /> : <span className="w-[11px] shrink-0" />}
-                          <span className="flex-1 text-foreground/85">{preset.name}</span>
-                          {preset.description && <span className="text-[10px] text-muted-foreground/50 mr-1">{preset.description}</span>}
-                          {hasThinking && <ChevronRight size={10} className="text-muted-foreground/50" />}
+                          <span className="flex-1 min-w-0 truncate text-foreground/85">{preset.name}</span>
+                          {hasThinking && <ChevronRight size={10} className="text-muted-foreground/50 shrink-0" />}
                         </button>
                         {/* Thinking level sub-menu */}
                         {hasThinking && hoveredModelId === preset.id && (
@@ -555,6 +822,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
           </div>
         </PromptInputFooter>
       </PromptInput>
+      </div>
     </div>
   );
 };

components/ai/ChatMessageList.tsx

@@ -177,13 +177,14 @@ const ChatMessageList: React.FC<ChatMessageListProps> = ({ messages, isStreaming
             return (
               <React.Fragment key={message.id}>
                 {message.toolResults?.map((tr) => (
-                  <ToolCall
-                    key={tr.toolCallId}
-                    name={toolCallNames.get(tr.toolCallId) || tr.toolCallId}
-                    args={toolCallArgs.get(tr.toolCallId)}
-                    result={tr.content}
-                    isError={tr.isError}
-                  />
+                  <div key={tr.toolCallId}>
+                    <ToolCall
+                      name={toolCallNames.get(tr.toolCallId) || tr.toolCallId}
+                      args={toolCallArgs.get(tr.toolCallId)}
+                      result={tr.content}
+                      isError={tr.isError}
+                    />
+                  </div>
                 ))}
               </React.Fragment>
             );
@@ -238,8 +239,13 @@ const ChatMessageList: React.FC<ChatMessageListProps> = ({ messages, isStreaming
                       </MessageResponse>
                 )}
 
-                {/* Tool calls */}
-                {message.toolCalls?.map((tc) => {
+                {/* Pending tool calls from the *last* assistant message are rendered
+                    after all tool-result messages (see below) for chronological order.
+                    Unresolved tool calls from earlier or cancelled messages are shown
+                    inline — as interrupted, or with approval controls if still pending. */}
+                {(message !== lastAssistantMessage || message.executionStatus === 'cancelled') && message.toolCalls?.filter((tc) =>
+                  !resolvedToolCallIds.has(tc.id),
+                ).map((tc) => {
                   const isPending = pendingApprovals.has(tc.id);
                   const resolved = resolvedApprovals.get(tc.id);
                   const approvalStatus = isPending
@@ -249,18 +255,17 @@ const ChatMessageList: React.FC<ChatMessageListProps> = ({ messages, isStreaming
                       : resolved === false
                         ? 'denied' as const
                         : undefined;
-
                   return (
-                    <ToolCall
-                      key={tc.id}
-                      name={tc.name}
-                      args={tc.arguments}
-                      isLoading={isThisStreaming && message.executionStatus === 'running' && !isPending}
-                      isInterrupted={message.executionStatus === 'cancelled' && !resolvedToolCallIds.has(tc.id)}
-                      approvalStatus={approvalStatus}
-                      onApprove={() => handleApprove(tc.id)}
-                      onReject={() => handleReject(tc.id)}
-                    />
+                    <div key={tc.id}>
+                      <ToolCall
+                        name={tc.name}
+                        args={tc.arguments}
+                        isInterrupted={!isPending}
+                        approvalStatus={approvalStatus}
+                        onApprove={() => handleApprove(tc.id)}
+                        onReject={() => handleReject(tc.id)}
+                      />
+                    </div>
                   );
                 })}
 
@@ -290,22 +295,50 @@ const ChatMessageList: React.FC<ChatMessageListProps> = ({ messages, isStreaming
           );
         })}
 
+        {/* Pending tool calls from the last assistant message — rendered here
+            (after all tool-result messages) so they appear at the bottom. */}
+        {lastAssistantMessage?.toolCalls?.filter((tc) =>
+          !resolvedToolCallIds.has(tc.id) && lastAssistantMessage.executionStatus !== 'cancelled',
+        ).map((tc) => {
+          const isPending = pendingApprovals.has(tc.id);
+          const resolved = resolvedApprovals.get(tc.id);
+          const approvalStatus = isPending
+            ? 'pending' as const
+            : resolved === true
+              ? 'approved' as const
+              : resolved === false
+                ? 'denied' as const
+                : undefined;
+          return (
+            <div key={tc.id}>
+              <ToolCall
+                name={tc.name}
+                args={tc.arguments}
+                isLoading={isStreaming && lastAssistantMessage.executionStatus === 'running' && !isPending}
+                approvalStatus={approvalStatus}
+                onApprove={() => handleApprove(tc.id)}
+                onReject={() => handleReject(tc.id)}
+              />
+            </div>
+          );
+        })}
+
         {/* Standalone MCP/ACP approval requests (not tied to SDK tool calls) */}
         {Array.from(pendingApprovals.entries())
-          .filter((entry) => entry[0].startsWith('mcp_approval_') && (!activeSessionId || entry[1].chatSessionId === activeSessionId))
-          .map((entry) => {
-            const [id, req] = entry;
+          .filter(([id, req]) => id.startsWith('mcp_approval_') && (!activeSessionId || req.chatSessionId === activeSessionId))
+          .map(([id, req]) => {
             return (
-              <ToolCall
-                key={id}
-                name={req.toolName}
-                args={req.args}
-                isLoading={false}
-                isInterrupted={false}
-                approvalStatus={'pending'}
-                onApprove={() => handleApprove(id)}
-                onReject={() => handleReject(id)}
-              />
+              <div key={id}>
+                <ToolCall
+                  name={req.toolName}
+                  args={req.args}
+                  isLoading={false}
+                  isInterrupted={false}
+                  approvalStatus={'pending'}
+                  onApprove={() => handleApprove(id)}
+                  onReject={() => handleReject(id)}
+                />
+              </div>
             );
           })}
         {/* Streaming indicator — only when no content and no thinking yet */}

components/ai/ExecutionPlan.tsx

@@ -1,169 +0,0 @@
-/**
- * ExecutionPlan - Renders a multi-step execution plan for AI agent tasks.
- *
- * Shows a numbered list of steps with status indicators, host badges,
- * optional command previews, and action buttons.
- */
-
-import {
-  CheckCircle2,
-  Circle,
-  Loader2,
-  SkipForward,
-  XCircle,
-} from 'lucide-react';
-import React from 'react';
-import { cn } from '../../lib/utils';
-import { Badge } from '../ui/badge';
-import { Button } from '../ui/button';
-
-// -------------------------------------------------------------------
-// Types
-// -------------------------------------------------------------------
-
-interface ExecutionPlanStep {
-  description: string;
-  host?: string;
-  command?: string;
-  status: 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
-}
-
-interface ExecutionPlanProps {
-  steps: ExecutionPlanStep[];
-  onApprove: () => void;
-  onModify: () => void;
-  onReject: () => void;
-  isExecuting: boolean;
-}
-
-// -------------------------------------------------------------------
-// Status icon mapping
-// -------------------------------------------------------------------
-
-function StepStatusIcon({
-  status,
-}: {
-  status: ExecutionPlanStep['status'];
-}) {
-  switch (status) {
-    case 'pending':
-      return <Circle size={16} className="text-muted-foreground" />;
-    case 'running':
-      return (
-        <Loader2 size={16} className="text-blue-500 animate-spin" />
-      );
-    case 'completed':
-      return <CheckCircle2 size={16} className="text-green-500" />;
-    case 'failed':
-      return <XCircle size={16} className="text-destructive" />;
-    case 'skipped':
-      return (
-        <SkipForward size={16} className="text-muted-foreground/60" />
-      );
-  }
-}
-
-// -------------------------------------------------------------------
-// Component
-// -------------------------------------------------------------------
-
-const ExecutionPlan: React.FC<ExecutionPlanProps> = ({
-  steps,
-  onApprove,
-  onModify,
-  onReject,
-  isExecuting,
-}) => {
-  return (
-    <div className="rounded-lg border border-border bg-muted/30 overflow-hidden">
-      {/* Header */}
-      <div className="px-3 py-2 border-b border-border/60 bg-muted/50">
-        <span className="text-sm font-medium">
-          Execution Plan ({steps.length} step{steps.length !== 1 ? 's' : ''})
-        </span>
-      </div>
-
-      {/* Steps list */}
-      <div className="divide-y divide-border/30">
-        {steps.map((step, index) => (
-          <div
-            key={index}
-            className={cn(
-              'flex items-start gap-3 px-3 py-2.5 transition-colors',
-              step.status === 'running' && 'bg-blue-500/5',
-              step.status === 'completed' && 'bg-green-500/5',
-              step.status === 'failed' && 'bg-destructive/5',
-              step.status === 'skipped' && 'opacity-50',
-            )}
-          >
-            {/* Step number + status icon */}
-            <div className="flex items-center gap-2 shrink-0 pt-0.5">
-              <span className="text-xs text-muted-foreground font-mono w-4 text-right">
-                {index + 1}
-              </span>
-              <StepStatusIcon status={step.status} />
-            </div>
-
-            {/* Step content */}
-            <div className="min-w-0 flex-1 space-y-1">
-              <div className="flex items-center gap-2 flex-wrap">
-                <span
-                  className={cn(
-                    'text-sm',
-                    step.status === 'skipped' && 'line-through',
-                  )}
-                >
-                  {step.description}
-                </span>
-                {step.host && (
-                  <Badge
-                    variant="outline"
-                    className="text-[10px] px-1.5 py-0"
-                  >
-                    {step.host}
-                  </Badge>
-                )}
-              </div>
-              {step.command && (
-                <code className="block text-xs font-mono bg-muted/80 px-2 py-1 rounded text-muted-foreground truncate">
-                  {step.command}
-                </code>
-              )}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Action buttons */}
-      <div className="px-3 py-2.5 border-t border-border/60 flex items-center justify-end gap-2">
-        {isExecuting ? (
-          <Button
-            variant="destructive"
-            size="sm"
-            onClick={onReject}
-          >
-            Cancel
-          </Button>
-        ) : (
-          <>
-            <Button variant="ghost" size="sm" onClick={onReject}>
-              Cancel
-            </Button>
-            <Button variant="outline" size="sm" onClick={onModify}>
-              Modify Plan
-            </Button>
-            <Button size="sm" onClick={onApprove}>
-              Approve
-            </Button>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};
-
-ExecutionPlan.displayName = 'ExecutionPlan';
-
-export default ExecutionPlan;
-export { ExecutionPlan };
-export type { ExecutionPlanProps, ExecutionPlanStep };

components/ai/PermissionDialog.tsx

@@ -1,200 +0,0 @@
-/**
- * PermissionDialog - Modal for AI agent tool call permission requests.
- *
- * Shown when the agent needs user approval to execute a tool call.
- * Displays tool name, arguments, recommendation, and approve/reject actions.
- */
-
-import { ShieldAlert } from 'lucide-react';
-import React, { useCallback } from 'react';
-import { useI18n } from '../../application/i18n/I18nProvider';
-import { cn } from '../../lib/utils';
-import { Badge } from '../ui/badge';
-import { Button } from '../ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '../ui/dialog';
-
-// -------------------------------------------------------------------
-// Types
-// -------------------------------------------------------------------
-
-interface PermissionDialogProps {
-  open: boolean;
-  toolCall: { name: string; arguments: Record<string, unknown> } | null;
-  recommendation: 'allow' | 'confirm' | 'deny';
-  onApprove: () => void;
-  onReject: () => void;
-  onDismiss: () => void;
-}
-
-// -------------------------------------------------------------------
-// Component
-// -------------------------------------------------------------------
-
-const PermissionDialog: React.FC<PermissionDialogProps> = ({
-  open,
-  toolCall,
-  recommendation,
-  onApprove,
-  onReject,
-  onDismiss,
-}) => {
-  const { t } = useI18n();
-  const isDenied = recommendation === 'deny';
-
-  // Keyboard shortcuts: Enter to approve, Escape to reject
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' && !isDenied) {
-        e.preventDefault();
-        onApprove();
-      } else if (e.key === 'Escape') {
-        e.preventDefault();
-        onReject();
-      }
-    },
-    [isDenied, onApprove, onReject],
-  );
-
-  // Format arguments as readable code block content
-  let formattedArgs = '';
-  if (toolCall) {
-    try {
-      formattedArgs = JSON.stringify(toolCall.arguments, null, 2);
-    } catch {
-      formattedArgs = String(toolCall.arguments);
-    }
-  }
-
-  // Extract host/session info from arguments if present
-  const sessionId =
-    toolCall?.arguments?.sessionId as string | undefined;
-  const sessionIds =
-    toolCall?.arguments?.sessionIds as string[] | undefined;
-
-  const recommendationBadge = () => {
-    switch (recommendation) {
-      case 'allow':
-        return (
-          <Badge className="bg-green-600/20 text-green-400 border-green-600/30">
-            {t('ai.chat.recommendAllow')}
-          </Badge>
-        );
-      case 'confirm':
-        return (
-          <Badge className="bg-yellow-600/20 text-yellow-400 border-yellow-600/30">
-            {t('ai.chat.recommendConfirm')}
-          </Badge>
-        );
-      case 'deny':
-        return <Badge variant="destructive">{t('ai.chat.recommendDeny')}</Badge>;
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onDismiss()}>
-      <DialogContent hideCloseButton onKeyDown={handleKeyDown}>
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <ShieldAlert
-              size={20}
-              className={cn(
-                isDenied ? 'text-destructive' : 'text-yellow-500',
-              )}
-            />
-            {t('ai.chat.permissionRequired')}
-          </DialogTitle>
-          <DialogDescription>
-            {t('ai.chat.permissionDescription')}
-          </DialogDescription>
-        </DialogHeader>
-
-        {toolCall && (
-          <div className="space-y-3">
-            {/* Tool name and recommendation */}
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <span className="text-sm text-muted-foreground">{t('ai.chat.toolLabel')}:</span>
-                <code className="text-sm font-mono bg-muted px-1.5 py-0.5 rounded">
-                  {toolCall.name}
-                </code>
-              </div>
-              {recommendationBadge()}
-            </div>
-
-            {/* Target session(s) */}
-            {(sessionId || sessionIds) && (
-              <div className="flex items-center gap-2">
-                <span className="text-sm text-muted-foreground">{t('ai.chat.targetLabel')}:</span>
-                {sessionId && (
-                  <code className="text-xs font-mono bg-muted px-1.5 py-0.5 rounded">
-                    {sessionId}
-                  </code>
-                )}
-                {sessionIds && (
-                  <div className="flex flex-wrap gap-1">
-                    {sessionIds.map((id) => (
-                      <code
-                        key={id}
-                        className="text-xs font-mono bg-muted px-1.5 py-0.5 rounded"
-                      >
-                        {id}
-                      </code>
-                    ))}
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* Arguments code block */}
-            <div className="rounded-md border border-border bg-muted/50 p-3 max-h-48 overflow-auto">
-              <pre className="text-xs font-mono whitespace-pre-wrap break-all text-foreground">
-                {formattedArgs}
-              </pre>
-            </div>
-
-            {/* Deny warning */}
-            {isDenied && (
-              <div className="rounded-md border border-destructive/30 bg-destructive/10 p-3">
-                <p className="text-sm text-destructive">
-                  {t('ai.chat.commandBlocked')}
-                </p>
-              </div>
-            )}
-          </div>
-        )}
-
-        <DialogFooter>
-          {isDenied ? (
-            <Button variant="destructive" onClick={onReject} className="w-full">
-              {t('ai.chat.reject')}
-            </Button>
-          ) : (
-            <>
-              <Button
-                variant="outline"
-                onClick={onReject}
-                className="border-destructive/30 text-destructive hover:bg-destructive/10"
-              >
-                {t('ai.chat.reject')}
-              </Button>
-              <Button onClick={onApprove}>{t('ai.chat.approve')}</Button>
-            </>
-          )}
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-PermissionDialog.displayName = 'PermissionDialog';
-
-export default PermissionDialog;
-export { PermissionDialog };
-export type { PermissionDialogProps };

components/ai/acpHistory.test.ts

@@ -0,0 +1,662 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import type { ChatMessage } from "../../infrastructure/ai/types.ts";
+import {
+  buildAcpHistoryMessages,
+  buildAcpHistoryMessagesForBridge,
+} from "./acpHistory.ts";
+
+function message(
+  id: string,
+  role: ChatMessage["role"],
+  content: string,
+  extra: Partial<ChatMessage> = {},
+): ChatMessage {
+  return {
+    id,
+    role,
+    content,
+    timestamp: 1,
+    ...extra,
+  };
+}
+
+test("buildAcpHistoryMessages compacts older ACP context and keeps only recent raw turns", () => {
+  const messages: ChatMessage[] = [
+    message("u1", "user", "我希望最小改动，不要添加很多 test"),
+    message("a1", "assistant", "已按最小改动处理"),
+    message("u2", "user", "MCP 不允许使用，Windows 上不要假设 pwsh.exe"),
+    message("a2", "assistant", "PR #738 已创建，commit 4181a2c"),
+    message("u3", "user", "帮我上网查查优化方案，每轮都带历史太慢了"),
+    message("a3", "assistant", "建议 ACP history compaction"),
+    message("tool1", "tool", "", {
+      toolResults: [
+        {
+          toolCallId: "search",
+          content: `error: ${"large output ".repeat(500)}`,
+          isError: true,
+        },
+      ],
+    }),
+    message("u4", "user", "好的"),
+    message("a4", "assistant", "准备实现"),
+    message("u5", "user", "继续"),
+    message("a5", "assistant", "继续处理"),
+    message("u6", "user", "现在提交"),
+    message("a6", "assistant", "还没提交"),
+  ];
+
+  const result = buildAcpHistoryMessages(messages);
+
+  assert.equal(result[0].role, "user");
+  assert.match(result[0].content, /Compact prior Netcatty UI context/);
+  assert.match(result[0].content, /最小改动/);
+  assert.match(result[0].content, /pwsh\.exe/);
+  assert.match(result[0].content, /PR #738/);
+  assert.ok(result[0].content.length <= 3000);
+
+  assert.ok(result.length <= 7);
+  assert.deepEqual(
+    result.slice(1).map((entry) => entry.content),
+    ["好的", "准备实现", "继续", "继续处理", "现在提交", "还没提交"],
+  );
+  assert.ok(result.every((entry) => entry.content.length <= 3000));
+});
+
+test("buildAcpHistoryMessagesForBridge keeps fallback history available for stale ACP session recovery", () => {
+  const messages = [message("u1", "user", "继续处理这个历史压缩问题")];
+
+  assert.equal(buildAcpHistoryMessagesForBridge([], "acp-session-1"), undefined);
+  assert.deepEqual(
+    buildAcpHistoryMessagesForBridge(messages, "acp-session-1"),
+    buildAcpHistoryMessages(messages),
+  );
+});
+
+test("buildAcpHistoryMessages preserves older substantive user instructions outside the recent raw window", () => {
+  const messages: ChatMessage[] = [
+    message("u1", "user", "Keep this incremental and do not refactor unrelated files."),
+    message("a1", "assistant", "Understood."),
+  ];
+
+  for (let index = 2; index <= 13; index += 1) {
+    messages.push(
+      message(`u${index}`, "user", `filler user message ${index}`),
+      message(`a${index}`, "assistant", `filler assistant message ${index}`),
+    );
+  }
+
+  const result = buildAcpHistoryMessages(messages);
+
+  assert.equal(result[0].role, "user");
+  assert.match(result[0].content, /Keep this incremental and do not refactor unrelated files\./);
+  assert.deepEqual(
+    result.slice(-6).map((entry) => entry.content),
+    [
+      "filler user message 11",
+      "filler assistant message 11",
+      "filler user message 12",
+      "filler assistant message 12",
+      "filler user message 13",
+      "filler assistant message 13",
+    ],
+  );
+});
+
+test("buildAcpHistoryMessages preserves short important user constraints outside the recent raw window", () => {
+  const messages: ChatMessage[] = [
+    message("u1", "user", "不要提交"),
+    message("a1", "assistant", "收到"),
+  ];
+
+  for (let index = 2; index <= 13; index += 1) {
+    messages.push(
+      message(`u${index}`, "user", `filler user message ${index}`),
+      message(`a${index}`, "assistant", `filler assistant message ${index}`),
+    );
+  }
+
+  const result = buildAcpHistoryMessages(messages);
+
+  assert.equal(result[0].role, "user");
+  assert.match(result[0].content, /不要提交/);
+});
+
+test("buildAcpHistoryMessages does not treat pr inside ordinary words as important", () => {
+  // Original intent: `\bpr\b` in IMPORTANT_PATTERNS must NOT match 'pr'
+  // inside ordinary English words like 'approach' / 'improve' / 'prepare'.
+  // Those words land at priority=1 (kept only as space allows) while the
+  // 不要提交 line lands at priority=2 (always preferred). The check below
+  // doesn't assert that the ordinary words are absent from the compact
+  // section — they may legitimately survive when budget allows; that's
+  // intentional after we stopped blanket-dropping short user messages.
+  // What we DO verify: the priority-2 line is selected, which is only
+  // possible if the IMPORTANT_PATTERNS regex correctly distinguishes it
+  // from the surrounding short ordinary-word turns.
+  const messages: ChatMessage[] = [
+    message("u1", "user", "不要提交"),
+    message("a1", "assistant", "收到"),
+    message("u2", "user", "approach"),
+    message("a2", "assistant", "ack"),
+    message("u3", "user", "improve"),
+    message("a3", "assistant", "ack"),
+    message("u4", "user", "prepare"),
+    message("a4", "assistant", "ack"),
+  ];
+
+  for (let index = 5; index <= 13; index += 1) {
+    messages.push(
+      message(`u${index}`, "user", `filler user message ${index}`),
+      message(`a${index}`, "assistant", `filler assistant message ${index}`),
+    );
+  }
+
+  const result = buildAcpHistoryMessages(messages);
+
+  assert.equal(result[0].role, "user");
+  assert.match(result[0].content, /不要提交/);
+});
+
+test("buildAcpHistoryMessages prioritizes later durable instructions over older filler prompts", () => {
+  const messages: ChatMessage[] = [];
+
+  for (let index = 1; index <= 12; index += 1) {
+    messages.push(
+      message(
+        `u${index}`,
+        "user",
+        `Please continue with implementation step ${index} and keep momentum by following the current plan carefully.`,
+      ),
+      message(`a${index}`, "assistant", `Ack ${index}`),
+    );
+  }
+
+  messages.push(
+    message("u13", "user", "Keep the existing layout and copy wording unchanged."),
+    message("a13", "assistant", "Understood."),
+  );
+
+  for (let index = 14; index <= 18; index += 1) {
+    messages.push(
+      message(
+        `u${index}`,
+        "user",
+        `Please continue with implementation step ${index} and keep momentum by following the current plan carefully.`,
+      ),
+      message(`a${index}`, "assistant", `Ack ${index}`),
+    );
+  }
+
+  const result = buildAcpHistoryMessages(messages);
+
+  assert.equal(result[0].role, "user");
+  assert.match(result[0].content, /Keep the existing layout and copy wording unchanged\./);
+});
+
+test("buildAcpHistoryMessages preserves older substantive assistant context that later user prompts can reference", () => {
+  const messages: ChatMessage[] = [
+    message("u1", "user", "Please propose a migration plan for the sidebar state."),
+    message(
+      "a1",
+      "assistant",
+      "Plan: 1. Introduce a dedicated hook for the panel stack. 2. Move the derived view state into that hook. 3. Keep the existing UI copy and layout. 4. Add a regression test around back navigation.",
+    ),
+  ];
+
+  for (let index = 2; index <= 13; index += 1) {
+    messages.push(
+      message(`u${index}`, "user", `filler user message ${index}`),
+      message(`a${index}`, "assistant", `Ack ${index}`),
+    );
+  }
+
+  messages.push(message("u14", "user", "Apply step 2 of your plan now."));
+
+  const result = buildAcpHistoryMessages(messages);
+
+  assert.equal(result[0].role, "user");
+  assert.match(result[0].content, /Move the derived view state into that hook\./);
+});
+
+test("buildAcpHistoryMessages preserves short non-trivial user constraints that miss the IMPORTANT regex", () => {
+  // Regression: short load-bearing instructions like "Use ssh2" / "中文输出"
+  // would previously be dropped by a blanket length<10 heuristic, even
+  // though they don't match any TRIVIAL pattern.
+  const messages: ChatMessage[] = [
+    message("u1", "user", "Use ssh2"),
+    message("a1", "assistant", "Got it."),
+    message("u2", "user", "中文输出"),
+    message("a2", "assistant", "明白"),
+  ];
+
+  // Push enough later turns so u1/u2 fall outside the recent raw window
+  // and have to survive via the durable-user compaction path.
+  for (let index = 3; index <= 13; index += 1) {
+    messages.push(
+      message(`u${index}`, "user", `filler user message ${index}`),
+      message(`a${index}`, "assistant", `filler assistant message ${index}`),
+    );
+  }
+
+  const result = buildAcpHistoryMessages(messages);
+
+  assert.equal(result[0].role, "user");
+  assert.match(result[0].content, /Use ssh2/);
+  assert.match(result[0].content, /中文输出/);
+});
+
+test("buildAcpHistoryMessages still drops one-word filler user messages", () => {
+  // Sanity: removing the length<10 heuristic must not cause "ok" / "继续" /
+  // "thanks" filler to leak into the compact section.
+  const messages: ChatMessage[] = [
+    message("u1", "user", "ok"),
+    message("a1", "assistant", "ack"),
+    message("u2", "user", "继续"),
+    message("a2", "assistant", "继续处理"),
+  ];
+
+  for (let index = 3; index <= 13; index += 1) {
+    messages.push(
+      message(`u${index}`, "user", `filler user message ${index}`),
+      message(`a${index}`, "assistant", `filler assistant message ${index}`),
+    );
+  }
+
+  const result = buildAcpHistoryMessages(messages);
+
+  // u1 / u2 fall outside the recent raw window. The compact context, if it
+  // exists, must not surface these trivial turns as durable user requests.
+  if (result.length > 0 && result[0].role === "user") {
+    assert.doesNotMatch(result[0].content, /User request: ok\b/);
+    assert.doesNotMatch(result[0].content, /User request: 继续/);
+  }
+});
+
+test("buildAcpHistoryMessages preserves recent tool results verbatim (up to the raw budget) for follow-up references", () => {
+  // Regression: tool results used to only reach fallback replay via the
+  // 500-char compact summary. If the user's last interaction produced a
+  // large tool output (cat/rg/fetched file), any "use that output"-style
+  // follow-up lost the actual bytes. Now tool messages flow through the
+  // recent raw window at MAX_RAW_MESSAGE_CHARS (2000).
+  const bigToolOutput = "DATA ".repeat(300); // ~1500 chars — bigger than summary cap but smaller than raw cap
+  const messages: ChatMessage[] = [
+    message("u1", "user", "cat /etc/hosts"),
+    message("a1", "assistant", "", {
+      toolCalls: [{ id: "call1", name: "terminal", arguments: { cmd: "cat /etc/hosts" } }],
+    }),
+    message("tool1", "tool", "", {
+      toolResults: [
+        { toolCallId: "call1", content: bigToolOutput, isError: false },
+      ],
+    }),
+    message("u2", "user", "use that output"),
+  ];
+
+  const result = buildAcpHistoryMessages(messages);
+  const flat = result.map((m) => m.content).join("\n---\n");
+
+  // Raw-window tool result carries both the [from ...] provenance label
+  // and the actual bytes (not just the 500-char compact summary).
+  assert.match(flat, /Tool result \[from terminal.*?cat \/etc\/hosts.*?\] \(call1\): DATA DATA DATA/);
+  // Confirm we kept enough bytes to exceed the compact-summary cap.
+  const toolResultIdx = flat.indexOf("Tool result [from terminal");
+  assert.ok(toolResultIdx >= 0, "tool result line must appear in raw window");
+  const toolResultChunk = flat.slice(toolResultIdx);
+  assert.ok(
+    toolResultChunk.length > 600,
+    `expected tool result chunk to exceed compact cap (~500 chars), got ${toolResultChunk.length}`,
+  );
+});
+
+test("buildAcpHistoryMessages inlines tool_call name+args so tool_result is interpretable without the preceding assistant turn", () => {
+  // Regression: if the raw window starts mid-tool-interaction, the
+  // preceding assistant tool_call message may be outside the 6-item
+  // slice. Without the call's name/args inline on the result line, the
+  // AI sees opaque bytes and "use that output" becomes ambiguous.
+  const messages: ChatMessage[] = [
+    // Early filler to push the tool_call off the raw window
+    message("u0", "user", "prior chatter"),
+    message("a0", "assistant", "prior reply"),
+    message("u1", "user", "cat /etc/hosts"),
+    message("a1", "assistant", "", {
+      toolCalls: [
+        { id: "call1", name: "terminal_exec", arguments: { command: "cat /etc/hosts" } },
+      ],
+    }),
+    message("tool1", "tool", "", {
+      toolResults: [
+        { toolCallId: "call1", content: "127.0.0.1 localhost", isError: false },
+      ],
+    }),
+    message("u2", "user", "use that output"),
+    message("a2", "assistant", "acknowledged"),
+    message("u3", "user", "now do the same for /etc/resolv.conf"),
+  ];
+
+  const result = buildAcpHistoryMessages(messages);
+  const flat = result.map((m) => m.content).join("\n---\n");
+
+  // The tool_result line must carry the originating tool_call's name and
+  // args, so even if a1 was pushed out of the raw window, the result is
+  // self-describing.
+  assert.match(flat, /Tool result \[from terminal_exec/);
+  assert.match(flat, /cat \/etc\/hosts/);
+});
+
+test("buildAcpHistoryMessages bounds the durable-candidate scan to avoid O(N) work per send on long chats", () => {
+  // Regression target: codex review flagged that the compaction path
+  // scanned messages.entries() over the full transcript. Build a very
+  // long chat (>> MAX_DURABLE_SCAN_TURNS user turns) and verify that
+  // only messages within the recent user-turn window contribute
+  // durable candidates.
+  const messages: ChatMessage[] = [];
+  // An ancient high-priority constraint that MUST be aged out.
+  messages.push(message("old-important", "user", "不要提交 old-marker-xyz"));
+  messages.push(message("old-ack", "assistant", "收到"));
+
+  // 300 filler turns between the ancient constraint and the window —
+  // well past MAX_DURABLE_SCAN_TURNS (100).
+  for (let i = 0; i < 300; i += 1) {
+    messages.push(
+      message(`u${i}`, "user", `filler user message ${i}`),
+      message(`a${i}`, "assistant", `filler assistant message ${i}`),
+    );
+  }
+
+  // A recent constraint that should survive.
+  messages.push(message("recent-important", "user", "不要提交 recent-marker-abc"));
+  for (let i = 0; i < 5; i += 1) {
+    messages.push(
+      message(`t${i}`, "user", `tail user message ${i}`),
+      message(`ta${i}`, "assistant", `tail assistant message ${i}`),
+    );
+  }
+
+  const result = buildAcpHistoryMessages(messages);
+  const flat = result.map((m) => m.content).join("\n---\n");
+
+  // Recent priority-2 constraint is kept.
+  assert.match(flat, /recent-marker-abc/);
+  // Ancient one past the scan window is dropped — proof the bound holds.
+  assert.doesNotMatch(flat, /old-marker-xyz/);
+});
+
+test("buildAcpHistoryMessages preserves an early constraint in a tool-heavy chat where message count balloons past the raw-count limit", () => {
+  // Regression: the previous bound was MAX_DURABLE_SCAN_MESSAGES=200 on
+  // the raw message array. In a tool-heavy chat, each user turn can
+  // expand to 5+ messages (user + assistant w/ toolCalls + N tool
+  // results + follow-up assistant), so 200 messages might be only
+  // ~40 user turns. An instruction like "不要提交" from turn 5 would
+  // fall out of the scan before the turn count justified aging it out.
+  //
+  // Now the bound is MAX_DURABLE_SCAN_TURNS=100 user turns. Build a
+  // chat with only 30 user turns but many messages per turn — the
+  // early constraint must still survive.
+  const messages: ChatMessage[] = [];
+  messages.push(message("early-important", "user", "不要提交 EARLY_CONSTRAINT_MARKER"));
+  messages.push(message("early-ack", "assistant", "收到"));
+
+  // 35 additional turns, each with 6 messages (bloats the total
+  // message count to >200 without exceeding 100 user turns).
+  for (let turn = 1; turn < 36; turn += 1) {
+    messages.push(message(`u${turn}`, "user", `turn ${turn} request`));
+    messages.push(message(`a${turn}-plan`, "assistant", "let me check", {
+      toolCalls: [
+        { id: `c${turn}a`, name: "terminal_exec", arguments: { cmd: "echo a" } },
+        { id: `c${turn}b`, name: "terminal_exec", arguments: { cmd: "echo b" } },
+        { id: `c${turn}c`, name: "terminal_exec", arguments: { cmd: "echo c" } },
+      ],
+    }));
+    messages.push(message(`t${turn}a`, "tool", "", {
+      toolResults: [{ toolCallId: `c${turn}a`, content: `result a of turn ${turn}`, isError: false }],
+    }));
+    messages.push(message(`t${turn}b`, "tool", "", {
+      toolResults: [{ toolCallId: `c${turn}b`, content: `result b of turn ${turn}`, isError: false }],
+    }));
+    messages.push(message(`t${turn}c`, "tool", "", {
+      toolResults: [{ toolCallId: `c${turn}c`, content: `result c of turn ${turn}`, isError: false }],
+    }));
+    messages.push(message(`a${turn}-done`, "assistant", `turn ${turn} done`));
+  }
+
+  // Sanity: the message count is over 200 even though user turns are 30.
+  assert.ok(messages.length > 200, `setup: expected > 200 messages, got ${messages.length}`);
+
+  const result = buildAcpHistoryMessages(messages);
+  const flat = result.map((m) => m.content).join("\n---\n");
+
+  // Under the old raw-count bound, the early constraint would age out;
+  // under the turn-based bound it survives.
+  assert.match(flat, /EARLY_CONSTRAINT_MARKER/);
+});
+
+test("buildAcpHistoryMessages preserves short non-trivial assistant decisions that miss the keyword heuristic", () => {
+  // Regression: isSubstantiveAssistantMessage previously required length
+  // >= 40 OR a small English keyword match OR a numbered list. Short
+  // load-bearing replies like "Use ssh2" / "rebase instead" / "中文输出"
+  // satisfied none of those and were silently dropped. After a stale-
+  // session recovery, "do what you suggested earlier" would then replay
+  // only the user's question without the assistant's actual decision.
+  const messages: ChatMessage[] = [
+    message("u1", "user", "which client should I use"),
+    message("a1", "assistant", "Use ssh2"),
+    message("u2", "user", "output language?"),
+    message("a2", "assistant", "中文输出"),
+    message("u3", "user", "merge or rebase?"),
+    message("a3", "assistant", "rebase instead"),
+  ];
+
+  // Pad so u1..a3 fall outside the recent raw window (last 6 items) and
+  // must flow through the durable-assistant compact pass.
+  for (let index = 4; index <= 13; index += 1) {
+    messages.push(
+      message(`u${index}`, "user", `filler user message ${index}`),
+      message(`a${index}`, "assistant", `Ack ${index}`),
+    );
+  }
+
+  const result = buildAcpHistoryMessages(messages);
+  const flat = result.map((m) => m.content).join("\n---\n");
+
+  assert.match(flat, /Use ssh2/);
+  assert.match(flat, /中文输出/);
+  assert.match(flat, /rebase instead/);
+});
+
+test("buildAcpHistoryMessages still drops trivial assistant filler like 'ack' / 'ok' / '明白'", () => {
+  // Sanity: removing the length/keyword gate must not let assistant
+  // filler leak into the compact durable-assistant section.
+  const messages: ChatMessage[] = [
+    message("u1", "user", "prompt 1"),
+    message("a1", "assistant", "ack"),
+    message("u2", "user", "prompt 2"),
+    message("a2", "assistant", "明白"),
+    message("u3", "user", "prompt 3"),
+    message("a3", "assistant", "got it"),
+  ];
+
+  for (let index = 4; index <= 13; index += 1) {
+    messages.push(
+      message(`u${index}`, "user", `filler user message ${index}`),
+      message(`a${index}`, "assistant", `more filler ${index}`),
+    );
+  }
+
+  const result = buildAcpHistoryMessages(messages);
+  const flat = result.map((m) => m.content).join("\n---\n");
+
+  assert.doesNotMatch(flat, /Assistant context: ack\b/);
+  assert.doesNotMatch(flat, /Assistant context: got it\b/);
+  assert.doesNotMatch(flat, /Assistant context: 明白/);
+});
+
+test("buildAcpHistoryMessages inlines tool_call context on OLDER summarized tool results", () => {
+  // Regression: the raw-window fix covered the last 6 items, but once
+  // a tool result fell into the compact section (summarizeToolMessage
+  // path) the `[from <name>(<args>)]` provenance label was absent.
+  // With multiple older tool outputs, all surfacing as identical
+  // `Tool result (callN): ...`, follow-ups like "use the resolv.conf
+  // output" have no way to map to the right call.
+  const messages: ChatMessage[] = [
+    // Two distinct tool interactions, both pushed well outside the
+    // recent raw window by later turns.
+    message("u1", "user", "show hosts"),
+    message("a1", "assistant", "", {
+      toolCalls: [{ id: "call-hosts", name: "terminal_exec", arguments: { command: "cat /etc/hosts" } }],
+    }),
+    message("tool1", "tool", "", {
+      toolResults: [{ toolCallId: "call-hosts", content: "127.0.0.1 localhost", isError: false }],
+    }),
+    message("u2", "user", "show resolv.conf"),
+    message("a2", "assistant", "", {
+      toolCalls: [{ id: "call-resolv", name: "terminal_exec", arguments: { command: "cat /etc/resolv.conf" } }],
+    }),
+    message("tool2", "tool", "", {
+      toolResults: [{ toolCallId: "call-resolv", content: "nameserver 8.8.8.8", isError: false }],
+    }),
+    // Important user text so summarizeMessage picks these up via the
+    // important-text branch; tool results themselves are always
+    // summarized regardless of IMPORTANT_PATTERNS.
+    message("u3", "user", "fallback plan"),
+  ];
+
+  // Filler to push the early tool results out of the 6-item raw window
+  // and into the compact summary section (scanned = last 20).
+  for (let index = 4; index <= 10; index += 1) {
+    messages.push(
+      message(`u${index}`, "user", `filler user message ${index}`),
+      message(`a${index}`, "assistant", `Ack ${index}`),
+    );
+  }
+
+  const result = buildAcpHistoryMessages(messages);
+  const flat = result.map((m) => m.content).join("\n---\n");
+
+  // Both older tool results must now carry provenance labels so a
+  // follow-up can disambiguate them.
+  assert.match(flat, /Tool result \[from terminal_exec.*?cat \/etc\/hosts/);
+  assert.match(flat, /Tool result \[from terminal_exec.*?cat \/etc\/resolv\.conf/);
+});
+
+test("buildAcpHistoryMessages does not duplicate recent raw turns into the compact summary section", () => {
+  // Regression: the scanned loop (last 20) overlaps with recentRaw (last 6).
+  // Without skipping raw-window items, the same last-6 turns would be
+  // summarized in the compact section AND appended verbatim in the raw
+  // section — doubling the budget cost of important user turns / large
+  // tool output and crowding out older durable context.
+  //
+  // Setup: enough filler upfront that u3 ends up OUTSIDE the raw window
+  // (so it can be asserted absent from raw), then a distinctive "raw
+  // only" marker that should appear only in the last-6 raw slice.
+  const messages: ChatMessage[] = [];
+  for (let index = 1; index <= 6; index += 1) {
+    messages.push(
+      message(`uf${index}`, "user", `filler user ${index}`),
+      message(`af${index}`, "assistant", `filler assistant ${index}`),
+    );
+  }
+  // These are the last 4 user/assistant messages — guaranteed to be in
+  // the last-6 raw slice. The IMPORTANT markers below would ordinarily
+  // also get summarized into the compact section, duplicating the cost.
+  messages.push(
+    message("u-rec1", "user", "commit now IMPORTANT_RAW_MARKER please"),
+    message("a-rec1", "assistant", "", {
+      toolCalls: [{ id: "c1", name: "git", arguments: { op: "commit" } }],
+    }),
+    message("tool-rec", "tool", "", {
+      toolResults: [{ toolCallId: "c1", content: "committed abc123 RAW_TOOL_MARKER", isError: false }],
+    }),
+    message("u-rec2", "user", "now push"),
+  );
+
+  const result = buildAcpHistoryMessages(messages);
+
+  const compact = result.find((m) => m.content.includes("[Compact prior Netcatty UI context]"));
+  assert.ok(compact, "expected a compact context message");
+
+  // Both markers belong to messages inside the raw window — they must
+  // not be summarized into compact (which would double-bill them).
+  assert.doesNotMatch(compact.content, /IMPORTANT_RAW_MARKER/);
+  assert.doesNotMatch(compact.content, /RAW_TOOL_MARKER/);
+
+  // Raw section still carries them verbatim.
+  const raw = result.filter((m) => !m.content.includes("[Compact prior Netcatty UI context]"));
+  const rawFlat = raw.map((m) => m.content).join("\n");
+  assert.match(rawFlat, /IMPORTANT_RAW_MARKER/);
+  assert.match(rawFlat, /RAW_TOOL_MARKER/);
+});
+
+test("buildAcpHistoryMessages resolves tool_call provenance correctly when tool ids are reused across turns", () => {
+  // Regression: keying toolCallIndex by raw toolCall.id alone let a later
+  // assistant tool_call with the same id overwrite the older one. An
+  // older tool_result in the replay history would then be annotated
+  // with the wrong command (e.g. a /etc/hosts result labeled as
+  // /etc/resolv.conf). Now each tool_result is indexed by its own
+  // messageId + toolCallId and resolved to the most recent preceding
+  // call with that id.
+  const messages: ChatMessage[] = [
+    message("u1", "user", "show hosts"),
+    message("a1", "assistant", "", {
+      toolCalls: [{ id: "call1", name: "terminal_exec", arguments: { command: "cat /etc/hosts" } }],
+    }),
+    message("tool-hosts", "tool", "", {
+      toolResults: [{ toolCallId: "call1", content: "127.0.0.1 localhost HOSTS_BYTES", isError: false }],
+    }),
+    // A later assistant turn reuses the id "call1" for a different call.
+    message("u2", "user", "show resolv"),
+    message("a2", "assistant", "", {
+      toolCalls: [{ id: "call1", name: "terminal_exec", arguments: { command: "cat /etc/resolv.conf" } }],
+    }),
+    message("tool-resolv", "tool", "", {
+      toolResults: [{ toolCallId: "call1", content: "nameserver 8.8.8.8 RESOLV_BYTES", isError: false }],
+    }),
+    message("u3", "user", "ok"),
+  ];
+
+  // Pad so the first interaction lands in the compact summary pass.
+  for (let index = 4; index <= 10; index += 1) {
+    messages.push(
+      message(`u${index}`, "user", `filler user message ${index}`),
+      message(`a${index}`, "assistant", `Ack ${index}`),
+    );
+  }
+
+  const result = buildAcpHistoryMessages(messages);
+  const flat = result.map((m) => m.content).join("\n---\n");
+
+  // Each tool_result must be annotated with ITS OWN preceding call's
+  // args — not whichever assistant tool_call happened to win the
+  // last-write on the shared id.
+  //
+  // Extract the two Tool-result lines and match each to its expected
+  // args. Use non-greedy .*? — the args JSON can contain parentheses.
+  const hostsMatch = flat.match(/Tool result \[from [^\]]*?cat \/etc\/hosts[^\]]*?\][^\n]*HOSTS_BYTES/);
+  const resolvMatch = flat.match(/Tool result \[from [^\]]*?cat \/etc\/resolv\.conf[^\]]*?\][^\n]*RESOLV_BYTES/);
+
+  assert.ok(hostsMatch, "hosts result must still be labeled with cat /etc/hosts despite later id reuse");
+  assert.ok(resolvMatch, "resolv result must be labeled with cat /etc/resolv.conf");
+});
+
+test("buildAcpHistoryMessages preserves assistant-only compact context", () => {
+  const messages: ChatMessage[] = [
+    message("u1", "user", "ok"),
+    message(
+      "a1",
+      "assistant",
+      "Plan: 1. Move parser setup into a dedicated hook. 2. Keep storage schema unchanged. 3. Add a regression test.",
+    ),
+  ];
+
+  for (let index = 2; index <= 7; index += 1) {
+    messages.push(
+      message(`u${index}`, "user", index % 2 === 0 ? "ok" : "continue"),
+      message(`a${index}`, "assistant", "ack"),
+    );
+  }
+
+  const result = buildAcpHistoryMessages(messages);
+
+  assert.equal(result[0].role, "user");
+  assert.match(result[0].content, /Move parser setup into a dedicated hook\./);
+});

components/ai/acpHistory.ts

@@ -0,0 +1,438 @@
+import type { ChatMessage } from "../../infrastructure/ai/types.ts";
+
+type AcpHistoryMessage = { role: "user" | "assistant"; content: string };
+type RawHistoryMessage = AcpHistoryMessage & { sourceId: string };
+type DurableUserLine = {
+  line: string;
+  messageIndex: number;
+  priority: number;
+};
+
+const MAX_RECENT_RAW_MESSAGES = 6;
+const MAX_MESSAGES_TO_SCAN = 20;
+// Bound the scan by user turns, not raw message count: a tool-heavy ACP
+// chat can produce 5+ messages per logical turn (user + assistant +
+// several tool_results + follow-up assistant), so a plain
+// message-count cap ages out early constraints much sooner than intended.
+const MAX_DURABLE_SCAN_TURNS = 100;
+const MAX_COMPACT_CONTEXT_CHARS = 3000;
+const MAX_RAW_MESSAGE_CHARS = 2000;
+const MAX_TOOL_SUMMARY_CHARS = 500;
+const MAX_DURABLE_USER_CONTEXT_CHARS = 1400;
+const MAX_DURABLE_ASSISTANT_CONTEXT_CHARS = 900;
+const MAX_RECENT_SUMMARY_CONTEXT_CHARS = 1200;
+const MAX_DURABLE_USER_MESSAGE_CHARS = 280;
+const MAX_DURABLE_ASSISTANT_MESSAGE_CHARS = 360;
+const MAX_TOOL_CALL_LABEL_CHARS = 200;
+
+type ToolCallInfo = { name: string; arguments: unknown };
+
+const IMPORTANT_PATTERNS = [
+  /不要|别|不能|不允许|必须|希望|只|最小|先|暂时|fallback|pwsh|powershell|cmd\.exe|windows|mcp|skills|cli|commit|\bpr\b|打包|内存|历史|压缩|慢/i,
+  /error|failed|failure|exit code|exception|cannot|unable|timeout|crash|fallback|commit|pull request|PR #\d+/i,
+];
+const DURABLE_CONSTRAINT_PATTERNS = [
+  /\bdo not\b|\bdon't\b|\bkeep\b|\bpreserve\b|\bavoid\b|\bonly\b|\bunchanged\b|\blocal only\b|\bwithout\b|\bleave\b/i,
+  /不要|别|保留|保持|维持|不改|别改|不要改|仅限本地/i,
+];
+const TRIVIAL_USER_MESSAGE_PATTERNS = [
+  /^(ok|okay|yes|no|thanks|thank you|continue|继续|好的|收到|行|嗯|好|继续处理|继续吧|开始吧)[.!? ]*$/i,
+];
+const TRIVIAL_ASSISTANT_MESSAGE_PATTERNS = [
+  /^(ok|okay|understood|got it|working|proceeding|ready|ack(?: \d+)?|收到|明白|继续处理|准备实现|开始处理|处理中)[.!? ]*$/i,
+];
+
+function truncateText(value: string, maxChars: number): string {
+  if (value.length <= maxChars) return value;
+  return `${value.slice(0, Math.max(0, maxChars - 24)).trimEnd()}\n[truncated]`;
+}
+
+function normalizeWhitespace(value: string): string {
+  return value.replace(/\s+/g, " ").trim();
+}
+
+function isImportantText(value: string): boolean {
+  return IMPORTANT_PATTERNS.some((pattern) => pattern.test(value));
+}
+
+function isDurableConstraintText(value: string): boolean {
+  return DURABLE_CONSTRAINT_PATTERNS.some((pattern) => pattern.test(value));
+}
+
+function isTrivialUserMessage(value: string): boolean {
+  const normalized = normalizeWhitespace(value);
+  if (isImportantText(normalized) || isDurableConstraintText(normalized)) return false;
+  // Don't blanket-drop short messages — short user turns are often
+  // load-bearing constraints ("Use ssh2", "中文输出", "no logs", "more
+  // verbose") that the IMPORTANT/DURABLE regexes can't realistically
+  // enumerate. The trivial-phrase regex already catches actual filler
+  // ("ok", "yes", "thanks", "继续").
+  return TRIVIAL_USER_MESSAGE_PATTERNS.some((pattern) => pattern.test(normalized));
+}
+
+function getDurableUserPriority(value: string): number {
+  const normalized = normalizeWhitespace(value);
+  if (isImportantText(normalized) || isDurableConstraintText(normalized)) return 2;
+  return 1;
+}
+
+function isSubstantiveAssistantMessage(value: string): boolean {
+  const normalized = normalizeWhitespace(value);
+  if (!normalized) return false;
+  // Mirror the user-side loosening: don't blanket-drop short assistant
+  // messages just because they're under 40 chars or don't match the small
+  // English keyword list. Short but load-bearing decisions ("Use ssh2",
+  // "rebase instead", "中文输出") aren't realistically enumerable and
+  // they're the exact things a later "do what you suggested" references.
+  // TRIVIAL_ASSISTANT_MESSAGE_PATTERNS still catches the actual filler
+  // ("ok", "ack", "got it", "明白").
+  return !TRIVIAL_ASSISTANT_MESSAGE_PATTERNS.some((pattern) => pattern.test(normalized));
+}
+
+function getDurableAssistantPriority(value: string): number {
+  const normalized = normalizeWhitespace(value);
+  if (isImportantText(normalized)) return 2;
+  return 1;
+}
+
+function appendUniqueLine(
+  target: string[],
+  seen: Set<string>,
+  line: string,
+  maxSectionChars: number,
+  sectionCharsRef: { value: number },
+): void {
+  const normalized = normalizeWhitespace(line);
+  if (!normalized || seen.has(normalized)) return;
+  const nextChars = sectionCharsRef.value + normalized.length;
+  if (nextChars > maxSectionChars) return;
+  seen.add(normalized);
+  target.push(normalized);
+  sectionCharsRef.value = nextChars;
+}
+
+function summarizeToolMessage(
+  message: ChatMessage,
+  toolCallIndex: Map<string, ToolCallInfo>,
+): string[] {
+  if (!message.toolResults?.length) return [];
+  return message.toolResults.map((result) => {
+    const prefix = result.isError ? "Tool error" : "Tool result";
+    const content = normalizeWhitespace(result.content || "");
+    // Same provenance problem as the raw-window path: once a tool result
+    // lands in the compact section (older than the 6-item raw window),
+    // its paired assistant tool_call is almost always gone. Without the
+    // call label, multiple older results collapse into indistinguishable
+    // "Tool result (callN): ..." lines and follow-ups like "use the
+    // resolv.conf output" can't be resolved. Inline the name+args here
+    // the same way toRawHistoryMessage does.
+    const callInfo = lookupToolCallInfo(toolCallIndex, message.id, result.toolCallId);
+    const callLabel = callInfo
+      ? ` [from ${callInfo.name}(${truncateText(JSON.stringify(callInfo.arguments ?? {}), MAX_TOOL_CALL_LABEL_CHARS)})]`
+      : "";
+    return `${prefix}${callLabel} (${result.toolCallId}): ${truncateText(content, MAX_TOOL_SUMMARY_CHARS)}`;
+  });
+}
+
+function summarizeMessage(
+  message: ChatMessage,
+  toolCallIndex: Map<string, ToolCallInfo>,
+): string[] {
+  if (message.role === "system") return [];
+  if (message.role === "tool") return summarizeToolMessage(message, toolCallIndex);
+
+  const lines: string[] = [];
+  if (message.content && isImportantText(message.content)) {
+    const label = message.role === "user" ? "User" : "Assistant";
+    lines.push(`${label}: ${truncateText(normalizeWhitespace(message.content), MAX_TOOL_SUMMARY_CHARS)}`);
+  }
+
+  if (message.role === "assistant" && message.toolCalls?.length) {
+    for (const toolCall of message.toolCalls) {
+      const args = JSON.stringify(toolCall.arguments ?? {});
+      const summary = `Tool call: ${toolCall.name}(${truncateText(args, 220)})`;
+      if (isImportantText(summary)) lines.push(summary);
+    }
+  }
+
+  return lines;
+}
+
+function summarizeDurableUserMessage(message: ChatMessage): string | null {
+  if (message.role !== "user" || !message.content) return null;
+  if (isTrivialUserMessage(message.content)) return null;
+  return `User request: ${truncateText(normalizeWhitespace(message.content), MAX_DURABLE_USER_MESSAGE_CHARS)}`;
+}
+
+function summarizeDurableAssistantMessage(message: ChatMessage): string | null {
+  if (message.role !== "assistant" || !message.content) return null;
+  if (!isSubstantiveAssistantMessage(message.content)) return null;
+  return `Assistant context: ${truncateText(normalizeWhitespace(message.content), MAX_DURABLE_ASSISTANT_MESSAGE_CHARS)}`;
+}
+
+/**
+ * Build a per-tool-result provenance index. Keys are
+ * `${toolResultMessageId}:${toolCallId}` rather than the bare toolCall.id
+ * so that provider-reused ids (e.g. "call1" across unrelated turns) don't
+ * cause later calls to overwrite older ones in the lookup — each
+ * tool_result resolves to the most recent assistant tool_call that
+ * preceded it with matching id, which preserves historical correctness
+ * when rebuilding older compact summaries.
+ */
+function buildToolCallIndex(messages: ChatMessage[]): Map<string, ToolCallInfo> {
+  const provenance = new Map<string, ToolCallInfo>();
+  // Rolling map of the latest tool_call seen (by id) up to the current
+  // point in the message stream.
+  const latestByCallId = new Map<string, ToolCallInfo>();
+  for (const message of messages) {
+    if (message.role === "assistant" && message.toolCalls?.length) {
+      for (const toolCall of message.toolCalls) {
+        if (!toolCall.id) continue;
+        latestByCallId.set(toolCall.id, { name: toolCall.name, arguments: toolCall.arguments });
+      }
+      continue;
+    }
+    if (message.role === "tool" && message.toolResults?.length) {
+      for (const result of message.toolResults) {
+        const info = latestByCallId.get(result.toolCallId);
+        if (info) {
+          provenance.set(`${message.id}:${result.toolCallId}`, info);
+        }
+      }
+    }
+  }
+  return provenance;
+}
+
+function lookupToolCallInfo(
+  index: Map<string, ToolCallInfo>,
+  toolMessageId: string,
+  toolCallId: string,
+): ToolCallInfo | undefined {
+  return index.get(`${toolMessageId}:${toolCallId}`);
+}
+
+function toRawHistoryMessage(
+  message: ChatMessage,
+  toolCallIndex: Map<string, ToolCallInfo>,
+): RawHistoryMessage[] {
+  if (message.role === "user") {
+    return message.content
+      ? [{ sourceId: message.id, role: "user", content: truncateText(message.content, MAX_RAW_MESSAGE_CHARS) }]
+      : [];
+  }
+
+  if (message.role === "assistant") {
+    const parts: string[] = [];
+    if (message.content) parts.push(message.content);
+    if (message.toolCalls?.length) {
+      parts.push(...message.toolCalls.map((tc) => `Tool call: ${tc.name}(${JSON.stringify(tc.arguments ?? {})})`));
+    }
+    return parts.length
+      ? [{ sourceId: message.id, role: "assistant", content: truncateText(parts.join("\n\n"), MAX_RAW_MESSAGE_CHARS) }]
+      : [];
+  }
+
+  if (message.role === "tool" && message.toolResults?.length) {
+    // Keep tool output in the recent raw window (up to MAX_RAW_MESSAGE_CHARS
+    // per message, ~2000). Without this, follow-up turns after stale-session
+    // recovery would only see the 500-char compact summary in
+    // summarizeToolMessage, losing the actual bytes the user might reference
+    // ("use that output", "what did cat show?"). ACP only supports user/
+    // assistant roles, so we flatten to "assistant" — the tool results were
+    // produced during the assistant's turn.
+    //
+    // Inline the originating tool_call's name+args. Tool calls and their
+    // results live in separate messages; if the last six raw items start
+    // in the middle of a tool interaction, the preceding assistant tool
+    // call can be outside the window. Without the call label the result
+    // is opaque bytes and "use that output" becomes ambiguous.
+    const parts = message.toolResults.map((result) => {
+      const prefix = result.isError ? "Tool error" : "Tool result";
+      const callInfo = lookupToolCallInfo(toolCallIndex, message.id, result.toolCallId);
+      const callLabel = callInfo
+        ? ` [from ${callInfo.name}(${truncateText(JSON.stringify(callInfo.arguments ?? {}), MAX_TOOL_CALL_LABEL_CHARS)})]`
+        : "";
+      return `${prefix}${callLabel} (${result.toolCallId}): ${result.content || ""}`;
+    });
+    return [{
+      sourceId: message.id,
+      role: "assistant",
+      content: truncateText(parts.join("\n\n"), MAX_RAW_MESSAGE_CHARS),
+    }];
+  }
+
+  return [];
+}
+
+function buildCompactContext(
+  messages: ChatMessage[],
+  durableScanStart: number,
+  recentRawSourceIds: Set<string>,
+  toolCallIndex: Map<string, ToolCallInfo>,
+): AcpHistoryMessage[] {
+  const scanned = messages.slice(-MAX_MESSAGES_TO_SCAN);
+  const summaryLines: string[] = [];
+  const durableUserCandidates: DurableUserLine[] = [];
+  const selectedDurableUserLines: DurableUserLine[] = [];
+  const durableAssistantCandidates: DurableUserLine[] = [];
+  const selectedDurableAssistantLines: DurableUserLine[] = [];
+  const seen = new Set<string>();
+  const durableChars = { value: 0 };
+  const durableAssistantChars = { value: 0 };
+  const summaryChars = { value: 0 };
+
+  for (let messageIndex = durableScanStart; messageIndex < messages.length; messageIndex += 1) {
+    const message = messages[messageIndex];
+    if (recentRawSourceIds.has(message.id)) continue;
+    const durableUserLine = summarizeDurableUserMessage(message);
+    if (durableUserLine) {
+      durableUserCandidates.push({
+        line: durableUserLine,
+        messageIndex,
+        priority: getDurableUserPriority(message.content || ""),
+      });
+    }
+    const durableAssistantLine = summarizeDurableAssistantMessage(message);
+    if (durableAssistantLine) {
+      durableAssistantCandidates.push({
+        line: durableAssistantLine,
+        messageIndex,
+        priority: getDurableAssistantPriority(message.content || ""),
+      });
+    }
+  }
+
+  durableUserCandidates
+    .sort((left, right) => right.priority - left.priority || right.messageIndex - left.messageIndex)
+    .forEach((candidate) => {
+      const normalized = normalizeWhitespace(candidate.line);
+      if (!normalized || seen.has(normalized)) return;
+      const nextChars = durableChars.value + normalized.length;
+      if (nextChars > MAX_DURABLE_USER_CONTEXT_CHARS) return;
+      seen.add(normalized);
+      selectedDurableUserLines.push(candidate);
+      durableChars.value = nextChars;
+    });
+
+  durableAssistantCandidates
+    .sort((left, right) => right.priority - left.priority || right.messageIndex - left.messageIndex)
+    .forEach((candidate) => {
+      const normalized = normalizeWhitespace(candidate.line);
+      if (!normalized || seen.has(normalized)) return;
+      const nextChars = durableAssistantChars.value + normalized.length;
+      if (nextChars > MAX_DURABLE_ASSISTANT_CONTEXT_CHARS) return;
+      seen.add(normalized);
+      selectedDurableAssistantLines.push(candidate);
+      durableAssistantChars.value = nextChars;
+    });
+
+  const durableUserLines = selectedDurableUserLines
+    .sort((left, right) => left.messageIndex - right.messageIndex)
+    .map((candidate) => candidate.line);
+  const durableAssistantLines = selectedDurableAssistantLines
+    .sort((left, right) => left.messageIndex - right.messageIndex)
+    .map((candidate) => candidate.line);
+
+  for (const line of [...durableUserLines, ...durableAssistantLines]) {
+    seen.add(normalizeWhitespace(line));
+  }
+
+  // Skip messages that are already appended verbatim in the raw window —
+  // otherwise the same last-6 turns get summarized here AND re-sent as
+  // raw, doubling the budget cost of important user turns / large tool
+  // output and crowding out older durable context the replay is meant
+  // to preserve. Matches the recentRawSourceIds skip in the durable pass.
+  for (const message of scanned) {
+    if (recentRawSourceIds.has(message.id)) continue;
+    for (const line of summarizeMessage(message, toolCallIndex)) {
+      appendUniqueLine(summaryLines, seen, line, MAX_RECENT_SUMMARY_CONTEXT_CHARS, summaryChars);
+    }
+  }
+
+  if (!durableUserLines.length && !durableAssistantLines.length && !summaryLines.length) return [];
+
+  const contentLines = [
+    "[Compact prior Netcatty UI context]",
+    "The external ACP agent may already have its own persisted session context. Use this compact Netcatty UI context only as fallback/background, and prefer the current user request when there is any conflict.",
+  ];
+  if (durableUserLines.length) {
+    contentLines.push("Earlier user requests that may still apply:");
+    contentLines.push(...durableUserLines.map((line) => `- ${line}`));
+  }
+  if (durableAssistantLines.length) {
+    contentLines.push("Earlier assistant context that may still matter:");
+    contentLines.push(...durableAssistantLines.map((line) => `- ${line}`));
+  }
+  if (summaryLines.length) {
+    contentLines.push("Recent noteworthy context:");
+    contentLines.push(...summaryLines.map((line) => `- ${line}`));
+  }
+
+  return [{
+    role: "user",
+    content: truncateText(
+      contentLines.join("\n"),
+      MAX_COMPACT_CONTEXT_CHARS,
+    ),
+  }];
+}
+
+/**
+ * Find the index of the first message to include in the scan window,
+ * bounded by MAX_DURABLE_SCAN_TURNS user turns (not raw message count).
+ * Walking backwards stops at the target turn count, so the cost is
+ * bounded even when the transcript is huge.
+ */
+function computeDurableScanStart(messages: ChatMessage[]): number {
+  let userTurns = 0;
+  for (let i = messages.length - 1; i >= 0; i -= 1) {
+    if (messages[i].role === "user") {
+      userTurns += 1;
+      if (userTurns >= MAX_DURABLE_SCAN_TURNS) return i;
+    }
+  }
+  return 0;
+}
+
+export function buildAcpHistoryMessages(messages: ChatMessage[]): AcpHistoryMessage[] {
+  // Compute the scan start once, then do all subsequent work over the
+  // already-sliced tail. This avoids O(N) walks over the whole transcript
+  // on every send — previously buildToolCallIndex + the flatMap-to-take-
+  // last-6 raw history both traversed every message in the chat.
+  const durableScanStart = computeDurableScanStart(messages);
+  const scannedTail = messages.slice(durableScanStart);
+
+  // The tool-call provenance index only needs entries for tool_results
+  // that might appear in our output. Building from the scanned tail is
+  // correct for any tool_result whose paired assistant tool_call is
+  // also within the window, which covers >99% of realistic patterns
+  // (tool_calls and tool_results are always adjacent or near-adjacent).
+  // If an ancient tool_call's result stays within the window while the
+  // call itself is outside, that single result loses its [from X(Y)]
+  // label — an acceptable trade for eliminating the per-send O(N) walk.
+  const toolCallIndex = buildToolCallIndex(scannedTail);
+
+  const rawHistory = scannedTail
+    .flatMap((message) => toRawHistoryMessage(message, toolCallIndex))
+    .slice(-MAX_RECENT_RAW_MESSAGES);
+  const compactContext = buildCompactContext(
+    messages,
+    durableScanStart,
+    new Set(rawHistory.map((message) => message.sourceId)),
+    toolCallIndex,
+  );
+  const recentRaw = rawHistory.map(({ role, content }) => ({ role, content }));
+
+  return [...compactContext, ...recentRaw];
+}
+
+export function buildAcpHistoryMessagesForBridge(
+  messages: ChatMessage[],
+  _existingSessionId?: string | null,
+): AcpHistoryMessage[] | undefined {
+  // The main process bridge only consumes this payload during stale-session
+  // fallback replay, so keep it available even when a session id exists.
+  const historyMessages = buildAcpHistoryMessages(messages);
+  return historyMessages.length ? historyMessages : undefined;
+}

components/ai/aiPanelViewState.test.ts

@@ -0,0 +1,177 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import type {
+  AIPanelView,
+  AISession,
+} from "../../infrastructure/ai/types.ts";
+import {
+  applyDraftEntrySelection,
+  applyHistorySessionSelection,
+  normalizePanelView,
+  resolveDisplayedPanelView,
+  resolveDisplayedSession,
+} from "./aiPanelViewState.ts";
+
+function createSession(id: string): AISession {
+  return {
+    id,
+    title: `Session ${id}`,
+    messages: [],
+    createdAt: 1,
+    updatedAt: 1,
+    agentId: "catty",
+    scope: {
+      type: "terminal",
+      targetId: "terminal-1",
+    },
+  };
+}
+
+test("draft view never falls back to most recent history", () => {
+  const panelView: AIPanelView = { mode: "draft" };
+  const sessions = [createSession("session-2"), createSession("session-1")];
+
+  assert.equal(resolveDisplayedSession(panelView, sessions), null);
+});
+
+test("session view returns the selected session", () => {
+  const selectedSession = createSession("session-2");
+  const panelView: AIPanelView = { mode: "session", sessionId: selectedSession.id };
+  const sessions = [createSession("session-1"), selectedSession];
+
+  assert.equal(resolveDisplayedSession(panelView, sessions), selectedSession);
+});
+
+test("missing session target resolves to null instead of history fallback", () => {
+  const panelView: AIPanelView = { mode: "session", sessionId: "missing-session" };
+  const sessions = [createSession("session-2"), createSession("session-1")];
+
+  assert.equal(resolveDisplayedSession(panelView, sessions), null);
+});
+
+test("missing session target normalizes back to draft view", () => {
+  const panelView: AIPanelView = { mode: "session", sessionId: "missing-session" };
+  const sessions = [createSession("session-2"), createSession("session-1")];
+
+  assert.deepEqual(normalizePanelView(panelView, sessions), { mode: "draft" });
+});
+
+test("missing explicit panel view resumes the most recent matching history when no draft exists", () => {
+  const sessions = [createSession("session-2"), createSession("session-1")];
+
+  assert.deepEqual(
+    resolveDisplayedPanelView(undefined, false, sessions, undefined, "workspace"),
+    { mode: "session", sessionId: "session-2" },
+  );
+});
+
+test("missing explicit panel view restores the persisted active session instead of the newest", () => {
+  const sessions = [createSession("session-2"), createSession("session-1")];
+
+  assert.deepEqual(
+    resolveDisplayedPanelView(undefined, false, sessions, "session-1", "workspace"),
+    { mode: "session", sessionId: "session-1" },
+  );
+});
+
+test("persisted session id that no longer exists in history falls back to newest", () => {
+  const sessions = [createSession("session-2"), createSession("session-1")];
+
+  assert.deepEqual(
+    resolveDisplayedPanelView(undefined, false, sessions, "deleted-session", "workspace"),
+    { mode: "session", sessionId: "session-2" },
+  );
+});
+
+test("null persisted session id falls back to newest history entry", () => {
+  const sessions = [createSession("session-2"), createSession("session-1")];
+
+  assert.deepEqual(
+    resolveDisplayedPanelView(undefined, false, sessions, null, "workspace"),
+    { mode: "session", sessionId: "session-2" },
+  );
+});
+
+test("terminal scope without explicit view always starts from draft even when history exists", () => {
+  const sessions = [createSession("session-2"), createSession("session-1")];
+
+  assert.deepEqual(
+    resolveDisplayedPanelView(undefined, false, sessions, "session-1", "terminal"),
+    { mode: "draft" },
+  );
+});
+
+test("missing explicit panel view prefers the draft when unsent input exists", () => {
+  const sessions = [createSession("session-2"), createSession("session-1")];
+
+  assert.deepEqual(
+    resolveDisplayedPanelView(undefined, true, sessions),
+    { mode: "draft" },
+  );
+});
+
+test("draft state is used when there is no implicit history to resume", () => {
+  assert.deepEqual(
+    resolveDisplayedPanelView(undefined, true, []),
+    { mode: "draft" },
+  );
+});
+
+test("history selection switches to the chosen session without touching draft state", () => {
+  const calls: string[] = [];
+
+  applyHistorySessionSelection("session-2", {
+    showSessionView: (sessionId) => {
+      calls.push(`view:${sessionId}`);
+    },
+    setActiveSessionId: (sessionId) => {
+      calls.push(`active:${sessionId}`);
+    },
+    closeHistory: () => {
+      calls.push("close-history");
+    },
+  });
+
+  assert.deepEqual(calls, [
+    "view:session-2",
+    "active:session-2",
+    "close-history",
+  ]);
+});
+
+test("draft entry ensures a draft exists before switching the panel to draft mode", () => {
+  const calls: string[] = [];
+
+  applyDraftEntrySelection({
+    ensureDraft: () => {
+      calls.push("ensure-draft");
+    },
+    showDraftView: () => {
+      calls.push("show-draft");
+    },
+  });
+
+  assert.deepEqual(calls, [
+    "ensure-draft",
+    "show-draft",
+  ]);
+});
+
+test("draft entry can preserve the current session view while ensuring draft state", () => {
+  const calls: string[] = [];
+
+  applyDraftEntrySelection({
+    ensureDraft: () => {
+      calls.push("ensure-draft");
+    },
+    showDraftView: () => {
+      calls.push("show-draft");
+    },
+    preserveSessionView: true,
+  });
+
+  assert.deepEqual(calls, [
+    "ensure-draft",
+  ]);
+});

components/ai/aiPanelViewState.ts

@@ -0,0 +1,94 @@
+import type {
+  AIPanelView,
+  AISession,
+} from "../../infrastructure/ai/types.ts";
+
+const DEFAULT_PANEL_VIEW: AIPanelView = { mode: "draft" };
+
+interface HistorySessionSelectionActions {
+  showSessionView: (sessionId: string) => void;
+  setActiveSessionId: (sessionId: string) => void;
+  closeHistory?: () => void;
+}
+
+interface DraftEntrySelectionActions {
+  ensureDraft: () => void;
+  showDraftView: () => void;
+  preserveSessionView?: boolean;
+}
+
+export function resolveDisplayedPanelView(
+  panelView: AIPanelView | undefined,
+  hasDraft: boolean,
+  sessions: AISession[],
+  persistedSessionId?: string | null,
+  scopeType: "terminal" | "workspace" = "workspace",
+): AIPanelView {
+  if (panelView) {
+    return normalizePanelView(panelView, sessions);
+  }
+
+  if (hasDraft) {
+    return DEFAULT_PANEL_VIEW;
+  }
+
+  // New terminal sessions should always start from a blank draft. History is
+  // still available in the drawer, but never auto-resumed into a fresh SSH tab.
+  if (scopeType === "terminal") {
+    return DEFAULT_PANEL_VIEW;
+  }
+
+  // Honour the persisted active-session selection (survives cold mount)
+  // before falling back to the newest history entry.
+  if (persistedSessionId && sessions.some((s) => s.id === persistedSessionId)) {
+    return { mode: "session", sessionId: persistedSessionId };
+  }
+
+  if (sessions[0]) {
+    return { mode: "session", sessionId: sessions[0].id };
+  }
+
+  return DEFAULT_PANEL_VIEW;
+}
+
+export function normalizePanelView(
+  panelView: AIPanelView,
+  sessions: AISession[],
+): AIPanelView {
+  if (panelView.mode !== "session") {
+    return panelView;
+  }
+
+  return sessions.some((session) => session.id === panelView.sessionId)
+    ? panelView
+    : DEFAULT_PANEL_VIEW;
+}
+
+export function resolveDisplayedSession(
+  panelView: AIPanelView,
+  sessions: AISession[],
+): AISession | null {
+  if (panelView.mode !== "session") {
+    return null;
+  }
+
+  return sessions.find((session) => session.id === panelView.sessionId) ?? null;
+}
+
+export function applyHistorySessionSelection(
+  sessionId: string,
+  actions: HistorySessionSelectionActions,
+): void {
+  actions.showSessionView(sessionId);
+  actions.setActiveSessionId(sessionId);
+  actions.closeHistory?.();
+}
+
+export function applyDraftEntrySelection(
+  actions: DraftEntrySelectionActions,
+): void {
+  actions.ensureDraft();
+  if (!actions.preserveSessionView) {
+    actions.showDraftView();
+  }
+}

components/ai/draftSendGate.test.ts

@@ -0,0 +1,18 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+  endDraftSend,
+  tryBeginDraftSend,
+} from "./draftSendGate.ts";
+
+test("draft send gate allows only one in-flight draft send at a time", () => {
+  const gate = { current: false };
+
+  assert.equal(tryBeginDraftSend(gate), true);
+  assert.equal(tryBeginDraftSend(gate), false);
+
+  endDraftSend(gate);
+
+  assert.equal(tryBeginDraftSend(gate), true);
+});

components/ai/draftSendGate.ts

@@ -0,0 +1,12 @@
+export function tryBeginDraftSend(gate: { current: boolean }): boolean {
+  if (gate.current) {
+    return false;
+  }
+
+  gate.current = true;
+  return true;
+}
+
+export function endDraftSend(gate: { current: boolean }): void {
+  gate.current = false;
+}

components/ai/hooks/useAIChatStreaming.ts

@@ -14,10 +14,12 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { streamText, stepCountIs, type ModelMessage } from 'ai';
 import type {
   AIPermissionMode,
+  AIToolIntegrationMode,
   AISession,
   ChatMessage,
   ChatMessageAttachment,
   ExternalAgentConfig,
+  ProviderAdvancedParams,
   ProviderConfig,
   WebSearchConfig,
 } from '../../../infrastructure/ai/types';
@@ -111,7 +113,25 @@ export interface PanelBridge extends NetcattyBridge {
   aiSyncProviders?: (providers: Array<{ id: string; providerId: string; apiKey?: string; baseURL?: string; enabled: boolean }>) => Promise<{ ok: boolean }>;
   aiSyncWebSearch?: (apiHost: string | null, apiKey: string | null) => Promise<{ ok: boolean }>;
   aiMcpUpdateSessions?: (sessions: TerminalSessionInfo[], chatSessionId?: string) => Promise<unknown>;
+  aiAcpListModels?: (
+    acpCommand: string,
+    acpArgs?: string[],
+    cwd?: string,
+    providerId?: string,
+    chatSessionId?: string,
+  ) => Promise<{ ok: boolean; models?: Array<{ id: string; name: string; description?: string }>; currentModelId?: string | null; error?: string }>;
   aiAcpCleanup?: (chatSessionId: string) => Promise<{ ok: boolean }>;
+  aiUserSkillsGetStatus?: () => Promise<{
+    ok: boolean;
+    skills?: Array<{
+      id: string;
+      slug: string;
+      name: string;
+      description: string;
+      status: 'ready' | 'warning';
+    }>;
+  }>;
+  aiUserSkillsBuildContext?: (prompt: string, selectedSkillSlugs?: string[]) => Promise<{ ok: boolean; context?: string; error?: string }>;
   [key: string]: ((...args: unknown[]) => unknown) | undefined;
 }
 
@@ -125,9 +145,14 @@ export interface TerminalSessionInfo {
   username?: string;
   protocol?: string;
   shellType?: string;
+  deviceType?: string;
   connected: boolean;
 }
 
+export interface DefaultTargetSessionHint extends TerminalSessionInfo {
+  source: 'scope-target' | 'only-connected-in-scope';
+}
+
 /** Typed accessor for the netcatty bridge on the window object. */
 export function getNetcattyBridge(): PanelBridge | undefined {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -141,6 +166,45 @@ function generateId(): string {
   return `msg-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
 }
 
+const USER_SKILLS_CONTEXT_TIMEOUT_MS = 500;
+
+interface UserSkillsContextResult {
+  ok: boolean;
+  context?: string;
+  error?: string;
+}
+
+function buildExplicitUserSkillsFallback(selectedUserSkillSlugs?: string[]): string {
+  if (!selectedUserSkillSlugs?.length) return '';
+  return `The user explicitly selected these Netcatty user skills for this request: ${selectedUserSkillSlugs.map((slug) => `/${slug}`).join(', ')}. Honor those selections even if their expanded skill content is unavailable.`;
+}
+
+async function resolveUserSkillsContext(
+  bridge: PanelBridge | undefined,
+  prompt: string,
+  selectedUserSkillSlugs?: string[],
+): Promise<string> {
+  if (!bridge?.aiUserSkillsBuildContext) {
+    return buildExplicitUserSkillsFallback(selectedUserSkillSlugs);
+  }
+
+  const buildContextPromise: Promise<UserSkillsContextResult> = bridge
+    .aiUserSkillsBuildContext(prompt, selectedUserSkillSlugs)
+    .catch(() => ({ ok: false, context: '' }));
+
+  const hasExplicitSelections = (selectedUserSkillSlugs?.length ?? 0) > 0;
+  const result = hasExplicitSelections
+    ? await buildContextPromise
+    : await Promise.race([
+        buildContextPromise,
+        new Promise<UserSkillsContextResult>((resolve) =>
+          setTimeout(() => resolve({ ok: false, context: '' }), USER_SKILLS_CONTEXT_TIMEOUT_MS),
+        ),
+      ]);
+
+  return result.context || buildExplicitUserSkillsFallback(selectedUserSkillSlugs);
+}
+
 const sharedStreamingSessionIds = new Set<string>();
 const sharedAbortControllers = new Map<string, AbortController>();
 const streamingSubscribers = new Set<() => void>();
@@ -186,6 +250,7 @@ export interface UseAIChatStreamingReturn {
     sdkMessages: Array<ModelMessage>,
     signal: AbortSignal,
     currentAssistantMsgId: string,
+    advancedParams?: ProviderAdvancedParams,
   ) => Promise<void>;
   /** Send a message to the Catty agent (built-in). */
   sendToCattyAgent: (
@@ -224,6 +289,7 @@ export interface SendToCattyContext {
   webSearchConfig?: WebSearchConfig | null;
   getExecutorContext?: () => ExecutorContext;
   autoTitleSession: (sessionId: string, text: string) => void;
+  selectedUserSkillSlugs?: string[];
 }
 
 /** Context values needed by sendToExternalAgent that change frequently. */
@@ -232,8 +298,11 @@ export interface SendToExternalContext {
   updateExternalSessionId?: (sessionId: string, externalSessionId: string | undefined) => void;
   historyMessages?: Array<{ role: 'user' | 'assistant'; content: string }>;
   terminalSessions: TerminalSessionInfo[];
+  defaultTargetSession?: DefaultTargetSessionHint;
   providers: ProviderConfig[];
   selectedAgentModel?: string;
+  toolIntegrationMode: AIToolIntegrationMode;
+  selectedUserSkillSlugs?: string[];
 }
 
 // -------------------------------------------------------------------
@@ -286,14 +355,13 @@ export function useAIChatStreaming({
     err: unknown,
   ) => {
     if (abortSignal.aborted) return;
-    let errorStr: string;
-    if (err instanceof Error) errorStr = err.message;
-    else if (typeof err === 'object' && err !== null && 'message' in err) errorStr = String((err as { message: unknown }).message);
-    else if (typeof err === 'string') errorStr = err;
-    else { try { errorStr = JSON.stringify(err) ?? 'Unknown error'; } catch { errorStr = 'Unknown error'; } }
     // Log the full unsanitized error for debugging
-    console.error('[AIChatSidePanel] Stream error (full):', errorStr);
-    const errorInfo = classifyError(errorStr);
+    console.error('[AIChatSidePanel] Stream error (full):', err);
+    // Pass the raw error to classifyError so it can inspect structured
+    // fields (statusCode, responseBody) from APICallError and friends;
+    // string-coercing here would strip the metadata we need to detect
+    // 413 / HTML-error-page / parse-failure scenarios.
+    const errorInfo = classifyError(err);
     updateLastMessage(sessionId, msg => ({
       ...msg,
       statusText: '',
@@ -320,6 +388,7 @@ export function useAIChatStreaming({
     sdkMessages: Array<ModelMessage>,
     signal: AbortSignal,
     currentAssistantMsgId: string,
+    advancedParams?: ProviderAdvancedParams,
   ): Promise<void> => {
     const result = streamText({
       model,
@@ -328,6 +397,11 @@ export function useAIChatStreaming({
       tools,
       stopWhen: stepCountIs(maxIterations),
       abortSignal: signal,
+      ...(advancedParams?.maxTokens != null && { maxOutputTokens: advancedParams.maxTokens }),
+      ...(advancedParams?.temperature != null && { temperature: advancedParams.temperature }),
+      ...(advancedParams?.topP != null && { topP: advancedParams.topP }),
+      ...(advancedParams?.frequencyPenalty != null && { frequencyPenalty: advancedParams.frequencyPenalty }),
+      ...(advancedParams?.presencePenalty != null && { presencePenalty: advancedParams.presencePenalty }),
     });
 
     // Track the current assistant message ID so updates target the correct message
@@ -485,11 +559,10 @@ export function useAIChatStreaming({
             id: generateId(),
             role: 'assistant',
             content: '',
-            errorInfo: classifyError(
-              typedChunk.error instanceof Error ? typedChunk.error.message
-                : typeof typedChunk.error === 'string' ? typedChunk.error
-                : (() => { try { return JSON.stringify(typedChunk.error) ?? 'Unknown error'; } catch { return 'Unknown error'; } })(),
-            ),
+            // Pass the raw error so classifyError can detect 413 / HTML /
+            // schema-parse scenarios via structured fields (statusCode,
+            // responseBody) instead of lossy string conversion.
+            errorInfo: classifyError(typedChunk.error),
             timestamp: Date.now(),
           });
           break;
@@ -519,6 +592,11 @@ export function useAIChatStreaming({
     context: SendToExternalContext,
   ) => {
     const bridge = getNetcattyBridge();
+    const userSkillsContext = await resolveUserSkillsContext(
+      bridge,
+      trimmed,
+      context.selectedUserSkillSlugs,
+    );
 
     if (agentConfig.acpCommand && bridge) {
       const requestId = `acp_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`;
@@ -528,11 +606,6 @@ export function useAIChatStreaming({
         await bridge.aiMcpUpdateSessions(context.terminalSessions, sessionId);
       }
 
-      // Pass only the provider ID — the main process resolves and decrypts the API key itself,
-      // avoiding plaintext key transit across the IPC boundary.
-      const openaiProvider = context.providers.find(p => p.providerId === 'openai' && p.enabled && p.apiKey);
-      const agentProviderId = openaiProvider?.id;
-
       // Mutable flag: set after tool-result, cleared when new assistant msg is created
       let needsNewAssistantMsg = false;
       const maybeCreateAssistantMsg = () => {
@@ -614,17 +687,23 @@ export function useAIChatStreaming({
           onDone: () => {},
         },
         abortController.signal,
-        agentProviderId,
+        // Managed ACP agents (codex, claude) must resolve auth from their own
+        // CLI config/login state, so we deliberately pass no providerId here.
+        // See issue #705 for Codex; same reasoning for Claude.
+        undefined,
         context.selectedAgentModel,
         context.existingSessionId,
         context.historyMessages,
         attachedImages.length > 0 ? attachedImages : undefined,
+        context.toolIntegrationMode,
+        context.defaultTargetSession,
+        userSkillsContext,
       );
     } else {
       // Fallback: spawn as raw process
       await runExternalAgentTurn(
         agentConfig,
-        trimmed,
+        userSkillsContext ? `${userSkillsContext}\n\nUser request:\n${trimmed}` : trimmed,
         {
           onTextDelta: (text: string) => {
             updateLastMessage(sessionId, msg => ({ ...msg, content: msg.content + text }));
@@ -658,6 +737,11 @@ export function useAIChatStreaming({
     attachments?: ChatMessageAttachment[],
   ) => {
     const bridge = getNetcattyBridge();
+    const userSkillsContext = await resolveUserSkillsContext(
+      bridge,
+      trimmed,
+      context.selectedUserSkillSlugs,
+    );
     const getExecutorContext = context.getExecutorContext ?? (() => ({
       sessions: context.terminalSessions,
       workspaceId: context.scopeType === 'workspace' ? context.scopeTargetId : undefined,
@@ -680,10 +764,12 @@ export function useAIChatStreaming({
         username: s.username,
         protocol: s.protocol,
         shellType: s.shellType,
+        deviceType: s.deviceType,
         connected: s.connected,
       })),
       permissionMode: context.globalPermissionMode,
       webSearchEnabled: isWebSearchReady(context.webSearchConfig),
+      userSkillsContext,
     });
 
     // Guard: activeProvider must exist for Catty agent path
@@ -804,7 +890,7 @@ export function useAIChatStreaming({
         sdkMessages.push({ role: 'user', content: trimmed });
       }
 
-      await processCattyStream(sessionId, model, systemPrompt, tools, sdkMessages, abortController.signal, assistantMsgId);
+      await processCattyStream(sessionId, model, systemPrompt, tools, sdkMessages, abortController.signal, assistantMsgId, context.activeProvider?.advancedParams);
     } catch (err) {
       console.error('[Catty] streamText error:', err);
       reportStreamError(sessionId, abortController.signal, err);

components/ai/sessionHistoryLayout.test.ts

@@ -0,0 +1,15 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+  SESSION_HISTORY_ROW_CLASSNAMES,
+} from "./sessionHistoryLayout.ts";
+
+test("session history row keeps metadata pinned to the end while title truncates", () => {
+  assert.match(SESSION_HISTORY_ROW_CLASSNAMES.row, /\bgrid\b/);
+  assert.ok(SESSION_HISTORY_ROW_CLASSNAMES.row.includes('grid-cols-[minmax(0,1fr)_auto]'));
+  assert.match(SESSION_HISTORY_ROW_CLASSNAMES.title, /\btruncate\b/);
+  assert.match(SESSION_HISTORY_ROW_CLASSNAMES.title, /\bmin-w-0\b/);
+  assert.match(SESSION_HISTORY_ROW_CLASSNAMES.meta, /\bjustify-self-end\b/);
+  assert.match(SESSION_HISTORY_ROW_CLASSNAMES.meta, /\bshrink-0\b/);
+});

components/ai/sessionHistoryLayout.ts

@@ -0,0 +1,7 @@
+export const SESSION_HISTORY_ROW_CLASSNAMES = {
+  row: 'w-full grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 py-2.5 border-b border-border/20 text-left transition-colors cursor-pointer group',
+  title: 'text-[13px] truncate min-w-0',
+  meta: 'flex items-center gap-2 justify-self-end shrink-0',
+  time: 'text-[12px] text-muted-foreground/50 whitespace-nowrap',
+  deleteButton: 'opacity-0 group-hover:opacity-100 p-0.5 hover:text-destructive transition-all cursor-pointer shrink-0',
+} as const;

components/ai/sessionScopeMatch.test.ts

@@ -0,0 +1,101 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import type { AISession } from "../../infrastructure/ai/types.ts";
+import { getSessionScopeMatchRank } from "./sessionScopeMatch.ts";
+
+function createSession(id: string, targetId: string, hostIds: string[]): AISession {
+  return {
+    id,
+    title: id,
+    messages: [],
+    createdAt: 1,
+    updatedAt: 1,
+    agentId: "catty",
+    scope: {
+      type: "terminal",
+      targetId,
+      hostIds,
+    },
+  };
+}
+
+test("host-matched terminal session is excluded when another active terminal already displays it", () => {
+  const session = createSession("session-1", "terminal-other", ["host-a"]);
+
+  assert.equal(
+    getSessionScopeMatchRank(
+      session,
+      "terminal",
+      "terminal-current",
+      ["host-a"],
+      new Set(["session-1"]),
+    ),
+    0,
+  );
+});
+
+test("host-matched terminal session remains resumable when no terminal is displaying it", () => {
+  const session = createSession("session-1", "terminal-closed", ["host-a"]);
+
+  assert.equal(
+    getSessionScopeMatchRank(
+      session,
+      "terminal",
+      "terminal-current",
+      ["host-a"],
+      new Set(["session-other"]),
+    ),
+    1,
+  );
+});
+
+test("ownership is tracked by session id, not scope.targetId", () => {
+  // Session was created in terminal-A but a different terminal (B) is now
+  // displaying it after the user resumed it from history. Opening a third
+  // terminal (C) should not see this session as owned, because the new
+  // ownership check is keyed on session id, not the stale targetId.
+  const session = createSession("session-1", "terminal-A", ["host-a"]);
+
+  assert.equal(
+    getSessionScopeMatchRank(
+      session,
+      "terminal",
+      "terminal-C",
+      ["host-a"],
+      // terminal-B is displaying session-1; pass session-1 as an
+      // active-id so C sees it as in-use
+      new Set(["session-1"]),
+    ),
+    0,
+  );
+});
+
+test("session targeting the current scope is an exact match (rank 2)", () => {
+  const session = createSession("session-1", "terminal-current", ["host-a"]);
+
+  assert.equal(
+    getSessionScopeMatchRank(
+      session,
+      "terminal",
+      "terminal-current",
+      ["host-a"],
+      new Set(),
+    ),
+    2,
+  );
+});
+
+test("scope type mismatch returns 0 regardless of target or hosts", () => {
+  const session = createSession("session-1", "terminal-current", ["host-a"]);
+
+  assert.equal(
+    getSessionScopeMatchRank(
+      session,
+      "workspace",
+      "terminal-current",
+      ["host-a"],
+    ),
+    0,
+  );
+});

components/ai/sessionScopeMatch.ts

@@ -0,0 +1,28 @@
+import type { AISession } from "../../infrastructure/ai/types";
+
+export function getSessionScopeMatchRank(
+  session: AISession,
+  scopeType: "terminal" | "workspace",
+  scopeTargetId?: string,
+  scopeHostIds?: string[],
+  /**
+   * Session ids currently displayed by other terminal scopes. Tracked by
+   * session id rather than `scope.targetId` so that a host-matched session
+   * resumed from a different terminal is still recognised as in-use and
+   * not offered (or cleaned) as if it were orphaned.
+   */
+  activeTerminalSessionIds?: Set<string>,
+): number {
+  if (session.scope.type !== scopeType) return 0;
+  if (session.scope.targetId === scopeTargetId) return 2;
+
+  if (scopeType !== "terminal" || !scopeHostIds?.length || !session.scope.hostIds?.length) {
+    return 0;
+  }
+
+  if (activeTerminalSessionIds?.has(session.id)) {
+    return 0;
+  }
+
+  return session.scope.hostIds.some((hostId) => scopeHostIds.includes(hostId)) ? 1 : 0;
+}

components/ai/userSkillsState.test.ts

@@ -0,0 +1,80 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import {
+  getNextSelectedUserSkillSlugsMap,
+  getReadyUserSkillOptions,
+  pruneSelectedUserSkillSlugsMap,
+} from "./userSkillsState.ts";
+
+test("getReadyUserSkillOptions returns only ready skills and clears invalid payloads", () => {
+  assert.deepEqual(getReadyUserSkillOptions(null), []);
+  assert.deepEqual(getReadyUserSkillOptions({ ok: false }), []);
+  assert.deepEqual(
+    getReadyUserSkillOptions({
+      ok: true,
+      skills: [
+        {
+          id: "alpha",
+          slug: "alpha",
+          name: "Alpha",
+          description: "Alpha helper",
+          status: "ready",
+        },
+        {
+          id: "beta",
+          slug: "beta",
+          name: "Beta",
+          description: "Beta helper",
+          status: "warning",
+        },
+      ],
+    }),
+    [
+      {
+        id: "alpha",
+        slug: "alpha",
+        name: "Alpha",
+        description: "Alpha helper",
+      },
+    ],
+  );
+});
+
+test("pruneSelectedUserSkillSlugsMap removes stale slugs and empty scopes", () => {
+  assert.deepEqual(
+    pruneSelectedUserSkillSlugsMap(
+      {
+        "terminal:1": ["alpha", "missing"],
+        "workspace:1": ["missing"],
+      },
+      [
+        {
+          id: "alpha",
+          slug: "alpha",
+          name: "Alpha",
+          description: "Alpha helper",
+        },
+      ],
+    ),
+    {
+      "terminal:1": ["alpha"],
+    },
+  );
+});
+
+test("getNextSelectedUserSkillSlugsMap preserves selections when refresh fails", () => {
+  const selected = {
+    "terminal:1": ["alpha", "missing"],
+    "workspace:1": ["beta"],
+  };
+
+  assert.equal(
+    getNextSelectedUserSkillSlugsMap(selected, null),
+    selected,
+  );
+  assert.equal(
+    getNextSelectedUserSkillSlugsMap(selected, { ok: false }),
+    selected,
+  );
+});

components/ai/userSkillsState.ts

@@ -0,0 +1,73 @@
+export interface UserSkillStatusItemLike {
+  id: string;
+  slug: string;
+  name: string;
+  description: string;
+  status: "ready" | "warning";
+}
+
+export interface UserSkillsStatusLike {
+  ok: boolean;
+  skills?: UserSkillStatusItemLike[];
+}
+
+export interface UserSkillOption {
+  id: string;
+  slug: string;
+  name: string;
+  description: string;
+}
+
+export function getReadyUserSkillOptions(
+  status: UserSkillsStatusLike | null | undefined,
+): UserSkillOption[] {
+  if (!status?.ok || !Array.isArray(status.skills)) return [];
+
+  return status.skills
+    .filter((skill) => skill.status === "ready" && typeof skill.slug === "string" && skill.slug.length > 0)
+    .map((skill) => ({
+      id: skill.id,
+      slug: skill.slug,
+      name: skill.name,
+      description: skill.description,
+    }));
+}
+
+export function pruneSelectedUserSkillSlugsMap(
+  selectedByScope: Record<string, string[]>,
+  options: UserSkillOption[],
+): Record<string, string[]> {
+  const validSlugs = new Set(options.map((option) => option.slug));
+  let changed = false;
+  const nextEntries: Array<[string, string[]]> = [];
+
+  for (const [scopeKey, slugs] of Object.entries(selectedByScope)) {
+    const filteredSlugs = slugs.filter((slug) => validSlugs.has(slug));
+    if (filteredSlugs.length !== slugs.length) changed = true;
+    if (filteredSlugs.length > 0) {
+      nextEntries.push([scopeKey, filteredSlugs]);
+    } else if (slugs.length > 0) {
+      changed = true;
+    }
+  }
+
+  if (!changed) {
+    return selectedByScope;
+  }
+
+  return Object.fromEntries(nextEntries);
+}
+
+export function getNextSelectedUserSkillSlugsMap(
+  selectedByScope: Record<string, string[]>,
+  status: UserSkillsStatusLike | null | undefined,
+): Record<string, string[]> {
+  if (!status?.ok || !Array.isArray(status.skills)) {
+    return selectedByScope;
+  }
+
+  return pruneSelectedUserSkillSlugsMap(
+    selectedByScope,
+    getReadyUserSkillOptions(status),
+  );
+}

components/host-details/ChainPanel.tsx

@@ -2,14 +2,15 @@
  * Host Chain Sub-Panel
  * Panel for configuring SSH jump host chain
  */
-import { ArrowDown,Plus,X } from 'lucide-react';
-import React from 'react';
+import { ArrowDown,Plus,Search,X } from 'lucide-react';
+import React, { useMemo, useState } from 'react';
 import { useI18n } from '../../application/i18n/I18nProvider';
 import { Host } from '../../types';
 import { DistroAvatar } from '../DistroAvatar';
-import { AsidePanel } from '../ui/aside-panel';
+import { AsidePanel, type AsidePanelLayout } from '../ui/aside-panel';
 import { Button } from '../ui/button';
 import { Card } from '../ui/card';
+import { Input } from '../ui/input';
 import { ScrollArea } from '../ui/scroll-area';
 
 export interface ChainPanelProps {
@@ -23,6 +24,7 @@ export interface ChainPanelProps {
     onClearChain: () => void;
     onBack: () => void;
     onCancel: () => void;
+    layout?: AsidePanelLayout;
 }
 
 export const ChainPanel: React.FC<ChainPanelProps> = ({
@@ -36,8 +38,17 @@ export const ChainPanel: React.FC<ChainPanelProps> = ({
     onClearChain,
     onBack,
     onCancel,
+    layout = 'overlay',
 }) => {
     const { t } = useI18n();
+    const [searchQuery, setSearchQuery] = useState('');
+    const filteredHosts = useMemo(() => {
+        if (!searchQuery.trim()) return availableHostsForChain;
+        const q = searchQuery.toLowerCase();
+        return availableHostsForChain.filter(
+            (host) => host.label.toLowerCase().includes(q) || host.hostname.toLowerCase().includes(q)
+        );
+    }, [availableHostsForChain, searchQuery]);
     return (
         <AsidePanel
             open={true}
@@ -45,6 +56,7 @@ export const ChainPanel: React.FC<ChainPanelProps> = ({
             title={t('hostDetails.chain.title')}
             showBackButton={true}
             onBack={onBack}
+            layout={layout}
             actions={
                 <Button size="sm" onClick={onBack}>
                     {t('common.save')}
@@ -52,16 +64,7 @@ export const ChainPanel: React.FC<ChainPanelProps> = ({
             }
         >
             <ScrollArea className="flex-1">
-                <div className="p-4 space-y-4">
-                    <Card className="p-3 space-y-3 bg-card border-border/80">
-                        <p className="text-xs text-muted-foreground">
-                            {t('hostDetails.chain.desc', { host: formLabel || formHostname })}
-                        </p>
-                        <Button className="w-full h-10" onClick={() => { }}>
-                            <Plus size={14} className="mr-2" /> {t('hostDetails.chain.addHost')}
-                        </Button>
-                    </Card>
-
+                <div className="p-4 space-y-4 w-0 min-w-full">
                     {/* Chain visualization */}
                     <div className="space-y-2">
                         {chainedHosts.map((host, index) => (
@@ -73,7 +76,7 @@ export const ChainPanel: React.FC<ChainPanelProps> = ({
                                 )}
                                 <div className="flex items-center gap-2 p-2 rounded-lg border border-border/60 bg-card">
                                     <DistroAvatar host={host} fallback={host.label.slice(0, 2).toUpperCase()} className="h-8 w-8" />
-                                    <span className="text-sm font-medium flex-1">{host.label || host.hostname}</span>
+                                    <span className="text-sm font-medium flex-1 min-w-0 truncate">{host.label || host.hostname}</span>
                                     <Button
                                         variant="ghost"
                                         size="icon"
@@ -110,11 +113,20 @@ export const ChainPanel: React.FC<ChainPanelProps> = ({
                     {availableHostsForChain.length > 0 && (
                         <Card className="p-3 bg-card border-border/80">
                             <p className="text-xs font-semibold text-muted-foreground mb-2">{t('hostDetails.chain.availableHosts')}</p>
+                            <div className="relative mb-2">
+                                <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
+                                <Input
+                                    value={searchQuery}
+                                    onChange={(e) => setSearchQuery(e.target.value)}
+                                    placeholder={t('common.searchPlaceholder')}
+                                    className="h-8 pl-8 text-sm"
+                                />
+                            </div>
                             <div className="space-y-1">
-                                {availableHostsForChain.map((host) => (
+                                {filteredHosts.map((host) => (
                                     <button
                                         key={host.id}
-                                        className="w-full flex items-center gap-2 p-2 rounded-md hover:bg-secondary transition-colors text-left"
+                                        className="w-full flex items-center gap-2 p-2 rounded-md hover:bg-secondary transition-colors text-left overflow-hidden"
                                         onClick={() => onAddHost(host.id)}
                                     >
                                         <DistroAvatar host={host} fallback={host.label.slice(0, 2).toUpperCase()} className="h-8 w-8" />