chore(deps): bump fast-xml-parser and @aws-sdk/xml-builder

Closes #770

.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',
@@ -233,9 +248,9 @@ const en: Messages = {
   'settings.appearance.themeColor.dark': 'Dark palette',
   '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',
@@ -247,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',
@@ -289,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.',
@@ -311,6 +334,9 @@ const en: Messages = {
   'settings.terminal.behavior.scrollOnPaste': 'Scroll on paste',
   'settings.terminal.behavior.scrollOnPaste.desc':
     'Scroll terminal to bottom when pasting text',
+  'settings.terminal.behavior.smoothScrolling': 'Smooth scrolling',
+  'settings.terminal.behavior.smoothScrolling.desc':
+    'Animate terminal viewport scrolling instead of jumping instantly',
   'settings.terminal.behavior.linkModifier': 'Link modifier key',
   'settings.terminal.behavior.linkModifier.desc': 'Hold this key to click on links in terminal',
   'settings.terminal.behavior.linkModifier.none': 'None (click directly)',
@@ -321,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.',
@@ -328,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',
@@ -346,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',
@@ -399,13 +454,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',
@@ -439,8 +535,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',
@@ -464,6 +576,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',
@@ -473,6 +589,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.',
 
@@ -598,6 +715,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',
@@ -614,8 +733,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',
@@ -636,6 +768,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',
@@ -655,6 +794,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',
@@ -709,6 +851,7 @@ const en: Messages = {
   'sftp.upload.phase.compressed': 'Compressed',
 
   // SFTP File Opener
+  'sftp.context.copyPath': 'Copy file path',
   'sftp.context.openWith': 'Open with...',
   'sftp.context.edit': 'Edit',
   'sftp.context.preview': 'Preview',
@@ -745,6 +888,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',
@@ -773,6 +925,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}',
 
@@ -818,6 +977,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',
@@ -883,6 +1044,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',
@@ -891,9 +1060,12 @@ const en: Messages = {
   'hostDetails.password.save': 'Save password',
   'hostDetails.identity.suggestions': 'Identities',
   'hostDetails.identity.missing': 'Identity not found',
-  'hostDetails.credential.keyCertificate': 'Key, Certificate',
+  'hostDetails.credential.keyCertificate': 'Key, Certificate, Local Key File',
   'hostDetails.credential.key': 'Key',
   'hostDetails.credential.certificate': 'Certificate',
+  'hostDetails.credential.localKeyFile': 'Local Key File',
+  'hostDetails.credential.localKeyFilePlaceholder': '~/.ssh/id_ed25519',
+  'hostDetails.credential.browseKeyFile': 'Browse...',
   'hostDetails.credential.missing': 'Credential not found',
   'hostDetails.keys.search': 'Search keys...',
   'hostDetails.keys.empty': 'No keys available',
@@ -904,10 +1076,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',
@@ -1018,7 +1196,7 @@ const en: Messages = {
   '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',
@@ -1074,6 +1252,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',
@@ -1115,8 +1294,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',
@@ -1246,6 +1431,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',
@@ -1413,6 +1639,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 *',
@@ -1512,6 +1741,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',
@@ -1532,10 +1762,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',
@@ -1578,16 +1805,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:',
@@ -1598,7 +1833,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',
@@ -1611,10 +1845,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.',
@@ -1669,6 +1930,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.',
@@ -1691,7 +1953,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',
@@ -1701,7 +1963,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': '发现新版本',
@@ -216,9 +231,10 @@ const zhCN: Messages = {
   'settings.appearance.themeColor.light': '浅色主题',
   'settings.appearance.themeColor.dark': '深色主题',
   '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': '界面字体',
@@ -251,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': '刚刚',
@@ -291,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': '已取消托管分组',
@@ -316,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': '该主机未保存密码',
@@ -325,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': '保存主机以快速连接到你的服务器、虚拟机和容器。',
 
@@ -425,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': '修改时间',
@@ -441,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': '删除',
@@ -463,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': '文件名编码',
@@ -482,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': '上传失败',
@@ -514,6 +617,8 @@ const zhCN: Messages = {
   'qs.search.placeholder': '搜索主机或标签页',
   'qs.jumpTo': '跳转到',
   'qs.localTerminal': '本地终端',
+  'qs.localShells': '本地 Shell',
+  'qs.default': '默认',
 
   // Select Host panel
   'selectHost.title': '选择主机',
@@ -575,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': '密码',
@@ -583,9 +696,12 @@ const zhCN: Messages = {
   'hostDetails.password.save': '保存密码',
   'hostDetails.identity.suggestions': '身份',
   'hostDetails.identity.missing': '身份不存在',
-  'hostDetails.credential.keyCertificate': '密钥 / 证书',
+  'hostDetails.credential.keyCertificate': '密钥 / 证书 / 本地密钥',
   'hostDetails.credential.key': '密钥',
   'hostDetails.credential.certificate': '证书',
+  'hostDetails.credential.localKeyFile': '本地密钥文件',
+  'hostDetails.credential.localKeyFilePlaceholder': '~/.ssh/id_ed25519',
+  'hostDetails.credential.browseKeyFile': '浏览…',
   'hostDetails.credential.missing': '凭据不存在',
   'hostDetails.keys.search': '搜索密钥…',
   'hostDetails.keys.empty': '暂无密钥',
@@ -596,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': '直连',
@@ -681,7 +803,7 @@ const zhCN: Messages = {
   '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': '启用广播模式',
@@ -737,6 +859,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': '垂直分屏',
@@ -779,8 +902,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': '自定义主题',
@@ -909,6 +1038,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': '新的主密钥',
@@ -1050,6 +1220,7 @@ const zhCN: Messages = {
   'sftp.upload.phase.compressed': '压缩传输',
 
   // SFTP File Opener
+  'sftp.context.copyPath': '复制文件路径',
   'sftp.context.openWith': '打开方式...',
   'sftp.context.edit': '编辑',
   'sftp.context.preview': '预览',
@@ -1086,6 +1257,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': '扩展名',
@@ -1114,6 +1294,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}',
 
@@ -1161,6 +1348,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': '键盘',
@@ -1200,6 +1389,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 转义序列访问本地剪贴板。',
@@ -1219,6 +1414,8 @@ const zhCN: Messages = {
   'settings.terminal.behavior.scrollOnKeyPress.desc': '按键（例如 Enter）时将终端滚动到底部',
   'settings.terminal.behavior.scrollOnPaste': '粘贴时自动滚动',
   'settings.terminal.behavior.scrollOnPaste.desc': '粘贴文本时将终端滚动到底部',
+  'settings.terminal.behavior.smoothScrolling': '平滑滚动',
+  'settings.terminal.behavior.smoothScrolling.desc': '滚动终端视口时使用平滑动画',
   'settings.terminal.behavior.linkModifier': '链接修饰键',
   'settings.terminal.behavior.linkModifier.desc': '按住此键再点击终端中的链接',
   'settings.terminal.behavior.linkModifier.none': '无（直接点击）',
@@ -1229,6 +1426,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）。留空使用系统默认。',
@@ -1236,6 +1441,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': '用户主目录',
@@ -1254,9 +1464,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': '键盘快捷键',
@@ -1428,6 +1647,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': '私钥 *',
@@ -1527,6 +1749,7 @@ const zhCN: Messages = {
   'serial.field.localEchoDesc': '本地回显输入字符（用于没有远程回显的设备）',
   'serial.field.lineMode': '行模式',
   'serial.field.lineModeDesc': '缓冲输入，按回车后发送（而不是逐字符发送）',
+  'serial.field.charset': '字符编码',
   'serial.connectionError': '连接串口失败',
   'serial.field.baudRatePlaceholder': '选择或输入波特率...',
   'serial.field.baudRateEmpty': '输入自定义波特率',
@@ -1547,10 +1770,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 密钥密码',
@@ -1593,16 +1813,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': '路径：',
@@ -1613,7 +1841,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',
@@ -1626,10 +1853,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 → 提供商** 添加并启用一个提供商。',
@@ -1684,6 +1938,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 开发进程，然后重试。',
@@ -1706,7 +1961,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': '自主 - 自由执行',
@@ -1716,7 +1971,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

@@ -7,10 +7,12 @@ export interface SftpPane {
   loading: boolean;
   reconnecting: boolean;
   error: string | null;
+  connectionLogs: string[];
   selectedFiles: Set<string>;
   filter: string;
   filenameEncoding: SftpFilenameEncoding;
   showHiddenFiles: boolean;
+  transferMutationToken: number;
 }
 
 // Multi-tab state for left and right sides
@@ -33,10 +35,12 @@ export const createEmptyPane = (
   loading: false,
   reconnecting: false,
   error: null,
+  connectionLogs: [],
   selectedFiles: new Set(),
   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.
@@ -159,6 +161,7 @@ export const useSftpConnections = ({
           loading: true,
           reconnecting: false,
           error: null,
+          connectionLogs: [],
           filenameEncoding, // Reset encoding for new connection
         }));
 
@@ -213,13 +216,57 @@ export const useSftpConnections = ({
           loading: true,
           reconnecting: prev.reconnecting,
           error: null,
+          connectionLogs: [],
           files: prev.reconnecting ? prev.files : (sharedHostCache?.files ?? []),
           filenameEncoding, // Reset encoding for new connection
         }));
 
+        // Subscribe to SFTP connection progress events for auth logging
+        const sftpSessionId = `sftp-${connectionId}`;
+        let unsubSftpProgress: (() => void) | undefined;
+        const bridge = netcattyBridge.get();
+        if (bridge?.onSftpConnectionProgress) {
+          unsubSftpProgress = bridge.onSftpConnectionProgress((sid, label, status, detail) => {
+            if (sid !== sftpSessionId) return;
+            let logLine: string;
+            switch (status) {
+              case 'connecting':
+                logLine = `Connecting to ${label}...`;
+                break;
+              case 'authenticating':
+                logLine = `${label} - Key exchange complete`;
+                break;
+              case 'auth-attempt':
+                if (detail?.endsWith('rejected')) {
+                  logLine = `${label} - ✗ ${detail}`;
+                } else if (detail === 'all methods exhausted') {
+                  logLine = `${label} - ✗ All authentication methods exhausted`;
+                } else if (detail === 'waiting for user input...' || detail === 'user responded') {
+                  logLine = `${label} - ${detail}`;
+                } else {
+                  logLine = `${label} - Trying ${detail}...`;
+                }
+                break;
+              case 'connected':
+                logLine = `${label} - Connected`;
+                break;
+              case 'error':
+                logLine = `${label} - Error${detail ? `: ${detail}` : ''}`;
+                break;
+              default:
+                logLine = `${label} - ${status}${detail ? `: ${detail}` : ''}`;
+            }
+            // Only update if this is still the active request (avoids stale logs leaking)
+            if (navSeqRef.current[side] !== connectRequestId) return;
+            updateTab(side, activeTabId, (prev) => ({
+              ...prev,
+              connectionLogs: [...prev.connectionLogs, logLine],
+            }));
+          });
+        }
+
         try {
           const credentials = getHostCredentials(host);
-          const bridge = netcattyBridge.get();
           const openSftp = bridge?.openSftp;
           if (!openSftp) throw new Error("SFTP bridge unavailable");
 
@@ -407,6 +454,7 @@ export const useSftpConnections = ({
             files,
             loading: false,
             reconnecting: false,
+            connectionLogs: [], // Clear after successful connect to avoid replay during navigation
           }));
         } catch (err) {
           if (navSeqRef.current[side] !== connectRequestId) return;
@@ -420,10 +468,16 @@ 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,
           }));
+        } finally {
+          unsubSftpProgress?.();
         }
       }
     },
@@ -448,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/useSftpDirectoryListing.ts

@@ -49,6 +49,7 @@ export const useSftpDirectoryListing = () => {
           sizeFormatted: formatFileSize(size),
           lastModified,
           lastModifiedFormatted: formatDate(lastModified),
+          permissions: f.permissions,
           linkTarget: f.linkTarget as "file" | "directory" | null | undefined,
         };
       });

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/useSftpHostCredentials.ts

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import type { Host, Identity, SSHKey } from "../../../domain/models";
+import { isEncryptedCredentialPlaceholder, sanitizeCredentialValue } from "../../../domain/credentials";
 import { resolveHostAuth } from "../../../domain/sshAuth";
 
 interface UseSftpHostCredentialsParams {
@@ -24,22 +25,32 @@ export const useSftpHostCredentials = ({
           host: host.proxyConfig.host,
           port: host.proxyConfig.port,
           username: host.proxyConfig.username,
-          password: host.proxyConfig.password,
+          password: sanitizeCredentialValue(host.proxyConfig.password),
         }
         : undefined;
-
       let jumpHosts: NetcattyJumpHost[] | undefined;
       if (host.hostChain?.hostIds && host.hostChain.hostIds.length > 0) {
         jumpHosts = host.hostChain.hostIds
           .map((hostId) => hosts.find((h) => h.id === hostId))
           .filter((h): h is Host => !!h)
-          .map((jumpHost) => {
+          .map((jumpHost, index) => {
             const jumpAuth = resolveHostAuth({
               host: jumpHost,
               keys,
               identities,
             });
             const jumpKey = jumpAuth.key;
+            const hasConfiguredJumpProxyEndpoint =
+              index === 0 &&
+              !!(jumpHost.proxyConfig?.host && jumpHost.proxyConfig?.port);
+            if (
+              hasConfiguredJumpProxyEndpoint &&
+              jumpHost.proxyConfig?.username &&
+              isEncryptedCredentialPlaceholder(jumpHost.proxyConfig.password) &&
+              !sanitizeCredentialValue(jumpHost.proxyConfig.password)
+            ) {
+              throw new Error(`Proxy credentials for jump host "${jumpHost.label || jumpHost.hostname}" cannot be decrypted on this device. Open host settings and re-enter the proxy password.`);
+            }
             return {
               hostname: jumpHost.hostname,
               port: jumpHost.port || 22,
@@ -52,9 +63,23 @@ export const useSftpHostCredentials = ({
               keyId: jumpAuth.keyId,
               keySource: jumpKey?.source,
               label: jumpHost.label,
+              proxy: jumpHost.proxyConfig?.host && jumpHost.proxyConfig?.port
+                ? {
+                  type: jumpHost.proxyConfig.type,
+                  host: jumpHost.proxyConfig.host,
+                  port: jumpHost.proxyConfig.port,
+                  username: jumpHost.proxyConfig.username,
+                  password: sanitizeCredentialValue(jumpHost.proxyConfig.password),
+                }
+                : undefined,
+              identityFilePaths: jumpHost.identityFilePaths,
             };
           });
       }
+      const usesTargetProxyForFirstHop = !!proxyConfig && !jumpHosts?.[0]?.proxy;
+      if (usesTargetProxyForFirstHop && host.proxyConfig?.username && isEncryptedCredentialPlaceholder(host.proxyConfig.password) && !proxyConfig?.password) {
+        throw new Error("Proxy credentials cannot be decrypted on this device. Open host settings and re-enter the proxy password.");
+      }
 
       return {
         hostname: host.hostname,
@@ -70,6 +95,7 @@ export const useSftpHostCredentials = ({
         proxy: proxyConfig,
         jumpHosts: jumpHosts && jumpHosts.length > 0 ? jumpHosts : undefined,
         sudo: host.sftpSudo,
+        identityFilePaths: host.identityFilePaths,
       };
     },
     [hosts, identities, keys],

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/sftp/utils.ts

@@ -48,7 +48,7 @@ export const joinPath = (base: string, name: string): string => {
     return `${normalizedBase}\\${name}`;
   }
   if (base === "/") return `/${name}`;
-  return `${base}/${name}`;
+  return `${base.replace(/\/+$/, "")}/${name}`;
 };
 
 export const getParentPath = (path: string): string => {

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,
@@ -12,12 +13,16 @@ import {
   STORAGE_KEY_AI_COMMAND_TIMEOUT,
   STORAGE_KEY_AI_MAX_ITERATIONS,
   STORAGE_KEY_AI_SESSIONS,
+  STORAGE_KEY_AI_ACTIVE_SESSION_MAP,
   STORAGE_KEY_AI_AGENT_MODEL_MAP,
   STORAGE_KEY_AI_WEB_SEARCH,
 } from '../../infrastructure/config/storageKeys';
 import type {
+  AIDraft,
+  AIPanelView,
   AISession,
   AIPermissionMode,
+  AIToolIntegrationMode,
   ProviderConfig,
   HostAIPermission,
   ExternalAgentConfig,
@@ -26,10 +31,45 @@ 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 } }));
 }
 
 function cleanupAcpSessions(sessionIds: string[]) {
@@ -40,6 +80,111 @@ 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)
+    ?? [];
+
+  // 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 of Object.keys(activeSessionIdMap)) {
+    if (isScopeKeyActive(scopeKey, activeTargetIds)) continue;
+    delete nextActiveSessionIdMap[scopeKey];
+    activeSessionMapChanged = true;
+  }
+
+  if (activeSessionMapChanged) {
+    setLatestAIActiveSessionMapSnapshot(nextActiveSessionIdMap);
+    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);
+  }
+}
+
 
 /** Maximum number of sessions to keep in localStorage. */
 const MAX_STORED_SESSIONS = 50;
@@ -66,6 +211,50 @@ 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;
+}
+
+function setLatestAIActiveSessionMapSnapshot(activeSessionIdMap: Record<string, string | null>) {
+  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[]>(() =>
@@ -84,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) ?? []
   );
