fix: clear mainWindow reference on window destroy (#587)

The mainWindow variable was never cleared when the window was destroyed,
unlike settingsWindow which had a proper 'closed' handler. This caused
getMainWindow() to return a destroyed window object, preventing the
activate handler from correctly detecting the main window was gone and
creating a new one.

Fixes #587

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.github/workflows/build.yml

@@ -13,12 +13,18 @@ on:
 
 jobs:
   build:
-    name: build-${{ matrix.os }}
+    name: build-${{ matrix.name }}
     runs-on: ${{ matrix.os }}
     strategy:
       fail-fast: false
       matrix:
-        os: [macos-latest, windows-latest, ubuntu-latest]
+        include:
+          - name: macos
+            os: macos-latest
+            pack_script: pack:mac
+          - name: windows
+            os: windows-latest
+            pack_script: pack:win
     env:
       VITE_SYNC_GITHUB_CLIENT_ID: ${{ secrets.VITE_SYNC_GITHUB_CLIENT_ID }}
       VITE_SYNC_GOOGLE_CLIENT_ID: ${{ secrets.VITE_SYNC_GOOGLE_CLIENT_ID }}
@@ -31,7 +37,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: npm
 
       - name: Install deps
@@ -50,46 +56,181 @@ jobs:
           echo "Setting version to ${VERSION}"
           npm pkg set version="${VERSION}"
 
-      - name: Build package (macOS)
-        if: matrix.os == 'macos-latest'
-        env:
-          CSC_IDENTITY_AUTO_DISCOVERY: "false"
-          ELECTRON_BUILDER_PUBLISH: "never"
-        run: npm run pack:mac
-
-      - name: Build package (Windows)
-        if: matrix.os == 'windows-latest'
+      - name: Build package
         env:
           ELECTRON_BUILDER_PUBLISH: "never"
-        run: npm run pack:win
-
-      - name: Build package (Linux)
-        if: matrix.os == 'ubuntu-latest'
-        env:
-          ELECTRON_BUILDER_PUBLISH: "never"
-        run: npm run pack:linux
+          # macOS code signing & notarization (only for macOS builds)
+          CSC_LINK: ${{ matrix.name == 'macos' && secrets.MAC_CSC_LINK || '' }}
+          CSC_KEY_PASSWORD: ${{ matrix.name == 'macos' && secrets.MAC_CSC_KEY_PASSWORD || '' }}
+          APPLE_ID: ${{ matrix.name == 'macos' && secrets.APPLE_ID || '' }}
+          APPLE_APP_SPECIFIC_PASSWORD: ${{ matrix.name == 'macos' && secrets.APPLE_APP_SPECIFIC_PASSWORD || '' }}
+          APPLE_TEAM_ID: ${{ matrix.name == 'macos' && secrets.APPLE_TEAM_ID || '' }}
+        run: npm run ${{ matrix.pack_script }}
 
       - name: Upload artifacts
         uses: actions/upload-artifact@v4
         with:
-          name: netcatty-${{ matrix.os }}
+          name: netcatty-${{ matrix.name }}
           path: |
             release/*.dmg
+            release/*.zip
             release/*.exe
             release/*.msi
             release/*.AppImage
             release/*.deb
             release/*.rpm
             release/*.tar.gz
+            release/*.yml
+            release/*.blockmap
+          if-no-files-found: ignore
+
+  # Linux x64 — pin to ubuntu-22.04 for broader glibc compatibility.
+  # ubuntu-latest (24.04) links native modules against glibc 2.39 which
+  # can cause dlopen failures on some distros. 22.04 uses glibc 2.35,
+  # compatible with most current Linux distributions including Arch.
+  # See #264.
+  build-linux-x64:
+    name: build-linux-x64
+    runs-on: ubuntu-22.04
+    env:
+      npm_config_arch: x64
+      npm_config_target_arch: x64
+      VITE_SYNC_GITHUB_CLIENT_ID: ${{ secrets.VITE_SYNC_GITHUB_CLIENT_ID }}
+      VITE_SYNC_GOOGLE_CLIENT_ID: ${{ secrets.VITE_SYNC_GOOGLE_CLIENT_ID }}
+      VITE_SYNC_GOOGLE_CLIENT_SECRET: ${{ secrets.VITE_SYNC_GOOGLE_CLIENT_SECRET }}
+      VITE_SYNC_ONEDRIVE_CLIENT_ID: ${{ secrets.VITE_SYNC_ONEDRIVE_CLIENT_ID }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install deps
+        run: npm ci
+
+      - name: Set version
+        shell: bash
+        run: |
+          if [[ "$GITHUB_REF" == refs/tags/v* ]]; then
+            VERSION="${GITHUB_REF_NAME#v}"
+          else
+            VERSION="${GITHUB_SHA:0:7}"
+          fi
+          echo "Setting version to ${VERSION}"
+          npm pkg set version="${VERSION}"
+
+      - name: Prepare node-pty Linux runtime
+        env:
+          npm_config_arch: x64
+        run: bash scripts/ensure-node-pty-linux.sh prepare x64
+
+      - name: Build package
+        env:
+          npm_config_arch: x64
+          ELECTRON_BUILDER_PUBLISH: "never"
+        run: npm run pack:linux-x64
+
+      - name: Verify packaged node-pty Linux runtime
+        run: bash scripts/ensure-node-pty-linux.sh verify x64
+
+      - name: Verify packaged deb artifact
+        run: bash scripts/verify-linux-deb-artifact.sh amd64
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: netcatty-linux-x64
+          path: |
+            release/*.AppImage
+            release/*.deb
+            release/*.rpm
+            release/*.yml
+            release/*.blockmap
+          if-no-files-found: ignore
+
+  # Dedicated job for Linux ARM64 — builds inside Debian Bullseye (GLIBC 2.31)
+  # to ensure compatibility with older distros like UOS/Deepin (GLIBC 2.28).
+  # Key: GLIBC < 2.34 avoids the libpthread-merge symbol requirement.
+  build-linux-arm64:
+    name: build-linux-arm64
+    runs-on: ubuntu-24.04-arm
+    container:
+      image: debian:bullseye
+    env:
+      npm_config_arch: arm64
+      npm_config_target_arch: arm64
+      VITE_SYNC_GITHUB_CLIENT_ID: ${{ secrets.VITE_SYNC_GITHUB_CLIENT_ID }}
+      VITE_SYNC_GOOGLE_CLIENT_ID: ${{ secrets.VITE_SYNC_GOOGLE_CLIENT_ID }}
+      VITE_SYNC_GOOGLE_CLIENT_SECRET: ${{ secrets.VITE_SYNC_GOOGLE_CLIENT_SECRET }}
+      VITE_SYNC_ONEDRIVE_CLIENT_ID: ${{ secrets.VITE_SYNC_ONEDRIVE_CLIENT_ID }}
+    steps:
+      - name: Install build dependencies
+        run: |
+          apt-get update
+          apt-get install -y curl build-essential python3 git libfuse2 file rpm \
+            libglib2.0-0 libgtk-3-0 libnss3 libxss1 libxtst6 libasound2 \
+            libatk-bridge2.0-0 libdrm2 libgbm1 libx11-xcb1 libxcb-dri3-0
+          curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
+          apt-get install -y nodejs
+
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install deps
+        run: npm ci
+
+      - name: Set version
+        shell: bash
+        run: |
+          if [[ "$GITHUB_REF" == refs/tags/v* ]]; then
+            VERSION="${GITHUB_REF_NAME#v}"
+          else
+            VERSION="${GITHUB_SHA:0:7}"
+          fi
+          echo "Setting version to ${VERSION}"
+          npm pkg set version="${VERSION}"
+
+      - name: Prepare node-pty Linux runtime
+        env:
+          npm_config_arch: arm64
+        run: bash scripts/ensure-node-pty-linux.sh prepare arm64
+
+      - name: Build package
+        env:
+          npm_config_arch: arm64
+          ELECTRON_BUILDER_PUBLISH: "never"
+        run: npm run pack:linux-arm64
+
+      - name: Verify packaged node-pty Linux runtime
+        run: bash scripts/ensure-node-pty-linux.sh verify arm64
+
+      - name: Verify packaged deb artifact
+        run: bash scripts/verify-linux-deb-artifact.sh arm64
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: netcatty-linux-arm64
+          path: |
+            release/*.AppImage
+            release/*.deb
+            release/*.rpm
+            release/*.yml
+            release/*.blockmap
           if-no-files-found: ignore
 
   release:
     name: release
     runs-on: ubuntu-latest
-    needs: build
+    needs: [build, build-linux-x64, build-linux-arm64]
     if: startsWith(github.ref, 'refs/tags/') || (github.event_name == 'workflow_dispatch' && inputs.publish_release)
     permissions:
       contents: write
+      actions: read
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -103,6 +244,54 @@ jobs:
       - name: List artifacts
         run: ls -la artifacts/
 
+      - name: Verify update metadata files
+        run: |
+          missing=0
+          for f in latest-mac.yml latest.yml latest-linux.yml latest-linux-arm64.yml; do
+            if [ ! -f "artifacts/$f" ]; then
+              echo "::warning::Missing $f in merged artifacts, attempting recovery..."
+              missing=1
+            fi
+          done
+          if [ "$missing" = "1" ]; then
+            echo "Re-downloading individual artifacts to recover missing files..."
+            for name in netcatty-macos netcatty-windows netcatty-linux-x64 netcatty-linux-arm64; do
+              tmpdir="/tmp/artifact-${name}"
+              gh run download ${{ github.run_id }} --name "${name}" --dir "${tmpdir}" 2>/dev/null || true
+              if [ -d "${tmpdir}" ]; then
+                for yml in "${tmpdir}"/latest*.yml; do
+                  [ -f "$yml" ] && cp -v "$yml" artifacts/
+                done
+              fi
+            done
+            echo "After recovery:"
+            ls -la artifacts/*.yml
+          fi
+          # Final check — fail if any update yml is still missing
+          for f in latest-mac.yml latest.yml latest-linux.yml latest-linux-arm64.yml; do
+            if [ ! -f "artifacts/$f" ]; then
+              echo "::error::$f is still missing after recovery attempt"
+              exit 1
+            fi
+          done
+          echo "All update metadata files present."
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Verify downloaded Linux amd64 deb artifact
+        run: |
+          deb_file="$(find artifacts -maxdepth 1 -type f -name '*-linux-amd64.deb' -print | sort | head -n 1)"
+          test -n "${deb_file}"
+          bash scripts/verify-linux-deb-artifact.sh amd64 "${deb_file}"
+
+      - name: Verify downloaded Linux arm64 deb artifact metadata
+        env:
+          VERIFY_LOAD: "0"
+        run: |
+          deb_file="$(find artifacts -maxdepth 1 -type f -name '*-linux-arm64.deb' -print | sort | head -n 1)"
+          test -n "${deb_file}"
+          bash scripts/verify-linux-deb-artifact.sh arm64 "${deb_file}"
+
       - name: Generate Release Body
         run: node .github/scripts/generate-release-note.js
         env:
@@ -116,10 +305,13 @@ jobs:
           body_path: release_notes.md
           files: |
             artifacts/*.dmg
+            artifacts/*.zip
             artifacts/*.exe
             artifacts/*.AppImage
             artifacts/*.deb
             artifacts/*.rpm
+            artifacts/*.yml
+            artifacts/*.blockmap
           generate_release_notes: true
           fail_on_unmatched_files: false
           token: ${{ secrets.RELEASE_TOKEN }}

.gitignore

@@ -17,7 +17,8 @@ dist-ssr
 *.tsbuildinfo
 coverage
 /.vite
-/build
+/build/*
+!/build/icons
 /electron/native/**/build
 /release
 /out
@@ -34,5 +35,28 @@ coverage
 *.sln
 *.sw?
 
-# Claude Code local settings
-/.claude/settings.local.json
+# Claude Code
+/.claude/
+
+# Codex
+/.codex/
+/CLAUDE.md
+
+# AI / Superpowers generated docs (local only)
+/docs/superpowers/
+
+# Dev-only electron-updater test config (not for production)
+/dev-app-update.yml
+
+# Test suite (local only, not committed)
+/tests/
+/vitest.config.ts
+
+# Serena MCP project config (local only)
+/.serena/
+
+# Windows VS Build environment scripts (local dev only)
+Directory.Build.props
+Directory.Build.targets
+build_with_vs.bat
+build_with_vs2022.bat

App.tsx

@@ -1,6 +1,7 @@
-import React, { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Suspense, lazy, useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react';
 import { activeTabStore, useActiveTabId, useIsSftpActive, useIsTerminalLayerVisible, useIsVaultActive } from './application/state/activeTabStore';
 import { useAutoSync } from './application/state/useAutoSync';
+import { useImmersiveMode } from './application/state/useImmersiveMode';
 import { useManagedSourceSync } from './application/state/useManagedSourceSync';
 import { usePortForwardingAutoStart } from './application/state/usePortForwardingAutoStart';
 import { usePortForwardingState } from './application/state/usePortForwardingState';
@@ -14,7 +15,15 @@ import { initializeUIFonts } from './application/state/uiFontStore';
 import { I18nProvider, useI18n } from './application/i18n/I18nProvider';
 import { matchesKeyBinding } from './domain/models';
 import { resolveHostAuth } from './domain/sshAuth';
+import { resolveHostTerminalThemeId } from './domain/terminalAppearance';
+import { collectSessionIds } from './domain/workspace';
+import { TERMINAL_THEMES } from './infrastructure/config/terminalThemes';
+import { useCustomThemes } from './application/state/customThemeStore';
+import { applySyncPayload } from './application/syncPayload';
+import { getCredentialProtectionAvailability } from './infrastructure/services/credentialProtection';
 import { netcattyBridge } from './infrastructure/services/netcattyBridge';
+import { localStorageAdapter } from './infrastructure/persistence/localStorageAdapter';
+import { STORAGE_KEY_DEBUG_HOTKEYS } from './infrastructure/config/storageKeys';
 import { TopTabs } from './components/TopTabs';
 import { Button } from './components/ui/button';
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from './components/ui/dialog';
@@ -25,7 +34,8 @@ import { VaultView, VaultSection } from './components/VaultView';
 import { KeyboardInteractiveModal, KeyboardInteractiveRequest } from './components/KeyboardInteractiveModal';
 import { PassphraseModal, PassphraseRequest } from './components/PassphraseModal';
 import { cn } from './lib/utils';
-import { ConnectionLog, Host, HostProtocol, SerialConfig, TerminalTheme } from './types';
+import { classifyLocalShellType } from './lib/localShell';
+import { ConnectionLog, Host, HostProtocol, SerialConfig, TerminalSession, TerminalTheme } from './types';
 import { LogView as LogViewType } from './application/state/useSessionState';
 import type { SftpView as SftpViewComponent } from './components/SftpView';
 import type { TerminalLayer as TerminalLayerComponent } from './components/TerminalLayer';
@@ -94,8 +104,7 @@ const LazyCreateWorkspaceDialog = lazy(() =>
 const IS_DEV = import.meta.env.DEV;
 const HOTKEY_DEBUG =
   IS_DEV &&
-  typeof window !== "undefined" &&
-  window.localStorage?.getItem("debug.hotkeys") === "1";
+  localStorageAdapter.readString(STORAGE_KEY_DEBUG_HOTKEYS) === "1";
 
 const LazySftpView = lazy(() =>
   import('./components/SftpView').then((m) => ({ default: m.SftpView })),
@@ -166,8 +175,9 @@ function App({ settings }: { settings: SettingsState }) {
   const [passphraseQueue, setPassphraseQueue] = useState<PassphraseRequest[]>([]);
 
   const {
-    theme,
     setTheme,
+    resolvedTheme,
+    terminalThemeId,
     setTerminalThemeId,
     currentTerminalTheme,
     terminalFontFamilyId,
@@ -178,11 +188,31 @@ function App({ settings }: { settings: SettingsState }) {
     hotkeyScheme,
     keyBindings,
     isHotkeyRecording,
+    sftpDoubleClickBehavior,
+    sftpAutoSync,
+    sftpShowHiddenFiles,
+    sftpUseCompressedUpload,
+    sftpAutoOpenSidebar,
+    sftpDefaultViewMode,
+    editorWordWrap,
+    setEditorWordWrap,
     sessionLogsEnabled,
     sessionLogsDir,
     sessionLogsFormat,
+    reapplyCurrentTheme,
+    immersiveMode,
+    workspaceFocusStyle,
   } = settings;
 
+  // Sync workspace focus indicator style to DOM for CSS targeting
+  useEffect(() => {
+    if (workspaceFocusStyle === 'border') {
+      document.documentElement.setAttribute('data-workspace-focus', 'border');
+    } else {
+      document.documentElement.removeAttribute('data-workspace-focus');
+    }
+  }, [workspaceFocusStyle]);
+
   const {
     hosts,
     keys,
@@ -260,6 +290,74 @@ function App({ settings }: { settings: SettingsState }) {
   // isMacClient is used for window controls styling
   const isMacClient = typeof navigator !== 'undefined' && /Mac|Macintosh/.test(navigator.userAgent);
 
+  // ---------------------------------------------------------------------------
+  // Immersive Mode — derive UI chrome colors from the active terminal's theme
+  // ---------------------------------------------------------------------------
+  const activeTabId = useActiveTabId();
+  const customThemes = useCustomThemes();
+
+  // Resolve the effective TerminalTheme for the currently focused terminal tab
+  const hostById = useMemo(
+    () => new Map(hosts.map((host) => [host.id, host])),
+    [hosts],
+  );
+  const sessionById = useMemo(
+    () => new Map(sessions.map((session) => [session.id, session])),
+    [sessions],
+  );
+  const workspaceById = useMemo(
+    () => new Map(workspaces.map((workspace) => [workspace.id, workspace])),
+    [workspaces],
+  );
+  const themeById = useMemo(
+    () => new Map([...customThemes, ...TERMINAL_THEMES].map((theme) => [theme.id, theme])),
+    [customThemes],
+  );
+  const activeTerminalTheme = useMemo<TerminalTheme | null>(() => {
+    if (activeTabId === 'vault' || activeTabId === 'sftp') return null;
+
+    const resolveTheme = (s: TerminalSession): TerminalTheme => {
+      const host = hostById.get(s.hostId) ?? null;
+      const themeId = resolveHostTerminalThemeId(host, currentTerminalTheme.id);
+      return themeById.get(themeId) || currentTerminalTheme;
+    };
+
+    // Workspace
+    const workspace = workspaceById.get(activeTabId);
+    if (workspace) {
+      // Focus mode: use the focused (or first remaining) session's theme
+      if (workspace.viewMode === 'focus') {
+        const wsSessionIds = collectSessionIds(workspace.root);
+        const focused = (workspace.focusedSessionId
+          ? sessionById.get(workspace.focusedSessionId)
+          : null)
+          ?? wsSessionIds.map((id) => sessionById.get(id)).find(Boolean);
+        return focused ? resolveTheme(focused) : null;
+      }
+      // Split mode: require all sessions to share the same theme
+      const sessionIds = collectSessionIds(workspace.root);
+      const wsSessions = sessionIds
+        .map((id) => sessionById.get(id))
+        .filter(Boolean) as TerminalSession[];
+      if (wsSessions.length === 0) return null;
+      const firstTheme = resolveTheme(wsSessions[0]);
+      const allSame = wsSessions.every(s => resolveTheme(s).id === firstTheme.id);
+      return allSame ? firstTheme : null;
+    }
+
+    // Single session tab
+    const session = sessionById.get(activeTabId);
+    if (!session) return null;
+    return resolveTheme(session);
+  }, [activeTabId, currentTerminalTheme, hostById, sessionById, themeById, workspaceById]);
+
+  useImmersiveMode({
+    isImmersive: immersiveMode,
+    activeTabId,
+    activeTerminalTheme,
+    restoreOriginalTheme: reapplyCurrentTheme,
+  });
+
   // Get port forwarding rules and import function
   const { rules: portForwardingRules, importRules: importPortForwardingRules, startTunnel, stopTunnel } = usePortForwardingState();
 
@@ -281,20 +379,16 @@ function App({ settings }: { settings: SettingsState }) {
     identities,
     snippets,
     customGroups,
+    snippetPackages,
     portForwardingRules: portForwardingRulesForSync,
     knownHosts,
+    settingsVersion: settings.settingsVersion,
     onApplyPayload: (payload) => {
-      importDataFromString(JSON.stringify({
-        hosts: payload.hosts,
-        keys: payload.keys,
-        identities: payload.identities,
-        snippets: payload.snippets,
-        customGroups: payload.customGroups,
-      }));
-
-      if (payload.portForwardingRules) {
-        importPortForwardingRules(payload.portForwardingRules);
-      }
+      applySyncPayload(payload, {
+        importVaultData: importDataFromString,
+        importPortForwardingRules,
+        onSettingsApplied: settings.rehydrateAllFromStorage,
+      });
     },
   });
 
@@ -309,10 +403,155 @@ function App({ settings }: { settings: SettingsState }) {
   }, [handleSyncNow]);
 
   // Update check hook - checks for new versions on startup
-  const { updateState, openReleasePage, dismissUpdate } = useUpdateCheck();
+  const { updateState, dismissUpdate, installUpdate } = useUpdateCheck();
 
-  // Show toast notification when update is available
+  // Window controls - must be before update toast effect which uses openSettingsWindow
+  const { openSettingsWindow } = useWindowControls();
+  const _handleTrayJumpToSession = useEffectEvent((sessionId: string) => {
+    const session = sessions.find((item) => item.id === sessionId);
+    if (session?.workspaceId) {
+      setActiveTabId(session.workspaceId);
+      setWorkspaceFocusedSession(session.workspaceId, sessionId);
+      return;
+    }
+    setActiveTabId(sessionId);
+  });
+  const _handleTrayTogglePortForward = useEffectEvent((ruleId: string, start: boolean) => {
+    const rule = portForwardingRules.find((item) => item.id === ruleId);
+    if (!rule) return;
+    const host = rule.hostId ? hosts.find((item) => item.id === rule.hostId) : undefined;
+    if (!host) {
+      toast.error(t("pf.error.hostNotFound"));
+      return;
+    }
+
+    if (start) {
+      void startTunnel(rule, host, hosts, keys, identities, (status, error) => {
+        if (status === "error" && error) toast.error(error);
+      }, rule.autoStart);
+      return;
+    }
+
+    void stopTunnel(ruleId);
+  });
+  const _handleTrayPanelConnect = useEffectEvent((hostId: string) => {
+    const host = hosts.find((item) => item.id === hostId);
+    if (!host) {
+      toast.error(t("pf.error.hostNotFound"));
+      return;
+    }
+
+    const { username, hostname: localHost } = systemInfoRef.current;
+    if (host.protocol === 'serial') {
+      const portName = host.hostname.split('/').pop() || host.hostname;
+      const sessionId = connectToHost(host);
+      addConnectionLog({
+        sessionId,
+        hostId: host.id,
+        hostLabel: host.label || `Serial: ${portName}`,
+        hostname: host.hostname,
+        username,
+        protocol: 'serial',
+        startTime: Date.now(),
+        localUsername: username,
+        localHostname: localHost,
+        saved: false,
+      });
+      return;
+    }
+
+    const protocol = host.moshEnabled ? 'mosh' : (host.protocol || 'ssh');
+    const resolvedAuth = resolveHostAuth({ host, keys, identities });
+    const sessionId = connectToHost(host);
+    addConnectionLog({
+      sessionId,
+      hostId: host.id,
+      hostLabel: host.label,
+      hostname: host.hostname,
+      username: resolvedAuth.username || 'root',
+      protocol: protocol as 'ssh' | 'telnet' | 'local' | 'mosh',
+      startTime: Date.now(),
+      localUsername: username,
+      localHostname: localHost,
+      saved: false,
+    });
+  });
+  const _handleGlobalHotkeyKeyDown = useEffectEvent((e: KeyboardEvent) => {
+    const isMac = hotkeyScheme === 'mac';
+    const target = e.target as HTMLElement;
+    const isFormElement = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
+    const isMonacoElement =
+      target instanceof HTMLElement &&
+      !!target.closest?.('.monaco-editor, .monaco-diff-editor, .monaco-inputbox');
+    const isXtermInput =
+      target instanceof HTMLElement &&
+      !!target.closest?.(".xterm, .xterm-helper-textarea, .xterm-screen, .xterm-viewport");
+
+    if ((isFormElement || isMonacoElement) && !isXtermInput && e.key !== 'Escape') {
+      return;
+    }
+
+    const isTerminalElement =
+      target instanceof HTMLElement &&
+      !!target.closest?.(".xterm, .xterm-helper-textarea, .xterm-screen, .xterm-viewport");
+    const isTerminalInPath = Boolean(
+      e.composedPath?.().some(
+        (node) =>
+          node instanceof HTMLElement &&
+          (node.classList.contains("xterm") ||
+            node.classList.contains("xterm-helper-textarea") ||
+            node.classList.contains("xterm-screen") ||
+            node.classList.contains("xterm-viewport") ||
+            node.hasAttribute("data-session-id")),
+      ),
+    );
+
+    for (const binding of keyBindings) {
+      const keyStr = isMac ? binding.mac : binding.pc;
+      if (!matchesKeyBinding(e, keyStr, isMac)) continue;
+      if (HOTKEY_DEBUG) console.log('[Hotkeys] Matched binding:', binding.action, keyStr);
+      if (binding.category === 'sftp') {
+        continue;
+      }
+      const terminalActions = ['copy', 'paste', 'selectAll', 'clearBuffer', 'searchTerminal'];
+      if (terminalActions.includes(binding.action)) {
+        if (isTerminalElement) {
+          return;
+        }
+        continue;
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+      if (HOTKEY_DEBUG) {
+        console.log('[Hotkeys] Global handle', {
+          action: binding.action,
+          key: e.key,
+          meta: e.metaKey,
+          ctrl: e.ctrlKey,
+          alt: e.altKey,
+          shift: e.shiftKey,
+          targetTag: target?.tagName,
+          isTerminalElement,
+          isTerminalInPath,
+        });
+      }
+      executeHotkeyAction(binding.action, e);
+      return;
+    }
+  });
+  const _handleEscapeKeyDown = useEffectEvent((e: KeyboardEvent) => {
+    if (e.key === 'Escape' && isQuickSwitcherOpen) {
+      setIsQuickSwitcherOpen(false);
+    }
+  });
+
+  // Show toast notification when update is available (only when auto-download is idle)
   useEffect(() => {
+    // Skip "update available" toast if auto-download has already started or completed
+    if (updateState.autoDownloadStatus !== 'idle') return;
+    // Don't show automatic notification when auto-update is disabled
+    if (localStorageAdapter.readString('netcatty_auto_update_enabled_v1') === 'false') return;
     if (updateState.hasUpdate && updateState.latestRelease) {
       const version = updateState.latestRelease.version;
       toast.info(
@@ -321,25 +560,57 @@ function App({ settings }: { settings: SettingsState }) {
           title: t('update.available.title'),
           duration: 8000, // Show longer for update notifications
           onClick: () => {
-            openReleasePage();
+            void openSettingsWindow();
+            // Dismiss the update so the toast doesn't re-fire on every render.
+            // On unsupported platforms (where autoDownloadStatus stays 'idle')
+            // this is the only way to suppress the notification for this version.
+            // On supported platforms this toast only shows before auto-download
+            // starts, and the Settings window's own useUpdateCheck will pick up
+            // the download state via IPC events independently of the dismiss.
             dismissUpdate();
           },
-          actionLabel: t('update.downloadNow'),
+          actionLabel: t('update.viewInSettings'),
         }
       );
     }
-  }, [updateState.hasUpdate, updateState.latestRelease, t, openReleasePage, dismissUpdate]);
+  }, [updateState.hasUpdate, updateState.latestRelease, updateState.autoDownloadStatus, t, openSettingsWindow, dismissUpdate]);
 
-  // Memoize keys for port forwarding to prevent unnecessary re-renders
-  const portForwardingKeys = useMemo(
-    () => keys.map((k) => ({ id: k.id, privateKey: k.privateKey })),
-    [keys]
-  );
+  // Track previous autoDownloadStatus so toast effects fire only on actual transitions,
+  // not when unrelated deps (installUpdate, openSettingsWindow) change their reference.
+  const prevAutoDownloadStatusRef = useRef(updateState.autoDownloadStatus);
+  useEffect(() => {
+    const prev = prevAutoDownloadStatusRef.current;
+    prevAutoDownloadStatusRef.current = updateState.autoDownloadStatus;
+    if (prev === updateState.autoDownloadStatus) return;
+
+    if (updateState.autoDownloadStatus === 'ready') {
+      const version = updateState.latestRelease?.version ?? '';
+      toast.info(
+        t('update.readyToInstall.message', { version }),
+        {
+          title: t('update.readyToInstall.title'),
+          duration: 0,
+          actionLabel: t('update.restartNow'),
+          onClick: () => installUpdate(),
+        }
+      );
+    } else if (updateState.autoDownloadStatus === 'error') {
+      toast.error(
+        t('update.downloadFailed.message'),
+        {
+          title: t('update.downloadFailed.title'),
+          actionLabel: t('update.viewInSettings'),
+          onClick: () => void openSettingsWindow(),
+        }
+      );
+    }
+  }, [updateState.autoDownloadStatus, updateState.latestRelease?.version, t, installUpdate, openSettingsWindow]);
 
   // Auto-start port forwarding rules on app launch
   usePortForwardingAutoStart({
     hosts,
-    keys: portForwardingKeys,
+    keys,
+    identities,
   });
 
   // Sync tray menu data + handle tray actions
@@ -380,87 +651,34 @@ function App({ settings }: { settings: SettingsState }) {
     if (!bridge?.onTrayFocusSession || !bridge?.onTrayTogglePortForward) return;
 
     const unsubscribeFocus = bridge.onTrayFocusSession((sessionId) => {
-      // Find the session to check if it belongs to a workspace
-      const session = sessions.find((s) => s.id === sessionId);
-      if (session?.workspaceId) {
-        // Session is in a workspace - navigate to workspace and focus the session
-        setActiveTabId(session.workspaceId);
-        setWorkspaceFocusedSession(session.workspaceId, sessionId);
-      } else {
-        // Standalone session or session not found - just set tab
-        setActiveTabId(sessionId);
-      }
+      _handleTrayJumpToSession(sessionId);
     });
-
     const unsubscribeToggle = bridge.onTrayTogglePortForward((ruleId, start) => {
-      const rule = portForwardingRules.find((r) => r.id === ruleId);
-      if (!rule) return;
-      const host = rule.hostId ? hosts.find((h) => h.id === rule.hostId) : undefined;
-      if (!host) {
-        toast.error(t("pf.error.hostNotFound"));
-        return;
-      }
-
-      const keysForPf = keys.map((k) => ({ id: k.id, privateKey: k.privateKey }));
-      if (start) {
-        void startTunnel(rule, host, keysForPf, (status, error) => {
-          if (status === "error" && error) toast.error(error);
-        }, rule.autoStart);
-      } else {
-        void stopTunnel(ruleId);
-      }
+      _handleTrayTogglePortForward(ruleId, start);
     });
 
     return () => {
       unsubscribeFocus?.();
       unsubscribeToggle?.();
     };
-  }, [hosts, keys, portForwardingRules, sessions, setActiveTabId, setWorkspaceFocusedSession, startTunnel, stopTunnel, t]);
+  }, []);
 
   // Tray panel actions (from main process)
   useEffect(() => {
-    const handlerJump = (sessionId: string) => {
-      // Find the session to check if it belongs to a workspace
-      const session = sessions.find((s) => s.id === sessionId);
-      if (session?.workspaceId) {
-        // Session is in a workspace - navigate to workspace and focus the session
-        setActiveTabId(session.workspaceId);
-        setWorkspaceFocusedSession(session.workspaceId, sessionId);
-      } else {
-        // Standalone session or session not found - just set tab
-        setActiveTabId(sessionId);
-      }
-    };
-
-    const handlerConnect = (hostId: string) => {
-      const host = hosts.find((h) => h.id === hostId);
-      if (!host) {
-        toast.error(t("pf.error.hostNotFound"));
-        return;
-      }
-
-      addConnectionLog({
-        hostId: host.id,
-        hostLabel: host.label,
-        hostname: host.hostname,
-        username: host.username,
-        localHostname: "",
-        saved: false,
-      });
-
-      connectToHost(host);
-    };
-
     const bridge = netcattyBridge.get();
     if (!bridge?.onTrayPanelJumpToSession || !bridge?.onTrayPanelConnectToHost) return;
 
-    const unsubscribeJump = bridge.onTrayPanelJumpToSession(handlerJump);
-    const unsubscribeConnect = bridge.onTrayPanelConnectToHost(handlerConnect);
+    const unsubscribeJump = bridge.onTrayPanelJumpToSession((sessionId) => {
+      _handleTrayJumpToSession(sessionId);
+    });
+    const unsubscribeConnect = bridge.onTrayPanelConnectToHost((hostId) => {
+      _handleTrayPanelConnect(hostId);
+    });
     return () => {
       unsubscribeJump?.();
       unsubscribeConnect?.();
     };
-  }, [addConnectionLog, connectToHost, hosts, sessions, setActiveTabId, setWorkspaceFocusedSession, t]);
+  }, []);
 
   // Keyboard-interactive authentication (2FA/MFA) event listener
   useEffect(() => {
@@ -583,6 +801,24 @@ function App({ settings }: { settings: SettingsState }) {
   const addConnectionLogRef = useRef(addConnectionLog);
   addConnectionLogRef.current = addConnectionLog;
 
+  const createLocalTerminalWithCurrentShell = useCallback(() => {
+    return createLocalTerminal({
+      shellType: classifyLocalShellType(terminalSettings.localShell, navigator.userAgent),
+    });
+  }, [createLocalTerminal, terminalSettings.localShell]);
+
+  const splitSessionWithCurrentShell = useCallback((sessionId: string, direction: 'horizontal' | 'vertical') => {
+    return splitSession(sessionId, direction, {
+      localShellType: classifyLocalShellType(terminalSettings.localShell, navigator.userAgent),
+    });
+  }, [splitSession, terminalSettings.localShell]);
+
+  const copySessionWithCurrentShell = useCallback((sessionId: string) => {
+    return copySession(sessionId, {
+      localShellType: classifyLocalShellType(terminalSettings.localShell, navigator.userAgent),
+    });
+  }, [copySession, terminalSettings.localShell]);
+
   // Shared hotkey action handler - used by both global handler and terminal callback
   const executeHotkeyAction = useCallback((action: string, e: KeyboardEvent) => {
     switch (action) {
@@ -654,7 +890,7 @@ function App({ settings }: { settings: SettingsState }) {
           localHostname: systemInfoRef.current.hostname,
           saved: false,
         });
-        createLocalTerminal();
+        createLocalTerminalWithCurrentShell();
         break;
       case 'openHosts':
         setActiveTabId('vault');
@@ -693,7 +929,7 @@ function App({ settings }: { settings: SettingsState }) {
         const activeWs = workspaces.find(w => w.id === currentId);
         if (activeSession && !activeSession.workspaceId) {
           // Standalone session - split it
-          splitSession(activeSession.id, 'horizontal');
+          splitSessionWithCurrentShell(activeSession.id, 'horizontal');
         } else if (activeWs) {
           // In a workspace - need to determine focused session
           // For now, we'll need the terminal to handle this via context menu
@@ -708,7 +944,7 @@ function App({ settings }: { settings: SettingsState }) {
         const activeWs = workspaces.find(w => w.id === currentId);
         if (activeSession && !activeSession.workspaceId) {
           // Standalone session - split it
-          splitSession(activeSession.id, 'vertical');
+          splitSessionWithCurrentShell(activeSession.id, 'vertical');
         } else if (activeWs) {
           // In a workspace - need to determine focused session
           if (IS_DEV) console.log('[Hotkey] Split vertical in workspace - use context menu on specific terminal');
@@ -748,7 +984,7 @@ function App({ settings }: { settings: SettingsState }) {
         break;
       }
     }
-  }, [orderedTabs, sessions, workspaces, setActiveTabId, closeSession, closeWorkspace, createLocalTerminal, splitSession, moveFocusInWorkspace, toggleBroadcast]);
+  }, [orderedTabs, sessions, workspaces, setActiveTabId, closeSession, closeWorkspace, createLocalTerminalWithCurrentShell, splitSessionWithCurrentShell, moveFocusInWorkspace, toggleBroadcast]);
 
   // Callback for terminal to invoke app-level hotkey actions
   const handleHotkeyAction = useCallback((action: string, e: KeyboardEvent) => {
@@ -759,96 +995,21 @@ function App({ settings }: { settings: SettingsState }) {
   useEffect(() => {
     if (hotkeyScheme === 'disabled' || isHotkeyRecording) return;
 
-    const isMac = hotkeyScheme === 'mac';
-    if (HOTKEY_DEBUG) {
-      console.log('[Hotkeys] Registering global hotkey handler, scheme:', hotkeyScheme, 'bindings count:', keyBindings.length);
-    }
-
     const handleGlobalKeyDown = (e: KeyboardEvent) => {
-      // Don't handle if we're in an input or textarea (except for Escape)
-      // Note: xterm terminal handles its own key interception via attachCustomKeyEventHandler
-      const target = e.target as HTMLElement;
-      const isFormElement = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
-      const isMonacoElement =
-        target instanceof HTMLElement &&
-        !!target.closest?.('.monaco-editor, .monaco-diff-editor, .monaco-inputbox');
-      const isXtermInput =
-        target instanceof HTMLElement &&
-        !!target.closest?.(".xterm, .xterm-helper-textarea, .xterm-screen, .xterm-viewport");
-
-      // Monaco is not always contentEditable/input, so treat it as an editor surface.
-      if ((isFormElement || isMonacoElement) && !isXtermInput && e.key !== 'Escape') {
-        return;
-      }
-
-      const isTerminalElement =
-        target instanceof HTMLElement &&
-        !!target.closest?.(".xterm, .xterm-helper-textarea, .xterm-screen, .xterm-viewport");
-      const isTerminalInPath = Boolean(
-        e.composedPath?.().some(
-          (node) =>
-            node instanceof HTMLElement &&
-            (node.classList.contains("xterm") ||
-              node.classList.contains("xterm-helper-textarea") ||
-              node.classList.contains("xterm-screen") ||
-              node.classList.contains("xterm-viewport") ||
-              node.hasAttribute("data-session-id")),
-        ),
-      );
-
-      // Check each key binding
-      for (const binding of keyBindings) {
-        const keyStr = isMac ? binding.mac : binding.pc;
-        if (matchesKeyBinding(e, keyStr, isMac)) {
-          if (HOTKEY_DEBUG) console.log('[Hotkeys] Matched binding:', binding.action, keyStr);
-          // SFTP shortcuts are handled by SFTP-specific hooks.
-          if (binding.category === 'sftp') {
-            continue;
-          }
-          // Terminal-specific actions should be handled by the terminal
-          // Don't handle them at app level
-          const terminalActions = ['copy', 'paste', 'selectAll', 'clearBuffer', 'searchTerminal'];
-          if (terminalActions.includes(binding.action)) {
-            if (isTerminalElement) {
-              return; // Let terminal handle it
-            }
-            continue; // Ignore terminal actions outside terminal
-          }
-
-          e.preventDefault();
-          e.stopPropagation();
-          if (HOTKEY_DEBUG) {
-            console.log('[Hotkeys] Global handle', {
-              action: binding.action,
-              key: e.key,
-              meta: e.metaKey,
-              ctrl: e.ctrlKey,
-              alt: e.altKey,
-              shift: e.shiftKey,
-              targetTag: target?.tagName,
-              isTerminalElement,
-              isTerminalInPath,
-            });
-          }
-          executeHotkeyAction(binding.action, e);
-          return;
-        }
-      }
+      _handleGlobalHotkeyKeyDown(e);
     };
 
     window.addEventListener('keydown', handleGlobalKeyDown, true);
     return () => window.removeEventListener('keydown', handleGlobalKeyDown, true);
-  }, [hotkeyScheme, keyBindings, isHotkeyRecording, executeHotkeyAction]);
+  }, [hotkeyScheme, isHotkeyRecording]);
 
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isQuickSwitcherOpen) {
-        setIsQuickSwitcherOpen(false);
-      }
+      _handleEscapeKeyDown(e);
     };
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
-  }, [isQuickSwitcherOpen]);
+  }, []);
 
   const quickResults = useMemo(() => {
     if (!isQuickSwitcherOpen) return [];
@@ -861,7 +1022,7 @@ function App({ settings }: { settings: SettingsState }) {
       )
       : hosts;
     return filtered;
-  }, [hosts, quickSearch, isQuickSwitcherOpen]);
+  }, [quickSearch, hosts, isQuickSwitcherOpen]);
 
   const handleDeleteHost = useCallback((hostId: string) => {
     const target = hosts.find(h => h.id === hostId);
@@ -894,7 +1055,9 @@ function App({ settings }: { settings: SettingsState }) {
   // Wrapper to create local terminal with logging
   const handleCreateLocalTerminal = useCallback(() => {
     const { username, hostname } = systemInfoRef.current;
+    const sessionId = createLocalTerminalWithCurrentShell();
     addConnectionLog({
+      sessionId,
       hostId: '',
       hostLabel: 'Local Terminal',
       hostname: 'localhost',
@@ -905,8 +1068,7 @@ function App({ settings }: { settings: SettingsState }) {
       localHostname: hostname,
       saved: false,
     });
-    createLocalTerminal();
-  }, [addConnectionLog, createLocalTerminal]);
+  }, [addConnectionLog, createLocalTerminalWithCurrentShell]);
 
   // Wrapper to connect to host with logging
   const handleConnectToHost = useCallback((host: Host) => {
@@ -915,7 +1077,9 @@ function App({ settings }: { settings: SettingsState }) {
     // Handle serial hosts separately
     if (host.protocol === 'serial') {
       const portName = host.hostname.split('/').pop() || host.hostname;
+      const sessionId = connectToHost(host);
       addConnectionLog({
+        sessionId,
         hostId: host.id,
         hostLabel: host.label || `Serial: ${portName}`,
         hostname: host.hostname,
@@ -926,13 +1090,14 @@ function App({ settings }: { settings: SettingsState }) {
         localHostname: localHost,
         saved: false,
       });
-      connectToHost(host);
       return;
     }
 
     const protocol = host.moshEnabled ? 'mosh' : (host.protocol || 'ssh');
     const resolvedAuth = resolveHostAuth({ host, keys, identities });
+    const sessionId = connectToHost(host);
     addConnectionLog({
+      sessionId,
       hostId: host.id,
       hostLabel: host.label,
       hostname: host.hostname,
@@ -943,14 +1108,15 @@ function App({ settings }: { settings: SettingsState }) {
       localHostname: localHost,
       saved: false,
     });
-    connectToHost(host);
   }, [addConnectionLog, connectToHost, identities, keys]);
 
   // Wrapper to create serial session with logging
-  const handleConnectSerial = useCallback((config: SerialConfig) => {
+  const handleConnectSerial = useCallback((config: SerialConfig, options?: { charset?: string }) => {
     const { username, hostname } = systemInfoRef.current;
     const portName = config.path.split('/').pop() || config.path;
+    const sessionId = createSerialSession(config, options);
     addConnectionLog({
+      sessionId,
       hostId: '',
       hostLabel: `Serial: ${portName}`,
       hostname: config.path,
@@ -961,32 +1127,23 @@ function App({ settings }: { settings: SettingsState }) {
       localHostname: hostname,
       saved: false,
     });
-    createSerialSession(config);
   }, [addConnectionLog, createSerialSession]);
 
   // Handle terminal data capture when session exits
   const handleTerminalDataCapture = useCallback((sessionId: string, data: string) => {
     if (IS_DEV) console.log('[handleTerminalDataCapture] Called', { sessionId, dataLength: data.length });
-    // Find the connection log for this session
     const session = sessions.find(s => s.id === sessionId);
     if (IS_DEV) console.log('[handleTerminalDataCapture] Session', session);
-    if (!session) {
-      if (IS_DEV) console.log('[handleTerminalDataCapture] No session found');
-      return;
-    }
+    if (IS_DEV) console.log('[handleTerminalDataCapture] All logs:', connectionLogs.map(l => ({ id: l.id, sessionId: l.sessionId, hostname: l.hostname, endTime: l.endTime, hasTerminalData: !!l.terminalData })));
 
-    if (IS_DEV) console.log('[handleTerminalDataCapture] Looking for logs with hostname:', session.hostname);
-    if (IS_DEV) console.log('[handleTerminalDataCapture] All logs:', connectionLogs.map(l => ({ id: l.id, hostname: l.hostname, endTime: l.endTime, hasTerminalData: !!l.terminalData })));
-
-    // Find the most recent log matching this session's hostname and doesn't have terminalData yet
-    // For local terminal, hostname is 'localhost'
-    // Sort by startTime descending to find the most recent matching log
+    // Prefer the persisted sessionId because the session may already have been
+    // removed from state by the time the terminal unmount cleanup runs.
     const matchingLog = connectionLogs
-      .filter(log =>
-        log.hostname === session.hostname &&
-        !log.endTime &&
-        !log.terminalData
-      )
+      .filter((log) => {
+        if (log.endTime || log.terminalData) return false;
+        if (log.sessionId) return log.sessionId === sessionId;
+        return !!session && log.hostname === session.hostname;
+      })
       .sort((a, b) => b.startTime - a.startTime)[0];
 
     if (IS_DEV) console.log('[handleTerminalDataCapture] Matching log', matchingLog);
@@ -998,31 +1155,12 @@ function App({ settings }: { settings: SettingsState }) {
       });
       if (IS_DEV) console.log('[handleTerminalDataCapture] Updated log with terminalData');
 
-      // Auto-save session log if enabled
-      if (sessionLogsEnabled && sessionLogsDir && data) {
-        import('./infrastructure/services/netcattyBridge').then(({ netcattyBridge }) => {
-          const bridge = netcattyBridge.get();
-          if (bridge?.autoSaveSessionLog) {
-            bridge.autoSaveSessionLog({
-              terminalData: data,
-              hostLabel: matchingLog.hostLabel,
-              hostname: matchingLog.hostname,
-              hostId: matchingLog.hostId,
-              startTime: matchingLog.startTime,
-              format: sessionLogsFormat,
-              directory: sessionLogsDir,
-            }).then(result => {
-              if (IS_DEV) console.log('[handleTerminalDataCapture] Auto-save result:', result);
-            }).catch(err => {
-              console.error('[handleTerminalDataCapture] Auto-save failed:', err);
-            });
-          }
-        });
-      }
+      // Auto-save is now handled by real-time streaming in the main process
+      // via sessionLogStreamManager. No renderer-side fallback needed.
     } else {
       if (IS_DEV) console.log('[handleTerminalDataCapture] No matching log found!');
     }
-  }, [sessions, connectionLogs, updateConnectionLog, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat]);
+  }, [sessions, connectionLogs, updateConnectionLog]);
 
   // Check if host has multiple protocols enabled
   const hasMultipleProtocols = useCallback((host: Host) => {
@@ -1066,14 +1204,15 @@ function App({ settings }: { settings: SettingsState }) {
   }, [protocolSelectHost, handleConnectToHost]);
 
   const handleToggleTheme = useCallback(() => {
-    setTheme(prev => prev === 'dark' ? 'light' : 'dark');
-  }, [setTheme]);
+    // Toggle based on the actual rendered theme so clicking always produces a visible change,
+    // even when the stored preference is 'system'.
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+  }, [resolvedTheme, setTheme]);
 
   const handleOpenQuickSwitcher = useCallback(() => {
     setIsQuickSwitcherOpen(true);
   }, []);
 
-  const { openSettingsWindow } = useWindowControls();
 
   const handleOpenSettings = useCallback(() => {
     void (async () => {
@@ -1082,6 +1221,30 @@ function App({ settings }: { settings: SettingsState }) {
     })();
   }, [openSettingsWindow, t]);
 
+  const hasShownCredentialProtectionWarningRef = useRef(false);
+
+  useEffect(() => {
+    if (hasShownCredentialProtectionWarningRef.current) return;
+
+    let cancelled = false;
+    void (async () => {
+      const available = await getCredentialProtectionAvailability();
+      if (cancelled || available !== false) return;
+      hasShownCredentialProtectionWarningRef.current = true;
+
+      toast.warning(t('credentials.protectionUnavailable.message'), {
+        title: t('credentials.protectionUnavailable.title'),
+        actionLabel: t('credentials.protectionUnavailable.action'),
+        duration: 10000,
+        onClick: handleOpenSettings,
+      });
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [handleOpenSettings, t]);
+
   const handleEndSessionDrag = useCallback(() => {
     setDraggingSessionId(null);
   }, [setDraggingSessionId]);
@@ -1115,9 +1278,10 @@ function App({ settings }: { settings: SettingsState }) {
   }, []);
 
   return (
-    <div className="flex flex-col h-screen text-foreground font-sans netcatty-shell" onContextMenu={handleRootContextMenu}>
+    <div className={cn("flex flex-col h-screen text-foreground font-sans netcatty-shell", immersiveMode && activeTerminalTheme && "immersive-transition")} onContextMenu={handleRootContextMenu}>
       <TopTabs
-        theme={theme}
+        theme={resolvedTheme}
+        hosts={hosts}
         sessions={sessions}
         orphanSessions={orphanSessions}
         workspaces={workspaces}
@@ -1127,7 +1291,7 @@ function App({ settings }: { settings: SettingsState }) {
         isMacClient={isMacClient}
         onCloseSession={closeSession}
         onRenameSession={startSessionRename}
-        onCopySession={copySession}
+        onCopySession={copySessionWithCurrentShell}
         onRenameWorkspace={startWorkspaceRename}
         onCloseWorkspace={closeWorkspace}
         onCloseLogView={closeLogView}
@@ -1135,6 +1299,7 @@ function App({ settings }: { settings: SettingsState }) {
         onToggleTheme={handleToggleTheme}
         onOpenSettings={handleOpenSettings}
         onSyncNow={handleSyncNowManual}
+        isImmersiveActive={immersiveMode && activeTerminalTheme !== null}
         onStartSessionDrag={setDraggingSessionId}
         onEndSessionDrag={handleEndSessionDrag}
         onReorderTabs={reorderTabs}
@@ -1156,6 +1321,8 @@ function App({ settings }: { settings: SettingsState }) {
             sessions={sessions}
             hotkeyScheme={hotkeyScheme}
             keyBindings={keyBindings}
+            terminalThemeId={terminalThemeId}
+            terminalFontSize={terminalFontSize}
             onOpenSettings={handleOpenSettings}
             onOpenQuickSwitcher={handleOpenQuickSwitcher}
             onCreateLocalTerminal={handleCreateLocalTerminal}
@@ -1184,13 +1351,28 @@ function App({ settings }: { settings: SettingsState }) {
           />
         </VaultViewContainer>
 
-        <SftpViewMount hosts={hosts} keys={keys} identities={identities} />
+        <SftpViewMount
+          hosts={hosts}
+          keys={keys}
+          identities={identities}
+          updateHosts={updateHosts}
+          sftpDefaultViewMode={sftpDefaultViewMode}
+          sftpDoubleClickBehavior={sftpDoubleClickBehavior}
+          sftpAutoSync={sftpAutoSync}
+          sftpShowHiddenFiles={sftpShowHiddenFiles}
+          sftpUseCompressedUpload={sftpUseCompressedUpload}
+          hotkeyScheme={hotkeyScheme}
+          keyBindings={keyBindings}
+          editorWordWrap={editorWordWrap}
+          setEditorWordWrap={setEditorWordWrap}
+        />
 
         <TerminalLayerMount
           hosts={hosts}
           keys={keys}
           identities={identities}
           snippets={snippets}
+          snippetPackages={snippetPackages}
           sessions={sessions}
           workspaces={workspaces}
           knownHosts={knownHosts}
@@ -1220,9 +1402,21 @@ function App({ settings }: { settings: SettingsState }) {
           onSetDraggingSessionId={setDraggingSessionId}
           onToggleWorkspaceViewMode={toggleWorkspaceViewMode}
           onSetWorkspaceFocusedSession={setWorkspaceFocusedSession}
-          onSplitSession={splitSession}
+          onSplitSession={splitSessionWithCurrentShell}
           isBroadcastEnabled={isBroadcastEnabled}
           onToggleBroadcast={toggleBroadcast}
+          updateHosts={updateHosts}
+          sftpDefaultViewMode={sftpDefaultViewMode}
+          sftpDoubleClickBehavior={sftpDoubleClickBehavior}
+          sftpAutoSync={sftpAutoSync}
+          sftpShowHiddenFiles={sftpShowHiddenFiles}
+          sftpUseCompressedUpload={sftpUseCompressedUpload}
+          sftpAutoOpenSidebar={sftpAutoOpenSidebar}
+          editorWordWrap={editorWordWrap}
+          setEditorWordWrap={setEditorWordWrap}
+          sessionLogsEnabled={sessionLogsEnabled}
+          sessionLogsDir={sessionLogsDir}
+          sessionLogsFormat={sessionLogsFormat}
         />
 
         {/* Log Views - readonly terminal replays */}

CHANGELOG.md

@@ -0,0 +1,32 @@
+# Changelog
+
+## [Unreleased] - 2026-03-11
+
+### 功能
+- 修复自动更新 IPC 事件仅发送到单个窗口的问题，改为广播所有窗口（主窗口 + 设置窗口均可收到）
+- 统一手动检查更新与自动更新的状态机，消除三套并行状态
+- 手动"检查更新"通过 GitHub API 检测版本，发现更新后异步触发 electron-updater 下载
+- 设置窗口中点击"检查更新"后，下载进度可实时反映在 UI 中
+- 应用启动后 5 秒自动触发 `electron-updater` 检查更新，无需用户手动点击
+- 发现新版本后自动开始下载（`autoDownload=true`）
+- 下载完成后弹出持久 toast 通知，用户点击"立即重启"即可安装
+- 下载失败时弹出错误 toast，提供"打开 Releases"降级入口
+- Settings > System 进度条实时展示自动下载进度，由 `useUpdateCheck` 统一驱动
+- Linux deb/rpm/snap 等不支持 electron-updater 的平台自动跳过，保持原有 GitHub API 通知行为
+
+### 设计原理
+- `broadcastToAllWindows` 替换 `getSenderWindow` 单点发送，保证所有窗口都能收到 IPC 事件
+- `manualCheckStatus` 字段追踪手动检查 UI 状态（idle/checking/available/up-to-date/error），与 `autoDownloadStatus` 在 UI 层按优先级渲染
+- `SettingsSystemTab` 不再持有本地 update state，单向接收 `useUpdateCheck` 统一数据
+- 将原有两套独立系统（GitHub API 通知 + electron-updater 手动下载）合并为统一状态机：`useUpdateCheck` 作为唯一事实来源，同时驱动 `App.tsx` toast 和 `SettingsSystemTab` 进度条
+- 全局持久化 IPC 监听器在 `autoUpdateBridge.init()` 时一次性注册，避免每次手动下载请求重复注册/清理监听器
+- `autoInstallOnAppQuit=false`，不做静默安装，由用户主动触发重启
+
+### 接口变更（SettingsSystemTabProps）
+- 移除：`autoDownloadStatus`、`downloadPercent`
+- 新增：`updateState`（完整 UpdateState）、`checkNow`、`installUpdate`、`openReleasePage`
+
+### 注意事项
+- `checkNow` 语义：使用 GitHub API（`performCheck`）检测是否有新版本，若发现更新且 electron-updater 尚未开始下载，则异步触发 `bridge.checkForUpdate()` 启动自动下载流程
+- 此功能仅对打包后的应用（Windows NSIS、macOS dmg/zip、Linux AppImage）生效，dev 模式需配合 `forceDevUpdateConfig=true` + `dev-app-update.yml` 测试（见 `.gitignore`）
+- `hasUpdate` 旧 toast 在 `autoDownloadStatus !== 'idle'` 时自动抑制，避免与新 toast 重复

README.ja-JP.md

@@ -59,6 +59,8 @@
 - [ビルドとパッケージ](#ビルドとパッケージ)
 - [技術スタック](#技術スタック)
 - [コントリビューション](#コントリビューション)
+- [コントリビューター](#コントリビューター)
+- [Star 履歴](#star-履歴)
 - [ライセンス](#ライセンス)
 
 ---
@@ -110,37 +112,37 @@
 <a name="デモ"></a>
 # デモ
 
-GIF で機能をさっと確認できます（素材は `screenshots/gifs/`）：
+動画で機能をさっと確認できます（素材は `screenshots/gifs/`）：
 
 ### Vault ビュー：グリッド / リスト / ツリー
 状況に合わせて見え方を切り替え。グリッドで全体像、リストで密度、ツリーで階層を扱えます。
 
-![Vault ビュー：グリッド/リスト/ツリー](screenshots/gifs/gird-list-tre-views.gif)
+https://github.com/user-attachments/assets/e2742987-3131-404d-bd4b-06423e5bfd99
 
 ### 分割ターミナル + セッション管理
 複数セッションを分割ペインで並べて作業。関連タスクを横並びにしてコンテキストスイッチを減らします。
 
-![分割ターミナル + セッション管理](screenshots/gifs/dual-terminal--split-manage.gif)
+https://github.com/user-attachments/assets/377d0c46-cc5a-4382-aa31-5acfd412ce62
 
 ### SFTP：ドラッグ＆ドロップ + 内蔵エディタ
 ドラッグ＆ドロップでファイルを移動し、内蔵エディタでそのまま編集できます。
 
-![SFTP：ドラッグ＆ドロップ + 内蔵エディタ](screenshots/gifs/sftpview-with-drag-and-built-in-editor.gif)
+https://github.com/user-attachments/assets/c6e06af4-b0d5-461c-b0c7-9d6f655af6c7
 
 ### ドラッグでアップロード
 ファイルをそのままドロップしてアップロードを開始。ダイアログ操作を減らせます。
 
-![ドラッグでアップロード](screenshots/gifs/drag-file-upload.gif)
+https://github.com/user-attachments/assets/c8e0c4ff-f020-4e18-9b09-681ec97b003f
 
 ### カスタムテーマ
 テーマを調整して自分の好みに合わせた見た目に。
 
-![カスタムテーマ](screenshots/gifs/custom-themes.gif)
+https://github.com/user-attachments/assets/77e2a693-4ef2-4823-8ca1-9bcbf14ed98b
 
 ### キーワードハイライト
 重要な出力（エラー/警告/マーカーなど）を見つけやすくするために、ハイライトをカスタマイズできます。
 
-![キーワードハイライト](screenshots/gifs/custom-highlight.gif)
+https://github.com/user-attachments/assets/e6516993-ad66-4594-8c28-57426082339b
 
 ---
 
@@ -196,6 +198,7 @@ Netcatty は接続したホストの OS を検出し、ホスト一覧でアイ
   <img src="public/distro/opensuse.svg" width="48" alt="openSUSE" title="openSUSE">
   <img src="public/distro/oracle.svg" width="48" alt="Oracle Linux" title="Oracle Linux">
   <img src="public/distro/kali.svg" width="48" alt="Kali Linux" title="Kali Linux">
+  <img src="public/distro/almalinux.svg" width="48" alt="AlmaLinux" title="AlmaLinux">
 </p>
 
 ---
@@ -215,11 +218,7 @@ Netcatty は接続したホストの OS を検出し、ホスト一覧でアイ
 
 または [GitHub Releases](https://github.com/binaricat/Netcatty/releases) ですべてのリリースを参照してください。
 
-> **⚠️ macOS ユーザーへ：** アプリはコード署名されていないため、macOS Gatekeeper によってブロックされます。ダウンロード後、以下のコマンドを実行して隔離属性を削除してください：
-> ```bash
-> xattr -cr /Applications/Netcatty.app
-> ```
-> または、アプリを右クリック → 開く → ダイアログで「開く」をクリックしてください。
+> **macOS ユーザーへ：** 現在のリリースはコード署名と notarization が行われている想定です。Gatekeeper の警告が出る場合は、GitHub Releases から最新版の公式ビルドを取得しているか確認してください。
 
 ### 前提条件
 - Node.js 18+ と npm
@@ -309,6 +308,17 @@ npm run pack:linux   # Linux (AppImage + DEB + RPM)
 
 ---
 
+<a name="コントリビューター"></a>
+# コントリビューター
+
+貢献してくださったすべての方に感謝します！
+
+<a href="https://github.com/binaricat/Netcatty/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=binaricat/Netcatty" />
+</a>
+
+---
+
 <a name="ライセンス"></a>
 # ライセンス
 
@@ -316,6 +326,19 @@ npm run pack:linux   # Linux (AppImage + DEB + RPM)
 
 ---
 
+<a name="star-履歴"></a>
+# Star 履歴
+
+<a href="https://star-history.com/#binaricat/Netcatty&Date">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=binaricat/Netcatty&type=Date&theme=dark" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=binaricat/Netcatty&type=Date" />
+   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=binaricat/Netcatty&type=Date" />
+ </picture>
+</a>
+
+---
+
 <p align="center">
   ❤️ を込めて作成 by <a href="https://ko-fi.com/binaricat">binaricat</a>
 </p>

README.md

@@ -5,13 +5,13 @@
 <h1 align="center">Netcatty</h1>
 
 <p align="center">
-  <strong>Modern SSH Client, SFTP Browser & Terminal Manager</strong><br/>
+  <strong>🔥 AI-Powered SSH Client, SFTP Browser & Terminal Manager 🚀</strong><br/>
   <a href="https://netcatty.app"><strong>netcatty.app</strong></a>
 </p>
 
 <p align="center">
   A beautiful, feature-rich SSH workspace built with Electron, React, and xterm.js.<br/>
-  Split terminals, Vault views, SFTP workflows, custom themes, and keyword highlighting — all in one.
+  🔥 Built-in AI Agent · Split terminals · Vault views · SFTP workflows · Custom themes — all in one.
 </p>
 
 <p align="center">
@@ -42,10 +42,52 @@
 
 [![Netcatty Main Interface](screenshots/main-window-dark.png)](screenshots/main-window-dark.png)
 
+---
+
+<a name="catty-agent"></a>
+# 🔥 Catty Agent — Your IT Ops AI Partner
+
+> 🚀 **Boost your IT ops daily work with AI power.** Catty Agent is the built-in AI assistant that understands your servers, executes commands, and handles complex multi-host operations — all through natural conversation.
+
+<p align="center">
+  <img src="screenshots/ai-feature.png" alt="Catty Agent Interface" width="800">
+</p>
+
+### 🔥 What can Catty Agent do?
+
+- 🚀 **Natural language server management** — just tell it what you need, no more memorizing commands
+- 🔥 **Real-time server diagnostics** — check status, inspect logs, monitor resources through conversation
+- 🚀 **Multi-host orchestration** — coordinate tasks across multiple servers simultaneously
+- 🔥 **Intelligent context awareness** — understands your server environment and provides tailored responses
+- 🚀 **One-click complex operations** — set up clusters, deploy services, and more with simple instructions
+
+### 🎬 AI in Action
+
+#### 🔥 Single Host — Intelligent Server Diagnostics
+
+Ask Catty Agent to check a server's health, and it runs the right commands, analyzes the output, and gives you a clear summary — all in seconds.
+
+
+https://github.com/user-attachments/assets/eecf08f1-80bd-49db-886d-b36e93388865
+
+
+
+
+#### 🚀 Multi-Host — Docker Swarm Cluster Setup
+
+Watch Catty Agent orchestrate a Docker Swarm cluster across two servers in one conversation. It handles the init, token exchange, and node joining — you just tell it what you want.
+
+
+
+https://github.com/user-attachments/assets/282027aa-5c9e-4bb1-b2c3-5eea9df2b203
+
+
+
 ---
 
 # Contents <!-- omit in toc -->
 
+- [🔥 Catty Agent — AI Partner](#catty-agent)
 - [What is Netcatty](#what-is-netcatty)
 - [Why Netcatty](#why-netcatty)
 - [Features](#features)
@@ -59,6 +101,8 @@
 - [Build & Package](#build--package)
 - [Tech Stack](#tech-stack)
 - [Contributing](#contributing)
+- [Contributors](#contributors)
+- [Star History](#star-history)
 - [License](#license)
 
 ---
@@ -111,37 +155,53 @@ If you regularly work with a fleet of servers, Netcatty is built for speed and f
 <a name="demos"></a>
 # Demos
 
-GIF previews (stored in `screenshots/gifs/`), rendered inline on GitHub:
+Video previews (stored in `screenshots/gifs/`), rendered inline on GitHub:
 
 ### Vault views: grid / list / tree
 Switch between different Vault views to match your workflow: overview in grid, dense scanning in list, and hierarchical navigation in tree.
 
-![Vault views: grid/list/tree](screenshots/gifs/gird-list-tre-views.gif)
+https://github.com/user-attachments/assets/e2742987-3131-404d-bd4b-06423e5bfd99
+
 
 ### Split terminals + session management
 Work in multiple sessions at once with split panes. Keep related tasks side-by-side and reduce context switching.
 
-![Split terminals + session management](screenshots/gifs/dual-terminal--split-manage.gif)
+https://github.com/user-attachments/assets/377d0c46-cc5a-4382-aa31-5acfd412ce62
+
+
 
 ### SFTP: drag & drop + built-in editor
 Move files with drag & drop, then edit quickly using the built-in editor without leaving the app.
 
-![SFTP: drag & drop + built-in editor](screenshots/gifs/sftpview-with-drag-and-built-in-editor.gif)
+https://github.com/user-attachments/assets/c6e06af4-b0d5-461c-b0c7-9d6f655af6c7
+
+
+
+
 
 ### Drag file upload
 Drop files into the app to kick off uploads without hunting through dialogs.
 
-![Drag file upload](screenshots/gifs/drag-file-upload.gif)
+https://github.com/user-attachments/assets/c8e0c4ff-f020-4e18-9b09-681ec97b003f
+
+
+
 
 ### Custom themes
 Make Netcatty yours: customize themes and UI appearance.
 
-![Custom themes](screenshots/gifs/custom-themes.gif)
+https://github.com/user-attachments/assets/77e2a693-4ef2-4823-8ca1-9bcbf14ed98b
+
+
+
 
 ### Keyword highlighting
 Highlight important terminal output so errors, warnings, and key events stand out at a glance.
 
-![Keyword highlighting](screenshots/gifs/custom-highlight.gif)
+https://github.com/user-attachments/assets/e6516993-ad66-4594-8c28-57426082339b
+
+
+
 
 ---
 
@@ -197,6 +257,7 @@ Netcatty automatically detects and displays OS icons for connected hosts:
   <img src="public/distro/opensuse.svg" width="48" alt="openSUSE" title="openSUSE">
   <img src="public/distro/oracle.svg" width="48" alt="Oracle Linux" title="Oracle Linux">
   <img src="public/distro/kali.svg" width="48" alt="Kali Linux" title="Kali Linux">
+  <img src="public/distro/almalinux.svg" width="48" alt="AlmaLinux" title="AlmaLinux">
 </p>
 
 <a name="getting-started"></a>
@@ -214,11 +275,7 @@ Download the latest release for your platform from [GitHub Releases](https://git
 
 Or browse all releases at [GitHub Releases](https://github.com/binaricat/Netcatty/releases).
 
-> **⚠️ macOS Users:** Since the app is not code-signed, macOS Gatekeeper will block it. After downloading, run this command to remove the quarantine attribute:
-> ```bash
-> xattr -cr /Applications/Netcatty.app
-> ```
-> Or right-click the app → Open → Click "Open" in the dialog.
+> **macOS Users:** Current releases are expected to be code-signed and notarized. If Gatekeeper still warns, make sure you downloaded the latest official build from GitHub Releases.
 
 ### Prerequisites
 - Node.js 18+ and npm
@@ -313,7 +370,9 @@ See [agents.md](agents.md) for architecture overview and coding conventions.
 
 Thanks to all the people who contribute!
 
-See: https://github.com/binaricat/Netcatty/graphs/contributors
+<a href="https://github.com/binaricat/Netcatty/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=binaricat/Netcatty" />
+</a>
 
 ---
 
@@ -324,6 +383,19 @@ This project is licensed under the **GPL-3.0 License** - see the [LICENSE](LICEN
 
 ---
 
+<a name="star-history"></a>
+# Star History
+
+<a href="https://star-history.com/#binaricat/Netcatty&Date">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=binaricat/Netcatty&type=Date&theme=dark" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=binaricat/Netcatty&type=Date" />
+   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=binaricat/Netcatty&type=Date" />
+ </picture>
+</a>
+
+---
+
 <p align="center">
   Made with ❤️ by <a href="https://ko-fi.com/binaricat">binaricat</a>
 </p>

README.zh-CN.md

@@ -59,6 +59,8 @@
 - [构建与打包](#构建与打包)
 - [技术栈](#技术栈)
 - [参与贡献](#参与贡献)
+- [贡献者](#贡献者)
+- [Star 历史](#star-历史)
 - [开源协议](#开源协议)
 
 ---
@@ -111,37 +113,37 @@
 <a name="演示"></a>
 # 演示
 
-GIF 预览（素材均在 `screenshots/gifs/`），在 GitHub README 中可直接观看：
+视频预览（素材均在 `screenshots/gifs/`），在 GitHub README 中可直接观看：
 
 ### Vault 视图：网格 / 列表 / 树形
 根据不同场景自由切换视图：网格适合总览，列表适合密集浏览，树形适合层级导航与整理。
 
-![Vault 视图：网格/列表/树形](screenshots/gifs/gird-list-tre-views.gif)
+https://github.com/user-attachments/assets/e2742987-3131-404d-bd4b-06423e5bfd99
 
 ### 分屏终端 + 会话管理
 用分屏把多个会话并排放在同一个工作区里，降低来回切换窗口/标签页的成本。
 
-![分屏终端 + 会话管理](screenshots/gifs/dual-terminal--split-manage.gif)
+https://github.com/user-attachments/assets/377d0c46-cc5a-4382-aa31-5acfd412ce62
 
 ### SFTP：拖拽 + 内置编辑器
 通过拖拽完成文件传输，并用内置编辑器快速修改文件内容，不用来回切换工具。
 
-![SFTP：拖拽 + 内置编辑器](screenshots/gifs/sftpview-with-drag-and-built-in-editor.gif)
+https://github.com/user-attachments/assets/c6e06af4-b0d5-461c-b0c7-9d6f655af6c7
 
 ### 拖拽文件上传
 把文件直接拖进应用即可触发上传流程，省去多层对话框与路径选择。
 
-![拖拽文件上传](screenshots/gifs/drag-file-upload.gif)
+https://github.com/user-attachments/assets/c8e0c4ff-f020-4e18-9b09-681ec97b003f
 
 ### 自定义主题
 按自己的审美与习惯定制主题与界面外观，让日常使用更顺手。
 
-![自定义主题](screenshots/gifs/custom-themes.gif)
+https://github.com/user-attachments/assets/77e2a693-4ef2-4823-8ca1-9bcbf14ed98b
 
 ### 关键词高亮
 让关键输出一眼可见：错误、告警或特定标记被高亮后更容易扫到与定位。
 
-![关键词高亮](screenshots/gifs/custom-highlight.gif)
+https://github.com/user-attachments/assets/e6516993-ad66-4594-8c28-57426082339b
 
 ---
 
@@ -197,6 +199,7 @@ Netcatty 会自动识别并在主机列表中展示对应的系统图标：
   <img src="public/distro/opensuse.svg" width="48" alt="openSUSE" title="openSUSE">
   <img src="public/distro/oracle.svg" width="48" alt="Oracle Linux" title="Oracle Linux">
   <img src="public/distro/kali.svg" width="48" alt="Kali Linux" title="Kali Linux">
+  <img src="public/distro/almalinux.svg" width="48" alt="AlmaLinux" title="AlmaLinux">
 </p>
 
 <a name="快速开始"></a>
@@ -214,11 +217,7 @@ Netcatty 会自动识别并在主机列表中展示对应的系统图标：
 
 或在 [GitHub Releases](https://github.com/binaricat/Netcatty/releases) 浏览所有版本。
 
-> **⚠️ macOS 用户注意：** 由于应用未经代码签名，macOS Gatekeeper 会阻止运行。下载后，请在终端运行以下命令移除隔离属性：
-> ```bash
-> xattr -cr /Applications/Netcatty.app
-> ```
-> 或者右键点击应用 → 打开 → 在弹出的对话框中点击"打开"。
+> **macOS 用户注意：** 当前发布版本应已完成代码签名和公证。如果 Gatekeeper 仍然提示风险，请确认您下载的是 GitHub Releases 中的最新官方构建。
 
 ### 前置条件
 - Node.js 18+ 和 npm
@@ -313,7 +312,9 @@ npm run pack:linux   # Linux (AppImage, deb, rpm)
 
 感谢所有参与贡献的人！
 
-查看：https://github.com/binaricat/Netcatty/graphs/contributors
+<a href="https://github.com/binaricat/Netcatty/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=binaricat/Netcatty" />
+</a>
 
 ---
 
@@ -324,6 +325,19 @@ npm run pack:linux   # Linux (AppImage, deb, rpm)
 
 ---
 
+<a name="star-历史"></a>
+# Star 历史
+
+<a href="https://star-history.com/#binaricat/Netcatty&Date">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=binaricat/Netcatty&type=Date&theme=dark" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=binaricat/Netcatty&type=Date" />
+   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=binaricat/Netcatty&type=Date" />
+ </picture>
+</a>
+
+---
+
 <p align="center">
   用 ❤️ 制作，作者 <a href="https://ko-fi.com/binaricat">binaricat</a>
 </p>

application/i18n/locales/en.ts

@@ -5,6 +5,9 @@ const en: Messages = {
   'common.save': 'Save',
   'common.cancel': 'Cancel',
   'common.close': 'Close',
+  'common.reset': 'Reset',
+  'common.zoomIn': 'Zoom in',
+  'common.zoomOut': 'Zoom out',
   'common.settings': 'Settings',
   'common.search': 'Search',
   'common.searchPlaceholder': 'Search...',
@@ -14,6 +17,7 @@ const en: Messages = {
   'common.import': 'Import',
   'common.generate': 'Generate',
   'common.delete': 'Delete',
+  'common.edit': 'Edit',
   'common.clear': 'Clear',
   'common.optional': 'Optional',
   'common.selectPlaceholder': 'Select...',
@@ -29,10 +33,12 @@ const en: Messages = {
   'common.back': 'Back',
   'common.apply': 'Apply',
   'common.use': 'Use',
+  'common.useGlobal': 'Use global',
   'common.saveChanges': 'Save Changes',
   'common.advanced': 'Advanced',
   'common.left': 'Left',
   'common.right': 'Right',
+  'common.more': 'More',
   'common.selectAHost': 'Select a host',
   'common.selectAHostPlaceholder': 'Select a host...',
   'sort.az': 'A-z',
@@ -48,6 +54,7 @@ const en: Messages = {
   // Dialogs / prompts
   'confirm.deleteHost': 'Delete Host "{name}"?',
   'confirm.deleteIdentity': 'Delete Identity "{name}"?',
+  'confirm.removeProvider': 'Remove provider "{name}"?',
   'dialog.createWorkspace.title': 'Create Workspace',
   'dialog.renameWorkspace.title': 'Rename workspace',
   'dialog.renameSession.title': 'Rename session',
@@ -57,6 +64,9 @@ const en: Messages = {
   'placeholder.sessionName': 'Session name',
   'placeholder.searchHosts': 'Search hosts...',
   'toast.settingsUnavailable': 'Settings window is unavailable on this platform.',
+  'credentials.protectionUnavailable.title': 'Credential Protection Unavailable',
+  'credentials.protectionUnavailable.message': 'Saved passwords and keys cannot be auto-decrypted on this device. Re-enter credentials before connecting.',
+  'credentials.protectionUnavailable.action': 'Open Settings',
 
   // Settings shell
   'settings.title': 'Settings',
@@ -80,6 +90,52 @@ const en: Messages = {
   'settings.system.clearing': 'Clearing...',
   'settings.system.clearResult': 'Deleted {deleted} file(s), {failed} failed.',
   'settings.system.tempDirectoryHint': 'Temporary files are created when opening remote files with external applications. They are automatically cleaned up when SFTP sessions close.',
+  'settings.system.credentials.title': 'Credential Protection',
+  'settings.system.credentials.status': 'Status',
+  'settings.system.credentials.checking': 'Checking...',
+  'settings.system.credentials.available': 'Available (OS keychain ready)',
+  'settings.system.credentials.unavailable': 'Unavailable (cannot decrypt saved credentials)',
+  'settings.system.credentials.unknown': 'Unknown (not supported in this environment)',
+  'settings.system.credentials.unavailableHint': 'Credentials encrypted on another user profile or machine cannot be decrypted here. Re-enter and save credentials on this device.',
+  'settings.system.credentials.portabilityHint': 'Cloud Sync is portable because it uses your master key encryption. Local safeStorage encryption is device/user scoped.',
+
+  // Settings > System > Crash Logs
+  'settings.system.crashLogs.title': 'Crash Logs',
+  'settings.system.crashLogs.description': 'View error logs from the main process to help diagnose unexpected behavior.',
+  'settings.system.crashLogs.noLogs': 'No crash logs found.',
+  'settings.system.crashLogs.entries': '{count} entries',
+  'settings.system.crashLogs.clear': 'Clear all logs',
+  'settings.system.crashLogs.cleared': 'Cleared {count} log file(s).',
+  'settings.system.crashLogs.source': 'Source',
+  'settings.system.crashLogs.time': 'Time',
+  'settings.system.crashLogs.message': 'Message',
+  'settings.system.crashLogs.stack': 'Stack Trace',
+  'settings.system.crashLogs.hint': 'Crash logs are retained for 30 days and automatically rotated.',
+  'settings.system.crashLogs.collapse': 'Collapse',
+  'settings.system.crashLogs.expand': 'Show details',
+
+  // Settings > System > Software Update
+  'settings.update.title': 'Software Update',
+  'settings.update.currentVersion': 'Current version',
+  'settings.update.checkForUpdates': 'Check for Updates',
+  'settings.update.checking': 'Checking...',
+  'settings.update.upToDate': 'You are using the latest version.',
+  'settings.update.available': 'New version {version} is available.',
+  'settings.update.download': 'Download Update',
+  'settings.update.downloading': 'Downloading... {percent}%',
+  'settings.update.readyToInstall': 'Update downloaded and ready to install.',
+  'settings.update.restartNow': 'Restart to Update',
+  'settings.update.error': 'Failed to check for updates.',
+  'settings.update.downloadError': 'Download failed.',
+  'settings.update.manualDownload': 'Download from GitHub',
+  'settings.update.manualDownloadHint': 'Auto-update is not available on this platform. Download the latest version from GitHub.',
+  'settings.update.hint': 'Netcatty checks for updates from GitHub Releases.',
+  'settings.update.lastCheckedJustNow': 'just now',
+  'settings.update.lastCheckedMinutesAgo': '{n} min ago',
+  'settings.update.lastCheckedHoursAgo': '{n} hr ago',
+  'settings.update.lastCheckedPrefix': 'Last checked: ',
+  'settings.update.autoUpdateEnabled': 'Automatic Updates',
+  'settings.update.autoUpdateEnabledDesc': 'Automatically check and download updates when available.',
 
   // Settings > Session Logs
   'settings.sessionLogs.title': 'Session Logs',
@@ -107,6 +163,8 @@ const en: Messages = {
   'settings.globalHotkey.reset': 'Reset to default',
   'settings.globalHotkey.closeToTray': 'Close to System Tray',
   'settings.globalHotkey.closeToTrayDesc': 'When enabled, closing the window will minimize to the system tray instead of quitting.',
+  'settings.globalHotkey.enabled': 'Enable Global Hotkey',
+  'settings.globalHotkey.enabledDesc': 'Register system-wide keyboard shortcuts. When disabled, all global hotkeys are unregistered.',
   'settings.globalHotkey.hint': 'Global hotkey works system-wide to quickly show or hide the window (Quake-style terminal).',
 
   // Tray Panel
@@ -147,13 +205,23 @@ const en: Messages = {
   'update.upToDate.message': 'You are running the latest version ({version}).',
   'update.error': 'Failed to check for updates',
   'update.downloadNow': 'Download Now',
+  'update.viewInSettings': 'View in Settings',
+  'update.readyToInstall.title': 'Update Ready',
+  'update.readyToInstall.message': 'Version {version} downloaded and ready to install.',
+  'update.restartNow': 'Restart Now',
+  'update.downloadFailed.title': 'Update Failed',
+  'update.downloadFailed.message': 'Failed to download update. You can download it manually.',
+  'update.openReleases': 'Open Releases',
   'update.remindLater': 'Remind Later',
   'update.skipVersion': 'Skip This Version',
 
   // Settings > Appearance
   'settings.appearance.uiTheme': 'UI Theme',
-  'settings.appearance.darkMode': 'Dark Mode',
-  'settings.appearance.darkMode.desc': 'Toggle between light and dark theme',
+  'settings.appearance.theme': 'Theme',
+  'settings.appearance.theme.desc': 'Choose light, dark, or follow system preference',
+  'settings.appearance.theme.light': 'Light',
+  'settings.appearance.theme.dark': 'Dark',
+  'settings.appearance.theme.system': 'System',
   'settings.appearance.accentColor': 'Accent Color',
   'settings.appearance.customColor': 'Custom color',
   'settings.appearance.accentColor.mode': 'Use custom accent',
@@ -163,6 +231,9 @@ const en: Messages = {
   'settings.appearance.themeColor.desc': 'Pick a preset palette for each theme',
   'settings.appearance.themeColor.light': 'Light palette',
   'settings.appearance.themeColor.dark': 'Dark palette',
+  'settings.appearance.immersiveMode': 'Immersive Mode',
+  'settings.appearance.immersiveMode.desc':
+    'When enabled, the UI chrome (tab bar, sidebar, status bar) adapts its colors to match the active terminal theme for a visually cohesive experience.',
   'settings.appearance.customCss': 'Custom CSS',
   'settings.appearance.customCss.desc':
     'Add custom CSS to personalize the app appearance. Changes apply immediately.',
@@ -214,10 +285,24 @@ const en: Messages = {
   'settings.terminal.behavior.rightClick.paste': 'Paste',
   'settings.terminal.behavior.rightClick.selectWord': 'Select word',
   'settings.terminal.behavior.copyOnSelect': 'Copy on select',
-  'settings.terminal.behavior.copyOnSelect.desc': 'Automatically copy selected text',
+  'settings.terminal.behavior.copyOnSelect.desc': 'Automatically copy selected text. In tmux/vim with mouse mode, hold Option on macOS or Shift on Windows/Linux to select',
   'settings.terminal.behavior.middleClickPaste': 'Middle-click paste',
   'settings.terminal.behavior.middleClickPaste.desc':
     'Paste clipboard content on middle-click',
+  '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.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.',
+  'settings.terminal.behavior.osc52Clipboard.off': 'Disabled',
+  'settings.terminal.behavior.osc52Clipboard.writeOnly': 'Write only',
+  'settings.terminal.behavior.osc52Clipboard.readWrite': 'Read & Write',
+  'settings.terminal.behavior.osc52Clipboard.prompt': 'Write + Prompt on Read',
+  'terminal.osc52.readPrompt.title': 'Clipboard Read Request',
+  'terminal.osc52.readPrompt.desc': 'A remote program is requesting to read your clipboard. Allow?',
+  'terminal.osc52.readPrompt.allow': 'Allow',
+  'terminal.osc52.readPrompt.deny': 'Deny',
   'settings.terminal.behavior.scrollOnInput': 'Scroll on input',
   'settings.terminal.behavior.scrollOnInput.desc': 'Scroll terminal to bottom when typing',
   'settings.terminal.behavior.scrollOnOutput': 'Scroll on output',
@@ -229,6 +314,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)',
@@ -267,6 +355,22 @@ const en: Messages = {
   '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.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',
@@ -324,6 +428,7 @@ const en: Messages = {
   '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.credentialsUnavailable': 'This device cannot decrypt some saved credentials. Re-enter credentials locally before syncing.',
   'time.never': 'Never',
   'time.justNow': 'Just now',
   'time.minutesAgo': '{minutes}m ago',
@@ -513,6 +618,11 @@ const en: Messages = {
   'sftp.newFile': 'New File',
   'sftp.filter': 'Filter',
   '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',
   'sftp.columns.size': 'Size',
@@ -528,8 +638,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',
@@ -542,10 +665,23 @@ const en: Messages = {
   'sftp.path.doubleClickToEdit': 'Double-click to edit path',
   'sftp.showHiddenPaths': 'Hidden paths',
   'sftp.task.waiting': 'Waiting...',
+  'sftp.transfer.preparing': 'preparing...',
   'sftp.status.loading': 'Loading...',
   'sftp.status.uploading': 'Uploading...',
   'sftp.status.ready': 'Ready',
+  'sftp.transfers': 'Transfers',
+  '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',
   'sftp.encoding.auto': 'Auto',
   'sftp.encoding.utf8': 'UTF-8',
@@ -563,6 +699,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',
@@ -617,6 +756,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',
@@ -653,6 +793,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',
@@ -674,6 +823,20 @@ const en: Messages = {
   'settings.sftp.autoSync.desc': 'Automatically sync file changes back to the remote server when opening files with external applications',
   'settings.sftp.autoSync.enable': 'Enable auto-sync',
   'settings.sftp.autoSync.enableDesc': 'When you save a file in an external application, changes will be automatically uploaded to the remote server',
+
+  // Settings > SFTP Auto Open Sidebar
+  'settings.sftp.autoOpenSidebar': 'Auto-open sidebar on connect',
+  'settings.sftp.autoOpenSidebar.desc': 'Automatically open the SFTP file browser sidebar when connecting to a host',
+  '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}',
 
@@ -688,6 +851,7 @@ const en: Messages = {
   'sftp.upload.currentFile': 'Current: {fileName}',
   'sftp.upload.cancelled': 'Upload cancelled',
   'sftp.upload.cancel': 'Cancel',
+  'sftp.upload.completedToPath': 'Uploaded to {path}',
 
   // SFTP Download
   'sftp.download.completed': 'Downloaded',
@@ -704,9 +868,9 @@ const en: Messages = {
 
   // Settings > SFTP Show Hidden Files
   'settings.sftp.showHiddenFiles': 'Show hidden files',
-  'settings.sftp.showHiddenFiles.desc': 'Display files with the Windows hidden attribute in the SFTP file browser when browsing local Windows filesystem.',
+  'settings.sftp.showHiddenFiles.desc': 'Display hidden files (dotfiles on Unix/macOS and files with the hidden attribute on Windows) in the SFTP file browser.',
   'settings.sftp.showHiddenFiles.enable': 'Show hidden files',
-  'settings.sftp.showHiddenFiles.enableDesc': 'Display Windows hidden files when browsing local filesystem',
+  'settings.sftp.showHiddenFiles.enableDesc': 'Display hidden files when browsing both local and remote filesystems',
 
   // Settings > SFTP Compressed Upload
   'settings.sftp.compressedUpload': 'Folder Compression Transfer',
@@ -760,6 +924,29 @@ const en: Messages = {
   'hostDetails.section.credentials': 'Credentials',
   'hostDetails.section.portCredentials': 'Port & Credentials',
   'hostDetails.section.appearance': 'Appearance',
+  'hostDetails.distro.title': 'Linux Distribution',
+  'hostDetails.distro.desc': 'Auto-detect on connect, or override the distro icon manually.',
+  'hostDetails.distro.mode': 'Source',
+  'hostDetails.distro.mode.auto': 'Auto-detect',
+  'hostDetails.distro.mode.manual': 'Manual override',
+  'hostDetails.distro.detectedLabel': 'Current',
+  'hostDetails.distro.manualLabel': 'Override',
+  'hostDetails.distro.pending': 'Detect after first connection',
+  'hostDetails.distro.unknown': 'Unknown',
+  'hostDetails.distro.option.linux': 'Generic Linux',
+  'hostDetails.distro.option.ubuntu': 'Ubuntu',
+  'hostDetails.distro.option.debian': 'Debian',
+  'hostDetails.distro.option.centos': 'CentOS',
+  'hostDetails.distro.option.rocky': 'Rocky Linux',
+  'hostDetails.distro.option.fedora': 'Fedora',
+  'hostDetails.distro.option.arch': 'Arch Linux',
+  'hostDetails.distro.option.alpine': 'Alpine',
+  'hostDetails.distro.option.amazon': 'Amazon Linux',
+  'hostDetails.distro.option.opensuse': 'openSUSE / SLES',
+  'hostDetails.distro.option.redhat': 'Red Hat / RHEL',
+  'hostDetails.distro.option.almalinux': 'AlmaLinux',
+  'hostDetails.distro.option.oracle': 'Oracle Linux',
+  'hostDetails.distro.option.kali': 'Kali Linux',
   'hostDetails.section.mosh': 'Mosh',
   'hostDetails.username.placeholder': 'Username',
   'hostDetails.password.placeholder': 'Password',
@@ -768,9 +955,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',
@@ -778,9 +968,17 @@ const en: Messages = {
   'hostDetails.certs.empty': 'No certificates available',
   'hostDetails.agentForwarding': 'Forward SSH Agent',
   'hostDetails.agentForwarding.desc': 'Allow remote server to use your local SSH keys (e.g., for git operations)',
-  'hostDetails.agentForwarding.agentNotRunning': 'SSH Agent is not running',
-  'hostDetails.agentForwarding.agentNotRunningHint': 'Enable OpenSSH Authentication Agent service in Windows Services (services.msc) for agent forwarding to work.',
+  '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.jumpHosts': 'Proxy via Hosts',
   'hostDetails.jumpHosts.hops': '{count} hop(s)',
   'hostDetails.jumpHosts.direct': 'Direct',
@@ -896,8 +1094,16 @@ const en: Messages = {
   'terminal.toolbar.broadcast': 'Broadcast',
   'terminal.toolbar.broadcastEnable': 'Enable Broadcast Mode',
   'terminal.toolbar.broadcastDisable': 'Disable Broadcast Mode',
+  'terminal.toolbar.composeBar': 'Compose Bar',
+  'terminal.composeBar.placeholder': 'Type command here, press Enter to send...',
+  'terminal.composeBar.send': 'Send',
+  'terminal.composeBar.close': 'Close compose bar',
+  'terminal.composeBar.broadcasting': 'Broadcasting to all sessions',
   'terminal.toolbar.focus': 'Focus',
   'terminal.toolbar.focusMode': 'Focus Mode',
+  'terminal.toolbar.encoding': 'Terminal Encoding',
+  'terminal.toolbar.encoding.utf8': 'UTF-8',
+  'terminal.toolbar.encoding.gb18030': 'GB18030',
   'terminal.toolbar.closeSession': 'Close session',
   'terminal.toolbar.hostHighlight.title': 'Host Keyword Highlighting',
   'terminal.toolbar.hostHighlight.noRules': 'No custom highlight rules defined for this host',
@@ -916,6 +1122,10 @@ const en: Messages = {
   'terminal.serverStats.memBuffers': 'Buffers',
   'terminal.serverStats.memCached': 'Cache',
   'terminal.serverStats.memFree': 'Free',
+  'terminal.serverStats.swap': 'Swap',
+  'terminal.serverStats.swapUsed': 'Swap Used',
+  'terminal.serverStats.swapFree': 'Swap Free',
+  'terminal.serverStats.swapTotal': 'Total',
   'terminal.serverStats.topProcesses': 'Top Processes by Memory',
   'terminal.serverStats.disk': 'Disk Usage (Root)',
   'terminal.serverStats.diskDetails': 'Mounted Disks',
@@ -952,10 +1162,15 @@ const en: Messages = {
   'terminal.auth.selectKey': 'Select Key',
   'terminal.auth.noKeysHint': 'No keys available. Add keys in Keychain.',
   'terminal.auth.continueSave': 'Continue & Save',
+  'terminal.auth.credentialsUnavailable': 'Saved credentials cannot be decrypted on this device. Please re-enter and save them again.',
+  'terminal.auth.jumpCredentialsUnavailable': 'A jump host has saved credentials that cannot be decrypted on this device. Open host settings and re-enter them.',
+  'terminal.auth.proxyCredentialsUnavailable': 'Proxy credentials cannot be decrypted on this device. Open host settings and re-enter the proxy password.',
+  'terminal.auth.keyUnavailableFallbackPassword': 'Saved SSH key is unavailable on this device. Falling back to password authentication.',
   'terminal.progress.timeoutIn': 'Timeout in {seconds}s',
   'terminal.progress.disconnected': 'Disconnected',
   'terminal.progress.cancelling': 'Cancelling...',
   'terminal.progress.startOver': 'Start over',
+  'terminal.connection.dismissDisconnectedDialog': 'Dismiss disconnected notice',
   'terminal.connection.chainOf': 'Chain {current} of {total}',
   'terminal.connection.showLogs': 'Show logs',
   'terminal.connection.hideLogs': 'Hide logs',
@@ -967,10 +1182,52 @@ const en: Messages = {
   'terminal.themeModal.title': 'Terminal Appearance',
   'terminal.themeModal.tab.theme': 'Theme',
   'terminal.themeModal.tab.font': 'Font',
+  'terminal.themeModal.tab.custom': 'Custom',
+  'terminal.themeModal.globalTheme': 'Global Theme',
+  'terminal.themeModal.globalFont': 'Global Font',
   'terminal.themeModal.fontSize': 'Font Size',
   'terminal.themeModal.livePreview': 'Live Preview',
   'terminal.themeModal.themeType': '{type} theme',
 
+  // Custom Themes
+  'terminal.customTheme.section': 'Custom Themes',
+  'terminal.customTheme.yourThemes': 'Your Themes',
+  'terminal.customTheme.new': 'New Theme',
+  'terminal.customTheme.newDesc': 'Clone current theme and customize',
+  'terminal.customTheme.newTitle': 'New Custom Theme',
+  'terminal.customTheme.editTitle': 'Edit Theme',
+  'terminal.customTheme.import': 'Import .itermcolors',
+  'terminal.customTheme.importDesc': 'Import from iTerm2 color scheme file',
+  'terminal.customTheme.importError': 'Failed to parse the selected file. Please ensure it is a valid .itermcolors XML file.',
+  'terminal.customTheme.delete': 'Delete Theme',
+  'terminal.customTheme.confirmDelete': 'Confirm Delete',
+  'terminal.customTheme.name': 'Name',
+  'terminal.customTheme.namePlaceholder': 'My Custom Theme',
+  'terminal.customTheme.type': 'Type',
+  'terminal.customTheme.group.general': 'General',
+  'terminal.customTheme.group.normal': 'Normal Colors',
+  'terminal.customTheme.group.bright': 'Bright Colors',
+  'terminal.customTheme.color.background': 'Background',
+  'terminal.customTheme.color.foreground': 'Foreground',
+  'terminal.customTheme.color.cursor': 'Cursor',
+  'terminal.customTheme.color.selection': 'Selection',
+  'terminal.customTheme.color.black': 'Black',
+  'terminal.customTheme.color.red': 'Red',
+  'terminal.customTheme.color.green': 'Green',
+  'terminal.customTheme.color.yellow': 'Yellow',
+  'terminal.customTheme.color.blue': 'Blue',
+  'terminal.customTheme.color.magenta': 'Magenta',
+  'terminal.customTheme.color.cyan': 'Cyan',
+  'terminal.customTheme.color.white': 'White',
+  'terminal.customTheme.color.brightBlack': 'Bright Black',
+  'terminal.customTheme.color.brightRed': 'Bright Red',
+  'terminal.customTheme.color.brightGreen': 'Bright Green',
+  'terminal.customTheme.color.brightYellow': 'Bright Yellow',
+  'terminal.customTheme.color.brightBlue': 'Bright Blue',
+  'terminal.customTheme.color.brightMagenta': 'Bright Magenta',
+  'terminal.customTheme.color.brightCyan': 'Bright Cyan',
+  'terminal.customTheme.color.brightWhite': 'Bright White',
+
   // Cloud Sync Settings
   'cloudSync.gate.title': 'End-to-End Encrypted Sync',
   'cloudSync.gate.desc':
@@ -1010,6 +1267,7 @@ const en: Messages = {
   'cloudSync.webdav.password': 'Password',
   'cloudSync.webdav.token': 'Token',
   'cloudSync.webdav.showSecret': 'Show secret',
+  'cloudSync.webdav.allowInsecure': 'Allow insecure connection (ignore certificate errors)',
   'cloudSync.webdav.validation.endpoint': 'Enter a valid WebDAV endpoint.',
   'cloudSync.webdav.validation.credentials': 'Username and password are required.',
   'cloudSync.webdav.validation.token': 'Token is required.',
@@ -1285,6 +1543,7 @@ const en: Messages = {
   'snippets.renameDialog.error.duplicate': 'A package with this name already exists',
   'snippets.renameDialog.error.invalidChars': 'Package name can only contain letters, numbers, hyphens, and underscores',
 
+  'snippets.field.noAutoRun': 'Paste only (do not auto-execute)',
   // Snippet Shortkey
   'snippets.field.shortkey': 'Keyboard Shortcut',
   'snippets.shortkey.placeholder': 'Click to set shortcut',
@@ -1324,6 +1583,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',
@@ -1361,6 +1621,178 @@ const en: Messages = {
 
   // Text Editor
   'sftp.editor.wordWrap': 'Word Wrap',
+
+  // AI Settings
+  'ai.agentSettings': 'Agent Settings',
+  'ai.title': 'AI',
+  'ai.description': 'Configure AI providers, agents, and safety settings',
+  'ai.providers': 'Providers',
+  'ai.providers.empty': 'No providers configured. Add a provider to get started.',
+  'ai.providers.add': 'Add Provider',
+  'ai.providers.active': 'Active',
+  'ai.providers.apiKeyConfigured': 'API key configured',
+  'ai.providers.noApiKey': 'No API key',
+  'ai.providers.configure': 'Configure',
+  'ai.providers.remove': 'Remove',
+  'ai.providers.name': 'Display Name',
+  'ai.providers.name.placeholder': 'e.g. My Provider',
+  'ai.providers.apiKey': 'API Key',
+  'ai.providers.apiKey.placeholder': 'Enter API key',
+  'ai.providers.apiKey.decrypting': 'Decrypting...',
+  'ai.providers.baseUrl': 'Base URL',
+  'ai.providers.skipTLSVerify': 'Skip TLS certificate verification (for self-signed certs)',
+  'ai.providers.defaultModel': 'Default Model',
+  'ai.providers.defaultModel.placeholder': 'e.g. gpt-4o, claude-sonnet-4-20250514',
+  'ai.providers.refreshModels': 'Refresh models',
+  'ai.providers.searchModel': 'Search or type model ID...',
+  'ai.providers.filterModels': 'Filter models...',
+  'ai.providers.loadingModels': 'Loading models...',
+  '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.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.notConnected': 'Not connected',
+  'ai.codex.statusUnknown': 'Status unknown',
+  'ai.codex.path': 'Path:',
+  'ai.codex.notFoundHint': 'Could not find codex in PATH. Install it or specify the executable path below.',
+  'ai.codex.customPathPlaceholder': 'e.g. /usr/local/bin/codex',
+  'ai.codex.check': 'Check',
+  'ai.codex.openLogin': 'Open Login',
+  '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',
+  'ai.claude.description': "Anthropic's agentic coding assistant. Uses claude-agent-acp for ACP protocol streaming.",
+  'ai.claude.detecting': 'Detecting...',
+  'ai.claude.detected': 'Detected',
+  'ai.claude.notFound': 'Not found',
+  'ai.claude.path': 'Path:',
+  'ai.claude.notFoundHint': 'Could not find claude in PATH. Install it or specify the executable path below.',
+  '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 Chat
+  'ai.chat.noProvider': 'No AI provider is configured. Go to **Settings → AI → Providers** to add and enable a provider.',
+  'ai.chat.toolDenied': 'Action was rejected by the user.',
+  'ai.chat.toolApproved': 'Approved',
+  'ai.chat.toolApprovalHint': 'Press Enter to approve, Escape to reject',
+  'ai.chat.approve': 'Approve',
+  'ai.chat.reject': 'Reject',
+  'ai.chat.toolLabel': 'Tool',
+  'ai.chat.targetLabel': 'Target',
+  'ai.chat.permissionRequired': 'Permission Required',
+  'ai.chat.permissionDescription': 'The AI agent wants to execute a tool call that requires your approval.',
+  'ai.chat.commandBlocked': 'This command is blocked by your security policy and cannot be executed.',
+  'ai.chat.recommendAllow': 'Allow',
+  'ai.chat.recommendConfirm': 'Confirm',
+  'ai.chat.recommendDeny': 'Deny',
+  'ai.chat.exportConversation': 'Export conversation',
+  'ai.chat.exportAs': 'Export As',
+  'ai.chat.exportMarkdown': 'Markdown',
+  'ai.chat.exportJSON': 'JSON',
+  'ai.chat.exportPlainText': 'Plain Text',
+  'ai.chat.thinking': 'Thinking',
+  'ai.chat.thoughtFor': 'Thought for {duration}',
+  'ai.chat.thought': 'Thought',
+  'ai.chat.agents': 'Agents',
+  'ai.chat.detectedOnMachine': 'Detected on this machine',
+  'ai.chat.rescan': 'Re-scan',
+  'ai.chat.permObserver': 'Observer',
+  'ai.chat.permConfirm': 'Confirm',
+  'ai.chat.permAuto': 'Auto',
+  'ai.chat.permObserverDesc': 'Read only',
+  'ai.chat.permConfirmDesc': 'Ask before actions',
+  'ai.chat.permAutoDesc': 'Execute freely',
+  'ai.chat.emptyHint': 'Ask about your servers, run commands, or get help with configurations.',
+  'ai.chat.placeholder': 'Message {agent} — @ to include context, / for commands',
+  'ai.chat.placeholderDefault': 'Message Catty Agent...',
+  'ai.chat.noModel': 'No model',
+  'ai.chat.recent': 'Recent',
+  'ai.chat.viewAll': 'View All',
+  'ai.chat.untitled': 'Untitled',
+  'ai.chat.justNow': 'Just now',
+  'ai.chat.minutesAgo': '{n}m ago',
+  'ai.chat.hoursAgo': '{n}h ago',
+  'ai.chat.daysAgo': '{n}d ago',
+  'ai.chat.newChat': 'New Chat',
+  'ai.chat.allSessions': 'All Sessions',
+  'ai.chat.noSessions': 'No previous sessions',
+  'ai.chat.retryHint': 'You can retry by sending your message again.',
+  'ai.chat.approvalTimeout': 'Tool approval timed out after 5 minutes. You can retry by sending your message again.',
+  'ai.chat.menuHosts': 'Hosts',
+  'ai.chat.menuContext': 'Context',
+  'ai.chat.menuFiles': 'Files',
+  'ai.chat.menuImage': 'Image',
+  'ai.chat.menuMentionHost': 'Mention Host',
+
+  // 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.',
+
+  // AI Web Search
+  'ai.webSearch.title': 'Web Search',
+  'ai.webSearch.enable': 'Enable Web Search',
+  'ai.webSearch.enable.description': 'Allow the AI agent to search the web for current information.',
+  'ai.webSearch.provider': 'Search Provider',
+  'ai.webSearch.provider.description': 'Choose a web search API provider.',
+  'ai.webSearch.apiKey': 'API Key',
+  'ai.webSearch.apiKey.description': 'API key for the selected search provider.',
+  'ai.webSearch.apiKey.placeholder': 'Enter API key...',
+  'ai.webSearch.apiHost': 'API Host',
+  'ai.webSearch.apiHost.description': 'Custom API endpoint. Leave default unless you use a proxy.',
+  'ai.webSearch.apiHost.searxngDescription': 'URL of your SearXNG instance (required).',
+  'ai.webSearch.maxResults': 'Max Results',
+  'ai.webSearch.maxResults.description': 'Maximum number of search results to return (1-20).',
+
+  // 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.observer': 'Observer - Read only, no actions',
+  'ai.safety.permissionMode.confirm': 'Confirm - Ask before actions',
+  'ai.safety.permissionMode.autonomous': 'Autonomous - Execute freely',
+  'ai.safety.commandTimeout': 'Command Timeout',
+  'ai.safety.commandTimeout.description': 'Maximum seconds a command can run before being terminated. Applies to both built-in and ACP agents.',
+  'ai.safety.commandTimeout.unit': 'sec',
+  '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.placeholder': 'Regex pattern...',
+  'ai.safety.blocklist.reset': 'Reset to defaults',
+  'ai.safety.blocklist.add': 'Add pattern',
+  'ai.safety.note': 'Command Blocklist, Command Timeout, and Observer mode are enforced at the MCP Server level, applying to all agent types. Confirm mode and Max Iterations are fully enforced for the built-in agent; ACP agents may have their own internal controls for these settings.',
 };
 
 export default en;

application/i18n/locales/zh-CN.ts

@@ -5,6 +5,9 @@ const zhCN: Messages = {
   'common.save': '保存',
   'common.cancel': '取消',
   'common.close': '关闭',
+  'common.reset': '重置',
+  'common.zoomIn': '放大',
+  'common.zoomOut': '缩小',
   'common.settings': '设置',
   'common.search': '搜索',
   'common.connect': '连接',
@@ -20,8 +23,10 @@ const zhCN: Messages = {
   'common.back': '返回',
   'common.apply': '应用',
   'common.use': '使用',
+  'common.useGlobal': '跟随全局',
   'common.left': '左侧',
   'common.right': '右侧',
+  'common.more': '更多',
   'common.selectAHost': '选择主机',
   'sort.az': 'A-z',
   'sort.za': 'Z-a',
@@ -36,12 +41,16 @@ const zhCN: Messages = {
   // Dialogs / prompts
   'confirm.deleteHost': '删除主机 "{name}"？',
   'confirm.deleteIdentity': '删除身份 "{name}"？',
+  'confirm.removeProvider': '移除提供商 "{name}"？',
   'dialog.renameWorkspace.title': '重命名工作区',
   'dialog.renameSession.title': '重命名会话',
   'field.name': '名称',
   'placeholder.workspaceName': '工作区名称',
   'placeholder.sessionName': '会话名称',
   'toast.settingsUnavailable': '当前平台无法打开设置窗口。',
+  'credentials.protectionUnavailable.title': '凭据保护不可用',
+  'credentials.protectionUnavailable.message': '当前设备无法自动解密已保存的密码和密钥。连接前请重新输入凭据。',
+  'credentials.protectionUnavailable.action': '打开设置',
 
   // Settings shell
   'settings.title': '设置',
@@ -65,6 +74,52 @@ const zhCN: Messages = {
   'settings.system.clearing': '清理中...',
   'settings.system.clearResult': '已删除 {deleted} 个文件，{failed} 个失败。',
   'settings.system.tempDirectoryHint': '临时文件在使用外部应用打开远程文件时创建。SFTP 会话关闭时会自动清理。',
+  'settings.system.credentials.title': '凭据保护',
+  'settings.system.credentials.status': '状态',
+  'settings.system.credentials.checking': '检查中...',
+  'settings.system.credentials.available': '可用（系统钥匙串正常）',
+  'settings.system.credentials.unavailable': '不可用（无法解密已保存凭据）',
+  'settings.system.credentials.unknown': '未知（当前环境不支持）',
+  'settings.system.credentials.unavailableHint': '在其他用户或机器上加密的凭据无法在此处解密。请在当前设备重新输入并保存凭据。',
+  'settings.system.credentials.portabilityHint': '云同步可跨设备，因为使用主密钥加密；本地 safeStorage 加密仅绑定当前系统用户/设备。',
+
+  // Settings > System > Crash Logs
+  'settings.system.crashLogs.title': '崩溃日志',
+  'settings.system.crashLogs.description': '查看主进程错误日志，帮助诊断异常行为。',
+  'settings.system.crashLogs.noLogs': '未找到崩溃日志。',
+  'settings.system.crashLogs.entries': '{count} 条记录',
+  'settings.system.crashLogs.clear': '清除所有日志',
+  'settings.system.crashLogs.cleared': '已清除 {count} 个日志文件。',
+  'settings.system.crashLogs.source': '来源',
+  'settings.system.crashLogs.time': '时间',
+  'settings.system.crashLogs.message': '消息',
+  'settings.system.crashLogs.stack': '堆栈跟踪',
+  'settings.system.crashLogs.hint': '崩溃日志保留 30 天，超期自动清理。',
+  'settings.system.crashLogs.collapse': '收起',
+  'settings.system.crashLogs.expand': '查看详情',
+
+  // Settings > System > Software Update
+  'settings.update.title': '软件更新',
+  'settings.update.currentVersion': '当前版本',
+  'settings.update.checkForUpdates': '检查更新',
+  'settings.update.checking': '检查中...',
+  'settings.update.upToDate': '当前已是最新版本。',
+  'settings.update.available': '新版本 {version} 已发布。',
+  'settings.update.download': '下载更新',
+  'settings.update.downloading': '正在下载... {percent}%',
+  'settings.update.readyToInstall': '更新已下载，准备安装。',
+  'settings.update.restartNow': '重启并更新',
+  'settings.update.error': '检查更新失败。',
+  'settings.update.downloadError': '下载失败。',
+  'settings.update.manualDownload': '前往 GitHub 下载',
+  'settings.update.manualDownloadHint': '当前平台不支持自动更新，请前往 GitHub 下载最新版本。',
+  'settings.update.hint': 'Netcatty 从 GitHub Releases 检查更新。',
+  'settings.update.lastCheckedJustNow': '刚刚',
+  'settings.update.lastCheckedMinutesAgo': '{n} 分钟前',
+  'settings.update.lastCheckedHoursAgo': '{n} 小时前',
+  'settings.update.lastCheckedPrefix': '上次检查：',
+  'settings.update.autoUpdateEnabled': '自动更新',
+  'settings.update.autoUpdateEnabledDesc': '有新版本时自动检查并下载更新。',
 
   // Settings > Session Logs
   'settings.sessionLogs.title': '会话日志',
@@ -92,6 +147,8 @@ const zhCN: Messages = {
   'settings.globalHotkey.reset': '恢复默认',
   'settings.globalHotkey.closeToTray': '关闭时最小化到托盘',
   'settings.globalHotkey.closeToTrayDesc': '启用后，关闭窗口将最小化到系统托盘而不是退出程序。',
+  'settings.globalHotkey.enabled': '启用全局快捷键',
+  'settings.globalHotkey.enabledDesc': '注册系统级键盘快捷键。禁用后将取消所有全局快捷键注册。',
   'settings.globalHotkey.hint': '全局快捷键在系统范围内工作，可快速显示或隐藏窗口（下拉式终端风格）。',
 
   // Tray Panel
@@ -132,13 +189,23 @@ const zhCN: Messages = {
   'update.upToDate.message': '当前版本 ({version}) 已是最新。',
   'update.error': '检查更新失败',
   'update.downloadNow': '立即下载',
+  'update.viewInSettings': '在设置中查看',
+  'update.readyToInstall.title': '更新已就绪',
+  'update.readyToInstall.message': '版本 {version} 已下载完成，准备安装。',
+  'update.restartNow': '立即重启',
+  'update.downloadFailed.title': '更新失败',
+  'update.downloadFailed.message': '下载更新失败，可前往 GitHub 手动下载。',
+  'update.openReleases': '打开 Releases',
   'update.remindLater': '稍后提醒',
   'update.skipVersion': '跳过此版本',
 
   // Settings > Appearance
   'settings.appearance.uiTheme': '界面主题',
-  'settings.appearance.darkMode': '深色模式',
-  'settings.appearance.darkMode.desc': '在浅色与深色主题之间切换',
+  'settings.appearance.theme': '主题',
+  'settings.appearance.theme.desc': '选择浅色、深色或跟随系统设置',
+  'settings.appearance.theme.light': '浅色',
+  'settings.appearance.theme.dark': '深色',
+  'settings.appearance.theme.system': '系统',
   'settings.appearance.accentColor': '强调色',
   'settings.appearance.customColor': '自定义颜色',
   'settings.appearance.accentColor.mode': '使用自定义强调色',
@@ -148,6 +215,9 @@ const zhCN: Messages = {
   'settings.appearance.themeColor.desc': '为浅色与深色主题选择预设配色',
   'settings.appearance.themeColor.light': '浅色主题',
   'settings.appearance.themeColor.dark': '深色主题',
+  'settings.appearance.immersiveMode': '沉浸模式',
+  'settings.appearance.immersiveMode.desc':
+    '启用后，UI 外观（标签栏、侧边栏、状态栏）会自动适配当前终端主题的配色，营造视觉一体化的沉浸体验。',
   'settings.appearance.customCss': '自定义 CSS',
   'settings.appearance.customCss.desc': '使用自定义 CSS 个性化界面，修改会立即生效。',
   'settings.appearance.customCss.placeholder':
@@ -191,6 +261,7 @@ const zhCN: Messages = {
   'sync.autoSync.vaultLocked': 'Vault 处于锁定状态。请打开 设置 → Sync & Cloud 解锁。',
   'sync.autoSync.conflictDetected': '检测到同步冲突。请打开 设置 → Sync & Cloud 处理。',
   'sync.autoSync.syncFailed': '同步失败',
+  'sync.credentialsUnavailable': '当前设备无法解密部分已保存凭据。请先在本地重新输入凭据后再同步。',
   'time.never': '从未',
   'time.justNow': '刚刚',
   'time.minutesAgo': '{minutes} 分钟前',
@@ -355,6 +426,11 @@ const zhCN: Messages = {
   'sftp.newFile': '新建文件',
   'sftp.filter': '筛选',
   'sftp.filter.placeholder': '按文件名筛选...',
+  'sftp.bookmark.add': '收藏此路径',
+  'sftp.bookmark.remove': '取消收藏',
+  'sftp.bookmark.addGlobal': '+全局',
+  'sftp.bookmark.addGlobalTooltip': '保存为全局收藏（所有主机共享）',
+  'sftp.bookmark.empty': '暂无收藏路径',
   'sftp.columns.name': '名称',
   'sftp.columns.modified': '修改时间',
   'sftp.columns.size': '大小',
@@ -370,8 +446,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': '删除',
@@ -384,10 +473,23 @@ const zhCN: Messages = {
   'sftp.path.doubleClickToEdit': '双击编辑路径',
   'sftp.showHiddenPaths': '隐藏的路径',
   'sftp.task.waiting': '等待中...',
+  'sftp.transfer.preparing': '准备中...',
   'sftp.status.loading': '加载中...',
   'sftp.status.uploading': '上传中...',
   'sftp.status.ready': '就绪',
+  'sftp.transfers': '传输',
+  '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': '文件名编码',
   'sftp.encoding.auto': '自动',
   'sftp.encoding.utf8': 'UTF-8',
@@ -405,6 +507,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': '上传失败',
@@ -475,6 +580,29 @@ const zhCN: Messages = {
   'hostDetails.section.credentials': '凭据',
   'hostDetails.section.portCredentials': '端口与凭据',
   'hostDetails.section.appearance': '外观',
+  'hostDetails.distro.title': 'Linux 发行版',
+  'hostDetails.distro.desc': '可在连接后自动探测，也可以手动覆盖图标所用的发行版。',
+  'hostDetails.distro.mode': '来源',
+  'hostDetails.distro.mode.auto': '自动探测',
+  'hostDetails.distro.mode.manual': '手动覆盖',
+  'hostDetails.distro.detectedLabel': '当前值',
+  'hostDetails.distro.manualLabel': '手动指定',
+  'hostDetails.distro.pending': '首次连接后自动探测',
+  'hostDetails.distro.unknown': '未知',
+  'hostDetails.distro.option.linux': '通用 Linux',
+  'hostDetails.distro.option.ubuntu': 'Ubuntu',
+  'hostDetails.distro.option.debian': 'Debian',
+  'hostDetails.distro.option.centos': 'CentOS',
+  'hostDetails.distro.option.rocky': 'Rocky Linux',
+  'hostDetails.distro.option.fedora': 'Fedora',
+  'hostDetails.distro.option.arch': 'Arch Linux',
+  'hostDetails.distro.option.alpine': 'Alpine',
+  'hostDetails.distro.option.amazon': 'Amazon Linux',
+  'hostDetails.distro.option.opensuse': 'openSUSE / SLES',
+  'hostDetails.distro.option.redhat': 'Red Hat / RHEL',
+  'hostDetails.distro.option.almalinux': 'AlmaLinux',
+  'hostDetails.distro.option.oracle': 'Oracle Linux',
+  'hostDetails.distro.option.kali': 'Kali Linux',
   'hostDetails.section.mosh': 'Mosh',
   'hostDetails.username.placeholder': '用户名',
   'hostDetails.password.placeholder': '密码',
@@ -483,9 +611,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': '暂无密钥',
@@ -493,9 +624,17 @@ const zhCN: Messages = {
   'hostDetails.certs.empty': '暂无证书',
   'hostDetails.agentForwarding': '转发 SSH 密钥',
   'hostDetails.agentForwarding.desc': '允许远程服务器使用本地 SSH 密钥（例如用于 git 操作）',
-  'hostDetails.agentForwarding.agentNotRunning': 'SSH Agent 未运行',
-  'hostDetails.agentForwarding.agentNotRunningHint': '请在 Windows 服务管理器 (services.msc) 中启用 OpenSSH Authentication Agent 服务。',
+  '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.jumpHosts': '通过主机代理',
   'hostDetails.jumpHosts.hops': '{count} 跳',
   'hostDetails.jumpHosts.direct': '直连',
@@ -582,8 +721,16 @@ const zhCN: Messages = {
   'terminal.toolbar.broadcast': '广播',
   'terminal.toolbar.broadcastEnable': '启用广播模式',
   'terminal.toolbar.broadcastDisable': '关闭广播模式',
+  'terminal.toolbar.composeBar': '撰写栏',
+  'terminal.composeBar.placeholder': '在此输入命令，按回车发送...',
+  'terminal.composeBar.send': '发送',
+  'terminal.composeBar.close': '关闭撰写栏',
+  'terminal.composeBar.broadcasting': '正在广播到所有会话',
   'terminal.toolbar.focus': '聚焦',
   'terminal.toolbar.focusMode': '聚焦模式',
+  'terminal.toolbar.encoding': '终端编码',
+  'terminal.toolbar.encoding.utf8': 'UTF-8',
+  'terminal.toolbar.encoding.gb18030': 'GB18030',
   'terminal.toolbar.closeSession': '关闭会话',
   'terminal.toolbar.hostHighlight.title': '主机关键字高亮',
   'terminal.toolbar.hostHighlight.noRules': '此主机未定义自定义高亮规则',
@@ -602,6 +749,10 @@ const zhCN: Messages = {
   'terminal.serverStats.memBuffers': '缓冲区',
   'terminal.serverStats.memCached': '缓存',
   'terminal.serverStats.memFree': '空闲',
+  'terminal.serverStats.swap': '交换空间',
+  'terminal.serverStats.swapUsed': '已用交换',
+  'terminal.serverStats.swapFree': '空闲交换',
+  'terminal.serverStats.swapTotal': '总计',
   'terminal.serverStats.topProcesses': '内存占用前十进程',
   'terminal.serverStats.disk': '磁盘使用（根分区）',
   'terminal.serverStats.diskDetails': '已挂载磁盘',
@@ -638,11 +789,16 @@ const zhCN: Messages = {
   'terminal.auth.selectKey': '选择密钥',
   'terminal.auth.noKeysHint': '暂无密钥，请先在钥匙串中添加。',
   'terminal.auth.continueSave': '继续并保存',
+  'terminal.auth.credentialsUnavailable': '当前设备无法解密已保存凭据，请重新输入并再次保存。',
+  'terminal.auth.jumpCredentialsUnavailable': '某个跳板机的已保存凭据无法在当前设备解密，请到主机设置中重新填写。',
+  'terminal.auth.proxyCredentialsUnavailable': '代理凭据无法在当前设备解密，请到主机设置中重新填写代理密码。',
+  'terminal.auth.keyUnavailableFallbackPassword': '已保存 SSH 密钥在当前设备不可用，改用密码认证。',
   'terminal.connectionErrorTitle': '连接错误',
   'terminal.progress.timeoutIn': '将在 {seconds}s 后超时',
   'terminal.progress.disconnected': '已断开',
   'terminal.progress.cancelling': '正在取消...',
   'terminal.progress.startOver': '重新开始',
+  'terminal.connection.dismissDisconnectedDialog': '关闭断连提示',
   'terminal.connection.chainOf': 'Chain {current} / {total}',
   'terminal.connection.showLogs': '显示日志',
   'terminal.connection.hideLogs': '隐藏日志',
@@ -654,10 +810,52 @@ const zhCN: Messages = {
   'terminal.themeModal.title': 'Terminal 外观',
   'terminal.themeModal.tab.theme': '主题',
   'terminal.themeModal.tab.font': '字体',
+  'terminal.themeModal.tab.custom': '自定义',
+  'terminal.themeModal.globalTheme': '全局主题',
+  'terminal.themeModal.globalFont': '全局字体',
   'terminal.themeModal.fontSize': '字体大小',
   'terminal.themeModal.livePreview': '实时预览',
   'terminal.themeModal.themeType': '{type} 主题',
-  // Cloud Sync Settings
+
+  // Custom Themes
+  'terminal.customTheme.section': '自定义主题',
+  'terminal.customTheme.yourThemes': '我的主题',
+  'terminal.customTheme.new': '新建主题',
+  'terminal.customTheme.newDesc': '克隆当前主题并自定义',
+  'terminal.customTheme.newTitle': '新建自定义主题',
+  'terminal.customTheme.editTitle': '编辑主题',
+  'terminal.customTheme.import': '导入 .itermcolors',
+  'terminal.customTheme.importDesc': '从 iTerm2 配色方案文件导入',
+  'terminal.customTheme.importError': '无法解析所选文件，请确保它是有效的 .itermcolors XML 文件。',
+  'terminal.customTheme.delete': '删除主题',
+  'terminal.customTheme.confirmDelete': '确认删除',
+  'terminal.customTheme.name': '名称',
+  'terminal.customTheme.namePlaceholder': '我的自定义主题',
+  'terminal.customTheme.type': '类型',
+  'terminal.customTheme.group.general': '通用',
+  'terminal.customTheme.group.normal': '标准色',
+  'terminal.customTheme.group.bright': '高亮色',
+  'terminal.customTheme.color.background': '背景',
+  'terminal.customTheme.color.foreground': '前景',
+  'terminal.customTheme.color.cursor': '光标',
+  'terminal.customTheme.color.selection': '选区',
+  'terminal.customTheme.color.black': '黑色',
+  'terminal.customTheme.color.red': '红色',
+  'terminal.customTheme.color.green': '绿色',
+  'terminal.customTheme.color.yellow': '黄色',
+  'terminal.customTheme.color.blue': '蓝色',
+  'terminal.customTheme.color.magenta': '品红',
+  'terminal.customTheme.color.cyan': '青色',
+  'terminal.customTheme.color.white': '白色',
+  'terminal.customTheme.color.brightBlack': '亮黑',
+  'terminal.customTheme.color.brightRed': '亮红',
+  'terminal.customTheme.color.brightGreen': '亮绿',
+  'terminal.customTheme.color.brightYellow': '亮黄',
+  'terminal.customTheme.color.brightBlue': '亮蓝',
+  'terminal.customTheme.color.brightMagenta': '亮品红',
+  'terminal.customTheme.color.brightCyan': '亮青色',
+  'terminal.customTheme.color.brightWhite': '亮白',
+
   'cloudSync.gate.title': '端到端加密同步',
   'cloudSync.gate.desc':
     '数据会在本地加密后再同步，云端不会看到明文。设置主密钥以启用安全同步。',
@@ -696,6 +894,7 @@ const zhCN: Messages = {
   'cloudSync.webdav.password': '密码',
   'cloudSync.webdav.token': 'Token',
   'cloudSync.webdav.showSecret': '显示密钥',
+  'cloudSync.webdav.allowInsecure': '允许不安全的连接（忽略证书错误）',
   'cloudSync.webdav.validation.endpoint': '请输入有效的 WebDAV 端点。',
   'cloudSync.webdav.validation.credentials': '请输入用户名和密码。',
   'cloudSync.webdav.validation.token': '请输入 Token。',
@@ -816,6 +1015,7 @@ const zhCN: Messages = {
   'common.import': '导入',
   'common.generate': '生成',
   'common.delete': '删除',
+  'common.edit': '编辑',
   'common.clear': '清除',
   'common.optional': '可选',
   'common.selectPlaceholder': '请选择...',
@@ -885,6 +1085,7 @@ const zhCN: Messages = {
   'sftp.upload.phase.compressed': '压缩传输',
 
   // SFTP File Opener
+  'sftp.context.copyPath': '复制文件路径',
   'sftp.context.openWith': '打开方式...',
   'sftp.context.edit': '编辑',
   'sftp.context.preview': '预览',
@@ -921,6 +1122,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': '扩展名',
@@ -942,6 +1152,20 @@ const zhCN: Messages = {
   'settings.sftp.autoSync.desc': '使用外部应用程序打开文件时，自动将文件更改同步回远程服务器',
   'settings.sftp.autoSync.enable': '启用自动同步',
   'settings.sftp.autoSync.enableDesc': '在外部应用程序中保存文件时，更改将自动上传到远程服务器',
+
+  // Settings > SFTP 自动打开侧栏
+  'settings.sftp.autoOpenSidebar': '连接时自动打开侧栏',
+  'settings.sftp.autoOpenSidebar.desc': '连接到主机时自动打开 SFTP 文件浏览器侧栏',
+  '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}',
 
@@ -956,6 +1180,7 @@ const zhCN: Messages = {
   'sftp.upload.currentFile': '当前: {fileName}',
   'sftp.upload.cancelled': '上传已取消',
   'sftp.upload.cancel': '取消',
+  'sftp.upload.completedToPath': '已上传至 {path}',
 
   // SFTP Download
   'sftp.download.completed': '已下载',
@@ -972,9 +1197,9 @@ const zhCN: Messages = {
 
   // Settings > SFTP Show Hidden Files
   'settings.sftp.showHiddenFiles': '显示隐藏文件',
-  'settings.sftp.showHiddenFiles.desc': '在浏览本地 Windows 文件系统时，显示具有 Windows 隐藏属性的文件。',
+  'settings.sftp.showHiddenFiles.desc': '在 SFTP 文件浏览器中显示隐藏文件（Unix/macOS 点文件和 Windows 隐藏属性文件）。',
   'settings.sftp.showHiddenFiles.enable': '显示隐藏文件',
-  'settings.sftp.showHiddenFiles.enableDesc': '浏览本地文件系统时显示 Windows 隐藏文件',
+  'settings.sftp.showHiddenFiles.enableDesc': '浏览本地和远程文件系统时显示隐藏文件',
 
   // Settings > SFTP Compressed Upload
   'settings.sftp.compressedUpload': '文件夹压缩传输',
@@ -1021,9 +1246,23 @@ const zhCN: Messages = {
   'settings.terminal.behavior.rightClick.paste': '粘贴',
   'settings.terminal.behavior.rightClick.selectWord': '选择单词',
   'settings.terminal.behavior.copyOnSelect': '选择即复制',
-  'settings.terminal.behavior.copyOnSelect.desc': '自动复制选中的文本',
+  'settings.terminal.behavior.copyOnSelect.desc': '自动复制选中的文本。在 tmux/vim 鼠标模式下，macOS 按住 Option，Windows/Linux 按住 Shift 拖选即可选中文本',
   'settings.terminal.behavior.middleClickPaste': '中键粘贴',
   'settings.terminal.behavior.middleClickPaste.desc': '中键点击时粘贴剪贴板内容',
+  'settings.terminal.behavior.bracketedPaste': '括号粘贴模式',
+  'settings.terminal.behavior.bracketedPaste.desc':
+    '粘贴文本时使用转义序列包裹，以便终端区分粘贴和键入。如果出现 ^[[200~ 字样请关闭此选项。',
+  'settings.terminal.behavior.osc52Clipboard': 'OSC-52 剪贴板',
+  'settings.terminal.behavior.osc52Clipboard.desc':
+    '允许远程程序（tmux、vim 等）通过 OSC-52 转义序列访问本地剪贴板。',
+  'settings.terminal.behavior.osc52Clipboard.off': '关闭',
+  'settings.terminal.behavior.osc52Clipboard.writeOnly': '仅写入',
+  'settings.terminal.behavior.osc52Clipboard.readWrite': '读写',
+  'settings.terminal.behavior.osc52Clipboard.prompt': '写入 + 读取时询问',
+  'terminal.osc52.readPrompt.title': '剪贴板读取请求',
+  'terminal.osc52.readPrompt.desc': '远程程序正在请求读取您的剪贴板，是否允许？',
+  'terminal.osc52.readPrompt.allow': '允许',
+  'terminal.osc52.readPrompt.deny': '拒绝',
   'settings.terminal.behavior.scrollOnInput': '输入时自动滚动',
   'settings.terminal.behavior.scrollOnInput.desc': '输入时将终端滚动到底部',
   'settings.terminal.behavior.scrollOnOutput': '输出时自动滚动',
@@ -1032,6 +1271,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': '无（直接点击）',
@@ -1070,6 +1311,15 @@ const zhCN: Messages = {
   'settings.terminal.rendering.renderer.desc': '选择终端渲染技术。自动模式会在低内存设备上使用 Canvas。更改将在新终端会话中生效。',
   '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': '键盘快捷键',
@@ -1086,6 +1336,35 @@ const zhCN: Messages = {
   'settings.shortcuts.category.navigation': '导航',
   'settings.shortcuts.category.app': '应用',
   'settings.shortcuts.category.sftp': 'SFTP',
+  'settings.shortcuts.binding.switch-tab-1-9': '切换到标签页 [1...9]',
+  'settings.shortcuts.binding.next-tab': '下一个标签页',
+  'settings.shortcuts.binding.prev-tab': '上一个标签页',
+  'settings.shortcuts.binding.close-tab': '关闭标签页',
+  'settings.shortcuts.binding.new-tab': '新建本地标签页',
+  'settings.shortcuts.binding.copy': '从终端复制',
+  'settings.shortcuts.binding.paste': '粘贴到终端',
+  'settings.shortcuts.binding.select-all': '全选终端内容',
+  'settings.shortcuts.binding.clear-buffer': '清空终端缓冲区',
+  'settings.shortcuts.binding.search-terminal': '打开终端搜索',
+  'settings.shortcuts.binding.move-focus': '在分屏间移动焦点',
+  'settings.shortcuts.binding.split-horizontal': '水平分屏',
+  'settings.shortcuts.binding.split-vertical': '垂直分屏',
+  'settings.shortcuts.binding.open-hosts': '打开主机列表',
+  'settings.shortcuts.binding.open-local': '打开本地终端',
+  'settings.shortcuts.binding.open-sftp': '打开 SFTP',
+  'settings.shortcuts.binding.port-forwarding': '打开端口转发',
+  'settings.shortcuts.binding.command-palette': '打开命令面板',
+  'settings.shortcuts.binding.quick-switch': '快速切换',
+  'settings.shortcuts.binding.snippets': '打开代码片段',
+  'settings.shortcuts.binding.broadcast': '切换广播模式',
+  'settings.shortcuts.binding.sftp-copy': '复制文件',
+  'settings.shortcuts.binding.sftp-cut': '剪切文件',
+  'settings.shortcuts.binding.sftp-paste': '粘贴文件',
+  'settings.shortcuts.binding.sftp-select-all': '全选文件',
+  'settings.shortcuts.binding.sftp-rename': '重命名文件',
+  'settings.shortcuts.binding.sftp-delete': '删除文件',
+  'settings.shortcuts.binding.sftp-refresh': '刷新',
+  'settings.shortcuts.binding.sftp-new-folder': '新建文件夹',
 
   // Host Details (sub-panels)
   'hostDetails.proxyPanel.title': 'Proxy',
@@ -1271,6 +1550,7 @@ const zhCN: Messages = {
   'snippets.renameDialog.error.duplicate': '已存在同名的代码包',
   'snippets.renameDialog.error.invalidChars': '代码包名称只能包含字母、数字、连字符和下划线',
 
+  'snippets.field.noAutoRun': '仅粘贴（不自动执行）',
   // Snippet Shortkey
   'snippets.field.shortkey': '快捷键',
   'snippets.shortkey.placeholder': '点击设置快捷键',
@@ -1310,6 +1590,7 @@ const zhCN: Messages = {
   'serial.field.localEchoDesc': '本地回显输入字符（用于没有远程回显的设备）',
   'serial.field.lineMode': '行模式',
   'serial.field.lineModeDesc': '缓冲输入，按回车后发送（而不是逐字符发送）',
+  'serial.field.charset': '字符编码',
   'serial.connectionError': '连接串口失败',
   'serial.field.baudRatePlaceholder': '选择或输入波特率...',
   'serial.field.baudRateEmpty': '输入自定义波特率',
@@ -1347,6 +1628,178 @@ const zhCN: Messages = {
 
   // Text Editor
   'sftp.editor.wordWrap': '自动换行',
+
+  // AI Settings
+  'ai.agentSettings': 'Agent 设置',
+  'ai.title': 'AI',
+  'ai.description': '配置 AI 提供商、Agent 和安全设置',
+  'ai.providers': '提供商',
+  'ai.providers.empty': '尚未配置提供商。添加一个提供商以开始使用。',
+  'ai.providers.add': '添加提供商',
+  'ai.providers.active': '活跃',
+  'ai.providers.apiKeyConfigured': 'API Key 已配置',
+  'ai.providers.noApiKey': '未设置 API Key',
+  'ai.providers.configure': '配置',
+  'ai.providers.remove': '移除',
+  'ai.providers.name': '显示名称',
+  'ai.providers.name.placeholder': '例如 我的提供商',
+  'ai.providers.apiKey': 'API Key',
+  'ai.providers.apiKey.placeholder': '输入 API Key',
+  'ai.providers.apiKey.decrypting': '解密中...',
+  'ai.providers.baseUrl': 'Base URL',
+  'ai.providers.skipTLSVerify': '跳过 TLS 证书验证（用于自签名证书）',
+  'ai.providers.defaultModel': '默认模型',
+  'ai.providers.defaultModel.placeholder': '例如 gpt-4o, claude-sonnet-4-20250514',
+  'ai.providers.refreshModels': '刷新模型列表',
+  'ai.providers.searchModel': '搜索或输入模型 ID...',
+  'ai.providers.filterModels': '筛选模型...',
+  'ai.providers.loadingModels': '加载模型中...',
+  '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.detecting': '检测中...',
+  'ai.codex.notFound': '未找到',
+  'ai.codex.awaitingLogin': '等待登录',
+  'ai.codex.connectedChatGPT': '已通过 ChatGPT 连接',
+  'ai.codex.connectedApiKey': '已通过 API Key 连接',
+  'ai.codex.notConnected': '未连接',
+  'ai.codex.statusUnknown': '状态未知',
+  'ai.codex.path': '路径：',
+  'ai.codex.notFoundHint': '在 PATH 中未找到 codex。请安装或在下方指定可执行文件路径。',
+  'ai.codex.customPathPlaceholder': '例如 /usr/local/bin/codex',
+  'ai.codex.check': '检查',
+  'ai.codex.openLogin': '打开登录',
+  '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',
+  'ai.claude.description': 'Anthropic 的智能编程助手。使用 claude-agent-acp 进行 ACP 协议流式传输。',
+  'ai.claude.detecting': '检测中...',
+  'ai.claude.detected': '已检测到',
+  'ai.claude.notFound': '未找到',
+  'ai.claude.path': '路径：',
+  'ai.claude.notFoundHint': '在 PATH 中未找到 claude。请安装或在下方指定可执行文件路径。',
+  '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 Chat
+  'ai.chat.noProvider': '尚未配置 AI 提供商。请前往 **设置 → AI → 提供商** 添加并启用一个提供商。',
+  'ai.chat.toolDenied': '操作已被用户拒绝。',
+  'ai.chat.toolApproved': '已批准',
+  'ai.chat.toolApprovalHint': '按回车批准，按 Esc 拒绝',
+  'ai.chat.approve': '批准',
+  'ai.chat.reject': '拒绝',
+  'ai.chat.toolLabel': '工具',
+  'ai.chat.targetLabel': '目标',
+  'ai.chat.permissionRequired': '需要权限',
+  'ai.chat.permissionDescription': 'AI Agent 希望执行一个需要你批准的工具调用。',
+  'ai.chat.commandBlocked': '此命令已被安全策略拦截，无法执行。',
+  'ai.chat.recommendAllow': '允许',
+  'ai.chat.recommendConfirm': '确认',
+  'ai.chat.recommendDeny': '拒绝',
+  'ai.chat.exportConversation': '导出对话',
+  'ai.chat.exportAs': '导出为',
+  'ai.chat.exportMarkdown': 'Markdown',
+  'ai.chat.exportJSON': 'JSON',
+  'ai.chat.exportPlainText': '纯文本',
+  'ai.chat.thinking': '思考中',
+  'ai.chat.thoughtFor': '思考了 {duration}',
+  'ai.chat.thought': '思考',
+  'ai.chat.agents': 'Agents',
+  'ai.chat.detectedOnMachine': '在本机检测到',
+  'ai.chat.rescan': '重新扫描',
+  'ai.chat.permObserver': '观察',
+  'ai.chat.permConfirm': '确认',
+  'ai.chat.permAuto': '自主',
+  'ai.chat.permObserverDesc': '只读模式',
+  'ai.chat.permConfirmDesc': '操作前询问',
+  'ai.chat.permAutoDesc': '自由执行',
+  'ai.chat.emptyHint': '询问服务器相关问题、执行命令或获取配置帮助。',
+  'ai.chat.placeholder': '向 {agent} 发送消息 — @ 引用上下文，/ 使用命令',
+  'ai.chat.placeholderDefault': '向 Catty Agent 发送消息...',
+  'ai.chat.noModel': '未选择模型',
+  'ai.chat.recent': '最近',
+  'ai.chat.viewAll': '查看全部',
+  'ai.chat.untitled': '无标题',
+  'ai.chat.justNow': '刚刚',
+  'ai.chat.minutesAgo': '{n}分钟前',
+  'ai.chat.hoursAgo': '{n}小时前',
+  'ai.chat.daysAgo': '{n}天前',
+  'ai.chat.newChat': '新对话',
+  'ai.chat.allSessions': '所有会话',
+  'ai.chat.noSessions': '没有历史会话',
+  'ai.chat.retryHint': '你可以重新发送消息来重试。',
+  'ai.chat.approvalTimeout': '工具审批已超时（5 分钟）。你可以重新发送消息来重试。',
+  'ai.chat.menuHosts': '主机',
+  'ai.chat.menuContext': '上下文',
+  'ai.chat.menuFiles': '文件',
+  'ai.chat.menuImage': '图片',
+  'ai.chat.menuMentionHost': '提及主机',
+
+  // AI Error
+  'ai.codex.bridgeError': 'Codex 主进程处理器尚未加载。请完全重启 Netcatty 或重启 Electron 开发进程，然后重试。',
+
+  // AI Web Search
+  'ai.webSearch.title': '网络搜索',
+  'ai.webSearch.enable': '启用网络搜索',
+  'ai.webSearch.enable.description': '允许 AI 代理搜索互联网获取最新信息。',
+  'ai.webSearch.provider': '搜索供应商',
+  'ai.webSearch.provider.description': '选择一个网络搜索 API 供应商。',
+  'ai.webSearch.apiKey': 'API 密钥',
+  'ai.webSearch.apiKey.description': '所选搜索供应商的 API 密钥。',
+  'ai.webSearch.apiKey.placeholder': '输入 API 密钥...',
+  'ai.webSearch.apiHost': 'API 地址',
+  'ai.webSearch.apiHost.description': '自定义 API 端点。除非使用代理，否则保持默认值。',
+  'ai.webSearch.apiHost.searxngDescription': 'SearXNG 实例的 URL（必填）。',
+  'ai.webSearch.maxResults': '最大结果数',
+  'ai.webSearch.maxResults.description': '搜索返回的最大结果数（1-20）。',
+
+  // 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.observer': '观察者 - 只读，禁止操作',
+  'ai.safety.permissionMode.confirm': '确认 - 操作前询问',
+  'ai.safety.permissionMode.autonomous': '自主 - 自由执行',
+  'ai.safety.commandTimeout': '命令超时',
+  'ai.safety.commandTimeout.description': '命令执行的最大秒数，超时将被终止。对内置和 ACP Agent 均生效。',
+  'ai.safety.commandTimeout.unit': '秒',
+  'ai.safety.maxIterations': '最大迭代次数',
+  'ai.safety.maxIterations.description': '防止 AI 失控执行的最大工具调用循环次数。ACP Agent 可能有自己的内部迭代限制，以其为准。',
+  'ai.safety.blocklist': '命令黑名单',
+  'ai.safety.blocklist.description': '用于拦截危险命令的正则表达式。通过 MCP Server 对内置和 ACP Agent 均生效。',
+  'ai.safety.blocklist.placeholder': '正则表达式...',
+  'ai.safety.blocklist.reset': '恢复默认',
+  'ai.safety.blocklist.add': '添加规则',
+  'ai.safety.note': '命令黑名单、命令超时和观察者模式通过 MCP Server 层强制执行，对所有 Agent 类型生效。确认模式和最大迭代次数对内置 Agent 完全强制执行；ACP Agent 可能有自己的内部控制。',
 };
 
 export default zhCN;

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

@@ -0,0 +1,176 @@
+import { useSyncExternalStore, useCallback } from 'react';
+import { TerminalTheme } from '../../domain/models';
+import { TERMINAL_THEMES } from '../../infrastructure/config/terminalThemes';
+import { STORAGE_KEY_CUSTOM_THEMES } from '../../infrastructure/config/storageKeys';
+import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
+
+// Access the Electron bridge for cross-window IPC
+type NetcattyBridge = {
+    notifySettingsChanged?(payload: { key: string; value: unknown }): void;
+    onSettingsChanged?(cb: (payload: { key: string; value: unknown }) => void): () => void;
+};
+const getBridge = (): NetcattyBridge | undefined =>
+    (window as unknown as { netcatty?: NetcattyBridge }).netcatty;
+
+/**
+ * Custom Theme Store - manages user-created terminal themes
+ * Uses useSyncExternalStore pattern (same as fontStore)
+ * Persists to localStorage + cross-window IPC sync
+ */
+type Listener = () => void;
+
+class CustomThemeStore {
+    private themes: TerminalTheme[] = [];
+    private listeners = new Set<Listener>();
+    /** Cached merged array for stable useSyncExternalStore snapshots */
+    private cachedAllThemes: TerminalTheme[] | null = null;
+
+    constructor() {
+        this.loadFromStorage();
+        this.setupCrossWindowSync();
+    }
+
+    /** Reload themes from localStorage. Called internally and after sync apply. */
+    loadFromStorage = () => {
+        try {
+            const parsed = localStorageAdapter.read<TerminalTheme[]>(STORAGE_KEY_CUSTOM_THEMES);
+            if (Array.isArray(parsed)) {
+                this.themes = parsed.map((t: TerminalTheme) => ({ ...t, isCustom: true }));
+            }
+        } catch {
+            // ignore corrupt data
+        }
+        this.notify();
+    };
+
+    private saveToStorage = () => {
+        try {
+            localStorageAdapter.write(STORAGE_KEY_CUSTOM_THEMES, this.themes);
+        } catch {
+            // storage full or unavailable
+        }
+    };
+
+    private notify = () => {
+        this.cachedAllThemes = null; // invalidate cache on any mutation
+        this.listeners.forEach(listener => listener());
+    };
+
+    /** Broadcast change to other Electron windows via IPC */
+    private broadcastChange = () => {
+        try {
+            getBridge()?.notifySettingsChanged?.({
+                key: STORAGE_KEY_CUSTOM_THEMES,
+                value: this.themes,
+            });
+        } catch {
+            // not in Electron or bridge unavailable
+        }
+    };
+
+    /** Listen for changes from other windows and reload */
+    private setupCrossWindowSync = () => {
+        try {
+            getBridge()?.onSettingsChanged?.((payload) => {
+                if (payload.key === STORAGE_KEY_CUSTOM_THEMES) {
+                    // Another window changed custom themes — reload from localStorage
+                    this.loadFromStorage();
+                    this.notify();
+                }
+            });
+        } catch {
+            // not in Electron or bridge unavailable
+        }
+    };
+
+    subscribe = (listener: Listener): (() => void) => {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    };
+
+    // ---- Getters (stable references for useSyncExternalStore) ----
+
+    getCustomThemes = (): TerminalTheme[] => this.themes;
+
+    /** Returns all themes: built-in + custom (cached for snapshot stability) */
+    getAllThemes = (): TerminalTheme[] => {
+        if (!this.cachedAllThemes) {
+            this.cachedAllThemes = [...TERMINAL_THEMES, ...this.themes];
+        }
+        return this.cachedAllThemes;
+    };
+
+    /** Find a theme by ID across both built-in and custom */
+    getThemeById = (id: string): TerminalTheme | undefined => {
+        return TERMINAL_THEMES.find(t => t.id === id) || this.themes.find(t => t.id === id);
+    };
+
+    // ---- Mutations ----
+
+    addTheme = (theme: TerminalTheme) => {
+        this.themes = [...this.themes, { ...theme, isCustom: true }];
+        this.saveToStorage();
+        this.notify();
+        this.broadcastChange();
+    };
+
+    updateTheme = (id: string, updates: Partial<TerminalTheme>) => {
+        this.themes = this.themes.map(t =>
+            t.id === id ? { ...t, ...updates, isCustom: true } : t
+        );
+        this.saveToStorage();
+        this.notify();
+        this.broadcastChange();
+    };
+
+    deleteTheme = (id: string) => {
+        this.themes = this.themes.filter(t => t.id !== id);
+        this.saveToStorage();
+        this.notify();
+        this.broadcastChange();
+    };
+}
+
+// Singleton
+export const customThemeStore = new CustomThemeStore();
+
+// ============== Hooks ==============
+
+/** Get all themes (built-in + custom) */
+export const useAllThemes = (): TerminalTheme[] => {
+    return useSyncExternalStore(
+        customThemeStore.subscribe,
+        customThemeStore.getAllThemes
+    );
+};
+
+/** Get custom themes only */
+export const useCustomThemes = (): TerminalTheme[] => {
+    return useSyncExternalStore(
+        customThemeStore.subscribe,
+        customThemeStore.getCustomThemes
+    );
+};
+
+/** Get theme by ID (built-in or custom) with fallback */
+export const useThemeById = (id: string): TerminalTheme => {
+    const allThemes = useAllThemes();
+    return allThemes.find(t => t.id === id) || TERMINAL_THEMES[0];
+};
+
+/** Theme mutation actions */
+export const useCustomThemeActions = () => {
+    const addTheme = useCallback((theme: TerminalTheme) => {
+        customThemeStore.addTheme(theme);
+    }, []);
+
+    const updateTheme = useCallback((id: string, updates: Partial<TerminalTheme>) => {
+        customThemeStore.updateTheme(id, updates);
+    }, []);
+
+    const deleteTheme = useCallback((id: string) => {
+        customThemeStore.deleteTheme(id);
+    }, []);
+
+    return { addTheme, updateTheme, deleteTheme };
+};

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

@@ -4,31 +4,16 @@ export const isSessionError = (err: unknown): boolean => {
   return (
     msg.includes("session not found") ||
     msg.includes("sftp session") ||
-    msg.includes("not found") ||
-    msg.includes("closed") ||
-    msg.includes("connection reset")
-  );
-};
-
-/**
- * Check if an error message indicates a fatal error that should stop the entire upload.
- * This includes session errors AND target directory deletion errors.
- */
-export const isFatalUploadError = (errorMessage: string): boolean => {
-  const msg = errorMessage.toLowerCase();
-  return (
-    // Session-related errors
-    msg.includes("session not found") ||
-    msg.includes("sftp session") ||
-    msg.includes("connection") ||
-    msg.includes("disconnected") ||
-    // Target directory was deleted during upload
-    msg.includes("no such file") ||
-    msg.includes("enoent") ||
-    msg.includes("does not exist") ||
-    msg.includes("write stream error") ||
-    // Directory was removed
-    msg.includes("directory not found") ||
-    msg.includes("not a directory")
+    msg.includes("session lost") ||
+    msg.includes("channel not ready") ||
+    msg.includes("readdir is not a function") ||
+    msg.includes("channel closed") ||
+    msg.includes("connection closed") ||
+    msg.includes("connection reset") ||
+    msg.includes("write after end") ||
+    msg.includes("no response") ||
+    msg.includes("not connected") ||
+    msg.includes("client disconnected") ||
+    msg.includes("timed out")
   );
 };

application/state/sftp/sharedRemoteHostCache.ts

@@ -0,0 +1,52 @@
+import type { SftpFileEntry, SftpFilenameEncoding } from "../../../domain/models";
+
+interface SharedRemoteHostCacheEntry {
+  path: string;
+  homeDir: string;
+  files: SftpFileEntry[];
+  filenameEncoding: SftpFilenameEncoding;
+  updatedAt: number;
+}
+
+const SHARED_REMOTE_HOST_CACHE_TTL_MS = 60_000;
+
+const sharedRemoteHostCache = new Map<string, SharedRemoteHostCacheEntry>();
+
+/**
+ * Build a cache key that includes connection details so that the same host ID
+ * with different session-time overrides (port, protocol) uses separate entries.
+ */
+export const buildCacheKey = (
+  hostId: string,
+  hostname?: string,
+  port?: number,
+  protocol?: string,
+  sftpSudo?: boolean,
+  username?: string,
+): string => {
+  return `${hostId}:${hostname ?? ''}:${port ?? ''}:${protocol ?? ''}:${sftpSudo ? 'sudo' : ''}:${username ?? ''}`;
+};
+
+export const getSharedRemoteHostCache = (
+  cacheKey: string,
+): SharedRemoteHostCacheEntry | null => {
+  const entry = sharedRemoteHostCache.get(cacheKey);
+  if (!entry) return null;
+
+  if (Date.now() - entry.updatedAt > SHARED_REMOTE_HOST_CACHE_TTL_MS) {
+    sharedRemoteHostCache.delete(cacheKey);
+    return null;
+  }
+
+  return entry;
+};
+
+export const setSharedRemoteHostCache = (
+  cacheKey: string,
+  entry: Omit<SharedRemoteHostCacheEntry, "updatedAt">,
+): void => {
+  sharedRemoteHostCache.set(cacheKey, {
+    ...entry,
+    updatedAt: Date.now(),
+  });
+};

application/state/sftp/types.ts

@@ -7,9 +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
@@ -22,16 +25,22 @@ export interface SftpSideTabs {
 export const EMPTY_LEFT_PANE_ID = "__empty_left__";
 export const EMPTY_RIGHT_PANE_ID = "__empty_right__";
 
-export const createEmptyPane = (id?: string): SftpPane => ({
+export const createEmptyPane = (
+  id?: string,
+  showHiddenFiles = false,
+): SftpPane => ({
   id: id || crypto.randomUUID(),
   connection: null,
   files: [],
   loading: false,
   reconnecting: false,
   error: null,
+  connectionLogs: [],
   selectedFiles: new Set(),
   filter: "",
   filenameEncoding: "auto",
+  showHiddenFiles,
+  transferMutationToken: 0,
 });
 
 // File watch event types
@@ -52,4 +61,7 @@ export interface FileWatchErrorEvent {
 export interface SftpStateOptions {
   onFileWatchSynced?: (event: FileWatchSyncedEvent) => void;
   onFileWatchError?: (event: FileWatchErrorEvent) => void;
+  useCompressedUpload?: boolean;
+  defaultShowHiddenFiles?: boolean;
+  autoConnectLocalOnMount?: boolean;
 }

application/state/sftp/useSftpConnections.ts

@@ -5,6 +5,7 @@ import type { Host, Identity, SftpConnection, SftpFileEntry, SftpFilenameEncodin
 import type { SftpPane } from "./types";
 import { useSftpDirectoryListing } from "./useSftpDirectoryListing";
 import { useSftpHostCredentials } from "./useSftpHostCredentials";
+import { buildCacheKey, getSharedRemoteHostCache, setSharedRemoteHostCache } from "./sharedRemoteHostCache";
 
 interface UseSftpConnectionsParams {
   hosts: Host[];
@@ -24,14 +25,16 @@ interface UseSftpConnectionsParams {
   dirCacheRef: MutableRefObject<Map<string, { files: SftpFileEntry[]; timestamp: number }>>;
   sftpSessionsRef: MutableRefObject<Map<string, string>>;
   lastConnectedHostRef: MutableRefObject<{ left: Host | "local" | null; right: Host | "local" | null }>;
+  connectionCacheKeyMapRef: MutableRefObject<Map<string, string>>;
   reconnectingRef: MutableRefObject<{ left: boolean; right: boolean }>;
   makeCacheKey: (connectionId: string, path: string, encoding?: SftpFilenameEncoding) => string;
   clearCacheForConnection: (connectionId: string) => void;
-  createEmptyPane: (id?: string) => SftpPane;
+  createEmptyPane: (id?: string, showHiddenFiles?: boolean) => SftpPane;
+  autoConnectLocalOnMount?: boolean;
 }
 
 interface UseSftpConnectionsResult {
-  connect: (side: "left" | "right", host: Host | "local") => Promise<void>;
+  connect: (side: "left" | "right", host: Host | "local", options?: { forceNewTab?: boolean; onTabCreated?: (tabId: string) => void }) => Promise<void>;
   disconnect: (side: "left" | "right") => Promise<void>;
   listLocalFiles: (path: string) => Promise<SftpFileEntry[]>;
   listRemoteFiles: (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => Promise<SftpFileEntry[]>;
@@ -55,22 +58,24 @@ export const useSftpConnections = ({
   dirCacheRef,
   sftpSessionsRef,
   lastConnectedHostRef,
+  connectionCacheKeyMapRef,
   reconnectingRef,
   makeCacheKey,
   clearCacheForConnection,
   createEmptyPane,
+  autoConnectLocalOnMount = true,
 }: UseSftpConnectionsParams): UseSftpConnectionsResult => {
   const getHostCredentials = useSftpHostCredentials({ hosts, keys, identities });
   const { listLocalFiles, listRemoteFiles } = useSftpDirectoryListing();
 
   const connect = useCallback(
-    async (side: "left" | "right", host: Host | "local") => {
+    async (side: "left" | "right", host: Host | "local", options?: { forceNewTab?: boolean; onTabCreated?: (tabId: string) => void }) => {
       const setTabs = side === "left" ? setLeftTabs : setRightTabs;
 
       let activeTabId: string | null = null;
       const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
 
-      if (!sideTabs.activeTabId) {
+      if (!sideTabs.activeTabId || options?.forceNewTab) {
         const newPane = createEmptyPane();
         activeTabId = newPane.id;
         setTabs((prev) => ({
@@ -83,12 +88,27 @@ 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.
+      options?.onTabCreated?.(activeTabId);
+
       const connectionId = `${side}-${Date.now()}`;
 
       navSeqRef.current[side] += 1;
       const connectRequestId = navSeqRef.current[side];
 
       lastConnectedHostRef.current[side] = host;
+      // Store the cache key for this connection so pane actions can look it up
+      // by connectionId instead of relying on the per-side lastConnectedHostRef.
+      if (host !== "local") {
+        connectionCacheKeyMapRef.current.set(
+          connectionId,
+          buildCacheKey(host.id, host.hostname, host.port, host.protocol, host.sftpSudo, host.username),
+        );
+      }
 
       const currentPane = getActivePane(side);
       // Reset encoding to host's configured encoding or "auto" when connecting to a new host
@@ -96,18 +116,25 @@ export const useSftpConnections = ({
       const filenameEncoding: SftpFilenameEncoding =
         host === "local" ? "auto" : (host.sftpEncoding ?? "auto");
 
-      if (currentPane?.connection) {
-        clearCacheForConnection(currentPane.connection.id);
-      }
-      if (currentPane?.connection && !currentPane.connection.isLocal) {
-        const oldSftpId = sftpSessionsRef.current.get(currentPane.connection.id);
-        if (oldSftpId) {
-          try {
-            await netcattyBridge.get()?.closeSftp(oldSftpId);
-          } catch {
-            // Ignore errors when closing stale SFTP sessions
+      // When forceNewTab is set, we're preserving the old tab for instant switching —
+      // don't close its SFTP session or clear its cache.
+      if (!options?.forceNewTab) {
+        if (currentPane?.connection) {
+          clearCacheForConnection(currentPane.connection.id);
+        }
+        if (currentPane?.connection && !currentPane.connection.isLocal) {
+          const oldSftpId = sftpSessionsRef.current.get(currentPane.connection.id);
+          if (oldSftpId) {
+            // Delete the mapping BEFORE the async closeSftp call to prevent
+            // concurrent code from using a stale sftpId that the backend may
+            // have already removed during the await.
+            sftpSessionsRef.current.delete(currentPane.connection.id);
+            try {
+              await netcattyBridge.get()?.closeSftp(oldSftpId);
+            } catch {
+              // Ignore errors when closing stale SFTP sessions
+            }
           }
-          sftpSessionsRef.current.delete(currentPane.connection.id);
         }
       }
 
@@ -134,6 +161,7 @@ export const useSftpConnections = ({
           loading: true,
           reconnecting: false,
           error: null,
+          connectionLogs: [],
           filenameEncoding, // Reset encoding for new connection
         }));
 
@@ -162,28 +190,83 @@ export const useSftpConnections = ({
           }));
         }
       } else {
+        const hostCacheKey = buildCacheKey(host.id, host.hostname, host.port, host.protocol, host.sftpSudo, host.username);
+        const sharedHostCacheCandidate = getSharedRemoteHostCache(hostCacheKey);
+        const sharedHostCache =
+          sharedHostCacheCandidate?.filenameEncoding === filenameEncoding
+            ? sharedHostCacheCandidate
+            : null;
+        const cachedStartPath = sharedHostCache?.path ?? "/";
+
         const connection: SftpConnection = {
           id: connectionId,
           hostId: host.id,
           hostLabel: host.label,
           isLocal: false,
           status: "connecting",
-          currentPath: "/",
+          currentPath: cachedStartPath,
         };
 
         updateTab(side, activeTabId, (prev) => ({
           ...prev,
           connection,
+          // Always show loading while connecting — even with cached files.
+          // The cached file list is shown as a preview, but the pane stays
+          // non-interactive until the SFTP session is actually established.
           loading: true,
           reconnecting: prev.reconnecting,
           error: null,
-          files: prev.reconnecting ? prev.files : [],
+          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");
 
@@ -238,72 +321,123 @@ export const useSftpConnections = ({
 
           sftpSessionsRef.current.set(connectionId, sftpId);
 
-          let startPath = "/";
-          const statSftp = netcattyBridge.get()?.statSftp;
-          if (statSftp) {
-            const candidates: string[] = [];
-            if (credentials.username === "root") {
-              candidates.push("/root");
-            } else if (credentials.username) {
-              candidates.push(`/home/${credentials.username}`);
-              candidates.push("/root");
-            } else {
-              candidates.push("/root");
-            }
-            for (const candidate of candidates) {
+          let startPath = sharedHostCache?.path ?? "/";
+          let homeDir = sharedHostCache?.homeDir ?? startPath;
+
+          if (!sharedHostCache) {
+            // Detect home directory: SSH exec `echo ~` → SFTP realpath('.') → hardcoded fallback
+            const bridge = netcattyBridge.get();
+            let detected = false;
+
+            if (bridge?.getSftpHomeDir) {
               try {
-                const stat = await statSftp(sftpId, candidate, filenameEncoding);
-                if (stat?.type === "directory") {
-                  startPath = candidate;
-                  break;
+                const result = await bridge.getSftpHomeDir(sftpId);
+                if (result?.success && result.homeDir) {
+                  startPath = result.homeDir;
+                  homeDir = result.homeDir;
+                  detected = true;
                 }
               } catch {
-                // Ignore missing/permission errors
+                // Fall through to hardcoded candidates
               }
             }
-          } else {
-            if (credentials.username === "root") {
-              try {
-                const rootFiles = await netcattyBridge.get()?.listSftp(sftpId, "/root", filenameEncoding);
-                if (rootFiles) startPath = "/root";
-              } catch {
-                // Fallback path not available
+
+            if (!detected) {
+              const candidates: string[] = [];
+              if (credentials.username === "root") {
+                candidates.push("/root");
+              } else if (credentials.username) {
+                candidates.push(`/home/${credentials.username}`);
+                candidates.push("/root");
+              } else {
+                candidates.push("/root");
               }
-            } else if (credentials.username) {
-              try {
-                const homeFiles = await netcattyBridge.get()?.listSftp(
-                  sftpId,
-                  `/home/${credentials.username}`,
-                  filenameEncoding,
-                );
-                if (homeFiles) startPath = `/home/${credentials.username}`;
-              } catch {
-                // Fall through to /root check
-              }
-              if (startPath === "/") {
-                try {
-                  const rootFiles = await netcattyBridge.get()?.listSftp(sftpId, "/root", filenameEncoding);
-                  if (rootFiles) startPath = "/root";
-                } catch {
-                  // Fallback path not available
+              const statSftp = bridge?.statSftp;
+              if (statSftp) {
+                for (const candidate of candidates) {
+                  try {
+                    const stat = await statSftp(sftpId, candidate, filenameEncoding);
+                    if (stat?.type === "directory") {
+                      startPath = candidate;
+                      homeDir = candidate;
+                      break;
+                    }
+                  } catch {
+                    // Ignore missing/permission errors
+                  }
+                }
+              } else {
+                // Fallback: probe candidates via listSftp when statSftp is unavailable
+                for (const candidate of candidates) {
+                  try {
+                    const files = await bridge?.listSftp(sftpId, candidate, filenameEncoding);
+                    if (files) {
+                      startPath = candidate;
+                      homeDir = candidate;
+                      break;
+                    }
+                  } catch {
+                    // Ignore missing/permission errors
+                  }
                 }
-              }
-            } else {
-              try {
-                const rootFiles = await netcattyBridge.get()?.listSftp(sftpId, "/root", filenameEncoding);
-                if (rootFiles) startPath = "/root";
-              } catch {
-                // Fallback path not available
               }
             }
           }
 
-          const files = await listRemoteFiles(sftpId, startPath, filenameEncoding);
+          const provisionalCacheKey = sharedHostCache
+            ? makeCacheKey(connectionId, startPath, filenameEncoding)
+            : null;
+          if (sharedHostCache && provisionalCacheKey) {
+            dirCacheRef.current.set(provisionalCacheKey, {
+              files: sharedHostCache.files,
+              timestamp: Date.now(),
+            });
+          }
+
+          let files: SftpFileEntry[] = [];
+          try {
+            files = await listRemoteFiles(sftpId, startPath, filenameEncoding);
+          } catch {
+            // Cached path may be stale (deleted, permissions changed).
+            // Remove the provisional cache entry so phantom files don't resurface.
+            if (provisionalCacheKey) {
+              dirCacheRef.current.delete(provisionalCacheKey);
+            }
+            // Fall back to homeDir, then "/", chaining attempts.
+            let fallbackSucceeded = false;
+            if (sharedHostCache && startPath !== homeDir) {
+              try {
+                startPath = homeDir;
+                files = await listRemoteFiles(sftpId, startPath, filenameEncoding);
+                fallbackSucceeded = true;
+              } catch {
+                // homeDir also failed, try root
+              }
+            }
+            if (!fallbackSucceeded && startPath !== "/") {
+              try {
+                startPath = "/";
+                files = await listRemoteFiles(sftpId, startPath, filenameEncoding);
+                fallbackSucceeded = true;
+              } catch {
+                // root also failed
+              }
+            }
+            if (!fallbackSucceeded) {
+              throw new Error("Cannot list any remote directory");
+            }
+          }
           if (navSeqRef.current[side] !== connectRequestId) return;
           dirCacheRef.current.set(makeCacheKey(connectionId, startPath, filenameEncoding), {
             files,
             timestamp: Date.now(),
           });
+          setSharedRemoteHostCache(hostCacheKey, {
+            path: startPath,
+            homeDir,
+            files,
+            filenameEncoding,
+          });
 
           reconnectingRef.current[side] = false;
 
@@ -314,12 +448,13 @@ export const useSftpConnections = ({
                   ...prev.connection,
                   status: "connected",
                   currentPath: startPath,
-                  homeDir: startPath,
+                  homeDir,
                 }
               : null,
             files,
             loading: false,
             reconnecting: false,
+            connectionLogs: [], // Clear after successful connect to avoid replay during navigation
           }));
         } catch (err) {
           if (navSeqRef.current[side] !== connectRequestId) return;
@@ -333,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?.();
         }
       }
     },
@@ -346,6 +487,7 @@ export const useSftpConnections = ({
       getActivePane,
       updateTab,
       clearCacheForConnection,
+      createEmptyPane,
       makeCacheKey,
       listLocalFiles,
       listRemoteFiles,
@@ -355,33 +497,44 @@ export const useSftpConnections = ({
   const initialConnectDoneRef = useRef(false);
 
   useEffect(() => {
-    if (!initialConnectDoneRef.current && leftTabs.tabs.length === 0) {
-      initialConnectDoneRef.current = true;
-      setTimeout(() => {
+    if (
+      autoConnectLocalOnMount &&
+      !initialConnectDoneRef.current &&
+      leftTabs.tabs.length === 0
+    ) {
+      const timer = window.setTimeout(() => {
+        initialConnectDoneRef.current = true;
         connect("left", "local");
       }, 0);
+      return () => window.clearTimeout(timer);
     }
-  }, [connect, leftTabs.tabs.length]);
+  }, [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") => {
@@ -412,7 +565,7 @@ export const useSftpConnections = ({
         }
       }
 
-      updateTab(side, activeTabId, () => createEmptyPane(activeTabId));
+      updateTab(side, activeTabId, () => createEmptyPane(activeTabId, pane.showHiddenFiles));
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [getActivePane, clearCacheForConnection, updateTab],

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

@@ -7,21 +7,27 @@ import { joinPath } from "./utils";
 import {
   UploadController,
   uploadFromDataTransfer,
+  uploadEntriesDirect,
   UploadBridge,
   UploadCallbacks,
   UploadResult,
   UploadTaskInfo,
 } from "../../../lib/uploadService";
+import type { DropEntry } from "../../../lib/sftpFileUtils";
 
 // Re-export UploadResult for external usage
 export type { UploadResult };
 
 interface UseSftpExternalOperationsParams {
   getActivePane: (side: "left" | "right") => SftpPane | null;
-  refresh: (side: "left" | "right") => Promise<void>;
+  refresh: (side: "left" | "right", options?: { tabId?: string }) => Promise<void>;
   sftpSessionsRef: React.MutableRefObject<Map<string, string>>;
+  connectionCacheKeyMapRef: React.MutableRefObject<Map<string, string>>;
+  clearDirCacheEntry?: (connectionId: string, path: string) => void;
+  useCompressedUpload?: boolean;
   addExternalUpload?: (task: TransferTask) => void;
   updateExternalUpload?: (taskId: string, updates: Partial<TransferTask>) => void;
+  isTransferCancelled?: (taskId: string) => boolean;
   dismissExternalUpload?: (taskId: string) => void;
 }
 
@@ -36,9 +42,16 @@ interface SftpExternalOperationsResult {
     appPath: string,
     options?: { enableWatch?: boolean }
   ) => Promise<{ localTempPath: string; watchId?: string }>;
+  activeFileWatchCountRef: React.MutableRefObject<number>;
   uploadExternalFiles: (
     side: "left" | "right",
-    dataTransfer: DataTransfer
+    dataTransfer: DataTransfer,
+    targetPath?: string
+  ) => Promise<UploadResult[]>;
+  uploadExternalEntries: (
+    side: "left" | "right",
+    entries: DropEntry[],
+    options?: { targetPath?: string }
   ) => Promise<UploadResult[]>;
   cancelExternalUpload: () => Promise<void>;
   selectApplication: () => Promise<{ path: string; name: string } | null>;
@@ -47,11 +60,26 @@ interface SftpExternalOperationsResult {
 export const useSftpExternalOperations = (
   params: UseSftpExternalOperationsParams
 ): SftpExternalOperationsResult => {
-  const { getActivePane, refresh, sftpSessionsRef, addExternalUpload, updateExternalUpload, dismissExternalUpload } = params;
+  const {
+    getActivePane,
+    refresh,
+    sftpSessionsRef,
+    connectionCacheKeyMapRef,
+    clearDirCacheEntry,
+    useCompressedUpload = false,
+    addExternalUpload,
+    updateExternalUpload,
+    isTransferCancelled,
+    dismissExternalUpload,
+  } = params;
 
   // Upload controller for cancellation support
   const uploadControllerRef = useRef<UploadController | null>(null);
 
+  // Track active file watches so the side panel can block host-switching.
+  // Reset to 0 when the SFTP session disconnects (handled in SftpSidePanel).
+  const activeFileWatchCountRef = useRef(0);
+
   const readTextFile = useCallback(
     async (side: "left" | "right", filePath: string): Promise<string> => {
       const pane = getActivePane(side);
@@ -173,14 +201,113 @@ export const useSftpExternalOperations = (
         throw new Error("SFTP session not found");
       }
 
-      console.log("[SFTP] Downloading file to temp", { sftpId, remotePath, fileName });
-      const localTempPath = await bridge.downloadSftpToTemp(
-        sftpId,
-        remotePath,
-        fileName,
-        pane.filenameEncoding,
-      );
-      console.log("[SFTP] File downloaded to temp", { localTempPath });
+      let localTempPath: string;
+      let wasCancelled = false;
+      let externalTransferId: string | undefined;
+      const isLocalTempDownloadCancelled = () =>
+        !!externalTransferId && !!isTransferCancelled?.(externalTransferId);
+      const cleanupTempDownload = async (filePath: string) => {
+        if (!bridge.deleteTempFile) return;
+        try {
+          await bridge.deleteTempFile(filePath);
+        } catch (err) {
+          console.warn("[SFTP] Failed to delete cancelled temp download:", err);
+        }
+      };
+
+      if (bridge.downloadSftpToTempWithProgress && addExternalUpload && updateExternalUpload) {
+        externalTransferId = `download-temp-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+
+        addExternalUpload({
+          id: externalTransferId,
+          fileName,
+          sourcePath: remotePath,
+          targetPath: "(temp)",
+          sourceConnectionId: pane.connection.id,
+          targetConnectionId: "local",
+          direction: "download",
+          status: "transferring" as TransferStatus,
+          totalBytes: 0,
+          transferredBytes: 0,
+          speed: 0,
+          startTime: Date.now(),
+          isDirectory: false,
+          retryable: false,
+        });
+
+        try {
+          const result = await bridge.downloadSftpToTempWithProgress(
+            sftpId,
+            remotePath,
+            fileName,
+            pane.filenameEncoding,
+            externalTransferId,
+            (transferred, total, speed) => {
+              updateExternalUpload(externalTransferId, {
+                transferredBytes: transferred,
+                totalBytes: total,
+                speed,
+              });
+            },
+            undefined,
+            (error) => {
+              updateExternalUpload(externalTransferId, {
+                status: "failed" as TransferStatus,
+                endTime: Date.now(),
+                error,
+                speed: 0,
+              });
+            },
+            () => {
+              updateExternalUpload(externalTransferId, {
+                status: "cancelled" as TransferStatus,
+                endTime: Date.now(),
+                speed: 0,
+              });
+            },
+          );
+          wasCancelled = result.cancelled;
+          localTempPath = result.localPath;
+        } catch (err) {
+          updateExternalUpload(externalTransferId, {
+            status: "failed" as TransferStatus,
+            endTime: Date.now(),
+            error: err instanceof Error ? err.message : String(err),
+            speed: 0,
+          });
+          throw err;
+        }
+
+        if (wasCancelled) {
+          if (localTempPath && bridge.deleteTempFile) {
+            bridge.deleteTempFile(localTempPath).catch(() => {});
+          }
+          return { localTempPath: "" };
+        }
+
+        if (isLocalTempDownloadCancelled()) {
+          await cleanupTempDownload(localTempPath);
+          return { localTempPath: "" };
+        }
+
+        updateExternalUpload(externalTransferId, {
+          status: "completed" as TransferStatus,
+          endTime: Date.now(),
+          speed: 0,
+        });
+      } else {
+        localTempPath = await bridge.downloadSftpToTemp(
+          sftpId,
+          remotePath,
+          fileName,
+          pane.filenameEncoding,
+        );
+      }
+
+      if (isLocalTempDownloadCancelled()) {
+        await cleanupTempDownload(localTempPath);
+        return { localTempPath: "" };
+      }
 
       if (bridge.registerTempFile) {
         try {
@@ -190,15 +317,23 @@ export const useSftpExternalOperations = (
         }
       }
 
-      console.log("[SFTP] Opening with application", { localTempPath, appPath });
-      await bridge.openWithApplication(localTempPath, appPath);
-      console.log("[SFTP] Application launched");
+      try {
+        await bridge.openWithApplication(localTempPath, appPath);
+      } catch (err) {
+        if (externalTransferId) {
+          updateExternalUpload(externalTransferId, {
+            status: "failed" as TransferStatus,
+            endTime: Date.now(),
+            error: err instanceof Error ? err.message : String(err),
+            speed: 0,
+          });
+        }
+        throw err;
+      }
 
       let watchId: string | undefined;
-      console.log("[SFTP] Auto-sync enabled check", { enableWatch: options?.enableWatch, hasStartFileWatch: !!bridge.startFileWatch });
       if (options?.enableWatch && bridge.startFileWatch) {
         try {
-          console.log("[SFTP] Starting file watch", { localTempPath, remotePath, sftpId });
           const result = await bridge.startFileWatch(
             localTempPath,
             remotePath,
@@ -206,23 +341,23 @@ export const useSftpExternalOperations = (
             pane.filenameEncoding,
           );
           watchId = result.watchId;
-          console.log("[SFTP] File watch started successfully", { watchId, localTempPath, remotePath });
+          activeFileWatchCountRef.current += 1;
         } catch (err) {
           console.warn("[SFTP] Failed to start file watch:", err);
         }
-      } else {
-        console.log("[SFTP] File watching not enabled or not available");
       }
 
       return { localTempPath, watchId };
     },
-    [getActivePane, sftpSessionsRef],
+    [getActivePane, sftpSessionsRef, addExternalUpload, updateExternalUpload, isTransferCancelled],
   );
 
   // Create upload callbacks that translate to TransferTask updates
   const createUploadCallbacks = useCallback((
     connectionId: string,
-    targetPath: string
+    targetPath: string,
+    targetHostId?: string,
+    targetConnectionKey?: string,
   ): UploadCallbacks => {
     return {
       onScanningStart: (taskId: string) => {
@@ -234,6 +369,8 @@ export const useSftpExternalOperations = (
             targetPath,
             sourceConnectionId: "external",
             targetConnectionId: connectionId,
+            targetHostId,
+            targetConnectionKey,
             direction: "upload",
             status: "pending" as TransferStatus,
             totalBytes: 0,
@@ -241,6 +378,7 @@ export const useSftpExternalOperations = (
             speed: 0,
             startTime: Date.now(),
             isDirectory: true,
+            progressMode: "bytes",
           };
           addExternalUpload(scanningTask);
         }
@@ -259,6 +397,8 @@ export const useSftpExternalOperations = (
             targetPath: joinPath(targetPath, task.fileName),
             sourceConnectionId: "external",
             targetConnectionId: connectionId,
+            targetHostId,
+            targetConnectionKey,
             direction: "upload",
             status: "transferring" as TransferStatus,
             totalBytes: task.totalBytes,
@@ -266,6 +406,8 @@ export const useSftpExternalOperations = (
             speed: 0,
             startTime: Date.now(),
             isDirectory: task.isDirectory,
+            progressMode: task.progressMode ?? "bytes",
+            parentTaskId: task.parentTaskId,
           };
           addExternalUpload(transferTask);
         }
@@ -367,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");
@@ -386,27 +528,42 @@ export const useSftpExternalOperations = (
         throw new Error("SFTP session not found");
       }
 
+      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);
+      const callbacks = createUploadCallbacks(
+        pane.connection.id,
+        uploadTargetPath,
+        pane.connection.isLocal ? undefined : pane.connection.hostId,
+        pane.connection.isLocal ? undefined : connectionCacheKeyMapRef.current.get(pane.connection.id),
+      );
 
       try {
         const results = await uploadFromDataTransfer(
           dataTransfer,
           {
-            targetPath: pane.connection.currentPath,
+            targetPath: uploadTargetPath,
             sftpId,
             isLocal: pane.connection.isLocal,
             bridge: createUploadBridge,
             joinPath,
             callbacks,
+            useCompressedUpload,
           },
           controller
         );
 
-        await refresh(side);
+        // 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);
@@ -415,7 +572,102 @@ export const useSftpExternalOperations = (
         uploadControllerRef.current = null;
       }
     },
-    [getActivePane, refresh, sftpSessionsRef, createUploadCallbacks, createUploadBridge],
+    [
+      clearDirCacheEntry,
+      connectionCacheKeyMapRef,
+      getActivePane,
+      refresh,
+      sftpSessionsRef,
+      createUploadCallbacks,
+      createUploadBridge,
+      useCompressedUpload,
+    ],
+  );
+
+  const uploadExternalEntries = useCallback(
+    async (
+      side: "left" | "right",
+      entries: DropEntry[],
+      options?: { targetPath?: string },
+    ): Promise<UploadResult[]> => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) {
+        throw new Error("No active connection");
+      }
+
+      const bridge = netcattyBridge.get();
+      if (!bridge) {
+        throw new Error("Bridge not available");
+      }
+
+      const sftpId = pane.connection.isLocal
+        ? null
+        : sftpSessionsRef.current.get(pane.connection.id) || null;
+
+      if (!pane.connection.isLocal && !sftpId) {
+        throw new Error("SFTP session not found");
+      }
+
+      // Capture the pane ID now so we can refresh the correct tab after
+      // upload, even if focus switches during the transfer.
+      const uploadPaneId = pane.id;
+      const controller = new UploadController();
+      uploadControllerRef.current = controller;
+      const uploadTargetPath = options?.targetPath || pane.connection.currentPath;
+
+      const callbacks = createUploadCallbacks(
+        pane.connection.id,
+        uploadTargetPath,
+        pane.connection.isLocal ? undefined : pane.connection.hostId,
+        pane.connection.isLocal ? undefined : connectionCacheKeyMapRef.current.get(pane.connection.id),
+      );
+      const directUploadBridge: UploadBridge = {
+        ...createUploadBridge,
+      };
+
+      try {
+        const results = await uploadEntriesDirect(
+          entries,
+          {
+            targetPath: uploadTargetPath,
+            sftpId,
+            isLocal: pane.connection.isLocal,
+            bridge: directUploadBridge,
+            joinPath,
+            callbacks,
+            useCompressedUpload,
+          },
+          controller,
+        );
+
+        // Refresh the specific tab that initiated the upload (not whichever
+        // tab is active now — focus may have switched during the transfer).
+        // Also invalidate the upload target's cache entry so returning to
+        // that path triggers a fresh listing.
+        if (clearDirCacheEntry) {
+          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);
+        throw error;
+      } finally {
+        uploadControllerRef.current = null;
+      }
+    },
+    [
+      clearDirCacheEntry,
+      connectionCacheKeyMapRef,
+      createUploadCallbacks,
+      createUploadBridge,
+      getActivePane,
+      refresh,
+      sftpSessionsRef,
+      useCompressedUpload,
+    ],
   );
 
   const cancelExternalUpload = useCallback(async () => {
@@ -443,7 +695,9 @@ export const useSftpExternalOperations = (
     writeTextFile,
     downloadToTempAndOpen,
     uploadExternalFiles,
+    uploadExternalEntries,
     cancelExternalUpload,
     selectApplication,
+    activeFileWatchCountRef,
   };
 };

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 {
@@ -20,26 +21,36 @@ export const useSftpHostCredentials = ({
 
       const proxyConfig = host.proxyConfig
         ? {
-            type: host.proxyConfig.type,
-            host: host.proxyConfig.host,
-            port: host.proxyConfig.port,
-            username: host.proxyConfig.username,
-            password: host.proxyConfig.password,
-          }
+          type: host.proxyConfig.type,
+          host: host.proxyConfig.host,
+          port: host.proxyConfig.port,
+          username: host.proxyConfig.username,
+          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,
@@ -63,12 +88,14 @@ export const useSftpHostCredentials = ({
         password: resolved.password,
         privateKey: key?.privateKey,
         certificate: key?.certificate,
+        passphrase: resolved.passphrase || key?.passphrase,
         publicKey: key?.publicKey,
         keyId: resolved.keyId,
         keySource: key?.source,
         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,16 @@
-import { useCallback } from "react";
+import { 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;
   updateTab: (side: "left" | "right", tabId: string, updater: (pane: SftpPane) => SftpPane) => void;
   updateActiveTab: (side: "left" | "right", updater: (pane: SftpPane) => SftpPane) => void;
@@ -15,6 +20,7 @@ interface UseSftpPaneActionsParams {
   dirCacheRef: React.MutableRefObject<Map<string, { files: SftpFileEntry[]; timestamp: number }>>;
   sftpSessionsRef: React.MutableRefObject<Map<string, string>>;
   lastConnectedHostRef: React.MutableRefObject<{ left: Host | "local" | null; right: Host | "local" | null }>;
+  connectionCacheKeyMapRef: React.MutableRefObject<Map<string, string>>;
   reconnectingRef: React.MutableRefObject<{ left: boolean; right: boolean }>;
   makeCacheKey: (connectionId: string, path: string, encoding?: SftpFilenameEncoding) => string;
   clearCacheForConnection: (connectionId: string) => void;
@@ -22,12 +28,13 @@ 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;
 }
 
 interface UseSftpPaneActionsResult {
-  navigateTo: (side: "left" | "right", path: string, options?: { force?: boolean }) => Promise<void>;
-  refresh: (side: "left" | "right") => Promise<void>;
+  navigateTo: (side: "left" | "right", path: string, options?: { force?: boolean; tabId?: string }) => Promise<void>;
+  refresh: (side: "left" | "right", options?: { tabId?: string }) => Promise<void>;
   navigateUp: (side: "left" | "right") => Promise<void>;
   openEntry: (side: "left" | "right", entry: SftpFileEntry) => Promise<void>;
   toggleSelection: (side: "left" | "right", fileName: string, multiSelect: boolean) => void;
@@ -37,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",
@@ -46,10 +55,13 @@ 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>;
 }
 
 export const useSftpPaneActions = ({
+  hosts,
   getActivePane,
   updateTab,
   updateActiveTab,
@@ -59,6 +71,7 @@ export const useSftpPaneActions = ({
   dirCacheRef,
   sftpSessionsRef,
   lastConnectedHostRef,
+  connectionCacheKeyMapRef,
   reconnectingRef,
   makeCacheKey,
   clearCacheForConnection,
@@ -66,34 +79,98 @@ 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);
+  hostsRef.current = hosts;
+  const getActivePaneCacheKey = useCallback((side: "left" | "right", hostId: string, connectionId?: string): string => {
+    // Prefer the per-connection cache key — it's set at connect time and
+    // correctly identifies the endpoint even when multiple tabs share the
+    // same hostId with different session-time overrides.
+    if (connectionId) {
+      const perConnKey = connectionCacheKeyMapRef.current.get(connectionId);
+      if (perConnKey) return perConnKey;
+    }
+    // Fallback: lastConnectedHostRef (per-side, may be stale for multi-tab)
+    const connHost = lastConnectedHostRef.current[side];
+    if (connHost && connHost !== "local" && connHost.id === hostId) {
+      return buildCacheKey(connHost.id, connHost.hostname, connHost.port, connHost.protocol, connHost.sftpSudo, connHost.username);
+    }
+    // Fall back to vault host
+    const host = hostsRef.current.find(h => h.id === hostId);
+    if (host) {
+      return buildCacheKey(host.id, host.hostname, host.port, host.protocol, host.sftpSudo, host.username);
+    }
+    return hostId;
+  }, [connectionCacheKeyMapRef, lastConnectedHostRef]);
+
+  // Track the latest navigation request ID per tab, so we can distinguish
+  // whether a superseded request was superseded by the same tab or a different tab.
+  const tabNavSeqRef = useRef(new Map<string, number>());
+
+  // Track the last confirmed (successfully loaded) state per tab, so that
+  // restore-on-error/supersede always reverts to a known-good state rather
+  // than an intermediate optimistic state from another in-flight navigation.
+  // Includes connectionId so stale entries from a previous host are ignored.
+  const lastConfirmedRef = useRef(
+    new Map<string, { connectionId: string; path: string; files: SftpFileEntry[]; selectedFiles: Set<string> }>(),
+  );
+
   const navigateTo = useCallback(
     async (
       side: "left" | "right",
       path: string,
-      options?: { force?: boolean },
+      options?: { force?: boolean; tabId?: string },
     ) => {
-      console.log("[SFTP navigateTo] called", { side, path, force: options?.force });
-
-      const pane = getActivePane(side);
       const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
-      const activeTabId = sideTabs.activeTabId;
+      // When tabId is specified, target that specific tab instead of the active one.
+      // This allows refreshing a background tab (e.g. after a transfer completes
+      // while focus has switched to another host).
+      const targetTabId = options?.tabId ?? sideTabs.activeTabId;
+      const pane = options?.tabId
+        ? sideTabs.tabs.find((t) => t.id === options.tabId) ?? null
+        : getActivePane(side);
 
-      console.log("[SFTP navigateTo] state check", {
-        paneId: pane?.id,
-        hasConnection: !!pane?.connection,
-        activeTabId,
-        currentPath: pane?.connection?.currentPath,
-      });
-
-      if (!pane?.connection || !activeTabId) {
-        console.log("[SFTP navigateTo] No pane/connection/activeTabId, returning early");
+      if (!pane?.connection || !targetTabId) {
         return;
       }
 
+      const connectionId = pane.connection.id;
       const requestId = ++navSeqRef.current[side];
-      const cacheKey = makeCacheKey(pane.connection.id, path, pane.filenameEncoding);
+      const cacheKey = makeCacheKey(connectionId, path, pane.filenameEncoding);
       const cached = options?.force
         ? undefined
         : dirCacheRef.current.get(cacheKey);
@@ -103,8 +180,14 @@ export const useSftpPaneActions = ({
         Date.now() - cached.timestamp < dirCacheTtlMs &&
         cached.files
       ) {
-        console.log("[SFTP navigateTo] Using cached files for path", { path, cacheKey });
-        updateTab(side, activeTabId, (prev) => ({
+        tabNavSeqRef.current.set(targetTabId, requestId);
+        lastConfirmedRef.current.set(targetTabId, {
+          connectionId,
+          path,
+          files: cached.files,
+          selectedFiles: EMPTY_SET,
+        });
+        updateTab(side, targetTabId, (prev) => ({
           ...prev,
           connection: prev.connection
             ? { ...prev.connection, currentPath: path }
@@ -112,13 +195,54 @@ 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
+          // shared cache is a best-effort optimization and hostId uniquely
+          // identifies the connection in the common case. Session-time
+          // overrides create separate connections with distinct cache keys
+          // at the connect() layer.
+          setSharedRemoteHostCache(getActivePaneCacheKey(side, pane.connection.hostId, pane.connection.id), {
+            path,
+            homeDir: pane.connection.homeDir ?? path,
+            files: cached.files,
+            filenameEncoding: pane.filenameEncoding,
+          });
+        }
         return;
       }
 
-      console.log("[SFTP navigateTo] Fetching files from server for path", { path });
-      updateTab(side, activeTabId, (prev) => ({ ...prev, loading: true, error: null }));
+      // Re-seed confirmed state whenever the pane is settled (not loading), or
+      // when the connection has changed. This captures post-mutation state from
+      // optimistic updates (e.g. deleteFilesAtPath) so that a failed refresh
+      // doesn't resurrect deleted items.
+      const existing = lastConfirmedRef.current.get(targetTabId);
+      if (!existing || existing.connectionId !== connectionId || !pane.loading) {
+        lastConfirmedRef.current.set(targetTabId, {
+          connectionId,
+          path: pane.connection.currentPath,
+          files: pane.files,
+          selectedFiles: pane.selectedFiles,
+        });
+      }
+      const confirmed = lastConfirmedRef.current.get(targetTabId)!;
+      const previousPath = confirmed.path;
+      const previousFiles = confirmed.files;
+      const previousSelection = confirmed.selectedFiles;
+      tabNavSeqRef.current.set(targetTabId, requestId);
+      // Keep existing files visible during loading — the loading overlay
+      // (pointer-events-none) prevents interaction. This avoids blanking a tab
+      // that gets superseded by another tab navigating on the same side.
+      updateTab(side, targetTabId, (prev) => ({
+        ...prev,
+        connection: prev.connection
+          ? { ...prev.connection, currentPath: path }
+          : null,
+        selectedFiles: EMPTY_SET,
+        loading: true,
+        error: null,
+      }));
 
       try {
         let files: SftpFileEntry[];
@@ -129,16 +253,17 @@ export const useSftpPaneActions = ({
           const sftpId = sftpSessionsRef.current.get(pane.connection.id);
           if (!sftpId) {
             clearCacheForConnection(pane.connection.id);
-            updateTab(side, activeTabId, (prev) => ({
-              ...prev,
-              connection: null,
-              files: [],
-              loading: false,
-              reconnecting: false,
-              error: "SFTP session lost. Please reconnect.",
-              selectedFiles: new Set(),
-              filter: "",
-            }));
+            // For background tabs (explicit tabId), update that tab directly
+            // instead of handleSessionError which targets the active tab.
+            if (options?.tabId) {
+              updateTab(side, targetTabId, (prev) => ({
+                ...prev,
+                error: "sftp.error.sessionLost",
+                loading: false,
+              }));
+            } else {
+              handleSessionError(side, new Error("SFTP session lost"));
+            }
             return;
           }
 
@@ -148,50 +273,89 @@ export const useSftpPaneActions = ({
             if (isSessionError(err)) {
               sftpSessionsRef.current.delete(pane.connection.id);
               clearCacheForConnection(pane.connection.id);
-              updateTab(side, activeTabId, (prev) => ({
-                ...prev,
-                connection: null,
-                files: [],
-                loading: false,
-                reconnecting: false,
-                error: "SFTP session expired. Please reconnect.",
-                selectedFiles: new Set(),
-                filter: "",
-              }));
+              if (options?.tabId) {
+                updateTab(side, targetTabId, (prev) => ({
+                  ...prev,
+                  error: "sftp.error.sessionLost",
+                  loading: false,
+                }));
+              } else {
+                handleSessionError(side, err as Error);
+              }
               return;
             }
             throw err as Error;
           }
         }
 
-        if (navSeqRef.current[side] !== requestId) return;
+        if (navSeqRef.current[side] !== requestId) {
+          // Side-level sequence was bumped by another tab's navigation or
+          // a connect/disconnect. Check if THIS tab's request is still current.
+          if (tabNavSeqRef.current.get(targetTabId) !== requestId) {
+            // This tab also has a newer navigation — drop completely.
+            return;
+          }
+          // Side was superseded by another tab, but this tab's request is
+          // still current. The fetched files are valid — fall through to
+          // apply them instead of restoring previousPath.
+        }
 
         dirCacheRef.current.set(cacheKey, {
           files,
           timestamp: Date.now(),
         });
 
-        updateTab(side, activeTabId, (prev) => ({
+        lastConfirmedRef.current.set(targetTabId, {
+          connectionId,
+          path,
+          files,
+          selectedFiles: EMPTY_SET,
+        });
+
+        updateTab(side, targetTabId, (prev) => ({
           ...prev,
           connection: prev.connection
             ? { ...prev.connection, currentPath: path }
             : null,
           files,
           loading: false,
-          selectedFiles: new Set(),
+          selectedFiles: EMPTY_SET,
         }));
+        if (!pane.connection.isLocal) {
+          setSharedRemoteHostCache(getActivePaneCacheKey(side, pane.connection.hostId, pane.connection.id), {
+            path,
+            homeDir: pane.connection.homeDir ?? path,
+            files,
+            filenameEncoding: pane.filenameEncoding,
+          });
+        }
       } catch (err) {
-        if (navSeqRef.current[side] !== requestId) return;
-        updateTab(side, activeTabId, (prev) => ({
-          ...prev,
-          error:
-            err instanceof Error ? err.message : "Failed to list directory",
-          loading: false,
-        }));
+        if (navSeqRef.current[side] !== requestId) {
+          if (tabNavSeqRef.current.get(targetTabId) !== requestId) {
+            return;
+          }
+          // Side superseded by another tab, but this tab's request is
+          // current — fall through to show the error on this tab.
+        }
+        updateTab(side, targetTabId, (prev) => {
+          if (prev.connection?.id !== connectionId) {
+            return prev;
+          }
+          return {
+            ...prev,
+            connection: { ...prev.connection, currentPath: previousPath },
+            files: previousFiles,
+            selectedFiles: previousSelection,
+            error:
+              err instanceof Error ? err.message : "Failed to list directory",
+            loading: false,
+          };
+        });
       }
     },
     [
       getActivePane,
+      getActivePaneCacheKey,
       updateTab,
       leftTabsRef,
       rightTabsRef,
@@ -203,16 +367,43 @@ export const useSftpPaneActions = ({
       listRemoteFiles,
       sftpSessionsRef,
       clearCacheForConnection,
+      handleSessionError,
       isSessionError,
     ],
   );
 
   const refresh = useCallback(
-    async (side: "left" | "right") => {
-      const pane = getActivePane(side);
+    async (side: "left" | "right", options?: { tabId?: string }) => {
+      const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
+      const pane = options?.tabId
+        ? sideTabs.tabs.find((t) => t.id === options.tabId) ?? null
+        : getActivePane(side);
       if (pane?.connection) {
-        await navigateTo(side, pane.connection.currentPath, { force: true });
+        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
+        // the active tab). Just leave the error state for the user to see
+        // when they switch back to that tab.
+        if (options?.tabId) return;
         const lastHost = lastConnectedHostRef.current[side];
         if (lastHost && !reconnectingRef.current[side]) {
           reconnectingRef.current[side] = true;
@@ -229,7 +420,7 @@ export const useSftpPaneActions = ({
         }
       }
     },
-    [getActivePane, navigateTo, updateActiveTab, lastConnectedHostRef, reconnectingRef],
+    [getActivePane, leftTabsRef, rightTabsRef, navigateTo, updateActiveTab, lastConnectedHostRef, reconnectingRef, sftpSessionsRef],
   );
 
   const navigateUp = useCallback(
@@ -250,42 +441,24 @@ export const useSftpPaneActions = ({
 
   const openEntry = useCallback(
     async (side: "left" | "right", entry: SftpFileEntry) => {
-      console.log("[SFTP openEntry] called", { side, entryName: entry.name, entryType: entry.type });
-
       const pane = getActivePane(side);
-      console.log("[SFTP openEntry] getActivePane result", {
-        paneId: pane?.id,
-        hasConnection: !!pane?.connection,
-        currentPath: pane?.connection?.currentPath,
-      });
 
       if (!pane?.connection) {
-        console.log("[SFTP openEntry] No pane or connection, returning early");
         return;
       }
 
       if (entry.name === "..") {
         const currentPath = pane.connection.currentPath;
         const isAtRoot = currentPath === "/" || isWindowsRoot(currentPath);
-        console.log("[SFTP openEntry] Navigating up from '..'", {
-          currentPath,
-          isAtRoot,
-          isWindowsRoot: isWindowsRoot(currentPath),
-        });
-
         if (!isAtRoot) {
           const parentPath = getParentPath(currentPath);
-          console.log("[SFTP openEntry] Calculated parent path", { currentPath, parentPath });
           await navigateTo(side, parentPath);
-        } else {
-          console.log("[SFTP openEntry] Already at root, not navigating");
         }
         return;
       }
 
       if (isNavigableDirectory(entry)) {
         const newPath = joinPath(pane.connection.currentPath, entry.name);
-        console.log("[SFTP openEntry] Navigating into directory", { currentPath: pane.connection.currentPath, entryName: entry.name, newPath });
         await navigateTo(side, newPath);
       }
     },
@@ -294,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)) {
@@ -304,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 !== "..") {
@@ -318,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(
@@ -352,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) {
@@ -370,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);
@@ -382,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) {
@@ -414,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);
@@ -426,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);
@@ -571,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",
@@ -615,10 +951,14 @@ export const useSftpPaneActions = ({
     setFilter,
     getFilteredFiles,
     createDirectory,
+    createDirectoryAtPath,
     createFile,
+    createFileAtPath,
     deleteFiles,
     deleteFilesAtPath,
     renameFile,
+    renameFileAtPath,
+    moveEntriesToPath,
     changePermissions,
   };
 };

application/state/sftp/useSftpTabsState.ts

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useRef, useState } from "react";
 import { createEmptyPane, EMPTY_LEFT_PANE_ID, EMPTY_RIGHT_PANE_ID, SftpPane, SftpSideTabs } from "./types";
 import { logger } from "../../../lib/logger";
 
-export interface SftpTabsState {
+interface SftpTabsState {
   leftTabs: SftpSideTabs;
   rightTabs: SftpSideTabs;
   leftTabsRef: React.MutableRefObject<SftpSideTabs>;
@@ -14,6 +14,8 @@ export 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;
   selectTab: (side: "left" | "right", tabId: string) => void;
@@ -33,7 +35,13 @@ export interface SftpTabsState {
   getActiveTabId: (side: "left" | "right") => string | null;
 }
 
-export const useSftpTabsState = (): SftpTabsState => {
+const EMPTY_SELECTION = new Set<string>();
+
+export const useSftpTabsState = ({
+  defaultShowHiddenFiles = false,
+}: {
+  defaultShowHiddenFiles?: boolean;
+} = {}): SftpTabsState => {
   const [leftTabs, setLeftTabs] = useState<SftpSideTabs>({
     tabs: [],
     activeTabId: null,
@@ -45,8 +53,10 @@ export const useSftpTabsState = (): SftpTabsState => {
 
   const leftTabsRef = useRef(leftTabs);
   const rightTabsRef = useRef(rightTabs);
+  const defaultShowHiddenFilesRef = useRef(defaultShowHiddenFiles);
   leftTabsRef.current = leftTabs;
   rightTabsRef.current = rightTabs;
+  defaultShowHiddenFilesRef.current = defaultShowHiddenFiles;
 
   const getActivePane = useCallback((side: "left" | "right"): SftpPane | null => {
     const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
@@ -58,14 +68,14 @@ export const useSftpTabsState = (): SftpTabsState => {
     const pane = leftTabs.activeTabId
       ? leftTabs.tabs.find((t) => t.id === leftTabs.activeTabId)
       : null;
-    return pane || createEmptyPane(EMPTY_LEFT_PANE_ID);
+    return pane || createEmptyPane(EMPTY_LEFT_PANE_ID, defaultShowHiddenFilesRef.current);
   }, [leftTabs]);
 
   const rightPane = useMemo(() => {
     const pane = rightTabs.activeTabId
       ? rightTabs.tabs.find((t) => t.id === rightTabs.activeTabId)
       : null;
-    return pane || createEmptyPane(EMPTY_RIGHT_PANE_ID);
+    return pane || createEmptyPane(EMPTY_RIGHT_PANE_ID, defaultShowHiddenFilesRef.current);
   }, [rightTabs]);
 
   const updateTab = useCallback(
@@ -88,9 +98,49 @@ export const useSftpTabsState = (): SftpTabsState => {
     [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) => {
+        if (prev.showHiddenFiles === showHiddenFiles) {
+          return prev;
+        }
+        return {
+          ...prev,
+          showHiddenFiles,
+        };
+      });
+    },
+    [updateTab],
+  );
+
   const addTab = useCallback(
     (side: "left" | "right") => {
-      const newPane = createEmptyPane();
+      const newPane = createEmptyPane(undefined, defaultShowHiddenFilesRef.current);
       const setTabs = side === "left" ? setLeftTabs : setRightTabs;
       setTabs((prev) => ({
         tabs: [...prev.tabs, newPane],
@@ -236,6 +286,8 @@ export const useSftpTabsState = (): SftpTabsState => {
     getActivePane,
     updateTab,
     updateActiveTab,
+    clearSelectionsExcept,
+    setTabShowHiddenFiles,
     addTab,
     closeTab,
     selectTab,

application/state/sftp/utils.ts

@@ -48,39 +48,31 @@ 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 => {
-  console.log("[SFTP getParentPath] input", { path, isWindows: isWindowsPath(path) });
-
   if (isWindowsPath(path)) {
     const normalized = normalizeWindowsRoot(path).replace(/[\\]+$/, "");
     const drive = normalized.slice(0, 2);
     if (/^[A-Za-z]:$/.test(normalized) || /^[A-Za-z]:\\$/.test(normalized)) {
-      console.log("[SFTP getParentPath] Windows root, returning", { result: `${drive}\\` });
       return `${drive}\\`;
     }
     const rest = normalized.slice(2).replace(/^[\\]+/, "");
     const parts = rest ? rest.split(/[\\]+/).filter(Boolean) : [];
     if (parts.length <= 1) {
-      console.log("[SFTP getParentPath] Windows near root, returning", { result: `${drive}\\` });
       return `${drive}\\`;
     }
     parts.pop();
     const result = `${drive}\\${parts.join("\\")}`;
-    console.log("[SFTP getParentPath] Windows result", { result });
     return result;
   }
   if (path === "/") {
-    console.log("[SFTP getParentPath] Unix root, returning /");
     return "/";
   }
   const parts = path.split("/").filter(Boolean);
-  console.log("[SFTP getParentPath] Unix parts before pop", { parts: [...parts] });
   parts.pop();
   const result = parts.length ? `/${parts.join("/")}` : "/";
-  console.log("[SFTP getParentPath] Unix result", { result, partsAfterPop: parts });
   return result;
 };
 

application/state/useAIState.ts

@@ -0,0 +1,863 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
+import {
+  STORAGE_KEY_AI_PROVIDERS,
+  STORAGE_KEY_AI_ACTIVE_PROVIDER,
+  STORAGE_KEY_AI_ACTIVE_MODEL,
+  STORAGE_KEY_AI_PERMISSION_MODE,
+  STORAGE_KEY_AI_HOST_PERMISSIONS,
+  STORAGE_KEY_AI_EXTERNAL_AGENTS,
+  STORAGE_KEY_AI_DEFAULT_AGENT,
+  STORAGE_KEY_AI_COMMAND_BLOCKLIST,
+  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 {
+  AISession,
+  AIPermissionMode,
+  ProviderConfig,
+  HostAIPermission,
+  ExternalAgentConfig,
+  ChatMessage,
+  AISessionScope,
+  WebSearchConfig,
+} from '../../infrastructure/ai/types';
+import { DEFAULT_COMMAND_BLOCKLIST } from '../../infrastructure/ai/types';
+
+/** Typed accessor for the Electron IPC bridge exposed on `window.netcatty`. */
+function getAIBridge() {
+  return (window as unknown as { netcatty?: Record<string, (...args: unknown[]) => unknown> }).netcatty;
+}
+
+const AI_STATE_CHANGED_EVENT = 'netcatty:ai-state-changed';
+
+function emitAIStateChanged(key: string) {
+  window.dispatchEvent(new CustomEvent<{ key: string }>(AI_STATE_CHANGED_EVENT, { detail: { key } }));
+}
+
+function cleanupAcpSessions(sessionIds: string[]) {
+  const bridge = getAIBridge();
+  if (!bridge?.aiAcpCleanup || sessionIds.length === 0) return;
+  for (const sessionId of sessionIds) {
+    void bridge.aiAcpCleanup(sessionId).catch(() => {});
+  }
+}
+
+function isScopeKeyActive(scopeKey: string, activeTargetIds: Set<string>) {
+  const separatorIndex = scopeKey.indexOf(':');
+  if (separatorIndex === -1) return true;
+
+  const targetId = scopeKey.slice(separatorIndex + 1);
+  if (!targetId) return true;
+
+  return activeTargetIds.has(targetId);
+}
+
+export function cleanupOrphanedAISessions(activeTargetIds: Set<string>) {
+  const currentSessions = latestAISessionsSnapshot
+    ?? localStorageAdapter.read<AISession[]>(STORAGE_KEY_AI_SESSIONS)
+    ?? [];
+  const orphanedSessionIds = currentSessions
+    .filter((session) => session.scope.targetId && !activeTargetIds.has(session.scope.targetId))
+    .map((session) => session.id);
+
+  if (orphanedSessionIds.length > 0) {
+    const orphanedSessionIdSet = new Set(orphanedSessionIds);
+
+    // Determine which sessions can be restored via host-based matching
+    const preservedIds = new Set<string>();
+    for (const session of currentSessions) {
+      if (!orphanedSessionIdSet.has(session.id)) continue;
+      // Only preserve remote terminal sessions with real hostIds
+      const isRestorable = session.scope.type === 'terminal'
+        && session.scope.hostIds?.length
+        && session.scope.hostIds.some((id) => !id.startsWith('local-') && !id.startsWith('serial-'));
+      if (isRestorable) {
+        preservedIds.add(session.id);
+      }
+    }
+
+    // Cleanup ACP sessions for all orphans (both deleted and preserved).
+    // Preserved sessions will get a new externalSessionId on next use,
+    // so cleaning the old one is safe and prevents subprocess leaks.
+    cleanupAcpSessions(orphanedSessionIds);
+
+    const nextSessions = currentSessions
+      .filter((session) => !orphanedSessionIdSet.has(session.id) || preservedIds.has(session.id))
+      .map((session) => {
+        if (!preservedIds.has(session.id) || !session.externalSessionId) {
+          return session;
+        }
+        // Drop transient ACP session handles so the next turn starts cleanly.
+        return { ...session, externalSessionId: undefined };
+      });
+
+    const sessionsChanged = nextSessions.length !== currentSessions.length
+      || nextSessions.some((session, index) => session !== currentSessions[index]);
+    if (sessionsChanged) {
+      setLatestAISessionsSnapshot(nextSessions);
+      localStorageAdapter.write(STORAGE_KEY_AI_SESSIONS, pruneSessionsForStorage(nextSessions));
+      emitAIStateChanged(STORAGE_KEY_AI_SESSIONS);
+    }
+  }
+
+  const activeSessionIdMap = latestAIActiveSessionMapSnapshot
+    ?? localStorageAdapter.read<Record<string, string | null>>(STORAGE_KEY_AI_ACTIVE_SESSION_MAP)
+    ?? {};
+  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);
+  }
+}
+
+
+/** Maximum number of sessions to keep in localStorage. */
+const MAX_STORED_SESSIONS = 50;
+/** Maximum number of messages per session when persisting to localStorage. */
+const MAX_SESSION_MESSAGES = 200;
+
+/**
+ * Prune sessions before writing to localStorage to prevent hitting the
+ * ~5-10 MB storage quota. Only affects what is persisted — the in-memory
+ * state retains all messages until the session is reloaded.
+ *
+ * - Keeps only the MAX_STORED_SESSIONS most-recently-updated sessions.
+ * - Trims each session's messages to the last MAX_SESSION_MESSAGES.
+ */
+function pruneSessionsForStorage(sessions: AISession[]): AISession[] {
+  // Sort by updatedAt descending so we keep the newest
+  const sorted = [...sessions].sort((a, b) => b.updatedAt - a.updatedAt);
+  const limited = sorted.slice(0, MAX_STORED_SESSIONS);
+  return limited.map(s => {
+    if (s.messages.length > MAX_SESSION_MESSAGES) {
+      return { ...s, messages: s.messages.slice(-MAX_SESSION_MESSAGES) };
+    }
+    return s;
+  });
+}
+
+let latestAISessionsSnapshot: AISession[] | null = null;
+let latestAIActiveSessionMapSnapshot: Record<string, string | null> | null = null;
+
+function setLatestAISessionsSnapshot(sessions: AISession[]) {
+  latestAISessionsSnapshot = sessions;
+}
+
+function setLatestAIActiveSessionMapSnapshot(activeSessionIdMap: Record<string, string | null>) {
+  latestAIActiveSessionMapSnapshot = activeSessionIdMap;
+}
+
+function buildScopeKey(scope: AISessionScope) {
+  return `${scope.type}:${scope.targetId ?? ''}`;
+}
+
+function areHostIdsEqual(left?: string[], right?: string[]) {
+  const leftIds = left ?? [];
+  const rightIds = right ?? [];
+  if (leftIds.length !== rightIds.length) return false;
+
+  const rightSet = new Set(rightIds);
+  return leftIds.every((hostId) => rightSet.has(hostId));
+}
+
+export function useAIState() {
+  // ── Provider Config ──
+  const [providers, setProvidersRaw] = useState<ProviderConfig[]>(() =>
+    localStorageAdapter.read<ProviderConfig[]>(STORAGE_KEY_AI_PROVIDERS) ?? []
+  );
+  const [activeProviderId, setActiveProviderIdRaw] = useState<string>(() =>
+    localStorageAdapter.readString(STORAGE_KEY_AI_ACTIVE_PROVIDER) ?? ''
+  );
+  const [activeModelId, setActiveModelIdRaw] = useState<string>(() =>
+    localStorageAdapter.readString(STORAGE_KEY_AI_ACTIVE_MODEL) ?? ''
+  );
+
+  // ── Permission Model ──
+  const [globalPermissionMode, setGlobalPermissionModeRaw] = useState<AIPermissionMode>(() => {
+    const stored = localStorageAdapter.readString(STORAGE_KEY_AI_PERMISSION_MODE);
+    if (stored === 'observer' || stored === 'confirm' || stored === 'autonomous') return stored;
+    return 'confirm';
+  });
+  const [hostPermissions, setHostPermissionsRaw] = useState<HostAIPermission[]>(() =>
+    localStorageAdapter.read<HostAIPermission[]>(STORAGE_KEY_AI_HOST_PERMISSIONS) ?? []
+  );
+
+  // ── External Agents ──
+  const [externalAgents, setExternalAgentsRaw] = useState<ExternalAgentConfig[]>(() =>
+    localStorageAdapter.read<ExternalAgentConfig[]>(STORAGE_KEY_AI_EXTERNAL_AGENTS) ?? []
+  );
+  const [defaultAgentId, setDefaultAgentIdRaw] = useState<string>(() =>
+    localStorageAdapter.readString(STORAGE_KEY_AI_DEFAULT_AGENT) ?? 'catty'
+  );
+
+  // ── Safety Settings ──
+  const [commandBlocklist, setCommandBlocklistRaw] = useState<string[]>(() =>
+    localStorageAdapter.read<string[]>(STORAGE_KEY_AI_COMMAND_BLOCKLIST) ?? [...DEFAULT_COMMAND_BLOCKLIST]
+  );
+  const [commandTimeout, setCommandTimeoutRaw] = useState<number>(() =>
+    localStorageAdapter.readNumber(STORAGE_KEY_AI_COMMAND_TIMEOUT) ?? 60
+  );
+  const [maxIterations, setMaxIterationsRaw] = useState<number>(() =>
+    localStorageAdapter.readNumber(STORAGE_KEY_AI_MAX_ITERATIONS) ?? 20
+  );
+
+  // ── Sessions ──
+  const [sessions, setSessionsRaw] = useState<AISession[]>(() =>
+    localStorageAdapter.read<AISession[]>(STORAGE_KEY_AI_SESSIONS) ?? []
+  );
+  // Ref that always holds the latest sessions for use inside debounced callbacks
+  const sessionsRef = useRef(sessions);
+  useEffect(() => {
+    sessionsRef.current = sessions;
+  }, [sessions]);
+  // Per-scope active session: keyed by `${scopeType}:${scopeTargetId}`
+  const [activeSessionIdMap, setActiveSessionIdMapRaw] = useState<Record<string, string | null>>(() =>
+    localStorageAdapter.read<Record<string, string | null>>(STORAGE_KEY_AI_ACTIVE_SESSION_MAP) ?? {}
+  );
+
+  // Per-agent model selection: remembers last selected model per agent
+  const [agentModelMap, setAgentModelMapRaw] = useState<Record<string, string>>(() =>
+    localStorageAdapter.read<Record<string, string>>(STORAGE_KEY_AI_AGENT_MODEL_MAP) ?? {}
+  );
+
+  // ── Web Search Config ──
+  const [webSearchConfig, setWebSearchConfigRaw] = useState<WebSearchConfig | null>(() =>
+    localStorageAdapter.read<WebSearchConfig>(STORAGE_KEY_AI_WEB_SEARCH) ?? null
+  );
+
+  useEffect(() => {
+    setLatestAISessionsSnapshot(sessions);
+  }, [sessions]);
+
+  useEffect(() => {
+    setLatestAIActiveSessionMapSnapshot(activeSessionIdMap);
+  }, [activeSessionIdMap]);
+
+  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)) {
+      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 => {
+      const next = { ...prev, [scopeKey]: id };
+      setLatestAIActiveSessionMapSnapshot(next);
+      localStorageAdapter.write(STORAGE_KEY_AI_ACTIVE_SESSION_MAP, next);
+      emitAIStateChanged(STORAGE_KEY_AI_ACTIVE_SESSION_MAP);
+      return next;
+    });
+  }, []);
+
+  const setAgentModel = useCallback((agentId: string, modelId: string) => {
+    setAgentModelMapRaw(prev => {
+      const next = { ...prev, [agentId]: modelId };
+      localStorageAdapter.write(STORAGE_KEY_AI_AGENT_MODEL_MAP, next);
+      return next;
+    });
+  }, []);
+
+  const setWebSearchConfig = useCallback((config: WebSearchConfig | null) => {
+    setWebSearchConfigRaw(config);
+    if (config) {
+      localStorageAdapter.write(STORAGE_KEY_AI_WEB_SEARCH, config);
+    } else {
+      localStorageAdapter.remove(STORAGE_KEY_AI_WEB_SEARCH);
+    }
+  }, []);
+
+  // ── Persist helpers ──
+  const setProviders = useCallback((value: ProviderConfig[] | ((prev: ProviderConfig[]) => ProviderConfig[])) => {
+    setProvidersRaw(prev => {
+      const next = typeof value === 'function' ? value(prev) : value;
+      localStorageAdapter.write(STORAGE_KEY_AI_PROVIDERS, next);
+      return next;
+    });
+  }, []);
+
+  const setActiveProviderId = useCallback((id: string) => {
+    setActiveProviderIdRaw(id);
+    localStorageAdapter.writeString(STORAGE_KEY_AI_ACTIVE_PROVIDER, id);
+  }, []);
+
+  const setActiveModelId = useCallback((id: string) => {
+    setActiveModelIdRaw(id);
+    localStorageAdapter.writeString(STORAGE_KEY_AI_ACTIVE_MODEL, id);
+  }, []);
+
+  const setGlobalPermissionMode = useCallback((mode: AIPermissionMode) => {
+    setGlobalPermissionModeRaw(mode);
+    localStorageAdapter.writeString(STORAGE_KEY_AI_PERMISSION_MODE, mode);
+    // Sync to MCP Server bridge (observer mode blocks write operations)
+    const bridge = getAIBridge();
+    bridge?.aiMcpSetPermissionMode?.(mode);
+  }, []);
+
+  const setHostPermissions = useCallback((value: HostAIPermission[] | ((prev: HostAIPermission[]) => HostAIPermission[])) => {
+    setHostPermissionsRaw(prev => {
+      const next = typeof value === 'function' ? value(prev) : value;
+      localStorageAdapter.write(STORAGE_KEY_AI_HOST_PERMISSIONS, next);
+      return next;
+    });
+  }, []);
+
+  const setExternalAgents = useCallback((value: ExternalAgentConfig[] | ((prev: ExternalAgentConfig[]) => ExternalAgentConfig[])) => {
+    setExternalAgentsRaw(prev => {
+      const next = typeof value === 'function' ? value(prev) : value;
+      localStorageAdapter.write(STORAGE_KEY_AI_EXTERNAL_AGENTS, next);
+      return next;
+    });
+  }, []);
+
+  const setDefaultAgentId = useCallback((id: string) => {
+    setDefaultAgentIdRaw(id);
+    localStorageAdapter.writeString(STORAGE_KEY_AI_DEFAULT_AGENT, id);
+  }, []);
+
+  const setCommandBlocklist = useCallback((value: string[]) => {
+    setCommandBlocklistRaw(value);
+    localStorageAdapter.write(STORAGE_KEY_AI_COMMAND_BLOCKLIST, value);
+    // Sync to MCP Server bridge so ACP agents also respect the blocklist
+    const bridge = getAIBridge();
+    bridge?.aiMcpSetCommandBlocklist?.(value);
+  }, []);
+
+  const setCommandTimeout = useCallback((value: number) => {
+    setCommandTimeoutRaw(value);
+    localStorageAdapter.writeNumber(STORAGE_KEY_AI_COMMAND_TIMEOUT, value);
+    // Sync to MCP Server bridge
+    const bridge = getAIBridge();
+    bridge?.aiMcpSetCommandTimeout?.(value);
+  }, []);
+
+  const setMaxIterations = useCallback((value: number) => {
+    setMaxIterationsRaw(value);
+    localStorageAdapter.writeNumber(STORAGE_KEY_AI_MAX_ITERATIONS, value);
+    // Sync to MCP Server bridge (used by ACP agent path)
+    const bridge = getAIBridge();
+    bridge?.aiMcpSetMaxIterations?.(value);
+  }, []);
+
+  // ── Cross-window sync via storage events ──
+  // When the settings window updates localStorage, the main window picks up changes.
+  useEffect(() => {
+    const handleStorage = (e: StorageEvent) => {
+      try {
+        switch (e.key) {
+          case STORAGE_KEY_AI_PROVIDERS: {
+            const parsed = localStorageAdapter.read<ProviderConfig[]>(STORAGE_KEY_AI_PROVIDERS);
+            if (parsed != null && !Array.isArray(parsed)) {
+              console.warn('[useAIState] Cross-window sync: AI_PROVIDERS is not an array, skipping');
+              break;
+            }
+            setProvidersRaw(parsed ?? []);
+            break;
+          }
+          case STORAGE_KEY_AI_ACTIVE_PROVIDER:
+            setActiveProviderIdRaw(localStorageAdapter.readString(STORAGE_KEY_AI_ACTIVE_PROVIDER) ?? '');
+            break;
+          case STORAGE_KEY_AI_ACTIVE_MODEL:
+            setActiveModelIdRaw(localStorageAdapter.readString(STORAGE_KEY_AI_ACTIVE_MODEL) ?? '');
+            break;
+          case STORAGE_KEY_AI_PERMISSION_MODE: {
+            const mode = localStorageAdapter.readString(STORAGE_KEY_AI_PERMISSION_MODE);
+            if (mode === 'observer' || mode === 'confirm' || mode === 'autonomous') {
+              setGlobalPermissionModeRaw(mode);
+              getAIBridge()?.aiMcpSetPermissionMode?.(mode);
+            }
+            break;
+          }
+          case STORAGE_KEY_AI_EXTERNAL_AGENTS: {
+            const agents = localStorageAdapter.read<ExternalAgentConfig[]>(STORAGE_KEY_AI_EXTERNAL_AGENTS);
+            if (agents != null && !Array.isArray(agents)) {
+              console.warn('[useAIState] Cross-window sync: AI_EXTERNAL_AGENTS is not an array, skipping');
+              break;
+            }
+            setExternalAgentsRaw(agents ?? []);
+            break;
+          }
+          case STORAGE_KEY_AI_DEFAULT_AGENT:
+            setDefaultAgentIdRaw(localStorageAdapter.readString(STORAGE_KEY_AI_DEFAULT_AGENT) ?? 'catty');
+            break;
+          case STORAGE_KEY_AI_COMMAND_BLOCKLIST: {
+            const list = localStorageAdapter.read<string[]>(STORAGE_KEY_AI_COMMAND_BLOCKLIST);
+            if (list != null && !Array.isArray(list)) {
+              console.warn('[useAIState] Cross-window sync: AI_COMMAND_BLOCKLIST is not an array, skipping');
+              break;
+            }
+            const blocklist = list ?? [...DEFAULT_COMMAND_BLOCKLIST];
+            setCommandBlocklistRaw(blocklist);
+            getAIBridge()?.aiMcpSetCommandBlocklist?.(blocklist);
+            break;
+          }
+          case STORAGE_KEY_AI_COMMAND_TIMEOUT: {
+            const timeout = localStorageAdapter.readNumber(STORAGE_KEY_AI_COMMAND_TIMEOUT) ?? 60;
+            if (!Number.isFinite(timeout)) {
+              console.warn('[useAIState] Cross-window sync: AI_COMMAND_TIMEOUT is not a finite number, skipping');
+              break;
+            }
+            setCommandTimeoutRaw(timeout);
+            getAIBridge()?.aiMcpSetCommandTimeout?.(timeout);
+            break;
+          }
+          case STORAGE_KEY_AI_MAX_ITERATIONS: {
+            const iters = localStorageAdapter.readNumber(STORAGE_KEY_AI_MAX_ITERATIONS) ?? 20;
+            if (!Number.isFinite(iters)) {
+              console.warn('[useAIState] Cross-window sync: AI_MAX_ITERATIONS is not a finite number, skipping');
+              break;
+            }
+            setMaxIterationsRaw(iters);
+            getAIBridge()?.aiMcpSetMaxIterations?.(iters);
+            break;
+          }
+          case STORAGE_KEY_AI_HOST_PERMISSIONS: {
+            const perms = localStorageAdapter.read<HostAIPermission[]>(STORAGE_KEY_AI_HOST_PERMISSIONS);
+            if (perms != null && !Array.isArray(perms)) {
+              console.warn('[useAIState] Cross-window sync: AI_HOST_PERMISSIONS is not an array, skipping');
+              break;
+            }
+            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;
+        }
+      } catch (err) {
+        console.warn('[useAIState] Cross-window sync: failed to process storage event for key', e.key, err);
+      }
+    };
+    window.addEventListener('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;
+        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 ──
+  useEffect(() => {
+    const bridge = getAIBridge();
+    const initialBlocklist = localStorageAdapter.read<string[]>(STORAGE_KEY_AI_COMMAND_BLOCKLIST) ?? [...DEFAULT_COMMAND_BLOCKLIST];
+    bridge?.aiMcpSetCommandBlocklist?.(initialBlocklist);
+    const initialTimeout = localStorageAdapter.readNumber(STORAGE_KEY_AI_COMMAND_TIMEOUT) ?? 60;
+    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';
+    bridge?.aiMcpSetPermissionMode?.(initialPermMode);
+  }, []);
+
+  // ── Session CRUD ──
+  const persistSessions = useCallback((next: AISession[]) => {
+    localStorageAdapter.write(STORAGE_KEY_AI_SESSIONS, pruneSessionsForStorage(next));
+  }, []);
+
+  // Debounced version of persistSessions for high-frequency updates (e.g. streaming)
+  const persistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const mountedRef = useRef(true);
+
+  const debouncedPersistSessions = useCallback(() => {
+    if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
+    persistTimerRef.current = setTimeout(() => {
+      if (!mountedRef.current) return; // Skip writes after unmount
+      localStorageAdapter.write(STORAGE_KEY_AI_SESSIONS, pruneSessionsForStorage(sessionsRef.current));
+      persistTimerRef.current = null;
+    }, 500);
+  }, []);
+
+  // Flush pending debounced writes on unmount
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      if (persistTimerRef.current) {
+        clearTimeout(persistTimerRef.current);
+        persistTimerRef.current = null;
+        persistSessions(sessionsRef.current);
+      }
+    };
+  }, [persistSessions]);
+
+  const createSession = useCallback((scope: AISessionScope, agentId?: string): AISession => {
+    const now = Date.now();
+    const session: AISession = {
+      id: `ai_${now}_${Math.random().toString(36).slice(2, 8)}`,
+      title: 'New Chat',
+      agentId: agentId || defaultAgentId,
+      scope,
+      messages: [],
+      createdAt: now,
+      updatedAt: now,
+    };
+    setSessionsRaw(prev => {
+      const next = [session, ...prev];
+      setLatestAISessionsSnapshot(next);
+      persistSessions(next);
+      return next;
+    });
+    const scopeKey = `${scope.type}:${scope.targetId ?? ''}`;
+    setActiveSessionId(scopeKey, session.id);
+    return session;
+  }, [defaultAgentId, persistSessions, setActiveSessionId]);
+
+  const deleteSession = useCallback((sessionId: string, scopeKey?: string) => {
+    cleanupAcpSessions([sessionId]);
+    if (persistTimerRef.current) {
+      clearTimeout(persistTimerRef.current);
+      persistTimerRef.current = null;
+    }
+    setSessionsRaw(prev => {
+      const next = prev.filter(s => s.id !== sessionId);
+      setLatestAISessionsSnapshot(next);
+      persistSessions(next);
+      return next;
+    });
+    if (scopeKey) {
+      setActiveSessionIdMapRaw(prev => {
+        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;
+      });
+    }
+  }, [persistSessions]);
+
+  const deleteSessionsByTarget = useCallback((scopeType: 'terminal' | 'workspace', targetId: string) => {
+    const removedSessionIds = sessionsRef.current
+      .filter(s => s.scope.type === scopeType && s.scope.targetId === targetId)
+      .map(s => s.id);
+    cleanupAcpSessions(removedSessionIds);
+    if (persistTimerRef.current) {
+      clearTimeout(persistTimerRef.current);
+      persistTimerRef.current = null;
+    }
+    setSessionsRaw(prev => {
+      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) {
+        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]);
+
+  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;
+    });
+  }, [persistSessions]);
+
+  const updateSessionExternalSessionId = useCallback((sessionId: string, externalSessionId: string | undefined) => {
+    setSessionsRaw(prev => {
+      const next = prev.map(s => (
+        s.id === sessionId
+          ? { ...s, externalSessionId, updatedAt: Date.now() }
+          : s
+      ));
+      setLatestAISessionsSnapshot(next);
+      debouncedPersistSessions();
+      return next;
+    });
+  }, [debouncedPersistSessions]);
+
+  const retargetSessionScope = useCallback((sessionId: string, scope: AISessionScope) => {
+    const currentSession = sessionsRef.current.find((session) => session.id === sessionId);
+    if (!currentSession) return;
+
+    const currentScope = currentSession.scope;
+    const scopeChanged =
+      currentScope.type !== scope.type
+      || currentScope.targetId !== scope.targetId
+      || !areHostIdsEqual(currentScope.hostIds, scope.hostIds);
+
+    const nextScopeKey = buildScopeKey(scope);
+    const currentScopeKey = buildScopeKey(currentScope);
+
+    if (scopeChanged) {
+      setSessionsRaw((prev) => {
+        let changed = false;
+        const next = prev.map((session) => {
+          if (session.id !== sessionId) return session;
+          changed = true;
+          // Clear stale ACP handle — retarget may run before orphan cleanup
+          return { ...session, scope, externalSessionId: undefined };
+        });
+
+        if (!changed) return prev;
+
+        sessionsRef.current = next;
+        setLatestAISessionsSnapshot(next);
+        persistSessions(next);
+        return next;
+      });
+    }
+
+    setActiveSessionIdMapRaw((prev) => {
+      let changed = false;
+      const next = { ...prev };
+
+      if (currentScopeKey !== nextScopeKey && next[currentScopeKey] === sessionId) {
+        delete next[currentScopeKey];
+        changed = true;
+      }
+
+      if (next[nextScopeKey] !== sessionId) {
+        next[nextScopeKey] = sessionId;
+        changed = true;
+      }
+
+      if (!changed) return prev;
+
+      setLatestAIActiveSessionMapSnapshot(next);
+      localStorageAdapter.write(STORAGE_KEY_AI_ACTIVE_SESSION_MAP, next);
+      emitAIStateChanged(STORAGE_KEY_AI_ACTIVE_SESSION_MAP);
+      return next;
+    });
+  }, [persistSessions]);
+
+  // Maximum messages per session to prevent unbounded memory growth
+  const MAX_MESSAGES_PER_SESSION = 500;
+
+  const addMessageToSession = useCallback((sessionId: string, message: ChatMessage) => {
+    setSessionsRaw(prev => {
+      const next = prev.map(s => {
+        if (s.id !== sessionId) return s;
+        let msgs = [...s.messages, message];
+        // Trim oldest messages if exceeding limit (keep system messages)
+        if (msgs.length > MAX_MESSAGES_PER_SESSION) {
+          const systemMsgs = msgs.filter(m => m.role === 'system');
+          const nonSystemMsgs = msgs.filter(m => m.role !== 'system');
+          const dropped = nonSystemMsgs.length - (MAX_MESSAGES_PER_SESSION - systemMsgs.length);
+          console.warn(`[useAIState] Session ${sessionId}: trimmed ${dropped} oldest non-system message(s) to stay within ${MAX_MESSAGES_PER_SESSION} limit`);
+          msgs = [...systemMsgs, ...nonSystemMsgs.slice(-MAX_MESSAGES_PER_SESSION + systemMsgs.length)];
+        }
+        return { ...s, messages: msgs, updatedAt: Date.now() };
+      });
+      setLatestAISessionsSnapshot(next);
+      debouncedPersistSessions();
+      return next;
+    });
+  }, [debouncedPersistSessions]);
+
+  const updateLastMessage = useCallback((sessionId: string, updater: (msg: ChatMessage) => ChatMessage) => {
+    setSessionsRaw(prev => {
+      const next = prev.map(s => {
+        if (s.id !== sessionId || s.messages.length === 0) return s;
+        const msgs = [...s.messages];
+        msgs[msgs.length - 1] = updater(msgs[msgs.length - 1]);
+        return { ...s, messages: msgs, updatedAt: Date.now() };
+      });
+      setLatestAISessionsSnapshot(next);
+      debouncedPersistSessions();
+      return next;
+    });
+  }, [debouncedPersistSessions]);
+
+  const updateMessageById = useCallback((sessionId: string, messageId: string, updater: (msg: ChatMessage) => ChatMessage) => {
+    setSessionsRaw(prev => {
+      const next = prev.map(s => {
+        if (s.id !== sessionId) return s;
+        const idx = s.messages.findIndex(m => m.id === messageId);
+        if (idx === -1) return s;
+        const msgs = [...s.messages];
+        msgs[idx] = updater(msgs[idx]);
+        return { ...s, messages: msgs, updatedAt: Date.now() };
+      });
+      setLatestAISessionsSnapshot(next);
+      debouncedPersistSessions();
+      return next;
+    });
+  }, [debouncedPersistSessions]);
+
+  const clearSessionMessages = useCallback((sessionId: string) => {
+    if (persistTimerRef.current) {
+      clearTimeout(persistTimerRef.current);
+      persistTimerRef.current = null;
+    }
+    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>) => {
+    cleanupOrphanedAISessions(activeTargetIds);
+    setSessionsRaw(latestAISessionsSnapshot ?? localStorageAdapter.read<AISession[]>(STORAGE_KEY_AI_SESSIONS) ?? []);
+    setActiveSessionIdMapRaw(
+      latestAIActiveSessionMapSnapshot
+        ?? localStorageAdapter.read<Record<string, string | null>>(STORAGE_KEY_AI_ACTIVE_SESSION_MAP)
+        ?? {},
+    );
+  }, []);
+
+  // ── Provider CRUD helpers ──
+  const addProvider = useCallback((provider: ProviderConfig) => {
+    setProviders(prev => [...prev, provider]);
+  }, [setProviders]);
+
+  const updateProvider = useCallback((id: string, updates: Partial<ProviderConfig>) => {
+    setProviders(prev => prev.map(p => p.id === id ? { ...p, ...updates } : p));
+  }, [setProviders]);
+
+  const removeProvider = useCallback((id: string) => {
+    setProviders(prev => prev.filter(p => p.id !== id));
+    // Use the raw setter to avoid stale closure over setActiveProviderId
+    setActiveProviderIdRaw(prevId => {
+      if (prevId === id) {
+        const next = '';
+        localStorageAdapter.writeString(STORAGE_KEY_AI_ACTIVE_PROVIDER, next);
+        return next;
+      }
+      return prevId;
+    });
+  }, [setProviders]);
+
+  // ── Computed ──
+  const activeProvider = providers.find(p => p.id === activeProviderId) ?? null;
+
+  return {
+    // Provider config
+    providers,
+    setProviders,
+    addProvider,
+    updateProvider,
+    removeProvider,
+    activeProviderId,
+    setActiveProviderId,
+    activeModelId,
+    setActiveModelId,
+    activeProvider,
+
+    // Permission model
+    globalPermissionMode,
+    setGlobalPermissionMode,
+    hostPermissions,
+    setHostPermissions,
+
+    // External agents
+    externalAgents,
+    setExternalAgents,
+    defaultAgentId,
+    setDefaultAgentId,
+
+    // Safety
+    commandBlocklist,
+    setCommandBlocklist,
+    commandTimeout,
+    setCommandTimeout,
+    maxIterations,
+    setMaxIterations,
+
+    // Per-agent model memory
+    agentModelMap,
+    setAgentModel,
+
+    // Web search
+    webSearchConfig,
+    setWebSearchConfig,
+
+    // Sessions (per-scope active session)
+    sessions,
+    activeSessionIdMap,
+    setActiveSessionId,
+    createSession,
+    deleteSession,
+    deleteSessionsByTarget,
+    updateSessionTitle,
+    updateSessionExternalSessionId,
+    retargetSessionScope,
+    addMessageToSession,
+    updateLastMessage,
+    updateMessageById,
+    clearSessionMessages,
+    cleanupOrphanedSessions,
+  };
+}

application/state/useAgentDiscovery.ts

@@ -0,0 +1,101 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { DiscoveredAgent, ExternalAgentConfig } from '../../infrastructure/ai/types';
+
+interface NetcattyBridge {
+  aiDiscoverAgents(): Promise<DiscoveredAgent[]>;
+}
+
+function getBridge(): NetcattyBridge | undefined {
+  return (window as unknown as { netcatty?: NetcattyBridge }).netcatty;
+}
+
+export function useAgentDiscovery(
+  externalAgents: ExternalAgentConfig[],
+  setExternalAgents?: (value: ExternalAgentConfig[] | ((prev: ExternalAgentConfig[]) => ExternalAgentConfig[])) => void,
+) {
+  const [discoveredAgents, setDiscoveredAgents] = useState<DiscoveredAgent[]>([]);
+  const [isDiscovering, setIsDiscovering] = useState(false);
+
+  const discover = useCallback(async () => {
+    const bridge = getBridge();
+    if (!bridge) return;
+
+    setIsDiscovering(true);
+    try {
+      const agents = await bridge.aiDiscoverAgents();
+      setDiscoveredAgents(agents);
+    } catch (err) {
+      console.error('Agent discovery failed:', err);
+    } finally {
+      setIsDiscovering(false);
+    }
+  }, []);
+
+  // Discover on mount
+  useEffect(() => {
+    discover();
+  }, [discover]);
+
+  // Auto-update args for already-configured discovered agents when
+  // the canonical args from discovery change (e.g. after an app update).
+  useEffect(() => {
+    if (!setExternalAgents || discoveredAgents.length === 0) return;
+
+    setExternalAgents((prev) => {
+      let changed = false;
+      const next = prev.map((ea) => {
+        // Only update agents that were auto-discovered (id starts with "discovered_")
+        if (!ea.id.startsWith('discovered_')) return ea;
+
+        const match = discoveredAgents.find(
+          (da) => ea.command === da.path || ea.command === da.command,
+        );
+        if (!match) return ea;
+
+        // Check if args or ACP config differ
+        const currentArgs = JSON.stringify(ea.args || []);
+        const newArgs = JSON.stringify(match.args);
+        const acpChanged = ea.acpCommand !== match.acpCommand
+          || JSON.stringify(ea.acpArgs || []) !== JSON.stringify(match.acpArgs || []);
+        if (currentArgs !== newArgs || acpChanged) {
+          changed = true;
+          return { ...ea, args: match.args, acpCommand: match.acpCommand, acpArgs: match.acpArgs };
+        }
+        return ea;
+      });
+      return changed ? next : prev;
+    });
+  }, [discoveredAgents, setExternalAgents]);
+
+  // Filter out agents that are already configured as external agents
+  const unconfiguredAgents = discoveredAgents.filter(
+    (da) => !externalAgents.some(
+      (ea) => ea.command === da.command || ea.command === da.path,
+    ),
+  );
+
+  // Build ExternalAgentConfig from a discovered agent
+  const enableAgent = useCallback(
+    (agent: DiscoveredAgent): ExternalAgentConfig => {
+      return {
+        id: `discovered_${agent.command}`,
+        name: agent.name,
+        command: agent.path || agent.command,
+        args: agent.args,
+        icon: agent.icon,
+        enabled: true,
+        acpCommand: agent.acpCommand,
+        acpArgs: agent.acpArgs,
+      };
+    },
+    [],
+  );
+
+  return {
+    discoveredAgents,
+    unconfiguredAgents,
+    isDiscovering,
+    rediscover: discover,
+    enableAgent,
+  };
+}

application/state/useAutoSync.ts

@@ -7,13 +7,20 @@
  * - 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';
 import { netcattyBridge } from '../../infrastructure/services/netcattyBridge';
-import type { SyncPayload } from '../../domain/sync';
-import { toast } from '../../components/ui/toast';
+import {
+  findSyncPayloadEncryptedCredentialPaths,
+} from '../../domain/credentials';
+import { isProviderReadyForSync, type CloudProvider, type SyncPayload } from '../../domain/sync';
+import { collectSyncableSettings } from '../syncPayload';
+import { STORAGE_KEY_PORT_FORWARDING } from '../../infrastructure/config/storageKeys';
+import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
+import { getEffectiveKnownHosts } from '../../infrastructure/syncHelpers';
+import { notify } from '../notification';
 
 interface AutoSyncConfig {
   // Data to sync
@@ -22,15 +29,19 @@ interface AutoSyncConfig {
   identities?: SyncPayload['identities'];
   snippets: SyncPayload['snippets'];
   customGroups: SyncPayload['customGroups'];
+  snippetPackages?: SyncPayload['snippetPackages'];
   portForwardingRules?: SyncPayload['portForwardingRules'];
   knownHosts?: SyncPayload['knownHosts'];
-  
+  /** Opaque token that changes whenever a synced setting changes. */
+  settingsVersion?: number;
+
   // Callbacks
   onApplyPayload: (payload: SyncPayload) => void;
 }
 
 // Get manager singleton for direct state access
 const manager = getCloudSyncManager();
+const AUTO_SYNC_PROVIDER_ORDER: CloudProvider[] = ['github', 'google', 'onedrive', 'webdav', 's3'];
 
 type SyncTrigger = 'auto' | 'manual';
 
@@ -41,52 +52,95 @@ interface SyncNowOptions {
 export const useAutoSync = (config: AutoSyncConfig) => {
   const { t } = useI18n();
   const sync = useCloudSync();
+  const { onApplyPayload } = config;
   const syncTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const lastSyncedDataRef = useRef<string>('');
   const hasCheckedRemoteRef = useRef(false);
   const isInitializedRef = useRef(false);
-  
-  // Build sync payload
-  const buildPayload = useCallback((): SyncPayload => {
+  const isSyncRunningRef = useRef(false);
+  const skipNextSyncRef = useRef(false);
+
+  // 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) {
+      const stored = localStorageAdapter.read<SyncPayload['portForwardingRules']>(
+        STORAGE_KEY_PORT_FORWARDING,
+      );
+      if (stored && Array.isArray(stored) && stored.length > 0) {
+        effectivePFRules = stored.map((rule) => ({
+          ...rule,
+          status: 'inactive' as const,
+          error: undefined,
+          lastUsedAt: undefined,
+        }));
+      }
+    }
+
+    const effectiveKnownHosts = getEffectiveKnownHosts(config.knownHosts);
+
     return {
       hosts: config.hosts,
       keys: config.keys,
       identities: config.identities,
       snippets: config.snippets,
       customGroups: config.customGroups,
-      portForwardingRules: config.portForwardingRules,
-      knownHosts: config.knownHosts,
+      snippetPackages: config.snippetPackages,
+      portForwardingRules: effectivePFRules,
+      knownHosts: effectiveKnownHosts,
+    };
+  }, [
+    config.hosts,
+    config.keys,
+    config.identities,
+    config.snippets,
+    config.customGroups,
+    config.snippetPackages,
+    config.portForwardingRules,
+    config.knownHosts,
+  ]);
+
+  // Build sync payload
+  const buildPayload = useCallback((): SyncPayload => {
+    return {
+      ...getSyncSnapshot(),
+      settings: collectSyncableSettings(),
       syncedAt: Date.now(),
     };
-  }, [config.hosts, config.keys, config.identities, config.snippets, config.customGroups, config.portForwardingRules, config.knownHosts]);
+  }, [getSyncSnapshot]);
   
-  // Create a hash of current data for comparison
+  // Create a hash of current data for comparison (includes settings)
   const getDataHash = useCallback(() => {
-    const data = {
-      hosts: config.hosts,
-      keys: config.keys,
-      identities: config.identities,
-      snippets: config.snippets,
-      portForwardingRules: config.portForwardingRules,
-    };
-    return JSON.stringify(data);
-  }, [config.hosts, config.keys, config.identities, config.snippets, config.portForwardingRules]);
+    return JSON.stringify({ ...getSyncSnapshot(), settings: collectSyncableSettings() });
+  }, [getSyncSnapshot]);
   
   // Sync now handler - get fresh state directly from manager
   const syncNow = useCallback(async (options?: SyncNowOptions) => {
     const trigger: SyncTrigger = options?.trigger ?? 'auto';
 
+    isSyncRunningRef.current = true;
     try {
       // Get fresh state directly from CloudSyncManager singleton
       let state = manager.getState();
 
-      const hasProvider = Object.values(state.providers).some(p => p.status === 'connected');
+      const hasProvider = Object.values(state.providers).some((provider) => isProviderReadyForSync(provider));
       const syncing = state.syncState === 'SYNCING';
 
       if (!hasProvider) {
         throw new Error(t('sync.autoSync.noProvider'));
       }
       if (syncing) {
+        if (trigger === 'auto') {
+          console.info('[AutoSync] Skipping overlapping auto-sync because another sync is already running.');
+          return;
+        }
         throw new Error(t('sync.autoSync.alreadySyncing'));
       }
 
@@ -108,9 +162,26 @@ export const useAutoSync = (config: AutoSyncConfig) => {
         throw new Error(t('sync.autoSync.vaultLocked'));
       }
 
+      const dataHash = getDataHash();
       const payload = buildPayload();
+      const encryptedCredentialPaths = findSyncPayloadEncryptedCredentialPaths(payload);
+      if (encryptedCredentialPaths.length > 0) {
+        console.warn('[AutoSync] Blocked: encrypted credential placeholders found at:', encryptedCredentialPaths.join(', '));
+        throw new Error(t('sync.credentialsUnavailable'));
+      }
+
       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);
+          skipNextSyncRef.current = true;
+          break; // All providers share the same merged payload
+        }
+      }
+
       for (const result of results.values()) {
         if (!result.success) {
           if (result.conflictDetected) {
@@ -120,23 +191,25 @@ export const useAutoSync = (config: AutoSyncConfig) => {
         }
       }
 
-      lastSyncedDataRef.current = getDataHash();
+      lastSyncedDataRef.current = dataHash;
     } 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'),
       );
+    } finally {
+      isSyncRunningRef.current = false;
     }
-  }, [sync, buildPayload, getDataHash, t]);
+  }, [sync, buildPayload, getDataHash, onApplyPayload, t]);
   
   // Check remote version and pull if newer (on startup)
   const checkRemoteVersion = useCallback(async () => {
     const state = manager.getState();
-    const hasProvider = Object.values(state.providers).some(p => p.status === 'connected');
+    const hasProvider = Object.values(state.providers).some((provider) => isProviderReadyForSync(provider));
     const unlocked = state.securityState === 'UNLOCKED';
     
     if (!hasProvider || !unlocked || hasCheckedRemoteRef.current) {
@@ -146,29 +219,32 @@ export const useAutoSync = (config: AutoSyncConfig) => {
     hasCheckedRemoteRef.current = true;
     
     // Find connected provider
-    const connectedProvider = 
-      state.providers.github.status === 'connected' ? 'github' :
-      state.providers.google.status === 'connected' ? 'google' :
-      state.providers.onedrive.status === 'connected' ? 'onedrive' :
-      state.providers.webdav.status === 'connected' ? 'webdav' :
-      state.providers.s3.status === 'connected' ? 's3' : null;
+    const connectedProvider = AUTO_SYNC_PROVIDER_ORDER.find((provider) =>
+      isProviderReadyForSync(state.providers[provider]),
+    ) ?? null;
     
     if (!connectedProvider) return;
     
     try {
-      console.log('[AutoSync] Checking remote version...');
+      // Load base BEFORE downloading (downloadFromProvider overwrites the base)
+      const base = await manager.loadSyncBase(connectedProvider);
       const remotePayload = await sync.downloadFromProvider(connectedProvider);
-      
+
       if (remotePayload && remotePayload.syncedAt > state.localUpdatedAt) {
-        console.log('[AutoSync] Remote is newer, applying...');
-        config.onApplyPayload(remotePayload);
-        toast.success(t('sync.autoSync.syncedMessage'), t('sync.autoSync.syncedTitle'));
+        const { mergeSyncPayloads } = await import('../../domain/syncMerge');
+        const localPayload = buildPayload();
+        const mergeResult = mergeSyncPayloads(base, localPayload, remotePayload);
+
+        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).
+        notify.success(t('sync.autoSync.syncedMessage'), t('sync.autoSync.syncedTitle'));
       }
     } catch (error) {
       console.error('[AutoSync] Failed to check remote version:', error);
-      // Don't show error toast for initial check - it's not critical
     }
-  }, [sync, config, t]);
+  }, [sync, config, buildPayload, t]);
   
   // Debounced auto-sync when data changes
   useEffect(() => {
@@ -185,11 +261,25 @@ export const useAutoSync = (config: AutoSyncConfig) => {
     }
     
     const currentHash = getDataHash();
-    
+
+    // After a merge, onApplyPayload changes local state which triggers
+    // this effect. Skip that cycle and just update the hash baseline.
+    if (skipNextSyncRef.current) {
+      skipNextSyncRef.current = false;
+      lastSyncedDataRef.current = currentHash;
+      return;
+    }
+
     // Skip if data hasn't changed
     if (currentHash === lastSyncedDataRef.current) {
       return;
     }
+
+    // Wait for the current sync to finish, then this effect will re-run
+    // because sync.isSyncing changed.
+    if (sync.isSyncing || isSyncRunningRef.current) {
+      return;
+    }
     
     // Clear existing timeout
     if (syncTimeoutRef.current) {
@@ -198,7 +288,6 @@ export const useAutoSync = (config: AutoSyncConfig) => {
     
     // Debounce sync by 3 seconds
     syncTimeoutRef.current = setTimeout(() => {
-      console.log('[AutoSync] Data changed, syncing...');
       syncNow();
     }, 3000);
     
@@ -207,7 +296,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
         clearTimeout(syncTimeoutRef.current);
       }
     };
-  }, [sync.hasAnyConnectedProvider, sync.autoSyncEnabled, sync.isUnlocked, getDataHash, syncNow]);
+  }, [sync.hasAnyConnectedProvider, sync.autoSyncEnabled, sync.isUnlocked, sync.isSyncing, getDataHash, syncNow, config.settingsVersion, bookmarksVersion]);
   
   // Check remote version on startup/unlock
   useEffect(() => {

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,
@@ -21,9 +21,9 @@ import {
   type S3Config,
   formatLastSync,
   getSyncDotColor,
+  isProviderReadyForSync,
 } from '../../domain/sync';
 import {
-  CloudSyncManager,
   getCloudSyncManager,
   type SyncManagerState,
 } from '../../infrastructure/services/CloudSyncManager';
@@ -81,8 +81,10 @@ 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>;
@@ -102,12 +104,6 @@ export interface CloudSyncHook {
   refresh: () => void;
 }
 
-export interface GitHubAuthState {
-  isAuthenticating: boolean;
-  deviceFlowState: DeviceFlowState | null;
-  error: string | null;
-}
-
 // ============================================================================
 // Hook Implementation
 // ============================================================================
@@ -126,17 +122,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);
 
@@ -181,13 +166,13 @@ export const useCloudSync = (): CloudSyncHook => {
   
   const hasAnyConnectedProvider = useMemo(() => {
     return (Object.values(state.providers) as ProviderConnection[]).some(
-      (p) => p.status === 'connected' || p.status === 'syncing'
+      (p) => isProviderReadyForSync(p)
     );
   }, [state.providers]);
   
   const connectedProviderCount = useMemo(() => {
     return (Object.values(state.providers) as ProviderConnection[]).filter(
-      (p) => p.status === 'connected' || p.status === 'syncing'
+      (p) => isProviderReadyForSync(p)
     ).length;
   }, [state.providers]);
   
@@ -272,7 +257,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;
@@ -280,32 +265,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');
-      }, 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;
@@ -313,22 +310,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');
-      }, 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;
   }, []);
   
@@ -344,6 +352,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);
   }, []);
@@ -352,6 +364,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) => {
@@ -449,8 +466,10 @@ export const useCloudSync = (): CloudSyncHook => {
     connectWebDAV,
     connectS3,
     completePKCEAuth,
+    cancelOAuthConnect,
     disconnectProvider,
-    
+    resetProviderStatus,
+
     // Sync Actions
     syncNow: syncNowWithUnlock,
     syncToProvider: syncToProviderWithUnlock,
@@ -471,60 +490,4 @@ export const useCloudSync = (): CloudSyncHook => {
   };
 };
 
-// ============================================================================
-// Convenience Hooks
-// ============================================================================
-
-/**
- * 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: connection.status === 'connected',
-    isSyncing: connection.status === 'syncing',
-    hasError: connection.status === 'error',
-    dotColor: getSyncDotColor(connection.status),
-    lastSyncFormatted: formatLastSync(connection.lastSync),
-  };
-};
-
 export default useCloudSync;

application/state/useFileUpload.ts

@@ -0,0 +1,79 @@
+/**
+ * useFileUpload - Handle file paste/drop with base64 conversion
+ *
+ * Supports images, PDFs, and other document types.
+ * Ported from 1code's use-agents-file-upload.ts
+ */
+import { useCallback, useState } from 'react';
+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)
+}
+
+/** Reject only known binary blobs that AI models can't process */
+const REJECTED_MIME_PREFIXES = ['video/', 'audio/'];
+
+function isSupportedFile(file: File): boolean {
+  // Allow files with empty MIME (common in Electron for .sh, .yaml, etc.)
+  if (!file.type) return true;
+  return !REJECTED_MIME_PREFIXES.some(prefix => file.type.startsWith(prefix));
+}
+
+async function fileToDataUrl(file: File): Promise<{ dataUrl: string; base64: string }> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const dataUrl = reader.result as string;
+      const base64 = dataUrl.split(',')[1] || '';
+      resolve({ dataUrl, base64 });
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+export function useFileUpload() {
+  const [files, setFiles] = useState<UploadedFile[]>([]);
+
+  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 filePath = getPathForFile(file);
+        return { id, filename, dataUrl, base64Data, mediaType, filePath };
+      }),
+    );
+
+    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 };
+}

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;
@@ -135,8 +135,6 @@ export const useGlobalHotkeys = ({
     e.stopPropagation();
 
     const currentActions = actionsRef.current;
-    const _tabs = orderedTabsRef.current;
-
     switch (action) {
       case 'switchToTab': {
         const num = parseInt(e.key, 10);

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();
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+export function useImmersiveMode({
+  isImmersive,
+  activeTabId,
+  activeTerminalTheme,
+  restoreOriginalTheme,
+}: {
+  isImmersive: boolean;
+  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 (isImmersive && 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);
+    }
+  }, [isImmersive, isTerminalTab, activeTerminalTheme]);
+
+  // RESTORE: useEffect — runs after paint, with fade overlay
+  useEffect(() => {
+    if (isImmersive && 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(); };
+  }, [isImmersive, isTerminalTab, activeTerminalTheme, restoreOriginalTheme]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      removeImmersiveStyle();
+      appliedFpRef.current = null;
+      if (overrideActiveRef.current) {
+        overrideActiveRef.current = false;
+        restoreRef.current();
+      }
+    };
+  }, []);
+}

application/state/useManagedSourceSync.ts

@@ -103,8 +103,6 @@ export const useManagedSourceSync = ({
 
   const writeSshConfigToFile = useCallback(
     async (source: ManagedSource, managedHosts: Host[]) => {
-      console.log(`[ManagedSourceSync] writeSshConfigToFile called for ${source.groupName}, hosts:`, managedHosts.length);
-
       const bridge = netcattyBridge.get();
       if (!bridge?.writeLocalFile) {
         console.warn("[ManagedSourceSync] writeLocalFile not available");
@@ -121,14 +119,9 @@ export const useManagedSourceSync = ({
           managedHosts,
           hosts,
         );
-        console.log(`[ManagedSourceSync] Final content (${finalContent.length} chars)`);
-
         const encoder = new TextEncoder();
         const buffer = encoder.encode(finalContent);
-        console.log(`[ManagedSourceSync] Writing to ${source.filePath}`);
-
         await bridge.writeLocalFile(source.filePath, buffer.buffer as ArrayBuffer);
-        console.log(`[ManagedSourceSync] Write successful`);
         return true;
       } catch (err) {
         console.error("[ManagedSourceSync] Failed to write SSH config:", err);
@@ -159,12 +152,8 @@ export const useManagedSourceSync = ({
   // This should be called before deleting a managed group to avoid stale entries
   const clearAndRemoveSource = useCallback(
     async (source: ManagedSource) => {
-      console.log(`[ManagedSourceSync] Clearing managed block for ${source.groupName}`);
       // Write empty hosts list to clear the managed block
       const success = await writeSshConfigToFile(source, []);
-      if (success) {
-        console.log(`[ManagedSourceSync] Managed block cleared, removing source`);
-      }
       // Remove the source regardless of write success
       const updatedSources = managedSourcesRef.current.filter((s) => s.id !== source.id);
       onUpdateManagedSources(updatedSources);
@@ -179,19 +168,14 @@ export const useManagedSourceSync = ({
     async (sources: ManagedSource[]) => {
       if (sources.length === 0) return;
 
-      console.log(`[ManagedSourceSync] Clearing ${sources.length} managed blocks`);
-
       // Clear all files in parallel
-      const results = await Promise.all(
+      await Promise.all(
         sources.map(async (source) => {
           const success = await writeSshConfigToFile(source, []);
           return { sourceId: source.id, success };
         })
       );
 
-      const successCount = results.filter(r => r.success).length;
-      console.log(`[ManagedSourceSync] Cleared ${successCount}/${sources.length} managed blocks`);
-
       // Remove all sources atomically in a single update
       const sourceIdsToRemove = new Set(sources.map(s => s.id));
       const updatedSources = managedSourcesRef.current.filter(
@@ -273,8 +257,6 @@ export const useManagedSourceSync = ({
         const prevManaged = prevHostsBySource.get(source.id) || [];
         const currManaged = currHostsBySource.get(source.id) || [];
 
-        console.log(`[ManagedSourceSync] Source ${source.groupName}: prev=${prevManaged.length}, curr=${currManaged.length}`);
-
         if (prevManaged.length !== currManaged.length) {
           changedSourceIds.add(source.id);
           continue;
@@ -328,7 +310,6 @@ export const useManagedSourceSync = ({
     }
 
     if (changedSourceIds.size > 0) {
-      console.log(`[ManagedSourceSync] Syncing sources:`, Array.from(changedSourceIds));
       syncInProgressRef.current = true;
 
       Promise.all(

application/state/usePortForwardingAutoStart.ts

@@ -3,8 +3,8 @@
  * 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 { Host, Identity, PortForwardingRule, SSHKey } from "../../domain/models";
 import { STORAGE_KEY_PORT_FORWARDING } from "../../infrastructure/config/storageKeys";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
 import {
@@ -17,7 +17,8 @@ import { logger } from "../../lib/logger";
 
 export interface UsePortForwardingAutoStartOptions {
   hosts: Host[];
-  keys: { id: string; privateKey: string }[];
+  keys: SSHKey[];
+  identities: Identity[];
 }
 
 /**
@@ -27,10 +28,37 @@ export interface UsePortForwardingAutoStartOptions {
 export const usePortForwardingAutoStart = ({
   hosts,
   keys,
+  identities,
 }: UsePortForwardingAutoStartOptions): void => {
   const autoStartExecutedRef = useRef(false);
   const hostsRef = useRef<Host[]>(hosts);
-  const keysRef = useRef<{ id: string; privateKey: string }[]>(keys);
+  const keysRef = useRef<SSHKey[]>(keys);
+  const identitiesRef = useRef<Identity[]>(identities);
+
+  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 +69,10 @@ export const usePortForwardingAutoStart = ({
     keysRef.current = keys;
   }, [keys]);
 
+  useEffect(() => {
+    identitiesRef.current = identities;
+  }, [identities]);
+
   // Set up the reconnect callback
   useEffect(() => {
     const handleReconnect = async (
@@ -62,7 +94,7 @@ export const usePortForwardingAutoStart = ({
         return { success: false, error: "Host not found" };
       }
 
-      return startPortForward(rule, host, keysRef.current, onStatusChange, true);
+      return startPortForward(rule, host, hostsRef.current, keysRef.current, identitiesRef.current, onStatusChange, true);
     };
 
     setReconnectCallback(handleReconnect);
@@ -76,6 +108,17 @@ export const usePortForwardingAutoStart = ({
     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;
@@ -108,7 +151,9 @@ export const usePortForwardingAutoStart = ({
           void startPortForward(
             rule,
             host,
+            hosts,
             keys,
+            identities,
             (status, error) => {
               // Update the rule status in storage
               const currentRules = localStorageAdapter.read<PortForwardingRule[]>(
@@ -135,5 +180,5 @@ export const usePortForwardingAutoStart = ({
     };
 
     void runAutoStart();
-  }, [hosts, keys]);
+  }, [hosts, identities, isHostAuthReady, keys]);
 };

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,
@@ -9,12 +9,25 @@ import { localStorageAdapter } from "../../infrastructure/persistence/localStora
 import {
   clearReconnectTimer,
   getActiveConnection,
+  initReconnectCancelListener,
+  reconcileWithBackend,
   startPortForward,
+  stopAllPortForwards,
+  stopAndCleanupRule,
   stopPortForward,
   syncWithBackend,
 } from "../../infrastructure/services/portForwardingService";
 import { useStoredViewMode, ViewMode } from "./useStoredViewMode";
 
+// Module-level ref-counts: these side effects must run at most once per
+// window, not per hook instance (the hook mounts from both App.tsx
+// and PortForwardingNew.tsx).  Ref-counting ensures the resources
+// stay alive as long as ANY instance is mounted.
+let reconnectCancelListenerRefs = 0;
+let reconnectCancelCleanup: (() => void) | undefined;
+let heartbeatRefs = 0;
+let heartbeatIntervalId: ReturnType<typeof setInterval> | undefined;
+
 export type { ViewMode };
 
 export type SortMode = "az" | "za" | "newest" | "oldest";
@@ -50,7 +63,9 @@ export interface UsePortForwardingStateResult {
   startTunnel: (
     rule: PortForwardingRule,
     host: Host,
-    keys: { id: string; privateKey: string }[],
+    hosts: Host[],
+    keys: SSHKey[],
+    identities: Identity[],
     onStatusChange?: (status: PortForwardingRule["status"], error?: string) => void,
     enableReconnect?: boolean,
   ) => Promise<{ success: boolean; error?: string }>;
@@ -177,6 +192,53 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
     return () => window.removeEventListener("storage", handleStorageChange);
   }, []);
 
+  // Listen for cross-window reconnect cancellation events.
+  // Ref-counted so the listener stays alive as long as ANY hook
+  // instance is mounted (App.tsx outlives PortForwardingNew.tsx).
+  useEffect(() => {
+    reconnectCancelListenerRefs++;
+    let cleanup: (() => void) | undefined;
+    if (reconnectCancelListenerRefs === 1) {
+      cleanup = initReconnectCancelListener();
+      reconnectCancelCleanup = cleanup;
+    }
+    return () => {
+      reconnectCancelListenerRefs--;
+      if (reconnectCancelListenerRefs === 0 && reconnectCancelCleanup) {
+        reconnectCancelCleanup();
+        reconnectCancelCleanup = undefined;
+      }
+    };
+  }, []);
+
+  // Periodic heartbeat: reconcile renderer state with the backend every 4s.
+  // Ref-counted — same pattern as the reconnect cancel listener.
+  useEffect(() => {
+    heartbeatRefs++;
+    let intervalId: ReturnType<typeof setInterval> | undefined;
+    if (heartbeatRefs === 1) {
+      const HEARTBEAT_INTERVAL_MS = 4_000;
+
+      const tick = async () => {
+        const { gone, appeared } = await reconcileWithBackend();
+        if (gone.length === 0 && appeared.length === 0) return;
+
+        // Re-derive statuses from the now-updated activeConnections map
+        setGlobalRules(normalizeRulesWithConnections(globalRules));
+      };
+
+      intervalId = setInterval(tick, HEARTBEAT_INTERVAL_MS);
+      heartbeatIntervalId = intervalId;
+    }
+    return () => {
+      heartbeatRefs--;
+      if (heartbeatRefs === 0 && heartbeatIntervalId !== undefined) {
+        clearInterval(heartbeatIntervalId);
+        heartbeatIntervalId = undefined;
+      }
+    };
+  }, []);
+
   const addRule = useCallback(
     (
       rule: Omit<PortForwardingRule, "id" | "createdAt" | "status">,
@@ -207,6 +269,8 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
 
   const deleteRule = useCallback(
     (id: string) => {
+      // Stop any active tunnel before removing the rule
+      stopAndCleanupRule(id);
       const updated = globalRules.filter((r) => r.id !== id);
       setGlobalRules(updated);
       if (selectedRuleId === id) {
@@ -238,6 +302,60 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
   );
 
   const importRules = useCallback((newRules: PortForwardingRule[]) => {
+    // When clearing all rules (e.g. "Clear local data"), stop ALL tunnels
+    // and broadcast per-rule reconnect cancellation.  stopAllPortForwards
+    // handles the backend, but we also need per-rule broadcasts so other
+    // windows cancel their pending reconnect timers.
+    if (newRules.length === 0) {
+      // Read from localStorage since globalRules may be empty (uninitialized)
+      const storedRules = localStorageAdapter.read<PortForwardingRule[]>(
+        STORAGE_KEY_PORT_FORWARDING,
+      );
+      const rulesToCancel = globalRules.length > 0
+        ? globalRules
+        : (storedRules && Array.isArray(storedRules) ? storedRules : []);
+      for (const rule of rulesToCancel) {
+        stopAndCleanupRule(rule.id);
+      }
+      // Safety net: also stop anything the renderer doesn't know about
+      void stopAllPortForwards();
+    }
+
+    // Stop tunnels for rules that are being removed or whose connection
+    // config has changed (same ID but different host/port/type means the
+    // old tunnel is pointing at stale parameters and must be torn down).
+    //
+    // Use globalRules as the diff baseline.  In a freshly opened settings
+    // window, globalRules may still be empty because initializeStore is
+    // async.  Fall back to reading directly from localStorage to avoid
+    // missing tunnels that need to be stopped.
+    let diffBaseline = globalRules;
+    if (diffBaseline.length === 0 && newRules.length > 0) {
+      const stored = localStorageAdapter.read<PortForwardingRule[]>(
+        STORAGE_KEY_PORT_FORWARDING,
+      );
+      if (stored && Array.isArray(stored) && stored.length > 0) {
+        diffBaseline = stored;
+      }
+    }
+    const newRulesById = new Map(newRules.map((r) => [r.id, r]));
+    for (const existing of diffBaseline) {
+      const incoming = newRulesById.get(existing.id);
+      if (!incoming) {
+        // Rule removed entirely
+        stopAndCleanupRule(existing.id);
+      } else if (
+        existing.type !== incoming.type ||
+        existing.localPort !== incoming.localPort ||
+        existing.remoteHost !== incoming.remoteHost ||
+        existing.remotePort !== incoming.remotePort ||
+        existing.bindAddress !== incoming.bindAddress ||
+        existing.hostId !== incoming.hostId
+      ) {
+        // Connection-relevant config changed — tear down the old tunnel
+        stopAndCleanupRule(existing.id);
+      }
+    }
     setGlobalRules(normalizeRulesWithConnections(newRules));
   }, []);
 
@@ -261,14 +379,16 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
     async (
       rule: PortForwardingRule,
       host: Host,
-      keys: { id: string; privateKey: 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

@@ -38,7 +38,9 @@ export const useSessionState = () => {
   // Log views: stores open log replay tabs
   const [logViews, setLogViews] = useState<LogView[]>([]);
 
-  const createLocalTerminal = useCallback(() => {
+  const createLocalTerminal = useCallback((options?: {
+    shellType?: TerminalSession['shellType'];
+  }) => {
     const sessionId = crypto.randomUUID();
     const localHostId = `local-${sessionId}`;
     const newSession: TerminalSession = {
@@ -48,12 +50,15 @@ export const useSessionState = () => {
       hostname: 'localhost',
       username: 'local',
       status: 'connecting',
+      protocol: 'local',
+      shellType: options?.shellType,
     };
-	    setSessions(prev => [...prev, newSession]);
-	    setActiveTabId(sessionId);
-	  }, [setActiveTabId]);
+    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;
@@ -66,9 +71,11 @@ export const useSessionState = () => {
       status: 'connecting',
       protocol: 'serial',
       serialConfig: config,
+      charset: options?.charset,
     };
     setSessions(prev => [...prev, newSession]);
     setActiveTabId(sessionId);
+    return sessionId;
   }, [setActiveTabId]);
 
   const connectToHost = useCallback((host: Host) => {
@@ -97,10 +104,11 @@ export const useSessionState = () => {
         status: 'connecting',
         protocol: 'serial',
         serialConfig: serialConfig,
+        charset: host.charset,
       };
       setSessions(prev => [...prev, newSession]);
       setActiveTabId(sessionId);
-      return;
+      return sessionId;
     }
 
     const newSession: TerminalSession = {
@@ -114,10 +122,12 @@ export const useSessionState = () => {
       protocol: host.protocol,
       port: host.port,
       moshEnabled: host.moshEnabled,
+      charset: host.charset,
     };
-	    setSessions(prev => [...prev, newSession]);
-	    setActiveTabId(newSession.id);
-	  }, [setActiveTabId]);
+    setSessions(prev => [...prev, newSession]);
+    setActiveTabId(newSession.id);
+    return newSession.id;
+  }, [setActiveTabId]);
 
   const updateSessionStatus = useCallback((sessionId: string, status: TerminalSession['status']) => {
     setSessions(prev => prev.map(s => s.id === sessionId ? { ...s, status } : s));
@@ -314,6 +324,7 @@ export const useSessionState = () => {
           status: 'connecting',
           protocol: 'serial',
           serialConfig: serialConfig,
+          charset: host.charset,
         };
       }
 
@@ -327,6 +338,7 @@ export const useSessionState = () => {
         protocol: host.protocol,
         port: host.port,
         moshEnabled: host.moshEnabled,
+        charset: host.charset,
       };
     });
 
@@ -411,11 +423,17 @@ export const useSessionState = () => {
   // direction: 'horizontal' = split top/bottom, 'vertical' = split left/right
   const splitSession = useCallback((
     sessionId: string,
-    direction: SplitDirection
+    direction: SplitDirection,
+    options?: {
+      localShellType?: TerminalSession['shellType'];
+    },
   ) => {
 	    setSessions(prevSessions => {
       const session = prevSessions.find(s => s.id === sessionId);
       if (!session) return prevSessions;
+      const nextShellType = session.protocol === 'local'
+        ? options?.localShellType
+        : session.shellType;
       
       // If session is already in a workspace, split within that workspace
       if (session.workspaceId) {
@@ -431,8 +449,10 @@ export const useSessionState = () => {
           protocol: session.protocol,
           port: session.port,
           moshEnabled: session.moshEnabled,
+          shellType: nextShellType,
+          charset: session.charset,
         };
-        
+
         // Add pane to existing workspace
         const hint: SplitHint = {
           direction,
@@ -461,13 +481,15 @@ export const useSessionState = () => {
         protocol: session.protocol,
         port: session.port,
         moshEnabled: session.moshEnabled,
+        shellType: nextShellType,
+        charset: session.charset,
       };
-      
+
       const hint: SplitHint = {
         direction,
         position: direction === 'horizontal' ? 'bottom' : 'right',
       };
-      
+
       const newWorkspace = createWorkspaceEntity(sessionId, newSession.id, hint);
       setWorkspaces(prev => [...prev, newWorkspace]);
       setActiveTabId(newWorkspace.id);
@@ -548,6 +570,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
     }));
 
@@ -566,6 +589,7 @@ export const useSessionState = () => {
       workspaceId: workspace.id,
       // Store the command to run after connection
       startupCommand: snippet.command,
+      noAutoRun: snippet.noAutoRun,
     }));
 
 	    setSessions(prev => [...prev, ...sessionsWithWorkspace]);
@@ -611,10 +635,15 @@ export const useSessionState = () => {
   }, [setActiveTabId]);
 
   // Copy a session - creates a new session with the same host connection
-  const copySession = useCallback((sessionId: string) => {
+  const copySession = useCallback((sessionId: string, options?: {
+    localShellType?: TerminalSession['shellType'];
+  }) => {
     setSessions(prevSessions => {
       const session = prevSessions.find(s => s.id === sessionId);
       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 = {
@@ -627,6 +656,8 @@ export const useSessionState = () => {
         protocol: session.protocol,
         port: session.port,
         moshEnabled: session.moshEnabled,
+        shellType: nextShellType,
+        charset: session.charset,
         serialConfig: session.serialConfig,
       };
 
@@ -660,9 +691,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]);
 
@@ -676,10 +709,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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type SetStateAction } from 'react';
-import { SyncConfig, TerminalSettings, DEFAULT_TERMINAL_SETTINGS, HotkeyScheme, CustomKeyBindings, DEFAULT_KEY_BINDINGS, KeyBinding, UILanguage, SessionLogFormat } from '../../domain/models';
+import { SyncConfig, TerminalSettings, HotkeyScheme, CustomKeyBindings, DEFAULT_KEY_BINDINGS, KeyBinding, UILanguage, SessionLogFormat, normalizeTerminalSettings } from '../../domain/models';
 import {
   STORAGE_KEY_COLOR,
   STORAGE_KEY_SYNC,
@@ -21,24 +21,37 @@ import {
   STORAGE_KEY_SFTP_AUTO_SYNC,
   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,
   STORAGE_KEY_SESSION_LOGS_FORMAT,
   STORAGE_KEY_TOGGLE_WINDOW_HOTKEY,
   STORAGE_KEY_CLOSE_TO_TRAY,
+  STORAGE_KEY_GLOBAL_HOTKEY_ENABLED,
+  STORAGE_KEY_AUTO_UPDATE_ENABLED,
+  STORAGE_KEY_WORKSPACE_FOCUS_STYLE,
+
 } from '../../infrastructure/config/storageKeys';
 import { DEFAULT_UI_LOCALE, resolveSupportedLocale } from '../../infrastructure/config/i18n';
 import { TERMINAL_THEMES } from '../../infrastructure/config/terminalThemes';
+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';
 
-const DEFAULT_THEME: 'light' | 'dark' = 'light';
+const DEFAULT_THEME: 'light' | 'dark' | 'system' = 'dark';
+
+/** Resolve the current OS color scheme preference. */
+const getSystemPreference = (): 'light' | 'dark' =>
+  typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light';
 const DEFAULT_LIGHT_UI_THEME = 'snow';
 const DEFAULT_DARK_UI_THEME = 'midnight';
 const DEFAULT_ACCENT_MODE: 'theme' | 'custom' = 'theme';
@@ -54,6 +67,8 @@ const DEFAULT_SFTP_DOUBLE_CLICK_BEHAVIOR: 'open' | 'transfer' = 'open';
 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';
 
 // Editor defaults
 const DEFAULT_EDITOR_WORD_WRAP = false;
@@ -76,7 +91,7 @@ const readStoredString = (key: string): string | null => {
   }
 };
 
-const isValidTheme = (value: unknown): value is 'light' | 'dark' => value === 'light' || value === 'dark';
+const isValidTheme = (value: unknown): value is 'light' | 'dark' | 'system' => value === 'light' || value === 'dark' || value === 'system';
 
 const isValidHslToken = (value: string): boolean => {
   // Expect: "<h> <s>% <l>%", e.g. "221.2 83.2% 53.3%"
@@ -103,14 +118,18 @@ const areTerminalSettingsEqual = (a: TerminalSettings, b: TerminalSettings): boo
   serializeTerminalSettings(a) === serializeTerminalSettings(b);
 
 const applyThemeTokens = (
-  theme: 'light' | 'dark',
+  themeSource: 'light' | 'dark' | 'system',
+  resolvedTheme: 'light' | 'dark',
   tokens: UiThemeTokens,
   accentMode: 'theme' | 'custom',
   accentOverride: string,
 ) => {
   const root = window.document.documentElement;
-  root.classList.remove('light', 'dark');
-  root.classList.add(theme);
+  // If immersive mode 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);
@@ -119,7 +138,7 @@ const applyThemeTokens = (
   root.style.setProperty('--popover-foreground', tokens.popoverForeground);
   const accentToken = accentMode === 'custom' ? accentOverride : tokens.accent;
   const accentLightness = parseFloat(accentToken.split(/\s+/)[2]?.replace('%', '') || '');
-  const computedAccentForeground = theme === 'dark'
+  const computedAccentForeground = resolvedTheme === 'dark'
     ? '220 40% 96%'
     : (!Number.isNaN(accentLightness) && accentLightness < 55 ? '0 0% 98%' : '222 47% 12%');
 
@@ -138,17 +157,20 @@ const applyThemeTokens = (
   root.style.setProperty('--ring', accentToken);
 
   // Sync with native window title bar (Electron)
-  netcattyBridge.get()?.setTheme?.(theme);
+  netcattyBridge.get()?.setTheme?.(themeSource);
   netcattyBridge.get()?.setBackgroundColor?.(tokens.background);
 };
 
 export const useSettingsState = () => {
-  const availableFonts = useAvailableFonts();
   const uiFontsLoaded = useUIFontsLoaded();
-  const [theme, setTheme] = useState<'dark' | 'light'>(() => {
+  const [theme, setTheme] = useState<'dark' | 'light' | 'system'>(() => {
     const stored = readStoredString(STORAGE_KEY_THEME);
     return stored && isValidTheme(stored) ? stored : DEFAULT_THEME;
   });
+  // Track the OS color scheme preference (updated by matchMedia listener)
+  const [systemPreference, setSystemPreference] = useState<'light' | 'dark'>(getSystemPreference);
+  // resolvedTheme is always 'light' or 'dark' — derived synchronously from theme + OS preference
+  const resolvedTheme: 'light' | 'dark' = theme === 'system' ? systemPreference : theme;
   const [lightUiThemeId, setLightUiThemeId] = useState<string>(() => {
     const stored = readStoredString(STORAGE_KEY_UI_THEME_LIGHT);
     return stored && isValidUiThemeId('light', stored) ? stored : DEFAULT_LIGHT_UI_THEME;
@@ -181,7 +203,7 @@ export const useSettingsState = () => {
   });
   const [terminalSettings, setTerminalSettingsState] = useState<TerminalSettings>(() => {
     const stored = localStorageAdapter.read<TerminalSettings>(STORAGE_KEY_TERM_SETTINGS);
-    return stored ? { ...DEFAULT_TERMINAL_SETTINGS, ...stored } : DEFAULT_TERMINAL_SETTINGS;
+    return normalizeTerminalSettings(stored);
   });
   const [hotkeyScheme, setHotkeyScheme] = useState<HotkeyScheme>(() => {
     const stored = localStorageAdapter.readString(STORAGE_KEY_HOTKEY_SCHEME);
@@ -217,6 +239,18 @@ export const useSettingsState = () => {
     if (stored === 'false' || stored === 'disabled') return false;
     return DEFAULT_SFTP_USE_COMPRESSED_UPLOAD;
   });
+  const [sftpAutoOpenSidebar, setSftpAutoOpenSidebar] = useState<boolean>(() => {
+    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 [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>(() => {
@@ -252,16 +286,31 @@ export const useSettingsState = () => {
     if (stored === null) return true;
     return stored === 'true';
   });
+  const [autoUpdateEnabled, setAutoUpdateEnabled] = useState<boolean>(() => {
+    const stored = readStoredString(STORAGE_KEY_AUTO_UPDATE_ENABLED);
+    if (stored === null) return true; // Default to enabled
+    return stored === 'true';
+  });
   const [hotkeyRegistrationError, setHotkeyRegistrationError] = useState<string | null>(null);
+  const [globalHotkeyEnabled, setGlobalHotkeyEnabled] = useState<boolean>(() => {
+    const stored = readStoredString(STORAGE_KEY_GLOBAL_HOTKEY_ENABLED);
+    if (stored === null) return true; // Default to enabled
+    return stored === 'true';
+  });
   const incomingTerminalSettingsSignatureRef = useRef<string | null>(null);
   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 next = typeof nextValue === 'function'
+      const candidate = typeof nextValue === 'function'
         ? (nextValue as (prevState: TerminalSettings) => TerminalSettings)(prev)
         : nextValue;
+      const next = normalizeTerminalSettings(candidate);
       if (areTerminalSettingsEqual(prev, next)) {
         return prev;
       }
@@ -272,7 +321,7 @@ export const useSettingsState = () => {
 
   const mergeIncomingTerminalSettings = useCallback((incoming: Partial<TerminalSettings>) => {
     setTerminalSettingsState((prev) => {
-      const next = { ...prev, ...incoming };
+      const next = normalizeTerminalSettings({ ...prev, ...incoming });
       if (areTerminalSettingsEqual(prev, next)) {
         return prev;
       }
@@ -291,6 +340,29 @@ export const useSettingsState = () => {
     }
   }, []);
 
+  // Immersive mode is always enabled — the toggle has been removed from settings
+  const immersiveMode = true;
+  const setImmersiveMode = useCallback((_enabled: boolean) => {
+    // no-op: immersive mode is always on
+  }, []);
+
+  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;
@@ -303,14 +375,26 @@ 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);
     setAccentMode(nextAccentMode);
     setCustomAccent(nextAccent);
 
-    const tokens = getUiThemeById(nextTheme, nextTheme === 'dark' ? nextDarkId : nextLightId).tokens;
-    applyThemeTokens(nextTheme, tokens, nextAccentMode, nextAccent);
+    const effective = nextTheme === 'system' ? getSystemPreference() : nextTheme;
+    const tokens = getUiThemeById(effective, effective === 'dark' ? nextDarkId : nextLightId).tokens;
+    applyThemeTokens(nextTheme, effective, tokens, nextAccentMode, nextAccent);
   }, [theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent]);
 
   const syncCustomCssFromStorage = useCallback(() => {
@@ -318,27 +402,102 @@ export const useSettingsState = () => {
     setCustomCSS((prev) => (prev === storedCss ? prev : storedCss));
   }, []);
 
+  const rehydrateAllFromStorage = useCallback(() => {
+    // Theme & appearance (already have helper)
+    syncAppearanceFromStorage();
+    syncCustomCssFromStorage();
+
+    // UI Font
+    const storedFont = readStoredString(STORAGE_KEY_UI_FONT_FAMILY);
+    if (storedFont) setUiFontFamilyId(storedFont);
+
+    // Language
+    const storedLang = readStoredString(STORAGE_KEY_UI_LANGUAGE);
+    if (storedLang) setUiLanguage(storedLang as UILanguage);
+
+    // Terminal
+    const storedTermTheme = readStoredString(STORAGE_KEY_TERM_THEME);
+    if (storedTermTheme) setTerminalThemeId(storedTermTheme);
+    const storedTermFont = readStoredString(STORAGE_KEY_TERM_FONT_FAMILY);
+    if (storedTermFont) setTerminalFontFamilyId(storedTermFont);
+    const storedTermSize = localStorageAdapter.readNumber(STORAGE_KEY_TERM_FONT_SIZE);
+    if (storedTermSize != null) setTerminalFontSize(storedTermSize);
+    const storedTermSettings = readStoredString(STORAGE_KEY_TERM_SETTINGS);
+    if (storedTermSettings) {
+      try {
+        const parsed = JSON.parse(storedTermSettings);
+        setTerminalSettings(parsed);
+      } catch { /* ignore */ }
+    }
+
+    // Keyboard
+    const storedKb = readStoredString(STORAGE_KEY_CUSTOM_KEY_BINDINGS);
+    if (storedKb) {
+      try {
+        setCustomKeyBindings(JSON.parse(storedKb));
+      } catch { /* ignore */ }
+    }
+
+    // Editor
+    const storedWrap = readStoredString(STORAGE_KEY_EDITOR_WORD_WRAP);
+    if (storedWrap === 'true' || storedWrap === 'false') setEditorWordWrapState(storedWrap === 'true');
+
+    // SFTP
+    const storedDblClick = readStoredString(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR);
+    if (storedDblClick === 'open' || storedDblClick === 'transfer') setSftpDoubleClickBehavior(storedDblClick);
+    const storedAutoSync = readStoredString(STORAGE_KEY_SFTP_AUTO_SYNC);
+    if (storedAutoSync === 'true' || storedAutoSync === 'false') setSftpAutoSync(storedAutoSync === 'true');
+    const storedHidden = readStoredString(STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES);
+    if (storedHidden === 'true' || storedHidden === 'false') setSftpShowHiddenFiles(storedHidden === 'true');
+    const storedCompress = readStoredString(STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD);
+    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);
+
+    // Workspace focus style
+    const storedFocusStyle = readStoredString(STORAGE_KEY_WORKSPACE_FOCUS_STYLE);
+    if (storedFocusStyle === 'dim' || storedFocusStyle === 'border') setWorkspaceFocusStyleState(storedFocusStyle);
+
+    // Custom terminal themes
+    customThemeStore.loadFromStorage();
+  }, [syncAppearanceFromStorage, syncCustomCssFromStorage, setTerminalSettings, notifySettingsChanged]);
+
   useLayoutEffect(() => {
-    const tokens = getUiThemeById(theme, theme === 'dark' ? darkUiThemeId : lightUiThemeId).tokens;
-    applyThemeTokens(theme, tokens, accentMode, customAccent);
+    const tokens = getUiThemeById(resolvedTheme, resolvedTheme === 'dark' ? darkUiThemeId : lightUiThemeId).tokens;
+    applyThemeTokens(theme, resolvedTheme, tokens, accentMode, customAccent);
     localStorageAdapter.writeString(STORAGE_KEY_THEME, theme);
     localStorageAdapter.writeString(STORAGE_KEY_UI_THEME_LIGHT, lightUiThemeId);
     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, lightUiThemeId, darkUiThemeId, accentMode, customAccent, notifySettingsChanged]);
+  }, [theme, resolvedTheme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, notifySettingsChanged]);
+
+  // Listen for OS color scheme changes to keep systemPreference in sync
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = (e: MediaQueryListEvent) => {
+      setSystemPreference(e.matches ? 'dark' : 'light');
+    };
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, []);
 
   useLayoutEffect(() => {
     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
@@ -347,7 +506,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
@@ -403,6 +565,18 @@ export const useSettingsState = () => {
       if (key === STORAGE_KEY_EDITOR_WORD_WRAP && typeof value === 'boolean') {
         setEditorWordWrapState((prev) => (prev === value ? prev : value));
       }
+      if (key === STORAGE_KEY_SESSION_LOGS_ENABLED && typeof value === 'boolean') {
+        setSessionLogsEnabled((prev) => (prev === value ? prev : value));
+      }
+      if (key === STORAGE_KEY_SESSION_LOGS_DIR && typeof value === 'string') {
+        setSessionLogsDir((prev) => (prev === value ? prev : value));
+      }
+      if (
+        key === STORAGE_KEY_SESSION_LOGS_FORMAT &&
+        (value === 'txt' || value === 'raw' || value === 'html')
+      ) {
+        setSessionLogsFormat((prev) => (prev === value ? prev : value));
+      }
       if (key === STORAGE_KEY_HOTKEY_SCHEME && (value === 'disabled' || value === 'mac' || value === 'pc')) {
         setHotkeyScheme(value);
       }
@@ -420,6 +594,26 @@ export const useSettingsState = () => {
       if (key === STORAGE_KEY_HOTKEY_RECORDING && typeof value === 'boolean') {
         setIsHotkeyRecordingState(value);
       }
+      if (key === STORAGE_KEY_GLOBAL_HOTKEY_ENABLED && typeof value === 'boolean') {
+        setGlobalHotkeyEnabled((prev) => (prev === value ? prev : value));
+      }
+      if (key === STORAGE_KEY_AUTO_UPDATE_ENABLED && typeof value === 'boolean') {
+        setAutoUpdateEnabled((prev) => (prev === value ? prev : value));
+      }
+      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 {
@@ -447,53 +641,76 @@ 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, terminalFontFamilyId, terminalFontSize,
+    sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles,
+    sftpUseCompressedUpload, sftpAutoOpenSidebar, sftpDefaultViewMode,
+    editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat,
+    globalHotkeyEnabled, autoUpdateEnabled, immersiveMode,
+  });
+  settingsSnapshotRef.current = {
+    theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent,
+    customCSS, uiFontFamilyId, hotkeyScheme, uiLanguage,
+    terminalThemeId, terminalFontFamilyId, terminalFontSize,
+    sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles,
+    sftpUseCompressedUpload, sftpAutoOpenSidebar, sftpDefaultViewMode,
+    editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat,
+    globalHotkeyEnabled, autoUpdateEnabled, immersiveMode,
+  };
+
   // 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);
         }
       }
@@ -509,86 +726,149 @@ export const useSettingsState = () => {
       if (e.key === STORAGE_KEY_TERM_SETTINGS && e.newValue) {
         try {
           const newSettings = JSON.parse(e.newValue) as TerminalSettings;
-          mergeIncomingTerminalSettings({ ...DEFAULT_TERMINAL_SETTINGS, ...newSettings });
+          mergeIncomingTerminalSettings(newSettings);
         } catch {
           // ignore parse errors
         }
       }
       // 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 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 !== s.sessionLogsEnabled) {
+          setSessionLogsEnabled(newValue);
+        }
+      }
+      if (e.key === STORAGE_KEY_SESSION_LOGS_DIR && e.newValue !== null) {
+        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 !== s.sessionLogsFormat
+        ) {
+          setSessionLogsFormat(e.newValue);
+        }
+      }
       // 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 !== 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);
+        }
+      }
+      // 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 !== 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 !== 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, editorWordWrap, 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_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;
@@ -603,11 +883,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]);
 
@@ -618,10 +900,7 @@ export const useSettingsState = () => {
 
   // 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');
@@ -629,56 +908,79 @@ 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) {
+      if (toggleWindowHotkey && globalHotkeyEnabled) {
         setHotkeyRegistrationError(null);
         bridge
           .registerGlobalHotkey(toggleWindowHotkey)
@@ -699,21 +1001,71 @@ export const useSettingsState = () => {
         });
       }
     }
-  }, [toggleWindowHotkey, notifySettingsChanged]);
+    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.
+  // This reconciles localStorage (renderer) with auto-update-pref.json (main)
+  // in case localStorage was cleared or is stale.
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+    void bridge?.getAutoUpdate?.().then((result) => {
+      if (result && typeof result.enabled === 'boolean') {
+        setAutoUpdateEnabled((prev) => {
+          if (prev === result.enabled) return prev;
+          // Sync localStorage with the main-process truth
+          localStorageAdapter.writeString(STORAGE_KEY_AUTO_UPDATE_ENABLED, result.enabled ? 'true' : 'false');
+          return result.enabled;
+        });
+      }
+    }).catch(() => { /* bridge unavailable */ });
+  }, []);
+
+  // Persist auto-update enabled setting.
+  // 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);
+    // Notify main process on user-initiated changes
+    const bridge = netcattyBridge.get();
+    bridge?.setAutoUpdate?.(autoUpdateEnabled).catch((err: unknown) => {
+      console.warn('[AutoUpdate] Failed to set auto-update:', err);
+    });
+  }, [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 => {
@@ -766,14 +1118,14 @@ export const useSettingsState = () => {
     localStorageAdapter.write(STORAGE_KEY_SYNC, config);
   }, []);
 
-  const currentTerminalTheme = useMemo(
-    () => TERMINAL_THEMES.find(t => t.id === terminalThemeId) || TERMINAL_THEMES[0],
-    [terminalThemeId]
-  );
+  // Subscribe to custom theme changes so editing in-place triggers re-render
+  const customThemes = useCustomThemes();
 
-  const currentTerminalFont = useMemo(
-    () => availableFonts.find(f => f.id === terminalFontFamilyId) || availableFonts[0],
-    [terminalFontFamilyId, availableFonts]
+  const currentTerminalTheme = useMemo(
+    () => TERMINAL_THEMES.find(t => t.id === terminalThemeId)
+      || customThemes.find(t => t.id === terminalThemeId)
+      || TERMINAL_THEMES[0],
+    [terminalThemeId, customThemes]
   );
 
   const updateTerminalSetting = useCallback(<K extends keyof TerminalSettings>(
@@ -783,9 +1135,16 @@ 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,
+    resolvedTheme,
     lightUiThemeId,
     setLightUiThemeId,
     darkUiThemeId,
@@ -805,7 +1164,6 @@ export const useSettingsState = () => {
     currentTerminalTheme,
     terminalFontFamilyId,
     setTerminalFontFamilyId,
-    currentTerminalFont,
     terminalFontSize,
     setTerminalFontSize,
     terminalSettings,
@@ -830,6 +1188,12 @@ export const useSettingsState = () => {
     setSftpShowHiddenFiles,
     sftpUseCompressedUpload,
     setSftpUseCompressedUpload,
+    sftpAutoOpenSidebar,
+    setSftpAutoOpenSidebar,
+    sftpDefaultViewMode,
+    setSftpDefaultViewMode,
+    sftpTransferConcurrency,
+    setSftpTransferConcurrency,
     // Editor Settings
     editorWordWrap,
     setEditorWordWrap: useCallback((enabled: boolean) => {
@@ -837,7 +1201,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,
@@ -850,6 +1213,26 @@ export const useSettingsState = () => {
     setToggleWindowHotkey,
     closeToTray,
     setCloseToTray,
+    autoUpdateEnabled,
+    setAutoUpdateEnabled,
     hotkeyRegistrationError,
+    globalHotkeyEnabled,
+    setGlobalHotkeyEnabled,
+    rehydrateAllFromStorage,
+    reapplyCurrentTheme,
+    immersiveMode,
+    setImmersiveMode,
+    workspaceFocusStyle,
+    setWorkspaceFocusStyle,
+    // Opaque version that changes when any synced setting changes, used by useAutoSync.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    settingsVersion: useMemo(() => Math.random(), [
+      theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent,
+      uiFontFamilyId, uiLanguage, customCSS,
+      terminalThemeId, terminalFontFamilyId, terminalFontSize, terminalSettings,
+      customKeyBindings, editorWordWrap,
+      sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload, sftpAutoOpenSidebar, sftpDefaultViewMode,
+      customThemes, immersiveMode, workspaceFocusStyle,
+    ]),
   };
 };

application/state/useSftpBackend.ts

@@ -197,6 +197,12 @@ export const useSftpBackend = () => {
     return bridge.showSaveDialog(defaultPath, filters);
   }, []);
 
+  const selectDirectory = async (title?: string, defaultPath?: string) => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.selectDirectory) return null;
+    return bridge.selectDirectory(title, defaultPath);
+  };
+
   const downloadSftpToTempAndOpen = useCallback(async (
     sftpId: string,
     remotePath: string,
@@ -210,9 +216,7 @@ export const useSftpBackend = () => {
     }
     
     // Download the file to temp
-    console.log("[SFTPBackend] Downloading file to temp", { sftpId, remotePath, fileName });
     const tempPath = await bridge.downloadSftpToTemp(sftpId, remotePath, fileName, options?.encoding);
-    console.log("[SFTPBackend] File downloaded to temp", { tempPath });
     
     // Register temp file for cleanup when SFTP session closes (regardless of auto-sync setting)
     if (bridge.registerTempFile) {
@@ -224,25 +228,18 @@ export const useSftpBackend = () => {
     }
     
     // Open with the selected application
-    console.log("[SFTPBackend] Opening with application", { tempPath, appPath });
     await bridge.openWithApplication(tempPath, appPath);
-    console.log("[SFTPBackend] Application launched");
     
     // Start file watching if enabled
     let watchId: string | undefined;
-    console.log("[SFTPBackend] Auto-sync enabled check", { enableWatch: options?.enableWatch, hasStartFileWatch: !!bridge.startFileWatch });
     if (options?.enableWatch && bridge.startFileWatch) {
       try {
-        console.log("[SFTPBackend] Starting file watch", { tempPath, remotePath, sftpId });
         const result = await bridge.startFileWatch(tempPath, remotePath, sftpId, options?.encoding);
         watchId = result.watchId;
-        console.log("[SFTPBackend] File watch started successfully", { watchId, tempPath, remotePath });
       } catch (err) {
         console.warn("[SFTPBackend] Failed to start file watch:", err);
         // Don't fail the operation if watching fails
       }
-    } else {
-      console.log("[SFTPBackend] File watching not enabled or not available");
     }
     
     return { localTempPath: tempPath, watchId };
@@ -278,6 +275,7 @@ export const useSftpBackend = () => {
     onTransferProgress,
     selectApplication,
     showSaveDialog,
+    selectDirectory,
     downloadSftpToTempAndOpen,
   };
 };

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,15 +17,16 @@ 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 {
   const stored = localStorageAdapter.read<FileAssociationsMap>(STORAGE_KEY_SFTP_FILE_ASSOCIATIONS);
-  console.log('[SftpFileAssociations] Loading from storage:', stored);
   if (stored) {
     const migrated: FileAssociationsMap = {};
     for (const [ext, value] of Object.entries(stored)) {
@@ -35,29 +36,20 @@ function loadFromStorage(): FileAssociationsMap {
         migrated[ext] = value as FileAssociationEntry;
       }
     }
-    console.log('[SftpFileAssociations] Migrated associations:', migrated);
     return migrated;
   }
   return {};
 }
 
-// Initialize from storage
 snapshotRef = { associations: loadFromStorage() };
 
 function saveToStorage(associations: FileAssociationsMap) {
-  console.log('[SftpFileAssociations] saveToStorage called with:', associations);
   localStorageAdapter.write(STORAGE_KEY_SFTP_FILE_ASSOCIATIONS, associations);
-  // Verify it was saved
-  const verify = localStorageAdapter.read(STORAGE_KEY_SFTP_FILE_ASSOCIATIONS);
-  console.log('[SftpFileAssociations] Verification read from storage:', verify);
 }
 
 function updateAssociations(newAssociations: FileAssociationsMap) {
-  console.log('[SftpFileAssociations] Updating associations:', newAssociations);
-  // Create new reference so useSyncExternalStore detects change
   snapshotRef = { associations: newAssociations };
   saveToStorage(newAssociations);
-  console.log('[SftpFileAssociations] Notifying', subscribers.size, 'subscribers');
   subscribers.forEach(callback => callback());
 }
 
@@ -70,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);
@@ -86,23 +117,49 @@ 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
   ) => {
-    console.log('[SftpFileAssociations] setOpenerForExtension called with:', { extension, openerType, systemApp });
-    console.log('[SftpFileAssociations] Current associations before update:', snapshotRef.associations);
     updateAssociations({
       ...snapshotRef.associations,
       [extension.toLowerCase()]: { openerType, systemApp },
@@ -119,16 +176,14 @@ export function useSftpFileAssociations() {
   }, []);
 
   /**
-   * Get all associations as an array
+   * Get all per-extension associations as an array.
    */
   const getAllAssociations = useCallback((): FileAssociation[] => {
-    const result = Object.entries(associations).map(([extension, entry]: [string, FileAssociationEntry]) => ({
+    return Object.entries(associations).map(([extension, entry]: [string, FileAssociationEntry]) => ({
       extension,
       openerType: entry.openerType,
       systemApp: entry.systemApp,
     }));
-    console.log('[SftpFileAssociations] getAllAssociations called, returning', result.length, 'items:', result);
-    return result;
   }, [associations]);
 
   /**
@@ -141,6 +196,9 @@ export function useSftpFileAssociations() {
   return {
     associations,
     getOpenerForFile,
+    getDefaultOpener,
+    setDefaultOpener,
+    removeDefaultOpener,
     setOpenerForExtension,
     removeAssociation,
     getAllAssociations,

application/state/useSftpFileOperations.ts

@@ -1,184 +0,0 @@
-/**
- * useSftpFileOperations - Shared file operations for SFTP components
- * 
- * This hook provides common file operations like open, edit, preview
- * that can be shared between SFTPModal and SftpView components.
- */
-
-import { useCallback, useState } from "react";
-import { getFileExtension, isTextFile, FileOpenerType } from "../../lib/sftpFileUtils";
-import { toast } from "../../components/ui/toast";
-import { useI18n } from "../i18n/I18nProvider";
-import { useSftpFileAssociations } from "./useSftpFileAssociations";
-
-export interface FileOperationsState {
-  // Text editor state
-  showTextEditor: boolean;
-  textEditorTarget: { name: string; fullPath: string } | null;
-  textEditorContent: string;
-  loadingTextContent: boolean;
-  
-  // File opener dialog state
-  showFileOpenerDialog: boolean;
-  fileOpenerTarget: { name: string; fullPath: string } | null;
-}
-
-export interface FileOperationsActions {
-  // Open file based on type/association
-  openFile: (fileName: string, fullPath: string) => void;
-  
-  // Edit text file
-  editFile: (
-    fileName: string, 
-    fullPath: string, 
-    readContent: () => Promise<string>
-  ) => Promise<void>;
-  
-  // Save text file
-  saveTextFile: (
-    content: string, 
-    writeContent: (path: string, content: string) => Promise<void>
-  ) => Promise<void>;
-  
-  // Handle file opener selection
-  handleFileOpenerSelect: (
-    openerType: FileOpenerType, 
-    setAsDefault: boolean,
-    readTextContent: () => Promise<string>,
-    readImageData: () => Promise<ArrayBuffer>
-  ) => Promise<void>;
-  
-  // Close modals
-  closeTextEditor: () => void;
-  closeFileOpenerDialog: () => void;
-  
-  // Check if file can be edited
-  canEditFile: (fileName: string) => boolean;
-}
-
-export interface UseSftpFileOperationsResult {
-  state: FileOperationsState;
-  actions: FileOperationsActions;
-}
-
-export function useSftpFileOperations(): UseSftpFileOperationsResult {
-  const { t } = useI18n();
-  const { getOpenerForFile, setOpenerForExtension } = useSftpFileAssociations();
-  
-  // Text editor state
-  const [showTextEditor, setShowTextEditor] = useState(false);
-  const [textEditorTarget, setTextEditorTarget] = useState<{ name: string; fullPath: string } | null>(null);
-  const [textEditorContent, setTextEditorContent] = useState("");
-  const [loadingTextContent, setLoadingTextContent] = useState(false);
-  
-  // File opener dialog state
-  const [showFileOpenerDialog, setShowFileOpenerDialog] = useState(false);
-  const [fileOpenerTarget, setFileOpenerTarget] = useState<{ name: string; fullPath: string } | null>(null);
-
-  const canEditFile = useCallback((fileName: string) => {
-    return isTextFile(fileName);
-  }, []);
-
-  const closeTextEditor = useCallback(() => {
-    setShowTextEditor(false);
-    setTextEditorTarget(null);
-    setTextEditorContent("");
-  }, []);
-
-  const closeFileOpenerDialog = useCallback(() => {
-    setShowFileOpenerDialog(false);
-    setFileOpenerTarget(null);
-  }, []);
-
-  const editFile = useCallback(async (
-    fileName: string,
-    fullPath: string,
-    readContent: () => Promise<string>
-  ) => {
-    try {
-      setLoadingTextContent(true);
-      setTextEditorTarget({ name: fileName, fullPath });
-      const content = await readContent();
-      setTextEditorContent(content);
-      setShowTextEditor(true);
-    } catch (e) {
-      toast.error(
-        e instanceof Error ? e.message : t("sftp.error.loadFailed"),
-        "SFTP",
-      );
-    } finally {
-      setLoadingTextContent(false);
-    }
-  }, [t]);
-
-  const saveTextFile = useCallback(async (
-    content: string,
-    writeContent: (path: string, content: string) => Promise<void>
-  ) => {
-    if (!textEditorTarget) return;
-    await writeContent(textEditorTarget.fullPath, content);
-  }, [textEditorTarget]);
-
-  const openFile = useCallback((fileName: string, fullPath: string) => {
-    const savedOpener = getOpenerForFile(fileName);
-
-    if (savedOpener) {
-      // User has saved an opener for this file type
-      // We'll just set the target and let the caller handle it
-      setFileOpenerTarget({ name: fileName, fullPath });
-      
-      // Return the opener type so caller knows which operation to perform
-      if (savedOpener === 'builtin-editor' && canEditFile(fileName)) {
-        // Don't show dialog, caller should call editFile
-        return 'edit' as const;
-      }
-    }
-    
-    // No saved opener, show the dialog
-    setFileOpenerTarget({ name: fileName, fullPath });
-    setShowFileOpenerDialog(true);
-    return 'dialog' as const;
-  }, [getOpenerForFile, canEditFile]);
-
-  const handleFileOpenerSelect = useCallback(async (
-    openerType: FileOpenerType,
-    setAsDefault: boolean,
-    readTextContent: () => Promise<string>,
-    _readImageData: () => Promise<ArrayBuffer>
-  ) => {
-    if (!fileOpenerTarget) return;
-
-    if (setAsDefault) {
-      const ext = getFileExtension(fileOpenerTarget.name);
-      if (ext !== 'file') {
-        setOpenerForExtension(ext, openerType);
-      }
-    }
-
-    setShowFileOpenerDialog(false);
-
-    if (openerType === 'builtin-editor') {
-      await editFile(fileOpenerTarget.name, fileOpenerTarget.fullPath, readTextContent);
-    }
-  }, [fileOpenerTarget, setOpenerForExtension, editFile]);
-
-  return {
-    state: {
-      showTextEditor,
-      textEditorTarget,
-      textEditorContent,
-      loadingTextContent,
-      showFileOpenerDialog,
-      fileOpenerTarget,
-    },
-    actions: {
-      openFile,
-      editFile,
-      saveTextFile,
-      handleFileOpenerSelect,
-      closeTextEditor,
-      closeFileOpenerDialog,
-      canEditFile,
-    },
-  };
-}

application/state/useSftpState.ts

@@ -36,7 +36,15 @@ export const useSftpState = (
   identities: Identity[],
   options?: SftpStateOptions
 ) => {
-  const tabsState = useSftpTabsState();
+  const createPane = useCallback(
+    (id?: string, showHiddenFiles = options?.defaultShowHiddenFiles ?? false) =>
+      createEmptyPane(id, showHiddenFiles),
+    [options?.defaultShowHiddenFiles],
+  );
+
+  const tabsState = useSftpTabsState({
+    defaultShowHiddenFiles: options?.defaultShowHiddenFiles,
+  });
   const {
     leftTabs,
     rightTabs,
@@ -49,6 +57,8 @@ export const useSftpState = (
     getActivePane,
     updateTab,
     updateActiveTab,
+    clearSelectionsExcept,
+    setTabShowHiddenFiles,
     addTab,
     closeTab,
     selectTab,
@@ -92,12 +102,50 @@ export const useSftpState = (
     }
   }, []);
 
+  const clearDirCacheEntry = useCallback((connectionId: string, path: string) => {
+    // Remove all encoding variants of this path from the cache
+    for (const key of dirCacheRef.current.keys()) {
+      if (key.startsWith(`${connectionId}::`) && key.endsWith(`::${path}`)) {
+        dirCacheRef.current.delete(key);
+      }
+    }
+  }, []);
+
+  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,
     right: false,
   });
 
+  // Map connectionId → cache key, set at connect time so each tab's
+  // navigateTo can use the correct cache key even when multiple tabs
+  // share the same hostId with different session-time overrides.
+  const connectionCacheKeyMapRef = useRef<Map<string, string>>(new Map());
+
   // Store last connected host info for reconnection
   const lastConnectedHostRef = useRef<{
     left: Host | "local" | null;
@@ -140,10 +188,12 @@ export const useSftpState = (
     dirCacheRef,
     sftpSessionsRef,
     lastConnectedHostRef,
+    connectionCacheKeyMapRef,
     reconnectingRef,
     makeCacheKey,
     clearCacheForConnection,
-    createEmptyPane,
+    createEmptyPane: createPane,
+    autoConnectLocalOnMount: options?.autoConnectLocalOnMount,
   });
 
   const {
@@ -158,12 +208,17 @@ export const useSftpState = (
     selectAll,
     getFilteredFiles,
     createDirectory,
+    createDirectoryAtPath,
     createFile,
+    createFileAtPath,
     deleteFiles,
     deleteFilesAtPath,
     renameFile,
+    renameFileAtPath,
+    moveEntriesToPath,
     changePermissions,
   } = useSftpPaneActions({
+    hosts,
     getActivePane,
     updateTab,
     updateActiveTab,
@@ -173,6 +228,7 @@ export const useSftpState = (
     dirCacheRef,
     sftpSessionsRef,
     lastConnectedHostRef,
+    connectionCacheKeyMapRef,
     reconnectingRef,
     makeCacheKey,
     clearCacheForConnection,
@@ -180,6 +236,7 @@ export const useSftpState = (
     listRemoteFiles,
     handleSessionError,
     isSessionError,
+    clearSelectionsExcept,
     dirCacheTtlMs: DIR_CACHE_TTL_MS,
   });
 
@@ -205,22 +262,36 @@ export const useSftpState = (
     [clearCacheForConnection, getActivePane, navigateTo, updateActiveTab],
   );
 
+  const setShowHiddenFiles = useCallback(
+    (side: "left" | "right", tabId: string, showHiddenFiles: boolean) => {
+      setTabShowHiddenFiles(side, tabId, showHiddenFiles);
+    },
+    [setTabShowHiddenFiles],
+  );
+
   const {
     transfers,
     conflicts,
     activeTransfersCount,
     startTransfer,
+    downloadToLocal,
     addExternalUpload,
     updateExternalUpload,
     cancelTransfer,
+    isTransferCancelled,
     retryTransfer,
     clearCompletedTransfers,
     dismissTransfer,
     resolveConflict,
   } = useSftpTransfers({
     getActivePane,
+    getPaneByConnectionId,
+    getTabByConnectionId,
+    updateTab,
     refresh,
+    clearCacheForConnection,
     sftpSessionsRef,
+    connectionCacheKeyMapRef,
     listLocalFiles,
     listRemoteFiles,
     handleSessionError,
@@ -232,14 +303,20 @@ export const useSftpState = (
     writeTextFile,
     downloadToTempAndOpen,
     uploadExternalFiles,
+    uploadExternalEntries,
     cancelExternalUpload,
     selectApplication,
+    activeFileWatchCountRef,
   } = useSftpExternalOperations({
     getActivePane,
     refresh,
     sftpSessionsRef,
+    connectionCacheKeyMapRef,
+    clearDirCacheEntry,
+    useCompressedUpload: options?.useCompressedUpload,
     addExternalUpload,
     updateExternalUpload,
+    isTransferCancelled,
     dismissExternalUpload: dismissTransfer,
   });
 
@@ -264,23 +341,31 @@ export const useSftpState = (
     toggleSelection,
     rangeSelect,
     clearSelection,
+    clearSelectionsExcept,
     selectAll,
     setFilter,
     setFilenameEncoding,
+    setShowHiddenFiles,
     createDirectory,
+    createDirectoryAtPath,
     createFile,
+    createFileAtPath,
     deleteFiles,
     deleteFilesAtPath,
     renameFile,
+    renameFileAtPath,
+    moveEntriesToPath,
     changePermissions,
     readTextFile,
     readBinaryFile,
     writeTextFile,
     downloadToTempAndOpen,
     uploadExternalFiles,
+    uploadExternalEntries,
     cancelExternalUpload,
     selectApplication,
     startTransfer,
+    downloadToLocal,
     addExternalUpload,
     updateExternalUpload,
     cancelTransfer,
@@ -289,6 +374,7 @@ export const useSftpState = (
     dismissTransfer,
     resolveConflict,
     getSftpIdForConnection,
+    reportSessionError: handleSessionError,
   });
   methodsRef.current = {
     getFilteredFiles,
@@ -309,23 +395,31 @@ export const useSftpState = (
     toggleSelection,
     rangeSelect,
     clearSelection,
+    clearSelectionsExcept,
     selectAll,
     setFilter,
     setFilenameEncoding,
+    setShowHiddenFiles,
     createDirectory,
+    createDirectoryAtPath,
     createFile,
+    createFileAtPath,
     deleteFiles,
     deleteFilesAtPath,
     renameFile,
+    renameFileAtPath,
+    moveEntriesToPath,
     changePermissions,
     readTextFile,
     readBinaryFile,
     writeTextFile,
     downloadToTempAndOpen,
     uploadExternalFiles,
+    uploadExternalEntries,
     cancelExternalUpload,
     selectApplication,
     startTransfer,
+    downloadToLocal,
     addExternalUpload,
     updateExternalUpload,
     cancelTransfer,
@@ -334,6 +428,7 @@ export const useSftpState = (
     dismissTransfer,
     resolveConflict,
     getSftpIdForConnection,
+    reportSessionError: handleSessionError,
   };
 
   // Create stable method wrappers that call through methodsRef
@@ -357,25 +452,38 @@ 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>) =>
       methodsRef.current.setFilenameEncoding(...args),
+    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),
     writeTextFile: (...args: Parameters<typeof writeTextFile>) => methodsRef.current.writeTextFile(...args),
     downloadToTempAndOpen: (...args: Parameters<typeof downloadToTempAndOpen>) => methodsRef.current.downloadToTempAndOpen(...args),
     uploadExternalFiles: (...args: Parameters<typeof uploadExternalFiles>) => methodsRef.current.uploadExternalFiles(...args),
+    uploadExternalEntries: (...args: Parameters<typeof uploadExternalEntries>) =>
+      methodsRef.current.uploadExternalEntries(...args),
     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),
@@ -384,7 +492,9 @@ 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),
-  }), []); // Empty deps - these wrappers never change
+    reportSessionError: (...args: Parameters<typeof handleSessionError>) => methodsRef.current.reportSessionError(...args),
+    activeFileWatchCountRef,
+  }), [activeFileWatchCountRef]); // activeFileWatchCountRef is a stable ref
 
   // Return object with stable method references but reactive state
   // State changes will cause re-renders, but method references stay stable

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

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
+
+/**
+ * Hook for persisting a string value to localStorage.
+ * @param storageKey - The key to use for localStorage
+ * @param fallback - The default value if no stored value exists
+ * @param validate - Optional function to validate stored value; returns fallback if invalid
+ * @returns A tuple of [value, setValue] similar to useState
+ */
+export const useStoredString = <T extends string = string>(
+    storageKey: string,
+    fallback: T,
+    validate?: (value: string) => value is T,
+) => {
+    const [value, setValue] = useState<T>(() => {
+        const stored = localStorageAdapter.readString(storageKey);
+        if (stored === null) return fallback;
+        if (validate) return validate(stored) ? stored : fallback;
+        return stored as T;
+    });
+
+    useEffect(() => {
+        localStorageAdapter.writeString(storageKey, value);
+    }, [storageKey, value]);
+
+    return [value, setValue] as const;
+};

application/state/useSyncState.ts

@@ -1,68 +0,0 @@
-import { useCallback, useState } from "react";
-import { loadFromGist, syncToGist } from "../../infrastructure/services/syncService";
-
-export type SyncStatus = "idle" | "success" | "error";
-
-export const useSyncState = () => {
-  const [isSyncing, setIsSyncing] = useState(false);
-  const [syncStatus, setSyncStatus] = useState<SyncStatus>("idle");
-
-  const resetSyncStatus = useCallback(() => {
-    setSyncStatus("idle");
-  }, []);
-
-  const verify = useCallback(async (token: string, gistId?: string) => {
-    setIsSyncing(true);
-    setSyncStatus("idle");
-    try {
-      if (gistId) {
-        await loadFromGist(token, gistId);
-      }
-      setSyncStatus("success");
-    } catch (err) {
-      setSyncStatus("error");
-      throw err;
-    } finally {
-      setIsSyncing(false);
-    }
-  }, []);
-
-  const upload = useCallback(
-    async (
-      token: string,
-      gistId: string | undefined,
-      data: Parameters<typeof syncToGist>[2],
-    ) => {
-      setIsSyncing(true);
-      setSyncStatus("idle");
-      try {
-        const newGistId = await syncToGist(token, gistId, data);
-        setSyncStatus("success");
-        return newGistId;
-      } catch (err) {
-        setSyncStatus("error");
-        throw err;
-      } finally {
-        setIsSyncing(false);
-      }
-    },
-    [],
-  );
-
-  const download = useCallback(async (token: string, gistId: string) => {
-    setIsSyncing(true);
-    setSyncStatus("idle");
-    try {
-      const data = await loadFromGist(token, gistId);
-      setSyncStatus("success");
-      return data;
-    } catch (err) {
-      setSyncStatus("error");
-      throw err;
-    } finally {
-      setIsSyncing(false);
-    }
-  }, []);
-
-  return { isSyncing, syncStatus, resetSyncStatus, verify, upload, download };
-};

application/state/useTerminalBackend.ts

@@ -78,19 +78,25 @@ export const useTerminalBackend = () => {
     bridge?.closeSession?.(sessionId);
   }, []);
 
+  const setSessionEncoding = useCallback(async (sessionId: string, encoding: string) => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.setSessionEncoding) return { ok: false, encoding };
+    return bridge.setSessionEncoding(sessionId, encoding);
+  }, []);
+
   const onSessionData = useCallback((sessionId: string, cb: (data: string) => void) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.onSessionData) throw new Error("onSessionData unavailable");
     return bridge.onSessionData(sessionId, cb);
   }, []);
 
-  const onSessionExit = useCallback((sessionId: string, cb: (evt: { exitCode?: number; signal?: number }) => void) => {
+  const onSessionExit = useCallback((sessionId: string, cb: (evt: { exitCode?: number; signal?: number; error?: string; reason?: "exited" | "error" | "timeout" | "closed" }) => void) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.onSessionExit) throw new Error("onSessionExit unavailable");
     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);
   }, []);
@@ -148,6 +154,7 @@ export const useTerminalBackend = () => {
     writeToSession,
     resizeSession,
     closeSession,
+    setSessionEncoding,
     onSessionData,
     onSessionExit,
     onChainProgress,

application/state/useUpdateCheck.ts

@@ -1,23 +1,26 @@
 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 } 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
 const UPDATE_CHECK_INTERVAL_MS = 60 * 60 * 1000;
-// Delay startup check to avoid slowing down app launch
-const STARTUP_CHECK_DELAY_MS = 5000;
+// Delay startup check to avoid slowing down app launch.
+// 8s gives electron-updater's startAutoCheck(5000) time to emit
+// 'update-available' first.  The `onUpdateAvailable` handler also cancels
+// any pending startup timeout, so even on slow networks where the event
+// 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
-const debugLog = (...args: unknown[]) => {
-  if (IS_UPDATE_DEMO_MODE || (typeof window !== 'undefined' && window.localStorage?.getItem('debug.updateCheck') === '1')) {
-    console.log('[UpdateCheck]', ...args);
-  }
-};
+// Debug logging for update checks (no-op in production)
+const debugLog = (..._args: unknown[]) => {};
+
+export type AutoDownloadStatus = 'idle' | 'downloading' | 'ready' | 'error';
+
+export type ManualCheckStatus = 'idle' | 'checking' | 'available' | 'up-to-date' | 'error';
 
 export interface UpdateState {
   isChecking: boolean;
@@ -26,6 +29,12 @@ export interface UpdateState {
   latestRelease: ReleaseInfo | null;
   error: string | null;
   lastCheckedAt: number | null;
+  // Auto-download state — driven by electron-updater IPC events
+  autoDownloadStatus: AutoDownloadStatus;
+  downloadPercent: number;
+  downloadError: string | null;
+  /** Manual check state — driven by user clicking "Check for Updates" */
+  manualCheckStatus: ManualCheckStatus;
 }
 
 export interface UseUpdateCheckResult {
@@ -33,6 +42,9 @@ export interface UseUpdateCheckResult {
   checkNow: () => Promise<UpdateCheckResult | null>;
   dismissUpdate: () => void;
   openReleasePage: () => void;
+  installUpdate: () => void;
+  startDownload: () => void;
+  isUpdateDemoMode: boolean;
 }
 
 /**
@@ -41,7 +53,13 @@ export interface UseUpdateCheckResult {
  * - Respects dismissed version to avoid nagging
  * - Provides manual check capability
  */
-export function useUpdateCheck(): UseUpdateCheckResult {
+export function useUpdateCheck(options?: { autoUpdateEnabled?: boolean }): UseUpdateCheckResult {
+  // Accept auto-update toggle from the caller (e.g. useSettingsState) so it
+  // reacts immediately in the same window. Falls back to reading localStorage
+  // when no caller provides the value (e.g. in non-settings contexts).
+  const autoUpdateEnabled = options?.autoUpdateEnabled ??
+    (localStorageAdapter.readString(STORAGE_KEY_AUTO_UPDATE_ENABLED) !== 'false');
+
   const [updateState, setUpdateState] = useState<UpdateState>({
     isChecking: false,
     hasUpdate: false,
@@ -49,11 +67,44 @@ export function useUpdateCheck(): UseUpdateCheckResult {
     latestRelease: null,
     error: null,
     lastCheckedAt: null,
+    autoDownloadStatus: 'idle',
+    downloadPercent: 0,
+    downloadError: null,
+    manualCheckStatus: 'idle',
   });
 
   const hasCheckedOnStartupRef = useRef(false);
   const isCheckingRef = useRef(false);
   const startupCheckTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Track current version in a ref to avoid stale closure in checkNow
+  const currentVersionRef = useRef(updateState.currentVersion);
+  // Track autoDownloadStatus in a ref so checkNow always reads the latest value
+  const autoDownloadStatusRef = useRef<AutoDownloadStatus>('idle');
+  // Timer ref for auto-resetting manualCheckStatus='up-to-date' back to 'idle'
+  const manualCheckResetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Flag: true when we suppressed auto-download because the version was dismissed.
+  // Used to distinguish "idle because dismissed" from "idle because not hydrated yet"
+  // in the progress/downloaded/error callbacks.
+  const dismissedAutoDownloadRef = useRef(false);
+
+  // Keep currentVersionRef in sync so checkNow always reads the latest version
+  useEffect(() => {
+    currentVersionRef.current = updateState.currentVersion;
+  }, [updateState.currentVersion]);
+
+  // Keep autoDownloadStatusRef in sync so checkNow always reads the latest download state
+  useEffect(() => {
+    autoDownloadStatusRef.current = updateState.autoDownloadStatus;
+  }, [updateState.autoDownloadStatus]);
+
+  // Cleanup: clear any pending manualCheckStatus reset timer on unmount
+  useEffect(() => {
+    return () => {
+      if (manualCheckResetTimeoutRef.current) {
+        clearTimeout(manualCheckResetTimeoutRef.current);
+      }
+    };
+  }, []);
 
   // Get current app version
   useEffect(() => {
@@ -71,6 +122,145 @@ export function useUpdateCheck(): UseUpdateCheckResult {
     void loadVersion();
   }, []);
 
+  // Hydrate auto-download status from the main process so windows opened
+  // after the download started (e.g. Settings) immediately reflect the
+  // current state instead of showing stale 'idle'.
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+    void bridge?.getUpdateStatus?.().then((snapshot) => {
+      if (!snapshot || snapshot.status === 'idle') return;
+
+      // Respect dismissed versions: if the user dismissed this release,
+      // don't surface download progress/ready state in late-opening windows.
+      // Also set the dismissed ref so subsequent IPC events are suppressed.
+      const dismissedVersion = localStorageAdapter.readString(STORAGE_KEY_UPDATE_DISMISSED_VERSION);
+      if (snapshot.version && snapshot.version === dismissedVersion) {
+        dismissedAutoDownloadRef.current = true;
+        return;
+      }
+
+      // 'available' means an update was found but auto-download is disabled.
+      // Surface the version info (hasUpdate + latestRelease) but keep
+      // autoDownloadStatus at 'idle' so the manual download path shows.
+      const isAvailableOnly = snapshot.status === 'available';
+
+      setUpdateState((prev) => {
+        // Don't overwrite if the renderer already has a newer state
+        if (prev.autoDownloadStatus !== 'idle') return prev;
+        return {
+          ...prev,
+          hasUpdate: isAvailableOnly ? true : prev.hasUpdate,
+          autoDownloadStatus: isAvailableOnly ? 'idle' : snapshot.status,
+          downloadPercent: isAvailableOnly ? 0 : snapshot.percent,
+          downloadError: isAvailableOnly ? null : snapshot.error,
+          // Use snapshot version if no release data or if versions differ
+          latestRelease: (!prev.latestRelease || (snapshot.version && prev.latestRelease.version !== snapshot.version)) ? (snapshot.version ? {
+            version: snapshot.version,
+            tagName: `v${snapshot.version}`,
+            name: `v${snapshot.version}`,
+            body: '',
+            htmlUrl: '',
+            publishedAt: new Date().toISOString(),
+            assets: [],
+          } : prev.latestRelease) : prev.latestRelease,
+        };
+      });
+    });
+  }, []);
+
+  // Subscribe to electron-updater auto-download IPC events.
+  // These fire automatically when autoDownload=true in the main process.
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+
+    // When electron-updater confirms no update in its feed, don't write
+    // STORAGE_KEY_UPDATE_LAST_CHECK — that would throttle the GitHub API
+    // fallback for an hour.  Let performCheck write it on success so the
+    // GitHub check can still discover releases not yet in the updater feed.
+    const cleanupNotAvailable = bridge?.onUpdateNotAvailable?.(() => {
+      // No-op for now — the GitHub fallback will handle lastCheckedAt.
+    });
+
+    const cleanupAvailable = bridge?.onUpdateAvailable?.((info) => {
+      // Cancel any pending startup GitHub API check — electron-updater is
+      // now authoritative and we don't want a duplicate toast.
+      if (startupCheckTimeoutRef.current) {
+        clearTimeout(startupCheckTimeoutRef.current);
+        startupCheckTimeoutRef.current = null;
+      }
+
+      // Check if this version was dismissed by the user
+      const dismissedVersion = localStorageAdapter.readString(STORAGE_KEY_UPDATE_DISMISSED_VERSION);
+      const isDismissed = dismissedVersion === info.version;
+      if (isDismissed) {
+        dismissedAutoDownloadRef.current = true;
+      }
+      // When auto-update is disabled, autoDownload=false in the main process
+      // so no download will start. Don't transition to 'downloading' or the
+      // UI will be stuck at 0%. Keep status idle and let the manual download
+      // link surface instead.
+      const isAutoUpdateOff = localStorageAdapter.readString(STORAGE_KEY_AUTO_UPDATE_ENABLED) === 'false';
+      const shouldTrackDownload = !isDismissed && !isAutoUpdateOff;
+      setUpdateState((prev) => ({
+        ...prev,
+        hasUpdate: !isDismissed,
+        autoDownloadStatus: shouldTrackDownload ? 'downloading' : prev.autoDownloadStatus,
+        downloadPercent: shouldTrackDownload ? 0 : prev.downloadPercent,
+        downloadError: shouldTrackDownload ? null : prev.downloadError,
+        // Use electron-updater's version if GitHub API hasn't resolved yet or
+        // if the updater reports a different version than the cached release.
+        latestRelease: (!prev.latestRelease || prev.latestRelease.version !== info.version) ? {
+          version: info.version,
+          tagName: `v${info.version}`,
+          name: `v${info.version}`,
+          body: info.releaseNotes || '',
+          htmlUrl: '',
+          publishedAt: info.releaseDate || new Date().toISOString(),
+          assets: [],
+        } : prev.latestRelease,
+      }));
+    });
+
+    const cleanupProgress = bridge?.onUpdateDownloadProgress?.((p) => {
+      // If we suppressed the download for a dismissed version, ignore progress.
+      if (dismissedAutoDownloadRef.current) return;
+      setUpdateState((prev) => ({
+        ...prev,
+        autoDownloadStatus: 'downloading',
+        downloadPercent: Math.round(p.percent),
+      }));
+    });
+
+    const cleanupDownloaded = bridge?.onUpdateDownloaded?.(() => {
+      // If the download was for a dismissed version, don't transition to
+      // 'ready' — that would trigger the "Update ready" toast.
+      if (dismissedAutoDownloadRef.current) return;
+      setUpdateState((prev) => ({
+        ...prev,
+        autoDownloadStatus: 'ready',
+        downloadPercent: 100,
+      }));
+    });
+
+    const cleanupError = bridge?.onUpdateError?.((payload) => {
+      // If we suppressed the download for a dismissed version, ignore errors.
+      if (dismissedAutoDownloadRef.current) return;
+      setUpdateState((prev) => ({
+        ...prev,
+        autoDownloadStatus: 'error',
+        downloadError: payload.error,
+      }));
+    });
+
+    return () => {
+      cleanupNotAvailable?.();
+      cleanupAvailable?.();
+      cleanupProgress?.();
+      cleanupDownloaded?.();
+      cleanupError?.();
+    };
+  }, []);
+
   const performCheck = useCallback(async (currentVersion: string): Promise<UpdateCheckResult | null> => {
     debugLog('performCheck called', { currentVersion, IS_UPDATE_DEMO_MODE });
     
@@ -119,8 +309,16 @@ export function useUpdateCheck(): UseUpdateCheckResult {
       debugLog('Latest release version:', result.latestRelease?.version);
       const now = Date.now();
 
-      // Save last check time
-      localStorageAdapter.writeNumber(STORAGE_KEY_UPDATE_LAST_CHECK, now);
+      // Only advance last-check time and cache release on successful checks.
+      // Failed checks (result.error set, no latestRelease) must not update
+      // the timestamp — otherwise stale cached release data persists for an
+      // hour while the throttle prevents re-checking.
+      if (!result.error) {
+        localStorageAdapter.writeNumber(STORAGE_KEY_UPDATE_LAST_CHECK, now);
+        if (result.latestRelease) {
+          localStorageAdapter.writeString(STORAGE_KEY_UPDATE_LATEST_RELEASE, JSON.stringify(result.latestRelease));
+        }
+      }
 
       // Check if this version was dismissed
       const dismissedVersion = localStorageAdapter.readString(STORAGE_KEY_UPDATE_DISMISSED_VERSION);
@@ -156,11 +354,135 @@ export function useUpdateCheck(): UseUpdateCheckResult {
     }
   }, []);
 
-  const checkNow = useCallback(async () => {
-    // In demo mode, use fake version to allow checking
-    const version = IS_UPDATE_DEMO_MODE ? '0.0.1' : updateState.currentVersion;
-    return performCheck(version);
-  }, [performCheck, updateState.currentVersion]);
+  const checkNow = useCallback(async (): Promise<UpdateCheckResult | null> => {
+    // Prevent concurrent checks (performCheck owns isCheckingRef)
+    if (isCheckingRef.current) {
+      debugLog('checkNow: already checking, skipping');
+      return null;
+    }
+
+    // Cancel any pending startup auto-check to avoid racing with
+    // electron-updater's startAutoCheck — concurrent checkForUpdates()
+    // calls are rejected by electron-updater and would surface a false error.
+    if (startupCheckTimeoutRef.current) {
+      clearTimeout(startupCheckTimeoutRef.current);
+      startupCheckTimeoutRef.current = null;
+    }
+
+    // Clear any pending "up-to-date" auto-reset timer
+    if (manualCheckResetTimeoutRef.current) {
+      clearTimeout(manualCheckResetTimeoutRef.current);
+      manualCheckResetTimeoutRef.current = null;
+    }
+
+    // Reset dismissed flag so a manual retry can surface download events again
+    dismissedAutoDownloadRef.current = false;
+
+    // Immediately reflect 'checking' in the UI; reset download error so the user can retry
+    setUpdateState((prev) => {
+      // Eagerly sync the ref so the checkForUpdate gate below reads the updated value
+      if (prev.autoDownloadStatus === 'error') {
+        autoDownloadStatusRef.current = 'idle';
+      }
+      return {
+        ...prev,
+        manualCheckStatus: 'checking',
+        error: null,
+        // P2: reset download error state so auto-download can retry on next available update
+        autoDownloadStatus: prev.autoDownloadStatus === 'error' ? 'idle' : prev.autoDownloadStatus,
+        downloadError: prev.autoDownloadStatus === 'error' ? null : prev.downloadError,
+      };
+    });
+
+    // Skip check for dev/invalid builds (demo mode overrides to '0.0.1' inside performCheck)
+    const effectiveVersion = IS_UPDATE_DEMO_MODE ? '0.0.1' : currentVersionRef.current;
+    if (!effectiveVersion || effectiveVersion === '0.0.0') {
+      // Dev/invalid build — can't determine update status, reset to idle
+      setUpdateState((prev) => ({
+        ...prev,
+        manualCheckStatus: 'idle',
+      }));
+      return null;
+    }
+
+    // Delegate to performCheck (GitHub API) — completely independent of
+    // electron-updater's startAutoCheck() in the main process.
+    // performCheck sets isCheckingRef, isChecking, hasUpdate, latestRelease.
+    const result = await performCheck(effectiveVersion);
+
+    // Determine manual check status.  performCheck already suppressed dismissed
+    // versions in state (hasUpdate=false), so we must respect that here too —
+    // otherwise a dismissed release would be reported as 'available' and could
+    // trigger a background download via checkForUpdate below.
+    const dismissedVersion = localStorageAdapter.readString(STORAGE_KEY_UPDATE_DISMISSED_VERSION);
+    const isAvailable = result !== null && !result.error && result.hasUpdate &&
+      result.latestRelease?.version !== dismissedVersion;
+    const nextStatus: ManualCheckStatus =
+      result === null || result.error ? 'error' : isAvailable ? 'available' : 'up-to-date';
+
+    setUpdateState((prev) => ({
+      ...prev,
+      manualCheckStatus: nextStatus,
+    }));
+
+    if (nextStatus === 'up-to-date') {
+      // Auto-reset "up-to-date" badge back to idle after 5s
+      manualCheckResetTimeoutRef.current = setTimeout(() => {
+        setUpdateState((prev) => ({ ...prev, manualCheckStatus: 'idle' }));
+      }, 5000);
+    } else if ((nextStatus === 'available' || nextStatus === 'error') && autoDownloadStatusRef.current === 'idle') {
+      // Trigger electron-updater as a fallback. This covers two cases:
+      // 1. 'available': GitHub found an update but electron-updater hasn't
+      //    started a download yet — kick it off.
+      // 2. 'error': GitHub API failed (blocked/rate-limited), but the
+      //    electron-updater feed may still be reachable. Without this,
+      //    environments where api.github.com is blocked would never attempt
+      //    the auto-download path.
+      void netcattyBridge.get()?.checkForUpdate?.().then((res) => {
+        if (res?.error && res?.supported !== false) {
+          // Surface actual download-feed errors; unsupported platforms
+          // (res.supported === false) should keep autoDownloadStatus at
+          // 'idle' so the manual download link shows.
+          setUpdateState((prev) => ({
+            ...prev,
+            autoDownloadStatus: 'error',
+            downloadError: res.error,
+          }));
+        } else if (res?.checking) {
+          // Another check is already in flight — don't change status; the
+          // in-flight check will resolve via IPC events.
+        } else if (nextStatus === 'error' && res?.available) {
+          // GitHub API failed but electron-updater found an update.
+          // Respect dismissed versions before surfacing.
+          const dismissed = localStorageAdapter.readString(STORAGE_KEY_UPDATE_DISMISSED_VERSION);
+          if (res.version && res.version === dismissed) {
+            // User dismissed this version — don't re-surface
+          } else {
+            setUpdateState((prev) => ({
+              ...prev,
+              manualCheckStatus: 'available',
+              hasUpdate: true,
+              error: null,
+            }));
+          }
+        } else if (nextStatus === 'error' && !res?.error && !res?.available) {
+          // GitHub API failed but electron-updater says no update available.
+          // Clear the error status so Settings doesn't stay stuck in error state.
+          setUpdateState((prev) => ({
+            ...prev,
+            manualCheckStatus: 'up-to-date',
+          }));
+          manualCheckResetTimeoutRef.current = setTimeout(() => {
+            setUpdateState((prev) => ({ ...prev, manualCheckStatus: 'idle' }));
+          }, 5000);
+        }
+      }).catch(() => {
+        // Bridge unavailable — ignore; the manual download link remains visible
+      });
+    }
+
+    return result;
+  }, [performCheck]);
 
   const dismissUpdate = useCallback(() => {
     if (updateState.latestRelease?.version) {
@@ -189,6 +511,50 @@ export function useUpdateCheck(): UseUpdateCheckResult {
     window.open(url, '_blank', 'noopener,noreferrer');
   }, [updateState.latestRelease]);
 
+  const installUpdate = useCallback(() => {
+    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);
@@ -219,12 +585,12 @@ export function useUpdateCheck(): UseUpdateCheckResult {
     if (IS_UPDATE_DEMO_MODE) {
       return;
     }
-    
-    debugLog('Version check effect', { 
-      hasChecked: hasCheckedOnStartupRef.current, 
+
+    debugLog('Version check effect', {
+      hasChecked: hasCheckedOnStartupRef.current,
       currentVersion: updateState.currentVersion
     });
-    
+
     if (hasCheckedOnStartupRef.current) {
       return;
     }
@@ -233,8 +599,38 @@ export function useUpdateCheck(): UseUpdateCheckResult {
       return;
     }
 
-    // Check if we've checked recently
+    // Hydrate cached release info so update status is visible across windows.
+    // When auto-update is disabled, hydrate release data (for the Settings UI)
+    // but don't set hasUpdate (which would trigger the toast in App.tsx).
     const lastCheck = localStorageAdapter.readNumber(STORAGE_KEY_UPDATE_LAST_CHECK);
+    if (lastCheck) {
+      const cachedRelease = localStorageAdapter.readString(STORAGE_KEY_UPDATE_LATEST_RELEASE);
+      if (cachedRelease) {
+        try {
+          const release = JSON.parse(cachedRelease) as ReleaseInfo;
+          const dismissedVersion = localStorageAdapter.readString(STORAGE_KEY_UPDATE_DISMISSED_VERSION);
+          const isNewer = updateState.currentVersion.localeCompare(release.version, undefined, { numeric: true, sensitivity: 'base' }) < 0;
+          const showUpdate = isNewer && release.version !== dismissedVersion;
+          setUpdateState((prev) => ({
+            ...prev,
+            latestRelease: prev.latestRelease ?? release,
+            hasUpdate: prev.hasUpdate || showUpdate,
+            lastCheckedAt: lastCheck,
+          }));
+        } catch {
+          // Ignore corrupted cache
+        }
+      }
+    }
+
+    // Respect auto-update toggle — skip automatic check when disabled.
+    // Don't set hasCheckedOnStartupRef so re-enabling (which changes the
+    // autoUpdateEnabled dependency) can re-trigger this effect.
+    if (!autoUpdateEnabled) {
+      return;
+    }
+
+    // Check if we've checked recently
     const now = Date.now();
     if (lastCheck && now - lastCheck < UPDATE_CHECK_INTERVAL_MS) {
       hasCheckedOnStartupRef.current = true;
@@ -244,7 +640,43 @@ export function useUpdateCheck(): UseUpdateCheckResult {
     hasCheckedOnStartupRef.current = true;
     debugLog('Starting delayed update check for version:', updateState.currentVersion);
 
-    startupCheckTimeoutRef.current = setTimeout(() => {
+    startupCheckTimeoutRef.current = setTimeout(async () => {
+      // Re-check the toggle at fire time — the user may have toggled it
+      // after the timer was scheduled.
+      const stillEnabled = localStorageAdapter.readString(STORAGE_KEY_AUTO_UPDATE_ENABLED);
+      if (stillEnabled === 'false') {
+        debugLog('Skipping startup check — auto-update disabled after timer was scheduled');
+        return;
+      }
+      // If electron-updater's auto-check already started a download, skip the
+      // redundant GitHub API check to avoid duplicate toast notifications.
+      if (autoDownloadStatusRef.current !== 'idle') {
+        debugLog('Skipping startup check — auto-download already active');
+        return;
+      }
+      // If the main process check is still in flight, reschedule the
+      // fallback instead of permanently skipping it — the auto-check may
+      // fail silently (check-phase errors aren't broadcast to the renderer).
+      try {
+        const snapshot = await netcattyBridge.get()?.getUpdateStatus?.();
+        if (snapshot?.isChecking) {
+          debugLog('Main process check still in flight — rescheduling fallback');
+          startupCheckTimeoutRef.current = setTimeout(async () => {
+            if (autoDownloadStatusRef.current !== 'idle') return;
+            // Re-check if the main process check is still running to avoid
+            // duplicate notifications on very slow networks.
+            try {
+              const snap = await netcattyBridge.get()?.getUpdateStatus?.();
+              if (snap?.isChecking || (snap?.status && snap.status !== 'idle')) return;
+            } catch { /* fall through */ }
+            debugLog('=== Rescheduled fallback check triggered ===');
+            void performCheck(updateState.currentVersion);
+          }, 5000);
+          return;
+        }
+      } catch {
+        // Bridge unavailable — fall through to GitHub check
+      }
       debugLog('=== Delayed check triggered ===');
       void performCheck(updateState.currentVersion);
     }, STARTUP_CHECK_DELAY_MS);
@@ -254,12 +686,15 @@ export function useUpdateCheck(): UseUpdateCheckResult {
         clearTimeout(startupCheckTimeoutRef.current);
       }
     };
-  }, [updateState.currentVersion, performCheck]);
+  }, [updateState.currentVersion, autoUpdateEnabled, performCheck]);
 
   return {
     updateState,
     checkNow,
     dismissUpdate,
     openReleasePage,
+    installUpdate,
+    startDownload,
+    isUpdateDemoMode: IS_UPDATE_DEMO_MODE,
   };
 }

application/state/useVaultState.ts

@@ -44,6 +44,7 @@ type ExportableVaultData = {
   identities?: Identity[];
   snippets: Snippet[];
   customGroups: string[];
+  snippetPackages?: string[];
   knownHosts?: KnownHost[];
 };
 
@@ -557,9 +558,10 @@ export const useVaultState = () => {
       identities,
       snippets,
       customGroups,
+      snippetPackages,
       knownHosts,
     }),
-    [hosts, keys, identities, snippets, customGroups, knownHosts],
+    [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts],
   );
 
   const importData = useCallback(
@@ -569,6 +571,7 @@ export const useVaultState = () => {
       if (payload.identities) updateIdentities(payload.identities);
       if (payload.snippets) updateSnippets(payload.snippets);
       if (payload.customGroups) updateCustomGroups(payload.customGroups);
+      if (payload.snippetPackages) updateSnippetPackages(payload.snippetPackages);
       if (payload.knownHosts) updateKnownHosts(payload.knownHosts);
     },
     [
@@ -577,6 +580,7 @@ export const useVaultState = () => {
       updateIdentities,
       updateSnippets,
       updateCustomGroups,
+      updateSnippetPackages,
       updateKnownHosts,
     ],
   );

application/syncPayload.ts

@@ -0,0 +1,315 @@
+/**
+ * Sync Payload Builders — Single source of truth for constructing and applying
+ * the encrypted cloud-sync payload.
+ *
+ * Both the main window (App.tsx) and the settings window (SettingsSyncTab.tsx)
+ * must use these helpers to guarantee every field is included and no data is
+ * silently dropped.
+ */
+
+import type {
+  Host,
+  Identity,
+  KnownHost,
+  PortForwardingRule,
+  SftpBookmark,
+  Snippet,
+  SSHKey,
+} 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,
+  STORAGE_KEY_UI_THEME_DARK,
+  STORAGE_KEY_ACCENT_MODE,
+  STORAGE_KEY_COLOR,
+  STORAGE_KEY_UI_FONT_FAMILY,
+  STORAGE_KEY_UI_LANGUAGE,
+  STORAGE_KEY_CUSTOM_CSS,
+  STORAGE_KEY_TERM_THEME,
+  STORAGE_KEY_TERM_FONT_FAMILY,
+  STORAGE_KEY_TERM_FONT_SIZE,
+  STORAGE_KEY_TERM_SETTINGS,
+  STORAGE_KEY_CUSTOM_KEY_BINDINGS,
+  STORAGE_KEY_EDITOR_WORD_WRAP,
+  STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR,
+  STORAGE_KEY_SFTP_AUTO_SYNC,
+  STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES,
+  STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD,
+  STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR,
+  STORAGE_KEY_SFTP_GLOBAL_BOOKMARKS,
+  STORAGE_KEY_CUSTOM_THEMES,
+  STORAGE_KEY_IMMERSIVE_MODE,
+} from '../infrastructure/config/storageKeys';
+
+// ---------------------------------------------------------------------------
+// Input types
+// ---------------------------------------------------------------------------
+
+/** All vault-owned data that participates in cloud sync. */
+export interface SyncableVaultData {
+  hosts: Host[];
+  keys: SSHKey[];
+  identities: Identity[];
+  snippets: Snippet[];
+  customGroups: string[];
+  snippetPackages?: string[];
+  knownHosts: KnownHost[];
+}
+
+/** Callbacks used by `applySyncPayload` to import data into local state. */
+interface SyncPayloadImporters {
+  /** Import vault data (hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts). */
+  importVaultData: (jsonString: string) => void;
+  /** Import port-forwarding rules (lives outside the vault hook). */
+  importPortForwardingRules?: (rules: PortForwardingRule[]) => void;
+  /** Called after synced settings have been written to localStorage. */
+  onSettingsApplied?: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Settings sync helpers
+// ---------------------------------------------------------------------------
+
+/** Terminal settings keys that are safe to sync (platform-agnostic). */
+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',
+  'autocompleteEnabled', 'autocompleteGhostText', 'autocompletePopupMenu',
+  'autocompleteDebounceMs', 'autocompleteMinChars', 'autocompleteMaxSuggestions',
+] as const;
+
+/**
+ * Collect all syncable settings from localStorage.
+ */
+export function collectSyncableSettings(): SyncPayload['settings'] {
+  const settings: SyncPayload['settings'] = {};
+
+  // Theme & Appearance
+  const theme = localStorageAdapter.readString(STORAGE_KEY_THEME);
+  if (theme === 'light' || theme === 'dark' || theme === 'system') settings.theme = theme;
+  const lightUi = localStorageAdapter.readString(STORAGE_KEY_UI_THEME_LIGHT);
+  if (lightUi) settings.lightUiThemeId = lightUi;
+  const darkUi = localStorageAdapter.readString(STORAGE_KEY_UI_THEME_DARK);
+  if (darkUi) settings.darkUiThemeId = darkUi;
+  const accentMode = localStorageAdapter.readString(STORAGE_KEY_ACCENT_MODE);
+  if (accentMode === 'theme' || accentMode === 'custom') settings.accentMode = accentMode;
+  const accent = localStorageAdapter.readString(STORAGE_KEY_COLOR);
+  if (accent) settings.customAccent = accent;
+  const uiFont = localStorageAdapter.readString(STORAGE_KEY_UI_FONT_FAMILY);
+  if (uiFont) settings.uiFontFamilyId = uiFont;
+  const lang = localStorageAdapter.readString(STORAGE_KEY_UI_LANGUAGE);
+  if (lang) settings.uiLanguage = lang;
+  const css = localStorageAdapter.readString(STORAGE_KEY_CUSTOM_CSS);
+  if (css != null) settings.customCSS = css;
+
+  // Terminal
+  const termTheme = localStorageAdapter.readString(STORAGE_KEY_TERM_THEME);
+  if (termTheme) settings.terminalTheme = termTheme;
+  const termFont = localStorageAdapter.readString(STORAGE_KEY_TERM_FONT_FAMILY);
+  if (termFont) settings.terminalFontFamily = termFont;
+  const termSize = localStorageAdapter.readNumber(STORAGE_KEY_TERM_FONT_SIZE);
+  if (termSize != null) settings.terminalFontSize = termSize;
+
+  // Terminal settings (syncable subset only)
+  const termSettingsRaw = localStorageAdapter.readString(STORAGE_KEY_TERM_SETTINGS);
+  if (termSettingsRaw) {
+    try {
+      const full = JSON.parse(termSettingsRaw);
+      const subset: Record<string, unknown> = {};
+      for (const key of SYNCABLE_TERMINAL_KEYS) {
+        if (key in full) subset[key] = full[key];
+      }
+      if (Object.keys(subset).length > 0) settings.terminalSettings = subset;
+    } catch { /* ignore corrupt data */ }
+  }
+
+  // Custom terminal themes
+  const customThemesRaw = localStorageAdapter.readString(STORAGE_KEY_CUSTOM_THEMES);
+  if (customThemesRaw) {
+    try {
+      const parsed = JSON.parse(customThemesRaw);
+      if (Array.isArray(parsed)) settings.customTerminalThemes = parsed;
+    } catch { /* ignore */ }
+  }
+
+  // Keyboard
+  const kb = localStorageAdapter.readString(STORAGE_KEY_CUSTOM_KEY_BINDINGS);
+  if (kb) {
+    try {
+      settings.customKeyBindings = JSON.parse(kb);
+    } catch { /* ignore */ }
+  }
+
+  // Editor
+  const wordWrap = localStorageAdapter.readString(STORAGE_KEY_EDITOR_WORD_WRAP);
+  if (wordWrap === 'true' || wordWrap === 'false') settings.editorWordWrap = wordWrap === 'true';
+
+  // SFTP
+  const dblClick = localStorageAdapter.readString(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR);
+  if (dblClick === 'open' || dblClick === 'transfer') settings.sftpDoubleClickBehavior = dblClick;
+  const autoSync = localStorageAdapter.readString(STORAGE_KEY_SFTP_AUTO_SYNC);
+  if (autoSync === 'true' || autoSync === 'false') settings.sftpAutoSync = autoSync === 'true';
+  const hidden = localStorageAdapter.readString(STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES);
+  if (hidden === 'true' || hidden === 'false') settings.sftpShowHiddenFiles = hidden === 'true';
+  const compress = localStorageAdapter.readString(STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD);
+  if (compress === 'true' || compress === 'false') settings.sftpUseCompressedUpload = compress === 'true';
+  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;
+
+  // Immersive mode
+  const immersive = localStorageAdapter.readString(STORAGE_KEY_IMMERSIVE_MODE);
+  if (immersive === 'true' || immersive === 'false') settings.immersiveMode = immersive === 'true';
+
+  return Object.keys(settings).length > 0 ? settings : undefined;
+}
+
+/**
+ * Apply synced settings to localStorage. Merges terminal settings
+ * to preserve platform-specific fields.
+ */
+function applySyncableSettings(settings: NonNullable<SyncPayload['settings']>): void {
+  // Theme & Appearance
+  if (settings.theme != null) localStorageAdapter.writeString(STORAGE_KEY_THEME, settings.theme);
+  if (settings.lightUiThemeId != null) localStorageAdapter.writeString(STORAGE_KEY_UI_THEME_LIGHT, settings.lightUiThemeId);
+  if (settings.darkUiThemeId != null) localStorageAdapter.writeString(STORAGE_KEY_UI_THEME_DARK, settings.darkUiThemeId);
+  if (settings.accentMode != null) localStorageAdapter.writeString(STORAGE_KEY_ACCENT_MODE, settings.accentMode);
+  if (settings.customAccent != null) localStorageAdapter.writeString(STORAGE_KEY_COLOR, settings.customAccent);
+  if (settings.uiFontFamilyId != null) localStorageAdapter.writeString(STORAGE_KEY_UI_FONT_FAMILY, settings.uiFontFamilyId);
+  if (settings.uiLanguage != null) localStorageAdapter.writeString(STORAGE_KEY_UI_LANGUAGE, settings.uiLanguage);
+  if (settings.customCSS != null) localStorageAdapter.writeString(STORAGE_KEY_CUSTOM_CSS, settings.customCSS);
+
+  // Terminal
+  if (settings.terminalTheme != null) localStorageAdapter.writeString(STORAGE_KEY_TERM_THEME, settings.terminalTheme);
+  if (settings.terminalFontFamily != null) localStorageAdapter.writeString(STORAGE_KEY_TERM_FONT_FAMILY, settings.terminalFontFamily);
+  if (settings.terminalFontSize != null) localStorageAdapter.writeString(STORAGE_KEY_TERM_FONT_SIZE, String(settings.terminalFontSize));
+
+  // Terminal settings — merge with existing to preserve platform-specific keys
+  if (settings.terminalSettings) {
+    let existing: Record<string, unknown> = {};
+    const raw = localStorageAdapter.readString(STORAGE_KEY_TERM_SETTINGS);
+    if (raw) {
+      try { existing = JSON.parse(raw); } catch { /* ignore */ }
+    }
+    const merged = { ...existing };
+    for (const key of SYNCABLE_TERMINAL_KEYS) {
+      if (key in settings.terminalSettings) {
+        merged[key] = settings.terminalSettings[key];
+      }
+    }
+    localStorageAdapter.writeString(STORAGE_KEY_TERM_SETTINGS, JSON.stringify(merged));
+  }
+
+  // Custom terminal themes
+  if (settings.customTerminalThemes != null) {
+    localStorageAdapter.writeString(STORAGE_KEY_CUSTOM_THEMES, JSON.stringify(settings.customTerminalThemes));
+  }
+
+  // Keyboard
+  if (settings.customKeyBindings != null) {
+    localStorageAdapter.writeString(STORAGE_KEY_CUSTOM_KEY_BINDINGS, JSON.stringify(settings.customKeyBindings));
+  }
+
+  // Editor
+  if (settings.editorWordWrap != null) localStorageAdapter.writeString(STORAGE_KEY_EDITOR_WORD_WRAP, String(settings.editorWordWrap));
+
+  // SFTP
+  if (settings.sftpDoubleClickBehavior != null) localStorageAdapter.writeString(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR, settings.sftpDoubleClickBehavior);
+  if (settings.sftpAutoSync != null) localStorageAdapter.writeString(STORAGE_KEY_SFTP_AUTO_SYNC, String(settings.sftpAutoSync));
+  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
+  if (settings.immersiveMode != null) localStorageAdapter.writeString(STORAGE_KEY_IMMERSIVE_MODE, String(settings.immersiveMode));
+}
+
+// ---------------------------------------------------------------------------
+// Builders
+// ---------------------------------------------------------------------------
+
+/**
+ * Build a complete `SyncPayload` from local data.
+ *
+ * Port-forwarding rules are optional because they are managed by a separate
+ * state hook (`usePortForwardingState`).  Callers should strip transient
+ * runtime fields (status, error, lastUsedAt) before passing them in.
+ */
+export function buildSyncPayload(
+  vault: SyncableVaultData,
+  portForwardingRules?: PortForwardingRule[],
+): SyncPayload {
+  return {
+    hosts: vault.hosts,
+    keys: vault.keys,
+    identities: vault.identities,
+    snippets: vault.snippets,
+    customGroups: vault.customGroups,
+    snippetPackages: vault.snippetPackages,
+    knownHosts: vault.knownHosts,
+    portForwardingRules,
+    settings: collectSyncableSettings(),
+    syncedAt: Date.now(),
+  };
+}
+
+/**
+ * Apply a downloaded `SyncPayload` to local state via the provided importers.
+ *
+ * This ensures both vault data and port-forwarding rules are imported
+ * consistently across windows.
+ */
+export function applySyncPayload(
+  payload: SyncPayload,
+  importers: SyncPayloadImporters,
+): void {
+  // Build the vault import object.  knownHosts is only included when the
+  // payload explicitly carries the field (even if it's []).  Legacy cloud
+  // snapshots may omit it entirely — in that case we leave the local
+  // known-hosts list untouched rather than destructively wiping it.
+  const vaultImport: Record<string, unknown> = {
+    hosts: payload.hosts,
+    keys: payload.keys,
+    identities: payload.identities,
+    snippets: payload.snippets,
+    customGroups: payload.customGroups,
+  };
+  if (payload.snippetPackages !== undefined) {
+    vaultImport.snippetPackages = payload.snippetPackages;
+  }
+  if (payload.knownHosts !== undefined) {
+    vaultImport.knownHosts = payload.knownHosts;
+  }
+
+  importers.importVaultData(JSON.stringify(vaultImport));
+
+  // Only import port-forwarding rules when the payload explicitly carries
+  // them.  Absent field = "payload was created before this feature existed",
+  // so local rules are preserved.  Explicitly present [] = "remote has no
+  // rules, clear local state".
+  if (payload.portForwardingRules !== undefined && importers.importPortForwardingRules) {
+    importers.importPortForwardingRules(payload.portForwardingRules);
+  }
+
+  // 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/AuthDialog.tsx

@@ -1,309 +0,0 @@
-import { ChevronDown, Eye, EyeOff, Key, Lock, User } from "lucide-react";
-import React, { useState } from "react";
-import { useI18n } from "../application/i18n/I18nProvider";
-import { cn } from "../lib/utils";
-import { Host, SSHKey } from "../types";
-import { DistroAvatar } from "./DistroAvatar";
-import { Button } from "./ui/button";
-import { Input } from "./ui/input";
-import { Label } from "./ui/label";
-import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
-import { ScrollArea } from "./ui/scroll-area";
-
-interface AuthDialogProps {
-  host: Host;
-  keys: SSHKey[];
-  onSubmit: (auth: {
-    username: string;
-    authMethod: "password" | "key";
-    password?: string;
-    keyId?: string;
-    saveCredentials: boolean;
-  }) => void;
-  onCancel: () => void;
-}
-
-const AuthDialog: React.FC<AuthDialogProps> = ({
-  host,
-  keys,
-  onSubmit,
-  onCancel,
-}) => {
-  const { t } = useI18n();
-  const [username, setUsername] = useState(host.username || "root");
-  const [authMethod, setAuthMethod] = useState<"password" | "key">("password");
-  const [password, setPassword] = useState("");
-  const [selectedKeyId, setSelectedKeyId] = useState<string | null>(null);
-  const [showPassword, setShowPassword] = useState(false);
-  const [saveCredentials, setSaveCredentials] = useState(true);
-  const [isKeySelectOpen, setIsKeySelectOpen] = useState(false);
-
-  const _selectedKey = keys.find((k) => k.id === selectedKeyId);
-
-  const handleSubmit = () => {
-    onSubmit({
-      username,
-      authMethod,
-      password: authMethod === "password" ? password : undefined,
-      keyId: authMethod === "key" ? (selectedKeyId ?? undefined) : undefined,
-      saveCredentials,
-    });
-  };
-
-  const isValid =
-    username.trim() &&
-    ((authMethod === "password" && password.trim()) ||
-      (authMethod === "key" && selectedKeyId));
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-      <div className="w-[420px] max-w-[90vw] bg-background border border-border/60 rounded-2xl shadow-2xl animate-in fade-in-0 zoom-in-95 duration-200">
-        {/* Header */}
-        <div className="px-6 py-5 border-b border-border/50">
-          <div className="flex items-center gap-3">
-            <DistroAvatar
-              host={host}
-              fallback={host.label.slice(0, 2).toUpperCase()}
-              className="h-12 w-12"
-            />
-            <div>
-              <h2 className="text-base font-semibold">{host.label}</h2>
-              <p className="text-xs text-muted-foreground font-mono">
-                SSH {host.hostname}:{host.port || 22}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        {/* Progress indicator */}
-        <div className="px-6 py-4">
-          <div className="flex items-center gap-3">
-            <div className="h-8 w-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center">
-              <User size={14} />
-            </div>
-            <div className="flex-1 h-0.5 bg-muted" />
-            <div
-              className={cn(
-                "h-8 w-8 rounded-full flex items-center justify-center transition-colors",
-                username.trim()
-                  ? "bg-primary/20 text-primary"
-                  : "bg-muted text-muted-foreground",
-              )}
-            >
-              {authMethod === "password" ? (
-                <Lock size={14} />
-              ) : (
-                <Key size={14} />
-              )}
-            </div>
-            <div className="flex-1 h-0.5 bg-muted" />
-            <div className="h-8 w-8 rounded-full bg-muted text-muted-foreground flex items-center justify-center text-xs font-mono">
-              {">_"}
-            </div>
-          </div>
-        </div>
-
-        {/* Auth method tabs */}
-        <div className="px-6">
-          <div className="flex gap-1 p-1 bg-secondary/80 rounded-lg border border-border/60">
-            <button
-              className={cn(
-                "flex-1 flex items-center justify-center gap-2 py-2 text-sm font-medium rounded-md transition-all",
-                authMethod === "password"
-                  ? "bg-primary text-primary-foreground shadow-sm"
-                  : "text-muted-foreground hover:text-foreground hover:bg-secondary",
-              )}
-              onClick={() => setAuthMethod("password")}
-            >
-              <Lock size={14} />
-              {t("terminal.auth.password")}
-            </button>
-            <button
-              className={cn(
-                "flex-1 flex items-center justify-center gap-2 py-2 text-sm font-medium rounded-md transition-all",
-                authMethod === "key"
-                  ? "bg-primary text-primary-foreground shadow-sm"
-                  : "text-muted-foreground hover:text-foreground hover:bg-secondary",
-              )}
-              onClick={() => setAuthMethod("key")}
-            >
-              <Key size={14} />
-              {t("terminal.auth.sshKey")}
-            </button>
-          </div>
-        </div>
-
-        {/* Form */}
-        <div className="px-6 py-4 space-y-4">
-          {/* Username field (shown when no username on host) */}
-          {!host.username && (
-            <div className="space-y-2">
-              <Label htmlFor="auth-username">{t("terminal.auth.username")}</Label>
-              <Input
-                id="auth-username"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                placeholder={t("terminal.auth.username.placeholder")}
-                autoFocus
-              />
-            </div>
-          )}
-
-          {/* Password field */}
-          {authMethod === "password" && (
-            <div className="space-y-2">
-              <Label htmlFor="auth-password">
-                {t("terminal.auth.passwordLabel")}
-              </Label>
-              <div className="relative">
-                <Input
-                  id="auth-password"
-                  type={showPassword ? "text" : "password"}
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  placeholder={t("terminal.auth.password.placeholder")}
-                  className="pr-10"
-                  autoFocus={!!host.username}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" && isValid) {
-                      handleSubmit();
-                    }
-                  }}
-                />
-                <button
-                  type="button"
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-                  onClick={() => setShowPassword(!showPassword)}
-                >
-                  {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
-                </button>
-              </div>
-            </div>
-          )}
-
-          {/* Key selection */}
-          {authMethod === "key" && (
-            <div className="space-y-2">
-              <Label>{t("terminal.auth.selectKey")}</Label>
-              {keys.length === 0 ? (
-                <div className="text-sm text-muted-foreground p-3 border border-dashed border-border/60 rounded-lg text-center">
-                  {t("terminal.auth.noKeysHint")}
-                </div>
-              ) : (
-                <div className="space-y-2">
-                  {keys
-                    .filter((k) => k.category === "key")
-                    .slice(0, 5)
-                    .map((key) => (
-                      <button
-                        key={key.id}
-                        className={cn(
-                          "w-full flex items-center gap-3 px-3 py-2.5 rounded-lg border transition-colors text-left",
-                          selectedKeyId === key.id
-                            ? "border-primary bg-primary/5"
-                            : "border-border/50 hover:bg-secondary/50",
-                        )}
-                        onClick={() => setSelectedKeyId(key.id)}
-                      >
-                        <div
-                          className={cn(
-                            "h-8 w-8 rounded-lg flex items-center justify-center",
-                            "bg-primary/20 text-primary",
-                          )}
-                        >
-                          <Key size={14} />
-                        </div>
-                        <div className="flex-1 min-w-0">
-                          <div className="text-sm font-medium truncate">
-                            {key.label}
-                          </div>
-                          <div className="text-xs text-muted-foreground">
-                            {t("auth.keyType", { type: key.type })}
-                          </div>
-                        </div>
-                      </button>
-                    ))}
-                  {keys.filter((k) => k.category === "key").length > 5 && (
-                    <Popover
-                      open={isKeySelectOpen}
-                      onOpenChange={setIsKeySelectOpen}
-                    >
-                      <PopoverTrigger asChild>
-                        <Button variant="outline" className="w-full">
-                          {t("auth.showAllKeys")}
-                          <ChevronDown size={14} className="ml-2" />
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-80 p-0">
-                        <ScrollArea className="h-64">
-                          <div className="p-2 space-y-1">
-                            {keys
-                              .filter((k) => k.category === "key")
-                              .map((key) => (
-                                <button
-                                  key={key.id}
-                                  className={cn(
-                                    "w-full flex items-center gap-2 px-2 py-2 rounded-md text-left transition-colors",
-                                    selectedKeyId === key.id
-                                      ? "bg-primary/10"
-                                      : "hover:bg-secondary",
-                                  )}
-                                  onClick={() => {
-                                    setSelectedKeyId(key.id);
-                                    setIsKeySelectOpen(false);
-                                  }}
-                                >
-                                  <Key size={14} className="text-primary" />
-                                  <span className="text-sm truncate">
-                                    {key.label}
-                                  </span>
-                                  <span className="text-xs text-muted-foreground ml-auto">
-                                    {key.type}
-                                  </span>
-                                </button>
-                              ))}
-                          </div>
-                        </ScrollArea>
-                      </PopoverContent>
-                    </Popover>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-
-        {/* Footer */}
-        <div className="px-6 py-4 border-t border-border/50 flex items-center justify-between">
-          <Button variant="secondary" onClick={onCancel}>
-            {t("common.close")}
-          </Button>
-          <div className="flex items-center gap-2">
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button disabled={!isValid} onClick={handleSubmit}>
-                  {t("terminal.auth.continueSave")}
-                  <ChevronDown size={14} className="ml-2" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="w-40 p-1" align="end">
-                <button
-                  className="w-full px-3 py-2 text-sm text-left hover:bg-secondary rounded-md"
-                  onClick={() => {
-                    setSaveCredentials(false);
-                    handleSubmit();
-                  }}
-                  disabled={!isValid}
-                >
-                  {t("common.continue")}
-                </button>
-              </PopoverContent>
-            </Popover>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AuthDialog;

components/CloudSyncSettings.tsx

@@ -32,7 +32,10 @@ import {
 } from 'lucide-react';
 import { useCloudSync } from '../application/state/useCloudSync';
 import { useI18n } from '../application/i18n/I18nProvider';
-import type { CloudProvider, ConflictInfo, SyncPayload, WebDAVAuthType, WebDAVConfig, S3Config } from '../domain/sync';
+import {
+    findSyncPayloadEncryptedCredentialPaths,
+} from '../domain/credentials';
+import { isProviderReadyForSync, type CloudProvider, type ConflictInfo, type SyncPayload, type WebDAVAuthType, type WebDAVConfig, type S3Config } from '../domain/sync';
 import { cn } from '../lib/utils';
 import { Button } from './ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './ui/dialog';
@@ -99,11 +102,14 @@ interface StatusDotProps {
 }
 
 const StatusDot: React.FC<StatusDotProps> = ({ status, className }) => {
+    if (status === 'connecting') {
+        return <Loader2 className={cn('w-3.5 h-3.5 animate-spin text-muted-foreground', className)} />;
+    }
+
     const colors = {
         connected: 'bg-green-500',
         syncing: 'bg-blue-500 animate-pulse',
         error: 'bg-red-500',
-        connecting: 'bg-yellow-500 animate-pulse',
         disconnected: 'bg-muted-foreground/50',
     };
 
@@ -276,6 +282,7 @@ interface ProviderCardProps {
     disabled?: boolean; // Disable connect button when another provider is connected
     onEdit?: () => void;
     onConnect: () => void;
+    onCancelConnect?: () => void;
     onDisconnect: () => void;
     onSync: () => void;
 }
@@ -293,6 +300,7 @@ const ProviderCard: React.FC<ProviderCardProps> = ({
     disabled,
     onEdit,
     onConnect,
+    onCancelConnect,
     onDisconnect,
     onSync,
 }) => {
@@ -364,7 +372,9 @@ const ProviderCard: React.FC<ProviderCardProps> = ({
                         {error}
                     </p>
                 ) : (
-                    <p className="text-xs text-muted-foreground mt-1">{t('cloudSync.provider.notConnected')}</p>
+                    <p className="text-xs text-muted-foreground mt-1">
+                        {isConnecting ? t('cloudSync.provider.connecting') : t('cloudSync.provider.notConnected')}
+                    </p>
                 )}
             </div>
 
@@ -405,10 +415,20 @@ const ProviderCard: React.FC<ProviderCardProps> = ({
                             <CloudOff size={14} />
                         </Button>
                     </>
+                ) : isConnecting && onCancelConnect ? (
+                    <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={onCancelConnect}
+                        className="gap-1"
+                    >
+                        <X size={14} />
+                        {t('common.cancel')}
+                    </Button>
                 ) : (
                     <Button
                         size="sm"
-                        onClick={() => { console.log('[ProviderCard] Connect clicked'); onConnect(); }}
+                        onClick={() => { onConnect(); }}
                         className="gap-1"
                         disabled={disabled || isConnecting}
                     >
@@ -482,7 +502,7 @@ const GitHubDeviceFlowModal: React.FC<GitHubDeviceFlowModalProps> = ({
                     </div>
 
                     <Button
-                        onClick={() => window.open(verificationUri, '_blank')}
+                        onClick={() => window.open(verificationUri, "_blank", "noopener,noreferrer")}
                         className="w-full gap-2 mb-4"
                     >
                         <ExternalLink size={14} />
@@ -608,7 +628,7 @@ interface SyncDashboardProps {
     onClearLocalData?: () => void;
 }
 
-export const SyncDashboard: React.FC<SyncDashboardProps> = ({
+const SyncDashboard: React.FC<SyncDashboardProps> = ({
     onBuildPayload,
     onApplyPayload,
     onClearLocalData,
@@ -678,24 +698,14 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
 
     const disconnectOtherProviders = async (current: CloudProvider) => {
         const providers: CloudProvider[] = ['github', 'google', 'onedrive', 'webdav', 's3'];
-        const isActive = (status: string) => status === 'connected' || status === 'syncing';
         for (const provider of providers) {
             if (provider === current) continue;
-            if (isActive(sync.providers[provider].status)) {
+            if (isProviderReadyForSync(sync.providers[provider])) {
                 await sync.disconnectProvider(provider);
             }
         }
     };
 
-    // Debug: log provider states
-    console.log('[SyncDashboard] Provider states:', {
-        github: sync.providers.github.status,
-        google: sync.providers.google.status,
-        onedrive: sync.providers.onedrive.status,
-        webdav: sync.providers.webdav.status,
-        s3: sync.providers.s3.status,
-    });
-
     // GitHub Device Flow state
     const [showGitHubModal, setShowGitHubModal] = useState(false);
     const [gitHubUserCode, setGitHubUserCode] = useState('');
@@ -729,6 +739,7 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
     const [webdavPassword, setWebdavPassword] = useState('');
     const [webdavToken, setWebdavToken] = useState('');
     const [showWebdavSecret, setShowWebdavSecret] = useState(false);
+    const [webdavAllowInsecure, setWebdavAllowInsecure] = useState(false);
     const [webdavError, setWebdavError] = useState<string | null>(null);
     const [webdavErrorDetail, setWebdavErrorDetail] = useState<string | null>(null);
     const [isSavingWebdav, setIsSavingWebdav] = useState(false);
@@ -751,6 +762,17 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
     // Clear local data dialog
     const [showClearLocalDialog, setShowClearLocalDialog] = useState(false);
 
+    const ensureSyncablePayload = useCallback(
+        (payload: SyncPayload): boolean => {
+            const encryptedCredentialPaths = findSyncPayloadEncryptedCredentialPaths(payload);
+            if (encryptedCredentialPaths.length === 0) return true;
+
+            toast.error(t('sync.credentialsUnavailable'), t('sync.toast.errorTitle'));
+            return false;
+        },
+        [t],
+    );
+
     // Handle conflict detection
     useEffect(() => {
         if (sync.currentConflict) {
@@ -775,12 +797,9 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
 
     // Connect GitHub (disconnect others first - single provider only)
     const handleConnectGitHub = async () => {
-        console.log('[CloudSync] handleConnectGitHub called');
         try {
             await disconnectOtherProviders('github');
-            console.log('[CloudSync] Calling sync.connectGitHub()...');
             const deviceFlow = await sync.connectGitHub();
-            console.log('[CloudSync] Device flow received:', deviceFlow.userCode);
             setGitHubUserCode(deviceFlow.userCode);
             setGitHubVerificationUri(deviceFlow.verificationUri);
             setShowGitHubModal(true);
@@ -798,6 +817,9 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
             toast.success(t('cloudSync.connect.github.success'));
         } catch (error) {
             setIsPollingGitHub(false);
+            setShowGitHubModal(false);
+            // Reset provider status so button is clickable again (without tearing down existing connections)
+            sync.resetProviderStatus('github');
             const message = getNetworkErrorMessage(error, t('common.unknownError'));
             toast.error(message, t('cloudSync.connect.github.failedTitle'));
         }
@@ -811,10 +833,13 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
             // Note: Auth flow is handled automatically by oauthBridge
             toast.info(t('cloudSync.connect.browserContinue'));
         } catch (error) {
-            toast.error(
-                error instanceof Error ? error.message : t('common.unknownError'),
-                t('cloudSync.connect.google.failedTitle'),
-            );
+            // Reset provider status so button is clickable again (without tearing down existing connections)
+            sync.resetProviderStatus('google');
+            const msg = error instanceof Error ? error.message : t('common.unknownError');
+            // Don't show toast for user-initiated cancellation (popup closed)
+            if (!msg.includes('cancelled')) {
+                toast.error(msg, t('cloudSync.connect.google.failedTitle'));
+            }
         }
     };
 
@@ -826,10 +851,13 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
             // Note: Auth flow is handled automatically by oauthBridge
             toast.info(t('cloudSync.connect.browserContinue'));
         } catch (error) {
-            toast.error(
-                error instanceof Error ? error.message : t('common.unknownError'),
-                t('cloudSync.connect.onedrive.failedTitle'),
-            );
+            // Reset provider status so button is clickable again (without tearing down existing connections)
+            sync.resetProviderStatus('onedrive');
+            const msg = error instanceof Error ? error.message : t('common.unknownError');
+            // Don't show toast for user-initiated cancellation (popup closed)
+            if (!msg.includes('cancelled')) {
+                toast.error(msg, t('cloudSync.connect.onedrive.failedTitle'));
+            }
         }
     };
 
@@ -840,6 +868,7 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
         setWebdavUsername(config?.username || '');
         setWebdavPassword(config?.password || '');
         setWebdavToken(config?.token || '');
+        setWebdavAllowInsecure(config?.allowInsecure || false);
         setShowWebdavSecret(false);
         setWebdavError(null);
         setWebdavErrorDetail(null);
@@ -890,6 +919,7 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
             username: webdavAuthType === 'token' ? undefined : webdavUsername.trim(),
             password: webdavAuthType === 'token' ? undefined : webdavPassword,
             token: webdavAuthType === 'token' ? webdavToken.trim() : undefined,
+            allowInsecure: webdavAllowInsecure ? true : undefined,
         };
 
         setIsSavingWebdav(true);
@@ -958,9 +988,14 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
     const handleSync = async (provider: CloudProvider) => {
         try {
             const payload = onBuildPayload();
+            if (!ensureSyncablePayload(payload)) return;
             const result = await sync.syncToProvider(provider, payload);
 
             if (result.success) {
+                // Apply merged data if a three-way merge happened
+                if (result.mergedPayload && onApplyPayload) {
+                    onApplyPayload(result.mergedPayload);
+                }
                 toast.success(t('cloudSync.sync.success', { provider }));
             } else if (result.conflictDetected) {
                 // Conflict modal will show automatically
@@ -982,6 +1017,7 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
             } else if (resolution === 'USE_LOCAL') {
                 // Re-sync with local data
                 const localPayload = onBuildPayload();
+                if (!ensureSyncablePayload(localPayload)) return;
                 await sync.syncNow(localPayload);
                 toast.success(t('cloudSync.resolve.uploaded'));
             }
@@ -1045,13 +1081,13 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                         provider="github"
                         name="GitHub Gist"
                         icon={<Github size={24} />}
-                        isConnected={sync.providers.github.status === 'connected' || sync.providers.github.status === 'syncing'}
+                        isConnected={isProviderReadyForSync(sync.providers.github)}
                         isSyncing={sync.providers.github.status === 'syncing'}
                         isConnecting={sync.providers.github.status === 'connecting'}
                         account={sync.providers.github.account}
                         lastSync={sync.providers.github.lastSync}
                         error={sync.providers.github.error}
-                        disabled={sync.hasAnyConnectedProvider && sync.providers.github.status !== 'connected' && sync.providers.github.status !== 'syncing'}
+                        disabled={sync.hasAnyConnectedProvider && !isProviderReadyForSync(sync.providers.github)}
                         onConnect={handleConnectGitHub}
                         onDisconnect={() => sync.disconnectProvider('github')}
                         onSync={() => handleSync('github')}
@@ -1061,14 +1097,15 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                         provider="google"
                         name="Google Drive"
                         icon={<GoogleDriveIcon className="w-6 h-6" />}
-                        isConnected={sync.providers.google.status === 'connected' || sync.providers.google.status === 'syncing'}
+                        isConnected={isProviderReadyForSync(sync.providers.google)}
                         isSyncing={sync.providers.google.status === 'syncing'}
                         isConnecting={sync.providers.google.status === 'connecting'}
                         account={sync.providers.google.account}
                         lastSync={sync.providers.google.lastSync}
                         error={sync.providers.google.error}
-                        disabled={sync.hasAnyConnectedProvider && sync.providers.google.status !== 'connected' && sync.providers.google.status !== 'syncing'}
+                        disabled={sync.hasAnyConnectedProvider && !isProviderReadyForSync(sync.providers.google)}
                         onConnect={handleConnectGoogle}
+                        onCancelConnect={sync.cancelOAuthConnect}
                         onDisconnect={() => sync.disconnectProvider('google')}
                         onSync={() => handleSync('google')}
                     />
@@ -1077,14 +1114,15 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                         provider="onedrive"
                         name="Microsoft OneDrive"
                         icon={<OneDriveIcon className="w-6 h-6" />}
-                        isConnected={sync.providers.onedrive.status === 'connected' || sync.providers.onedrive.status === 'syncing'}
+                        isConnected={isProviderReadyForSync(sync.providers.onedrive)}
                         isSyncing={sync.providers.onedrive.status === 'syncing'}
                         isConnecting={sync.providers.onedrive.status === 'connecting'}
                         account={sync.providers.onedrive.account}
                         lastSync={sync.providers.onedrive.lastSync}
                         error={sync.providers.onedrive.error}
-                        disabled={sync.hasAnyConnectedProvider && sync.providers.onedrive.status !== 'connected' && sync.providers.onedrive.status !== 'syncing'}
+                        disabled={sync.hasAnyConnectedProvider && !isProviderReadyForSync(sync.providers.onedrive)}
                         onConnect={handleConnectOneDrive}
+                        onCancelConnect={sync.cancelOAuthConnect}
                         onDisconnect={() => sync.disconnectProvider('onedrive')}
                         onSync={() => handleSync('onedrive')}
                     />
@@ -1093,13 +1131,13 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                         provider="webdav"
                         name={t('cloudSync.provider.webdav')}
                         icon={<Server size={24} />}
-                        isConnected={sync.providers.webdav.status === 'connected' || sync.providers.webdav.status === 'syncing'}
+                        isConnected={isProviderReadyForSync(sync.providers.webdav)}
                         isSyncing={sync.providers.webdav.status === 'syncing'}
                         isConnecting={sync.providers.webdav.status === 'connecting'}
                         account={sync.providers.webdav.account}
                         lastSync={sync.providers.webdav.lastSync}
                         error={sync.providers.webdav.error}
-                        disabled={sync.hasAnyConnectedProvider && sync.providers.webdav.status !== 'connected' && sync.providers.webdav.status !== 'syncing'}
+                        disabled={sync.hasAnyConnectedProvider && !isProviderReadyForSync(sync.providers.webdav)}
                         onEdit={openWebdavDialog}
                         onConnect={openWebdavDialog}
                         onDisconnect={() => sync.disconnectProvider('webdav')}
@@ -1110,13 +1148,13 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                         provider="s3"
                         name={t('cloudSync.provider.s3')}
                         icon={<Database size={24} />}
-                        isConnected={sync.providers.s3.status === 'connected' || sync.providers.s3.status === 'syncing'}
+                        isConnected={isProviderReadyForSync(sync.providers.s3)}
                         isSyncing={sync.providers.s3.status === 'syncing'}
                         isConnecting={sync.providers.s3.status === 'connecting'}
                         account={sync.providers.s3.account}
                         lastSync={sync.providers.s3.lastSync}
                         error={sync.providers.s3.error}
-                        disabled={sync.hasAnyConnectedProvider && sync.providers.s3.status !== 'connected' && sync.providers.s3.status !== 'syncing'}
+                        disabled={sync.hasAnyConnectedProvider && !isProviderReadyForSync(sync.providers.s3)}
                         onEdit={openS3Dialog}
                         onConnect={openS3Dialog}
                         onDisconnect={() => sync.disconnectProvider('s3')}
@@ -1240,6 +1278,9 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                 onClose={() => {
                     setShowGitHubModal(false);
                     setIsPollingGitHub(false);
+                    // Reset provider status so button is clickable again.
+                    // The background polling will continue until expiry but is harmless.
+                    sync.resetProviderStatus('github');
                 }}
             />
 
@@ -1322,6 +1363,16 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                             {t('cloudSync.webdav.showSecret')}
                         </label>
 
+                        <label className="flex items-center gap-2 text-sm text-muted-foreground select-none">
+                            <input
+                                type="checkbox"
+                                checked={webdavAllowInsecure}
+                                onChange={(e) => setWebdavAllowInsecure(e.target.checked)}
+                                className="accent-primary"
+                            />
+                            {t('cloudSync.webdav.allowInsecure')}
+                        </label>
+
                         {webdavError && (
                             <p className="text-sm text-red-500">{webdavError}</p>
                         )}
@@ -1556,6 +1607,16 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                                     return;
                                 }
 
+                                let payloadForReencrypt: SyncPayload | null = null;
+                                if (sync.hasAnyConnectedProvider) {
+                                    const payload = onBuildPayload();
+                                    if (!ensureSyncablePayload(payload)) {
+                                        setChangeKeyError(t('sync.credentialsUnavailable'));
+                                        return;
+                                    }
+                                    payloadForReencrypt = payload;
+                                }
+
                                 setIsChangingKey(true);
                                 try {
                                     const ok = await sync.changeMasterKey(currentMasterKey, newMasterKey);
@@ -1564,9 +1625,8 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                                         return;
                                     }
 
-                                    if (sync.hasAnyConnectedProvider) {
-                                        const payload = onBuildPayload();
-                                        await sync.syncNow(payload);
+                                    if (payloadForReencrypt) {
+                                        await sync.syncNow(payloadForReencrypt);
                                     }
 
                                     toast.success(t('cloudSync.changeKey.updatedToast'));

components/DistroAvatar.tsx

@@ -1,6 +1,6 @@
 import { Server, Usb } from "lucide-react";
 import React, { memo } from "react";
-import { normalizeDistroId } from "../domain/host";
+import { getEffectiveHostDistro } from "../domain/host";
 import { cn } from "../lib/utils";
 import { Host } from "../types";
 
@@ -17,6 +17,11 @@ export const DISTRO_LOGOS: Record<string, string> = {
   redhat: "/distro/redhat.svg",
   oracle: "/distro/oracle.svg",
   kali: "/distro/kali.svg",
+  almalinux: "/distro/almalinux.svg",
+  // OS-level logos (used by local terminal tab icons)
+  macos: "/distro/macos.svg",
+  windows: "/distro/windows.svg",
+  linux: "/distro/linux.svg",
 };
 
 export const DISTRO_COLORS: Record<string, string> = {
@@ -32,6 +37,11 @@ export const DISTRO_COLORS: Record<string, string> = {
   redhat: "bg-[#EE0000]",
   oracle: "bg-[#C74634]",
   kali: "bg-[#0F6DB3]",
+  almalinux: "bg-[#173B66]",
+  // OS-level colors
+  macos: "bg-[#333333]",
+  windows: "bg-[#0078D4]",
+  linux: "bg-[#333333]",
   default: "bg-slate-600",
 };
 
@@ -48,16 +58,15 @@ const DistroAvatarInner: React.FC<DistroAvatarProps> = ({
   className,
   size = "md",
 }) => {
-  const distro =
-    normalizeDistroId(host.distro) || (host.distro || "").toLowerCase();
+  const distro = getEffectiveHostDistro(host);
   const logo = DISTRO_LOGOS[distro];
   const [errored, setErrored] = React.useState(false);
   const bg = DISTRO_COLORS[distro] || DISTRO_COLORS.default;
 
   // 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 = {
@@ -89,14 +98,14 @@ 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,
         )}
       >
         <img
           src={logo}
-          alt={host.distro || host.os}
+          alt={distro || host.os}
           className={cn("object-contain invert brightness-0", iconSize)}
           onError={() => setErrored(true)}
         />

components/FileOpenerDialog.tsx

@@ -45,7 +45,6 @@ export const FileOpenerDialog: React.FC<FileOpenerDialogProps> = ({
     try {
       const result = await onSelectSystemApp();
       if (result) {
-        console.log('[FileOpenerDialog] Calling onSelect with rememberChoice:', rememberChoice, 'result:', result);
         onSelect('system-app', rememberChoice, result);
         onClose();
       }

components/GroupTreeItem.tsx

@@ -1,107 +0,0 @@
-import { ChevronRight,Folder,FolderOpen,FolderPlus,Plus } from 'lucide-react';
-import React,{ useMemo } from 'react';
-import { useI18n } from '../application/i18n/I18nProvider';
-import { cn } from '../lib/utils';
-import { GroupNode } from '../types';
-import { Collapsible,CollapsibleContent,CollapsibleTrigger } from './ui/collapsible';
-import { ContextMenu,ContextMenuContent,ContextMenuItem,ContextMenuTrigger } from './ui/context-menu';
-
-interface GroupTreeItemProps {
-  node: GroupNode;
-  depth: number;
-  expandedPaths: Set<string>;
-  onToggle: (path: string) => void;
-  onSelectGroup: (path: string) => void;
-  selectedGroup: string | null;
-  onEditGroup: (path: string) => void;
-  onNewHost: (path: string) => void;
-  onNewSubfolder: (path: string) => void;
-  isManagedGroup?: (path: string) => boolean;
-}
-
-export const GroupTreeItem: React.FC<GroupTreeItemProps> = ({
-  node,
-  depth,
-  expandedPaths,
-  onToggle,
-  onSelectGroup,
-  selectedGroup,
-  onEditGroup,
-  onNewHost,
-  onNewSubfolder,
-}) => {
-  const { t } = useI18n();
-  const isExpanded = expandedPaths.has(node.path);
-  const hasChildren = node.children && Object.keys(node.children).length > 0;
-  const paddingLeft = `${depth * 12 + 12}px`;
-  const isSelected = selectedGroup === node.path;
-
-  const childNodes = useMemo(() => {
-    return node.children
-      ? (Object.values(node.children) as unknown as GroupNode[]).sort((a, b) => a.name.localeCompare(b.name))
-      : [];
-  }, [node.children]);
-
-  return (
-    <Collapsible open={isExpanded} onOpenChange={() => onToggle(node.path)}>
-      <ContextMenu>
-        <ContextMenuTrigger>
-          <CollapsibleTrigger asChild>
-            <div
-              className={cn(
-                "flex items-center py-1.5 pr-2 text-sm font-medium cursor-pointer transition-colors select-none group relative rounded-r-md",
-                isSelected ? "bg-primary/10 text-primary border-l-2 border-primary" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
-              )}
-              style={{ paddingLeft }}
-              onClick={() => onSelectGroup(node.path)}
-            >
-              <div className="mr-1.5 flex-shrink-0 w-4 h-4 flex items-center justify-center">
-                {hasChildren && (
-                  <div className={cn("transition-transform duration-200", isExpanded ? "rotate-90" : "")}>
-                    <ChevronRight size={12} />
-                  </div>
-                )}
-              </div>
-              <div className="mr-2 text-primary/80 group-hover:text-primary transition-colors">
-                {isExpanded ? <FolderOpen size={16} /> : <Folder size={16} />}
-              </div>
-              <span className="truncate flex-1">{node.name}</span>
-              {node.hosts.length > 0 && (
-                <span className="text-[10px] opacity-70 bg-background/50 px-1.5 rounded-full border border-border">
-                  {node.hosts.length}
-                </span>
-              )}
-            </div>
-          </CollapsibleTrigger>
-        </ContextMenuTrigger>
-        <ContextMenuContent>
-          <ContextMenuItem onClick={() => onNewHost(node.path)}>
-            <Plus className="mr-2 h-4 w-4" /> {t("action.newHost")}
-          </ContextMenuItem>
-          <ContextMenuItem onClick={() => onNewSubfolder(node.path)}>
-            <FolderPlus className="mr-2 h-4 w-4" /> {t("action.newSubfolder")}
-          </ContextMenuItem>
-        </ContextMenuContent>
-      </ContextMenu>
-
-      {hasChildren && (
-        <CollapsibleContent>
-          {childNodes.map((child) => (
-            <GroupTreeItem
-              key={child.path}
-              node={child}
-              depth={depth + 1}
-              expandedPaths={expandedPaths}
-              onToggle={onToggle}
-              onSelectGroup={onSelectGroup}
-              selectedGroup={selectedGroup}
-              onEditGroup={onEditGroup}
-              onNewHost={onNewHost}
-              onNewSubfolder={onNewSubfolder}
-            />
-          ))}
-        </CollapsibleContent>
-      )}
-    </Collapsible>
-  );
-};

components/HostDetailsPanel.tsx

@@ -16,20 +16,35 @@ import {
   Plus,
   Settings2,
   Shield,
+  ShieldAlert,
   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 { TERMINAL_THEMES } from "../infrastructure/config/terminalThemes";
+import { getEffectiveHostDistro, LINUX_DISTRO_OPTIONS } from "../domain/host";
+import { customThemeStore } from "../application/state/customThemeStore";
+import {
+  clearHostFontSizeOverride,
+  clearHostThemeOverride,
+  hasHostFontSizeOverride,
+  hasHostThemeOverride,
+  resolveHostTerminalFontSize,
+  resolveHostTerminalThemeId,
+} 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 { DISTRO_COLORS, DISTRO_LOGOS } from "./DistroAvatar";
 import { DistroAvatar } from "./DistroAvatar";
 import ThemeSelectPanel from "./ThemeSelectPanel";
 import {
@@ -38,6 +53,7 @@ import {
   AsidePanelFooter,
 } from "./ui/aside-panel";
 import { Badge } from "./ui/badge";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 import { Button } from "./ui/button";
 import { Switch } from "./ui/switch";
 import { Card } from "./ui/card";
@@ -56,7 +72,7 @@ import {
   ProxyPanel,
 } from "./host-details";
 
-type CredentialType = "sshid" | "key" | "certificate" | null;
+type CredentialType = "sshid" | "key" | "certificate" | "localKeyFile" | null;
 type SubPanel =
   | "none"
   | "create-group"
@@ -66,6 +82,8 @@ type SubPanel =
   | "theme-select"
   | "telnet-theme-select";
 
+const LINUX_DISTRO_OPTION_IDS = [...LINUX_DISTRO_OPTIONS];
+
 interface HostDetailsPanelProps {
   initialData?: Host | null;
   availableKeys: SSHKey[];
@@ -75,6 +93,8 @@ 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
@@ -90,6 +110,8 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   allTags = [],
   allHosts = [],
   defaultGroup,
+  terminalThemeId,
+  terminalFontSize,
   onSave,
   onCancel,
   onCreateGroup,
@@ -111,7 +133,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         os: "linux",
         authMethod: "password",
         charset: "UTF-8",
-        theme: "Flexoki Dark",
+        distroMode: "auto",
         createdAt: Date.now(),
         group: defaultGroup || undefined, // Pre-fill with current navigation group
       } as Host),
@@ -131,6 +153,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("");
@@ -154,13 +179,6 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   // Group input state for inline creation suggestion
   const [groupInputValue, setGroupInputValue] = useState(form.group || "");
 
-  // Check if the entered group is new (doesn't exist)
-  // Reserved for future use: showing inline "create new group" suggestion
-  const _isNewGroup = useMemo(() => {
-    const trimmed = groupInputValue.trim();
-    return trimmed.length > 0 && !groups.includes(trimmed);
-  }, [groupInputValue, groups]);
-
   useEffect(() => {
     if (initialData) {
       // Ensure telnetEnabled is set when protocol is telnet
@@ -181,6 +199,56 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
     setForm((prev) => ({ ...prev, [key]: value }));
   };
 
+  const effectiveThemeId = useMemo(
+    () => resolveHostTerminalThemeId(form, terminalThemeId),
+    [form, terminalThemeId],
+  );
+  const effectiveFontSize = useMemo(
+    () => resolveHostTerminalFontSize(form, terminalFontSize),
+    [form, terminalFontSize],
+  );
+  const hasEffectiveThemeOverride = useMemo(
+    () => hasHostThemeOverride(form),
+    [form],
+  );
+  const hasEffectiveFontSizeOverride = useMemo(
+    () => hasHostFontSizeOverride(form),
+    [form],
+  );
+  const effectiveTelnetThemeId =
+    form.protocols?.find((p) => p.protocol === "telnet")?.theme || effectiveThemeId;
+  const distroOptions = useMemo(
+    () =>
+      LINUX_DISTRO_OPTION_IDS.map((value) => ({
+        value,
+        label: t(`hostDetails.distro.option.${value}`),
+        icon: DISTRO_LOGOS[value],
+        bgClass: DISTRO_COLORS[value] || DISTRO_COLORS.default,
+      })),
+    [t],
+  );
+
+  const getDistroOptionLabel = useCallback(
+    (value?: string) =>
+      distroOptions.find((option) => option.value === value)?.label ||
+      value ||
+      t("hostDetails.distro.pending"),
+    [distroOptions, t],
+  );
+
+  const effectiveFormDistro = getEffectiveHostDistro(form);
+
+  const handleDistroModeChange = useCallback((mode: "auto" | "manual") => {
+    setForm((prev) => ({
+      ...prev,
+      distroMode: mode,
+      manualDistro:
+        mode === "manual"
+          ? prev.manualDistro || getEffectiveHostDistro(prev) || "linux"
+          : prev.manualDistro,
+    }));
+  }, []);
+
   const updateProxyConfig = useCallback(
     (field: keyof ProxyConfig, value: string | number) => {
       setForm((prev) => ({
@@ -300,6 +368,27 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
       password: form.savePassword === false ? undefined : form.password,
       managedSourceId: finalManagedSourceId,
     };
+    const preserveLegacyTheme = initialData?.theme != null && cleaned.themeOverride !== false;
+    const preserveLegacyFontFamily = initialData?.fontFamily != null && cleaned.fontFamilyOverride !== false;
+    const preserveLegacyFontSize = initialData?.fontSize != null && cleaned.fontSizeOverride !== false;
+
+    if (cleaned.themeOverride === false) {
+      delete cleaned.theme;
+    } else if (preserveLegacyTheme && cleaned.theme == null) {
+      cleaned.theme = initialData?.theme;
+    }
+
+    if (cleaned.fontFamilyOverride === false) {
+      delete cleaned.fontFamily;
+    } else if (preserveLegacyFontFamily && cleaned.fontFamily == null) {
+      cleaned.fontFamily = initialData?.fontFamily;
+    }
+
+    if (cleaned.fontSizeOverride === false) {
+      delete cleaned.fontSize;
+    } else if (preserveLegacyFontSize && cleaned.fontSize == null) {
+      cleaned.fontSize = initialData?.fontSize;
+    }
     onSave(cleaned);
   };
 
@@ -389,6 +478,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         authMethod: identity.authMethod,
         password: undefined,
         identityFileId: undefined,
+        identityFilePaths: undefined,
       }));
       setSelectedCredentialType(null);
       setCredentialPopoverOpen(false);
@@ -480,9 +570,9 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
     return (
       <ThemeSelectPanel
         open={true}
-        selectedThemeId={form.theme || "flexoki-dark"}
+        selectedThemeId={effectiveThemeId}
         onSelect={(themeId) => {
-          update("theme", themeId);
+          setForm((prev) => ({ ...prev, theme: themeId, themeOverride: true }));
           setActiveSubPanel("none");
         }}
         onClose={onCancel}
@@ -497,11 +587,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
     return (
       <ThemeSelectPanel
         open={true}
-        selectedThemeId={
-          form.protocols?.find((p) => p.protocol === "telnet")?.theme ||
-          form.theme ||
-          "flexoki-dark"
-        }
+        selectedThemeId={effectiveTelnetThemeId}
         onSelect={(themeId) => {
           // Update telnet protocol theme
           const telnetConfig = form.protocols?.find(
@@ -539,6 +625,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
     <AsidePanel
       open={true}
       onClose={onCancel}
+      width="w-[420px]"
       title={
         initialData ? t("hostDetails.title.details") : t("hostDetails.title.new")
       }
@@ -652,7 +739,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">
@@ -893,6 +980,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">
@@ -970,6 +1082,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>
@@ -991,6 +1117,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                     onValueChange={(val) => {
                       update("identityFileId", val);
                       update("authMethod", "key");
+                      update("identityFilePaths", undefined);
                       setSelectedCredentialType(null);
                     }}
                     placeholder={t("hostDetails.keys.search")}
@@ -1026,6 +1153,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                     onValueChange={(val) => {
                       update("identityFileId", val);
                       update("authMethod", "certificate");
+                      update("identityFilePaths", undefined);
                       setSelectedCredentialType(null);
                     }}
                     placeholder={t("hostDetails.certs.search")}
@@ -1045,6 +1173,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>
 
@@ -1074,18 +1263,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>
@@ -1097,6 +1288,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" />
@@ -1115,21 +1411,15 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               className="w-12 h-8 rounded-md border border-border/60 flex items-center justify-center text-[6px] font-mono overflow-hidden"
               style={{
                 backgroundColor:
-                  TERMINAL_THEMES.find(
-                    (t) => t.id === (form.theme || "flexoki-dark"),
-                  )?.colors.background || "#100F0F",
+                  customThemeStore.getThemeById(effectiveThemeId)?.colors.background || "#100F0F",
                 color:
-                  TERMINAL_THEMES.find(
-                    (t) => t.id === (form.theme || "flexoki-dark"),
-                  )?.colors.foreground || "#CECDC3",
+                  customThemeStore.getThemeById(effectiveThemeId)?.colors.foreground || "#CECDC3",
               }}
             >
               <div className="p-0.5">
                 <div
                   style={{
-                    color: TERMINAL_THEMES.find(
-                      (t) => t.id === (form.theme || "flexoki-dark"),
-                    )?.colors.green,
+                    color: customThemeStore.getThemeById(effectiveThemeId)?.colors.green,
                   }}
                 >
                   $
@@ -1137,11 +1427,19 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               </div>
             </div>
             <span className="text-sm flex-1">
-              {TERMINAL_THEMES.find(
-                (t) => t.id === (form.theme || "flexoki-dark"),
-              )?.name || "Flexoki Dark"}
+              {customThemeStore.getThemeById(effectiveThemeId)?.name || "Flexoki Dark"}
             </span>
           </button>
+          {hasEffectiveThemeOverride && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="w-full justify-start text-primary"
+              onClick={() => setForm((prev) => clearHostThemeOverride(prev))}
+            >
+              {t("common.useGlobal")}
+            </Button>
+          )}
 
           {/* Font Size */}
           <div className="flex items-center gap-2">
@@ -1150,11 +1448,15 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               variant="outline"
               size="sm"
               onClick={() => {
-                if ((form.fontSize || 14) > MIN_FONT_SIZE) {
-                  update("fontSize", (form.fontSize || 14) - 1);
+                if (effectiveFontSize > MIN_FONT_SIZE) {
+                  setForm((prev) => ({
+                    ...prev,
+                    fontSize: effectiveFontSize - 1,
+                    fontSizeOverride: true,
+                  }));
                 }
               }}
-              disabled={(form.fontSize || 14) <= MIN_FONT_SIZE}
+              disabled={effectiveFontSize <= MIN_FONT_SIZE}
               className="px-2 h-8"
             >
               -
@@ -1163,25 +1465,43 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               type="number"
               min={MIN_FONT_SIZE}
               max={MAX_FONT_SIZE}
-              value={form.fontSize || 14}
+              value={effectiveFontSize}
               onChange={(e) => {
                 const val = parseInt(e.target.value);
                 if (val >= MIN_FONT_SIZE && val <= MAX_FONT_SIZE) {
-                  update("fontSize", val);
+                  setForm((prev) => ({
+                    ...prev,
+                    fontSize: val,
+                    fontSizeOverride: true,
+                  }));
                 }
               }}
               className="w-16 text-center h-8"
             />
             <span className="text-sm text-muted-foreground">pt</span>
+            {hasEffectiveFontSizeOverride && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="ml-auto h-8 text-primary"
+                onClick={() => setForm((prev) => clearHostFontSizeOverride(prev))}
+              >
+                {t("common.useGlobal")}
+              </Button>
+            )}
             <Button
               variant="outline"
               size="sm"
               onClick={() => {
-                if ((form.fontSize || 14) < MAX_FONT_SIZE) {
-                  update("fontSize", (form.fontSize || 14) + 1);
+                if (effectiveFontSize < MAX_FONT_SIZE) {
+                  setForm((prev) => ({
+                    ...prev,
+                    fontSize: effectiveFontSize + 1,
+                    fontSizeOverride: true,
+                  }));
                 }
               }}
-              disabled={(form.fontSize || 14) >= MAX_FONT_SIZE}
+              disabled={effectiveFontSize >= MAX_FONT_SIZE}
               className="px-2 h-8"
             >
               +
@@ -1197,7 +1517,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>
 
@@ -1230,6 +1558,56 @@ 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">
+            <ShieldAlert size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">{t("hostDetails.section.legacyAlgorithms")}</p>
+          </div>
+          <ToggleRow
+            label={t("hostDetails.legacyAlgorithms")}
+            enabled={!!form.legacyAlgorithms}
+            onToggle={() => update("legacyAlgorithms", !form.legacyAlgorithms)}
+          />
+          <p className="text-xs text-muted-foreground break-words">
+            {t("hostDetails.legacyAlgorithms.desc")}
+          </p>
+          {form.legacyAlgorithms && (
+            <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.legacyAlgorithms.warning")}
+              </p>
+            </div>
+          )}
+        </Card>
+
         {/* Proxy via Hosts (Jump Hosts / ProxyJump) */}
         <Card className="p-3 space-y-2 bg-card border-border/80">
           <div className="flex items-center justify-between">
@@ -1306,36 +1684,50 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         </Card>
 
         {/* Proxy Configuration */}
-        <Card className="p-3 space-y-2 bg-card border-border/80">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <Globe size={14} className="text-muted-foreground" />
-              <p className="text-xs font-semibold">{t("hostDetails.proxy")}</p>
-            </div>
-            {form.proxyConfig?.host ? (
-              <Badge variant="secondary" className="text-xs">
-                {form.proxyConfig.type?.toUpperCase()} {form.proxyConfig.host}:
-                {form.proxyConfig.port}
-              </Badge>
-            ) : (
-              <Badge
-                variant="outline"
-                className="text-xs text-muted-foreground"
-              >
-                {t("hostDetails.proxy.none")}
-              </Badge>
-            )}
+        <Card className="p-3 space-y-2 bg-card border-border/80 overflow-hidden">
+          <div className="flex items-center gap-2">
+            <Globe size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">{t("hostDetails.proxy")}</p>
           </div>
-          <Button
-            variant="ghost"
-            className="w-full h-9 justify-start gap-2 text-sm"
-            onClick={() => setActiveSubPanel("proxy")}
-          >
-            <Plus size={14} />
-            {form.proxyConfig?.host
-              ? t("hostDetails.proxy.edit")
-              : t("hostDetails.proxy.configure")}
-          </Button>
+          {form.proxyConfig?.host ? (
+            <button
+              className="w-full min-w-0 grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 p-2 rounded-md bg-secondary/50 hover:bg-secondary transition-colors cursor-pointer overflow-hidden"
+              onClick={() => setActiveSubPanel("proxy")}
+            >
+              <Badge variant="secondary" className="text-xs shrink-0">
+                {form.proxyConfig.type?.toUpperCase()}
+              </Badge>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span className="block min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm">
+                      {form.proxyConfig.host}:{form.proxyConfig.port}
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" align="start" className="max-w-xs break-all">
+                    {form.proxyConfig.type?.toUpperCase()} {form.proxyConfig.host}:{form.proxyConfig.port}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+              <X
+                size={14}
+                className="text-muted-foreground hover:text-destructive flex-shrink-0"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  clearProxyConfig();
+                }}
+              />
+            </button>
+          ) : (
+            <Button
+              variant="ghost"
+              className="w-full h-9 justify-start gap-2 text-sm"
+              onClick={() => setActiveSubPanel("proxy")}
+            >
+              <Plus size={14} />
+              {t("hostDetails.proxy.configure")}
+            </Button>
+          )}
         </Card>
 
         {/* Environment Variables */}
@@ -1466,36 +1858,15 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                 className="w-12 h-8 rounded-md border border-border/60 flex items-center justify-center text-[6px] font-mono overflow-hidden"
                 style={{
                   backgroundColor:
-                    TERMINAL_THEMES.find(
-                      (t) =>
-                        t.id ===
-                        (form.protocols?.find((p) => p.protocol === "telnet")
-                          ?.theme ||
-                          form.theme ||
-                          "flexoki-dark"),
-                    )?.colors.background || "#100F0F",
+                    customThemeStore.getThemeById(effectiveTelnetThemeId)?.colors.background || "#100F0F",
                   color:
-                    TERMINAL_THEMES.find(
-                      (t) =>
-                        t.id ===
-                        (form.protocols?.find((p) => p.protocol === "telnet")
-                          ?.theme ||
-                          form.theme ||
-                          "flexoki-dark"),
-                    )?.colors.foreground || "#CECDC3",
+                    customThemeStore.getThemeById(effectiveTelnetThemeId)?.colors.foreground || "#CECDC3",
                 }}
               >
                 <div className="p-0.5">
                   <div
                     style={{
-                      color: TERMINAL_THEMES.find(
-                        (t) =>
-                          t.id ===
-                          (form.protocols?.find((p) => p.protocol === "telnet")
-                            ?.theme ||
-                            form.theme ||
-                            "flexoki-dark"),
-                      )?.colors.green,
+                      color: customThemeStore.getThemeById(effectiveTelnetThemeId)?.colors.green,
                     }}
                   >
                     $
@@ -1503,14 +1874,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                 </div>
               </div>
               <span className="text-sm flex-1">
-                {TERMINAL_THEMES.find(
-                  (t) =>
-                    t.id ===
-                    (form.protocols?.find((p) => p.protocol === "telnet")
-                      ?.theme ||
-                      form.theme ||
-                      "flexoki-dark"),
-                )?.name || "Flexoki Dark"}
+                {customThemeStore.getThemeById(effectiveTelnetThemeId)?.name || "Flexoki Dark"}
               </span>
             </button>
           </Card>

components/HostForm.tsx

@@ -1,382 +0,0 @@
-import { Key, Lock, Plus, Save, Server, X } from "lucide-react";
-import React, { useEffect, useState } from "react";
-import { useI18n } from "../application/i18n/I18nProvider";
-import { cn } from "../lib/utils";
-import { Host, SSHKey } from "../types";
-import { Button } from "./ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "./ui/dialog";
-import { Input } from "./ui/input";
-import { Label } from "./ui/label";
-import { Switch } from "./ui/switch";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./ui/select";
-
-interface HostFormProps {
-  initialData?: Host | null;
-  availableKeys: SSHKey[];
-  groups: string[];
-  onSave: (host: Host) => void;
-  onCancel: () => void;
-}
-
-const HostForm: React.FC<HostFormProps> = ({
-  initialData,
-  availableKeys,
-  groups,
-  onSave,
-  onCancel,
-}) => {
-  const { t } = useI18n();
-  const [formData, setFormData] = useState<Partial<Host>>(
-    initialData || {
-      label: "",
-      hostname: "",
-      port: 22,
-      username: "root",
-      tags: [],
-      os: "linux",
-      group: "General",
-      identityFileId: "",
-    },
-  );
-
-  const [authType, setAuthType] = useState<"password" | "key">(
-    initialData?.identityFileId ? "key" : "password",
-  );
-
-  const [tagInput, setTagInput] = useState("");
-
-  const handleAddTag = () => {
-    const tag = tagInput.trim();
-    if (tag && !formData.tags?.includes(tag)) {
-      setFormData((prev) => ({ ...prev, tags: [...(prev.tags || []), tag] }));
-      setTagInput("");
-    }
-  };
-
-  const handleRemoveTag = (tagToRemove: string) => {
-    setFormData((prev) => ({
-      ...prev,
-      tags: (prev.tags || []).filter((t) => t !== tagToRemove),
-    }));
-  };
-
-  const handleTagKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      handleAddTag();
-    }
-  };
-
-  // Effect to ensure we have a valid auth state if switching back and forth
-  useEffect(() => {
-    if (authType === "password") {
-      setFormData((prev) => ({ ...prev, identityFileId: "" }));
-    } else if (
-      authType === "key" &&
-      !formData.identityFileId &&
-      availableKeys.length > 0
-    ) {
-      // Default to first key if none selected
-      setFormData((prev) => ({ ...prev, identityFileId: availableKeys[0].id }));
-    }
-  }, [authType, availableKeys, formData.identityFileId]);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (formData.label && formData.hostname && formData.username) {
-      onSave({
-        ...formData,
-        id: initialData?.id || crypto.randomUUID(),
-        tags: formData.tags || [],
-        port: formData.port || 22,
-        group: formData.group || "General",
-        identityFileId:
-          authType === "key" ? formData.identityFileId : undefined,
-        createdAt: initialData?.createdAt || Date.now(),
-      } as Host);
-    }
-  };
-
-  return (
-    <Dialog open={true} onOpenChange={() => onCancel()}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Server className="h-5 w-5 text-primary" />
-            {initialData ? t("hostForm.title.edit") : t("hostForm.title.new")}
-          </DialogTitle>
-          <DialogDescription className="sr-only">
-            {initialData ? t("hostForm.desc.edit") : t("hostForm.desc.new")}
-          </DialogDescription>
-        </DialogHeader>
-
-        <form onSubmit={handleSubmit} className="grid gap-4 py-4">
-          <div className="grid gap-2">
-            <Label htmlFor="label">{t("hostForm.field.label")}</Label>
-            <Input
-              id="label"
-              placeholder={t("hostForm.placeholder.label")}
-              value={formData.label}
-              onChange={(e) =>
-                setFormData({ ...formData, label: e.target.value })
-              }
-              required
-            />
-          </div>
-
-          <div className="grid grid-cols-3 gap-4">
-            <div className="col-span-2 grid gap-2">
-              <Label htmlFor="hostname">{t("hostForm.field.hostname")}</Label>
-              <Input
-                id="hostname"
-                placeholder={t("hostForm.placeholder.hostname")}
-                value={formData.hostname}
-                onChange={(e) =>
-                  setFormData({ ...formData, hostname: e.target.value })
-                }
-                required
-              />
-            </div>
-            <div className="grid gap-2">
-              <Label htmlFor="port">{t("hostForm.field.port")}</Label>
-              <Input
-                id="port"
-                type="number"
-                value={formData.port}
-                onChange={(e) =>
-                  setFormData({ ...formData, port: parseInt(e.target.value) })
-                }
-                required
-              />
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div className="grid gap-2">
-              <Label htmlFor="username">{t("hostForm.field.username")}</Label>
-              <Input
-                id="username"
-                value={formData.username}
-                onChange={(e) =>
-                  setFormData({ ...formData, username: e.target.value })
-                }
-                required
-              />
-            </div>
-            <div className="grid gap-2">
-              <Label htmlFor="os">{t("hostForm.field.osType")}</Label>
-              <Select
-                value={formData.os}
-                onValueChange={(val: "linux" | "windows" | "macos") =>
-                  setFormData({ ...formData, os: val })
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder={t("hostForm.placeholder.selectOs")} />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="linux">Linux</SelectItem>
-                  <SelectItem value="windows">Windows</SelectItem>
-                  <SelectItem value="macos">macOS</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-
-          <div className="grid gap-2">
-            <Label htmlFor="group">{t("hostForm.field.group")}</Label>
-            <Input
-              id="group"
-              placeholder={t("hostForm.placeholder.group")}
-              value={formData.group}
-              onChange={(e) =>
-                setFormData({ ...formData, group: e.target.value })
-              }
-              list="group-suggestions"
-              autoComplete="off"
-            />
-            <datalist id="group-suggestions">
-              {groups.map((g) => (
-                <option key={g} value={g} />
-              ))}
-            </datalist>
-          </div>
-
-          <div className="grid gap-2">
-            <Label htmlFor="tags">{t("hostForm.field.tags")}</Label>
-            <div className="flex gap-2">
-              <Input
-                id="tags"
-                placeholder={t("hostForm.placeholder.addTag")}
-                value={tagInput}
-                onChange={(e) => setTagInput(e.target.value)}
-                onKeyDown={handleTagKeyDown}
-                className="flex-1"
-              />
-              <Button
-                type="button"
-                variant="secondary"
-                size="icon"
-                onClick={handleAddTag}
-                disabled={!tagInput.trim()}
-              >
-                <Plus size={16} />
-              </Button>
-            </div>
-            {formData.tags && formData.tags.length > 0 && (
-              <div className="flex flex-wrap gap-1.5 mt-1">
-                {formData.tags.map((tag) => (
-                  <span
-                    key={tag}
-                    className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-primary/10 text-primary text-xs"
-                  >
-                    {tag}
-                    <button
-                      type="button"
-                      onClick={() => handleRemoveTag(tag)}
-                      className="hover:bg-primary/20 rounded-full p-0.5"
-                    >
-                      <X size={12} />
-                    </button>
-                  </span>
-                ))}
-              </div>
-            )}
-          </div>
-
-          <div className="space-y-3 pt-2">
-            <div className="flex items-center justify-between space-x-2 border rounded-md p-3">
-              <div className="space-y-0.5">
-                <Label htmlFor="sftp-sudo" className="text-base">
-                  {t("hostDetails.sftp.sudo")}
-                </Label>
-                <p className="text-xs text-muted-foreground">
-                  {t("hostDetails.sftp.sudo.desc")}
-                </p>
-                {formData.sftpSudo && authType === "key" && (
-                  <p className="text-xs text-amber-500 mt-1">
-                    {t("hostDetails.sftp.sudo.passwordWarning")}
-                  </p>
-                )}
-              </div>
-              <Switch
-                id="sftp-sudo"
-                checked={formData.sftpSudo || false}
-                onCheckedChange={(checked) =>
-                  setFormData({ ...formData, sftpSudo: checked })
-                }
-              />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="sftp-encoding">
-                {t("hostDetails.sftp.encoding")}
-              </Label>
-              <Select
-                value={formData.sftpEncoding || "auto"}
-                onValueChange={(val) =>
-                  setFormData({ ...formData, sftpEncoding: val as Host["sftpEncoding"] })
-                }
-              >
-                <SelectTrigger id="sftp-encoding">
-                  <SelectValue placeholder={t("sftp.encoding.label")} />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="auto">{t("sftp.encoding.auto")}</SelectItem>
-                  <SelectItem value="utf-8">{t("sftp.encoding.utf8")}</SelectItem>
-                  <SelectItem value="gb18030">{t("sftp.encoding.gb18030")}</SelectItem>
-                </SelectContent>
-              </Select>
-              <p className="text-xs text-muted-foreground">
-                {t("hostDetails.sftp.encoding.desc")}
-              </p>
-            </div>
-
-            <Label>{t("hostForm.auth.method")}</Label>
-            <div className="grid grid-cols-2 gap-4">
-              <div
-                className={cn(
-                  "border rounded-md p-3 flex flex-col items-center justify-center gap-2 cursor-pointer transition-all hover:bg-accent/50",
-                  authType === "password"
-                    ? "border-primary bg-primary/5 text-primary ring-1 ring-primary"
-                    : "text-muted-foreground",
-                )}
-                onClick={() => setAuthType("password")}
-              >
-                <Lock size={20} />
-                <span className="text-xs font-medium">{t("hostForm.auth.password")}</span>
-              </div>
-              <div
-                className={cn(
-                  "border rounded-md p-3 flex flex-col items-center justify-center gap-2 cursor-pointer transition-all hover:bg-accent/50",
-                  authType === "key"
-                    ? "border-primary bg-primary/5 text-primary ring-1 ring-primary"
-                    : "text-muted-foreground",
-                )}
-                onClick={() => setAuthType("key")}
-              >
-                <Key size={20} />
-                <span className="text-xs font-medium">{t("hostForm.auth.sshKey")}</span>
-              </div>
-            </div>
-
-            {authType === "key" && (
-              <div className="animate-in fade-in zoom-in-95 duration-200">
-                <Select
-                  value={formData.identityFileId || ""}
-                  onValueChange={(val) =>
-                    setFormData({ ...formData, identityFileId: val })
-                  }
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder={t("hostForm.auth.selectKey")} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {availableKeys.map((key) => (
-                      <SelectItem key={key.id} value={key.id}>
-                        {key.label} ({key.type})
-                      </SelectItem>
-                    ))}
-                    {availableKeys.length === 0 && (
-                      <SelectItem value="none" disabled>
-                        {t("hostForm.auth.noKeys")}
-                      </SelectItem>
-                    )}
-                  </SelectContent>
-                </Select>
-                {availableKeys.length === 0 && (
-                  <p className="text-[10px] text-destructive mt-1">
-                    {t("hostForm.auth.noKeysHint")}
-                  </p>
-                )}
-              </div>
-            )}
-          </div>
-
-          <DialogFooter>
-            <Button type="button" variant="ghost" onClick={onCancel}>
-              {t("common.cancel")}
-            </Button>
-            <Button type="submit">
-              <Save className="mr-2 h-4 w-4" /> {t("hostForm.saveHost")}
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default HostForm;

components/HostTreeView.tsx

@@ -61,6 +61,7 @@ interface TreeNodeProps {
   toggleHostSelection?: (hostId: string) => void;
 }
 
+
 const TreeNode: React.FC<TreeNodeProps> = ({
   node,
   depth,
@@ -89,6 +90,7 @@ const TreeNode: React.FC<TreeNodeProps> = ({
   const hasChildren = node.children && Object.keys(node.children).length > 0;
   const paddingLeft = `${depth * 20 + 12}px`;
   const isManaged = managedGroupPaths?.has(node.path) ?? false;
+  const hostsCountInNode = node.totalHostCount ?? node.hosts.length;
 
   const childNodes = useMemo(() => {
     if (!node.children) return [];
@@ -171,7 +173,7 @@ const TreeNode: React.FC<TreeNodeProps> = ({
                 )}
                 {(node.hosts.length > 0 || hasChildren) && (
                   <span className="text-xs opacity-70 bg-background/50 px-2 py-0.5 rounded-full border border-border">
-                    {node.hosts.length}
+                    {hostsCountInNode}
                   </span>
                 )}
               </div>

components/KeyManager.tsx

@@ -1,411 +0,0 @@
-import {
-  Key,
-  LayoutGrid,
-  List as ListIcon,
-  Pencil,
-  Plus,
-  Search,
-  Shield,
-  Trash2,
-} from "lucide-react";
-import React, { useMemo, useState } from "react";
-import { useI18n } from "../application/i18n/I18nProvider";
-import { KeyType } from "../domain/models";
-import { cn } from "../lib/utils";
-import { SSHKey } from "../types";
-import { Button } from "./ui/button";
-import { Card, CardDescription, CardTitle } from "./ui/card";
-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";
-
-interface KeyManagerProps {
-  keys: SSHKey[];
-  onSave: (key: SSHKey) => void;
-  onDelete: (id: string) => void;
-}
-
-const KeyManager: React.FC<KeyManagerProps> = ({ keys, onSave, onDelete }) => {
-  const { t } = useI18n();
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [panelMode, setPanelMode] = useState<"new" | "edit">("new");
-  const [draftKey, setDraftKey] = useState<Partial<SSHKey>>({
-    id: "",
-    label: "",
-    type: "RSA",
-    privateKey: "",
-    publicKey: "",
-    created: Date.now(),
-  });
-  const [generateMode, setGenerateMode] = useState(false);
-  const [search, setSearch] = useState("");
-  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
-
-  const handleGenerate = () => {
-    // Simulate Key Generation
-    const mockKey =
-      `-----BEGIN ${draftKey.type} PRIVATE KEY-----\n` +
-      `MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQC${Math.random().toString(36).substring(7)}\n` +
-      `... (simulated generated content) ...\n` +
-      `-----END ${draftKey.type} PRIVATE KEY-----`;
-
-    setDraftKey({ ...draftKey, privateKey: mockKey });
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!draftKey.label || !draftKey.privateKey) return;
-
-    const payload: SSHKey = {
-      id: draftKey.id || crypto.randomUUID(),
-      label: draftKey.label,
-      type: (draftKey.type as KeyType) || "RSA",
-      privateKey: draftKey.privateKey,
-      publicKey: draftKey.publicKey?.trim() || undefined,
-      created: draftKey.created || Date.now(),
-      source: draftKey.source || (generateMode ? "generated" : "imported"),
-      category: draftKey.category || "key",
-    };
-    onSave(payload);
-    setIsDialogOpen(false);
-    setGenerateMode(false);
-  };
-
-  const openPanelForKey = (key: SSHKey) => {
-    setPanelMode("edit");
-    setDraftKey({ ...key });
-    setIsDialogOpen(true);
-    setGenerateMode(false);
-  };
-
-  const openPanelNew = (isGenerate = false) => {
-    setPanelMode("new");
-    setGenerateMode(isGenerate);
-    setDraftKey({
-      id: "",
-      label: "",
-      type: "RSA",
-      privateKey: isGenerate
-        ? "Click generate to create a new key pair..."
-        : "",
-      publicKey: "",
-      created: Date.now(),
-    });
-    setIsDialogOpen(true);
-  };
-
-  const handleDelete = (id: string) => {
-    onDelete(id);
-    if (draftKey.id === id) {
-      setIsDialogOpen(false);
-      setDraftKey({
-        id: "",
-        label: "",
-        type: "RSA",
-        privateKey: "",
-        publicKey: "",
-        created: Date.now(),
-      });
-    }
-  };
-
-  const filteredKeys = useMemo(() => {
-    const term = search.trim().toLowerCase();
-    return keys.filter((k) => {
-      if (!term) return true;
-      return (
-        k.label.toLowerCase().includes(term) ||
-        (k.type || "").toString().toLowerCase().includes(term)
-      );
-    });
-  }, [keys, search]);
-
-  const derivedPublicKey = useMemo(() => {
-    if (draftKey.publicKey) return draftKey.publicKey;
-    if (!draftKey.label) return "Generated By netcatty";
-    return `ssh-${(draftKey.type || "ed25519").toLowerCase()} AAAAC3NzaC1lZDI1NTE5AAAA${(
-      draftKey.label || "netcatty"
-    )
-      .replace(/\s+/g, "")
-      .slice(0, 8)} Generated By netcatty`;
-  }, [draftKey.label, draftKey.type, draftKey.publicKey]);
-
-  return (
-    <div className="px-2.5 py-2.5 lg:px-3 lg:py-3 h-full overflow-y-auto space-y-3.5 relative">
-      <div className="flex flex-wrap items-center gap-3 bg-secondary/60 border border-border/70 rounded-xl px-2 py-1.5 shadow-sm">
-        <Button
-          size="sm"
-          variant="secondary"
-          className="h-8 px-3 gap-2"
-          disabled
-        >
-          Key
-          <span className="text-[10px] px-2 rounded-full h-5 min-w-[22px] flex items-center justify-center bg-primary/10 text-primary border border-border/70">
-            {keys.length}
-          </span>
-        </Button>
-        <div className="ml-auto flex items-center gap-2">
-          <div className="relative">
-            <Search
-              size={14}
-              className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
-            />
-            <Input
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              placeholder="Search keys..."
-              className="h-9 pl-8 w-44 md:w-56"
-            />
-          </div>
-          <Button
-            size="icon"
-            variant={viewMode === "grid" ? "secondary" : "ghost"}
-            className="h-9 w-9"
-            onClick={() => setViewMode("grid")}
-          >
-            <LayoutGrid size={16} />
-          </Button>
-          <Button
-            size="icon"
-            variant={viewMode === "list" ? "secondary" : "ghost"}
-            className="h-9 w-9"
-            onClick={() => setViewMode("list")}
-          >
-            <ListIcon size={16} />
-          </Button>
-          <Button size="sm" onClick={() => openPanelNew(false)}>
-            <Plus size={14} className="mr-2" /> Import
-          </Button>
-          <Button
-            size="sm"
-            variant="secondary"
-            onClick={() => openPanelNew(true)}
-          >
-            Generate
-          </Button>
-        </div>
-      </div>
-
-      <div className="space-y-3">
-        <div className="flex items-center justify-between px-1">
-          <h2 className="text-base font-semibold text-muted-foreground">
-            Keys
-          </h2>
-        </div>
-
-        <div className="space-y-3">
-          {filteredKeys.length === 0 && (
-            <div className="flex flex-col items-center justify-center h-64 text-muted-foreground">
-              <div className="h-16 w-16 rounded-2xl bg-secondary/80 flex items-center justify-center mb-4">
-                <Shield size={32} className="opacity-60" />
-              </div>
-              <h3 className="text-lg font-semibold text-foreground mb-2">
-                Set up your keys
-              </h3>
-              <p className="text-sm text-center max-w-sm">
-                Import or generate SSH keys for secure authentication.
-              </p>
-            </div>
-          )}
-
-          <div
-            className={
-              viewMode === "grid"
-                ? "grid gap-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
-                : "flex flex-col gap-0"
-            }
-          >
-            {filteredKeys.map((key) => (
-              <Card
-                key={key.id}
-                className={cn(
-                  "group cursor-pointer soft-card elevate rounded-xl",
-                  viewMode === "grid"
-                    ? "h-[68px] px-3 py-2"
-                    : "h-14 px-3 py-2 hover:bg-secondary/60 rounded-lg transition-colors",
-                )}
-                onClick={() => openPanelForKey(key)}
-              >
-                <div className="flex items-center gap-3 h-full">
-                  <div className="h-9 w-9 rounded-md bg-primary/15 text-primary flex items-center justify-center">
-                    <Key size={16} />
-                  </div>
-                  <div className="min-w-0 flex-1">
-                    <CardTitle className="text-sm font-semibold truncate">
-                      {key.label}
-                    </CardTitle>
-                    <CardDescription className="text-[11px] font-mono text-muted-foreground truncate">
-                      Type {key.type}
-                    </CardDescription>
-                    <div className="text-[10px] text-muted-foreground/80 font-mono truncate">
-                      SHA256:{key.id.substring(0, 16)}...
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      className="h-8 w-8"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        openPanelForKey(key);
-                      }}
-                    >
-                      <Pencil size={14} />
-                    </Button>
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      className="h-8 w-8 text-destructive hover:text-destructive"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleDelete(key.id);
-                      }}
-                    >
-                      <Trash2 size={14} />
-                    </Button>
-                  </div>
-                </div>
-              </Card>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>
-              {panelMode === "new"
-                ? t("keychain.keyDialog.newTitle")
-                : t("keychain.keyDialog.editTitle")}
-            </DialogTitle>
-            <DialogDescription className="sr-only">
-              {panelMode === "new"
-                ? t("keychain.keyDialog.newDesc")
-                : t("keychain.keyDialog.editDesc")}
-            </DialogDescription>
-          </DialogHeader>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div className="space-y-2">
-              <Label>{t("keychain.field.label")}</Label>
-              <Input
-                value={draftKey.label}
-                onChange={(e) =>
-                  setDraftKey({ ...draftKey, label: e.target.value })
-                }
-                placeholder={t("keychain.field.labelPlaceholder")}
-                required
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label>{t("keychain.field.privateKeyRequired")}</Label>
-              <Textarea
-                value={draftKey.privateKey}
-                onChange={(e) =>
-                  setDraftKey({ ...draftKey, privateKey: e.target.value })
-                }
-                placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
-                className="min-h-[160px] font-mono text-xs"
-                required
-              />
-              {generateMode && (
-                <Button
-                  type="button"
-                  size="sm"
-                  variant="secondary"
-                  onClick={handleGenerate}
-                >
-                  {t("keychain.generate.generate")}
-                </Button>
-              )}
-            </div>
-
-            <div className="space-y-2">
-              <Label>{t("keychain.field.publicKey")}</Label>
-              <Textarea
-                value={derivedPublicKey}
-                onChange={(e) =>
-                  setDraftKey({ ...draftKey, publicKey: e.target.value })
-                }
-                placeholder="ssh-ed25519 AAAAC3... user@host"
-                className="min-h-[90px] font-mono text-xs"
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label className="flex items-center gap-2">
-                {t("terminal.auth.certificate")}{" "}
-                <span className="text-[10px] px-2 py-0.5 rounded-full bg-muted text-muted-foreground">
-                  {t("common.optional")}
-                </span>
-              </Label>
-              <Textarea
-                placeholder={t("keychain.field.certificatePlaceholder")}
-                className="min-h-[80px] text-xs"
-              />
-            </div>
-
-            <div className="border border-dashed border-border/80 rounded-xl p-4 text-center space-y-2 bg-background/60">
-              <div className="text-sm text-muted-foreground">
-                {t("keychain.import.dropHint")}
-              </div>
-              <Button
-                type="button"
-                variant="secondary"
-                onClick={() => {
-                  // mock file import
-                  setDraftKey({
-                    ...draftKey,
-                    label: draftKey.label || t("keychain.import.importedKeyLabel"),
-                    privateKey:
-                      draftKey.privateKey ||
-                      "-----BEGIN OPENSSH PRIVATE KEY-----\nAAAAC3NzaC1lZDI1NTE5AAAA\n-----END OPENSSH PRIVATE KEY-----",
-                  });
-                }}
-              >
-                {t("keychain.import.importFromFile")}
-              </Button>
-            </div>
-
-            <DialogFooter>
-              {panelMode === "edit" && draftKey.id && (
-                <Button
-                  type="button"
-                  variant="ghost"
-                  className="text-destructive mr-auto"
-                  onClick={() => handleDelete(draftKey.id!)}
-                >
-                  {t("common.delete")}
-                </Button>
-              )}
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={() => setIsDialogOpen(false)}
-              >
-                {t("common.cancel")}
-              </Button>
-              <Button type="submit">
-                {panelMode === "new"
-                  ? t("keychain.import.saveKey")
-                  : t("keychain.keyDialog.updateKey")}
-              </Button>
-            </DialogFooter>
-          </form>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-};
-
-export default KeyManager;

components/KeychainManager.tsx

@@ -450,11 +450,6 @@ echo $3 >> "$FILE"`);
     [onDeleteIdentity, panel, closePanel],
   );
 
-  // Copy to clipboard
-  const _copyToClipboard = useCallback((_text: string) => {
-    navigator.clipboard.writeText(_text);
-  }, []);
-
   // Get icon for key source
   const getKeyIcon = (key: SSHKey) => {
     if (key.certificate) return <BadgeCheck size={16} />;
@@ -506,46 +501,6 @@ echo $3 >> "$FILE"`);
     [],
   );
 
-  // Handle drag and drop
-  const _handleDrop = useCallback((event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const file = event.dataTransfer.files?.[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      const content = e.target?.result as string;
-      if (content) {
-        let detectedType: KeyType = "ED25519";
-        const lc = content.toLowerCase();
-        if (lc.includes("rsa")) detectedType = "RSA";
-        else if (lc.includes("ecdsa") || lc.includes("ec private"))
-          detectedType = "ECDSA";
-        else if (lc.includes("ed25519")) detectedType = "ED25519";
-
-        const label = file.name.replace(/\.(pem|key|pub|ppk)$/i, "");
-
-        setDraftKey((prev) => ({
-          ...prev,
-          privateKey: content,
-          label: prev.label || label,
-          type: detectedType,
-        }));
-      }
-    };
-    reader.readAsText(file);
-  }, []);
-
-  const _handleDragOver = useCallback(
-    (event: React.DragEvent<HTMLDivElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    [],
-  );
-
   return (
     <div className="h-full flex relative">
       {/* Hidden file input */}
@@ -666,7 +621,7 @@ echo $3 >> "$FILE"`);
                   </Button>
                 </DropdownTrigger>
               </div>
-              <DropdownContent className="w-44" align="start" alignToParent>
+              <DropdownContent className="w-48" align="start" alignToParent>
                 <Button
                   variant="ghost"
                   className="w-full justify-start gap-2"

components/KnownHostsManager.tsx

@@ -254,25 +254,25 @@ const KnownHostsManager: React.FC<KnownHostsManagerProps> = ({
   const RENDER_LIMIT = 100; // Limit rendered items for performance
 
   // Define handleScanSystem before useEffect that depends on it
-  const handleScanSystem = useCallback(async () => {
+  const handleScanSystem = useCallback(async (silent = false) => {
     setIsScanning(true);
     try {
       const content = await readKnownHosts();
       if (content === undefined) {
-        toast.error(
+        if (!silent) toast.error(
           t("knownHosts.toast.scanUnavailable"),
           t("vault.nav.knownHosts"),
         );
         return;
       }
       if (!content) {
-        toast.info(t("knownHosts.toast.scanNoFile"), t("vault.nav.knownHosts"));
+        if (!silent) toast.info(t("knownHosts.toast.scanNoFile"), t("vault.nav.knownHosts"));
         return;
       }
 
       const parsed = parseKnownHostsFile(content);
       if (parsed.length === 0) {
-        toast.info(
+        if (!silent) toast.info(
           t("knownHosts.toast.scanNoEntries"),
           t("vault.nav.knownHosts"),
         );
@@ -288,16 +288,16 @@ const KnownHostsManager: React.FC<KnownHostsManagerProps> = ({
 
       if (newHosts.length > 0) {
         onImportFromFile(newHosts);
-        toast.success(
+        if (!silent) toast.success(
           t("knownHosts.toast.scanImported", { count: newHosts.length }),
           t("vault.nav.knownHosts"),
         );
       } else {
-        toast.info(t("knownHosts.toast.scanNoNew"), t("vault.nav.knownHosts"));
+        if (!silent) toast.info(t("knownHosts.toast.scanNoNew"), t("vault.nav.knownHosts"));
       }
     } catch (err) {
       logger.error("Failed to scan system known_hosts:", err);
-      toast.error(
+      if (!silent) toast.error(
         err instanceof Error ? err.message : t("knownHosts.toast.scanFailed"),
         t("vault.nav.knownHosts"),
       );
@@ -307,13 +307,12 @@ const KnownHostsManager: React.FC<KnownHostsManagerProps> = ({
     }
   }, [knownHosts, onRefresh, onImportFromFile, readKnownHosts, t]);
 
-  // Auto-scan on first mount
+  // Auto-scan on first mount (silent — don't show toasts for missing known_hosts)
   useEffect(() => {
     if (!hasScannedRef.current) {
       hasScannedRef.current = true;
-      // Delay scan slightly to not block initial render
       const timer = setTimeout(() => {
-        handleScanSystem();
+        handleScanSystem(true);
       }, 100);
       return () => clearTimeout(timer);
     }
@@ -515,7 +514,7 @@ const KnownHostsManager: React.FC<KnownHostsManagerProps> = ({
             variant="ghost"
             size="sm"
             className="h-9 px-3 text-xs"
-            onClick={handleScanSystem}
+            onClick={() => handleScanSystem()}
             disabled={isScanning}
           >
             <RefreshCw
@@ -572,7 +571,7 @@ const KnownHostsManager: React.FC<KnownHostsManagerProps> = ({
               <div className="flex gap-2">
                 <Button
                   variant="secondary"
-                  onClick={handleScanSystem}
+                  onClick={() => handleScanSystem()}
                   disabled={isScanning}
                 >
                   <RefreshCw

components/LogView.tsx

@@ -8,6 +8,7 @@ import { useI18n } from "../application/i18n/I18nProvider";
 import { cn } from "../lib/utils";
 import { ConnectionLog, TerminalTheme } from "../types";
 import { TERMINAL_THEMES } from "../infrastructure/config/terminalThemes";
+import { useCustomThemes } from "../application/state/customThemeStore";
 import { Button } from "./ui/button";
 import ThemeCustomizeModal from "./terminal/ThemeCustomizeModal";
 
@@ -36,13 +37,18 @@ const LogViewComponent: React.FC<LogViewProps> = ({
     const [themeModalOpen, setThemeModalOpen] = useState(false);
     const [isExporting, setIsExporting] = useState(false);
 
+    // Subscribe to custom theme changes so editing triggers re-render
+    const customThemes = useCustomThemes();
+
     // 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) || defaultTerminalTheme;
+            return TERMINAL_THEMES.find(t => t.id === log.themeId)
+                || customThemes.find(t => t.id === log.themeId)
+                || defaultTerminalTheme;
         }
         return defaultTerminalTheme;
-    }, [log.themeId, defaultTerminalTheme]);
+    }, [log.themeId, defaultTerminalTheme, customThemes]);
 
     const currentFontSize = log.fontSize ?? defaultFontSize;
 

components/PortForwardingNew.tsx

@@ -130,7 +130,9 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
         const result = await startTunnel(
           rule,
           _host,
-          keys.map((k) => ({ id: k.id, privateKey: k.privateKey })),
+          hosts,
+          keys,
+          identities,
           (status, error) => {
             // Show toast on error (only once)
             if (status === "error" && error && !errorShown) {
@@ -159,7 +161,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
         });
       }
     },
-    [hosts, keys, setRuleStatus, startTunnel, t],
+    [hosts, identities, keys, setRuleStatus, startTunnel, t],
   );
 
   // Stop a port forwarding tunnel
@@ -307,8 +309,6 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
     const label =
       newFormDraft.label?.trim() ||
       (() => {
-        // Host lookup reserved for future label enhancement (e.g., "Local:8080 → api.example.com:80 via server1")
-        const _host = hosts.find((h) => h.id === newFormDraft.hostId);
         switch (newFormDraft.type) {
           case "local":
             return `Local:${newFormDraft.localPort} → ${newFormDraft.remoteHost}:${newFormDraft.remotePort}`;
@@ -546,12 +546,6 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
     );
   };
 
-  // Handle skip wizard (just save with defaults)
-  const _skipWizard = () => {
-    setShowWizard(false);
-    resetWizard();
-  };
-
   // Render wizard panel content
   const hasRules = filteredRules.length > 0;
 

components/QuickConnectWizard.tsx

@@ -13,8 +13,9 @@ 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, KnownHost, SSHKey } from "../types";
+import { Host, SSHKey } from "../types";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import { Label } from "./ui/label";
@@ -30,7 +31,6 @@ interface QuickConnectWizardProps {
   open: boolean;
   target: QuickConnectTarget;
   keys: SSHKey[];
-  knownHosts: KnownHost[];
   warnings?: string[];
   onConnect: (host: Host) => void;
   onSaveHost?: (host: Host) => void;
@@ -42,7 +42,6 @@ const QuickConnectWizard: React.FC<QuickConnectWizardProps> = ({
   open,
   target,
   keys,
-  knownHosts,
   warnings,
   onConnect,
   onSaveHost,
@@ -69,16 +68,7 @@ const QuickConnectWizard: React.FC<QuickConnectWizardProps> = ({
   const [password, setPassword] = useState("");
   const [selectedKeyId, setSelectedKeyId] = useState<string | null>(null);
   const [showPassword, setShowPassword] = useState(false);
-  const [saveCredentials, _setSaveCredentials] = useState(true);
-
-  // Check if host is in known hosts
-  const _existingKnownHost = useMemo(() => {
-    return knownHosts.find(
-      (kh) =>
-        kh.hostname === target.hostname &&
-        (kh.port === port || (!kh.port && port === 22)),
-    );
-  }, [knownHosts, target.hostname, port]);
+  const [saveCredentials] = useState(true);
 
   // Reset state when target changes
   React.useEffect(() => {
@@ -542,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";
@@ -98,13 +98,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
@@ -287,7 +291,7 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
                 const isSelected = idx === selectedIndex;
                 const icon =
                   tabId === "vault" ? (
-                    <Shield size={16} />
+                    <FolderLock size={16} />
                   ) : (
                     <Folder size={16} />
                   );

components/SFTPModal.tsx

@@ -1,753 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useI18n } from "../application/i18n/I18nProvider";
-import { useSftpBackend } from "../application/state/useSftpBackend";
-import { useSftpFileAssociations } from "../application/state/useSftpFileAssociations";
-import { useSettingsState } from "../application/state/useSettingsState";
-import { useSftpModalTransfers } from "./sftp-modal/hooks/useSftpModalTransfers";
-import { Host, RemoteFile, SftpFilenameEncoding } from "../types";
-import { filterHiddenFiles } from "./sftp";
-import { DropEntry } from "../lib/sftpFileUtils";
-import FileOpenerDialog from "./FileOpenerDialog";
-import TextEditorModal from "./TextEditorModal";
-import { SftpModalFileList } from "./sftp-modal/SftpModalFileList";
-import { SftpModalDialogs } from "./sftp-modal/SftpModalDialogs";
-import { SftpModalFooter } from "./sftp-modal/SftpModalFooter";
-import { SftpModalHeader } from "./sftp-modal/SftpModalHeader";
-import { SftpModalUploadTasks } from "./sftp-modal/SftpModalUploadTasks";
-import { formatBytes, formatDate } from "./sftp-modal/utils";
-import { useSftpModalSorting } from "./sftp-modal/hooks/useSftpModalSorting";
-import { useSftpModalVirtualList } from "./sftp-modal/hooks/useSftpModalVirtualList";
-import { useSftpModalPath } from "./sftp-modal/hooks/useSftpModalPath";
-import { useSftpModalSelection } from "./sftp-modal/hooks/useSftpModalSelection";
-import { useSftpModalSession } from "./sftp-modal/hooks/useSftpModalSession";
-import { useSftpModalFileActions } from "./sftp-modal/hooks/useSftpModalFileActions";
-import { useSftpModalKeyboardShortcuts } from "./sftp-modal/hooks/useSftpModalKeyboardShortcuts";
-import { joinPath, isRootPath, getParentPath } from "./sftp-modal/pathUtils";
-import { toast } from "./ui/toast";
-import { Dialog, DialogContent } from "./ui/dialog";
-
-interface SFTPModalProps {
-  host: Host;
-  credentials: {
-    username?: string;
-    hostname: string;
-    port?: number;
-    password?: string;
-    privateKey?: string;
-    certificate?: string;
-    passphrase?: string;
-    publicKey?: string;
-    keyId?: string;
-    keySource?: 'generated' | 'imported';
-    proxy?: NetcattyProxyConfig;
-    jumpHosts?: NetcattyJumpHost[];
-    sftpSudo?: boolean;
-  };
-  open: boolean;
-  onClose: () => void;
-  /** Initial path to open in SFTP. If not accessible, falls back to home directory. */
-  initialPath?: string;
-  /** Initial entries to upload when SFTP modal opens. Used for drag-and-drop to terminal. */
-  initialEntriesToUpload?: DropEntry[];
-}
-
-const SFTPModal: React.FC<SFTPModalProps> = ({
-  host,
-  credentials,
-  open,
-  onClose,
-  initialPath,
-  initialEntriesToUpload,
-}) => {
-  const {
-    openSftp,
-    closeSftp: closeSftpBackend,
-    listSftp,
-    readSftp,
-    writeSftpBinaryWithProgress,
-    writeSftpBinary,
-    writeSftp,
-    deleteSftp,
-    mkdirSftp,
-    renameSftp,
-    chmodSftp,
-    statSftp,
-    listLocalDir,
-    readLocalFile,
-    writeLocalFile,
-    deleteLocalFile,
-    mkdirLocal,
-    getHomeDir,
-    selectApplication,
-    downloadSftpToTempAndOpen,
-    cancelSftpUpload,
-    startStreamTransfer,
-    cancelTransfer,
-    showSaveDialog,
-  } = useSftpBackend();
-  const { t } = useI18n();
-  const {
-    sftpAutoSync,
-    sftpShowHiddenFiles,
-    sftpUseCompressedUpload,
-    hotkeyScheme,
-    keyBindings,
-    editorWordWrap,
-    setEditorWordWrap,
-  } = useSettingsState();
-  const isLocalSession = host.protocol === "local";
-  const [filenameEncoding, setFilenameEncoding] = useState<SftpFilenameEncoding>(
-    host.sftpEncoding ?? "auto"
-  );
-  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set());
-  const inputRef = useRef<HTMLInputElement>(null);
-  const folderInputRef = useRef<HTMLInputElement>(null);
-  const navigatingRef = useRef(false);
-  const clearSelection = useCallback(() => setSelectedFiles(new Set()), []);
-
-  // Update filenameEncoding when host changes
-  useEffect(() => {
-    setFilenameEncoding(host.sftpEncoding ?? "auto");
-  }, [host.id, host.sftpEncoding]);
-
-  const listSftpWithEncoding = useCallback(
-    (sftpId: string, path: string) => listSftp(sftpId, path, filenameEncoding),
-    [listSftp, filenameEncoding],
-  );
-
-  const readSftpWithEncoding = useCallback(
-    (sftpId: string, path: string) => readSftp(sftpId, path, filenameEncoding),
-    [readSftp, filenameEncoding],
-  );
-
-  const writeSftpWithEncoding = useCallback(
-    (sftpId: string, path: string, data: string) =>
-      writeSftp(sftpId, path, data, filenameEncoding),
-    [writeSftp, filenameEncoding],
-  );
-
-  const writeSftpBinaryWithEncoding = useCallback(
-    (sftpId: string, path: string, data: ArrayBuffer) =>
-      writeSftpBinary(sftpId, path, data, filenameEncoding),
-    [writeSftpBinary, filenameEncoding],
-  );
-
-  const writeSftpBinaryWithProgressWithEncoding = useCallback(
-    (
-      sftpId: string,
-      path: string,
-      data: ArrayBuffer,
-      transferId: string,
-      onProgress?: (transferred: number, total: number, speed: number) => void,
-      onComplete?: () => void,
-      onError?: (error: string) => void,
-    ) =>
-      writeSftpBinaryWithProgress(
-        sftpId,
-        path,
-        data,
-        transferId,
-        filenameEncoding,
-        onProgress,
-        onComplete,
-        onError,
-      ),
-    [writeSftpBinaryWithProgress, filenameEncoding],
-  );
-
-  const deleteSftpWithEncoding = useCallback(
-    (sftpId: string, path: string) => deleteSftp(sftpId, path, filenameEncoding),
-    [deleteSftp, filenameEncoding],
-  );
-
-  const mkdirSftpWithEncoding = useCallback(
-    (sftpId: string, path: string) => mkdirSftp(sftpId, path, filenameEncoding),
-    [mkdirSftp, filenameEncoding],
-  );
-
-  const renameSftpWithEncoding = useCallback(
-    (sftpId: string, oldPath: string, newPath: string) =>
-      renameSftp(sftpId, oldPath, newPath, filenameEncoding),
-    [renameSftp, filenameEncoding],
-  );
-
-  const chmodSftpWithEncoding = useCallback(
-    (sftpId: string, path: string, mode: string) =>
-      chmodSftp(sftpId, path, mode, filenameEncoding),
-    [chmodSftp, filenameEncoding],
-  );
-
-  const statSftpWithEncoding = useCallback(
-    (sftpId: string, path: string) => statSftp(sftpId, path, filenameEncoding),
-    [statSftp, filenameEncoding],
-  );
-
-  const downloadSftpToTempAndOpenWithEncoding = useCallback(
-    (
-      sftpId: string,
-      remotePath: string,
-      fileName: string,
-      appPath: string,
-      options?: { enableWatch?: boolean },
-    ) =>
-      downloadSftpToTempAndOpen(sftpId, remotePath, fileName, appPath, {
-        ...options,
-        encoding: filenameEncoding,
-      }),
-    [downloadSftpToTempAndOpen, filenameEncoding],
-  );
-
-  const {
-    currentPath,
-    setCurrentPath,
-    files,
-    loading,
-    setLoading,
-    reconnecting,
-    ensureSftp,
-    loadFiles,
-    closeSftpSession,
-    localHomeRef,
-  } = useSftpModalSession({
-    open,
-    host,
-    credentials,
-    initialPath,
-    isLocalSession,
-    t,
-    openSftp,
-    closeSftp: closeSftpBackend,
-    listSftp: listSftpWithEncoding,
-    listLocalDir,
-    getHomeDir,
-    onClearSelection: clearSelection,
-  });
-
-  // Track previous encoding to detect changes
-  const prevEncodingRef = useRef(filenameEncoding);
-
-  // Force reload only when filenameEncoding changes (not on every path change)
-  useEffect(() => {
-    if (!open || isLocalSession) return;
-    // Only force reload if encoding actually changed
-    if (prevEncodingRef.current !== filenameEncoding) {
-      prevEncodingRef.current = filenameEncoding;
-      loadFiles(currentPath, { force: true });
-    }
-  }, [currentPath, filenameEncoding, isLocalSession, loadFiles, open]);
-
-  const { getOpenerForFile, setOpenerForExtension } = useSftpFileAssociations();
-
-  const { sortField, sortOrder, columnWidths, handleSort, handleResizeStart } =
-    useSftpModalSorting();
-
-  const joinPathForSession = useCallback(
-    (base: string, name: string) => joinPath(base, name, isLocalSession),
-    [isLocalSession],
-  );
-  const isRootPathForSession = useCallback(
-    (path: string) => isRootPath(path, isLocalSession),
-    [isLocalSession],
-  );
-  const getParentPathForSession = useCallback(
-    (path: string) => getParentPath(path, isLocalSession),
-    [isLocalSession],
-  );
-
-  const handleNavigate = useCallback((path: string) => {
-    // Prevent double navigation (e.g., from double-click race condition)
-    if (navigatingRef.current) return;
-    navigatingRef.current = true;
-    setCurrentPath(path);
-    // Reset lock after a short delay
-    setTimeout(() => {
-      navigatingRef.current = false;
-    }, 300);
-  }, [navigatingRef, setCurrentPath]);
-
-  const handleUp = () => {
-    if (isRootPathForSession(currentPath)) return;
-    setCurrentPath(getParentPathForSession(currentPath));
-  };
-
-  const {
-    isEditingPath,
-    editingPathValue,
-    setEditingPathValue,
-    pathInputRef,
-    handlePathDoubleClick,
-    handlePathSubmit,
-    handlePathKeyDown,
-    breadcrumbs,
-    visibleBreadcrumbs,
-    hiddenBreadcrumbs,
-    needsBreadcrumbTruncation,
-    breadcrumbPathAtForIndex,
-    rootLabel,
-    rootPath,
-  } = useSftpModalPath({
-    currentPath,
-    isLocalSession,
-    localHomePath: localHomeRef.current,
-    onNavigate: handleNavigate,
-  });
-
-  const {
-    handleDelete,
-    handleCreateFolder,
-    handleCreateFile,
-    showRenameDialog,
-    setShowRenameDialog,
-    renameTarget,
-    renameName,
-    setRenameName,
-    isRenaming,
-    openRenameDialog,
-    handleRename,
-    showPermissionsDialog,
-    setShowPermissionsDialog,
-    permissionsTarget,
-    permissions,
-    isChangingPermissions,
-    openPermissionsDialog,
-    togglePermission,
-    getOctalPermissions,
-    getSymbolicPermissions,
-    handleSavePermissions,
-    showFileOpenerDialog,
-    setShowFileOpenerDialog,
-    fileOpenerTarget,
-    setFileOpenerTarget,
-    openFileOpenerDialog,
-    handleFileOpenerSelect,
-    handleSelectSystemApp,
-    showTextEditor,
-    setShowTextEditor,
-    textEditorTarget,
-    setTextEditorTarget,
-    textEditorContent,
-    setTextEditorContent,
-    loadingTextContent,
-    handleEditFile,
-    handleSaveTextFile,
-    handleOpenFile,
-  } = useSftpModalFileActions({
-    currentPath,
-    isLocalSession,
-    joinPath: joinPathForSession,
-    ensureSftp,
-    loadFiles,
-    readLocalFile,
-    readSftp: readSftpWithEncoding,
-    writeLocalFile,
-    writeSftp: writeSftpWithEncoding,
-    writeSftpBinary: writeSftpBinaryWithEncoding,
-    deleteLocalFile,
-    deleteSftp: deleteSftpWithEncoding,
-    mkdirLocal,
-    mkdirSftp: mkdirSftpWithEncoding,
-    renameSftp: renameSftpWithEncoding,
-    chmodSftp: chmodSftpWithEncoding,
-    statSftp: statSftpWithEncoding,
-    t,
-    sftpAutoSync,
-    getOpenerForFile,
-    setOpenerForExtension,
-    downloadSftpToTempAndOpen: downloadSftpToTempAndOpenWithEncoding,
-    selectApplication,
-  });
-
-  const {
-    uploading,
-    uploadTasks,
-    dragActive,
-    handleDownload,
-    handleUploadEntries,
-    handleFileSelect,
-    handleFolderSelect,
-    handleDrag,
-    handleDrop,
-    cancelUpload,
-    cancelTask,
-    dismissTask,
-  } = useSftpModalTransfers({
-    currentPath,
-    isLocalSession,
-    joinPath: joinPathForSession,
-    ensureSftp,
-    loadFiles,
-    readLocalFile,
-    readSftp: readSftpWithEncoding,
-    writeLocalFile,
-    writeSftpBinaryWithProgress: writeSftpBinaryWithProgressWithEncoding,
-    writeSftpBinary: writeSftpBinaryWithEncoding,
-    writeSftp: writeSftpWithEncoding,
-    mkdirLocal,
-    mkdirSftp: mkdirSftpWithEncoding,
-    cancelSftpUpload,
-    startStreamTransfer,
-    cancelTransfer,
-    showSaveDialog,
-    setLoading,
-    t,
-    useCompressedUpload: sftpUseCompressedUpload,
-  });
-
-  const handleClose = async () => {
-    await closeSftpSession();
-    onClose();
-  };
-
-  // Handle initial entries to upload (from drag-and-drop to terminal)
-  const initialUploadTriggeredRef = useRef(false);
-  const prevLoadingRef = useRef(loading);
-  const prevEntriesRef = useRef<DropEntry[] | undefined>(undefined);
-  useEffect(() => {
-    // Detect when loading transitions from true to false (initial load complete)
-    const wasLoading = prevLoadingRef.current;
-    prevLoadingRef.current = loading;
-    const justFinishedLoading = wasLoading && !loading;
-
-    // Reset the flag when initialEntriesToUpload is cleared
-    if (!initialEntriesToUpload || initialEntriesToUpload.length === 0) {
-      initialUploadTriggeredRef.current = false;
-      prevEntriesRef.current = undefined;
-      return;
-    }
-
-    // Reset the flag when new entries arrive (different reference = new drop)
-    if (initialEntriesToUpload !== prevEntriesRef.current) {
-      initialUploadTriggeredRef.current = false;
-      prevEntriesRef.current = initialEntriesToUpload;
-    }
-
-    // Prevent duplicate uploads
-    if (initialUploadTriggeredRef.current) return;
-
-    // Wait for SFTP connection to be established
-    // Trigger when: modal is open AND loading just finished (works for empty directories too)
-    if (!open || loading) return;
-    if (!justFinishedLoading) return;
-
-    initialUploadTriggeredRef.current = true;
-
-    // Trigger upload with full DropEntry data (preserves directory structure)
-    handleUploadEntries(initialEntriesToUpload);
-  }, [initialEntriesToUpload, open, loading, handleUploadEntries]);
-
-  // Display files with parent entry (like SftpView)
-  const displayFiles = useMemo(() => {
-    // Filter hidden files using utility function
-    const visibleFiles = filterHiddenFiles(files, sftpShowHiddenFiles);
-
-    // Check if we're at root
-    const atRoot = isRootPathForSession(currentPath);
-    if (atRoot) return visibleFiles;
-
-    // Add ".." parent directory entry at the top (only if not at root)
-    const parentEntry: RemoteFile = {
-      name: "..",
-      type: "directory",
-      size: "--",
-      lastModified: undefined,
-    };
-    return [parentEntry, ...visibleFiles.filter((f) => f.name !== "..")];
-  }, [files, currentPath, isRootPathForSession, sftpShowHiddenFiles]);
-
-  // Sorted files
-  const sortedFiles = useMemo(() => {
-    if (!displayFiles.length) return displayFiles;
-
-    // Keep ".." at the top, sort the rest
-    const parentEntry = displayFiles.find((f) => f.name === "..");
-    const otherFiles = displayFiles.filter((f) => f.name !== "..");
-
-    const sorted = [...otherFiles].sort((a, b) => {
-      // Directories and symlinks pointing to directories come first
-      const aIsDir = a.type === "directory" || (a.type === "symlink" && a.linkTarget === "directory");
-      const bIsDir = b.type === "directory" || (b.type === "symlink" && b.linkTarget === "directory");
-      if (aIsDir && !bIsDir) return -1;
-      if (!aIsDir && bIsDir) return 1;
-
-      let cmp = 0;
-      switch (sortField) {
-        case "name":
-          cmp = a.name.localeCompare(b.name);
-          break;
-        case "size": {
-          const sizeA =
-            typeof a.size === "number"
-              ? a.size
-              : parseInt(String(a.size), 10) || 0;
-          const sizeB =
-            typeof b.size === "number"
-              ? b.size
-              : parseInt(String(b.size), 10) || 0;
-          cmp = sizeA - sizeB;
-          break;
-        }
-        case "modified": {
-          const dateA = new Date(a.lastModified || 0).getTime();
-          const dateB = new Date(b.lastModified || 0).getTime();
-          cmp = dateA - dateB;
-          break;
-        }
-      }
-      return sortOrder === "asc" ? cmp : -cmp;
-    });
-
-    return parentEntry ? [parentEntry, ...sorted] : sorted;
-  }, [displayFiles, sortField, sortOrder]);
-  const {
-    fileListRef,
-    handleFileListScroll,
-    shouldVirtualize,
-    totalHeight,
-    visibleRows,
-  } = useSftpModalVirtualList({ open, sortedFiles });
-
-
-  const { handleFileClick, handleFileDoubleClick } = useSftpModalSelection({
-    files,
-    setSelectedFiles,
-    currentPath,
-    joinPath: joinPathForSession,
-    onNavigate: handleNavigate,
-    onOpenFile: handleOpenFile,
-    onNavigateUp: handleUp,
-  });
-
-  // Keyboard shortcuts for modal
-  const handleKeyboardRename = useCallback((file: RemoteFile) => {
-    openRenameDialog(file);
-  }, [openRenameDialog]);
-
-  const handleKeyboardDelete = useCallback((fileNames: string[]) => {
-    // Find the files to pass to confirm dialog
-    if (fileNames.length === 0) return;
-    if (!confirm(t("sftp.deleteConfirm.title", { count: fileNames.length }))) return;
-    
-    // Delete files
-    (async () => {
-      try {
-        for (const fileName of fileNames) {
-          const fullPath = joinPathForSession(currentPath, fileName);
-          if (isLocalSession) {
-            await deleteLocalFile(fullPath);
-          } else {
-            await deleteSftpWithEncoding(await ensureSftp(), fullPath);
-          }
-        }
-        await loadFiles(currentPath, { force: true });
-        setSelectedFiles(new Set());
-      } catch (e) {
-        toast.error(
-          e instanceof Error ? e.message : t("sftp.error.deleteFailed"),
-          "SFTP",
-        );
-      }
-    })();
-  }, [currentPath, isLocalSession, deleteLocalFile, deleteSftpWithEncoding, ensureSftp, loadFiles, setSelectedFiles, t, joinPathForSession]);
-
-  const handleKeyboardNewFolder = useCallback(() => {
-    handleCreateFolder();
-  }, [handleCreateFolder]);
-
-  useSftpModalKeyboardShortcuts({
-    keyBindings,
-    hotkeyScheme,
-    open,
-    files,
-    visibleFiles: displayFiles,
-    selectedFiles,
-    setSelectedFiles,
-    onRefresh: () => loadFiles(currentPath, { force: true }),
-    onRename: handleKeyboardRename,
-    onDelete: handleKeyboardDelete,
-    onNewFolder: handleKeyboardNewFolder,
-  });
-
-  const handleDeleteSelected = async () => {
-    if (selectedFiles.size === 0) return;
-    const fileNames = Array.from(selectedFiles);
-    if (!confirm(t("sftp.deleteConfirm.title", { count: fileNames.length }))) return;
-
-    try {
-      for (const fileName of fileNames) {
-        const fullPath = joinPathForSession(currentPath, fileName);
-        if (isLocalSession) {
-          await deleteLocalFile(fullPath);
-        } else {
-          await deleteSftpWithEncoding(await ensureSftp(), fullPath);
-        }
-      }
-      await loadFiles(currentPath, { force: true });
-      setSelectedFiles(new Set());
-    } catch (e) {
-      toast.error(
-        e instanceof Error ? e.message : t("sftp.error.deleteFailed"),
-        "SFTP",
-      );
-    }
-  };
-
-  const handleDownloadSelected = async () => {
-    if (selectedFiles.size === 0) return;
-    for (const fileName of selectedFiles) {
-      const file = files.find((f) => f.name === fileName);
-      if (file && file.type === "file") {
-        await handleDownload(file);
-      }
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
-      <DialogContent className="max-w-4xl h-[80vh] flex flex-col p-0 gap-0">
-        <SftpModalHeader
-          t={t}
-          host={host}
-          credentials={credentials}
-          showEncoding={!isLocalSession}
-          filenameEncoding={filenameEncoding}
-          onFilenameEncodingChange={setFilenameEncoding}
-          currentPath={currentPath}
-          isEditingPath={isEditingPath}
-          editingPathValue={editingPathValue}
-          setEditingPathValue={setEditingPathValue}
-          handlePathSubmit={handlePathSubmit}
-          handlePathKeyDown={handlePathKeyDown}
-          handlePathDoubleClick={handlePathDoubleClick}
-          isAtRoot={isRootPathForSession(currentPath)}
-          rootLabel={rootLabel}
-          isRefreshing={loading || reconnecting}
-          onUp={handleUp}
-          onHome={() =>
-            setCurrentPath((isLocalSession && localHomeRef.current) || rootPath)
-          }
-          onRefresh={() => loadFiles(currentPath, { force: true })}
-          visibleBreadcrumbs={visibleBreadcrumbs}
-          hiddenBreadcrumbs={hiddenBreadcrumbs}
-          needsBreadcrumbTruncation={needsBreadcrumbTruncation}
-          breadcrumbs={breadcrumbs}
-          onBreadcrumbSelect={(index) => setCurrentPath(breadcrumbPathAtForIndex(index))}
-          onRootSelect={() => setCurrentPath(rootPath)}
-          inputRef={inputRef}
-          folderInputRef={folderInputRef}
-          pathInputRef={pathInputRef}
-          uploading={uploading}
-          onTriggerUpload={() => inputRef.current?.click()}
-          onTriggerFolderUpload={() => folderInputRef.current?.click()}
-          onCreateFolder={handleCreateFolder}
-          onCreateFile={handleCreateFile}
-          onFileSelect={handleFileSelect}
-          onFolderSelect={handleFolderSelect}
-        />
-
-        <SftpModalFileList
-          t={t}
-          currentPath={currentPath}
-          isLocalSession={isLocalSession}
-          files={files}
-          selectedFiles={selectedFiles}
-          dragActive={dragActive}
-          loading={loading}
-          loadingTextContent={loadingTextContent}
-          reconnecting={reconnecting}
-          columnWidths={columnWidths}
-          sortField={sortField}
-          sortOrder={sortOrder}
-          shouldVirtualize={shouldVirtualize}
-          totalHeight={totalHeight}
-          visibleRows={visibleRows}
-          fileListRef={fileListRef}
-          inputRef={inputRef}
-          folderInputRef={folderInputRef}
-          handleSort={handleSort}
-          handleResizeStart={handleResizeStart}
-          handleFileListScroll={handleFileListScroll}
-          handleDrag={handleDrag}
-          handleDrop={handleDrop}
-          handleFileClick={handleFileClick}
-          handleFileDoubleClick={handleFileDoubleClick}
-          handleDownload={handleDownload}
-          handleDelete={handleDelete}
-          handleOpenFile={handleOpenFile}
-          openFileOpenerDialog={openFileOpenerDialog}
-          handleEditFile={handleEditFile}
-          openRenameDialog={openRenameDialog}
-          openPermissionsDialog={openPermissionsDialog}
-          handleNavigate={handleNavigate}
-          handleCreateFolder={handleCreateFolder}
-          handleCreateFile={handleCreateFile}
-          handleDownloadSelected={handleDownloadSelected}
-          handleDeleteSelected={handleDeleteSelected}
-          loadFiles={loadFiles}
-          formatBytes={formatBytes}
-          formatDate={formatDate}
-        />
-
-        <SftpModalUploadTasks tasks={uploadTasks} t={t} onCancel={cancelUpload} onCancelTask={cancelTask} onDismiss={dismissTask} />
-
-        <SftpModalFooter
-          t={t}
-          files={files}
-          selectedFiles={selectedFiles}
-          loading={loading}
-          uploading={uploading}
-          onDownloadSelected={handleDownloadSelected}
-          onDeleteSelected={handleDeleteSelected}
-        />
-      </DialogContent>
-
-      <SftpModalDialogs
-        t={t}
-        showRenameDialog={showRenameDialog}
-        setShowRenameDialog={setShowRenameDialog}
-        renameTarget={renameTarget}
-        renameName={renameName}
-        setRenameName={setRenameName}
-        handleRename={handleRename}
-        isRenaming={isRenaming}
-        showPermissionsDialog={showPermissionsDialog}
-        setShowPermissionsDialog={setShowPermissionsDialog}
-        permissionsTarget={permissionsTarget}
-        permissions={permissions}
-        togglePermission={togglePermission}
-        getOctalPermissions={getOctalPermissions}
-        getSymbolicPermissions={getSymbolicPermissions}
-        handleSavePermissions={handleSavePermissions}
-        isChangingPermissions={isChangingPermissions}
-      />
-
-      {/* File Opener Dialog */}
-      <FileOpenerDialog
-        open={showFileOpenerDialog}
-        onClose={() => {
-          setShowFileOpenerDialog(false);
-          setFileOpenerTarget(null);
-        }}
-        fileName={fileOpenerTarget?.name || ""}
-        onSelect={handleFileOpenerSelect}
-        onSelectSystemApp={handleSelectSystemApp}
-      />
-
-      {/* Text Editor Modal */}
-      <TextEditorModal
-        open={showTextEditor}
-        onClose={() => {
-          setShowTextEditor(false);
-          setTextEditorTarget(null);
-          setTextEditorContent("");
-        }}
-        fileName={textEditorTarget?.name || ""}
-        initialContent={textEditorContent}
-        onSave={handleSaveTextFile}
-        editorWordWrap={editorWordWrap}
-        onToggleWordWrap={() => setEditorWordWrap(!editorWordWrap)}
-      />
-    </Dialog>
-  );
-};
-
-export default SFTPModal;

components/ScriptsSidePanel.tsx

@@ -0,0 +1,221 @@
+/**
+ * ScriptsSidePanel - Lightweight scripts browser for the terminal side panel
+ *
+ * Shows snippets organized by package hierarchy with breadcrumb navigation.
+ * Clicking a snippet executes it in the focused terminal session.
+ */
+
+import { ChevronRight, Package, Search, Zap } from 'lucide-react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { useI18n } from '../application/i18n/I18nProvider';
+import { cn } from '../lib/utils';
+import { Snippet } from '../types';
+import { Input } from './ui/input';
+import { ScrollArea } from './ui/scroll-area';
+
+interface ScriptsSidePanelProps {
+  snippets: Snippet[];
+  packages: string[];
+  onSnippetClick: (command: string, noAutoRun?: boolean) => void;
+  isVisible?: boolean;
+}
+
+const ScriptsSidePanelInner: React.FC<ScriptsSidePanelProps> = ({
+  snippets,
+  packages,
+  onSnippetClick,
+  isVisible = true,
+}) => {
+  const { t } = useI18n();
+  const [selectedPackage, setSelectedPackage] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+
+  const displayedPackages = useMemo(() => {
+    if (!selectedPackage) {
+      const absolutePaths = packages.filter(p => p.startsWith('/'));
+      const relativePaths = packages.filter(p => !p.startsWith('/'));
+
+      const results: { name: string; path: string; count: number }[] = [];
+
+      const relativeRoots = relativePaths
+        .map((p) => p.split('/')[0])
+        .filter((name): name is string => Boolean(name) && name.length > 0);
+
+      Array.from(new Set(relativeRoots)).forEach((name: string) => {
+        const path: string = name;
+        const count = snippets.filter((s) => {
+          const pkg = s.package || '';
+          return pkg === path || pkg.startsWith(path + '/');
+        }).length;
+        results.push({ name, path, count });
+      });
+
+      const absoluteRoots = absolutePaths
+        .map((p) => {
+          const cleanPath = p.substring(1);
+          return cleanPath.split('/')[0];
+        })
+        .filter((name): name is string => Boolean(name) && name.length > 0);
+
+      Array.from(new Set(absoluteRoots)).forEach((name: string) => {
+        const path: string = `/${name}`;
+        const displayName: string = `/${name}`;
+        const count = snippets.filter((s) => {
+          const pkg = s.package || '';
+          return pkg === path || pkg.startsWith(path + '/');
+        }).length;
+        results.push({ name: displayName, path, count });
+      });
+
+      return results;
+    }
+
+    const prefix = selectedPackage + '/';
+    const children = packages
+      .filter((p) => p.startsWith(prefix))
+      .map((p) => p.replace(prefix, '').split('/')[0])
+      .filter((name): name is string => Boolean(name) && name.length > 0);
+    return Array.from(new Set(children)).map((name) => {
+      const path = `${selectedPackage}/${name}`;
+      const count = snippets.filter((s) => {
+        const pkg = s.package || '';
+        return pkg === path || pkg.startsWith(path + '/');
+      }).length;
+      return { name, path, count };
+    });
+  }, [packages, selectedPackage, snippets]);
+
+  const displayedSnippets = useMemo(() => {
+    let result = snippets.filter((s) => (s.package || '') === (selectedPackage || ''));
+    if (search.trim()) {
+      const s = search.toLowerCase();
+      result = result.filter(sn =>
+        sn.label.toLowerCase().includes(s) ||
+        sn.command.toLowerCase().includes(s)
+      );
+    }
+    return result;
+  }, [snippets, selectedPackage, search]);
+
+  // Also filter packages by search when at root level
+  const filteredPackages = useMemo(() => {
+    if (!search.trim()) return displayedPackages;
+    const s = search.toLowerCase();
+    return displayedPackages.filter(pkg => pkg.name.toLowerCase().includes(s));
+  }, [displayedPackages, search]);
+
+  const breadcrumb = useMemo(() => {
+    if (!selectedPackage) return [];
+    const isAbsolute = selectedPackage.startsWith('/');
+    const parts = selectedPackage.split('/').filter(Boolean);
+    return parts.map((name, idx) => {
+      const pathSegments = parts.slice(0, idx + 1);
+      const path = isAbsolute ? `/${pathSegments.join('/')}` : pathSegments.join('/');
+      return { name, path };
+    });
+  }, [selectedPackage]);
+
+  const handleSnippetClick = useCallback((command: string, noAutoRun?: boolean) => {
+    onSnippetClick(command, noAutoRun);
+  }, [onSnippetClick]);
+
+  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">
+          <Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder={t('snippets.searchPlaceholder')}
+            className="h-7 pl-7 text-xs bg-muted/30 border-none"
+          />
+        </div>
+      </div>
+
+      {/* Breadcrumb */}
+      <div className="shrink-0 flex items-center gap-1 px-3 py-1.5 text-[11px] border-b border-border/30 min-h-[28px]">
+        <button
+          className={cn(
+            "hover:text-primary transition-colors truncate",
+            !selectedPackage ? "text-foreground font-medium" : "text-muted-foreground"
+          )}
+          onClick={() => setSelectedPackage(null)}
+        >
+          {t('terminal.toolbar.library')}
+        </button>
+        {breadcrumb.map((b) => (
+          <React.Fragment key={b.path}>
+            <ChevronRight size={10} className="text-muted-foreground shrink-0" />
+            <button
+              className="text-muted-foreground hover:text-primary transition-colors truncate"
+              onClick={() => setSelectedPackage(b.path)}
+            >
+              {b.name}
+            </button>
+          </React.Fragment>
+        ))}
+      </div>
+
+      {/* Content */}
+      <ScrollArea className="flex-1">
+        <div className="py-1">
+          {!hasAnyContent && (
+            <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+              <Zap size={24} className="opacity-40 mb-2" />
+              <span className="text-xs">{t('terminal.toolbar.noSnippets')}</span>
+            </div>
+          )}
+
+          {/* Packages */}
+          {filteredPackages.map((pkg) => (
+            <button
+              key={pkg.path}
+              className="w-full flex items-center gap-2.5 px-3 py-2 text-left hover:bg-accent/50 transition-colors"
+              onClick={() => { setSelectedPackage(pkg.path); setSearch(''); }}
+            >
+              <div className="w-6 h-6 rounded-md bg-primary/10 text-primary flex items-center justify-center shrink-0">
+                <Package size={12} />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="text-xs font-medium truncate">{pkg.name}</div>
+                <div className="text-[10px] text-muted-foreground">
+                  {t('snippets.package.count', { count: pkg.count })}
+                </div>
+              </div>
+              <ChevronRight size={12} className="text-muted-foreground shrink-0" />
+            </button>
+          ))}
+
+          {/* Snippets */}
+          {displayedSnippets.map((s) => (
+            <button
+              key={s.id}
+              onClick={() => handleSnippetClick(s.command, s.noAutoRun)}
+              className="w-full text-left px-3 py-2 hover:bg-accent/50 transition-colors flex flex-col gap-0.5"
+            >
+              <span className="text-xs font-medium truncate">{s.label}</span>
+              <span className="text-muted-foreground truncate font-mono text-[10px] max-w-full">
+                {s.command}
+              </span>
+            </button>
+          ))}
+
+          {hasAnyContent && displayedSnippets.length === 0 && filteredPackages.length === 0 && search.trim() && (
+            <div className="px-3 py-4 text-xs text-muted-foreground italic text-center">
+              {t('common.noResultsFound')}
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
+
+export const ScriptsSidePanel = memo(ScriptsSidePanelInner);
+ScriptsSidePanel.displayName = 'ScriptsSidePanel';

components/SelectHostPanel.tsx

@@ -19,6 +19,12 @@ 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[];
@@ -197,20 +203,8 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
     }));
   }, [currentPath]);
 
-  const _handleBack = () => {
-    if (currentPath) {
-      const parts = currentPath.split("/");
-      if (parts.length > 1) {
-        setCurrentPath(parts.slice(0, -1).join("/"));
-      } else {
-        setCurrentPath(null);
-      }
-    } else {
-      onBack();
-    }
-  };
-
   return (
+    <TooltipProvider delayDuration={300}>
     <div
       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",
@@ -284,7 +278,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
 
       {/* Content */}
       <ScrollArea className="flex-1">
-        <div className="p-4 space-y-4">
+        <div className="p-3 space-y-3">
           {/* Breadcrumbs */}
           {currentPath && (
             <div className="flex items-center gap-1 text-xs text-muted-foreground">
@@ -314,20 +308,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>
@@ -340,18 +334,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)}
@@ -359,16 +354,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>
                   );
@@ -426,6 +437,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
         />
       )}
     </div>
+    </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

@@ -66,6 +66,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 +108,7 @@ export const SerialHostDetailsPanel: React.FC<SerialHostDetailsPanelProps> = ({
       port: baudRate,
       tags,
       group,
+      charset,
       serialConfig: config,
     };
 
@@ -392,6 +394,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

@@ -4,7 +4,7 @@ import AppLogo from "./AppLogo";
 import { Button } from "./ui/button";
 import { cn } from "../lib/utils";
 import { useApplicationBackend } from "../application/state/useApplicationBackend";
-import { useUpdateCheck } from "../application/state/useUpdateCheck";
+import type { UpdateState, UseUpdateCheckResult } from "../application/state/useUpdateCheck";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { SettingsTabContent } from "./settings/settings-ui";
 import { toast } from "./ui/toast";
@@ -63,13 +63,20 @@ const ActionRow: React.FC<{
   </button>
 );
 
-export default function SettingsApplicationTab() {
+interface SettingsApplicationTabProps {
+  updateState: UpdateState;
+  checkNow: UseUpdateCheckResult['checkNow'];
+  openReleasePage: UseUpdateCheckResult['openReleasePage'];
+  installUpdate: UseUpdateCheckResult['installUpdate'];
+  startDownload: UseUpdateCheckResult['startDownload'];
+  isUpdateDemoMode: boolean;
+}
+
+export default function SettingsApplicationTab({ updateState, checkNow, openReleasePage, installUpdate, startDownload, isUpdateDemoMode }: SettingsApplicationTabProps) {
   const { t } = useI18n();
   const { openExternal, getApplicationInfo } = useApplicationBackend();
-  const { updateState, checkNow, openReleasePage } = useUpdateCheck();
   const [appInfo, setAppInfo] = useState<AppInfo>({ name: "Netcatty", version: "" });
   const [lastCheckResult, setLastCheckResult] = useState<'none' | 'available' | 'upToDate'>('none');
-  const [hasAutoChecked, setHasAutoChecked] = useState(false);
 
   useEffect(() => {
     let cancelled = false;
@@ -89,23 +96,6 @@ export default function SettingsApplicationTab() {
     };
   }, [getApplicationInfo]);
 
-  // Check if demo mode is enabled for development testing
-  const isUpdateDemoMode = typeof window !== 'undefined' &&
-    window.localStorage?.getItem('debug.updateDemo') === '1';
-
-  // Auto check for updates when entering this page
-  useEffect(() => {
-    if (hasAutoChecked) return;
-    if (updateState.isChecking) return;
-
-    // In demo mode or when we have a valid version, auto-check
-    const canCheck = isUpdateDemoMode || (appInfo.version && appInfo.version !== '0.0.0');
-    if (!canCheck) return;
-
-    setHasAutoChecked(true);
-    void checkNow();
-  }, [hasAutoChecked, updateState.isChecking, isUpdateDemoMode, appInfo.version, checkNow]);
-
   const handleCheckForUpdates = async () => {
     // In demo mode, allow checking even for dev builds
     if (!isUpdateDemoMode && (!appInfo.version || appInfo.version === '0.0.0')) {
@@ -124,8 +114,9 @@ export default function SettingsApplicationTab() {
         t('update.available.message', { version: result.latestRelease.version }),
         t('update.available.title')
       );
-      // Open the release page
-      openReleasePage();
+      // Don't auto-open the release page here — checkNow() already triggers
+      // electron-updater on supported platforms, and the Settings > System tab
+      // shows a "Manual Download" link on unsupported platforms.
     } else if (result) {
       setLastCheckResult('upToDate');
       toast.success(
@@ -154,18 +145,25 @@ export default function SettingsApplicationTab() {
                 <span className="text-sm text-muted-foreground">
                   {appInfo.version ? appInfo.version : " "}
                 </span>
-                {/* Update available badge - inline with version */}
-                {updateState.hasUpdate && updateState.latestRelease && (
+                {/* Update badge - reflects auto-download state */}
+                {updateState.latestRelease && (updateState.hasUpdate || updateState.autoDownloadStatus === 'downloading' || updateState.autoDownloadStatus === 'ready') && (
                   <button
-                    onClick={() => 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",
-                      "bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300",
-                      "hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors cursor-pointer"
+                      updateState.autoDownloadStatus === 'ready'
+                        ? "bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 hover:bg-green-200 dark:hover:bg-green-800"
+                        : "bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800",
+                      "transition-colors cursor-pointer"
                     )}
                   >
                     <ArrowUpCircle size={12} />
-                    v{updateState.latestRelease.version} {t('update.downloadNow')}
+                    v{updateState.latestRelease.version}{' '}
+                    {updateState.autoDownloadStatus === 'ready'
+                      ? t('update.restartNow')
+                      : updateState.autoDownloadStatus === 'downloading'
+                        ? `${updateState.downloadPercent}%`
+                        : t('update.downloadNow')}
                   </button>
                 )}
               </div>
@@ -177,7 +175,7 @@ export default function SettingsApplicationTab() {
               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" />

components/SettingsPage.tsx

@@ -2,11 +2,15 @@
  * Settings Page - Standalone settings window content
  * This component is rendered in a separate Electron window
  */
-import { AppWindow, Cloud, FileType, HardDrive, Keyboard, Palette, TerminalSquare, X } from "lucide-react";
-import React, { useCallback, useEffect, useState } from "react";
+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";
+import { useUpdateCheck } from "../application/state/useUpdateCheck";
+import { useAIState } from "../application/state/useAIState";
 import { I18nProvider, useI18n } from "../application/i18n/I18nProvider";
 import SettingsApplicationTab from "./SettingsApplicationTab";
 import SettingsAppearanceTab from "./settings/tabs/SettingsAppearanceTab";
@@ -14,35 +18,132 @@ import SettingsFileAssociationsTab from "./settings/tabs/SettingsFileAssociation
 import SettingsShortcutsTab from "./settings/tabs/SettingsShortcutsTab";
 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);
 
-type SettingsState = ReturnType<typeof useSettingsState> & {
-    availableFonts: TerminalFont[];
-};
+class AITabErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  { error: Error | null }
+> {
+  state: { error: Error | null } = { error: null };
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+  render() {
+    if (this.state.error) {
+      return (
+        <div style={{ padding: 32, color: "#f87171", fontFamily: "monospace", whiteSpace: "pre-wrap" }}>
+          <h3 style={{ marginBottom: 8 }}>AI Settings Error</h3>
+          <div>{this.state.error.message}</div>
+          <div style={{ marginTop: 8, fontSize: 12, color: "#888" }}>{this.state.error.stack}</div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+type SettingsState = ReturnType<typeof useSettingsState>;
 
 const SettingsSyncTab = React.lazy(() => import("./settings/tabs/SettingsSyncTab"));
 
-const SettingsSyncTabWithVault: React.FC = () => {
+const SettingsTerminalTabContainer: React.FC<{ settings: SettingsState }> = ({ settings }) => {
+    const availableFonts = useAvailableFonts();
+
+    return (
+        <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={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}
+                    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,
         keys,
         identities,
         snippets,
+        customGroups,
+        snippetPackages,
+        knownHosts,
         importDataFromString,
         clearVaultData,
     } = useVaultState();
 
+    const { rules: portForwardingRules, importRules: importPortForwardingRules } = usePortForwardingState();
+
+    // Strip transient runtime fields before passing to sync
+    const portForwardingRulesForSync = useMemo(
+        () =>
+            portForwardingRules.map((rule) => ({
+                ...rule,
+                status: "inactive" as const,
+                error: undefined,
+                lastUsedAt: undefined,
+            })),
+        [portForwardingRules],
+    );
+
+    const vault = useMemo(
+        () => ({ hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts }),
+        [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts],
+    );
+
     return (
         <SettingsSyncTab
-            hosts={hosts}
-            keys={keys}
-            identities={identities}
-            snippets={snippets}
+            vault={vault}
+            portForwardingRules={portForwardingRulesForSync}
             importDataFromString={importDataFromString}
+            importPortForwardingRules={importPortForwardingRules}
             clearVaultData={clearVaultData}
+            onSettingsApplied={onSettingsApplied}
         />
     );
 };
@@ -50,8 +151,13 @@ const SettingsSyncTabWithVault: React.FC = () => {
 const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }) => {
     const { t } = useI18n();
     const { notifyRendererReady, closeSettingsWindow } = useWindowControls();
+    const { updateState, checkNow, installUpdate, openReleasePage, startDownload, isUpdateDemoMode } = useUpdateCheck({ autoUpdateEnabled: settings.autoUpdateEnabled });
     const [activeTab, setActiveTab] = useState("application");
     const [mountedTabs, setMountedTabs] = useState(() => new Set(["application"]));
+    const isImmersive = settings.immersiveMode;
+    const toggleImmersive = useCallback(() => {
+        settings.setImmersiveMode(!isImmersive);
+    }, [settings, isImmersive]);
 
     useEffect(() => {
         notifyRendererReady();
@@ -128,6 +234,12 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                         >
                             <FileType size={14} /> {t("settings.tab.sftpFileAssociations")}
                         </TabsTrigger>
+                        <TabsTrigger
+                            value="ai"
+                            className="w-full justify-start gap-2 px-3 py-2 text-sm data-[state=active]:bg-background hover:bg-background/60 rounded-md transition-colors"
+                        >
+                            <Sparkles size={14} /> AI
+                        </TabsTrigger>
                         <TabsTrigger
                             value="sync"
                             className="w-full justify-start gap-2 px-3 py-2 text-sm data-[state=active]:bg-background hover:bg-background/60 rounded-md transition-colors"
@@ -144,7 +256,16 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                 </div>
 
                 <div className="flex-1 h-full flex flex-col min-h-0 bg-muted/10">
-                    {mountedTabs.has("application") && <SettingsApplicationTab />}
+                    {mountedTabs.has("application") && (
+                        <SettingsApplicationTab
+                            updateState={updateState}
+                            checkNow={checkNow}
+                            openReleasePage={openReleasePage}
+                            installUpdate={installUpdate}
+                            startDownload={startDownload}
+                            isUpdateDemoMode={isUpdateDemoMode}
+                        />
+                    )}
 
                     {mountedTabs.has("appearance") && (
                         <SettingsAppearanceTab
@@ -164,21 +285,13 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                             setUiLanguage={settings.setUiLanguage}
                             customCSS={settings.customCSS}
                             setCustomCSS={settings.setCustomCSS}
+                            isImmersive={isImmersive}
+                            onToggleImmersive={toggleImmersive}
                         />
                     )}
 
                     {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") && (
@@ -197,9 +310,13 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                         <SettingsFileAssociationsTab />
                     )}
 
+                    {mountedTabs.has("ai") && (
+                        <SettingsAITabContainer />
+                    )}
+
                     {mountedTabs.has("sync") && (
                         <React.Suspense fallback={null}>
-                            <SettingsSyncTabWithVault />
+                            <SettingsSyncTabWithVault onSettingsApplied={settings.rehydrateAllFromStorage} />
                         </React.Suspense>
                     )}
 
@@ -216,6 +333,15 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                             closeToTray={settings.closeToTray}
                             setCloseToTray={settings.setCloseToTray}
                             hotkeyRegistrationError={settings.hotkeyRegistrationError}
+                            globalHotkeyEnabled={settings.globalHotkeyEnabled}
+                            setGlobalHotkeyEnabled={settings.setGlobalHotkeyEnabled}
+                            autoUpdateEnabled={settings.autoUpdateEnabled}
+                            setAutoUpdateEnabled={settings.setAutoUpdateEnabled}
+                            updateState={updateState}
+                            checkNow={checkNow}
+                            installUpdate={installUpdate}
+                            openReleasePage={openReleasePage}
+                            startDownload={startDownload}
                         />
                     )}
                 </div>

components/SftpSidePanel.tsx

@@ -0,0 +1,710 @@
+/**
+ * SftpSidePanel - SFTP file browser rendered as a resizable side panel
+ *
+ * Reuses SftpView's components (SftpPaneView, SftpContextProvider, etc.)
+ * to provide a unified SFTP experience. Renders a single pane (left side only).
+ *
+ * IMPORTANT: Does NOT use the global activeTabStore to avoid conflicts with
+ * the main SftpView tab. Instead manages pane visibility internally.
+ *
+ * Used in TerminalLayer to provide SFTP alongside terminal sessions.
+ */
+
+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";
+import { useSftpFileAssociations } from "../application/state/useSftpFileAssociations";
+import { getParentPath } from "../application/state/sftp/utils";
+import { buildCacheKey } from "../application/state/sftp/sharedRemoteHostCache";
+import { logger } from "../lib/logger";
+import type { DropEntry } from "../lib/sftpFileUtils";
+import { Host, Identity, SSHKey } from "../types";
+import type { TransferTask } from "../types";
+import { toast } from "./ui/toast";
+import { DistroAvatar } from "./DistroAvatar";
+
+import { SftpPaneView } from "./sftp/SftpPaneView";
+import { SftpOverlays } from "./sftp/SftpOverlays";
+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;
+  showWorkspaceHostHeader?: boolean;
+  isVisible?: boolean;
+  renderOverlays?: boolean;
+  pendingUpload?: {
+    requestId: string;
+    hostId: string;
+    connectionKey: string;
+    targetPath?: string;
+    entries: DropEntry[];
+  } | null;
+  onPendingUploadHandled?: (requestId: string) => void;
+  sftpDoubleClickBehavior: "open" | "transfer";
+  sftpAutoSync: boolean;
+  sftpShowHiddenFiles: boolean;
+  sftpUseCompressedUpload: boolean;
+  hotkeyScheme: HotkeyScheme;
+  keyBindings: KeyBinding[];
+  editorWordWrap: boolean;
+  setEditorWordWrap: (value: boolean) => void;
+  onGetTerminalCwd?: () => Promise<string | null>;
+}
+
+const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
+  hosts,
+  keys,
+  identities,
+  updateHosts,
+  sftpDefaultViewMode,
+  activeHost,
+  initialLocation,
+  showWorkspaceHostHeader = false,
+  isVisible = true,
+  renderOverlays = true,
+  pendingUpload = null,
+  onPendingUploadHandled,
+  sftpDoubleClickBehavior,
+  sftpAutoSync,
+  sftpShowHiddenFiles,
+  sftpUseCompressedUpload,
+  hotkeyScheme,
+  keyBindings,
+  editorWordWrap,
+  setEditorWordWrap,
+  onGetTerminalCwd,
+}) => {
+  const { t } = useI18n();
+
+  const fileWatchHandlers = useMemo(() => ({
+    onFileWatchSynced: (payload: { remotePath: string }) => {
+      const fileName = payload.remotePath.split('/').pop() || payload.remotePath;
+      toast.success(t('sftp.autoSync.success', { fileName }));
+      logger.info("[SFTP] File auto-synced to remote", payload);
+    },
+    onFileWatchError: (payload: { error: string }) => {
+      toast.error(t('sftp.autoSync.error', { error: payload.error }));
+      logger.error("[SFTP] File auto-sync failed", payload);
+    },
+  }), [t]);
+
+  const sftpOptions = useMemo(() => ({
+    ...fileWatchHandlers,
+    useCompressedUpload: sftpUseCompressedUpload,
+    defaultShowHiddenFiles: sftpShowHiddenFiles,
+    autoConnectLocalOnMount: false,
+  }), [fileWatchHandlers, sftpUseCompressedUpload, sftpShowHiddenFiles]);
+
+  const sftp = useSftpState(hosts, keys, identities, sftpOptions);
+  const {
+    showSaveDialog,
+    selectDirectory,
+    startStreamTransfer,
+    listSftp,
+    mkdirLocal,
+    deleteLocalFile,
+    listLocalDir,
+  } = useSftpBackend();
+
+  const sftpRef = useRef(sftp);
+  sftpRef.current = sftp;
+
+  const behaviorRef = useRef(sftpDoubleClickBehavior);
+  behaviorRef.current = sftpDoubleClickBehavior;
+
+  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);
+  getOpenerForFileRef.current = getOpenerForFile;
+
+  const handleToggleHiddenFiles = useCallback((paneId: string) => {
+    const pane = sftpRef.current.leftTabs.tabs.find((tab) => tab.id === paneId);
+    if (!pane) return;
+    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,
+    dragCallbacks,
+    draggedFiles,
+    permissionsState,
+    setPermissionsState,
+    showTextEditor,
+    setShowTextEditor,
+    textEditorTarget,
+    setTextEditorTarget,
+    textEditorContent,
+    setTextEditorContent,
+    showFileOpenerDialog,
+    setShowFileOpenerDialog,
+    fileOpenerTarget,
+    setFileOpenerTarget,
+    handleSaveTextFile,
+    handleFileOpenerSelect,
+    handleSelectSystemApp,
+  } = useSftpViewPaneCallbacks({
+    sftpRef,
+    behaviorRef,
+    autoSyncRef,
+    getOpenerForFileRef,
+    setOpenerForExtension,
+    t,
+    listSftp,
+    mkdirLocal,
+    deleteLocalFile,
+    showSaveDialog,
+    selectDirectory,
+    startStreamTransfer,
+    getSftpIdForConnection: sftp.getSftpIdForConnection,
+    listLocalFiles: listLocalDir,
+  });
+
+  const {
+    leftPanes,
+    showHostPickerLeft,
+    showHostPickerRight,
+    hostSearchLeft,
+    hostSearchRight,
+    setShowHostPickerLeft,
+    setShowHostPickerRight,
+    setHostSearchLeft,
+    setHostSearchRight,
+    handleHostSelectLeft,
+    handleHostSelectRight,
+  } = useSftpViewTabs({ sftp, sftpRef });
+
+  // Auto-connect when activeHost changes.
+  // Uses sftpRef to avoid re-triggering on every sftp state change.
+  const connectedKeyRef = useRef<string | null>(null);
+  // Store the Host object used for the current connection so the header
+  // can show session-time overrides even during deferred host switches.
+  const connectedHostObjRef = useRef<Host | null>(null);
+  const lastAppliedInitialLocationKeyRef = useRef<string | null>(null);
+  const handledPendingUploadIdRef = useRef<string | null>(null);
+  // Maps tab IDs to the connectionKey used to create them, so we can
+  // correctly identify tabs when the same host ID has different overrides.
+  const tabConnectionKeyMapRef = useRef<Map<string, string>>(new Map());
+
+  // NOTE: We intentionally do NOT reset lastAppliedInitialLocationKeyRef on
+  // visibility changes. When the user switches terminal tabs, the panel
+  // toggles isVisible but should preserve its navigation state (the user may
+  // have navigated away from initialLocation). When the panel is truly
+  // closed, the component unmounts and all refs are naturally reset.
+
+  // Navigate SFTP to the terminal's current working directory
+  const handleGoToTerminalCwd = useCallback(async () => {
+    if (!onGetTerminalCwd) return;
+    const cwd = await onGetTerminalCwd();
+    if (cwd) {
+      sftpRef.current.navigateTo("left", cwd);
+    }
+  }, [onGetTerminalCwd]);
+
+  // Track whether there's active work that should block connection switching.
+  // Computed outside the effect so it can be in the dependency array.
+  // Block host-following while any connection-sensitive interactive UI is
+  // active: text editor, permissions dialog, file-opener dialog, or
+  // auto-synced external file watches.
+  // Note: transfers are NOT included here — they run on their own sftpId
+  // independent of the active tab, and forceNewTab preserves old connections.
+  const hasActiveWork = showTextEditor || !!permissionsState || showFileOpenerDialog
+    || (sftp.activeFileWatchCountRef?.current ?? 0) > 0;
+
+  useEffect(() => {
+    if (!activeHost) return;
+
+    const s = sftpRef.current;
+
+    // Serial terminals don't support SFTP — disconnect any existing
+    // connection (remote or local) so the panel doesn't remain bound to
+    // a previous host.
+    const proto = activeHost.protocol;
+    if (proto === 'serial' || activeHost.id?.startsWith('serial-')) {
+      // Serial terminals don't support SFTP. Just clear the tracked
+      // connection key so switching back to a remote terminal will
+      // trigger auto-connect. Don't disconnect existing tabs — they
+      // may be reused when focus returns.
+      connectedKeyRef.current = null;
+      return;
+    }
+    // Local terminals connect to the local file browser
+    if (proto === 'local' || activeHost.id?.startsWith('local-')) {
+      if (hasActiveWork) return;
+      const leftConn = s.leftPane.connection;
+      if (leftConn?.isLocal) {
+        // Already connected locally
+        connectedKeyRef.current = "local";
+        return;
+      }
+      // Check for an existing local tab to reuse
+      const existingLocalTab = s.leftTabs.tabs.find((tab) =>
+        tab.connection?.isLocal && tab.connection.status === "connected",
+      );
+      if (existingLocalTab) {
+        s.selectTab("left", existingLocalTab.id);
+        connectedKeyRef.current = "local";
+        return;
+      }
+      connectedKeyRef.current = "local";
+      // Preserve existing remote tab when switching to local
+      const needsNewTab = !!(leftConn && leftConn.status === "connected");
+      if (needsNewTab) {
+        s.connect("left", "local", { forceNewTab: true });
+      } else if (leftConn) {
+        // Await disconnect before connecting locally to avoid the async
+        // disconnect wiping out the fresh local connection.
+        void s.disconnect("left").then(() => s.connect("left", "local"));
+      } else {
+        s.connect("left", "local");
+      }
+      return;
+    }
+    // Build a connection key that accounts for session-time overrides
+    // (same host ID may have different port/protocol in different workspace panes).
+    // Uses buildCacheKey to stay consistent with the key recorded on upload tasks.
+    const connectionKey = buildCacheKey(activeHost.id, activeHost.hostname, activeHost.port, activeHost.protocol, activeHost.sftpSudo, activeHost.username);
+    if (connectedKeyRef.current === connectionKey) return;
+
+    // Don't switch connections while transfers or editor are active
+    if (hasActiveWork) return;
+    logger.info("[SftpSidePanel] Auto-connect triggered", {
+      hostId: activeHost.id,
+      hostLabel: activeHost.label,
+      protocol: activeHost.protocol,
+      hostname: activeHost.hostname,
+    });
+
+    // Check if an existing SFTP tab matches this exact endpoint.
+    // We track which connectionKey was used to create each tab so that
+    // tabs for the same host ID with different session-time overrides
+    // (port/protocol) are not incorrectly reused.
+    const tabs = s.leftTabs.tabs;
+    const existingTab = tabs.find((tab) => {
+      if (!tab.connection || tab.connection.hostId !== activeHost.id) return false;
+      // Don't reuse errored tabs — they need a fresh connection
+      if (tab.connection.status === "error" || tab.connection.status === "disconnected") return false;
+      return tabConnectionKeyMapRef.current.get(tab.id) === connectionKey;
+    });
+    if (existingTab) {
+      s.selectTab("left", existingTab.id);
+      connectedKeyRef.current = connectionKey;
+      connectedHostObjRef.current = activeHost;
+      return;
+    }
+
+    // Create a new tab when there's already an active connection, so the
+    // previous tab is preserved for instant switching on focus change.
+    // This covers both different hosts AND same host with different
+    // session-time overrides (port/protocol), preventing the old SFTP
+    // session from being closed while it may have in-flight transfers.
+    const currentConn = s.leftPane.connection;
+    const needsNewTab = !!(currentConn && currentConn.status === "connected");
+
+    connectedKeyRef.current = connectionKey;
+    connectedHostObjRef.current = activeHost;
+    s.connect("left", activeHost, {
+      ...(needsNewTab ? { forceNewTab: true } : undefined),
+      onTabCreated: (tabId) => {
+        tabConnectionKeyMapRef.current.set(tabId, connectionKey);
+      },
+    });
+  }, [activeHost, hasActiveWork]); // Re-evaluate when work finishes so deferred switch can proceed
+
+  // Clear the remembered connection key when the pane disconnects or the
+  // session is lost, so re-opening SFTP for the same terminal reconnects.
+  // Also reset the file-watch counter — watches are bound to the SFTP session,
+  // so they stop when the session disconnects.
+  useEffect(() => {
+    const connection = sftp.leftPane.connection;
+    if (!connection || connection.status === "error" || connection.status === "disconnected") {
+      connectedKeyRef.current = null;
+      if (sftp.activeFileWatchCountRef) {
+        sftp.activeFileWatchCountRef.current = 0;
+      }
+    }
+  }, [sftp.leftPane.connection, sftp.leftPane.connection?.status, sftp.activeFileWatchCountRef]);
+
+  useEffect(() => {
+    if (!activeHost || !initialLocation) return;
+    if (initialLocation.hostId !== activeHost.id || !initialLocation.path) return;
+
+    const activePane = sftpRef.current.leftPane;
+    const connection = activePane.connection;
+    if (!connection || connection.isLocal || connection.hostId !== activeHost.id) return;
+    if (connection.status !== "connected") return;
+
+    // Include full endpoint key so that same-hostId sessions with
+    // different overrides each get their initial location applied.
+    const locationKey = `${connectedKeyRef.current}:${initialLocation.path}`;
+    if (lastAppliedInitialLocationKeyRef.current === locationKey) return;
+
+    if (connection.currentPath === initialLocation.path) {
+      lastAppliedInitialLocationKeyRef.current = locationKey;
+      return;
+    }
+
+    lastAppliedInitialLocationKeyRef.current = locationKey;
+    sftpRef.current.navigateTo("left", initialLocation.path);
+  }, [
+    activeHost,
+    initialLocation,
+    sftp.leftPane,
+  ]);
+
+  useEffect(() => {
+    if (!pendingUpload || !activeHost) return;
+    if (handledPendingUploadIdRef.current === pendingUpload.requestId) return;
+    if (pendingUpload.hostId !== activeHost.id) return;
+
+    const activePane = sftp.leftPane;
+    const connection = activePane.connection;
+    if (!connection || connection.isLocal || connection.hostId !== activeHost.id) return;
+    if (connection.status !== "connected") return;
+
+    handledPendingUploadIdRef.current = pendingUpload.requestId;
+
+    const runUpload = async () => {
+      try {
+        const results = await sftpRef.current.uploadExternalEntries("left", pendingUpload.entries, {
+          targetPath: pendingUpload.targetPath,
+        });
+        if (results.some((result) => result.cancelled)) {
+          toast.info(t("sftp.upload.cancelled"), "SFTP");
+          return;
+        }
+
+        const failCount = results.filter((result) => !result.success && !result.cancelled).length;
+        const successCount = results.filter((result) => result.success).length;
+
+        if (failCount === 0) {
+          const message =
+            successCount === 1
+              ? `${t("sftp.upload")}: ${results[0]?.fileName ?? ""}`
+              : `${t("sftp.uploadFiles")}: ${successCount}`;
+          toast.success(message, "SFTP");
+        } else {
+          const failedFiles = results.filter((result) => !result.success && !result.cancelled);
+          failedFiles.forEach((failed) => {
+            const errorMsg = failed.error ? ` - ${failed.error}` : "";
+            toast.error(
+              `${t("sftp.error.uploadFailed")}: ${failed.fileName}${errorMsg}`,
+              "SFTP",
+            );
+          });
+        }
+      } catch (error) {
+        logger.error("[SftpSidePanel] Failed to upload dropped files:", error);
+        handledPendingUploadIdRef.current = null;
+        toast.error(
+          error instanceof Error ? error.message : t("sftp.error.uploadFailed"),
+          "SFTP",
+        );
+        return;
+      } finally {
+        onPendingUploadHandled?.(pendingUpload.requestId);
+      }
+    };
+
+    void runUpload();
+  }, [
+    activeHost,
+    onPendingUploadHandled,
+    pendingUpload,
+    sftp.leftPane,
+    t,
+  ]);
+
+  const MAX_VISIBLE_TRANSFERS = 5;
+  const visibleTransfers = useMemo(() => {
+    const connection = sftp.leftPane.connection;
+    if (!connection) return [];
+    // 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;
+      }
+      return t.targetHostId === connection.hostId || t.sourceConnectionId === connection.id || t.targetConnectionId === connection.id;
+    });
+    return [...filtered].reverse().slice(0, MAX_VISIBLE_TRANSFERS);
+  }, [sftp.transfers, sftp.leftPane.connection]);
+
+  const handleRevealTransferTarget = useCallback(
+    async (task: TransferTask) => {
+      const connection = sftpRef.current.leftPane.connection;
+      if (!connection || connection.isLocal) return;
+
+      const revealPath = task.isDirectory ? task.targetPath : getParentPath(task.targetPath);
+      await sftpRef.current.navigateTo("left", revealPath, { force: true });
+    },
+    [],
+  );
+
+  const canRevealTransferTarget = useCallback(
+    (task: TransferTask) => {
+      if (task.status !== "completed") return false;
+      if (task.direction !== "upload" && task.direction !== "remote-to-remote") return false;
+
+      const connection = sftp.leftPane.connection;
+      if (!connection || connection.isLocal) return false;
+
+      if (task.targetHostId) {
+        if (connection.hostId !== task.targetHostId) return false;
+        // If the transfer recorded a full endpoint key, use it to
+        // distinguish same-hostId uploads with different session overrides.
+        if (task.targetConnectionKey) {
+          return connectedKeyRef.current === task.targetConnectionKey;
+        }
+        return true;
+      }
+
+      return connection.id === task.targetConnectionId;
+    },
+    [sftp.leftPane.connection],
+  );
+
+  // When the auto-connect effect defers a switch (active transfers or open
+  // editor), the panel still operates on the current connection, not
+  // activeHost.  Use the connected host for the header so the label matches
+  // what browse/edit/delete actions actually target.
+  const displayHost = useMemo(() => {
+    const conn = sftp.leftPane.connection;
+    if (conn && !conn.isLocal) {
+      // Prefer the stored Host object from connect time — it preserves
+      // session-time overrides that the vault host may lack.
+      if (connectedHostObjRef.current && connectedHostObjRef.current.id === conn.hostId) {
+        return connectedHostObjRef.current;
+      }
+      return hosts.find((h) => h.id === conn.hostId) ?? activeHost;
+    }
+    return activeHost;
+  }, [sftp.leftPane.connection, hosts, activeHost]);
+
+  // Determine the active pane to render (without using global activeTabStore)
+  const activeLeftPaneId = sftp.leftTabs.activeTabId;
+
+  return (
+    <SftpContextProvider
+      hosts={hosts}
+      updateHosts={updateHosts}
+      draggedFiles={draggedFiles}
+      dragCallbacks={dragCallbacks}
+      leftCallbacks={leftCallbacks}
+      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">
+            <div className="flex items-center gap-2 min-w-0">
+              <DistroAvatar
+                host={displayHost}
+                fallback={displayHost.label.slice(0, 2).toUpperCase()}
+                size="sm"
+                className="h-5 w-5 rounded-sm shrink-0"
+              />
+              <div
+                className="min-w-0 flex-1 max-w-[calc(100%-1.75rem)] text-[11px] leading-5 truncate"
+                title={`${displayHost.label} · ${(displayHost.username || "root")}@${formatHostPort(displayHost.hostname, displayHost.port || 22)}`}
+              >
+                <span className="font-medium">
+                  {displayHost.label}
+                </span>
+                <span className="mx-1 text-muted-foreground">·</span>
+                <span className="font-mono text-muted-foreground">
+                  {(displayHost.username || "root")}@{displayHost.hostname}:{displayHost.port || 22}
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+        {/* File browser pane - render only the active pane */}
+        <div className="relative flex-1 min-h-0">
+          {leftPanes.map((pane, idx) => {
+            // Manage visibility locally instead of via activeTabStore
+            const isActive = activeLeftPaneId
+              ? pane.id === activeLeftPaneId
+              : idx === 0;
+            if (!isActive) return null;
+
+            return (
+              <div key={pane.id} className="absolute inset-0 z-10">
+                <SftpPaneView
+                  side="left"
+                  pane={pane}
+                  dialogActionScopeId={dialogActionScopeIdRef.current}
+                  isPaneFocused={isVisible && hasPaneFocus}
+                  sftpDefaultViewMode={sftpDefaultViewMode}
+                  showHeader
+                  showEmptyHeader
+                  forceActive
+                  onToggleShowHiddenFiles={() => handleToggleHiddenFiles(pane.id)}
+                  onGoToTerminalCwd={onGetTerminalCwd ? handleGoToTerminalCwd : undefined}
+                />
+              </div>
+            );
+          })}
+        </div>
+        <SftpTransferQueue
+          sftp={sftp}
+          visibleTransfers={visibleTransfers}
+          allTransfers={sftp.transfers}
+          canRevealTransferTarget={canRevealTransferTarget}
+          onRevealTransferTarget={handleRevealTransferTarget}
+        />
+      </div>
+
+      {renderOverlays && (
+        <SftpOverlays
+          hosts={hosts}
+          sftp={sftp}
+          visibleTransfers={visibleTransfers}
+          showTransferQueue={false}
+          showHostPickerLeft={showHostPickerLeft}
+          showHostPickerRight={showHostPickerRight}
+          hostSearchLeft={hostSearchLeft}
+          hostSearchRight={hostSearchRight}
+          setShowHostPickerLeft={setShowHostPickerLeft}
+          setShowHostPickerRight={setShowHostPickerRight}
+          setHostSearchLeft={setHostSearchLeft}
+          setHostSearchRight={setHostSearchRight}
+          handleHostSelectLeft={handleHostSelectLeft}
+          handleHostSelectRight={handleHostSelectRight}
+          permissionsState={permissionsState}
+          setPermissionsState={setPermissionsState}
+          showTextEditor={showTextEditor}
+          setShowTextEditor={setShowTextEditor}
+          textEditorTarget={textEditorTarget}
+          setTextEditorTarget={setTextEditorTarget}
+          textEditorContent={textEditorContent}
+          setTextEditorContent={setTextEditorContent}
+          handleSaveTextFile={handleSaveTextFile}
+          editorWordWrap={editorWordWrap}
+          setEditorWordWrap={setEditorWordWrap}
+          showFileOpenerDialog={showFileOpenerDialog}
+          setShowFileOpenerDialog={setShowFileOpenerDialog}
+          fileOpenerTarget={fileOpenerTarget}
+          setFileOpenerTarget={setFileOpenerTarget}
+          handleFileOpenerSelect={handleFileOpenerSelect}
+          handleSelectSystemApp={handleSelectSystemApp}
+          t={t}
+        />
+      )}
+    </SftpContextProvider>
+  );
+};
+
+const sidePanelAreEqual = (prev: SftpSidePanelProps, next: SftpSidePanelProps): boolean =>
+  prev.hosts === next.hosts &&
+  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 &&
+  prev.renderOverlays === next.renderOverlays &&
+  prev.pendingUpload?.requestId === next.pendingUpload?.requestId &&
+  prev.onPendingUploadHandled === next.onPendingUploadHandled &&
+  prev.sftpDoubleClickBehavior === next.sftpDoubleClickBehavior &&
+  prev.sftpAutoSync === next.sftpAutoSync &&
+  prev.sftpShowHiddenFiles === next.sftpShowHiddenFiles &&
+  prev.sftpUseCompressedUpload === next.sftpUseCompressedUpload &&
+  prev.editorWordWrap === next.editorWordWrap &&
+  prev.setEditorWordWrap === next.setEditorWordWrap &&
+  prev.onGetTerminalCwd === next.onGetTerminalCwd &&
+  prev.initialLocation?.hostId === next.initialLocation?.hostId &&
+  prev.initialLocation?.path === next.initialLocation?.path;
+
+export const SftpSidePanel = memo(SftpSidePanelInner, sidePanelAreEqual);
+SftpSidePanel.displayName = "SftpSidePanel";

components/SftpView.tsx

@@ -19,10 +19,11 @@ 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 { useSftpFileAssociations } from "../application/state/useSftpFileAssociations";
 import { toast } from "./ui/toast";
@@ -39,6 +40,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,20 +51,39 @@ interface SftpViewProps {
   hosts: Host[];
   keys: SSHKey[];
   identities: Identity[];
+  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 }) => {
+const SftpViewInner: React.FC<SftpViewProps> = ({
+  hosts,
+  keys,
+  identities,
+  updateHosts,
+  sftpDefaultViewMode,
+  sftpDoubleClickBehavior,
+  sftpAutoSync,
+  sftpShowHiddenFiles,
+  sftpUseCompressedUpload,
+  hotkeyScheme,
+  keyBindings,
+  editorWordWrap,
+  setEditorWordWrap,
+}) => {
   const { t } = useI18n();
   const isActive = useIsSftpActive();
-  const {
-    sftpDoubleClickBehavior,
-    sftpAutoSync,
-    sftpShowHiddenFiles,
-    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(() => ({
@@ -76,10 +98,24 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities }) =>
     },
   }), [t]);
 
-  const sftp = useSftpState(hosts, keys, identities, fileWatchHandlers);
+  const sftpOptions = useMemo(() => ({
+    ...fileWatchHandlers,
+    useCompressedUpload: sftpUseCompressedUpload,
+    defaultShowHiddenFiles: sftpShowHiddenFiles,
+  }), [fileWatchHandlers, sftpUseCompressedUpload, sftpShowHiddenFiles]);
 
-  // Get stream transfer functions for optimized downloads
-  const { showSaveDialog, startStreamTransfer } = useSftpBackend();
+  const sftp = useSftpState(hosts, keys, identities, sftpOptions);
+
+  // Get backend helpers for file downloads and local filesystem writes.
+  const {
+    showSaveDialog,
+    selectDirectory,
+    startStreamTransfer,
+    listSftp,
+    mkdirLocal,
+    deleteLocalFile,
+    listLocalDir,
+  } = useSftpBackend();
 
   // Store sftp in a ref so callbacks can access the latest instance
   // without needing to re-create when sftp changes
@@ -99,16 +135,34 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities }) =>
     keyBindings,
     hotkeyScheme,
     sftpRef,
+    dialogActionScopeId: dialogActionScopeIdRef.current,
     isActive,
-    showHiddenFiles: sftpShowHiddenFiles,
   });
 
   // Subscribe to focused side for visual indicator
   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) => {
+    const sideTabs = side === "left" ? sftpRef.current.leftTabs : sftpRef.current.rightTabs;
+    const pane = sideTabs.tabs.find((tab) => tab.id === paneId);
+    if (!pane) return;
+
+    sftpRef.current.setShowHiddenFiles(side, paneId, !pane.showHiddenFiles);
   }, []);
 
   // Sync activeTabId to external store (allows child components to subscribe without parent re-render)
@@ -161,13 +215,18 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities }) =>
     getOpenerForFileRef,
     setOpenerForExtension,
     t,
+    listSftp,
+    mkdirLocal,
+    deleteLocalFile,
     showSaveDialog,
+    selectDirectory,
     startStreamTransfer,
     getSftpIdForConnection: sftp.getSftpIdForConnection,
+    listLocalFiles: listLocalDir,
   });
 
   const visibleTransfers = useMemo(
-    () => sftp.transfers.slice(-5),
+    () => [...sftp.transfers].filter((t) => !t.parentTaskId).reverse().slice(0, 5),
     [sftp.transfers],
   );
 
@@ -210,16 +269,37 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities }) =>
     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}
+      updateHosts={updateHosts}
       draggedFiles={draggedFiles}
       dragCallbacks={dragCallbacks}
       leftCallbacks={leftCallbacks}
       rightCallbacks={rightCallbacks}
-      showHiddenFiles={sftpShowHiddenFiles}
     >
       <div
+        ref={rootRef}
         className={cn(
           "absolute inset-0 min-h-0 flex flex-col",
           isActive ? "z-20" : "",
@@ -249,9 +329,9 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities }) =>
               <SftpTabBar
                 tabs={leftTabsInfo}
                 side="left"
-                onSelectTab={handleSelectTabLeft}
+                onSelectTab={handleSelectTabLeftWithFocus}
                 onCloseTab={handleCloseTabLeft}
-                onAddTab={handleAddTabLeft}
+                onAddTab={handleAddTabLeftWithFocus}
                 onReorderTabs={handleReorderTabsLeft}
                 onMoveTabToOtherSide={handleMoveTabFromRightToLeft}
               />
@@ -267,8 +347,12 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities }) =>
                   <SftpPaneView
                     side="left"
                     pane={pane}
+                    dialogActionScopeId={dialogActionScopeIdRef.current}
+                    isPaneFocused={focusedSide === "left"}
+                    sftpDefaultViewMode={sftpDefaultViewMode}
                     showHeader
                     showEmptyHeader={false}
+                    onToggleShowHiddenFiles={() => handleToggleHiddenFiles("left", pane.id)}
                   />
                 </SftpPaneWrapper>
               ))}
@@ -305,9 +389,9 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities }) =>
               <SftpTabBar
                 tabs={rightTabsInfo}
                 side="right"
-                onSelectTab={handleSelectTabRight}
+                onSelectTab={handleSelectTabRightWithFocus}
                 onCloseTab={handleCloseTabRight}
-                onAddTab={handleAddTabRight}
+                onAddTab={handleAddTabRightWithFocus}
                 onReorderTabs={handleReorderTabsRight}
                 onMoveTabToOtherSide={handleMoveTabFromLeftToRight}
               />
@@ -323,8 +407,12 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities }) =>
                   <SftpPaneView
                     side="right"
                     pane={pane}
+                    dialogActionScopeId={dialogActionScopeIdRef.current}
+                    isPaneFocused={focusedSide === "right"}
+                    sftpDefaultViewMode={sftpDefaultViewMode}
                     showHeader
                     showEmptyHeader={false}
+                    onToggleShowHiddenFiles={() => handleToggleHiddenFiles("right", pane.id)}
                   />
                 </SftpPaneWrapper>
               ))}
@@ -380,7 +468,18 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities }) =>
 };
 
 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.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

@@ -28,6 +28,7 @@ interface SnippetsManagerProps {
   hotkeyScheme: HotkeyScheme;
   keyBindings: KeyBinding[];
   onSave: (snippet: Snippet) => void;
+  onBulkSave: (snippets: Snippet[]) => void;
   onDelete: (id: string) => void;
   onPackagesChange: (packages: string[]) => void;
   onRunSnippet?: (snippet: Snippet, targetHosts: Host[]) => void;
@@ -51,6 +52,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
   hotkeyScheme,
   keyBindings,
   onSave,
+  onBulkSave,
   onDelete,
   onPackagesChange,
   onRunSnippet,
@@ -300,6 +302,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
         package: editingSnippet.package || '',
         targets: targetSelection,
         shortkey: editingSnippet.shortkey,
+        noAutoRun: editingSnippet.noAutoRun,
       });
       setRightPanelMode('none');
     }
@@ -436,8 +439,8 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
     const name = newPackageName.trim();
     if (!name) return;
     
-    // Allow leading slash and validate the rest - allow hyphens anywhere in package names
-    if (!/^\/?([\w-]+(\/[\w-]+)*)\/?$/.test(name)) {
+    // Allow leading slash and validate the rest - allow hyphens and Unicode letters/numbers
+    if (!/^\/?([\w\p{L}\p{N}-]+(\/[\w\p{L}\p{N}-]+)*)\/?$/u.test(name)) {
       // Could add toast notification here for invalid characters
       return;
     }
@@ -486,11 +489,8 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
     // Update packages first, then save snippets
     onPackagesChange(keep);
     
-    // Only save snippets that were actually modified
-    const modifiedSnippets = updatedSnippets.filter((s, index) => 
-      s.package !== snippets[index].package
-    );
-    modifiedSnippets.forEach(onSave);
+    // Bulk-save all snippets to avoid stale-closure overwrites
+    onBulkSave(updatedSnippets);
     
     // Reset selected package if it was deleted
     if (selectedPackage && (selectedPackage === path || selectedPackage.startsWith(path + '/'))) {
@@ -527,7 +527,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
     });
 
     onPackagesChange(Array.from(new Set(updatedPackages)));
-    updatedSnippets.forEach(onSave);
+    onBulkSave(updatedSnippets);
     if (selectedPackage === source) setSelectedPackage(newPath);
   };
 
@@ -550,9 +550,9 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
       return;
     }
 
-    // Validate: same rules as createPackage - only allow letters, numbers, hyphens, underscores
+    // Validate: same rules as createPackage - allow Unicode letters, numbers, hyphens, underscores
     // Since we're renaming a single segment (no slashes allowed), use the segment-level pattern
-    if (!/^[\w-]+$/.test(newName)) {
+    if (!/^[\w\p{L}\p{N}-]+$/u.test(newName)) {
       setRenameError(t('snippets.renameDialog.error.invalidChars'));
       return;
     }
@@ -568,8 +568,8 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
       return;
     }
 
-    // Validate: duplicate (case-insensitive)
-    const existingPackage = packages.find(p => p.toLowerCase() === newPath.toLowerCase());
+    // Validate: duplicate (case-insensitive), excluding the package being renamed
+    const existingPackage = packages.find(p => p !== renamingPackagePath && p.toLowerCase() === newPath.toLowerCase());
     if (existingPackage) {
       setRenameError(t('snippets.renameDialog.error.duplicate'));
       return;
@@ -595,7 +595,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
     });
 
     onPackagesChange(Array.from(new Set(updatedPackages)));
-    updatedSnippets.forEach(onSave);
+    onBulkSave(updatedSnippets);
 
     // Update selected package if it was renamed
     if (selectedPackage === renamingPackagePath) {
@@ -792,6 +792,17 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
               />
             </Card>
 
+            {/* No Auto Run */}
+            <label className="flex items-center gap-2 cursor-pointer px-1">
+              <input
+                type="checkbox"
+                checked={editingSnippet.noAutoRun ?? false}
+                onChange={(e) => setEditingSnippet({ ...editingSnippet, noAutoRun: e.target.checked || undefined })}
+                className="rounded border-input"
+              />
+              <span className="text-xs text-muted-foreground">{t('snippets.field.noAutoRun')}</span>
+            </label>
+
             {/* Shortkey */}
             <Card className="p-3 space-y-2 bg-card border-border/80">
               <div className="flex items-center justify-between">
@@ -1192,7 +1203,6 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
                 value={newPackageName}
                 onChange={(e) => setNewPackageName(e.target.value)}
                 onKeyDown={(e) => e.key === 'Enter' && createPackage()}
-                pattern="^/?([\w-]+(/[\w-]+)*)?/?$"
                 title="Package names can contain letters, numbers, hyphens, underscores, and forward slashes. Can optionally start with /"
               />
               <p className="text-[11px] text-muted-foreground">{t('snippets.packageDialog.hint')}</p>

components/SyncStatusButton.tsx

@@ -25,7 +25,7 @@ import {
     Server,
 } from 'lucide-react';
 import { useCloudSync } from '../application/state/useCloudSync';
-import type { CloudProvider } from '../domain/sync';
+import { isProviderReadyForSync, type CloudProvider } from '../domain/sync';
 import { useI18n } from '../application/i18n/I18nProvider';
 import { cn } from '../lib/utils';
 import { Button } from './ui/button';
@@ -122,12 +122,11 @@ export const SyncStatusButton: React.FC<SyncStatusButtonProps> = ({
 
     // Get connected provider (include syncing status as it's still connected)
     const getConnectedProvider = (): CloudProvider | null => {
-        const isProviderActive = (status: string) => status === 'connected' || status === 'syncing';
-        if (isProviderActive(sync.providers.github.status)) return 'github';
-        if (isProviderActive(sync.providers.google.status)) return 'google';
-        if (isProviderActive(sync.providers.onedrive.status)) return 'onedrive';
-        if (isProviderActive(sync.providers.webdav.status)) return 'webdav';
-        if (isProviderActive(sync.providers.s3.status)) return 's3';
+        if (isProviderReadyForSync(sync.providers.github)) return 'github';
+        if (isProviderReadyForSync(sync.providers.google)) return 'google';
+        if (isProviderReadyForSync(sync.providers.onedrive)) return 'onedrive';
+        if (isProviderReadyForSync(sync.providers.webdav)) return 'webdav';
+        if (isProviderReadyForSync(sync.providers.s3)) return 's3';
         return null;
     };
 
@@ -136,9 +135,9 @@ export const SyncStatusButton: React.FC<SyncStatusButtonProps> = ({
 
     // Determine overall status for the button indicator
     const getOverallStatus = (): StatusIndicatorProps['status'] => {
-        if (sync.isSyncing) return 'syncing';
-        if (sync.lastError) return 'error';
-        if (sync.hasAnyConnectedProvider) return 'synced';
+        if (sync.overallSyncStatus === 'syncing') return 'syncing';
+        if (sync.overallSyncStatus === 'error' || sync.overallSyncStatus === 'conflict') return 'error';
+        if (sync.overallSyncStatus === 'synced') return 'synced';
         return 'none';
     };
 

components/TextEditorModal.tsx

@@ -151,6 +151,7 @@ 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(() =>
@@ -254,6 +255,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,7 +321,30 @@ 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();
     });
   }, []);

components/ThemeList.tsx

@@ -0,0 +1,124 @@
+/**
+ * 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 } 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 { darkThemes, lightThemes } = useMemo(() => {
+        const dark = TERMINAL_THEMES.filter(t => t.type === 'dark');
+        const light = TERMINAL_THEMES.filter(t => t.type === 'light');
+        return { darkThemes: dark, lightThemes: light };
+    }, []);
+
+    return (
+        <>
+            {/* 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,10 @@
-import { Users } from 'lucide-react';
-import React, { useMemo, useState } from 'react';
-import { TERMINAL_THEMES } from '../infrastructure/config/terminalThemes';
-import { cn } from '../lib/utils';
-import { TerminalTheme } from '../types';
+import React from 'react';
 import {
     AsidePanel,
     AsidePanelContent,
 } from './ui/aside-panel';
 import { ScrollArea } from './ui/scroll-area';
+import { ThemeList } from './ThemeList';
 
 interface ThemeSelectPanelProps {
     open: boolean;
@@ -18,40 +15,6 @@ interface ThemeSelectPanelProps {
     showBackButton?: boolean;
 }
 
-// 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,
@@ -60,80 +23,6 @@ const ThemeSelectPanel: React.FC<ThemeSelectPanelProps> = ({
     onBack,
     showBackButton = true,
 }) => {
-    // Reserved for future hover preview feature
-    const [_hoveredThemeId, setHoveredThemeId] = useState<string | null>(null);
-
-    // Group themes by type - reserved for future sectioned view
-    const _groupedThemes = useMemo(() => {
-        const dark = TERMINAL_THEMES.filter(t => t.type === 'dark');
-        const light = TERMINAL_THEMES.filter(t => t.type === 'light');
-        return { dark, light };
-    }, []);
-
-    // Find selected theme info - reserved for displaying selection details
-    const _selectedTheme = useMemo(() => {
-        return TERMINAL_THEMES.find(t => t.id === selectedThemeId);
-    }, [selectedThemeId]);
-
-    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>
-                    {/* Show usage stats or badge */}
-                    <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                        {theme.id === 'netcatty-dark' && (
-                            <span className="text-muted-foreground">Default</span>
-                        )}
-                        {theme.id === 'netcatty-light' && (
-                            <>
-                                <Users size={10} />
-                                <span>Light mode</span>
-                            </>
-                        )}
-                        {theme.id === 'flexoki-dark' && (
-                            <span className="text-xs">new</span>
-                        )}
-                        {theme.id === 'flexoki-light' && (
-                            <span className="text-xs">new</span>
-                        )}
-                        {theme.id.startsWith('kanagawa') && (
-                            <>
-                                <Users size={10} />
-                                <span>{Math.floor(Math.random() * 20000)}</span>
-                            </>
-                        )}
-                        {theme.id.startsWith('hacker') && (
-                            <>
-                                <Users size={10} />
-                                <span>{Math.floor(Math.random() * 15000)}</span>
-                            </>
-                        )}
-                    </div>
-                </div>
-            </button>
-        );
-    };
-
     return (
         <AsidePanel
             open={open}
@@ -145,8 +34,10 @@ const ThemeSelectPanel: React.FC<ThemeSelectPanelProps> = ({
             <AsidePanelContent className="p-0">
                 <ScrollArea className="h-full">
                     <div className="py-2">
-                        {/* All themes in a single list */}
-                        {TERMINAL_THEMES.map(renderThemeItem)}
+                        <ThemeList
+                            selectedThemeId={selectedThemeId || ''}
+                            onSelect={onSelect}
+                        />
                     </div>
                 </ScrollArea>
             </AsidePanelContent>

components/TopTabs.tsx

@@ -1,11 +1,15 @@
-import { Bell, Copy, FileText, Folder, LayoutGrid, Minus, Moon, MoreHorizontal, Plus, Shield, Square, Sun, TerminalSquare, 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';
+import { getEffectiveHostDistro } from '../domain/host';
 import { cn } from '../lib/utils';
-import { TerminalSession, Workspace } from '../types';
+import { Host, TerminalSession, Workspace } from '../types';
+import { DISTRO_LOGOS, DISTRO_COLORS } from './DistroAvatar';
 import { Button } from './ui/button';
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from './ui/context-menu';
 import { SyncStatusButton } from './SyncStatusButton';
@@ -16,6 +20,7 @@ const dragRegionNoSelect = { WebkitAppRegion: 'drag', userSelect: 'none' } as Re
 
 interface TopTabsProps {
   theme: 'dark' | 'light';
+  hosts: Host[];
   sessions: TerminalSession[];
   orphanSessions: TerminalSession[];
   workspaces: Workspace[];
@@ -33,18 +38,106 @@ interface TopTabsProps {
   onToggleTheme: () => void;
   onOpenSettings: () => void;
   onSyncNow?: () => Promise<void>;
+  isImmersiveActive?: boolean;
   onStartSessionDrag: (sessionId: string) => void;
   onEndSessionDrag: () => void;
   onReorderTabs: (draggedId: string, targetId: string, position: 'before' | 'after') => void;
 }
 
-const sessionStatusDot = (status: TerminalSession['status']) => {
+// Detect local OS for local terminal tab icons
+const localOsId = (() => {
+  if (typeof navigator === 'undefined') return 'linux';
+  const ua = navigator.userAgent;
+  if (/Mac/i.test(ua)) return 'macos';
+  if (/Win/i.test(ua)) return 'windows';
+  return 'linux';
+})();
+
+// 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 boxBase = "shrink-0 h-4 w-4 rounded flex items-center justify-center";
+  const iconSize = "h-2.5 w-2.5";
+  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') {
+    return (
+      <div className={cn(boxBase, "bg-amber-500/15 text-amber-500")}>
+        <Usb className={iconSize} />
+      </div>
+    );
+  }
+
+  // Local protocol → OS-specific icon (protocol may be undefined for local sessions)
+  if (protocol === 'local' || host?.protocol === 'local' || (!protocol && !host)) {
+    const logo = DISTRO_LOGOS[localOsId];
+    const bg = DISTRO_COLORS[localOsId] || DISTRO_COLORS.default;
+    if (logo) {
+      return (
+        <div className={cn(boxBase, bg)}>
+          <img
+            src={logo}
+            alt={localOsId}
+            className={cn(iconSize, "object-contain invert brightness-0")}
+          />
+        </div>
+      );
+    }
+    return (
+      <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>
+    );
+  }
+
+  // Try distro logo with brand background color
+  if (host) {
+    const distro = getEffectiveHostDistro(host);
+    const logo = DISTRO_LOGOS[distro];
+    if (logo) {
+      const bg = DISTRO_COLORS[distro] || DISTRO_COLORS.default;
+      return (
+        <div className={cn(boxBase, bg)}>
+          <img
+            src={logo}
+            alt={distro || host.os}
+            className={cn(iconSize, "object-contain invert brightness-0")}
+          />
+        </div>
+      );
+    }
+  }
+
+  // Fallback: generic server icon for remote, terminal for unknown
+  if (host && host.protocol !== 'local') {
+    return (
+      <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={iconSize} style={fallbackStyle} />;
+});
+SessionTabIcon.displayName = 'SessionTabIcon';
+
+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)
@@ -56,12 +149,19 @@ const WindowControls: React.FC = memo(() => {
     // Check initial maximized state
     fetchIsMaximized().then(v => setIsMaximized(!!v));
 
-    // Listen for window resize to update maximized state
+    // Listen for window resize to update maximized state (debounced to avoid IPC storm)
+    let resizeTimer: ReturnType<typeof setTimeout> | null = null;
     const handleResize = () => {
-      fetchIsMaximized().then(v => setIsMaximized(!!v));
+      if (resizeTimer) clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => {
+        fetchIsMaximized().then(v => setIsMaximized(!!v));
+      }, 200);
     };
     window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      if (resizeTimer) clearTimeout(resizeTimer);
+    };
   }, [fetchIsMaximized]);
 
   const handleMinimize = () => {
@@ -78,17 +178,19 @@ const WindowControls: React.FC = memo(() => {
   };
 
   return (
-    <div className="flex items-center app-drag">
+    <div className="flex items-center app-drag h-full">
       <button
         onClick={handleMinimize}
-        className="h-8 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-8 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 ? (
@@ -101,7 +203,7 @@ const WindowControls: React.FC = memo(() => {
       </button>
       <button
         onClick={handleClose}
-        className="h-8 w-10 flex items-center justify-center text-muted-foreground hover:bg-red-500 hover:text-white transition-all duration-150 app-no-drag"
+        className="h-full w-10 flex items-center justify-center text-muted-foreground hover:bg-red-500 hover:text-white transition-all duration-150 app-no-drag"
         title="Close"
       >
         <X size={16} />
@@ -113,6 +215,7 @@ WindowControls.displayName = 'WindowControls';
 
 const TopTabsInner: React.FC<TopTabsProps> = ({
   theme,
+  hosts,
   sessions,
   orphanSessions,
   workspaces,
@@ -130,6 +233,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
   onToggleTheme,
   onOpenSettings,
   onSyncNow,
+  isImmersiveActive,
   onStartSessionDrag,
   onEndSessionDrag,
   onReorderTabs,
@@ -138,6 +242,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
   // 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;
@@ -235,6 +340,16 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
     return map;
   }, [logViews]);
 
+  const hostMap = useMemo(() => {
+    const map = new Map<string, Host>();
+    for (const h of hosts) map.set(h.id, h);
+    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>();
@@ -358,6 +473,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';
@@ -376,28 +492,57 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                 onDragLeave={handleTabDragLeave}
                 onDrop={(e) => handleTabDrop(e, session.id)}
                 className={cn(
-                  "relative h-6 pl-3 pr-2 min-w-[140px] max-w-[240px] rounded-md border text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
-                  "transition-all duration-200 ease-out",
-                  activeTabId === session.id ? "bg-accent/20 text-foreground" : "border-border/60 text-muted-foreground hover:border-accent/40 hover:text-foreground",
+                  "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,
-                  ...(activeTabId === session.id ? { borderColor: 'hsl(var(--accent))' } : {})
+                  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]"
+                    style={{ backgroundColor: 'hsl(var(--primary))' }}
+                  />
+                )}
                 {/* Drop indicator line - before */}
                 {showDropIndicatorBefore && isDraggingForReorder && (
-                  <div className="absolute -left-1.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-1.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">
-                  <TerminalSquare size={14} className={cn("shrink-0", activeTabId === session.id ? "text-accent" : "text-muted-foreground")} />
+                  <SessionTabIcon host={hostMap.get(session.hostId)} isActive={activeTabId === session.id} protocol={session.protocol} />
                   <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)}
@@ -426,6 +571,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] || {};
@@ -445,30 +591,72 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                 onDragLeave={handleTabDragLeave}
                 onDrop={(e) => handleTabDrop(e, workspace.id)}
                 className={cn(
-                  "relative h-6 pl-3 pr-2 min-w-[150px] max-w-[260px] rounded-md border text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
-                  "transition-all duration-200 ease-out",
-                  isActive ? "bg-accent/20 text-foreground" : "border-border/60 text-muted-foreground hover:border-accent/40 hover:text-foreground",
+                  "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,
-                  ...(isActive ? { borderColor: 'hsl(var(--accent))' } : {})
+                  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]"
+                    style={{ backgroundColor: 'hsl(var(--primary))' }}
+                  />
+                )}
                 {/* Drop indicator line - before */}
                 {showDropIndicatorBefore && isDraggingForReorder && (
-                  <div className="absolute -left-1.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-1.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>
@@ -495,14 +683,42 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
             data-tab-id={logView.id}
             onClick={() => onSelectTab(logView.id)}
             className={cn(
-              "relative h-6 pl-3 pr-2 min-w-[140px] max-w-[240px] rounded-md border text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
-              "transition-all duration-200 ease-out",
-              isActive ? "bg-accent/20 text-foreground" : "border-border/60 text-muted-foreground hover:border-accent/40 hover:text-foreground"
+              "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={isActive ? { borderColor: 'hsl(var(--accent))' } : {}}
+            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]"
+                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>
@@ -536,36 +752,83 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
 
   return (
     <div
-      className="relative w-full bg-secondary border-b border-border/60 app-drag"
-      style={dragRegionNoSelect}
+      data-top-tabs-root
+      className="relative w-full bg-secondary app-drag"
+      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 */}
       <div className="absolute inset-x-0 top-0 h-1 app-drag pointer-events-auto z-10" style={dragRegionStyle} aria-hidden />
       <div
-        className="h-8 flex items-center gap-2 app-drag"
+        className="h-9 flex items-end gap-0 app-drag"
         style={{ ...dragRegionStyle, paddingLeft: isMacClient && !isWindowFullscreen ? 76 : 12, paddingRight: isMacClient ? 12 : 0 }}
       >
         {/* Fixed left tabs: Vaults and SFTP */}
-        <div className="flex items-center gap-2 flex-shrink-0 app-drag">
+        <div className="flex items-end gap-0 flex-shrink-0 app-drag">
           <div
             onClick={() => onSelectTab('vault')}
             className={cn(
-              "h-6 px-3 rounded-md border text-xs font-semibold cursor-pointer flex items-center gap-2 app-no-drag",
-              isVaultActive ? "bg-accent/20 text-foreground" : "border-border/60 text-muted-foreground hover:border-accent/40 hover:text-foreground"
+              "relative h-7 px-3 rounded text-xs font-semibold cursor-pointer flex items-center gap-2 app-no-drag",
             )}
-            style={isVaultActive ? { borderColor: 'hsl(var(--accent))' } : undefined}
+            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
+            <FolderLock size={14} /> Vaults
           </div>
           <div
             onClick={() => onSelectTab('sftp')}
             className={cn(
-              "h-6 px-3 rounded-md border text-xs font-semibold cursor-pointer flex items-center gap-2 app-no-drag",
-              isSftpActive ? "bg-accent/20 text-foreground" : "border-border/60 text-muted-foreground hover:border-accent/40 hover:text-foreground"
+              "relative h-7 px-3 rounded-none text-xs font-semibold cursor-pointer flex items-center gap-2 app-no-drag",
             )}
-            style={isSftpActive ? { borderColor: 'hsl(var(--accent))' } : undefined}
+            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>
@@ -587,14 +850,14 @@ 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)' }}
             />
           )}
 
           {/* Scrollable container */}
           <div
             ref={tabsContainerRef}
-            className="flex items-center gap-2 overflow-x-auto scrollbar-none app-drag max-w-full"
+            className="flex items-end gap-0 overflow-x-auto scrollbar-none app-drag max-w-full"
             style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
           >
             {renderOrderedTabs()}
@@ -603,7 +866,8 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
               <Button
                 variant="ghost"
                 size="icon"
-                className="h-6 w-6 flex-shrink-0 app-no-drag"
+                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"
               >
@@ -611,14 +875,14 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
               </Button>
             )}
             {/* Draggable spacer - fixed width handle at the end */}
-            <div className="min-w-[20px] h-6 app-drag flex-shrink-0" style={dragRegionStyle} />
+            <div className="min-w-[20px] h-7 app-drag flex-shrink-0" style={dragRegionStyle} />
           </div>
 
           {/* Right fade mask */}
           {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>
@@ -628,7 +892,8 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
           <Button
             variant="ghost"
             size="icon"
-            className="h-6 w-6 flex-shrink-0 app-no-drag"
+            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"
           >
@@ -637,25 +902,37 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
         )}
 
         {/* Fixed right controls */}
-        <div className="flex-shrink-0 flex items-center gap-2 app-drag" style={dragRegionStyle}>
-          <Button variant="ghost" size="icon" className="h-6 w-6 text-muted-foreground hover:text-foreground app-no-drag">
+        <div className="flex-shrink-0 flex items-center gap-2 app-drag self-center" style={dragRegionStyle}>
+          <Button
+            variant="ghost"
+            size="icon"
+            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 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}
             title="Toggle theme"
           >
             {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
           </Button>
         </div>
         {/* Custom window controls for Windows/Linux */}
-        {!isMacClient && <WindowControls />}
+        {!isMacClient && <div className="self-stretch flex items-stretch"><WindowControls /></div>}
         {/* Small drag shim to the right edge (macOS only – on Windows the close button should touch the edge) */}
-        {isMacClient && <div className="w-2 h-8 app-drag flex-shrink-0" />}
+        {isMacClient && <div className="w-2 h-9 app-drag flex-shrink-0" />}
       </div>
     </div>
   );
@@ -665,14 +942,17 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
 const topTabsAreEqual = (prev: TopTabsProps, next: TopTabsProps): boolean => {
   return (
     prev.theme === next.theme &&
+    prev.hosts === next.hosts &&
     prev.sessions === next.sessions &&
     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.isImmersiveActive === next.isImmersiveActive
   );
 };
 

components/TrayPanel.tsx

@@ -116,7 +116,7 @@ const TrayPanelContent: React.FC = () => {
     onTrayPanelMenuData,
   } = useTrayPanelBackend();
 
-  const { hosts, keys } = useVaultState();
+  const { hosts, keys, identities } = useVaultState();
   useSessionState();
   const { rules: portForwardingRules, startTunnel, stopTunnel } = usePortForwardingState();
   const activeTabId = useActiveTabId();
@@ -151,11 +151,6 @@ const TrayPanelContent: React.FC = () => {
     return () => unsubscribe?.();
   }, [onTrayPanelRefresh]);
 
-  const keysForPf = useMemo(
-    () => keys.map((k) => ({ id: k.id, privateKey: k.privateKey })),
-    [keys],
-  );
-
   const handleClose = useCallback(() => {
     void hideTrayPanel();
   }, [hideTrayPanel]);
@@ -339,7 +334,7 @@ const TrayPanelContent: React.FC = () => {
                       if (isActive) {
                         void stopTunnel(rule.id);
                       } else {
-                        void startTunnel(rule, host, keysForPf, (status, error) => {
+                        void startTunnel(rule, host, hosts, keys, identities, (status, error) => {
                           if (status === "error" && error) toast.error(error);
                         }, rule.autoStart);
                       }

components/ai-elements/conversation.tsx

@@ -0,0 +1,54 @@
+import { cn } from '../../lib/utils';
+import type { ComponentProps } from 'react';
+import React, { useCallback } from 'react';
+import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
+import { ArrowDown } from 'lucide-react';
+
+export type ConversationProps = ComponentProps<typeof StickToBottom>;
+
+export const Conversation = ({ className, ...props }: ConversationProps) => (
+  <StickToBottom
+    className={cn('relative flex-1 overflow-y-hidden', className)}
+    initial="instant"
+    resize="smooth"
+    role="log"
+    {...props}
+  />
+);
+
+export type ConversationContentProps = ComponentProps<typeof StickToBottom.Content>;
+
+export const ConversationContent = ({ className, ...props }: ConversationContentProps) => (
+  <StickToBottom.Content
+    className={cn('flex flex-col gap-4 p-4', className)}
+    {...props}
+  />
+);
+
+export const ConversationScrollButton = ({ className, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+  const handleClick = useCallback(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+
+  if (isAtBottom) return null;
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        'absolute bottom-3 left-1/2 -translate-x-1/2 z-10',
+        'h-7 w-7 rounded-full border border-border/40 bg-background/90 backdrop-blur-sm',
+        'flex items-center justify-center',
+        'text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer',
+        'shadow-sm',
+        className,
+      )}
+      onClick={handleClick}
+      {...props}
+    >
+      <ArrowDown size={14} />
+    </button>
+  );
+};

components/ai-elements/message.tsx

@@ -0,0 +1,87 @@
+import { cn } from '../../lib/utils';
+import { cjk } from '@streamdown/cjk';
+import { code } from '@streamdown/code';
+import type { ComponentProps, HTMLAttributes } from 'react';
+import { memo } from 'react';
+import { Streamdown } from 'streamdown';
+
+export type MessageProps = HTMLAttributes<HTMLDivElement> & {
+  from: 'user' | 'assistant' | 'system' | 'tool';
+};
+
+export const Message = ({ className, from, ...props }: MessageProps) => (
+  <div
+    className={cn(
+      'group flex w-full max-w-[95%] flex-col gap-1.5',
+      from === 'user' ? 'is-user ml-auto' : 'is-assistant',
+      className,
+    )}
+    {...props}
+  />
+);
+
+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 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,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type MessageActionsProps = ComponentProps<'div'>;
+
+export const MessageActions = ({ className, children, ...props }: MessageActionsProps) => (
+  <div
+    className={cn(
+      'flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+const streamdownPlugins = { cjk, code };
+
+export type MessageResponseProps = ComponentProps<typeof Streamdown>;
+
+export const MessageResponse = memo(
+  ({ className, ...props }: MessageResponseProps) => (
+    <Streamdown
+      className={cn(
+        'size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0',
+        // 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]:my-1.5',
+        '[&_ul]:my-1.5 [&_ul]:pl-4 [&_ul]:list-disc',
+        '[&_ol]:my-1.5 [&_ol]:pl-4 [&_ol]:list-decimal',
+        '[&_li]:my-0.5',
+        '[&_h1]:text-base [&_h1]:font-semibold [&_h1]:mt-4 [&_h1]:mb-2',
+        '[&_h2]:text-sm [&_h2]:font-semibold [&_h2]:mt-3 [&_h2]:mb-1.5',
+        '[&_h3]:text-sm [&_h3]:font-medium [&_h3]:mt-2 [&_h3]:mb-1',
+        '[&_blockquote]:border-l-2 [&_blockquote]:border-border/50 [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground',
+        '[&_a]:text-primary [&_a]:underline',
+        '[&_hr]:border-border/30 [&_hr]:my-3',
+        '[&_table]:text-[12px] [&_th]:px-2 [&_th]:py-1 [&_th]:border [&_th]:border-border/30 [&_th]:bg-muted/20 [&_td]:px-2 [&_td]:py-1 [&_td]:border [&_td]:border-border/30',
+        className,
+      )}
+      plugins={streamdownPlugins}
+      {...props}
+    />
+  ),
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children &&
+    nextProps.isAnimating === prevProps.isAnimating,
+);
+MessageResponse.displayName = 'MessageResponse';

components/ai-elements/prompt-input.tsx

@@ -0,0 +1,247 @@
+/**
+ * PromptInput - Adapted from Vercel AI Elements prompt-input for netcatty.
+ *
+ * Simplified: no file attachments, screenshots, drag-drop, command palette,
+ * hover cards, referenced sources, or tabs. Core input + footer + submit.
+ */
+
+import { ArrowUp, Square, X } from 'lucide-react';
+import type {
+  ComponentProps,
+  FormEvent,
+  HTMLAttributes,
+  KeyboardEvent,
+  ReactNode,
+} from 'react';
+import { forwardRef, useCallback, useRef } from 'react';
+import { cn } from '../../lib/utils';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from '../ui/input-group';
+import { Spinner } from '../ui/spinner';
+
+// ---------------------------------------------------------------------------
+// PromptInput (form wrapper)
+// ---------------------------------------------------------------------------
+
+export interface PromptInputProps extends HTMLAttributes<HTMLFormElement> {
+  onSubmit: (text: string, event: FormEvent<HTMLFormElement>) => void | Promise<void>;
+}
+
+export const PromptInput = forwardRef<HTMLFormElement, PromptInputProps>(
+  ({ className, onSubmit, children, ...props }, ref) => {
+    const handleSubmit = useCallback(
+      (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const form = e.currentTarget;
+        const textarea = form.querySelector('textarea');
+        const text = textarea?.value?.trim() ?? '';
+        if (!text) return;
+        onSubmit(text, e);
+      },
+      [onSubmit],
+    );
+
+    return (
+      <form ref={ref} onSubmit={handleSubmit} className={className} {...props}>
+        <InputGroup>{children}</InputGroup>
+      </form>
+    );
+  },
+);
+PromptInput.displayName = 'PromptInput';
+
+// ---------------------------------------------------------------------------
+// PromptInputTextarea
+// ---------------------------------------------------------------------------
+
+export interface PromptInputTextareaProps extends ComponentProps<'textarea'> {
+  /** Called when Enter is pressed (without Shift) to trigger form submit */
+  onSubmitRequest?: () => void;
+}
+
+export const PromptInputTextarea = forwardRef<HTMLTextAreaElement, PromptInputTextareaProps>(
+  ({ className, onSubmitRequest, onKeyDown, ...props }, ref) => {
+    const internalRef = useRef<HTMLTextAreaElement | null>(null);
+
+    const setRef = useCallback(
+      (node: HTMLTextAreaElement | null) => {
+        internalRef.current = node;
+        if (typeof ref === 'function') ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref],
+    );
+
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent<HTMLTextAreaElement>) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented) return;
+
+        // CJK composition guard
+        if (e.nativeEvent.isComposing) return;
+
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          onSubmitRequest?.();
+          // Trigger form submit
+          const form = internalRef.current?.closest('form');
+          if (form) {
+            form.requestSubmit();
+          }
+        }
+      },
+      [onKeyDown, onSubmitRequest],
+    );
+
+    return (
+      <InputGroupTextarea
+        ref={setRef}
+        className={className}
+        onKeyDown={handleKeyDown}
+        {...props}
+      />
+    );
+  },
+);
+PromptInputTextarea.displayName = 'PromptInputTextarea';
+
+// ---------------------------------------------------------------------------
+// PromptInputFooter
+// ---------------------------------------------------------------------------
+
+export type PromptInputFooterProps = HTMLAttributes<HTMLDivElement>;
+
+export const PromptInputFooter = forwardRef<HTMLDivElement, PromptInputFooterProps>(
+  ({ className, ...props }, ref) => (
+    <InputGroupAddon
+      ref={ref}
+      align="block-end"
+      className={cn('gap-1', className)}
+      {...props}
+    />
+  ),
+);
+PromptInputFooter.displayName = 'PromptInputFooter';
+
+// ---------------------------------------------------------------------------
+// PromptInputTools (left side of footer)
+// ---------------------------------------------------------------------------
+
+export type PromptInputToolsProps = HTMLAttributes<HTMLDivElement>;
+
+export const PromptInputTools = forwardRef<HTMLDivElement, PromptInputToolsProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex items-center gap-0.5', className)}
+      {...props}
+    />
+  ),
+);
+PromptInputTools.displayName = 'PromptInputTools';
+
+// ---------------------------------------------------------------------------
+// PromptInputButton (toolbar button with optional tooltip)
+// ---------------------------------------------------------------------------
+
+export interface PromptInputButtonProps extends ComponentProps<typeof InputGroupButton> {
+  tooltip?: ReactNode;
+  tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+export const PromptInputButton = forwardRef<HTMLButtonElement, PromptInputButtonProps>(
+  ({ tooltip, tooltipSide = 'top', ...props }, ref) => {
+    const button = <InputGroupButton ref={ref} {...props} />;
+
+    if (!tooltip) return button;
+
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>{button}</TooltipTrigger>
+          <TooltipContent side={tooltipSide}>{tooltip}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  },
+);
+PromptInputButton.displayName = 'PromptInputButton';
+
+// ---------------------------------------------------------------------------
+// PromptInputSubmit
+// ---------------------------------------------------------------------------
+
+export type PromptInputStatus = 'idle' | 'submitted' | 'streaming' | 'error';
+
+export interface PromptInputSubmitProps extends ComponentProps<typeof InputGroupButton> {
+  status?: PromptInputStatus;
+  onStop?: () => void;
+}
+
+export const PromptInputSubmit = forwardRef<HTMLButtonElement, PromptInputSubmitProps>(
+  ({ status = 'idle', onStop, className, disabled, ...props }, ref) => {
+    const isRunning = status === 'submitted' || status === 'streaming';
+
+    const handleClick = useCallback(() => {
+      if (isRunning && onStop) {
+        onStop();
+      }
+    }, [isRunning, onStop]);
+
+    const icon =
+      status === 'submitted' ? (
+        <Spinner size={14} />
+      ) : status === 'streaming' ? (
+        <Square size={14} />
+      ) : status === 'error' ? (
+        <X size={14} />
+      ) : (
+        <ArrowUp size={14} />
+      );
+
+    const tooltipLabel =
+      status === 'submitted'
+        ? 'Waiting...'
+        : status === 'streaming'
+          ? 'Stop'
+          : status === 'error'
+            ? 'Error'
+            : 'Send';
+
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <InputGroupButton
+              ref={ref}
+              type={isRunning ? 'button' : 'submit'}
+              onClick={isRunning ? handleClick : undefined}
+              variant="ghost"
+              disabled={disabled && !isRunning}
+              className={cn(
+                'h-8 w-8 rounded-full border p-0 shadow-sm disabled:opacity-100',
+                isRunning
+                  ? 'border-destructive/60 bg-destructive/85 text-destructive-foreground hover:bg-destructive'
+                  : disabled
+                    ? 'border-border/80 bg-muted/52 text-foreground/72 hover:bg-muted/52'
+                    : 'border-foreground/20 bg-foreground text-background hover:bg-foreground/90',
+                className,
+              )}
+              {...props}
+            >
+              {icon}
+            </InputGroupButton>
+          </TooltipTrigger>
+          <TooltipContent side="top">{tooltipLabel}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  },
+);
+PromptInputSubmit.displayName = 'PromptInputSubmit';
+

components/ai-elements/tool-call.tsx

@@ -0,0 +1,229 @@
+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;
+  args?: Record<string, unknown>;
+  result?: unknown;
+  isError?: boolean;
+  isLoading?: boolean;
+  isInterrupted?: boolean;
+  /** Approval state for this tool call (from the approval gate). */
+  approvalStatus?: 'pending' | 'approved' | 'denied';
+  /** Called when user approves this tool call. */
+  onApprove?: () => void;
+  /** Called when user rejects this tool call. */
+  onReject?: () => void;
+}
+
+export const ToolCall = ({
+  name, args, result, isError, isLoading, isInterrupted,
+  approvalStatus, onApprove, onReject,
+  className, ...props
+}: ToolCallProps) => {
+  const { t } = useI18n();
+  const [expanded, setExpanded] = useState(false);
+  const cardRef = useRef<HTMLDivElement>(null);
+  const approveBtnRef = useRef<HTMLButtonElement>(null);
+  const [responded, setResponded] = useState(false);
+
+  const isPendingApproval = approvalStatus === 'pending' && !responded;
+
+  const handleApprove = useCallback(() => {
+    if (!isPendingApproval) return;
+    setResponded(true);
+    onApprove?.();
+  }, [isPendingApproval, onApprove]);
+
+  const handleReject = useCallback(() => {
+    if (!isPendingApproval) return;
+    setResponded(true);
+    onReject?.();
+  }, [isPendingApproval, onReject]);
+
+  // Keyboard: Enter = approve, Escape = reject (when pending)
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (!isPendingApproval) return;
+    if (e.key === 'Enter') { e.preventDefault(); handleApprove(); }
+    else if (e.key === 'Escape') { e.preventDefault(); handleReject(); }
+  }, [isPendingApproval, handleApprove, handleReject]);
+
+  // Auto-focus and auto-scroll when approval is pending
+  useEffect(() => {
+    if (isPendingApproval && cardRef.current) {
+      cardRef.current.scrollIntoView({ behavior: 'smooth', block: 'end' });
+      // Small delay to let the UI render, then expand and focus
+      setExpanded(true);
+      setTimeout(() => approveBtnRef.current?.focus(), 100);
+    }
+  }, [isPendingApproval]);
+
+  // Reset responded state when approvalStatus changes (e.g. new approval)
+  useEffect(() => {
+    if (approvalStatus === 'pending') setResponded(false);
+  }, [approvalStatus]);
+
+  // Border/bg color based on approval status
+  const borderClass = approvalStatus === 'pending'
+    ? 'border-yellow-500/30 bg-yellow-500/[0.04]'
+    : approvalStatus === 'approved'
+      ? 'border-green-500/20 bg-green-500/[0.03]'
+      : 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={cn('text-yellow-500/70', statusIconClass)} />
+  ) : isLoading ? (
+    <Loader2 size={12} className={cn('animate-spin text-blue-400/70', statusIconClass)} />
+  ) : isInterrupted ? (
+    <Slash size={12} className={cn('text-muted-foreground/55', statusIconClass)} />
+  ) : isError ? (
+    <XCircle size={12} className={cn('text-red-400/70', statusIconClass)} />
+  ) : result !== undefined ? (
+    <CheckCircle2 size={12} className={cn('text-green-400/70', statusIconClass)} />
+  ) : null;
+
+  return (
+    <div
+      ref={cardRef}
+      tabIndex={isPendingApproval ? 0 : undefined}
+      onKeyDown={isPendingApproval ? handleKeyDown : undefined}
+      className={cn('rounded-md border overflow-hidden text-[12px] outline-none', borderClass, className)}
+      {...props}
+    >
+      <button
+        type="button"
+        onClick={() => setExpanded(e => !e)}
+        className="w-full flex items-center gap-2 px-3 py-1.5 hover:bg-muted/20 transition-colors cursor-pointer"
+      >
+        {expanded
+          ? <ChevronDown size={12} className="text-muted-foreground/40 shrink-0" />
+          : <ChevronRight size={12} className="text-muted-foreground/40 shrink-0" />
+        }
+        {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' && (
+          <Badge className="text-[10px] px-1.5 py-0 bg-green-600/20 text-green-400 border-green-600/30">
+            {t('ai.chat.toolApproved')}
+          </Badge>
+        )}
+        {approvalStatus === 'denied' && (
+          <Badge className="text-[10px] px-1.5 py-0 bg-red-600/20 text-red-400 border-red-600/30">
+            {t('ai.chat.toolDenied')}
+          </Badge>
+        )}
+        {statusIcon}
+      </button>
+
+      {expanded && (
+        <div className="border-t border-border/20">
+          {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="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>
+          )}
+
+          {/* Inline approval buttons */}
+          {isPendingApproval && (
+            <div className="px-3 py-2 border-t border-border/20">
+              <div className="flex items-center justify-between">
+                <span className="text-[10px] text-muted-foreground/30">
+                  {t('ai.chat.toolApprovalHint')}
+                </span>
+                <div className="flex items-center gap-1.5">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-6 px-2 text-[11px] border-red-500/20 text-red-400/80 hover:bg-red-500/10 hover:text-red-400"
+                    onClick={handleReject}
+                  >
+                    <X size={11} className="mr-0.5" />
+                    {t('ai.chat.reject')}
+                  </Button>
+                  <Button
+                    ref={approveBtnRef}
+                    size="sm"
+                    className="h-6 px-2.5 text-[11px] bg-green-600/80 hover:bg-green-600 text-white"
+                    onClick={handleApprove}
+                  >
+                    <Check size={11} className="mr-0.5" />
+                    {t('ai.chat.approve')}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {result !== undefined && (
+            <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(
+                'max-h-64 overflow-auto text-[11px] font-mono whitespace-pre [overflow-wrap:normal]',
+                isError ? 'text-red-400/60' : 'text-muted-foreground/50',
+              )}>
+                {formatToolResult(result)}
+              </pre>
+            </div>
+          )}
+          {isInterrupted && result === undefined && (
+            <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">Status</div>
+              <div className="text-[11px] text-muted-foreground/50">
+                Interrupted
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

components/ai/AgentIconBadge.tsx

@@ -0,0 +1,232 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+
+type AgentLike = {
+  id?: string;
+  name?: string;
+  type?: 'builtin' | 'external';
+  icon?: string;
+  command?: string;
+};
+
+type AgentIconKey =
+  | 'catty'
+  | 'copilot'
+  | 'openai'
+  | 'claude'
+  | 'anthropic'
+  | 'gemini'
+  | 'google'
+  | 'ollama'
+  | 'openrouter'
+  | 'zed'
+  | 'atom'
+  | 'terminal'
+  | 'plus';
+
+type AgentIconVisual = {
+  src: string;
+  badgeClassName: string;
+  imageClassName: string;
+};
+
+const AGENT_ICON_VISUALS: Record<AgentIconKey, AgentIconVisual> = {
+  catty: {
+    src: '/ai/agents/catty.svg',
+    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',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert',
+  },
+  claude: {
+    src: '/ai/agents/claude.svg',
+    badgeClassName: 'border-orange-500/22 bg-orange-500/12',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert',
+  },
+  anthropic: {
+    src: '/ai/providers/anthropic.svg',
+    badgeClassName: 'border-orange-500/22 bg-orange-500/12',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert',
+  },
+  gemini: {
+    src: '/ai/agents/gemini.svg',
+    badgeClassName: 'border-sky-500/22 bg-sky-500/12',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert',
+  },
+  google: {
+    src: '/ai/providers/google.svg',
+    badgeClassName: 'border-sky-500/22 bg-sky-500/12',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert',
+  },
+  ollama: {
+    src: '/ai/providers/ollama.svg',
+    badgeClassName: 'border-violet-500/22 bg-violet-500/12',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert',
+  },
+  openrouter: {
+    src: '/ai/providers/openrouter.svg',
+    badgeClassName: 'border-fuchsia-500/22 bg-fuchsia-500/12',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert',
+  },
+  zed: {
+    src: '/ai/agents/zed.svg',
+    badgeClassName: 'border-cyan-500/22 bg-cyan-500/12',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert',
+  },
+  atom: {
+    src: '/ai/agents/atom.svg',
+    badgeClassName: 'border-amber-500/18 bg-amber-500/10',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert opacity-90',
+  },
+  terminal: {
+    src: '/ai/agents/terminal.svg',
+    badgeClassName: 'border-white/8 bg-white/[0.04]',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert opacity-90',
+  },
+  plus: {
+    src: '/ai/agents/plus.svg',
+    badgeClassName: 'border-white/8 bg-white/[0.04]',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert opacity-85',
+  },
+};
+
+function normalizeToken(value?: string): string {
+  return (value ?? '').toLowerCase().replace(/[^a-z0-9]+/g, '');
+}
+
+function getAgentIconKey(agent: AgentLike | 'add-more'): AgentIconKey {
+  if (agent === 'add-more') {
+    return 'plus';
+  }
+
+  if (agent.type === 'builtin') {
+    return 'catty';
+  }
+
+  const tokens = [
+    normalizeToken(agent.icon),
+    normalizeToken(agent.command),
+    normalizeToken(agent.name),
+    normalizeToken(agent.id),
+  ].filter(Boolean);
+
+  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';
+  }
+  if (
+    tokens.some(
+      (token) =>
+        token.includes('codex') ||
+        token.includes('openai') ||
+        token.includes('chatgpt'),
+    )
+  ) {
+    return 'openai';
+  }
+  if (
+    tokens.some(
+      (token) =>
+        token.includes('gemini') ||
+        token.includes('google') ||
+        token.includes('googlegemini'),
+    )
+  ) {
+    return 'gemini';
+  }
+  if (tokens.some((token) => token.includes('ollama'))) {
+    return 'ollama';
+  }
+  if (tokens.some((token) => token.includes('openrouter'))) {
+    return 'openrouter';
+  }
+  if (tokens.some((token) => token.includes('zed'))) {
+    return 'zed';
+  }
+  if (tokens.some((token) => token.includes('factory'))) {
+    return 'atom';
+  }
+
+  return 'terminal';
+}
+
+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 iconKey = getAgentIconKey(agent);
+  const visual = AGENT_ICON_VISUALS[iconKey];
+  const badgeSize =
+    size === 'xs'
+      ? 'h-4 w-4 rounded-sm'
+      : size === 'sm'
+        ? 'h-7 w-7 rounded-lg'
+        : size === 'lg'
+          ? 'h-10 w-10 rounded-xl'
+          : 'h-8 w-8 rounded-lg';
+  const imageSize =
+    size === 'xs'
+      ? 'h-3.5 w-3.5'
+      : size === 'sm'
+        ? 'h-3.5 w-3.5'
+        : size === 'lg'
+          ? 'h-5 w-5'
+          : 'h-4 w-4';
+
+  if (variant === 'plain') {
+    return (
+      <div
+        aria-hidden="true"
+        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,
+        visual.badgeClassName,
+        className,
+      )}
+    >
+      <img
+        src={visual.src}
+        alt=""
+        aria-hidden="true"
+        draggable={false}
+        className={cn(imageSize, visual.imageClassName)}
+      />
+    </div>
+  );
+};
+
+export default AgentIconBadge;

components/ai/AgentSelector.tsx

@@ -0,0 +1,289 @@
+/**
+ * AgentSelector - Dropdown for switching between AI agents
+ *
+ * Dark, grouped agent menu with local SVG branding for built-in,
+ * discovered, and external agents.
+ */
+
+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 {
+  Dropdown,
+  DropdownContent,
+  DropdownTrigger,
+} from '../ui/dropdown';
+
+interface AgentSelectorProps {
+  currentAgentId: string;
+  externalAgents: ExternalAgentConfig[];
+  discoveredAgents?: DiscoveredAgent[];
+  isDiscovering?: boolean;
+  onSelectAgent: (agentId: string) => void;
+  onEnableDiscoveredAgent?: (agent: DiscoveredAgent) => void;
+  onRediscover?: () => void;
+  onManageAgents?: () => void;
+}
+
+const BUILTIN_AGENTS: AgentInfo[] = [
+  {
+    id: 'catty',
+    name: 'Catty Agent',
+    type: 'builtin',
+    description: 'Built-in terminal assistant',
+    available: true,
+  },
+];
+
+const SectionLabel: React.FC<{ children: React.ReactNode; action?: React.ReactNode }> = ({ children, action }) => (
+  <div className="px-4 pb-2 pt-2 flex items-center justify-between">
+    <span className="text-[10px] font-medium tracking-wide text-muted-foreground/52">
+      {children}
+    </span>
+    {action}
+  </div>
+);
+
+const AgentMenuRow: React.FC<{
+  agent: AgentInfo;
+  isActive?: boolean;
+  subtitle?: string;
+  onClick: () => void;
+}> = ({ agent, isActive, subtitle, onClick }) => {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'flex h-10 w-full items-center gap-3 px-4 text-left text-[13px] text-foreground/86 transition-colors cursor-pointer hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/30',
+        isActive && 'bg-muted',
+      )}
+    >
+      <AgentIconBadge agent={agent} size="xs" variant="plain" className="opacity-78" />
+      <div className="min-w-0 flex-1">
+        <span className="block truncate">{agent.name}</span>
+        {subtitle && (
+          <span className="block truncate text-[10px] text-muted-foreground/40">{subtitle}</span>
+        )}
+      </div>
+    </button>
+  );
+};
+
+const DiscoveredAgentRow: React.FC<{
+  agent: DiscoveredAgent;
+  onEnable: () => void;
+}> = ({ agent, onEnable }) => {
+  const agentLike: AgentInfo = {
+    id: `discovered_${agent.command}`,
+    name: agent.name,
+    type: 'external',
+    icon: agent.icon,
+    command: agent.command,
+    available: true,
+  };
+
+  return (
+    <div className="flex h-10 w-full items-center gap-3 rounded-md px-4 text-[13px]">
+      <AgentIconBadge agent={agentLike} size="xs" variant="plain" className="opacity-78" />
+      <div className="min-w-0 flex-1">
+        <span className="block truncate text-foreground/86">{agent.name}</span>
+        <span className="block truncate text-[10px] text-muted-foreground/40">
+          {agent.version || agent.path}
+        </span>
+      </div>
+      <button
+        onClick={onEnable}
+        className="shrink-0 rounded-md px-2 py-0.5 text-[11px] font-medium text-primary/80 hover:bg-primary/10 hover:text-primary transition-colors cursor-pointer"
+        title={`Enable ${agent.name}`}
+      >
+        <Plus size={12} />
+      </button>
+    </div>
+  );
+};
+
+const AgentSelector: React.FC<AgentSelectorProps> = ({
+  currentAgentId,
+  externalAgents,
+  discoveredAgents = [],
+  isDiscovering = false,
+  onSelectAgent,
+  onEnableDiscoveredAgent,
+  onRediscover,
+  onManageAgents,
+}) => {
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+
+  const enabledExternalAgents = useMemo(
+    () =>
+      externalAgents
+        .filter((agent) => agent.enabled)
+        .map(
+          (agent): AgentInfo => ({
+            id: agent.id,
+            name: agent.name,
+            type: 'external',
+            icon: agent.icon,
+            command: agent.command,
+            args: agent.args,
+            available: true,
+          }),
+        ),
+    [externalAgents],
+  );
+
+  // Discovered agents not yet added to external agents
+  const unconfiguredDiscovered = useMemo(
+    () =>
+      discoveredAgents.filter(
+        (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],
+  );
+
+  const allAgents = useMemo(
+    () => [...BUILTIN_AGENTS, ...enabledExternalAgents],
+    [enabledExternalAgents],
+  );
+
+  const currentAgent = useMemo(
+    () => allAgents.find((agent) => agent.id === currentAgentId) ?? BUILTIN_AGENTS[0],
+    [allAgents, currentAgentId],
+  );
+
+  const handleSelect = useCallback(
+    (agentId: string) => {
+      onSelectAgent(agentId);
+      setOpen(false);
+    },
+    [onSelectAgent],
+  );
+
+  const handleEnableDiscovered = useCallback(
+    (agent: DiscoveredAgent) => {
+      onEnableDiscoveredAgent?.(agent);
+      // After enabling, auto-select it
+      const agentId = `discovered_${agent.command}`;
+      onSelectAgent(agentId);
+      setOpen(false);
+    },
+    [onEnableDiscoveredAgent, onSelectAgent],
+  );
+
+  const handleManageAgents = useCallback(() => {
+    setOpen(false);
+    onManageAgents?.();
+  }, [onManageAgents]);
+
+  return (
+    <Dropdown open={open} onOpenChange={setOpen}>
+      <DropdownTrigger asChild>
+        <button
+          type="button"
+          className="group flex h-8 min-w-0 max-w-[170px] items-center gap-2 rounded-md px-2 text-left transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/28"
+        >
+          <AgentIconBadge
+            agent={currentAgent}
+            size="xs"
+            variant="plain"
+            className="opacity-78"
+          />
+          <span className="min-w-0 flex-1 truncate text-[13px] font-medium text-foreground/90">
+            {currentAgent.name}
+          </span>
+          <ChevronDown
+            size={12}
+            className={cn(
+              'shrink-0 text-muted-foreground/60 transition-transform',
+              open && 'rotate-180',
+            )}
+          />
+        </button>
+      </DropdownTrigger>
+
+      <DropdownContent
+        align="start"
+        sideOffset={6}
+        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
+            key={agent.id}
+            agent={agent}
+            isActive={currentAgentId === agent.id}
+            onClick={() => handleSelect(agent.id)}
+          />
+        ))}
+
+        {enabledExternalAgents.length > 0 && (
+          <>
+            <div className="mx-0 my-1 border-t border-border/50" />
+            <SectionLabel>{t('ai.chat.agents')}</SectionLabel>
+            {enabledExternalAgents.map((agent) => (
+              <AgentMenuRow
+                key={agent.id}
+                agent={agent}
+                isActive={currentAgentId === agent.id}
+                subtitle={agent.command}
+                onClick={() => handleSelect(agent.id)}
+              />
+            ))}
+          </>
+        )}
+
+        {unconfiguredDiscovered.length > 0 && (
+          <>
+            <div className="mx-0 my-1 border-t border-border/50" />
+            <SectionLabel
+              action={
+                onRediscover && (
+                  <button
+                    onClick={onRediscover}
+                    disabled={isDiscovering}
+                    className="text-[10px] text-muted-foreground/40 hover:text-muted-foreground/70 transition-colors cursor-pointer disabled:opacity-50"
+                    title={t('ai.chat.rescan')}
+                  >
+                    <RefreshCw size={10} className={cn(isDiscovering && 'animate-spin')} />
+                  </button>
+                )
+              }
+            >
+              {t('ai.chat.detectedOnMachine')}
+            </SectionLabel>
+            {unconfiguredDiscovered.map((agent) => (
+              <DiscoveredAgentRow
+                key={agent.command}
+                agent={agent}
+                onEnable={() => handleEnableDiscovered(agent)}
+              />
+            ))}
+          </>
+        )}
+
+        <div className="mx-0 my-1 border-t border-border/50" />
+        <button
+          onClick={handleManageAgents}
+          className="flex h-10 w-full items-center gap-3 px-4 text-left text-[13px] text-foreground/82 transition-colors cursor-pointer hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/30"
+        >
+          <Settings size={16} className="opacity-72 shrink-0" />
+          <span className="min-w-0 flex-1 truncate">{t('ai.agentSettings')}</span>
+        </button>
+      </DropdownContent>
+    </Dropdown>
+  );
+};
+
+export default React.memo(AgentSelector);

components/ai/ChatInput.tsx

@@ -0,0 +1,562 @@
+/**
+ * ChatInput - Zed-style bottom input area for the AI chat panel
+ *
+ * Thin wrapper around the AI Elements prompt-input components.
+ * Bordered textarea with monospace placeholder, expand toggle,
+ * 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 { 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,
+  PromptInputSubmit,
+  PromptInputTextarea,
+  PromptInputTools,
+} 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';
+
+interface ChatInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSend: () => void;
+  onStop?: () => void;
+  isStreaming?: boolean;
+  disabled?: boolean;
+  providerName?: string;
+  modelName?: string;
+  agentName?: string;
+  placeholder?: string;
+  /** Available model presets for the current agent */
+  modelPresets?: AgentModelPreset[];
+  /** Currently selected model ID */
+  selectedModelId?: string;
+  /** Callback when user selects a model */
+  onModelSelect?: (modelId: string) => void;
+  /** Attached files (images, PDFs, etc.) */
+  files?: UploadedFile[];
+  /** Callback to add files (paste/drop) */
+  onAddFiles?: (files: File[]) => void;
+  /** Callback to remove a file */
+  onRemoveFile?: (id: string) => void;
+  /** Available hosts for @ mention */
+  hosts?: Array<{ sessionId: string; hostname: string; label: string; connected: boolean }>;
+  /** Permission mode (only shown for Catty Agent) */
+  permissionMode?: AIPermissionMode;
+  /** Callback when user changes permission mode */
+  onPermissionModeChange?: (mode: AIPermissionMode) => void;
+}
+
+const ChatInput: React.FC<ChatInputProps> = ({
+  value,
+  onChange,
+  onSend,
+  onStop,
+  isStreaming = false,
+  disabled = false,
+  providerName,
+  modelName,
+  agentName,
+  placeholder,
+  modelPresets = [],
+  selectedModelId,
+  onModelSelect,
+  files = [],
+  onAddFiles,
+  onRemoveFile,
+  hosts = [],
+  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;
+  const [activeMenu, setActiveMenu] = useState<ActiveMenu>(null);
+  const [menuPos, setMenuPos] = useState<{ left: number; bottom: number } | null>(null);
+  const [hoveredModelId, setHoveredModelId] = useState<string | null>(null);
+  const [showHostSubmenu, setShowHostSubmenu] = useState(false);
+
+  // Derived booleans for readability
+  const showModelPicker = activeMenu === 'model';
+  const showAttachMenu = activeMenu === 'attach';
+  const showAtMention = activeMenu === 'atMention';
+  const showPermPicker = activeMenu === 'perm';
+
+  const closeAllMenus = useCallback(() => {
+    setActiveMenu(null);
+    setMenuPos(null);
+    setHoveredModelId(null);
+    setShowHostSubmenu(false);
+  }, []);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const modelBtnRef = useRef<HTMLButtonElement>(null);
+  const permBtnRef = useRef<HTMLButtonElement>(null);
+  const attachBtnRef = useRef<HTMLButtonElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleInputChange = useCallback((newValue: string) => {
+    onChange(newValue);
+    // Detect if user just typed @
+    if (
+      hosts.length > 0 &&
+      newValue.length > value.length &&
+      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 });
+      }
+      setActiveMenu('atMention');
+    } else if (showAtMention && !newValue.includes('@')) {
+      setActiveMenu(null);
+    }
+  }, [onChange, value, hosts.length, showAtMention]);
+
+  const handleSelectAtMention = useCallback((host: { label: string; hostname: string }) => {
+    // Replace the trailing @ with @hostname
+    const name = host.label || host.hostname;
+    const lastAt = value.lastIndexOf('@');
+    const newValue = lastAt >= 0
+      ? value.slice(0, lastAt) + `@${name} `
+      : value + `@${name} `;
+    onChange(newValue);
+    closeAllMenus();
+  }, [value, onChange, closeAllMenus]);
+
+  const handlePaste = useCallback((e: React.ClipboardEvent) => {
+    const pastedFiles = Array.from(e.clipboardData.items)
+      .map((item) => item.getAsFile())
+      .filter(Boolean) as File[];
+    if (pastedFiles.length > 0) {
+      e.preventDefault();
+      onAddFiles?.(pastedFiles);
+    }
+  }, [onAddFiles]);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    const droppedFiles = Array.from(e.dataTransfer.files);
+    if (droppedFiles.length > 0) {
+      onAddFiles?.(droppedFiles);
+    }
+  }, [onAddFiles]);
+
+  const defaultPlaceholder = agentName
+    ? t('ai.chat.placeholder').replace('{agent}', agentName)
+    : t('ai.chat.placeholderDefault');
+
+  const handleSubmit = useCallback(
+    (_text: string, _event: FormEvent<HTMLFormElement>) => {
+      onSend();
+    },
+    [onSend],
+  );
+
+  const status: PromptInputStatus = isStreaming ? 'streaming' : 'idle';
+
+  // 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);
+  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 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">
+      <PromptInput onSubmit={handleSubmit}>
+        {/* File attachment chips */}
+        {files.length > 0 && (
+          <div className="flex gap-1.5 px-3 pt-2 pb-0.5 flex-wrap">
+            {files.map((file) => (
+              <div
+                key={file.id}
+                className="inline-flex items-center gap-1 h-6 pl-1.5 pr-1 rounded-md bg-muted/30 border border-border/30 text-[11px] text-foreground/70 group"
+              >
+                {file.mediaType.startsWith('image/') ? (
+                  <ImageIcon size={11} className="text-muted-foreground/60 shrink-0" />
+                ) : (
+                  <FileText size={11} className="text-muted-foreground/60 shrink-0" />
+                )}
+                <span className="truncate max-w-[80px]">{file.filename}</span>
+                <button
+                  type="button"
+                  onClick={() => onRemoveFile?.(file.id)}
+                  className="h-3.5 w-3.5 rounded-sm flex items-center justify-center opacity-50 hover:opacity-100 hover:bg-muted/50 transition-opacity cursor-pointer"
+                >
+                  <X size={8} />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+        {/* Hidden file input */}
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          multiple
+          className="hidden"
+          onChange={(e) => {
+            if (e.target.files?.length) {
+              onAddFiles?.(Array.from(e.target.files));
+              e.target.value = '';
+            }
+          }}
+        />
+
+        {/* Textarea with expand toggle */}
+        <div className="relative" onPaste={handlePaste} onDrop={handleDrop} onDragOver={(e) => e.preventDefault()}>
+          <PromptInputTextarea
+            ref={textareaRef}
+            value={value}
+            onChange={(e) => handleInputChange(e.target.value)}
+            placeholder={placeholder || defaultPlaceholder}
+            disabled={disabled}
+            className={expanded ? 'max-h-[220px]' : undefined}
+          />
+          <button
+            type="button"
+            onClick={() => setExpanded((e) => !e)}
+            className="absolute top-3.5 right-3 rounded-md p-1 text-muted-foreground/38 hover:text-muted-foreground/72 hover:bg-muted/25 transition-colors cursor-pointer"
+            title={expanded ? 'Collapse' : 'Expand'}
+          >
+            <Expand size={12} />
+          </button>
+        </div>
+
+        {/* @ mention popover */}
+        {showAtMention && hosts.length > 0 && menuPos && 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 }}
+            >
+              <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>
+              ))}
+            </div>
+          </>,
+          document.body,
+        )}
+
+        {/* Footer toolbar */}
+        <PromptInputFooter className="gap-1.5 border-t-0 bg-transparent px-3 pb-2 pt-0">
+          <PromptInputTools className="gap-1 flex-wrap">
+            <button
+              ref={attachBtnRef}
+              type="button"
+              onClick={() => {
+                if (!showAttachMenu) {
+                  const rect = attachBtnRef.current?.getBoundingClientRect();
+                  if (rect) setMenuPos({ left: rect.left, bottom: window.innerHeight - rect.top + 6 });
+                  setActiveMenu('attach');
+                } else {
+                  closeAllMenus();
+                }
+              }}
+              className={iconButtonClassName}
+              title="Attach"
+              aria-label="Attach file"
+              aria-expanded={showAttachMenu}
+            >
+              <Plus size={13} />
+            </button>
+            {showAttachMenu && menuPos && createPortal(
+              <>
+                <div className="fixed inset-0 z-[999]" onClick={closeAllMenus} />
+                <div
+                  role="menu"
+                  className="fixed z-[1000] min-w-[170px] rounded-lg border border-border/50 bg-popover shadow-lg py-1"
+                  style={{ left: menuPos.left, bottom: menuPos.bottom }}
+                >
+                  <div className="px-3 py-1 text-[10px] text-muted-foreground/40 tracking-wide">{t('ai.chat.menuContext')}</div>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={() => { fileInputRef.current?.setAttribute('accept', '*/*'); fileInputRef.current?.click(); closeAllMenus(); }}
+                    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"
+                  >
+                    <FileText size={13} className="text-muted-foreground/60" />
+                    <span className="text-foreground/85">{t('ai.chat.menuFiles')}</span>
+                  </button>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={() => { fileInputRef.current?.setAttribute('accept', 'image/*'); fileInputRef.current?.click(); closeAllMenus(); }}
+                    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"
+                  >
+                    <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"
+                      aria-expanded={showHostSubmenu && hosts.length > 0}
+                      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>
+                    {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,
+            )}
+            <button
+              ref={modelBtnRef}
+              type="button"
+              onClick={() => {
+                if (!hasModelPicker) return;
+                if (!showModelPicker) {
+                  const rect = modelBtnRef.current?.getBoundingClientRect();
+                  if (rect) setMenuPos({ left: rect.left, bottom: window.innerHeight - rect.top + 6 });
+                  setActiveMenu('model');
+                } else {
+                  closeAllMenus();
+                }
+              }}
+              className={`${chipClassName} ${hasModelPicker ? 'cursor-pointer hover:bg-muted/24 transition-colors' : ''}`}
+              aria-label="Select model"
+              aria-expanded={showModelPicker}
+            >
+              <Cpu size={11} className="text-muted-foreground/64" />
+              <span className="truncate max-w-[82px]">{modelLabel}</span>
+              {hasModelPicker && <ChevronDown size={9} className="text-muted-foreground/50" />}
+            </button>
+            {showModelPicker && hasModelPicker && menuPos && createPortal(
+              <>
+                <div className="fixed inset-0 z-[999]" onClick={closeAllMenus} />
+                <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 }}
+                  onMouseLeave={() => setHoveredModelId(null)}
+                >
+                  {modelPresets.map(preset => {
+                    const isSelected = preset.id === selectedBaseModelId;
+                    const hasThinking = preset.thinkingLevels && preset.thinkingLevels.length > 0;
+                    return (
+                      <div
+                        key={preset.id}
+                        className="relative"
+                        onMouseEnter={() => setHoveredModelId(hasThinking ? preset.id : null)}
+                        onFocus={() => { if (hasThinking) setHoveredModelId(preset.id); }}
+                        onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) setHoveredModelId(null); }}
+                      >
+                        <button
+                          type="button"
+                          role="option"
+                          aria-selected={isSelected}
+                          onClick={() => {
+                            if (!hasThinking) {
+                              onModelSelect?.(preset.id);
+                              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"
+                        >
+                          {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" />}
+                        </button>
+                        {/* Thinking level sub-menu */}
+                        {hasThinking && hoveredModelId === preset.id && (
+                          <div role="listbox" aria-label="Thinking level" className="absolute left-full top-0 ml-1 min-w-[120px] rounded-lg border border-border/50 bg-popover shadow-lg py-1 z-[1001]">
+                            {preset.thinkingLevels!.map(level => {
+                              const fullId = `${preset.id}/${level}`;
+                              const isLevelSelected = selectedModelId === fullId;
+                              return (
+                                <button
+                                  key={level}
+                                  type="button"
+                                  role="option"
+                                  aria-selected={isLevelSelected}
+                                  tabIndex={0}
+                                  onClick={() => {
+                                    onModelSelect?.(fullId);
+                                    closeAllMenus();
+                                  }}
+                                  onKeyDown={(e) => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                      e.preventDefault();
+                                      onModelSelect?.(fullId);
+                                      closeAllMenus();
+                                    } else if (e.key === 'Escape') {
+                                      e.preventDefault();
+                                      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"
+                                >
+                                  {isLevelSelected ? <Check size={11} className="text-primary shrink-0" /> : <span className="w-[11px] shrink-0" />}
+                                  <span className="text-foreground/85">{formatThinkingLabel(level)}</span>
+                                </button>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </>,
+              document.body,
+            )}
+            {/* Permission mode chip — only for Catty Agent */}
+            {permissionMode && onPermissionModeChange && (
+              <>
+                <button
+                  ref={permBtnRef}
+                  type="button"
+                  onClick={() => {
+                    if (!showPermPicker) {
+                      const rect = permBtnRef.current?.getBoundingClientRect();
+                      if (rect) setMenuPos({ left: rect.left, bottom: window.innerHeight - rect.top + 6 });
+                      setActiveMenu('perm');
+                    } else {
+                      closeAllMenus();
+                    }
+                  }}
+                  className={`${chipClassName} cursor-pointer hover:bg-muted/24 transition-colors`}
+                  title={t('ai.safety.permissionMode')}
+                  aria-label="Permission mode"
+                  aria-expanded={showPermPicker}
+                >
+                  {permissionMode === 'observer' && <Eye size={11} className="text-blue-400/70" />}
+                  {permissionMode === 'confirm' && <ShieldCheck size={11} className="text-yellow-400/70" />}
+                  {permissionMode === 'autonomous' && <Zap size={11} className="text-green-400/70" />}
+                  <span className="truncate max-w-[72px]">
+                    {permissionMode === 'observer' && t('ai.chat.permObserver')}
+                    {permissionMode === 'confirm' && t('ai.chat.permConfirm')}
+                    {permissionMode === 'autonomous' && t('ai.chat.permAuto')}
+                  </span>
+                  <ChevronDown size={9} className="text-muted-foreground/50" />
+                </button>
+                {showPermPicker && menuPos && createPortal(
+                  <>
+                    <div className="fixed inset-0 z-[999]" onClick={closeAllMenus} />
+                    <div
+                      role="listbox"
+                      aria-label="Permission mode"
+                      className="fixed z-[1000] min-w-[180px] rounded-lg border border-border/50 bg-popover shadow-lg py-1"
+                      style={{ left: menuPos.left, bottom: menuPos.bottom }}
+                    >
+                      {([
+                        { mode: 'autonomous' as const, icon: Zap, color: 'text-green-400/70', label: t('ai.chat.permAuto'), desc: t('ai.chat.permAutoDesc') },
+                        { mode: 'confirm' as const, icon: ShieldCheck, color: 'text-yellow-400/70', label: t('ai.chat.permConfirm'), desc: t('ai.chat.permConfirmDesc') },
+                        { mode: 'observer' as const, icon: Eye, color: 'text-blue-400/70', label: t('ai.chat.permObserver'), desc: t('ai.chat.permObserverDesc') },
+                      ]).map(({ mode, icon: Icon, color, label, desc }) => (
+                        <button
+                          key={mode}
+                          type="button"
+                          role="option"
+                          aria-selected={permissionMode === mode}
+                          onClick={() => {
+                            onPermissionModeChange(mode);
+                            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"
+                        >
+                          {permissionMode === mode
+                            ? <Check size={11} className="text-primary shrink-0" />
+                            : <span className="w-[11px] shrink-0" />
+                          }
+                          <Icon size={12} className={`${color} shrink-0`} />
+                          <div className="flex-1 min-w-0">
+                            <div className="text-foreground/85">{label}</div>
+                            <div className="text-[10px] text-muted-foreground/40 leading-tight">{desc}</div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  </>,
+                  document.body,
+                )}
+              </>
+            )}
+          </PromptInputTools>
+
+          <div className="flex-1 min-w-0" />
+
+          <div className="flex items-center gap-1">
+            <PromptInputSubmit
+              status={status}
+              onStop={onStop}
+              disabled={!value.trim() || disabled}
+            />
+          </div>
+        </PromptInputFooter>
+      </PromptInput>
+    </div>
+  );
+};
+
+export default React.memo(ChatInput);

components/ai/ChatMessageList.tsx

@@ -0,0 +1,464 @@
+/**
+ * ChatMessageList - Renders the list of chat messages
+ *
+ * Claude-Code-style: user messages in bordered bubbles (right-aligned),
+ * assistant responses as plain text (left-aligned, no border/bg).
+ * No avatars. Thinking blocks are collapsible.
+ */
+
+import { AlertCircle, FileText, RotateCcw, X, ZoomIn, ZoomOut } from 'lucide-react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import type { ChatMessage } from '../../infrastructure/ai/types';
+import { Dialog, DialogContent, DialogTitle } from '../ui/dialog';
+import {
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+} from '../ai-elements/conversation';
+import { Message, MessageContent, MessageResponse } from '../ai-elements/message';
+import { ToolCall } from '../ai-elements/tool-call';
+import ThinkingBlock from './ThinkingBlock';
+import {
+  onApprovalRequest,
+  onApprovalCleared,
+  replayPendingApprovals,
+  resolveApproval,
+  type ApprovalRequest,
+} from '../../infrastructure/ai/shared/approvalGate';
+
+interface ChatMessageListProps {
+  messages: ChatMessage[];
+  isStreaming?: boolean;
+  /** Active chat session ID — used to filter standalone MCP approval blocks */
+  activeSessionId?: string | null;
+}
+
+const ChatMessageList: React.FC<ChatMessageListProps> = ({ messages, isStreaming, activeSessionId }) => {
+  // Track pending approvals from the approval gate
+  const [pendingApprovals, setPendingApprovals] = useState<Map<string, ApprovalRequest>>(new Map());
+  const [resolvedApprovals, setResolvedApprovals] = useState<Map<string, boolean>>(new Map());
+
+  // Subscribe to approval gate events (SDK + MCP tool calls)
+  useEffect(() => {
+    const handler = (request: ApprovalRequest) => {
+      setPendingApprovals(prev => new Map(prev).set(request.toolCallId, request));
+    };
+    const unsub = onApprovalRequest(handler);
+    // Replay any approvals that fired while this component was unmounted
+    replayPendingApprovals(handler);
+    return unsub;
+  }, []);
+
+  // Subscribe to approval cleared/removed events (fired on session stop or timeout)
+  useEffect(() => {
+    return onApprovalCleared((clearedIds) => {
+      setPendingApprovals(prev => {
+        const m = new Map(prev);
+        for (const id of clearedIds) m.delete(id);
+        return m;
+      });
+    });
+  }, []);
+
+  const handleApprove = useCallback((toolCallId: string) => {
+    resolveApproval(toolCallId, true);
+    setPendingApprovals(prev => { const m = new Map(prev); m.delete(toolCallId); return m; });
+    setResolvedApprovals(prev => new Map(prev).set(toolCallId, true));
+  }, []);
+
+  const handleReject = useCallback((toolCallId: string) => {
+    resolveApproval(toolCallId, false);
+    setPendingApprovals(prev => { const m = new Map(prev); m.delete(toolCallId); return m; });
+    setResolvedApprovals(prev => new Map(prev).set(toolCallId, false));
+  }, []);
+  const [preview, setPreview] = useState<{ src: string; name: string } | null>(null);
+  const [zoom, setZoom] = useState(100);
+  const [dragged, setDragged] = useState(false);
+  const imgRef = useRef<HTMLImageElement>(null);
+  const dragPos = useRef({ x: 0, y: 0 });
+  const dragStart = useRef<{ startX: number; startY: number; origX: number; origY: number } | null>(null);
+
+  const applyTransform = useCallback((z: number, x: number, y: number, animate: boolean) => {
+    if (!imgRef.current) return;
+    imgRef.current.style.transition = animate ? 'transform 0.25s ease' : 'none';
+    imgRef.current.style.transform = `scale(${z / 100}) translate(${x / (z / 100)}px, ${y / (z / 100)}px)`;
+  }, []);
+
+  const zoomRef = useRef(100);
+  const setZoomAndRef = useCallback((fn: (z: number) => number) => {
+    setZoom(z => { const nz = fn(z); zoomRef.current = nz; return nz; });
+  }, []);
+  const zoomIn = useCallback(() => setZoomAndRef(z => { const nz = Math.min(z + 25, 200); applyTransform(nz, dragPos.current.x, dragPos.current.y, true); return nz; }), [applyTransform, setZoomAndRef]);
+  const zoomOut = useCallback(() => setZoomAndRef(z => { const nz = Math.max(z - 25, 25); applyTransform(nz, dragPos.current.x, dragPos.current.y, true); return nz; }), [applyTransform, setZoomAndRef]);
+
+  const onWheel = useCallback((e: React.WheelEvent) => {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -10 : 10;
+    setZoomAndRef(z => {
+      const nz = Math.max(25, Math.min(200, z + delta));
+      applyTransform(nz, dragPos.current.x, dragPos.current.y, false);
+      return nz;
+    });
+  }, [applyTransform, setZoomAndRef]);
+  const openPreview = useCallback((src: string, name: string) => {
+    setZoom(100); zoomRef.current = 100;
+    setDragged(false);
+    dragPos.current = { x: 0, y: 0 };
+    setPreview({ src, name });
+  }, []);
+
+  const resetPreview = useCallback(() => {
+    setZoom(100); zoomRef.current = 100;
+    setDragged(false);
+    dragPos.current = { x: 0, y: 0 };
+    applyTransform(100, 0, 0, true);
+  }, [applyTransform]);
+
+  const onPointerDown = useCallback((e: React.PointerEvent) => {
+    e.preventDefault();
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    dragStart.current = { startX: e.clientX, startY: e.clientY, origX: dragPos.current.x, origY: dragPos.current.y };
+  }, []);
+
+  const onPointerMove = useCallback((e: React.PointerEvent) => {
+    if (!dragStart.current) return;
+    if ((e.buttons & 1) === 0) { dragStart.current = null; return; }
+    const x = dragStart.current.origX + (e.clientX - dragStart.current.startX);
+    const y = dragStart.current.origY + (e.clientY - dragStart.current.startY);
+    dragPos.current = { x, y };
+    applyTransform(zoomRef.current, x, y, false);
+  }, [applyTransform]);
+
+  const endDrag = useCallback(() => {
+    if (dragStart.current && (dragPos.current.x !== 0 || dragPos.current.y !== 0)) {
+      setDragged(true);
+    }
+    dragStart.current = null;
+  }, []);
+  const { t } = useI18n();
+  const visibleMessages = messages.filter(m => m.role !== 'system');
+  const resolvedToolCallIds = new Set(
+    visibleMessages
+      .filter((m) => m.role === 'tool')
+      .flatMap((m) => m.toolResults?.map((tr) => tr.toolCallId) ?? []),
+  );
+
+  // 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);
+      }
+    }
+  }
+
+  if (visibleMessages.length === 0 && !isStreaming) {
+    return (
+      <div className="flex-1 flex items-center justify-center px-6">
+        <p className="text-[13px] text-muted-foreground/40 text-center">
+          {t('ai.chat.emptyHint')}
+        </p>
+      </div>
+    );
+  }
+
+  const lastAssistantMessage = visibleMessages.findLast(m => m.role === 'assistant');
+
+  return (
+    <>
+    <Conversation className="flex-1">
+      <ConversationContent className="gap-1.5 px-4 py-2">
+        {visibleMessages.map((message) => {
+          if (message.role === 'tool') {
+            return (
+              <React.Fragment key={message.id}>
+                {message.toolResults?.map((tr) => (
+                  <ToolCall
+                    key={tr.toolCallId}
+                    name={toolCallNames.get(tr.toolCallId) || tr.toolCallId}
+                    args={toolCallArgs.get(tr.toolCallId)}
+                    result={tr.content}
+                    isError={tr.isError}
+                  />
+                ))}
+              </React.Fragment>
+            );
+          }
+
+          const isUser = message.role === 'user';
+          const isLastAssistant = message === lastAssistantMessage;
+          const isThisStreaming = isStreaming && isLastAssistant;
+
+          return (
+            <Message key={message.id} from={message.role}>
+              <MessageContent>
+                {/* Thinking block */}
+                {!isUser && message.thinking && (
+                  <ThinkingBlock
+                    content={message.thinking}
+                    isStreaming={!!isThisStreaming && !message.content}
+                    durationMs={message.thinkingDurationMs}
+                  />
+                )}
+
+                {/* User attachments (images, files) — fallback to legacy `images` field */}
+                {isUser && (message.attachments ?? message.images)?.length && (
+                  <div className="flex gap-1.5 flex-wrap mb-1">
+                    {(message.attachments ?? message.images)!.map((att, i) => (
+                      att.mediaType.startsWith('image/') ? (
+                        <img
+                          key={att.filename ? `${att.filename}-${i}` : `att-${message.id}-${i}`}
+                          src={`data:${att.mediaType};base64,${att.base64Data}`}
+                          alt={att.filename || 'image'}
+                          className="max-h-[120px] max-w-[200px] rounded-md object-contain border border-border/20 cursor-pointer hover:opacity-80 transition-opacity"
+                          onClick={() => openPreview(`data:${att.mediaType};base64,${att.base64Data}`, att.filename || 'image')}
+                        />
+                      ) : (
+                        <div
+                          key={att.filename ? `${att.filename}-${i}` : `att-${message.id}-${i}`}
+                          className="inline-flex items-center gap-1.5 h-7 px-2 rounded-md bg-muted/20 border border-border/20 text-[11px] text-foreground/70"
+                        >
+                          <FileText size={12} className="text-muted-foreground/60 shrink-0" />
+                          <span className="truncate max-w-[120px]">{att.filename || 'file'}</span>
+                        </div>
+                      )
+                    ))}
+                  </div>
+                )}
+
+                {message.content && (
+                  isUser
+                    ? <div className="whitespace-pre-wrap break-words text-[13px]">{message.content}</div>
+                    : <MessageResponse isAnimating={isThisStreaming}>
+                        {message.content}
+                      </MessageResponse>
+                )}
+
+                {/* 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
+                    ? 'pending' as const
+                    : resolved === true
+                      ? 'approved' as const
+                      : resolved === false
+                        ? 'denied' as const
+                        : undefined;
+                  return (
+                    <ToolCall
+                      key={tc.id}
+                      name={tc.name}
+                      args={tc.arguments}
+                      isInterrupted={!isPending}
+                      approvalStatus={approvalStatus}
+                      onApprove={() => handleApprove(tc.id)}
+                      onReject={() => handleReject(tc.id)}
+                    />
+                  );
+                })}
+
+                {/* Status text with shimmer */}
+                {message.statusText && (
+                  <div className="py-1">
+                    <span className="thinking-shimmer text-xs">{message.statusText}</span>
+                  </div>
+                )}
+
+                {/* Error info */}
+                {message.errorInfo && (
+                  <div className="flex items-start gap-2 px-3 py-2 rounded-md bg-destructive/10 border border-destructive/20 text-sm">
+                    <AlertCircle className="h-4 w-4 text-destructive shrink-0 mt-0.5" />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-destructive font-medium whitespace-pre-wrap break-words [overflow-wrap:anywhere]">
+                        {message.errorInfo.message}
+                      </p>
+                      {message.errorInfo.retryable && (
+                        <p className="text-muted-foreground text-xs mt-1">{t('ai.chat.retryHint')}</p>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </MessageContent>
+            </Message>
+          );
+        })}
+
+        {/* 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 (
+            <ToolCall
+              key={tc.id}
+              name={tc.name}
+              args={tc.arguments}
+              isLoading={isStreaming && lastAssistantMessage.executionStatus === 'running' && !isPending}
+              approvalStatus={approvalStatus}
+              onApprove={() => handleApprove(tc.id)}
+              onReject={() => handleReject(tc.id)}
+            />
+          );
+        })}
+
+        {/* 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;
+            return (
+              <ToolCall
+                key={id}
+                name={req.toolName}
+                args={req.args}
+                isLoading={false}
+                isInterrupted={false}
+                approvalStatus={'pending'}
+                onApprove={() => handleApprove(id)}
+                onReject={() => handleReject(id)}
+              />
+            );
+          })}
+        {/* Streaming indicator — only when no content and no thinking yet */}
+        {isStreaming && !lastAssistantMessage?.content && !lastAssistantMessage?.thinking && (
+          <div className="flex items-center gap-1 py-2">
+            <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/30 animate-bounce [animation-delay:0ms]" />
+            <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/30 animate-bounce [animation-delay:150ms]" />
+            <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/30 animate-bounce [animation-delay:300ms]" />
+          </div>
+        )}
+      </ConversationContent>
+      <ConversationScrollButton />
+    </Conversation>
+
+    {/* Image preview lightbox */}
+    <Dialog open={!!preview} onOpenChange={(open) => { if (!open) setPreview(null); }}>
+      <DialogContent
+        hideCloseButton
+        className="max-w-[min(90vw,800px)] max-h-[min(90vh,700px)] min-w-[280px] min-h-[200px] w-fit p-0 gap-0 focus:outline-none shadow-2xl"
+      >
+        {/* Title bar: filename | zoom controls | close — all in one flex row */}
+        <div className="flex items-center h-10 px-3 border-b border-border/40 gap-2 shrink-0">
+          <DialogTitle className="text-sm font-medium truncate flex-1">{preview?.name}</DialogTitle>
+          <div className="flex items-center gap-1 shrink-0">
+            <button
+              onClick={resetPreview}
+              disabled={zoom === 100 && !dragged}
+              className="p-1 rounded hover:bg-muted disabled:opacity-30 transition-colors text-muted-foreground"
+              aria-label={t('common.reset')}
+            >
+              <RotateCcw size={14} />
+            </button>
+            <div className="w-px h-3.5 bg-border/40 mx-0.5" />
+            <button
+              onClick={zoomOut}
+              disabled={zoom <= 25}
+              className="p-1 rounded hover:bg-muted disabled:opacity-30 transition-colors text-muted-foreground"
+              aria-label={t('common.zoomOut')}
+            >
+              <ZoomOut size={14} />
+            </button>
+            <span className="text-xs text-muted-foreground tabular-nums w-9 text-center select-none">{zoom}%</span>
+            <button
+              onClick={zoomIn}
+              disabled={zoom >= 200}
+              className="p-1 rounded hover:bg-muted disabled:opacity-30 transition-colors text-muted-foreground"
+              aria-label={t('common.zoomIn')}
+            >
+              <ZoomIn size={14} />
+            </button>
+          </div>
+          <button
+            onClick={() => setPreview(null)}
+            className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground shrink-0"
+            aria-label={t('common.close')}
+          >
+            <X size={14} />
+          </button>
+        </div>
+        {/* Image area with drag support */}
+        {preview && (
+          <div
+            className="overflow-hidden flex items-center justify-center"
+            style={{
+              height: 'calc(min(90vh, 700px) - 40px)',
+              cursor: 'grab',
+              // Clamp aspect ratio: if image is extremely tall/wide, the container
+              // constrains it; object-contain handles the rest.
+              aspectRatio: 'auto',
+            }}
+            onPointerDown={onPointerDown}
+            onPointerMove={onPointerMove}
+            onPointerUp={endDrag}
+            onPointerCancel={endDrag}
+            onWheel={onWheel}
+            onLostPointerCapture={endDrag}
+          >
+            <img
+              ref={imgRef}
+              src={preview.src}
+              alt={preview.name}
+              draggable={false}
+              className="select-none max-w-full max-h-full object-contain"
+              style={{ transition: 'transform 0.25s ease' }}
+            />
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+    </>
+  );
+};
+
+function areMessagesEqual(prev: ChatMessageListProps, next: ChatMessageListProps): boolean {
+  if (prev.isStreaming !== next.isStreaming) return false;
+  if (prev.activeSessionId !== next.activeSessionId) return false;
+  if (prev.messages.length !== next.messages.length) return false;
+  if (prev.messages === next.messages) return true;
+
+  // Shallow-compare each message by reference
+  for (let i = 0; i < prev.messages.length; i++) {
+    if (prev.messages[i] !== next.messages[i]) {
+      // For the last message during streaming, compare by content to avoid
+      // re-renders when only the array reference changed but content is the same
+      const p = prev.messages[i];
+      const n = next.messages[i];
+      if (
+        p.id !== n.id ||
+        p.content !== n.content ||
+        p.thinking !== n.thinking ||
+        p.role !== n.role ||
+        p.statusText !== n.statusText ||
+        p.executionStatus !== n.executionStatus ||
+        p.errorInfo !== n.errorInfo ||
+        p.toolCalls !== n.toolCalls ||
+        p.toolResults !== n.toolResults
+      ) {
+        return false;
+      }
+    }
+  }
+
+  return true;
+}
+
+export default React.memo(ChatMessageList, areMessagesEqual);

components/ai/ConversationExport.tsx

@@ -0,0 +1,82 @@
+/**
+ * ConversationExport - Dropdown button for exporting chat sessions
+ *
+ * Small download icon button with a dropdown offering Markdown, JSON,
+ * and Plain Text export formats.
+ */
+
+import { Download, FileJson, FileText, FileType } from 'lucide-react';
+import React, { useCallback } from 'react';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import type { AISession } from '../../infrastructure/ai/types';
+import { Button } from '../ui/button';
+import {
+  Dropdown,
+  DropdownContent,
+  DropdownTrigger,
+} from '../ui/dropdown';
+
+interface ConversationExportProps {
+  session: AISession | null;
+  onExport: (format: 'md' | 'json' | 'txt') => void;
+  className?: string;
+}
+
+const EXPORT_OPTIONS = [
+  { format: 'md' as const, labelKey: 'ai.chat.exportMarkdown' as const, icon: FileText },
+  { format: 'json' as const, labelKey: 'ai.chat.exportJSON' as const, icon: FileJson },
+  { format: 'txt' as const, labelKey: 'ai.chat.exportPlainText' as const, icon: FileType },
+];
+
+const ConversationExport: React.FC<ConversationExportProps> = ({
+  session,
+  onExport,
+  className,
+}) => {
+  const { t } = useI18n();
+  const handleExport = useCallback(
+    (format: 'md' | 'json' | 'txt') => {
+      onExport(format);
+    },
+    [onExport],
+  );
+
+  const hasMessages = session && session.messages.length > 0;
+
+  return (
+    <Dropdown>
+      <DropdownTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className={className ?? 'h-7 w-7 rounded-md text-muted-foreground/62 hover:bg-white/[0.05] hover:text-foreground'}
+          disabled={!hasMessages}
+          title={t('ai.chat.exportConversation')}
+        >
+          <Download size={14} />
+        </Button>
+      </DropdownTrigger>
+      <DropdownContent
+        align="end"
+        sideOffset={6}
+        className="w-40 rounded-xl border border-border/45 bg-[#111111]/98 p-1.5 text-foreground shadow-[0_20px_48px_rgba(0,0,0,0.48)] supports-[backdrop-filter]:bg-[#111111]/92 supports-[backdrop-filter]:backdrop-blur-xl"
+      >
+        <div className="px-2 py-1 text-[10px] font-medium uppercase tracking-[0.16em] text-muted-foreground/48">
+          {t('ai.chat.exportAs')}
+        </div>
+        {EXPORT_OPTIONS.map(({ format, labelKey, icon: Icon }) => (
+          <button
+            key={format}
+            onClick={() => handleExport(format)}
+            className="w-full flex items-center gap-2 px-2 py-1.5 text-[13px] rounded-lg transition-colors cursor-pointer hover:bg-white/[0.04]"
+          >
+            <Icon size={13} className="shrink-0 text-muted-foreground/70" />
+            <span>{t(labelKey)}</span>
+          </button>
+        ))}
+      </DropdownContent>
+    </Dropdown>
+  );
+};
+
+export default React.memo(ConversationExport);

components/ai/ThinkingBlock.tsx

@@ -0,0 +1,138 @@
+/**
+ * ThinkingBlock - Collapsible thinking/reasoning display
+ *
+ * - While streaming: expanded, "Thinking" label with shimmer + elapsed time
+ * - When done: auto-collapses to "Thought for Xs", click to expand
+ * - Content area has max-height with scroll and top gradient fade
+ */
+
+import { ChevronRight } from 'lucide-react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import { cn } from '../../lib/utils';
+
+interface ThinkingBlockProps {
+  content: string;
+  isStreaming: boolean;
+  durationMs?: number;
+}
+
+function formatDuration(ms: number): string {
+  const seconds = Math.floor(ms / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remaining = seconds % 60;
+  return `${minutes}m ${remaining}s`;
+}
+
+const ThinkingBlock: React.FC<ThinkingBlockProps> = ({
+  content,
+  isStreaming,
+  durationMs,
+}) => {
+  const { t } = useI18n();
+  const [isExpanded, setIsExpanded] = useState(isStreaming);
+  const [elapsed, setElapsed] = useState(0);
+  const wasStreamingRef = useRef(false);
+  const startRef = useRef(Date.now());
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Auto-collapse when streaming ends
+  useEffect(() => {
+    if (wasStreamingRef.current && !isStreaming) {
+      setIsExpanded(false);
+    }
+    wasStreamingRef.current = isStreaming;
+  }, [isStreaming]);
+
+  // Expand when streaming starts
+  useEffect(() => {
+    if (isStreaming) {
+      setIsExpanded(true);
+      startRef.current = Date.now();
+    }
+  }, [isStreaming]);
+
+  // Elapsed time ticker
+  useEffect(() => {
+    if (!isStreaming) return;
+    const timer = setInterval(() => {
+      setElapsed(Date.now() - startRef.current);
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [isStreaming]);
+
+  // Auto-scroll to bottom while streaming
+  useEffect(() => {
+    if (isStreaming && isExpanded && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [content, isStreaming, isExpanded]);
+
+  const toggle = useCallback(() => setIsExpanded(e => !e), []);
+
+  const displayDuration = durationMs || elapsed;
+  const preview = content.length > 60 ? content.slice(0, 60) + '…' : content;
+
+  return (
+    <div className="mb-0.5">
+      {/* Header */}
+      <button
+        onClick={toggle}
+        aria-expanded={isExpanded}
+        aria-controls="thinking-block-content"
+        className="group flex items-center gap-1.5 py-0.5 px-1 cursor-pointer text-left w-full rounded hover:bg-white/[0.03] transition-colors"
+      >
+        <ChevronRight
+          size={12}
+          className={cn(
+            'shrink-0 text-muted-foreground/50 transition-transform duration-200',
+            isExpanded && 'rotate-90',
+            !isExpanded && 'opacity-50',
+          )}
+        />
+        <span className="text-[12px] font-medium text-muted-foreground/70 whitespace-nowrap shrink-0">
+          {isStreaming ? (
+            <span className="thinking-shimmer">{t('ai.chat.thinking')}</span>
+          ) : (
+            displayDuration > 0
+              ? t('ai.chat.thoughtFor', { duration: formatDuration(displayDuration) })
+              : t('ai.chat.thought')
+          )}
+        </span>
+        {isStreaming && elapsed > 0 && (
+          <span className="text-[11px] text-muted-foreground/40 tabular-nums shrink-0">
+            {formatDuration(elapsed)}
+          </span>
+        )}
+        {!isExpanded && !isStreaming && preview && (
+          <span className="text-[11px] text-muted-foreground/40 truncate min-w-0">
+            {preview}
+          </span>
+        )}
+      </button>
+
+      {/* Content */}
+      {isExpanded && content && (
+        <div id="thinking-block-content" className="relative">
+          {/* Top gradient fade */}
+          {isStreaming && (
+            <div className="absolute inset-x-0 top-0 h-4 bg-gradient-to-b from-background to-transparent z-10 pointer-events-none" />
+          )}
+          <div
+            ref={scrollRef}
+            className={cn(
+              'px-5 text-[12px] text-muted-foreground/60 leading-relaxed whitespace-pre-wrap break-words',
+              isStreaming && 'overflow-y-auto scrollbar-hide max-h-36',
+              !isStreaming && 'max-h-36 overflow-y-auto scrollbar-hide',
+            )}
+          >
+            {content}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default React.memo(ThinkingBlock);