fix: add missing props destructuring in HostTreeView causing white screen (#625 ) (#626 )

getDropTargetClasses and setDragOverDropTarget were added to HostTreeViewProps interface and used in JSX but never destructured from the component's props parameter. TypeScript didn't catch it because the interface defined them as optional, but at runtime the bare variable references caused ReferenceError, crashing React and producing a white screen on startup. Closes #625 Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
fix: sync built-in editor theme with terminal theme in immersive mode (#623 ) (#624 )
2026-04-03 18:38:15 +08:00 · 2026-04-03 18:03:40 +08:00 · 2026-04-03 15:03:04 +08:00 · 2026-04-03 14:55:46 +08:00 · 2026-04-03 14:51:26 +08:00 · 2026-04-03 14:38:02 +08:00
328 changed files with 47649 additions and 10620 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -84,14 +84,17 @@ 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:
+      npm_config_arch: x64
+      npm_config_target_arch: x64
      VITE_SYNC_GITHUB_CLIENT_ID: ${{ secrets.VITE_SYNC_GITHUB_CLIENT_ID }}
      VITE_SYNC_GOOGLE_CLIENT_ID: ${{ secrets.VITE_SYNC_GOOGLE_CLIENT_ID }}
      VITE_SYNC_GOOGLE_CLIENT_SECRET: ${{ secrets.VITE_SYNC_GOOGLE_CLIENT_SECRET }}
@@ -120,11 +123,23 @@ jobs:
          echo "Setting version to ${VERSION}"
          npm pkg set version="${VERSION}"

+      - name: Prepare node-pty Linux runtime
+        env:
+          npm_config_arch: x64
+        run: bash scripts/ensure-node-pty-linux.sh prepare x64
+
      - name: Build package
        env:
+          npm_config_arch: x64
          ELECTRON_BUILDER_PUBLISH: "never"
        run: npm run pack:linux-x64

+      - name: Verify packaged node-pty Linux runtime
+        run: bash scripts/ensure-node-pty-linux.sh verify x64
+
+      - name: Verify packaged deb artifact
+        run: bash scripts/verify-linux-deb-artifact.sh amd64
+
      - name: Upload artifacts
        uses: actions/upload-artifact@v4
        with:
@@ -146,6 +161,8 @@ jobs:
    container:
      image: debian:bullseye
    env:
+      npm_config_arch: arm64
+      npm_config_target_arch: arm64
      VITE_SYNC_GITHUB_CLIENT_ID: ${{ secrets.VITE_SYNC_GITHUB_CLIENT_ID }}
      VITE_SYNC_GOOGLE_CLIENT_ID: ${{ secrets.VITE_SYNC_GOOGLE_CLIENT_ID }}
      VITE_SYNC_GOOGLE_CLIENT_SECRET: ${{ secrets.VITE_SYNC_GOOGLE_CLIENT_SECRET }}
@@ -154,7 +171,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 +194,23 @@ 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: Verify packaged deb artifact
+        run: bash scripts/verify-linux-deb-artifact.sh arm64
+
      - name: Upload artifacts
        uses: actions/upload-artifact@v4
        with:
@@ -200,6 +230,7 @@ jobs:
    if: startsWith(github.ref, 'refs/tags/') || (github.event_name == 'workflow_dispatch' && inputs.publish_release)
    permissions:
      contents: write
+      actions: read
    steps:
      - name: Checkout
        uses: actions/checkout@v4
@@ -213,6 +244,54 @@ jobs:
      - name: List artifacts
        run: ls -la artifacts/

+      - name: Verify update metadata files
+        run: |
+          missing=0
+          for f in latest-mac.yml latest.yml latest-linux.yml latest-linux-arm64.yml; do
+            if [ ! -f "artifacts/$f" ]; then
+              echo "::warning::Missing $f in merged artifacts, attempting recovery..."
+              missing=1
+            fi
+          done
+          if [ "$missing" = "1" ]; then
+            echo "Re-downloading individual artifacts to recover missing files..."
+            for name in netcatty-macos netcatty-windows netcatty-linux-x64 netcatty-linux-arm64; do
+              tmpdir="/tmp/artifact-${name}"
+              gh run download ${{ github.run_id }} --name "${name}" --dir "${tmpdir}" 2>/dev/null || true
+              if [ -d "${tmpdir}" ]; then
+                for yml in "${tmpdir}"/latest*.yml; do
+                  [ -f "$yml" ] && cp -v "$yml" artifacts/
+                done
+              fi
+            done
+            echo "After recovery:"
+            ls -la artifacts/*.yml
+          fi
+          # Final check — fail if any update yml is still missing
+          for f in latest-mac.yml latest.yml latest-linux.yml latest-linux-arm64.yml; do
+            if [ ! -f "artifacts/$f" ]; then
+              echo "::error::$f is still missing after recovery attempt"
+              exit 1
+            fi
+          done
+          echo "All update metadata files present."
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Verify downloaded Linux amd64 deb artifact
+        run: |
+          deb_file="$(find artifacts -maxdepth 1 -type f -name '*-linux-amd64.deb' -print | sort | head -n 1)"
+          test -n "${deb_file}"
+          bash scripts/verify-linux-deb-artifact.sh amd64 "${deb_file}"
+
+      - name: Verify downloaded Linux arm64 deb artifact metadata
+        env:
+          VERIFY_LOAD: "0"
+        run: |
+          deb_file="$(find artifacts -maxdepth 1 -type f -name '*-linux-arm64.deb' -print | sort | head -n 1)"
+          test -n "${deb_file}"
+          bash scripts/verify-linux-deb-artifact.sh arm64 "${deb_file}"
+
      - name: Generate Release Body
        run: node .github/scripts/generate-release-note.js
        env:
--- a/.gitignore
+++ b/.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)
--- a/App.tsx
+++ b/App.tsx
--- a/README.ja-JP.md
+++ b/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>
--- a/README.md
+++ b/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>
--- a/README.zh-CN.md
+++ b/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>
--- a/application/i18n/locales/en.ts
+++ b/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...',
@@ -18,6 +21,7 @@ const en: Messages = {
  'common.clear': 'Clear',
  'common.optional': 'Optional',
  'common.selectPlaceholder': 'Select...',
+  'common.add': 'Add',
  'common.rename': 'Rename',
  'common.refresh': 'Refresh',
  'common.continue': 'Continue',
@@ -30,6 +34,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 +55,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',
@@ -94,6 +100,21 @@ const en: Messages = {
  'settings.system.credentials.unavailableHint': 'Credentials encrypted on another user profile or machine cannot be decrypted here. Re-enter and save credentials on this device.',
  'settings.system.credentials.portabilityHint': 'Cloud Sync is portable because it uses your master key encryption. Local safeStorage encryption is device/user scoped.',

+  // Settings > System > Crash Logs
+  'settings.system.crashLogs.title': 'Crash Logs',
+  'settings.system.crashLogs.description': 'View error logs from the main process to help diagnose unexpected behavior.',
+  'settings.system.crashLogs.noLogs': 'No crash logs found.',
+  'settings.system.crashLogs.entries': '{count} entries',
+  'settings.system.crashLogs.clear': 'Clear all logs',
+  'settings.system.crashLogs.cleared': 'Cleared {count} log file(s).',
+  'settings.system.crashLogs.source': 'Source',
+  'settings.system.crashLogs.time': 'Time',
+  'settings.system.crashLogs.message': 'Message',
+  'settings.system.crashLogs.stack': 'Stack Trace',
+  'settings.system.crashLogs.hint': 'Crash logs are retained for 30 days and automatically rotated.',
+  'settings.system.crashLogs.collapse': 'Collapse',
+  'settings.system.crashLogs.expand': 'Show details',
+
  // Settings > System > Software Update
  'settings.update.title': 'Software Update',
  'settings.update.currentVersion': 'Current version',
@@ -114,6 +135,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 +164,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
@@ -172,6 +197,9 @@ const en: Messages = {
  'settings.application.github.subtitle': 'Source code',
  'settings.application.whatsNew': "What's new",
  'settings.application.whatsNew.subtitle': 'Show release notes',
+  'settings.vault.title': 'Vault',
+  'settings.vault.showRecentHosts': 'Show recently connected hosts',
+  'settings.vault.showRecentHostsDesc': 'Display a section of recently connected hosts at the top of the vault',

  // Update notifications
  'update.available.title': 'Update Available',
@@ -265,6 +293,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',
@@ -276,6 +315,9 @@ const en: Messages = {
  'settings.terminal.behavior.scrollOnPaste': 'Scroll on paste',
  'settings.terminal.behavior.scrollOnPaste.desc':
    'Scroll terminal to bottom when pasting text',
+  'settings.terminal.behavior.smoothScrolling': 'Smooth scrolling',
+  'settings.terminal.behavior.smoothScrolling.desc':
+    'Animate terminal viewport scrolling instead of jumping instantly',
  'settings.terminal.behavior.linkModifier': 'Link modifier key',
  'settings.terminal.behavior.linkModifier.desc': 'Hold this key to click on links in terminal',
  'settings.terminal.behavior.linkModifier.none': 'None (click directly)',
@@ -286,6 +328,14 @@ const en: Messages = {
  'settings.terminal.scrollback.rows': 'Number of rows *',
  'settings.terminal.keywordHighlight.title': 'Keyword highlighting',
  'settings.terminal.keywordHighlight.resetColors': 'Reset to default colors',
+  'settings.terminal.keywordHighlight.addCustom': 'Add Custom Rule',
+  'settings.terminal.keywordHighlight.editCustom': 'Edit Rule',
+  'settings.terminal.keywordHighlight.labelField': 'Label & Color',
+  'settings.terminal.keywordHighlight.labelPlaceholder': 'Label (e.g., Down)',
+  'settings.terminal.keywordHighlight.patternField': 'Regex Pattern',
+  'settings.terminal.keywordHighlight.patternPlaceholder': 'Regex (e.g., \\bdown\\b)',
+  'settings.terminal.keywordHighlight.invalidPattern': 'Invalid regex pattern',
+  'settings.terminal.keywordHighlight.preview': 'Preview',
  'settings.terminal.section.localShell': 'Local Shell',
  'settings.terminal.localShell.shell': 'Shell executable',
  'settings.terminal.localShell.shell.desc': 'Path to the shell executable (e.g., /bin/zsh, pwsh.exe). Leave empty for system default.',
@@ -293,6 +343,11 @@ const en: Messages = {
  'settings.terminal.localShell.shell.detected': 'Detected',
  'settings.terminal.localShell.shell.notFound': 'Shell executable not found',
  'settings.terminal.localShell.shell.isDirectory': 'Path is a directory, not an executable',
+  'settings.terminal.localShell.shell.default': 'System Default',
+  'settings.terminal.localShell.shell.custom': 'Custom...',
+  'settings.terminal.localShell.shell.customPath': 'Shell executable path',
+  'settings.terminal.localShell.shell.commonPaths': 'Common paths',
+  'settings.terminal.localShell.shell.pathValid': 'Path valid',
  'settings.terminal.localShell.startDir': 'Starting directory',
  'settings.terminal.localShell.startDir.desc': 'Directory to start in when opening a local terminal. Leave empty for home directory.',
  'settings.terminal.localShell.startDir.placeholder': 'Home directory',
@@ -311,9 +366,25 @@ const en: Messages = {
  // Settings > Terminal > Rendering
  'settings.terminal.section.rendering': 'Rendering',
  'settings.terminal.rendering.renderer': 'Renderer',
-  'settings.terminal.rendering.renderer.desc': 'Choose the terminal rendering technology. Auto will use Canvas on low-memory devices. Changes take effect on new terminal sessions.',
+  'settings.terminal.rendering.renderer.desc': 'Choose the terminal rendering technology. Auto will use DOM on low-memory devices. Changes take effect on new terminal sessions.',
  'settings.terminal.rendering.auto': 'Auto',

+  // Settings > Terminal > Workspace Focus Indicator
+  'settings.terminal.section.workspaceFocus': 'Workspace Focus Indicator',
+  'settings.terminal.workspaceFocus.style': 'Focus indicator style',
+  'settings.terminal.workspaceFocus.style.desc': 'How to indicate which pane is focused in split view.',
+  'settings.terminal.workspaceFocus.dim': 'Dim unfocused panes',
+  'settings.terminal.workspaceFocus.border': 'Border on focused pane',
+
+  // Settings > Terminal > Autocomplete
+  'settings.terminal.section.autocomplete': 'Autocomplete',
+  'settings.terminal.autocomplete.enabled': 'Enable autocomplete',
+  'settings.terminal.autocomplete.enabled.desc': 'Show command suggestions based on history and command specs as you type.',
+  'settings.terminal.autocomplete.ghostText': 'Ghost text',
+  'settings.terminal.autocomplete.ghostText.desc': 'Show inline gray suggestion text after the cursor (like fish shell).',
+  'settings.terminal.autocomplete.popupMenu': 'Popup menu',
+  'settings.terminal.autocomplete.popupMenu.desc': 'Show a floating list of multiple suggestions.',
+
  // Settings > Shortcuts
  'settings.shortcuts.section.scheme': 'Hotkey Scheme',
  'settings.shortcuts.scheme.label': 'Keyboard shortcuts',
@@ -404,8 +475,24 @@ const en: Messages = {
  'vault.groups.placeholder.example': 'e.g. Production',
  'vault.groups.parentLabel': 'Parent',
  'vault.groups.pathLabel': 'Path',
+  'vault.groups.settings': 'Group Settings',
+  'vault.groups.details': 'Group Details',
+  'vault.groups.details.general': 'General',
+  'vault.groups.details.ssh': 'SSH',
+  'vault.groups.details.telnet': 'Telnet',
+  'vault.groups.details.advanced': 'Advanced',
+  'vault.groups.details.appearance': 'Appearance',
+  'vault.groups.details.mosh': 'Mosh',
+  'vault.groups.details.parentGroup': 'Parent Group',
+  'vault.groups.details.none': 'None',
+  'vault.groups.details.inherited': 'Inherited from group',
+  'vault.groups.details.addProtocol': 'Add Protocol',
+  'vault.groups.details.removeProtocol': 'Remove Protocol',
+  'vault.groups.details.fontFamily': 'Font Family',
+  'vault.groups.details.fontSize': 'Font Size',
  'vault.groups.errors.required': 'Group name is required.',
  'vault.groups.errors.invalidChars': "Group name cannot include '/' or '\\\\'.",
+  'vault.groups.errors.duplicatePath': 'A group with this name already exists at this location.',

  'vault.managedSource.unmanage': 'Unmanage',
  'vault.managedSource.unmanageSuccess': 'Successfully unmanaged group',
@@ -429,6 +516,10 @@ const en: Messages = {
  'vault.hosts.export.toast.successWithSkipped': 'Exported {count} hosts to CSV ({skipped} unsupported hosts skipped)',
  'vault.hosts.export.toast.noHosts': 'No hosts to export',
  'vault.hosts.allHosts': 'All hosts',
+  'vault.hosts.pinned': 'Pinned',
+  'vault.hosts.recentlyConnected': 'Recently Connected',
+  'vault.hosts.pinToTop': 'Pin to Top',
+  'vault.hosts.unpin': 'Unpin',
  'vault.hosts.copyCredentials': 'Copy Credentials',
  'vault.hosts.copyCredentials.toast.success': 'Credentials copied to clipboard',
  'vault.hosts.copyCredentials.toast.noPassword': 'No password saved for this host',
@@ -438,6 +529,7 @@ const en: Messages = {
  'vault.hosts.deselectAll': 'Deselect All',
  'vault.hosts.deleteSelected': 'Delete ({count})',
  'vault.hosts.deleteMultiple.success': 'Deleted {count} hosts',
+  'vault.hosts.moveToGroup.success': 'Moved {host} to {group}',
  'vault.hosts.empty.title': 'Set up your hosts',
  'vault.hosts.empty.desc': 'Save hosts to quickly connect to your servers, VMs, and containers.',

@@ -563,6 +655,8 @@ const en: Messages = {
  'sftp.filter.placeholder': 'Filter by filename...',
  'sftp.bookmark.add': 'Bookmark this path',
  'sftp.bookmark.remove': 'Remove bookmark',
+  'sftp.bookmark.addGlobal': '+Global',
+  'sftp.bookmark.addGlobalTooltip': 'Save as global bookmark (shared across all hosts)',
  'sftp.bookmark.empty': 'No bookmarks yet',
  'sftp.columns.name': 'Name',
  'sftp.columns.modified': 'Modified',
@@ -579,8 +673,21 @@ const en: Messages = {
  'sftp.dragDropToUpload': 'Drag and drop files here to upload',
  'sftp.retry': 'Retry',
  'sftp.context.open': 'Open',
+  'sftp.context.navigateTo': 'Navigate to',
+  'sftp.context.moveTo': 'Move to...',
+  'sftp.context.moveToParent': 'Move to parent directory',
+  'sftp.moveTo.title': 'Move to directory',
+  'sftp.moveTo.placeholder': 'Enter target directory path',
+  'sftp.moveTo.confirm': 'Move',
+  'sftp.moveTo.pathNotFound': 'Directory not found or inaccessible',
  'sftp.context.download': 'Download',
  'sftp.context.copyToOtherPane': 'Copy to other pane',
+  'sftp.viewMode.label': 'View mode',
+  'sftp.viewMode.list': 'List view',
+  'sftp.viewMode.tree': 'Tree view',
+  'sftp.tree.loadError': 'Failed to load directory',
+  'sftp.tree.loading': 'Loading...',
+  'sftp.kind.folder': 'Folder',
  'sftp.context.rename': 'Rename',
  'sftp.context.permissions': 'Permissions',
  'sftp.context.delete': 'Delete',
@@ -593,12 +700,21 @@ const en: Messages = {
  'sftp.path.doubleClickToEdit': 'Double-click to edit path',
  'sftp.showHiddenPaths': 'Hidden paths',
  'sftp.task.waiting': 'Waiting...',
+  'sftp.transfer.preparing': 'preparing...',
  'sftp.status.loading': 'Loading...',
  'sftp.status.uploading': 'Uploading...',
  'sftp.status.ready': 'Ready',
  'sftp.transfers': 'Transfers',
  'sftp.transfers.active': '{count} active',
  'sftp.transfers.clearCompleted': 'Clear completed',
+  'sftp.transfers.calculatingTotal': 'Calculating total size...',
+  'sftp.transfers.filesCount': '{count} files',
+  'sftp.transfers.filesProgress': '{current}/{total} files',
+  'sftp.transfers.expandChildren': 'Show files',
+  'sftp.transfers.collapseChildren': 'Hide files',
+  'sftp.transfers.expandChildList': 'Show detail',
+  'sftp.transfers.collapseChildList': 'Hide',
+  'sftp.transfers.dragToResize': 'Drag to resize',
  'sftp.goUp': 'Go up',
  'sftp.goToTerminalCwd': 'Go to terminal directory',
  'sftp.encoding.label': 'Filename Encoding',
@@ -618,6 +734,9 @@ const en: Messages = {
  'sftp.deleteConfirm.single': 'Delete "{name}"?',
  'sftp.deleteConfirm.title': 'Delete {count} item(s)?',
  'sftp.deleteConfirm.desc': 'This action cannot be undone. The following will be deleted:',
+  'sftp.deleteConfirm.descSingle': 'This action cannot be undone.',
+  'sftp.deleteConfirm.host': 'Host',
+  'sftp.deleteConfirm.path': 'Path',
  'sftp.error.loadFailed': 'Failed to load directory',
  'sftp.error.downloadFailed': 'Download failed',
  'sftp.error.uploadFailed': 'Upload failed',
@@ -672,6 +791,7 @@ const en: Messages = {
  'sftp.upload.phase.compressed': 'Compressed',

  // SFTP File Opener
+  'sftp.context.copyPath': 'Copy file path',
  'sftp.context.openWith': 'Open with...',
  'sftp.context.edit': 'Edit',
  'sftp.context.preview': 'Preview',
@@ -708,6 +828,15 @@ const en: Messages = {

  // Settings > SFTP File Associations
  'settings.tab.sftpFileAssociations': 'SFTP',
+  'settings.sftp.transferConcurrency': 'Transfer Concurrency',
+  'settings.sftp.transferConcurrency.desc': 'Number of files to transfer in parallel when uploading or downloading folders. Higher values may improve speed but can overwhelm some servers.',
+  'settings.sftp.defaultOpener': 'Default File Opener',
+  'settings.sftp.defaultOpener.desc': 'Choose the default application for opening files without a specific file association',
+  'settings.sftp.defaultOpener.ask': 'Always ask',
+  'settings.sftp.defaultOpener.askDesc': 'Show a dialog to choose an application each time',
+  'settings.sftp.defaultOpener.builtInDesc': 'Open text files in the built-in editor by default',
+  'settings.sftp.defaultOpener.systemApp': 'Choose Application...',
+  'settings.sftp.defaultOpener.systemAppDesc': 'Open files with a specific application by default',
  'settings.sftpFileAssociations.title': 'SFTP File Associations',
  'settings.sftpFileAssociations.desc': 'Configure default applications for opening files by extension',
  'settings.sftpFileAssociations.extension': 'Extension',
@@ -729,6 +858,20 @@ const en: Messages = {
  'settings.sftp.autoSync.desc': 'Automatically sync file changes back to the remote server when opening files with external applications',
  'settings.sftp.autoSync.enable': 'Enable auto-sync',
  'settings.sftp.autoSync.enableDesc': 'When you save a file in an external application, changes will be automatically uploaded to the remote server',
+
+  // Settings > SFTP Auto Open Sidebar
+  'settings.sftp.autoOpenSidebar': 'Auto-open sidebar on connect',
+  'settings.sftp.autoOpenSidebar.desc': 'Automatically open the SFTP file browser sidebar when connecting to a host',
+  'settings.sftp.autoOpenSidebar.enable': 'Enable auto-open sidebar',
+  'settings.sftp.autoOpenSidebar.enableDesc': 'The SFTP sidebar will open automatically when a terminal session connects to a remote host',
+
+  'settings.sftp.defaultViewMode': 'Default View Mode',
+  'settings.sftp.defaultViewMode.desc': 'Choose the default view mode when opening a new SFTP tab. Per-host preferences override this setting.',
+  'settings.sftp.defaultViewMode.list': 'List View',
+  'settings.sftp.defaultViewMode.listDesc': 'Display files in a flat list for the current directory',
+  'settings.sftp.defaultViewMode.tree': 'Tree View',
+  'settings.sftp.defaultViewMode.treeDesc': 'Display files in a hierarchical tree structure',
+
  'sftp.autoSync.success': 'File synced to remote: {fileName}',
  'sftp.autoSync.error': 'Failed to sync file: {error}',

@@ -774,6 +917,8 @@ const en: Messages = {
  'qs.search.placeholder': 'Search hosts or tabs',
  'qs.jumpTo': 'Jump To',
  'qs.localTerminal': 'Local Terminal',
+  'qs.localShells': 'Local Shells',
+  'qs.default': 'Default',

  // Select Host panel
  'selectHost.title': 'Select Host',
@@ -816,6 +961,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',
@@ -824,9 +992,12 @@ const en: Messages = {
  'hostDetails.password.save': 'Save password',
  'hostDetails.identity.suggestions': 'Identities',
  'hostDetails.identity.missing': 'Identity not found',
-  'hostDetails.credential.keyCertificate': 'Key, Certificate',
+  'hostDetails.credential.keyCertificate': 'Key, Certificate, Local Key File',
  'hostDetails.credential.key': 'Key',
  'hostDetails.credential.certificate': 'Certificate',
+  'hostDetails.credential.localKeyFile': 'Local Key File',
+  'hostDetails.credential.localKeyFilePlaceholder': '~/.ssh/id_ed25519',
+  'hostDetails.credential.browseKeyFile': 'Browse...',
  'hostDetails.credential.missing': 'Credential not found',
  'hostDetails.keys.search': 'Search keys...',
  'hostDetails.keys.empty': 'No keys available',
@@ -834,13 +1005,19 @@ const en: Messages = {
  'hostDetails.certs.empty': 'No certificates available',
  'hostDetails.agentForwarding': 'Forward SSH Agent',
  'hostDetails.agentForwarding.desc': 'Allow remote server to use your local SSH keys (e.g., for git operations)',
-  'hostDetails.agentForwarding.agentNotRunning': 'SSH Agent is not running',
-  'hostDetails.agentForwarding.agentNotRunningHint': 'Enable OpenSSH Authentication Agent service in Windows Services (services.msc) for agent forwarding to work.',
+  'hostDetails.agentForwarding.agentNotRunning': 'SSH Agent is not available',
+  'hostDetails.agentForwarding.agentNotRunningHint': 'No SSH agent detected. Enable OpenSSH Authentication Agent in Windows Services, or use a compatible agent such as Bitwarden, 1Password, or gpg-agent.',
  'hostDetails.section.agentForwarding': 'SSH Agent',
+  'hostDetails.section.deviceType': 'Device Type',
+  'hostDetails.deviceType': 'Network Device Mode',
+  'hostDetails.deviceType.desc': 'Enable for network equipment (switches, routers, firewalls) connected via SSH. Commands are sent as-is without shell wrapping, compatible with vendor CLIs like Huawei VRP and Cisco IOS.',
+  'hostDetails.deviceType.warning': 'AI agent commands will be sent directly without exit code tracking. Only enable for devices that do not run a standard shell.',
  'hostDetails.section.legacyAlgorithms': 'Legacy Algorithms',
  'hostDetails.legacyAlgorithms': 'Allow Legacy Algorithms',
  'hostDetails.legacyAlgorithms.desc': 'Enable deprecated SSH algorithms (diffie-hellman-group1, ssh-dss, 3des-cbc, etc.) for connecting to older network equipment.',
  'hostDetails.legacyAlgorithms.warning': 'These algorithms have known security weaknesses. Only enable for legacy devices that do not support modern cryptography.',
+  'hostDetails.backspaceBehavior': 'Backspace Behavior',
+  'hostDetails.backspaceBehavior.default': 'Default',
  'hostDetails.jumpHosts': 'Proxy via Hosts',
  'hostDetails.jumpHosts.hops': '{count} hop(s)',
  'hostDetails.jumpHosts.direct': 'Direct',
@@ -1032,6 +1209,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,7 +1222,10 @@ 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.fontWeight': 'Font Weight',
  'terminal.themeModal.livePreview': 'Live Preview',
  'terminal.themeModal.themeType': '{type} theme',

@@ -1402,6 +1583,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',
@@ -1441,6 +1623,7 @@ const en: Messages = {
  'serial.field.localEchoDesc': 'Echo typed characters locally (for devices without remote echo)',
  'serial.field.lineMode': 'Line Mode',
  'serial.field.lineModeDesc': 'Buffer input and send on Enter (instead of character-by-character)',
+  'serial.field.charset': 'Charset',
  'serial.connectionError': 'Failed to connect to serial port',
  'serial.field.baudRatePlaceholder': 'Select or enter baud rate...',
  'serial.field.baudRateEmpty': 'Enter a custom baud rate',
@@ -1478,6 +1661,178 @@ const en: Messages = {

  // Text Editor
  'sftp.editor.wordWrap': 'Word Wrap',
+
+  // AI Settings
+  'ai.agentSettings': 'Agent Settings',
+  'ai.title': 'AI',
+  'ai.description': 'Configure AI providers, agents, and safety settings',
+  'ai.providers': 'Providers',
+  'ai.providers.empty': 'No providers configured. Add a provider to get started.',
+  'ai.providers.add': 'Add Provider',
+  'ai.providers.active': 'Active',
+  'ai.providers.apiKeyConfigured': 'API key configured',
+  'ai.providers.noApiKey': 'No API key',
+  'ai.providers.configure': 'Configure',
+  'ai.providers.remove': 'Remove',
+  'ai.providers.name': 'Display Name',
+  'ai.providers.name.placeholder': 'e.g. My Provider',
+  'ai.providers.apiKey': 'API Key',
+  'ai.providers.apiKey.placeholder': 'Enter API key',
+  'ai.providers.apiKey.decrypting': 'Decrypting...',
+  'ai.providers.baseUrl': 'Base URL',
+  'ai.providers.skipTLSVerify': 'Skip TLS certificate verification (for self-signed certs)',
+  'ai.providers.defaultModel': 'Default Model',
+  'ai.providers.defaultModel.placeholder': 'e.g. gpt-4o, claude-sonnet-4-20250514',
+  'ai.providers.refreshModels': 'Refresh models',
+  'ai.providers.searchModel': 'Search or type model ID...',
+  'ai.providers.filterModels': 'Filter models...',
+  'ai.providers.loadingModels': 'Loading models...',
+  'ai.providers.noMatchingModels': 'No matching models',
+  'ai.providers.clickToLoadModels': 'Click to load models',
+  'ai.providers.showingModels': 'Showing first 100 of {count} models. Type to filter.',
+  'ai.providers.advancedParams': 'Advanced Parameters',
+  'ai.providers.advancedParams.hint': 'Leave blank to use provider defaults.',
+  'ai.providers.advancedParams.maxTokens.placeholder': 'e.g. 4096',
+  'ai.providers.advancedParams.default': 'Provider default',
+
+  // AI Codex
+  'ai.codex': 'Codex',
+  'ai.codex.title': 'Codex CLI',
+  'ai.codex.description': 'Uses codex + codex-acp for ACP protocol streaming. Login with ChatGPT subscription here, or configure an OpenAI provider API key (passed as CODEX_API_KEY).',
+  'ai.codex.detecting': 'Detecting...',
+  'ai.codex.notFound': 'Not found',
+  'ai.codex.awaitingLogin': 'Awaiting login',
+  'ai.codex.connectedChatGPT': 'Connected via ChatGPT',
+  'ai.codex.connectedApiKey': 'Connected via API key',
+  'ai.codex.notConnected': 'Not connected',
+  'ai.codex.statusUnknown': 'Status unknown',
+  'ai.codex.path': 'Path:',
+  'ai.codex.notFoundHint': 'Could not find codex in PATH. Install it or specify the executable path below.',
+  'ai.codex.customPathPlaceholder': 'e.g. /usr/local/bin/codex',
+  'ai.codex.check': 'Check',
+  'ai.codex.openLogin': 'Open Login',
+  'ai.codex.logout': 'Logout',
+  'ai.codex.connectChatGPT': 'Connect ChatGPT',
+  'ai.codex.refreshStatus': 'Refresh Status',
+  'ai.codex.apiKeyHint': 'Enabled OpenAI provider API key detected. Codex ACP can also authenticate without ChatGPT login.',
+
+  // AI Claude Code
+  'ai.claude.title': 'Claude Code',
+  'ai.claude.description': "Anthropic's agentic coding assistant. Uses claude-agent-acp for ACP protocol streaming.",
+  'ai.claude.detecting': 'Detecting...',
+  'ai.claude.detected': 'Detected',
+  'ai.claude.notFound': 'Not found',
+  'ai.claude.path': 'Path:',
+  'ai.claude.notFoundHint': 'Could not find claude in PATH. Install it or specify the executable path below.',
+  'ai.claude.customPathPlaceholder': 'e.g. /usr/local/bin/claude',
+  'ai.claude.check': 'Check',
+
+  // AI GitHub Copilot CLI
+  'ai.copilot.title': 'GitHub Copilot CLI',
+  'ai.copilot.description': 'Uses GitHub Copilot CLI via ACP over stdio (`copilot --acp --stdio`). Once detected, it can be selected as an external coding agent.',
+  'ai.copilot.detecting': 'Detecting...',
+  'ai.copilot.detected': 'Detected',
+  'ai.copilot.notFound': 'Not found',
+  'ai.copilot.path': 'Path:',
+  'ai.copilot.notFoundHint': 'Could not find copilot in PATH. Install it or specify the executable path below.',
+  'ai.copilot.customPathPlaceholder': 'e.g. /usr/local/bin/copilot',
+  'ai.copilot.check': 'Check',
+
+  // AI Default Agent
+  'ai.defaultAgent': 'Default Agent',
+  'ai.defaultAgent.description': 'Agent to use when starting a new AI session',
+  'ai.defaultAgent.catty': 'Catty (Built-in)',
+
+  // AI Chat
+  'ai.chat.noProvider': 'No AI provider is configured. Go to **Settings → AI → Providers** to add and enable a provider.',
+  'ai.chat.toolDenied': 'Action was rejected by the user.',
+  'ai.chat.toolApproved': 'Approved',
+  'ai.chat.toolApprovalHint': 'Press Enter to approve, Escape to reject',
+  'ai.chat.approve': 'Approve',
+  'ai.chat.reject': 'Reject',
+  'ai.chat.toolLabel': 'Tool',
+  'ai.chat.targetLabel': 'Target',
+  'ai.chat.permissionRequired': 'Permission Required',
+  'ai.chat.permissionDescription': 'The AI agent wants to execute a tool call that requires your approval.',
+  'ai.chat.commandBlocked': 'This command is blocked by your security policy and cannot be executed.',
+  'ai.chat.recommendAllow': 'Allow',
+  'ai.chat.recommendConfirm': 'Confirm',
+  'ai.chat.recommendDeny': 'Deny',
+  'ai.chat.exportConversation': 'Export conversation',
+  'ai.chat.exportAs': 'Export As',
+  'ai.chat.exportMarkdown': 'Markdown',
+  'ai.chat.exportJSON': 'JSON',
+  'ai.chat.exportPlainText': 'Plain Text',
+  'ai.chat.thinking': 'Thinking',
+  'ai.chat.thoughtFor': 'Thought for {duration}',
+  'ai.chat.thought': 'Thought',
+  'ai.chat.agents': 'Agents',
+  'ai.chat.detectedOnMachine': 'Detected on this machine',
+  'ai.chat.rescan': 'Re-scan',
+  'ai.chat.permObserver': 'Observer',
+  'ai.chat.permConfirm': 'Confirm',
+  'ai.chat.permAuto': 'Auto',
+  'ai.chat.permObserverDesc': 'Read only',
+  'ai.chat.permConfirmDesc': 'Ask before actions',
+  'ai.chat.permAutoDesc': 'Execute freely',
+  'ai.chat.emptyHint': 'Ask about your servers, run commands, or get help with configurations.',
+  'ai.chat.placeholder': 'Message {agent} — @ to include context, / for commands',
+  'ai.chat.placeholderDefault': 'Message Catty Agent...',
+  'ai.chat.noModel': 'No model',
+  'ai.chat.recent': 'Recent',
+  'ai.chat.viewAll': 'View All',
+  'ai.chat.untitled': 'Untitled',
+  'ai.chat.justNow': 'Just now',
+  'ai.chat.minutesAgo': '{n}m ago',
+  'ai.chat.hoursAgo': '{n}h ago',
+  'ai.chat.daysAgo': '{n}d ago',
+  'ai.chat.newChat': 'New Chat',
+  'ai.chat.allSessions': 'All Sessions',
+  'ai.chat.noSessions': 'No previous sessions',
+  'ai.chat.retryHint': 'You can retry by sending your message again.',
+  'ai.chat.approvalTimeout': 'Tool approval timed out after 5 minutes. You can retry by sending your message again.',
+  'ai.chat.menuHosts': 'Hosts',
+  'ai.chat.menuContext': 'Context',
+  'ai.chat.menuFiles': 'Files',
+  'ai.chat.menuImage': 'Image',
+  'ai.chat.menuMentionHost': 'Mention Host',
+
+  // AI Error
+  'ai.codex.bridgeError': 'Codex main-process handlers are not loaded yet. Fully restart Netcatty, or restart the Electron dev process, then try again.',
+
+  // AI Web Search
+  'ai.webSearch.title': 'Web Search',
+  'ai.webSearch.enable': 'Enable Web Search',
+  'ai.webSearch.enable.description': 'Allow the AI agent to search the web for current information.',
+  'ai.webSearch.provider': 'Search Provider',
+  'ai.webSearch.provider.description': 'Choose a web search API provider.',
+  'ai.webSearch.apiKey': 'API Key',
+  'ai.webSearch.apiKey.description': 'API key for the selected search provider.',
+  'ai.webSearch.apiKey.placeholder': 'Enter API key...',
+  'ai.webSearch.apiHost': 'API Host',
+  'ai.webSearch.apiHost.description': 'Custom API endpoint. Leave default unless you use a proxy.',
+  'ai.webSearch.apiHost.searxngDescription': 'URL of your SearXNG instance (required).',
+  'ai.webSearch.maxResults': 'Max Results',
+  'ai.webSearch.maxResults.description': 'Maximum number of search results to return (1-20).',
+
+  // AI Safety Settings
+  'ai.safety.title': 'Safety',
+  'ai.safety.permissionMode': 'Permission Mode',
+  'ai.safety.permissionMode.description': 'Controls how the AI interacts with your terminals. Observer mode blocks all write operations via MCP Server, enforced for both built-in and ACP agents. Confirm mode is advisory for ACP agents (they control their own tool approval flow).',
+  'ai.safety.permissionMode.observer': 'Observer - Read only, no actions',
+  'ai.safety.permissionMode.confirm': 'Confirm - Ask before actions',
+  'ai.safety.permissionMode.autonomous': 'Autonomous - Execute freely',
+  'ai.safety.commandTimeout': 'Command Timeout',
+  'ai.safety.commandTimeout.description': 'Maximum seconds a command can run before being terminated. Applies to both built-in and ACP agents.',
+  'ai.safety.commandTimeout.unit': 'sec',
+  'ai.safety.maxIterations': 'Max Iterations',
+  'ai.safety.maxIterations.description': 'Maximum number of AI tool-use loops to prevent runaway execution. ACP agents may have their own internal iteration limits that take precedence.',
+  'ai.safety.blocklist': 'Command Blocklist',
+  'ai.safety.blocklist.description': 'Regex patterns to block dangerous commands. Applies to both built-in and ACP agents via MCP Server.',
+  'ai.safety.blocklist.placeholder': 'Regex pattern...',
+  'ai.safety.blocklist.reset': 'Reset to defaults',
+  'ai.safety.blocklist.add': 'Add pattern',
+  'ai.safety.note': 'Command Blocklist, Command Timeout, and Observer mode are enforced at the MCP Server level, applying to all agent types. Confirm mode and Max Iterations are fully enforced for the built-in agent; ACP agents may have their own internal controls for these settings.',
 };

 export default en;
--- a/application/i18n/locales/zh-CN.ts
+++ b/application/i18n/locales/zh-CN.ts
@@ -5,11 +5,15 @@ const zhCN: Messages = {
  'common.save': '保存',
  'common.cancel': '取消',
  'common.close': '关闭',
+  'common.reset': '重置',
+  'common.zoomIn': '放大',
+  'common.zoomOut': '缩小',
  'common.settings': '设置',
  'common.search': '搜索',
  'common.connect': '连接',
  'common.terminal': '终端',
  'common.create': '创建',
+  'common.add': '添加',
  'common.rename': '重命名',
  'common.refresh': '刷新',
  'common.continue': '继续',
@@ -20,6 +24,7 @@ const zhCN: Messages = {
  'common.back': '返回',
  'common.apply': '应用',
  'common.use': '使用',
+  'common.useGlobal': '跟随全局',
  'common.left': '左侧',
  'common.right': '右侧',
  'common.more': '更多',
@@ -37,6 +42,7 @@ const zhCN: Messages = {
  // Dialogs / prompts
  'confirm.deleteHost': '删除主机 "{name}"？',
  'confirm.deleteIdentity': '删除身份 "{name}"？',
+  'confirm.removeProvider': '移除提供商 "{name}"？',
  'dialog.renameWorkspace.title': '重命名工作区',
  'dialog.renameSession.title': '重命名会话',
  'field.name': '名称',
@@ -78,6 +84,21 @@ const zhCN: Messages = {
  'settings.system.credentials.unavailableHint': '在其他用户或机器上加密的凭据无法在此处解密。请在当前设备重新输入并保存凭据。',
  'settings.system.credentials.portabilityHint': '云同步可跨设备，因为使用主密钥加密；本地 safeStorage 加密仅绑定当前系统用户/设备。',

+  // Settings > System > Crash Logs
+  'settings.system.crashLogs.title': '崩溃日志',
+  'settings.system.crashLogs.description': '查看主进程错误日志，帮助诊断异常行为。',
+  'settings.system.crashLogs.noLogs': '未找到崩溃日志。',
+  'settings.system.crashLogs.entries': '{count} 条记录',
+  'settings.system.crashLogs.clear': '清除所有日志',
+  'settings.system.crashLogs.cleared': '已清除 {count} 个日志文件。',
+  'settings.system.crashLogs.source': '来源',
+  'settings.system.crashLogs.time': '时间',
+  'settings.system.crashLogs.message': '消息',
+  'settings.system.crashLogs.stack': '堆栈跟踪',
+  'settings.system.crashLogs.hint': '崩溃日志保留 30 天，超期自动清理。',
+  'settings.system.crashLogs.collapse': '收起',
+  'settings.system.crashLogs.expand': '查看详情',
+
  // Settings > System > Software Update
  'settings.update.title': '软件更新',
  'settings.update.currentVersion': '当前版本',
@@ -98,6 +119,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 +148,8 @@ const zhCN: Messages = {
  'settings.globalHotkey.reset': '恢复默认',
  'settings.globalHotkey.closeToTray': '关闭时最小化到托盘',
  'settings.globalHotkey.closeToTrayDesc': '启用后，关闭窗口将最小化到系统托盘而不是退出程序。',
+  'settings.globalHotkey.enabled': '启用全局快捷键',
+  'settings.globalHotkey.enabledDesc': '注册系统级键盘快捷键。禁用后将取消所有全局快捷键注册。',
  'settings.globalHotkey.hint': '全局快捷键在系统范围内工作，可快速显示或隐藏窗口（下拉式终端风格）。',

  // Tray Panel
@@ -156,6 +181,9 @@ const zhCN: Messages = {
  'settings.application.github.subtitle': '源代码',
  'settings.application.whatsNew': '更新内容',
  'settings.application.whatsNew.subtitle': '查看发布说明',
+  'settings.vault.title': '主机库',
+  'settings.vault.showRecentHosts': '显示最近连接的主机',
+  'settings.vault.showRecentHostsDesc': '在主机列表顶部显示最近连接过的主机',

  // Update notifications
  'update.available.title': '发现新版本',
@@ -267,8 +295,24 @@ const zhCN: Messages = {
  'vault.groups.placeholder.example': '例如：Production',
  'vault.groups.parentLabel': '父级',
  'vault.groups.pathLabel': '路径',
+  'vault.groups.settings': '分组设置',
+  'vault.groups.details': '分组详情',
+  'vault.groups.details.general': '常规',
+  'vault.groups.details.ssh': 'SSH',
+  'vault.groups.details.telnet': 'Telnet',
+  'vault.groups.details.advanced': '高级',
+  'vault.groups.details.appearance': '外观',
+  'vault.groups.details.mosh': 'Mosh',
+  'vault.groups.details.parentGroup': '父分组',
+  'vault.groups.details.none': '无',
+  'vault.groups.details.inherited': '继承自分组',
+  'vault.groups.details.addProtocol': '添加协议',
+  'vault.groups.details.removeProtocol': '移除协议',
+  'vault.groups.details.fontFamily': '字体',
+  'vault.groups.details.fontSize': '字号',
  'vault.groups.errors.required': '分组名称不能为空。',
  'vault.groups.errors.invalidChars': "分组名称不能包含 '/' 或 '\\\\'.",
+  'vault.groups.errors.duplicatePath': '该位置已存在同名分组。',

  'vault.managedSource.unmanage': '取消托管',
  'vault.managedSource.unmanageSuccess': '已取消托管分组',
@@ -292,6 +336,10 @@ const zhCN: Messages = {
  'vault.hosts.export.toast.successWithSkipped': '已导出 {count} 个主机到 CSV（跳过 {skipped} 个不支持的主机）',
  'vault.hosts.export.toast.noHosts': '没有主机可导出',
  'vault.hosts.allHosts': '全部主机',
+  'vault.hosts.pinned': '已置顶',
+  'vault.hosts.recentlyConnected': '最近连接',
+  'vault.hosts.pinToTop': '置顶',
+  'vault.hosts.unpin': '取消置顶',
  'vault.hosts.copyCredentials': '复制账密信息',
  'vault.hosts.copyCredentials.toast.success': '账密信息已复制到剪贴板',
  'vault.hosts.copyCredentials.toast.noPassword': '该主机未保存密码',
@@ -301,6 +349,7 @@ const zhCN: Messages = {
  'vault.hosts.deselectAll': '取消全选',
  'vault.hosts.deleteSelected': '删除 ({count})',
  'vault.hosts.deleteMultiple.success': '已删除 {count} 个主机',
+  'vault.hosts.moveToGroup.success': '已将 {host} 移动到 {group}',
  'vault.hosts.empty.title': '设置你的主机',
  'vault.hosts.empty.desc': '保存主机以快速连接到你的服务器、虚拟机和容器。',

@@ -401,6 +450,8 @@ const zhCN: Messages = {
  'sftp.filter.placeholder': '按文件名筛选...',
  'sftp.bookmark.add': '收藏此路径',
  'sftp.bookmark.remove': '取消收藏',
+  'sftp.bookmark.addGlobal': '+全局',
+  'sftp.bookmark.addGlobalTooltip': '保存为全局收藏（所有主机共享）',
  'sftp.bookmark.empty': '暂无收藏路径',
  'sftp.columns.name': '名称',
  'sftp.columns.modified': '修改时间',
@@ -417,8 +468,21 @@ const zhCN: Messages = {
  'sftp.dragDropToUpload': '拖拽文件到这里上传',
  'sftp.retry': '重试',
  'sftp.context.open': '打开',
+  'sftp.context.navigateTo': '跳转到这里',
+  'sftp.context.moveTo': '移动到...',
+  'sftp.context.moveToParent': '移动到上级目录',
+  'sftp.moveTo.title': '移动到目录',
+  'sftp.moveTo.placeholder': '输入目标目录路径',
+  'sftp.moveTo.confirm': '移动',
+  'sftp.moveTo.pathNotFound': '目录不存在或无法访问',
  'sftp.context.download': '下载',
  'sftp.context.copyToOtherPane': '复制到另一侧',
+  'sftp.viewMode.label': '视图模式',
+  'sftp.viewMode.list': '列表视图',
+  'sftp.viewMode.tree': '树形视图',
+  'sftp.tree.loadError': '加载目录失败',
+  'sftp.tree.loading': '加载中...',
+  'sftp.kind.folder': '文件夹',
  'sftp.context.rename': '重命名',
  'sftp.context.permissions': '权限',
  'sftp.context.delete': '删除',
@@ -431,12 +495,21 @@ const zhCN: Messages = {
  'sftp.path.doubleClickToEdit': '双击编辑路径',
  'sftp.showHiddenPaths': '隐藏的路径',
  'sftp.task.waiting': '等待中...',
+  'sftp.transfer.preparing': '准备中...',
  'sftp.status.loading': '加载中...',
  'sftp.status.uploading': '上传中...',
  'sftp.status.ready': '就绪',
  'sftp.transfers': '传输',
  'sftp.transfers.active': '{count} 个进行中',
  'sftp.transfers.clearCompleted': '清除已完成',
+  'sftp.transfers.calculatingTotal': '正在统计总大小...',
+  'sftp.transfers.filesCount': '{count} 个文件',
+  'sftp.transfers.filesProgress': '{current}/{total} 个文件',
+  'sftp.transfers.expandChildren': '展开文件',
+  'sftp.transfers.collapseChildren': '收起文件',
+  'sftp.transfers.expandChildList': '展开详情',
+  'sftp.transfers.collapseChildList': '收起',
+  'sftp.transfers.dragToResize': '拖拽调整高度',
  'sftp.goUp': '上一级',
  'sftp.goToTerminalCwd': '定位到终端当前目录',
  'sftp.encoding.label': '文件名编码',
@@ -456,6 +529,9 @@ const zhCN: Messages = {
  'sftp.deleteConfirm.single': '删除 "{name}"？',
  'sftp.deleteConfirm.title': '删除 {count} 个项目？',
  'sftp.deleteConfirm.desc': '此操作不可撤销，将删除以下内容：',
+  'sftp.deleteConfirm.descSingle': '此操作不可撤销。',
+  'sftp.deleteConfirm.host': '主机',
+  'sftp.deleteConfirm.path': '路径',
  'sftp.error.loadFailed': '加载目录失败',
  'sftp.error.downloadFailed': '下载失败',
  'sftp.error.uploadFailed': '上传失败',
@@ -488,6 +564,8 @@ const zhCN: Messages = {
  'qs.search.placeholder': '搜索主机或标签页',
  'qs.jumpTo': '跳转到',
  'qs.localTerminal': '本地终端',
+  'qs.localShells': '本地 Shell',
+  'qs.default': '默认',

  // Select Host panel
  'selectHost.title': '选择主机',
@@ -526,6 +604,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': '密码',
@@ -534,9 +635,12 @@ const zhCN: Messages = {
  'hostDetails.password.save': '保存密码',
  'hostDetails.identity.suggestions': '身份',
  'hostDetails.identity.missing': '身份不存在',
-  'hostDetails.credential.keyCertificate': '密钥 / 证书',
+  'hostDetails.credential.keyCertificate': '密钥 / 证书 / 本地密钥',
  'hostDetails.credential.key': '密钥',
  'hostDetails.credential.certificate': '证书',
+  'hostDetails.credential.localKeyFile': '本地密钥文件',
+  'hostDetails.credential.localKeyFilePlaceholder': '~/.ssh/id_ed25519',
+  'hostDetails.credential.browseKeyFile': '浏览…',
  'hostDetails.credential.missing': '凭据不存在',
  'hostDetails.keys.search': '搜索密钥…',
  'hostDetails.keys.empty': '暂无密钥',
@@ -544,13 +648,19 @@ const zhCN: Messages = {
  'hostDetails.certs.empty': '暂无证书',
  'hostDetails.agentForwarding': '转发 SSH 密钥',
  'hostDetails.agentForwarding.desc': '允许远程服务器使用本地 SSH 密钥（例如用于 git 操作）',
-  'hostDetails.agentForwarding.agentNotRunning': 'SSH Agent 未运行',
-  'hostDetails.agentForwarding.agentNotRunningHint': '请在 Windows 服务管理器 (services.msc) 中启用 OpenSSH Authentication Agent 服务。',
+  'hostDetails.agentForwarding.agentNotRunning': 'SSH Agent 不可用',
+  'hostDetails.agentForwarding.agentNotRunningHint': '未检测到 SSH Agent。请启用 Windows OpenSSH Authentication Agent 服务，或使用兼容的 Agent（如 Bitwarden、1Password、gpg-agent）。',
  'hostDetails.section.agentForwarding': 'SSH 代理',
+  'hostDetails.section.deviceType': '设备类型',
+  'hostDetails.deviceType': '网络设备模式',
+  'hostDetails.deviceType.desc': '适用于通过 SSH 连接的网络设备（交换机、路由器、防火墙）。命令将原样发送，不进行 Shell 包装，兼容华为 VRP、Cisco IOS 等厂商 CLI。',
+  'hostDetails.deviceType.warning': 'AI 代理命令将直接发送，无法获取退出码。仅建议在设备不运行标准 Shell 时启用。',
  'hostDetails.section.legacyAlgorithms': '旧版算法',
  'hostDetails.legacyAlgorithms': '允许旧版算法',
  'hostDetails.legacyAlgorithms.desc': '启用已弃用的 SSH 算法（diffie-hellman-group1、ssh-dss、3des-cbc 等）以连接老旧网络设备。',
  'hostDetails.legacyAlgorithms.warning': '这些算法存在已知安全漏洞，仅建议在老旧设备不支持现代加密时启用。',
+  'hostDetails.backspaceBehavior': 'Backspace 行为',
+  'hostDetails.backspaceBehavior.default': '默认',
  'hostDetails.jumpHosts': '通过主机代理',
  'hostDetails.jumpHosts.hops': '{count} 跳',
  'hostDetails.jumpHosts.direct': '直连',
@@ -714,6 +824,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,7 +837,10 @@ 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.fontWeight': '字体粗细',
  'terminal.themeModal.livePreview': '实时预览',
  'terminal.themeModal.themeType': '{type} 主题',

@@ -998,6 +1112,7 @@ const zhCN: Messages = {
  'sftp.upload.phase.compressed': '压缩传输',

  // SFTP File Opener
+  'sftp.context.copyPath': '复制文件路径',
  'sftp.context.openWith': '打开方式...',
  'sftp.context.edit': '编辑',
  'sftp.context.preview': '预览',
@@ -1034,6 +1149,15 @@ const zhCN: Messages = {

  // Settings > SFTP File Associations
  'settings.tab.sftpFileAssociations': 'SFTP',
+  'settings.sftp.transferConcurrency': '传输并发数',
+  'settings.sftp.transferConcurrency.desc': '上传或下载文件夹时并行传输的文件数量。较高的值可能提高速度，但可能导致某些服务器过载。',
+  'settings.sftp.defaultOpener': '默认文件打开方式',
+  'settings.sftp.defaultOpener.desc': '选择没有特定文件关联时的默认打开方式',
+  'settings.sftp.defaultOpener.ask': '每次询问',
+  'settings.sftp.defaultOpener.askDesc': '每次打开文件时弹出选择对话框',
+  'settings.sftp.defaultOpener.builtInDesc': '默认使用内置编辑器打开文本文件',
+  'settings.sftp.defaultOpener.systemApp': '选择应用程序...',
+  'settings.sftp.defaultOpener.systemAppDesc': '默认使用指定的外部应用程序打开文件',
  'settings.sftpFileAssociations.title': 'SFTP 文件关联',
  'settings.sftpFileAssociations.desc': '配置按扩展名打开文件的默认应用程序',
  'settings.sftpFileAssociations.extension': '扩展名',
@@ -1055,6 +1179,20 @@ const zhCN: Messages = {
  'settings.sftp.autoSync.desc': '使用外部应用程序打开文件时，自动将文件更改同步回远程服务器',
  'settings.sftp.autoSync.enable': '启用自动同步',
  'settings.sftp.autoSync.enableDesc': '在外部应用程序中保存文件时，更改将自动上传到远程服务器',
+
+  // Settings > SFTP 自动打开侧栏
+  'settings.sftp.autoOpenSidebar': '连接时自动打开侧栏',
+  'settings.sftp.autoOpenSidebar.desc': '连接到主机时自动打开 SFTP 文件浏览器侧栏',
+  'settings.sftp.autoOpenSidebar.enable': '启用自动打开侧栏',
+  'settings.sftp.autoOpenSidebar.enableDesc': '当终端会话连接到远程主机时，SFTP 侧栏将自动打开',
+
+  'settings.sftp.defaultViewMode': '默认视图模式',
+  'settings.sftp.defaultViewMode.desc': '选择打开新 SFTP 标签页时的默认视图模式。每个主机的偏好设置会覆盖此全局设置。',
+  'settings.sftp.defaultViewMode.list': '列表视图',
+  'settings.sftp.defaultViewMode.listDesc': '以平面列表显示当前目录的文件',
+  'settings.sftp.defaultViewMode.tree': '树形视图',
+  'settings.sftp.defaultViewMode.treeDesc': '以层级树形结构显示文件',
+
  'sftp.autoSync.success': '文件已同步到远程：{fileName}',
  'sftp.autoSync.error': '同步文件失败：{error}',

@@ -1141,6 +1279,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': '输出时自动滚动',
@@ -1149,6 +1298,8 @@ const zhCN: Messages = {
  'settings.terminal.behavior.scrollOnKeyPress.desc': '按键（例如 Enter）时将终端滚动到底部',
  'settings.terminal.behavior.scrollOnPaste': '粘贴时自动滚动',
  'settings.terminal.behavior.scrollOnPaste.desc': '粘贴文本时将终端滚动到底部',
+  'settings.terminal.behavior.smoothScrolling': '平滑滚动',
+  'settings.terminal.behavior.smoothScrolling.desc': '滚动终端视口时使用平滑动画',
  'settings.terminal.behavior.linkModifier': '链接修饰键',
  'settings.terminal.behavior.linkModifier.desc': '按住此键再点击终端中的链接',
  'settings.terminal.behavior.linkModifier.none': '无（直接点击）',
@@ -1159,6 +1310,14 @@ const zhCN: Messages = {
  'settings.terminal.scrollback.rows': '行数 *',
  'settings.terminal.keywordHighlight.title': '关键字高亮',
  'settings.terminal.keywordHighlight.resetColors': '重置为默认颜色',
+  'settings.terminal.keywordHighlight.addCustom': '添加自定义规则',
+  'settings.terminal.keywordHighlight.editCustom': '编辑规则',
+  'settings.terminal.keywordHighlight.labelField': '标签与颜色',
+  'settings.terminal.keywordHighlight.labelPlaceholder': '标签（如 Down）',
+  'settings.terminal.keywordHighlight.patternField': '正则表达式',
+  'settings.terminal.keywordHighlight.patternPlaceholder': '正则表达式（如 \\bdown\\b）',
+  'settings.terminal.keywordHighlight.invalidPattern': '无效的正则表达式',
+  'settings.terminal.keywordHighlight.preview': '预览',
  'settings.terminal.section.localShell': '本地 Shell',
  'settings.terminal.localShell.shell': 'Shell 可执行文件',
  'settings.terminal.localShell.shell.desc': 'Shell 可执行文件的路径（例如 /bin/zsh、pwsh.exe）。留空使用系统默认。',
@@ -1166,6 +1325,11 @@ const zhCN: Messages = {
  'settings.terminal.localShell.shell.detected': '检测到',
  'settings.terminal.localShell.shell.notFound': '未找到 Shell 可执行文件',
  'settings.terminal.localShell.shell.isDirectory': '路径是目录，不是可执行文件',
+  'settings.terminal.localShell.shell.default': '系统默认',
+  'settings.terminal.localShell.shell.custom': '自定义...',
+  'settings.terminal.localShell.shell.customPath': 'Shell 可执行文件路径',
+  'settings.terminal.localShell.shell.commonPaths': '常用路径',
+  'settings.terminal.localShell.shell.pathValid': '路径有效',
  'settings.terminal.localShell.startDir': '起始目录',
  'settings.terminal.localShell.startDir.desc': '打开本地终端时的起始目录。留空使用用户主目录。',
  'settings.terminal.localShell.startDir.placeholder': '用户主目录',
@@ -1184,9 +1348,18 @@ const zhCN: Messages = {
  // Settings > Terminal > Rendering
  'settings.terminal.section.rendering': '渲染',
  'settings.terminal.rendering.renderer': '渲染器',
-  'settings.terminal.rendering.renderer.desc': '选择终端渲染技术。自动模式会在低内存设备上使用 Canvas。更改将在新终端会话中生效。',
+  'settings.terminal.rendering.renderer.desc': '选择终端渲染技术。自动模式会在低内存设备上使用 DOM 渲染。更改将在新终端会话中生效。',
  'settings.terminal.rendering.auto': '自动',

+  // Settings > Terminal > Autocomplete
+  'settings.terminal.section.autocomplete': '自动补全',
+  'settings.terminal.autocomplete.enabled': '启用自动补全',
+  'settings.terminal.autocomplete.enabled.desc': '输入时根据历史命令和命令规范显示补全建议。',
+  'settings.terminal.autocomplete.ghostText': '行内建议',
+  'settings.terminal.autocomplete.ghostText.desc': '在光标后显示灰色的建议文本（类似 fish shell）。',
+  'settings.terminal.autocomplete.popupMenu': '弹出菜单',
+  'settings.terminal.autocomplete.popupMenu.desc': '显示包含多个建议的浮动列表。',
+
  // Settings > Shortcuts
  'settings.shortcuts.section.scheme': '快捷键方案',
  'settings.shortcuts.scheme.label': '键盘快捷键',
@@ -1417,6 +1590,7 @@ const zhCN: Messages = {
  'snippets.renameDialog.error.duplicate': '已存在同名的代码包',
  'snippets.renameDialog.error.invalidChars': '代码包名称只能包含字母、数字、连字符和下划线',

+  'snippets.field.noAutoRun': '仅粘贴（不自动执行）',
  // Snippet Shortkey
  'snippets.field.shortkey': '快捷键',
  'snippets.shortkey.placeholder': '点击设置快捷键',
@@ -1456,6 +1630,7 @@ const zhCN: Messages = {
  'serial.field.localEchoDesc': '本地回显输入字符（用于没有远程回显的设备）',
  'serial.field.lineMode': '行模式',
  'serial.field.lineModeDesc': '缓冲输入，按回车后发送（而不是逐字符发送）',
+  'serial.field.charset': '字符编码',
  'serial.connectionError': '连接串口失败',
  'serial.field.baudRatePlaceholder': '选择或输入波特率...',
  'serial.field.baudRateEmpty': '输入自定义波特率',
@@ -1493,6 +1668,178 @@ const zhCN: Messages = {

  // Text Editor
  'sftp.editor.wordWrap': '自动换行',
+
+  // AI Settings
+  'ai.agentSettings': 'Agent 设置',
+  'ai.title': 'AI',
+  'ai.description': '配置 AI 提供商、Agent 和安全设置',
+  'ai.providers': '提供商',
+  'ai.providers.empty': '尚未配置提供商。添加一个提供商以开始使用。',
+  'ai.providers.add': '添加提供商',
+  'ai.providers.active': '活跃',
+  'ai.providers.apiKeyConfigured': 'API Key 已配置',
+  'ai.providers.noApiKey': '未设置 API Key',
+  'ai.providers.configure': '配置',
+  'ai.providers.remove': '移除',
+  'ai.providers.name': '显示名称',
+  'ai.providers.name.placeholder': '例如 我的提供商',
+  'ai.providers.apiKey': 'API Key',
+  'ai.providers.apiKey.placeholder': '输入 API Key',
+  'ai.providers.apiKey.decrypting': '解密中...',
+  'ai.providers.baseUrl': 'Base URL',
+  'ai.providers.skipTLSVerify': '跳过 TLS 证书验证（用于自签名证书）',
+  'ai.providers.defaultModel': '默认模型',
+  'ai.providers.defaultModel.placeholder': '例如 gpt-4o, claude-sonnet-4-20250514',
+  'ai.providers.refreshModels': '刷新模型列表',
+  'ai.providers.searchModel': '搜索或输入模型 ID...',
+  'ai.providers.filterModels': '筛选模型...',
+  'ai.providers.loadingModels': '加载模型中...',
+  'ai.providers.noMatchingModels': '没有匹配的模型',
+  'ai.providers.clickToLoadModels': '点击加载模型',
+  'ai.providers.showingModels': '显示前 100 个，共 {count} 个模型。输入以筛选。',
+  'ai.providers.advancedParams': '高级参数',
+  'ai.providers.advancedParams.hint': '留空则使用提供商默认值。',
+  'ai.providers.advancedParams.maxTokens.placeholder': '例如 4096',
+  'ai.providers.advancedParams.default': '提供商默认',
+
+  // AI Codex
+  'ai.codex': 'Codex',
+  'ai.codex.title': 'Codex CLI',
+  'ai.codex.description': '使用 codex + codex-acp 进行 ACP 协议流式传输。在此通过 ChatGPT 订阅登录，或配置 OpenAI 提供商的 API Key（将作为 CODEX_API_KEY 传递）。',
+  'ai.codex.detecting': '检测中...',
+  'ai.codex.notFound': '未找到',
+  'ai.codex.awaitingLogin': '等待登录',
+  'ai.codex.connectedChatGPT': '已通过 ChatGPT 连接',
+  'ai.codex.connectedApiKey': '已通过 API Key 连接',
+  'ai.codex.notConnected': '未连接',
+  'ai.codex.statusUnknown': '状态未知',
+  'ai.codex.path': '路径：',
+  'ai.codex.notFoundHint': '在 PATH 中未找到 codex。请安装或在下方指定可执行文件路径。',
+  'ai.codex.customPathPlaceholder': '例如 /usr/local/bin/codex',
+  'ai.codex.check': '检查',
+  'ai.codex.openLogin': '打开登录',
+  'ai.codex.logout': '退出登录',
+  'ai.codex.connectChatGPT': '连接 ChatGPT',
+  'ai.codex.refreshStatus': '刷新状态',
+  'ai.codex.apiKeyHint': '检测到已启用的 OpenAI 提供商 API Key。Codex ACP 也可以无需 ChatGPT 登录进行认证。',
+
+  // AI Claude Code
+  'ai.claude.title': 'Claude Code',
+  'ai.claude.description': 'Anthropic 的智能编程助手。使用 claude-agent-acp 进行 ACP 协议流式传输。',
+  'ai.claude.detecting': '检测中...',
+  'ai.claude.detected': '已检测到',
+  'ai.claude.notFound': '未找到',
+  'ai.claude.path': '路径：',
+  'ai.claude.notFoundHint': '在 PATH 中未找到 claude。请安装或在下方指定可执行文件路径。',
+  'ai.claude.customPathPlaceholder': '例如 /usr/local/bin/claude',
+  'ai.claude.check': '检查',
+
+  // AI GitHub Copilot CLI
+  'ai.copilot.title': 'GitHub Copilot CLI',
+  'ai.copilot.description': '通过 ACP over stdio（`copilot --acp --stdio`）接入 GitHub Copilot CLI。检测到后即可作为外部编程 Agent 使用。',
+  'ai.copilot.detecting': '检测中...',
+  'ai.copilot.detected': '已检测到',
+  'ai.copilot.notFound': '未找到',
+  'ai.copilot.path': '路径：',
+  'ai.copilot.notFoundHint': '在 PATH 中未找到 copilot。请安装或在下方指定可执行文件路径。',
+  'ai.copilot.customPathPlaceholder': '例如 /usr/local/bin/copilot',
+  'ai.copilot.check': '检查',
+
+  // AI Default Agent
+  'ai.defaultAgent': '默认 Agent',
+  'ai.defaultAgent.description': '创建新 AI 会话时使用的 Agent',
+  'ai.defaultAgent.catty': 'Catty（内置）',
+
+  // AI Chat
+  'ai.chat.noProvider': '尚未配置 AI 提供商。请前往 **设置 → AI → 提供商** 添加并启用一个提供商。',
+  'ai.chat.toolDenied': '操作已被用户拒绝。',
+  'ai.chat.toolApproved': '已批准',
+  'ai.chat.toolApprovalHint': '按回车批准，按 Esc 拒绝',
+  'ai.chat.approve': '批准',
+  'ai.chat.reject': '拒绝',
+  'ai.chat.toolLabel': '工具',
+  'ai.chat.targetLabel': '目标',
+  'ai.chat.permissionRequired': '需要权限',
+  'ai.chat.permissionDescription': 'AI Agent 希望执行一个需要你批准的工具调用。',
+  'ai.chat.commandBlocked': '此命令已被安全策略拦截，无法执行。',
+  'ai.chat.recommendAllow': '允许',
+  'ai.chat.recommendConfirm': '确认',
+  'ai.chat.recommendDeny': '拒绝',
+  'ai.chat.exportConversation': '导出对话',
+  'ai.chat.exportAs': '导出为',
+  'ai.chat.exportMarkdown': 'Markdown',
+  'ai.chat.exportJSON': 'JSON',
+  'ai.chat.exportPlainText': '纯文本',
+  'ai.chat.thinking': '思考中',
+  'ai.chat.thoughtFor': '思考了 {duration}',
+  'ai.chat.thought': '思考',
+  'ai.chat.agents': 'Agents',
+  'ai.chat.detectedOnMachine': '在本机检测到',
+  'ai.chat.rescan': '重新扫描',
+  'ai.chat.permObserver': '观察',
+  'ai.chat.permConfirm': '确认',
+  'ai.chat.permAuto': '自主',
+  'ai.chat.permObserverDesc': '只读模式',
+  'ai.chat.permConfirmDesc': '操作前询问',
+  'ai.chat.permAutoDesc': '自由执行',
+  'ai.chat.emptyHint': '询问服务器相关问题、执行命令或获取配置帮助。',
+  'ai.chat.placeholder': '向 {agent} 发送消息 — @ 引用上下文，/ 使用命令',
+  'ai.chat.placeholderDefault': '向 Catty Agent 发送消息...',
+  'ai.chat.noModel': '未选择模型',
+  'ai.chat.recent': '最近',
+  'ai.chat.viewAll': '查看全部',
+  'ai.chat.untitled': '无标题',
+  'ai.chat.justNow': '刚刚',
+  'ai.chat.minutesAgo': '{n}分钟前',
+  'ai.chat.hoursAgo': '{n}小时前',
+  'ai.chat.daysAgo': '{n}天前',
+  'ai.chat.newChat': '新对话',
+  'ai.chat.allSessions': '所有会话',
+  'ai.chat.noSessions': '没有历史会话',
+  'ai.chat.retryHint': '你可以重新发送消息来重试。',
+  'ai.chat.approvalTimeout': '工具审批已超时（5 分钟）。你可以重新发送消息来重试。',
+  'ai.chat.menuHosts': '主机',
+  'ai.chat.menuContext': '上下文',
+  'ai.chat.menuFiles': '文件',
+  'ai.chat.menuImage': '图片',
+  'ai.chat.menuMentionHost': '提及主机',
+
+  // AI Error
+  'ai.codex.bridgeError': 'Codex 主进程处理器尚未加载。请完全重启 Netcatty 或重启 Electron 开发进程，然后重试。',
+
+  // AI Web Search
+  'ai.webSearch.title': '网络搜索',
+  'ai.webSearch.enable': '启用网络搜索',
+  'ai.webSearch.enable.description': '允许 AI 代理搜索互联网获取最新信息。',
+  'ai.webSearch.provider': '搜索供应商',
+  'ai.webSearch.provider.description': '选择一个网络搜索 API 供应商。',
+  'ai.webSearch.apiKey': 'API 密钥',
+  'ai.webSearch.apiKey.description': '所选搜索供应商的 API 密钥。',
+  'ai.webSearch.apiKey.placeholder': '输入 API 密钥...',
+  'ai.webSearch.apiHost': 'API 地址',
+  'ai.webSearch.apiHost.description': '自定义 API 端点。除非使用代理，否则保持默认值。',
+  'ai.webSearch.apiHost.searxngDescription': 'SearXNG 实例的 URL（必填）。',
+  'ai.webSearch.maxResults': '最大结果数',
+  'ai.webSearch.maxResults.description': '搜索返回的最大结果数（1-20）。',
+
+  // AI Safety Settings
+  'ai.safety.title': '安全',
+  'ai.safety.permissionMode': '权限模式',
+  'ai.safety.permissionMode.description': '控制 AI 与终端的交互方式。观察者模式通过 MCP Server 阻止所有写操作，对内置和 ACP Agent 均生效。确认模式对 ACP Agent 仅为建议性（ACP Agent 有自己的工具审批流程）。',
+  'ai.safety.permissionMode.observer': '观察者 - 只读，禁止操作',
+  'ai.safety.permissionMode.confirm': '确认 - 操作前询问',
+  'ai.safety.permissionMode.autonomous': '自主 - 自由执行',
+  'ai.safety.commandTimeout': '命令超时',
+  'ai.safety.commandTimeout.description': '命令执行的最大秒数，超时将被终止。对内置和 ACP Agent 均生效。',
+  'ai.safety.commandTimeout.unit': '秒',
+  'ai.safety.maxIterations': '最大迭代次数',
+  'ai.safety.maxIterations.description': '防止 AI 失控执行的最大工具调用循环次数。ACP Agent 可能有自己的内部迭代限制，以其为准。',
+  'ai.safety.blocklist': '命令黑名单',
+  'ai.safety.blocklist.description': '用于拦截危险命令的正则表达式。通过 MCP Server 对内置和 ACP Agent 均生效。',
+  'ai.safety.blocklist.placeholder': '正则表达式...',
+  'ai.safety.blocklist.reset': '恢复默认',
+  'ai.safety.blocklist.add': '添加规则',
+  'ai.safety.note': '命令黑名单、命令超时和观察者模式通过 MCP Server 层强制执行，对所有 Agent 类型生效。确认模式和最大迭代次数对内置 Agent 完全强制执行；ACP Agent 可能有自己的内部控制。',
 };

 export default zhCN;
--- a/application/notification.ts
+++ b/application/notification.ts
@@ -0,0 +1,38 @@
+/**
+ * Application-layer notification port.
+ *
+ * UI layers (e.g. toast) register their implementation via `setNotify`.
+ * Application code calls `notify.*` without importing any UI module.
+ */
+
+export interface NotifyOptions {
+  title?: string;
+  duration?: number;
+  onClick?: () => void;
+  actionLabel?: string;
+}
+
+type NotifyFn = (message: string, titleOrOptions?: string | NotifyOptions) => void;
+
+interface Notify {
+  success: NotifyFn;
+  error: NotifyFn;
+  warning: NotifyFn;
+  info: NotifyFn;
+}
+
+const noop: NotifyFn = () => {};
+
+let _impl: Notify = { success: noop, error: noop, warning: noop, info: noop };
+
+/** Called once by the UI layer to wire up the real implementation. */
+export function setNotify(impl: Notify): void {
+  _impl = impl;
+}
+
+export const notify: Notify = {
+  success: (...args) => _impl.success(...args),
+  error: (...args) => _impl.error(...args),
+  warning: (...args) => _impl.warning(...args),
+  info: (...args) => _impl.info(...args),
+};
--- a/application/state/activeTabStore.ts
+++ b/application/state/activeTabStore.ts
@@ -6,6 +6,7 @@ type Listener = () => void;
 class ActiveTabStore {
  private activeTabId: string = 'vault';
  private listeners = new Set<Listener>();
+  private pendingNotify = false;

  getActiveTabId = () => this.activeTabId;

@@ -13,7 +14,10 @@ class ActiveTabStore {
    if (this.activeTabId !== id) {
      this.activeTabId = id;
      // Defer listener notification to avoid "setState during render" if called from a render phase
+      if (this.pendingNotify) return;
+      this.pendingNotify = true;
      Promise.resolve().then(() => {
+        this.pendingNotify = false;
        this.listeners.forEach(listener => listener());
      });
    }
--- a/application/state/customThemeStore.ts
+++ b/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 = () => {
--- a/application/state/fontStore.ts
+++ b/application/state/fontStore.ts
@@ -68,8 +68,14 @@ class FontStore {
      // Add default fonts first
      TERMINAL_FONTS.forEach(font => fontMap.set(font.id, font));

-      // Add local fonts with a distinct ID namespace to avoid collisions
+      // Build a set of built-in font family names for dedup (case-insensitive)
+      const builtinFamilyNames = new Set(
+        TERMINAL_FONTS.map(f => f.name.toLowerCase())
+      );
+
+      // Add local fonts, skipping those already covered by built-in fonts
      localFonts.forEach(font => {
+        if (builtinFamilyNames.has(font.name.toLowerCase())) return;
        const localId = font.id.startsWith('local-') ? font.id : `local-${font.id}`;
        fontMap.set(localId, { ...font, id: localId });
      });
--- a/application/state/sessionActivity.ts
+++ b/application/state/sessionActivity.ts
@@ -0,0 +1,46 @@
+import { TerminalSession } from '../../types';
+
+type SessionActivityMap = Record<string, boolean>;
+
+export const getValidSessionActivityIds = (sessions: TerminalSession[]): Set<string> => {
+  return new Set(sessions.map((session) => session.id));
+};
+
+export const shouldMarkSessionActivity = (
+  activeTabId: string | null,
+  session: Pick<TerminalSession, 'id' | 'workspaceId'>,
+): boolean => {
+  return activeTabId !== session.id && activeTabId !== session.workspaceId;
+};
+
+export const getSessionActivityIdsToClear = (
+  activeTabId: string | null,
+  sessions: TerminalSession[],
+): string[] => {
+  if (!activeTabId || activeTabId === 'vault' || activeTabId === 'sftp') {
+    return [];
+  }
+
+  const activeSession = sessions.find((session) => session.id === activeTabId);
+  if (activeSession) {
+    return [activeSession.id];
+  }
+
+  return sessions
+    .filter((session) => session.workspaceId === activeTabId)
+    .map((session) => session.id);
+};
+
+export const buildWorkspaceActivityMap = (
+  sessions: TerminalSession[],
+  sessionActivityMap: SessionActivityMap,
+): Map<string, boolean> => {
+  const workspaceActivityMap = new Map<string, boolean>();
+
+  for (const session of sessions) {
+    if (!session.workspaceId || !sessionActivityMap[session.id]) continue;
+    workspaceActivityMap.set(session.workspaceId, true);
+  }
+
+  return workspaceActivityMap;
+};
--- a/application/state/sessionActivityStore.ts
+++ b/application/state/sessionActivityStore.ts
@@ -0,0 +1,78 @@
+import { useSyncExternalStore } from 'react';
+
+type Listener = () => void;
+
+class SessionActivityStore {
+  private snapshot: Record<string, boolean> = {};
+  private listeners = new Set<Listener>();
+
+  getSnapshot = () => this.snapshot;
+
+  subscribe = (listener: Listener) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+
+  private emit() {
+    this.listeners.forEach((listener) => listener());
+  }
+
+  setTabActive = (tabId: string, hasActivity: boolean) => {
+    const alreadyActive = !!this.snapshot[tabId];
+    if (alreadyActive === hasActivity) return;
+
+    if (hasActivity) {
+      this.snapshot = { ...this.snapshot, [tabId]: true };
+    } else {
+      const { [tabId]: _removed, ...rest } = this.snapshot;
+      this.snapshot = rest;
+    }
+
+    this.emit();
+  };
+
+  clearTab = (tabId: string) => {
+    this.setTabActive(tabId, false);
+  };
+
+  clearTabs = (tabIds: Iterable<string>) => {
+    let changed = false;
+    const next = { ...this.snapshot };
+
+    for (const tabId of tabIds) {
+      if (!next[tabId]) continue;
+      delete next[tabId];
+      changed = true;
+    }
+
+    if (!changed) return;
+    this.snapshot = next;
+    this.emit();
+  };
+
+  prune = (validTabIds: Set<string>) => {
+    let changed = false;
+    const next: Record<string, boolean> = {};
+
+    for (const tabId of Object.keys(this.snapshot)) {
+      if (validTabIds.has(tabId)) {
+        next[tabId] = true;
+      } else {
+        changed = true;
+      }
+    }
+
+    if (!changed) return;
+    this.snapshot = next;
+    this.emit();
+  };
+}
+
+export const sessionActivityStore = new SessionActivityStore();
+
+export const useSessionActivityMap = () => {
+  return useSyncExternalStore(
+    sessionActivityStore.subscribe,
+    sessionActivityStore.getSnapshot,
+  );
+};
--- a/application/state/sftp/types.ts
+++ b/application/state/sftp/types.ts
@@ -7,10 +7,12 @@ export interface SftpPane {
  loading: boolean;
  reconnecting: boolean;
  error: string | null;
+  connectionLogs: string[];
  selectedFiles: Set<string>;
  filter: string;
  filenameEncoding: SftpFilenameEncoding;
  showHiddenFiles: boolean;
+  transferMutationToken: number;
 }

 // Multi-tab state for left and right sides
@@ -33,10 +35,12 @@ export const createEmptyPane = (
  loading: false,
  reconnecting: false,
  error: null,
+  connectionLogs: [],
  selectedFiles: new Set(),
  filter: "",
  filenameEncoding: "auto",
  showHiddenFiles,
+  transferMutationToken: 0,
 });

 // File watch event types
--- a/application/state/sftp/useSftpConnections.ts
+++ b/application/state/sftp/useSftpConnections.ts
@@ -34,7 +34,7 @@ interface UseSftpConnectionsParams {
 }

 interface UseSftpConnectionsResult {
-  connect: (side: "left" | "right", host: Host | "local", options?: { forceNewTab?: boolean }) => Promise<void>;
+  connect: (side: "left" | "right", host: Host | "local", options?: { forceNewTab?: boolean; onTabCreated?: (tabId: string) => void }) => Promise<void>;
  disconnect: (side: "left" | "right") => Promise<void>;
  listLocalFiles: (path: string) => Promise<SftpFileEntry[]>;
  listRemoteFiles: (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => Promise<SftpFileEntry[]>;
@@ -69,7 +69,7 @@ export const useSftpConnections = ({
  const { listLocalFiles, listRemoteFiles } = useSftpDirectoryListing();

  const connect = useCallback(
-    async (side: "left" | "right", host: Host | "local", options?: { forceNewTab?: boolean }) => {
+    async (side: "left" | "right", host: Host | "local", options?: { forceNewTab?: boolean; onTabCreated?: (tabId: string) => void }) => {
      const setTabs = side === "left" ? setLeftTabs : setRightTabs;

      let activeTabId: string | null = null;
@@ -88,6 +88,13 @@ export const useSftpConnections = ({

      if (!activeTabId) return;

+      const isReconnectAttempt = reconnectingRef.current[side];
+
+      // Notify caller of the tab ID synchronously, before any async work.
+      // This allows callers to map metadata (e.g. connection keys) to the tab
+      // immediately, avoiding race conditions with deferred effects.
+      options?.onTabCreated?.(activeTabId);
+
      const connectionId = `${side}-${Date.now()}`;

      navSeqRef.current[side] += 1;
@@ -118,12 +125,15 @@ export const useSftpConnections = ({
        if (currentPane?.connection && !currentPane.connection.isLocal) {
          const oldSftpId = sftpSessionsRef.current.get(currentPane.connection.id);
          if (oldSftpId) {
+            // Delete the mapping BEFORE the async closeSftp call to prevent
+            // concurrent code from using a stale sftpId that the backend may
+            // have already removed during the await.
+            sftpSessionsRef.current.delete(currentPane.connection.id);
            try {
              await netcattyBridge.get()?.closeSftp(oldSftpId);
            } catch {
              // Ignore errors when closing stale SFTP sessions
            }
-            sftpSessionsRef.current.delete(currentPane.connection.id);
          }
        }
      }
@@ -151,6 +161,7 @@ export const useSftpConnections = ({
          loading: true,
          reconnecting: false,
          error: null,
+          connectionLogs: [],
          filenameEncoding, // Reset encoding for new connection
        }));

@@ -205,13 +216,57 @@ export const useSftpConnections = ({
          loading: true,
          reconnecting: prev.reconnecting,
          error: null,
+          connectionLogs: [],
          files: prev.reconnecting ? prev.files : (sharedHostCache?.files ?? []),
          filenameEncoding, // Reset encoding for new connection
        }));

+        // Subscribe to SFTP connection progress events for auth logging
+        const sftpSessionId = `sftp-${connectionId}`;
+        let unsubSftpProgress: (() => void) | undefined;
+        const bridge = netcattyBridge.get();
+        if (bridge?.onSftpConnectionProgress) {
+          unsubSftpProgress = bridge.onSftpConnectionProgress((sid, label, status, detail) => {
+            if (sid !== sftpSessionId) return;
+            let logLine: string;
+            switch (status) {
+              case 'connecting':
+                logLine = `Connecting to ${label}...`;
+                break;
+              case 'authenticating':
+                logLine = `${label} - Key exchange complete`;
+                break;
+              case 'auth-attempt':
+                if (detail?.endsWith('rejected')) {
+                  logLine = `${label} - ✗ ${detail}`;
+                } else if (detail === 'all methods exhausted') {
+                  logLine = `${label} - ✗ All authentication methods exhausted`;
+                } else if (detail === 'waiting for user input...' || detail === 'user responded') {
+                  logLine = `${label} - ${detail}`;
+                } else {
+                  logLine = `${label} - Trying ${detail}...`;
+                }
+                break;
+              case 'connected':
+                logLine = `${label} - Connected`;
+                break;
+              case 'error':
+                logLine = `${label} - Error${detail ? `: ${detail}` : ''}`;
+                break;
+              default:
+                logLine = `${label} - ${status}${detail ? `: ${detail}` : ''}`;
+            }
+            // Only update if this is still the active request (avoids stale logs leaking)
+            if (navSeqRef.current[side] !== connectRequestId) return;
+            updateTab(side, activeTabId, (prev) => ({
+              ...prev,
+              connectionLogs: [...prev.connectionLogs, logLine],
+            }));
+          });
+        }
+
        try {
          const credentials = getHostCredentials(host);
-          const bridge = netcattyBridge.get();
          const openSftp = bridge?.openSftp;
          if (!openSftp) throw new Error("SFTP bridge unavailable");

@@ -270,8 +325,24 @@ export const useSftpConnections = ({
          let homeDir = sharedHostCache?.homeDir ?? startPath;

          if (!sharedHostCache) {
-            const statSftp = netcattyBridge.get()?.statSftp;
-            if (statSftp) {
+            // Detect home directory: SSH exec `echo ~` → SFTP realpath('.') → hardcoded fallback
+            const bridge = netcattyBridge.get();
+            let detected = false;
+
+            if (bridge?.getSftpHomeDir) {
+              try {
+                const result = await bridge.getSftpHomeDir(sftpId);
+                if (result?.success && result.homeDir) {
+                  startPath = result.homeDir;
+                  homeDir = result.homeDir;
+                  detected = true;
+                }
+              } catch {
+                // Fall through to hardcoded candidates
+              }
+            }
+
+            if (!detected) {
              const candidates: string[] = [];
              if (credentials.username === "root") {
                candidates.push("/root");
@@ -281,63 +352,33 @@ export const useSftpConnections = ({
              } else {
                candidates.push("/root");
              }
-              for (const candidate of candidates) {
-                try {
-                  const stat = await statSftp(sftpId, candidate, filenameEncoding);
-                  if (stat?.type === "directory") {
-                    startPath = candidate;
-                    homeDir = candidate;
-                    break;
-                  }
-                } catch {
-                  // Ignore missing/permission errors
-                }
-              }
-            } else {
-              if (credentials.username === "root") {
-                try {
-                  const rootFiles = await netcattyBridge.get()?.listSftp(sftpId, "/root", filenameEncoding);
-                  if (rootFiles) {
-                    startPath = "/root";
-                    homeDir = "/root";
-                  }
-                } catch {
-                  // Fallback path not available
-                }
-              } else if (credentials.username) {
-                try {
-                  const homeFiles = await netcattyBridge.get()?.listSftp(
-                    sftpId,
-                    `/home/${credentials.username}`,
-                    filenameEncoding,
-                  );
-                  if (homeFiles) {
-                    startPath = `/home/${credentials.username}`;
-                    homeDir = startPath;
-                  }
-                } catch {
-                  // Fall through to /root check
-                }
-                if (startPath === "/") {
+              const statSftp = bridge?.statSftp;
+              if (statSftp) {
+                for (const candidate of candidates) {
                  try {
-                    const rootFiles = await netcattyBridge.get()?.listSftp(sftpId, "/root", filenameEncoding);
-                    if (rootFiles) {
-                      startPath = "/root";
-                      homeDir = "/root";
+                    const stat = await statSftp(sftpId, candidate, filenameEncoding);
+                    if (stat?.type === "directory") {
+                      startPath = candidate;
+                      homeDir = candidate;
+                      break;
                    }
                  } catch {
-                    // Fallback path not available
+                    // Ignore missing/permission errors
                  }
                }
              } else {
-                try {
-                  const rootFiles = await netcattyBridge.get()?.listSftp(sftpId, "/root", filenameEncoding);
-                  if (rootFiles) {
-                    startPath = "/root";
-                    homeDir = "/root";
+                // Fallback: probe candidates via listSftp when statSftp is unavailable
+                for (const candidate of candidates) {
+                  try {
+                    const files = await bridge?.listSftp(sftpId, candidate, filenameEncoding);
+                    if (files) {
+                      startPath = candidate;
+                      homeDir = candidate;
+                      break;
+                    }
+                  } catch {
+                    // Ignore missing/permission errors
                  }
-                } catch {
-                  // Fallback path not available
                }
              }
            }
@@ -413,6 +454,7 @@ export const useSftpConnections = ({
            files,
            loading: false,
            reconnecting: false,
+            connectionLogs: [], // Clear after successful connect to avoid replay during navigation
          }));
        } catch (err) {
          if (navSeqRef.current[side] !== connectRequestId) return;
@@ -426,10 +468,16 @@ export const useSftpConnections = ({
                  error: err instanceof Error ? err.message : "Connection failed",
                }
              : null,
-            error: err instanceof Error ? err.message : "Connection failed",
+            files: isReconnectAttempt ? [] : prev.files,
+            selectedFiles: isReconnectAttempt ? new Set<string>() : prev.selectedFiles,
+            error: isReconnectAttempt
+              ? "sftp.error.reconnectFailed"
+              : (err instanceof Error ? err.message : "Connection failed"),
            loading: false,
            reconnecting: false,
          }));
+        } finally {
+          unsubSftpProgress?.();
        }
      }
    },
@@ -454,32 +502,39 @@ export const useSftpConnections = ({
      !initialConnectDoneRef.current &&
      leftTabs.tabs.length === 0
    ) {
-      initialConnectDoneRef.current = true;
-      setTimeout(() => {
+      const timer = window.setTimeout(() => {
+        initialConnectDoneRef.current = true;
        connect("left", "local");
      }, 0);
+      return () => window.clearTimeout(timer);
    }
  }, [autoConnectLocalOnMount, connect, leftTabs.tabs.length]);

  useEffect(() => {
-    const attemptReconnect = async (side: "left" | "right") => {
+    const reconnectTimers: number[] = [];
+
+    const scheduleReconnect = (side: "left" | "right") => {
      const lastHost = lastConnectedHostRef.current[side];
-      if (lastHost && reconnectingRef.current[side]) {
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-        if (reconnectingRef.current[side]) {
-          connect(side, lastHost);
-        }
-      }
+      if (!lastHost || !reconnectingRef.current[side]) return;
+
+      const timer = window.setTimeout(() => {
+        if (!reconnectingRef.current[side]) return;
+        void connect(side, lastHost);
+      }, 1000);
+      reconnectTimers.push(timer);
    };

    if (leftPane.reconnecting && reconnectingRef.current.left) {
-      attemptReconnect("left");
+      scheduleReconnect("left");
    }
    if (rightPane.reconnecting && reconnectingRef.current.right) {
-      attemptReconnect("right");
+      scheduleReconnect("right");
    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [leftPane.reconnecting, rightPane.reconnecting, connect]);
+
+    return () => {
+      reconnectTimers.forEach((timer) => window.clearTimeout(timer));
+    };
+  }, [leftPane.reconnecting, rightPane.reconnecting, connect, lastConnectedHostRef, reconnectingRef]);

  const disconnect = useCallback(
    async (side: "left" | "right") => {
--- a/application/state/sftp/useSftpDirectoryListing.ts
+++ b/application/state/sftp/useSftpDirectoryListing.ts
@@ -49,6 +49,7 @@ export const useSftpDirectoryListing = () => {
          sizeFormatted: formatFileSize(size),
          lastModified,
          lastModifiedFormatted: formatDate(lastModified),
+          permissions: f.permissions,
          linkTarget: f.linkTarget as "file" | "directory" | null | undefined,
        };
      });
--- a/application/state/sftp/useSftpExternalOperations.ts
+++ b/application/state/sftp/useSftpExternalOperations.ts
@@ -20,7 +20,7 @@ export type { UploadResult };

 interface UseSftpExternalOperationsParams {
  getActivePane: (side: "left" | "right") => SftpPane | null;
-  refresh: (side: "left" | "right") => Promise<void>;
+  refresh: (side: "left" | "right", options?: { tabId?: string }) => Promise<void>;
  sftpSessionsRef: React.MutableRefObject<Map<string, string>>;
  connectionCacheKeyMapRef: React.MutableRefObject<Map<string, string>>;
  clearDirCacheEntry?: (connectionId: string, path: string) => void;
@@ -45,7 +45,8 @@ interface SftpExternalOperationsResult {
  activeFileWatchCountRef: React.MutableRefObject<number>;
  uploadExternalFiles: (
    side: "left" | "right",
-    dataTransfer: DataTransfer
+    dataTransfer: DataTransfer,
+    targetPath?: string
  ) => Promise<UploadResult[]>;
  uploadExternalEntries: (
    side: "left" | "right",
@@ -377,6 +378,7 @@ export const useSftpExternalOperations = (
            speed: 0,
            startTime: Date.now(),
            isDirectory: true,
+            progressMode: "bytes",
          };
          addExternalUpload(scanningTask);
        }
@@ -404,6 +406,8 @@ export const useSftpExternalOperations = (
            speed: 0,
            startTime: Date.now(),
            isDirectory: task.isDirectory,
+            progressMode: task.progressMode ?? "bytes",
+            parentTaskId: task.parentTaskId,
          };
          addExternalUpload(transferTask);
        }
@@ -505,7 +509,7 @@ export const useSftpExternalOperations = (
  }, []);

  const uploadExternalFiles = useCallback(
-    async (side: "left" | "right", dataTransfer: DataTransfer): Promise<UploadResult[]> => {
+    async (side: "left" | "right", dataTransfer: DataTransfer, targetPath?: string): Promise<UploadResult[]> => {
      const pane = getActivePane(side);
      if (!pane?.connection) {
        throw new Error("No active connection");
@@ -524,13 +528,15 @@ export const useSftpExternalOperations = (
        throw new Error("SFTP session not found");
      }

+      const uploadPaneId = pane.id;
+      const uploadTargetPath = targetPath || pane.connection.currentPath;
      // Create a new upload controller for this upload
      const controller = new UploadController();
      uploadControllerRef.current = controller;

      const callbacks = createUploadCallbacks(
        pane.connection.id,
-        pane.connection.currentPath,
+        uploadTargetPath,
        pane.connection.isLocal ? undefined : pane.connection.hostId,
        pane.connection.isLocal ? undefined : connectionCacheKeyMapRef.current.get(pane.connection.id),
      );
@@ -539,7 +545,7 @@ export const useSftpExternalOperations = (
        const results = await uploadFromDataTransfer(
          dataTransfer,
          {
-            targetPath: pane.connection.currentPath,
+            targetPath: uploadTargetPath,
            sftpId,
            isLocal: pane.connection.isLocal,
            bridge: createUploadBridge,
@@ -550,7 +556,14 @@ export const useSftpExternalOperations = (
          controller
        );

-        await refresh(side);
+        // Invalidate cache for the upload target so returning to that path
+        // triggers a fresh listing.
+        if (clearDirCacheEntry && targetPath) {
+          clearDirCacheEntry(pane.connection.id, uploadTargetPath);
+        }
+        if (uploadTargetPath === pane.connection.currentPath) {
+          await refresh(side, { tabId: uploadPaneId });
+        }
        return results;
      } catch (error) {
        logger.error("[SFTP] Upload failed:", error);
@@ -560,6 +573,7 @@ export const useSftpExternalOperations = (
      }
    },
    [
+      clearDirCacheEntry,
      connectionCacheKeyMapRef,
      getActivePane,
      refresh,
@@ -594,6 +608,9 @@ export const useSftpExternalOperations = (
        throw new Error("SFTP session not found");
      }

+      // Capture the pane ID now so we can refresh the correct tab after
+      // upload, even if focus switches during the transfer.
+      const uploadPaneId = pane.id;
      const controller = new UploadController();
      uploadControllerRef.current = controller;
      const uploadTargetPath = options?.targetPath || pane.connection.currentPath;
@@ -623,16 +640,15 @@ export const useSftpExternalOperations = (
          controller,
        );

-        // Refresh the current directory and invalidate the upload target's
-        // cache entry.  If the user navigated away during the upload, the
-        // invalidation ensures returning to the target path triggers a fresh
-        // listing instead of serving stale cached data.
-        const livePane = getActivePane(side);
-        if (livePane?.connection) {
-          if (livePane.connection.currentPath !== uploadTargetPath && clearDirCacheEntry) {
-            clearDirCacheEntry(livePane.connection.id, uploadTargetPath);
-          }
-          await refresh(side);
+        // Refresh the specific tab that initiated the upload (not whichever
+        // tab is active now — focus may have switched during the transfer).
+        // Also invalidate the upload target's cache entry so returning to
+        // that path triggers a fresh listing.
+        if (clearDirCacheEntry) {
+          clearDirCacheEntry(pane.connection.id, uploadTargetPath);
+        }
+        if (uploadTargetPath === pane.connection.currentPath) {
+          await refresh(side, { tabId: uploadPaneId });
        }
        return results;
      } catch (error) {
--- a/application/state/sftp/useSftpHostCredentials.ts
+++ b/application/state/sftp/useSftpHostCredentials.ts
@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import type { Host, Identity, SSHKey } from "../../../domain/models";
+import { isEncryptedCredentialPlaceholder, sanitizeCredentialValue } from "../../../domain/credentials";
 import { resolveHostAuth } from "../../../domain/sshAuth";

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

      return {
        hostname: host.hostname,
@@ -70,6 +95,7 @@ export const useSftpHostCredentials = ({
        proxy: proxyConfig,
        jumpHosts: jumpHosts && jumpHosts.length > 0 ? jumpHosts : undefined,
        sudo: host.sftpSudo,
+        identityFilePaths: host.identityFilePaths,
      };
    },
    [hosts, identities, keys],
--- a/application/state/sftp/useSftpPaneActions.ts
+++ b/application/state/sftp/useSftpPaneActions.ts
@@ -3,9 +3,12 @@ import type { Host, SftpFileEntry, SftpFilenameEncoding } from "../../../domain/
 import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
 import { logger } from "../../../lib/logger";
 import { SftpPane } from "./types";
-import { getParentPath, isNavigableDirectory, isWindowsRoot, joinPath } from "./utils";
+import { getFileName, getParentPath, isNavigableDirectory, isWindowsRoot, joinPath } from "./utils";
 import { buildCacheKey, setSharedRemoteHostCache } from "./sharedRemoteHostCache";

+/** Shared empty set for navigation resets — never mutate this. */
+const EMPTY_SET = new Set<string>();
+
 interface UseSftpPaneActionsParams {
  hosts: Host[];
  getActivePane: (side: "left" | "right") => SftpPane | null;
@@ -25,12 +28,13 @@ interface UseSftpPaneActionsParams {
  listRemoteFiles: (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => Promise<SftpFileEntry[]>;
  handleSessionError: (side: "left" | "right", error: Error) => void;
  isSessionError: (err: unknown) => boolean;
+  clearSelectionsExcept: (target: { side: "left" | "right"; tabId: string } | null) => void;
  dirCacheTtlMs: number;
 }

 interface UseSftpPaneActionsResult {
-  navigateTo: (side: "left" | "right", path: string, options?: { force?: boolean }) => Promise<void>;
-  refresh: (side: "left" | "right") => Promise<void>;
+  navigateTo: (side: "left" | "right", path: string, options?: { force?: boolean; tabId?: string }) => Promise<void>;
+  refresh: (side: "left" | "right", options?: { tabId?: string }) => Promise<void>;
  navigateUp: (side: "left" | "right") => Promise<void>;
  openEntry: (side: "left" | "right", entry: SftpFileEntry) => Promise<void>;
  toggleSelection: (side: "left" | "right", fileName: string, multiSelect: boolean) => void;
@@ -40,7 +44,9 @@ interface UseSftpPaneActionsResult {
  setFilter: (side: "left" | "right", filter: string) => void;
  getFilteredFiles: (pane: SftpPane) => SftpFileEntry[];
  createDirectory: (side: "left" | "right", name: string) => Promise<void>;
+  createDirectoryAtPath: (side: "left" | "right", path: string, name: string) => Promise<void>;
  createFile: (side: "left" | "right", name: string) => Promise<void>;
+  createFileAtPath: (side: "left" | "right", path: string, name: string) => Promise<void>;
  deleteFiles: (side: "left" | "right", fileNames: string[]) => Promise<void>;
  deleteFilesAtPath: (
    side: "left" | "right",
@@ -49,6 +55,8 @@ interface UseSftpPaneActionsResult {
    fileNames: string[],
  ) => Promise<void>;
  renameFile: (side: "left" | "right", oldName: string, newName: string) => Promise<void>;
+  renameFileAtPath: (side: "left" | "right", oldPath: string, newName: string) => Promise<void>;
+  moveEntriesToPath: (side: "left" | "right", sourcePaths: string[], targetPath: string) => Promise<void>;
  changePermissions: (side: "left" | "right", filePath: string, mode: string) => Promise<void>;
 }

@@ -71,8 +79,39 @@ export const useSftpPaneActions = ({
  listRemoteFiles,
  handleSessionError,
  isSessionError,
+  clearSelectionsExcept,
  dirCacheTtlMs,
 }: UseSftpPaneActionsParams): UseSftpPaneActionsResult => {
+  const normalizePathForCompare = useCallback((path: string): string => {
+    if (isWindowsRoot(path)) return path.replace(/\//g, "\\").toLowerCase();
+    if (/^[A-Za-z]:/.test(path)) {
+      return path.replace(/\//g, "\\").replace(/[\\]+$/, "").toLowerCase();
+    }
+    if (path === "/") return "/";
+    return path.replace(/\/+$/, "");
+  }, []);
+
+  const isSamePath = useCallback((a: string, b: string): boolean => {
+    return normalizePathForCompare(a) === normalizePathForCompare(b);
+  }, [normalizePathForCompare]);
+
+  const isDescendantPath = useCallback((candidate: string, parent: string): boolean => {
+    const normalizedCandidate = normalizePathForCompare(candidate);
+    const normalizedParent = normalizePathForCompare(parent);
+    if (normalizedCandidate === normalizedParent) return false;
+
+    if (/^[a-z]:\\$/.test(normalizedParent)) {
+      return normalizedCandidate.startsWith(normalizedParent);
+    }
+
+    if (normalizedParent === "/") {
+      return normalizedCandidate.startsWith("/");
+    }
+
+    const separator = normalizedParent.includes("\\") ? "\\" : "/";
+    return normalizedCandidate.startsWith(`${normalizedParent}${separator}`);
+  }, [normalizePathForCompare]);
+
  // Build the shared cache key for the active pane. Prefer the last connected
  // host (which includes session-time overrides), fall back to the vault hosts list.
  const hostsRef = useRef(hosts);
@@ -114,23 +153,18 @@ export const useSftpPaneActions = ({
    async (
      side: "left" | "right",
      path: string,
-      options?: { force?: boolean },
+      options?: { force?: boolean; tabId?: string },
    ) => {
-      console.log("[SFTP navigateTo] called", { side, path, force: options?.force });
-
-      const pane = getActivePane(side);
      const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
-      const activeTabId = sideTabs.activeTabId;
+      // When tabId is specified, target that specific tab instead of the active one.
+      // This allows refreshing a background tab (e.g. after a transfer completes
+      // while focus has switched to another host).
+      const targetTabId = options?.tabId ?? sideTabs.activeTabId;
+      const pane = options?.tabId
+        ? sideTabs.tabs.find((t) => t.id === options.tabId) ?? null
+        : getActivePane(side);

-      console.log("[SFTP navigateTo] state check", {
-        paneId: pane?.id,
-        hasConnection: !!pane?.connection,
-        activeTabId,
-        currentPath: pane?.connection?.currentPath,
-      });
-
-      if (!pane?.connection || !activeTabId) {
-        console.log("[SFTP navigateTo] No pane/connection/activeTabId, returning early");
+      if (!pane?.connection || !targetTabId) {
        return;
      }

@@ -146,15 +180,14 @@ export const useSftpPaneActions = ({
        Date.now() - cached.timestamp < dirCacheTtlMs &&
        cached.files
      ) {
-        console.log("[SFTP navigateTo] Using cached files for path", { path, cacheKey });
-        tabNavSeqRef.current.set(activeTabId, requestId);
-        lastConfirmedRef.current.set(activeTabId, {
+        tabNavSeqRef.current.set(targetTabId, requestId);
+        lastConfirmedRef.current.set(targetTabId, {
          connectionId,
          path,
          files: cached.files,
-          selectedFiles: new Set(),
+          selectedFiles: EMPTY_SET,
        });
-        updateTab(side, activeTabId, (prev) => ({
+        updateTab(side, targetTabId, (prev) => ({
          ...prev,
          connection: prev.connection
            ? { ...prev.connection, currentPath: path }
@@ -162,7 +195,7 @@ export const useSftpPaneActions = ({
          files: cached.files,
          loading: false,
          error: null,
-          selectedFiles: new Set(),
+          selectedFiles: EMPTY_SET,
        }));
        if (!pane.connection.isLocal) {
          // Use hostId as the shared cache key — this is safe because the
@@ -180,34 +213,33 @@ export const useSftpPaneActions = ({
        return;
      }

-      console.log("[SFTP navigateTo] Fetching files from server for path", { path });
      // Re-seed confirmed state whenever the pane is settled (not loading), or
      // when the connection has changed. This captures post-mutation state from
      // optimistic updates (e.g. deleteFilesAtPath) so that a failed refresh
      // doesn't resurrect deleted items.
-      const existing = lastConfirmedRef.current.get(activeTabId);
+      const existing = lastConfirmedRef.current.get(targetTabId);
      if (!existing || existing.connectionId !== connectionId || !pane.loading) {
-        lastConfirmedRef.current.set(activeTabId, {
+        lastConfirmedRef.current.set(targetTabId, {
          connectionId,
          path: pane.connection.currentPath,
          files: pane.files,
          selectedFiles: pane.selectedFiles,
        });
      }
-      const confirmed = lastConfirmedRef.current.get(activeTabId)!;
+      const confirmed = lastConfirmedRef.current.get(targetTabId)!;
      const previousPath = confirmed.path;
      const previousFiles = confirmed.files;
      const previousSelection = confirmed.selectedFiles;
-      tabNavSeqRef.current.set(activeTabId, requestId);
+      tabNavSeqRef.current.set(targetTabId, requestId);
      // Keep existing files visible during loading — the loading overlay
      // (pointer-events-none) prevents interaction. This avoids blanking a tab
      // that gets superseded by another tab navigating on the same side.
-      updateTab(side, activeTabId, (prev) => ({
+      updateTab(side, targetTabId, (prev) => ({
        ...prev,
        connection: prev.connection
          ? { ...prev.connection, currentPath: path }
          : null,
-        selectedFiles: new Set(),
+        selectedFiles: EMPTY_SET,
        loading: true,
        error: null,
      }));
@@ -221,16 +253,17 @@ export const useSftpPaneActions = ({
          const sftpId = sftpSessionsRef.current.get(pane.connection.id);
          if (!sftpId) {
            clearCacheForConnection(pane.connection.id);
-            updateTab(side, activeTabId, (prev) => ({
-              ...prev,
-              connection: null,
-              files: [],
-              loading: false,
-              reconnecting: false,
-              error: "SFTP session lost. Please reconnect.",
-              selectedFiles: new Set(),
-              filter: "",
-            }));
+            // For background tabs (explicit tabId), update that tab directly
+            // instead of handleSessionError which targets the active tab.
+            if (options?.tabId) {
+              updateTab(side, targetTabId, (prev) => ({
+                ...prev,
+                error: "sftp.error.sessionLost",
+                loading: false,
+              }));
+            } else {
+              handleSessionError(side, new Error("SFTP session lost"));
+            }
            return;
          }

@@ -240,16 +273,15 @@ export const useSftpPaneActions = ({
            if (isSessionError(err)) {
              sftpSessionsRef.current.delete(pane.connection.id);
              clearCacheForConnection(pane.connection.id);
-              updateTab(side, activeTabId, (prev) => ({
-                ...prev,
-                connection: null,
-                files: [],
-                loading: false,
-                reconnecting: false,
-                error: "SFTP session expired. Please reconnect.",
-                selectedFiles: new Set(),
-                filter: "",
-              }));
+              if (options?.tabId) {
+                updateTab(side, targetTabId, (prev) => ({
+                  ...prev,
+                  error: "sftp.error.sessionLost",
+                  loading: false,
+                }));
+              } else {
+                handleSessionError(side, err as Error);
+              }
              return;
            }
            throw err as Error;
@@ -257,27 +289,15 @@ export const useSftpPaneActions = ({
        }

        if (navSeqRef.current[side] !== requestId) {
-          // Another navigation on this side superseded this request.
-          // Only restore if no newer navigation has occurred on this specific tab
-          // AND the tab still belongs to the same connection (connect/disconnect
-          // bump navSeqRef but not tabNavSeqRef).
-          if (tabNavSeqRef.current.get(activeTabId) !== requestId) {
+          // Side-level sequence was bumped by another tab's navigation or
+          // a connect/disconnect. Check if THIS tab's request is still current.
+          if (tabNavSeqRef.current.get(targetTabId) !== requestId) {
+            // This tab also has a newer navigation — drop completely.
            return;
          }
-          updateTab(side, activeTabId, (prev) => {
-            if (prev.connection?.id !== connectionId) {
-              // Tab was reconnected or disconnected; don't restore stale state.
-              return prev;
-            }
-            return {
-              ...prev,
-              connection: { ...prev.connection, currentPath: previousPath },
-              files: previousFiles,
-              selectedFiles: previousSelection,
-              loading: false,
-            };
-          });
-          return;
+          // Side was superseded by another tab, but this tab's request is
+          // still current. The fetched files are valid — fall through to
+          // apply them instead of restoring previousPath.
        }

        dirCacheRef.current.set(cacheKey, {
@@ -285,21 +305,21 @@ export const useSftpPaneActions = ({
          timestamp: Date.now(),
        });

-        lastConfirmedRef.current.set(activeTabId, {
+        lastConfirmedRef.current.set(targetTabId, {
          connectionId,
          path,
          files,
-          selectedFiles: new Set(),
+          selectedFiles: EMPTY_SET,
        });

-        updateTab(side, activeTabId, (prev) => ({
+        updateTab(side, targetTabId, (prev) => ({
          ...prev,
          connection: prev.connection
            ? { ...prev.connection, currentPath: path }
            : null,
          files,
          loading: false,
-          selectedFiles: new Set(),
+          selectedFiles: EMPTY_SET,
        }));
        if (!pane.connection.isLocal) {
          setSharedRemoteHostCache(getActivePaneCacheKey(side, pane.connection.hostId, pane.connection.id), {
@@ -311,24 +331,13 @@ export const useSftpPaneActions = ({
        }
      } catch (err) {
        if (navSeqRef.current[side] !== requestId) {
-          if (tabNavSeqRef.current.get(activeTabId) !== requestId) {
+          if (tabNavSeqRef.current.get(targetTabId) !== requestId) {
            return;
          }
-          updateTab(side, activeTabId, (prev) => {
-            if (prev.connection?.id !== connectionId) {
-              return prev;
-            }
-            return {
-              ...prev,
-              connection: { ...prev.connection, currentPath: previousPath },
-              files: previousFiles,
-              selectedFiles: previousSelection,
-              loading: false,
-            };
-          });
-          return;
+          // Side superseded by another tab, but this tab's request is
+          // current — fall through to show the error on this tab.
        }
-        updateTab(side, activeTabId, (prev) => {
+        updateTab(side, targetTabId, (prev) => {
          if (prev.connection?.id !== connectionId) {
            return prev;
          }
@@ -358,16 +367,43 @@ export const useSftpPaneActions = ({
      listRemoteFiles,
      sftpSessionsRef,
      clearCacheForConnection,
+      handleSessionError,
      isSessionError,
    ],
  );

  const refresh = useCallback(
-    async (side: "left" | "right") => {
-      const pane = getActivePane(side);
+    async (side: "left" | "right", options?: { tabId?: string }) => {
+      const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
+      const pane = options?.tabId
+        ? sideTabs.tabs.find((t) => t.id === options.tabId) ?? null
+        : getActivePane(side);
      if (pane?.connection) {
-        await navigateTo(side, pane.connection.currentPath, { force: true });
+        const hasRemoteSession = pane.connection.isLocal || sftpSessionsRef.current.has(pane.connection.id);
+        if (!hasRemoteSession) {
+          if (options?.tabId) return;
+          const lastHost = lastConnectedHostRef.current[side];
+          if (lastHost && !reconnectingRef.current[side]) {
+            reconnectingRef.current[side] = true;
+            updateActiveTab(side, (prev) => ({
+              ...prev,
+              reconnecting: true,
+              error: "sftp.reconnecting.title",
+            }));
+          } else if (!lastHost) {
+            updateActiveTab(side, (prev) => ({
+              ...prev,
+              error: "sftp.error.connectionLostManual",
+            }));
+          }
+          return;
+        }
+        await navigateTo(side, pane.connection.currentPath, { force: true, tabId: options?.tabId });
      } else if (!pane?.connection && pane?.error) {
+        // For background tabs, don't trigger reconnection (it operates on
+        // the active tab). Just leave the error state for the user to see
+        // when they switch back to that tab.
+        if (options?.tabId) return;
        const lastHost = lastConnectedHostRef.current[side];
        if (lastHost && !reconnectingRef.current[side]) {
          reconnectingRef.current[side] = true;
@@ -384,7 +420,7 @@ export const useSftpPaneActions = ({
        }
      }
    },
-    [getActivePane, navigateTo, updateActiveTab, lastConnectedHostRef, reconnectingRef],
+    [getActivePane, leftTabsRef, rightTabsRef, navigateTo, updateActiveTab, lastConnectedHostRef, reconnectingRef, sftpSessionsRef],
  );

  const navigateUp = useCallback(
@@ -405,42 +441,24 @@ export const useSftpPaneActions = ({

  const openEntry = useCallback(
    async (side: "left" | "right", entry: SftpFileEntry) => {
-      console.log("[SFTP openEntry] called", { side, entryName: entry.name, entryType: entry.type });
-
      const pane = getActivePane(side);
-      console.log("[SFTP openEntry] getActivePane result", {
-        paneId: pane?.id,
-        hasConnection: !!pane?.connection,
-        currentPath: pane?.connection?.currentPath,
-      });

      if (!pane?.connection) {
-        console.log("[SFTP openEntry] No pane or connection, returning early");
        return;
      }

      if (entry.name === "..") {
        const currentPath = pane.connection.currentPath;
        const isAtRoot = currentPath === "/" || isWindowsRoot(currentPath);
-        console.log("[SFTP openEntry] Navigating up from '..'", {
-          currentPath,
-          isAtRoot,
-          isWindowsRoot: isWindowsRoot(currentPath),
-        });
-
        if (!isAtRoot) {
          const parentPath = getParentPath(currentPath);
-          console.log("[SFTP openEntry] Calculated parent path", { currentPath, parentPath });
          await navigateTo(side, parentPath);
-        } else {
-          console.log("[SFTP openEntry] Already at root, not navigating");
        }
        return;
      }

      if (isNavigableDirectory(entry)) {
        const newPath = joinPath(pane.connection.currentPath, entry.name);
-        console.log("[SFTP openEntry] Navigating into directory", { currentPath: pane.connection.currentPath, entryName: entry.name, newPath });
        await navigateTo(side, newPath);
      }
    },
@@ -449,6 +467,10 @@ export const useSftpPaneActions = ({

  const toggleSelection = useCallback(
    (side: "left" | "right", fileName: string, multiSelect: boolean) => {
+      const activeTabId = (side === "left" ? leftTabsRef : rightTabsRef).current.activeTabId;
+      if (activeTabId) {
+        clearSelectionsExcept({ side, tabId: activeTabId });
+      }
      updateActiveTab(side, (prev) => {
        const newSelection = new Set(multiSelect ? prev.selectedFiles : []);
        if (newSelection.has(fileName)) {
@@ -459,11 +481,15 @@ export const useSftpPaneActions = ({
        return { ...prev, selectedFiles: newSelection };
      });
    },
-    [updateActiveTab],
+    [updateActiveTab, clearSelectionsExcept, leftTabsRef, rightTabsRef],
  );

  const rangeSelect = useCallback(
    (side: "left" | "right", fileNames: string[]) => {
+      const activeTabId = (side === "left" ? leftTabsRef : rightTabsRef).current.activeTabId;
+      if (activeTabId) {
+        clearSelectionsExcept({ side, tabId: activeTabId });
+      }
      const newSelection = new Set<string>();
      for (const name of fileNames) {
        if (name && name !== "..") {
@@ -473,11 +499,11 @@ export const useSftpPaneActions = ({

      updateActiveTab(side, (prev) => ({ ...prev, selectedFiles: newSelection }));
    },
-    [updateActiveTab],
+    [updateActiveTab, clearSelectionsExcept, leftTabsRef, rightTabsRef],
  );

  const clearSelection = useCallback((side: "left" | "right") => {
-    updateActiveTab(side, (prev) => ({ ...prev, selectedFiles: new Set() }));
+    updateActiveTab(side, (prev) => ({ ...prev, selectedFiles: EMPTY_SET }));
  }, [updateActiveTab]);

  const selectAll = useCallback(
@@ -507,12 +533,12 @@ export const useSftpPaneActions = ({
    );
  }, []);

-  const createDirectory = useCallback(
-    async (side: "left" | "right", name: string) => {
+  const createDirectoryAtPath = useCallback(
+    async (side: "left" | "right", path: string, name: string) => {
      const pane = getActivePane(side);
      if (!pane?.connection) return;

-      const fullPath = joinPath(pane.connection.currentPath, name);
+      const fullPath = joinPath(path, name);

      try {
        if (pane.connection.isLocal) {
@@ -525,7 +551,9 @@ export const useSftpPaneActions = ({
          }
          await netcattyBridge.get()?.mkdirSftp(sftpId, fullPath, pane.filenameEncoding);
        }
-        await refresh(side);
+        if (pane.connection.currentPath === path) {
+          await refresh(side);
+        }
      } catch (err) {
        if (isSessionError(err)) {
          handleSessionError(side, err as Error);
@@ -537,12 +565,21 @@ export const useSftpPaneActions = ({
    [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
  );

-  const createFile = useCallback(
+  const createDirectory = useCallback(
    async (side: "left" | "right", name: string) => {
      const pane = getActivePane(side);
      if (!pane?.connection) return;
+      await createDirectoryAtPath(side, pane.connection.currentPath, name);
+    },
+    [createDirectoryAtPath, getActivePane],
+  );

-      const fullPath = joinPath(pane.connection.currentPath, name);
+  const createFileAtPath = useCallback(
+    async (side: "left" | "right", path: string, name: string) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+
+      const fullPath = joinPath(path, name);

      try {
        if (pane.connection.isLocal) {
@@ -569,7 +606,9 @@ export const useSftpPaneActions = ({
            throw new Error("No write method available");
          }
        }
-        await refresh(side);
+        if (pane.connection.currentPath === path) {
+          await refresh(side);
+        }
      } catch (err) {
        if (isSessionError(err)) {
          handleSessionError(side, err as Error);
@@ -581,6 +620,15 @@ export const useSftpPaneActions = ({
    [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
  );

+  const createFile = useCallback(
+    async (side: "left" | "right", name: string) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+      await createFileAtPath(side, pane.connection.currentPath, name);
+    },
+    [createFileAtPath, getActivePane],
+  );
+
  const deleteFiles = useCallback(
    async (side: "left" | "right", fileNames: string[]) => {
      const pane = getActivePane(side);
@@ -726,6 +774,139 @@ export const useSftpPaneActions = ({
    [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
  );

+  // Rename using a full source path (for tree view where entryPath is already absolute).
+  // newName is still a basename; the new path is built as joinPath(parent, newName).
+  const renameFileAtPath = useCallback(
+    async (side: "left" | "right", oldPath: string, newName: string) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+
+      const parentPath = getParentPath(oldPath);
+      const newPath = joinPath(parentPath, newName);
+
+      try {
+        if (pane.connection.isLocal) {
+          await netcattyBridge.get()?.renameLocalFile?.(oldPath, newPath);
+        } else {
+          const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+          if (!sftpId) {
+            handleSessionError(side, new Error("SFTP session not found"));
+            return;
+          }
+          await netcattyBridge.get()?.renameSftp?.(sftpId, oldPath, newPath, pane.filenameEncoding);
+        }
+        if (pane.connection.currentPath === parentPath) {
+          await refresh(side);
+        }
+      } catch (err) {
+        if (isSessionError(err)) {
+          handleSessionError(side, err as Error);
+          return;
+        }
+        throw err;
+      }
+    },
+    [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
+  );
+
+  const moveEntriesToPath = useCallback(
+    async (side: "left" | "right", sourcePaths: string[], targetPath: string) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection || sourcePaths.length === 0) return;
+
+      const uniqueSources = Array.from(new Set(sourcePaths.filter(Boolean)));
+      const filteredSources = uniqueSources
+        .sort((a, b) => a.length - b.length)
+        .filter((path, index, arr) =>
+          !arr.slice(0, index).some((otherPath) => isSamePath(path, otherPath) || isDescendantPath(path, otherPath)),
+        );
+
+      const movableSources = filteredSources.filter((sourcePath) => {
+        if (isSamePath(sourcePath, targetPath)) return false;
+        if (isDescendantPath(targetPath, sourcePath)) return false;
+        const destinationPath = joinPath(targetPath, getFileName(sourcePath));
+        return !isSamePath(destinationPath, sourcePath);
+      });
+
+      if (movableSources.length === 0) return;
+
+      const sourceParentNames = new Map<string, string[]>();
+      for (const sourcePath of movableSources) {
+        const parentPath = getParentPath(sourcePath);
+        const names = sourceParentNames.get(parentPath) ?? [];
+        names.push(getFileName(sourcePath));
+        sourceParentNames.set(parentPath, names);
+      }
+
+      try {
+        if (pane.connection.isLocal) {
+          const renameLocalFile = netcattyBridge.get()?.renameLocalFile;
+          if (!renameLocalFile) {
+            throw new Error("Local rename unavailable");
+          }
+          for (const sourcePath of movableSources) {
+            const destinationPath = joinPath(targetPath, getFileName(sourcePath));
+            await renameLocalFile(sourcePath, destinationPath);
+          }
+        } else {
+          const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+          if (!sftpId) {
+            handleSessionError(side, new Error("SFTP session not found"));
+            return;
+          }
+          const renameSftp = netcattyBridge.get()?.renameSftp;
+          if (!renameSftp) {
+            throw new Error("SFTP rename unavailable");
+          }
+          for (const sourcePath of movableSources) {
+            const destinationPath = joinPath(targetPath, getFileName(sourcePath));
+            await renameSftp(sftpId, sourcePath, destinationPath, pane.filenameEncoding);
+          }
+        }
+        clearCacheForConnection(pane.connection.id);
+        const currentPath = pane.connection.currentPath;
+        const sourceParents = Array.from(sourceParentNames.keys());
+        const currentPathAffected =
+          sourceParents.some((path) => isSamePath(path, currentPath)) ||
+          isSamePath(targetPath, currentPath);
+
+        if (currentPathAffected) {
+          await refresh(side);
+        } else {
+          updateActiveTab(side, (prev) => {
+            if (!prev.connection || prev.connection.id !== pane.connection?.id) {
+              return prev;
+            }
+
+            const namesInCurrentPath = sourceParentNames.get(prev.connection.currentPath);
+            if (!namesInCurrentPath || namesInCurrentPath.length === 0) {
+              return prev;
+            }
+
+            const removeSet = new Set(namesInCurrentPath);
+            const nextSelection = new Set(prev.selectedFiles);
+            for (const name of removeSet) {
+              nextSelection.delete(name);
+            }
+
+            return {
+              ...prev,
+              files: prev.files.filter((file) => !removeSet.has(file.name)),
+              selectedFiles: nextSelection,
+            };
+          });
+        }
+      } catch (err) {
+        if (isSessionError(err)) {
+          handleSessionError(side, err as Error);
+          return;
+        }
+        throw err;
+      }
+    },
+    [clearCacheForConnection, getActivePane, handleSessionError, isDescendantPath, isSamePath, isSessionError, refresh, sftpSessionsRef, updateActiveTab],
+  );
+
  const changePermissions = useCallback(
    async (
      side: "left" | "right",
@@ -770,10 +951,14 @@ export const useSftpPaneActions = ({
    setFilter,
    getFilteredFiles,
    createDirectory,
+    createDirectoryAtPath,
    createFile,
+    createFileAtPath,
    deleteFiles,
    deleteFilesAtPath,
    renameFile,
+    renameFileAtPath,
+    moveEntriesToPath,
    changePermissions,
  };
 };
--- a/application/state/sftp/useSftpTabsState.ts
+++ b/application/state/sftp/useSftpTabsState.ts
@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useRef, useState } from "react";
 import { createEmptyPane, EMPTY_LEFT_PANE_ID, EMPTY_RIGHT_PANE_ID, SftpPane, SftpSideTabs } from "./types";
 import { logger } from "../../../lib/logger";

-export interface SftpTabsState {
+interface SftpTabsState {
  leftTabs: SftpSideTabs;
  rightTabs: SftpSideTabs;
  leftTabsRef: React.MutableRefObject<SftpSideTabs>;
@@ -14,6 +14,7 @@ export interface SftpTabsState {
  getActivePane: (side: "left" | "right") => SftpPane | null;
  updateTab: (side: "left" | "right", tabId: string, updater: (pane: SftpPane) => SftpPane) => void;
  updateActiveTab: (side: "left" | "right", updater: (pane: SftpPane) => SftpPane) => void;
+  clearSelectionsExcept: (target: { side: "left" | "right"; tabId: string } | null) => void;
  setTabShowHiddenFiles: (side: "left" | "right", tabId: string, showHiddenFiles: boolean) => void;
  addTab: (side: "left" | "right") => string;
  closeTab: (side: "left" | "right", tabId: string) => void;
@@ -34,6 +35,8 @@ export interface SftpTabsState {
  getActiveTabId: (side: "left" | "right") => string | null;
 }

+const EMPTY_SELECTION = new Set<string>();
+
 export const useSftpTabsState = ({
  defaultShowHiddenFiles = false,
 }: {
@@ -95,6 +98,31 @@ export const useSftpTabsState = ({
    [updateTab],
  );

+  const clearSelectionsExcept = useCallback(
+    (target: { side: "left" | "right"; tabId: string } | null) => {
+      const clearSideSelections = (
+        prev: SftpSideTabs,
+        side: "left" | "right",
+      ): SftpSideTabs => {
+        let changed = false;
+        const tabs = prev.tabs.map((tab) => {
+          const shouldKeepSelection =
+            target?.side === side && target.tabId === tab.id;
+          if (shouldKeepSelection || tab.selectedFiles.size === 0) {
+            return tab;
+          }
+          changed = true;
+          return { ...tab, selectedFiles: EMPTY_SELECTION };
+        });
+        return changed ? { ...prev, tabs } : prev;
+      };
+
+      setLeftTabs((prev) => clearSideSelections(prev, "left"));
+      setRightTabs((prev) => clearSideSelections(prev, "right"));
+    },
+    [],
+  );
+
  const setTabShowHiddenFiles = useCallback(
    (side: "left" | "right", tabId: string, showHiddenFiles: boolean) => {
      updateTab(side, tabId, (prev) => {
@@ -258,6 +286,7 @@ export const useSftpTabsState = ({
    getActivePane,
    updateTab,
    updateActiveTab,
+    clearSelectionsExcept,
    setTabShowHiddenFiles,
    addTab,
    closeTab,
--- a/application/state/sftp/useSftpTransfers.ts
+++ b/application/state/sftp/useSftpTransfers.ts
--- a/application/state/sftp/utils.ts
+++ b/application/state/sftp/utils.ts
@@ -48,39 +48,31 @@ export const joinPath = (base: string, name: string): string => {
    return `${normalizedBase}\\${name}`;
  }
  if (base === "/") return `/${name}`;
-  return `${base}/${name}`;
+  return `${base.replace(/\/+$/, "")}/${name}`;
 };

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

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

-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCloudSync } from './useCloudSync';
 import { useI18n } from '../i18n/I18nProvider';
 import { getCloudSyncManager } from '../../infrastructure/services/CloudSyncManager';
@@ -16,10 +16,11 @@ import {
  findSyncPayloadEncryptedCredentialPaths,
 } from '../../domain/credentials';
 import { isProviderReadyForSync, type CloudProvider, type SyncPayload } from '../../domain/sync';
+import { collectSyncableSettings } from '../syncPayload';
 import { STORAGE_KEY_PORT_FORWARDING } from '../../infrastructure/config/storageKeys';
 import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
 import { getEffectiveKnownHosts } from '../../infrastructure/syncHelpers';
-import { toast } from '../../components/ui/toast';
+import { notify } from '../notification';

 interface AutoSyncConfig {
  // Data to sync
@@ -31,7 +32,10 @@ interface AutoSyncConfig {
  snippetPackages?: SyncPayload['snippetPackages'];
  portForwardingRules?: SyncPayload['portForwardingRules'];
  knownHosts?: SyncPayload['knownHosts'];
-  
+  groupConfigs?: SyncPayload['groupConfigs'];
+  /** Opaque token that changes whenever a synced setting changes. */
+  settingsVersion?: number;
+
  // Callbacks
  onApplyPayload: (payload: SyncPayload) => void;
 }
@@ -49,10 +53,21 @@ 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);
+
+  // Listen for SFTP bookmark changes to trigger auto-sync
+  const [bookmarksVersion, setBookmarksVersion] = useState(0);
+  useEffect(() => {
+    const handler = () => setBookmarksVersion((v) => v + 1);
+    window.addEventListener('sftp-bookmarks-changed', handler);
+    return () => window.removeEventListener('sftp-bookmarks-changed', handler);
+  }, []);

  const getSyncSnapshot = useCallback(() => {
    let effectivePFRules = config.portForwardingRules;
@@ -81,6 +96,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
      snippetPackages: config.snippetPackages,
      portForwardingRules: effectivePFRules,
      knownHosts: effectiveKnownHosts,
+      groupConfigs: config.groupConfigs,
    };
  }, [
    config.hosts,
@@ -91,25 +107,28 @@ export const useAutoSync = (config: AutoSyncConfig) => {
    config.snippetPackages,
    config.portForwardingRules,
    config.knownHosts,
+    config.groupConfigs,
  ]);

  // Build sync payload
  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 +175,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) {
@@ -171,12 +200,14 @@ export const useAutoSync = (config: AutoSyncConfig) => {
        throw error;
      }
      console.error('[AutoSync] Sync failed:', error);
-      toast.error(
+      notify.error(
        error instanceof Error ? error.message : t('common.unknownError'),
        t('sync.autoSync.failedTitle'),
      );
+    } finally {
+      isSyncRunningRef.current = false;
    }
-  }, [sync, buildPayload, getDataHash, t]);
+  }, [sync, buildPayload, getDataHash, onApplyPayload, t]);
  
  // Check remote version and pull if newer (on startup)
  const checkRemoteVersion = useCallback(async () => {
@@ -198,19 +229,25 @@ export const useAutoSync = (config: AutoSyncConfig) => {
    if (!connectedProvider) return;
    
    try {
-      console.log('[AutoSync] Checking remote version...');
+      // Load base BEFORE downloading (downloadFromProvider overwrites the base)
+      const base = await manager.loadSyncBase(connectedProvider);
      const remotePayload = await sync.downloadFromProvider(connectedProvider);
-      
+
      if (remotePayload && remotePayload.syncedAt > state.localUpdatedAt) {
-        console.log('[AutoSync] Remote is newer, applying...');
-        config.onApplyPayload(remotePayload);
-        toast.success(t('sync.autoSync.syncedMessage'), t('sync.autoSync.syncedTitle'));
+        const { mergeSyncPayloads } = await import('../../domain/syncMerge');
+        const localPayload = buildPayload();
+        const mergeResult = mergeSyncPayloads(base, localPayload, remotePayload);
+
+        config.onApplyPayload(mergeResult.payload);
+        // Don't save base or skip auto-sync — let the data-change effect
+        // naturally trigger an upload of the merged payload (which will
+        // go through syncAllProviders and save base on success).
+        notify.success(t('sync.autoSync.syncedMessage'), t('sync.autoSync.syncedTitle'));
      }
    } catch (error) {
      console.error('[AutoSync] Failed to check remote version:', error);
-      // Don't show error toast for initial check - it's not critical
    }
-  }, [sync, config, t]);
+  }, [sync, config, buildPayload, t]);
  
  // Debounced auto-sync when data changes
  useEffect(() => {
@@ -227,7 +264,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 +280,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;
    }
    
@@ -246,7 +291,6 @@ export const useAutoSync = (config: AutoSyncConfig) => {
    
    // Debounce sync by 3 seconds
    syncTimeoutRef.current = setTimeout(() => {
-      console.log('[AutoSync] Data changed, syncing...');
      syncNow();
    }, 3000);
    
@@ -255,7 +299,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, bookmarksVersion]);
  
  // Check remote version on startup/unlock
  useEffect(() => {
--- a/application/state/useCloudSync.ts
+++ b/application/state/useCloudSync.ts
@@ -6,7 +6,7 @@
 * Uses useSyncExternalStore for real-time state synchronization across all components.
 */

-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
 import {
  type CloudProvider,
  type SecurityState,
@@ -24,7 +24,6 @@ import {
  isProviderReadyForSync,
 } from '../../domain/sync';
 import {
-  CloudSyncManager,
  getCloudSyncManager,
  type SyncManagerState,
 } from '../../infrastructure/services/CloudSyncManager';
@@ -82,8 +81,10 @@ export interface CloudSyncHook {
    code: string,
    redirectUri: string
  ) => Promise<void>;
+  cancelOAuthConnect: () => void;
  disconnectProvider: (provider: CloudProvider) => Promise<void>;
-  
+  resetProviderStatus: (provider: CloudProvider) => void;
+
  // Sync Actions
  syncNow: (payload: SyncPayload) => Promise<Map<CloudProvider, SyncResult>>;
  syncToProvider: (provider: CloudProvider, payload: SyncPayload) => Promise<SyncResult>;
@@ -103,12 +104,6 @@ export interface CloudSyncHook {
  refresh: () => void;
 }

-export interface GitHubAuthState {
-  isAuthenticating: boolean;
-  deviceFlowState: DeviceFlowState | null;
-  error: string | null;
-}
-
 // ============================================================================
 // Hook Implementation
 // ============================================================================
@@ -127,17 +122,6 @@ const getSnapshot = (): SyncManagerState => {
 };

 export const useCloudSync = (): CloudSyncHook => {
-  // Force update mechanism to ensure React re-renders
-  const [, forceUpdate] = useState(0);
-  
-  // Subscribe to state changes and force update
-  useEffect(() => {
-    const unsubscribe = manager.subscribeToStateChanges(() => {
-      forceUpdate(n => n + 1);
-    });
-    return unsubscribe;
-  }, []);
-  
  // Use useSyncExternalStore for real-time state sync across all components
  const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);

@@ -273,7 +257,7 @@ export const useCloudSync = (): CloudSyncHook => {
      throw new Error('Unexpected auth type');
    }
    const data = result.data as { url: string; redirectUri: string };
-    
+
    // Start OAuth callback server in Electron and wait for authorization
    const bridge = netcattyBridge.get();
    const startCallback = bridge?.startOAuthCallback;
@@ -281,32 +265,44 @@ export const useCloudSync = (): CloudSyncHook => {
      // Get state from adapter for CSRF protection
      const adapter = manager.getAdapter('google') as { getPKCEState?: () => string | null } | undefined;
      const expectedState = adapter?.getPKCEState?.() || undefined;
-      
-      // Start callback server and open browser
+
+      // Start callback server and open system browser
      const callbackPromise = startCallback(expectedState);
-      
-      // Open browser after starting server
-      setTimeout(() => {
-        window.open(data.url, "_blank", "width=600,height=700,noopener,noreferrer");
-      }, 100);
-      
-      // Wait for callback
-      const { code } = await callbackPromise;
-      
-      // Complete auth with the received code
-      await manager.completePKCEAuth('google', code, data.redirectUri);
+
+      // Use system browser to avoid white-screen issues in popup windows (#563)
+      // Race: if browser launch fails, surface the error immediately
+      let openTimer: ReturnType<typeof setTimeout> | null = null;
+      const browserPromise = new Promise<never>((_resolve, reject) => {
+        openTimer = setTimeout(async () => {
+          try {
+            await bridge?.openExternal(data.url);
+          } catch (err) {
+            bridge?.cancelOAuthCallback?.();
+            reject(err instanceof Error ? err : new Error('Failed to open browser for authentication'));
+          }
+        }, 100);
+      });
+
+      try {
+        const { code } = await Promise.race([callbackPromise, browserPromise]);
+
+        // Complete auth with the received code
+        await manager.completePKCEAuth('google', code, data.redirectUri);
+      } finally {
+        if (openTimer) clearTimeout(openTimer);
+      }
    }
-    
+
    return data.url;
  }, []);
-  
+
  const connectOneDrive = useCallback(async (): Promise<string> => {
    const result = await manager.startProviderAuth('onedrive');
    if (result.type !== 'url') {
      throw new Error('Unexpected auth type');
    }
    const data = result.data as { url: string; redirectUri: string };
-    
+
    // Start OAuth callback server in Electron and wait for authorization
    const bridge = netcattyBridge.get();
    const startCallback = bridge?.startOAuthCallback;
@@ -314,22 +310,33 @@ export const useCloudSync = (): CloudSyncHook => {
      // Get state from adapter for CSRF protection
      const adapter = manager.getAdapter('onedrive') as { getPKCEState?: () => string | null } | undefined;
      const expectedState = adapter?.getPKCEState?.() || undefined;
-      
-      // Start callback server and open browser
+
+      // Start callback server and open system browser
      const callbackPromise = startCallback(expectedState);
-      
-      // Open browser after starting server
-      setTimeout(() => {
-        window.open(data.url, "_blank", "width=600,height=700,noopener,noreferrer");
-      }, 100);
-      
-      // Wait for callback
-      const { code } = await callbackPromise;
-      
-      // Complete auth with the received code
-      await manager.completePKCEAuth('onedrive', code, data.redirectUri);
+
+      // Use system browser to avoid white-screen issues in popup windows (#563)
+      let openTimer: ReturnType<typeof setTimeout> | null = null;
+      const browserPromise = new Promise<never>((_resolve, reject) => {
+        openTimer = setTimeout(async () => {
+          try {
+            await bridge?.openExternal(data.url);
+          } catch (err) {
+            bridge?.cancelOAuthCallback?.();
+            reject(err instanceof Error ? err : new Error('Failed to open browser for authentication'));
+          }
+        }, 100);
+      });
+
+      try {
+        const { code } = await Promise.race([callbackPromise, browserPromise]);
+
+        // Complete auth with the received code
+        await manager.completePKCEAuth('onedrive', code, data.redirectUri);
+      } finally {
+        if (openTimer) clearTimeout(openTimer);
+      }
    }
-    
+
    return data.url;
  }, []);
  
@@ -345,6 +352,10 @@ export const useCloudSync = (): CloudSyncHook => {
    await manager.disconnectProvider(provider);
  }, []);

+  const resetProviderStatus = useCallback((provider: CloudProvider): void => {
+    manager.resetProviderStatus(provider);
+  }, []);
+
  const connectWebDAV = useCallback(async (config: WebDAVConfig): Promise<void> => {
    await manager.connectConfigProvider('webdav', config);
  }, []);
@@ -353,6 +364,11 @@ export const useCloudSync = (): CloudSyncHook => {
    await manager.connectConfigProvider('s3', config);
  }, []);
  
+  const cancelOAuthConnect = useCallback(() => {
+    const bridge = netcattyBridge.get();
+    bridge?.cancelOAuthCallback?.();
+  }, []);
+
  // ========== Settings ==========
  
  const setAutoSync = useCallback((enabled: boolean, intervalMinutes?: number) => {
@@ -450,8 +466,10 @@ export const useCloudSync = (): CloudSyncHook => {
    connectWebDAV,
    connectS3,
    completePKCEAuth,
+    cancelOAuthConnect,
    disconnectProvider,
-    
+    resetProviderStatus,
+
    // Sync Actions
    syncNow: syncNowWithUnlock,
    syncToProvider: syncToProviderWithUnlock,
@@ -472,60 +490,4 @@ export const useCloudSync = (): CloudSyncHook => {
  };
 };

-// ============================================================================
-// Convenience Hooks
-// ============================================================================
-
-/**
- * Hook for just the security state (lighter weight)
- */
-export const useSecurityState = () => {
-  const [manager] = useState<CloudSyncManager>(() => getCloudSyncManager());
-  const [securityState, setSecurityState] = useState<SecurityState>(
-    () => manager.getSecurityState()
-  );
-  
-  useEffect(() => {
-    const unsubscribe = manager.subscribe((event) => {
-      if (event.type === 'SECURITY_STATE_CHANGED') {
-        setSecurityState(event.state);
-      }
-    });
-    return unsubscribe;
-  }, [manager]);
-  
-  return {
-    securityState,
-    isUnlocked: securityState === 'UNLOCKED',
-    isLocked: securityState === 'LOCKED',
-    hasNoKey: securityState === 'NO_KEY',
-  };
-};
-
-/**
- * Hook for provider status indicators
- */
-export const useProviderStatus = (provider: CloudProvider) => {
-  const [manager] = useState<CloudSyncManager>(() => getCloudSyncManager());
-  const [connection, setConnection] = useState<ProviderConnection>(
-    () => manager.getProviderConnection(provider)
-  );
-  
-  useEffect(() => {
-    const unsubscribe = manager.subscribe(() => {
-      setConnection(manager.getProviderConnection(provider));
-    });
-    return unsubscribe;
-  }, [manager, provider]);
-  
-  return {
-    ...connection,
-    isConnected: isProviderReadyForSync(connection),
-    isSyncing: connection.status === 'syncing',
-    hasError: connection.status === 'error',
-    dotColor: getSyncDotColor(connection.status),
-    lastSyncFormatted: formatLastSync(connection.lastSync),
-  };
-};
-
 export default useCloudSync;
--- a/application/state/useFileUpload.ts
+++ b/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 };
+}
--- a/application/state/useGlobalHotkeys.ts
+++ b/application/state/useGlobalHotkeys.ts
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { KeyBinding, matchesKeyBinding } from '../../domain/models';

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

  const writeSshConfigToFile = useCallback(
    async (source: ManagedSource, managedHosts: Host[]) => {
-      console.log(`[ManagedSourceSync] writeSshConfigToFile called for ${source.groupName}, hosts:`, managedHosts.length);
-
      const bridge = netcattyBridge.get();
      if (!bridge?.writeLocalFile) {
        console.warn("[ManagedSourceSync] writeLocalFile not available");
@@ -121,14 +119,9 @@ export const useManagedSourceSync = ({
          managedHosts,
          hosts,
        );
-        console.log(`[ManagedSourceSync] Final content (${finalContent.length} chars)`);
-
        const encoder = new TextEncoder();
        const buffer = encoder.encode(finalContent);
-        console.log(`[ManagedSourceSync] Writing to ${source.filePath}`);
-
        await bridge.writeLocalFile(source.filePath, buffer.buffer as ArrayBuffer);
-        console.log(`[ManagedSourceSync] Write successful`);
        return true;
      } catch (err) {
        console.error("[ManagedSourceSync] Failed to write SSH config:", err);
@@ -159,12 +152,8 @@ export const useManagedSourceSync = ({
  // This should be called before deleting a managed group to avoid stale entries
  const clearAndRemoveSource = useCallback(
    async (source: ManagedSource) => {
-      console.log(`[ManagedSourceSync] Clearing managed block for ${source.groupName}`);
      // Write empty hosts list to clear the managed block
      const success = await writeSshConfigToFile(source, []);
-      if (success) {
-        console.log(`[ManagedSourceSync] Managed block cleared, removing source`);
-      }
      // Remove the source regardless of write success
      const updatedSources = managedSourcesRef.current.filter((s) => s.id !== source.id);
      onUpdateManagedSources(updatedSources);
@@ -179,19 +168,14 @@ export const useManagedSourceSync = ({
    async (sources: ManagedSource[]) => {
      if (sources.length === 0) return;

-      console.log(`[ManagedSourceSync] Clearing ${sources.length} managed blocks`);
-
      // Clear all files in parallel
-      const results = await Promise.all(
+      await Promise.all(
        sources.map(async (source) => {
          const success = await writeSshConfigToFile(source, []);
          return { sourceId: source.id, success };
        })
      );

-      const successCount = results.filter(r => r.success).length;
-      console.log(`[ManagedSourceSync] Cleared ${successCount}/${sources.length} managed blocks`);
-
      // Remove all sources atomically in a single update
      const sourceIdsToRemove = new Set(sources.map(s => s.id));
      const updatedSources = managedSourcesRef.current.filter(
@@ -273,8 +257,6 @@ export const useManagedSourceSync = ({
        const prevManaged = prevHostsBySource.get(source.id) || [];
        const currManaged = currHostsBySource.get(source.id) || [];

-        console.log(`[ManagedSourceSync] Source ${source.groupName}: prev=${prevManaged.length}, curr=${currManaged.length}`);
-
        if (prevManaged.length !== currManaged.length) {
          changedSourceIds.add(source.id);
          continue;
@@ -328,7 +310,6 @@ export const useManagedSourceSync = ({
    }

    if (changedSourceIds.size > 0) {
-      console.log(`[ManagedSourceSync] Syncing sources:`, Array.from(changedSourceIds));
      syncInProgressRef.current = true;

      Promise.all(
--- a/application/state/usePortForwardingAutoStart.ts
+++ b/application/state/usePortForwardingAutoStart.ts
@@ -3,8 +3,9 @@
 * This should be used at the App level to ensure auto-start happens
 * when the application starts, not when the user navigates to the port forwarding page.
 */
-import { useEffect, useRef } from "react";
-import { Host, PortForwardingRule } from "../../domain/models";
+import { useCallback, useEffect, useRef } from "react";
+import { GroupConfig, Host, Identity, PortForwardingRule, SSHKey } from "../../domain/models";
+import { resolveGroupDefaults, applyGroupDefaults } from "../../domain/groupConfig";
 import { STORAGE_KEY_PORT_FORWARDING } from "../../infrastructure/config/storageKeys";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
 import {
@@ -17,7 +18,9 @@ import { logger } from "../../lib/logger";

 export interface UsePortForwardingAutoStartOptions {
  hosts: Host[];
-  keys: { id: string; privateKey: string; passphrase: string }[];
+  keys: SSHKey[];
+  identities: Identity[];
+  groupConfigs: GroupConfig[];
 }

 /**
@@ -27,10 +30,39 @@ export interface UsePortForwardingAutoStartOptions {
 export const usePortForwardingAutoStart = ({
  hosts,
  keys,
+  identities,
+  groupConfigs,
 }: UsePortForwardingAutoStartOptions): void => {
  const autoStartExecutedRef = useRef(false);
  const hostsRef = useRef<Host[]>(hosts);
-  const keysRef = useRef<{ id: string; privateKey: string; passphrase: string }[]>(keys);
+  const keysRef = useRef<SSHKey[]>(keys);
+  const identitiesRef = useRef<Identity[]>(identities);
+  const groupConfigsRef = useRef<GroupConfig[]>(groupConfigs);
+
+  const isHostAuthReady = useCallback((host: Host, seen = new Set<string>()): boolean => {
+    if (!host || seen.has(host.id)) return true;
+    seen.add(host.id);
+
+    if (host.identityId) {
+      const identity = identitiesRef.current.find((candidate) => candidate.id === host.identityId);
+      if (!identity) return false;
+      if (identity.keyId && !keysRef.current.some((key) => key.id === identity.keyId)) {
+        return false;
+      }
+    }
+    if (host.identityFileId && !keysRef.current.some((key) => key.id === host.identityFileId)) {
+      return false;
+    }
+
+    const chainIds = host.hostChain?.hostIds || [];
+    for (const chainId of chainIds) {
+      const chainHost = hostsRef.current.find((candidate) => candidate.id === chainId);
+      if (!chainHost) return false;
+      if (!isHostAuthReady(chainHost, seen)) return false;
+    }
+
+    return true;
+  }, []);

  // Keep refs in sync
  useEffect(() => {
@@ -41,6 +73,20 @@ export const usePortForwardingAutoStart = ({
    keysRef.current = keys;
  }, [keys]);

+  useEffect(() => {
+    identitiesRef.current = identities;
+  }, [identities]);
+
+  useEffect(() => {
+    groupConfigsRef.current = groupConfigs;
+  }, [groupConfigs]);
+
+  const resolveEffectiveHost = useCallback((host: Host): Host => {
+    if (!host.group) return host;
+    const defaults = resolveGroupDefaults(host.group, groupConfigsRef.current);
+    return applyGroupDefaults(host, defaults);
+  }, []);
+
  // Set up the reconnect callback
  useEffect(() => {
    const handleReconnect = async (
@@ -57,25 +103,37 @@ export const usePortForwardingAutoStart = ({
        return { success: false, error: "Rule or host not found" };
      }

-      const host = hostsRef.current.find((h) => h.id === rule.hostId);
-      if (!host) {
+      const rawHost = hostsRef.current.find((h) => h.id === rule.hostId);
+      if (!rawHost) {
        return { success: false, error: "Host not found" };
      }

-      return startPortForward(rule, host, keysRef.current, onStatusChange, true);
+      const host = resolveEffectiveHost(rawHost);
+      return startPortForward(rule, host, hostsRef.current, keysRef.current, identitiesRef.current, onStatusChange, true);
    };

    setReconnectCallback(handleReconnect);
    return () => {
      setReconnectCallback(null);
    };
-  }, []);
+  }, [resolveEffectiveHost]);

  // Auto-start rules on app launch
  useEffect(() => {
    if (autoStartExecutedRef.current) return;
    if (hosts.length === 0) return;

+    const storedRules = localStorageAdapter.read<PortForwardingRule[]>(
+      STORAGE_KEY_PORT_FORWARDING,
+    ) ?? [];
+    const pendingAutoStartRules = storedRules.filter((rule) => rule.autoStart && rule.hostId);
+    if (pendingAutoStartRules.some((rule) => {
+      const host = hosts.find((candidate) => candidate.id === rule.hostId);
+      return !host || !isHostAuthReady(host);
+    })) {
+      return;
+    }
+
    // Mark as executed immediately to prevent duplicate runs
    // (React StrictMode or dependency changes could cause re-runs)
    autoStartExecutedRef.current = true;
@@ -103,12 +161,15 @@ export const usePortForwardingAutoStart = ({

      // Start each auto-start rule
      for (const rule of autoStartRules) {
-        const host = hosts.find((h) => h.id === rule.hostId);
-        if (host) {
+        const rawHost = hosts.find((h) => h.id === rule.hostId);
+        if (rawHost) {
+          const host = resolveEffectiveHost(rawHost);
          void startPortForward(
            rule,
            host,
+            hosts,
            keys,
+            identities,
            (status, error) => {
              // Update the rule status in storage
              const currentRules = localStorageAdapter.read<PortForwardingRule[]>(
@@ -135,5 +196,5 @@ export const usePortForwardingAutoStart = ({
    };

    void runAutoStart();
-  }, [hosts, keys]);
+  }, [hosts, identities, isHostAuthReady, keys, resolveEffectiveHost]);
 };
--- a/application/state/usePortForwardingState.ts
+++ b/application/state/usePortForwardingState.ts
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Host, PortForwardingRule } from "../../domain/models";
+import { Host, Identity, PortForwardingRule, SSHKey } from "../../domain/models";
 import {
  STORAGE_KEY_PF_PREFER_FORM_MODE,
  STORAGE_KEY_PF_VIEW_MODE,
@@ -63,7 +63,9 @@ export interface UsePortForwardingStateResult {
  startTunnel: (
    rule: PortForwardingRule,
    host: Host,
-    keys: { id: string; privateKey: string; passphrase: string }[],
+    hosts: Host[],
+    keys: SSHKey[],
+    identities: Identity[],
    onStatusChange?: (status: PortForwardingRule["status"], error?: string) => void,
    enableReconnect?: boolean,
  ) => Promise<{ success: boolean; error?: string }>;
@@ -377,14 +379,16 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
    async (
      rule: PortForwardingRule,
      host: Host,
-      keys: { id: string; privateKey: string; passphrase: string }[],
+      hosts: Host[],
+      keys: SSHKey[],
+      identities: Identity[],
      onStatusChange?: (
        status: PortForwardingRule["status"],
        error?: string,
      ) => void,
      enableReconnect = false,
    ) => {
-      return startPortForward(rule, host, keys, (status, error) => {
+      return startPortForward(rule, host, hosts, keys, identities, (status, error) => {
        setRuleStatus(rule.id, status, error);
        onStatusChange?.(status, error ?? undefined);
      }, enableReconnect);
--- a/application/state/useSessionState.ts
+++ b/application/state/useSessionState.ts
@@ -38,23 +38,35 @@ 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'];
+    shell?: string;
+    shellArgs?: string[];
+    shellName?: string;
+    shellIcon?: string;
+  }) => {
    const sessionId = crypto.randomUUID();
    const localHostId = `local-${sessionId}`;
    const newSession: TerminalSession = {
      id: sessionId,
      hostId: localHostId,
-      hostLabel: 'Local Terminal',
+      hostLabel: options?.shellName || 'Local Terminal',
      hostname: 'localhost',
      username: 'local',
      status: 'connecting',
+      protocol: 'local',
+      shellType: options?.shellType,
+      localShell: options?.shell,
+      localShellArgs: options?.shellArgs,
+      localShellName: options?.shellName,
+      localShellIcon: options?.shellIcon,
    };
    setSessions(prev => [...prev, newSession]);
    setActiveTabId(sessionId);
    return sessionId;
  }, [setActiveTabId]);

-  const createSerialSession = useCallback((config: SerialConfig) => {
+  const createSerialSession = useCallback((config: SerialConfig, options?: { charset?: string }) => {
    const sessionId = crypto.randomUUID();
    const serialHostId = `serial-${sessionId}`;
    const portName = config.path.split('/').pop() || config.path;
@@ -67,6 +79,7 @@ export const useSessionState = () => {
      status: 'connecting',
      protocol: 'serial',
      serialConfig: config,
+      charset: options?.charset,
    };
    setSessions(prev => [...prev, newSession]);
    setActiveTabId(sessionId);
@@ -99,6 +112,7 @@ export const useSessionState = () => {
        status: 'connecting',
        protocol: 'serial',
        serialConfig: serialConfig,
+        charset: host.charset,
      };
      setSessions(prev => [...prev, newSession]);
      setActiveTabId(sessionId);
@@ -116,6 +130,7 @@ export const useSessionState = () => {
      protocol: host.protocol,
      port: host.port,
      moshEnabled: host.moshEnabled,
+      charset: host.charset,
    };
    setSessions(prev => [...prev, newSession]);
    setActiveTabId(newSession.id);
@@ -317,6 +332,7 @@ export const useSessionState = () => {
          status: 'connecting',
          protocol: 'serial',
          serialConfig: serialConfig,
+          charset: host.charset,
        };
      }

@@ -330,6 +346,7 @@ export const useSessionState = () => {
        protocol: host.protocol,
        port: host.port,
        moshEnabled: host.moshEnabled,
+        charset: host.charset,
      };
    });

@@ -414,11 +431,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,8 +457,14 @@ export const useSessionState = () => {
          protocol: session.protocol,
          port: session.port,
          moshEnabled: session.moshEnabled,
+          shellType: nextShellType,
+          charset: session.charset,
+          localShell: session.localShell,
+          localShellArgs: session.localShellArgs,
+          localShellName: session.localShellName,
+          localShellIcon: session.localShellIcon,
        };
-        
+
        // Add pane to existing workspace
        const hint: SplitHint = {
          direction,
@@ -464,13 +493,19 @@ export const useSessionState = () => {
        protocol: session.protocol,
        port: session.port,
        moshEnabled: session.moshEnabled,
+        shellType: nextShellType,
+        charset: session.charset,
+        localShell: session.localShell,
+        localShellArgs: session.localShellArgs,
+        localShellName: session.localShellName,
+        localShellIcon: session.localShellIcon,
      };
-      
+
      const hint: SplitHint = {
        direction,
        position: direction === 'horizontal' ? 'bottom' : 'right',
      };
-      
+
      const newWorkspace = createWorkspaceEntity(sessionId, newSession.id, hint);
      setWorkspaces(prev => [...prev, newWorkspace]);
      setActiveTabId(newWorkspace.id);
@@ -551,6 +586,7 @@ export const useSessionState = () => {
      hostname: host.hostname,
      username: host.username,
      status: 'connecting' as const,
+      charset: host.charset,
      // workspaceId will be set after workspace is created
    }));

@@ -569,6 +605,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 +651,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,7 +672,13 @@ export const useSessionState = () => {
        protocol: session.protocol,
        port: session.port,
        moshEnabled: session.moshEnabled,
+        shellType: nextShellType,
+        charset: session.charset,
        serialConfig: session.serialConfig,
+        localShell: session.localShell,
+        localShellArgs: session.localShellArgs,
+        localShellName: session.localShellName,
+        localShellIcon: session.localShellIcon,
      };

      setActiveTabId(newSession.id);
@@ -663,9 +711,11 @@ export const useSessionState = () => {
      ...workspaces.map(w => w.id),
      ...logViews.map(lv => lv.id),
    ];
+    const allTabIdSet = new Set(allTabIds);
    // Filter tabOrder to only include existing tabs, then add any new tabs at the end
-    const orderedIds = tabOrder.filter(id => allTabIds.includes(id));
-    const newIds = allTabIds.filter(id => !orderedIds.includes(id));
+    const orderedIds = tabOrder.filter(id => allTabIdSet.has(id));
+    const orderedIdSet = new Set(orderedIds);
+    const newIds = allTabIds.filter(id => !orderedIdSet.has(id));
    return [...orderedIds, ...newIds];
  }, [orphanSessions, workspaces, logViews, tabOrder]);

@@ -679,10 +729,12 @@ export const useSessionState = () => {
        ...workspaces.map(w => w.id),
        ...logViews.map(lv => lv.id),
      ];
+      const allTabIdSet = new Set(allTabIds);
      
      // Build current effective order: existing order + new tabs at end
-      const orderedIds = prevTabOrder.filter(id => allTabIds.includes(id));
-      const newIds = allTabIds.filter(id => !orderedIds.includes(id));
+      const orderedIds = prevTabOrder.filter(id => allTabIdSet.has(id));
+      const orderedIdSet = new Set(orderedIds);
+      const newIds = allTabIds.filter(id => !orderedIdSet.has(id));
      const currentOrder = [...orderedIds, ...newIds];
      
      const draggedIndex = currentOrder.indexOf(draggedId);
--- a/application/state/useSettingsState.ts
+++ b/application/state/useSettingsState.ts
@@ -21,21 +21,27 @@ import {
  STORAGE_KEY_SFTP_AUTO_SYNC,
  STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES,
  STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD,
+  STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR,
+  STORAGE_KEY_SFTP_TRANSFER_CONCURRENCY,
+  STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE,
  STORAGE_KEY_EDITOR_WORD_WRAP,
  STORAGE_KEY_SESSION_LOGS_ENABLED,
  STORAGE_KEY_SESSION_LOGS_DIR,
  STORAGE_KEY_SESSION_LOGS_FORMAT,
  STORAGE_KEY_TOGGLE_WINDOW_HOTKEY,
  STORAGE_KEY_CLOSE_TO_TRAY,
+  STORAGE_KEY_GLOBAL_HOTKEY_ENABLED,
+  STORAGE_KEY_AUTO_UPDATE_ENABLED,
+  STORAGE_KEY_WORKSPACE_FOCUS_STYLE,
+
 } from '../../infrastructure/config/storageKeys';
 import { DEFAULT_UI_LOCALE, resolveSupportedLocale } from '../../infrastructure/config/i18n';
 import { TERMINAL_THEMES } from '../../infrastructure/config/terminalThemes';
-import { 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';
 import { uiFontStore, useUIFontsLoaded } from './uiFontStore';
-import { useAvailableFonts } from './fontStore';
 import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
 import { netcattyBridge } from '../../infrastructure/services/netcattyBridge';

@@ -61,6 +67,8 @@ const DEFAULT_SFTP_DOUBLE_CLICK_BEHAVIOR: 'open' | 'transfer' = 'open';
 const DEFAULT_SFTP_AUTO_SYNC = false;
 const DEFAULT_SFTP_SHOW_HIDDEN_FILES = false;
 const DEFAULT_SFTP_USE_COMPRESSED_UPLOAD = true;
+const DEFAULT_SFTP_AUTO_OPEN_SIDEBAR = false;
+const DEFAULT_SFTP_DEFAULT_VIEW_MODE: 'list' | 'tree' = 'list';

 // Editor defaults
 const DEFAULT_EDITOR_WORD_WRAP = false;
@@ -117,8 +125,11 @@ const applyThemeTokens = (
  accentOverride: string,
 ) => {
  const root = window.document.documentElement;
-  root.classList.remove('light', 'dark');
-  root.classList.add(resolvedTheme);
+  // If immersive override is active (style tag present), it owns the dark/light class — don't override
+  if (!document.getElementById('netcatty-immersive-override')) {
+    root.classList.remove('light', 'dark');
+    root.classList.add(resolvedTheme);
+  }
  root.style.setProperty('--background', tokens.background);
  root.style.setProperty('--foreground', tokens.foreground);
  root.style.setProperty('--card', tokens.card);
@@ -151,7 +162,6 @@ const applyThemeTokens = (
 };

 export const useSettingsState = () => {
-  const availableFonts = useAvailableFonts();
  const uiFontsLoaded = useUIFontsLoaded();
  const [theme, setTheme] = useState<'dark' | 'light' | 'system'>(() => {
    const stored = readStoredString(STORAGE_KEY_THEME);
@@ -229,6 +239,18 @@ export const useSettingsState = () => {
    if (stored === 'false' || stored === 'disabled') return false;
    return DEFAULT_SFTP_USE_COMPRESSED_UPLOAD;
  });
+  const [sftpAutoOpenSidebar, setSftpAutoOpenSidebar] = useState<boolean>(() => {
+    const stored = readStoredString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR);
+    return stored === 'true' ? true : DEFAULT_SFTP_AUTO_OPEN_SIDEBAR;
+  });
+  const [sftpDefaultViewMode, setSftpDefaultViewMode] = useState<'list' | 'tree'>(() => {
+    const stored = readStoredString(STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE);
+    return (stored === 'list' || stored === 'tree') ? stored : DEFAULT_SFTP_DEFAULT_VIEW_MODE;
+  });
+  const [sftpTransferConcurrency, setSftpTransferConcurrencyState] = useState<number>(() => {
+    const stored = localStorageAdapter.readNumber(STORAGE_KEY_SFTP_TRANSFER_CONCURRENCY);
+    return stored != null && stored >= 1 && stored <= 16 ? stored : 4;
+  });

  // Editor Settings
  const [editorWordWrap, setEditorWordWrapState] = useState<boolean>(() => {
@@ -264,11 +286,25 @@ export const useSettingsState = () => {
    if (stored === null) return true;
    return stored === 'true';
  });
+  const [autoUpdateEnabled, setAutoUpdateEnabled] = useState<boolean>(() => {
+    const stored = readStoredString(STORAGE_KEY_AUTO_UPDATE_ENABLED);
+    if (stored === null) return true; // Default to enabled
+    return stored === 'true';
+  });
  const [hotkeyRegistrationError, setHotkeyRegistrationError] = useState<string | null>(null);
+  const [globalHotkeyEnabled, setGlobalHotkeyEnabled] = useState<boolean>(() => {
+    const stored = readStoredString(STORAGE_KEY_GLOBAL_HOTKEY_ENABLED);
+    if (stored === null) return true; // Default to enabled
+    return stored === 'true';
+  });
  const incomingTerminalSettingsSignatureRef = useRef<string | null>(null);
  const localTerminalSettingsVersionRef = useRef(0);
  const broadcastedLocalTerminalSettingsVersionRef = useRef(0);

+  // Fix 1: Mount guard — skip redundant IPC broadcasts & localStorage writes on initial mount.
+  // Set to true by the LAST useEffect declaration; all persist effects see false on first render.
+  const persistMountedRef = useRef(false);
+
  const setTerminalSettings = useCallback((nextValue: SetStateAction<TerminalSettings>) => {
    setTerminalSettingsState((prev) => {
      const candidate = typeof nextValue === 'function'
@@ -304,6 +340,24 @@ export const useSettingsState = () => {
    }
  }, []);

+
+  const setSftpTransferConcurrency = useCallback((value: number) => {
+    const clamped = Math.max(1, Math.min(16, Math.round(value)));
+    setSftpTransferConcurrencyState(clamped);
+    localStorageAdapter.writeString(STORAGE_KEY_SFTP_TRANSFER_CONCURRENCY, String(clamped));
+    notifySettingsChanged(STORAGE_KEY_SFTP_TRANSFER_CONCURRENCY, clamped);
+  }, [notifySettingsChanged]);
+
+  const [workspaceFocusStyle, setWorkspaceFocusStyleState] = useState<'dim' | 'border'>(() => {
+    const stored = localStorageAdapter.readString(STORAGE_KEY_WORKSPACE_FOCUS_STYLE);
+    return stored === 'border' ? 'border' : 'dim';
+  });
+  const setWorkspaceFocusStyle = useCallback((style: 'dim' | 'border') => {
+    setWorkspaceFocusStyleState(style);
+    localStorageAdapter.writeString(STORAGE_KEY_WORKSPACE_FOCUS_STYLE, style);
+    notifySettingsChanged(STORAGE_KEY_WORKSPACE_FOCUS_STYLE, style);
+  }, [notifySettingsChanged]);
+
  const syncAppearanceFromStorage = useCallback(() => {
    const storedTheme = readStoredString(STORAGE_KEY_THEME);
    const nextTheme = storedTheme && isValidTheme(storedTheme) ? storedTheme : theme;
@@ -316,6 +370,17 @@ export const useSettingsState = () => {
    const storedAccent = readStoredString(STORAGE_KEY_COLOR);
    const nextAccent = storedAccent && isValidHslToken(storedAccent) ? storedAccent.trim() : customAccent;

+    // Fix 2: Skip expensive DOM operations if nothing actually changed
+    if (
+      nextTheme === theme &&
+      nextLightId === lightUiThemeId &&
+      nextDarkId === darkUiThemeId &&
+      nextAccentMode === accentMode &&
+      nextAccent === customAccent
+    ) {
+      return;
+    }
+
    setTheme(nextTheme);
    setLightUiThemeId(nextLightId);
    setDarkUiThemeId(nextDarkId);
@@ -332,6 +397,68 @@ export const useSettingsState = () => {
    setCustomCSS((prev) => (prev === storedCss ? prev : storedCss));
  }, []);

+  const rehydrateAllFromStorage = useCallback(() => {
+    // Theme & appearance (already have helper)
+    syncAppearanceFromStorage();
+    syncCustomCssFromStorage();
+
+    // UI Font
+    const storedFont = readStoredString(STORAGE_KEY_UI_FONT_FAMILY);
+    if (storedFont) setUiFontFamilyId(storedFont);
+
+    // Language
+    const storedLang = readStoredString(STORAGE_KEY_UI_LANGUAGE);
+    if (storedLang) setUiLanguage(storedLang as UILanguage);
+
+    // Terminal
+    const storedTermTheme = readStoredString(STORAGE_KEY_TERM_THEME);
+    if (storedTermTheme) setTerminalThemeId(storedTermTheme);
+    const storedTermFont = readStoredString(STORAGE_KEY_TERM_FONT_FAMILY);
+    if (storedTermFont) setTerminalFontFamilyId(storedTermFont);
+    const storedTermSize = localStorageAdapter.readNumber(STORAGE_KEY_TERM_FONT_SIZE);
+    if (storedTermSize != null) setTerminalFontSize(storedTermSize);
+    const storedTermSettings = readStoredString(STORAGE_KEY_TERM_SETTINGS);
+    if (storedTermSettings) {
+      try {
+        const parsed = JSON.parse(storedTermSettings);
+        setTerminalSettings(parsed);
+      } catch { /* ignore */ }
+    }
+
+    // Keyboard
+    const storedKb = readStoredString(STORAGE_KEY_CUSTOM_KEY_BINDINGS);
+    if (storedKb) {
+      try {
+        setCustomKeyBindings(JSON.parse(storedKb));
+      } catch { /* ignore */ }
+    }
+
+    // Editor
+    const storedWrap = readStoredString(STORAGE_KEY_EDITOR_WORD_WRAP);
+    if (storedWrap === 'true' || storedWrap === 'false') setEditorWordWrapState(storedWrap === 'true');
+
+    // SFTP
+    const storedDblClick = readStoredString(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR);
+    if (storedDblClick === 'open' || storedDblClick === 'transfer') setSftpDoubleClickBehavior(storedDblClick);
+    const storedAutoSync = readStoredString(STORAGE_KEY_SFTP_AUTO_SYNC);
+    if (storedAutoSync === 'true' || storedAutoSync === 'false') setSftpAutoSync(storedAutoSync === 'true');
+    const storedHidden = readStoredString(STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES);
+    if (storedHidden === 'true' || storedHidden === 'false') setSftpShowHiddenFiles(storedHidden === 'true');
+    const storedCompress = readStoredString(STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD);
+    if (storedCompress === 'true' || storedCompress === 'false') setSftpUseCompressedUpload(storedCompress === 'true');
+    const storedAutoOpenSidebar = readStoredString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR);
+    if (storedAutoOpenSidebar === 'true' || storedAutoOpenSidebar === 'false') setSftpAutoOpenSidebar(storedAutoOpenSidebar === 'true');
+    const storedDefaultViewMode = readStoredString(STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE);
+    if (storedDefaultViewMode === 'list' || storedDefaultViewMode === 'tree') setSftpDefaultViewMode(storedDefaultViewMode);
+
+    // Workspace focus style
+    const storedFocusStyle = readStoredString(STORAGE_KEY_WORKSPACE_FOCUS_STYLE);
+    if (storedFocusStyle === 'dim' || storedFocusStyle === 'border') setWorkspaceFocusStyleState(storedFocusStyle);
+
+    // Custom terminal themes
+    customThemeStore.loadFromStorage();
+  }, [syncAppearanceFromStorage, syncCustomCssFromStorage, setTerminalSettings]);
+
  useLayoutEffect(() => {
    const tokens = getUiThemeById(resolvedTheme, resolvedTheme === 'dark' ? darkUiThemeId : lightUiThemeId).tokens;
    applyThemeTokens(theme, resolvedTheme, tokens, accentMode, customAccent);
@@ -340,12 +467,11 @@ export const useSettingsState = () => {
    localStorageAdapter.writeString(STORAGE_KEY_UI_THEME_DARK, darkUiThemeId);
    localStorageAdapter.writeString(STORAGE_KEY_ACCENT_MODE, accentMode);
    localStorageAdapter.writeString(STORAGE_KEY_COLOR, customAccent);
-    // Notify other windows
+    // Fix 1: Skip IPC broadcast on initial mount (values already match localStorage)
+    if (!persistMountedRef.current) return;
+    // Fix 3: Send a single IPC instead of 5 — the receiver calls syncAppearanceFromStorage()
+    // which re-reads ALL appearance values from localStorage.
    notifySettingsChanged(STORAGE_KEY_THEME, theme);
-    notifySettingsChanged(STORAGE_KEY_UI_THEME_LIGHT, lightUiThemeId);
-    notifySettingsChanged(STORAGE_KEY_UI_THEME_DARK, darkUiThemeId);
-    notifySettingsChanged(STORAGE_KEY_ACCENT_MODE, accentMode);
-    notifySettingsChanged(STORAGE_KEY_COLOR, customAccent);
  }, [theme, resolvedTheme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, notifySettingsChanged]);

  // Listen for OS color scheme changes to keep systemPreference in sync
@@ -363,7 +489,10 @@ export const useSettingsState = () => {
    localStorageAdapter.writeString(STORAGE_KEY_UI_LANGUAGE, uiLanguage);
    document.documentElement.lang = uiLanguage;
    netcattyBridge.get()?.setLanguage?.(uiLanguage);
-    notifySettingsChanged(STORAGE_KEY_UI_LANGUAGE, uiLanguage);
+    // Fix 1: Skip IPC broadcast on initial mount
+    if (persistMountedRef.current) {
+      notifySettingsChanged(STORAGE_KEY_UI_LANGUAGE, uiLanguage);
+    }
  }, [uiLanguage, notifySettingsChanged]);

  // Apply and persist UI font family
@@ -372,7 +501,10 @@ export const useSettingsState = () => {
    const font = uiFontStore.getFontById(uiFontFamilyId);
    document.documentElement.style.setProperty('--font-sans', font.family);
    localStorageAdapter.writeString(STORAGE_KEY_UI_FONT_FAMILY, uiFontFamilyId);
-    notifySettingsChanged(STORAGE_KEY_UI_FONT_FAMILY, uiFontFamilyId);
+    // Fix 1: Skip IPC broadcast on initial mount
+    if (persistMountedRef.current) {
+      notifySettingsChanged(STORAGE_KEY_UI_FONT_FAMILY, uiFontFamilyId);
+    }
  }, [uiFontFamilyId, uiFontsLoaded, notifySettingsChanged]);

  // Listen for settings changes from other windows via IPC
@@ -457,6 +589,26 @@ export const useSettingsState = () => {
      if (key === STORAGE_KEY_HOTKEY_RECORDING && typeof value === 'boolean') {
        setIsHotkeyRecordingState(value);
      }
+      if (key === STORAGE_KEY_GLOBAL_HOTKEY_ENABLED && typeof value === 'boolean') {
+        setGlobalHotkeyEnabled((prev) => (prev === value ? prev : value));
+      }
+      if (key === STORAGE_KEY_AUTO_UPDATE_ENABLED && typeof value === 'boolean') {
+        setAutoUpdateEnabled((prev) => (prev === value ? prev : value));
+      }
+      if (key === STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR && typeof value === 'boolean') {
+        setSftpAutoOpenSidebar((prev) => (prev === value ? prev : value));
+      }
+      if (key === STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE && typeof value === 'string') {
+        if (value === 'list' || value === 'tree') {
+          setSftpDefaultViewMode((prev) => (prev === value ? prev : value));
+        }
+      }
+      if (key === STORAGE_KEY_WORKSPACE_FOCUS_STYLE && (value === 'dim' || value === 'border')) {
+        setWorkspaceFocusStyleState((prev) => (prev === value ? prev : value));
+      }
+      if (key === STORAGE_KEY_SFTP_TRANSFER_CONCURRENCY && typeof value === 'number') {
+        setSftpTransferConcurrencyState((prev) => (prev === value ? prev : value));
+      }
    });
    return () => {
      try {
@@ -484,53 +636,76 @@ export const useSettingsState = () => {
    };
  }, []);

+  // Fix 4: Keep a ref snapshot of current settings so the storage event handler
+  // can compare without capturing 25+ state variables in its closure / dep array.
+  // This avoids constant listener detach/reattach on every state change.
+  const settingsSnapshotRef = useRef({
+    theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent,
+    customCSS, uiFontFamilyId, hotkeyScheme, uiLanguage,
+    terminalThemeId, terminalFontFamilyId, terminalFontSize,
+    sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles,
+    sftpUseCompressedUpload, sftpAutoOpenSidebar, sftpDefaultViewMode,
+    editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat,
+    globalHotkeyEnabled, autoUpdateEnabled,
+  });
+  settingsSnapshotRef.current = {
+    theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent,
+    customCSS, uiFontFamilyId, hotkeyScheme, uiLanguage,
+    terminalThemeId, terminalFontFamilyId, terminalFontSize,
+    sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles,
+    sftpUseCompressedUpload, sftpAutoOpenSidebar, sftpDefaultViewMode,
+    editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat,
+    globalHotkeyEnabled, autoUpdateEnabled,
+  };
+
  // Listen for storage changes from other windows (cross-window sync)
  useEffect(() => {
    const handleStorageChange = (e: StorageEvent) => {
+      const s = settingsSnapshotRef.current;
      if (e.key === STORAGE_KEY_THEME && e.newValue) {
-        if (isValidTheme(e.newValue) && e.newValue !== theme) {
+        if (isValidTheme(e.newValue) && e.newValue !== s.theme) {
          setTheme(e.newValue);
        }
      }
      if (e.key === STORAGE_KEY_UI_THEME_LIGHT && e.newValue) {
-        if (isValidUiThemeId('light', e.newValue) && e.newValue !== lightUiThemeId) {
+        if (isValidUiThemeId('light', e.newValue) && e.newValue !== s.lightUiThemeId) {
          setLightUiThemeId(e.newValue);
        }
      }
      if (e.key === STORAGE_KEY_UI_THEME_DARK && e.newValue) {
-        if (isValidUiThemeId('dark', e.newValue) && e.newValue !== darkUiThemeId) {
+        if (isValidUiThemeId('dark', e.newValue) && e.newValue !== s.darkUiThemeId) {
          setDarkUiThemeId(e.newValue);
        }
      }
      if (e.key === STORAGE_KEY_ACCENT_MODE && e.newValue) {
-        if ((e.newValue === 'theme' || e.newValue === 'custom') && e.newValue !== accentMode) {
+        if ((e.newValue === 'theme' || e.newValue === 'custom') && e.newValue !== s.accentMode) {
          setAccentMode(e.newValue);
        }
      }
      if (e.key === STORAGE_KEY_COLOR && e.newValue) {
-        if (isValidHslToken(e.newValue) && e.newValue !== customAccent) {
+        if (isValidHslToken(e.newValue) && e.newValue !== s.customAccent) {
          setCustomAccent(e.newValue.trim());
        }
      }
      if (e.key === STORAGE_KEY_CUSTOM_CSS && e.newValue !== null) {
-        if (e.newValue !== customCSS) {
+        if (e.newValue !== s.customCSS) {
          setCustomCSS(e.newValue);
        }
      }
      if (e.key === STORAGE_KEY_UI_FONT_FAMILY && e.newValue) {
-        if (isValidUiFontId(e.newValue) && e.newValue !== uiFontFamilyId) {
+        if (isValidUiFontId(e.newValue) && e.newValue !== s.uiFontFamilyId) {
          setUiFontFamilyId(e.newValue);
        }
      }
      if (e.key === STORAGE_KEY_HOTKEY_SCHEME && e.newValue) {
        const newScheme = e.newValue as HotkeyScheme;
-        if (newScheme !== hotkeyScheme) {
+        if (newScheme !== s.hotkeyScheme) {
          setHotkeyScheme(newScheme);
        }
      }
      if (e.key === STORAGE_KEY_UI_LANGUAGE && e.newValue) {
        const next = resolveSupportedLocale(e.newValue);
-        if (next !== uiLanguage) {
+        if (next !== s.uiLanguage) {
          setUiLanguage(next as UILanguage);
        }
      }
@@ -553,64 +728,64 @@ export const useSettingsState = () => {
      }
      // Sync terminal theme from other windows
      if (e.key === STORAGE_KEY_TERM_THEME && e.newValue) {
-        if (e.newValue !== terminalThemeId) {
+        if (e.newValue !== s.terminalThemeId) {
          setTerminalThemeId(e.newValue);
        }
      }
      // Sync terminal font family from other windows
      if (e.key === STORAGE_KEY_TERM_FONT_FAMILY && e.newValue) {
-        if (e.newValue !== terminalFontFamilyId) {
+        if (e.newValue !== s.terminalFontFamilyId) {
          setTerminalFontFamilyId(e.newValue);
        }
      }
      // Sync terminal font size from other windows
      if (e.key === STORAGE_KEY_TERM_FONT_SIZE && e.newValue) {
        const newSize = parseInt(e.newValue, 10);
-        if (!isNaN(newSize) && newSize !== terminalFontSize) {
+        if (!isNaN(newSize) && newSize !== s.terminalFontSize) {
          setTerminalFontSize(newSize);
        }
      }
      // Sync SFTP double-click behavior from other windows
      if (e.key === STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR && e.newValue) {
-        if ((e.newValue === 'open' || e.newValue === 'transfer') && e.newValue !== sftpDoubleClickBehavior) {
+        if ((e.newValue === 'open' || e.newValue === 'transfer') && e.newValue !== s.sftpDoubleClickBehavior) {
          setSftpDoubleClickBehavior(e.newValue);
        }
      }
      // Sync SFTP auto-sync setting from other windows
      if (e.key === STORAGE_KEY_SFTP_AUTO_SYNC && e.newValue !== null) {
        const newValue = e.newValue === 'true';
-        if (newValue !== sftpAutoSync) {
+        if (newValue !== s.sftpAutoSync) {
          setSftpAutoSync(newValue);
        }
      }
      // Sync SFTP show hidden files setting from other windows
      if (e.key === STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES && e.newValue !== null) {
        const newValue = e.newValue === 'true';
-        if (newValue !== sftpShowHiddenFiles) {
+        if (newValue !== s.sftpShowHiddenFiles) {
          setSftpShowHiddenFiles(newValue);
        }
      }
      if (e.key === STORAGE_KEY_EDITOR_WORD_WRAP && e.newValue !== null) {
        const newValue = e.newValue === 'true';
-        if (newValue !== editorWordWrap) {
+        if (newValue !== s.editorWordWrap) {
          setEditorWordWrapState(newValue);
        }
      }
      if (e.key === STORAGE_KEY_SESSION_LOGS_ENABLED && e.newValue !== null) {
        const newValue = e.newValue === 'true';
-        if (newValue !== sessionLogsEnabled) {
+        if (newValue !== s.sessionLogsEnabled) {
          setSessionLogsEnabled(newValue);
        }
      }
      if (e.key === STORAGE_KEY_SESSION_LOGS_DIR && e.newValue !== null) {
-        if (e.newValue !== sessionLogsDir) {
+        if (e.newValue !== s.sessionLogsDir) {
          setSessionLogsDir(e.newValue);
        }
      }
      if (e.key === STORAGE_KEY_SESSION_LOGS_FORMAT && e.newValue) {
        if (
          (e.newValue === 'txt' || e.newValue === 'raw' || e.newValue === 'html') &&
-          e.newValue !== sessionLogsFormat
+          e.newValue !== s.sessionLogsFormat
        ) {
          setSessionLogsFormat(e.newValue);
        }
@@ -618,33 +793,77 @@ export const useSettingsState = () => {
      // Sync SFTP compressed upload setting from other windows
      if (e.key === STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD && e.newValue !== null) {
        const newValue = e.newValue === 'true' || e.newValue === 'enabled';
-        if (newValue !== sftpUseCompressedUpload) {
+        if (newValue !== s.sftpUseCompressedUpload) {
          setSftpUseCompressedUpload(newValue);
        }
      }
+      // Sync SFTP auto-open sidebar setting from other windows
+      if (e.key === STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR && e.newValue !== null) {
+        const newValue = e.newValue === 'true';
+        if (newValue !== s.sftpAutoOpenSidebar) {
+          setSftpAutoOpenSidebar(newValue);
+        }
+      }
+      // Sync SFTP default view mode from other windows
+      if (e.key === STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE && e.newValue) {
+        if ((e.newValue === 'list' || e.newValue === 'tree') && e.newValue !== s.sftpDefaultViewMode) {
+          setSftpDefaultViewMode(e.newValue);
+        }
+      }
+      // Sync global hotkey enabled setting from other windows
+      if (e.key === STORAGE_KEY_GLOBAL_HOTKEY_ENABLED && e.newValue !== null) {
+        const newValue = e.newValue === 'true';
+        if (newValue !== s.globalHotkeyEnabled) {
+          setGlobalHotkeyEnabled(newValue);
+        }
+      }
+      // Sync auto-update enabled setting from other windows
+      if (e.key === STORAGE_KEY_AUTO_UPDATE_ENABLED && e.newValue !== null) {
+        const newValue = e.newValue === 'true';
+        if (newValue !== s.autoUpdateEnabled) {
+          setAutoUpdateEnabled(newValue);
+        }
+      }
+      // Sync workspace focus style from other windows
+      if (e.key === STORAGE_KEY_WORKSPACE_FOCUS_STYLE && e.newValue !== null) {
+        if (e.newValue === 'dim' || e.newValue === 'border') {
+          setWorkspaceFocusStyleState(e.newValue);
+        }
+      }
+      // Sync transfer concurrency from other windows
+      if (e.key === STORAGE_KEY_SFTP_TRANSFER_CONCURRENCY && e.newValue !== null) {
+        const num = Number(e.newValue);
+        if (num >= 1 && num <= 16) {
+          setSftpTransferConcurrencyState(num);
+        }
+      }
    };

    window.addEventListener('storage', handleStorageChange);
    return () => window.removeEventListener('storage', handleStorageChange);
-  }, [theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, customCSS, uiFontFamilyId, hotkeyScheme, uiLanguage, terminalThemeId, terminalFontFamilyId, terminalFontSize, sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload, editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat, mergeIncomingTerminalSettings]);
+  }, [mergeIncomingTerminalSettings]); // Fix 4: stable deps only — state comparisons use settingsSnapshotRef

  useEffect(() => {
    localStorageAdapter.writeString(STORAGE_KEY_TERM_THEME, terminalThemeId);
+    if (!persistMountedRef.current) return;
    notifySettingsChanged(STORAGE_KEY_TERM_THEME, terminalThemeId);
  }, [terminalThemeId, notifySettingsChanged]);

  useEffect(() => {
    localStorageAdapter.writeString(STORAGE_KEY_TERM_FONT_FAMILY, terminalFontFamilyId);
+    if (!persistMountedRef.current) return;
    notifySettingsChanged(STORAGE_KEY_TERM_FONT_FAMILY, terminalFontFamilyId);
  }, [terminalFontFamilyId, notifySettingsChanged]);

  useEffect(() => {
    localStorageAdapter.writeNumber(STORAGE_KEY_TERM_FONT_SIZE, terminalFontSize);
+    if (!persistMountedRef.current) return;
    notifySettingsChanged(STORAGE_KEY_TERM_FONT_SIZE, terminalFontSize);
  }, [terminalFontSize, notifySettingsChanged]);

  useEffect(() => {
    localStorageAdapter.write(STORAGE_KEY_TERM_SETTINGS, terminalSettings);
+    if (!persistMountedRef.current) return;
    const currentSignature = serializeTerminalSettings(terminalSettings);
    const hasPendingUnbroadcastLocalChanges =
      localTerminalSettingsVersionRef.current !== broadcastedLocalTerminalSettingsVersionRef.current;
@@ -659,11 +878,13 @@ export const useSettingsState = () => {

  useEffect(() => {
    localStorageAdapter.writeString(STORAGE_KEY_HOTKEY_SCHEME, hotkeyScheme);
+    if (!persistMountedRef.current) return;
    notifySettingsChanged(STORAGE_KEY_HOTKEY_SCHEME, hotkeyScheme);
  }, [hotkeyScheme, notifySettingsChanged]);

  useEffect(() => {
    localStorageAdapter.write(STORAGE_KEY_CUSTOM_KEY_BINDINGS, customKeyBindings);
+    if (!persistMountedRef.current) return;
    notifySettingsChanged(STORAGE_KEY_CUSTOM_KEY_BINDINGS, customKeyBindings);
  }, [customKeyBindings, notifySettingsChanged]);

@@ -674,10 +895,7 @@ export const useSettingsState = () => {

  // Apply and persist custom CSS
  useEffect(() => {
-    localStorageAdapter.writeString(STORAGE_KEY_CUSTOM_CSS, customCSS);
-    notifySettingsChanged(STORAGE_KEY_CUSTOM_CSS, customCSS);
-
-    // Apply custom CSS to document
+    // Always apply CSS to document (needed on mount)
    let styleEl = document.getElementById('netcatty-custom-css') as HTMLStyleElement | null;
    if (!styleEl) {
      styleEl = document.createElement('style');
@@ -685,56 +903,79 @@ export const useSettingsState = () => {
      document.head.appendChild(styleEl);
    }
    styleEl.textContent = customCSS;
+    localStorageAdapter.writeString(STORAGE_KEY_CUSTOM_CSS, customCSS);
+    // Skip IPC on initial mount
+    if (!persistMountedRef.current) return;
+    notifySettingsChanged(STORAGE_KEY_CUSTOM_CSS, customCSS);
  }, [customCSS, notifySettingsChanged]);

  // Persist SFTP double-click behavior
  useEffect(() => {
    localStorageAdapter.writeString(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR, sftpDoubleClickBehavior);
+    if (!persistMountedRef.current) return;
    notifySettingsChanged(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR, sftpDoubleClickBehavior);
  }, [sftpDoubleClickBehavior, notifySettingsChanged]);

  // Persist SFTP auto-sync setting
  useEffect(() => {
    localStorageAdapter.writeString(STORAGE_KEY_SFTP_AUTO_SYNC, sftpAutoSync ? 'true' : 'false');
+    if (!persistMountedRef.current) return;
    notifySettingsChanged(STORAGE_KEY_SFTP_AUTO_SYNC, sftpAutoSync);
  }, [sftpAutoSync, notifySettingsChanged]);

  // Persist SFTP show hidden files setting
  useEffect(() => {
    localStorageAdapter.writeString(STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES, sftpShowHiddenFiles ? 'true' : 'false');
+    if (!persistMountedRef.current) return;
    notifySettingsChanged(STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES, sftpShowHiddenFiles);
  }, [sftpShowHiddenFiles, notifySettingsChanged]);

  // Persist SFTP compressed upload setting
  useEffect(() => {
    localStorageAdapter.writeString(STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD, sftpUseCompressedUpload ? 'true' : 'false');
+    if (!persistMountedRef.current) return;
    notifySettingsChanged(STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD, sftpUseCompressedUpload);
  }, [sftpUseCompressedUpload, notifySettingsChanged]);

+  // Persist SFTP auto-open sidebar setting
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR, sftpAutoOpenSidebar ? 'true' : 'false');
+    if (!persistMountedRef.current) return;
+    notifySettingsChanged(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR, sftpAutoOpenSidebar);
+  }, [sftpAutoOpenSidebar, notifySettingsChanged]);
+
+  // Persist SFTP default view mode
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE, sftpDefaultViewMode);
+    if (!persistMountedRef.current) return;
+    notifySettingsChanged(STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE, sftpDefaultViewMode);
+  }, [sftpDefaultViewMode, notifySettingsChanged]);
+
  // Persist Session Logs settings
  useEffect(() => {
    localStorageAdapter.writeString(STORAGE_KEY_SESSION_LOGS_ENABLED, sessionLogsEnabled ? 'true' : 'false');
+    if (!persistMountedRef.current) return;
    notifySettingsChanged(STORAGE_KEY_SESSION_LOGS_ENABLED, sessionLogsEnabled);
  }, [sessionLogsEnabled, notifySettingsChanged]);

  useEffect(() => {
    localStorageAdapter.writeString(STORAGE_KEY_SESSION_LOGS_DIR, sessionLogsDir);
+    if (!persistMountedRef.current) return;
    notifySettingsChanged(STORAGE_KEY_SESSION_LOGS_DIR, sessionLogsDir);
  }, [sessionLogsDir, notifySettingsChanged]);

  useEffect(() => {
    localStorageAdapter.writeString(STORAGE_KEY_SESSION_LOGS_FORMAT, sessionLogsFormat);
+    if (!persistMountedRef.current) return;
    notifySettingsChanged(STORAGE_KEY_SESSION_LOGS_FORMAT, sessionLogsFormat);
  }, [sessionLogsFormat, notifySettingsChanged]);

  // Persist and sync toggle window hotkey setting
  useEffect(() => {
-    localStorageAdapter.writeString(STORAGE_KEY_TOGGLE_WINDOW_HOTKEY, toggleWindowHotkey);
-    notifySettingsChanged(STORAGE_KEY_TOGGLE_WINDOW_HOTKEY, toggleWindowHotkey);
-    // Register/unregister the global hotkey in main process
+    // Register/unregister the global hotkey in main process (needed on mount)
    const bridge = netcattyBridge.get();
    if (bridge?.registerGlobalHotkey) {
-      if (toggleWindowHotkey) {
+      if (toggleWindowHotkey && globalHotkeyEnabled) {
        setHotkeyRegistrationError(null);
        bridge
          .registerGlobalHotkey(toggleWindowHotkey)
@@ -755,21 +996,71 @@ export const useSettingsState = () => {
        });
      }
    }
-  }, [toggleWindowHotkey, notifySettingsChanged]);
+    localStorageAdapter.writeString(STORAGE_KEY_TOGGLE_WINDOW_HOTKEY, toggleWindowHotkey);
+    // Skip IPC on initial mount
+    if (!persistMountedRef.current) return;
+    notifySettingsChanged(STORAGE_KEY_TOGGLE_WINDOW_HOTKEY, toggleWindowHotkey);
+  }, [toggleWindowHotkey, globalHotkeyEnabled, notifySettingsChanged]);
+
+  // Persist global hotkey enabled setting
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_GLOBAL_HOTKEY_ENABLED, globalHotkeyEnabled ? 'true' : 'false');
+    if (!persistMountedRef.current) return;
+    notifySettingsChanged(STORAGE_KEY_GLOBAL_HOTKEY_ENABLED, globalHotkeyEnabled);
+  }, [globalHotkeyEnabled, notifySettingsChanged]);

  // Persist and sync close to tray setting
  useEffect(() => {
-    localStorageAdapter.writeString(STORAGE_KEY_CLOSE_TO_TRAY, closeToTray ? 'true' : 'false');
-    notifySettingsChanged(STORAGE_KEY_CLOSE_TO_TRAY, closeToTray);
-    // Update main process tray behavior
+    // Update main process tray behavior (needed on mount)
    const bridge = netcattyBridge.get();
    if (bridge?.setCloseToTray) {
      bridge.setCloseToTray(closeToTray).catch((err) => {
        console.warn('[SystemTray] Failed to set close-to-tray:', err);
      });
    }
+    localStorageAdapter.writeString(STORAGE_KEY_CLOSE_TO_TRAY, closeToTray ? 'true' : 'false');
+    // Skip IPC on initial mount
+    if (!persistMountedRef.current) return;
+    notifySettingsChanged(STORAGE_KEY_CLOSE_TO_TRAY, closeToTray);
  }, [closeToTray, notifySettingsChanged]);

+  // Hydrate auto-update state from the main-process preference file on mount.
+  // This reconciles localStorage (renderer) with auto-update-pref.json (main)
+  // in case localStorage was cleared or is stale.
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+    void bridge?.getAutoUpdate?.().then((result) => {
+      if (result && typeof result.enabled === 'boolean') {
+        setAutoUpdateEnabled((prev) => {
+          if (prev === result.enabled) return prev;
+          // Sync localStorage with the main-process truth
+          localStorageAdapter.writeString(STORAGE_KEY_AUTO_UPDATE_ENABLED, result.enabled ? 'true' : 'false');
+          return result.enabled;
+        });
+      }
+    }).catch(() => { /* bridge unavailable */ });
+  }, []);
+
+  // Persist auto-update enabled setting.
+  // Initial mount still writes localStorage, but skips cross-window/main-process IPC.
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_AUTO_UPDATE_ENABLED, autoUpdateEnabled ? 'true' : 'false');
+    if (!persistMountedRef.current) return;
+    notifySettingsChanged(STORAGE_KEY_AUTO_UPDATE_ENABLED, autoUpdateEnabled);
+    // Notify main process on user-initiated changes
+    const bridge = netcattyBridge.get();
+    bridge?.setAutoUpdate?.(autoUpdateEnabled).catch((err: unknown) => {
+      console.warn('[AutoUpdate] Failed to set auto-update:', err);
+    });
+  }, [autoUpdateEnabled, notifySettingsChanged]);
+
+  // Fix 1: Mark all persist effects as mounted.
+  // This MUST be declared AFTER all persist useEffects so that React runs it last
+  // during the initial mount cycle (effects fire in declaration order).
+  useEffect(() => {
+    persistMountedRef.current = true;
+  }, []);
+
  // Get merged key bindings (defaults + custom overrides)
  const keyBindings = useMemo((): KeyBinding[] => {
    return DEFAULT_KEY_BINDINGS.map(binding => {
@@ -832,11 +1123,6 @@ export const useSettingsState = () => {
    [terminalThemeId, customThemes]
  );

-  const currentTerminalFont = useMemo(
-    () => availableFonts.find(f => f.id === terminalFontFamilyId) || availableFonts[0],
-    [terminalFontFamilyId, availableFonts]
-  );
-
  const updateTerminalSetting = useCallback(<K extends keyof TerminalSettings>(
    key: K,
    value: TerminalSettings[K]
@@ -844,6 +1130,12 @@ export const useSettingsState = () => {
    setTerminalSettings(prev => ({ ...prev, [key]: value }));
  }, [setTerminalSettings]);

+  /** Re-apply the current UI theme tokens (used to restore after immersive mode override). */
+  const reapplyCurrentTheme = useCallback(() => {
+    const tokens = getUiThemeById(resolvedTheme, resolvedTheme === 'dark' ? darkUiThemeId : lightUiThemeId).tokens;
+    applyThemeTokens(theme, resolvedTheme, tokens, accentMode, customAccent);
+  }, [theme, resolvedTheme, lightUiThemeId, darkUiThemeId, accentMode, customAccent]);
+
  return {
    theme,
    setTheme,
@@ -867,7 +1159,6 @@ export const useSettingsState = () => {
    currentTerminalTheme,
    terminalFontFamilyId,
    setTerminalFontFamilyId,
-    currentTerminalFont,
    terminalFontSize,
    setTerminalFontSize,
    terminalSettings,
@@ -892,6 +1183,12 @@ export const useSettingsState = () => {
    setSftpShowHiddenFiles,
    sftpUseCompressedUpload,
    setSftpUseCompressedUpload,
+    sftpAutoOpenSidebar,
+    setSftpAutoOpenSidebar,
+    sftpDefaultViewMode,
+    setSftpDefaultViewMode,
+    sftpTransferConcurrency,
+    setSftpTransferConcurrency,
    // Editor Settings
    editorWordWrap,
    setEditorWordWrap: useCallback((enabled: boolean) => {
@@ -899,7 +1196,6 @@ export const useSettingsState = () => {
      localStorageAdapter.writeString(STORAGE_KEY_EDITOR_WORD_WRAP, String(enabled));
      notifySettingsChanged(STORAGE_KEY_EDITOR_WORD_WRAP, enabled);
    }, [notifySettingsChanged]),
-    availableFonts,
    // Session Logs
    sessionLogsEnabled,
    setSessionLogsEnabled,
@@ -912,6 +1208,24 @@ export const useSettingsState = () => {
    setToggleWindowHotkey,
    closeToTray,
    setCloseToTray,
+    autoUpdateEnabled,
+    setAutoUpdateEnabled,
    hotkeyRegistrationError,
+    globalHotkeyEnabled,
+    setGlobalHotkeyEnabled,
+    rehydrateAllFromStorage,
+    reapplyCurrentTheme,
+    workspaceFocusStyle,
+    setWorkspaceFocusStyle,
+    // Opaque version that changes when any synced setting changes, used by useAutoSync.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    settingsVersion: useMemo(() => Math.random(), [
+      theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent,
+      uiFontFamilyId, uiLanguage, customCSS,
+      terminalThemeId, terminalFontFamilyId, terminalFontSize, terminalSettings,
+      customKeyBindings, editorWordWrap,
+      sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload, sftpAutoOpenSidebar, sftpDefaultViewMode,
+      customThemes, workspaceFocusStyle,
+    ]),
  };
 };
--- a/application/state/useSftpBackend.ts
+++ b/application/state/useSftpBackend.ts
@@ -197,6 +197,12 @@ export const useSftpBackend = () => {
    return bridge.showSaveDialog(defaultPath, filters);
  }, []);

+  const selectDirectory = async (title?: string, defaultPath?: string) => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.selectDirectory) return null;
+    return bridge.selectDirectory(title, defaultPath);
+  };
+
  const downloadSftpToTempAndOpen = useCallback(async (
    sftpId: string,
    remotePath: string,
@@ -210,9 +216,7 @@ export const useSftpBackend = () => {
    }
    
    // Download the file to temp
-    console.log("[SFTPBackend] Downloading file to temp", { sftpId, remotePath, fileName });
    const tempPath = await bridge.downloadSftpToTemp(sftpId, remotePath, fileName, options?.encoding);
-    console.log("[SFTPBackend] File downloaded to temp", { tempPath });
    
    // Register temp file for cleanup when SFTP session closes (regardless of auto-sync setting)
    if (bridge.registerTempFile) {
@@ -224,25 +228,18 @@ export const useSftpBackend = () => {
    }
    
    // Open with the selected application
-    console.log("[SFTPBackend] Opening with application", { tempPath, appPath });
    await bridge.openWithApplication(tempPath, appPath);
-    console.log("[SFTPBackend] Application launched");
    
    // Start file watching if enabled
    let watchId: string | undefined;
-    console.log("[SFTPBackend] Auto-sync enabled check", { enableWatch: options?.enableWatch, hasStartFileWatch: !!bridge.startFileWatch });
    if (options?.enableWatch && bridge.startFileWatch) {
      try {
-        console.log("[SFTPBackend] Starting file watch", { tempPath, remotePath, sftpId });
        const result = await bridge.startFileWatch(tempPath, remotePath, sftpId, options?.encoding);
        watchId = result.watchId;
-        console.log("[SFTPBackend] File watch started successfully", { watchId, tempPath, remotePath });
      } catch (err) {
        console.warn("[SFTPBackend] Failed to start file watch:", err);
        // Don't fail the operation if watching fails
      }
-    } else {
-      console.log("[SFTPBackend] File watching not enabled or not available");
    }
    
    return { localTempPath: tempPath, watchId };
@@ -278,6 +275,7 @@ export const useSftpBackend = () => {
    onTransferProgress,
    selectApplication,
    showSaveDialog,
+    selectDirectory,
    downloadSftpToTempAndOpen,
  };
 };
--- a/application/state/useSftpFileAssociations.ts
+++ b/application/state/useSftpFileAssociations.ts
@@ -3,10 +3,10 @@
 * Uses a shared state pattern to sync across components
 */
 import { useCallback, useEffect, useSyncExternalStore } from 'react';
-import { STORAGE_KEY_SFTP_FILE_ASSOCIATIONS } from '../../infrastructure/config/storageKeys';
+import { STORAGE_KEY_SFTP_FILE_ASSOCIATIONS, STORAGE_KEY_SFTP_DEFAULT_OPENER } from '../../infrastructure/config/storageKeys';
 import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
 import type { FileAssociation, FileOpenerType, SystemAppInfo } from '../../lib/sftpFileUtils';
-import { getFileExtension } from '../../lib/sftpFileUtils';
+import { getFileExtension, isKnownBinaryFile } from '../../lib/sftpFileUtils';

 export interface FileAssociationEntry {
  openerType: FileOpenerType;
@@ -17,15 +17,16 @@ export interface FileAssociationsMap {
  [extension: string]: FileAssociationEntry;
 }

-// Shared state and subscribers for cross-component synchronization
+// ---------------------------------------------------------------------------
+// Per-extension associations store
+// ---------------------------------------------------------------------------
+
 const subscribers = new Set<() => void>();

-// Use a wrapper object so we can update the reference for useSyncExternalStore
 let snapshotRef: { associations: FileAssociationsMap } = { associations: {} };

 function loadFromStorage(): FileAssociationsMap {
  const stored = localStorageAdapter.read<FileAssociationsMap>(STORAGE_KEY_SFTP_FILE_ASSOCIATIONS);
-  console.log('[SftpFileAssociations] Loading from storage:', stored);
  if (stored) {
    const migrated: FileAssociationsMap = {};
    for (const [ext, value] of Object.entries(stored)) {
@@ -35,29 +36,20 @@ function loadFromStorage(): FileAssociationsMap {
        migrated[ext] = value as FileAssociationEntry;
      }
    }
-    console.log('[SftpFileAssociations] Migrated associations:', migrated);
    return migrated;
  }
  return {};
 }

-// Initialize from storage
 snapshotRef = { associations: loadFromStorage() };

 function saveToStorage(associations: FileAssociationsMap) {
-  console.log('[SftpFileAssociations] saveToStorage called with:', associations);
  localStorageAdapter.write(STORAGE_KEY_SFTP_FILE_ASSOCIATIONS, associations);
-  // Verify it was saved
-  const verify = localStorageAdapter.read(STORAGE_KEY_SFTP_FILE_ASSOCIATIONS);
-  console.log('[SftpFileAssociations] Verification read from storage:', verify);
 }

 function updateAssociations(newAssociations: FileAssociationsMap) {
-  console.log('[SftpFileAssociations] Updating associations:', newAssociations);
-  // Create new reference so useSyncExternalStore detects change
  snapshotRef = { associations: newAssociations };
  saveToStorage(newAssociations);
-  console.log('[SftpFileAssociations] Notifying', subscribers.size, 'subscribers');
  subscribers.forEach(callback => callback());
 }

@@ -70,15 +62,54 @@ function getSnapshot() {
  return snapshotRef;
 }

+// ---------------------------------------------------------------------------
+// Default opener store (separate from per-extension associations)
+// ---------------------------------------------------------------------------
+
+const defaultOpenerSubscribers = new Set<() => void>();
+
+let defaultOpenerSnapshot: { entry: FileAssociationEntry | null } = {
+  entry: localStorageAdapter.read<FileAssociationEntry>(STORAGE_KEY_SFTP_DEFAULT_OPENER) ?? null,
+};
+
+function subscribeDefaultOpener(callback: () => void) {
+  defaultOpenerSubscribers.add(callback);
+  return () => defaultOpenerSubscribers.delete(callback);
+}
+
+function getDefaultOpenerSnapshot() {
+  return defaultOpenerSnapshot;
+}
+
+function updateDefaultOpener(entry: FileAssociationEntry | null) {
+  defaultOpenerSnapshot = { entry };
+  if (entry) {
+    localStorageAdapter.write(STORAGE_KEY_SFTP_DEFAULT_OPENER, entry);
+  } else {
+    localStorageAdapter.remove(STORAGE_KEY_SFTP_DEFAULT_OPENER);
+  }
+  defaultOpenerSubscribers.forEach(callback => callback());
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
 export function useSftpFileAssociations() {
  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
  const associations = snapshot.associations;

+  const defaultOpenerState = useSyncExternalStore(subscribeDefaultOpener, getDefaultOpenerSnapshot, getDefaultOpenerSnapshot);
+
  // Listen for storage events from other tabs/windows
  useEffect(() => {
    const handleStorage = (e: StorageEvent) => {
      if (e.key === STORAGE_KEY_SFTP_FILE_ASSOCIATIONS) {
        updateAssociations(loadFromStorage());
+      } else if (e.key === STORAGE_KEY_SFTP_DEFAULT_OPENER) {
+        updateDefaultOpener(
+          localStorageAdapter.read<FileAssociationEntry>(STORAGE_KEY_SFTP_DEFAULT_OPENER) ?? null,
+        );
      }
    };
    window.addEventListener('storage', handleStorage);
@@ -86,23 +117,49 @@ export function useSftpFileAssociations() {
  }, []);

  /**
-   * Get the opener entry for a file based on its extension
+   * Get the opener entry for a file based on its extension.
+   * Falls back to the default opener when no per-extension association exists.
   */
  const getOpenerForFile = useCallback((fileName: string): FileAssociationEntry | null => {
    const ext = getFileExtension(fileName);
-    return associations[ext] || null;
-  }, [associations]);
+    if (associations[ext]) return associations[ext];
+    // Fall back to default opener, but skip built-in editor for binary files
+    const fallback = defaultOpenerState.entry;
+    if (fallback && fallback.openerType === 'builtin-editor' && isKnownBinaryFile(fileName)) {
+      return null;
+    }
+    return fallback;
+  }, [associations, defaultOpenerState]);
+
+  /**
+   * Get the default (fallback) opener, if set.
+   */
+  const getDefaultOpener = useCallback((): FileAssociationEntry | null => {
+    return defaultOpenerState.entry;
+  }, [defaultOpenerState]);
+
+  /**
+   * Set the default opener used when no per-extension association exists.
+   */
+  const setDefaultOpener = useCallback((openerType: FileOpenerType, systemApp?: SystemAppInfo) => {
+    updateDefaultOpener({ openerType, systemApp });
+  }, []);
+
+  /**
+   * Remove the default opener.
+   */
+  const removeDefaultOpener = useCallback(() => {
+    updateDefaultOpener(null);
+  }, []);

  /**
   * Set the opener type for a specific extension
   */
  const setOpenerForExtension = useCallback((
-    extension: string, 
+    extension: string,
    openerType: FileOpenerType,
    systemApp?: SystemAppInfo
  ) => {
-    console.log('[SftpFileAssociations] setOpenerForExtension called with:', { extension, openerType, systemApp });
-    console.log('[SftpFileAssociations] Current associations before update:', snapshotRef.associations);
    updateAssociations({
      ...snapshotRef.associations,
      [extension.toLowerCase()]: { openerType, systemApp },
@@ -119,16 +176,14 @@ export function useSftpFileAssociations() {
  }, []);

  /**
-   * Get all associations as an array
+   * Get all per-extension associations as an array.
   */
  const getAllAssociations = useCallback((): FileAssociation[] => {
-    const result = Object.entries(associations).map(([extension, entry]: [string, FileAssociationEntry]) => ({
+    return Object.entries(associations).map(([extension, entry]: [string, FileAssociationEntry]) => ({
      extension,
      openerType: entry.openerType,
      systemApp: entry.systemApp,
    }));
-    console.log('[SftpFileAssociations] getAllAssociations called, returning', result.length, 'items:', result);
-    return result;
  }, [associations]);

  /**
@@ -141,6 +196,9 @@ export function useSftpFileAssociations() {
  return {
    associations,
    getOpenerForFile,
+    getDefaultOpener,
+    setDefaultOpener,
+    removeDefaultOpener,
    setOpenerForExtension,
    removeAssociation,
    getAllAssociations,
--- a/application/state/useSftpState.ts
+++ b/application/state/useSftpState.ts
@@ -57,6 +57,7 @@ export const useSftpState = (
    getActivePane,
    updateTab,
    updateActiveTab,
+    clearSelectionsExcept,
    setTabShowHiddenFiles,
    addTab,
    closeTab,
@@ -110,6 +111,30 @@ export const useSftpState = (
    }
  }, []);

+  const getPaneByConnectionId = useCallback((connectionId: string) => {
+    for (const tab of leftTabsRef.current.tabs) {
+      if (tab.connection?.id === connectionId) return tab;
+    }
+    for (const tab of rightTabsRef.current.tabs) {
+      if (tab.connection?.id === connectionId) return tab;
+    }
+    return null;
+  }, [leftTabsRef, rightTabsRef]);
+
+  const getTabByConnectionId = useCallback((connectionId: string) => {
+    for (const tab of leftTabsRef.current.tabs) {
+      if (tab.connection?.id === connectionId) {
+        return { side: "left" as const, tabId: tab.id, pane: tab };
+      }
+    }
+    for (const tab of rightTabsRef.current.tabs) {
+      if (tab.connection?.id === connectionId) {
+        return { side: "right" as const, tabId: tab.id, pane: tab };
+      }
+    }
+    return null;
+  }, [leftTabsRef, rightTabsRef]);
+
  // Ref to track pending reconnections to avoid multiple reconnect attempts
  const reconnectingRef = useRef<{ left: boolean; right: boolean }>({
    left: false,
@@ -183,10 +208,14 @@ export const useSftpState = (
    selectAll,
    getFilteredFiles,
    createDirectory,
+    createDirectoryAtPath,
    createFile,
+    createFileAtPath,
    deleteFiles,
    deleteFilesAtPath,
    renameFile,
+    renameFileAtPath,
+    moveEntriesToPath,
    changePermissions,
  } = useSftpPaneActions({
    hosts,
@@ -207,6 +236,7 @@ export const useSftpState = (
    listRemoteFiles,
    handleSessionError,
    isSessionError,
+    clearSelectionsExcept,
    dirCacheTtlMs: DIR_CACHE_TTL_MS,
  });

@@ -244,6 +274,7 @@ export const useSftpState = (
    conflicts,
    activeTransfersCount,
    startTransfer,
+    downloadToLocal,
    addExternalUpload,
    updateExternalUpload,
    cancelTransfer,
@@ -254,8 +285,13 @@ export const useSftpState = (
    resolveConflict,
  } = useSftpTransfers({
    getActivePane,
+    getPaneByConnectionId,
+    getTabByConnectionId,
+    updateTab,
    refresh,
+    clearCacheForConnection,
    sftpSessionsRef,
+    connectionCacheKeyMapRef,
    listLocalFiles,
    listRemoteFiles,
    handleSessionError,
@@ -305,15 +341,20 @@ export const useSftpState = (
    toggleSelection,
    rangeSelect,
    clearSelection,
+    clearSelectionsExcept,
    selectAll,
    setFilter,
    setFilenameEncoding,
    setShowHiddenFiles,
    createDirectory,
+    createDirectoryAtPath,
    createFile,
+    createFileAtPath,
    deleteFiles,
    deleteFilesAtPath,
    renameFile,
+    renameFileAtPath,
+    moveEntriesToPath,
    changePermissions,
    readTextFile,
    readBinaryFile,
@@ -324,6 +365,7 @@ export const useSftpState = (
    cancelExternalUpload,
    selectApplication,
    startTransfer,
+    downloadToLocal,
    addExternalUpload,
    updateExternalUpload,
    cancelTransfer,
@@ -332,6 +374,7 @@ export const useSftpState = (
    dismissTransfer,
    resolveConflict,
    getSftpIdForConnection,
+    reportSessionError: handleSessionError,
  });
  methodsRef.current = {
    getFilteredFiles,
@@ -352,15 +395,20 @@ export const useSftpState = (
    toggleSelection,
    rangeSelect,
    clearSelection,
+    clearSelectionsExcept,
    selectAll,
    setFilter,
    setFilenameEncoding,
    setShowHiddenFiles,
    createDirectory,
+    createDirectoryAtPath,
    createFile,
+    createFileAtPath,
    deleteFiles,
    deleteFilesAtPath,
    renameFile,
+    renameFileAtPath,
+    moveEntriesToPath,
    changePermissions,
    readTextFile,
    readBinaryFile,
@@ -371,6 +419,7 @@ export const useSftpState = (
    cancelExternalUpload,
    selectApplication,
    startTransfer,
+    downloadToLocal,
    addExternalUpload,
    updateExternalUpload,
    cancelTransfer,
@@ -379,6 +428,7 @@ export const useSftpState = (
    dismissTransfer,
    resolveConflict,
    getSftpIdForConnection,
+    reportSessionError: handleSessionError,
  };

  // Create stable method wrappers that call through methodsRef
@@ -402,6 +452,8 @@ export const useSftpState = (
    toggleSelection: (...args: Parameters<typeof toggleSelection>) => methodsRef.current.toggleSelection(...args),
    rangeSelect: (...args: Parameters<typeof rangeSelect>) => methodsRef.current.rangeSelect(...args),
    clearSelection: (...args: Parameters<typeof clearSelection>) => methodsRef.current.clearSelection(...args),
+    clearSelectionsExcept: (...args: Parameters<typeof clearSelectionsExcept>) =>
+      methodsRef.current.clearSelectionsExcept(...args),
    selectAll: (...args: Parameters<typeof selectAll>) => methodsRef.current.selectAll(...args),
    setFilter: (...args: Parameters<typeof setFilter>) => methodsRef.current.setFilter(...args),
    setFilenameEncoding: (...args: Parameters<typeof setFilenameEncoding>) =>
@@ -409,11 +461,17 @@ export const useSftpState = (
    setShowHiddenFiles: (...args: Parameters<typeof setShowHiddenFiles>) =>
      methodsRef.current.setShowHiddenFiles(...args),
    createDirectory: (...args: Parameters<typeof createDirectory>) => methodsRef.current.createDirectory(...args),
+    createDirectoryAtPath: (...args: Parameters<typeof createDirectoryAtPath>) =>
+      methodsRef.current.createDirectoryAtPath(...args),
    createFile: (...args: Parameters<typeof createFile>) => methodsRef.current.createFile(...args),
+    createFileAtPath: (...args: Parameters<typeof createFileAtPath>) =>
+      methodsRef.current.createFileAtPath(...args),
    deleteFiles: (...args: Parameters<typeof deleteFiles>) => methodsRef.current.deleteFiles(...args),
    deleteFilesAtPath: (...args: Parameters<typeof deleteFilesAtPath>) =>
      methodsRef.current.deleteFilesAtPath(...args),
    renameFile: (...args: Parameters<typeof renameFile>) => methodsRef.current.renameFile(...args),
+    renameFileAtPath: (...args: Parameters<typeof renameFileAtPath>) => methodsRef.current.renameFileAtPath(...args),
+    moveEntriesToPath: (...args: Parameters<typeof moveEntriesToPath>) => methodsRef.current.moveEntriesToPath(...args),
    changePermissions: (...args: Parameters<typeof changePermissions>) => methodsRef.current.changePermissions(...args),
    readTextFile: (...args: Parameters<typeof readTextFile>) => methodsRef.current.readTextFile(...args),
    readBinaryFile: (...args: Parameters<typeof readBinaryFile>) => methodsRef.current.readBinaryFile(...args),
@@ -425,6 +483,7 @@ export const useSftpState = (
    cancelExternalUpload: () => methodsRef.current.cancelExternalUpload(),
    selectApplication: () => methodsRef.current.selectApplication(),
    startTransfer: (...args: Parameters<typeof startTransfer>) => methodsRef.current.startTransfer(...args),
+    downloadToLocal: (...args: Parameters<typeof downloadToLocal>) => methodsRef.current.downloadToLocal(...args),
    addExternalUpload: (...args: Parameters<typeof addExternalUpload>) => methodsRef.current.addExternalUpload(...args),
    updateExternalUpload: (...args: Parameters<typeof updateExternalUpload>) => methodsRef.current.updateExternalUpload(...args),
    cancelTransfer: (...args: Parameters<typeof cancelTransfer>) => methodsRef.current.cancelTransfer(...args),
@@ -433,6 +492,7 @@ export const useSftpState = (
    dismissTransfer: (...args: Parameters<typeof dismissTransfer>) => methodsRef.current.dismissTransfer(...args),
    resolveConflict: (...args: Parameters<typeof resolveConflict>) => methodsRef.current.resolveConflict(...args),
    getSftpIdForConnection: (...args: Parameters<typeof getSftpIdForConnection>) => methodsRef.current.getSftpIdForConnection(...args),
+    reportSessionError: (...args: Parameters<typeof handleSessionError>) => methodsRef.current.reportSessionError(...args),
    activeFileWatchCountRef,
  }), [activeFileWatchCountRef]); // activeFileWatchCountRef is a stable ref

--- a/application/state/useStoredBoolean.ts
+++ b/application/state/useStoredBoolean.ts
@@ -1,8 +1,10 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";

 /**
 * Hook for persisting a boolean value to localStorage.
+ * Syncs across components in the same window via a custom event,
+ * and across windows via the native storage event.
 * @param storageKey - The key to use for localStorage
 * @param fallback - The default value if no stored value exists (defaults to false)
 * @returns A tuple of [value, setValue] similar to useState
@@ -16,9 +18,38 @@ export const useStoredBoolean = (
        return stored ?? fallback;
    });

-    useEffect(() => {
-        localStorageAdapter.writeBoolean(storageKey, value);
-    }, [storageKey, value]);
+    const setAndPersist = useCallback((next: boolean | ((prev: boolean) => boolean)) => {
+        setValue((prev) => {
+            const resolved = typeof next === "function" ? next(prev) : next;
+            localStorageAdapter.writeBoolean(storageKey, resolved);
+            // Notify other same-window consumers
+            window.dispatchEvent(
+                new CustomEvent("stored-boolean-change", { detail: { key: storageKey, value: resolved } }),
+            );
+            return resolved;
+        });
+    }, [storageKey]);

-    return [value, setValue] as const;
+    useEffect(() => {
+        // Sync from other components in the same window
+        const handleCustom = (e: Event) => {
+            const { key, value: newValue } = (e as CustomEvent).detail;
+            if (key === storageKey) setValue(newValue);
+        };
+        // Sync from other windows
+        const handleStorage = (e: StorageEvent) => {
+            if (e.key === storageKey) {
+                const stored = localStorageAdapter.readBoolean(storageKey);
+                setValue(stored ?? fallback);
+            }
+        };
+        window.addEventListener("stored-boolean-change", handleCustom);
+        window.addEventListener("storage", handleStorage);
+        return () => {
+            window.removeEventListener("stored-boolean-change", handleCustom);
+            window.removeEventListener("storage", handleStorage);
+        };
+    }, [storageKey, fallback]);
+
+    return [value, setAndPersist] as const;
 };
--- a/application/state/useStoredNumber.ts
+++ b/application/state/useStoredNumber.ts
@@ -0,0 +1,29 @@
+import { useCallback, useState } from "react";
+import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
+
+/**
+ * Hook for reading a number from localStorage with lazy persistence.
+ * Unlike useStoredString/useStoredBoolean, this hook does NOT auto-persist
+ * on every state change — call `persist()` explicitly when ready (e.g. on
+ * mouseup after a drag). This avoids flooding localStorage during
+ * high-frequency updates like resize drags.
+ */
+export const useStoredNumber = (
+    storageKey: string,
+    fallback: number,
+    clamp?: { min: number; max: number },
+) => {
+    const [value, setValue] = useState<number>(() => {
+        const stored = localStorageAdapter.readNumber(storageKey);
+        if (stored === null) return fallback;
+        if (clamp) return Math.max(clamp.min, Math.min(clamp.max, stored));
+        return stored;
+    });
+
+    const persist = useCallback(
+        (v: number) => localStorageAdapter.writeNumber(storageKey, v),
+        [storageKey],
+    );
+
+    return [value, setValue, persist] as const;
+};
--- a/application/state/useTerminalBackend.ts
+++ b/application/state/useTerminalBackend.ts
@@ -90,13 +90,13 @@ 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);
  }, []);

-  const onChainProgress = useCallback((cb: (hop: number, total: number, label: string, status: string) => void) => {
+  const onChainProgress = useCallback((cb: (sessionId: string, hop: number, total: number, label: string, status: string, error?: string) => void) => {
    const bridge = netcattyBridge.get();
    return bridge?.onChainProgress?.(cb);
  }, []);
--- a/application/state/useUpdateCheck.ts
+++ b/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, STORAGE_KEY_DEBUG_UPDATE_DEMO } from '../../infrastructure/config/storageKeys';
 import { netcattyBridge } from '../../infrastructure/services/netcattyBridge';

 // Check for updates at most once per hour
@@ -13,15 +13,10 @@ const UPDATE_CHECK_INTERVAL_MS = 60 * 60 * 1000;
 // arrives after 8s the duplicate check is avoided.
 const STARTUP_CHECK_DELAY_MS = 8000;
 // Enable demo mode for development (set via localStorage: localStorage.setItem('debug.updateDemo', '1'))
-const IS_UPDATE_DEMO_MODE = typeof window !== 'undefined' && 
-  window.localStorage?.getItem('debug.updateDemo') === '1';
+const IS_UPDATE_DEMO_MODE = localStorageAdapter.readString(STORAGE_KEY_DEBUG_UPDATE_DEMO) === '1';

-// Debug logging for update checks
-const debugLog = (...args: unknown[]) => {
-  if (IS_UPDATE_DEMO_MODE || (typeof window !== 'undefined' && window.localStorage?.getItem('debug.updateCheck') === '1')) {
-    console.log('[UpdateCheck]', ...args);
-  }
-};
+// Debug logging for update checks (no-op in production)
+const debugLog = (..._args: unknown[]) => {};

 export type AutoDownloadStatus = 'idle' | 'downloading' | 'ready' | 'error';

@@ -48,6 +43,8 @@ export interface UseUpdateCheckResult {
  dismissUpdate: () => void;
  openReleasePage: () => void;
  installUpdate: () => void;
+  startDownload: () => void;
+  isUpdateDemoMode: boolean;
 }

 /**
@@ -56,7 +53,13 @@ export interface UseUpdateCheckResult {
 * - Respects dismissed version to avoid nagging
 * - Provides manual check capability
 */
-export function useUpdateCheck(): UseUpdateCheckResult {
+export function useUpdateCheck(options?: { autoUpdateEnabled?: boolean }): UseUpdateCheckResult {
+  // Accept auto-update toggle from the caller (e.g. useSettingsState) so it
+  // reacts immediately in the same window. Falls back to reading localStorage
+  // when no caller provides the value (e.g. in non-settings contexts).
+  const autoUpdateEnabled = options?.autoUpdateEnabled ??
+    (localStorageAdapter.readString(STORAGE_KEY_AUTO_UPDATE_ENABLED) !== 'false');
+
  const [updateState, setUpdateState] = useState<UpdateState>({
    isChecking: false,
    hasUpdate: false,
@@ -136,14 +139,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 +195,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 +451,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.
@@ -489,6 +515,46 @@ export function useUpdateCheck(): UseUpdateCheckResult {
    netcattyBridge.get()?.installUpdate?.();
  }, []);

+  const startDownload = useCallback(async () => {
+    if (autoDownloadStatusRef.current === 'downloading' || autoDownloadStatusRef.current === 'ready') return;
+    const bridge = netcattyBridge.get();
+    try {
+      const checkResult = await bridge?.checkForUpdate?.();
+      if (!checkResult || checkResult.checking === true || checkResult.ready === true || checkResult.downloading === true) return;
+      if (checkResult.supported === false) {
+        openReleasePage();
+        return;
+      }
+      if (checkResult.available === false) {
+        openReleasePage();
+        return;
+      }
+    } catch {
+      return;
+    }
+    setUpdateState((prev) => ({
+      ...prev,
+      autoDownloadStatus: 'downloading',
+      downloadPercent: 0,
+      downloadError: null,
+    }));
+    void bridge?.downloadUpdate?.().then((res) => {
+      if (res && !res.success) {
+        setUpdateState((prev) => ({
+          ...prev,
+          autoDownloadStatus: 'error',
+          downloadError: res.error || 'Download failed',
+        }));
+      }
+    }).catch(() => {
+      setUpdateState((prev) => ({
+        ...prev,
+        autoDownloadStatus: 'error',
+        downloadError: 'Download failed',
+      }));
+    });
+  }, [openReleasePage]);
+
  // Startup check with delay - runs once on mount
  useEffect(() => {
    debugLog('Startup check effect mounted, IS_UPDATE_DEMO_MODE:', IS_UPDATE_DEMO_MODE);
@@ -519,12 +585,12 @@ export function useUpdateCheck(): UseUpdateCheckResult {
    if (IS_UPDATE_DEMO_MODE) {
      return;
    }
-    
-    debugLog('Version check effect', { 
-      hasChecked: hasCheckedOnStartupRef.current, 
+
+    debugLog('Version check effect', {
+      hasChecked: hasCheckedOnStartupRef.current,
      currentVersion: updateState.currentVersion
    });
-    
+
    if (hasCheckedOnStartupRef.current) {
      return;
    }
@@ -533,12 +599,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 +621,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 +641,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 +686,7 @@ export function useUpdateCheck(): UseUpdateCheckResult {
        clearTimeout(startupCheckTimeoutRef.current);
      }
    };
-  }, [updateState.currentVersion, performCheck]);
+  }, [updateState.currentVersion, autoUpdateEnabled, performCheck]);

  return {
    updateState,
@@ -609,5 +694,7 @@ export function useUpdateCheck(): UseUpdateCheckResult {
    dismissUpdate,
    openReleasePage,
    installUpdate,
+    startDownload,
+    isUpdateDemoMode: IS_UPDATE_DEMO_MODE,
  };
 }
--- a/application/state/useVaultState.ts
+++ b/application/state/useVaultState.ts
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { normalizeDistroId, sanitizeHost } from "../../domain/host";
 import {
  ConnectionLog,
+  GroupConfig,
  Host,
  Identity,
  KeyCategory,
@@ -17,6 +18,7 @@ import {
 } from "../../infrastructure/config/defaultData";
 import {
  STORAGE_KEY_CONNECTION_LOGS,
+  STORAGE_KEY_GROUP_CONFIGS,
  STORAGE_KEY_GROUPS,
  STORAGE_KEY_HOSTS,
  STORAGE_KEY_IDENTITIES,
@@ -30,9 +32,11 @@ import {
 } from "../../infrastructure/config/storageKeys";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
 import {
+  decryptGroupConfigs,
  decryptHosts,
  decryptIdentities,
  decryptKeys,
+  encryptGroupConfigs,
  encryptHosts,
  encryptIdentities,
  encryptKeys,
@@ -46,6 +50,7 @@ type ExportableVaultData = {
  customGroups: string[];
  snippetPackages?: string[];
  knownHosts?: KnownHost[];
+  groupConfigs?: GroupConfig[];
 };

 type LegacyKeyRecord = Record<string, unknown> & { id?: string; source?: string };
@@ -107,6 +112,7 @@ export const useVaultState = () => {
  const [shellHistory, setShellHistory] = useState<ShellHistoryEntry[]>([]);
  const [connectionLogs, setConnectionLogs] = useState<ConnectionLog[]>([]);
  const [managedSources, setManagedSources] = useState<ManagedSource[]>([]);
+  const [groupConfigs, setGroupConfigs] = useState<GroupConfig[]>([]);

  // Write-version counters prevent out-of-order async writes from overwriting
  // newer data.  Each update bumps the counter; the .then() callback only
@@ -114,6 +120,7 @@ export const useVaultState = () => {
  const hostsWriteVersion = useRef(0);
  const keysWriteVersion = useRef(0);
  const identitiesWriteVersion = useRef(0);
+  const groupConfigsWriteVersion = useRef(0);

  // Read-sequence counters for cross-window storage events.  Each incoming
  // event bumps the counter; the async decrypt callback only applies state if
@@ -122,6 +129,7 @@ export const useVaultState = () => {
  const hostsReadSeq = useRef(0);
  const keysReadSeq = useRef(0);
  const identitiesReadSeq = useRef(0);
+  const groupConfigsReadSeq = useRef(0);

  const updateHosts = useCallback((data: Host[]) => {
    const cleaned = data.map(sanitizeHost);
@@ -176,6 +184,15 @@ export const useVaultState = () => {
    localStorageAdapter.write(STORAGE_KEY_MANAGED_SOURCES, data);
  }, []);

+  const updateGroupConfigs = useCallback((data: GroupConfig[]) => {
+    setGroupConfigs(data);
+    const ver = ++groupConfigsWriteVersion.current;
+    encryptGroupConfigs(data).then((enc) => {
+      if (ver === groupConfigsWriteVersion.current)
+        localStorageAdapter.write(STORAGE_KEY_GROUP_CONFIGS, enc);
+    });
+  }, []);
+
  const clearVaultData = useCallback(() => {
    updateHosts([]);
    updateKeys([]);
@@ -185,6 +202,7 @@ export const useVaultState = () => {
    updateCustomGroups([]);
    updateKnownHosts([]);
    updateManagedSources([]);
+    updateGroupConfigs([]);
    localStorageAdapter.remove(STORAGE_KEY_LEGACY_KEYS);
  }, [
    updateHosts,
@@ -195,6 +213,7 @@ export const useVaultState = () => {
    updateCustomGroups,
    updateKnownHosts,
    updateManagedSources,
+    updateGroupConfigs,
  ]);

  const addShellHistoryEntry = useCallback(
@@ -430,6 +449,20 @@ export const useVaultState = () => {
        STORAGE_KEY_MANAGED_SOURCES,
      );
      if (savedManagedSources) setManagedSources(savedManagedSources);
+
+      // Load group configs
+      const savedGroupConfigs = localStorageAdapter.read<GroupConfig[]>(STORAGE_KEY_GROUP_CONFIGS);
+      if (savedGroupConfigs) {
+        const gcVer = ++groupConfigsWriteVersion.current;
+        const decryptedGC = await decryptGroupConfigs(savedGroupConfigs);
+        if (gcVer === groupConfigsWriteVersion.current) {
+          setGroupConfigs(decryptedGC);
+          encryptGroupConfigs(decryptedGC).then((enc) => {
+            if (gcVer === groupConfigsWriteVersion.current)
+              localStorageAdapter.write(STORAGE_KEY_GROUP_CONFIGS, enc);
+          });
+        }
+      }
    };

    init();
@@ -529,6 +562,19 @@ export const useVaultState = () => {
      if (key === STORAGE_KEY_MANAGED_SOURCES) {
        const next = safeParse<ManagedSource[]>(event.newValue) ?? [];
        setManagedSources(next);
+        return;
+      }
+
+      if (key === STORAGE_KEY_GROUP_CONFIGS) {
+        const next = safeParse<GroupConfig[]>(event.newValue) ?? [];
+        ++groupConfigsWriteVersion.current;
+        const seq = ++groupConfigsReadSeq.current;
+        const writeAtStart = groupConfigsWriteVersion.current;
+        decryptGroupConfigs(next).then((dec) => {
+          if (seq === groupConfigsReadSeq.current && writeAtStart === groupConfigsWriteVersion.current)
+            setGroupConfigs(dec);
+        });
+        return;
      }
    };

@@ -536,6 +582,20 @@ export const useVaultState = () => {
    return () => window.removeEventListener("storage", handleStorage);
  }, []);

+  const updateHostLastConnected = useCallback((hostId: string) => {
+    setHosts((prev) => {
+      const next = prev.map((h) =>
+        h.id === hostId ? { ...h, lastConnectedAt: Date.now() } : h,
+      );
+      const ver = ++hostsWriteVersion.current;
+      encryptHosts(next).then((enc) => {
+        if (ver === hostsWriteVersion.current)
+          localStorageAdapter.write(STORAGE_KEY_HOSTS, enc);
+      });
+      return next;
+    });
+  }, []);
+
  const updateHostDistro = useCallback((hostId: string, distro: string) => {
    const normalized = normalizeDistroId(distro);
    setHosts((prev) => {
@@ -560,8 +620,9 @@ export const useVaultState = () => {
      customGroups,
      snippetPackages,
      knownHosts,
+      groupConfigs,
    }),
-    [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts],
+    [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts, groupConfigs],
  );

  const importData = useCallback(
@@ -573,6 +634,7 @@ export const useVaultState = () => {
      if (payload.customGroups) updateCustomGroups(payload.customGroups);
      if (payload.snippetPackages) updateSnippetPackages(payload.snippetPackages);
      if (payload.knownHosts) updateKnownHosts(payload.knownHosts);
+      if (Array.isArray(payload.groupConfigs)) updateGroupConfigs(payload.groupConfigs);
    },
    [
      updateHosts,
@@ -582,6 +644,7 @@ export const useVaultState = () => {
      updateCustomGroups,
      updateSnippetPackages,
      updateKnownHosts,
+      updateGroupConfigs,
    ],
  );

@@ -604,6 +667,7 @@ export const useVaultState = () => {
    shellHistory,
    connectionLogs,
    managedSources,
+    groupConfigs,
    updateHosts,
    updateKeys,
    updateIdentities,
@@ -612,6 +676,7 @@ export const useVaultState = () => {
    updateCustomGroups,
    updateKnownHosts,
    updateManagedSources,
+    updateGroupConfigs,
    addShellHistoryEntry,
    clearShellHistory,
    addConnectionLog,
@@ -620,6 +685,7 @@ export const useVaultState = () => {
    deleteConnectionLog,
    clearUnsavedConnectionLogs,
    updateHostDistro,
+    updateHostLastConnected,
    convertKnownHostToHost,
    exportData,
    importDataFromString,
--- a/application/syncPayload.ts
+++ b/application/syncPayload.ts
@@ -0,0 +1,321 @@
+/**
+ * Sync Payload Builders — Single source of truth for constructing and applying
+ * the encrypted cloud-sync payload.
+ *
+ * Both the main window (App.tsx) and the settings window (SettingsSyncTab.tsx)
+ * must use these helpers to guarantee every field is included and no data is
+ * silently dropped.
+ */
+
+import type {
+  GroupConfig,
+  Host,
+  Identity,
+  KnownHost,
+  PortForwardingRule,
+  SftpBookmark,
+  Snippet,
+  SSHKey,
+} from '../domain/models';
+import type { SyncPayload } from '../domain/sync';
+import { localStorageAdapter } from '../infrastructure/persistence/localStorageAdapter';
+import { rehydrateGlobalBookmarks } from '../components/sftp/hooks/useGlobalSftpBookmarks';
+import {
+  STORAGE_KEY_THEME,
+  STORAGE_KEY_UI_THEME_LIGHT,
+  STORAGE_KEY_UI_THEME_DARK,
+  STORAGE_KEY_ACCENT_MODE,
+  STORAGE_KEY_COLOR,
+  STORAGE_KEY_UI_FONT_FAMILY,
+  STORAGE_KEY_UI_LANGUAGE,
+  STORAGE_KEY_CUSTOM_CSS,
+  STORAGE_KEY_TERM_THEME,
+  STORAGE_KEY_TERM_FONT_FAMILY,
+  STORAGE_KEY_TERM_FONT_SIZE,
+  STORAGE_KEY_TERM_SETTINGS,
+  STORAGE_KEY_CUSTOM_KEY_BINDINGS,
+  STORAGE_KEY_EDITOR_WORD_WRAP,
+  STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR,
+  STORAGE_KEY_SFTP_AUTO_SYNC,
+  STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES,
+  STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD,
+  STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR,
+  STORAGE_KEY_SFTP_GLOBAL_BOOKMARKS,
+  STORAGE_KEY_CUSTOM_THEMES,
+  STORAGE_KEY_SHOW_RECENT_HOSTS,
+} from '../infrastructure/config/storageKeys';
+
+// ---------------------------------------------------------------------------
+// Input types
+// ---------------------------------------------------------------------------
+
+/** All vault-owned data that participates in cloud sync. */
+export interface SyncableVaultData {
+  hosts: Host[];
+  keys: SSHKey[];
+  identities: Identity[];
+  snippets: Snippet[];
+  customGroups: string[];
+  snippetPackages?: string[];
+  knownHosts: KnownHost[];
+  groupConfigs?: GroupConfig[];
+}
+
+/** Callbacks used by `applySyncPayload` to import data into local state. */
+interface SyncPayloadImporters {
+  /** Import vault data (hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts). */
+  importVaultData: (jsonString: string) => void;
+  /** Import port-forwarding rules (lives outside the vault hook). */
+  importPortForwardingRules?: (rules: PortForwardingRule[]) => void;
+  /** Called after synced settings have been written to localStorage. */
+  onSettingsApplied?: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Settings sync helpers
+// ---------------------------------------------------------------------------
+
+/** Terminal settings keys that are safe to sync (platform-agnostic). */
+const SYNCABLE_TERMINAL_KEYS = [
+  'scrollback', 'drawBoldInBrightColors', 'fontLigatures', 'fontWeight', 'fontWeightBold',
+  'linePadding', 'cursorShape', 'cursorBlink', 'minimumContrastRatio',
+  'scrollOnInput', 'scrollOnOutput', 'scrollOnKeyPress', 'scrollOnPaste',
+  'smoothScrolling',
+  'rightClickBehavior', 'copyOnSelect', 'middleClickPaste', 'wordSeparators',
+  'linkModifier', 'keywordHighlightEnabled', 'keywordHighlightRules',
+  'keepaliveInterval', 'disableBracketedPaste', 'osc52Clipboard',
+  'autocompleteEnabled', 'autocompleteGhostText', 'autocompletePopupMenu',
+  'autocompleteDebounceMs', 'autocompleteMinChars', 'autocompleteMaxSuggestions',
+] as const;
+
+/**
+ * Collect all syncable settings from localStorage.
+ */
+export function collectSyncableSettings(): SyncPayload['settings'] {
+  const settings: SyncPayload['settings'] = {};
+
+  // Theme & Appearance
+  const theme = localStorageAdapter.readString(STORAGE_KEY_THEME);
+  if (theme === 'light' || theme === 'dark' || theme === 'system') settings.theme = theme;
+  const lightUi = localStorageAdapter.readString(STORAGE_KEY_UI_THEME_LIGHT);
+  if (lightUi) settings.lightUiThemeId = lightUi;
+  const darkUi = localStorageAdapter.readString(STORAGE_KEY_UI_THEME_DARK);
+  if (darkUi) settings.darkUiThemeId = darkUi;
+  const accentMode = localStorageAdapter.readString(STORAGE_KEY_ACCENT_MODE);
+  if (accentMode === 'theme' || accentMode === 'custom') settings.accentMode = accentMode;
+  const accent = localStorageAdapter.readString(STORAGE_KEY_COLOR);
+  if (accent) settings.customAccent = accent;
+  const uiFont = localStorageAdapter.readString(STORAGE_KEY_UI_FONT_FAMILY);
+  if (uiFont) settings.uiFontFamilyId = uiFont;
+  const lang = localStorageAdapter.readString(STORAGE_KEY_UI_LANGUAGE);
+  if (lang) settings.uiLanguage = lang;
+  const css = localStorageAdapter.readString(STORAGE_KEY_CUSTOM_CSS);
+  if (css != null) settings.customCSS = css;
+
+  // Terminal
+  const termTheme = localStorageAdapter.readString(STORAGE_KEY_TERM_THEME);
+  if (termTheme) settings.terminalTheme = termTheme;
+  const termFont = localStorageAdapter.readString(STORAGE_KEY_TERM_FONT_FAMILY);
+  if (termFont) settings.terminalFontFamily = termFont;
+  const termSize = localStorageAdapter.readNumber(STORAGE_KEY_TERM_FONT_SIZE);
+  if (termSize != null) settings.terminalFontSize = termSize;
+
+  // Terminal settings (syncable subset only)
+  const termSettingsRaw = localStorageAdapter.readString(STORAGE_KEY_TERM_SETTINGS);
+  if (termSettingsRaw) {
+    try {
+      const full = JSON.parse(termSettingsRaw);
+      const subset: Record<string, unknown> = {};
+      for (const key of SYNCABLE_TERMINAL_KEYS) {
+        if (key in full) subset[key] = full[key];
+      }
+      if (Object.keys(subset).length > 0) settings.terminalSettings = subset;
+    } catch { /* ignore corrupt data */ }
+  }
+
+  // Custom terminal themes
+  const customThemesRaw = localStorageAdapter.readString(STORAGE_KEY_CUSTOM_THEMES);
+  if (customThemesRaw) {
+    try {
+      const parsed = JSON.parse(customThemesRaw);
+      if (Array.isArray(parsed)) settings.customTerminalThemes = parsed;
+    } catch { /* ignore */ }
+  }
+
+  // Keyboard
+  const kb = localStorageAdapter.readString(STORAGE_KEY_CUSTOM_KEY_BINDINGS);
+  if (kb) {
+    try {
+      settings.customKeyBindings = JSON.parse(kb);
+    } catch { /* ignore */ }
+  }
+
+  // Editor
+  const wordWrap = localStorageAdapter.readString(STORAGE_KEY_EDITOR_WORD_WRAP);
+  if (wordWrap === 'true' || wordWrap === 'false') settings.editorWordWrap = wordWrap === 'true';
+
+  // SFTP
+  const dblClick = localStorageAdapter.readString(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR);
+  if (dblClick === 'open' || dblClick === 'transfer') settings.sftpDoubleClickBehavior = dblClick;
+  const autoSync = localStorageAdapter.readString(STORAGE_KEY_SFTP_AUTO_SYNC);
+  if (autoSync === 'true' || autoSync === 'false') settings.sftpAutoSync = autoSync === 'true';
+  const hidden = localStorageAdapter.readString(STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES);
+  if (hidden === 'true' || hidden === 'false') settings.sftpShowHiddenFiles = hidden === 'true';
+  const compress = localStorageAdapter.readString(STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD);
+  if (compress === 'true' || compress === 'false') settings.sftpUseCompressedUpload = compress === 'true';
+  const autoOpenSidebar = localStorageAdapter.readString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR);
+  if (autoOpenSidebar === 'true' || autoOpenSidebar === 'false') settings.sftpAutoOpenSidebar = autoOpenSidebar === 'true';
+
+  // SFTP Bookmarks (global only — local bookmarks are device-specific)
+  const globalBookmarks = localStorageAdapter.read<SftpBookmark[]>(STORAGE_KEY_SFTP_GLOBAL_BOOKMARKS);
+  if (globalBookmarks && Array.isArray(globalBookmarks)) settings.sftpGlobalBookmarks = globalBookmarks;
+
+
+  const showRecent = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_RECENT_HOSTS);
+  if (showRecent != null) settings.showRecentHosts = showRecent;
+
+  return Object.keys(settings).length > 0 ? settings : undefined;
+}
+
+/**
+ * Apply synced settings to localStorage. Merges terminal settings
+ * to preserve platform-specific fields.
+ */
+function applySyncableSettings(settings: NonNullable<SyncPayload['settings']>): void {
+  // Theme & Appearance
+  if (settings.theme != null) localStorageAdapter.writeString(STORAGE_KEY_THEME, settings.theme);
+  if (settings.lightUiThemeId != null) localStorageAdapter.writeString(STORAGE_KEY_UI_THEME_LIGHT, settings.lightUiThemeId);
+  if (settings.darkUiThemeId != null) localStorageAdapter.writeString(STORAGE_KEY_UI_THEME_DARK, settings.darkUiThemeId);
+  if (settings.accentMode != null) localStorageAdapter.writeString(STORAGE_KEY_ACCENT_MODE, settings.accentMode);
+  if (settings.customAccent != null) localStorageAdapter.writeString(STORAGE_KEY_COLOR, settings.customAccent);
+  if (settings.uiFontFamilyId != null) localStorageAdapter.writeString(STORAGE_KEY_UI_FONT_FAMILY, settings.uiFontFamilyId);
+  if (settings.uiLanguage != null) localStorageAdapter.writeString(STORAGE_KEY_UI_LANGUAGE, settings.uiLanguage);
+  if (settings.customCSS != null) localStorageAdapter.writeString(STORAGE_KEY_CUSTOM_CSS, settings.customCSS);
+
+  // Terminal
+  if (settings.terminalTheme != null) localStorageAdapter.writeString(STORAGE_KEY_TERM_THEME, settings.terminalTheme);
+  if (settings.terminalFontFamily != null) localStorageAdapter.writeString(STORAGE_KEY_TERM_FONT_FAMILY, settings.terminalFontFamily);
+  if (settings.terminalFontSize != null) localStorageAdapter.writeString(STORAGE_KEY_TERM_FONT_SIZE, String(settings.terminalFontSize));
+
+  // Terminal settings — merge with existing to preserve platform-specific keys
+  if (settings.terminalSettings) {
+    let existing: Record<string, unknown> = {};
+    const raw = localStorageAdapter.readString(STORAGE_KEY_TERM_SETTINGS);
+    if (raw) {
+      try { existing = JSON.parse(raw); } catch { /* ignore */ }
+    }
+    const merged = { ...existing };
+    for (const key of SYNCABLE_TERMINAL_KEYS) {
+      if (key in settings.terminalSettings) {
+        merged[key] = settings.terminalSettings[key];
+      }
+    }
+    localStorageAdapter.writeString(STORAGE_KEY_TERM_SETTINGS, JSON.stringify(merged));
+  }
+
+  // Custom terminal themes
+  if (settings.customTerminalThemes != null) {
+    localStorageAdapter.writeString(STORAGE_KEY_CUSTOM_THEMES, JSON.stringify(settings.customTerminalThemes));
+  }
+
+  // Keyboard
+  if (settings.customKeyBindings != null) {
+    localStorageAdapter.writeString(STORAGE_KEY_CUSTOM_KEY_BINDINGS, JSON.stringify(settings.customKeyBindings));
+  }
+
+  // Editor
+  if (settings.editorWordWrap != null) localStorageAdapter.writeString(STORAGE_KEY_EDITOR_WORD_WRAP, String(settings.editorWordWrap));
+
+  // SFTP
+  if (settings.sftpDoubleClickBehavior != null) localStorageAdapter.writeString(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR, settings.sftpDoubleClickBehavior);
+  if (settings.sftpAutoSync != null) localStorageAdapter.writeString(STORAGE_KEY_SFTP_AUTO_SYNC, String(settings.sftpAutoSync));
+  if (settings.sftpShowHiddenFiles != null) localStorageAdapter.writeString(STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES, String(settings.sftpShowHiddenFiles));
+  if (settings.sftpUseCompressedUpload != null) localStorageAdapter.writeString(STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD, String(settings.sftpUseCompressedUpload));
+  if (settings.sftpAutoOpenSidebar != null) localStorageAdapter.writeString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR, String(settings.sftpAutoOpenSidebar));
+
+  // SFTP Bookmarks (global only)
+  if (settings.sftpGlobalBookmarks != null) localStorageAdapter.write(STORAGE_KEY_SFTP_GLOBAL_BOOKMARKS, settings.sftpGlobalBookmarks);
+
+  // Immersive mode (legacy — always enabled, ignore incoming value)
+  if (settings.showRecentHosts != null) localStorageAdapter.writeBoolean(STORAGE_KEY_SHOW_RECENT_HOSTS, settings.showRecentHosts);
+}
+
+// ---------------------------------------------------------------------------
+// Builders
+// ---------------------------------------------------------------------------
+
+/**
+ * Build a complete `SyncPayload` from local data.
+ *
+ * Port-forwarding rules are optional because they are managed by a separate
+ * state hook (`usePortForwardingState`).  Callers should strip transient
+ * runtime fields (status, error, lastUsedAt) before passing them in.
+ */
+export function buildSyncPayload(
+  vault: SyncableVaultData,
+  portForwardingRules?: PortForwardingRule[],
+): SyncPayload {
+  return {
+    hosts: vault.hosts,
+    keys: vault.keys,
+    identities: vault.identities,
+    snippets: vault.snippets,
+    customGroups: vault.customGroups,
+    snippetPackages: vault.snippetPackages,
+    knownHosts: vault.knownHosts,
+    groupConfigs: vault.groupConfigs,
+    portForwardingRules,
+    settings: collectSyncableSettings(),
+    syncedAt: Date.now(),
+  };
+}
+
+/**
+ * Apply a downloaded `SyncPayload` to local state via the provided importers.
+ *
+ * This ensures both vault data and port-forwarding rules are imported
+ * consistently across windows.
+ */
+export function applySyncPayload(
+  payload: SyncPayload,
+  importers: SyncPayloadImporters,
+): void {
+  // Build the vault import object.  knownHosts is only included when the
+  // payload explicitly carries the field (even if it's []).  Legacy cloud
+  // snapshots may omit it entirely — in that case we leave the local
+  // known-hosts list untouched rather than destructively wiping it.
+  const vaultImport: Record<string, unknown> = {
+    hosts: payload.hosts,
+    keys: payload.keys,
+    identities: payload.identities,
+    snippets: payload.snippets,
+    customGroups: payload.customGroups,
+  };
+  if (payload.snippetPackages !== undefined) {
+    vaultImport.snippetPackages = payload.snippetPackages;
+  }
+  if (payload.knownHosts !== undefined) {
+    vaultImport.knownHosts = payload.knownHosts;
+  }
+  if (Array.isArray(payload.groupConfigs)) {
+    vaultImport.groupConfigs = payload.groupConfigs;
+  }
+
+  importers.importVaultData(JSON.stringify(vaultImport));
+
+  // Only import port-forwarding rules when the payload explicitly carries
+  // them.  Absent field = "payload was created before this feature existed",
+  // so local rules are preserved.  Explicitly present [] = "remote has no
+  // rules, clear local state".
+  if (payload.portForwardingRules !== undefined && importers.importPortForwardingRules) {
+    importers.importPortForwardingRules(payload.portForwardingRules);
+  }
+
+  // Apply synced settings
+  if (payload.settings) {
+    applySyncableSettings(payload.settings);
+    // Rehydrate in-memory bookmark snapshot after localStorage was updated
+    if (payload.settings.sftpGlobalBookmarks != null) rehydrateGlobalBookmarks();
+    importers.onSettingsApplied?.();
+  }
+}
--- a/components/AIChatSidePanel.tsx
+++ b/components/AIChatSidePanel.tsx
--- a/components/CloudSyncSettings.tsx
+++ b/components/CloudSyncSettings.tsx
@@ -102,11 +102,14 @@ interface StatusDotProps {
 }

 const StatusDot: React.FC<StatusDotProps> = ({ status, className }) => {
+    if (status === 'connecting') {
+        return <Loader2 className={cn('w-3.5 h-3.5 animate-spin text-muted-foreground', className)} />;
+    }
+
    const colors = {
        connected: 'bg-green-500',
        syncing: 'bg-blue-500 animate-pulse',
        error: 'bg-red-500',
-        connecting: 'bg-yellow-500 animate-pulse',
        disconnected: 'bg-muted-foreground/50',
    };

@@ -279,6 +282,7 @@ interface ProviderCardProps {
    disabled?: boolean; // Disable connect button when another provider is connected
    onEdit?: () => void;
    onConnect: () => void;
+    onCancelConnect?: () => void;
    onDisconnect: () => void;
    onSync: () => void;
 }
@@ -296,6 +300,7 @@ const ProviderCard: React.FC<ProviderCardProps> = ({
    disabled,
    onEdit,
    onConnect,
+    onCancelConnect,
    onDisconnect,
    onSync,
 }) => {
@@ -367,7 +372,9 @@ const ProviderCard: React.FC<ProviderCardProps> = ({
                        {error}
                    </p>
                ) : (
-                    <p className="text-xs text-muted-foreground mt-1">{t('cloudSync.provider.notConnected')}</p>
+                    <p className="text-xs text-muted-foreground mt-1">
+                        {isConnecting ? t('cloudSync.provider.connecting') : t('cloudSync.provider.notConnected')}
+                    </p>
                )}
            </div>

@@ -408,10 +415,20 @@ const ProviderCard: React.FC<ProviderCardProps> = ({
                            <CloudOff size={14} />
                        </Button>
                    </>
+                ) : isConnecting && onCancelConnect ? (
+                    <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={onCancelConnect}
+                        className="gap-1"
+                    >
+                        <X size={14} />
+                        {t('common.cancel')}
+                    </Button>
                ) : (
                    <Button
                        size="sm"
-                        onClick={() => { console.log('[ProviderCard] Connect clicked'); onConnect(); }}
+                        onClick={() => { onConnect(); }}
                        className="gap-1"
                        disabled={disabled || isConnecting}
                    >
@@ -611,7 +628,7 @@ interface SyncDashboardProps {
    onClearLocalData?: () => void;
 }

-export const SyncDashboard: React.FC<SyncDashboardProps> = ({
+const SyncDashboard: React.FC<SyncDashboardProps> = ({
    onBuildPayload,
    onApplyPayload,
    onClearLocalData,
@@ -689,15 +706,6 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
        }
    };

-    // Debug: log provider states
-    console.log('[SyncDashboard] Provider states:', {
-        github: sync.providers.github.status,
-        google: sync.providers.google.status,
-        onedrive: sync.providers.onedrive.status,
-        webdav: sync.providers.webdav.status,
-        s3: sync.providers.s3.status,
-    });
-
    // GitHub Device Flow state
    const [showGitHubModal, setShowGitHubModal] = useState(false);
    const [gitHubUserCode, setGitHubUserCode] = useState('');
@@ -789,12 +797,9 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({

    // Connect GitHub (disconnect others first - single provider only)
    const handleConnectGitHub = async () => {
-        console.log('[CloudSync] handleConnectGitHub called');
        try {
            await disconnectOtherProviders('github');
-            console.log('[CloudSync] Calling sync.connectGitHub()...');
            const deviceFlow = await sync.connectGitHub();
-            console.log('[CloudSync] Device flow received:', deviceFlow.userCode);
            setGitHubUserCode(deviceFlow.userCode);
            setGitHubVerificationUri(deviceFlow.verificationUri);
            setShowGitHubModal(true);
@@ -812,6 +817,9 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
            toast.success(t('cloudSync.connect.github.success'));
        } catch (error) {
            setIsPollingGitHub(false);
+            setShowGitHubModal(false);
+            // Reset provider status so button is clickable again (without tearing down existing connections)
+            sync.resetProviderStatus('github');
            const message = getNetworkErrorMessage(error, t('common.unknownError'));
            toast.error(message, t('cloudSync.connect.github.failedTitle'));
        }
@@ -825,10 +833,13 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
            // Note: Auth flow is handled automatically by oauthBridge
            toast.info(t('cloudSync.connect.browserContinue'));
        } catch (error) {
-            toast.error(
-                error instanceof Error ? error.message : t('common.unknownError'),
-                t('cloudSync.connect.google.failedTitle'),
-            );
+            // Reset provider status so button is clickable again (without tearing down existing connections)
+            sync.resetProviderStatus('google');
+            const msg = error instanceof Error ? error.message : t('common.unknownError');
+            // Don't show toast for user-initiated cancellation (popup closed)
+            if (!msg.includes('cancelled')) {
+                toast.error(msg, t('cloudSync.connect.google.failedTitle'));
+            }
        }
    };

@@ -840,10 +851,13 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
            // Note: Auth flow is handled automatically by oauthBridge
            toast.info(t('cloudSync.connect.browserContinue'));
        } catch (error) {
-            toast.error(
-                error instanceof Error ? error.message : t('common.unknownError'),
-                t('cloudSync.connect.onedrive.failedTitle'),
-            );
+            // Reset provider status so button is clickable again (without tearing down existing connections)
+            sync.resetProviderStatus('onedrive');
+            const msg = error instanceof Error ? error.message : t('common.unknownError');
+            // Don't show toast for user-initiated cancellation (popup closed)
+            if (!msg.includes('cancelled')) {
+                toast.error(msg, t('cloudSync.connect.onedrive.failedTitle'));
+            }
        }
    };

@@ -978,6 +992,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
@@ -1087,6 +1105,7 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                        error={sync.providers.google.error}
                        disabled={sync.hasAnyConnectedProvider && !isProviderReadyForSync(sync.providers.google)}
                        onConnect={handleConnectGoogle}
+                        onCancelConnect={sync.cancelOAuthConnect}
                        onDisconnect={() => sync.disconnectProvider('google')}
                        onSync={() => handleSync('google')}
                    />
@@ -1103,6 +1122,7 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                        error={sync.providers.onedrive.error}
                        disabled={sync.hasAnyConnectedProvider && !isProviderReadyForSync(sync.providers.onedrive)}
                        onConnect={handleConnectOneDrive}
+                        onCancelConnect={sync.cancelOAuthConnect}
                        onDisconnect={() => sync.disconnectProvider('onedrive')}
                        onSync={() => handleSync('onedrive')}
                    />
@@ -1258,6 +1278,9 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                onClose={() => {
                    setShowGitHubModal(false);
                    setIsPollingGitHub(false);
+                    // Reset provider status so button is clickable again.
+                    // The background polling will continue until expiry but is harmless.
+                    sync.resetProviderStatus('github');
                }}
            />

--- a/components/DistroAvatar.tsx
+++ b/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,16 +58,15 @@ const DistroAvatarInner: React.FC<DistroAvatarProps> = ({
  className,
  size = "md",
 }) => {
-  const distro =
-    normalizeDistroId(host.distro) || (host.distro || "").toLowerCase();
+  const distro = getEffectiveHostDistro(host);
  const logo = DISTRO_LOGOS[distro];
  const [errored, setErrored] = React.useState(false);
  const bg = DISTRO_COLORS[distro] || DISTRO_COLORS.default;

  // Size variants - all use rounded corners for consistency
  const sizeClasses = {
-    sm: "h-6 w-6 rounded-md",
-    md: "h-11 w-11 rounded-xl",
+    sm: "h-6 w-6 rounded",
+    md: "h-11 w-11 rounded-lg",
    lg: "h-14 w-14 rounded-xl",
  };
  const iconSizes = {
@@ -99,14 +98,14 @@ const DistroAvatarInner: React.FC<DistroAvatarProps> = ({
      <div
        className={cn(
          containerClass,
-          "flex items-center justify-center border border-border/40 overflow-hidden",
+          "flex items-center justify-center overflow-hidden",
          bg,
          className,
        )}
      >
        <img
          src={logo}
-          alt={host.distro || host.os}
+          alt={distro || host.os}
          className={cn("object-contain invert brightness-0", iconSize)}
          onError={() => setErrored(true)}
        />
--- a/components/FileOpenerDialog.tsx
+++ b/components/FileOpenerDialog.tsx
@@ -45,7 +45,6 @@ export const FileOpenerDialog: React.FC<FileOpenerDialogProps> = ({
    try {
      const result = await onSelectSystemApp();
      if (result) {
-        console.log('[FileOpenerDialog] Calling onSelect with rememberChoice:', rememberChoice, 'result:', result);
        onSelect('system-app', rememberChoice, result);
        onClose();
      }
--- a/components/GroupDetailsPanel.tsx
+++ b/components/GroupDetailsPanel.tsx
--- a/components/HostDetailsPanel.tsx
+++ b/components/HostDetailsPanel.tsx
@@ -20,17 +20,31 @@ import {
  Tag,
  TerminalSquare,
  User,
+  FileKey,
+  FolderOpen,
+  Trash2,
  Variable,
  Wifi,
+  Router,
  X,
 } from "lucide-react";
 import React, { useEffect, useMemo, useState, useCallback } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { useApplicationBackend } from "../application/state/useApplicationBackend";
+import { 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 {
@@ -58,7 +72,7 @@ import {
  ProxyPanel,
 } from "./host-details";

-type CredentialType = "sshid" | "key" | "certificate" | null;
+type CredentialType = "sshid" | "key" | "certificate" | "localKeyFile" | null;
 type SubPanel =
  | "none"
  | "create-group"
@@ -68,6 +82,8 @@ type SubPanel =
  | "theme-select"
  | "telnet-theme-select";

+const LINUX_DISTRO_OPTION_IDS = [...LINUX_DISTRO_OPTIONS];
+
 interface HostDetailsPanelProps {
  initialData?: Host | null;
  availableKeys: SSHKey[];
@@ -77,10 +93,13 @@ interface HostDetailsPanelProps {
  allTags?: string[]; // All available tags for autocomplete
  allHosts?: Host[]; // All hosts for chain selection
  defaultGroup?: string | null; // Default group for new hosts (from current navigation)
+  terminalThemeId: string;
+  terminalFontSize: number;
  onSave: (host: Host) => void;
  onCancel: () => void;
  onCreateGroup?: (groupPath: string) => void; // Callback to create a new group
  onCreateTag?: (tag: string) => void; // Callback to create a new tag
+  groupDefaults?: Partial<import('../domain/models').GroupConfig>;
 }

 const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
@@ -92,10 +111,13 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
  allTags = [],
  allHosts = [],
  defaultGroup,
+  terminalThemeId,
+  terminalFontSize,
  onSave,
  onCancel,
  onCreateGroup,
  onCreateTag,
+  groupDefaults,
 }) => {
  const { t } = useI18n();
  const { checkSshAgent } = useApplicationBackend();
@@ -106,14 +128,14 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
        id: crypto.randomUUID(),
        label: "",
        hostname: "",
-        port: 22,
-        username: "root",
+        port: groupDefaults?.port ? undefined : 22,
+        username: groupDefaults?.username ? "" : "root",
        protocol: "ssh",
        tags: [],
        os: "linux",
        authMethod: "password",
-        charset: "UTF-8",
-        theme: "Flexoki Dark",
+        charset: groupDefaults?.charset ? undefined : "UTF-8",
+        distroMode: "auto",
        createdAt: Date.now(),
        group: defaultGroup || undefined, // Pre-fill with current navigation group
      } as Host),
@@ -133,6 +155,9 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
  // Password visibility state
  const [showPassword, setShowPassword] = useState(false);

+  // Local key file path input state
+  const [newKeyFilePath, setNewKeyFilePath] = useState("");
+
  // New group creation state
  const [newGroupName, setNewGroupName] = useState("");
  const [newGroupParent, setNewGroupParent] = useState("");
@@ -176,6 +201,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) => ({
@@ -209,12 +284,10 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
  };

  const removeHostFromChain = (index: number) => {
-    setForm((prev) => ({
-      ...prev,
-      hostChain: {
-        hostIds: (prev.hostChain?.hostIds || []).filter((_, i) => i !== index),
-      },
-    }));
+    setForm((prev) => {
+      const ids = (prev.hostChain?.hostIds || []).filter((_, i) => i !== index);
+      return { ...prev, hostChain: ids.length > 0 ? { hostIds: ids } : undefined };
+    });
  };

  const clearHostChain = useCallback(() => {
@@ -240,12 +313,10 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
  };

  const removeEnvVar = (index: number) => {
-    setForm((prev) => ({
-      ...prev,
-      environmentVariables: (prev.environmentVariables || []).filter(
-        (_, i) => i !== index,
-      ),
-    }));
+    setForm((prev) => {
+      const filtered = (prev.environmentVariables || []).filter((_, i) => i !== index);
+      return { ...prev, environmentVariables: filtered.length > 0 ? filtered : undefined };
+    });
  };

  const handleSubmit = () => {
@@ -290,11 +361,32 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
      label: finalLabel,
      group: finalGroup,
      tags: form.tags || [],
-      port: form.port || 22,
+      port: form.port ?? (groupDefaults?.port ? undefined : 22),
      // Clear password if savePassword is explicitly set to false
      password: form.savePassword === false ? undefined : form.password,
      managedSourceId: finalManagedSourceId,
    };
+    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);
  };

@@ -384,6 +476,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
        authMethod: identity.authMethod,
        password: undefined,
        identityFileId: undefined,
+        identityFilePaths: undefined,
      }));
      setSelectedCredentialType(null);
      setCredentialPopoverOpen(false);
@@ -475,9 +568,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 +585,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(
@@ -534,6 +623,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
    <AsidePanel
      open={true}
      onClose={onCancel}
+      width="w-[420px]"
      title={
        initialData ? t("hostDetails.title.details") : t("hostDetails.title.new")
      }
@@ -647,7 +737,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
          </div>
        </Card>

-        <Card className="p-3 space-y-3 bg-card border-border/80">
+        <Card className="p-3 space-y-3 bg-card border-border/80 overflow-hidden">
          <div className="flex items-center gap-2">
            <KeyRound size={14} className="text-muted-foreground" />
            <p className="text-xs font-semibold">
@@ -660,8 +750,9 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
              <div className="ml-auto w-1/2 min-w-0 flex items-center gap-2 justify-end">
                <Input
                  type="number"
-                  value={form.port}
-                  onChange={(e) => update("port", Number(e.target.value))}
+                  value={form.port ?? ""}
+                  onChange={(e) => update("port", e.target.value ? Number(e.target.value) : undefined)}
+                  placeholder={groupDefaults?.port ? String(groupDefaults.port) : "22"}
                  className="h-8 flex-1 min-w-0 text-center"
                />
                <span className="text-xs text-muted-foreground">
@@ -713,7 +804,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                if (!hasIdentities) {
                  return (
                    <Input
-                      placeholder={t("hostDetails.username.placeholder")}
+                      placeholder={groupDefaults?.username || t("hostDetails.username.placeholder")}
                      value={form.username}
                      onChange={(e) => update("username", e.target.value)}
                      className="h-10"
@@ -732,7 +823,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                    <PopoverTrigger asChild>
                      <div className="relative">
                        <Input
-                          placeholder={t("hostDetails.username.placeholder")}
+                          placeholder={groupDefaults?.username || t("hostDetails.username.placeholder")}
                          value={form.username}
                          onChange={(e) => {
                            const next = e.target.value;
@@ -888,6 +979,31 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
              </div>
            )}

+            {/* Local key file paths display */}
+            {!selectedIdentity && !form.identityFileId && form.identityFilePaths && form.identityFilePaths.length > 0 && (
+              <div className="space-y-1.5">
+                {form.identityFilePaths.map((keyPath, idx) => (
+                  <div key={idx} className="flex items-center gap-2 p-2 rounded-md bg-secondary/50 border border-border/60 overflow-hidden">
+                    <FileKey size={14} className="text-primary shrink-0" />
+                    <span className="text-xs w-0 flex-1 truncate font-mono" title={keyPath}>
+                      {keyPath}
+                    </span>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 shrink-0"
+                      onClick={() => {
+                        const paths = form.identityFilePaths?.filter((_, i) => i !== idx) || [];
+                        update("identityFilePaths", paths.length > 0 ? paths : undefined);
+                      }}
+                    >
+                      <Trash2 size={12} />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+
            {/* Selected credential display */}
            {!selectedIdentity && form.identityFileId && (
              <div className="flex items-center gap-2 p-2 rounded-md bg-secondary/50 border border-border/60">
@@ -965,6 +1081,20 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                          {t("hostDetails.credential.certificate")}
                        </span>
                      </button>
+
+                      <button
+                        type="button"
+                        className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-secondary/80 transition-colors text-left"
+                        onClick={() => {
+                          setSelectedCredentialType("localKeyFile");
+                          setCredentialPopoverOpen(false);
+                        }}
+                      >
+                        <FileKey size={16} className="text-muted-foreground" />
+                        <span className="text-sm font-medium">
+                          {t("hostDetails.credential.localKeyFile")}
+                        </span>
+                      </button>
                    </div>
                  </PopoverContent>
                </Popover>
@@ -986,6 +1116,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                    onValueChange={(val) => {
                      update("identityFileId", val);
                      update("authMethod", "key");
+                      update("identityFilePaths", undefined);
                      setSelectedCredentialType(null);
                    }}
                    placeholder={t("hostDetails.keys.search")}
@@ -1021,6 +1152,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                    onValueChange={(val) => {
                      update("identityFileId", val);
                      update("authMethod", "certificate");
+                      update("identityFilePaths", undefined);
                      setSelectedCredentialType(null);
                    }}
                    placeholder={t("hostDetails.certs.search")}
@@ -1040,6 +1172,67 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                  </Button>
                </div>
              )}
+
+            {/* Local key file path input - appears after selecting "Local Key File" type */}
+            {!selectedIdentity &&
+              selectedCredentialType === "localKeyFile" &&
+              !form.identityFileId && (
+                <div className="space-y-1.5">
+                  <div className="flex items-center gap-1 min-w-0">
+                    <input
+                      type="text"
+                      className="flex-1 min-w-0 h-8 px-2 text-xs font-mono bg-background border border-border/60 rounded-md focus:outline-none focus:ring-1 focus:ring-ring"
+                      placeholder={t("hostDetails.credential.localKeyFilePlaceholder")}
+                      value={newKeyFilePath}
+                      onChange={(e) => setNewKeyFilePath(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" && newKeyFilePath.trim()) {
+                          e.preventDefault();
+                          const paths = [...(form.identityFilePaths || []), newKeyFilePath.trim()];
+                          update("identityFilePaths", paths);
+                          update("identityFileId", undefined);
+                          update("authMethod", "key");
+                          setNewKeyFilePath("");
+                        }
+                      }}
+                    />
+                    <Button
+                      variant="secondary"
+                      size="icon"
+                      className="h-8 w-8 shrink-0"
+                      title={t("hostDetails.credential.browseKeyFile")}
+                      onClick={async () => {
+                        const bridge = (window as unknown as { netcatty?: NetcattyBridge }).netcatty;
+                        if (!bridge?.selectFile) return;
+                        const filePath = await bridge.selectFile(
+                          "Select SSH Private Key",
+                          undefined,
+                          [{ name: "All Files", extensions: ["*"] }]
+                        );
+                        if (filePath) {
+                          const paths = [...(form.identityFilePaths || []), filePath];
+                          update("identityFilePaths", paths);
+                          update("identityFileId", undefined);
+                          update("authMethod", "key");
+                        }
+                      }}
+                    >
+                      <FolderOpen size={14} />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 shrink-0"
+                      onClick={() => {
+                        setSelectedCredentialType(null);
+                        setNewKeyFilePath("");
+                      }}
+                    >
+                      <X size={14} />
+                    </Button>
+                  </div>
+                </div>
+              )}
          </div>
        </Card>

@@ -1069,18 +1262,20 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
              {t("hostDetails.sftp.sudo.passwordWarning")}
            </p>
          )}
-          <div className="space-y-1">
-            <div className="text-sm font-medium">
-              {t("hostDetails.sftp.encoding")}
-            </div>
-            <div className="text-xs text-muted-foreground">
-              {t("hostDetails.sftp.encoding.desc")}
+          <div className="flex items-center justify-between gap-4">
+            <div className="space-y-0.5">
+              <div className="text-sm font-medium">
+                {t("hostDetails.sftp.encoding")}
+              </div>
+              <div className="text-xs text-muted-foreground">
+                {t("hostDetails.sftp.encoding.desc")}
+              </div>
            </div>
            <Select
              value={form.sftpEncoding || "auto"}
              onValueChange={(val) => update("sftpEncoding", val as Host["sftpEncoding"])}
            >
-              <SelectTrigger className="h-8">
+              <SelectTrigger className="h-8 w-28">
                <SelectValue placeholder={t("sftp.encoding.label")} />
              </SelectTrigger>
              <SelectContent>
@@ -1092,6 +1287,111 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
          </div>
        </Card>

+        {form.os === "linux" && (
+          <Card className="p-3 space-y-3 bg-card border-border/80">
+            <div className="flex items-center gap-2">
+              <img src="/distro/linux.svg" alt="Linux" className="h-3.5 w-3.5 opacity-70 dark:invert" />
+              <p className="text-xs font-semibold">{t("hostDetails.distro.title")}</p>
+            </div>
+            <p className="text-xs text-muted-foreground">{t("hostDetails.distro.desc")}</p>
+
+            <div className="grid gap-2 md:grid-cols-2">
+              <div className="space-y-1">
+                <span className="text-xs text-muted-foreground">{t("hostDetails.distro.mode")}</span>
+                <Select
+                  value={form.distroMode || "auto"}
+                  onValueChange={(val) => handleDistroModeChange(val as "auto" | "manual")}
+                >
+                  <SelectTrigger className="h-8" aria-label={t("hostDetails.distro.mode")}>
+                    <span className="truncate whitespace-nowrap pr-2 text-left">
+                      {form.distroMode === "manual"
+                        ? t("hostDetails.distro.mode.manual")
+                        : t("hostDetails.distro.mode.auto")}
+                    </span>
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="auto">{t("hostDetails.distro.mode.auto")}</SelectItem>
+                    <SelectItem value="manual">{t("hostDetails.distro.mode.manual")}</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {form.distroMode === "manual" ? (
+                <div className="space-y-1">
+                  <span className="text-xs text-muted-foreground">{t("hostDetails.distro.manualLabel")}</span>
+                  <Select
+                    value={form.manualDistro}
+                    onValueChange={(val) => update("manualDistro", val)}
+                  >
+                    <SelectTrigger className="h-8" aria-label={t("hostDetails.distro.manualLabel")}>
+                      {(() => {
+                        const selectedOption = distroOptions.find((option) => option.value === form.manualDistro);
+                        return selectedOption ? (
+                          <div className="flex min-w-0 items-center gap-2 pr-2">
+                            <div
+                              className={cn(
+                                "flex h-4 w-4 shrink-0 items-center justify-center overflow-hidden rounded-[2px]",
+                                selectedOption.bgClass,
+                              )}
+                            >
+                              {selectedOption.icon ? (
+                                <img
+                                  src={selectedOption.icon}
+                                  alt={selectedOption.label}
+                                  className="h-3 w-3 object-contain invert brightness-0"
+                                />
+                              ) : (
+                                <div className="h-2 w-2 rounded-full bg-white/70" />
+                              )}
+                            </div>
+                            <span className="truncate whitespace-nowrap">{selectedOption.label}</span>
+                          </div>
+                        ) : (
+                          <SelectValue placeholder={t("hostDetails.distro.unknown")} />
+                        );
+                      })()}
+                    </SelectTrigger>
+                    <SelectContent className="min-w-[14rem]">
+                      {distroOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          <div className="flex items-center gap-2">
+                            <div
+                              className={cn(
+                                "flex h-4 w-4 shrink-0 items-center justify-center overflow-hidden rounded-[2px]",
+                                option.bgClass,
+                              )}
+                            >
+                              {option.icon ? (
+                                <img
+                                  src={option.icon}
+                                  alt={option.label}
+                                  className="h-3 w-3 object-contain invert brightness-0"
+                                />
+                              ) : (
+                                <div className="h-2 w-2 rounded-full bg-white/70" />
+                              )}
+                            </div>
+                            <span className="whitespace-nowrap">{option.label}</span>
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              ) : (
+                <div className="space-y-1">
+                  <span className="text-xs text-muted-foreground">{t("hostDetails.distro.detectedLabel")}</span>
+                  <div className="flex h-8 items-center rounded-md border border-border/60 bg-background/50 px-3 text-sm">
+                    {effectiveFormDistro
+                      ? getDistroOptionLabel(effectiveFormDistro)
+                      : t("hostDetails.distro.unknown")}
+                  </div>
+                </div>
+              )}
+            </div>
+          </Card>
+        )}
+
        <Card className="p-3 space-y-3 bg-card border-border/80">
          <div className="flex items-center gap-2">
            <Palette size={14} className="text-muted-foreground" />
@@ -1110,15 +1410,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 +1426,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 +1447,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 +1464,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"
            >
              +
@@ -1184,7 +1516,15 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
          <ToggleRow
            label="Mosh"
            enabled={!!form.moshEnabled}
-            onToggle={() => update("moshEnabled", !form.moshEnabled)}
+            onToggle={() => {
+              const enabling = !form.moshEnabled;
+              if (enabling && form.deviceType === 'network') {
+                // Network device mode is incompatible with Mosh — clear it
+                setForm(prev => ({ ...prev, moshEnabled: true, deviceType: undefined }));
+              } else {
+                update("moshEnabled", enabling);
+              }
+            }}
          />
        </Card>

@@ -1217,6 +1557,32 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
          )}
        </Card>

+        {/* Network Device Mode — only for SSH hosts without Mosh (serial already uses raw mode) */}
+        {(!form.protocol || form.protocol === 'ssh') && !form.moshEnabled && (
+        <Card className="p-3 space-y-2 bg-card border-border/80">
+          <div className="flex items-center gap-2">
+            <Router size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">{t("hostDetails.section.deviceType")}</p>
+          </div>
+          <ToggleRow
+            label={t("hostDetails.deviceType")}
+            enabled={form.deviceType === 'network'}
+            onToggle={() => update("deviceType", form.deviceType === 'network' ? undefined : 'network')}
+          />
+          <p className="text-xs text-muted-foreground break-words">
+            {t("hostDetails.deviceType.desc")}
+          </p>
+          {form.deviceType === 'network' && (
+            <div className="flex items-start gap-2 p-2 rounded-md bg-yellow-500/10 border border-yellow-500/20">
+              <AlertTriangle size={14} className="text-yellow-500 mt-0.5 flex-shrink-0" />
+              <p className="text-xs text-yellow-600 dark:text-yellow-400 break-words">
+                {t("hostDetails.deviceType.warning")}
+              </p>
+            </div>
+          )}
+        </Card>
+        )}
+
        {/* Legacy Algorithms */}
        <Card className="p-3 space-y-2 bg-card border-border/80">
          <div className="flex items-center gap-2">
@@ -1239,6 +1605,17 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
              </p>
            </div>
          )}
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-muted-foreground">{t("hostDetails.backspaceBehavior")}</p>
+            <select
+              className="h-8 rounded-md border border-input bg-background px-2 text-xs"
+              value={form.backspaceBehavior ?? ""}
+              onChange={(e) => update("backspaceBehavior", e.target.value || undefined)}
+            >
+              <option value="">{t("hostDetails.backspaceBehavior.default")}</option>
+              <option value="ctrl-h">^H (0x08)</option>
+            </select>
+          </div>
        </Card>

        {/* Proxy via Hosts (Jump Hosts / ProxyJump) */}
@@ -1388,7 +1765,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                className="text-muted-foreground hover:text-destructive flex-shrink-0 ml-auto"
                onClick={(e) => {
                  e.stopPropagation();
-                  setForm((prev) => ({ ...prev, environmentVariables: [] }));
+                  setForm((prev) => ({ ...prev, environmentVariables: undefined }));
                }}
              />
            </button>
@@ -1411,7 +1788,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
            <p className="text-xs font-semibold">{t("hostDetails.startupCommand")}</p>
          </div>
          <Textarea
-            placeholder={t("hostDetails.startupCommand.placeholder")}
+            placeholder={groupDefaults?.startupCommand || t("hostDetails.startupCommand.placeholder")}
            value={form.startupCommand || ""}
            onChange={(e) => update("startupCommand", e.target.value)}
            className="min-h-[80px] font-mono text-sm"
@@ -1475,7 +1852,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({

            {/* Telnet Charset */}
            <Input
-              placeholder={t("hostDetails.charset.placeholder")}
+              placeholder={groupDefaults?.charset || t("hostDetails.charset.placeholder")}
              value={form.charset || "UTF-8"}
              onChange={(e) => update("charset", e.target.value)}
              className="h-10"
@@ -1491,21 +1868,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 +1884,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>
--- a/components/HostTreeView.tsx
+++ b/components/HostTreeView.tsx
@@ -1,4 +1,4 @@
-import { CheckSquare, ChevronRight, FileSymlink, Folder, FolderOpen, Monitor, Server, Square, Expand, Minimize2 } from 'lucide-react';
+import { CheckSquare, ChevronRight, Edit2, FileSymlink, Folder, FolderOpen, Monitor, Server, Square, Expand, Minimize2 } from 'lucide-react';
 import React, { useMemo } from 'react';
 import { useI18n } from '../application/i18n/I18nProvider';
 import { useTreeExpandedState } from '../application/state/useTreeExpandedState';
@@ -32,9 +32,12 @@ interface HostTreeViewProps {
  moveGroup: (sourcePath: string, targetPath: string) => void;
  managedGroupPaths?: Set<string>;
  onUnmanageGroup?: (groupPath: string) => void;
+
  isMultiSelectMode?: boolean;
  selectedHostIds?: Set<string>;
  toggleHostSelection?: (hostId: string) => void;
+  getDropTargetClasses?: (target: string) => string;
+  setDragOverDropTarget?: (target: string | null) => void;
 }

 interface TreeNodeProps {
@@ -56,11 +59,15 @@ interface TreeNodeProps {
  moveGroup: (sourcePath: string, targetPath: string) => void;
  managedGroupPaths?: Set<string>;
  onUnmanageGroup?: (groupPath: string) => void;
+
  isMultiSelectMode?: boolean;
  selectedHostIds?: Set<string>;
  toggleHostSelection?: (hostId: string) => void;
+  getDropTargetClasses?: (target: string) => string;
+  setDragOverDropTarget?: (target: string | null) => void;
 }

+
 const TreeNode: React.FC<TreeNodeProps> = ({
  node,
  depth,
@@ -80,15 +87,19 @@ const TreeNode: React.FC<TreeNodeProps> = ({
  moveGroup,
  managedGroupPaths,
  onUnmanageGroup,
+
  isMultiSelectMode,
  selectedHostIds,
  toggleHostSelection,
+  getDropTargetClasses,
+  setDragOverDropTarget,
 }) => {
  const { t } = useI18n();
  const isExpanded = expandedPaths.has(node.path);
  const hasChildren = node.children && Object.keys(node.children).length > 0;
  const paddingLeft = `${depth * 20 + 12}px`;
  const isManaged = managedGroupPaths?.has(node.path) ?? false;
+  const hostsCountInNode = node.totalHostCount ?? node.hosts.length;

  const childNodes = useMemo(() => {
    if (!node.children) return [];
@@ -135,6 +146,7 @@ const TreeNode: React.FC<TreeNodeProps> = ({
              <div
                className={cn(
                  "flex items-center py-2 pr-3 text-sm font-medium cursor-pointer transition-colors select-none group hover:bg-secondary/60 rounded-lg",
+                  getDropTargetClasses?.(node.path),
                )}
                style={{ paddingLeft }}
                draggable
@@ -142,10 +154,19 @@ const TreeNode: React.FC<TreeNodeProps> = ({
                onDragOver={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
+                  setDragOverDropTarget?.(node.path);
+                }}
+                onDragLeave={(e) => {
+                  const nextTarget = e.relatedTarget;
+                  if (nextTarget instanceof Node && e.currentTarget.contains(nextTarget)) {
+                    return;
+                  }
+                  setDragOverDropTarget?.(null);
                }}
                onDrop={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
+                  setDragOverDropTarget?.(null);
                  const hostId = e.dataTransfer.getData("host-id");
                  const groupPath = e.dataTransfer.getData("group-path");
                  if (hostId) moveHostToGroup(hostId, node.path);
@@ -171,9 +192,18 @@ 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>
                )}
+                <button
+                  className="h-7 w-7 flex items-center justify-center rounded-md hover:bg-secondary/80 transition-colors opacity-0 group-hover:opacity-100 shrink-0"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEditGroup(node.path);
+                  }}
+                >
+                  <Edit2 size={13} />
+                </button>
              </div>
            </CollapsibleTrigger>
          </ContextMenuTrigger>
@@ -224,9 +254,12 @@ const TreeNode: React.FC<TreeNodeProps> = ({
              moveGroup={moveGroup}
              managedGroupPaths={managedGroupPaths}
              onUnmanageGroup={onUnmanageGroup}
+
              isMultiSelectMode={isMultiSelectMode}
              selectedHostIds={selectedHostIds}
              toggleHostSelection={toggleHostSelection}
+              getDropTargetClasses={getDropTargetClasses}
+              setDragOverDropTarget={setDragOverDropTarget}
            />
          ))}

@@ -242,6 +275,7 @@ const TreeNode: React.FC<TreeNodeProps> = ({
              onDeleteHost={onDeleteHost}
              onCopyCredentials={onCopyCredentials}
              moveHostToGroup={moveHostToGroup}
+
              isMultiSelectMode={isMultiSelectMode}
              selectedHostIds={selectedHostIds}
              toggleHostSelection={toggleHostSelection}
@@ -262,6 +296,7 @@ interface HostTreeItemProps {
  onDeleteHost: (host: Host) => void;
  onCopyCredentials: (host: Host) => void;
  moveHostToGroup: (hostId: string, groupPath: string | null) => void;
+
  isMultiSelectMode?: boolean;
  selectedHostIds?: Set<string>;
  toggleHostSelection?: (hostId: string) => void;
@@ -276,6 +311,7 @@ const HostTreeItem: React.FC<HostTreeItemProps> = ({
  onDeleteHost,
  onCopyCredentials,
  moveHostToGroup: _moveHostToGroup,
+
  isMultiSelectMode,
  selectedHostIds,
  toggleHostSelection,
@@ -346,6 +382,15 @@ const HostTreeItem: React.FC<HostTreeItemProps> = ({
                {tags.length > 2 && '...'}
              </span>
            )}
+            <button
+              className="h-7 w-7 flex items-center justify-center rounded-md hover:bg-secondary/80 transition-colors"
+              onClick={(e) => {
+                e.stopPropagation();
+                onEditHost(host);
+              }}
+            >
+              <Edit2 size={13} />
+            </button>
          </div>
        </div>
      </ContextMenuTrigger>
@@ -362,7 +407,7 @@ const HostTreeItem: React.FC<HostTreeItemProps> = ({
        <ContextMenuItem onClick={() => onCopyCredentials(host)}>
          <Server className="mr-2 h-4 w-4" /> {t("vault.hosts.copyCredentials")}
        </ContextMenuItem>
-        <ContextMenuItem 
+        <ContextMenuItem
          onClick={() => onDeleteHost(host)}
          className="text-destructive focus:text-destructive"
        >
@@ -394,12 +439,15 @@ export const HostTreeView: React.FC<HostTreeViewProps> = ({
  moveGroup,
  managedGroupPaths,
  onUnmanageGroup,
+
  isMultiSelectMode,
  selectedHostIds,
  toggleHostSelection,
+  getDropTargetClasses,
+  setDragOverDropTarget,
 }) => {
  const { t } = useI18n();
-  
+
  // Use external state if provided, otherwise use local persistent state
  const localTreeState = useTreeExpandedState(STORAGE_KEY_VAULT_HOSTS_TREE_EXPANDED);
  
@@ -520,6 +568,8 @@ export const HostTreeView: React.FC<HostTreeViewProps> = ({
          isMultiSelectMode={isMultiSelectMode}
          selectedHostIds={selectedHostIds}
          toggleHostSelection={toggleHostSelection}
+          getDropTargetClasses={getDropTargetClasses}
+          setDragOverDropTarget={setDragOverDropTarget}
        />
      ))}

@@ -550,4 +600,4 @@ export const HostTreeView: React.FC<HostTreeViewProps> = ({
      )}
    </div>
  );
-};
+};
--- a/components/KeychainManager.tsx
+++ b/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"
--- a/components/KnownHostsManager.tsx
+++ b/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
--- a/components/PortForwardingNew.tsx
+++ b/components/PortForwardingNew.tsx
@@ -14,12 +14,14 @@ import React, { useCallback, useState } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { usePortForwardingState } from "../application/state/usePortForwardingState";
 import {
+  GroupConfig,
  Host,
  ManagedSource,
  PortForwardingRule,
  PortForwardingType,
  SSHKey,
 } from "../domain/models";
+import { resolveGroupDefaults, applyGroupDefaults } from "../domain/groupConfig";
 import { cn } from "../lib/utils";
 import SelectHostPanel from "./SelectHostPanel";
 import {
@@ -66,6 +68,7 @@ interface PortForwardingProps {
  identities?: import('../domain/models').Identity[];
  customGroups: string[];
  managedSources?: ManagedSource[];
+  groupConfigs?: GroupConfig[];
  onNewHost?: () => void;
  onSaveHost?: (host: Host) => void;
  onCreateGroup?: (groupPath: string) => void;
@@ -77,6 +80,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
  identities = [],
  customGroups: _customGroups,
  managedSources = [],
+  groupConfigs = [],
  onNewHost: _onNewHost,
  onSaveHost,
  onCreateGroup: _onCreateGroup,
@@ -113,8 +117,8 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
  // Start a port forwarding tunnel
  const handleStartTunnel = useCallback(
    async (rule: PortForwardingRule) => {
-      const _host = hosts.find((h) => h.id === rule.hostId);
-      if (!_host) {
+      const _rawHost = hosts.find((h) => h.id === rule.hostId);
+      if (!_rawHost) {
        setRuleStatus(rule.id, "error", t("pf.error.hostNotFound"));
        toast.error(
          t("pf.error.hostNotFound"),
@@ -123,6 +127,10 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
        return;
      }

+      const _host = _rawHost.group
+        ? applyGroupDefaults(_rawHost, resolveGroupDefaults(_rawHost.group, groupConfigs))
+        : _rawHost;
+
      setPendingOperations((prev) => new Set([...prev, rule.id]));
      let errorShown = false;

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

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

--- a/components/QuickSwitcher.tsx
+++ b/components/QuickSwitcher.tsx
@@ -2,7 +2,7 @@ import {
  Folder,
  LayoutGrid,
  Search,
-  Shield,
+  FolderLock,
  Terminal,
  TerminalSquare,
 } from "lucide-react";
@@ -10,9 +10,10 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "
 import { useI18n } from "../application/i18n/I18nProvider";
 import { Host, TerminalSession, Workspace } from "../types";
 import { KeyBinding } from "../domain/models";
+import { useDiscoveredShells, getShellIconPath, isMonochromeShellIcon } from "../lib/useDiscoveredShells";

 type QuickSwitcherItem = {
-  type: "host" | "tab" | "workspace" | "action";
+  type: "host" | "tab" | "workspace" | "action" | "shell";
  id: string;
  data?: Host | TerminalSession | Workspace;
 };
@@ -66,7 +67,7 @@ interface QuickSwitcherProps {
  onSelect: (host: Host) => void;
  onSelectTab: (tabId: string) => void;
  onClose: () => void;
-  onCreateLocalTerminal?: () => void;
+  onCreateLocalTerminal?: (shell?: { command: string; args?: string[]; name?: string; icon?: string }) => void;
  // onCreateWorkspace removed - feature not currently used
  keyBindings?: KeyBinding[];
 }
@@ -85,6 +86,18 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
  keyBindings,
 }) => {
  const { t } = useI18n();
+  const discoveredShells = useDiscoveredShells();
+
+  const filteredShells = useMemo(() => {
+    const list = !query.trim()
+      ? discoveredShells
+      : discoveredShells.filter(
+          (s) => s.name.toLowerCase().includes(query.toLowerCase()) || s.id.toLowerCase().includes(query.toLowerCase())
+        );
+    // Default shell first
+    return [...list].sort((a, b) => (a.isDefault === b.isDefault ? 0 : a.isDefault ? -1 : 1));
+  }, [discoveredShells, query]);
+
  // Get hotkey display strings
  const getHotkeyLabel = useCallback((actionId: string) => {
    const binding = keyBindings?.find(k => k.id === actionId);
@@ -98,13 +111,17 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({

  // Reset state when opening
  useEffect(() => {
-    if (isOpen) {
-      setSelectedIndex(0);
-      // Auto focus the input after a short delay
-      setTimeout(() => {
-        inputRef.current?.focus();
-      }, 50);
-    }
+    if (!isOpen) return;
+
+    const focusTimer = window.setTimeout(() => {
+      inputRef.current?.focus();
+    }, 50);
+
+    setSelectedIndex(0);
+
+    return () => {
+      window.clearTimeout(focusTimer);
+    };
  }, [isOpen]);

  // Handle clicks outside the container
@@ -151,13 +168,23 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
      workspaces.forEach((w) =>
        items.push({ type: "workspace", id: w.id, data: w }),
      );
-      // Quick connect actions
-      items.push({ type: "action", id: "local-terminal" });
+      // Local shells (or fallback action if discovery not ready)
+      if (filteredShells.length > 0) {
+        filteredShells.forEach((shell) =>
+          items.push({ type: "shell", id: shell.id }),
+        );
+      } else {
+        items.push({ type: "action", id: "local-terminal" });
+      }
    } else {
      // Recent connections only
      results.forEach((host) =>
        items.push({ type: "host", id: host.id, data: host }),
      );
+      // Also include matching shells in search results
+      filteredShells.forEach((shell) =>
+        items.push({ type: "shell", id: shell.id }),
+      );
    }

    // Build index map for O(1) lookup
@@ -167,7 +194,7 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
    });

    return { flatItems: items, itemIndexMap: indexMap };
-  }, [showCategorized, results, orphanSessions, workspaces]);
+  }, [showCategorized, results, orphanSessions, workspaces, filteredShells]);

  // O(1) index lookup
  const getItemIndex = useCallback((type: string, id: string) => {
@@ -206,6 +233,14 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
          onClose();
        }
        break;
+      case "shell": {
+        const shell = discoveredShells.find(s => s.id === item.id);
+        if (shell && onCreateLocalTerminal) {
+          onCreateLocalTerminal({ command: shell.command, args: shell.args, name: shell.name, icon: shell.icon });
+          onClose();
+        }
+        break;
+      }
    }
  };

@@ -287,7 +322,7 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
                const isSelected = idx === selectedIndex;
                const icon =
                  tabId === "vault" ? (
-                    <Shield size={16} />
+                    <FolderLock size={16} />
                  ) : (
                    <Folder size={16} />
                  );
@@ -365,21 +400,60 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
              })}
            </div>

-            {/* Quick connect section */}
-            <div>
-              <div className="px-4 py-1.5">
-                <span className="text-xs font-medium text-muted-foreground">
-                  Quick connect
-                </span>
+            {/* Local Shells section */}
+            {/* Local Shells or fallback Local Terminal */}
+            {filteredShells.length > 0 ? (
+              <div>
+                <div className="px-4 py-1.5">
+                  <span className="text-xs font-medium text-muted-foreground">
+                    {t("qs.localShells")}
+                  </span>
+                </div>
+                {filteredShells.map((shell) => {
+                  const idx = getItemIndex("shell", shell.id);
+                  const isSelected = idx === selectedIndex;
+                  return (
+                    <div
+                      key={shell.id}
+                      className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${
+                        isSelected ? "bg-primary/15" : "hover:bg-muted/50"
+                      }`}
+                      onClick={() => {
+                        if (onCreateLocalTerminal) {
+                          onCreateLocalTerminal({ command: shell.command, args: shell.args, name: shell.name, icon: shell.icon });
+                          onClose();
+                        }
+                      }}
+                      onMouseEnter={() => setSelectedIndex(idx)}
+                    >
+                      <img
+                        src={getShellIconPath(shell.icon)}
+                        alt={shell.name}
+                        className={`h-6 w-6 shrink-0${isMonochromeShellIcon(shell.icon) ? " dark:invert" : ""}`}
+                      />
+                      <span className="text-sm font-medium">{shell.name}</span>
+                      {shell.isDefault && (
+                        <span className="text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
+                          {t("qs.default")}
+                        </span>
+                      )}
+                    </div>
+                  );
+                })}
              </div>
-
-              {/* Local Terminal */}
-              {onCreateLocalTerminal && (
+            ) : onCreateLocalTerminal && (
+              <div>
+                <div className="px-4 py-1.5">
+                  <span className="text-xs font-medium text-muted-foreground">
+                    {t("qs.localShells")}
+                  </span>
+                </div>
                <div
-                  className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${getItemIndex("action", "local-terminal") === selectedIndex
-                    ? "bg-primary/15"
-                    : "hover:bg-muted/50"
-                    }`}
+                  className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${
+                    getItemIndex("action", "local-terminal") === selectedIndex
+                      ? "bg-primary/15"
+                      : "hover:bg-muted/50"
+                  }`}
                  onClick={() => {
                    onCreateLocalTerminal();
                    onClose();
@@ -393,10 +467,8 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
                  </div>
                  <span className="text-sm font-medium">{t("qs.localTerminal")}</span>
                </div>
-              )}
-
-              {/* Serial removed (not supported) */}
-            </div>
+              </div>
+            )}
          </div>
        </ScrollArea>
      </div>
--- a/components/SFTPModal.tsx
+++ b/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;
--- a/components/ScriptsSidePanel.tsx
+++ b/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>
--- a/components/SelectHostPanel.tsx
+++ b/components/SelectHostPanel.tsx
@@ -19,6 +19,12 @@ import { Input } from "./ui/input";
 import { ScrollArea } from "./ui/scroll-area";
 import { SortDropdown, SortMode } from "./ui/sort-dropdown";
 import { TagFilterDropdown } from "./ui/tag-filter-dropdown";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./ui/tooltip";

 interface SelectHostPanelProps {
  hosts: Host[];
@@ -198,6 +204,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
  }, [currentPath]);

  return (
+    <TooltipProvider delayDuration={300}>
    <div
      className={cn(
        "absolute right-0 top-0 bottom-0 w-[380px] border-l border-border/60 bg-background z-40 flex flex-col app-no-drag",
@@ -271,7 +278,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({

      {/* Content */}
      <ScrollArea className="flex-1">
-        <div className="p-4 space-y-4">
+        <div className="p-3 space-y-3">
          {/* Breadcrumbs */}
          {currentPath && (
            <div className="flex items-center gap-1 text-xs text-muted-foreground">
@@ -301,20 +308,20 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
          )}
          {groupsWithCounts.length > 0 && (
            <div>
-              <h4 className="text-sm font-semibold mb-3">{t("vault.groups.title")}</h4>
+              <h4 className="text-xs font-semibold mb-2 text-muted-foreground">{t("vault.groups.title")}</h4>
              <div className="space-y-1">
                {groupsWithCounts.map((group) => (
                  <div
                    key={group.path}
-                    className="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-muted/70 cursor-pointer transition-colors"
+                    className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg hover:bg-muted/70 cursor-pointer transition-colors"
                    onClick={() => setCurrentPath(group.path)}
                  >
-                    <div className="h-10 w-10 rounded-lg bg-primary/15 text-primary flex items-center justify-center">
-                      <LayoutGrid size={18} />
+                    <div className="h-8 w-8 rounded-lg bg-primary/15 text-primary flex items-center justify-center shrink-0">
+                      <LayoutGrid size={15} />
                    </div>
                    <div className="flex-1 min-w-0">
-                      <div className="font-medium">{group.name}</div>
-                      <div className="text-xs text-muted-foreground">
+                      <div className="text-[13px] font-medium truncate">{group.name}</div>
+                      <div className="text-[11px] text-muted-foreground">
                        {t("vault.groups.hostsCount", { count: group.count })}
                      </div>
                    </div>
@@ -327,18 +334,19 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
          {/* Hosts Section */}
          {filteredHosts.length > 0 && (
            <div>
-              <h4 className="text-sm font-semibold mb-3">{t("vault.nav.hosts")}</h4>
+              <h4 className="text-xs font-semibold mb-2 text-muted-foreground">{t("vault.nav.hosts")}</h4>
              <div className="space-y-1">
                {filteredHosts.map((host) => {
                  const isSelected = selectedHostIds.includes(host.id);
+                  const connectionStr = `${host.username}@${host.hostname}:${host.port || 22}`;

                  return (
                    <div
                      key={host.id}
                      className={cn(
-                        "flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-colors",
+                        "flex items-center gap-2.5 px-2.5 py-2 rounded-lg cursor-pointer transition-colors",
                        isSelected
-                          ? "bg-muted border border-border"
+                          ? "bg-muted"
                          : "hover:bg-muted/70",
                      )}
                      onClick={() => onSelect(host)}
@@ -346,16 +354,32 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
                      <DistroAvatar
                        host={host}
                        fallback={host.os[0].toUpperCase()}
-                        className="h-10 w-10"
+                        className="h-8 w-8 rounded-md"
                      />
                      <div className="flex-1 min-w-0">
-                        <div className="font-medium">{host.label}</div>
-                        <div className="text-xs text-muted-foreground truncate">
-                          {host.username}@{host.hostname}:{host.port || 22}
-                        </div>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <div className="text-[13px] font-medium truncate">
+                              {host.label}
+                            </div>
+                          </TooltipTrigger>
+                          <TooltipContent side="top" align="start">
+                            <p>{host.label}</p>
+                          </TooltipContent>
+                        </Tooltip>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <div className="text-[11px] text-muted-foreground truncate">
+                              {connectionStr}
+                            </div>
+                          </TooltipTrigger>
+                          <TooltipContent side="top" align="start">
+                            <p>{connectionStr}</p>
+                          </TooltipContent>
+                        </Tooltip>
                      </div>
                      {isSelected && (
-                        <Check size={16} className="text-primary" />
+                        <Check size={14} className="text-primary shrink-0" />
                      )}
                    </div>
                  );
@@ -413,6 +437,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
        />
      )}
    </div>
+    </TooltipProvider>
  );
 };

--- a/components/SerialConnectModal.tsx
+++ b/components/SerialConnectModal.tsx
@@ -35,7 +35,7 @@ interface SerialPort {
 interface SerialConnectModalProps {
  open: boolean;
  onClose: () => void;
-  onConnect: (config: SerialConfig) => void;
+  onConnect: (config: SerialConfig, options?: { charset?: string }) => void;
  onSaveHost?: (host: Host) => void;
 }

@@ -65,6 +65,7 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
  const [flowControl, setFlowControl] = useState<SerialFlowControl>('none');
  const [localEcho, setLocalEcho] = useState(false);
  const [lineMode, setLineMode] = useState(false);
+  const [charset, setCharset] = useState('UTF-8');

  // Save configuration state
  const [saveConfig, setSaveConfig] = useState(false);
@@ -131,12 +132,13 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
        tags: ['serial'],
        protocol: 'serial',
        createdAt: Date.now(),
+        charset,
        serialConfig: config, // Store full serial configuration for connection
      };
      onSaveHost(host);
    }

-    onConnect(config);
+    onConnect(config, { charset });
    onClose();
  };

@@ -164,7 +166,7 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({

  return (
    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
-      <DialogContent className="max-w-md">
+      <DialogContent className="max-w-md max-h-[85vh] flex flex-col">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Usb size={18} />
@@ -175,7 +177,7 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
          </DialogDescription>
        </DialogHeader>

-        <div className="space-y-4 py-2">
+        <div className="space-y-4 py-2 overflow-y-auto flex-1 min-h-0">
          {/* Serial Port Selection */}
          <div className="space-y-2">
            <div className="flex items-center justify-between">
@@ -368,6 +370,20 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
                    className="h-4 w-4 rounded border-input"
                  />
                </div>
+
+                {/* Charset */}
+                <div className="space-y-1">
+                  <Label htmlFor="serial-charset" className="text-sm font-medium">
+                    {t('serial.field.charset')}
+                  </Label>
+                  <Input
+                    id="serial-charset"
+                    placeholder={t("hostDetails.charset.placeholder")}
+                    value={charset}
+                    onChange={(e) => setCharset(e.target.value)}
+                    className="h-9"
+                  />
+                </div>
              </div>
            </CollapsibleContent>
          </Collapsible>
--- a/components/SerialHostDetailsPanel.tsx
+++ b/components/SerialHostDetailsPanel.tsx
@@ -66,6 +66,7 @@ export const SerialHostDetailsPanel: React.FC<SerialHostDetailsPanelProps> = ({
  const [flowControl, setFlowControl] = useState<SerialFlowControl>(initialData.serialConfig?.flowControl || 'none');
  const [localEcho, setLocalEcho] = useState(initialData.serialConfig?.localEcho || false);
  const [lineMode, setLineMode] = useState(initialData.serialConfig?.lineMode || false);
+  const [charset, setCharset] = useState(initialData.charset || 'UTF-8');
  const [tags, setTags] = useState<string[]>(initialData.tags || []);
  const [group, setGroup] = useState(initialData.group || '');

@@ -107,6 +108,7 @@ export const SerialHostDetailsPanel: React.FC<SerialHostDetailsPanelProps> = ({
      port: baudRate,
      tags,
      group,
+      charset,
      serialConfig: config,
    };

@@ -392,6 +394,20 @@ export const SerialHostDetailsPanel: React.FC<SerialHostDetailsPanelProps> = ({
                  className="h-4 w-4 rounded border-input"
                />
              </div>
+
+              {/* Charset */}
+              <div className="space-y-1">
+                <Label htmlFor="serial-charset" className="text-sm font-medium">
+                  {t('serial.field.charset')}
+                </Label>
+                <Input
+                  id="serial-charset"
+                  placeholder={t("hostDetails.charset.placeholder")}
+                  value={charset}
+                  onChange={(e) => setCharset(e.target.value)}
+                  className="h-9"
+                />
+              </div>
            </div>
          </CollapsibleContent>
        </Collapsible>
--- a/components/SettingsApplicationTab.tsx
+++ b/components/SettingsApplicationTab.tsx
@@ -68,9 +68,11 @@ interface SettingsApplicationTabProps {
  checkNow: UseUpdateCheckResult['checkNow'];
  openReleasePage: UseUpdateCheckResult['openReleasePage'];
  installUpdate: UseUpdateCheckResult['installUpdate'];
+  startDownload: UseUpdateCheckResult['startDownload'];
+  isUpdateDemoMode: boolean;
 }

-export default function SettingsApplicationTab({ updateState, checkNow, openReleasePage, installUpdate }: SettingsApplicationTabProps) {
+export default function SettingsApplicationTab({ updateState, checkNow, openReleasePage, installUpdate, startDownload, isUpdateDemoMode }: SettingsApplicationTabProps) {
  const { t } = useI18n();
  const { openExternal, getApplicationInfo } = useApplicationBackend();
  const [appInfo, setAppInfo] = useState<AppInfo>({ name: "Netcatty", version: "" });
@@ -94,10 +96,6 @@ export default function SettingsApplicationTab({ updateState, checkNow, openRele
    };
  }, [getApplicationInfo]);

-  // Check if demo mode is enabled for development testing
-  const isUpdateDemoMode = typeof window !== 'undefined' &&
-    window.localStorage?.getItem('debug.updateDemo') === '1';
-
  const handleCheckForUpdates = async () => {
    // In demo mode, allow checking even for dev builds
    if (!isUpdateDemoMode && (!appInfo.version || appInfo.version === '0.0.0')) {
@@ -150,7 +148,7 @@ export default function SettingsApplicationTab({ updateState, checkNow, openRele
                {/* Update badge - reflects auto-download state */}
                {updateState.latestRelease && (updateState.hasUpdate || updateState.autoDownloadStatus === 'downloading' || updateState.autoDownloadStatus === 'ready') && (
                  <button
-                    onClick={() => updateState.autoDownloadStatus === 'ready' ? installUpdate() : void openReleasePage()}
+                    onClick={() => updateState.autoDownloadStatus === 'ready' ? installUpdate() : updateState.autoDownloadStatus === 'downloading' ? undefined : startDownload()}
                    className={cn(
                      "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium",
                      updateState.autoDownloadStatus === 'ready'
@@ -177,7 +175,7 @@ export default function SettingsApplicationTab({ updateState, checkNow, openRele
              variant="secondary"
              className="gap-2"
              onClick={() => void handleCheckForUpdates()}
-              disabled={updateState.isChecking}
+              disabled={updateState.isChecking || updateState.manualCheckStatus === 'checking' || updateState.autoDownloadStatus === 'downloading' || updateState.autoDownloadStatus === 'ready'}
            >
              {updateState.isChecking ? (
                <Loader2 size={16} className="animate-spin" />
--- a/components/SettingsPage.tsx
+++ b/components/SettingsPage.tsx
@@ -2,13 +2,15 @@
 * Settings Page - Standalone settings window content
 * This component is rendered in a separate Electron window
 */
-import { AppWindow, Cloud, FileType, HardDrive, Keyboard, Palette, TerminalSquare, X } from "lucide-react";
+import { AppWindow, Cloud, FileType, HardDrive, Keyboard, Palette, Sparkles, TerminalSquare, X } from "lucide-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useSettingsState } from "../application/state/useSettingsState";
+import { useAvailableFonts } from "../application/state/fontStore";
 import { usePortForwardingState } from "../application/state/usePortForwardingState";
 import { useVaultState } from "../application/state/useVaultState";
 import { useWindowControls } from "../application/state/useWindowControls";
 import { useUpdateCheck } from "../application/state/useUpdateCheck";
+import { useAIState } from "../application/state/useAIState";
 import { I18nProvider, useI18n } from "../application/i18n/I18nProvider";
 import SettingsApplicationTab from "./SettingsApplicationTab";
 import SettingsAppearanceTab from "./settings/tabs/SettingsAppearanceTab";
@@ -16,18 +18,93 @@ import SettingsFileAssociationsTab from "./settings/tabs/SettingsFileAssociation
 import SettingsShortcutsTab from "./settings/tabs/SettingsShortcutsTab";
 import SettingsTerminalTab from "./settings/tabs/SettingsTerminalTab";
 import SettingsSystemTab from "./settings/tabs/SettingsSystemTab";
+const SettingsAITab = React.lazy(() => import("./settings/tabs/SettingsAITab"));
 import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
-import type { TerminalFont } from "../infrastructure/config/fonts";

 const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);

-type SettingsState = ReturnType<typeof useSettingsState> & {
-    availableFonts: TerminalFont[];
-};
+class AITabErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  { error: Error | null }
+> {
+  state: { error: Error | null } = { error: null };
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+  render() {
+    if (this.state.error) {
+      return (
+        <div style={{ padding: 32, color: "#f87171", fontFamily: "monospace", whiteSpace: "pre-wrap" }}>
+          <h3 style={{ marginBottom: 8 }}>AI Settings Error</h3>
+          <div>{this.state.error.message}</div>
+          <div style={{ marginTop: 8, fontSize: 12, color: "#888" }}>{this.state.error.stack}</div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+type SettingsState = ReturnType<typeof useSettingsState>;

 const SettingsSyncTab = React.lazy(() => import("./settings/tabs/SettingsSyncTab"));

-const SettingsSyncTabWithVault: React.FC = () => {
+const SettingsTerminalTabContainer: React.FC<{ settings: SettingsState }> = ({ settings }) => {
+    const availableFonts = useAvailableFonts();
+
+    return (
+        <SettingsTerminalTab
+            terminalThemeId={settings.terminalThemeId}
+            setTerminalThemeId={settings.setTerminalThemeId}
+            terminalFontFamilyId={settings.terminalFontFamilyId}
+            setTerminalFontFamilyId={settings.setTerminalFontFamilyId}
+            terminalFontSize={settings.terminalFontSize}
+            setTerminalFontSize={settings.setTerminalFontSize}
+            terminalSettings={settings.terminalSettings}
+            updateTerminalSetting={settings.updateTerminalSetting}
+            availableFonts={availableFonts}
+            workspaceFocusStyle={settings.workspaceFocusStyle}
+            setWorkspaceFocusStyle={settings.setWorkspaceFocusStyle}
+        />
+    );
+};
+
+const SettingsAITabContainer: React.FC = () => {
+    const aiState = useAIState();
+
+    return (
+        <AITabErrorBoundary>
+            <React.Suspense fallback={<div className="flex-1 px-6 py-5 text-sm text-muted-foreground">Loading AI settings...</div>}>
+                <SettingsAITab
+                    providers={aiState.providers}
+                    addProvider={aiState.addProvider}
+                    updateProvider={aiState.updateProvider}
+                    removeProvider={aiState.removeProvider}
+                    activeProviderId={aiState.activeProviderId}
+                    setActiveProviderId={aiState.setActiveProviderId}
+                    activeModelId={aiState.activeModelId}
+                    setActiveModelId={aiState.setActiveModelId}
+                    globalPermissionMode={aiState.globalPermissionMode}
+                    setGlobalPermissionMode={aiState.setGlobalPermissionMode}
+                    externalAgents={aiState.externalAgents}
+                    setExternalAgents={aiState.setExternalAgents}
+                    defaultAgentId={aiState.defaultAgentId}
+                    setDefaultAgentId={aiState.setDefaultAgentId}
+                    commandBlocklist={aiState.commandBlocklist}
+                    setCommandBlocklist={aiState.setCommandBlocklist}
+                    commandTimeout={aiState.commandTimeout}
+                    setCommandTimeout={aiState.setCommandTimeout}
+                    maxIterations={aiState.maxIterations}
+                    setMaxIterations={aiState.setMaxIterations}
+                    webSearchConfig={aiState.webSearchConfig}
+                    setWebSearchConfig={aiState.setWebSearchConfig}
+                />
+            </React.Suspense>
+        </AITabErrorBoundary>
+    );
+};
+
+const SettingsSyncTabWithVault: React.FC<{ onSettingsApplied?: () => void }> = ({ onSettingsApplied }) => {
    const {
        hosts,
        keys,
@@ -36,6 +113,7 @@ const SettingsSyncTabWithVault: React.FC = () => {
        customGroups,
        snippetPackages,
        knownHosts,
+        groupConfigs,
        importDataFromString,
        clearVaultData,
    } = useVaultState();
@@ -55,8 +133,8 @@ const SettingsSyncTabWithVault: React.FC = () => {
    );

    const vault = useMemo(
-        () => ({ hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts }),
-        [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts],
+        () => ({ hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts, groupConfigs }),
+        [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts, groupConfigs],
    );

    return (
@@ -66,6 +144,7 @@ const SettingsSyncTabWithVault: React.FC = () => {
            importDataFromString={importDataFromString}
            importPortForwardingRules={importPortForwardingRules}
            clearVaultData={clearVaultData}
+            onSettingsApplied={onSettingsApplied}
        />
    );
 };
@@ -73,7 +152,7 @@ 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, startDownload, isUpdateDemoMode } = useUpdateCheck({ autoUpdateEnabled: settings.autoUpdateEnabled });
    const [activeTab, setActiveTab] = useState("application");
    const [mountedTabs, setMountedTabs] = useState(() => new Set(["application"]));

@@ -152,6 +231,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"
@@ -174,6 +259,8 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                            checkNow={checkNow}
                            openReleasePage={openReleasePage}
                            installUpdate={installUpdate}
+                            startDownload={startDownload}
+                            isUpdateDemoMode={isUpdateDemoMode}
                        />
                    )}

@@ -199,17 +286,7 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                    )}

                    {mountedTabs.has("terminal") && (
-                        <SettingsTerminalTab
-                            terminalThemeId={settings.terminalThemeId}
-                            setTerminalThemeId={settings.setTerminalThemeId}
-                            terminalFontFamilyId={settings.terminalFontFamilyId}
-                            setTerminalFontFamilyId={settings.setTerminalFontFamilyId}
-                            terminalFontSize={settings.terminalFontSize}
-                            setTerminalFontSize={settings.setTerminalFontSize}
-                            terminalSettings={settings.terminalSettings}
-                            updateTerminalSetting={settings.updateTerminalSetting}
-                            availableFonts={settings.availableFonts}
-                        />
+                        <SettingsTerminalTabContainer settings={settings} />
                    )}

                    {mountedTabs.has("shortcuts") && (
@@ -228,9 +305,13 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                        <SettingsFileAssociationsTab />
                    )}

+                    {mountedTabs.has("ai") && (
+                        <SettingsAITabContainer />
+                    )}
+
                    {mountedTabs.has("sync") && (
                        <React.Suspense fallback={null}>
-                            <SettingsSyncTabWithVault />
+                            <SettingsSyncTabWithVault onSettingsApplied={settings.rehydrateAllFromStorage} />
                        </React.Suspense>
                    )}

@@ -247,10 +328,15 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                            closeToTray={settings.closeToTray}
                            setCloseToTray={settings.setCloseToTray}
                            hotkeyRegistrationError={settings.hotkeyRegistrationError}
+                            globalHotkeyEnabled={settings.globalHotkeyEnabled}
+                            setGlobalHotkeyEnabled={settings.setGlobalHotkeyEnabled}
+                            autoUpdateEnabled={settings.autoUpdateEnabled}
+                            setAutoUpdateEnabled={settings.setAutoUpdateEnabled}
                            updateState={updateState}
                            checkNow={checkNow}
                            installUpdate={installUpdate}
                            openReleasePage={openReleasePage}
+                            startDownload={startDownload}
                        />
                    )}
                </div>
--- a/components/SftpSidePanel.tsx
+++ b/components/SftpSidePanel.tsx
@@ -10,7 +10,8 @@
 * Used in TerminalLayer to provide SFTP alongside terminal sessions.
 */

-import React, { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { formatHostPort } from "../domain/host";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { useSftpState } from "../application/state/useSftpState";
 import { useSftpBackend } from "../application/state/useSftpBackend";
@@ -30,12 +31,17 @@ import { SftpTransferQueue } from "./sftp/SftpTransferQueue";
 import { SftpContextProvider } from "./sftp";
 import { useSftpViewPaneCallbacks } from "./sftp/hooks/useSftpViewPaneCallbacks";
 import { useSftpViewTabs } from "./sftp/hooks/useSftpViewTabs";
+import { useSftpKeyboardShortcuts } from "./sftp/hooks/useSftpKeyboardShortcuts";
+import { sftpFocusStore } from "./sftp/hooks/useSftpFocusedPane";
+import { keepOnlyPaneSelections } from "./sftp/hooks/selectionScope";
+import { KeyBinding, HotkeyScheme } from "../domain/models";

 interface SftpSidePanelProps {
  hosts: Host[];
  keys: SSHKey[];
  identities: Identity[];
  updateHosts: (hosts: Host[]) => void;
+  sftpDefaultViewMode: "list" | "tree";
  /** The host to connect to (follows focused terminal) */
  activeHost: Host | null;
  initialLocation?: { hostId: string; path: string } | null;
@@ -54,6 +60,8 @@ interface SftpSidePanelProps {
  sftpAutoSync: boolean;
  sftpShowHiddenFiles: boolean;
  sftpUseCompressedUpload: boolean;
+  hotkeyScheme: HotkeyScheme;
+  keyBindings: KeyBinding[];
  editorWordWrap: boolean;
  setEditorWordWrap: (value: boolean) => void;
  onGetTerminalCwd?: () => Promise<string | null>;
@@ -64,6 +72,7 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
  keys,
  identities,
  updateHosts,
+  sftpDefaultViewMode,
  activeHost,
  initialLocation,
  showWorkspaceHostHeader = false,
@@ -75,6 +84,8 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
  sftpAutoSync,
  sftpShowHiddenFiles,
  sftpUseCompressedUpload,
+  hotkeyScheme,
+  keyBindings,
  editorWordWrap,
  setEditorWordWrap,
  onGetTerminalCwd,
@@ -101,7 +112,15 @@ 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,
+    listLocalDir,
+  } = useSftpBackend();

  const sftpRef = useRef(sftp);
  sftpRef.current = sftp;
@@ -111,6 +130,17 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({

  const autoSyncRef = useRef(sftpAutoSync);
  autoSyncRef.current = sftpAutoSync;
+  const panelRootRef = useRef<HTMLDivElement>(null);
+  const dialogActionScopeIdRef = useRef(`sftp-side-panel:${crypto.randomUUID()}`);
+  const [hasPaneFocus, setHasPaneFocus] = useState(false);
+
+  useSftpKeyboardShortcuts({
+    keyBindings,
+    hotkeyScheme,
+    sftpRef,
+    dialogActionScopeId: dialogActionScopeIdRef.current,
+    isActive: isVisible && hasPaneFocus,
+  });

  const { getOpenerForFile, setOpenerForExtension } = useSftpFileAssociations();
  const getOpenerForFileRef = useRef(getOpenerForFile);
@@ -122,10 +152,60 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
    sftpRef.current.setShowHiddenFiles("left", paneId, !pane.showHiddenFiles);
  }, []);

+  const syncFocusedSelection = useCallback((tabId: string | null) => {
+    if (tabId) {
+      keepOnlyPaneSelections(sftpRef.current, { side: "left", tabId });
+      return;
+    }
+    keepOnlyPaneSelections(sftpRef.current, null);
+  }, []);
+
+  const handlePaneFocus = useCallback(() => {
+    sftpFocusStore.setFocusedSide("left");
+    setHasPaneFocus(true);
+    syncFocusedSelection(sftpRef.current.getActiveTabId("left"));
+  }, [syncFocusedSelection]);
+
  // NOTE: We intentionally do NOT sync to activeTabStore here.
  // activeTabStore is a global singleton shared with SftpView.
  // Writing to it here would corrupt SftpView's left pane visibility.

+  useEffect(() => {
+    if (!isVisible) {
+      setHasPaneFocus(false);
+      syncFocusedSelection(null);
+    }
+  }, [isVisible, syncFocusedSelection]);
+
+  useEffect(() => {
+    if (!isVisible) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target as Node | null;
+      const elementTarget = target instanceof Element ? target : null;
+      const isPortalInteraction = !!elementTarget?.closest(
+        '#netcatty-context-menu-root, [role="dialog"], [data-radix-popper-content-wrapper]',
+      );
+      if (isPortalInteraction) {
+        return;
+      }
+
+      if (panelRootRef.current?.contains(target)) {
+        sftpFocusStore.setFocusedSide("left");
+        setHasPaneFocus(true);
+        syncFocusedSelection(sftpRef.current.getActiveTabId("left"));
+      } else {
+        setHasPaneFocus(false);
+        syncFocusedSelection(null);
+      }
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+    };
+  }, [isVisible, syncFocusedSelection]);
+
  const {
    leftCallbacks,
    rightCallbacks,
@@ -153,9 +233,14 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
    getOpenerForFileRef,
    setOpenerForExtension,
    t,
+    listSftp,
+    mkdirLocal,
+    deleteLocalFile,
    showSaveDialog,
+    selectDirectory,
    startStreamTransfer,
    getSftpIdForConnection: sftp.getSftpIdForConnection,
+    listLocalFiles: listLocalDir,
  });

  const {
@@ -183,17 +268,12 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
  // Maps tab IDs to the connectionKey used to create them, so we can
  // correctly identify tabs when the same host ID has different overrides.
  const tabConnectionKeyMapRef = useRef<Map<string, string>>(new Map());
-  const pendingConnectionKeyRef = useRef<string | null>(null);
-  const prevIsVisibleRef = useRef(isVisible);

-  // Reset location guard when the panel is reopened so the terminal cwd
-  // is re-applied even if it matches the previous session's path.
-  useEffect(() => {
-    if (isVisible && !prevIsVisibleRef.current) {
-      lastAppliedInitialLocationKeyRef.current = null;
-    }
-    prevIsVisibleRef.current = isVisible;
-  }, [isVisible]);
+  // NOTE: We intentionally do NOT reset lastAppliedInitialLocationKeyRef on
+  // visibility changes. When the user switches terminal tabs, the panel
+  // toggles isVisible but should preserve its navigation state (the user may
+  // have navigated away from initialLocation). When the panel is truly
+  // closed, the component unmounts and all refs are naturally reset.

  // Navigate SFTP to the terminal's current working directory
  const handleGoToTerminalCwd = useCallback(async () => {
@@ -206,14 +286,12 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({

  // Track whether there's active work that should block connection switching.
  // Computed outside the effect so it can be in the dependency array.
-  const hasActiveTransfers = useMemo(
-    () => sftp.transfers.some((t) => t.status === "pending" || t.status === "transferring"),
-    [sftp.transfers],
-  );
-  // Block host-following while any connection-sensitive UI or operation
-  // is active: text editor, permissions dialog, file-opener dialog, or
+  // Block host-following while any connection-sensitive interactive UI is
+  // active: text editor, permissions dialog, file-opener dialog, or
  // auto-synced external file watches.
-  const hasActiveWork = hasActiveTransfers || showTextEditor || !!permissionsState || showFileOpenerDialog
+  // Note: transfers are NOT included here — they run on their own sftpId
+  // independent of the active tab, and forceNewTab preserves old connections.
+  const hasActiveWork = showTextEditor || !!permissionsState || showFileOpenerDialog
    || (sftp.activeFileWatchCountRef?.current ?? 0) > 0;

  useEffect(() => {
@@ -298,28 +376,24 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
      return;
    }

-    // Create a new tab when there's already an active connection to a different
-    // host, so the previous tab is preserved for instant switching on focus change.
+    // Create a new tab when there's already an active connection, so the
+    // previous tab is preserved for instant switching on focus change.
+    // This covers both different hosts AND same host with different
+    // session-time overrides (port/protocol), preventing the old SFTP
+    // session from being closed while it may have in-flight transfers.
    const currentConn = s.leftPane.connection;
-    const needsNewTab = !!(currentConn && currentConn.status === "connected" && currentConn.hostId !== activeHost.id);
+    const needsNewTab = !!(currentConn && currentConn.status === "connected");

    connectedKeyRef.current = connectionKey;
    connectedHostObjRef.current = activeHost;
-    // Store the pending key so the effect below can map it once the tab is created
-    pendingConnectionKeyRef.current = connectionKey;
-    s.connect("left", activeHost, needsNewTab ? { forceNewTab: true } : undefined);
+    s.connect("left", activeHost, {
+      ...(needsNewTab ? { forceNewTab: true } : undefined),
+      onTabCreated: (tabId) => {
+        tabConnectionKeyMapRef.current.set(tabId, connectionKey);
+      },
+    });
  }, [activeHost, hasActiveWork]); // Re-evaluate when work finishes so deferred switch can proceed

-  // Track the active tab's connectionKey after connect() creates or reuses it.
-  // Watches both activeTabId (new tab) and connection status (reused tab reconnecting).
-  useEffect(() => {
-    const activeTabId = sftp.leftTabs.activeTabId;
-    if (activeTabId && pendingConnectionKeyRef.current) {
-      tabConnectionKeyMapRef.current.set(activeTabId, pendingConnectionKeyRef.current);
-      pendingConnectionKeyRef.current = null;
-    }
-  }, [sftp.leftTabs.activeTabId, sftp.leftPane.connection?.status]);
-
  // Clear the remembered connection key when the pane disconnects or the
  // session is lost, so re-opening SFTP for the same terminal reconnects.
  // Also reset the file-watch counter — watches are bound to the SFTP session,
@@ -425,10 +499,20 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
  ]);

  const MAX_VISIBLE_TRANSFERS = 5;
-  const visibleTransfers = useMemo(
-    () => [...sftp.transfers].reverse().slice(0, MAX_VISIBLE_TRANSFERS),
-    [sftp.transfers],
-  );
+  const visibleTransfers = useMemo(() => {
+    const connection = sftp.leftPane.connection;
+    if (!connection) return [];
+    // Filter transfers to those relevant to the active connection's host,
+    // so workspace focus switches don't show transfers from other hosts.
+    const filtered = sftp.transfers.filter((t) => {
+      if (t.parentTaskId) return false; // Child tasks rendered by SftpTransferQueue
+      if (connection.isLocal) {
+        return t.sourceConnectionId === connection.id || t.targetConnectionId === connection.id;
+      }
+      return t.targetHostId === connection.hostId || t.sourceConnectionId === connection.id || t.targetConnectionId === connection.id;
+    });
+    return [...filtered].reverse().slice(0, MAX_VISIBLE_TRANSFERS);
+  }, [sftp.transfers, sftp.leftPane.connection]);

  const handleRevealTransferTarget = useCallback(
    async (task: TransferTask) => {
@@ -494,9 +578,11 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
      rightCallbacks={rightCallbacks}
    >
      <div
+        ref={panelRootRef}
        className="h-full flex flex-col bg-background overflow-hidden"
        style={isVisible ? undefined : { display: "none" }}
        aria-hidden={!isVisible}
+        onClick={handlePaneFocus}
      >
        {showWorkspaceHostHeader && displayHost && (
          <div className="shrink-0 border-b border-border/50 bg-muted/20 px-3 py-1.5">
@@ -509,7 +595,7 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
              />
              <div
                className="min-w-0 flex-1 max-w-[calc(100%-1.75rem)] text-[11px] leading-5 truncate"
-                title={`${displayHost.label} · ${(displayHost.username || "root")}@${displayHost.hostname}:${displayHost.port || 22}`}
+                title={`${displayHost.label} · ${(displayHost.username || "root")}@${formatHostPort(displayHost.hostname, displayHost.port || 22)}`}
              >
                <span className="font-medium">
                  {displayHost.label}
@@ -536,8 +622,12 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
                <SftpPaneView
                  side="left"
                  pane={pane}
+                  dialogActionScopeId={dialogActionScopeIdRef.current}
+                  isPaneFocused={isVisible && hasPaneFocus}
+                  sftpDefaultViewMode={sftpDefaultViewMode}
                  showHeader
                  showEmptyHeader
+                  forceActive
                  onToggleShowHiddenFiles={() => handleToggleHiddenFiles(pane.id)}
                  onGoToTerminalCwd={onGetTerminalCwd ? handleGoToTerminalCwd : undefined}
                />
@@ -548,6 +638,7 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
        <SftpTransferQueue
          sftp={sftp}
          visibleTransfers={visibleTransfers}
+          allTransfers={sftp.transfers}
          canRevealTransferTarget={canRevealTransferTarget}
          onRevealTransferTarget={handleRevealTransferTarget}
        />
@@ -580,6 +671,8 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
          handleSaveTextFile={handleSaveTextFile}
          editorWordWrap={editorWordWrap}
          setEditorWordWrap={setEditorWordWrap}
+          hotkeyScheme={hotkeyScheme}
+          keyBindings={keyBindings}
          showFileOpenerDialog={showFileOpenerDialog}
          setShowFileOpenerDialog={setShowFileOpenerDialog}
          fileOpenerTarget={fileOpenerTarget}
@@ -598,6 +691,7 @@ const sidePanelAreEqual = (prev: SftpSidePanelProps, next: SftpSidePanelProps):
  prev.keys === next.keys &&
  prev.identities === next.identities &&
  prev.updateHosts === next.updateHosts &&
+  prev.sftpDefaultViewMode === next.sftpDefaultViewMode &&
  prev.activeHost === next.activeHost &&
  prev.showWorkspaceHostHeader === next.showWorkspaceHostHeader &&
  prev.isVisible === next.isVisible &&
@@ -608,6 +702,8 @@ const sidePanelAreEqual = (prev: SftpSidePanelProps, next: SftpSidePanelProps):
  prev.sftpAutoSync === next.sftpAutoSync &&
  prev.sftpShowHiddenFiles === next.sftpShowHiddenFiles &&
  prev.sftpUseCompressedUpload === next.sftpUseCompressedUpload &&
+  prev.hotkeyScheme === next.hotkeyScheme &&
+  prev.keyBindings === next.keyBindings &&
  prev.editorWordWrap === next.editorWordWrap &&
  prev.setEditorWordWrap === next.setEditorWordWrap &&
  prev.onGetTerminalCwd === next.onGetTerminalCwd &&
--- a/components/SftpView.tsx
+++ b/components/SftpView.tsx
@@ -19,11 +19,13 @@ import { useI18n } from "../application/i18n/I18nProvider";
 import { useIsSftpActive } from "../application/state/activeTabStore";
 import { useSftpState } from "../application/state/useSftpState";
 import { useSftpBackend } from "../application/state/useSftpBackend";
-import { useSettingsState } from "../application/state/useSettingsState";
+import { HotkeyScheme, KeyBinding } from "../domain/models";
 import { logger } from "../lib/logger";
 import { useRenderTracker } from "../lib/useRenderTracker";
 import { cn } from "../lib/utils";
+import { useInstantThemeSwitch } from "../lib/useInstantThemeSwitch";
 import { Host, Identity, SSHKey } from "../types";
+import { resolveGroupDefaults, applyGroupDefaults } from "../domain/groupConfig";
 import { useSftpFileAssociations } from "../application/state/useSftpFileAssociations";
 import { toast } from "./ui/toast";

@@ -39,6 +41,8 @@ import { useSftpViewPaneCallbacks } from "./sftp/hooks/useSftpViewPaneCallbacks"
 import { useSftpViewTabs } from "./sftp/hooks/useSftpViewTabs";
 import { useSftpKeyboardShortcuts } from "./sftp/hooks/useSftpKeyboardShortcuts";
 import { sftpFocusStore, SftpFocusedSide, useSftpFocusedSide } from "./sftp/hooks/useSftpFocusedPane";
+import { keepOnlyActivePaneSelections, keepOnlyPaneSelections } from "./sftp/hooks/selectionScope";
+

 // Wrapper component that subscribes to activeTabId for CSS visibility
 // This isolates the activeTabId subscription - only this component re-renders on tab switch
@@ -48,22 +52,41 @@ interface SftpViewProps {
  hosts: Host[];
  keys: SSHKey[];
  identities: Identity[];
+  groupConfigs?: import('../domain/models').GroupConfig[];
  updateHosts: (hosts: Host[]) => void;
+  sftpDefaultViewMode: "list" | "tree";
+  sftpDoubleClickBehavior: "open" | "transfer";
+  sftpAutoSync: boolean;
+  sftpShowHiddenFiles: boolean;
+  sftpUseCompressedUpload: boolean;
+  hotkeyScheme: HotkeyScheme;
+  keyBindings: KeyBinding[];
+  editorWordWrap: boolean;
+  setEditorWordWrap: (enabled: boolean) => void;
 }

-const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updateHosts }) => {
+const SftpViewInner: React.FC<SftpViewProps> = ({
+  hosts,
+  keys,
+  identities,
+  groupConfigs = [],
+  updateHosts,
+  sftpDefaultViewMode,
+  sftpDoubleClickBehavior,
+  sftpAutoSync,
+  sftpShowHiddenFiles,
+  sftpUseCompressedUpload,
+  hotkeyScheme,
+  keyBindings,
+  editorWordWrap,
+  setEditorWordWrap,
+}) => {
  const { t } = useI18n();
  const isActive = useIsSftpActive();
-  const {
-    sftpDoubleClickBehavior,
-    sftpAutoSync,
-    sftpShowHiddenFiles,
-    sftpUseCompressedUpload,
-    hotkeyScheme,
-    keyBindings,
-    editorWordWrap,
-    setEditorWordWrap,
-  } = useSettingsState();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const dialogActionScopeIdRef = useRef("sftp-main-view");
+
+  useInstantThemeSwitch(rootRef);

  // File watch event handlers (stable refs to avoid re-creating the useSftpState options)
  const fileWatchHandlers = useMemo(() => ({
@@ -84,10 +107,28 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
    defaultShowHiddenFiles: sftpShowHiddenFiles,
  }), [fileWatchHandlers, sftpUseCompressedUpload, sftpShowHiddenFiles]);

-  const sftp = useSftpState(hosts, keys, identities, sftpOptions);
+  // Pre-resolve group defaults so SFTP connections inherit group config
+  const effectiveHosts = useMemo(() =>
+    hosts.map(h => {
+      if (!h.group) return h;
+      const defaults = resolveGroupDefaults(h.group, groupConfigs);
+      return applyGroupDefaults(h, defaults);
+    }),
+    [hosts, groupConfigs],
+  );

-  // Get stream transfer functions for optimized downloads
-  const { showSaveDialog, startStreamTransfer } = useSftpBackend();
+  const sftp = useSftpState(effectiveHosts, keys, identities, sftpOptions);
+
+  // Get backend helpers for file downloads and local filesystem writes.
+  const {
+    showSaveDialog,
+    selectDirectory,
+    startStreamTransfer,
+    listSftp,
+    mkdirLocal,
+    deleteLocalFile,
+    listLocalDir,
+  } = useSftpBackend();

  // Store sftp in a ref so callbacks can access the latest instance
  // without needing to re-create when sftp changes
@@ -107,6 +148,7 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
    keyBindings,
    hotkeyScheme,
    sftpRef,
+    dialogActionScopeId: dialogActionScopeIdRef.current,
    isActive,
  });

@@ -114,8 +156,18 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
  const focusedSide = useSftpFocusedSide();

  // Handle pane focus when clicking on a pane container
-  const handlePaneFocus = useCallback((side: SftpFocusedSide) => {
+  // Clear the opposite side's selection so file operations only affect the focused pane
+  const handlePaneFocus = useCallback((side: SftpFocusedSide, targetTabId?: string) => {
+    const prevSide = sftpFocusStore.getFocusedSide();
    sftpFocusStore.setFocusedSide(side);
+    if (prevSide !== side) {
+      if (targetTabId) {
+        keepOnlyPaneSelections(sftpRef.current, { side, tabId: targetTabId });
+      } else {
+        // Focus side changed — clear other panes but keep the newly focused pane intact.
+        keepOnlyActivePaneSelections(sftpRef.current, side);
+      }
+    }
  }, []);

  const handleToggleHiddenFiles = useCallback((side: "left" | "right", paneId: string) => {
@@ -176,13 +228,18 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
    getOpenerForFileRef,
    setOpenerForExtension,
    t,
+    listSftp,
+    mkdirLocal,
+    deleteLocalFile,
    showSaveDialog,
+    selectDirectory,
    startStreamTransfer,
    getSftpIdForConnection: sftp.getSftpIdForConnection,
+    listLocalFiles: listLocalDir,
  });

  const visibleTransfers = useMemo(
-    () => [...sftp.transfers].reverse().slice(0, 5),
+    () => [...sftp.transfers].filter((t) => !t.parentTaskId).reverse().slice(0, 5),
    [sftp.transfers],
  );

@@ -225,6 +282,26 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
    handleHostSelectRight,
  } = useSftpViewTabs({ sftp, sftpRef });

+  const handleAddTabLeftWithFocus = useCallback(() => {
+    const tabId = handleAddTabLeft();
+    handlePaneFocus("left", tabId);
+  }, [handleAddTabLeft, handlePaneFocus]);
+
+  const handleAddTabRightWithFocus = useCallback(() => {
+    const tabId = handleAddTabRight();
+    handlePaneFocus("right", tabId);
+  }, [handleAddTabRight, handlePaneFocus]);
+
+  const handleSelectTabLeftWithFocus = useCallback((tabId: string) => {
+    handleSelectTabLeft(tabId);
+    handlePaneFocus("left", tabId);
+  }, [handlePaneFocus, handleSelectTabLeft]);
+
+  const handleSelectTabRightWithFocus = useCallback((tabId: string) => {
+    handleSelectTabRight(tabId);
+    handlePaneFocus("right", tabId);
+  }, [handlePaneFocus, handleSelectTabRight]);
+
  return (
    <SftpContextProvider
      hosts={hosts}
@@ -235,6 +312,7 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
      rightCallbacks={rightCallbacks}
    >
      <div
+        ref={rootRef}
        className={cn(
          "absolute inset-0 min-h-0 flex flex-col",
          isActive ? "z-20" : "",
@@ -264,9 +342,9 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
              <SftpTabBar
                tabs={leftTabsInfo}
                side="left"
-                onSelectTab={handleSelectTabLeft}
+                onSelectTab={handleSelectTabLeftWithFocus}
                onCloseTab={handleCloseTabLeft}
-                onAddTab={handleAddTabLeft}
+                onAddTab={handleAddTabLeftWithFocus}
                onReorderTabs={handleReorderTabsLeft}
                onMoveTabToOtherSide={handleMoveTabFromRightToLeft}
              />
@@ -282,6 +360,9 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
                  <SftpPaneView
                    side="left"
                    pane={pane}
+                    dialogActionScopeId={dialogActionScopeIdRef.current}
+                    isPaneFocused={focusedSide === "left"}
+                    sftpDefaultViewMode={sftpDefaultViewMode}
                    showHeader
                    showEmptyHeader={false}
                    onToggleShowHiddenFiles={() => handleToggleHiddenFiles("left", pane.id)}
@@ -321,9 +402,9 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
              <SftpTabBar
                tabs={rightTabsInfo}
                side="right"
-                onSelectTab={handleSelectTabRight}
+                onSelectTab={handleSelectTabRightWithFocus}
                onCloseTab={handleCloseTabRight}
-                onAddTab={handleAddTabRight}
+                onAddTab={handleAddTabRightWithFocus}
                onReorderTabs={handleReorderTabsRight}
                onMoveTabToOtherSide={handleMoveTabFromLeftToRight}
              />
@@ -339,6 +420,9 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
                  <SftpPaneView
                    side="right"
                    pane={pane}
+                    dialogActionScopeId={dialogActionScopeIdRef.current}
+                    isPaneFocused={focusedSide === "right"}
+                    sftpDefaultViewMode={sftpDefaultViewMode}
                    showHeader
                    showEmptyHeader={false}
                    onToggleShowHiddenFiles={() => handleToggleHiddenFiles("right", pane.id)}
@@ -383,6 +467,8 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
          handleSaveTextFile={handleSaveTextFile}
          editorWordWrap={editorWordWrap}
          setEditorWordWrap={setEditorWordWrap}
+          hotkeyScheme={hotkeyScheme}
+          keyBindings={keyBindings}
          showFileOpenerDialog={showFileOpenerDialog}
          setShowFileOpenerDialog={setShowFileOpenerDialog}
          fileOpenerTarget={fileOpenerTarget}
@@ -397,7 +483,19 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
 };

 const sftpViewAreEqual = (prev: SftpViewProps, next: SftpViewProps): boolean =>
-  prev.hosts === next.hosts && prev.keys === next.keys && prev.identities === next.identities;
+  prev.hosts === next.hosts &&
+  prev.keys === next.keys &&
+  prev.identities === next.identities &&
+  prev.groupConfigs === next.groupConfigs &&
+  prev.sftpDefaultViewMode === next.sftpDefaultViewMode &&
+  prev.sftpDoubleClickBehavior === next.sftpDoubleClickBehavior &&
+  prev.sftpAutoSync === next.sftpAutoSync &&
+  prev.sftpShowHiddenFiles === next.sftpShowHiddenFiles &&
+  prev.sftpUseCompressedUpload === next.sftpUseCompressedUpload &&
+  prev.hotkeyScheme === next.hotkeyScheme &&
+  prev.keyBindings === next.keyBindings &&
+  prev.editorWordWrap === next.editorWordWrap &&
+  prev.setEditorWordWrap === next.setEditorWordWrap;

 export const SftpView = memo(SftpViewInner, sftpViewAreEqual);
 SftpView.displayName = "SftpView";
--- a/components/SnippetsManager.tsx
+++ b/components/SnippetsManager.tsx
@@ -28,6 +28,7 @@ interface SnippetsManagerProps {
  hotkeyScheme: HotkeyScheme;
  keyBindings: KeyBinding[];
  onSave: (snippet: Snippet) => void;
+  onBulkSave: (snippets: Snippet[]) => void;
  onDelete: (id: string) => void;
  onPackagesChange: (packages: string[]) => void;
  onRunSnippet?: (snippet: Snippet, targetHosts: Host[]) => void;
@@ -51,6 +52,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
  hotkeyScheme,
  keyBindings,
  onSave,
+  onBulkSave,
  onDelete,
  onPackagesChange,
  onRunSnippet,
@@ -300,6 +302,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
        package: editingSnippet.package || '',
        targets: targetSelection,
        shortkey: editingSnippet.shortkey,
+        noAutoRun: editingSnippet.noAutoRun,
      });
      setRightPanelMode('none');
    }
@@ -436,8 +439,8 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
    const name = newPackageName.trim();
    if (!name) return;
    
-    // Allow leading slash and validate the rest - allow hyphens anywhere in package names
-    if (!/^\/?([\w-]+(\/[\w-]+)*)\/?$/.test(name)) {
+    // Allow leading slash and validate the rest - allow hyphens and Unicode letters/numbers
+    if (!/^\/?([\w\p{L}\p{N}-]+(\/[\w\p{L}\p{N}-]+)*)\/?$/u.test(name)) {
      // Could add toast notification here for invalid characters
      return;
    }
@@ -486,11 +489,8 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
    // Update packages first, then save snippets
    onPackagesChange(keep);
    
-    // Only save snippets that were actually modified
-    const modifiedSnippets = updatedSnippets.filter((s, index) => 
-      s.package !== snippets[index].package
-    );
-    modifiedSnippets.forEach(onSave);
+    // Bulk-save all snippets to avoid stale-closure overwrites
+    onBulkSave(updatedSnippets);
    
    // Reset selected package if it was deleted
    if (selectedPackage && (selectedPackage === path || selectedPackage.startsWith(path + '/'))) {
@@ -527,7 +527,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
    });

    onPackagesChange(Array.from(new Set(updatedPackages)));
-    updatedSnippets.forEach(onSave);
+    onBulkSave(updatedSnippets);
    if (selectedPackage === source) setSelectedPackage(newPath);
  };

@@ -550,9 +550,9 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
      return;
    }

-    // Validate: same rules as createPackage - only allow letters, numbers, hyphens, underscores
+    // Validate: same rules as createPackage - allow Unicode letters, numbers, hyphens, underscores
    // Since we're renaming a single segment (no slashes allowed), use the segment-level pattern
-    if (!/^[\w-]+$/.test(newName)) {
+    if (!/^[\w\p{L}\p{N}-]+$/u.test(newName)) {
      setRenameError(t('snippets.renameDialog.error.invalidChars'));
      return;
    }
@@ -568,8 +568,8 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
      return;
    }

-    // Validate: duplicate (case-insensitive)
-    const existingPackage = packages.find(p => p.toLowerCase() === newPath.toLowerCase());
+    // Validate: duplicate (case-insensitive), excluding the package being renamed
+    const existingPackage = packages.find(p => p !== renamingPackagePath && p.toLowerCase() === newPath.toLowerCase());
    if (existingPackage) {
      setRenameError(t('snippets.renameDialog.error.duplicate'));
      return;
@@ -595,7 +595,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
    });

    onPackagesChange(Array.from(new Set(updatedPackages)));
-    updatedSnippets.forEach(onSave);
+    onBulkSave(updatedSnippets);

    // Update selected package if it was renamed
    if (selectedPackage === renamingPackagePath) {
@@ -792,6 +792,17 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
              />
            </Card>

+            {/* No Auto Run */}
+            <label className="flex items-center gap-2 cursor-pointer px-1">
+              <input
+                type="checkbox"
+                checked={editingSnippet.noAutoRun ?? false}
+                onChange={(e) => setEditingSnippet({ ...editingSnippet, noAutoRun: e.target.checked || undefined })}
+                className="rounded border-input"
+              />
+              <span className="text-xs text-muted-foreground">{t('snippets.field.noAutoRun')}</span>
+            </label>
+
            {/* Shortkey */}
            <Card className="p-3 space-y-2 bg-card border-border/80">
              <div className="flex items-center justify-between">
@@ -1192,7 +1203,6 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
                value={newPackageName}
                onChange={(e) => setNewPackageName(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && createPackage()}
-                pattern="^/?([\w-]+(/[\w-]+)*)?/?$"
                title="Package names can contain letters, numbers, hyphens, underscores, and forward slashes. Can optionally start with /"
              />
              <p className="text-[11px] text-muted-foreground">{t('snippets.packageDialog.hint')}</p>
--- a/components/Terminal.tsx
+++ b/components/Terminal.tsx
--- a/components/TerminalLayer.tsx
+++ b/components/TerminalLayer.tsx
--- a/components/TextEditorModal.tsx
+++ b/components/TextEditorModal.tsx
@@ -20,6 +20,7 @@ loader.config({ paths: { vs: monacoBasePath } });

 import { useI18n } from '../application/i18n/I18nProvider';
 import { useClipboardBackend } from '../application/state/useClipboardBackend';
+import { HotkeyScheme, KeyBinding, matchesKeyBinding } from '../domain/models';
 import { getLanguageId, getLanguageName, getSupportedLanguages } from '../lib/sftpFileUtils';
 import { Button } from './ui/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
@@ -34,6 +35,8 @@ interface TextEditorModalProps {
  onSave: (content: string) => Promise<void>;
  editorWordWrap: boolean;
  onToggleWordWrap: () => void;
+  hotkeyScheme: HotkeyScheme;
+  keyBindings: KeyBinding[];
 }

 // Map our language IDs to Monaco language IDs
@@ -122,12 +125,38 @@ const hslToHex = (hslString: string): string => {
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 };

-// Get background color from CSS variable
-const getBackgroundColor = (): string => {
-  const bgValue = getComputedStyle(document.documentElement)
-    .getPropertyValue('--background')
+// Read a CSS custom-property and convert from HSL to hex
+const getCssColor = (varName: string, fallback: string): string => {
+  const value = getComputedStyle(document.documentElement)
+    .getPropertyValue(varName)
    .trim();
-  return bgValue ? hslToHex(bgValue) : '#1e1e1e';
+  return value ? hslToHex(value) : fallback;
+};
+
+interface EditorColors {
+  bg: string;
+  fg: string;
+  primary: string;
+  card: string;
+  mutedFg: string;
+  border: string;
+}
+
+/** Read all UI CSS variables that matter for the Monaco theme. */
+const getEditorColors = (isDark: boolean): EditorColors => ({
+  bg: getCssColor('--background', isDark ? '#1e1e1e' : '#ffffff'),
+  fg: getCssColor('--foreground', isDark ? '#d4d4d4' : '#1e1e1e'),
+  primary: getCssColor('--primary', isDark ? '#569cd6' : '#0078d4'),
+  card: getCssColor('--card', isDark ? '#252526' : '#f3f3f3'),
+  mutedFg: getCssColor('--muted-foreground', isDark ? '#858585' : '#858585'),
+  border: getCssColor('--border', isDark ? '#3c3c3c' : '#d4d4d4'),
+});
+
+/** Build a fingerprint string so we can detect immersive-mode color changes cheaply. */
+const getThemeSignal = (): string => {
+  const root = document.documentElement;
+  return root.dataset.immersiveTheme
+    ?? getComputedStyle(root).getPropertyValue('--background').trim();
 };

 export const TextEditorModal: React.FC<TextEditorModalProps> = ({
@@ -138,6 +167,8 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
  onSave,
  editorWordWrap,
  onToggleWordWrap,
+  hotkeyScheme,
+  keyBindings,
 }) => {
  const { t } = useI18n();
  const { readClipboardText: readClipboardTextFromBridge } = useClipboardBackend();
@@ -151,55 +182,71 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
  // Ref to store the latest save function to avoid stale closure in keyboard shortcut
  const handleSaveRef = useRef<() => Promise<void>>(() => Promise.resolve());
  const handlePasteRef = useRef<() => Promise<void>>(() => Promise.resolve());
+  const readClipboardTextRef = useRef<() => Promise<string | null>>(() => Promise.resolve(null));

  // Track theme from document.documentElement class (syncs with app theme)
  const [isDarkTheme, setIsDarkTheme] = useState(() =>
    document.documentElement.classList.contains('dark')
  );

-  // Track background color for custom theme
-  const [bgColor, setBgColor] = useState(() => getBackgroundColor());
+  // Track a signal that changes whenever immersive-mode or base theme colors change
+  const [themeSignal, setThemeSignal] = useState(() => getThemeSignal());

  // Custom theme name
  const customThemeName = isDarkTheme ? 'netcatty-dark' : 'netcatty-light';

-  // Define and update custom Monaco themes based on UI background color
+  // Define and update custom Monaco themes — syncs with immersive-mode / base UI colors
  useEffect(() => {
    if (!monaco) return;

-    // Define dark theme with custom background
+    const colors = getEditorColors(isDarkTheme);
+
+    const themeColors: Record<string, string> = {
+      'editor.background': colors.bg,
+      'editor.foreground': colors.fg,
+      'editorCursor.foreground': colors.primary,
+      'editor.selectionBackground': colors.primary + '40',
+      'editor.inactiveSelectionBackground': colors.primary + '25',
+      'editorLineNumber.foreground': colors.mutedFg,
+      'editorLineNumber.activeForeground': colors.fg,
+      'editor.lineHighlightBackground': colors.fg + '08',
+      'editorWidget.background': colors.card,
+      'editorWidget.foreground': colors.fg,
+      'editorWidget.border': colors.border,
+      'input.background': colors.card,
+      'input.foreground': colors.fg,
+      'input.border': colors.border,
+    };
+
    monaco.editor.defineTheme('netcatty-dark', {
      base: 'vs-dark',
      inherit: true,
      rules: [],
-      colors: {
-        'editor.background': bgColor,
-      },
+      colors: themeColors,
    });

-    // Define light theme with custom background
    monaco.editor.defineTheme('netcatty-light', {
      base: 'vs',
      inherit: true,
      rules: [],
-      colors: {
-        'editor.background': bgColor,
-      },
+      colors: themeColors,
    });

-    // Apply the current theme
    monaco.editor.setTheme(customThemeName);
-  }, [monaco, isDarkTheme, bgColor, customThemeName]);
+  }, [monaco, isDarkTheme, themeSignal, customThemeName]);

-  // Listen for theme changes via MutationObserver on <html> class and style
+  // Listen for theme changes via MutationObserver on <html> class, style, and immersive data attr
  useEffect(() => {
    const root = document.documentElement;
    const updateTheme = () => {
      setIsDarkTheme(root.classList.contains('dark'));
-      setBgColor(getBackgroundColor());
+      setThemeSignal(getThemeSignal());
    };
    const observer = new MutationObserver(updateTheme);
-    observer.observe(root, { attributes: true, attributeFilter: ['class', 'style'] });
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: ['class', 'style', 'data-immersive-theme'],
+    });
    return () => observer.disconnect();
  }, []);

@@ -215,6 +262,11 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
    setHasChanges(content !== initialContent);
  }, [content, initialContent]);

+  const closeTabBinding = useMemo(
+    () => keyBindings.find((binding) => binding.action === 'closeTab'),
+    [keyBindings],
+  );
+
  const handleSave = useCallback(async () => {
    if (saving) return;
    setSaving(true);
@@ -254,6 +306,10 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
    }
  }, [readClipboardTextFromBridge]);

+  useEffect(() => {
+    readClipboardTextRef.current = readClipboardText;
+  }, [readClipboardText]);
+
  const handlePaste = useCallback(async () => {
    const editor = editorRef.current;
    if (!editor) return;
@@ -316,11 +372,59 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
    });

    // Fallback paste path for Electron environments where Monaco paste can fail.
+    // Skip custom paste when focus is inside the find/replace widget so that
+    // its input fields receive the pasted text via default browser behavior.
    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyV, () => {
+      const active = document.activeElement;
+      if (active?.closest('.find-widget')) {
+        // Read clipboard and insert into the find/replace input field.
+        void (async () => {
+          try {
+            const text = await readClipboardTextRef.current();
+            if (!text) return;
+            // Monaco find widget inputs are <textarea> elements inside .monaco-inputbox
+            if (active instanceof HTMLTextAreaElement || active instanceof HTMLInputElement) {
+              const start = active.selectionStart ?? active.value.length;
+              const end = active.selectionEnd ?? active.value.length;
+              active.focus();
+              active.setSelectionRange(start, end);
+              document.execCommand('insertText', false, text);
+            }
+          } catch {
+            // Ignore – paste simply won't work
+          }
+        })();
+        return;
+      }
      void handlePasteRef.current();
    });
+
+    editor.focus();
  }, []);

+  useEffect(() => {
+    if (!open) return;
+
+    const frame = window.requestAnimationFrame(() => {
+      editorRef.current?.focus();
+    });
+
+    return () => window.cancelAnimationFrame(frame);
+  }, [open]);
+
+  const handleDialogKeyDownCapture = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (hotkeyScheme === 'disabled' || !closeTabBinding) return;
+
+    const isMac = hotkeyScheme === 'mac';
+    const keyStr = isMac ? closeTabBinding.mac : closeTabBinding.pc;
+    if (!matchesKeyBinding(e.nativeEvent, keyStr, isMac)) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+    e.nativeEvent.stopPropagation();
+    handleClose();
+  }, [closeTabBinding, handleClose, hotkeyScheme]);
+
  // Trigger search dialog
  const handleSearch = useCallback(() => {
    if (editorRef.current) {
@@ -342,7 +446,12 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({

  return (
    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
-      <DialogContent className="max-w-5xl h-[85vh] flex flex-col p-0 gap-0" hideCloseButton>
+      <DialogContent
+        className="max-w-5xl h-[85vh] flex flex-col p-0 gap-0"
+        hideCloseButton
+        data-hotkey-close-tab="true"
+        onKeyDownCapture={handleDialogKeyDownCapture}
+      >
        {/* Header */}
        <DialogHeader className="px-4 py-3 border-b border-border/60 flex-shrink-0">
          <div className="flex items-center justify-between gap-4">
--- a/components/ThemeList.tsx
+++ b/components/ThemeList.tsx
@@ -0,0 +1,124 @@
+/**
+ * Shared theme list component used by both ThemeSelectPanel and ThemeSelectModal
+ */
+import React, { memo, useMemo } from 'react';
+import { Check } from 'lucide-react';
+import { useI18n } from '../application/i18n/I18nProvider';
+import { TERMINAL_THEMES } from '../infrastructure/config/terminalThemes';
+import { useCustomThemes } from '../application/state/customThemeStore';
+import { cn } from '../lib/utils';
+import { TerminalTheme } from '../types';
+
+// Memoized theme item component
+export const ThemeItem = memo(({
+    theme,
+    isSelected,
+    onSelect
+}: {
+    theme: TerminalTheme;
+    isSelected: boolean;
+    onSelect: (id: string) => void;
+}) => (
+    <button
+        onClick={() => onSelect(theme.id)}
+        className={cn(
+            'w-full flex items-center gap-3 px-3 py-2.5 text-left transition-all',
+            isSelected
+                ? 'bg-primary/10'
+                : 'hover:bg-muted'
+        )}
+    >
+        {/* Color swatch preview */}
+        <div
+            className="w-12 h-8 rounded-[4px] flex-shrink-0 flex flex-col justify-center items-start pl-1.5 gap-0.5 border border-border/50"
+            style={{ backgroundColor: theme.colors.background }}
+        >
+            <div className="h-1 w-4 rounded-full" style={{ backgroundColor: theme.colors.green }} />
+            <div className="h-1 w-6 rounded-full" style={{ backgroundColor: theme.colors.blue }} />
+            <div className="h-1 w-3 rounded-full" style={{ backgroundColor: theme.colors.yellow }} />
+        </div>
+        <div className="flex-1 min-w-0">
+            <div className={cn('text-sm font-medium truncate', isSelected ? 'text-primary' : 'text-foreground')}>
+                {theme.name}
+            </div>
+            <div className="text-[10px] text-muted-foreground capitalize">{theme.type}</div>
+        </div>
+        {isSelected && (
+            <Check size={16} className="text-primary flex-shrink-0" />
+        )}
+    </button>
+));
+ThemeItem.displayName = 'ThemeItem';
+
+interface ThemeListProps {
+    selectedThemeId: string;
+    onSelect: (themeId: string) => void;
+}
+
+export const ThemeList: React.FC<ThemeListProps> = ({ selectedThemeId, onSelect }) => {
+    const { t } = useI18n();
+    const customThemes = useCustomThemes();
+
+    const { darkThemes, lightThemes } = useMemo(() => {
+        const dark = TERMINAL_THEMES.filter(t => t.type === 'dark');
+        const light = TERMINAL_THEMES.filter(t => t.type === 'light');
+        return { darkThemes: dark, lightThemes: light };
+    }, []);
+
+    return (
+        <>
+            {/* Dark Themes Section */}
+            <div className="mb-4">
+                <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-semibold px-3">
+                    {t('settings.terminal.themeModal.darkThemes')}
+                </div>
+                <div className="space-y-1">
+                    {darkThemes.map(theme => (
+                        <ThemeItem
+                            key={theme.id}
+                            theme={theme}
+                            isSelected={selectedThemeId === theme.id}
+                            onSelect={onSelect}
+                        />
+                    ))}
+                </div>
+            </div>
+
+            {/* Light Themes Section */}
+            <div>
+                <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-semibold px-3">
+                    {t('settings.terminal.themeModal.lightThemes')}
+                </div>
+                <div className="space-y-1">
+                    {lightThemes.map(theme => (
+                        <ThemeItem
+                            key={theme.id}
+                            theme={theme}
+                            isSelected={selectedThemeId === theme.id}
+                            onSelect={onSelect}
+                        />
+                    ))}
+                </div>
+            </div>
+
+            {/* Custom Themes Section */}
+            {customThemes.length > 0 && (
+                <div className="mt-4">
+                    <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-semibold px-3">
+                        {t('terminal.customTheme.section')}
+                    </div>
+                    <div className="space-y-1">
+                        {customThemes.map(theme => (
+                            <ThemeItem
+                                key={theme.id}
+                                theme={theme}
+                                isSelected={selectedThemeId === theme.id}
+                                onSelect={onSelect}
+                            />
+                        ))}
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};
--- a/components/ThemeSelectPanel.tsx
+++ b/components/ThemeSelectPanel.tsx
@@ -1,13 +1,10 @@
-import React, { useMemo, useState } from 'react';
-import { TERMINAL_THEMES } from '../infrastructure/config/terminalThemes';
-import { useCustomThemes } from '../application/state/customThemeStore';
-import { cn } from '../lib/utils';
-import { TerminalTheme } from '../types';
+import React from 'react';
 import {
    AsidePanel,
    AsidePanelContent,
 } from './ui/aside-panel';
 import { ScrollArea } from './ui/scroll-area';
+import { ThemeList } from './ThemeList';

 interface ThemeSelectPanelProps {
    open: boolean;
@@ -18,40 +15,6 @@ interface ThemeSelectPanelProps {
    showBackButton?: boolean;
 }

-// Mini terminal preview component
-const TerminalPreview: React.FC<{ theme: TerminalTheme; isSelected: boolean }> = ({
-    theme,
-    isSelected
-}) => {
-    return (
-        <div
-            className={cn(
-                "w-16 h-10 rounded-md overflow-hidden border-2 flex-shrink-0",
-                isSelected ? "border-primary" : "border-transparent"
-            )}
-            style={{ backgroundColor: theme.colors.background }}
-        >
-            <div className="p-1 text-[4px] font-mono leading-tight" style={{ color: theme.colors.foreground }}>
-                <div>
-                    <span style={{ color: theme.colors.green }}>$</span>{' '}
-                    <span style={{ color: theme.colors.cyan }}>ls</span>
-                </div>
-                <div className="flex gap-0.5 flex-wrap">
-                    <span style={{ color: theme.colors.blue }}>dir/</span>
-                    <span style={{ color: theme.colors.green }}>file</span>
-                </div>
-                <div>
-                    <span style={{ color: theme.colors.green }}>$</span>{' '}
-                    <span
-                        className="inline-block w-1 h-1.5"
-                        style={{ backgroundColor: theme.colors.cursor }}
-                    />
-                </div>
-            </div>
-        </div>
-    );
-};
-
 const ThemeSelectPanel: React.FC<ThemeSelectPanelProps> = ({
    open,
    selectedThemeId,
@@ -60,51 +23,6 @@ const ThemeSelectPanel: React.FC<ThemeSelectPanelProps> = ({
    onBack,
    showBackButton = true,
 }) => {
-    // Reserved for future hover preview feature
-    const [_hoveredThemeId, setHoveredThemeId] = useState<string | null>(null);
-
-    const customThemes = useCustomThemes();
-
-    // All themes combined
-    const allThemes = useMemo(() => {
-        return [...TERMINAL_THEMES, ...customThemes];
-    }, [customThemes]);
-
-    const renderThemeItem = (theme: TerminalTheme) => {
-        const isSelected = theme.id === selectedThemeId;
-
-        return (
-            <button
-                key={theme.id}
-                className={cn(
-                    "w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors text-left",
-                    isSelected
-                        ? "bg-primary/10"
-                        : "hover:bg-secondary/50"
-                )}
-                onClick={() => onSelect(theme.id)}
-                onMouseEnter={() => setHoveredThemeId(theme.id)}
-                onMouseLeave={() => setHoveredThemeId(null)}
-            >
-                <TerminalPreview theme={theme} isSelected={isSelected} />
-                <div className="flex-1 min-w-0">
-                    <div className={cn(
-                        "text-sm font-medium truncate",
-                        isSelected && "text-primary"
-                    )}>
-                        {theme.name}
-                    </div>
-                    {theme.id === 'netcatty-dark' && (
-                        <div className="text-xs text-muted-foreground">Default</div>
-                    )}
-                    {theme.id === 'netcatty-light' && (
-                        <div className="text-xs text-muted-foreground">Light mode</div>
-                    )}
-                </div>
-            </button>
-        );
-    };
-
    return (
        <AsidePanel
            open={open}
@@ -116,8 +34,10 @@ const ThemeSelectPanel: React.FC<ThemeSelectPanelProps> = ({
            <AsidePanelContent className="p-0">
                <ScrollArea className="h-full">
                    <div className="py-2">
-                        {/* All themes in a single list */}
-                        {allThemes.map(renderThemeItem)}
+                        <ThemeList
+                            selectedThemeId={selectedThemeId || ''}
+                            onSelect={onSelect}
+                        />
                    </div>
                </ScrollArea>
            </AsidePanelContent>
--- a/components/TopTabs.tsx
+++ b/components/TopTabs.tsx
@@ -1,13 +1,16 @@
-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, FolderLock, LayoutGrid, Minus, Moon, MoreHorizontal, Plus, Server, Sparkles, Square, Sun, TerminalSquare, Usb, X } from 'lucide-react';
 import React, { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { activeTabStore, useActiveTabId } from '../application/state/activeTabStore';
+import { buildWorkspaceActivityMap } from '../application/state/sessionActivity';
+import { useSessionActivityMap } from '../application/state/sessionActivityStore';
 import { LogView } from '../application/state/useSessionState';
 import { useWindowControls } from '../application/state/useWindowControls';
 import { useI18n } from '../application/i18n/I18nProvider';
-import { 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';
+import { getShellIconPath, isMonochromeShellIcon } from '../lib/useDiscoveredShells';
 import { Button } from './ui/button';
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from './ui/context-menu';
 import { SyncStatusButton } from './SyncStatusButton';
@@ -36,6 +39,7 @@ interface TopTabsProps {
  onToggleTheme: () => void;
  onOpenSettings: () => void;
  onSyncNow?: () => Promise<void>;
+  isImmersiveActive?: boolean;
  onStartSessionDrag: (sessionId: string) => void;
  onEndSessionDrag: () => void;
  onReorderTabs: (draggedId: string, targetId: string, position: 'before' | 'after') => void;
@@ -51,10 +55,10 @@ const localOsId = (() => {
 })();

 // Lightweight OS/distro icon for session tabs — matches DistroAvatar "sm" style
-const SessionTabIcon: React.FC<{ host: Host | undefined; isActive: boolean; protocol?: string }> = memo(({ host, isActive, protocol }) => {
+const SessionTabIcon: React.FC<{ host: Host | undefined; isActive: boolean; protocol?: string; shellIcon?: string }> = memo(({ host, isActive, protocol, shellIcon }) => {
  const boxBase = "shrink-0 h-4 w-4 rounded flex items-center justify-center";
  const iconSize = "h-2.5 w-2.5";
-  const fallbackIcon = cn(iconSize, isActive ? "text-accent" : "text-muted-foreground");
+  const fallbackStyle = { color: isActive ? 'var(--top-tabs-accent, hsl(var(--accent)))' : 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' };

  // Serial protocol → USB icon
  if (protocol === 'serial' || host?.protocol === 'serial') {
@@ -65,8 +69,19 @@ const SessionTabIcon: React.FC<{ host: Host | undefined; isActive: boolean; prot
    );
  }

-  // Local protocol → OS-specific icon (protocol may be undefined for local sessions)
+  // Local protocol → shell-specific icon if available, else OS-specific icon
  if (protocol === 'local' || host?.protocol === 'local' || (!protocol && !host)) {
+    // Use shell icon from discovery when available
+    const iconId = shellIcon || host?.localShellIcon;
+    if (iconId) {
+      return (
+        <img
+          src={getShellIconPath(iconId)}
+          alt={iconId}
+          className={cn("shrink-0 h-4 w-4 object-contain", isMonochromeShellIcon(iconId) && "dark:invert")}
+        />
+      );
+    }
    const logo = DISTRO_LOGOS[localOsId];
    const bg = DISTRO_COLORS[localOsId] || DISTRO_COLORS.default;
    if (logo) {
@@ -81,7 +96,7 @@ const SessionTabIcon: React.FC<{ host: Host | undefined; isActive: boolean; prot
      );
    }
    return (
-      <div className={cn(boxBase, "bg-primary/15 text-primary")}>
+      <div className={boxBase} style={{ backgroundColor: 'color-mix(in srgb, var(--top-tabs-accent, hsl(var(--accent))) 15%, transparent)', color: 'var(--top-tabs-accent, hsl(var(--accent)))' }}>
        <TerminalSquare className={iconSize} />
      </div>
    );
@@ -89,7 +104,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 +112,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>
@@ -108,22 +123,33 @@ const SessionTabIcon: React.FC<{ host: Host | undefined; isActive: boolean; prot
  // Fallback: generic server icon for remote, terminal for unknown
  if (host && host.protocol !== 'local') {
    return (
-      <div className={cn(boxBase, "bg-primary/15 text-primary")}>
+      <div className={boxBase} style={{ backgroundColor: 'color-mix(in srgb, var(--top-tabs-accent, hsl(var(--accent))) 15%, transparent)', color: 'var(--top-tabs-accent, hsl(var(--accent)))' }}>
        <Server className={iconSize} />
      </div>
    );
  }
-  return <TerminalSquare className={fallbackIcon} />;
+  return <TerminalSquare className={iconSize} style={fallbackStyle} />;
 });
 SessionTabIcon.displayName = 'SessionTabIcon';

-const sessionStatusDot = (status: TerminalSession['status']) => {
+const sessionStatusDot = (status: TerminalSession['status'], hasActivity: boolean) => {
  const tone = status === 'connected'
    ? "bg-emerald-400"
    : status === 'connecting'
      ? "bg-amber-400"
      : "bg-rose-500";
-  return <span className={cn("inline-block h-2 w-2 rounded-full ring-2 ring-background/60", tone)} />;
+  return (
+    <span className="relative inline-flex h-2 w-2 shrink-0 items-center justify-center">
+      <span
+        className={cn(
+          "relative inline-block h-2 w-2 rounded-full ring-2",
+          tone,
+          hasActivity && "session-activity-dot",
+        )}
+        style={{ boxShadow: '0 0 0 2px color-mix(in srgb, var(--top-tabs-active-bg, hsl(var(--background))) 60%, transparent)' }}
+      />
+    </span>
+  );
 };

 // Custom window controls for Windows/Linux (frameless window)
@@ -167,14 +193,16 @@ const WindowControls: React.FC = memo(() => {
    <div className="flex items-center app-drag h-full">
      <button
        onClick={handleMinimize}
-        className="h-full w-10 flex items-center justify-center text-muted-foreground hover:bg-foreground/10 hover:text-foreground transition-all duration-150 app-no-drag"
+        className="h-full w-10 flex items-center justify-center transition-all duration-150 app-no-drag"
+        style={{ color: 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}
        title="Minimize"
      >
        <Minus size={16} />
      </button>
      <button
        onClick={handleMaximize}
-        className="h-full w-10 flex items-center justify-center text-muted-foreground hover:bg-foreground/10 hover:text-foreground transition-all duration-150 app-no-drag"
+        className="h-full w-10 flex items-center justify-center transition-all duration-150 app-no-drag"
+        style={{ color: 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}
        title={isMaximized ? "Restore" : "Maximize"}
      >
        {isMaximized ? (
@@ -217,6 +245,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
  onToggleTheme,
  onOpenSettings,
  onSyncNow,
+  isImmersiveActive,
  onStartSessionDrag,
  onEndSessionDrag,
  onReorderTabs,
@@ -225,6 +254,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
  // Subscribe to activeTabId from external store
  const { maximize, isFullscreen, onFullscreenChanged } = useWindowControls();
  const activeTabId = useActiveTabId();
+  const sessionActivityMap = useSessionActivityMap();
  const isVaultActive = activeTabId === 'vault';
  const isSftpActive = activeTabId === 'sftp';
  const onSelectTab = activeTabStore.setActiveTabId;
@@ -328,6 +358,10 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
    return map;
  }, [hosts]);

+  const workspaceActivityMap = useMemo(() => {
+    return buildWorkspaceActivityMap(sessions, sessionActivityMap);
+  }, [sessionActivityMap, sessions]);
+
  // Pre-compute session counts per workspace for O(1) access
  const workspacePaneCounts = useMemo(() => {
    const counts = new Map<string, number>();
@@ -451,6 +485,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({

      if (item.type === 'session') {
        const session = item.session;
+        const hasActivity = !!sessionActivityMap[session.id];
        const isBeingDragged = draggingSessionId === session.id;
        const shiftStyle = tabShiftStyles[session.id] || {};
        const showDropIndicatorBefore = dropIndicator?.tabId === session.id && dropIndicator.position === 'before';
@@ -470,30 +505,56 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                onDrop={(e) => handleTabDrop(e, session.id)}
                className={cn(
                  "relative h-7 pl-3 pr-2 min-w-[140px] max-w-[240px] rounded-none text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
-                  "transition-all duration-150",
-                  activeTabId === session.id
-                    ? "bg-background text-foreground"
-                    : "text-muted-foreground hover:bg-background/40 hover:text-foreground",
+                  "transition-transform duration-150",
                  isBeingDragged && isDraggingForReorder ? "opacity-40 scale-95" : ""
                )}
-                style={shiftStyle}
+                style={{
+                  ...shiftStyle,
+                  backgroundColor: activeTabId === session.id
+                    ? 'var(--top-tabs-active-bg, hsl(var(--background)))'
+                    : 'transparent',
+                  color: activeTabId === session.id
+                    ? 'var(--top-tabs-fg, hsl(var(--foreground)))'
+                    : 'var(--top-tabs-muted, hsl(var(--muted-foreground)))',
+                }}
+                onMouseEnter={(e) => {
+                  if (activeTabId !== session.id) {
+                    e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--top-tabs-active-bg, hsl(var(--background))) 40%, transparent)';
+                    e.currentTarget.style.color = 'var(--top-tabs-fg, hsl(var(--foreground)))';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (activeTabId !== session.id) {
+                    e.currentTarget.style.backgroundColor = 'transparent';
+                    e.currentTarget.style.color = 'var(--top-tabs-muted, hsl(var(--muted-foreground)))';
+                  }
+                }}
              >
                {/* Active tab top accent line */}
                {activeTabId === session.id && (
-                  <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent" />
+                  <div
+                    className="absolute top-0 left-0 right-0 h-[2px]"
+                    style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))' }}
+                  />
                )}
                {/* Drop indicator line - before */}
                {showDropIndicatorBefore && isDraggingForReorder && (
-                  <div className="absolute -left-0.5 top-1 bottom-1 w-0.5 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
+                  <div
+                    className="absolute -left-0.5 top-1 bottom-1 w-0.5 rounded-full animate-pulse"
+                    style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))', boxShadow: '0 0 8px 2px color-mix(in srgb, var(--top-tabs-accent, hsl(var(--accent))) 50%, transparent)' }}
+                  />
                )}
                {/* Drop indicator line - after */}
                {showDropIndicatorAfter && isDraggingForReorder && (
-                  <div className="absolute -right-0.5 top-1 bottom-1 w-0.5 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
+                  <div
+                    className="absolute -right-0.5 top-1 bottom-1 w-0.5 rounded-full animate-pulse"
+                    style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))', boxShadow: '0 0 8px 2px color-mix(in srgb, var(--top-tabs-accent, hsl(var(--accent))) 50%, transparent)' }}
+                  />
                )}
                <div className="flex items-center gap-2 min-w-0 flex-1">
-                  <SessionTabIcon host={hostMap.get(session.hostId)} isActive={activeTabId === session.id} protocol={session.protocol} />
+                  <SessionTabIcon host={hostMap.get(session.hostId)} isActive={activeTabId === session.id} protocol={session.protocol} shellIcon={session.localShellIcon} />
                  <span className="truncate">{session.hostLabel}</span>
-                  <div className="flex-shrink-0">{sessionStatusDot(session.status)}</div>
+                  <div className="flex-shrink-0">{sessionStatusDot(session.status, hasActivity)}</div>
                </div>
                <button
                  onClick={(e) => onCloseSession(session.id, e)}
@@ -522,6 +583,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
      if (item.type === 'workspace') {
        const workspace = item.workspace;
        const paneCount = item.paneCount;
+        const hasActivity = !!workspaceActivityMap.get(workspace.id);
        const isActive = activeTabId === workspace.id;
        const isBeingDragged = draggingSessionId === workspace.id;
        const shiftStyle = tabShiftStyles[workspace.id] || {};
@@ -542,32 +604,71 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                onDrop={(e) => handleTabDrop(e, workspace.id)}
                className={cn(
                  "relative h-7 pl-3 pr-2 min-w-[150px] max-w-[260px] rounded-none text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
-                  "transition-all duration-150",
-                  isActive
-                    ? "bg-background text-foreground"
-                    : "text-muted-foreground hover:bg-background/40 hover:text-foreground",
+                  "transition-transform duration-150",
                  isBeingDragged && isDraggingForReorder ? "opacity-40 scale-95" : ""
                )}
-                style={shiftStyle}
+                style={{
+                  ...shiftStyle,
+                  backgroundColor: isActive
+                    ? 'var(--top-tabs-active-bg, hsl(var(--background)))'
+                    : 'transparent',
+                  color: isActive
+                    ? 'var(--top-tabs-fg, hsl(var(--foreground)))'
+                    : 'var(--top-tabs-muted, hsl(var(--muted-foreground)))',
+                }}
+                onMouseEnter={(e) => {
+                  if (!isActive) {
+                    e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--top-tabs-active-bg, hsl(var(--background))) 40%, transparent)';
+                    e.currentTarget.style.color = 'var(--top-tabs-fg, hsl(var(--foreground)))';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!isActive) {
+                    e.currentTarget.style.backgroundColor = 'transparent';
+                    e.currentTarget.style.color = 'var(--top-tabs-muted, hsl(var(--muted-foreground)))';
+                  }
+                }}
              >
                {/* Active tab top accent line */}
                {isActive && (
-                  <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent" />
+                  <div
+                    className="absolute top-0 left-0 right-0 h-[2px]"
+                    style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))' }}
+                  />
                )}
                {/* Drop indicator line - before */}
                {showDropIndicatorBefore && isDraggingForReorder && (
-                  <div className="absolute -left-0.5 top-1 bottom-1 w-0.5 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
+                  <div
+                    className="absolute -left-0.5 top-1 bottom-1 w-0.5 rounded-full animate-pulse"
+                    style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))', boxShadow: '0 0 8px 2px color-mix(in srgb, var(--top-tabs-accent, hsl(var(--accent))) 50%, transparent)' }}
+                  />
                )}
                {/* Drop indicator line - after */}
                {showDropIndicatorAfter && isDraggingForReorder && (
-                  <div className="absolute -right-0.5 top-1 bottom-1 w-0.5 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
+                  <div
+                    className="absolute -right-0.5 top-1 bottom-1 w-0.5 rounded-full animate-pulse"
+                    style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))', boxShadow: '0 0 8px 2px color-mix(in srgb, var(--top-tabs-accent, hsl(var(--accent))) 50%, transparent)' }}
+                  />
                )}
                <div className="flex items-center gap-2 truncate">
-                  <LayoutGrid size={14} className={cn("shrink-0", isActive ? "text-primary" : "text-muted-foreground")} />
+                  <LayoutGrid
+                    size={14}
+                    className="shrink-0"
+                    style={{ color: isActive ? 'var(--top-tabs-accent, hsl(var(--accent)))' : 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}
+                  />
                  <span className="truncate">{workspace.title}</span>
                </div>
-                <div className="text-[10px] px-1.5 py-0.5 rounded-full border border-border/70 bg-background/60 min-w-[22px] text-center">
-                  {paneCount}
+                <div className="flex items-center gap-1.5 shrink-0">
+                  {hasActivity && sessionStatusDot('connected', true)}
+                  <div
+                    className="text-[10px] px-1.5 py-0.5 rounded-full min-w-[22px] text-center"
+                    style={{
+                      border: '1px solid color-mix(in srgb, var(--top-tabs-fg, hsl(var(--foreground))) 18%, transparent)',
+                      backgroundColor: 'color-mix(in srgb, var(--top-tabs-active-bg, hsl(var(--background))) 60%, transparent)',
+                    }}
+                  >
+                    {paneCount}
+                  </div>
                </div>
              </div>
            </ContextMenuTrigger>
@@ -595,18 +696,41 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
            onClick={() => onSelectTab(logView.id)}
            className={cn(
              "relative h-7 pl-3 pr-2 min-w-[140px] max-w-[240px] rounded-none text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
-              "transition-colors duration-150",
-              isActive
-                ? "bg-background text-foreground"
-                : "text-muted-foreground hover:bg-background/40 hover:text-foreground"
            )}
+            style={{
+              backgroundColor: isActive
+                ? 'var(--top-tabs-active-bg, hsl(var(--background)))'
+                : 'transparent',
+              color: isActive
+                ? 'var(--top-tabs-fg, hsl(var(--foreground)))'
+                : 'var(--top-tabs-muted, hsl(var(--muted-foreground)))',
+            }}
+            onMouseEnter={(e) => {
+              if (!isActive) {
+                e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--top-tabs-active-bg, hsl(var(--background))) 40%, transparent)';
+                e.currentTarget.style.color = 'var(--top-tabs-fg, hsl(var(--foreground)))';
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (!isActive) {
+                e.currentTarget.style.backgroundColor = 'transparent';
+                e.currentTarget.style.color = 'var(--top-tabs-muted, hsl(var(--muted-foreground)))';
+              }
+            }}
          >
            {/* Active tab top accent line */}
            {isActive && (
-              <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent" />
+              <div
+                className="absolute top-0 left-0 right-0 h-[2px]"
+                style={{ backgroundColor: 'var(--top-tabs-fg, hsl(var(--foreground)))' }}
+              />
            )}
            <div className="flex items-center gap-2 min-w-0 flex-1">
-              <FileText size={14} className={cn("shrink-0", isActive ? "text-accent" : "text-muted-foreground")} />
+              <FileText
+                size={14}
+                className="shrink-0"
+                style={{ color: isActive ? 'var(--top-tabs-accent, hsl(var(--accent)))' : 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}
+              />
              <span className="truncate">
                {t('tabs.logPrefix')} {isLocal ? t('tabs.logLocal') : logView.log.hostname}
              </span>
@@ -640,8 +764,13 @@ const TopTabsInner: React.FC<TopTabsProps> = ({

  return (
    <div
+      data-top-tabs-root
      className="relative w-full bg-secondary app-drag"
-      style={dragRegionNoSelect}
+      style={{
+        ...dragRegionNoSelect,
+        backgroundColor: 'var(--top-tabs-bg, hsl(var(--secondary)))',
+        color: 'var(--top-tabs-fg, hsl(var(--foreground)))',
+      }}
      onDoubleClick={handleTitleBarDoubleClick}
    >
      {/* Always-on drag stripe so the window can be moved even when tabs fill the bar */}
@@ -656,25 +785,62 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
            onClick={() => onSelectTab('vault')}
            className={cn(
              "relative h-7 px-3 rounded text-xs font-semibold cursor-pointer flex items-center gap-2 app-no-drag",
-              "transition-colors duration-150",
-              isVaultActive
-                ? "bg-foreground/10 text-foreground"
-                : "text-muted-foreground hover:bg-background/40 hover:text-foreground"
            )}
+            style={{
+              backgroundColor: isVaultActive
+                ? 'var(--top-tabs-active-bg, hsl(var(--background)))'
+                : 'transparent',
+              color: isVaultActive
+                ? 'var(--top-tabs-fg, hsl(var(--foreground)))'
+                : 'var(--top-tabs-muted, hsl(var(--muted-foreground)))',
+            }}
+            onMouseEnter={(e) => {
+              if (!isVaultActive) {
+                e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--top-tabs-active-bg, hsl(var(--background))) 40%, transparent)';
+                e.currentTarget.style.color = 'var(--top-tabs-fg, hsl(var(--foreground)))';
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (!isVaultActive) {
+                e.currentTarget.style.backgroundColor = 'transparent';
+                e.currentTarget.style.color = 'var(--top-tabs-muted, hsl(var(--muted-foreground)))';
+              }
+            }}
          >
-            <Shield size={14} /> Vaults
+            <FolderLock size={14} /> Vaults
          </div>
          <div
            onClick={() => onSelectTab('sftp')}
            className={cn(
              "relative h-7 px-3 rounded-none text-xs font-semibold cursor-pointer flex items-center gap-2 app-no-drag",
-              "transition-colors duration-150",
-              isSftpActive
-                ? "bg-background text-foreground"
-                : "text-muted-foreground hover:bg-background/40 hover:text-foreground"
            )}
+            style={{
+              backgroundColor: isSftpActive
+                ? 'var(--top-tabs-active-bg, hsl(var(--background)))'
+                : 'transparent',
+              color: isSftpActive
+                ? 'var(--top-tabs-fg, hsl(var(--foreground)))'
+                : 'var(--top-tabs-muted, hsl(var(--muted-foreground)))',
+            }}
+            onMouseEnter={(e) => {
+              if (!isSftpActive) {
+                e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--top-tabs-active-bg, hsl(var(--background))) 40%, transparent)';
+                e.currentTarget.style.color = 'var(--top-tabs-fg, hsl(var(--foreground)))';
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (!isSftpActive) {
+                e.currentTarget.style.backgroundColor = 'transparent';
+                e.currentTarget.style.color = 'var(--top-tabs-muted, hsl(var(--muted-foreground)))';
+              }
+            }}
          >
-            {isSftpActive && <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent" />}
+            {isSftpActive && (
+              <div
+                className="absolute top-0 left-0 right-0 h-[2px]"
+                style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))' }}
+              />
+            )}
            <Folder size={14} /> SFTP
          </div>
        </div>
@@ -696,7 +862,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
          {canScrollLeft && (
            <div
              className="absolute left-0 top-0 bottom-0 w-8 pointer-events-none z-10"
-              style={{ background: 'linear-gradient(to right, hsl(var(--secondary) / 0.9), transparent)' }}
+              style={{ background: 'linear-gradient(to right, var(--top-tabs-bg, hsl(var(--secondary))), transparent)' }}
            />
          )}

@@ -713,6 +879,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                variant="ghost"
                size="icon"
                className="h-7 w-7 flex-shrink-0 app-no-drag mb-0 rounded-none"
+                style={{ color: 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}
                onClick={onOpenQuickSwitcher}
                title="Open quick switcher"
              >
@@ -727,7 +894,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
          {canScrollRight && (
            <div
              className="absolute right-0 top-0 bottom-0 w-8 pointer-events-none z-10"
-              style={{ background: 'linear-gradient(to left, hsl(var(--secondary) / 0.9), transparent)' }}
+              style={{ background: 'linear-gradient(to left, var(--top-tabs-bg, hsl(var(--secondary))), transparent)' }}
            />
          )}
        </div>
@@ -738,6 +905,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
            variant="ghost"
            size="icon"
            className="h-7 w-7 flex-shrink-0 app-no-drag self-end rounded-none"
+            style={{ color: 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}
            onClick={onOpenQuickSwitcher}
            title="More tabs"
          >
@@ -747,15 +915,27 @@ 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">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6 app-no-drag"
+            style={{ color: 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}
+            title="AI Assistant"
+            onClick={() => window.dispatchEvent(new CustomEvent('netcatty:toggle-ai-panel'))}
+          >
+            <Sparkles size={16} />
+          </Button>
+          <Button variant="ghost" size="icon" className="h-6 w-6 app-no-drag" style={{ color: 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}>
            <Bell size={16} />
          </Button>
          <SyncStatusButton onOpenSettings={onOpenSettings} onSyncNow={onSyncNow} />
          <Button
            variant="ghost"
            size="icon"
-            className="h-6 w-6 text-muted-foreground hover:text-foreground app-no-drag"
+            className="h-6 w-6 app-no-drag"
+            style={{ color: 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}
            onClick={onToggleTheme}
+            disabled={isImmersiveActive}
            title="Toggle theme"
          >
            {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
@@ -779,10 +959,12 @@ const topTabsAreEqual = (prev: TopTabsProps, next: TopTabsProps): boolean => {
    prev.orphanSessions === next.orphanSessions &&
    prev.workspaces === next.workspaces &&
    prev.orderedTabs === next.orderedTabs &&
+    prev.logViews === next.logViews &&
    prev.draggingSessionId === next.draggingSessionId &&
    prev.isMacClient === next.isMacClient &&
    prev.onOpenSettings === next.onOpenSettings &&
-    prev.onSyncNow === next.onSyncNow
+    prev.onSyncNow === next.onSyncNow &&
+    prev.isImmersiveActive === next.isImmersiveActive
  );
 };

--- a/components/TrayPanel.tsx
+++ b/components/TrayPanel.tsx
@@ -10,6 +10,7 @@ import { I18nProvider } from "../application/i18n/I18nProvider";
 import { useSettingsState } from "../application/state/useSettingsState";
 import { useTrayPanelBackend } from "../application/state/useTrayPanelBackend";
 import { useActiveTabId } from "../application/state/activeTabStore";
+import { resolveGroupDefaults, applyGroupDefaults } from "../domain/groupConfig";
 import { X, Maximize2, ChevronRight, ChevronDown, Power } from "lucide-react";
 import { AppLogo } from "./AppLogo";

@@ -116,7 +117,7 @@ const TrayPanelContent: React.FC = () => {
    onTrayPanelMenuData,
  } = useTrayPanelBackend();

-  const { hosts, keys } = useVaultState();
+  const { hosts, keys, identities, groupConfigs } = useVaultState();
  useSessionState();
  const { rules: portForwardingRules, startTunnel, stopTunnel } = usePortForwardingState();
  const activeTabId = useActiveTabId();
@@ -151,11 +152,6 @@ const TrayPanelContent: React.FC = () => {
    return () => unsubscribe?.();
  }, [onTrayPanelRefresh]);

-  const keysForPf = useMemo(
-    () => keys.map((k) => ({ id: k.id, privateKey: k.privateKey, passphrase: k.passphrase })),
-    [keys],
-  );
-
  const handleClose = useCallback(() => {
    void hideTrayPanel();
  }, [hideTrayPanel]);
@@ -331,15 +327,18 @@ const TrayPanelContent: React.FC = () => {
                    disabled={isConnecting}
                    title={label}
                    onClick={() => {
-                      const host = rule.hostId ? hosts.find((h) => h.id === rule.hostId) : undefined;
-                      if (!host) {
+                      const rawHost = rule.hostId ? hosts.find((h) => h.id === rule.hostId) : undefined;
+                      if (!rawHost) {
                        toast.error(t("pf.error.hostNotFound"));
                        return;
                      }
                      if (isActive) {
                        void stopTunnel(rule.id);
                      } else {
-                        void startTunnel(rule, host, keysForPf, (status, error) => {
+                        const host = rawHost.group
+                          ? applyGroupDefaults(rawHost, resolveGroupDefaults(rawHost.group, groupConfigs))
+                          : rawHost;
+                        void startTunnel(rule, host, hosts, keys, identities, (status, error) => {
                          if (status === "error" && error) toast.error(error);
                        }, rule.autoStart);
                      }
--- a/components/VaultView.tsx
+++ b/components/VaultView.tsx
--- a/components/ai-elements/conversation.tsx
+++ b/components/ai-elements/conversation.tsx
@@ -0,0 +1,54 @@
+import { cn } from '../../lib/utils';
+import type { ComponentProps } from 'react';
+import React, { useCallback } from 'react';
+import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
+import { ArrowDown } from 'lucide-react';
+
+export type ConversationProps = ComponentProps<typeof StickToBottom>;
+
+export const Conversation = ({ className, ...props }: ConversationProps) => (
+  <StickToBottom
+    className={cn('relative flex-1 overflow-y-hidden', className)}
+    initial="instant"
+    resize="smooth"
+    role="log"
+    {...props}
+  />
+);
+
+export type ConversationContentProps = ComponentProps<typeof StickToBottom.Content>;
+
+export const ConversationContent = ({ className, ...props }: ConversationContentProps) => (
+  <StickToBottom.Content
+    className={cn('flex flex-col gap-4 p-4', className)}
+    {...props}
+  />
+);
+
+export const ConversationScrollButton = ({ className, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+  const handleClick = useCallback(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+
+  if (isAtBottom) return null;
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        'absolute bottom-3 left-1/2 -translate-x-1/2 z-10',
+        'h-7 w-7 rounded-full border border-border/40 bg-background/90 backdrop-blur-sm',
+        'flex items-center justify-center',
+        'text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer',
+        'shadow-sm',
+        className,
+      )}
+      onClick={handleClick}
+      {...props}
+    >
+      <ArrowDown size={14} />
+    </button>
+  );
+};
--- a/components/ai-elements/message.tsx
+++ b/components/ai-elements/message.tsx
@@ -0,0 +1,87 @@
+import { cn } from '../../lib/utils';
+import { cjk } from '@streamdown/cjk';
+import { code } from '@streamdown/code';
+import type { ComponentProps, HTMLAttributes } from 'react';
+import { memo } from 'react';
+import { Streamdown } from 'streamdown';
+
+export type MessageProps = HTMLAttributes<HTMLDivElement> & {
+  from: 'user' | 'assistant' | 'system' | 'tool';
+};
+
+export const Message = ({ className, from, ...props }: MessageProps) => (
+  <div
+    className={cn(
+      'group flex w-full max-w-[95%] flex-col gap-1.5',
+      from === 'user' ? 'is-user ml-auto' : 'is-assistant',
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type MessageContentProps = HTMLAttributes<HTMLDivElement>;
+
+export const MessageContent = ({ children, className, ...props }: MessageContentProps) => (
+  <div
+    className={cn(
+      'flex w-fit min-w-0 max-w-full flex-col gap-1.5 text-[13px] leading-relaxed',
+      'group-[.is-user]:ml-auto group-[.is-user]:overflow-hidden group-[.is-user]:rounded-lg group-[.is-user]:border group-[.is-user]:border-border/50 group-[.is-user]:bg-muted/50 group-[.is-user]:px-2.5 group-[.is-user]:py-2',
+      'group-[.is-assistant]:w-full group-[.is-assistant]:text-foreground/90',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type MessageActionsProps = ComponentProps<'div'>;
+
+export const MessageActions = ({ className, children, ...props }: MessageActionsProps) => (
+  <div
+    className={cn(
+      'flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+const streamdownPlugins = { cjk, code };
+
+export type MessageResponseProps = ComponentProps<typeof Streamdown>;
+
+export const MessageResponse = memo(
+  ({ className, ...props }: MessageResponseProps) => (
+    <Streamdown
+      className={cn(
+        'size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0',
+        // Style the rendered markdown
+        // Code: base styles (code-block overrides are in index.css)
+        '[&_code]:text-[12px] [&_code]:font-mono',
+        '[&_p_code]:px-[0.4em] [&_p_code]:py-[0.15em] [&_p_code]:rounded [&_p_code]:bg-foreground/[0.06] [&_p_code]:text-[85%]',
+        '[&_p]:my-1.5',
+        '[&_ul]:my-1.5 [&_ul]:pl-4 [&_ul]:list-disc',
+        '[&_ol]:my-1.5 [&_ol]:pl-4 [&_ol]:list-decimal',
+        '[&_li]:my-0.5',
+        '[&_h1]:text-base [&_h1]:font-semibold [&_h1]:mt-4 [&_h1]:mb-2',
+        '[&_h2]:text-sm [&_h2]:font-semibold [&_h2]:mt-3 [&_h2]:mb-1.5',
+        '[&_h3]:text-sm [&_h3]:font-medium [&_h3]:mt-2 [&_h3]:mb-1',
+        '[&_blockquote]:border-l-2 [&_blockquote]:border-border/50 [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground',
+        '[&_a]:text-primary [&_a]:underline',
+        '[&_hr]:border-border/30 [&_hr]:my-3',
+        '[&_table]:text-[12px] [&_th]:px-2 [&_th]:py-1 [&_th]:border [&_th]:border-border/30 [&_th]:bg-muted/20 [&_td]:px-2 [&_td]:py-1 [&_td]:border [&_td]:border-border/30',
+        className,
+      )}
+      plugins={streamdownPlugins}
+      {...props}
+    />
+  ),
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children &&
+    nextProps.isAnimating === prevProps.isAnimating,
+);
+MessageResponse.displayName = 'MessageResponse';
--- a/components/ai-elements/prompt-input.tsx
+++ b/components/ai-elements/prompt-input.tsx
@@ -0,0 +1,247 @@
+/**
+ * PromptInput - Adapted from Vercel AI Elements prompt-input for netcatty.
+ *
+ * Simplified: no file attachments, screenshots, drag-drop, command palette,
+ * hover cards, referenced sources, or tabs. Core input + footer + submit.
+ */
+
+import { ArrowUp, Square, X } from 'lucide-react';
+import type {
+  ComponentProps,
+  FormEvent,
+  HTMLAttributes,
+  KeyboardEvent,
+  ReactNode,
+} from 'react';
+import { forwardRef, useCallback, useRef } from 'react';
+import { cn } from '../../lib/utils';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from '../ui/input-group';
+import { Spinner } from '../ui/spinner';
+
+// ---------------------------------------------------------------------------
+// PromptInput (form wrapper)
+// ---------------------------------------------------------------------------
+
+export interface PromptInputProps extends HTMLAttributes<HTMLFormElement> {
+  onSubmit: (text: string, event: FormEvent<HTMLFormElement>) => void | Promise<void>;
+}
+
+export const PromptInput = forwardRef<HTMLFormElement, PromptInputProps>(
+  ({ className, onSubmit, children, ...props }, ref) => {
+    const handleSubmit = useCallback(
+      (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const form = e.currentTarget;
+        const textarea = form.querySelector('textarea');
+        const text = textarea?.value?.trim() ?? '';
+        if (!text) return;
+        onSubmit(text, e);
+      },
+      [onSubmit],
+    );
+
+    return (
+      <form ref={ref} onSubmit={handleSubmit} className={className} {...props}>
+        <InputGroup>{children}</InputGroup>
+      </form>
+    );
+  },
+);
+PromptInput.displayName = 'PromptInput';
+
+// ---------------------------------------------------------------------------
+// PromptInputTextarea
+// ---------------------------------------------------------------------------
+
+export interface PromptInputTextareaProps extends ComponentProps<'textarea'> {
+  /** Called when Enter is pressed (without Shift) to trigger form submit */
+  onSubmitRequest?: () => void;
+}
+
+export const PromptInputTextarea = forwardRef<HTMLTextAreaElement, PromptInputTextareaProps>(
+  ({ className, onSubmitRequest, onKeyDown, ...props }, ref) => {
+    const internalRef = useRef<HTMLTextAreaElement | null>(null);
+
+    const setRef = useCallback(
+      (node: HTMLTextAreaElement | null) => {
+        internalRef.current = node;
+        if (typeof ref === 'function') ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref],
+    );
+
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent<HTMLTextAreaElement>) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented) return;
+
+        // CJK composition guard
+        if (e.nativeEvent.isComposing) return;
+
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          onSubmitRequest?.();
+          // Trigger form submit
+          const form = internalRef.current?.closest('form');
+          if (form) {
+            form.requestSubmit();
+          }
+        }
+      },
+      [onKeyDown, onSubmitRequest],
+    );
+
+    return (
+      <InputGroupTextarea
+        ref={setRef}
+        className={className}
+        onKeyDown={handleKeyDown}
+        {...props}
+      />
+    );
+  },
+);
+PromptInputTextarea.displayName = 'PromptInputTextarea';
+
+// ---------------------------------------------------------------------------
+// PromptInputFooter
+// ---------------------------------------------------------------------------
+
+export type PromptInputFooterProps = HTMLAttributes<HTMLDivElement>;
+
+export const PromptInputFooter = forwardRef<HTMLDivElement, PromptInputFooterProps>(
+  ({ className, ...props }, ref) => (
+    <InputGroupAddon
+      ref={ref}
+      align="block-end"
+      className={cn('gap-1', className)}
+      {...props}
+    />
+  ),
+);
+PromptInputFooter.displayName = 'PromptInputFooter';
+
+// ---------------------------------------------------------------------------
+// PromptInputTools (left side of footer)
+// ---------------------------------------------------------------------------
+
+export type PromptInputToolsProps = HTMLAttributes<HTMLDivElement>;
+
+export const PromptInputTools = forwardRef<HTMLDivElement, PromptInputToolsProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex items-center gap-0.5', className)}
+      {...props}
+    />
+  ),
+);
+PromptInputTools.displayName = 'PromptInputTools';
+
+// ---------------------------------------------------------------------------
+// PromptInputButton (toolbar button with optional tooltip)
+// ---------------------------------------------------------------------------
+
+export interface PromptInputButtonProps extends ComponentProps<typeof InputGroupButton> {
+  tooltip?: ReactNode;
+  tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+export const PromptInputButton = forwardRef<HTMLButtonElement, PromptInputButtonProps>(
+  ({ tooltip, tooltipSide = 'top', ...props }, ref) => {
+    const button = <InputGroupButton ref={ref} {...props} />;
+
+    if (!tooltip) return button;
+
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>{button}</TooltipTrigger>
+          <TooltipContent side={tooltipSide}>{tooltip}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  },
+);
+PromptInputButton.displayName = 'PromptInputButton';
+
+// ---------------------------------------------------------------------------
+// PromptInputSubmit
+// ---------------------------------------------------------------------------
+
+export type PromptInputStatus = 'idle' | 'submitted' | 'streaming' | 'error';
+
+export interface PromptInputSubmitProps extends ComponentProps<typeof InputGroupButton> {
+  status?: PromptInputStatus;
+  onStop?: () => void;
+}
+
+export const PromptInputSubmit = forwardRef<HTMLButtonElement, PromptInputSubmitProps>(
+  ({ status = 'idle', onStop, className, disabled, ...props }, ref) => {
+    const isRunning = status === 'submitted' || status === 'streaming';
+
+    const handleClick = useCallback(() => {
+      if (isRunning && onStop) {
+        onStop();
+      }
+    }, [isRunning, onStop]);
+
+    const icon =
+      status === 'submitted' ? (
+        <Spinner size={14} />
+      ) : status === 'streaming' ? (
+        <Square size={14} />
+      ) : status === 'error' ? (
+        <X size={14} />
+      ) : (
+        <ArrowUp size={14} />
+      );
+
+    const tooltipLabel =
+      status === 'submitted'
+        ? 'Waiting...'
+        : status === 'streaming'
+          ? 'Stop'
+          : status === 'error'
+            ? 'Error'
+            : 'Send';
+
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <InputGroupButton
+              ref={ref}
+              type={isRunning ? 'button' : 'submit'}
+              onClick={isRunning ? handleClick : undefined}
+              variant="ghost"
+              disabled={disabled && !isRunning}
+              className={cn(
+                'h-8 w-8 rounded-full border p-0 shadow-sm disabled:opacity-100',
+                isRunning
+                  ? 'border-destructive/60 bg-destructive/85 text-destructive-foreground hover:bg-destructive'
+                  : disabled
+                    ? 'border-border/80 bg-muted/52 text-foreground/72 hover:bg-muted/52'
+                    : 'border-foreground/20 bg-foreground text-background hover:bg-foreground/90',
+                className,
+              )}
+              {...props}
+            >
+              {icon}
+            </InputGroupButton>
+          </TooltipTrigger>
+          <TooltipContent side="top">{tooltipLabel}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  },
+);
+PromptInputSubmit.displayName = 'PromptInputSubmit';
+
--- a/components/ai-elements/tool-call.tsx
+++ b/components/ai-elements/tool-call.tsx
@@ -0,0 +1,229 @@
+import { cn } from '../../lib/utils';
+import { Check, ChevronDown, ChevronRight, CheckCircle2, Loader2, ShieldAlert, X, XCircle, Slash } from 'lucide-react';
+import React, { useCallback, useEffect, useRef, useState, type HTMLAttributes } from 'react';
+import { Button } from '../ui/button';
+import { Badge } from '../ui/badge';
+import { useI18n } from '../../application/i18n/I18nProvider';
+
+/**
+ * Format tool result for display. Extracts stdout/stderr from structured
+ * command results for terminal-like output.
+ */
+function formatToolResult(result: unknown): string {
+  let parsed = result;
+
+  if (typeof parsed === 'string') {
+    try {
+      const obj = JSON.parse(parsed);
+      if (obj && typeof obj === 'object') parsed = obj;
+    } catch {
+      return parsed;
+    }
+  }
+
+  if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+    const obj = parsed as Record<string, unknown>;
+    if (typeof obj.stdout === 'string' || typeof obj.stderr === 'string') {
+      const parts: string[] = [];
+      if (typeof obj.stdout === 'string' && obj.stdout) parts.push(obj.stdout);
+      if (typeof obj.stderr === 'string' && obj.stderr) parts.push(obj.stderr);
+      if (typeof obj.exitCode === 'number' && obj.exitCode !== 0) {
+        parts.push(`exit code: ${obj.exitCode}`);
+      }
+      if (parts.length > 0) return parts.join('\n');
+    }
+  }
+
+  if (typeof parsed === 'string') return parsed;
+  return JSON.stringify(parsed, null, 2);
+}
+
+export interface ToolCallProps extends HTMLAttributes<HTMLDivElement> {
+  name: string;
+  args?: Record<string, unknown>;
+  result?: unknown;
+  isError?: boolean;
+  isLoading?: boolean;
+  isInterrupted?: boolean;
+  /** Approval state for this tool call (from the approval gate). */
+  approvalStatus?: 'pending' | 'approved' | 'denied';
+  /** Called when user approves this tool call. */
+  onApprove?: () => void;
+  /** Called when user rejects this tool call. */
+  onReject?: () => void;
+}
+
+export const ToolCall = ({
+  name, args, result, isError, isLoading, isInterrupted,
+  approvalStatus, onApprove, onReject,
+  className, ...props
+}: ToolCallProps) => {
+  const { t } = useI18n();
+  const [expanded, setExpanded] = useState(false);
+  const cardRef = useRef<HTMLDivElement>(null);
+  const approveBtnRef = useRef<HTMLButtonElement>(null);
+  const [responded, setResponded] = useState(false);
+
+  const isPendingApproval = approvalStatus === 'pending' && !responded;
+
+  const handleApprove = useCallback(() => {
+    if (!isPendingApproval) return;
+    setResponded(true);
+    onApprove?.();
+  }, [isPendingApproval, onApprove]);
+
+  const handleReject = useCallback(() => {
+    if (!isPendingApproval) return;
+    setResponded(true);
+    onReject?.();
+  }, [isPendingApproval, onReject]);
+
+  // Keyboard: Enter = approve, Escape = reject (when pending)
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (!isPendingApproval) return;
+    if (e.key === 'Enter') { e.preventDefault(); handleApprove(); }
+    else if (e.key === 'Escape') { e.preventDefault(); handleReject(); }
+  }, [isPendingApproval, handleApprove, handleReject]);
+
+  // Auto-focus and auto-scroll when approval is pending
+  useEffect(() => {
+    if (isPendingApproval && cardRef.current) {
+      cardRef.current.scrollIntoView({ behavior: 'smooth', block: 'end' });
+      // Small delay to let the UI render, then expand and focus
+      setExpanded(true);
+      setTimeout(() => approveBtnRef.current?.focus(), 100);
+    }
+  }, [isPendingApproval]);
+
+  // Reset responded state when approvalStatus changes (e.g. new approval)
+  useEffect(() => {
+    if (approvalStatus === 'pending') setResponded(false);
+  }, [approvalStatus]);
+
+  // Border/bg color based on approval status
+  const borderClass = approvalStatus === 'pending'
+    ? 'border-yellow-500/30 bg-yellow-500/[0.04]'
+    : approvalStatus === 'approved'
+      ? 'border-green-500/20 bg-green-500/[0.03]'
+      : approvalStatus === 'denied'
+        ? 'border-red-500/20 bg-red-500/[0.03]'
+        : 'border-border/25 bg-muted/10';
+  const statusIconClass = 'shrink-0';
+
+  const statusIcon = approvalStatus === 'pending' ? (
+    <ShieldAlert size={12} className={cn('text-yellow-500/70', statusIconClass)} />
+  ) : isLoading ? (
+    <Loader2 size={12} className={cn('animate-spin text-blue-400/70', statusIconClass)} />
+  ) : isInterrupted ? (
+    <Slash size={12} className={cn('text-muted-foreground/55', statusIconClass)} />
+  ) : isError ? (
+    <XCircle size={12} className={cn('text-red-400/70', statusIconClass)} />
+  ) : result !== undefined ? (
+    <CheckCircle2 size={12} className={cn('text-green-400/70', statusIconClass)} />
+  ) : null;
+
+  return (
+    <div
+      ref={cardRef}
+      tabIndex={isPendingApproval ? 0 : undefined}
+      onKeyDown={isPendingApproval ? handleKeyDown : undefined}
+      className={cn('rounded-md border overflow-hidden text-[12px] outline-none', borderClass, className)}
+      {...props}
+    >
+      <button
+        type="button"
+        onClick={() => setExpanded(e => !e)}
+        className="w-full flex items-center gap-2 px-3 py-1.5 hover:bg-muted/20 transition-colors cursor-pointer"
+      >
+        {expanded
+          ? <ChevronDown size={12} className="text-muted-foreground/40 shrink-0" />
+          : <ChevronRight size={12} className="text-muted-foreground/40 shrink-0" />
+        }
+        {name === 'terminal_execute' && args?.command ? (
+          <span className="font-mono text-muted-foreground/70 truncate" title={String(args.command)}>
+            <span className="text-muted-foreground/40">$ </span>{String(args.command)}
+          </span>
+        ) : (
+          <span className="font-mono text-muted-foreground/70 truncate">{name}</span>
+        )}
+        <span className="flex-1" />
+        {/* Approval badge for resolved approvals */}
+        {approvalStatus === 'approved' && (
+          <Badge className="text-[10px] px-1.5 py-0 bg-green-600/20 text-green-400 border-green-600/30">
+            {t('ai.chat.toolApproved')}
+          </Badge>
+        )}
+        {approvalStatus === 'denied' && (
+          <Badge className="text-[10px] px-1.5 py-0 bg-red-600/20 text-red-400 border-red-600/30">
+            {t('ai.chat.toolDenied')}
+          </Badge>
+        )}
+        {statusIcon}
+      </button>
+
+      {expanded && (
+        <div className="border-t border-border/20">
+          {args && Object.keys(args).length > 0 && (
+            <div className="px-3 py-2">
+              <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground/30 mb-1">Arguments</div>
+              <pre className="max-h-64 overflow-auto text-[11px] font-mono text-muted-foreground/50 whitespace-pre [overflow-wrap:normal]">
+                {JSON.stringify(args, null, 2)}
+              </pre>
+            </div>
+          )}
+
+          {/* Inline approval buttons */}
+          {isPendingApproval && (
+            <div className="px-3 py-2 border-t border-border/20">
+              <div className="flex items-center justify-between">
+                <span className="text-[10px] text-muted-foreground/30">
+                  {t('ai.chat.toolApprovalHint')}
+                </span>
+                <div className="flex items-center gap-1.5">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-6 px-2 text-[11px] border-red-500/20 text-red-400/80 hover:bg-red-500/10 hover:text-red-400"
+                    onClick={handleReject}
+                  >
+                    <X size={11} className="mr-0.5" />
+                    {t('ai.chat.reject')}
+                  </Button>
+                  <Button
+                    ref={approveBtnRef}
+                    size="sm"
+                    className="h-6 px-2.5 text-[11px] bg-green-600/80 hover:bg-green-600 text-white"
+                    onClick={handleApprove}
+                  >
+                    <Check size={11} className="mr-0.5" />
+                    {t('ai.chat.approve')}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {result !== undefined && (
+            <div className="px-3 py-2 border-t border-border/20">
+              <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground/30 mb-1">Result</div>
+              <pre className={cn(
+                'max-h-64 overflow-auto text-[11px] font-mono whitespace-pre [overflow-wrap:normal]',
+                isError ? 'text-red-400/60' : 'text-muted-foreground/50',
+              )}>
+                {formatToolResult(result)}
+              </pre>
+            </div>
+          )}
+          {isInterrupted && result === undefined && (
+            <div className="px-3 py-2 border-t border-border/20">
+              <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground/30 mb-1">Status</div>
+              <div className="text-[11px] text-muted-foreground/50">
+                Interrupted
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
--- a/components/ai/AgentIconBadge.tsx
+++ b/components/ai/AgentIconBadge.tsx
@@ -0,0 +1,232 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+
+type AgentLike = {
+  id?: string;
+  name?: string;
+  type?: 'builtin' | 'external';
+  icon?: string;
+  command?: string;
+};
+
+type AgentIconKey =
+  | 'catty'
+  | 'copilot'
+  | 'openai'
+  | 'claude'
+  | 'anthropic'
+  | 'gemini'
+  | 'google'
+  | 'ollama'
+  | 'openrouter'
+  | 'zed'
+  | 'atom'
+  | 'terminal'
+  | 'plus';
+
+type AgentIconVisual = {
+  src: string;
+  badgeClassName: string;
+  imageClassName: string;
+};
+
+const AGENT_ICON_VISUALS: Record<AgentIconKey, AgentIconVisual> = {
+  catty: {
+    src: '/ai/agents/catty.svg',
+    badgeClassName: 'border-violet-500/20 bg-violet-500/10',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert opacity-90',
+  },
+  copilot: {
+    src: '/ai/agents/copilot.svg',
+    badgeClassName: 'border-zinc-300 bg-white',
+    imageClassName: 'object-contain brightness-0',
+  },
+  openai: {
+    src: '/ai/providers/openai.svg',
+    badgeClassName: 'border-emerald-500/22 bg-emerald-500/12',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert',
+  },
+  claude: {
+    src: '/ai/agents/claude.svg',
+    badgeClassName: 'border-orange-500/22 bg-orange-500/12',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert',
+  },
+  anthropic: {
+    src: '/ai/providers/anthropic.svg',
+    badgeClassName: 'border-orange-500/22 bg-orange-500/12',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert',
+  },
+  gemini: {
+    src: '/ai/agents/gemini.svg',
+    badgeClassName: 'border-sky-500/22 bg-sky-500/12',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert',
+  },
+  google: {
+    src: '/ai/providers/google.svg',
+    badgeClassName: 'border-sky-500/22 bg-sky-500/12',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert',
+  },
+  ollama: {
+    src: '/ai/providers/ollama.svg',
+    badgeClassName: 'border-violet-500/22 bg-violet-500/12',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert',
+  },
+  openrouter: {
+    src: '/ai/providers/openrouter.svg',
+    badgeClassName: 'border-fuchsia-500/22 bg-fuchsia-500/12',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert',
+  },
+  zed: {
+    src: '/ai/agents/zed.svg',
+    badgeClassName: 'border-cyan-500/22 bg-cyan-500/12',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert',
+  },
+  atom: {
+    src: '/ai/agents/atom.svg',
+    badgeClassName: 'border-amber-500/18 bg-amber-500/10',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert opacity-90',
+  },
+  terminal: {
+    src: '/ai/agents/terminal.svg',
+    badgeClassName: 'border-white/8 bg-white/[0.04]',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert opacity-90',
+  },
+  plus: {
+    src: '/ai/agents/plus.svg',
+    badgeClassName: 'border-white/8 bg-white/[0.04]',
+    imageClassName: 'object-contain dark:brightness-0 dark:invert opacity-85',
+  },
+};
+
+function normalizeToken(value?: string): string {
+  return (value ?? '').toLowerCase().replace(/[^a-z0-9]+/g, '');
+}
+
+function getAgentIconKey(agent: AgentLike | 'add-more'): AgentIconKey {
+  if (agent === 'add-more') {
+    return 'plus';
+  }
+
+  if (agent.type === 'builtin') {
+    return 'catty';
+  }
+
+  const tokens = [
+    normalizeToken(agent.icon),
+    normalizeToken(agent.command),
+    normalizeToken(agent.name),
+    normalizeToken(agent.id),
+  ].filter(Boolean);
+
+  if (tokens.some((token) => token.includes('claude'))) {
+    return 'claude';
+  }
+  if (tokens.some((token) => token.includes('copilot'))) {
+    return 'copilot';
+  }
+  if (tokens.some((token) => token.includes('anthropic'))) {
+    return 'anthropic';
+  }
+  if (
+    tokens.some(
+      (token) =>
+        token.includes('codex') ||
+        token.includes('openai') ||
+        token.includes('chatgpt'),
+    )
+  ) {
+    return 'openai';
+  }
+  if (
+    tokens.some(
+      (token) =>
+        token.includes('gemini') ||
+        token.includes('google') ||
+        token.includes('googlegemini'),
+    )
+  ) {
+    return 'gemini';
+  }
+  if (tokens.some((token) => token.includes('ollama'))) {
+    return 'ollama';
+  }
+  if (tokens.some((token) => token.includes('openrouter'))) {
+    return 'openrouter';
+  }
+  if (tokens.some((token) => token.includes('zed'))) {
+    return 'zed';
+  }
+  if (tokens.some((token) => token.includes('factory'))) {
+    return 'atom';
+  }
+
+  return 'terminal';
+}
+
+export const AgentIconBadge: React.FC<{
+  agent: AgentLike | 'add-more';
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  variant?: 'plain' | 'badge';
+  className?: string;
+}> = ({ agent, size = 'md', variant = 'badge', className }) => {
+  const iconKey = getAgentIconKey(agent);
+  const visual = AGENT_ICON_VISUALS[iconKey];
+  const badgeSize =
+    size === 'xs'
+      ? 'h-4 w-4 rounded-sm'
+      : size === 'sm'
+        ? 'h-7 w-7 rounded-lg'
+        : size === 'lg'
+          ? 'h-10 w-10 rounded-xl'
+          : 'h-8 w-8 rounded-lg';
+  const imageSize =
+    size === 'xs'
+      ? 'h-3.5 w-3.5'
+      : size === 'sm'
+        ? 'h-3.5 w-3.5'
+        : size === 'lg'
+          ? 'h-5 w-5'
+          : 'h-4 w-4';
+
+  if (variant === 'plain') {
+    return (
+      <div
+        aria-hidden="true"
+        className={cn('shrink-0', imageSize, className)}
+        style={{
+          maskImage: `url(${visual.src})`,
+          WebkitMaskImage: `url(${visual.src})`,
+          maskSize: 'contain',
+          WebkitMaskSize: 'contain',
+          maskRepeat: 'no-repeat',
+          WebkitMaskRepeat: 'no-repeat',
+          maskPosition: 'center',
+          WebkitMaskPosition: 'center',
+          backgroundColor: 'currentColor',
+        }}
+      />
+    );
+  }
+
+  return (
+    <div
+      data-agent-badge=""
+      className={cn(
+        'flex shrink-0 items-center justify-center overflow-hidden border',
+        badgeSize,
+        visual.badgeClassName,
+        className,
+      )}
+    >
+      <img
+        src={visual.src}
+        alt=""
+        aria-hidden="true"
+        draggable={false}
+        className={cn(imageSize, visual.imageClassName)}
+      />
+    </div>
+  );
+};
+
+export default AgentIconBadge;
--- a/components/ai/AgentSelector.tsx
+++ b/components/ai/AgentSelector.tsx
@@ -0,0 +1,289 @@
+/**
+ * AgentSelector - Dropdown for switching between AI agents
+ *
+ * Dark, grouped agent menu with local SVG branding for built-in,
+ * discovered, and external agents.
+ */
+
+import { ChevronDown, RefreshCw, Plus, Settings } from 'lucide-react';
+import React, { useCallback, useMemo, useState } from 'react';
+import { cn } from '../../lib/utils';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import {
+  isSettingsManagedDiscoveredAgent,
+  matchesManagedAgentConfig,
+} from '../../infrastructure/ai/managedAgents';
+import type { AgentInfo, ExternalAgentConfig, DiscoveredAgent } from '../../infrastructure/ai/types';
+import AgentIconBadge from './AgentIconBadge';
+import {
+  Dropdown,
+  DropdownContent,
+  DropdownTrigger,
+} from '../ui/dropdown';
+
+interface AgentSelectorProps {
+  currentAgentId: string;
+  externalAgents: ExternalAgentConfig[];
+  discoveredAgents?: DiscoveredAgent[];
+  isDiscovering?: boolean;
+  onSelectAgent: (agentId: string) => void;
+  onEnableDiscoveredAgent?: (agent: DiscoveredAgent) => void;
+  onRediscover?: () => void;
+  onManageAgents?: () => void;
+}
+
+const BUILTIN_AGENTS: AgentInfo[] = [
+  {
+    id: 'catty',
+    name: 'Catty Agent',
+    type: 'builtin',
+    description: 'Built-in terminal assistant',
+    available: true,
+  },
+];
+
+const SectionLabel: React.FC<{ children: React.ReactNode; action?: React.ReactNode }> = ({ children, action }) => (
+  <div className="px-4 pb-2 pt-2 flex items-center justify-between">
+    <span className="text-[10px] font-medium tracking-wide text-muted-foreground/52">
+      {children}
+    </span>
+    {action}
+  </div>
+);
+
+const AgentMenuRow: React.FC<{
+  agent: AgentInfo;
+  isActive?: boolean;
+  subtitle?: string;
+  onClick: () => void;
+}> = ({ agent, isActive, subtitle, onClick }) => {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'flex h-10 w-full items-center gap-3 px-4 text-left text-[13px] text-foreground/86 transition-colors cursor-pointer hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/30',
+        isActive && 'bg-muted',
+      )}
+    >
+      <AgentIconBadge agent={agent} size="xs" variant="plain" className="opacity-78" />
+      <div className="min-w-0 flex-1">
+        <span className="block truncate">{agent.name}</span>
+        {subtitle && (
+          <span className="block truncate text-[10px] text-muted-foreground/40">{subtitle}</span>
+        )}
+      </div>
+    </button>
+  );
+};
+
+const DiscoveredAgentRow: React.FC<{
+  agent: DiscoveredAgent;
+  onEnable: () => void;
+}> = ({ agent, onEnable }) => {
+  const agentLike: AgentInfo = {
+    id: `discovered_${agent.command}`,
+    name: agent.name,
+    type: 'external',
+    icon: agent.icon,
+    command: agent.command,
+    available: true,
+  };
+
+  return (
+    <div className="flex h-10 w-full items-center gap-3 rounded-md px-4 text-[13px]">
+      <AgentIconBadge agent={agentLike} size="xs" variant="plain" className="opacity-78" />
+      <div className="min-w-0 flex-1">
+        <span className="block truncate text-foreground/86">{agent.name}</span>
+        <span className="block truncate text-[10px] text-muted-foreground/40">
+          {agent.version || agent.path}
+        </span>
+      </div>
+      <button
+        onClick={onEnable}
+        className="shrink-0 rounded-md px-2 py-0.5 text-[11px] font-medium text-primary/80 hover:bg-primary/10 hover:text-primary transition-colors cursor-pointer"
+        title={`Enable ${agent.name}`}
+      >
+        <Plus size={12} />
+      </button>
+    </div>
+  );
+};
+
+const AgentSelector: React.FC<AgentSelectorProps> = ({
+  currentAgentId,
+  externalAgents,
+  discoveredAgents = [],
+  isDiscovering = false,
+  onSelectAgent,
+  onEnableDiscoveredAgent,
+  onRediscover,
+  onManageAgents,
+}) => {
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+
+  const enabledExternalAgents = useMemo(
+    () =>
+      externalAgents
+        .filter((agent) => agent.enabled)
+        .map(
+          (agent): AgentInfo => ({
+            id: agent.id,
+            name: agent.name,
+            type: 'external',
+            icon: agent.icon,
+            command: agent.command,
+            args: agent.args,
+            available: true,
+          }),
+        ),
+    [externalAgents],
+  );
+
+  // Discovered agents not yet added to external agents
+  const unconfiguredDiscovered = useMemo(
+    () =>
+      discoveredAgents.filter(
+        (da) => {
+          if (isSettingsManagedDiscoveredAgent(da)) {
+            return !externalAgents.some((ea) => matchesManagedAgentConfig(ea, da.command));
+          }
+          return !externalAgents.some((ea) => ea.command === da.command || ea.command === da.path);
+        },
+      ),
+    [discoveredAgents, externalAgents],
+  );
+
+  const allAgents = useMemo(
+    () => [...BUILTIN_AGENTS, ...enabledExternalAgents],
+    [enabledExternalAgents],
+  );
+
+  const currentAgent = useMemo(
+    () => allAgents.find((agent) => agent.id === currentAgentId) ?? BUILTIN_AGENTS[0],
+    [allAgents, currentAgentId],
+  );
+
+  const handleSelect = useCallback(
+    (agentId: string) => {
+      onSelectAgent(agentId);
+      setOpen(false);
+    },
+    [onSelectAgent],
+  );
+
+  const handleEnableDiscovered = useCallback(
+    (agent: DiscoveredAgent) => {
+      onEnableDiscoveredAgent?.(agent);
+      // After enabling, auto-select it
+      const agentId = `discovered_${agent.command}`;
+      onSelectAgent(agentId);
+      setOpen(false);
+    },
+    [onEnableDiscoveredAgent, onSelectAgent],
+  );
+
+  const handleManageAgents = useCallback(() => {
+    setOpen(false);
+    onManageAgents?.();
+  }, [onManageAgents]);
+
+  return (
+    <Dropdown open={open} onOpenChange={setOpen}>
+      <DropdownTrigger asChild>
+        <button
+          type="button"
+          className="group flex h-8 min-w-0 max-w-[170px] items-center gap-2 rounded-md px-2 text-left transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/28"
+        >
+          <AgentIconBadge
+            agent={currentAgent}
+            size="xs"
+            variant="plain"
+            className="opacity-78"
+          />
+          <span className="min-w-0 flex-1 truncate text-[13px] font-medium text-foreground/90">
+            {currentAgent.name}
+          </span>
+          <ChevronDown
+            size={12}
+            className={cn(
+              'shrink-0 text-muted-foreground/60 transition-transform',
+              open && 'rotate-180',
+            )}
+          />
+        </button>
+      </DropdownTrigger>
+
+      <DropdownContent
+        align="start"
+        sideOffset={6}
+        className="w-[288px] overflow-hidden rounded-2xl border border-border/50 bg-popover p-0 text-foreground shadow-lg supports-[backdrop-filter]:backdrop-blur-xl"
+      >
+        {BUILTIN_AGENTS.map((agent) => (
+          <AgentMenuRow
+            key={agent.id}
+            agent={agent}
+            isActive={currentAgentId === agent.id}
+            onClick={() => handleSelect(agent.id)}
+          />
+        ))}
+
+        {enabledExternalAgents.length > 0 && (
+          <>
+            <div className="mx-0 my-1 border-t border-border/50" />
+            <SectionLabel>{t('ai.chat.agents')}</SectionLabel>
+            {enabledExternalAgents.map((agent) => (
+              <AgentMenuRow
+                key={agent.id}
+                agent={agent}
+                isActive={currentAgentId === agent.id}
+                subtitle={agent.command}
+                onClick={() => handleSelect(agent.id)}
+              />
+            ))}
+          </>
+        )}
+
+        {unconfiguredDiscovered.length > 0 && (
+          <>
+            <div className="mx-0 my-1 border-t border-border/50" />
+            <SectionLabel
+              action={
+                onRediscover && (
+                  <button
+                    onClick={onRediscover}
+                    disabled={isDiscovering}
+                    className="text-[10px] text-muted-foreground/40 hover:text-muted-foreground/70 transition-colors cursor-pointer disabled:opacity-50"
+                    title={t('ai.chat.rescan')}
+                  >
+                    <RefreshCw size={10} className={cn(isDiscovering && 'animate-spin')} />
+                  </button>
+                )
+              }
+            >
+              {t('ai.chat.detectedOnMachine')}
+            </SectionLabel>
+            {unconfiguredDiscovered.map((agent) => (
+              <DiscoveredAgentRow
+                key={agent.command}
+                agent={agent}
+                onEnable={() => handleEnableDiscovered(agent)}
+              />
+            ))}
+          </>
+        )}
+
+        <div className="mx-0 my-1 border-t border-border/50" />
+        <button
+          onClick={handleManageAgents}
+          className="flex h-10 w-full items-center gap-3 px-4 text-left text-[13px] text-foreground/82 transition-colors cursor-pointer hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/30"
+        >
+          <Settings size={16} className="opacity-72 shrink-0" />
+          <span className="min-w-0 flex-1 truncate">{t('ai.agentSettings')}</span>
+        </button>
+      </DropdownContent>
+    </Dropdown>
+  );
+};
+
+export default React.memo(AgentSelector);
--- a/components/ai/ChatInput.tsx
+++ b/components/ai/ChatInput.tsx
@@ -0,0 +1,562 @@
+/**
+ * ChatInput - Zed-style bottom input area for the AI chat panel
+ *
+ * Thin wrapper around the AI Elements prompt-input components.
+ * Bordered textarea with monospace placeholder, expand toggle,
+ * and a bottom toolbar with muted controls + subtle send button.
+ */
+
+import { AtSign, Check, ChevronDown, ChevronRight, Cpu, Expand, Eye, FileText, ImageIcon, Plus, ShieldCheck, X, Zap } from 'lucide-react';
+import React, { useCallback, useRef, useState } from 'react';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import { createPortal } from 'react-dom';
+import type { FormEvent } from 'react';
+import type { UploadedFile } from '../../application/state/useFileUpload';
+import {
+  PromptInput,
+  PromptInputFooter,
+  PromptInputSubmit,
+  PromptInputTextarea,
+  PromptInputTools,
+} from '../ai-elements/prompt-input';
+import type { PromptInputStatus } from '../ai-elements/prompt-input';
+import { formatThinkingLabel } from '../../infrastructure/ai/types';
+import type { AgentModelPreset, AIPermissionMode } from '../../infrastructure/ai/types';
+
+interface ChatInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSend: () => void;
+  onStop?: () => void;
+  isStreaming?: boolean;
+  disabled?: boolean;
+  providerName?: string;
+  modelName?: string;
+  agentName?: string;
+  placeholder?: string;
+  /** Available model presets for the current agent */
+  modelPresets?: AgentModelPreset[];
+  /** Currently selected model ID */
+  selectedModelId?: string;
+  /** Callback when user selects a model */
+  onModelSelect?: (modelId: string) => void;
+  /** Attached files (images, PDFs, etc.) */
+  files?: UploadedFile[];
+  /** Callback to add files (paste/drop) */
+  onAddFiles?: (files: File[]) => void;
+  /** Callback to remove a file */
+  onRemoveFile?: (id: string) => void;
+  /** Available hosts for @ mention */
+  hosts?: Array<{ sessionId: string; hostname: string; label: string; connected: boolean }>;
+  /** Permission mode (only shown for Catty Agent) */
+  permissionMode?: AIPermissionMode;
+  /** Callback when user changes permission mode */
+  onPermissionModeChange?: (mode: AIPermissionMode) => void;
+}
+
+const ChatInput: React.FC<ChatInputProps> = ({
+  value,
+  onChange,
+  onSend,
+  onStop,
+  isStreaming = false,
+  disabled = false,
+  providerName,
+  modelName,
+  agentName,
+  placeholder,
+  modelPresets = [],
+  selectedModelId,
+  onModelSelect,
+  files = [],
+  onAddFiles,
+  onRemoveFile,
+  hosts = [],
+  permissionMode,
+  onPermissionModeChange,
+}) => {
+  const { t } = useI18n();
+  const [expanded, setExpanded] = useState(false);
+  // Consolidate menu state into a single discriminated union to prevent multiple menus open simultaneously
+  type ActiveMenu = 'model' | 'attach' | 'atMention' | 'perm' | null;
+  const [activeMenu, setActiveMenu] = useState<ActiveMenu>(null);
+  const [menuPos, setMenuPos] = useState<{ left: number; bottom: number } | null>(null);
+  const [hoveredModelId, setHoveredModelId] = useState<string | null>(null);
+  const [showHostSubmenu, setShowHostSubmenu] = useState(false);
+
+  // Derived booleans for readability
+  const showModelPicker = activeMenu === 'model';
+  const showAttachMenu = activeMenu === 'attach';
+  const showAtMention = activeMenu === 'atMention';
+  const showPermPicker = activeMenu === 'perm';
+
+  const closeAllMenus = useCallback(() => {
+    setActiveMenu(null);
+    setMenuPos(null);
+    setHoveredModelId(null);
+    setShowHostSubmenu(false);
+  }, []);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const modelBtnRef = useRef<HTMLButtonElement>(null);
+  const permBtnRef = useRef<HTMLButtonElement>(null);
+  const attachBtnRef = useRef<HTMLButtonElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleInputChange = useCallback((newValue: string) => {
+    onChange(newValue);
+    // Detect if user just typed @
+    if (
+      hosts.length > 0 &&
+      newValue.length > value.length &&
+      newValue.endsWith('@')
+    ) {
+      // Position the popover near the textarea
+      const el = textareaRef.current;
+      if (el) {
+        const rect = el.getBoundingClientRect();
+        setMenuPos({ left: rect.left + 12, bottom: window.innerHeight - rect.top + 4 });
+      }
+      setActiveMenu('atMention');
+    } else if (showAtMention && !newValue.includes('@')) {
+      setActiveMenu(null);
+    }
+  }, [onChange, value, hosts.length, showAtMention]);
+
+  const handleSelectAtMention = useCallback((host: { label: string; hostname: string }) => {
+    // Replace the trailing @ with @hostname
+    const name = host.label || host.hostname;
+    const lastAt = value.lastIndexOf('@');
+    const newValue = lastAt >= 0
+      ? value.slice(0, lastAt) + `@${name} `
+      : value + `@${name} `;
+    onChange(newValue);
+    closeAllMenus();
+  }, [value, onChange, closeAllMenus]);
+
+  const handlePaste = useCallback((e: React.ClipboardEvent) => {
+    const pastedFiles = Array.from(e.clipboardData.items)
+      .map((item) => item.getAsFile())
+      .filter(Boolean) as File[];
+    if (pastedFiles.length > 0) {
+      e.preventDefault();
+      onAddFiles?.(pastedFiles);
+    }
+  }, [onAddFiles]);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    const droppedFiles = Array.from(e.dataTransfer.files);
+    if (droppedFiles.length > 0) {
+      onAddFiles?.(droppedFiles);
+    }
+  }, [onAddFiles]);
+
+  const defaultPlaceholder = agentName
+    ? t('ai.chat.placeholder').replace('{agent}', agentName)
+    : t('ai.chat.placeholderDefault');
+
+  const handleSubmit = useCallback(
+    (_text: string, _event: FormEvent<HTMLFormElement>) => {
+      onSend();
+    },
+    [onSend],
+  );
+
+  const status: PromptInputStatus = isStreaming ? 'streaming' : 'idle';
+
+  // Permission mode chip removed — agents run in autonomous mode
+
+  // selectedModelId may be "model/thinking" for codex
+  const selectedBaseModelId = selectedModelId?.split('/')[0];
+  const selectedThinking = selectedModelId?.includes('/') ? selectedModelId.split('/')[1] : undefined;
+  const selectedPreset = modelPresets.find(m => m.id === selectedBaseModelId);
+  const modelLabel = selectedPreset
+    ? selectedPreset.name + (selectedThinking ? ` / ${formatThinkingLabel(selectedThinking)}` : '')
+    : modelName || providerName || t('ai.chat.noModel');
+  const hasModelPicker = modelPresets.length > 0 && onModelSelect;
+  const chipClassName =
+    'inline-flex h-6 items-center gap-1 rounded-full px-1.5 text-[10.5px] text-foreground/72';
+  const iconButtonClassName =
+    'h-6 w-6 rounded-full bg-transparent text-foreground/62 hover:bg-muted/24 hover:text-foreground';
+
+  return (
+    <div className="shrink-0 px-4 pb-4">
+      <PromptInput onSubmit={handleSubmit}>
+        {/* File attachment chips */}
+        {files.length > 0 && (
+          <div className="flex gap-1.5 px-3 pt-2 pb-0.5 flex-wrap">
+            {files.map((file) => (
+              <div
+                key={file.id}
+                className="inline-flex items-center gap-1 h-6 pl-1.5 pr-1 rounded-md bg-muted/30 border border-border/30 text-[11px] text-foreground/70 group"
+              >
+                {file.mediaType.startsWith('image/') ? (
+                  <ImageIcon size={11} className="text-muted-foreground/60 shrink-0" />
+                ) : (
+                  <FileText size={11} className="text-muted-foreground/60 shrink-0" />
+                )}
+                <span className="truncate max-w-[80px]">{file.filename}</span>
+                <button
+                  type="button"
+                  onClick={() => onRemoveFile?.(file.id)}
+                  className="h-3.5 w-3.5 rounded-sm flex items-center justify-center opacity-50 hover:opacity-100 hover:bg-muted/50 transition-opacity cursor-pointer"
+                >
+                  <X size={8} />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+        {/* Hidden file input */}
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          multiple
+          className="hidden"
+          onChange={(e) => {
+            if (e.target.files?.length) {
+              onAddFiles?.(Array.from(e.target.files));
+              e.target.value = '';
+            }
+          }}
+        />
+
+        {/* Textarea with expand toggle */}
+        <div className="relative" onPaste={handlePaste} onDrop={handleDrop} onDragOver={(e) => e.preventDefault()}>
+          <PromptInputTextarea
+            ref={textareaRef}
+            value={value}
+            onChange={(e) => handleInputChange(e.target.value)}
+            placeholder={placeholder || defaultPlaceholder}
+            disabled={disabled}
+            className={expanded ? 'max-h-[220px]' : undefined}
+          />
+          <button
+            type="button"
+            onClick={() => setExpanded((e) => !e)}
+            className="absolute top-3.5 right-3 rounded-md p-1 text-muted-foreground/38 hover:text-muted-foreground/72 hover:bg-muted/25 transition-colors cursor-pointer"
+            title={expanded ? 'Collapse' : 'Expand'}
+          >
+            <Expand size={12} />
+          </button>
+        </div>
+
+        {/* @ mention popover */}
+        {showAtMention && hosts.length > 0 && menuPos && createPortal(
+          <>
+            <div className="fixed inset-0 z-[999]" onClick={closeAllMenus} />
+            <div
+              role="listbox"
+              aria-label="Mention host"
+              className="fixed z-[1000] min-w-[160px] rounded-lg border border-border/50 bg-popover shadow-lg py-1"
+              style={{ left: menuPos.left, bottom: menuPos.bottom }}
+            >
+              <div className="px-3 py-1 text-[10px] text-muted-foreground/40 tracking-wide">{t('ai.chat.menuHosts')}</div>
+              {hosts.map(host => (
+                <button
+                  key={host.sessionId}
+                  type="button"
+                  role="option"
+                  onClick={() => handleSelectAtMention(host)}
+                  className="w-full flex items-center gap-2 px-3 py-1.5 text-left text-[12px] hover:bg-muted/30 transition-colors cursor-pointer whitespace-nowrap"
+                >
+                  <span className={`h-1.5 w-1.5 rounded-full shrink-0 ${host.connected ? 'bg-green-500' : 'bg-muted-foreground/30'}`} />
+                  <span className="text-foreground/85 truncate">{host.label || host.hostname}</span>
+                  {host.label && host.hostname !== host.label && (
+                    <span className="text-[10px] text-muted-foreground/40">{host.hostname}</span>
+                  )}
+                </button>
+              ))}
+            </div>
+          </>,
+          document.body,
+        )}
+
+        {/* Footer toolbar */}
+        <PromptInputFooter className="gap-1.5 border-t-0 bg-transparent px-3 pb-2 pt-0">
+          <PromptInputTools className="gap-1 flex-wrap">
+            <button
+              ref={attachBtnRef}
+              type="button"
+              onClick={() => {
+                if (!showAttachMenu) {
+                  const rect = attachBtnRef.current?.getBoundingClientRect();
+                  if (rect) setMenuPos({ left: rect.left, bottom: window.innerHeight - rect.top + 6 });
+                  setActiveMenu('attach');
+                } else {
+                  closeAllMenus();
+                }
+              }}
+              className={iconButtonClassName}
+              title="Attach"
+              aria-label="Attach file"
+              aria-expanded={showAttachMenu}
+            >
+              <Plus size={13} />
+            </button>
+            {showAttachMenu && menuPos && createPortal(
+              <>
+                <div className="fixed inset-0 z-[999]" onClick={closeAllMenus} />
+                <div
+                  role="menu"
+                  className="fixed z-[1000] min-w-[170px] rounded-lg border border-border/50 bg-popover shadow-lg py-1"
+                  style={{ left: menuPos.left, bottom: menuPos.bottom }}
+                >
+                  <div className="px-3 py-1 text-[10px] text-muted-foreground/40 tracking-wide">{t('ai.chat.menuContext')}</div>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={() => { fileInputRef.current?.setAttribute('accept', '*/*'); fileInputRef.current?.click(); closeAllMenus(); }}
+                    className="w-full flex items-center gap-2.5 px-3 py-1.5 text-left text-[12px] hover:bg-muted/30 transition-colors cursor-pointer whitespace-nowrap"
+                  >
+                    <FileText size={13} className="text-muted-foreground/60" />
+                    <span className="text-foreground/85">{t('ai.chat.menuFiles')}</span>
+                  </button>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={() => { fileInputRef.current?.setAttribute('accept', 'image/*'); fileInputRef.current?.click(); closeAllMenus(); }}
+                    className="w-full flex items-center gap-2.5 px-3 py-1.5 text-left text-[12px] hover:bg-muted/30 transition-colors cursor-pointer whitespace-nowrap"
+                  >
+                    <ImageIcon size={13} className="text-muted-foreground/60" />
+                    <span className="text-foreground/85">{t('ai.chat.menuImage')}</span>
+                  </button>
+                  <div
+                    className="relative"
+                    onMouseEnter={() => setShowHostSubmenu(true)}
+                    onMouseLeave={() => setShowHostSubmenu(false)}
+                    onFocus={() => setShowHostSubmenu(true)}
+                    onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) setShowHostSubmenu(false); }}
+                  >
+                    <button
+                      type="button"
+                      role="menuitem"
+                      aria-label="Mention host"
+                      aria-expanded={showHostSubmenu && hosts.length > 0}
+                      className="w-full flex items-center gap-2.5 px-3 py-1.5 text-left text-[12px] hover:bg-muted/30 transition-colors cursor-pointer whitespace-nowrap"
+                    >
+                      <AtSign size={13} className="text-muted-foreground/60" />
+                      <span className="flex-1 text-foreground/85">{t('ai.chat.menuMentionHost')}</span>
+                      {hosts.length > 0 && <ChevronRight size={10} className="text-muted-foreground/50" />}
+                    </button>
+                    {showHostSubmenu && hosts.length > 0 && (
+                      <div role="menu" className="absolute left-full top-0 ml-1 min-w-[160px] rounded-lg border border-border/50 bg-popover shadow-lg py-1 z-[1001]">
+                        {hosts.map(host => (
+                          <button
+                            key={host.sessionId}
+                            type="button"
+                            role="menuitem"
+                            onClick={() => {
+                              const mention = `@${host.label || host.hostname} `;
+                              onChange(value + mention);
+                              closeAllMenus();
+                            }}
+                            className="w-full flex items-center gap-2 px-3 py-1.5 text-left text-[12px] hover:bg-muted/30 transition-colors cursor-pointer whitespace-nowrap"
+                          >
+                            <span className={`h-1.5 w-1.5 rounded-full shrink-0 ${host.connected ? 'bg-green-500' : 'bg-muted-foreground/30'}`} />
+                            <span className="text-foreground/85 truncate">{host.label || host.hostname}</span>
+                            {host.label && host.hostname !== host.label && (
+                              <span className="text-[10px] text-muted-foreground/40">{host.hostname}</span>
+                            )}
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </>,
+              document.body,
+            )}
+            <button
+              ref={modelBtnRef}
+              type="button"
+              onClick={() => {
+                if (!hasModelPicker) return;
+                if (!showModelPicker) {
+                  const rect = modelBtnRef.current?.getBoundingClientRect();
+                  if (rect) setMenuPos({ left: rect.left, bottom: window.innerHeight - rect.top + 6 });
+                  setActiveMenu('model');
+                } else {
+                  closeAllMenus();
+                }
+              }}
+              className={`${chipClassName} ${hasModelPicker ? 'cursor-pointer hover:bg-muted/24 transition-colors' : ''}`}
+              aria-label="Select model"
+              aria-expanded={showModelPicker}
+            >
+              <Cpu size={11} className="text-muted-foreground/64" />
+              <span className="truncate max-w-[82px]">{modelLabel}</span>
+              {hasModelPicker && <ChevronDown size={9} className="text-muted-foreground/50" />}
+            </button>
+            {showModelPicker && hasModelPicker && menuPos && createPortal(
+              <>
+                <div className="fixed inset-0 z-[999]" onClick={closeAllMenus} />
+                <div
+                  role="listbox"
+                  aria-label="Select model"
+                  className="fixed z-[1000] min-w-[160px] rounded-lg border border-border/50 bg-popover shadow-lg py-1"
+                  style={{ left: menuPos.left, bottom: menuPos.bottom }}
+                  onMouseLeave={() => setHoveredModelId(null)}
+                >
+                  {modelPresets.map(preset => {
+                    const isSelected = preset.id === selectedBaseModelId;
+                    const hasThinking = preset.thinkingLevels && preset.thinkingLevels.length > 0;
+                    return (
+                      <div
+                        key={preset.id}
+                        className="relative"
+                        onMouseEnter={() => setHoveredModelId(hasThinking ? preset.id : null)}
+                        onFocus={() => { if (hasThinking) setHoveredModelId(preset.id); }}
+                        onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) setHoveredModelId(null); }}
+                      >
+                        <button
+                          type="button"
+                          role="option"
+                          aria-selected={isSelected}
+                          onClick={() => {
+                            if (!hasThinking) {
+                              onModelSelect?.(preset.id);
+                              closeAllMenus();
+                            }
+                          }}
+                          className="w-full flex items-center gap-1.5 px-3 py-1.5 text-left text-[12px] hover:bg-muted/30 transition-colors cursor-pointer whitespace-nowrap"
+                        >
+                          {isSelected ? <Check size={11} className="text-primary shrink-0" /> : <span className="w-[11px] shrink-0" />}
+                          <span className="flex-1 text-foreground/85">{preset.name}</span>
+                          {preset.description && <span className="text-[10px] text-muted-foreground/50 mr-1">{preset.description}</span>}
+                          {hasThinking && <ChevronRight size={10} className="text-muted-foreground/50" />}
+                        </button>
+                        {/* Thinking level sub-menu */}
+                        {hasThinking && hoveredModelId === preset.id && (
+                          <div role="listbox" aria-label="Thinking level" className="absolute left-full top-0 ml-1 min-w-[120px] rounded-lg border border-border/50 bg-popover shadow-lg py-1 z-[1001]">
+                            {preset.thinkingLevels!.map(level => {
+                              const fullId = `${preset.id}/${level}`;
+                              const isLevelSelected = selectedModelId === fullId;
+                              return (
+                                <button
+                                  key={level}
+                                  type="button"
+                                  role="option"
+                                  aria-selected={isLevelSelected}
+                                  tabIndex={0}
+                                  onClick={() => {
+                                    onModelSelect?.(fullId);
+                                    closeAllMenus();
+                                  }}
+                                  onKeyDown={(e) => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                      e.preventDefault();
+                                      onModelSelect?.(fullId);
+                                      closeAllMenus();
+                                    } else if (e.key === 'Escape') {
+                                      e.preventDefault();
+                                      closeAllMenus();
+                                    }
+                                  }}
+                                  className="w-full flex items-center gap-1.5 px-3 py-1.5 text-left text-[12px] hover:bg-muted/30 transition-colors cursor-pointer whitespace-nowrap"
+                                >
+                                  {isLevelSelected ? <Check size={11} className="text-primary shrink-0" /> : <span className="w-[11px] shrink-0" />}
+                                  <span className="text-foreground/85">{formatThinkingLabel(level)}</span>
+                                </button>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </>,
+              document.body,
+            )}
+            {/* Permission mode chip — only for Catty Agent */}
+            {permissionMode && onPermissionModeChange && (
+              <>
+                <button
+                  ref={permBtnRef}
+                  type="button"
+                  onClick={() => {
+                    if (!showPermPicker) {
+                      const rect = permBtnRef.current?.getBoundingClientRect();
+                      if (rect) setMenuPos({ left: rect.left, bottom: window.innerHeight - rect.top + 6 });
+                      setActiveMenu('perm');
+                    } else {
+                      closeAllMenus();
+                    }
+                  }}
+                  className={`${chipClassName} cursor-pointer hover:bg-muted/24 transition-colors`}
+                  title={t('ai.safety.permissionMode')}
+                  aria-label="Permission mode"
+                  aria-expanded={showPermPicker}
+                >
+                  {permissionMode === 'observer' && <Eye size={11} className="text-blue-400/70" />}
+                  {permissionMode === 'confirm' && <ShieldCheck size={11} className="text-yellow-400/70" />}
+                  {permissionMode === 'autonomous' && <Zap size={11} className="text-green-400/70" />}
+                  <span className="truncate max-w-[72px]">
+                    {permissionMode === 'observer' && t('ai.chat.permObserver')}
+                    {permissionMode === 'confirm' && t('ai.chat.permConfirm')}
+                    {permissionMode === 'autonomous' && t('ai.chat.permAuto')}
+                  </span>
+                  <ChevronDown size={9} className="text-muted-foreground/50" />
+                </button>
+                {showPermPicker && menuPos && createPortal(
+                  <>
+                    <div className="fixed inset-0 z-[999]" onClick={closeAllMenus} />
+                    <div
+                      role="listbox"
+                      aria-label="Permission mode"
+                      className="fixed z-[1000] min-w-[180px] rounded-lg border border-border/50 bg-popover shadow-lg py-1"
+                      style={{ left: menuPos.left, bottom: menuPos.bottom }}
+                    >
+                      {([
+                        { mode: 'autonomous' as const, icon: Zap, color: 'text-green-400/70', label: t('ai.chat.permAuto'), desc: t('ai.chat.permAutoDesc') },
+                        { mode: 'confirm' as const, icon: ShieldCheck, color: 'text-yellow-400/70', label: t('ai.chat.permConfirm'), desc: t('ai.chat.permConfirmDesc') },
+                        { mode: 'observer' as const, icon: Eye, color: 'text-blue-400/70', label: t('ai.chat.permObserver'), desc: t('ai.chat.permObserverDesc') },
+                      ]).map(({ mode, icon: Icon, color, label, desc }) => (
+                        <button
+                          key={mode}
+                          type="button"
+                          role="option"
+                          aria-selected={permissionMode === mode}
+                          onClick={() => {
+                            onPermissionModeChange(mode);
+                            closeAllMenus();
+                          }}
+                          className="w-full flex items-center gap-2 px-3 py-1.5 text-left text-[12px] hover:bg-muted/30 transition-colors cursor-pointer"
+                        >
+                          {permissionMode === mode
+                            ? <Check size={11} className="text-primary shrink-0" />
+                            : <span className="w-[11px] shrink-0" />
+                          }
+                          <Icon size={12} className={`${color} shrink-0`} />
+                          <div className="flex-1 min-w-0">
+                            <div className="text-foreground/85">{label}</div>
+                            <div className="text-[10px] text-muted-foreground/40 leading-tight">{desc}</div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  </>,
+                  document.body,
+                )}
+              </>
+            )}
+          </PromptInputTools>
+
+          <div className="flex-1 min-w-0" />
+
+          <div className="flex items-center gap-1">
+            <PromptInputSubmit
+              status={status}
+              onStop={onStop}
+              disabled={!value.trim() || disabled}
+            />
+          </div>
+        </PromptInputFooter>
+      </PromptInput>
+    </div>
+  );
+};
+
+export default React.memo(ChatInput);
--- a/components/ai/ChatMessageList.tsx
+++ b/components/ai/ChatMessageList.tsx
@@ -0,0 +1,464 @@
+/**
+ * ChatMessageList - Renders the list of chat messages
+ *
+ * Claude-Code-style: user messages in bordered bubbles (right-aligned),
+ * assistant responses as plain text (left-aligned, no border/bg).
+ * No avatars. Thinking blocks are collapsible.
+ */
+
+import { AlertCircle, FileText, RotateCcw, X, ZoomIn, ZoomOut } from 'lucide-react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import type { ChatMessage } from '../../infrastructure/ai/types';
+import { Dialog, DialogContent, DialogTitle } from '../ui/dialog';
+import {
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+} from '../ai-elements/conversation';
+import { Message, MessageContent, MessageResponse } from '../ai-elements/message';
+import { ToolCall } from '../ai-elements/tool-call';
+import ThinkingBlock from './ThinkingBlock';
+import {
+  onApprovalRequest,
+  onApprovalCleared,
+  replayPendingApprovals,
+  resolveApproval,
+  type ApprovalRequest,
+} from '../../infrastructure/ai/shared/approvalGate';
+
+interface ChatMessageListProps {
+  messages: ChatMessage[];
+  isStreaming?: boolean;
+  /** Active chat session ID — used to filter standalone MCP approval blocks */
+  activeSessionId?: string | null;
+}
+
+const ChatMessageList: React.FC<ChatMessageListProps> = ({ messages, isStreaming, activeSessionId }) => {
+  // Track pending approvals from the approval gate
+  const [pendingApprovals, setPendingApprovals] = useState<Map<string, ApprovalRequest>>(new Map());
+  const [resolvedApprovals, setResolvedApprovals] = useState<Map<string, boolean>>(new Map());
+
+  // Subscribe to approval gate events (SDK + MCP tool calls)
+  useEffect(() => {
+    const handler = (request: ApprovalRequest) => {
+      setPendingApprovals(prev => new Map(prev).set(request.toolCallId, request));
+    };
+    const unsub = onApprovalRequest(handler);
+    // Replay any approvals that fired while this component was unmounted
+    replayPendingApprovals(handler);
+    return unsub;
+  }, []);
+
+  // Subscribe to approval cleared/removed events (fired on session stop or timeout)
+  useEffect(() => {
+    return onApprovalCleared((clearedIds) => {
+      setPendingApprovals(prev => {
+        const m = new Map(prev);
+        for (const id of clearedIds) m.delete(id);
+        return m;
+      });
+    });
+  }, []);
+
+  const handleApprove = useCallback((toolCallId: string) => {
+    resolveApproval(toolCallId, true);
+    setPendingApprovals(prev => { const m = new Map(prev); m.delete(toolCallId); return m; });
+    setResolvedApprovals(prev => new Map(prev).set(toolCallId, true));
+  }, []);
+
+  const handleReject = useCallback((toolCallId: string) => {
+    resolveApproval(toolCallId, false);
+    setPendingApprovals(prev => { const m = new Map(prev); m.delete(toolCallId); return m; });
+    setResolvedApprovals(prev => new Map(prev).set(toolCallId, false));
+  }, []);
+  const [preview, setPreview] = useState<{ src: string; name: string } | null>(null);
+  const [zoom, setZoom] = useState(100);
+  const [dragged, setDragged] = useState(false);
+  const imgRef = useRef<HTMLImageElement>(null);
+  const dragPos = useRef({ x: 0, y: 0 });
+  const dragStart = useRef<{ startX: number; startY: number; origX: number; origY: number } | null>(null);
+
+  const applyTransform = useCallback((z: number, x: number, y: number, animate: boolean) => {
+    if (!imgRef.current) return;
+    imgRef.current.style.transition = animate ? 'transform 0.25s ease' : 'none';
+    imgRef.current.style.transform = `scale(${z / 100}) translate(${x / (z / 100)}px, ${y / (z / 100)}px)`;
+  }, []);
+
+  const zoomRef = useRef(100);
+  const setZoomAndRef = useCallback((fn: (z: number) => number) => {
+    setZoom(z => { const nz = fn(z); zoomRef.current = nz; return nz; });
+  }, []);
+  const zoomIn = useCallback(() => setZoomAndRef(z => { const nz = Math.min(z + 25, 200); applyTransform(nz, dragPos.current.x, dragPos.current.y, true); return nz; }), [applyTransform, setZoomAndRef]);
+  const zoomOut = useCallback(() => setZoomAndRef(z => { const nz = Math.max(z - 25, 25); applyTransform(nz, dragPos.current.x, dragPos.current.y, true); return nz; }), [applyTransform, setZoomAndRef]);
+
+  const onWheel = useCallback((e: React.WheelEvent) => {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -10 : 10;
+    setZoomAndRef(z => {
+      const nz = Math.max(25, Math.min(200, z + delta));
+      applyTransform(nz, dragPos.current.x, dragPos.current.y, false);
+      return nz;
+    });
+  }, [applyTransform, setZoomAndRef]);
+  const openPreview = useCallback((src: string, name: string) => {
+    setZoom(100); zoomRef.current = 100;
+    setDragged(false);
+    dragPos.current = { x: 0, y: 0 };
+    setPreview({ src, name });
+  }, []);
+
+  const resetPreview = useCallback(() => {
+    setZoom(100); zoomRef.current = 100;
+    setDragged(false);
+    dragPos.current = { x: 0, y: 0 };
+    applyTransform(100, 0, 0, true);
+  }, [applyTransform]);
+
+  const onPointerDown = useCallback((e: React.PointerEvent) => {
+    e.preventDefault();
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    dragStart.current = { startX: e.clientX, startY: e.clientY, origX: dragPos.current.x, origY: dragPos.current.y };
+  }, []);
+
+  const onPointerMove = useCallback((e: React.PointerEvent) => {
+    if (!dragStart.current) return;
+    if ((e.buttons & 1) === 0) { dragStart.current = null; return; }
+    const x = dragStart.current.origX + (e.clientX - dragStart.current.startX);
+    const y = dragStart.current.origY + (e.clientY - dragStart.current.startY);
+    dragPos.current = { x, y };
+    applyTransform(zoomRef.current, x, y, false);
+  }, [applyTransform]);
+
+  const endDrag = useCallback(() => {
+    if (dragStart.current && (dragPos.current.x !== 0 || dragPos.current.y !== 0)) {
+      setDragged(true);
+    }
+    dragStart.current = null;
+  }, []);
+  const { t } = useI18n();
+  const visibleMessages = messages.filter(m => m.role !== 'system');
+  const resolvedToolCallIds = new Set(
+    visibleMessages
+      .filter((m) => m.role === 'tool')
+      .flatMap((m) => m.toolResults?.map((tr) => tr.toolCallId) ?? []),
+  );
+
+  // Build maps from toolCallId → toolName / toolArgs for display
+  const toolCallNames = new Map<string, string>();
+  const toolCallArgs = new Map<string, Record<string, unknown>>();
+  for (const m of visibleMessages) {
+    if (m.role === 'assistant' && m.toolCalls) {
+      for (const tc of m.toolCalls) {
+        toolCallNames.set(tc.id, tc.name);
+        if (tc.arguments) toolCallArgs.set(tc.id, tc.arguments);
+      }
+    }
+  }
+
+  if (visibleMessages.length === 0 && !isStreaming) {
+    return (
+      <div className="flex-1 flex items-center justify-center px-6">
+        <p className="text-[13px] text-muted-foreground/40 text-center">
+          {t('ai.chat.emptyHint')}
+        </p>
+      </div>
+    );
+  }
+
+  const lastAssistantMessage = visibleMessages.findLast(m => m.role === 'assistant');
+
+  return (
+    <>
+    <Conversation className="flex-1">
+      <ConversationContent className="gap-1.5 px-4 py-2">
+        {visibleMessages.map((message) => {
+          if (message.role === 'tool') {
+            return (
+              <React.Fragment key={message.id}>
+                {message.toolResults?.map((tr) => (
+                  <ToolCall
+                    key={tr.toolCallId}
+                    name={toolCallNames.get(tr.toolCallId) || tr.toolCallId}
+                    args={toolCallArgs.get(tr.toolCallId)}
+                    result={tr.content}
+                    isError={tr.isError}
+                  />
+                ))}
+              </React.Fragment>
+            );
+          }
+
+          const isUser = message.role === 'user';
+          const isLastAssistant = message === lastAssistantMessage;
+          const isThisStreaming = isStreaming && isLastAssistant;
+
+          return (
+            <Message key={message.id} from={message.role}>
+              <MessageContent>
+                {/* Thinking block */}
+                {!isUser && message.thinking && (
+                  <ThinkingBlock
+                    content={message.thinking}
+                    isStreaming={!!isThisStreaming && !message.content}
+                    durationMs={message.thinkingDurationMs}
+                  />
+                )}
+
+                {/* User attachments (images, files) — fallback to legacy `images` field */}
+                {isUser && (message.attachments ?? message.images)?.length && (
+                  <div className="flex gap-1.5 flex-wrap mb-1">
+                    {(message.attachments ?? message.images)!.map((att, i) => (
+                      att.mediaType.startsWith('image/') ? (
+                        <img
+                          key={att.filename ? `${att.filename}-${i}` : `att-${message.id}-${i}`}
+                          src={`data:${att.mediaType};base64,${att.base64Data}`}
+                          alt={att.filename || 'image'}
+                          className="max-h-[120px] max-w-[200px] rounded-md object-contain border border-border/20 cursor-pointer hover:opacity-80 transition-opacity"
+                          onClick={() => openPreview(`data:${att.mediaType};base64,${att.base64Data}`, att.filename || 'image')}
+                        />
+                      ) : (
+                        <div
+                          key={att.filename ? `${att.filename}-${i}` : `att-${message.id}-${i}`}
+                          className="inline-flex items-center gap-1.5 h-7 px-2 rounded-md bg-muted/20 border border-border/20 text-[11px] text-foreground/70"
+                        >
+                          <FileText size={12} className="text-muted-foreground/60 shrink-0" />
+                          <span className="truncate max-w-[120px]">{att.filename || 'file'}</span>
+                        </div>
+                      )
+                    ))}
+                  </div>
+                )}
+
+                {message.content && (
+                  isUser
+                    ? <div className="whitespace-pre-wrap break-words text-[13px]">{message.content}</div>
+                    : <MessageResponse isAnimating={isThisStreaming}>
+                        {message.content}
+                      </MessageResponse>
+                )}
+
+                {/* Pending tool calls from the *last* assistant message are rendered
+                    after all tool-result messages (see below) for chronological order.
+                    Unresolved tool calls from earlier or cancelled messages are shown
+                    inline — as interrupted, or with approval controls if still pending. */}
+                {(message !== lastAssistantMessage || message.executionStatus === 'cancelled') && message.toolCalls?.filter((tc) =>
+                  !resolvedToolCallIds.has(tc.id),
+                ).map((tc) => {
+                  const isPending = pendingApprovals.has(tc.id);
+                  const resolved = resolvedApprovals.get(tc.id);
+                  const approvalStatus = isPending
+                    ? 'pending' as const
+                    : resolved === true
+                      ? 'approved' as const
+                      : resolved === false
+                        ? 'denied' as const
+                        : undefined;
+                  return (
+                    <ToolCall
+                      key={tc.id}
+                      name={tc.name}
+                      args={tc.arguments}
+                      isInterrupted={!isPending}
+                      approvalStatus={approvalStatus}
+                      onApprove={() => handleApprove(tc.id)}
+                      onReject={() => handleReject(tc.id)}
+                    />
+                  );
+                })}
+
+                {/* Status text with shimmer */}
+                {message.statusText && (
+                  <div className="py-1">
+                    <span className="thinking-shimmer text-xs">{message.statusText}</span>
+                  </div>
+                )}
+
+                {/* Error info */}
+                {message.errorInfo && (
+                  <div className="flex items-start gap-2 px-3 py-2 rounded-md bg-destructive/10 border border-destructive/20 text-sm">
+                    <AlertCircle className="h-4 w-4 text-destructive shrink-0 mt-0.5" />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-destructive font-medium whitespace-pre-wrap break-words [overflow-wrap:anywhere]">
+                        {message.errorInfo.message}
+                      </p>
+                      {message.errorInfo.retryable && (
+                        <p className="text-muted-foreground text-xs mt-1">{t('ai.chat.retryHint')}</p>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </MessageContent>
+            </Message>
+          );
+        })}
+
+        {/* Pending tool calls from the last assistant message — rendered here
+            (after all tool-result messages) so they appear at the bottom. */}
+        {lastAssistantMessage?.toolCalls?.filter((tc) =>
+          !resolvedToolCallIds.has(tc.id) && lastAssistantMessage.executionStatus !== 'cancelled',
+        ).map((tc) => {
+          const isPending = pendingApprovals.has(tc.id);
+          const resolved = resolvedApprovals.get(tc.id);
+          const approvalStatus = isPending
+            ? 'pending' as const
+            : resolved === true
+              ? 'approved' as const
+              : resolved === false
+                ? 'denied' as const
+                : undefined;
+          return (
+            <ToolCall
+              key={tc.id}
+              name={tc.name}
+              args={tc.arguments}
+              isLoading={isStreaming && lastAssistantMessage.executionStatus === 'running' && !isPending}
+              approvalStatus={approvalStatus}
+              onApprove={() => handleApprove(tc.id)}
+              onReject={() => handleReject(tc.id)}
+            />
+          );
+        })}
+
+        {/* Standalone MCP/ACP approval requests (not tied to SDK tool calls) */}
+        {Array.from(pendingApprovals.entries())
+          .filter((entry) => entry[0].startsWith('mcp_approval_') && (!activeSessionId || entry[1].chatSessionId === activeSessionId))
+          .map((entry) => {
+            const [id, req] = entry;
+            return (
+              <ToolCall
+                key={id}
+                name={req.toolName}
+                args={req.args}
+                isLoading={false}
+                isInterrupted={false}
+                approvalStatus={'pending'}
+                onApprove={() => handleApprove(id)}
+                onReject={() => handleReject(id)}
+              />
+            );
+          })}
+        {/* Streaming indicator — only when no content and no thinking yet */}
+        {isStreaming && !lastAssistantMessage?.content && !lastAssistantMessage?.thinking && (
+          <div className="flex items-center gap-1 py-2">
+            <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/30 animate-bounce [animation-delay:0ms]" />
+            <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/30 animate-bounce [animation-delay:150ms]" />
+            <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/30 animate-bounce [animation-delay:300ms]" />
+          </div>
+        )}
+      </ConversationContent>
+      <ConversationScrollButton />
+    </Conversation>
+
+    {/* Image preview lightbox */}
+    <Dialog open={!!preview} onOpenChange={(open) => { if (!open) setPreview(null); }}>
+      <DialogContent
+        hideCloseButton
+        className="max-w-[min(90vw,800px)] max-h-[min(90vh,700px)] min-w-[280px] min-h-[200px] w-fit p-0 gap-0 focus:outline-none shadow-2xl"
+      >
+        {/* Title bar: filename | zoom controls | close — all in one flex row */}
+        <div className="flex items-center h-10 px-3 border-b border-border/40 gap-2 shrink-0">
+          <DialogTitle className="text-sm font-medium truncate flex-1">{preview?.name}</DialogTitle>
+          <div className="flex items-center gap-1 shrink-0">
+            <button
+              onClick={resetPreview}
+              disabled={zoom === 100 && !dragged}
+              className="p-1 rounded hover:bg-muted disabled:opacity-30 transition-colors text-muted-foreground"
+              aria-label={t('common.reset')}
+            >
+              <RotateCcw size={14} />
+            </button>
+            <div className="w-px h-3.5 bg-border/40 mx-0.5" />
+            <button
+              onClick={zoomOut}
+              disabled={zoom <= 25}
+              className="p-1 rounded hover:bg-muted disabled:opacity-30 transition-colors text-muted-foreground"
+              aria-label={t('common.zoomOut')}
+            >
+              <ZoomOut size={14} />
+            </button>
+            <span className="text-xs text-muted-foreground tabular-nums w-9 text-center select-none">{zoom}%</span>
+            <button
+              onClick={zoomIn}
+              disabled={zoom >= 200}
+              className="p-1 rounded hover:bg-muted disabled:opacity-30 transition-colors text-muted-foreground"
+              aria-label={t('common.zoomIn')}
+            >
+              <ZoomIn size={14} />
+            </button>
+          </div>
+          <button
+            onClick={() => setPreview(null)}
+            className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground shrink-0"
+            aria-label={t('common.close')}
+          >
+            <X size={14} />
+          </button>
+        </div>
+        {/* Image area with drag support */}
+        {preview && (
+          <div
+            className="overflow-hidden flex items-center justify-center"
+            style={{
+              height: 'calc(min(90vh, 700px) - 40px)',
+              cursor: 'grab',
+              // Clamp aspect ratio: if image is extremely tall/wide, the container
+              // constrains it; object-contain handles the rest.
+              aspectRatio: 'auto',
+            }}
+            onPointerDown={onPointerDown}
+            onPointerMove={onPointerMove}
+            onPointerUp={endDrag}
+            onPointerCancel={endDrag}
+            onWheel={onWheel}
+            onLostPointerCapture={endDrag}
+          >
+            <img
+              ref={imgRef}
+              src={preview.src}
+              alt={preview.name}
+              draggable={false}
+              className="select-none max-w-full max-h-full object-contain"
+              style={{ transition: 'transform 0.25s ease' }}
+            />
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+    </>
+  );
+};
+
+function areMessagesEqual(prev: ChatMessageListProps, next: ChatMessageListProps): boolean {
+  if (prev.isStreaming !== next.isStreaming) return false;
+  if (prev.activeSessionId !== next.activeSessionId) return false;
+  if (prev.messages.length !== next.messages.length) return false;
+  if (prev.messages === next.messages) return true;
+
+  // Shallow-compare each message by reference
+  for (let i = 0; i < prev.messages.length; i++) {
+    if (prev.messages[i] !== next.messages[i]) {
+      // For the last message during streaming, compare by content to avoid
+      // re-renders when only the array reference changed but content is the same
+      const p = prev.messages[i];
+      const n = next.messages[i];
+      if (
+        p.id !== n.id ||
+        p.content !== n.content ||
+        p.thinking !== n.thinking ||
+        p.role !== n.role ||
+        p.statusText !== n.statusText ||
+        p.executionStatus !== n.executionStatus ||
+        p.errorInfo !== n.errorInfo ||
+        p.toolCalls !== n.toolCalls ||
+        p.toolResults !== n.toolResults
+      ) {
+        return false;
+      }
+    }
+  }
+
+  return true;
+}
+
+export default React.memo(ChatMessageList, areMessagesEqual);
--- a/components/ai/ConversationExport.tsx
+++ b/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);
--- a/components/ai/ThinkingBlock.tsx
+++ b/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);
--- a/components/ai/hooks/useAIChatStreaming.ts
+++ b/components/ai/hooks/useAIChatStreaming.ts
@@ -0,0 +1,849 @@
+/**
+ * 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,
+  ProviderAdvancedParams,
+  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>;
+  aiAcpListModels?: (
+    acpCommand: string,
+    acpArgs?: string[],
+    cwd?: string,
+    providerId?: string,
+    chatSessionId?: string,
+  ) => Promise<{ ok: boolean; models?: Array<{ id: string; name: string; description?: string }>; currentModelId?: string | null; error?: string }>;
+  aiAcpCleanup?: (chatSessionId: string) => Promise<{ ok: boolean }>;
+  [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;
+  deviceType?: 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,
+    advancedParams?: ProviderAdvancedParams,
+  ) => 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,
+    advancedParams?: ProviderAdvancedParams,
+  ): Promise<void> => {
+    const result = streamText({
+      model,
+      messages: sdkMessages,
+      system: systemPrompt,
+      tools,
+      stopWhen: stepCountIs(maxIterations),
+      abortSignal: signal,
+      ...(advancedParams?.maxTokens != null && { maxOutputTokens: advancedParams.maxTokens }),
+      ...(advancedParams?.temperature != null && { temperature: advancedParams.temperature }),
+      ...(advancedParams?.topP != null && { topP: advancedParams.topP }),
+      ...(advancedParams?.frequencyPenalty != null && { frequencyPenalty: advancedParams.frequencyPenalty }),
+      ...(advancedParams?.presencePenalty != null && { presencePenalty: advancedParams.presencePenalty }),
+    });
+
+    // Track the current assistant message ID so updates target the correct message
+    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,
+        deviceType: s.deviceType,
+        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, context.activeProvider?.advancedParams);
+    } 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,
+  };
+}
--- a/components/ai/hooks/useConversationExport.ts
+++ b/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,
+  };
+}
--- a/components/host-details/ChainPanel.tsx
+++ b/components/host-details/ChainPanel.tsx
@@ -2,14 +2,15 @@
 * Host Chain Sub-Panel
 * Panel for configuring SSH jump host chain
 */
-import { ArrowDown,Plus,X } from 'lucide-react';
-import React from 'react';
+import { ArrowDown,Plus,Search,X } from 'lucide-react';
+import React, { useMemo, useState } from 'react';
 import { useI18n } from '../../application/i18n/I18nProvider';
 import { Host } from '../../types';
 import { DistroAvatar } from '../DistroAvatar';
 import { AsidePanel } from '../ui/aside-panel';
 import { Button } from '../ui/button';
 import { Card } from '../ui/card';
+import { Input } from '../ui/input';
 import { ScrollArea } from '../ui/scroll-area';

 export interface ChainPanelProps {
@@ -38,6 +39,14 @@ export const ChainPanel: React.FC<ChainPanelProps> = ({
    onCancel,
 }) => {
    const { t } = useI18n();
+    const [searchQuery, setSearchQuery] = useState('');
+    const filteredHosts = useMemo(() => {
+        if (!searchQuery.trim()) return availableHostsForChain;
+        const q = searchQuery.toLowerCase();
+        return availableHostsForChain.filter(
+            (host) => host.label.toLowerCase().includes(q) || host.hostname.toLowerCase().includes(q)
+        );
+    }, [availableHostsForChain, searchQuery]);
    return (
        <AsidePanel
            open={true}
@@ -52,16 +61,7 @@ export const ChainPanel: React.FC<ChainPanelProps> = ({
            }
        >
            <ScrollArea className="flex-1">
-                <div className="p-4 space-y-4">
-                    <Card className="p-3 space-y-3 bg-card border-border/80">
-                        <p className="text-xs text-muted-foreground">
-                            {t('hostDetails.chain.desc', { host: formLabel || formHostname })}
-                        </p>
-                        <Button className="w-full h-10" onClick={() => { }}>
-                            <Plus size={14} className="mr-2" /> {t('hostDetails.chain.addHost')}
-                        </Button>
-                    </Card>
-
+                <div className="p-4 space-y-4 w-0 min-w-full">
                    {/* Chain visualization */}
                    <div className="space-y-2">
                        {chainedHosts.map((host, index) => (
@@ -73,7 +73,7 @@ export const ChainPanel: React.FC<ChainPanelProps> = ({
                                )}
                                <div className="flex items-center gap-2 p-2 rounded-lg border border-border/60 bg-card">
                                    <DistroAvatar host={host} fallback={host.label.slice(0, 2).toUpperCase()} className="h-8 w-8" />
-                                    <span className="text-sm font-medium flex-1">{host.label || host.hostname}</span>
+                                    <span className="text-sm font-medium flex-1 min-w-0 truncate">{host.label || host.hostname}</span>
                                    <Button
                                        variant="ghost"
                                        size="icon"
@@ -110,11 +110,20 @@ export const ChainPanel: React.FC<ChainPanelProps> = ({
                    {availableHostsForChain.length > 0 && (
                        <Card className="p-3 bg-card border-border/80">
                            <p className="text-xs font-semibold text-muted-foreground mb-2">{t('hostDetails.chain.availableHosts')}</p>
+                            <div className="relative mb-2">
+                                <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
+                                <Input
+                                    value={searchQuery}
+                                    onChange={(e) => setSearchQuery(e.target.value)}
+                                    placeholder={t('common.searchPlaceholder')}
+                                    className="h-8 pl-8 text-sm"
+                                />
+                            </div>
                            <div className="space-y-1">
-                                {availableHostsForChain.map((host) => (
+                                {filteredHosts.map((host) => (
                                    <button
                                        key={host.id}
-                                        className="w-full flex items-center gap-2 p-2 rounded-md hover:bg-secondary transition-colors text-left"
+                                        className="w-full flex items-center gap-2 p-2 rounded-md hover:bg-secondary transition-colors text-left overflow-hidden"
                                        onClick={() => onAddHost(host.id)}
                                    >
                                        <DistroAvatar host={host} fallback={host.label.slice(0, 2).toUpperCase()} className="h-8 w-8" />
--- a/components/port-forwarding/WizardContent.tsx
+++ b/components/port-forwarding/WizardContent.tsx
@@ -123,7 +123,7 @@ export const WizardContent: React.FC<WizardContentProps> = ({
                    >
                        {selectedHost ? (
                            <div className="flex items-center gap-2 w-full">
-                                <DistroAvatar host={selectedHost} fallback={selectedHost.os[0].toUpperCase()} className="h-6 w-6" />
+                                <DistroAvatar host={selectedHost} fallback={selectedHost.os[0].toUpperCase()} size="sm" />
                                <span>{selectedHost.label}</span>
                                <Check size={14} className="ml-auto" />
                            </div>
@@ -228,7 +228,7 @@ export const WizardContent: React.FC<WizardContentProps> = ({
                    >
                        {selectedHost ? (
                            <div className="flex items-center gap-2 w-full">
-                                <DistroAvatar host={selectedHost} fallback={selectedHost.os[0].toUpperCase()} className="h-6 w-6" />
+                                <DistroAvatar host={selectedHost} fallback={selectedHost.os[0].toUpperCase()} size="sm" />
                                <span>{selectedHost.label}</span>
                                <Check size={14} className="ml-auto" />
                            </div>
--- a/components/settings/ThemeSelectModal.tsx
+++ b/components/settings/ThemeSelectModal.tsx
@@ -3,55 +3,12 @@
 * A modal dialog for selecting terminal themes in settings
 */

-import React, { memo, useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import { Check, Palette, X } from 'lucide-react';
+import { Palette, X } from 'lucide-react';
 import { useI18n } from '../../application/i18n/I18nProvider';
-import { TERMINAL_THEMES, TerminalThemeConfig } from '../../infrastructure/config/terminalThemes';
-import { useCustomThemes } from '../../application/state/customThemeStore';
 import { Button } from '../ui/button';
-import { cn } from '../../lib/utils';
-
-// Memoized theme item component to prevent unnecessary re-renders
-const ThemeItem = memo(({
-    theme,
-    isSelected,
-    onSelect
-}: {
-    theme: TerminalThemeConfig;
-    isSelected: boolean;
-    onSelect: (id: string) => void;
-}) => (
-    <button
-        onClick={() => onSelect(theme.id)}
-        className={cn(
-            'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-all',
-            isSelected
-                ? 'bg-primary/15 ring-1 ring-primary'
-                : 'hover:bg-muted'
-        )}
-    >
-        {/* Color swatch preview */}
-        <div
-            className="w-12 h-8 rounded-md flex-shrink-0 flex flex-col justify-center items-start pl-1.5 gap-0.5 border border-border/50"
-            style={{ backgroundColor: theme.colors.background }}
-        >
-            <div className="h-1 w-4 rounded-full" style={{ backgroundColor: theme.colors.green }} />
-            <div className="h-1 w-6 rounded-full" style={{ backgroundColor: theme.colors.blue }} />
-            <div className="h-1 w-3 rounded-full" style={{ backgroundColor: theme.colors.yellow }} />
-        </div>
-        <div className="flex-1 min-w-0">
-            <div className={cn('text-sm font-medium truncate', isSelected ? 'text-primary' : 'text-foreground')}>
-                {theme.name}
-            </div>
-            <div className="text-[10px] text-muted-foreground capitalize">{theme.type}</div>
-        </div>
-        {isSelected && (
-            <Check size={16} className="text-primary flex-shrink-0" />
-        )}
-    </button>
-));
-ThemeItem.displayName = 'ThemeItem';
+import { ThemeList } from '../ThemeList';

 interface ThemeSelectModalProps {
    open: boolean;
@@ -68,15 +25,6 @@ export const ThemeSelectModal: React.FC<ThemeSelectModalProps> = ({
 }) => {
    const { t } = useI18n();

-    // Group themes by type
-    const { darkThemes, lightThemes } = useMemo(() => {
-        const dark = TERMINAL_THEMES.filter(t => t.type === 'dark');
-        const light = TERMINAL_THEMES.filter(t => t.type === 'light');
-        return { darkThemes: dark, lightThemes: light };
-    }, []);
-
-    const customThemes = useCustomThemes();
-
    // Handle theme selection - select and close
    const handleThemeSelect = useCallback((themeId: string) => {
        onSelect(themeId);
@@ -134,58 +82,10 @@ export const ThemeSelectModal: React.FC<ThemeSelectModalProps> = ({

                {/* Theme List */}
                <div className="flex-1 min-h-0 overflow-y-auto p-4">
-                    {/* Dark Themes Section */}
-                    <div className="mb-4">
-                        <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-semibold px-1">
-                            {t('settings.terminal.themeModal.darkThemes')}
-                        </div>
-                        <div className="space-y-1">
-                            {darkThemes.map(theme => (
-                                <ThemeItem
-                                    key={theme.id}
-                                    theme={theme}
-                                    isSelected={selectedThemeId === theme.id}
-                                    onSelect={handleThemeSelect}
-                                />
-                            ))}
-                        </div>
-                    </div>
-
-                    {/* Light Themes Section */}
-                    <div>
-                        <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-semibold px-1">
-                            {t('settings.terminal.themeModal.lightThemes')}
-                        </div>
-                        <div className="space-y-1">
-                            {lightThemes.map(theme => (
-                                <ThemeItem
-                                    key={theme.id}
-                                    theme={theme}
-                                    isSelected={selectedThemeId === theme.id}
-                                    onSelect={handleThemeSelect}
-                                />
-                            ))}
-                        </div>
-                    </div>
-
-                    {/* Custom Themes Section */}
-                    {customThemes.length > 0 && (
-                        <div className="mt-4">
-                            <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-semibold px-1">
-                                {t('terminal.customTheme.section')}
-                            </div>
-                            <div className="space-y-1">
-                                {customThemes.map(theme => (
-                                    <ThemeItem
-                                        key={theme.id}
-                                        theme={theme}
-                                        isSelected={selectedThemeId === theme.id}
-                                        onSelect={handleThemeSelect}
-                                    />
-                                ))}
-                            </div>
-                        </div>
-                    )}
+                    <ThemeList
+                        selectedThemeId={selectedThemeId}
+                        onSelect={handleThemeSelect}
+                    />
                </div>

                {/* Footer */}
--- a/components/settings/settings-ui.tsx
+++ b/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>
 );
-
--- a/components/settings/tabs/SettingsAITab.tsx
+++ b/components/settings/tabs/SettingsAITab.tsx
@@ -0,0 +1,611 @@
+/**
+ * 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, useRef, useState } from "react";
+import type {
+  AIPermissionMode,
+  AIProviderId,
+  ExternalAgentConfig,
+  ProviderConfig,
+  WebSearchConfig,
+} from "../../../infrastructure/ai/types";
+import {
+  getManagedAgentStoredPath,
+  matchesManagedAgentConfig,
+  type ManagedAgentKey,
+} from "../../../infrastructure/ai/managedAgents";
+import { PROVIDER_PRESETS } from "../../../infrastructure/ai/types";
+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 { CopilotCliCard } from "./ai/CopilotCliCard";
+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;
+}
+
+function areExternalAgentListsEqual(
+  left: ExternalAgentConfig[],
+  right: ExternalAgentConfig[],
+): boolean {
+  if (left.length !== right.length) return false;
+  return left.every((agent, index) => JSON.stringify(agent) === JSON.stringify(right[index]));
+}
+
+function buildManagedAgentState(
+  prevAgents: ExternalAgentConfig[],
+  defaultAgentId: string,
+  agentKey: ManagedAgentKey,
+  pathInfo: AgentPathInfo | null,
+): { agents: ExternalAgentConfig[]; defaultAgentId: string } {
+  const managedId = `discovered_${agentKey}`;
+  const managedAgents = prevAgents.filter((agent) => matchesManagedAgentConfig(agent, agentKey));
+  const otherAgents = prevAgents.filter((agent) => !matchesManagedAgentConfig(agent, agentKey));
+  const storedPath = getManagedAgentStoredPath(prevAgents, agentKey);
+
+  if (!pathInfo?.available || !pathInfo.path) {
+    return {
+      agents: storedPath ? prevAgents : otherAgents,
+      defaultAgentId: storedPath
+        ? defaultAgentId
+        : managedAgents.some((agent) => agent.id === defaultAgentId)
+          ? "catty"
+          : defaultAgentId,
+    };
+  }
+
+  const existingManaged = managedAgents.find((agent) => agent.id === managedId);
+  const defaults = AGENT_DEFAULTS[agentKey];
+  const nextManagedAgent: ExternalAgentConfig = {
+    ...existingManaged,
+    ...defaults,
+    id: managedId,
+    command: pathInfo.path,
+    enabled: managedAgents.length === 0 ? true : managedAgents.some((agent) => agent.enabled),
+  };
+
+  return {
+    agents: [...otherAgents, nextManagedAgent],
+    defaultAgentId: managedAgents.some((agent) => agent.id === defaultAgentId)
+      ? managedId
+      : defaultAgentId,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// 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 initialManagedPathsRef = useRef<{
+    codex: string;
+    claude: string;
+    copilot: string;
+  } | null>(null);
+  if (!initialManagedPathsRef.current) {
+    initialManagedPathsRef.current = {
+      codex: getManagedAgentStoredPath(externalAgents, "codex") ?? "",
+      claude: getManagedAgentStoredPath(externalAgents, "claude") ?? "",
+      copilot: getManagedAgentStoredPath(externalAgents, "copilot") ?? "",
+    };
+  }
+
+  const [copilotPathInfo, setCopilotPathInfo] = useState<AgentPathInfo | null>(null);
+  const [copilotCustomPath, setCopilotCustomPath] = useState("");
+  const [isResolvingCopilot, setIsResolvingCopilot] = useState(false);
+
+  // Ref to read current defaultAgentId without adding it as a dependency.
+  const defaultAgentIdRef = useRef(defaultAgentId);
+  defaultAgentIdRef.current = defaultAgentId;
+
+  const resolveAgentPath = useCallback(async (
+    agentKey: ManagedAgentKey,
+    customPath = "",
+  ) => {
+    const bridge = getBridge();
+    if (!bridge?.aiResolveCli) return null;
+
+    const setInfo = agentKey === "codex"
+      ? setCodexPathInfo
+      : agentKey === "claude"
+        ? setClaudePathInfo
+        : setCopilotPathInfo;
+    const setResolving = agentKey === "codex"
+      ? setIsResolvingCodex
+      : agentKey === "claude"
+        ? setIsResolvingClaude
+        : setIsResolvingCopilot;
+
+    setResolving(true);
+    try {
+      const result = await bridge.aiResolveCli({
+        command: agentKey,
+        customPath: customPath.trim(),
+      });
+      setInfo(result);
+
+      // Consolidate managed agent entries using the callback form of
+      // setExternalAgents so we never depend on externalAgents directly.
+      // All three agents resolve concurrently on mount — React runs
+      // state updater callbacks sequentially, so updating the ref inside
+      // ensures later calls see earlier defaultAgentId changes.
+      let nextDefaultId: string | null = null;
+      setExternalAgents((prev) => {
+        const state = buildManagedAgentState(prev, defaultAgentIdRef.current, agentKey, result);
+        if (state.defaultAgentId !== defaultAgentIdRef.current) {
+          nextDefaultId = state.defaultAgentId;
+          defaultAgentIdRef.current = state.defaultAgentId;
+        }
+        return areExternalAgentListsEqual(prev, state.agents) ? prev : state.agents;
+      });
+      if (nextDefaultId !== null) {
+        setDefaultAgentId(nextDefaultId);
+      }
+
+      return result;
+    } catch (err) {
+      console.error("Path resolution failed:", err);
+      return null;
+    } finally {
+      setResolving(false);
+    }
+  }, [setExternalAgents, setDefaultAgentId]);
+
+  useEffect(() => {
+    void resolveAgentPath("codex", initialManagedPathsRef.current?.codex ?? "");
+    void resolveAgentPath("claude", initialManagedPathsRef.current?.claude ?? "");
+    void resolveAgentPath("copilot", initialManagedPathsRef.current?.copilot ?? "");
+  }, [resolveAgentPath]);
+
+  // Validate a custom path for an agent
+  const handleCheckCustomPath = useCallback(async (agentKey: ManagedAgentKey) => {
+    const customPath = agentKey === "codex"
+      ? codexCustomPath
+      : agentKey === "claude"
+        ? claudeCustomPath
+        : copilotCustomPath;
+    await resolveAgentPath(agentKey, customPath);
+  }, [claudeCustomPath, codexCustomPath, copilotCustomPath, resolveAgentPath]);
+
+  // 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={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={isResolvingClaude}
+              customPath={claudeCustomPath}
+              onCustomPathChange={setClaudeCustomPath}
+              onRecheckPath={() => void handleCheckCustomPath("claude")}
+            />
+          </div>
+
+          {/* -- GitHub Copilot CLI Section -- */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <ProviderIconBadge providerId="copilot" size="sm" />
+              <h3 className="text-base font-medium">{t('ai.copilot.title')}</h3>
+            </div>
+
+            <CopilotCliCard
+              pathInfo={copilotPathInfo}
+              isResolvingPath={isResolvingCopilot}
+              customPath={copilotCustomPath}
+              onCustomPathChange={setCopilotCustomPath}
+              onRecheckPath={() => void handleCheckCustomPath("copilot")}
+            />
+          </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-64"
+                  />
+                </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;
--- a/components/settings/tabs/SettingsAppearanceTab.tsx
+++ b/components/settings/tabs/SettingsAppearanceTab.tsx
@@ -7,6 +7,8 @@ import { SUPPORTED_UI_LOCALES } from "../../../infrastructure/config/i18n";
 import { cn } from "../../../lib/utils";
 import { SectionHeader, SettingsTabContent, SettingRow, Toggle, Select } from "../settings-ui";
 import { FontSelect } from "../FontSelect";
+import { STORAGE_KEY_SHOW_RECENT_HOSTS } from "../../../infrastructure/config/storageKeys";
+import { useStoredBoolean } from "../../../application/state/useStoredBoolean";

 export default function SettingsAppearanceTab(props: {
  theme: "dark" | "light" | "system";
@@ -47,6 +49,11 @@ export default function SettingsAppearanceTab(props: {
    setCustomCSS,
  } = props;

+  const [showRecentHosts, setShowRecentHosts] = useStoredBoolean(
+    STORAGE_KEY_SHOW_RECENT_HOSTS,
+    true,
+  );
+
  const getHslStyle = useCallback((hsl: string) => ({ backgroundColor: `hsl(${hsl})` }), []);

  const hexToHsl = useCallback((hex: string) => {
@@ -254,6 +261,16 @@ export default function SettingsAppearanceTab(props: {
        </SettingRow>
      </div>

+      <SectionHeader title={t("settings.vault.title")} />
+      <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
+        <SettingRow
+          label={t('settings.vault.showRecentHosts')}
+          description={t('settings.vault.showRecentHostsDesc')}
+        >
+          <Toggle checked={showRecentHosts} onChange={setShowRecentHosts} />
+        </SettingRow>
+      </div>
+
      <SectionHeader title={t("settings.appearance.customCss")} />
      <div className="space-y-2">
        <p className="text-xs text-muted-foreground">
--- a/components/settings/tabs/SettingsFileAssociationsTab.tsx
+++ b/components/settings/tabs/SettingsFileAssociationsTab.tsx
@@ -28,13 +28,12 @@ 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 { getAllAssociations, removeAssociation, setOpenerForExtension, getDefaultOpener, setDefaultOpener, removeDefaultOpener } = useSftpFileAssociations();
+  const { sftpDoubleClickBehavior, setSftpDoubleClickBehavior, sftpAutoSync, setSftpAutoSync, sftpShowHiddenFiles, setSftpShowHiddenFiles, sftpUseCompressedUpload, setSftpUseCompressedUpload, sftpAutoOpenSidebar, setSftpAutoOpenSidebar, sftpDefaultViewMode, setSftpDefaultViewMode, sftpTransferConcurrency, setSftpTransferConcurrency } = useSettingsState();
  const associations = getAllAssociations();
+  const defaultOpener = getDefaultOpener();
  const [editingExtension, setEditingExtension] = useState<string | null>(null);
-
-  // Debug log for Settings page
-  console.log('[SettingsFileAssociationsTab] Rendering with', associations.length, 'associations:', associations);
+  const [isSelectingDefaultApp, setIsSelectingDefaultApp] = useState(false);

  const handleRemove = useCallback((extension: string) => {
    if (confirm(t('settings.sftpFileAssociations.removeConfirm', { ext: extension === 'file' ? t('sftp.opener.noExtension') : extension }))) {
@@ -42,6 +41,22 @@ export default function SettingsFileAssociationsTab() {
    }
  }, [removeAssociation, t]);

+  const handleSelectDefaultSystemApp = useCallback(async () => {
+    setIsSelectingDefaultApp(true);
+    try {
+      const bridge = netcattyBridge.get();
+      if (!bridge?.selectApplication) return;
+      const result = await bridge.selectApplication();
+      if (result) {
+        setDefaultOpener('system-app', { path: result.path, name: result.name });
+      }
+    } catch (e) {
+      console.error('Failed to select application:', e);
+    } finally {
+      setIsSelectingDefaultApp(false);
+    }
+  }, [setDefaultOpener]);
+
  const handleEdit = useCallback(async (extension: string) => {
    setEditingExtension(extension);
    try {
@@ -133,6 +148,76 @@ export default function SettingsFileAssociationsTab() {
          </div>
        </div>

+        {/* Default view mode section */}
+        <div className="space-y-4">
+          <SectionHeader title={t('settings.sftp.defaultViewMode')} />
+          <p className="text-sm text-muted-foreground">
+            {t('settings.sftp.defaultViewMode.desc')}
+          </p>
+          <div className="space-y-3">
+            <button
+              onClick={() => setSftpDefaultViewMode('list')}
+              className={cn(
+                "w-full text-left p-4 rounded-lg border-2 transition-colors",
+                sftpDefaultViewMode === 'list'
+                  ? "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-full border-2 flex items-center justify-center mt-0.5 shrink-0",
+                  sftpDefaultViewMode === 'list'
+                    ? "border-primary"
+                    : "border-muted-foreground/30"
+                )}>
+                  {sftpDefaultViewMode === 'list' && (
+                    <div className="h-2.5 w-2.5 rounded-full bg-primary" />
+                  )}
+                </div>
+                <div className="space-y-1">
+                  <Label className="font-medium cursor-pointer">
+                    {t('settings.sftp.defaultViewMode.list')}
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    {t('settings.sftp.defaultViewMode.listDesc')}
+                  </p>
+                </div>
+              </div>
+            </button>
+            <button
+              onClick={() => setSftpDefaultViewMode('tree')}
+              className={cn(
+                "w-full text-left p-4 rounded-lg border-2 transition-colors",
+                sftpDefaultViewMode === 'tree'
+                  ? "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-full border-2 flex items-center justify-center mt-0.5 shrink-0",
+                  sftpDefaultViewMode === 'tree'
+                    ? "border-primary"
+                    : "border-muted-foreground/30"
+                )}>
+                  {sftpDefaultViewMode === 'tree' && (
+                    <div className="h-2.5 w-2.5 rounded-full bg-primary" />
+                  )}
+                </div>
+                <div className="space-y-1">
+                  <Label className="font-medium cursor-pointer">
+                    {t('settings.sftp.defaultViewMode.tree')}
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    {t('settings.sftp.defaultViewMode.treeDesc')}
+                  </p>
+                </div>
+              </div>
+            </button>
+          </div>
+        </div>
+
        {/* Auto-sync section */}
        <div className="space-y-4">
          <SectionHeader title={t('settings.sftp.autoSync')} />
@@ -253,6 +338,157 @@ 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>
+
+        {/* Transfer concurrency section */}
+        <div className="space-y-4">
+          <SectionHeader title={t('settings.sftp.transferConcurrency')} />
+          <p className="text-sm text-muted-foreground">
+            {t('settings.sftp.transferConcurrency.desc')}
+          </p>
+          <div className="flex items-center gap-3">
+            <input
+              type="range"
+              min={1}
+              max={16}
+              step={1}
+              value={sftpTransferConcurrency}
+              onChange={(e) => setSftpTransferConcurrency(Number(e.target.value))}
+              className="flex-1 accent-primary"
+            />
+            <span className="text-sm font-mono w-6 text-center">{sftpTransferConcurrency}</span>
+          </div>
+        </div>
+
+        {/* Default opener section */}
+        <div className="space-y-4">
+          <SectionHeader title={t('settings.sftp.defaultOpener')} />
+          <p className="text-sm text-muted-foreground">
+            {t('settings.sftp.defaultOpener.desc')}
+          </p>
+          <div className="space-y-3">
+            <button
+              onClick={() => removeDefaultOpener()}
+              className={cn(
+                "w-full text-left p-4 rounded-lg border-2 transition-colors",
+                !defaultOpener
+                  ? "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-full border-2 flex items-center justify-center mt-0.5 shrink-0",
+                  !defaultOpener ? "border-primary" : "border-muted-foreground/30"
+                )}>
+                  {!defaultOpener && <div className="h-2.5 w-2.5 rounded-full bg-primary" />}
+                </div>
+                <div className="space-y-1">
+                  <Label className="font-medium cursor-pointer">
+                    {t('settings.sftp.defaultOpener.ask')}
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    {t('settings.sftp.defaultOpener.askDesc')}
+                  </p>
+                </div>
+              </div>
+            </button>
+            <button
+              onClick={() => setDefaultOpener('builtin-editor')}
+              className={cn(
+                "w-full text-left p-4 rounded-lg border-2 transition-colors",
+                defaultOpener?.openerType === 'builtin-editor'
+                  ? "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-full border-2 flex items-center justify-center mt-0.5 shrink-0",
+                  defaultOpener?.openerType === 'builtin-editor' ? "border-primary" : "border-muted-foreground/30"
+                )}>
+                  {defaultOpener?.openerType === 'builtin-editor' && <div className="h-2.5 w-2.5 rounded-full bg-primary" />}
+                </div>
+                <div className="space-y-1">
+                  <Label className="font-medium cursor-pointer">
+                    {t('sftp.opener.builtInEditor')}
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    {t('settings.sftp.defaultOpener.builtInDesc')}
+                  </p>
+                </div>
+              </div>
+            </button>
+            <button
+              onClick={handleSelectDefaultSystemApp}
+              disabled={isSelectingDefaultApp}
+              className={cn(
+                "w-full text-left p-4 rounded-lg border-2 transition-colors",
+                defaultOpener?.openerType === 'system-app'
+                  ? "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-full border-2 flex items-center justify-center mt-0.5 shrink-0",
+                  defaultOpener?.openerType === 'system-app' ? "border-primary" : "border-muted-foreground/30"
+                )}>
+                  {defaultOpener?.openerType === 'system-app' && <div className="h-2.5 w-2.5 rounded-full bg-primary" />}
+                </div>
+                <div className="space-y-1">
+                  <Label className="font-medium cursor-pointer">
+                    {defaultOpener?.openerType === 'system-app' && defaultOpener.systemApp
+                      ? defaultOpener.systemApp.name
+                      : t('settings.sftp.defaultOpener.systemApp')}
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    {t('settings.sftp.defaultOpener.systemAppDesc')}
+                  </p>
+                </div>
+              </div>
+            </button>
+          </div>
+        </div>
+
        {/* File associations section */}
        <div className="space-y-4">
          <SectionHeader title={t('settings.sftpFileAssociations.title')} />
--- a/components/settings/tabs/SettingsSyncTab.tsx
+++ b/components/settings/tabs/SettingsSyncTab.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback } from "react";
 import type { PortForwardingRule } from "../../../domain/models";
 import type { SyncPayload } from "../../../domain/sync";
-import { buildSyncPayload, applySyncPayload } from "../../../domain/syncPayload";
-import type { SyncableVaultData } from "../../../domain/syncPayload";
+import { buildSyncPayload, applySyncPayload } from "../../../application/syncPayload";
+import type { SyncableVaultData } from "../../../application/syncPayload";
 import { STORAGE_KEY_PORT_FORWARDING } from "../../../infrastructure/config/storageKeys";
 import { localStorageAdapter } from "../../../infrastructure/persistence/localStorageAdapter";
 import { getEffectiveKnownHosts } from "../../../infrastructure/syncHelpers";
@@ -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(() => {
--- a/components/settings/tabs/SettingsSystemTab.tsx
+++ b/components/settings/tabs/SettingsSystemTab.tsx
@@ -1,7 +1,7 @@
 /**
 * Settings System Tab - System information, temp file management, session logs, and global hotkey
 */
-import { Download, ExternalLink, FileText, FolderOpen, HardDrive, Keyboard, RefreshCw, RotateCcw, Trash2 } from "lucide-react";
+import { AlertTriangle, ChevronDown, ChevronRight, Download, ExternalLink, FileText, FolderOpen, HardDrive, Keyboard, RefreshCw, RotateCcw, Trash2 } from "lucide-react";
 import React, { useCallback, useEffect, useState } from "react";
 import { useI18n } from "../../../application/i18n/I18nProvider";
 import { getCredentialProtectionAvailability } from "../../../infrastructure/services/credentialProtection";
@@ -13,6 +13,31 @@ import { Button } from "../../ui/button";
 import { Toggle, Select, SettingRow } from "../settings-ui";
 import { cn } from "../../../lib/utils";

+interface CrashLogFile {
+  fileName: string;
+  date: string;
+  size: number;
+  entryCount: number;
+}
+
+interface CrashLogEntry {
+  timestamp: string;
+  source: string;
+  message: string;
+  stack?: string;
+  errorMeta?: Record<string, unknown>;
+  extra?: Record<string, unknown>;
+  pid?: number;
+  platform?: string;
+  arch?: string;
+  version?: string;
+  electronVersion?: string;
+  osVersion?: string;
+  memoryMB?: { rss: number; heapUsed: number; heapTotal: number };
+  activeSessionCount?: number;
+  uptimeSeconds?: number;
+}
+
 interface TempDirInfo {
  path: string;
  fileCount: number;
@@ -55,11 +80,16 @@ 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>;
  installUpdate: () => void;
  openReleasePage: () => void;
+  startDownload: () => void;
 }

 const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
@@ -74,10 +104,15 @@ const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
  closeToTray,
  setCloseToTray,
  hotkeyRegistrationError,
+  globalHotkeyEnabled,
+  setGlobalHotkeyEnabled,
+  autoUpdateEnabled,
+  setAutoUpdateEnabled,
  updateState,
  checkNow,
  installUpdate,
  openReleasePage,
+  startDownload,
 }) => {
  const { t } = useI18n();
  const isMac = typeof navigator !== "undefined" && /Mac/i.test(navigator.platform);
@@ -90,6 +125,12 @@ const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
  const [hotkeyError, setHotkeyError] = useState<string | null>(null);
  const [credentialsAvailable, setCredentialsAvailable] = useState<boolean | null>(null);
  const [isCheckingCredentials, setIsCheckingCredentials] = useState(false);
+  const [crashLogs, setCrashLogs] = useState<CrashLogFile[]>([]);
+  const [isLoadingCrashLogs, setIsLoadingCrashLogs] = useState(false);
+  const [expandedLog, setExpandedLog] = useState<string | null>(null);
+  const [logEntries, setLogEntries] = useState<CrashLogEntry[]>([]);
+  const [isClearingCrashLogs, setIsClearingCrashLogs] = useState(false);
+  const [crashLogClearResult, setCrashLogClearResult] = useState<{ deletedCount: number } | null>(null);

  const [appVersion, setAppVersion] = useState('');

@@ -136,6 +177,73 @@ const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
    void loadCredentialProtectionStatus();
  }, [loadCredentialProtectionStatus]);

+  const loadCrashLogs = useCallback(async () => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.getCrashLogs) return;
+    setIsLoadingCrashLogs(true);
+    try {
+      const logs = await bridge.getCrashLogs();
+      setCrashLogs(logs);
+    } catch (err) {
+      console.error("[SettingsSystemTab] Failed to load crash logs:", err);
+    } finally {
+      setIsLoadingCrashLogs(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadCrashLogs();
+  }, [loadCrashLogs]);
+
+  const expandRequestRef = React.useRef(0);
+  const handleExpandCrashLog = useCallback(async (fileName: string) => {
+    if (expandedLog === fileName) {
+      setExpandedLog(null);
+      setLogEntries([]);
+      return;
+    }
+    const bridge = netcattyBridge.get();
+    if (!bridge?.readCrashLog) return;
+    const requestId = ++expandRequestRef.current;
+    // Optimistically show expanded state while loading
+    setExpandedLog(fileName);
+    setLogEntries([]);
+    try {
+      const entries = await bridge.readCrashLog(fileName);
+      // Discard if user clicked a different file while awaiting
+      if (expandRequestRef.current !== requestId) return;
+      setLogEntries(entries);
+    } catch (err) {
+      if (expandRequestRef.current !== requestId) return;
+      console.error("[SettingsSystemTab] Failed to read crash log:", err);
+    }
+  }, [expandedLog]);
+
+  const handleClearCrashLogs = useCallback(async () => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.clearCrashLogs) return;
+    setIsClearingCrashLogs(true);
+    setCrashLogClearResult(null);
+    try {
+      const result = await bridge.clearCrashLogs();
+      setCrashLogClearResult(result);
+      setExpandedLog(null);
+      setLogEntries([]);
+      // Reload the list so partial failures still show remaining files
+      await loadCrashLogs();
+    } catch (err) {
+      console.error("[SettingsSystemTab] Failed to clear crash logs:", err);
+    } finally {
+      setIsClearingCrashLogs(false);
+    }
+  }, [loadCrashLogs]);
+
+  const handleOpenCrashLogsDir = useCallback(async () => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.openCrashLogsDir) return;
+    await bridge.openCrashLogsDir();
+  }, []);
+
  const handleClearTempFiles = useCallback(async () => {
    const bridge = netcattyBridge.get();
    if (!bridge?.clearTempDir) return;
@@ -357,7 +465,16 @@ const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
                  </Button>
                )}

-                {/* Open releases — shown when update found on unsupported platform, or on check error */}
+                {/* Download button — shown when update found and no download in progress */}
+                {updateState.autoDownloadStatus === 'idle' &&
+                  updateState.manualCheckStatus === 'available' && (
+                  <Button variant="outline" size="sm" onClick={startDownload}>
+                    <Download size={14} className="mr-1.5" />
+                    {t('update.downloadNow')}
+                  </Button>
+                )}
+
+                {/* Open releases — fallback for unsupported platforms or check errors */}
                {updateState.autoDownloadStatus === 'idle' &&
                  (updateState.manualCheckStatus === 'available' || updateState.manualCheckStatus === 'error' || (updateState.manualCheckStatus === 'idle' && updateState.hasUpdate)) && (
                  <Button variant="ghost" size="sm" onClick={openReleasePage}>
@@ -367,6 +484,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>
@@ -432,6 +558,148 @@ const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
            </div>
          </div>

+          {/* Crash Logs Section */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <AlertTriangle size={18} className="text-muted-foreground" />
+              <h3 className="text-base font-medium">{t("settings.system.crashLogs.title")}</h3>
+            </div>
+
+            <div className="bg-muted/30 rounded-lg p-4 space-y-3">
+              <p className="text-sm text-muted-foreground">
+                {t("settings.system.crashLogs.description")}
+              </p>
+
+              {crashLogs.length === 0 && !isLoadingCrashLogs && (
+                <p className="text-sm text-muted-foreground italic">
+                  {t("settings.system.crashLogs.noLogs")}
+                </p>
+              )}
+
+              {crashLogs.length > 0 && (
+                <div className="space-y-2">
+                  {crashLogs.map((log) => (
+                    <div key={log.fileName} className="border border-border/60 rounded-md overflow-hidden">
+                      <button
+                        onClick={() => handleExpandCrashLog(log.fileName)}
+                        className="w-full flex items-center justify-between px-3 py-2 text-sm hover:bg-muted/50 transition-colors"
+                      >
+                        <div className="flex items-center gap-2">
+                          {expandedLog === log.fileName ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+                          <span className="font-mono">{log.date}</span>
+                          <span className="text-muted-foreground">
+                            ({t("settings.system.crashLogs.entries").replace("{count}", String(log.entryCount))})
+                          </span>
+                        </div>
+                        <span className="text-xs text-muted-foreground">{formatBytes(log.size)}</span>
+                      </button>
+
+                      {expandedLog === log.fileName && logEntries.length > 0 && (
+                        <div className="border-t border-border/60 max-h-64 overflow-y-auto">
+                          {logEntries.map((entry, idx) => (
+                            <div key={idx} className="px-3 py-2 text-xs border-b border-border/30 last:border-b-0 space-y-1">
+                              <div className="flex items-center gap-3 flex-wrap">
+                                <span className="font-mono text-muted-foreground">
+                                  {new Date(entry.timestamp).toLocaleTimeString()}
+                                </span>
+                                <span className="px-1.5 py-0.5 rounded bg-destructive/10 text-destructive font-medium">
+                                  {entry.source}
+                                </span>
+                              </div>
+                              <p className="font-mono break-all">{entry.message}</p>
+                              {entry.errorMeta && Object.keys(entry.errorMeta).length > 0 && (
+                                <div className="flex items-center gap-2 flex-wrap">
+                                  {Object.entries(entry.errorMeta).map(([k, v]) => (
+                                    <span key={k} className="px-1.5 py-0.5 rounded bg-muted font-mono">
+                                      {k}={String(v)}
+                                    </span>
+                                  ))}
+                                </div>
+                              )}
+                              {entry.extra && Object.keys(entry.extra).length > 0 && (
+                                <div className="flex items-center gap-2 flex-wrap">
+                                  {Object.entries(entry.extra).map(([k, v]) => (
+                                    <span key={k} className="px-1.5 py-0.5 rounded bg-muted font-mono">
+                                      {k}={String(v)}
+                                    </span>
+                                  ))}
+                                </div>
+                              )}
+                              {(() => {
+                                const parts: string[] = [];
+                                if (entry.version) parts.push(`v${entry.version}`);
+                                if (entry.electronVersion) parts.push(`Electron ${entry.electronVersion}`);
+                                if (entry.platform) parts.push(`${entry.platform}/${entry.arch}`);
+                                if (entry.osVersion) parts.push(`OS ${entry.osVersion}`);
+                                if (entry.pid) parts.push(`PID ${entry.pid}`);
+                                if (entry.activeSessionCount != null && entry.activeSessionCount >= 0) parts.push(`Sessions: ${entry.activeSessionCount}`);
+                                if (entry.memoryMB) parts.push(`RAM: ${entry.memoryMB.rss}MB`);
+                                if (entry.uptimeSeconds != null) parts.push(`Uptime: ${entry.uptimeSeconds}s`);
+                                const text = parts.join('  ');
+                                return text ? (
+                                  <div className="text-muted-foreground truncate" title={text}>
+                                    {text}
+                                  </div>
+                                ) : null;
+                              })()}
+                              {entry.stack && (
+                                <pre className="mt-1 p-2 bg-muted rounded text-[11px] leading-relaxed overflow-x-auto whitespace-pre-wrap break-all text-muted-foreground">
+                                  {entry.stack}
+                                </pre>
+                              )}
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {/* Actions */}
+              <div className="flex items-center gap-2 pt-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={loadCrashLogs}
+                  disabled={isLoadingCrashLogs}
+                  className="gap-1.5"
+                >
+                  <RefreshCw size={14} className={isLoadingCrashLogs ? "animate-spin" : ""} />
+                  {t("settings.system.refresh")}
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleClearCrashLogs}
+                  disabled={isClearingCrashLogs || crashLogs.length === 0}
+                  className="gap-1.5 text-destructive hover:text-destructive hover:bg-destructive/10"
+                >
+                  <Trash2 size={14} />
+                  {t("settings.system.crashLogs.clear")}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleOpenCrashLogsDir}
+                  title={t("settings.system.openFolder")}
+                >
+                  <FolderOpen size={16} />
+                </Button>
+              </div>
+
+              {crashLogClearResult && (
+                <p className="text-sm text-muted-foreground">
+                  {t("settings.system.crashLogs.cleared").replace("{count}", String(crashLogClearResult.deletedCount))}
+                </p>
+              )}
+            </div>
+
+            <p className="text-xs text-muted-foreground">
+              {t("settings.system.crashLogs.hint")}
+            </p>
+          </div>
+
          {/* Temp Directory Section */}
          <div className="space-y-4">
            <div className="flex items-center gap-2">
@@ -580,7 +848,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 +867,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
--- a/components/settings/tabs/SettingsTerminalTab.tsx
+++ b/components/settings/tabs/SettingsTerminalTab.tsx
@@ -7,14 +7,16 @@ import type {
  TerminalEmulationType,
  TerminalSettings,
 } from "../../../domain/models";
-import { DEFAULT_KEYWORD_HIGHLIGHT_RULES } from "../../../domain/models";
+import { DEFAULT_KEYWORD_HIGHLIGHT_RULES, type KeywordHighlightRule } from "../../../domain/models";
 import { useI18n } from "../../../application/i18n/I18nProvider";
 import { MAX_FONT_SIZE, MIN_FONT_SIZE, type TerminalFont } from "../../../infrastructure/config/fonts";
 import { TERMINAL_THEMES } from "../../../infrastructure/config/terminalThemes";
 import { customThemeStore, useCustomThemes } from "../../../application/state/customThemeStore";
 import { parseItermcolors } from "../../../infrastructure/parsers/itermcolorsParser";
 import { cn } from "../../../lib/utils";
+import { useDiscoveredShells } from "../../../lib/useDiscoveredShells";
 import { Button } from "../../ui/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../../ui/dialog";
 import { Input } from "../../ui/input";
 import { Label } from "../../ui/label";
 import { SectionHeader, Select, SettingsTabContent, SettingRow, Toggle } from "../settings-ui";
@@ -23,6 +25,193 @@ import { TerminalFontSelect } from "../TerminalFontSelect";
 import { CustomThemeModal } from "../../terminal/CustomThemeModal";
 import type { TerminalTheme } from "../../../domain/models";

+// Keyword highlight rules editor for global settings
+const DEFAULT_NEW_RULE_COLOR = '#F87171';
+
+const AddCustomRuleDialog: React.FC<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  editRule?: KeywordHighlightRule | null;
+  onAdd: (rule: KeywordHighlightRule) => void;
+}> = ({ open, onOpenChange, editRule, onAdd }) => {
+  const { t } = useI18n();
+  const [label, setLabel] = useState('');
+  const [pattern, setPattern] = useState('');
+  const [color, setColor] = useState(DEFAULT_NEW_RULE_COLOR);
+  const [patternError, setPatternError] = useState<string | null>(null);
+
+  const reset = () => { setLabel(''); setPattern(''); setColor(DEFAULT_NEW_RULE_COLOR); setPatternError(null); };
+
+  // Populate form when editing
+  useEffect(() => {
+    if (open && editRule) {
+      setLabel(editRule.label);
+      setPattern(editRule.patterns[0] || '');
+      setColor(editRule.color);
+      setPatternError(null);
+    } else if (!open) {
+      reset();
+    }
+  }, [open, editRule]);
+
+  const handleSubmit = () => {
+    if (!label.trim() || !pattern.trim()) return;
+    try { new RegExp(pattern, 'gi'); } catch {
+      setPatternError(t('settings.terminal.keywordHighlight.invalidPattern'));
+      return;
+    }
+    // When editing, replace only the first pattern and keep any additional ones
+    const patterns = editRule
+      ? [pattern, ...editRule.patterns.slice(1)]
+      : [pattern];
+    onAdd({ id: editRule?.id ?? crypto.randomUUID(), label: label.trim(), patterns, color, enabled: editRule?.enabled ?? true });
+    reset();
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) reset(); onOpenChange(v); }}>
+      <DialogContent className="sm:max-w-[400px]">
+        <DialogHeader>
+          <DialogTitle>{editRule ? t('settings.terminal.keywordHighlight.editCustom') : t('settings.terminal.keywordHighlight.addCustom')}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-3 py-2">
+          <div className="space-y-1.5">
+            <Label className="text-xs">{t('settings.terminal.keywordHighlight.labelField')}</Label>
+            <div className="flex gap-2">
+              <Input
+                placeholder={t('settings.terminal.keywordHighlight.labelPlaceholder')}
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+                className="flex-1"
+              />
+              <label className="relative flex-shrink-0">
+                <input type="color" value={color} onChange={(e) => setColor(e.target.value)} className="sr-only" />
+                <span className="block w-9 h-9 rounded-md cursor-pointer border border-border/50 hover:border-border" style={{ backgroundColor: color }} />
+              </label>
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <Label className="text-xs">{t('settings.terminal.keywordHighlight.patternField')}</Label>
+            <Input
+              placeholder={t('settings.terminal.keywordHighlight.patternPlaceholder')}
+              value={pattern}
+              onChange={(e) => { setPattern(e.target.value); if (patternError) setPatternError(null); }}
+              onKeyDown={(e) => { if (e.key === 'Enter') handleSubmit(); }}
+              className={cn("font-mono", patternError && "border-destructive")}
+            />
+            {patternError && <div className="text-xs text-destructive">{patternError}</div>}
+          </div>
+          {label.trim() && pattern.trim() && !patternError && (
+            <div className="flex items-center gap-2 p-2 rounded-md bg-muted/50">
+              <span className="text-xs text-muted-foreground">{t('settings.terminal.keywordHighlight.preview')}:</span>
+              <span className="text-sm font-medium" style={{ color }}>{label}</span>
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => { reset(); onOpenChange(false); }}>{t('common.cancel')}</Button>
+          <Button onClick={handleSubmit} disabled={!label.trim() || !pattern.trim()}>{editRule ? t('common.save') : t('common.add')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const KeywordHighlightRulesEditor: React.FC<{
+  rules: KeywordHighlightRule[];
+  onChange: (rules: KeywordHighlightRule[]) => void;
+}> = ({ rules, onChange }) => {
+  const { t } = useI18n();
+  const [addDialogOpen, setAddDialogOpen] = useState(false);
+  const [editingRule, setEditingRule] = useState<KeywordHighlightRule | null>(null);
+
+  const isBuiltIn = (id: string) => DEFAULT_KEYWORD_HIGHLIGHT_RULES.some((r) => r.id === id);
+
+  return (
+    <div className="space-y-2.5">
+      {rules.map((rule) => {
+        const custom = !isBuiltIn(rule.id);
+        return (
+          <div key={rule.id} className="flex items-center gap-2 group">
+            <div className="flex-1 min-w-0 flex items-center gap-1.5">
+              <span className={cn("text-sm truncate", !rule.enabled && "text-muted-foreground line-through")} style={rule.enabled ? { color: rule.color } : undefined}>
+                {rule.label}
+              </span>
+              {custom && (
+                <>
+                  <Pencil
+                    size={10}
+                    className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground cursor-pointer"
+                    onClick={() => { setEditingRule(rule); setAddDialogOpen(true); }}
+                  />
+                  <Trash2
+                    size={10}
+                    className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground cursor-pointer"
+                    onClick={() => onChange(rules.filter((r) => r.id !== rule.id))}
+                  />
+                </>
+              )}
+            </div>
+            <label className="relative flex-shrink-0">
+              <input
+                type="color"
+                value={rule.color}
+                onChange={(e) => onChange(rules.map((r) => r.id === rule.id ? { ...r, color: e.target.value } : r))}
+                className="sr-only"
+              />
+              <span
+                className="block w-8 h-5 rounded cursor-pointer border border-border/50 hover:border-border transition-colors"
+                style={{ backgroundColor: rule.color }}
+              />
+            </label>
+          </div>
+        );
+      })}
+
+      <div className="flex pt-2 mt-2 border-t border-border/50">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="flex-1 text-muted-foreground hover:text-foreground"
+          onClick={() => setAddDialogOpen(true)}
+        >
+          <Plus size={14} className="mr-1.5" />
+          {t('settings.terminal.keywordHighlight.addCustom')}
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="flex-1 text-muted-foreground hover:text-foreground"
+          onClick={() => {
+            onChange(rules.map((rule) => {
+              const def = DEFAULT_KEYWORD_HIGHLIGHT_RULES.find((r) => r.id === rule.id);
+              return def ? { ...rule, color: def.color } : rule;
+            }));
+          }}
+        >
+          <RotateCcw size={14} className="mr-1.5" />
+          {t("settings.terminal.keywordHighlight.resetColors")}
+        </Button>
+      </div>
+
+      <AddCustomRuleDialog
+        open={addDialogOpen}
+        onOpenChange={(v) => { setAddDialogOpen(v); if (!v) setEditingRule(null); }}
+        editRule={editingRule}
+        onAdd={(rule) => {
+          if (editingRule) {
+            onChange(rules.map((r) => r.id === editingRule.id ? rule : r));
+          } else {
+            onChange([...rules, rule]);
+          }
+          setEditingRule(null);
+        }}
+      />
+    </div>
+  );
+};
+
 // Theme preview button component
 const ThemePreviewButton: React.FC<{
  theme: (typeof TERMINAL_THEMES)[0];
@@ -84,6 +273,8 @@ export default function SettingsTerminalTab(props: {
    value: TerminalSettings[K],
  ) => void;
  availableFonts: TerminalFont[];
+  workspaceFocusStyle: 'dim' | 'border';
+  setWorkspaceFocusStyle: (style: 'dim' | 'border') => void;
 }) {
  const {
    terminalThemeId,
@@ -95,6 +286,8 @@ export default function SettingsTerminalTab(props: {
    terminalSettings,
    updateTerminalSetting,
    availableFonts,
+    workspaceFocusStyle,
+    setWorkspaceFocusStyle,
  } = props;
  const { t } = useI18n();

@@ -102,6 +295,20 @@ export default function SettingsTerminalTab(props: {
  const [defaultShell, setDefaultShell] = useState<string>("");
  const [shellValidation, setShellValidation] = useState<{ valid: boolean; message?: string } | null>(null);
  const [dirValidation, setDirValidation] = useState<{ valid: boolean; message?: string } | null>(null);
+
+  const discoveredShells = useDiscoveredShells();
+  const [showCustomShellInput, setShowCustomShellInput] = useState(() => {
+    if (!terminalSettings.localShell) return false;
+    return !discoveredShells.some(s => s.id === terminalSettings.localShell);
+  });
+  const [customShellModalOpen, setCustomShellModalOpen] = useState(false);
+  const [customShellDraft, setCustomShellDraft] = useState("");
+
+  // Update showCustomShellInput once discovered shells load
+  useEffect(() => {
+    if (!terminalSettings.localShell) return;
+    setShowCustomShellInput(!discoveredShells.some(s => s.id === terminalSettings.localShell));
+  }, [discoveredShells, terminalSettings.localShell]);
  const [themeModalOpen, setThemeModalOpen] = useState(false);

  // Subscribe to custom theme changes so editing in-place triggers re-render
@@ -114,23 +321,33 @@ export default function SettingsTerminalTab(props: {
      || TERMINAL_THEMES[0];
  }, [terminalThemeId, customThemes]);

+  const handleAutocompleteGhostTextChange = useCallback((enabled: boolean) => {
+    updateTerminalSetting("autocompleteGhostText", enabled);
+    if (enabled) {
+      updateTerminalSetting("autocompletePopupMenu", false);
+    }
+  }, [updateTerminalSetting]);
+
+  const handleAutocompletePopupMenuChange = useCallback((enabled: boolean) => {
+    updateTerminalSetting("autocompletePopupMenu", enabled);
+    if (enabled) {
+      updateTerminalSetting("autocompleteGhostText", false);
+    }
+  }, [updateTerminalSetting]);
+
  // Import .itermcolors file
  const importFileRef = useRef<HTMLInputElement>(null);
  const handleImportItermcolors = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) {
-      console.log('[Settings] No file selected');
      return;
    }
-    console.log('[Settings] File selected:', file.name, 'size:', file.size);
    const name = file.name.replace(/\.(itermcolors|xml)$/i, '');
    const reader = new FileReader();
    reader.onload = () => {
      const xml = reader.result as string;
-      console.log('[Settings] File read successfully, length:', xml.length);
      const parsed = parseItermcolors(xml, name);
      if (parsed) {
-        console.log('[Settings] Theme parsed successfully:', parsed.id, parsed.name);
        customThemeStore.addTheme(parsed);
        setTerminalThemeId(parsed.id);
      } else {
@@ -196,7 +413,7 @@ export default function SettingsTerminalTab(props: {
    }
  }, []);

-  // Validate shell path when it changes
+  // Validate shell path when it changes (only for custom paths, not discovered shell ids)
  useEffect(() => {
    const bridge = (window as unknown as { netcatty?: NetcattyBridge }).netcatty;
    const shellPath = terminalSettings.localShell;
@@ -206,6 +423,12 @@ export default function SettingsTerminalTab(props: {
      return;
    }

+    // Skip validation for discovered shell ids — only validate custom paths
+    if (discoveredShells.some(s => s.id === shellPath)) {
+      setShellValidation(null);
+      return;
+    }
+
    if (!bridge?.validatePath) {
      setShellValidation(null);
      return;
@@ -226,7 +449,7 @@ export default function SettingsTerminalTab(props: {
    }, 300);

    return () => clearTimeout(timeoutId);
-  }, [terminalSettings.localShell, t]);
+  }, [terminalSettings.localShell, discoveredShells, t]);

  // Validate directory path when it changes
  useEffect(() => {
@@ -575,6 +798,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")}
@@ -603,6 +843,13 @@ export default function SettingsTerminalTab(props: {
          <Toggle checked={terminalSettings.scrollOnPaste} onChange={(v) => updateTerminalSetting("scrollOnPaste", v)} />
        </SettingRow>

+        <SettingRow
+          label={t("settings.terminal.behavior.smoothScrolling")}
+          description={t("settings.terminal.behavior.smoothScrolling.desc")}
+        >
+          <Toggle checked={terminalSettings.smoothScrolling} onChange={(v) => updateTerminalSetting("smoothScrolling", v)} />
+        </SettingRow>
+
        <SettingRow
          label={t("settings.terminal.behavior.linkModifier")}
          description={t("settings.terminal.behavior.linkModifier.desc")}
@@ -616,7 +863,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>
@@ -656,47 +903,10 @@ export default function SettingsTerminalTab(props: {
          />
        </div>
        {terminalSettings.keywordHighlightEnabled && (
-          <div className="space-y-2.5">
-            {terminalSettings.keywordHighlightRules.map((rule) => (
-              <div key={rule.id} className="flex items-center justify-between">
-                <span className="text-sm" style={{ color: rule.color }}>
-                  {rule.label}
-                </span>
-                <label className="relative">
-                  <input
-                    type="color"
-                    value={rule.color}
-                    onChange={(e) => {
-                      const newRules = terminalSettings.keywordHighlightRules.map((r) =>
-                        r.id === rule.id ? { ...r, color: e.target.value } : r,
-                      );
-                      updateTerminalSetting("keywordHighlightRules", newRules);
-                    }}
-                    className="sr-only"
-                  />
-                  <span
-                    className="block w-10 h-6 rounded-md cursor-pointer border border-border/50 hover:border-border transition-colors"
-                    style={{ backgroundColor: rule.color }}
-                  />
-                </label>
-              </div>
-            ))}
-            <Button
-              variant="ghost"
-              size="sm"
-              className="w-full mt-3 text-muted-foreground hover:text-foreground"
-              onClick={() => {
-                const resetRules = terminalSettings.keywordHighlightRules.map((rule) => {
-                  const defaultRule = DEFAULT_KEYWORD_HIGHLIGHT_RULES.find((r) => r.id === rule.id);
-                  return defaultRule ? { ...rule, color: defaultRule.color } : rule;
-                });
-                updateTerminalSetting("keywordHighlightRules", resetRules);
-              }}
-            >
-              <RotateCcw size={14} className="mr-2" />
-              {t("settings.terminal.keywordHighlight.resetColors")}
-            </Button>
-          </div>
+          <KeywordHighlightRulesEditor
+            rules={terminalSettings.keywordHighlightRules}
+            onChange={(rules) => updateTerminalSetting("keywordHighlightRules", rules)}
+          />
        )}
      </div>

@@ -707,24 +917,43 @@ export default function SettingsTerminalTab(props: {
          description={t("settings.terminal.localShell.shell.desc")}
        >
          <div className="flex flex-col gap-1 items-end">
-            <Input
-              value={terminalSettings.localShell}
-              placeholder={t("settings.terminal.localShell.shell.placeholder")}
-              onChange={(e) => updateTerminalSetting("localShell", e.target.value)}
-              className={cn(
-                "w-48",
-                shellValidation && !shellValidation.valid && "border-destructive focus-visible:ring-destructive"
-              )}
-            />
-            {defaultShell && !terminalSettings.localShell && (
-              <span className="text-xs text-muted-foreground">
-                {t("settings.terminal.localShell.shell.detected")}: {defaultShell}
+            <select
+              className="h-9 w-48 rounded-md border border-input bg-background px-3 text-sm"
+              value={
+                showCustomShellInput
+                  ? "__custom__"
+                  : terminalSettings.localShell || ""
+              }
+              onChange={(e) => {
+                const value = e.target.value;
+                if (value === "__custom__") {
+                  setCustomShellDraft(terminalSettings.localShell || "");
+                  setCustomShellModalOpen(true);
+                } else {
+                  setShowCustomShellInput(false);
+                  updateTerminalSetting("localShell", value);
+                }
+              }}
+            >
+              <option value="">
+                {t("settings.terminal.localShell.shell.default")}
+                {defaultShell ? ` (${defaultShell.split(/[/\\]/).pop()})` : ""}
+              </option>
+              {discoveredShells.map((shell) => (
+                <option key={shell.id} value={shell.id}>
+                  {shell.name}
+                </option>
+              ))}
+              <option value="__custom__">{t("settings.terminal.localShell.shell.custom")}</option>
+            </select>
+            {showCustomShellInput && (
+              <span className="text-xs text-muted-foreground truncate max-w-48">
+                {terminalSettings.localShell}
              </span>
            )}
-            {shellValidation && !shellValidation.valid && shellValidation.message && (
-              <span className="text-xs text-destructive flex items-center gap-1">
-                <AlertCircle size={12} />
-                {shellValidation.message}
+            {!showCustomShellInput && defaultShell && !terminalSettings.localShell && (
+              <span className="text-xs text-muted-foreground">
+                {t("settings.terminal.localShell.shell.detected")}: {defaultShell}
              </span>
            )}
          </div>
@@ -824,13 +1053,130 @@ export default function SettingsTerminalTab(props: {
            options={[
              { value: "auto", label: t("settings.terminal.rendering.auto") },
              { value: "webgl", label: "WebGL" },
-              { value: "canvas", label: "Canvas" },
+              { value: "dom", label: "DOM" },
            ]}
-            onChange={(v) => updateTerminalSetting("rendererType", v as "auto" | "webgl" | "canvas")}
+            onChange={(v) => updateTerminalSetting("rendererType", v as "auto" | "webgl" | "dom")}
            className="w-32"
          />
        </SettingRow>
      </div>
+      {/* Autocomplete */}
+      <SectionHeader title={t("settings.terminal.section.workspaceFocus")} />
+      <div className="space-y-1">
+        <SettingRow
+          label={t("settings.terminal.workspaceFocus.style")}
+          description={t("settings.terminal.workspaceFocus.style.desc")}
+        >
+          <Select
+            value={workspaceFocusStyle}
+            onChange={(v) => setWorkspaceFocusStyle(v as 'dim' | 'border')}
+            options={[
+              { value: 'dim', label: t("settings.terminal.workspaceFocus.dim") },
+              { value: 'border', label: t("settings.terminal.workspaceFocus.border") },
+            ]}
+          />
+        </SettingRow>
+      </div>
+
+      <SectionHeader title={t("settings.terminal.section.autocomplete")} />
+      <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
+        <SettingRow
+          label={t("settings.terminal.autocomplete.enabled")}
+          description={t("settings.terminal.autocomplete.enabled.desc")}
+        >
+          <Toggle
+            checked={terminalSettings.autocompleteEnabled}
+            onChange={(v) => updateTerminalSetting("autocompleteEnabled", v)}
+          />
+        </SettingRow>
+        <SettingRow
+          label={t("settings.terminal.autocomplete.ghostText")}
+          description={t("settings.terminal.autocomplete.ghostText.desc")}
+        >
+          <Toggle
+            checked={terminalSettings.autocompleteGhostText}
+            onChange={handleAutocompleteGhostTextChange}
+            disabled={!terminalSettings.autocompleteEnabled}
+          />
+        </SettingRow>
+        <SettingRow
+          label={t("settings.terminal.autocomplete.popupMenu")}
+          description={t("settings.terminal.autocomplete.popupMenu.desc")}
+        >
+          <Toggle
+            checked={terminalSettings.autocompletePopupMenu}
+            onChange={handleAutocompletePopupMenuChange}
+            disabled={!terminalSettings.autocompleteEnabled}
+          />
+        </SettingRow>
+      </div>
+      {/* Custom Shell Modal */}
+      <Dialog open={customShellModalOpen} onOpenChange={setCustomShellModalOpen}>
+        <DialogContent className="sm:max-w-[480px]">
+          <DialogHeader>
+            <DialogTitle>{t("settings.terminal.localShell.shell.custom")}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-2">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t("settings.terminal.localShell.shell.customPath")}</label>
+              <Input
+                value={customShellDraft}
+                placeholder={t("settings.terminal.localShell.shell.placeholder")}
+                onChange={(e) => setCustomShellDraft(e.target.value)}
+                className="w-full"
+                autoFocus
+              />
+              {shellValidation && !shellValidation.valid && shellValidation.message && (
+                <span className="text-xs text-destructive flex items-center gap-1">
+                  <AlertCircle size={12} />
+                  {shellValidation.message}
+                </span>
+              )}
+              {shellValidation?.valid && (
+                <span className="text-xs text-emerald-600 dark:text-emerald-400 flex items-center gap-1">
+                  ✓ {t("settings.terminal.localShell.shell.pathValid")}
+                </span>
+              )}
+            </div>
+            <div className="space-y-1.5">
+              <label className="text-xs text-muted-foreground">{t("settings.terminal.localShell.shell.commonPaths")}</label>
+              <div className="flex flex-wrap gap-1.5">
+                {["/bin/bash", "/bin/zsh", "/usr/bin/fish", "/bin/sh", "powershell.exe", "pwsh.exe", "cmd.exe"].map((p) => (
+                  <button
+                    key={p}
+                    type="button"
+                    onClick={() => setCustomShellDraft(p)}
+                    className="text-xs px-2 py-1 rounded-md border border-border bg-muted/50 hover:bg-muted transition-colors"
+                  >
+                    {p}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <button
+              type="button"
+              onClick={() => setCustomShellModalOpen(false)}
+              className="px-3 py-1.5 text-sm rounded-md border border-border hover:bg-muted transition-colors"
+            >
+              {t("common.cancel")}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                updateTerminalSetting("localShell", customShellDraft);
+                setShowCustomShellInput(true);
+                setCustomShellModalOpen(false);
+              }}
+              disabled={!customShellDraft.trim()}
+              className="px-3 py-1.5 text-sm rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
+            >
+              {t("common.save")}
+            </button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
    </SettingsTabContent>
  );
 }
--- a/components/settings/tabs/ai/AddProviderDropdown.tsx
+++ b/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>
+  );
+};
--- a/components/settings/tabs/ai/ClaudeCodeCard.tsx
+++ b/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>
+  );
+};
--- a/components/settings/tabs/ai/CodexConnectionCard.tsx
+++ b/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>
+  );
+};
--- a/components/settings/tabs/ai/CopilotCliCard.tsx
+++ b/components/settings/tabs/ai/CopilotCliCard.tsx
@@ -0,0 +1,87 @@
+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 CopilotCliCard: 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.copilot.detecting')
+    : found
+      ? t('ai.copilot.detected')
+      : t('ai.copilot.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="copilot" size="sm" />
+            <span className="text-sm font-medium">{t('ai.copilot.title')}</span>
+          </div>
+          <p className="text-xs text-muted-foreground mt-2 leading-5">
+            {t('ai.copilot.description')}
+          </p>
+        </div>
+        <div className={cn("text-xs font-medium shrink-0", statusClassName)}>
+          {statusText}
+        </div>
+      </div>
+
+      {found ? (
+        <div className="flex items-center gap-2 text-xs">
+          <span className="text-muted-foreground">{t('ai.copilot.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.copilot.notFoundHint')}
+          </p>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={customPath}
+              onChange={(e) => onCustomPathChange(e.target.value)}
+              placeholder={t('ai.copilot.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.copilot.check')}
+            </Button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
--- a/Show More
+++ b/Show More