@@ -117,7 +310,17 @@ export function useAIState() {
     sessionsRef.current = sessions;
   }, [sessions]);
   // Per-scope active session: keyed by `${scopeType}:${scopeTargetId}`
-  const [activeSessionIdMap, setActiveSessionIdMapRaw] = useState<Record<string, string | null>>({});
+  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>>(() =>
@@ -129,8 +332,77 @@ export function useAIState() {
     localStorageAdapter.read<WebSearchConfig>(STORAGE_KEY_AI_WEB_SEARCH) ?? null
   );
 
+  useEffect(() => {
+    setLatestAISessionsSnapshot(sessions);
+  }, [sessions]);
+
+  useEffect(() => {
+    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) as Array<[string, string | null]>) {
+      const nextSessionId = sessionId && validSessionIds.has(sessionId) ? sessionId : null;
+      nextActiveSessionIdMap[scopeKey] = nextSessionId;
+      if (nextSessionId !== sessionId) {
+        changed = true;
+      }
+    }
+
+    if (!changed) return;
+
+    setLatestAIActiveSessionMapSnapshot(nextActiveSessionIdMap);
+    localStorageAdapter.write(STORAGE_KEY_AI_ACTIVE_SESSION_MAP, nextActiveSessionIdMap);
+    setActiveSessionIdMapRaw(nextActiveSessionIdMap);
+    emitAIStateChanged(STORAGE_KEY_AI_ACTIVE_SESSION_MAP);
+  }, [sessions, activeSessionIdMap]);
+
   const setActiveSessionId = useCallback((scopeKey: string, id: string | null) => {
-    setActiveSessionIdMapRaw(prev => ({ ...prev, [scopeKey]: id }));
+    let nextActiveSessionIdMap: Record<string, string | null> | null = null;
+
+    setActiveSessionIdMapRaw(prev => {
+      if (prev[scopeKey] === id) {
+        return prev;
+      }
+
+      const next = { ...prev, [scopeKey]: id };
+      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) => {
@@ -185,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;
@@ -251,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)) {
@@ -303,9 +591,22 @@ export function useAIState() {
             setHostPermissionsRaw(perms ?? []);
             break;
           }
+          case STORAGE_KEY_AI_SESSIONS: {
+            const nextSessions = localStorageAdapter.read<AISession[]>(STORAGE_KEY_AI_SESSIONS) ?? [];
+            setLatestAISessionsSnapshot(nextSessions);
+            setSessionsRaw(nextSessions);
+            break;
+          }
           case STORAGE_KEY_AI_AGENT_MODEL_MAP:
             setAgentModelMapRaw(localStorageAdapter.read<Record<string, string>>(STORAGE_KEY_AI_AGENT_MODEL_MAP) ?? {});
             break;
+          case STORAGE_KEY_AI_ACTIVE_SESSION_MAP: {
+            const nextActiveSessionIdMap =
+              localStorageAdapter.read<Record<string, string | null>>(STORAGE_KEY_AI_ACTIVE_SESSION_MAP) ?? {};
+            setLatestAIActiveSessionMapSnapshot(nextActiveSessionIdMap);
+            setActiveSessionIdMapRaw(nextActiveSessionIdMap);
+            break;
+          }
           case STORAGE_KEY_AI_WEB_SEARCH:
             setWebSearchConfigRaw(localStorageAdapter.read<WebSearchConfig>(STORAGE_KEY_AI_WEB_SEARCH) ?? null);
             break;
@@ -315,7 +616,39 @@ export function useAIState() {
       }
     };
     window.addEventListener('storage', handleStorage);
-    return () => window.removeEventListener('storage', handleStorage);
+    const handleLocalStateChanged = (event: Event) => {
+      const key = (event as CustomEvent<{ key?: string }>).detail?.key;
+      if (!key) return;
+      switch (key) {
+        case STORAGE_KEY_AI_SESSIONS:
+          setSessionsRaw(
+            latestAISessionsSnapshot
+              ?? localStorageAdapter.read<AISession[]>(STORAGE_KEY_AI_SESSIONS)
+              ?? [],
+          );
+          return;
+        case STORAGE_KEY_AI_ACTIVE_SESSION_MAP:
+          setActiveSessionIdMapRaw(
+            latestAIActiveSessionMapSnapshot
+              ?? localStorageAdapter.read<Record<string, string | null>>(STORAGE_KEY_AI_ACTIVE_SESSION_MAP)
+              ?? {},
+          );
+          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);
+      }
+    };
+    window.addEventListener(AI_STATE_CHANGED_EVENT, handleLocalStateChanged);
+    return () => {
+      window.removeEventListener('storage', handleStorage);
+      window.removeEventListener(AI_STATE_CHANGED_EVENT, handleLocalStateChanged);
+    };
   }, []);
 
   // ── Sync initial safety settings to MCP Server on mount ──
@@ -327,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 ──
@@ -375,6 +717,7 @@ export function useAIState() {
     };
     setSessionsRaw(prev => {
       const next = [session, ...prev];
+      setLatestAISessionsSnapshot(next);
       persistSessions(next);
       return next;
     });
@@ -391,12 +734,19 @@ export function useAIState() {
     }
     setSessionsRaw(prev => {
       const next = prev.filter(s => s.id !== sessionId);
+      setLatestAISessionsSnapshot(next);
       persistSessions(next);
       return next;
     });
     if (scopeKey) {
       setActiveSessionIdMapRaw(prev => {
-        if (prev[scopeKey] === sessionId) return { ...prev, [scopeKey]: null };
+        if (prev[scopeKey] === sessionId) {
+          const next = { ...prev, [scopeKey]: null };
+          setLatestAIActiveSessionMapSnapshot(next);
+          localStorageAdapter.write(STORAGE_KEY_AI_ACTIVE_SESSION_MAP, next);
+          emitAIStateChanged(STORAGE_KEY_AI_ACTIVE_SESSION_MAP);
+          return next;
+        }
         return prev;
       });
     }
@@ -415,12 +765,19 @@ export function useAIState() {
       const next = prev.filter(s => {
         return !(s.scope.type === scopeType && s.scope.targetId === targetId);
       });
+      setLatestAISessionsSnapshot(next);
       persistSessions(next);
       return next;
     });
     const scopeKey = `${scopeType}:${targetId}`;
     setActiveSessionIdMapRaw(prev => {
-      if (prev[scopeKey] != null) return { ...prev, [scopeKey]: null };
+      if (prev[scopeKey] != null) {
+        const next = { ...prev, [scopeKey]: null };
+        setLatestAIActiveSessionMapSnapshot(next);
+        localStorageAdapter.write(STORAGE_KEY_AI_ACTIVE_SESSION_MAP, next);
+        emitAIStateChanged(STORAGE_KEY_AI_ACTIVE_SESSION_MAP);
+        return next;
+      }
       return prev;
     });
   }, [persistSessions]);
@@ -428,6 +785,7 @@ export function useAIState() {
   const updateSessionTitle = useCallback((sessionId: string, title: string) => {
     setSessionsRaw(prev => {
       const next = prev.map(s => s.id === sessionId ? { ...s, title, updatedAt: Date.now() } : s);
+      setLatestAISessionsSnapshot(next);
       persistSessions(next);
       return next;
     });
@@ -440,6 +798,7 @@ export function useAIState() {
           ? { ...s, externalSessionId, updatedAt: Date.now() }
           : s
       ));
+      setLatestAISessionsSnapshot(next);
       debouncedPersistSessions();
       return next;
     });
@@ -463,6 +822,7 @@ export function useAIState() {
         }
         return { ...s, messages: msgs, updatedAt: Date.now() };
       });
+      setLatestAISessionsSnapshot(next);
       debouncedPersistSessions();
       return next;
     });
@@ -476,6 +836,7 @@ export function useAIState() {
         msgs[msgs.length - 1] = updater(msgs[msgs.length - 1]);
         return { ...s, messages: msgs, updatedAt: Date.now() };
       });
+      setLatestAISessionsSnapshot(next);
       debouncedPersistSessions();
       return next;
     });
@@ -491,6 +852,7 @@ export function useAIState() {
         msgs[idx] = updater(msgs[idx]);
         return { ...s, messages: msgs, updatedAt: Date.now() };
       });
+      setLatestAISessionsSnapshot(next);
       debouncedPersistSessions();
       return next;
     });
@@ -503,29 +865,200 @@ export function useAIState() {
     }
     setSessionsRaw(prev => {
       const next = prev.map(s => s.id === sessionId ? { ...s, messages: [], updatedAt: Date.now() } : s);
+      setLatestAISessionsSnapshot(next);
       persistSessions(next);
       return next;
     });
   }, [persistSessions]);
 
