fix: include local shell helper in packaged app

electron-builder install-app-deps forks a child process via
remote-rebuild.js to run @electron/rebuild. The child's main()
has no .catch() handler, causing unhandled promise rejections
that exit with code 1 even after successful rebuilds.

Replace with direct `npx electron-rebuild` which runs in-process
and avoids the broken fork layer entirely.

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

.github/workflows/build.yml

@@ -84,13 +84,14 @@ jobs:
             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.
+  # Linux x64 — pin to ubuntu-22.04 for broader glibc compatibility.
+  # ubuntu-latest (24.04) links native modules against glibc 2.39 which
+  # can cause dlopen failures on some distros. 22.04 uses glibc 2.35,
+  # compatible with most current Linux distributions including Arch.
+  # See #264.
   build-linux-x64:
     name: build-linux-x64
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     env:
       VITE_SYNC_GITHUB_CLIENT_ID: ${{ secrets.VITE_SYNC_GITHUB_CLIENT_ID }}
       VITE_SYNC_GOOGLE_CLIENT_ID: ${{ secrets.VITE_SYNC_GOOGLE_CLIENT_ID }}
@@ -120,11 +121,17 @@ jobs:
           echo "Setting version to ${VERSION}"
           npm pkg set version="${VERSION}"
 
+      - name: Prepare node-pty Linux runtime
+        run: bash scripts/ensure-node-pty-linux.sh prepare x64
+
       - name: Build package
         env:
           ELECTRON_BUILDER_PUBLISH: "never"
         run: npm run pack:linux-x64
 
+      - name: Verify packaged node-pty Linux runtime
+        run: bash scripts/ensure-node-pty-linux.sh verify x64
+
       - name: Upload artifacts
         uses: actions/upload-artifact@v4
         with:
@@ -154,7 +161,9 @@ jobs:
       - name: Install build dependencies
         run: |
           apt-get update
-          apt-get install -y curl build-essential python3 git libfuse2 file rpm
+          apt-get install -y curl build-essential python3 git libfuse2 file rpm \
+            libglib2.0-0 libgtk-3-0 libnss3 libxss1 libxtst6 libasound2 \
+            libatk-bridge2.0-0 libdrm2 libgbm1 libx11-xcb1 libxcb-dri3-0
           curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
           apt-get install -y nodejs
 
@@ -175,12 +184,20 @@ jobs:
           echo "Setting version to ${VERSION}"
           npm pkg set version="${VERSION}"
 
+      - name: Prepare node-pty Linux runtime
+        env:
+          npm_config_arch: arm64
+        run: bash scripts/ensure-node-pty-linux.sh prepare arm64
+
       - name: Build package
         env:
           npm_config_arch: arm64
           ELECTRON_BUILDER_PUBLISH: "never"
         run: npm run pack:linux-arm64
 
+      - name: Verify packaged node-pty Linux runtime
+        run: bash scripts/ensure-node-pty-linux.sh verify arm64
+
       - name: Upload artifacts
         uses: actions/upload-artifact@v4
         with:

.gitignore

@@ -35,8 +35,11 @@ coverage
 *.sln
 *.sw?
 
-# Claude Code local settings
-/.claude/settings.local.json
+# Claude Code
+/.claude/
+
+# Codex
+/.codex/
 /CLAUDE.md
 
 # AI / Superpowers generated docs (local only)

App.tsx

@@ -17,6 +17,7 @@ import { resolveHostAuth } from './domain/sshAuth';
 import { applySyncPayload } from './domain/syncPayload';
 import { getCredentialProtectionAvailability } from './infrastructure/services/credentialProtection';
 import { netcattyBridge } from './infrastructure/services/netcattyBridge';
+import { localStorageAdapter } from './infrastructure/persistence/localStorageAdapter';
 import { TopTabs } from './components/TopTabs';
 import { Button } from './components/ui/button';
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from './components/ui/dialog';
@@ -27,6 +28,7 @@ import { VaultView, VaultSection } from './components/VaultView';
 import { KeyboardInteractiveModal, KeyboardInteractiveRequest } from './components/KeyboardInteractiveModal';
 import { PassphraseModal, PassphraseRequest } from './components/PassphraseModal';
 import { cn } from './lib/utils';
+import { classifyLocalShellType } from './lib/localShell';
 import { ConnectionLog, Host, HostProtocol, SerialConfig, TerminalTheme } from './types';
 import { LogView as LogViewType } from './application/state/useSessionState';
 import type { SftpView as SftpViewComponent } from './components/SftpView';
@@ -184,6 +186,7 @@ function App({ settings }: { settings: SettingsState }) {
     sftpAutoSync,
     sftpShowHiddenFiles,
     sftpUseCompressedUpload,
+    sftpAutoOpenSidebar,
     editorWordWrap,
     setEditorWordWrap,
     sessionLogsEnabled,
@@ -292,10 +295,12 @@ function App({ settings }: { settings: SettingsState }) {
     snippetPackages,
     portForwardingRules: portForwardingRulesForSync,
     knownHosts,
+    settingsVersion: settings.settingsVersion,
     onApplyPayload: (payload) => {
       applySyncPayload(payload, {
         importVaultData: importDataFromString,
         importPortForwardingRules,
+        onSettingsApplied: settings.rehydrateAllFromStorage,
       });
     },
   });
@@ -320,6 +325,8 @@ function App({ settings }: { settings: SettingsState }) {
   useEffect(() => {
     // Skip "update available" toast if auto-download has already started or completed
     if (updateState.autoDownloadStatus !== 'idle') return;
+    // Don't show automatic notification when auto-update is disabled
+    if (localStorageAdapter.readString('netcatty_auto_update_enabled_v1') === 'false') return;
     if (updateState.hasUpdate && updateState.latestRelease) {
       const version = updateState.latestRelease.version;
       toast.info(
@@ -651,6 +658,24 @@ function App({ settings }: { settings: SettingsState }) {
   const addConnectionLogRef = useRef(addConnectionLog);
   addConnectionLogRef.current = addConnectionLog;
 
+  const createLocalTerminalWithCurrentShell = useCallback(() => {
+    return createLocalTerminal({
+      shellType: classifyLocalShellType(terminalSettings.localShell, navigator.userAgent),
+    });
+  }, [createLocalTerminal, terminalSettings.localShell]);
+
+  const splitSessionWithCurrentShell = useCallback((sessionId: string, direction: 'horizontal' | 'vertical') => {
+    return splitSession(sessionId, direction, {
+      localShellType: classifyLocalShellType(terminalSettings.localShell, navigator.userAgent),
+    });
+  }, [splitSession, terminalSettings.localShell]);
+
+  const copySessionWithCurrentShell = useCallback((sessionId: string) => {
+    return copySession(sessionId, {
+      localShellType: classifyLocalShellType(terminalSettings.localShell, navigator.userAgent),
+    });
+  }, [copySession, terminalSettings.localShell]);
+
   // Shared hotkey action handler - used by both global handler and terminal callback
   const executeHotkeyAction = useCallback((action: string, e: KeyboardEvent) => {
     switch (action) {
@@ -722,7 +747,7 @@ function App({ settings }: { settings: SettingsState }) {
           localHostname: systemInfoRef.current.hostname,
           saved: false,
         });
-        createLocalTerminal();
+        createLocalTerminalWithCurrentShell();
         break;
       case 'openHosts':
         setActiveTabId('vault');
@@ -761,7 +786,7 @@ function App({ settings }: { settings: SettingsState }) {
         const activeWs = workspaces.find(w => w.id === currentId);
         if (activeSession && !activeSession.workspaceId) {
           // Standalone session - split it
-          splitSession(activeSession.id, 'horizontal');
+          splitSessionWithCurrentShell(activeSession.id, 'horizontal');
         } else if (activeWs) {
           // In a workspace - need to determine focused session
           // For now, we'll need the terminal to handle this via context menu
@@ -776,7 +801,7 @@ function App({ settings }: { settings: SettingsState }) {
         const activeWs = workspaces.find(w => w.id === currentId);
         if (activeSession && !activeSession.workspaceId) {
           // Standalone session - split it
-          splitSession(activeSession.id, 'vertical');
+          splitSessionWithCurrentShell(activeSession.id, 'vertical');
         } else if (activeWs) {
           // In a workspace - need to determine focused session
           if (IS_DEV) console.log('[Hotkey] Split vertical in workspace - use context menu on specific terminal');
@@ -816,7 +841,7 @@ function App({ settings }: { settings: SettingsState }) {
         break;
       }
     }
-  }, [orderedTabs, sessions, workspaces, setActiveTabId, closeSession, closeWorkspace, createLocalTerminal, splitSession, moveFocusInWorkspace, toggleBroadcast]);
+  }, [orderedTabs, sessions, workspaces, setActiveTabId, closeSession, closeWorkspace, createLocalTerminalWithCurrentShell, splitSessionWithCurrentShell, moveFocusInWorkspace, toggleBroadcast]);
 
   // Callback for terminal to invoke app-level hotkey actions
   const handleHotkeyAction = useCallback((action: string, e: KeyboardEvent) => {
@@ -962,7 +987,7 @@ function App({ settings }: { settings: SettingsState }) {
   // Wrapper to create local terminal with logging
   const handleCreateLocalTerminal = useCallback(() => {
     const { username, hostname } = systemInfoRef.current;
-    const sessionId = createLocalTerminal();
+    const sessionId = createLocalTerminalWithCurrentShell();
     addConnectionLog({
       sessionId,
       hostId: '',
@@ -975,7 +1000,7 @@ function App({ settings }: { settings: SettingsState }) {
       localHostname: hostname,
       saved: false,
     });
-  }, [addConnectionLog, createLocalTerminal]);
+  }, [addConnectionLog, createLocalTerminalWithCurrentShell]);
 
   // Wrapper to connect to host with logging
   const handleConnectToHost = useCallback((host: Host) => {
@@ -1062,31 +1087,12 @@ function App({ settings }: { settings: SettingsState }) {
       });
       if (IS_DEV) console.log('[handleTerminalDataCapture] Updated log with terminalData');
 
-      // Auto-save session log if enabled
-      if (sessionLogsEnabled && sessionLogsDir && data) {
-        import('./infrastructure/services/netcattyBridge').then(({ netcattyBridge }) => {
-          const bridge = netcattyBridge.get();
-          if (bridge?.autoSaveSessionLog) {
-            bridge.autoSaveSessionLog({
-              terminalData: data,
-              hostLabel: matchingLog.hostLabel,
-              hostname: matchingLog.hostname,
-              hostId: matchingLog.hostId,
-              startTime: matchingLog.startTime,
-              format: sessionLogsFormat,
-              directory: sessionLogsDir,
-            }).then(result => {
-              if (IS_DEV) console.log('[handleTerminalDataCapture] Auto-save result:', result);
-            }).catch(err => {
-              console.error('[handleTerminalDataCapture] Auto-save failed:', err);
-            });
-          }
-        });
-      }
+      // Auto-save is now handled by real-time streaming in the main process
+      // via sessionLogStreamManager. No renderer-side fallback needed.
     } else {
       if (IS_DEV) console.log('[handleTerminalDataCapture] No matching log found!');
     }
-  }, [sessions, connectionLogs, updateConnectionLog, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat]);
+  }, [sessions, connectionLogs, updateConnectionLog]);
 
   // Check if host has multiple protocols enabled
   const hasMultipleProtocols = useCallback((host: Host) => {
@@ -1217,7 +1223,7 @@ function App({ settings }: { settings: SettingsState }) {
         isMacClient={isMacClient}
         onCloseSession={closeSession}
         onRenameSession={startSessionRename}
-        onCopySession={copySession}
+        onCopySession={copySessionWithCurrentShell}
         onRenameWorkspace={startWorkspaceRename}
         onCloseWorkspace={closeWorkspace}
         onCloseLogView={closeLogView}
@@ -1311,7 +1317,7 @@ function App({ settings }: { settings: SettingsState }) {
           onSetDraggingSessionId={setDraggingSessionId}
           onToggleWorkspaceViewMode={toggleWorkspaceViewMode}
           onSetWorkspaceFocusedSession={setWorkspaceFocusedSession}
-          onSplitSession={splitSession}
+          onSplitSession={splitSessionWithCurrentShell}
           isBroadcastEnabled={isBroadcastEnabled}
           onToggleBroadcast={toggleBroadcast}
           updateHosts={updateHosts}
@@ -1319,8 +1325,12 @@ function App({ settings }: { settings: SettingsState }) {
           sftpAutoSync={sftpAutoSync}
           sftpShowHiddenFiles={sftpShowHiddenFiles}
           sftpUseCompressedUpload={sftpUseCompressedUpload}
+          sftpAutoOpenSidebar={sftpAutoOpenSidebar}
           editorWordWrap={editorWordWrap}
           setEditorWordWrap={setEditorWordWrap}
+          sessionLogsEnabled={sessionLogsEnabled}
+          sessionLogsDir={sessionLogsDir}
+          sessionLogsFormat={sessionLogsFormat}
         />
 
         {/* Log Views - readonly terminal replays */}

README.ja-JP.md

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

README.md

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

README.zh-CN.md

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

application/i18n/locales/en.ts

@@ -5,6 +5,9 @@ const en: Messages = {
   'common.save': 'Save',
   'common.cancel': 'Cancel',
   'common.close': 'Close',
+  'common.reset': 'Reset',
+  'common.zoomIn': 'Zoom in',
+  'common.zoomOut': 'Zoom out',
   'common.settings': 'Settings',
   'common.search': 'Search',
   'common.searchPlaceholder': 'Search...',
@@ -30,6 +33,7 @@ const en: Messages = {
   'common.back': 'Back',
   'common.apply': 'Apply',
   'common.use': 'Use',
+  'common.useGlobal': 'Use global',
   'common.saveChanges': 'Save Changes',
   'common.advanced': 'Advanced',
   'common.left': 'Left',
@@ -50,6 +54,7 @@ const en: Messages = {
   // Dialogs / prompts
   'confirm.deleteHost': 'Delete Host "{name}"?',
   'confirm.deleteIdentity': 'Delete Identity "{name}"?',
+  'confirm.removeProvider': 'Remove provider "{name}"?',
   'dialog.createWorkspace.title': 'Create Workspace',
   'dialog.renameWorkspace.title': 'Rename workspace',
   'dialog.renameSession.title': 'Rename session',
@@ -114,6 +119,8 @@ const en: Messages = {
   'settings.update.lastCheckedMinutesAgo': '{n} min ago',
   'settings.update.lastCheckedHoursAgo': '{n} hr ago',
   'settings.update.lastCheckedPrefix': 'Last checked: ',
+  'settings.update.autoUpdateEnabled': 'Automatic Updates',
+  'settings.update.autoUpdateEnabledDesc': 'Automatically check and download updates when available.',
 
   // Settings > Session Logs
   'settings.sessionLogs.title': 'Session Logs',
@@ -141,6 +148,8 @@ const en: Messages = {
   'settings.globalHotkey.reset': 'Reset to default',
   'settings.globalHotkey.closeToTray': 'Close to System Tray',
   'settings.globalHotkey.closeToTrayDesc': 'When enabled, closing the window will minimize to the system tray instead of quitting.',
+  'settings.globalHotkey.enabled': 'Enable Global Hotkey',
+  'settings.globalHotkey.enabledDesc': 'Register system-wide keyboard shortcuts. When disabled, all global hotkeys are unregistered.',
   'settings.globalHotkey.hint': 'Global hotkey works system-wide to quickly show or hide the window (Quake-style terminal).',
 
   // Tray Panel
@@ -265,6 +274,17 @@ const en: Messages = {
   'settings.terminal.behavior.bracketedPaste': 'Bracketed paste mode',
   'settings.terminal.behavior.bracketedPaste.desc':
     'Wrap pasted text with escape sequences so the shell can distinguish paste from typed input. Disable if you see ^[[200~ artifacts.',
+  'settings.terminal.behavior.osc52Clipboard': 'OSC-52 clipboard',
+  'settings.terminal.behavior.osc52Clipboard.desc':
+    'Allow remote programs (tmux, vim, etc.) to access the local clipboard via OSC-52 escape sequences.',
+  'settings.terminal.behavior.osc52Clipboard.off': 'Disabled',
+  'settings.terminal.behavior.osc52Clipboard.writeOnly': 'Write only',
+  'settings.terminal.behavior.osc52Clipboard.readWrite': 'Read & Write',
+  'settings.terminal.behavior.osc52Clipboard.prompt': 'Write + Prompt on Read',
+  'terminal.osc52.readPrompt.title': 'Clipboard Read Request',
+  'terminal.osc52.readPrompt.desc': 'A remote program is requesting to read your clipboard. Allow?',
+  'terminal.osc52.readPrompt.allow': 'Allow',
+  'terminal.osc52.readPrompt.deny': 'Deny',
   'settings.terminal.behavior.scrollOnInput': 'Scroll on input',
   'settings.terminal.behavior.scrollOnInput.desc': 'Scroll terminal to bottom when typing',
   'settings.terminal.behavior.scrollOnOutput': 'Scroll on output',
@@ -599,6 +619,7 @@ const en: Messages = {
   'sftp.transfers': 'Transfers',
   'sftp.transfers.active': '{count} active',
   'sftp.transfers.clearCompleted': 'Clear completed',
+  'sftp.transfers.calculatingTotal': 'Calculating total size...',
   'sftp.goUp': 'Go up',
   'sftp.goToTerminalCwd': 'Go to terminal directory',
   'sftp.encoding.label': 'Filename Encoding',
@@ -729,6 +750,13 @@ const en: Messages = {
   'settings.sftp.autoSync.desc': 'Automatically sync file changes back to the remote server when opening files with external applications',
   'settings.sftp.autoSync.enable': 'Enable auto-sync',
   'settings.sftp.autoSync.enableDesc': 'When you save a file in an external application, changes will be automatically uploaded to the remote server',
+
+  // Settings > SFTP Auto Open Sidebar
+  'settings.sftp.autoOpenSidebar': 'Auto-open sidebar on connect',
+  'settings.sftp.autoOpenSidebar.desc': 'Automatically open the SFTP file browser sidebar when connecting to a host',
+  'settings.sftp.autoOpenSidebar.enable': 'Enable auto-open sidebar',
+  'settings.sftp.autoOpenSidebar.enableDesc': 'The SFTP sidebar will open automatically when a terminal session connects to a remote host',
+
   'sftp.autoSync.success': 'File synced to remote: {fileName}',
   'sftp.autoSync.error': 'Failed to sync file: {error}',
 
@@ -816,6 +844,29 @@ const en: Messages = {
   'hostDetails.section.credentials': 'Credentials',
   'hostDetails.section.portCredentials': 'Port & Credentials',
   'hostDetails.section.appearance': 'Appearance',
+  'hostDetails.distro.title': 'Linux Distribution',
+  'hostDetails.distro.desc': 'Auto-detect on connect, or override the distro icon manually.',
+  'hostDetails.distro.mode': 'Source',
+  'hostDetails.distro.mode.auto': 'Auto-detect',
+  'hostDetails.distro.mode.manual': 'Manual override',
+  'hostDetails.distro.detectedLabel': 'Current',
+  'hostDetails.distro.manualLabel': 'Override',
+  'hostDetails.distro.pending': 'Detect after first connection',
+  'hostDetails.distro.unknown': 'Unknown',
+  'hostDetails.distro.option.linux': 'Generic Linux',
+  'hostDetails.distro.option.ubuntu': 'Ubuntu',
+  'hostDetails.distro.option.debian': 'Debian',
+  'hostDetails.distro.option.centos': 'CentOS',
+  'hostDetails.distro.option.rocky': 'Rocky Linux',
+  'hostDetails.distro.option.fedora': 'Fedora',
+  'hostDetails.distro.option.arch': 'Arch Linux',
+  'hostDetails.distro.option.alpine': 'Alpine',
+  'hostDetails.distro.option.amazon': 'Amazon Linux',
+  'hostDetails.distro.option.opensuse': 'openSUSE / SLES',
+  'hostDetails.distro.option.redhat': 'Red Hat / RHEL',
+  'hostDetails.distro.option.almalinux': 'AlmaLinux',
+  'hostDetails.distro.option.oracle': 'Oracle Linux',
+  'hostDetails.distro.option.kali': 'Kali Linux',
   'hostDetails.section.mosh': 'Mosh',
   'hostDetails.username.placeholder': 'Username',
   'hostDetails.password.placeholder': 'Password',
@@ -834,8 +885,8 @@ const en: Messages = {
   'hostDetails.certs.empty': 'No certificates available',
   'hostDetails.agentForwarding': 'Forward SSH Agent',
   'hostDetails.agentForwarding.desc': 'Allow remote server to use your local SSH keys (e.g., for git operations)',
-  'hostDetails.agentForwarding.agentNotRunning': 'SSH Agent is not running',
-  'hostDetails.agentForwarding.agentNotRunningHint': 'Enable OpenSSH Authentication Agent service in Windows Services (services.msc) for agent forwarding to work.',
+  'hostDetails.agentForwarding.agentNotRunning': 'SSH Agent is not available',
+  'hostDetails.agentForwarding.agentNotRunningHint': 'No SSH agent detected. Enable OpenSSH Authentication Agent in Windows Services, or use a compatible agent such as Bitwarden, 1Password, or gpg-agent.',
   'hostDetails.section.agentForwarding': 'SSH Agent',
   'hostDetails.section.legacyAlgorithms': 'Legacy Algorithms',
   'hostDetails.legacyAlgorithms': 'Allow Legacy Algorithms',
@@ -1032,6 +1083,7 @@ const en: Messages = {
   'terminal.progress.disconnected': 'Disconnected',
   'terminal.progress.cancelling': 'Cancelling...',
   'terminal.progress.startOver': 'Start over',
+  'terminal.connection.dismissDisconnectedDialog': 'Dismiss disconnected notice',
   'terminal.connection.chainOf': 'Chain {current} of {total}',
   'terminal.connection.showLogs': 'Show logs',
   'terminal.connection.hideLogs': 'Hide logs',
@@ -1044,6 +1096,8 @@ const en: Messages = {
   'terminal.themeModal.tab.theme': 'Theme',
   'terminal.themeModal.tab.font': 'Font',
   'terminal.themeModal.tab.custom': 'Custom',
+  'terminal.themeModal.globalTheme': 'Global Theme',
+  'terminal.themeModal.globalFont': 'Global Font',
   'terminal.themeModal.fontSize': 'Font Size',
   'terminal.themeModal.livePreview': 'Live Preview',
   'terminal.themeModal.themeType': '{type} theme',
@@ -1402,6 +1456,7 @@ const en: Messages = {
   'snippets.renameDialog.error.duplicate': 'A package with this name already exists',
   'snippets.renameDialog.error.invalidChars': 'Package name can only contain letters, numbers, hyphens, and underscores',
 
+  'snippets.field.noAutoRun': 'Paste only (do not auto-execute)',
   // Snippet Shortkey
   'snippets.field.shortkey': 'Keyboard Shortcut',
   'snippets.shortkey.placeholder': 'Click to set shortcut',
@@ -1478,6 +1533,163 @@ const en: Messages = {
 
   // Text Editor
   'sftp.editor.wordWrap': 'Word Wrap',
+
+  // AI Settings
+  'ai.agentSettings': 'Agent Settings',
+  'ai.title': 'AI',
+  'ai.description': 'Configure AI providers, agents, and safety settings',
+  'ai.providers': 'Providers',
+  'ai.providers.empty': 'No providers configured. Add a provider to get started.',
+  'ai.providers.add': 'Add Provider',
+  'ai.providers.active': 'Active',
+  'ai.providers.apiKeyConfigured': 'API key configured',
+  'ai.providers.noApiKey': 'No API key',
+  'ai.providers.configure': 'Configure',
+  'ai.providers.remove': 'Remove',
+  'ai.providers.name': 'Display Name',
+  'ai.providers.name.placeholder': 'e.g. My Provider',
+  'ai.providers.apiKey': 'API Key',
+  'ai.providers.apiKey.placeholder': 'Enter API key',
+  'ai.providers.apiKey.decrypting': 'Decrypting...',
+  'ai.providers.baseUrl': 'Base URL',
+  'ai.providers.skipTLSVerify': 'Skip TLS certificate verification (for self-signed certs)',
+  'ai.providers.defaultModel': 'Default Model',
+  'ai.providers.defaultModel.placeholder': 'e.g. gpt-4o, claude-sonnet-4-20250514',
+  'ai.providers.refreshModels': 'Refresh models',
+  'ai.providers.searchModel': 'Search or type model ID...',
+  'ai.providers.filterModels': 'Filter models...',
+  'ai.providers.loadingModels': 'Loading models...',
+  'ai.providers.noMatchingModels': 'No matching models',
+  'ai.providers.clickToLoadModels': 'Click to load models',
+  'ai.providers.showingModels': 'Showing first 100 of {count} models. Type to filter.',
+
+  // AI Codex
+  'ai.codex': 'Codex',
+  'ai.codex.title': 'Codex CLI',
+  'ai.codex.description': 'Uses codex + codex-acp for ACP protocol streaming. Login with ChatGPT subscription here, or configure an OpenAI provider API key (passed as CODEX_API_KEY).',
+  'ai.codex.detecting': 'Detecting...',
+  'ai.codex.notFound': 'Not found',
+  'ai.codex.awaitingLogin': 'Awaiting login',
+  'ai.codex.connectedChatGPT': 'Connected via ChatGPT',
+  'ai.codex.connectedApiKey': 'Connected via API key',
+  'ai.codex.notConnected': 'Not connected',
+  'ai.codex.statusUnknown': 'Status unknown',
+  'ai.codex.path': 'Path:',
+  'ai.codex.notFoundHint': 'Could not find codex in PATH. Install it or specify the executable path below.',
+  'ai.codex.customPathPlaceholder': 'e.g. /usr/local/bin/codex',
+  'ai.codex.check': 'Check',
+  'ai.codex.openLogin': 'Open Login',
+  'ai.codex.logout': 'Logout',
+  'ai.codex.connectChatGPT': 'Connect ChatGPT',
+  'ai.codex.refreshStatus': 'Refresh Status',
+  'ai.codex.apiKeyHint': 'Enabled OpenAI provider API key detected. Codex ACP can also authenticate without ChatGPT login.',
+
+  // AI Claude Code
+  'ai.claude.title': 'Claude Code',
+  'ai.claude.description': "Anthropic's agentic coding assistant. Uses claude-agent-acp for ACP protocol streaming.",
+  'ai.claude.detecting': 'Detecting...',
+  'ai.claude.detected': 'Detected',
+  'ai.claude.notFound': 'Not found',
+  'ai.claude.path': 'Path:',
+  'ai.claude.notFoundHint': 'Could not find claude in PATH. Install it or specify the executable path below.',
+  'ai.claude.customPathPlaceholder': 'e.g. /usr/local/bin/claude',
+  'ai.claude.check': 'Check',
+
+  // AI Default Agent
+  'ai.defaultAgent': 'Default Agent',
+  'ai.defaultAgent.description': 'Agent to use when starting a new AI session',
+  'ai.defaultAgent.catty': 'Catty (Built-in)',
+
+  // AI Chat
+  'ai.chat.noProvider': 'No AI provider is configured. Go to **Settings → AI → Providers** to add and enable a provider.',
+  'ai.chat.toolDenied': 'Action was rejected by the user.',
+  'ai.chat.toolApproved': 'Approved',
+  'ai.chat.toolApprovalHint': 'Press Enter to approve, Escape to reject',
+  'ai.chat.approve': 'Approve',
+  'ai.chat.reject': 'Reject',
+  'ai.chat.toolLabel': 'Tool',
+  'ai.chat.targetLabel': 'Target',
+  'ai.chat.permissionRequired': 'Permission Required',
+  'ai.chat.permissionDescription': 'The AI agent wants to execute a tool call that requires your approval.',
+  'ai.chat.commandBlocked': 'This command is blocked by your security policy and cannot be executed.',
+  'ai.chat.recommendAllow': 'Allow',
+  'ai.chat.recommendConfirm': 'Confirm',
+  'ai.chat.recommendDeny': 'Deny',
+  'ai.chat.exportConversation': 'Export conversation',
+  'ai.chat.exportAs': 'Export As',
+  'ai.chat.exportMarkdown': 'Markdown',
+  'ai.chat.exportJSON': 'JSON',
+  'ai.chat.exportPlainText': 'Plain Text',
+  'ai.chat.thinking': 'Thinking',
+  'ai.chat.thoughtFor': 'Thought for {duration}',
+  'ai.chat.thought': 'Thought',
+  'ai.chat.agents': 'Agents',
+  'ai.chat.detectedOnMachine': 'Detected on this machine',
+  'ai.chat.rescan': 'Re-scan',
+  'ai.chat.permObserver': 'Observer',
+  'ai.chat.permConfirm': 'Confirm',
+  'ai.chat.permAuto': 'Auto',
+  'ai.chat.permObserverDesc': 'Read only',
+  'ai.chat.permConfirmDesc': 'Ask before actions',
+  'ai.chat.permAutoDesc': 'Execute freely',
+  'ai.chat.emptyHint': 'Ask about your servers, run commands, or get help with configurations.',
+  'ai.chat.placeholder': 'Message {agent} — @ to include context, / for commands',
+  'ai.chat.placeholderDefault': 'Message Catty Agent...',
+  'ai.chat.noModel': 'No model',
+  'ai.chat.recent': 'Recent',
+  'ai.chat.viewAll': 'View All',
+  'ai.chat.untitled': 'Untitled',
+  'ai.chat.justNow': 'Just now',
+  'ai.chat.minutesAgo': '{n}m ago',
+  'ai.chat.hoursAgo': '{n}h ago',
+  'ai.chat.daysAgo': '{n}d ago',
+  'ai.chat.newChat': 'New Chat',
+  'ai.chat.allSessions': 'All Sessions',
+  'ai.chat.noSessions': 'No previous sessions',
+  'ai.chat.retryHint': 'You can retry by sending your message again.',
+  'ai.chat.approvalTimeout': 'Tool approval timed out after 5 minutes. You can retry by sending your message again.',
+  'ai.chat.menuHosts': 'Hosts',
+  'ai.chat.menuContext': 'Context',
+  'ai.chat.menuFiles': 'Files',
+  'ai.chat.menuImage': 'Image',
+  'ai.chat.menuMentionHost': 'Mention Host',
+
+  // AI Error
+  'ai.codex.bridgeError': 'Codex main-process handlers are not loaded yet. Fully restart Netcatty, or restart the Electron dev process, then try again.',
+
+  // AI Web Search
+  'ai.webSearch.title': 'Web Search',
+  'ai.webSearch.enable': 'Enable Web Search',
+  'ai.webSearch.enable.description': 'Allow the AI agent to search the web for current information.',
+  'ai.webSearch.provider': 'Search Provider',
+  'ai.webSearch.provider.description': 'Choose a web search API provider.',
+  'ai.webSearch.apiKey': 'API Key',
+  'ai.webSearch.apiKey.description': 'API key for the selected search provider.',
+  'ai.webSearch.apiKey.placeholder': 'Enter API key...',
+  'ai.webSearch.apiHost': 'API Host',
+  'ai.webSearch.apiHost.description': 'Custom API endpoint. Leave default unless you use a proxy.',
+  'ai.webSearch.apiHost.searxngDescription': 'URL of your SearXNG instance (required).',
+  'ai.webSearch.maxResults': 'Max Results',
+  'ai.webSearch.maxResults.description': 'Maximum number of search results to return (1-20).',
+
+  // AI Safety Settings
+  'ai.safety.title': 'Safety',
+  'ai.safety.permissionMode': 'Permission Mode',
+  'ai.safety.permissionMode.description': 'Controls how the AI interacts with your terminals. Observer mode blocks all write operations via MCP Server, enforced for both built-in and ACP agents. Confirm mode is advisory for ACP agents (they control their own tool approval flow).',
+  'ai.safety.permissionMode.observer': 'Observer - Read only, no actions',
+  'ai.safety.permissionMode.confirm': 'Confirm - Ask before actions',
+  'ai.safety.permissionMode.autonomous': 'Autonomous - Execute freely',
+  'ai.safety.commandTimeout': 'Command Timeout',
+  'ai.safety.commandTimeout.description': 'Maximum seconds a command can run before being terminated. Applies to both built-in and ACP agents.',
+  'ai.safety.commandTimeout.unit': 'sec',
+  'ai.safety.maxIterations': 'Max Iterations',
+  'ai.safety.maxIterations.description': 'Maximum number of AI tool-use loops to prevent runaway execution. ACP agents may have their own internal iteration limits that take precedence.',
+  'ai.safety.blocklist': 'Command Blocklist',
+  'ai.safety.blocklist.description': 'Regex patterns to block dangerous commands. Applies to both built-in and ACP agents via MCP Server.',
+  'ai.safety.blocklist.placeholder': 'Regex pattern...',
+  'ai.safety.blocklist.reset': 'Reset to defaults',
+  'ai.safety.blocklist.add': 'Add pattern',
+  'ai.safety.note': 'Command Blocklist, Command Timeout, and Observer mode are enforced at the MCP Server level, applying to all agent types. Confirm mode and Max Iterations are fully enforced for the built-in agent; ACP agents may have their own internal controls for these settings.',
 };
 
 export default en;

application/i18n/locales/zh-CN.ts

@@ -5,6 +5,9 @@ const zhCN: Messages = {
   'common.save': '保存',
   'common.cancel': '取消',
   'common.close': '关闭',
+  'common.reset': '重置',
+  'common.zoomIn': '放大',
+  'common.zoomOut': '缩小',
   'common.settings': '设置',
   'common.search': '搜索',
   'common.connect': '连接',
@@ -20,6 +23,7 @@ const zhCN: Messages = {
   'common.back': '返回',
   'common.apply': '应用',
   'common.use': '使用',
+  'common.useGlobal': '跟随全局',
   'common.left': '左侧',
   'common.right': '右侧',
   'common.more': '更多',
@@ -37,6 +41,7 @@ const zhCN: Messages = {
   // Dialogs / prompts
   'confirm.deleteHost': '删除主机 "{name}"？',
   'confirm.deleteIdentity': '删除身份 "{name}"？',
+  'confirm.removeProvider': '移除提供商 "{name}"？',
   'dialog.renameWorkspace.title': '重命名工作区',
   'dialog.renameSession.title': '重命名会话',
   'field.name': '名称',
@@ -98,6 +103,8 @@ const zhCN: Messages = {
   'settings.update.lastCheckedMinutesAgo': '{n} 分钟前',
   'settings.update.lastCheckedHoursAgo': '{n} 小时前',
   'settings.update.lastCheckedPrefix': '上次检查：',
+  'settings.update.autoUpdateEnabled': '自动更新',
+  'settings.update.autoUpdateEnabledDesc': '有新版本时自动检查并下载更新。',
 
   // Settings > Session Logs
   'settings.sessionLogs.title': '会话日志',
@@ -125,6 +132,8 @@ const zhCN: Messages = {
   'settings.globalHotkey.reset': '恢复默认',
   'settings.globalHotkey.closeToTray': '关闭时最小化到托盘',
   'settings.globalHotkey.closeToTrayDesc': '启用后，关闭窗口将最小化到系统托盘而不是退出程序。',
+  'settings.globalHotkey.enabled': '启用全局快捷键',
+  'settings.globalHotkey.enabledDesc': '注册系统级键盘快捷键。禁用后将取消所有全局快捷键注册。',
   'settings.globalHotkey.hint': '全局快捷键在系统范围内工作，可快速显示或隐藏窗口（下拉式终端风格）。',
 
   // Tray Panel
@@ -437,6 +446,7 @@ const zhCN: Messages = {
   'sftp.transfers': '传输',
   'sftp.transfers.active': '{count} 个进行中',
   'sftp.transfers.clearCompleted': '清除已完成',
+  'sftp.transfers.calculatingTotal': '正在统计总大小...',
   'sftp.goUp': '上一级',
   'sftp.goToTerminalCwd': '定位到终端当前目录',
   'sftp.encoding.label': '文件名编码',
@@ -526,6 +536,29 @@ const zhCN: Messages = {
   'hostDetails.section.credentials': '凭据',
   'hostDetails.section.portCredentials': '端口与凭据',
   'hostDetails.section.appearance': '外观',
+  'hostDetails.distro.title': 'Linux 发行版',
+  'hostDetails.distro.desc': '可在连接后自动探测，也可以手动覆盖图标所用的发行版。',
+  'hostDetails.distro.mode': '来源',
+  'hostDetails.distro.mode.auto': '自动探测',
+  'hostDetails.distro.mode.manual': '手动覆盖',
+  'hostDetails.distro.detectedLabel': '当前值',
+  'hostDetails.distro.manualLabel': '手动指定',
+  'hostDetails.distro.pending': '首次连接后自动探测',
+  'hostDetails.distro.unknown': '未知',
+  'hostDetails.distro.option.linux': '通用 Linux',
+  'hostDetails.distro.option.ubuntu': 'Ubuntu',
+  'hostDetails.distro.option.debian': 'Debian',
+  'hostDetails.distro.option.centos': 'CentOS',
+  'hostDetails.distro.option.rocky': 'Rocky Linux',
+  'hostDetails.distro.option.fedora': 'Fedora',
+  'hostDetails.distro.option.arch': 'Arch Linux',
+  'hostDetails.distro.option.alpine': 'Alpine',
+  'hostDetails.distro.option.amazon': 'Amazon Linux',
+  'hostDetails.distro.option.opensuse': 'openSUSE / SLES',
+  'hostDetails.distro.option.redhat': 'Red Hat / RHEL',
+  'hostDetails.distro.option.almalinux': 'AlmaLinux',
+  'hostDetails.distro.option.oracle': 'Oracle Linux',
+  'hostDetails.distro.option.kali': 'Kali Linux',
   'hostDetails.section.mosh': 'Mosh',
   'hostDetails.username.placeholder': '用户名',
   'hostDetails.password.placeholder': '密码',
@@ -544,8 +577,8 @@ const zhCN: Messages = {
   'hostDetails.certs.empty': '暂无证书',
   'hostDetails.agentForwarding': '转发 SSH 密钥',
   'hostDetails.agentForwarding.desc': '允许远程服务器使用本地 SSH 密钥（例如用于 git 操作）',
-  'hostDetails.agentForwarding.agentNotRunning': 'SSH Agent 未运行',
-  'hostDetails.agentForwarding.agentNotRunningHint': '请在 Windows 服务管理器 (services.msc) 中启用 OpenSSH Authentication Agent 服务。',
+  'hostDetails.agentForwarding.agentNotRunning': 'SSH Agent 不可用',
+  'hostDetails.agentForwarding.agentNotRunningHint': '未检测到 SSH Agent。请启用 Windows OpenSSH Authentication Agent 服务，或使用兼容的 Agent（如 Bitwarden、1Password、gpg-agent）。',
   'hostDetails.section.agentForwarding': 'SSH 代理',
   'hostDetails.section.legacyAlgorithms': '旧版算法',
   'hostDetails.legacyAlgorithms': '允许旧版算法',
@@ -714,6 +747,7 @@ const zhCN: Messages = {
   'terminal.progress.disconnected': '已断开',
   'terminal.progress.cancelling': '正在取消...',
   'terminal.progress.startOver': '重新开始',
+  'terminal.connection.dismissDisconnectedDialog': '关闭断连提示',
   'terminal.connection.chainOf': 'Chain {current} / {total}',
   'terminal.connection.showLogs': '显示日志',
   'terminal.connection.hideLogs': '隐藏日志',
@@ -726,6 +760,8 @@ const zhCN: Messages = {
   'terminal.themeModal.tab.theme': '主题',
   'terminal.themeModal.tab.font': '字体',
   'terminal.themeModal.tab.custom': '自定义',
+  'terminal.themeModal.globalTheme': '全局主题',
+  'terminal.themeModal.globalFont': '全局字体',
   'terminal.themeModal.fontSize': '字体大小',
   'terminal.themeModal.livePreview': '实时预览',
   'terminal.themeModal.themeType': '{type} 主题',
@@ -1055,6 +1091,13 @@ const zhCN: Messages = {
   'settings.sftp.autoSync.desc': '使用外部应用程序打开文件时，自动将文件更改同步回远程服务器',
   'settings.sftp.autoSync.enable': '启用自动同步',
   'settings.sftp.autoSync.enableDesc': '在外部应用程序中保存文件时，更改将自动上传到远程服务器',
+
+  // Settings > SFTP 自动打开侧栏
+  'settings.sftp.autoOpenSidebar': '连接时自动打开侧栏',
+  'settings.sftp.autoOpenSidebar.desc': '连接到主机时自动打开 SFTP 文件浏览器侧栏',
+  'settings.sftp.autoOpenSidebar.enable': '启用自动打开侧栏',
+  'settings.sftp.autoOpenSidebar.enableDesc': '当终端会话连接到远程主机时，SFTP 侧栏将自动打开',
+
   'sftp.autoSync.success': '文件已同步到远程：{fileName}',
   'sftp.autoSync.error': '同步文件失败：{error}',
 
@@ -1141,6 +1184,17 @@ const zhCN: Messages = {
   'settings.terminal.behavior.bracketedPaste': '括号粘贴模式',
   'settings.terminal.behavior.bracketedPaste.desc':
     '粘贴文本时使用转义序列包裹，以便终端区分粘贴和键入。如果出现 ^[[200~ 字样请关闭此选项。',
+  'settings.terminal.behavior.osc52Clipboard': 'OSC-52 剪贴板',
+  'settings.terminal.behavior.osc52Clipboard.desc':
+    '允许远程程序（tmux、vim 等）通过 OSC-52 转义序列访问本地剪贴板。',
+  'settings.terminal.behavior.osc52Clipboard.off': '关闭',
+  'settings.terminal.behavior.osc52Clipboard.writeOnly': '仅写入',
+  'settings.terminal.behavior.osc52Clipboard.readWrite': '读写',
+  'settings.terminal.behavior.osc52Clipboard.prompt': '写入 + 读取时询问',
+  'terminal.osc52.readPrompt.title': '剪贴板读取请求',
+  'terminal.osc52.readPrompt.desc': '远程程序正在请求读取您的剪贴板，是否允许？',
+  'terminal.osc52.readPrompt.allow': '允许',
+  'terminal.osc52.readPrompt.deny': '拒绝',
   'settings.terminal.behavior.scrollOnInput': '输入时自动滚动',
   'settings.terminal.behavior.scrollOnInput.desc': '输入时将终端滚动到底部',
   'settings.terminal.behavior.scrollOnOutput': '输出时自动滚动',
@@ -1417,6 +1471,7 @@ const zhCN: Messages = {
   'snippets.renameDialog.error.duplicate': '已存在同名的代码包',
   'snippets.renameDialog.error.invalidChars': '代码包名称只能包含字母、数字、连字符和下划线',
 
+  'snippets.field.noAutoRun': '仅粘贴（不自动执行）',
   // Snippet Shortkey
   'snippets.field.shortkey': '快捷键',
   'snippets.shortkey.placeholder': '点击设置快捷键',
@@ -1493,6 +1548,163 @@ const zhCN: Messages = {
 
   // Text Editor
   'sftp.editor.wordWrap': '自动换行',
+
+  // AI Settings
+  'ai.agentSettings': 'Agent 设置',
+  'ai.title': 'AI',
+  'ai.description': '配置 AI 提供商、Agent 和安全设置',
+  'ai.providers': '提供商',
+  'ai.providers.empty': '尚未配置提供商。添加一个提供商以开始使用。',
+  'ai.providers.add': '添加提供商',
+  'ai.providers.active': '活跃',
+  'ai.providers.apiKeyConfigured': 'API Key 已配置',
+  'ai.providers.noApiKey': '未设置 API Key',
+  'ai.providers.configure': '配置',
+  'ai.providers.remove': '移除',
+  'ai.providers.name': '显示名称',
+  'ai.providers.name.placeholder': '例如 我的提供商',
+  'ai.providers.apiKey': 'API Key',
+  'ai.providers.apiKey.placeholder': '输入 API Key',
+  'ai.providers.apiKey.decrypting': '解密中...',
+  'ai.providers.baseUrl': 'Base URL',
+  'ai.providers.skipTLSVerify': '跳过 TLS 证书验证（用于自签名证书）',
+  'ai.providers.defaultModel': '默认模型',
+  'ai.providers.defaultModel.placeholder': '例如 gpt-4o, claude-sonnet-4-20250514',
+  'ai.providers.refreshModels': '刷新模型列表',
+  'ai.providers.searchModel': '搜索或输入模型 ID...',
+  'ai.providers.filterModels': '筛选模型...',
+  'ai.providers.loadingModels': '加载模型中...',
+  'ai.providers.noMatchingModels': '没有匹配的模型',
+  'ai.providers.clickToLoadModels': '点击加载模型',
+  'ai.providers.showingModels': '显示前 100 个，共 {count} 个模型。输入以筛选。',
+
+  // AI Codex
+  'ai.codex': 'Codex',
+  'ai.codex.title': 'Codex CLI',
+  'ai.codex.description': '使用 codex + codex-acp 进行 ACP 协议流式传输。在此通过 ChatGPT 订阅登录，或配置 OpenAI 提供商的 API Key（将作为 CODEX_API_KEY 传递）。',
+  'ai.codex.detecting': '检测中...',
+  'ai.codex.notFound': '未找到',
+  'ai.codex.awaitingLogin': '等待登录',
+  'ai.codex.connectedChatGPT': '已通过 ChatGPT 连接',
+  'ai.codex.connectedApiKey': '已通过 API Key 连接',
+  'ai.codex.notConnected': '未连接',
+  'ai.codex.statusUnknown': '状态未知',
+  'ai.codex.path': '路径：',
+  'ai.codex.notFoundHint': '在 PATH 中未找到 codex。请安装或在下方指定可执行文件路径。',
+  'ai.codex.customPathPlaceholder': '例如 /usr/local/bin/codex',
+  'ai.codex.check': '检查',
+  'ai.codex.openLogin': '打开登录',
+  'ai.codex.logout': '退出登录',
+  'ai.codex.connectChatGPT': '连接 ChatGPT',
+  'ai.codex.refreshStatus': '刷新状态',
+  'ai.codex.apiKeyHint': '检测到已启用的 OpenAI 提供商 API Key。Codex ACP 也可以无需 ChatGPT 登录进行认证。',
+
+  // AI Claude Code
+  'ai.claude.title': 'Claude Code',
+  'ai.claude.description': 'Anthropic 的智能编程助手。使用 claude-agent-acp 进行 ACP 协议流式传输。',
+  'ai.claude.detecting': '检测中...',
+  'ai.claude.detected': '已检测到',
+  'ai.claude.notFound': '未找到',
+  'ai.claude.path': '路径：',
+  'ai.claude.notFoundHint': '在 PATH 中未找到 claude。请安装或在下方指定可执行文件路径。',
+  'ai.claude.customPathPlaceholder': '例如 /usr/local/bin/claude',
+  'ai.claude.check': '检查',
+
+  // AI Default Agent
+  'ai.defaultAgent': '默认 Agent',
+  'ai.defaultAgent.description': '创建新 AI 会话时使用的 Agent',
+  'ai.defaultAgent.catty': 'Catty（内置）',
+
+  // AI Chat
+  'ai.chat.noProvider': '尚未配置 AI 提供商。请前往 **设置 → AI → 提供商** 添加并启用一个提供商。',
+  'ai.chat.toolDenied': '操作已被用户拒绝。',
+  'ai.chat.toolApproved': '已批准',
+  'ai.chat.toolApprovalHint': '按回车批准，按 Esc 拒绝',
+  'ai.chat.approve': '批准',
+  'ai.chat.reject': '拒绝',
+  'ai.chat.toolLabel': '工具',
+  'ai.chat.targetLabel': '目标',
+  'ai.chat.permissionRequired': '需要权限',
+  'ai.chat.permissionDescription': 'AI Agent 希望执行一个需要你批准的工具调用。',
+  'ai.chat.commandBlocked': '此命令已被安全策略拦截，无法执行。',
+  'ai.chat.recommendAllow': '允许',
+  'ai.chat.recommendConfirm': '确认',
+  'ai.chat.recommendDeny': '拒绝',
+  'ai.chat.exportConversation': '导出对话',
+  'ai.chat.exportAs': '导出为',
+  'ai.chat.exportMarkdown': 'Markdown',
+  'ai.chat.exportJSON': 'JSON',
+  'ai.chat.exportPlainText': '纯文本',
+  'ai.chat.thinking': '思考中',
+  'ai.chat.thoughtFor': '思考了 {duration}',
+  'ai.chat.thought': '思考',
+  'ai.chat.agents': 'Agents',
+  'ai.chat.detectedOnMachine': '在本机检测到',
+  'ai.chat.rescan': '重新扫描',
+  'ai.chat.permObserver': '观察',
+  'ai.chat.permConfirm': '确认',
+  'ai.chat.permAuto': '自主',
+  'ai.chat.permObserverDesc': '只读模式',
+  'ai.chat.permConfirmDesc': '操作前询问',
+  'ai.chat.permAutoDesc': '自由执行',
+  'ai.chat.emptyHint': '询问服务器相关问题、执行命令或获取配置帮助。',
+  'ai.chat.placeholder': '向 {agent} 发送消息 — @ 引用上下文，/ 使用命令',
+  'ai.chat.placeholderDefault': '向 Catty Agent 发送消息...',
+  'ai.chat.noModel': '未选择模型',
+  'ai.chat.recent': '最近',
+  'ai.chat.viewAll': '查看全部',
+  'ai.chat.untitled': '无标题',
+  'ai.chat.justNow': '刚刚',
+  'ai.chat.minutesAgo': '{n}分钟前',
+  'ai.chat.hoursAgo': '{n}小时前',
+  'ai.chat.daysAgo': '{n}天前',
+  'ai.chat.newChat': '新对话',
+  'ai.chat.allSessions': '所有会话',
+  'ai.chat.noSessions': '没有历史会话',
+  'ai.chat.retryHint': '你可以重新发送消息来重试。',
+  'ai.chat.approvalTimeout': '工具审批已超时（5 分钟）。你可以重新发送消息来重试。',
+  'ai.chat.menuHosts': '主机',
+  'ai.chat.menuContext': '上下文',
+  'ai.chat.menuFiles': '文件',
+  'ai.chat.menuImage': '图片',
+  'ai.chat.menuMentionHost': '提及主机',
+
+  // AI Error
+  'ai.codex.bridgeError': 'Codex 主进程处理器尚未加载。请完全重启 Netcatty 或重启 Electron 开发进程，然后重试。',
+
+  // AI Web Search
+  'ai.webSearch.title': '网络搜索',
+  'ai.webSearch.enable': '启用网络搜索',
+  'ai.webSearch.enable.description': '允许 AI 代理搜索互联网获取最新信息。',
+  'ai.webSearch.provider': '搜索供应商',
+  'ai.webSearch.provider.description': '选择一个网络搜索 API 供应商。',
+  'ai.webSearch.apiKey': 'API 密钥',
+  'ai.webSearch.apiKey.description': '所选搜索供应商的 API 密钥。',
+  'ai.webSearch.apiKey.placeholder': '输入 API 密钥...',
+  'ai.webSearch.apiHost': 'API 地址',
+  'ai.webSearch.apiHost.description': '自定义 API 端点。除非使用代理，否则保持默认值。',
+  'ai.webSearch.apiHost.searxngDescription': 'SearXNG 实例的 URL（必填）。',
+  'ai.webSearch.maxResults': '最大结果数',
+  'ai.webSearch.maxResults.description': '搜索返回的最大结果数（1-20）。',
+
+  // AI Safety Settings
+  'ai.safety.title': '安全',
+  'ai.safety.permissionMode': '权限模式',
+  'ai.safety.permissionMode.description': '控制 AI 与终端的交互方式。观察者模式通过 MCP Server 阻止所有写操作，对内置和 ACP Agent 均生效。确认模式对 ACP Agent 仅为建议性（ACP Agent 有自己的工具审批流程）。',
+  'ai.safety.permissionMode.observer': '观察者 - 只读，禁止操作',
+  'ai.safety.permissionMode.confirm': '确认 - 操作前询问',
+  'ai.safety.permissionMode.autonomous': '自主 - 自由执行',
+  'ai.safety.commandTimeout': '命令超时',
+  'ai.safety.commandTimeout.description': '命令执行的最大秒数，超时将被终止。对内置和 ACP Agent 均生效。',
+  'ai.safety.commandTimeout.unit': '秒',
+  'ai.safety.maxIterations': '最大迭代次数',
+  'ai.safety.maxIterations.description': '防止 AI 失控执行的最大工具调用循环次数。ACP Agent 可能有自己的内部迭代限制，以其为准。',
+  'ai.safety.blocklist': '命令黑名单',
+  'ai.safety.blocklist.description': '用于拦截危险命令的正则表达式。通过 MCP Server 对内置和 ACP Agent 均生效。',
+  'ai.safety.blocklist.placeholder': '正则表达式...',
+  'ai.safety.blocklist.reset': '恢复默认',
+  'ai.safety.blocklist.add': '添加规则',
+  'ai.safety.note': '命令黑名单、命令超时和观察者模式通过 MCP Server 层强制执行，对所有 Agent 类型生效。确认模式和最大迭代次数对内置 Agent 完全强制执行；ACP Agent 可能有自己的内部控制。',
 };
 
 export default zhCN;

application/state/customThemeStore.ts

@@ -30,7 +30,8 @@ class CustomThemeStore {
         this.setupCrossWindowSync();
     }
 
-    private loadFromStorage = () => {
+    /** Reload themes from localStorage. Called internally and after sync apply. */
+    loadFromStorage = () => {
         try {
             const parsed = localStorageAdapter.read<TerminalTheme[]>(STORAGE_KEY_CUSTOM_THEMES);
             if (Array.isArray(parsed)) {
@@ -39,7 +40,7 @@ class CustomThemeStore {
         } catch {
             // ignore corrupt data
         }
-        this.cachedAllThemes = null; // invalidate cache
+        this.notify();
     };
 
     private saveToStorage = () => {

application/state/useAIState.ts

@@ -0,0 +1,611 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
+import {
+  STORAGE_KEY_AI_PROVIDERS,
+  STORAGE_KEY_AI_ACTIVE_PROVIDER,
+  STORAGE_KEY_AI_ACTIVE_MODEL,
+  STORAGE_KEY_AI_PERMISSION_MODE,
+  STORAGE_KEY_AI_HOST_PERMISSIONS,
+  STORAGE_KEY_AI_EXTERNAL_AGENTS,
+  STORAGE_KEY_AI_DEFAULT_AGENT,
+  STORAGE_KEY_AI_COMMAND_BLOCKLIST,
+  STORAGE_KEY_AI_COMMAND_TIMEOUT,
+  STORAGE_KEY_AI_MAX_ITERATIONS,
+  STORAGE_KEY_AI_SESSIONS,
+  STORAGE_KEY_AI_AGENT_MODEL_MAP,
+  STORAGE_KEY_AI_WEB_SEARCH,
+} from '../../infrastructure/config/storageKeys';
+import type {
+  AISession,
+  AIPermissionMode,
+  ProviderConfig,
+  HostAIPermission,
+  ExternalAgentConfig,
+  ChatMessage,
+  AISessionScope,
+  WebSearchConfig,
+} from '../../infrastructure/ai/types';
+import { DEFAULT_COMMAND_BLOCKLIST } from '../../infrastructure/ai/types';
+
+/** Typed accessor for the Electron IPC bridge exposed on `window.netcatty`. */
+function getAIBridge() {
+  return (window as unknown as { netcatty?: Record<string, (...args: unknown[]) => unknown> }).netcatty;
+}
+
+function cleanupAcpSessions(sessionIds: string[]) {
+  const bridge = getAIBridge();
+  if (!bridge?.aiAcpCleanup || sessionIds.length === 0) return;
+  for (const sessionId of sessionIds) {
+    void bridge.aiAcpCleanup(sessionId).catch(() => {});
+  }
+}
+
+
+/** Maximum number of sessions to keep in localStorage. */
+const MAX_STORED_SESSIONS = 50;
+/** Maximum number of messages per session when persisting to localStorage. */
+const MAX_SESSION_MESSAGES = 200;
+
+/**
+ * Prune sessions before writing to localStorage to prevent hitting the
+ * ~5-10 MB storage quota. Only affects what is persisted — the in-memory
+ * state retains all messages until the session is reloaded.
+ *
+ * - Keeps only the MAX_STORED_SESSIONS most-recently-updated sessions.
+ * - Trims each session's messages to the last MAX_SESSION_MESSAGES.
+ */
+function pruneSessionsForStorage(sessions: AISession[]): AISession[] {
+  // Sort by updatedAt descending so we keep the newest
+  const sorted = [...sessions].sort((a, b) => b.updatedAt - a.updatedAt);
+  const limited = sorted.slice(0, MAX_STORED_SESSIONS);
+  return limited.map(s => {
+    if (s.messages.length > MAX_SESSION_MESSAGES) {
+      return { ...s, messages: s.messages.slice(-MAX_SESSION_MESSAGES) };
+    }
+    return s;
+  });
+}
+
+export function useAIState() {
+  // ── Provider Config ──
+  const [providers, setProvidersRaw] = useState<ProviderConfig[]>(() =>
+    localStorageAdapter.read<ProviderConfig[]>(STORAGE_KEY_AI_PROVIDERS) ?? []
+  );
+  const [activeProviderId, setActiveProviderIdRaw] = useState<string>(() =>
+    localStorageAdapter.readString(STORAGE_KEY_AI_ACTIVE_PROVIDER) ?? ''
+  );
+  const [activeModelId, setActiveModelIdRaw] = useState<string>(() =>
+    localStorageAdapter.readString(STORAGE_KEY_AI_ACTIVE_MODEL) ?? ''
+  );
+
+  // ── Permission Model ──
+  const [globalPermissionMode, setGlobalPermissionModeRaw] = useState<AIPermissionMode>(() => {
+    const stored = localStorageAdapter.readString(STORAGE_KEY_AI_PERMISSION_MODE);
+    if (stored === 'observer' || stored === 'confirm' || stored === 'autonomous') return stored;
+    return 'confirm';
+  });
+  const [hostPermissions, setHostPermissionsRaw] = useState<HostAIPermission[]>(() =>
+    localStorageAdapter.read<HostAIPermission[]>(STORAGE_KEY_AI_HOST_PERMISSIONS) ?? []
+  );
+
+  // ── External Agents ──
+  const [externalAgents, setExternalAgentsRaw] = useState<ExternalAgentConfig[]>(() =>
+    localStorageAdapter.read<ExternalAgentConfig[]>(STORAGE_KEY_AI_EXTERNAL_AGENTS) ?? []
+  );
+  const [defaultAgentId, setDefaultAgentIdRaw] = useState<string>(() =>
+    localStorageAdapter.readString(STORAGE_KEY_AI_DEFAULT_AGENT) ?? 'catty'
+  );
+
+  // ── Safety Settings ──
+  const [commandBlocklist, setCommandBlocklistRaw] = useState<string[]>(() =>
+    localStorageAdapter.read<string[]>(STORAGE_KEY_AI_COMMAND_BLOCKLIST) ?? [...DEFAULT_COMMAND_BLOCKLIST]
+  );
+  const [commandTimeout, setCommandTimeoutRaw] = useState<number>(() =>
+    localStorageAdapter.readNumber(STORAGE_KEY_AI_COMMAND_TIMEOUT) ?? 60
+  );
+  const [maxIterations, setMaxIterationsRaw] = useState<number>(() =>
+    localStorageAdapter.readNumber(STORAGE_KEY_AI_MAX_ITERATIONS) ?? 20
+  );
+
+  // ── Sessions ──
+  const [sessions, setSessionsRaw] = useState<AISession[]>(() =>
+    localStorageAdapter.read<AISession[]>(STORAGE_KEY_AI_SESSIONS) ?? []
+  );
+  // Ref that always holds the latest sessions for use inside debounced callbacks
+  const sessionsRef = useRef(sessions);
+  useEffect(() => {
+    sessionsRef.current = sessions;
+  }, [sessions]);
+  // Per-scope active session: keyed by `${scopeType}:${scopeTargetId}`
+  const [activeSessionIdMap, setActiveSessionIdMapRaw] = useState<Record<string, string | null>>({});
+
+  // Per-agent model selection: remembers last selected model per agent
+  const [agentModelMap, setAgentModelMapRaw] = useState<Record<string, string>>(() =>
+    localStorageAdapter.read<Record<string, string>>(STORAGE_KEY_AI_AGENT_MODEL_MAP) ?? {}
+  );
+
+  // ── Web Search Config ──
+  const [webSearchConfig, setWebSearchConfigRaw] = useState<WebSearchConfig | null>(() =>
+    localStorageAdapter.read<WebSearchConfig>(STORAGE_KEY_AI_WEB_SEARCH) ?? null
+  );
+
+  const setActiveSessionId = useCallback((scopeKey: string, id: string | null) => {
+    setActiveSessionIdMapRaw(prev => ({ ...prev, [scopeKey]: id }));
+  }, []);
+
+  const setAgentModel = useCallback((agentId: string, modelId: string) => {
+    setAgentModelMapRaw(prev => {
+      const next = { ...prev, [agentId]: modelId };
+      localStorageAdapter.write(STORAGE_KEY_AI_AGENT_MODEL_MAP, next);
+      return next;
+    });
+  }, []);
+
+  const setWebSearchConfig = useCallback((config: WebSearchConfig | null) => {
+    setWebSearchConfigRaw(config);
+    if (config) {
+      localStorageAdapter.write(STORAGE_KEY_AI_WEB_SEARCH, config);
+    } else {
+      localStorageAdapter.remove(STORAGE_KEY_AI_WEB_SEARCH);
+    }
+  }, []);
+
+  // ── Persist helpers ──
+  const setProviders = useCallback((value: ProviderConfig[] | ((prev: ProviderConfig[]) => ProviderConfig[])) => {
+    setProvidersRaw(prev => {
+      const next = typeof value === 'function' ? value(prev) : value;
+      localStorageAdapter.write(STORAGE_KEY_AI_PROVIDERS, next);
+      return next;
+    });
+  }, []);
+
+  const setActiveProviderId = useCallback((id: string) => {
+    setActiveProviderIdRaw(id);
+    localStorageAdapter.writeString(STORAGE_KEY_AI_ACTIVE_PROVIDER, id);
+  }, []);
+
+  const setActiveModelId = useCallback((id: string) => {
+    setActiveModelIdRaw(id);
+    localStorageAdapter.writeString(STORAGE_KEY_AI_ACTIVE_MODEL, id);
+  }, []);
+
+  const setGlobalPermissionMode = useCallback((mode: AIPermissionMode) => {
+    setGlobalPermissionModeRaw(mode);
+    localStorageAdapter.writeString(STORAGE_KEY_AI_PERMISSION_MODE, mode);
+    // Sync to MCP Server bridge (observer mode blocks write operations)
+    const bridge = getAIBridge();
+    bridge?.aiMcpSetPermissionMode?.(mode);
+  }, []);
+
+  const setHostPermissions = useCallback((value: HostAIPermission[] | ((prev: HostAIPermission[]) => HostAIPermission[])) => {
+    setHostPermissionsRaw(prev => {
+      const next = typeof value === 'function' ? value(prev) : value;
+      localStorageAdapter.write(STORAGE_KEY_AI_HOST_PERMISSIONS, next);
+      return next;
+    });
+  }, []);
+
+  const setExternalAgents = useCallback((value: ExternalAgentConfig[] | ((prev: ExternalAgentConfig[]) => ExternalAgentConfig[])) => {
+    setExternalAgentsRaw(prev => {
+      const next = typeof value === 'function' ? value(prev) : value;
+      localStorageAdapter.write(STORAGE_KEY_AI_EXTERNAL_AGENTS, next);
+      return next;
+    });
+  }, []);
+
+  const setDefaultAgentId = useCallback((id: string) => {
+    setDefaultAgentIdRaw(id);
+    localStorageAdapter.writeString(STORAGE_KEY_AI_DEFAULT_AGENT, id);
+  }, []);
+
+  const setCommandBlocklist = useCallback((value: string[]) => {
+    setCommandBlocklistRaw(value);
+    localStorageAdapter.write(STORAGE_KEY_AI_COMMAND_BLOCKLIST, value);
+    // Sync to MCP Server bridge so ACP agents also respect the blocklist
+    const bridge = getAIBridge();
+    bridge?.aiMcpSetCommandBlocklist?.(value);
+  }, []);
+
+  const setCommandTimeout = useCallback((value: number) => {
+    setCommandTimeoutRaw(value);
+    localStorageAdapter.writeNumber(STORAGE_KEY_AI_COMMAND_TIMEOUT, value);
+    // Sync to MCP Server bridge
+    const bridge = getAIBridge();
+    bridge?.aiMcpSetCommandTimeout?.(value);
+  }, []);
+
+  const setMaxIterations = useCallback((value: number) => {
+    setMaxIterationsRaw(value);
+    localStorageAdapter.writeNumber(STORAGE_KEY_AI_MAX_ITERATIONS, value);
+    // Sync to MCP Server bridge (used by ACP agent path)
+    const bridge = getAIBridge();
+    bridge?.aiMcpSetMaxIterations?.(value);
+  }, []);
+
+  // ── Cross-window sync via storage events ──
+  // When the settings window updates localStorage, the main window picks up changes.
+  useEffect(() => {
+    const handleStorage = (e: StorageEvent) => {
+      try {
+        switch (e.key) {
+          case STORAGE_KEY_AI_PROVIDERS: {
+            const parsed = localStorageAdapter.read<ProviderConfig[]>(STORAGE_KEY_AI_PROVIDERS);
+            if (parsed != null && !Array.isArray(parsed)) {
+              console.warn('[useAIState] Cross-window sync: AI_PROVIDERS is not an array, skipping');
+              break;
+            }
+            setProvidersRaw(parsed ?? []);
+            break;
+          }
+          case STORAGE_KEY_AI_ACTIVE_PROVIDER:
+            setActiveProviderIdRaw(localStorageAdapter.readString(STORAGE_KEY_AI_ACTIVE_PROVIDER) ?? '');
+            break;
+          case STORAGE_KEY_AI_ACTIVE_MODEL:
+            setActiveModelIdRaw(localStorageAdapter.readString(STORAGE_KEY_AI_ACTIVE_MODEL) ?? '');
+            break;
+          case STORAGE_KEY_AI_PERMISSION_MODE: {
+            const mode = localStorageAdapter.readString(STORAGE_KEY_AI_PERMISSION_MODE);
+            if (mode === 'observer' || mode === 'confirm' || mode === 'autonomous') {
+              setGlobalPermissionModeRaw(mode);
+              getAIBridge()?.aiMcpSetPermissionMode?.(mode);
+            }
+            break;
+          }
+          case STORAGE_KEY_AI_EXTERNAL_AGENTS: {
+            const agents = localStorageAdapter.read<ExternalAgentConfig[]>(STORAGE_KEY_AI_EXTERNAL_AGENTS);
+            if (agents != null && !Array.isArray(agents)) {
+              console.warn('[useAIState] Cross-window sync: AI_EXTERNAL_AGENTS is not an array, skipping');
+              break;
+            }
+            setExternalAgentsRaw(agents ?? []);
+            break;
+          }
+          case STORAGE_KEY_AI_DEFAULT_AGENT:
+            setDefaultAgentIdRaw(localStorageAdapter.readString(STORAGE_KEY_AI_DEFAULT_AGENT) ?? 'catty');
+            break;
+          case STORAGE_KEY_AI_COMMAND_BLOCKLIST: {
+            const list = localStorageAdapter.read<string[]>(STORAGE_KEY_AI_COMMAND_BLOCKLIST);
+            if (list != null && !Array.isArray(list)) {
+              console.warn('[useAIState] Cross-window sync: AI_COMMAND_BLOCKLIST is not an array, skipping');
+              break;
+            }
+            const blocklist = list ?? [...DEFAULT_COMMAND_BLOCKLIST];
+            setCommandBlocklistRaw(blocklist);
+            getAIBridge()?.aiMcpSetCommandBlocklist?.(blocklist);
+            break;
+          }
+          case STORAGE_KEY_AI_COMMAND_TIMEOUT: {
+            const timeout = localStorageAdapter.readNumber(STORAGE_KEY_AI_COMMAND_TIMEOUT) ?? 60;
+            if (!Number.isFinite(timeout)) {
+              console.warn('[useAIState] Cross-window sync: AI_COMMAND_TIMEOUT is not a finite number, skipping');
+              break;
+            }
+            setCommandTimeoutRaw(timeout);
+            getAIBridge()?.aiMcpSetCommandTimeout?.(timeout);
+            break;
+          }
+          case STORAGE_KEY_AI_MAX_ITERATIONS: {
+            const iters = localStorageAdapter.readNumber(STORAGE_KEY_AI_MAX_ITERATIONS) ?? 20;
+            if (!Number.isFinite(iters)) {
+              console.warn('[useAIState] Cross-window sync: AI_MAX_ITERATIONS is not a finite number, skipping');
+              break;
+            }
+            setMaxIterationsRaw(iters);
+            getAIBridge()?.aiMcpSetMaxIterations?.(iters);
+            break;
+          }
+          case STORAGE_KEY_AI_HOST_PERMISSIONS: {
+            const perms = localStorageAdapter.read<HostAIPermission[]>(STORAGE_KEY_AI_HOST_PERMISSIONS);
+            if (perms != null && !Array.isArray(perms)) {
+              console.warn('[useAIState] Cross-window sync: AI_HOST_PERMISSIONS is not an array, skipping');
+              break;
+            }
+            setHostPermissionsRaw(perms ?? []);
+            break;
+          }
+          case STORAGE_KEY_AI_AGENT_MODEL_MAP:
+            setAgentModelMapRaw(localStorageAdapter.read<Record<string, string>>(STORAGE_KEY_AI_AGENT_MODEL_MAP) ?? {});
+            break;
+          case STORAGE_KEY_AI_WEB_SEARCH:
+            setWebSearchConfigRaw(localStorageAdapter.read<WebSearchConfig>(STORAGE_KEY_AI_WEB_SEARCH) ?? null);
+            break;
+        }
+      } catch (err) {
+        console.warn('[useAIState] Cross-window sync: failed to process storage event for key', e.key, err);
+      }
+    };
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
+
+  // ── Sync initial safety settings to MCP Server on mount ──
+  useEffect(() => {
+    const bridge = getAIBridge();
+    const initialBlocklist = localStorageAdapter.read<string[]>(STORAGE_KEY_AI_COMMAND_BLOCKLIST) ?? [...DEFAULT_COMMAND_BLOCKLIST];
+    bridge?.aiMcpSetCommandBlocklist?.(initialBlocklist);
+    const initialTimeout = localStorageAdapter.readNumber(STORAGE_KEY_AI_COMMAND_TIMEOUT) ?? 60;
+    bridge?.aiMcpSetCommandTimeout?.(initialTimeout);
+    const initialMaxIter = localStorageAdapter.readNumber(STORAGE_KEY_AI_MAX_ITERATIONS) ?? 20;
+    bridge?.aiMcpSetMaxIterations?.(initialMaxIter);
+    const initialPermMode = localStorageAdapter.readString(STORAGE_KEY_AI_PERMISSION_MODE) ?? 'confirm';
+    bridge?.aiMcpSetPermissionMode?.(initialPermMode);
+  }, []);
+
+  // ── Session CRUD ──
+  const persistSessions = useCallback((next: AISession[]) => {
+    localStorageAdapter.write(STORAGE_KEY_AI_SESSIONS, pruneSessionsForStorage(next));
+  }, []);
+
+  // Debounced version of persistSessions for high-frequency updates (e.g. streaming)
+  const persistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const mountedRef = useRef(true);
+
+  const debouncedPersistSessions = useCallback(() => {
+    if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
+    persistTimerRef.current = setTimeout(() => {
+      if (!mountedRef.current) return; // Skip writes after unmount
+      localStorageAdapter.write(STORAGE_KEY_AI_SESSIONS, pruneSessionsForStorage(sessionsRef.current));
+      persistTimerRef.current = null;
+    }, 500);
+  }, []);
+
+  // Flush pending debounced writes on unmount
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      if (persistTimerRef.current) {
+        clearTimeout(persistTimerRef.current);
+        persistTimerRef.current = null;
+        persistSessions(sessionsRef.current);
+      }
+    };
+  }, [persistSessions]);
+
+  const createSession = useCallback((scope: AISessionScope, agentId?: string): AISession => {
+    const now = Date.now();
+    const session: AISession = {
+      id: `ai_${now}_${Math.random().toString(36).slice(2, 8)}`,
+      title: 'New Chat',
+      agentId: agentId || defaultAgentId,
+      scope,
+      messages: [],
+      createdAt: now,
+      updatedAt: now,
+    };
+    setSessionsRaw(prev => {
+      const next = [session, ...prev];
+      persistSessions(next);
+      return next;
+    });
+    const scopeKey = `${scope.type}:${scope.targetId ?? ''}`;
+    setActiveSessionId(scopeKey, session.id);
+    return session;
+  }, [defaultAgentId, persistSessions, setActiveSessionId]);
+
+  const deleteSession = useCallback((sessionId: string, scopeKey?: string) => {
+    cleanupAcpSessions([sessionId]);
+    if (persistTimerRef.current) {
+      clearTimeout(persistTimerRef.current);
+      persistTimerRef.current = null;
+    }
+    setSessionsRaw(prev => {
+      const next = prev.filter(s => s.id !== sessionId);
+      persistSessions(next);
+      return next;
+    });
+    if (scopeKey) {
+      setActiveSessionIdMapRaw(prev => {
+        if (prev[scopeKey] === sessionId) return { ...prev, [scopeKey]: null };
+        return prev;
+      });
+    }
+  }, [persistSessions]);
+
+  const deleteSessionsByTarget = useCallback((scopeType: 'terminal' | 'workspace', targetId: string) => {
+    const removedSessionIds = sessionsRef.current
+      .filter(s => s.scope.type === scopeType && s.scope.targetId === targetId)
+      .map(s => s.id);
+    cleanupAcpSessions(removedSessionIds);
+    if (persistTimerRef.current) {
+      clearTimeout(persistTimerRef.current);
+      persistTimerRef.current = null;
+    }
+    setSessionsRaw(prev => {
+      const next = prev.filter(s => {
+        return !(s.scope.type === scopeType && s.scope.targetId === targetId);
+      });
+      persistSessions(next);
+      return next;
+    });
+    const scopeKey = `${scopeType}:${targetId}`;
+    setActiveSessionIdMapRaw(prev => {
+      if (prev[scopeKey] != null) return { ...prev, [scopeKey]: null };
+      return prev;
+    });
+  }, [persistSessions]);
+
+  const updateSessionTitle = useCallback((sessionId: string, title: string) => {
+    setSessionsRaw(prev => {
+      const next = prev.map(s => s.id === sessionId ? { ...s, title, updatedAt: Date.now() } : s);
+      persistSessions(next);
+      return next;
+    });
+  }, [persistSessions]);
+
+  const updateSessionExternalSessionId = useCallback((sessionId: string, externalSessionId: string | undefined) => {
+    setSessionsRaw(prev => {
+      const next = prev.map(s => (
+        s.id === sessionId
+          ? { ...s, externalSessionId, updatedAt: Date.now() }
+          : s
+      ));
+      debouncedPersistSessions();
+      return next;
+    });
+  }, [debouncedPersistSessions]);
+
+  // Maximum messages per session to prevent unbounded memory growth
+  const MAX_MESSAGES_PER_SESSION = 500;
+
+  const addMessageToSession = useCallback((sessionId: string, message: ChatMessage) => {
+    setSessionsRaw(prev => {
+      const next = prev.map(s => {
+        if (s.id !== sessionId) return s;
+        let msgs = [...s.messages, message];
+        // Trim oldest messages if exceeding limit (keep system messages)
+        if (msgs.length > MAX_MESSAGES_PER_SESSION) {
+          const systemMsgs = msgs.filter(m => m.role === 'system');
+          const nonSystemMsgs = msgs.filter(m => m.role !== 'system');
+          const dropped = nonSystemMsgs.length - (MAX_MESSAGES_PER_SESSION - systemMsgs.length);
+          console.warn(`[useAIState] Session ${sessionId}: trimmed ${dropped} oldest non-system message(s) to stay within ${MAX_MESSAGES_PER_SESSION} limit`);
+          msgs = [...systemMsgs, ...nonSystemMsgs.slice(-MAX_MESSAGES_PER_SESSION + systemMsgs.length)];
+        }
+        return { ...s, messages: msgs, updatedAt: Date.now() };
+      });
+      debouncedPersistSessions();
+      return next;
+    });
+  }, [debouncedPersistSessions]);
+
+  const updateLastMessage = useCallback((sessionId: string, updater: (msg: ChatMessage) => ChatMessage) => {
+    setSessionsRaw(prev => {
+      const next = prev.map(s => {
+        if (s.id !== sessionId || s.messages.length === 0) return s;
+        const msgs = [...s.messages];
+        msgs[msgs.length - 1] = updater(msgs[msgs.length - 1]);
+        return { ...s, messages: msgs, updatedAt: Date.now() };
+      });
+      debouncedPersistSessions();
+      return next;
+    });
+  }, [debouncedPersistSessions]);
+
+  const updateMessageById = useCallback((sessionId: string, messageId: string, updater: (msg: ChatMessage) => ChatMessage) => {
+    setSessionsRaw(prev => {
+      const next = prev.map(s => {
+        if (s.id !== sessionId) return s;
+        const idx = s.messages.findIndex(m => m.id === messageId);
+        if (idx === -1) return s;
+        const msgs = [...s.messages];
+        msgs[idx] = updater(msgs[idx]);
+        return { ...s, messages: msgs, updatedAt: Date.now() };
+      });
+      debouncedPersistSessions();
+      return next;
+    });
+  }, [debouncedPersistSessions]);
+
+  const clearSessionMessages = useCallback((sessionId: string) => {
+    if (persistTimerRef.current) {
+      clearTimeout(persistTimerRef.current);
+      persistTimerRef.current = null;
+    }
+    setSessionsRaw(prev => {
+      const next = prev.map(s => s.id === sessionId ? { ...s, messages: [], updatedAt: Date.now() } : s);
+      persistSessions(next);
+      return next;
+    });
+  }, [persistSessions]);
+
+  const cleanupOrphanedSessions = useCallback((activeTargetIds: Set<string>) => {
+    const removedSessionIds = sessionsRef.current
+      .filter(s => s.scope.targetId && !activeTargetIds.has(s.scope.targetId))
+      .map(s => s.id);
+    cleanupAcpSessions(removedSessionIds);
+    setSessionsRaw(prev => {
+      const next = prev.filter(s => {
+        // Keep sessions without a targetId (global scope)
+        if (!s.scope.targetId) return true;
+        // Keep sessions whose target still exists
+        return activeTargetIds.has(s.scope.targetId);
+      });
+      if (next.length !== prev.length) {
+        persistSessions(next);
+      }
+      return next;
+    });
+  }, [persistSessions]);
+
+  // ── Provider CRUD helpers ──
+  const addProvider = useCallback((provider: ProviderConfig) => {
+    setProviders(prev => [...prev, provider]);
+  }, [setProviders]);
+
+  const updateProvider = useCallback((id: string, updates: Partial<ProviderConfig>) => {
+    setProviders(prev => prev.map(p => p.id === id ? { ...p, ...updates } : p));
+  }, [setProviders]);
+
+  const removeProvider = useCallback((id: string) => {
+    setProviders(prev => prev.filter(p => p.id !== id));
+    // Use the raw setter to avoid stale closure over setActiveProviderId
+    setActiveProviderIdRaw(prevId => {
+      if (prevId === id) {
+        const next = '';
+        localStorageAdapter.writeString(STORAGE_KEY_AI_ACTIVE_PROVIDER, next);
+        return next;
+      }
+      return prevId;
+    });
+  }, [setProviders]);
+
+  // ── Computed ──
+  const activeProvider = providers.find(p => p.id === activeProviderId) ?? null;
+
+  return {
+    // Provider config
+    providers,
+    setProviders,
+    addProvider,
+    updateProvider,
+    removeProvider,
+    activeProviderId,
+    setActiveProviderId,
+    activeModelId,
+    setActiveModelId,
+    activeProvider,
+
+    // Permission model
+    globalPermissionMode,
+    setGlobalPermissionMode,
+    hostPermissions,
+    setHostPermissions,
+
+    // External agents
+    externalAgents,
+    setExternalAgents,
+    defaultAgentId,
+    setDefaultAgentId,
+
+    // Safety
+    commandBlocklist,
+    setCommandBlocklist,
+    commandTimeout,
+    setCommandTimeout,
+    maxIterations,
+    setMaxIterations,
+
+    // Per-agent model memory
+    agentModelMap,
+    setAgentModel,
+
+    // Web search
+    webSearchConfig,
+    setWebSearchConfig,
+
+    // Sessions (per-scope active session)
+    sessions,
+    activeSessionIdMap,
+    setActiveSessionId,
+    createSession,
+    deleteSession,
+    deleteSessionsByTarget,
+    updateSessionTitle,
+    updateSessionExternalSessionId,
+    addMessageToSession,
+    updateLastMessage,
+    updateMessageById,
+    clearSessionMessages,
+    cleanupOrphanedSessions,
+  };
+}

application/state/useAgentDiscovery.ts

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

application/state/useAutoSync.ts

@@ -16,6 +16,7 @@ import {
   findSyncPayloadEncryptedCredentialPaths,
 } from '../../domain/credentials';
 import { isProviderReadyForSync, type CloudProvider, type SyncPayload } from '../../domain/sync';
+import { collectSyncableSettings } from '../../domain/syncPayload';
 import { STORAGE_KEY_PORT_FORWARDING } from '../../infrastructure/config/storageKeys';
 import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
 import { getEffectiveKnownHosts } from '../../infrastructure/syncHelpers';
@@ -31,7 +32,9 @@ interface AutoSyncConfig {
   snippetPackages?: SyncPayload['snippetPackages'];
   portForwardingRules?: SyncPayload['portForwardingRules'];
   knownHosts?: SyncPayload['knownHosts'];
-  
+  /** Opaque token that changes whenever a synced setting changes. */
+  settingsVersion?: number;
+
   // Callbacks
   onApplyPayload: (payload: SyncPayload) => void;
 }
@@ -49,10 +52,13 @@ interface SyncNowOptions {
 export const useAutoSync = (config: AutoSyncConfig) => {
   const { t } = useI18n();
   const sync = useCloudSync();
+  const { onApplyPayload } = config;
   const syncTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const lastSyncedDataRef = useRef<string>('');
   const hasCheckedRemoteRef = useRef(false);
   const isInitializedRef = useRef(false);
+  const isSyncRunningRef = useRef(false);
+  const skipNextSyncRef = useRef(false);
 
   const getSyncSnapshot = useCallback(() => {
     let effectivePFRules = config.portForwardingRules;
@@ -97,19 +103,21 @@ export const useAutoSync = (config: AutoSyncConfig) => {
   const buildPayload = useCallback((): SyncPayload => {
     return {
       ...getSyncSnapshot(),
+      settings: collectSyncableSettings(),
       syncedAt: Date.now(),
     };
   }, [getSyncSnapshot]);
   
-  // Create a hash of current data for comparison
+  // Create a hash of current data for comparison (includes settings)
   const getDataHash = useCallback(() => {
-    return JSON.stringify(getSyncSnapshot());
+    return JSON.stringify({ ...getSyncSnapshot(), settings: collectSyncableSettings() });
   }, [getSyncSnapshot]);
   
   // Sync now handler - get fresh state directly from manager
   const syncNow = useCallback(async (options?: SyncNowOptions) => {
     const trigger: SyncTrigger = options?.trigger ?? 'auto';
 
+    isSyncRunningRef.current = true;
     try {
       // Get fresh state directly from CloudSyncManager singleton
       let state = manager.getState();
@@ -156,6 +164,16 @@ export const useAutoSync = (config: AutoSyncConfig) => {
 
       const results = await sync.syncNow(payload);
 
+      // Apply merged payloads first (before checking for failures) so local
+      // state gets updated even when some providers failed
+      for (const result of results.values()) {
+        if (result.mergedPayload) {
+          onApplyPayload(result.mergedPayload);
+          skipNextSyncRef.current = true;
+          break; // All providers share the same merged payload
+        }
+      }
+
       for (const result of results.values()) {
         if (!result.success) {
           if (result.conflictDetected) {
@@ -175,8 +193,10 @@ export const useAutoSync = (config: AutoSyncConfig) => {
         error instanceof Error ? error.message : t('common.unknownError'),
         t('sync.autoSync.failedTitle'),
       );
+    } finally {
+      isSyncRunningRef.current = false;
     }
-  }, [sync, buildPayload, getDataHash, t]);
+  }, [sync, buildPayload, getDataHash, onApplyPayload, t]);
   
   // Check remote version and pull if newer (on startup)
   const checkRemoteVersion = useCallback(async () => {
@@ -199,18 +219,26 @@ export const useAutoSync = (config: AutoSyncConfig) => {
     
     try {
       console.log('[AutoSync] Checking remote version...');
+      // Load base BEFORE downloading (downloadFromProvider overwrites the base)
+      const base = await manager.loadSyncBase(connectedProvider);
       const remotePayload = await sync.downloadFromProvider(connectedProvider);
-      
+
       if (remotePayload && remotePayload.syncedAt > state.localUpdatedAt) {
-        console.log('[AutoSync] Remote is newer, applying...');
-        config.onApplyPayload(remotePayload);
+        const { mergeSyncPayloads } = await import('../../domain/syncMerge');
+        const localPayload = buildPayload();
+        const mergeResult = mergeSyncPayloads(base, localPayload, remotePayload);
+
+        console.log('[AutoSync] Remote is newer, merged:', mergeResult.summary);
+        config.onApplyPayload(mergeResult.payload);
+        // Don't save base or skip auto-sync — let the data-change effect
+        // naturally trigger an upload of the merged payload (which will
+        // go through syncAllProviders and save base on success).
         toast.success(t('sync.autoSync.syncedMessage'), t('sync.autoSync.syncedTitle'));
       }
     } catch (error) {
       console.error('[AutoSync] Failed to check remote version:', error);
-      // Don't show error toast for initial check - it's not critical
     }
-  }, [sync, config, t]);
+  }, [sync, config, buildPayload, t]);
   
   // Debounced auto-sync when data changes
   useEffect(() => {
@@ -227,7 +255,15 @@ export const useAutoSync = (config: AutoSyncConfig) => {
     }
     
     const currentHash = getDataHash();
-    
+
+    // After a merge, onApplyPayload changes local state which triggers
+    // this effect. Skip that cycle and just update the hash baseline.
+    if (skipNextSyncRef.current) {
+      skipNextSyncRef.current = false;
+      lastSyncedDataRef.current = currentHash;
+      return;
+    }
+
     // Skip if data hasn't changed
     if (currentHash === lastSyncedDataRef.current) {
       return;
@@ -235,7 +271,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
 
     // Wait for the current sync to finish, then this effect will re-run
     // because sync.isSyncing changed.
-    if (sync.isSyncing) {
+    if (sync.isSyncing || isSyncRunningRef.current) {
       return;
     }
     
@@ -255,7 +291,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
         clearTimeout(syncTimeoutRef.current);
       }
     };
-  }, [sync.hasAnyConnectedProvider, sync.autoSyncEnabled, sync.isUnlocked, sync.isSyncing, getDataHash, syncNow]);
+  }, [sync.hasAnyConnectedProvider, sync.autoSyncEnabled, sync.isUnlocked, sync.isSyncing, getDataHash, syncNow, config.settingsVersion]);
   
   // Check remote version on startup/unlock
   useEffect(() => {

application/state/useFileUpload.ts

@@ -0,0 +1,79 @@
+/**
+ * useFileUpload - Handle file paste/drop with base64 conversion
+ *
+ * Supports images, PDFs, and other document types.
+ * Ported from 1code's use-agents-file-upload.ts
+ */
+import { useCallback, useState } from 'react';
+import { getPathForFile } from '../../lib/sftpFileUtils';
+
+export interface UploadedFile {
+  id: string;
+  filename: string;
+  dataUrl: string;      // data:...;base64,... for preview
+  base64Data: string;   // raw base64 for API
+  mediaType: string;    // MIME type e.g. "image/png", "application/pdf"
+  filePath?: string;    // original filesystem path (Electron only)
+}
+
+/** Reject only known binary blobs that AI models can't process */
+const REJECTED_MIME_PREFIXES = ['video/', 'audio/'];
+
+function isSupportedFile(file: File): boolean {
+  // Allow files with empty MIME (common in Electron for .sh, .yaml, etc.)
+  if (!file.type) return true;
+  return !REJECTED_MIME_PREFIXES.some(prefix => file.type.startsWith(prefix));
+}
+
+async function fileToDataUrl(file: File): Promise<{ dataUrl: string; base64: string }> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const dataUrl = reader.result as string;
+      const base64 = dataUrl.split(',')[1] || '';
+      resolve({ dataUrl, base64 });
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+export function useFileUpload() {
+  const [files, setFiles] = useState<UploadedFile[]>([]);
+
+  const addFiles = useCallback(async (inputFiles: File[]) => {
+    const supported = inputFiles.filter(isSupportedFile);
+    if (supported.length === 0) return;
+
+    const newFiles: UploadedFile[] = await Promise.all(
+      supported.map(async (file) => {
+        const id = crypto.randomUUID();
+        const filename = file.name || `file-${Date.now()}`;
+        const mediaType = file.type || 'application/octet-stream';
+        let dataUrl = '';
+        let base64Data = '';
+        try {
+          const result = await fileToDataUrl(file);
+          dataUrl = result.dataUrl;
+          base64Data = result.base64;
+        } catch (err) {
+          console.error('[useFileUpload] Failed to convert:', err);
+        }
+        const filePath = getPathForFile(file);
+        return { id, filename, dataUrl, base64Data, mediaType, filePath };
+      }),
+    );
+
+    setFiles((prev) => [...prev, ...newFiles]);
+  }, []);
+
+  const removeFile = useCallback((id: string) => {
+    setFiles((prev) => prev.filter((f) => f.id !== id));
+  }, []);
+
+  const clearFiles = useCallback(() => {
+    setFiles([]);
+  }, []);
+
+  return { files, addFiles, removeFile, clearFiles };
+}

application/state/useSessionState.ts

@@ -38,7 +38,9 @@ export const useSessionState = () => {
   // Log views: stores open log replay tabs
   const [logViews, setLogViews] = useState<LogView[]>([]);
 
-  const createLocalTerminal = useCallback(() => {
+  const createLocalTerminal = useCallback((options?: {
+    shellType?: TerminalSession['shellType'];
+  }) => {
     const sessionId = crypto.randomUUID();
     const localHostId = `local-${sessionId}`;
     const newSession: TerminalSession = {
@@ -48,6 +50,8 @@ export const useSessionState = () => {
       hostname: 'localhost',
       username: 'local',
       status: 'connecting',
+      protocol: 'local',
+      shellType: options?.shellType,
     };
     setSessions(prev => [...prev, newSession]);
     setActiveTabId(sessionId);
@@ -414,11 +418,17 @@ export const useSessionState = () => {
   // direction: 'horizontal' = split top/bottom, 'vertical' = split left/right
   const splitSession = useCallback((
     sessionId: string,
-    direction: SplitDirection
+    direction: SplitDirection,
+    options?: {
+      localShellType?: TerminalSession['shellType'];
+    },
   ) => {
 	    setSessions(prevSessions => {
       const session = prevSessions.find(s => s.id === sessionId);
       if (!session) return prevSessions;
+      const nextShellType = session.protocol === 'local'
+        ? options?.localShellType
+        : session.shellType;
       
       // If session is already in a workspace, split within that workspace
       if (session.workspaceId) {
@@ -434,6 +444,7 @@ export const useSessionState = () => {
           protocol: session.protocol,
           port: session.port,
           moshEnabled: session.moshEnabled,
+          shellType: nextShellType,
         };
         
         // Add pane to existing workspace
@@ -464,6 +475,7 @@ export const useSessionState = () => {
         protocol: session.protocol,
         port: session.port,
         moshEnabled: session.moshEnabled,
+        shellType: nextShellType,
       };
       
       const hint: SplitHint = {
@@ -569,6 +581,7 @@ export const useSessionState = () => {
       workspaceId: workspace.id,
       // Store the command to run after connection
       startupCommand: snippet.command,
+      noAutoRun: snippet.noAutoRun,
     }));
 
 	    setSessions(prev => [...prev, ...sessionsWithWorkspace]);
@@ -614,10 +627,15 @@ export const useSessionState = () => {
   }, [setActiveTabId]);
 
   // Copy a session - creates a new session with the same host connection
-  const copySession = useCallback((sessionId: string) => {
+  const copySession = useCallback((sessionId: string, options?: {
+    localShellType?: TerminalSession['shellType'];
+  }) => {
     setSessions(prevSessions => {
       const session = prevSessions.find(s => s.id === sessionId);
       if (!session) return prevSessions;
+      const nextShellType = session.protocol === 'local'
+        ? options?.localShellType
+        : session.shellType;
 
       // Create a new session with the same connection info
       const newSession: TerminalSession = {
@@ -630,6 +648,7 @@ export const useSessionState = () => {
         protocol: session.protocol,
         port: session.port,
         moshEnabled: session.moshEnabled,
+        shellType: nextShellType,
         serialConfig: session.serialConfig,
       };
 

application/state/useSettingsState.ts

@@ -21,16 +21,19 @@ import {
   STORAGE_KEY_SFTP_AUTO_SYNC,
   STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES,
   STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD,
+  STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR,
   STORAGE_KEY_EDITOR_WORD_WRAP,
   STORAGE_KEY_SESSION_LOGS_ENABLED,
   STORAGE_KEY_SESSION_LOGS_DIR,
   STORAGE_KEY_SESSION_LOGS_FORMAT,
   STORAGE_KEY_TOGGLE_WINDOW_HOTKEY,
   STORAGE_KEY_CLOSE_TO_TRAY,
+  STORAGE_KEY_GLOBAL_HOTKEY_ENABLED,
+  STORAGE_KEY_AUTO_UPDATE_ENABLED,
 } from '../../infrastructure/config/storageKeys';
 import { DEFAULT_UI_LOCALE, resolveSupportedLocale } from '../../infrastructure/config/i18n';
 import { TERMINAL_THEMES } from '../../infrastructure/config/terminalThemes';
-import { useCustomThemes } from '../state/customThemeStore';
+import { customThemeStore, useCustomThemes } from '../state/customThemeStore';
 import { DEFAULT_FONT_SIZE } from '../../infrastructure/config/fonts';
 import { DARK_UI_THEMES, LIGHT_UI_THEMES, UiThemeTokens, getUiThemeById } from '../../infrastructure/config/uiThemes';
 import { UI_FONTS, DEFAULT_UI_FONT_ID } from '../../infrastructure/config/uiFonts';
@@ -61,6 +64,7 @@ const DEFAULT_SFTP_DOUBLE_CLICK_BEHAVIOR: 'open' | 'transfer' = 'open';
 const DEFAULT_SFTP_AUTO_SYNC = false;
 const DEFAULT_SFTP_SHOW_HIDDEN_FILES = false;
 const DEFAULT_SFTP_USE_COMPRESSED_UPLOAD = true;
+const DEFAULT_SFTP_AUTO_OPEN_SIDEBAR = false;
 
 // Editor defaults
 const DEFAULT_EDITOR_WORD_WRAP = false;
@@ -229,6 +233,10 @@ export const useSettingsState = () => {
     if (stored === 'false' || stored === 'disabled') return false;
     return DEFAULT_SFTP_USE_COMPRESSED_UPLOAD;
   });
+  const [sftpAutoOpenSidebar, setSftpAutoOpenSidebar] = useState<boolean>(() => {
+    const stored = readStoredString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR);
+    return stored === 'true' ? true : DEFAULT_SFTP_AUTO_OPEN_SIDEBAR;
+  });
 
   // Editor Settings
   const [editorWordWrap, setEditorWordWrapState] = useState<boolean>(() => {
@@ -264,7 +272,17 @@ export const useSettingsState = () => {
     if (stored === null) return true;
     return stored === 'true';
   });
+  const [autoUpdateEnabled, setAutoUpdateEnabled] = useState<boolean>(() => {
+    const stored = readStoredString(STORAGE_KEY_AUTO_UPDATE_ENABLED);
+    if (stored === null) return true; // Default to enabled
+    return stored === 'true';
+  });
   const [hotkeyRegistrationError, setHotkeyRegistrationError] = useState<string | null>(null);
+  const [globalHotkeyEnabled, setGlobalHotkeyEnabled] = useState<boolean>(() => {
+    const stored = readStoredString(STORAGE_KEY_GLOBAL_HOTKEY_ENABLED);
+    if (stored === null) return true; // Default to enabled
+    return stored === 'true';
+  });
   const incomingTerminalSettingsSignatureRef = useRef<string | null>(null);
   const localTerminalSettingsVersionRef = useRef(0);
   const broadcastedLocalTerminalSettingsVersionRef = useRef(0);
@@ -332,6 +350,62 @@ export const useSettingsState = () => {
     setCustomCSS((prev) => (prev === storedCss ? prev : storedCss));
   }, []);
 
+  const rehydrateAllFromStorage = useCallback(() => {
+    // Theme & appearance (already have helper)
+    syncAppearanceFromStorage();
+    syncCustomCssFromStorage();
+
+    // UI Font
+    const storedFont = readStoredString(STORAGE_KEY_UI_FONT_FAMILY);
+    if (storedFont) setUiFontFamilyId(storedFont);
+
+    // Language
+    const storedLang = readStoredString(STORAGE_KEY_UI_LANGUAGE);
+    if (storedLang) setUiLanguage(storedLang as UILanguage);
+
+    // Terminal
+    const storedTermTheme = readStoredString(STORAGE_KEY_TERM_THEME);
+    if (storedTermTheme) setTerminalThemeId(storedTermTheme);
+    const storedTermFont = readStoredString(STORAGE_KEY_TERM_FONT_FAMILY);
+    if (storedTermFont) setTerminalFontFamilyId(storedTermFont);
+    const storedTermSize = localStorageAdapter.readNumber(STORAGE_KEY_TERM_FONT_SIZE);
+    if (storedTermSize != null) setTerminalFontSize(storedTermSize);
+    const storedTermSettings = readStoredString(STORAGE_KEY_TERM_SETTINGS);
+    if (storedTermSettings) {
+      try {
+        const parsed = JSON.parse(storedTermSettings);
+        setTerminalSettings(parsed);
+      } catch { /* ignore */ }
+    }
+
+    // Keyboard
+    const storedKb = readStoredString(STORAGE_KEY_CUSTOM_KEY_BINDINGS);
+    if (storedKb) {
+      try {
+        setCustomKeyBindings(JSON.parse(storedKb));
+      } catch { /* ignore */ }
+    }
+
+    // Editor
+    const storedWrap = readStoredString(STORAGE_KEY_EDITOR_WORD_WRAP);
+    if (storedWrap === 'true' || storedWrap === 'false') setEditorWordWrapState(storedWrap === 'true');
+
+    // SFTP
+    const storedDblClick = readStoredString(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR);
+    if (storedDblClick === 'open' || storedDblClick === 'transfer') setSftpDoubleClickBehavior(storedDblClick);
+    const storedAutoSync = readStoredString(STORAGE_KEY_SFTP_AUTO_SYNC);
+    if (storedAutoSync === 'true' || storedAutoSync === 'false') setSftpAutoSync(storedAutoSync === 'true');
+    const storedHidden = readStoredString(STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES);
+    if (storedHidden === 'true' || storedHidden === 'false') setSftpShowHiddenFiles(storedHidden === 'true');
+    const storedCompress = readStoredString(STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD);
+    if (storedCompress === 'true' || storedCompress === 'false') setSftpUseCompressedUpload(storedCompress === 'true');
+    const storedAutoOpenSidebar = readStoredString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR);
+    if (storedAutoOpenSidebar === 'true' || storedAutoOpenSidebar === 'false') setSftpAutoOpenSidebar(storedAutoOpenSidebar === 'true');
+
+    // Custom terminal themes
+    customThemeStore.loadFromStorage();
+  }, [syncAppearanceFromStorage, syncCustomCssFromStorage, setTerminalSettings]);
+
   useLayoutEffect(() => {
     const tokens = getUiThemeById(resolvedTheme, resolvedTheme === 'dark' ? darkUiThemeId : lightUiThemeId).tokens;
     applyThemeTokens(theme, resolvedTheme, tokens, accentMode, customAccent);
@@ -457,6 +531,15 @@ export const useSettingsState = () => {
       if (key === STORAGE_KEY_HOTKEY_RECORDING && typeof value === 'boolean') {
         setIsHotkeyRecordingState(value);
       }
+      if (key === STORAGE_KEY_GLOBAL_HOTKEY_ENABLED && typeof value === 'boolean') {
+        setGlobalHotkeyEnabled((prev) => (prev === value ? prev : value));
+      }
+      if (key === STORAGE_KEY_AUTO_UPDATE_ENABLED && typeof value === 'boolean') {
+        setAutoUpdateEnabled((prev) => (prev === value ? prev : value));
+      }
+      if (key === STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR && typeof value === 'boolean') {
+        setSftpAutoOpenSidebar((prev) => (prev === value ? prev : value));
+      }
     });
     return () => {
       try {
@@ -622,11 +705,32 @@ export const useSettingsState = () => {
           setSftpUseCompressedUpload(newValue);
         }
       }
+      // Sync SFTP auto-open sidebar setting from other windows
+      if (e.key === STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR && e.newValue !== null) {
+        const newValue = e.newValue === 'true';
+        if (newValue !== sftpAutoOpenSidebar) {
+          setSftpAutoOpenSidebar(newValue);
+        }
+      }
+      // Sync global hotkey enabled setting from other windows
+      if (e.key === STORAGE_KEY_GLOBAL_HOTKEY_ENABLED && e.newValue !== null) {
+        const newValue = e.newValue === 'true';
+        if (newValue !== globalHotkeyEnabled) {
+          setGlobalHotkeyEnabled(newValue);
+        }
+      }
+      // Sync auto-update enabled setting from other windows
+      if (e.key === STORAGE_KEY_AUTO_UPDATE_ENABLED && e.newValue !== null) {
+        const newValue = e.newValue === 'true';
+        if (newValue !== autoUpdateEnabled) {
+          setAutoUpdateEnabled(newValue);
+        }
+      }
     };
 
     window.addEventListener('storage', handleStorageChange);
     return () => window.removeEventListener('storage', handleStorageChange);
-  }, [theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, customCSS, uiFontFamilyId, hotkeyScheme, uiLanguage, terminalThemeId, terminalFontFamilyId, terminalFontSize, sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload, editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat, mergeIncomingTerminalSettings]);
+  }, [theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, customCSS, uiFontFamilyId, hotkeyScheme, uiLanguage, terminalThemeId, terminalFontFamilyId, terminalFontSize, sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload, sftpAutoOpenSidebar, editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat, globalHotkeyEnabled, autoUpdateEnabled, mergeIncomingTerminalSettings]);
 
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_TERM_THEME, terminalThemeId);
@@ -711,6 +815,12 @@ export const useSettingsState = () => {
     notifySettingsChanged(STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD, sftpUseCompressedUpload);
   }, [sftpUseCompressedUpload, notifySettingsChanged]);
 
+  // Persist SFTP auto-open sidebar setting
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR, sftpAutoOpenSidebar ? 'true' : 'false');
+    notifySettingsChanged(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR, sftpAutoOpenSidebar);
+  }, [sftpAutoOpenSidebar, notifySettingsChanged]);
+
   // Persist Session Logs settings
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_SESSION_LOGS_ENABLED, sessionLogsEnabled ? 'true' : 'false');
@@ -734,7 +844,7 @@ export const useSettingsState = () => {
     // Register/unregister the global hotkey in main process
     const bridge = netcattyBridge.get();
     if (bridge?.registerGlobalHotkey) {
-      if (toggleWindowHotkey) {
+      if (toggleWindowHotkey && globalHotkeyEnabled) {
         setHotkeyRegistrationError(null);
         bridge
           .registerGlobalHotkey(toggleWindowHotkey)
@@ -755,7 +865,13 @@ export const useSettingsState = () => {
         });
       }
     }
-  }, [toggleWindowHotkey, notifySettingsChanged]);
+  }, [toggleWindowHotkey, globalHotkeyEnabled, notifySettingsChanged]);
+
+  // Persist global hotkey enabled setting
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_GLOBAL_HOTKEY_ENABLED, globalHotkeyEnabled ? 'true' : 'false');
+    notifySettingsChanged(STORAGE_KEY_GLOBAL_HOTKEY_ENABLED, globalHotkeyEnabled);
+  }, [globalHotkeyEnabled, notifySettingsChanged]);
 
   // Persist and sync close to tray setting
   useEffect(() => {
@@ -770,6 +886,41 @@ export const useSettingsState = () => {
     }
   }, [closeToTray, notifySettingsChanged]);
 
+  // Hydrate auto-update state from the main-process preference file on mount.
+  // This reconciles localStorage (renderer) with auto-update-pref.json (main)
+  // in case localStorage was cleared or is stale.
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+    void bridge?.getAutoUpdate?.().then((result) => {
+      if (result && typeof result.enabled === 'boolean') {
+        setAutoUpdateEnabled((prev) => {
+          if (prev === result.enabled) return prev;
+          // Sync localStorage with the main-process truth
+          localStorageAdapter.writeString(STORAGE_KEY_AUTO_UPDATE_ENABLED, result.enabled ? 'true' : 'false');
+          return result.enabled;
+        });
+      }
+    }).catch(() => { /* bridge unavailable */ });
+  }, []);
+
+  // Persist auto-update enabled setting.
+  // Skip IPC on initial mount to avoid overwriting the main-process preference
+  // file when localStorage has been cleared (where the default is true).
+  const autoUpdateMountedRef = useRef(false);
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_AUTO_UPDATE_ENABLED, autoUpdateEnabled ? 'true' : 'false');
+    notifySettingsChanged(STORAGE_KEY_AUTO_UPDATE_ENABLED, autoUpdateEnabled);
+    if (!autoUpdateMountedRef.current) {
+      autoUpdateMountedRef.current = true;
+      return; // Skip IPC on initial mount
+    }
+    // Notify main process on user-initiated changes
+    const bridge = netcattyBridge.get();
+    bridge?.setAutoUpdate?.(autoUpdateEnabled).catch((err: unknown) => {
+      console.warn('[AutoUpdate] Failed to set auto-update:', err);
+    });
+  }, [autoUpdateEnabled, notifySettingsChanged]);
+
   // Get merged key bindings (defaults + custom overrides)
   const keyBindings = useMemo((): KeyBinding[] => {
     return DEFAULT_KEY_BINDINGS.map(binding => {
@@ -892,6 +1043,8 @@ export const useSettingsState = () => {
     setSftpShowHiddenFiles,
     sftpUseCompressedUpload,
     setSftpUseCompressedUpload,
+    sftpAutoOpenSidebar,
+    setSftpAutoOpenSidebar,
     // Editor Settings
     editorWordWrap,
     setEditorWordWrap: useCallback((enabled: boolean) => {
@@ -912,6 +1065,21 @@ export const useSettingsState = () => {
     setToggleWindowHotkey,
     closeToTray,
     setCloseToTray,
+    autoUpdateEnabled,
+    setAutoUpdateEnabled,
     hotkeyRegistrationError,
+    globalHotkeyEnabled,
+    setGlobalHotkeyEnabled,
+    rehydrateAllFromStorage,
+    // Opaque version that changes when any synced setting changes, used by useAutoSync.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    settingsVersion: useMemo(() => Math.random(), [
+      theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent,
+      uiFontFamilyId, uiLanguage, customCSS,
+      terminalThemeId, terminalFontFamilyId, terminalFontSize, terminalSettings,
+      customKeyBindings, editorWordWrap,
+      sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload, sftpAutoOpenSidebar,
+      customThemes,
+    ]),
   };
 };

application/state/useSftpBackend.ts

@@ -197,6 +197,12 @@ export const useSftpBackend = () => {
     return bridge.showSaveDialog(defaultPath, filters);
   }, []);
 
+  const selectDirectory = async (title?: string, defaultPath?: string) => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.selectDirectory) return null;
+    return bridge.selectDirectory(title, defaultPath);
+  };
+
   const downloadSftpToTempAndOpen = useCallback(async (
     sftpId: string,
     remotePath: string,
@@ -278,6 +284,7 @@ export const useSftpBackend = () => {
     onTransferProgress,
     selectApplication,
     showSaveDialog,
+    selectDirectory,
     downloadSftpToTempAndOpen,
   };
 };

application/state/useTerminalBackend.ts

@@ -90,7 +90,7 @@ export const useTerminalBackend = () => {
     return bridge.onSessionData(sessionId, cb);
   }, []);
 
-  const onSessionExit = useCallback((sessionId: string, cb: (evt: { exitCode?: number; signal?: number }) => void) => {
+  const onSessionExit = useCallback((sessionId: string, cb: (evt: { exitCode?: number; signal?: number; error?: string; reason?: "exited" | "error" | "timeout" | "closed" }) => void) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.onSessionExit) throw new Error("onSessionExit unavailable");
     return bridge.onSessionExit(sessionId, cb);

application/state/useUpdateCheck.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { checkForUpdates, getReleaseUrl, type ReleaseInfo, type UpdateCheckResult } from '../../infrastructure/services/updateService';
 import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
-import { STORAGE_KEY_UPDATE_DISMISSED_VERSION, STORAGE_KEY_UPDATE_LAST_CHECK, STORAGE_KEY_UPDATE_LATEST_RELEASE } from '../../infrastructure/config/storageKeys';
+import { STORAGE_KEY_UPDATE_DISMISSED_VERSION, STORAGE_KEY_UPDATE_LAST_CHECK, STORAGE_KEY_UPDATE_LATEST_RELEASE, STORAGE_KEY_AUTO_UPDATE_ENABLED } from '../../infrastructure/config/storageKeys';
 import { netcattyBridge } from '../../infrastructure/services/netcattyBridge';
 
 // Check for updates at most once per hour
@@ -56,7 +56,13 @@ export interface UseUpdateCheckResult {
  * - Respects dismissed version to avoid nagging
  * - Provides manual check capability
  */
-export function useUpdateCheck(): UseUpdateCheckResult {
+export function useUpdateCheck(options?: { autoUpdateEnabled?: boolean }): UseUpdateCheckResult {
+  // Accept auto-update toggle from the caller (e.g. useSettingsState) so it
+  // reacts immediately in the same window. Falls back to reading localStorage
+  // when no caller provides the value (e.g. in non-settings contexts).
+  const autoUpdateEnabled = options?.autoUpdateEnabled ??
+    (localStorageAdapter.readString(STORAGE_KEY_AUTO_UPDATE_ENABLED) !== 'false');
+
   const [updateState, setUpdateState] = useState<UpdateState>({
     isChecking: false,
     hasUpdate: false,
@@ -136,14 +142,20 @@ export function useUpdateCheck(): UseUpdateCheckResult {
         return;
       }
 
+      // 'available' means an update was found but auto-download is disabled.
+      // Surface the version info (hasUpdate + latestRelease) but keep
+      // autoDownloadStatus at 'idle' so the manual download path shows.
+      const isAvailableOnly = snapshot.status === 'available';
+
       setUpdateState((prev) => {
         // Don't overwrite if the renderer already has a newer state
         if (prev.autoDownloadStatus !== 'idle') return prev;
         return {
           ...prev,
-          autoDownloadStatus: snapshot.status,
-          downloadPercent: snapshot.percent,
-          downloadError: snapshot.error,
+          hasUpdate: isAvailableOnly ? true : prev.hasUpdate,
+          autoDownloadStatus: isAvailableOnly ? 'idle' : snapshot.status,
+          downloadPercent: isAvailableOnly ? 0 : snapshot.percent,
+          downloadError: isAvailableOnly ? null : snapshot.error,
           // Use snapshot version if no release data or if versions differ
           latestRelease: (!prev.latestRelease || (snapshot.version && prev.latestRelease.version !== snapshot.version)) ? (snapshot.version ? {
             version: snapshot.version,
@@ -186,15 +198,18 @@ export function useUpdateCheck(): UseUpdateCheckResult {
       if (isDismissed) {
         dismissedAutoDownloadRef.current = true;
       }
+      // When auto-update is disabled, autoDownload=false in the main process
+      // so no download will start. Don't transition to 'downloading' or the
+      // UI will be stuck at 0%. Keep status idle and let the manual download
+      // link surface instead.
+      const isAutoUpdateOff = localStorageAdapter.readString(STORAGE_KEY_AUTO_UPDATE_ENABLED) === 'false';
+      const shouldTrackDownload = !isDismissed && !isAutoUpdateOff;
       setUpdateState((prev) => ({
         ...prev,
         hasUpdate: !isDismissed,
-        // Only transition to 'downloading' if the user hasn't dismissed this
-        // version — otherwise leave the status at 'idle' so no download
-        // progress/ready toast appears for a release they don't want.
-        autoDownloadStatus: isDismissed ? prev.autoDownloadStatus : 'downloading',
-        downloadPercent: isDismissed ? prev.downloadPercent : 0,
-        downloadError: isDismissed ? prev.downloadError : null,
+        autoDownloadStatus: shouldTrackDownload ? 'downloading' : prev.autoDownloadStatus,
+        downloadPercent: shouldTrackDownload ? 0 : prev.downloadPercent,
+        downloadError: shouldTrackDownload ? null : prev.downloadError,
         // Use electron-updater's version if GitHub API hasn't resolved yet or
         // if the updater reports a different version than the cached release.
         latestRelease: (!prev.latestRelease || prev.latestRelease.version !== info.version) ? {
@@ -439,6 +454,20 @@ export function useUpdateCheck(): UseUpdateCheckResult {
         } else if (res?.checking) {
           // Another check is already in flight — don't change status; the
           // in-flight check will resolve via IPC events.
+        } else if (nextStatus === 'error' && res?.available) {
+          // GitHub API failed but electron-updater found an update.
+          // Respect dismissed versions before surfacing.
+          const dismissed = localStorageAdapter.readString(STORAGE_KEY_UPDATE_DISMISSED_VERSION);
+          if (res.version && res.version === dismissed) {
+            // User dismissed this version — don't re-surface
+          } else {
+            setUpdateState((prev) => ({
+              ...prev,
+              manualCheckStatus: 'available',
+              hasUpdate: true,
+              error: null,
+            }));
+          }
         } else if (nextStatus === 'error' && !res?.error && !res?.available) {
           // GitHub API failed but electron-updater says no update available.
           // Clear the error status so Settings doesn't stay stuck in error state.
@@ -519,12 +548,12 @@ export function useUpdateCheck(): UseUpdateCheckResult {
     if (IS_UPDATE_DEMO_MODE) {
       return;
     }
-    
-    debugLog('Version check effect', { 
-      hasChecked: hasCheckedOnStartupRef.current, 
+
+    debugLog('Version check effect', {
+      hasChecked: hasCheckedOnStartupRef.current,
       currentVersion: updateState.currentVersion
     });
-    
+
     if (hasCheckedOnStartupRef.current) {
       return;
     }
@@ -533,12 +562,11 @@ export function useUpdateCheck(): UseUpdateCheckResult {
       return;
     }
 
-    // Check if we've checked recently
+    // Hydrate cached release info so update status is visible across windows.
+    // When auto-update is disabled, hydrate release data (for the Settings UI)
+    // but don't set hasUpdate (which would trigger the toast in App.tsx).
     const lastCheck = localStorageAdapter.readNumber(STORAGE_KEY_UPDATE_LAST_CHECK);
-    const now = Date.now();
-    if (lastCheck && now - lastCheck < UPDATE_CHECK_INTERVAL_MS) {
-      hasCheckedOnStartupRef.current = true;
-      // Hydrate cached release info so late-opening windows show the result
+    if (lastCheck) {
       const cachedRelease = localStorageAdapter.readString(STORAGE_KEY_UPDATE_LATEST_RELEASE);
       if (cachedRelease) {
         try {
@@ -556,6 +584,19 @@ export function useUpdateCheck(): UseUpdateCheckResult {
           // Ignore corrupted cache
         }
       }
+    }
+
+    // Respect auto-update toggle — skip automatic check when disabled.
+    // Don't set hasCheckedOnStartupRef so re-enabling (which changes the
+    // autoUpdateEnabled dependency) can re-trigger this effect.
+    if (!autoUpdateEnabled) {
+      return;
+    }
+
+    // Check if we've checked recently
+    const now = Date.now();
+    if (lastCheck && now - lastCheck < UPDATE_CHECK_INTERVAL_MS) {
+      hasCheckedOnStartupRef.current = true;
       return;
     }
 
@@ -563,6 +604,13 @@ export function useUpdateCheck(): UseUpdateCheckResult {
     debugLog('Starting delayed update check for version:', updateState.currentVersion);
 
     startupCheckTimeoutRef.current = setTimeout(async () => {
+      // Re-check the toggle at fire time — the user may have toggled it
+      // after the timer was scheduled.
+      const stillEnabled = localStorageAdapter.readString(STORAGE_KEY_AUTO_UPDATE_ENABLED);
+      if (stillEnabled === 'false') {
+        debugLog('Skipping startup check — auto-update disabled after timer was scheduled');
+        return;
+      }
       // If electron-updater's auto-check already started a download, skip the
       // redundant GitHub API check to avoid duplicate toast notifications.
       if (autoDownloadStatusRef.current !== 'idle') {
@@ -601,7 +649,7 @@ export function useUpdateCheck(): UseUpdateCheckResult {
         clearTimeout(startupCheckTimeoutRef.current);
       }
     };
-  }, [updateState.currentVersion, performCheck]);
+  }, [updateState.currentVersion, autoUpdateEnabled, performCheck]);
 
   return {
     updateState,

components/AIChatSidePanel.tsx

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

components/CloudSyncSettings.tsx

@@ -978,6 +978,10 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
             const result = await sync.syncToProvider(provider, payload);
 
             if (result.success) {
+                // Apply merged data if a three-way merge happened
+                if (result.mergedPayload && onApplyPayload) {
+                    onApplyPayload(result.mergedPayload);
+                }
                 toast.success(t('cloudSync.sync.success', { provider }));
             } else if (result.conflictDetected) {
                 // Conflict modal will show automatically

components/DistroAvatar.tsx

@@ -1,6 +1,6 @@
 import { Server, Usb } from "lucide-react";
 import React, { memo } from "react";
-import { normalizeDistroId } from "../domain/host";
+import { getEffectiveHostDistro } from "../domain/host";
 import { cn } from "../lib/utils";
 import { Host } from "../types";
 
@@ -58,8 +58,7 @@ const DistroAvatarInner: React.FC<DistroAvatarProps> = ({
   className,
   size = "md",
 }) => {
-  const distro =
-    normalizeDistroId(host.distro) || (host.distro || "").toLowerCase();
+  const distro = getEffectiveHostDistro(host);
   const logo = DISTRO_LOGOS[distro];
   const [errored, setErrored] = React.useState(false);
   const bg = DISTRO_COLORS[distro] || DISTRO_COLORS.default;
@@ -106,7 +105,7 @@ const DistroAvatarInner: React.FC<DistroAvatarProps> = ({
       >
         <img
           src={logo}
-          alt={host.distro || host.os}
+          alt={distro || host.os}
           className={cn("object-contain invert brightness-0", iconSize)}
           onError={() => setErrored(true)}
         />

components/HostDetailsPanel.tsx

@@ -27,10 +27,21 @@ import {
 import React, { useEffect, useMemo, useState, useCallback } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { useApplicationBackend } from "../application/state/useApplicationBackend";
+import { useSettingsState } from "../application/state/useSettingsState";
+import { getEffectiveHostDistro, LINUX_DISTRO_OPTIONS } from "../domain/host";
 import { customThemeStore } from "../application/state/customThemeStore";
+import {
+  clearHostFontSizeOverride,
+  clearHostThemeOverride,
+  hasHostFontSizeOverride,
+  hasHostThemeOverride,
+  resolveHostTerminalFontSize,
+  resolveHostTerminalThemeId,
+} from "../domain/terminalAppearance";
 import { MIN_FONT_SIZE, MAX_FONT_SIZE } from "../infrastructure/config/fonts";
 import { cn } from "../lib/utils";
 import { EnvVar, Host, Identity, ManagedSource, ProxyConfig, SSHKey } from "../types";
+import { DISTRO_COLORS, DISTRO_LOGOS } from "./DistroAvatar";
 import { DistroAvatar } from "./DistroAvatar";
 import ThemeSelectPanel from "./ThemeSelectPanel";
 import {
@@ -68,6 +79,8 @@ type SubPanel =
   | "theme-select"
   | "telnet-theme-select";
 
+const LINUX_DISTRO_OPTION_IDS = [...LINUX_DISTRO_OPTIONS];
+
 interface HostDetailsPanelProps {
   initialData?: Host | null;
   availableKeys: SSHKey[];
@@ -99,6 +112,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
 }) => {
   const { t } = useI18n();
   const { checkSshAgent } = useApplicationBackend();
+  const { terminalThemeId, terminalFontSize } = useSettingsState();
   const [form, setForm] = useState<Host>(
     () =>
       initialData ||
@@ -113,7 +127,9 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         os: "linux",
         authMethod: "password",
         charset: "UTF-8",
-        theme: "Flexoki Dark",
+        theme: terminalThemeId,
+        fontSize: terminalFontSize,
+        distroMode: "auto",
         createdAt: Date.now(),
         group: defaultGroup || undefined, // Pre-fill with current navigation group
       } as Host),
@@ -176,6 +192,56 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
     setForm((prev) => ({ ...prev, [key]: value }));
   };
 
+  const effectiveThemeId = useMemo(
+    () => resolveHostTerminalThemeId(form, terminalThemeId),
+    [form, terminalThemeId],
+  );
+  const effectiveFontSize = useMemo(
+    () => resolveHostTerminalFontSize(form, terminalFontSize),
+    [form, terminalFontSize],
+  );
+  const hasEffectiveThemeOverride = useMemo(
+    () => hasHostThemeOverride(form),
+    [form],
+  );
+  const hasEffectiveFontSizeOverride = useMemo(
+    () => hasHostFontSizeOverride(form),
+    [form],
+  );
+  const effectiveTelnetThemeId =
+    form.protocols?.find((p) => p.protocol === "telnet")?.theme || effectiveThemeId;
+  const distroOptions = useMemo(
+    () =>
+      LINUX_DISTRO_OPTION_IDS.map((value) => ({
+        value,
+        label: t(`hostDetails.distro.option.${value}`),
+        icon: DISTRO_LOGOS[value],
+        bgClass: DISTRO_COLORS[value] || DISTRO_COLORS.default,
+      })),
+    [t],
+  );
+
+  const getDistroOptionLabel = useCallback(
+    (value?: string) =>
+      distroOptions.find((option) => option.value === value)?.label ||
+      value ||
+      t("hostDetails.distro.pending"),
+    [distroOptions, t],
+  );
+
+  const effectiveFormDistro = getEffectiveHostDistro(form);
+
+  const handleDistroModeChange = useCallback((mode: "auto" | "manual") => {
+    setForm((prev) => ({
+      ...prev,
+      distroMode: mode,
+      manualDistro:
+        mode === "manual"
+          ? prev.manualDistro || getEffectiveHostDistro(prev) || "linux"
+          : prev.manualDistro,
+    }));
+  }, []);
+
   const updateProxyConfig = useCallback(
     (field: keyof ProxyConfig, value: string | number) => {
       setForm((prev) => ({
@@ -295,6 +361,27 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
       password: form.savePassword === false ? undefined : form.password,
       managedSourceId: finalManagedSourceId,
     };
+    const preserveLegacyTheme = initialData?.theme != null && cleaned.themeOverride !== false;
+    const preserveLegacyFontFamily = initialData?.fontFamily != null && cleaned.fontFamilyOverride !== false;
+    const preserveLegacyFontSize = initialData?.fontSize != null && cleaned.fontSizeOverride !== false;
+
+    if (cleaned.themeOverride === false) {
+      delete cleaned.theme;
+    } else if (preserveLegacyTheme && cleaned.theme == null) {
+      cleaned.theme = initialData?.theme;
+    }
+
+    if (cleaned.fontFamilyOverride === false) {
+      delete cleaned.fontFamily;
+    } else if (preserveLegacyFontFamily && cleaned.fontFamily == null) {
+      cleaned.fontFamily = initialData?.fontFamily;
+    }
+
+    if (cleaned.fontSizeOverride === false) {
+      delete cleaned.fontSize;
+    } else if (preserveLegacyFontSize && cleaned.fontSize == null) {
+      cleaned.fontSize = initialData?.fontSize;
+    }
     onSave(cleaned);
   };
 
@@ -475,9 +562,9 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
     return (
       <ThemeSelectPanel
         open={true}
-        selectedThemeId={form.theme || "flexoki-dark"}
+        selectedThemeId={effectiveThemeId}
         onSelect={(themeId) => {
-          update("theme", themeId);
+          setForm((prev) => ({ ...prev, theme: themeId, themeOverride: true }));
           setActiveSubPanel("none");
         }}
         onClose={onCancel}
@@ -492,11 +579,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
     return (
       <ThemeSelectPanel
         open={true}
-        selectedThemeId={
-          form.protocols?.find((p) => p.protocol === "telnet")?.theme ||
-          form.theme ||
-          "flexoki-dark"
-        }
+        selectedThemeId={effectiveTelnetThemeId}
         onSelect={(themeId) => {
           // Update telnet protocol theme
           const telnetConfig = form.protocols?.find(
@@ -1100,6 +1183,113 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
             </p>
           </div>
 
+          {form.os === "linux" && (
+            <div className="space-y-2 rounded-lg border border-border/70 bg-secondary/30 p-3">
+              <div className="flex items-start gap-2">
+                <Globe size={14} className="mt-0.5 text-muted-foreground" />
+                <div className="space-y-0.5">
+                  <p className="text-xs font-semibold">{t("hostDetails.distro.title")}</p>
+                  <p className="text-xs text-muted-foreground">{t("hostDetails.distro.desc")}</p>
+                </div>
+              </div>
+
+              <div className="grid gap-2 md:grid-cols-2">
+                <div className="space-y-1">
+                  <span className="text-xs text-muted-foreground">{t("hostDetails.distro.mode")}</span>
+                  <Select
+                    value={form.distroMode || "auto"}
+                    onValueChange={(val) => handleDistroModeChange(val as "auto" | "manual")}
+                  >
+                    <SelectTrigger className="h-8" aria-label={t("hostDetails.distro.mode")}>
+                      <span className="truncate whitespace-nowrap pr-2 text-left">
+                        {form.distroMode === "manual"
+                          ? t("hostDetails.distro.mode.manual")
+                          : t("hostDetails.distro.mode.auto")}
+                      </span>
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="auto">{t("hostDetails.distro.mode.auto")}</SelectItem>
+                      <SelectItem value="manual">{t("hostDetails.distro.mode.manual")}</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {form.distroMode === "manual" ? (
+                  <div className="space-y-1">
+                    <span className="text-xs text-muted-foreground">{t("hostDetails.distro.manualLabel")}</span>
+                    <Select
+                      value={form.manualDistro}
+                      onValueChange={(val) => update("manualDistro", val)}
+                    >
+                      <SelectTrigger className="h-8" aria-label={t("hostDetails.distro.manualLabel")}>
+                        {(() => {
+                          const selectedOption = distroOptions.find((option) => option.value === form.manualDistro);
+                          return selectedOption ? (
+                            <div className="flex min-w-0 items-center gap-2 pr-2">
+                              <div
+                                className={cn(
+                                  "flex h-4 w-4 shrink-0 items-center justify-center overflow-hidden rounded-[2px]",
+                                  selectedOption.bgClass,
+                                )}
+                              >
+                                {selectedOption.icon ? (
+                                  <img
+                                    src={selectedOption.icon}
+                                    alt={selectedOption.label}
+                                    className="h-3 w-3 object-contain invert brightness-0"
+                                  />
+                                ) : (
+                                  <div className="h-2 w-2 rounded-full bg-white/70" />
+                                )}
+                              </div>
+                              <span className="truncate whitespace-nowrap">{selectedOption.label}</span>
+                            </div>
+                          ) : (
+                            <SelectValue placeholder={t("hostDetails.distro.unknown")} />
+                          );
+                        })()}
+                      </SelectTrigger>
+                      <SelectContent className="min-w-[14rem]">
+                        {distroOptions.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            <div className="flex items-center gap-2">
+                              <div
+                                className={cn(
+                                  "flex h-4 w-4 shrink-0 items-center justify-center overflow-hidden rounded-[2px]",
+                                  option.bgClass,
+                                )}
+                              >
+                                {option.icon ? (
+                                  <img
+                                    src={option.icon}
+                                    alt={option.label}
+                                    className="h-3 w-3 object-contain invert brightness-0"
+                                  />
+                                ) : (
+                                  <div className="h-2 w-2 rounded-full bg-white/70" />
+                                )}
+                              </div>
+                              <span className="whitespace-nowrap">{option.label}</span>
+                            </div>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                ) : (
+                  <div className="space-y-1">
+                    <span className="text-xs text-muted-foreground">{t("hostDetails.distro.detectedLabel")}</span>
+                    <div className="flex h-8 items-center rounded-md border border-border/60 bg-background/50 px-3 text-sm">
+                      {effectiveFormDistro
+                        ? getDistroOptionLabel(effectiveFormDistro)
+                        : t("hostDetails.distro.unknown")}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
           {/* SSH Theme Selection */}
           <button
             type="button"
@@ -1110,15 +1300,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:
-                  customThemeStore.getThemeById(form.theme || "flexoki-dark")?.colors.background || "#100F0F",
+                  customThemeStore.getThemeById(effectiveThemeId)?.colors.background || "#100F0F",
                 color:
-                  customThemeStore.getThemeById(form.theme || "flexoki-dark")?.colors.foreground || "#CECDC3",
+                  customThemeStore.getThemeById(effectiveThemeId)?.colors.foreground || "#CECDC3",
               }}
             >
               <div className="p-0.5">
                 <div
                   style={{
-                    color: customThemeStore.getThemeById(form.theme || "flexoki-dark")?.colors.green,
+                    color: customThemeStore.getThemeById(effectiveThemeId)?.colors.green,
                   }}
                 >
                   $
@@ -1126,9 +1316,19 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               </div>
             </div>
             <span className="text-sm flex-1">
-              {customThemeStore.getThemeById(form.theme || "flexoki-dark")?.name || "Flexoki Dark"}
+              {customThemeStore.getThemeById(effectiveThemeId)?.name || "Flexoki Dark"}
             </span>
           </button>
+          {hasEffectiveThemeOverride && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="w-full justify-start text-primary"
+              onClick={() => setForm((prev) => clearHostThemeOverride(prev))}
+            >
+              {t("common.useGlobal")}
+            </Button>
+          )}
 
           {/* Font Size */}
           <div className="flex items-center gap-2">
@@ -1137,11 +1337,15 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               variant="outline"
               size="sm"
               onClick={() => {
-                if ((form.fontSize || 14) > MIN_FONT_SIZE) {
-                  update("fontSize", (form.fontSize || 14) - 1);
+                if (effectiveFontSize > MIN_FONT_SIZE) {
+                  setForm((prev) => ({
+                    ...prev,
+                    fontSize: effectiveFontSize - 1,
+                    fontSizeOverride: true,
+                  }));
                 }
               }}
-              disabled={(form.fontSize || 14) <= MIN_FONT_SIZE}
+              disabled={effectiveFontSize <= MIN_FONT_SIZE}
               className="px-2 h-8"
             >
               -
@@ -1150,25 +1354,43 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               type="number"
               min={MIN_FONT_SIZE}
               max={MAX_FONT_SIZE}
-              value={form.fontSize || 14}
+              value={effectiveFontSize}
               onChange={(e) => {
                 const val = parseInt(e.target.value);
                 if (val >= MIN_FONT_SIZE && val <= MAX_FONT_SIZE) {
-                  update("fontSize", val);
+                  setForm((prev) => ({
+                    ...prev,
+                    fontSize: val,
+                    fontSizeOverride: true,
+                  }));
                 }
               }}
               className="w-16 text-center h-8"
             />
             <span className="text-sm text-muted-foreground">pt</span>
+            {hasEffectiveFontSizeOverride && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="ml-auto h-8 text-primary"
+                onClick={() => setForm((prev) => clearHostFontSizeOverride(prev))}
+              >
+                {t("common.useGlobal")}
+              </Button>
+            )}
             <Button
               variant="outline"
               size="sm"
               onClick={() => {
-                if ((form.fontSize || 14) < MAX_FONT_SIZE) {
-                  update("fontSize", (form.fontSize || 14) + 1);
+                if (effectiveFontSize < MAX_FONT_SIZE) {
+                  setForm((prev) => ({
+                    ...prev,
+                    fontSize: effectiveFontSize + 1,
+                    fontSizeOverride: true,
+                  }));
                 }
               }}
-              disabled={(form.fontSize || 14) >= MAX_FONT_SIZE}
+              disabled={effectiveFontSize >= MAX_FONT_SIZE}
               className="px-2 h-8"
             >
               +
@@ -1491,21 +1713,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:
-                    customThemeStore.getThemeById(
-                      form.protocols?.find((p) => p.protocol === "telnet")?.theme || form.theme || "flexoki-dark"
-                    )?.colors.background || "#100F0F",
+                    customThemeStore.getThemeById(effectiveTelnetThemeId)?.colors.background || "#100F0F",
                   color:
-                    customThemeStore.getThemeById(
-                      form.protocols?.find((p) => p.protocol === "telnet")?.theme || form.theme || "flexoki-dark"
-                    )?.colors.foreground || "#CECDC3",
+                    customThemeStore.getThemeById(effectiveTelnetThemeId)?.colors.foreground || "#CECDC3",
                 }}
               >
                 <div className="p-0.5">
                   <div
                     style={{
-                      color: customThemeStore.getThemeById(
-                        form.protocols?.find((p) => p.protocol === "telnet")?.theme || form.theme || "flexoki-dark"
-                      )?.colors.green,
+                      color: customThemeStore.getThemeById(effectiveTelnetThemeId)?.colors.green,
                     }}
                   >
                     $
@@ -1513,9 +1729,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                 </div>
               </div>
               <span className="text-sm flex-1">
-                {customThemeStore.getThemeById(
-                  form.protocols?.find((p) => p.protocol === "telnet")?.theme || form.theme || "flexoki-dark"
-                )?.name || "Flexoki Dark"}
+                {customThemeStore.getThemeById(effectiveTelnetThemeId)?.name || "Flexoki Dark"}
               </span>
             </button>
           </Card>

components/HostTreeView.tsx

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

components/KeychainManager.tsx

@@ -621,7 +621,7 @@ echo $3 >> "$FILE"`);
                   </Button>
                 </DropdownTrigger>
               </div>
-              <DropdownContent className="w-44" align="start" alignToParent>
+              <DropdownContent className="w-48" align="start" alignToParent>
                 <Button
                   variant="ghost"
                   className="w-full justify-start gap-2"

components/KnownHostsManager.tsx

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

components/SFTPModal.tsx

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

components/ScriptsSidePanel.tsx

@@ -16,7 +16,7 @@ import { ScrollArea } from './ui/scroll-area';
 interface ScriptsSidePanelProps {
   snippets: Snippet[];
   packages: string[];
-  onSnippetClick: (command: string) => void;
+  onSnippetClick: (command: string, noAutoRun?: boolean) => void;
   isVisible?: boolean;
 }
 
@@ -115,8 +115,8 @@ const ScriptsSidePanelInner: React.FC<ScriptsSidePanelProps> = ({
     });
   }, [selectedPackage]);
 
-  const handleSnippetClick = useCallback((command: string) => {
-    onSnippetClick(command);
+  const handleSnippetClick = useCallback((command: string, noAutoRun?: boolean) => {
+    onSnippetClick(command, noAutoRun);
   }, [onSnippetClick]);
 
   if (!isVisible) return null;
@@ -196,7 +196,7 @@ const ScriptsSidePanelInner: React.FC<ScriptsSidePanelProps> = ({
           {displayedSnippets.map((s) => (
             <button
               key={s.id}
-              onClick={() => handleSnippetClick(s.command)}
+              onClick={() => handleSnippetClick(s.command, s.noAutoRun)}
               className="w-full text-left px-3 py-2 hover:bg-accent/50 transition-colors flex flex-col gap-0.5"
             >
               <span className="text-xs font-medium truncate">{s.label}</span>

components/SettingsPage.tsx

@@ -2,13 +2,14 @@
  * Settings Page - Standalone settings window content
  * This component is rendered in a separate Electron window
  */
-import { AppWindow, Cloud, FileType, HardDrive, Keyboard, Palette, TerminalSquare, X } from "lucide-react";
+import { AppWindow, Cloud, FileType, HardDrive, Keyboard, Palette, Sparkles, TerminalSquare, X } from "lucide-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useSettingsState } from "../application/state/useSettingsState";
 import { usePortForwardingState } from "../application/state/usePortForwardingState";
 import { useVaultState } from "../application/state/useVaultState";
 import { useWindowControls } from "../application/state/useWindowControls";
 import { useUpdateCheck } from "../application/state/useUpdateCheck";
+import { useAIState } from "../application/state/useAIState";
 import { I18nProvider, useI18n } from "../application/i18n/I18nProvider";
 import SettingsApplicationTab from "./SettingsApplicationTab";
 import SettingsAppearanceTab from "./settings/tabs/SettingsAppearanceTab";
@@ -16,18 +17,41 @@ import SettingsFileAssociationsTab from "./settings/tabs/SettingsFileAssociation
 import SettingsShortcutsTab from "./settings/tabs/SettingsShortcutsTab";
 import SettingsTerminalTab from "./settings/tabs/SettingsTerminalTab";
 import SettingsSystemTab from "./settings/tabs/SettingsSystemTab";
+const SettingsAITab = React.lazy(() => import("./settings/tabs/SettingsAITab"));
 import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
 import type { TerminalFont } from "../infrastructure/config/fonts";
 
 const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
 
+class AITabErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  { error: Error | null }
+> {
+  state: { error: Error | null } = { error: null };
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+  render() {
+    if (this.state.error) {
+      return (
+        <div style={{ padding: 32, color: "#f87171", fontFamily: "monospace", whiteSpace: "pre-wrap" }}>
+          <h3 style={{ marginBottom: 8 }}>AI Settings Error</h3>
+          <div>{this.state.error.message}</div>
+          <div style={{ marginTop: 8, fontSize: 12, color: "#888" }}>{this.state.error.stack}</div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
 type SettingsState = ReturnType<typeof useSettingsState> & {
     availableFonts: TerminalFont[];
 };
 
 const SettingsSyncTab = React.lazy(() => import("./settings/tabs/SettingsSyncTab"));
 
-const SettingsSyncTabWithVault: React.FC = () => {
+const SettingsSyncTabWithVault: React.FC<{ onSettingsApplied?: () => void }> = ({ onSettingsApplied }) => {
     const {
         hosts,
         keys,
@@ -66,6 +90,7 @@ const SettingsSyncTabWithVault: React.FC = () => {
             importDataFromString={importDataFromString}
             importPortForwardingRules={importPortForwardingRules}
             clearVaultData={clearVaultData}
+            onSettingsApplied={onSettingsApplied}
         />
     );
 };
@@ -73,7 +98,8 @@ const SettingsSyncTabWithVault: React.FC = () => {
 const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }) => {
     const { t } = useI18n();
     const { notifyRendererReady, closeSettingsWindow } = useWindowControls();
-    const { updateState, checkNow, installUpdate, openReleasePage } = useUpdateCheck();
+    const { updateState, checkNow, installUpdate, openReleasePage } = useUpdateCheck({ autoUpdateEnabled: settings.autoUpdateEnabled });
+    const aiState = useAIState();
     const [activeTab, setActiveTab] = useState("application");
     const [mountedTabs, setMountedTabs] = useState(() => new Set(["application"]));
 
@@ -152,6 +178,12 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                         >
                             <FileType size={14} /> {t("settings.tab.sftpFileAssociations")}
                         </TabsTrigger>
+                        <TabsTrigger
+                            value="ai"
+                            className="w-full justify-start gap-2 px-3 py-2 text-sm data-[state=active]:bg-background hover:bg-background/60 rounded-md transition-colors"
+                        >
+                            <Sparkles size={14} /> AI
+                        </TabsTrigger>
                         <TabsTrigger
                             value="sync"
                             className="w-full justify-start gap-2 px-3 py-2 text-sm data-[state=active]:bg-background hover:bg-background/60 rounded-md transition-colors"
@@ -228,9 +260,40 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                         <SettingsFileAssociationsTab />
                     )}
 
+                    {mountedTabs.has("ai") && (
+                        <AITabErrorBoundary>
+                        <React.Suspense fallback={null}>
+                        <SettingsAITab
+                            providers={aiState.providers}
+                            addProvider={aiState.addProvider}
+                            updateProvider={aiState.updateProvider}
+                            removeProvider={aiState.removeProvider}
+                            activeProviderId={aiState.activeProviderId}
+                            setActiveProviderId={aiState.setActiveProviderId}
+                            activeModelId={aiState.activeModelId}
+                            setActiveModelId={aiState.setActiveModelId}
+                            globalPermissionMode={aiState.globalPermissionMode}
+                            setGlobalPermissionMode={aiState.setGlobalPermissionMode}
+                            externalAgents={aiState.externalAgents}
+                            setExternalAgents={aiState.setExternalAgents}
+                            defaultAgentId={aiState.defaultAgentId}
+                            setDefaultAgentId={aiState.setDefaultAgentId}
+                            commandBlocklist={aiState.commandBlocklist}
+                            setCommandBlocklist={aiState.setCommandBlocklist}
+                            commandTimeout={aiState.commandTimeout}
+                            setCommandTimeout={aiState.setCommandTimeout}
+                            maxIterations={aiState.maxIterations}
+                            setMaxIterations={aiState.setMaxIterations}
+                            webSearchConfig={aiState.webSearchConfig}
+                            setWebSearchConfig={aiState.setWebSearchConfig}
+                        />
+                        </React.Suspense>
+                        </AITabErrorBoundary>
+                    )}
+
                     {mountedTabs.has("sync") && (
                         <React.Suspense fallback={null}>
-                            <SettingsSyncTabWithVault />
+                            <SettingsSyncTabWithVault onSettingsApplied={settings.rehydrateAllFromStorage} />
                         </React.Suspense>
                     )}
 
@@ -247,6 +310,10 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                             closeToTray={settings.closeToTray}
                             setCloseToTray={settings.setCloseToTray}
                             hotkeyRegistrationError={settings.hotkeyRegistrationError}
+                            globalHotkeyEnabled={settings.globalHotkeyEnabled}
+                            setGlobalHotkeyEnabled={settings.setGlobalHotkeyEnabled}
+                            autoUpdateEnabled={settings.autoUpdateEnabled}
+                            setAutoUpdateEnabled={settings.setAutoUpdateEnabled}
                             updateState={updateState}
                             checkNow={checkNow}
                             installUpdate={installUpdate}

components/SftpSidePanel.tsx

@@ -101,7 +101,14 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
   }), [fileWatchHandlers, sftpUseCompressedUpload, sftpShowHiddenFiles]);
 
   const sftp = useSftpState(hosts, keys, identities, sftpOptions);
-  const { showSaveDialog, startStreamTransfer } = useSftpBackend();
+  const {
+    showSaveDialog,
+    selectDirectory,
+    startStreamTransfer,
+    listSftp,
+    mkdirLocal,
+    deleteLocalFile,
+  } = useSftpBackend();
 
   const sftpRef = useRef(sftp);
   sftpRef.current = sftp;
@@ -153,7 +160,11 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
     getOpenerForFileRef,
     setOpenerForExtension,
     t,
+    listSftp,
+    mkdirLocal,
+    deleteLocalFile,
     showSaveDialog,
+    selectDirectory,
     startStreamTransfer,
     getSftpIdForConnection: sftp.getSftpIdForConnection,
   });

components/SftpView.tsx

@@ -86,8 +86,15 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
 
   const sftp = useSftpState(hosts, keys, identities, sftpOptions);
 
-  // Get stream transfer functions for optimized downloads
-  const { showSaveDialog, startStreamTransfer } = useSftpBackend();
+  // Get backend helpers for file downloads and local filesystem writes.
+  const {
+    showSaveDialog,
+    selectDirectory,
+    startStreamTransfer,
+    listSftp,
+    mkdirLocal,
+    deleteLocalFile,
+  } = useSftpBackend();
 
   // Store sftp in a ref so callbacks can access the latest instance
   // without needing to re-create when sftp changes
@@ -176,7 +183,11 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
     getOpenerForFileRef,
     setOpenerForExtension,
     t,
+    listSftp,
+    mkdirLocal,
+    deleteLocalFile,
     showSaveDialog,
+    selectDirectory,
     startStreamTransfer,
     getSftpIdForConnection: sftp.getSftpIdForConnection,
   });

components/SnippetsManager.tsx

@@ -28,6 +28,7 @@ interface SnippetsManagerProps {
   hotkeyScheme: HotkeyScheme;
   keyBindings: KeyBinding[];
   onSave: (snippet: Snippet) => void;
+  onBulkSave: (snippets: Snippet[]) => void;
   onDelete: (id: string) => void;
   onPackagesChange: (packages: string[]) => void;
   onRunSnippet?: (snippet: Snippet, targetHosts: Host[]) => void;
@@ -51,6 +52,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
   hotkeyScheme,
   keyBindings,
   onSave,
+  onBulkSave,
   onDelete,
   onPackagesChange,
   onRunSnippet,
@@ -300,6 +302,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
         package: editingSnippet.package || '',
         targets: targetSelection,
         shortkey: editingSnippet.shortkey,
+        noAutoRun: editingSnippet.noAutoRun,
       });
       setRightPanelMode('none');
     }
@@ -486,11 +489,8 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
     // Update packages first, then save snippets
     onPackagesChange(keep);
     
-    // Only save snippets that were actually modified
-    const modifiedSnippets = updatedSnippets.filter((s, index) => 
-      s.package !== snippets[index].package
-    );
-    modifiedSnippets.forEach(onSave);
+    // Bulk-save all snippets to avoid stale-closure overwrites
+    onBulkSave(updatedSnippets);
     
     // Reset selected package if it was deleted
     if (selectedPackage && (selectedPackage === path || selectedPackage.startsWith(path + '/'))) {
@@ -527,7 +527,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
     });
 
     onPackagesChange(Array.from(new Set(updatedPackages)));
-    updatedSnippets.forEach(onSave);
+    onBulkSave(updatedSnippets);
     if (selectedPackage === source) setSelectedPackage(newPath);
   };
 
@@ -568,8 +568,8 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
       return;
     }
 
-    // Validate: duplicate (case-insensitive)
-    const existingPackage = packages.find(p => p.toLowerCase() === newPath.toLowerCase());
+    // Validate: duplicate (case-insensitive), excluding the package being renamed
+    const existingPackage = packages.find(p => p !== renamingPackagePath && p.toLowerCase() === newPath.toLowerCase());
     if (existingPackage) {
       setRenameError(t('snippets.renameDialog.error.duplicate'));
       return;
@@ -595,7 +595,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
     });
 
     onPackagesChange(Array.from(new Set(updatedPackages)));
-    updatedSnippets.forEach(onSave);
+    onBulkSave(updatedSnippets);
 
     // Update selected package if it was renamed
     if (selectedPackage === renamingPackagePath) {
@@ -792,6 +792,17 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
               />
             </Card>
 
+            {/* No Auto Run */}
+            <label className="flex items-center gap-2 cursor-pointer px-1">
+              <input
+                type="checkbox"
+                checked={editingSnippet.noAutoRun ?? false}
+                onChange={(e) => setEditingSnippet({ ...editingSnippet, noAutoRun: e.target.checked || undefined })}
+                className="rounded border-input"
+              />
+              <span className="text-xs text-muted-foreground">{t('snippets.field.noAutoRun')}</span>
+            </label>
+
             {/* Shortkey */}
             <Card className="p-3 space-y-2 bg-card border-border/80">
               <div className="flex items-center justify-between">

components/Terminal.tsx

@@ -4,7 +4,7 @@ import { SerializeAddon } from "@xterm/addon-serialize";
 import { SearchAddon } from "@xterm/addon-search";
 import "@xterm/xterm/css/xterm.css";
 import { Cpu, HardDrive, Maximize2, MemoryStick, Radio, ArrowDownToLine, ArrowUpFromLine } from "lucide-react";
-import React, { memo, useEffect, useMemo, useRef, useState } from "react";
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 // flushSync removed - no longer needed
 import { useI18n } from "../application/i18n/I18nProvider";
 import { logger } from "../lib/logger";
@@ -25,6 +25,11 @@ import {
   shouldEnableNativeUserInputAutoScroll,
   shouldScrollOnTerminalInput,
 } from "../domain/terminalScroll";
+import {
+  resolveHostTerminalFontFamilyId,
+  resolveHostTerminalFontSize,
+  resolveHostTerminalThemeId,
+} from "../domain/terminalAppearance";
 import { resolveHostAuth } from "../domain/sshAuth";
 import { useTerminalBackend } from "../application/state/useTerminalBackend";
 import KnownHostConfirmDialog, { HostKeyInfo } from "./KnownHostConfirmDialog";
@@ -118,12 +123,13 @@ interface TerminalProps {
   terminalSettings?: TerminalSettings;
   sessionId: string;
   startupCommand?: string;
+  noAutoRun?: boolean;
   serialConfig?: SerialConfig;
   hotkeyScheme?: "disabled" | "mac" | "pc";
   keyBindings?: KeyBinding[];
   onHotkeyAction?: (action: string, event: KeyboardEvent) => void;
   onStatusChange?: (sessionId: string, status: TerminalSession["status"]) => void;
-  onSessionExit?: (sessionId: string) => void;
+  onSessionExit?: (sessionId: string, evt: { exitCode?: number; signal?: number; error?: string; reason?: "exited" | "error" | "timeout" | "closed" }) => void;
   onTerminalDataCapture?: (sessionId: string, data: string) => void;
   onOsDetected?: (hostId: string, distro: string) => void;
   onCloseSession?: (sessionId: string) => void;
@@ -151,6 +157,8 @@ interface TerminalProps {
   onToggleComposeBar?: () => void;
   isWorkspaceComposeBarOpen?: boolean;
   onBroadcastInput?: (data: string, sourceSessionId: string) => void;
+  // Session log configuration for real-time streaming
+  sessionLog?: { enabled: boolean; directory: string; format: string };
 }
 
 // Helper function to format network speed (bytes/sec) to human-readable format
@@ -184,6 +192,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   terminalSettings,
   sessionId,
   startupCommand,
+  noAutoRun,
   serialConfig,
   hotkeyScheme = "disabled",
   keyBindings = [],
@@ -207,6 +216,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   onToggleComposeBar,
   isWorkspaceComposeBarOpen,
   onBroadcastInput,
+  sessionLog,
 }) => {
   // Timeout for connection - increased to 120s to allow time for keyboard-interactive (2FA) authentication
   const CONNECTION_TIMEOUT = 120000;
@@ -238,22 +248,23 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   useEffect(() => {
     if (xtermRuntimeRef.current) {
       // 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;
+      // Host-level toggle: undefined = inherit global, true/false = explicit override
+      const hostEnabled = host?.keywordHighlightEnabled;
+
+      // Global and host-level highlights are independent:
+      // global toggle controls global rules, host toggle controls host-specific rules
+      const effectiveGlobalEnabled = globalEnabled;
+      const effectiveHostEnabled = hostEnabled ?? false;
 
-      // Merge rules: include only rules from enabled sources
       const mergedRules = [
-        ...(globalEnabled ? globalRules : []),
-        ...(hostEnabled ? hostRules : [])
+        ...(effectiveGlobalEnabled ? globalRules : []),
+        ...(effectiveHostEnabled ? hostRules : [])
       ];
-
-      // Enable highlighting if either global or host-level is enabled
-      const isEnabled = globalEnabled || hostEnabled;
+      const isEnabled = effectiveGlobalEnabled || effectiveHostEnabled;
 
       xtermRuntimeRef.current.keywordHighlighter.setRules(mergedRules, isEnabled);
     }
@@ -296,6 +307,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const [showSFTP, setShowSFTP] = useState(false);
   const [progressValue, setProgressValue] = useState(15);
   const [hasSelection, setHasSelection] = useState(false);
+  const [isDisconnectedDialogDismissed, setIsDisconnectedDialogDismissed] = useState(false);
 
   const statusRef = useRef<TerminalSession["status"]>(status);
   statusRef.current = status;
@@ -371,17 +383,39 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const [pendingHostKeyInfo, setPendingHostKeyInfo] = useState<HostKeyInfo | null>(null);
   const pendingConnectionRef = useRef<(() => void) | null>(null);
 
+  // OSC-52 clipboard read prompt
+  const [osc52ReadPromptVisible, setOsc52ReadPromptVisible] = useState(false);
+  const osc52ReadResolverRef = useRef<((allowed: boolean) => void) | null>(null);
+  const handleOsc52ReadRequest = useCallback((): Promise<boolean> => {
+    // Reject if terminal is not visible (background tab) — user can't see the prompt
+    if (!isVisibleRef.current) return Promise.resolve(false);
+    // Reject if another prompt is already pending (avoid resolver overwrite)
+    if (osc52ReadResolverRef.current) return Promise.resolve(false);
+    return new Promise((resolve) => {
+      osc52ReadResolverRef.current = resolve;
+      setOsc52ReadPromptVisible(true);
+    });
+  }, []);
+  const handleOsc52ReadResponse = useCallback((allowed: boolean) => {
+    setOsc52ReadPromptVisible(false);
+    osc52ReadResolverRef.current?.(allowed);
+    osc52ReadResolverRef.current = null;
+    // Restore focus to terminal
+    termRef.current?.focus();
+  }, []);
+
   // 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)
-        || customThemes.find((t) => t.id === host.theme);
+    const themeId = resolveHostTerminalThemeId(host, terminalTheme.id);
+    if (themeId) {
+      const hostTheme = TERMINAL_THEMES.find((t) => t.id === themeId)
+        || customThemes.find((t) => t.id === themeId);
       if (hostTheme) return hostTheme;
     }
     return terminalTheme;
-  }, [host.theme, terminalTheme, customThemes]);
+  }, [host, terminalTheme, customThemes]);
 
   const resolvedChainHosts =
     (host.hostChain?.hostIds
@@ -427,6 +461,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     resolvedChainHosts,
     sessionId,
     startupCommand,
+    noAutoRun,
     terminalSettings,
     terminalSettingsRef,
     terminalBackend,
@@ -462,6 +497,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     onTerminalDataCapture,
     onOsDetected,
     onCommandExecuted,
+    sessionLog,
   });
   sessionStartersRef.current = sessionStarters;
 
@@ -473,6 +509,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     setProgressLogs([]);
     setShowLogs(false);
     setIsCancelling(false);
+    setIsDisconnectedDialogDismissed(false);
 
     const boot = async () => {
       try {
@@ -502,6 +539,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
           serialLocalEcho: serialConfig?.localEcho,
           serialLineMode: serialConfig?.lineMode,
           serialLineBufferRef,
+          onOsc52ReadRequest: handleOsc52ReadRequest,
         });
 
         xtermRuntimeRef.current = runtime;
@@ -516,12 +554,14 @@ const TerminalComponent: React.FC<TerminalProps> = ({
         const globalRules = terminalSettingsRef.current?.keywordHighlightRules ?? [];
         const hostRules = host?.keywordHighlightRules ?? [];
         const globalEnabled = terminalSettingsRef.current?.keywordHighlightEnabled ?? false;
-        const hostEnabled = host?.keywordHighlightEnabled ?? false;
+        const hostEnabled = host?.keywordHighlightEnabled;
+        const effectiveGlobalEnabled = globalEnabled;
+        const effectiveHostEnabled = hostEnabled ?? false;
         const mergedRules = [
-          ...(globalEnabled ? globalRules : []),
-          ...(hostEnabled ? hostRules : [])
+          ...(effectiveGlobalEnabled ? globalRules : []),
+          ...(effectiveHostEnabled ? hostRules : [])
         ];
-        const isEnabled = globalEnabled || hostEnabled;
+        const isEnabled = effectiveGlobalEnabled || effectiveHostEnabled;
         runtime.keywordHighlighter.setRules(mergedRules, isEnabled);
 
         const term = runtime.term;
@@ -647,6 +687,12 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- updateStatus is a stable internal helper
   }, [status, auth.needsAuth, host.protocol, host.hostname]);
 
+  useEffect(() => {
+    if (status === "connecting") {
+      setIsDisconnectedDialogDismissed(false);
+    }
+  }, [status]);
+
   const safeFit = (options?: { force?: boolean; requireVisible?: boolean }) => {
     const fitAddon = fitAddonRef.current;
     if (!fitAddon) return;
@@ -693,7 +739,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
   useEffect(() => {
     if (termRef.current) {
-      const effectiveFontSize = host.fontSize || fontSize;
+      const effectiveFontSize = resolveHostTerminalFontSize(host, fontSize);
       termRef.current.options.fontSize = effectiveFontSize;
 
       termRef.current.options.theme = {
@@ -750,14 +796,14 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
       setTimeout(() => safeFit({ force: true }), 50);
     }
-  }, [fontSize, effectiveTheme, terminalSettings, host.fontSize]);
+  }, [fontSize, effectiveTheme, terminalSettings, host]);
 
   useEffect(() => {
     if (termRef.current) {
-      const effectiveFontSize = host.fontSize || fontSize;
+      const effectiveFontSize = resolveHostTerminalFontSize(host, fontSize);
       termRef.current.options.fontSize = effectiveFontSize;
 
-      const hostFontId = host.fontFamily || fontFamilyId || "menlo";
+      const hostFontId = resolveHostTerminalFontFamilyId(host, fontFamilyId) || "menlo";
       const fontObj = availableFonts.find((f) => f.id === hostFontId) || availableFonts[0];
       termRef.current.options.fontFamily = fontObj.family;
 
@@ -768,7 +814,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
       setTimeout(() => safeFit({ force: true }), 50);
     }
-  }, [host.fontSize, host.fontFamily, host.theme, fontFamilyId, fontSize, effectiveTheme, availableFonts]);
+  }, [host, fontFamilyId, fontSize, effectiveTheme, availableFonts]);
 
   useEffect(() => {
     if (!isVisible) return;
@@ -816,7 +862,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
         if (terminalSettings && termRef.current) {
           const fontFamily = termRef.current.options?.fontFamily || "";
-          const effectiveFontSize = host.fontSize || fontSize;
+          const effectiveFontSize = resolveHostTerminalFontSize(host, fontSize);
           if (typeof document !== "undefined" && document.fonts?.check) {
             const weightSpec = `${terminalSettings.fontWeightBold} ${effectiveFontSize}px ${fontFamily}`;
             const resolvedBold = document.fonts.check(weightSpec)
@@ -852,7 +898,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     return () => {
       cancelled = true;
     };
-  }, [host.id, host.fontFamily, host.fontSize, fontFamilyId, fontSize, resizeSession, sessionId, terminalSettings]);
+  }, [host, fontFamilyId, fontSize, resizeSession, sessionId, terminalSettings]);
 
   useEffect(() => {
     if (!isVisible || !containerRef.current || !fitAddonRef.current) return;
@@ -1078,6 +1124,14 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     onCloseSession?.(sessionId);
   };
 
+  const handleDismissDisconnectedDialog = () => {
+    setIsDisconnectedDialogDismissed(true);
+  };
+
+  const handleCloseDisconnectedSession = () => {
+    onCloseSession?.(sessionId);
+  };
+
   const handleHostKeyClose = () => {
     setNeedsHostKeyVerification(false);
     setPendingHostKeyInfo(null);
@@ -1118,17 +1172,29 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     cleanupSession();
     auth.resetForRetry();
     hasRunStartupCommandRef.current = false;
+    setIsDisconnectedDialogDismissed(false);
     setStatus("connecting");
     setError(null);
     setProgressLogs(["Retrying secure channel..."]);
     setShowLogs(true);
-    if (host.protocol === "local" || host.hostname === "localhost") {
+    if (host.protocol === "serial") {
+      sessionStarters.startSerial(termRef.current);
+    } else if (host.protocol === "local" || host.hostname === "localhost") {
       sessionStarters.startLocal(termRef.current);
+    } else if (host.protocol === "telnet") {
+      sessionStarters.startTelnet(termRef.current);
+    } else if (host.moshEnabled) {
+      sessionStarters.startMosh(termRef.current);
     } else {
       sessionStarters.startSSH(termRef.current);
     }
   };
 
+  const shouldShowConnectionDialog = status !== "connected"
+    && !needsHostKeyVerification
+    && !((isLocalConnection || isSerialConnection) && status === "connecting")
+    && !(status === "disconnected" && isDisconnectedDialogDismissed);
+
   // Drag and drop handlers
   const handleDragEnter = (e: React.DragEvent) => {
     e.preventDefault();
@@ -1678,10 +1744,31 @@ const TerminalComponent: React.FC<TerminalProps> = ({
             </div>
           )}
 
+          {/* OSC-52 clipboard read prompt */}
+          {osc52ReadPromptVisible && (
+            <div
+              className="absolute inset-0 z-40 flex items-center justify-center bg-background/60"
+              onKeyDown={(e) => {
+                if (e.key === 'Escape') handleOsc52ReadResponse(false);
+              }}
+            >
+              <div className="rounded-lg border bg-card p-4 shadow-lg max-w-sm space-y-3">
+                <p className="text-sm font-medium">{t("terminal.osc52.readPrompt.title")}</p>
+                <p className="text-sm text-muted-foreground">{t("terminal.osc52.readPrompt.desc")}</p>
+                <div className="flex justify-end gap-2">
+                  <Button variant="secondary" size="sm" onClick={() => handleOsc52ReadResponse(false)}>
+                    {t("terminal.osc52.readPrompt.deny")}
+                  </Button>
+                  <Button size="sm" autoFocus onClick={() => handleOsc52ReadResponse(true)}>
+                    {t("terminal.osc52.readPrompt.allow")}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+
           {/* Connection dialog: skip for local/serial during connecting phase, but show on error */}
-          {status !== "connected" && !needsHostKeyVerification && !(
-            (isLocalConnection || isSerialConnection) && status === "connecting"
-          ) && (
+          {shouldShowConnectionDialog && (
               <TerminalConnectionDialog
                 host={host}
                 status={status}
@@ -1692,6 +1779,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
                 showLogs={showLogs}
                 _setShowLogs={setShowLogs}
                 keys={keys}
+                onDismissDisconnected={handleDismissDisconnectedDialog}
                 authProps={{
                   authMethod: auth.authMethod,
                   setAuthMethod: auth.setAuthMethod,
@@ -1717,7 +1805,8 @@ const TerminalComponent: React.FC<TerminalProps> = ({
                   timeLeft,
                   isCancelling,
                   progressLogs,
-                  onCancel: handleCancelConnect,
+                  onCancelConnect: handleCancelConnect,
+                  onCloseSession: handleCloseDisconnectedSession,
                   onRetry: handleRetry,
                 }}
               />

components/TerminalLayer.tsx

@@ -1,11 +1,23 @@
-import { Circle, FolderTree, LayoutGrid, PanelLeft, PanelRight, Palette, Server, X, Zap } from 'lucide-react';
+import { Circle, FolderTree, LayoutGrid, MessageSquare, PanelLeft, PanelRight, Palette, Server, X, Zap } from 'lucide-react';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useActiveTabId } from '../application/state/activeTabStore';
 import { useTerminalBackend } from '../application/state/useTerminalBackend';
 import { collectSessionIds } from '../domain/workspace';
 import { SplitDirection } from '../domain/workspace';
 import { KeyBinding, TerminalSettings } from '../domain/models';
+import {
+  clearHostFontFamilyOverride,
+  clearHostFontSizeOverride,
+  clearHostThemeOverride,
+  hasHostFontFamilyOverride,
+  hasHostFontSizeOverride,
+  hasHostThemeOverride,
+  resolveHostTerminalFontFamilyId,
+  resolveHostTerminalFontSize,
+  resolveHostTerminalThemeId,
+} from '../domain/terminalAppearance';
 import { cn } from '../lib/utils';
+import { detectLocalOs } from '../lib/localShell';
 import { useStoredString } from '../application/state/useStoredString';
 import { buildCacheKey } from '../application/state/sftp/sharedRemoteHostCache';
 import type { DropEntry } from '../lib/sftpFileUtils';
@@ -15,13 +27,16 @@ import Terminal from './Terminal';
 import { SftpSidePanel } from './SftpSidePanel';
 import { ScriptsSidePanel } from './ScriptsSidePanel';
 import { ThemeSidePanel } from './terminal/ThemeSidePanel';
+import { AIChatSidePanel } from './AIChatSidePanel';
+import { useAIState } from '../application/state/useAIState';
 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';
+import { setupMcpApprovalBridge } from '../infrastructure/ai/shared/approvalGate';
 
-type SidePanelTab = 'sftp' | 'scripts' | 'theme';
+type SidePanelTab = 'sftp' | 'scripts' | 'theme' | 'ai';
 
 type WorkspaceRect = { x: number; y: number; w: number; h: number };
 
@@ -63,6 +78,38 @@ const filterTabsMap = <T,>(source: Map<string, T>, validIds: Set<string>): Map<s
   return changed ? next : source;
 };
 
+type AITerminalSessionInfo = {
+  sessionId: string;
+  hostId: string;
+  hostname: string;
+  label: string;
+  os?: string;
+  username?: string;
+  protocol?: string;
+  shellType?: string;
+  connected: boolean;
+};
+
+const buildAITerminalSessionInfo = (
+  session: TerminalSession | undefined,
+  host: Host | undefined,
+  localOs: 'linux' | 'macos' | 'windows',
+): AITerminalSessionInfo => {
+  const protocol = session?.protocol || host?.protocol;
+  const isLocalSession = protocol === 'local' || session?.hostId?.startsWith('local-');
+  return {
+    sessionId: session?.id || '',
+    hostId: session?.hostId || '',
+    hostname: host?.hostname || session?.hostname || '',
+    label: host?.label || session?.hostLabel || '',
+    os: host?.os || (isLocalSession ? localOs : undefined),
+    username: host?.username || session?.username,
+    protocol,
+    shellType: session?.shellType && session.shellType !== 'unknown' ? session.shellType : undefined,
+    connected: session?.status === 'connected',
+  };
+};
+
 interface TerminalLayerProps {
   hosts: Host[];
   keys: SSHKey[];
@@ -106,8 +153,13 @@ interface TerminalLayerProps {
   sftpAutoSync: boolean;
   sftpShowHiddenFiles: boolean;
   sftpUseCompressedUpload: boolean;
+  sftpAutoOpenSidebar: boolean;
   editorWordWrap: boolean;
   setEditorWordWrap: (value: boolean) => void;
+  // Session log settings for real-time streaming
+  sessionLogsEnabled?: boolean;
+  sessionLogsDir?: string;
+  sessionLogsFormat?: string;
 }
 
 const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
@@ -151,8 +203,12 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   sftpAutoSync,
   sftpShowHiddenFiles,
   sftpUseCompressedUpload,
+  sftpAutoOpenSidebar,
   editorWordWrap,
   setEditorWordWrap,
+  sessionLogsEnabled,
+  sessionLogsDir,
+  sessionLogsFormat,
 }) => {
   // Subscribe to activeTabId from external store
   const activeTabId = useActiveTabId();
@@ -165,13 +221,68 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
     onCloseSession(sessionId);
   }, [onCloseSession]);
 
+  const sftpAutoOpenSidebarRef = useRef(sftpAutoOpenSidebar);
+  sftpAutoOpenSidebarRef.current = sftpAutoOpenSidebar;
+
   const handleStatusChange = useCallback((sessionId: string, status: TerminalSession['status']) => {
     onUpdateSessionStatus(sessionId, status);
+
+    // Auto-open SFTP sidebar when a remote host connects (if setting enabled)
+    if (status === 'connected' && sftpAutoOpenSidebarRef.current) {
+      const session = sessionsRef.current.find(s => s.id === sessionId);
+      if (!session) return;
+      // Only auto-open for SSH/Mosh (SFTP requires SSH); skip local/unset protocol
+      const proto = session.protocol;
+      if (proto !== 'ssh' && proto !== 'mosh') return;
+
+      const host = hostsRef.current.find(h => h.id === session.hostId);
+
+      // Determine the tab ID (workspace or solo session)
+      const tabId = session.workspaceId || sessionId;
+
+      // Only open if the sidebar is not already open for this tab
+      if (sidePanelOpenTabsRef.current.has(tabId)) return;
+
+      const hostWithOverrides: Host = host
+        ? {
+            ...host,
+            protocol: session.protocol ?? host.protocol,
+            port: session.port ?? host.port,
+            moshEnabled: session.moshEnabled ?? host.moshEnabled,
+          }
+        : {
+            // Quick Connect / temporary session — build minimal host from session data
+            id: session.hostId || sessionId,
+            hostname: session.hostname,
+            username: session.username,
+            port: session.port ?? 22,
+            protocol: proto,
+            label: session.label || session.hostname,
+          } as Host;
+
+      setSidePanelOpenTabs(prev => {
+        const next = new Map(prev);
+        next.set(tabId, 'sftp');
+        return next;
+      });
+      setSftpHostForTab(prev => {
+        const next = new Map(prev);
+        next.set(tabId, hostWithOverrides);
+        return next;
+      });
+    }
   }, [onUpdateSessionStatus]);
 
-  const handleSessionExit = useCallback((sessionId: string) => {
-    onUpdateSessionStatus(sessionId, 'disconnected');
-  }, [onUpdateSessionStatus]);
+  const handleSessionExit = useCallback((sessionId: string, evt: { exitCode?: number; signal?: number; error?: string; reason?: "exited" | "error" | "timeout" | "closed" }) => {
+    // Auto-close the tab/session when the user actively exited (e.g. typed `exit`)
+    // reason === "exited" means the remote process/shell exited normally (stream-level close),
+    // as opposed to network errors, timeouts, or connection-level drops
+    if (evt.reason === "exited") {
+      onCloseSession(sessionId);
+    } else {
+      onUpdateSessionStatus(sessionId, 'disconnected');
+    }
+  }, [onUpdateSessionStatus, onCloseSession]);
 
   const handleOsDetected = useCallback((hostId: string, distro: string) => {
     onUpdateHostDistro(hostId, distro);
@@ -235,13 +346,22 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   activeTabIdRef.current = activeTabId;
   const activeWorkspaceRef = useRef(activeWorkspace);
   activeWorkspaceRef.current = activeWorkspace;
+  const sessionsRef = useRef(sessions);
+  sessionsRef.current = sessions;
+  const workspacesRef = useRef(workspaces);
+  workspacesRef.current = workspaces;
+  const hostsRef = useRef(hosts);
+  hostsRef.current = hosts;
   const onSetWorkspaceFocusedSessionRef = useRef(onSetWorkspaceFocusedSession);
   onSetWorkspaceFocusedSessionRef.current = onSetWorkspaceFocusedSession;
 
   // Side panel state - per-tab tracking of which sub-panel is active
   // Maps tab IDs to the active sub-panel type (sftp/scripts/theme), absent = closed
   const [sidePanelOpenTabs, setSidePanelOpenTabs] = useState<Map<string, SidePanelTab>>(new Map());
-  const [sidePanelWidth, setSidePanelWidth] = useState(320);
+  const [sidePanelWidth, setSidePanelWidth] = useState(() => {
+    const stored = window.localStorage.getItem('netcatty_side_panel_width');
+    return stored ? Math.max(280, Math.min(800, Number(stored))) : 420;
+  });
   const [sidePanelPosition, setSidePanelPosition] = useStoredString<'left' | 'right'>(
     'netcatty_side_panel_position',
     'left',
@@ -373,13 +493,15 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
     const startX = e.clientX;
     const startWidth = sidePanelWidth;
 
+    let lastWidth = startWidth;
     const onMouseMove = (ev: MouseEvent) => {
       const delta = ev.clientX - startX;
-      const newWidth = Math.max(200, Math.min(600, startWidth + (sidePanelPosition === 'left' ? delta : -delta)));
-      setSidePanelWidth(newWidth);
+      lastWidth = Math.max(280, Math.min(800, startWidth + (sidePanelPosition === 'left' ? delta : -delta)));
+      setSidePanelWidth(lastWidth);
     };
     const onMouseUp = () => {
       sftpResizingRef.current = false;
+      window.localStorage.setItem('netcatty_side_panel_width', String(lastWidth));
       window.removeEventListener('mousemove', onMouseMove);
       window.removeEventListener('mouseup', onMouseUp);
     };
@@ -844,11 +966,23 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
     handleSwitchSidePanelTab('theme');
   }, [handleSwitchSidePanelTab]);
 
+  // Open AI chat side panel
+  const handleOpenAI = useCallback(() => {
+    handleSwitchSidePanelTab('ai');
+  }, [handleSwitchSidePanelTab]);
+
+  // Listen for global AI panel toggle (from TopTabs button)
+  useEffect(() => {
+    const handler = () => handleOpenAI();
+    window.addEventListener('netcatty:toggle-ai-panel', handler);
+    return () => window.removeEventListener('netcatty:toggle-ai-panel', handler);
+  }, [handleOpenAI]);
+
   // Execute snippet on the focused terminal session
-  const handleSnippetClickForFocusedSession = useCallback((command: string) => {
+  const handleSnippetClickForFocusedSession = useCallback((command: string, noAutoRun?: boolean) => {
     const sessionId = activeWorkspace?.focusedSessionId ?? activeSession?.id;
     if (!sessionId) return;
-    const payload = `${command}\r`;
+    const payload = noAutoRun ? command : `${command}\r`;
     terminalBackend.writeToSession(sessionId, payload);
     // Re-focus the terminal so the user can interact immediately
     const pane = document.querySelector(`[data-session-id="${sessionId}"]`);
@@ -877,34 +1011,116 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
       return;
     }
     if (focusedHost) {
-      onUpdateHost({ ...focusedHost, theme: themeId });
+      onUpdateHost({ ...focusedHost, theme: themeId, themeOverride: true });
     }
   }, [focusedHost, isFocusedHostLocal, onUpdateTerminalThemeId, onUpdateHost]);
 
+  const handleThemeResetForFocusedSession = useCallback(() => {
+    if (!focusedHost || isFocusedHostLocal) return;
+    onUpdateHost(clearHostThemeOverride(focusedHost));
+  }, [focusedHost, isFocusedHostLocal, onUpdateHost]);
+
   const handleFontFamilyChangeForFocusedSession = useCallback((fontFamilyId: string) => {
     if (isFocusedHostLocal) {
       onUpdateTerminalFontFamilyId?.(fontFamilyId);
       return;
     }
     if (focusedHost) {
-      onUpdateHost({ ...focusedHost, fontFamily: fontFamilyId });
+      onUpdateHost({ ...focusedHost, fontFamily: fontFamilyId, fontFamilyOverride: true });
     }
   }, [focusedHost, isFocusedHostLocal, onUpdateTerminalFontFamilyId, onUpdateHost]);
 
+  const handleFontFamilyResetForFocusedSession = useCallback(() => {
+    if (!focusedHost || isFocusedHostLocal) return;
+    onUpdateHost(clearHostFontFamilyOverride(focusedHost));
+  }, [focusedHost, isFocusedHostLocal, onUpdateHost]);
+
   const handleFontSizeChangeForFocusedSession = useCallback((newFontSize: number) => {
     if (isFocusedHostLocal) {
       onUpdateTerminalFontSize?.(newFontSize);
       return;
     }
     if (focusedHost) {
-      onUpdateHost({ ...focusedHost, fontSize: newFontSize });
+      onUpdateHost({ ...focusedHost, fontSize: newFontSize, fontSizeOverride: true });
     }
   }, [focusedHost, isFocusedHostLocal, onUpdateTerminalFontSize, onUpdateHost]);
 
+  const handleFontSizeResetForFocusedSession = useCallback(() => {
+    if (!focusedHost || isFocusedHostLocal) return;
+    onUpdateHost(clearHostFontSizeOverride(focusedHost));
+  }, [focusedHost, isFocusedHostLocal, onUpdateHost]);
+
   // Current theme/font/size for the focused session (for ThemeSidePanel)
-  const focusedThemeId = focusedHost?.theme ?? terminalTheme.id;
-  const focusedFontFamilyId = focusedHost?.fontFamily ?? terminalFontFamilyId;
-  const focusedFontSize = focusedHost?.fontSize ?? fontSize;
+  const focusedThemeId = resolveHostTerminalThemeId(focusedHost, terminalTheme.id);
+  const focusedFontFamilyId = resolveHostTerminalFontFamilyId(focusedHost, terminalFontFamilyId);
+  const focusedFontSize = resolveHostTerminalFontSize(focusedHost, fontSize);
+  const focusedThemeOverridden = hasHostThemeOverride(focusedHost);
+  const focusedFontFamilyOverridden = hasHostFontFamilyOverride(focusedHost);
+  const focusedFontSizeOverridden = hasHostFontSizeOverride(focusedHost);
+
+  // AI Chat state
+  const aiState = useAIState();
+  const { cleanupOrphanedSessions } = aiState;
+
+  useEffect(() => {
+    const activeIds = new Set<string>();
+    for (const s of sessions) activeIds.add(s.id);
+    for (const w of workspaces) activeIds.add(w.id);
+    cleanupOrphanedSessions(activeIds);
+  }, [sessions, workspaces, cleanupOrphanedSessions]);
+
+  // Keep MCP/ACP approval IPC listener alive for the entire terminal lifecycle.
+  // Must live here (TerminalLayer), NOT in AIChatSidePanel (unmounts on tab switch)
+  // or ChatMessageList (unmounts on panel hide).
+  useEffect(() => {
+    return setupMcpApprovalBridge();
+  }, []);
+
+  // Build terminal session context for the AI chat panel
+  const aiTerminalSessions = useMemo(() => {
+    const localOs = detectLocalOs(navigator.userAgent || navigator.platform);
+    const sessionIds = activeWorkspace?.root
+      ? collectSessionIds(activeWorkspace.root)
+      : activeSession ? [activeSession.id] : [];
+
+    const result = sessionIds.map(sid => {
+      const s = sessions.find(s => s.id === sid);
+      const host = s?.hostId ? hosts.find(h => h.id === s.hostId) : undefined;
+      return buildAITerminalSessionInfo(s, host, localOs);
+    });
+    return result;
+  }, [sessions, hosts, activeWorkspace, activeSession]);
+
+  const resolveAIExecutorContext = useCallback((scope: {
+    type: 'terminal' | 'workspace';
+    targetId?: string;
+    label?: string;
+  }) => {
+    const latestWorkspaces = workspacesRef.current;
+    const latestSessions = sessionsRef.current;
+    const latestHosts = hostsRef.current;
+    const localOs = detectLocalOs(navigator.userAgent || navigator.platform);
+    const sessionIds = scope.type === 'workspace'
+      ? (() => {
+          const workspace = scope.targetId ? latestWorkspaces.find((w) => w.id === scope.targetId) : undefined;
+          return workspace?.root ? collectSessionIds(workspace.root) : [];
+        })()
+      : scope.targetId ? [scope.targetId] : [];
+
+    const workspaceName = scope.type === 'workspace'
+      ? latestWorkspaces.find((w) => w.id === scope.targetId)?.title ?? scope.label
+      : undefined;
+
+    return {
+      sessions: sessionIds.map((sid) => {
+        const session = latestSessions.find((s) => s.id === sid);
+        const host = session?.hostId ? latestHosts.find((h) => h.id === session.hostId) : undefined;
+        return buildAITerminalSessionInfo(session, host, localOs);
+      }),
+      workspaceId: scope.type === 'workspace' ? scope.targetId : undefined,
+      workspaceName,
+    };
+  }, []);
 
   // Subscribe to custom theme changes so editing triggers re-render
   const customThemes = useCustomThemes();
@@ -1117,12 +1333,12 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
                 )}
               >
                 {isSidePanelOpenForCurrentTab && (
-                  <div className="flex h-8 items-center px-1.5 py-0.5 flex-shrink-0 gap-0.5">
+                  <div className="flex h-9 items-center px-1.5 py-1 flex-shrink-0 gap-1">
                     <Button
                       variant="ghost"
                       size="icon"
                       className={cn(
-                        "h-6 w-6 rounded-md p-0",
+                        "h-7 w-7 rounded-md p-0",
                         activeSidePanelTab === 'sftp'
                           ? "text-foreground opacity-100"
                           : "text-muted-foreground opacity-70 hover:opacity-100",
@@ -1131,13 +1347,13 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
                       onClick={handleToggleSftpFromBar}
                       title="SFTP"
                     >
-                      <FolderTree size={14} />
+                      <FolderTree size={15} />
                     </Button>
                     <Button
                       variant="ghost"
                       size="icon"
                       className={cn(
-                        "h-6 w-6 rounded-md p-0",
+                        "h-7 w-7 rounded-md p-0",
                         activeSidePanelTab === 'scripts'
                           ? "text-foreground opacity-100"
                           : "text-muted-foreground opacity-70 hover:opacity-100",
@@ -1146,13 +1362,13 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
                       onClick={handleOpenScripts}
                       title="Scripts"
                     >
-                      <Zap size={14} />
+                      <Zap size={15} />
                     </Button>
                     <Button
                       variant="ghost"
                       size="icon"
                       className={cn(
-                        "h-6 w-6 rounded-md p-0",
+                        "h-7 w-7 rounded-md p-0",
                         activeSidePanelTab === 'theme'
                           ? "text-foreground opacity-100"
                           : "text-muted-foreground opacity-70 hover:opacity-100",
@@ -1161,32 +1377,47 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
                       onClick={handleOpenTheme}
                       title="Theme"
                     >
-                      <Palette size={14} />
+                      <Palette size={15} />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className={cn(
+                        "h-7 w-7 rounded-md p-0",
+                        activeSidePanelTab === 'ai'
+                          ? "text-foreground opacity-100"
+                          : "text-muted-foreground opacity-70 hover:opacity-100",
+                        "hover:bg-transparent",
+                      )}
+                      onClick={handleOpenAI}
+                      title="AI Chat"
+                    >
+                      <MessageSquare size={15} />
                     </Button>
                     <div className="flex-1" />
                     <Button
                       variant="ghost"
                       size="icon"
                       className={cn(
-                        "h-6 w-6 rounded-md p-0 text-muted-foreground",
+                        "h-7 w-7 rounded-md p-0 text-muted-foreground",
                         "hover:bg-transparent hover:text-foreground",
                       )}
                       onClick={() => setSidePanelPosition(p => p === 'left' ? 'right' : 'left')}
                       title={sidePanelPosition === 'left' ? 'Move panel to right' : 'Move panel to left'}
                     >
-                      {sidePanelPosition === 'left' ? <PanelRight size={14} /> : <PanelLeft size={14} />}
+                      {sidePanelPosition === 'left' ? <PanelRight size={15} /> : <PanelLeft size={15} />}
                     </Button>
                     <Button
                       variant="ghost"
                       size="icon"
                       className={cn(
-                        "h-6 w-6 rounded-md p-0 text-muted-foreground",
+                        "h-7 w-7 rounded-md p-0 text-muted-foreground",
                         "hover:bg-transparent hover:text-foreground",
                       )}
                       onClick={handleCloseSidePanel}
                       title="Close panel"
                     >
-                      <X size={14} />
+                      <X size={15} />
                     </Button>
                   </div>
                 )}
@@ -1239,11 +1470,62 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
                     <div className="absolute inset-0 z-10">
                       <ThemeSidePanel
                         currentThemeId={focusedThemeId}
+                        globalThemeId={terminalTheme.id}
                         currentFontFamilyId={focusedFontFamilyId}
+                        globalFontFamilyId={terminalFontFamilyId}
                         currentFontSize={focusedFontSize}
+                        canResetTheme={focusedThemeOverridden}
+                        canResetFontFamily={focusedFontFamilyOverridden}
+                        canResetFontSize={focusedFontSizeOverridden}
                         onThemeChange={handleThemeChangeForFocusedSession}
+                        onThemeReset={handleThemeResetForFocusedSession}
                         onFontFamilyChange={handleFontFamilyChangeForFocusedSession}
+                        onFontFamilyReset={handleFontFamilyResetForFocusedSession}
                         onFontSizeChange={handleFontSizeChangeForFocusedSession}
+                        onFontSizeReset={handleFontSizeResetForFocusedSession}
+                      />
+                    </div>
+                  )}
+
+                  {/* AI Chat sub-panel */}
+                  {activeSidePanelTab === 'ai' && (
+                    <div className="absolute inset-0 z-10">
+                      <AIChatSidePanel
+                        sessions={aiState.sessions}
+                        activeSessionIdMap={aiState.activeSessionIdMap}
+                        setActiveSessionId={aiState.setActiveSessionId}
+                        createSession={aiState.createSession}
+                        deleteSession={aiState.deleteSession}
+                        updateSessionTitle={aiState.updateSessionTitle}
+                        updateSessionExternalSessionId={aiState.updateSessionExternalSessionId}
+                        addMessageToSession={aiState.addMessageToSession}
+                        updateLastMessage={aiState.updateLastMessage}
+                        updateMessageById={aiState.updateMessageById}
+                        providers={aiState.providers}
+                        activeProviderId={aiState.activeProviderId}
+                        activeModelId={aiState.activeModelId}
+                        defaultAgentId={aiState.defaultAgentId}
+                        externalAgents={aiState.externalAgents}
+                        setExternalAgents={aiState.setExternalAgents}
+                        agentModelMap={aiState.agentModelMap}
+                        setAgentModel={aiState.setAgentModel}
+                        globalPermissionMode={aiState.globalPermissionMode}
+                        setGlobalPermissionMode={aiState.setGlobalPermissionMode}
+                        commandBlocklist={aiState.commandBlocklist}
+                        maxIterations={aiState.maxIterations}
+                        webSearchConfig={aiState.webSearchConfig}
+                        scopeType={activeWorkspace ? 'workspace' : 'terminal'}
+                        scopeTargetId={activeWorkspace?.id ?? activeSession?.id}
+                        scopeHostIds={activeWorkspace?.root
+                          ? collectSessionIds(activeWorkspace.root).map(sid => {
+                              const s = sessions.find(s => s.id === sid);
+                              return s?.hostId;
+                            }).filter((id): id is string => !!id)
+                          : activeSession?.hostId ? [activeSession.hostId] : []
+                        }
+                        scopeLabel={activeWorkspace?.title ?? activeSession?.hostLabel ?? ''}
+                        terminalSessions={aiTerminalSessions}
+                        resolveExecutorContext={resolveAIExecutorContext}
                       />
                     </div>
                   )}
@@ -1372,6 +1654,7 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
                   terminalSettings={terminalSettings}
                   sessionId={session.id}
                   startupCommand={session.startupCommand}
+                  noAutoRun={session.noAutoRun}
                   serialConfig={session.serialConfig}
                   hotkeyScheme={hotkeyScheme}
                   keyBindings={keyBindings}
@@ -1395,6 +1678,7 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
                   onToggleComposeBar={inActiveWorkspace ? handleToggleWorkspaceComposeBar : undefined}
                   isWorkspaceComposeBarOpen={inActiveWorkspace ? isComposeBarOpen : undefined}
                   onBroadcastInput={inActiveWorkspace && activeWorkspace && isBroadcastEnabled?.(activeWorkspace.id) ? handleBroadcastInput : undefined}
+                  sessionLog={sessionLogsEnabled && sessionLogsDir ? { enabled: true, directory: sessionLogsDir, format: sessionLogsFormat || 'txt' } : undefined}
                 />
               </div>
             );
@@ -1496,6 +1780,7 @@ const terminalLayerAreEqual = (prev: TerminalLayerProps, next: TerminalLayerProp
     prev.sftpAutoSync === next.sftpAutoSync &&
     prev.sftpShowHiddenFiles === next.sftpShowHiddenFiles &&
     prev.sftpUseCompressedUpload === next.sftpUseCompressedUpload &&
+    prev.sftpAutoOpenSidebar === next.sftpAutoOpenSidebar &&
     prev.editorWordWrap === next.editorWordWrap &&
     prev.setEditorWordWrap === next.setEditorWordWrap &&
     prev.onHotkeyAction === next.onHotkeyAction &&

components/TopTabs.tsx

@@ -1,10 +1,10 @@
-import { Bell, Copy, FileText, Folder, LayoutGrid, Minus, Moon, MoreHorizontal, Plus, Server, Shield, Square, Sun, TerminalSquare, Usb, X } from 'lucide-react';
+import { Bell, Copy, FileText, Folder, LayoutGrid, Minus, Moon, MoreHorizontal, Plus, Server, Shield, Sparkles, Square, Sun, TerminalSquare, Usb, X } from 'lucide-react';
 import React, { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { activeTabStore, useActiveTabId } from '../application/state/activeTabStore';
 import { LogView } from '../application/state/useSessionState';
 import { useWindowControls } from '../application/state/useWindowControls';
 import { useI18n } from '../application/i18n/I18nProvider';
-import { normalizeDistroId } from '../domain/host';
+import { getEffectiveHostDistro } from '../domain/host';
 import { cn } from '../lib/utils';
 import { Host, TerminalSession, Workspace } from '../types';
 import { DISTRO_LOGOS, DISTRO_COLORS } from './DistroAvatar';
@@ -89,7 +89,7 @@ const SessionTabIcon: React.FC<{ host: Host | undefined; isActive: boolean; prot
 
   // Try distro logo with brand background color
   if (host) {
-    const distro = normalizeDistroId(host.distro) || (host.distro || '').toLowerCase();
+    const distro = getEffectiveHostDistro(host);
     const logo = DISTRO_LOGOS[distro];
     if (logo) {
       const bg = DISTRO_COLORS[distro] || DISTRO_COLORS.default;
@@ -97,7 +97,7 @@ const SessionTabIcon: React.FC<{ host: Host | undefined; isActive: boolean; prot
         <div className={cn(boxBase, bg)}>
           <img
             src={logo}
-            alt={host.distro || host.os}
+            alt={distro || host.os}
             className={cn(iconSize, "object-contain invert brightness-0")}
           />
         </div>
@@ -747,6 +747,15 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
 
         {/* Fixed right controls */}
         <div className="flex-shrink-0 flex items-center gap-2 app-drag self-center" style={dragRegionStyle}>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6 text-muted-foreground hover:text-foreground app-no-drag"
+            title="AI Assistant"
+            onClick={() => window.dispatchEvent(new CustomEvent('netcatty:toggle-ai-panel'))}
+          >
+            <Sparkles size={16} />
+          </Button>
           <Button variant="ghost" size="icon" className="h-6 w-6 text-muted-foreground hover:text-foreground app-no-drag">
             <Bell size={16} />
           </Button>

components/VaultView.tsx

@@ -32,7 +32,7 @@ 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 { getEffectiveHostDistro, 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, STORAGE_KEY_VAULT_SIDEBAR_COLLAPSED } from "../infrastructure/config/storageKeys";
@@ -689,6 +689,15 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
     ],
   );
 
+  const countAllHostsInNode = useCallback((node: GroupNode): number => {
+    let count = node.hosts.length;
+    Object.values(node.children).forEach((child) => {
+      count += countAllHostsInNode(child);
+    });
+    node.totalHostCount = count;
+    return count;
+  }, []);
+
   const buildGroupTree = useMemo<Record<string, GroupNode>>(() => {
     const root: Record<string, GroupNode> = {};
     const insertPath = (path: string, host?: Host) => {
@@ -712,8 +721,11 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
     };
     customGroups.forEach((path) => insertPath(path));
     hosts.forEach((host) => insertPath(host.group || "General", host));
+
+    Object.values(root).forEach(countAllHostsInNode);
+
     return root;
-  }, [hosts, customGroups]);
+  }, [hosts, customGroups, countAllHostsInNode]);
 
   // Generate all possible group paths from the tree (including all intermediate nodes)
   const allGroupPaths = useMemo(() => {
@@ -896,19 +908,11 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
         insertPath(host.group, host);
       }
     });
-    return root;
-  }, [treeViewHosts, customGroups]);
 
-  // Helper function to recursively count all hosts in a node and its children
-  const countAllHostsInNode = (node: GroupNode): number => {
-    let count = node.hosts.length;
-    if (node.children) {
-      Object.values(node.children).forEach((child) => {
-        count += countAllHostsInNode(child);
-      });
-    }
-    return count;
-  };
+    Object.values(root).forEach(countAllHostsInNode);
+    
+    return root;
+  }, [treeViewHosts, customGroups, countAllHostsInNode]);
 
   // Create tree view specific group tree that excludes ungrouped hosts
   const treeViewGroupTree = useMemo<GroupNode[]>(() => {
@@ -1749,7 +1753,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                                       )}
                                     </div>
                                     <div className="text-[11px] text-muted-foreground">
-                                      {t("vault.groups.hostsCount", { count: countAllHostsInNode(node) })}
+                                      {t("vault.groups.hostsCount", { count: node.totalHostCount ?? node.hosts.length })}
                                     </div>
                                   </div>
                                 </div>
@@ -1914,9 +1918,10 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                             >
                               {group.hosts.map((host) => {
                                 const safeHost = sanitizeHost(host);
+                                const effectiveDistro = getEffectiveHostDistro(safeHost);
                                 const distroBadge = {
                                   text: (safeHost.os || "L")[0].toUpperCase(),
-                                  label: safeHost.distro || safeHost.os || "Linux",
+                                  label: effectiveDistro || safeHost.os || "Linux",
                                 };
                                 return (
                                   <ContextMenu key={host.id}>
@@ -2052,9 +2057,10 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                       >
                         {displayedHosts.map((host) => {
                           const safeHost = sanitizeHost(host);
+                          const effectiveDistro = getEffectiveHostDistro(safeHost);
                           const distroBadge = {
                             text: (safeHost.os || "L")[0].toUpperCase(),
-                            label: safeHost.distro || safeHost.os || "Linux",
+                            label: effectiveDistro || safeHost.os || "Linux",
                           };
                           return (
                             <ContextMenu key={host.id}>
@@ -2201,6 +2207,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                   : [...snippets, s],
               )
             }
+            onBulkSave={onUpdateSnippets}
             onDelete={(id) =>
               onUpdateSnippets(snippets.filter((s) => s.id !== id))
             }

components/ai-elements/conversation.tsx

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

components/ai-elements/message.tsx

@@ -0,0 +1,87 @@
+import { cn } from '../../lib/utils';
+import { cjk } from '@streamdown/cjk';
+import { code } from '@streamdown/code';
+import type { ComponentProps, HTMLAttributes } from 'react';
+import { memo } from 'react';
+import { Streamdown } from 'streamdown';
+
+export type MessageProps = HTMLAttributes<HTMLDivElement> & {
+  from: 'user' | 'assistant' | 'system' | 'tool';
+};
+
+export const Message = ({ className, from, ...props }: MessageProps) => (
+  <div
+    className={cn(
+      'group flex w-full max-w-[95%] flex-col gap-1.5',
+      from === 'user' ? 'is-user ml-auto' : 'is-assistant',
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type MessageContentProps = HTMLAttributes<HTMLDivElement>;
+
+export const MessageContent = ({ children, className, ...props }: MessageContentProps) => (
+  <div
+    className={cn(
+      'flex w-fit min-w-0 max-w-full flex-col gap-1.5 overflow-hidden text-[13px] leading-relaxed',
+      'group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:border group-[.is-user]:border-border/50 group-[.is-user]:bg-muted/50 group-[.is-user]:px-2.5 group-[.is-user]:py-2',
+      'group-[.is-assistant]:w-full group-[.is-assistant]:text-foreground/90',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type MessageActionsProps = ComponentProps<'div'>;
+
+export const MessageActions = ({ className, children, ...props }: MessageActionsProps) => (
+  <div
+    className={cn(
+      'flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+const streamdownPlugins = { cjk, code };
+
+export type MessageResponseProps = ComponentProps<typeof Streamdown>;
+
+export const MessageResponse = memo(
+  ({ className, ...props }: MessageResponseProps) => (
+    <Streamdown
+      className={cn(
+        'size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0',
+        // Style the rendered markdown
+        // Code: base styles (code-block overrides are in index.css)
+        '[&_code]:text-[12px] [&_code]:font-mono',
+        '[&_p_code]:px-[0.4em] [&_p_code]:py-[0.15em] [&_p_code]:rounded [&_p_code]:bg-foreground/[0.06] [&_p_code]:text-[85%]',
+        '[&_p]:my-1.5',
+        '[&_ul]:my-1.5 [&_ul]:pl-4 [&_ul]:list-disc',
+        '[&_ol]:my-1.5 [&_ol]:pl-4 [&_ol]:list-decimal',
+        '[&_li]:my-0.5',
+        '[&_h1]:text-base [&_h1]:font-semibold [&_h1]:mt-4 [&_h1]:mb-2',
+        '[&_h2]:text-sm [&_h2]:font-semibold [&_h2]:mt-3 [&_h2]:mb-1.5',
+        '[&_h3]:text-sm [&_h3]:font-medium [&_h3]:mt-2 [&_h3]:mb-1',
+        '[&_blockquote]:border-l-2 [&_blockquote]:border-border/50 [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground',
+        '[&_a]:text-primary [&_a]:underline',
+        '[&_hr]:border-border/30 [&_hr]:my-3',
+        '[&_table]:text-[12px] [&_th]:px-2 [&_th]:py-1 [&_th]:border [&_th]:border-border/30 [&_th]:bg-muted/20 [&_td]:px-2 [&_td]:py-1 [&_td]:border [&_td]:border-border/30',
+        className,
+      )}
+      plugins={streamdownPlugins}
+      {...props}
+    />
+  ),
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children &&
+    nextProps.isAnimating === prevProps.isAnimating,
+);
+MessageResponse.displayName = 'MessageResponse';

components/ai-elements/prompt-input.tsx

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

components/ai-elements/tool-call.tsx

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

components/ai/AgentIconBadge.tsx

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

components/ai/AgentSelector.tsx

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

components/ai/ChatInput.tsx

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

components/ai/ChatMessageList.tsx

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

components/ai/ConversationExport.tsx

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

components/ai/ExecutionPlan.tsx

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

components/ai/PermissionDialog.tsx

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

components/ai/ThinkingBlock.tsx

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

components/ai/hooks/useAIChatStreaming.ts

@@ -0,0 +1,832 @@
+/**
+ * useAIChatStreaming — Encapsulates all streaming logic for the AI chat panel.
+ *
+ * Handles:
+ * - Catty agent streaming via Vercel AI SDK `streamText`
+ * - External agent streaming (ACP and raw process)
+ * - Text-delta batching via requestAnimationFrame
+ * - Abort controller management
+ * - Stream state tracking (per-session)
+ * - Error reporting
+ */
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { streamText, stepCountIs, type ModelMessage } from 'ai';
+import type {
+  AIPermissionMode,
+  AISession,
+  ChatMessage,
+  ChatMessageAttachment,
+  ExternalAgentConfig,
+  ProviderConfig,
+  WebSearchConfig,
+} from '../../../infrastructure/ai/types';
+import { isWebSearchReady } from '../../../infrastructure/ai/types';
+import { buildSystemPrompt } from '../../../infrastructure/ai/cattyAgent/systemPrompt';
+import { createModelFromConfig } from '../../../infrastructure/ai/sdk/providers';
+import { createCattyTools } from '../../../infrastructure/ai/sdk/tools';
+import type { NetcattyBridge, ExecutorContext } from '../../../infrastructure/ai/cattyAgent/executor';
+import { runExternalAgentTurn } from '../../../infrastructure/ai/externalAgentAdapter';
+import { runAcpAgentTurn } from '../../../infrastructure/ai/acpAgentAdapter';
+import { classifyError } from '../../../infrastructure/ai/errorClassifier';
+
+// -------------------------------------------------------------------
+// Stream chunk type interfaces (Issue #13: replace unsafe casts)
+// -------------------------------------------------------------------
+
+/** Shape of a text/text-delta chunk from the Vercel AI SDK fullStream. */
+interface TextDeltaChunk {
+  type: 'text' | 'text-delta';
+  text?: string;
+  textDelta?: string;
+}
+
+/** Shape of a reasoning chunk from the Vercel AI SDK fullStream. */
+interface ReasoningChunk {
+  type: 'reasoning' | 'reasoning-start' | 'reasoning-delta';
+  text?: string;
+}
+
+/** Shape of a tool-call chunk from the Vercel AI SDK fullStream. */
+interface ToolCallChunk {
+  type: 'tool-call';
+  toolCallId: string;
+  toolName: string;
+  input?: unknown;
+  args?: unknown;
+}
+
+/** Shape of a tool-result chunk from the Vercel AI SDK fullStream. */
+interface ToolResultChunk {
+  type: 'tool-result';
+  toolCallId: string;
+  output?: unknown;
+  result?: unknown;
+}
+
+/** Detect tool results that represent errors/denials (e.g. `{ error: "..." }` or `{ ok: false }`) */
+function isToolResultError(output: unknown): boolean {
+  if (output == null) return false;
+  
+  if (typeof output === 'object') {
+    const obj = output as Record<string, unknown>;
+    // Check for explicit error objects
+    if ('error' in obj && typeof obj.error === 'string') return true;
+    if ('ok' in obj && obj.ok === false) return true;
+  }
+  
+  // Check stringified JSON (common for tool result wrapping)
+  if (typeof output === 'string') {
+    try {
+      const parsed = JSON.parse(output);
+      if (parsed && typeof parsed === 'object') {
+        const parsedObj = parsed as Record<string, unknown>;
+        if ('error' in parsedObj && typeof parsedObj.error === 'string') return true;
+        if ('ok' in parsedObj && parsedObj.ok === false) return true;
+      }
+    } catch { /* not JSON, not an error */ }
+  }
+  
+  return false;
+}
+
+/** Shape of an error chunk from the Vercel AI SDK fullStream. */
+interface ErrorChunk {
+  type: 'error';
+  error: unknown;
+}
+
+/** Union of all stream chunk shapes we handle. */
+type StreamChunk =
+  | TextDeltaChunk
+  | ReasoningChunk
+  | ToolCallChunk
+  | ToolResultChunk
+  | ErrorChunk
+  | { type: 'reasoning-end' | 'text-start' | 'text-end' | 'start' | 'finish' | 'start-step' | 'finish-step' | 'tool-approval-request' };
+
+/** Shape of the netcatty bridge exposed on `window` (panel-specific subset). */
+export interface PanelBridge extends NetcattyBridge {
+  credentialsDecrypt?: (value: string) => Promise<string>;
+  aiSyncProviders?: (providers: Array<{ id: string; providerId: string; apiKey?: string; baseURL?: string; enabled: boolean }>) => Promise<{ ok: boolean }>;
+  aiSyncWebSearch?: (apiHost: string | null, apiKey: string | null) => Promise<{ ok: boolean }>;
+  aiMcpUpdateSessions?: (sessions: TerminalSessionInfo[], chatSessionId?: string) => Promise<unknown>;
+  aiAcpCleanup?: (chatSessionId: string) => Promise<{ ok: boolean }>;
+  [key: string]: ((...args: unknown[]) => unknown) | undefined;
+}
+
+/** Terminal session info used throughout the streaming hooks. */
+export interface TerminalSessionInfo {
+  sessionId: string;
+  hostId: string;
+  hostname: string;
+  label: string;
+  os?: string;
+  username?: string;
+  protocol?: string;
+  shellType?: string;
+  connected: boolean;
+}
+
+/** Typed accessor for the netcatty bridge on the window object. */
+export function getNetcattyBridge(): PanelBridge | undefined {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (window as any).netcatty as PanelBridge | undefined;
+}
+
+// ApprovalInfo and PendingApprovalContext removed — approval is now handled
+// inside the tool's execute function via the approvalGate module.
+
+function generateId(): string {
+  return `msg-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+const sharedStreamingSessionIds = new Set<string>();
+const sharedAbortControllers = new Map<string, AbortController>();
+const streamingSubscribers = new Set<() => void>();
+
+function emitStreamingStoreChange(): void {
+  streamingSubscribers.forEach(listener => {
+    try {
+      listener();
+    } catch (err) {
+      console.error('[AIChatStreaming] Failed to notify streaming subscriber:', err);
+    }
+  });
+}
+
+// -------------------------------------------------------------------
+// Hook parameters
+// -------------------------------------------------------------------
+
+export interface UseAIChatStreamingParams {
+  maxIterations: number;
+  addMessageToSession: (sessionId: string, message: ChatMessage) => void;
+  updateLastMessage: (sessionId: string, updater: (msg: ChatMessage) => ChatMessage) => void;
+  updateMessageById: (sessionId: string, messageId: string, updater: (msg: ChatMessage) => ChatMessage) => void;
+}
+
+// -------------------------------------------------------------------
+// Hook return type
+// -------------------------------------------------------------------
+
+export interface UseAIChatStreamingReturn {
+  /** Set of session IDs currently streaming. */
+  streamingSessionIds: Set<string>;
+  /** Set or unset streaming state for a session. */
+  setStreamingForScope: (key: string, val: boolean) => void;
+  /** Ref to per-session abort controllers. */
+  abortControllersRef: React.MutableRefObject<Map<string, AbortController>>;
+  /** Process a Catty agent stream. */
+  processCattyStream: (
+    streamSessionId: string,
+    model: ReturnType<typeof createModelFromConfig>,
+    systemPrompt: string,
+    tools: ReturnType<typeof createCattyTools>,
+    sdkMessages: Array<ModelMessage>,
+    signal: AbortSignal,
+    currentAssistantMsgId: string,
+  ) => Promise<void>;
+  /** Send a message to the Catty agent (built-in). */
+  sendToCattyAgent: (
+    sessionId: string,
+    sendScopeKey: string,
+    trimmed: string,
+    abortController: AbortController,
+    currentSession: AISession | undefined,
+    assistantMsgId: string,
+    context: SendToCattyContext,
+    attachments?: ChatMessageAttachment[],
+  ) => Promise<void>;
+  /** Send a message to an external agent (ACP or raw process). */
+  sendToExternalAgent: (
+    sessionId: string,
+    trimmed: string,
+    agentConfig: ExternalAgentConfig,
+    abortController: AbortController,
+    attachedImages: Array<{ base64Data: string; mediaType: string; filename?: string }>,
+    context: SendToExternalContext,
+  ) => Promise<void>;
+  /** Report a streaming error to the chat. */
+  reportStreamError: (sessionId: string, abortSignal: AbortSignal, err: unknown) => void;
+}
+
+/** Context values needed by sendToCattyAgent that change frequently (avoids stale closures). */
+export interface SendToCattyContext {
+  activeProvider: ProviderConfig | undefined;
+  activeModelId: string;
+  scopeType: 'terminal' | 'workspace';
+  scopeTargetId?: string;
+  scopeLabel?: string;
+  globalPermissionMode: AIPermissionMode;
+  commandBlocklist?: string[];
+  terminalSessions: TerminalSessionInfo[];
+  webSearchConfig?: WebSearchConfig | null;
+  getExecutorContext?: () => ExecutorContext;
+  autoTitleSession: (sessionId: string, text: string) => void;
+}
+
+/** Context values needed by sendToExternalAgent that change frequently. */
+export interface SendToExternalContext {
+  existingSessionId?: string;
+  updateExternalSessionId?: (sessionId: string, externalSessionId: string | undefined) => void;
+  historyMessages?: Array<{ role: 'user' | 'assistant'; content: string }>;
+  terminalSessions: TerminalSessionInfo[];
+  providers: ProviderConfig[];
+  selectedAgentModel?: string;
+}
+
+// -------------------------------------------------------------------
+// Hook implementation
+// -------------------------------------------------------------------
+
+export function useAIChatStreaming({
+  maxIterations,
+  addMessageToSession,
+  updateLastMessage,
+  updateMessageById,
+}: UseAIChatStreamingParams): UseAIChatStreamingReturn {
+  // Per-session streaming state (keyed by sessionId)
+  const [streamingSessionIds, setStreamingSessions] = useState<Set<string>>(
+    () => new Set(sharedStreamingSessionIds),
+  );
+  useEffect(() => {
+    const syncFromStore = () => {
+      setStreamingSessions(new Set(sharedStreamingSessionIds));
+    };
+    streamingSubscribers.add(syncFromStore);
+    syncFromStore();
+    return () => {
+      streamingSubscribers.delete(syncFromStore);
+    };
+  }, []);
+
+  const setStreamingForScope = useCallback((key: string, val: boolean) => {
+    const hadKey = sharedStreamingSessionIds.has(key);
+    if (val) {
+      sharedStreamingSessionIds.add(key);
+    } else {
+      sharedStreamingSessionIds.delete(key);
+    }
+    if (hadKey !== val) {
+      emitStreamingStoreChange();
+    }
+  }, []);
+
+  // Per-scope abort controllers
+  const abortControllersRef = useRef<Map<string, AbortController>>(sharedAbortControllers);
+
+  // -------------------------------------------------------------------
+  // reportStreamError
+  // -------------------------------------------------------------------
+
+  const reportStreamError = useCallback((
+    sessionId: string,
+    abortSignal: AbortSignal,
+    err: unknown,
+  ) => {
+    if (abortSignal.aborted) return;
+    let errorStr: string;
+    if (err instanceof Error) errorStr = err.message;
+    else if (typeof err === 'object' && err !== null && 'message' in err) errorStr = String((err as { message: unknown }).message);
+    else if (typeof err === 'string') errorStr = err;
+    else { try { errorStr = JSON.stringify(err) ?? 'Unknown error'; } catch { errorStr = 'Unknown error'; } }
+    // Log the full unsanitized error for debugging
+    console.error('[AIChatSidePanel] Stream error (full):', errorStr);
+    const errorInfo = classifyError(errorStr);
+    updateLastMessage(sessionId, msg => ({
+      ...msg,
+      statusText: '',
+      executionStatus: msg.executionStatus === 'running' ? 'failed' : msg.executionStatus,
+    }));
+    addMessageToSession(sessionId, {
+      id: generateId(),
+      role: 'assistant',
+      content: '',
+      errorInfo,
+      timestamp: Date.now(),
+    });
+  }, [updateLastMessage, addMessageToSession]);
+
+  // -------------------------------------------------------------------
+  // processCattyStream
+  // -------------------------------------------------------------------
+
+  const processCattyStream = useCallback(async (
+    streamSessionId: string,
+    model: ReturnType<typeof createModelFromConfig>,
+    systemPrompt: string,
+    tools: ReturnType<typeof createCattyTools>,
+    sdkMessages: Array<ModelMessage>,
+    signal: AbortSignal,
+    currentAssistantMsgId: string,
+  ): Promise<void> => {
+    const result = streamText({
+      model,
+      messages: sdkMessages,
+      system: systemPrompt,
+      tools,
+      stopWhen: stepCountIs(maxIterations),
+      abortSignal: signal,
+    });
+
+    // Track the current assistant message ID so updates target the correct message
+    let activeMsgId = currentAssistantMsgId;
+    let lastAddedRole: 'assistant' | 'tool' = 'assistant';
+    const reader = result.fullStream.getReader();
+
+    // -- Text-delta batching: accumulate deltas and flush periodically --
+    let pendingText = '';
+    let rafId: number | null = null;
+
+    const flushText = () => {
+      if (pendingText) {
+        const text = pendingText;
+        pendingText = '';
+        if (lastAddedRole === 'tool') {
+          const newId = generateId();
+          addMessageToSession(streamSessionId, {
+            id: newId,
+            role: 'assistant',
+            content: text,
+            timestamp: Date.now(),
+          });
+          activeMsgId = newId;
+          lastAddedRole = 'assistant';
+        } else {
+          updateMessageById(streamSessionId, activeMsgId, msg => ({
+            ...msg,
+            content: msg.content + text,
+          }));
+        }
+      }
+      rafId = null;
+    };
+
+    const cancelPendingFlush = () => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+    };
+
+    try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      // Use the StreamChunk union for type narrowing instead of unsafe casts
+      const chunk = value as StreamChunk;
+      switch (chunk.type) {
+        case 'text':
+        case 'text-delta': {
+          const typedChunk = chunk as TextDeltaChunk;
+          const text = typedChunk.text ?? typedChunk.textDelta;
+          if (text) {
+            pendingText += text;
+            if (rafId === null) {
+              rafId = requestAnimationFrame(flushText);
+            }
+          }
+          break;
+        }
+        case 'reasoning':
+        case 'reasoning-start':
+        case 'reasoning-delta': {
+          cancelPendingFlush();
+          flushText();
+          const typedChunk = chunk as ReasoningChunk;
+          const rText = typedChunk.text;
+          if (rText) {
+            if (lastAddedRole === 'tool') {
+              const newId = generateId();
+              addMessageToSession(streamSessionId, {
+                id: newId,
+                role: 'assistant',
+                content: '',
+                thinking: rText,
+                timestamp: Date.now(),
+              });
+              activeMsgId = newId;
+              lastAddedRole = 'assistant';
+            } else {
+              updateMessageById(streamSessionId, activeMsgId, msg => ({
+                ...msg,
+                thinking: (msg.thinking || '') + rText,
+              }));
+            }
+          }
+          break;
+        }
+        case 'reasoning-end':
+        case 'text-start':
+        case 'text-end':
+        case 'start':
+        case 'finish':
+        case 'start-step':
+        case 'finish-step':
+          break;
+        case 'tool-call': {
+          cancelPendingFlush();
+          flushText();
+          const typedChunk = chunk as ToolCallChunk;
+          updateMessageById(streamSessionId, activeMsgId, msg => ({
+            ...msg,
+            toolCalls: [...(msg.toolCalls || []), {
+              id: typedChunk.toolCallId,
+              name: typedChunk.toolName,
+              arguments: (typedChunk.input ?? typedChunk.args) as Record<string, unknown>,
+            }],
+            executionStatus: 'running',
+            statusText: undefined,
+          }));
+          break;
+        }
+        case 'tool-result': {
+          cancelPendingFlush();
+          flushText();
+          const typedChunk = chunk as ToolResultChunk;
+          // Mark the assistant message's tool execution as completed
+          updateMessageById(streamSessionId, activeMsgId, msg =>
+            msg.role === 'assistant' && msg.executionStatus === 'running'
+              ? { ...msg, executionStatus: 'completed', statusText: undefined } : msg,
+          );
+          const toolOutput = typedChunk.output ?? typedChunk.result;
+          const toolError = isToolResultError(toolOutput);
+          addMessageToSession(streamSessionId, {
+            id: generateId(),
+            role: 'tool',
+            content: '',
+            toolResults: [{
+              toolCallId: typedChunk.toolCallId,
+              content: typeof toolOutput === 'string'
+                ? toolOutput
+                : JSON.stringify(toolOutput),
+              isError: toolError,
+            }],
+            timestamp: Date.now(),
+            executionStatus: 'completed',
+          });
+          lastAddedRole = 'tool';
+          break;
+        }
+        // tool-approval-request is no longer handled here — approval is now
+        // inside the tool's execute function via the approvalGate module.
+        // The SDK may still emit this chunk type but we simply ignore it.
+        case 'error': {
+          cancelPendingFlush();
+          flushText();
+          const typedChunk = chunk as ErrorChunk;
+          updateMessageById(streamSessionId, activeMsgId, msg => ({
+            ...msg,
+            statusText: '',
+            executionStatus: msg.executionStatus === 'running' ? 'failed' : msg.executionStatus,
+          }));
+          addMessageToSession(streamSessionId, {
+            id: generateId(),
+            role: 'assistant',
+            content: '',
+            errorInfo: classifyError(
+              typedChunk.error instanceof Error ? typedChunk.error.message
+                : typeof typedChunk.error === 'string' ? typedChunk.error
+                : (() => { try { return JSON.stringify(typedChunk.error) ?? 'Unknown error'; } catch { return 'Unknown error'; } })(),
+            ),
+            timestamp: Date.now(),
+          });
+          break;
+        }
+        default:
+          break;
+      }
+    }
+    } finally {
+      cancelPendingFlush();
+      flushText();
+      reader.releaseLock();
+    }
+    return;
+  }, [maxIterations, addMessageToSession, updateMessageById]);
+
+  // -------------------------------------------------------------------
+  // sendToExternalAgent
+  // -------------------------------------------------------------------
+
+  const sendToExternalAgent = useCallback(async (
+    sessionId: string,
+    trimmed: string,
+    agentConfig: ExternalAgentConfig,
+    abortController: AbortController,
+    attachedImages: Array<{ base64Data: string; mediaType: string; filename?: string }>,
+    context: SendToExternalContext,
+  ) => {
+    const bridge = getNetcattyBridge();
+
+    if (agentConfig.acpCommand && bridge) {
+      const requestId = `acp_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`;
+
+      // Push terminal session metadata to MCP bridge
+      if (bridge?.aiMcpUpdateSessions) {
+        await bridge.aiMcpUpdateSessions(context.terminalSessions, sessionId);
+      }
+
+      // Pass only the provider ID — the main process resolves and decrypts the API key itself,
+      // avoiding plaintext key transit across the IPC boundary.
+      const openaiProvider = context.providers.find(p => p.providerId === 'openai' && p.enabled && p.apiKey);
+      const agentProviderId = openaiProvider?.id;
+
+      // Mutable flag: set after tool-result, cleared when new assistant msg is created
+      let needsNewAssistantMsg = false;
+      const maybeCreateAssistantMsg = () => {
+        if (needsNewAssistantMsg) {
+          needsNewAssistantMsg = false;
+          addMessageToSession(sessionId, {
+            id: generateId(), role: 'assistant', content: '', timestamp: Date.now(),
+            model: agentConfig.name || 'external',
+          });
+        }
+      };
+
+      await runAcpAgentTurn(
+        bridge,
+        requestId,
+        sessionId,
+        agentConfig,
+        trimmed,
+        {
+          onTextDelta: (text: string) => {
+            maybeCreateAssistantMsg();
+            updateLastMessage(sessionId, msg => ({
+              ...msg,
+              content: msg.content + text,
+              statusText: undefined,
+              thinkingDurationMs: msg.thinking && !msg.thinkingDurationMs
+                ? Date.now() - msg.timestamp : msg.thinkingDurationMs,
+            }));
+          },
+          onThinkingDelta: (text: string) => {
+            maybeCreateAssistantMsg();
+            updateLastMessage(sessionId, msg => ({
+              ...msg, thinking: (msg.thinking || '') + text,
+            }));
+          },
+          onThinkingDone: () => {
+            updateLastMessage(sessionId, msg => ({
+              ...msg, thinkingDurationMs: msg.thinkingDurationMs || (Date.now() - msg.timestamp),
+            }));
+          },
+          onToolCall: (toolName: string, args: Record<string, unknown>, toolCallId?: string) => {
+            maybeCreateAssistantMsg();
+            updateLastMessage(sessionId, msg => ({
+              ...msg,
+              toolCalls: [...(msg.toolCalls || []), { id: toolCallId || `tc_${Date.now()}`, name: toolName, arguments: args }],
+              executionStatus: 'running',
+              statusText: undefined,
+            }));
+          },
+          onToolResult: (toolCallId: string, result: string, toolName?: string) => {
+            updateLastMessage(sessionId, msg => {
+              if (msg.role !== 'assistant' || msg.executionStatus !== 'running') return msg;
+              // Only patch tool call name if the existing name is missing/generic
+              // (don't overwrite a good name from onToolCall with a wrapper name from tool-result)
+              const updatedToolCalls = toolName && !toolName.includes('acp_provider_agent_dynamic_tool') && msg.toolCalls
+                ? msg.toolCalls.map(tc => tc.id === toolCallId && !tc.name ? { ...tc, name: toolName } : tc)
+                : msg.toolCalls;
+              return { ...msg, toolCalls: updatedToolCalls, executionStatus: 'completed', statusText: undefined };
+            });
+            const toolError = isToolResultError(result);
+            addMessageToSession(sessionId, {
+              id: generateId(), role: 'tool', content: '',
+              toolResults: [{ toolCallId, content: result, isError: toolError }],
+              timestamp: Date.now(), executionStatus: 'completed',
+            });
+            needsNewAssistantMsg = true;
+          },
+          onStatus: (message: string) => {
+            maybeCreateAssistantMsg();
+            updateLastMessage(sessionId, msg => ({ ...msg, statusText: message }));
+          },
+          onSessionId: (externalSessionId: string) => {
+            context.updateExternalSessionId?.(sessionId, externalSessionId);
+          },
+          onError: (error: string) => {
+            reportStreamError(sessionId, abortController.signal, error);
+            setStreamingForScope(sessionId, false);
+          },
+          onDone: () => {},
+        },
+        abortController.signal,
+        agentProviderId,
+        context.selectedAgentModel,
+        context.existingSessionId,
+        context.historyMessages,
+        attachedImages.length > 0 ? attachedImages : undefined,
+      );
+    } else {
+      // Fallback: spawn as raw process
+      await runExternalAgentTurn(
+        agentConfig,
+        trimmed,
+        {
+          onTextDelta: (text: string) => {
+            updateLastMessage(sessionId, msg => ({ ...msg, content: msg.content + text }));
+          },
+          onError: (error: string) => {
+            reportStreamError(sessionId, abortController.signal, error);
+            setStreamingForScope(sessionId, false);
+          },
+          onDone: () => {},
+        },
+        bridge as unknown as Parameters<typeof runExternalAgentTurn>[3],
+        abortController.signal,
+      );
+    }
+  }, [
+    addMessageToSession, updateLastMessage, setStreamingForScope, reportStreamError,
+  ]);
+
+  // -------------------------------------------------------------------
+  // sendToCattyAgent
+  // -------------------------------------------------------------------
+
+  const sendToCattyAgent = useCallback(async (
+    sessionId: string,
+    sendScopeKey: string,
+    trimmed: string,
+    abortController: AbortController,
+    currentSession: AISession | undefined,
+    assistantMsgId: string,
+    context: SendToCattyContext,
+    attachments?: ChatMessageAttachment[],
+  ) => {
+    const bridge = getNetcattyBridge();
+    const getExecutorContext = context.getExecutorContext ?? (() => ({
+      sessions: context.terminalSessions,
+      workspaceId: context.scopeType === 'workspace' ? context.scopeTargetId : undefined,
+      workspaceName: context.scopeType === 'workspace' ? context.scopeLabel : undefined,
+    }));
+    const tools = createCattyTools(
+      bridge,
+      getExecutorContext,
+      context.commandBlocklist,
+      context.globalPermissionMode,
+      context.webSearchConfig ?? undefined,
+      sessionId,
+    );
+
+    const systemPrompt = buildSystemPrompt({
+      scopeType: context.scopeType, scopeLabel: context.scopeLabel,
+      hosts: context.terminalSessions.map(s => ({
+        sessionId: s.sessionId, hostname: s.hostname, label: s.label,
+        os: s.os,
+        username: s.username,
+        protocol: s.protocol,
+        shellType: s.shellType,
+        connected: s.connected,
+      })),
+      permissionMode: context.globalPermissionMode,
+      webSearchEnabled: isWebSearchReady(context.webSearchConfig),
+    });
+
+    // Guard: activeProvider must exist for Catty agent path
+    if (!context.activeProvider) {
+      reportStreamError(sessionId, abortController.signal, 'No AI provider configured. Please configure a provider in Settings → AI.');
+      return;
+    }
+
+    // Create model with placeholder API key — the main process injects the real
+    // decrypted key when the HTTP request is proxied through IPC, so plaintext
+    // keys never transit the renderer ↔ main IPC boundary.
+    let model;
+    try {
+      model = createModelFromConfig({
+        ...context.activeProvider,
+        defaultModel: context.activeModelId || context.activeProvider.defaultModel || '',
+      });
+    } catch (e) {
+      console.error('[Catty] Model creation failed:', e);
+      reportStreamError(sessionId, abortController.signal, `Model creation failed: ${e instanceof Error ? e.message : String(e)}`);
+      return;
+    }
+
+    try {
+      // Issue #5: Build SDK messages including tool-call and tool-result messages
+      // so the LLM maintains full conversation context
+      const allMessages = currentSession?.messages ?? [];
+
+      // Collect all tool call IDs that have a corresponding tool result,
+      // so we can skip orphaned tool calls (e.g. from user stopping mid-execution)
+      const resolvedToolCallIds = new Set<string>();
+      for (const m of allMessages) {
+        if (m.role === 'tool' && m.toolResults) {
+          for (const tr of m.toolResults) resolvedToolCallIds.add(tr.toolCallId);
+        }
+      }
+
+      const findToolName = (toolCallId: string): string => {
+        for (const prev of allMessages) {
+          if (prev.role === 'assistant' && prev.toolCalls) {
+            const tc = prev.toolCalls.find(t => t.id === toolCallId);
+            if (tc) return tc.name;
+          }
+        }
+        return 'unknown';
+      };
+
+      const sdkMessages: Array<ModelMessage> = [];
+      for (const m of allMessages) {
+        if (m.role === 'user') {
+          // Build multimodal content when attachments are present (fallback to legacy `images` field)
+          const messageAttachments = m.attachments ?? m.images;
+          if (messageAttachments?.length) {
+            const parts: Array<{ type: 'text'; text: string } | { type: 'image'; image: string; mediaType?: string } | { type: 'file'; data: string; mediaType: string; filename?: string }> = [];
+            parts.push({ type: 'text', text: m.content });
+            for (const att of messageAttachments) {
+              if (att.mediaType.startsWith('image/')) {
+                parts.push({ type: 'image', image: att.base64Data, mediaType: att.mediaType });
+              } else {
+                parts.push({ type: 'file', data: att.base64Data, mediaType: att.mediaType, filename: att.filename });
+              }
+            }
+            sdkMessages.push({ role: 'user', content: parts });
+          } else {
+            sdkMessages.push({ role: 'user', content: m.content });
+          }
+        } else if (m.role === 'assistant') {
+          if (m.toolCalls?.length) {
+            // Only include tool calls that have matching results
+            const resolvedCalls = m.toolCalls.filter(tc => resolvedToolCallIds.has(tc.id));
+            const contentParts: Array<
+              { type: 'text'; text: string } |
+              { type: 'tool-call'; toolCallId: string; toolName: string; input: unknown }
+            > = [];
+            if (m.content) {
+              contentParts.push({ type: 'text' as const, text: m.content });
+            }
+            for (const tc of resolvedCalls) {
+              contentParts.push({
+                type: 'tool-call' as const,
+                toolCallId: tc.id,
+                toolName: tc.name,
+                input: tc.arguments ?? {},
+              });
+            }
+            // If all tool calls were orphaned, just include the text content
+            if (contentParts.length > 0) {
+              sdkMessages.push({ role: 'assistant', content: contentParts.length === 1 && contentParts[0].type === 'text' ? (contentParts[0] as { type: 'text'; text: string }).text : contentParts });
+            }
+          } else if (m.content) {
+            sdkMessages.push({ role: 'assistant', content: m.content });
+          }
+        } else if (m.role === 'tool' && m.toolResults?.length) {
+          sdkMessages.push({
+            role: 'tool',
+            content: m.toolResults.map(tr => ({
+              type: 'tool-result' as const,
+              toolCallId: tr.toolCallId,
+              toolName: findToolName(tr.toolCallId),
+              output: { type: 'text' as const, value: tr.content },
+            })),
+          });
+        }
+      }
+      // Build the current user message — include attachments as multimodal content
+      if (attachments?.length) {
+        const parts: Array<{ type: 'text'; text: string } | { type: 'image'; image: string; mediaType?: string } | { type: 'file'; data: string; mediaType: string; filename?: string }> = [];
+        parts.push({ type: 'text', text: trimmed });
+        for (const att of attachments) {
+          if (att.mediaType.startsWith('image/')) {
+            parts.push({ type: 'image', image: att.base64Data, mediaType: att.mediaType });
+          } else {
+            parts.push({ type: 'file', data: att.base64Data, mediaType: att.mediaType, filename: att.filename });
+          }
+        }
+        sdkMessages.push({ role: 'user', content: parts });
+      } else {
+        sdkMessages.push({ role: 'user', content: trimmed });
+      }
+
+      await processCattyStream(sessionId, model, systemPrompt, tools, sdkMessages, abortController.signal, assistantMsgId);
+    } catch (err) {
+      console.error('[Catty] streamText error:', err);
+      reportStreamError(sessionId, abortController.signal, err);
+    } finally {
+      // Clear any lingering statusText when the stream finishes
+      updateLastMessage(sessionId, msg => msg.statusText ? { ...msg, statusText: '' } : msg);
+      setStreamingForScope(sessionId, false);
+      abortControllersRef.current.delete(sessionId);
+      context.autoTitleSession(sessionId, trimmed);
+    }
+  }, [
+    processCattyStream, reportStreamError, setStreamingForScope,
+    updateLastMessage,
+  ]);
+
+  return {
+    streamingSessionIds,
+    setStreamingForScope,
+    abortControllersRef,
+    processCattyStream,
+    sendToCattyAgent,
+    sendToExternalAgent,
+    reportStreamError,
+  };
+}

components/ai/hooks/useConversationExport.ts

@@ -0,0 +1,76 @@
+/**
+ * useConversationExport — Encapsulates conversation export logic for the AI chat panel.
+ *
+ * Handles:
+ * - Export in markdown, JSON, and plain text formats
+ * - Object URL lifecycle management (creation, revocation, cleanup on unmount)
+ */
+
+import React, { useCallback, useEffect, useRef } from 'react';
+import type { AISession } from '../../../infrastructure/ai/types';
+import { exportAsMarkdown, exportAsJSON, exportAsPlainText, getExportFilename } from '../../../infrastructure/ai/conversationExport';
+
+// -------------------------------------------------------------------
+// Hook return type
+// -------------------------------------------------------------------
+
+export interface UseConversationExportReturn {
+  /** Trigger a download of the active session in the given format. */
+  handleExport: (format: 'md' | 'json' | 'txt') => void;
+  /** Ref to active object URLs for cleanup on unmount (exposed for the parent cleanup effect). */
+  activeObjectUrlsRef: React.MutableRefObject<Set<string>>;
+}
+
+// -------------------------------------------------------------------
+// Hook implementation
+// -------------------------------------------------------------------
+
+export function useConversationExport(
+  activeSession: AISession | null,
+): UseConversationExportReturn {
+  // Ref to track active object URLs for cleanup on unmount (Issue #19)
+  const activeObjectUrlsRef = useRef<Set<string>>(new Set());
+
+  // Clean up object URLs on unmount
+  useEffect(() => {
+    const urls = activeObjectUrlsRef.current;
+    return () => {
+      urls.forEach(url => URL.revokeObjectURL(url));
+      urls.clear();
+    };
+  }, []);
+
+  const handleExport = useCallback((format: 'md' | 'json' | 'txt') => {
+    if (!activeSession) return;
+    let content: string;
+    switch (format) {
+      case 'md': content = exportAsMarkdown(activeSession); break;
+      case 'json': content = exportAsJSON(activeSession); break;
+      case 'txt': content = exportAsPlainText(activeSession); break;
+    }
+    const filename = getExportFilename(activeSession, format);
+    // Create a download blob
+    const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    // Track URL for cleanup on unmount (Issue #19)
+    activeObjectUrlsRef.current.add(url);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    // Revoke after a generous delay to ensure download completes, then remove from tracking set
+    const revokeTimeout = setTimeout(() => {
+      URL.revokeObjectURL(url);
+      activeObjectUrlsRef.current.delete(url);
+    }, 60_000); // 60 seconds to be safe for large files
+    // If component unmounts before timeout, cleanup effect will revoke it
+    void revokeTimeout; // suppress unused warning
+  }, [activeSession]);
+
+  return {
+    handleExport,
+    activeObjectUrlsRef,
+  };
+}

components/settings/settings-ui.tsx

@@ -34,13 +34,21 @@ export const Toggle: React.FC<ToggleProps> = ({ checked, onChange, disabled }) =
 
 interface SelectProps {
   value: string;
-  options: { value: string; label: string }[];
+  options: { value: string; label: string; icon?: React.ReactNode }[];
   onChange: (value: string) => void;
   className?: string;
   disabled?: boolean;
+  placeholder?: string;
 }
 
-export const Select: React.FC<SelectProps> = ({ value, options, onChange, className, disabled }) => {
+export const Select: React.FC<SelectProps> = ({
+  value,
+  options,
+  onChange,
+  className,
+  disabled,
+  placeholder,
+}) => {
   const selectedOption = options.find((opt) => opt.value === value);
   return (
     <SelectPrimitive.Root value={value} onValueChange={onChange} disabled={disabled}>
@@ -50,7 +58,12 @@ export const Select: React.FC<SelectProps> = ({ value, options, onChange, classN
           className,
         )}
       >
-        <SelectPrimitive.Value>{selectedOption?.label ?? value}</SelectPrimitive.Value>
+        <SelectPrimitive.Value placeholder={placeholder}>
+          <span className="flex items-center gap-2">
+            {selectedOption?.icon}
+            {selectedOption?.label}
+          </span>
+        </SelectPrimitive.Value>
         <SelectPrimitive.Icon asChild>
           <ChevronDown className="ml-2 h-4 w-4 opacity-50" />
         </SelectPrimitive.Icon>
@@ -76,7 +89,12 @@ export const Select: React.FC<SelectProps> = ({ value, options, onChange, classN
                     <Check className="h-4 w-4" />
                   </SelectPrimitive.ItemIndicator>
                 </span>
-                <SelectPrimitive.ItemText>{opt.label}</SelectPrimitive.ItemText>
+                <SelectPrimitive.ItemText>
+                  <span className="flex items-center gap-2">
+                    {opt.icon}
+                    {opt.label}
+                  </span>
+                </SelectPrimitive.ItemText>
               </SelectPrimitive.Item>
             ))}
           </SelectPrimitive.Viewport>
@@ -120,4 +138,3 @@ export const SettingsTabContent: React.FC<{
     </ScrollArea>
   </TabsContent>
 );
-

components/settings/tabs/SettingsAITab.tsx

@@ -0,0 +1,540 @@
+/**
+ * Settings AI Tab - AI provider configuration, agent CLI detection, and safety settings
+ *
+ * Sub-components live in ./ai/ directory:
+ *   - ProviderCard, ProviderConfigForm, AddProviderDropdown
+ *   - ModelSelector, ProviderIconBadge
+ *   - CodexConnectionCard, ClaudeCodeCard
+ *   - SafetySettings
+ */
+import { Bot, Globe } from "lucide-react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import type {
+  AIPermissionMode,
+  AIProviderId,
+  ExternalAgentConfig,
+  ProviderConfig,
+  WebSearchConfig,
+} from "../../../infrastructure/ai/types";
+import { PROVIDER_PRESETS } from "../../../infrastructure/ai/types";
+import { useAgentDiscovery } from "../../../application/state/useAgentDiscovery";
+import { useI18n } from "../../../application/i18n/I18nProvider";
+import { TabsContent } from "../../ui/tabs";
+import { Select, SettingRow } from "../settings-ui";
+import { AgentIconBadge } from "../../ai/AgentIconBadge";
+
+import type {
+  AgentPathInfo,
+  CodexIntegrationStatus,
+  CodexLoginSession,
+} from "./ai/types";
+import {
+  AGENT_DEFAULTS,
+  getBridge,
+  normalizeCodexBridgeError,
+} from "./ai/types";
+import { ProviderIconBadge } from "./ai/ProviderIconBadge";
+import { ProviderCard } from "./ai/ProviderCard";
+import { AddProviderDropdown } from "./ai/AddProviderDropdown";
+import { CodexConnectionCard } from "./ai/CodexConnectionCard";
+import { ClaudeCodeCard } from "./ai/ClaudeCodeCard";
+import { SafetySettings } from "./ai/SafetySettings";
+import { WebSearchSettings } from "./ai/WebSearchSettings";
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+interface SettingsAITabProps {
+  providers: ProviderConfig[];
+  addProvider: (provider: ProviderConfig) => void;
+  updateProvider: (id: string, updates: Partial<ProviderConfig>) => void;
+  removeProvider: (id: string) => void;
+  activeProviderId: string;
+  setActiveProviderId: (id: string) => void;
+  activeModelId: string;
+  setActiveModelId: (id: string) => void;
+  globalPermissionMode: AIPermissionMode;
+  setGlobalPermissionMode: (mode: AIPermissionMode) => void;
+  externalAgents: ExternalAgentConfig[];
+  setExternalAgents: (value: ExternalAgentConfig[] | ((prev: ExternalAgentConfig[]) => ExternalAgentConfig[])) => void;
+  defaultAgentId: string;
+  setDefaultAgentId: (id: string) => void;
+  commandBlocklist: string[];
+  setCommandBlocklist: (value: string[]) => void;
+  commandTimeout: number;
+  setCommandTimeout: (value: number) => void;
+  maxIterations: number;
+  setMaxIterations: (value: number) => void;
+  webSearchConfig: WebSearchConfig | null;
+  setWebSearchConfig: (config: WebSearchConfig | null) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Main Tab Component
+// ---------------------------------------------------------------------------
+
+const SettingsAITab: React.FC<SettingsAITabProps> = ({
+  providers,
+  addProvider,
+  updateProvider,
+  removeProvider,
+  activeProviderId,
+  setActiveProviderId,
+  activeModelId: _activeModelId,
+  setActiveModelId,
+  globalPermissionMode,
+  setGlobalPermissionMode,
+  externalAgents,
+  setExternalAgents,
+  defaultAgentId,
+  setDefaultAgentId,
+  commandBlocklist,
+  setCommandBlocklist,
+  commandTimeout,
+  setCommandTimeout,
+  maxIterations,
+  setMaxIterations,
+  webSearchConfig,
+  setWebSearchConfig,
+}) => {
+  const { t } = useI18n();
+  const [editingProviderId, setEditingProviderId] = useState<string | null>(null);
+  const [codexIntegration, setCodexIntegration] = useState<CodexIntegrationStatus | null>(null);
+  const [codexLoginSession, setCodexLoginSession] = useState<CodexLoginSession | null>(null);
+  const [isCodexLoading, setIsCodexLoading] = useState(false);
+  const [codexError, setCodexError] = useState<string | null>(null);
+
+  // Path detection state
+  const [codexPathInfo, setCodexPathInfo] = useState<AgentPathInfo | null>(null);
+  const [codexCustomPath, setCodexCustomPath] = useState("");
+  const [isResolvingCodex, setIsResolvingCodex] = useState(false);
+
+  const [claudePathInfo, setClaudePathInfo] = useState<AgentPathInfo | null>(null);
+  const [claudeCustomPath, setClaudeCustomPath] = useState("");
+  const [isResolvingClaude, setIsResolvingClaude] = useState(false);
+
+  const {
+    discoveredAgents,
+    isDiscovering,
+    enableAgent,
+  } = useAgentDiscovery(externalAgents, setExternalAgents);
+
+  // Derive path info from discovery results
+  useEffect(() => {
+    if (isDiscovering) return;
+
+    const codex = discoveredAgents.find((a) => a.command === "codex");
+    setCodexPathInfo(
+      codex
+        ? { path: codex.path, version: codex.version, available: true }
+        : { path: null, version: null, available: false },
+    );
+
+    const claude = discoveredAgents.find((a) => a.command === "claude");
+    setClaudePathInfo(
+      claude
+        ? { path: claude.path, version: claude.version, available: true }
+        : { path: null, version: null, available: false },
+    );
+  }, [isDiscovering, discoveredAgents]);
+
+  // Auto-register discovered agents in externalAgents
+  useEffect(() => {
+    if (isDiscovering || discoveredAgents.length === 0) return;
+
+    setExternalAgents((prev) => {
+      const agentsToRegister: ExternalAgentConfig[] = [];
+
+      for (const da of discoveredAgents) {
+        if (da.command !== "codex" && da.command !== "claude") continue;
+        const agentId = `discovered_${da.command}`;
+        if (prev.some((ea) => ea.id === agentId)) continue;
+        agentsToRegister.push(enableAgent(da));
+      }
+
+      return agentsToRegister.length > 0 ? [...prev, ...agentsToRegister] : prev;
+    });
+  }, [isDiscovering, discoveredAgents, enableAgent, setExternalAgents]);
+
+  // Validate a custom path for an agent
+  const handleCheckCustomPath = useCallback(async (agentKey: "codex" | "claude") => {
+    const bridge = getBridge();
+    if (!bridge?.aiResolveCli) return;
+
+    const customPath = agentKey === "codex" ? codexCustomPath : claudeCustomPath;
+    const setInfo = agentKey === "codex" ? setCodexPathInfo : setClaudePathInfo;
+    const setResolving = agentKey === "codex" ? setIsResolvingCodex : setIsResolvingClaude;
+
+    setResolving(true);
+    try {
+      const result = await bridge.aiResolveCli({
+        command: agentKey,
+        customPath: customPath.trim(),
+      });
+      setInfo(result);
+
+      // Register/update in externalAgents if valid
+      if (result.available && result.path) {
+        const agentId = `discovered_${agentKey}`;
+        const defaults = AGENT_DEFAULTS[agentKey];
+        setExternalAgents((prev) => {
+          const idx = prev.findIndex((a) => a.id === agentId);
+          const config: ExternalAgentConfig = {
+            id: agentId,
+            command: result.path!,
+            enabled: true,
+            ...defaults,
+          };
+          if (idx >= 0) {
+            const updated = [...prev];
+            updated[idx] = { ...updated[idx], command: result.path! };
+            return updated;
+          }
+          return [...prev, config];
+        });
+      }
+    } catch (err) {
+      console.error("Path resolution failed:", err);
+    } finally {
+      setResolving(false);
+    }
+  }, [codexCustomPath, claudeCustomPath, setExternalAgents]);
+
+  // Add a new provider from preset
+  const handleAddProvider = useCallback(
+    (providerId: AIProviderId) => {
+      const preset = PROVIDER_PRESETS[providerId];
+      const id = `provider_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`;
+      addProvider({
+        id,
+        providerId,
+        name: preset.name,
+        baseURL: preset.defaultBaseURL,
+        enabled: false,
+      });
+      // Auto-open config form
+      setEditingProviderId(id);
+    },
+    [addProvider],
+  );
+
+  // Remove provider with confirmation
+  const handleRemoveProvider = useCallback(
+    (id: string) => {
+      const provider = providers.find((p) => p.id === id);
+      const name = provider?.name || id;
+      const ok = window.confirm(
+        t('confirm.removeProvider', { name }),
+      );
+      if (!ok) return;
+      removeProvider(id);
+      if (editingProviderId === id) {
+        setEditingProviderId(null);
+      }
+    },
+    [removeProvider, editingProviderId, providers, t],
+  );
+
+  // Agent options for default agent
+  const agentOptions = useMemo(() => [
+    { value: "catty", label: t('ai.defaultAgent.catty'), icon: <AgentIconBadge agent={{ id: "catty", type: "builtin" }} size="xs" variant="plain" /> },
+    ...externalAgents
+      .filter((a) => a.enabled)
+      .map((a) => ({ value: a.id, label: a.name, icon: <AgentIconBadge agent={a} size="xs" variant="plain" /> })),
+  ], [externalAgents, t]);
+
+  const hasOpenAiProviderKey = providers.some(
+    (provider) => provider.providerId === "openai" && provider.enabled && !!provider.apiKey,
+  );
+
+  const refreshCodexIntegration = useCallback(async () => {
+    const bridge = getBridge();
+    if (!bridge?.aiCodexGetIntegration) return;
+
+    setIsCodexLoading(true);
+    setCodexError(null);
+    try {
+      const integration = await bridge.aiCodexGetIntegration();
+      setCodexIntegration(integration);
+    } catch (err) {
+      setCodexError(normalizeCodexBridgeError(err));
+    } finally {
+      setIsCodexLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refreshCodexIntegration();
+  }, [refreshCodexIntegration]);
+
+  useEffect(() => {
+    if (!codexLoginSession || codexLoginSession.state !== "running") {
+      return;
+    }
+
+    const bridge = getBridge();
+    if (!bridge?.aiCodexGetLoginSession) {
+      return;
+    }
+
+    let cancelled = false;
+    const intervalId = window.setInterval(() => {
+      void bridge.aiCodexGetLoginSession?.(codexLoginSession.sessionId).then((result) => {
+        if (cancelled || !result?.ok || !result.session) return;
+
+        setCodexLoginSession(result.session);
+        if (result.session.state !== "running") {
+          if (result.session.state === "success") {
+            void refreshCodexIntegration();
+          }
+        }
+      }).catch((err) => {
+        if (!cancelled) {
+          setCodexError(normalizeCodexBridgeError(err));
+        }
+      });
+    }, 1000);
+
+    return () => {
+      cancelled = true;
+      window.clearInterval(intervalId);
+    };
+  }, [codexLoginSession, refreshCodexIntegration]);
+
+  const handleStartCodexLogin = useCallback(async () => {
+    const bridge = getBridge();
+    if (!bridge?.aiCodexStartLogin) return;
+
+    setCodexError(null);
+    setIsCodexLoading(true);
+    try {
+      const result = await bridge.aiCodexStartLogin();
+      if (!result.ok || !result.session) {
+        throw new Error(result.error || "Failed to start Codex login");
+      }
+      setCodexLoginSession(result.session);
+    } catch (err) {
+      setCodexError(normalizeCodexBridgeError(err));
+    } finally {
+      setIsCodexLoading(false);
+    }
+  }, []);
+
+  const handleCancelCodexLogin = useCallback(async () => {
+    const bridge = getBridge();
+    if (!bridge?.aiCodexCancelLogin || !codexLoginSession) return;
+
+    setCodexError(null);
+    try {
+      const result = await bridge.aiCodexCancelLogin(codexLoginSession.sessionId);
+      if (result.session) {
+        setCodexLoginSession(result.session);
+      }
+    } catch (err) {
+      setCodexError(normalizeCodexBridgeError(err));
+    }
+  }, [codexLoginSession]);
+
+  const handleOpenCodexLoginUrl = useCallback(() => {
+    const bridge = getBridge();
+    const url = codexLoginSession?.url;
+    if (!bridge?.openExternal || !url) return;
+    // Only allow https:// URLs to prevent opening arbitrary protocols
+    if (!url.startsWith("https://")) return;
+    void bridge.openExternal(url);
+  }, [codexLoginSession]);
+
+  const handleCodexLogout = useCallback(async () => {
+    const bridge = getBridge();
+    if (!bridge?.aiCodexLogout) return;
+
+    setCodexError(null);
+    setIsCodexLoading(true);
+    try {
+      const result = await bridge.aiCodexLogout();
+      if (!result.ok) {
+        throw new Error(result.error || "Failed to log out from Codex");
+      }
+      setCodexLoginSession(null);
+      await refreshCodexIntegration();
+    } catch (err) {
+      setCodexError(normalizeCodexBridgeError(err));
+    } finally {
+      setIsCodexLoading(false);
+    }
+  }, [refreshCodexIntegration]);
+
+  return (
+    <TabsContent
+      value="ai"
+      className="data-[state=inactive]:hidden h-full flex flex-col"
+    >
+      <div className="flex-1 overflow-y-auto overflow-x-hidden px-8 py-6">
+        <div className="max-w-2xl space-y-8">
+          {/* Header */}
+          <div>
+            <h2 className="text-xl font-semibold">{t('ai.title')}</h2>
+            <p className="text-sm text-muted-foreground mt-1">
+              {t('ai.description')}
+            </p>
+          </div>
+
+          {/* -- Providers Section -- */}
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Globe size={18} className="text-muted-foreground" />
+                <h3 className="text-base font-medium">{t('ai.providers')}</h3>
+              </div>
+              <AddProviderDropdown onAdd={handleAddProvider} />
+            </div>
+
+            {providers.length === 0 ? (
+              <div className="rounded-lg border border-dashed border-border/60 p-6 text-center">
+                <Bot size={24} className="mx-auto text-muted-foreground mb-2" />
+                <p className="text-sm text-muted-foreground">
+                  {t('ai.providers.empty')}
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {providers.map((provider) => (
+                  <ProviderCard
+                    key={provider.id}
+                    provider={provider}
+                    isActive={provider.id === activeProviderId}
+                    onToggleEnabled={(enabled) => {
+                      if (enabled) {
+                        // Activate this provider, deactivate all others
+                        setActiveProviderId(provider.id);
+                        if (provider.defaultModel) {
+                          setActiveModelId(provider.defaultModel);
+                        }
+                        for (const p of providers) {
+                          if (p.id === provider.id) {
+                            if (!p.enabled) updateProvider(p.id, { enabled: true });
+                          } else {
+                            if (p.enabled) updateProvider(p.id, { enabled: false });
+                          }
+                        }
+                      } else {
+                        // Deactivate this provider
+                        if (activeProviderId === provider.id) {
+                          setActiveProviderId("");
+                          setActiveModelId("");
+                        }
+                        updateProvider(provider.id, { enabled: false });
+                      }
+                    }}
+                    onEdit={() =>
+                      setEditingProviderId(
+                        editingProviderId === provider.id ? null : provider.id,
+                      )
+                    }
+                    onRemove={() => handleRemoveProvider(provider.id)}
+                    onUpdate={(updates) => {
+                      updateProvider(provider.id, updates);
+                      // If this is the active provider and model changed, update activeModelId
+                      if (provider.id === activeProviderId && updates.defaultModel !== undefined) {
+                        setActiveModelId(updates.defaultModel || "");
+                      }
+                    }}
+                    isEditing={editingProviderId === provider.id}
+                    onCancelEdit={() => setEditingProviderId(null)}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* -- Codex Section -- */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <ProviderIconBadge providerId="openai" size="sm" />
+              <h3 className="text-base font-medium">{t('ai.codex')}</h3>
+            </div>
+
+            <CodexConnectionCard
+              pathInfo={codexPathInfo}
+              isResolvingPath={isDiscovering || isResolvingCodex}
+              customPath={codexCustomPath}
+              onCustomPathChange={setCodexCustomPath}
+              onRecheckPath={() => void handleCheckCustomPath("codex")}
+              integration={codexIntegration}
+              loginSession={codexLoginSession}
+              isLoading={isCodexLoading}
+              hasOpenAiProviderKey={hasOpenAiProviderKey}
+              error={codexError}
+              onRefresh={() => void refreshCodexIntegration()}
+              onConnect={() => void handleStartCodexLogin()}
+              onCancel={() => void handleCancelCodexLogin()}
+              onOpenUrl={handleOpenCodexLoginUrl}
+              onLogout={() => void handleCodexLogout()}
+            />
+          </div>
+
+          {/* -- Claude Code Section -- */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <ProviderIconBadge providerId="claude" size="sm" />
+              <h3 className="text-base font-medium">{t('ai.claude.title')}</h3>
+            </div>
+
+            <ClaudeCodeCard
+              pathInfo={claudePathInfo}
+              isResolvingPath={isDiscovering || isResolvingClaude}
+              customPath={claudeCustomPath}
+              onCustomPathChange={setClaudeCustomPath}
+              onRecheckPath={() => void handleCheckCustomPath("claude")}
+            />
+          </div>
+
+          {/* -- Default Agent Section -- */}
+          {agentOptions.length > 1 && (
+            <div className="space-y-4">
+              <div className="flex items-center gap-2">
+                <Bot size={18} className="text-muted-foreground" />
+                <h3 className="text-base font-medium">{t('ai.defaultAgent')}</h3>
+              </div>
+
+              <div className="bg-muted/30 rounded-lg p-4">
+                <SettingRow
+                  label={t('ai.defaultAgent')}
+                  description={t('ai.defaultAgent.description')}
+                >
+                  <Select
+                    value={defaultAgentId}
+                    options={agentOptions}
+                    onChange={setDefaultAgentId}
+                    className="w-48"
+                  />
+                </SettingRow>
+              </div>
+            </div>
+          )}
+
+          {/* -- Web Search Section -- */}
+          <WebSearchSettings
+            webSearchConfig={webSearchConfig}
+            setWebSearchConfig={setWebSearchConfig}
+          />
+
+          {/* -- Safety Section -- */}
+          <SafetySettings
+            globalPermissionMode={globalPermissionMode}
+            setGlobalPermissionMode={setGlobalPermissionMode}
+            commandBlocklist={commandBlocklist}
+            setCommandBlocklist={setCommandBlocklist}
+            commandTimeout={commandTimeout}
+            setCommandTimeout={setCommandTimeout}
+            maxIterations={maxIterations}
+            setMaxIterations={setMaxIterations}
+          />
+        </div>
+      </div>
+    </TabsContent>
+  );
+};
+
+export default SettingsAITab;

components/settings/tabs/SettingsFileAssociationsTab.tsx

@@ -29,7 +29,7 @@ const getOpenerLabel = (
 export default function SettingsFileAssociationsTab() {
   const { t } = useI18n();
   const { getAllAssociations, removeAssociation, setOpenerForExtension } = useSftpFileAssociations();
-  const { sftpDoubleClickBehavior, setSftpDoubleClickBehavior, sftpAutoSync, setSftpAutoSync, sftpShowHiddenFiles, setSftpShowHiddenFiles, sftpUseCompressedUpload, setSftpUseCompressedUpload } = useSettingsState();
+  const { sftpDoubleClickBehavior, setSftpDoubleClickBehavior, sftpAutoSync, setSftpAutoSync, sftpShowHiddenFiles, setSftpShowHiddenFiles, sftpUseCompressedUpload, setSftpUseCompressedUpload, sftpAutoOpenSidebar, setSftpAutoOpenSidebar } = useSettingsState();
   const associations = getAllAssociations();
   const [editingExtension, setEditingExtension] = useState<string | null>(null);
 
@@ -253,6 +253,46 @@ export default function SettingsFileAssociationsTab() {
           </button>
         </div>
 
+        {/* Auto-open sidebar section */}
+        <div className="space-y-4">
+          <SectionHeader title={t('settings.sftp.autoOpenSidebar')} />
+          <p className="text-sm text-muted-foreground">
+            {t('settings.sftp.autoOpenSidebar.desc')}
+          </p>
+          <button
+            onClick={() => setSftpAutoOpenSidebar(!sftpAutoOpenSidebar)}
+            className={cn(
+              "w-full text-left p-4 rounded-lg border-2 transition-colors",
+              sftpAutoOpenSidebar
+                ? "border-primary bg-primary/5"
+                : "border-border hover:border-primary/50 hover:bg-secondary/50"
+            )}
+          >
+            <div className="flex items-start gap-3">
+              <div className={cn(
+                "h-5 w-5 rounded border-2 flex items-center justify-center mt-0.5 shrink-0",
+                sftpAutoOpenSidebar
+                  ? "border-primary bg-primary"
+                  : "border-muted-foreground/30"
+              )}>
+                {sftpAutoOpenSidebar && (
+                  <svg className="h-3 w-3 text-primary-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                  </svg>
+                )}
+              </div>
+              <div className="space-y-1">
+                <Label className="font-medium cursor-pointer">
+                  {t('settings.sftp.autoOpenSidebar.enable')}
+                </Label>
+                <p className="text-sm text-muted-foreground">
+                  {t('settings.sftp.autoOpenSidebar.enableDesc')}
+                </p>
+              </div>
+            </div>
+          </button>
+        </div>
+
         {/* File associations section */}
         <div className="space-y-4">
           <SectionHeader title={t('settings.sftpFileAssociations.title')} />

components/settings/tabs/SettingsSyncTab.tsx

@@ -15,6 +15,7 @@ export default function SettingsSyncTab(props: {
   importDataFromString: (data: string) => void;
   importPortForwardingRules: (rules: PortForwardingRule[]) => void;
   clearVaultData: () => void;
+  onSettingsApplied?: () => void;
 }) {
   const {
     vault,
@@ -22,6 +23,7 @@ export default function SettingsSyncTab(props: {
     importDataFromString,
     importPortForwardingRules,
     clearVaultData,
+    onSettingsApplied,
   } = props;
 
   const onBuildPayload = useCallback((): SyncPayload => {
@@ -56,9 +58,10 @@ export default function SettingsSyncTab(props: {
       applySyncPayload(payload, {
         importVaultData: importDataFromString,
         importPortForwardingRules,
+        onSettingsApplied,
       });
     },
-    [importDataFromString, importPortForwardingRules],
+    [importDataFromString, importPortForwardingRules, onSettingsApplied],
   );
 
   const clearAllLocalData = useCallback(() => {

components/settings/tabs/SettingsSystemTab.tsx

@@ -55,6 +55,10 @@ interface SettingsSystemTabProps {
   closeToTray: boolean;
   setCloseToTray: (enabled: boolean) => void;
   hotkeyRegistrationError: string | null;
+  globalHotkeyEnabled: boolean;
+  setGlobalHotkeyEnabled: (enabled: boolean) => void;
+  autoUpdateEnabled: boolean;
+  setAutoUpdateEnabled: (enabled: boolean) => void;
   // Unified update state — from useUpdateCheck hook in SettingsPageContent
   updateState: UpdateState;
   checkNow: () => Promise<unknown>;
@@ -74,6 +78,10 @@ const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
   closeToTray,
   setCloseToTray,
   hotkeyRegistrationError,
+  globalHotkeyEnabled,
+  setGlobalHotkeyEnabled,
+  autoUpdateEnabled,
+  setAutoUpdateEnabled,
   updateState,
   checkNow,
   installUpdate,
@@ -367,6 +375,15 @@ const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
                 )}
               </div>
             </div>
+            <SettingRow
+              label={t('settings.update.autoUpdateEnabled')}
+              description={t('settings.update.autoUpdateEnabledDesc')}
+            >
+              <Toggle
+                checked={autoUpdateEnabled}
+                onChange={setAutoUpdateEnabled}
+              />
+            </SettingRow>
             <p className="text-xs text-muted-foreground">
               {updateState.lastCheckedAt && (
                 <span>
@@ -580,7 +597,7 @@ const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
                   value={sessionLogsFormat}
                   options={formatOptions}
                   onChange={(val) => setSessionLogsFormat(val as SessionLogFormat)}
-                  className="w-32"
+                  className="w-44"
                   disabled={!sessionLogsEnabled}
                 />
               </SettingRow>
@@ -599,42 +616,55 @@ const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
             </div>
 
             <div className="bg-muted/30 rounded-lg p-4 space-y-4">
-              {/* Toggle Window Hotkey */}
+              {/* Enable/Disable Global Hotkey */}
               <SettingRow
-                label={t("settings.globalHotkey.toggleWindow")}
-                description={t("settings.globalHotkey.toggleWindowDesc")}
+                label={t('settings.globalHotkey.enabled')}
+                description={t('settings.globalHotkey.enabledDesc')}
               >
-                <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>
+                <Toggle
+                  checked={globalHotkeyEnabled}
+                  onChange={setGlobalHotkeyEnabled}
+                />
               </SettingRow>
-              {(hotkeyError || hotkeyRegistrationError) && (
-                <p className="text-sm text-destructive">{hotkeyError || hotkeyRegistrationError}</p>
-              )}
+
+              <div className={cn(!globalHotkeyEnabled && "opacity-50 pointer-events-none")}>
+                {/* 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 mt-2">{hotkeyError || hotkeyRegistrationError}</p>
+                )}
+              </div>
 
               {/* Close to Tray */}
               <SettingRow

components/settings/tabs/SettingsTerminalTab.tsx

@@ -575,6 +575,23 @@ export default function SettingsTerminalTab(props: {
           <Toggle checked={!terminalSettings.disableBracketedPaste} onChange={(v) => updateTerminalSetting("disableBracketedPaste", !v)} />
         </SettingRow>
 
+        <SettingRow
+          label={t("settings.terminal.behavior.osc52Clipboard")}
+          description={t("settings.terminal.behavior.osc52Clipboard.desc")}
+        >
+          <Select
+            value={terminalSettings.osc52Clipboard ?? 'write-only'}
+            options={[
+              { value: "off", label: t("settings.terminal.behavior.osc52Clipboard.off") },
+              { value: "write-only", label: t("settings.terminal.behavior.osc52Clipboard.writeOnly") },
+              { value: "read-write", label: t("settings.terminal.behavior.osc52Clipboard.readWrite") },
+              { value: "prompt", label: t("settings.terminal.behavior.osc52Clipboard.prompt") },
+            ]}
+            onChange={(v) => updateTerminalSetting("osc52Clipboard", v as "off" | "write-only" | "read-write" | "prompt")}
+            className="w-40"
+          />
+        </SettingRow>
+
         <SettingRow
           label={t("settings.terminal.behavior.scrollOnInput")}
           description={t("settings.terminal.behavior.scrollOnInput.desc")}
@@ -616,7 +633,7 @@ export default function SettingsTerminalTab(props: {
               { value: "meta", label: t("settings.terminal.behavior.linkModifier.meta") },
             ]}
             onChange={(v) => updateTerminalSetting("linkModifier", v as LinkModifier)}
-            className="w-40"
+            className="w-48"
           />
         </SettingRow>
       </div>

components/settings/tabs/ai/AddProviderDropdown.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import { ChevronDown, Plus } from "lucide-react";
+import type { AIProviderId } from "../../../../infrastructure/ai/types";
+import { PROVIDER_PRESETS } from "../../../../infrastructure/ai/types";
+import { useI18n } from "../../../../application/i18n/I18nProvider";
+import { Button } from "../../../ui/button";
+import { cn } from "../../../../lib/utils";
+import { ProviderIconBadge } from "./ProviderIconBadge";
+
+export const AddProviderDropdown: React.FC<{
+  onAdd: (providerId: AIProviderId) => void;
+}> = ({ onAdd }) => {
+  const { t } = useI18n();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const providerIds = Object.keys(PROVIDER_PRESETS) as AIProviderId[];
+
+  return (
+    <div className="relative">
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => setIsOpen(!isOpen)}
+        className="gap-1.5"
+      >
+        <Plus size={14} />
+        {t('ai.providers.add')}
+        <ChevronDown size={12} className={cn("transition-transform", isOpen && "rotate-180")} />
+      </Button>
+
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <div className="fixed inset-0 z-[100]" onClick={() => setIsOpen(false)} />
+          {/* Menu */}
+          <div className="absolute top-full left-0 mt-1 z-[101] min-w-[200px] rounded-md border border-border bg-popover shadow-md py-1">
+            {providerIds.map((pid) => (
+              <button
+                key={pid}
+                onClick={() => {
+                  onAdd(pid);
+                  setIsOpen(false);
+                }}
+                className="w-full flex items-center gap-2.5 px-3 py-2 text-sm hover:bg-accent transition-colors text-left"
+              >
+                <ProviderIconBadge providerId={pid} size="sm" />
+                {PROVIDER_PRESETS[pid].name}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};

components/settings/tabs/ai/ClaudeCodeCard.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { RefreshCw } from "lucide-react";
+import { useI18n } from "../../../../application/i18n/I18nProvider";
+import { Button } from "../../../ui/button";
+import { cn } from "../../../../lib/utils";
+import type { AgentPathInfo } from "./types";
+import { ProviderIconBadge } from "./ProviderIconBadge";
+
+export const ClaudeCodeCard: React.FC<{
+  pathInfo: AgentPathInfo | null;
+  isResolvingPath: boolean;
+  customPath: string;
+  onCustomPathChange: (path: string) => void;
+  onRecheckPath: () => void;
+}> = ({
+  pathInfo,
+  isResolvingPath,
+  customPath,
+  onCustomPathChange,
+  onRecheckPath,
+}) => {
+  const { t } = useI18n();
+  const found = pathInfo?.available;
+
+  const statusText = isResolvingPath
+    ? t('ai.claude.detecting')
+    : found
+      ? t('ai.claude.detected')
+      : t('ai.claude.notFound');
+
+  const statusClassName = isResolvingPath
+    ? "text-muted-foreground"
+    : found
+      ? "text-emerald-500"
+      : "text-amber-500";
+
+  return (
+    <div className="rounded-lg border border-border/60 bg-muted/20 p-4 space-y-3">
+      <div className="flex items-start justify-between gap-4">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <ProviderIconBadge providerId="claude" size="sm" />
+            <span className="text-sm font-medium">{t('ai.claude.title')}</span>
+          </div>
+          <p className="text-xs text-muted-foreground mt-2 leading-5">
+            {t('ai.claude.description')}
+          </p>
+        </div>
+        <div className={cn("text-xs font-medium shrink-0", statusClassName)}>
+          {statusText}
+        </div>
+      </div>
+
+      {/* Path detection info */}
+      {found ? (
+        <div className="flex items-center gap-2 text-xs">
+          <span className="text-muted-foreground">{t('ai.claude.path')}</span>
+          <span className="font-mono text-foreground truncate">{pathInfo.path}</span>
+          {pathInfo.version && (
+            <>
+              <span className="text-muted-foreground">|</span>
+              <span className="text-muted-foreground">{pathInfo.version}</span>
+            </>
+          )}
+        </div>
+      ) : !isResolvingPath ? (
+        <div className="space-y-2">
+          <p className="text-xs text-amber-500">
+            {t('ai.claude.notFoundHint')}
+          </p>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={customPath}
+              onChange={(e) => onCustomPathChange(e.target.value)}
+              placeholder={t('ai.claude.customPathPlaceholder')}
+              className="flex-1 h-8 rounded-md border border-input bg-background px-3 text-sm font-mono placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+            <Button variant="outline" size="sm" onClick={onRecheckPath} disabled={!customPath.trim()}>
+              <RefreshCw size={14} className="mr-1.5" />
+              {t('ai.claude.check')}
+            </Button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};

components/settings/tabs/ai/CodexConnectionCard.tsx

@@ -0,0 +1,181 @@
+import React from "react";
+import { ExternalLink, LogIn, LogOut, RefreshCw, X } from "lucide-react";
+import { useI18n } from "../../../../application/i18n/I18nProvider";
+import { Button } from "../../../ui/button";
+import { cn } from "../../../../lib/utils";
+import type { AgentPathInfo, CodexIntegrationStatus, CodexLoginSession } from "./types";
+import { ProviderIconBadge } from "./ProviderIconBadge";
+
+export const CodexConnectionCard: React.FC<{
+  pathInfo: AgentPathInfo | null;
+  isResolvingPath: boolean;
+  customPath: string;
+  onCustomPathChange: (path: string) => void;
+  onRecheckPath: () => void;
+  integration: CodexIntegrationStatus | null;
+  loginSession: CodexLoginSession | null;
+  isLoading: boolean;
+  hasOpenAiProviderKey: boolean;
+  error: string | null;
+  onRefresh: () => void;
+  onConnect: () => void;
+  onCancel: () => void;
+  onOpenUrl: () => void;
+  onLogout: () => void;
+}> = ({
+  pathInfo,
+  isResolvingPath,
+  customPath,
+  onCustomPathChange,
+  onRecheckPath,
+  integration,
+  loginSession,
+  isLoading,
+  hasOpenAiProviderKey,
+  error,
+  onRefresh,
+  onConnect,
+  onCancel,
+  onOpenUrl,
+  onLogout,
+}) => {
+  const { t } = useI18n();
+  const found = pathInfo?.available;
+
+  const status = isResolvingPath
+    ? t('ai.codex.detecting')
+    : !found
+      ? t('ai.codex.notFound')
+      : loginSession?.state === "running"
+        ? t('ai.codex.awaitingLogin')
+        : integration?.state === "connected_chatgpt"
+          ? t('ai.codex.connectedChatGPT')
+          : integration?.state === "connected_api_key"
+            ? t('ai.codex.connectedApiKey')
+            : integration?.state === "not_logged_in"
+              ? t('ai.codex.notConnected')
+              : t('ai.codex.statusUnknown');
+
+  const statusClassName = isResolvingPath
+    ? "text-muted-foreground"
+    : !found
+      ? "text-amber-500"
+      : loginSession?.state === "running"
+        ? "text-amber-500"
+        : integration?.isConnected
+          ? "text-emerald-500"
+          : "text-muted-foreground";
+
+  const outputText = loginSession?.error
+    ? loginSession.error
+    : loginSession?.output?.trim()
+      ? loginSession.output.trim()
+      : integration?.rawOutput?.trim()
+        ? integration.rawOutput.trim()
+        : "";
+
+  return (
+    <div className="rounded-lg border border-border/60 bg-muted/20 p-4 space-y-3">
+      <div className="flex items-start justify-between gap-4">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <ProviderIconBadge providerId="openai" size="sm" />
+            <span className="text-sm font-medium">{t('ai.codex.title')}</span>
+          </div>
+          <p className="text-xs text-muted-foreground mt-2 leading-5">
+            {t('ai.codex.description')}
+          </p>
+        </div>
+        <div className={cn("text-xs font-medium shrink-0", statusClassName)}>
+          {status}
+        </div>
+      </div>
+
+      {/* Path detection info */}
+      {found ? (
+        <div className="flex items-center gap-2 text-xs">
+          <span className="text-muted-foreground">{t('ai.codex.path')}</span>
+          <span className="font-mono text-foreground truncate">{pathInfo.path}</span>
+          {pathInfo.version && (
+            <>
+              <span className="text-muted-foreground">|</span>
+              <span className="text-muted-foreground">{pathInfo.version}</span>
+            </>
+          )}
+        </div>
+      ) : !isResolvingPath ? (
+        <div className="space-y-2">
+          <p className="text-xs text-amber-500">
+            {t('ai.codex.notFoundHint')}
+          </p>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={customPath}
+              onChange={(e) => onCustomPathChange(e.target.value)}
+              placeholder={t('ai.codex.customPathPlaceholder')}
+              className="flex-1 h-8 rounded-md border border-input bg-background px-3 text-sm font-mono placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+            <Button variant="outline" size="sm" onClick={onRecheckPath} disabled={!customPath.trim()}>
+              <RefreshCw size={14} className="mr-1.5" />
+              {t('ai.codex.check')}
+            </Button>
+          </div>
+        </div>
+      ) : null}
+
+      {/* Connection & login UI -- only when codex is detected */}
+      {found && (
+        <>
+          <div className="border-t border-border/40 pt-3 flex items-center gap-2 flex-wrap">
+            {loginSession?.state === "running" ? (
+              <>
+                <Button variant="default" size="sm" onClick={onOpenUrl} disabled={!loginSession.url}>
+                  <ExternalLink size={14} className="mr-1.5" />
+                  {t('ai.codex.openLogin')}
+                </Button>
+                <Button variant="outline" size="sm" onClick={onCancel}>
+                  <X size={14} className="mr-1.5" />
+                  {t('common.cancel')}
+                </Button>
+              </>
+            ) : integration?.isConnected ? (
+              <Button variant="outline" size="sm" onClick={onLogout}>
+                <LogOut size={14} className="mr-1.5" />
+                {t('ai.codex.logout')}
+              </Button>
+            ) : (
+              <Button variant="default" size="sm" onClick={onConnect}>
+                <LogIn size={14} className="mr-1.5" />
+                {t('ai.codex.connectChatGPT')}
+              </Button>
+            )}
+
+            <Button variant="outline" size="sm" onClick={onRefresh} disabled={isLoading}>
+              <RefreshCw size={14} className={cn("mr-1.5", isLoading && "animate-spin")} />
+              {t('ai.codex.refreshStatus')}
+            </Button>
+          </div>
+
+          {hasOpenAiProviderKey && (
+            <p className="text-xs text-emerald-500">
+              {t('ai.codex.apiKeyHint')}
+            </p>
+          )}
+        </>
+      )}
+
+      {error && (
+        <p className="text-xs text-destructive">
+          {error}
+        </p>
+      )}
+
+      {found && outputText && (
+        <pre className="rounded-md border border-border/60 bg-background px-3 py-2 text-[11px] leading-5 text-muted-foreground whitespace-pre-wrap max-h-40 overflow-auto">
+          {outputText}
+        </pre>
+      )}
+    </div>
+  );
+};

components/settings/tabs/ai/ModelSelector.tsx

@@ -0,0 +1,180 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Check, ChevronDown, RefreshCw } from "lucide-react";
+import type { AIProviderId } from "../../../../infrastructure/ai/types";
+import { useI18n } from "../../../../application/i18n/I18nProvider";
+import { Button } from "../../../ui/button";
+import { cn } from "../../../../lib/utils";
+import type { FetchedModel } from "./types";
+import { getFetchBridge } from "./types";
+
+export const ModelSelector: React.FC<{
+  value: string;
+  onChange: (value: string) => void;
+  baseURL: string;
+  modelsEndpoint?: string;
+  placeholder?: string;
+  apiKey?: string;
+  providerId?: AIProviderId;
+  skipTLSVerify?: boolean;
+}> = ({ value, onChange, baseURL, modelsEndpoint, placeholder, apiKey, providerId, skipTLSVerify }) => {
+  const { t } = useI18n();
+  const [models, setModels] = useState<FetchedModel[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [hasFetched, setHasFetched] = useState(false);
+
+  // Ollama runs locally without auth; all other providers need an API key to list models
+  const needsApiKey = providerId !== "ollama";
+  const canFetch = !!modelsEndpoint && (!needsApiKey || !!apiKey);
+
+  const fetchModels = useCallback(async () => {
+    if (!modelsEndpoint) return;
+    const bridge = getFetchBridge();
+    if (!bridge?.aiFetch) return;
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      // Temporarily allow the provider's host in the backend fetch allowlist
+      // so model listing works for URLs not yet synced from the main window.
+      if (bridge.aiAllowlistAddHost && baseURL) {
+        await bridge.aiAllowlistAddHost(baseURL);
+      }
+      const url = `${baseURL.replace(/\/+$/, "")}${modelsEndpoint}`;
+      const headers: Record<string, string> = {};
+      if (apiKey) {
+        if (providerId === "anthropic") {
+          headers["x-api-key"] = apiKey;
+          headers["anthropic-version"] = "2023-06-01";
+        } else {
+          headers["Authorization"] = `Bearer ${apiKey}`;
+        }
+      }
+      const result = await bridge.aiFetch(url, "GET", headers, undefined, undefined, undefined, undefined, skipTLSVerify);
+      if (!result.ok) {
+        setError(`Failed to fetch models (${result.error || "unknown error"})`);
+        return;
+      }
+      const parsed = JSON.parse(result.data);
+      const list: FetchedModel[] = (parsed.data || parsed.models || []).map((m: { id: string; name?: string }) => ({
+        id: m.id,
+        name: m.name,
+      }));
+      list.sort((a, b) => (a.name || a.id).localeCompare(b.name || b.id));
+      setModels(list);
+      setHasFetched(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to parse response");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [baseURL, modelsEndpoint, apiKey, providerId, skipTLSVerify]);
+
+  // Auto-fetch when dropdown first opens
+  useEffect(() => {
+    if (isOpen && canFetch && !hasFetched && !isLoading) {
+      void fetchModels();
+    }
+  }, [isOpen, canFetch, hasFetched, isLoading, fetchModels]);
+
+  // Filter models by current input value (inline autocomplete)
+  const suggestions = useMemo(() => {
+    if (!hasFetched || models.length === 0) return [];
+    if (!value.trim()) return models;
+    const q = value.toLowerCase();
+    return models.filter((m) =>
+      m.id.toLowerCase().includes(q) || (m.name && m.name.toLowerCase().includes(q)),
+    );
+  }, [models, value, hasFetched]);
+
+  const showSuggestions = isOpen && canFetch;
+
+  return (
+    <div className="relative">
+      <div className="flex items-center gap-2">
+        <div className="relative flex-1">
+          <input
+            type="text"
+            value={value}
+            onChange={(e) => {
+              onChange(e.target.value);
+              if (canFetch && hasFetched && !isOpen) setIsOpen(true);
+            }}
+            onFocus={() => { if (canFetch) setIsOpen(true); }}
+            onBlur={() => { setIsOpen(false); }}
+            placeholder={placeholder ?? (canFetch ? t('ai.providers.searchModel') : t('ai.providers.defaultModel.placeholder'))}
+            className={cn(
+              "w-full h-8 rounded-md border border-input bg-background px-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              canFetch && "pr-8",
+            )}
+          />
+          {canFetch && (
+            <button
+              type="button"
+              onMouseDown={(e) => { e.preventDefault(); setIsOpen(!isOpen); }}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <ChevronDown size={14} className={cn("transition-transform", isOpen && "rotate-180")} />
+            </button>
+          )}
+        </div>
+        {canFetch && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => { setHasFetched(false); void fetchModels(); }}
+            disabled={isLoading}
+            className="shrink-0 px-2"
+            title={t('ai.providers.refreshModels')}
+          >
+            <RefreshCw size={14} className={isLoading ? "animate-spin" : ""} />
+          </Button>
+        )}
+      </div>
+
+      {/* Suggestions dropdown */}
+      {showSuggestions && (
+        <div className="absolute top-full left-0 right-0 mt-1 z-[101] rounded-md border border-border bg-popover shadow-md">
+          <div className="max-h-60 overflow-y-auto">
+            {isLoading ? (
+              <div className="px-3 py-3 text-center text-xs text-muted-foreground">
+                <RefreshCw size={14} className="animate-spin inline mr-1.5" />
+                {t('ai.providers.loadingModels')}
+              </div>
+            ) : error ? (
+              <div className="px-3 py-3 text-center text-xs text-destructive">{error}</div>
+            ) : suggestions.length === 0 ? (
+              <div className="px-3 py-3 text-center text-xs text-muted-foreground">
+                {hasFetched ? t('ai.providers.noMatchingModels') : t('ai.providers.clickToLoadModels')}
+              </div>
+            ) : (
+              suggestions.slice(0, 100).map((m) => (
+                <button
+                  key={m.id}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    onChange(m.id);
+                    setIsOpen(false);
+                  }}
+                  className={cn(
+                    "w-full text-left px-3 py-1.5 text-xs hover:bg-accent transition-colors flex items-center justify-between gap-2",
+                    m.id === value && "bg-accent",
+                  )}
+                >
+                  <span className="font-mono truncate">{m.id}</span>
+                  {m.id === value && <Check size={12} className="text-primary shrink-0" />}
+                </button>
+              ))
+            )}
+            {suggestions.length > 100 && (
+              <div className="px-3 py-2 text-center text-[10px] text-muted-foreground border-t border-border/40">
+                {t('ai.providers.showingModels').replace('{count}', String(suggestions.length))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

components/settings/tabs/ai/ProviderCard.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { Pencil, Trash2 } from "lucide-react";
+import type { ProviderConfig } from "../../../../infrastructure/ai/types";
+import { useI18n } from "../../../../application/i18n/I18nProvider";
+import { Toggle } from "../../settings-ui";
+import { cn } from "../../../../lib/utils";
+import { ProviderIconBadge } from "./ProviderIconBadge";
+import { ProviderConfigForm } from "./ProviderConfigForm";
+
+export const ProviderCard: React.FC<{
+  provider: ProviderConfig;
+  isActive: boolean;
+  onToggleEnabled: (enabled: boolean) => void;
+  onEdit: () => void;
+  onRemove: () => void;
+  onUpdate: (updates: Partial<ProviderConfig>) => void;
+  isEditing: boolean;
+  onCancelEdit: () => void;
+}> = ({ provider, isActive, onToggleEnabled, onEdit, onRemove, onUpdate, isEditing, onCancelEdit }) => {
+  const { t } = useI18n();
+  const hasApiKey = !!provider.apiKey;
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg border p-4 transition-colors",
+        isActive ? "border-primary/50 bg-primary/5" : "border-border/60 bg-muted/20",
+      )}
+    >
+      <div className="flex items-center gap-3">
+        {/* Provider icon */}
+        <ProviderIconBadge providerId={provider.providerId} />
+
+        {/* Info */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium truncate">{provider.name}</span>
+            {isActive && (
+              <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-primary/20 text-primary font-medium">
+                {t('ai.providers.active')}
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-2 mt-0.5">
+            <span
+              className={cn(
+                "text-xs",
+                hasApiKey ? "text-emerald-500" : "text-muted-foreground",
+              )}
+            >
+              {hasApiKey ? t('ai.providers.apiKeyConfigured') : t('ai.providers.noApiKey')}
+            </span>
+            {provider.defaultModel && (
+              <>
+                <span className="text-muted-foreground text-xs">|</span>
+                <span className="text-xs text-muted-foreground truncate">{provider.defaultModel}</span>
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-1 shrink-0">
+          <button
+            onClick={onEdit}
+            className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+            title={t('ai.providers.configure')}
+          >
+            <Pencil size={14} />
+          </button>
+          <button
+            onClick={onRemove}
+            className="p-1.5 rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
+            title={t('ai.providers.remove')}
+          >
+            <Trash2 size={14} />
+          </button>
+          <Toggle checked={provider.enabled} onChange={onToggleEnabled} />
+        </div>
+      </div>
+
+      {/* Expandable config form */}
+      {isEditing && (
+        <ProviderConfigForm
+          provider={provider}
+          onSave={(updates) => {
+            onUpdate(updates);
+            onCancelEdit();
+          }}
+          onCancel={onCancelEdit}
+        />
+      )}
+    </div>
+  );
+};

components/settings/tabs/ai/ProviderConfigForm.tsx

@@ -0,0 +1,152 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Check, Eye, EyeOff } from "lucide-react";
+import type { ProviderConfig } from "../../../../infrastructure/ai/types";
+import { PROVIDER_PRESETS } from "../../../../infrastructure/ai/types";
+import { encryptField, decryptField } from "../../../../infrastructure/persistence/secureFieldAdapter";
+import { useI18n } from "../../../../application/i18n/I18nProvider";
+import { Button } from "../../../ui/button";
+import type { ProviderFormState } from "./types";
+import { ModelSelector } from "./ModelSelector";
+
+export const ProviderConfigForm: React.FC<{
+  provider: ProviderConfig;
+  onSave: (updates: Partial<ProviderConfig>) => void;
+  onCancel: () => void;
+}> = ({ provider, onSave, onCancel }) => {
+  const { t } = useI18n();
+  const [form, setForm] = useState<ProviderFormState>({
+    name: provider.name ?? PROVIDER_PRESETS[provider.providerId]?.name ?? "",
+    apiKey: "",
+    baseURL: provider.baseURL ?? PROVIDER_PRESETS[provider.providerId]?.defaultBaseURL ?? "",
+    defaultModel: provider.defaultModel ?? "",
+    skipTLSVerify: provider.skipTLSVerify ?? false,
+  });
+  const isCustom = provider.providerId === "custom";
+  const [showApiKey, setShowApiKey] = useState(false);
+  const [isDecrypting, setIsDecrypting] = useState(false);
+
+  const preset = PROVIDER_PRESETS[provider.providerId];
+
+  // Decrypt and load existing API key on mount
+  useEffect(() => {
+    if (provider.apiKey) {
+      setIsDecrypting(true);
+      decryptField(provider.apiKey)
+        .then((decrypted) => {
+          setForm((prev) => ({ ...prev, apiKey: decrypted ?? "" }));
+        })
+        .catch(() => {
+          // If decryption fails, show raw value
+          setForm((prev) => ({ ...prev, apiKey: provider.apiKey ?? "" }));
+        })
+        .finally(() => setIsDecrypting(false));
+    }
+  }, [provider.apiKey]);
+
+  const handleSave = useCallback(async () => {
+    const updates: Partial<ProviderConfig> = {
+      baseURL: form.baseURL || undefined,
+      defaultModel: form.defaultModel || undefined,
+      skipTLSVerify: form.skipTLSVerify || undefined,
+      ...(isCustom && form.name.trim() ? { name: form.name.trim() } : {}),
+    };
+
+    // Encrypt API key before saving
+    if (form.apiKey) {
+      updates.apiKey = await encryptField(form.apiKey);
+    } else {
+      updates.apiKey = undefined;
+    }
+
+    onSave(updates);
+  }, [form, onSave, isCustom]);
+
+  return (
+    <div className="mt-3 space-y-3 border-t border-border/40 pt-3">
+      {/* Name (custom providers only) */}
+      {isCustom && (
+        <div className="space-y-1.5">
+          <label className="text-xs font-medium text-muted-foreground">{t('ai.providers.name')}</label>
+          <input
+            type="text"
+            value={form.name}
+            onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
+            placeholder={t('ai.providers.name.placeholder')}
+            className="w-full h-8 rounded-md border border-input bg-background px-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          />
+        </div>
+      )}
+      {/* API Key */}
+      <div className="space-y-1.5">
+        <label className="text-xs font-medium text-muted-foreground">{t('ai.providers.apiKey')}</label>
+        <div className="flex items-center gap-2">
+          <div className="relative flex-1">
+            <input
+              type={showApiKey ? "text" : "password"}
+              value={isDecrypting ? "" : form.apiKey}
+              onChange={(e) => setForm((prev) => ({ ...prev, apiKey: e.target.value }))}
+              placeholder={isDecrypting ? t('ai.providers.apiKey.decrypting') : t('ai.providers.apiKey.placeholder')}
+              disabled={isDecrypting}
+              className="w-full h-8 rounded-md border border-input bg-background px-3 pr-9 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
+            />
+            <button
+              type="button"
+              onClick={() => setShowApiKey(!showApiKey)}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              {showApiKey ? <EyeOff size={14} /> : <Eye size={14} />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Base URL */}
+      <div className="space-y-1.5">
+        <label className="text-xs font-medium text-muted-foreground">{t('ai.providers.baseUrl')}</label>
+        <input
+          type="text"
+          value={form.baseURL}
+          onChange={(e) => setForm((prev) => ({ ...prev, baseURL: e.target.value }))}
+          placeholder={preset?.defaultBaseURL || "https://"}
+          className="w-full h-8 rounded-md border border-input bg-background px-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        />
+      </div>
+
+      {/* Default Model */}
+      <div className="space-y-1.5">
+        <label className="text-xs font-medium text-muted-foreground">{t('ai.providers.defaultModel')}</label>
+        <ModelSelector
+          value={form.defaultModel}
+          onChange={(val) => setForm((prev) => ({ ...prev, defaultModel: val }))}
+          baseURL={form.baseURL || preset?.defaultBaseURL || ""}
+          modelsEndpoint={preset?.modelsEndpoint}
+          apiKey={form.apiKey}
+          providerId={provider.providerId}
+          skipTLSVerify={form.skipTLSVerify}
+        />
+      </div>
+
+      {/* Skip TLS Verification */}
+      <label className="flex items-center gap-2 cursor-pointer">
+        <input
+          type="checkbox"
+          checked={form.skipTLSVerify}
+          onChange={(e) => setForm((prev) => ({ ...prev, skipTLSVerify: e.target.checked }))}
+          className="rounded border-input"
+        />
+        <span className="text-xs text-muted-foreground">{t('ai.providers.skipTLSVerify')}</span>
+      </label>
+
+      {/* Actions */}
+      <div className="flex items-center gap-2 pt-1">
+        <Button variant="default" size="sm" onClick={() => void handleSave()}>
+          <Check size={14} className="mr-1.5" />
+          {t('common.save')}
+        </Button>
+        <Button variant="ghost" size="sm" onClick={onCancel}>
+          {t('common.cancel')}
+        </Button>
+      </div>
+    </div>
+  );
+};

components/settings/tabs/ai/ProviderIconBadge.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { cn } from "../../../../lib/utils";
+import type { SettingsIconId } from "./types";
+import { SETTINGS_ICON_PATHS, SETTINGS_ICON_COLORS } from "./types";
+
+export const ProviderIconBadge: React.FC<{
+  providerId: SettingsIconId;
+  size?: "sm" | "md";
+}> = ({ providerId, size = "md" }) => (
+  <div
+    className={cn(
+      "rounded-md flex items-center justify-center shrink-0 overflow-hidden",
+      size === "sm" ? "w-5 h-5" : "w-8 h-8",
+      SETTINGS_ICON_COLORS[providerId],
+    )}
+  >
+    <img
+      src={SETTINGS_ICON_PATHS[providerId]}
+      alt=""
+      aria-hidden="true"
+      draggable={false}
+      className={cn(
+        "object-contain brightness-0 invert",
+        size === "sm" ? "w-3 h-3" : "w-4 h-4",
+      )}
+    />
+  </div>
+);

components/settings/tabs/ai/SafetySettings.tsx

@@ -0,0 +1,204 @@
+import React, { useCallback, useState } from "react";
+import { Plus, Shield, X } from "lucide-react";
+import type { AIPermissionMode } from "../../../../infrastructure/ai/types";
+import { DEFAULT_COMMAND_BLOCKLIST } from "../../../../infrastructure/ai/types";
+import { useI18n } from "../../../../application/i18n/I18nProvider";
+import { Button } from "../../../ui/button";
+import { Select, SettingRow } from "../../settings-ui";
+
+export const SafetySettings: React.FC<{
+  globalPermissionMode: AIPermissionMode;
+  setGlobalPermissionMode: (mode: AIPermissionMode) => void;
+  commandBlocklist: string[];
+  setCommandBlocklist: (value: string[]) => void;
+  commandTimeout: number;
+  setCommandTimeout: (value: number) => void;
+  maxIterations: number;
+  setMaxIterations: (value: number) => void;
+}> = ({
+  globalPermissionMode,
+  setGlobalPermissionMode,
+  commandBlocklist,
+  setCommandBlocklist,
+  commandTimeout,
+  setCommandTimeout,
+  maxIterations,
+  setMaxIterations,
+}) => {
+  const { t } = useI18n();
+  const [regexErrors, setRegexErrors] = useState<Record<number, string>>({});
+
+  const validatePattern = useCallback((pattern: string, idx: number): boolean => {
+    if (!pattern) {
+      setRegexErrors((prev) => {
+        const next = { ...prev };
+        delete next[idx];
+        return next;
+      });
+      return true;
+    }
+    try {
+      new RegExp(pattern);
+      setRegexErrors((prev) => {
+        const next = { ...prev };
+        delete next[idx];
+        return next;
+      });
+      return true;
+    } catch (e) {
+      setRegexErrors((prev) => ({
+        ...prev,
+        [idx]: e instanceof Error ? e.message : String(e),
+      }));
+      return false;
+    }
+  }, []);
+
+  const handlePatternChange = useCallback((value: string, idx: number) => {
+    const next = [...commandBlocklist];
+    next[idx] = value;
+    validatePattern(value, idx);
+    setCommandBlocklist(next);
+  }, [commandBlocklist, setCommandBlocklist, validatePattern]);
+
+  const permissionModeOptions = [
+    { value: "observer", label: t('ai.safety.permissionMode.observer') },
+    { value: "confirm", label: t('ai.safety.permissionMode.confirm') },
+    { value: "autonomous", label: t('ai.safety.permissionMode.autonomous') },
+  ];
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <Shield size={18} className="text-muted-foreground" />
+        <h3 className="text-base font-medium">{t('ai.safety.title')}</h3>
+      </div>
+
+      <div className="bg-muted/30 rounded-lg p-4 space-y-1">
+        <SettingRow
+          label={t('ai.safety.permissionMode')}
+          description={t('ai.safety.permissionMode.description')}
+        >
+          <Select
+            value={globalPermissionMode}
+            options={permissionModeOptions}
+            onChange={(val) => setGlobalPermissionMode(val as AIPermissionMode)}
+            className="w-64"
+          />
+        </SettingRow>
+
+        <SettingRow
+          label={t('ai.safety.commandTimeout')}
+          description={t('ai.safety.commandTimeout.description')}
+        >
+          <div className="flex items-center gap-2">
+            <input
+              type="number"
+              value={commandTimeout}
+              onChange={(e) => {
+                const val = parseInt(e.target.value, 10);
+                if (!isNaN(val) && val > 0) setCommandTimeout(val);
+              }}
+              min={1}
+              max={3600}
+              className="w-20 h-9 rounded-md border border-input bg-background px-3 text-sm text-right focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+            <span className="text-xs text-muted-foreground">{t('ai.safety.commandTimeout.unit')}</span>
+          </div>
+        </SettingRow>
+
+        <SettingRow
+          label={t('ai.safety.maxIterations')}
+          description={t('ai.safety.maxIterations.description')}
+        >
+          <input
+            type="number"
+            value={maxIterations}
+            onChange={(e) => {
+              const val = parseInt(e.target.value, 10);
+              if (!isNaN(val) && val > 0) setMaxIterations(val);
+            }}
+            min={1}
+            max={100}
+            className="w-20 h-9 rounded-md border border-input bg-background px-3 text-sm text-right focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          />
+        </SettingRow>
+      </div>
+
+      {/* Command Blocklist */}
+      <div className="bg-muted/30 rounded-lg p-4 space-y-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm font-medium">{t('ai.safety.blocklist')}</p>
+            <p className="text-xs text-muted-foreground">
+              {t('ai.safety.blocklist.description')}
+            </p>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-xs"
+            onClick={() => { setCommandBlocklist([...DEFAULT_COMMAND_BLOCKLIST]); setRegexErrors({}); }}
+          >
+            {t('ai.safety.blocklist.reset')}
+          </Button>
+        </div>
+
+        <div className="space-y-1.5">
+          {commandBlocklist.map((pattern, idx) => (
+            <div key={idx} className="space-y-0.5">
+              <div className="flex items-center gap-2">
+                <input
+                  type="text"
+                  value={pattern}
+                  onChange={(e) => handlePatternChange(e.target.value, idx)}
+                  className={`flex-1 h-8 rounded-md border bg-background px-3 text-xs font-mono focus-visible:outline-none focus-visible:ring-1 ${
+                    regexErrors[idx]
+                      ? 'border-destructive focus-visible:ring-destructive'
+                      : 'border-input focus-visible:ring-ring'
+                  }`}
+                  placeholder={t('ai.safety.blocklist.placeholder')}
+                />
+                <button
+                  onClick={() => {
+                    const next = commandBlocklist.filter((_, i) => i !== idx);
+                    setCommandBlocklist(next);
+                    setRegexErrors((prev) => {
+                      const updated: Record<number, string> = {};
+                      for (const [k, v] of Object.entries(prev)) {
+                        const ki = Number(k);
+                        if (ki < idx) updated[ki] = v as string;
+                        else if (ki > idx) updated[ki - 1] = v as string;
+                      }
+                      return updated;
+                    });
+                  }}
+                  className="p-1 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors"
+                >
+                  <X size={14} />
+                </button>
+              </div>
+              {regexErrors[idx] && (
+                <p className="text-[11px] text-destructive pl-1">{regexErrors[idx]}</p>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <Button
+          variant="outline"
+          size="sm"
+          className="text-xs"
+          onClick={() => setCommandBlocklist([...commandBlocklist, ''])}
+        >
+          <Plus size={14} className="mr-1" />
+          {t('ai.safety.blocklist.add')}
+        </Button>
+      </div>
+
+      <p className="text-xs text-muted-foreground">
+        {t('ai.safety.note')}
+      </p>
+    </div>
+  );
+};

components/settings/tabs/ai/WebSearchSettings.tsx

@@ -0,0 +1,220 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Globe, Eye, EyeOff } from "lucide-react";
+import type { WebSearchConfig, WebSearchProviderId } from "../../../../infrastructure/ai/types";
+import { WEB_SEARCH_PROVIDER_PRESETS } from "../../../../infrastructure/ai/types";
+import { encryptField, decryptField } from "../../../../infrastructure/persistence/secureFieldAdapter";
+import { useI18n } from "../../../../application/i18n/I18nProvider";
+import { Select, SettingRow } from "../../settings-ui";
+
+const SEARCH_ICON_PATHS: Record<WebSearchProviderId, string> = {
+  tavily: "/ai/search/tavily.svg",
+  exa: "/ai/search/exa.png",
+  bocha: "/ai/search/bocha.webp",
+  zhipu: "/ai/search/zhipu.png",
+  searxng: "/ai/search/searxng.svg",
+};
+
+const SearchProviderIcon: React.FC<{ providerId: WebSearchProviderId }> = ({ providerId }) => (
+  <img
+    src={SEARCH_ICON_PATHS[providerId]}
+    alt=""
+    className="w-4 h-4 shrink-0"
+  />
+);
+
+const PROVIDER_OPTIONS: Array<{ value: WebSearchProviderId; label: string; icon: React.ReactNode }> = Object.entries(
+  WEB_SEARCH_PROVIDER_PRESETS,
+).map(([id, preset]) => ({
+  value: id as WebSearchProviderId,
+  label: preset.name,
+  icon: <SearchProviderIcon providerId={id as WebSearchProviderId} />,
+}));
+
+export const WebSearchSettings: React.FC<{
+  webSearchConfig: WebSearchConfig | null;
+  setWebSearchConfig: (config: WebSearchConfig | null) => void;
+}> = ({ webSearchConfig, setWebSearchConfig }) => {
+  const { t } = useI18n();
+  const [apiKeyInput, setApiKeyInput] = useState("");
+  const [showApiKey, setShowApiKey] = useState(false);
+  const [isDecrypting, setIsDecrypting] = useState(false);
+
+  const config = useMemo(() => webSearchConfig ?? {
+    providerId: "tavily" as WebSearchProviderId,
+    enabled: false,
+    maxResults: 5,
+  }, [webSearchConfig]);
+
+  // Ref to always read the latest config in async callbacks (avoids stale closure)
+  const configRef = useRef(config);
+  configRef.current = config;
+
+  const preset = WEB_SEARCH_PROVIDER_PRESETS[config.providerId];
+
+  // Decrypt API key on mount or when provider changes (with cancellation guard)
+  const decryptSeqRef = useRef(0);
+  useEffect(() => {
+    if (config.apiKey) {
+      const seq = ++decryptSeqRef.current;
+      setIsDecrypting(true);
+      decryptField(config.apiKey)
+        .then((decrypted) => {
+          if (decryptSeqRef.current === seq) setApiKeyInput(decrypted ?? "");
+        })
+        .catch(() => {
+          if (decryptSeqRef.current === seq) setApiKeyInput(config.apiKey ?? "");
+        })
+        .finally(() => {
+          if (decryptSeqRef.current === seq) setIsDecrypting(false);
+        });
+    } else {
+      decryptSeqRef.current++;
+      setApiKeyInput("");
+      setIsDecrypting(false);
+    }
+  }, [config.apiKey, config.providerId]);
+
+  const updateConfig = useCallback(
+    (updates: Partial<WebSearchConfig>) => {
+      setWebSearchConfig({ ...configRef.current, ...updates });
+    },
+    [setWebSearchConfig],
+  );
+
+  const handleProviderChange = useCallback(
+    (val: string) => {
+      const providerId = val as WebSearchProviderId;
+      const newPreset = WEB_SEARCH_PROVIDER_PRESETS[providerId];
+      setWebSearchConfig({
+        ...configRef.current,
+        providerId,
+        apiKey: undefined,
+        apiHost: newPreset.defaultApiHost || undefined,
+      });
+      setApiKeyInput("");
+    },
+    [setWebSearchConfig],
+  );
+
+  // Sequence counter for blur saves — prevents out-of-order encryption results
+  const blurSeqRef = useRef(0);
+  const handleApiKeyBlur = useCallback(async () => {
+    if (!apiKeyInput.trim()) {
+      blurSeqRef.current++;
+      updateConfig({ apiKey: undefined });
+      return;
+    }
+    const seq = ++blurSeqRef.current;
+    const providerAtBlur = configRef.current.providerId;
+    const encrypted = await encryptField(apiKeyInput.trim());
+    // Only apply if this is still the latest blur and provider hasn't changed
+    if (blurSeqRef.current === seq && configRef.current.providerId === providerAtBlur) {
+      updateConfig({ apiKey: encrypted });
+    }
+  }, [apiKeyInput, updateConfig]);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <Globe size={18} className="text-muted-foreground" />
+        <h3 className="text-base font-medium">{t("ai.webSearch.title")}</h3>
+      </div>
+
+      <div className="bg-muted/30 rounded-lg p-4 space-y-1">
+        {/* Enable/Disable */}
+        <SettingRow
+          label={t("ai.webSearch.enable")}
+          description={t("ai.webSearch.enable.description")}
+        >
+          <label className="relative inline-flex items-center cursor-pointer">
+            <input
+              type="checkbox"
+              checked={config.enabled}
+              onChange={(e) => updateConfig({ enabled: e.target.checked })}
+              className="sr-only peer"
+            />
+            <div className="w-9 h-5 bg-muted-foreground/20 peer-focus-visible:ring-2 peer-focus-visible:ring-ring rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary" />
+          </label>
+        </SettingRow>
+
+        {/* Provider */}
+        <SettingRow
+          label={t("ai.webSearch.provider")}
+          description={t("ai.webSearch.provider.description")}
+        >
+          <Select
+            value={config.providerId}
+            options={PROVIDER_OPTIONS}
+            onChange={handleProviderChange}
+            className="w-48"
+          />
+        </SettingRow>
+
+        {/* API Key (hidden for SearXNG) */}
+        {preset.requiresApiKey && (
+          <SettingRow
+            label={t("ai.webSearch.apiKey")}
+            description={t("ai.webSearch.apiKey.description")}
+          >
+            <div className="flex items-center gap-1.5">
+              <input
+                type={showApiKey ? "text" : "password"}
+                value={isDecrypting ? "" : apiKeyInput}
+                placeholder={isDecrypting ? t("ai.providers.apiKey.decrypting") : t("ai.webSearch.apiKey.placeholder")}
+                onChange={(e) => setApiKeyInput(e.target.value)}
+                onBlur={() => void handleApiKeyBlur()}
+                className="w-64 h-9 rounded-md border border-input bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                disabled={isDecrypting}
+              />
+              <button
+                type="button"
+                onClick={() => setShowApiKey(!showApiKey)}
+                className="p-1.5 rounded hover:bg-muted text-muted-foreground"
+              >
+                {showApiKey ? <EyeOff size={14} /> : <Eye size={14} />}
+              </button>
+            </div>
+          </SettingRow>
+        )}
+
+        {/* API Host */}
+        <SettingRow
+          label={t("ai.webSearch.apiHost")}
+          description={
+            config.providerId === "searxng"
+              ? t("ai.webSearch.apiHost.searxngDescription")
+              : t("ai.webSearch.apiHost.description")
+          }
+        >
+          <input
+            type="text"
+            value={config.apiHost ?? preset.defaultApiHost}
+            onChange={(e) => updateConfig({ apiHost: e.target.value || undefined })}
+            placeholder={preset.defaultApiHost || "https://..."}
+            className="w-64 h-9 rounded-md border border-input bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          />
+        </SettingRow>
+
+        {/* Max Results */}
+        <SettingRow
+          label={t("ai.webSearch.maxResults")}
+          description={t("ai.webSearch.maxResults.description")}
+        >
+          <input
+            type="number"
+            value={config.maxResults ?? 5}
+            onChange={(e) => {
+              const val = parseInt(e.target.value, 10);
+              if (!isNaN(val) && val >= 1 && val <= 20) {
+                updateConfig({ maxResults: val });
+              }
+            }}
+            min={1}
+            max={20}
+            className="w-20 h-9 rounded-md border border-input bg-background px-3 text-sm text-right focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          />
+        </SettingRow>
+      </div>
+    </div>
+  );
+};

components/settings/tabs/ai/index.ts

@@ -0,0 +1,8 @@
+export { ProviderIconBadge } from "./ProviderIconBadge";
+export { ModelSelector } from "./ModelSelector";
+export { ProviderConfigForm } from "./ProviderConfigForm";
+export { ProviderCard } from "./ProviderCard";
+export { AddProviderDropdown } from "./AddProviderDropdown";
+export { CodexConnectionCard } from "./CodexConnectionCard";
+export { ClaudeCodeCard } from "./ClaudeCodeCard";
+export { SafetySettings } from "./SafetySettings";

components/settings/tabs/ai/types.ts

@@ -0,0 +1,129 @@
+/**
+ * Shared types for AI settings sub-components
+ */
+import type {
+  AIProviderId,
+  ExternalAgentConfig,
+} from "../../../../infrastructure/ai/types";
+
+export type CodexIntegrationState =
+  | "connected_chatgpt"
+  | "connected_api_key"
+  | "not_logged_in"
+  | "unknown";
+
+export interface CodexIntegrationStatus {
+  state: CodexIntegrationState;
+  isConnected: boolean;
+  rawOutput: string;
+  exitCode: number | null;
+}
+
+export type CodexLoginState = "running" | "success" | "error" | "cancelled";
+
+export interface CodexLoginSession {
+  sessionId: string;
+  state: CodexLoginState;
+  url: string | null;
+  output: string;
+  error: string | null;
+  exitCode: number | null;
+}
+
+export interface AgentPathInfo {
+  path: string | null;
+  version: string | null;
+  available: boolean;
+}
+
+export interface ProviderFormState {
+  name: string;
+  apiKey: string;
+  baseURL: string;
+  defaultModel: string;
+  skipTLSVerify: boolean;
+}
+
+export interface FetchedModel {
+  id: string;
+  name?: string;
+}
+
+export interface FetchBridge {
+  aiFetch?: (url: string, method?: string, headers?: Record<string, string>, body?: string, providerId?: string, skipHostCheck?: boolean, followRedirects?: boolean, skipTLSVerify?: boolean) => Promise<{ ok: boolean; data: string; error?: string }>;
+  aiAllowlistAddHost?: (baseURL: string) => Promise<{ ok: boolean }>;
+}
+
+export interface NetcattyAiBridge {
+  aiCodexGetIntegration?: () => Promise<CodexIntegrationStatus>;
+  aiCodexStartLogin?: () => Promise<{ ok: boolean; session?: CodexLoginSession; error?: string }>;
+  aiCodexGetLoginSession?: (sessionId: string) => Promise<{ ok: boolean; session?: CodexLoginSession; error?: string }>;
+  aiCodexCancelLogin?: (sessionId: string) => Promise<{ ok: boolean; found?: boolean; session?: CodexLoginSession; error?: string }>;
+  aiCodexLogout?: () => Promise<{ ok: boolean; state?: CodexIntegrationState; isConnected?: boolean; rawOutput?: string; logoutOutput?: string; error?: string }>;
+  aiResolveCli?: (params: { command: string; customPath?: string }) => Promise<AgentPathInfo>;
+  openExternal?: (url: string) => Promise<void>;
+}
+
+// Agent default configs for registration in externalAgents
+export const AGENT_DEFAULTS: Record<string, Omit<ExternalAgentConfig, "id" | "command" | "enabled">> = {
+  codex: {
+    name: "Codex CLI",
+    args: ["exec", "--full-auto", "--json", "{prompt}"],
+    icon: "openai",
+    acpCommand: "codex-acp",
+    acpArgs: [],
+  },
+  claude: {
+    name: "Claude Code",
+    args: ["-p", "--output-format", "text", "{prompt}"],
+    icon: "claude",
+    acpCommand: "claude-agent-acp",
+    acpArgs: [],
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Bridge helpers
+// ---------------------------------------------------------------------------
+
+export function getBridge(): NetcattyAiBridge | undefined {
+  return (window as unknown as { netcatty?: NetcattyAiBridge }).netcatty;
+}
+
+export function getFetchBridge(): FetchBridge | undefined {
+  return (window as unknown as { netcatty?: FetchBridge }).netcatty;
+}
+
+export function normalizeCodexBridgeError(error: unknown): string {
+  const message = error instanceof Error ? error.message : String(error);
+  if (message.includes("No handler registered for 'netcatty:ai:codex:")) {
+    return "Codex main-process handlers are not loaded yet. Fully restart Netcatty, or restart the Electron dev process, then try again.";
+  }
+  return message;
+}
+
+// ---------------------------------------------------------------------------
+// Provider icon helper
+// ---------------------------------------------------------------------------
+
+export type SettingsIconId = AIProviderId | "claude";
+
+export const SETTINGS_ICON_PATHS: Record<SettingsIconId, string> = {
+  openai: "/ai/providers/openai.svg",
+  anthropic: "/ai/providers/anthropic.svg",
+  claude: "/ai/agents/claude.svg",
+  google: "/ai/providers/google.svg",
+  ollama: "/ai/providers/ollama.svg",
+  openrouter: "/ai/providers/openrouter.svg",
+  custom: "/ai/providers/custom.svg",
+};
+
+export const SETTINGS_ICON_COLORS: Record<SettingsIconId, string> = {
+  openai: "bg-emerald-600",
+  anthropic: "bg-orange-600",
+  claude: "bg-orange-600",
+  google: "bg-blue-600",
+  ollama: "bg-purple-600",
+  openrouter: "bg-pink-600",
+  custom: "bg-zinc-600",
+};

components/sftp-modal/SftpModalDialogs.tsx

@@ -1,186 +0,0 @@
-import React from "react";
-import { Loader2 } from "lucide-react";
-import { Button } from "../ui/button";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog";
-import { Input } from "../ui/input";
-import type { RemoteFile } from "../../types";
-
-interface PermissionsState {
-  owner: { read: boolean; write: boolean; execute: boolean };
-  group: { read: boolean; write: boolean; execute: boolean };
-  others: { read: boolean; write: boolean; execute: boolean };
-}
-
-interface SftpModalDialogsProps {
-  t: (key: string, params?: Record<string, unknown>) => string;
-  showRenameDialog: boolean;
-  setShowRenameDialog: (open: boolean) => void;
-  renameTarget: RemoteFile | null;
-  renameName: string;
-  setRenameName: (value: string) => void;
-  handleRename: () => void;
-  isRenaming: boolean;
-  showPermissionsDialog: boolean;
-  setShowPermissionsDialog: (open: boolean) => void;
-  permissionsTarget: RemoteFile | null;
-  permissions: PermissionsState;
-  togglePermission: (role: "owner" | "group" | "others", perm: "read" | "write" | "execute") => void;
-  getOctalPermissions: () => string;
-  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> = ({
-  t,
-  showRenameDialog,
-  setShowRenameDialog,
-  renameTarget,
-  renameName,
-  setRenameName,
-  handleRename,
-  isRenaming,
-  showPermissionsDialog,
-  setShowPermissionsDialog,
-  permissionsTarget,
-  permissions,
-  togglePermission,
-  getOctalPermissions,
-  getSymbolicPermissions,
-  handleSavePermissions,
-  isChangingPermissions,
-  showCreateDialog,
-  setShowCreateDialog,
-  createType,
-  createName,
-  setCreateName,
-  isCreating,
-  handleCreateSubmit,
-}) => (
-  <>
-    <Dialog open={showRenameDialog} onOpenChange={setShowRenameDialog}>
-      <DialogContent className="sm:max-w-[400px]">
-        <DialogHeader>
-          <DialogTitle>{t("sftp.rename.title")}</DialogTitle>
-          <DialogDescription className="truncate">
-            {renameTarget?.name}
-          </DialogDescription>
-        </DialogHeader>
-        <div className="py-4">
-          <Input
-            value={renameName}
-            onChange={(e) => setRenameName(e.target.value)}
-            placeholder={t("sftp.rename.placeholder")}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") handleRename();
-            }}
-            autoFocus
-          />
-        </div>
-        <DialogFooter>
-          <Button variant="outline" onClick={() => setShowRenameDialog(false)}>
-            {t("common.cancel")}
-          </Button>
-          <Button onClick={handleRename} disabled={isRenaming || !renameName.trim()}>
-            {isRenaming ? <Loader2 size={14} className="mr-2 animate-spin" /> : null}
-            {t("common.apply")}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-
-    <Dialog open={showPermissionsDialog} onOpenChange={setShowPermissionsDialog}>
-      <DialogContent className="sm:max-w-[400px]">
-        <DialogHeader>
-          <DialogTitle>{t("sftp.permissions.title")}</DialogTitle>
-          <DialogDescription className="truncate">
-            {permissionsTarget?.name}
-          </DialogDescription>
-        </DialogHeader>
-        <div className="space-y-4 py-4">
-          <div className="space-y-3">
-            {(["owner", "group", "others"] as const).map((role) => (
-              <div key={role} className="flex items-center gap-4">
-                <div className="w-16 text-sm font-medium">
-                  {t(`sftp.permissions.${role}`)}
-                </div>
-                <div className="flex gap-3">
-                  {(["read", "write", "execute"] as const).map((perm) => (
-                    <label key={perm} className="flex items-center gap-1.5 cursor-pointer">
-                      <input
-                        type="checkbox"
-                        checked={permissions[role][perm]}
-                        onChange={() => togglePermission(role, perm)}
-                        className="rounded border-border"
-                      />
-                      <span className="text-xs">
-                        {perm === "read" ? "R" : perm === "write" ? "W" : "X"}
-                      </span>
-                    </label>
-                  ))}
-                </div>
-              </div>
-            ))}
-          </div>
-          <div className="flex items-center justify-between pt-2 border-t border-border/60">
-            <div className="text-xs text-muted-foreground">
-              {t("sftp.permissions.octal")}: <span className="font-mono text-foreground">{getOctalPermissions()}</span>
-            </div>
-            <div className="text-xs text-muted-foreground">
-              {t("sftp.permissions.symbolic")}: <span className="font-mono text-foreground">{getSymbolicPermissions()}</span>
-            </div>
-          </div>
-        </div>
-        <DialogFooter>
-          <Button variant="outline" onClick={() => setShowPermissionsDialog(false)}>
-            {t("common.cancel")}
-          </Button>
-          <Button onClick={handleSavePermissions} disabled={isChangingPermissions}>
-            {isChangingPermissions ? <Loader2 size={14} className="mr-2 animate-spin" /> : null}
-            {t("common.apply")}
-          </Button>
-        </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

@@ -1,438 +0,0 @@
-import React from "react";
-import { Download, Edit2, Folder, FolderOpen, FolderUp, Link, Loader2, MoreHorizontal, Plus, RefreshCw, Shield, Trash2, Upload } from "lucide-react";
-import { cn } from "../../lib/utils";
-import type { RemoteFile } from "../../types";
-import { isKnownBinaryFile } from "../../lib/sftpFileUtils";
-import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger } from "../ui/context-menu";
-import { Button } from "../ui/button";
-import { getFileIcon } from "./fileIcons";
-
-interface VisibleRow {
-  file: RemoteFile;
-  index: number;
-  top: number;
-}
-
-interface SftpModalFileListProps {
-  t: (key: string, params?: Record<string, unknown>) => string;
-  currentPath: string;
-  isLocalSession: boolean;
-  hasFiles: boolean;
-  hasDisplayFiles: boolean;
-  selectedFiles: Set<string>;
-  dragActive: boolean;
-  loading: boolean;
-  loadingTextContent: boolean;
-  reconnecting: boolean;
-  columnWidths: { name: number; size: number; modified: number; actions: number };
-  sortField: "name" | "size" | "modified";
-  sortOrder: "asc" | "desc";
-  shouldVirtualize: boolean;
-  totalHeight: number;
-  visibleRows: VisibleRow[];
-  fileListRef: React.RefObject<HTMLDivElement>;
-  inputRef: React.RefObject<HTMLInputElement>;
-  folderInputRef: React.RefObject<HTMLInputElement>;
-  handleSort: (field: "name" | "size" | "modified") => void;
-  handleResizeStart: (field: string, e: React.MouseEvent) => void;
-  handleFileListScroll: (e: React.UIEvent<HTMLDivElement>) => void;
-  handleDrag: (e: React.DragEvent) => void;
-  handleDrop: (e: React.DragEvent) => void;
-  handleFileClick: (file: RemoteFile, index: number, e: React.MouseEvent) => void;
-  handleFileDoubleClick: (file: RemoteFile) => void;
-  handleDownload: (file: RemoteFile) => void;
-  handleDelete: (file: RemoteFile) => void;
-  handleOpenFile: (file: RemoteFile) => void;
-  openFileOpenerDialog: (file: RemoteFile) => void;
-  handleEditFile: (file: RemoteFile) => void;
-  openRenameDialog: (file: RemoteFile) => void;
-  openPermissionsDialog: (file: RemoteFile) => void;
-  handleNavigate: (path: string) => void;
-  handleCreateFolder: () => void;
-  handleCreateFile: () => void;
-  handleDownloadSelected: () => void;
-  handleDeleteSelected: () => void;
-  loadFiles: (path: string, options?: { force?: boolean }) => void;
-  formatBytes: (bytes: number | string) => string;
-  formatDate: (dateStr: string | number | undefined) => string;
-}
-
-export const SftpModalFileList: React.FC<SftpModalFileListProps> = ({
-  t,
-  currentPath,
-  isLocalSession,
-  hasFiles,
-  hasDisplayFiles,
-  selectedFiles,
-  dragActive,
-  loading,
-  loadingTextContent,
-  reconnecting,
-  columnWidths,
-  sortField,
-  sortOrder,
-  shouldVirtualize,
-  totalHeight,
-  visibleRows,
-  fileListRef,
-  inputRef,
-  folderInputRef,
-  handleSort,
-  handleResizeStart,
-  handleFileListScroll,
-  handleDrag,
-  handleDrop,
-  handleFileClick,
-  handleFileDoubleClick,
-  handleDownload,
-  handleDelete,
-  handleOpenFile,
-  openFileOpenerDialog,
-  handleEditFile,
-  openRenameDialog,
-  openPermissionsDialog,
-  handleNavigate,
-  handleCreateFolder,
-  handleCreateFile,
-  handleDownloadSelected,
-  handleDeleteSelected,
-  loadFiles,
-  formatBytes,
-  formatDate,
-}) => (
-  <>
-    <div
-      className="shrink-0 bg-muted/80 backdrop-blur-sm border-b border-border/60 px-4 py-2 flex items-center text-xs font-medium text-muted-foreground select-none"
-      style={{
-        display: "grid",
-        gridTemplateColumns: `${columnWidths.name}% ${columnWidths.size}% ${columnWidths.modified}% ${columnWidths.actions}%`,
-      }}
-    >
-      <div
-        className="flex items-center gap-1 cursor-pointer hover:text-foreground relative pr-2"
-        onClick={() => handleSort("name")}
-      >
-        <span>{t("sftp.columns.name")}</span>
-        {sortField === "name" && (
-          <span className="text-primary">{sortOrder === "asc" ? "^" : "v"}</span>
-        )}
-        <div
-          className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/50 transition-colors"
-          onMouseDown={(e) => handleResizeStart("name", e)}
-        />
-      </div>
-      <div
-        className="flex items-center gap-1 cursor-pointer hover:text-foreground relative pr-2"
-        onClick={() => handleSort("size")}
-      >
-        <span>{t("sftp.columns.size")}</span>
-        {sortField === "size" && (
-          <span className="text-primary">{sortOrder === "asc" ? "^" : "v"}</span>
-        )}
-        <div
-          className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/50 transition-colors"
-          onMouseDown={(e) => handleResizeStart("size", e)}
-        />
-      </div>
-      <div
-        className="flex items-center gap-1 cursor-pointer hover:text-foreground relative pr-2"
-        onClick={() => handleSort("modified")}
-      >
-        <span>{t("sftp.columns.modified")}</span>
-        {sortField === "modified" && (
-          <span className="text-primary">{sortOrder === "asc" ? "^" : "v"}</span>
-        )}
-        <div
-          className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/50 transition-colors"
-          onMouseDown={(e) => handleResizeStart("modified", e)}
-        />
-      </div>
-      <div className="text-right">{t("sftp.columns.actions")}</div>
-    </div>
-
-    <div
-      ref={fileListRef}
-      className={cn(
-        "flex-1 min-h-0 overflow-y-auto relative",
-        dragActive && "bg-primary/5 ring-2 ring-inset ring-primary",
-      )}
-      onScroll={handleFileListScroll}
-      onDragEnter={handleDrag}
-      onDragLeave={handleDrag}
-      onDragOver={handleDrag}
-      onDrop={handleDrop}
-    >
-      {dragActive && (
-        <div className="absolute inset-0 flex items-center justify-center pointer-events-none z-10">
-          <div className="bg-background/95 p-6 rounded-xl shadow-lg border-2 border-dashed border-primary text-primary font-medium flex flex-col items-center gap-2">
-            <Upload size={32} />
-            <span>{t("sftp.dropFilesHere")}</span>
-          </div>
-        </div>
-      )}
-
-      {loading && !hasFiles && (
-        <div className="absolute inset-0 flex items-center justify-center bg-background/80">
-          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-        </div>
-      )}
-
-      {loadingTextContent && (
-        <div className="absolute inset-0 flex items-center justify-center bg-background/80 z-20">
-          <div className="flex flex-col items-center gap-2">
-            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-            <span className="text-sm text-muted-foreground">
-              {t("sftp.status.loading")}
-            </span>
-          </div>
-        </div>
-      )}
-
-      {reconnecting && (
-        <div className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-20">
-          <div className="flex flex-col items-center gap-3 p-6 rounded-xl bg-secondary/90 border border-border/60 shadow-lg">
-            <Loader2 className="h-8 w-8 animate-spin text-primary" />
-            <div className="text-center">
-              <div className="text-sm font-medium">{t("sftp.reconnecting.title")}</div>
-              <div className="text-xs text-muted-foreground mt-1">
-                {t("sftp.reconnecting.desc")}
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {!hasDisplayFiles && !loading && (
-        <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
-          <Folder size={48} className="mb-3 opacity-50" />
-          <div className="text-sm font-medium">{t("sftp.emptyDirectory")}</div>
-          <div className="text-xs mt-1">{t("sftp.dragDropToUpload")}</div>
-        </div>
-      )}
-
-      <ContextMenu>
-        <ContextMenuTrigger asChild>
-          <div
-            className={shouldVirtualize ? "relative" : "divide-y divide-border/30"}
-            style={shouldVirtualize ? { height: totalHeight } : undefined}
-          >
-            {visibleRows.map(({ file, index: idx, top }) => {
-              const isNavigableDirectory =
-                file.type === "directory" ||
-                (file.type === "symlink" && file.linkTarget === "directory");
-              const isDownloadableFile =
-                file.type === "file" ||
-                (file.type === "symlink" && file.linkTarget === "file");
-              const isParentEntry = file.name === "..";
-
-              return (
-                <ContextMenu key={file.name}>
-                  <ContextMenuTrigger>
-                    <div
-                      data-sftp-modal-row="true"
-                      className={cn(
-                        "px-4 py-2.5 items-center hover:bg-muted/50 cursor-pointer transition-colors text-sm",
-                        selectedFiles.has(file.name) && !isParentEntry && "bg-primary/10",
-                        shouldVirtualize ? "absolute left-0 right-0 border-b border-border/30" : "",
-                      )}
-                      style={
-                        shouldVirtualize
-                          ? {
-                            top,
-                            display: "grid",
-                            gridTemplateColumns: `${columnWidths.name}% ${columnWidths.size}% ${columnWidths.modified}% ${columnWidths.actions}%`,
-                          }
-                          : {
-                            display: "grid",
-                            gridTemplateColumns: `${columnWidths.name}% ${columnWidths.size}% ${columnWidths.modified}% ${columnWidths.actions}%`,
-                          }
-                      }
-                      onClick={(e) => handleFileClick(file, idx, e)}
-                      onDoubleClick={() => handleFileDoubleClick(file)}
-                    >
-                      <div className="flex items-center gap-3 min-w-0">
-                        <div className="relative shrink-0 h-7 w-7 flex items-center justify-center">
-                          {getFileIcon(
-                            file.name,
-                            isNavigableDirectory,
-                            file.type === "symlink" && !isNavigableDirectory,
-                          )}
-                          {file.type === "symlink" && (
-                            <Link
-                              size={10}
-                              className="absolute -bottom-0.5 -right-0.5 text-muted-foreground"
-                              aria-hidden="true"
-                            />
-                          )}
-                        </div>
-                        <span
-                          className={cn(
-                            "truncate font-medium",
-                            file.type === "symlink" && "italic pr-1",
-                          )}
-                        >
-                          {file.name}
-                          {file.type === "symlink" && (
-                            <span className="sr-only"> (symbolic link)</span>
-                          )}
-                        </span>
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {isNavigableDirectory ? "--" : formatBytes(file.size)}
-                      </div>
-                      <div className="text-xs text-muted-foreground truncate">
-                        {formatDate(file.lastModified)}
-                      </div>
-                      <div className="flex items-center justify-end gap-1">
-                        {isDownloadableFile && (
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-7 w-7"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleDownload(file);
-                            }}
-                            title={t("sftp.context.download")}
-                          >
-                            <Download size={14} />
-                          </Button>
-                        )}
-                        {!isParentEntry && (
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-7 w-7 hover:text-destructive"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleDelete(file);
-                            }}
-                            title={t("sftp.context.delete")}
-                          >
-                            <Trash2 size={14} />
-                          </Button>
-                        )}
-                      </div>
-                    </div>
-                  </ContextMenuTrigger>
-                  <ContextMenuContent>
-                    {isParentEntry ? (
-                      <ContextMenuItem
-                        onClick={() => {
-                          const segments = currentPath.split("/").filter(Boolean);
-                          segments.pop();
-                          const parentPath =
-                            segments.length === 0 ? "/" : `/${segments.join("/")}`;
-                          handleNavigate(parentPath);
-                        }}
-                      >
-                        {t("sftp.context.open")}
-                      </ContextMenuItem>
-                    ) : (
-                      <>
-                        {isNavigableDirectory && (
-                          <>
-                            <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 && (
-                          <>
-                            <ContextMenuItem onClick={() => handleOpenFile(file)}>
-                              <FolderOpen size={14} className="mr-2" />
-                              {t("sftp.context.open")}
-                            </ContextMenuItem>
-                            <ContextMenuItem onClick={() => openFileOpenerDialog(file)}>
-                              <MoreHorizontal size={14} className="mr-2" />
-                              {t("sftp.context.openWith")}
-                            </ContextMenuItem>
-                            {!isKnownBinaryFile(file.name) && (
-                              <ContextMenuItem onClick={() => handleEditFile(file)}>
-                                <Edit2 size={14} className="mr-2" />
-                                {t("sftp.context.edit")}
-                              </ContextMenuItem>
-                            )}
-                            <ContextMenuSeparator />
-                            <ContextMenuItem onClick={() => handleDownload(file)}>
-                              <Download size={14} className="mr-2" />
-                              {t("sftp.context.download")}
-                            </ContextMenuItem>
-                          </>
-                        )}
-                        <ContextMenuItem onClick={() => openRenameDialog(file)}>
-                          <Edit2 size={14} className="mr-2" />
-                          {t("sftp.context.rename")}
-                        </ContextMenuItem>
-                        {!isLocalSession && (
-                          <ContextMenuItem onClick={() => openPermissionsDialog(file)}>
-                            <Shield size={14} className="mr-2" />
-                            {t("sftp.context.permissions")}
-                          </ContextMenuItem>
-                        )}
-                        <ContextMenuItem
-                          className="text-destructive"
-                          onClick={() => handleDelete(file)}
-                        >
-                          <Trash2 size={14} className="mr-2" />
-                          {t("sftp.context.delete")}
-                        </ContextMenuItem>
-                      </>
-                    )}
-                  </ContextMenuContent>
-                </ContextMenu>
-              );
-            })}
-          </div>
-        </ContextMenuTrigger>
-        <ContextMenuContent>
-          <ContextMenuItem onClick={handleCreateFolder}>
-            <Plus className="h-4 w-4 mr-2" /> {t("sftp.newFolder")}
-          </ContextMenuItem>
-          <ContextMenuItem onClick={handleCreateFile}>
-            <Plus className="h-4 w-4 mr-2" /> {t("sftp.newFile")}
-          </ContextMenuItem>
-          <ContextMenuItem onClick={() => inputRef.current?.click()}>
-            <Upload className="h-4 w-4 mr-2" /> {t("sftp.uploadFiles")}
-          </ContextMenuItem>
-          <ContextMenuItem onClick={() => folderInputRef.current?.click()}>
-            <FolderUp className="h-4 w-4 mr-2" /> {t("sftp.uploadFolder")}
-          </ContextMenuItem>
-          <ContextMenuItem onClick={() => loadFiles(currentPath, { force: true })}>
-            <RefreshCw className="h-4 w-4 mr-2" /> {t("sftp.context.refresh")}
-          </ContextMenuItem>
-          {selectedFiles.size > 0 && (
-            <>
-              <ContextMenuItem onClick={handleDownloadSelected}>
-                <Download className="h-4 w-4 mr-2" />
-                {t("sftp.context.downloadSelected", { count: selectedFiles.size })}
-              </ContextMenuItem>
-              <ContextMenuItem
-                className="text-destructive"
-                onClick={handleDeleteSelected}
-              >
-                <Trash2 className="h-4 w-4 mr-2" />
-                {t("sftp.context.deleteSelected", { count: selectedFiles.size })}
-              </ContextMenuItem>
-            </>
-          )}
-        </ContextMenuContent>
-      </ContextMenu>
-    </div>
-  </>
-);

components/sftp-modal/SftpModalFooter.tsx

@@ -1,61 +0,0 @@
-import React from "react";
-import { Download, Trash2 } from "lucide-react";
-import { Button } from "../ui/button";
-import type { RemoteFile } from "../../types";
-
-interface SftpModalFooterProps {
-  t: (key: string, params?: Record<string, unknown>) => string;
-  files: RemoteFile[];
-  selectedFiles: Set<string>;
-  loading: boolean;
-  uploading: boolean;
-  onDownloadSelected: () => void;
-  onDeleteSelected: () => void;
-}
-
-export const SftpModalFooter: React.FC<SftpModalFooterProps> = ({
-  t,
-  files,
-  selectedFiles,
-  loading,
-  uploading,
-  onDownloadSelected,
-  onDeleteSelected,
-}) => (
-  <div className="px-4 py-2 border-t border-border/60 flex items-center justify-between text-xs text-muted-foreground bg-muted/30 flex-shrink-0">
-    <span>
-      {t("sftp.itemsCount", { count: files.length })}
-      {selectedFiles.size > 0 && (
-        <>
-          <span className="mx-2">|</span>
-          <span className="text-primary">
-            {t("sftp.selectedCount", { count: selectedFiles.size })}
-          </span>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-5 px-2 ml-2 text-xs text-primary hover:text-primary"
-            onClick={onDownloadSelected}
-          >
-            <Download size={10} className="mr-1" /> {t("sftp.context.download")}
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-5 px-2 text-xs text-destructive hover:text-destructive"
-            onClick={onDeleteSelected}
-          >
-            <Trash2 size={10} className="mr-1" /> {t("sftp.context.delete")}
-          </Button>
-        </>
-      )}
-    </span>
-    <span>
-      {loading
-        ? t("sftp.status.loading")
-        : uploading
-          ? t("sftp.status.uploading")
-          : t("sftp.status.ready")}
-    </span>
-  </div>
-);

components/sftp-modal/SftpModalHeader.tsx

@@ -1,480 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { ArrowUp, Bookmark, Check, ChevronRight, Eye, EyeOff, FilePlus, FolderPlus, FolderUp, Home, Languages, MoreHorizontal, RefreshCw, Trash2, Upload, X } 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 { Input } from "../ui/input";
-import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from "../ui/popover";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
-
-interface BreadcrumbPart {
-  part: string;
-  originalIndex: number;
-}
-
-interface SftpModalHeaderProps {
-  t: (key: string, params?: Record<string, unknown>) => string;
-  host: Host;
-  credentials: { username?: string; hostname: string; port?: number };
-  showEncoding: boolean;
-  filenameEncoding: SftpFilenameEncoding;
-  onFilenameEncodingChange: (encoding: SftpFilenameEncoding) => void;
-  currentPath: string;
-  isEditingPath: boolean;
-  editingPathValue: string;
-  setEditingPathValue: (value: string) => void;
-  handlePathSubmit: () => void;
-  handlePathKeyDown: (e: React.KeyboardEvent) => void;
-  handlePathDoubleClick: () => void;
-  isAtRoot: boolean;
-  rootLabel: string;
-  isRefreshing: boolean;
-  onUp: () => void;
-  onHome: () => void;
-  onRefresh: () => void;
-  visibleBreadcrumbs: BreadcrumbPart[];
-  hiddenBreadcrumbs: BreadcrumbPart[];
-  needsBreadcrumbTruncation: boolean;
-  breadcrumbs: string[];
-  onBreadcrumbSelect: (index: number) => void;
-  onRootSelect: () => void;
-  inputRef: React.RefObject<HTMLInputElement>;
-  folderInputRef: React.RefObject<HTMLInputElement>;
-  pathInputRef: React.RefObject<HTMLInputElement>;
-  uploading: boolean;
-  onTriggerUpload: () => void;
-  onTriggerFolderUpload: () => void;
-  onCreateFolder: () => void;
-  onCreateFile: () => void;
-  onFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onFolderSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  showHiddenFiles: boolean;
-  onToggleShowHiddenFiles: () => void;
-  onUpdateHost?: (host: Host) => void;
-  onNavigateToBookmark?: (path: string) => void;
-  onClose?: () => void;
-}
-
-export const SftpModalHeader: React.FC<SftpModalHeaderProps> = ({
-  t,
-  host,
-  credentials,
-  showEncoding,
-  filenameEncoding,
-  onFilenameEncodingChange,
-  currentPath,
-  isEditingPath,
-  editingPathValue,
-  setEditingPathValue,
-  handlePathSubmit,
-  handlePathKeyDown,
-  handlePathDoubleClick,
-  isAtRoot,
-  rootLabel,
-  isRefreshing,
-  onUp,
-  onHome,
-  onRefresh,
-  visibleBreadcrumbs,
-  hiddenBreadcrumbs,
-  needsBreadcrumbTruncation,
-  breadcrumbs,
-  onBreadcrumbSelect,
-  onRootSelect,
-  inputRef,
-  folderInputRef,
-  pathInputRef,
-  uploading,
-  onTriggerUpload,
-  onTriggerFolderUpload,
-  onCreateFolder,
-  onCreateFile,
-  onFileSelect,
-  onFolderSelect,
-  showHiddenFiles,
-  onToggleShowHiddenFiles,
-  onUpdateHost,
-  onNavigateToBookmark,
-  onClose,
-}) => {
-  // 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 (
-    <>
-      <div className="px-4 py-3 border-b border-border/60 flex-shrink-0">
-        <div className="flex items-center gap-3">
-          <DistroAvatar
-            host={host}
-            fallback={host.label.slice(0, 2).toUpperCase()}
-            className="h-8 w-8"
-            size="sm"
-          />
-          <div className="flex-1 min-w-0">
-            <div className="text-sm font-semibold">
-              {host.label}
-            </div>
-            <div className="text-xs text-muted-foreground font-mono">
-              {credentials.username || "root"}@{credentials.hostname}:
-              {credentials.port || 22}
-            </div>
-          </div>
-          {onClose && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-6 w-6 shrink-0"
-              onClick={onClose}
-            >
-              <X size={14} />
-            </Button>
-          )}
-        </div>
-      </div>
-
-      <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>
-              <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 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="w-full flex items-center gap-2 px-2 py-1.5 text-xs rounded-sm hover:bg-secondary transition-colors"
-                  onClick={toggleBookmark}
-                >
-                  <Bookmark
-                    size={12}
-                    className={cn(
-                      "shrink-0",
-                      isCurrentPathBookmarked && "fill-yellow-500 text-yellow-500"
-                    )}
-                  />
-                  {isCurrentPathBookmarked ? t("sftp.bookmark.remove") : t("sftp.bookmark.add")}
-                </button>
-                {/* 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>
-          )}
-          <Tooltip
-            open={openTooltip === 'showHiddenFiles'}
-            onOpenChange={handleTooltipOpenChange('showHiddenFiles')}
-          >
-            <TooltipTrigger asChild>
-              <Button
-                variant={showHiddenFiles ? "secondary" : "ghost"}
-                size="icon"
-                className={cn("h-7 w-7", showHiddenFiles && "text-primary")}
-                onClick={onToggleShowHiddenFiles}
-              >
-                {showHiddenFiles ? <EyeOff size={14} /> : <Eye size={14} />}
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>{t("settings.sftp.showHiddenFiles")}</TooltipContent>
-          </Tooltip>
-
-          <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 && (
-                        <>
-                          <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"
-                      />
-                      <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>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-
-          <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>
-      </TooltipProvider>
-    </>
-  );
-};

components/sftp-modal/SftpModalUploadTasks.tsx

@@ -1,228 +0,0 @@
-import React from "react";
-import { Download, Loader2, Upload, X, XCircle } from "lucide-react";
-import { cn } from "../../lib/utils";
-import { Button } from "../ui/button";
-
-interface TransferTask {
-  id: string;
-  fileName: string;
-  totalBytes: number;
-  transferredBytes: number;
-  progress: number;
-  speed: number;
-  status: "pending" | "uploading" | "downloading" | "completed" | "failed" | "cancelled";
-  error?: string;
-  direction: "upload" | "download";
-  targetPath?: string;
-}
-
-interface SftpModalUploadTasksProps {
-  tasks: TransferTask[];
-  t: (key: string, params?: Record<string, unknown>) => string;
-  onCancel?: () => void;
-  onCancelTask?: (taskId: string) => void;
-  onDismiss?: (taskId: string) => void;
-}
-
-export const SftpModalUploadTasks: React.FC<SftpModalUploadTasksProps> = ({ tasks, t, onCancel, onCancelTask, onDismiss }) => {
-  if (tasks.length === 0) return null;
-
-  // Helper function to get localized display name for compressed uploads
-  const getDisplayName = (task: TransferTask) => {
-    // Check for explicit phase marker format: "folderName|phase"
-    // This is the format sent by uploadService.ts for compressed uploads
-    if (task.fileName.includes('|')) {
-      const pipeIndex = task.fileName.lastIndexOf('|');
-      const baseName = task.fileName.substring(0, pipeIndex);
-      const phase = task.fileName.substring(pipeIndex + 1);
-
-      if (phase === 'compressing' || phase === 'extracting' || phase === 'uploading' || phase === 'compressed') {
-        const phaseLabel = t(`sftp.upload.phase.${phase}`);
-        return `${baseName} (${phaseLabel})`;
-      }
-    }
-
-    // Check for exact matches of phase status strings (legacy support)
-    if (task.fileName === t('sftp.upload.compressing') || task.fileName === 'Compressing...' || task.fileName === 'Compressing') {
-      return t('sftp.upload.compressing');
-    }
-    if (task.fileName === t('sftp.upload.extracting') || task.fileName === 'Extracting...' || task.fileName === 'Extracting') {
-      return t('sftp.upload.extracting');
-    }
-    if (task.fileName === t('sftp.upload.scanning') || task.fileName === 'Scanning files...' || task.fileName === 'Scanning files') {
-      return t('sftp.upload.scanning');
-    }
-
-    // Check if this is a compressed upload task (legacy format)
-    if (task.fileName.includes('(compressed)')) {
-      const baseName = task.fileName.replace(' (compressed)', '');
-      return `${baseName} (${t('sftp.upload.compressed')})`;
-    }
-
-    return task.fileName;
-  };
-
-  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].reverse().map((task) => {
-          const formatSpeed = (bytesPerSec: number) => {
-            if (bytesPerSec <= 0) return "";
-            if (bytesPerSec >= 1024 * 1024)
-              return `${(bytesPerSec / (1024 * 1024)).toFixed(1)} MB/s`;
-            if (bytesPerSec >= 1024)
-              return `${(bytesPerSec / 1024).toFixed(1)} KB/s`;
-            return `${Math.round(bytesPerSec)} B/s`;
-          };
-
-          const formatBytes = (bytes: number) => {
-            if (bytes === 0) return "0 B";
-            if (bytes >= 1024 * 1024)
-              return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-            if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-            return `${bytes} B`;
-          };
-
-          const remainingBytes = task.totalBytes - task.transferredBytes;
-          const effectiveSpeed = task.speed > 0 ? task.speed : 0;
-          const remainingTime =
-            effectiveSpeed > 0 ? Math.ceil(remainingBytes / effectiveSpeed) : 0;
-          const remainingStr =
-            remainingTime > 60
-              ? `~${Math.ceil(remainingTime / 60)}m left`
-              : remainingTime > 0
-                ? `~${remainingTime}s left`
-                : "";
-
-          return (
-            <div
-              key={task.id}
-              className="px-4 py-2.5 flex items-center gap-3 border-b border-border/30 last:border-b-0"
-            >
-              <div className="shrink-0">
-                {(task.status === "uploading" || task.status === "downloading") && (
-                  <Loader2 size={14} className="animate-spin text-primary" />
-                )}
-                {task.status === "pending" && (
-                  task.direction === "download"
-                    ? <Download size={14} className="text-muted-foreground animate-pulse" />
-                    : <Upload size={14} className="text-muted-foreground animate-pulse" />
-                )}
-                {task.status === "completed" && (
-                  task.direction === "download"
-                    ? <Download size={14} className="text-green-500" />
-                    : <Upload size={14} className="text-green-500" />
-                )}
-                {task.status === "failed" && (
-                  <XCircle size={14} className="text-destructive" />
-                )}
-                {task.status === "cancelled" && (
-                  <XCircle size={14} className="text-muted-foreground" />
-                )}
-              </div>
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <span className="text-xs font-medium truncate">
-                    {getDisplayName(task)}
-                  </span>
-                  {(task.status === "uploading" || task.status === "downloading") && effectiveSpeed > 0 && (
-                    <span className="text-[10px] text-primary font-mono shrink-0">
-                      {formatSpeed(effectiveSpeed)}
-                    </span>
-                  )}
-                  {(task.status === "uploading" || task.status === "downloading") && remainingStr && (
-                    <span className="text-[10px] text-muted-foreground shrink-0">
-                      {remainingStr}
-                    </span>
-                  )}
-                </div>
-                {(task.status === "uploading" || task.status === "downloading" || task.status === "pending") && (
-                  <div className="mt-1.5 flex items-center gap-2">
-                    <div className="flex-1 h-1.5 bg-secondary rounded-full overflow-hidden">
-                      <div
-                        className={cn(
-                          "h-full rounded-full transition-all duration-150",
-                          task.status === "pending"
-                            ? "bg-muted-foreground/50 animate-pulse w-full"
-                            : "bg-primary",
-                        )}
-                        style={{
-                          width:
-                            task.status === "uploading" || task.status === "downloading"
-                              ? `${task.progress}%`
-                              : undefined,
-                        }}
-                      />
-                    </div>
-                    <span className="text-[10px] text-muted-foreground font-mono shrink-0 w-8 text-right">
-                      {task.status === "uploading" || task.status === "downloading" ? `${Math.round(task.progress)}%` : "..."}
-                    </span>
-                  </div>
-                )}
-                {(task.status === "uploading" || task.status === "downloading") && task.totalBytes > 0 && (
-                  <div className="text-[10px] text-muted-foreground mt-0.5 font-mono">
-                    {formatBytes(task.transferredBytes)} / {formatBytes(task.totalBytes)}
-                  </div>
-                )}
-                {task.status === "completed" && (
-                  <div className="text-[10px] text-green-600 mt-0.5">
-                    {t(task.direction === "download" ? "sftp.download.completed" : "sftp.upload.completed")} - {formatBytes(task.totalBytes)}
-                    {task.targetPath && (
-                      <span className="text-muted-foreground ml-1">→ {task.targetPath}</span>
-                    )}
-                  </div>
-                )}
-                {task.status === "cancelled" && (
-                  <div className="text-[10px] text-muted-foreground mt-0.5">
-                    {t(task.direction === "download" ? "sftp.download.cancelled" : "sftp.upload.cancelled")}
-                  </div>
-                )}
-                {task.status === "failed" && task.error && (
-                  <div className="text-[10px] text-destructive truncate mt-0.5">
-                    {task.error}
-                  </div>
-                )}
-              </div>
-              <div className="shrink-0 flex items-center gap-1">
-                {task.status === "pending" && (
-                  <span className="text-[10px] text-muted-foreground">
-                    {t("sftp.task.waiting")}
-                  </span>
-                )}
-                {(task.status === "uploading" || task.status === "downloading" || task.status === "pending") && (onCancelTask || onCancel) && (
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-6 w-6 text-destructive hover:text-destructive"
-                    onClick={() => {
-                      // For download tasks or when onCancelTask is available, use task-specific cancel
-                      if (onCancelTask) {
-                        onCancelTask(task.id);
-                      } else if (onCancel) {
-                        onCancel();
-                      }
-                    }}
-                    title={t("sftp.action.cancel")}
-                  >
-                    <X size={12} />
-                  </Button>
-                )}
-                {(task.status === "completed" || task.status === "failed" || task.status === "cancelled") && onDismiss && (
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-6 w-6 text-muted-foreground hover:text-foreground"
-                    onClick={() => onDismiss(task.id)}
-                    title={t("sftp.action.dismiss")}
-                  >
-                    <X size={12} />
-                  </Button>
-                )}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};

components/sftp-modal/fileIcons.tsx

@@ -1,149 +0,0 @@
-import {
-  Database,
-  ExternalLink,
-  File,
-  FileArchive,
-  FileAudio,
-  FileCode,
-  FileImage,
-  FileSpreadsheet,
-  FileText,
-  FileType,
-  FileVideo,
-  Folder,
-  Globe,
-  Lock,
-  Settings,
-  Terminal,
-} from "lucide-react";
-import React from "react";
-
-export const getFileIcon = (fileName: string, isDirectory: boolean, isSymlink?: boolean) => {
-  if (isDirectory)
-    return (
-      <Folder
-        size={18}
-        fill="currentColor"
-        fillOpacity={0.2}
-        className="text-blue-400"
-      />
-    );
-
-  if (isSymlink) {
-    return <ExternalLink size={18} className="text-cyan-500" />;
-  }
-
-  const ext = fileName.split(".").pop()?.toLowerCase() || "";
-
-  if (["doc", "docx", "rtf", "odt"].includes(ext))
-    return <FileText size={18} className="text-blue-500" />;
-  if (["xls", "xlsx", "csv", "ods"].includes(ext))
-    return <FileSpreadsheet size={18} className="text-green-500" />;
-  if (["ppt", "pptx", "odp"].includes(ext))
-    return <FileType size={18} className="text-orange-500" />;
-  if (["pdf"].includes(ext))
-    return <FileText size={18} className="text-red-500" />;
-
-  if (["js", "jsx", "ts", "tsx", "mjs", "cjs"].includes(ext))
-    return <FileCode size={18} className="text-yellow-500" />;
-  if (["py", "pyc", "pyw"].includes(ext))
-    return <FileCode size={18} className="text-blue-400" />;
-  if (["sh", "bash", "zsh", "fish", "bat", "cmd", "ps1"].includes(ext))
-    return <Terminal size={18} className="text-green-400" />;
-  if (["c", "cpp", "h", "hpp", "cc", "cxx"].includes(ext))
-    return <FileCode size={18} className="text-blue-600" />;
-  if (["java", "class", "jar"].includes(ext))
-    return <FileCode size={18} className="text-orange-600" />;
-  if (["go"].includes(ext))
-    return <FileCode size={18} className="text-cyan-500" />;
-  if (["rs"].includes(ext))
-    return <FileCode size={18} className="text-orange-400" />;
-  if (["rb"].includes(ext))
-    return <FileCode size={18} className="text-red-400" />;
-  if (["php"].includes(ext))
-    return <FileCode size={18} className="text-purple-500" />;
-  if (["html", "htm", "xhtml"].includes(ext))
-    return <Globe size={18} className="text-orange-500" />;
-  if (["css", "scss", "sass", "less"].includes(ext))
-    return <FileCode size={18} className="text-blue-500" />;
-  if (["vue", "svelte"].includes(ext))
-    return <FileCode size={18} className="text-green-500" />;
-
-  if (["json", "json5"].includes(ext))
-    return <FileCode size={18} className="text-yellow-600" />;
-  if (["xml", "xsl", "xslt"].includes(ext))
-    return <FileCode size={18} className="text-orange-400" />;
-  if (["yml", "yaml"].includes(ext))
-    return <Settings size={18} className="text-pink-400" />;
-  if (["toml", "ini", "conf", "cfg", "config"].includes(ext))
-    return <Settings size={18} className="text-gray-400" />;
-  if (["env"].includes(ext))
-    return <Lock size={18} className="text-yellow-500" />;
-  if (["sql", "sqlite", "db"].includes(ext))
-    return <Database size={18} className="text-blue-400" />;
-
-  if (
-    [
-      "jpg",
-      "jpeg",
-      "png",
-      "gif",
-      "bmp",
-      "webp",
-      "svg",
-      "ico",
-      "tiff",
-      "tif",
-      "heic",
-      "heif",
-      "avif",
-    ].includes(ext)
-  )
-    return <FileImage size={18} className="text-purple-400" />;
-
-  if (
-    [
-      "mp4",
-      "mkv",
-      "avi",
-      "mov",
-      "wmv",
-      "flv",
-      "webm",
-      "m4v",
-      "3gp",
-      "mpeg",
-      "mpg",
-    ].includes(ext)
-  )
-    return <FileVideo size={18} className="text-pink-500" />;
-
-  if (
-    ["mp3", "wav", "flac", "aac", "ogg", "m4a", "wma", "opus", "aiff"].includes(
-      ext,
-    )
-  )
-    return <FileAudio size={18} className="text-green-400" />;
-
-  if (
-    [
-      "zip",
-      "rar",
-      "7z",
-      "tar",
-      "gz",
-      "bz2",
-      "xz",
-      "tgz",
-      "tbz2",
-      "lz",
-      "lzma",
-      "cab",
-      "iso",
-      "dmg",
-    ].includes(ext)
-  )
-    return <FileArchive size={18} className="text-yellow-600" />;
-
-  return <File size={18} className="text-muted-foreground" />;
-};

components/sftp-modal/hooks/useSftpModalCreateDelete.ts

@@ -1,140 +0,0 @@
-import { useCallback, useState } from "react";
-import type { RemoteFile } from "../../../types";
-import { toast } from "../../ui/toast";
-
-interface UseSftpModalCreateDeleteParams {
-  currentPath: string;
-  isLocalSession: boolean;
-  joinPath: (base: string, name: string) => string;
-  ensureSftp: () => Promise<string>;
-  loadFiles: (path: string, options?: { force?: boolean }) => Promise<void>;
-  deleteLocalFile: (path: string) => Promise<void>;
-  deleteSftp: (sftpId: string, path: string) => Promise<void>;
-  mkdirLocal: (path: string) => Promise<void>;
-  mkdirSftp: (sftpId: string, path: string) => Promise<void>;
-  writeLocalFile: (path: string, data: ArrayBuffer) => Promise<void>;
-  writeSftpBinary: (sftpId: string, path: string, data: ArrayBuffer) => Promise<void>;
-  writeSftp: (sftpId: string, path: string, data: string) => Promise<void>;
-  t: (key: string, params?: Record<string, unknown>) => string;
-}
-
-interface UseSftpModalCreateDeleteResult {
-  handleDelete: (file: RemoteFile) => 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 = ({
-  currentPath,
-  isLocalSession,
-  joinPath,
-  ensureSftp,
-  loadFiles,
-  deleteLocalFile,
-  deleteSftp,
-  mkdirLocal,
-  mkdirSftp,
-  writeLocalFile,
-  writeSftpBinary,
-  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;
-      if (!confirm(t("sftp.deleteConfirm.single", { name: file.name }))) return;
-
-      try {
-        const fullPath = joinPath(currentPath, file.name);
-        if (isLocalSession) {
-          await deleteLocalFile(fullPath);
-        } else {
-          await deleteSftp(await ensureSftp(), fullPath);
-        }
-        await loadFiles(currentPath, { force: true });
-      } catch (e) {
-        toast.error(
-          e instanceof Error ? e.message : t("sftp.error.deleteFailed"),
-          "SFTP",
-        );
-      }
-    },
-    [currentPath, deleteLocalFile, deleteSftp, ensureSftp, isLocalSession, joinPath, loadFiles, t],
-  );
-
-  const handleCreateFolder = useCallback(() => {
-    setCreateType("folder");
-    setCreateName("");
-    setShowCreateDialog(true);
-  }, []);
-
-  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, name);
-      if (createType === "folder") {
-        if (isLocalSession) {
-          await mkdirLocal(fullPath);
-        } else {
-          await mkdirSftp(await ensureSftp(), fullPath);
-        }
-      } else {
-        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(createType === "folder" ? "sftp.error.createFolderFailed" : "sftp.error.createFileFailed"),
-        "SFTP",
-      );
-    } finally {
-      setIsCreating(false);
-    }
-  }, [createName, createType, currentPath, ensureSftp, isCreating, isLocalSession, joinPath, loadFiles, mkdirLocal, mkdirSftp, t, writeLocalFile, writeSftp, writeSftpBinary]);
-
-  return {
-    handleDelete,
-    handleCreateFolder,
-    handleCreateFile,
-    showCreateDialog,
-    setShowCreateDialog,
-    createType,
-    createName,
-    setCreateName,
-    isCreating,
-    handleCreateSubmit,
-  };
-};

components/sftp-modal/hooks/useSftpModalFileActions.ts

@@ -1,277 +0,0 @@
-import type { RemoteFile } from "../../../types";
-import { useSftpModalCreateDelete } from "./useSftpModalCreateDelete";
-import { useSftpModalRename } from "./useSftpModalRename";
-import { useSftpModalPermissions } from "./useSftpModalPermissions";
-import { useSftpModalTextEditor } from "./useSftpModalTextEditor";
-import { useSftpModalFileOpener } from "./useSftpModalFileOpener";
-import type { FileOpenerType, SystemAppInfo } from "../../../lib/sftpFileUtils";
-
-interface UseSftpModalFileActionsParams {
-  currentPath: string;
-  isLocalSession: boolean;
-  joinPath: (base: string, name: string) => string;
-  ensureSftp: () => Promise<string>;
-  loadFiles: (path: string, options?: { force?: boolean }) => Promise<void>;
-  readLocalFile: (path: string) => Promise<ArrayBuffer>;
-  readSftp: (sftpId: string, path: string) => Promise<string>;
-  writeLocalFile: (path: string, data: ArrayBuffer) => Promise<void>;
-  writeSftp: (sftpId: string, path: string, data: string) => Promise<void>;
-  writeSftpBinary: (sftpId: string, path: string, data: ArrayBuffer) => Promise<void>;
-  deleteLocalFile: (path: string) => Promise<void>;
-  deleteSftp: (sftpId: string, path: string) => Promise<void>;
-  mkdirLocal: (path: string) => Promise<void>;
-  mkdirSftp: (sftpId: string, path: string) => Promise<void>;
-  renameSftp: (sftpId: string, oldPath: string, newPath: string) => Promise<void>;
-  chmodSftp: (sftpId: string, path: string, permissions: string) => Promise<void>;
-  statSftp: (sftpId: string, path: string) => Promise<{ permissions?: string }>;
-  t: (key: string, params?: Record<string, unknown>) => string;
-  sftpAutoSync: boolean;
-  getOpenerForFile: (name: string) => { openerType: FileOpenerType; systemApp?: SystemAppInfo } | null;
-  setOpenerForExtension: (ext: string, openerType: FileOpenerType, systemApp?: SystemAppInfo) => void;
-  downloadSftpToTempAndOpen: (sftpId: string, path: string, fileName: string, appPath: string, opts: { enableWatch: boolean }) => Promise<void>;
-  selectApplication: () => Promise<{ path: string; name: string } | null>;
-}
-
-interface UseSftpModalFileActionsResult {
-  handleDelete: (file: RemoteFile) => 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;
-  renameName: string;
-  setRenameName: (value: string) => void;
-  isRenaming: boolean;
-  openRenameDialog: (file: RemoteFile) => void;
-  handleRename: () => Promise<void>;
-  showPermissionsDialog: boolean;
-  setShowPermissionsDialog: (open: boolean) => void;
-  permissionsTarget: RemoteFile | null;
-  permissions: {
-    owner: { read: boolean; write: boolean; execute: boolean };
-    group: { read: boolean; write: boolean; execute: boolean };
-    others: { read: boolean; write: boolean; execute: boolean };
-  };
-  isChangingPermissions: boolean;
-  openPermissionsDialog: (file: RemoteFile) => Promise<void>;
-  togglePermission: (role: "owner" | "group" | "others", perm: "read" | "write" | "execute") => void;
-  getOctalPermissions: () => string;
-  getSymbolicPermissions: () => string;
-  handleSavePermissions: () => Promise<void>;
-  showFileOpenerDialog: boolean;
-  setShowFileOpenerDialog: (open: boolean) => void;
-  fileOpenerTarget: RemoteFile | null;
-  setFileOpenerTarget: (target: RemoteFile | null) => void;
-  openFileOpenerDialog: (file: RemoteFile) => void;
-  handleFileOpenerSelect: (
-    openerType: FileOpenerType,
-    setAsDefault: boolean,
-    systemApp?: SystemAppInfo,
-  ) => Promise<void>;
-  handleSelectSystemApp: () => Promise<SystemAppInfo | null>;
-  showTextEditor: boolean;
-  setShowTextEditor: (open: boolean) => void;
-  textEditorTarget: RemoteFile | null;
-  setTextEditorTarget: (target: RemoteFile | null) => void;
-  textEditorContent: string;
-  setTextEditorContent: (value: string) => void;
-  loadingTextContent: boolean;
-  handleEditFile: (file: RemoteFile) => Promise<void>;
-  handleSaveTextFile: (content: string) => Promise<void>;
-  handleOpenFile: (file: RemoteFile) => Promise<void>;
-}
-
-export const useSftpModalFileActions = ({
-  currentPath,
-  isLocalSession,
-  joinPath,
-  ensureSftp,
-  loadFiles,
-  readLocalFile,
-  readSftp,
-  writeLocalFile,
-  writeSftp,
-  writeSftpBinary,
-  deleteLocalFile,
-  deleteSftp,
-  mkdirLocal,
-  mkdirSftp,
-  renameSftp,
-  chmodSftp,
-  statSftp,
-  t,
-  sftpAutoSync,
-  getOpenerForFile,
-  setOpenerForExtension,
-  downloadSftpToTempAndOpen,
-  selectApplication,
-}: UseSftpModalFileActionsParams): UseSftpModalFileActionsResult => {
-  const {
-    handleDelete,
-    handleCreateFolder,
-    handleCreateFile,
-    showCreateDialog,
-    setShowCreateDialog,
-    createType,
-    createName,
-    setCreateName,
-    isCreating,
-    handleCreateSubmit,
-  } =
-    useSftpModalCreateDelete({
-      currentPath,
-      isLocalSession,
-      joinPath,
-      ensureSftp,
-      loadFiles,
-      deleteLocalFile,
-      deleteSftp,
-      mkdirLocal,
-      mkdirSftp,
-      writeLocalFile,
-      writeSftpBinary,
-      writeSftp,
-      t,
-    });
-
-  const {
-    showRenameDialog,
-    setShowRenameDialog,
-    renameTarget,
-    renameName,
-    setRenameName,
-    isRenaming,
-    openRenameDialog,
-    handleRename,
-  } = useSftpModalRename({
-    currentPath,
-    isLocalSession,
-    joinPath,
-    ensureSftp,
-    loadFiles,
-    renameSftp,
-    t,
-  });
-
-  const {
-    showPermissionsDialog,
-    setShowPermissionsDialog,
-    permissionsTarget,
-    permissions,
-    isChangingPermissions,
-    openPermissionsDialog,
-    togglePermission,
-    getOctalPermissions,
-    getSymbolicPermissions,
-    handleSavePermissions,
-  } = useSftpModalPermissions({
-    currentPath,
-    isLocalSession,
-    joinPath,
-    ensureSftp,
-    loadFiles,
-    chmodSftp,
-    statSftp,
-    t,
-  });
-
-  const {
-    showTextEditor,
-    setShowTextEditor,
-    textEditorTarget,
-    setTextEditorTarget,
-    textEditorContent,
-    setTextEditorContent,
-    loadingTextContent,
-    handleEditFile,
-    handleSaveTextFile,
-  } = useSftpModalTextEditor({
-    currentPath,
-    isLocalSession,
-    joinPath,
-    ensureSftp,
-    readLocalFile,
-    readSftp,
-    writeLocalFile,
-    writeSftp,
-    t,
-  });
-
-  const {
-    showFileOpenerDialog,
-    setShowFileOpenerDialog,
-    fileOpenerTarget,
-    setFileOpenerTarget,
-    openFileOpenerDialog,
-    handleOpenFile,
-    handleFileOpenerSelect,
-    handleSelectSystemApp,
-  } = useSftpModalFileOpener({
-    currentPath,
-    isLocalSession,
-    joinPath,
-    ensureSftp,
-    sftpAutoSync,
-    getOpenerForFile,
-    setOpenerForExtension,
-    downloadSftpToTempAndOpen,
-    selectApplication,
-    t,
-    handleEditFile,
-  });
-
-  return {
-    handleDelete,
-    handleCreateFolder,
-    handleCreateFile,
-    showCreateDialog,
-    setShowCreateDialog,
-    createType,
-    createName,
-    setCreateName,
-    isCreating,
-    handleCreateSubmit,
-    showRenameDialog,
-    setShowRenameDialog,
-    renameTarget,
-    renameName,
-    setRenameName,
-    isRenaming,
-    openRenameDialog,
-    handleRename,
-    showPermissionsDialog,
-    setShowPermissionsDialog,
-    permissionsTarget,
-    permissions,
-    isChangingPermissions,
-    openPermissionsDialog,
-    togglePermission,
-    getOctalPermissions,
-    getSymbolicPermissions,
-    handleSavePermissions,
-    showFileOpenerDialog,
-    setShowFileOpenerDialog,
-    fileOpenerTarget,
-    setFileOpenerTarget,
-    openFileOpenerDialog,
-    handleFileOpenerSelect,
-    handleSelectSystemApp,
-    showTextEditor,
-    setShowTextEditor,
-    textEditorTarget,
-    setTextEditorTarget,
-    textEditorContent,
-    setTextEditorContent,
-    loadingTextContent,
-    handleEditFile,
-    handleSaveTextFile,
-    handleOpenFile,
-  };
-};

components/sftp-modal/hooks/useSftpModalFileOpener.ts

@@ -1,154 +0,0 @@
-import { useCallback, useState } from "react";
-import type { RemoteFile } from "../../../types";
-import { toast } from "../../ui/toast";
-import { getFileExtension, FileOpenerType, SystemAppInfo } from "../../../lib/sftpFileUtils";
-
-interface UseSftpModalFileOpenerParams {
-  currentPath: string;
-  isLocalSession: boolean;
-  joinPath: (base: string, name: string) => string;
-  ensureSftp: () => Promise<string>;
-  sftpAutoSync: boolean;
-  getOpenerForFile: (name: string) => { openerType: FileOpenerType; systemApp?: SystemAppInfo } | null;
-  setOpenerForExtension: (ext: string, openerType: FileOpenerType, systemApp?: SystemAppInfo) => void;
-  downloadSftpToTempAndOpen: (sftpId: string, path: string, fileName: string, appPath: string, opts: { enableWatch: boolean }) => Promise<void>;
-  selectApplication: () => Promise<{ path: string; name: string } | null>;
-  t: (key: string, params?: Record<string, unknown>) => string;
-  handleEditFile: (file: RemoteFile) => Promise<void>;
-}
-
-interface UseSftpModalFileOpenerResult {
-  showFileOpenerDialog: boolean;
-  setShowFileOpenerDialog: (open: boolean) => void;
-  fileOpenerTarget: RemoteFile | null;
-  setFileOpenerTarget: (target: RemoteFile | null) => void;
-  openFileOpenerDialog: (file: RemoteFile) => void;
-  handleOpenFile: (file: RemoteFile) => Promise<void>;
-  handleFileOpenerSelect: (
-    openerType: FileOpenerType,
-    setAsDefault: boolean,
-    systemApp?: SystemAppInfo,
-  ) => Promise<void>;
-  handleSelectSystemApp: () => Promise<SystemAppInfo | null>;
-}
-
-export const useSftpModalFileOpener = ({
-  currentPath,
-  isLocalSession,
-  joinPath,
-  ensureSftp,
-  sftpAutoSync,
-  getOpenerForFile,
-  setOpenerForExtension,
-  downloadSftpToTempAndOpen,
-  selectApplication,
-  t,
-  handleEditFile,
-}: UseSftpModalFileOpenerParams): UseSftpModalFileOpenerResult => {
-  const [showFileOpenerDialog, setShowFileOpenerDialog] = useState(false);
-  const [fileOpenerTarget, setFileOpenerTarget] = useState<RemoteFile | null>(null);
-
-  const openFileOpenerDialog = useCallback((file: RemoteFile) => {
-    setFileOpenerTarget(file);
-    setShowFileOpenerDialog(true);
-  }, []);
-
-  const handleOpenFile = useCallback(async (file: RemoteFile) => {
-    const savedOpener = getOpenerForFile(file.name);
-
-    if (savedOpener) {
-      if (savedOpener.openerType === "builtin-editor") {
-        await handleEditFile(file);
-      } else if (savedOpener.openerType === "system-app" && savedOpener.systemApp) {
-        try {
-          const fullPath = joinPath(currentPath, file.name);
-          if (isLocalSession) {
-            const bridge = (window as unknown as { netcatty?: NetcattyBridge }).netcatty;
-            if (bridge?.openWithApplication) {
-              await bridge.openWithApplication(fullPath, savedOpener.systemApp.path);
-            }
-          } else {
-            const sftpId = await ensureSftp();
-            await downloadSftpToTempAndOpen(
-              sftpId,
-              fullPath,
-              file.name,
-              savedOpener.systemApp.path,
-              { enableWatch: sftpAutoSync },
-            );
-          }
-        } catch (e) {
-          toast.error(
-            e instanceof Error ? e.message : t("sftp.error.openFailed"),
-            "SFTP",
-          );
-        }
-      }
-    } else {
-      openFileOpenerDialog(file);
-    }
-  }, [currentPath, downloadSftpToTempAndOpen, ensureSftp, getOpenerForFile, handleEditFile, isLocalSession, joinPath, openFileOpenerDialog, sftpAutoSync, t]);
-
-  const handleFileOpenerSelect = useCallback(
-    async (openerType: FileOpenerType, setAsDefault: boolean, systemApp?: SystemAppInfo) => {
-      if (!fileOpenerTarget) return;
-
-      if (setAsDefault) {
-        const ext = getFileExtension(fileOpenerTarget.name);
-        setOpenerForExtension(ext, openerType, systemApp);
-      }
-
-      setShowFileOpenerDialog(false);
-
-      if (openerType === "builtin-editor") {
-        await handleEditFile(fileOpenerTarget);
-      } else if (openerType === "system-app" && systemApp) {
-        try {
-          const fullPath = joinPath(currentPath, fileOpenerTarget.name);
-          if (isLocalSession) {
-            const bridge = (window as unknown as { netcatty?: NetcattyBridge }).netcatty;
-            if (bridge?.openWithApplication) {
-              await bridge.openWithApplication(fullPath, systemApp.path);
-            }
-          } else {
-            const sftpId = await ensureSftp();
-            await downloadSftpToTempAndOpen(
-              sftpId,
-              fullPath,
-              fileOpenerTarget.name,
-              systemApp.path,
-              { enableWatch: sftpAutoSync },
-            );
-          }
-        } catch (e) {
-          toast.error(
-            e instanceof Error ? e.message : t("sftp.error.openFailed"),
-            "SFTP",
-          );
-        }
-      }
-
-      setFileOpenerTarget(null);
-    },
-    [currentPath, downloadSftpToTempAndOpen, ensureSftp, fileOpenerTarget, handleEditFile, isLocalSession, joinPath, sftpAutoSync, setOpenerForExtension, t],
-  );
-
-  const handleSelectSystemApp = useCallback(async (): Promise<SystemAppInfo | null> => {
-    const result = await selectApplication();
-    if (result) {
-      return { path: result.path, name: result.name };
-    }
-    return null;
-  }, [selectApplication]);
-
-  return {
-    showFileOpenerDialog,
-    setShowFileOpenerDialog,
-    fileOpenerTarget,
-    setFileOpenerTarget,
-    openFileOpenerDialog,
-    handleOpenFile,
-    handleFileOpenerSelect,
-    handleSelectSystemApp,
-  };
-};

components/sftp-modal/hooks/useSftpModalKeyboardShortcuts.ts

@@ -1,156 +0,0 @@
-/**
- * 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/useSftpModalPath.ts

@@ -1,135 +0,0 @@
-import React, { useCallback, useMemo, useRef, useState } from "react";
-import { breadcrumbPathAt, getBreadcrumbs, getRootPath, getWindowsDrive, isWindowsPath } from "../pathUtils";
-
-interface UseSftpModalPathParams {
-  currentPath: string;
-  isLocalSession: boolean;
-  localHomePath: string | null;
-  onNavigate: (path: string) => void;
-  maxVisibleBreadcrumbParts?: number;
-}
-
-interface UseSftpModalPathResult {
-  isEditingPath: boolean;
-  editingPathValue: string;
-  setEditingPathValue: (value: string) => void;
-  pathInputRef: React.RefObject<HTMLInputElement>;
-  handlePathDoubleClick: () => void;
-  handlePathSubmit: () => void;
-  handlePathKeyDown: (e: React.KeyboardEvent) => void;
-  breadcrumbs: string[];
-  visibleBreadcrumbs: { part: string; originalIndex: number }[];
-  hiddenBreadcrumbs: { part: string; originalIndex: number }[];
-  needsBreadcrumbTruncation: boolean;
-  breadcrumbPathAtForIndex: (index: number) => string;
-  rootLabel: string;
-  rootPath: string;
-}
-
-export const useSftpModalPath = ({
-  currentPath,
-  isLocalSession,
-  localHomePath,
-  onNavigate,
-  maxVisibleBreadcrumbParts = 4,
-}: UseSftpModalPathParams): UseSftpModalPathResult => {
-  const [isEditingPath, setIsEditingPath] = useState(false);
-  const [editingPathValue, setEditingPathValue] = useState("");
-  const pathInputRef = useRef<HTMLInputElement>(null);
-
-  const handlePathDoubleClick = () => {
-    setEditingPathValue(currentPath);
-    setIsEditingPath(true);
-    setTimeout(() => pathInputRef.current?.select(), 0);
-  };
-
-  const handlePathSubmit = () => {
-    const fallbackPath = localHomePath || getRootPath(currentPath, isLocalSession);
-    const newPath = editingPathValue.trim() || fallbackPath;
-    setIsEditingPath(false);
-    if (newPath !== currentPath) {
-      if (isLocalSession) {
-        onNavigate(newPath);
-      } else {
-        onNavigate(newPath.startsWith("/") ? newPath : `/${newPath}`);
-      }
-    }
-  };
-
-  const handlePathKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter") {
-      handlePathSubmit();
-    } else if (e.key === "Escape") {
-      setIsEditingPath(false);
-    }
-  };
-
-  const breadcrumbs = useMemo(
-    () => getBreadcrumbs(currentPath, isLocalSession),
-    [currentPath, isLocalSession],
-  );
-
-  const { visibleBreadcrumbs, hiddenBreadcrumbs, needsBreadcrumbTruncation } =
-    useMemo(() => {
-      if (breadcrumbs.length <= maxVisibleBreadcrumbParts) {
-        return {
-          visibleBreadcrumbs: breadcrumbs.map((part, idx) => ({ part, originalIndex: idx })),
-          hiddenBreadcrumbs: [] as { part: string; originalIndex: number }[],
-          needsBreadcrumbTruncation: false,
-        };
-      }
-
-      const firstPart = [{ part: breadcrumbs[0], originalIndex: 0 }];
-      const lastPartsCount = maxVisibleBreadcrumbParts - 1;
-      const lastParts = breadcrumbs.slice(-lastPartsCount).map((part, idx) => ({
-        part,
-        originalIndex: breadcrumbs.length - lastPartsCount + idx,
-      }));
-      const hidden = breadcrumbs.slice(1, -lastPartsCount).map((part, idx) => ({
-        part,
-        originalIndex: idx + 1,
-      }));
-
-      return {
-        visibleBreadcrumbs: [...firstPart, ...lastParts],
-        hiddenBreadcrumbs: hidden,
-        needsBreadcrumbTruncation: true,
-      };
-    }, [breadcrumbs, maxVisibleBreadcrumbParts]);
-
-  const breadcrumbPathAtForIndex = useCallback(
-    (index: number) =>
-      breadcrumbPathAt(breadcrumbs, index, currentPath, isLocalSession),
-    [breadcrumbs, currentPath, isLocalSession],
-  );
-
-  const rootLabel = useMemo(
-    () =>
-      isLocalSession && isWindowsPath(currentPath)
-        ? getWindowsDrive(currentPath) ?? "C:"
-        : "/",
-    [currentPath, isLocalSession],
-  );
-
-  const rootPath = useMemo(
-    () => getRootPath(currentPath, isLocalSession),
-    [currentPath, isLocalSession],
-  );
-
-  return {
-    isEditingPath,
-    editingPathValue,
-    setEditingPathValue,
-    pathInputRef,
-    handlePathDoubleClick,
-    handlePathSubmit,
-    handlePathKeyDown,
-    breadcrumbs,
-    visibleBreadcrumbs,
-    hiddenBreadcrumbs,
-    needsBreadcrumbTruncation,
-    breadcrumbPathAtForIndex,
-    rootLabel,
-    rootPath,
-  };
-};

components/sftp-modal/hooks/useSftpModalPermissions.ts

@@ -1,189 +0,0 @@
-import { useCallback, useState } from "react";
-import type { RemoteFile } from "../../../types";
-import { toast } from "../../ui/toast";
-
-interface UseSftpModalPermissionsParams {
-  currentPath: string;
-  isLocalSession: boolean;
-  joinPath: (base: string, name: string) => string;
-  ensureSftp: () => Promise<string>;
-  loadFiles: (path: string, options?: { force?: boolean }) => Promise<void>;
-  chmodSftp: (sftpId: string, path: string, permissions: string) => Promise<void>;
-  statSftp: (sftpId: string, path: string) => Promise<{ permissions?: string }>;
-  t: (key: string, params?: Record<string, unknown>) => string;
-}
-
-interface PermissionsState {
-  owner: { read: boolean; write: boolean; execute: boolean };
-  group: { read: boolean; write: boolean; execute: boolean };
-  others: { read: boolean; write: boolean; execute: boolean };
-}
-
-interface UseSftpModalPermissionsResult {
-  showPermissionsDialog: boolean;
-  setShowPermissionsDialog: (open: boolean) => void;
-  permissionsTarget: RemoteFile | null;
-  permissions: PermissionsState;
-  isChangingPermissions: boolean;
-  openPermissionsDialog: (file: RemoteFile) => Promise<void>;
-  togglePermission: (role: "owner" | "group" | "others", perm: "read" | "write" | "execute") => void;
-  getOctalPermissions: () => string;
-  getSymbolicPermissions: () => string;
-  handleSavePermissions: () => Promise<void>;
-}
-
-export const useSftpModalPermissions = ({
-  currentPath,
-  isLocalSession,
-  joinPath,
-  ensureSftp,
-  loadFiles,
-  chmodSftp,
-  statSftp,
-  t,
-}: UseSftpModalPermissionsParams): UseSftpModalPermissionsResult => {
-  const [showPermissionsDialog, setShowPermissionsDialog] = useState(false);
-  const [permissionsTarget, setPermissionsTarget] = useState<RemoteFile | null>(null);
-  const [permissions, setPermissions] = useState<PermissionsState>({
-    owner: { read: false, write: false, execute: false },
-    group: { read: false, write: false, execute: false },
-    others: { read: false, write: false, execute: false },
-  });
-  const [isChangingPermissions, setIsChangingPermissions] = useState(false);
-
-  const parsePermissions = useCallback((perms: string | undefined) => {
-    const defaultPerms = {
-      owner: { read: false, write: false, execute: false },
-      group: { read: false, write: false, execute: false },
-      others: { read: false, write: false, execute: false },
-    };
-    if (!perms) return defaultPerms;
-
-    if (/^[0-7]{3,4}$/.test(perms)) {
-      const octal = perms.length === 4 ? perms.slice(1) : perms;
-      const ownerBits = parseInt(octal[0], 10);
-      const groupBits = parseInt(octal[1], 10);
-      const othersBits = parseInt(octal[2], 10);
-      return {
-        owner: {
-          read: (ownerBits & 4) !== 0,
-          write: (ownerBits & 2) !== 0,
-          execute: (ownerBits & 1) !== 0,
-        },
-        group: {
-          read: (groupBits & 4) !== 0,
-          write: (groupBits & 2) !== 0,
-          execute: (groupBits & 1) !== 0,
-        },
-        others: {
-          read: (othersBits & 4) !== 0,
-          write: (othersBits & 2) !== 0,
-          execute: (othersBits & 1) !== 0,
-        },
-      };
-    }
-
-    const pStr = perms.length === 10 ? perms.slice(1) : perms;
-    if (pStr.length >= 9) {
-      return {
-        owner: {
-          read: pStr[0] === "r",
-          write: pStr[1] === "w",
-          execute: pStr[2] === "x" || pStr[2] === "s",
-        },
-        group: {
-          read: pStr[3] === "r",
-          write: pStr[4] === "w",
-          execute: pStr[5] === "x" || pStr[5] === "s",
-        },
-        others: {
-          read: pStr[6] === "r",
-          write: pStr[7] === "w",
-          execute: pStr[8] === "x" || pStr[8] === "t",
-        },
-      };
-    }
-    return defaultPerms;
-  }, []);
-
-  const openPermissionsDialog = useCallback(async (file: RemoteFile) => {
-    if (isLocalSession) {
-      toast.error("Permissions not available for local files", "SFTP");
-      return;
-    }
-    setPermissionsTarget(file);
-
-    let permsStr = file.permissions;
-    try {
-      const fullPath = joinPath(currentPath, file.name);
-      const stat = await statSftp(await ensureSftp(), fullPath);
-      if (stat.permissions) {
-        permsStr = stat.permissions;
-      }
-    } catch (e) {
-      console.warn("Failed to fetch file permissions:", e);
-    }
-
-    setPermissions(parsePermissions(permsStr));
-    setShowPermissionsDialog(true);
-  }, [currentPath, ensureSftp, isLocalSession, joinPath, parsePermissions, statSftp]);
-
-  const togglePermission = useCallback(
-    (role: "owner" | "group" | "others", perm: "read" | "write" | "execute") => {
-      setPermissions((prev) => ({
-        ...prev,
-        [role]: { ...prev[role], [perm]: !prev[role][perm] },
-      }));
-    },
-    [],
-  );
-
-  const getOctalPermissions = useCallback(() => {
-    const getNum = (p: { read: boolean; write: boolean; execute: boolean }) =>
-      (p.read ? 4 : 0) + (p.write ? 2 : 0) + (p.execute ? 1 : 0);
-    return `${getNum(permissions.owner)}${getNum(permissions.group)}${getNum(permissions.others)}`;
-  }, [permissions]);
-
-  const getSymbolicPermissions = useCallback(() => {
-    const getSym = (p: { read: boolean; write: boolean; execute: boolean }) =>
-      `${p.read ? "r" : "-"}${p.write ? "w" : "-"}${p.execute ? "x" : "-"}`;
-    return (
-      getSym(permissions.owner) +
-      getSym(permissions.group) +
-      getSym(permissions.others)
-    );
-  }, [permissions]);
-
-  const handleSavePermissions = useCallback(async () => {
-    if (!permissionsTarget || isChangingPermissions) return;
-    setIsChangingPermissions(true);
-    try {
-      const fullPath = joinPath(currentPath, permissionsTarget.name);
-      await chmodSftp(await ensureSftp(), fullPath, getOctalPermissions());
-      setShowPermissionsDialog(false);
-      setPermissionsTarget(null);
-      await loadFiles(currentPath, { force: true });
-      toast.success(t("sftp.permissions.success"), "SFTP");
-    } catch (e) {
-      toast.error(
-        e instanceof Error ? e.message : t("sftp.permissions.failed"),
-        "SFTP",
-      );
-    } finally {
-      setIsChangingPermissions(false);
-    }
-  }, [chmodSftp, currentPath, ensureSftp, getOctalPermissions, isChangingPermissions, joinPath, loadFiles, permissionsTarget, t]);
-
-  return {
-    showPermissionsDialog,
-    setShowPermissionsDialog,
-    permissionsTarget,
-    permissions,
-    isChangingPermissions,
-    openPermissionsDialog,
-    togglePermission,
-    getOctalPermissions,
-    getSymbolicPermissions,
-    handleSavePermissions,
-  };
-};

components/sftp-modal/hooks/useSftpModalRename.ts

@@ -1,85 +0,0 @@
-import { useCallback, useState } from "react";
-import type { RemoteFile } from "../../../types";
-import { toast } from "../../ui/toast";
-
-interface UseSftpModalRenameParams {
-  currentPath: string;
-  isLocalSession: boolean;
-  joinPath: (base: string, name: string) => string;
-  ensureSftp: () => Promise<string>;
-  loadFiles: (path: string, options?: { force?: boolean }) => Promise<void>;
-  renameSftp: (sftpId: string, oldPath: string, newPath: string) => Promise<void>;
-  t: (key: string, params?: Record<string, unknown>) => string;
-}
-
-interface UseSftpModalRenameResult {
-  showRenameDialog: boolean;
-  setShowRenameDialog: (open: boolean) => void;
-  renameTarget: RemoteFile | null;
-  renameName: string;
-  setRenameName: (value: string) => void;
-  isRenaming: boolean;
-  openRenameDialog: (file: RemoteFile) => void;
-  handleRename: () => Promise<void>;
-}
-
-export const useSftpModalRename = ({
-  currentPath,
-  isLocalSession,
-  joinPath,
-  ensureSftp,
-  loadFiles,
-  renameSftp,
-  t,
-}: UseSftpModalRenameParams): UseSftpModalRenameResult => {
-  const [showRenameDialog, setShowRenameDialog] = useState(false);
-  const [renameTarget, setRenameTarget] = useState<RemoteFile | null>(null);
-  const [renameName, setRenameName] = useState("");
-  const [isRenaming, setIsRenaming] = useState(false);
-
-  const openRenameDialog = useCallback((file: RemoteFile) => {
-    setRenameTarget(file);
-    setRenameName(file.name);
-    setShowRenameDialog(true);
-  }, []);
-
-  const handleRename = useCallback(async () => {
-    if (!renameTarget || !renameName.trim() || isRenaming) return;
-    if (renameName.trim() === renameTarget.name) {
-      setShowRenameDialog(false);
-      return;
-    }
-    setIsRenaming(true);
-    try {
-      const oldPath = joinPath(currentPath, renameTarget.name);
-      const newPath = joinPath(currentPath, renameName.trim());
-      if (isLocalSession) {
-        toast.error("Local rename not implemented", "SFTP");
-      } else {
-        await renameSftp(await ensureSftp(), oldPath, newPath);
-      }
-      setShowRenameDialog(false);
-      setRenameTarget(null);
-      setRenameName("");
-      await loadFiles(currentPath, { force: true });
-    } catch (e) {
-      toast.error(
-        e instanceof Error ? e.message : t("sftp.error.renameFailed"),
-        "SFTP",
-      );
-    } finally {
-      setIsRenaming(false);
-    }
-  }, [currentPath, ensureSftp, isLocalSession, joinPath, loadFiles, renameName, renameSftp, renameTarget, t, isRenaming]);
-
-  return {
-    showRenameDialog,
-    setShowRenameDialog,
-    renameTarget,
-    renameName,
-    setRenameName,
-    isRenaming,
-    openRenameDialog,
-    handleRename,
-  };
-};

components/sftp-modal/hooks/useSftpModalSelection.ts

@@ -1,99 +0,0 @@
-import React, { useCallback, useRef } from "react";
-import type { RemoteFile } from "../../../types";
-
-interface UseSftpModalSelectionParams {
-  files: RemoteFile[];
-  setSelectedFiles: (value: Set<string> | ((prev: Set<string>) => Set<string>)) => void;
-  currentPath: string;
-  joinPath: (base: string, name: string) => string;
-  onNavigate: (path: string) => void;
-  onOpenFile: (file: RemoteFile) => void;
-  onNavigateUp: () => void;
-}
-
-interface UseSftpModalSelectionResult {
-  handleFileClick: (file: RemoteFile, index: number, e: React.MouseEvent) => void;
-  handleFileDoubleClick: (file: RemoteFile) => void;
-}
-
-export const useSftpModalSelection = ({
-  files,
-  setSelectedFiles,
-  currentPath,
-  joinPath,
-  onNavigate,
-  onOpenFile,
-  onNavigateUp,
-}: UseSftpModalSelectionParams): UseSftpModalSelectionResult => {
-  const lastSelectedIndexRef = useRef<number | null>(null);
-
-  const handleFileClick = useCallback(
-    (file: RemoteFile, index: number, e: React.MouseEvent) => {
-      if (file.name === "..") return;
-
-      if (file.type === "directory") {
-        if (e.shiftKey && lastSelectedIndexRef.current !== null) {
-          const start = Math.min(lastSelectedIndexRef.current, index);
-          const end = Math.max(lastSelectedIndexRef.current, index);
-          const newSelection = new Set<string>();
-          for (let i = start; i <= end; i++) {
-            if (files[i] && files[i].type !== "directory") {
-              newSelection.add(files[i].name);
-            }
-          }
-          setSelectedFiles(newSelection);
-        } else if (e.ctrlKey || e.metaKey) {
-          setSelectedFiles((prev) => {
-            const next = new Set(prev);
-            return next;
-          });
-        }
-        return;
-      }
-
-      if (e.shiftKey && lastSelectedIndexRef.current !== null) {
-        const start = Math.min(lastSelectedIndexRef.current, index);
-        const end = Math.max(lastSelectedIndexRef.current, index);
-        const newSelection = new Set<string>();
-        for (let i = start; i <= end; i++) {
-          if (files[i] && files[i].type !== "directory") {
-            newSelection.add(files[i].name);
-          }
-        }
-        setSelectedFiles(newSelection);
-      } else if (e.ctrlKey || e.metaKey) {
-        setSelectedFiles((prev) => {
-          const next = new Set(prev);
-          if (next.has(file.name)) {
-            next.delete(file.name);
-          } else {
-            next.add(file.name);
-          }
-          return next;
-        });
-        lastSelectedIndexRef.current = index;
-      } else {
-        setSelectedFiles(new Set([file.name]));
-        lastSelectedIndexRef.current = index;
-      }
-    },
-    [files, setSelectedFiles],
-  );
-
-  const handleFileDoubleClick = useCallback(
-    (file: RemoteFile) => {
-      if (file.name === "..") {
-        onNavigateUp();
-        return;
-      }
-      if (file.type === "directory" || (file.type === "symlink" && file.linkTarget === "directory")) {
-        onNavigate(joinPath(currentPath, file.name));
-      } else {
-        onOpenFile(file);
-      }
-    },
-    [currentPath, joinPath, onNavigate, onNavigateUp, onOpenFile],
-  );
-
-  return { handleFileClick, handleFileDoubleClick };
-};

components/sftp-modal/hooks/useSftpModalSession.ts

@@ -1,462 +0,0 @@
-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 {
-  open: boolean;
-  host: Host;
-  credentials: {
-    username?: string;
-    hostname: string;
-    port?: number;
-    password?: string;
-    privateKey?: string;
-    certificate?: string;
-    passphrase?: string;
-    publicKey?: string;
-    keyId?: string;
-    keySource?: "generated" | "imported";
-    proxy?: NetcattyProxyConfig;
-    jumpHosts?: NetcattyJumpHost[];
-    sftpSudo?: boolean;
-    legacyAlgorithms?: boolean;
-  };
-  initialPath?: string;
-  isLocalSession: boolean;
-  t: (key: string, params?: Record<string, unknown>) => string;
-  openSftp: (params: {
-    sessionId: string;
-    hostname: string;
-    username: string;
-    port: number;
-    password?: string;
-    privateKey?: string;
-    certificate?: string;
-    passphrase?: string;
-    publicKey?: string;
-    keyId?: string;
-    keySource?: "generated" | "imported";
-    proxy?: NetcattyProxyConfig;
-    jumpHosts?: NetcattyJumpHost[];
-    sudo?: boolean;
-    legacyAlgorithms?: boolean;
-  }) => Promise<string>;
-  closeSftp: (sftpId: string) => Promise<void>;
-  listSftp: (sftpId: string, path: string) => Promise<RemoteFile[]>;
-  listLocalDir: (path: string) => Promise<RemoteFile[]>;
-  getHomeDir: () => Promise<string | null>;
-  onClearSelection: () => void;
-}
-
-interface UseSftpModalSessionResult {
-  currentPath: string;
-  setCurrentPath: (path: string) => void;
-  currentPathRef: React.MutableRefObject<string>;
-  files: RemoteFile[];
-  setFiles: (files: RemoteFile[]) => void;
-  loading: boolean;
-  setLoading: (loading: boolean) => void;
-  reconnecting: boolean;
-  sessionVersion: number;
-  ensureSftp: () => Promise<string>;
-  loadFiles: (path: string, options?: { force?: boolean }) => Promise<void>;
-  closeSftpSession: () => Promise<void>;
-  localHomeRef: React.MutableRefObject<string | null>;
-}
-
-export const useSftpModalSession = ({
-  open,
-  host,
-  credentials,
-  initialPath,
-  isLocalSession,
-  t,
-  openSftp,
-  closeSftp,
-  listSftp,
-  listLocalDir,
-  getHomeDir,
-  onClearSelection,
-}: UseSftpModalSessionParams): UseSftpModalSessionResult => {
-  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 initializingRef = useRef(false);
-  const lastInitialPathRef = useRef<string | undefined>(undefined);
-  const localHomeRef = useRef<string | null>(null);
-
-  const reconnectingRef = useRef(false);
-  const reconnectAttemptsRef = useRef(0);
-  const MAX_RECONNECT_ATTEMPTS = 3;
-
-  const DIR_CACHE_TTL_MS = 10_000;
-  const dirCacheRef = useRef<
-    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}`,
-      hostname: credentials.hostname,
-      username: credentials.username || "root",
-      port: credentials.port || 22,
-      password: credentials.password,
-      privateKey: credentials.privateKey,
-      certificate: credentials.certificate,
-      passphrase: credentials.passphrase,
-      publicKey: credentials.publicKey,
-      keyId: credentials.keyId,
-      keySource: credentials.keySource,
-      proxy: credentials.proxy,
-      jumpHosts: credentials.jumpHosts,
-      sudo: credentials.sftpSudo,
-      legacyAlgorithms: credentials.legacyAlgorithms,
-    });
-    if (sftpIdRef.current !== sftpId) {
-      sftpIdRef.current = sftpId;
-      bumpSessionVersion();
-    }
-    return sftpId;
-  }, [
-    isLocalSession,
-    host.id,
-    credentials.hostname,
-    credentials.username,
-    credentials.port,
-    credentials.password,
-    credentials.privateKey,
-    credentials.certificate,
-    credentials.passphrase,
-    credentials.publicKey,
-    credentials.keyId,
-    credentials.keySource,
-    credentials.proxy,
-    credentials.jumpHosts,
-    credentials.sftpSudo,
-    credentials.legacyAlgorithms,
-    bumpSessionVersion,
-    openSftp,
-  ]);
-
-  const closeSftpSession = useCallback(async () => {
-    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(sftpIdToClose);
-      } catch {
-        // Silently ignore close errors - connection may already be closed
-      } finally {
-        if (closingPromiseRef.current === currentClosePromise) {
-          closingPromiseRef.current = null;
-        }
-      }
-    })();
-
-    closingPromiseRef.current = currentClosePromise;
-    await currentClosePromise;
-  }, [bumpSessionVersion, closeSftp, isLocalSession]);
-
-  // Use shared session-error classifier from errors.ts
-
-  const handleSessionError = useCallback(async () => {
-    if (reconnectingRef.current) return;
-    reconnectingRef.current = true;
-    setReconnecting(true);
-    reconnectAttemptsRef.current = 0;
-
-    while (reconnectAttemptsRef.current < MAX_RECONNECT_ATTEMPTS) {
-      try {
-        reconnectAttemptsRef.current += 1;
-        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(
-          `[SFTP] Reconnect attempt ${reconnectAttemptsRef.current} failed`,
-          err,
-        );
-        if (reconnectAttemptsRef.current >= MAX_RECONNECT_ATTEMPTS) {
-          reconnectingRef.current = false;
-          setReconnecting(false);
-          toast.error(t("sftp.error.reconnectFailed"), "SFTP");
-          return;
-        }
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-      }
-    }
-  }, [closeSftpSession, ensureSftp, listSftp, host.id, onClearSelection, t]);
-
-  const loadFiles = useCallback(
-    async (path: string, options?: { force?: boolean }) => {
-      const requestId = ++loadSeqRef.current;
-      setLoading(true);
-      onClearSelection();
-
-      try {
-        if (isLocalSession) {
-          const list = await listLocalDir(path);
-          if (requestId === loadSeqRef.current) {
-            setFiles(list);
-          }
-          return;
-        }
-
-        const cacheKey = `${host.id}::${path}`;
-        const cached = dirCacheRef.current.get(cacheKey);
-        const isFresh =
-          cached && Date.now() - cached.timestamp < DIR_CACHE_TTL_MS;
-        if (cached && isFresh && !options?.force) {
-          setFiles(cached.files);
-          return;
-        }
-
-        const sftpId = await ensureSftp();
-        const list = await listSftp(sftpId, path);
-        if (requestId !== loadSeqRef.current) return;
-        setFiles(list);
-        dirCacheRef.current.set(cacheKey, {
-          files: list,
-          timestamp: Date.now(),
-        });
-      } catch (e) {
-        if (!isLocalSession && isSessionError(e) && files.length > 0) {
-          logger.info("[SFTP] Session lost, attempting to reconnect...");
-          handleSessionError();
-          return;
-        }
-
-        logger.error("Failed to load files", e);
-        toast.error(
-          e instanceof Error ? e.message : t("sftp.error.loadFailed"),
-          "SFTP",
-        );
-        setFiles([]);
-      } finally {
-        if (loadSeqRef.current === requestId) {
-          setLoading(false);
-        }
-      }
-    },
-    [ensureSftp, host.id, isLocalSession, listLocalDir, listSftp, t, handleSessionError, files.length, onClearSelection],
-  );
-
-  useLayoutEffect(() => {
-    if (!open) return;
-    const cacheKey = `${host.id}::${currentPath}`;
-    const cached = dirCacheRef.current.get(cacheKey);
-    const isFresh = cached && Date.now() - cached.timestamp < DIR_CACHE_TTL_MS;
-    if (!isFresh) {
-      setFiles([]);
-      onClearSelection();
-    }
-  }, [currentPath, host.id, onClearSelection, open]);
-
-  useEffect(() => {
-    if (open) {
-      if (!initializedRef.current || lastInitialPathRef.current !== initialPath) {
-        initializedRef.current = true;
-        initializingRef.current = true;
-        lastInitialPathRef.current = initialPath;
-        onClearSelection();
-        setLoading(true);
-
-        if (isLocalSession) {
-          (async () => {
-            try {
-              const homePath = await getHomeDir();
-              localHomeRef.current = homePath ?? null;
-              const startPath = initialPath || homePath || "/";
-              try {
-                const list = await listLocalDir(startPath);
-                setCurrentPath(startPath);
-                setFiles(list);
-                dirCacheRef.current.set(`${host.id}::${startPath}`, {
-                  files: list,
-                  timestamp: Date.now(),
-                });
-              } catch (e) {
-                toast.error(
-                  e instanceof Error ? e.message : t("sftp.error.loadFailed"),
-                  "SFTP",
-                );
-              } finally {
-                setLoading(false);
-              }
-            } finally {
-              initializingRef.current = false;
-            }
-          })();
-          return;
-        }
-
-        (async () => {
-          try {
-            const homePath = await getHomeDir();
-            localHomeRef.current = homePath ?? null;
-            if (initialPath) {
-              try {
-                const sftpId = await ensureSftp();
-                const list = await listSftp(sftpId, initialPath);
-                setCurrentPath(initialPath);
-                setFiles(list);
-                dirCacheRef.current.set(`${host.id}::${initialPath}`, {
-                  files: list,
-                  timestamp: Date.now(),
-                });
-                setLoading(false);
-                return;
-              } catch {
-                logger.warn(
-                  `[SFTP] Initial path ${initialPath} not accessible, falling back to home`,
-                );
-              }
-            }
-
-            try {
-              const sftpId = await ensureSftp();
-              const list = await listSftp(sftpId, homePath || "/");
-              setCurrentPath(homePath || "/");
-              setFiles(list);
-              dirCacheRef.current.set(`${host.id}::${homePath || "/"}`, {
-                files: list,
-                timestamp: Date.now(),
-              });
-              setLoading(false);
-            } catch {
-              logger.warn(`[SFTP] Home ${homePath} not accessible, using /`);
-              try {
-                const sftpId = await ensureSftp();
-                const list = await listSftp(sftpId, "/");
-                setCurrentPath("/");
-                setFiles(list);
-                dirCacheRef.current.set(`${host.id}::/`, {
-                  files: list,
-                  timestamp: Date.now(),
-                });
-              } catch (e) {
-                logger.error("[SFTP] Failed to load root directory", e);
-                toast.error(t("sftp.error.loadFailed"), "SFTP");
-              } finally {
-                setLoading(false);
-              }
-            }
-          } finally {
-            initializingRef.current = false;
-          }
-        })();
-        return;
-      }
-      // Skip redundant loadFiles while async initialization is still in flight.
-      // Without this guard, dependency changes (e.g. loadFiles recreation from
-      // files.length change) can re-trigger this effect and call loadFiles with
-      // the stale currentPath before the initialization IIFE has resolved and
-      // updated currentPathRef — causing uploads to target the wrong directory.
-      if (!initializingRef.current) {
-        void loadFiles(currentPath);
-      }
-    } else {
-      loadSeqRef.current += 1;
-      initializedRef.current = false;
-      initializingRef.current = false;
-    }
-  }, [
-    closeSftpSession,
-    currentPath,
-    ensureSftp,
-    getHomeDir,
-    host.id,
-    initialPath,
-    isLocalSession,
-    listLocalDir,
-    listSftp,
-    loadFiles,
-    onClearSelection,
-    open,
-    setCurrentPath,
-    t,
-  ]);
-
-  useEffect(() => {
-    return () => {
-      void closeSftpSession();
-    };
-  }, [closeSftpSession]);
-
-  return {
-    currentPath,
-    setCurrentPath,
-    currentPathRef,
-    files,
-    setFiles,
-    loading,
-    setLoading,
-    reconnecting,
-    sessionVersion,
-    ensureSftp,
-    loadFiles,
-    closeSftpSession,
-    localHomeRef,
-  };
-};

components/sftp-modal/hooks/useSftpModalSorting.ts

@@ -1,76 +0,0 @@
-import React, { useCallback, useRef, useState } from "react";
-
-export type SortField = "name" | "size" | "modified";
-export type SortOrder = "asc" | "desc";
-
-interface UseSftpModalSortingResult {
-  sortField: SortField;
-  sortOrder: SortOrder;
-  columnWidths: { name: number; size: number; modified: number; actions: number };
-  handleSort: (field: SortField) => void;
-  handleResizeStart: (field: string, e: React.MouseEvent) => void;
-}
-
-export const useSftpModalSorting = (): UseSftpModalSortingResult => {
-  const [sortField, setSortField] = useState<SortField>("name");
-  const [sortOrder, setSortOrder] = useState<SortOrder>("asc");
-  const [columnWidths, setColumnWidths] = useState({
-    name: 45,
-    size: 15,
-    modified: 25,
-    actions: 15,
-  });
-
-  const resizingRef = useRef<{
-    field: string;
-    startX: number;
-    startWidth: number;
-  } | null>(null);
-
-  const handleSort = (field: SortField) => {
-    if (sortField === field) {
-      setSortOrder((prev) => (prev === "asc" ? "desc" : "asc"));
-    } else {
-      setSortField(field);
-      setSortOrder("asc");
-    }
-  };
-
-  const handleResizeMove = useCallback((e: MouseEvent) => {
-    if (!resizingRef.current) return;
-    const diff = e.clientX - resizingRef.current.startX;
-    const newWidth = Math.max(
-      10,
-      Math.min(60, resizingRef.current.startWidth + diff / 5),
-    );
-    setColumnWidths((prev) => ({
-      ...prev,
-      [resizingRef.current!.field]: newWidth,
-    }));
-  }, []);
-
-  const handleResizeEnd = useCallback(() => {
-    resizingRef.current = null;
-    document.removeEventListener("mousemove", handleResizeMove);
-    document.removeEventListener("mouseup", handleResizeEnd);
-  }, [handleResizeMove]);
-
-  const handleResizeStart = (field: string, e: React.MouseEvent) => {
-    e.preventDefault();
-    resizingRef.current = {
-      field,
-      startX: e.clientX,
-      startWidth: columnWidths[field as keyof typeof columnWidths],
-    };
-    document.addEventListener("mousemove", handleResizeMove);
-    document.addEventListener("mouseup", handleResizeEnd);
-  };
-
-  return {
-    sortField,
-    sortOrder,
-    columnWidths,
-    handleSort,
-    handleResizeStart,
-  };
-};

components/sftp-modal/hooks/useSftpModalTextEditor.ts

@@ -1,87 +0,0 @@
-import { useCallback, useState } from "react";
-import type { RemoteFile } from "../../../types";
-import { toast } from "../../ui/toast";
-
-interface UseSftpModalTextEditorParams {
-  currentPath: string;
-  isLocalSession: boolean;
-  joinPath: (base: string, name: string) => string;
-  ensureSftp: () => Promise<string>;
-  readLocalFile: (path: string) => Promise<ArrayBuffer>;
-  readSftp: (sftpId: string, path: string) => Promise<string>;
-  writeLocalFile: (path: string, data: ArrayBuffer) => Promise<void>;
-  writeSftp: (sftpId: string, path: string, data: string) => Promise<void>;
-  t: (key: string, params?: Record<string, unknown>) => string;
-}
-
-interface UseSftpModalTextEditorResult {
-  showTextEditor: boolean;
-  setShowTextEditor: (open: boolean) => void;
-  textEditorTarget: RemoteFile | null;
-  setTextEditorTarget: (target: RemoteFile | null) => void;
-  textEditorContent: string;
-  setTextEditorContent: (value: string) => void;
-  loadingTextContent: boolean;
-  handleEditFile: (file: RemoteFile) => Promise<void>;
-  handleSaveTextFile: (content: string) => Promise<void>;
-}
-
-export const useSftpModalTextEditor = ({
-  currentPath,
-  isLocalSession,
-  joinPath,
-  ensureSftp,
-  readLocalFile,
-  readSftp,
-  writeLocalFile,
-  writeSftp,
-  t,
-}: UseSftpModalTextEditorParams): UseSftpModalTextEditorResult => {
-  const [showTextEditor, setShowTextEditor] = useState(false);
-  const [textEditorTarget, setTextEditorTarget] = useState<RemoteFile | null>(null);
-  const [textEditorContent, setTextEditorContent] = useState("");
-  const [loadingTextContent, setLoadingTextContent] = useState(false);
-
-  const handleEditFile = useCallback(async (file: RemoteFile) => {
-    try {
-      setLoadingTextContent(true);
-      setTextEditorTarget(file);
-      const fullPath = joinPath(currentPath, file.name);
-      const content = isLocalSession
-        ? await readLocalFile(fullPath).then((buf) => new TextDecoder().decode(buf))
-        : await readSftp(await ensureSftp(), fullPath);
-      setTextEditorContent(content);
-      setShowTextEditor(true);
-    } catch (e) {
-      toast.error(
-        e instanceof Error ? e.message : t("sftp.error.loadFailed"),
-        "SFTP",
-      );
-    } finally {
-      setLoadingTextContent(false);
-    }
-  }, [currentPath, ensureSftp, isLocalSession, joinPath, readLocalFile, readSftp, t]);
-
-  const handleSaveTextFile = useCallback(async (content: string) => {
-    if (!textEditorTarget) return;
-    const fullPath = joinPath(currentPath, textEditorTarget.name);
-    if (isLocalSession) {
-      const encoder = new TextEncoder();
-      await writeLocalFile(fullPath, encoder.encode(content).buffer);
-    } else {
-      await writeSftp(await ensureSftp(), fullPath, content);
-    }
-  }, [currentPath, ensureSftp, isLocalSession, joinPath, textEditorTarget, writeLocalFile, writeSftp]);
-
-  return {
-    showTextEditor,
-    setShowTextEditor,
-    textEditorTarget,
-    setTextEditorTarget,
-    textEditorContent,
-    setTextEditorContent,
-    loadingTextContent,
-    handleEditFile,
-    handleSaveTextFile,
-  };
-};

components/sftp-modal/hooks/useSftpModalVirtualList.ts

@@ -1,123 +0,0 @@
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import type { RemoteFile } from "../../../types";
-
-interface UseSftpModalVirtualListParams {
-  open: boolean;
-  sortedFiles: RemoteFile[];
-}
-
-interface UseSftpModalVirtualListResult {
-  fileListRef: React.RefObject<HTMLDivElement>;
-  rowHeight: number;
-  handleFileListScroll: (e: React.UIEvent<HTMLDivElement>) => void;
-  shouldVirtualize: boolean;
-  totalHeight: number;
-  visibleRows: { file: RemoteFile; index: number; top: number }[];
-}
-
-export const useSftpModalVirtualList = ({
-  open,
-  sortedFiles,
-}: UseSftpModalVirtualListParams): UseSftpModalVirtualListResult => {
-  const fileListRef = useRef<HTMLDivElement>(null);
-  const scrollFrameRef = useRef<number | null>(null);
-  const [scrollTop, setScrollTop] = useState(0);
-  const [viewportHeight, setViewportHeight] = useState(0);
-  const [rowHeight, setRowHeight] = useState(40);
-
-  useLayoutEffect(() => {
-    const container = fileListRef.current;
-    if (!container || !open) return;
-    const update = () => setViewportHeight(container.clientHeight);
-    update();
-    const raf = window.requestAnimationFrame(update);
-    const resizeObserver = new ResizeObserver(update);
-    resizeObserver.observe(container);
-    return () => {
-      resizeObserver.disconnect();
-      window.cancelAnimationFrame(raf);
-    };
-  }, [open, sortedFiles.length]);
-
-  useLayoutEffect(() => {
-    const container = fileListRef.current;
-    if (!container || !open || sortedFiles.length === 0) return;
-    const raf = window.requestAnimationFrame(() => {
-      const rowElement = container.querySelector(
-        '[data-sftp-modal-row="true"]',
-      ) as HTMLElement | null;
-      if (!rowElement) return;
-      const nextHeight = Math.round(rowElement.getBoundingClientRect().height);
-      if (nextHeight && Math.abs(nextHeight - rowHeight) > 1) {
-        setRowHeight(nextHeight);
-      }
-    });
-    return () => window.cancelAnimationFrame(raf);
-  }, [open, rowHeight, sortedFiles.length]);
-
-  useEffect(() => {
-    return () => {
-      if (scrollFrameRef.current !== null) {
-        window.cancelAnimationFrame(scrollFrameRef.current);
-      }
-    };
-  }, []);
-
-  const handleFileListScroll = useCallback(
-    (e: React.UIEvent<HTMLDivElement>) => {
-      const nextTop = e.currentTarget.scrollTop;
-      if (scrollFrameRef.current !== null) return;
-      scrollFrameRef.current = window.requestAnimationFrame(() => {
-        scrollFrameRef.current = null;
-        setScrollTop(nextTop);
-      });
-    },
-    [],
-  );
-
-  const { shouldVirtualize, totalHeight, visibleRows } = useMemo(() => {
-    const overscan = 6;
-    const canVirtualize = open && viewportHeight > 0 && rowHeight > 0;
-    const shouldVirtualizeLocal = canVirtualize && sortedFiles.length > 50;
-    const totalHeightLocal = shouldVirtualizeLocal
-      ? sortedFiles.length * rowHeight
-      : 0;
-    const startIndex = shouldVirtualizeLocal
-      ? Math.max(0, Math.floor(scrollTop / rowHeight) - overscan)
-      : 0;
-    const endIndex = shouldVirtualizeLocal
-      ? Math.min(
-        sortedFiles.length - 1,
-        Math.ceil((scrollTop + viewportHeight) / rowHeight) + overscan,
-      )
-      : sortedFiles.length - 1;
-    const visibleRowsLocal = shouldVirtualizeLocal
-      ? sortedFiles
-        .slice(startIndex, endIndex + 1)
-        .map((file, idx) => ({
-          file,
-          index: startIndex + idx,
-          top: (startIndex + idx) * rowHeight,
-        }))
-      : sortedFiles.map((file, index) => ({
-        file,
-        index,
-        top: 0,
-      }));
-
-    return {
-      shouldVirtualize: shouldVirtualizeLocal,
-      totalHeight: totalHeightLocal,
-      visibleRows: visibleRowsLocal,
-    };
-  }, [open, rowHeight, scrollTop, sortedFiles, viewportHeight]);
-
-  return {
-    fileListRef,
-    rowHeight,
-    handleFileListScroll,
-    shouldVirtualize,
-    totalHeight,
-    visibleRows,
-  };
-};

components/sftp-modal/pathUtils.ts

@@ -1,83 +0,0 @@
-export const isWindowsPath = (path: string): boolean => /^[A-Za-z]:/.test(path);
-
-export const normalizeWindowsRoot = (path: string): string => {
-  const normalized = path.replace(/\//g, "\\");
-  if (/^[A-Za-z]:\\$/.test(normalized)) return normalized;
-  if (/^[A-Za-z]:$/.test(normalized)) return `${normalized}\\`;
-  return normalized;
-};
-
-export const joinPath = (base: string, name: string, isLocalSession: boolean): string => {
-  if (isLocalSession && isWindowsPath(base)) {
-    const normalizedBase = normalizeWindowsRoot(base).replace(/[\\/]+$/, "");
-    return `${normalizedBase}\\${name}`;
-  }
-  if (base === "/") return `/${name}`;
-  return `${base}/${name}`;
-};
-
-export const isRootPath = (path: string, isLocalSession: boolean): boolean => {
-  if (isLocalSession && isWindowsPath(path)) {
-    return /^[A-Za-z]:\\?$/.test(path.replace(/\//g, "\\"));
-  }
-  return path === "/";
-};
-
-export const getParentPath = (path: string, isLocalSession: boolean): string => {
-  if (isLocalSession && isWindowsPath(path)) {
-    const normalized = normalizeWindowsRoot(path).replace(/[\\]+$/, "");
-    const drive = normalized.slice(0, 2);
-    if (/^[A-Za-z]:$/.test(normalized) || /^[A-Za-z]:\\$/.test(normalized)) {
-      return `${drive}\\`;
-    }
-    const rest = normalized.slice(2).replace(/^[\\]+/, "");
-    const parts = rest ? rest.split(/[\\]+/).filter(Boolean) : [];
-    if (parts.length <= 1) return `${drive}\\`;
-    parts.pop();
-    return `${drive}\\${parts.join("\\")}`;
-  }
-  if (path === "/") return "/";
-  const parts = path.split("/").filter(Boolean);
-  parts.pop();
-  return parts.length ? `/${parts.join("/")}` : "/";
-};
-
-export const getRootPath = (path: string, isLocalSession: boolean): string => {
-  if (isLocalSession && isWindowsPath(path)) {
-    const drive = path.replace(/\//g, "\\").slice(0, 2);
-    return `${drive}\\`;
-  }
-  return "/";
-};
-
-export const getWindowsDrive = (path: string): string | null => {
-  if (!isWindowsPath(path)) return null;
-  const normalized = path.replace(/\//g, "\\");
-  return /^[A-Za-z]:/.test(normalized) ? normalized.slice(0, 2) : null;
-};
-
-export const getBreadcrumbs = (path: string, isLocalSession: boolean): string[] => {
-  if (isLocalSession && isWindowsPath(path)) {
-    const normalized = normalizeWindowsRoot(path).replace(/[\\]+$/, "");
-    const rest = normalized.slice(2).replace(/^[\\]+/, "");
-    const parts = rest ? rest.split(/[\\]+/).filter(Boolean) : [];
-    return parts;
-  }
-  return path === "/" ? [] : path.split("/").filter(Boolean);
-};
-
-export const breadcrumbPathAt = (
-  breadcrumbs: string[],
-  idx: number,
-  currentPath: string,
-  isLocalSession: boolean,
-): string => {
-  if (isLocalSession) {
-    const drive = getWindowsDrive(currentPath);
-    if (drive) {
-      const rest = breadcrumbs.slice(0, idx + 1).join("\\");
-      return rest ? `${drive}\\${rest}` : `${drive}\\`;
-    }
-  }
-  return "/" + breadcrumbs.slice(0, idx + 1).join("/");
-};

components/sftp-modal/utils.ts

@@ -1,16 +0,0 @@
-export const formatBytes = (bytes: number | string): string => {
-  const numBytes = typeof bytes === "string" ? parseInt(bytes, 10) : bytes;
-  if (isNaN(numBytes) || numBytes === 0) return "0 B";
-  const units = ["B", "KB", "MB", "GB", "TB"];
-  const i = Math.floor(Math.log(numBytes) / Math.log(1024));
-  const size = numBytes / Math.pow(1024, i);
-  return `${size.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
-};
-
-export const formatDate = (dateStr: string | number | undefined): string => {
-  if (!dateStr) return "--";
-  const date = typeof dateStr === "number" ? new Date(dateStr) : new Date(dateStr);
-  if (isNaN(date.getTime())) return String(dateStr);
-  const pad = (value: number) => value.toString().padStart(2, "0");
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
-};

components/sftp/SftpPaneFileList.tsx

@@ -151,7 +151,8 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
                 {t("sftp.context.edit")}
               </ContextMenuItem>
             )}
-            {!isNavigableDirectory(entry) && onDownloadFile && (
+            {onDownloadFile &&
+              (!isNavigableDirectory(entry) || !pane.connection?.isLocal) && (
               <ContextMenuItem onClick={() => onDownloadFile(entry)}>
                 <Download size={14} className="mr-2" />{" "}
                 {t("sftp.context.download")}

components/sftp/SftpTransferItem.tsx

@@ -13,6 +13,7 @@ import {
 } from 'lucide-react';
 import React, { memo } from 'react';
 import { getParentPath } from '../../application/state/sftp/utils';
+import { useI18n } from '../../application/i18n/I18nProvider';
 import { cn } from '../../lib/utils';
 import { TransferTask } from '../../types';
 import { Button } from '../ui/button';
@@ -35,6 +36,8 @@ const SftpTransferItemInner: React.FC<SftpTransferItemProps> = ({
     canRevealTarget = false,
     onRevealTarget,
 }) => {
+    const { t } = useI18n();
+    const hasKnownTotal = task.totalBytes > 0;
     const progress = task.totalBytes > 0 ? Math.min((task.transferredBytes / task.totalBytes) * 100, 100) : 0;
 
     // Calculate remaining time from backend-reported sliding-window speed
@@ -42,7 +45,7 @@ const SftpTransferItemInner: React.FC<SftpTransferItemProps> = ({
     const effectiveSpeed = task.status === 'transferring'
         ? (Number.isFinite(task.speed) && task.speed > 0 ? task.speed : 0)
         : 0;
-    const remainingTime = effectiveSpeed > 0
+    const remainingTime = hasKnownTotal && effectiveSpeed > 0
         ? Math.ceil(remainingBytes / effectiveSpeed)
         : 0;
     const remainingFormatted = remainingTime > 60
@@ -54,6 +57,8 @@ const SftpTransferItemInner: React.FC<SftpTransferItemProps> = ({
     // Format bytes transferred / total
     const bytesDisplay = task.status === 'transferring' && task.totalBytes > 0
         ? `${formatTransferBytes(task.transferredBytes)} / ${formatTransferBytes(task.totalBytes)}`
+        : task.status === 'transferring'
+            ? formatTransferBytes(task.transferredBytes)
         : task.status === 'completed' && task.totalBytes > 0
             ? formatTransferBytes(task.totalBytes)
             : '';
@@ -99,12 +104,14 @@ const SftpTransferItemInner: React.FC<SftpTransferItemProps> = ({
                             <div
                                 className={cn(
                                     "h-full rounded-full relative overflow-hidden",
-                                    task.status === 'pending'
+                                    task.status === 'pending' || (task.status === 'transferring' && !hasKnownTotal)
                                         ? "bg-muted-foreground/50 animate-pulse"
                                         : "bg-gradient-to-r from-primary via-primary/90 to-primary"
                                 )}
                                 style={{
-                                    width: task.status === 'pending' ? '100%' : `${progress}%`,
+                                    width: task.status === 'pending' || (task.status === 'transferring' && !hasKnownTotal)
+                                        ? '100%'
+                                        : `${progress}%`,
                                     transition: 'width 150ms ease-out'
                                 }}
                             >
@@ -121,7 +128,11 @@ const SftpTransferItemInner: React.FC<SftpTransferItemProps> = ({
                             </div>
                         </div>
                         <span className="text-[10px] text-muted-foreground shrink-0 min-w-[34px] text-right font-mono">
-                            {task.status === 'pending' ? 'waiting...' : `${Math.round(progress)}%`}
+                            {task.status === 'pending'
+                                ? 'waiting...'
+                                : hasKnownTotal
+                                    ? `${Math.round(progress)}%`
+                                    : '...'}
                         </span>
                     </div>
                 )}
@@ -130,6 +141,11 @@ const SftpTransferItemInner: React.FC<SftpTransferItemProps> = ({
                         {bytesDisplay}
                     </div>
                 )}
+                {task.status === 'transferring' && !hasKnownTotal && (
+                    <div className="text-[9px] text-muted-foreground mt-0.5">
+                        {t('sftp.transfers.calculatingTotal')}
+                    </div>
+                )}
                 {task.status === 'completed' && bytesDisplay && (
                     <div className="text-[9px] text-green-600 mt-0.5">
                         Completed - {bytesDisplay}
@@ -196,10 +212,13 @@ const arePropsEqual = (
     // Always re-render on fileName change
     if (prev.fileName !== next.fileName) return false;
     if (prev.targetPath !== next.targetPath) return false;
+    if (prev.totalBytes !== next.totalBytes) return false;
     if ((prevProps.canRevealTarget ?? false) !== (nextProps.canRevealTarget ?? false)) return false;
 
     // For transferring status, allow frequent re-renders for smooth progress bar
     if (next.status === 'transferring') {
+        if (next.totalBytes <= 0 && prev.transferredBytes !== next.transferredBytes) return false;
+
         // 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;

components/sftp/hooks/useSftpViewFileOps.ts

@@ -1,6 +1,7 @@
 import React, { useCallback, useState } from "react";
 import type { MutableRefObject } from "react";
-import type { SftpFileEntry } from "../../../types";
+import type { RemoteFile, SftpFileEntry, SftpFilenameEncoding } from "../../../types";
+import { joinPath as joinFsPath } from "../../../application/state/sftp/utils";
 import type { SftpStateApi } from "../../../application/state/useSftpState";
 import { logger } from "../../../lib/logger";
 import { toast } from "../../ui/toast";
@@ -20,7 +21,11 @@ interface UseSftpViewFileOpsParams {
     systemApp?: SystemAppInfo,
   ) => void;
   t: (key: string, vars?: Record<string, string | number>) => string;
+  listSftp?: (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => Promise<RemoteFile[]>;
+  mkdirLocal?: (path: string) => Promise<unknown>;
+  deleteLocalFile?: (path: string) => Promise<unknown>;
   showSaveDialog?: (defaultPath: string, filters?: Array<{ name: string; extensions: string[] }>) => Promise<string | null>;
+  selectDirectory?: (title?: string, defaultPath?: string) => Promise<string | null>;
   startStreamTransfer?: (
     options: {
       transferId: string;
@@ -31,6 +36,8 @@ interface UseSftpViewFileOpsParams {
       sourceSftpId?: string;
       targetSftpId?: string;
       totalBytes?: number;
+      sourceEncoding?: SftpFilenameEncoding;
+      targetEncoding?: SftpFilenameEncoding;
     },
     onProgress?: (transferred: number, total: number, speed: number) => void,
     onComplete?: () => void,
@@ -105,7 +112,11 @@ export const useSftpViewFileOps = ({
   getOpenerForFileRef,
   setOpenerForExtension,
   t,
+  listSftp,
+  mkdirLocal,
+  deleteLocalFile,
   showSaveDialog,
+  selectDirectory,
   startStreamTransfer,
   getSftpIdForConnection,
 }: UseSftpViewFileOpsParams): UseSftpViewFileOpsResult => {
@@ -363,10 +374,16 @@ export const useSftpViewFileOps = ({
       if (!pane.connection) return;
 
       const fullPath = sftpRef.current.joinPath(pane.connection.currentPath, file.name);
+      const isDirectory = isNavigableDirectory(file);
 
       try {
-        // For local files, use blob download
+        // For local files, use blob download.
         if (pane.connection.isLocal) {
+          if (isDirectory) {
+            toast.error(t("sftp.error.downloadFailed"), "SFTP");
+            return;
+          }
+
           const content = await sftpRef.current.readBinaryFile(side, fullPath);
 
           const blob = new Blob([content], { type: "application/octet-stream" });
@@ -383,7 +400,7 @@ export const useSftpViewFileOps = ({
           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 || !getSftpIdForConnection) {
           toast.error(t("sftp.error.downloadFailed"), "SFTP");
           return;
@@ -394,6 +411,413 @@ export const useSftpViewFileOps = ({
           throw new Error("SFTP session not found");
         }
 
+        if (isDirectory) {
+          if (!listSftp || !mkdirLocal || !selectDirectory) {
+            toast.error(t("sftp.error.downloadFailed"), "SFTP");
+            return;
+          }
+
+          const selectedDirectory = await selectDirectory(t("sftp.context.download"));
+          if (!selectedDirectory) return;
+
+          const targetPath = joinFsPath(selectedDirectory, file.name);
+
+          const transferId = `download-dir-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+          let completedBytes = 0;
+          const MAX_SYMLINK_DEPTH = 32;
+          const DIRECTORY_DOWNLOAD_MAX_CONCURRENCY = 10;
+          const activeChildTransferIds = new Set<string>();
+          const activeFileProgress = new Map<string, { transferred: number; speed: number }>();
+          const activeFileSizes = new Map<string, number>();
+          const visitedPaths = new Set<string>();
+          const directoryTaskQueue: Array<{
+            type: "directory";
+            remotePath: string;
+            localPath: string;
+            symlinkDepth: number;
+          }> = [];
+          const fileTaskQueue: Array<{
+            type: "file";
+            remotePath: string;
+            localPath: string;
+            size: number;
+          }> = [];
+          let pendingDirectoryTasks = 0;
+          let discoveredTotalBytes = 0;
+          let estimatedTotalBytes = 0;
+          let activeQueueTasks = 0;
+
+          const isTaskCancelled = () =>
+            sftpRef.current.transfers.some(
+              (task) => task.id === transferId && task.status === "cancelled",
+            );
+
+          const updateAggregateProgress = () => {
+            let activeTransferredBytes = 0;
+            let activeSpeed = 0;
+
+            for (const progress of activeFileProgress.values()) {
+              activeTransferredBytes += progress.transferred;
+              activeSpeed += progress.speed;
+            }
+
+            sftpRef.current.updateExternalUpload(transferId, {
+              fileName: pendingDirectoryTasks > 0 ? `${file.name} (${t("sftp.upload.scanning")})` : file.name,
+              transferredBytes: completedBytes + activeTransferredBytes,
+              totalBytes: estimatedTotalBytes > 0 ? estimatedTotalBytes : 0,
+              speed: activeSpeed,
+            });
+          };
+
+          const cancelActiveChildTransfers = async () => {
+            await Promise.all(
+              Array.from(activeChildTransferIds).map((childTransferId) =>
+                sftpRef.current.cancelTransfer(childTransferId).catch(() => undefined),
+              ),
+            );
+          };
+
+          const maybeFinalizeDiscovery = () => {
+            if (pendingDirectoryTasks === 0) {
+              estimatedTotalBytes = discoveredTotalBytes;
+              updateAggregateProgress();
+            }
+          };
+
+          const getDynamicConcurrencyLimit = () => {
+            let largeFiles = 0;
+            let mediumFiles = 0;
+
+            for (const size of activeFileSizes.values()) {
+              if (size >= 32 * 1024 * 1024) largeFiles += 1;
+              else if (size >= 1 * 1024 * 1024) mediumFiles += 1;
+            }
+
+            if (largeFiles > 0) return 2;
+            if (mediumFiles >= 2) return 4;
+            if (mediumFiles === 1) return 5;
+            return DIRECTORY_DOWNLOAD_MAX_CONCURRENCY;
+          };
+
+          const enqueueDirectoryTask = (task: {
+            type: "directory";
+            remotePath: string;
+            localPath: string;
+            symlinkDepth: number;
+          }) => {
+            directoryTaskQueue.push(task);
+          };
+
+          const enqueueFileTask = (task: {
+            type: "file";
+            remotePath: string;
+            localPath: string;
+            size: number;
+          }) => {
+            const insertIndex = fileTaskQueue.findIndex((queuedTask) => queuedTask.size > task.size);
+            if (insertIndex === -1) {
+              fileTaskQueue.push(task);
+            } else {
+              fileTaskQueue.splice(insertIndex, 0, task);
+            }
+          };
+
+          const dequeueTask = () => {
+            if (pendingDirectoryTasks > 0 && directoryTaskQueue.length > 0) {
+              return directoryTaskQueue.shift() ?? null;
+            }
+            if (fileTaskQueue.length > 0) return fileTaskQueue.shift() ?? null;
+            if (directoryTaskQueue.length > 0) return directoryTaskQueue.shift() ?? null;
+            return null;
+          };
+
+          const processFileTask = async (task: {
+            type: "file";
+            remotePath: string;
+            localPath: string;
+            size: number;
+          }) => {
+            const childTransferId = `download-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+            activeChildTransferIds.add(childTransferId);
+            activeFileSizes.set(childTransferId, task.size);
+            activeFileProgress.set(childTransferId, { transferred: 0, speed: 0 });
+            updateAggregateProgress();
+
+            try {
+              await new Promise<void>((resolve, reject) => {
+                startStreamTransfer(
+                  {
+                    transferId: childTransferId,
+                    sourcePath: task.remotePath,
+                    targetPath: task.localPath,
+                    sourceType: "sftp",
+                    targetType: "local",
+                    sourceSftpId: sftpId,
+                    totalBytes: task.size,
+                    sourceEncoding: pane.filenameEncoding,
+                  },
+                  (transferred, _total, speed) => {
+                    if (isTaskCancelled()) {
+                      sftpRef.current.cancelTransfer(childTransferId).catch(() => undefined);
+                      return;
+                    }
+
+                    activeFileProgress.set(childTransferId, {
+                      transferred,
+                      speed: Number.isFinite(speed) && speed > 0 ? speed : 0,
+                    });
+                    updateAggregateProgress();
+                  },
+                  () => {
+                    completedBytes += task.size;
+                    activeChildTransferIds.delete(childTransferId);
+                    activeFileSizes.delete(childTransferId);
+                    activeFileProgress.delete(childTransferId);
+                    updateAggregateProgress();
+                    resolve();
+                  },
+                  (error) => {
+                    activeChildTransferIds.delete(childTransferId);
+                    activeFileSizes.delete(childTransferId);
+                    activeFileProgress.delete(childTransferId);
+                    updateAggregateProgress();
+                    reject(new Error(error));
+                  },
+                )
+                  .then((result) => {
+                    if (result === undefined) {
+                      activeChildTransferIds.delete(childTransferId);
+                      activeFileSizes.delete(childTransferId);
+                      activeFileProgress.delete(childTransferId);
+                      updateAggregateProgress();
+                      reject(new Error("Stream transfer unavailable"));
+                    } else if (result.error) {
+                      activeChildTransferIds.delete(childTransferId);
+                      activeFileSizes.delete(childTransferId);
+                      activeFileProgress.delete(childTransferId);
+                      updateAggregateProgress();
+                      reject(new Error(result.error));
+                    }
+                  })
+                  .catch(reject);
+              });
+            } finally {
+              activeChildTransferIds.delete(childTransferId);
+              activeFileSizes.delete(childTransferId);
+              activeFileProgress.delete(childTransferId);
+            }
+          };
+
+          const processDirectoryTask = async (task: {
+            type: "directory";
+            remotePath: string;
+            localPath: string;
+            symlinkDepth: number;
+          }) => {
+            if (visitedPaths.has(task.remotePath)) {
+              pendingDirectoryTasks -= 1;
+              maybeFinalizeDiscovery();
+              return;
+            }
+
+            visitedPaths.add(task.remotePath);
+
+            if (isTaskCancelled()) {
+              throw new Error("Transfer cancelled");
+            }
+
+            const entries = await listSftp(sftpId, task.remotePath, pane.filenameEncoding);
+
+            for (const entry of entries) {
+              if (entry.name === ".." || entry.name === ".") continue;
+
+              if (isTaskCancelled()) {
+                await cancelActiveChildTransfers();
+                throw new Error("Transfer cancelled");
+              }
+
+              const remoteEntryPath = sftpRef.current.joinPath(task.remotePath, entry.name);
+              const localEntryPath = joinFsPath(task.localPath, entry.name);
+              const isRealDir = entry.type === "directory";
+              const isSymlinkDir =
+                entry.type === "symlink" && entry.linkTarget === "directory";
+
+              if (isRealDir || isSymlinkDir) {
+                if (isSymlinkDir && task.symlinkDepth >= MAX_SYMLINK_DEPTH) {
+                  throw new Error(
+                    "Maximum symlink directory depth exceeded (possible symlink cycle)",
+                  );
+                }
+
+                try {
+                  await mkdirLocal(localEntryPath);
+                } catch (mkdirErr: unknown) {
+                  const isEEXIST =
+                    mkdirErr instanceof Error && mkdirErr.message.includes("EEXIST");
+                  if (!isEEXIST) throw mkdirErr;
+                }
+
+                pendingDirectoryTasks += 1;
+                enqueueDirectoryTask({
+                  type: "directory",
+                  remotePath: remoteEntryPath,
+                  localPath: localEntryPath,
+                  symlinkDepth: isSymlinkDir ? task.symlinkDepth + 1 : task.symlinkDepth,
+                });
+                continue;
+              }
+
+              const entrySize =
+                typeof entry.size === "string"
+                  ? parseInt(String(entry.size), 10) || 0
+                  : entry.size || 0;
+              discoveredTotalBytes += entrySize;
+              enqueueFileTask({
+                type: "file",
+                remotePath: remoteEntryPath,
+                localPath: localEntryPath,
+                size: entrySize,
+              });
+            }
+
+            pendingDirectoryTasks -= 1;
+            maybeFinalizeDiscovery();
+          };
+
+          const runQueue = async () =>
+            new Promise<void>((resolve, reject) => {
+              let settled = false;
+
+              const pump = () => {
+                if (settled) return;
+
+                if (isTaskCancelled()) {
+                  settled = true;
+                  void cancelActiveChildTransfers().finally(() =>
+                    reject(new Error("Transfer cancelled")),
+                  );
+                  return;
+                }
+
+                while (
+                  activeQueueTasks < getDynamicConcurrencyLimit()
+                ) {
+                  const nextTask = dequeueTask();
+                  if (!nextTask) break;
+
+                  activeQueueTasks += 1;
+                  Promise.resolve(
+                    nextTask.type === "directory"
+                      ? processDirectoryTask(nextTask)
+                      : processFileTask(nextTask),
+                  )
+                    .then(() => {
+                      activeQueueTasks -= 1;
+                      if (
+                        !settled &&
+                        fileTaskQueue.length === 0 &&
+                        directoryTaskQueue.length === 0 &&
+                        activeQueueTasks === 0 &&
+                        pendingDirectoryTasks === 0
+                      ) {
+                        settled = true;
+                        resolve();
+                        return;
+                      }
+                      pump();
+                    })
+                    .catch((error) => {
+                      if (settled) return;
+                      settled = true;
+                      void cancelActiveChildTransfers().finally(() => reject(error));
+                    });
+                }
+
+                if (
+                  !settled &&
+                  fileTaskQueue.length === 0 &&
+                  directoryTaskQueue.length === 0 &&
+                  activeQueueTasks === 0 &&
+                  pendingDirectoryTasks === 0
+                ) {
+                  settled = true;
+                  resolve();
+                }
+              };
+
+              pump();
+            });
+
+          sftpRef.current.addExternalUpload({
+            id: transferId,
+            fileName: `${file.name} (${t("sftp.upload.scanning")})`,
+            sourcePath: fullPath,
+            targetPath,
+            sourceConnectionId: pane.connection.id,
+            targetConnectionId: "local",
+            direction: "download",
+            status: "transferring",
+            totalBytes: 0,
+            transferredBytes: 0,
+            speed: 0,
+            startTime: Date.now(),
+            isDirectory: true,
+            retryable: false,
+          });
+
+          try {
+            try {
+              await mkdirLocal(targetPath);
+            } catch (mkdirErr: unknown) {
+              const isEEXIST =
+                mkdirErr instanceof Error && mkdirErr.message.includes("EEXIST");
+              if (isEEXIST && deleteLocalFile) {
+                await deleteLocalFile(targetPath);
+                await mkdirLocal(targetPath);
+              } else {
+                throw mkdirErr;
+              }
+            }
+
+            pendingDirectoryTasks = 1;
+            enqueueDirectoryTask({
+              type: "directory",
+              remotePath: fullPath,
+              localPath: targetPath,
+              symlinkDepth: 0,
+            });
+            await runQueue();
+
+            sftpRef.current.updateExternalUpload(transferId, {
+              status: "completed",
+              fileName: file.name,
+              transferredBytes: completedBytes,
+              totalBytes: estimatedTotalBytes > 0 ? estimatedTotalBytes : completedBytes,
+              speed: 0,
+              endTime: Date.now(),
+            });
+            toast.success(`${t("sftp.context.download")}: ${file.name}`, "SFTP");
+          } catch (error) {
+            const errorMessage =
+              error instanceof Error ? error.message : t("sftp.error.downloadFailed");
+            const isCancelled =
+              errorMessage.includes("cancelled") || errorMessage.includes("canceled");
+
+            sftpRef.current.updateExternalUpload(transferId, {
+              status: isCancelled ? "cancelled" : "failed",
+              error: isCancelled ? undefined : errorMessage,
+              speed: 0,
+              endTime: Date.now(),
+            });
+
+            if (!isCancelled) {
+              toast.error(errorMessage, "SFTP");
+            }
+          }
+
+          return;
+        }
+
         // Show save dialog to get target path
         const targetPath = await showSaveDialog(file.name);
         if (!targetPath) {
@@ -433,6 +857,7 @@ export const useSftpViewFileOps = ({
             targetType: 'local',
             sourceSftpId: sftpId,
             totalBytes: fileSize,
+            sourceEncoding: pane.filenameEncoding,
           },
           (transferred, total, speed) => {
             // Update transfer progress in the queue
@@ -497,7 +922,17 @@ export const useSftpViewFileOps = ({
         );
       }
     },
-    [sftpRef, t, showSaveDialog, startStreamTransfer, getSftpIdForConnection],
+    [
+      sftpRef,
+      t,
+      listSftp,
+      mkdirLocal,
+      deleteLocalFile,
+      showSaveDialog,
+      selectDirectory,
+      startStreamTransfer,
+      getSftpIdForConnection,
+    ],
   );
 
   const onDownloadFileLeft = useCallback(

components/sftp/hooks/useSftpViewPaneCallbacks.ts

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import type { MutableRefObject } from "react";
 import type { SftpStateApi } from "../../../application/state/useSftpState";
+import type { RemoteFile, SftpFilenameEncoding } from "../../../types";
 import type { SftpPaneCallbacks } from "../SftpContext";
 import { useSftpViewPaneActions } from "./useSftpViewPaneActions";
 import { useSftpViewFileOps } from "./useSftpViewFileOps";
@@ -19,7 +20,11 @@ interface UseSftpViewPaneCallbacksParams {
     systemApp?: SystemAppInfo,
   ) => void;
   t: (key: string, vars?: Record<string, string | number>) => string;
+  listSftp?: (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => Promise<RemoteFile[]>;
+  mkdirLocal?: (path: string) => Promise<unknown>;
+  deleteLocalFile?: (path: string) => Promise<unknown>;
   showSaveDialog?: (defaultPath: string, filters?: Array<{ name: string; extensions: string[] }>) => Promise<string | null>;
+  selectDirectory?: (title?: string, defaultPath?: string) => Promise<string | null>;
   startStreamTransfer?: (
     options: {
       transferId: string;
@@ -30,6 +35,8 @@ interface UseSftpViewPaneCallbacksParams {
       sourceSftpId?: string;
       targetSftpId?: string;
       totalBytes?: number;
+      sourceEncoding?: SftpFilenameEncoding;
+      targetEncoding?: SftpFilenameEncoding;
     },
     onProgress?: (transferred: number, total: number, speed: number) => void,
     onComplete?: () => void,
@@ -45,7 +52,11 @@ export const useSftpViewPaneCallbacks = ({
   getOpenerForFileRef,
   setOpenerForExtension,
   t,
+  listSftp,
+  mkdirLocal,
+  deleteLocalFile,
   showSaveDialog,
+  selectDirectory,
   startStreamTransfer,
   getSftpIdForConnection,
 }: UseSftpViewPaneCallbacksParams) => {
@@ -57,7 +68,11 @@ export const useSftpViewPaneCallbacks = ({
     getOpenerForFileRef,
     setOpenerForExtension,
     t,
+    listSftp,
+    mkdirLocal,
+    deleteLocalFile,
     showSaveDialog,
+    selectDirectory,
     startStreamTransfer,
     getSftpIdForConnection,
   });

components/terminal/TerminalAuthDialog.tsx

@@ -10,6 +10,7 @@ import { SSHKey } from '../../types';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Label } from '../ui/label';
+import { Dropdown, DropdownContent, DropdownTrigger } from '../ui/dropdown';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 
 export type TerminalAuthMethod = 'password' | 'key' | 'certificate';
@@ -265,25 +266,34 @@ export const TerminalAuthDialog: React.FC<TerminalAuthDialogProps> = ({
                 <Button variant="secondary" onClick={onCancel}>
                     {t("common.close")}
                 </Button>
-                <div className="flex items-center gap-2">
-                    <Popover>
-                        <PopoverTrigger asChild>
-                            <Button disabled={!isValid} onClick={onSubmit}>
-                                {t("terminal.auth.continueSave")}
-                                <ChevronDown size={14} className="ml-2" />
-                            </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-40 p-1 z-50" align="end">
-                            <button
-                                className="w-full px-3 py-2 text-sm text-left hover:bg-secondary rounded-md"
-                                onClick={onSubmitWithoutSave ?? onSubmit}
+                <Dropdown>
+                    <div className="flex items-center rounded-md bg-primary text-primary-foreground">
+                        <Button
+                            disabled={!isValid}
+                            onClick={onSubmit}
+                            className="rounded-r-none bg-transparent hover:bg-white/10 shadow-none"
+                        >
+                            {t("terminal.auth.continueSave")}
+                        </Button>
+                        <DropdownTrigger asChild>
+                            <Button
                                 disabled={!isValid}
+                                className="px-2 rounded-l-none bg-transparent hover:bg-white/10 border-l border-primary-foreground/20 shadow-none"
                             >
-                                {t("common.continue")}
-                            </button>
-                        </PopoverContent>
-                    </Popover>
-                </div>
+                                <ChevronDown size={14} />
+                            </Button>
+                        </DropdownTrigger>
+                    </div>
+                    <DropdownContent className="w-44 p-1 z-50" align="end">
+                        <button
+                            className="w-full px-3 py-2 text-sm text-left hover:bg-secondary rounded-md"
+                            onClick={onSubmitWithoutSave ?? onSubmit}
+                            disabled={!isValid}
+                        >
+                            {t("common.continue")}
+                        </button>
+                    </DropdownContent>
+                </Dropdown>
             </div>
         </>
     );

components/terminal/TerminalConnectionDialog.tsx

@@ -2,7 +2,7 @@
  * Terminal Connection Dialog
  * Full connection overlay with host info, progress indicator, and auth/progress content
  */
-import { Loader2, TerminalSquare, User } from 'lucide-react';
+import { Loader2, Plug, TerminalSquare, X } from 'lucide-react';
 import React from 'react';
 import { useI18n } from '../../application/i18n/I18nProvider';
 import { cn } from '../../lib/utils';
@@ -30,6 +30,7 @@ export interface TerminalConnectionDialogProps {
     // Auth dialog props
     authProps: Omit<TerminalAuthDialogProps, 'keys'>;
     keys: SSHKey[];
+    onDismissDisconnected?: () => void;
     // Progress props
     progressProps: Omit<TerminalConnectionProgressProps, 'status' | 'error' | 'showLogs'>;
 }
@@ -68,11 +69,13 @@ export const TerminalConnectionDialog: React.FC<TerminalConnectionDialogProps> =
     _setShowLogs: setShowLogs, // Rename back to setShowLogs for internal use
     authProps,
     keys,
+    onDismissDisconnected,
     progressProps,
 }) => {
     const { t } = useI18n();
     const hasError = Boolean(error);
     const isConnecting = status === 'connecting';
+    const canDismissDisconnected = status === 'disconnected' && !needsAuth && !!onDismissDisconnected;
     const protocolInfo = getProtocolInfo(host);
 
     return (
@@ -80,12 +83,11 @@ export const TerminalConnectionDialog: React.FC<TerminalConnectionDialogProps> =
             "absolute inset-0 z-20 flex items-center justify-center",
             needsAuth ? "bg-black" : "bg-black/30"
         )}>
-            <div className="w-[560px] max-w-[90vw] bg-background/95 border border-border/60 rounded-2xl shadow-xl p-6 space-y-4">
+            <div className="w-[560px] max-w-[90vw] bg-background/95 border border-border/60 rounded-xl shadow-xl p-6 space-y-4">
                 <div className="flex items-center justify-between">
                     <div className="flex items-center gap-3">
-                        <DistroAvatar host={host} fallback={host.label.slice(0, 2).toUpperCase()} className="h-10 w-10" />
+                        <DistroAvatar host={host} fallback={host.label.slice(0, 2).toUpperCase()} className="h-10 w-10 rounded-lg" />
                         <div>
-                            {/* Show chain progress if available */}
                             {chainProgress ? (
                                 <>
                                     <div className="text-sm font-semibold">
@@ -104,7 +106,7 @@ export const TerminalConnectionDialog: React.FC<TerminalConnectionDialogProps> =
                                 </>
                             ) : (
                                 <>
-                                    <div className="text-sm font-semibold">{host.label}</div>
+                                    <div className="text-lg font-semibold">{host.label}</div>
                                     <div className="text-[11px] text-muted-foreground font-mono">
                                         {t(protocolInfo.i18nKey)} {protocolInfo.showPort ? `${host.hostname}:${protocolInfo.port}` : host.hostname}
                                     </div>
@@ -112,32 +114,56 @@ export const TerminalConnectionDialog: React.FC<TerminalConnectionDialogProps> =
                             )}
                         </div>
                     </div>
-                    {!needsAuth && (
-                        <Button
-                            size="sm"
-                            variant="outline"
-                            className="h-8 text-xs"
-                            onClick={() => setShowLogs(!showLogs)}
-                        >
-                            {showLogs ? t('terminal.connection.hideLogs') : t('terminal.connection.showLogs')}
-                        </Button>
-                    )}
+                    <div className="flex items-center gap-2">
+                        {!needsAuth && (
+                            <Button
+                                size="sm"
+                                variant="outline"
+                                className="h-8 text-xs"
+                                onClick={() => setShowLogs(!showLogs)}
+                            >
+                                {showLogs ? t('terminal.connection.hideLogs') : t('terminal.connection.showLogs')}
+                            </Button>
+                        )}
+                        {status === 'connecting' && !needsAuth && (
+                            <Button
+                                size="sm"
+                                variant="outline"
+                                className="h-8 text-xs"
+                                onClick={progressProps.onCancelConnect}
+                                disabled={progressProps.isCancelling}
+                            >
+                                {progressProps.isCancelling ? t('terminal.progress.cancelling') : t('common.close')}
+                            </Button>
+                        )}
+                        {canDismissDisconnected && (
+                            <Button
+                                size="icon"
+                                variant="ghost"
+                                className="h-8 w-8"
+                                aria-label={t('terminal.connection.dismissDisconnectedDialog')}
+                                title={t('terminal.connection.dismissDisconnectedDialog')}
+                                onClick={onDismissDisconnected}
+                            >
+                                <X size={14} />
+                            </Button>
+                        )}
+                    </div>
                 </div>
 
-                {/* Progress indicator - icons with progress bar below */}
                 <div className="space-y-2">
                     <div className="flex items-center gap-3">
                         <div className={cn(
-                            "h-8 w-8 rounded-full flex items-center justify-center flex-shrink-0",
+                            "h-8 w-8 rounded-lg flex items-center justify-center flex-shrink-0",
                             needsAuth
                                 ? "bg-primary text-primary-foreground"
                                 : hasError
                                     ? "bg-destructive/20 text-destructive"
-                                    : isConnecting
+                                : isConnecting
                                         ? "bg-primary/15 text-primary"
                                         : "bg-muted text-muted-foreground"
                         )}>
-                            <User size={14} />
+                            <Plug size={14} />
                         </div>
                         <div className="flex-1 h-1.5 rounded-full bg-border/60 overflow-hidden relative">
                             <div
@@ -151,7 +177,7 @@ export const TerminalConnectionDialog: React.FC<TerminalConnectionDialogProps> =
                             />
                         </div>
                         <div className={cn(
-                            "h-8 w-8 rounded-full flex items-center justify-center flex-shrink-0",
+                            "h-8 w-8 rounded-lg flex items-center justify-center flex-shrink-0",
                             hasError ? "bg-destructive/20 text-destructive" : "bg-muted text-muted-foreground"
                         )}>
                             {isConnecting ? (

components/terminal/TerminalConnectionProgress.tsx

@@ -2,7 +2,7 @@
  * Terminal Connection Progress
  * Displays connection progress with logs and timeout
  */
-import { AlertCircle, Clock, Play, ShieldCheck } from 'lucide-react';
+import { Loader2, Play } from 'lucide-react';
 import React from 'react';
 import { useI18n } from '../../application/i18n/I18nProvider';
 import { Button } from '../ui/button';
@@ -15,7 +15,8 @@ export interface TerminalConnectionProgressProps {
     isCancelling: boolean;
     showLogs: boolean;
     progressLogs: string[];
-    onCancel: () => void;
+    onCancelConnect: () => void;
+    onCloseSession: () => void;
     onRetry: () => void;
 }
 
@@ -23,71 +24,70 @@ export const TerminalConnectionProgress: React.FC<TerminalConnectionProgressProp
     status,
     error,
     timeLeft,
-    isCancelling,
+    isCancelling: _isCancelling,
     showLogs,
     progressLogs,
-    onCancel,
+    onCancelConnect: _onCancelConnect,
+    onCloseSession,
     onRetry,
 }) => {
     const { t } = useI18n();
 
     return (
         <>
-            <div className="flex items-center justify-between text-xs text-muted-foreground">
-                <div className="flex items-center gap-2">
-                    <Clock className="h-3 w-3" />
-                    <span>
-                        {status === 'connecting'
-                            ? t('terminal.progress.timeoutIn', { seconds: timeLeft })
-                            : error || t('terminal.progress.disconnected')}
-                    </span>
-                </div>
-                <div className="flex items-center gap-2">
+            <div className="flex items-start justify-between gap-3 text-xs text-muted-foreground">
+                <div className="flex min-w-0 items-start gap-2">
                     {status === 'connecting' ? (
-                        <Button
-                            variant="ghost"
-                            size="sm"
-                            className="h-8"
-                            onClick={onCancel}
-                            disabled={isCancelling}
-                        >
-                            {isCancelling ? t('terminal.progress.cancelling') : t('common.close')}
-                        </Button>
+                        <>
+                            <Loader2 className="h-3 w-3 mt-0.5 flex-shrink-0 animate-spin" />
+                            <span className="min-w-0 whitespace-pre-wrap break-words leading-5">
+                                {t('terminal.progress.timeoutIn', { seconds: timeLeft })}
+                            </span>
+                        </>
                     ) : (
-                        <div className="flex gap-2">
-                            <Button variant="ghost" size="sm" className="h-8" onClick={onCancel}>
-                                {t('common.close')}
-                            </Button>
-                            <Button size="sm" className="h-8" onClick={onRetry}>
-                                <Play className="h-3 w-3 mr-2" /> {t('terminal.progress.startOver')}
-                            </Button>
-                        </div>
+                        <>
+                            <div className="mt-[0.4rem] h-1.5 w-1.5 flex-shrink-0 rounded-full bg-destructive" />
+                            <span className="min-w-0 whitespace-pre-wrap break-words leading-5 text-destructive">
+                                {error || t('terminal.progress.disconnected')}
+                            </span>
+                        </>
                     )}
                 </div>
             </div>
 
             {showLogs && (
-                <div className="rounded-xl border border-border/60 bg-background/70 shadow-inner">
+                <div className="rounded-md border border-border/35 bg-background/40">
                     <ScrollArea className="max-h-52 p-3">
-                        <div className="space-y-2 text-sm text-foreground/90">
+                        <div className="space-y-1 text-sm text-foreground/90">
                             {progressLogs.map((line, idx) => (
                                 <div key={idx} className="flex items-start gap-2">
-                                    <div className="mt-0.5">
-                                        <ShieldCheck className="h-3.5 w-3.5 text-primary" />
-                                    </div>
-                                    <div>{line}</div>
+                                    <div className="mt-[0.4rem] h-1.5 w-1.5 flex-shrink-0 rounded-full bg-emerald-500" />
+                                    <div className="min-w-0 break-words leading-5">{line}</div>
                                 </div>
                             ))}
                             {error && (
                                 <div className="flex items-start gap-2 text-destructive">
-                                    <AlertCircle className="h-3.5 w-3.5 mt-0.5" />
-                                    <div>{error}</div>
+                                    <div className="mt-[0.4rem] h-1.5 w-1.5 flex-shrink-0 rounded-full bg-destructive" />
+                                    <div className="min-w-0 break-words leading-5">{error}</div>
                                 </div>
                             )}
                         </div>
                     </ScrollArea>
                 </div>
             )}
+
+            <div className="flex justify-end gap-2">
+                {status !== 'connecting' && (
+                    <>
+                        <Button variant="ghost" size="sm" className="h-8" onClick={onCloseSession}>
+                            {t('terminal.toolbar.closeSession')}
+                        </Button>
+                        <Button size="sm" className="h-8" onClick={onRetry}>
+                            <Play className="h-3 w-3 mr-2" /> {t('terminal.progress.startOver')}
+                        </Button>
+                    </>
+                )}
+            </div>
         </>
     );
 };

components/terminal/ThemeSidePanel.tsx

@@ -118,21 +118,37 @@ FontItem.displayName = 'FontItem';
 
 interface ThemeSidePanelProps {
   currentThemeId: string;
+  globalThemeId: string;
   currentFontFamilyId: string;
+  globalFontFamilyId: string;
   currentFontSize: number;
+  canResetTheme?: boolean;
+  canResetFontFamily?: boolean;
+  canResetFontSize?: boolean;
   onThemeChange: (themeId: string) => void;
+  onThemeReset?: () => void;
   onFontFamilyChange: (fontFamilyId: string) => void;
+  onFontFamilyReset?: () => void;
   onFontSizeChange: (fontSize: number) => void;
+  onFontSizeReset?: () => void;
   isVisible?: boolean;
 }
 
 const ThemeSidePanelInner: React.FC<ThemeSidePanelProps> = ({
   currentThemeId,
+  globalThemeId,
   currentFontFamilyId,
+  globalFontFamilyId,
   currentFontSize,
+  canResetTheme = false,
+  canResetFontFamily = false,
+  canResetFontSize = false,
   onThemeChange,
+  onThemeReset,
   onFontFamilyChange,
+  onFontFamilyReset,
   onFontSizeChange,
+  onFontSizeReset,
   isVisible = true,
 }) => {
   const { t } = useI18n();
@@ -149,6 +165,14 @@ const ThemeSidePanelInner: React.FC<ThemeSidePanelProps> = ({
     () => [...TERMINAL_THEMES, ...customThemes],
     [customThemes]
   );
+  const globalTheme = useMemo(
+    () => allThemes.find((theme) => theme.id === globalThemeId) || TERMINAL_THEMES[0],
+    [allThemes, globalThemeId],
+  );
+  const globalFont = useMemo(
+    () => availableFonts.find((font) => font.id === globalFontFamilyId) || availableFonts[0],
+    [availableFonts, globalFontFamilyId],
+  );
 
   const handleThemeSelect = useCallback((themeId: string) => {
     setEditingTheme(null);
@@ -294,6 +318,18 @@ const ThemeSidePanelInner: React.FC<ThemeSidePanelProps> = ({
                     ))}
                   </>
                 )}
+                {canResetTheme && (
+                  <>
+                    <div className="text-[9px] uppercase tracking-wider text-muted-foreground mt-2 mb-1 px-1 font-semibold">
+                      {t('terminal.themeModal.globalTheme')}
+                    </div>
+                    <ThemeItem
+                      theme={globalTheme}
+                      isSelected={!canResetTheme}
+                      onSelect={() => onThemeReset?.()}
+                    />
+                  </>
+                )}
               </div>
             )}
             {activeTab === 'font' && (
@@ -306,6 +342,18 @@ const ThemeSidePanelInner: React.FC<ThemeSidePanelProps> = ({
                     onSelect={handleFontSelect}
                   />
                 ))}
+                {canResetFontFamily && (
+                  <>
+                    <div className="text-[9px] uppercase tracking-wider text-muted-foreground mt-2 mb-1 px-1 font-semibold">
+                      {t('terminal.themeModal.globalFont')}
+                    </div>
+                    <FontItem
+                      font={globalFont}
+                      isSelected={!canResetFontFamily}
+                      onSelect={() => onFontFamilyReset?.()}
+                    />
+                  </>
+                )}
               </div>
             )}
             {activeTab === 'custom' && !editingTheme && (
@@ -365,8 +413,18 @@ const ThemeSidePanelInner: React.FC<ThemeSidePanelProps> = ({
         {/* Font Size Control (only in font tab) */}
         {activeTab === 'font' && (
           <div className="p-2.5 border-t border-border/50 shrink-0">
-            <div className="text-[9px] uppercase tracking-wider text-muted-foreground mb-1.5 font-semibold">
-              {t('terminal.themeModal.fontSize')}
+            <div className="flex items-center justify-between gap-2 mb-1.5">
+              <div className="text-[9px] uppercase tracking-wider text-muted-foreground font-semibold">
+                {t('terminal.themeModal.fontSize')}
+              </div>
+              {canResetFontSize && (
+                <button
+                  onClick={onFontSizeReset}
+                  className="text-[10px] font-medium text-primary hover:opacity-80 transition-opacity"
+                >
+                  {t('common.useGlobal')}
+                </button>
+              )}
             </div>
             <div className="flex items-center justify-between gap-2 bg-muted/30 rounded-lg p-1.5">
               <button

components/terminal/runtime/createTerminalSessionStarters.ts

@@ -11,6 +11,9 @@ import {
 } from "../../../domain/credentials";
 import { resolveHostAuth } from "../../../domain/sshAuth";
 
+/** Timeout of distro detection task */
+const DISTRO_DETECT_TIMEOUT = 8000; // ms
+
 type TerminalBackendApi = {
   backendAvailable: () => boolean;
   telnetAvailable: () => boolean;
@@ -38,7 +41,7 @@ type TerminalBackendApi = {
   onSessionData: (sessionId: string, cb: (data: string) => void) => () => void;
   onSessionExit: (
     sessionId: string,
-    cb: (evt: { exitCode?: number; signal?: number }) => void,
+    cb: (evt: { exitCode?: number; signal?: number; error?: string; reason?: "exited" | "error" | "timeout" | "closed" }) => void,
   ) => () => void;
   onChainProgress: (
     cb: (hop: number, total: number, label: string, status: string) => void,
@@ -61,6 +64,12 @@ type ChainProgressState = {
   currentHostLabel: string;
 } | null;
 
+export type SessionLogConfig = {
+  enabled: boolean;
+  directory: string;
+  format: string;
+};
+
 export type TerminalSessionStartersContext = {
   host: Host;
   keys: SSHKey[];
@@ -68,10 +77,12 @@ export type TerminalSessionStartersContext = {
   resolvedChainHosts: Host[];
   sessionId: string;
   startupCommand?: string;
+  noAutoRun?: boolean;
   terminalSettings?: TerminalSettings;
   terminalSettingsRef?: RefObject<TerminalSettings | undefined>;
   terminalBackend: TerminalBackendApi;
   serialConfig?: SerialConfig;
+  sessionLog?: SessionLogConfig;
   isVisibleRef?: RefObject<boolean>;
   pendingOutputScrollRef?: RefObject<boolean>;
 
@@ -96,7 +107,7 @@ export type TerminalSessionStartersContext = {
   t?: (key: string) => string;
 
   onSessionAttached?: (sessionId: string) => void;
-  onSessionExit?: (sessionId: string) => void;
+  onSessionExit?: (sessionId: string, evt: { exitCode?: number; signal?: number; error?: string; reason?: "exited" | "error" | "timeout" | "closed" }) => void;
   onTerminalDataCapture?: (sessionId: string, data: string) => void;
   onOsDetected?: (hostId: string, distro: string) => void;
   onCommandExecuted?: (
@@ -209,13 +220,13 @@ const attachSessionToTerminal = (
       }
     }
 
-    ctx.onSessionExit?.(ctx.sessionId);
+    ctx.onSessionExit?.(ctx.sessionId, evt);
   });
 };
 
 const runDistroDetection = async (
   ctx: TerminalSessionStartersContext,
-  auth: { username: string; password?: string; key?: SSHKey },
+  auth: { username: string; password?: string; key?: SSHKey; passphrase?: string },
 ) => {
   if (!ctx.terminalBackend.execAvailable()) return;
   try {
@@ -225,8 +236,9 @@ const runDistroDetection = async (
       port: ctx.host.port || 22,
       password: auth.password,
       privateKey: auth.key?.privateKey,
+      passphrase: auth.passphrase ?? auth.key?.passphrase,
       command: "cat /etc/os-release 2>/dev/null || uname -a",
-      timeout: 8000,
+      timeout: DISTRO_DETECT_TIMEOUT,
     });
     const data = `${res.stdout || ""}\n${res.stderr || ""}`;
     const idMatch = data.match(/^ID="?([\w-]+)"?$/im);
@@ -430,6 +442,7 @@ export const createTerminalSessionStarters = (ctx: TerminalSessionStartersContex
       }): Promise<string> => {
         return ctx.terminalBackend.startSSHSession({
           sessionId: ctx.sessionId,
+          hostLabel: ctx.host.label,
           hostname: ctx.host.hostname,
           username: effectiveUsername,
           port: ctx.host.port || 22,
@@ -451,6 +464,7 @@ export const createTerminalSessionStarters = (ctx: TerminalSessionStartersContex
           proxy: proxyConfig,
           jumpHosts: jumpHosts.length > 0 ? jumpHosts : undefined,
           keepaliveInterval: ctx.terminalSettings?.keepaliveInterval,
+          sessionLog: ctx.sessionLog?.enabled ? ctx.sessionLog : undefined,
         });
       };
 
@@ -535,8 +549,9 @@ export const createTerminalSessionStarters = (ctx: TerminalSessionStartersContex
           // Guard against stale timers: if the session changed (e.g. user
           // clicked Start Over quickly), skip to avoid double execution
           if (!ctx.sessionRef.current || ctx.sessionRef.current !== scheduledSessionId) return;
-          ctx.terminalBackend.writeToSession(ctx.sessionRef.current, `${commandToRun}\r`);
-          if (ctx.onCommandExecuted) {
+          const suffix = ctx.noAutoRun ? '' : '\r';
+          ctx.terminalBackend.writeToSession(ctx.sessionRef.current, `${commandToRun}${suffix}`);
+          if (!ctx.noAutoRun && ctx.onCommandExecuted) {
             ctx.onCommandExecuted(commandToRun, ctx.host.id, ctx.host.label, ctx.sessionId);
           }
         }, 600);
@@ -573,6 +588,7 @@ export const createTerminalSessionStarters = (ctx: TerminalSessionStartersContex
           username: effectiveUsername,
           password: usedPassword,
           key: usedKey,
+          passphrase: effectivePassphrase,
         }),
       600,
     );
@@ -602,6 +618,7 @@ export const createTerminalSessionStarters = (ctx: TerminalSessionStartersContex
         rows: term.rows,
         charset: ctx.host.charset,
         env: telnetEnv,
+        sessionLog: ctx.sessionLog?.enabled ? ctx.sessionLog : undefined,
       });
 
       attachSessionToTerminal(ctx, term, id, {
@@ -643,6 +660,7 @@ export const createTerminalSessionStarters = (ctx: TerminalSessionStartersContex
         rows: term.rows,
         charset: ctx.host.charset,
         env: moshEnv,
+        sessionLog: ctx.sessionLog?.enabled ? ctx.sessionLog : undefined,
       });
 
       attachSessionToTerminal(ctx, term, id, {
@@ -656,8 +674,9 @@ export const createTerminalSessionStarters = (ctx: TerminalSessionStartersContex
         const scheduledSessionId = id;
         setTimeout(() => {
           if (!ctx.sessionRef.current || ctx.sessionRef.current !== scheduledSessionId) return;
-          ctx.terminalBackend.writeToSession(ctx.sessionRef.current, `${commandToRun}\r`);
-          if (ctx.onCommandExecuted) {
+          const suffix = ctx.noAutoRun ? '' : '\r';
+          ctx.terminalBackend.writeToSession(ctx.sessionRef.current, `${commandToRun}${suffix}`);
+          if (!ctx.noAutoRun && ctx.onCommandExecuted) {
             ctx.onCommandExecuted(commandToRun, ctx.host.id, ctx.host.label, ctx.sessionId);
           }
         }, 600);
@@ -700,6 +719,7 @@ export const createTerminalSessionStarters = (ctx: TerminalSessionStartersContex
         env: {
           TERM: ctx.terminalSettings?.terminalEmulationType ?? "xterm-256color",
         },
+        sessionLog: ctx.sessionLog?.enabled ? ctx.sessionLog : undefined,
       });
 
       ctx.sessionRef.current = id;
@@ -746,7 +766,7 @@ export const createTerminalSessionStarters = (ctx: TerminalSessionStartersContex
           }
         }
 
-        ctx.onSessionExit?.(ctx.sessionId);
+        ctx.onSessionExit?.(ctx.sessionId, evt);
       });
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);
@@ -779,6 +799,7 @@ export const createTerminalSessionStarters = (ctx: TerminalSessionStartersContex
         stopBits: ctx.serialConfig.stopBits,
         parity: ctx.serialConfig.parity,
         flowControl: ctx.serialConfig.flowControl,
+        sessionLog: ctx.sessionLog?.enabled ? ctx.sessionLog : undefined,
       });
 
       // Serial connection is established immediately when session starts

components/terminal/runtime/createXTermRuntime.ts

@@ -22,6 +22,10 @@ import {
   shouldScrollOnTerminalInput,
   shouldScrollOnTerminalPaste,
 } from "../../../domain/terminalScroll";
+import {
+  resolveHostTerminalFontFamilyId,
+  resolveHostTerminalFontSize,
+} from "../../../domain/terminalAppearance";
 import { logger } from "../../../lib/logger";
 import { isMacPlatform, normalizeLineEndings, wrapBracketedPaste } from "../../../lib/utils";
 import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
@@ -94,6 +98,9 @@ export type CreateXTermRuntimeContext = {
 
   // Callback when shell reports CWD change via OSC 7
   onCwdChange?: (cwd: string) => void;
+
+  // Callback when remote requests clipboard read in 'prompt' mode; resolves to user's decision
+  onOsc52ReadRequest?: () => Promise<boolean>;
 };
 
 const detectPlatform = (): XTermPlatform => {
@@ -138,12 +145,12 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
     rendererType,
   });
 
-  const hostFontId = ctx.host.fontFamily || ctx.fontFamilyId || "menlo";
+  const hostFontId = resolveHostTerminalFontFamilyId(ctx.host, ctx.fontFamilyId) || "menlo";
   // Use fontStore for font lookup - guarantees non-empty result
   const fontObj = fontStore.getFontById(hostFontId);
   const fontFamily = fontObj.family;
 
-  const effectiveFontSize = ctx.host.fontSize || ctx.fontSize;
+  const effectiveFontSize = resolveHostTerminalFontSize(ctx.host, ctx.fontSize);
 
   const cursorStyle = settings?.cursorShape ?? "block";
   const cursorBlink = settings?.cursorBlink ?? true;
@@ -384,12 +391,14 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
             e.preventDefault();
             e.stopPropagation();
             // Send the snippet command to the terminal
-            const payload = `${normalizeLineEndings(snippet.command)}\r`;
+            const payload = snippet.noAutoRun
+              ? normalizeLineEndings(snippet.command)
+              : `${normalizeLineEndings(snippet.command)}\r`;
             ctx.terminalBackend.writeToSession(id, payload);
             if (ctx.isBroadcastEnabledRef.current && ctx.onBroadcastInputRef.current) {
               ctx.onBroadcastInputRef.current(payload, ctx.sessionId);
             }
-            if (ctx.onCommandExecuted) {
+            if (!snippet.noAutoRun && ctx.onCommandExecuted) {
               const cmd = snippet.command.trim();
               if (cmd) ctx.onCommandExecuted(cmd, ctx.host.id, ctx.host.label, ctx.sessionId);
               ctx.commandBufferRef.current = "";
@@ -614,6 +623,78 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
     return true; // Indicate we handled the sequence
   });
 
+  // OSC 52 — clipboard integration
+  // Format: 52;<target>;<base64-data>  (write)  or  52;<target>;?  (query/read)
+  // <target> is typically "c" (clipboard) or "p" (primary selection)
+  // Controlled by terminalSettings.osc52Clipboard: 'off' | 'write-only' | 'read-write'
+  const osc52Disposable = term.parser.registerOscHandler(52, (data) => {
+    const settings = ctx.terminalSettingsRef.current;
+    const mode = settings?.osc52Clipboard ?? 'write-only';
+    if (mode === 'off') return true;
+
+    try {
+      const semi = data.indexOf(';');
+      if (semi < 0) return true;
+      const target = data.substring(0, semi);
+      // Only handle clipboard target ('c'); reject unsupported targets like 'p' (PRIMARY)
+      if (target !== 'c' && target !== '') return true;
+      const payload = data.substring(semi + 1);
+
+      if (payload === '?') {
+        // Read request — allowed in read-write mode, or prompt user in prompt mode
+        if (mode !== 'read-write' && mode !== 'prompt') {
+          logger.debug('[XTerm] OSC 52 read request ignored (mode:', mode, ')');
+          return true;
+        }
+        const sessionId = ctx.sessionRef.current;
+        if (!sessionId) return true;
+        // Use Electron bridge as primary, fall back to navigator.clipboard
+        const readClipboard = async (): Promise<string> => {
+          try {
+            const bridge = netcattyBridge.get();
+            if (bridge?.readClipboardText) return await bridge.readClipboardText();
+          } catch { /* fall through to navigator.clipboard */ }
+          return navigator.clipboard.readText();
+        };
+        const doRead = async () => {
+          // In prompt mode, ask user first
+          if (mode === 'prompt') {
+            const allowed = ctx.onOsc52ReadRequest ? await ctx.onOsc52ReadRequest() : false;
+            if (!allowed) {
+              logger.debug('[XTerm] OSC 52 read denied by user');
+              return;
+            }
+          }
+          const text = await readClipboard();
+          // Chunked base64 encoding to avoid stack overflow on large payloads
+          const bytes = new TextEncoder().encode(text);
+          let binary = '';
+          for (let i = 0; i < bytes.length; i += 8192) {
+            binary += String.fromCharCode(...bytes.subarray(i, i + 8192));
+          }
+          const b64 = btoa(binary);
+          ctx.terminalBackend.writeToSession(sessionId, `\x1b]52;${target};${b64}\x07`);
+        };
+        doRead().catch((err) => {
+          logger.warn('[XTerm] OSC 52 clipboard read failed:', err);
+        });
+        return true;
+      }
+
+      // Write: payload is base64-encoded UTF-8 text
+      const binary = atob(payload);
+      const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
+      const text = new TextDecoder().decode(bytes);
+      navigator.clipboard.writeText(text).catch((err) => {
+        logger.warn('[XTerm] OSC 52 clipboard write failed:', err);
+      });
+      logger.debug('[XTerm] OSC 52 clipboard write', { length: text.length });
+    } catch (err) {
+      logger.warn('[XTerm] Failed to handle OSC 52:', err);
+    }
+    return true;
+  });
+
   let resizeTimeout: NodeJS.Timeout | null = null;
   const resizeDebounceMs = XTERM_PERFORMANCE_CONFIG.resize.debounceMs;
   term.onResize(({ cols, rows }) => {
@@ -639,6 +720,7 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
       cleanupMiddleClick?.();
       keywordHighlighter.dispose();
       osc7Disposable.dispose();
+      osc52Disposable.dispose();
       try {
         term.dispose();
       } catch (err) {

components/ui/dialog.tsx

@@ -30,13 +30,13 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { hideCloseButton?: boolean }
->(({ className, children, hideCloseButton, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { hideCloseButton?: boolean; overlayClassName?: string }
+>(({ className, children, hideCloseButton, overlayClassName, ...props }, ref) => {
   const { t } = useI18n()
 
   return (
     <DialogPortal>
-      <DialogOverlay />
+      <DialogOverlay className={overlayClassName} />
       <DialogPrimitive.Content
         ref={ref}
         className={cn(

components/ui/input-group.tsx

@@ -0,0 +1,91 @@
+import { cn } from '../../lib/utils';
+import type { ComponentProps, HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+export type InputGroupProps = HTMLAttributes<HTMLDivElement>;
+
+export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'flex flex-col rounded-[22px] border border-border/65 bg-background/92 shadow-[0_18px_42px_rgba(0,0,0,0.34),inset_0_1px_0_rgba(255,255,255,0.04)] transition-[border-color,background-color,box-shadow]',
+        'supports-[backdrop-filter]:backdrop-blur-sm',
+        'focus-within:border-primary/45 focus-within:bg-background focus-within:ring-1 focus-within:ring-primary/20',
+        'overflow-hidden',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+InputGroup.displayName = 'InputGroup';
+
+export type InputGroupTextareaProps = ComponentProps<'textarea'>;
+
+export const InputGroupTextarea = forwardRef<HTMLTextAreaElement, InputGroupTextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      ref={ref}
+      className={cn(
+        'w-full resize-none bg-transparent text-[13px] text-foreground/92 selection:bg-primary/25',
+        'placeholder:text-muted-foreground/62 placeholder:font-medium placeholder:text-[13px]',
+        'focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed',
+        'px-4 pt-3.5 pb-2 leading-[20px]',
+        'field-sizing-content min-h-[82px] max-h-52',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+InputGroupTextarea.displayName = 'InputGroupTextarea';
+
+export type InputGroupAddonProps = HTMLAttributes<HTMLDivElement> & {
+  align?: 'block-start' | 'block-end';
+};
+
+export const InputGroupAddon = forwardRef<HTMLDivElement, InputGroupAddonProps>(
+  ({ className, align = 'block-end', ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'flex items-center px-2.5 py-1.5',
+        align === 'block-start' && 'border-b border-border/35 bg-muted/8',
+        align === 'block-end' && 'border-t border-border/60 bg-muted/10',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+InputGroupAddon.displayName = 'InputGroupAddon';
+
+export type InputGroupButtonProps = ComponentProps<'button'> & {
+  variant?: 'default' | 'ghost' | 'outline' | 'destructive';
+  size?: 'sm' | 'icon-sm' | 'default';
+};
+
+export const InputGroupButton = forwardRef<HTMLButtonElement, InputGroupButtonProps>(
+  ({ className, variant = 'ghost', size = 'icon-sm', disabled, ...props }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      disabled={disabled}
+      className={cn(
+        'inline-flex items-center justify-center rounded-md transition-colors cursor-pointer',
+        'disabled:opacity-30 disabled:cursor-default',
+        size === 'icon-sm' && 'h-7 w-7',
+        size === 'sm' && 'h-7 px-2 text-[12px] gap-1',
+        size === 'default' && 'h-8 px-3 text-[13px] gap-1.5',
+        variant === 'ghost' && 'text-muted-foreground/78 hover:text-foreground hover:bg-muted/45',
+        variant === 'default' && 'bg-primary/80 text-primary-foreground hover:bg-primary',
+        variant === 'outline' && 'border border-border/40 text-muted-foreground/85 hover:text-foreground hover:bg-muted/35',
+        variant === 'destructive' && 'text-destructive/70 hover:text-destructive hover:bg-destructive/10',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+InputGroupButton.displayName = 'InputGroupButton';

components/ui/scroll-area.tsx

@@ -12,7 +12,7 @@ const ScrollArea = React.forwardRef<
     className={cn("relative overflow-hidden", className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Viewport className="h-full w-full max-h-[inherit] rounded-[inherit]">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />