fix: surface streaming provider errors in chat (#386)

* fix: surface streaming provider errors in chat

* fix: sanitize streaming status text as ByteString

.claude/settings.local.json

@@ -1,7 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(npx tsc:*)"
-    ]
-  }
-}

.github/scripts/generate-release-note.js

@@ -0,0 +1,108 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Determine version priority:
+// 1. VERSION env variable
+// 2. Valid version tag (v1.2.3 format)
+// 3. Short commit ID (first 7 chars of GITHUB_SHA)
+// 4. package.json version as fallback
+function getVersion() {
+  if (process.env.VERSION) {
+    return process.env.VERSION;
+  }
+
+  const refName = process.env.GITHUB_REF_NAME;
+  // Check if refName is a valid version tag (e.g., v1.2.3)
+  if (refName && /^v\d+\.\d+\.\d+/.test(refName)) {
+    return refName.replace(/^v/, '');
+  }
+
+  // Use short commit ID
+  const sha = process.env.GITHUB_SHA;
+  if (sha) {
+    return sha.substring(0, 7);
+  }
+
+  // Fall back to package.json version
+  try {
+    const pkgPath = path.join(__dirname, '..', '..', 'package.json');
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+    return pkg.version;
+  } catch {
+    return '0.0.0';
+  }
+}
+
+const version = getVersion();
+const repo = process.env.GITHUB_REPOSITORY || 'binaricat/netcatty';
+// For tag releases, use the tag; for workflow_dispatch, create a tag from version
+const tag = (process.env.GITHUB_REF_NAME && /^v\d+\.\d+\.\d+/.test(process.env.GITHUB_REF_NAME))
+  ? process.env.GITHUB_REF_NAME
+  : `v${version}`;
+const baseUrl = `https://github.com/${repo}/releases/download/${tag}`;
+
+// Filename patterns based on electron-builder.config.cjs artifactName: '${productName}-${version}-${os}-${arch}.${ext}'
+// Note: electron-builder uses different arch names for Linux packages:
+// - AppImage: x64 -> x86_64, arm64 -> arm64
+// - deb: x64 -> amd64, arm64 -> arm64
+// - rpm: x64 -> x86_64, arm64 -> aarch64
+const files = {
+  mac: {
+    arm64: `Netcatty-${version}-mac-arm64.dmg`,
+    x64: `Netcatty-${version}-mac-x64.dmg`
+  },
+  win: {
+    x64: `Netcatty-${version}-win-x64.exe`,
+    arm64: `Netcatty-${version}-win-arm64.exe`
+  },
+  linux: {
+    appimage: {
+      x64: `Netcatty-${version}-linux-x86_64.AppImage`,
+      arm64: `Netcatty-${version}-linux-arm64.AppImage`
+    },
+    deb: {
+      x64: `Netcatty-${version}-linux-amd64.deb`,
+      arm64: `Netcatty-${version}-linux-arm64.deb`
+    },
+    rpm: {
+      x64: `Netcatty-${version}-linux-x86_64.rpm`,
+      arm64: `Netcatty-${version}-linux-aarch64.rpm`
+    }
+  }
+};
+
+const badges = {
+  win: {
+    setup_x64: `[![Setup x64](https://img.shields.io/badge/Setup-x64-0078D6?style=flat-square&logo=windows)](${baseUrl}/${files.win.x64})`,
+    setup_arm64: `[![Setup arm64](https://img.shields.io/badge/Setup-arm64-0078D6?style=flat-square&logo=windows)](${baseUrl}/${files.win.arm64})`
+  },
+  mac: {
+    apple_silicon: `[![DMG Apple Silicon](https://img.shields.io/badge/DMG-Apple_Silicon-000000?style=flat-square&logo=apple)](${baseUrl}/${files.mac.arm64})`,
+    intel: `[![DMG Intel X64](https://img.shields.io/badge/DMG-Intel_X64-000000?style=flat-square&logo=apple)](${baseUrl}/${files.mac.x64})`
+  },
+  linux: {
+    appimage_x64: `[![AppImage x64](https://img.shields.io/badge/AppImage-x64-FCC624?style=flat-square&logo=linux)](${baseUrl}/${files.linux.appimage.x64})`,
+    appimage_arm64: `[![AppImage arm64](https://img.shields.io/badge/AppImage-arm64-FCC624?style=flat-square&logo=linux)](${baseUrl}/${files.linux.appimage.arm64})`,
+    deb_x64: `[![DebPackage x64](https://img.shields.io/badge/DebPackage-x64-A80030?style=flat-square&logo=debian)](${baseUrl}/${files.linux.deb.x64})`,
+    deb_arm64: `[![DebPackage arm64](https://img.shields.io/badge/DebPackage-arm64-A80030?style=flat-square&logo=debian)](${baseUrl}/${files.linux.deb.arm64})`,
+    rpm_x64: `[![RpmPackage x64](https://img.shields.io/badge/RpmPackage-x64-CC0000?style=flat-square&logo=redhat)](${baseUrl}/${files.linux.rpm.x64})`,
+    rpm_arm64: `[![RpmPackage arm64](https://img.shields.io/badge/RpmPackage-arm64-CC0000?style=flat-square&logo=redhat)](${baseUrl}/${files.linux.rpm.arm64})`
+  }
+};
+
+const content = `
+## Download based on your OS:
+
+| OS | Download |
+| :--- | :--- |
+| **Windows** | ${badges.win.setup_x64} ${badges.win.setup_arm64} |
+| **macOS** | ${badges.mac.apple_silicon} ${badges.mac.intel} |
+| **Linux** | ${badges.linux.appimage_x64} ${badges.linux.deb_x64} ${badges.linux.rpm_x64} <br> ${badges.linux.appimage_arm64} ${badges.linux.deb_arm64} ${badges.linux.rpm_arm64} |
+`;
+
+fs.writeFileSync('release_notes.md', content);
+console.log('Generated release_notes.md');

.github/workflows/build.yml

@@ -2,18 +2,29 @@ name: build-packages
 
 on:
   workflow_dispatch:
+    inputs:
+      publish_release:
+        description: "Publish GitHub Release after build"
+        type: boolean
+        default: false
   push:
     tags:
       - "v*"
 
 jobs:
   build:
-    name: build-${{ matrix.os }}
+    name: build-${{ matrix.name }}
     runs-on: ${{ matrix.os }}
     strategy:
       fail-fast: false
       matrix:
-        os: [macos-latest, windows-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 }}
@@ -26,37 +37,40 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: npm
 
       - name: Install deps
         run: npm ci
 
-      - name: Set version from tag
-        if: startsWith(github.ref, 'refs/tags/v')
+      - name: Set version
         shell: bash
         run: |
-          VERSION="${GITHUB_REF_NAME#v}"
+          if [[ "$GITHUB_REF" == refs/tags/v* ]]; then
+            # Tag release: use version from tag
+            VERSION="${GITHUB_REF_NAME#v}"
+          else
+            # workflow_dispatch: use short commit ID
+            VERSION="${GITHUB_SHA:0:7}"
+          fi
           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
+          # 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
@@ -66,15 +80,125 @@ jobs:
             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:
+      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: Build package
+        env:
+          ELECTRON_BUILDER_PUBLISH: "never"
+        run: npm run pack:linux-x64
+
+      - 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:
+      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
+          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: Build package
+        env:
+          npm_config_arch: arm64
+          ELECTRON_BUILDER_PUBLISH: "never"
+        run: npm run pack:linux-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
-            release/latest*.yml
           if-no-files-found: ignore
 
   release:
     name: release
     runs-on: ubuntu-latest
-    needs: build
-    if: startsWith(github.ref, 'refs/tags/')
+    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
     steps:
@@ -90,20 +214,26 @@ jobs:
       - name: List artifacts
         run: ls -la artifacts/
 
+      - name: Generate Release Body
+        run: node .github/scripts/generate-release-note.js
+        env:
+          GITHUB_REF_NAME: ${{ github.ref_name }}
+          GITHUB_REPOSITORY: ${{ github.repository }}
+          GITHUB_SHA: ${{ github.sha }}
+
       - name: Create GitHub Release
         uses: softprops/action-gh-release@v2
         with:
+          body_path: release_notes.md
           files: |
             artifacts/*.dmg
             artifacts/*.zip
             artifacts/*.exe
-            artifacts/*.msi
             artifacts/*.AppImage
             artifacts/*.deb
             artifacts/*.rpm
-            artifacts/*.tar.gz
+            artifacts/*.yml
             artifacts/*.blockmap
-            artifacts/latest*.yml
           generate_release_notes: true
           fail_on_unmatched_files: false
           token: ${{ secrets.RELEASE_TOKEN }}

.gitignore

@@ -17,11 +17,13 @@ dist-ssr
 *.tsbuildinfo
 coverage
 /.vite
-/build
+/build/*
+!/build/icons
 /electron/native/**/build
 /release
 /out
 *.asar
+/public/monaco
 
 # Editor directories and files
 .vscode/*
@@ -32,3 +34,26 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+# Claude Code
+/.claude/
+/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,15 +1,23 @@
 import React, { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { activeTabStore, useActiveTabId, useIsSftpActive, useIsTerminalLayerVisible, useIsVaultActive } from './application/state/activeTabStore';
 import { useAutoSync } from './application/state/useAutoSync';
+import { useManagedSourceSync } from './application/state/useManagedSourceSync';
+import { usePortForwardingAutoStart } from './application/state/usePortForwardingAutoStart';
+import { usePortForwardingState } from './application/state/usePortForwardingState';
 import { useSessionState } from './application/state/useSessionState';
 import { useSettingsState } from './application/state/useSettingsState';
 import { useUpdateCheck } from './application/state/useUpdateCheck';
 import { useVaultState } from './application/state/useVaultState';
 import { useWindowControls } from './application/state/useWindowControls';
+import { initializeFonts } from './application/state/fontStore';
+import { initializeUIFonts } from './application/state/uiFontStore';
 import { I18nProvider, useI18n } from './application/i18n/I18nProvider';
 import { matchesKeyBinding } from './domain/models';
 import { resolveHostAuth } from './domain/sshAuth';
+import { applySyncPayload } from './domain/syncPayload';
+import { getCredentialProtectionAvailability } from './infrastructure/services/credentialProtection';
 import { netcattyBridge } from './infrastructure/services/netcattyBridge';
+import { localStorageAdapter } from './infrastructure/persistence/localStorageAdapter';
 import { TopTabs } from './components/TopTabs';
 import { Button } from './components/ui/button';
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from './components/ui/dialog';
@@ -17,12 +25,18 @@ import { Input } from './components/ui/input';
 import { Label } from './components/ui/label';
 import { ToastProvider, toast } from './components/ui/toast';
 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, TerminalTheme } from './types';
+import { ConnectionLog, Host, HostProtocol, SerialConfig, 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';
 
+// Initialize fonts eagerly at app startup
+initializeFonts();
+initializeUIFonts();
+
 // Visibility container for VaultView - isolates isActive subscription
 const VaultViewContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const isActive = useIsVaultActive();
@@ -76,6 +90,9 @@ const LazyProtocolSelectDialog = lazy(() => import('./components/ProtocolSelectD
 const LazyQuickSwitcher = lazy(() =>
   import('./components/QuickSwitcher').then((m) => ({ default: m.QuickSwitcher })),
 );
+const LazyCreateWorkspaceDialog = lazy(() =>
+  import('./components/CreateWorkspaceDialog').then((m) => ({ default: m.CreateWorkspaceDialog })),
+);
 
 const IS_DEV = import.meta.env.DEV;
 const HOTKEY_DEBUG =
@@ -140,15 +157,20 @@ function App({ settings }: { settings: SettingsState }) {
   const { t } = useI18n();
 
   const [isQuickSwitcherOpen, setIsQuickSwitcherOpen] = useState(false);
+  const [isCreateWorkspaceOpen, setIsCreateWorkspaceOpen] = useState(false);
   const [quickSearch, setQuickSearch] = useState('');
   // Protocol selection dialog state for QuickSwitcher
   const [protocolSelectHost, setProtocolSelectHost] = useState<Host | null>(null);
   // Navigation state for VaultView sections
   const [navigateToSection, setNavigateToSection] = useState<VaultSection | null>(null);
+  // Keyboard-interactive authentication queue (2FA/MFA) - queue-based to handle multiple concurrent sessions
+  const [keyboardInteractiveQueue, setKeyboardInteractiveQueue] = useState<KeyboardInteractiveRequest[]>([]);
+  // Passphrase request queue for encrypted SSH keys
+  const [passphraseQueue, setPassphraseQueue] = useState<PassphraseRequest[]>([]);
 
   const {
-    theme,
     setTheme,
+    resolvedTheme,
     setTerminalThemeId,
     currentTerminalTheme,
     terminalFontFamilyId,
@@ -159,6 +181,15 @@ function App({ settings }: { settings: SettingsState }) {
     hotkeyScheme,
     keyBindings,
     isHotkeyRecording,
+    sftpDoubleClickBehavior,
+    sftpAutoSync,
+    sftpShowHiddenFiles,
+    sftpUseCompressedUpload,
+    editorWordWrap,
+    setEditorWordWrap,
+    sessionLogsEnabled,
+    sessionLogsDir,
+    sessionLogsFormat,
   } = settings;
 
   const {
@@ -171,6 +202,7 @@ function App({ settings }: { settings: SettingsState }) {
     knownHosts,
     shellHistory,
     connectionLogs,
+    managedSources,
     updateHosts,
     updateKeys,
     updateIdentities,
@@ -178,6 +210,7 @@ function App({ settings }: { settings: SettingsState }) {
     updateSnippetPackages,
     updateCustomGroups,
     updateKnownHosts,
+    updateManagedSources,
     addShellHistoryEntry,
     addConnectionLog,
     updateConnectionLog,
@@ -208,10 +241,12 @@ function App({ settings }: { settings: SettingsState }) {
     submitWorkspaceRename,
     resetWorkspaceRename,
     createLocalTerminal,
+    createSerialSession,
     connectToHost,
     closeSession,
     closeWorkspace,
     updateSessionStatus,
+    createWorkspaceWithHosts,
     createWorkspaceFromSessions,
     addSessionToWorkspace,
     updateSplitSizes,
@@ -228,11 +263,26 @@ function App({ settings }: { settings: SettingsState }) {
     logViews,
     openLogView,
     closeLogView,
+    copySession,
   } = useSessionState();
 
   // isMacClient is used for window controls styling
   const isMacClient = typeof navigator !== 'undefined' && /Mac|Macintosh/.test(navigator.userAgent);
 
+  // Get port forwarding rules and import function
+  const { rules: portForwardingRules, importRules: importPortForwardingRules, startTunnel, stopTunnel } = usePortForwardingState();
+
+  const portForwardingRulesForSync = useMemo(
+    () =>
+      portForwardingRules.map((rule) => ({
+        ...rule,
+        status: "inactive",
+        error: undefined,
+        lastUsedAt: undefined,
+      })),
+    [portForwardingRules],
+  );
+
   // Auto-sync hook for cloud sync
   const { syncNow: handleSyncNow } = useAutoSync({
     hosts,
@@ -240,28 +290,41 @@ function App({ settings }: { settings: SettingsState }) {
     identities,
     snippets,
     customGroups,
-    portForwardingRules: undefined, // TODO: Add port forwarding rules from usePortForwardingState
+    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,
-      }));
+      applySyncPayload(payload, {
+        importVaultData: importDataFromString,
+        importPortForwardingRules,
+        onSettingsApplied: settings.rehydrateAllFromStorage,
+      });
     },
   });
 
+  const { clearAndRemoveSource, clearAndRemoveSources, unmanageSource } = useManagedSourceSync({
+    hosts,
+    managedSources,
+    onUpdateManagedSources: updateManagedSources,
+  });
+
   const handleSyncNowManual = useCallback(() => {
     return handleSyncNow({ trigger: 'manual' });
   }, [handleSyncNow]);
 
   // Update check hook - checks for new versions on startup
-  const { updateState, openReleasePage, dismissUpdate } = useUpdateCheck();
+  const { updateState, dismissUpdate, openReleasePage, installUpdate } = useUpdateCheck();
 
-  // Show toast notification when update is available
+  // Window controls - must be before update toast effect which uses openSettingsWindow
+  const { openSettingsWindow } = useWindowControls();
+
+  // 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(
@@ -270,14 +333,320 @@ 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]);
+
+  // Track previous autoDownloadStatus so toast effects fire only on actual transitions,
+  // not when unrelated deps (openReleasePage, installUpdate) 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.openReleases'),
+          onClick: () => openReleasePage(),
+        }
+      );
+    }
+  }, [updateState.autoDownloadStatus, updateState.latestRelease?.version, t, installUpdate, openReleasePage]);
+
+  // Memoize keys for port forwarding to prevent unnecessary re-renders
+  const portForwardingKeys = useMemo(
+    () => keys.map((k) => ({ id: k.id, privateKey: k.privateKey, passphrase: k.passphrase, })),
+    [keys]
+  );
+
+  // Auto-start port forwarding rules on app launch
+  usePortForwardingAutoStart({
+    hosts,
+    keys: portForwardingKeys,
+  });
+
+  // Sync tray menu data + handle tray actions
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.updateTrayMenuData) return;
+
+    let cancelled = false;
+    const timer = setTimeout(() => {
+      if (cancelled) return;
+
+      const sessionsForTray = sessions.map((s) => {
+        const ws = s.workspaceId ? workspaces.find((w) => w.id === s.workspaceId) : undefined;
+        return {
+          id: s.id,
+          label: s.hostname,
+          hostLabel: s.hostLabel,
+          status: s.status,
+          workspaceId: s.workspaceId,
+          workspaceTitle: ws?.title,
+        };
+      });
+
+      void bridge.updateTrayMenuData({
+        sessions: sessionsForTray,
+        portForwardRules: portForwardingRules,
+      });
+    }, 250);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [sessions, portForwardingRules, workspaces]);
+
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+    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);
+      }
+    });
+
+    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, passphrase: k.passphrase }));
+      if (start) {
+        void startTunnel(rule, host, keysForPf, (status, error) => {
+          if (status === "error" && error) toast.error(error);
+        }, rule.autoStart);
+      } else {
+        void stopTunnel(ruleId);
+      }
+    });
+
+    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;
+      }
+
+      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 bridge = netcattyBridge.get();
+    if (!bridge?.onTrayPanelJumpToSession || !bridge?.onTrayPanelConnectToHost) return;
+
+    const unsubscribeJump = bridge.onTrayPanelJumpToSession(handlerJump);
+    const unsubscribeConnect = bridge.onTrayPanelConnectToHost(handlerConnect);
+    return () => {
+      unsubscribeJump?.();
+      unsubscribeConnect?.();
+    };
+  }, [addConnectionLog, connectToHost, hosts, identities, keys, sessions, setActiveTabId, setWorkspaceFocusedSession, t]);
+
+  // Keyboard-interactive authentication (2FA/MFA) event listener
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.onKeyboardInteractive) return;
+
+    const unsubscribe = bridge.onKeyboardInteractive((request) => {
+      console.log('[App] Keyboard-interactive request received:', request);
+      // Add to queue instead of replacing - supports multiple concurrent sessions
+      setKeyboardInteractiveQueue(prev => [...prev, {
+        requestId: request.requestId,
+        name: request.name,
+        instructions: request.instructions,
+        prompts: request.prompts,
+        hostname: request.hostname,
+        savedPassword: request.savedPassword,
+      }]);
+    });
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, []);
+
+  // Handle keyboard-interactive submit
+  const handleKeyboardInteractiveSubmit = useCallback((requestId: string, responses: string[]) => {
+    const bridge = netcattyBridge.get();
+    if (bridge?.respondKeyboardInteractive) {
+      void bridge.respondKeyboardInteractive(requestId, responses, false);
+    }
+    // Remove from queue by requestId
+    setKeyboardInteractiveQueue(prev => prev.filter(r => r.requestId !== requestId));
+  }, []);
+
+  // Handle keyboard-interactive cancel
+  const handleKeyboardInteractiveCancel = useCallback((requestId: string) => {
+    const bridge = netcattyBridge.get();
+    if (bridge?.respondKeyboardInteractive) {
+      void bridge.respondKeyboardInteractive(requestId, [], true);
+    }
+    // Remove from queue by requestId
+    setKeyboardInteractiveQueue(prev => prev.filter(r => r.requestId !== requestId));
+  }, []);
+
+  // Passphrase request event listener for encrypted SSH keys
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.onPassphraseRequest) return;
+
+    const unsubscribe = bridge.onPassphraseRequest((request) => {
+      console.log('[App] Passphrase request received:', request);
+      setPassphraseQueue(prev => [...prev, {
+        requestId: request.requestId,
+        keyPath: request.keyPath,
+        keyName: request.keyName,
+        hostname: request.hostname,
+      }]);
+    });
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, []);
+
+  // Handle passphrase submit
+  const handlePassphraseSubmit = useCallback((requestId: string, passphrase: string) => {
+    const bridge = netcattyBridge.get();
+    if (bridge?.respondPassphrase) {
+      void bridge.respondPassphrase(requestId, passphrase, false);
+    }
+    setPassphraseQueue(prev => prev.filter(r => r.requestId !== requestId));
+  }, []);
+
+  // Handle passphrase cancel
+  const handlePassphraseCancel = useCallback((requestId: string) => {
+    const bridge = netcattyBridge.get();
+    if (bridge?.respondPassphrase) {
+      // Cancel = stop the entire passphrase flow
+      void bridge.respondPassphrase(requestId, '', true);
+    }
+    setPassphraseQueue(prev => prev.filter(r => r.requestId !== requestId));
+  }, []);
+
+  // Handle passphrase skip (skip this key, continue with others)
+  const handlePassphraseSkip = useCallback((requestId: string) => {
+    const bridge = netcattyBridge.get();
+    if (bridge?.respondPassphraseSkip) {
+      // Skip = skip this key but continue asking for others
+      void bridge.respondPassphraseSkip(requestId);
+    } else if (bridge?.respondPassphrase) {
+      // Fallback for older API
+      void bridge.respondPassphrase(requestId, '', false);
+    }
+    setPassphraseQueue(prev => prev.filter(r => r.requestId !== requestId));
+  }, []);
+
+  // Handle passphrase timeout (request expired on backend)
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.onPassphraseTimeout) return;
+
+    const unsubscribe = bridge.onPassphraseTimeout((event) => {
+      console.log('[App] Passphrase request timed out:', event.requestId);
+      // Remove from queue - the modal will close automatically
+      setPassphraseQueue(prev => prev.filter(r => r.requestId !== event.requestId));
+      // Show a toast notification to inform user
+      toast.error('Passphrase request timed out. Please try connecting again.');
+    });
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, []);
 
   // Debounce ref for moveFocus to prevent double-triggering when focus switches
   const lastMoveFocusTimeRef = useRef<number>(0);
@@ -473,11 +842,15 @@ function App({ settings }: { settings: SettingsState }) {
       // 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");
 
-      if (isFormElement && !isXtermInput && e.key !== 'Escape') {
+      // Monaco is not always contentEditable/input, so treat it as an editor surface.
+      if ((isFormElement || isMonacoElement) && !isXtermInput && e.key !== 'Escape') {
         return;
       }
 
@@ -501,6 +874,10 @@ function App({ settings }: { settings: SettingsState }) {
         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'];
@@ -556,7 +933,7 @@ function App({ settings }: { settings: SettingsState }) {
         (h.group || '').toLowerCase().includes(term)
       )
       : hosts;
-    return filtered.slice(0, 8);
+    return filtered;
   }, [hosts, quickSearch, isQuickSwitcherOpen]);
 
   const handleDeleteHost = useCallback((hostId: string) => {
@@ -590,7 +967,9 @@ function App({ settings }: { settings: SettingsState }) {
   // Wrapper to create local terminal with logging
   const handleCreateLocalTerminal = useCallback(() => {
     const { username, hostname } = systemInfoRef.current;
+    const sessionId = createLocalTerminal();
     addConnectionLog({
+      sessionId,
       hostId: '',
       hostLabel: 'Local Terminal',
       hostname: 'localhost',
@@ -601,15 +980,36 @@ function App({ settings }: { settings: SettingsState }) {
       localHostname: hostname,
       saved: false,
     });
-    createLocalTerminal();
   }, [addConnectionLog, createLocalTerminal]);
 
   // Wrapper to connect to host with logging
   const handleConnectToHost = useCallback((host: Host) => {
     const { username, hostname: localHost } = systemInfoRef.current;
+
+    // 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,
+        username: 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,
@@ -620,32 +1020,42 @@ 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 { username, hostname } = systemInfoRef.current;
+    const portName = config.path.split('/').pop() || config.path;
+    const sessionId = createSerialSession(config);
+    addConnectionLog({
+      sessionId,
+      hostId: '',
+      hostLabel: `Serial: ${portName}`,
+      hostname: config.path,
+      username: username,
+      protocol: 'serial',
+      startTime: Date.now(),
+      localUsername: username,
+      localHostname: hostname,
+      saved: false,
+    });
+  }, [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);
@@ -656,10 +1066,32 @@ function App({ settings }: { settings: SettingsState }) {
         terminalData: data,
       });
       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);
+            });
+          }
+        });
+      }
     } else {
       if (IS_DEV) console.log('[handleTerminalDataCapture] No matching log found!');
     }
-  }, [sessions, connectionLogs, updateConnectionLog]);
+  }, [sessions, connectionLogs, updateConnectionLog, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat]);
 
   // Check if host has multiple protocols enabled
   const hasMultipleProtocols = useCallback((host: Host) => {
@@ -703,14 +1135,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 () => {
@@ -719,14 +1152,67 @@ 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]);
 
+  const handleRootContextMenu = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    const editableSelector =
+      "input, textarea, [contenteditable], .monaco-editor, .monaco-diff-editor, .monaco-inputbox, .monaco-menu-container";
+
+    const nativeEvent = e.nativeEvent;
+    const path = typeof nativeEvent.composedPath === "function" ? nativeEvent.composedPath() : [];
+    const allowFromPath = path.some(
+      (node) => node instanceof Element && !!node.closest(editableSelector),
+    );
+
+    const target = e.target;
+    const targetElement =
+      target instanceof Element
+        ? target
+        : target instanceof Node
+          ? target.parentElement
+          : null;
+    const allowFromTarget = !!targetElement?.closest(editableSelector);
+
+    const allowNativeContextMenu = allowFromPath || allowFromTarget;
+
+    if (allowNativeContextMenu) {
+      return;
+    }
+
+    e.preventDefault();
+  }, []);
+
   return (
-    <div className="flex flex-col h-screen text-foreground font-sans netcatty-shell" onContextMenu={(e) => e.preventDefault()}>
+    <div className="flex flex-col h-screen text-foreground font-sans netcatty-shell" onContextMenu={handleRootContextMenu}>
       <TopTabs
-        theme={theme}
+        theme={resolvedTheme}
+        hosts={hosts}
         sessions={sessions}
         orphanSessions={orphanSessions}
         workspaces={workspaces}
@@ -736,6 +1222,7 @@ function App({ settings }: { settings: SettingsState }) {
         isMacClient={isMacClient}
         onCloseSession={closeSession}
         onRenameSession={startSessionRename}
+        onCopySession={copySession}
         onRenameWorkspace={startWorkspaceRename}
         onCloseWorkspace={closeWorkspace}
         onCloseLogView={closeLogView}
@@ -760,10 +1247,14 @@ function App({ settings }: { settings: SettingsState }) {
             knownHosts={knownHosts}
             shellHistory={shellHistory}
             connectionLogs={connectionLogs}
+            managedSources={managedSources}
             sessions={sessions}
+            hotkeyScheme={hotkeyScheme}
+            keyBindings={keyBindings}
             onOpenSettings={handleOpenSettings}
             onOpenQuickSwitcher={handleOpenQuickSwitcher}
             onCreateLocalTerminal={handleCreateLocalTerminal}
+            onConnectSerial={handleConnectSerial}
             onDeleteHost={handleDeleteHost}
             onConnect={handleConnectToHost}
             onUpdateHosts={updateHosts}
@@ -773,6 +1264,10 @@ function App({ settings }: { settings: SettingsState }) {
             onUpdateSnippetPackages={updateSnippetPackages}
             onUpdateCustomGroups={updateCustomGroups}
             onUpdateKnownHosts={updateKnownHosts}
+            onUpdateManagedSources={updateManagedSources}
+            onClearAndRemoveManagedSource={clearAndRemoveSource}
+            onClearAndRemoveManagedSources={clearAndRemoveSources}
+            onUnmanageSource={unmanageSource}
             onConvertKnownHost={convertKnownHostToHost}
             onToggleConnectionLogSaved={toggleConnectionLogSaved}
             onDeleteConnectionLog={deleteConnectionLog}
@@ -784,13 +1279,14 @@ function App({ settings }: { settings: SettingsState }) {
           />
         </VaultViewContainer>
 
-        <SftpViewMount hosts={hosts} keys={keys} identities={identities} />
+        <SftpViewMount hosts={hosts} keys={keys} identities={identities} updateHosts={updateHosts} />
 
         <TerminalLayerMount
           hosts={hosts}
           keys={keys}
           identities={identities}
           snippets={snippets}
+          snippetPackages={snippetPackages}
           sessions={sessions}
           workspaces={workspaces}
           knownHosts={knownHosts}
@@ -823,6 +1319,13 @@ function App({ settings }: { settings: SettingsState }) {
           onSplitSession={splitSession}
           isBroadcastEnabled={isBroadcastEnabled}
           onToggleBroadcast={toggleBroadcast}
+          updateHosts={updateHosts}
+          sftpDoubleClickBehavior={sftpDoubleClickBehavior}
+          sftpAutoSync={sftpAutoSync}
+          sftpShowHiddenFiles={sftpShowHiddenFiles}
+          sftpUseCompressedUpload={sftpUseCompressedUpload}
+          editorWordWrap={editorWordWrap}
+          setEditorWordWrap={setEditorWordWrap}
         />
 
         {/* Log Views - readonly terminal replays */}
@@ -863,8 +1366,8 @@ function App({ settings }: { settings: SettingsState }) {
               setQuickSearch('');
             }}
             onCreateWorkspace={() => {
-              // TODO: Implement workspace creation
               setIsQuickSwitcherOpen(false);
+              setIsCreateWorkspaceOpen(true);
             }}
             onClose={() => {
               setIsQuickSwitcherOpen(false);
@@ -929,6 +1432,17 @@ function App({ settings }: { settings: SettingsState }) {
         </DialogContent>
       </Dialog>
 
+      {isCreateWorkspaceOpen && (
+        <Suspense fallback={null}>
+          <LazyCreateWorkspaceDialog
+            isOpen={isCreateWorkspaceOpen}
+            onClose={() => setIsCreateWorkspaceOpen(false)}
+            hosts={hosts}
+            onCreate={createWorkspaceWithHosts}
+          />
+        </Suspense>
+      )}
+
       {/* Protocol Select Dialog for QuickSwitcher */}
       {protocolSelectHost && (
         <Suspense fallback={null}>
@@ -939,6 +1453,27 @@ function App({ settings }: { settings: SettingsState }) {
           />
         </Suspense>
       )}
+
+      {/* Global Keyboard-Interactive Authentication Modal (2FA/MFA) - processes queue */}
+      <KeyboardInteractiveModal
+        request={keyboardInteractiveQueue[0] || null}
+        onSubmit={handleKeyboardInteractiveSubmit}
+        onCancel={handleKeyboardInteractiveCancel}
+      />
+      {/* Indicator when more 2FA requests are pending */}
+      {keyboardInteractiveQueue.length > 1 && (
+        <div className="fixed bottom-4 right-4 z-50 bg-muted/90 backdrop-blur-sm text-sm px-3 py-1.5 rounded-full border shadow-sm">
+          {keyboardInteractiveQueue.length - 1} more pending
+        </div>
+      )}
+
+      {/* Global Passphrase Modal for encrypted SSH keys */}
+      <PassphraseModal
+        request={passphraseQueue[0] || null}
+        onSubmit={handlePassphraseSubmit}
+        onCancel={handlePassphraseCancel}
+        onSkip={handlePassphraseSkip}
+      />
     </div>
   );
 }

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

@@ -5,33 +5,26 @@
 <h1 align="center">Netcatty</h1>
 
 <p align="center">
-  <strong>モダンな SSH クライアント、SFTP ブラウザ & ターミナルマネージャー</strong>
+  <strong>モダンな SSH クライアント、SFTP ブラウザ & ターミナルマネージャー</strong><br/>
+  <a href="https://netcatty.app"><strong>netcatty.app</strong></a>
 </p>
 
 <p align="center">
   Electron、React、xterm.js で構築された機能豊富な SSH ワークスペース。<br/>
-  ホスト管理、分割ターミナル、SFTP、ポートフォワーディング、クラウド同期 — すべてが一つに。
+  分割ターミナル、Vault ビュー、SFTP ワークフロー、カスタムテーマ、キーワードハイライト — すべてが一つに。
 </p>
 
 <p align="center">
   <a href="https://github.com/binaricat/Netcatty/releases/latest"><img alt="GitHub Release" src="https://img.shields.io/github/v/release/binaricat/Netcatty?style=for-the-badge&logo=github&label=Release"></a>
   &nbsp;
-  <a href="#"><img alt="Platform" src="https://img.shields.io/badge/Platform-macOS%20%7C%20Windows-blue?style=for-the-badge&logo=electron"></a>
+  <a href="#"><img alt="Platform" src="https://img.shields.io/badge/Platform-macOS%20%7C%20Windows%20%7C%20Linux-blue?style=for-the-badge&logo=electron"></a>
   &nbsp;
   <a href="LICENSE"><img alt="License" src="https://img.shields.io/badge/License-GPL--3.0-green?style=for-the-badge"></a>
 </p>
 
 <p align="center">
-  <a href="https://github.com/binaricat/Netcatty/releases/latest/download/Netcatty-1.0.0-mac-arm64.dmg">
-    <img src="https://img.shields.io/badge/ダウンロード-macOS%20ARM64-000?style=for-the-badge&logo=apple" alt="macOS ARM64 をダウンロード">
-  </a>
-  &nbsp;
-  <a href="https://github.com/binaricat/Netcatty/releases/latest/download/Netcatty-1.0.0-mac-x64.dmg">
-    <img src="https://img.shields.io/badge/ダウンロード-macOS%20Intel-000?style=for-the-badge&logo=apple" alt="macOS Intel をダウンロード">
-  </a>
-  &nbsp;
-  <a href="https://github.com/binaricat/Netcatty/releases/latest/download/Netcatty-1.0.0-win-x64.exe">
-    <img src="https://img.shields.io/badge/ダウンロード-Windows%20x64-0078D4?style=for-the-badge&logo=windows" alt="Windows をダウンロード">
+  <a href="https://github.com/binaricat/Netcatty/releases/latest">
+    <img src="https://img.shields.io/github/v/release/binaricat/Netcatty?style=for-the-badge&logo=github&label=最新版をダウンロード&color=success" alt="最新版をダウンロード">
   </a>
 </p>
 
@@ -54,15 +47,13 @@
 # 目次 <!-- omit in toc -->
 
 - [Netcatty とは](#netcatty-とは)
+- [なぜ Netcatty](#なぜ-netcatty)
 - [機能](#機能)
+- [デモ](#デモ)
 - [スクリーンショット](#スクリーンショット)
-  - [ホスト管理](#ホスト管理)
-  - [ターミナル](#ターミナル)
-  - [SFTP](#sftp)
-  - [キーチェーン](#キーチェーン)
-  - [ポートフォワーディング](#ポートフォワーディング)
-  - [クラウド同期](#クラウド同期)
-  - [テーマとカスタマイズ](#テーマとカスタマイズ)
+  - [メインウィンドウ](#メインウィンドウ)
+  - [Vault ビュー](#vault-ビュー)
+  - [分割ターミナル](#分割ターミナル)
 - [対応ディストリビューション](#対応ディストリビューション)
 - [はじめに](#はじめに)
 - [ビルドとパッケージ](#ビルドとパッケージ)
@@ -78,174 +69,119 @@
 **Netcatty** は、複数のリモートサーバーを効率的に管理する必要がある開発者、システム管理者、DevOps エンジニア向けに設計された、モダンなクロスプラットフォーム SSH クライアントおよびターミナルマネージャーです。
 
 - **Netcatty は** PuTTY、Termius、SecureCRT、macOS Terminal.app の代替となる SSH 接続ツール
-- **Netcatty は** デュアルペインファイルブラウザを備えた強力な SFTP クライアント
+- **Netcatty は** 強力な SFTP クライアント（ドラッグ＆ドロップ + 内蔵エディタ）
 - **Netcatty は** 分割ペイン、タブ、セッション管理を備えたターミナルワークスペース
-- **Netcatty は** シェルの代替ではありません — SSH/Telnet またはローカルターミナル経由でリモートシェルに接続します
+- **Netcatty は** シェルの代替ではありません — SSH/Telnet/Mosh やローカル/シリアル経由でシェルに接続します（環境により異なります）
+
+---
+
+<a name="なぜ-netcatty"></a>
+# なぜ Netcatty
+
+複数サーバーを日常的に扱うなら、Netcatty は「スピード」と「流れ」を重視した作りになっています：
+
+- **ワークスペース中心** — 分割ペインで複数セッションを並行操作
+- **Vault の見やすさ** — グリッド/リスト/ツリーで状況に合わせて切り替え
+- **SFTP の作業感** — ドラッグ＆ドロップと内蔵エディタでサクッと編集
 
 ---
 
 <a name="機能"></a>
 # 機能
 
-### 🖥️ ターミナルとセッション
-- **xterm.js ベースのターミナル**、GPU アクセラレーションレンダリング対応
+### 🗂️ Vault
+- **複数ビュー** — グリッド / リスト / ツリー
+- **高速検索** — ホストやグループを素早く見つける
+
+### 🖥️ ターミナルワークスペース
 - **分割ペイン** — 水平・垂直分割でマルチタスク
-- **タブ管理** — ドラッグ＆ドロップで並べ替え可能な複数セッション
-- **セッション永続化** — 再起動後もセッションを復元
-- **ブロードキャストモード** — 一度の入力で複数のターミナルに送信
+- **セッション管理** — 複数の接続を並行して扱う
 
-### 🔐 SSH クライアント
-- **SSH2 プロトコル**、完全な認証サポート
-- **パスワード＆キー認証**
-- **SSH 証明書**サポート
-- **ジャンプホスト / 踏み台サーバー** — 複数ホストを経由した接続
-- **プロキシサポート** — HTTP CONNECT および SOCKS5 プロキシ
-- **エージェント転送** — OpenSSH Agent および Pageant 対応
-- **環境変数** — ホストごとにカスタム環境変数を設定
+### 📁 SFTP + 内蔵エディタ
+- **ファイル作業** — ドラッグ＆ドロップでアップロード/ダウンロード
+- **その場で編集** — 内蔵エディタで小さな修正を素早く
 
-### 📁 SFTP
-- **デュアルペインファイルブラウザ** — ローカル ↔ リモート または リモート ↔ リモート
-- **ドラッグ＆ドロップ**ファイル転送
-- **キュー管理**でバッチ転送
-- **進捗追跡**、転送速度表示
+### 🎨 パーソナライズ
+- **カスタムテーマ** — UI の見た目を好みに調整
+- **キーワードハイライト** — ターミナル出力の強調表示ルールをカスタマイズ
 
-### 🔑 キーチェーン
-- **SSH キー生成** — RSA、ECDSA、ED25519
-- **既存キーのインポート** — PEM、OpenSSH 形式
-- **SSH 証明書**サポート
-- **アイデンティティ管理** — 再利用可能なユーザー名＋認証方式の組み合わせ
-- **公開鍵をエクスポート**してリモートホストへ
+---
 
-### 🔌 ポートフォワーディング
-- **ローカルフォワーディング** — リモートサービスをローカルに公開
-- **リモートフォワーディング** — ローカルサービスをリモートに公開
-- **ダイナミックフォワーディング** — SOCKS5 プロキシ
-- **ビジュアルトンネル管理**
+<a name="デモ"></a>
+# デモ
 
-### ☁️ クラウド同期
-- **エンドツーエンド暗号化同期** — デバイスを離れる前にデータを暗号化
-- **複数のプロバイダー** — GitHub Gist、S3 互換ストレージ、WebDAV、Google Drive、OneDrive
-- **ホスト、キー、スニペット、設定を同期**
+GIF で機能をさっと確認できます（素材は `screenshots/gifs/`）：
 
-### 🎨 テーマとカスタマイズ
-- **ライト＆ダークモード**
-- **カスタムアクセントカラー**
-- **50以上のターミナル配色**
-- **フォントカスタマイズ** — JetBrains Mono、Fira Code など
-- **多言語対応** — English、简体中文 など
+### Vault ビュー：グリッド / リスト / ツリー
+状況に合わせて見え方を切り替え。グリッドで全体像、リストで密度、ツリーで階層を扱えます。
+
+![Vault ビュー：グリッド/リスト/ツリー](screenshots/gifs/gird-list-tre-views.gif)
+
+### 分割ターミナル + セッション管理
+複数セッションを分割ペインで並べて作業。関連タスクを横並びにしてコンテキストスイッチを減らします。
+
+![分割ターミナル + セッション管理](screenshots/gifs/dual-terminal--split-manage.gif)
+
+### SFTP：ドラッグ＆ドロップ + 内蔵エディタ
+ドラッグ＆ドロップでファイルを移動し、内蔵エディタでそのまま編集できます。
+
+![SFTP：ドラッグ＆ドロップ + 内蔵エディタ](screenshots/gifs/sftpview-with-drag-and-built-in-editor.gif)
+
+### ドラッグでアップロード
+ファイルをそのままドロップしてアップロードを開始。ダイアログ操作を減らせます。
+
+![ドラッグでアップロード](screenshots/gifs/drag-file-upload.gif)
+
+### カスタムテーマ
+テーマを調整して自分の好みに合わせた見た目に。
+
+![カスタムテーマ](screenshots/gifs/custom-themes.gif)
+
+### キーワードハイライト
+重要な出力（エラー/警告/マーカーなど）を見つけやすくするために、ハイライトをカスタマイズできます。
+
+![キーワードハイライト](screenshots/gifs/custom-highlight.gif)
 
 ---
 
 <a name="スクリーンショット"></a>
 # スクリーンショット
 
-<a name="ホスト管理"></a>
-## ホスト管理
+<a name="メインウィンドウ"></a>
+## メインウィンドウ
 
-Vault ビューはすべての SSH 接続を管理するコマンドセンターです。右クリックメニューで階層的なグループを作成し、グループ間でホストをドラッグ、パンくずナビゲーションでホストツリーを素早く移動できます。各ホストは接続状態、OS アイコン、クイック接続ボタンを表示。グリッドとリストビューを切り替え、強力な検索で名前、ホスト名、タグ、グループでフィルタリングできます。
+メインウィンドウは、長時間の SSH 作業を前提に設計されています。セッション、ナビゲーション、主要ツールへ素早くアクセスできます。
 
-**ダークモード**
+![メインウィンドウ（ダーク）](screenshots/main-window-dark.png)
 
-![ダークモード](screenshots/main-window-dark.png)
+![メインウィンドウ（ライト）](screenshots/main-window-light.png)
 
-**ライトモード**
+<a name="vault-ビュー"></a>
+## Vault ビュー
 
-![ライトモード](screenshots/main-window-light.png)
+作業に合わせて見え方を切り替え：グリッドで全体像、リストでスキャン、ツリーで整理と階層ナビゲーション。
 
-**リストビュー**
+![Vault グリッドビュー](screenshots/vault_grid_view.png)
 
-![リストビュー](screenshots/main-window-dark-list.png)
+![Vault リストビュー](screenshots/vault_list_view.png)
 
-<a name="ターミナル"></a>
-## ターミナル
+![Vault ツリービュー（ダーク）](screenshots/treeview-dark.png)
 
-WebGL アクセラレーション対応の xterm.js ベースのターミナルで、スムーズでレスポンシブな体験を提供。ワークスペースを水平または垂直に分割して、複数のセッションを同時に監視。ブロードキャストモードを有効にすると、すべてのターミナルに一度にコマンドを送信できます — フリート管理に最適。テーマカスタマイズパネルでは、50以上の配色スキームをライブプレビュー、フォントサイズの調整、JetBrains Mono や Fira Code を含む複数のフォントファミリーを選択できます。
+![Vault ツリービュー（ライト）](screenshots/treeview-light.png)
 
-**分割ウィンドウ**
+<a name="分割ターミナル"></a>
+## 分割ターミナル
+
+分割ペインで複数のサーバー/タスクを同時に扱えます（例：デプロイ + ログ + 監視）。
 
 ![分割ウィンドウ](screenshots/split-window.png)
 
-**テーマカスタマイズ**
-
-![テーマカスタマイズ](screenshots/terminal-theme-change.png)
-
-<a name="sftp"></a>
-## SFTP
-
-デュアルペイン SFTP ブラウザは、ローカルからリモート、リモートからリモートへのファイル転送をサポート。シングルクリックでディレクトリを移動、ペイン間でファイルをドラッグ＆ドロップ、転送進捗をリアルタイムで監視。インターフェースにはファイル権限、サイズ、変更日時を表示。複数の転送をキューに入れ、詳細な速度と進捗インジケーターで完了を確認。コンテキストメニューから名前変更、削除、ダウンロード、アップロード操作にすばやくアクセス。
-
-![SFTP ビュー](screenshots/sftp.png)
-
-<a name="キーチェーン"></a>
-## キーチェーン
-
-キーチェーンは SSH 認証情報を保管する安全な保管庫です。新しいキーを生成、既存のキーをインポート、エンタープライズ認証用の SSH 証明書を管理できます。
-
-| キータイプ | アルゴリズム | 推奨用途 |
-|----------|------------|---------|
-| **ED25519** | EdDSA | モダン、高速、最も安全（推奨） |
-| **ECDSA** | NIST P-256/384/521 | 高いセキュリティ、広くサポート |
-| **RSA** | RSA 2048/4096 | レガシー互換性、ユニバーサルサポート |
-| **証明書** | CA 署名 | エンタープライズ環境、短期認証 |
-
-**機能：**
-- 🔑 カスタマイズ可能なビット長でキーを生成
-- 📥 PEM/OpenSSH 形式のキーをインポート
-- 👤 再利用可能なアイデンティティを作成（ユーザー名＋認証方式）
-- 📤 ワンクリックで公開鍵をリモートホストにエクスポート
-
-![キーマネージャー](screenshots/key-manager.png)
-
-<a name="ポートフォワーディング"></a>
-## ポートフォワーディング
-
-直感的なビジュアルインターフェースで SSH トンネルをセットアップ。各トンネルはリアルタイムステータスを表示し、アクティブ、接続中、エラー状態を明確に示します。トンネル設定を保存してセッション間で素早く再利用。
-
-| タイプ | 方向 | ユースケース | 例 |
-|-------|-----|------------|---|
-| **ローカル** | リモート → ローカル | リモートサービスをローカルマシンでアクセス | リモート MySQL `3306` を `localhost:3306` に転送 |
-| **リモート** | ローカル → リモート | ローカルサービスをリモートサーバーと共有 | ローカル開発サーバーをリモートマシンに公開 |
-| **ダイナミック** | SOCKS5 プロキシ | SSH トンネル経由で安全にブラウジング | 暗号化された SSH 接続経由でインターネットをブラウズ |
-
-![ポートフォワーディング](screenshots/port-forwadring.png)
-
-<a name="クラウド同期"></a>
-## クラウド同期
-
-エンドツーエンド暗号化で、すべてのデバイス間でホスト、キー、スニペット、設定を同期。マスターパスワードがアップロード前にすべてのデータをローカルで暗号化 — クラウドプロバイダーは平文を見ることはありません。
-
-| プロバイダー | 最適な用途 | セットアップ複雑度 |
-|------------|----------|-----------------|
-| **GitHub Gist** | クイックセットアップ、バージョン履歴 | ⭐ 簡単 |
-| **Google Drive** | 個人利用、大容量ストレージ | ⭐ 簡単 |
-| **OneDrive** | Microsoft エコシステムユーザー | ⭐ 簡単 |
-| **S3 互換** | AWS、MinIO、Cloudflare R2、セルフホスト | ⭐⭐ 中程度 |
-| **WebDAV** | Nextcloud、ownCloud、セルフホスト | ⭐⭐ 中程度 |
-
-**同期対象：**
-- ✅ ホストと接続設定
-- ✅ SSH キーと証明書
-- ✅ アイデンティティと認証情報
-- ✅ スニペットとスクリプト
-- ✅ カスタムグループとタグ
-- ✅ ポートフォワーディングルール
-- ✅ アプリケーション設定
-
-![クラウド同期](screenshots/cloud-sync.png)
-
-<a name="テーマとカスタマイズ"></a>
-## テーマとカスタマイズ
-
-Netcatty を自分だけのものに。ライトモードとダークモードを切り替えたり、システム設定に従わせたり。好みに合わせてアクセントカラーを選択。アプリケーションは English や简体中文を含む複数の言語をサポートしており、コミュニティによる翻訳貢献を歓迎しています。クラウド同期を有効にすると、すべての設定がデバイス間で同期され、パーソナライズされた体験がどこでも利用できます。
-
-![テーマと国際化](screenshots/app-themes-i18n.png)
-
 ---
 
 <a name="対応ディストリビューション"></a>
 # 対応ディストリビューション
 
-Netcatty は接続したホストの OS アイコンを自動的に検出・表示します：
+Netcatty は接続したホストの OS を検出し、ホスト一覧でアイコンとして表示します：
 
 <p align="center">
   <img src="public/distro/ubuntu.svg" width="48" alt="Ubuntu" title="Ubuntu">
@@ -269,19 +205,17 @@ Netcatty は接続したホストの OS アイコンを自動的に検出・表
 
 ### ダウンロード
 
-| プラットフォーム | アーキテクチャ | ダウンロード |
-|------------------|----------------|--------------|
-| **macOS** | Apple Silicon (M1/M2/M3) | [Netcatty-1.0.0-mac-arm64.dmg](https://github.com/binaricat/Netcatty/releases/latest/download/Netcatty-1.0.0-mac-arm64.dmg) |
-| **macOS** | Intel | [Netcatty-1.0.0-mac-x64.dmg](https://github.com/binaricat/Netcatty/releases/latest/download/Netcatty-1.0.0-mac-x64.dmg) |
-| **Windows** | x64 | [Netcatty-1.0.0-win-x64.exe](https://github.com/binaricat/Netcatty/releases/latest/download/Netcatty-1.0.0-win-x64.exe) |
+[GitHub Releases](https://github.com/binaricat/Netcatty/releases/latest) からお使いのプラットフォームに対応した最新版をダウンロードしてください。
+
+| OS | サポート状況 |
+| :--- | :--- |
+| **macOS** | Universal (x64 / arm64) |
+| **Windows** | x64 / arm64 |
+| **Linux** | x64 / arm64 |
 
 または [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
@@ -335,7 +269,7 @@ npm run pack
 # 特定のプラットフォーム用にパッケージ
 npm run pack:mac     # macOS (DMG + ZIP)
 npm run pack:win     # Windows (NSIS インストーラー)
-npm run pack:linux   # Linux (AppImage, deb, rpm)
+npm run pack:linux   # Linux (AppImage + DEB + RPM)
 ```
 
 ---
@@ -345,7 +279,7 @@ npm run pack:linux   # Linux (AppImage, deb, rpm)
 
 | カテゴリ | テクノロジー |
 |--------|------------|
-| フレームワーク | Electron 39 |
+| フレームワーク | Electron 40 |
 | フロントエンド | React 19, TypeScript |
 | ビルドツール | Vite 7 |
 | ターミナル | xterm.js 5 |

README.md

@@ -5,33 +5,26 @@
 <h1 align="center">Netcatty</h1>
 
 <p align="center">
-  <strong>Modern SSH Client, SFTP Browser & Terminal Manager</strong>
+  <strong>Modern 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/>
-  Host management, split terminals, SFTP, port forwarding, and cloud sync — all in one.
+  Split terminals, Vault views, SFTP workflows, custom themes, and keyword highlighting — all in one.
 </p>
 
 <p align="center">
   <a href="https://github.com/binaricat/Netcatty/releases/latest"><img alt="GitHub Release" src="https://img.shields.io/github/v/release/binaricat/Netcatty?style=for-the-badge&logo=github&label=Release"></a>
   &nbsp;
-  <a href="#"><img alt="Platform" src="https://img.shields.io/badge/Platform-macOS%20%7C%20Windows-blue?style=for-the-badge&logo=electron"></a>
+  <a href="#"><img alt="Platform" src="https://img.shields.io/badge/Platform-macOS%20%7C%20Windows%20%7C%20Linux-blue?style=for-the-badge&logo=electron"></a>
   &nbsp;
   <a href="LICENSE"><img alt="License" src="https://img.shields.io/badge/License-GPL--3.0-green?style=for-the-badge"></a>
 </p>
 
 <p align="center">
-  <a href="https://github.com/binaricat/Netcatty/releases/latest/download/Netcatty-1.0.0-mac-arm64.dmg">
-    <img src="https://img.shields.io/badge/Download-macOS%20ARM64-000?style=for-the-badge&logo=apple" alt="Download macOS ARM64">
-  </a>
-  &nbsp;
-  <a href="https://github.com/binaricat/Netcatty/releases/latest/download/Netcatty-1.0.0-mac-x64.dmg">
-    <img src="https://img.shields.io/badge/Download-macOS%20Intel-000?style=for-the-badge&logo=apple" alt="Download macOS Intel">
-  </a>
-  &nbsp;
-  <a href="https://github.com/binaricat/Netcatty/releases/latest/download/Netcatty-1.0.0-win-x64.exe">
-    <img src="https://img.shields.io/badge/Download-Windows%20x64-0078D4?style=for-the-badge&logo=windows" alt="Download Windows">
+  <a href="https://github.com/binaricat/Netcatty/releases/latest">
+    <img src="https://img.shields.io/github/v/release/binaricat/Netcatty?style=for-the-badge&logo=github&label=Download%20Latest&color=success" alt="Download Latest Release">
   </a>
 </p>
 
@@ -54,15 +47,13 @@
 # Contents <!-- omit in toc -->
 
 - [What is Netcatty](#what-is-netcatty)
+- [Why Netcatty](#why-netcatty)
 - [Features](#features)
+- [Demos](#demos)
 - [Screenshots](#screenshots)
-  - [Host Management](#host-management)
-  - [Terminal](#terminal)
-  - [SFTP](#sftp)
-  - [Keychain](#keychain)
-  - [Port Forwarding](#port-forwarding)
-  - [Cloud Sync](#cloud-sync)
-  - [Themes & Customization](#themes--customization)
+  - [Main Window](#main-window)
+  - [Vault Views](#vault-views)
+  - [Split Terminals](#split-terminals)
 - [Supported Distros](#supported-distros)
 - [Getting Started](#getting-started)
 - [Build & Package](#build--package)
@@ -75,171 +66,117 @@
 <a name="what-is-netcatty"></a>
 # What is Netcatty
 
-**Netcatty** is a modern SSH client and terminal manager for macOS and Windows, designed for developers, sysadmins, and DevOps engineers who need to manage multiple remote servers efficiently.
+**Netcatty** is a modern SSH client and terminal manager for macOS, Windows, and Linux, designed for developers, sysadmins, and DevOps engineers who need to manage multiple remote servers efficiently.
 
 - **Netcatty is** an alternative to PuTTY, Termius, SecureCRT, and macOS Terminal.app for SSH connections
 - **Netcatty is** a powerful SFTP client with dual-pane file browser
 - **Netcatty is** a terminal workspace with split panes, tabs, and session management
-- **Netcatty is not** a shell replacement — it connects to remote shells via SSH/Telnet or local terminals
+- **Netcatty supports** SSH, local terminal, Telnet, Mosh, and Serial connections (when available)
+- **Netcatty is not** a shell replacement — it connects to shells via SSH/Telnet/Mosh or local/serial sessions
+
+---
+
+<a name="why-netcatty"></a>
+# Why Netcatty
+
+If you regularly work with a fleet of servers, Netcatty is built for speed and flow:
+
+- **Workspace-first** — split panes + tabs + session restore for “always-on” workflows
+- **Vault organization** — grid/list/tree views with fast search and drag-friendly workflows
+- **Serious SFTP** — built-in editor + drag & drop + smooth file operations
 
 ---
 
 <a name="features"></a>
 # Features
 
-### 🖥️ Terminal & Sessions
-- **xterm.js-based terminal** with GPU-accelerated rendering
+### 🗂️ Vault
+- **Multiple views** — grid / list / tree
+- **Fast search** — locate hosts and groups quickly
+
+### 🖥️ Terminal Workspaces
 - **Split panes** — horizontal and vertical splits for multi-tasking
-- **Tab management** — multiple sessions with drag-to-reorder
-- **Session persistence** — restore sessions on restart
-- **Broadcast mode** — type once, send to multiple terminals
+- **Session management** — run multiple connections side-by-side
 
-### 🔐 SSH Client
-- **SSH2 protocol** with full authentication support
-- **Password & key-based authentication**
-- **SSH certificates** support
-- **Jump hosts / Bastion** — chain through multiple hosts
-- **Proxy support** — HTTP CONNECT and SOCKS5 proxies
-- **Agent forwarding** — including OpenSSH Agent and Pageant
-- **Environment variables** — set custom env vars per host
+### 📁 SFTP + Built-in Editor
+- **File workflows** — drag & drop uploads/downloads
+- **Edit in place** — built-in editor for quick changes
 
-### 📁 SFTP
-- **Dual-pane file browser** — local ↔ remote or remote ↔ remote
-- **Drag & drop** file transfers
-- **Queue management** for batch transfers
-- **Progress tracking** with transfer speed
+### 🎨 Personalization
+- **Custom themes** — tune the app appearance to your taste
+- **Keyword highlighting** — customize highlight rules for terminal output
 
-### 🔑 Keychain
-- **Generate SSH keys** — RSA, ECDSA, ED25519
-- **Import existing keys** — PEM, OpenSSH formats
-- **SSH certificates** support
-- **Identity management** — reusable username + auth combinations
-- **Export public keys** to remote hosts
+---
 
-### 🔌 Port Forwarding
-- **Local forwarding** — expose remote services locally
-- **Remote forwarding** — expose local services remotely
-- **Dynamic forwarding** — SOCKS5 proxy
-- **Visual tunnel management**
+<a name="demos"></a>
+# Demos
 
-### ☁️ Cloud Sync
-- **End-to-end encrypted sync** — your data is encrypted before leaving your device
-- **Multiple providers** — GitHub Gist, S3-compatible storage, WebDAV, Google Drive, OneDrive
-- **Sync hosts, keys, snippets, and settings**
+GIF previews (stored in `screenshots/gifs/`), rendered inline on GitHub:
 
-### 🎨 Themes & Customization
-- **Light & Dark mode**
-- **Custom accent colors**
-- **50+ terminal color schemes**
-- **Font customization** — JetBrains Mono, Fira Code, and more
-- **i18n support** — English, 简体中文, and more
+### 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)
+
+### 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)
+
+### 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)
+
+### 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)
+
+### Custom themes
+Make Netcatty yours: customize themes and UI appearance.
+
+![Custom themes](screenshots/gifs/custom-themes.gif)
+
+### Keyword highlighting
+Highlight important terminal output so errors, warnings, and key events stand out at a glance.
+
+![Keyword highlighting](screenshots/gifs/custom-highlight.gif)
 
 ---
 
 <a name="screenshots"></a>
 # Screenshots
 
-<a name="host-management"></a>
-## Host Management
+<a name="main-window"></a>
+## Main Window
 
-The Vault view is your command center for managing all SSH connections. Create hierarchical groups with right-click context menus, drag hosts between groups, and use breadcrumb navigation to quickly traverse your host tree. Each host displays its connection status, OS icon, and quick-connect button. Switch between grid and list views based on your preference, and use the powerful search to filter hosts by name, hostname, tags, or group.
+The main window is designed for long-running SSH workflows: quick access to sessions, navigation, and core tools in one place.
 
-**Dark Mode**
+![Main Window (Dark)](screenshots/main-window-dark.png)
 
-![Dark Mode](screenshots/main-window-dark.png)
+![Main Window (Light)](screenshots/main-window-light.png)
 
-**Light Mode**
+<a name="vault-views"></a>
+## Vault Views
 
-![Light Mode](screenshots/main-window-light.png)
+Organize and navigate your hosts using the view that best fits the moment: grid for overview, list for scanning, tree for structure.
 
-**List View**
+![Vault Grid View](screenshots/vault_grid_view.png)
 
-![List View](screenshots/main-window-dark-list.png)
+![Vault List View](screenshots/vault_list_view.png)
 
-<a name="terminal"></a>
-## Terminal
+![Vault Tree View (Dark)](screenshots/treeview-dark.png)
 
-Powered by xterm.js with WebGL acceleration, the terminal delivers a smooth, responsive experience. Split your workspace horizontally or vertically to monitor multiple sessions simultaneously. Enable broadcast mode to send commands to all terminals at once — perfect for fleet management. The theme customization panel offers 50+ color schemes with live preview, adjustable font size, and multiple font family options including JetBrains Mono and Fira Code.
+![Vault Tree View (Light)](screenshots/treeview-light.png)
 
-**Split Windows**
+<a name="split-terminals"></a>
+## Split Terminals
+
+Split panes help you monitor multiple servers/services at the same time (deploy + logs + metrics) without juggling windows.
 
 ![Split Windows](screenshots/split-window.png)
 
-**Theme Customization**
-
-![Theme Customization](screenshots/terminal-theme-change.png)
-
-<a name="sftp"></a>
-## SFTP
-
-The dual-pane SFTP browser supports local-to-remote and remote-to-remote file transfers. Navigate directories with single-click, drag files between panes, and monitor transfer progress in real-time. The interface shows file permissions, sizes, and modification dates. Queue multiple transfers and watch them complete with detailed speed and progress indicators. Context menus provide quick access to rename, delete, download, and upload operations.
-
-![SFTP View](screenshots/sftp.png)
-
-<a name="keychain"></a>
-## Keychain
-
-The Keychain is your secure vault for SSH credentials. Generate new keys, import existing ones, or manage SSH certificates for enterprise authentication.
-
-| Key Type | Algorithm | Recommended Use |
-|----------|-----------|----------------|
-| **ED25519** | EdDSA | Modern, fast, most secure (recommended) |
-| **ECDSA** | NIST P-256/384/521 | Good security, widely supported |
-| **RSA** | RSA 2048/4096 | Legacy compatibility, universal support |
-| **Certificate** | CA-signed | Enterprise environments, short-lived auth |
-
-**Features:**
-- 🔑 Generate keys with customizable bit lengths
-- 📥 Import PEM/OpenSSH format keys
-- 👤 Create reusable identities (username + auth method)
-- 📤 One-click export public keys to remote hosts
-
-![Key Manager](screenshots/key-manager.png)
-
-<a name="port-forwarding"></a>
-## Port Forwarding
-
-Set up SSH tunnels with an intuitive visual interface. Each tunnel shows real-time status with clear indicators for active, connecting, or error states. Save tunnel configurations for quick reuse across sessions.
-
-| Type | Direction | Use Case | Example |
-|------|-----------|----------|--------|
-| **Local** | Remote → Local | Access remote services on your machine | Forward remote MySQL `3306` to `localhost:3306` |
-| **Remote** | Local → Remote | Share local services with remote server | Expose local dev server to remote machine |
-| **Dynamic** | SOCKS5 Proxy | Secure browsing through SSH tunnel | Browse internet via encrypted SSH connection |
-
-![Port Forwarding](screenshots/port-forwadring.png)
-
-<a name="cloud-sync"></a>
-## Cloud Sync
-
-Keep your hosts, keys, snippets, and settings synchronized across all your devices with end-to-end encryption. Your master password encrypts all data locally before upload — the cloud provider never sees plaintext.
-
-| Provider | Best For | Setup Complexity |
-|----------|----------|------------------|
-| **GitHub Gist** | Quick setup, version history | ⭐ Easy |
-| **Google Drive** | Personal use, large storage | ⭐ Easy |
-| **OneDrive** | Microsoft ecosystem users | ⭐ Easy |
-| **S3-Compatible** | AWS, MinIO, Cloudflare R2, self-hosted | ⭐⭐ Medium |
-| **WebDAV** | Nextcloud, ownCloud, self-hosted | ⭐⭐ Medium |
-
-**What syncs:**
-- ✅ Hosts & connection settings
-- ✅ SSH keys & certificates
-- ✅ Identities & credentials
-- ✅ Snippets & scripts
-- ✅ Custom groups & tags
-- ✅ Port forwarding rules
-- ✅ Application preferences
-
-![Cloud Sync](screenshots/cloud-sync.png)
-
-<a name="themes--customization"></a>
-## Themes & Customization
-
-Make Netcatty truly yours with extensive customization options. Toggle between light and dark modes, or let the app follow your system preference. Pick any accent color to match your style. The application supports multiple languages including English and 简体中文, with more translations welcome via community contributions. All preferences sync across devices when cloud sync is enabled, so your personalized experience follows you everywhere.
-
-![Themes & i18n](screenshots/app-themes-i18n.png)
-
 ---
 
 <a name="supported-distros"></a>
@@ -262,30 +199,26 @@ Netcatty automatically detects and displays OS icons for connected hosts:
   <img src="public/distro/kali.svg" width="48" alt="Kali Linux" title="Kali Linux">
 </p>
 
----
-
 <a name="getting-started"></a>
 # Getting Started
 
 ### Download
 
-| Platform | Architecture | Download |
-|----------|--------------|----------|
-| **macOS** | Apple Silicon (M1/M2/M3) | [Netcatty-1.0.0-mac-arm64.dmg](https://github.com/binaricat/Netcatty/releases/latest/download/Netcatty-1.0.0-mac-arm64.dmg) |
-| **macOS** | Intel | [Netcatty-1.0.0-mac-x64.dmg](https://github.com/binaricat/Netcatty/releases/latest/download/Netcatty-1.0.0-mac-x64.dmg) |
-| **Windows** | x64 | [Netcatty-1.0.0-win-x64.exe](https://github.com/binaricat/Netcatty/releases/latest/download/Netcatty-1.0.0-win-x64.exe) |
+Download the latest release for your platform from [GitHub Releases](https://github.com/binaricat/Netcatty/releases/latest).
+
+| OS | Support |
+| :--- | :--- |
+| **macOS** | Universal (x64 / arm64) |
+| **Windows** | x64 / arm64 |
+| **Linux** | x64 / arm64 |
 
 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
-- macOS or Windows 10+
+- macOS, Windows 10+, or Linux
 
 ### Development
 
@@ -335,6 +268,7 @@ npm run pack
 # Package for specific platforms
 npm run pack:mac     # macOS (DMG + ZIP)
 npm run pack:win     # Windows (NSIS installer)
+npm run pack:linux   # Linux (AppImage + DEB + RPM)
 ```
 
 ---
@@ -344,7 +278,7 @@ npm run pack:win     # Windows (NSIS installer)
 
 | Category | Technology |
 |----------|------------|
-| Framework | Electron 39 |
+| Framework | Electron 40 |
 | Frontend | React 19, TypeScript |
 | Build Tool | Vite 7 |
 | Terminal | xterm.js 5 |
@@ -370,6 +304,15 @@ See [agents.md](agents.md) for architecture overview and coding conventions.
 
 ---
 
+<a name="contributors"></a>
+# Contributors
+
+Thanks to all the people who contribute!
+
+See: https://github.com/binaricat/Netcatty/graphs/contributors
+
+---
+
 <a name="license"></a>
 # License
 

README.zh-CN.md

@@ -5,33 +5,26 @@
 <h1 align="center">Netcatty</h1>
 
 <p align="center">
-  <strong>现代化 SSH 客户端、SFTP 浏览器 & 终端管理器</strong>
+  <strong>现代化 SSH 客户端、SFTP 浏览器 & 终端管理器</strong><br/>
+  <a href="https://netcatty.app"><strong>netcatty.app</strong></a>
 </p>
 
 <p align="center">
   一个基于 Electron、React 和 xterm.js 构建的功能丰富的 SSH 工作空间。<br/>
-  主机管理、分屏终端、SFTP、端口转发、云同步 —— 一应俱全。
+  分屏终端、Vault 多视图、SFTP 工作流、自定义主题、关键词高亮 —— 一应俱全。
 </p>
 
 <p align="center">
   <a href="https://github.com/binaricat/Netcatty/releases/latest"><img alt="GitHub Release" src="https://img.shields.io/github/v/release/binaricat/Netcatty?style=for-the-badge&logo=github&label=Release"></a>
   &nbsp;
-  <a href="#"><img alt="Platform" src="https://img.shields.io/badge/Platform-macOS%20%7C%20Windows-blue?style=for-the-badge&logo=electron"></a>
+  <a href="#"><img alt="Platform" src="https://img.shields.io/badge/Platform-macOS%20%7C%20Windows%20%7C%20Linux-blue?style=for-the-badge&logo=electron"></a>
   &nbsp;
   <a href="LICENSE"><img alt="License" src="https://img.shields.io/badge/License-GPL--3.0-green?style=for-the-badge"></a>
 </p>
 
 <p align="center">
-  <a href="https://github.com/binaricat/Netcatty/releases/latest/download/Netcatty-1.0.0-mac-arm64.dmg">
-    <img src="https://img.shields.io/badge/下载-macOS%20ARM64-000?style=for-the-badge&logo=apple" alt="下载 macOS ARM64">
-  </a>
-  &nbsp;
-  <a href="https://github.com/binaricat/Netcatty/releases/latest/download/Netcatty-1.0.0-mac-x64.dmg">
-    <img src="https://img.shields.io/badge/下载-macOS%20Intel-000?style=for-the-badge&logo=apple" alt="下载 macOS Intel">
-  </a>
-  &nbsp;
-  <a href="https://github.com/binaricat/Netcatty/releases/latest/download/Netcatty-1.0.0-win-x64.exe">
-    <img src="https://img.shields.io/badge/下载-Windows%20x64-0078D4?style=for-the-badge&logo=windows" alt="下载 Windows">
+  <a href="https://github.com/binaricat/Netcatty/releases/latest">
+    <img src="https://img.shields.io/github/v/release/binaricat/Netcatty?style=for-the-badge&logo=github&label=下载最新版&color=success" alt="下载最新版">
   </a>
 </p>
 
@@ -54,15 +47,13 @@
 # 目录 <!-- omit in toc -->
 
 - [Netcatty 是什么](#netcatty-是什么)
+- [为什么是 Netcatty](#为什么是-netcatty)
 - [功能特性](#功能特性)
+- [演示](#演示)
 - [界面截图](#界面截图)
-  - [主机管理](#主机管理)
-  - [终端](#终端)
-  - [SFTP](#sftp)
-  - [密钥管理](#密钥管理)
-  - [端口转发](#端口转发)
-  - [云同步](#云同步)
-  - [主题与定制](#主题与定制)
+  - [主界面](#主界面)
+  - [Vault 视图](#vault-视图)
+  - [分屏终端](#分屏终端)
 - [支持的发行版](#支持的发行版)
 - [快速开始](#快速开始)
 - [构建与打包](#构建与打包)
@@ -80,172 +71,118 @@
 - **Netcatty 是** PuTTY、Termius、SecureCRT 和 macOS Terminal.app 的现代替代品
 - **Netcatty 是** 一个强大的 SFTP 客户端，支持双窗格文件浏览
 - **Netcatty 是** 一个终端工作空间，支持分屏、标签页和会话管理
-- **Netcatty 不是** Shell 替代品 —— 它通过 SSH/Telnet 或本地终端连接到远程 Shell
+- **Netcatty 支持** SSH、本地终端、Telnet、Mosh、串口（Serial）等连接方式（视环境而定）
+- **Netcatty 不是** Shell 替代品 —— 它通过 SSH/Telnet/Mosh 或本地/串口会话连接到 Shell
+
+---
+
+<a name="为什么是-netcatty"></a>
+# 为什么是 Netcatty
+
+如果你需要同时维护多台服务器，Netcatty 更像是“工作台”而不是单一终端：
+
+- **以工作区为核心** —— 分屏 + 多会话并行，适合长期驻留的工作流
+- **Vault 管理** —— 网格/列表/树形视图，配合搜索与拖拽更顺手
+- **认真做的 SFTP** —— 内置编辑器 + 拖拽上传，文件操作更丝滑
 
 ---
 
 <a name="功能特性"></a>
 # 功能特性
 
-### 🖥️ 终端与会话
-- **基于 xterm.js 的终端**，支持 GPU 加速渲染
-- **分屏功能** —— 水平和垂直分割，多任务并行
-- **标签页管理** —— 多会话支持，拖拽排序
-- **会话持久化** —— 重启后恢复会话
-- **广播模式** —— 一次输入，发送到多个终端
+### 🗂️ Vault
+- **多种视图** —— 网格 / 列表 / 树形
+- **快速搜索** —— 迅速定位主机与分组
 
-### 🔐 SSH 客户端
-- **SSH2 协议**，完整的认证支持
-- **密码和密钥认证**
-- **SSH 证书**支持
-- **跳板机 / 堡垒机** —— 多主机链式连接
-- **代理支持** —— HTTP CONNECT 和 SOCKS5 代理
-- **Agent 转发** —— 支持 OpenSSH Agent 和 Pageant
-- **环境变量** —— 为每个主机设置自定义环境变量
+### 🖥️ 终端工作区
+- **分屏** —— 水平/垂直分割，多任务并行
+- **多会话管理** —— 多连接并排处理
 
-### 📁 SFTP
-- **双窗格文件浏览器** —— 本地 ↔ 远程 或 远程 ↔ 远程
-- **拖放传输** 文件
-- **队列管理** 批量传输
-- **进度跟踪** 显示传输速度
+### 📁 SFTP + 内置编辑器
+- **文件工作流** —— 拖拽上传/下载更直观
+- **就地编辑** —— 内置编辑器快速修改文件
 
-### 🔑 密钥管理
-- **生成 SSH 密钥** —— RSA、ECDSA、ED25519
-- **导入已有密钥** —— PEM、OpenSSH 格式
-- **SSH 证书**支持
-- **身份管理** —— 可复用的用户名 + 认证方式组合
-- **导出公钥**到远程主机
+### 🎨 个性化
+- **自定义主题** —— 按喜好调整应用外观
+- **关键词高亮** —— 自定义终端输出高亮规则
 
-### 🔌 端口转发
-- **本地转发** —— 将远程服务暴露到本地
-- **远程转发** —— 将本地服务暴露到远程
-- **动态转发** —— SOCKS5 代理
-- **可视化隧道管理**
+---
 
-### ☁️ 云同步
-- **端到端加密同步** —— 数据在离开设备前加密
-- **多种存储后端** —— GitHub Gist、S3 兼容存储、WebDAV、Google Drive、OneDrive
-- **同步主机、密钥、代码片段和设置**
+<a name="演示"></a>
+# 演示
 
-### 🎨 主题与定制
-- **浅色 & 深色模式**
-- **自定义强调色**
-- **50+ 终端配色方案**
-- **字体自定义** —— JetBrains Mono、Fira Code 等
-- **多语言支持** —— English、简体中文 等
+GIF 预览（素材均在 `screenshots/gifs/`），在 GitHub README 中可直接观看：
+
+### Vault 视图：网格 / 列表 / 树形
+根据不同场景自由切换视图：网格适合总览，列表适合密集浏览，树形适合层级导航与整理。
+
+![Vault 视图：网格/列表/树形](screenshots/gifs/gird-list-tre-views.gif)
+
+### 分屏终端 + 会话管理
+用分屏把多个会话并排放在同一个工作区里，降低来回切换窗口/标签页的成本。
+
+![分屏终端 + 会话管理](screenshots/gifs/dual-terminal--split-manage.gif)
+
+### SFTP：拖拽 + 内置编辑器
+通过拖拽完成文件传输，并用内置编辑器快速修改文件内容，不用来回切换工具。
+
+![SFTP：拖拽 + 内置编辑器](screenshots/gifs/sftpview-with-drag-and-built-in-editor.gif)
+
+### 拖拽文件上传
+把文件直接拖进应用即可触发上传流程，省去多层对话框与路径选择。
+
+![拖拽文件上传](screenshots/gifs/drag-file-upload.gif)
+
+### 自定义主题
+按自己的审美与习惯定制主题与界面外观，让日常使用更顺手。
+
+![自定义主题](screenshots/gifs/custom-themes.gif)
+
+### 关键词高亮
+让关键输出一眼可见：错误、告警或特定标记被高亮后更容易扫到与定位。
+
+![关键词高亮](screenshots/gifs/custom-highlight.gif)
 
 ---
 
 <a name="界面截图"></a>
 # 界面截图
 
-<a name="主机管理"></a>
-## 主机管理
+<a name="主界面"></a>
+## 主界面
 
-Vault 视图是管理所有 SSH 连接的控制中心。通过右键菜单创建层级分组，在分组间拖拽主机，使用面包屑导航快速遍历主机树。每个主机显示连接状态、操作系统图标和快速连接按钮。根据偏好在网格和列表视图之间切换，使用强大的搜索按名称、主机名、标签或分组过滤主机。
+主界面围绕长期 SSH 工作流设计：把会话、导航和常用工具集中到同一处，减少切换成本。
 
-**深色模式**
+![主界面（深色）](screenshots/main-window-dark.png)
 
-![深色模式](screenshots/main-window-dark.png)
+![主界面（浅色）](screenshots/main-window-light.png)
 
-**浅色模式**
+<a name="vault-视图"></a>
+## Vault 视图
 
-![浅色模式](screenshots/main-window-light.png)
+用更适合当前任务的方式管理与浏览主机：网格看全局，列表做筛选，树形做整理与层级导航。
 
-**列表视图**
+![Vault 网格视图](screenshots/vault_grid_view.png)
 
-![列表视图](screenshots/main-window-dark-list.png)
+![Vault 列表视图](screenshots/vault_list_view.png)
 
-<a name="终端"></a>
-## 终端
+![Vault 树形视图（深色）](screenshots/treeview-dark.png)
 
-基于 xterm.js 的 WebGL 加速终端，提供流畅、响应迅速的体验。水平或垂直分割工作区，同时监控多个会话。启用广播模式可一次向所有终端发送命令 —— 非常适合批量管理。主题定制面板提供 50+ 配色方案和实时预览、可调节字号以及多种字体选择，包括 JetBrains Mono 和 Fira Code。
+![Vault 树形视图（浅色）](screenshots/treeview-light.png)
 
-**分屏窗口**
+<a name="分屏终端"></a>
+## 分屏终端
+
+分屏适合同时处理多个任务（例如部署 + 日志 + 排障），不用频繁切换窗口。
 
 ![分屏窗口](screenshots/split-window.png)
 
-**主题定制**
-
-![主题定制](screenshots/terminal-theme-change.png)
-
-<a name="sftp"></a>
-## SFTP
-
-双窗格 SFTP 浏览器支持本地到远程和远程到远程的文件传输。单击导航目录，在窗格之间拖放文件，实时监控传输进度。界面显示文件权限、大小和修改日期。批量传输队列管理，详细的速度和进度指示器。右键菜单快速访问重命名、删除、下载和上传操作。
-
-![SFTP 视图](screenshots/sftp.png)
-
-<a name="密钥管理"></a>
-## 密钥管理
-
-密钥库是您存储 SSH 凭证的安全保险库。生成新密钥、导入已有密钥或管理企业认证的 SSH 证书。
-
-| 密钥类型 | 算法 | 推荐用途 |
-|---------|------|---------|
-| **ED25519** | EdDSA | 现代、快速、最安全（推荐） |
-| **ECDSA** | NIST P-256/384/521 | 安全性好、广泛支持 |
-| **RSA** | RSA 2048/4096 | 旧版兼容、通用支持 |
-| **证书** | CA 签名 | 企业环境、短期认证 |
-
-**功能：**
-- 🔑 生成可自定义位长的密钥
-- 📥 导入 PEM/OpenSSH 格式密钥
-- 👤 创建可复用身份（用户名 + 认证方式）
-- 📤 一键导出公钥到远程主机
-
-![密钥管理器](screenshots/key-manager.png)
-
-<a name="端口转发"></a>
-## 端口转发
-
-通过直观的可视化界面设置 SSH 隧道。每个隧道显示实时状态，清晰指示活动、连接中或错误状态。保存隧道配置以便跨会话快速复用。
-
-| 类型 | 方向 | 使用场景 | 示例 |
-|-----|-----|---------|-----|
-| **本地** | 远程 → 本地 | 在本机访问远程服务 | 将远程 MySQL `3306` 转发到 `localhost:3306` |
-| **远程** | 本地 → 远程 | 与远程服务器共享本地服务 | 将本地开发服务器暴露给远程机器 |
-| **动态** | SOCKS5 代理 | 通过 SSH 隧道安全浏览 | 通过加密 SSH 连接浏览互联网 |
-
-![端口转发](screenshots/port-forwadring.png)
-
-<a name="云同步"></a>
-## 云同步
-
-通过端到端加密在所有设备间同步主机、密钥、代码片段和设置。主密码在上传前本地加密所有数据 —— 云服务商永远看不到明文。
-
-| 服务商 | 最适合 | 配置复杂度 |
-|-------|-------|----------|
-| **GitHub Gist** | 快速设置、版本历史 | ⭐ 简单 |
-| **Google Drive** | 个人使用、大容量存储 | ⭐ 简单 |
-| **OneDrive** | 微软生态用户 | ⭐ 简单 |
-| **S3 兼容存储** | AWS、MinIO、Cloudflare R2、自托管 | ⭐⭐ 中等 |
-| **WebDAV** | Nextcloud、ownCloud、自托管 | ⭐⭐ 中等 |
-
-**同步内容：**
-- ✅ 主机与连接设置
-- ✅ SSH 密钥与证书
-- ✅ 身份与凭证
-- ✅ 代码片段与脚本
-- ✅ 自定义分组与标签
-- ✅ 端口转发规则
-- ✅ 应用程序偏好设置
-
-![云同步](screenshots/cloud-sync.png)
-
-<a name="主题与定制"></a>
-## 主题与定制
-
-让 Netcatty 真正属于你。在浅色和深色模式之间切换，或让应用跟随系统偏好。选择任意强调色来匹配你的风格。应用支持多种语言，包括 English 和简体中文，欢迎社区贡献更多翻译。启用云同步后，所有偏好设置都会跨设备同步，个性化体验随处可用。
-
-![主题与国际化](screenshots/app-themes-i18n.png)
-
 ---
 
 <a name="支持的发行版"></a>
 # 支持的发行版
 
-Netcatty 自动检测并显示已连接主机的操作系统图标：
+Netcatty 会自动识别并在主机列表中展示对应的系统图标：
 
 <p align="center">
   <img src="public/distro/ubuntu.svg" width="48" alt="Ubuntu" title="Ubuntu">
@@ -262,26 +199,22 @@ Netcatty 自动检测并显示已连接主机的操作系统图标：
   <img src="public/distro/kali.svg" width="48" alt="Kali Linux" title="Kali Linux">
 </p>
 
----
-
 <a name="快速开始"></a>
 # 快速开始
 
 ### 下载
 
-| 平台 | 架构 | 下载链接 |
-|------|------|----------|
-| **macOS** | Apple Silicon (M1/M2/M3) | [Netcatty-1.0.0-mac-arm64.dmg](https://github.com/binaricat/Netcatty/releases/latest/download/Netcatty-1.0.0-mac-arm64.dmg) |
-| **macOS** | Intel | [Netcatty-1.0.0-mac-x64.dmg](https://github.com/binaricat/Netcatty/releases/latest/download/Netcatty-1.0.0-mac-x64.dmg) |
-| **Windows** | x64 | [Netcatty-1.0.0-win-x64.exe](https://github.com/binaricat/Netcatty/releases/latest/download/Netcatty-1.0.0-win-x64.exe) |
+从 [GitHub Releases](https://github.com/binaricat/Netcatty/releases/latest) 下载适合您平台的最新版本。
+
+| 操作系统 | 支持情况 |
+| :--- | :--- |
+| **macOS** | Universal (x64 / arm64) |
+| **Windows** | x64 / arm64 |
+| **Linux** | x64 / arm64 |
 
 或在 [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
@@ -345,7 +278,7 @@ npm run pack:linux   # Linux (AppImage, deb, rpm)
 
 | 分类 | 技术 |
 |-----|-----|
-| 框架 | Electron 39 |
+| 框架 | Electron 40 |
 | 前端 | React 19, TypeScript |
 | 构建工具 | Vite 7 |
 | 终端 | xterm.js 5 |
@@ -371,6 +304,15 @@ npm run pack:linux   # Linux (AppImage, deb, rpm)
 
 ---
 
+<a name="贡献者"></a>
+# 贡献者
+
+感谢所有参与贡献的人！
+
+查看：https://github.com/binaricat/Netcatty/graphs/contributors
+
+---
+
 <a name="开源协议"></a>
 # 开源协议
 

agents.md

@@ -31,6 +31,7 @@ This project is wired around three layers: domain (pure logic), application stat
 ## Data & Storage
 - Persisted keys: see `storageKeys.ts`. Use `localStorageAdapter` for all reads/writes.
 - Seed data: `config/defaultData.ts`; terminal themes: `config/terminalThemes.ts`.
+- **Temporary files**: All temporary files (e.g., SFTP downloaded files for external editing) must be written to Netcatty's dedicated temp directory via `tempDirBridge.getTempFilePath(fileName)`. Do not write directly to `os.tmpdir()`. This ensures proper cleanup and user visibility in Settings > System.
 
 ## Testing & Safety
 - Favor unit tests for domain helpers (e.g., `workspace.ts`, `host.ts`) and hook-level tests for application state.

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

@@ -0,0 +1,146 @@
+import { useSyncExternalStore } from 'react';
+import { TERMINAL_FONTS, type TerminalFont } from '../../infrastructure/config/fonts';
+import { getMonospaceFonts } from '../../lib/localFonts';
+
+/**
+ * Global font store - singleton pattern using useSyncExternalStore
+ * Ensures fonts are loaded only once and shared across all components
+ */
+type Listener = () => void;
+
+interface FontStoreState {
+  availableFonts: TerminalFont[];
+  isLoading: boolean;
+  isLoaded: boolean;
+  error: string | null;
+}
+
+class FontStore {
+  private state: FontStoreState = {
+    availableFonts: TERMINAL_FONTS,
+    isLoading: false,
+    isLoaded: false,
+    error: null,
+  };
+  private listeners = new Set<Listener>();
+
+  // Getters for individual state slices
+  getAvailableFonts = (): TerminalFont[] => this.state.availableFonts;
+  getIsLoading = (): boolean => this.state.isLoading;
+  getIsLoaded = (): boolean => this.state.isLoaded;
+  getError = (): string | null => this.state.error;
+
+  private notify = () => {
+    // Defer listener notification to avoid "setState during render"
+    Promise.resolve().then(() => {
+      this.listeners.forEach(listener => listener());
+    });
+  };
+
+  private setState = (partial: Partial<FontStoreState>) => {
+    this.state = { ...this.state, ...partial };
+    this.notify();
+  };
+
+  subscribe = (listener: Listener): (() => void) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+
+  /**
+   * Initialize font loading - safe to call multiple times,
+   * will only load once
+   */
+  initialize = async (): Promise<void> => {
+    // Already loaded or currently loading
+    if (this.state.isLoaded || this.state.isLoading) {
+      return;
+    }
+
+    this.setState({ isLoading: true, error: null });
+
+    try {
+      const localFonts = await getMonospaceFonts();
+      
+      // Combine default fonts with local fonts, deduplicate by id
+      const fontMap = new Map<string, TerminalFont>();
+
+      // Add default fonts first
+      TERMINAL_FONTS.forEach(font => fontMap.set(font.id, font));
+
+      // Add local fonts with a distinct ID namespace to avoid collisions
+      localFonts.forEach(font => {
+        const localId = font.id.startsWith('local-') ? font.id : `local-${font.id}`;
+        fontMap.set(localId, { ...font, id: localId });
+      });
+
+      this.setState({
+        availableFonts: Array.from(fontMap.values()),
+        isLoading: false,
+        isLoaded: true,
+      });
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to load local fonts';
+      console.warn('Failed to fetch local fonts, using defaults:', error);
+      this.setState({
+        availableFonts: TERMINAL_FONTS,
+        isLoading: false,
+        isLoaded: true,
+        error: errorMessage,
+      });
+    }
+  };
+
+  /**
+   * Find a font by ID with fallback
+   */
+  getFontById = (fontId: string): TerminalFont => {
+    const fonts = this.state.availableFonts;
+    return fonts.find(f => f.id === fontId) || fonts[0] || TERMINAL_FONTS[0];
+  };
+}
+
+// Singleton instance
+export const fontStore = new FontStore();
+
+// ============== Hooks ==============
+
+/**
+ * Get available fonts - triggers initialization on first use
+ */
+export const useAvailableFonts = (): TerminalFont[] => {
+  // Trigger initialization on first use
+  if (!fontStore.getIsLoaded() && !fontStore.getIsLoading()) {
+    fontStore.initialize();
+  }
+  
+  return useSyncExternalStore(
+    fontStore.subscribe,
+    fontStore.getAvailableFonts
+  );
+};
+
+/**
+ * Get font loading state
+ */
+export const useFontsLoading = (): boolean => {
+  return useSyncExternalStore(
+    fontStore.subscribe,
+    fontStore.getIsLoading
+  );
+};
+
+/**
+ * Get font by ID with fallback - useful for components that need a specific font
+ */
+export const useFontById = (fontId: string): TerminalFont => {
+  const fonts = useAvailableFonts();
+  return fonts.find(f => f.id === fontId) || fonts[0] || TERMINAL_FONTS[0];
+};
+
+/**
+ * Initialize fonts eagerly (call at app startup)
+ */
+export const initializeFonts = (): void => {
+  fontStore.initialize();
+};

application/state/sftp/errors.ts

@@ -0,0 +1,19 @@
+export const isSessionError = (err: unknown): boolean => {
+  if (!(err instanceof Error)) return false;
+  const msg = err.message.toLowerCase();
+  return (
+    msg.includes("session not found") ||
+    msg.includes("sftp session") ||
+    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/mockLocalFiles.ts

@@ -0,0 +1,454 @@
+import { SftpFileEntry } from "../../../domain/models";
+import { formatDate } from "./utils";
+
+// Mock local file data for development (when backend is not available)
+export function buildMockLocalFiles(path: string): SftpFileEntry[] {
+  // Normalize path for matching (handle both Windows and Unix paths)
+  const normPath = path.replace(/\\/g, "/").replace(/\/$/, "") || "/";
+
+  const mockData: Record<string, SftpFileEntry[]> = {
+    // Unix-style paths
+    "/": [
+      {
+        name: "Users",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+      {
+        name: "Applications",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 172800000,
+        lastModifiedFormatted: formatDate(Date.now() - 172800000),
+      },
+      {
+        name: "System",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 259200000,
+        lastModifiedFormatted: formatDate(Date.now() - 259200000),
+      },
+    ],
+    "/Users": [
+      {
+        name: "damao",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 3600000,
+        lastModifiedFormatted: formatDate(Date.now() - 3600000),
+      },
+      {
+        name: "Shared",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+    ],
+    "/Users/damao": [
+      {
+        name: "Desktop",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 1800000,
+        lastModifiedFormatted: formatDate(Date.now() - 1800000),
+      },
+      {
+        name: "Documents",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 7200000,
+        lastModifiedFormatted: formatDate(Date.now() - 7200000),
+      },
+      {
+        name: "Downloads",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 3600000,
+        lastModifiedFormatted: formatDate(Date.now() - 3600000),
+      },
+      {
+        name: "Pictures",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 172800000,
+        lastModifiedFormatted: formatDate(Date.now() - 172800000),
+      },
+      {
+        name: "Projects",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 900000,
+        lastModifiedFormatted: formatDate(Date.now() - 900000),
+      },
+    ],
+    // Windows-style paths (normalized to forward slashes for matching)
+    "C:": [
+      {
+        name: "Users",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+      {
+        name: "Program Files",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 172800000,
+        lastModifiedFormatted: formatDate(Date.now() - 172800000),
+      },
+      {
+        name: "Windows",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 259200000,
+        lastModifiedFormatted: formatDate(Date.now() - 259200000),
+      },
+    ],
+    "C:/Users": [
+      {
+        name: "damao",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 3600000,
+        lastModifiedFormatted: formatDate(Date.now() - 3600000),
+      },
+      {
+        name: "Public",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+      {
+        name: "Default",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 172800000,
+        lastModifiedFormatted: formatDate(Date.now() - 172800000),
+      },
+    ],
+    "C:/Users/damao": [
+      {
+        name: "Desktop",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 1800000,
+        lastModifiedFormatted: formatDate(Date.now() - 1800000),
+      },
+      {
+        name: "Documents",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 7200000,
+        lastModifiedFormatted: formatDate(Date.now() - 7200000),
+      },
+      {
+        name: "Downloads",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 3600000,
+        lastModifiedFormatted: formatDate(Date.now() - 3600000),
+      },
+      {
+        name: "Pictures",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 172800000,
+        lastModifiedFormatted: formatDate(Date.now() - 172800000),
+      },
+      {
+        name: "Projects",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 900000,
+        lastModifiedFormatted: formatDate(Date.now() - 900000),
+      },
+    ],
+    "C:/Users/damao/Desktop": [
+      {
+        name: "Netcatty",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 300000,
+        lastModifiedFormatted: formatDate(Date.now() - 300000),
+      },
+      {
+        name: "notes.txt",
+        type: "file",
+        size: 2048,
+        sizeFormatted: "2 KB",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+      {
+        name: "screenshot.png",
+        type: "file",
+        size: 1048576,
+        sizeFormatted: "1 MB",
+        lastModified: Date.now() - 43200000,
+        lastModifiedFormatted: formatDate(Date.now() - 43200000),
+      },
+    ],
+    "C:/Users/damao/Desktop/Netcatty": [
+      {
+        name: "src",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 600000,
+        lastModifiedFormatted: formatDate(Date.now() - 600000),
+      },
+      {
+        name: "package.json",
+        type: "file",
+        size: 1536,
+        sizeFormatted: "1.5 KB",
+        lastModified: Date.now() - 3600000,
+        lastModifiedFormatted: formatDate(Date.now() - 3600000),
+      },
+      {
+        name: "README.md",
+        type: "file",
+        size: 4096,
+        sizeFormatted: "4 KB",
+        lastModified: Date.now() - 7200000,
+        lastModifiedFormatted: formatDate(Date.now() - 7200000),
+      },
+      {
+        name: "tsconfig.json",
+        type: "file",
+        size: 512,
+        sizeFormatted: "512 Bytes",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+    ],
+    "C:/Users/damao/Documents": [
+      {
+        name: "Work",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+      {
+        name: "Personal",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 172800000,
+        lastModifiedFormatted: formatDate(Date.now() - 172800000),
+      },
+      {
+        name: "report.pdf",
+        type: "file",
+        size: 2097152,
+        sizeFormatted: "2 MB",
+        lastModified: Date.now() - 259200000,
+        lastModifiedFormatted: formatDate(Date.now() - 259200000),
+      },
+    ],
+    "C:/Users/damao/Downloads": [
+      {
+        name: "installer.exe",
+        type: "file",
+        size: 52428800,
+        sizeFormatted: "50 MB",
+        lastModified: Date.now() - 3600000,
+        lastModifiedFormatted: formatDate(Date.now() - 3600000),
+      },
+      {
+        name: "archive.zip",
+        type: "file",
+        size: 10485760,
+        sizeFormatted: "10 MB",
+        lastModified: Date.now() - 7200000,
+        lastModifiedFormatted: formatDate(Date.now() - 7200000),
+      },
+      {
+        name: "document.pdf",
+        type: "file",
+        size: 524288,
+        sizeFormatted: "512 KB",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+    ],
+    "C:/Users/damao/Projects": [
+      {
+        name: "webapp",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 1800000,
+        lastModifiedFormatted: formatDate(Date.now() - 1800000),
+      },
+      {
+        name: "scripts",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 43200000,
+        lastModifiedFormatted: formatDate(Date.now() - 43200000),
+      },
+    ],
+    "/Users/damao/Desktop": [
+      {
+        name: "Netcatty",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 300000,
+        lastModifiedFormatted: formatDate(Date.now() - 300000),
+      },
+      {
+        name: "notes.txt",
+        type: "file",
+        size: 2048,
+        sizeFormatted: "2 KB",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+      {
+        name: "screenshot.png",
+        type: "file",
+        size: 1048576,
+        sizeFormatted: "1 MB",
+        lastModified: Date.now() - 43200000,
+        lastModifiedFormatted: formatDate(Date.now() - 43200000),
+      },
+    ],
+    "/Users/damao/Desktop/Netcatty": [
+      {
+        name: "src",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 600000,
+        lastModifiedFormatted: formatDate(Date.now() - 600000),
+      },
+      {
+        name: "package.json",
+        type: "file",
+        size: 1536,
+        sizeFormatted: "1.5 KB",
+        lastModified: Date.now() - 3600000,
+        lastModifiedFormatted: formatDate(Date.now() - 3600000),
+      },
+      {
+        name: "README.md",
+        type: "file",
+        size: 4096,
+        sizeFormatted: "4 KB",
+        lastModified: Date.now() - 7200000,
+        lastModifiedFormatted: formatDate(Date.now() - 7200000),
+      },
+      {
+        name: "tsconfig.json",
+        type: "file",
+        size: 512,
+        sizeFormatted: "512 Bytes",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+    ],
+    "/Users/damao/Documents": [
+      {
+        name: "Work",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+      {
+        name: "Personal",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 172800000,
+        lastModifiedFormatted: formatDate(Date.now() - 172800000),
+      },
+      {
+        name: "report.pdf",
+        type: "file",
+        size: 2097152,
+        sizeFormatted: "2 MB",
+        lastModified: Date.now() - 259200000,
+        lastModifiedFormatted: formatDate(Date.now() - 259200000),
+      },
+    ],
+    "/Users/damao/Downloads": [
+      {
+        name: "installer.exe",
+        type: "file",
+        size: 52428800,
+        sizeFormatted: "50 MB",
+        lastModified: Date.now() - 3600000,
+        lastModifiedFormatted: formatDate(Date.now() - 3600000),
+      },
+      {
+        name: "archive.zip",
+        type: "file",
+        size: 10485760,
+        sizeFormatted: "10 MB",
+        lastModified: Date.now() - 7200000,
+        lastModifiedFormatted: formatDate(Date.now() - 7200000),
+      },
+      {
+        name: "document.pdf",
+        type: "file",
+        size: 524288,
+        sizeFormatted: "512 KB",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+    ],
+    "/Users/damao/Projects": [
+      {
+        name: "webapp",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 1800000,
+        lastModifiedFormatted: formatDate(Date.now() - 1800000),
+      },
+      {
+        name: "scripts",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 43200000,
+        lastModifiedFormatted: formatDate(Date.now() - 43200000),
+      },
+    ],
+  };
+  return mockData[normPath] || [];
+}

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

@@ -0,0 +1,63 @@
+import { SftpConnection, SftpFileEntry, SftpFilenameEncoding } from "../../../domain/models";
+
+export interface SftpPane {
+  id: string;
+  connection: SftpConnection | null;
+  files: SftpFileEntry[];
+  loading: boolean;
+  reconnecting: boolean;
+  error: string | null;
+  selectedFiles: Set<string>;
+  filter: string;
+  filenameEncoding: SftpFilenameEncoding;
+  showHiddenFiles: boolean;
+}
+
+// Multi-tab state for left and right sides
+export interface SftpSideTabs {
+  tabs: SftpPane[];
+  activeTabId: string | null;
+}
+
+// Constants for empty placeholder pane IDs
+export const EMPTY_LEFT_PANE_ID = "__empty_left__";
+export const EMPTY_RIGHT_PANE_ID = "__empty_right__";
+
+export const createEmptyPane = (
+  id?: string,
+  showHiddenFiles = false,
+): SftpPane => ({
+  id: id || crypto.randomUUID(),
+  connection: null,
+  files: [],
+  loading: false,
+  reconnecting: false,
+  error: null,
+  selectedFiles: new Set(),
+  filter: "",
+  filenameEncoding: "auto",
+  showHiddenFiles,
+});
+
+// File watch event types
+export interface FileWatchSyncedEvent {
+  watchId: string;
+  localPath: string;
+  remotePath: string;
+  bytesWritten: number;
+}
+
+export interface FileWatchErrorEvent {
+  watchId: string;
+  localPath: string;
+  remotePath: string;
+  error: string;
+}
+
+export interface SftpStateOptions {
+  onFileWatchSynced?: (event: FileWatchSyncedEvent) => void;
+  onFileWatchError?: (event: FileWatchErrorEvent) => void;
+  useCompressedUpload?: boolean;
+  defaultShowHiddenFiles?: boolean;
+  autoConnectLocalOnMount?: boolean;
+}

application/state/sftp/useSftpConnections.ts

@@ -0,0 +1,525 @@
+import { useCallback, useEffect, useRef } from "react";
+import type { MutableRefObject } from "react";
+import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
+import type { Host, Identity, SftpConnection, SftpFileEntry, SftpFilenameEncoding, SSHKey } from "../../../domain/models";
+import type { SftpPane } from "./types";
+import { useSftpDirectoryListing } from "./useSftpDirectoryListing";
+import { useSftpHostCredentials } from "./useSftpHostCredentials";
+import { buildCacheKey, getSharedRemoteHostCache, setSharedRemoteHostCache } from "./sharedRemoteHostCache";
+
+interface UseSftpConnectionsParams {
+  hosts: Host[];
+  keys: SSHKey[];
+  identities: Identity[];
+  leftTabsRef: MutableRefObject<{ tabs: SftpPane[]; activeTabId: string | null }>;
+  rightTabsRef: MutableRefObject<{ tabs: SftpPane[]; activeTabId: string | null }>;
+  leftTabs: { tabs: SftpPane[] };
+  rightTabs: { tabs: SftpPane[] };
+  leftPane: SftpPane;
+  rightPane: SftpPane;
+  setLeftTabs: React.Dispatch<React.SetStateAction<{ tabs: SftpPane[]; activeTabId: string | null }>>;
+  setRightTabs: React.Dispatch<React.SetStateAction<{ tabs: SftpPane[]; activeTabId: string | null }>>;
+  getActivePane: (side: "left" | "right") => SftpPane | null;
+  updateTab: (side: "left" | "right", tabId: string, updater: (prev: SftpPane) => SftpPane) => void;
+  navSeqRef: MutableRefObject<{ left: number; right: number }>;
+  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, showHiddenFiles?: boolean) => SftpPane;
+  autoConnectLocalOnMount?: boolean;
+}
+
+interface UseSftpConnectionsResult {
+  connect: (side: "left" | "right", host: Host | "local", options?: { forceNewTab?: boolean }) => Promise<void>;
+  disconnect: (side: "left" | "right") => Promise<void>;
+  listLocalFiles: (path: string) => Promise<SftpFileEntry[]>;
+  listRemoteFiles: (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => Promise<SftpFileEntry[]>;
+}
+
+export const useSftpConnections = ({
+  hosts,
+  keys,
+  identities,
+  leftTabsRef,
+  rightTabsRef,
+  leftTabs,
+  rightTabs: _rightTabs,
+  leftPane,
+  rightPane,
+  setLeftTabs,
+  setRightTabs,
+  getActivePane,
+  updateTab,
+  navSeqRef,
+  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", options?: { forceNewTab?: boolean }) => {
+      const setTabs = side === "left" ? setLeftTabs : setRightTabs;
+
+      let activeTabId: string | null = null;
+      const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
+
+      if (!sideTabs.activeTabId || options?.forceNewTab) {
+        const newPane = createEmptyPane();
+        activeTabId = newPane.id;
+        setTabs((prev) => ({
+          tabs: [...prev.tabs, newPane],
+          activeTabId: newPane.id,
+        }));
+      } else {
+        activeTabId = sideTabs.activeTabId;
+      }
+
+      if (!activeTabId) return;
+
+      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
+      // This ensures proper auto-detection works and respects host-level encoding settings
+      const filenameEncoding: SftpFilenameEncoding =
+        host === "local" ? "auto" : (host.sftpEncoding ?? "auto");
+
+      // 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) {
+            try {
+              await netcattyBridge.get()?.closeSftp(oldSftpId);
+            } catch {
+              // Ignore errors when closing stale SFTP sessions
+            }
+            sftpSessionsRef.current.delete(currentPane.connection.id);
+          }
+        }
+      }
+
+      if (host === "local") {
+        let homeDir = await netcattyBridge.get()?.getHomeDir?.();
+        if (!homeDir) {
+          const isWindows = navigator.platform.toLowerCase().includes("win");
+          homeDir = isWindows ? "C:\\Users\\damao" : "/Users/damao";
+        }
+
+        const connection: SftpConnection = {
+          id: connectionId,
+          hostId: "local",
+          hostLabel: "Local",
+          isLocal: true,
+          status: "connected",
+          currentPath: homeDir,
+          homeDir,
+        };
+
+        updateTab(side, activeTabId, (prev) => ({
+          ...prev,
+          connection,
+          loading: true,
+          reconnecting: false,
+          error: null,
+          filenameEncoding, // Reset encoding for new connection
+        }));
+
+        try {
+          const files = await listLocalFiles(homeDir);
+          if (navSeqRef.current[side] !== connectRequestId) return;
+          dirCacheRef.current.set(makeCacheKey(connectionId, homeDir, filenameEncoding), {
+            files,
+            timestamp: Date.now(),
+          });
+          reconnectingRef.current[side] = false;
+          updateTab(side, activeTabId, (prev) => ({
+            ...prev,
+            files,
+            loading: false,
+            reconnecting: false,
+          }));
+        } catch (err) {
+          if (navSeqRef.current[side] !== connectRequestId) return;
+          reconnectingRef.current[side] = false;
+          updateTab(side, activeTabId, (prev) => ({
+            ...prev,
+            error: err instanceof Error ? err.message : "Failed to list directory",
+            loading: false,
+            reconnecting: false,
+          }));
+        }
+      } 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: 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 : (sharedHostCache?.files ?? []),
+          filenameEncoding, // Reset encoding for new connection
+        }));
+
+        try {
+          const credentials = getHostCredentials(host);
+          const bridge = netcattyBridge.get();
+          const openSftp = bridge?.openSftp;
+          if (!openSftp) throw new Error("SFTP bridge unavailable");
+
+          const isAuthError = (err: unknown): boolean => {
+            if (!(err instanceof Error)) return false;
+            const msg = err.message.toLowerCase();
+            return (
+              msg.includes("authentication") ||
+              msg.includes("auth") ||
+              msg.includes("password") ||
+              msg.includes("permission denied")
+            );
+          };
+
+          const hasKey = !!credentials.privateKey;
+          const hasPassword = !!credentials.password;
+
+          let sftpId: string | undefined;
+          if (hasKey) {
+            try {
+              const keyFirstCredentials = {
+                sessionId: `sftp-${connectionId}`,
+                ...credentials,
+              };
+              if (!credentials.sudo) {
+                keyFirstCredentials.password = undefined;
+              }
+              sftpId = await openSftp(keyFirstCredentials);
+            } catch (err) {
+              if (hasPassword && isAuthError(err)) {
+                sftpId = await openSftp({
+                  sessionId: `sftp-${connectionId}`,
+                  ...credentials,
+                  privateKey: undefined,
+                  certificate: undefined,
+                  publicKey: undefined,
+                  keyId: undefined,
+                  keySource: undefined,
+                });
+              } else {
+                throw err;
+              }
+            }
+          } else {
+            sftpId = await openSftp({
+              sessionId: `sftp-${connectionId}`,
+              ...credentials,
+            });
+          }
+
+          if (!sftpId) throw new Error("Failed to open SFTP session");
+
+          sftpSessionsRef.current.set(connectionId, sftpId);
+
+          let startPath = sharedHostCache?.path ?? "/";
+          let homeDir = sharedHostCache?.homeDir ?? startPath;
+
+          if (!sharedHostCache) {
+            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) {
+                try {
+                  const stat = await statSftp(sftpId, candidate, filenameEncoding);
+                  if (stat?.type === "directory") {
+                    startPath = candidate;
+                    homeDir = candidate;
+                    break;
+                  }
+                } catch {
+                  // Ignore missing/permission errors
+                }
+              }
+            } else {
+              if (credentials.username === "root") {
+                try {
+                  const rootFiles = await netcattyBridge.get()?.listSftp(sftpId, "/root", filenameEncoding);
+                  if (rootFiles) {
+                    startPath = "/root";
+                    homeDir = "/root";
+                  }
+                } catch {
+                  // Fallback path not available
+                }
+              } else if (credentials.username) {
+                try {
+                  const homeFiles = await netcattyBridge.get()?.listSftp(
+                    sftpId,
+                    `/home/${credentials.username}`,
+                    filenameEncoding,
+                  );
+                  if (homeFiles) {
+                    startPath = `/home/${credentials.username}`;
+                    homeDir = startPath;
+                  }
+                } catch {
+                  // Fall through to /root check
+                }
+                if (startPath === "/") {
+                  try {
+                    const rootFiles = await netcattyBridge.get()?.listSftp(sftpId, "/root", filenameEncoding);
+                    if (rootFiles) {
+                      startPath = "/root";
+                      homeDir = "/root";
+                    }
+                  } catch {
+                    // Fallback path not available
+                  }
+                }
+              } else {
+                try {
+                  const rootFiles = await netcattyBridge.get()?.listSftp(sftpId, "/root", filenameEncoding);
+                  if (rootFiles) {
+                    startPath = "/root";
+                    homeDir = "/root";
+                  }
+                } catch {
+                  // Fallback path not available
+                }
+              }
+            }
+          }
+
+          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;
+
+          updateTab(side, activeTabId, (prev) => ({
+            ...prev,
+            connection: prev.connection
+              ? {
+                  ...prev.connection,
+                  status: "connected",
+                  currentPath: startPath,
+                  homeDir,
+                }
+              : null,
+            files,
+            loading: false,
+            reconnecting: false,
+          }));
+        } catch (err) {
+          if (navSeqRef.current[side] !== connectRequestId) return;
+          reconnectingRef.current[side] = false;
+          updateTab(side, activeTabId, (prev) => ({
+            ...prev,
+            connection: prev.connection
+              ? {
+                  ...prev.connection,
+                  status: "error",
+                  error: err instanceof Error ? err.message : "Connection failed",
+                }
+              : null,
+            error: err instanceof Error ? err.message : "Connection failed",
+            loading: false,
+            reconnecting: false,
+          }));
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      getHostCredentials,
+      getActivePane,
+      updateTab,
+      clearCacheForConnection,
+      createEmptyPane,
+      makeCacheKey,
+      listLocalFiles,
+      listRemoteFiles,
+    ],
+  );
+
+  const initialConnectDoneRef = useRef(false);
+
+  useEffect(() => {
+    if (
+      autoConnectLocalOnMount &&
+      !initialConnectDoneRef.current &&
+      leftTabs.tabs.length === 0
+    ) {
+      initialConnectDoneRef.current = true;
+      setTimeout(() => {
+        connect("left", "local");
+      }, 0);
+    }
+  }, [autoConnectLocalOnMount, connect, leftTabs.tabs.length]);
+
+  useEffect(() => {
+    const attemptReconnect = async (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 (leftPane.reconnecting && reconnectingRef.current.left) {
+      attemptReconnect("left");
+    }
+    if (rightPane.reconnecting && reconnectingRef.current.right) {
+      attemptReconnect("right");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [leftPane.reconnecting, rightPane.reconnecting, connect]);
+
+  const disconnect = useCallback(
+    async (side: "left" | "right") => {
+      const pane = getActivePane(side);
+      const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
+      const activeTabId = sideTabs.activeTabId;
+
+      if (!pane || !activeTabId) return;
+
+      navSeqRef.current[side] += 1;
+
+      if (pane.connection) {
+        clearCacheForConnection(pane.connection.id);
+      }
+
+      reconnectingRef.current[side] = false;
+      lastConnectedHostRef.current[side] = null;
+
+      if (pane.connection && !pane.connection.isLocal) {
+        const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+        if (sftpId) {
+          try {
+            await netcattyBridge.get()?.closeSftp(sftpId);
+          } catch {
+            // Ignore errors when closing SFTP session during disconnect
+          }
+          sftpSessionsRef.current.delete(pane.connection.id);
+        }
+      }
+
+      updateTab(side, activeTabId, () => createEmptyPane(activeTabId, pane.showHiddenFiles));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getActivePane, clearCacheForConnection, updateTab],
+  );
+
+  return {
+    connect,
+    disconnect,
+    listLocalFiles,
+    listRemoteFiles,
+  };
+};

application/state/sftp/useSftpDirectoryListing.ts

@@ -0,0 +1,63 @@
+import { useCallback } from "react";
+import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
+import type { SftpFileEntry, SftpFilenameEncoding } from "../../../domain/models";
+import { buildMockLocalFiles } from "./mockLocalFiles";
+import { formatFileSize, formatDate } from "./utils";
+
+export const useSftpDirectoryListing = () => {
+  const getMockLocalFiles = useCallback((path: string): SftpFileEntry[] => {
+    return buildMockLocalFiles(path);
+  }, []);
+
+  const listLocalFiles = useCallback(
+    async (path: string): Promise<SftpFileEntry[]> => {
+      const rawFiles = await netcattyBridge.get()?.listLocalDir?.(path);
+      if (!rawFiles) {
+        return getMockLocalFiles(path);
+      }
+
+      return rawFiles.map((f) => {
+        const size = parseInt(f.size) || 0;
+        const lastModified = new Date(f.lastModified).getTime();
+        return {
+          name: f.name,
+          type: f.type as "file" | "directory" | "symlink",
+          size,
+          sizeFormatted: formatFileSize(size),
+          lastModified,
+          lastModifiedFormatted: formatDate(lastModified),
+          linkTarget: f.linkTarget as "file" | "directory" | null | undefined,
+          hidden: f.hidden,
+        };
+      });
+    },
+    [getMockLocalFiles],
+  );
+
+  const listRemoteFiles = useCallback(
+    async (sftpId: string, path: string, encoding?: SftpFilenameEncoding): Promise<SftpFileEntry[]> => {
+      const rawFiles = await netcattyBridge.get()?.listSftp(sftpId, path, encoding);
+      if (!rawFiles) return [];
+
+      return rawFiles.map((f) => {
+        const size = parseInt(f.size) || 0;
+        const lastModified = new Date(f.lastModified).getTime();
+        return {
+          name: f.name,
+          type: f.type as "file" | "directory" | "symlink",
+          size,
+          sizeFormatted: formatFileSize(size),
+          lastModified,
+          lastModifiedFormatted: formatDate(lastModified),
+          linkTarget: f.linkTarget as "file" | "directory" | null | undefined,
+        };
+      });
+    },
+    [],
+  );
+
+  return {
+    listLocalFiles,
+    listRemoteFiles,
+  };
+};

application/state/sftp/useSftpExternalOperations.ts

@@ -0,0 +1,687 @@
+import React, { useCallback, useRef, useMemo } from "react";
+import { TransferTask, TransferStatus } from "../../../domain/models";
+import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
+import { logger } from "../../../lib/logger";
+import { SftpPane } from "./types";
+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>;
+  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;
+}
+
+interface SftpExternalOperationsResult {
+  readTextFile: (side: "left" | "right", filePath: string) => Promise<string>;
+  readBinaryFile: (side: "left" | "right", filePath: string) => Promise<ArrayBuffer>;
+  writeTextFile: (side: "left" | "right", filePath: string, content: string) => Promise<void>;
+  downloadToTempAndOpen: (
+    side: "left" | "right",
+    remotePath: string,
+    fileName: string,
+    appPath: string,
+    options?: { enableWatch?: boolean }
+  ) => Promise<{ localTempPath: string; watchId?: string }>;
+  activeFileWatchCountRef: React.MutableRefObject<number>;
+  uploadExternalFiles: (
+    side: "left" | "right",
+    dataTransfer: DataTransfer
+  ) => Promise<UploadResult[]>;
+  uploadExternalEntries: (
+    side: "left" | "right",
+    entries: DropEntry[],
+    options?: { targetPath?: string }
+  ) => Promise<UploadResult[]>;
+  cancelExternalUpload: () => Promise<void>;
+  selectApplication: () => Promise<{ path: string; name: string } | null>;
+}
+
+export const useSftpExternalOperations = (
+  params: UseSftpExternalOperationsParams
+): SftpExternalOperationsResult => {
+  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);
+      if (!pane?.connection) {
+        throw new Error("No connection available");
+      }
+
+      if (pane.connection.isLocal) {
+        const bridge = netcattyBridge.get();
+        if (bridge?.readLocalFile) {
+          const buffer = await bridge.readLocalFile(filePath);
+          return new TextDecoder().decode(buffer);
+        }
+        throw new Error("Local file reading not supported");
+      }
+
+      const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+      if (!sftpId) {
+        throw new Error("SFTP session not found");
+      }
+
+      const bridge = netcattyBridge.get();
+      if (!bridge) {
+        throw new Error("Bridge not available");
+      }
+
+      return await bridge.readSftp(sftpId, filePath, pane.filenameEncoding);
+    },
+    [getActivePane, sftpSessionsRef],
+  );
+
+  const readBinaryFile = useCallback(
+    async (side: "left" | "right", filePath: string): Promise<ArrayBuffer> => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) {
+        throw new Error("No connection available");
+      }
+
+      if (pane.connection.isLocal) {
+        const bridge = netcattyBridge.get();
+        if (bridge?.readLocalFile) {
+          return await bridge.readLocalFile(filePath);
+        }
+        throw new Error("Local file reading not supported");
+      }
+
+      const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+      if (!sftpId) {
+        throw new Error("SFTP session not found");
+      }
+
+      const bridge = netcattyBridge.get();
+      if (!bridge?.readSftpBinary) {
+        throw new Error("Binary file reading not supported");
+      }
+
+      return await bridge.readSftpBinary(sftpId, filePath, pane.filenameEncoding);
+    },
+    [getActivePane, sftpSessionsRef],
+  );
+
+  const writeTextFile = useCallback(
+    async (side: "left" | "right", filePath: string, content: string): Promise<void> => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) {
+        throw new Error("No connection available");
+      }
+
+      if (pane.connection.isLocal) {
+        const bridge = netcattyBridge.get();
+        if (bridge?.writeLocalFile) {
+          const data = new TextEncoder().encode(content);
+          await bridge.writeLocalFile(filePath, data.buffer);
+          return;
+        }
+        throw new Error("Local file writing not supported");
+      }
+
+      const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+      if (!sftpId) {
+        throw new Error("SFTP session not found");
+      }
+
+      const bridge = netcattyBridge.get();
+      if (!bridge) {
+        throw new Error("Bridge not available");
+      }
+
+      await bridge.writeSftp(sftpId, filePath, content, pane.filenameEncoding);
+    },
+    [getActivePane, sftpSessionsRef],
+  );
+
+  const downloadToTempAndOpen = useCallback(
+    async (
+      side: "left" | "right",
+      remotePath: string,
+      fileName: string,
+      appPath: string,
+      options?: { enableWatch?: boolean }
+    ): Promise<{ localTempPath: string; watchId?: string }> => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) {
+        throw new Error("No connection available");
+      }
+
+      const bridge = netcattyBridge.get();
+      if (!bridge?.downloadSftpToTemp || !bridge?.openWithApplication) {
+        throw new Error("System app opening not supported");
+      }
+
+      if (pane.connection.isLocal) {
+        await bridge.openWithApplication(remotePath, appPath);
+        return { localTempPath: remotePath };
+      }
+
+      const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+      if (!sftpId) {
+        throw new Error("SFTP session not found");
+      }
+
+      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 {
+          await bridge.registerTempFile(sftpId, localTempPath);
+        } catch (err) {
+          console.warn("[SFTP] Failed to register temp file for cleanup:", err);
+        }
+      }
+
+      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;
+      if (options?.enableWatch && bridge.startFileWatch) {
+        try {
+          const result = await bridge.startFileWatch(
+            localTempPath,
+            remotePath,
+            sftpId,
+            pane.filenameEncoding,
+          );
+          watchId = result.watchId;
+          activeFileWatchCountRef.current += 1;
+        } catch (err) {
+          console.warn("[SFTP] Failed to start file watch:", err);
+        }
+      }
+
+      return { localTempPath, watchId };
+    },
+    [getActivePane, sftpSessionsRef, addExternalUpload, updateExternalUpload, isTransferCancelled],
+  );
+
+  // Create upload callbacks that translate to TransferTask updates
+  const createUploadCallbacks = useCallback((
+    connectionId: string,
+    targetPath: string,
+    targetHostId?: string,
+    targetConnectionKey?: string,
+  ): UploadCallbacks => {
+    return {
+      onScanningStart: (taskId: string) => {
+        if (addExternalUpload) {
+          const scanningTask: TransferTask = {
+            id: taskId,
+            fileName: "Scanning files...",
+            sourcePath: "local",
+            targetPath,
+            sourceConnectionId: "external",
+            targetConnectionId: connectionId,
+            targetHostId,
+            targetConnectionKey,
+            direction: "upload",
+            status: "pending" as TransferStatus,
+            totalBytes: 0,
+            transferredBytes: 0,
+            speed: 0,
+            startTime: Date.now(),
+            isDirectory: true,
+          };
+          addExternalUpload(scanningTask);
+        }
+      },
+      onScanningEnd: (taskId: string) => {
+        if (dismissExternalUpload) {
+          dismissExternalUpload(taskId);
+        }
+      },
+      onTaskCreated: (task: UploadTaskInfo) => {
+        if (addExternalUpload) {
+          const transferTask: TransferTask = {
+            id: task.id,
+            fileName: task.displayName,
+            sourcePath: "local",
+            targetPath: joinPath(targetPath, task.fileName),
+            sourceConnectionId: "external",
+            targetConnectionId: connectionId,
+            targetHostId,
+            targetConnectionKey,
+            direction: "upload",
+            status: "transferring" as TransferStatus,
+            totalBytes: task.totalBytes,
+            transferredBytes: 0,
+            speed: 0,
+            startTime: Date.now(),
+            isDirectory: task.isDirectory,
+          };
+          addExternalUpload(transferTask);
+        }
+      },
+      onTaskProgress: (taskId: string, progress) => {
+        if (updateExternalUpload) {
+          updateExternalUpload(taskId, {
+            transferredBytes: progress.transferred,
+            speed: progress.speed,
+          });
+        }
+      },
+      onTaskCompleted: (taskId: string, totalBytes: number) => {
+        if (updateExternalUpload) {
+          updateExternalUpload(taskId, {
+            status: "completed" as TransferStatus,
+            endTime: Date.now(),
+            transferredBytes: totalBytes,
+            speed: 0,
+          });
+        }
+      },
+      onTaskFailed: (taskId: string, error: string) => {
+        if (updateExternalUpload) {
+          updateExternalUpload(taskId, {
+            status: "failed" as TransferStatus,
+            endTime: Date.now(),
+            error,
+            speed: 0,
+          });
+        }
+      },
+      onTaskCancelled: (taskId: string) => {
+        if (updateExternalUpload) {
+          updateExternalUpload(taskId, {
+            status: "cancelled" as TransferStatus,
+            endTime: Date.now(),
+            speed: 0,
+          });
+        }
+      },
+    };
+  }, [addExternalUpload, updateExternalUpload, dismissExternalUpload]);
+
+  // Create upload bridge that wraps netcattyBridge
+  const createUploadBridge = useMemo((): UploadBridge => {
+    const bridge = netcattyBridge.get();
+    return {
+      writeLocalFile: bridge?.writeLocalFile,
+      mkdirLocal: bridge?.mkdirLocal,
+      mkdirSftp: async (sftpId: string, path: string) => {
+        const b = netcattyBridge.get();
+        if (b?.mkdirSftp) {
+          await b.mkdirSftp(sftpId, path);
+        }
+      },
+      writeSftpBinary: bridge?.writeSftpBinary,
+      // Wrap writeSftpBinaryWithProgress to adapt UploadBridge interface to NetcattyBridge interface
+      // UploadBridge: (sftpId, path, data, taskId, onProgress, onComplete, onError)
+      // NetcattyBridge: (sftpId, path, content, transferId, encoding, onProgress, onComplete, onError)
+      writeSftpBinaryWithProgress: bridge?.writeSftpBinaryWithProgress
+        ? async (sftpId, path, data, taskId, onProgress, onComplete, onError) => {
+            const b = netcattyBridge.get();
+            if (!b?.writeSftpBinaryWithProgress) return undefined;
+            // Pass undefined for encoding to use session default, and forward callbacks
+            return b.writeSftpBinaryWithProgress(
+              sftpId,
+              path,
+              data,
+              taskId,
+              undefined, // encoding - use session default
+              onProgress,
+              onComplete,
+              onError
+            );
+          }
+        : undefined,
+      cancelSftpUpload: bridge?.cancelSftpUpload,
+      // Stream transfer for large files (avoids loading into memory)
+      startStreamTransfer: bridge?.startStreamTransfer
+        ? async (options, onProgress, onComplete, onError) => {
+            const b = netcattyBridge.get();
+            if (!b?.startStreamTransfer) {
+              return { transferId: options.transferId, error: 'Stream transfer not available' };
+            }
+            try {
+              const result = await b.startStreamTransfer(options, onProgress, onComplete, onError);
+              return result;
+            } catch (error) {
+              return {
+                transferId: options.transferId,
+                error: error instanceof Error ? error.message : String(error),
+              };
+            }
+          }
+        : undefined,
+      cancelTransfer: bridge?.cancelTransfer,
+    };
+  }, []);
+
+  const uploadExternalFiles = useCallback(
+    async (side: "left" | "right", dataTransfer: DataTransfer): 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");
+      }
+
+      // Create a new upload controller for this upload
+      const controller = new UploadController();
+      uploadControllerRef.current = controller;
+
+      const callbacks = createUploadCallbacks(
+        pane.connection.id,
+        pane.connection.currentPath,
+        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,
+            sftpId,
+            isLocal: pane.connection.isLocal,
+            bridge: createUploadBridge,
+            joinPath,
+            callbacks,
+            useCompressedUpload,
+          },
+          controller
+        );
+
+        await refresh(side);
+        return results;
+      } catch (error) {
+        logger.error("[SFTP] Upload failed:", error);
+        throw error;
+      } finally {
+        uploadControllerRef.current = null;
+      }
+    },
+    [
+      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");
+      }
+
+      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 current directory and invalidate the upload target's
+        // cache entry.  If the user navigated away during the upload, the
+        // invalidation ensures returning to the target path triggers a fresh
+        // listing instead of serving stale cached data.
+        const livePane = getActivePane(side);
+        if (livePane?.connection) {
+          if (livePane.connection.currentPath !== uploadTargetPath && clearDirCacheEntry) {
+            clearDirCacheEntry(livePane.connection.id, uploadTargetPath);
+          }
+          await refresh(side);
+        }
+        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 () => {
+    const controller = uploadControllerRef.current;
+    if (controller) {
+      logger.info("[SFTP] Cancelling external upload");
+      await controller.cancel();
+    }
+  }, []);
+
+  const selectApplication = useCallback(
+    async (): Promise<{ path: string; name: string } | null> => {
+      const bridge = netcattyBridge.get();
+      if (!bridge?.selectApplication) {
+        return null;
+      }
+      return await bridge.selectApplication();
+    },
+    [],
+  );
+
+  return {
+    readTextFile,
+    readBinaryFile,
+    writeTextFile,
+    downloadToTempAndOpen,
+    uploadExternalFiles,
+    uploadExternalEntries,
+    cancelExternalUpload,
+    selectApplication,
+    activeFileWatchCountRef,
+  };
+};

application/state/sftp/useSftpFileWatch.ts

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
+import type { FileWatchErrorEvent, FileWatchSyncedEvent, SftpStateOptions } from "./types";
+
+export const useSftpFileWatch = (options?: SftpStateOptions) => {
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.onFileWatchSynced || !bridge?.onFileWatchError) return;
+
+    const unsubscribeSynced = bridge.onFileWatchSynced((payload: FileWatchSyncedEvent) => {
+      options?.onFileWatchSynced?.(payload);
+    });
+
+    const unsubscribeError = bridge.onFileWatchError((payload: FileWatchErrorEvent) => {
+      options?.onFileWatchError?.(payload);
+    });
+
+    return () => {
+      try {
+        unsubscribeSynced?.();
+        unsubscribeError?.();
+      } catch {
+        // ignore cleanup errors
+      }
+    };
+  }, [options]);
+};

application/state/sftp/useSftpHostCredentials.ts

@@ -0,0 +1,76 @@
+import { useCallback } from "react";
+import type { Host, Identity, SSHKey } from "../../../domain/models";
+import { resolveHostAuth } from "../../../domain/sshAuth";
+
+interface UseSftpHostCredentialsParams {
+  hosts: Host[];
+  keys: SSHKey[];
+  identities: Identity[];
+}
+
+export const useSftpHostCredentials = ({
+  hosts,
+  keys,
+  identities,
+}: UseSftpHostCredentialsParams) =>
+  useCallback(
+    (host: Host): NetcattySSHOptions => {
+      const resolved = resolveHostAuth({ host, keys, identities });
+      const key = resolved.key || null;
+
+      const proxyConfig = host.proxyConfig
+        ? {
+          type: host.proxyConfig.type,
+          host: host.proxyConfig.host,
+          port: host.proxyConfig.port,
+          username: host.proxyConfig.username,
+          password: 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) => {
+            const jumpAuth = resolveHostAuth({
+              host: jumpHost,
+              keys,
+              identities,
+            });
+            const jumpKey = jumpAuth.key;
+            return {
+              hostname: jumpHost.hostname,
+              port: jumpHost.port || 22,
+              username: jumpAuth.username || "root",
+              password: jumpAuth.password,
+              privateKey: jumpKey?.privateKey,
+              certificate: jumpKey?.certificate,
+              passphrase: jumpAuth.passphrase || jumpKey?.passphrase,
+              publicKey: jumpKey?.publicKey,
+              keyId: jumpAuth.keyId,
+              keySource: jumpKey?.source,
+              label: jumpHost.label,
+            };
+          });
+      }
+
+      return {
+        hostname: host.hostname,
+        username: resolved.username,
+        port: host.port || 22,
+        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,
+      };
+    },
+    [hosts, identities, keys],
+  );

application/state/sftp/useSftpPaneActions.ts

@@ -0,0 +1,779 @@
+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 { buildCacheKey, setSharedRemoteHostCache } from "./sharedRemoteHostCache";
+
+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;
+  leftTabsRef: React.MutableRefObject<{ tabs: SftpPane[]; activeTabId: string | null }>;
+  rightTabsRef: React.MutableRefObject<{ tabs: SftpPane[]; activeTabId: string | null }>;
+  navSeqRef: React.MutableRefObject<{ left: number; right: number }>;
+  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;
+  listLocalFiles: (path: string) => Promise<SftpFileEntry[]>;
+  listRemoteFiles: (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => Promise<SftpFileEntry[]>;
+  handleSessionError: (side: "left" | "right", error: Error) => void;
+  isSessionError: (err: unknown) => boolean;
+  dirCacheTtlMs: number;
+}
+
+interface UseSftpPaneActionsResult {
+  navigateTo: (side: "left" | "right", path: string, options?: { force?: boolean }) => Promise<void>;
+  refresh: (side: "left" | "right") => 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;
+  rangeSelect: (side: "left" | "right", fileNames: string[]) => void;
+  clearSelection: (side: "left" | "right") => void;
+  selectAll: (side: "left" | "right") => void;
+  setFilter: (side: "left" | "right", filter: string) => void;
+  getFilteredFiles: (pane: SftpPane) => SftpFileEntry[];
+  createDirectory: (side: "left" | "right", name: string) => Promise<void>;
+  createFile: (side: "left" | "right", name: string) => Promise<void>;
+  deleteFiles: (side: "left" | "right", fileNames: string[]) => Promise<void>;
+  deleteFilesAtPath: (
+    side: "left" | "right",
+    connectionId: string,
+    path: string,
+    fileNames: string[],
+  ) => Promise<void>;
+  renameFile: (side: "left" | "right", oldName: string, newName: string) => Promise<void>;
+  changePermissions: (side: "left" | "right", filePath: string, mode: string) => Promise<void>;
+}
+
+export const useSftpPaneActions = ({
+  hosts,
+  getActivePane,
+  updateTab,
+  updateActiveTab,
+  leftTabsRef,
+  rightTabsRef,
+  navSeqRef,
+  dirCacheRef,
+  sftpSessionsRef,
+  lastConnectedHostRef,
+  connectionCacheKeyMapRef,
+  reconnectingRef,
+  makeCacheKey,
+  clearCacheForConnection,
+  listLocalFiles,
+  listRemoteFiles,
+  handleSessionError,
+  isSessionError,
+  dirCacheTtlMs,
+}: UseSftpPaneActionsParams): UseSftpPaneActionsResult => {
+  // 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 },
+    ) => {
+      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;
+
+      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");
+        return;
+      }
+
+      const connectionId = pane.connection.id;
+      const requestId = ++navSeqRef.current[side];
+      const cacheKey = makeCacheKey(connectionId, path, pane.filenameEncoding);
+      const cached = options?.force
+        ? undefined
+        : dirCacheRef.current.get(cacheKey);
+
+      if (
+        cached &&
+        Date.now() - cached.timestamp < dirCacheTtlMs &&
+        cached.files
+      ) {
+        console.log("[SFTP navigateTo] Using cached files for path", { path, cacheKey });
+        tabNavSeqRef.current.set(activeTabId, requestId);
+        lastConfirmedRef.current.set(activeTabId, {
+          connectionId,
+          path,
+          files: cached.files,
+          selectedFiles: new Set(),
+        });
+        updateTab(side, activeTabId, (prev) => ({
+          ...prev,
+          connection: prev.connection
+            ? { ...prev.connection, currentPath: path }
+            : null,
+          files: cached.files,
+          loading: false,
+          error: null,
+          selectedFiles: new 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 });
+      // 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(activeTabId);
+      if (!existing || existing.connectionId !== connectionId || !pane.loading) {
+        lastConfirmedRef.current.set(activeTabId, {
+          connectionId,
+          path: pane.connection.currentPath,
+          files: pane.files,
+          selectedFiles: pane.selectedFiles,
+        });
+      }
+      const confirmed = lastConfirmedRef.current.get(activeTabId)!;
+      const previousPath = confirmed.path;
+      const previousFiles = confirmed.files;
+      const previousSelection = confirmed.selectedFiles;
+      tabNavSeqRef.current.set(activeTabId, 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, activeTabId, (prev) => ({
+        ...prev,
+        connection: prev.connection
+          ? { ...prev.connection, currentPath: path }
+          : null,
+        selectedFiles: new Set(),
+        loading: true,
+        error: null,
+      }));
+
+      try {
+        let files: SftpFileEntry[];
+
+        if (pane.connection.isLocal) {
+          files = await listLocalFiles(path);
+        } else {
+          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: "",
+            }));
+            return;
+          }
+
+          try {
+            files = await listRemoteFiles(sftpId, path, pane.filenameEncoding);
+          } catch (err) {
+            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: "",
+              }));
+              return;
+            }
+            throw err as Error;
+          }
+        }
+
+        if (navSeqRef.current[side] !== requestId) {
+          // Another navigation on this side superseded this request.
+          // Only restore if no newer navigation has occurred on this specific tab
+          // AND the tab still belongs to the same connection (connect/disconnect
+          // bump navSeqRef but not tabNavSeqRef).
+          if (tabNavSeqRef.current.get(activeTabId) !== requestId) {
+            return;
+          }
+          updateTab(side, activeTabId, (prev) => {
+            if (prev.connection?.id !== connectionId) {
+              // Tab was reconnected or disconnected; don't restore stale state.
+              return prev;
+            }
+            return {
+              ...prev,
+              connection: { ...prev.connection, currentPath: previousPath },
+              files: previousFiles,
+              selectedFiles: previousSelection,
+              loading: false,
+            };
+          });
+          return;
+        }
+
+        dirCacheRef.current.set(cacheKey, {
+          files,
+          timestamp: Date.now(),
+        });
+
+        lastConfirmedRef.current.set(activeTabId, {
+          connectionId,
+          path,
+          files,
+          selectedFiles: new Set(),
+        });
+
+        updateTab(side, activeTabId, (prev) => ({
+          ...prev,
+          connection: prev.connection
+            ? { ...prev.connection, currentPath: path }
+            : null,
+          files,
+          loading: false,
+          selectedFiles: new 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) {
+          if (tabNavSeqRef.current.get(activeTabId) !== requestId) {
+            return;
+          }
+          updateTab(side, activeTabId, (prev) => {
+            if (prev.connection?.id !== connectionId) {
+              return prev;
+            }
+            return {
+              ...prev,
+              connection: { ...prev.connection, currentPath: previousPath },
+              files: previousFiles,
+              selectedFiles: previousSelection,
+              loading: false,
+            };
+          });
+          return;
+        }
+        updateTab(side, activeTabId, (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,
+      navSeqRef,
+      dirCacheRef,
+      makeCacheKey,
+      dirCacheTtlMs,
+      listLocalFiles,
+      listRemoteFiles,
+      sftpSessionsRef,
+      clearCacheForConnection,
+      isSessionError,
+    ],
+  );
+
+  const refresh = useCallback(
+    async (side: "left" | "right") => {
+      const pane = getActivePane(side);
+      if (pane?.connection) {
+        await navigateTo(side, pane.connection.currentPath, { force: true });
+      } else if (!pane?.connection && pane?.error) {
+        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",
+          }));
+        }
+      }
+    },
+    [getActivePane, navigateTo, updateActiveTab, lastConnectedHostRef, reconnectingRef],
+  );
+
+  const navigateUp = useCallback(
+    async (side: "left" | "right") => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+
+      const currentPath = pane.connection.currentPath;
+      const isAtRoot = currentPath === "/" || isWindowsRoot(currentPath);
+
+      if (!isAtRoot) {
+        const parentPath = getParentPath(currentPath);
+        await navigateTo(side, parentPath);
+      }
+    },
+    [getActivePane, navigateTo],
+  );
+
+  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);
+      }
+    },
+    [getActivePane, navigateTo],
+  );
+
+  const toggleSelection = useCallback(
+    (side: "left" | "right", fileName: string, multiSelect: boolean) => {
+      updateActiveTab(side, (prev) => {
+        const newSelection = new Set(multiSelect ? prev.selectedFiles : []);
+        if (newSelection.has(fileName)) {
+          newSelection.delete(fileName);
+        } else {
+          newSelection.add(fileName);
+        }
+        return { ...prev, selectedFiles: newSelection };
+      });
+    },
+    [updateActiveTab],
+  );
+
+  const rangeSelect = useCallback(
+    (side: "left" | "right", fileNames: string[]) => {
+      const newSelection = new Set<string>();
+      for (const name of fileNames) {
+        if (name && name !== "..") {
+          newSelection.add(name);
+        }
+      }
+
+      updateActiveTab(side, (prev) => ({ ...prev, selectedFiles: newSelection }));
+    },
+    [updateActiveTab],
+  );
+
+  const clearSelection = useCallback((side: "left" | "right") => {
+    updateActiveTab(side, (prev) => ({ ...prev, selectedFiles: new Set() }));
+  }, [updateActiveTab]);
+
+  const selectAll = useCallback(
+    (side: "left" | "right") => {
+      const pane = getActivePane(side);
+      if (!pane) return;
+
+      updateActiveTab(side, (prev) => ({
+        ...prev,
+        selectedFiles: new Set(
+          pane.files.filter((f) => f.name !== "..").map((f) => f.name),
+        ),
+      }));
+    },
+    [getActivePane, updateActiveTab],
+  );
+
+  const setFilter = useCallback((side: "left" | "right", filter: string) => {
+    updateActiveTab(side, (prev) => ({ ...prev, filter }));
+  }, [updateActiveTab]);
+
+  const getFilteredFiles = useCallback((pane: SftpPane): SftpFileEntry[] => {
+    const term = pane.filter.trim().toLowerCase();
+    if (!term) return pane.files;
+    return pane.files.filter(
+      (f) => f.name === ".." || f.name.toLowerCase().includes(term),
+    );
+  }, []);
+
+  const createDirectory = useCallback(
+    async (side: "left" | "right", name: string) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+
+      const fullPath = joinPath(pane.connection.currentPath, name);
+
+      try {
+        if (pane.connection.isLocal) {
+          await netcattyBridge.get()?.mkdirLocal?.(fullPath);
+        } else {
+          const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+          if (!sftpId) {
+            handleSessionError(side, new Error("SFTP session not found"));
+            return;
+          }
+          await netcattyBridge.get()?.mkdirSftp(sftpId, fullPath, pane.filenameEncoding);
+        }
+        await refresh(side);
+      } catch (err) {
+        if (isSessionError(err)) {
+          handleSessionError(side, err as Error);
+          return;
+        }
+        throw err;
+      }
+    },
+    [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
+  );
+
+  const createFile = useCallback(
+    async (side: "left" | "right", name: string) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+
+      const fullPath = joinPath(pane.connection.currentPath, name);
+
+      try {
+        if (pane.connection.isLocal) {
+          const bridge = netcattyBridge.get();
+          if (bridge?.writeLocalFile) {
+            const emptyBuffer = new ArrayBuffer(0);
+            await bridge.writeLocalFile(fullPath, emptyBuffer);
+          } else {
+            throw new Error("Local file writing not supported");
+          }
+        } else {
+          const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+          if (!sftpId) {
+            handleSessionError(side, new Error("SFTP session not found"));
+            return;
+          }
+          const bridge = netcattyBridge.get();
+          if (bridge?.writeSftpBinary) {
+            const emptyBuffer = new ArrayBuffer(0);
+            await bridge.writeSftpBinary(sftpId, fullPath, emptyBuffer, pane.filenameEncoding);
+          } else if (bridge?.writeSftp) {
+            await bridge.writeSftp(sftpId, fullPath, "", pane.filenameEncoding);
+          } else {
+            throw new Error("No write method available");
+          }
+        }
+        await refresh(side);
+      } catch (err) {
+        if (isSessionError(err)) {
+          handleSessionError(side, err as Error);
+          return;
+        }
+        throw err;
+      }
+    },
+    [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
+  );
+
+  const deleteFiles = useCallback(
+    async (side: "left" | "right", fileNames: string[]) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+
+      try {
+        for (const name of fileNames) {
+          const fullPath = joinPath(pane.connection.currentPath, name);
+
+          if (pane.connection.isLocal) {
+            await netcattyBridge.get()?.deleteLocalFile?.(fullPath);
+          } else {
+            const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+            if (!sftpId) {
+              handleSessionError(side, new Error("SFTP session not found"));
+              return;
+            }
+            await netcattyBridge.get()?.deleteSftp?.(sftpId, fullPath, pane.filenameEncoding);
+          }
+        }
+        await refresh(side);
+      } catch (err) {
+        if (isSessionError(err)) {
+          handleSessionError(side, err as Error);
+          return;
+        }
+        throw err;
+      }
+    },
+    [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
+  );
+
+  const deleteFilesAtPath = useCallback(
+    async (
+      side: "left" | "right",
+      connectionId: string,
+      path: string,
+      fileNames: string[],
+    ) => {
+      const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
+      const pane = sideTabs.tabs.find((tab) => tab.connection?.id === connectionId);
+      if (!pane?.connection) {
+        throw new Error("Source pane is no longer available");
+      }
+      const bridge = netcattyBridge.get();
+      if (!bridge) {
+        throw new Error("Netcatty bridge not available");
+      }
+
+      try {
+        for (const name of fileNames) {
+          const fullPath = joinPath(path, name);
+
+          if (pane.connection.isLocal) {
+            if (!bridge.deleteLocalFile) {
+              throw new Error("Local delete unavailable");
+            }
+            await bridge.deleteLocalFile(fullPath);
+          } else {
+            const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+            if (!sftpId) {
+              const error = new Error("SFTP session not found");
+              handleSessionError(side, error);
+              throw error;
+            }
+            if (!bridge.deleteSftp) {
+              throw new Error("SFTP delete unavailable");
+            }
+            await bridge.deleteSftp(sftpId, fullPath, pane.filenameEncoding);
+          }
+        }
+
+        clearCacheForConnection(pane.connection.id);
+
+        if (sideTabs.activeTabId === pane.id && pane.connection.currentPath === path) {
+          await refresh(side);
+        } else {
+          updateTab(side, pane.id, (prev) => {
+            if (!prev.connection || prev.connection.id !== connectionId) return prev;
+            if (prev.connection.currentPath !== path) return prev;
+
+            const removeSet = new Set(fileNames);
+            const filteredFiles = prev.files.filter((file) => !removeSet.has(file.name));
+            const nextSelection = new Set(prev.selectedFiles);
+            for (const name of fileNames) {
+              nextSelection.delete(name);
+            }
+            return {
+              ...prev,
+              files: filteredFiles,
+              selectedFiles: nextSelection,
+            };
+          });
+        }
+      } catch (err) {
+        if (isSessionError(err)) {
+          handleSessionError(side, err as Error);
+          throw err;
+        }
+        throw err;
+      }
+    },
+    [
+      clearCacheForConnection,
+      handleSessionError,
+      isSessionError,
+      leftTabsRef,
+      refresh,
+      rightTabsRef,
+      sftpSessionsRef,
+      updateTab,
+    ],
+  );
+
+  const renameFile = useCallback(
+    async (side: "left" | "right", oldName: string, newName: string) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+
+      const oldPath = joinPath(pane.connection.currentPath, oldName);
+      const newPath = joinPath(pane.connection.currentPath, 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);
+        }
+        await refresh(side);
+      } catch (err) {
+        if (isSessionError(err)) {
+          handleSessionError(side, err as Error);
+          return;
+        }
+        throw err;
+      }
+    },
+    [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
+  );
+
+  const changePermissions = useCallback(
+    async (
+      side: "left" | "right",
+      filePath: string,
+      mode: string,
+    ) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection || pane.connection.isLocal) {
+        logger.warn("Cannot change permissions on local files");
+        return;
+      }
+
+      const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+      if (!sftpId || !netcattyBridge.get()?.chmodSftp) {
+        handleSessionError(side, new Error("SFTP session not found"));
+        return;
+      }
+
+      try {
+        await netcattyBridge.get()!.chmodSftp!(sftpId, filePath, mode, pane.filenameEncoding);
+        await refresh(side);
+      } catch (err) {
+        if (isSessionError(err)) {
+          handleSessionError(side, err as Error);
+          return;
+        }
+        logger.error("Failed to change permissions:", err);
+      }
+    },
+    [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
+  );
+
+  return {
+    navigateTo,
+    refresh,
+    navigateUp,
+    openEntry,
+    toggleSelection,
+    rangeSelect,
+    clearSelection,
+    selectAll,
+    setFilter,
+    getFilteredFiles,
+    createDirectory,
+    createFile,
+    deleteFiles,
+    deleteFilesAtPath,
+    renameFile,
+    changePermissions,
+  };
+};

application/state/sftp/useSftpSessionCleanup.ts

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import type { MutableRefObject } from "react";
+import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
+
+export const useSftpSessionCleanup = (sftpSessionsRef: MutableRefObject<Map<string, string>>) => {
+  useEffect(() => {
+    const sessionsRef = sftpSessionsRef.current;
+
+    return () => {
+      sessionsRef.forEach(async (sftpId) => {
+        try {
+          await netcattyBridge.get()?.closeSftp(sftpId);
+        } catch {
+          // Ignore errors when closing SFTP sessions during cleanup
+        }
+      });
+    };
+  }, [sftpSessionsRef]);
+};

application/state/sftp/useSftpSessionErrors.ts

@@ -0,0 +1,78 @@
+import { useCallback } from "react";
+import type { MutableRefObject } from "react";
+import type { Host } from "../../../domain/models";
+import type { SftpPane } from "./types";
+
+interface UseSftpSessionErrorsParams {
+  getActivePane: (side: "left" | "right") => SftpPane | null;
+  leftTabsRef: MutableRefObject<{ tabs: SftpPane[]; activeTabId: string | null }>;
+  rightTabsRef: MutableRefObject<{ tabs: SftpPane[]; activeTabId: string | null }>;
+  updateActiveTab: (
+    side: "left" | "right",
+    updater: (prev: SftpPane) => SftpPane,
+  ) => void;
+  sftpSessionsRef: MutableRefObject<Map<string, string>>;
+  clearCacheForConnection: (connectionId: string) => void;
+  navSeqRef: MutableRefObject<{ left: number; right: number }>;
+  lastConnectedHostRef: MutableRefObject<{ left: Host | "local" | null; right: Host | "local" | null }>;
+  reconnectingRef: MutableRefObject<{ left: boolean; right: boolean }>;
+}
+
+export const useSftpSessionErrors = ({
+  getActivePane,
+  leftTabsRef,
+  rightTabsRef,
+  updateActiveTab,
+  sftpSessionsRef,
+  clearCacheForConnection,
+  navSeqRef,
+  lastConnectedHostRef,
+  reconnectingRef,
+}: UseSftpSessionErrorsParams) =>
+  useCallback(
+    (side: "left" | "right", _error: Error) => {
+      const pane = getActivePane(side);
+      const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
+
+      if (!pane || !sideTabs.activeTabId) return;
+
+      if (pane.connection) {
+        sftpSessionsRef.current.delete(pane.connection.id);
+        clearCacheForConnection(pane.connection.id);
+      }
+
+      navSeqRef.current[side] += 1;
+
+      const lastHost = lastConnectedHostRef.current[side];
+      if (lastHost && pane.files.length > 0 && !reconnectingRef.current[side]) {
+        reconnectingRef.current[side] = true;
+        updateActiveTab(side, (prev) => ({
+          ...prev,
+          reconnecting: true,
+          error: "sftp.error.connectionLostReconnecting",
+        }));
+      } else {
+        updateActiveTab(side, (prev) => ({
+          ...prev,
+          connection: null,
+          files: [],
+          loading: false,
+          reconnecting: false,
+          error: "sftp.error.sessionLost",
+          selectedFiles: new Set(),
+          filter: "",
+        }));
+      }
+    },
+    [
+      getActivePane,
+      leftTabsRef,
+      rightTabsRef,
+      updateActiveTab,
+      sftpSessionsRef,
+      clearCacheForConnection,
+      navSeqRef,
+      lastConnectedHostRef,
+      reconnectingRef,
+    ],
+  );

application/state/sftp/useSftpTabsState.ts

@@ -0,0 +1,270 @@
+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 {
+  leftTabs: SftpSideTabs;
+  rightTabs: SftpSideTabs;
+  leftTabsRef: React.MutableRefObject<SftpSideTabs>;
+  rightTabsRef: React.MutableRefObject<SftpSideTabs>;
+  setLeftTabs: React.Dispatch<React.SetStateAction<SftpSideTabs>>;
+  setRightTabs: React.Dispatch<React.SetStateAction<SftpSideTabs>>;
+  leftPane: SftpPane;
+  rightPane: SftpPane;
+  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;
+  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;
+  reorderTabs: (
+    side: "left" | "right",
+    draggedId: string,
+    targetId: string,
+    position: "before" | "after",
+  ) => void;
+  moveTabToOtherSide: (fromSide: "left" | "right", tabId: string) => void;
+  getTabsInfo: (side: "left" | "right") => Array<{
+    id: string;
+    label: string;
+    isLocal: boolean;
+    hostId: string | null;
+  }>;
+  getActiveTabId: (side: "left" | "right") => string | null;
+}
+
+export const useSftpTabsState = ({
+  defaultShowHiddenFiles = false,
+}: {
+  defaultShowHiddenFiles?: boolean;
+} = {}): SftpTabsState => {
+  const [leftTabs, setLeftTabs] = useState<SftpSideTabs>({
+    tabs: [],
+    activeTabId: null,
+  });
+  const [rightTabs, setRightTabs] = useState<SftpSideTabs>({
+    tabs: [],
+    activeTabId: null,
+  });
+
+  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;
+    if (!sideTabs.activeTabId) return null;
+    return sideTabs.tabs.find((t) => t.id === sideTabs.activeTabId) || null;
+  }, []);
+
+  const leftPane = useMemo(() => {
+    const pane = leftTabs.activeTabId
+      ? leftTabs.tabs.find((t) => t.id === leftTabs.activeTabId)
+      : null;
+    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, defaultShowHiddenFilesRef.current);
+  }, [rightTabs]);
+
+  const updateTab = useCallback(
+    (side: "left" | "right", tabId: string, updater: (pane: SftpPane) => SftpPane) => {
+      const setTabs = side === "left" ? setLeftTabs : setRightTabs;
+      setTabs((prev) => ({
+        ...prev,
+        tabs: prev.tabs.map((t) => (t.id === tabId ? updater(t) : t)),
+      }));
+    },
+    [],
+  );
+
+  const updateActiveTab = useCallback(
+    (side: "left" | "right", updater: (pane: SftpPane) => SftpPane) => {
+      const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
+      if (!sideTabs.activeTabId) return;
+      updateTab(side, sideTabs.activeTabId, updater);
+    },
+    [updateTab],
+  );
+
+  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(undefined, defaultShowHiddenFilesRef.current);
+      const setTabs = side === "left" ? setLeftTabs : setRightTabs;
+      setTabs((prev) => ({
+        tabs: [...prev.tabs, newPane],
+        activeTabId: newPane.id,
+      }));
+      return newPane.id;
+    },
+    [],
+  );
+
+  const closeTab = useCallback(
+    (side: "left" | "right", tabId: string) => {
+      const setTabs = side === "left" ? setLeftTabs : setRightTabs;
+      setTabs((prev) => {
+        const tabIndex = prev.tabs.findIndex((t) => t.id === tabId);
+        if (tabIndex === -1) return prev;
+
+        let newActiveTabId: string | null = null;
+        if (prev.tabs.length > 1) {
+          if (prev.activeTabId === tabId) {
+            const nextIndex = tabIndex < prev.tabs.length - 1 ? tabIndex + 1 : tabIndex - 1;
+            newActiveTabId = prev.tabs[nextIndex]?.id || null;
+          } else {
+            newActiveTabId = prev.activeTabId;
+          }
+        }
+
+        return {
+          tabs: prev.tabs.filter((t) => t.id !== tabId),
+          activeTabId: newActiveTabId,
+        };
+      });
+    },
+    [],
+  );
+
+  const selectTab = useCallback(
+    (side: "left" | "right", tabId: string) => {
+      const setTabs = side === "left" ? setLeftTabs : setRightTabs;
+      setTabs((prev) => ({
+        ...prev,
+        activeTabId: tabId,
+      }));
+    },
+    [],
+  );
+
+  const reorderTabs = useCallback(
+    (
+      side: "left" | "right",
+      draggedId: string,
+      targetId: string,
+      position: "before" | "after",
+    ) => {
+      const setTabs = side === "left" ? setLeftTabs : setRightTabs;
+      setTabs((prev) => {
+        const tabs = [...prev.tabs];
+        const draggedIndex = tabs.findIndex((t) => t.id === draggedId);
+        const targetIndex = tabs.findIndex((t) => t.id === targetId);
+
+        if (draggedIndex === -1 || targetIndex === -1) return prev;
+
+        const [draggedTab] = tabs.splice(draggedIndex, 1);
+        const insertIndex = position === "before" ? targetIndex : targetIndex + 1;
+        const adjustedIndex = draggedIndex < targetIndex ? insertIndex - 1 : insertIndex;
+        tabs.splice(adjustedIndex, 0, draggedTab);
+
+        return { ...prev, tabs };
+      });
+    },
+    [],
+  );
+
+  const moveTabToOtherSide = useCallback(
+    (fromSide: "left" | "right", tabId: string) => {
+      const sourceTabs = fromSide === "left" ? leftTabsRef.current : rightTabsRef.current;
+      const setSourceTabs = fromSide === "left" ? setLeftTabs : setRightTabs;
+      const setTargetTabs = fromSide === "left" ? setRightTabs : setLeftTabs;
+
+      const tabToMove = sourceTabs.tabs.find((t) => t.id === tabId);
+      if (!tabToMove) return;
+
+      logger.info("[SFTP] Moving tab to other side", {
+        fromSide,
+        toSide: fromSide === "left" ? "right" : "left",
+        tabId,
+        hostLabel: tabToMove.connection?.hostLabel,
+      });
+
+      setSourceTabs((prev) => {
+        const newTabs = prev.tabs.filter((t) => t.id !== tabId);
+        let newActiveTabId: string | null = null;
+        if (newTabs.length > 0) {
+          if (prev.activeTabId === tabId) {
+            newActiveTabId = newTabs[0].id;
+          } else {
+            newActiveTabId = prev.activeTabId;
+          }
+        }
+        return { tabs: newTabs, activeTabId: newActiveTabId };
+      });
+
+      setTargetTabs((prev) => ({
+        tabs: [...prev.tabs, tabToMove],
+        activeTabId: tabToMove.id,
+      }));
+    },
+    [],
+  );
+
+  const DEFAULT_TAB_LABEL = "New Tab";
+
+  const getTabsInfo = useCallback(
+    (side: "left" | "right") => {
+      const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
+      return sideTabs.tabs.map((pane) => ({
+        id: pane.id,
+        label: pane.connection?.hostLabel || DEFAULT_TAB_LABEL,
+        isLocal: pane.connection?.isLocal || false,
+        hostId: pane.connection?.hostId || null,
+      }));
+    },
+    [],
+  );
+
+  const getActiveTabId = useCallback(
+    (side: "left" | "right") => {
+      const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
+      return sideTabs.activeTabId;
+    },
+    [],
+  );
+
+  return {
+    leftTabs,
+    rightTabs,
+    leftTabsRef,
+    rightTabsRef,
+    setLeftTabs,
+    setRightTabs,
+    leftPane,
+    rightPane,
+    getActivePane,
+    updateTab,
+    updateActiveTab,
+    setTabShowHiddenFiles,
+    addTab,
+    closeTab,
+    selectTab,
+    reorderTabs,
+    moveTabToOtherSide,
+    getTabsInfo,
+    getActiveTabId,
+  };
+};

application/state/sftp/utils.ts

@@ -0,0 +1,90 @@
+import { SftpFileEntry } from "../../../domain/models";
+
+export const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return "--";
+  const units = ["Bytes", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  const size = bytes / Math.pow(1024, i);
+  return `${size.toFixed(i === 0 ? 0 : 2)} ${units[i]}`;
+};
+
+export const formatDate = (timestamp: number): string => {
+  if (!timestamp) return "--";
+  const date = new Date(timestamp);
+  if (isNaN(date.getTime())) return "--";
+  const pad = (n: number) => n.toString().padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+};
+
+export const getFileExtension = (name: string): string => {
+  if (name === "..") return "folder";
+  const ext = name.split(".").pop()?.toLowerCase();
+  return ext || "file";
+};
+
+// Check if an entry is navigable like a directory (directories or symlinks pointing to directories)
+export const isNavigableDirectory = (entry: SftpFileEntry): boolean => {
+  return entry.type === "directory" || (entry.type === "symlink" && entry.linkTarget === "directory");
+};
+
+// Check if path is Windows-style
+export const isWindowsPath = (path: string): boolean => /^[A-Za-z]:/.test(path);
+
+const normalizeWindowsRoot = (path: string): string => {
+  const normalized = path.replace(/\//g, "\\");
+  if (/^[A-Za-z]:\\$/.test(normalized)) return normalized;
+  if (/^[A-Za-z]:$/.test(normalized)) return `${normalized}\\`;
+  return normalized;
+};
+
+export const isWindowsRoot = (path: string): boolean => {
+  if (!isWindowsPath(path)) return false;
+  return /^[A-Za-z]:\\?$/.test(path.replace(/\//g, "\\"));
+};
+
+export const joinPath = (base: string, name: string): string => {
+  if (isWindowsPath(base)) {
+    const normalizedBase = normalizeWindowsRoot(base).replace(/[\\/]+$/, "");
+    return `${normalizedBase}\\${name}`;
+  }
+  if (base === "/") return `/${name}`;
+  return `${base}/${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;
+};
+
+export const getFileName = (path: string): string => {
+  const parts = path.split(/[\\/]/).filter(Boolean);
+  return parts[parts.length - 1] || "";
+};

application/state/uiFontStore.ts

@@ -0,0 +1,207 @@
+import { useSyncExternalStore } from 'react';
+import { UI_FONTS, withUiCjkFallback, type UIFont } from '../../infrastructure/config/uiFonts';
+
+/**
+ * UI Font Store - singleton pattern using useSyncExternalStore
+ * Fetches system fonts and combines with bundled fonts
+ */
+type Listener = () => void;
+
+interface UIFontStoreState {
+  availableFonts: UIFont[];
+  isLoading: boolean;
+  isLoaded: boolean;
+  error: string | null;
+}
+
+/**
+ * Type definition for Local Font Access API
+ */
+interface LocalFontData {
+  family: string;
+}
+
+class UIFontStore {
+  private state: UIFontStoreState = {
+    availableFonts: UI_FONTS,
+    isLoading: false,
+    isLoaded: false,
+    error: null,
+  };
+  private listeners = new Set<Listener>();
+
+  getAvailableFonts = (): UIFont[] => this.state.availableFonts;
+  getIsLoading = (): boolean => this.state.isLoading;
+  getIsLoaded = (): boolean => this.state.isLoaded;
+
+  private notify = () => {
+    Promise.resolve().then(() => {
+      this.listeners.forEach(listener => listener());
+    });
+  };
+
+  private setState = (partial: Partial<UIFontStoreState>) => {
+    this.state = { ...this.state, ...partial };
+    this.notify();
+  };
+
+  subscribe = (listener: Listener): (() => void) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+
+  initialize = async (): Promise<void> => {
+    if (this.state.isLoaded || this.state.isLoading) {
+      return;
+    }
+
+    this.setState({ isLoading: true, error: null });
+
+    try {
+      const localFonts = await this.getLocalFonts();
+
+      // Use a Map to deduplicate by normalized font name
+      const fontMap = new Map<string, UIFont>();
+
+      // Add bundled fonts first (they have priority)
+      UI_FONTS.forEach(font => fontMap.set(font.id, font));
+
+      // Add local fonts with a distinct ID namespace
+      localFonts.forEach(font => {
+        const localId = `local-${font.id}`;
+        // Skip if a bundled font with similar name exists
+        if (!fontMap.has(font.id)) {
+          fontMap.set(localId, { ...font, id: localId });
+        }
+      });
+
+      this.setState({
+        availableFonts: Array.from(fontMap.values()),
+        isLoading: false,
+        isLoaded: true,
+      });
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to load local fonts';
+      console.warn('Failed to fetch local UI fonts, using defaults:', error);
+      this.setState({
+        availableFonts: UI_FONTS,
+        isLoading: false,
+        isLoaded: true,
+        error: errorMessage,
+      });
+    }
+  };
+
+  private async getLocalFonts(): Promise<UIFont[]> {
+    if (typeof window === 'undefined' || !('queryLocalFonts' in window)) {
+      return [];
+    }
+
+    try {
+      const queryLocalFonts = (window as unknown as { queryLocalFonts: () => Promise<LocalFontData[]> }).queryLocalFonts;
+      const fonts = await queryLocalFonts();
+
+      // Deduplicate by family name
+      const uniqueFamilies = new Set<string>();
+      const dedupedFonts = fonts.filter(f => {
+        if (uniqueFamilies.has(f.family)) return false;
+        uniqueFamilies.add(f.family);
+        return true;
+      });
+
+      // Map to UIFont structure
+      return dedupedFonts.map(f => ({
+        id: f.family.toLowerCase().replace(/\s+/g, '-'),
+        name: f.family,
+        family: withUiCjkFallback(`"${f.family}", system-ui`),
+      }));
+    } catch (error) {
+      console.warn('Failed to query local fonts:', error);
+      return [];
+    }
+  }
+
+  getFontById = (fontId: string): UIFont => {
+    const fonts = this.state.availableFonts;
+    const found = fonts.find(f => f.id === fontId);
+    if (found) return found;
+
+    // For local fonts that haven't been loaded yet, construct a fallback
+    // This handles the case when main window receives a local font ID before fonts are loaded
+    if (fontId.startsWith('local-')) {
+      const fontName = fontId
+        .replace(/^local-/, '')
+        .split('-')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+      return {
+        id: fontId,
+        name: fontName,
+        family: withUiCjkFallback(`"${fontName}", system-ui`),
+      };
+    }
+
+    return fonts[0] || UI_FONTS[0];
+  };
+}
+
+// Singleton instance
+export const uiFontStore = new UIFontStore();
+
+/**
+ * Get available UI fonts - triggers initialization on first use
+ */
+export const useAvailableUIFonts = (): UIFont[] => {
+  if (!uiFontStore.getIsLoaded() && !uiFontStore.getIsLoading()) {
+    uiFontStore.initialize();
+  }
+
+  return useSyncExternalStore(
+    uiFontStore.subscribe,
+    uiFontStore.getAvailableFonts
+  );
+};
+
+/**
+ * Get UI font loading state
+ */
+export const useUIFontsLoading = (): boolean => {
+  return useSyncExternalStore(
+    uiFontStore.subscribe,
+    uiFontStore.getIsLoading
+  );
+};
+
+/**
+ * Get UI font loaded state
+ */
+export const useUIFontsLoaded = (): boolean => {
+  return useSyncExternalStore(
+    uiFontStore.subscribe,
+    uiFontStore.getIsLoaded
+  );
+};
+
+/**
+ * Get UI font by ID with fallback
+ */
+export const useUIFontById = (fontId: string): UIFont => {
+  const fonts = useAvailableUIFonts();
+  return fonts.find(f => f.id === fontId) || fonts[0] || UI_FONTS[0];
+};
+
+/**
+ * Check if a font ID is valid
+ */
+export const isValidUiFontId = (fontId: string): boolean => {
+  // Local fonts are always considered valid (they start with 'local-')
+  if (fontId.startsWith('local-')) return true;
+  return uiFontStore.getAvailableFonts().some(f => f.id === fontId);
+};
+
+/**
+ * Initialize UI fonts eagerly
+ */
+export const initializeUIFonts = (): void => {
+  uiFontStore.initialize();
+};

application/state/useAIState.ts

@@ -0,0 +1,611 @@
+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_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;
+}
+
+function cleanupAcpSessions(sessionIds: string[]) {
+  const bridge = getAIBridge();
+  if (!bridge?.aiAcpCleanup || sessionIds.length === 0) return;
+  for (const sessionId of sessionIds) {
+    void bridge.aiAcpCleanup(sessionId).catch(() => {});
+  }
+}
+
+
+/** 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;
+  });
+}
+
+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>>({});
+
+  // 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
+  );
+
+  const setActiveSessionId = useCallback((scopeKey: string, id: string | null) => {
+    setActiveSessionIdMapRaw(prev => ({ ...prev, [scopeKey]: id }));
+  }, []);
+
+  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_AGENT_MODEL_MAP:
+            setAgentModelMapRaw(localStorageAdapter.read<Record<string, string>>(STORAGE_KEY_AI_AGENT_MODEL_MAP) ?? {});
+            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);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
+
+  // ── 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];
+      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);
+      persistSessions(next);
+      return next;
+    });
+    if (scopeKey) {
+      setActiveSessionIdMapRaw(prev => {
+        if (prev[scopeKey] === sessionId) return { ...prev, [scopeKey]: null };
+        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);
+      });
+      persistSessions(next);
+      return next;
+    });
+    const scopeKey = `${scopeType}:${targetId}`;
+    setActiveSessionIdMapRaw(prev => {
+      if (prev[scopeKey] != null) return { ...prev, [scopeKey]: null };
+      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);
+      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
+      ));
+      debouncedPersistSessions();
+      return next;
+    });
+  }, [debouncedPersistSessions]);
+
+  // 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() };
+      });
+      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() };
+      });
+      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() };
+      });
+      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);
+      persistSessions(next);
+      return next;
+    });
+  }, [persistSessions]);
+
+  const cleanupOrphanedSessions = useCallback((activeTargetIds: Set<string>) => {
+    const removedSessionIds = sessionsRef.current
+      .filter(s => s.scope.targetId && !activeTargetIds.has(s.scope.targetId))
+      .map(s => s.id);
+    cleanupAcpSessions(removedSessionIds);
+    setSessionsRaw(prev => {
+      const next = prev.filter(s => {
+        // Keep sessions without a targetId (global scope)
+        if (!s.scope.targetId) return true;
+        // Keep sessions whose target still exists
+        return activeTargetIds.has(s.scope.targetId);
+      });
+      if (next.length !== prev.length) {
+        persistSessions(next);
+      }
+      return next;
+    });
+  }, [persistSessions]);
+
+  // ── 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,
+    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/useApplicationBackend.ts

@@ -7,6 +7,12 @@ export type ApplicationInfo = {
   platform: string;
 };
 
+export type SshAgentStatus = {
+  running: boolean;
+  startupType: string | null;
+  error: string | null;
+};
+
 export const useApplicationBackend = () => {
   const openExternal = useCallback(async (url: string) => {
     try {
@@ -27,6 +33,12 @@ export const useApplicationBackend = () => {
     return info ?? null;
   }, []);
 
-  return { openExternal, getApplicationInfo };
+  const checkSshAgent = useCallback(async (): Promise<SshAgentStatus | null> => {
+    const bridge = netcattyBridge.get();
+    const status = await bridge?.checkSshAgent?.();
+    return status ?? null;
+  }, []);
+
+  return { openExternal, getApplicationInfo, checkSshAgent };
 };
 

application/state/useAutoSync.ts

@@ -12,7 +12,14 @@ 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 {
+  findSyncPayloadEncryptedCredentialPaths,
+} from '../../domain/credentials';
+import { isProviderReadyForSync, type CloudProvider, type SyncPayload } from '../../domain/sync';
+import { collectSyncableSettings } from '../../domain/syncPayload';
+import { STORAGE_KEY_PORT_FORWARDING } from '../../infrastructure/config/storageKeys';
+import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
+import { getEffectiveKnownHosts } from '../../infrastructure/syncHelpers';
 import { toast } from '../../components/ui/toast';
 
 interface AutoSyncConfig {
@@ -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,87 @@ 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);
+
+  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 +154,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,7 +183,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
         }
       }
 
-      lastSyncedDataRef.current = getDataHash();
+      lastSyncedDataRef.current = dataHash;
     } catch (error) {
       if (trigger === 'manual') {
         throw error;
@@ -130,13 +193,15 @@ export const useAutoSync = (config: AutoSyncConfig) => {
         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 +211,34 @@ 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);
+        const { mergeSyncPayloads } = await import('../../domain/syncMerge');
+        const localPayload = buildPayload();
+        const mergeResult = mergeSyncPayloads(base, localPayload, remotePayload);
+
+        console.log('[AutoSync] Remote is newer, merged:', mergeResult.summary);
+        config.onApplyPayload(mergeResult.payload);
+        // Don't save base or skip auto-sync — let the data-change effect
+        // naturally trigger an upload of the merged payload (which will
+        // go through syncAllProviders and save base on success).
         toast.success(t('sync.autoSync.syncedMessage'), t('sync.autoSync.syncedTitle'));
       }
     } 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 +255,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) {
@@ -207,7 +291,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]);
   
   // Check remote version on startup/unlock
   useEffect(() => {

application/state/useClipboardBackend.ts

@@ -0,0 +1,14 @@
+import { useCallback } from "react";
+import { netcattyBridge } from "../../infrastructure/services/netcattyBridge";
+
+export const useClipboardBackend = () => {
+  const readClipboardText = useCallback(async (): Promise<string> => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.readClipboardText) throw new Error("clipboard bridge unavailable");
+
+    const text = await bridge.readClipboardText();
+    return typeof text === "string" ? text : "";
+  }, []);
+
+  return { readClipboardText };
+};

application/state/useCloudSync.ts

@@ -21,6 +21,7 @@ import {
   type S3Config,
   formatLastSync,
   getSyncDotColor,
+  isProviderReadyForSync,
 } from '../../domain/sync';
 import {
   CloudSyncManager,
@@ -148,7 +149,7 @@ export const useCloudSync = (): CloudSyncHook => {
   useEffect(() => {
     // Compute a simple hash of the master key config to detect changes
     const currentHash = state.masterKeyConfig 
-      ? JSON.stringify({ salt: state.masterKeyConfig.salt, iv: state.masterKeyConfig.iv })
+      ? JSON.stringify({ salt: state.masterKeyConfig.salt, kdf: state.masterKeyConfig.kdf })
       : null;
     
     // If master key config changed (e.g., set up in settings window), reset the attempt flag
@@ -181,13 +182,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]);
   
@@ -286,7 +287,7 @@ export const useCloudSync = (): CloudSyncHook => {
       
       // Open browser after starting server
       setTimeout(() => {
-        window.open(data.url, '_blank', 'width=600,height=700');
+        window.open(data.url, "_blank", "width=600,height=700,noopener,noreferrer");
       }, 100);
       
       // Wait for callback
@@ -319,7 +320,7 @@ export const useCloudSync = (): CloudSyncHook => {
       
       // Open browser after starting server
       setTimeout(() => {
-        window.open(data.url, '_blank', 'width=600,height=700');
+        window.open(data.url, "_blank", "width=600,height=700,noopener,noreferrer");
       }, 100);
       
       // Wait for callback
@@ -358,8 +359,8 @@ export const useCloudSync = (): CloudSyncHook => {
     manager.setAutoSync(enabled, intervalMinutes);
   }, []);
   
-  const setDeviceName = useCallback((_name: string) => {
-    // TODO: Add setDeviceName to CloudSyncManager if needed
+  const setDeviceName = useCallback((name: string) => {
+    manager.setDeviceName(name);
   }, []);
   
   // ========== Utilities ==========
@@ -519,7 +520,7 @@ export const useProviderStatus = (provider: CloudProvider) => {
   
   return {
     ...connection,
-    isConnected: connection.status === 'connected',
+    isConnected: isProviderReadyForSync(connection),
     isSyncing: connection.status === 'syncing',
     hasError: connection.status === 'error',
     dotColor: getSyncDotColor(connection.status),

application/state/useGlobalHotkeys.ts

@@ -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/useImageUpload.ts

@@ -0,0 +1,66 @@
+/**
+ * useImageUpload - Handle image paste/drop with base64 conversion
+ *
+ * Ported from 1code's use-agents-file-upload.ts
+ */
+import { useCallback, useState } from 'react';
+
+export interface UploadedImage {
+  id: string;
+  filename: string;
+  dataUrl: string;      // data:image/...;base64,... for preview
+  base64Data: string;   // raw base64 for API
+  mediaType: string;    // MIME type e.g. "image/png"
+}
+
+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 useImageUpload() {
+  const [images, setImages] = useState<UploadedImage[]>([]);
+
+  const addImages = useCallback(async (files: File[]) => {
+    const imageFiles = files.filter((f) => f.type.startsWith('image/'));
+    if (imageFiles.length === 0) return;
+
+    const newImages: UploadedImage[] = await Promise.all(
+      imageFiles.map(async (file) => {
+        const id = crypto.randomUUID();
+        const filename = file.name || `screenshot-${Date.now()}.png`;
+        const mediaType = file.type || 'image/png';
+        let dataUrl = '';
+        let base64Data = '';
+        try {
+          const result = await fileToDataUrl(file);
+          dataUrl = result.dataUrl;
+          base64Data = result.base64;
+        } catch (err) {
+          console.error('[useImageUpload] Failed to convert:', err);
+        }
+        return { id, filename, dataUrl, base64Data, mediaType };
+      }),
+    );
+
+    setImages((prev) => [...prev, ...newImages]);
+  }, []);
+
+  const removeImage = useCallback((id: string) => {
+    setImages((prev) => prev.filter((i) => i.id !== id));
+  }, []);
+
+  const clearImages = useCallback(() => {
+    setImages([]);
+  }, []);
+
+  return { images, addImages, removeImage, clearImages };
+}

application/state/useKeychainBackend.ts

@@ -15,6 +15,8 @@ export const useKeychainBackend = () => {
     privateKey?: string;
     command: string;
     timeout?: number;
+    enableKeyboardInteractive?: boolean;
+    sessionId?: string;
   }) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.execCommand) throw new Error("execCommand unavailable");

application/state/useManagedSourceSync.ts

@@ -0,0 +1,383 @@
+import { useCallback, useEffect, useRef } from "react";
+import { Host, ManagedSource } from "../../domain/models";
+import {
+  serializeHostsToSshConfig,
+  mergeWithExistingSshConfig,
+} from "../../domain/sshConfigSerializer";
+import { netcattyBridge } from "../../infrastructure/services/netcattyBridge";
+
+const MANAGED_BLOCK_BEGIN = "# BEGIN NETCATTY MANAGED - DO NOT EDIT THIS BLOCK";
+const MANAGED_BLOCK_END = "# END NETCATTY MANAGED";
+
+export interface UseManagedSourceSyncOptions {
+  hosts: Host[];
+  managedSources: ManagedSource[];
+  onUpdateManagedSources: (sources: ManagedSource[]) => void;
+}
+
+export const useManagedSourceSync = ({
+  hosts,
+  managedSources,
+  onUpdateManagedSources,
+}: UseManagedSourceSyncOptions) => {
+  const previousHostsRef = useRef<Host[]>([]);
+  const syncInProgressRef = useRef(false);
+  // Keep a ref to the latest managedSources to avoid stale closure issues
+  const managedSourcesRef = useRef(managedSources);
+  managedSourcesRef.current = managedSources;
+
+  const getManagedHostsForSource = useCallback(
+    (sourceId: string) => {
+      return hosts.filter((h) => h.managedSourceId === sourceId);
+    },
+    [hosts],
+  );
+
+  const readExistingFileContent = useCallback(
+    async (filePath: string): Promise<string | null> => {
+      const bridge = netcattyBridge.get();
+      if (!bridge?.readLocalFile) {
+        return null;
+      }
+      try {
+        const buffer = await bridge.readLocalFile(filePath);
+        const decoder = new TextDecoder();
+        return decoder.decode(buffer);
+      } catch {
+        // File might not exist yet
+        return null;
+      }
+    },
+    [],
+  );
+
+  const mergeWithExistingContent = useCallback(
+    (
+      existingContent: string | null,
+      managedHosts: Host[],
+      allHosts: Host[],
+    ): string => {
+      // Serialize the managed hosts
+      const managedContent = serializeHostsToSshConfig(managedHosts, allHosts);
+
+      if (!existingContent) {
+        // No existing file, just wrap the managed content
+        return `${MANAGED_BLOCK_BEGIN}\n${managedContent}${MANAGED_BLOCK_END}\n`;
+      }
+
+      const beginIndex = existingContent.indexOf(MANAGED_BLOCK_BEGIN);
+      const endIndex = existingContent.indexOf(MANAGED_BLOCK_END);
+
+      if (beginIndex === -1 || endIndex === -1 || endIndex < beginIndex) {
+        // No existing managed block - need to remove duplicate Host entries
+        // Build a set of hostnames/aliases that will be managed
+        const managedHostnameSet = new Set<string>();
+        for (const host of managedHosts) {
+          if (!host.protocol || host.protocol === "ssh") {
+            // Add both hostname and sanitized label (alias) for matching
+            managedHostnameSet.add(host.hostname.toLowerCase());
+            if (host.label) {
+              managedHostnameSet.add(host.label.replace(/\s/g, "").toLowerCase());
+            }
+          }
+        }
+
+        // Use mergeWithExistingSshConfig to filter out existing Host blocks
+        // that match our managed hosts, keeping preserved content outside markers
+        const mergedContent = mergeWithExistingSshConfig(
+          existingContent,
+          managedHosts,
+          managedHostnameSet,
+          allHosts,
+        );
+        return mergedContent;
+      }
+
+      // Replace the existing managed block
+      const before = existingContent.substring(0, beginIndex);
+      const after = existingContent.substring(endIndex + MANAGED_BLOCK_END.length);
+      return `${before}${MANAGED_BLOCK_BEGIN}\n${managedContent}${MANAGED_BLOCK_END}${after}`;
+    },
+    [],
+  );
+
+  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");
+        return false;
+      }
+
+      try {
+        // Read existing file content to preserve non-managed parts
+        const existingContent = await readExistingFileContent(source.filePath);
+
+        // Merge with existing content, preserving non-managed parts and removing duplicates
+        const finalContent = mergeWithExistingContent(
+          existingContent,
+          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);
+        return false;
+      }
+    },
+    [readExistingFileContent, mergeWithExistingContent, hosts],
+  );
+
+  const syncManagedSource = useCallback(
+    async (source: ManagedSource): Promise<{ sourceId: string; success: boolean }> => {
+      const managedHosts = getManagedHostsForSource(source.id);
+      const success = await writeSshConfigToFile(source, managedHosts);
+      return { sourceId: source.id, success };
+    },
+    [getManagedHostsForSource, writeSshConfigToFile],
+  );
+
+  const unmanageSource = useCallback(
+    (sourceId: string) => {
+      const updatedSources = managedSourcesRef.current.filter((s) => s.id !== sourceId);
+      onUpdateManagedSources(updatedSources);
+    },
+    [onUpdateManagedSources],
+  );
+
+  // Clear the managed block in the SSH config file and then remove the source
+  // 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);
+      return success;
+    },
+    [onUpdateManagedSources, writeSshConfigToFile],
+  );
+
+  // Clear and remove multiple sources atomically to avoid race conditions
+  // when multiple sources are removed concurrently
+  const clearAndRemoveSources = useCallback(
+    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(
+        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(
+        (s) => !sourceIdsToRemove.has(s.id)
+      );
+      onUpdateManagedSources(updatedSources);
+    },
+    [onUpdateManagedSources, writeSshConfigToFile],
+  );
+
+  const pendingSyncRef = useRef(false);
+  const checkAndSyncRef = useRef<() => void>(() => {});
+
+  const checkAndSync = useCallback(() => {
+    if (managedSources.length === 0) {
+      // Still update previousHostsRef so we have a baseline when sources are added
+      previousHostsRef.current = hosts;
+      return;
+    }
+
+    const prevHosts = previousHostsRef.current;
+    previousHostsRef.current = hosts;
+
+    // On initial sync (prevHosts empty), sync all sources that have managed hosts
+    const isInitialSync = prevHosts.length === 0;
+
+    const changedSourceIds = new Set<string>();
+
+    if (isInitialSync) {
+      // Initial sync: sync all sources that have hosts
+      for (const source of managedSources) {
+        const currManaged = hosts.filter((h) => h.managedSourceId === source.id);
+        if (currManaged.length > 0) {
+          changedSourceIds.add(source.id);
+        }
+      }
+    } else {
+      // Build maps for all hosts (for jump host lookup)
+      const prevHostMap = new Map<string, Host>(prevHosts.map((h) => [h.id, h]));
+      const currHostMap = new Map<string, Host>(hosts.map((h) => [h.id, h]));
+
+      // Index hosts by managedSourceId to avoid O(N*M) lookups
+      const prevHostsBySource = new Map<string, Host[]>();
+      for (const h of prevHosts) {
+        if (h.managedSourceId) {
+          let list = prevHostsBySource.get(h.managedSourceId);
+          if (!list) {
+            list = [];
+            prevHostsBySource.set(h.managedSourceId, list);
+          }
+          list.push(h);
+        }
+      }
+
+      const currHostsBySource = new Map<string, Host[]>();
+      for (const h of hosts) {
+        if (h.managedSourceId) {
+          let list = currHostsBySource.get(h.managedSourceId);
+          if (!list) {
+            list = [];
+            currHostsBySource.set(h.managedSourceId, list);
+          }
+          list.push(h);
+        }
+      }
+
+      // Helper to check if a host's SSH-relevant fields changed
+      const hostChanged = (prevHost: Host | undefined, currHost: Host | undefined): boolean => {
+        if (!prevHost || !currHost) return prevHost !== currHost;
+        return (
+          prevHost.hostname !== currHost.hostname ||
+          prevHost.port !== currHost.port ||
+          prevHost.username !== currHost.username ||
+          prevHost.label !== currHost.label
+        );
+      };
+
+      for (const source of managedSources) {
+        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;
+        }
+
+        const prevManagedMap = new Map<string, Host>(prevManaged.map((h) => [h.id, h]));
+        let sourceChanged = false;
+
+        for (const curr of currManaged) {
+          const prev = prevManagedMap.get(curr.id);
+          if (!prev) {
+            sourceChanged = true;
+            break;
+          }
+          // Compare hostChain arrays for ProxyJump changes
+          const prevChain = prev.hostChain?.hostIds || [];
+          const currChain = curr.hostChain?.hostIds || [];
+          const chainChanged =
+            prevChain.length !== currChain.length ||
+            prevChain.some((id, i) => id !== currChain[i]);
+
+          const hasChanged =
+            prev.hostname !== curr.hostname ||
+            prev.port !== curr.port ||
+            prev.username !== curr.username ||
+            prev.label !== curr.label ||
+            prev.group !== curr.group ||
+            prev.protocol !== curr.protocol ||
+            chainChanged;
+          if (hasChanged) {
+            sourceChanged = true;
+            break;
+          }
+
+          // Check if any referenced jump hosts changed (even if outside this managed source)
+          for (const jumpHostId of currChain) {
+            const prevJumpHost = prevHostMap.get(jumpHostId);
+            const currJumpHost = currHostMap.get(jumpHostId);
+            if (hostChanged(prevJumpHost, currJumpHost)) {
+              sourceChanged = true;
+              break;
+            }
+          }
+          if (sourceChanged) break;
+        }
+
+        if (sourceChanged) {
+          changedSourceIds.add(source.id);
+        }
+      }
+    }
+
+    if (changedSourceIds.size > 0) {
+      console.log(`[ManagedSourceSync] Syncing sources:`, Array.from(changedSourceIds));
+      syncInProgressRef.current = true;
+
+      Promise.all(
+        managedSources
+          .filter((s) => changedSourceIds.has(s.id))
+          .map(syncManagedSource),
+      ).then((results) => {
+        // Batch update lastSyncedAt for all successful syncs to avoid race conditions
+        const successfulSourceIds = new Set(
+          results.filter(r => r.success).map(r => r.sourceId)
+        );
+
+        if (successfulSourceIds.size > 0) {
+          const currentSources = managedSourcesRef.current;
+          const now = Date.now();
+          const updatedSources = currentSources.map((s) =>
+            successfulSourceIds.has(s.id) ? { ...s, lastSyncedAt: now } : s,
+          );
+          onUpdateManagedSources(updatedSources);
+        }
+      }).finally(() => {
+        syncInProgressRef.current = false;
+        // Check if there were changes during sync that need to be processed
+        // Use ref to get the latest checkAndSync to avoid stale closure
+        if (pendingSyncRef.current) {
+          pendingSyncRef.current = false;
+          checkAndSyncRef.current();
+        }
+      });
+    }
+  }, [hosts, managedSources, syncManagedSource, onUpdateManagedSources]);
+
+  // Keep ref updated with the latest checkAndSync
+  checkAndSyncRef.current = checkAndSync;
+
+  useEffect(() => {
+    if (syncInProgressRef.current) {
+      // Mark that we need to re-sync after current sync completes
+      pendingSyncRef.current = true;
+      return;
+    }
+    checkAndSync();
+  }, [hosts, managedSources, checkAndSync]);
+
+  return {
+    syncManagedSource,
+    unmanageSource,
+    clearAndRemoveSource,
+    clearAndRemoveSources,
+    getManagedHostsForSource,
+  };
+};

application/state/usePortForwardingAutoStart.ts

@@ -0,0 +1,139 @@
+/**
+ * Hook for auto-starting port forwarding rules on app launch.
+ * 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 { STORAGE_KEY_PORT_FORWARDING } from "../../infrastructure/config/storageKeys";
+import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
+import {
+  getActiveConnection,
+  setReconnectCallback,
+  startPortForward,
+  syncWithBackend,
+} from "../../infrastructure/services/portForwardingService";
+import { logger } from "../../lib/logger";
+
+export interface UsePortForwardingAutoStartOptions {
+  hosts: Host[];
+  keys: { id: string; privateKey: string; passphrase: string }[];
+}
+
+/**
+ * Auto-starts port forwarding rules that have autoStart enabled.
+ * This hook should be called at the App level to run on app launch.
+ */
+export const usePortForwardingAutoStart = ({
+  hosts,
+  keys,
+}: UsePortForwardingAutoStartOptions): void => {
+  const autoStartExecutedRef = useRef(false);
+  const hostsRef = useRef<Host[]>(hosts);
+  const keysRef = useRef<{ id: string; privateKey: string; passphrase: string }[]>(keys);
+
+  // Keep refs in sync
+  useEffect(() => {
+    hostsRef.current = hosts;
+  }, [hosts]);
+
+  useEffect(() => {
+    keysRef.current = keys;
+  }, [keys]);
+
+  // Set up the reconnect callback
+  useEffect(() => {
+    const handleReconnect = async (
+      ruleId: string,
+      onStatusChange: (status: PortForwardingRule["status"], error?: string) => void,
+    ) => {
+      // Load the current rules from storage
+      const rules = localStorageAdapter.read<PortForwardingRule[]>(
+        STORAGE_KEY_PORT_FORWARDING,
+      ) ?? [];
+      
+      const rule = rules.find((r) => r.id === ruleId);
+      if (!rule || !rule.hostId) {
+        return { success: false, error: "Rule or host not found" };
+      }
+
+      const host = hostsRef.current.find((h) => h.id === rule.hostId);
+      if (!host) {
+        return { success: false, error: "Host not found" };
+      }
+
+      return startPortForward(rule, host, keysRef.current, onStatusChange, true);
+    };
+
+    setReconnectCallback(handleReconnect);
+    return () => {
+      setReconnectCallback(null);
+    };
+  }, []);
+
+  // Auto-start rules on app launch
+  useEffect(() => {
+    if (autoStartExecutedRef.current) return;
+    if (hosts.length === 0) return;
+
+    // Mark as executed immediately to prevent duplicate runs
+    // (React StrictMode or dependency changes could cause re-runs)
+    autoStartExecutedRef.current = true;
+
+    const runAutoStart = async () => {
+      // First sync with backend to get any active tunnels
+      await syncWithBackend();
+
+      // Load rules from storage
+      const rules = localStorageAdapter.read<PortForwardingRule[]>(
+        STORAGE_KEY_PORT_FORWARDING,
+      ) ?? [];
+
+      // Only start rules that are not already active
+      const autoStartRules = rules.filter((r) => {
+        if (!r.autoStart || !r.hostId) return false;
+        // Check if there's an active connection for this rule
+        const conn = getActiveConnection(r.id);
+        // Only start if not already connecting or active
+        return !conn || conn.status === 'inactive' || conn.status === 'error';
+      });
+
+      if (autoStartRules.length === 0) return;
+      logger.info(`[PortForwardingAutoStart] Starting ${autoStartRules.length} auto-start rules`);
+
+      // Start each auto-start rule
+      for (const rule of autoStartRules) {
+        const host = hosts.find((h) => h.id === rule.hostId);
+        if (host) {
+          void startPortForward(
+            rule,
+            host,
+            keys,
+            (status, error) => {
+              // Update the rule status in storage
+              const currentRules = localStorageAdapter.read<PortForwardingRule[]>(
+                STORAGE_KEY_PORT_FORWARDING,
+              ) ?? [];
+              
+              const updatedRules = currentRules.map((r) =>
+                r.id === rule.id
+                  ? {
+                      ...r,
+                      status,
+                      error,
+                      lastUsedAt: status === "active" ? Date.now() : r.lastUsedAt,
+                    }
+                  : r,
+              );
+              
+              localStorageAdapter.write(STORAGE_KEY_PORT_FORWARDING, updatedRules);
+            },
+            true, // Enable reconnect for auto-start rules
+          );
+        }
+      }
+    };
+
+    void runAutoStart();
+  }, [hosts, keys]);
+};

application/state/usePortForwardingState.ts

@@ -7,13 +7,27 @@ import {
 } from "../../infrastructure/config/storageKeys";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
 import {
+  clearReconnectTimer,
   getActiveConnection,
-  getActiveRuleIds,
+  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";
@@ -38,6 +52,7 @@ export interface UsePortForwardingStateResult {
   updateRule: (id: string, updates: Partial<PortForwardingRule>) => void;
   deleteRule: (id: string) => void;
   duplicateRule: (id: string) => void;
+  importRules: (rules: PortForwardingRule[]) => void;
 
   setRuleStatus: (
     id: string,
@@ -48,8 +63,9 @@ export interface UsePortForwardingStateResult {
   startTunnel: (
     rule: PortForwardingRule,
     host: Host,
-    keys: { id: string; privateKey: string }[],
+    keys: { id: string; privateKey: string; passphrase: string }[],
     onStatusChange?: (status: PortForwardingRule["status"], error?: string) => void,
+    enableReconnect?: boolean,
   ) => Promise<{ success: boolean; error?: string }>;
   stopTunnel: (
     ruleId: string,
@@ -60,8 +76,58 @@ export interface UsePortForwardingStateResult {
   selectedRule: PortForwardingRule | undefined;
 }
 
+// Global Store State
+let globalRules: PortForwardingRule[] = [];
+let isInitialized = false;
+const listeners = new Set<(rules: PortForwardingRule[]) => void>();
+
+// Store Actions
+const notifyListeners = () => {
+  listeners.forEach((listener) => listener(globalRules));
+};
+
+const setGlobalRules = (newRules: PortForwardingRule[]) => {
+  globalRules = newRules;
+  notifyListeners();
+  localStorageAdapter.write(STORAGE_KEY_PORT_FORWARDING, newRules);
+};
+
+const normalizeRulesWithConnections = (rules: PortForwardingRule[]): PortForwardingRule[] => {
+  return rules.map((rule): PortForwardingRule => {
+    const connection = getActiveConnection(rule.id);
+    if (connection) {
+      return {
+        ...rule,
+        status: connection.status,
+        error: connection.error,
+      };
+    }
+
+    return {
+      ...rule,
+      status: "inactive" as const,
+      error: undefined,
+    };
+  });
+};
+
+// Initialization Logic
+const initializeStore = async () => {
+  if (isInitialized) return;
+  isInitialized = true;
+
+  await syncWithBackend();
+
+  const saved = localStorageAdapter.read<PortForwardingRule[]>(
+    STORAGE_KEY_PORT_FORWARDING,
+  );
+  if (saved && Array.isArray(saved)) {
+    setGlobalRules(normalizeRulesWithConnections(saved));
+  }
+};
+
 export const usePortForwardingState = (): UsePortForwardingStateResult => {
-  const [rules, setRules] = useState<PortForwardingRule[]>([]);
+  const [rules, setRules] = useState<PortForwardingRule[]>(globalRules);
   const [selectedRuleId, setSelectedRuleId] = useState<string | null>(null);
   const [viewMode, setViewMode] = useStoredViewMode(
     STORAGE_KEY_PF_VIEW_MODE,
@@ -78,30 +144,97 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
     localStorageAdapter.writeBoolean(STORAGE_KEY_PF_PREFER_FORM_MODE, prefer);
   }, []);
 
-  // Load rules from storage on mount
+  // Initialize store on mount (only once globally)
   useEffect(() => {
-    const saved = localStorageAdapter.read<PortForwardingRule[]>(
-      STORAGE_KEY_PORT_FORWARDING,
-    );
-    if (saved && Array.isArray(saved)) {
-      // Sync status with active connections in the service layer
-      const _activeRuleIds = getActiveRuleIds();
-      const withSyncedStatus = saved.map((r) => {
-        const conn = getActiveConnection(r.id);
-        if (conn) {
-          // This rule has an active connection, preserve its status
-          return { ...r, status: conn.status, error: conn.error };
-        }
-        // No active connection, reset to inactive
-        return { ...r, status: "inactive" as const, error: undefined };
-      });
-      setRules(withSyncedStatus);
-    }
+    void initializeStore();
   }, []);
 
-  // Persist rules to storage whenever they change
-  const persistRules = useCallback((updatedRules: PortForwardingRule[]) => {
-    localStorageAdapter.write(STORAGE_KEY_PORT_FORWARDING, updatedRules);
+  // Subscribe to global store
+  useEffect(() => {
+    // If global state was updated before we subscribed (e.g. init finished), update local state
+    if (rules !== globalRules) {
+      setRules(globalRules);
+    }
+
+    const listener = (newRules: PortForwardingRule[]) => {
+      setRules(newRules);
+    };
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  }, [rules]);
+
+  // Listen for storage events for cross-window sync (main window <-> tray panel)
+  useEffect(() => {
+    const handleStorageChange = (e: StorageEvent) => {
+      // Only handle changes from our specific key
+      if (e.key !== STORAGE_KEY_PORT_FORWARDING) return;
+
+      // Parse the new value
+      if (e.newValue) {
+        try {
+          const newRules = JSON.parse(e.newValue) as PortForwardingRule[];
+          if (Array.isArray(newRules)) {
+            // Update global state without triggering another localStorage write
+            globalRules = normalizeRulesWithConnections(newRules);
+            notifyListeners();
+          }
+        } catch {
+          // ignore parse errors
+        }
+      }
+    };
+
+    window.addEventListener("storage", handleStorageChange);
+    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(
@@ -114,47 +247,40 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
         createdAt: Date.now(),
         status: "inactive",
       };
-      setRules((prev) => {
-        const updated = [...prev, newRule];
-        persistRules(updated);
-        return updated;
-      });
+      const updated = [...globalRules, newRule];
+      setGlobalRules(updated);
       setSelectedRuleId(newRule.id);
       return newRule;
     },
-    [persistRules],
+    [],
   );
 
   const updateRule = useCallback(
     (id: string, updates: Partial<PortForwardingRule>) => {
-      setRules((prev) => {
-        const updated = prev.map((r) =>
-          r.id === id ? { ...r, ...updates } : r,
-        );
-        persistRules(updated);
-        return updated;
-      });
+      const updated = globalRules.map((r) =>
+        r.id === id ? { ...r, ...updates } : r,
+      );
+      setGlobalRules(updated);
     },
-    [persistRules],
+    [],
   );
 
   const deleteRule = useCallback(
     (id: string) => {
-      setRules((prev) => {
-        const updated = prev.filter((r) => r.id !== id);
-        persistRules(updated);
-        return updated;
-      });
+      // Stop any active tunnel before removing the rule
+      stopAndCleanupRule(id);
+      const updated = globalRules.filter((r) => r.id !== id);
+      setGlobalRules(updated);
       if (selectedRuleId === id) {
         setSelectedRuleId(null);
       }
     },
-    [selectedRuleId, persistRules],
+    [selectedRuleId],
   );
 
   const duplicateRule = useCallback(
     (id: string) => {
-      const original = rules.find((r) => r.id === id);
+      const original = globalRules.find((r) => r.id === id);
       if (!original) return;
 
       const copy: PortForwardingRule = {
@@ -166,49 +292,102 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
         error: undefined,
         lastUsedAt: undefined,
       };
-      setRules((prev) => {
-        const updated = [...prev, copy];
-        persistRules(updated);
-        return updated;
-      });
+      const updated = [...globalRules, copy];
+      setGlobalRules(updated);
       setSelectedRuleId(copy.id);
     },
-    [rules, persistRules],
+    [],
   );
 
+  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));
+  }, []);
+
   const setRuleStatus = useCallback(
     (id: string, status: PortForwardingRule["status"], error?: string) => {
-      setRules((prev) => {
-        const updated = prev.map((r) => {
-          if (r.id !== id) return r;
-          return {
-            ...r,
-            status,
-            error,
-            lastUsedAt: status === "active" ? Date.now() : r.lastUsedAt,
-          };
-        });
-        persistRules(updated);
-        return updated;
+      const updated = globalRules.map((r) => {
+        if (r.id !== id) return r;
+        return {
+          ...r,
+          status,
+          error,
+          lastUsedAt: status === "active" ? Date.now() : r.lastUsedAt,
+        };
       });
+      setGlobalRules(updated);
     },
-    [persistRules],
+    [],
   );
 
   const startTunnel = useCallback(
     async (
       rule: PortForwardingRule,
       host: Host,
-      keys: { id: string; privateKey: string }[],
+      keys: { id: string; privateKey: string; passphrase: string }[],
       onStatusChange?: (
         status: PortForwardingRule["status"],
         error?: string,
       ) => void,
+      enableReconnect = false,
     ) => {
       return startPortForward(rule, host, keys, (status, error) => {
         setRuleStatus(rule.id, status, error);
         onStatusChange?.(status, error ?? undefined);
-      });
+      }, enableReconnect);
     },
     [setRuleStatus],
   );
@@ -218,6 +397,8 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
       ruleId: string,
       onStatusChange?: (status: PortForwardingRule["status"]) => void,
     ) => {
+      // Clear any pending reconnect timer when manually stopping
+      clearReconnectTimer(ruleId);
       return stopPortForward(ruleId, (status) => {
         setRuleStatus(ruleId, status);
         onStatusChange?.(status);
@@ -282,6 +463,7 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
     updateRule,
     deleteRule,
     duplicateRule,
+    importRules,
 
     setRuleStatus,
     startTunnel,

application/state/useSessionState.ts

@@ -1,5 +1,5 @@
 import { MouseEvent,useCallback,useMemo,useState } from 'react';
-import { ConnectionLog,Host,Snippet,TerminalSession,Workspace,WorkspaceViewMode } from '../../domain/models';
+import { ConnectionLog,Host,SerialConfig,Snippet,TerminalSession,Workspace,WorkspaceViewMode } from '../../domain/models';
 import {
 collectSessionIds,
 createWorkspaceFromSessions as createWorkspaceEntity,
@@ -49,11 +49,62 @@ export const useSessionState = () => {
       username: 'local',
       status: 'connecting',
     };
-	    setSessions(prev => [...prev, newSession]);
-	    setActiveTabId(sessionId);
-	  }, [setActiveTabId]);
+    setSessions(prev => [...prev, newSession]);
+    setActiveTabId(sessionId);
+    return sessionId;
+  }, [setActiveTabId]);
+
+  const createSerialSession = useCallback((config: SerialConfig) => {
+    const sessionId = crypto.randomUUID();
+    const serialHostId = `serial-${sessionId}`;
+    const portName = config.path.split('/').pop() || config.path;
+    const newSession: TerminalSession = {
+      id: sessionId,
+      hostId: serialHostId,
+      hostLabel: `Serial: ${portName}`,
+      hostname: config.path,
+      username: '',
+      status: 'connecting',
+      protocol: 'serial',
+      serialConfig: config,
+    };
+    setSessions(prev => [...prev, newSession]);
+    setActiveTabId(sessionId);
+    return sessionId;
+  }, [setActiveTabId]);
 
   const connectToHost = useCallback((host: Host) => {
+    // Handle serial hosts specially - use createSerialSession for them
+    if (host.protocol === 'serial') {
+      // Use stored serialConfig or construct from host data
+      const serialConfig: SerialConfig = host.serialConfig || {
+        path: host.hostname,
+        baudRate: host.port || 115200,
+        dataBits: 8,
+        stopBits: 1,
+        parity: 'none',
+        flowControl: 'none',
+        localEcho: false,
+        lineMode: false,
+      };
+      
+      const sessionId = crypto.randomUUID();
+      const portName = serialConfig.path.split('/').pop() || serialConfig.path;
+      const newSession: TerminalSession = {
+        id: sessionId,
+        hostId: host.id,
+        hostLabel: host.label || `Serial: ${portName}`,
+        hostname: serialConfig.path,
+        username: '',
+        status: 'connecting',
+        protocol: 'serial',
+        serialConfig: serialConfig,
+      };
+      setSessions(prev => [...prev, newSession]);
+      setActiveTabId(sessionId);
+      return sessionId;
+    }
+
     const newSession: TerminalSession = {
       id: crypto.randomUUID(),
       hostId: host.id,
@@ -66,9 +117,10 @@ export const useSessionState = () => {
       port: host.port,
       moshEnabled: host.moshEnabled,
     };
-	    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));
@@ -237,6 +289,69 @@ export const useSessionState = () => {
     setWorkspaceRenameValue('');
   }, []);
 
+  const createWorkspaceWithHosts = useCallback((name: string, hosts: Host[]) => {
+    if (hosts.length === 0) return;
+
+    // Create sessions for each host
+    const newSessions: TerminalSession[] = hosts.map(host => {
+      // Handle serial hosts specially
+      if (host.protocol === 'serial') {
+        const serialConfig: SerialConfig = host.serialConfig || {
+          path: host.hostname,
+          baudRate: host.port || 115200,
+          dataBits: 8,
+          stopBits: 1,
+          parity: 'none',
+          flowControl: 'none',
+          localEcho: false,
+          lineMode: false,
+        };
+
+        const portName = serialConfig.path.split('/').pop() || serialConfig.path;
+        return {
+          id: crypto.randomUUID(),
+          hostId: host.id,
+          hostLabel: host.label || `Serial: ${portName}`,
+          hostname: serialConfig.path,
+          username: '',
+          status: 'connecting',
+          protocol: 'serial',
+          serialConfig: serialConfig,
+        };
+      }
+
+      return {
+        id: crypto.randomUUID(),
+        hostId: host.id,
+        hostLabel: host.label,
+        hostname: host.hostname,
+        username: host.username,
+        status: 'connecting',
+        protocol: host.protocol,
+        port: host.port,
+        moshEnabled: host.moshEnabled,
+      };
+    });
+
+    const sessionIds = newSessions.map(s => s.id);
+
+    // Create workspace
+    const workspace = createWorkspaceFromSessionIds(sessionIds, {
+      title: name,
+      viewMode: 'split',
+    });
+
+    // Assign workspaceId to sessions
+    const sessionsWithWorkspace = newSessions.map(s => ({
+      ...s,
+      workspaceId: workspace.id
+    }));
+
+    setSessions(prev => [...prev, ...sessionsWithWorkspace]);
+    setWorkspaces(prev => [...prev, workspace]);
+    setActiveTabId(workspace.id);
+  }, [setActiveTabId]);
+
   const createWorkspaceFromSessions = useCallback((
     baseSessionId: string,
     joiningSessionId: string,
@@ -454,6 +569,7 @@ export const useSessionState = () => {
       workspaceId: workspace.id,
       // Store the command to run after connection
       startupCommand: snippet.command,
+      noAutoRun: snippet.noAutoRun,
     }));
 
 	    setSessions(prev => [...prev, ...sessionsWithWorkspace]);
@@ -498,6 +614,31 @@ export const useSessionState = () => {
     });
   }, [setActiveTabId]);
 
+  // Copy a session - creates a new session with the same host connection
+  const copySession = useCallback((sessionId: string) => {
+    setSessions(prevSessions => {
+      const session = prevSessions.find(s => s.id === sessionId);
+      if (!session) return prevSessions;
+
+      // Create a new session with the same connection info
+      const newSession: TerminalSession = {
+        id: crypto.randomUUID(),
+        hostId: session.hostId,
+        hostLabel: session.hostLabel,
+        hostname: session.hostname,
+        username: session.username,
+        status: 'connecting',
+        protocol: session.protocol,
+        port: session.port,
+        moshEnabled: session.moshEnabled,
+        serialConfig: session.serialConfig,
+      };
+
+      setActiveTabId(newSession.id);
+      return [...prevSessions, newSession];
+    });
+  }, [setActiveTabId]);
+
   // Toggle broadcast mode for a workspace
   const toggleBroadcast = useCallback((workspaceId: string) => {
     setBroadcastWorkspaceIds(prev => {
@@ -590,10 +731,12 @@ export const useSessionState = () => {
     submitWorkspaceRename,
     resetWorkspaceRename,
     createLocalTerminal,
+    createSerialSession,
     connectToHost,
     closeSession,
     closeWorkspace,
     updateSessionStatus,
+    createWorkspaceWithHosts,
     createWorkspaceFromSessions,
     addSessionToWorkspace,
     updateSplitSizes,
@@ -612,5 +755,7 @@ export const useSessionState = () => {
     logViews,
     openLogView,
     closeLogView,
+    // Copy session
+    copySession,
   };
 };

application/state/useSettingsState.ts

@@ -1,30 +1,53 @@
-import { useCallback,useEffect,useLayoutEffect,useMemo,useState } from 'react';
-import { SyncConfig, TerminalSettings, DEFAULT_TERMINAL_SETTINGS, HotkeyScheme, CustomKeyBindings, DEFAULT_KEY_BINDINGS, KeyBinding, UILanguage } from '../../domain/models';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type SetStateAction } from 'react';
+import { SyncConfig, TerminalSettings, HotkeyScheme, CustomKeyBindings, DEFAULT_KEY_BINDINGS, KeyBinding, UILanguage, SessionLogFormat, normalizeTerminalSettings } from '../../domain/models';
 import {
-STORAGE_KEY_COLOR,
-STORAGE_KEY_SYNC,
-STORAGE_KEY_TERM_THEME,
-STORAGE_KEY_THEME,
-STORAGE_KEY_TERM_FONT_FAMILY,
-STORAGE_KEY_TERM_FONT_SIZE,
-STORAGE_KEY_TERM_SETTINGS,
-STORAGE_KEY_HOTKEY_SCHEME,
-STORAGE_KEY_CUSTOM_KEY_BINDINGS,
-STORAGE_KEY_HOTKEY_RECORDING,
-STORAGE_KEY_CUSTOM_CSS,
-STORAGE_KEY_UI_LANGUAGE,
-STORAGE_KEY_ACCENT_MODE,
-STORAGE_KEY_UI_THEME_LIGHT,
-STORAGE_KEY_UI_THEME_DARK,
+  STORAGE_KEY_COLOR,
+  STORAGE_KEY_SYNC,
+  STORAGE_KEY_TERM_THEME,
+  STORAGE_KEY_THEME,
+  STORAGE_KEY_TERM_FONT_FAMILY,
+  STORAGE_KEY_TERM_FONT_SIZE,
+  STORAGE_KEY_TERM_SETTINGS,
+  STORAGE_KEY_HOTKEY_SCHEME,
+  STORAGE_KEY_CUSTOM_KEY_BINDINGS,
+  STORAGE_KEY_HOTKEY_RECORDING,
+  STORAGE_KEY_CUSTOM_CSS,
+  STORAGE_KEY_UI_LANGUAGE,
+  STORAGE_KEY_ACCENT_MODE,
+  STORAGE_KEY_UI_THEME_LIGHT,
+  STORAGE_KEY_UI_THEME_DARK,
+  STORAGE_KEY_UI_FONT_FAMILY,
+  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_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,
 } from '../../infrastructure/config/storageKeys';
 import { DEFAULT_UI_LOCALE, resolveSupportedLocale } from '../../infrastructure/config/i18n';
 import { TERMINAL_THEMES } from '../../infrastructure/config/terminalThemes';
-import { TERMINAL_FONTS, DEFAULT_FONT_SIZE } from '../../infrastructure/config/fonts';
+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';
@@ -32,10 +55,21 @@ const DEFAULT_CUSTOM_ACCENT = '221.2 83.2% 53.3%';
 const DEFAULT_TERMINAL_THEME = 'netcatty-dark';
 const DEFAULT_FONT_FAMILY = 'menlo';
 // Auto-detect default hotkey scheme based on platform
-const DEFAULT_HOTKEY_SCHEME: HotkeyScheme = 
-  typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/i.test(navigator.platform) 
-    ? 'mac' 
+const DEFAULT_HOTKEY_SCHEME: HotkeyScheme =
+  typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/i.test(navigator.platform)
+    ? 'mac'
     : 'pc';
+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;
+
+// Editor defaults
+const DEFAULT_EDITOR_WORD_WRAP = false;
+
+// Session Logs defaults
+const DEFAULT_SESSION_LOGS_ENABLED = false;
+const DEFAULT_SESSION_LOGS_FORMAT: SessionLogFormat = 'txt';
 
 const readStoredString = (key: string): string | null => {
   const raw = localStorageAdapter.readString(key);
@@ -51,7 +85,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%"
@@ -63,15 +97,30 @@ const isValidUiThemeId = (theme: 'light' | 'dark', value: string): boolean => {
   return list.some((preset) => preset.id === value);
 };
 
+const isValidUiFontId = (value: string): boolean => {
+  // Local fonts are always considered valid
+  if (value.startsWith('local-')) return true;
+  // Check bundled fonts first, then check dynamically loaded fonts
+  return UI_FONTS.some((font) => font.id === value) ||
+    uiFontStore.getAvailableFonts().some((font) => font.id === value);
+};
+
+const serializeTerminalSettings = (settings: TerminalSettings): string =>
+  JSON.stringify(settings);
+
+const areTerminalSettingsEqual = (a: TerminalSettings, b: TerminalSettings): boolean =>
+  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);
+  root.classList.add(resolvedTheme);
   root.style.setProperty('--background', tokens.background);
   root.style.setProperty('--foreground', tokens.foreground);
   root.style.setProperty('--card', tokens.card);
@@ -80,7 +129,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%');
 
@@ -97,17 +146,23 @@ const applyThemeTokens = (
   root.style.setProperty('--border', tokens.border);
   root.style.setProperty('--input', tokens.input);
   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 [theme, setTheme] = useState<'dark' | 'light'>(() => {
+  const availableFonts = useAvailableFonts();
+  const uiFontsLoaded = useUIFontsLoaded();
+  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;
@@ -126,6 +181,10 @@ export const useSettingsState = () => {
     const legacyColor = readStoredString(STORAGE_KEY_COLOR);
     return legacyColor && isValidHslToken(legacyColor) ? 'custom' : DEFAULT_ACCENT_MODE;
   });
+  const [uiFontFamilyId, setUiFontFamilyId] = useState<string>(() => {
+    const stored = readStoredString(STORAGE_KEY_UI_FONT_FAMILY);
+    return stored && isValidUiFontId(stored) ? stored : DEFAULT_UI_FONT_ID;
+  });
   const [syncConfig, setSyncConfig] = useState<SyncConfig | null>(() => localStorageAdapter.read<SyncConfig>(STORAGE_KEY_SYNC));
   const [terminalThemeId, setTerminalThemeId] = useState<string>(() => localStorageAdapter.readString(STORAGE_KEY_TERM_THEME) || DEFAULT_TERMINAL_THEME);
   const [terminalFontFamilyId, setTerminalFontFamilyId] = useState<string>(() => localStorageAdapter.readString(STORAGE_KEY_TERM_FONT_FAMILY) || DEFAULT_FONT_FAMILY);
@@ -134,9 +193,9 @@ export const useSettingsState = () => {
     const stored = readStoredString(STORAGE_KEY_UI_LANGUAGE);
     return resolveSupportedLocale(stored || DEFAULT_UI_LOCALE);
   });
-  const [terminalSettings, setTerminalSettings] = useState<TerminalSettings>(() => {
+  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);
@@ -146,13 +205,107 @@ export const useSettingsState = () => {
     }
     return DEFAULT_HOTKEY_SCHEME;
   });
-  const [customKeyBindings, setCustomKeyBindings] = useState<CustomKeyBindings>(() => 
+  const [customKeyBindings, setCustomKeyBindings] = useState<CustomKeyBindings>(() =>
     localStorageAdapter.read<CustomKeyBindings>(STORAGE_KEY_CUSTOM_KEY_BINDINGS) || {}
   );
   const [isHotkeyRecording, setIsHotkeyRecordingState] = useState(false);
-  const [customCSS, setCustomCSS] = useState<string>(() => 
+  const [customCSS, setCustomCSS] = useState<string>(() =>
     localStorageAdapter.readString(STORAGE_KEY_CUSTOM_CSS) || ''
   );
+  const [sftpDoubleClickBehavior, setSftpDoubleClickBehavior] = useState<'open' | 'transfer'>(() => {
+    const stored = readStoredString(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR);
+    return (stored === 'open' || stored === 'transfer') ? stored : DEFAULT_SFTP_DOUBLE_CLICK_BEHAVIOR;
+  });
+  const [sftpAutoSync, setSftpAutoSync] = useState<boolean>(() => {
+    const stored = readStoredString(STORAGE_KEY_SFTP_AUTO_SYNC);
+    return stored === 'true' ? true : DEFAULT_SFTP_AUTO_SYNC;
+  });
+  const [sftpShowHiddenFiles, setSftpShowHiddenFiles] = useState<boolean>(() => {
+    const stored = readStoredString(STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES);
+    return stored === 'true' ? true : DEFAULT_SFTP_SHOW_HIDDEN_FILES;
+  });
+  const [sftpUseCompressedUpload, setSftpUseCompressedUpload] = useState<boolean>(() => {
+    const stored = readStoredString(STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD);
+    // 兼容旧的设置值
+    if (stored === 'true' || stored === 'enabled' || stored === 'ask') return true;
+    if (stored === 'false' || stored === 'disabled') return false;
+    return DEFAULT_SFTP_USE_COMPRESSED_UPLOAD;
+  });
+
+  // Editor Settings
+  const [editorWordWrap, setEditorWordWrapState] = useState<boolean>(() => {
+    const stored = readStoredString(STORAGE_KEY_EDITOR_WORD_WRAP);
+    return stored === 'true' ? true : DEFAULT_EDITOR_WORD_WRAP;
+  });
+
+  // Session Logs Settings
+  const [sessionLogsEnabled, setSessionLogsEnabled] = useState<boolean>(() => {
+    const stored = readStoredString(STORAGE_KEY_SESSION_LOGS_ENABLED);
+    return stored === 'true' ? true : DEFAULT_SESSION_LOGS_ENABLED;
+  });
+  const [sessionLogsDir, setSessionLogsDir] = useState<string>(() => {
+    return readStoredString(STORAGE_KEY_SESSION_LOGS_DIR) || '';
+  });
+  const [sessionLogsFormat, setSessionLogsFormat] = useState<SessionLogFormat>(() => {
+    const stored = readStoredString(STORAGE_KEY_SESSION_LOGS_FORMAT);
+    if (stored === 'txt' || stored === 'raw' || stored === 'html') return stored;
+    return DEFAULT_SESSION_LOGS_FORMAT;
+  });
+
+  // Global Toggle Window Settings (Quake Mode)
+  const [toggleWindowHotkey, setToggleWindowHotkey] = useState<string>(() => {
+    const stored = readStoredString(STORAGE_KEY_TOGGLE_WINDOW_HOTKEY);
+    if (stored !== null) return stored;
+    // Default: Ctrl+` (Control+backtick) - similar to VS Code terminal toggle
+    const isMac = typeof navigator !== 'undefined' && /Mac/i.test(navigator.platform);
+    return isMac ? '⌃ + `' : 'Ctrl + `';
+  });
+  const [closeToTray, setCloseToTray] = useState<boolean>(() => {
+    const stored = readStoredString(STORAGE_KEY_CLOSE_TO_TRAY);
+    // Default to true (enabled)
+    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);
+
+  const setTerminalSettings = useCallback((nextValue: SetStateAction<TerminalSettings>) => {
+    setTerminalSettingsState((prev) => {
+      const candidate = typeof nextValue === 'function'
+        ? (nextValue as (prevState: TerminalSettings) => TerminalSettings)(prev)
+        : nextValue;
+      const next = normalizeTerminalSettings(candidate);
+      if (areTerminalSettingsEqual(prev, next)) {
+        return prev;
+      }
+      localTerminalSettingsVersionRef.current += 1;
+      return next;
+    });
+  }, []);
+
+  const mergeIncomingTerminalSettings = useCallback((incoming: Partial<TerminalSettings>) => {
+    setTerminalSettingsState((prev) => {
+      const next = normalizeTerminalSettings({ ...prev, ...incoming });
+      if (areTerminalSettingsEqual(prev, next)) {
+        return prev;
+      }
+      // Mark the exact incoming snapshot so only this state is skipped for IPC rebroadcast.
+      incomingTerminalSettingsSignatureRef.current = serializeTerminalSettings(next);
+      return next;
+    });
+  }, []);
 
   // Helper to notify other windows about settings changes via IPC
   const notifySettingsChanged = useCallback((key: string, value: unknown) => {
@@ -181,8 +334,9 @@ export const useSettingsState = () => {
     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(() => {
@@ -190,9 +344,63 @@ 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');
+
+    // Custom terminal themes
+    customThemeStore.loadFromStorage();
+  }, [syncAppearanceFromStorage, syncCustomCssFromStorage, setTerminalSettings]);
+
   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);
@@ -204,7 +412,18 @@ export const useSettingsState = () => {
     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);
@@ -213,12 +432,21 @@ export const useSettingsState = () => {
     notifySettingsChanged(STORAGE_KEY_UI_LANGUAGE, uiLanguage);
   }, [uiLanguage, notifySettingsChanged]);
 
+  // Apply and persist UI font family
+  // Re-run when fonts finish loading to get correct family for local fonts
+  useLayoutEffect(() => {
+    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);
+  }, [uiFontFamilyId, uiFontsLoaded, notifySettingsChanged]);
+
   // Listen for settings changes from other windows via IPC
-	  useEffect(() => {
-	    const bridge = netcattyBridge.get();
-	    if (!bridge?.onSettingsChanged) return;
-	    const unsubscribe = bridge.onSettingsChanged((payload) => {
-	      const { key, value } = payload;
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.onSettingsChanged) return;
+    const unsubscribe = bridge.onSettingsChanged((payload) => {
+      const { key, value } = payload;
       if (
         key === STORAGE_KEY_THEME ||
         key === STORAGE_KEY_UI_THEME_LIGHT ||
@@ -232,11 +460,16 @@ export const useSettingsState = () => {
       if (key === STORAGE_KEY_UI_LANGUAGE && typeof value === 'string') {
         const next = resolveSupportedLocale(value);
         setUiLanguage((prev) => (prev === next ? prev : next));
-	        document.documentElement.lang = next;
-	      }
+        document.documentElement.lang = next;
+      }
       if (key === STORAGE_KEY_CUSTOM_CSS && typeof value === 'string') {
         syncCustomCssFromStorage();
       }
+      if (key === STORAGE_KEY_UI_FONT_FAMILY && typeof value === 'string') {
+        if (isValidUiFontId(value)) {
+          setUiFontFamilyId(value);
+        }
+      }
       if (key === STORAGE_KEY_TERM_THEME && typeof value === 'string') {
         setTerminalThemeId(value);
       }
@@ -246,6 +479,33 @@ export const useSettingsState = () => {
       if (key === STORAGE_KEY_TERM_FONT_SIZE && typeof value === 'number') {
         setTerminalFontSize(value);
       }
+      if (key === STORAGE_KEY_TERM_SETTINGS) {
+        if (typeof value === 'string') {
+          try {
+            const parsed = JSON.parse(value) as Partial<TerminalSettings>;
+            mergeIncomingTerminalSettings(parsed);
+          } catch {
+            // ignore parse errors
+          }
+        } else if (value && typeof value === 'object') {
+          mergeIncomingTerminalSettings(value as Partial<TerminalSettings>);
+        }
+      }
+      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);
       }
@@ -263,6 +523,12 @@ 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));
+      }
     });
     return () => {
       try {
@@ -271,7 +537,7 @@ export const useSettingsState = () => {
         // ignore
       }
     };
-  }, [syncAppearanceFromStorage, syncCustomCssFromStorage]);
+  }, [mergeIncomingTerminalSettings, syncAppearanceFromStorage, syncCustomCssFromStorage]);
 
   useEffect(() => {
     const bridge = netcattyBridge.get();
@@ -323,6 +589,11 @@ export const useSettingsState = () => {
           setCustomCSS(e.newValue);
         }
       }
+      if (e.key === STORAGE_KEY_UI_FONT_FAMILY && e.newValue) {
+        if (isValidUiFontId(e.newValue) && e.newValue !== uiFontFamilyId) {
+          setUiFontFamilyId(e.newValue);
+        }
+      }
       if (e.key === STORAGE_KEY_HOTKEY_SCHEME && e.newValue) {
         const newScheme = e.newValue as HotkeyScheme;
         if (newScheme !== hotkeyScheme) {
@@ -344,14 +615,14 @@ export const useSettingsState = () => {
         }
       }
       // Sync terminal settings from other windows
-	      if (e.key === STORAGE_KEY_TERM_SETTINGS && e.newValue) {
-	        try {
-	          const newSettings = JSON.parse(e.newValue) as TerminalSettings;
-	          setTerminalSettings(_prev => ({ ...DEFAULT_TERMINAL_SETTINGS, ...newSettings }));
-	        } catch {
-	          // ignore parse errors
-	        }
-	      }
+      if (e.key === STORAGE_KEY_TERM_SETTINGS && e.newValue) {
+        try {
+          const newSettings = JSON.parse(e.newValue) as TerminalSettings;
+          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) {
@@ -371,11 +642,77 @@ export const useSettingsState = () => {
           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) {
+          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) {
+          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) {
+          setSftpShowHiddenFiles(newValue);
+        }
+      }
+      if (e.key === STORAGE_KEY_EDITOR_WORD_WRAP && e.newValue !== null) {
+        const newValue = e.newValue === 'true';
+        if (newValue !== editorWordWrap) {
+          setEditorWordWrapState(newValue);
+        }
+      }
+      if (e.key === STORAGE_KEY_SESSION_LOGS_ENABLED && e.newValue !== null) {
+        const newValue = e.newValue === 'true';
+        if (newValue !== sessionLogsEnabled) {
+          setSessionLogsEnabled(newValue);
+        }
+      }
+      if (e.key === STORAGE_KEY_SESSION_LOGS_DIR && e.newValue !== null) {
+        if (e.newValue !== sessionLogsDir) {
+          setSessionLogsDir(e.newValue);
+        }
+      }
+      if (e.key === STORAGE_KEY_SESSION_LOGS_FORMAT && e.newValue) {
+        if (
+          (e.newValue === 'txt' || e.newValue === 'raw' || e.newValue === 'html') &&
+          e.newValue !== sessionLogsFormat
+        ) {
+          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) {
+          setSftpUseCompressedUpload(newValue);
+        }
+      }
+      // Sync global hotkey enabled setting from other windows
+      if (e.key === STORAGE_KEY_GLOBAL_HOTKEY_ENABLED && e.newValue !== null) {
+        const newValue = e.newValue === 'true';
+        if (newValue !== globalHotkeyEnabled) {
+          setGlobalHotkeyEnabled(newValue);
+        }
+      }
+      // Sync auto-update enabled setting from other windows
+      if (e.key === STORAGE_KEY_AUTO_UPDATE_ENABLED && e.newValue !== null) {
+        const newValue = e.newValue === 'true';
+        if (newValue !== autoUpdateEnabled) {
+          setAutoUpdateEnabled(newValue);
+        }
+      }
     };
 
     window.addEventListener('storage', handleStorageChange);
     return () => window.removeEventListener('storage', handleStorageChange);
-  }, [theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, customCSS, hotkeyScheme, uiLanguage, terminalThemeId, terminalFontFamilyId, terminalFontSize]);
+  }, [theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, customCSS, uiFontFamilyId, hotkeyScheme, uiLanguage, terminalThemeId, terminalFontFamilyId, terminalFontSize, sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload, editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat, globalHotkeyEnabled, autoUpdateEnabled, mergeIncomingTerminalSettings]);
 
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_TERM_THEME, terminalThemeId);
@@ -394,7 +731,17 @@ export const useSettingsState = () => {
 
   useEffect(() => {
     localStorageAdapter.write(STORAGE_KEY_TERM_SETTINGS, terminalSettings);
-  }, [terminalSettings]);
+    const currentSignature = serializeTerminalSettings(terminalSettings);
+    const hasPendingUnbroadcastLocalChanges =
+      localTerminalSettingsVersionRef.current !== broadcastedLocalTerminalSettingsVersionRef.current;
+    if (incomingTerminalSettingsSignatureRef.current === currentSignature && !hasPendingUnbroadcastLocalChanges) {
+      incomingTerminalSettingsSignatureRef.current = null;
+      return;
+    }
+    incomingTerminalSettingsSignatureRef.current = null;
+    notifySettingsChanged(STORAGE_KEY_TERM_SETTINGS, terminalSettings);
+    broadcastedLocalTerminalSettingsVersionRef.current = localTerminalSettingsVersionRef.current;
+  }, [terminalSettings, notifySettingsChanged]);
 
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_HOTKEY_SCHEME, hotkeyScheme);
@@ -415,7 +762,7 @@ export const useSettingsState = () => {
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_CUSTOM_CSS, customCSS);
     notifySettingsChanged(STORAGE_KEY_CUSTOM_CSS, customCSS);
-    
+
     // Apply custom CSS to document
     let styleEl = document.getElementById('netcatty-custom-css') as HTMLStyleElement | null;
     if (!styleEl) {
@@ -426,6 +773,130 @@ export const useSettingsState = () => {
     styleEl.textContent = customCSS;
   }, [customCSS, notifySettingsChanged]);
 
+  // Persist SFTP double-click behavior
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR, sftpDoubleClickBehavior);
+    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');
+    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');
+    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');
+    notifySettingsChanged(STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD, sftpUseCompressedUpload);
+  }, [sftpUseCompressedUpload, notifySettingsChanged]);
+
+  // Persist Session Logs settings
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_SESSION_LOGS_ENABLED, sessionLogsEnabled ? 'true' : 'false');
+    notifySettingsChanged(STORAGE_KEY_SESSION_LOGS_ENABLED, sessionLogsEnabled);
+  }, [sessionLogsEnabled, notifySettingsChanged]);
+
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_SESSION_LOGS_DIR, sessionLogsDir);
+    notifySettingsChanged(STORAGE_KEY_SESSION_LOGS_DIR, sessionLogsDir);
+  }, [sessionLogsDir, notifySettingsChanged]);
+
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_SESSION_LOGS_FORMAT, sessionLogsFormat);
+    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
+    const bridge = netcattyBridge.get();
+    if (bridge?.registerGlobalHotkey) {
+      if (toggleWindowHotkey && globalHotkeyEnabled) {
+        setHotkeyRegistrationError(null);
+        bridge
+          .registerGlobalHotkey(toggleWindowHotkey)
+          .then((result) => {
+            if (result?.success === false) {
+              console.warn('[GlobalHotkey] Hotkey registration failed:', result.error);
+              setHotkeyRegistrationError(result.error || 'Failed to register hotkey');
+            }
+          })
+          .catch((err) => {
+            console.warn('[GlobalHotkey] Failed to register hotkey:', err);
+            setHotkeyRegistrationError(err?.message || 'Failed to register hotkey');
+          });
+      } else {
+        setHotkeyRegistrationError(null);
+        bridge.unregisterGlobalHotkey?.().catch((err) => {
+          console.warn('[GlobalHotkey] Failed to unregister hotkey:', err);
+        });
+      }
+    }
+  }, [toggleWindowHotkey, globalHotkeyEnabled, notifySettingsChanged]);
+
+  // Persist global hotkey enabled setting
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_GLOBAL_HOTKEY_ENABLED, globalHotkeyEnabled ? 'true' : 'false');
+    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
+    const bridge = netcattyBridge.get();
+    if (bridge?.setCloseToTray) {
+      bridge.setCloseToTray(closeToTray).catch((err) => {
+        console.warn('[SystemTray] Failed to set close-to-tray:', err);
+      });
+    }
+  }, [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.
+  // Skip IPC on initial mount to avoid overwriting the main-process preference
+  // file when localStorage has been cleared (where the default is true).
+  const autoUpdateMountedRef = useRef(false);
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_AUTO_UPDATE_ENABLED, autoUpdateEnabled ? 'true' : 'false');
+    notifySettingsChanged(STORAGE_KEY_AUTO_UPDATE_ENABLED, autoUpdateEnabled);
+    if (!autoUpdateMountedRef.current) {
+      autoUpdateMountedRef.current = true;
+      return; // Skip IPC on initial mount
+    }
+    // Notify main process on user-initiated changes
+    const bridge = netcattyBridge.get();
+    bridge?.setAutoUpdate?.(autoUpdateEnabled).catch((err: unknown) => {
+      console.warn('[AutoUpdate] Failed to set auto-update:', err);
+    });
+  }, [autoUpdateEnabled, notifySettingsChanged]);
+
   // Get merged key bindings (defaults + custom overrides)
   const keyBindings = useMemo((): KeyBinding[] => {
     return DEFAULT_KEY_BINDINGS.map(binding => {
@@ -478,14 +949,19 @@ export const useSettingsState = () => {
     localStorageAdapter.write(STORAGE_KEY_SYNC, config);
   }, []);
 
+  // Subscribe to custom theme changes so editing in-place triggers re-render
+  const customThemes = useCustomThemes();
+
   const currentTerminalTheme = useMemo(
-    () => TERMINAL_THEMES.find(t => t.id === terminalThemeId) || TERMINAL_THEMES[0],
-    [terminalThemeId]
+    () => TERMINAL_THEMES.find(t => t.id === terminalThemeId)
+      || customThemes.find(t => t.id === terminalThemeId)
+      || TERMINAL_THEMES[0],
+    [terminalThemeId, customThemes]
   );
 
   const currentTerminalFont = useMemo(
-    () => TERMINAL_FONTS.find(f => f.id === terminalFontFamilyId) || TERMINAL_FONTS[0],
-    [terminalFontFamilyId]
+    () => availableFonts.find(f => f.id === terminalFontFamilyId) || availableFonts[0],
+    [terminalFontFamilyId, availableFonts]
   );
 
   const updateTerminalSetting = useCallback(<K extends keyof TerminalSettings>(
@@ -493,11 +969,12 @@ export const useSettingsState = () => {
     value: TerminalSettings[K]
   ) => {
     setTerminalSettings(prev => ({ ...prev, [key]: value }));
-  }, []);
+  }, [setTerminalSettings]);
 
   return {
     theme,
     setTheme,
+    resolvedTheme,
     lightUiThemeId,
     setLightUiThemeId,
     darkUiThemeId,
@@ -506,6 +983,8 @@ export const useSettingsState = () => {
     setAccentMode,
     customAccent,
     setCustomAccent,
+    uiFontFamilyId,
+    setUiFontFamilyId,
     syncConfig,
     updateSyncConfig,
     uiLanguage,
@@ -532,5 +1011,49 @@ export const useSettingsState = () => {
     setIsHotkeyRecording,
     customCSS,
     setCustomCSS,
+    sftpDoubleClickBehavior,
+    setSftpDoubleClickBehavior,
+    sftpAutoSync,
+    setSftpAutoSync,
+    sftpShowHiddenFiles,
+    setSftpShowHiddenFiles,
+    sftpUseCompressedUpload,
+    setSftpUseCompressedUpload,
+    // Editor Settings
+    editorWordWrap,
+    setEditorWordWrap: useCallback((enabled: boolean) => {
+      setEditorWordWrapState(enabled);
+      localStorageAdapter.writeString(STORAGE_KEY_EDITOR_WORD_WRAP, String(enabled));
+      notifySettingsChanged(STORAGE_KEY_EDITOR_WORD_WRAP, enabled);
+    }, [notifySettingsChanged]),
+    availableFonts,
+    // Session Logs
+    sessionLogsEnabled,
+    setSessionLogsEnabled,
+    sessionLogsDir,
+    setSessionLogsDir,
+    sessionLogsFormat,
+    setSessionLogsFormat,
+    // Global Toggle Window (Quake Mode)
+    toggleWindowHotkey,
+    setToggleWindowHotkey,
+    closeToTray,
+    setCloseToTray,
+    autoUpdateEnabled,
+    setAutoUpdateEnabled,
+    hotkeyRegistrationError,
+    globalHotkeyEnabled,
+    setGlobalHotkeyEnabled,
+    rehydrateAllFromStorage,
+    // 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,
+      customThemes,
+    ]),
   };
 };

application/state/useSftpBackend.ts

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { netcattyBridge } from "../../infrastructure/services/netcattyBridge";
-import type { RemoteFile } from "../../types";
+import type { RemoteFile, SftpFilenameEncoding } from "../../types";
 
 export const useSftpBackend = () => {
   const openSftp = useCallback(async (options: NetcattySSHOptions) => {
@@ -15,34 +15,34 @@ export const useSftpBackend = () => {
     return bridge.closeSftp(sftpId);
   }, []);
 
-  const listSftp = useCallback(async (sftpId: string, path: string) => {
+  const listSftp = useCallback(async (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.listSftp) throw new Error("SFTP bridge unavailable");
-    return bridge.listSftp(sftpId, path);
+    return bridge.listSftp(sftpId, path, encoding);
   }, []);
 
-  const readSftp = useCallback(async (sftpId: string, path: string) => {
+  const readSftp = useCallback(async (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.readSftp) throw new Error("SFTP bridge unavailable");
-    return bridge.readSftp(sftpId, path);
+    return bridge.readSftp(sftpId, path, encoding);
   }, []);
 
-  const readSftpBinary = useCallback(async (sftpId: string, path: string) => {
+  const readSftpBinary = useCallback(async (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.readSftpBinary) throw new Error("readSftpBinary unavailable");
-    return bridge.readSftpBinary(sftpId, path);
+    return bridge.readSftpBinary(sftpId, path, encoding);
   }, []);
 
-  const writeSftp = useCallback(async (sftpId: string, path: string, content: string) => {
+  const writeSftp = useCallback(async (sftpId: string, path: string, content: string, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.writeSftp) throw new Error("SFTP bridge unavailable");
-    return bridge.writeSftp(sftpId, path, content);
+    return bridge.writeSftp(sftpId, path, content, encoding);
   }, []);
 
-  const writeSftpBinary = useCallback(async (sftpId: string, path: string, content: ArrayBuffer) => {
+  const writeSftpBinary = useCallback(async (sftpId: string, path: string, content: ArrayBuffer, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.writeSftpBinary) throw new Error("writeSftpBinary unavailable");
-    return bridge.writeSftpBinary(sftpId, path, content);
+    return bridge.writeSftpBinary(sftpId, path, content, encoding);
   }, []);
 
   const writeSftpBinaryWithProgress = useCallback(
@@ -51,6 +51,7 @@ export const useSftpBackend = () => {
       path: string,
       content: ArrayBuffer,
       transferId: string,
+      encoding?: SftpFilenameEncoding,
       onProgress?: (transferred: number, total: number, speed: number) => void,
       onComplete?: () => void,
       onError?: (error: string) => void,
@@ -62,6 +63,7 @@ export const useSftpBackend = () => {
         path,
         content,
         transferId,
+        encoding,
         onProgress,
         onComplete,
         onError,
@@ -70,34 +72,34 @@ export const useSftpBackend = () => {
     [],
   );
 
-  const mkdirSftp = useCallback(async (sftpId: string, path: string) => {
+  const mkdirSftp = useCallback(async (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.mkdirSftp) throw new Error("mkdirSftp unavailable");
-    return bridge.mkdirSftp(sftpId, path);
+    return bridge.mkdirSftp(sftpId, path, encoding);
   }, []);
 
-  const deleteSftp = useCallback(async (sftpId: string, path: string) => {
+  const deleteSftp = useCallback(async (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.deleteSftp) throw new Error("deleteSftp unavailable");
-    return bridge.deleteSftp(sftpId, path);
+    return bridge.deleteSftp(sftpId, path, encoding);
   }, []);
 
-  const renameSftp = useCallback(async (sftpId: string, oldPath: string, newPath: string) => {
+  const renameSftp = useCallback(async (sftpId: string, oldPath: string, newPath: string, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.renameSftp) throw new Error("renameSftp unavailable");
-    return bridge.renameSftp(sftpId, oldPath, newPath);
+    return bridge.renameSftp(sftpId, oldPath, newPath, encoding);
   }, []);
 
-  const statSftp = useCallback(async (sftpId: string, path: string) => {
+  const statSftp = useCallback(async (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.statSftp) throw new Error("statSftp unavailable");
-    return bridge.statSftp(sftpId, path);
+    return bridge.statSftp(sftpId, path, encoding);
   }, []);
 
-  const chmodSftp = useCallback(async (sftpId: string, path: string, mode: string) => {
+  const chmodSftp = useCallback(async (sftpId: string, path: string, mode: string, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.chmodSftp) throw new Error("chmodSftp unavailable");
-    return bridge.chmodSftp(sftpId, path, mode);
+    return bridge.chmodSftp(sftpId, path, mode, encoding);
   }, []);
 
   const listLocalDir = useCallback(async (path: string): Promise<RemoteFile[]> => {
@@ -168,12 +170,84 @@ export const useSftpBackend = () => {
     return bridge.cancelTransfer(transferId);
   }, []);
 
+  const cancelSftpUpload = useCallback(async (transferId: string) => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.cancelSftpUpload) return undefined;
+    return bridge.cancelSftpUpload(transferId);
+  }, []);
+
   const onTransferProgress = useCallback((transferId: string, cb: Parameters<NonNullable<NetcattyBridge["onTransferProgress"]>>[1]) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.onTransferProgress) return undefined;
     return bridge.onTransferProgress(transferId, cb);
   }, []);
 
+  const selectApplication = useCallback(async () => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.selectApplication) return undefined;
+    return bridge.selectApplication();
+  }, []);
+
+  const showSaveDialog = useCallback(async (
+    defaultPath: string,
+    filters?: Array<{ name: string; extensions: string[] }>
+  ) => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.showSaveDialog) return null;
+    return bridge.showSaveDialog(defaultPath, filters);
+  }, []);
+
+  const downloadSftpToTempAndOpen = useCallback(async (
+    sftpId: string,
+    remotePath: string,
+    fileName: string,
+    appPath: string,
+    options?: { enableWatch?: boolean; encoding?: SftpFilenameEncoding }
+  ): Promise<{ localTempPath: string; watchId?: string }> => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.downloadSftpToTemp || !bridge?.openWithApplication) {
+      throw new Error("Download to temp / open with unavailable");
+    }
+    
+    // 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) {
+      try {
+        await bridge.registerTempFile(sftpId, tempPath);
+      } catch (err) {
+        console.warn("[SFTPBackend] Failed to register temp file for cleanup:", err);
+      }
+    }
+    
+    // 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 };
+  }, []);
+
   return {
     openSftp,
     closeSftp,
@@ -200,7 +274,10 @@ export const useSftpBackend = () => {
 
     startStreamTransfer,
     cancelTransfer,
+    cancelSftpUpload,
     onTransferProgress,
+    selectApplication,
+    showSaveDialog,
+    downloadSftpToTempAndOpen,
   };
 };
-

application/state/useSftpFileAssociations.ts

@@ -0,0 +1,149 @@
+/**
+ * useSftpFileAssociations - Hook for managing SFTP file opener associations
+ * 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 { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
+import type { FileAssociation, FileOpenerType, SystemAppInfo } from '../../lib/sftpFileUtils';
+import { getFileExtension } from '../../lib/sftpFileUtils';
+
+export interface FileAssociationEntry {
+  openerType: FileOpenerType;
+  systemApp?: SystemAppInfo;
+}
+
+export interface FileAssociationsMap {
+  [extension: string]: FileAssociationEntry;
+}
+
+// Shared state and subscribers for cross-component synchronization
+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)) {
+      if (typeof value === 'string') {
+        migrated[ext] = { openerType: value as FileOpenerType };
+      } else {
+        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());
+}
+
+function subscribe(callback: () => void) {
+  subscribers.add(callback);
+  return () => subscribers.delete(callback);
+}
+
+function getSnapshot() {
+  return snapshotRef;
+}
+
+export function useSftpFileAssociations() {
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const associations = snapshot.associations;
+
+  // Listen for storage events from other tabs/windows
+  useEffect(() => {
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key === STORAGE_KEY_SFTP_FILE_ASSOCIATIONS) {
+        updateAssociations(loadFromStorage());
+      }
+    };
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
+
+  /**
+   * Get the opener entry for a file based on its extension
+   */
+  const getOpenerForFile = useCallback((fileName: string): FileAssociationEntry | null => {
+    const ext = getFileExtension(fileName);
+    return associations[ext] || null;
+  }, [associations]);
+
+  /**
+   * Set the opener type for a specific extension
+   */
+  const setOpenerForExtension = useCallback((
+    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 },
+    });
+  }, []);
+
+  /**
+   * Remove the association for a specific extension
+   */
+  const removeAssociation = useCallback((extension: string) => {
+    const next = { ...snapshotRef.associations };
+    delete next[extension.toLowerCase()];
+    updateAssociations(next);
+  }, []);
+
+  /**
+   * Get all associations as an array
+   */
+  const getAllAssociations = useCallback((): FileAssociation[] => {
+    const result = 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]);
+
+  /**
+   * Clear all associations
+   */
+  const clearAllAssociations = useCallback(() => {
+    updateAssociations({});
+  }, []);
+
+  return {
+    associations,
+    getOpenerForFile,
+    setOpenerForExtension,
+    removeAssociation,
+    getAllAssociations,
+    clearAllAssociations,
+  };
+}

application/state/useStoredBoolean.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
+
+/**
+ * Hook for persisting a boolean value to localStorage.
+ * @param storageKey - The key to use for localStorage
+ * @param fallback - The default value if no stored value exists (defaults to false)
+ * @returns A tuple of [value, setValue] similar to useState
+ */
+export const useStoredBoolean = (
+    storageKey: string,
+    fallback: boolean = false,
+) => {
+    const [value, setValue] = useState<boolean>(() => {
+        const stored = localStorageAdapter.readBoolean(storageKey);
+        return stored ?? fallback;
+    });
+
+    useEffect(() => {
+        localStorageAdapter.writeBoolean(storageKey, value);
+    }, [storageKey, value]);
+
+    return [value, setValue] 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/useStoredViewMode.ts

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
 
-export type ViewMode = "grid" | "list";
+export type ViewMode = "grid" | "list" | "tree";
 
 const isViewMode = (value: string | null): value is ViewMode =>
-  value === "grid" || value === "list";
+  value === "grid" || value === "list" || value === "tree";
 
 export const useStoredViewMode = (
   storageKey: string,

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

@@ -17,6 +17,11 @@ export const useTerminalBackend = () => {
     return !!bridge?.startLocalSession;
   }, []);
 
+  const serialAvailable = useCallback(() => {
+    const bridge = netcattyBridge.get();
+    return !!bridge?.startSerialSession;
+  }, []);
+
   const execAvailable = useCallback(() => {
     const bridge = netcattyBridge.get();
     return !!bridge?.execCommand;
@@ -46,6 +51,12 @@ export const useTerminalBackend = () => {
     return bridge.startLocalSession(options);
   }, []);
 
+  const startSerialSession = useCallback(async (options: Parameters<NonNullable<NetcattyBridge["startSerialSession"]>>[0]) => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.startSerialSession) throw new Error("startSerialSession unavailable");
+    return bridge.startSerialSession(options);
+  }, []);
+
   const execCommand = useCallback(async (options: Parameters<NetcattyBridge["execCommand"]>[0]) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.execCommand) throw new Error("execCommand unavailable");
@@ -67,13 +78,19 @@ 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);
@@ -99,21 +116,45 @@ export const useTerminalBackend = () => {
     return !!bridge?.startSSHSession;
   }, []);
 
+  const listSerialPorts = useCallback(async () => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.listSerialPorts) return [];
+    return bridge.listSerialPorts();
+  }, []);
+
+  const getSessionPwd = useCallback(async (sessionId: string) => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.getSessionPwd) return { success: false, error: 'getSessionPwd unavailable' };
+    return bridge.getSessionPwd(sessionId);
+  }, []);
+
+  const getServerStats = useCallback(async (sessionId: string) => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.getServerStats) return { success: false, error: 'getServerStats unavailable' };
+    return bridge.getServerStats(sessionId);
+  }, []);
+
   return {
     backendAvailable,
     telnetAvailable,
     moshAvailable,
     localAvailable,
+    serialAvailable,
     execAvailable,
     openExternalAvailable,
     startSSHSession,
     startTelnetSession,
     startMoshSession,
     startLocalSession,
+    startSerialSession,
+    listSerialPorts,
     execCommand,
+    getSessionPwd,
+    getServerStats,
     writeToSession,
     resizeSession,
     closeSession,
+    setSessionEncoding,
     onSessionData,
     onSessionExit,
     onChainProgress,

application/state/useTrayPanelBackend.ts

@@ -0,0 +1,72 @@
+import { useCallback } from "react";
+import { netcattyBridge } from "../../infrastructure/services/netcattyBridge";
+
+export const useTrayPanelBackend = () => {
+  const hideTrayPanel = useCallback(async () => {
+    const bridge = netcattyBridge.get();
+    await bridge?.hideTrayPanel?.();
+  }, []);
+
+  const openMainWindow = useCallback(async () => {
+    const bridge = netcattyBridge.get();
+    await bridge?.openMainWindow?.();
+  }, []);
+
+  const quitApp = useCallback(async () => {
+    const bridge = netcattyBridge.get();
+    await bridge?.quitApp?.();
+  }, []);
+
+  const jumpToSession = useCallback(async (sessionId: string) => {
+    const bridge = netcattyBridge.get();
+    await bridge?.jumpToSessionFromTrayPanel?.(sessionId);
+  }, []);
+
+  const connectToHostFromTrayPanel = useCallback(async (hostId: string) => {
+    const bridge = netcattyBridge.get();
+    await bridge?.connectToHostFromTrayPanel?.(hostId);
+  }, []);
+
+  const onTrayPanelCloseRequest = useCallback((callback: () => void) => {
+    const bridge = netcattyBridge.get();
+    return bridge?.onTrayPanelCloseRequest?.(callback);
+  }, []);
+
+  const onTrayPanelRefresh = useCallback((callback: () => void) => {
+    const bridge = netcattyBridge.get();
+    return bridge?.onTrayPanelRefresh?.(callback);
+  }, []);
+
+  const onTrayPanelMenuData = useCallback(
+    (
+      callback: (data: {
+        sessions?: Array<{ id: string; label: string; hostLabel: string; status: "connecting" | "connected" | "disconnected"; workspaceId?: string; workspaceTitle?: string }>;
+        portForwardRules?: Array<{
+          id: string;
+          label: string;
+          type: "local" | "remote" | "dynamic";
+          localPort: number;
+          remoteHost?: string;
+          remotePort?: number;
+          status: "inactive" | "connecting" | "active" | "error";
+          hostId?: string;
+        }>;
+      }) => void,
+    ) => {
+      const bridge = netcattyBridge.get();
+      return bridge?.onTrayPanelMenuData?.(callback);
+    },
+    [],
+  );
+
+  return {
+    hideTrayPanel,
+    openMainWindow,
+    quitApp,
+    jumpToSession,
+    connectToHostFromTrayPanel,
+    onTrayPanelCloseRequest,
+    onTrayPanelRefresh,
+    onTrayPanelMenuData,
+  };
+};

application/state/useTreeExpandedState.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
+
+export const useTreeExpandedState = (storageKey: string) => {
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => {
+    const stored = localStorageAdapter.readString(storageKey);
+    if (stored) {
+      try {
+        const paths = JSON.parse(stored) as string[];
+        return new Set(paths);
+      } catch {
+        return new Set();
+      }
+    }
+    return new Set();
+  });
+
+  useEffect(() => {
+    const pathsArray = Array.from(expandedPaths);
+    localStorageAdapter.writeString(storageKey, JSON.stringify(pathsArray));
+  }, [storageKey, expandedPaths]);
+
+  const togglePath = (path: string) => {
+    const newExpanded = new Set(expandedPaths);
+    if (newExpanded.has(path)) {
+      newExpanded.delete(path);
+    } else {
+      newExpanded.add(path);
+    }
+    setExpandedPaths(newExpanded);
+  };
+
+  const expandAll = (allPaths: string[]) => {
+    setExpandedPaths(new Set(allPaths));
+  };
+
+  const collapseAll = () => {
+    setExpandedPaths(new Set());
+  };
+
+  return {
+    expandedPaths,
+    togglePath,
+    expandAll,
+    collapseAll,
+  };
+};

application/state/useUpdateCheck.ts

@@ -1,13 +1,17 @@
 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 } 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';
@@ -19,6 +23,10 @@ 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;
   hasUpdate: boolean;
@@ -26,6 +34,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 +47,7 @@ export interface UseUpdateCheckResult {
   checkNow: () => Promise<UpdateCheckResult | null>;
   dismissUpdate: () => void;
   openReleasePage: () => void;
+  installUpdate: () => void;
 }
 
 /**
@@ -41,7 +56,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 +70,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 +125,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 +312,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 +357,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 +514,10 @@ export function useUpdateCheck(): UseUpdateCheckResult {
     window.open(url, '_blank', 'noopener,noreferrer');
   }, [updateState.latestRelease]);
 
+  const installUpdate = useCallback(() => {
+    netcattyBridge.get()?.installUpdate?.();
+  }, []);
+
   // Startup check with delay - runs once on mount
   useEffect(() => {
     debugLog('Startup check effect mounted, IS_UPDATE_DEMO_MODE:', IS_UPDATE_DEMO_MODE);
@@ -219,12 +548,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 +562,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 +603,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 +649,13 @@ export function useUpdateCheck(): UseUpdateCheckResult {
         clearTimeout(startupCheckTimeoutRef.current);
       }
     };
-  }, [updateState.currentVersion, performCheck]);
+  }, [updateState.currentVersion, autoUpdateEnabled, performCheck]);
 
   return {
     updateState,
     checkNow,
     dismissUpdate,
     openReleasePage,
+    installUpdate,
   };
 }

application/state/useVaultState.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { normalizeDistroId, sanitizeHost } from "../../domain/host";
 import {
   ConnectionLog,
@@ -6,6 +6,7 @@ import {
   Identity,
   KeyCategory,
   KnownHost,
+  ManagedSource,
   ShellHistoryEntry,
   Snippet,
   SSHKey,
@@ -22,11 +23,20 @@ import {
   STORAGE_KEY_KEYS,
   STORAGE_KEY_KNOWN_HOSTS,
   STORAGE_KEY_LEGACY_KEYS,
+  STORAGE_KEY_MANAGED_SOURCES,
   STORAGE_KEY_SHELL_HISTORY,
   STORAGE_KEY_SNIPPET_PACKAGES,
   STORAGE_KEY_SNIPPETS,
 } from "../../infrastructure/config/storageKeys";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
+import {
+  decryptHosts,
+  decryptIdentities,
+  decryptKeys,
+  encryptHosts,
+  encryptIdentities,
+  encryptKeys,
+} from "../../infrastructure/persistence/secureFieldAdapter";
 
 type ExportableVaultData = {
   hosts: Host[];
@@ -34,6 +44,7 @@ type ExportableVaultData = {
   identities?: Identity[];
   snippets: Snippet[];
   customGroups: string[];
+  snippetPackages?: string[];
   knownHosts?: KnownHost[];
 };
 
@@ -95,21 +106,49 @@ export const useVaultState = () => {
   const [knownHosts, setKnownHosts] = useState<KnownHost[]>([]);
   const [shellHistory, setShellHistory] = useState<ShellHistoryEntry[]>([]);
   const [connectionLogs, setConnectionLogs] = useState<ConnectionLog[]>([]);
+  const [managedSources, setManagedSources] = useState<ManagedSource[]>([]);
+
+  // Write-version counters prevent out-of-order async writes from overwriting
+  // newer data.  Each update bumps the counter; the .then() callback only
+  // persists if its version still matches the latest.
+  const hostsWriteVersion = useRef(0);
+  const keysWriteVersion = useRef(0);
+  const identitiesWriteVersion = useRef(0);
+
+  // Read-sequence counters for cross-window storage events.  Each incoming
+  // event bumps the counter; the async decrypt callback only applies state if
+  // its sequence still matches, preventing stale decrypts from overwriting
+  // newer data when multiple events arrive in quick succession.
+  const hostsReadSeq = useRef(0);
+  const keysReadSeq = useRef(0);
+  const identitiesReadSeq = useRef(0);
 
   const updateHosts = useCallback((data: Host[]) => {
     const cleaned = data.map(sanitizeHost);
     setHosts(cleaned);
-    localStorageAdapter.write(STORAGE_KEY_HOSTS, cleaned);
+    const ver = ++hostsWriteVersion.current;
+    encryptHosts(cleaned).then((enc) => {
+      if (ver === hostsWriteVersion.current)
+        localStorageAdapter.write(STORAGE_KEY_HOSTS, enc);
+    });
   }, []);
 
   const updateKeys = useCallback((data: SSHKey[]) => {
     setKeys(data);
-    localStorageAdapter.write(STORAGE_KEY_KEYS, data);
+    const ver = ++keysWriteVersion.current;
+    encryptKeys(data).then((enc) => {
+      if (ver === keysWriteVersion.current)
+        localStorageAdapter.write(STORAGE_KEY_KEYS, enc);
+    });
   }, []);
 
   const updateIdentities = useCallback((data: Identity[]) => {
     setIdentities(data);
-    localStorageAdapter.write(STORAGE_KEY_IDENTITIES, data);
+    const ver = ++identitiesWriteVersion.current;
+    encryptIdentities(data).then((enc) => {
+      if (ver === identitiesWriteVersion.current)
+        localStorageAdapter.write(STORAGE_KEY_IDENTITIES, enc);
+    });
   }, []);
 
   const updateSnippets = useCallback((data: Snippet[]) => {
@@ -132,6 +171,11 @@ export const useVaultState = () => {
     localStorageAdapter.write(STORAGE_KEY_KNOWN_HOSTS, data);
   }, []);
 
+  const updateManagedSources = useCallback((data: ManagedSource[]) => {
+    setManagedSources(data);
+    localStorageAdapter.write(STORAGE_KEY_MANAGED_SOURCES, data);
+  }, []);
+
   const clearVaultData = useCallback(() => {
     updateHosts([]);
     updateKeys([]);
@@ -140,6 +184,7 @@ export const useVaultState = () => {
     updateSnippetPackages([]);
     updateCustomGroups([]);
     updateKnownHosts([]);
+    updateManagedSources([]);
     localStorageAdapter.remove(STORAGE_KEY_LEGACY_KEYS);
   }, [
     updateHosts,
@@ -149,6 +194,7 @@ export const useVaultState = () => {
     updateSnippetPackages,
     updateCustomGroups,
     updateKnownHosts,
+    updateManagedSources,
   ]);
 
   const addShellHistoryEntry = useCallback(
@@ -261,7 +307,11 @@ export const useVaultState = () => {
     // Add to hosts using functional update
     setHosts((prevHosts) => {
       const updated = [...prevHosts, sanitizeHost(newHost)];
-      localStorageAdapter.write(STORAGE_KEY_HOSTS, updated);
+      const ver = ++hostsWriteVersion.current;
+      encryptHosts(updated).then((enc) => {
+        if (ver === hostsWriteVersion.current)
+          localStorageAdapter.write(STORAGE_KEY_HOSTS, enc);
+      });
       return updated;
     });
 
@@ -269,76 +319,120 @@ export const useVaultState = () => {
   }, []);
 
   useEffect(() => {
-    const savedHosts = localStorageAdapter.read<Host[]>(STORAGE_KEY_HOSTS);
-    const savedKeysRaw = localStorageAdapter.read<unknown[]>(STORAGE_KEY_KEYS);
-    const savedIdentities =
-      localStorageAdapter.read<Identity[]>(STORAGE_KEY_IDENTITIES);
-    const savedGroups = localStorageAdapter.read<string[]>(STORAGE_KEY_GROUPS);
-    const savedSnippets =
-      localStorageAdapter.read<Snippet[]>(STORAGE_KEY_SNIPPETS);
-    const savedSnippetPackages = localStorageAdapter.read<string[]>(
-      STORAGE_KEY_SNIPPET_PACKAGES,
-    );
+    const init = async () => {
+      const savedHosts = localStorageAdapter.read<Host[]>(STORAGE_KEY_HOSTS);
 
-    if (savedHosts) {
-      const sanitized = savedHosts.map(sanitizeHost);
-      setHosts(sanitized);
-      localStorageAdapter.write(STORAGE_KEY_HOSTS, sanitized);
-    } else {
-      updateHosts(INITIAL_HOSTS);
-    }
+      if (savedHosts) {
+        // Capture version before the async gap so that any write occurring
+        // during decryption (storage event, user edit) advances the counter
+        // and causes this stale result to be discarded.
+        const ver = ++hostsWriteVersion.current;
+        const decrypted = await decryptHosts(savedHosts);
+        if (ver === hostsWriteVersion.current) {
+          const sanitized = decrypted.map(sanitizeHost);
+          setHosts(sanitized);
+          encryptHosts(sanitized).then((enc) => {
+            if (ver === hostsWriteVersion.current)
+              localStorageAdapter.write(STORAGE_KEY_HOSTS, enc);
+          });
+        }
+      } else {
+        updateHosts(INITIAL_HOSTS);
+      }
 
-    // Migrate old keys to new format with source/category fields
-    if (savedKeysRaw?.length) {
-      const migratedKeys: SSHKey[] = [];
-      const legacyKeys: LegacyKeyRecord[] = [];
+      // Read keys fresh here (not before the hosts await) so we don't apply
+      // a stale snapshot if keys were updated during host decryption.
+      const savedKeysRaw = localStorageAdapter.read<unknown[]>(STORAGE_KEY_KEYS);
 
-      for (const entry of savedKeysRaw) {
-        const record =
-          entry && typeof entry === "object" ? (entry as LegacyKeyRecord) : null;
-        if (!record) continue;
+      // Migrate old keys to new format with source/category fields
+      if (savedKeysRaw?.length) {
+        const migratedKeys: SSHKey[] = [];
+        const legacyKeys: LegacyKeyRecord[] = [];
 
-        if (isLegacyUnsupportedKey(record)) {
-          legacyKeys.push(record);
-          continue;
+        for (const entry of savedKeysRaw) {
+          const record =
+            entry && typeof entry === "object" ? (entry as LegacyKeyRecord) : null;
+          if (!record) continue;
+
+          if (isLegacyUnsupportedKey(record)) {
+            legacyKeys.push(record);
+            continue;
+          }
+
+          migratedKeys.push(migrateKey(record as Partial<SSHKey>));
         }
 
-        migratedKeys.push(migrateKey(record as Partial<SSHKey>));
+        // Decrypt sensitive fields (passphrase, privateKey)
+        const keyVer = ++keysWriteVersion.current;
+        const decryptedKeys = await decryptKeys(migratedKeys);
+        if (keyVer === keysWriteVersion.current) {
+          setKeys(decryptedKeys);
+          encryptKeys(decryptedKeys).then((enc) => {
+            if (keyVer === keysWriteVersion.current)
+              localStorageAdapter.write(STORAGE_KEY_KEYS, enc);
+          });
+        }
+        if (legacyKeys.length) {
+          localStorageAdapter.write(STORAGE_KEY_LEGACY_KEYS, legacyKeys);
+        }
       }
 
-      setKeys(migratedKeys);
-      // Persist migrated keys
-      localStorageAdapter.write(STORAGE_KEY_KEYS, migratedKeys);
-      if (legacyKeys.length) {
-        localStorageAdapter.write(STORAGE_KEY_LEGACY_KEYS, legacyKeys);
+      // Read identities fresh here (not before the hosts/keys awaits) so we
+      // don't apply a stale snapshot if identities were updated during prior decryption.
+      const savedIdentities =
+        localStorageAdapter.read<Identity[]>(STORAGE_KEY_IDENTITIES);
+      if (savedIdentities) {
+        const idVer = ++identitiesWriteVersion.current;
+        const decryptedIds = await decryptIdentities(savedIdentities);
+        if (idVer === identitiesWriteVersion.current) {
+          setIdentities(decryptedIds);
+          encryptIdentities(decryptedIds).then((enc) => {
+            if (idVer === identitiesWriteVersion.current)
+              localStorageAdapter.write(STORAGE_KEY_IDENTITIES, enc);
+          });
+        }
       }
-    }
 
-    if (savedIdentities) setIdentities(savedIdentities);
+      // Read remaining non-encrypted data fresh after all async gaps above
+      const savedGroups = localStorageAdapter.read<string[]>(STORAGE_KEY_GROUPS);
+      const savedSnippets =
+        localStorageAdapter.read<Snippet[]>(STORAGE_KEY_SNIPPETS);
+      const savedSnippetPackages = localStorageAdapter.read<string[]>(
+        STORAGE_KEY_SNIPPET_PACKAGES,
+      );
 
-    if (savedSnippets) setSnippets(savedSnippets);
-    else updateSnippets(INITIAL_SNIPPETS);
+      if (savedSnippets) setSnippets(savedSnippets);
+      else updateSnippets(INITIAL_SNIPPETS);
 
-    if (savedGroups) setCustomGroups(savedGroups);
-    if (savedSnippetPackages) setSnippetPackages(savedSnippetPackages);
+      if (savedGroups) setCustomGroups(savedGroups);
+      if (savedSnippetPackages) setSnippetPackages(savedSnippetPackages);
 
-    // Load known hosts
-    const savedKnownHosts = localStorageAdapter.read<KnownHost[]>(
-      STORAGE_KEY_KNOWN_HOSTS,
-    );
-    if (savedKnownHosts) setKnownHosts(savedKnownHosts);
+      // Load known hosts
+      const savedKnownHosts = localStorageAdapter.read<KnownHost[]>(
+        STORAGE_KEY_KNOWN_HOSTS,
+      );
+      if (savedKnownHosts) setKnownHosts(savedKnownHosts);
 
-    // Load shell history
-    const savedShellHistory = localStorageAdapter.read<ShellHistoryEntry[]>(
-      STORAGE_KEY_SHELL_HISTORY,
-    );
-    if (savedShellHistory) setShellHistory(savedShellHistory);
+      // Load shell history
+      const savedShellHistory = localStorageAdapter.read<ShellHistoryEntry[]>(
+        STORAGE_KEY_SHELL_HISTORY,
+      );
+      if (savedShellHistory) setShellHistory(savedShellHistory);
 
-    // Load connection logs
-    const savedConnectionLogs = localStorageAdapter.read<ConnectionLog[]>(
-      STORAGE_KEY_CONNECTION_LOGS,
-    );
-    if (savedConnectionLogs) setConnectionLogs(savedConnectionLogs);
+      // Load connection logs
+      const savedConnectionLogs = localStorageAdapter.read<ConnectionLog[]>(
+        STORAGE_KEY_CONNECTION_LOGS,
+      );
+      if (savedConnectionLogs) setConnectionLogs(savedConnectionLogs);
+
+      // Load managed sources
+      const savedManagedSources = localStorageAdapter.read<ManagedSource[]>(
+        STORAGE_KEY_MANAGED_SOURCES,
+      );
+      if (savedManagedSources) setManagedSources(savedManagedSources);
+    };
+
+    init();
   }, [updateHosts, updateSnippets]);
 
   useEffect(() => {
@@ -351,7 +445,17 @@ export const useVaultState = () => {
 
       if (key === STORAGE_KEY_HOSTS) {
         const next = safeParse<Host[]>(event.newValue) ?? [];
-        setHosts(next.map(sanitizeHost));
+        // Bump write version to invalidate any in-flight encrypt from this
+        // window — the cross-window data is newer and must not be overwritten.
+        ++hostsWriteVersion.current;
+        const seq = ++hostsReadSeq.current;
+        const writeAtStart = hostsWriteVersion.current;
+        decryptHosts(next).then((dec) => {
+          // Discard if a newer storage event arrived OR a local write occurred
+          // during the decrypt (writeVersion would have advanced).
+          if (seq === hostsReadSeq.current && writeAtStart === hostsWriteVersion.current)
+            setHosts(dec.map(sanitizeHost));
+        });
         return;
       }
 
@@ -364,13 +468,25 @@ export const useVaultState = () => {
           if (!record || isLegacyUnsupportedKey(record)) continue;
           migratedKeys.push(migrateKey(record as Partial<SSHKey>));
         }
-        setKeys(migratedKeys);
+        ++keysWriteVersion.current;
+        const seq = ++keysReadSeq.current;
+        const writeAtStart = keysWriteVersion.current;
+        decryptKeys(migratedKeys).then((dec) => {
+          if (seq === keysReadSeq.current && writeAtStart === keysWriteVersion.current)
+            setKeys(dec);
+        });
         return;
       }
 
       if (key === STORAGE_KEY_IDENTITIES) {
         const next = safeParse<Identity[]>(event.newValue) ?? [];
-        setIdentities(next);
+        ++identitiesWriteVersion.current;
+        const seq = ++identitiesReadSeq.current;
+        const writeAtStart = identitiesWriteVersion.current;
+        decryptIdentities(next).then((dec) => {
+          if (seq === identitiesReadSeq.current && writeAtStart === identitiesWriteVersion.current)
+            setIdentities(dec);
+        });
         return;
       }
 
@@ -407,6 +523,12 @@ export const useVaultState = () => {
       if (key === STORAGE_KEY_CONNECTION_LOGS) {
         const next = safeParse<ConnectionLog[]>(event.newValue) ?? [];
         setConnectionLogs(next);
+        return;
+      }
+
+      if (key === STORAGE_KEY_MANAGED_SOURCES) {
+        const next = safeParse<ManagedSource[]>(event.newValue) ?? [];
+        setManagedSources(next);
       }
     };
 
@@ -420,7 +542,11 @@ export const useVaultState = () => {
       const next = prev.map((h) =>
         h.id === hostId ? { ...h, distro: normalized } : h,
       );
-      localStorageAdapter.write(STORAGE_KEY_HOSTS, next);
+      const ver = ++hostsWriteVersion.current;
+      encryptHosts(next).then((enc) => {
+        if (ver === hostsWriteVersion.current)
+          localStorageAdapter.write(STORAGE_KEY_HOSTS, enc);
+      });
       return next;
     });
   }, []);
@@ -432,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(
@@ -444,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);
     },
     [
@@ -452,6 +580,7 @@ export const useVaultState = () => {
       updateIdentities,
       updateSnippets,
       updateCustomGroups,
+      updateSnippetPackages,
       updateKnownHosts,
     ],
   );
@@ -474,6 +603,7 @@ export const useVaultState = () => {
     knownHosts,
     shellHistory,
     connectionLogs,
+    managedSources,
     updateHosts,
     updateKeys,
     updateIdentities,
@@ -481,6 +611,7 @@ export const useVaultState = () => {
     updateSnippetPackages,
     updateCustomGroups,
     updateKnownHosts,
+    updateManagedSources,
     addShellHistoryEntry,
     clearShellHistory,
     addConnectionLog,

components/AIChatSidePanel.tsx

@@ -0,0 +1,823 @@
+/**
+ * AIChatSidePanel - Main AI chat interface side panel
+ *
+ * Zed-style agent panel with agent selector, scoped chat sessions,
+ * message list, input area, and session history drawer.
+ *
+ * Core logic is decomposed into focused hooks:
+ * - useAIChatStreaming: stream processing, abort management, agent sub-flows
+ * - useToolApproval: tool approval workflow, timeouts, resume logic
+ * - useConversationExport: export formats & object URL lifecycle
+ */
+
+import {
+  History,
+  Plus,
+  Trash2,
+  X,
+} from 'lucide-react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { cn } from '../lib/utils';
+import { useI18n } from '../application/i18n/I18nProvider';
+import { useWindowControls } from '../application/state/useWindowControls';
+import { useImageUpload } from '../application/state/useImageUpload';
+import type {
+  AIPermissionMode,
+  AISession,
+  AISessionScope,
+  ChatMessage,
+  DiscoveredAgent,
+  ExternalAgentConfig,
+  ProviderConfig,
+  WebSearchConfig,
+} from '../infrastructure/ai/types';
+import { getAgentModelPresets } from '../infrastructure/ai/types';
+import { useAgentDiscovery } from '../application/state/useAgentDiscovery';
+import { Button } from './ui/button';
+import { ScrollArea } from './ui/scroll-area';
+import AgentSelector from './ai/AgentSelector';
+import ChatInput from './ai/ChatInput';
+import ChatMessageList from './ai/ChatMessageList';
+import ConversationExport from './ai/ConversationExport';
+import { useAIChatStreaming, getNetcattyBridge } from './ai/hooks/useAIChatStreaming';
+import { useToolApproval } from './ai/hooks/useToolApproval';
+import { useConversationExport } from './ai/hooks/useConversationExport';
+import type { ExecutorContext } from '../infrastructure/ai/cattyAgent/executor';
+
+// -------------------------------------------------------------------
+// Props
+// -------------------------------------------------------------------
+
+interface AIChatSidePanelProps {
+  // Session state (per-scope)
+  sessions: AISession[];
+  activeSessionIdMap: Record<string, string | null>;
+  setActiveSessionId: (scopeKey: string, id: string | null) => void;
+  createSession: (scope: AISessionScope, agentId?: string) => AISession;
+  deleteSession: (sessionId: string, scopeKey?: string) => void;
+  updateSessionTitle: (sessionId: string, title: string) => void;
+  updateSessionExternalSessionId: (sessionId: string, externalSessionId: string | undefined) => void;
+  addMessageToSession: (sessionId: string, message: ChatMessage) => void;
+  updateLastMessage: (
+    sessionId: string,
+    updater: (msg: ChatMessage) => ChatMessage,
+  ) => void;
+  updateMessageById: (
+    sessionId: string,
+    messageId: string,
+    updater: (msg: ChatMessage) => ChatMessage,
+  ) => void;
+  // Provider config
+  providers: ProviderConfig[];
+  activeProviderId: string;
+  activeModelId: string;
+
+  // Agent info
+  defaultAgentId: string;
+  externalAgents: ExternalAgentConfig[];
+  setExternalAgents?: (value: ExternalAgentConfig[] | ((prev: ExternalAgentConfig[]) => ExternalAgentConfig[])) => void;
+  agentModelMap: Record<string, string>;
+  setAgentModel: (agentId: string, modelId: string) => void;
+
+  // Safety
+  globalPermissionMode: AIPermissionMode;
+  setGlobalPermissionMode?: (mode: AIPermissionMode) => void;
+  commandBlocklist?: string[];
+  maxIterations?: number;
+
+  // Web search
+  webSearchConfig?: WebSearchConfig | null;
+
+  // Context
+  scopeType: 'terminal' | 'workspace';
+  scopeTargetId?: string;
+  scopeHostIds?: string[];
+  scopeLabel?: string;
+
+  // Terminal session context (from parent)
+  terminalSessions?: Array<{
+    sessionId: string;
+    hostId: string;
+    hostname: string;
+    label: string;
+    os?: string;
+    username?: string;
+    connected: boolean;
+  }>;
+
+  // Visibility
+  isVisible?: boolean;
+}
+
+// -------------------------------------------------------------------
+// Helpers
+// -------------------------------------------------------------------
+
+function generateId(): string {
+  return `msg-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+function buildAcpHistoryMessages(messages: ChatMessage[]): Array<{ role: 'user' | 'assistant'; content: string }> {
+  return messages.flatMap((message) => {
+    if (message.role === 'system') return [];
+
+    if (message.role === 'user') {
+      return message.content ? [{ role: 'user' as const, content: message.content }] : [];
+    }
+
+    if (message.role === 'assistant') {
+      const parts: string[] = [];
+      if (message.content) parts.push(message.content);
+      if (message.toolCalls?.length) {
+        parts.push(...message.toolCalls.map((tc) => `Tool call: ${tc.name}(${JSON.stringify(tc.arguments ?? {})})`));
+      }
+      if (!parts.length) return [];
+      return [{ role: 'assistant' as const, content: parts.join('\n\n') }];
+    }
+
+    if (message.role === 'tool' && message.toolResults?.length) {
+      return message.toolResults.map((tr) => ({
+        role: 'assistant' as const,
+        content: `Tool result:\n${tr.content}`,
+      }));
+    }
+
+    return [];
+  });
+}
+
+// -------------------------------------------------------------------
+// Component
+// -------------------------------------------------------------------
+
+const AIChatSidePanelInner: React.FC<AIChatSidePanelProps> = ({
+  sessions,
+  activeSessionIdMap,
+  setActiveSessionId: setActiveSessionIdForScope,
+  createSession,
+  deleteSession,
+  updateSessionTitle,
+  updateSessionExternalSessionId,
+  addMessageToSession,
+  updateLastMessage,
+  updateMessageById,
+  providers,
+  activeProviderId,
+  activeModelId,
+  defaultAgentId,
+  externalAgents,
+  setExternalAgents,
+  agentModelMap,
+  setAgentModel,
+  globalPermissionMode,
+  setGlobalPermissionMode,
+  commandBlocklist,
+  maxIterations = 20,
+  webSearchConfig,
+  scopeType,
+  scopeTargetId,
+  scopeHostIds,
+  scopeLabel,
+  terminalSessions = [],
+  isVisible = true,
+}) => {
+  const { t } = useI18n();
+  // ── Per-scope state ──
+  // Derive scope key for per-scope isolation
+  const scopeKey = `${scopeType}:${scopeTargetId ?? ''}`;
+
+  // Per-scope input values
+  const [inputValueMap, setInputValueMap] = useState<Record<string, string>>({});
+  const inputValue = inputValueMap[scopeKey] ?? '';
+  const setInputValue = useCallback((val: string) => {
+    setInputValueMap(prev => ({ ...prev, [scopeKey]: val }));
+  }, [scopeKey]);
+
+  const [showHistory, setShowHistory] = useState(false);
+  const [currentAgentId, setCurrentAgentId] = useState(defaultAgentId);
+
+  const { images, addImages, removeImage, clearImages } = useImageUpload();
+  const { openSettingsWindow } = useWindowControls();
+  const terminalSessionsRef = useRef(terminalSessions);
+  terminalSessionsRef.current = terminalSessions;
+  const scopeTypeRef = useRef(scopeType);
+  scopeTypeRef.current = scopeType;
+  const scopeTargetIdRef = useRef(scopeTargetId);
+  scopeTargetIdRef.current = scopeTargetId;
+  const scopeLabelRef = useRef(scopeLabel);
+  scopeLabelRef.current = scopeLabel;
+
+  // ── Streaming hook ──
+  const {
+    streamingSessionIds,
+    setStreamingForScope,
+    abortControllersRef,
+    processCattyStream,
+    sendToCattyAgent,
+    sendToExternalAgent,
+    reportStreamError,
+  } = useAIChatStreaming({
+    maxIterations,
+    addMessageToSession,
+    updateLastMessage,
+    updateMessageById,
+  });
+
+  // ── Tool approval hook ──
+  const {
+    pendingApprovalContextRef,
+    setPendingApproval,
+    handleApprovalResponse,
+  } = useToolApproval({
+    addMessageToSession,
+    updateLastMessage,
+    updateMessageById,
+    setStreamingForScope,
+    abortControllersRef,
+    processCattyStream,
+    t,
+  });
+
+  // Per-scope active session ID
+  const activeSessionId = activeSessionIdMap[scopeKey] ?? null;
+  const isStreaming = activeSessionId ? streamingSessionIds.has(activeSessionId) : false;
+  const setActiveSessionId = useCallback((id: string | null) => {
+    setActiveSessionIdForScope(scopeKey, id);
+  }, [scopeKey, setActiveSessionIdForScope]);
+
+  // Restore agent selector from active session when scope changes
+  useEffect(() => {
+    if (activeSessionId) {
+      const session = sessions.find((s) => s.id === activeSessionId);
+      if (session) {
+        setCurrentAgentId(session.agentId);
+      }
+    }
+  }, [scopeKey, activeSessionId, sessions]);
+
+  // Proactively sync terminal session metadata to main process whenever scope or sessions change
+  useEffect(() => {
+    const bridge = getNetcattyBridge();
+    if (bridge?.aiMcpUpdateSessions && terminalSessions.length > 0) {
+      void bridge.aiMcpUpdateSessions(terminalSessions, activeSessionId ?? undefined);
+    }
+  }, [terminalSessions, scopeKey, activeSessionId]);
+
+  // Sync provider configs to main process so it can decrypt API keys server-side.
+  // Keys stay encrypted in transit; main process decrypts only when making HTTP requests.
+  useEffect(() => {
+    const bridge = getNetcattyBridge();
+    if (bridge?.aiSyncProviders && providers.length > 0) {
+      void bridge.aiSyncProviders(providers);
+    }
+  }, [providers]);
+
+  // Sync web search config to main process (allowlist + encrypted API key for server-side decryption).
+  // Note: This is fire-and-forget; if the first search fires before sync completes, it will fail
+  // with a clear error and succeed on retry. Making this blocking would require async tool creation.
+  useEffect(() => {
+    const bridge = getNetcattyBridge();
+    if (bridge?.aiSyncWebSearch) {
+      void bridge.aiSyncWebSearch(webSearchConfig?.apiHost || null, webSearchConfig?.apiKey || null);
+    }
+  }, [webSearchConfig?.apiHost, webSearchConfig?.apiKey, webSearchConfig?.enabled]);
+
+  // Preserve active streams across tab switches. The panel is conditionally
+  // mounted per tab, so unmounting here should not cancel in-flight work.
+  useEffect(() => {
+    return () => {
+      // no-op: stream lifecycle is managed by explicit stop/delete actions
+    };
+  }, []);
+
+  // Agent discovery
+  const {
+    discoveredAgents,
+    isDiscovering,
+    rediscover,
+    enableAgent,
+  } = useAgentDiscovery(externalAgents, setExternalAgents);
+
+  const handleEnableDiscoveredAgent = useCallback(
+    (agent: DiscoveredAgent) => {
+      const config = enableAgent(agent);
+      setExternalAgents?.((prev) => [...prev, config]);
+    },
+    [enableAgent, setExternalAgents],
+  );
+
+  // Active session (scoped)
+  const activeSession = useMemo(
+    () => sessions.find((s) => s.id === activeSessionId) ?? null,
+    [sessions, activeSessionId],
+  );
+
+  const messages = activeSession?.messages ?? [];
+
+  // ── Export hook ──
+  const { handleExport } = useConversationExport(activeSession);
+
+  // Active provider info
+  const activeProvider = useMemo(
+    () => providers.find((p) => p.id === activeProviderId),
+    [providers, activeProviderId],
+  );
+
+  const providerDisplayName = activeProvider?.name ?? '';
+  const modelDisplayName = activeModelId || activeProvider?.defaultModel || '';
+
+  // Agent model presets for the current external agent
+  const currentAgentConfig = useMemo(
+    () => currentAgentId !== 'catty' ? externalAgents.find(a => a.id === currentAgentId) : undefined,
+    [currentAgentId, externalAgents],
+  );
+  const agentModelPresets = useMemo(
+    () => getAgentModelPresets(currentAgentConfig?.command),
+    [currentAgentConfig?.command],
+  );
+
+  // Per-agent model: recall last selection or use first preset as default
+  const selectedAgentModel = useMemo(() => {
+    const stored = agentModelMap[currentAgentId];
+    if (stored && agentModelPresets.some(p => stored === p.id || stored.startsWith(p.id + '/'))) {
+      return stored;
+    }
+    // Default to first preset; for models with thinking levels, use the default level
+    if (agentModelPresets.length > 0) {
+      const first = agentModelPresets[0];
+      if (first.thinkingLevels?.length) {
+        return `${first.id}/${first.thinkingLevels[first.thinkingLevels.length - 1]}`;
+      }
+      return first.id;
+    }
+    return undefined;
+  }, [currentAgentId, agentModelMap, agentModelPresets]);
+
+  const handleAgentModelSelect = useCallback((modelId: string) => {
+    setAgentModel(currentAgentId, modelId);
+  }, [currentAgentId, setAgentModel]);
+
+  // Filtered sessions for history (matching current scope type)
+  const historySessions = useMemo(
+    () =>
+      sessions
+        .filter((s) => s.scope.type === scopeType && s.scope.targetId === scopeTargetId)
+        .sort((a, b) => b.updatedAt - a.updatedAt),
+    [sessions, scopeType, scopeTargetId],
+  );
+
+  // -------------------------------------------------------------------
+  // Handlers
+  // -------------------------------------------------------------------
+
+  const handleNewChat = useCallback(() => {
+    const scope: AISessionScope = {
+      type: scopeType,
+      targetId: scopeTargetId,
+      hostIds: scopeHostIds,
+    };
+    const session = createSession(scope, currentAgentId);
+    setActiveSessionId(session.id);
+    setShowHistory(false);
+    setInputValue('');
+  }, [
+    scopeType,
+    scopeTargetId,
+    scopeHostIds,
+    currentAgentId,
+    createSession,
+    setActiveSessionId,
+    setInputValue,
+  ]);
+
+  const handleOpenSettings = useCallback(() => {
+    void openSettingsWindow();
+  }, [openSettingsWindow]);
+
+  // -------------------------------------------------------------------
+  // Shared helpers for handleSend sub-flows
+  // -------------------------------------------------------------------
+
+  /** Ref to always access latest sessions (avoids stale closure in autoTitleSession). */
+  const sessionsRef = useRef(sessions);
+  sessionsRef.current = sessions;
+
+  /** Refs to avoid re-creating handleSend on every keystroke / image change. */
+  const inputValueRef = useRef(inputValue);
+  inputValueRef.current = inputValue;
+  const imagesRef = useRef(images);
+  imagesRef.current = images;
+
+  /** Auto-title a session from the first user message if untitled. */
+  const autoTitleSession = useCallback((sessionId: string, text: string) => {
+    const s = sessionsRef.current.find(x => x.id === sessionId);
+    if (s && (!s.title || s.title === 'New Chat')) {
+      updateSessionTitle(sessionId, text.length > 50 ? text.slice(0, 50) + '...' : text);
+    }
+  }, [updateSessionTitle]);
+
+  const getExecutorContext = useCallback((): ExecutorContext => ({
+    sessions: terminalSessionsRef.current,
+    workspaceId: scopeTypeRef.current === 'workspace' ? scopeTargetIdRef.current : undefined,
+    workspaceName: scopeTypeRef.current === 'workspace' ? scopeLabelRef.current : undefined,
+  }), []);
+
+  /** Ensure a session exists for the current scope and return its ID. */
+  const ensureSession = useCallback((): string => {
+    if (activeSessionId) return activeSessionId;
+    const scope: AISessionScope = { type: scopeType, targetId: scopeTargetId, hostIds: scopeHostIds };
+    const session = createSession(scope, currentAgentId);
+    setActiveSessionId(session.id);
+    return session.id;
+  }, [activeSessionId, scopeType, scopeTargetId, scopeHostIds, currentAgentId, createSession, setActiveSessionId]);
+
+  // -------------------------------------------------------------------
+  // Main send handler (thin orchestrator)
+  // -------------------------------------------------------------------
+
+  const handleSend = useCallback(async () => {
+    const trimmed = inputValueRef.current.trim();
+    const sendScopeKey = scopeKey;
+    if (!trimmed || isStreaming) return;
+
+    const isExternalAgent = currentAgentId !== 'catty';
+
+    // No provider configured for built-in agent
+    if (!isExternalAgent && !activeProvider) {
+      const errSessionId = ensureSession();
+      addMessageToSession(errSessionId, { id: generateId(), role: 'user', content: trimmed, timestamp: Date.now() });
+      addMessageToSession(errSessionId, { id: generateId(), role: 'assistant', content: t('ai.chat.noProvider'), timestamp: Date.now() });
+      setInputValue('');
+      return;
+    }
+
+    // Ensure session exists
+    const sessionId = ensureSession();
+
+    // Capture images before clearing
+    const attachedImages = imagesRef.current.map(img => ({ base64Data: img.base64Data, mediaType: img.mediaType, filename: img.filename }));
+
+    // Add user message
+    addMessageToSession(sessionId, {
+      id: generateId(), role: 'user', content: trimmed,
+      ...(attachedImages.length > 0 ? { images: attachedImages } : {}),
+      timestamp: Date.now(),
+    });
+    setInputValue('');
+    clearImages();
+    setStreamingForScope(sessionId, true);
+
+    // Create assistant message placeholder with a tracked ID
+    const agentConfig = isExternalAgent ? externalAgents.find(a => a.id === currentAgentId) : undefined;
+    const assistantMsgId = generateId();
+    addMessageToSession(sessionId, {
+      id: assistantMsgId, role: 'assistant', content: '', timestamp: Date.now(),
+      model: isExternalAgent ? (agentConfig?.name || 'external') : (activeModelId || activeProvider?.defaultModel || ''),
+      providerId: isExternalAgent ? undefined : activeProvider?.providerId,
+    });
+
+    const abortController = new AbortController();
+    abortControllersRef.current.set(sessionId, abortController);
+    const currentSession = sessionsRef.current.find(s => s.id === sessionId);
+
+    if (isExternalAgent) {
+      if (!agentConfig) {
+        updateMessageById(sessionId, assistantMsgId, msg => ({ ...msg, content: 'External agent not found. Please check settings.', executionStatus: 'failed' }));
+        setStreamingForScope(sessionId, false);
+        return;
+      }
+      try {
+        await sendToExternalAgent(sessionId, trimmed, agentConfig, abortController, attachedImages, {
+          existingSessionId: currentSession?.externalSessionId,
+          updateExternalSessionId: updateSessionExternalSessionId,
+          historyMessages: buildAcpHistoryMessages(currentSession?.messages ?? []),
+          terminalSessions,
+          providers,
+          selectedAgentModel,
+        });
+      } catch (err) {
+        reportStreamError(sessionId, abortController.signal, err);
+      }
+      // Clear any lingering statusText when the external agent stream finishes
+      updateLastMessage(sessionId, msg => msg.statusText ? { ...msg, statusText: '' } : msg);
+      setStreamingForScope(sessionId, false);
+      abortControllersRef.current.delete(sessionId);
+      autoTitleSession(sessionId, trimmed);
+    } else {
+      await sendToCattyAgent(sessionId, sendScopeKey, trimmed, abortController, currentSession ?? undefined, assistantMsgId, {
+        activeProvider,
+        activeModelId,
+        scopeType,
+        scopeTargetId,
+        scopeLabel,
+        globalPermissionMode,
+        commandBlocklist,
+        terminalSessions,
+        webSearchConfig,
+        getExecutorContext,
+        setPendingApproval,
+        autoTitleSession,
+      });
+    }
+  }, [
+    isStreaming, activeProvider, scopeKey, currentAgentId,
+    activeModelId, externalAgents,
+    ensureSession, addMessageToSession, updateMessageById, updateLastMessage,
+    setStreamingForScope, setInputValue, clearImages,
+    sendToExternalAgent, sendToCattyAgent, reportStreamError, autoTitleSession, t,
+    abortControllersRef, terminalSessions, providers, selectedAgentModel, updateSessionExternalSessionId,
+    scopeType, scopeTargetId, scopeLabel, globalPermissionMode, commandBlocklist, webSearchConfig, getExecutorContext, setPendingApproval,
+  ]);
+
+  const handleStop = useCallback(() => {
+    if (!activeSessionId) return;
+    const controller = abortControllersRef.current.get(activeSessionId);
+    controller?.abort();
+    abortControllersRef.current.delete(activeSessionId);
+    setStreamingForScope(activeSessionId, false);
+    // Clear statusText on the last message so stale status indicators disappear
+    updateLastMessage(activeSessionId, msg => ({
+      ...msg,
+      statusText: '',
+      executionStatus: msg.executionStatus === 'running' ? 'cancelled' : msg.executionStatus,
+    }));
+    // Also clear any pending approval (clears timeout too via setPendingApproval)
+    if (pendingApprovalContextRef.current?.sessionId === activeSessionId) {
+      setPendingApproval(null);
+    }
+  }, [activeSessionId, setStreamingForScope, updateLastMessage, setPendingApproval, abortControllersRef, pendingApprovalContextRef]);
+
+  const handleSelectSession = useCallback(
+    (sessionId: string) => {
+      setActiveSessionId(sessionId);
+      // Restore agent selector to match the session's bound agent
+      const session = sessions.find((s) => s.id === sessionId);
+      if (session) {
+        setCurrentAgentId(session.agentId);
+      }
+      setShowHistory(false);
+    },
+    [setActiveSessionId, sessions],
+  );
+
+  const handleDeleteSession = useCallback(
+    (e: React.MouseEvent, sessionId: string) => {
+      e.stopPropagation();
+      deleteSession(sessionId, scopeKey);
+      // Active session clearing is handled by deleteSession with scopeKey
+    },
+    [deleteSession, scopeKey],
+  );
+
+  const handleAgentChange = useCallback((agentId: string) => {
+    setCurrentAgentId(agentId);
+    // Preserve the current session in history and start a new one with the selected agent
+    const scope: AISessionScope = { type: scopeType, targetId: scopeTargetId, hostIds: scopeHostIds };
+    const session = createSession(scope, agentId);
+    setActiveSessionId(session.id);
+  }, [scopeType, scopeTargetId, scopeHostIds, createSession, setActiveSessionId]);
+
+  // -------------------------------------------------------------------
+  // Render
+  // -------------------------------------------------------------------
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="flex flex-col h-full bg-background">
+      {/* ── Header ── */}
+      <div className="px-2.5 py-1.5 flex items-center justify-between border-b border-border/50 shrink-0">
+        <AgentSelector
+          currentAgentId={currentAgentId}
+          externalAgents={externalAgents}
+          discoveredAgents={discoveredAgents}
+          isDiscovering={isDiscovering}
+          onSelectAgent={handleAgentChange}
+          onEnableDiscoveredAgent={handleEnableDiscoveredAgent}
+          onRediscover={rediscover}
+          onManageAgents={handleOpenSettings}
+        />
+        <div className="flex items-center gap-0.5">
+          <ConversationExport
+            session={activeSession}
+            onExport={handleExport}
+          />
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 rounded-md text-muted-foreground/62 hover:bg-white/[0.05] hover:text-foreground"
+            onClick={() => setShowHistory(!showHistory)}
+            title="Session history"
+          >
+            <History size={14} />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 rounded-md text-primary/82 hover:bg-primary/[0.10] hover:text-primary"
+            onClick={handleNewChat}
+            title="New chat"
+          >
+            <Plus size={15} />
+          </Button>
+        </div>
+      </div>
+
+      {/* ── Main content ── */}
+      {showHistory ? (
+        <SessionHistoryDrawer
+          sessions={historySessions}
+          activeSessionId={activeSessionId}
+          onSelect={handleSelectSession}
+          onDelete={handleDeleteSession}
+          onClose={() => setShowHistory(false)}
+        />
+      ) : (
+        <>
+          {/* Chat messages */}
+          <ChatMessageList
+            messages={messages}
+            isStreaming={isStreaming}
+            onApprove={(messageId) => void handleApprovalResponse(messageId, true, {
+              terminalSessions,
+              scopeType,
+              scopeTargetId,
+              scopeLabel,
+              globalPermissionMode,
+              commandBlocklist,
+              webSearchConfig,
+            })}
+            onReject={(messageId) => void handleApprovalResponse(messageId, false, {
+              terminalSessions,
+              scopeType,
+              scopeTargetId,
+              scopeLabel,
+              globalPermissionMode,
+              commandBlocklist,
+              webSearchConfig,
+            })}
+          />
+
+          {/* Recent sessions (Zed-style, shown when no messages) */}
+          {messages.length === 0 && historySessions.length > 0 && (
+            <div className="shrink-0 px-4 pb-1">
+              <div className="flex items-baseline justify-between mb-2">
+                <span className="text-[11px] text-muted-foreground/30 tracking-wide">{t('ai.chat.recent')}</span>
+                <button
+                  onClick={() => setShowHistory(true)}
+                  className="text-[11px] text-muted-foreground/30 hover:text-muted-foreground/50 transition-colors cursor-pointer"
+                >
+                  {t('ai.chat.viewAll')}
+                </button>
+              </div>
+              {historySessions.slice(0, 3).map((session) => (
+                <button
+                  key={session.id}
+                  onClick={() => handleSelectSession(session.id)}
+                  className="w-full flex items-baseline justify-between py-1.5 text-left hover:text-foreground transition-colors cursor-pointer"
+                >
+                  <span className="text-[13px] text-foreground/60 truncate pr-4">
+                    {session.title || t('ai.chat.untitled')}
+                  </span>
+                  <span className="text-[11px] text-muted-foreground/25 shrink-0">
+                    {formatRelativeTime(new Date(session.updatedAt), t)}
+                  </span>
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* Input area */}
+          <ChatInput
+            value={inputValue}
+            onChange={setInputValue}
+            onSend={handleSend}
+            onStop={handleStop}
+            isStreaming={isStreaming}
+            providerName={providerDisplayName}
+            modelName={modelDisplayName}
+            agentName={currentAgentId === 'catty' ? 'Catty Agent' : externalAgents.find(a => a.id === currentAgentId)?.name}
+            modelPresets={agentModelPresets}
+            selectedModelId={selectedAgentModel}
+            onModelSelect={handleAgentModelSelect}
+            images={images}
+            onAddImages={addImages}
+            onRemoveImage={removeImage}
+            hosts={terminalSessions.map(s => ({ sessionId: s.sessionId, hostname: s.hostname, label: s.label, connected: s.connected }))}
+            permissionMode={globalPermissionMode}
+            onPermissionModeChange={setGlobalPermissionMode}
+          />
+        </>
+      )}
+
+    </div>
+  );
+};
+
+// -------------------------------------------------------------------
+// Session History Drawer
+// -------------------------------------------------------------------
+
+interface SessionHistoryDrawerProps {
+  sessions: AISession[];
+  activeSessionId: string | null;
+  onSelect: (sessionId: string) => void;
+  onDelete: (e: React.MouseEvent, sessionId: string) => void;
+  onClose: () => void;
+}
+
+const SessionHistoryDrawer: React.FC<SessionHistoryDrawerProps> = ({
+  sessions,
+  activeSessionId,
+  onSelect,
+  onDelete,
+  onClose,
+}) => {
+  const { t } = useI18n();
+  return (
+    <div className="flex-1 flex flex-col min-h-0">
+      <div className="px-4 py-2.5 flex items-center justify-between shrink-0 border-b border-border/30">
+        <span className="text-[13px] font-medium text-foreground/80">{t('ai.chat.allSessions')}</span>
+        <button
+          onClick={onClose}
+          className="text-[12px] text-muted-foreground/60 hover:text-muted-foreground transition-colors cursor-pointer"
+        >
+          <X size={14} />
+        </button>
+      </div>
+      <ScrollArea className="flex-1">
+        <div className="px-3">
+          {sessions.length === 0 ? (
+            <div className="py-12 text-center">
+              <p className="text-[13px] text-muted-foreground/40">
+                {t('ai.chat.noSessions')}
+              </p>
+            </div>
+          ) : (
+            sessions.map((session) => {
+              const isActive = session.id === activeSessionId;
+              const time = new Date(session.updatedAt);
+              const timeStr = formatRelativeTime(time, t);
+
+              return (
+                <button
+                  key={session.id}
+                  onClick={() => onSelect(session.id)}
+                  className={cn(
+                    'w-full flex items-center justify-between py-2.5 border-b border-border/20 text-left transition-colors cursor-pointer group',
+                    isActive ? 'text-foreground' : 'text-foreground/70 hover:text-foreground',
+                  )}
+                >
+                  <span className="text-[13px] truncate pr-3 flex-1 min-w-0">
+                    {session.title || t('ai.chat.untitled')}
+                  </span>
+                  <div className="flex items-center gap-2 shrink-0">
+                    <span className="text-[12px] text-muted-foreground/50">
+                      {timeStr}
+                    </span>
+                    <button
+                      onClick={(e) => onDelete(e, session.id)}
+                      className="opacity-0 group-hover:opacity-100 p-0.5 hover:text-destructive transition-all cursor-pointer"
+                      title="Delete"
+                    >
+                      <Trash2 size={12} />
+                    </button>
+                  </div>
+                </button>
+              );
+            })
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
+
+// -------------------------------------------------------------------
+// Helpers
+// -------------------------------------------------------------------
+
+function formatRelativeTime(date: Date, t: (key: string) => string): string {
+  const now = Date.now();
+  const diff = now - date.getTime();
+  const minutes = Math.floor(diff / 60_000);
+  const hours = Math.floor(diff / 3_600_000);
+  const days = Math.floor(diff / 86_400_000);
+
+  if (minutes < 1) return t('ai.chat.justNow');
+  if (minutes < 60) return t('ai.chat.minutesAgo').replace('{n}', String(minutes));
+  if (hours < 24) return t('ai.chat.hoursAgo').replace('{n}', String(hours));
+  if (days < 7) return t('ai.chat.daysAgo').replace('{n}', String(days));
+  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+}
+
+// -------------------------------------------------------------------
+// Export
+// -------------------------------------------------------------------
+
+const AIChatSidePanel = React.memo(AIChatSidePanelInner);
+AIChatSidePanel.displayName = 'AIChatSidePanel';
+
+export default AIChatSidePanel;
+export { AIChatSidePanel };
+export type { AIChatSidePanelProps };

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';
@@ -482,7 +485,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} />
@@ -678,10 +681,9 @@ 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);
             }
         }
@@ -729,6 +731,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 +754,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) {
@@ -840,6 +854,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 +905,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 +974,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 +1003,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 +1067,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'}
-                    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'}
+                        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 && !isProviderReadyForSync(sync.providers.github)}
                         onConnect={handleConnectGitHub}
                         onDisconnect={() => sync.disconnectProvider('github')}
                         onSync={() => handleSync('github')}
@@ -1061,13 +1083,13 @@ 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'}
-                    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'}
+                        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 && !isProviderReadyForSync(sync.providers.google)}
                         onConnect={handleConnectGoogle}
                         onDisconnect={() => sync.disconnectProvider('google')}
                         onSync={() => handleSync('google')}
@@ -1077,13 +1099,13 @@ 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'}
-                    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'}
+                        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 && !isProviderReadyForSync(sync.providers.onedrive)}
                         onConnect={handleConnectOneDrive}
                         onDisconnect={() => sync.disconnectProvider('onedrive')}
                         onSync={() => handleSync('onedrive')}
@@ -1093,13 +1115,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'}
-                    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'}
+                        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 && !isProviderReadyForSync(sync.providers.webdav)}
                         onEdit={openWebdavDialog}
                         onConnect={openWebdavDialog}
                         onDisconnect={() => sync.disconnectProvider('webdav')}
@@ -1110,13 +1132,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'}
-                    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'}
+                        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 && !isProviderReadyForSync(sync.providers.s3)}
                         onEdit={openS3Dialog}
                         onConnect={openS3Dialog}
                         onDisconnect={() => sync.disconnectProvider('s3')}
@@ -1322,6 +1344,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 +1588,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 +1606,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'));
@@ -1714,7 +1755,7 @@ interface CloudSyncSettingsProps {
 
 export const CloudSyncSettings: React.FC<CloudSyncSettingsProps> = (props) => {
     const { securityState } = useCloudSync();
-    
+
     // Simplified UX: once a master key is configured, we auto-unlock via safeStorage
     // so users don't have to manage a separate LOCKED screen.
     if (securityState === 'NO_KEY') {

components/ConnectionLogsManager.tsx

@@ -4,9 +4,10 @@ import {
     Server,
     Terminal,
     Trash2,
+    Usb,
     User,
 } from "lucide-react";
-import React, { memo, useCallback, useMemo } from "react";
+import React, { memo, useCallback, useMemo, useState } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { cn } from "../lib/utils";
 import { ConnectionLog, Host } from "../types";
@@ -63,6 +64,7 @@ interface LogItemProps {
 const LogItem = memo<LogItemProps>(({ log, onToggleSaved, onDelete, onClick }) => {
     const { t, resolvedLocale } = useI18n();
     const isLocal = log.protocol === "local" || log.hostname === "localhost";
+    const isSerial = log.protocol === "serial";
 
     return (
         <div
@@ -92,14 +94,14 @@ const LogItem = memo<LogItemProps>(({ log, onToggleSaved, onDelete, onClick }) =
             <div className="flex items-center gap-2 flex-1 min-w-0">
                 <div className={cn(
                     "h-8 w-8 rounded-lg flex items-center justify-center shrink-0",
-                    isLocal ? "bg-emerald-500/10 text-emerald-500" : "bg-blue-500/10 text-blue-500"
+                    isSerial ? "bg-amber-500/10 text-amber-500" : isLocal ? "bg-emerald-500/10 text-emerald-500" : "bg-blue-500/10 text-blue-500"
                 )}>
-                    {isLocal ? <Terminal size={14} /> : <Server size={14} />}
+                    {isSerial ? <Usb size={14} /> : isLocal ? <Terminal size={14} /> : <Server size={14} />}
                 </div>
                 <div className="min-w-0">
                     <div className="text-sm font-medium truncate">{isLocal ? t("logs.localTerminal") : log.hostLabel}</div>
                     <div className="text-xs text-muted-foreground truncate">
-                        {isLocal ? "local" : `${log.protocol}, ${log.username}`}
+                        {isLocal ? "local" : isSerial ? `serial, ${log.hostname}` : `${log.protocol}, ${log.username}`}
                     </div>
                 </div>
             </div>
@@ -147,7 +149,11 @@ const ConnectionLogsManager: React.FC<ConnectionLogsManagerProps> = ({
     onOpenLogView,
 }) => {
     const { t } = useI18n();
-    const RENDER_LIMIT = 100;
+    const INITIAL_RENDER_LIMIT = 30;
+    const LOAD_MORE_COUNT = 30;
+
+    // Track how many items to show
+    const [renderLimit, setRenderLimit] = useState(INITIAL_RENDER_LIMIT);
 
     // Sort logs by newest first
     const filteredLogs = useMemo(() => {
@@ -155,10 +161,14 @@ const ConnectionLogsManager: React.FC<ConnectionLogsManagerProps> = ({
     }, [logs]);
 
     const displayedLogs = useMemo(() => {
-        return filteredLogs.slice(0, RENDER_LIMIT);
-    }, [filteredLogs]);
+        return filteredLogs.slice(0, renderLimit);
+    }, [filteredLogs, renderLimit]);
 
-    const hasMore = filteredLogs.length > RENDER_LIMIT;
+    const hasMore = filteredLogs.length > renderLimit;
+
+    const handleLoadMore = useCallback(() => {
+        setRenderLimit(prev => prev + LOAD_MORE_COUNT);
+    }, []);
 
     const handleToggleSaved = useCallback(
         (id: string) => onToggleSaved(id),
@@ -220,9 +230,12 @@ const ConnectionLogsManager: React.FC<ConnectionLogsManagerProps> = ({
                         <>
                             {renderedItems}
                             {hasMore && (
-                                <div className="text-center py-4 text-sm text-muted-foreground">
-                                    {t("logs.showing", { limit: RENDER_LIMIT, total: filteredLogs.length })}
-                                </div>
+                                <button
+                                    onClick={handleLoadMore}
+                                    className="w-full py-3 text-sm text-primary hover:bg-secondary/50 transition-colors"
+                                >
+                                    {t("logs.loadMore", { count: Math.min(LOAD_MORE_COUNT, filteredLogs.length - renderLimit) })}
+                                </button>
                             )}
                         </>
                     )}

components/CreateWorkspaceDialog.tsx

@@ -0,0 +1,143 @@
+import { Search } from 'lucide-react';
+import React, { useMemo, useState, useEffect } from 'react';
+import { useI18n } from '../application/i18n/I18nProvider';
+import { Host } from '../types';
+import { DistroAvatar } from './DistroAvatar';
+import { Button } from './ui/button';
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from './ui/dialog';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { ScrollArea } from './ui/scroll-area';
+
+interface CreateWorkspaceDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  hosts: Host[];
+  onCreate: (name: string, selectedHosts: Host[]) => void;
+}
+
+export const CreateWorkspaceDialog: React.FC<CreateWorkspaceDialogProps> = ({
+  isOpen,
+  onClose,
+  hosts,
+  onCreate,
+}) => {
+  const { t } = useI18n();
+  const [name, setName] = useState('');
+  const [search, setSearch] = useState('');
+  const [selectedHostIds, setSelectedHostIds] = useState<Set<string>>(new Set());
+
+  const filteredHosts = useMemo(() => {
+    if (!search.trim()) return hosts;
+    const term = search.toLowerCase();
+    return hosts.filter(h =>
+      h.label.toLowerCase().includes(term) ||
+      h.hostname.toLowerCase().includes(term) ||
+      (h.group || '').toLowerCase().includes(term)
+    );
+  }, [hosts, search]);
+
+  const toggleHost = (hostId: string) => {
+    setSelectedHostIds(prev => {
+      const next = new Set(prev);
+      if (next.has(hostId)) {
+        next.delete(hostId);
+      } else {
+        next.add(hostId);
+      }
+      return next;
+    });
+  };
+
+  const handleCreate = () => {
+    const selected = hosts.filter(h => selectedHostIds.has(h.id));
+    onCreate(name, selected);
+    onClose();
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+        setName('');
+        setSearch('');
+        setSelectedHostIds(new Set());
+    }
+  }, [isOpen]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-md flex flex-col max-h-[80vh]">
+        <DialogHeader>
+          <DialogTitle>{t('dialog.createWorkspace.title', 'Create Workspace')}</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2 flex-1 flex flex-col min-h-0">
+          <div className="space-y-2">
+            <Label htmlFor="workspace-name">{t('field.name', 'Name')}</Label>
+            <Input
+              id="workspace-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder={t('placeholder.workspaceName', 'Workspace Name')}
+              autoFocus
+            />
+          </div>
+
+          <div className="space-y-2 flex-1 flex flex-col min-h-0">
+            <Label>{t('field.selectHosts', 'Select Hosts')}</Label>
+            <div className="relative">
+                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                placeholder={t('placeholder.searchHosts', 'Search hosts...')}
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="pl-8"
+                />
+            </div>
+
+            <div className="border rounded-md flex-1 min-h-[200px]">
+                <ScrollArea className="h-full max-h-[300px]">
+                    <div className="p-2 space-y-1">
+                        {filteredHosts.length === 0 ? (
+                            <div className="text-center py-4 text-sm text-muted-foreground">
+                                {t('common.noResults', 'No hosts found')}
+                            </div>
+                        ) : (
+                            filteredHosts.map(host => {
+                                const isSelected = selectedHostIds.has(host.id);
+                                return (
+                                    <div
+                                        key={host.id}
+                                        className={`flex items-center gap-3 p-2 rounded-md cursor-pointer hover:bg-muted/50 ${isSelected ? 'bg-primary/10' : ''}`}
+                                        onClick={() => toggleHost(host.id)}
+                                    >
+                                        <div className={`h-4 w-4 border rounded flex items-center justify-center ${isSelected ? 'bg-primary border-primary' : 'border-muted-foreground'}`}>
+                                            {isSelected && <div className="h-2 w-2 bg-primary-foreground rounded-sm" />}
+                                        </div>
+                                        <DistroAvatar host={host} size="sm" fallback={host.label.slice(0, 2).toUpperCase()} />
+                                        <div className="flex-1 min-w-0">
+                                            <div className="font-medium truncate">{host.label}</div>
+                                            <div className="text-xs text-muted-foreground truncate">{host.hostname}</div>
+                                        </div>
+                                    </div>
+                                );
+                            })
+                        )}
+                    </div>
+                </ScrollArea>
+            </div>
+            <div className="text-xs text-muted-foreground text-right">
+                {selectedHostIds.size} {t('common.selected', 'selected')}
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={onClose}>{t('common.cancel', 'Cancel')}</Button>
+          <Button onClick={handleCreate} disabled={!name.trim() || selectedHostIds.size === 0}>
+            {t('common.create', 'Create')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

components/DistroAvatar.tsx

@@ -1,4 +1,4 @@
-import { Server } from "lucide-react";
+import { Server, Usb } from "lucide-react";
 import React, { memo } from "react";
 import { normalizeDistroId } from "../domain/host";
 import { cn } from "../lib/utils";
@@ -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",
 };
 
@@ -69,6 +79,21 @@ const DistroAvatarInner: React.FC<DistroAvatarProps> = ({
   const containerClass = sizeClasses[size];
   const iconSize = iconSizes[size];
 
+  // Show USB icon for serial hosts
+  if (host.protocol === 'serial') {
+    return (
+      <div
+        className={cn(
+          containerClass,
+          "flex items-center justify-center bg-amber-500/15 text-amber-500",
+          className,
+        )}
+      >
+        <Usb className={iconSize} />
+      </div>
+    );
+  }
+
   if (logo && !errored) {
     return (
       <div

components/FileOpenerDialog.tsx

@@ -0,0 +1,132 @@
+/**
+ * FileOpenerDialog - Dialog for choosing how to open a file
+ */
+import { Edit2, FolderOpen } from 'lucide-react';
+import React, { useCallback, useState } from 'react';
+import { useI18n } from '../application/i18n/I18nProvider';
+import type { FileOpenerType, SystemAppInfo } from '../lib/sftpFileUtils';
+import { getFileExtension, isKnownBinaryFile } from '../lib/sftpFileUtils';
+import { Button } from './ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './ui/dialog';
+
+interface FileOpenerDialogProps {
+  open: boolean;
+  onClose: () => void;
+  fileName: string;
+  onSelect: (openerType: FileOpenerType, setAsDefault: boolean, systemApp?: SystemAppInfo) => void;
+  onSelectSystemApp: () => Promise<SystemAppInfo | null>;
+}
+
+export const FileOpenerDialog: React.FC<FileOpenerDialogProps> = ({
+  open,
+  onClose,
+  fileName,
+  onSelect,
+  onSelectSystemApp,
+}) => {
+  const { t } = useI18n();
+  const [isSelectingApp, setIsSelectingApp] = useState(false);
+  const [rememberChoice, setRememberChoice] = useState(true);
+
+  const extension = getFileExtension(fileName);
+  // Show edit option for files that are not known binary formats
+  const canEdit = !isKnownBinaryFile(fileName);
+  // For files without extension, we use 'file' as virtual extension
+  // So we always allow setting default (hasExtension is always true)
+  const displayExtension = extension === 'file' ? t('sftp.opener.noExtension') : `.${extension}`;
+
+  const handleSelectBuiltIn = useCallback((openerType: FileOpenerType) => {
+    onSelect(openerType, rememberChoice);
+    onClose();
+  }, [rememberChoice, onSelect, onClose]);
+
+  const handleSelectSystemApp = useCallback(async () => {
+    setIsSelectingApp(true);
+    try {
+      const result = await onSelectSystemApp();
+      if (result) {
+        console.log('[FileOpenerDialog] Calling onSelect with rememberChoice:', rememberChoice, 'result:', result);
+        onSelect('system-app', rememberChoice, result);
+        onClose();
+      }
+    } catch (e) {
+      console.error('Failed to select application:', e);
+    } finally {
+      setIsSelectingApp(false);
+    }
+  }, [onSelectSystemApp, rememberChoice, onSelect, onClose]);
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => {
+      // Don't close while selecting system app
+      if (!isOpen && !isSelectingApp) {
+        onClose();
+      }
+    }}>
+      <DialogContent className="sm:max-w-[400px]">
+        <DialogHeader className="min-w-0">
+          <DialogTitle>{t('sftp.opener.title')}</DialogTitle>
+          <DialogDescription className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
+            {fileName}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-4 space-y-2">
+          {canEdit && (
+            <Button
+              variant="outline"
+              className="w-full justify-start gap-3 h-12"
+              onClick={() => handleSelectBuiltIn('builtin-editor')}
+            >
+              <Edit2 size={18} className="text-primary" />
+              <div className="text-left">
+                <div className="font-medium text-sm">{t('sftp.opener.builtInEditor')}</div>
+                <div className="text-xs text-muted-foreground">{t('sftp.opener.editDescription')}</div>
+              </div>
+            </Button>
+          )}
+
+          {/* System application option */}
+          <Button
+            variant="outline"
+            className="w-full justify-start gap-3 h-12"
+            onClick={handleSelectSystemApp}
+            disabled={isSelectingApp}
+          >
+            <FolderOpen size={18} className="text-primary" />
+            <div className="text-left">
+              <div className="font-medium text-sm">{t('sftp.opener.systemApp')}</div>
+              <div className="text-xs text-muted-foreground">{t('sftp.opener.systemAppDescription')}</div>
+            </div>
+          </Button>
+
+        </div>
+
+        {/* Remember choice checkbox - always show, use 'file' for no extension */}
+        <div className="flex items-center gap-2 pb-2">
+          <input
+            type="checkbox"
+            id="remember-choice"
+            checked={rememberChoice}
+            onChange={(e) => setRememberChoice(e.target.checked)}
+            className="rounded border-border h-4 w-4 accent-primary"
+          />
+          <label
+            htmlFor="remember-choice"
+            className="text-sm text-muted-foreground cursor-pointer select-none"
+          >
+            {t('sftp.opener.setDefault', { ext: displayExtension })}
+          </label>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            {t('common.cancel')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default FileOpenerDialog;

components/GroupTreeItem.tsx

@@ -1,106 +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;
-}
-
-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

@@ -1,24 +1,37 @@
 import {
+  AlertTriangle,
   Check,
   ChevronDown,
+  Eye,
+  EyeOff,
+  FolderLock,
   FolderPlus,
+  Forward,
   Globe,
   Key,
+  KeyRound,
   Link2,
+  MapPin,
+  Palette,
   Plus,
+  Settings2,
   Shield,
+  ShieldAlert,
   Tag,
   TerminalSquare,
   User,
   Variable,
+  Wifi,
   X,
 } from "lucide-react";
 import React, { useEffect, useMemo, useState, useCallback } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
-import { TERMINAL_THEMES } from "../infrastructure/config/terminalThemes";
+import { useApplicationBackend } from "../application/state/useApplicationBackend";
+import { useSettingsState } from "../application/state/useSettingsState";
+import { customThemeStore } from "../application/state/customThemeStore";
 import { MIN_FONT_SIZE, MAX_FONT_SIZE } from "../infrastructure/config/fonts";
 import { cn } from "../lib/utils";
-import { EnvVar, Host, Identity, ProxyConfig, SSHKey } from "../types";
+import { EnvVar, Host, Identity, ManagedSource, ProxyConfig, SSHKey } from "../types";
 import { DistroAvatar } from "./DistroAvatar";
 import ThemeSelectPanel from "./ThemeSelectPanel";
 import {
@@ -27,12 +40,16 @@ 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";
 import { Combobox, ComboboxOption, MultiCombobox } from "./ui/combobox";
 import { Input } from "./ui/input";
+import { Textarea } from "./ui/textarea";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import { ScrollArea } from "./ui/scroll-area";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
 
 // Import host-details sub-panels
 import {
@@ -57,8 +74,10 @@ interface HostDetailsPanelProps {
   availableKeys: SSHKey[];
   identities: Identity[];
   groups: string[];
+  managedSources?: ManagedSource[];
   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)
   onSave: (host: Host) => void;
   onCancel: () => void;
   onCreateGroup?: (groupPath: string) => void; // Callback to create a new group
@@ -70,14 +89,18 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   availableKeys,
   identities,
   groups,
+  managedSources = [],
   allTags = [],
   allHosts = [],
+  defaultGroup,
   onSave,
   onCancel,
   onCreateGroup,
   onCreateTag,
 }) => {
   const { t } = useI18n();
+  const { checkSshAgent } = useApplicationBackend();
+  const { terminalThemeId, terminalFontSize } = useSettingsState();
   const [form, setForm] = useState<Host>(
     () =>
       initialData ||
@@ -90,11 +113,12 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         protocol: "ssh",
         tags: [],
         os: "linux",
-        agentForwarding: false,
         authMethod: "password",
         charset: "UTF-8",
-        theme: "Flexoki Dark",
+        theme: terminalThemeId,
+        fontSize: terminalFontSize,
         createdAt: Date.now(),
+        group: defaultGroup || undefined, // Pre-fill with current navigation group
       } as Host),
   );
 
@@ -109,20 +133,32 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   // Identity suggestion dropdown state (popover anchored to username input)
   const [identitySuggestionsOpen, setIdentitySuggestionsOpen] = useState(false);
 
+  // Password visibility state
+  const [showPassword, setShowPassword] = useState(false);
+
   // New group creation state
   const [newGroupName, setNewGroupName] = useState("");
   const [newGroupParent, setNewGroupParent] = useState("");
 
+  // SSH Agent status for Windows (only checked when agentForwarding is enabled)
+  const [sshAgentStatus, setSshAgentStatus] = useState<{
+    running: boolean;
+    startupType: string | null;
+    error: string | null;
+  } | null>(null);
+
+  // Check SSH Agent status when agentForwarding is toggled on (Windows only)
+  useEffect(() => {
+    if (form.agentForwarding) {
+      checkSshAgent().then(setSshAgentStatus);
+    } else {
+      setSshAgentStatus(null);
+    }
+  }, [form.agentForwarding, checkSshAgent]);
+
   // 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
@@ -134,6 +170,8 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
       }
       setForm(updatedData);
       setGroupInputValue(initialData.group || "");
+      // Reset password visibility when host changes for privacy
+      setShowPassword(false);
     }
   }, [initialData]);
 
@@ -214,12 +252,51 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   };
 
   const handleSubmit = () => {
-    if (!form.hostname || !form.label) return;
+    if (!form.hostname) return;
+    // If label is empty, use hostname as label
+    let finalLabel = form.label?.trim() || form.hostname;
+    const finalGroup = groupInputValue.trim() || form.group || "";
+
+    // Find the most specific (deepest) managed source that matches the group path
+    // This handles nested managed groups correctly by preferring exact matches
+    // and longer paths over shorter prefix matches
+    const targetManagedSource = managedSources
+      .filter(s => finalGroup === s.groupName || finalGroup.startsWith(s.groupName + "/"))
+      .sort((a, b) => b.groupName.length - a.groupName.length)[0];
+
+    // Only SSH hosts can be managed (SSH config only supports SSH protocol)
+    const canBeManaged = !form.protocol || form.protocol === "ssh";
+
+    // Strip spaces from label only if host can be managed and is in a managed group
+    // (SSH config requires no spaces in Host alias)
+    if (targetManagedSource && canBeManaged) {
+      finalLabel = finalLabel.replace(/\s/g, '');
+    }
+
+    // Determine managedSourceId:
+    // - Only SSH hosts can be managed (SSH config only supports SSH protocol)
+    // - If we found a matching managed source, use its id
+    // - If managedSources was not provided (empty array) and host already has managedSourceId, preserve it
+    // - Otherwise, clear it (host is not in a managed group)
+    let finalManagedSourceId: string | undefined;
+    if (targetManagedSource && canBeManaged) {
+      finalManagedSourceId = targetManagedSource.id;
+    } else if (managedSources.length === 0 && form.managedSourceId && canBeManaged) {
+      // managedSources not provided, preserve existing value
+      finalManagedSourceId = form.managedSourceId;
+    } else {
+      finalManagedSourceId = undefined;
+    }
+
     const cleaned: Host = {
       ...form,
-      group: groupInputValue.trim() || form.group,
+      label: finalLabel,
+      group: finalGroup,
       tags: form.tags || [],
       port: form.port || 22,
+      // Clear password if savePassword is explicitly set to false
+      password: form.savePassword === false ? undefined : form.password,
+      managedSourceId: finalManagedSourceId,
     };
     onSave(cleaned);
   };
@@ -286,10 +363,10 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
     const base = identities;
     const filtered = q
       ? base.filter(
-          (i) =>
-            i.label.toLowerCase().includes(q) ||
-            i.username.toLowerCase().includes(q),
-        )
+        (i) =>
+          i.label.toLowerCase().includes(q) ||
+          i.username.toLowerCase().includes(q),
+      )
       : base;
     return filtered.slice(0, 6);
   }, [form.username, identities, selectedIdentity]);
@@ -469,7 +546,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
           size="icon"
           className="h-8 w-8"
           onClick={handleSubmit}
-          disabled={!form.hostname || !form.label}
+          disabled={!form.hostname}
           aria-label={t("hostDetails.saveAria")}
         >
           <Check size={16} />
@@ -477,37 +554,31 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
       }
     >
       <AsidePanelContent>
-        <Card className="p-3 space-y-2 bg-card border-border/80">
-          <p className="text-xs font-semibold">
-            {t("hostDetails.section.address")}
-          </p>
-          <div className="flex items-center gap-2">
-            <DistroAvatar
-              host={form as Host}
-              fallback={
-                form.label?.slice(0, 2).toUpperCase() ||
-                form.hostname?.slice(0, 2).toUpperCase() ||
-                "H"
-              }
-              className="h-10 w-10"
-            />
-            <Input
-              placeholder={t("hostDetails.hostname.placeholder")}
-              value={form.hostname}
-              onChange={(e) => update("hostname", e.target.value)}
-              className="h-10 flex-1"
-            />
-          </div>
-        </Card>
-
         <Card className="p-3 space-y-3 bg-card border-border/80">
-          <p className="text-xs font-semibold">
-            {t("hostDetails.section.general")}
-          </p>
+          <div className="flex items-center gap-2">
+            <Settings2 size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">
+              {t("hostDetails.section.general")}
+            </p>
+          </div>
           <Input
             placeholder={t("hostDetails.label.placeholder")}
             value={form.label}
-            onChange={(e) => update("label", e.target.value)}
+            onChange={(e) => {
+              let value = e.target.value;
+              // Only strip spaces if the TARGET group belongs to a managed source
+              // (don't use form.managedSourceId as it reflects old state before group change)
+              const targetGroup = groupInputValue.trim() || form.group || "";
+              const willBeManaged = managedSources.some(s =>
+                targetGroup === s.groupName || targetGroup.startsWith(s.groupName + "/")
+              );
+              // Also check protocol - only SSH hosts can be managed
+              const canBeManaged = !form.protocol || form.protocol === "ssh";
+              if (willBeManaged && canBeManaged) {
+                value = value.replace(/\s/g, '');
+              }
+              update("label", value);
+            }}
             className="h-10"
           />
 
@@ -519,12 +590,16 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
             <Combobox
               options={groupOptions}
               value={form.group || ""}
-              onValueChange={(val) => update("group", val)}
+              onValueChange={(val) => {
+                update("group", val);
+                setGroupInputValue(val);
+              }}
               placeholder={t("hostDetails.group.placeholder")}
               allowCreate={true}
               onCreateNew={(val) => {
                 onCreateGroup?.(val);
                 update("group", val);
+                setGroupInputValue(val);
               }}
               createText="Create Group"
               triggerClassName="flex-1 h-10"
@@ -549,10 +624,39 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
           </div>
         </Card>
 
+        <Card className="p-3 space-y-2 bg-card border-border/80">
+          <div className="flex items-center gap-2">
+            <MapPin size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">
+              {t("hostDetails.section.address")}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <DistroAvatar
+              host={form as Host}
+              fallback={
+                form.label?.slice(0, 2).toUpperCase() ||
+                form.hostname?.slice(0, 2).toUpperCase() ||
+                "H"
+              }
+              className="h-10 w-10"
+            />
+            <Input
+              placeholder={t("hostDetails.hostname.placeholder")}
+              value={form.hostname}
+              onChange={(e) => update("hostname", e.target.value)}
+              className="h-10 flex-1"
+            />
+          </div>
+        </Card>
+
         <Card className="p-3 space-y-3 bg-card border-border/80">
-          <p className="text-xs font-semibold">
-            {t("hostDetails.section.portCredentials")}
-          </p>
+          <div className="flex items-center gap-2">
+            <KeyRound size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">
+              {t("hostDetails.section.portCredentials")}
+            </p>
+          </div>
           <div className="flex items-center gap-2">
             <div className="flex-1 min-w-0 h-10 flex items-center gap-2 bg-secondary/70 border border-border/70 rounded-md px-3">
               <span className="text-xs text-muted-foreground">SSH on</span>
@@ -639,10 +743,10 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                             const q = next.toLowerCase().trim();
                             const matches = q
                               ? identities.filter(
-                                  (i) =>
-                                    i.label.toLowerCase().includes(q) ||
-                                    i.username.toLowerCase().includes(q),
-                                )
+                                (i) =>
+                                  i.label.toLowerCase().includes(q) ||
+                                  i.username.toLowerCase().includes(q),
+                              )
                               : identities;
                             setIdentitySuggestionsOpen(matches.length > 0);
                           }}
@@ -650,10 +754,10 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                             const q = (form.username || "").toLowerCase().trim();
                             const matches = q
                               ? identities.filter(
-                                  (i) =>
-                                    i.label.toLowerCase().includes(q) ||
-                                    i.username.toLowerCase().includes(q),
-                                )
+                                (i) =>
+                                  i.label.toLowerCase().includes(q) ||
+                                  i.username.toLowerCase().includes(q),
+                              )
                               : identities;
                             setIdentitySuggestionsOpen(matches.length > 0);
                           }}
@@ -670,10 +774,10 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                                 .trim();
                               const matches = q
                                 ? identities.filter(
-                                    (i) =>
-                                      i.label.toLowerCase().includes(q) ||
-                                      i.username.toLowerCase().includes(q),
-                                  )
+                                  (i) =>
+                                    i.label.toLowerCase().includes(q) ||
+                                    i.username.toLowerCase().includes(q),
+                                )
                                 : identities;
                               return matches.length > 0;
                             });
@@ -702,8 +806,8 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                               {filteredIdentitySuggestions.map((identity) => {
                                 const keyLabel = identity.keyId
                                   ? availableKeys.find(
-                                      (k) => k.id === identity.keyId,
-                                    )?.label
+                                    (k) => k.id === identity.keyId,
+                                  )?.label
                                   : undefined;
                                 const methodLabel =
                                   identity.authMethod === "certificate"
@@ -755,13 +859,36 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
             )}
 
             {!selectedIdentity && !form.identityId && (
-              <Input
-                placeholder={t("hostDetails.password.placeholder")}
-                type="password"
-                value={form.password || ""}
-                onChange={(e) => update("password", e.target.value)}
-                className="h-10"
-              />
+              <div className="relative">
+                <Input
+                  placeholder={t("hostDetails.password.placeholder")}
+                  type={showPassword ? "text" : "password"}
+                  value={form.password || ""}
+                  onChange={(e) => update("password", e.target.value)}
+                  className="h-10 pr-10"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground transition-colors"
+                  title={showPassword ? t("hostDetails.password.hide") : t("hostDetails.password.show")}
+                >
+                  {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                </button>
+              </div>
+            )}
+
+            {/* Save Password toggle - shown when password is entered */}
+            {!selectedIdentity && !form.identityId && form.password && (
+              <div className="flex items-center justify-between py-1">
+                <span className="text-xs text-muted-foreground">
+                  {t("hostDetails.password.save")}
+                </span>
+                <Switch
+                  checked={form.savePassword ?? true}
+                  onCheckedChange={(val) => update("savePassword" as keyof Host, val)}
+                />
+              </div>
             )}
 
             {/* Selected credential display */}
@@ -850,42 +977,42 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
             {!selectedIdentity &&
               selectedCredentialType === "key" &&
               !form.identityFileId && (
-              <div className="flex items-center gap-1">
-                <Combobox
-                  options={keysByCategory.key.map((k) => ({
-                    value: k.id,
-                    label: k.label,
-                    sublabel: `${k.type}${k.keySize ? ` ${k.keySize}` : ""}`,
-                    icon: <Key size={14} className="text-muted-foreground" />,
-                  }))}
-                  value={form.identityFileId}
-                  onValueChange={(val) => {
-                    update("identityFileId", val);
-                    update("authMethod", "key");
-                    setSelectedCredentialType(null);
-                  }}
-                  placeholder={t("hostDetails.keys.search")}
-                  emptyText={t("hostDetails.keys.empty")}
-                  icon={<Key size={14} className="text-muted-foreground" />}
-                  className="flex-1"
-                />
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-8 w-8 shrink-0"
-                  onClick={() => setSelectedCredentialType(null)}
-                >
-                  <X size={14} />
-                </Button>
-              </div>
-            )}
+                <div className="flex items-center gap-1">
+                  <Combobox
+                    options={keysByCategory.key.map((k) => ({
+                      value: k.id,
+                      label: k.label,
+                      sublabel: `${k.type}${k.keySize ? ` ${k.keySize}` : ""}`,
+                      icon: <Key size={14} className="text-muted-foreground" />,
+                    }))}
+                    value={form.identityFileId}
+                    onValueChange={(val) => {
+                      update("identityFileId", val);
+                      update("authMethod", "key");
+                      setSelectedCredentialType(null);
+                    }}
+                    placeholder={t("hostDetails.keys.search")}
+                    emptyText={t("hostDetails.keys.empty")}
+                    icon={<Key size={14} className="text-muted-foreground" />}
+                    className="flex-1"
+                  />
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 shrink-0"
+                    onClick={() => setSelectedCredentialType(null)}
+                  >
+                    <X size={14} />
+                  </Button>
+                </div>
+              )}
 
             {/* Certificate selection combobox - appears after selecting "Certificate" type */}
-	            {!selectedIdentity &&
-	              selectedCredentialType === "certificate" &&
-	              !form.identityFileId && (
-	                <div className="flex items-center gap-1">
-	                  <Combobox
+            {!selectedIdentity &&
+              selectedCredentialType === "certificate" &&
+              !form.identityFileId && (
+                <div className="flex items-center gap-1">
+                  <Combobox
                     options={keysByCategory.certificate.map((k) => ({
                       value: k.id,
                       label: k.label,
@@ -913,16 +1040,68 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                     onClick={() => setSelectedCredentialType(null)}
                   >
                     <X size={14} />
-	                  </Button>
-	                </div>
-	              )}
-	          </div>
-	        </Card>
+                  </Button>
+                </div>
+              )}
+          </div>
+        </Card>
 
         <Card className="p-3 space-y-3 bg-card border-border/80">
-          <p className="text-xs font-semibold">
-            {t("hostDetails.section.appearance")}
-          </p>
+          <div className="flex items-center gap-2">
+            <FolderLock size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">
+              {t("hostDetails.section.sftp")}
+            </p>
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <div className="text-sm font-medium">
+                {t("hostDetails.sftp.sudo")}
+              </div>
+              <div className="text-xs text-muted-foreground">
+                {t("hostDetails.sftp.sudo.desc")}
+              </div>
+            </div>
+            <Switch
+              checked={form.sftpSudo || false}
+              onCheckedChange={(val) => update("sftpSudo", val)}
+            />
+          </div>
+          {form.sftpSudo && !form.password && !selectedIdentity?.password && (
+            <p className="text-xs text-amber-500">
+              {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>
+            <Select
+              value={form.sftpEncoding || "auto"}
+              onValueChange={(val) => update("sftpEncoding", val as Host["sftpEncoding"])}
+            >
+              <SelectTrigger className="h-8">
+                <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>
+          </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" />
+            <p className="text-xs font-semibold">
+              {t("hostDetails.section.appearance")}
+            </p>
+          </div>
 
           {/* SSH Theme Selection */}
           <button
@@ -934,21 +1113,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(form.theme || "flexoki-dark")?.colors.background || "#100F0F",
                 color:
-                  TERMINAL_THEMES.find(
-                    (t) => t.id === (form.theme || "flexoki-dark"),
-                  )?.colors.foreground || "#CECDC3",
+                  customThemeStore.getThemeById(form.theme || "flexoki-dark")?.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(form.theme || "flexoki-dark")?.colors.green,
                   }}
                 >
                   $
@@ -956,9 +1129,7 @@ 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(form.theme || "flexoki-dark")?.name || "Flexoki Dark"}
             </span>
           </button>
 
@@ -1009,7 +1180,10 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         </Card>
 
         <Card className="p-3 space-y-3 bg-card border-border/80">
-          <p className="text-xs font-semibold">{t("hostDetails.section.mosh")}</p>
+          <div className="flex items-center gap-2">
+            <Wifi size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">{t("hostDetails.section.mosh")}</p>
+          </div>
           <ToggleRow
             label="Mosh"
             enabled={!!form.moshEnabled}
@@ -1017,107 +1191,179 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
           />
         </Card>
 
+        {/* Agent Forwarding */}
         <Card className="p-3 space-y-2 bg-card border-border/80">
+          <div className="flex items-center gap-2">
+            <Forward size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">{t("hostDetails.section.agentForwarding")}</p>
+          </div>
           <ToggleRow
             label={t("hostDetails.agentForwarding")}
             enabled={!!form.agentForwarding}
             onToggle={() => update("agentForwarding", !form.agentForwarding)}
           />
-        </Card>
-
-        {/* Host Chain Configuration - Only show when Agent Forwarding is enabled */}
-        {form.agentForwarding && (
-          <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">
-                <Link2 size={14} className="text-muted-foreground" />
-                <p className="text-xs font-semibold">
-                  {t("hostDetails.jumpHosts")}
+          <p className="text-xs text-muted-foreground">
+            {t("hostDetails.agentForwarding.desc")}
+          </p>
+          {form.agentForwarding && sshAgentStatus && !sshAgentStatus.running && (
+            <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" />
+              <div className="space-y-1">
+                <p className="text-xs text-yellow-600 dark:text-yellow-400 font-medium">
+                  {t("hostDetails.agentForwarding.agentNotRunning")}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {t("hostDetails.agentForwarding.agentNotRunningHint")}
                 </p>
               </div>
-              {chainedHosts.length > 0 ? (
-                <Badge variant="secondary" className="text-xs">
-                  {t("hostDetails.jumpHosts.hops", { count: chainedHosts.length })}
-                </Badge>
-              ) : (
-                <Badge
-                  variant="outline"
-                  className="text-xs text-muted-foreground"
-                >
-                  {t("hostDetails.jumpHosts.direct")}
-                </Badge>
-              )}
             </div>
-            {chainedHosts.length > 0 && (
-              <button
-                className="w-full flex items-center gap-1 p-2 rounded-md bg-secondary/50 hover:bg-secondary transition-colors cursor-pointer"
-                onClick={() => setActiveSubPanel("chain")}
-              >
-                <Link2
-                  size={14}
-                  className="text-muted-foreground flex-shrink-0"
-                />
-                <span className="text-sm truncate">
-                  {chainedHosts
-                    .slice(0, 3)
-                    .map((h) => h.hostname || h.label)
-                    .join(" -> ")}
-                  {chainedHosts.length > 3 && "..."}
-                </span>
-                <X
-                  size={14}
-                  className="text-muted-foreground hover:text-destructive flex-shrink-0 ml-auto"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    clearHostChain();
-                  }}
-                />
-              </button>
-            )}
-            {chainedHosts.length === 0 && (
-              <Button
-                variant="ghost"
-                className="w-full h-9 justify-start gap-2 text-sm"
-                onClick={() => setActiveSubPanel("chain")}
-              >
-                <Plus size={14} />
-                {t("hostDetails.jumpHosts.configure")}
-              </Button>
-            )}
-          </Card>
-        )}
+          )}
+        </Card>
 
-        {/* Proxy Configuration */}
+        {/* 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">
             <div className="flex items-center gap-2">
-              <Globe size={14} className="text-muted-foreground" />
-              <p className="text-xs font-semibold">{t("hostDetails.proxy")}</p>
+              <Link2 size={14} className="text-muted-foreground" />
+              <p className="text-xs font-semibold">
+                {t("hostDetails.jumpHosts")}
+              </p>
             </div>
-            {form.proxyConfig?.host ? (
+            {chainedHosts.length > 0 ? (
               <Badge variant="secondary" className="text-xs">
-                {form.proxyConfig.type?.toUpperCase()} {form.proxyConfig.host}:
-                {form.proxyConfig.port}
+                {t("hostDetails.jumpHosts.hops", { count: chainedHosts.length })}
               </Badge>
             ) : (
               <Badge
                 variant="outline"
                 className="text-xs text-muted-foreground"
               >
-                {t("hostDetails.proxy.none")}
+                {t("hostDetails.jumpHosts.direct")}
               </Badge>
             )}
           </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>
+          {chainedHosts.length > 0 && (
+            <button
+              className="w-full flex flex-col items-start gap-1 p-2 rounded-md bg-secondary/50 hover:bg-secondary transition-colors cursor-pointer"
+              onClick={() => setActiveSubPanel("chain")}
+            >
+              <div className="w-full flex items-center justify-between">
+                <div className="flex items-center gap-1 min-w-0 flex-1">
+                  <Link2
+                    size={14}
+                    className="text-muted-foreground flex-shrink-0"
+                  />
+                  <span className="text-xs text-muted-foreground">
+                    {t("hostDetails.jumpHosts.hops", { count: chainedHosts.length })}
+                  </span>
+                </div>
+                <X
+                  size={14}
+                  className="text-muted-foreground hover:text-destructive flex-shrink-0"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    clearHostChain();
+                  }}
+                />
+              </div>
+              <div className="w-full space-y-1 pl-5">
+                {chainedHosts.slice(0, 5).map((h, idx) => (
+                  <div key={h.id} className="flex items-center gap-1 text-sm">
+                    <span className="text-muted-foreground">{idx + 1}.</span>
+                    <span className="truncate">
+                      {h.label !== h.hostname ? `${h.hostname} (${h.label})` : h.hostname}
+                    </span>
+                  </div>
+                ))}
+                {chainedHosts.length > 5 && (
+                  <div className="text-xs text-muted-foreground">
+                    +{chainedHosts.length - 5} more...
+                  </div>
+                )}
+              </div>
+            </button>
+          )}
+          {chainedHosts.length === 0 && (
+            <Button
+              variant="ghost"
+              className="w-full h-9 justify-start gap-2 text-sm"
+              onClick={() => setActiveSubPanel("chain")}
+            >
+              <Plus size={14} />
+              {t("hostDetails.jumpHosts.configure")}
+            </Button>
+          )}
+        </Card>
+
+        {/* Proxy Configuration */}
+        <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>
+          {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 */}
@@ -1167,11 +1413,12 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
             <TerminalSquare size={14} className="text-muted-foreground" />
             <p className="text-xs font-semibold">{t("hostDetails.startupCommand")}</p>
           </div>
-          <Input
+          <Textarea
             placeholder={t("hostDetails.startupCommand.placeholder")}
             value={form.startupCommand || ""}
             onChange={(e) => update("startupCommand", e.target.value)}
-            className="h-9"
+            className="min-h-[80px] font-mono text-sm"
+            rows={3}
           />
           <p className="text-xs text-muted-foreground">
             {t("hostDetails.startupCommand.help")}
@@ -1247,35 +1494,20 @@ 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"),
+                    customThemeStore.getThemeById(
+                      form.protocols?.find((p) => p.protocol === "telnet")?.theme || form.theme || "flexoki-dark"
                     )?.colors.background || "#100F0F",
                   color:
-                    TERMINAL_THEMES.find(
-                      (t) =>
-                        t.id ===
-                        (form.protocols?.find((p) => p.protocol === "telnet")
-                          ?.theme ||
-                          form.theme ||
-                          "flexoki-dark"),
+                    customThemeStore.getThemeById(
+                      form.protocols?.find((p) => p.protocol === "telnet")?.theme || form.theme || "flexoki-dark"
                     )?.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"),
+                      color: customThemeStore.getThemeById(
+                        form.protocols?.find((p) => p.protocol === "telnet")?.theme || form.theme || "flexoki-dark"
                       )?.colors.green,
                     }}
                   >
@@ -1284,13 +1516,8 @@ 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"),
+                {customThemeStore.getThemeById(
+                  form.protocols?.find((p) => p.protocol === "telnet")?.theme || form.theme || "flexoki-dark"
                 )?.name || "Flexoki Dark"}
               </span>
             </button>
@@ -1313,7 +1540,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         <Button
           className="w-full h-10"
           onClick={handleSubmit}
-          disabled={!form.hostname || !form.label}
+          disabled={!form.hostname}
         >
           {t("common.save")}
         </Button>

components/HostForm.tsx

@@ -1,335 +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 {
-  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">
-            <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

@@ -0,0 +1,565 @@
+import { CheckSquare, ChevronRight, FileSymlink, Folder, FolderOpen, Monitor, Server, Square, Expand, Minimize2 } from 'lucide-react';
+import React, { useMemo } from 'react';
+import { useI18n } from '../application/i18n/I18nProvider';
+import { useTreeExpandedState } from '../application/state/useTreeExpandedState';
+import { sanitizeHost } from '../domain/host';
+import { STORAGE_KEY_VAULT_HOSTS_TREE_EXPANDED } from '../infrastructure/config/storageKeys';
+import { cn } from '../lib/utils';
+import { GroupNode, Host } from '../types';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from './ui/context-menu';
+import { DistroAvatar } from './DistroAvatar';
+import { Button } from './ui/button';
+
+interface HostTreeViewProps {
+  groupTree: GroupNode[];
+  hosts: Host[];
+  sortMode?: 'az' | 'za' | 'newest' | 'oldest' | 'group';
+  expandedPaths?: Set<string>;
+  onTogglePath?: (path: string) => void;
+  onExpandAll?: (paths: string[]) => void;
+  onCollapseAll?: () => void;
+  onConnect: (host: Host) => void;
+  onEditHost: (host: Host) => void;
+  onDuplicateHost: (host: Host) => void;
+  onDeleteHost: (host: Host) => void;
+  onCopyCredentials: (host: Host) => void;
+  onNewHost: (groupPath?: string) => void;
+  onNewGroup: (parentPath?: string) => void;
+  onEditGroup: (groupPath: string) => void;
+  onDeleteGroup: (groupPath: string) => void;
+  moveHostToGroup: (hostId: string, groupPath: string | null) => void;
+  moveGroup: (sourcePath: string, targetPath: string) => void;
+  managedGroupPaths?: Set<string>;
+  onUnmanageGroup?: (groupPath: string) => void;
+  isMultiSelectMode?: boolean;
+  selectedHostIds?: Set<string>;
+  toggleHostSelection?: (hostId: string) => void;
+}
+
+interface TreeNodeProps {
+  node: GroupNode;
+  depth: number;
+  sortMode: 'az' | 'za' | 'newest' | 'oldest' | 'group';
+  expandedPaths: Set<string>;
+  onToggle: (path: string) => void;
+  onConnect: (host: Host) => void;
+  onEditHost: (host: Host) => void;
+  onDuplicateHost: (host: Host) => void;
+  onDeleteHost: (host: Host) => void;
+  onCopyCredentials: (host: Host) => void;
+  onNewHost: (groupPath?: string) => void;
+  onNewGroup: (parentPath?: string) => void;
+  onEditGroup: (groupPath: string) => void;
+  onDeleteGroup: (groupPath: string) => void;
+  moveHostToGroup: (hostId: string, groupPath: string | null) => void;
+  moveGroup: (sourcePath: string, targetPath: string) => void;
+  managedGroupPaths?: Set<string>;
+  onUnmanageGroup?: (groupPath: string) => void;
+  isMultiSelectMode?: boolean;
+  selectedHostIds?: Set<string>;
+  toggleHostSelection?: (hostId: string) => void;
+}
+
+// Helper function to recursively count all hosts in a node and its children
+const countAllHostsInNode = (node: GroupNode): number => {
+  let count = node.hosts.length;
+  if (node.children) {
+    Object.values(node.children).forEach((child) => {
+      count += countAllHostsInNode(child);
+    });
+  }
+  return count;
+};
+
+const TreeNode: React.FC<TreeNodeProps> = ({
+  node,
+  depth,
+  sortMode,
+  expandedPaths,
+  onToggle,
+  onConnect,
+  onEditHost,
+  onDuplicateHost,
+  onDeleteHost,
+  onCopyCredentials,
+  onNewHost,
+  onNewGroup,
+  onEditGroup,
+  onDeleteGroup,
+  moveHostToGroup,
+  moveGroup,
+  managedGroupPaths,
+  onUnmanageGroup,
+  isMultiSelectMode,
+  selectedHostIds,
+  toggleHostSelection,
+}) => {
+  const { t } = useI18n();
+  const isExpanded = expandedPaths.has(node.path);
+  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 = useMemo(() => countAllHostsInNode(node), [node]);
+
+  const childNodes = useMemo(() => {
+    if (!node.children) return [];
+    const nodes = Object.values(node.children) as unknown as GroupNode[];
+    return nodes.sort((a, b) => {
+      switch (sortMode) {
+        case 'za':
+          return b.name.localeCompare(a.name);
+        case 'newest':
+        case 'oldest':
+          // For groups, fall back to name sorting since groups don't have creation dates
+          return a.name.localeCompare(b.name);
+        case 'az':
+        default:
+          return a.name.localeCompare(b.name);
+      }
+    });
+  }, [node.children, sortMode]);
+
+  const sortedHosts = useMemo(() => {
+    return [...node.hosts].sort((a, b) => {
+      switch (sortMode) {
+        case 'az':
+          return a.label.localeCompare(b.label);
+        case 'za':
+          return b.label.localeCompare(a.label);
+        case 'newest':
+          return (b.createdAt || 0) - (a.createdAt || 0);
+        case 'oldest':
+          return (a.createdAt || 0) - (b.createdAt || 0);
+        default:
+          return a.label.localeCompare(b.label);
+      }
+    });
+  }, [node.hosts, sortMode]);
+
+  return (
+    <div>
+      {/* Group Node */}
+      <Collapsible open={isExpanded} onOpenChange={() => onToggle(node.path)}>
+        <ContextMenu>
+          <ContextMenuTrigger>
+            <CollapsibleTrigger asChild>
+              <div
+                className={cn(
+                  "flex items-center py-2 pr-3 text-sm font-medium cursor-pointer transition-colors select-none group hover:bg-secondary/60 rounded-lg",
+                )}
+                style={{ paddingLeft }}
+                draggable
+                onDragStart={(e) => e.dataTransfer.setData("group-path", node.path)}
+                onDragOver={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+                onDrop={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  const hostId = e.dataTransfer.getData("host-id");
+                  const groupPath = e.dataTransfer.getData("group-path");
+                  if (hostId) moveHostToGroup(hostId, node.path);
+                  if (groupPath) moveGroup(groupPath, node.path);
+                }}
+              >
+                <div className="mr-2 flex-shrink-0 w-4 h-4 flex items-center justify-center">
+                  {(hasChildren || node.hosts.length > 0) && (
+                    <div className={cn("transition-transform duration-200", isExpanded ? "rotate-90" : "")}>
+                      <ChevronRight size={14} />
+                    </div>
+                  )}
+                </div>
+                <div className="mr-3 text-primary/80 group-hover:text-primary transition-colors">
+                  {isExpanded ? <FolderOpen size={18} /> : <Folder size={18} />}
+                </div>
+                <span className="truncate flex-1 font-semibold">{node.name}</span>
+                {isManaged && (
+                  <span className="inline-flex items-center gap-1 text-[10px] font-medium px-1.5 py-0.5 rounded bg-primary/15 text-primary shrink-0 mr-1.5">
+                    <FileSymlink size={10} />
+                    Managed
+                  </span>
+                )}
+                {(node.hosts.length > 0 || hasChildren) && (
+                  <span className="text-xs opacity-70 bg-background/50 px-2 py-0.5 rounded-full border border-border">
+                    {hostsCountInNode}
+                  </span>
+                )}
+              </div>
+            </CollapsibleTrigger>
+          </ContextMenuTrigger>
+          <ContextMenuContent>
+            <ContextMenuItem onClick={() => onNewHost(node.path)}>
+              <Server className="mr-2 h-4 w-4" /> {t("vault.hosts.newHost")}
+            </ContextMenuItem>
+            <ContextMenuItem onClick={() => onNewGroup(node.path)}>
+              <Folder className="mr-2 h-4 w-4" /> {t("vault.hosts.newGroup")}
+            </ContextMenuItem>
+            <ContextMenuItem onClick={() => onEditGroup(node.path)}>
+              <FolderOpen className="mr-2 h-4 w-4" /> {t("vault.groups.rename")}
+            </ContextMenuItem>
+            <ContextMenuItem 
+              onClick={() => onDeleteGroup(node.path)}
+              className="text-destructive focus:text-destructive"
+            >
+              <FolderOpen className="mr-2 h-4 w-4" /> {t("vault.groups.delete")}
+            </ContextMenuItem>
+            {isManaged && onUnmanageGroup && (
+              <ContextMenuItem onClick={() => onUnmanageGroup(node.path)}>
+                <FileSymlink className="mr-2 h-4 w-4" /> {t("vault.managedSource.unmanage")}
+              </ContextMenuItem>
+            )}
+          </ContextMenuContent>
+        </ContextMenu>
+
+        <CollapsibleContent>
+          {/* Child Groups */}
+          {childNodes.map((child) => (
+            <TreeNode
+              key={child.path}
+              node={child}
+              depth={depth + 1}
+              sortMode={sortMode}
+              expandedPaths={expandedPaths}
+              onToggle={onToggle}
+              onConnect={onConnect}
+              onEditHost={onEditHost}
+              onDuplicateHost={onDuplicateHost}
+              onDeleteHost={onDeleteHost}
+              onCopyCredentials={onCopyCredentials}
+              onNewHost={onNewHost}
+              onNewGroup={onNewGroup}
+              onEditGroup={onEditGroup}
+              onDeleteGroup={onDeleteGroup}
+              moveHostToGroup={moveHostToGroup}
+              moveGroup={moveGroup}
+              managedGroupPaths={managedGroupPaths}
+              onUnmanageGroup={onUnmanageGroup}
+              isMultiSelectMode={isMultiSelectMode}
+              selectedHostIds={selectedHostIds}
+              toggleHostSelection={toggleHostSelection}
+            />
+          ))}
+
+          {/* Hosts in this group */}
+          {sortedHosts.map((host) => (
+            <HostTreeItem
+              key={host.id}
+              host={host}
+              depth={depth + 1}
+              onConnect={onConnect}
+              onEditHost={onEditHost}
+              onDuplicateHost={onDuplicateHost}
+              onDeleteHost={onDeleteHost}
+              onCopyCredentials={onCopyCredentials}
+              moveHostToGroup={moveHostToGroup}
+              isMultiSelectMode={isMultiSelectMode}
+              selectedHostIds={selectedHostIds}
+              toggleHostSelection={toggleHostSelection}
+            />
+          ))}
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+interface HostTreeItemProps {
+  host: Host;
+  depth: number;
+  onConnect: (host: Host) => void;
+  onEditHost: (host: Host) => void;
+  onDuplicateHost: (host: Host) => void;
+  onDeleteHost: (host: Host) => void;
+  onCopyCredentials: (host: Host) => void;
+  moveHostToGroup: (hostId: string, groupPath: string | null) => void;
+  isMultiSelectMode?: boolean;
+  selectedHostIds?: Set<string>;
+  toggleHostSelection?: (hostId: string) => void;
+}
+
+const HostTreeItem: React.FC<HostTreeItemProps> = ({
+  host,
+  depth,
+  onConnect,
+  onEditHost,
+  onDuplicateHost,
+  onDeleteHost,
+  onCopyCredentials,
+  moveHostToGroup: _moveHostToGroup,
+  isMultiSelectMode,
+  selectedHostIds,
+  toggleHostSelection,
+}) => {
+  const { t } = useI18n();
+  const paddingLeft = `${depth * 20 + 12}px`;
+  const safeHost = sanitizeHost(host);
+  const tags = host.tags || [];
+  const isTelnet = host.protocol === 'telnet';
+  const displayUsername = isTelnet
+    ? (host.telnetUsername?.trim() || host.username?.trim() || '')
+    : (host.username?.trim() || '');
+  const displayPort = isTelnet
+    ? (host.telnetPort ?? host.port ?? 23)
+    : (host.port ?? 22);
+  const isSelected = isMultiSelectMode && selectedHostIds?.has(host.id);
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <div
+          className={cn(
+            "flex items-center py-2 pr-3 text-sm cursor-pointer transition-colors select-none group hover:bg-secondary/40 rounded-lg",
+            isSelected ? "bg-primary/10" : "",
+          )}
+          style={{ paddingLeft }}
+          draggable={!isMultiSelectMode}
+          onDragStart={(e) => e.dataTransfer.setData("host-id", host.id)}
+          onClick={() => {
+            if (isMultiSelectMode && toggleHostSelection) {
+              toggleHostSelection(host.id);
+            } else {
+              onConnect(safeHost);
+            }
+          }}
+        >
+          {isMultiSelectMode && (
+            <div className="mr-2 flex-shrink-0" onClick={(e) => {
+              e.stopPropagation();
+              toggleHostSelection?.(host.id);
+            }}>
+              {isSelected ? (
+                <CheckSquare size={18} className="text-primary" />
+              ) : (
+                <Square size={18} className="text-muted-foreground" />
+              )}
+            </div>
+          )}
+          {!isMultiSelectMode && <div className="mr-2 flex-shrink-0 w-4 h-4" />}
+          <div className="mr-3 flex-shrink-0">
+            <DistroAvatar host={host} fallback={(host.os || "L")[0].toUpperCase()} size="sm" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="font-medium truncate">{host.label}</div>
+            <div className="text-xs text-muted-foreground truncate">
+              {displayUsername}@{host.hostname}:{displayPort}
+            </div>
+          </div>
+          <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+            {host.protocol && host.protocol !== 'ssh' && (
+              <span className="text-xs px-1.5 py-0.5 bg-primary/10 text-primary rounded">
+                {host.protocol.toUpperCase()}
+              </span>
+            )}
+            {tags.length > 0 && (
+              <span className="text-xs opacity-60">
+                {tags.slice(0, 2).join(', ')}
+                {tags.length > 2 && '...'}
+              </span>
+            )}
+          </div>
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem onClick={() => onConnect(safeHost)}>
+          <Monitor className="mr-2 h-4 w-4" /> {t("vault.hosts.connect")}
+        </ContextMenuItem>
+        <ContextMenuItem onClick={() => onEditHost(host)}>
+          <Server className="mr-2 h-4 w-4" /> {t("action.edit")}
+        </ContextMenuItem>
+        <ContextMenuItem onClick={() => onDuplicateHost(host)}>
+          <Server className="mr-2 h-4 w-4" /> {t("action.duplicate")}
+        </ContextMenuItem>
+        <ContextMenuItem onClick={() => onCopyCredentials(host)}>
+          <Server className="mr-2 h-4 w-4" /> {t("vault.hosts.copyCredentials")}
+        </ContextMenuItem>
+        <ContextMenuItem 
+          onClick={() => onDeleteHost(host)}
+          className="text-destructive focus:text-destructive"
+        >
+          <Server className="mr-2 h-4 w-4" /> {t("action.delete")}
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+};
+
+export const HostTreeView: React.FC<HostTreeViewProps> = ({
+  groupTree,
+  hosts,
+  sortMode = 'az',
+  expandedPaths: externalExpandedPaths,
+  onTogglePath: externalOnTogglePath,
+  onExpandAll: externalOnExpandAll,
+  onCollapseAll: externalOnCollapseAll,
+  onConnect,
+  onEditHost,
+  onDuplicateHost,
+  onDeleteHost,
+  onCopyCredentials,
+  onNewHost,
+  onNewGroup,
+  onEditGroup,
+  onDeleteGroup,
+  moveHostToGroup,
+  moveGroup,
+  managedGroupPaths,
+  onUnmanageGroup,
+  isMultiSelectMode,
+  selectedHostIds,
+  toggleHostSelection,
+}) => {
+  const { t } = useI18n();
+  
+  // Use external state if provided, otherwise use local persistent state
+  const localTreeState = useTreeExpandedState(STORAGE_KEY_VAULT_HOSTS_TREE_EXPANDED);
+  
+  const expandedPaths = externalExpandedPaths || localTreeState.expandedPaths;
+  const togglePath = externalOnTogglePath || localTreeState.togglePath;
+  const expandAll = externalOnExpandAll || localTreeState.expandAll;
+  const collapseAll = externalOnCollapseAll || localTreeState.collapseAll;
+
+  // Get all possible group paths for expand/collapse all functionality
+  const getAllGroupPaths = (nodes: GroupNode[]): string[] => {
+    const paths: string[] = [];
+    const traverse = (nodeList: GroupNode[]) => {
+      nodeList.forEach(node => {
+        paths.push(node.path);
+        if (node.children) {
+          traverse(Object.values(node.children) as GroupNode[]);
+        }
+      });
+    };
+    traverse(nodes);
+    return paths;
+  };
+
+  const allGroupPaths = useMemo(() => getAllGroupPaths(groupTree), [groupTree]);
+
+  const handleExpandAll = () => {
+    expandAll(allGroupPaths);
+  };
+
+  const handleCollapseAll = () => {
+    collapseAll();
+  };
+
+  // Get ungrouped hosts (hosts without a group or with empty group) and sort them
+  const ungroupedHosts = useMemo(() => {
+    const hosts_without_group = hosts.filter(host => !host.group || host.group === '');
+    return hosts_without_group.sort((a, b) => {
+      switch (sortMode) {
+        case 'az':
+          return a.label.localeCompare(b.label);
+        case 'za':
+          return b.label.localeCompare(a.label);
+        case 'newest':
+          return (b.createdAt || 0) - (a.createdAt || 0);
+        case 'oldest':
+          return (a.createdAt || 0) - (b.createdAt || 0);
+        default:
+          return a.label.localeCompare(b.label);
+      }
+    });
+  }, [hosts, sortMode]);
+
+  // Sort group tree based on sort mode
+  const sortedGroupTree = useMemo(() => {
+    return [...groupTree].sort((a, b) => {
+      switch (sortMode) {
+        case 'za':
+          return b.name.localeCompare(a.name);
+        case 'newest':
+        case 'oldest':
+          // For groups, fall back to name sorting since groups don't have creation dates
+          return a.name.localeCompare(b.name);
+        case 'az':
+        default:
+          return a.name.localeCompare(b.name);
+      }
+    });
+  }, [groupTree, sortMode]);
+
+  return (
+    <div className="space-y-1">
+      {/* Expand/Collapse controls */}
+      {groupTree.length > 0 && (
+        <div className="flex items-center gap-2 mb-3 pb-2 border-b border-border/30">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleExpandAll}
+            className="h-7 px-2 text-xs"
+          >
+            <Expand size={12} className="mr-1" />
+            {t("vault.tree.expandAll")}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleCollapseAll}
+            className="h-7 px-2 text-xs"
+          >
+            <Minimize2 size={12} className="mr-1" />
+            {t("vault.tree.collapseAll")}
+          </Button>
+        </div>
+      )}
+
+      {/* Group tree */}
+      {sortedGroupTree.map((node) => (
+        <TreeNode
+          key={node.path}
+          node={node}
+          depth={0}
+          sortMode={sortMode}
+          expandedPaths={expandedPaths}
+          onToggle={togglePath}
+          onConnect={onConnect}
+          onEditHost={onEditHost}
+          onDuplicateHost={onDuplicateHost}
+          onDeleteHost={onDeleteHost}
+          onCopyCredentials={onCopyCredentials}
+          onNewHost={onNewHost}
+          onNewGroup={onNewGroup}
+          onEditGroup={onEditGroup}
+          onDeleteGroup={onDeleteGroup}
+          moveHostToGroup={moveHostToGroup}
+          moveGroup={moveGroup}
+          managedGroupPaths={managedGroupPaths}
+          onUnmanageGroup={onUnmanageGroup}
+          isMultiSelectMode={isMultiSelectMode}
+          selectedHostIds={selectedHostIds}
+          toggleHostSelection={toggleHostSelection}
+        />
+      ))}
+
+      {/* Ungrouped hosts at root level */}
+      {ungroupedHosts.map((host) => (
+        <HostTreeItem
+          key={host.id}
+          host={host}
+          depth={0}
+          onConnect={onConnect}
+          onEditHost={onEditHost}
+          onDuplicateHost={onDuplicateHost}
+          onDeleteHost={onDeleteHost}
+          onCopyCredentials={onCopyCredentials}
+          moveHostToGroup={moveHostToGroup}
+          isMultiSelectMode={isMultiSelectMode}
+          selectedHostIds={selectedHostIds}
+          toggleHostSelection={toggleHostSelection}
+        />
+      ))}
+      
+      {/* Empty state */}
+      {ungroupedHosts.length === 0 && groupTree.length === 0 && (
+        <div className="text-center py-12 text-muted-foreground">
+          <Server size={48} className="mx-auto mb-4 opacity-50" />
+          <p className="text-sm">{t("vault.hosts.empty")}</p>
+        </div>
+      )}
+    </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/KeyboardInteractiveModal.tsx

@@ -0,0 +1,200 @@
+/**
+ * Keyboard Interactive Authentication Modal
+ * Global modal for handling SSH keyboard-interactive authentication (2FA/MFA)
+ * This modal displays prompts from the SSH server and collects user responses.
+ */
+import { Eye, EyeOff, KeyRound, Loader2 } from "lucide-react";
+import React, { useCallback, useEffect, useState } from "react";
+import { useI18n } from "../application/i18n/I18nProvider";
+import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+
+export interface KeyboardInteractivePrompt {
+  prompt: string;
+  echo: boolean;
+}
+
+export interface KeyboardInteractiveRequest {
+  requestId: string;
+  name: string;
+  instructions: string;
+  prompts: KeyboardInteractivePrompt[];
+  hostname?: string;
+  savedPassword?: string | null;
+}
+
+interface KeyboardInteractiveModalProps {
+  request: KeyboardInteractiveRequest | null;
+  onSubmit: (requestId: string, responses: string[]) => void;
+  onCancel: (requestId: string) => void;
+}
+
+export const KeyboardInteractiveModal: React.FC<KeyboardInteractiveModalProps> = ({
+  request,
+  onSubmit,
+  onCancel,
+}) => {
+  const { t } = useI18n();
+  const [responses, setResponses] = useState<string[]>([]);
+  const [showPasswords, setShowPasswords] = useState<boolean[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Reset state when request changes
+  useEffect(() => {
+    if (request) {
+      setResponses(request.prompts.map(() => ""));
+      setShowPasswords(request.prompts.map(() => false));
+      setIsSubmitting(false);
+    }
+  }, [request]);
+
+  const handleResponseChange = useCallback((index: number, value: string) => {
+    setResponses((prev) => {
+      const updated = [...prev];
+      updated[index] = value;
+      return updated;
+    });
+  }, []);
+
+  const toggleShowPassword = useCallback((index: number) => {
+    setShowPasswords((prev) => {
+      const updated = [...prev];
+      updated[index] = !updated[index];
+      return updated;
+    });
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    if (!request || isSubmitting) return;
+    setIsSubmitting(true);
+    onSubmit(request.requestId, responses);
+  }, [request, responses, onSubmit, isSubmitting]);
+
+  const handleCancel = useCallback(() => {
+    if (!request) return;
+    onCancel(request.requestId);
+  }, [request, onCancel]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && !isSubmitting) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit, isSubmitting]
+  );
+
+  if (!request) return null;
+
+  const title = request.name?.trim() || t("keyboard.interactive.title");
+  const description =
+    request.instructions?.trim() ||
+    (request.hostname
+      ? t("keyboard.interactive.descWithHost", { hostname: request.hostname })
+      : t("keyboard.interactive.desc"));
+
+  return (
+    <Dialog open={!!request} onOpenChange={(open) => !open && handleCancel()}>
+      <DialogContent className="sm:max-w-[425px]" hideCloseButton>
+        <DialogHeader>
+          <div className="flex items-center gap-3 mb-2">
+            <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
+              <KeyRound className="h-5 w-5 text-primary" />
+            </div>
+            <div>
+              <DialogTitle>{title}</DialogTitle>
+              <DialogDescription className="mt-1">
+                {description}
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          {request.prompts.map((prompt, index) => {
+            const isPassword = !prompt.echo;
+            const showPassword = showPasswords[index];
+            // Clean up prompt text (remove trailing colon and whitespace)
+            const promptLabel = prompt.prompt.replace(/:\s*$/, "").trim();
+
+            return (
+              <div key={index} className="space-y-2">
+                <Label htmlFor={`ki-prompt-${index}`}>
+                  {promptLabel || t("keyboard.interactive.response")}
+                </Label>
+                <div className="relative">
+                  <Input
+                    id={`ki-prompt-${index}`}
+                    type={isPassword && !showPassword ? "password" : "text"}
+                    value={responses[index] || ""}
+                    onChange={(e) => handleResponseChange(index, e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder=""
+                    className={isPassword ? "pr-10" : undefined}
+                    autoFocus={index === 0}
+                    disabled={isSubmitting}
+                  />
+                  {isPassword && (
+                    <button
+                      type="button"
+                      className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground disabled:opacity-50 p-1"
+                      onClick={() => toggleShowPassword(index)}
+                      disabled={isSubmitting}
+                    >
+                      {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                    </button>
+                  )}
+                </div>
+                {/* Use saved password button - shown below input, right-aligned */}
+                {isPassword && request.savedPassword && !responses[index] && (
+                  <div className="flex justify-end">
+                    <button
+                      type="button"
+                      className="flex items-center gap-1 text-xs text-primary hover:text-primary/80 disabled:opacity-50"
+                      onClick={() => handleResponseChange(index, request.savedPassword!)}
+                      disabled={isSubmitting}
+                    >
+                      <KeyRound size={12} />
+                      <span>{t("keyboard.interactive.useSavedPassword")}</span>
+                    </button>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="flex items-center justify-between pt-2">
+          <Button
+            variant="secondary"
+            onClick={handleCancel}
+            disabled={isSubmitting}
+          >
+            {t("common.cancel")}
+          </Button>
+          <Button onClick={handleSubmit} disabled={isSubmitting}>
+            {isSubmitting ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                {t("keyboard.interactive.verifying")}
+              </>
+            ) : (
+              t("keyboard.interactive.submit")
+            )}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default KeyboardInteractiveModal;

components/KeychainManager.tsx

@@ -23,6 +23,7 @@ import { STORAGE_KEY_VAULT_KEYS_VIEW_MODE } from "../infrastructure/config/stora
 import { logger } from "../lib/logger";
 import { cn } from "../lib/utils";
 import { Host, Identity, KeyType, SSHKey } from "../types";
+import { ManagedSource } from "../domain/models";
 import { useKeychainBackend } from "../application/state/useKeychainBackend";
 import SelectHostPanel from "./SelectHostPanel";
 import {
@@ -68,6 +69,7 @@ interface KeychainManagerProps {
   identities?: Identity[];
   hosts?: Host[];
   customGroups?: string[];
+  managedSources?: ManagedSource[];
   onSave: (key: SSHKey) => void;
   onUpdate: (key: SSHKey) => void;
   onDelete: (id: string) => void;
@@ -83,6 +85,7 @@ const KeychainManager: React.FC<KeychainManagerProps> = ({
   identities = [],
   hosts = [],
   customGroups = [],
+  managedSources = [],
   onSave,
   onUpdate,
   onDelete,
@@ -447,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} />;
@@ -503,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 */}
@@ -913,6 +871,8 @@ echo $3 >> "$FILE"`);
               <ImportKeyPanel
                 draftKey={draftKey}
                 setDraftKey={setDraftKey}
+                showPassphrase={showPassphrase}
+                setShowPassphrase={setShowPassphrase}
                 onImport={handleImport}
               />
             )}
@@ -1111,6 +1071,8 @@ echo $3 >> "$FILE"`);
                         privateKey: hostPrivateKey,
                         command,
                         timeout: 30000,
+                        enableKeyboardInteractive: true,
+                        sessionId: `export-key:${exportHost.id}:${panel.key.id}`,
                       });
 
                       // Check result - code 0, null, or undefined with no stderr is success
@@ -1282,6 +1244,7 @@ echo $3 >> "$FILE"`);
               onBack={() => setShowHostSelector(false)}
               onContinue={() => setShowHostSelector(false)}
               availableKeys={keys}
+              managedSources={managedSources}
               onSaveHost={onSaveHost}
               onCreateGroup={onCreateGroup}
             />

components/LogView.tsx

@@ -2,12 +2,13 @@ import { Terminal as XTerm } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { WebglAddon } from "@xterm/addon-webgl";
 import "@xterm/xterm/css/xterm.css";
-import { FileText, Palette, X } from "lucide-react";
+import { FileText, Download, Palette, X } from "lucide-react";
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 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";
 
@@ -34,14 +35,20 @@ const LogViewComponent: React.FC<LogViewProps> = ({
     const fitAddonRef = useRef<FitAddon | null>(null);
     const [isReady, setIsReady] = useState(false);
     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;
 
@@ -67,6 +74,30 @@ const LogViewComponent: React.FC<LogViewProps> = ({
         onUpdateLog(log.id, { fontSize });
     }, [log.id, onUpdateLog]);
 
+    // Handle export
+    const handleExport = useCallback(async () => {
+        if (!log.terminalData || isExporting) return;
+
+        setIsExporting(true);
+        try {
+            const { netcattyBridge } = await import("../infrastructure/services/netcattyBridge");
+            const bridge = netcattyBridge.get();
+            if (bridge?.exportSessionLog) {
+                await bridge.exportSessionLog({
+                    terminalData: log.terminalData,
+                    hostLabel: log.hostLabel,
+                    hostname: log.hostname,
+                    startTime: log.startTime,
+                    format: 'txt',
+                });
+            }
+        } catch (err) {
+            console.error('Failed to export session log:', err);
+        } finally {
+            setIsExporting(false);
+        }
+    }, [log.terminalData, log.hostLabel, log.hostname, log.startTime, isExporting]);
+
     // Initialize terminal
     useEffect(() => {
         if (!containerRef.current || !isVisible) return;
@@ -216,6 +247,21 @@ const LogViewComponent: React.FC<LogViewProps> = ({
                     </div>
                 </div>
                 <div className="flex items-center gap-2">
+                    {/* Export button */}
+                    {log.terminalData && (
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            className="gap-1.5 h-8 px-2"
+                            onClick={handleExport}
+                            disabled={isExporting}
+                            title={t("logView.export")}
+                        >
+                            <Download size={14} />
+                            <span className="text-xs">{t("logView.export")}</span>
+                        </Button>
+                    )}
+
                     {/* Theme & font customization button */}
                     <Button
                         variant="ghost"

components/PassphraseModal.tsx

@@ -0,0 +1,169 @@
+/**
+ * Passphrase Modal
+ * Modal for requesting passphrase for encrypted SSH keys
+ */
+import { Eye, EyeOff, KeyRound, Loader2 } from "lucide-react";
+import React, { useCallback, useEffect, useState } from "react";
+import { useI18n } from "../application/i18n/I18nProvider";
+import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+
+export interface PassphraseRequest {
+  requestId: string;
+  keyPath: string;
+  keyName: string;
+  hostname?: string;
+}
+
+interface PassphraseModalProps {
+  request: PassphraseRequest | null;
+  onSubmit: (requestId: string, passphrase: string) => void;
+  onCancel: (requestId: string) => void;
+  onSkip?: (requestId: string) => void;
+}
+
+export const PassphraseModal: React.FC<PassphraseModalProps> = ({
+  request,
+  onSubmit,
+  onCancel,
+  onSkip,
+}) => {
+  const { t } = useI18n();
+  const [passphrase, setPassphrase] = useState("");
+  const [showPassphrase, setShowPassphrase] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Reset state when request changes
+  useEffect(() => {
+    if (request) {
+      setPassphrase("");
+      setShowPassphrase(false);
+      setIsSubmitting(false);
+    }
+  }, [request]);
+
+  const handleSubmit = useCallback(() => {
+    if (!request || isSubmitting || !passphrase) return;
+    setIsSubmitting(true);
+    onSubmit(request.requestId, passphrase);
+  }, [request, passphrase, onSubmit, isSubmitting]);
+
+  const handleCancel = useCallback(() => {
+    if (!request) return;
+    onCancel(request.requestId);
+  }, [request, onCancel]);
+
+  const handleSkip = useCallback(() => {
+    if (!request || !onSkip) return;
+    onSkip(request.requestId);
+  }, [request, onSkip]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && !isSubmitting && passphrase) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit, isSubmitting, passphrase]
+  );
+
+  if (!request) return null;
+
+  const keyDisplayName = request.keyName || request.keyPath.split("/").pop() || "SSH Key";
+
+  return (
+    <Dialog open={!!request} onOpenChange={(open) => !open && handleCancel()}>
+      <DialogContent className="sm:max-w-[425px]" hideCloseButton>
+        <DialogHeader>
+          <div className="flex items-center gap-3 mb-2">
+            <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
+              <KeyRound className="h-5 w-5 text-primary" />
+            </div>
+            <div>
+              <DialogTitle>{t("passphrase.title")}</DialogTitle>
+              <DialogDescription className="mt-1">
+                {request.hostname
+                  ? t("passphrase.descWithHost", { keyName: keyDisplayName, hostname: request.hostname })
+                  : t("passphrase.desc", { keyName: keyDisplayName })}
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          <div className="space-y-2">
+            <Label htmlFor="passphrase-input">
+              {t("passphrase.label")}
+            </Label>
+            <div className="relative">
+              <Input
+                id="passphrase-input"
+                type={showPassphrase ? "text" : "password"}
+                value={passphrase}
+                onChange={(e) => setPassphrase(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder=""
+                className="pr-10"
+                autoFocus
+                disabled={isSubmitting}
+              />
+              <button
+                type="button"
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground disabled:opacity-50 p-1"
+                onClick={() => setShowPassphrase(!showPassphrase)}
+                disabled={isSubmitting}
+              >
+                {showPassphrase ? <EyeOff size={16} /> : <Eye size={16} />}
+              </button>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t("passphrase.keyPath")}: <code className="text-xs">{request.keyPath}</code>
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between pt-2">
+          <div className="flex gap-2">
+            <Button
+              variant="secondary"
+              onClick={handleCancel}
+              disabled={isSubmitting}
+            >
+              {t("common.cancel")}
+            </Button>
+            {onSkip && (
+              <Button
+                variant="ghost"
+                onClick={handleSkip}
+                disabled={isSubmitting}
+              >
+                {t("passphrase.skip")}
+              </Button>
+            )}
+          </div>
+          <Button onClick={handleSubmit} disabled={isSubmitting || !passphrase}>
+            {isSubmitting ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                {t("passphrase.unlocking")}
+              </>
+            ) : (
+              t("passphrase.unlock")
+            )}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default PassphraseModal;

components/PortForwardingNew.tsx

@@ -1,4 +1,5 @@
 import {
+  AlertTriangle,
   Check,
   ChevronDown,
   Globe,
@@ -14,6 +15,7 @@ import { useI18n } from "../application/i18n/I18nProvider";
 import { usePortForwardingState } from "../application/state/usePortForwardingState";
 import {
   Host,
+  ManagedSource,
   PortForwardingRule,
   PortForwardingType,
   SSHKey,
@@ -26,6 +28,14 @@ import {
   AsidePanelFooter,
 } from "./ui/aside-panel";
 import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
 import { Dropdown, DropdownContent, DropdownTrigger } from "./ui/dropdown";
 import { Input } from "./ui/input";
 import { SortDropdown } from "./ui/sort-dropdown";
@@ -55,6 +65,7 @@ interface PortForwardingProps {
   keys: SSHKey[];
   identities?: import('../domain/models').Identity[];
   customGroups: string[];
+  managedSources?: ManagedSource[];
   onNewHost?: () => void;
   onSaveHost?: (host: Host) => void;
   onCreateGroup?: (groupPath: string) => void;
@@ -65,6 +76,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
   keys,
   identities = [],
   customGroups: _customGroups,
+  managedSources = [],
   onNewHost: _onNewHost,
   onSaveHost,
   onCreateGroup: _onCreateGroup,
@@ -118,7 +130,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
         const result = await startTunnel(
           rule,
           _host,
-          keys.map((k) => ({ id: k.id, privateKey: k.privateKey })),
+          keys.map((k) => ({ id: k.id, privateKey: k.privateKey, passphrase: k.passphrase })),
           (status, error) => {
             // Show toast on error (only once)
             if (status === "error" && error && !errorShown) {
@@ -129,6 +141,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
               );
             }
           },
+          rule.autoStart, // Enable reconnect for auto-start rules
         );
         // Show error from result only if not already shown
         if (!result.success && result.error && !errorShown) {
@@ -207,6 +220,11 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
   // New forwarding menu
   const [showNewMenu, setShowNewMenu] = useState(false);
 
+  // Delete confirmation dialog state for active tunnels
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [ruleToDelete, setRuleToDelete] = useState<PortForwardingRule | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
   // Reset wizard
   const resetWizard = () => {
     setWizardStep("type");
@@ -289,8 +307,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}`;
@@ -358,12 +374,50 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
   };
 
   // Close edit panel
-  const closeEditPanel = () => {
+  const closeEditPanel = useCallback(() => {
     setShowEditPanel(false);
     setEditingRule(null);
     setEditDraft({});
     setSelectedRuleId(null);
-  };
+  }, [setSelectedRuleId]);
+
+  // Handle delete with confirmation for active tunnels
+  const handleDeleteRule = useCallback(
+    (rule: PortForwardingRule) => {
+      // If tunnel is active or connecting, show confirmation dialog
+      if (rule.status === "active" || rule.status === "connecting") {
+        setRuleToDelete(rule);
+        setShowDeleteConfirm(true);
+      } else {
+        // If inactive, delete directly
+        if (editingRule?.id === rule.id) {
+          closeEditPanel();
+        }
+        deleteRule(rule.id);
+      }
+    },
+    [editingRule, deleteRule, closeEditPanel],
+  );
+
+  // Confirm delete of active tunnel: stop first, then delete
+  const confirmDeleteActiveRule = useCallback(async () => {
+    if (!ruleToDelete) return;
+
+    setIsDeleting(true);
+    try {
+      // Stop the tunnel first
+      await stopTunnel(ruleToDelete.id);
+      // Then delete the rule
+      if (editingRule?.id === ruleToDelete.id) {
+        closeEditPanel();
+      }
+      deleteRule(ruleToDelete.id);
+    } finally {
+      setIsDeleting(false);
+      setShowDeleteConfirm(false);
+      setRuleToDelete(null);
+    }
+  }, [ruleToDelete, stopTunnel, deleteRule, editingRule, closeEditPanel]);
 
   // Handle wizard navigation
   // Flow for local: type -> local-config -> destination -> host-selection
@@ -490,12 +544,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;
 
@@ -645,6 +693,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
                   <RuleCard
                     key={rule.id}
                     rule={rule}
+                    host={hosts.find((h) => h.id === rule.hostId)}
                     viewMode={viewMode}
                     isSelected={selectedRuleId === rule.id}
                     isPending={pendingOperations.has(rule.id)}
@@ -654,12 +703,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
                     }}
                     onEdit={() => startEditRule(rule)}
                     onDuplicate={() => duplicateRule(rule.id)}
-                    onDelete={() => {
-                      if (editingRule?.id === rule.id) {
-                        closeEditPanel();
-                      }
-                      deleteRule(rule.id);
-                    }}
+                    onDelete={() => handleDeleteRule(rule)}
                     onStart={() => handleStartTunnel(rule)}
                     onStop={() => handleStopTunnel(rule)}
                   />
@@ -685,10 +729,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
             duplicateRule(editingRule.id);
             closeEditPanel();
           }}
-          onDelete={() => {
-            deleteRule(editingRule.id);
-            closeEditPanel();
-          }}
+          onDelete={() => handleDeleteRule(editingRule)}
           onOpenHostSelector={() => setShowHostSelector(true)}
         />
       )}
@@ -799,6 +840,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
           onContinue={() => setShowHostSelector(false)}
           availableKeys={keys}
           identities={identities}
+          managedSources={managedSources}
           onSaveHost={onSaveHost}
           onCreateGroup={_onCreateGroup}
         />
@@ -819,6 +861,45 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
           isValid={isNewFormValid()}
         />
       )}
+
+      {/* Delete Active Tunnel Confirmation Dialog */}
+      <Dialog open={showDeleteConfirm} onOpenChange={(open) => {
+        if (!isDeleting) {
+          setShowDeleteConfirm(open);
+          if (!open) setRuleToDelete(null);
+        }
+      }}>
+        <DialogContent className="sm:max-w-[400px]">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-destructive">
+              <AlertTriangle size={20} />
+              {t("pf.deleteActive.title")}
+            </DialogTitle>
+            <DialogDescription>
+              {t("pf.deleteActive.desc", { label: ruleToDelete?.label ?? "" })}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={() => {
+                setShowDeleteConfirm(false);
+                setRuleToDelete(null);
+              }}
+              disabled={isDeleting}
+            >
+              {t("common.cancel")}
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={confirmDeleteActiveRule}
+              disabled={isDeleting}
+            >
+              {t("pf.deleteActive.confirm")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 };

components/QuickConnectWizard.tsx

@@ -14,7 +14,7 @@ import React, { useMemo, useState } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import type { QuickConnectTarget } from "../domain/quickConnect";
 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 +30,6 @@ interface QuickConnectWizardProps {
   open: boolean;
   target: QuickConnectTarget;
   keys: SSHKey[];
-  knownHosts: KnownHost[];
   warnings?: string[];
   onConnect: (host: Host) => void;
   onSaveHost?: (host: Host) => void;
@@ -42,7 +41,6 @@ const QuickConnectWizard: React.FC<QuickConnectWizardProps> = ({
   open,
   target,
   keys,
-  knownHosts,
   warnings,
   onConnect,
   onSaveHost,
@@ -69,16 +67,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(() => {

components/QuickSwitcher.tsx

@@ -6,7 +6,7 @@ import {
   Terminal,
   TerminalSquare,
 } from "lucide-react";
-import React, { memo, useEffect, useRef, useState } from "react";
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { Host, TerminalSession, Workspace } from "../types";
 import { KeyBinding } from "../domain/models";
@@ -17,10 +17,45 @@ type QuickSwitcherItem = {
   data?: Host | TerminalSession | Workspace;
 };
 import { DistroAvatar } from "./DistroAvatar";
-import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import { ScrollArea } from "./ui/scroll-area";
 
+// Compute once at module level
+const IS_MAC = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform);
+
+// Memoized host item component to prevent unnecessary re-renders
+const HostItem = memo(({
+  host,
+  isSelected,
+  onSelect,
+  onMouseEnter,
+}: {
+  host: Host;
+  isSelected: boolean;
+  onSelect: (host: Host) => void;
+  onMouseEnter: () => void;
+}) => (
+  <div
+    className={`flex items-center justify-between px-4 py-2.5 cursor-pointer transition-colors ${isSelected ? "bg-primary/15" : "hover:bg-muted/50"
+      }`}
+    onClick={() => onSelect(host)}
+    onMouseEnter={onMouseEnter}
+  >
+    <div className="flex items-center gap-3 min-w-0">
+      <DistroAvatar
+        host={host}
+        fallback={host.label.slice(0, 2).toUpperCase()}
+        size="sm"
+      />
+      <span className="text-sm font-medium truncate">{host.label}</span>
+    </div>
+    <div className="text-[11px] text-muted-foreground">
+      {host.group ? `Personal / ${host.group}` : "Personal"}
+    </div>
+  </div>
+));
+HostItem.displayName = "HostItem";
+
 interface QuickSwitcherProps {
   isOpen: boolean;
   query: string;
@@ -32,7 +67,7 @@ interface QuickSwitcherProps {
   onSelectTab: (tabId: string) => void;
   onClose: () => void;
   onCreateLocalTerminal?: () => void;
-  onCreateWorkspace?: () => void;
+  // onCreateWorkspace removed - feature not currently used
   keyBindings?: KeyBinding[];
 }
 
@@ -47,19 +82,16 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
   onSelectTab,
   onClose,
   onCreateLocalTerminal,
-  onCreateWorkspace,
   keyBindings,
 }) => {
   const { t } = useI18n();
   // Get hotkey display strings
-  const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform);
-  const getHotkeyLabel = (actionId: string) => {
+  const getHotkeyLabel = useCallback((actionId: string) => {
     const binding = keyBindings?.find(k => k.id === actionId);
     if (!binding) return '';
-    return isMac ? binding.mac : binding.pc;
-  };
+    return IS_MAC ? binding.mac : binding.pc;
+  }, [keyBindings]);
   const quickSwitchKey = getHotkeyLabel('quick-switch');
-  const [isFocused, setIsFocused] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -67,7 +99,6 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
   // Reset state when opening
   useEffect(() => {
     if (isOpen) {
-      setIsFocused(false);
       setSelectedIndex(0);
       // Auto focus the input after a short delay
       setTimeout(() => {
@@ -93,15 +124,17 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isOpen, onClose]);
 
-  if (!isOpen) return null;
+  // Memoize orphan sessions
+  const orphanSessions = useMemo(
+    () => sessions.filter((s) => !s.workspaceId),
+    [sessions]
+  );
 
-  const showCategorized = isFocused || query.trim().length > 0;
+  // Always show categorized view (Hosts/Tabs/Quick connect)
+  const showCategorized = true;
 
-  // Get orphan sessions (sessions without workspace)
-  const orphanSessions = sessions.filter((s) => !s.workspaceId);
-
-  // Build categorized items for navigation
-  const buildFlatItems = () => {
+  // Memoize flat items list and index map
+  const { flatItems, itemIndexMap } = useMemo(() => {
     const items: QuickSwitcherItem[] = [];
 
     if (showCategorized) {
@@ -127,10 +160,21 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
       );
     }
 
-    return items;
-  };
+    // Build index map for O(1) lookup
+    const indexMap = new Map<string, number>();
+    items.forEach((item, idx) => {
+      indexMap.set(`${item.type}:${item.id}`, idx);
+    });
 
-  const flatItems = buildFlatItems();
+    return { flatItems: items, itemIndexMap: indexMap };
+  }, [showCategorized, results, orphanSessions, workspaces]);
+
+  // O(1) index lookup
+  const getItemIndex = useCallback((type: string, id: string) => {
+    return itemIndexMap.get(`${type}:${id}`) ?? -1;
+  }, [itemIndexMap]);
+
+  if (!isOpen) return null;
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === "ArrowDown") {
@@ -165,40 +209,6 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
     }
   };
 
-  // Helper to get item index in flat list
-  const getItemIndex = (type: string, id: string) => {
-    return flatItems.findIndex((item) => item.type === type && item.id === id);
-  };
-
-  const renderHostItem = (host: Host) => {
-    const idx = getItemIndex("host", host.id);
-    const isSelected = idx === selectedIndex;
-
-    return (
-      <div
-        key={host.id}
-        className={`flex items-center justify-between px-4 py-2.5 cursor-pointer transition-colors ${isSelected ? "bg-primary/15" : "hover:bg-muted/50"
-          }`}
-        onClick={() => {
-          onSelect(host);
-        }}
-        onMouseEnter={() => setSelectedIndex(idx)}
-      >
-        <div className="flex items-center gap-3 min-w-0">
-          <DistroAvatar
-            host={host}
-            fallback={host.label.slice(0, 2).toUpperCase()}
-            size="sm"
-          />
-          <span className="text-sm font-medium truncate">{host.label}</span>
-        </div>
-        <div className="text-[11px] text-muted-foreground">
-          {host.group ? `Personal / ${host.group}` : "Personal"}
-        </div>
-      </div>
-    );
-  };
-
   return (
     <div
       className="fixed inset-x-0 top-12 z-50 flex justify-center pt-2"
@@ -219,7 +229,6 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
               onQueryChange(e.target.value);
               setSelectedIndex(0);
             }}
-            onFocus={() => setIsFocused(true)}
             onKeyDown={handleKeyDown}
             placeholder={t("qs.search.placeholder")}
             className="flex-1 h-8 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 px-0 text-sm"
@@ -232,193 +241,163 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
         </div>
 
         <ScrollArea className="flex-1 h-full">
-          {!showCategorized ? (
-            /* Default view: Recent connections with header */
-            <div>
-              <div className="px-4 py-2 flex items-center justify-between">
-                <span className="text-xs font-medium text-muted-foreground">
-                  {t("qs.recentConnections")}
-                </span>
-                <div className="flex items-center gap-2">
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    className="h-6 px-2 text-[11px]"
-                    onClick={() => onCreateWorkspace?.()}
-                  >
-                    {t("qs.createWorkspace")}
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    className="h-6 px-2 text-[11px]"
-                    disabled
-                  >
-                    {t("qs.restore")}
-                  </Button>
-                </div>
-              </div>
-              <div>
-                {results.length > 0 ? (
-                  results.map(renderHostItem)
-                ) : (
-                  <div className="px-4 py-6 text-sm text-muted-foreground text-center">
-                    No recent connections
-                  </div>
-                )}
-              </div>
+          {/* Categorized view: Hosts/Tabs/Quick connect */}
+          <div>
+            {/* Jump To hint */}
+            <div className="px-4 py-2 flex items-center gap-2">
+              <span className="text-xs text-muted-foreground">{t("qs.jumpTo")}</span>
+              {quickSwitchKey && (
+                <kbd className="text-[10px] text-muted-foreground bg-muted px-1 py-0.5 rounded">
+                  {quickSwitchKey.replace(/ \+ /g, '+')}
+                </kbd>
+              )}
             </div>
-          ) : (
-            /* Focused/searching view: Categorized items */
+
+            {/* Hosts section */}
+            {results.length > 0 && (
+              <div>
+                <div className="px-4 py-1.5">
+                  <span className="text-xs font-medium text-muted-foreground">
+                    Hosts
+                  </span>
+                </div>
+                {results.map((host) => (
+                  <HostItem
+                    key={host.id}
+                    host={host}
+                    isSelected={getItemIndex("host", host.id) === selectedIndex}
+                    onSelect={onSelect}
+                    onMouseEnter={() => setSelectedIndex(getItemIndex("host", host.id))}
+                  />
+                ))}
+              </div>
+            )}
+
+            {/* Tabs section */}
             <div>
-              {/* Jump To hint */}
-              <div className="px-4 py-2 flex items-center gap-2">
-                <span className="text-xs text-muted-foreground">{t("qs.jumpTo")}</span>
-                {quickSwitchKey && (
-                  <kbd className="text-[10px] text-muted-foreground bg-muted px-1 py-0.5 rounded">
-                    {quickSwitchKey.replace(/ \+ /g, '+')}
-                  </kbd>
-                )}
+              <div className="px-4 py-1.5">
+                <span className="text-xs font-medium text-muted-foreground">
+                  Tabs
+                </span>
               </div>
 
-              {/* Hosts section */}
-              {results.length > 0 && (
-                <div>
-                  <div className="px-4 py-1.5">
-                    <span className="text-xs font-medium text-muted-foreground">
-                      Hosts
+              {/* Built-in tabs */}
+              {["vault", "sftp"].map((tabId) => {
+                const idx = getItemIndex("tab", tabId);
+                const isSelected = idx === selectedIndex;
+                const icon =
+                  tabId === "vault" ? (
+                    <Shield size={16} />
+                  ) : (
+                    <Folder size={16} />
+                  );
+                const label = tabId === "vault" ? "Vaults" : "SFTP";
+
+                return (
+                  <div
+                    key={tabId}
+                    className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${isSelected ? "bg-primary/15" : "hover:bg-muted/50"
+                      }`}
+                    onClick={() => {
+                      onSelectTab(tabId);
+                      onClose();
+                    }}
+                    onMouseEnter={() => setSelectedIndex(idx)}
+                  >
+                    <div className="h-6 w-6 rounded flex items-center justify-center text-muted-foreground">
+                      {icon}
+                    </div>
+                    <span className="text-sm font-medium">{label}</span>
+                  </div>
+                );
+              })}
+
+              {/* Workspaces */}
+              {workspaces.map((workspace) => {
+                const idx = getItemIndex("workspace", workspace.id);
+                const isSelected = idx === selectedIndex;
+
+                return (
+                  <div
+                    key={workspace.id}
+                    className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${isSelected ? "bg-primary/15" : "hover:bg-muted/50"
+                      }`}
+                    onClick={() => {
+                      onSelectTab(workspace.id);
+                      onClose();
+                    }}
+                    onMouseEnter={() => setSelectedIndex(idx)}
+                  >
+                    <div className="h-6 w-6 rounded flex items-center justify-center text-muted-foreground">
+                      <LayoutGrid size={16} />
+                    </div>
+                    <span className="text-sm font-medium">
+                      {workspace.title}
                     </span>
                   </div>
-                  {results.map(renderHostItem)}
+                );
+              })}
+
+              {/* Orphan sessions */}
+              {orphanSessions.map((session) => {
+                const idx = getItemIndex("tab", session.id);
+                const isSelected = idx === selectedIndex;
+
+                return (
+                  <div
+                    key={session.id}
+                    className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${isSelected ? "bg-primary/15" : "hover:bg-muted/50"
+                      }`}
+                    onClick={() => {
+                      onSelectTab(session.id);
+                      onClose();
+                    }}
+                    onMouseEnter={() => setSelectedIndex(idx)}
+                  >
+                    <div className="h-6 w-6 rounded flex items-center justify-center text-muted-foreground">
+                      <TerminalSquare size={16} />
+                    </div>
+                    <span className="text-sm font-medium">
+                      {session.hostLabel}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Quick connect section */}
+            <div>
+              <div className="px-4 py-1.5">
+                <span className="text-xs font-medium text-muted-foreground">
+                  Quick connect
+                </span>
+              </div>
+
+              {/* Local Terminal */}
+              {onCreateLocalTerminal && (
+                <div
+                  className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${getItemIndex("action", "local-terminal") === selectedIndex
+                    ? "bg-primary/15"
+                    : "hover:bg-muted/50"
+                    }`}
+                  onClick={() => {
+                    onCreateLocalTerminal();
+                    onClose();
+                  }}
+                  onMouseEnter={() =>
+                    setSelectedIndex(getItemIndex("action", "local-terminal"))
+                  }
+                >
+                  <div className="h-6 w-6 rounded flex items-center justify-center text-muted-foreground">
+                    <Terminal size={16} />
+                  </div>
+                  <span className="text-sm font-medium">{t("qs.localTerminal")}</span>
                 </div>
               )}
 
-              {/* Tabs section */}
-              <div>
-                <div className="px-4 py-1.5">
-                  <span className="text-xs font-medium text-muted-foreground">
-                    Tabs
-                  </span>
-                </div>
-
-                {/* Built-in tabs */}
-                {["vault", "sftp"].map((tabId) => {
-                  const idx = getItemIndex("tab", tabId);
-                  const isSelected = idx === selectedIndex;
-                  const icon =
-                    tabId === "vault" ? (
-                      <Shield size={16} />
-                    ) : (
-                      <Folder size={16} />
-                    );
-                  const label = tabId === "vault" ? "Vaults" : "SFTP";
-
-                  return (
-                    <div
-                      key={tabId}
-                      className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${isSelected ? "bg-primary/15" : "hover:bg-muted/50"
-                        }`}
-                      onClick={() => {
-                        onSelectTab(tabId);
-                        onClose();
-                      }}
-                      onMouseEnter={() => setSelectedIndex(idx)}
-                    >
-                      <div className="h-6 w-6 rounded flex items-center justify-center text-muted-foreground">
-                        {icon}
-                      </div>
-                      <span className="text-sm font-medium">{label}</span>
-                    </div>
-                  );
-                })}
-
-                {/* Workspaces */}
-                {workspaces.map((workspace) => {
-                  const idx = getItemIndex("workspace", workspace.id);
-                  const isSelected = idx === selectedIndex;
-
-                  return (
-                    <div
-                      key={workspace.id}
-                      className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${isSelected ? "bg-primary/15" : "hover:bg-muted/50"
-                        }`}
-                      onClick={() => {
-                        onSelectTab(workspace.id);
-                        onClose();
-                      }}
-                      onMouseEnter={() => setSelectedIndex(idx)}
-                    >
-                      <div className="h-6 w-6 rounded flex items-center justify-center text-muted-foreground">
-                        <LayoutGrid size={16} />
-                      </div>
-                      <span className="text-sm font-medium">
-                        {workspace.title}
-                      </span>
-                    </div>
-                  );
-                })}
-
-                {/* Orphan sessions */}
-                {orphanSessions.map((session) => {
-                  const idx = getItemIndex("tab", session.id);
-                  const isSelected = idx === selectedIndex;
-
-                  return (
-                    <div
-                      key={session.id}
-                      className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${isSelected ? "bg-primary/15" : "hover:bg-muted/50"
-                        }`}
-                      onClick={() => {
-                        onSelectTab(session.id);
-                        onClose();
-                      }}
-                      onMouseEnter={() => setSelectedIndex(idx)}
-                    >
-                      <div className="h-6 w-6 rounded flex items-center justify-center text-muted-foreground">
-                        <TerminalSquare size={16} />
-                      </div>
-                      <span className="text-sm font-medium">
-                        {session.hostLabel}
-                      </span>
-                    </div>
-                  );
-                })}
-              </div>
-
-              {/* Quick connect section */}
-              <div>
-                <div className="px-4 py-1.5">
-                  <span className="text-xs font-medium text-muted-foreground">
-                    Quick connect
-                  </span>
-                </div>
-
-                {/* Local Terminal */}
-                {onCreateLocalTerminal && (
-                  <div
-                    className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${getItemIndex("action", "local-terminal") === selectedIndex
-                      ? "bg-primary/15"
-                      : "hover:bg-muted/50"
-                      }`}
-                    onClick={() => {
-                      onCreateLocalTerminal();
-                      onClose();
-                    }}
-                    onMouseEnter={() =>
-                      setSelectedIndex(getItemIndex("action", "local-terminal"))
-                    }
-                  >
-                    <div className="h-6 w-6 rounded flex items-center justify-center text-muted-foreground">
-                      <Terminal size={16} />
-                    </div>
-                    <span className="text-sm font-medium">{t("qs.localTerminal")}</span>
-                  </div>
-                )}
-
-                {/* Serial removed (not supported) */}
-              </div>
+              {/* Serial removed (not supported) */}
             </div>
-          )}
+          </div>
         </ScrollArea>
       </div>
     </div>

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

@@ -11,6 +11,7 @@ import React, { useMemo, useState } from "react";
 import { cn } from "../lib/utils";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { Host, SSHKey } from "../types";
+import { ManagedSource } from "../domain/models";
 import { DistroAvatar } from "./DistroAvatar";
 import HostDetailsPanel from "./HostDetailsPanel";
 import { Button } from "./ui/button";
@@ -31,6 +32,7 @@ interface SelectHostPanelProps {
   // Props for inline host creation
   availableKeys?: SSHKey[];
   identities?: import('../domain/models').Identity[];
+  managedSources?: ManagedSource[];
   onSaveHost?: (host: Host) => void;
   onCreateGroup?: (groupPath: string) => void;
   title?: string;
@@ -49,6 +51,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
   onNewHost,
   availableKeys = [],
   identities = [],
+  managedSources = [],
   onSaveHost,
   onCreateGroup,
   title,
@@ -63,21 +66,26 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const [showNewHostPanel, setShowNewHostPanel] = useState(false);
 
+  const selectableHosts = useMemo(
+    () => hosts.filter((host) => host.protocol !== "serial"),
+    [hosts]
+  );
+
   // Get all unique tags from hosts
   const allTags = useMemo(() => {
     const tagSet = new Set<string>();
-    hosts.forEach((h) => {
+    selectableHosts.forEach((h) => {
       if (h.tags) {
         h.tags.forEach((tag) => tagSet.add(tag));
       }
     });
     return Array.from(tagSet).sort();
-  }, [hosts]);
+  }, [selectableHosts]);
 
   // Get unique group paths from both hosts and customGroups
   const allGroupPaths = useMemo(() => {
     const pathSet = new Set<string>();
-    hosts.forEach((h) => {
+    selectableHosts.forEach((h) => {
       if (h.group) {
         // Add all parent paths as well
         const parts = h.group.split("/");
@@ -88,7 +96,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
     });
     customGroups.forEach((g) => pathSet.add(g));
     return Array.from(pathSet).sort();
-  }, [hosts, customGroups]);
+  }, [selectableHosts, customGroups]);
 
   // Get groups at current level
   const groupsWithCounts = useMemo(() => {
@@ -102,7 +110,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
         const topLevel = path.split("/")[0];
         if (!seen.has(topLevel)) {
           seen.add(topLevel);
-          const count = hosts.filter(
+          const count = selectableHosts.filter(
             (h) =>
               h.group &&
               (h.group === topLevel || h.group.startsWith(`${topLevel}/`)),
@@ -116,7 +124,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
         const fullPath = `${prefix}${nextLevel}`;
         if (!seen.has(fullPath)) {
           seen.add(fullPath);
-          const count = hosts.filter(
+          const count = selectableHosts.filter(
             (h) =>
               h.group &&
               (h.group === fullPath || h.group.startsWith(`${fullPath}/`)),
@@ -127,11 +135,11 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
     });
 
     return groups;
-  }, [allGroupPaths, currentPath, hosts]);
+  }, [allGroupPaths, currentPath, selectableHosts]);
 
   // Get hosts at current level with filtering and sorting
   const filteredHosts = useMemo(() => {
-    let result = hosts;
+    let result = selectableHosts;
 
     // Filter by current path
     if (currentPath) {
@@ -177,7 +185,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
     });
 
     return result;
-  }, [hosts, currentPath, searchQuery, selectedTags, sortMode]);
+  }, [selectableHosts, currentPath, searchQuery, selectedTags, sortMode]);
 
   // Build breadcrumb from current path
   const breadcrumbs = useMemo(() => {
@@ -189,19 +197,6 @@ 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 (
     <div
       className={cn(
@@ -356,7 +351,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
                       <div className="flex-1 min-w-0">
                         <div className="font-medium">{host.label}</div>
                         <div className="text-xs text-muted-foreground truncate">
-                          {host.protocol || "ssh"}, {host.username}
+                          {host.username}@{host.hostname}:{host.port || 22}
                         </div>
                       </div>
                       {isSelected && (
@@ -387,7 +382,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
             if (onContinue) {
               onContinue();
             } else {
-              const host = hosts.find((h) => selectedHostIds.includes(h.id));
+              const host = selectableHosts.find((h) => selectedHostIds.includes(h.id));
               if (host) {
                 onSelect(host);
               }
@@ -407,6 +402,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
           availableKeys={availableKeys}
           identities={identities}
           groups={customGroups}
+          managedSources={managedSources}
           allHosts={hosts}
           onSave={(host) => {
             onSaveHost(host);

components/SerialConnectModal.tsx

@@ -0,0 +1,428 @@
+/**
+ * Serial Port Connect Modal
+ * Allows users to configure and connect to a serial port
+ */
+import { ChevronDown, ChevronUp, Cpu, RefreshCw, Save, Usb } from 'lucide-react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useI18n } from '../application/i18n/I18nProvider';
+import { useTerminalBackend } from '../application/state/useTerminalBackend';
+import type { Host, SerialConfig, SerialFlowControl, SerialParity } from '../domain/models';
+import { cn } from '../lib/utils';
+import { Button } from './ui/button';
+import { Combobox, type ComboboxOption } from './ui/combobox';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
+
+interface SerialPort {
+  path: string;
+  manufacturer: string;
+  serialNumber: string;
+  vendorId: string;
+  productId: string;
+  pnpId: string;
+  type?: 'hardware' | 'pseudo' | 'custom';
+}
+
+interface SerialConnectModalProps {
+  open: boolean;
+  onClose: () => void;
+  onConnect: (config: SerialConfig) => void;
+  onSaveHost?: (host: Host) => void;
+}
+
+const BAUD_RATES = [300, 1200, 2400, 4800, 9600, 19200, 38400, 57600, 115200, 230400, 460800, 921600];
+const DATA_BITS: Array<5 | 6 | 7 | 8> = [5, 6, 7, 8];
+const STOP_BITS: Array<1 | 1.5 | 2> = [1, 1.5, 2];
+const PARITY_OPTIONS: SerialParity[] = ['none', 'even', 'odd', 'mark', 'space'];
+const FLOW_CONTROL_OPTIONS: SerialFlowControl[] = ['none', 'xon/xoff', 'rts/cts'];
+
+export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
+  open,
+  onClose,
+  onConnect,
+  onSaveHost,
+}) => {
+  const { t } = useI18n();
+  const [ports, setPorts] = useState<SerialPort[]>([]);
+  const [isLoadingPorts, setIsLoadingPorts] = useState(false);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
+  // Form state
+  const [selectedPort, setSelectedPort] = useState('');
+  const [baudRate, setBaudRate] = useState(115200);
+  const [dataBits, setDataBits] = useState<5 | 6 | 7 | 8>(8);
+  const [stopBits, setStopBits] = useState<1 | 1.5 | 2>(1);
+  const [parity, setParity] = useState<SerialParity>('none');
+  const [flowControl, setFlowControl] = useState<SerialFlowControl>('none');
+  const [localEcho, setLocalEcho] = useState(false);
+  const [lineMode, setLineMode] = useState(false);
+
+  // Save configuration state
+  const [saveConfig, setSaveConfig] = useState(false);
+  const [configLabel, setConfigLabel] = useState('');
+
+  const terminalBackend = useTerminalBackend();
+
+  const loadPorts = useCallback(async () => {
+    setIsLoadingPorts(true);
+    try {
+      const result = await terminalBackend.listSerialPorts();
+      setPorts(result);
+      // Auto-select first port if available and no port is selected
+      if (result.length > 0) {
+        setSelectedPort((prev) => prev || result[0].path);
+      }
+    } catch (err) {
+      console.error('[Serial] Failed to list ports:', err);
+    } finally {
+      setIsLoadingPorts(false);
+    }
+  }, [terminalBackend]);
+
+  useEffect(() => {
+    if (open) {
+      loadPorts();
+    }
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Generate a default label when port is selected
+  useEffect(() => {
+    if (selectedPort && !configLabel) {
+      const portName = selectedPort.split('/').pop() || selectedPort;
+      setConfigLabel(`Serial: ${portName}`);
+    }
+  }, [selectedPort, configLabel]);
+
+  const handleConnect = () => {
+    if (!selectedPort) return;
+
+    const config: SerialConfig = {
+      path: selectedPort,
+      baudRate,
+      dataBits,
+      stopBits,
+      parity,
+      flowControl,
+      localEcho,
+      lineMode,
+    };
+
+    // Save as host if checkbox is checked and onSaveHost is provided
+    if (saveConfig && onSaveHost) {
+      const portName = selectedPort.split('/').pop() || selectedPort;
+      const host: Host = {
+        id: `serial-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+        label: configLabel.trim() || `Serial: ${portName}`,
+        hostname: selectedPort,
+        // For serial hosts, port field stores baud rate as a numeric identifier.
+        // The full configuration is stored in serialConfig for actual connection.
+        port: baudRate,
+        username: '',
+        os: 'linux',
+        tags: ['serial'],
+        protocol: 'serial',
+        createdAt: Date.now(),
+        serialConfig: config, // Store full serial configuration for connection
+      };
+      onSaveHost(host);
+    }
+
+    onConnect(config);
+    onClose();
+  };
+
+  // Convert ports to Combobox options
+  const portOptions: ComboboxOption[] = useMemo(() => {
+    return ports.map((port) => ({
+      value: port.path,
+      label: port.path,
+      sublabel: port.manufacturer || undefined,
+    }));
+  }, [ports]);
+
+  // Validate: port path must start with /dev/ (Unix/macOS) or COM/\\.\COM (Windows)
+  const trimmedPort = selectedPort.trim();
+  const isPortValid =
+    trimmedPort.startsWith('/dev/') ||
+    /^COM\d+$/i.test(trimmedPort) ||
+    /^\\\\\.\\COM\d+$/i.test(trimmedPort);
+  // Allow custom baud rates as long as they are positive integers
+  const isBaudRateValid = Number.isInteger(baudRate) && baudRate > 0;
+
+  // Check if using 1.5 stop bits (limited Windows support)
+  const isStopBits15 = stopBits === 1.5;
+  const isValid = isPortValid && isBaudRateValid;
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Usb size={18} />
+            {t('serial.modal.title')}
+          </DialogTitle>
+          <DialogDescription>
+            {t('serial.modal.desc')}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          {/* Serial Port Selection */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="serial-port">{t('serial.field.port')}</Label>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={loadPorts}
+                disabled={isLoadingPorts}
+                className="h-6 px-2 text-xs"
+              >
+                <RefreshCw size={12} className={cn("mr-1", isLoadingPorts && "animate-spin")} />
+                {t('common.refresh')}
+              </Button>
+            </div>
+
+            {/* Combobox for port selection with manual input support */}
+            <Combobox
+              options={portOptions}
+              value={selectedPort}
+              onValueChange={setSelectedPort}
+              placeholder={t('serial.field.selectPort')}
+              emptyText={t('serial.noPorts')}
+              allowCreate
+              createText={t('common.use')}
+              icon={<Usb size={14} className="text-muted-foreground" />}
+            />
+
+            {!isPortValid && selectedPort && (
+              <p className="text-xs text-destructive">
+                {t('serial.field.customPortPlaceholder')}
+              </p>
+            )}
+          </div>
+
+          {/* Baud Rate */}
+          <div className="space-y-2">
+            <Label htmlFor="baud-rate">{t('serial.field.baudRate')}</Label>
+            <Combobox
+              options={BAUD_RATES.map((rate) => ({
+                value: String(rate),
+                label: String(rate),
+              }))}
+              value={String(baudRate)}
+              onValueChange={(val) => {
+                const parsed = parseInt(val, 10);
+                if (!isNaN(parsed) && parsed > 0) {
+                  setBaudRate(parsed);
+                }
+              }}
+              placeholder={t('serial.field.baudRatePlaceholder')}
+              emptyText={t('serial.field.baudRateEmpty')}
+              allowCreate
+              createText={t('common.use')}
+            />
+            {baudRate > 0 && !BAUD_RATES.includes(baudRate) && (
+              <p className="text-xs text-muted-foreground">
+                {t('serial.field.customBaudRate')}
+              </p>
+            )}
+          </div>
+
+          {/* Advanced Options */}
+          <Collapsible open={showAdvanced} onOpenChange={setShowAdvanced}>
+            <CollapsibleTrigger asChild>
+              <Button
+                variant="ghost"
+                className="w-full justify-between h-9 px-0 hover:bg-transparent"
+              >
+                <span className="text-sm font-medium text-muted-foreground">
+                  {t('common.advanced')}
+                </span>
+                {showAdvanced ? (
+                  <ChevronUp size={14} className="text-muted-foreground" />
+                ) : (
+                  <ChevronDown size={14} className="text-muted-foreground" />
+                )}
+              </Button>
+            </CollapsibleTrigger>
+            <CollapsibleContent className="space-y-4 pt-2">
+              {/* Data Bits */}
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="data-bits">{t('serial.field.dataBits')}</Label>
+                  <select
+                    id="data-bits"
+                    value={dataBits}
+                    onChange={(e) => setDataBits(parseInt(e.target.value, 10) as 5 | 6 | 7 | 8)}
+                    className="w-full h-10 px-3 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                  >
+                    {DATA_BITS.map((bits) => (
+                      <option key={bits} value={bits}>
+                        {bits}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                {/* Stop Bits */}
+                <div className="space-y-2">
+                  <Label htmlFor="stop-bits">{t('serial.field.stopBits')}</Label>
+                  <select
+                    id="stop-bits"
+                    value={stopBits}
+                    onChange={(e) => setStopBits(parseFloat(e.target.value) as 1 | 1.5 | 2)}
+                    className="w-full h-10 px-3 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                  >
+                    {STOP_BITS.map((bits) => (
+                      <option key={bits} value={bits}>
+                        {bits}
+                      </option>
+                    ))}
+                  </select>
+                  {isStopBits15 && (
+                    <p className="text-xs text-yellow-500">
+                      {t('serial.field.stopBits15Warning')}
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              {/* Parity */}
+              <div className="space-y-2">
+                <Label htmlFor="parity">{t('serial.field.parity')}</Label>
+                <select
+                  id="parity"
+                  value={parity}
+                  onChange={(e) => setParity(e.target.value as SerialParity)}
+                  className="w-full h-10 px-3 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                >
+                  {PARITY_OPTIONS.map((option) => (
+                    <option key={option} value={option}>
+                      {t(`serial.parity.${option}`)}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Flow Control */}
+              <div className="space-y-2">
+                <Label htmlFor="flow-control">{t('serial.field.flowControl')}</Label>
+                <select
+                  id="flow-control"
+                  value={flowControl}
+                  onChange={(e) => setFlowControl(e.target.value as SerialFlowControl)}
+                  className="w-full h-10 px-3 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                >
+                  {FLOW_CONTROL_OPTIONS.map((option) => (
+                    <option key={option} value={option}>
+                      {t(`serial.flowControl.${option}`)}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Terminal Options */}
+              <div className="space-y-3 pt-2 border-t border-border/60">
+                <div className="flex items-center justify-between">
+                  <div className="space-y-0.5">
+                    <Label htmlFor="local-echo" className="text-sm font-medium cursor-pointer">
+                      {t('serial.field.localEcho')}
+                    </Label>
+                    <p className="text-xs text-muted-foreground">
+                      {t('serial.field.localEchoDesc')}
+                    </p>
+                  </div>
+                  <input
+                    type="checkbox"
+                    id="local-echo"
+                    checked={localEcho}
+                    onChange={(e) => setLocalEcho(e.target.checked)}
+                    className="h-4 w-4 rounded border-input"
+                  />
+                </div>
+
+                <div className="flex items-center justify-between">
+                  <div className="space-y-0.5">
+                    <Label htmlFor="line-mode" className="text-sm font-medium cursor-pointer">
+                      {t('serial.field.lineMode')}
+                    </Label>
+                    <p className="text-xs text-muted-foreground">
+                      {t('serial.field.lineModeDesc')}
+                    </p>
+                  </div>
+                  <input
+                    type="checkbox"
+                    id="line-mode"
+                    checked={lineMode}
+                    onChange={(e) => setLineMode(e.target.checked)}
+                    className="h-4 w-4 rounded border-input"
+                  />
+                </div>
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
+
+          {/* Save Configuration */}
+          {onSaveHost && (
+            <div className="space-y-3 pt-2 border-t border-border/60">
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label htmlFor="save-config" className="text-sm font-medium cursor-pointer">
+                    {t('serial.field.saveConfig')}
+                  </Label>
+                  <p className="text-xs text-muted-foreground">
+                    {t('serial.field.saveConfigDesc')}
+                  </p>
+                </div>
+                <input
+                  type="checkbox"
+                  id="save-config"
+                  checked={saveConfig}
+                  onChange={(e) => setSaveConfig(e.target.checked)}
+                  className="h-4 w-4 rounded border-input"
+                />
+              </div>
+              {saveConfig && (
+                <div className="space-y-2">
+                  <Label htmlFor="config-label">{t('serial.field.configLabel')}</Label>
+                  <Input
+                    id="config-label"
+                    value={configLabel}
+                    onChange={(e) => setConfigLabel(e.target.value)}
+                    placeholder={t('serial.field.configLabelPlaceholder')}
+                  />
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={onClose}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={handleConnect} disabled={!isValid}>
+            {saveConfig ? (
+              <Save size={14} className="mr-2" />
+            ) : (
+              <Cpu size={14} className="mr-2" />
+            )}
+            {saveConfig ? t('serial.connectAndSave') : t('common.connect')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default SerialConnectModal;

components/SerialHostDetailsPanel.tsx

@@ -0,0 +1,415 @@
+/**
+ * Serial Host Details Panel
+ * A dedicated editor for serial port hosts (distinct from SSH HostDetailsPanel)
+ */
+import { ChevronDown, ChevronUp, Save, Tag, Usb } from 'lucide-react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useI18n } from '../application/i18n/I18nProvider';
+import { useTerminalBackend } from '../application/state/useTerminalBackend';
+import type { Host, SerialConfig, SerialFlowControl, SerialParity } from '../domain/models';
+
+import { Button } from './ui/button';
+import { Combobox, ComboboxOption, MultiCombobox } from './ui/combobox';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
+import {
+  AsidePanel,
+  AsidePanelContent,
+  AsidePanelFooter,
+} from './ui/aside-panel';
+
+interface SerialPort {
+  path: string;
+  manufacturer: string;
+  serialNumber: string;
+  vendorId: string;
+  productId: string;
+  pnpId: string;
+  type?: 'hardware' | 'pseudo' | 'custom';
+}
+
+interface SerialHostDetailsPanelProps {
+  initialData: Host;
+  allTags?: string[];
+  groups?: string[];
+  onSave: (host: Host) => void;
+  onCancel: () => void;
+}
+
+const BAUD_RATES = [300, 1200, 2400, 4800, 9600, 19200, 38400, 57600, 115200, 230400, 460800, 921600];
+const DATA_BITS: Array<5 | 6 | 7 | 8> = [5, 6, 7, 8];
+const STOP_BITS: Array<1 | 1.5 | 2> = [1, 1.5, 2];
+const PARITY_OPTIONS: SerialParity[] = ['none', 'even', 'odd', 'mark', 'space'];
+const FLOW_CONTROL_OPTIONS: SerialFlowControl[] = ['none', 'xon/xoff', 'rts/cts'];
+
+export const SerialHostDetailsPanel: React.FC<SerialHostDetailsPanelProps> = ({
+  initialData,
+  allTags = [],
+  groups = [],
+  onSave,
+  onCancel,
+}) => {
+  const { t } = useI18n();
+  const terminalBackend = useTerminalBackend();
+  const [ports, setPorts] = useState<SerialPort[]>([]);
+  const [isLoadingPorts, setIsLoadingPorts] = useState(false);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
+  // Form state
+  const [label, setLabel] = useState(initialData.label);
+  const [selectedPort, setSelectedPort] = useState(initialData.hostname || initialData.serialConfig?.path || '');
+  const [baudRate, setBaudRate] = useState(initialData.serialConfig?.baudRate || initialData.port || 115200);
+  const [dataBits, setDataBits] = useState<5 | 6 | 7 | 8>(initialData.serialConfig?.dataBits || 8);
+  const [stopBits, setStopBits] = useState<1 | 1.5 | 2>(initialData.serialConfig?.stopBits || 1);
+  const [parity, setParity] = useState<SerialParity>(initialData.serialConfig?.parity || 'none');
+  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 [tags, setTags] = useState<string[]>(initialData.tags || []);
+  const [group, setGroup] = useState(initialData.group || '');
+
+  const loadPorts = useCallback(async () => {
+    setIsLoadingPorts(true);
+    try {
+      const result = await terminalBackend.listSerialPorts();
+      setPorts(result);
+    } catch (err) {
+      console.error('[Serial] Failed to list ports:', err);
+    } finally {
+      setIsLoadingPorts(false);
+    }
+  }, [terminalBackend]);
+
+  useEffect(() => {
+    loadPorts();
+  }, [loadPorts]);
+
+  const handleSave = () => {
+    if (!selectedPort) return;
+
+    const config: SerialConfig = {
+      path: selectedPort,
+      baudRate,
+      dataBits,
+      stopBits,
+      parity,
+      flowControl,
+      localEcho,
+      lineMode,
+    };
+
+    const portName = selectedPort.split('/').pop() || selectedPort;
+    const updatedHost: Host = {
+      ...initialData,
+      label: label.trim() || `Serial: ${portName}`,
+      hostname: selectedPort,
+      port: baudRate,
+      tags,
+      group,
+      serialConfig: config,
+    };
+
+    onSave(updatedHost);
+  };
+
+  // Convert ports to Combobox options
+  const portOptions: ComboboxOption[] = useMemo(() => {
+    return ports.map((port) => ({
+      value: port.path,
+      label: port.path,
+      sublabel: port.manufacturer || undefined,
+    }));
+  }, [ports]);
+
+  // Tag options for MultiCombobox
+  const tagOptions: ComboboxOption[] = useMemo(() => {
+    const allUniqueTags = new Set([...allTags, ...tags]);
+    return Array.from(allUniqueTags).map((tag) => ({
+      value: tag,
+      label: tag,
+    }));
+  }, [allTags, tags]);
+
+  // Group options for Combobox
+  const groupOptions: ComboboxOption[] = useMemo(() => {
+    const allGroups = new Set(groups);
+    if (group && !allGroups.has(group)) {
+      allGroups.add(group);
+    }
+    return Array.from(allGroups).map((g) => ({
+      value: g,
+      label: g,
+    }));
+  }, [groups, group]);
+
+  // Validation
+  const trimmedPort = selectedPort.trim();
+  const isPortValid =
+    trimmedPort.startsWith('/dev/') ||
+    /^COM\d+$/i.test(trimmedPort) ||
+    /^\\\\\.\\COM\d+$/i.test(trimmedPort);
+  const isBaudRateValid = Number.isInteger(baudRate) && baudRate > 0;
+  const isValid = isPortValid && isBaudRateValid;
+
+  // Check if using 1.5 stop bits (limited Windows support)
+  const isStopBits15 = stopBits === 1.5;
+
+  return (
+    <AsidePanel
+      open={true}
+      onClose={onCancel}
+      title={t('serial.edit.title')}
+      subtitle={initialData.label}
+      className="z-40"
+    >
+      <AsidePanelContent>
+        {/* Label */}
+        <div className="space-y-2">
+          <Label htmlFor="serial-label">{t('serial.field.configLabel')}</Label>
+          <Input
+            id="serial-label"
+            value={label}
+            onChange={(e) => setLabel(e.target.value)}
+            placeholder={t('serial.field.configLabelPlaceholder')}
+          />
+        </div>
+
+        {/* Serial Port */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label htmlFor="serial-port">{t('serial.field.port')}</Label>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={loadPorts}
+              disabled={isLoadingPorts}
+              className="h-6 px-2 text-xs"
+            >
+              {t('common.refresh')}
+            </Button>
+          </div>
+          <Combobox
+            options={portOptions}
+            value={selectedPort}
+            onValueChange={setSelectedPort}
+            placeholder={t('serial.field.selectPort')}
+            emptyText={t('serial.noPorts')}
+            allowCreate
+            createText={t('common.use')}
+            icon={<Usb size={14} className="text-muted-foreground" />}
+          />
+          {!isPortValid && selectedPort && (
+            <p className="text-xs text-destructive">
+              {t('serial.field.customPortPlaceholder')}
+            </p>
+          )}
+        </div>
+
+        {/* Baud Rate */}
+        <div className="space-y-2">
+          <Label htmlFor="baud-rate">{t('serial.field.baudRate')}</Label>
+          <Combobox
+            options={BAUD_RATES.map((rate) => ({
+              value: String(rate),
+              label: String(rate),
+            }))}
+            value={String(baudRate)}
+            onValueChange={(val) => {
+              const parsed = parseInt(val, 10);
+              if (!isNaN(parsed) && parsed > 0) {
+                setBaudRate(parsed);
+              }
+            }}
+            placeholder={t('serial.field.baudRatePlaceholder')}
+            emptyText={t('serial.field.baudRateEmpty')}
+            allowCreate
+            createText={t('common.use')}
+          />
+          {baudRate > 0 && !BAUD_RATES.includes(baudRate) && (
+            <p className="text-xs text-muted-foreground">
+              {t('serial.field.customBaudRate')}
+            </p>
+          )}
+        </div>
+
+        {/* Tags */}
+        <div className="space-y-2">
+          <Label className="flex items-center gap-2">
+            <Tag size={14} />
+            {t('hostDetails.tags')}
+          </Label>
+          <MultiCombobox
+            options={tagOptions}
+            values={tags}
+            onValuesChange={setTags}
+            placeholder={t('hostDetails.addTag')}
+            allowCreate
+            createText={t('hostDetails.createTag')}
+          />
+        </div>
+
+        {/* Group */}
+        <div className="space-y-2">
+          <Label>{t('hostDetails.group')}</Label>
+          <Combobox
+            options={groupOptions}
+            value={group}
+            onValueChange={setGroup}
+            placeholder={t('hostDetails.selectGroup')}
+            allowCreate
+            createText={t('hostDetails.createGroup')}
+          />
+        </div>
+
+        {/* Advanced Options */}
+        <Collapsible open={showAdvanced} onOpenChange={setShowAdvanced}>
+          <CollapsibleTrigger asChild>
+            <Button
+              variant="ghost"
+              className="w-full justify-between h-9 px-0 hover:bg-transparent"
+            >
+              <span className="text-sm font-medium text-muted-foreground">
+                {t('common.advanced')}
+              </span>
+              {showAdvanced ? (
+                <ChevronUp size={14} className="text-muted-foreground" />
+              ) : (
+                <ChevronDown size={14} className="text-muted-foreground" />
+              )}
+            </Button>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="space-y-4 pt-2">
+            {/* Data Bits */}
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="data-bits">{t('serial.field.dataBits')}</Label>
+                <select
+                  id="data-bits"
+                  value={dataBits}
+                  onChange={(e) => setDataBits(parseInt(e.target.value, 10) as 5 | 6 | 7 | 8)}
+                  className="w-full h-10 px-3 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                >
+                  {DATA_BITS.map((bits) => (
+                    <option key={bits} value={bits}>
+                      {bits}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Stop Bits */}
+              <div className="space-y-2">
+                <Label htmlFor="stop-bits">{t('serial.field.stopBits')}</Label>
+                <select
+                  id="stop-bits"
+                  value={stopBits}
+                  onChange={(e) => setStopBits(parseFloat(e.target.value) as 1 | 1.5 | 2)}
+                  className="w-full h-10 px-3 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                >
+                  {STOP_BITS.map((bits) => (
+                    <option key={bits} value={bits}>
+                      {bits}
+                    </option>
+                  ))}
+                </select>
+                {isStopBits15 && (
+                  <p className="text-xs text-yellow-500">
+                    {t('serial.field.stopBits15Warning')}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            {/* Parity */}
+            <div className="space-y-2">
+              <Label htmlFor="parity">{t('serial.field.parity')}</Label>
+              <select
+                id="parity"
+                value={parity}
+                onChange={(e) => setParity(e.target.value as SerialParity)}
+                className="w-full h-10 px-3 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+              >
+                {PARITY_OPTIONS.map((option) => (
+                  <option key={option} value={option}>
+                    {t(`serial.parity.${option}`)}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Flow Control */}
+            <div className="space-y-2">
+              <Label htmlFor="flow-control">{t('serial.field.flowControl')}</Label>
+              <select
+                id="flow-control"
+                value={flowControl}
+                onChange={(e) => setFlowControl(e.target.value as SerialFlowControl)}
+                className="w-full h-10 px-3 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+              >
+                {FLOW_CONTROL_OPTIONS.map((option) => (
+                  <option key={option} value={option}>
+                    {t(`serial.flowControl.${option}`)}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Terminal Options */}
+            <div className="space-y-3 pt-2 border-t border-border/60">
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label htmlFor="local-echo" className="text-sm font-medium cursor-pointer">
+                    {t('serial.field.localEcho')}
+                  </Label>
+                  <p className="text-xs text-muted-foreground">
+                    {t('serial.field.localEchoDesc')}
+                  </p>
+                </div>
+                <input
+                  type="checkbox"
+                  id="local-echo"
+                  checked={localEcho}
+                  onChange={(e) => setLocalEcho(e.target.checked)}
+                  className="h-4 w-4 rounded border-input"
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label htmlFor="line-mode" className="text-sm font-medium cursor-pointer">
+                    {t('serial.field.lineMode')}
+                  </Label>
+                  <p className="text-xs text-muted-foreground">
+                    {t('serial.field.lineModeDesc')}
+                  </p>
+                </div>
+                <input
+                  type="checkbox"
+                  id="line-mode"
+                  checked={lineMode}
+                  onChange={(e) => setLineMode(e.target.checked)}
+                  className="h-4 w-4 rounded border-input"
+                />
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </AsidePanelContent>
+
+      <AsidePanelFooter>
+        <div className="flex gap-2">
+          <Button variant="ghost" onClick={onCancel} className="flex-1">
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={handleSave} disabled={!isValid} className="flex-1">
+            <Save size={14} className="mr-2" />
+            {t('common.save')}
+          </Button>
+        </div>
+      </AsidePanelFooter>
+    </AsidePanel>
+  );
+};
+
+export default SerialHostDetailsPanel;

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,18 @@ const ActionRow: React.FC<{
   </button>
 );
 
-export default function SettingsApplicationTab() {
+interface SettingsApplicationTabProps {
+  updateState: UpdateState;
+  checkNow: UseUpdateCheckResult['checkNow'];
+  openReleasePage: UseUpdateCheckResult['openReleasePage'];
+  installUpdate: UseUpdateCheckResult['installUpdate'];
+}
+
+export default function SettingsApplicationTab({ updateState, checkNow, openReleasePage, installUpdate }: 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;
@@ -93,19 +98,6 @@ export default function SettingsApplicationTab() {
   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 +116,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 +147,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() : void openReleasePage()}
                     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>

components/SettingsPage.tsx

@@ -2,42 +2,95 @@
  * Settings Page - Standalone settings window content
  * This component is rendered in a separate Electron window
  */
-import { AppWindow, Cloud, 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 { 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";
+import SettingsFileAssociationsTab from "./settings/tabs/SettingsFileAssociationsTab";
 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>;
+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> & {
+    availableFonts: TerminalFont[];
+};
 
 const SettingsSyncTab = React.lazy(() => import("./settings/tabs/SettingsSyncTab"));
 
-const SettingsSyncTabWithVault: React.FC = () => {
+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}
         />
     );
 };
@@ -45,6 +98,8 @@ const SettingsSyncTabWithVault: React.FC = () => {
 const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }) => {
     const { t } = useI18n();
     const { notifyRendererReady, closeSettingsWindow } = useWindowControls();
+    const { updateState, checkNow, installUpdate, openReleasePage } = useUpdateCheck({ autoUpdateEnabled: settings.autoUpdateEnabled });
+    const aiState = useAIState();
     const [activeTab, setActiveTab] = useState("application");
     const [mountedTabs, setMountedTabs] = useState(() => new Set(["application"]));
 
@@ -66,7 +121,7 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
     }, [closeSettingsWindow]);
 
     return (
-        <div className="h-screen flex flex-col bg-background text-foreground">
+        <div className="h-screen flex flex-col bg-background text-foreground font-sans">
             <div className="shrink-0 border-b border-border app-drag">
                 <div className="flex items-center justify-between px-4 pt-3">
                     {isMac && <div className="h-6" />}
@@ -117,17 +172,42 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                         >
                             <Keyboard size={14} /> {t("settings.tab.shortcuts")}
                         </TabsTrigger>
+                        <TabsTrigger
+                            value="file-associations"
+                            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"
+                        >
+                            <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"
                         >
                             <Cloud size={14} /> {t("settings.tab.syncCloud")}
                         </TabsTrigger>
+                        <TabsTrigger
+                            value="system"
+                            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"
+                        >
+                            <HardDrive size={14} /> {t("settings.tab.system")}
+                        </TabsTrigger>
                     </TabsList>
                 </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}
+                        />
+                    )}
 
                     {mountedTabs.has("appearance") && (
                         <SettingsAppearanceTab
@@ -141,6 +221,8 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                             setAccentMode={settings.setAccentMode}
                             customAccent={settings.customAccent}
                             setCustomAccent={settings.setCustomAccent}
+                            uiFontFamilyId={settings.uiFontFamilyId}
+                            setUiFontFamilyId={settings.setUiFontFamilyId}
                             uiLanguage={settings.uiLanguage}
                             setUiLanguage={settings.setUiLanguage}
                             customCSS={settings.customCSS}
@@ -158,6 +240,7 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                             setTerminalFontSize={settings.setTerminalFontSize}
                             terminalSettings={settings.terminalSettings}
                             updateTerminalSetting={settings.updateTerminalSetting}
+                            availableFonts={settings.availableFonts}
                         />
                     )}
 
@@ -173,11 +256,70 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                         />
                     )}
 
+                    {mountedTabs.has("file-associations") && (
+                        <SettingsFileAssociationsTab />
+                    )}
+
+                    {mountedTabs.has("ai") && (
+                        <AITabErrorBoundary>
+                        <React.Suspense fallback={null}>
+                        <SettingsAITab
+                            providers={aiState.providers}
+                            addProvider={aiState.addProvider}
+                            updateProvider={aiState.updateProvider}
+                            removeProvider={aiState.removeProvider}
+                            activeProviderId={aiState.activeProviderId}
+                            setActiveProviderId={aiState.setActiveProviderId}
+                            activeModelId={aiState.activeModelId}
+                            setActiveModelId={aiState.setActiveModelId}
+                            globalPermissionMode={aiState.globalPermissionMode}
+                            setGlobalPermissionMode={aiState.setGlobalPermissionMode}
+                            externalAgents={aiState.externalAgents}
+                            setExternalAgents={aiState.setExternalAgents}
+                            defaultAgentId={aiState.defaultAgentId}
+                            setDefaultAgentId={aiState.setDefaultAgentId}
+                            commandBlocklist={aiState.commandBlocklist}
+                            setCommandBlocklist={aiState.setCommandBlocklist}
+                            commandTimeout={aiState.commandTimeout}
+                            setCommandTimeout={aiState.setCommandTimeout}
+                            maxIterations={aiState.maxIterations}
+                            setMaxIterations={aiState.setMaxIterations}
+                            webSearchConfig={aiState.webSearchConfig}
+                            setWebSearchConfig={aiState.setWebSearchConfig}
+                        />
+                        </React.Suspense>
+                        </AITabErrorBoundary>
+                    )}
+
                     {mountedTabs.has("sync") && (
                         <React.Suspense fallback={null}>
-                            <SettingsSyncTabWithVault />
+                            <SettingsSyncTabWithVault onSettingsApplied={settings.rehydrateAllFromStorage} />
                         </React.Suspense>
                     )}
+
+                    {mountedTabs.has("system") && (
+                        <SettingsSystemTab
+                            sessionLogsEnabled={settings.sessionLogsEnabled}
+                            setSessionLogsEnabled={settings.setSessionLogsEnabled}
+                            sessionLogsDir={settings.sessionLogsDir}
+                            setSessionLogsDir={settings.setSessionLogsDir}
+                            sessionLogsFormat={settings.sessionLogsFormat}
+                            setSessionLogsFormat={settings.setSessionLogsFormat}
+                            toggleWindowHotkey={settings.toggleWindowHotkey}
+                            setToggleWindowHotkey={settings.setToggleWindowHotkey}
+                            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}
+                        />
+                    )}
                 </div>
             </Tabs>
         </div>

components/SftpSidePanel.tsx

@@ -0,0 +1,618 @@
+/**
+ * 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 } from "react";
+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";
+
+interface SftpSidePanelProps {
+  hosts: Host[];
+  keys: SSHKey[];
+  identities: Identity[];
+  updateHosts: (hosts: Host[]) => void;
+  /** 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;
+  editorWordWrap: boolean;
+  setEditorWordWrap: (value: boolean) => void;
+  onGetTerminalCwd?: () => Promise<string | null>;
+}
+
+const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
+  hosts,
+  keys,
+  identities,
+  updateHosts,
+  activeHost,
+  initialLocation,
+  showWorkspaceHostHeader = false,
+  isVisible = true,
+  renderOverlays = true,
+  pendingUpload = null,
+  onPendingUploadHandled,
+  sftpDoubleClickBehavior,
+  sftpAutoSync,
+  sftpShowHiddenFiles,
+  sftpUseCompressedUpload,
+  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, startStreamTransfer } = useSftpBackend();
+
+  const sftpRef = useRef(sftp);
+  sftpRef.current = sftp;
+
+  const behaviorRef = useRef(sftpDoubleClickBehavior);
+  behaviorRef.current = sftpDoubleClickBehavior;
+
+  const autoSyncRef = useRef(sftpAutoSync);
+  autoSyncRef.current = sftpAutoSync;
+
+  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);
+  }, []);
+
+  // 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.
+
+  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,
+    showSaveDialog,
+    startStreamTransfer,
+    getSftpIdForConnection: sftp.getSftpIdForConnection,
+  });
+
+  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());
+  const pendingConnectionKeyRef = useRef<string | null>(null);
+  const prevIsVisibleRef = useRef(isVisible);
+
+  // Reset location guard when the panel is reopened so the terminal cwd
+  // is re-applied even if it matches the previous session's path.
+  useEffect(() => {
+    if (isVisible && !prevIsVisibleRef.current) {
+      lastAppliedInitialLocationKeyRef.current = null;
+    }
+    prevIsVisibleRef.current = isVisible;
+  }, [isVisible]);
+
+  // 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.
+  const hasActiveTransfers = useMemo(
+    () => sftp.transfers.some((t) => t.status === "pending" || t.status === "transferring"),
+    [sftp.transfers],
+  );
+  // Block host-following while any connection-sensitive UI or operation
+  // is active: text editor, permissions dialog, file-opener dialog, or
+  // auto-synced external file watches.
+  const hasActiveWork = hasActiveTransfers || 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 to a different
+    // host, so the previous tab is preserved for instant switching on focus change.
+    const currentConn = s.leftPane.connection;
+    const needsNewTab = !!(currentConn && currentConn.status === "connected" && currentConn.hostId !== activeHost.id);
+
+    connectedKeyRef.current = connectionKey;
+    connectedHostObjRef.current = activeHost;
+    // Store the pending key so the effect below can map it once the tab is created
+    pendingConnectionKeyRef.current = connectionKey;
+    s.connect("left", activeHost, needsNewTab ? { forceNewTab: true } : undefined);
+  }, [activeHost, hasActiveWork]); // Re-evaluate when work finishes so deferred switch can proceed
+
+  // Track the active tab's connectionKey after connect() creates or reuses it.
+  // Watches both activeTabId (new tab) and connection status (reused tab reconnecting).
+  useEffect(() => {
+    const activeTabId = sftp.leftTabs.activeTabId;
+    if (activeTabId && pendingConnectionKeyRef.current) {
+      tabConnectionKeyMapRef.current.set(activeTabId, pendingConnectionKeyRef.current);
+      pendingConnectionKeyRef.current = null;
+    }
+  }, [sftp.leftTabs.activeTabId, sftp.leftPane.connection?.status]);
+
+  // 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(
+    () => [...sftp.transfers].reverse().slice(0, MAX_VISIBLE_TRANSFERS),
+    [sftp.transfers],
+  );
+
+  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
+        className="h-full flex flex-col bg-background overflow-hidden"
+        style={isVisible ? undefined : { display: "none" }}
+        aria-hidden={!isVisible}
+      >
+        {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")}@${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}
+                  showHeader
+                  showEmptyHeader
+                  onToggleShowHiddenFiles={() => handleToggleHiddenFiles(pane.id)}
+                  onGoToTerminalCwd={onGetTerminalCwd ? handleGoToTerminalCwd : undefined}
+                />
+              </div>
+            );
+          })}
+        </div>
+        <SftpTransferQueue
+          sftp={sftp}
+          visibleTransfers={visibleTransfers}
+          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.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/SnippetsManager.tsx

@@ -1,10 +1,11 @@
-import { Check, ChevronDown, Clock, Copy, Edit2, FileCode, FolderPlus, LayoutGrid, List as ListIcon, Loader2, Package, Play, Plus, Search, Trash2 } from 'lucide-react';
+import { Check, ChevronDown, Clock, Copy, Edit2, FileCode, FolderPlus, Keyboard, LayoutGrid, List as ListIcon, Loader2, Package, Play, Plus, RotateCcw, Search, Trash2 } from 'lucide-react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useI18n } from '../application/i18n/I18nProvider';
 import { useStoredViewMode } from '../application/state/useStoredViewMode';
 import { STORAGE_KEY_VAULT_SNIPPETS_VIEW_MODE } from '../infrastructure/config/storageKeys';
-import { cn } from '../lib/utils';
+import { cn, isMacPlatform } from '../lib/utils';
 import { Host, ShellHistoryEntry, Snippet, SSHKey } from '../types';
+import { HotkeyScheme, KeyBinding, keyEventToString, ManagedSource, matchesKeyBinding, parseKeyCombo } from '../domain/models';
 import { DistroAvatar } from './DistroAvatar';
 import SelectHostPanel from './SelectHostPanel';
 import { AsidePanel, AsidePanelContent } from './ui/aside-panel';
@@ -24,12 +25,16 @@ interface SnippetsManagerProps {
   hosts: Host[];
   customGroups?: string[];
   shellHistory: ShellHistoryEntry[];
+  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;
   // Props for inline host creation
   availableKeys?: SSHKey[];
+  managedSources?: ManagedSource[];
   onSaveHost?: (host: Host) => void;
   onCreateGroup?: (groupPath: string) => void;
 }
@@ -44,11 +49,15 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
   hosts,
   customGroups = [],
   shellHistory,
+  hotkeyScheme,
+  keyBindings,
   onSave,
+  onBulkSave,
   onDelete,
   onPackagesChange,
   onRunSnippet,
   availableKeys = [],
+  managedSources = [],
   onSaveHost,
   onCreateGroup,
 }) => {
@@ -67,6 +76,12 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
   const [newPackageName, setNewPackageName] = useState('');
   const [isPackageDialogOpen, setIsPackageDialogOpen] = useState(false);
 
+  // Rename package state
+  const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
+  const [renamingPackagePath, setRenamingPackagePath] = useState<string | null>(null);
+  const [renamePackageName, setRenamePackageName] = useState('');
+  const [renameError, setRenameError] = useState('');
+
   // Search, sort, and view mode state
   const [search, setSearch] = useState('');
   const [viewMode, setViewMode] = useStoredViewMode(
@@ -80,6 +95,187 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
   const historyScrollRef = useRef<HTMLDivElement>(null);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
 
+  // Shortkey recording state
+  const [isRecordingShortkey, setIsRecordingShortkey] = useState(false);
+  const [shortkeyError, setShortkeyError] = useState<string | null>(null);
+
+  const existingShortkeys = useMemo(() => (
+    snippets.filter(s => Boolean(s.shortkey) && s.id !== editingSnippet.id)
+  ), [snippets, editingSnippet.id]);
+
+  const isMac = useMemo(() => (
+    hotkeyScheme === 'mac' || (hotkeyScheme === 'disabled' && isMacPlatform())
+  ), [hotkeyScheme]);
+
+  const activeSystemBindings = useMemo(() => {
+    return keyBindings.flatMap((binding) => {
+      const entries: { binding: string; isMac: boolean }[] = [];
+      const macBinding = binding.mac;
+      const pcBinding = binding.pc;
+
+      if (hotkeyScheme === 'mac') {
+        if (macBinding && macBinding !== 'Disabled') {
+          entries.push({ binding: macBinding, isMac: true });
+        }
+        return entries;
+      }
+
+      if (hotkeyScheme === 'pc') {
+        if (pcBinding && pcBinding !== 'Disabled') {
+          entries.push({ binding: pcBinding, isMac: false });
+        }
+        return entries;
+      }
+
+      if (macBinding && macBinding !== 'Disabled') {
+        entries.push({ binding: macBinding, isMac: true });
+      }
+      if (pcBinding && pcBinding !== 'Disabled') {
+        entries.push({ binding: pcBinding, isMac: false });
+      }
+      return entries;
+    });
+  }, [hotkeyScheme, keyBindings]);
+
+  const buildKeyEventFromString = useCallback((keyString: string) => {
+    const parsed = parseKeyCombo(keyString);
+    if (!parsed) return null;
+
+    const modifiers = new Set(parsed.modifiers);
+    const key = parsed.key;
+    const normalizedKey = (() => {
+      switch (key) {
+        case 'Space':
+          return ' ';
+        case '↑':
+          return 'ArrowUp';
+        case '↓':
+          return 'ArrowDown';
+        case '←':
+          return 'ArrowLeft';
+        case '→':
+          return 'ArrowRight';
+        case 'Esc':
+          return 'Escape';
+        case '⌫':
+          return 'Backspace';
+        case 'Del':
+          return 'Delete';
+        case '↵':
+          return 'Enter';
+        case '⇥':
+          return 'Tab';
+        default:
+          return key.length === 1 ? key.toLowerCase() : key;
+      }
+    })();
+
+    return new KeyboardEvent('keydown', {
+      key: normalizedKey,
+      metaKey: modifiers.has('⌘') || modifiers.has('Win'),
+      ctrlKey: modifiers.has('⌃') || modifiers.has('Ctrl'),
+      altKey: modifiers.has('⌥') || modifiers.has('Alt'),
+      shiftKey: modifiers.has('Shift'),
+    });
+  }, []);
+
+  // Validate shortkey for conflicts (case-insensitive comparison)
+  const normalizeKeyString = useCallback((value: string) => (
+    value.toLowerCase().replace(/\s+/g, '')
+  ), []);
+
+  const validateShortkey = useCallback((key: string): string | null => {
+    if (!key) return null;
+    
+    const syntheticEvent = buildKeyEventFromString(key);
+    if (syntheticEvent) {
+      const conflictsSystem = activeSystemBindings.some(({ binding, isMac: bindingIsMac }) => (
+        matchesKeyBinding(syntheticEvent, binding, bindingIsMac)
+      ));
+      if (conflictsSystem) {
+        return t('snippets.shortkey.error.systemConflict');
+      }
+    }
+    
+    // Check other snippet shortcuts
+    if (syntheticEvent) {
+      for (const snippet of existingShortkeys) {
+        if (snippet.shortkey && matchesKeyBinding(syntheticEvent, snippet.shortkey, isMac)) {
+          return t('snippets.shortkey.error.snippetConflict', { name: snippet.label });
+        }
+      }
+    } else {
+      const normalizedKey = normalizeKeyString(key);
+      const conflictingSnippet = existingShortkeys.find(snippet => (
+        snippet.shortkey && normalizeKeyString(snippet.shortkey) === normalizedKey
+      ));
+      if (conflictingSnippet) {
+        return t('snippets.shortkey.error.snippetConflict', { name: conflictingSnippet.label });
+      }
+    }
+    
+    return null;
+  }, [
+    activeSystemBindings,
+    buildKeyEventFromString,
+    existingShortkeys,
+    isMac,
+    normalizeKeyString,
+    t,
+  ]);
+
+  // Handle shortkey recording
+  useEffect(() => {
+    if (!isRecordingShortkey) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      // Escape cancels recording
+      if (e.key === 'Escape') {
+        setIsRecordingShortkey(false);
+        setShortkeyError(null);
+        return;
+      }
+
+      // Skip pure modifier keys
+      if (['Meta', 'Control', 'Alt', 'Shift'].includes(e.key)) return;
+
+      const keyString = keyEventToString(e, isMac);
+      
+      // Validate the new shortkey
+      const error = validateShortkey(keyString);
+      if (error) {
+        setShortkeyError(error);
+        // Don't stop recording, let user try again
+        return;
+      }
+      
+      setShortkeyError(null);
+      setEditingSnippet(prev => ({ ...prev, shortkey: keyString }));
+      setIsRecordingShortkey(false);
+    };
+
+    const handleClick = () => {
+      setIsRecordingShortkey(false);
+      setShortkeyError(null);
+    };
+
+    // Delay adding click handler by 100ms to prevent the button click that
+    // initiated recording from immediately triggering the click handler
+    const timer = setTimeout(() => {
+      window.addEventListener('click', handleClick, true);
+    }, 100);
+
+    window.addEventListener('keydown', handleKeyDown, true);
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener('keydown', handleKeyDown, true);
+      window.removeEventListener('click', handleClick, true);
+    };
+  }, [isRecordingShortkey, isMac, validateShortkey]);
+
   const handleEdit = (snippet?: Snippet) => {
     if (snippet) {
       setEditingSnippet(snippet);
@@ -105,6 +301,8 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
         tags: editingSnippet.tags || [],
         package: editingSnippet.package || '',
         targets: targetSelection,
+        shortkey: editingSnippet.shortkey,
+        noAutoRun: editingSnippet.noAutoRun,
       });
       setRightPanelMode('none');
     }
@@ -144,23 +342,60 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
 
   const displayedPackages = useMemo(() => {
     if (!selectedPackage) {
-      const roots = packages
+      // Separate absolute paths (starting with /) from relative paths
+      const absolutePaths = packages.filter(p => p.startsWith('/'));
+      const relativePaths = packages.filter(p => !p.startsWith('/'));
+      
+      const results: { name: string; path: string; count: number }[] = [];
+      
+      // Process relative paths (traditional behavior)
+      const relativeRoots = relativePaths
         .map((p) => p.split('/')[0])
-        .filter(Boolean);
-      return Array.from(new Set(roots)).map((name) => {
-        const path = name;
-        const count = snippets.filter((s) => (s.package || '') === path).length;
-        return { name, path, count };
+        .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 });
       });
+      
+      // Process absolute paths - show them as separate roots with "/" prefix
+      const absoluteRoots = absolutePaths
+        .map((p) => {
+          const cleanPath = p.substring(1); // Remove leading slash
+          const firstSegment = cleanPath.split('/')[0];
+          return firstSegment;
+        })
+        .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}`; // Show with leading slash to distinguish
+        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(Boolean);
+      .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) => (s.package || '') === path).length;
+      // Count snippets in this package AND all nested packages
+      const count = snippets.filter((s) => {
+        const pkg = s.package || '';
+        return pkg === path || pkg.startsWith(path + '/');
+      }).length;
       return { name, path, count };
     });
   }, [packages, selectedPackage, snippets]);
@@ -191,28 +426,73 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
 
   const breadcrumb = useMemo(() => {
     if (!selectedPackage) return [];
+    const isAbsolute = selectedPackage.startsWith('/');
     const parts = selectedPackage.split('/').filter(Boolean);
-    return parts.map((name, idx) => ({ name, path: parts.slice(0, idx + 1).join('/') }));
+    return parts.map((name, idx) => {
+      const pathSegments = parts.slice(0, idx + 1);
+      const path = isAbsolute ? `/${pathSegments.join('/')}` : pathSegments.join('/');
+      return { name, path };
+    });
   }, [selectedPackage]);
 
   const createPackage = () => {
     const name = newPackageName.trim();
     if (!name) return;
-    const full = selectedPackage ? `${selectedPackage}/${name}` : name;
-    if (!packages.includes(full)) onPackagesChange([...packages, full]);
+    
+    // Allow leading slash and validate the rest - allow hyphens anywhere in package names
+    if (!/^\/?([\w-]+(\/[\w-]+)*)\/?$/.test(name)) {
+      // Could add toast notification here for invalid characters
+      return;
+    }
+    
+    // Normalize path construction to avoid double slashes
+    let full: string;
+    if (selectedPackage) {
+      // Strip leading slash from name when we're inside a package to avoid double slashes
+      const normalizedName = name.startsWith('/') ? name.substring(1) : name;
+      full = `${selectedPackage}/${normalizedName}`;
+    } else {
+      // At root level, preserve the leading slash if user intended it
+      full = name;
+    }
+
+    // Strip trailing slash to ensure consistent path handling
+    if (full.endsWith('/')) {
+      full = full.slice(0, -1);
+    }
+    
+    // Check for duplicate package names (case-insensitive)
+    const existingPackage = packages.find(p => p.toLowerCase() === full.toLowerCase());
+    if (existingPackage) {
+      // Could add toast notification here for duplicate package
+      return;
+    }
+    
+    onPackagesChange([...packages, full]);
     setNewPackageName('');
     setIsPackageDialogOpen(false);
   };
 
   const deletePackage = (path: string) => {
+    // Remove the package and all its children
     const keep = packages.filter((p) => !(p === path || p.startsWith(path + '/')));
+    
+    // Move all snippets from deleted packages to root
     const updatedSnippets = snippets.map((s) => {
       if (!s.package) return s;
-      if (s.package === path || s.package.startsWith(path + '/')) return { ...s, package: '' };
+      if (s.package === path || s.package.startsWith(path + '/')) {
+        return { ...s, package: '' };
+      }
       return s;
     });
+    
+    // Update packages first, then save snippets
     onPackagesChange(keep);
-    updatedSnippets.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 + '/'))) {
       setSelectedPackage(null);
     }
@@ -220,24 +500,125 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
 
   const movePackage = (source: string, target: string | null) => {
     const name = source.split('/').pop() || '';
-    const newPath = target ? `${target}/${name}` : name;
+    const isAbsolute = source.startsWith('/');
+    const newPath = target ? `${target}/${name}` : (isAbsolute ? `/${name}` : name);
     if (newPath === source || newPath.startsWith(source + '/')) return;
+
+    // Check if target path already exists
+    if (packages.includes(newPath)) return;
+
     const updatedPackages = packages.map((p) => {
       if (p === source) return newPath;
-      if (p.startsWith(source + '/')) return p.replace(source, newPath);
+      // Use more precise replacement to avoid substring issues
+      if (p.startsWith(source + '/')) {
+        return newPath + p.substring(source.length);
+      }
       return p;
     });
+
     const updatedSnippets = snippets.map((s) => {
       if (!s.package) return s;
       if (s.package === source) return { ...s, package: newPath };
-      if (s.package.startsWith(source + '/')) return { ...s, package: s.package.replace(source, newPath) };
+      // Use more precise replacement to avoid substring issues
+      if (s.package.startsWith(source + '/')) {
+        return { ...s, package: newPath + s.package.substring(source.length) };
+      }
       return s;
     });
+
     onPackagesChange(Array.from(new Set(updatedPackages)));
-    updatedSnippets.forEach(onSave);
+    onBulkSave(updatedSnippets);
     if (selectedPackage === source) setSelectedPackage(newPath);
   };
 
+  const openRenameDialog = (path: string) => {
+    const name = path.split('/').pop() || '';
+    setRenamingPackagePath(path);
+    setRenamePackageName(name);
+    setRenameError('');
+    setIsRenameDialogOpen(true);
+  };
+
+  const renamePackage = () => {
+    if (!renamingPackagePath) return;
+
+    const newName = renamePackageName.trim();
+
+    // Validate: empty name
+    if (!newName) {
+      setRenameError(t('snippets.renameDialog.error.empty'));
+      return;
+    }
+
+    // Validate: same rules as createPackage - only allow letters, numbers, hyphens, underscores
+    // Since we're renaming a single segment (no slashes allowed), use the segment-level pattern
+    if (!/^[\w-]+$/.test(newName)) {
+      setRenameError(t('snippets.renameDialog.error.invalidChars'));
+      return;
+    }
+
+    // Build new path
+    const parts = renamingPackagePath.split('/');
+    parts[parts.length - 1] = newName;
+    const newPath = parts.join('/');
+
+    // Validate: same name
+    if (newPath === renamingPackagePath) {
+      setIsRenameDialogOpen(false);
+      return;
+    }
+
+    // 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;
+    }
+
+    // Update all packages with this path or nested under it
+    const updatedPackages = packages.map((p) => {
+      if (p === renamingPackagePath) return newPath;
+      if (p.startsWith(renamingPackagePath + '/')) {
+        return newPath + p.substring(renamingPackagePath.length);
+      }
+      return p;
+    });
+
+    // Update all snippets with this package or nested under it
+    const updatedSnippets = snippets.map((s) => {
+      if (!s.package) return s;
+      if (s.package === renamingPackagePath) return { ...s, package: newPath };
+      if (s.package.startsWith(renamingPackagePath + '/')) {
+        return { ...s, package: newPath + s.package.substring(renamingPackagePath.length) };
+      }
+      return s;
+    });
+
+    onPackagesChange(Array.from(new Set(updatedPackages)));
+    onBulkSave(updatedSnippets);
+
+    // Update selected package if it was renamed
+    if (selectedPackage === renamingPackagePath) {
+      setSelectedPackage(newPath);
+    } else if (selectedPackage?.startsWith(renamingPackagePath + '/')) {
+      setSelectedPackage(newPath + selectedPackage.substring(renamingPackagePath.length));
+    }
+
+    // Update editingSnippet.package if it's in the renamed package (fixes stale state when editing)
+    if (editingSnippet.package) {
+      if (editingSnippet.package === renamingPackagePath) {
+        setEditingSnippet(prev => ({ ...prev, package: newPath }));
+      } else if (editingSnippet.package.startsWith(renamingPackagePath + '/')) {
+        setEditingSnippet(prev => ({
+          ...prev,
+          package: newPath + prev.package!.substring(renamingPackagePath.length)
+        }));
+      }
+    }
+
+    setIsRenameDialogOpen(false);
+  };
+
   const moveSnippet = (id: string, pkg: string | null) => {
     const sn = snippets.find((s) => s.id === id);
     if (!sn) return;
@@ -246,11 +627,36 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
 
   // Package options for Combobox
   const packageOptions: ComboboxOption[] = useMemo(() => {
-    return packages.map(p => ({
-      value: p,
-      label: p.includes('/') ? p.split('/').pop()! : p,
-      sublabel: p.includes('/') ? p : undefined,
-    }));
+    // Generate all possible parent paths for each package
+    const allPaths = new Set<string>();
+    
+    packages.forEach(pkg => {
+      // Add the full package path
+      allPaths.add(pkg);
+      
+      // Add all parent paths
+      const parts = pkg.split('/').filter(Boolean);
+      const isAbsolute = pkg.startsWith('/');
+      
+      for (let i = 1; i < parts.length; i++) {
+        const parentPath = (isAbsolute ? '/' : '') + parts.slice(0, i).join('/');
+        allPaths.add(parentPath);
+      }
+    });
+    
+    return Array.from(allPaths)
+      .sort((a, b) => {
+        // Sort by depth first (shorter paths first), then alphabetically
+        const depthA = (a.match(/\//g) || []).length;
+        const depthB = (b.match(/\//g) || []).length;
+        if (depthA !== depthB) return depthA - depthB;
+        return a.localeCompare(b);
+      })
+      .map(p => ({
+        value: p,
+        label: p.includes('/') ? p.split('/').pop()! : p,
+        sublabel: p.includes('/') ? p : undefined,
+      }));
   }, [packages]);
 
   // Shell history lazy loading
@@ -310,6 +716,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
           onBack={handleTargetPickerBack}
           onContinue={handleTargetPickerBack}
           availableKeys={availableKeys}
+          managedSources={managedSources}
           onSaveHost={onSaveHost}
           onCreateGroup={onCreateGroup}
           title={t('snippets.targets.add')}
@@ -354,7 +761,13 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
               <Combobox
                 options={packageOptions}
                 value={editingSnippet.package || selectedPackage || ''}
-                onValueChange={(val) => setEditingSnippet({ ...editingSnippet, package: val })}
+                onValueChange={(val) => {
+                  setEditingSnippet({ ...editingSnippet, package: val });
+                  // If selecting an implicit parent path, persist it to packages
+                  if (val && !packages.includes(val)) {
+                    onPackagesChange([...packages, val]);
+                  }
+                }}
                 placeholder={t('snippets.field.packagePlaceholder')}
                 allowCreate={true}
                 onCreateNew={(val) => {
@@ -379,6 +792,61 @@ 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">
+                <p className="text-xs font-semibold text-muted-foreground">{t('snippets.field.shortkey')}</p>
+                {editingSnippet.shortkey && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 px-2 text-xs"
+                    onClick={() => {
+                      setEditingSnippet(prev => ({ ...prev, shortkey: undefined }));
+                      setShortkeyError(null);
+                    }}
+                    title={t('snippets.shortkey.clear')}
+                  >
+                    <RotateCcw size={12} />
+                  </Button>
+                )}
+              </div>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setIsRecordingShortkey(true);
+                  setShortkeyError(null);
+                }}
+                className={cn(
+                  "w-full h-10 px-3 text-sm font-mono rounded-lg border transition-colors flex items-center justify-center gap-2",
+                  isRecordingShortkey
+                    ? "border-primary bg-primary/10 animate-pulse"
+                    : "border-border hover:border-primary/50 bg-background"
+                )}
+              >
+                <Keyboard size={14} className="text-muted-foreground" />
+                {isRecordingShortkey
+                  ? t('snippets.shortkey.recording')
+                  : editingSnippet.shortkey || t('snippets.shortkey.placeholder')}
+              </button>
+              {shortkeyError && (
+                <p className="text-xs text-destructive">{shortkeyError}</p>
+              )}
+              <p className="text-[11px] text-muted-foreground">{t('snippets.shortkey.hint')}</p>
+            </Card>
+
             {/* Targets */}
             <Card className="p-3 space-y-3 bg-card border-border/80">
               <div className="flex items-center justify-between">
@@ -565,12 +1033,12 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
 
         {!snippets.length && displayedPackages.length === 0 && (
           <div className="flex-1 flex items-center justify-center px-4">
-            <div className="max-w-md w-full text-center space-y-3 py-12 rounded-2xl bg-secondary/60 border border-border/60 shadow-lg">
-              <div className="mx-auto h-12 w-12 rounded-xl bg-muted text-muted-foreground flex items-center justify-center">
-                <FileCode size={22} />
+            <div className="flex flex-col items-center justify-center text-muted-foreground">
+              <div className="h-16 w-16 rounded-2xl bg-secondary/80 flex items-center justify-center mb-4">
+                <FileCode size={32} className="opacity-60" />
               </div>
-              <div className="text-sm font-semibold text-foreground">{t('snippets.empty.title')}</div>
-              <div className="text-xs text-muted-foreground px-8">{t('snippets.empty.desc')}</div>
+              <h3 className="text-lg font-semibold text-foreground mb-2">{t('snippets.empty.title')}</h3>
+              <p className="text-sm text-center max-w-sm">{t('snippets.empty.desc')}</p>
             </div>
           </div>
         )}
@@ -624,6 +1092,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
                     </ContextMenuTrigger>
                     <ContextMenuContent>
                       <ContextMenuItem onClick={() => setSelectedPackage(pkg.path)}>{t('action.open')}</ContextMenuItem>
+                      <ContextMenuItem onClick={() => openRenameDialog(pkg.path)}>{t('common.rename')}</ContextMenuItem>
                       <ContextMenuItem className="text-destructive" onClick={() => deletePackage(pkg.path)}>{t('action.delete')}</ContextMenuItem>
                     </ContextMenuContent>
                   </ContextMenu>
@@ -667,6 +1136,11 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
                               {snippet.command.replace(/\s+/g, ' ') || t('snippets.commandFallback')}
                             </div>
                           </div>
+                          {snippet.shortkey && (
+                            <div className="shrink-0 px-2 py-1 text-[10px] font-mono rounded border border-border bg-muted/50 text-muted-foreground">
+                              {snippet.shortkey}
+                            </div>
+                          )}
                           {viewMode === 'list' && (
                             <Button
                               variant="ghost"
@@ -729,6 +1203,8 @@ 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>
             </div>
@@ -742,6 +1218,40 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
         </div>
       )}
 
+      {/* Rename Package Dialog */}
+      {isRenameDialogOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <Card className="w-full max-w-sm p-4 space-y-4">
+            <div>
+              <p className="text-sm font-semibold">{t('snippets.renameDialog.title')}</p>
+              <p className="text-xs text-muted-foreground">{t('snippets.renameDialog.currentPath', { path: renamingPackagePath })}</p>
+            </div>
+            <div className="space-y-2">
+              <Label>{t('field.name')}</Label>
+              <Input
+                autoFocus
+                placeholder={t('snippets.renameDialog.placeholder')}
+                value={renamePackageName}
+                onChange={(e) => {
+                  setRenamePackageName(e.target.value);
+                  setRenameError('');
+                }}
+                onKeyDown={(e) => e.key === 'Enter' && renamePackage()}
+              />
+              {renameError && (
+                <p className="text-[11px] text-destructive">{renameError}</p>
+              )}
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button variant="ghost" onClick={() => setIsRenameDialogOpen(false)}>
+                {t('common.cancel')}
+              </Button>
+              <Button onClick={renamePackage}>{t('common.rename')}</Button>
+            </div>
+          </Card>
+        </div>
+      )}
+
       {/* Right Panel */}
       {renderRightPanel()}
     </div>

components/SyncStatusButton.tsx

@@ -1,12 +1,12 @@
 /**
  * SyncStatusButton - Cloud Sync Status Indicator for Top Bar
- * 
+ *
  * Shows current sync state with cloud icon and colored indicators:
  * - Green dot: All synced
- * - Blue dot + spin: Syncing in progress  
+ * - Blue dot + spin: Syncing in progress
  * - Red dot: Error
  * - Gray dot: No providers connected
- * 
+ *
  * Clicking opens a popover with sync status details and history.
  */
 
@@ -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';
     };
 
@@ -239,7 +238,7 @@ export const SyncStatusButton: React.FC<SyncStatusButtonProps> = ({
                             <CloudOff size={32} className="mx-auto mb-2 text-muted-foreground" />
                             <p className="text-sm font-medium mb-1">{t('sync.notConfigured')}</p>
                             <p className="text-xs text-muted-foreground mb-3">
-                                Connect a cloud provider to sync your data across devices.
+                                {t('sync.autoSync.noProvider')}
                             </p>
                             <Button
                                 size="sm"
@@ -249,7 +248,7 @@ export const SyncStatusButton: React.FC<SyncStatusButtonProps> = ({
                                     onOpenSettings?.();
                                 }}
                             >
-                                Configure Cloud Sync
+                                {t('sync.settings')}
                             </Button>
                         </div>
                     ) : (

components/TextEditorModal.tsx

@@ -0,0 +1,468 @@
+/**
+ * TextEditorModal - Modal for editing text files in SFTP with syntax highlighting
+ */
+import {
+  CloudUpload,
+  Loader2,
+  Search,
+  WrapText,
+  X,
+} from 'lucide-react';
+import Editor, { type OnMount, loader, useMonaco } from '@monaco-editor/react';
+import type * as Monaco from 'monaco-editor';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+// Configure Monaco to use local files instead of CDN
+const monacoBasePath = import.meta.env.DEV
+  ? './node_modules/monaco-editor/min/vs'
+  : `${import.meta.env.BASE_URL}monaco/vs`;
+loader.config({ paths: { vs: monacoBasePath } });
+
+import { useI18n } from '../application/i18n/I18nProvider';
+import { useClipboardBackend } from '../application/state/useClipboardBackend';
+import { getLanguageId, getLanguageName, getSupportedLanguages } from '../lib/sftpFileUtils';
+import { Button } from './ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
+import { Combobox } from './ui/combobox';
+import { toast } from './ui/toast';
+
+interface TextEditorModalProps {
+  open: boolean;
+  onClose: () => void;
+  fileName: string;
+  initialContent: string;
+  onSave: (content: string) => Promise<void>;
+  editorWordWrap: boolean;
+  onToggleWordWrap: () => void;
+}
+
+// Map our language IDs to Monaco language IDs
+const languageIdToMonaco = (langId: string): string => {
+  const mapping: Record<string, string> = {
+    'javascript': 'javascript',
+    'typescript': 'typescript',
+    'python': 'python',
+    'shell': 'shell',
+    'batch': 'bat',
+    'powershell': 'powershell',
+    'c': 'c',
+    'cpp': 'cpp',
+    'java': 'java',
+    'kotlin': 'kotlin',
+    'go': 'go',
+    'rust': 'rust',
+    'ruby': 'ruby',
+    'php': 'php',
+    'perl': 'perl',
+    'lua': 'lua',
+    'r': 'r',
+    'swift': 'swift',
+    'dart': 'dart',
+    'csharp': 'csharp',
+    'fsharp': 'fsharp',
+    'vb': 'vb',
+    'html': 'html',
+    'css': 'css',
+    'scss': 'scss',
+    'sass': 'sass',
+    'less': 'less',
+    'json': 'json',
+    'jsonc': 'json',
+    'json5': 'json',
+    'xml': 'xml',
+    'yaml': 'yaml',
+    'toml': 'ini',
+    'ini': 'ini',
+    'sql': 'sql',
+    'graphql': 'graphql',
+    'markdown': 'markdown',
+    'plaintext': 'plaintext',
+    'vue': 'html',
+    'svelte': 'html',
+    'dockerfile': 'dockerfile',
+    'makefile': 'makefile',
+    'diff': 'diff',
+  };
+  return mapping[langId] || 'plaintext';
+};
+
+// Convert HSL string "h s% l%" to hex color
+const hslToHex = (hslString: string): string => {
+  const parts = hslString.trim().split(/\s+/);
+  if (parts.length < 3) return '#1e1e1e';
+  const h = parseFloat(parts[0]) / 360;
+  const s = parseFloat(parts[1].replace('%', '')) / 100;
+  const l = parseFloat(parts[2].replace('%', '')) / 100;
+
+  const hue2rgb = (p: number, q: number, t: number) => {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  };
+
+  let r: number, g: number, b: number;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+
+  const toHex = (x: number) => {
+    const hex = Math.round(x * 255).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+};
+
+// Get background color from CSS variable
+const getBackgroundColor = (): string => {
+  const bgValue = getComputedStyle(document.documentElement)
+    .getPropertyValue('--background')
+    .trim();
+  return bgValue ? hslToHex(bgValue) : '#1e1e1e';
+};
+
+export const TextEditorModal: React.FC<TextEditorModalProps> = ({
+  open,
+  onClose,
+  fileName,
+  initialContent,
+  onSave,
+  editorWordWrap,
+  onToggleWordWrap,
+}) => {
+  const { t } = useI18n();
+  const { readClipboardText: readClipboardTextFromBridge } = useClipboardBackend();
+  const monaco = useMonaco();
+  const [content, setContent] = useState(initialContent);
+  const [saving, setSaving] = useState(false);
+  const [hasChanges, setHasChanges] = useState(false);
+  const [languageId, setLanguageId] = useState(() => getLanguageId(fileName));
+  const editorRef = useRef<Monaco.editor.IStandaloneCodeEditor | null>(null);
+
+  // 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());
+
+  // Track theme from document.documentElement class (syncs with app theme)
+  const [isDarkTheme, setIsDarkTheme] = useState(() =>
+    document.documentElement.classList.contains('dark')
+  );
+
+  // Track background color for custom theme
+  const [bgColor, setBgColor] = useState(() => getBackgroundColor());
+
+  // Custom theme name
+  const customThemeName = isDarkTheme ? 'netcatty-dark' : 'netcatty-light';
+
+  // Define and update custom Monaco themes based on UI background color
+  useEffect(() => {
+    if (!monaco) return;
+
+    // Define dark theme with custom background
+    monaco.editor.defineTheme('netcatty-dark', {
+      base: 'vs-dark',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': bgColor,
+      },
+    });
+
+    // Define light theme with custom background
+    monaco.editor.defineTheme('netcatty-light', {
+      base: 'vs',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': bgColor,
+      },
+    });
+
+    // Apply the current theme
+    monaco.editor.setTheme(customThemeName);
+  }, [monaco, isDarkTheme, bgColor, customThemeName]);
+
+  // Listen for theme changes via MutationObserver on <html> class and style
+  useEffect(() => {
+    const root = document.documentElement;
+    const updateTheme = () => {
+      setIsDarkTheme(root.classList.contains('dark'));
+      setBgColor(getBackgroundColor());
+    };
+    const observer = new MutationObserver(updateTheme);
+    observer.observe(root, { attributes: true, attributeFilter: ['class', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  // Reset content when file changes
+  useEffect(() => {
+    setContent(initialContent);
+    setHasChanges(false);
+    setLanguageId(getLanguageId(fileName));
+  }, [initialContent, fileName]);
+
+  // Track changes
+  useEffect(() => {
+    setHasChanges(content !== initialContent);
+  }, [content, initialContent]);
+
+  const handleSave = useCallback(async () => {
+    if (saving) return;
+    setSaving(true);
+    try {
+      await onSave(content);
+      setHasChanges(false);
+      toast.success(t('sftp.editor.saved'), 'SFTP');
+    } catch (e) {
+      toast.error(
+        e instanceof Error ? e.message : t('sftp.editor.saveFailed'),
+        'SFTP'
+      );
+    } finally {
+      setSaving(false);
+    }
+  }, [content, onSave, saving, t]);
+
+  // Keep the ref updated with the latest handleSave function
+  useEffect(() => {
+    handleSaveRef.current = handleSave;
+  }, [handleSave]);
+
+  const readClipboardText = useCallback(async (): Promise<string | null> => {
+    try {
+      if (navigator.clipboard?.readText) {
+        return await navigator.clipboard.readText();
+      }
+    } catch {
+      // Fall through to Electron bridge
+    }
+
+    try {
+      return await readClipboardTextFromBridge();
+    } catch {
+      // Both clipboard APIs unavailable; signal failure so caller can fall back.
+      return null;
+    }
+  }, [readClipboardTextFromBridge]);
+
+  const handlePaste = useCallback(async () => {
+    const editor = editorRef.current;
+    if (!editor) return;
+
+    const text = await readClipboardText();
+    if (text === null) {
+      // Clipboard read unavailable; fall back to Monaco's native paste.
+      editor.trigger('keyboard', 'editor.action.clipboardPasteAction', null);
+      return;
+    }
+    if (!text) return;
+
+    const selections = editor.getSelections();
+    if (!selections || selections.length === 0) return;
+
+    // Match Monaco's default multicursorPaste:'spread' behavior:
+    // distribute one line per cursor when line count equals cursor count.
+    const lines = text.split(/\r\n|\n/);
+    const distribute = selections.length > 1 && lines.length === selections.length;
+
+    editor.executeEdits(
+      'netcatty-paste',
+      selections.map((selection, i) => ({
+        range: selection,
+        text: distribute ? lines[i] : text,
+        forceMoveMarkers: true,
+      })),
+    );
+    editor.focus();
+  }, [readClipboardText]);
+
+  useEffect(() => {
+    handlePasteRef.current = handlePaste;
+  }, [handlePaste]);
+
+  const handleClose = useCallback(() => {
+    if (hasChanges) {
+      const confirmed = confirm(t('sftp.editor.unsavedChanges'));
+      if (!confirmed) return;
+    }
+    onClose();
+  }, [hasChanges, onClose, t]);
+
+  const handleEditorChange = useCallback((value: string | undefined) => {
+    setContent(value || '');
+  }, []);
+
+  const handleEditorMount: OnMount = useCallback((editor, monaco) => {
+    editorRef.current = editor;
+
+    // Add save shortcut - use ref to avoid stale closure
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+      handleSaveRef.current();
+    });
+
+    // Add find shortcut (Ctrl+F / Cmd+F)
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyF, () => {
+      // Trigger Monaco's built-in find widget
+      editor.trigger('keyboard', 'actions.find', null);
+    });
+
+    // Fallback paste path for Electron environments where Monaco paste can fail.
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyV, () => {
+      void handlePasteRef.current();
+    });
+  }, []);
+
+  // Trigger search dialog
+  const handleSearch = useCallback(() => {
+    if (editorRef.current) {
+      editorRef.current.trigger('keyboard', 'actions.find', null);
+      editorRef.current.focus();
+    }
+  }, []);
+
+  const supportedLanguages = useMemo(() => getSupportedLanguages(), []);
+  const monacoLanguage = useMemo(() => languageIdToMonaco(languageId), [languageId]);
+  const languageOptions = useMemo(
+    () => supportedLanguages.map((lang) => ({ value: lang.id, label: lang.name })),
+    [supportedLanguages],
+  );
+
+  const handleLanguageChange = useCallback((nextValue: string) => {
+    setLanguageId(nextValue || 'plaintext');
+  }, []);
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
+      <DialogContent className="max-w-5xl h-[85vh] flex flex-col p-0 gap-0" hideCloseButton>
+        {/* Header */}
+        <DialogHeader className="px-4 py-3 border-b border-border/60 flex-shrink-0">
+          <div className="flex items-center justify-between gap-4">
+            <div className="flex items-center gap-3 flex-1 min-w-0">
+              <DialogTitle className="text-sm font-semibold truncate">
+                {fileName}
+                {hasChanges && <span className="text-primary ml-1">*</span>}
+              </DialogTitle>
+            </div>
+            <div className="flex items-center gap-2 min-w-0">
+              {/* Search button */}
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={handleSearch}
+                title={t('common.search')}
+              >
+                <Search size={14} />
+              </Button>
+
+              {/* Word wrap toggle */}
+              <Button
+                variant={editorWordWrap ? 'secondary' : 'ghost'}
+                size="icon"
+                className="h-7 w-7"
+                onClick={onToggleWordWrap}
+                title={t('sftp.editor.wordWrap')}
+              >
+                <WrapText size={14} />
+              </Button>
+
+              {/* Language selector */}
+              <Combobox
+                options={languageOptions}
+                value={languageId}
+                onValueChange={handleLanguageChange}
+                placeholder={t('sftp.editor.syntaxHighlight')}
+                triggerClassName="h-7 max-w-[180px] min-w-[120px] text-xs"
+              />
+
+              {/* Save button */}
+              <Button
+                variant="default"
+                size="sm"
+                className="h-7"
+                onClick={handleSave}
+                disabled={saving || !hasChanges}
+              >
+                {saving ? (
+                  <Loader2 size={14} className="mr-1.5 animate-spin" />
+                ) : (
+                  <CloudUpload size={14} className="mr-1.5" />
+                )}
+                {saving ? t('sftp.editor.saving') : t('sftp.editor.save')}
+              </Button>
+
+              {/* Close button */}
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={handleClose}
+              >
+                <X size={14} />
+              </Button>
+            </div>
+          </div>
+        </DialogHeader>
+
+        {/* Monaco Editor */}
+        <div className="flex-1 min-h-0 relative">
+          <Editor
+            height="100%"
+            language={monacoLanguage}
+            value={content}
+            onChange={handleEditorChange}
+            onMount={handleEditorMount}
+            theme={customThemeName}
+            loading={
+              <div className="absolute inset-0 flex items-center justify-center bg-background">
+                <Loader2 size={32} className="animate-spin text-muted-foreground" />
+              </div>
+            }
+            options={{
+              // Prefer native context menu in Electron so right-click Paste uses OS clipboard path.
+              contextmenu: false,
+              minimap: { enabled: true },
+              fontSize: 14,
+              lineNumbers: 'on',
+              roundedSelection: false,
+              scrollBeyondLastLine: false,
+              automaticLayout: true,
+              tabSize: 2,
+              insertSpaces: true,
+              wordWrap: editorWordWrap ? 'on' : 'off',
+              folding: true,
+              renderWhitespace: 'selection',
+              bracketPairColorization: { enabled: true },
+              find: {
+                addExtraSpaceOnTop: false,
+                autoFindInSelection: 'never',
+                seedSearchStringFromSelection: 'selection',
+              },
+            }}
+          />
+        </div>
+
+        {/* Footer */}
+        <div className="px-4 py-2 border-t border-border/60 flex items-center justify-between text-xs text-muted-foreground bg-muted/30 flex-shrink-0">
+          <span>
+            {getLanguageName(languageId)}
+          </span>
+          <span>
+            {content.split('\n').length} lines • {content.length} characters
+          </span>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default TextEditorModal;

components/ThemeSelectPanel.tsx

@@ -1,6 +1,6 @@
-import { Users } from 'lucide-react';
 import React, { useMemo, useState } from 'react';
 import { TERMINAL_THEMES } from '../infrastructure/config/terminalThemes';
+import { useCustomThemes } from '../application/state/customThemeStore';
 import { cn } from '../lib/utils';
 import { TerminalTheme } from '../types';
 import {
@@ -63,17 +63,12 @@ const ThemeSelectPanel: React.FC<ThemeSelectPanelProps> = ({
     // 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 };
-    }, []);
+    const customThemes = useCustomThemes();
 
-    // Find selected theme info - reserved for displaying selection details
-    const _selectedTheme = useMemo(() => {
-        return TERMINAL_THEMES.find(t => t.id === selectedThemeId);
-    }, [selectedThemeId]);
+    // All themes combined
+    const allThemes = useMemo(() => {
+        return [...TERMINAL_THEMES, ...customThemes];
+    }, [customThemes]);
 
     const renderThemeItem = (theme: TerminalTheme) => {
         const isSelected = theme.id === selectedThemeId;
@@ -99,36 +94,12 @@ const ThemeSelectPanel: React.FC<ThemeSelectPanelProps> = ({
                     )}>
                         {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>
+                    {theme.id === 'netcatty-dark' && (
+                        <div className="text-xs text-muted-foreground">Default</div>
+                    )}
+                    {theme.id === 'netcatty-light' && (
+                        <div className="text-xs text-muted-foreground">Light mode</div>
+                    )}
                 </div>
             </button>
         );
@@ -146,7 +117,7 @@ const ThemeSelectPanel: React.FC<ThemeSelectPanelProps> = ({
                 <ScrollArea className="h-full">
                     <div className="py-2">
                         {/* All themes in a single list */}
-                        {TERMINAL_THEMES.map(renderThemeItem)}
+                        {allThemes.map(renderThemeItem)}
                     </div>
                 </ScrollArea>
             </AsidePanelContent>

components/TopTabs.tsx

@@ -1,11 +1,13 @@
-import { Bell, Copy, FileText, Folder, LayoutGrid, Minus, Moon, MoreHorizontal, Plus, Shield, Square, Sun, TerminalSquare, X } from 'lucide-react';
+import { Bell, Copy, FileText, Folder, LayoutGrid, Minus, Moon, MoreHorizontal, Plus, Server, Shield, 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 { LogView } from '../application/state/useSessionState';
 import { useWindowControls } from '../application/state/useWindowControls';
 import { useI18n } from '../application/i18n/I18nProvider';
+import { normalizeDistroId } 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 +18,7 @@ const dragRegionNoSelect = { WebkitAppRegion: 'drag', userSelect: 'none' } as Re
 
 interface TopTabsProps {
   theme: 'dark' | 'light';
+  hosts: Host[];
   sessions: TerminalSession[];
   orphanSessions: TerminalSession[];
   workspaces: Workspace[];
@@ -25,6 +28,7 @@ interface TopTabsProps {
   isMacClient: boolean;
   onCloseSession: (sessionId: string, e?: React.MouseEvent) => void;
   onRenameSession: (sessionId: string) => void;
+  onCopySession: (sessionId: string) => void;
   onRenameWorkspace: (workspaceId: string) => void;
   onCloseWorkspace: (workspaceId: string) => void;
   onCloseLogView: (logViewId: string) => void;
@@ -37,6 +41,82 @@ interface TopTabsProps {
   onReorderTabs: (draggedId: string, targetId: string, position: 'before' | 'after') => void;
 }
 
+// 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 fallbackIcon = cn(iconSize, isActive ? "text-accent" : "text-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={cn(boxBase, "bg-primary/15 text-primary")}>
+        <TerminalSquare className={iconSize} />
+      </div>
+    );
+  }
+
+  // Try distro logo with brand background color
+  if (host) {
+    const distro = normalizeDistroId(host.distro) || (host.distro || '').toLowerCase();
+    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={host.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={cn(boxBase, "bg-primary/15 text-primary")}>
+        <Server className={iconSize} />
+      </div>
+    );
+  }
+  return <TerminalSquare className={fallbackIcon} />;
+});
+SessionTabIcon.displayName = 'SessionTabIcon';
+
 const sessionStatusDot = (status: TerminalSession['status']) => {
   const tone = status === 'connected'
     ? "bg-emerald-400"
@@ -55,12 +135,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 = () => {
@@ -77,17 +164,17 @@ 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 text-muted-foreground hover:bg-foreground/10 hover:text-foreground transition-all duration-150 app-no-drag"
         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 text-muted-foreground hover:bg-foreground/10 hover:text-foreground transition-all duration-150 app-no-drag"
         title={isMaximized ? "Restore" : "Maximize"}
       >
         {isMaximized ? (
@@ -100,7 +187,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} />
@@ -112,6 +199,7 @@ WindowControls.displayName = 'WindowControls';
 
 const TopTabsInner: React.FC<TopTabsProps> = ({
   theme,
+  hosts,
   sessions,
   orphanSessions,
   workspaces,
@@ -121,6 +209,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
   isMacClient,
   onCloseSession,
   onRenameSession,
+  onCopySession,
   onRenameWorkspace,
   onCloseWorkspace,
   onCloseLogView,
@@ -233,6 +322,12 @@ 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]);
+
   // Pre-compute session counts per workspace for O(1) access
   const workspacePaneCounts = useMemo(() => {
     const counts = new Map<string, number>();
@@ -374,26 +469,29 @@ 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-all duration-150",
+                  activeTabId === session.id
+                    ? "bg-background text-foreground"
+                    : "text-muted-foreground hover:bg-background/40 hover:text-foreground",
                   isBeingDragged && isDraggingForReorder ? "opacity-40 scale-95" : ""
                 )}
-                style={{
-                  ...shiftStyle,
-                  ...(activeTabId === session.id ? { borderColor: 'hsl(var(--accent))' } : {})
-                }}
+                style={shiftStyle}
               >
+                {/* Active tab top accent line */}
+                {activeTabId === session.id && (
+                  <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent" />
+                )}
                 {/* Drop indicator line - before */}
                 {showDropIndicatorBefore && isDraggingForReorder && (
-                  <div className="absolute -left-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 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
                 )}
                 {/* 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 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
                 )}
                 <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>
@@ -410,6 +508,9 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
               <ContextMenuItem onClick={() => onRenameSession(session.id)}>
                 {t('common.rename')}
               </ContextMenuItem>
+              <ContextMenuItem onClick={() => onCopySession(session.id)}>
+                {t('tabs.copyTab')}
+              </ContextMenuItem>
               <ContextMenuItem className="text-destructive" onClick={() => onCloseSession(session.id)}>
                 {t('common.close')}
               </ContextMenuItem>
@@ -440,23 +541,26 @@ 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-all duration-150",
+                  isActive
+                    ? "bg-background text-foreground"
+                    : "text-muted-foreground hover:bg-background/40 hover:text-foreground",
                   isBeingDragged && isDraggingForReorder ? "opacity-40 scale-95" : ""
                 )}
-                style={{
-                  ...shiftStyle,
-                  ...(isActive ? { borderColor: 'hsl(var(--accent))' } : {})
-                }}
+                style={shiftStyle}
               >
+                {/* Active tab top accent line */}
+                {isActive && (
+                  <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent" />
+                )}
                 {/* Drop indicator line - before */}
                 {showDropIndicatorBefore && isDraggingForReorder && (
-                  <div className="absolute -left-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 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
                 )}
                 {/* 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 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
                 )}
                 <div className="flex items-center gap-2 truncate">
                   <LayoutGrid size={14} className={cn("shrink-0", isActive ? "text-primary" : "text-muted-foreground")} />
@@ -490,12 +594,17 @@ 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",
+              "transition-colors duration-150",
+              isActive
+                ? "bg-background text-foreground"
+                : "text-muted-foreground hover:bg-background/40 hover:text-foreground"
             )}
-            style={isActive ? { borderColor: 'hsl(var(--accent))' } : {}}
           >
+            {/* Active tab top accent line */}
+            {isActive && (
+              <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent" />
+            )}
             <div className="flex items-center gap-2 min-w-0 flex-1">
               <FileText size={14} className={cn("shrink-0", isActive ? "text-accent" : "text-muted-foreground")} />
               <span className="truncate">
@@ -531,36 +640,41 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
 
   return (
     <div
-      className="relative w-full bg-secondary border-b border-border/60 app-drag"
+      className="relative w-full bg-secondary app-drag"
       style={dragRegionNoSelect}
       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 px-3 flex items-center gap-2 app-drag"
-        style={{ ...dragRegionStyle, paddingLeft: isMacClient && !isWindowFullscreen ? 76 : 12 }}
+        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",
+              "transition-colors duration-150",
+              isVaultActive
+                ? "bg-foreground/10 text-foreground"
+                : "text-muted-foreground hover:bg-background/40 hover:text-foreground"
             )}
-            style={isVaultActive ? { borderColor: 'hsl(var(--accent))' } : undefined}
           >
             <Shield 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",
+              "transition-colors duration-150",
+              isSftpActive
+                ? "bg-background text-foreground"
+                : "text-muted-foreground hover:bg-background/40 hover:text-foreground"
             )}
-            style={isSftpActive ? { borderColor: 'hsl(var(--accent))' } : undefined}
           >
+            {isSftpActive && <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent" />}
             <Folder size={14} /> SFTP
           </div>
         </div>
@@ -589,7 +703,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
           {/* 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()}
@@ -598,7 +712,7 @@ 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"
                 onClick={onOpenQuickSwitcher}
                 title="Open quick switcher"
               >
@@ -606,7 +720,7 @@ 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 */}
@@ -623,7 +737,7 @@ 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"
             onClick={onOpenQuickSwitcher}
             title="More tabs"
           >
@@ -632,7 +746,16 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
         )}
 
         {/* Fixed right controls */}
-        <div className="flex-shrink-0 flex items-center gap-2 app-drag" style={dragRegionStyle}>
+        <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 text-muted-foreground hover:text-foreground app-no-drag"
+            title="AI Assistant"
+            onClick={() => window.dispatchEvent(new CustomEvent('netcatty:toggle-ai-panel'))}
+          >
+            <Sparkles size={16} />
+          </Button>
           <Button variant="ghost" size="icon" className="h-6 w-6 text-muted-foreground hover:text-foreground app-no-drag">
             <Bell size={16} />
           </Button>
@@ -648,9 +771,9 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
           </Button>
         </div>
         {/* Custom window controls for Windows/Linux */}
-        {!isMacClient && <WindowControls />}
-        {/* Small drag shim to the right edge */}
-        <div className="w-2 h-8 app-drag flex-shrink-0" />
+        {!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-9 app-drag flex-shrink-0" />}
       </div>
     </div>
   );
@@ -660,6 +783,7 @@ 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 &&

components/TrayPanel.tsx

@@ -0,0 +1,410 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Button } from "./ui/button";
+import { useSessionState } from "../application/state/useSessionState";
+import { usePortForwardingState } from "../application/state/usePortForwardingState";
+import { useVaultState } from "../application/state/useVaultState";
+import { toast } from "./ui/toast";
+import { cn } from "../lib/utils";
+import { useI18n } from "../application/i18n/I18nProvider";
+import { I18nProvider } from "../application/i18n/I18nProvider";
+import { useSettingsState } from "../application/state/useSettingsState";
+import { useTrayPanelBackend } from "../application/state/useTrayPanelBackend";
+import { useActiveTabId } from "../application/state/activeTabStore";
+import { X, Maximize2, ChevronRight, ChevronDown, Power } from "lucide-react";
+import { AppLogo } from "./AppLogo";
+
+const StatusDot: React.FC<{ status: "success" | "warning" | "error" | "neutral"; spinning?: boolean }> = ({
+  status,
+  spinning,
+}) => {
+  const color =
+    status === "success"
+      ? "bg-emerald-500"
+      : status === "warning"
+        ? "bg-amber-500"
+        : status === "error"
+          ? "bg-rose-500"
+          : "bg-zinc-500";
+
+  return (
+    <span
+      className={cn(
+        "inline-block h-2 w-2 rounded-full",
+        color,
+        spinning ? "animate-spin" : "",
+      )}
+    />
+  );
+};
+
+// Session type for workspace grouping
+type TraySession = {
+  id: string;
+  label: string;
+  hostLabel: string;
+  status: "connecting" | "connected" | "disconnected";
+  workspaceId?: string;
+  workspaceTitle?: string;
+};
+
+// Collapsible workspace group component
+const WorkspaceGroup: React.FC<{
+  workspaceId: string;
+  title: string;
+  sessions: TraySession[];
+  activeTabId: string | null;
+  jumpToSession: (sessionId: string) => Promise<void>;
+  t: (key: string) => string;
+}> = ({ workspaceId, title, sessions, activeTabId, jumpToSession, t }) => {
+  const [expanded, setExpanded] = useState(true);
+  const isAnyActive = sessions.some((s) => s.id === activeTabId) || activeTabId === workspaceId;
+
+  return (
+    <div>
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className={cn(
+          "w-full text-left px-2 py-1.5 rounded hover:bg-muted flex items-center gap-1",
+          isAnyActive ? "bg-muted" : "",
+        )}
+      >
+        {expanded ? <ChevronDown size={14} className="text-muted-foreground" /> : <ChevronRight size={14} className="text-muted-foreground" />}
+        <span className="font-medium truncate">{title}</span>
+        <span className="ml-auto text-xs text-muted-foreground">{sessions.length}</span>
+      </button>
+      {expanded && (
+        <div className="ml-4 mt-0.5 space-y-0.5">
+          {sessions.map((s) => (
+            <button
+              key={s.id}
+              title={s.hostLabel || s.label}
+              onClick={() => {
+                // Jump to session (using session id)
+                void jumpToSession(s.id);
+              }}
+              className={cn(
+                "w-full text-left px-2 py-1 rounded hover:bg-muted flex items-center justify-between text-sm",
+                s.status === "connected" ? "" : "text-muted-foreground",
+                activeTabId === s.id ? "bg-muted/60" : "",
+              )}
+            >
+              <span className="flex items-center gap-2 min-w-0">
+                <StatusDot
+                  status={s.status === "connected" ? "success" : s.status === "connecting" ? "warning" : "error"}
+                  spinning={s.status === "connecting"}
+                />
+                <span className="truncate">{s.hostLabel || s.label}</span>
+              </span>
+              <span className="ml-2 text-xs text-muted-foreground">{t(`tray.status.${s.status}`)}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const TrayPanelContent: React.FC = () => {
+  const { t } = useI18n();
+  const {
+    hideTrayPanel,
+    openMainWindow,
+    quitApp,
+    jumpToSession,
+    onTrayPanelCloseRequest,
+    onTrayPanelRefresh,
+    onTrayPanelMenuData,
+  } = useTrayPanelBackend();
+
+  const { hosts, keys } = useVaultState();
+  useSessionState();
+  const { rules: portForwardingRules, startTunnel, stopTunnel } = usePortForwardingState();
+  const activeTabId = useActiveTabId();
+
+  const [traySessions, setTraySessions] = useState<TraySession[]>([]);
+
+  const jumpableSessions = useMemo(
+    () => traySessions.filter((s) => s.status === "connected" || s.status === "connecting"),
+    [traySessions],
+  );
+
+  const activeSession = useMemo(() => {
+    if (!activeTabId) return null;
+    return traySessions.find((s) => s.id === activeTabId) || null;
+  }, [activeTabId, traySessions]);
+
+  useEffect(() => {
+    const unsubscribe = onTrayPanelMenuData?.((data) => {
+      setTraySessions(data.sessions || []);
+    });
+    return () => unsubscribe?.();
+  }, [onTrayPanelMenuData]);
+
+  useEffect(() => {
+    const unsubscribe = onTrayPanelRefresh?.(() => {
+      try {
+        window.dispatchEvent(new Event("storage"));
+      } catch {
+        // ignore
+      }
+    });
+    return () => unsubscribe?.();
+  }, [onTrayPanelRefresh]);
+
+  const keysForPf = useMemo(
+    () => keys.map((k) => ({ id: k.id, privateKey: k.privateKey, passphrase: k.passphrase })),
+    [keys],
+  );
+
+  const handleClose = useCallback(() => {
+    void hideTrayPanel();
+  }, [hideTrayPanel]);
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleClose();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [handleClose]);
+
+  useEffect(() => {
+    const onPointerDown = (e: PointerEvent) => {
+      const target = e.target;
+      if (!(target instanceof Node)) return;
+      if (document.body && !document.body.contains(target)) return;
+      // Ignore clicks on interactive elements inside the panel.
+      if (target instanceof HTMLElement && target.closest("button,a,input,select,textarea,[role='button']")) {
+        return;
+      }
+      // Clicking on background should close panel
+      const root = document.getElementById("tray-panel-root");
+      if (root && !root.contains(target)) {
+        handleClose();
+      }
+    };
+    window.addEventListener("pointerdown", onPointerDown, true);
+    return () => window.removeEventListener("pointerdown", onPointerDown, true);
+  }, [handleClose]);
+
+  useEffect(() => {
+    const unsubscribe = onTrayPanelCloseRequest(() => {
+      handleClose();
+    });
+    return () => unsubscribe?.();
+  }, [handleClose, onTrayPanelCloseRequest]);
+
+  const handleOpenMain = useCallback(() => {
+    void openMainWindow();
+  }, [openMainWindow]);
+
+  const handleQuit = useCallback(() => {
+    void quitApp();
+  }, [quitApp]);
+
+  return (
+    <div id="tray-panel-root" className="w-full h-full bg-background/95 backdrop-blur border border-border/60 rounded-lg shadow-lg overflow-hidden flex flex-col">
+      <div className="px-3 py-2 border-b border-border/60 flex items-center justify-between app-no-drag">
+        <div className="flex items-center gap-2">
+          <AppLogo className="w-5 h-5" />
+          <span className="text-sm font-medium">Netcatty</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <button
+            className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground"
+            onClick={handleOpenMain}
+            title={t("tray.openMainWindow")}
+          >
+            <Maximize2 size={14} />
+          </button>
+          <button
+            className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground"
+            onClick={handleClose}
+            title="Close"
+          >
+            <X size={14} />
+          </button>
+        </div>
+      </div>
+
+      <div className="p-2 space-y-3 text-sm flex-1 overflow-y-auto min-h-0">
+
+        {jumpableSessions.length > 0 && (() => {
+          // Group sessions by workspace
+          const workspaceGroups = new Map<string, { title: string; sessions: typeof jumpableSessions }>();
+          const soloSessions: typeof jumpableSessions = [];
+
+          jumpableSessions.forEach((s) => {
+            if (s.workspaceId) {
+              const existing = workspaceGroups.get(s.workspaceId);
+              if (existing) {
+                existing.sessions.push(s);
+              } else {
+                workspaceGroups.set(s.workspaceId, {
+                  title: s.workspaceTitle || "Workspace",
+                  sessions: [s],
+                });
+              }
+            } else {
+              soloSessions.push(s);
+            }
+          });
+
+          return (
+            <div>
+              <div className="px-2 py-1 text-xs text-muted-foreground">{t("tray.sessions")}</div>
+              <div className="space-y-1">
+                {/* Workspace groups */}
+                {Array.from(workspaceGroups.entries()).map(([wsId, group]) => (
+                  <WorkspaceGroup
+                    key={wsId}
+                    workspaceId={wsId}
+                    title={group.title}
+                    sessions={group.sessions}
+                    activeTabId={activeTabId}
+                    jumpToSession={jumpToSession}
+                    t={t}
+                  />
+                ))}
+                {/* Solo sessions */}
+                {soloSessions.map((s) => (
+                  <button
+                    key={s.id}
+                    title={s.hostLabel || s.label}
+                    onClick={() => {
+                      void jumpToSession(s.id);
+                    }}
+                    className={cn(
+                      "w-full text-left px-2 py-1.5 rounded hover:bg-muted flex items-center justify-between",
+                      s.status === "connected" ? "" : "text-muted-foreground",
+                      activeTabId === s.id ? "bg-muted" : "",
+                    )}
+                  >
+                    <span className="flex items-center gap-2 min-w-0">
+                      <StatusDot
+                        status={s.status === "connected" ? "success" : s.status === "connecting" ? "warning" : "error"}
+                        spinning={s.status === "connecting"}
+                      />
+                      <span className="truncate">{s.hostLabel || s.label}</span>
+                    </span>
+                    <span className="ml-2 text-xs text-muted-foreground">{t(`tray.status.${s.status}`)}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          );
+        })()}
+
+        {activeSession && (
+          <div>
+            <div className="px-2 py-1 text-xs text-muted-foreground">Current</div>
+            <Button
+              variant="ghost"
+              className="w-full justify-start px-2 h-8"
+              title={activeSession.hostLabel || activeSession.label}
+              onClick={() => {
+                void jumpToSession(activeSession.id);
+              }}
+            >
+              <span className="truncate">{activeSession.hostLabel || activeSession.label}</span>
+            </Button>
+          </div>
+        )}
+
+        {portForwardingRules.length > 0 && (
+          <div>
+            <div className="px-2 py-1 text-xs text-muted-foreground">{t("tray.portForwarding")}</div>
+            <div className="space-y-1">
+              {portForwardingRules.map((rule) => {
+                const isConnecting = rule.status === "connecting";
+                const isActive = rule.status === "active";
+                const label = rule.label || (rule.type === "dynamic"
+                  ? `SOCKS:${rule.localPort}`
+                  : `${rule.localPort} → ${rule.remoteHost}:${rule.remotePort}`);
+
+                return (
+                  <button
+                    key={rule.id}
+                    disabled={isConnecting}
+                    title={label}
+                    onClick={() => {
+                      const host = rule.hostId ? hosts.find((h) => h.id === rule.hostId) : undefined;
+                      if (!host) {
+                        toast.error(t("pf.error.hostNotFound"));
+                        return;
+                      }
+                      if (isActive) {
+                        void stopTunnel(rule.id);
+                      } else {
+                        void startTunnel(rule, host, keysForPf, (status, error) => {
+                          if (status === "error" && error) toast.error(error);
+                        }, rule.autoStart);
+                      }
+                    }}
+                    className={cn(
+                      "w-full text-left px-2 py-1.5 rounded hover:bg-muted flex items-center justify-between",
+                      isConnecting ? "opacity-60" : "",
+                    )}
+                  >
+                    <span className="flex items-center gap-2 min-w-0">
+                      <StatusDot
+                        status={
+                          rule.status === "active"
+                            ? "success"
+                            : rule.status === "connecting"
+                              ? "warning"
+                              : rule.status === "error"
+                                ? "error"
+                                : "neutral"
+                        }
+                        spinning={rule.status === "connecting"}
+                      />
+                      <span className="truncate">{label}</span>
+                    </span>
+                    <span className="ml-2 text-xs text-muted-foreground">
+                      {t(`tray.status.${rule.status}`)}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Empty state - show when nothing is active */}
+        {jumpableSessions.length === 0 && portForwardingRules.length === 0 && (
+          <div className="flex flex-col items-center justify-center py-8 text-center">
+            <span className="text-2xl mb-2">😴</span>
+            <span className="text-sm text-muted-foreground">{t("tray.empty.title")}</span>
+            <span className="text-xs text-muted-foreground/60 mt-1">{t("tray.empty.subtitle")}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Quit button at the bottom */}
+      <div className="px-3 py-2 border-t border-border/60">
+        <button
+          className="w-full text-left px-2 py-1.5 rounded hover:bg-destructive/10 flex items-center gap-2 text-sm text-muted-foreground hover:text-destructive transition-colors"
+          onClick={handleQuit}
+        >
+          <Power size={14} />
+          <span>{t("tray.quit")}</span>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+const TrayPanel: React.FC = () => {
+  const settings = useSettingsState();
+  return (
+    <I18nProvider locale={settings.uiLanguage}>
+      <TrayPanelContent />
+    </I18nProvider>
+  );
+};
+
+export default TrayPanel;