-  const cleanupOrphanedSessions = useCallback((activeTargetIds: Set<string>) => {
-    const removedSessionIds = sessionsRef.current
-      .filter(s => s.scope.targetId && !activeTargetIds.has(s.scope.targetId))
-      .map(s => s.id);
-    cleanupAcpSessions(removedSessionIds);
-    setSessionsRaw(prev => {
-      const next = prev.filter(s => {
-        // Keep sessions without a targetId (global scope)
-        if (!s.scope.targetId) return true;
-        // Keep sessions whose target still exists
-        return activeTargetIds.has(s.scope.targetId);
-      });
-      if (next.length !== prev.length) {
-        persistSessions(next);
-      }
+  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;
     });
-  }, [persistSessions]);
+
+    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);
+
+    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 ──
   const addProvider = useCallback((provider: ProviderConfig) => {
@@ -568,6 +1101,8 @@ export function useAIState() {
     // Permission model
     globalPermissionMode,
     setGlobalPermissionMode,
+    toolIntegrationMode,
+    setToolIntegrationMode,
     hostPermissions,
     setHostPermissions,
 
@@ -596,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,27 @@ 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.
+const isRestoreInProgress = (): boolean => {
+  const raw = localStorageAdapter.readNumber(STORAGE_KEY_VAULT_RESTORE_IN_PROGRESS_UNTIL);
+  return typeof raw === 'number' && raw > Date.now();
+};
+
 type SyncTrigger = 'auto' | 'manual';
 
 interface SyncNowOptions {
@@ -56,10 +70,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 +126,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
       snippetPackages: config.snippetPackages,
       portForwardingRules: effectivePFRules,
       knownHosts: effectiveKnownHosts,
+      groupConfigs: config.groupConfigs,
     };
   }, [
     config.hosts,
@@ -97,6 +137,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
     config.snippetPackages,
     config.portForwardingRules,
     config.knownHosts,
+    config.groupConfigs,
   ]);
 
   // Build sync payload
@@ -136,6 +177,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 +247,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 +288,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 +313,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 +546,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 +582,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 +615,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;
@@ -77,6 +77,7 @@ export const getTerminalPassthroughActions = (): Set<string> => {
   return new Set([
     'copy',
     'paste',
+    'pasteSelection',
     'selectAll',
     'clearBuffer',
     'searchTerminal',

application/state/useImmersiveMode.ts

@@ -0,0 +1,214 @@
+/**
+ * Immersive Mode — makes the entire UI chrome adapt colors to match the active terminal's theme.
+ *
+ * Performance strategy:
+ * - All built-in themes' CSS strings are pre-computed at module load (zero cost at switch time)
+ * - Custom/unknown themes are computed lazily and cached
+ * - A single `<style>` tag with `!important` overrides inline CSS variables atomically
+ * - `useLayoutEffect` ensures the update happens before browser paint (no flash)
+ */
+import { useEffect, useLayoutEffect, useRef } from 'react';
+import { TerminalTheme } from '../../domain/models';
+import { TERMINAL_THEMES } from '../../infrastructure/config/terminalThemes';
+import { netcattyBridge } from '../../infrastructure/services/netcattyBridge';
+
+// ---------------------------------------------------------------------------
+// Hex → HSL conversion (returns "H S% L%" without the hsl() wrapper)
+// ---------------------------------------------------------------------------
+
+function hexToHsl(hex: string): string {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+      case g: h = ((b - r) / d + 2) / 6; break;
+      case b: h = ((r - g) / d + 4) / 6; break;
+    }
+  }
+  return `${Math.round(h * 3600) / 10} ${Math.round(s * 1000) / 10}% ${Math.round(l * 1000) / 10}%`;
+}
+
+function adjustLightness(hsl: string, delta: number): string {
+  const parts = hsl.split(/\s+/);
+  const newL = Math.max(0, Math.min(100, parseFloat(parts[2]) + delta));
+  return `${parts[0]} ${parts[1]} ${Math.round(newL * 10) / 10}%`;
+}
+
+function adjustSaturation(hsl: string, factor: number): string {
+  const parts = hsl.split(/\s+/);
+  const newS = Math.max(0, Math.min(100, parseFloat(parts[1]) * factor));
+  return `${parts[0]} ${Math.round(newS * 10) / 10}% ${parts[2]}`;
+}
+
+// ---------------------------------------------------------------------------
+// Build the CSS rule string from a TerminalTheme
+// ---------------------------------------------------------------------------
+
+const CSS_VARS = [
+  'background', 'foreground', 'card', 'card-foreground',
+  'popover', 'popover-foreground', 'primary', 'primary-foreground',
+  'secondary', 'secondary-foreground', 'muted', 'muted-foreground',
+  'accent', 'accent-foreground', 'destructive', 'destructive-foreground',
+  'border', 'input', 'ring',
+] as const;
+
+function buildImmersiveCss(theme: TerminalTheme): string {
+  const bg = hexToHsl(theme.colors.background);
+  const fg = hexToHsl(theme.colors.foreground);
+  const cursor = hexToHsl(theme.colors.cursor);
+  const isDark = theme.type === 'dark';
+
+  const card = adjustLightness(bg, isDark ? 4 : -3);
+  const secondary = adjustLightness(bg, isDark ? 6 : -5);
+  const muted = adjustLightness(bg, isDark ? 10 : -8);
+  const mutedFg = adjustSaturation(adjustLightness(fg, isDark ? -20 : 20), 0.5);
+  const border = adjustLightness(bg, isDark ? 12 : -10);
+  const cursorL = parseFloat(cursor.split(' ')[2] ?? '50');
+  const primaryFg = cursorL > 55 ? '0 0% 0%' : '0 0% 100%';
+
+  const values = [
+    bg, fg, card, fg,         // background, foreground, card, card-foreground
+    card, fg,                 // popover, popover-foreground
+    cursor, primaryFg,        // primary, primary-foreground
+    secondary, fg,            // secondary, secondary-foreground
+    muted, mutedFg,           // muted, muted-foreground
+    cursor, primaryFg,        // accent, accent-foreground
+    '0 70% 50%', '0 0% 100%', // destructive, destructive-foreground
+    border, border, cursor,   // border, input, ring
+  ];
+
+  const rules = CSS_VARS.map((name, i) => `--${name}: ${values[i]} !important`).join('; ');
+  return `:root { ${rules}; }`;
+}
+
+// ---------------------------------------------------------------------------
+// Pre-compute CSS for all built-in themes at module load — O(1) lookup at switch time
+// ---------------------------------------------------------------------------
+
+const cssCache = new Map<string, string>();
+
+// Fingerprint: id + type + 3 key colors (detects in-place edits including dark↔light)
+function themeFingerprint(t: TerminalTheme): string {
+  return `${t.id}\0${t.type}\0${t.colors.background}\0${t.colors.foreground}\0${t.colors.cursor}`;
+}
+
+// Pre-compute built-in themes
+for (const theme of TERMINAL_THEMES) {
+  cssCache.set(themeFingerprint(theme), buildImmersiveCss(theme));
+}
+
+/** Get (or lazily compute & cache) the immersive CSS for a theme. */
+function getImmersiveCss(theme: TerminalTheme): string {
+  const fp = themeFingerprint(theme);
+  let css = cssCache.get(fp);
+  if (!css) {
+    css = buildImmersiveCss(theme);
+    cssCache.set(fp, css);
+  }
+  return css;
+}
+
+// ---------------------------------------------------------------------------
+// Style tag management
+// ---------------------------------------------------------------------------
+
+const STYLE_ID = 'netcatty-immersive-override';
+
+function applyImmersiveStyle(css: string, isDark: boolean, bg: string) {
+  const root = document.documentElement;
+  const targetClass = isDark ? 'dark' : 'light';
+  if (!root.classList.contains(targetClass)) {
+    root.classList.remove('light', 'dark');
+    root.classList.add(targetClass);
+  }
+  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;
+  if (!style) {
+    style = document.createElement('style');
+    style.id = STYLE_ID;
+    document.head.appendChild(style);
+  }
+  style.textContent = css;
+  // Sync native Electron window chrome
+  netcattyBridge.get()?.setTheme?.(isDark ? 'dark' : 'light');
+  netcattyBridge.get()?.setBackgroundColor?.(bg);
+}
+
+function removeImmersiveStyle() {
+  document.getElementById(STYLE_ID)?.remove();
+  delete document.documentElement.dataset.immersiveTheme;
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+export function useImmersiveMode({
+  activeTabId,
+  activeTerminalTheme,
+  restoreOriginalTheme,
+}: {
+  activeTabId: string;
+  activeTerminalTheme: TerminalTheme | null;
+  restoreOriginalTheme: () => void;
+}) {
+  const overrideActiveRef = useRef(false);
+  const appliedFpRef = useRef<string | null>(null);
+  const restoreRef = useRef(restoreOriginalTheme);
+  restoreRef.current = restoreOriginalTheme;
+
+  const isTerminalTab = activeTabId !== 'vault' && activeTabId !== 'sftp' && !activeTabId.startsWith('log-');
+
+  // APPLY: useLayoutEffect — runs before paint, O(1) Map lookup, single DOM write
+  useLayoutEffect(() => {
+    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;
+    }
+  }, [isTerminalTab, activeTerminalTheme]);
+
+  // RESTORE: useEffect — runs after paint, with fade overlay
+  useEffect(() => {
+    if (isTerminalTab && activeTerminalTheme) return;
+    if (!overrideActiveRef.current) return;
+    overrideActiveRef.current = false;
+    appliedFpRef.current = null;
+    const bg = getComputedStyle(document.documentElement).getPropertyValue('--background').trim();
+    const overlay = document.createElement('div');
+    overlay.className = 'immersive-fade-overlay';
+    overlay.style.backgroundColor = `hsl(${bg})`;
+    document.body.appendChild(overlay);
+    removeImmersiveStyle();
+    restoreOriginalTheme();
+    requestAnimationFrame(() => {
+      overlay.classList.add('fade-out');
+      overlay.addEventListener('transitionend', () => overlay.remove(), { once: true });
+    });
+    const fallback = setTimeout(() => { if (overlay.parentNode) overlay.remove(); }, 400);
+    return () => { clearTimeout(fallback); if (overlay.parentNode) overlay.remove(); };
+  }, [isTerminalTab, activeTerminalTheme, restoreOriginalTheme]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      removeImmersiveStyle();
+      appliedFpRef.current = null;
+      if (overrideActiveRef.current) {
+        overrideActiveRef.current = false;
+        restoreRef.current();
+      }
+    };
+  }, []);
+}

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

@@ -3,8 +3,9 @@
  * This should be used at the App level to ensure auto-start happens
  * when the application starts, not when the user navigates to the port forwarding page.
  */
