Merge pull request #303 from binaricat/fix/unify-sync-payload

fix: unify sync payload logic & harden port forwarding lifecycle

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

@@ -46,6 +46,10 @@ const tag = (process.env.GITHUB_REF_NAME && /^v\d+\.\d+\.\d+/.test(process.env.G
 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`,
@@ -57,16 +61,16 @@ const files = {
   },
   linux: {
     appimage: {
-      x64: `Netcatty-${version}-linux-x64.AppImage`,
+      x64: `Netcatty-${version}-linux-x86_64.AppImage`,
       arm64: `Netcatty-${version}-linux-arm64.AppImage`
     },
     deb: {
-      x64: `Netcatty-${version}-linux-x64.deb`,
+      x64: `Netcatty-${version}-linux-amd64.deb`,
       arm64: `Netcatty-${version}-linux-arm64.deb`
     },
     rpm: {
-      x64: `Netcatty-${version}-linux-x64.rpm`,
-      arm64: `Netcatty-${version}-linux-arm64.rpm`
+      x64: `Netcatty-${version}-linux-x86_64.rpm`,
+      arm64: `Netcatty-${version}-linux-aarch64.rpm`
     }
   }
 };

.github/workflows/build.yml

@@ -13,12 +13,18 @@ on:
 
 jobs:
   build:
-    name: build-${{ matrix.os }}
+    name: build-${{ matrix.name }}
     runs-on: ${{ matrix.os }}
     strategy:
       fail-fast: false
       matrix:
-        os: [macos-latest, windows-latest, ubuntu-latest]
+        include:
+          - name: macos
+            os: macos-latest
+            pack_script: pack:mac
+          - name: windows
+            os: windows-latest
+            pack_script: pack:win
     env:
       VITE_SYNC_GITHUB_CLIENT_ID: ${{ secrets.VITE_SYNC_GITHUB_CLIENT_ID }}
       VITE_SYNC_GOOGLE_CLIENT_ID: ${{ secrets.VITE_SYNC_GOOGLE_CLIENT_ID }}
@@ -31,7 +37,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: npm
 
       - name: Install deps
@@ -50,43 +56,147 @@ jobs:
           echo "Setting version to ${VERSION}"
           npm pkg set version="${VERSION}"
 
-      - name: Build package (macOS)
-        if: matrix.os == 'macos-latest'
-        env:
-          CSC_IDENTITY_AUTO_DISCOVERY: "false"
-          ELECTRON_BUILDER_PUBLISH: "never"
-        run: npm run pack:mac
-
-      - name: Build package (Windows)
-        if: matrix.os == 'windows-latest'
+      - name: Build package
         env:
           ELECTRON_BUILDER_PUBLISH: "never"
-        run: npm run pack:win
-
-      - name: Build package (Linux)
-        if: matrix.os == 'ubuntu-latest'
-        env:
-          ELECTRON_BUILDER_PUBLISH: "never"
-        run: npm run pack:linux
+          # macOS code signing & notarization (ignored on other platforms)
+          CSC_LINK: ${{ secrets.MAC_CSC_LINK }}
+          CSC_KEY_PASSWORD: ${{ secrets.MAC_CSC_KEY_PASSWORD }}
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_APP_SPECIFIC_PASSWORD }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+        run: npm run ${{ matrix.pack_script }}
 
       - name: Upload artifacts
         uses: actions/upload-artifact@v4
         with:
-          name: netcatty-${{ matrix.os }}
+          name: netcatty-${{ matrix.name }}
           path: |
             release/*.dmg
+            release/*.zip
             release/*.exe
             release/*.msi
             release/*.AppImage
             release/*.deb
             release/*.rpm
             release/*.tar.gz
+            release/*.yml
+            release/*.blockmap
+          if-no-files-found: ignore
+
+  # Linux x64 — builds directly on ubuntu-latest (no container).
+  # v1.0.39 used a debian:bullseye container which broke native module
+  # packaging (node-pty .node file missing from asar.unpacked). Reverted
+  # to the v1.0.38 approach. See #264.
+  build-linux-x64:
+    name: build-linux-x64
+    runs-on: ubuntu-latest
+    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
           if-no-files-found: ignore
 
   release:
     name: release
     runs-on: ubuntu-latest
-    needs: build
+    needs: [build, build-linux-x64, build-linux-arm64]
     if: startsWith(github.ref, 'refs/tags/') || (github.event_name == 'workflow_dispatch' && inputs.publish_release)
     permissions:
       contents: write
@@ -116,10 +226,13 @@ jobs:
           body_path: release_notes.md
           files: |
             artifacts/*.dmg
+            artifacts/*.zip
             artifacts/*.exe
             artifacts/*.AppImage
             artifacts/*.deb
             artifacts/*.rpm
+            artifacts/*.yml
+            artifacts/*.blockmap
           generate_release_notes: true
           fail_on_unmatched_files: false
           token: ${{ secrets.RELEASE_TOKEN }}

.github/workflows/sync.yml

@@ -1,42 +0,0 @@
-name: Sync Upstream
-
-env:
-  UPSTREAM_URL: "https://github.com/binaricat/Netcatty.git"
-  UPSTREAM_BRANCH: "main"
-  TARGET_BRANCH: "main"
-
-on:
-  schedule:
-    - cron: '0 0 * * *'  # Run daily at midnight
-  workflow_dispatch:      # Allow manual trigger
-
-jobs:
-  sync:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ env.TARGET_BRANCH }}
-          fetch-depth: 0
-          token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Configure Git
-        run: |
-          git config --global user.name "github-actions[bot]"
-          git config --global user.email "github-actions[bot]@users.noreply.github.com"
-
-      - name: Merge Upstream
-        run: |
-          echo "Adding upstream remote..."
-          git remote add upstream ${{ env.UPSTREAM_URL }}
-          git fetch upstream ${{ env.UPSTREAM_BRANCH }}
-          
-          echo "Merging upstream/${{ env.UPSTREAM_BRANCH }} into ${{ env.TARGET_BRANCH }}..."
-          # This will fail if there are conflicts, which is the desired behavior (notify user via failure)
-          git merge upstream/${{ env.UPSTREAM_BRANCH }} --no-edit
-          
-          echo "Pushing changes..."
-          git push origin ${{ env.TARGET_BRANCH }}

.gitignore

@@ -17,7 +17,8 @@ dist-ssr
 *.tsbuildinfo
 coverage
 /.vite
-/build
+/build/*
+!/build/icons
 /electron/native/**/build
 /release
 /out

App.tsx

@@ -14,6 +14,8 @@ 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 { TopTabs } from './components/TopTabs';
 import { Button } from './components/ui/button';
@@ -166,8 +168,8 @@ function App({ settings }: { settings: SettingsState }) {
   const [passphraseQueue, setPassphraseQueue] = useState<PassphraseRequest[]>([]);
 
   const {
-    theme,
     setTheme,
+    resolvedTheme,
     setTerminalThemeId,
     currentTerminalTheme,
     terminalFontFamilyId,
@@ -261,7 +263,7 @@ function App({ settings }: { settings: SettingsState }) {
   const isMacClient = typeof navigator !== 'undefined' && /Mac|Macintosh/.test(navigator.userAgent);
 
   // Get port forwarding rules and import function
-  const { rules: portForwardingRules, importRules: importPortForwardingRules } = usePortForwardingState();
+  const { rules: portForwardingRules, importRules: importPortForwardingRules, startTunnel, stopTunnel } = usePortForwardingState();
 
   const portForwardingRulesForSync = useMemo(
     () =>
@@ -284,17 +286,10 @@ function App({ settings }: { settings: SettingsState }) {
     portForwardingRules: portForwardingRulesForSync,
     knownHosts,
     onApplyPayload: (payload) => {
-      importDataFromString(JSON.stringify({
-        hosts: payload.hosts,
-        keys: payload.keys,
-        identities: payload.identities,
-        snippets: payload.snippets,
-        customGroups: payload.customGroups,
-      }));
-
-      if (payload.portForwardingRules) {
-        importPortForwardingRules(payload.portForwardingRules);
-      }
+      applySyncPayload(payload, {
+        importVaultData: importDataFromString,
+        importPortForwardingRules,
+      });
     },
   });
 
@@ -309,7 +304,10 @@ function App({ settings }: { settings: SettingsState }) {
   }, [handleSyncNow]);
 
   // Update check hook - checks for new versions on startup
-  const { updateState, openReleasePage, dismissUpdate } = useUpdateCheck();
+  const { updateState, dismissUpdate } = useUpdateCheck();
+
+  // Window controls - must be before update toast effect which uses openSettingsWindow
+  const { openSettingsWindow } = useWindowControls();
 
   // Show toast notification when update is available
   useEffect(() => {
@@ -321,14 +319,14 @@ function App({ settings }: { settings: SettingsState }) {
           title: t('update.available.title'),
           duration: 8000, // Show longer for update notifications
           onClick: () => {
-            openReleasePage();
+            void openSettingsWindow();
             dismissUpdate();
           },
-          actionLabel: t('update.downloadNow'),
+          actionLabel: t('update.viewInSettings'),
         }
       );
     }
-  }, [updateState.hasUpdate, updateState.latestRelease, t, openReleasePage, dismissUpdate]);
+  }, [updateState.hasUpdate, updateState.latestRelease, t, openSettingsWindow, dismissUpdate]);
 
   // Memoize keys for port forwarding to prevent unnecessary re-renders
   const portForwardingKeys = useMemo(
@@ -342,6 +340,150 @@ function App({ settings }: { settings: SettingsState }) {
     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 }));
+      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();
@@ -649,11 +791,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;
       }
 
@@ -677,6 +823,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'];
@@ -766,7 +916,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',
@@ -777,7 +929,6 @@ function App({ settings }: { settings: SettingsState }) {
       localHostname: hostname,
       saved: false,
     });
-    createLocalTerminal();
   }, [addConnectionLog, createLocalTerminal]);
 
   // Wrapper to connect to host with logging
@@ -787,7 +938,9 @@ function App({ settings }: { settings: SettingsState }) {
     // Handle serial hosts separately
     if (host.protocol === 'serial') {
       const portName = host.hostname.split('/').pop() || host.hostname;
+      const sessionId = connectToHost(host);
       addConnectionLog({
+        sessionId,
         hostId: host.id,
         hostLabel: host.label || `Serial: ${portName}`,
         hostname: host.hostname,
@@ -798,13 +951,14 @@ function App({ settings }: { settings: SettingsState }) {
         localHostname: localHost,
         saved: false,
       });
-      connectToHost(host);
       return;
     }
 
     const protocol = host.moshEnabled ? 'mosh' : (host.protocol || 'ssh');
     const resolvedAuth = resolveHostAuth({ host, keys, identities });
+    const sessionId = connectToHost(host);
     addConnectionLog({
+      sessionId,
       hostId: host.id,
       hostLabel: host.label,
       hostname: host.hostname,
@@ -815,14 +969,15 @@ function App({ settings }: { settings: SettingsState }) {
       localHostname: localHost,
       saved: false,
     });
-    connectToHost(host);
   }, [addConnectionLog, connectToHost, identities, keys]);
 
   // Wrapper to create serial session with logging
   const handleConnectSerial = useCallback((config: SerialConfig) => {
     const { 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,
@@ -833,32 +988,23 @@ function App({ settings }: { settings: SettingsState }) {
       localHostname: hostname,
       saved: false,
     });
-    createSerialSession(config);
   }, [addConnectionLog, createSerialSession]);
 
   // Handle terminal data capture when session exits
   const handleTerminalDataCapture = useCallback((sessionId: string, data: string) => {
     if (IS_DEV) console.log('[handleTerminalDataCapture] Called', { sessionId, dataLength: data.length });
-    // Find the connection log for this session
     const session = sessions.find(s => s.id === sessionId);
     if (IS_DEV) console.log('[handleTerminalDataCapture] Session', session);
-    if (!session) {
-      if (IS_DEV) console.log('[handleTerminalDataCapture] No session found');
-      return;
-    }
+    if (IS_DEV) console.log('[handleTerminalDataCapture] All logs:', connectionLogs.map(l => ({ id: l.id, sessionId: l.sessionId, hostname: l.hostname, endTime: l.endTime, hasTerminalData: !!l.terminalData })));
 
-    if (IS_DEV) console.log('[handleTerminalDataCapture] Looking for logs with hostname:', session.hostname);
-    if (IS_DEV) console.log('[handleTerminalDataCapture] All logs:', connectionLogs.map(l => ({ id: l.id, hostname: l.hostname, endTime: l.endTime, hasTerminalData: !!l.terminalData })));
-
-    // Find the most recent log matching this session's hostname and doesn't have terminalData yet
-    // For local terminal, hostname is 'localhost'
-    // Sort by startTime descending to find the most recent matching log
+    // Prefer the persisted sessionId because the session may already have been
+    // removed from state by the time the terminal unmount cleanup runs.
     const matchingLog = connectionLogs
-      .filter(log =>
-        log.hostname === session.hostname &&
-        !log.endTime &&
-        !log.terminalData
-      )
+      .filter((log) => {
+        if (log.endTime || log.terminalData) return false;
+        if (log.sessionId) return log.sessionId === sessionId;
+        return !!session && log.hostname === session.hostname;
+      })
       .sort((a, b) => b.startTime - a.startTime)[0];
 
     if (IS_DEV) console.log('[handleTerminalDataCapture] Matching log', matchingLog);
@@ -938,14 +1084,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 () => {
@@ -954,14 +1101,66 @@ 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}
         sessions={sessions}
         orphanSessions={orphanSessions}
         workspaces={workspaces}
@@ -998,6 +1197,8 @@ function App({ settings }: { settings: SettingsState }) {
             connectionLogs={connectionLogs}
             managedSources={managedSources}
             sessions={sessions}
+            hotkeyScheme={hotkeyScheme}
+            keyBindings={keyBindings}
             onOpenSettings={handleOpenSettings}
             onOpenQuickSwitcher={handleOpenQuickSwitcher}
             onCreateLocalTerminal={handleCreateLocalTerminal}
@@ -1026,7 +1227,7 @@ 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}

README.ja-JP.md

@@ -11,13 +11,13 @@
 
 <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>
@@ -40,22 +40,20 @@
 
 ---
 
-[![Netcatty メインインターフェース](screenshots/vault_grid_view.png)](screenshots/vault_grid_view.png)
+[![Netcatty メインインターフェース](screenshots/main-window-dark.png)](screenshots/main-window-dark.png)
 
 ---
 
 # 目次 <!-- omit in toc -->
 
 - [Netcatty とは](#netcatty-とは)
+- [なぜ Netcatty](#なぜ-netcatty)
 - [機能](#機能)
+- [デモ](#デモ)
 - [スクリーンショット](#スクリーンショット)
-  - [ホスト管理](#ホスト管理)
-  - [ターミナル](#ターミナル)
-  - [SFTP](#sftp)
-  - [キーチェーン](#キーチェーン)
-  - [ポートフォワーディング](#ポートフォワーディング)
-  - [クラウド同期](#クラウド同期)
-  - [テーマとカスタマイズ](#テーマとカスタマイズ)
+  - [メインウィンドウ](#メインウィンドウ)
+  - [Vault ビュー](#vault-ビュー)
+  - [分割ターミナル](#分割ターミナル)
 - [対応ディストリビューション](#対応ディストリビューション)
 - [はじめに](#はじめに)
 - [ビルドとパッケージ](#ビルドとパッケージ)
@@ -71,190 +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
-- **デュアルペインファイルブラウザ** — ローカル ↔ リモート または リモート ↔ リモート
-- **Sudo 特権昇格** — sudo を使用して root 権限のファイルを閲覧および編集
-- **ドラッグ＆ドロップ** アップロードおよびダウンロード
-- **ドラッグ＆ドロップ**ファイル転送
-- **キュー管理**でバッチ転送
-- **進捗追跡**、転送速度表示
+### 🎨 パーソナライズ
+- **カスタムテーマ** — 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/vault_grid_view.png)
+![メインウィンドウ（ライト）](screenshots/main-window-light.png)
 
-**ネストされたフォルダと整理**
+<a name="vault-ビュー"></a>
+## Vault ビュー
 
-![ネストされたフォルダ](screenshots/nested_folder_structure.png)
+作業に合わせて見え方を切り替え：グリッドで全体像、リストでスキャン、ツリーで整理と階層ナビゲーション。
 
-**リストビュー**
+![Vault グリッドビュー](screenshots/vault_grid_view.png)
 
-![リストビュー](screenshots/vault_list_view.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/broadcast_mode.png)
-
-**パフォーマンス情報とカスタマイズ**
-
-接続の健全性を監視し、ターミナルのあらゆる側面をカスタマイズします。
-
-![ターミナルパフォーマンス](screenshots/terminal_performance.png)
-
-<a name="sftp"></a>
-## SFTP
-
-デュアルペイン SFTP ブラウザは、ローカルからリモート、リモートからリモートへのファイル転送をサポート。シングルクリックでディレクトリを移動、ペイン間でファイルをドラッグ＆ドロップ、転送進捗をリアルタイムで監視。インターフェースにはファイル権限、サイズ、変更日時を表示。複数の転送をキューに入れ、詳細な速度と進捗インジケーターで完了を確認。コンテキストメニューから名前変更、削除、ダウンロード、アップロード操作にすばやくアクセス。
-
-![SFTP デュアルペイン](screenshots/sftp_dual_pane.png)
-
-**転送キュー**
-
-![転送キュー](screenshots/sftp_transfer_queue.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)
-
-**キー生成**
-
-![キー生成](screenshots/key_generator_ui.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)
+![分割ウィンドウ](screenshots/split-window.png)
 
 ---
 
 <a name="対応ディストリビューション"></a>
 # 対応ディストリビューション
 
-Netcatty は接続したホストの OS アイコンを自動的に検出・表示します：
+Netcatty は接続したホストの OS を検出し、ホスト一覧でアイコンとして表示します：
 
 <p align="center">
   <img src="public/distro/ubuntu.svg" width="48" alt="Ubuntu" title="Ubuntu">
@@ -288,11 +215,7 @@ Netcatty は接続したホストの OS アイコンを自動的に検出・表
 
 または [GitHub Releases](https://github.com/binaricat/Netcatty/releases) ですべてのリリースを参照してください。
 
-> **⚠️ macOS ユーザーへ：** アプリはコード署名されていないため、macOS Gatekeeper によってブロックされます。ダウンロード後、以下のコマンドを実行して隔離属性を削除してください：
-> ```bash
-> xattr -cr /Applications/Netcatty.app
-> ```
-> または、アプリを右クリック → 開く → ダイアログで「開く」をクリックしてください。
+> **macOS ユーザーへ：** 現在のリリースはコード署名と notarization が行われている想定です。Gatekeeper の警告が出る場合は、GitHub Releases から最新版の公式ビルドを取得しているか確認してください。
 
 ### 前提条件
 - Node.js 18+ と npm
@@ -346,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)
 ```
 
 ---
@@ -356,7 +279,7 @@ npm run pack:linux   # Linux (AppImage, deb, rpm)
 
 | カテゴリ | テクノロジー |
 |--------|------------|
-| フレームワーク | Electron 39 |
+| フレームワーク | Electron 40 |
 | フロントエンド | React 19, TypeScript |
 | ビルドツール | Vite 7 |
 | ターミナル | xterm.js 5 |
@@ -382,17 +305,6 @@ npm run pack:linux   # Linux (AppImage, deb, rpm)
 
 ---
 
-<a name="コントリビューター"></a>
-# コントリビューター
-
-貢献してくれたすべての人々に感謝します！
-
-<a href="https://github.com/binaricat/Netcatty/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=binaricat/Netcatty" alt="contributors" />
-</a>
-
----
-
 <a name="ライセンス"></a>
 # ライセンス
 

README.md

@@ -11,7 +11,7 @@
 
 <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">
@@ -40,22 +40,20 @@
 
 ---
 
-[![Netcatty Main Interface](screenshots/vault_grid_view.png)](screenshots/vault_grid_view.png)
+[![Netcatty Main Interface](screenshots/main-window-dark.png)](screenshots/main-window-dark.png)
 
 ---
 
 # 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)
@@ -73,180 +71,111 @@
 - **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
-- **Sudo Privilege Escalation** — Browse and edit root-owned files with sudo
-- **Drag & Drop** uploads and downloads
-- **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)
 
-![Host Management](screenshots/vault_grid_view.png)
+![Main Window (Light)](screenshots/main-window-light.png)
 
-**Nested Folders & Organization**
+<a name="vault-views"></a>
+## Vault Views
 
-![Nested Folders](screenshots/nested_folder_structure.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/vault_list_view.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
 
-**Broadcast Mode**
+Split panes help you monitor multiple servers/services at the same time (deploy + logs + metrics) without juggling windows.
 
-Type once, execute everywhere. Great for maintaining multiple servers simultaneously.
-
-![Broadcast Mode](screenshots/broadcast_mode.png)
-
-**Performance Info & Customization**
-
-Monitor your connection health and customize every aspect of your terminal.
-
-![Terminal Performance](screenshots/terminal_performance.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 Dual Pane](screenshots/sftp_dual_pane.png)
-
-**Transfer Queue**
-
-![Transfer Queue](screenshots/sftp_transfer_queue.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)
-
-**Key Generator**
-
-![Key Generator](screenshots/key_generator_ui.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)
+![Split Windows](screenshots/split-window.png)
 
 ---
 
@@ -270,8 +199,6 @@ 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
 
@@ -287,11 +214,7 @@ Download the latest release for your platform from [GitHub Releases](https://git
 
 Or browse all releases at [GitHub Releases](https://github.com/binaricat/Netcatty/releases).
 
-> **⚠️ macOS Users:** Since the app is not code-signed, macOS Gatekeeper will block it. After downloading, run this command to remove the quarantine attribute:
-> ```bash
-> xattr -cr /Applications/Netcatty.app
-> ```
-> Or right-click the app → Open → Click "Open" in the dialog.
+> **macOS Users:** Current releases are expected to be code-signed and notarized. If Gatekeeper still warns, make sure you downloaded the latest official build from GitHub Releases.
 
 ### Prerequisites
 - Node.js 18+ and npm
@@ -355,7 +278,7 @@ npm run pack:linux   # Linux (AppImage + DEB + RPM)
 
 | Category | Technology |
 |----------|------------|
-| Framework | Electron 39 |
+| Framework | Electron 40 |
 | Frontend | React 19, TypeScript |
 | Build Tool | Vite 7 |
 | Terminal | xterm.js 5 |
@@ -386,9 +309,7 @@ See [agents.md](agents.md) for architecture overview and coding conventions.
 
 Thanks to all the people who contribute!
 
-<a href="https://github.com/binaricat/Netcatty/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=binaricat/Netcatty" alt="contributors" />
-</a>
+See: https://github.com/binaricat/Netcatty/graphs/contributors
 
 ---
 

README.zh-CN.md

@@ -11,13 +11,13 @@
 
 <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>
@@ -40,22 +40,20 @@
 
 ---
 
-[![Netcatty 主界面](screenshots/vault_grid_view.png)](screenshots/vault_grid_view.png)
+[![Netcatty 主界面](screenshots/main-window-dark.png)](screenshots/main-window-dark.png)
 
 ---
 
 # 目录 <!-- omit in toc -->
 
 - [Netcatty 是什么](#netcatty-是什么)
+- [为什么是 Netcatty](#为什么是-netcatty)
 - [功能特性](#功能特性)
+- [演示](#演示)
 - [界面截图](#界面截图)
-  - [主机管理](#主机管理)
-  - [终端](#终端)
-  - [SFTP](#sftp)
-  - [密钥管理](#密钥管理)
-  - [端口转发](#端口转发)
-  - [云同步](#云同步)
-  - [主题与定制](#主题与定制)
+  - [主界面](#主界面)
+  - [Vault 视图](#vault-视图)
+  - [分屏终端](#分屏终端)
 - [支持的发行版](#支持的发行版)
 - [快速开始](#快速开始)
 - [构建与打包](#构建与打包)
@@ -73,188 +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
-- **双窗格文件浏览器** —— 本地 ↔ 远程 或 远程 ↔ 远程
-- **Sudo 提权支持** —— 使用 sudo 浏览和编辑 root 权限文件
-- **拖放操作** —— 支持上传和下载
-- **拖放传输** 文件
-- **队列管理** 批量传输
-- **进度跟踪** 显示传输速度
+### 📁 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/vault_grid_view.png)
+![主界面（浅色）](screenshots/main-window-light.png)
 
-**层级文件夹与分组**
+<a name="vault-视图"></a>
+## Vault 视图
 
-![层级文件夹](screenshots/nested_folder_structure.png)
+用更适合当前任务的方式管理与浏览主机：网格看全局，列表做筛选，树形做整理与层级导航。
 
-**列表视图**
+![Vault 网格视图](screenshots/vault_grid_view.png)
 
-![列表视图](screenshots/vault_list_view.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/broadcast_mode.png)
-
-**性能信息与定制**
-
-监控连接健康状况，并自定义终端的方方面面。
-
-![终端性能](screenshots/terminal_performance.png)
-
-<a name="sftp"></a>
-## SFTP
-
-双窗格 SFTP 浏览器支持本地到远程和远程到远程的文件传输。单击导航目录，在窗格之间拖放文件，实时监控传输进度。界面显示文件权限、大小和修改日期。批量传输队列管理，详细的速度和进度指示器。右键菜单快速访问重命名、删除、下载和上传操作。
-
-![SFTP 双窗格](screenshots/sftp_dual_pane.png)
-
-**传输队列**
-
-![传输队列](screenshots/sftp_transfer_queue.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)
-
-**密钥生成器**
-
-![密钥生成器](screenshots/key_generator_ui.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)
+![分屏窗口](screenshots/split-window.png)
 
 ---
 
 <a name="支持的发行版"></a>
 # 支持的发行版
 
-Netcatty 自动检测并显示已连接主机的操作系统图标：
+Netcatty 会自动识别并在主机列表中展示对应的系统图标：
 
 <p align="center">
   <img src="public/distro/ubuntu.svg" width="48" alt="Ubuntu" title="Ubuntu">
@@ -271,8 +199,6 @@ Netcatty 自动检测并显示已连接主机的操作系统图标：
   <img src="public/distro/kali.svg" width="48" alt="Kali Linux" title="Kali Linux">
 </p>
 
----
-
 <a name="快速开始"></a>
 # 快速开始
 
@@ -288,11 +214,7 @@ Netcatty 自动检测并显示已连接主机的操作系统图标：
 
 或在 [GitHub Releases](https://github.com/binaricat/Netcatty/releases) 浏览所有版本。
 
-> **⚠️ macOS 用户注意：** 由于应用未经代码签名，macOS Gatekeeper 会阻止运行。下载后，请在终端运行以下命令移除隔离属性：
-> ```bash
-> xattr -cr /Applications/Netcatty.app
-> ```
-> 或者右键点击应用 → 打开 → 在弹出的对话框中点击"打开"。
+> **macOS 用户注意：** 当前发布版本应已完成代码签名和公证。如果 Gatekeeper 仍然提示风险，请确认您下载的是 GitHub Releases 中的最新官方构建。
 
 ### 前置条件
 - Node.js 18+ 和 npm
@@ -356,7 +278,7 @@ npm run pack:linux   # Linux (AppImage, deb, rpm)
 
 | 分类 | 技术 |
 |-----|-----|
-| 框架 | Electron 39 |
+| 框架 | Electron 40 |
 | 前端 | React 19, TypeScript |
 | 构建工具 | Vite 7 |
 | 终端 | xterm.js 5 |
@@ -387,9 +309,7 @@ npm run pack:linux   # Linux (AppImage, deb, rpm)
 
 感谢所有参与贡献的人！
 
-<a href="https://github.com/binaricat/Netcatty/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=binaricat/Netcatty" alt="contributors" />
-</a>
+查看：https://github.com/binaricat/Netcatty/graphs/contributors
 
 ---
 

application/i18n/locales/en.ts

@@ -14,6 +14,7 @@ const en: Messages = {
   'common.import': 'Import',
   'common.generate': 'Generate',
   'common.delete': 'Delete',
+  'common.edit': 'Edit',
   'common.clear': 'Clear',
   'common.optional': 'Optional',
   'common.selectPlaceholder': 'Select...',
@@ -57,6 +58,9 @@ const en: Messages = {
   'placeholder.sessionName': 'Session name',
   'placeholder.searchHosts': 'Search hosts...',
   'toast.settingsUnavailable': 'Settings window is unavailable on this platform.',
+  'credentials.protectionUnavailable.title': 'Credential Protection Unavailable',
+  'credentials.protectionUnavailable.message': 'Saved passwords and keys cannot be auto-decrypted on this device. Re-enter credentials before connecting.',
+  'credentials.protectionUnavailable.action': 'Open Settings',
 
   // Settings shell
   'settings.title': 'Settings',
@@ -80,6 +84,31 @@ const en: Messages = {
   'settings.system.clearing': 'Clearing...',
   'settings.system.clearResult': 'Deleted {deleted} file(s), {failed} failed.',
   'settings.system.tempDirectoryHint': 'Temporary files are created when opening remote files with external applications. They are automatically cleaned up when SFTP sessions close.',
+  'settings.system.credentials.title': 'Credential Protection',
+  'settings.system.credentials.status': 'Status',
+  'settings.system.credentials.checking': 'Checking...',
+  'settings.system.credentials.available': 'Available (OS keychain ready)',
+  'settings.system.credentials.unavailable': 'Unavailable (cannot decrypt saved credentials)',
+  'settings.system.credentials.unknown': 'Unknown (not supported in this environment)',
+  'settings.system.credentials.unavailableHint': 'Credentials encrypted on another user profile or machine cannot be decrypted here. Re-enter and save credentials on this device.',
+  'settings.system.credentials.portabilityHint': 'Cloud Sync is portable because it uses your master key encryption. Local safeStorage encryption is device/user scoped.',
+
+  // Settings > System > Software Update
+  'settings.update.title': 'Software Update',
+  'settings.update.currentVersion': 'Current version',
+  'settings.update.checkForUpdates': 'Check for Updates',
+  'settings.update.checking': 'Checking...',
+  'settings.update.upToDate': 'You are using the latest version.',
+  'settings.update.available': 'New version {version} is available.',
+  'settings.update.download': 'Download Update',
+  'settings.update.downloading': 'Downloading... {percent}%',
+  'settings.update.readyToInstall': 'Update downloaded and ready to install.',
+  'settings.update.restartNow': 'Restart to Update',
+  'settings.update.error': 'Failed to check for updates.',
+  'settings.update.downloadError': 'Download failed.',
+  'settings.update.manualDownload': 'Download from GitHub',
+  'settings.update.manualDownloadHint': 'Auto-update is not available on this platform. Download the latest version from GitHub.',
+  'settings.update.hint': 'Netcatty checks for updates from GitHub Releases.',
 
   // Settings > Session Logs
   'settings.sessionLogs.title': 'Session Logs',
@@ -99,6 +128,35 @@ const en: Messages = {
   'settings.sessionLogs.formatHtml': 'HTML (.html)',
   'settings.sessionLogs.hint': 'Session logs capture all terminal output for troubleshooting and auditing purposes.',
 
+  // Settings > Global Hotkey (Quake Mode)
+  'settings.globalHotkey.title': 'Global Hotkey',
+  'settings.globalHotkey.toggleWindow': 'Toggle Window',
+  'settings.globalHotkey.toggleWindowDesc': 'Press a key combination to set a global shortcut for showing/hiding the window.',
+  'settings.globalHotkey.notSet': 'Not set',
+  'settings.globalHotkey.reset': 'Reset to default',
+  'settings.globalHotkey.closeToTray': 'Close to System Tray',
+  'settings.globalHotkey.closeToTrayDesc': 'When enabled, closing the window will minimize to the system tray instead of quitting.',
+  'settings.globalHotkey.hint': 'Global hotkey works system-wide to quickly show or hide the window (Quake-style terminal).',
+
+  // Tray Panel
+  'tray.openMainWindow': 'Open Main Window',
+  'tray.sessions': 'Sessions',
+  'tray.portForwarding': 'Port Forwarding',
+  'tray.status.connected': 'Connected',
+  'tray.status.connecting': 'Connecting',
+  'tray.status.disconnected': 'Disconnected',
+  'tray.status.active': 'Active',
+  'tray.status.inactive': 'Inactive',
+  'tray.status.error': 'Error',
+  'tray.recentHosts': 'Recent Hosts',
+  'tray.empty.title': 'Nothing here yet',
+  'tray.empty.subtitle': 'Go connect to a server, they miss you 🚀',
+  'tray.quit': 'Quit Netcatty',
+
+  // Vault Sidebar
+  'vault.sidebar.collapse': 'Collapse sidebar',
+  'vault.sidebar.expand': 'Expand sidebar',
+
   // Settings > Application
   'settings.application.checkUpdates': 'Check for updates',
   'settings.application.reportProblem': 'Report a problem',
@@ -118,13 +176,17 @@ const en: Messages = {
   'update.upToDate.message': 'You are running the latest version ({version}).',
   'update.error': 'Failed to check for updates',
   'update.downloadNow': 'Download Now',
+  'update.viewInSettings': 'View in Settings',
   'update.remindLater': 'Remind Later',
   'update.skipVersion': 'Skip This Version',
 
   // Settings > Appearance
   'settings.appearance.uiTheme': 'UI Theme',
-  'settings.appearance.darkMode': 'Dark Mode',
-  'settings.appearance.darkMode.desc': 'Toggle between light and dark theme',
+  'settings.appearance.theme': 'Theme',
+  'settings.appearance.theme.desc': 'Choose light, dark, or follow system preference',
+  'settings.appearance.theme.light': 'Light',
+  'settings.appearance.theme.dark': 'Dark',
+  'settings.appearance.theme.system': 'System',
   'settings.appearance.accentColor': 'Accent Color',
   'settings.appearance.customColor': 'Custom color',
   'settings.appearance.accentColor.mode': 'Use custom accent',
@@ -185,10 +247,13 @@ const en: Messages = {
   'settings.terminal.behavior.rightClick.paste': 'Paste',
   'settings.terminal.behavior.rightClick.selectWord': 'Select word',
   'settings.terminal.behavior.copyOnSelect': 'Copy on select',
-  'settings.terminal.behavior.copyOnSelect.desc': 'Automatically copy selected text',
+  'settings.terminal.behavior.copyOnSelect.desc': 'Automatically copy selected text. In tmux/vim with mouse mode, hold Shift to select',
   'settings.terminal.behavior.middleClickPaste': 'Middle-click paste',
   'settings.terminal.behavior.middleClickPaste.desc':
     'Paste clipboard content on middle-click',
+  'settings.terminal.behavior.bracketedPaste': 'Bracketed paste mode',
+  'settings.terminal.behavior.bracketedPaste.desc':
+    'Wrap pasted text with escape sequences so the shell can distinguish paste from typed input. Disable if you see ^[[200~ artifacts.',
   'settings.terminal.behavior.scrollOnInput': 'Scroll on input',
   'settings.terminal.behavior.scrollOnInput.desc': 'Scroll terminal to bottom when typing',
   'settings.terminal.behavior.scrollOnOutput': 'Scroll on output',
@@ -253,6 +318,7 @@ const en: Messages = {
   'settings.shortcuts.category.terminal': 'Terminal',
   'settings.shortcuts.category.navigation': 'Navigation',
   'settings.shortcuts.category.app': 'App',
+  'settings.shortcuts.category.sftp': 'SFTP',
 
   // Context menus / common actions
   'action.newHost': 'New Host',
@@ -294,6 +360,7 @@ const en: Messages = {
   'sync.autoSync.vaultLocked': 'Vault is locked. Open Settings → Sync & Cloud to unlock.',
   'sync.autoSync.conflictDetected': 'Sync conflict detected. Open Settings → Sync & Cloud to resolve.',
   'sync.autoSync.syncFailed': 'Sync failed',
+  'sync.credentialsUnavailable': 'This device cannot decrypt some saved credentials. Re-enter credentials locally before syncing.',
   'time.never': 'Never',
   'time.justNow': 'Just now',
   'time.minutesAgo': '{minutes}m ago',
@@ -360,6 +427,8 @@ const en: Messages = {
   'vault.hosts.deselectAll': 'Deselect All',
   'vault.hosts.deleteSelected': 'Delete ({count})',
   'vault.hosts.deleteMultiple.success': 'Deleted {count} hosts',
+  'vault.hosts.empty.title': 'Set up your hosts',
+  'vault.hosts.empty.desc': 'Save hosts to quickly connect to your servers, VMs, and containers.',
 
   // Vault import
   'vault.import.title': 'Add data to your vault',
@@ -463,6 +532,13 @@ const en: Messages = {
   'pf.view.list': 'List',
   'pf.rule.summary.dynamic': 'SOCKS on {bindAddress}:{localPort}',
   'pf.rule.summary.default': '{bindAddress}:{localPort} -> {remoteHost}:{remotePort}',
+  'pf.tooltip.relayHost': 'Relay Host',
+  'pf.tooltip.hostLabel': 'Host',
+  'pf.tooltip.hostAddress': 'Address',
+  'pf.tooltip.noHost': 'No relay host configured',
+  'pf.tooltip.localDesc': 'Local port forwarding: Access remote services through SSH tunnel',
+  'pf.tooltip.remoteDesc': 'Remote port forwarding: Expose local services to remote host',
+  'pf.tooltip.dynamicDesc': 'Dynamic SOCKS proxy: Route traffic through SSH tunnel',
   'pf.deleteActive.title': 'Delete Active Port Forwarding?',
   'pf.deleteActive.desc': 'This port forwarding rule "{label}" is currently active. Deleting it will stop the tunnel first.',
   'pf.deleteActive.confirm': 'Stop and Delete',
@@ -474,6 +550,9 @@ const en: Messages = {
   'sftp.newFile': 'New File',
   'sftp.filter': 'Filter',
   'sftp.filter.placeholder': 'Filter by filename...',
+  'sftp.bookmark.add': 'Bookmark this path',
+  'sftp.bookmark.remove': 'Remove bookmark',
+  'sftp.bookmark.empty': 'No bookmarks yet',
   'sftp.columns.name': 'Name',
   'sftp.columns.modified': 'Modified',
   'sftp.columns.size': 'Size',
@@ -665,9 +744,9 @@ const en: Messages = {
 
   // Settings > SFTP Show Hidden Files
   'settings.sftp.showHiddenFiles': 'Show hidden files',
-  'settings.sftp.showHiddenFiles.desc': 'Display files with the Windows hidden attribute in the SFTP file browser when browsing local Windows filesystem.',
+  'settings.sftp.showHiddenFiles.desc': 'Display hidden files (dotfiles on Unix/macOS and files with the hidden attribute on Windows) in the SFTP file browser.',
   'settings.sftp.showHiddenFiles.enable': 'Show hidden files',
-  'settings.sftp.showHiddenFiles.enableDesc': 'Display Windows hidden files when browsing local filesystem',
+  'settings.sftp.showHiddenFiles.enableDesc': 'Display hidden files when browsing both local and remote filesystems',
 
   // Settings > SFTP Compressed Upload
   'settings.sftp.compressedUpload': 'Folder Compression Transfer',
@@ -677,9 +756,6 @@ const en: Messages = {
 
   // Quick Switcher
   'qs.search.placeholder': 'Search hosts or tabs',
-  'qs.recentConnections': 'Recent connections',
-  'qs.createWorkspace': 'Create a workspace',
-  'qs.restore': 'Restore',
   'qs.jumpTo': 'Jump To',
   'qs.localTerminal': 'Local Terminal',
 
@@ -745,6 +821,10 @@ const en: Messages = {
   'hostDetails.agentForwarding.agentNotRunning': 'SSH Agent is not running',
   'hostDetails.agentForwarding.agentNotRunningHint': 'Enable OpenSSH Authentication Agent service in Windows Services (services.msc) for agent forwarding to work.',
   'hostDetails.section.agentForwarding': 'SSH Agent',
+  'hostDetails.section.legacyAlgorithms': 'Legacy Algorithms',
+  'hostDetails.legacyAlgorithms': 'Allow Legacy Algorithms',
+  'hostDetails.legacyAlgorithms.desc': 'Enable deprecated SSH algorithms (diffie-hellman-group1, ssh-dss, 3des-cbc, etc.) for connecting to older network equipment.',
+  'hostDetails.legacyAlgorithms.warning': 'These algorithms have known security weaknesses. Only enable for legacy devices that do not support modern cryptography.',
   'hostDetails.jumpHosts': 'Proxy via Hosts',
   'hostDetails.jumpHosts.hops': '{count} hop(s)',
   'hostDetails.jumpHosts.direct': 'Direct',
@@ -860,9 +940,26 @@ const en: Messages = {
   'terminal.toolbar.broadcast': 'Broadcast',
   'terminal.toolbar.broadcastEnable': 'Enable Broadcast Mode',
   'terminal.toolbar.broadcastDisable': 'Disable Broadcast Mode',
+  'terminal.toolbar.composeBar': 'Compose Bar',
+  'terminal.composeBar.placeholder': 'Type command here, press Enter to send...',
+  'terminal.composeBar.send': 'Send',
+  'terminal.composeBar.close': 'Close compose bar',
+  'terminal.composeBar.broadcasting': 'Broadcasting to all sessions',
   'terminal.toolbar.focus': 'Focus',
   'terminal.toolbar.focusMode': 'Focus Mode',
+  'terminal.toolbar.encoding': 'Terminal Encoding',
+  'terminal.toolbar.encoding.utf8': 'UTF-8',
+  'terminal.toolbar.encoding.gb18030': 'GB18030',
   'terminal.toolbar.closeSession': 'Close session',
+  'terminal.toolbar.hostHighlight.title': 'Host Keyword Highlighting',
+  'terminal.toolbar.hostHighlight.noRules': 'No custom highlight rules defined for this host',
+  'terminal.toolbar.hostHighlight.addRule': 'Add New Rule',
+  'terminal.toolbar.hostHighlight.labelPlaceholder': 'Label (e.g., Error)',
+  'terminal.toolbar.hostHighlight.patternPlaceholder': 'Regex pattern (e.g., \\bfailed\\b)',
+  'terminal.toolbar.hostHighlight.invalidPattern': 'Invalid regex pattern',
+  'terminal.toolbar.hostHighlight.clearAll': 'Clear All',
+  'terminal.toolbar.hostHighlight.changeColor': 'Change highlight color for',
+  'terminal.toolbar.hostHighlight.selectColor': 'Select color for new rule',
   'terminal.serverStats.cpu': 'CPU Usage',
   'terminal.serverStats.cpuCores': 'CPU Core Usage',
   'terminal.serverStats.memory': 'Memory Usage',
@@ -871,6 +968,10 @@ const en: Messages = {
   'terminal.serverStats.memBuffers': 'Buffers',
   'terminal.serverStats.memCached': 'Cache',
   'terminal.serverStats.memFree': 'Free',
+  'terminal.serverStats.swap': 'Swap',
+  'terminal.serverStats.swapUsed': 'Swap Used',
+  'terminal.serverStats.swapFree': 'Swap Free',
+  'terminal.serverStats.swapTotal': 'Total',
   'terminal.serverStats.topProcesses': 'Top Processes by Memory',
   'terminal.serverStats.disk': 'Disk Usage (Root)',
   'terminal.serverStats.diskDetails': 'Mounted Disks',
@@ -907,6 +1008,10 @@ const en: Messages = {
   'terminal.auth.selectKey': 'Select Key',
   'terminal.auth.noKeysHint': 'No keys available. Add keys in Keychain.',
   'terminal.auth.continueSave': 'Continue & Save',
+  'terminal.auth.credentialsUnavailable': 'Saved credentials cannot be decrypted on this device. Please re-enter and save them again.',
+  'terminal.auth.jumpCredentialsUnavailable': 'A jump host has saved credentials that cannot be decrypted on this device. Open host settings and re-enter them.',
+  'terminal.auth.proxyCredentialsUnavailable': 'Proxy credentials cannot be decrypted on this device. Open host settings and re-enter the proxy password.',
+  'terminal.auth.keyUnavailableFallbackPassword': 'Saved SSH key is unavailable on this device. Falling back to password authentication.',
   'terminal.progress.timeoutIn': 'Timeout in {seconds}s',
   'terminal.progress.disconnected': 'Disconnected',
   'terminal.progress.cancelling': 'Cancelling...',
@@ -922,10 +1027,50 @@ const en: Messages = {
   'terminal.themeModal.title': 'Terminal Appearance',
   'terminal.themeModal.tab.theme': 'Theme',
   'terminal.themeModal.tab.font': 'Font',
+  'terminal.themeModal.tab.custom': 'Custom',
   'terminal.themeModal.fontSize': 'Font Size',
   'terminal.themeModal.livePreview': 'Live Preview',
   'terminal.themeModal.themeType': '{type} theme',
 
+  // Custom Themes
+  'terminal.customTheme.section': 'Custom Themes',
+  'terminal.customTheme.yourThemes': 'Your Themes',
+  'terminal.customTheme.new': 'New Theme',
+  'terminal.customTheme.newDesc': 'Clone current theme and customize',
+  'terminal.customTheme.newTitle': 'New Custom Theme',
+  'terminal.customTheme.editTitle': 'Edit Theme',
+  'terminal.customTheme.import': 'Import .itermcolors',
+  'terminal.customTheme.importDesc': 'Import from iTerm2 color scheme file',
+  'terminal.customTheme.importError': 'Failed to parse the selected file. Please ensure it is a valid .itermcolors XML file.',
+  'terminal.customTheme.delete': 'Delete Theme',
+  'terminal.customTheme.confirmDelete': 'Confirm Delete',
+  'terminal.customTheme.name': 'Name',
+  'terminal.customTheme.namePlaceholder': 'My Custom Theme',
+  'terminal.customTheme.type': 'Type',
+  'terminal.customTheme.group.general': 'General',
+  'terminal.customTheme.group.normal': 'Normal Colors',
+  'terminal.customTheme.group.bright': 'Bright Colors',
+  'terminal.customTheme.color.background': 'Background',
+  'terminal.customTheme.color.foreground': 'Foreground',
+  'terminal.customTheme.color.cursor': 'Cursor',
+  'terminal.customTheme.color.selection': 'Selection',
+  'terminal.customTheme.color.black': 'Black',
+  'terminal.customTheme.color.red': 'Red',
+  'terminal.customTheme.color.green': 'Green',
+  'terminal.customTheme.color.yellow': 'Yellow',
+  'terminal.customTheme.color.blue': 'Blue',
+  'terminal.customTheme.color.magenta': 'Magenta',
+  'terminal.customTheme.color.cyan': 'Cyan',
+  'terminal.customTheme.color.white': 'White',
+  'terminal.customTheme.color.brightBlack': 'Bright Black',
+  'terminal.customTheme.color.brightRed': 'Bright Red',
+  'terminal.customTheme.color.brightGreen': 'Bright Green',
+  'terminal.customTheme.color.brightYellow': 'Bright Yellow',
+  'terminal.customTheme.color.brightBlue': 'Bright Blue',
+  'terminal.customTheme.color.brightMagenta': 'Bright Magenta',
+  'terminal.customTheme.color.brightCyan': 'Bright Cyan',
+  'terminal.customTheme.color.brightWhite': 'Bright White',
+
   // Cloud Sync Settings
   'cloudSync.gate.title': 'End-to-End Encrypted Sync',
   'cloudSync.gate.desc':
@@ -1240,6 +1385,15 @@ const en: Messages = {
   'snippets.renameDialog.error.duplicate': 'A package with this name already exists',
   'snippets.renameDialog.error.invalidChars': 'Package name can only contain letters, numbers, hyphens, and underscores',
 
+  // Snippet Shortkey
+  'snippets.field.shortkey': 'Keyboard Shortcut',
+  'snippets.shortkey.placeholder': 'Click to set shortcut',
+  'snippets.shortkey.recording': 'Press a key combination...',
+  'snippets.shortkey.hint': 'Press this shortcut in terminal to quickly send the command.',
+  'snippets.shortkey.clear': 'Clear shortcut',
+  'snippets.shortkey.error.systemConflict': 'This shortcut conflicts with a system shortcut',
+  'snippets.shortkey.error.snippetConflict': 'This shortcut is already used by snippet: {name}',
+
   // Serial Port
   'serial.button': 'Serial',
   'serial.modal.title': 'Connect to Serial Port',
@@ -1304,6 +1458,9 @@ const en: Messages = {
   'passphrase.unlock': 'Unlock',
   'passphrase.unlocking': 'Unlocking...',
   'passphrase.skip': 'Skip',
+
+  // Text Editor
+  'sftp.editor.wordWrap': 'Word Wrap',
 };
 
 export default en;

application/i18n/locales/zh-CN.ts

@@ -42,6 +42,9 @@ const zhCN: Messages = {
   'placeholder.workspaceName': '工作区名称',
   'placeholder.sessionName': '会话名称',
   'toast.settingsUnavailable': '当前平台无法打开设置窗口。',
+  'credentials.protectionUnavailable.title': '凭据保护不可用',
+  'credentials.protectionUnavailable.message': '当前设备无法自动解密已保存的密码和密钥。连接前请重新输入凭据。',
+  'credentials.protectionUnavailable.action': '打开设置',
 
   // Settings shell
   'settings.title': '设置',
@@ -65,6 +68,31 @@ const zhCN: Messages = {
   'settings.system.clearing': '清理中...',
   'settings.system.clearResult': '已删除 {deleted} 个文件，{failed} 个失败。',
   'settings.system.tempDirectoryHint': '临时文件在使用外部应用打开远程文件时创建。SFTP 会话关闭时会自动清理。',
+  'settings.system.credentials.title': '凭据保护',
+  'settings.system.credentials.status': '状态',
+  'settings.system.credentials.checking': '检查中...',
+  'settings.system.credentials.available': '可用（系统钥匙串正常）',
+  'settings.system.credentials.unavailable': '不可用（无法解密已保存凭据）',
+  'settings.system.credentials.unknown': '未知（当前环境不支持）',
+  'settings.system.credentials.unavailableHint': '在其他用户或机器上加密的凭据无法在此处解密。请在当前设备重新输入并保存凭据。',
+  'settings.system.credentials.portabilityHint': '云同步可跨设备，因为使用主密钥加密；本地 safeStorage 加密仅绑定当前系统用户/设备。',
+
+  // Settings > System > Software Update
+  'settings.update.title': '软件更新',
+  'settings.update.currentVersion': '当前版本',
+  'settings.update.checkForUpdates': '检查更新',
+  'settings.update.checking': '检查中...',
+  'settings.update.upToDate': '当前已是最新版本。',
+  'settings.update.available': '新版本 {version} 已发布。',
+  'settings.update.download': '下载更新',
+  'settings.update.downloading': '正在下载... {percent}%',
+  'settings.update.readyToInstall': '更新已下载，准备安装。',
+  'settings.update.restartNow': '重启并更新',
+  'settings.update.error': '检查更新失败。',
+  'settings.update.downloadError': '下载失败。',
+  'settings.update.manualDownload': '前往 GitHub 下载',
+  'settings.update.manualDownloadHint': '当前平台不支持自动更新，请前往 GitHub 下载最新版本。',
+  'settings.update.hint': 'Netcatty 从 GitHub Releases 检查更新。',
 
   // Settings > Session Logs
   'settings.sessionLogs.title': '会话日志',
@@ -84,6 +112,35 @@ const zhCN: Messages = {
   'settings.sessionLogs.formatHtml': 'HTML (.html)',
   'settings.sessionLogs.hint': '会话日志用于记录终端输出，便于故障排查和审计。',
 
+  // Settings > Global Hotkey (Quake Mode)
+  'settings.globalHotkey.title': '全局快捷键',
+  'settings.globalHotkey.toggleWindow': '切换窗口',
+  'settings.globalHotkey.toggleWindowDesc': '按下组合键以设置显示/隐藏窗口的全局快捷键。',
+  'settings.globalHotkey.notSet': '未设置',
+  'settings.globalHotkey.reset': '恢复默认',
+  'settings.globalHotkey.closeToTray': '关闭时最小化到托盘',
+  'settings.globalHotkey.closeToTrayDesc': '启用后，关闭窗口将最小化到系统托盘而不是退出程序。',
+  'settings.globalHotkey.hint': '全局快捷键在系统范围内工作，可快速显示或隐藏窗口（下拉式终端风格）。',
+
+  // Tray Panel
+  'tray.openMainWindow': '打开主窗口',
+  'tray.sessions': '会话',
+  'tray.portForwarding': '端口转发',
+  'tray.status.connected': '已连接',
+  'tray.status.connecting': '连接中',
+  'tray.status.disconnected': '已断开',
+  'tray.status.active': '已启用',
+  'tray.status.inactive': '未启用',
+  'tray.status.error': '错误',
+  'tray.recentHosts': '最近连接的主机',
+  'tray.empty.title': '一切都很安静',
+  'tray.empty.subtitle': '去连接个服务器吧，它们想念你了 🚀',
+  'tray.quit': '退出 Netcatty',
+
+  // Vault Sidebar
+  'vault.sidebar.collapse': '收起侧边栏',
+  'vault.sidebar.expand': '展开侧边栏',
+
   // Settings > Application
   'settings.application.checkUpdates': '检查更新',
   'settings.application.reportProblem': '反馈问题',
@@ -103,13 +160,17 @@ const zhCN: Messages = {
   'update.upToDate.message': '当前版本 ({version}) 已是最新。',
   'update.error': '检查更新失败',
   'update.downloadNow': '立即下载',
+  'update.viewInSettings': '在设置中查看',
   'update.remindLater': '稍后提醒',
   'update.skipVersion': '跳过此版本',
 
   // Settings > Appearance
   'settings.appearance.uiTheme': '界面主题',
-  'settings.appearance.darkMode': '深色模式',
-  'settings.appearance.darkMode.desc': '在浅色与深色主题之间切换',
+  'settings.appearance.theme': '主题',
+  'settings.appearance.theme.desc': '选择浅色、深色或跟随系统设置',
+  'settings.appearance.theme.light': '浅色',
+  'settings.appearance.theme.dark': '深色',
+  'settings.appearance.theme.system': '系统',
   'settings.appearance.accentColor': '强调色',
   'settings.appearance.customColor': '自定义颜色',
   'settings.appearance.accentColor.mode': '使用自定义强调色',
@@ -162,6 +223,7 @@ const zhCN: Messages = {
   'sync.autoSync.vaultLocked': 'Vault 处于锁定状态。请打开 设置 → Sync & Cloud 解锁。',
   'sync.autoSync.conflictDetected': '检测到同步冲突。请打开 设置 → Sync & Cloud 处理。',
   'sync.autoSync.syncFailed': '同步失败',
+  'sync.credentialsUnavailable': '当前设备无法解密部分已保存凭据。请先在本地重新输入凭据后再同步。',
   'time.never': '从未',
   'time.justNow': '刚刚',
   'time.minutesAgo': '{minutes} 分钟前',
@@ -228,6 +290,8 @@ const zhCN: Messages = {
   'vault.hosts.deselectAll': '取消全选',
   'vault.hosts.deleteSelected': '删除 ({count})',
   'vault.hosts.deleteMultiple.success': '已删除 {count} 个主机',
+  'vault.hosts.empty.title': '设置你的主机',
+  'vault.hosts.empty.desc': '保存主机以快速连接到你的服务器、虚拟机和容器。',
 
   // Vault import
   'vault.import.title': '添加数据到你的 Vault',
@@ -324,6 +388,9 @@ const zhCN: Messages = {
   'sftp.newFile': '新建文件',
   'sftp.filter': '筛选',
   'sftp.filter.placeholder': '按文件名筛选...',
+  'sftp.bookmark.add': '收藏此路径',
+  'sftp.bookmark.remove': '取消收藏',
+  'sftp.bookmark.empty': '暂无收藏路径',
   'sftp.columns.name': '名称',
   'sftp.columns.modified': '修改时间',
   'sftp.columns.size': '大小',
@@ -404,9 +471,6 @@ const zhCN: Messages = {
 
   // Quick Switcher
   'qs.search.placeholder': '搜索主机或标签页',
-  'qs.recentConnections': '最近连接',
-  'qs.createWorkspace': '创建工作区',
-  'qs.restore': '恢复',
   'qs.jumpTo': '跳转到',
   'qs.localTerminal': '本地终端',
 
@@ -468,6 +532,10 @@ const zhCN: Messages = {
   'hostDetails.agentForwarding.agentNotRunning': 'SSH Agent 未运行',
   'hostDetails.agentForwarding.agentNotRunningHint': '请在 Windows 服务管理器 (services.msc) 中启用 OpenSSH Authentication Agent 服务。',
   'hostDetails.section.agentForwarding': 'SSH 代理',
+  'hostDetails.section.legacyAlgorithms': '旧版算法',
+  'hostDetails.legacyAlgorithms': '允许旧版算法',
+  'hostDetails.legacyAlgorithms.desc': '启用已弃用的 SSH 算法（diffie-hellman-group1、ssh-dss、3des-cbc 等）以连接老旧网络设备。',
+  'hostDetails.legacyAlgorithms.warning': '这些算法存在已知安全漏洞，仅建议在老旧设备不支持现代加密时启用。',
   'hostDetails.jumpHosts': '通过主机代理',
   'hostDetails.jumpHosts.hops': '{count} 跳',
   'hostDetails.jumpHosts.direct': '直连',
@@ -554,9 +622,26 @@ const zhCN: Messages = {
   'terminal.toolbar.broadcast': '广播',
   'terminal.toolbar.broadcastEnable': '启用广播模式',
   'terminal.toolbar.broadcastDisable': '关闭广播模式',
+  'terminal.toolbar.composeBar': '撰写栏',
+  'terminal.composeBar.placeholder': '在此输入命令，按回车发送...',
+  'terminal.composeBar.send': '发送',
+  'terminal.composeBar.close': '关闭撰写栏',
+  'terminal.composeBar.broadcasting': '正在广播到所有会话',
   'terminal.toolbar.focus': '聚焦',
   'terminal.toolbar.focusMode': '聚焦模式',
+  'terminal.toolbar.encoding': '终端编码',
+  'terminal.toolbar.encoding.utf8': 'UTF-8',
+  'terminal.toolbar.encoding.gb18030': 'GB18030',
   'terminal.toolbar.closeSession': '关闭会话',
+  'terminal.toolbar.hostHighlight.title': '主机关键字高亮',
+  'terminal.toolbar.hostHighlight.noRules': '此主机未定义自定义高亮规则',
+  'terminal.toolbar.hostHighlight.addRule': '添加新规则',
+  'terminal.toolbar.hostHighlight.labelPlaceholder': '标签（例如：错误）',
+  'terminal.toolbar.hostHighlight.patternPlaceholder': '正则表达式（例如：\\bfailed\\b）',
+  'terminal.toolbar.hostHighlight.invalidPattern': '无效的正则表达式',
+  'terminal.toolbar.hostHighlight.clearAll': '清除全部',
+  'terminal.toolbar.hostHighlight.changeColor': '更改高亮颜色',
+  'terminal.toolbar.hostHighlight.selectColor': '选择新规则的颜色',
   'terminal.serverStats.cpu': 'CPU 使用率',
   'terminal.serverStats.cpuCores': 'CPU 核心使用率',
   'terminal.serverStats.memory': '内存使用',
@@ -565,6 +650,10 @@ const zhCN: Messages = {
   'terminal.serverStats.memBuffers': '缓冲区',
   'terminal.serverStats.memCached': '缓存',
   'terminal.serverStats.memFree': '空闲',
+  'terminal.serverStats.swap': '交换空间',
+  'terminal.serverStats.swapUsed': '已用交换',
+  'terminal.serverStats.swapFree': '空闲交换',
+  'terminal.serverStats.swapTotal': '总计',
   'terminal.serverStats.topProcesses': '内存占用前十进程',
   'terminal.serverStats.disk': '磁盘使用（根分区）',
   'terminal.serverStats.diskDetails': '已挂载磁盘',
@@ -601,6 +690,10 @@ const zhCN: Messages = {
   'terminal.auth.selectKey': '选择密钥',
   'terminal.auth.noKeysHint': '暂无密钥，请先在钥匙串中添加。',
   'terminal.auth.continueSave': '继续并保存',
+  'terminal.auth.credentialsUnavailable': '当前设备无法解密已保存凭据，请重新输入并再次保存。',
+  'terminal.auth.jumpCredentialsUnavailable': '某个跳板机的已保存凭据无法在当前设备解密，请到主机设置中重新填写。',
+  'terminal.auth.proxyCredentialsUnavailable': '代理凭据无法在当前设备解密，请到主机设置中重新填写代理密码。',
+  'terminal.auth.keyUnavailableFallbackPassword': '已保存 SSH 密钥在当前设备不可用，改用密码认证。',
   'terminal.connectionErrorTitle': '连接错误',
   'terminal.progress.timeoutIn': '将在 {seconds}s 后超时',
   'terminal.progress.disconnected': '已断开',
@@ -617,10 +710,50 @@ const zhCN: Messages = {
   'terminal.themeModal.title': 'Terminal 外观',
   'terminal.themeModal.tab.theme': '主题',
   'terminal.themeModal.tab.font': '字体',
+  'terminal.themeModal.tab.custom': '自定义',
   'terminal.themeModal.fontSize': '字体大小',
   'terminal.themeModal.livePreview': '实时预览',
   'terminal.themeModal.themeType': '{type} 主题',
-  // Cloud Sync Settings
+
+  // Custom Themes
+  'terminal.customTheme.section': '自定义主题',
+  'terminal.customTheme.yourThemes': '我的主题',
+  'terminal.customTheme.new': '新建主题',
+  'terminal.customTheme.newDesc': '克隆当前主题并自定义',
+  'terminal.customTheme.newTitle': '新建自定义主题',
+  'terminal.customTheme.editTitle': '编辑主题',
+  'terminal.customTheme.import': '导入 .itermcolors',
+  'terminal.customTheme.importDesc': '从 iTerm2 配色方案文件导入',
+  'terminal.customTheme.importError': '无法解析所选文件，请确保它是有效的 .itermcolors XML 文件。',
+  'terminal.customTheme.delete': '删除主题',
+  'terminal.customTheme.confirmDelete': '确认删除',
+  'terminal.customTheme.name': '名称',
+  'terminal.customTheme.namePlaceholder': '我的自定义主题',
+  'terminal.customTheme.type': '类型',
+  'terminal.customTheme.group.general': '通用',
+  'terminal.customTheme.group.normal': '标准色',
+  'terminal.customTheme.group.bright': '高亮色',
+  'terminal.customTheme.color.background': '背景',
+  'terminal.customTheme.color.foreground': '前景',
+  'terminal.customTheme.color.cursor': '光标',
+  'terminal.customTheme.color.selection': '选区',
+  'terminal.customTheme.color.black': '黑色',
+  'terminal.customTheme.color.red': '红色',
+  'terminal.customTheme.color.green': '绿色',
+  'terminal.customTheme.color.yellow': '黄色',
+  'terminal.customTheme.color.blue': '蓝色',
+  'terminal.customTheme.color.magenta': '品红',
+  'terminal.customTheme.color.cyan': '青色',
+  'terminal.customTheme.color.white': '白色',
+  'terminal.customTheme.color.brightBlack': '亮黑',
+  'terminal.customTheme.color.brightRed': '亮红',
+  'terminal.customTheme.color.brightGreen': '亮绿',
+  'terminal.customTheme.color.brightYellow': '亮黄',
+  'terminal.customTheme.color.brightBlue': '亮蓝',
+  'terminal.customTheme.color.brightMagenta': '亮品红',
+  'terminal.customTheme.color.brightCyan': '亮青色',
+  'terminal.customTheme.color.brightWhite': '亮白',
+
   'cloudSync.gate.title': '端到端加密同步',
   'cloudSync.gate.desc':
     '数据会在本地加密后再同步，云端不会看到明文。设置主密钥以启用安全同步。',
@@ -779,6 +912,7 @@ const zhCN: Messages = {
   'common.import': '导入',
   'common.generate': '生成',
   'common.delete': '删除',
+  'common.edit': '编辑',
   'common.clear': '清除',
   'common.optional': '可选',
   'common.selectPlaceholder': '请选择...',
@@ -807,6 +941,13 @@ const zhCN: Messages = {
   'pf.view.list': '列表',
   'pf.rule.summary.dynamic': 'SOCKS 监听于 {bindAddress}:{localPort}',
   'pf.rule.summary.default': '{bindAddress}:{localPort} -> {remoteHost}:{remotePort}',
+  'pf.tooltip.relayHost': '中转主机',
+  'pf.tooltip.hostLabel': '主机',
+  'pf.tooltip.hostAddress': '地址',
+  'pf.tooltip.noHost': '未配置中转主机',
+  'pf.tooltip.localDesc': '本地端口转发：通过 SSH 隧道访问远程服务',
+  'pf.tooltip.remoteDesc': '远程端口转发：将本地服务暴露给远程主机',
+  'pf.tooltip.dynamicDesc': '动态 SOCKS 代理：通过 SSH 隧道转发流量',
   'pf.deleteActive.title': '删除正在运行的端口转发？',
   'pf.deleteActive.desc': '端口转发规则 "{label}" 当前正在运行。删除前将先关闭转发连接。',
   'pf.deleteActive.confirm': '关闭并删除',
@@ -928,9 +1069,9 @@ const zhCN: Messages = {
 
   // Settings > SFTP Show Hidden Files
   'settings.sftp.showHiddenFiles': '显示隐藏文件',
-  'settings.sftp.showHiddenFiles.desc': '在浏览本地 Windows 文件系统时，显示具有 Windows 隐藏属性的文件。',
+  'settings.sftp.showHiddenFiles.desc': '在 SFTP 文件浏览器中显示隐藏文件（Unix/macOS 点文件和 Windows 隐藏属性文件）。',
   'settings.sftp.showHiddenFiles.enable': '显示隐藏文件',
-  'settings.sftp.showHiddenFiles.enableDesc': '浏览本地文件系统时显示 Windows 隐藏文件',
+  'settings.sftp.showHiddenFiles.enableDesc': '浏览本地和远程文件系统时显示隐藏文件',
 
   // Settings > SFTP Compressed Upload
   'settings.sftp.compressedUpload': '文件夹压缩传输',
@@ -977,9 +1118,12 @@ const zhCN: Messages = {
   'settings.terminal.behavior.rightClick.paste': '粘贴',
   'settings.terminal.behavior.rightClick.selectWord': '选择单词',
   'settings.terminal.behavior.copyOnSelect': '选择即复制',
-  'settings.terminal.behavior.copyOnSelect.desc': '自动复制选中的文本',
+  'settings.terminal.behavior.copyOnSelect.desc': '自动复制选中的文本。在 tmux/vim 鼠标模式下，按住 Shift 拖选即可选中文本',
   'settings.terminal.behavior.middleClickPaste': '中键粘贴',
   'settings.terminal.behavior.middleClickPaste.desc': '中键点击时粘贴剪贴板内容',
+  'settings.terminal.behavior.bracketedPaste': '括号粘贴模式',
+  'settings.terminal.behavior.bracketedPaste.desc':
+    '粘贴文本时使用转义序列包裹，以便终端区分粘贴和键入。如果出现 ^[[200~ 字样请关闭此选项。',
   'settings.terminal.behavior.scrollOnInput': '输入时自动滚动',
   'settings.terminal.behavior.scrollOnInput.desc': '输入时将终端滚动到底部',
   'settings.terminal.behavior.scrollOnOutput': '输出时自动滚动',
@@ -1041,6 +1185,36 @@ const zhCN: Messages = {
   'settings.shortcuts.category.terminal': '终端',
   'settings.shortcuts.category.navigation': '导航',
   'settings.shortcuts.category.app': '应用',
+  'settings.shortcuts.category.sftp': 'SFTP',
+  'settings.shortcuts.binding.switch-tab-1-9': '切换到标签页 [1...9]',
+  'settings.shortcuts.binding.next-tab': '下一个标签页',
+  'settings.shortcuts.binding.prev-tab': '上一个标签页',
+  'settings.shortcuts.binding.close-tab': '关闭标签页',
+  'settings.shortcuts.binding.new-tab': '新建本地标签页',
+  'settings.shortcuts.binding.copy': '从终端复制',
+  'settings.shortcuts.binding.paste': '粘贴到终端',
+  'settings.shortcuts.binding.select-all': '全选终端内容',
+  'settings.shortcuts.binding.clear-buffer': '清空终端缓冲区',
+  'settings.shortcuts.binding.search-terminal': '打开终端搜索',
+  'settings.shortcuts.binding.move-focus': '在分屏间移动焦点',
+  'settings.shortcuts.binding.split-horizontal': '水平分屏',
+  'settings.shortcuts.binding.split-vertical': '垂直分屏',
+  'settings.shortcuts.binding.open-hosts': '打开主机列表',
+  'settings.shortcuts.binding.open-local': '打开本地终端',
+  'settings.shortcuts.binding.open-sftp': '打开 SFTP',
+  'settings.shortcuts.binding.port-forwarding': '打开端口转发',
+  'settings.shortcuts.binding.command-palette': '打开命令面板',
+  'settings.shortcuts.binding.quick-switch': '快速切换',
+  'settings.shortcuts.binding.snippets': '打开代码片段',
+  'settings.shortcuts.binding.broadcast': '切换广播模式',
+  'settings.shortcuts.binding.sftp-copy': '复制文件',
+  'settings.shortcuts.binding.sftp-cut': '剪切文件',
+  'settings.shortcuts.binding.sftp-paste': '粘贴文件',
+  'settings.shortcuts.binding.sftp-select-all': '全选文件',
+  'settings.shortcuts.binding.sftp-rename': '重命名文件',
+  'settings.shortcuts.binding.sftp-delete': '删除文件',
+  'settings.shortcuts.binding.sftp-refresh': '刷新',
+  'settings.shortcuts.binding.sftp-new-folder': '新建文件夹',
 
   // Host Details (sub-panels)
   'hostDetails.proxyPanel.title': 'Proxy',
@@ -1226,6 +1400,15 @@ const zhCN: Messages = {
   'snippets.renameDialog.error.duplicate': '已存在同名的代码包',
   'snippets.renameDialog.error.invalidChars': '代码包名称只能包含字母、数字、连字符和下划线',
 
+  // Snippet Shortkey
+  'snippets.field.shortkey': '快捷键',
+  'snippets.shortkey.placeholder': '点击设置快捷键',
+  'snippets.shortkey.recording': '请按下快捷键组合...',
+  'snippets.shortkey.hint': '在终端中按下此快捷键可快速发送命令。',
+  'snippets.shortkey.clear': '清除快捷键',
+  'snippets.shortkey.error.systemConflict': '此快捷键与系统快捷键冲突',
+  'snippets.shortkey.error.snippetConflict': '此快捷键已被代码片段使用：{name}',
+
   // Serial Port
   'serial.button': '串口',
   'serial.modal.title': '连接串口',
@@ -1290,6 +1473,9 @@ const zhCN: Messages = {
   'passphrase.unlock': '解锁',
   'passphrase.unlocking': '解锁中...',
   'passphrase.skip': '跳过',
+
+  // Text Editor
+  'sftp.editor.wordWrap': '自动换行',
 };
 
 export default zhCN;

application/state/customThemeStore.ts

@@ -0,0 +1,175 @@
+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();
+    }
+
+    private 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.cachedAllThemes = null; // invalidate cache
+    };
+
+    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/sftp/errors.ts

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

application/state/sftp/types.ts

@@ -52,4 +52,5 @@ export interface FileWatchErrorEvent {
 export interface SftpStateOptions {
   onFileWatchSynced?: (event: FileWatchSyncedEvent) => void;
   onFileWatchError?: (event: FileWatchErrorEvent) => void;
+  useCompressedUpload?: boolean;
 }

application/state/sftp/useSftpExternalOperations.ts

@@ -20,8 +20,10 @@ interface UseSftpExternalOperationsParams {
   getActivePane: (side: "left" | "right") => SftpPane | null;
   refresh: (side: "left" | "right") => Promise<void>;
   sftpSessionsRef: React.MutableRefObject<Map<string, string>>;
+  useCompressedUpload?: boolean;
   addExternalUpload?: (task: TransferTask) => void;
   updateExternalUpload?: (taskId: string, updates: Partial<TransferTask>) => void;
+  isTransferCancelled?: (taskId: string) => boolean;
   dismissExternalUpload?: (taskId: string) => void;
 }
 
@@ -47,7 +49,16 @@ interface SftpExternalOperationsResult {
 export const useSftpExternalOperations = (
   params: UseSftpExternalOperationsParams
 ): SftpExternalOperationsResult => {
-  const { getActivePane, refresh, sftpSessionsRef, addExternalUpload, updateExternalUpload, dismissExternalUpload } = params;
+  const {
+    getActivePane,
+    refresh,
+    sftpSessionsRef,
+    useCompressedUpload = false,
+    addExternalUpload,
+    updateExternalUpload,
+    isTransferCancelled,
+    dismissExternalUpload,
+  } = params;
 
   // Upload controller for cancellation support
   const uploadControllerRef = useRef<UploadController | null>(null);
@@ -173,14 +184,113 @@ export const useSftpExternalOperations = (
         throw new Error("SFTP session not found");
       }
 
-      console.log("[SFTP] Downloading file to temp", { sftpId, remotePath, fileName });
-      const localTempPath = await bridge.downloadSftpToTemp(
-        sftpId,
-        remotePath,
-        fileName,
-        pane.filenameEncoding,
-      );
-      console.log("[SFTP] File downloaded to temp", { localTempPath });
+      let localTempPath: string;
+      let wasCancelled = false;
+      let externalTransferId: string | undefined;
+      const isLocalTempDownloadCancelled = () =>
+        !!externalTransferId && !!isTransferCancelled?.(externalTransferId);
+      const cleanupTempDownload = async (filePath: string) => {
+        if (!bridge.deleteTempFile) return;
+        try {
+          await bridge.deleteTempFile(filePath);
+        } catch (err) {
+          console.warn("[SFTP] Failed to delete cancelled temp download:", err);
+        }
+      };
+
+      if (bridge.downloadSftpToTempWithProgress && addExternalUpload && updateExternalUpload) {
+        externalTransferId = `download-temp-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+
+        addExternalUpload({
+          id: externalTransferId,
+          fileName,
+          sourcePath: remotePath,
+          targetPath: "(temp)",
+          sourceConnectionId: pane.connection.id,
+          targetConnectionId: "local",
+          direction: "download",
+          status: "transferring" as TransferStatus,
+          totalBytes: 0,
+          transferredBytes: 0,
+          speed: 0,
+          startTime: Date.now(),
+          isDirectory: false,
+          retryable: false,
+        });
+
+        try {
+          const result = await bridge.downloadSftpToTempWithProgress(
+            sftpId,
+            remotePath,
+            fileName,
+            pane.filenameEncoding,
+            externalTransferId,
+            (transferred, total, speed) => {
+              updateExternalUpload(externalTransferId, {
+                transferredBytes: transferred,
+                totalBytes: total,
+                speed,
+              });
+            },
+            undefined,
+            (error) => {
+              updateExternalUpload(externalTransferId, {
+                status: "failed" as TransferStatus,
+                endTime: Date.now(),
+                error,
+                speed: 0,
+              });
+            },
+            () => {
+              updateExternalUpload(externalTransferId, {
+                status: "cancelled" as TransferStatus,
+                endTime: Date.now(),
+                speed: 0,
+              });
+            },
+          );
+          wasCancelled = result.cancelled;
+          localTempPath = result.localPath;
+        } catch (err) {
+          updateExternalUpload(externalTransferId, {
+            status: "failed" as TransferStatus,
+            endTime: Date.now(),
+            error: err instanceof Error ? err.message : String(err),
+            speed: 0,
+          });
+          throw err;
+        }
+
+        if (wasCancelled) {
+          if (localTempPath && bridge.deleteTempFile) {
+            bridge.deleteTempFile(localTempPath).catch(() => {});
+          }
+          return { localTempPath: "" };
+        }
+
+        if (isLocalTempDownloadCancelled()) {
+          await cleanupTempDownload(localTempPath);
+          return { localTempPath: "" };
+        }
+
+        updateExternalUpload(externalTransferId, {
+          status: "completed" as TransferStatus,
+          endTime: Date.now(),
+          speed: 0,
+        });
+      } else {
+        localTempPath = await bridge.downloadSftpToTemp(
+          sftpId,
+          remotePath,
+          fileName,
+          pane.filenameEncoding,
+        );
+      }
+
+      if (isLocalTempDownloadCancelled()) {
+        await cleanupTempDownload(localTempPath);
+        return { localTempPath: "" };
+      }
 
       if (bridge.registerTempFile) {
         try {
@@ -190,15 +300,23 @@ export const useSftpExternalOperations = (
         }
       }
 
-      console.log("[SFTP] Opening with application", { localTempPath, appPath });
-      await bridge.openWithApplication(localTempPath, appPath);
-      console.log("[SFTP] Application launched");
+      try {
+        await bridge.openWithApplication(localTempPath, appPath);
+      } catch (err) {
+        if (externalTransferId) {
+          updateExternalUpload(externalTransferId, {
+            status: "failed" as TransferStatus,
+            endTime: Date.now(),
+            error: err instanceof Error ? err.message : String(err),
+            speed: 0,
+          });
+        }
+        throw err;
+      }
 
       let watchId: string | undefined;
-      console.log("[SFTP] Auto-sync enabled check", { enableWatch: options?.enableWatch, hasStartFileWatch: !!bridge.startFileWatch });
       if (options?.enableWatch && bridge.startFileWatch) {
         try {
-          console.log("[SFTP] Starting file watch", { localTempPath, remotePath, sftpId });
           const result = await bridge.startFileWatch(
             localTempPath,
             remotePath,
@@ -206,17 +324,14 @@ export const useSftpExternalOperations = (
             pane.filenameEncoding,
           );
           watchId = result.watchId;
-          console.log("[SFTP] File watch started successfully", { watchId, localTempPath, remotePath });
         } catch (err) {
           console.warn("[SFTP] Failed to start file watch:", err);
         }
-      } else {
-        console.log("[SFTP] File watching not enabled or not available");
       }
 
       return { localTempPath, watchId };
     },
-    [getActivePane, sftpSessionsRef],
+    [getActivePane, sftpSessionsRef, addExternalUpload, updateExternalUpload, isTransferCancelled],
   );
 
   // Create upload callbacks that translate to TransferTask updates
@@ -402,6 +517,7 @@ export const useSftpExternalOperations = (
             bridge: createUploadBridge,
             joinPath,
             callbacks,
+            useCompressedUpload,
           },
           controller
         );
@@ -415,7 +531,14 @@ export const useSftpExternalOperations = (
         uploadControllerRef.current = null;
       }
     },
-    [getActivePane, refresh, sftpSessionsRef, createUploadCallbacks, createUploadBridge],
+    [
+      getActivePane,
+      refresh,
+      sftpSessionsRef,
+      createUploadCallbacks,
+      createUploadBridge,
+      useCompressedUpload,
+    ],
   );
 
   const cancelExternalUpload = useCallback(async () => {

application/state/sftp/useSftpHostCredentials.ts

@@ -20,12 +20,12 @@ export const useSftpHostCredentials = ({
 
       const proxyConfig = host.proxyConfig
         ? {
-            type: host.proxyConfig.type,
-            host: host.proxyConfig.host,
-            port: host.proxyConfig.port,
-            username: host.proxyConfig.username,
-            password: host.proxyConfig.password,
-          }
+          type: host.proxyConfig.type,
+          host: host.proxyConfig.host,
+          port: host.proxyConfig.port,
+          username: host.proxyConfig.username,
+          password: host.proxyConfig.password,
+        }
         : undefined;
 
       let jumpHosts: NetcattyJumpHost[] | undefined;
@@ -63,6 +63,7 @@ export const useSftpHostCredentials = ({
         password: resolved.password,
         privateKey: key?.privateKey,
         certificate: key?.certificate,
+        passphrase: resolved.passphrase || key?.passphrase,
         publicKey: key?.publicKey,
         keyId: resolved.keyId,
         keySource: key?.source,

application/state/sftp/useSftpPaneActions.ts

@@ -39,6 +39,12 @@ interface UseSftpPaneActionsResult {
   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>;
 }
@@ -452,6 +458,88 @@ export const useSftpPaneActions = ({
     [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);
@@ -529,6 +617,7 @@ export const useSftpPaneActions = ({
     createDirectory,
     createFile,
     deleteFiles,
+    deleteFilesAtPath,
     renameFile,
     changePermissions,
   };

application/state/sftp/useSftpTransfers.ts

@@ -29,16 +29,30 @@ interface UseSftpTransfersResult {
     sourceFiles: { name: string; isDirectory: boolean }[],
     sourceSide: "left" | "right",
     targetSide: "left" | "right",
-  ) => Promise<void>;
+    options?: {
+      sourcePane?: SftpPane;
+      sourcePath?: string;
+      sourceConnectionId?: string;
+      onTransferComplete?: (result: TransferResult) => void | Promise<void>;
+    },
+  ) => Promise<TransferResult[]>;
   addExternalUpload: (task: TransferTask) => void;
   updateExternalUpload: (taskId: string, updates: Partial<TransferTask>) => void;
   cancelTransfer: (transferId: string) => Promise<void>;
+  isTransferCancelled: (transferId: string) => boolean;
   retryTransfer: (transferId: string) => Promise<void>;
   clearCompletedTransfers: () => void;
   dismissTransfer: (transferId: string) => void;
   resolveConflict: (conflictId: string, action: "replace" | "skip" | "duplicate") => Promise<void>;
 }
 
+interface TransferResult {
+  id: string;
+  fileName: string;
+  originalFileName?: string;
+  status: TransferStatus;
+}
+
 export const useSftpTransfers = ({
   getActivePane,
   refresh,
@@ -53,6 +67,7 @@ export const useSftpTransfers = ({
   const progressIntervalsRef = useRef<Map<string, NodeJS.Timeout>>(new Map());
   // Track cancelled task IDs for checking during async operations
   const cancelledTasksRef = useRef<Set<string>>(new Set());
+  const completionHandlersRef = useRef<Map<string, (result: TransferResult) => void | Promise<void>>>(new Map());
 
   useEffect(() => {
     const intervalsRef = progressIntervalsRef.current;
@@ -109,6 +124,73 @@ export const useSftpTransfers = ({
     }
   }, []);
 
+  const clearCancelledTask = useCallback((taskId: string) => {
+    cancelledTasksRef.current.delete(taskId);
+  }, []);
+
+  const isTransferCancelledError = useCallback(
+    (error: unknown): boolean =>
+      error instanceof Error && error.message === "Transfer cancelled",
+    [],
+  );
+
+  const getEntrySize = useCallback((entry: SftpFileEntry): number => {
+    if (typeof entry.size === "string") {
+      const parsed = parseInt(entry.size, 10);
+      return Number.isFinite(parsed) && parsed > 0 ? parsed : 0;
+    }
+    return typeof entry.size === "number" && entry.size > 0 ? entry.size : 0;
+  }, []);
+
+  const estimateDirectoryBytes = useCallback(
+    async (
+      sourcePath: string,
+      sourceSftpId: string | null,
+      sourceIsLocal: boolean,
+      sourceEncoding: SftpFilenameEncoding,
+      rootTaskId: string,
+    ): Promise<number> => {
+      if (cancelledTasksRef.current.has(rootTaskId)) {
+        throw new Error("Transfer cancelled");
+      }
+
+      const files = sourceIsLocal
+        ? await listLocalFiles(sourcePath)
+        : sourceSftpId
+          ? await listRemoteFiles(sourceSftpId, sourcePath, sourceEncoding)
+          : null;
+
+      if (!files) {
+        throw new Error("No source connection");
+      }
+
+      let totalBytes = 0;
+
+      for (const file of files) {
+        if (file.name === "..") continue;
+
+        if (cancelledTasksRef.current.has(rootTaskId)) {
+          throw new Error("Transfer cancelled");
+        }
+
+        if (file.type === "directory") {
+          totalBytes += await estimateDirectoryBytes(
+            joinPath(sourcePath, file.name),
+            sourceSftpId,
+            sourceIsLocal,
+            sourceEncoding,
+            rootTaskId,
+          );
+        } else {
+          totalBytes += getEntrySize(file);
+        }
+      }
+
+      return totalBytes;
+    },
+    [getEntrySize, listLocalFiles, listRemoteFiles],
+  );
+
   const transferFile = async (
     task: TransferTask,
     sourceSftpId: string | null,
@@ -118,6 +200,7 @@ export const useSftpTransfers = ({
     sourceEncoding: SftpFilenameEncoding,
     targetEncoding: SftpFilenameEncoding,
     rootTaskId: string, // The original top-level task ID for cancellation checking
+    onStreamProgress?: (transferred: number, total: number, speed: number) => void,
   ): Promise<void> => {
     // Check if task or root task was cancelled before starting
     if (cancelledTasksRef.current.has(task.id) || cancelledTasksRef.current.has(rootTaskId)) {
@@ -144,15 +227,23 @@ export const useSftpTransfers = ({
           total: number,
           speed: number,
         ) => {
+          // Bubble up streaming progress to parent (for directory transfers)
+          onStreamProgress?.(transferred, total, speed);
+
           setTransfers((prev) =>
             prev.map((t) => {
               if (t.id !== task.id) return t;
               if (t.status === "cancelled") return t;
+              const normalizedTotal = total > 0 ? total : t.totalBytes;
+              const normalizedTransferred = Math.max(
+                t.transferredBytes,
+                Math.min(transferred, normalizedTotal > 0 ? normalizedTotal : transferred),
+              );
               return {
                 ...t,
-                transferredBytes: transferred,
-                totalBytes: total || t.totalBytes,
-                speed,
+                transferredBytes: normalizedTransferred,
+                totalBytes: normalizedTotal,
+                speed: Number.isFinite(speed) && speed > 0 ? speed : 0,
               };
             }),
           );
@@ -235,6 +326,7 @@ export const useSftpTransfers = ({
     sourceEncoding: SftpFilenameEncoding,
     targetEncoding: SftpFilenameEncoding,
     rootTaskId: string, // The original top-level task ID for cancellation checking
+    onChildProgress?: (completedBytes: number, currentFileTransferred: number, currentFileTotal: number, speed: number) => void,
   ) => {
     // Check if task or root task was cancelled before starting
     if (cancelledTasksRef.current.has(task.id) || cancelledTasksRef.current.has(rootTaskId)) {
@@ -256,6 +348,9 @@ export const useSftpTransfers = ({
       throw new Error("No source connection");
     }
 
+    // Track bytes completed so far in this directory (including subdirectories)
+    let completedBytesInDir = 0;
+
     for (const file of files) {
       if (file.name === "..") continue;
 
@@ -268,6 +363,7 @@ export const useSftpTransfers = ({
         ...task,
         id: crypto.randomUUID(),
         fileName: file.name,
+        originalFileName: file.name,
         sourcePath: joinPath(task.sourcePath, file.name),
         targetPath: joinPath(task.targetPath, file.name),
         isDirectory: file.type === "directory",
@@ -275,6 +371,13 @@ export const useSftpTransfers = ({
       };
 
       if (file.type === "directory") {
+        // For subdirectories, create a nested progress tracker
+        let subDirCompletedBytes = 0;
+        const onSubDirChildProgress = (subCompleted: number, currentTransferred: number, currentTotal: number, speed: number) => {
+          subDirCompletedBytes = subCompleted;
+          // Report to parent: our completed + subdirectory's (completed + in-progress)
+          onChildProgress?.(completedBytesInDir + subCompleted, currentTransferred, currentTotal, speed);
+        };
         await transferDirectory(
           childTask,
           sourceSftpId,
@@ -284,8 +387,14 @@ export const useSftpTransfers = ({
           sourceEncoding,
           targetEncoding,
           rootTaskId,
+          onSubDirChildProgress,
         );
+        completedBytesInDir += subDirCompletedBytes;
       } else {
+        // For files, report streaming progress
+        const onFileStreamProgress = (transferred: number, total: number, speed: number) => {
+          onChildProgress?.(completedBytesInDir, transferred, total, speed);
+        };
         await transferFile(
           childTask,
           sourceSftpId,
@@ -295,7 +404,12 @@ export const useSftpTransfers = ({
           sourceEncoding,
           targetEncoding,
           rootTaskId,
+          onFileStreamProgress,
         );
+        // After file completes, add its bytes to completed total
+        const childSize = typeof file.size === 'string' ? parseInt(file.size, 10) || 0 : (file.size || 0);
+        completedBytesInDir += childSize;
+        onChildProgress?.(completedBytesInDir, 0, 0, 0);
       }
     }
   };
@@ -305,7 +419,7 @@ export const useSftpTransfers = ({
     sourcePane: SftpPane,
     targetPane: SftpPane,
     targetSide: "left" | "right",
-  ) => {
+  ): Promise<TransferStatus> => {
     const updateTask = (updates: Partial<TransferTask>) => {
       setTransfers((prev) =>
         prev.map((t) => (t.id === task.id ? { ...t, ...updates } : t)),
@@ -321,7 +435,27 @@ export const useSftpTransfers = ({
       : targetPane.filenameEncoding || "auto";
 
     let actualFileSize = task.totalBytes;
-    if (!task.isDirectory && actualFileSize === 0) {
+    let prescanCancelled = false;
+    if (task.isDirectory) {
+      try {
+        const sourceSftpId = sourcePane.connection?.isLocal
+          ? null
+          : sftpSessionsRef.current.get(sourcePane.connection!.id);
+
+        actualFileSize = await estimateDirectoryBytes(
+          task.sourcePath,
+          sourceSftpId,
+          sourcePane.connection!.isLocal,
+          sourceEncoding,
+          task.id,
+        );
+      } catch (err) {
+        if (isTransferCancelledError(err)) {
+          prescanCancelled = true;
+        }
+        // Fall back to the existing estimate below if size discovery fails.
+      }
+    } else if (actualFileSize === 0) {
       try {
         const sourceSftpId = sourcePane.connection?.isLocal
           ? null
@@ -352,13 +486,6 @@ export const useSftpTransfers = ({
 
     const hasStreamingTransfer = !!netcattyBridge.get()?.startStreamTransfer;
 
-    updateTask({
-      status: "transferring",
-      totalBytes: estimatedSize,
-      transferredBytes: 0,
-      startTime: Date.now(),
-    });
-
     const sourceSftpId = sourcePane.connection?.isLocal
       ? null
       : sftpSessionsRef.current.get(sourcePane.connection!.id);
@@ -378,12 +505,24 @@ export const useSftpTransfers = ({
     }
 
     let useSimulatedProgress = false;
-    if (!hasStreamingTransfer || task.isDirectory) {
-      useSimulatedProgress = true;
-      startProgressSimulation(task.id, estimatedSize);
-    }
 
     try {
+      if (prescanCancelled) {
+        throw new Error("Transfer cancelled");
+      }
+
+      updateTask({
+        status: "transferring",
+        totalBytes: estimatedSize,
+        transferredBytes: 0,
+        startTime: Date.now(),
+      });
+
+      if (!hasStreamingTransfer && !task.isDirectory) {
+        useSimulatedProgress = true;
+        startProgressSimulation(task.id, estimatedSize);
+      }
+
       if (!task.skipConflictCheck && !task.isDirectory && targetPane.connection) {
         let targetExists = false;
         let existingStat: { size: number; mtime: number } | null = null;
@@ -461,11 +600,36 @@ export const useSftpTransfers = ({
             status: "pending",
             totalBytes: sourceStat?.size || estimatedSize,
           });
-          return;
+          return "pending";
         }
       }
 
       if (task.isDirectory) {
+        // Track real progress for directory transfers:
+        // completedBytes = sum of all finished child files
+        // + currentFileTransferred = in-progress bytes of the currently transferring file
+        const onChildProgress = (completedBytes: number, currentFileTransferred: number, currentFileTotal: number, speed: number) => {
+          const totalProgress = completedBytes + currentFileTransferred;
+          setTransfers((prev) =>
+            prev.map((t) => {
+              if (t.id !== task.id || t.status === "cancelled") return t;
+              const newTotal = Math.max(
+                t.totalBytes,
+                totalProgress,
+                completedBytes + currentFileTotal,
+              );
+              return {
+                ...t,
+                transferredBytes: Math.max(
+                  t.transferredBytes,
+                  Math.min(totalProgress, newTotal),
+                ),
+                totalBytes: newTotal,
+                speed: Number.isFinite(speed) && speed > 0 ? speed : t.speed,
+              };
+            }),
+          );
+        };
         await transferDirectory(
           task,
           sourceSftpId,
@@ -475,6 +639,7 @@ export const useSftpTransfers = ({
           sourceEncoding,
           targetEncoding,
           task.id, // rootTaskId - this is the top-level task
+          onChildProgress,
         );
       } else {
         await transferFile(
@@ -507,6 +672,20 @@ export const useSftpTransfers = ({
       );
 
       await refresh(targetSide);
+      const completionHandler = completionHandlersRef.current.get(task.id);
+      if (completionHandler) {
+        try {
+          await completionHandler({
+            id: task.id,
+            fileName: task.fileName,
+            originalFileName: task.originalFileName ?? task.fileName,
+            status: "completed",
+          });
+        } finally {
+          completionHandlersRef.current.delete(task.id);
+        }
+      }
+      return "completed";
     } catch (err) {
       if (useSimulatedProgress) {
         stopProgressSimulation(task.id);
@@ -518,7 +697,21 @@ export const useSftpTransfers = ({
 
       if (isCancelled) {
         // Don't update status - cancelTransfer already set it to cancelled
-        return;
+        const completionHandler = completionHandlersRef.current.get(task.id);
+        if (completionHandler) {
+          try {
+            await completionHandler({
+              id: task.id,
+              fileName: task.fileName,
+              originalFileName: task.originalFileName ?? task.fileName,
+              status: "cancelled",
+            });
+          } finally {
+            completionHandlersRef.current.delete(task.id);
+          }
+        }
+        clearCancelledTask(task.id);
+        return "cancelled";
       }
 
       updateTask({
@@ -527,6 +720,20 @@ export const useSftpTransfers = ({
         endTime: Date.now(),
         speed: 0,
       });
+      const completionHandler = completionHandlersRef.current.get(task.id);
+      if (completionHandler) {
+        try {
+          await completionHandler({
+            id: task.id,
+            fileName: task.fileName,
+            originalFileName: task.originalFileName ?? task.fileName,
+            status: "failed",
+          });
+        } finally {
+          completionHandlersRef.current.delete(task.id);
+        }
+      }
+      return "failed";
     }
   };
 
@@ -535,22 +742,29 @@ export const useSftpTransfers = ({
       sourceFiles: { name: string; isDirectory: boolean }[],
       sourceSide: "left" | "right",
       targetSide: "left" | "right",
+      options?: {
+        sourcePane?: SftpPane;
+        sourcePath?: string;
+        sourceConnectionId?: string;
+        onTransferComplete?: (result: TransferResult) => void | Promise<void>;
+      },
     ) => {
-      const sourcePane = getActivePane(sourceSide);
+      const sourcePane = options?.sourcePane ?? getActivePane(sourceSide);
       const targetPane = getActivePane(targetSide);
 
-      if (!sourcePane?.connection || !targetPane?.connection) return;
+      if (!sourcePane?.connection || !targetPane?.connection) return [];
 
       const sourceEncoding: SftpFilenameEncoding = sourcePane.connection.isLocal
         ? "auto"
         : sourcePane.filenameEncoding || "auto";
 
-      const sourcePath = sourcePane.connection.currentPath;
+      const sourcePath = options?.sourcePath ?? sourcePane.connection.currentPath;
       const targetPath = targetPane.connection.currentPath;
+      const sourceConnectionId = options?.sourceConnectionId ?? sourcePane.connection.id;
 
       const sourceSftpId = sourcePane.connection.isLocal
         ? null
-        : sftpSessionsRef.current.get(sourcePane.connection.id);
+        : sftpSessionsRef.current.get(sourceConnectionId);
 
       const newTasks: TransferTask[] = [];
 
@@ -570,11 +784,11 @@ export const useSftpTransfers = ({
               const stat = await netcattyBridge.get()?.statLocal?.(fullPath);
               if (stat) fileSize = stat.size;
             } else if (sourceSftpId) {
-            const stat = await netcattyBridge.get()?.statSftp?.(
-              sourceSftpId,
-              fullPath,
-              sourceEncoding,
-            );
+              const stat = await netcattyBridge.get()?.statSftp?.(
+                sourceSftpId,
+                fullPath,
+                sourceEncoding,
+              );
               if (stat) fileSize = stat.size;
             }
           } catch {
@@ -585,9 +799,10 @@ export const useSftpTransfers = ({
         newTasks.push({
           id: crypto.randomUUID(),
           fileName: file.name,
+          originalFileName: file.name,
           sourcePath: joinPath(sourcePath, file.name),
           targetPath: joinPath(targetPath, file.name),
-          sourceConnectionId: sourcePane.connection!.id,
+          sourceConnectionId,
           targetConnectionId: targetPane.connection!.id,
           direction,
           status: "pending" as TransferStatus,
@@ -601,9 +816,25 @@ export const useSftpTransfers = ({
 
       setTransfers((prev) => [...prev, ...newTasks]);
 
-      for (const task of newTasks) {
-        await processTransfer(task, sourcePane, targetPane, targetSide);
+      if (options?.onTransferComplete) {
+        for (const task of newTasks) {
+          completionHandlersRef.current.set(task.id, options.onTransferComplete);
+        }
       }
+
+      const results: TransferResult[] = [];
+
+      for (const task of newTasks) {
+        const status = await processTransfer(task, sourcePane, targetPane, targetSide);
+        results.push({
+          id: task.id,
+          fileName: task.fileName,
+          originalFileName: task.originalFileName ?? task.fileName,
+          status,
+        });
+      }
+
+      return results;
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [getActivePane, sftpSessionsRef],
@@ -638,10 +869,6 @@ export const useSftpTransfers = ({
         }
       }
 
-      // Clean up cancelled task ID after a delay to ensure all async ops see it
-      setTimeout(() => {
-        cancelledTasksRef.current.delete(transferId);
-      }, 5000);
     },
     [stopProgressSimulation],
   );
@@ -649,7 +876,18 @@ export const useSftpTransfers = ({
   const retryTransfer = useCallback(
     async (transferId: string) => {
       const task = transfers.find((t) => t.id === transferId);
-      if (!task) return;
+      if (!task || task.retryable === false) return;
+
+      const retriedTask: TransferTask = {
+        ...task,
+        id: crypto.randomUUID(),
+        status: "pending" as TransferStatus,
+        error: undefined,
+        transferredBytes: 0,
+        speed: 0,
+        startTime: Date.now(),
+        endTime: undefined,
+      };
 
       const sourceSide = task.sourceConnectionId.startsWith("left") ? "left" : "right";
       const targetSide = task.targetConnectionId.startsWith("left") ? "left" : "right";
@@ -657,14 +895,20 @@ export const useSftpTransfers = ({
       const targetPane = getActivePane(targetSide as "left" | "right");
 
       if (sourcePane?.connection && targetPane?.connection) {
+        const completionHandler = completionHandlersRef.current.get(transferId);
+        if (completionHandler) {
+          completionHandlersRef.current.set(retriedTask.id, completionHandler);
+          completionHandlersRef.current.delete(transferId);
+        }
+
         setTransfers((prev) =>
           prev.map((t) =>
             t.id === transferId
-              ? { ...t, status: "pending" as TransferStatus, error: undefined }
+              ? retriedTask
               : t,
           ),
         );
-        await processTransfer(task, sourcePane, targetPane, targetSide);
+        await processTransfer(retriedTask, sourcePane, targetPane, targetSide);
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps -- processTransfer is defined inline
@@ -681,6 +925,10 @@ export const useSftpTransfers = ({
     setTransfers((prev) => prev.filter((t) => t.id !== transferId));
   }, []);
 
+  const isTransferCancelled = useCallback((transferId: string) => {
+    return cancelledTasksRef.current.has(transferId);
+  }, []);
+
   const addExternalUpload = useCallback((task: TransferTask) => {
     // Filter out any pending scanning tasks before adding the new task.
     // This ensures that even if dismissExternalUpload's state update hasn't been applied yet
@@ -693,7 +941,27 @@ export const useSftpTransfers = ({
 
   const updateExternalUpload = useCallback((taskId: string, updates: Partial<TransferTask>) => {
     setTransfers((prev) =>
-      prev.map((t) => (t.id === taskId ? { ...t, ...updates } : t)),
+      prev.map((t) => {
+        if (t.id !== taskId) return t;
+
+        const merged: TransferTask = { ...t, ...updates };
+
+        // Keep progress monotonic and bounded for stable progress UI.
+        if (typeof merged.totalBytes === "number" && merged.totalBytes > 0) {
+          merged.transferredBytes = Math.max(
+            t.transferredBytes,
+            Math.min(merged.transferredBytes, merged.totalBytes),
+          );
+        } else {
+          merged.transferredBytes = Math.max(t.transferredBytes, merged.transferredBytes);
+        }
+
+        if (!Number.isFinite(merged.speed) || merged.speed < 0) {
+          merged.speed = 0;
+        }
+
+        return merged;
+      }),
     );
   }, []);
 
@@ -715,6 +983,19 @@ export const useSftpTransfers = ({
               : t,
           ),
         );
+        const completionHandler = completionHandlersRef.current.get(conflictId);
+        if (completionHandler) {
+          try {
+            await completionHandler({
+              id: task.id,
+              fileName: task.fileName,
+              originalFileName: task.originalFileName ?? task.fileName,
+              status: "cancelled",
+            });
+          } finally {
+            completionHandlersRef.current.delete(conflictId);
+          }
+        }
         return;
       }
 
@@ -777,6 +1058,7 @@ export const useSftpTransfers = ({
     addExternalUpload,
     updateExternalUpload,
     cancelTransfer,
+    isTransferCancelled,
     retryTransfer,
     clearCompletedTransfers,
     dismissTransfer,

application/state/useAutoSync.ts

@@ -12,7 +12,12 @@ import { useCloudSync } from './useCloudSync';
 import { useI18n } from '../i18n/I18nProvider';
 import { getCloudSyncManager } from '../../infrastructure/services/CloudSyncManager';
 import { netcattyBridge } from '../../infrastructure/services/netcattyBridge';
+import {
+  findSyncPayloadEncryptedCredentialPaths,
+} from '../../domain/credentials';
 import type { SyncPayload } from '../../domain/sync';
+import { STORAGE_KEY_PORT_FORWARDING } from '../../infrastructure/config/storageKeys';
+import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
 import { toast } from '../../components/ui/toast';
 
 interface AutoSyncConfig {
@@ -48,13 +53,30 @@ export const useAutoSync = (config: AutoSyncConfig) => {
   
   // Build sync payload
   const buildPayload = useCallback((): SyncPayload => {
+    // If port-forwarding hook state is still [] (async init in progress),
+    // fall back to localStorage to avoid uploading an empty array that
+    // overwrites the cloud snapshot.
+    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,
+        }));
+      }
+    }
     return {
       hosts: config.hosts,
       keys: config.keys,
       identities: config.identities,
       snippets: config.snippets,
       customGroups: config.customGroups,
-      portForwardingRules: config.portForwardingRules,
+      portForwardingRules: effectivePFRules,
       knownHosts: config.knownHosts,
       syncedAt: Date.now(),
     };
@@ -62,15 +84,32 @@ export const useAutoSync = (config: AutoSyncConfig) => {
   
   // Create a hash of current data for comparison
   const getDataHash = useCallback(() => {
+    // Same fallback as buildPayload
+    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 data = {
       hosts: config.hosts,
       keys: config.keys,
       identities: config.identities,
       snippets: config.snippets,
-      portForwardingRules: config.portForwardingRules,
+      customGroups: config.customGroups,
+      portForwardingRules: effectivePFRules,
+      knownHosts: config.knownHosts,
     };
     return JSON.stringify(data);
-  }, [config.hosts, config.keys, config.identities, config.snippets, config.portForwardingRules]);
+  }, [config.hosts, config.keys, config.identities, config.snippets, config.customGroups, config.portForwardingRules, config.knownHosts]);
   
   // Sync now handler - get fresh state directly from manager
   const syncNow = useCallback(async (options?: SyncNowOptions) => {
@@ -109,6 +148,12 @@ export const useAutoSync = (config: AutoSyncConfig) => {
       }
 
       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);
 
       for (const result of results.values()) {

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

@@ -286,7 +286,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 +319,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

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

@@ -9,12 +9,25 @@ import { localStorageAdapter } from "../../infrastructure/persistence/localStora
 import {
   clearReconnectTimer,
   getActiveConnection,
+  initReconnectCancelListener,
+  reconcileWithBackend,
   startPortForward,
+  stopAllPortForwards,
+  stopAndCleanupRule,
   stopPortForward,
   syncWithBackend,
 } from "../../infrastructure/services/portForwardingService";
 import { useStoredViewMode, ViewMode } from "./useStoredViewMode";
 
+// Module-level ref-counts: these side effects must run at most once per
+// window, not per hook instance (the hook mounts from both App.tsx
+// and PortForwardingNew.tsx).  Ref-counting ensures the resources
+// stay alive as long as ANY instance is mounted.
+let reconnectCancelListenerRefs = 0;
+let reconnectCancelCleanup: (() => void) | undefined;
+let heartbeatRefs = 0;
+let heartbeatIntervalId: ReturnType<typeof setInterval> | undefined;
+
 export type { ViewMode };
 
 export type SortMode = "az" | "za" | "newest" | "oldest";
@@ -79,8 +92,8 @@ const setGlobalRules = (newRules: PortForwardingRule[]) => {
   localStorageAdapter.write(STORAGE_KEY_PORT_FORWARDING, newRules);
 };
 
-const normalizeRulesWithConnections = (rules: PortForwardingRule[]) => {
-  return rules.map((rule) => {
+const normalizeRulesWithConnections = (rules: PortForwardingRule[]): PortForwardingRule[] => {
+  return rules.map((rule): PortForwardingRule => {
     const connection = getActiveConnection(rule.id);
     if (connection) {
       return {
@@ -92,7 +105,7 @@ const normalizeRulesWithConnections = (rules: PortForwardingRule[]) => {
 
     return {
       ...rule,
-      status: "inactive",
+      status: "inactive" as const,
       error: undefined,
     };
   });
@@ -152,6 +165,78 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
     };
   }, [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(
     (
       rule: Omit<PortForwardingRule, "id" | "createdAt" | "status">,
@@ -182,6 +267,8 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
 
   const deleteRule = useCallback(
     (id: string) => {
+      // Stop any active tunnel before removing the rule
+      stopAndCleanupRule(id);
       const updated = globalRules.filter((r) => r.id !== id);
       setGlobalRules(updated);
       if (selectedRuleId === id) {
@@ -213,6 +300,60 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
   );
 
   const importRules = useCallback((newRules: PortForwardingRule[]) => {
+    // When clearing all rules (e.g. "Clear local data"), stop ALL tunnels
+    // and broadcast per-rule reconnect cancellation.  stopAllPortForwards
+    // handles the backend, but we also need per-rule broadcasts so other
+    // windows cancel their pending reconnect timers.
+    if (newRules.length === 0) {
+      // Read from localStorage since globalRules may be empty (uninitialized)
+      const storedRules = localStorageAdapter.read<PortForwardingRule[]>(
+        STORAGE_KEY_PORT_FORWARDING,
+      );
+      const rulesToCancel = globalRules.length > 0
+        ? globalRules
+        : (storedRules && Array.isArray(storedRules) ? storedRules : []);
+      for (const rule of rulesToCancel) {
+        stopAndCleanupRule(rule.id);
+      }
+      // Safety net: also stop anything the renderer doesn't know about
+      void stopAllPortForwards();
+    }
+
+    // Stop tunnels for rules that are being removed or whose connection
+    // config has changed (same ID but different host/port/type means the
+    // old tunnel is pointing at stale parameters and must be torn down).
+    //
+    // Use globalRules as the diff baseline.  In a freshly opened settings
+    // window, globalRules may still be empty because initializeStore is
+    // async.  Fall back to reading directly from localStorage to avoid
+    // missing tunnels that need to be stopped.
+    let diffBaseline = globalRules;
+    if (diffBaseline.length === 0 && newRules.length > 0) {
+      const stored = localStorageAdapter.read<PortForwardingRule[]>(
+        STORAGE_KEY_PORT_FORWARDING,
+      );
+      if (stored && Array.isArray(stored) && stored.length > 0) {
+        diffBaseline = stored;
+      }
+    }
+    const newRulesById = new Map(newRules.map((r) => [r.id, r]));
+    for (const existing of diffBaseline) {
+      const incoming = newRulesById.get(existing.id);
+      if (!incoming) {
+        // Rule removed entirely
+        stopAndCleanupRule(existing.id);
+      } else if (
+        existing.type !== incoming.type ||
+        existing.localPort !== incoming.localPort ||
+        existing.remoteHost !== incoming.remoteHost ||
+        existing.remotePort !== incoming.remotePort ||
+        existing.bindAddress !== incoming.bindAddress ||
+        existing.hostId !== incoming.hostId
+      ) {
+        // Connection-relevant config changed — tear down the old tunnel
+        stopAndCleanupRule(existing.id);
+      }
+    }
     setGlobalRules(normalizeRulesWithConnections(newRules));
   }, []);
 

application/state/useSessionState.ts

@@ -49,9 +49,10 @@ 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();
@@ -69,6 +70,7 @@ export const useSessionState = () => {
     };
     setSessions(prev => [...prev, newSession]);
     setActiveTabId(sessionId);
+    return sessionId;
   }, [setActiveTabId]);
 
   const connectToHost = useCallback((host: Host) => {
@@ -100,7 +102,7 @@ export const useSessionState = () => {
       };
       setSessions(prev => [...prev, newSession]);
       setActiveTabId(sessionId);
-      return;
+      return sessionId;
     }
 
     const newSession: TerminalSession = {
@@ -115,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));

application/state/useSettingsState.ts

@@ -1,32 +1,36 @@
-import { useCallback,useEffect,useLayoutEffect,useMemo,useState } from 'react';
-import { SyncConfig, TerminalSettings, DEFAULT_TERMINAL_SETTINGS, HotkeyScheme, CustomKeyBindings, DEFAULT_KEY_BINDINGS, KeyBinding, UILanguage, SessionLogFormat } 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_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_SESSION_LOGS_ENABLED,
-STORAGE_KEY_SESSION_LOGS_DIR,
-STORAGE_KEY_SESSION_LOGS_FORMAT,
+  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,
 } from '../../infrastructure/config/storageKeys';
 import { DEFAULT_UI_LOCALE, resolveSupportedLocale } from '../../infrastructure/config/i18n';
 import { TERMINAL_THEMES } from '../../infrastructure/config/terminalThemes';
+import { 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';
@@ -35,7 +39,13 @@ 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' = 'system';
+
+/** 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';
@@ -52,6 +62,9 @@ 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';
@@ -70,7 +83,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%"
@@ -87,9 +100,15 @@ const isValidUiFontId = (value: string): boolean => {
   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);
+    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',
   tokens: UiThemeTokens,
@@ -133,10 +152,14 @@ const applyThemeTokens = (
 export const useSettingsState = () => {
   const availableFonts = useAvailableFonts();
   const uiFontsLoaded = useUIFontsLoaded();
-  const [theme, setTheme] = useState<'dark' | 'light'>(() => {
+  const [theme, setTheme] = useState<'dark' | 'light' | 'system'>(() => {
     const stored = readStoredString(STORAGE_KEY_THEME);
     return stored && isValidTheme(stored) ? stored : DEFAULT_THEME;
   });
+  // Track the OS color scheme preference (updated by matchMedia listener)
+  const [systemPreference, setSystemPreference] = useState<'light' | 'dark'>(getSystemPreference);
+  // resolvedTheme is always 'light' or 'dark' — derived synchronously from theme + OS preference
+  const resolvedTheme: 'light' | 'dark' = theme === 'system' ? systemPreference : theme;
   const [lightUiThemeId, setLightUiThemeId] = useState<string>(() => {
     const stored = readStoredString(STORAGE_KEY_UI_THEME_LIGHT);
     return stored && isValidUiThemeId('light', stored) ? stored : DEFAULT_LIGHT_UI_THEME;
@@ -167,9 +190,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);
@@ -206,6 +229,12 @@ export const useSettingsState = () => {
     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);
@@ -220,6 +249,51 @@ export const useSettingsState = () => {
     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 [hotkeyRegistrationError, setHotkeyRegistrationError] = useState<string | null>(null);
+  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) => {
     try {
@@ -247,8 +321,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(effective, tokens, nextAccentMode, nextAccent);
   }, [theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent]);
 
   const syncCustomCssFromStorage = useCallback(() => {
@@ -257,8 +332,8 @@ export const useSettingsState = () => {
   }, []);
 
   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(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);
@@ -270,7 +345,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);
@@ -289,11 +375,11 @@ export const useSettingsState = () => {
   }, [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 ||
@@ -307,8 +393,8 @@ 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();
       }
@@ -326,6 +412,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);
       }
@@ -351,7 +464,7 @@ export const useSettingsState = () => {
         // ignore
       }
     };
-  }, [syncAppearanceFromStorage, syncCustomCssFromStorage]);
+  }, [mergeIncomingTerminalSettings, syncAppearanceFromStorage, syncCustomCssFromStorage]);
 
   useEffect(() => {
     const bridge = netcattyBridge.get();
@@ -429,14 +542,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) {
@@ -476,6 +589,31 @@ export const useSettingsState = () => {
           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';
@@ -487,7 +625,7 @@ export const useSettingsState = () => {
 
     window.addEventListener('storage', handleStorageChange);
     return () => window.removeEventListener('storage', handleStorageChange);
-  }, [theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, customCSS, uiFontFamilyId, hotkeyScheme, uiLanguage, terminalThemeId, terminalFontFamilyId, terminalFontSize, sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload]);
+  }, [theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, customCSS, uiFontFamilyId, hotkeyScheme, uiLanguage, terminalThemeId, terminalFontFamilyId, terminalFontSize, sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload, editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat, mergeIncomingTerminalSettings]);
 
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_TERM_THEME, terminalThemeId);
@@ -506,7 +644,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);
@@ -578,6 +726,49 @@ export const useSettingsState = () => {
     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) {
+        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, 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]);
+
   // Get merged key bindings (defaults + custom overrides)
   const keyBindings = useMemo((): KeyBinding[] => {
     return DEFAULT_KEY_BINDINGS.map(binding => {
@@ -630,9 +821,14 @@ 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(
@@ -645,11 +841,12 @@ export const useSettingsState = () => {
     value: TerminalSettings[K]
   ) => {
     setTerminalSettings(prev => ({ ...prev, [key]: value }));
-  }, []);
+  }, [setTerminalSettings]);
 
   return {
     theme,
     setTheme,
+    resolvedTheme,
     lightUiThemeId,
     setLightUiThemeId,
     darkUiThemeId,
@@ -694,6 +891,13 @@ export const useSettingsState = () => {
     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,
@@ -702,5 +906,11 @@ export const useSettingsState = () => {
     setSessionLogsDir,
     sessionLogsFormat,
     setSessionLogsFormat,
+    // Global Toggle Window (Quake Mode)
+    toggleWindowHotkey,
+    setToggleWindowHotkey,
+    closeToTray,
+    setCloseToTray,
+    hotkeyRegistrationError,
   };
 };

application/state/useSftpFileOperations.ts

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

application/state/useSftpState.ts

@@ -160,6 +160,7 @@ export const useSftpState = (
     createDirectory,
     createFile,
     deleteFiles,
+    deleteFilesAtPath,
     renameFile,
     changePermissions,
   } = useSftpPaneActions({
@@ -212,6 +213,7 @@ export const useSftpState = (
     addExternalUpload,
     updateExternalUpload,
     cancelTransfer,
+    isTransferCancelled,
     retryTransfer,
     clearCompletedTransfers,
     dismissTransfer,
@@ -237,8 +239,10 @@ export const useSftpState = (
     getActivePane,
     refresh,
     sftpSessionsRef,
+    useCompressedUpload: options?.useCompressedUpload,
     addExternalUpload,
     updateExternalUpload,
+    isTransferCancelled,
     dismissExternalUpload: dismissTransfer,
   });
 
@@ -269,6 +273,7 @@ export const useSftpState = (
     createDirectory,
     createFile,
     deleteFiles,
+    deleteFilesAtPath,
     renameFile,
     changePermissions,
     readTextFile,
@@ -313,6 +318,7 @@ export const useSftpState = (
     createDirectory,
     createFile,
     deleteFiles,
+    deleteFilesAtPath,
     renameFile,
     changePermissions,
     readTextFile,
@@ -361,6 +367,8 @@ export const useSftpState = (
     createDirectory: (...args: Parameters<typeof createDirectory>) => methodsRef.current.createDirectory(...args),
     createFile: (...args: Parameters<typeof createFile>) => methodsRef.current.createFile(...args),
     deleteFiles: (...args: Parameters<typeof deleteFiles>) => methodsRef.current.deleteFiles(...args),
+    deleteFilesAtPath: (...args: Parameters<typeof deleteFilesAtPath>) =>
+      methodsRef.current.deleteFilesAtPath(...args),
     renameFile: (...args: Parameters<typeof renameFile>) => methodsRef.current.renameFile(...args),
     changePermissions: (...args: Parameters<typeof changePermissions>) => methodsRef.current.changePermissions(...args),
     readTextFile: (...args: Parameters<typeof readTextFile>) => methodsRef.current.readTextFile(...args),

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

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

application/state/useTerminalBackend.ts

@@ -78,6 +78,12 @@ 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");
@@ -148,6 +154,7 @@ export const useTerminalBackend = () => {
     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/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,
@@ -29,6 +29,14 @@ import {
   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[];
@@ -99,20 +107,47 @@ export const useVaultState = () => {
   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[]) => {
@@ -271,7 +306,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;
     });
 
@@ -279,82 +318,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);
+      // Load managed sources
+      const savedManagedSources = localStorageAdapter.read<ManagedSource[]>(
+        STORAGE_KEY_MANAGED_SOURCES,
+      );
+      if (savedManagedSources) setManagedSources(savedManagedSources);
+    };
+
+    init();
   }, [updateHosts, updateSnippets]);
 
   useEffect(() => {
@@ -367,7 +444,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;
       }
 
@@ -380,13 +467,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;
       }
 
@@ -442,7 +541,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;
     });
   }, []);

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,6 +32,9 @@ import {
 } from 'lucide-react';
 import { useCloudSync } from '../application/state/useCloudSync';
 import { useI18n } from '../application/i18n/I18nProvider';
+import {
+    findSyncPayloadEncryptedCredentialPaths,
+} from '../domain/credentials';
 import type { CloudProvider, ConflictInfo, SyncPayload, WebDAVAuthType, WebDAVConfig, S3Config } from '../domain/sync';
 import { cn } from '../lib/utils';
 import { Button } from './ui/button';
@@ -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} />
@@ -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) {
@@ -958,6 +972,7 @@ 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) {
@@ -982,6 +997,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'));
             }
@@ -1556,6 +1572,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 +1590,8 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                                         return;
                                     }
 
-                                    if (sync.hasAnyConnectedProvider) {
-                                        const payload = onBuildPayload();
-                                        await sync.syncNow(payload);
+                                    if (payloadForReencrypt) {
+                                        await sync.syncNow(payloadForReencrypt);
                                     }
 
                                     toast.success(t('cloudSync.changeKey.updatedToast'));

components/GroupTreeItem.tsx

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

components/HostDetailsPanel.tsx

@@ -16,6 +16,7 @@ import {
   Plus,
   Settings2,
   Shield,
+  ShieldAlert,
   Tag,
   TerminalSquare,
   User,
@@ -26,7 +27,7 @@ import {
 import React, { useEffect, useMemo, useState, useCallback } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { useApplicationBackend } from "../application/state/useApplicationBackend";
-import { TERMINAL_THEMES } from "../infrastructure/config/terminalThemes";
+import { 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, ManagedSource, ProxyConfig, SSHKey } from "../types";
@@ -38,6 +39,7 @@ import {
   AsidePanelFooter,
 } from "./ui/aside-panel";
 import { Badge } from "./ui/badge";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 import { Button } from "./ui/button";
 import { Switch } from "./ui/switch";
 import { Card } from "./ui/card";
@@ -154,13 +156,6 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   // Group input state for inline creation suggestion
   const [groupInputValue, setGroupInputValue] = useState(form.group || "");
 
-  // Check if the entered group is new (doesn't exist)
-  // Reserved for future use: showing inline "create new group" suggestion
-  const _isNewGroup = useMemo(() => {
-    const trimmed = groupInputValue.trim();
-    return trimmed.length > 0 && !groups.includes(trimmed);
-  }, [groupInputValue, groups]);
-
   useEffect(() => {
     if (initialData) {
       // Ensure telnetEnabled is set when protocol is telnet
@@ -1115,21 +1110,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,
                   }}
                 >
                   $
@@ -1137,9 +1126,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>
 
@@ -1230,6 +1217,30 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
           )}
         </Card>
 
+        {/* Legacy Algorithms */}
+        <Card className="p-3 space-y-2 bg-card border-border/80">
+          <div className="flex items-center gap-2">
+            <ShieldAlert size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">{t("hostDetails.section.legacyAlgorithms")}</p>
+          </div>
+          <ToggleRow
+            label={t("hostDetails.legacyAlgorithms")}
+            enabled={!!form.legacyAlgorithms}
+            onToggle={() => update("legacyAlgorithms", !form.legacyAlgorithms)}
+          />
+          <p className="text-xs text-muted-foreground break-words">
+            {t("hostDetails.legacyAlgorithms.desc")}
+          </p>
+          {form.legacyAlgorithms && (
+            <div className="flex items-start gap-2 p-2 rounded-md bg-yellow-500/10 border border-yellow-500/20">
+              <AlertTriangle size={14} className="text-yellow-500 mt-0.5 flex-shrink-0" />
+              <p className="text-xs text-yellow-600 dark:text-yellow-400 break-words">
+                {t("hostDetails.legacyAlgorithms.warning")}
+              </p>
+            </div>
+          )}
+        </Card>
+
         {/* Proxy via Hosts (Jump Hosts / ProxyJump) */}
         <Card className="p-3 space-y-2 bg-card border-border/80">
           <div className="flex items-center justify-between">
@@ -1306,36 +1317,50 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         </Card>
 
         {/* Proxy Configuration */}
-        <Card className="p-3 space-y-2 bg-card border-border/80">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <Globe size={14} className="text-muted-foreground" />
-              <p className="text-xs font-semibold">{t("hostDetails.proxy")}</p>
-            </div>
-            {form.proxyConfig?.host ? (
-              <Badge variant="secondary" className="text-xs">
-                {form.proxyConfig.type?.toUpperCase()} {form.proxyConfig.host}:
-                {form.proxyConfig.port}
-              </Badge>
-            ) : (
-              <Badge
-                variant="outline"
-                className="text-xs text-muted-foreground"
-              >
-                {t("hostDetails.proxy.none")}
-              </Badge>
-            )}
+        <Card className="p-3 space-y-2 bg-card border-border/80 overflow-hidden">
+          <div className="flex items-center gap-2">
+            <Globe size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">{t("hostDetails.proxy")}</p>
           </div>
-          <Button
-            variant="ghost"
-            className="w-full h-9 justify-start gap-2 text-sm"
-            onClick={() => setActiveSubPanel("proxy")}
-          >
-            <Plus size={14} />
-            {form.proxyConfig?.host
-              ? t("hostDetails.proxy.edit")
-              : t("hostDetails.proxy.configure")}
-          </Button>
+          {form.proxyConfig?.host ? (
+            <button
+              className="w-full min-w-0 grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 p-2 rounded-md bg-secondary/50 hover:bg-secondary transition-colors cursor-pointer overflow-hidden"
+              onClick={() => setActiveSubPanel("proxy")}
+            >
+              <Badge variant="secondary" className="text-xs shrink-0">
+                {form.proxyConfig.type?.toUpperCase()}
+              </Badge>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span className="block min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm">
+                      {form.proxyConfig.host}:{form.proxyConfig.port}
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" align="start" className="max-w-xs break-all">
+                    {form.proxyConfig.type?.toUpperCase()} {form.proxyConfig.host}:{form.proxyConfig.port}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+              <X
+                size={14}
+                className="text-muted-foreground hover:text-destructive flex-shrink-0"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  clearProxyConfig();
+                }}
+              />
+            </button>
+          ) : (
+            <Button
+              variant="ghost"
+              className="w-full h-9 justify-start gap-2 text-sm"
+              onClick={() => setActiveSubPanel("proxy")}
+            >
+              <Plus size={14} />
+              {t("hostDetails.proxy.configure")}
+            </Button>
+          )}
         </Card>
 
         {/* Environment Variables */}
@@ -1466,35 +1491,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,
                     }}
                   >
@@ -1503,13 +1513,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>

components/HostForm.tsx

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

components/HostTreeView.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight, FileSymlink, Folder, FolderOpen, Monitor, Server, Expand, Minimize2 } from 'lucide-react';
+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';
@@ -32,6 +32,9 @@ interface HostTreeViewProps {
   moveGroup: (sourcePath: string, targetPath: string) => void;
   managedGroupPaths?: Set<string>;
   onUnmanageGroup?: (groupPath: string) => void;
+  isMultiSelectMode?: boolean;
+  selectedHostIds?: Set<string>;
+  toggleHostSelection?: (hostId: string) => void;
 }
 
 interface TreeNodeProps {
@@ -53,6 +56,9 @@ interface TreeNodeProps {
   moveGroup: (sourcePath: string, targetPath: string) => void;
   managedGroupPaths?: Set<string>;
   onUnmanageGroup?: (groupPath: string) => void;
+  isMultiSelectMode?: boolean;
+  selectedHostIds?: Set<string>;
+  toggleHostSelection?: (hostId: string) => void;
 }
 
 const TreeNode: React.FC<TreeNodeProps> = ({
@@ -74,6 +80,9 @@ const TreeNode: React.FC<TreeNodeProps> = ({
   moveGroup,
   managedGroupPaths,
   onUnmanageGroup,
+  isMultiSelectMode,
+  selectedHostIds,
+  toggleHostSelection,
 }) => {
   const { t } = useI18n();
   const isExpanded = expandedPaths.has(node.path);
@@ -215,9 +224,12 @@ const TreeNode: React.FC<TreeNodeProps> = ({
               moveGroup={moveGroup}
               managedGroupPaths={managedGroupPaths}
               onUnmanageGroup={onUnmanageGroup}
+              isMultiSelectMode={isMultiSelectMode}
+              selectedHostIds={selectedHostIds}
+              toggleHostSelection={toggleHostSelection}
             />
           ))}
-          
+
           {/* Hosts in this group */}
           {sortedHosts.map((host) => (
             <HostTreeItem
@@ -230,6 +242,9 @@ const TreeNode: React.FC<TreeNodeProps> = ({
               onDeleteHost={onDeleteHost}
               onCopyCredentials={onCopyCredentials}
               moveHostToGroup={moveHostToGroup}
+              isMultiSelectMode={isMultiSelectMode}
+              selectedHostIds={selectedHostIds}
+              toggleHostSelection={toggleHostSelection}
             />
           ))}
         </CollapsibleContent>
@@ -247,6 +262,9 @@ interface HostTreeItemProps {
   onDeleteHost: (host: Host) => void;
   onCopyCredentials: (host: Host) => void;
   moveHostToGroup: (hostId: string, groupPath: string | null) => void;
+  isMultiSelectMode?: boolean;
+  selectedHostIds?: Set<string>;
+  toggleHostSelection?: (hostId: string) => void;
 }
 
 const HostTreeItem: React.FC<HostTreeItemProps> = ({
@@ -258,6 +276,9 @@ const HostTreeItem: React.FC<HostTreeItemProps> = ({
   onDeleteHost,
   onCopyCredentials,
   moveHostToGroup: _moveHostToGroup,
+  isMultiSelectMode,
+  selectedHostIds,
+  toggleHostSelection,
 }) => {
   const { t } = useI18n();
   const paddingLeft = `${depth * 20 + 12}px`;
@@ -270,18 +291,40 @@ const HostTreeItem: React.FC<HostTreeItemProps> = ({
   const displayPort = isTelnet
     ? (host.telnetPort ?? host.port ?? 23)
     : (host.port ?? 22);
+  const isSelected = isMultiSelectMode && selectedHostIds?.has(host.id);
 
   return (
     <ContextMenu>
       <ContextMenuTrigger>
         <div
-          className="flex items-center py-2 pr-3 text-sm cursor-pointer transition-colors select-none group hover:bg-secondary/40 rounded-lg"
+          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
+          draggable={!isMultiSelectMode}
           onDragStart={(e) => e.dataTransfer.setData("host-id", host.id)}
-          onClick={() => onConnect(safeHost)}
+          onClick={() => {
+            if (isMultiSelectMode && toggleHostSelection) {
+              toggleHostSelection(host.id);
+            } else {
+              onConnect(safeHost);
+            }
+          }}
         >
-          <div className="mr-2 flex-shrink-0 w-4 h-4" />
+          {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>
@@ -351,6 +394,9 @@ export const HostTreeView: React.FC<HostTreeViewProps> = ({
   moveGroup,
   managedGroupPaths,
   onUnmanageGroup,
+  isMultiSelectMode,
+  selectedHostIds,
+  toggleHostSelection,
 }) => {
   const { t } = useI18n();
   
@@ -471,6 +517,9 @@ export const HostTreeView: React.FC<HostTreeViewProps> = ({
           moveGroup={moveGroup}
           managedGroupPaths={managedGroupPaths}
           onUnmanageGroup={onUnmanageGroup}
+          isMultiSelectMode={isMultiSelectMode}
+          selectedHostIds={selectedHostIds}
+          toggleHostSelection={toggleHostSelection}
         />
       ))}
 
@@ -486,6 +535,9 @@ export const HostTreeView: React.FC<HostTreeViewProps> = ({
           onDeleteHost={onDeleteHost}
           onCopyCredentials={onCopyCredentials}
           moveHostToGroup={moveHostToGroup}
+          isMultiSelectMode={isMultiSelectMode}
+          selectedHostIds={selectedHostIds}
+          toggleHostSelection={toggleHostSelection}
         />
       ))}
       

components/KeyManager.tsx

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

components/KeychainManager.tsx

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

components/LogView.tsx

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

components/PortForwardingNew.tsx

@@ -307,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}`;
@@ -546,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;
 
@@ -701,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)}

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

@@ -17,7 +17,6 @@ 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";
 
@@ -68,7 +67,7 @@ interface QuickSwitcherProps {
   onSelectTab: (tabId: string) => void;
   onClose: () => void;
   onCreateLocalTerminal?: () => void;
-  onCreateWorkspace?: () => void;
+  // onCreateWorkspace removed - feature not currently used
   keyBindings?: KeyBinding[];
 }
 
@@ -83,7 +82,6 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
   onSelectTab,
   onClose,
   onCreateLocalTerminal,
-  onCreateWorkspace,
   keyBindings,
 }) => {
   const { t } = useI18n();
@@ -132,7 +130,8 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
     [sessions]
   );
 
-  const showCategorized = query.trim().length > 0;
+  // Always show categorized view (Hosts/Tabs/Quick connect)
+  const showCategorized = true;
 
   // Memoize flat items list and index map
   const { flatItems, itemIndexMap } = useMemo(() => {
@@ -242,209 +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((host) => (
-                    <HostItem
-                      key={host.id}
-                      host={host}
-                      isSelected={getItemIndex("host", host.id) === selectedIndex}
-                      onSelect={onSelect}
-                      onMouseEnter={() => setSelectedIndex(getItemIndex("host", host.id))}
-                    />
-                  ))
-                ) : (
-                  <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((host) => (
-                    <HostItem
-                      key={host.id}
-                      host={host}
-                      isSelected={getItemIndex("host", host.id) === selectedIndex}
-                      onSelect={onSelect}
-                      onMouseEnter={() => setSelectedIndex(getItemIndex("host", host.id))}
-                    />
-                  ))}
+                );
+              })}
+
+              {/* 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/SFTPModal.tsx

@@ -21,6 +21,7 @@ import { useSftpModalPath } from "./sftp-modal/hooks/useSftpModalPath";
 import { useSftpModalSelection } from "./sftp-modal/hooks/useSftpModalSelection";
 import { useSftpModalSession } from "./sftp-modal/hooks/useSftpModalSession";
 import { useSftpModalFileActions } from "./sftp-modal/hooks/useSftpModalFileActions";
+import { useSftpModalKeyboardShortcuts } from "./sftp-modal/hooks/useSftpModalKeyboardShortcuts";
 import { joinPath, isRootPath, getParentPath } from "./sftp-modal/pathUtils";
 import { toast } from "./ui/toast";
 import { Dialog, DialogContent } from "./ui/dialog";
@@ -41,6 +42,7 @@ interface SFTPModalProps {
     proxy?: NetcattyProxyConfig;
     jumpHosts?: NetcattyJumpHost[];
     sftpSudo?: boolean;
+    legacyAlgorithms?: boolean;
   };
   open: boolean;
   onClose: () => void;
@@ -48,6 +50,8 @@ interface SFTPModalProps {
   initialPath?: string;
   /** Initial entries to upload when SFTP modal opens. Used for drag-and-drop to terminal. */
   initialEntriesToUpload?: DropEntry[];
+  /** Callback to update the host (e.g. for bookmark persistence). */
+  onUpdateHost?: (host: Host) => void;
 }
 
 const SFTPModal: React.FC<SFTPModalProps> = ({
@@ -57,6 +61,7 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
   onClose,
   initialPath,
   initialEntriesToUpload,
+  onUpdateHost,
 }) => {
   const {
     openSftp,
@@ -85,7 +90,15 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
     showSaveDialog,
   } = useSftpBackend();
   const { t } = useI18n();
-  const { sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload } = useSettingsState();
+  const {
+    sftpAutoSync,
+    sftpShowHiddenFiles,
+    sftpUseCompressedUpload,
+    hotkeyScheme,
+    keyBindings,
+    editorWordWrap,
+    setEditorWordWrap,
+  } = useSettingsState();
   const isLocalSession = host.protocol === "local";
   const [filenameEncoding, setFilenameEncoding] = useState<SftpFilenameEncoding>(
     host.sftpEncoding ?? "auto"
@@ -195,6 +208,7 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
     loading,
     setLoading,
     reconnecting,
+    sessionVersion,
     ensureSftp,
     loadFiles,
     closeSftpSession,
@@ -287,6 +301,13 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
     handleDelete,
     handleCreateFolder,
     handleCreateFile,
+    showCreateDialog,
+    setShowCreateDialog,
+    createType,
+    createName,
+    setCreateName,
+    isCreating,
+    handleCreateSubmit,
     showRenameDialog,
     setShowRenameDialog,
     renameTarget,
@@ -382,9 +403,40 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
     setLoading,
     t,
     useCompressedUpload: sftpUseCompressedUpload,
+    listSftp: listSftpWithEncoding,
+    deleteLocalFile,
   });
+  const hasEverOpenedRef = useRef(false);
+
+  const hasActiveTransferTasks = useMemo(
+    () =>
+      uploadTasks.some(
+        (task) =>
+          task.status === "pending" ||
+          task.status === "uploading" ||
+          task.status === "downloading",
+      ),
+    [uploadTasks],
+  );
+
+  useEffect(() => {
+    if (open) {
+      hasEverOpenedRef.current = true;
+      return;
+    }
+
+    if (!hasEverOpenedRef.current) return;
+    if (uploading || hasActiveTransferTasks) return;
+
+    void closeSftpSession();
+  }, [closeSftpSession, hasActiveTransferTasks, open, sessionVersion, uploading]);
 
   const handleClose = async () => {
+    if (uploading || hasActiveTransferTasks) {
+      onClose();
+      return;
+    }
+
     await closeSftpSession();
     onClose();
   };
@@ -508,6 +560,56 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
     onNavigateUp: handleUp,
   });
 
+  // Keyboard shortcuts for modal
+  const handleKeyboardRename = useCallback((file: RemoteFile) => {
+    openRenameDialog(file);
+  }, [openRenameDialog]);
+
+  const handleKeyboardDelete = useCallback((fileNames: string[]) => {
+    // Find the files to pass to confirm dialog
+    if (fileNames.length === 0) return;
+    if (!confirm(t("sftp.deleteConfirm.title", { count: fileNames.length }))) return;
+
+    // Delete files
+    (async () => {
+      try {
+        for (const fileName of fileNames) {
+          const fullPath = joinPathForSession(currentPath, fileName);
+          if (isLocalSession) {
+            await deleteLocalFile(fullPath);
+          } else {
+            await deleteSftpWithEncoding(await ensureSftp(), fullPath);
+          }
+        }
+        await loadFiles(currentPath, { force: true });
+        setSelectedFiles(new Set());
+      } catch (e) {
+        toast.error(
+          e instanceof Error ? e.message : t("sftp.error.deleteFailed"),
+          "SFTP",
+        );
+      }
+    })();
+  }, [currentPath, isLocalSession, deleteLocalFile, deleteSftpWithEncoding, ensureSftp, loadFiles, setSelectedFiles, t, joinPathForSession]);
+
+  const handleKeyboardNewFolder = useCallback(() => {
+    handleCreateFolder();
+  }, [handleCreateFolder]);
+
+  useSftpModalKeyboardShortcuts({
+    keyBindings,
+    hotkeyScheme,
+    open,
+    files,
+    visibleFiles: displayFiles,
+    selectedFiles,
+    setSelectedFiles,
+    onRefresh: () => loadFiles(currentPath, { force: true }),
+    onRename: handleKeyboardRename,
+    onDelete: handleKeyboardDelete,
+    onNewFolder: handleKeyboardNewFolder,
+  });
+
   const handleDeleteSelected = async () => {
     if (selectedFiles.size === 0) return;
     const fileNames = Array.from(selectedFiles);
@@ -583,6 +685,8 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
           onCreateFile={handleCreateFile}
           onFileSelect={handleFileSelect}
           onFolderSelect={handleFolderSelect}
+          onUpdateHost={onUpdateHost}
+          onNavigateToBookmark={(path) => setCurrentPath(path)}
         />
 
         <SftpModalFileList
@@ -659,6 +763,13 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
         getSymbolicPermissions={getSymbolicPermissions}
         handleSavePermissions={handleSavePermissions}
         isChangingPermissions={isChangingPermissions}
+        showCreateDialog={showCreateDialog}
+        setShowCreateDialog={setShowCreateDialog}
+        createType={createType}
+        createName={createName}
+        setCreateName={setCreateName}
+        isCreating={isCreating}
+        handleCreateSubmit={handleCreateSubmit}
       />
 
       {/* File Opener Dialog */}
@@ -684,6 +795,8 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
         fileName={textEditorTarget?.name || ""}
         initialContent={textEditorContent}
         onSave={handleSaveTextFile}
+        editorWordWrap={editorWordWrap}
+        onToggleWordWrap={() => setEditorWordWrap(!editorWordWrap)}
       />
     </Dialog>
   );

components/SelectHostPanel.tsx

@@ -197,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(

components/SettingsPage.tsx

@@ -3,8 +3,9 @@
  * This component is rendered in a separate Electron window
  */
 import { AppWindow, Cloud, FileType, HardDrive, Keyboard, Palette, TerminalSquare, X } from "lucide-react";
-import React, { useCallback, useEffect, useState } from "react";
+import 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 { I18nProvider, useI18n } from "../application/i18n/I18nProvider";
@@ -31,17 +32,37 @@ const SettingsSyncTabWithVault: React.FC = () => {
         keys,
         identities,
         snippets,
+        customGroups,
+        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, knownHosts }),
+        [hosts, keys, identities, snippets, customGroups, knownHosts],
+    );
+
     return (
         <SettingsSyncTab
-            hosts={hosts}
-            keys={keys}
-            identities={identities}
-            snippets={snippets}
+            vault={vault}
+            portForwardingRules={portForwardingRulesForSync}
             importDataFromString={importDataFromString}
+            importPortForwardingRules={importPortForwardingRules}
             clearVaultData={clearVaultData}
         />
     );
@@ -211,6 +232,11 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                             setSessionLogsDir={settings.setSessionLogsDir}
                             sessionLogsFormat={settings.sessionLogsFormat}
                             setSessionLogsFormat={settings.setSessionLogsFormat}
+                            toggleWindowHotkey={settings.toggleWindowHotkey}
+                            setToggleWindowHotkey={settings.setToggleWindowHotkey}
+                            closeToTray={settings.closeToTray}
+                            setCloseToTray={settings.setCloseToTray}
+                            hotkeyRegistrationError={settings.hotkeyRegistrationError}
                         />
                     )}
                 </div>

components/SftpView.tsx

@@ -14,7 +14,7 @@
  * - components/sftp/SftpHostPicker.tsx - Host selection dialog
  */
 
-import React, { memo, useLayoutEffect, useMemo, useRef } from "react";
+import React, { memo, useCallback, useLayoutEffect, useMemo, useRef } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { useIsSftpActive } from "../application/state/activeTabStore";
 import { useSftpState } from "../application/state/useSftpState";
@@ -37,6 +37,8 @@ import { Loader2 } from "lucide-react";
 import { SftpContextProvider, activeTabStore } from "./sftp";
 import { useSftpViewPaneCallbacks } from "./sftp/hooks/useSftpViewPaneCallbacks";
 import { useSftpViewTabs } from "./sftp/hooks/useSftpViewTabs";
+import { useSftpKeyboardShortcuts } from "./sftp/hooks/useSftpKeyboardShortcuts";
+import { sftpFocusStore, SftpFocusedSide, useSftpFocusedSide } from "./sftp/hooks/useSftpFocusedPane";
 
 // Wrapper component that subscribes to activeTabId for CSS visibility
 // This isolates the activeTabId subscription - only this component re-renders on tab switch
@@ -46,12 +48,22 @@ interface SftpViewProps {
   hosts: Host[];
   keys: SSHKey[];
   identities: Identity[];
+  updateHosts: (hosts: Host[]) => void;
 }
 
-const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities }) => {
+const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updateHosts }) => {
   const { t } = useI18n();
   const isActive = useIsSftpActive();
-  const { sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles } = useSettingsState();
+  const {
+    sftpDoubleClickBehavior,
+    sftpAutoSync,
+    sftpShowHiddenFiles,
+    sftpUseCompressedUpload,
+    hotkeyScheme,
+    keyBindings,
+    editorWordWrap,
+    setEditorWordWrap,
+  } = useSettingsState();
 
   // File watch event handlers (stable refs to avoid re-creating the useSftpState options)
   const fileWatchHandlers = useMemo(() => ({
@@ -66,7 +78,12 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities }) =>
     },
   }), [t]);
 
-  const sftp = useSftpState(hosts, keys, identities, fileWatchHandlers);
+  const sftpOptions = useMemo(() => ({
+    ...fileWatchHandlers,
+    useCompressedUpload: sftpUseCompressedUpload,
+  }), [fileWatchHandlers, sftpUseCompressedUpload]);
+
+  const sftp = useSftpState(hosts, keys, identities, sftpOptions);
 
   // Get stream transfer functions for optimized downloads
   const { showSaveDialog, startStreamTransfer } = useSftpBackend();
@@ -84,6 +101,23 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities }) =>
   const autoSyncRef = useRef(sftpAutoSync);
   autoSyncRef.current = sftpAutoSync;
 
+  // SFTP keyboard shortcuts handler
+  useSftpKeyboardShortcuts({
+    keyBindings,
+    hotkeyScheme,
+    sftpRef,
+    isActive,
+    showHiddenFiles: sftpShowHiddenFiles,
+  });
+
+  // Subscribe to focused side for visual indicator
+  const focusedSide = useSftpFocusedSide();
+
+  // Handle pane focus when clicking on a pane container
+  const handlePaneFocus = useCallback((side: SftpFocusedSide) => {
+    sftpFocusStore.setFocusedSide(side);
+  }, []);
+
   // Sync activeTabId to external store (allows child components to subscribe without parent re-render)
   // Using useLayoutEffect to sync before paint
   useLayoutEffect(() => {
@@ -140,7 +174,7 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities }) =>
   });
 
   const visibleTransfers = useMemo(
-    () => sftp.transfers.slice(-5),
+    () => [...sftp.transfers].reverse().slice(0, 5),
     [sftp.transfers],
   );
 
@@ -186,6 +220,7 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities }) =>
   return (
     <SftpContextProvider
       hosts={hosts}
+      updateHosts={updateHosts}
       draggedFiles={draggedFiles}
       dragCallbacks={dragCallbacks}
       leftCallbacks={leftCallbacks}
@@ -200,7 +235,23 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities }) =>
         style={containerStyle}
       >
         <div className="flex-1 grid grid-cols-1 lg:grid-cols-2 min-h-0 border-t border-border/70">
-          <div className="relative border-r border-border/70 flex flex-col">
+          <div
+            className="relative border-r border-border/70 flex flex-col"
+            onClick={() => handlePaneFocus("left")}
+          >
+            {/* Focus indicator triangle */}
+            {focusedSide === "left" && (
+              <div
+                className="absolute top-0 left-0 z-50 pointer-events-none"
+                style={{
+                  width: 0,
+                  height: 0,
+                  borderStyle: 'solid',
+                  borderWidth: '12px 12px 0 0',
+                  borderColor: 'hsl(var(--primary)) transparent transparent transparent',
+                }}
+              />
+            )}
             {/* Left side tab bar - only show when there are tabs */}
             {leftTabsInfo.length > 0 && (
               <SftpTabBar
@@ -240,7 +291,23 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities }) =>
               )}
             </div>
           </div>
-          <div className="relative flex flex-col">
+          <div
+            className="relative flex flex-col"
+            onClick={() => handlePaneFocus("right")}
+          >
+            {/* Focus indicator triangle */}
+            {focusedSide === "right" && (
+              <div
+                className="absolute top-0 left-0 z-50 pointer-events-none"
+                style={{
+                  width: 0,
+                  height: 0,
+                  borderStyle: 'solid',
+                  borderWidth: '12px 12px 0 0',
+                  borderColor: 'hsl(var(--primary)) transparent transparent transparent',
+                }}
+              />
+            )}
             {/* Right side tab bar - only show when there are tabs */}
             {rightTabsInfo.length > 0 && (
               <SftpTabBar
@@ -305,6 +372,8 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities }) =>
           textEditorContent={textEditorContent}
           setTextEditorContent={setTextEditorContent}
           handleSaveTextFile={handleSaveTextFile}
+          editorWordWrap={editorWordWrap}
+          setEditorWordWrap={setEditorWordWrap}
           showFileOpenerDialog={showFileOpenerDialog}
           setShowFileOpenerDialog={setShowFileOpenerDialog}
           fileOpenerTarget={fileOpenerTarget}

components/SnippetsManager.tsx

@@ -1,11 +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 { ManagedSource } from '../domain/models';
+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';
@@ -25,6 +25,8 @@ interface SnippetsManagerProps {
   hosts: Host[];
   customGroups?: string[];
   shellHistory: ShellHistoryEntry[];
+  hotkeyScheme: HotkeyScheme;
+  keyBindings: KeyBinding[];
   onSave: (snippet: Snippet) => void;
   onDelete: (id: string) => void;
   onPackagesChange: (packages: string[]) => void;
@@ -46,6 +48,8 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
   hosts,
   customGroups = [],
   shellHistory,
+  hotkeyScheme,
+  keyBindings,
   onSave,
   onDelete,
   onPackagesChange,
@@ -89,6 +93,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);
@@ -114,6 +299,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
         tags: editingSnippet.tags || [],
         package: editingSnippet.package || '',
         targets: targetSelection,
+        shortkey: editingSnippet.shortkey,
       });
       setRightPanelMode('none');
     }
@@ -606,6 +792,50 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
               />
             </Card>
 
+            {/* 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">
@@ -895,6 +1125,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"

components/Terminal.tsx

@@ -30,9 +30,11 @@ import { HoverCard, HoverCardContent, HoverCardTrigger } from "./ui/hover-card";
 import { toast } from "./ui/toast";
 import { useAvailableFonts } from "../application/state/fontStore";
 import { TERMINAL_THEMES } from "../infrastructure/config/terminalThemes";
+import { useCustomThemes } from "../application/state/customThemeStore";
 
 import { TerminalConnectionDialog } from "./terminal/TerminalConnectionDialog";
 import { TerminalToolbar } from "./terminal/TerminalToolbar";
+import { TerminalComposeBar } from "./terminal/TerminalComposeBar";
 import { TerminalContextMenu } from "./terminal/TerminalContextMenu";
 import { TerminalSearchBar } from "./terminal/TerminalSearchBar";
 import { createTerminalSessionStarters, type PendingAuth } from "./terminal/runtime/createTerminalSessionStarters";
@@ -137,6 +139,8 @@ interface TerminalProps {
   onSplitVertical?: () => void;
   isBroadcastEnabled?: boolean;
   onToggleBroadcast?: () => void;
+  onToggleComposeBar?: () => void;
+  isWorkspaceComposeBarOpen?: boolean;
   onBroadcastInput?: (data: string, sourceSessionId: string) => void;
 }
 
@@ -191,6 +195,8 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   onSplitVertical,
   isBroadcastEnabled,
   onToggleBroadcast,
+  onToggleComposeBar,
+  isWorkspaceComposeBarOpen,
   onBroadcastInput,
 }) => {
   // Timeout for connection - increased to 120s to allow time for keyboard-interactive (2FA) authentication
@@ -209,6 +215,8 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const hasConnectedRef = useRef(false);
   const hasRunStartupCommandRef = useRef(false);
   const commandBufferRef = useRef<string>("");
+  const [hasMouseTracking, setHasMouseTracking] = useState(false);
+  const mouseTrackingRef = useRef(false);
   const serialLineBufferRef = useRef<string>("");
 
   const terminalSettingsRef = useRef(terminalSettings);
@@ -216,12 +224,32 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
   useEffect(() => {
     if (xtermRuntimeRef.current) {
-      xtermRuntimeRef.current.keywordHighlighter.setRules(
-        terminalSettings?.keywordHighlightRules ?? [],
-        terminalSettings?.keywordHighlightEnabled ?? false
-      );
+      // Merge global rules with host-level rules
+      // Host-level rules are appended to global rules, allowing hosts to add custom highlighting
+      const globalRules = terminalSettings?.keywordHighlightRules ?? [];
+      const hostRules = host?.keywordHighlightRules ?? [];
+
+      // Check if highlighting is enabled at either global or host level
+      const globalEnabled = terminalSettings?.keywordHighlightEnabled ?? false;
+      const hostEnabled = host?.keywordHighlightEnabled ?? false;
+
+      // Merge rules: include only rules from enabled sources
+      const mergedRules = [
+        ...(globalEnabled ? globalRules : []),
+        ...(hostEnabled ? hostRules : [])
+      ];
+
+      // Enable highlighting if either global or host-level is enabled
+      const isEnabled = globalEnabled || hostEnabled;
+
+      xtermRuntimeRef.current.keywordHighlighter.setRules(mergedRules, isEnabled);
     }
-  }, [terminalSettings?.keywordHighlightEnabled, terminalSettings?.keywordHighlightRules]);
+  }, [
+    terminalSettings?.keywordHighlightEnabled,
+    terminalSettings?.keywordHighlightRules,
+    host?.keywordHighlightEnabled,
+    host?.keywordHighlightRules
+  ]);
 
   const hotkeySchemeRef = useRef(hotkeyScheme);
   const keyBindingsRef = useRef(keyBindings);
@@ -235,8 +263,12 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   isBroadcastEnabledRef.current = isBroadcastEnabled;
   onBroadcastInputRef.current = onBroadcastInput;
 
+  // Snippets ref for shortkey support in terminal
+  const snippetsRef = useRef(snippets);
+  snippetsRef.current = snippets;
+
   const terminalBackend = useTerminalBackend();
-  const { resizeSession } = terminalBackend;
+  const { resizeSession, setSessionEncoding } = terminalBackend;
 
 
 
@@ -266,6 +298,13 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const [isDraggingOver, setIsDraggingOver] = useState(false);
   const dragCounterRef = useRef(0);
   const [pendingUploadEntries, setPendingUploadEntries] = useState<DropEntry[]>([]);
+  const [isComposeBarOpen, setIsComposeBarOpen] = useState(false);
+  const [terminalEncoding, setTerminalEncoding] = useState<'utf-8' | 'gb18030'>(() => {
+    if (host?.charset && /^gb/i.test(String(host.charset).trim())) return 'gb18030';
+    return 'utf-8';
+  });
+  const terminalEncodingRef = useRef(terminalEncoding);
+  terminalEncodingRef.current = terminalEncoding;
 
   const terminalSearch = useTerminalSearch({ searchAddonRef, termRef });
   const {
@@ -320,13 +359,17 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const [pendingHostKeyInfo, setPendingHostKeyInfo] = useState<HostKeyInfo | null>(null);
   const pendingConnectionRef = useRef<(() => void) | null>(null);
 
+  // Subscribe to custom theme changes so editing triggers re-render
+  const customThemes = useCustomThemes();
+
   const effectiveTheme = useMemo(() => {
     if (host.theme) {
-      const hostTheme = TERMINAL_THEMES.find((t) => t.id === host.theme);
+      const hostTheme = TERMINAL_THEMES.find((t) => t.id === host.theme)
+        || customThemes.find((t) => t.id === host.theme);
       if (hostTheme) return hostTheme;
     }
     return terminalTheme;
-  }, [host.theme, terminalTheme]);
+  }, [host.theme, terminalTheme, customThemes]);
 
   const resolvedChainHosts =
     (host.hostChain?.hostIds
@@ -392,6 +435,14 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     setProgressLogs,
     setProgressValue,
     setChainProgress,
+    t,
+    onSessionAttached: (id: string) => {
+      // Sync terminal encoding to SSH backend before first data arrives
+      const isSSH = host.protocol !== 'local' && host.protocol !== 'serial' && host.protocol !== 'telnet' && host.protocol !== 'mosh' && !host.moshEnabled && !host.id?.startsWith('local-') && !host.id?.startsWith('serial-') && host.hostname !== 'localhost';
+      if (isSSH) {
+        setSessionEncoding(id, terminalEncodingRef.current);
+      }
+    },
     onSessionExit,
     onTerminalDataCapture,
     onOsDetected,
@@ -425,6 +476,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
           onHotkeyActionRef,
           isBroadcastEnabledRef,
           onBroadcastInputRef,
+          snippetsRef,
           sessionId,
           statusRef,
           onCommandExecuted,
@@ -442,6 +494,20 @@ const TerminalComponent: React.FC<TerminalProps> = ({
         serializeAddonRef.current = runtime.serializeAddon;
         searchAddonRef.current = runtime.searchAddon;
 
+        // Apply merged keyword highlight rules immediately after runtime creation
+        // This fixes a timing issue where the useEffect for keyword highlighting
+        // runs before the runtime is created, causing host-level rules to be missed
+        const globalRules = terminalSettingsRef.current?.keywordHighlightRules ?? [];
+        const hostRules = host?.keywordHighlightRules ?? [];
+        const globalEnabled = terminalSettingsRef.current?.keywordHighlightEnabled ?? false;
+        const hostEnabled = host?.keywordHighlightEnabled ?? false;
+        const mergedRules = [
+          ...(globalEnabled ? globalRules : []),
+          ...(hostEnabled ? hostRules : [])
+        ];
+        const isEnabled = globalEnabled || hostEnabled;
+        runtime.keywordHighlighter.setRules(mergedRules, isEnabled);
+
         const term = runtime.term;
 
         if (host.protocol === "serial") {
@@ -640,6 +706,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
         termRef.current.options.scrollOnUserInput = terminalSettings.scrollOnInput;
         termRef.current.options.altClickMovesCursor = !terminalSettings.altAsMeta;
         termRef.current.options.wordSeparator = terminalSettings.wordSeparators;
+        termRef.current.options.ignoreBracketedPasteMode = terminalSettings.disableBracketedPaste ?? false;
       }
 
       setTimeout(() => safeFit(), 50);
@@ -817,6 +884,61 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     term.onSelectionChange(onSelectionChange);
   }, [terminalSettings?.copyOnSelect]);
 
+  // Track whether the terminal application has enabled mouse tracking
+  // (e.g. tmux with `set -g mouse on`, vim with `set mouse=a`).
+  // When mouse tracking is active, disable Netcatty's context menu to avoid
+  // conflicting with the application's own mouse handling.
+  useEffect(() => {
+    const term = termRef.current;
+    if (!term) return;
+
+    const disposable = term.onWriteParsed(() => {
+      const tracking = term.modes.mouseTrackingMode !== 'none';
+      if (tracking !== mouseTrackingRef.current) {
+        mouseTrackingRef.current = tracking;
+        setHasMouseTracking(tracking);
+      }
+    });
+
+    // Set initial state
+    const initial = term.modes.mouseTrackingMode !== 'none';
+    mouseTrackingRef.current = initial;
+    setHasMouseTracking(initial);
+
+    return () => disposable.dispose();
+  }, [sessionId]);
+
+  // Prevent xterm.js's built-in rightClickHandler and right-button mouseup
+  // from interfering with tmux/vim popup menus when mouse tracking is active.
+  // - contextmenu: xterm.js calls textarea.select() which steals focus
+  // - mouseup (button 2): tmux interprets the right-button release as a
+  //   dismiss action, closing the popup menu immediately after it appears
+  // Both are intercepted at the capture phase before xterm.js's own listeners.
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const handleContextMenuCapture = (e: MouseEvent) => {
+      if (mouseTrackingRef.current) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
+    };
+
+    const handleMouseUpCapture = (e: MouseEvent) => {
+      if (e.button === 2 && mouseTrackingRef.current) {
+        e.stopImmediatePropagation();
+      }
+    };
+
+    el.addEventListener('contextmenu', handleContextMenuCapture, true);
+    el.addEventListener('mouseup', handleMouseUpCapture, true);
+    return () => {
+      el.removeEventListener('contextmenu', handleContextMenuCapture, true);
+      el.removeEventListener('mouseup', handleMouseUpCapture, true);
+    };
+  }, [sessionId]);
+
   useEffect(() => {
     let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
 
@@ -836,11 +958,19 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     };
   }, []);
 
+  const disableBracketedPasteRef = useRef(terminalSettings?.disableBracketedPaste ?? false);
+  disableBracketedPasteRef.current = terminalSettings?.disableBracketedPaste ?? false;
+
+  const scrollOnPasteRef = useRef(terminalSettings?.scrollOnPaste ?? true);
+  scrollOnPasteRef.current = terminalSettings?.scrollOnPaste ?? true;
+
   const terminalContextActions = useTerminalContextActions({
     termRef,
     sessionRef,
     terminalBackend,
     onHasSelectionChange: setHasSelection,
+    disableBracketedPasteRef,
+    scrollOnPasteRef,
   });
 
   const handleSnippetClick = (cmd: string) => {
@@ -853,6 +983,13 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     termRef.current?.writeln("\r\n[No active SSH session]");
   };
 
+  const handleSetTerminalEncoding = (encoding: 'utf-8' | 'gb18030') => {
+    setTerminalEncoding(encoding);
+    if (sessionRef.current) {
+      setSessionEncoding(sessionRef.current, encoding);
+    }
+  };
+
   const handleOpenSFTP = async () => {
     // If SFTP is already open, toggle it off
     if (showSFTP) {
@@ -935,6 +1072,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     if (!termRef.current) return;
     cleanupSession();
     auth.resetForRetry();
+    hasRunStartupCommandRef.current = false;
     setStatus("connecting");
     setError(null);
     setProgressLogs(["Retrying secure channel..."]);
@@ -991,7 +1129,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
     try {
       const dropEntries = await extractDropEntries(e.dataTransfer);
-      
+
       if (dropEntries.length === 0) {
         return;
       }
@@ -1055,6 +1193,10 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       onClose={() => onCloseSession?.(sessionId)}
       isSearchOpen={isSearchOpen}
       onToggleSearch={handleToggleSearch}
+      isComposeBarOpen={inWorkspace ? isWorkspaceComposeBarOpen : isComposeBarOpen}
+      onToggleComposeBar={inWorkspace ? onToggleComposeBar : () => setIsComposeBarOpen(prev => !prev)}
+      terminalEncoding={terminalEncoding}
+      onSetTerminalEncoding={handleSetTerminalEncoding}
     />
   );
 
@@ -1064,8 +1206,6 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       : status === "connecting"
         ? "bg-amber-400"
         : "bg-rose-500";
-  const _isConnecting = status === "connecting";
-  const _hasError = Boolean(error);
 
   return (
     <TerminalContextMenu
@@ -1073,6 +1213,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       hotkeyScheme={hotkeyScheme}
       keyBindings={keyBindings}
       rightClickBehavior={terminalSettings?.rightClickBehavior}
+      isAlternateScreen={hasMouseTracking}
       onCopy={terminalContextActions.onCopy}
       onPaste={terminalContextActions.onPaste}
       onSelectAll={terminalContextActions.onSelectAll}
@@ -1082,8 +1223,11 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       onSplitVertical={onSplitVertical}
       onClose={inWorkspace ? () => onCloseSession?.(sessionId) : undefined}
     >
-      <div 
-        className="relative h-full w-full flex overflow-hidden bg-gradient-to-br from-[#050910] via-[#06101a] to-[#0b1220]"
+      <div
+        className={cn(
+          "relative h-full w-full flex overflow-hidden bg-gradient-to-br from-[#050910] via-[#06101a] to-[#0b1220]",
+          isComposeBarOpen && !inWorkspace && "flex-col"
+        )}
         onDragEnter={handleDragEnter}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
@@ -1095,13 +1239,13 @@ const TerminalComponent: React.FC<TerminalProps> = ({
             <div className="bg-background/90 backdrop-blur-md rounded-lg shadow-lg p-6 border border-border">
               <div className="text-center">
                 <div className="text-lg font-semibold mb-2">
-                  {isLocalConnection 
+                  {isLocalConnection
                     ? t("terminal.dragDrop.localTitle")
                     : t("terminal.dragDrop.remoteTitle")
                   }
                 </div>
                 <div className="text-sm text-muted-foreground">
-                  {isLocalConnection 
+                  {isLocalConnection
                     ? t("terminal.dragDrop.localMessage")
                     : t("terminal.dragDrop.remoteMessage")
                   }
@@ -1260,6 +1404,34 @@ const TerminalComponent: React.FC<TerminalProps> = ({
                           </div>
                         </div>
                       )}
+                      {/* Swap bar */}
+                      {serverStats.swapTotal !== null && serverStats.swapTotal > 0 && (
+                        <div className="space-y-1.5">
+                          <div className="font-medium text-[11px] text-muted-foreground">{t("terminal.serverStats.swap")}</div>
+                          <div className="w-full h-3 bg-muted rounded overflow-hidden flex">
+                            {serverStats.swapUsed !== null && serverStats.swapUsed > 0 && (
+                              <div
+                                className="h-full bg-rose-500"
+                                style={{ width: `${(serverStats.swapUsed / serverStats.swapTotal) * 100}%` }}
+                                title={`${t("terminal.serverStats.swapUsed")}: ${(serverStats.swapUsed / 1024).toFixed(1)}G`}
+                              />
+                            )}
+                          </div>
+                          <div className="flex flex-wrap gap-x-3 gap-y-1 text-[10px]">
+                            <div className="flex items-center gap-1">
+                              <div className="w-2 h-2 rounded-sm bg-rose-500" />
+                              <span>{t("terminal.serverStats.swapUsed")}: {serverStats.swapUsed !== null ? `${(serverStats.swapUsed / 1024).toFixed(1)}G` : '--'}</span>
+                            </div>
+                            <div className="flex items-center gap-1">
+                              <div className="w-2 h-2 rounded-sm bg-muted border border-border" />
+                              <span>{t("terminal.serverStats.swapFree")}: {serverStats.swapTotal !== null && serverStats.swapUsed !== null ? `${((serverStats.swapTotal - serverStats.swapUsed) / 1024).toFixed(1)}G` : '--'}</span>
+                            </div>
+                            <div className="flex items-center gap-1">
+                              <span className="text-muted-foreground">{t("terminal.serverStats.swapTotal")}: {`${(serverStats.swapTotal / 1024).toFixed(1)}G`}</span>
+                            </div>
+                          </div>
+                        </div>
+                      )}
                       {/* Top 10 processes */}
                       {serverStats.topProcesses.length > 0 && (
                         <div className="space-y-1.5">
@@ -1478,48 +1650,67 @@ const TerminalComponent: React.FC<TerminalProps> = ({
           {status !== "connected" && !needsHostKeyVerification && !(
             (isLocalConnection || isSerialConnection) && status === "connecting"
           ) && (
-            <TerminalConnectionDialog
-              host={host}
-              status={status}
-              error={error}
-              progressValue={progressValue}
-              chainProgress={chainProgress}
-              needsAuth={auth.needsAuth}
-              showLogs={showLogs}
-              _setShowLogs={setShowLogs}
-              keys={keys}
-              authProps={{
-                authMethod: auth.authMethod,
-                setAuthMethod: auth.setAuthMethod,
-                authUsername: auth.authUsername,
-                setAuthUsername: auth.setAuthUsername,
-                authPassword: auth.authPassword,
-                setAuthPassword: auth.setAuthPassword,
-                authKeyId: auth.authKeyId,
-                setAuthKeyId: auth.setAuthKeyId,
-                authPassphrase: auth.authPassphrase,
-                setAuthPassphrase: auth.setAuthPassphrase,
-                showAuthPassphrase: auth.showAuthPassphrase,
-                setShowAuthPassphrase: auth.setShowAuthPassphrase,
-                showAuthPassword: auth.showAuthPassword,
-                setShowAuthPassword: auth.setShowAuthPassword,
-                authRetryMessage: auth.authRetryMessage,
-                onSubmit: () => auth.submit(),
-                onSubmitWithoutSave: () => auth.submit({ saveToHost: false }),
-                onCancel: handleCancelConnect,
-                isValid: auth.isValid,
-              }}
-              progressProps={{
-                timeLeft,
-                isCancelling,
-                progressLogs,
-                onCancel: handleCancelConnect,
-                onRetry: handleRetry,
-              }}
-            />
-          )}
+              <TerminalConnectionDialog
+                host={host}
+                status={status}
+                error={error}
+                progressValue={progressValue}
+                chainProgress={chainProgress}
+                needsAuth={auth.needsAuth}
+                showLogs={showLogs}
+                _setShowLogs={setShowLogs}
+                keys={keys}
+                authProps={{
+                  authMethod: auth.authMethod,
+                  setAuthMethod: auth.setAuthMethod,
+                  authUsername: auth.authUsername,
+                  setAuthUsername: auth.setAuthUsername,
+                  authPassword: auth.authPassword,
+                  setAuthPassword: auth.setAuthPassword,
+                  authKeyId: auth.authKeyId,
+                  setAuthKeyId: auth.setAuthKeyId,
+                  authPassphrase: auth.authPassphrase,
+                  setAuthPassphrase: auth.setAuthPassphrase,
+                  showAuthPassphrase: auth.showAuthPassphrase,
+                  setShowAuthPassphrase: auth.setShowAuthPassphrase,
+                  showAuthPassword: auth.showAuthPassword,
+                  setShowAuthPassword: auth.setShowAuthPassword,
+                  authRetryMessage: auth.authRetryMessage,
+                  onSubmit: () => auth.submit(),
+                  onSubmitWithoutSave: () => auth.submit({ saveToHost: false }),
+                  onCancel: handleCancelConnect,
+                  isValid: auth.isValid,
+                }}
+                progressProps={{
+                  timeLeft,
+                  isCancelling,
+                  progressLogs,
+                  onCancel: handleCancelConnect,
+                  onRetry: handleRetry,
+                }}
+              />
+            )}
         </div>
 
+        {/* Compose Bar (solo sessions only; workspace uses TerminalLayer's global bar) */}
+        {isComposeBarOpen && !inWorkspace && (
+          <TerminalComposeBar
+            onSend={(text) => {
+              if (sessionRef.current) {
+                const payload = text + '\r';
+                terminalBackend.writeToSession(sessionRef.current, payload);
+                onBroadcastInput?.(payload, sessionRef.current);
+              }
+            }}
+            onClose={() => {
+              setIsComposeBarOpen(false);
+              termRef.current?.focus();
+            }}
+            isBroadcastEnabled={isBroadcastEnabled}
+            themeColors={effectiveTheme.colors}
+          />
+        )}
+
         <SFTPModal
           host={host}
           credentials={(() => {
@@ -1579,6 +1770,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
               proxy: proxyConfig,
               jumpHosts: jumpHosts && jumpHosts.length > 0 ? jumpHosts : undefined,
               sftpSudo: host.sftpSudo,
+              legacyAlgorithms: host.legacyAlgorithms,
             };
           })()}
           open={showSFTP && status === "connected"}
@@ -1588,6 +1780,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
           }}
           initialPath={sftpInitialPath}
           initialEntriesToUpload={pendingUploadEntries}
+          onUpdateHost={onUpdateHost}
         />
       </div>
     </TerminalContextMenu>

components/TerminalLayer.tsx

@@ -9,6 +9,9 @@ import { cn } from '../lib/utils';
 import { Host, Identity, KnownHost, SSHKey, Snippet, TerminalSession, TerminalTheme, Workspace, WorkspaceNode } from '../types';
 import { DistroAvatar } from './DistroAvatar';
 import Terminal from './Terminal';
+import { TerminalComposeBar } from './terminal/TerminalComposeBar';
+import { TERMINAL_THEMES } from '../infrastructure/config/terminalThemes';
+import { useCustomThemes } from '../application/state/customThemeStore';
 import { Button } from './ui/button';
 import { ScrollArea } from './ui/scroll-area';
 
@@ -179,6 +182,9 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
     }
   }, [activeWorkspace, sessions, terminalBackend]);
 
+  // Workspace-level compose bar state
+  const [isComposeBarOpen, setIsComposeBarOpen] = useState(false);
+
   // Pre-compute host lookup map for O(1) access
   const hostMap = useMemo(() => {
     const map = new Map<string, Host>();
@@ -429,6 +435,48 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   const isFocusMode = activeWorkspace?.viewMode === 'focus';
   const focusedSessionId = activeWorkspace?.focusedSessionId;
 
+  // Subscribe to custom theme changes so editing triggers re-render
+  const customThemes = useCustomThemes();
+
+  // Resolve the effective theme for the compose bar in workspace mode
+  const composeBarThemeColors = useMemo(() => {
+    if (!activeWorkspace || !focusedSessionId) return terminalTheme.colors;
+    const focusedHost = sessionHostsMap.get(focusedSessionId);
+    if (focusedHost?.theme) {
+      const hostTheme = TERMINAL_THEMES.find(t => t.id === focusedHost.theme)
+        || customThemes.find(t => t.id === focusedHost.theme);
+      if (hostTheme) return hostTheme.colors;
+    }
+    return terminalTheme.colors;
+  }, [activeWorkspace, focusedSessionId, sessionHostsMap, terminalTheme, customThemes]);
+
+  // Handle compose bar send for workspace mode
+  const handleComposeSend = useCallback((text: string) => {
+    if (!activeWorkspace) return;
+    const payload = text + '\r';
+    const broadcastEnabled = isBroadcastEnabled?.(activeWorkspace.id);
+
+    if (broadcastEnabled) {
+      // Send to all sessions in the workspace
+      const allSessionIds = sessions
+        .filter(s => s.workspaceId === activeWorkspace.id)
+        .map(s => s.id);
+      for (const sid of allSessionIds) {
+        terminalBackend.writeToSession(sid, payload);
+      }
+    } else {
+      // Validate focusedSessionId is a live session, then fallback to first available
+      const workspaceSessions = sessions.filter(s => s.workspaceId === activeWorkspace.id);
+      const validFocusedId = focusedSessionId && workspaceSessions.some(s => s.id === focusedSessionId)
+        ? focusedSessionId
+        : undefined;
+      const targetId = validFocusedId ?? workspaceSessions[0]?.id;
+      if (targetId) {
+        terminalBackend.writeToSession(targetId, payload);
+      }
+    }
+  }, [activeWorkspace, focusedSessionId, sessions, terminalBackend, isBroadcastEnabled]);
+
   useEffect(() => {
     if (isFocusMode && dropHint) {
       setDropHint(null);
@@ -569,198 +617,222 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   return (
     <div
       ref={workspaceOuterRef}
-      className="absolute inset-0 bg-background flex"
+      className="absolute inset-0 bg-background flex flex-col"
       style={{ display: isTerminalLayerVisible ? 'flex' : 'none', zIndex: isTerminalLayerVisible ? 10 : 0 }}
     >
-      {/* Focus mode sidebar */}
-      {isFocusMode && renderFocusModeSidebar()}
+      <div className="flex-1 flex min-h-0 relative">
+        {/* Focus mode sidebar */}
+        {isFocusMode && renderFocusModeSidebar()}
 
-      {draggingSessionId && !isFocusMode && (
-        <div
-          ref={workspaceOverlayRef}
-          className="absolute inset-0 z-30"
-          onDragOver={(e) => {
-            if (isFocusMode) return;
-            if (!e.dataTransfer.types.includes('session-id')) return;
-            e.preventDefault();
-            e.stopPropagation();
-            const hint = computeSplitHint(e);
-            setDropHint(hint);
-          }}
-          onDragLeave={(e) => {
-            if (!e.dataTransfer.types.includes('session-id')) return;
-            setDropHint(null);
-          }}
-          onDrop={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            handleWorkspaceDrop(e);
-          }}
-        >
-          {dropHint && (
-            <div className="absolute inset-0 pointer-events-none">
-              <div
-                className="absolute bg-emerald-600/35 border border-emerald-400/70 backdrop-blur-sm transition-all duration-150"
-                style={{
-                  width: dropHint.rect ? `${dropHint.rect.w}px` : dropHint.direction === 'vertical' ? '50%' : '100%',
-                  height: dropHint.rect ? `${dropHint.rect.h}px` : dropHint.direction === 'vertical' ? '100%' : '50%',
-                  left: dropHint.rect ? `${dropHint.rect.x}px` : dropHint.direction === 'vertical' ? (dropHint.position === 'left' ? 0 : '50%') : 0,
-                  top: dropHint.rect ? `${dropHint.rect.y}px` : dropHint.direction === 'vertical' ? 0 : (dropHint.position === 'top' ? 0 : '50%'),
-                }}
-              />
-            </div>
-          )}
-        </div>
-      )}
-      <div ref={workspaceInnerRef} className={cn("absolute overflow-hidden", isFocusMode ? "left-56 right-0 top-0 bottom-0" : "inset-0")}>
-        {sessions.map(session => {
-          // Use pre-computed host to avoid creating new objects on every render
-          const host = sessionHostsMap.get(session.id)!;
-          const inActiveWorkspace = !!activeWorkspace && session.workspaceId === activeWorkspace.id;
-          const isActiveSolo = activeTabId === session.id && !activeWorkspace && isTerminalLayerVisible;
+        {draggingSessionId && !isFocusMode && (
+          <div
+            ref={workspaceOverlayRef}
+            className="absolute inset-0 z-30"
+            onDragOver={(e) => {
+              if (isFocusMode) return;
+              if (!e.dataTransfer.types.includes('session-id')) return;
+              e.preventDefault();
+              e.stopPropagation();
+              const hint = computeSplitHint(e);
+              setDropHint(hint);
+            }}
+            onDragLeave={(e) => {
+              if (!e.dataTransfer.types.includes('session-id')) return;
+              setDropHint(null);
+            }}
+            onDrop={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleWorkspaceDrop(e);
+            }}
+          >
+            {dropHint && (
+              <div className="absolute inset-0 pointer-events-none">
+                <div
+                  className="absolute bg-emerald-600/35 border border-emerald-400/70 backdrop-blur-sm transition-all duration-150"
+                  style={{
+                    width: dropHint.rect ? `${dropHint.rect.w}px` : dropHint.direction === 'vertical' ? '50%' : '100%',
+                    height: dropHint.rect ? `${dropHint.rect.h}px` : dropHint.direction === 'vertical' ? '100%' : '50%',
+                    left: dropHint.rect ? `${dropHint.rect.x}px` : dropHint.direction === 'vertical' ? (dropHint.position === 'left' ? 0 : '50%') : 0,
+                    top: dropHint.rect ? `${dropHint.rect.y}px` : dropHint.direction === 'vertical' ? 0 : (dropHint.position === 'top' ? 0 : '50%'),
+                  }}
+                />
+              </div>
+            )}
+          </div>
+        )}
+        <div ref={workspaceInnerRef} className={cn("absolute overflow-hidden", isFocusMode ? "left-56 right-0 top-0 bottom-0" : "inset-0")}>
+          {sessions.map(session => {
+            // Use pre-computed host to avoid creating new objects on every render
+            const host = sessionHostsMap.get(session.id)!;
+            const inActiveWorkspace = !!activeWorkspace && session.workspaceId === activeWorkspace.id;
+            const isActiveSolo = activeTabId === session.id && !activeWorkspace && isTerminalLayerVisible;
 
-          // In focus mode, only the focused session is visible
-          const isFocusedInWorkspace = isFocusMode && inActiveWorkspace && session.id === focusedSessionId;
-          const isSplitViewVisible = !isFocusMode && inActiveWorkspace;
+            // In focus mode, only the focused session is visible
+            const isFocusedInWorkspace = isFocusMode && inActiveWorkspace && session.id === focusedSessionId;
+            const isSplitViewVisible = !isFocusMode && inActiveWorkspace;
 
-          const isVisible = ((isFocusedInWorkspace || isSplitViewVisible || isActiveSolo) && isTerminalLayerVisible);
+            const isVisible = ((isFocusedInWorkspace || isSplitViewVisible || isActiveSolo) && isTerminalLayerVisible);
 
-          // In focus mode, use full area; in split mode, use computed rects
-          const rect = (isSplitViewVisible && !isFocusMode) ? activeWorkspaceRects[session.id] : null;
+            // In focus mode, use full area; in split mode, use computed rects
+            const rect = (isSplitViewVisible && !isFocusMode) ? activeWorkspaceRects[session.id] : null;
 
-          const layoutStyle = rect
-            ? {
-              left: `${rect.x}px`,
-              top: `${rect.y}px`,
-              width: `${rect.w}px`,
-              height: `${rect.h}px`,
+            const layoutStyle = rect
+              ? {
+                left: `${rect.x}px`,
+                top: `${rect.y}px`,
+                width: `${rect.w}px`,
+                height: `${rect.h}px`,
+              }
+              : { left: 0, top: 0, width: '100%', height: '100%' };
+
+            const style: React.CSSProperties = { ...layoutStyle };
+
+            if (!isVisible) {
+              style.display = 'none';
             }
-            : { left: 0, top: 0, width: '100%', height: '100%' };
 
-          const style: React.CSSProperties = { ...layoutStyle };
+            // Check if this pane is the focused one in the workspace
+            const isFocusedPane = inActiveWorkspace && !isFocusMode && session.id === focusedSessionId;
 
-          if (!isVisible) {
-            style.display = 'none';
-          }
-
-          // Check if this pane is the focused one in the workspace
-          const isFocusedPane = inActiveWorkspace && !isFocusMode && session.id === focusedSessionId;
-
-          return (
-            <div
-              key={session.id}
-              data-session-id={session.id}
-              className={cn(
-                "absolute bg-background",
-                inActiveWorkspace && "workspace-pane",
-                isVisible && "z-10",
-                isFocusedPane && "ring-1 ring-primary/50 ring-inset"
-              )}
-              style={style}
-              tabIndex={-1}
-              onClick={() => {
-                // Set focused session when clicking on a pane in split view
-                if (inActiveWorkspace && !isFocusMode && activeWorkspace) {
-                  onSetWorkspaceFocusedSession?.(activeWorkspace.id, session.id);
-                }
-              }}
-            >
-              <Terminal
-                host={host}
-                keys={keys}
-                identities={identities}
-                snippets={snippets}
-                allHosts={hosts}
-                knownHosts={knownHosts}
-                isVisible={isVisible}
-                inWorkspace={inActiveWorkspace}
-                isResizing={!!resizing}
-                isFocusMode={isFocusMode}
-                isFocused={isFocusedPane}
-                fontFamilyId={terminalFontFamilyId}
-                fontSize={fontSize}
-                terminalTheme={terminalTheme}
-                terminalSettings={terminalSettings}
-                sessionId={session.id}
-                startupCommand={session.startupCommand}
-                serialConfig={session.serialConfig}
-                onUpdateTerminalThemeId={onUpdateTerminalThemeId}
-                onUpdateTerminalFontFamilyId={onUpdateTerminalFontFamilyId}
-                onUpdateTerminalFontSize={onUpdateTerminalFontSize}
-                hotkeyScheme={hotkeyScheme}
-                keyBindings={keyBindings}
-                onHotkeyAction={onHotkeyAction}
-                onCloseSession={handleCloseSession}
-                onStatusChange={handleStatusChange}
-                onSessionExit={handleSessionExit}
-                onTerminalDataCapture={handleTerminalDataCapture}
-                onOsDetected={handleOsDetected}
-                onUpdateHost={handleUpdateHost}
-                onAddKnownHost={handleAddKnownHost}
-                onCommandExecuted={handleCommandExecuted}
-                onExpandToFocus={inActiveWorkspace && !isFocusMode && activeWorkspace ? () => onToggleWorkspaceViewMode?.(activeWorkspace.id) : undefined}
-                onSplitHorizontal={onSplitSession ? () => onSplitSession(session.id, 'horizontal') : undefined}
-                onSplitVertical={onSplitSession ? () => onSplitSession(session.id, 'vertical') : undefined}
-                isBroadcastEnabled={inActiveWorkspace && activeWorkspace ? isBroadcastEnabled?.(activeWorkspace.id) : false}
-                onToggleBroadcast={inActiveWorkspace && activeWorkspace ? () => onToggleBroadcast?.(activeWorkspace.id) : undefined}
-                onBroadcastInput={inActiveWorkspace && activeWorkspace && isBroadcastEnabled?.(activeWorkspace.id) ? handleBroadcastInput : undefined}
-              />
-            </div>
-          );
-        })}
-        {/* Only show resizers in split view mode, not in focus mode */}
-        {!isFocusMode && activeResizers.map(handle => {
-          const isVertical = handle.direction === 'vertical';
-          // Expand hit area perpendicular to the split line, but stay within bounds
-          // Vertical split (left-right): expand horizontally, keep vertical bounds
-          // Horizontal split (top-bottom): expand vertically, keep horizontal bounds
-          const left = isVertical ? handle.rect.x - 3 : handle.rect.x;
-          const top = isVertical ? handle.rect.y : handle.rect.y - 3;
-          const width = isVertical ? handle.rect.w + 6 : handle.rect.w;
-          const height = isVertical ? handle.rect.h : handle.rect.h + 6;
-
-          return (
-            <div
-              key={handle.id}
-              className={cn("absolute group", isVertical ? "cursor-ew-resize" : "cursor-ns-resize")}
-              style={{
-                left: `${left}px`,
-                top: `${top}px`,
-                width: `${width}px`,
-                height: `${height}px`,
-                zIndex: 25,
-              }}
-              onMouseDown={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                const ws = activeWorkspace;
-                if (!ws) return;
-                const split = findSplitNode(ws.root, handle.splitId);
-                const childCount = split && split.type === 'split' ? split.children.length : 0;
-                const sizes = split && split.type === 'split' && split.sizes && split.sizes.length === childCount
-                  ? split.sizes
-                  : Array(childCount).fill(1);
-                setResizing({
-                  workspaceId: ws.id,
-                  splitId: handle.splitId,
-                  index: handle.index,
-                  direction: handle.direction,
-                  startSizes: sizes.length ? sizes : [1, 1],
-                  startArea: handle.splitArea,
-                  startClient: { x: e.clientX, y: e.clientY },
-                });
-              }}
-            >
+            return (
               <div
+                key={session.id}
+                data-session-id={session.id}
                 className={cn(
-                  "absolute bg-border/70 group-hover:bg-primary/60 transition-colors",
-                  isVertical ? "w-px h-full left-1/2 -translate-x-1/2" : "h-px w-full top-1/2 -translate-y-1/2"
+                  "absolute bg-background",
+                  inActiveWorkspace && "workspace-pane",
+                  isVisible && "z-10",
+                  isFocusedPane && "ring-1 ring-primary/50 ring-inset"
                 )}
-              />
-            </div>
-          );
-        })}
+                style={style}
+                tabIndex={-1}
+                onClick={() => {
+                  // Set focused session when clicking on a pane in split view
+                  if (inActiveWorkspace && !isFocusMode && activeWorkspace) {
+                    onSetWorkspaceFocusedSession?.(activeWorkspace.id, session.id);
+                  }
+                }}
+              >
+                <Terminal
+                  host={host}
+                  keys={keys}
+                  identities={identities}
+                  snippets={snippets}
+                  allHosts={hosts}
+                  knownHosts={knownHosts}
+                  isVisible={isVisible}
+                  inWorkspace={inActiveWorkspace}
+                  isResizing={!!resizing}
+                  isFocusMode={isFocusMode}
+                  isFocused={isFocusedPane}
+                  fontFamilyId={terminalFontFamilyId}
+                  fontSize={fontSize}
+                  terminalTheme={terminalTheme}
+                  terminalSettings={terminalSettings}
+                  sessionId={session.id}
+                  startupCommand={session.startupCommand}
+                  serialConfig={session.serialConfig}
+                  onUpdateTerminalThemeId={onUpdateTerminalThemeId}
+                  onUpdateTerminalFontFamilyId={onUpdateTerminalFontFamilyId}
+                  onUpdateTerminalFontSize={onUpdateTerminalFontSize}
+                  hotkeyScheme={hotkeyScheme}
+                  keyBindings={keyBindings}
+                  onHotkeyAction={onHotkeyAction}
+                  onCloseSession={handleCloseSession}
+                  onStatusChange={handleStatusChange}
+                  onSessionExit={handleSessionExit}
+                  onTerminalDataCapture={handleTerminalDataCapture}
+                  onOsDetected={handleOsDetected}
+                  onUpdateHost={handleUpdateHost}
+                  onAddKnownHost={handleAddKnownHost}
+                  onCommandExecuted={handleCommandExecuted}
+                  onExpandToFocus={inActiveWorkspace && !isFocusMode && activeWorkspace ? () => onToggleWorkspaceViewMode?.(activeWorkspace.id) : undefined}
+                  onSplitHorizontal={onSplitSession ? () => onSplitSession(session.id, 'horizontal') : undefined}
+                  onSplitVertical={onSplitSession ? () => onSplitSession(session.id, 'vertical') : undefined}
+                  isBroadcastEnabled={inActiveWorkspace && activeWorkspace ? isBroadcastEnabled?.(activeWorkspace.id) : false}
+                  onToggleBroadcast={inActiveWorkspace && activeWorkspace ? () => onToggleBroadcast?.(activeWorkspace.id) : undefined}
+                  onToggleComposeBar={inActiveWorkspace ? () => setIsComposeBarOpen(prev => !prev) : undefined}
+                  isWorkspaceComposeBarOpen={inActiveWorkspace ? isComposeBarOpen : undefined}
+                  onBroadcastInput={inActiveWorkspace && activeWorkspace && isBroadcastEnabled?.(activeWorkspace.id) ? handleBroadcastInput : undefined}
+                />
+              </div>
+            );
+          })}
+          {/* Only show resizers in split view mode, not in focus mode */}
+          {!isFocusMode && activeResizers.map(handle => {
+            const isVertical = handle.direction === 'vertical';
+            // Expand hit area perpendicular to the split line, but stay within bounds
+            // Vertical split (left-right): expand horizontally, keep vertical bounds
+            // Horizontal split (top-bottom): expand vertically, keep horizontal bounds
+            const left = isVertical ? handle.rect.x - 3 : handle.rect.x;
+            const top = isVertical ? handle.rect.y : handle.rect.y - 3;
+            const width = isVertical ? handle.rect.w + 6 : handle.rect.w;
+            const height = isVertical ? handle.rect.h : handle.rect.h + 6;
+
+            return (
+              <div
+                key={handle.id}
+                className={cn("absolute group", isVertical ? "cursor-ew-resize" : "cursor-ns-resize")}
+                style={{
+                  left: `${left}px`,
+                  top: `${top}px`,
+                  width: `${width}px`,
+                  height: `${height}px`,
+                  zIndex: 25,
+                }}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  const ws = activeWorkspace;
+                  if (!ws) return;
+                  const split = findSplitNode(ws.root, handle.splitId);
+                  const childCount = split && split.type === 'split' ? split.children.length : 0;
+                  const sizes = split && split.type === 'split' && split.sizes && split.sizes.length === childCount
+                    ? split.sizes
+                    : Array(childCount).fill(1);
+                  setResizing({
+                    workspaceId: ws.id,
+                    splitId: handle.splitId,
+                    index: handle.index,
+                    direction: handle.direction,
+                    startSizes: sizes.length ? sizes : [1, 1],
+                    startArea: handle.splitArea,
+                    startClient: { x: e.clientX, y: e.clientY },
+                  });
+                }}
+              >
+                <div
+                  className={cn(
+                    "absolute bg-border/70 group-hover:bg-primary/60 transition-colors",
+                    isVertical ? "w-px h-full left-1/2 -translate-x-1/2" : "h-px w-full top-1/2 -translate-y-1/2"
+                  )}
+                />
+              </div>
+            );
+          })}
+        </div>
       </div>
+
+      {/* Global compose bar for workspace mode */}
+      {activeWorkspace && isComposeBarOpen && (
+        <TerminalComposeBar
+          onSend={handleComposeSend}
+          onClose={() => {
+            setIsComposeBarOpen(false);
+            // Refocus the terminal pane (matching solo-session behavior)
+            if (focusedSessionId) {
+              requestAnimationFrame(() => {
+                const pane = document.querySelector(`[data-session-id="${focusedSessionId}"]`);
+                const textarea = pane?.querySelector('textarea.xterm-helper-textarea') as HTMLTextAreaElement | null;
+                textarea?.focus();
+              });
+            }
+          }}
+          isBroadcastEnabled={isBroadcastEnabled?.(activeWorkspace.id)}
+          themeColors={composeBarThemeColors}
+        />
+      )}
     </div>
   );
 };

components/TextEditorModal.tsx

@@ -5,6 +5,7 @@ import {
   CloudUpload,
   Loader2,
   Search,
+  WrapText,
   X,
 } from 'lucide-react';
 import Editor, { type OnMount, loader, useMonaco } from '@monaco-editor/react';
@@ -18,6 +19,7 @@ const monacoBasePath = import.meta.env.DEV
 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';
@@ -30,6 +32,8 @@ interface TextEditorModalProps {
   fileName: string;
   initialContent: string;
   onSave: (content: string) => Promise<void>;
+  editorWordWrap: boolean;
+  onToggleWordWrap: () => void;
 }
 
 // Map our language IDs to Monaco language IDs
@@ -132,8 +136,11 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
   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);
@@ -143,6 +150,7 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
 
   // Ref to store the latest save function to avoid stale closure in keyboard shortcut
   const handleSaveRef = useRef<() => Promise<void>>(() => Promise.resolve());
+  const handlePasteRef = useRef<() => Promise<void>>(() => Promise.resolve());
 
   // Track theme from document.documentElement class (syncs with app theme)
   const [isDarkTheme, setIsDarkTheme] = useState(() =>
@@ -229,6 +237,58 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
     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'));
@@ -254,6 +314,11 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
       // 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
@@ -299,6 +364,17 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
                 <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}
@@ -352,6 +428,8 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
               </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',
@@ -360,7 +438,7 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
               automaticLayout: true,
               tabSize: 2,
               insertSpaces: true,
-              wordWrap: 'off',
+              wordWrap: editorWordWrap ? 'on' : 'off',
               folding: true,
               renderWhitespace: 'selection',
               bracketPairColorization: { enabled: true },

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

@@ -543,8 +543,8 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
       {/* 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-8 flex items-center gap-2 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">
@@ -654,8 +654,8 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
         </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" />
+        {/* Small drag shim to the right edge (macOS only – on Windows the close button should touch the edge) */}
+        {isMacClient && <div className="w-2 h-8 app-drag flex-shrink-0" />}
       </div>
     </div>
   );

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 })),
+    [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;

components/VaultView.tsx

@@ -30,11 +30,12 @@ import {
 import React, { Suspense, lazy, memo, useCallback, useEffect, useMemo, useState } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { useStoredViewMode } from "../application/state/useStoredViewMode";
+import { useStoredBoolean } from "../application/state/useStoredBoolean";
 import { useTreeExpandedState } from "../application/state/useTreeExpandedState";
 import { sanitizeHost } from "../domain/host";
 import { importVaultHostsFromText, exportHostsToCsvWithStats } from "../domain/vaultImport";
 import type { VaultImportFormat } from "../domain/vaultImport";
-import { STORAGE_KEY_VAULT_HOSTS_VIEW_MODE, STORAGE_KEY_VAULT_HOSTS_TREE_EXPANDED } from "../infrastructure/config/storageKeys";
+import { STORAGE_KEY_VAULT_HOSTS_VIEW_MODE, STORAGE_KEY_VAULT_HOSTS_TREE_EXPANDED, STORAGE_KEY_VAULT_SIDEBAR_COLLAPSED } from "../infrastructure/config/storageKeys";
 import { cn } from "../lib/utils";
 import {
   ConnectionLog,
@@ -84,7 +85,9 @@ import { Label } from "./ui/label";
 import { SortDropdown, SortMode } from "./ui/sort-dropdown";
 import { TagFilterDropdown } from "./ui/tag-filter-dropdown";
 import { toast } from "./ui/toast";
+import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "./ui/tooltip";
 import { Badge } from "./ui/badge";
+import { HotkeyScheme, KeyBinding } from "../domain/models";
 
 const LazyProtocolSelectDialog = lazy(() => import("./ProtocolSelectDialog"));
 const LazyConnectionLogsManager = lazy(() => import("./ConnectionLogsManager"));
@@ -104,6 +107,8 @@ interface VaultViewProps {
   connectionLogs: ConnectionLog[];
   managedSources: ManagedSource[];
   sessions: TerminalSession[];
+  hotkeyScheme: HotkeyScheme;
+  keyBindings: KeyBinding[];
   onOpenSettings: () => void;
   onOpenQuickSwitcher: () => void;
   onCreateLocalTerminal: () => void;
@@ -144,6 +149,8 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
   connectionLogs,
   managedSources,
   sessions,
+  hotkeyScheme,
+  keyBindings,
   onOpenSettings,
   onOpenQuickSwitcher,
   onCreateLocalTerminal,
@@ -189,6 +196,12 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
   const [deleteTargetPath, setDeleteTargetPath] = useState<string | null>(null);
   const [deleteGroupWithHosts, setDeleteGroupWithHosts] = useState(false);
 
+  // Sidebar collapsed state with localStorage persistence
+  const [sidebarCollapsed, setSidebarCollapsed] = useStoredBoolean(
+    STORAGE_KEY_VAULT_SIDEBAR_COLLAPSED,
+    false,
+  );
+
   // Handle external navigation requests
   useEffect(() => {
     if (navigateToSection) {
@@ -819,7 +832,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
     if (sortMode !== "group") return null;
     const groups: { name: string; hosts: Host[] }[] = [];
     const groupMap = new Map<string, Host[]>();
-    
+
     for (const host of displayedHosts) {
       const groupName = host.group || "";
       if (!groupMap.has(groupName)) {
@@ -827,7 +840,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
       }
       groupMap.get(groupName)!.push(host);
     }
-    
+
     const sortedKeys = [...groupMap.keys()].sort((a, b) => a.localeCompare(b));
     for (const key of sortedKeys) {
       groups.push({ name: key, hosts: groupMap.get(key)! });
@@ -1225,100 +1238,171 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
   return (
     <div className="absolute inset-0 min-h-0 flex">
       {/* Sidebar */}
-      <div className="w-52 bg-secondary/80 border-r border-border/60 flex flex-col">
-        <div className="px-4 py-4 flex items-center gap-3">
-          <AppLogo className="h-10 w-10 rounded-xl" />
-          <div>
-            <p className="text-sm font-bold text-foreground">Netcatty</p>
+      <TooltipProvider delayDuration={100}>
+        <div className={cn(
+          "bg-secondary/80 border-r border-border/60 flex flex-col transition-all duration-200",
+          sidebarCollapsed ? "w-14" : "w-52"
+        )}>
+          <div className={cn(
+            "py-4 flex items-center",
+            sidebarCollapsed ? "px-2 justify-center" : "px-4"
+          )}>
+            <Tooltip delayDuration={500}>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+                  className="flex items-center gap-3 hover:opacity-80 transition-opacity"
+                >
+                  <AppLogo className="h-10 w-10 rounded-xl flex-shrink-0" />
+                  {!sidebarCollapsed && (
+                    <p className="text-sm font-bold text-foreground">Netcatty</p>
+                  )}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                {sidebarCollapsed ? t("vault.sidebar.expand") : t("vault.sidebar.collapse")}
+              </TooltipContent>
+            </Tooltip>
+          </div>
+
+          <div className={cn("space-y-1", sidebarCollapsed ? "px-1.5" : "px-3")}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant={currentSection === "hosts" ? "secondary" : "ghost"}
+                  className={cn(
+                    "w-full h-10",
+                    sidebarCollapsed ? "justify-center p-0" : "justify-start gap-3",
+                    currentSection === "hosts" &&
+                    "bg-foreground/10 text-foreground hover:bg-foreground/15 border-border/40",
+                  )}
+                  onClick={() => {
+                    setCurrentSection("hosts");
+                    setSelectedGroupPath(null);
+                  }}
+                >
+                  <LayoutGrid size={16} className="flex-shrink-0" />
+                  {!sidebarCollapsed && t("vault.nav.hosts")}
+                </Button>
+              </TooltipTrigger>
+              {sidebarCollapsed && <TooltipContent side="right">{t("vault.nav.hosts")}</TooltipContent>}
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant={currentSection === "keys" ? "secondary" : "ghost"}
+                  className={cn(
+                    "w-full h-10",
+                    sidebarCollapsed ? "justify-center p-0" : "justify-start gap-3",
+                    currentSection === "keys" &&
+                    "bg-foreground/10 text-foreground hover:bg-foreground/15 border-border/40",
+                  )}
+                  onClick={() => {
+                    setCurrentSection("keys");
+                  }}
+                >
+                  <Key size={16} className="flex-shrink-0" />
+                  {!sidebarCollapsed && t("vault.nav.keychain")}
+                </Button>
+              </TooltipTrigger>
+              {sidebarCollapsed && <TooltipContent side="right">{t("vault.nav.keychain")}</TooltipContent>}
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant={currentSection === "port" ? "secondary" : "ghost"}
+                  className={cn(
+                    "w-full h-10",
+                    sidebarCollapsed ? "justify-center p-0" : "justify-start gap-3",
+                    currentSection === "port" &&
+                    "bg-foreground/10 text-foreground hover:bg-foreground/15 border-border/40",
+                  )}
+                  onClick={() => setCurrentSection("port")}
+                >
+                  <Plug size={16} className="flex-shrink-0" />
+                  {!sidebarCollapsed && t("vault.nav.portForwarding")}
+                </Button>
+              </TooltipTrigger>
+              {sidebarCollapsed && <TooltipContent side="right">{t("vault.nav.portForwarding")}</TooltipContent>}
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant={currentSection === "snippets" ? "secondary" : "ghost"}
+                  className={cn(
+                    "w-full h-10",
+                    sidebarCollapsed ? "justify-center p-0" : "justify-start gap-3",
+                    currentSection === "snippets" &&
+                    "bg-foreground/10 text-foreground hover:bg-foreground/15 border-border/40",
+                  )}
+                  onClick={() => {
+                    setCurrentSection("snippets");
+                  }}
+                >
+                  <FileCode size={16} className="flex-shrink-0" />
+                  {!sidebarCollapsed && t("vault.nav.snippets")}
+                </Button>
+              </TooltipTrigger>
+              {sidebarCollapsed && <TooltipContent side="right">{t("vault.nav.snippets")}</TooltipContent>}
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant={currentSection === "knownhosts" ? "secondary" : "ghost"}
+                  className={cn(
+                    "w-full h-10",
+                    sidebarCollapsed ? "justify-center p-0" : "justify-start gap-3",
+                    currentSection === "knownhosts" &&
+                    "bg-foreground/10 text-foreground hover:bg-foreground/15 border-border/40",
+                  )}
+                  onClick={() => setCurrentSection("knownhosts")}
+                >
+                  <BookMarked size={16} className="flex-shrink-0" />
+                  {!sidebarCollapsed && t("vault.nav.knownHosts")}
+                </Button>
+              </TooltipTrigger>
+              {sidebarCollapsed && <TooltipContent side="right">{t("vault.nav.knownHosts")}</TooltipContent>}
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant={currentSection === "logs" ? "secondary" : "ghost"}
+                  className={cn(
+                    "w-full h-10",
+                    sidebarCollapsed ? "justify-center p-0" : "justify-start gap-3",
+                    currentSection === "logs" &&
+                    "bg-foreground/10 text-foreground hover:bg-foreground/15 border-border/40",
+                  )}
+                  onClick={() => setCurrentSection("logs")}
+                >
+                  <Activity size={16} className="flex-shrink-0" />
+                  {!sidebarCollapsed && t("vault.nav.logs")}
+                </Button>
+              </TooltipTrigger>
+              {sidebarCollapsed && <TooltipContent side="right">{t("vault.nav.logs")}</TooltipContent>}
+            </Tooltip>
+          </div>
+
+          <div className={cn("mt-auto pb-4 space-y-2", sidebarCollapsed ? "px-1.5" : "px-3")}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  className={cn(
+                    "w-full",
+                    sidebarCollapsed ? "justify-center p-0" : "justify-start gap-3"
+                  )}
+                  onClick={onOpenSettings}
+                >
+                  <Settings size={16} className="flex-shrink-0" />
+                  {!sidebarCollapsed && t("common.settings")}
+                </Button>
+              </TooltipTrigger>
+              {sidebarCollapsed && <TooltipContent side="right">{t("common.settings")}</TooltipContent>}
+            </Tooltip>
           </div>
         </div>
-
-        <div className="px-3 space-y-1">
-          <Button
-            variant={currentSection === "hosts" ? "secondary" : "ghost"}
-            className={cn(
-              "w-full justify-start gap-3 h-10",
-              currentSection === "hosts" &&
-              "bg-foreground/10 text-foreground hover:bg-foreground/15 border-border/40",
-            )}
-            onClick={() => {
-              setCurrentSection("hosts");
-              setSelectedGroupPath(null);
-            }}
-          >
-            <LayoutGrid size={16} /> {t("vault.nav.hosts")}
-          </Button>
-          <Button
-            variant={currentSection === "keys" ? "secondary" : "ghost"}
-            className={cn(
-              "w-full justify-start gap-3 h-10",
-              currentSection === "keys" &&
-              "bg-foreground/10 text-foreground hover:bg-foreground/15 border-border/40",
-            )}
-            onClick={() => {
-              setCurrentSection("keys");
-            }}
-          >
-            <Key size={16} /> {t("vault.nav.keychain")}
-          </Button>
-          <Button
-            variant={currentSection === "port" ? "secondary" : "ghost"}
-            className={cn(
-              "w-full justify-start gap-3 h-10",
-              currentSection === "port" &&
-              "bg-foreground/10 text-foreground hover:bg-foreground/15 border-border/40",
-            )}
-            onClick={() => setCurrentSection("port")}
-          >
-            <Plug size={16} /> {t("vault.nav.portForwarding")}
-          </Button>
-          <Button
-            variant={currentSection === "snippets" ? "secondary" : "ghost"}
-            className={cn(
-              "w-full justify-start gap-3 h-10",
-              currentSection === "snippets" &&
-              "bg-foreground/10 text-foreground hover:bg-foreground/15 border-border/40",
-            )}
-            onClick={() => {
-              setCurrentSection("snippets");
-            }}
-          >
-            <FileCode size={16} /> {t("vault.nav.snippets")}
-          </Button>
-          <Button
-            variant={currentSection === "knownhosts" ? "secondary" : "ghost"}
-            className={cn(
-              "w-full justify-start gap-3 h-10",
-              currentSection === "knownhosts" &&
-              "bg-foreground/10 text-foreground hover:bg-foreground/15 border-border/40",
-            )}
-            onClick={() => setCurrentSection("knownhosts")}
-          >
-            <BookMarked size={16} /> {t("vault.nav.knownHosts")}
-          </Button>
-          <Button
-            variant={currentSection === "logs" ? "secondary" : "ghost"}
-            className={cn(
-              "w-full justify-start gap-3 h-10",
-              currentSection === "logs" &&
-              "bg-foreground/10 text-foreground hover:bg-foreground/15 border-border/40",
-            )}
-            onClick={() => setCurrentSection("logs")}
-          >
-            <Activity size={16} /> {t("vault.nav.logs")}
-          </Button>
-        </div>
-
-        <div className="mt-auto px-3 pb-4 space-y-2">
-          <Button
-            variant="ghost"
-            className="w-full justify-start gap-3"
-            onClick={onOpenSettings}
-          >
-            <Settings size={16} /> {t("common.settings")}
-          </Button>
-        </div>
-      </div>
+      </TooltipProvider>
 
       {/* Main Area */}
       <div className="flex-1 flex flex-col min-h-0 relative">
@@ -1586,93 +1670,93 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                             moveGroup(groupPath, selectedGroupPath);
                         }}
                       >
-                      {displayedGroups.map((node) => (
-                        <ContextMenu key={node.path}>
-                          <ContextMenuTrigger asChild>
-                            <div
-                              className={cn(
-                                "group cursor-pointer",
-                                viewMode === "grid"
-                                  ? "soft-card elevate rounded-xl h-[68px] px-3 py-2"
-                                  : "h-14 px-3 py-2 hover:bg-secondary/60 rounded-lg transition-colors",
-                              )}
-                              draggable
-                              onDragStart={(e) =>
-                                e.dataTransfer.setData("group-path", node.path)
-                              }
-                              onDoubleClick={() =>
-                                setSelectedGroupPath(node.path)
-                              }
-                              onClick={() => setSelectedGroupPath(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="flex items-center gap-3 h-full">
-                                <div className="h-11 w-11 rounded-xl bg-primary/15 text-primary flex items-center justify-center">
-                                  <FolderTree size={20} />
-                                </div>
-                                <div className="flex-1 min-w-0">
-                                  <div className="text-sm font-semibold truncate flex items-center gap-2">
-                                    {node.name}
-                                    {managedGroupPaths.has(node.path) && (
-                                      <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">
-                                        <FileSymlink size={10} />
-                                        Managed
-                                      </span>
-                                    )}
+                        {displayedGroups.map((node) => (
+                          <ContextMenu key={node.path}>
+                            <ContextMenuTrigger asChild>
+                              <div
+                                className={cn(
+                                  "group cursor-pointer",
+                                  viewMode === "grid"
+                                    ? "soft-card elevate rounded-xl h-[68px] px-3 py-2"
+                                    : "h-14 px-3 py-2 hover:bg-secondary/60 rounded-lg transition-colors",
+                                )}
+                                draggable
+                                onDragStart={(e) =>
+                                  e.dataTransfer.setData("group-path", node.path)
+                                }
+                                onDoubleClick={() =>
+                                  setSelectedGroupPath(node.path)
+                                }
+                                onClick={() => setSelectedGroupPath(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="flex items-center gap-3 h-full">
+                                  <div className="h-11 w-11 rounded-xl bg-primary/15 text-primary flex items-center justify-center">
+                                    <FolderTree size={20} />
                                   </div>
-                                  <div className="text-[11px] text-muted-foreground">
-                                    {t("vault.groups.hostsCount", { count: node.hosts.length })}
+                                  <div className="flex-1 min-w-0">
+                                    <div className="text-sm font-semibold truncate flex items-center gap-2">
+                                      {node.name}
+                                      {managedGroupPaths.has(node.path) && (
+                                        <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">
+                                          <FileSymlink size={10} />
+                                          Managed
+                                        </span>
+                                      )}
+                                    </div>
+                                    <div className="text-[11px] text-muted-foreground">
+                                      {t("vault.groups.hostsCount", { count: node.hosts.length })}
+                                    </div>
                                   </div>
                                 </div>
                               </div>
-                            </div>
-                          </ContextMenuTrigger>
-                          <ContextMenuContent>
-                            <ContextMenuItem
-                              onClick={() => {
-                                setTargetParentPath(node.path);
-                                setNewFolderName("");
-                                setIsNewFolderOpen(true);
-                              }}
-                            >
-                              <FolderPlus className="mr-2 h-4 w-4" /> {t("vault.groups.newSubgroup")}
-                            </ContextMenuItem>
-                            <ContextMenuItem
-                              onClick={() => {
-                                setRenameTargetPath(node.path);
-                                setRenameGroupName(node.name);
-                                setRenameGroupError(null);
-                                setIsRenameGroupOpen(true);
-                              }}
-                            >
-                              <Edit2 className="mr-2 h-4 w-4" /> {t("vault.groups.rename")}
-                            </ContextMenuItem>
-                            <ContextMenuItem
-                              className="text-destructive"
-                              onClick={() => {
-                                setDeleteTargetPath(node.path);
-                                setIsDeleteGroupOpen(true);
-                              }}
-                            >
-                              <Trash2 className="mr-2 h-4 w-4" /> {t("vault.groups.delete")}
-                            </ContextMenuItem>
-                          </ContextMenuContent>
-                        </ContextMenu>
-                      ))}
-                    </div>
+                            </ContextMenuTrigger>
+                            <ContextMenuContent>
+                              <ContextMenuItem
+                                onClick={() => {
+                                  setTargetParentPath(node.path);
+                                  setNewFolderName("");
+                                  setIsNewFolderOpen(true);
+                                }}
+                              >
+                                <FolderPlus className="mr-2 h-4 w-4" /> {t("vault.groups.newSubgroup")}
+                              </ContextMenuItem>
+                              <ContextMenuItem
+                                onClick={() => {
+                                  setRenameTargetPath(node.path);
+                                  setRenameGroupName(node.name);
+                                  setRenameGroupError(null);
+                                  setIsRenameGroupOpen(true);
+                                }}
+                              >
+                                <Edit2 className="mr-2 h-4 w-4" /> {t("vault.groups.rename")}
+                              </ContextMenuItem>
+                              <ContextMenuItem
+                                className="text-destructive"
+                                onClick={() => {
+                                  setDeleteTargetPath(node.path);
+                                  setIsDeleteGroupOpen(true);
+                                }}
+                              >
+                                <Trash2 className="mr-2 h-4 w-4" /> {t("vault.groups.delete")}
+                              </ContextMenuItem>
+                            </ContextMenuContent>
+                          </ContextMenu>
+                        ))}
+                      </div>
                     )}
                   </section>
 
@@ -1690,7 +1774,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                         </div>
                       </div>
                     </div>
-                    
+
                     {isMultiSelectMode && (
                       <div className="flex items-center gap-2 p-2 bg-secondary/60 rounded-lg border border-border/40">
                         <span className="text-sm text-muted-foreground">
@@ -1733,7 +1817,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                         </Button>
                       </div>
                     )}
-                    
+
                     {viewMode === "tree" ? (
                       <HostTreeView
                         groupTree={treeViewGroupTree}
@@ -1773,6 +1857,9 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                         moveGroup={moveGroup}
                         managedGroupPaths={managedGroupPaths}
                         onUnmanageGroup={handleUnmanageGroup}
+                        isMultiSelectMode={isMultiSelectMode}
+                        selectedHostIds={selectedHostIds}
+                        toggleHostSelection={toggleHostSelection}
                       />
                     ) : sortMode === "group" && groupedDisplayHosts ? (
                       <div className="space-y-6">
@@ -1825,7 +1912,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                                       >
                                         <div className="flex items-center gap-3 h-full">
                                           {isMultiSelectMode && (
-                                            <div 
+                                            <div
                                               className="shrink-0"
                                               onClick={(e) => {
                                                 e.stopPropagation();
@@ -1916,11 +2003,10 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                               <LayoutGrid size={32} className="opacity-60" />
                             </div>
                             <h3 className="text-lg font-semibold text-foreground mb-2">
-                              Set up your hosts
+                              {t('vault.hosts.empty.title')}
                             </h3>
                             <p className="text-sm text-center max-w-sm">
-                              Save hosts to quickly connect to your servers, VMs,
-                              and containers.
+                              {t('vault.hosts.empty.desc')}
                             </p>
                           </div>
                         )}
@@ -1964,7 +2050,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                                 >
                                   <div className="flex items-center gap-3 h-full">
                                     {isMultiSelectMode && (
-                                      <div 
+                                      <div
                                         className="shrink-0"
                                         onClick={(e) => {
                                           e.stopPropagation();
@@ -2052,11 +2138,10 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                               <LayoutGrid size={32} className="opacity-60" />
                             </div>
                             <h3 className="text-lg font-semibold text-foreground mb-2">
-                              Set up your hosts
+                              {t('vault.hosts.empty.title')}
                             </h3>
                             <p className="text-sm text-center max-w-sm">
-                              Save hosts to quickly connect to your servers, VMs,
-                              and containers.
+                              {t('vault.hosts.empty.desc')}
                             </p>
                           </div>
                         )}
@@ -2075,6 +2160,8 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
             hosts={hosts}
             customGroups={customGroups}
             shellHistory={shellHistory}
+            hotkeyScheme={hotkeyScheme}
+            keyBindings={keyBindings}
             onPackagesChange={onUpdateSnippetPackages}
             onSave={(s) =>
               onUpdateSnippets(
@@ -2379,8 +2466,8 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
             <Button variant="ghost" onClick={() => setIsDeleteGroupOpen(false)}>
               {t("common.cancel")}
             </Button>
-            <Button 
-              variant="destructive" 
+            <Button
+              variant="destructive"
               onClick={() => {
                 if (deleteTargetPath) {
                   const isManaged = managedGroupPaths.has(deleteTargetPath);
@@ -2408,7 +2495,6 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
           open={isQuickConnectOpen}
           target={quickConnectTarget}
           keys={keys}
-          knownHosts={knownHosts}
           onConnect={handleQuickConnect}
           onSaveHost={handleQuickConnectSaveHost}
           onClose={() => {
@@ -2456,6 +2542,7 @@ const vaultViewAreEqual = (
   const isEqual =
     prev.hosts === next.hosts &&
     prev.keys === next.keys &&
+    prev.identities === next.identities &&
     prev.snippets === next.snippets &&
     prev.snippetPackages === next.snippetPackages &&
     prev.customGroups === next.customGroups &&

components/keychain/EditKeyPanel.tsx

@@ -1,94 +0,0 @@
-/**
- * Edit Key Panel - Edit existing SSH key
- */
-
-import { Info } from 'lucide-react';
-import React from 'react';
-import { useI18n } from '../../application/i18n/I18nProvider';
-import { SSHKey } from '../../types';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Label } from '../ui/label';
-import { Textarea } from '../ui/textarea';
-
-interface EditKeyPanelProps {
-    draftKey: Partial<SSHKey>;
-    _originalKey: SSHKey; // Reserved for future diff/comparison feature
-    setDraftKey: (key: Partial<SSHKey>) => void;
-    onExport: () => void;
-    onSave: () => void;
-}
-
-export const EditKeyPanel: React.FC<EditKeyPanelProps> = ({
-    draftKey,
-    _originalKey, // Reserved for future diff/comparison feature
-    setDraftKey,
-    onExport,
-    onSave,
-}) => {
-    const { t } = useI18n();
-    return (
-        <>
-            <div className="space-y-2">
-                <Label>{t('keychain.field.labelRequired')}</Label>
-                <Input
-                    value={draftKey.label || ''}
-                    onChange={e => setDraftKey({ ...draftKey, label: e.target.value })}
-                    placeholder={t('keychain.field.labelPlaceholder')}
-                />
-            </div>
-
-            <div className="space-y-2">
-                <Label className="text-destructive">{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-[180px] font-mono text-xs"
-                />
-            </div>
-
-            <div className="space-y-2">
-                <Label className="text-muted-foreground">{t('keychain.field.publicKey')}</Label>
-                <Textarea
-                    value={draftKey.publicKey || ''}
-                    onChange={e => setDraftKey({ ...draftKey, publicKey: e.target.value })}
-                    placeholder="ssh-ed25519 AAAA..."
-                    className="min-h-[80px] font-mono text-xs"
-                />
-            </div>
-
-            <div className="space-y-2">
-                <Label className="text-muted-foreground">{t('terminal.auth.certificate')}</Label>
-                <Textarea
-                    value={draftKey.certificate || ''}
-                    onChange={e => setDraftKey({ ...draftKey, certificate: e.target.value })}
-                    placeholder={t('keychain.field.certificatePlaceholder')}
-                    className="min-h-[60px] font-mono text-xs"
-                />
-            </div>
-
-            {/* Key Export section */}
-            <div className="pt-4 mt-4 border-t border-border/60">
-                <div className="flex items-center gap-2 mb-3">
-                    <span className="text-sm font-medium">{t('keychain.export.title')}</span>
-                    <div className="h-4 w-4 rounded-full bg-muted flex items-center justify-center">
-                        <Info size={10} className="text-muted-foreground" />
-                    </div>
-                </div>
-                <Button className="w-full h-11" onClick={onExport}>
-                    {t('keychain.export.exportToHost')}
-                </Button>
-            </div>
-
-            {/* Save button */}
-            <Button
-                className="w-full h-11 mt-4"
-                disabled={!draftKey.label?.trim() || !draftKey.privateKey?.trim()}
-                onClick={onSave}
-            >
-                {t('common.saveChanges')}
-            </Button>
-        </>
-    );
-};

components/keychain/ExportKeyPanel.tsx

@@ -1,246 +0,0 @@
-/**
- * Export Key Panel - Export SSH key to remote host
- */
-
-import { ChevronRight, Info } from 'lucide-react';
-import React, { useState } from 'react';
-import { useKeychainBackend } from '../../application/state/useKeychainBackend';
-import { useI18n } from '../../application/i18n/I18nProvider';
-import { resolveHostAuth } from '../../domain/sshAuth';
-import { cn } from '../../lib/utils';
-import { Host, Identity, SSHKey } from '../../types';
-import { Button } from '../ui/button';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';
-import { Input } from '../ui/input';
-import { Label } from '../ui/label';
-import { Textarea } from '../ui/textarea';
-import { toast } from '../ui/toast';
-import { getKeyIcon, getKeyTypeDisplay, isMacOS } from './utils';
-
-interface ExportKeyPanelProps {
-    keyItem: SSHKey;
-    _hosts: Host[]; // Reserved for future inline host list/validation
-    keys: SSHKey[];
-    identities: Identity[];
-    exportHost: Host | null;
-    _setExportHost: (host: Host | null) => void; // Host selection handled by onShowHostSelector callback
-    onShowHostSelector: () => void;
-    onSaveHost?: (host: Host) => void;
-    onClose: () => void;
-}
-
-const DEFAULT_EXPORT_SCRIPT = `DIR="$HOME/$1"
-FILE="$DIR/$2"
-if [ ! -d "$DIR" ]; then
-  mkdir -p "$DIR"
-  chmod 700 "$DIR"
-fi
-if [ ! -f "$FILE" ]; then
-  touch "$FILE"
-  chmod 600 "$FILE"
-fi
-echo $3 >> "$FILE"`;
-
-export const ExportKeyPanel: React.FC<ExportKeyPanelProps> = ({
-    keyItem,
-    _hosts, // Reserved for future inline host list/validation
-    keys,
-    identities,
-    exportHost,
-    _setExportHost, // Host selection handled by onShowHostSelector callback
-    onShowHostSelector,
-	onSaveHost,
-	onClose,
-}) => {
-    const { t } = useI18n();
-	const { execCommand } = useKeychainBackend();
-	const [exportLocation, setExportLocation] = useState('.ssh');
-	const [exportFilename, setExportFilename] = useState('authorized_keys');
-	const [exportAdvancedOpen, setExportAdvancedOpen] = useState(false);
-	const [exportScript, setExportScript] = useState(DEFAULT_EXPORT_SCRIPT);
-	const [isExporting, setIsExporting] = useState(false);
-
-    const isMac = isMacOS();
-
-    const handleExport = async () => {
-        if (!exportHost || !keyItem.publicKey) return;
-
-        setIsExporting(true);
-
-        try {
-            const exportAuth = resolveHostAuth({ host: exportHost, keys, identities });
-
-            // Check for authentication method
-            if (!exportAuth.password && !exportAuth.key?.privateKey) {
-                throw new Error(t('keychain.export.missingCredentials'));
-            }
-
-            const hostPrivateKey = exportAuth.key?.privateKey;
-
-            // Escape the public key for shell
-            const escapedPublicKey = keyItem.publicKey.replace(/'/g, "'\\''");
-
-            // Build the command by replacing $1, $2, $3
-            const scriptWithVars = exportScript
-                .replace(/\$1/g, exportLocation)
-                .replace(/\$2/g, exportFilename)
-                .replace(/\$3/g, `'${escapedPublicKey}'`);
-
-			const command = scriptWithVars;
-
-			// Execute via SSH
-			const result = await execCommand({
-				hostname: exportHost.hostname,
-				username: exportAuth.username,
-				port: exportHost.port || 22,
-				password: exportAuth.password,
-                privateKey: hostPrivateKey,
-                command,
-                timeout: 30000,
-                enableKeyboardInteractive: true,
-                sessionId: `export-key:${exportHost.id}:${keyItem.id}`,
-            });
-
-            // Check result
-            const exitCode = result?.code;
-            const hasError = result?.stderr?.trim();
-            if (exitCode === 0 || (exitCode == null && !hasError)) {
-                // Update host to use this key for authentication
-                if (onSaveHost) {
-                    const updatedHost: Host = {
-                        ...exportHost,
-                        identityFileId: keyItem.id,
-                        authMethod: 'key',
-                    };
-                    onSaveHost(updatedHost);
-                }
-                toast.success(
-                  t('keychain.export.successMessage', { host: exportHost.label }),
-                  t('keychain.export.successTitle'),
-                );
-                onClose();
-            } else {
-                const errorMsg = hasError || result?.stdout?.trim() || `Command exited with code ${exitCode}`;
-                toast.error(
-                  t('keychain.export.failedMessage', { error: errorMsg }),
-                  t('keychain.export.failedTitle'),
-                );
-            }
-        } catch (err) {
-            const message = err instanceof Error ? err.message : String(err);
-            toast.error(
-              t('keychain.export.failedGeneric', { message }),
-              t('keychain.export.failedTitle'),
-            );
-        } finally {
-            setIsExporting(false);
-        }
-    };
-
-    return (
-        <>
-            {/* Key info card */}
-            <div className="flex items-center gap-3 p-3 bg-card border border-border/80 rounded-lg">
-                <div className={cn(
-                    "h-10 w-10 rounded-md flex items-center justify-center",
-                    keyItem.certificate
-                      ? "bg-emerald-500/15 text-emerald-500"
-                      : "bg-primary/15 text-primary"
-                )}>
-                    {getKeyIcon(keyItem)}
-                </div>
-                <div className="min-w-0 flex-1">
-                    <p className="text-sm font-semibold truncate">{keyItem.label}</p>
-                    <p className="text-xs text-muted-foreground">
-                      {t('auth.keyType', { type: getKeyTypeDisplay(keyItem, isMac) })}
-                    </p>
-                </div>
-            </div>
-
-            {/* Export to field */}
-                <div className="space-y-2">
-                    <div className="flex items-center justify-between">
-                        <Label className="text-muted-foreground">{t('keychain.export.exportToRequired')}</Label>
-                        <Button
-                            variant="link"
-                            className="h-auto p-0 text-primary text-sm"
-                            onClick={onShowHostSelector}
-                        >
-                            {t('keychain.export.selectHost')}
-                        </Button>
-                    </div>
-                    <Input
-                        value={exportHost?.label || ''}
-                        readOnly
-                        placeholder={t('keychain.export.selectHostPlaceholder')}
-                        className="bg-muted/50 cursor-pointer"
-                        onClick={onShowHostSelector}
-                    />
-                </div>
-
-            {/* Location field */}
-            <div className="space-y-2">
-                <Label className="text-muted-foreground">{t('keychain.export.locationLabel')}</Label>
-                <Input
-                    value={exportLocation}
-                    onChange={e => setExportLocation(e.target.value)}
-                    placeholder=".ssh"
-                />
-            </div>
-
-            {/* Filename field */}
-            <div className="space-y-2">
-                <Label className="text-muted-foreground">{t('keychain.export.filenameLabel')}</Label>
-                <Input
-                    value={exportFilename}
-                    onChange={e => setExportFilename(e.target.value)}
-                    placeholder="authorized_keys"
-                />
-            </div>
-
-            {/* Info note */}
-            <div className="flex items-start gap-2 p-3 bg-muted/50 border border-border/60 rounded-lg">
-                <Info size={14} className="mt-0.5 text-muted-foreground shrink-0" />
-                <p className="text-xs text-muted-foreground">
-                    {t('keychain.export.note.supportsOnly')}{' '}
-                    <span className="font-semibold text-foreground">UNIX</span>{' '}
-                    {t('keychain.export.note.systems')}{' '}
-                    {t('keychain.export.note.use')}{' '}
-                    <span className="font-semibold text-foreground">{t('keychain.export.advanced')}</span>{' '}
-                    {t('keychain.export.note.customize')}
-                </p>
-            </div>
-
-            {/* Advanced collapsible */}
-            <Collapsible open={exportAdvancedOpen} onOpenChange={setExportAdvancedOpen}>
-                <CollapsibleTrigger asChild>
-                    <Button variant="ghost" className="w-full justify-between px-0 h-10 hover:bg-transparent hover:text-current">
-                        <span className="font-medium">{t('keychain.export.advanced')}</span>
-                        <ChevronRight size={16} className={cn(
-                            "transition-transform",
-                            exportAdvancedOpen && "rotate-90"
-                        )} />
-                    </Button>
-                </CollapsibleTrigger>
-                <CollapsibleContent className="space-y-2 pt-2">
-                    <Label className="text-muted-foreground">{t('keychain.export.scriptRequired')}</Label>
-                    <Textarea
-                        value={exportScript}
-                        onChange={e => setExportScript(e.target.value)}
-                        className="min-h-[180px] font-mono text-xs"
-                        placeholder={t('keychain.export.scriptPlaceholder')}
-                    />
-                </CollapsibleContent>
-            </Collapsible>
-
-            {/* Export button */}
-            <Button
-                className="w-full h-11"
-                disabled={!exportHost || !exportLocation || !exportFilename || isExporting}
-                onClick={handleExport}
-            >
-                {isExporting ? t('keychain.export.exporting') : t('keychain.export.exportAndAttach')}
-            </Button>
-        </>
-    );
-};

components/keychain/index.ts

@@ -15,8 +15,6 @@ export { IdentityCard } from './IdentityCard';
 export { KeyCard } from './KeyCard';
 
 // Panel components
-export { EditKeyPanel } from './EditKeyPanel';
-export { ExportKeyPanel } from './ExportKeyPanel';
 export { GenerateStandardPanel } from './GenerateStandardPanel';
 export { IdentityPanel } from './IdentityPanel';
 export { ImportKeyPanel } from './ImportKeyPanel';

components/port-forwarding/RuleCard.tsx

@@ -5,16 +5,18 @@
 import { Copy,Loader2,Pencil,Play,Square,Trash2 } from 'lucide-react';
 import React from 'react';
 import { useI18n } from '../../application/i18n/I18nProvider';
-import { PortForwardingRule } from '../../domain/models';
+import { Host, PortForwardingRule } from '../../domain/models';
 import { cn } from '../../lib/utils';
 import { Button } from '../ui/button';
 import { ContextMenu,ContextMenuContent,ContextMenuItem,ContextMenuSeparator,ContextMenuTrigger } from '../ui/context-menu';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
 import { getStatusColor,getTypeColor } from './utils';
 
 export type ViewMode = 'grid' | 'list';
 
 export interface RuleCardProps {
     rule: PortForwardingRule;
+    host?: Host; // The relay host for this rule (for tooltip display)
     viewMode: ViewMode;
     isSelected: boolean;
     isPending: boolean;
@@ -28,6 +30,7 @@ export interface RuleCardProps {
 
 export const RuleCard: React.FC<RuleCardProps> = ({
     rule,
+    host,
     viewMode,
     isSelected,
     isPending,
@@ -74,12 +77,39 @@ export const RuleCard: React.FC<RuleCardProps> = ({
                                 />
                             </div>
                             <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
-                                <span className="truncate">
-                                    {rule.type === 'dynamic'
-                                        ? t('pf.rule.summary.dynamic', { bindAddress: rule.bindAddress, localPort: rule.localPort })
-                                        : t('pf.rule.summary.default', { bindAddress: rule.bindAddress, localPort: rule.localPort, remoteHost: rule.remoteHost, remotePort: rule.remotePort })
-                                    }
-                                </span>
+                                <TooltipProvider delayDuration={300}>
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <span className="truncate cursor-default">
+                                                {rule.type === 'dynamic'
+                                                    ? t('pf.rule.summary.dynamic', { bindAddress: rule.bindAddress, localPort: rule.localPort })
+                                                    : t('pf.rule.summary.default', { bindAddress: rule.bindAddress, localPort: rule.localPort, remoteHost: rule.remoteHost, remotePort: rule.remotePort })
+                                                }
+                                            </span>
+                                        </TooltipTrigger>
+                                        <TooltipContent side="bottom" align="start" className="max-w-xs">
+                                            <div className="space-y-1 text-xs">
+                                                {host ? (
+                                                    <>
+                                                        <div className="font-medium">{t('pf.tooltip.relayHost')}</div>
+                                                        <div>{t('pf.tooltip.hostLabel')}: {host.label}</div>
+                                                        <div>{t('pf.tooltip.hostAddress')}: {host.username}@{host.hostname}:{host.port}</div>
+                                                    </>
+                                                ) : (
+                                                    <div className="text-muted-foreground">{t('pf.tooltip.noHost')}</div>
+                                                )}
+                                                <div className="border-t border-border/40 pt-1 mt-1">
+                                                    {rule.type === 'dynamic'
+                                                        ? t('pf.tooltip.dynamicDesc')
+                                                        : rule.type === 'local'
+                                                            ? t('pf.tooltip.localDesc')
+                                                            : t('pf.tooltip.remoteDesc')
+                                                    }
+                                                </div>
+                                            </div>
+                                        </TooltipContent>
+                                    </Tooltip>
+                                </TooltipProvider>
                             </div>
                         </div>
                         <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">

components/settings/ThemeSelectModal.tsx

@@ -8,6 +8,7 @@ import { createPortal } from 'react-dom';
 import { Check, Palette, X } from 'lucide-react';
 import { useI18n } from '../../application/i18n/I18nProvider';
 import { TERMINAL_THEMES, TerminalThemeConfig } from '../../infrastructure/config/terminalThemes';
+import { useCustomThemes } from '../../application/state/customThemeStore';
 import { Button } from '../ui/button';
 import { cn } from '../../lib/utils';
 
@@ -74,6 +75,8 @@ export const ThemeSelectModal: React.FC<ThemeSelectModalProps> = ({
         return { darkThemes: dark, lightThemes: light };
     }, []);
 
+    const customThemes = useCustomThemes();
+
     // Handle theme selection - select and close
     const handleThemeSelect = useCallback((themeId: string) => {
         onSelect(themeId);
@@ -164,6 +167,25 @@ export const ThemeSelectModal: React.FC<ThemeSelectModalProps> = ({
                             ))}
                         </div>
                     </div>
+
+                    {/* Custom Themes Section */}
+                    {customThemes.length > 0 && (
+                        <div className="mt-4">
+                            <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-semibold px-1">
+                                {t('terminal.customTheme.section')}
+                            </div>
+                            <div className="space-y-1">
+                                {customThemes.map(theme => (
+                                    <ThemeItem
+                                        key={theme.id}
+                                        theme={theme}
+                                        isSelected={selectedThemeId === theme.id}
+                                        onSelect={handleThemeSelect}
+                                    />
+                                ))}
+                            </div>
+                        </div>
+                    )}
                 </div>
 
                 {/* Footer */}

components/settings/settings-ui.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { ScrollArea } from "../ui/scroll-area";
 import { TabsContent } from "../ui/tabs";
@@ -38,23 +40,54 @@ interface SelectProps {
   disabled?: boolean;
 }
 
-export const Select: React.FC<SelectProps> = ({ value, options, onChange, className, disabled }) => (
-  <select
-    value={value}
-    onChange={(e) => onChange(e.target.value)}
-    disabled={disabled}
-    className={cn(
-      "h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-      className,
-    )}
-  >
-    {options.map((opt) => (
-      <option key={opt.value} value={opt.value}>
-        {opt.label}
-      </option>
-    ))}
-  </select>
-);
+export const Select: React.FC<SelectProps> = ({ value, options, onChange, className, disabled }) => {
+  const selectedOption = options.find((opt) => opt.value === value);
+  return (
+    <SelectPrimitive.Root value={value} onValueChange={onChange} disabled={disabled}>
+      <SelectPrimitive.Trigger
+        className={cn(
+          "flex h-9 items-center justify-between rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+          className,
+        )}
+      >
+        <SelectPrimitive.Value>{selectedOption?.label ?? value}</SelectPrimitive.Value>
+        <SelectPrimitive.Icon asChild>
+          <ChevronDown className="ml-2 h-4 w-4 opacity-50" />
+        </SelectPrimitive.Icon>
+      </SelectPrimitive.Trigger>
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+          className="z-[200000] max-h-80 min-w-[12rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
+          position="popper"
+          sideOffset={4}
+        >
+          <SelectPrimitive.ScrollUpButton className="flex cursor-default items-center justify-center py-1">
+            <ChevronUp className="h-4 w-4" />
+          </SelectPrimitive.ScrollUpButton>
+          <SelectPrimitive.Viewport className="p-1 h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]">
+            {options.map((opt) => (
+              <SelectPrimitive.Item
+                key={opt.value}
+                value={opt.value}
+                className="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+              >
+                <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                  <SelectPrimitive.ItemIndicator>
+                    <Check className="h-4 w-4" />
+                  </SelectPrimitive.ItemIndicator>
+                </span>
+                <SelectPrimitive.ItemText>{opt.label}</SelectPrimitive.ItemText>
+              </SelectPrimitive.Item>
+            ))}
+          </SelectPrimitive.Viewport>
+          <SelectPrimitive.ScrollDownButton className="flex cursor-default items-center justify-center py-1">
+            <ChevronDown className="h-4 w-4" />
+          </SelectPrimitive.ScrollDownButton>
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+  );
+};
 
 export const SectionHeader: React.FC<{ title: string; className?: string }> = ({
   title,

components/settings/tabs/SettingsAppearanceTab.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { Check, Moon, Palette, Sun } from "lucide-react";
+import { Check, Monitor, Moon, Palette, Sun } from "lucide-react";
 import { useI18n } from "../../../application/i18n/I18nProvider";
 import { DARK_UI_THEMES, LIGHT_UI_THEMES } from "../../../infrastructure/config/uiThemes";
 import { useAvailableUIFonts } from "../../../application/state/uiFontStore";
@@ -9,8 +9,8 @@ import { SectionHeader, SettingsTabContent, SettingRow, Toggle, Select } from ".
 import { FontSelect } from "../FontSelect";
 
 export default function SettingsAppearanceTab(props: {
-  theme: "dark" | "light";
-  setTheme: (theme: "dark" | "light") => void;
+  theme: "dark" | "light" | "system";
+  setTheme: (theme: "dark" | "light" | "system") => void;
   lightUiThemeId: string;
   setLightUiThemeId: (themeId: string) => void;
   darkUiThemeId: string;
@@ -97,6 +97,12 @@ export default function SettingsAppearanceTab(props: {
     { name: "Slate", value: "215 16% 47%" },
   ];
 
+  const THEME_OPTIONS: { value: "light" | "system" | "dark"; icon: React.ReactNode; label: string }[] = [
+    { value: "light", icon: <Sun size={14} />, label: t("settings.appearance.theme.light") },
+    { value: "system", icon: <Monitor size={14} />, label: t("settings.appearance.theme.system") },
+    { value: "dark", icon: <Moon size={14} />, label: t("settings.appearance.theme.dark") },
+  ];
+
   const renderThemeSwatches = (
     options: { id: string; name: string; tokens: { background: string } }[],
     value: string,
@@ -153,13 +159,25 @@ export default function SettingsAppearanceTab(props: {
       <SectionHeader title={t("settings.appearance.uiTheme")} />
       <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
         <SettingRow
-          label={t("settings.appearance.darkMode")}
-          description={t("settings.appearance.darkMode.desc")}
+          label={t("settings.appearance.theme")}
+          description={t("settings.appearance.theme.desc")}
         >
-          <div className="flex items-center gap-2">
-            <Sun size={14} className="text-muted-foreground" />
-            <Toggle checked={theme === "dark"} onChange={(v) => setTheme(v ? "dark" : "light")} />
-            <Moon size={14} className="text-muted-foreground" />
+          <div className="flex items-center rounded-lg border border-border bg-muted/50 p-0.5">
+            {THEME_OPTIONS.map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => setTheme(opt.value)}
+                className={cn(
+                  "flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-colors",
+                  theme === opt.value
+                    ? "bg-background text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                {opt.icon}
+                {opt.label}
+              </button>
+            ))}
           </div>
         </SettingRow>
       </div>

components/settings/tabs/SettingsShortcutsTab.tsx

@@ -115,7 +115,7 @@ export default function SettingsShortcutsTab(props: {
     };
   }, [recordingBindingId, recordingScheme, setIsHotkeyRecording]);
 
-  const categories = useMemo(() => ["tabs", "terminal", "navigation", "app"] as const, []);
+  const categories = useMemo(() => ["tabs", "terminal", "navigation", "app", "sftp"] as const, []);
 
   return (
     <SettingsTabContent value="shortcuts">
@@ -179,7 +179,7 @@ export default function SettingsShortcutsTab(props: {
 
                     return (
                       <div key={binding.id} className="flex items-center justify-between px-4 py-2">
-                        <span className="text-sm">{binding.label}</span>
+                        <span className="text-sm">{t(`settings.shortcuts.binding.${binding.id}`) !== `settings.shortcuts.binding.${binding.id}` ? t(`settings.shortcuts.binding.${binding.id}`) : binding.label}</span>
                         <div className="flex items-center gap-2">
                           {isSpecialBinding ? (
                             <div className="flex items-center gap-1">

components/settings/tabs/SettingsSyncTab.tsx

@@ -1,51 +1,73 @@
 import React, { useCallback } from "react";
-import type { Host, Identity, Snippet, SSHKey } from "../../../domain/models";
+import type { PortForwardingRule } from "../../../domain/models";
 import type { SyncPayload } from "../../../domain/sync";
+import { buildSyncPayload, applySyncPayload } from "../../../domain/syncPayload";
+import type { SyncableVaultData } from "../../../domain/syncPayload";
+import { STORAGE_KEY_PORT_FORWARDING } from "../../../infrastructure/config/storageKeys";
+import { localStorageAdapter } from "../../../infrastructure/persistence/localStorageAdapter";
 import { CloudSyncSettings } from "../../CloudSyncSettings";
 import { SettingsTabContent } from "../settings-ui";
 
 export default function SettingsSyncTab(props: {
-  hosts: Host[];
-  keys: SSHKey[];
-  identities: Identity[];
-  snippets: Snippet[];
+  vault: SyncableVaultData;
+  portForwardingRules: PortForwardingRule[];
   importDataFromString: (data: string) => void;
+  importPortForwardingRules: (rules: PortForwardingRule[]) => void;
   clearVaultData: () => void;
 }) {
-  const { hosts, keys, identities, snippets, importDataFromString, clearVaultData } = props;
+  const {
+    vault,
+    portForwardingRules,
+    importDataFromString,
+    importPortForwardingRules,
+    clearVaultData,
+  } = props;
 
-  const buildSyncPayload = useCallback((): SyncPayload => {
-    return {
-      hosts,
-      keys,
-      identities,
-      snippets,
-      customGroups: [],
-      syncedAt: Date.now(),
-    };
-  }, [hosts, keys, identities, snippets]);
-
-  const applySyncPayload = useCallback(
-    (payload: SyncPayload) => {
-      importDataFromString(
-        JSON.stringify({
-          hosts: payload.hosts,
-          keys: payload.keys,
-          identities: payload.identities,
-          snippets: payload.snippets,
-          customGroups: payload.customGroups,
-        }),
+  const onBuildPayload = useCallback((): SyncPayload => {
+    // If hook state is empty but localStorage has data, the async store
+    // initialization hasn't finished yet.  Read from localStorage directly
+    // to avoid uploading empty arrays and overwriting the remote snapshot.
+    let effectiveRules = portForwardingRules;
+    if (effectiveRules.length === 0) {
+      const stored = localStorageAdapter.read<PortForwardingRule[]>(
+        STORAGE_KEY_PORT_FORWARDING,
       );
+      if (stored && Array.isArray(stored) && stored.length > 0) {
+        // Strip transient per-device fields (status, error, lastUsedAt)
+        // that setGlobalRules persists to localStorage but shouldn't be
+        // included in the cloud sync snapshot.
+        effectiveRules = stored.map(({ status: _status, error: _error, ...rest }) => ({
+          ...rest,
+          status: "inactive" as const,
+          error: undefined,
+          lastUsedAt: undefined,
+        }));
+      }
+    }
+    return buildSyncPayload(vault, effectiveRules);
+  }, [vault, portForwardingRules]);
+
+  const onApplyPayload = useCallback(
+    (payload: SyncPayload) => {
+      applySyncPayload(payload, {
+        importVaultData: importDataFromString,
+        importPortForwardingRules,
+      });
     },
-    [importDataFromString],
+    [importDataFromString, importPortForwardingRules],
   );
 
+  const clearAllLocalData = useCallback(() => {
+    clearVaultData();
+    importPortForwardingRules([]);
+  }, [clearVaultData, importPortForwardingRules]);
+
   return (
     <SettingsTabContent value="sync">
       <CloudSyncSettings
-        onBuildPayload={buildSyncPayload}
-        onApplyPayload={applySyncPayload}
-        onClearLocalData={clearVaultData}
+        onBuildPayload={onBuildPayload}
+        onApplyPayload={onApplyPayload}
+        onClearLocalData={clearAllLocalData}
       />
     </SettingsTabContent>
   );

components/settings/tabs/SettingsSystemTab.tsx

@@ -1,14 +1,25 @@
 /**
- * Settings System Tab - System information, temp file management, and session logs
+ * Settings System Tab - System information, temp file management, session logs, and global hotkey
  */
-import { FileText, FolderOpen, HardDrive, RefreshCw, Trash2 } from "lucide-react";
+import { Download, ExternalLink, FileText, FolderOpen, HardDrive, Keyboard, RefreshCw, RotateCcw, Trash2 } from "lucide-react";
 import React, { useCallback, useEffect, useState } from "react";
 import { useI18n } from "../../../application/i18n/I18nProvider";
+import { getCredentialProtectionAvailability } from "../../../infrastructure/services/credentialProtection";
 import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
-import { SessionLogFormat } from "../../../domain/models";
+import {
+  checkForUpdate,
+  downloadUpdate,
+  installUpdate,
+  onDownloadProgress,
+  onDownloaded,
+  onError as onUpdateError,
+  getReleasesUrl,
+} from "../../../infrastructure/services/updateService";
+import { SessionLogFormat, keyEventToString } from "../../../domain/models";
 import { TabsContent } from "../../ui/tabs";
 import { Button } from "../../ui/button";
 import { Toggle, Select, SettingRow } from "../settings-ui";
+import { cn } from "../../../lib/utils";
 
 interface TempDirInfo {
   path: string;
@@ -31,6 +42,11 @@ interface SettingsSystemTabProps {
   setSessionLogsDir: (dir: string) => void;
   sessionLogsFormat: SessionLogFormat;
   setSessionLogsFormat: (format: SessionLogFormat) => void;
+  toggleWindowHotkey: string;
+  setToggleWindowHotkey: (hotkey: string) => void;
+  closeToTray: boolean;
+  setCloseToTray: (enabled: boolean) => void;
+  hotkeyRegistrationError: string | null;
 }
 
 const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
@@ -40,13 +56,99 @@ const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
   setSessionLogsDir,
   sessionLogsFormat,
   setSessionLogsFormat,
+  toggleWindowHotkey,
+  setToggleWindowHotkey,
+  closeToTray,
+  setCloseToTray,
+  hotkeyRegistrationError,
 }) => {
   const { t } = useI18n();
+  const isMac = typeof navigator !== "undefined" && /Mac/i.test(navigator.platform);
 
   const [tempDirInfo, setTempDirInfo] = useState<TempDirInfo | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [isClearing, setIsClearing] = useState(false);
   const [clearResult, setClearResult] = useState<{ deletedCount: number; failedCount: number } | null>(null);
+  const [isRecordingHotkey, setIsRecordingHotkey] = useState(false);
+  const [hotkeyError, setHotkeyError] = useState<string | null>(null);
+  const [credentialsAvailable, setCredentialsAvailable] = useState<boolean | null>(null);
+  const [isCheckingCredentials, setIsCheckingCredentials] = useState(false);
+
+  // Software Update state
+  type UpdateStatus = 'idle' | 'checking' | 'available' | 'up-to-date' | 'downloading' | 'ready' | 'error';
+  const [updateStatus, setUpdateStatus] = useState<UpdateStatus>('idle');
+  const [updateVersion, setUpdateVersion] = useState('');
+  const [updatePercent, setUpdatePercent] = useState(0);
+  const [updateError, setUpdateError] = useState('');
+  const [updateSupported, setUpdateSupported] = useState(true);
+  const [appVersion, setAppVersion] = useState('');
+
+  // Load app version on mount
+  useEffect(() => {
+    const promise = netcattyBridge.get()?.getAppInfo?.();
+    if (promise) {
+      promise.then((info) => {
+        setAppVersion(info?.version ?? '');
+      }).catch(() => {});
+    }
+  }, []);
+
+  // Subscribe to auto-update events
+  useEffect(() => {
+    const cleanupProgress = onDownloadProgress((p) => {
+      setUpdatePercent(Math.round(p.percent));
+    });
+    const cleanupDownloaded = onDownloaded(() => {
+      setUpdateStatus('ready');
+    });
+    const cleanupError = onUpdateError((payload) => {
+      setUpdateError(payload.error);
+      setUpdateStatus('error');
+    });
+    return () => {
+      cleanupProgress?.();
+      cleanupDownloaded?.();
+      cleanupError?.();
+    };
+  }, []);
+
+  const handleCheckForUpdate = useCallback(async () => {
+    setUpdateStatus('checking');
+    setUpdateError('');
+    const result = await checkForUpdate();
+    if (result.error) {
+      setUpdateError(result.error);
+      setUpdateSupported(result.supported !== false);
+      setUpdateStatus('error');
+    } else if (result.available && result.version) {
+      setUpdateVersion(result.version);
+      setUpdateSupported(result.supported !== false);
+      setUpdateStatus('available');
+    } else {
+      setUpdateSupported(result.supported !== false);
+      setUpdateStatus('up-to-date');
+    }
+  }, []);
+
+  const handleDownloadUpdate = useCallback(async () => {
+    setUpdateStatus('downloading');
+    setUpdatePercent(0);
+    const result = await downloadUpdate();
+    if (!result.success) {
+      setUpdateError(result.error ?? t('settings.update.downloadError'));
+      setUpdateStatus('error');
+    }
+    // Success is handled by onDownloaded event
+  }, [t]);
+
+  const handleInstallUpdate = useCallback(() => {
+    installUpdate();
+  }, []);
+
+  const handleOpenReleases = useCallback(() => {
+    const url = updateVersion ? getReleasesUrl(updateVersion) : getReleasesUrl();
+    netcattyBridge.get()?.openExternal?.(url);
+  }, [updateVersion]);
 
   const loadTempDirInfo = useCallback(async () => {
     const bridge = netcattyBridge.get();
@@ -67,6 +169,20 @@ const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
     loadTempDirInfo();
   }, [loadTempDirInfo]);
 
+  const loadCredentialProtectionStatus = useCallback(async () => {
+    setIsCheckingCredentials(true);
+    try {
+      const available = await getCredentialProtectionAvailability();
+      setCredentialsAvailable(available);
+    } finally {
+      setIsCheckingCredentials(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadCredentialProtectionStatus();
+  }, [loadCredentialProtectionStatus]);
+
   const handleClearTempFiles = useCallback(async () => {
     const bridge = netcattyBridge.get();
     if (!bridge?.clearTempDir) return;
@@ -116,6 +232,56 @@ const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
     }
   }, [sessionLogsDir]);
 
+  // Handle global toggle hotkey recording
+  const cancelHotkeyRecording = useCallback(() => {
+    setIsRecordingHotkey(false);
+  }, []);
+
+  const handleResetHotkey = useCallback(() => {
+    // Reset to default hotkey (Ctrl+` or ⌃+` on Mac)
+    const defaultHotkey = isMac ? '⌃ + `' : 'Ctrl + `';
+    setToggleWindowHotkey(defaultHotkey);
+    setHotkeyError(null);
+  }, [isMac, setToggleWindowHotkey]);
+
+  // Hotkey recording effect
+  useEffect(() => {
+    if (!isRecordingHotkey) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (e.key === "Escape") {
+        cancelHotkeyRecording();
+        return;
+      }
+
+      // Ignore modifier-only keys
+      if (["Meta", "Control", "Alt", "Shift"].includes(e.key)) return;
+
+      const keyString = keyEventToString(e, isMac);
+      setToggleWindowHotkey(keyString);
+      setHotkeyError(null);
+      cancelHotkeyRecording();
+    };
+
+    const handleClick = () => {
+      cancelHotkeyRecording();
+    };
+
+    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);
+    };
+  }, [isRecordingHotkey, isMac, setToggleWindowHotkey, cancelHotkeyRecording]);
+
   const formatOptions = [
     { value: "txt", label: t("settings.sessionLogs.formatTxt") },
     { value: "raw", label: t("settings.sessionLogs.formatRaw") },
@@ -137,6 +303,161 @@ const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
             </p>
           </div>
 
+          {/* Software Update Section */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <Download size={18} className="text-muted-foreground" />
+              <h3 className="text-base font-medium">{t('settings.update.title')}</h3>
+            </div>
+            <div className="rounded-lg border border-border/60 p-4 space-y-3">
+              {/* Current version */}
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-muted-foreground">
+                  {t('settings.update.currentVersion')}
+                </span>
+                <span className="text-sm font-mono">{appVersion || '...'}</span>
+              </div>
+
+              {/* Status message */}
+              {updateStatus === 'up-to-date' && (
+                <p className="text-sm text-green-600 dark:text-green-400">
+                  {t('settings.update.upToDate')}
+                </p>
+              )}
+              {updateStatus === 'available' && (
+                <p className="text-sm text-blue-600 dark:text-blue-400">
+                  {t('settings.update.available').replace('{version}', updateVersion)}
+                </p>
+              )}
+              {updateStatus === 'downloading' && (
+                <div className="space-y-2">
+                  <p className="text-sm text-muted-foreground">
+                    {t('settings.update.downloading').replace('{percent}', String(updatePercent))}
+                  </p>
+                  <div className="h-2 w-full rounded-full bg-muted overflow-hidden">
+                    <div
+                      className="h-full rounded-full bg-primary transition-all duration-300"
+                      style={{ width: `${updatePercent}%` }}
+                    />
+                  </div>
+                </div>
+              )}
+              {updateStatus === 'ready' && (
+                <p className="text-sm text-green-600 dark:text-green-400">
+                  {t('settings.update.readyToInstall')}
+                </p>
+              )}
+              {updateStatus === 'error' && (
+                <p className="text-sm text-destructive">
+                  {updateError || t('settings.update.error')}
+                </p>
+              )}
+
+              {/* Manual fallback hint when auto-update not supported */}
+              {!updateSupported && updateStatus !== 'idle' && (
+                <p className="text-sm text-muted-foreground">
+                  {t('settings.update.manualDownloadHint')}
+                </p>
+              )}
+
+              {/* Action buttons */}
+              <div className="flex items-center gap-2 pt-1">
+                {(updateStatus === 'idle' || updateStatus === 'up-to-date' || updateStatus === 'error') && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleCheckForUpdate}
+                    disabled={updateStatus === 'checking'}
+                  >
+                    <RefreshCw size={14} className={cn('mr-1.5', updateStatus === 'checking' && 'animate-spin')} />
+                    {updateStatus === 'checking' ? t('settings.update.checking') : t('settings.update.checkForUpdates')}
+                  </Button>
+                )}
+                {updateStatus === 'checking' && (
+                  <Button variant="outline" size="sm" disabled>
+                    <RefreshCw size={14} className="mr-1.5 animate-spin" />
+                    {t('settings.update.checking')}
+                  </Button>
+                )}
+                {updateStatus === 'available' && updateSupported && (
+                  <Button variant="default" size="sm" onClick={handleDownloadUpdate}>
+                    <Download size={14} className="mr-1.5" />
+                    {t('settings.update.download')}
+                  </Button>
+                )}
+                {updateStatus === 'ready' && (
+                  <Button variant="default" size="sm" onClick={handleInstallUpdate}>
+                    <RotateCcw size={14} className="mr-1.5" />
+                    {t('settings.update.restartNow')}
+                  </Button>
+                )}
+                {/* Manual fallback link — shown when unsupported, on error, or when update is available but unsupported */}
+                {((updateStatus === 'error') || (updateStatus === 'available' && !updateSupported)) && (
+                  <Button variant="ghost" size="sm" onClick={handleOpenReleases}>
+                    <ExternalLink size={14} className="mr-1.5" />
+                    {t('settings.update.manualDownload')}
+                  </Button>
+                )}
+              </div>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('settings.update.hint')}
+            </p>
+          </div>
+
+          {/* Credential Protection Section */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <HardDrive size={18} className="text-muted-foreground" />
+              <h3 className="text-base font-medium">{t("settings.system.credentials.title")}</h3>
+            </div>
+
+            <div className="bg-muted/30 rounded-lg p-4 space-y-3">
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <p className="text-sm text-muted-foreground">
+                    {t("settings.system.credentials.status")}
+                  </p>
+                  <p
+                    className={cn(
+                      "text-sm font-medium mt-1",
+                      credentialsAvailable === true && "text-emerald-600 dark:text-emerald-400",
+                      credentialsAvailable === false && "text-amber-600 dark:text-amber-400",
+                    )}
+                  >
+                    {isCheckingCredentials
+                      ? t("settings.system.credentials.checking")
+                      : credentialsAvailable === true
+                        ? t("settings.system.credentials.available")
+                        : credentialsAvailable === false
+                          ? t("settings.system.credentials.unavailable")
+                          : t("settings.system.credentials.unknown")}
+                  </p>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={loadCredentialProtectionStatus}
+                  disabled={isCheckingCredentials}
+                  className="gap-1.5"
+                >
+                  <RefreshCw size={14} className={isCheckingCredentials ? "animate-spin" : ""} />
+                  {t("settings.system.refresh")}
+                </Button>
+              </div>
+
+              {credentialsAvailable === false && (
+                <p className="text-xs text-amber-700 dark:text-amber-400">
+                  {t("settings.system.credentials.unavailableHint")}
+                </p>
+              )}
+
+              <p className="text-xs text-muted-foreground">
+                {t("settings.system.credentials.portabilityHint")}
+              </p>
+            </div>
+          </div>
+
           {/* Temp Directory Section */}
           <div className="space-y-4">
             <div className="flex items-center gap-2">
@@ -295,6 +616,68 @@ const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
               {t("settings.sessionLogs.hint")}
             </p>
           </div>
+
+          {/* Global Toggle Window Section (Quake Mode) */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <Keyboard size={18} className="text-muted-foreground" />
+              <h3 className="text-base font-medium">{t("settings.globalHotkey.title")}</h3>
+            </div>
+
+            <div className="bg-muted/30 rounded-lg p-4 space-y-4">
+              {/* Toggle Window Hotkey */}
+              <SettingRow
+                label={t("settings.globalHotkey.toggleWindow")}
+                description={t("settings.globalHotkey.toggleWindowDesc")}
+              >
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setIsRecordingHotkey(true);
+                    }}
+                    className={cn(
+                      "px-3 py-1.5 text-sm font-mono rounded border transition-colors min-w-[100px] text-center",
+                      isRecordingHotkey
+                        ? "border-primary bg-primary/10 animate-pulse"
+                        : "border-border hover:border-primary/50",
+                    )}
+                  >
+                    {isRecordingHotkey
+                      ? t("settings.shortcuts.recording")
+                      : toggleWindowHotkey || t("settings.globalHotkey.notSet")}
+                  </button>
+                  {toggleWindowHotkey && (
+                    <button
+                      onClick={handleResetHotkey}
+                      className="p-1 hover:bg-muted rounded"
+                      title={t("settings.globalHotkey.reset")}
+                    >
+                      <RotateCcw size={14} />
+                    </button>
+                  )}
+                </div>
+              </SettingRow>
+              {(hotkeyError || hotkeyRegistrationError) && (
+                <p className="text-sm text-destructive">{hotkeyError || hotkeyRegistrationError}</p>
+              )}
+
+              {/* Close to Tray */}
+              <SettingRow
+                label={t("settings.globalHotkey.closeToTray")}
+                description={t("settings.globalHotkey.closeToTrayDesc")}
+              >
+                <Toggle
+                  checked={closeToTray}
+                  onChange={setCloseToTray}
+                />
+              </SettingRow>
+            </div>
+
+            <p className="text-xs text-muted-foreground">
+              {t("settings.globalHotkey.hint")}
+            </p>
+          </div>
         </div>
       </div>
     </TabsContent>

components/settings/tabs/SettingsTerminalTab.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useState, useMemo } from "react";
-import { AlertCircle, ChevronRight, Minus, Plus, RotateCcw } from "lucide-react";
+import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
+import { AlertCircle, ChevronRight, Import, Minus, Palette, Pencil, Plus, RotateCcw, Trash2 } from "lucide-react";
 import type {
   CursorShape,
   LinkModifier,
@@ -11,6 +11,8 @@ import { DEFAULT_KEYWORD_HIGHLIGHT_RULES } from "../../../domain/models";
 import { useI18n } from "../../../application/i18n/I18nProvider";
 import { MAX_FONT_SIZE, MIN_FONT_SIZE, type TerminalFont } from "../../../infrastructure/config/fonts";
 import { TERMINAL_THEMES } from "../../../infrastructure/config/terminalThemes";
+import { customThemeStore, useCustomThemes } from "../../../application/state/customThemeStore";
+import { parseItermcolors } from "../../../infrastructure/parsers/itermcolorsParser";
 import { cn } from "../../../lib/utils";
 import { Button } from "../../ui/button";
 import { Input } from "../../ui/input";
@@ -18,6 +20,8 @@ import { Label } from "../../ui/label";
 import { SectionHeader, Select, SettingsTabContent, SettingRow, Toggle } from "../settings-ui";
 import { ThemeSelectModal } from "../ThemeSelectModal";
 import { TerminalFontSelect } from "../TerminalFontSelect";
+import { CustomThemeModal } from "../../terminal/CustomThemeModal";
+import type { TerminalTheme } from "../../../domain/models";
 
 // Theme preview button component
 const ThemePreviewButton: React.FC<{
@@ -51,13 +55,13 @@ const ThemePreviewButton: React.FC<{
           <span className="inline-block w-1.5 h-2 animate-pulse" style={{ backgroundColor: c.cursor }} />
         </div>
       </div>
-      
+
       {/* Theme info */}
       <div className="flex-1 min-w-0">
         <div className="text-sm font-medium">{theme.name}</div>
         <div className="text-xs text-muted-foreground capitalize">{theme.type}</div>
       </div>
-      
+
       {/* Action button area */}
       <div className="flex items-center gap-2 text-muted-foreground">
         <span className="text-xs">{buttonLabel}</span>
@@ -100,11 +104,86 @@ export default function SettingsTerminalTab(props: {
   const [dirValidation, setDirValidation] = useState<{ valid: boolean; message?: string } | null>(null);
   const [themeModalOpen, setThemeModalOpen] = useState(false);
 
+  // Subscribe to custom theme changes so editing in-place triggers re-render
+  const customThemes = useCustomThemes();
+
   // Get current selected theme
   const currentTheme = useMemo(() => {
-    return TERMINAL_THEMES.find(t => t.id === terminalThemeId) || TERMINAL_THEMES[0];
+    return TERMINAL_THEMES.find(t => t.id === terminalThemeId)
+      || customThemes.find(t => t.id === terminalThemeId)
+      || TERMINAL_THEMES[0];
+  }, [terminalThemeId, customThemes]);
+
+  // Import .itermcolors file
+  const importFileRef = useRef<HTMLInputElement>(null);
+  const handleImportItermcolors = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) {
+      console.log('[Settings] No file selected');
+      return;
+    }
+    console.log('[Settings] File selected:', file.name, 'size:', file.size);
+    const name = file.name.replace(/\.(itermcolors|xml)$/i, '');
+    const reader = new FileReader();
+    reader.onload = () => {
+      const xml = reader.result as string;
+      console.log('[Settings] File read successfully, length:', xml.length);
+      const parsed = parseItermcolors(xml, name);
+      if (parsed) {
+        console.log('[Settings] Theme parsed successfully:', parsed.id, parsed.name);
+        customThemeStore.addTheme(parsed);
+        setTerminalThemeId(parsed.id);
+      } else {
+        console.error('[Settings] Failed to parse .itermcolors file:', file.name);
+        window.alert(t('terminal.customTheme.importError') || 'Failed to parse the selected file. Please ensure it is a valid .itermcolors XML file.');
+      }
+    };
+    reader.onerror = () => {
+      console.error('[Settings] Failed to read file:', file.name, reader.error);
+    };
+    reader.readAsText(file);
+    e.target.value = '';
+  }, [setTerminalThemeId, t]);
+
+  // New custom theme modal
+  const [customThemeModalOpen, setCustomThemeModalOpen] = useState(false);
+  const [customThemeData, setCustomThemeData] = useState<TerminalTheme | null>(null);
+  const [isEditingTheme, setIsEditingTheme] = useState(false);
+
+  // Check if current theme is a custom theme
+  const isCustomTheme = useMemo(() => {
+    return currentTheme?.isCustom === true;
+  }, [currentTheme]);
+
+  const handleNewCustomTheme = useCallback(() => {
+    const base = TERMINAL_THEMES.find(t => t.id === terminalThemeId)
+      || customThemeStore.getThemeById(terminalThemeId)
+      || TERMINAL_THEMES[0];
+    const newTheme: TerminalTheme = {
+      ...base,
+      id: `custom-${Date.now()}`,
+      name: `${base.name} (Custom)`,
+      isCustom: true,
+      colors: { ...base.colors },
+    };
+    setCustomThemeData(newTheme);
+    setIsEditingTheme(false);
+    setCustomThemeModalOpen(true);
   }, [terminalThemeId]);
 
+  const handleEditCustomTheme = useCallback(() => {
+    if (!currentTheme?.isCustom) return;
+    setCustomThemeData({ ...currentTheme, colors: { ...currentTheme.colors } });
+    setIsEditingTheme(true);
+    setCustomThemeModalOpen(true);
+  }, [currentTheme]);
+
+  const handleDeleteCustomTheme = useCallback(() => {
+    if (!currentTheme?.isCustom) return;
+    customThemeStore.deleteTheme(currentTheme.id);
+    setTerminalThemeId(TERMINAL_THEMES[0].id);
+  }, [currentTheme, setTerminalThemeId]);
+
   // Fetch default shell on mount
   useEffect(() => {
     const bridge = (window as unknown as { netcatty?: NetcattyBridge }).netcatty;
@@ -194,7 +273,7 @@ export default function SettingsTerminalTab(props: {
         onClick={() => setThemeModalOpen(true)}
         buttonLabel={t("settings.terminal.theme.selectButton")}
       />
-      
+
       <ThemeSelectModal
         open={themeModalOpen}
         onClose={() => setThemeModalOpen(false)}
@@ -202,6 +281,86 @@ export default function SettingsTerminalTab(props: {
         onSelect={setTerminalThemeId}
       />
 
+      {/* Theme action buttons */}
+      <div className="flex items-center gap-2 -mt-1">
+        <Button
+          variant="outline"
+          size="sm"
+          className="gap-1.5"
+          onClick={handleNewCustomTheme}
+        >
+          <Palette size={14} />
+          {t('terminal.customTheme.new')}
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          className="gap-1.5"
+          onClick={() => importFileRef.current?.click()}
+        >
+          <Import size={14} />
+          {t('terminal.customTheme.import')}
+        </Button>
+        {isCustomTheme && (
+          <>
+            <Button
+              variant="outline"
+              size="sm"
+              className="gap-1.5"
+              onClick={handleEditCustomTheme}
+            >
+              <Pencil size={14} />
+              {t('common.edit')}
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              className="gap-1.5 text-destructive hover:text-destructive"
+              onClick={handleDeleteCustomTheme}
+            >
+              <Trash2 size={14} />
+              {t('common.delete')}
+            </Button>
+          </>
+        )}
+        <input
+          ref={importFileRef}
+          type="file"
+          accept=".itermcolors"
+          className="hidden"
+          onChange={handleImportItermcolors}
+        />
+      </div>
+
+      {/* Custom Theme Modal */}
+      {customThemeData && (
+        <CustomThemeModal
+          open={customThemeModalOpen}
+          theme={customThemeData}
+          isNew={!isEditingTheme}
+          onSave={(theme) => {
+            if (isEditingTheme) {
+              customThemeStore.updateTheme(theme.id, theme);
+            } else {
+              customThemeStore.addTheme(theme);
+            }
+            setTerminalThemeId(theme.id);
+            setCustomThemeModalOpen(false);
+            setCustomThemeData(null);
+          }}
+          onDelete={isEditingTheme ? (themeId) => {
+            customThemeStore.deleteTheme(themeId);
+            setTerminalThemeId(TERMINAL_THEMES[0].id);
+            setCustomThemeModalOpen(false);
+            setCustomThemeData(null);
+          } : undefined}
+          onCancel={() => {
+            setCustomThemeModalOpen(false);
+            setCustomThemeData(null);
+          }}
+        />
+      )}
+
       <SectionHeader title={t("settings.terminal.section.font")} />
       <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
         <SettingRow
@@ -314,7 +473,7 @@ export default function SettingsTerminalTab(props: {
             onChange={(v) =>
               updateTerminalSetting("terminalEmulationType", v as TerminalEmulationType)
             }
-            className="w-36"
+            className="w-44"
           />
         </SettingRow>
       </div>
@@ -409,6 +568,13 @@ export default function SettingsTerminalTab(props: {
           <Toggle checked={terminalSettings.middleClickPaste} onChange={(v) => updateTerminalSetting("middleClickPaste", v)} />
         </SettingRow>
 
+        <SettingRow
+          label={t("settings.terminal.behavior.bracketedPaste")}
+          description={t("settings.terminal.behavior.bracketedPaste.desc")}
+        >
+          <Toggle checked={!terminalSettings.disableBracketedPaste} onChange={(v) => updateTerminalSetting("disableBracketedPaste", !v)} />
+        </SettingRow>
+
         <SettingRow
           label={t("settings.terminal.behavior.scrollOnInput")}
           description={t("settings.terminal.behavior.scrollOnInput.desc")}

components/sftp-modal/SftpModalDialogs.tsx

@@ -29,6 +29,13 @@ interface SftpModalDialogsProps {
   getSymbolicPermissions: () => string;
   handleSavePermissions: () => void;
   isChangingPermissions: boolean;
+  showCreateDialog: boolean;
+  setShowCreateDialog: (open: boolean) => void;
+  createType: "file" | "folder";
+  createName: string;
+  setCreateName: (value: string) => void;
+  isCreating: boolean;
+  handleCreateSubmit: () => void;
 }
 
 export const SftpModalDialogs: React.FC<SftpModalDialogsProps> = ({
@@ -49,6 +56,13 @@ export const SftpModalDialogs: React.FC<SftpModalDialogsProps> = ({
   getSymbolicPermissions,
   handleSavePermissions,
   isChangingPermissions,
+  showCreateDialog,
+  setShowCreateDialog,
+  createType,
+  createName,
+  setCreateName,
+  isCreating,
+  handleCreateSubmit,
 }) => (
   <>
     <Dialog open={showRenameDialog} onOpenChange={setShowRenameDialog}>
@@ -135,5 +149,38 @@ export const SftpModalDialogs: React.FC<SftpModalDialogsProps> = ({
         </DialogFooter>
       </DialogContent>
     </Dialog>
+
+    <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
+      <DialogContent className="sm:max-w-[400px]">
+        <DialogHeader>
+          <DialogTitle>
+            {t(createType === "folder" ? "sftp.newFolder" : "sftp.newFile")}
+          </DialogTitle>
+          <DialogDescription>
+            {t(createType === "folder" ? "sftp.prompt.newFolderName" : "sftp.fileName.placeholder")}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <Input
+            value={createName}
+            onChange={(e) => setCreateName(e.target.value)}
+            placeholder={t(createType === "folder" ? "sftp.prompt.newFolderName" : "sftp.fileName.placeholder")}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") handleCreateSubmit();
+            }}
+            autoFocus
+          />
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setShowCreateDialog(false)}>
+            {t("common.cancel")}
+          </Button>
+          <Button onClick={handleCreateSubmit} disabled={isCreating || !createName.trim()}>
+            {isCreating ? <Loader2 size={14} className="mr-2 animate-spin" /> : null}
+            {t("common.apply")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   </>
 );

components/sftp-modal/SftpModalFileList.tsx

@@ -329,18 +329,26 @@ export const SftpModalFileList: React.FC<SftpModalFileListProps> = ({
                     ) : (
                       <>
                         {isNavigableDirectory && (
-                          <ContextMenuItem
-                            onClick={() =>
-                              handleNavigate(
-                                currentPath === "/"
-                                  ? `/${file.name}`
-                                  : `${currentPath}/${file.name}`,
-                              )
-                            }
-                          >
-                            <FolderOpen size={14} className="mr-2" />
-                            {t("sftp.context.open")}
-                          </ContextMenuItem>
+                          <>
+                            <ContextMenuItem
+                              onClick={() =>
+                                handleNavigate(
+                                  currentPath === "/"
+                                    ? `/${file.name}`
+                                    : `${currentPath}/${file.name}`,
+                                )
+                              }
+                            >
+                              <FolderOpen size={14} className="mr-2" />
+                              {t("sftp.context.open")}
+                            </ContextMenuItem>
+                            {!isLocalSession && (
+                              <ContextMenuItem onClick={() => handleDownload(file)}>
+                                <Download size={14} className="mr-2" />
+                                {t("sftp.context.download")}
+                              </ContextMenuItem>
+                            )}
+                          </>
                         )}
                         {isDownloadableFile && (
                           <>

components/sftp-modal/SftpModalHeader.tsx

@@ -1,7 +1,8 @@
-import React from "react";
-import { ArrowUp, Check, ChevronRight, FilePlus, FolderPlus, FolderUp, Home, Languages, MoreHorizontal, RefreshCw, Upload } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { ArrowUp, Bookmark, Check, ChevronRight, FilePlus, FolderPlus, FolderUp, Home, Languages, MoreHorizontal, RefreshCw, Trash2, Upload } from "lucide-react";
 import { cn } from "../../lib/utils";
 import type { Host, SftpFilenameEncoding } from "../../types";
+import { useSftpBookmarks } from "../sftp/hooks/useSftpBookmarks";
 import { DistroAvatar } from "../DistroAvatar";
 import { Button } from "../ui/button";
 import { DialogHeader, DialogTitle } from "../ui/dialog";
@@ -50,6 +51,8 @@ interface SftpModalHeaderProps {
   onCreateFile: () => void;
   onFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onFolderSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onUpdateHost?: (host: Host) => void;
+  onNavigateToBookmark?: (path: string) => void;
 }
 
 export const SftpModalHeader: React.FC<SftpModalHeaderProps> = ({
@@ -88,252 +91,358 @@ export const SftpModalHeader: React.FC<SftpModalHeaderProps> = ({
   onCreateFile,
   onFileSelect,
   onFolderSelect,
-}) => (
-  <>
-    <DialogHeader className="px-4 py-3 border-b border-border/60 flex-shrink-0">
-      <div className="flex items-center gap-3 pr-8">
-        <DistroAvatar
-          host={host}
-          fallback={host.label.slice(0, 2).toUpperCase()}
-          className="h-8 w-8"
-        />
-        <div className="flex-1 min-w-0">
-          <DialogTitle className="text-sm font-semibold">
-            {host.label}
-          </DialogTitle>
-          <div className="text-xs text-muted-foreground font-mono">
-            {credentials.username || "root"}@{credentials.hostname}:
-            {credentials.port || 22}
+  onUpdateHost,
+  onNavigateToBookmark,
+}) => {
+  // Delay tooltip activation to prevent flickering when modal opens
+  const [tooltipsReady, setTooltipsReady] = useState(false);
+  const [openTooltip, setOpenTooltip] = useState<string | null>(null);
+
+  // Bookmarks
+  const {
+    bookmarks,
+    isCurrentPathBookmarked,
+    toggleBookmark,
+    deleteBookmark,
+  } = useSftpBookmarks({
+    host,
+    currentPath,
+    onUpdateHost,
+  });
+
+  useEffect(() => {
+    const timer = setTimeout(() => setTooltipsReady(true), 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleTooltipOpenChange = (id: string) => (open: boolean) => {
+    if (!tooltipsReady) return;
+    setOpenTooltip(open ? id : null);
+  };
+
+  return (
+    <>
+      <DialogHeader className="px-4 py-3 border-b border-border/60 flex-shrink-0">
+        <div className="flex items-center gap-3 pr-8">
+          <DistroAvatar
+            host={host}
+            fallback={host.label.slice(0, 2).toUpperCase()}
+            className="h-8 w-8"
+          />
+          <div className="flex-1 min-w-0">
+            <DialogTitle className="text-sm font-semibold">
+              {host.label}
+            </DialogTitle>
+            <div className="text-xs text-muted-foreground font-mono">
+              {credentials.username || "root"}@{credentials.hostname}:
+              {credentials.port || 22}
+            </div>
           </div>
         </div>
-      </div>
-    </DialogHeader>
+      </DialogHeader>
 
-    <TooltipProvider delayDuration={300}>
-    <div className="px-4 py-2 border-b border-border/60 flex items-center gap-2 flex-shrink-0 bg-muted/30">
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7"
-            onClick={onUp}
-            disabled={isAtRoot}
-          >
-            <ArrowUp size={14} />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>{t("sftp.nav.up")}</TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7"
-            onClick={onHome}
-          >
-            <Home size={14} />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>{t("sftp.nav.home")}</TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7"
-            onClick={onRefresh}
-          >
-            <RefreshCw
-              size={14}
-              className={cn(isRefreshing && "animate-spin")}
-            />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>{t("sftp.nav.refresh")}</TooltipContent>
-      </Tooltip>
-      {showEncoding && (
-        <Popover>
-          <Tooltip>
+      <TooltipProvider delayDuration={500} skipDelayDuration={800} disableHoverableContent>
+        <div className="px-4 py-2 border-b border-border/60 flex items-center gap-2 flex-shrink-0 bg-muted/30">
+          <Tooltip open={openTooltip === 'up'} onOpenChange={handleTooltipOpenChange('up')}>
             <TooltipTrigger asChild>
-              <PopoverTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7"
-                >
-                  <Languages size={14} />
-                </Button>
-              </PopoverTrigger>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={onUp}
+                disabled={isAtRoot}
+              >
+                <ArrowUp size={14} />
+              </Button>
             </TooltipTrigger>
-            <TooltipContent>{t("sftp.encoding.label")}</TooltipContent>
+            <TooltipContent>{t("sftp.nav.up")}</TooltipContent>
           </Tooltip>
-          <PopoverContent className="w-36 p-1" align="start">
-            {(["auto", "utf-8", "gb18030"] as const).map((encoding) => (
-              <PopoverClose asChild key={encoding}>
+          <Tooltip open={openTooltip === 'home'} onOpenChange={handleTooltipOpenChange('home')}>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={onHome}
+              >
+                <Home size={14} />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("sftp.nav.home")}</TooltipContent>
+          </Tooltip>
+          <Tooltip open={openTooltip === 'refresh'} onOpenChange={handleTooltipOpenChange('refresh')}>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={onRefresh}
+              >
+                <RefreshCw
+                  size={14}
+                  className={cn(isRefreshing && "animate-spin")}
+                />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("sftp.nav.refresh")}</TooltipContent>
+          </Tooltip>
+          {/* Bookmark button */}
+          {onUpdateHost && (
+            <Popover>
+              <Tooltip open={openTooltip === 'bookmark'} onOpenChange={handleTooltipOpenChange('bookmark')}>
+                <TooltipTrigger asChild>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-7 w-7"
+                    >
+                      <Bookmark
+                        size={14}
+                        className={cn(
+                          isCurrentPathBookmarked && "fill-yellow-500 text-yellow-500"
+                        )}
+                      />
+                    </Button>
+                  </PopoverTrigger>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {isCurrentPathBookmarked ? t("sftp.bookmark.remove") : t("sftp.bookmark.add")}
+                </TooltipContent>
+              </Tooltip>
+              <PopoverContent className="w-56 p-1" align="start">
+                {/* Toggle button */}
                 <button
-                  className={cn(
-                    "w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-secondary transition-colors",
-                    filenameEncoding === encoding && "bg-secondary"
-                  )}
-                  onClick={() => onFilenameEncodingChange(encoding)}
+                  className="w-full flex items-center gap-2 px-2 py-1.5 text-xs rounded-sm hover:bg-secondary transition-colors"
+                  onClick={toggleBookmark}
                 >
-                  <Check
-                    size={14}
+                  <Bookmark
+                    size={12}
                     className={cn(
                       "shrink-0",
-                      filenameEncoding === encoding ? "opacity-100" : "opacity-0"
+                      isCurrentPathBookmarked && "fill-yellow-500 text-yellow-500"
                     )}
                   />
-                  {t(`sftp.encoding.${encoding === "utf-8" ? "utf8" : encoding}`)}
+                  {isCurrentPathBookmarked ? t("sftp.bookmark.remove") : t("sftp.bookmark.add")}
                 </button>
-              </PopoverClose>
-            ))}
-          </PopoverContent>
-        </Popover>
-      )}
+                {/* Divider + list */}
+                {bookmarks.length > 0 && (
+                  <>
+                    <div className="my-1 border-t border-border/60" />
+                    {bookmarks.map((bm) => (
+                      <div
+                        key={bm.id}
+                        className="group flex items-center gap-1 px-2 py-1.5 text-xs rounded-sm hover:bg-secondary transition-colors cursor-pointer"
+                        onClick={() => onNavigateToBookmark?.(bm.path)}
+                        title={bm.path}
+                      >
+                        <Bookmark size={10} className="shrink-0 text-muted-foreground" />
+                        <span className="flex-1 truncate">{bm.label}</span>
+                        <span className="flex-1 truncate text-muted-foreground text-[10px]">{bm.path}</span>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-4 w-4 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            deleteBookmark(bm.id);
+                          }}
+                        >
+                          <Trash2 size={10} />
+                        </Button>
+                      </div>
+                    ))}
+                  </>
+                )}
+                {bookmarks.length === 0 && (
+                  <div className="p-2 text-xs text-muted-foreground text-center">
+                    {t("sftp.bookmark.empty")}
+                  </div>
+                )}
+              </PopoverContent>
+            </Popover>
+          )}
+          {showEncoding && (
+            <Popover>
+              <Tooltip open={openTooltip === 'encoding'} onOpenChange={handleTooltipOpenChange('encoding')}>
+                <TooltipTrigger asChild>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-7 w-7"
+                    >
+                      <Languages size={14} />
+                    </Button>
+                  </PopoverTrigger>
+                </TooltipTrigger>
+                <TooltipContent>{t("sftp.encoding.label")}</TooltipContent>
+              </Tooltip>
+              <PopoverContent className="w-36 p-1" align="start">
+                {(["auto", "utf-8", "gb18030"] as const).map((encoding) => (
+                  <PopoverClose asChild key={encoding}>
+                    <button
+                      className={cn(
+                        "w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-secondary transition-colors",
+                        filenameEncoding === encoding && "bg-secondary"
+                      )}
+                      onClick={() => onFilenameEncodingChange(encoding)}
+                    >
+                      <Check
+                        size={14}
+                        className={cn(
+                          "shrink-0",
+                          filenameEncoding === encoding ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      {t(`sftp.encoding.${encoding === "utf-8" ? "utf8" : encoding}`)}
+                    </button>
+                  </PopoverClose>
+                ))}
+              </PopoverContent>
+            </Popover>
+          )}
 
-      <div className="flex items-center gap-1 text-sm flex-1 min-w-0 overflow-hidden">
-        {isEditingPath ? (
-          <Input
-            ref={pathInputRef}
-            value={editingPathValue}
-            onChange={(e) => setEditingPathValue(e.target.value)}
-            onBlur={handlePathSubmit}
-            onKeyDown={handlePathKeyDown}
-            className="h-7 text-sm bg-background"
-            autoFocus
-          />
-        ) : (
-          <div
-            className="flex items-center gap-1 flex-1 min-w-0 cursor-text hover:bg-secondary/50 rounded px-1 py-0.5 transition-colors"
-            onDoubleClick={handlePathDoubleClick}
-            title={currentPath}
-          >
-            <button
-              className="text-muted-foreground hover:text-foreground px-1 shrink-0"
-              onClick={onRootSelect}
-            >
-              {rootLabel}
-            </button>
-            {visibleBreadcrumbs.map(({ part, originalIndex }, displayIdx) => {
-              const isLast = originalIndex === breadcrumbs.length - 1;
-              const showEllipsisBefore =
-                needsBreadcrumbTruncation && displayIdx === 1;
+          <div className="flex items-center gap-1 text-sm flex-1 min-w-0 overflow-hidden">
+            {isEditingPath ? (
+              <Input
+                ref={pathInputRef}
+                value={editingPathValue}
+                onChange={(e) => setEditingPathValue(e.target.value)}
+                onBlur={handlePathSubmit}
+                onKeyDown={handlePathKeyDown}
+                className="h-7 text-sm bg-background"
+                autoFocus
+              />
+            ) : (
+              <div
+                className="flex items-center gap-1 flex-1 min-w-0 cursor-text hover:bg-secondary/50 rounded px-1 py-0.5 transition-colors"
+                onDoubleClick={handlePathDoubleClick}
+                title={currentPath}
+              >
+                <button
+                  className="text-muted-foreground hover:text-foreground px-1 shrink-0"
+                  onClick={onRootSelect}
+                >
+                  {rootLabel}
+                </button>
+                {visibleBreadcrumbs.map(({ part, originalIndex }, displayIdx) => {
+                  const isLast = originalIndex === breadcrumbs.length - 1;
+                  const showEllipsisBefore =
+                    needsBreadcrumbTruncation && displayIdx === 1;
 
-              return (
-                <React.Fragment key={originalIndex}>
-                  {showEllipsisBefore && (
-                    <>
+                  return (
+                    <React.Fragment key={originalIndex}>
+                      {showEllipsisBefore && (
+                        <>
+                          <ChevronRight
+                            size={12}
+                            className="text-muted-foreground flex-shrink-0"
+                          />
+                          <span
+                            className="text-muted-foreground px-1 shrink-0 flex items-center cursor-default"
+                            title={`${t("sftp.showHiddenPaths")}: ${hiddenBreadcrumbs
+                              .map((h) => h.part)
+                              .join(" > ")}`}
+                          >
+                            <MoreHorizontal size={14} />
+                          </span>
+                        </>
+                      )}
                       <ChevronRight
                         size={12}
                         className="text-muted-foreground flex-shrink-0"
                       />
-                      <span
-                        className="text-muted-foreground px-1 shrink-0 flex items-center cursor-default"
-                        title={`${t("sftp.showHiddenPaths")}: ${hiddenBreadcrumbs
-                          .map((h) => h.part)
-                          .join(" > ")}`}
+                      <button
+                        className={cn(
+                          "text-muted-foreground hover:text-foreground truncate px-1 max-w-[100px]",
+                          isLast && "text-foreground font-medium",
+                        )}
+                        onClick={() => onBreadcrumbSelect(originalIndex)}
+                        title={part}
                       >
-                        <MoreHorizontal size={14} />
-                      </span>
-                    </>
-                  )}
-                  <ChevronRight
-                    size={12}
-                    className="text-muted-foreground flex-shrink-0"
-                  />
-                  <button
-                    className={cn(
-                      "text-muted-foreground hover:text-foreground truncate px-1 max-w-[100px]",
-                      isLast && "text-foreground font-medium",
-                    )}
-                    onClick={() => onBreadcrumbSelect(originalIndex)}
-                    title={part}
-                  >
-                    {part}
-                  </button>
-                </React.Fragment>
-              );
-            })}
+                        {part}
+                      </button>
+                    </React.Fragment>
+                  );
+                })}
+              </div>
+            )}
           </div>
-        )}
-      </div>
 
-        <div className="flex items-center gap-1 ml-auto">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="h-7 w-7"
-                onClick={onTriggerUpload}
-                disabled={uploading}
-              >
-                <Upload size={14} />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>{t("sftp.upload")}</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="h-7 w-7"
-                onClick={onTriggerFolderUpload}
-                disabled={uploading}
-              >
-                <FolderUp size={14} />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>{t("sftp.uploadFolder")}</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="h-7 w-7"
-                onClick={onCreateFolder}
-              >
-                <FolderPlus size={14} />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>{t("sftp.newFolder")}</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="h-7 w-7"
-                onClick={onCreateFile}
-              >
-                <FilePlus size={14} />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>{t("sftp.newFile")}</TooltipContent>
-          </Tooltip>
-        <input
-          type="file"
-          className="hidden"
-          ref={inputRef}
-          onChange={onFileSelect}
-          multiple
-        />
-        <input
-          type="file"
-          className="hidden"
-          ref={folderInputRef}
-          onChange={onFolderSelect}
-          webkitdirectory=""
-          multiple
-        />
+          <div className="flex items-center gap-1 ml-auto">
+            <Tooltip open={openTooltip === 'upload'} onOpenChange={handleTooltipOpenChange('upload')}>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={onTriggerUpload}
+                  disabled={uploading}
+                >
+                  <Upload size={14} />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{t("sftp.upload")}</TooltipContent>
+            </Tooltip>
+            <Tooltip open={openTooltip === 'uploadFolder'} onOpenChange={handleTooltipOpenChange('uploadFolder')}>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={onTriggerFolderUpload}
+                  disabled={uploading}
+                >
+                  <FolderUp size={14} />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{t("sftp.uploadFolder")}</TooltipContent>
+            </Tooltip>
+            <Tooltip open={openTooltip === 'newFolder'} onOpenChange={handleTooltipOpenChange('newFolder')}>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={onCreateFolder}
+                >
+                  <FolderPlus size={14} />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{t("sftp.newFolder")}</TooltipContent>
+            </Tooltip>
+            <Tooltip open={openTooltip === 'newFile'} onOpenChange={handleTooltipOpenChange('newFile')}>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={onCreateFile}
+                >
+                  <FilePlus size={14} />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{t("sftp.newFile")}</TooltipContent>
+            </Tooltip>
+            <input
+              type="file"
+              className="hidden"
+              ref={inputRef}
+              onChange={onFileSelect}
+              multiple
+            />
+            <input
+              type="file"
+              className="hidden"
+              ref={folderInputRef}
+              onChange={onFolderSelect}
+              webkitdirectory=""
+              multiple
+            />
+          </div>
         </div>
-    </div>
-    </TooltipProvider>
-  </>
-);
+      </TooltipProvider>
+    </>
+  );
+};

components/sftp-modal/SftpModalUploadTasks.tsx

@@ -64,7 +64,7 @@ export const SftpModalUploadTasks: React.FC<SftpModalUploadTasksProps> = ({ task
   return (
     <div className="border-t border-border/60 bg-secondary/50 flex-shrink-0">
       <div className="max-h-40 overflow-y-auto overflow-x-hidden">
-        {tasks.map((task) => {
+        {[...tasks].reverse().map((task) => {
           const formatSpeed = (bytesPerSec: number) => {
             if (bytesPerSec <= 0) return "";
             if (bytesPerSec >= 1024 * 1024)
@@ -83,8 +83,9 @@ export const SftpModalUploadTasks: React.FC<SftpModalUploadTasksProps> = ({ task
           };
 
           const remainingBytes = task.totalBytes - task.transferredBytes;
+          const effectiveSpeed = task.speed > 0 ? task.speed : 0;
           const remainingTime =
-            task.speed > 0 ? Math.ceil(remainingBytes / task.speed) : 0;
+            effectiveSpeed > 0 ? Math.ceil(remainingBytes / effectiveSpeed) : 0;
           const remainingStr =
             remainingTime > 60
               ? `~${Math.ceil(remainingTime / 60)}m left`
@@ -123,9 +124,9 @@ export const SftpModalUploadTasks: React.FC<SftpModalUploadTasksProps> = ({ task
                   <span className="text-xs font-medium truncate">
                     {getDisplayName(task)}
                   </span>
-                  {(task.status === "uploading" || task.status === "downloading") && task.speed > 0 && (
+                  {(task.status === "uploading" || task.status === "downloading") && effectiveSpeed > 0 && (
                     <span className="text-[10px] text-primary font-mono shrink-0">
-                      {formatSpeed(task.speed)}
+                      {formatSpeed(effectiveSpeed)}
                     </span>
                   )}
                   {(task.status === "uploading" || task.status === "downloading") && remainingStr && (

components/sftp-modal/hooks/useSftpModalCreateDelete.ts

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import type { RemoteFile } from "../../../types";
 import { toast } from "../../ui/toast";
 
@@ -20,8 +20,16 @@ interface UseSftpModalCreateDeleteParams {
 
 interface UseSftpModalCreateDeleteResult {
   handleDelete: (file: RemoteFile) => Promise<void>;
-  handleCreateFolder: () => Promise<void>;
-  handleCreateFile: () => Promise<void>;
+  handleCreateFolder: () => void;
+  handleCreateFile: () => void;
+  // Create dialog state
+  showCreateDialog: boolean;
+  setShowCreateDialog: (open: boolean) => void;
+  createType: "file" | "folder";
+  createName: string;
+  setCreateName: (value: string) => void;
+  isCreating: boolean;
+  handleCreateSubmit: () => Promise<void>;
 }
 
 export const useSftpModalCreateDelete = ({
@@ -39,6 +47,11 @@ export const useSftpModalCreateDelete = ({
   writeSftp,
   t,
 }: UseSftpModalCreateDeleteParams): UseSftpModalCreateDeleteResult => {
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [createType, setCreateType] = useState<"file" | "folder">("folder");
+  const [createName, setCreateName] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+
   const handleDelete = useCallback(
     async (file: RemoteFile) => {
       if (file.name === "..") return;
@@ -62,47 +75,66 @@ export const useSftpModalCreateDelete = ({
     [currentPath, deleteLocalFile, deleteSftp, ensureSftp, isLocalSession, joinPath, loadFiles, t],
   );
 
-  const handleCreateFolder = useCallback(async () => {
-    const folderName = prompt(t("sftp.prompt.newFolderName"));
-    if (!folderName) return;
-    try {
-      const fullPath = joinPath(currentPath, folderName);
-      if (isLocalSession) {
-        await mkdirLocal(fullPath);
-      } else {
-        await mkdirSftp(await ensureSftp(), fullPath);
-      }
-      await loadFiles(currentPath, { force: true });
-    } catch (e) {
-      toast.error(
-        e instanceof Error ? e.message : t("sftp.error.createFolderFailed"),
-        "SFTP",
-      );
-    }
-  }, [currentPath, ensureSftp, isLocalSession, joinPath, loadFiles, mkdirLocal, mkdirSftp, t]);
+  const handleCreateFolder = useCallback(() => {
+    setCreateType("folder");
+    setCreateName("");
+    setShowCreateDialog(true);
+  }, []);
 
-  const handleCreateFile = useCallback(async () => {
-    const fileName = prompt(t("sftp.fileName.placeholder"));
-    if (!fileName) return;
+  const handleCreateFile = useCallback(() => {
+    setCreateType("file");
+    setCreateName("");
+    setShowCreateDialog(true);
+  }, []);
+
+  const handleCreateSubmit = useCallback(async () => {
+    const name = createName.trim();
+    if (!name || isCreating) return;
+    setIsCreating(true);
     try {
-      const fullPath = joinPath(currentPath, fileName);
-      if (isLocalSession) {
-        await writeLocalFile(fullPath, new ArrayBuffer(0));
+      const fullPath = joinPath(currentPath, name);
+      if (createType === "folder") {
+        if (isLocalSession) {
+          await mkdirLocal(fullPath);
+        } else {
+          await mkdirSftp(await ensureSftp(), fullPath);
+        }
       } else {
-        try {
-          await writeSftpBinary(await ensureSftp(), fullPath, new ArrayBuffer(0));
-        } catch {
-          await writeSftp(await ensureSftp(), fullPath, "");
+        if (isLocalSession) {
+          await writeLocalFile(fullPath, new ArrayBuffer(0));
+        } else {
+          try {
+            await writeSftpBinary(await ensureSftp(), fullPath, new ArrayBuffer(0));
+          } catch {
+            await writeSftp(await ensureSftp(), fullPath, "");
+          }
         }
       }
+      setShowCreateDialog(false);
+      setCreateName("");
       await loadFiles(currentPath, { force: true });
     } catch (e) {
       toast.error(
-        e instanceof Error ? e.message : t("sftp.error.createFileFailed"),
+        e instanceof Error
+          ? e.message
+          : t(createType === "folder" ? "sftp.error.createFolderFailed" : "sftp.error.createFileFailed"),
         "SFTP",
       );
+    } finally {
+      setIsCreating(false);
     }
-  }, [currentPath, ensureSftp, isLocalSession, joinPath, loadFiles, t, writeLocalFile, writeSftp, writeSftpBinary]);
+  }, [createName, createType, currentPath, ensureSftp, isCreating, isLocalSession, joinPath, loadFiles, mkdirLocal, mkdirSftp, t, writeLocalFile, writeSftp, writeSftpBinary]);
 
-  return { handleDelete, handleCreateFolder, handleCreateFile };
+  return {
+    handleDelete,
+    handleCreateFolder,
+    handleCreateFile,
+    showCreateDialog,
+    setShowCreateDialog,
+    createType,
+    createName,
+    setCreateName,
+    isCreating,
+    handleCreateSubmit,
+  };
 };

components/sftp-modal/hooks/useSftpModalFileActions.ts

@@ -34,8 +34,15 @@ interface UseSftpModalFileActionsParams {
 
 interface UseSftpModalFileActionsResult {
   handleDelete: (file: RemoteFile) => Promise<void>;
-  handleCreateFolder: () => Promise<void>;
-  handleCreateFile: () => Promise<void>;
+  handleCreateFolder: () => void;
+  handleCreateFile: () => void;
+  showCreateDialog: boolean;
+  setShowCreateDialog: (open: boolean) => void;
+  createType: "file" | "folder";
+  createName: string;
+  setCreateName: (value: string) => void;
+  isCreating: boolean;
+  handleCreateSubmit: () => Promise<void>;
   showRenameDialog: boolean;
   setShowRenameDialog: (open: boolean) => void;
   renameTarget: RemoteFile | null;
@@ -106,7 +113,18 @@ export const useSftpModalFileActions = ({
   downloadSftpToTempAndOpen,
   selectApplication,
 }: UseSftpModalFileActionsParams): UseSftpModalFileActionsResult => {
-  const { handleDelete, handleCreateFolder, handleCreateFile } =
+  const {
+    handleDelete,
+    handleCreateFolder,
+    handleCreateFile,
+    showCreateDialog,
+    setShowCreateDialog,
+    createType,
+    createName,
+    setCreateName,
+    isCreating,
+    handleCreateSubmit,
+  } =
     useSftpModalCreateDelete({
       currentPath,
       isLocalSession,
@@ -213,6 +231,13 @@ export const useSftpModalFileActions = ({
     handleDelete,
     handleCreateFolder,
     handleCreateFile,
+    showCreateDialog,
+    setShowCreateDialog,
+    createType,
+    createName,
+    setCreateName,
+    isCreating,
+    handleCreateSubmit,
     showRenameDialog,
     setShowRenameDialog,
     renameTarget,

components/sftp-modal/hooks/useSftpModalKeyboardShortcuts.ts

@@ -0,0 +1,156 @@
+/**
+ * useSftpModalKeyboardShortcuts
+ * 
+ * Hook that handles keyboard shortcuts for SFTPModal operations.
+ * Supports select all, rename, delete, refresh, and new folder.
+ * Note: Copy/Cut/Paste are not supported in the modal as it's a single-pane view.
+ */
+
+import { useCallback, useEffect } from "react";
+import { KeyBinding, matchesKeyBinding } from "../../../domain/models";
+import type { RemoteFile } from "../../../types";
+
+// SFTP Modal action names that we handle (subset of main SFTP actions)
+const SFTP_MODAL_ACTIONS = new Set([
+  "sftpSelectAll",
+  "sftpRename",
+  "sftpDelete",
+  "sftpRefresh",
+  "sftpNewFolder",
+]);
+
+interface UseSftpModalKeyboardShortcutsParams {
+  keyBindings: KeyBinding[];
+  hotkeyScheme: "disabled" | "mac" | "pc";
+  open: boolean;
+  files: RemoteFile[];
+  visibleFiles: RemoteFile[];
+  selectedFiles: Set<string>;
+  setSelectedFiles: (files: Set<string>) => void;
+  onRefresh: () => void;
+  onRename?: (file: RemoteFile) => void;
+  onDelete?: (fileNames: string[]) => void;
+  onNewFolder?: () => void;
+}
+
+/**
+ * Check if a keyboard event matches any SFTP action
+ */
+const matchSftpAction = (
+  e: KeyboardEvent,
+  keyBindings: KeyBinding[],
+  isMac: boolean
+): { action: string; binding: KeyBinding } | null => {
+  for (const binding of keyBindings) {
+    if (binding.category !== "sftp") continue;
+    const keyStr = isMac ? binding.mac : binding.pc;
+    if (matchesKeyBinding(e, keyStr, isMac)) {
+      return { action: binding.action, binding };
+    }
+  }
+  return null;
+};
+
+export const useSftpModalKeyboardShortcuts = ({
+  keyBindings,
+  hotkeyScheme,
+  open,
+  files,
+  visibleFiles,
+  selectedFiles,
+  setSelectedFiles,
+  onRefresh,
+  onRename,
+  onDelete,
+  onNewFolder,
+}: UseSftpModalKeyboardShortcutsParams) => {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      // Skip if shortcuts are disabled or modal is not open
+      if (hotkeyScheme === "disabled" || !open) return;
+
+      // Skip if focus is on an input element
+      const target = e.target as HTMLElement;
+      const isEditableTarget =
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.isContentEditable ||
+        !!target.closest?.(".monaco-editor, .monaco-diff-editor, .monaco-inputbox");
+      if (isEditableTarget) {
+        return;
+      }
+
+      const isMac = hotkeyScheme === "mac";
+      const matched = matchSftpAction(e, keyBindings, isMac);
+      if (!matched) return;
+
+      const { action } = matched;
+      if (!SFTP_MODAL_ACTIONS.has(action)) return;
+
+      // Prevent default behavior
+      e.preventDefault();
+      e.stopPropagation();
+
+      switch (action) {
+        case "sftpSelectAll": {
+          // Select all files
+          const allFileNames = new Set(
+            visibleFiles.filter((f) => f.name !== "..").map((f) => f.name)
+          );
+          setSelectedFiles(allFileNames);
+          break;
+        }
+
+        case "sftpRename": {
+          // Trigger rename for the first selected file
+          const selectedArray = Array.from(selectedFiles);
+          if (selectedArray.length !== 1) return;
+          const file = files.find((f) => f.name === selectedArray[0]);
+          if (file && onRename) {
+            onRename(file);
+          }
+          break;
+        }
+
+        case "sftpDelete": {
+          // Delete selected files
+          const selectedArray = Array.from(selectedFiles);
+          if (selectedArray.length === 0) return;
+          onDelete?.(selectedArray);
+          break;
+        }
+
+        case "sftpRefresh": {
+          // Refresh file list
+          onRefresh();
+          break;
+        }
+
+        case "sftpNewFolder": {
+          // Create new folder
+          onNewFolder?.();
+          break;
+        }
+      }
+    },
+    [
+      hotkeyScheme,
+      open,
+      files,
+      visibleFiles,
+      selectedFiles,
+      setSelectedFiles,
+      onRefresh,
+      onRename,
+      onDelete,
+      onNewFolder,
+      keyBindings,
+    ]
+  );
+
+  useEffect(() => {
+    // Use capture phase to intercept before other handlers
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => window.removeEventListener("keydown", handleKeyDown, true);
+  }, [handleKeyDown]);
+};

components/sftp-modal/hooks/useSftpModalSession.ts

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import type { Host, RemoteFile } from "../../../types";
 import { logger } from "../../../lib/logger";
+import { isSessionError } from "../../../application/state/sftp/errors";
 import { toast } from "../../ui/toast";
 
 interface UseSftpModalSessionParams {
@@ -20,6 +21,7 @@ interface UseSftpModalSessionParams {
     proxy?: NetcattyProxyConfig;
     jumpHosts?: NetcattyJumpHost[];
     sftpSudo?: boolean;
+    legacyAlgorithms?: boolean;
   };
   initialPath?: string;
   isLocalSession: boolean;
@@ -39,6 +41,7 @@ interface UseSftpModalSessionParams {
     proxy?: NetcattyProxyConfig;
     jumpHosts?: NetcattyJumpHost[];
     sudo?: boolean;
+    legacyAlgorithms?: boolean;
   }) => Promise<string>;
   closeSftp: (sftpId: string) => Promise<void>;
   listSftp: (sftpId: string, path: string) => Promise<RemoteFile[]>;
@@ -55,6 +58,7 @@ interface UseSftpModalSessionResult {
   loading: boolean;
   setLoading: (loading: boolean) => void;
   reconnecting: boolean;
+  sessionVersion: number;
   ensureSftp: () => Promise<string>;
   loadFiles: (path: string, options?: { force?: boolean }) => Promise<void>;
   closeSftpSession: () => Promise<void>;
@@ -75,11 +79,14 @@ export const useSftpModalSession = ({
   getHomeDir,
   onClearSelection,
 }: UseSftpModalSessionParams): UseSftpModalSessionResult => {
-  const [currentPath, setCurrentPath] = useState("/");
+  const [currentPath, setCurrentPathState] = useState("/");
   const [files, setFiles] = useState<RemoteFile[]>([]);
   const [loading, setLoading] = useState(false);
   const [reconnecting, setReconnecting] = useState(false);
+  const [sessionVersion, setSessionVersion] = useState(0);
+  const currentPathRef = useRef(currentPath);
   const sftpIdRef = useRef<string | null>(null);
+  const closingPromiseRef = useRef<Promise<void> | null>(null);
   const initializedRef = useRef(false);
   const lastInitialPathRef = useRef<string | undefined>(undefined);
   const localHomeRef = useRef<string | null>(null);
@@ -93,9 +100,19 @@ export const useSftpModalSession = ({
     Map<string, { files: RemoteFile[]; timestamp: number }>
   >(new Map());
   const loadSeqRef = useRef(0);
+  const setCurrentPath = useCallback((path: string) => {
+    currentPathRef.current = path;
+    setCurrentPathState(path);
+  }, []);
+  const bumpSessionVersion = useCallback(() => {
+    setSessionVersion((prev) => prev + 1);
+  }, []);
 
   const ensureSftp = useCallback(async () => {
     if (isLocalSession) throw new Error("Local session does not use SFTP");
+    if (closingPromiseRef.current) {
+      await closingPromiseRef.current;
+    }
     if (sftpIdRef.current) return sftpIdRef.current;
     const sftpId = await openSftp({
       sessionId: `sftp-modal-${host.id}`,
@@ -112,8 +129,12 @@ export const useSftpModalSession = ({
       proxy: credentials.proxy,
       jumpHosts: credentials.jumpHosts,
       sudo: credentials.sftpSudo,
+      legacyAlgorithms: credentials.legacyAlgorithms,
     });
-    sftpIdRef.current = sftpId;
+    if (sftpIdRef.current !== sftpId) {
+      sftpIdRef.current = sftpId;
+      bumpSessionVersion();
+    }
     return sftpId;
   }, [
     isLocalSession,
@@ -131,34 +152,48 @@ export const useSftpModalSession = ({
     credentials.proxy,
     credentials.jumpHosts,
     credentials.sftpSudo,
+    credentials.legacyAlgorithms,
+    bumpSessionVersion,
     openSftp,
   ]);
 
   const closeSftpSession = useCallback(async () => {
-    if (!isLocalSession && sftpIdRef.current) {
+    if (isLocalSession) {
+      if (sftpIdRef.current !== null) {
+        sftpIdRef.current = null;
+        bumpSessionVersion();
+      }
+      return;
+    }
+
+    // Clear ref before awaiting backend close to avoid handing out a stale ID
+    // if the modal is reopened while close is still in flight.
+    const sftpIdToClose = sftpIdRef.current;
+    if (sftpIdToClose !== null) {
+      sftpIdRef.current = null;
+      bumpSessionVersion();
+    }
+    if (!sftpIdToClose) {
+      return;
+    }
+
+    const currentClosePromise = (async () => {
       try {
-        await closeSftp(sftpIdRef.current);
+        await closeSftp(sftpIdToClose);
       } catch {
         // Silently ignore close errors - connection may already be closed
+      } finally {
+        if (closingPromiseRef.current === currentClosePromise) {
+          closingPromiseRef.current = null;
+        }
       }
-    }
-    sftpIdRef.current = null;
-  }, [closeSftp, isLocalSession]);
+    })();
 
-  const isSessionError = useCallback((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("not found") ||
-      msg.includes("closed") ||
-      msg.includes("connection reset") ||
-      msg.includes("write after end") ||
-      msg.includes("no response") ||
-      msg.includes("client disconnected")
-    );
-  }, []);
+    closingPromiseRef.current = currentClosePromise;
+    await currentClosePromise;
+  }, [bumpSessionVersion, closeSftp, isLocalSession]);
+
+  // Use shared session-error classifier from errors.ts
 
   const handleSessionError = useCallback(async () => {
     if (reconnectingRef.current) return;
@@ -169,17 +204,31 @@ export const useSftpModalSession = ({
     while (reconnectAttemptsRef.current < MAX_RECONNECT_ATTEMPTS) {
       try {
         reconnectAttemptsRef.current += 1;
-        if (sftpIdRef.current) {
-          try {
-            await closeSftp(sftpIdRef.current);
-          } catch {
-            // ignore
-          }
-          sftpIdRef.current = null;
-        }
-        await ensureSftp();
+        await closeSftpSession();
+        const newSftpId = await ensureSftp();
         reconnectingRef.current = false;
         setReconnecting(false);
+
+        // Auto-reload current directory after successful reconnect
+        try {
+          const reloadPath = currentPathRef.current;
+          const reloadRequestId = loadSeqRef.current;
+          const list = await listSftp(newSftpId, reloadPath);
+          if (
+            reloadRequestId !== loadSeqRef.current ||
+            currentPathRef.current !== reloadPath
+          ) {
+            return;
+          }
+          onClearSelection();
+          setFiles(list);
+          dirCacheRef.current.set(`${host.id}::${reloadPath}`, {
+            files: list,
+            timestamp: Date.now(),
+          });
+        } catch {
+          // Reload failed — UI still shows old data, user can manually refresh
+        }
         return;
       } catch (err) {
         logger.warn(
@@ -195,7 +244,7 @@ export const useSftpModalSession = ({
         await new Promise((resolve) => setTimeout(resolve, 1000));
       }
     }
-  }, [closeSftp, ensureSftp, t]);
+  }, [closeSftpSession, ensureSftp, listSftp, host.id, onClearSelection, t]);
 
   const loadFiles = useCallback(
     async (path: string, options?: { force?: boolean }) => {
@@ -248,7 +297,7 @@ export const useSftpModalSession = ({
         }
       }
     },
-    [ensureSftp, host.id, isLocalSession, listLocalDir, listSftp, t, isSessionError, handleSessionError, files.length, onClearSelection],
+    [ensureSftp, host.id, isLocalSession, listLocalDir, listSftp, t, handleSessionError, files.length, onClearSelection],
   );
 
   useLayoutEffect(() => {
@@ -351,7 +400,6 @@ export const useSftpModalSession = ({
       void loadFiles(currentPath);
     } else {
       loadSeqRef.current += 1;
-      void closeSftpSession();
       initializedRef.current = false;
     }
   }, [
@@ -367,6 +415,7 @@ export const useSftpModalSession = ({
     loadFiles,
     onClearSelection,
     open,
+    setCurrentPath,
     t,
   ]);
 
@@ -384,6 +433,7 @@ export const useSftpModalSession = ({
     loading,
     setLoading,
     reconnecting,
+    sessionVersion,
     ensureSftp,
     loadFiles,
     closeSftpSession,

components/sftp-modal/hooks/useSftpModalTransfers.ts

@@ -40,6 +40,8 @@ interface UseSftpModalTransfersParams {
   loadFiles: (path: string, options?: { force?: boolean }) => Promise<void>;
   readLocalFile: (path: string) => Promise<ArrayBuffer>;
   readSftp: (sftpId: string, path: string) => Promise<string>;
+  listSftp?: (sftpId: string, path: string) => Promise<RemoteFile[]>;
+  deleteLocalFile?: (path: string) => Promise<void>;
   writeLocalFile: (path: string, data: ArrayBuffer) => Promise<void>;
   writeSftpBinaryWithProgress: (
     sftpId: string,
@@ -113,6 +115,8 @@ export const useSftpModalTransfers = ({
   setLoading,
   t,
   useCompressedUpload = false,
+  listSftp,
+  deleteLocalFile,
 }: UseSftpModalTransfersParams): UseSftpModalTransfersResult => {
   const [uploading, setUploading] = useState(false);
   const [uploadTasks, setUploadTasks] = useState<UploadTask[]>([]);
@@ -127,6 +131,9 @@ export const useSftpModalTransfers = ({
   // Track cancelled transfer IDs to detect cancellation in bridge wrapper
   const cancelledTransferIdsRef = useRef<Set<string>>(new Set());
 
+  // Track active child transfer IDs for directory downloads (parentId -> childId)
+  const activeChildTransferIdsRef = useRef<Map<string, string>>(new Map());
+
   // Create upload bridge that adapts the modal's functions to the service interface
   const createUploadBridge = useMemo((): UploadBridge => {
     return {
@@ -157,7 +164,7 @@ export const useSftpModalTransfers = ({
             onComplete || (() => { }),
             onError || (() => { })
           );
-          
+
           // Check if this transfer was cancelled
           const wasCancelled = cancelledTransferIdsRef.current.has(taskId);
           if (wasCancelled) {
@@ -251,13 +258,22 @@ export const useSftpModalTransfers = ({
             if (task.status === "completed" || task.status === "failed" || task.status === "cancelled") {
               return task;
             }
-            
+
+            const totalBytes = progress.total > 0 ? progress.total : task.totalBytes;
+            const clampedTransferred = Math.max(
+              task.transferredBytes,
+              Math.min(progress.transferred, totalBytes > 0 ? totalBytes : progress.transferred)
+            );
+            const rawPercent = totalBytes > 0 ? (clampedTransferred / totalBytes) * 100 : task.progress;
+            const clampedPercent = Math.max(task.progress, Math.min(rawPercent, 100));
+
             return {
               ...task,
               status: "uploading" as const,
-              progress: progress.percent,
-              transferredBytes: progress.transferred,
-              speed: progress.speed,
+              totalBytes,
+              progress: clampedPercent,
+              transferredBytes: clampedTransferred,
+              speed: Number.isFinite(progress.speed) && progress.speed > 0 ? progress.speed : 0,
             };
           })
         );
@@ -311,8 +327,8 @@ export const useSftpModalTransfers = ({
           const [folderName, phase] = newName.split('|');
           const phaseLabel = phase === 'compressing' ? t('sftp.upload.phase.compressing')
             : phase === 'extracting' ? t('sftp.upload.phase.extracting')
-            : phase === 'uploading' ? t('sftp.upload.phase.uploading')
-            : t('sftp.upload.phase.compressed');
+              : phase === 'uploading' ? t('sftp.upload.phase.uploading')
+                : t('sftp.upload.phase.compressed');
           displayName = `${folderName} (${phaseLabel})`;
         }
         setUploadTasks(prev =>
@@ -401,12 +417,236 @@ export const useSftpModalTransfers = ({
           return;
         }
 
-        // For remote SFTP files, use streaming download with save dialog
+        // For remote SFTP files/directories, use streaming download with save dialog
         if (!showSaveDialog || !startStreamTransfer) {
           toast.error(t("sftp.error.downloadFailed"), "SFTP");
           return;
         }
 
+        // Check if this is a directory download
+        const isDirectory = file.type === 'directory' || (file.type === 'symlink' && file.linkTarget === 'directory');
+
+        if (isDirectory) {
+          // For directories, download recursively
+          if (!listSftp) {
+            toast.error(t("sftp.error.downloadFailed"), "SFTP");
+            return;
+          }
+
+          // Show save dialog to get target path (the saved "file" becomes the folder path)
+          const targetPath = await showSaveDialog(file.name);
+          if (!targetPath) return;
+
+          const sftpId = await ensureSftp();
+          const transferId = `download-dir-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+
+          // Track the currently active child transfer ID for cancellation
+          let activeChildTransferId: string | null = null;
+          const setActiveChild = (childId: string | null) => {
+            activeChildTransferId = childId;
+            if (childId) {
+              activeChildTransferIdsRef.current.set(transferId, childId);
+            } else {
+              activeChildTransferIdsRef.current.delete(transferId);
+            }
+          };
+
+          // Create download task for progress display
+          const downloadTask: TransferTask = {
+            id: transferId,
+            fileName: file.name,
+            status: "downloading",
+            progress: 0,
+            totalBytes: 0,
+            transferredBytes: 0,
+            speed: 0,
+            startTime: Date.now(),
+            direction: "download",
+            isDirectory: true,
+          };
+          setUploadTasks(prev => [...prev, downloadTask]);
+
+          try {
+            // Safely create target directory.
+            // showSaveDialog "Replace" may leave a file (not directory) at the path,
+            // so we remove it first — ONLY in this explicit overwrite context.
+            try {
+              await createUploadBridge.mkdirLocal(targetPath);
+            } catch (mkdirErr: unknown) {
+              const isEEXIST = mkdirErr instanceof Error && mkdirErr.message.includes('EEXIST');
+              if (isEEXIST && deleteLocalFile) {
+                // Path exists as a file (from save dialog replace), remove it and retry
+                await deleteLocalFile(targetPath);
+                await createUploadBridge.mkdirLocal(targetPath);
+              } else {
+                throw mkdirErr;
+              }
+            }
+
+            // Recursively download directory contents
+            let completedBytes = 0;
+            // Track visited remote paths to prevent symlink cycles
+            const visitedPaths = new Set<string>();
+            // Max symlink-directory nesting depth to prevent cycles (only applies to symlinks)
+            const MAX_SYMLINK_DEPTH = 32;
+
+            const downloadDir = async (remotePath: string, localPath: string, symlinkDepth = 0): Promise<void> => {
+              // Prevent revisiting the same path
+              if (visitedPaths.has(remotePath)) return;
+              visitedPaths.add(remotePath);
+              // Check if transfer was cancelled
+              if (cancelledTransferIdsRef.current.has(transferId)) {
+                throw new Error('Transfer cancelled');
+              }
+
+              const entries = await listSftp(sftpId, remotePath);
+
+              for (const entry of entries) {
+                if (entry.name === '..' || entry.name === '.') continue;
+
+                // Check cancellation between files
+                if (cancelledTransferIdsRef.current.has(transferId)) {
+                  // Cancel the active child transfer if any
+                  if (activeChildTransferId && cancelTransfer) {
+                    try { await cancelTransfer(activeChildTransferId); } catch { /* ignore */ }
+                  }
+                  throw new Error('Transfer cancelled');
+                }
+
+                const remoteEntryPath = joinPath(remotePath, entry.name);
+                const localEntryPath = `${localPath}/${entry.name}`;
+
+                const isRealDir = entry.type === 'directory';
+                const isSymlinkDir = entry.type === 'symlink' && entry.linkTarget === 'directory';
+                if (isRealDir || isSymlinkDir) {
+                  // Only symlink directories can form cycles; enforce depth limit for them
+                  if (isSymlinkDir && symlinkDepth >= MAX_SYMLINK_DEPTH) {
+                    throw new Error('Maximum symlink directory depth exceeded (possible symlink cycle)');
+                  }
+                  try {
+                    await createUploadBridge.mkdirLocal(localEntryPath);
+                  } catch (mkdirErr: unknown) {
+                    // Only ignore EEXIST (directory already exists), propagate other errors
+                    const isEEXIST = mkdirErr instanceof Error && mkdirErr.message.includes('EEXIST');
+                    if (!isEEXIST) throw mkdirErr;
+                  }
+                  await downloadDir(remoteEntryPath, localEntryPath, isSymlinkDir ? symlinkDepth + 1 : symlinkDepth);
+                } else {
+                  // Download individual file
+                  const childTransferId = `download-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+                  activeChildTransferId = childTransferId;
+                  setActiveChild(childTransferId);
+                  const entrySize = typeof entry.size === 'number' ? entry.size : parseInt(String(entry.size), 10) || 0;
+
+                  await new Promise<void>((resolve, reject) => {
+                    startStreamTransfer(
+                      {
+                        transferId: childTransferId,
+                        sourcePath: remoteEntryPath,
+                        targetPath: localEntryPath,
+                        sourceType: 'sftp',
+                        targetType: 'local',
+                        sourceSftpId: sftpId,
+                        totalBytes: entrySize,
+                      },
+                      // onProgress - update parent task
+                      (transferred, total, speed) => {
+                        if (cancelledTransferIdsRef.current.has(transferId)) {
+                          // Actively cancel the in-flight child transfer
+                          if (cancelTransfer) {
+                            cancelTransfer(childTransferId).catch(() => { /* ignore */ });
+                          }
+                          return;
+                        }
+                        const totalProgress = completedBytes + transferred;
+                        setUploadTasks(prev =>
+                          prev.map(task =>
+                            task.id === transferId
+                              ? {
+                                ...task,
+                                transferredBytes: Math.max(task.transferredBytes, totalProgress),
+                                totalBytes: Math.max(task.totalBytes, totalProgress, completedBytes + total),
+                                progress: (() => {
+                                  const effectiveTotal = Math.max(task.totalBytes, completedBytes + total);
+                                  if (effectiveTotal <= 0) return task.progress;
+                                  const percent = (totalProgress / effectiveTotal) * 100;
+                                  return Math.max(task.progress, Math.min(percent, 99));
+                                })(),
+                                speed: Number.isFinite(speed) && speed > 0 ? speed : 0,
+                              }
+                              : task
+                          )
+                        );
+                      },
+                      // onComplete
+                      () => {
+                        completedBytes += entrySize;
+                        setActiveChild(null);
+                        resolve();
+                      },
+                      // onError
+                      (error) => {
+                        setActiveChild(null);
+                        reject(new Error(error));
+                      }
+                    ).then((result) => {
+                      // Handle resolved result with error (e.g. cancellation)
+                      if (result === undefined) {
+                        setActiveChild(null);
+                        reject(new Error('Stream transfer unavailable'));
+                      } else if (result?.error) {
+                        setActiveChild(null);
+                        reject(new Error(result.error));
+                      }
+                    }).catch(reject);
+                  });
+                }
+              }
+            };
+
+            await downloadDir(fullPath, targetPath);
+
+            // Mark as completed
+            setUploadTasks(prev =>
+              prev.map(task =>
+                task.id === transferId
+                  ? {
+                    ...task,
+                    status: "completed" as const,
+                    progress: 100,
+                    transferredBytes: completedBytes,
+                    totalBytes: completedBytes,
+                    speed: 0,
+                  }
+                  : task
+              )
+            );
+            toast.success(`${t("sftp.context.download")}: ${file.name}`, "SFTP");
+          } catch (e) {
+            const errorMsg = e instanceof Error ? e.message : t("sftp.error.downloadFailed");
+            const isCancelError = errorMsg.includes('cancelled') || errorMsg.includes('canceled')
+              || cancelledTransferIdsRef.current.has(transferId);
+            setUploadTasks(prev =>
+              prev.map(task =>
+                task.id === transferId
+                  ? {
+                    ...task,
+                    status: isCancelError ? "cancelled" as const : "failed" as const,
+                    speed: 0,
+                    error: isCancelError ? undefined : errorMsg,
+                  }
+                  : task
+              )
+            );
+            if (!isCancelError) {
+              toast.error(errorMsg, "SFTP");
+            }
+          } finally {
+            cancelledTransferIdsRef.current.delete(transferId);
+          }
+          return;
+        }
+
         // Show save dialog to get target path
         const targetPath = await showSaveDialog(file.name);
         if (!targetPath) {
@@ -452,12 +692,20 @@ export const useSftpModalTransfers = ({
               prev.map(task =>
                 task.id === transferId
                   ? {
-                      ...task,
-                      transferredBytes: transferred,
-                      totalBytes: total,
-                      progress: total > 0 ? Math.round((transferred / total) * 100) : 0,
-                      speed,
-                    }
+                    ...task,
+                    transferredBytes: Math.max(
+                      task.transferredBytes,
+                      Math.min(transferred, total > 0 ? total : transferred)
+                    ),
+                    totalBytes: total > 0 ? total : task.totalBytes,
+                    progress: (() => {
+                      const effectiveTotal = total > 0 ? total : task.totalBytes;
+                      if (effectiveTotal <= 0) return task.progress;
+                      const percent = (Math.max(task.transferredBytes, transferred) / effectiveTotal) * 100;
+                      return Math.max(task.progress, Math.min(percent, 100));
+                    })(),
+                    speed: Number.isFinite(speed) && speed > 0 ? speed : 0,
+                  }
                   : task
               )
             );
@@ -467,7 +715,13 @@ export const useSftpModalTransfers = ({
             setUploadTasks(prev =>
               prev.map(task =>
                 task.id === transferId
-                  ? { ...task, status: "completed" as const, progress: 100 }
+                  ? {
+                    ...task,
+                    status: "completed" as const,
+                    progress: 100,
+                    transferredBytes: task.totalBytes > 0 ? task.totalBytes : task.transferredBytes,
+                    speed: 0,
+                  }
                   : task
               )
             );
@@ -546,7 +800,7 @@ export const useSftpModalTransfers = ({
         setLoading(false);
       }
     },
-    [currentPath, ensureSftp, isLocalSession, joinPath, readLocalFile, setLoading, showSaveDialog, startStreamTransfer, t],
+    [currentPath, ensureSftp, isLocalSession, joinPath, readLocalFile, setLoading, showSaveDialog, startStreamTransfer, t, listSftp, createUploadBridge, deleteLocalFile, cancelledTransferIdsRef, cancelTransfer],
   );
 
 
@@ -763,13 +1017,27 @@ export const useSftpModalTransfers = ({
     if (!task) return;
 
     if (task.direction === "download") {
-      // For download tasks, cancel only this specific transfer
+      // For download tasks, cancel the specific transfer
+      // Add to cancelled set so recursive downloads can check
+      cancelledTransferIdsRef.current.add(taskId);
+
       if (cancelTransfer) {
         try {
+          // Cancel the parent task ID (works for single-file downloads)
           await cancelTransfer(taskId);
         } catch {
           // Ignore cancellation errors
         }
+        // Also cancel the active child transfer for directory downloads
+        const activeChildId = activeChildTransferIdsRef.current.get(taskId);
+        if (activeChildId) {
+          try {
+            await cancelTransfer(activeChildId);
+          } catch {
+            // Ignore cancellation errors
+          }
+          activeChildTransferIdsRef.current.delete(taskId);
+        }
       }
       // Mark task as cancelled
       setUploadTasks(prev =>

components/sftp/SftpContext.tsx

@@ -88,6 +88,8 @@ export const useIsPaneActive = (side: "left" | "right", paneId: string): boolean
 export interface SftpContextValue {
     // Hosts list for connection picker
     hosts: Host[];
+    // Host updater for bookmark persistence
+    updateHosts: (hosts: Host[]) => void;
 
     // Drag state (shared between panes)
     draggedFiles: { name: string; isDirectory: boolean; side: "left" | "right" }[] | null;
@@ -132,6 +134,12 @@ export const useSftpHosts = () => {
     return context.hosts;
 };
 
+// Hook to get host updater
+export const useSftpUpdateHosts = () => {
+    const context = useSftpContext();
+    return context.updateHosts;
+};
+
 // Hook to get showHiddenFiles setting
 export const useSftpShowHiddenFiles = (): boolean => {
     const context = useSftpContext();
@@ -140,6 +148,7 @@ export const useSftpShowHiddenFiles = (): boolean => {
 
 interface SftpContextProviderProps {
     hosts: Host[];
+    updateHosts: (hosts: Host[]) => void;
     draggedFiles: { name: string; isDirectory: boolean; side: "left" | "right" }[] | null;
     dragCallbacks: SftpDragCallbacks;
     leftCallbacks: SftpPaneCallbacks;
@@ -150,6 +159,7 @@ interface SftpContextProviderProps {
 
 export const SftpContextProvider: React.FC<SftpContextProviderProps> = ({
     hosts,
+    updateHosts,
     draggedFiles,
     dragCallbacks,
     leftCallbacks,
@@ -162,13 +172,14 @@ export const SftpContextProvider: React.FC<SftpContextProviderProps> = ({
     const value = useMemo<SftpContextValue>(
         () => ({
             hosts,
+            updateHosts,
             draggedFiles,
             dragCallbacks,
             leftCallbacks,
             rightCallbacks,
             showHiddenFiles,
         }),
-        [hosts, draggedFiles, dragCallbacks, leftCallbacks, rightCallbacks, showHiddenFiles],
+        [hosts, updateHosts, draggedFiles, dragCallbacks, leftCallbacks, rightCallbacks, showHiddenFiles],
     );
 
     return <SftpContext.Provider value={value}>{children}</SftpContext.Provider>;

components/sftp/SftpOverlays.tsx

@@ -32,6 +32,8 @@ interface SftpOverlaysProps {
   textEditorContent: string;
   setTextEditorContent: (content: string) => void;
   handleSaveTextFile: (content: string) => Promise<void>;
+  editorWordWrap: boolean;
+  setEditorWordWrap: (enabled: boolean) => void;
   showFileOpenerDialog: boolean;
   setShowFileOpenerDialog: (open: boolean) => void;
   fileOpenerTarget: { file: SftpFileEntry; side: "left" | "right"; fullPath: string } | null;
@@ -63,6 +65,8 @@ export const SftpOverlays: React.FC<SftpOverlaysProps> = ({
   textEditorContent,
   setTextEditorContent,
   handleSaveTextFile,
+  editorWordWrap,
+  setEditorWordWrap,
   showFileOpenerDialog,
   setShowFileOpenerDialog,
   fileOpenerTarget,
@@ -178,6 +182,8 @@ export const SftpOverlays: React.FC<SftpOverlaysProps> = ({
         fileName={textEditorTarget?.file.name || ""}
         initialContent={textEditorContent}
         onSave={handleSaveTextFile}
+        editorWordWrap={editorWordWrap}
+        onToggleWordWrap={() => setEditorWordWrap(!editorWordWrap)}
       />
 
       {/* File Opener Dialog */}

components/sftp/SftpPaneToolbar.tsx

@@ -1,12 +1,13 @@
 import React from "react";
-import { ChevronLeft, FilePlus, Folder, FolderPlus, Home, RefreshCw, Search, X } from "lucide-react";
+import { Bookmark, Check, ChevronLeft, FilePlus, Folder, FolderPlus, Home, Languages, RefreshCw, Search, Trash2, X } from "lucide-react";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { cn } from "../../lib/utils";
 import { SftpBreadcrumb } from "./index";
 import type { SftpFilenameEncoding } from "../../types";
 import type { SftpPane } from "../../application/state/sftp/types";
+import type { SftpBookmark } from "../../domain/models";
 
 interface SftpPaneToolbarProps {
   t: (key: string, params?: Record<string, unknown>) => string;
@@ -39,6 +40,13 @@ interface SftpPaneToolbarProps {
   setFileNameError: (value: string | null) => void;
   setShowNewFileDialog: (open: boolean) => void;
   setShowNewFolderDialog: (open: boolean) => void;
+  setNewFolderName: (value: string) => void;
+  // Bookmark props
+  bookmarks: SftpBookmark[];
+  isCurrentPathBookmarked: boolean;
+  onToggleBookmark: () => void;
+  onNavigateToBookmark: (path: string) => void;
+  onDeleteBookmark: (id: string) => void;
 }
 
 export const SftpPaneToolbar: React.FC<SftpPaneToolbarProps> = ({
@@ -72,6 +80,12 @@ export const SftpPaneToolbar: React.FC<SftpPaneToolbarProps> = ({
   setFileNameError,
   setShowNewFileDialog,
   setShowNewFolderDialog,
+  setNewFolderName,
+  bookmarks,
+  isCurrentPathBookmarked,
+  onToggleBookmark,
+  onNavigateToBookmark,
+  onDeleteBookmark,
 }) => (
   <>
     {/* Toolbar - always visible when connected */}
@@ -154,27 +168,120 @@ export const SftpPaneToolbar: React.FC<SftpPaneToolbarProps> = ({
         </div>
       )}
 
+      {/* Bookmark button with dropdown */}
+      <Popover>
+          <PopoverTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn("h-5 w-5 shrink-0", isCurrentPathBookmarked && "text-yellow-500")}
+              title={isCurrentPathBookmarked ? t("sftp.bookmark.remove") : t("sftp.bookmark.add")}
+              onClick={(e) => {
+                // If not bookmarked, toggle directly instead of opening popover
+                if (!isCurrentPathBookmarked && bookmarks.length === 0) {
+                  e.preventDefault();
+                  onToggleBookmark();
+                }
+              }}
+            >
+              <Bookmark size={12} fill={isCurrentPathBookmarked ? "currentColor" : "none"} />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-64 p-0" align="start">
+            <div className="p-2 border-b border-border/40">
+              <Button
+                variant={isCurrentPathBookmarked ? "secondary" : "ghost"}
+                size="sm"
+                className="w-full justify-start text-xs h-7"
+                onClick={onToggleBookmark}
+              >
+                <Bookmark size={12} fill={isCurrentPathBookmarked ? "currentColor" : "none"} className={cn("mr-2", isCurrentPathBookmarked && "text-yellow-500")} />
+                {isCurrentPathBookmarked ? t("sftp.bookmark.remove") : t("sftp.bookmark.add")}
+              </Button>
+            </div>
+            {bookmarks.length > 0 ? (
+              <div className="max-h-48 overflow-auto py-1">
+                {bookmarks.map((bm) => (
+                  <div
+                    key={bm.id}
+                    className="flex items-center gap-1 px-2 py-1 hover:bg-secondary/60 group"
+                  >
+                    <button
+                      type="button"
+                      className="flex-1 text-left text-xs truncate font-mono"
+                      onClick={() => onNavigateToBookmark(bm.path)}
+                      title={bm.path}
+                    >
+                      {bm.label}
+                      <span className="ml-1.5 text-muted-foreground text-[10px]">{bm.path}</span>
+                    </button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-5 w-5 opacity-0 group-hover:opacity-100 shrink-0 text-muted-foreground hover:text-destructive"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDeleteBookmark(bm.id);
+                      }}
+                    >
+                      <Trash2 size={10} />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="p-3 text-xs text-muted-foreground text-center">
+                {t("sftp.bookmark.empty")}
+              </div>
+            )}
+          </PopoverContent>
+        </Popover>
+
       <div className="ml-auto flex items-center gap-0.5">
         {!pane.connection?.isLocal && (
-          <Select
-            value={pane.filenameEncoding}
-            onValueChange={(value) => onSetFilenameEncoding(value as SftpFilenameEncoding)}
-          >
-            <SelectTrigger className="h-6 w-[120px] text-[10px]" title={t("sftp.encoding.label")}>
-              <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>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6"
+                title={t("sftp.encoding.label")}
+              >
+                <Languages size={14} />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-36 p-1" align="end">
+              {(["auto", "utf-8", "gb18030"] as const).map((encoding) => (
+                <PopoverClose asChild key={encoding}>
+                  <button
+                    className={cn(
+                      "w-full flex items-center gap-2 px-2 py-1.5 text-xs rounded-sm hover:bg-secondary transition-colors",
+                      pane.filenameEncoding === encoding && "bg-secondary"
+                    )}
+                    onClick={() => onSetFilenameEncoding(encoding)}
+                  >
+                    <Check
+                      size={12}
+                      className={cn(
+                        "shrink-0",
+                        pane.filenameEncoding === encoding ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                    {t(`sftp.encoding.${encoding === "utf-8" ? "utf8" : encoding}`)}
+                  </button>
+                </PopoverClose>
+              ))}
+            </PopoverContent>
+          </Popover>
         )}
         <Button
           variant="ghost"
           size="icon"
           className="h-6 w-6"
-          onClick={() => setShowNewFolderDialog(true)}
+          onClick={() => {
+            setNewFolderName("");
+            setShowNewFolderDialog(true);
+          }}
           title={t("sftp.newFolder")}
         >
           <FolderPlus size={14} />

components/sftp/SftpPaneView.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useRef, useState, useTransition } from "react";
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState, useTransition } from "react";
 import { useI18n } from "../../application/i18n/I18nProvider";
 import { logger } from "../../lib/logger";
 import { useRenderTracker } from "../../lib/useRenderTracker";
@@ -13,14 +13,19 @@ import {
   useSftpHosts,
   useSftpPaneCallbacks,
   useSftpShowHiddenFiles,
+  useSftpUpdateHosts,
 } from "./index";
 import type { SftpPane } from "../../application/state/sftp/types";
+import type { Host } from "../../domain/models";
 import { useSftpPaneDialogs } from "./hooks/useSftpPaneDialogs";
 import { useSftpPaneDragAndSelect } from "./hooks/useSftpPaneDragAndSelect";
 import { useSftpPaneFiles } from "./hooks/useSftpPaneFiles";
 import { useSftpPanePath } from "./hooks/useSftpPanePath";
 import { useSftpPaneSorting } from "./hooks/useSftpPaneSorting";
 import { useSftpPaneVirtualList } from "./hooks/useSftpPaneVirtualList";
+import { useSftpDialogActionHandler } from "./hooks/useSftpDialogAction";
+import { useSftpBookmarks } from "./hooks/useSftpBookmarks";
+import { useLocalSftpBookmarks } from "./hooks/useLocalSftpBookmarks";
 
 interface SftpPaneWrapperProps {
   side: "left" | "right";
@@ -83,6 +88,32 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
   });
 
   const { sortField, sortOrder, columnWidths, handleSort, handleResizeStart } = useSftpPaneSorting();
+
+  // Bookmark support
+  const updateHosts = useSftpUpdateHosts();
+  const currentHost = useMemo(
+    () => hosts.find((h) => h.id === pane.connection?.hostId),
+    [hosts, pane.connection?.hostId],
+  );
+  const onUpdateHost = useCallback(
+    (updated: Host) => updateHosts(hosts.map((h) => (h.id === updated.id ? updated : h))),
+    [hosts, updateHosts],
+  );
+  const remoteBookmarks = useSftpBookmarks({
+    host: currentHost,
+    currentPath: pane.connection?.currentPath,
+    onUpdateHost,
+  });
+  const localBookmarks = useLocalSftpBookmarks({
+    currentPath: pane.connection?.currentPath,
+  });
+  const {
+    bookmarks,
+    isCurrentPathBookmarked,
+    toggleBookmark,
+    deleteBookmark,
+  } = pane.connection?.isLocal ? localBookmarks : remoteBookmarks;
+
   const { filteredFiles, sortedDisplayFiles } = useSftpPaneFiles({
     files: pane.files,
     filter: pane.filter,
@@ -195,6 +226,37 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
     sortedDisplayFiles,
   });
 
+  // Handle keyboard shortcut dialog actions
+  const dialogActionHandlers = useMemo(
+    () => ({
+      onRename: (fileName: string) => openRenameDialog(fileName),
+      onDelete: (fileNames: string[]) => openDeleteConfirm(fileNames),
+      onNewFolder: () => {
+        setNewFolderName("");
+        setShowNewFolderDialog(true);
+      },
+      onNewFile: () => {
+        const defaultName = getNextUntitledName(pane.files.map(f => f.name));
+        setNewFileName(defaultName);
+        setFileNameError(null);
+        setShowNewFileDialog(true);
+      },
+    }),
+    [
+      getNextUntitledName,
+      openDeleteConfirm,
+      openRenameDialog,
+      pane.files,
+      setFileNameError,
+      setNewFileName,
+      setNewFolderName,
+      setShowNewFileDialog,
+      setShowNewFolderDialog,
+    ],
+  );
+
+  useSftpDialogActionHandler(side, dialogActionHandlers);
+
   const handleSortWithTransition = (field: typeof sortField) => {
     startTransition(() => handleSort(field));
   };
@@ -265,6 +327,12 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
         setFileNameError={setFileNameError}
         setShowNewFileDialog={setShowNewFileDialog}
         setShowNewFolderDialog={setShowNewFolderDialog}
+        setNewFolderName={setNewFolderName}
+        bookmarks={bookmarks}
+        isCurrentPathBookmarked={isCurrentPathBookmarked}
+        onToggleBookmark={toggleBookmark}
+        onNavigateToBookmark={callbacks.onNavigateTo}
+        onDeleteBookmark={deleteBookmark}
       />
 
       <SftpPaneFileList

components/sftp/SftpTransferItem.tsx

@@ -3,19 +3,19 @@
  */
 
 import {
-ArrowDown,
-CheckCircle2,
-FolderUp,
-Loader2,
-RefreshCw,
-X,
-XCircle,
+    ArrowDown,
+    CheckCircle2,
+    FolderUp,
+    Loader2,
+    RefreshCw,
+    X,
+    XCircle,
 } from 'lucide-react';
-import React,{ memo, useRef, useEffect } from 'react';
+import React, { memo } from 'react';
 import { cn } from '../../lib/utils';
 import { TransferTask } from '../../types';
 import { Button } from '../ui/button';
-import { formatSpeed,formatTransferBytes } from './utils';
+import { formatSpeed, formatTransferBytes } from './utils';
 
 interface SftpTransferItemProps {
     task: TransferTask;
@@ -27,49 +27,13 @@ interface SftpTransferItemProps {
 const SftpTransferItemInner: React.FC<SftpTransferItemProps> = ({ task, onCancel, onRetry, onDismiss }) => {
     const progress = task.totalBytes > 0 ? Math.min((task.transferredBytes / task.totalBytes) * 100, 100) : 0;
 
-    // Use refs to store stable display values and prevent flickering
-    const lastSpeedRef = useRef<number>(0);
-    const lastSpeedTimeRef = useRef<number>(Date.now());
-    const displaySpeedRef = useRef<string>('');
-
-    // Update speed display with smoothing - only update if speed is stable for a moment
-    useEffect(() => {
-        if (task.status !== 'transferring') {
-            displaySpeedRef.current = '';
-            lastSpeedRef.current = 0;
-            return;
-        }
-
-        const now = Date.now();
-        const timeSinceLastUpdate = now - lastSpeedTimeRef.current;
-
-        // Only update speed display if:
-        // 1. Speed is above threshold (100 bytes/s)
-        // 2. Either it's been at least 500ms since last update, or speed changed significantly (>50%)
-        if (task.speed > 100) {
-            const speedChange = Math.abs(task.speed - lastSpeedRef.current);
-            const significantChange = lastSpeedRef.current > 0 && speedChange / lastSpeedRef.current > 0.5;
-
-            if (timeSinceLastUpdate >= 500 || significantChange || lastSpeedRef.current === 0) {
-                lastSpeedRef.current = task.speed;
-                lastSpeedTimeRef.current = now;
-                displaySpeedRef.current = formatSpeed(task.speed);
-            }
-        } else if (task.speed === 0 && lastSpeedRef.current > 0) {
-            // Don't immediately clear speed when it drops to 0
-            // Keep showing last speed for a short period
-            if (timeSinceLastUpdate >= 1000) {
-                lastSpeedRef.current = 0;
-                displaySpeedRef.current = '';
-            }
-        }
-    }, [task.speed, task.status]);
-
-    // Calculate remaining time based on stable speed
+    // Calculate remaining time from backend-reported sliding-window speed
     const remainingBytes = task.totalBytes - task.transferredBytes;
-    const stableSpeed = lastSpeedRef.current > 0 ? lastSpeedRef.current : task.speed;
-    const remainingTime = stableSpeed > 0
-        ? Math.ceil(remainingBytes / stableSpeed)
+    const effectiveSpeed = task.status === 'transferring'
+        ? (Number.isFinite(task.speed) && task.speed > 0 ? task.speed : 0)
+        : 0;
+    const remainingTime = effectiveSpeed > 0
+        ? Math.ceil(remainingBytes / effectiveSpeed)
         : 0;
     const remainingFormatted = remainingTime > 60
         ? `~${Math.ceil(remainingTime / 60)}m left`
@@ -84,8 +48,7 @@ const SftpTransferItemInner: React.FC<SftpTransferItemProps> = ({ task, onCancel
             ? formatTransferBytes(task.totalBytes)
             : '';
 
-    // Use the stable display speed
-    const speedFormatted = displaySpeedRef.current;
+    const speedFormatted = effectiveSpeed > 0 ? formatSpeed(effectiveSpeed) : '';
 
     return (
         <div className="flex items-center gap-3 px-4 py-2.5 bg-background/60 border-t border-border/40 backdrop-blur-sm">
@@ -158,7 +121,7 @@ const SftpTransferItemInner: React.FC<SftpTransferItemProps> = ({ task, onCancel
             </div>
 
             <div className="flex items-center gap-1 shrink-0">
-                {task.status === 'failed' && (
+                {task.status === 'failed' && task.retryable !== false && (
                     <Button variant="ghost" size="icon" className="h-7 w-7" onClick={onRetry} title="Retry">
                         <RefreshCw size={12} />
                     </Button>
@@ -196,17 +159,15 @@ const arePropsEqual = (
     // Always re-render on fileName change
     if (prev.fileName !== next.fileName) return false;
 
-    // For transferring status, throttle updates based on progress
+    // For transferring status, allow frequent re-renders for smooth progress bar
     if (next.status === 'transferring') {
-        // Re-render if progress changed by more than 0.5%
+        // Re-render on any meaningful progress change (0.1% for smooth bar animation)
         const prevProgress = prev.totalBytes > 0 ? (prev.transferredBytes / prev.totalBytes) * 100 : 0;
         const nextProgress = next.totalBytes > 0 ? (next.transferredBytes / next.totalBytes) * 100 : 0;
-        if (Math.abs(nextProgress - prevProgress) >= 0.5) return false;
+        if (Math.abs(nextProgress - prevProgress) >= 0.1) return false;
 
-        // Re-render periodically for speed updates (every ~500ms based on speed changes)
-        // The component uses refs to smooth speed display, so we allow more frequent renders
-        const speedDiff = Math.abs(next.speed - prev.speed);
-        if (speedDiff > 1000) return false; // Re-render if speed changed by more than 1KB/s
+        // Re-render on any speed change (backend already smooths via sliding window)
+        if (next.speed !== prev.speed) return false;
     }
 
     // For pending status, don't re-render unless status changes

components/sftp/hooks/useLocalSftpBookmarks.ts

@@ -0,0 +1,73 @@
+import { useCallback, useMemo, useSyncExternalStore } from "react";
+import type { SftpBookmark } from "../../../domain/models";
+import { localStorageAdapter } from "../../../infrastructure/persistence/localStorageAdapter";
+import { STORAGE_KEY_SFTP_LOCAL_BOOKMARKS } from "../../../infrastructure/config/storageKeys";
+
+// ── Shared external store so every hook instance sees the same bookmarks ──
+
+type Listener = () => void;
+const listeners = new Set<Listener>();
+
+let snapshot: SftpBookmark[] =
+    localStorageAdapter.read<SftpBookmark[]>(STORAGE_KEY_SFTP_LOCAL_BOOKMARKS) ?? [];
+
+function subscribe(listener: Listener) {
+    listeners.add(listener);
+    return () => { listeners.delete(listener); };
+}
+
+function getSnapshot() {
+    return snapshot;
+}
+
+function setBookmarks(next: SftpBookmark[] | ((prev: SftpBookmark[]) => SftpBookmark[])) {
+    snapshot = typeof next === "function" ? next(snapshot) : next;
+    localStorageAdapter.write(STORAGE_KEY_SFTP_LOCAL_BOOKMARKS, snapshot);
+    for (const l of listeners) l();
+}
+
+// ── Hook ──
+
+interface UseLocalSftpBookmarksParams {
+    currentPath: string | undefined;
+}
+
+export const useLocalSftpBookmarks = ({
+    currentPath,
+}: UseLocalSftpBookmarksParams) => {
+    const bookmarks = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+    const isCurrentPathBookmarked = useMemo(
+        () => !!currentPath && bookmarks.some((b) => b.path === currentPath),
+        [currentPath, bookmarks],
+    );
+
+    const toggleBookmark = useCallback(() => {
+        if (!currentPath) return;
+        if (isCurrentPathBookmarked) {
+            setBookmarks((prev) => prev.filter((b) => b.path !== currentPath));
+        } else {
+            const isRoot = currentPath === "/" || /^[A-Za-z]:\\?$/.test(currentPath);
+            const label = isRoot
+                ? currentPath
+                : currentPath.split(/[\\/]/).filter(Boolean).pop() || currentPath;
+            const newBookmark: SftpBookmark = {
+                id: `bm-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
+                path: currentPath,
+                label,
+            };
+            setBookmarks((prev) => [...prev, newBookmark]);
+        }
+    }, [currentPath, isCurrentPathBookmarked]);
+
+    const deleteBookmark = useCallback((id: string) => {
+        setBookmarks((prev) => prev.filter((b) => b.id !== id));
+    }, []);
+
+    return {
+        bookmarks,
+        isCurrentPathBookmarked,
+        toggleBookmark,
+        deleteBookmark,
+    };
+};

components/sftp/hooks/useSftpBookmarks.ts

@@ -0,0 +1,69 @@
+import { useCallback, useMemo } from "react";
+import type { Host, SftpBookmark } from "../../../domain/models";
+
+interface UseSftpBookmarksParams {
+    host: Host | undefined;
+    currentPath: string | undefined;
+    onUpdateHost: ((host: Host) => void) | undefined;
+}
+
+interface UseSftpBookmarksResult {
+    bookmarks: SftpBookmark[];
+    isCurrentPathBookmarked: boolean;
+    toggleBookmark: () => void;
+    deleteBookmark: (id: string) => void;
+}
+
+export const useSftpBookmarks = ({
+    host,
+    currentPath,
+    onUpdateHost,
+}: UseSftpBookmarksParams): UseSftpBookmarksResult => {
+    const bookmarks = useMemo(() => host?.sftpBookmarks ?? [], [host]);
+
+    const isCurrentPathBookmarked = useMemo(
+        () =>
+            !!currentPath && bookmarks.some((b) => b.path === currentPath),
+        [currentPath, bookmarks],
+    );
+
+    const updateHostBookmarks = useCallback(
+        (newBookmarks: SftpBookmark[]) => {
+            if (!host || !onUpdateHost) return;
+            onUpdateHost({ ...host, sftpBookmarks: newBookmarks });
+        },
+        [host, onUpdateHost],
+    );
+
+    const toggleBookmark = useCallback(() => {
+        if (!currentPath || !host) return;
+        if (isCurrentPathBookmarked) {
+            updateHostBookmarks(bookmarks.filter((b) => b.path !== currentPath));
+        } else {
+            const label =
+                currentPath === "/"
+                    ? "/"
+                    : currentPath.split("/").filter(Boolean).pop() || currentPath;
+            const newBookmark: SftpBookmark = {
+                id: `bm-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
+                path: currentPath,
+                label,
+            };
+            updateHostBookmarks([...bookmarks, newBookmark]);
+        }
+    }, [currentPath, host, isCurrentPathBookmarked, bookmarks, updateHostBookmarks]);
+
+    const deleteBookmark = useCallback(
+        (id: string) => {
+            updateHostBookmarks(bookmarks.filter((b) => b.id !== id));
+        },
+        [bookmarks, updateHostBookmarks],
+    );
+
+    return {
+        bookmarks,
+        isCurrentPathBookmarked,
+        toggleBookmark,
+        deleteBookmark,
+    };
+};

components/sftp/hooks/useSftpClipboard.ts

@@ -0,0 +1,124 @@
+/**
+ * SFTP Clipboard Store
+ * 
+ * Manages clipboard state for SFTP file operations (copy/cut/paste)
+ * This is a simple store that holds the clipboard state and operation type.
+ */
+
+import { useSyncExternalStore } from "react";
+
+export type SftpClipboardOperation = "copy" | "cut";
+
+export interface SftpClipboardFile {
+  name: string;
+  isDirectory: boolean;
+}
+
+export interface SftpClipboardState {
+  files: SftpClipboardFile[];
+  sourcePath: string;
+  sourceConnectionId: string;
+  sourceSide: "left" | "right";
+  operation: SftpClipboardOperation;
+}
+
+type ClipboardListener = () => void;
+
+let clipboardState: SftpClipboardState | null = null;
+const clipboardListeners = new Set<ClipboardListener>();
+
+const notifyListeners = () => {
+  clipboardListeners.forEach((listener) => listener());
+};
+
+export const sftpClipboardStore = {
+  getSnapshot: (): SftpClipboardState | null => clipboardState,
+  
+  subscribe: (listener: ClipboardListener) => {
+    clipboardListeners.add(listener);
+    return () => clipboardListeners.delete(listener);
+  },
+
+  /**
+   * Copy files to clipboard
+   */
+  copy: (
+    files: SftpClipboardFile[],
+    sourcePath: string,
+    sourceConnectionId: string,
+    sourceSide: "left" | "right"
+  ) => {
+    clipboardState = {
+      files,
+      sourcePath,
+      sourceConnectionId,
+      sourceSide,
+      operation: "copy",
+    };
+    notifyListeners();
+  },
+
+  /**
+   * Cut files to clipboard
+   */
+  cut: (
+    files: SftpClipboardFile[],
+    sourcePath: string,
+    sourceConnectionId: string,
+    sourceSide: "left" | "right"
+  ) => {
+    clipboardState = {
+      files,
+      sourcePath,
+      sourceConnectionId,
+      sourceSide,
+      operation: "cut",
+    };
+    notifyListeners();
+  },
+
+  /**
+   * Clear clipboard (called after paste for cut operation)
+   */
+  clear: () => {
+    clipboardState = null;
+    notifyListeners();
+  },
+
+  /**
+   * Update clipboard file list (used for partial cut transfers)
+   */
+  updateFiles: (files: SftpClipboardFile[]) => {
+    if (!clipboardState) return;
+    if (files.length === 0) {
+      clipboardState = null;
+    } else {
+      clipboardState = {
+        ...clipboardState,
+        files,
+      };
+    }
+    notifyListeners();
+  },
+
+  /**
+   * Check if there are files in the clipboard
+   */
+  hasFiles: (): boolean => clipboardState !== null && clipboardState.files.length > 0,
+
+  /**
+   * Get the clipboard state
+   */
+  get: (): SftpClipboardState | null => clipboardState,
+};
+
+/**
+ * React hook to subscribe to clipboard state changes
+ */
+export const useSftpClipboard = (): SftpClipboardState | null => {
+  return useSyncExternalStore(
+    sftpClipboardStore.subscribe,
+    sftpClipboardStore.getSnapshot,
+    sftpClipboardStore.getSnapshot
+  );
+};

components/sftp/hooks/useSftpDialogAction.ts

@@ -0,0 +1,120 @@
+/**
+ * SFTP Dialog Action Store
+ * 
+ * Manages dialog action triggers for SFTP operations.
+ * This store allows keyboard shortcuts to trigger dialogs in the appropriate pane.
+ */
+
+import { useSyncExternalStore, useEffect } from "react";
+import { sftpFocusStore, SftpFocusedSide } from "./useSftpFocusedPane";
+
+export type SftpDialogActionType = "rename" | "delete" | "newFolder" | "newFile" | null;
+
+export interface SftpDialogAction {
+  type: SftpDialogActionType;
+  targetSide: SftpFocusedSide;
+  targetFiles?: string[]; // For rename (single file) or delete (multiple files)
+  timestamp: number; // To distinguish different triggers of the same action
+}
+
+type ActionListener = () => void;
+
+let dialogAction: SftpDialogAction | null = null;
+const actionListeners = new Set<ActionListener>();
+
+const notifyListeners = () => {
+  actionListeners.forEach((listener) => listener());
+};
+
+export const sftpDialogActionStore = {
+  getSnapshot: (): SftpDialogAction | null => dialogAction,
+
+  subscribe: (listener: ActionListener) => {
+    actionListeners.add(listener);
+    return () => actionListeners.delete(listener);
+  },
+
+  /**
+   * Trigger a dialog action
+   */
+  trigger: (type: SftpDialogActionType, targetFiles?: string[]) => {
+    if (!type) {
+      dialogAction = null;
+    } else {
+      dialogAction = {
+        type,
+        targetSide: sftpFocusStore.getFocusedSide(),
+        targetFiles,
+        timestamp: Date.now(),
+      };
+    }
+    notifyListeners();
+  },
+
+  /**
+   * Clear the current action (called after a pane handles it)
+   */
+  clear: () => {
+    dialogAction = null;
+    notifyListeners();
+  },
+
+  /**
+   * Get the current action
+   */
+  get: (): SftpDialogAction | null => dialogAction,
+};
+
+/**
+ * React hook to subscribe to dialog action changes
+ */
+export const useSftpDialogAction = (): SftpDialogAction | null => {
+  return useSyncExternalStore(
+    sftpDialogActionStore.subscribe,
+    sftpDialogActionStore.getSnapshot,
+    sftpDialogActionStore.getSnapshot
+  );
+};
+
+/**
+ * React hook for a pane to respond to dialog actions
+ * Only the pane matching the targetSide will execute the callback
+ */
+export const useSftpDialogActionHandler = (
+  side: SftpFocusedSide,
+  handlers: {
+    onRename?: (fileName: string) => void;
+    onDelete?: (fileNames: string[]) => void;
+    onNewFolder?: () => void;
+    onNewFile?: () => void;
+  }
+) => {
+  const action = useSftpDialogAction();
+
+  useEffect(() => {
+    if (!action || action.targetSide !== side) return;
+
+    // Handle the action and clear it
+    switch (action.type) {
+      case "rename":
+        if (handlers.onRename && action.targetFiles?.[0]) {
+          handlers.onRename(action.targetFiles[0]);
+        }
+        break;
+      case "delete":
+        if (handlers.onDelete && action.targetFiles) {
+          handlers.onDelete(action.targetFiles);
+        }
+        break;
+      case "newFolder":
+        handlers.onNewFolder?.();
+        break;
+      case "newFile":
+        handlers.onNewFile?.();
+        break;
+    }
+
+    // Clear the action after handling
+    sftpDialogActionStore.clear();
+  }, [action, side, handlers]);
+};

components/sftp/hooks/useSftpFocusedPane.ts

@@ -0,0 +1,54 @@
+/**
+ * SFTP Focused Pane Store
+ * 
+ * Tracks which SFTP pane (left or right) is currently focused.
+ * This is used to determine which pane should receive keyboard shortcut actions.
+ */
+
+import { useSyncExternalStore } from "react";
+
+export type SftpFocusedSide = "left" | "right";
+
+type FocusListener = () => void;
+
+let focusedSide: SftpFocusedSide = "left";
+const focusListeners = new Set<FocusListener>();
+
+const notifyListeners = () => {
+  focusListeners.forEach((listener) => listener());
+};
+
+export const sftpFocusStore = {
+  getSnapshot: (): SftpFocusedSide => focusedSide,
+
+  subscribe: (listener: FocusListener) => {
+    focusListeners.add(listener);
+    return () => focusListeners.delete(listener);
+  },
+
+  /**
+   * Set the focused side
+   */
+  setFocusedSide: (side: SftpFocusedSide) => {
+    if (focusedSide !== side) {
+      focusedSide = side;
+      notifyListeners();
+    }
+  },
+
+  /**
+   * Get the current focused side
+   */
+  getFocusedSide: (): SftpFocusedSide => focusedSide,
+};
+
+/**
+ * React hook to subscribe to focused side changes
+ */
+export const useSftpFocusedSide = (): SftpFocusedSide => {
+  return useSyncExternalStore(
+    sftpFocusStore.subscribe,
+    sftpFocusStore.getSnapshot,
+    sftpFocusStore.getSnapshot
+  );
+};

components/sftp/hooks/useSftpKeyboardShortcuts.ts

@@ -0,0 +1,291 @@
+/**
+ * useSftpKeyboardShortcuts
+ * 
+ * Hook that handles keyboard shortcuts for SFTP operations.
+ * Supports copy, cut, paste, select all, rename, delete, refresh, and new folder.
+ */
+
+import { useCallback, useEffect } from "react";
+import type { MutableRefObject } from "react";
+import { KeyBinding, matchesKeyBinding } from "../../../domain/models";
+import { sftpClipboardStore, SftpClipboardFile } from "./useSftpClipboard";
+import { sftpFocusStore } from "./useSftpFocusedPane";
+import { sftpDialogActionStore } from "./useSftpDialogAction";
+import type { SftpStateApi } from "../../../application/state/useSftpState";
+import { filterHiddenFiles, isNavigableDirectory } from "../index";
+import { toast } from "../../ui/toast";
+
+// SFTP action names that we handle
+const SFTP_ACTIONS = new Set([
+  "sftpCopy",
+  "sftpCut",
+  "sftpPaste",
+  "sftpSelectAll",
+  "sftpRename",
+  "sftpDelete",
+  "sftpRefresh",
+  "sftpNewFolder",
+]);
+
+interface UseSftpKeyboardShortcutsParams {
+  keyBindings: KeyBinding[];
+  hotkeyScheme: "disabled" | "mac" | "pc";
+  sftpRef: MutableRefObject<SftpStateApi>;
+  isActive: boolean;
+  showHiddenFiles: boolean;
+}
+
+/**
+ * Check if a keyboard event matches any SFTP action
+ */
+const matchSftpAction = (
+  e: KeyboardEvent,
+  keyBindings: KeyBinding[],
+  isMac: boolean
+): { action: string; binding: KeyBinding } | null => {
+  for (const binding of keyBindings) {
+    if (binding.category !== "sftp") continue;
+    const keyStr = isMac ? binding.mac : binding.pc;
+    if (matchesKeyBinding(e, keyStr, isMac)) {
+      return { action: binding.action, binding };
+    }
+  }
+  return null;
+};
+
+export const useSftpKeyboardShortcuts = ({
+  keyBindings,
+  hotkeyScheme,
+  sftpRef,
+  isActive,
+  showHiddenFiles,
+}: UseSftpKeyboardShortcutsParams) => {
+  const handleKeyDown = useCallback(
+    async (e: KeyboardEvent) => {
+      // Skip if shortcuts are disabled or SFTP is not active
+      if (hotkeyScheme === "disabled" || !isActive) return;
+
+      // Skip if focus is on an input element
+      const target = e.target as HTMLElement;
+      const isEditableTarget =
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.isContentEditable ||
+        !!target.closest?.(".monaco-editor, .monaco-diff-editor, .monaco-inputbox");
+      if (isEditableTarget) {
+        return;
+      }
+
+      const isMac = hotkeyScheme === "mac";
+      const matched = matchSftpAction(e, keyBindings, isMac);
+      if (!matched) return;
+
+      const { action } = matched;
+      if (!SFTP_ACTIONS.has(action)) return;
+
+      // Prevent default behavior
+      e.preventDefault();
+      e.stopPropagation();
+
+      const sftp = sftpRef.current;
+      const focusedSide = sftpFocusStore.getFocusedSide();
+
+      // Get the active pane for the focused side
+      const pane = focusedSide === "left"
+        ? sftp.leftTabs.tabs.find(p => p.id === sftp.leftTabs.activeTabId)
+        : sftp.rightTabs.tabs.find(p => p.id === sftp.rightTabs.activeTabId);
+
+      if (!pane || !pane.connection) return;
+
+      switch (action) {
+        case "sftpCopy": {
+          // Copy selected files to clipboard
+          const selectedFiles = Array.from(pane.selectedFiles) as string[];
+          if (selectedFiles.length === 0) return;
+
+          const clipboardFiles: SftpClipboardFile[] = selectedFiles.map((name: string) => {
+            const file = pane.files.find((f) => f.name === name);
+            return {
+              name,
+              isDirectory: file ? isNavigableDirectory(file) : false,
+            };
+          });
+
+          sftpClipboardStore.copy(
+            clipboardFiles,
+            pane.connection.currentPath,
+            pane.connection.id,
+            focusedSide
+          );
+          break;
+        }
+
+        case "sftpCut": {
+          // Cut selected files to clipboard
+          const selectedFiles = Array.from(pane.selectedFiles) as string[];
+          if (selectedFiles.length === 0) return;
+
+          const clipboardFiles: SftpClipboardFile[] = selectedFiles.map((name: string) => {
+            const file = pane.files.find((f) => f.name === name);
+            return {
+              name,
+              isDirectory: file ? isNavigableDirectory(file) : false,
+            };
+          });
+
+          sftpClipboardStore.cut(
+            clipboardFiles,
+            pane.connection.currentPath,
+            pane.connection.id,
+            focusedSide
+          );
+          break;
+        }
+
+        case "sftpPaste": {
+          // Paste files from clipboard
+          const clipboard = sftpClipboardStore.get();
+          if (!clipboard || clipboard.files.length === 0) return;
+
+          // Use startTransfer to paste files from source to current pane
+          // The transfer direction is determined by clipboard sourceSide and current focusedSide
+          if (clipboard.sourceSide !== focusedSide) {
+            const sourceTabs = clipboard.sourceSide === "left" ? sftp.leftTabs.tabs : sftp.rightTabs.tabs;
+            const sourcePane = sourceTabs.find((tab) => tab.connection?.id === clipboard.sourceConnectionId);
+
+            if (!sourcePane?.connection) {
+              toast.info("Paste source is no longer available.", "SFTP");
+              return;
+            }
+
+            // Cross-pane paste - use startTransfer
+            try {
+              const isCut = clipboard.operation === "cut";
+              const pendingNames = new Set(clipboard.files.map((file) => file.name));
+              const completedNames = new Set<string>();
+              const failedNames = new Set<string>();
+
+              const updateClipboardAfterCompletion = (showToast: boolean) => {
+                if (!isCut) return;
+                const current = sftpClipboardStore.get();
+                if (
+                  !current ||
+                  current.operation !== "cut" ||
+                  current.sourceConnectionId !== clipboard.sourceConnectionId ||
+                  current.sourcePath !== clipboard.sourcePath ||
+                  current.sourceSide !== clipboard.sourceSide
+                ) {
+                  return;
+                }
+
+                const remainingFiles = current.files.filter((file) => !completedNames.has(file.name));
+                if (remainingFiles.length === 0) {
+                  sftpClipboardStore.clear();
+                } else {
+                  sftpClipboardStore.updateFiles(remainingFiles);
+                }
+
+                if (showToast && failedNames.size > 0) {
+                  toast.info("Some items could not be transferred and were kept in the clipboard.", "SFTP");
+                }
+              };
+
+              const handleTransferComplete = async (result: {
+                fileName: string;
+                originalFileName?: string;
+                status: string;
+              }) => {
+                if (!isCut) return;
+                const sourceFileName = result.originalFileName ?? result.fileName;
+                if (!pendingNames.has(sourceFileName)) return;
+                pendingNames.delete(sourceFileName);
+
+                if (result.status === "completed") {
+                  try {
+                    await sftp.deleteFilesAtPath(
+                      clipboard.sourceSide,
+                      clipboard.sourceConnectionId,
+                      clipboard.sourcePath,
+                      [sourceFileName],
+                    );
+                    completedNames.add(sourceFileName);
+                  } catch {
+                    failedNames.add(sourceFileName);
+                  }
+                } else {
+                  failedNames.add(sourceFileName);
+                }
+
+                updateClipboardAfterCompletion(pendingNames.size === 0);
+              };
+
+              await sftp.startTransfer(clipboard.files, clipboard.sourceSide, focusedSide, {
+                sourcePane,
+                sourcePath: clipboard.sourcePath,
+                sourceConnectionId: clipboard.sourceConnectionId,
+                onTransferComplete: handleTransferComplete,
+              });
+            } catch {
+              toast.error("Paste failed. Please try again.", "SFTP");
+            }
+          } else {
+            // Same-pane paste is not supported - show info toast
+            toast.info("Paste within the same pane is not supported. Use copy to other pane instead.", "SFTP");
+          }
+          break;
+        }
+
+        case "sftpSelectAll": {
+          // Select all files in the current pane
+          const term = pane.filter.trim().toLowerCase();
+          let visibleFiles = filterHiddenFiles(pane.files, showHiddenFiles);
+          if (term) {
+            visibleFiles = visibleFiles.filter(
+              (f) => f.name === ".." || f.name.toLowerCase().includes(term),
+            );
+          }
+          const allFileNames = visibleFiles
+            .filter((f) => f.name !== "..")
+            .map((f) => f.name);
+          sftp.rangeSelect(focusedSide, allFileNames);
+          break;
+        }
+
+        case "sftpRename": {
+          // Trigger rename for the first selected file
+          const selectedFiles = Array.from(pane.selectedFiles) as string[];
+          if (selectedFiles.length !== 1) return;
+          sftpDialogActionStore.trigger("rename", selectedFiles);
+          break;
+        }
+
+        case "sftpDelete": {
+          // Delete selected files
+          const selectedFiles = Array.from(pane.selectedFiles) as string[];
+          if (selectedFiles.length === 0) return;
+          sftpDialogActionStore.trigger("delete", selectedFiles);
+          break;
+        }
+
+        case "sftpRefresh": {
+          // Refresh the current pane
+          sftp.refresh(focusedSide);
+          break;
+        }
+
+        case "sftpNewFolder": {
+          // Create new folder
+          sftpDialogActionStore.trigger("newFolder");
+          break;
+        }
+      }
+    },
+    [hotkeyScheme, isActive, keyBindings, sftpRef, showHiddenFiles]
+  );
+
+  useEffect(() => {
+    // Use capture phase to intercept before other handlers
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => window.removeEventListener("keydown", handleKeyDown, true);
+  }, [handleKeyDown]);
+};

components/sftp/hooks/useSftpPaneFiles.ts

@@ -50,7 +50,7 @@ export const useSftpPaneFiles = ({
       lastModified: 0,
       lastModifiedFormatted: "--",
     };
-    return [parentEntry, ...filteredFiles.filter((f) => f.name !== "..")] ;
+    return [parentEntry, ...filteredFiles.filter((f) => f.name !== "..")];
   }, [connection, filteredFiles]);
 
   const sortedDisplayFiles = useMemo(() => {

components/sftp/index.ts

@@ -6,9 +6,9 @@
 
 // Utilities
 export {
-formatBytes,formatDate,
-formatSpeed,formatTransferBytes,getFileIcon,isNavigableDirectory,isWindowsHiddenFile,filterHiddenFiles,type ColumnWidths,type SortField,
-type SortOrder
+  formatBytes, formatDate,
+  formatSpeed, formatTransferBytes, getFileIcon, isNavigableDirectory, isHiddenFile, isWindowsHiddenFile, filterHiddenFiles, type ColumnWidths, type SortField,
+  type SortOrder
 } from './utils';
 
 // Context
@@ -18,6 +18,7 @@ export {
   useSftpPaneCallbacks,
   useSftpDrag,
   useSftpHosts,
+  useSftpUpdateHosts,
   useSftpShowHiddenFiles,
   useActiveTabId,
   useIsPaneActive,

components/sftp/utils.ts

@@ -3,23 +3,23 @@
  */
 
 import {
-Database,
-ExternalLink,
-File,
-FileArchive,
-FileAudio,
-FileCode,
-FileImage,
-FileSpreadsheet,
-FileText,
-FileType,
-FileVideo,
-Folder,
-Globe,
-Key,
-Lock,
-Settings,
-Terminal,
+    Database,
+    ExternalLink,
+    File,
+    FileArchive,
+    FileAudio,
+    FileCode,
+    FileImage,
+    FileSpreadsheet,
+    FileText,
+    FileType,
+    FileVideo,
+    Folder,
+    Globe,
+    Key,
+    Lock,
+    Settings,
+    Terminal,
 } from 'lucide-react';
 import React from 'react';
 import { SftpFileEntry } from '../../types';
@@ -74,7 +74,7 @@ export const formatSpeed = (bytesPerSecond: number): string => {
  */
 export const getFileIcon = (entry: SftpFileEntry): React.ReactElement => {
     if (entry.type === 'directory') return React.createElement(Folder, { size: 14 });
-    
+
     // For symlink files (not directories), show a special symlink icon
     if (entry.type === 'symlink' && entry.linkTarget !== 'directory') {
         return React.createElement(ExternalLink, { size: 14, className: "text-cyan-500" });
@@ -189,31 +189,40 @@ export const isNavigableDirectory = (entry: SftpFileEntry): boolean => {
 };
 
 /**
- * Check if a file is hidden on Windows
- * Only applies to local Windows filesystem where the hidden attribute is set
- * The ".." parent directory entry is never considered hidden
- * 
- * Note: On Unix/Linux, there's no system-level hidden file concept.
- * Dotfiles are just a convention, not actual hidden files, so we don't filter them.
+ * Check if a file is hidden
+ * - Windows: checks the `hidden` attribute (set by localFsBridge)
+ * - Unix/Linux (remote): also treats dotfiles (names starting with '.') as hidden
+/**
+ * A file is considered hidden if:
+ * - It has the Windows hidden attribute (`hidden === true`), OR
+ * - Its name starts with a dot (Unix/Linux dotfile convention)
+ *
+ * The ".." parent directory entry is never considered hidden.
  */
-export const isWindowsHiddenFile = <T extends { name: string; hidden?: boolean }>(file: T): boolean => {
+export const isHiddenFile = <T extends { name: string; hidden?: boolean }>(
+    file: T,
+): boolean => {
     if (file.name === "..") return false;
-    return file.hidden === true;
+    // Windows hidden attribute
+    if (file.hidden === true) return true;
+    // Unix/Linux dotfile convention
+    if (file.name.startsWith(".")) return true;
+    return false;
 };
 
+/** @deprecated Use isHiddenFile instead */
+export const isWindowsHiddenFile = <T extends { name: string; hidden?: boolean }>(file: T): boolean =>
+    isHiddenFile(file);
+
 /**
- * Filter files based on Windows hidden file visibility setting
- * Only filters files with the Windows hidden attribute set
- * Always preserves ".." parent directory entry
- * 
- * This setting only affects local Windows filesystem browsing.
- * On Unix/Linux systems and remote SFTP connections, all files are shown
- * because there's no system-level hidden file concept (dotfiles are just a convention).
+ * Filter files based on hidden file visibility setting.
+ * Filters Windows hidden files and Unix/Linux dotfiles on all connections.
+ * Always preserves ".." parent directory entry.
  */
 export const filterHiddenFiles = <T extends { name: string; hidden?: boolean }>(
     files: T[],
-    showHiddenFiles: boolean
+    showHiddenFiles: boolean,
 ): T[] => {
     if (showHiddenFiles) return files;
-    return files.filter((f) => !isWindowsHiddenFile(f));
+    return files.filter((f) => !isHiddenFile(f));
 };

components/terminal/CustomThemeEditor.tsx

@@ -0,0 +1,187 @@
+/**
+ * Custom Theme Editor Panel
+ * Inline color editor for creating/editing custom terminal themes.
+ * Uses native <input type="color"> for zero-dependency color picking.
+ */
+
+import React, { useCallback, memo } from 'react';
+import { TerminalTheme } from '../../domain/models';
+import { useI18n } from '../../application/i18n/I18nProvider';
+
+
+interface ColorFieldDef {
+    key: keyof TerminalTheme['colors'];
+    labelKey: string;
+}
+
+const GENERAL_COLORS: ColorFieldDef[] = [
+    { key: 'background', labelKey: 'terminal.customTheme.color.background' },
+    { key: 'foreground', labelKey: 'terminal.customTheme.color.foreground' },
+    { key: 'cursor', labelKey: 'terminal.customTheme.color.cursor' },
+    { key: 'selection', labelKey: 'terminal.customTheme.color.selection' },
+];
+
+const NORMAL_COLORS: ColorFieldDef[] = [
+    { key: 'black', labelKey: 'terminal.customTheme.color.black' },
+    { key: 'red', labelKey: 'terminal.customTheme.color.red' },
+    { key: 'green', labelKey: 'terminal.customTheme.color.green' },
+    { key: 'yellow', labelKey: 'terminal.customTheme.color.yellow' },
+    { key: 'blue', labelKey: 'terminal.customTheme.color.blue' },
+    { key: 'magenta', labelKey: 'terminal.customTheme.color.magenta' },
+    { key: 'cyan', labelKey: 'terminal.customTheme.color.cyan' },
+    { key: 'white', labelKey: 'terminal.customTheme.color.white' },
+];
+
+const BRIGHT_COLORS: ColorFieldDef[] = [
+    { key: 'brightBlack', labelKey: 'terminal.customTheme.color.brightBlack' },
+    { key: 'brightRed', labelKey: 'terminal.customTheme.color.brightRed' },
+    { key: 'brightGreen', labelKey: 'terminal.customTheme.color.brightGreen' },
+    { key: 'brightYellow', labelKey: 'terminal.customTheme.color.brightYellow' },
+    { key: 'brightBlue', labelKey: 'terminal.customTheme.color.brightBlue' },
+    { key: 'brightMagenta', labelKey: 'terminal.customTheme.color.brightMagenta' },
+    { key: 'brightCyan', labelKey: 'terminal.customTheme.color.brightCyan' },
+    { key: 'brightWhite', labelKey: 'terminal.customTheme.color.brightWhite' },
+];
+
+const ColorInput = memo(({
+    label,
+    value,
+    onChange,
+}: {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+}) => {
+    // Local state for text input — allows partial hex while typing
+    const [textValue, setTextValue] = React.useState(value);
+    // Sync external value changes into local state
+    React.useEffect(() => { setTextValue(value); }, [value]);
+
+    const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const v = e.target.value;
+        if (!/^#[0-9a-fA-F]{0,6}$/.test(v)) return;
+        setTextValue(v);
+        // Only commit complete hex values (#rgb or #rrggbb)
+        if (/^#[0-9a-fA-F]{3}$/.test(v) || /^#[0-9a-fA-F]{6}$/.test(v)) {
+            // Normalize #rgb to #rrggbb
+            const normalized = v.length === 4
+                ? `#${v[1]}${v[1]}${v[2]}${v[2]}${v[3]}${v[3]}`
+                : v;
+            onChange(normalized);
+        }
+    };
+
+    // On blur, revert to the last committed value if incomplete
+    const handleBlur = () => { setTextValue(value); };
+
+    return (
+        <div className="flex items-center gap-2">
+            <div className="relative">
+                <input
+                    type="color"
+                    value={value}
+                    onChange={(e) => onChange(e.target.value)}
+                    className="w-6 h-6 rounded cursor-pointer border border-border/50 p-0"
+                    style={{ appearance: 'none', WebkitAppearance: 'none', background: value }}
+                />
+            </div>
+            <span className="text-[10px] text-muted-foreground flex-1 truncate">{label}</span>
+            <input
+                type="text"
+                value={textValue}
+                onChange={handleTextChange}
+                onBlur={handleBlur}
+                className="w-[68px] text-[10px] font-mono px-1.5 py-0.5 rounded border border-border bg-background text-foreground uppercase"
+                spellCheck={false}
+            />
+        </div>
+    );
+});
+ColorInput.displayName = 'ColorInput';
+
+interface CustomThemeEditorProps {
+    theme: TerminalTheme;
+    onChange: (theme: TerminalTheme) => void;
+    onBack?: () => void;  // kept for API compat but no longer rendered
+    isNew?: boolean;
+}
+
+export const CustomThemeEditor: React.FC<CustomThemeEditorProps> = ({
+    theme,
+    onChange,
+    onBack: _onBack,
+    isNew: _isNew,
+}) => {
+    const { t } = useI18n();
+
+    const updateColor = useCallback((key: keyof TerminalTheme['colors'], value: string) => {
+        onChange({
+            ...theme,
+            colors: { ...theme.colors, [key]: value },
+        });
+    }, [theme, onChange]);
+
+    const updateName = useCallback((name: string) => {
+        onChange({ ...theme, name });
+    }, [theme, onChange]);
+
+    const toggleType = useCallback(() => {
+        onChange({ ...theme, type: theme.type === 'dark' ? 'light' : 'dark' });
+    }, [theme, onChange]);
+
+    const renderColorGroup = (title: string, fields: ColorFieldDef[]) => (
+        <div>
+            <div className="text-[9px] uppercase tracking-wider text-muted-foreground mb-1.5 font-semibold">
+                {title}
+            </div>
+            <div className="space-y-1">
+                {fields.map(({ key, labelKey }) => (
+                    <ColorInput
+                        key={key}
+                        label={t(labelKey)}
+                        value={theme.colors[key]}
+                        onChange={(v) => updateColor(key, v)}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+
+    return (
+        <div className="flex flex-col h-full">
+            {/* Name + Type */}
+            <div className="p-2 space-y-2 border-b border-border shrink-0">
+                <div>
+                    <label className="text-[9px] uppercase tracking-wider text-muted-foreground font-semibold">
+                        {t('terminal.customTheme.name')}
+                    </label>
+                    <input
+                        type="text"
+                        value={theme.name}
+                        onChange={(e) => updateName(e.target.value)}
+                        className="w-full mt-1 text-xs px-2 py-1.5 rounded border border-border bg-background text-foreground"
+                        placeholder={t('terminal.customTheme.namePlaceholder')}
+                    />
+                </div>
+                <div className="flex items-center gap-2">
+                    <label className="text-[9px] uppercase tracking-wider text-muted-foreground font-semibold flex-1">
+                        {t('terminal.customTheme.type')}
+                    </label>
+                    <button
+                        onClick={toggleType}
+                        className="text-[10px] px-2 py-0.5 rounded border border-border bg-muted/30 text-foreground hover:bg-muted transition-colors capitalize"
+                    >
+                        {theme.type}
+                    </button>
+                </div>
+            </div>
+
+            {/* Color Groups */}
+            <div className="flex-1 overflow-y-auto p-2 space-y-3">
+                {renderColorGroup(t('terminal.customTheme.group.general'), GENERAL_COLORS)}
+                {renderColorGroup(t('terminal.customTheme.group.normal'), NORMAL_COLORS)}
+                {renderColorGroup(t('terminal.customTheme.group.bright'), BRIGHT_COLORS)}
+            </div>
+        </div>
+    );
+};

components/terminal/CustomThemeModal.tsx

@@ -0,0 +1,230 @@
+/**
+ * Dedicated Custom Theme Editor Modal
+ * Standalone modal with two-column layout: editor (left) + preview (right)
+ * Opens on top of ThemeCustomizeModal for creating/editing custom themes.
+ */
+
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Trash2, X } from 'lucide-react';
+import { TerminalTheme } from '../../domain/models';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import { CustomThemeEditor } from './CustomThemeEditor';
+import { Button } from '../ui/button';
+
+
+interface CustomThemeModalProps {
+    open: boolean;
+    theme: TerminalTheme;
+    isNew: boolean;
+    onSave: (theme: TerminalTheme) => void;
+    onDelete?: (themeId: string) => void;
+    onCancel: () => void;
+}
+
+// Minimal terminal preview for the right panel
+const MiniPreview: React.FC<{ theme: TerminalTheme }> = ({ theme }) => (
+    <div
+        className="rounded-lg border border-border/50 overflow-hidden font-mono text-[11px] leading-relaxed flex-1"
+        style={{ backgroundColor: theme.colors.background, color: theme.colors.foreground }}
+    >
+        {/* Title bar */}
+        <div className="flex items-center gap-1.5 px-3 py-1.5 bg-black/20">
+            <div className="w-2.5 h-2.5 rounded-full bg-red-500/80" />
+            <div className="w-2.5 h-2.5 rounded-full bg-yellow-500/80" />
+            <div className="w-2.5 h-2.5 rounded-full bg-green-500/80" />
+            <span className="flex-1 text-center text-[10px] opacity-50">Terminal Preview</span>
+        </div>
+        <div className="p-3 space-y-0.5">
+            <div>
+                <span style={{ color: theme.colors.green }}>user@server</span>
+                <span style={{ color: theme.colors.foreground }}>:</span>
+                <span style={{ color: theme.colors.blue }}>~</span>
+                <span style={{ color: theme.colors.foreground }}>$ neofetch</span>
+            </div>
+            <div style={{ color: theme.colors.cyan }}>{'  ,g$$P"     """Y$$."".        '}</div>
+            <div>
+                <span style={{ color: theme.colors.cyan }}>{` ,$$P'   `}</span>
+                <span style={{ color: theme.colors.blue }}>OS</span>
+                <span>: Ubuntu 22.04 LTS</span>
+            </div>
+            <div>
+                <span style={{ color: theme.colors.cyan }}>{` '',$$P `}</span>
+                <span style={{ color: theme.colors.blue }}>Kernel</span>
+                <span>: 5.15.0-generic</span>
+            </div>
+            <div>
+                <span style={{ color: theme.colors.cyan }}>{` d$$'  `}</span>
+                <span style={{ color: theme.colors.blue }}>Shell</span>
+                <span>: bash 5.1.16</span>
+            </div>
+            <div>
+                <span style={{ color: theme.colors.cyan }}>{` $$P   `}</span>
+                <span style={{ color: theme.colors.blue }}>Memory</span>
+                <span>: 4.2G / 16G (26%)</span>
+            </div>
+            <div>&nbsp;</div>
+            {/* ANSI color palette */}
+            <div className="flex gap-0.5">
+                {[theme.colors.black, theme.colors.red, theme.colors.green, theme.colors.yellow,
+                theme.colors.blue, theme.colors.magenta, theme.colors.cyan, theme.colors.white].map((c, i) => (
+                    <div key={i} className="w-3.5 h-2.5 rounded-sm" style={{ backgroundColor: c }} />
+                ))}
+            </div>
+            <div className="flex gap-0.5">
+                {[theme.colors.brightBlack, theme.colors.brightRed, theme.colors.brightGreen, theme.colors.brightYellow,
+                theme.colors.brightBlue, theme.colors.brightMagenta, theme.colors.brightCyan, theme.colors.brightWhite].map((c, i) => (
+                    <div key={i} className="w-3.5 h-2.5 rounded-sm" style={{ backgroundColor: c }} />
+                ))}
+            </div>
+            <div>&nbsp;</div>
+            <div>
+                <span style={{ color: theme.colors.green }}>user@server</span>
+                <span>:</span>
+                <span style={{ color: theme.colors.blue }}>~</span>
+                <span>$ </span>
+                <span style={{ backgroundColor: theme.colors.cursor, color: theme.colors.background }}>&nbsp;</span>
+            </div>
+        </div>
+    </div>
+);
+
+export const CustomThemeModal: React.FC<CustomThemeModalProps> = ({
+    open,
+    theme: initialTheme,
+    isNew,
+    onSave,
+    onDelete,
+    onCancel,
+}) => {
+    const { t } = useI18n();
+    const [editingTheme, setEditingTheme] = useState<TerminalTheme>(initialTheme);
+
+    // Reset when opened with a new theme
+    React.useEffect(() => {
+        if (open) {
+            setEditingTheme({ ...initialTheme, colors: { ...initialTheme.colors } });
+        }
+    }, [open, initialTheme]);
+
+    const handleChange = useCallback((theme: TerminalTheme) => {
+        setEditingTheme(theme);
+    }, []);
+
+    const handleSave = useCallback(() => {
+        onSave(editingTheme);
+    }, [editingTheme, onSave]);
+
+    const handleDelete = useCallback(() => {
+        onDelete?.(editingTheme.id);
+    }, [editingTheme.id, onDelete]);
+
+    // Dummy back handler — in the standalone modal, back = cancel
+    const handleBack = useCallback(() => {
+        onCancel();
+    }, [onCancel]);
+
+    const themeInfo = useMemo(() => {
+        return `${editingTheme.name} • ${editingTheme.type.toUpperCase()}`;
+    }, [editingTheme.name, editingTheme.type]);
+
+    // Handle Escape key — close child editor
+    useEffect(() => {
+        if (!open) return;
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                e.stopPropagation();
+                onCancel();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown, true); // capture phase
+        return () => document.removeEventListener('keydown', handleKeyDown, true);
+    }, [open, onCancel]);
+
+    if (!open) return null;
+
+    const modalContent = (
+        <div
+            className="fixed inset-0 z-[300] flex items-center justify-center"
+        >
+            {/* Backdrop — clicking it dismisses the modal */}
+            <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onCancel} />
+
+            {/* Modal */}
+            <div className="relative z-10 bg-popover/95 backdrop-blur-xl rounded-xl shadow-2xl border border-border/50 flex flex-col"
+                style={{ width: 'min(820px, 90vw)', height: 'min(600px, 85vh)' }}
+                onClick={(e) => e.stopPropagation()}
+            >
+                {/* Header */}
+                <div className="flex items-center justify-between px-5 py-3 shrink-0 border-b border-border">
+                    <h2 className="text-sm font-semibold text-foreground">
+                        {isNew ? t('terminal.customTheme.newTitle') : t('terminal.customTheme.editTitle')}
+                    </h2>
+                    <button
+                        onClick={onCancel}
+                        className="w-7 h-7 rounded-md flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                    >
+                        <X size={16} />
+                    </button>
+                </div>
+
+                {/* Body: Editor (left) + Preview (right) */}
+                <div className="flex flex-1 min-h-0">
+                    {/* Left: Editor */}
+                    <div className="w-[300px] shrink-0 border-r border-border flex flex-col min-h-0">
+                        <CustomThemeEditor
+                            theme={editingTheme}
+                            onChange={handleChange}
+                            onBack={handleBack}
+                            isNew={isNew}
+                        />
+                    </div>
+
+                    {/* Right: Preview */}
+                    <div className="flex-1 flex flex-col p-4 min-w-0">
+                        <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-3 font-semibold">
+                            {t('terminal.themeModal.livePreview')}
+                        </div>
+                        <MiniPreview theme={editingTheme} />
+                        <div className="mt-2 text-xs text-muted-foreground text-center">
+                            {themeInfo}
+                        </div>
+                    </div>
+                </div>
+
+                {/* Footer */}
+                <div className="flex items-center gap-3 px-5 py-3 shrink-0 border-t border-border bg-muted/20">
+                    {/* Delete button (only for existing themes) */}
+                    {!isNew && onDelete && (
+                        <Button
+                            variant="ghost"
+                            onClick={handleDelete}
+                            className="h-9 text-destructive hover:text-destructive hover:bg-destructive/10 gap-1.5"
+                        >
+                            <Trash2 size={14} />
+                            {t('terminal.customTheme.delete')}
+                        </Button>
+                    )}
+                    <div className="flex-1" />
+                    <Button
+                        variant="ghost"
+                        onClick={onCancel}
+                        className="h-9 px-5"
+                    >
+                        {t('common.cancel')}
+                    </Button>
+                    <Button
+                        onClick={handleSave}
+                        className="h-9 px-6"
+                    >
+                        {t('common.save')}
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+
+    return createPortal(modalContent, document.body);
+};
+
+export default CustomThemeModal;

components/terminal/HostKeywordHighlightPopover.tsx

@@ -0,0 +1,295 @@
+/**
+ * Host Keyword Highlight Popover
+ * Allows users to manage host-specific keyword highlighting rules in the terminal statusbar
+ */
+import { Highlighter, Plus, Trash2, RotateCcw } from 'lucide-react';
+import React, { useState, useCallback, useMemo } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import { Host, KeywordHighlightRule } from '../../types';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import { ScrollArea } from '../ui/scroll-area';
+
+export interface HostKeywordHighlightPopoverProps {
+  host?: Host;
+  onUpdateHost?: (host: Host) => void;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  buttonClassName?: string;
+}
+
+const DEFAULT_NEW_RULE_COLOR = '#F87171';
+
+export const HostKeywordHighlightPopover: React.FC<HostKeywordHighlightPopoverProps> = ({
+  host,
+  onUpdateHost,
+  isOpen,
+  setIsOpen,
+  buttonClassName = '',
+}) => {
+  const { t } = useI18n();
+  const [newRuleLabel, setNewRuleLabel] = useState('');
+  const [newRulePattern, setNewRulePattern] = useState('');
+  const [newRuleColor, setNewRuleColor] = useState(DEFAULT_NEW_RULE_COLOR);
+  const [patternError, setPatternError] = useState<string | null>(null);
+
+  const rules = useMemo(() => host?.keywordHighlightRules ?? [], [host?.keywordHighlightRules]);
+  const enabled = host?.keywordHighlightEnabled ?? false;
+
+  const updateRules = useCallback((newRules: KeywordHighlightRule[]) => {
+    if (!host || !onUpdateHost) return;
+    onUpdateHost({ ...host, keywordHighlightRules: newRules });
+  }, [host, onUpdateHost]);
+
+  const toggleEnabled = useCallback(() => {
+    if (!host || !onUpdateHost) return;
+    onUpdateHost({ ...host, keywordHighlightEnabled: !enabled });
+  }, [host, onUpdateHost, enabled]);
+
+  const validatePattern = (pattern: string): boolean => {
+    try {
+      new RegExp(pattern, 'gi');
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  const handleAddRule = useCallback(() => {
+    if (!newRuleLabel.trim() || !newRulePattern.trim()) {
+      return;
+    }
+
+    if (!validatePattern(newRulePattern)) {
+      setPatternError(t('terminal.toolbar.hostHighlight.invalidPattern'));
+      return;
+    }
+
+    const newRule: KeywordHighlightRule = {
+      id: uuidv4(),
+      label: newRuleLabel.trim(),
+      patterns: [newRulePattern.trim()],
+      color: newRuleColor,
+      enabled: true,
+    };
+
+    updateRules([...rules, newRule]);
+
+    // Reset form
+    setNewRuleLabel('');
+    setNewRulePattern('');
+    setNewRuleColor(DEFAULT_NEW_RULE_COLOR);
+    setPatternError(null);
+
+    // Auto-enable if adding the first rule and not enabled
+    if (rules.length === 0 && !enabled && host && onUpdateHost) {
+      onUpdateHost({ ...host, keywordHighlightRules: [newRule], keywordHighlightEnabled: true });
+    }
+  }, [newRuleLabel, newRulePattern, newRuleColor, rules, updateRules, enabled, host, onUpdateHost, t]);
+
+  const handleDeleteRule = useCallback((ruleId: string) => {
+    updateRules(rules.filter((r) => r.id !== ruleId));
+  }, [rules, updateRules]);
+
+  const handleColorChange = useCallback((ruleId: string, color: string) => {
+    updateRules(rules.map((r) => (r.id === ruleId ? { ...r, color } : r)));
+  }, [rules, updateRules]);
+
+  const handleToggleRule = useCallback((ruleId: string) => {
+    updateRules(rules.map((r) => (r.id === ruleId ? { ...r, enabled: !r.enabled } : r)));
+  }, [rules, updateRules]);
+
+  const handleClearAll = useCallback(() => {
+    if (!host || !onUpdateHost) return;
+    onUpdateHost({ ...host, keywordHighlightRules: [], keywordHighlightEnabled: false });
+  }, [host, onUpdateHost]);
+
+  const handlePatternChange = (value: string) => {
+    setNewRulePattern(value);
+    if (patternError && validatePattern(value)) {
+      setPatternError(null);
+    }
+  };
+
+  // Disable if no host (local/serial terminal sessions)
+  const isLocalTerminal = host?.protocol === 'local' || host?.id?.startsWith('local-');
+  const isSerialTerminal = host?.protocol === 'serial' || host?.id?.startsWith('serial-');
+  const isDisabled = !host || !onUpdateHost || isLocalTerminal || isSerialTerminal;
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="secondary"
+          size="icon"
+          className={buttonClassName}
+          title={t('terminal.toolbar.hostHighlight.title')}
+          aria-label={t('terminal.toolbar.hostHighlight.title')}
+          disabled={isDisabled}
+        >
+          <Highlighter size={12} />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80 p-0" align="start" side="top">
+        <div className="px-3 py-2 border-b bg-muted/30 flex items-center justify-between">
+          <span className="text-xs font-semibold uppercase text-muted-foreground">
+            {t('terminal.toolbar.hostHighlight.title')}
+          </span>
+          <label className="flex items-center gap-2 cursor-pointer">
+            <span className="text-xs text-muted-foreground">
+              {enabled ? t('common.enabled') : t('common.disabled')}
+            </span>
+            <button
+              type="button"
+              role="switch"
+              aria-checked={enabled}
+              onClick={toggleEnabled}
+              className={`
+                relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent 
+                transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
+                ${enabled ? 'bg-primary' : 'bg-muted-foreground/30'}
+              `}
+            >
+              <span
+                className={`
+                  pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 
+                  transition duration-200 ease-in-out
+                  ${enabled ? 'translate-x-4' : 'translate-x-0'}
+                `}
+              />
+            </button>
+          </label>
+        </div>
+
+        <ScrollArea className="max-h-64">
+          <div className="p-2 space-y-1.5">
+            {rules.length === 0 ? (
+              <div className="px-2 py-4 text-xs text-muted-foreground text-center italic">
+                {t('terminal.toolbar.hostHighlight.noRules')}
+              </div>
+            ) : (
+              rules.map((rule) => (
+                <div
+                  key={rule.id}
+                  className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-accent/50 group"
+                >
+                  <button
+                    type="button"
+                    onClick={() => handleToggleRule(rule.id)}
+                    className={`
+                      flex-shrink-0 w-3 h-3 rounded-sm border transition-colors
+                      ${rule.enabled 
+                        ? 'bg-primary border-primary' 
+                        : 'bg-transparent border-muted-foreground/50'
+                      }
+                    `}
+                    title={rule.enabled ? t('common.enabled') : t('common.disabled')}
+                  />
+                  <div className="flex-1 min-w-0">
+                    <div 
+                      className="text-xs font-medium truncate" 
+                      style={{ color: rule.enabled ? rule.color : 'inherit' }}
+                    >
+                      {rule.label}
+                    </div>
+                    <div className="text-[10px] text-muted-foreground font-mono truncate">
+                      {rule.patterns.join(', ')}
+                    </div>
+                  </div>
+                  <label className="relative flex-shrink-0">
+                    <input
+                      type="color"
+                      value={rule.color}
+                      onChange={(e) => handleColorChange(rule.id, e.target.value)}
+                      className="sr-only"
+                      aria-label={`${t('terminal.toolbar.hostHighlight.changeColor')} ${rule.label}`}
+                    />
+                    <span
+                      className="block w-6 h-4 rounded cursor-pointer border border-border/50 hover:border-border"
+                      style={{ backgroundColor: rule.color }}
+                    />
+                  </label>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-5 w-5 opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive hover:bg-destructive/10"
+                    onClick={() => handleDeleteRule(rule.id)}
+                  >
+                    <Trash2 size={10} />
+                  </Button>
+                </div>
+              ))
+            )}
+          </div>
+        </ScrollArea>
+
+        {/* Add new rule form */}
+        <div className="p-2 border-t bg-muted/20 space-y-2">
+          <div className="text-xs font-medium text-muted-foreground mb-1">
+            {t('terminal.toolbar.hostHighlight.addRule')}
+          </div>
+          <div className="flex gap-1.5">
+            <Input
+              placeholder={t('terminal.toolbar.hostHighlight.labelPlaceholder')}
+              value={newRuleLabel}
+              onChange={(e) => setNewRuleLabel(e.target.value)}
+              className="h-7 text-xs flex-1"
+            />
+            <label className="relative flex-shrink-0">
+              <input
+                type="color"
+                value={newRuleColor}
+                onChange={(e) => setNewRuleColor(e.target.value)}
+                className="sr-only"
+                aria-label={t('terminal.toolbar.hostHighlight.selectColor')}
+              />
+              <span
+                className="block w-7 h-7 rounded cursor-pointer border border-border/50 hover:border-border"
+                style={{ backgroundColor: newRuleColor }}
+              />
+            </label>
+          </div>
+          <div className="flex gap-1.5">
+            <Input
+              placeholder={t('terminal.toolbar.hostHighlight.patternPlaceholder')}
+              value={newRulePattern}
+              onChange={(e) => handlePatternChange(e.target.value)}
+              className={`h-7 text-xs font-mono flex-1 ${patternError ? 'border-destructive' : ''}`}
+            />
+            <Button
+              variant="secondary"
+              size="icon"
+              className="h-7 w-7 flex-shrink-0"
+              onClick={handleAddRule}
+              disabled={!newRuleLabel.trim() || !newRulePattern.trim()}
+            >
+              <Plus size={12} />
+            </Button>
+          </div>
+          {patternError && (
+            <div className="text-[10px] text-destructive">{patternError}</div>
+          )}
+        </div>
+
+        {/* Footer actions */}
+        {rules.length > 0 && (
+          <div className="p-2 border-t flex justify-end">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-6 text-xs text-muted-foreground hover:text-destructive"
+              onClick={handleClearAll}
+            >
+              <RotateCcw size={10} className="mr-1" />
+              {t('terminal.toolbar.hostHighlight.clearAll')}
+            </Button>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default HostKeywordHighlightPopover;

components/terminal/TerminalComposeBar.tsx

@@ -0,0 +1,167 @@
+/**
+ * Terminal Compose Bar
+ * A modern text input bar for composing commands before sending them.
+ * Supports pre-reviewing passwords/commands and broadcasting to multiple sessions.
+ */
+import { Radio, Send, X } from 'lucide-react';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import { cn } from '../../lib/utils';
+
+export interface TerminalComposeBarProps {
+    onSend: (text: string) => void;
+    onClose: () => void;
+    isBroadcastEnabled?: boolean;
+    themeColors?: {
+        background: string;
+        foreground: string;
+    };
+}
+
+export const TerminalComposeBar: React.FC<TerminalComposeBarProps> = ({
+    onSend,
+    onClose,
+    isBroadcastEnabled,
+    themeColors,
+}) => {
+    const { t } = useI18n();
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const isComposingRef = useRef(false);
+
+    // Auto-focus on mount
+    useEffect(() => {
+        // Small delay to ensure the element is rendered
+        const timer = setTimeout(() => textareaRef.current?.focus(), 50);
+        return () => clearTimeout(timer);
+    }, []);
+
+    // Auto-resize textarea
+    const handleInput = useCallback(() => {
+        const el = textareaRef.current;
+        if (!el) return;
+        el.style.height = 'auto';
+        el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
+    }, []);
+
+    const handleSend = useCallback(() => {
+        const el = textareaRef.current;
+        if (!el) return;
+        const text = el.value;
+        if (!text) return;
+        onSend(text);
+        el.value = '';
+        el.style.height = 'auto';
+        el.focus();
+    }, [onSend]);
+
+    const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.key === 'Enter' && !e.shiftKey && !isComposingRef.current) {
+            e.preventDefault();
+            handleSend();
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            onClose();
+        }
+    }, [handleSend, onClose]);
+
+    const bg = themeColors?.background ?? '#0a0a0a';
+    const fg = themeColors?.foreground ?? '#d4d4d4';
+
+    return (
+        <div
+            className="flex-shrink-0"
+            style={{
+                background: `linear-gradient(to top, ${bg}, color-mix(in srgb, ${fg} 4%, ${bg} 96%))`,
+                borderTop: `1px solid color-mix(in srgb, ${fg} 10%, ${bg} 90%)`,
+                borderRadius: '0 0 8px 8px',
+                padding: '6px 10px',
+            }}
+        >
+            <div className="flex items-center gap-2">
+                {/* Broadcast indicator */}
+                {isBroadcastEnabled && (
+                    <div
+                        className="flex items-center"
+                        title={t("terminal.composeBar.broadcasting")}
+                    >
+                        <Radio size={14} className="text-amber-400 animate-pulse" />
+                    </div>
+                )}
+
+                {/* Input field */}
+                <textarea
+                    ref={textareaRef}
+                    className={cn(
+                        "flex-1 min-w-0 resize-none rounded-md px-3 py-1.5 text-xs font-mono leading-relaxed",
+                        "outline-none transition-all duration-200",
+                        "placeholder:opacity-40",
+                    )}
+                    style={{
+                        backgroundColor: `color-mix(in srgb, ${fg} 6%, ${bg} 94%)`,
+                        color: fg,
+                        border: `1px solid color-mix(in srgb, ${fg} 25%, ${bg} 75%)`,
+                        minHeight: '28px',
+                        maxHeight: '120px',
+                        boxShadow: `inset 0 1px 3px color-mix(in srgb, ${bg} 80%, transparent)`,
+                    }}
+                    rows={1}
+                    placeholder={t("terminal.composeBar.placeholder")}
+                    onInput={handleInput}
+                    onKeyDown={handleKeyDown}
+                    onFocus={(e) => {
+                        e.currentTarget.style.borderColor = `color-mix(in srgb, ${fg} 40%, ${bg} 60%)`;
+                        e.currentTarget.style.boxShadow = `inset 0 1px 3px color-mix(in srgb, ${bg} 80%, transparent), 0 0 0 1px color-mix(in srgb, ${fg} 8%, transparent)`;
+                    }}
+                    onBlur={(e) => {
+                        e.currentTarget.style.borderColor = `color-mix(in srgb, ${fg} 25%, ${bg} 75%)`;
+                        e.currentTarget.style.boxShadow = `inset 0 1px 3px color-mix(in srgb, ${bg} 80%, transparent)`;
+                    }}
+                    onCompositionStart={() => { isComposingRef.current = true; }}
+                    onCompositionEnd={() => { isComposingRef.current = false; }}
+                />
+
+                {/* Action buttons */}
+                <div className="flex items-center gap-0.5">
+                    <button
+                        className="h-7 w-7 flex items-center justify-center rounded-md transition-colors duration-150"
+                        style={{
+                            color: fg,
+                            background: `color-mix(in srgb, ${fg} 20%, ${bg} 80%)`,
+                        }}
+                        onMouseEnter={(e) => {
+                            e.currentTarget.style.background = `color-mix(in srgb, ${fg} 30%, ${bg} 70%)`;
+                        }}
+                        onMouseLeave={(e) => {
+                            e.currentTarget.style.background = `color-mix(in srgb, ${fg} 20%, ${bg} 80%)`;
+                        }}
+                        onClick={handleSend}
+                        title={t("terminal.composeBar.send")}
+                    >
+                        <Send size={13} />
+                    </button>
+                    <button
+                        className="h-7 w-7 flex items-center justify-center rounded-md transition-colors duration-150"
+                        style={{
+                            color: `color-mix(in srgb, ${fg} 60%, ${bg} 40%)`,
+                            background: `color-mix(in srgb, ${fg} 12%, ${bg} 88%)`,
+                        }}
+                        onMouseEnter={(e) => {
+                            e.currentTarget.style.background = `color-mix(in srgb, ${fg} 22%, ${bg} 78%)`;
+                            e.currentTarget.style.color = fg;
+                        }}
+                        onMouseLeave={(e) => {
+                            e.currentTarget.style.background = `color-mix(in srgb, ${fg} 12%, ${bg} 88%)`;
+                            e.currentTarget.style.color = `color-mix(in srgb, ${fg} 60%, ${bg} 40%)`;
+                        }}
+                        onClick={onClose}
+                        title={t("terminal.composeBar.close")}
+                    >
+                        <X size={13} />
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TerminalComposeBar;