-import { useEffect, useRef } from "react";
-import { Host, PortForwardingRule } from "../../domain/models";
+import { useCallback, useEffect, useRef } from "react";
+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 {
@@ -17,7 +18,9 @@ import { logger } from "../../lib/logger";
 
 export interface UsePortForwardingAutoStartOptions {
   hosts: Host[];
-  keys: { id: string; privateKey: string; passphrase: string }[];
+  keys: SSHKey[];
+  identities: Identity[];
+  groupConfigs: GroupConfig[];
 }
 
 /**
@@ -27,10 +30,39 @@ export interface UsePortForwardingAutoStartOptions {
 export const usePortForwardingAutoStart = ({
   hosts,
   keys,
+  identities,
+  groupConfigs,
 }: UsePortForwardingAutoStartOptions): void => {
   const autoStartExecutedRef = useRef(false);
   const hostsRef = useRef<Host[]>(hosts);
-  const keysRef = useRef<{ id: string; privateKey: string; passphrase: string }[]>(keys);
+  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;
+    seen.add(host.id);
+
+    if (host.identityId) {
+      const identity = identitiesRef.current.find((candidate) => candidate.id === host.identityId);
+      if (!identity) return false;
+      if (identity.keyId && !keysRef.current.some((key) => key.id === identity.keyId)) {
+        return false;
+      }
+    }
+    if (host.identityFileId && !keysRef.current.some((key) => key.id === host.identityFileId)) {
+      return false;
+    }
+
+    const chainIds = host.hostChain?.hostIds || [];
+    for (const chainId of chainIds) {
+      const chainHost = hostsRef.current.find((candidate) => candidate.id === chainId);
+      if (!chainHost) return false;
+      if (!isHostAuthReady(chainHost, seen)) return false;
+    }
+
+    return true;
+  }, []);
 
   // Keep refs in sync
   useEffect(() => {
@@ -41,6 +73,20 @@ export const usePortForwardingAutoStart = ({
     keysRef.current = keys;
   }, [keys]);
 
+  useEffect(() => {
+    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 (
@@ -57,25 +103,37 @@ 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" };
       }
 
-      return startPortForward(rule, host, keysRef.current, onStatusChange, true);
+      const host = resolveEffectiveHost(rawHost);
+      return startPortForward(rule, host, hostsRef.current, keysRef.current, identitiesRef.current, onStatusChange, true);
     };
 
     setReconnectCallback(handleReconnect);
     return () => {
       setReconnectCallback(null);
     };
-  }, []);
+  }, [resolveEffectiveHost]);
 
   // Auto-start rules on app launch
   useEffect(() => {
     if (autoStartExecutedRef.current) return;
     if (hosts.length === 0) return;
 
+    const storedRules = localStorageAdapter.read<PortForwardingRule[]>(
+      STORAGE_KEY_PORT_FORWARDING,
+    ) ?? [];
+    const pendingAutoStartRules = storedRules.filter((rule) => rule.autoStart && rule.hostId);
+    if (pendingAutoStartRules.some((rule) => {
+      const host = hosts.find((candidate) => candidate.id === rule.hostId);
+      return !host || !isHostAuthReady(host);
+    })) {
+      return;
+    }
+
     // Mark as executed immediately to prevent duplicate runs
     // (React StrictMode or dependency changes could cause re-runs)
     autoStartExecutedRef.current = true;
@@ -103,12 +161,15 @@ 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,
+            hosts,
             keys,
+            identities,
             (status, error) => {
               // Update the rule status in storage
               const currentRules = localStorageAdapter.read<PortForwardingRule[]>(
@@ -135,5 +196,5 @@ export const usePortForwardingAutoStart = ({
     };
 
     void runAutoStart();
-  }, [hosts, keys]);
+  }, [hosts, identities, isHostAuthReady, keys, resolveEffectiveHost]);
 };

application/state/usePortForwardingState.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Host, PortForwardingRule } from "../../domain/models";
+import { Host, Identity, PortForwardingRule, SSHKey } from "../../domain/models";
 import {
   STORAGE_KEY_PF_PREFER_FORM_MODE,
   STORAGE_KEY_PF_VIEW_MODE,
@@ -63,7 +63,9 @@ export interface UsePortForwardingStateResult {
   startTunnel: (
     rule: PortForwardingRule,
     host: Host,
-    keys: { id: string; privateKey: string; passphrase: string }[],
+    hosts: Host[],
+    keys: SSHKey[],
+    identities: Identity[],
     onStatusChange?: (status: PortForwardingRule["status"], error?: string) => void,
     enableReconnect?: boolean,
   ) => Promise<{ success: boolean; error?: string }>;
@@ -377,14 +379,16 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
     async (
       rule: PortForwardingRule,
       host: Host,
-      keys: { id: string; privateKey: string; passphrase: string }[],
+      hosts: Host[],
+      keys: SSHKey[],
+      identities: Identity[],
       onStatusChange?: (
         status: PortForwardingRule["status"],
         error?: string,
       ) => void,
       enableReconnect = false,
     ) => {
-      return startPortForward(rule, host, keys, (status, error) => {
+      return startPortForward(rule, host, hosts, keys, identities, (status, error) => {
         setRuleStatus(rule.id, status, error);
         onStatusChange?.(status, error ?? undefined);
       }, enableReconnect);

application/state/useSessionState.ts

@@ -40,25 +40,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 +79,7 @@ export const useSessionState = () => {
       status: 'connecting',
       protocol: 'serial',
       serialConfig: config,
+      charset: options?.charset,
     };
     setSessions(prev => [...prev, newSession]);
     setActiveTabId(sessionId);
@@ -103,6 +112,7 @@ export const useSessionState = () => {
         status: 'connecting',
         protocol: 'serial',
         serialConfig: serialConfig,
+        charset: host.charset,
       };
       setSessions(prev => [...prev, newSession]);
       setActiveTabId(sessionId);
@@ -120,6 +130,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 +141,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 +192,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 +200,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 +227,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 +247,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 +346,7 @@ export const useSessionState = () => {
           status: 'connecting',
           protocol: 'serial',
           serialConfig: serialConfig,
+          charset: host.charset,
         };
       }
 
@@ -334,6 +360,7 @@ export const useSessionState = () => {
         protocol: host.protocol,
         port: host.port,
         moshEnabled: host.moshEnabled,
+        charset: host.charset,
       };
     });
 
@@ -445,8 +472,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 +508,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 +600,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 +668,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 +693,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 +761,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 +779,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);

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,15 +33,19 @@ import {
   STORAGE_KEY_CLOSE_TO_TRAY,
   STORAGE_KEY_GLOBAL_HOTKEY_ENABLED,
   STORAGE_KEY_AUTO_UPDATE_ENABLED,
+  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';
 import { UI_FONTS, DEFAULT_UI_FONT_ID } from '../../infrastructure/config/uiFonts';
 import { uiFontStore, useUIFontsLoaded } from './uiFontStore';
-import { useAvailableFonts } from './fontStore';
 import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
 import { netcattyBridge } from '../../infrastructure/services/netcattyBridge';
 
@@ -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,8 +132,11 @@ const applyThemeTokens = (
   accentOverride: string,
 ) => {
   const root = window.document.documentElement;
-  root.classList.remove('light', 'dark');
-  root.classList.add(resolvedTheme);
+  // 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);
+  }
   root.style.setProperty('--background', tokens.background);
   root.style.setProperty('--foreground', tokens.foreground);
   root.style.setProperty('--card', tokens.card);
@@ -155,7 +169,6 @@ const applyThemeTokens = (
 };
 
 export const useSettingsState = () => {
-  const availableFonts = useAvailableFonts();
   const uiFontsLoaded = useUIFontsLoaded();
   const [theme, setTheme] = useState<'dark' | 'light' | 'system'>(() => {
     const stored = readStoredString(STORAGE_KEY_THEME);
@@ -189,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>(() => {
@@ -237,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>(() => {
@@ -287,6 +331,10 @@ export const useSettingsState = () => {
   const localTerminalSettingsVersionRef = useRef(0);
   const broadcastedLocalTerminalSettingsVersionRef = useRef(0);
 
+  // Fix 1: Mount guard — skip redundant IPC broadcasts & localStorage writes on initial mount.
+  // Set to true by the LAST useEffect declaration; all persist effects see false on first render.
+  const persistMountedRef = useRef(false);
+
   const setTerminalSettings = useCallback((nextValue: SetStateAction<TerminalSettings>) => {
     setTerminalSettingsState((prev) => {
       const candidate = typeof nextValue === 'function'
@@ -322,6 +370,24 @@ export const useSettingsState = () => {
     }
   }, []);
 
+
+  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 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(() => {
     const storedTheme = readStoredString(STORAGE_KEY_THEME);
     const nextTheme = storedTheme && isValidTheme(storedTheme) ? storedTheme : theme;
@@ -334,6 +400,17 @@ export const useSettingsState = () => {
     const storedAccent = readStoredString(STORAGE_KEY_COLOR);
     const nextAccent = storedAccent && isValidHslToken(storedAccent) ? storedAccent.trim() : customAccent;
 
+    // Fix 2: Skip expensive DOM operations if nothing actually changed
+    if (
+      nextTheme === theme &&
+      nextLightId === lightUiThemeId &&
+      nextDarkId === darkUiThemeId &&
+      nextAccentMode === accentMode &&
+      nextAccent === customAccent
+    ) {
+      return;
+    }
+
     setTheme(nextTheme);
     setLightUiThemeId(nextLightId);
     setDarkUiThemeId(nextDarkId);
@@ -401,6 +478,18 @@ 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);
+
+    // Workspace focus style
+    const storedFocusStyle = readStoredString(STORAGE_KEY_WORKSPACE_FOCUS_STYLE);
+    if (storedFocusStyle === 'dim' || storedFocusStyle === 'border') setWorkspaceFocusStyleState(storedFocusStyle);
 
     // Custom terminal themes
     customThemeStore.loadFromStorage();
@@ -414,12 +503,11 @@ export const useSettingsState = () => {
     localStorageAdapter.writeString(STORAGE_KEY_UI_THEME_DARK, darkUiThemeId);
     localStorageAdapter.writeString(STORAGE_KEY_ACCENT_MODE, accentMode);
     localStorageAdapter.writeString(STORAGE_KEY_COLOR, customAccent);
-    // Notify other windows
+    // Fix 1: Skip IPC broadcast on initial mount (values already match localStorage)
+    if (!persistMountedRef.current) return;
+    // Fix 3: Send a single IPC instead of 5 — the receiver calls syncAppearanceFromStorage()
+    // which re-reads ALL appearance values from localStorage.
     notifySettingsChanged(STORAGE_KEY_THEME, theme);
-    notifySettingsChanged(STORAGE_KEY_UI_THEME_LIGHT, lightUiThemeId);
-    notifySettingsChanged(STORAGE_KEY_UI_THEME_DARK, darkUiThemeId);
-    notifySettingsChanged(STORAGE_KEY_ACCENT_MODE, accentMode);
-    notifySettingsChanged(STORAGE_KEY_COLOR, customAccent);
   }, [theme, resolvedTheme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, notifySettingsChanged]);
 
   // Listen for OS color scheme changes to keep systemPreference in sync
@@ -437,7 +525,10 @@ export const useSettingsState = () => {
     localStorageAdapter.writeString(STORAGE_KEY_UI_LANGUAGE, uiLanguage);
     document.documentElement.lang = uiLanguage;
     netcattyBridge.get()?.setLanguage?.(uiLanguage);
-    notifySettingsChanged(STORAGE_KEY_UI_LANGUAGE, uiLanguage);
+    // Fix 1: Skip IPC broadcast on initial mount
+    if (persistMountedRef.current) {
+      notifySettingsChanged(STORAGE_KEY_UI_LANGUAGE, uiLanguage);
+    }
   }, [uiLanguage, notifySettingsChanged]);
 
   // Apply and persist UI font family
@@ -446,7 +537,10 @@ export const useSettingsState = () => {
     const font = uiFontStore.getFontById(uiFontFamilyId);
     document.documentElement.style.setProperty('--font-sans', font.family);
     localStorageAdapter.writeString(STORAGE_KEY_UI_FONT_FAMILY, uiFontFamilyId);
-    notifySettingsChanged(STORAGE_KEY_UI_FONT_FAMILY, uiFontFamilyId);
+    // Fix 1: Skip IPC broadcast on initial mount
+    if (persistMountedRef.current) {
+      notifySettingsChanged(STORAGE_KEY_UI_FONT_FAMILY, uiFontFamilyId);
+    }
   }, [uiFontFamilyId, uiFontsLoaded, notifySettingsChanged]);
 
   // Listen for settings changes from other windows via IPC
@@ -481,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);
       }
@@ -540,6 +638,17 @@ export const useSettingsState = () => {
       if (key === STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR && typeof value === 'boolean') {
         setSftpAutoOpenSidebar((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 () => {
       try {
@@ -567,53 +676,78 @@ export const useSettingsState = () => {
     };
   }, []);
 
+  // Fix 4: Keep a ref snapshot of current settings so the storage event handler
+  // can compare without capturing 25+ state variables in its closure / dep array.
+  // This avoids constant listener detach/reattach on every state change.
+  const settingsSnapshotRef = useRef({
+    theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent,
+    customCSS, uiFontFamilyId, hotkeyScheme, uiLanguage,
+    terminalThemeId, followAppTerminalTheme, terminalFontFamilyId, terminalFontSize,
+    sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles,
+    sftpUseCompressedUpload, sftpAutoOpenSidebar, sftpDefaultViewMode,
+    showRecentHosts, showOnlyUngroupedHostsInRoot, showSftpTab,
+    editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat,
+    globalHotkeyEnabled, autoUpdateEnabled,
+  });
+  settingsSnapshotRef.current = {
+    theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent,
+    customCSS, uiFontFamilyId, hotkeyScheme, uiLanguage,
+    terminalThemeId, followAppTerminalTheme, terminalFontFamilyId, terminalFontSize,
+    sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles,
+    sftpUseCompressedUpload, sftpAutoOpenSidebar, sftpDefaultViewMode,
+    showRecentHosts, showOnlyUngroupedHostsInRoot, showSftpTab,
+    editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat,
+    globalHotkeyEnabled, autoUpdateEnabled,
+  };
+
   // Listen for storage changes from other windows (cross-window sync)
   useEffect(() => {
     const handleStorageChange = (e: StorageEvent) => {
+      const s = settingsSnapshotRef.current;
       if (e.key === STORAGE_KEY_THEME && e.newValue) {
-        if (isValidTheme(e.newValue) && e.newValue !== theme) {
+        if (isValidTheme(e.newValue) && e.newValue !== s.theme) {
           setTheme(e.newValue);
         }
       }
       if (e.key === STORAGE_KEY_UI_THEME_LIGHT && e.newValue) {
-        if (isValidUiThemeId('light', e.newValue) && e.newValue !== lightUiThemeId) {
+        if (isValidUiThemeId('light', e.newValue) && e.newValue !== s.lightUiThemeId) {
           setLightUiThemeId(e.newValue);
         }
       }
       if (e.key === STORAGE_KEY_UI_THEME_DARK && e.newValue) {
-        if (isValidUiThemeId('dark', e.newValue) && e.newValue !== darkUiThemeId) {
+        if (isValidUiThemeId('dark', e.newValue) && e.newValue !== s.darkUiThemeId) {
           setDarkUiThemeId(e.newValue);
         }
       }
       if (e.key === STORAGE_KEY_ACCENT_MODE && e.newValue) {
-        if ((e.newValue === 'theme' || e.newValue === 'custom') && e.newValue !== accentMode) {
+        if ((e.newValue === 'theme' || e.newValue === 'custom') && e.newValue !== s.accentMode) {
           setAccentMode(e.newValue);
         }
       }
       if (e.key === STORAGE_KEY_COLOR && e.newValue) {
-        if (isValidHslToken(e.newValue) && e.newValue !== customAccent) {
+        if (isValidHslToken(e.newValue) && e.newValue !== s.customAccent) {
           setCustomAccent(e.newValue.trim());
         }
       }
       if (e.key === STORAGE_KEY_CUSTOM_CSS && e.newValue !== null) {
-        if (e.newValue !== customCSS) {
+        if (e.newValue !== s.customCSS) {
           setCustomCSS(e.newValue);
         }
       }
       if (e.key === STORAGE_KEY_UI_FONT_FAMILY && e.newValue) {
-        if (isValidUiFontId(e.newValue) && e.newValue !== uiFontFamilyId) {
+        if (isValidUiFontId(e.newValue) && e.newValue !== s.uiFontFamilyId) {
           setUiFontFamilyId(e.newValue);
         }
       }
       if (e.key === STORAGE_KEY_HOTKEY_SCHEME && e.newValue) {
         const newScheme = e.newValue as HotkeyScheme;
-        if (newScheme !== hotkeyScheme) {
+        if (newScheme !== s.hotkeyScheme) {
           setHotkeyScheme(newScheme);
         }
       }
       if (e.key === STORAGE_KEY_UI_LANGUAGE && e.newValue) {
         const next = resolveSupportedLocale(e.newValue);
-        if (next !== uiLanguage) {
+        if (next !== s.uiLanguage) {
           setUiLanguage(next as UILanguage);
         }
       }
@@ -636,64 +770,71 @@ export const useSettingsState = () => {
       }
       // Sync terminal theme from other windows
       if (e.key === STORAGE_KEY_TERM_THEME && e.newValue) {
-        if (e.newValue !== terminalThemeId) {
+        if (e.newValue !== s.terminalThemeId) {
           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 !== terminalFontFamilyId) {
+        if (e.newValue !== s.terminalFontFamilyId) {
           setTerminalFontFamilyId(e.newValue);
         }
       }
       // Sync terminal font size from other windows
       if (e.key === STORAGE_KEY_TERM_FONT_SIZE && e.newValue) {
         const newSize = parseInt(e.newValue, 10);
-        if (!isNaN(newSize) && newSize !== terminalFontSize) {
+        if (!isNaN(newSize) && newSize !== s.terminalFontSize) {
           setTerminalFontSize(newSize);
         }
       }
       // Sync SFTP double-click behavior from other windows
       if (e.key === STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR && e.newValue) {
-        if ((e.newValue === 'open' || e.newValue === 'transfer') && e.newValue !== sftpDoubleClickBehavior) {
+        if ((e.newValue === 'open' || e.newValue === 'transfer') && e.newValue !== s.sftpDoubleClickBehavior) {
           setSftpDoubleClickBehavior(e.newValue);
         }
       }
       // Sync SFTP auto-sync setting from other windows
       if (e.key === STORAGE_KEY_SFTP_AUTO_SYNC && e.newValue !== null) {
         const newValue = e.newValue === 'true';
-        if (newValue !== sftpAutoSync) {
+        if (newValue !== s.sftpAutoSync) {
           setSftpAutoSync(newValue);
         }
       }
       // Sync SFTP show hidden files setting from other windows
       if (e.key === STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES && e.newValue !== null) {
         const newValue = e.newValue === 'true';
-        if (newValue !== sftpShowHiddenFiles) {
+        if (newValue !== s.sftpShowHiddenFiles) {
           setSftpShowHiddenFiles(newValue);
         }
       }
       if (e.key === STORAGE_KEY_EDITOR_WORD_WRAP && e.newValue !== null) {
         const newValue = e.newValue === 'true';
-        if (newValue !== editorWordWrap) {
+        if (newValue !== s.editorWordWrap) {
           setEditorWordWrapState(newValue);
         }
       }
       if (e.key === STORAGE_KEY_SESSION_LOGS_ENABLED && e.newValue !== null) {
         const newValue = e.newValue === 'true';
-        if (newValue !== sessionLogsEnabled) {
+        if (newValue !== s.sessionLogsEnabled) {
           setSessionLogsEnabled(newValue);
         }
       }
       if (e.key === STORAGE_KEY_SESSION_LOGS_DIR && e.newValue !== null) {
-        if (e.newValue !== sessionLogsDir) {
+        if (e.newValue !== s.sessionLogsDir) {
           setSessionLogsDir(e.newValue);
         }
       }
       if (e.key === STORAGE_KEY_SESSION_LOGS_FORMAT && e.newValue) {
         if (
           (e.newValue === 'txt' || e.newValue === 'raw' || e.newValue === 'html') &&
-          e.newValue !== sessionLogsFormat
+          e.newValue !== s.sessionLogsFormat
         ) {
           setSessionLogsFormat(e.newValue);
         }
@@ -701,54 +842,101 @@ export const useSettingsState = () => {
       // Sync SFTP compressed upload setting from other windows
       if (e.key === STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD && e.newValue !== null) {
         const newValue = e.newValue === 'true' || e.newValue === 'enabled';
-        if (newValue !== sftpUseCompressedUpload) {
+        if (newValue !== s.sftpUseCompressedUpload) {
           setSftpUseCompressedUpload(newValue);
         }
       }
       // Sync SFTP auto-open sidebar setting from other windows
       if (e.key === STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR && e.newValue !== null) {
         const newValue = e.newValue === 'true';
-        if (newValue !== sftpAutoOpenSidebar) {
+        if (newValue !== s.sftpAutoOpenSidebar) {
           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';
-        if (newValue !== globalHotkeyEnabled) {
+        if (newValue !== s.globalHotkeyEnabled) {
           setGlobalHotkeyEnabled(newValue);
         }
       }
       // Sync auto-update enabled setting from other windows
       if (e.key === STORAGE_KEY_AUTO_UPDATE_ENABLED && e.newValue !== null) {
         const newValue = e.newValue === 'true';
-        if (newValue !== autoUpdateEnabled) {
+        if (newValue !== s.autoUpdateEnabled) {
           setAutoUpdateEnabled(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);
+        }
+      }
     };
 
     window.addEventListener('storage', handleStorageChange);
     return () => window.removeEventListener('storage', handleStorageChange);
-  }, [theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, customCSS, uiFontFamilyId, hotkeyScheme, uiLanguage, terminalThemeId, terminalFontFamilyId, terminalFontSize, sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload, sftpAutoOpenSidebar, editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat, globalHotkeyEnabled, autoUpdateEnabled, mergeIncomingTerminalSettings]);
+  }, [mergeIncomingTerminalSettings]); // Fix 4: stable deps only — state comparisons use settingsSnapshotRef
 
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_TERM_THEME, terminalThemeId);
+    if (!persistMountedRef.current) return;
     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;
     notifySettingsChanged(STORAGE_KEY_TERM_FONT_FAMILY, terminalFontFamilyId);
   }, [terminalFontFamilyId, notifySettingsChanged]);
 
   useEffect(() => {
     localStorageAdapter.writeNumber(STORAGE_KEY_TERM_FONT_SIZE, terminalFontSize);
+    if (!persistMountedRef.current) return;
     notifySettingsChanged(STORAGE_KEY_TERM_FONT_SIZE, terminalFontSize);
   }, [terminalFontSize, notifySettingsChanged]);
 
   useEffect(() => {
     localStorageAdapter.write(STORAGE_KEY_TERM_SETTINGS, terminalSettings);
+    if (!persistMountedRef.current) return;
     const currentSignature = serializeTerminalSettings(terminalSettings);
     const hasPendingUnbroadcastLocalChanges =
       localTerminalSettingsVersionRef.current !== broadcastedLocalTerminalSettingsVersionRef.current;
@@ -763,11 +951,13 @@ export const useSettingsState = () => {
 
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_HOTKEY_SCHEME, hotkeyScheme);
+    if (!persistMountedRef.current) return;
     notifySettingsChanged(STORAGE_KEY_HOTKEY_SCHEME, hotkeyScheme);
   }, [hotkeyScheme, notifySettingsChanged]);
 
   useEffect(() => {
     localStorageAdapter.write(STORAGE_KEY_CUSTOM_KEY_BINDINGS, customKeyBindings);
+    if (!persistMountedRef.current) return;
     notifySettingsChanged(STORAGE_KEY_CUSTOM_KEY_BINDINGS, customKeyBindings);
   }, [customKeyBindings, notifySettingsChanged]);
 
@@ -776,12 +966,30 @@ 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(() => {
-    localStorageAdapter.writeString(STORAGE_KEY_CUSTOM_CSS, customCSS);
-    notifySettingsChanged(STORAGE_KEY_CUSTOM_CSS, customCSS);
-
-    // Apply custom CSS to document
+    // Always apply CSS to document (needed on mount)
     let styleEl = document.getElementById('netcatty-custom-css') as HTMLStyleElement | null;
     if (!styleEl) {
       styleEl = document.createElement('style');
@@ -789,59 +997,76 @@ export const useSettingsState = () => {
       document.head.appendChild(styleEl);
     }
     styleEl.textContent = customCSS;
+    localStorageAdapter.writeString(STORAGE_KEY_CUSTOM_CSS, customCSS);
+    // Skip IPC on initial mount
+    if (!persistMountedRef.current) return;
+    notifySettingsChanged(STORAGE_KEY_CUSTOM_CSS, customCSS);
   }, [customCSS, notifySettingsChanged]);
 
   // Persist SFTP double-click behavior
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR, sftpDoubleClickBehavior);
+    if (!persistMountedRef.current) return;
     notifySettingsChanged(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR, sftpDoubleClickBehavior);
   }, [sftpDoubleClickBehavior, notifySettingsChanged]);
 
   // Persist SFTP auto-sync setting
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_SFTP_AUTO_SYNC, sftpAutoSync ? 'true' : 'false');
+    if (!persistMountedRef.current) return;
     notifySettingsChanged(STORAGE_KEY_SFTP_AUTO_SYNC, sftpAutoSync);
   }, [sftpAutoSync, notifySettingsChanged]);
 
   // Persist SFTP show hidden files setting
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES, sftpShowHiddenFiles ? 'true' : 'false');
+    if (!persistMountedRef.current) return;
     notifySettingsChanged(STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES, sftpShowHiddenFiles);
   }, [sftpShowHiddenFiles, notifySettingsChanged]);
 
   // Persist SFTP compressed upload setting
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD, sftpUseCompressedUpload ? 'true' : 'false');
+    if (!persistMountedRef.current) return;
     notifySettingsChanged(STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD, sftpUseCompressedUpload);
   }, [sftpUseCompressedUpload, notifySettingsChanged]);
 
   // Persist SFTP auto-open sidebar setting
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR, sftpAutoOpenSidebar ? 'true' : 'false');
+    if (!persistMountedRef.current) return;
     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');
+    if (!persistMountedRef.current) return;
     notifySettingsChanged(STORAGE_KEY_SESSION_LOGS_ENABLED, sessionLogsEnabled);
   }, [sessionLogsEnabled, notifySettingsChanged]);
 
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_SESSION_LOGS_DIR, sessionLogsDir);
+    if (!persistMountedRef.current) return;
     notifySettingsChanged(STORAGE_KEY_SESSION_LOGS_DIR, sessionLogsDir);
   }, [sessionLogsDir, notifySettingsChanged]);
 
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_SESSION_LOGS_FORMAT, sessionLogsFormat);
+    if (!persistMountedRef.current) return;
     notifySettingsChanged(STORAGE_KEY_SESSION_LOGS_FORMAT, sessionLogsFormat);
   }, [sessionLogsFormat, notifySettingsChanged]);
 
   // Persist and sync toggle window hotkey setting
   useEffect(() => {
-    localStorageAdapter.writeString(STORAGE_KEY_TOGGLE_WINDOW_HOTKEY, toggleWindowHotkey);
-    notifySettingsChanged(STORAGE_KEY_TOGGLE_WINDOW_HOTKEY, toggleWindowHotkey);
-    // Register/unregister the global hotkey in main process
+    // Register/unregister the global hotkey in main process (needed on mount)
     const bridge = netcattyBridge.get();
     if (bridge?.registerGlobalHotkey) {
       if (toggleWindowHotkey && globalHotkeyEnabled) {
@@ -865,25 +1090,32 @@ export const useSettingsState = () => {
         });
       }
     }
+    localStorageAdapter.writeString(STORAGE_KEY_TOGGLE_WINDOW_HOTKEY, toggleWindowHotkey);
+    // Skip IPC on initial mount
+    if (!persistMountedRef.current) return;
+    notifySettingsChanged(STORAGE_KEY_TOGGLE_WINDOW_HOTKEY, toggleWindowHotkey);
   }, [toggleWindowHotkey, globalHotkeyEnabled, notifySettingsChanged]);
 
   // Persist global hotkey enabled setting
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_GLOBAL_HOTKEY_ENABLED, globalHotkeyEnabled ? 'true' : 'false');
+    if (!persistMountedRef.current) return;
     notifySettingsChanged(STORAGE_KEY_GLOBAL_HOTKEY_ENABLED, globalHotkeyEnabled);
   }, [globalHotkeyEnabled, notifySettingsChanged]);
 
   // Persist and sync close to tray setting
   useEffect(() => {
-    localStorageAdapter.writeString(STORAGE_KEY_CLOSE_TO_TRAY, closeToTray ? 'true' : 'false');
-    notifySettingsChanged(STORAGE_KEY_CLOSE_TO_TRAY, closeToTray);
-    // Update main process tray behavior
+    // Update main process tray behavior (needed on mount)
     const bridge = netcattyBridge.get();
     if (bridge?.setCloseToTray) {
       bridge.setCloseToTray(closeToTray).catch((err) => {
         console.warn('[SystemTray] Failed to set close-to-tray:', err);
       });
     }
+    localStorageAdapter.writeString(STORAGE_KEY_CLOSE_TO_TRAY, closeToTray ? 'true' : 'false');
+    // Skip IPC on initial mount
+    if (!persistMountedRef.current) return;
+    notifySettingsChanged(STORAGE_KEY_CLOSE_TO_TRAY, closeToTray);
   }, [closeToTray, notifySettingsChanged]);
 
   // Hydrate auto-update state from the main-process preference file on mount.
@@ -904,16 +1136,11 @@ export const useSettingsState = () => {
   }, []);
 
   // Persist auto-update enabled setting.
-  // Skip IPC on initial mount to avoid overwriting the main-process preference
-  // file when localStorage has been cleared (where the default is true).
-  const autoUpdateMountedRef = useRef(false);
+  // Initial mount still writes localStorage, but skips cross-window/main-process IPC.
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_AUTO_UPDATE_ENABLED, autoUpdateEnabled ? 'true' : 'false');
+    if (!persistMountedRef.current) return;
     notifySettingsChanged(STORAGE_KEY_AUTO_UPDATE_ENABLED, autoUpdateEnabled);
-    if (!autoUpdateMountedRef.current) {
-      autoUpdateMountedRef.current = true;
-      return; // Skip IPC on initial mount
-    }
     // Notify main process on user-initiated changes
     const bridge = netcattyBridge.get();
     bridge?.setAutoUpdate?.(autoUpdateEnabled).catch((err: unknown) => {
@@ -921,6 +1148,13 @@ export const useSettingsState = () => {
     });
   }, [autoUpdateEnabled, notifySettingsChanged]);
 
+  // Fix 1: Mark all persist effects as mounted.
+  // This MUST be declared AFTER all persist useEffects so that React runs it last
+  // during the initial mount cycle (effects fire in declaration order).
+  useEffect(() => {
+    persistMountedRef.current = true;
+  }, []);
+
   // Get merged key bindings (defaults + custom overrides)
   const keyBindings = useMemo((): KeyBinding[] => {
     return DEFAULT_KEY_BINDINGS.map(binding => {
@@ -976,17 +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]
-  );
-
-  const currentTerminalFont = useMemo(
-    () => availableFonts.find(f => f.id === terminalFontFamilyId) || availableFonts[0],
-    [terminalFontFamilyId, availableFonts]
-  );
+      || TERMINAL_THEMES[0];
+  }, [terminalThemeId, customThemes, followAppTerminalTheme, resolvedTheme, lightUiThemeId, darkUiThemeId]);
 
   const updateTerminalSetting = useCallback(<K extends keyof TerminalSettings>(
     key: K,
@@ -995,6 +1233,12 @@ export const useSettingsState = () => {
     setTerminalSettings(prev => ({ ...prev, [key]: value }));
   }, [setTerminalSettings]);
 
+  /** Re-apply the current UI theme tokens (used to restore after immersive mode override). */
+  const reapplyCurrentTheme = useCallback(() => {
+    const tokens = getUiThemeById(resolvedTheme, resolvedTheme === 'dark' ? darkUiThemeId : lightUiThemeId).tokens;
+    applyThemeTokens(theme, resolvedTheme, tokens, accentMode, customAccent);
+  }, [theme, resolvedTheme, lightUiThemeId, darkUiThemeId, accentMode, customAccent]);
+
   return {
     theme,
     setTheme,
@@ -1015,10 +1259,11 @@ export const useSettingsState = () => {
     setUiLanguage,
     terminalThemeId,
     setTerminalThemeId,
+    followAppTerminalTheme,
+    setFollowAppTerminalTheme: setFollowAppTerminalThemeState,
     currentTerminalTheme,
     terminalFontFamilyId,
     setTerminalFontFamilyId,
-    currentTerminalFont,
     terminalFontSize,
     setTerminalFontSize,
     terminalSettings,
@@ -1045,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) => {
@@ -1052,7 +1307,6 @@ export const useSettingsState = () => {
       localStorageAdapter.writeString(STORAGE_KEY_EDITOR_WORD_WRAP, String(enabled));
       notifySettingsChanged(STORAGE_KEY_EDITOR_WORD_WRAP, enabled);
     }, [notifySettingsChanged]),
-    availableFonts,
     // Session Logs
     sessionLogsEnabled,
     setSessionLogsEnabled,
@@ -1071,6 +1325,9 @@ export const useSettingsState = () => {
     globalHotkeyEnabled,
     setGlobalHotkeyEnabled,
     rehydrateAllFromStorage,
+    reapplyCurrentTheme,
+    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(), [
@@ -1078,8 +1335,9 @@ export const useSettingsState = () => {
       uiFontFamilyId, uiLanguage, customCSS,
       terminalThemeId, terminalFontFamilyId, terminalFontSize, terminalSettings,
       customKeyBindings, editorWordWrap,
-      sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload, sftpAutoOpenSidebar,
-      customThemes,
+      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

@@ -96,7 +96,7 @@ export const useTerminalBackend = () => {
     return bridge.onSessionExit(sessionId, cb);
   }, []);
 
-  const onChainProgress = useCallback((cb: (hop: number, total: number, label: string, status: string) => void) => {
+  const onChainProgress = useCallback((cb: (sessionId: string, hop: number, total: number, label: string, status: string, error?: string) => void) => {
     const bridge = netcattyBridge.get();
     return bridge?.onChainProgress?.(cb);
   }, []);
@@ -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,7 +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_SHOW_RECENT_HOSTS,
+  STORAGE_KEY_SHOW_ONLY_UNGROUPED_HOSTS_IN_ROOT,
+  STORAGE_KEY_SHOW_SFTP_TAB,
 } from '../infrastructure/config/storageKeys';
 
 // ---------------------------------------------------------------------------
@@ -53,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. */
@@ -74,9 +105,13 @@ const SYNCABLE_TERMINAL_KEYS = [
   'scrollback', 'drawBoldInBrightColors', 'fontLigatures', 'fontWeight', 'fontWeightBold',
   'linePadding', 'cursorShape', 'cursorBlink', 'minimumContrastRatio',
   'scrollOnInput', 'scrollOnOutput', 'scrollOnKeyPress', 'scrollOnPaste',
+  'smoothScrolling',
   'rightClickBehavior', 'copyOnSelect', 'middleClickPaste', 'wordSeparators',
   'linkModifier', 'keywordHighlightEnabled', 'keywordHighlightRules',
-  'keepaliveInterval', 'disableBracketedPaste', 'osc52Clipboard',
+  'keepaliveInterval', 'disableBracketedPaste', 'clearWipesScrollback',
+  'preserveSelectionOnInput', 'osc52Clipboard',
+  'autocompleteEnabled', 'autocompleteGhostText', 'autocompletePopupMenu',
+  'autocompleteDebounceMs', 'autocompleteMinChars', 'autocompleteMaxSuggestions',
 ] as const;
 
 /**
@@ -157,6 +192,18 @@ export function collectSyncableSettings(): SyncPayload['settings'] {
   const autoOpenSidebar = localStorageAdapter.readString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR);
   if (autoOpenSidebar === 'true' || autoOpenSidebar === 'false') settings.sftpAutoOpenSidebar = autoOpenSidebar === '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;
 }
 
@@ -215,6 +262,21 @@ function applySyncableSettings(settings: NonNullable<SyncPayload['settings']>):
   if (settings.sftpShowHiddenFiles != null) localStorageAdapter.writeString(STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES, String(settings.sftpShowHiddenFiles));
   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));
+
+  // 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);
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -240,6 +302,7 @@ export function buildSyncPayload(
     customGroups: vault.customGroups,
     snippetPackages: vault.snippetPackages,
     knownHosts: vault.knownHosts,
+    groupConfigs: vault.groupConfigs,
     portForwardingRules,
     settings: collectSyncableSettings(),
     syncedAt: Date.now(),
@@ -273,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));
 
@@ -287,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/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

@@ -20,15 +20,23 @@ import {
   Tag,
   TerminalSquare,
   User,
+  FileKey,
+  FolderOpen,
+  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,
@@ -40,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";
@@ -48,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";
@@ -69,7 +78,7 @@ import {
   ProxyPanel,
 } from "./host-details";
 
-type CredentialType = "sshid" | "key" | "certificate" | null;
+type CredentialType = "sshid" | "key" | "certificate" | "localKeyFile" | null;
 type SubPanel =
   | "none"
   | "create-group"
@@ -79,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;
@@ -90,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> = ({
@@ -105,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 ||
@@ -120,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
@@ -147,6 +168,9 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   // Password visibility state
   const [showPassword, setShowPassword] = useState(false);
 
+  // Local key file path input state
+  const [newKeyFilePath, setNewKeyFilePath] = useState("");
+
   // New group creation state
   const [newGroupName, setNewGroupName] = useState("");
   const [newGroupParent, setNewGroupParent] = useState("");
@@ -190,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),
@@ -273,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(() => {
@@ -304,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 = () => {
@@ -354,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,
@@ -469,6 +497,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         authMethod: identity.authMethod,
         password: undefined,
         identityFileId: undefined,
+        identityFilePaths: undefined,
       }));
       setSelectedCredentialType(null);
       setCredentialPopoverOpen(false);
@@ -494,6 +523,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         onSave={handleCreateGroup}
         onBack={() => setActiveSubPanel("none")}
         onCancel={onCancel}
+        layout={layout}
       />
     );
   }
@@ -506,6 +536,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         onClearProxy={clearProxyConfig}
         onBack={() => setActiveSubPanel("none")}
         onCancel={onCancel}
+        layout={layout}
       />
     );
   }
@@ -523,6 +554,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         onClearChain={clearHostChain}
         onBack={() => setActiveSubPanel("none")}
         onCancel={onCancel}
+        layout={layout}
       />
     );
   }
@@ -551,6 +583,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         }}
         onBack={() => setActiveSubPanel("none")}
         onCancel={onCancel}
+        layout={layout}
       />
     );
   }
@@ -562,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}
       />
     );
   }
@@ -606,6 +644,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         onClose={onCancel}
         onBack={() => setActiveSubPanel("none")}
         showBackButton={true}
+        layout={layout}
       />
     );
   }
@@ -615,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")
       }
@@ -728,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">
@@ -741,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">
@@ -794,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"
@@ -813,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;
@@ -969,6 +1012,31 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               </div>
             )}
 
+            {/* Local key file paths display */}
+            {!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 overflow-hidden">
+                    <FileKey size={14} className="text-primary shrink-0" />
+                    <span className="text-xs w-0 flex-1 truncate font-mono" title={keyPath}>
+                      {keyPath}
+                    </span>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 shrink-0"
+                      onClick={() => {
+                        const paths = form.identityFilePaths?.filter((_, i) => i !== idx) || [];
+                        update("identityFilePaths", paths.length > 0 ? paths : undefined);
+                      }}
+                    >
+                      <Trash2 size={12} />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+
             {/* Selected credential display */}
             {!selectedIdentity && form.identityFileId && (
               <div className="flex items-center gap-2 p-2 rounded-md bg-secondary/50 border border-border/60">
@@ -1046,6 +1114,20 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                           {t("hostDetails.credential.certificate")}
                         </span>
                       </button>
+
+                      <button
+                        type="button"
+                        className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-secondary/80 transition-colors text-left"
+                        onClick={() => {
+                          setSelectedCredentialType("localKeyFile");
+                          setCredentialPopoverOpen(false);
+                        }}
+                      >
+                        <FileKey size={16} className="text-muted-foreground" />
+                        <span className="text-sm font-medium">
+                          {t("hostDetails.credential.localKeyFile")}
+                        </span>
+                      </button>
                     </div>
                   </PopoverContent>
                 </Popover>
@@ -1067,6 +1149,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                     onValueChange={(val) => {
                       update("identityFileId", val);
                       update("authMethod", "key");
+                      update("identityFilePaths", undefined);
                       setSelectedCredentialType(null);
                     }}
                     placeholder={t("hostDetails.keys.search")}
@@ -1102,6 +1185,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                     onValueChange={(val) => {
                       update("identityFileId", val);
                       update("authMethod", "certificate");
+                      update("identityFilePaths", undefined);
                       setSelectedCredentialType(null);
                     }}
                     placeholder={t("hostDetails.certs.search")}
@@ -1121,6 +1205,67 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                   </Button>
                 </div>
               )}
+
+            {/* Local key file path input - appears after selecting "Local Key File" type */}
+            {!selectedIdentity &&
+              selectedCredentialType === "localKeyFile" &&
+              !form.identityFileId && (
+                <div className="space-y-1.5">
+                  <div className="flex items-center gap-1 min-w-0">
+                    <input
+                      type="text"
+                      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)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" && newKeyFilePath.trim()) {
+                          e.preventDefault();
+                          const paths = [...(form.identityFilePaths || []), newKeyFilePath.trim()];
+                          update("identityFilePaths", paths);
+                          update("identityFileId", undefined);
+                          update("authMethod", "key");
+                          setNewKeyFilePath("");
+                        }
+                      }}
+                    />
+                    <Button
+                      variant="secondary"
+                      size="icon"
+                      className="h-8 w-8 shrink-0"
+                      title={t("hostDetails.credential.browseKeyFile")}
+                      onClick={async () => {
+                        const bridge = (window as unknown as { netcatty?: NetcattyBridge }).netcatty;
+                        if (!bridge?.selectFile) return;
+                        const filePath = await bridge.selectFile(
+                          "Select SSH Private Key",
+                          undefined,
+                          [{ name: "All Files", extensions: ["*"] }]
+                        );
+                        if (filePath) {
+                          const paths = [...(form.identityFilePaths || []), filePath];
+                          update("identityFilePaths", paths);
+                          update("identityFileId", undefined);
+                          update("authMethod", "key");
+                        }
+                      }}
+                    >
+                      <FolderOpen size={14} />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 shrink-0"
+                      onClick={() => {
+                        setSelectedCredentialType(null);
+                        setNewKeyFilePath("");
+                      }}
+                    >
+                      <X size={14} />
+                    </Button>
+                  </div>
+                </div>
+              )}
           </div>
         </Card>
 
@@ -1150,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>
@@ -1173,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" />
@@ -1181,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"
@@ -1404,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>
 
@@ -1437,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">
@@ -1459,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) */}
@@ -1608,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>
@@ -1631,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"
@@ -1695,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="flex flex-wrap items-center gap-3 bg-secondary/60 border-b border-border/70 px-3 py-1.5 shrink-0">
           {/* Filter Tabs */}
           <div className="flex items-center gap-1">
             {/* KEY button with split interaction: left=switch view, right=dropdown */}
@@ -684,8 +684,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 +819,7 @@ echo $3 >> "$FILE"`);
             </div>
           </div>
         )}
+        </div>
       </div>
 
       {/* Slide-out Panel */}

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;
 
@@ -130,7 +138,9 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
         const result = await startTunnel(
           rule,
           _host,
-          keys.map((k) => ({ id: k.id, privateKey: k.privateKey, passphrase: k.passphrase })),
+          hosts,
+          keys,
+          identities,
           (status, error) => {
             // Show toast on error (only once)
             if (status === "error" && error && !errorShown) {
@@ -159,7 +169,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
         });
       }
     },
-    [hosts, keys, setRuleStatus, startTunnel, t],
+    [hosts, identities, keys, groupConfigs, setRuleStatus, startTunnel, t],
   );
 
   // Stop a port forwarding tunnel

components/QuickAddSnippetDialog.tsx

@@ -0,0 +1,185 @@
+/**
+ * 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;
+  onCreatePackage?: (packagePath: string) => void;
+}
+
+export const QuickAddSnippetDialog: React.FC<QuickAddSnippetDialogProps> = ({
+  snippets,
+  packages,
+  onCreateSnippet,
+  onCreatePackage,
+}) => {
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const [label, setLabel] = useState('');
+  const [command, setCommand] = useState('');
+  const [packagePath, setPackagePath] = useState('');
+  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 = () => {
+      setLabel('');
+      setCommand('');
+      setPackagePath('');
+      setOpen(true);
+    };
+    window.addEventListener('netcatty:snippets:add', handler);
+    return () => window.removeEventListener('netcatty:snippets:add', 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);
+    }
+    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, 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('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/QuickConnectWizard.tsx

@@ -13,6 +13,7 @@ import {
 import React, { useMemo, useState } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import type { QuickConnectTarget } from "../domain/quickConnect";
+import { formatHostPort } from "../domain/host";
 import { cn } from "../lib/utils";
 import { Host, SSHKey } from "../types";
 import { Button } from "./ui/button";
@@ -531,11 +532,11 @@ const QuickConnectWizard: React.FC<QuickConnectWizardProps> = ({
       case "protocol":
         return target.hostname;
       case "username":
-        return `${protocol.toUpperCase()} ${target.hostname}:${port}`;
+        return `${protocol.toUpperCase()} ${formatHostPort(target.hostname, port)}`;
       case "knownhost":
-        return `${protocol.toUpperCase()} ${effectiveUsername}@${target.hostname}:${port}`;
+        return `${protocol.toUpperCase()} ${effectiveUsername}@${formatHostPort(target.hostname, port)}`;
       case "auth":
-        return `${protocol.toUpperCase()} ${target.hostname}:${port}`;
+        return `${protocol.toUpperCase()} ${formatHostPort(target.hostname, port)}`;
     }
   };
 

components/QuickSwitcher.tsx

@@ -2,7 +2,7 @@ import {
   Folder,
   LayoutGrid,
   Search,
-  Shield,
+  FolderLock,
   Terminal,
   TerminalSquare,
 } from "lucide-react";
@@ -10,9 +10,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 +67,10 @@ interface QuickSwitcherProps {
   onSelect: (host: Host) => void;
   onSelectTab: (tabId: string) => void;
   onClose: () => void;
-  onCreateLocalTerminal?: () => void;
+  onCreateLocalTerminal?: (shell?: { command: string; args?: string[]; name?: string; icon?: string }) => void;
   // onCreateWorkspace removed - feature not currently used
   keyBindings?: KeyBinding[];
+  showSftpTab: boolean;
 }
 
 const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
@@ -83,8 +85,21 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
   onClose,
   onCreateLocalTerminal,
   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 +113,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 +163,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 +196,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 +235,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;
+      }
     }
   };
 
@@ -282,12 +319,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 +402,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 +469,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,7 +5,7 @@
  * Clicking a snippet executes it in the focused terminal session.
  */
 
-import { ChevronRight, Package, Search, Zap } from 'lucide-react';
+import { ChevronRight, Package, Plus, Search, Zap } from 'lucide-react';
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { useI18n } from '../application/i18n/I18nProvider';
 import { cn } from '../lib/utils';
@@ -119,15 +119,25 @@ 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'));
+  }, []);
+
   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 +146,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 */}

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
@@ -150,7 +160,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 +187,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 +210,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

@@ -5,6 +5,7 @@
 import { AppWindow, Cloud, FileType, HardDrive, Keyboard, Palette, Sparkles, TerminalSquare, X } from "lucide-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useSettingsState } from "../application/state/useSettingsState";
+import { useAvailableFonts } from "../application/state/fontStore";
 import { usePortForwardingState } from "../application/state/usePortForwardingState";
 import { useVaultState } from "../application/state/useVaultState";
 import { useWindowControls } from "../application/state/useWindowControls";
@@ -19,7 +20,6 @@ import SettingsTerminalTab from "./settings/tabs/SettingsTerminalTab";
 import SettingsSystemTab from "./settings/tabs/SettingsSystemTab";
 const SettingsAITab = React.lazy(() => import("./settings/tabs/SettingsAITab"));
 import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
-import type { TerminalFont } from "../infrastructure/config/fonts";
 
 const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
 
@@ -41,16 +41,73 @@ class AITabErrorBoundary extends React.Component<
         </div>
       );
     }
-    return this.props.children;
+    return (this.props as { children: React.ReactNode }).children;
   }
 }
 
-type SettingsState = ReturnType<typeof useSettingsState> & {
-    availableFonts: TerminalFont[];
-};
+type SettingsState = ReturnType<typeof useSettingsState>;
 
 const SettingsSyncTab = React.lazy(() => import("./settings/tabs/SettingsSyncTab"));
 
+const SettingsTerminalTabContainer: React.FC<{ settings: SettingsState }> = ({ settings }) => {
+    const availableFonts = useAvailableFonts();
+
+    return (
+        <SettingsTerminalTab
+            terminalThemeId={settings.terminalThemeId}
+            setTerminalThemeId={settings.setTerminalThemeId}
+            followAppTerminalTheme={settings.followAppTerminalTheme}
+            setFollowAppTerminalTheme={settings.setFollowAppTerminalTheme}
+            terminalFontFamilyId={settings.terminalFontFamilyId}
+            setTerminalFontFamilyId={settings.setTerminalFontFamilyId}
+            terminalFontSize={settings.terminalFontSize}
+            setTerminalFontSize={settings.setTerminalFontSize}
+            terminalSettings={settings.terminalSettings}
+            updateTerminalSetting={settings.updateTerminalSetting}
+            availableFonts={availableFonts}
+            workspaceFocusStyle={settings.workspaceFocusStyle}
+            setWorkspaceFocusStyle={settings.setWorkspaceFocusStyle}
+        />
+    );
+};
+
+const SettingsAITabContainer: React.FC = () => {
+    const aiState = useAIState();
+
+    return (
+        <AITabErrorBoundary>
+            <React.Suspense fallback={<div className="flex-1 px-6 py-5 text-sm text-muted-foreground">Loading AI settings...</div>}>
+                <SettingsAITab
+                    providers={aiState.providers}
+                    addProvider={aiState.addProvider}
+                    updateProvider={aiState.updateProvider}
+                    removeProvider={aiState.removeProvider}
+                    activeProviderId={aiState.activeProviderId}
+                    setActiveProviderId={aiState.setActiveProviderId}
+                    activeModelId={aiState.activeModelId}
+                    setActiveModelId={aiState.setActiveModelId}
+                    globalPermissionMode={aiState.globalPermissionMode}
+                    setGlobalPermissionMode={aiState.setGlobalPermissionMode}
+                    toolIntegrationMode={aiState.toolIntegrationMode}
+                    setToolIntegrationMode={aiState.setToolIntegrationMode}
+                    externalAgents={aiState.externalAgents}
+                    setExternalAgents={aiState.setExternalAgents}
+                    defaultAgentId={aiState.defaultAgentId}
+                    setDefaultAgentId={aiState.setDefaultAgentId}
+                    commandBlocklist={aiState.commandBlocklist}
+                    setCommandBlocklist={aiState.setCommandBlocklist}
+                    commandTimeout={aiState.commandTimeout}
+                    setCommandTimeout={aiState.setCommandTimeout}
+                    maxIterations={aiState.maxIterations}
+                    setMaxIterations={aiState.setMaxIterations}
+                    webSearchConfig={aiState.webSearchConfig}
+                    setWebSearchConfig={aiState.setWebSearchConfig}
+                />
+            </React.Suspense>
+        </AITabErrorBoundary>
+    );
+};
+
 const SettingsSyncTabWithVault: React.FC<{ onSettingsApplied?: () => void }> = ({ onSettingsApplied }) => {
     const {
         hosts,
@@ -60,6 +117,7 @@ const SettingsSyncTabWithVault: React.FC<{ onSettingsApplied?: () => void }> = (
         customGroups,
         snippetPackages,
         knownHosts,
+        groupConfigs,
         importDataFromString,
         clearVaultData,
     } = useVaultState();
@@ -79,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 (
@@ -98,8 +156,7 @@ 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 aiState = useAIState();
+    const { updateState, checkNow, installUpdate, openReleasePage, startDownload, isUpdateDemoMode } = useUpdateCheck({ autoUpdateEnabled: settings.autoUpdateEnabled });
     const [activeTab, setActiveTab] = useState("application");
     const [mountedTabs, setMountedTabs] = useState(() => new Set(["application"]));
 
@@ -206,6 +263,8 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                             checkNow={checkNow}
                             openReleasePage={openReleasePage}
                             installUpdate={installUpdate}
+                            startDownload={startDownload}
+                            isUpdateDemoMode={isUpdateDemoMode}
                         />
                     )}
 
@@ -227,21 +286,17 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                             setUiLanguage={settings.setUiLanguage}
                             customCSS={settings.customCSS}
                             setCustomCSS={settings.setCustomCSS}
+                            showRecentHosts={settings.showRecentHosts}
+                            setShowRecentHosts={settings.setShowRecentHosts}
+                            showOnlyUngroupedHostsInRoot={settings.showOnlyUngroupedHostsInRoot}
+                            setShowOnlyUngroupedHostsInRoot={settings.setShowOnlyUngroupedHostsInRoot}
+                            showSftpTab={settings.showSftpTab}
+                            setShowSftpTab={settings.setShowSftpTab}
                         />
                     )}
 
                     {mountedTabs.has("terminal") && (
-                        <SettingsTerminalTab
-                            terminalThemeId={settings.terminalThemeId}
-                            setTerminalThemeId={settings.setTerminalThemeId}
-                            terminalFontFamilyId={settings.terminalFontFamilyId}
-                            setTerminalFontFamilyId={settings.setTerminalFontFamilyId}
-                            terminalFontSize={settings.terminalFontSize}
-                            setTerminalFontSize={settings.setTerminalFontSize}
-                            terminalSettings={settings.terminalSettings}
-                            updateTerminalSetting={settings.updateTerminalSetting}
-                            availableFonts={settings.availableFonts}
-                        />
+                        <SettingsTerminalTabContainer settings={settings} />
                     )}
 
                     {mountedTabs.has("shortcuts") && (
@@ -261,34 +316,7 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                     )}
 
                     {mountedTabs.has("ai") && (
-                        <AITabErrorBoundary>
-                        <React.Suspense fallback={null}>
-                        <SettingsAITab
-                            providers={aiState.providers}
-                            addProvider={aiState.addProvider}
-                            updateProvider={aiState.updateProvider}
-                            removeProvider={aiState.removeProvider}
-                            activeProviderId={aiState.activeProviderId}
-                            setActiveProviderId={aiState.setActiveProviderId}
-                            activeModelId={aiState.activeModelId}
-                            setActiveModelId={aiState.setActiveModelId}
-                            globalPermissionMode={aiState.globalPermissionMode}
-                            setGlobalPermissionMode={aiState.setGlobalPermissionMode}
-                            externalAgents={aiState.externalAgents}
-                            setExternalAgents={aiState.setExternalAgents}
-                            defaultAgentId={aiState.defaultAgentId}
-                            setDefaultAgentId={aiState.setDefaultAgentId}
-                            commandBlocklist={aiState.commandBlocklist}
-                            setCommandBlocklist={aiState.setCommandBlocklist}
-                            commandTimeout={aiState.commandTimeout}
-                            setCommandTimeout={aiState.setCommandTimeout}
-                            maxIterations={aiState.maxIterations}
-                            setMaxIterations={aiState.setMaxIterations}
-                            webSearchConfig={aiState.webSearchConfig}
-                            setWebSearchConfig={aiState.setWebSearchConfig}
-                        />
-                        </React.Suspense>
-                        </AITabErrorBoundary>
+                        <SettingsAITabContainer />
                     )}
 
                     {mountedTabs.has("sync") && (
@@ -318,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,8 @@
  * 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";
 import { useSftpBackend } from "../application/state/useSftpBackend";
@@ -30,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;
@@ -54,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>;
@@ -64,6 +72,7 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
   keys,
   identities,
   updateHosts,
+  sftpDefaultViewMode,
   activeHost,
   initialLocation,
   showWorkspaceHostHeader = false,
@@ -75,6 +84,8 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
   sftpAutoSync,
   sftpShowHiddenFiles,
   sftpUseCompressedUpload,
+  hotkeyScheme,
+  keyBindings,
   editorWordWrap,
   setEditorWordWrap,
   onGetTerminalCwd,
@@ -108,6 +119,7 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
     listSftp,
     mkdirLocal,
     deleteLocalFile,
+    listLocalDir,
   } = useSftpBackend();
 
   const sftpRef = useRef(sftp);
@@ -118,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);
@@ -129,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,
@@ -167,6 +240,7 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
     selectDirectory,
     startStreamTransfer,
     getSftpIdForConnection: sftp.getSftpIdForConnection,
+    listLocalFiles: listLocalDir,
   });
 
   const {
@@ -431,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;
       }
@@ -503,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">
@@ -518,7 +595,7 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
               />
               <div
                 className="min-w-0 flex-1 max-w-[calc(100%-1.75rem)] text-[11px] leading-5 truncate"
-                title={`${displayHost.label} · ${(displayHost.username || "root")}@${displayHost.hostname}:${displayHost.port || 22}`}
+                title={`${displayHost.label} · ${(displayHost.username || "root")}@${formatHostPort(displayHost.hostname, displayHost.port || 22)}`}
               >
                 <span className="font-medium">
                   {displayHost.label}
@@ -545,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}
                 />
@@ -557,6 +638,7 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
         <SftpTransferQueue
           sftp={sftp}
           visibleTransfers={visibleTransfers}
+          allTransfers={sftp.transfers}
           canRevealTransferTarget={canRevealTransferTarget}
           onRevealTransferTarget={handleRevealTransferTarget}
         />
@@ -589,6 +671,8 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
           handleSaveTextFile={handleSaveTextFile}
           editorWordWrap={editorWordWrap}
           setEditorWordWrap={setEditorWordWrap}
+          hotkeyScheme={hotkeyScheme}
+          keyBindings={keyBindings}
           showFileOpenerDialog={showFileOpenerDialog}
           setShowFileOpenerDialog={setShowFileOpenerDialog}
           fileOpenerTarget={fileOpenerTarget}
@@ -607,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 &&
@@ -617,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[];
@@ -720,6 +721,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
           onSaveHost={onSaveHost}
           onCreateGroup={onCreateGroup}
           title={t('snippets.targets.add')}
+          layout="inline"
         />
       );
     }
@@ -730,6 +732,7 @@ 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"
@@ -883,7 +886,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 +894,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
             >
               {editingSnippet.targets?.length ? t('action.run') : t('common.save')}
             </Button>
-          </div>
+          </AsidePanelFooter>
         </AsidePanel>
       );
     }
@@ -905,6 +908,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
           subtitle={t('snippets.history.subtitle', { count: shellHistory.length })}
           showBackButton={true}
           onBack={handleClosePanel}
+          layout="inline"
         >
           {/* History List */}
           <div
@@ -951,8 +955,9 @@ 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">
             {/* Search box */}
@@ -1059,7 +1064,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 +1084,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 +1119,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 +1131,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">
@@ -1254,6 +1266,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/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();
@@ -151,55 +182,71 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
   // Ref to store the latest save function to avoid stale closure in keyboard shortcut
   const handleSaveRef = useRef<() => Promise<void>>(() => Promise.resolve());
   const handlePasteRef = useRef<() => Promise<void>>(() => Promise.resolve());
+  const readClipboardTextRef = useRef<() => Promise<string | null>>(() => Promise.resolve(null));
 
   // Track theme from document.documentElement class (syncs with app theme)
   const [isDarkTheme, setIsDarkTheme] = useState(() =>
     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();
   }, []);
 
@@ -215,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);
@@ -254,6 +306,10 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
     }
   }, [readClipboardTextFromBridge]);
 
+  useEffect(() => {
+    readClipboardTextRef.current = readClipboardText;
+  }, [readClipboardText]);
+
   const handlePaste = useCallback(async () => {
     const editor = editorRef.current;
     if (!editor) return;
@@ -316,11 +372,59 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
     });
 
     // Fallback paste path for Electron environments where Monaco paste can fail.
+    // Skip custom paste when focus is inside the find/replace widget so that
+    // its input fields receive the pasted text via default browser behavior.
     editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyV, () => {
+      const active = document.activeElement;
+      if (active?.closest('.find-widget')) {
+        // Read clipboard and insert into the find/replace input field.
+        void (async () => {
+          try {
+            const text = await readClipboardTextRef.current();
+            if (!text) return;
+            // Monaco find widget inputs are <textarea> elements inside .monaco-inputbox
+            if (active instanceof HTMLTextAreaElement || active instanceof HTMLInputElement) {
+              const start = active.selectionStart ?? active.value.length;
+              const end = active.selectionEnd ?? active.value.length;
+              active.focus();
+              active.setSelectionRange(start, end);
+              document.execCommand('insertText', false, text);
+            }
+          } catch {
+            // Ignore – paste simply won't work
+          }
+        })();
+        return;
+      }
       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) {
@@ -342,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,13 +36,16 @@ interface TopTabsProps {
   onRenameWorkspace: (workspaceId: string) => void;
   onCloseWorkspace: (workspaceId: string) => void;
   onCloseLogView: (logViewId: string) => void;
+  onCloseTabsBatch: (targetIds: string[]) => void;
   onOpenQuickSwitcher: () => void;
   onToggleTheme: () => void;
   onOpenSettings: () => void;
   onSyncNow?: () => Promise<void>;
+  isImmersiveActive?: boolean;
   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
@@ -51,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') {
@@ -65,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) {
@@ -81,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>
     );
@@ -108,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)
@@ -167,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 ? (
@@ -199,6 +230,7 @@ WindowControls.displayName = 'WindowControls';
 
 const TopTabsInner: React.FC<TopTabsProps> = ({
   theme,
+  followAppTerminalTheme = false,
   hosts,
   sessions,
   orphanSessions,
@@ -213,18 +245,22 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
   onRenameWorkspace,
   onCloseWorkspace,
   onCloseLogView,
+  onCloseTabsBatch,
   onOpenQuickSwitcher,
   onToggleTheme,
   onOpenSettings,
   onSyncNow,
+  isImmersiveActive,
   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;
@@ -270,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();
       };
     }
@@ -328,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>();
@@ -444,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) => {
@@ -451,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';
@@ -461,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)}
@@ -469,31 +555,57 @@ 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-none 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" />
+                  <div
+                    className="absolute top-0 left-0 right-0 h-[2px]"
+                    style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--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)}
@@ -514,6 +626,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
               <ContextMenuItem className="text-destructive" onClick={() => onCloseSession(session.id)}>
                 {t('common.close')}
               </ContextMenuItem>
+              {renderBulkCloseItems(session.id)}
             </ContextMenuContent>
           </ContextMenu>
         );
@@ -522,6 +635,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] || {};
@@ -533,6 +647,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)}
@@ -541,33 +657,72 @@ 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-none 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" />
+                  <div
+                    className="absolute top-0 left-0 right-0 h-[2px]"
+                    style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--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>
@@ -578,6 +733,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
               <ContextMenuItem className="text-destructive" onClick={() => onCloseWorkspace(workspace.id)}>
                 {t('common.close')}
               </ContextMenuItem>
+              {renderBulkCloseItems(workspace.id)}
             </ContextMenuContent>
           </ContextMenu>
         );
@@ -592,21 +748,46 @@ 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-none 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="absolute top-0 left-0 right-0 h-[2px]"
+                style={{ backgroundColor: 'var(--top-tabs-fg, hsl(var(--foreground)))' }}
+              />
             )}
             <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>
@@ -640,8 +821,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 */}
@@ -653,30 +840,75 @@ 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-none 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)))';
+                }
+              }}
+            >
+              {isSftpActive && (
+                <div
+                  className="absolute top-0 left-0 right-0 h-[2px]"
+                  style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))' }}
+                />
+              )}
+              <Folder size={14} /> SFTP
+            </div>
+          )}
         </div>
 
         {/* Scrollable tabs container with fade masks */}
@@ -696,7 +928,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)' }}
             />
           )}
 
@@ -713,6 +945,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"
               >
@@ -727,7 +960,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>
@@ -738,6 +971,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"
           >
@@ -750,21 +984,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 && !followAppTerminalTheme}
             title="Toggle theme"
           >
             {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
@@ -788,10 +1025,15 @@ const topTabsAreEqual = (prev: TopTabsProps, next: TopTabsProps): boolean => {
     prev.orphanSessions === next.orphanSessions &&
     prev.workspaces === next.workspaces &&
     prev.orderedTabs === next.orderedTabs &&
+    prev.logViews === next.logViews &&
     prev.draggingSessionId === next.draggingSessionId &&
     prev.isMacClient === next.isMacClient &&
     prev.onOpenSettings === next.onOpenSettings &&
-    prev.onSyncNow === next.onSyncNow
+    prev.onSyncNow === next.onSyncNow &&
+    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 } = useVaultState();
+  const { hosts, keys, identities, groupConfigs } = useVaultState();
   useSessionState();
   const { rules: portForwardingRules, startTunnel, stopTunnel } = usePortForwardingState();
   const activeTabId = useActiveTabId();
@@ -151,11 +152,6 @@ const TrayPanelContent: React.FC = () => {
     return () => unsubscribe?.();
   }, [onTrayPanelRefresh]);
 
-  const keysForPf = useMemo(
-    () => keys.map((k) => ({ id: k.id, privateKey: k.privateKey, passphrase: k.passphrase })),
-    [keys],
-  );
-
   const handleClose = useCallback(() => {
     void hideTrayPanel();
   }, [hideTrayPanel]);
@@ -331,15 +327,18 @@ 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 {
-                        void startTunnel(rule, host, keysForPf, (status, error) => {
+                        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;
@@ -75,17 +110,18 @@ export const ToolCall = ({
       : approvalStatus === 'denied'
         ? 'border-red-500/20 bg-red-500/[0.03]'
         : 'border-border/25 bg-muted/10';
+  const statusIconClass = 'shrink-0';
 
   const statusIcon = approvalStatus === 'pending' ? (
-    <ShieldAlert size={12} className="text-yellow-500/70 shrink-0" />
+    <ShieldAlert size={12} className={cn('text-yellow-500/70', statusIconClass)} />
   ) : isLoading ? (
-    <Loader2 size={12} className="animate-spin text-blue-400/70" />
+    <Loader2 size={12} className={cn('animate-spin text-blue-400/70', statusIconClass)} />
   ) : isInterrupted ? (
-    <Slash size={12} className="text-muted-foreground/55" />
+    <Slash size={12} className={cn('text-muted-foreground/55', statusIconClass)} />
   ) : isError ? (
-    <XCircle size={12} className="text-red-400/70" />
+    <XCircle size={12} className={cn('text-red-400/70', statusIconClass)} />
   ) : result !== undefined ? (
-    <CheckCircle2 size={12} className="text-green-400/70" />
+    <CheckCircle2 size={12} className={cn('text-green-400/70', statusIconClass)} />
   ) : null;
 
   return (
@@ -105,7 +141,13 @@ export const ToolCall = ({
           ? <ChevronDown size={12} className="text-muted-foreground/40 shrink-0" />
           : <ChevronRight size={12} className="text-muted-foreground/40 shrink-0" />
         }
-        <span className="font-mono text-muted-foreground/70 truncate">{name}</span>
+        {name === 'terminal_execute' && args?.command ? (
+          <span className="font-mono text-muted-foreground/70 truncate" title={String(args.command)}>
+            <span className="text-muted-foreground/40">$ </span>{String(args.command)}
+          </span>
+        ) : (
+          <span className="font-mono text-muted-foreground/70 truncate">{name}</span>
+        )}
         <span className="flex-1" />
         {/* Approval badge for resolved approvals */}
         {approvalStatus === 'approved' && (
@@ -126,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>
@@ -167,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'
@@ -187,18 +190,27 @@ export const AgentIconBadge: React.FC<{
 
   if (variant === 'plain') {
     return (
-      <img
-        src={visual.src}
-        alt=""
+      <div
         aria-hidden="true"
-        draggable={false}
-        className={cn('shrink-0', imageSize, visual.imageClassName, className)}
+        className={cn('shrink-0', imageSize, className)}
+        style={{
+          maskImage: `url(${visual.src})`,
+          WebkitMaskImage: `url(${visual.src})`,
+          maskSize: 'contain',
+          WebkitMaskSize: 'contain',
+          maskRepeat: 'no-repeat',
+          WebkitMaskRepeat: 'no-repeat',
+          maskPosition: 'center',
+          WebkitMaskPosition: 'center',
+          backgroundColor: 'currentColor',
+        }}
       />
     );
   }
 
   return (
     <div
+      data-agent-badge=""
       className={cn(
         'flex shrink-0 items-center justify-center overflow-hidden border',
         badgeSize,

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],
   );
@@ -208,7 +217,7 @@ const AgentSelector: React.FC<AgentSelectorProps> = ({
       <DropdownContent
         align="start"
         sideOffset={6}
-        className="w-[288px] rounded-2xl border border-border/50 bg-popover p-0 text-foreground shadow-lg supports-[backdrop-filter]:backdrop-blur-xl"
+        className="w-[288px] overflow-hidden rounded-2xl border border-border/50 bg-popover p-0 text-foreground shadow-lg supports-[backdrop-filter]:backdrop-blur-xl"
       >
         {BUILTIN_AGENTS.map((agent) => (
           <AgentMenuRow

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

@@ -144,12 +144,14 @@ const ChatMessageList: React.FC<ChatMessageListProps> = ({ messages, isStreaming
       .flatMap((m) => m.toolResults?.map((tr) => tr.toolCallId) ?? []),
   );
 
-  // Build a map from toolCallId → toolName for display
+  // Build maps from toolCallId → toolName / toolArgs for display
   const toolCallNames = new Map<string, string>();
+  const toolCallArgs = new Map<string, Record<string, unknown>>();
   for (const m of visibleMessages) {
     if (m.role === 'assistant' && m.toolCalls) {
       for (const tc of m.toolCalls) {
         toolCallNames.set(tc.id, tc.name);
+        if (tc.arguments) toolCallArgs.set(tc.id, tc.arguments);
       }
     }
   }
@@ -175,12 +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}
-                    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>
             );
@@ -235,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
@@ -246,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>
                   );
                 })}
 
@@ -287,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;
+}