diff --git a/AGENTS.md b/AGENTS.md
index b219e78..c5ff4ac 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -159,3 +159,11 @@ script/              # Build-time code generation
 - **Output:** builds to `internal/web/dist/`, embedded in Go binary via `//go:embed`
 - **Lint:** `cd web && pnpm lint` (eslint + oxlint)
 - Changes to the frontend require rebuilding via `make build-web` for the Go binary to pick them up
+
+### Icons & Styling
+
+- **Icons:** use `@heroicons/vue/24/outline` exclusively. Import each icon by name from its subpath (`import { XMarkIcon } from '@heroicons/vue/24/outline'`) for per-file tree-shaking. Do **not** hand-write inline `<svg>` icons or `v-html` SVG path strings.
+- **Icon sizing:** use Tailwind `w-N h-N` classes (e.g. `class="w-3.5 h-3.5"`), never a `:size` prop.
+- **Colors:** every color must come from a CSS custom property defined in `src/styles/tokens.css`. Never hardcode hex/rgb/`#fff`/`white` in `.vue` or `.css`. Text on the primary/destructive fills uses `--color-on-primary` / `--color-on-destructive`; code blocks use `--code-bg` / `--code-border`; syntax highlighting uses `--hljs-*`.
+- **Terminal (xterm) colors:** live in tokens (`--term-*` and the 16-color ANSI palette) and are read at runtime via `getComputedStyle` in `TerminalInstance.vue` — see `termTheme()`. Do not define terminal colors inline.
+- **Adding a new color:** add the token to `tokens.css` (both `:root` light and `.dark`) first, then reference it by `var(...)`. To theme it per generated theme, edit `internal/theme/palette.go` and regenerate — never edit `tokens.generated.css` by hand.
diff --git a/desktop/src-tauri/icons/128x128.png b/desktop/src-tauri/icons/128x128.png
index 62e7471..a2b1089 100644
Binary files a/desktop/src-tauri/icons/128x128.png and b/desktop/src-tauri/icons/128x128.png differ
diff --git a/desktop/src-tauri/icons/128x128@2x.png b/desktop/src-tauri/icons/128x128@2x.png
index 1240ff7..1304454 100644
Binary files a/desktop/src-tauri/icons/128x128@2x.png and b/desktop/src-tauri/icons/128x128@2x.png differ
diff --git a/desktop/src-tauri/icons/32x32.png b/desktop/src-tauri/icons/32x32.png
index dbab144..eb5dfef 100644
Binary files a/desktop/src-tauri/icons/32x32.png and b/desktop/src-tauri/icons/32x32.png differ
diff --git a/desktop/src-tauri/icons/64x64.png b/desktop/src-tauri/icons/64x64.png
index 5c871d2..b28a62a 100644
Binary files a/desktop/src-tauri/icons/64x64.png and b/desktop/src-tauri/icons/64x64.png differ
diff --git a/desktop/src-tauri/icons/Square107x107Logo.png b/desktop/src-tauri/icons/Square107x107Logo.png
index 6863dbe..0253c51 100644
Binary files a/desktop/src-tauri/icons/Square107x107Logo.png and b/desktop/src-tauri/icons/Square107x107Logo.png differ
diff --git a/desktop/src-tauri/icons/Square142x142Logo.png b/desktop/src-tauri/icons/Square142x142Logo.png
index 618193e..ecaa9d0 100644
Binary files a/desktop/src-tauri/icons/Square142x142Logo.png and b/desktop/src-tauri/icons/Square142x142Logo.png differ
diff --git a/desktop/src-tauri/icons/Square150x150Logo.png b/desktop/src-tauri/icons/Square150x150Logo.png
index a10b2f4..360a892 100644
Binary files a/desktop/src-tauri/icons/Square150x150Logo.png and b/desktop/src-tauri/icons/Square150x150Logo.png differ
diff --git a/desktop/src-tauri/icons/Square284x284Logo.png b/desktop/src-tauri/icons/Square284x284Logo.png
index 7f42d60..3afd80e 100644
Binary files a/desktop/src-tauri/icons/Square284x284Logo.png and b/desktop/src-tauri/icons/Square284x284Logo.png differ
diff --git a/desktop/src-tauri/icons/Square30x30Logo.png b/desktop/src-tauri/icons/Square30x30Logo.png
index ce55f01..a891981 100644
Binary files a/desktop/src-tauri/icons/Square30x30Logo.png and b/desktop/src-tauri/icons/Square30x30Logo.png differ
diff --git a/desktop/src-tauri/icons/Square310x310Logo.png b/desktop/src-tauri/icons/Square310x310Logo.png
index d1876c0..9c4cee9 100644
Binary files a/desktop/src-tauri/icons/Square310x310Logo.png and b/desktop/src-tauri/icons/Square310x310Logo.png differ
diff --git a/desktop/src-tauri/icons/Square44x44Logo.png b/desktop/src-tauri/icons/Square44x44Logo.png
index 544fcb3..3fad16dd 100644
Binary files a/desktop/src-tauri/icons/Square44x44Logo.png and b/desktop/src-tauri/icons/Square44x44Logo.png differ
diff --git a/desktop/src-tauri/icons/Square71x71Logo.png b/desktop/src-tauri/icons/Square71x71Logo.png
index 8d22ebc..e7c455f 100644
Binary files a/desktop/src-tauri/icons/Square71x71Logo.png and b/desktop/src-tauri/icons/Square71x71Logo.png differ
diff --git a/desktop/src-tauri/icons/Square89x89Logo.png b/desktop/src-tauri/icons/Square89x89Logo.png
index 01008f2..0369d8d 100644
Binary files a/desktop/src-tauri/icons/Square89x89Logo.png and b/desktop/src-tauri/icons/Square89x89Logo.png differ
diff --git a/desktop/src-tauri/icons/StoreLogo.png b/desktop/src-tauri/icons/StoreLogo.png
index 020e823..52ed5d6 100644
Binary files a/desktop/src-tauri/icons/StoreLogo.png and b/desktop/src-tauri/icons/StoreLogo.png differ
diff --git a/desktop/src-tauri/icons/android/mipmap-hdpi/ic_launcher.png b/desktop/src-tauri/icons/android/mipmap-hdpi/ic_launcher.png
index b66c449..6949244 100644
Binary files a/desktop/src-tauri/icons/android/mipmap-hdpi/ic_launcher.png and b/desktop/src-tauri/icons/android/mipmap-hdpi/ic_launcher.png differ
diff --git a/desktop/src-tauri/icons/android/mipmap-hdpi/ic_launcher_foreground.png b/desktop/src-tauri/icons/android/mipmap-hdpi/ic_launcher_foreground.png
index cd40909..9807e75 100644
Binary files a/desktop/src-tauri/icons/android/mipmap-hdpi/ic_launcher_foreground.png and b/desktop/src-tauri/icons/android/mipmap-hdpi/ic_launcher_foreground.png differ
diff --git a/desktop/src-tauri/icons/android/mipmap-hdpi/ic_launcher_round.png b/desktop/src-tauri/icons/android/mipmap-hdpi/ic_launcher_round.png
index fb93e5b..22c13f3 100644
Binary files a/desktop/src-tauri/icons/android/mipmap-hdpi/ic_launcher_round.png and b/desktop/src-tauri/icons/android/mipmap-hdpi/ic_launcher_round.png differ
diff --git a/desktop/src-tauri/icons/android/mipmap-mdpi/ic_launcher.png b/desktop/src-tauri/icons/android/mipmap-mdpi/ic_launcher.png
index a2d367e..2bf3c34 100644
Binary files a/desktop/src-tauri/icons/android/mipmap-mdpi/ic_launcher.png and b/desktop/src-tauri/icons/android/mipmap-mdpi/ic_launcher.png differ
diff --git a/desktop/src-tauri/icons/android/mipmap-mdpi/ic_launcher_foreground.png b/desktop/src-tauri/icons/android/mipmap-mdpi/ic_launcher_foreground.png
index 1b2c344..ea0fe96 100644
Binary files a/desktop/src-tauri/icons/android/mipmap-mdpi/ic_launcher_foreground.png and b/desktop/src-tauri/icons/android/mipmap-mdpi/ic_launcher_foreground.png differ
diff --git a/desktop/src-tauri/icons/android/mipmap-mdpi/ic_launcher_round.png b/desktop/src-tauri/icons/android/mipmap-mdpi/ic_launcher_round.png
index 4dbc543..3b485db 100644
Binary files a/desktop/src-tauri/icons/android/mipmap-mdpi/ic_launcher_round.png and b/desktop/src-tauri/icons/android/mipmap-mdpi/ic_launcher_round.png differ
diff --git a/desktop/src-tauri/icons/android/mipmap-xhdpi/ic_launcher.png b/desktop/src-tauri/icons/android/mipmap-xhdpi/ic_launcher.png
index 9481608..1cc7b93 100644
Binary files a/desktop/src-tauri/icons/android/mipmap-xhdpi/ic_launcher.png and b/desktop/src-tauri/icons/android/mipmap-xhdpi/ic_launcher.png differ
diff --git a/desktop/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_foreground.png b/desktop/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_foreground.png
index 58aa4c8..2d8de92 100644
Binary files a/desktop/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_foreground.png and b/desktop/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_foreground.png differ
diff --git a/desktop/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_round.png b/desktop/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_round.png
index 6d75c5e..eb1cd4a 100644
Binary files a/desktop/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_round.png and b/desktop/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_round.png differ
diff --git a/desktop/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher.png b/desktop/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher.png
index 12a2533..3812604 100644
Binary files a/desktop/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher.png and b/desktop/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher.png differ
diff --git a/desktop/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_foreground.png b/desktop/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_foreground.png
index e199ac2..07b45fa 100644
Binary files a/desktop/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_foreground.png and b/desktop/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_foreground.png differ
diff --git a/desktop/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_round.png b/desktop/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_round.png
index a612334..86cb521 100644
Binary files a/desktop/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_round.png and b/desktop/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_round.png differ
diff --git a/desktop/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher.png b/desktop/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher.png
index 147ed1e..8471438 100644
Binary files a/desktop/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher.png and b/desktop/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher.png differ
diff --git a/desktop/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_foreground.png b/desktop/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_foreground.png
index 117b887..46bad65 100644
Binary files a/desktop/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_foreground.png and b/desktop/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_foreground.png differ
diff --git a/desktop/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_round.png b/desktop/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_round.png
index b2ab90c..334757b 100644
Binary files a/desktop/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_round.png and b/desktop/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_round.png differ
diff --git a/desktop/src-tauri/icons/icon.icns b/desktop/src-tauri/icons/icon.icns
index 673b3f4..39d0b28 100644
Binary files a/desktop/src-tauri/icons/icon.icns and b/desktop/src-tauri/icons/icon.icns differ
diff --git a/desktop/src-tauri/icons/icon.ico b/desktop/src-tauri/icons/icon.ico
index ec32956..b95036a 100644
Binary files a/desktop/src-tauri/icons/icon.ico and b/desktop/src-tauri/icons/icon.ico differ
diff --git a/desktop/src-tauri/icons/icon.png b/desktop/src-tauri/icons/icon.png
index 549d775..b11407a 100644
Binary files a/desktop/src-tauri/icons/icon.png and b/desktop/src-tauri/icons/icon.png differ
diff --git a/desktop/src-tauri/icons/ios/AppIcon-20x20@1x.png b/desktop/src-tauri/icons/ios/AppIcon-20x20@1x.png
index 5a6813e..1021f8e 100644
Binary files a/desktop/src-tauri/icons/ios/AppIcon-20x20@1x.png and b/desktop/src-tauri/icons/ios/AppIcon-20x20@1x.png differ
diff --git a/desktop/src-tauri/icons/ios/AppIcon-20x20@2x-1.png b/desktop/src-tauri/icons/ios/AppIcon-20x20@2x-1.png
index cfae1d9..b0fcc61 100644
Binary files a/desktop/src-tauri/icons/ios/AppIcon-20x20@2x-1.png and b/desktop/src-tauri/icons/ios/AppIcon-20x20@2x-1.png differ
diff --git a/desktop/src-tauri/icons/ios/AppIcon-20x20@2x.png b/desktop/src-tauri/icons/ios/AppIcon-20x20@2x.png
index cfae1d9..b0fcc61 100644
Binary files a/desktop/src-tauri/icons/ios/AppIcon-20x20@2x.png and b/desktop/src-tauri/icons/ios/AppIcon-20x20@2x.png differ
diff --git a/desktop/src-tauri/icons/ios/AppIcon-20x20@3x.png b/desktop/src-tauri/icons/ios/AppIcon-20x20@3x.png
index e869354..fc26f88 100644
Binary files a/desktop/src-tauri/icons/ios/AppIcon-20x20@3x.png and b/desktop/src-tauri/icons/ios/AppIcon-20x20@3x.png differ
diff --git a/desktop/src-tauri/icons/ios/AppIcon-29x29@1x.png b/desktop/src-tauri/icons/ios/AppIcon-29x29@1x.png
index eec3f02..be0daa6 100644
Binary files a/desktop/src-tauri/icons/ios/AppIcon-29x29@1x.png and b/desktop/src-tauri/icons/ios/AppIcon-29x29@1x.png differ
diff --git a/desktop/src-tauri/icons/ios/AppIcon-29x29@2x-1.png b/desktop/src-tauri/icons/ios/AppIcon-29x29@2x-1.png
index 5697fa5..18d4486 100644
Binary files a/desktop/src-tauri/icons/ios/AppIcon-29x29@2x-1.png and b/desktop/src-tauri/icons/ios/AppIcon-29x29@2x-1.png differ
diff --git a/desktop/src-tauri/icons/ios/AppIcon-29x29@2x.png b/desktop/src-tauri/icons/ios/AppIcon-29x29@2x.png
index 5697fa5..18d4486 100644
Binary files a/desktop/src-tauri/icons/ios/AppIcon-29x29@2x.png and b/desktop/src-tauri/icons/ios/AppIcon-29x29@2x.png differ
diff --git a/desktop/src-tauri/icons/ios/AppIcon-29x29@3x.png b/desktop/src-tauri/icons/ios/AppIcon-29x29@3x.png
index e76d9fa..3d54494 100644
Binary files a/desktop/src-tauri/icons/ios/AppIcon-29x29@3x.png and b/desktop/src-tauri/icons/ios/AppIcon-29x29@3x.png differ
diff --git a/desktop/src-tauri/icons/ios/AppIcon-40x40@1x.png b/desktop/src-tauri/icons/ios/AppIcon-40x40@1x.png
index cfae1d9..b0fcc61 100644
Binary files a/desktop/src-tauri/icons/ios/AppIcon-40x40@1x.png and b/desktop/src-tauri/icons/ios/AppIcon-40x40@1x.png differ
diff --git a/desktop/src-tauri/icons/ios/AppIcon-40x40@2x-1.png b/desktop/src-tauri/icons/ios/AppIcon-40x40@2x-1.png
index 2a636ab..3ccee70 100644
Binary files a/desktop/src-tauri/icons/ios/AppIcon-40x40@2x-1.png and b/desktop/src-tauri/icons/ios/AppIcon-40x40@2x-1.png differ
diff --git a/desktop/src-tauri/icons/ios/AppIcon-40x40@2x.png b/desktop/src-tauri/icons/ios/AppIcon-40x40@2x.png
index 2a636ab..3ccee70 100644
Binary files a/desktop/src-tauri/icons/ios/AppIcon-40x40@2x.png and b/desktop/src-tauri/icons/ios/AppIcon-40x40@2x.png differ
diff --git a/desktop/src-tauri/icons/ios/AppIcon-40x40@3x.png b/desktop/src-tauri/icons/ios/AppIcon-40x40@3x.png
index 271f1fc..fadeb9b 100644
Binary files a/desktop/src-tauri/icons/ios/AppIcon-40x40@3x.png and b/desktop/src-tauri/icons/ios/AppIcon-40x40@3x.png differ
diff --git a/desktop/src-tauri/icons/ios/AppIcon-512@2x.png b/desktop/src-tauri/icons/ios/AppIcon-512@2x.png
index 98983ad..9ec03a1 100644
Binary files a/desktop/src-tauri/icons/ios/AppIcon-512@2x.png and b/desktop/src-tauri/icons/ios/AppIcon-512@2x.png differ
diff --git a/desktop/src-tauri/icons/ios/AppIcon-60x60@2x.png b/desktop/src-tauri/icons/ios/AppIcon-60x60@2x.png
index 271f1fc..fadeb9b 100644
Binary files a/desktop/src-tauri/icons/ios/AppIcon-60x60@2x.png and b/desktop/src-tauri/icons/ios/AppIcon-60x60@2x.png differ
diff --git a/desktop/src-tauri/icons/ios/AppIcon-60x60@3x.png b/desktop/src-tauri/icons/ios/AppIcon-60x60@3x.png
index 8cae339..6201340 100644
Binary files a/desktop/src-tauri/icons/ios/AppIcon-60x60@3x.png and b/desktop/src-tauri/icons/ios/AppIcon-60x60@3x.png differ
diff --git a/desktop/src-tauri/icons/ios/AppIcon-76x76@1x.png b/desktop/src-tauri/icons/ios/AppIcon-76x76@1x.png
index 84853ce..0cc3cc4 100644
Binary files a/desktop/src-tauri/icons/ios/AppIcon-76x76@1x.png and b/desktop/src-tauri/icons/ios/AppIcon-76x76@1x.png differ
diff --git a/desktop/src-tauri/icons/ios/AppIcon-76x76@2x.png b/desktop/src-tauri/icons/ios/AppIcon-76x76@2x.png
index d9f6870..6529316 100644
Binary files a/desktop/src-tauri/icons/ios/AppIcon-76x76@2x.png and b/desktop/src-tauri/icons/ios/AppIcon-76x76@2x.png differ
diff --git a/desktop/src-tauri/icons/ios/AppIcon-83.5x83.5@2x.png b/desktop/src-tauri/icons/ios/AppIcon-83.5x83.5@2x.png
index a2e584e..56a15e8 100644
Binary files a/desktop/src-tauri/icons/ios/AppIcon-83.5x83.5@2x.png and b/desktop/src-tauri/icons/ios/AppIcon-83.5x83.5@2x.png differ
diff --git a/internal/web/channel.go b/internal/web/channel.go
index 3cc81de..5f95123 100644
--- a/internal/web/channel.go
+++ b/internal/web/channel.go
@@ -2,6 +2,7 @@ package web
 
 import (
 	"encoding/json"
+	"io"
 	"net/http"
 	"time"
 
@@ -104,5 +105,47 @@ func (s *Server) handleChannelDisable(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, http.StatusOK, map[string]string{"status": "ok", "state": "disabled"})
 }
 
+// handleChannelBLEStatus reports whether the Bluetooth (BLE) status channel is
+// enabled in config. The actual BLE notifier is only wired at startup (and only
+// on desktop builds with CoreBluetooth), so this reflects the persisted
+// preference, which takes effect on the next launch.
+func (s *Server) handleChannelBLEStatus(w http.ResponseWriter, r *http.Request) {
+	enabled := false
+	if s.cfg != nil && s.cfg.Channel != nil {
+		enabled = s.cfg.Channel.BLEEnabled
+	}
+	writeJSON(w, http.StatusOK, map[string]any{"enabled": enabled})
+}
+
+// handleSetChannelBLE persists the Bluetooth (BLE) status-channel preference.
+// Like the proxy/cert settings, it takes effect after an app restart (the BLE
+// notifier is created once at startup when channel.ble_enabled is true).
+func (s *Server) handleSetChannelBLE(w http.ResponseWriter, r *http.Request) {
+	var req struct {
+		Enabled bool `json:"enabled"`
+	}
+	if err := json.NewDecoder(io.LimitReader(r.Body, 1<<16)).Decode(&req); err != nil {
+		writeJSON(w, http.StatusBadRequest, map[string]string{"error": "invalid request"})
+		return
+	}
+	s.mu.Lock()
+	if s.cfg == nil {
+		s.mu.Unlock()
+		writeJSON(w, http.StatusInternalServerError, map[string]string{"error": "config unavailable"})
+		return
+	}
+	if s.cfg.Channel == nil {
+		s.cfg.Channel = &config.ChannelConfig{}
+	}
+	s.cfg.Channel.BLEEnabled = req.Enabled
+	if err := config.SaveConfig(s.cfg); err != nil {
+		s.mu.Unlock()
+		writeJSON(w, http.StatusInternalServerError, map[string]string{"error": err.Error()})
+		return
+	}
+	s.mu.Unlock()
+	writeJSON(w, http.StatusOK, map[string]any{"enabled": req.Enabled})
+}
+
 // Ensure writeJSON is used (defined in server.go).
 var _ = json.Marshal
diff --git a/internal/web/server.go b/internal/web/server.go
index 545b24f..6ccddeb 100644
--- a/internal/web/server.go
+++ b/internal/web/server.go
@@ -330,6 +330,8 @@ func (s *Server) Start(ctx context.Context) error {
 	mux.HandleFunc("POST /api/channel/logout", s.handleChannelLogout)
 	mux.HandleFunc("POST /api/channel/enable", s.handleChannelEnable)
 	mux.HandleFunc("POST /api/channel/disable", s.handleChannelDisable)
+	mux.HandleFunc("GET /api/channel/ble", s.handleChannelBLEStatus)
+	mux.HandleFunc("POST /api/channel/ble", s.handleSetChannelBLE)
 
 	// Setup API — available in setup mode (no provider configured yet).
 	mux.HandleFunc("GET /api/setup/providers", s.handleSetupProviders)
@@ -2230,6 +2232,15 @@ func (s *Server) handleSetApprovalMode(w http.ResponseWriter, r *http.Request) {
 			config.Logger().Printf("[web] approval mode agent rebuild error: %v", err)
 		}
 	}
+	// Persist as the default startup mode so the preference survives restarts —
+	// resolveStartupMode reads cfg.DefaultMode. This makes the Settings toggle a
+	// true "default", not just a one-off runtime flip.
+	if s.cfg != nil {
+		s.cfg.DefaultMode = sm.String()
+		if err := config.SaveConfig(s.cfg); err != nil {
+			config.Logger().Printf("[web] approval mode save config failed: %v", err)
+		}
+	}
 	s.mu.Unlock()
 
 	s.wsBroker.Broadcast(WSEvent{
diff --git a/web/index.html b/web/index.html
index e8835ee..562437c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -2,7 +2,7 @@
 <html lang="en" class="dark">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" type="image/svg+xml" href="/icon.svg">
+    <link rel="icon" type="image/png" href="/icon.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="theme-color" content="#111111">
     <script>
diff --git a/web/package.json b/web/package.json
index d47f8c4..7731181 100644
--- a/web/package.json
+++ b/web/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@headlessui/tailwindcss": "^0.2.2",
     "@headlessui/vue": "^1.7.23",
+    "@heroicons/vue": "^2.2.0",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.2.2",
     "@tauri-apps/api": "^2.9.0",
@@ -30,8 +31,6 @@
     "@xterm/xterm": "^6.0.0",
     "dompurify": "^3.4.11",
     "highlight.js": "^11.11.1",
-    "lucide-vue-next": "^1.0.0",
-    "marked": "^18.0.0",
     "marked": "^18.0.2",
     "marked-highlight": "^2.2.4",
     "pinia": "^3.0.4",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index bbaeec9..da39f8a 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@headlessui/vue':
         specifier: ^1.7.23
         version: 1.7.23(vue@3.5.32(typescript@6.0.2))
+      '@heroicons/vue':
+        specifier: ^2.2.0
+        version: 2.2.0(vue@3.5.32(typescript@6.0.2))
       '@tailwindcss/typography':
         specifier: ^0.5.19
         version: 0.5.19(tailwindcss@4.2.2)
@@ -53,9 +56,6 @@ importers:
       highlight.js:
         specifier: ^11.11.1
         version: 11.11.1
-      lucide-vue-next:
-        specifier: ^1.0.0
-        version: 1.0.0(vue@3.5.32(typescript@6.0.2))
       marked:
         specifier: ^18.0.2
         version: 18.0.2
@@ -332,6 +332,11 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  '@heroicons/vue@2.2.0':
+    resolution: {integrity: sha512-G3dbSxoeEKqbi/DFalhRxJU4mTXJn7GwZ7ae8NuEQzd1bqdd0jAbdaBZlHPcvPD2xI1iGzNVB4k20Un2AguYPw==}
+    peerDependencies:
+      vue: '>= 3'
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -1617,12 +1622,6 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  lucide-vue-next@1.0.0:
-    resolution: {integrity: sha512-V6SPvx1IHTj/UY+FrIYWV5faISsPSb8BnWSFDxAtezWKvWc9ZZ40PDrdu1/Qb5vg4lHWr1hs1BAMGVGm6V1Xdg==}
-    deprecated: Package deprecated. Please use @lucide/vue instead.
-    peerDependencies:
-      vue: '>=3.0.1'
-
   magic-string-ast@1.0.3:
     resolution: {integrity: sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==}
     engines: {node: '>=20.19.0'}
@@ -2404,6 +2403,10 @@ snapshots:
       '@tanstack/vue-virtual': 3.13.23(vue@3.5.32(typescript@6.0.2))
       vue: 3.5.32(typescript@6.0.2)
 
+  '@heroicons/vue@2.2.0(vue@3.5.32(typescript@6.0.2))':
+    dependencies:
+      vue: 3.5.32(typescript@6.0.2)
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
@@ -3504,10 +3507,6 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  lucide-vue-next@1.0.0(vue@3.5.32(typescript@6.0.2)):
-    dependencies:
-      vue: 3.5.32(typescript@6.0.2)
-
   magic-string-ast@1.0.3:
     dependencies:
       magic-string: 0.30.21
diff --git a/web/public/icon.png b/web/public/icon.png
new file mode 100644
index 0000000..adf13e0
Binary files /dev/null and b/web/public/icon.png differ
diff --git a/web/public/icon.svg b/web/public/icon.svg
deleted file mode 100644
index ee1e3ff..0000000
--- a/web/public/icon.svg
+++ /dev/null
@@ -1,55 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
-  <defs>
-    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#1a1a1a"/>
-      <stop offset="100%" stop-color="#2a2a2a"/>
-    </linearGradient>
-  </defs>
-
-  <!-- Rounded square background -->
-  <rect x="16" y="16" width="480" height="480" rx="96" ry="96" fill="url(#bg)"/>
-
-  <!-- Bracket [ -->
-  <g fill="none" stroke="#ffffff" stroke-width="28" stroke-linecap="round" stroke-linejoin="round">
-    <polyline points="120,140 80,140 80,372 120,372"/>
-  </g>
-
-  <!-- Bracket ] -->
-  <g fill="none" stroke="#ffffff" stroke-width="28" stroke-linecap="round" stroke-linejoin="round">
-    <polyline points="392,140 432,140 432,372 392,372"/>
-  </g>
-
-  <!-- Letter J with accent color -->
-  <g fill="#FF8400">
-    <path d="
-      M 185 165
-      L 327 165
-      Q 347 165 347 185
-      Q 347 205 327 205
-      L 250 205
-      L 250 340
-      Q 250 385 222 408
-      Q 200 425 168 425
-      Q 140 425 122 412
-      Q 104 398 104 375
-      Q 104 360 114 350
-      Q 124 340 138 340
-      Q 152 340 160 349
-      Q 167 358 167 370
-      Q 167 380 162 387
-      Q 170 395 183 395
-      Q 198 395 208 382
-      Q 218 369 218 348
-      L 218 205
-      L 185 205
-      Q 165 205 165 185
-      Q 165 165 185 165
-      Z
-    "/>
-  </g>
-
-  <!-- CODE text -->
-  <g fill="#ffffff" font-family="'JetBrains Mono','SF Mono','Roboto Mono',Menlo,Monaco,monospace" font-size="80" font-weight="700" letter-spacing="12">
-    <text x="160" y="330" opacity="0">CODE</text>
-  </g>
-</svg>
diff --git a/web/src/App.vue b/web/src/App.vue
index 77c2081..41072d8 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, nextTick, watch, onUnmounted, provide } from 'vue'
+import { ChevronDoubleDownIcon } from '@heroicons/vue/24/outline'
 import { normalizeMode } from '@/types/api'
 import type { RemoteMeta } from '@/types/api'
 import { useChatStore } from '@/stores/chat'
@@ -434,7 +435,7 @@ function startResize(e: MouseEvent) {
               Start a new task in <span class="welcome-project">{{ store.projectName || 'jcode' }}</span>
             </h2>
             <p class="welcome-sub">
-              Pick a workspace, then send a message. Use <kbd class="welcome-kbd">/</kbd> for commands.
+              Send a message to start. <kbd class="welcome-kbd">/</kbd> for commands.
             </p>
           </div>
 
@@ -460,10 +461,8 @@ function startResize(e: MouseEvent) {
                 <ChatMessageVue
                   v-if="item.kind === 'message'"
                   :message="item.data"
-                  :can-retry="item.data.role === 'assistant' && !store.isRunning"
                   :can-edit="item.data.role === 'user' && !store.isRunning"
                   class="animate-fade-up"
-                  @retry="store.retryFromMessage(item.data.id)"
                   @edit="(text) => store.editAndResend(item.data.id, text)"
                 />
                 <ToolCallCard v-else-if="item.kind === 'tool'" :tool="item.data" class="animate-fade-up pl-9" />
@@ -506,25 +505,27 @@ function startResize(e: MouseEvent) {
           </div>
 
           <!-- Scroll-to-bottom button -->
-          <transition
-            enter-active-class="transition-all duration-200 ease-out"
-            enter-from-class="opacity-0 translate-y-2"
-            enter-to-class="opacity-100 translate-y-0"
-            leave-active-class="transition-all duration-150 ease-in"
-            leave-from-class="opacity-100 translate-y-0"
-            leave-to-class="opacity-0 translate-y-2"
-          >
-            <button
-              v-if="showScrollBtn"
-              class="absolute bottom-40 left-1/2 -translate-x-1/2 z-10 w-8 h-8 flex items-center justify-center rounded-full shadow-lg cursor-pointer transition-colors"
-              style="background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-muted-foreground)"
-              @click="scrollToBottom()"
+          <!-- Scroll-to-bottom button — anchored as its own flex row above the
+               composer (no magic px offset), so it tracks composer height. -->
+          <div class="relative h-0">
+            <transition
+              enter-active-class="transition-all duration-200 ease-out"
+              enter-from-class="opacity-0 translate-y-2"
+              enter-to-class="opacity-100 translate-y-0"
+              leave-active-class="transition-all duration-150 ease-in"
+              leave-from-class="opacity-100 translate-y-0"
+              leave-to-class="opacity-0 translate-y-2"
             >
-              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-                <path d="M12 5v14M5 12l7 7 7-7" />
-              </svg>
-            </button>
-          </transition>
+              <button
+                v-if="showScrollBtn"
+                class="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 w-8 h-8 flex items-center justify-center rounded-full shadow-lg cursor-pointer transition-colors"
+                style="background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-muted-foreground)"
+                @click="scrollToBottom()"
+              >
+                <ChevronDoubleDownIcon class="w-4 h-4" />
+              </button>
+            </transition>
+          </div>
 
           <GoalBanner />
           <ChatInput />
@@ -639,7 +640,7 @@ function startResize(e: MouseEvent) {
   border: none;
   border-radius: var(--radius-lg);
   background: var(--color-primary);
-  color: #fff;
+  color: var(--color-on-primary);
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
diff --git a/web/src/components/ApprovalBanner.vue b/web/src/components/ApprovalBanner.vue
index ade2480..2abee4a 100644
--- a/web/src/components/ApprovalBanner.vue
+++ b/web/src/components/ApprovalBanner.vue
@@ -1,5 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import {
+  ShieldCheckIcon,
+  ShieldExclamationIcon,
+  LockClosedIcon,
+  ChevronDownIcon,
+} from '@heroicons/vue/24/outline'
 import type { PendingApproval } from '@/types/api'
 import { useChatStore } from '@/stores/chat'
 
@@ -9,6 +15,10 @@ defineProps<{
 
 const store = useChatStore()
 const showArgs = ref(false)
+// Two-step confirm for the high-stakes "Allow all" action (auto-approves the
+// rest of the session). First click arms it; a second click on the now-red
+// button actually submits. Auto-resets if the approval resolves meanwhile.
+const armingAllowAll = ref(false)
 
 function formatArgs(args: string): string {
   try {
@@ -27,14 +37,18 @@ function formatArgs(args: string): string {
   >
     <div class="flex items-center gap-1.5 py-1">
       <!-- Shield glyph carries the resolved state (success / destructive) -->
-      <svg
+      <ShieldCheckIcon
+        v-if="approval.approved"
         class="w-3.5 h-3.5 shrink-0"
-        :style="{ color: approval.approved ? 'var(--color-success-fg)' : 'var(--color-destructive)' }"
-        viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
-      >
-        <path v-if="approval.approved" fill-rule="evenodd" d="M10 1.5l6 2.2v4.8c0 4-2.6 7.6-6 8.5-3.4-.9-6-4.5-6-8.5V3.7l6-2.2zm2.78 6.16a.75.75 0 00-1.06-1.06L9 9.32 8.28 8.6a.75.75 0 10-1.06 1.06l1.25 1.25a.75.75 0 001.06 0l3.25-3.25z" clip-rule="evenodd" />
-        <path v-else fill-rule="evenodd" d="M10 1.5l6 2.2v4.8c0 4-2.6 7.6-6 8.5-3.4-.9-6-4.5-6-8.5V3.7l6-2.2zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
-      </svg>
+        style="color: var(--color-success-fg)"
+        aria-hidden="true"
+      />
+      <ShieldExclamationIcon
+        v-else
+        class="w-3.5 h-3.5 shrink-0"
+        style="color: var(--color-destructive)"
+        aria-hidden="true"
+      />
       <span class="text-xs font-mono truncate min-w-0" style="color: var(--color-muted-foreground)">{{ approval.tool_name }}</span>
       <span
         class="text-[10px] shrink-0"
@@ -66,13 +80,11 @@ function formatArgs(args: string): string {
       <div class="flex-1 min-w-0">
         <!-- Header: shield-lock glyph + label + external chip + args toggle -->
         <div class="flex items-center gap-1.5 mb-1.5">
-          <svg
+          <LockClosedIcon
             class="w-3.5 h-3.5 shrink-0"
             style="color: var(--color-warning-fg)"
-            viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
-          >
-            <path fill-rule="evenodd" d="M10 1.5l6 2.2v4.8c0 4-2.6 7.6-6 8.5-3.4-.9-6-4.5-6-8.5V3.7l6-2.2zM9 9V6.5a1 1 0 112 0V9h.5a.75.75 0 01.75.75v3a.75.75 0 01-.75.75h-3a.75.75 0 01-.75-.75v-3A.75.75 0 018.5 9H9z" clip-rule="evenodd" />
-          </svg>
+            aria-hidden="true"
+          />
           <span class="text-xs font-medium" style="color: var(--color-foreground)">Approval needed</span>
           <span
             v-if="approval.is_external"
@@ -90,14 +102,11 @@ function formatArgs(args: string): string {
             aria-label="Toggle arguments"
             @click="showArgs = !showArgs"
           >
-            <svg
+            <ChevronDownIcon
               class="w-3.5 h-3.5 transition-transform"
               :class="{ 'rotate-180': showArgs }"
               style="color: var(--color-muted-foreground)"
-              viewBox="0 0 20 20" fill="currentColor"
-            >
-              <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
-            </svg>
+            />
           </button>
         </div>
 
@@ -117,8 +126,8 @@ function formatArgs(args: string): string {
       <div class="flex gap-1.5 shrink-0 self-end" :class="{ 'approval-busy': approval.resolving }">
         <button
           type="button"
-          class="px-3.5 py-1.5 text-xs rounded-md text-white transition-colors cursor-pointer font-medium shadow-sm"
-          style="background-color: var(--color-primary)"
+          class="px-3.5 py-1.5 text-xs rounded-md transition-colors cursor-pointer font-medium shadow-sm"
+          style="background-color: var(--color-primary); color: var(--color-on-primary)"
           :disabled="approval.resolving"
           @click="store.resolveApproval(approval.id, true, false)"
         >
@@ -127,12 +136,17 @@ function formatArgs(args: string): string {
         <button
           type="button"
           class="px-3.5 py-1.5 text-xs rounded-md transition-colors cursor-pointer font-medium"
-          style="background-color: transparent; color: var(--color-foreground); border: 1px solid var(--color-border)"
-          title="Approve this and auto-approve the rest of the session"
+          :style="armingAllowAll
+            ? { backgroundColor: 'var(--color-destructive)', color: 'var(--color-on-destructive)' }
+            : { backgroundColor: 'transparent', color: 'var(--color-foreground)', border: '1px solid var(--color-border)' }"
+          :title="armingAllowAll ? 'Click again to auto-approve the rest of the session' : 'Approve this and auto-approve the rest of the session'"
           :disabled="approval.resolving"
-          @click="store.resolveApproval(approval.id, true, true)"
+          @click="armingAllowAll
+            ? store.resolveApproval(approval.id, true, true)
+            : (armingAllowAll = true)"
+          @blur="armingAllowAll = false"
         >
-          Allow all
+          {{ armingAllowAll ? 'Confirm?' : 'Allow all' }}
         </button>
         <button
           type="button"
diff --git a/web/src/components/AskUserCard.vue b/web/src/components/AskUserCard.vue
index 62317eb..87c4a03 100644
--- a/web/src/components/AskUserCard.vue
+++ b/web/src/components/AskUserCard.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, reactive, watch, onUnmounted } from 'vue'
+import { ChevronDownIcon, XMarkIcon } from '@heroicons/vue/24/outline'
 import type { ToolCall, AskUserQuestion, AskUserAnswer } from '@/types/api'
 import { useChatStore } from '@/stores/chat'
 
@@ -173,9 +174,7 @@ const resolvedAnswers = computed<string[]>(() => {
       <span class="text-xs font-medium" style="color: var(--color-muted-foreground)">Asking</span>
       <span v-if="questions[0]?.header" class="text-xs font-mono" style="color: var(--color-primary)">{{ questions[0].header }}</span>
       <span class="text-xs font-mono truncate" style="color: var(--color-muted-foreground)">{{ title }}</span>
-      <svg class="w-3 h-3 shrink-0" style="color: var(--color-muted-foreground)" viewBox="0 0 20 20" fill="currentColor">
-        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
-      </svg>
+      <ChevronDownIcon class="w-3 h-3 shrink-0" style="color: var(--color-muted-foreground)" />
     </button>
 
     <!-- Expanded card -->
@@ -193,14 +192,10 @@ const resolvedAnswers = computed<string[]>(() => {
         />
         <span class="text-sm font-medium flex-1 min-w-0 truncate" style="color: var(--color-foreground)">{{ title }}</span>
         <button class="shrink-0 cursor-pointer hover:opacity-70" title="Collapse" @click="collapsed = true">
-          <svg class="w-3.5 h-3.5 rotate-180" style="color: var(--color-muted-foreground)" viewBox="0 0 20 20" fill="currentColor">
-            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
-          </svg>
+          <ChevronDownIcon class="w-3.5 h-3.5 rotate-180" style="color: var(--color-muted-foreground)" />
         </button>
         <button v-if="isPending" class="shrink-0 cursor-pointer hover:opacity-70" title="Skip" @click="skip">
-          <svg class="w-3.5 h-3.5" style="color: var(--color-muted-foreground)" viewBox="0 0 20 20" fill="currentColor">
-            <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
-          </svg>
+          <XMarkIcon class="w-3.5 h-3.5" style="color: var(--color-muted-foreground)" />
         </button>
       </div>
 
diff --git a/web/src/components/BranchPicker.vue b/web/src/components/BranchPicker.vue
index d56fb9a..b6a13ab 100644
--- a/web/src/components/BranchPicker.vue
+++ b/web/src/components/BranchPicker.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, nextTick } from 'vue'
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
-import { GitBranch, Search, ChevronDown, Check, Plus } from 'lucide-vue-next'
+import { CodeBracketIcon, MagnifyingGlassIcon, ChevronDownIcon, CheckIcon, PlusIcon } from '@heroicons/vue/24/outline'
 import { useBranch } from '@/composables/useBranch'
 
 withDefaults(defineProps<{
@@ -66,9 +66,9 @@ function reset() {
     <Popover class="bp-popover" style="position: relative">
       <PopoverButton as="template" :disabled="switching">
         <button class="bp-pill" :disabled="switching" :title="'Branch: ' + current">
-          <GitBranch :size="13" class="bp-pill-icon" />
+          <CodeBracketIcon class="w-3 h-3 bp-pill-icon" />
           <span class="bp-name">{{ current }}</span>
-          <ChevronDown :size="12" class="bp-caret" />
+          <ChevronDownIcon class="w-3 h-3 bp-caret" />
         </button>
       </PopoverButton>
 
@@ -84,7 +84,7 @@ function reset() {
           :class="placement === 'top' ? 'place-top' : 'place-bottom'"
         >
           <div class="bp-search">
-            <Search :size="13" class="bp-search-icon" />
+            <MagnifyingGlassIcon class="w-3 h-3 bp-search-icon" />
             <input v-model="query" class="bp-search-input" placeholder="Search branches" />
           </div>
 
@@ -99,9 +99,9 @@ function reset() {
               :disabled="switching"
               @click="pick(b, close)"
             >
-              <GitBranch :size="13" class="bp-row-icon" />
+              <CodeBracketIcon class="w-3 h-3 bp-row-icon" />
               <span class="bp-row-name">{{ b }}</span>
-              <Check v-if="b === current" :size="14" class="bp-check" />
+              <CheckIcon v-if="b === current" class="w-3.5 h-3.5 bp-check" />
             </button>
           </div>
 
@@ -109,7 +109,7 @@ function reset() {
 
           <div class="bp-actions">
             <button v-if="!creating" class="bp-action" @click="startCreate">
-              <Plus :size="14" /> <span>Create &amp; checkout new branch</span>
+              <PlusIcon class="w-3.5 h-3.5" /> <span>Create &amp; checkout new branch</span>
             </button>
             <div v-else class="bp-create">
               <input
@@ -365,7 +365,7 @@ function reset() {
   border: none;
   border-radius: var(--radius-md);
   background: var(--color-primary);
-  color: var(--color-on-primary, #fff);
+  color: var(--color-on-primary);
   font-size: 12px;
   font-weight: 500;
   cursor: pointer;
diff --git a/web/src/components/ChatInput.vue b/web/src/components/ChatInput.vue
index 3eeb675..5ac2ba1 100644
--- a/web/src/components/ChatInput.vue
+++ b/web/src/components/ChatInput.vue
@@ -6,7 +6,7 @@ import type { SlashCommandInfo, ChatImage } from '@/types/api'
 import WorkspacePicker from '@/components/WorkspacePicker.vue'
 import BranchPicker from '@/components/BranchPicker.vue'
 import { useBranch } from '@/composables/useBranch'
-import { MessageSquare, ClipboardList, Zap, Target, Plus, Paperclip, Slash, X } from 'lucide-vue-next'
+import { ChatBubbleLeftIcon, ClipboardDocumentListIcon, BoltIcon, PlusIcon, PaperClipIcon, XMarkIcon, ChevronDownIcon, ChatBubbleLeftRightIcon, StopIcon, PaperAirplaneIcon } from '@heroicons/vue/24/outline'
 
 // Which way the workspace/branch pickers open. The docked composer opens them
 // upward (default); the centered welcome composer has more empty room below, so
@@ -39,9 +39,9 @@ const pendingImagePreviews = ref<string[]>([])
 const fileInput = ref<HTMLInputElement | null>(null)
 
 const modes = [
-  { value: 'ask' as const, label: 'Ask', icon: MessageSquare },
-  { value: 'plan' as const, label: 'Plan', icon: ClipboardList },
-  { value: 'autopilot' as const, label: 'Autopilot', icon: Zap },
+  { value: 'ask' as const, label: 'Ask', icon: ChatBubbleLeftIcon },
+  { value: 'plan' as const, label: 'Plan', icon: ClipboardDocumentListIcon },
+  { value: 'autopilot' as const, label: 'Autopilot', icon: BoltIcon },
 ]
 
 const filteredSlashCommands = computed(() => {
@@ -369,14 +369,6 @@ watch(() => store.imageSupport, (supported) => {
         <div class="chat-input-inner">
         <!-- Textarea area -->
         <div class="textarea-area">
-          <!-- Image previews -->
-          <div v-if="pendingImagePreviews.length > 0" class="image-previews">
-            <div v-for="(preview, i) in pendingImagePreviews" :key="i" class="image-preview-item">
-              <img :src="preview" />
-              <button class="image-remove" @click="removeImage(i)">✕</button>
-            </div>
-          </div>
-
           <textarea
             ref="textarea"
             v-model="input"
@@ -388,6 +380,15 @@ watch(() => store.imageSupport, (supported) => {
             @paste="handlePaste"
           />
 
+          <!-- Image previews — sit BELOW the textarea so pasted attachments grow
+               downward into the toolbar gap instead of pushing the text down. -->
+          <div v-if="pendingImagePreviews.length > 0" class="image-previews">
+            <div v-for="(preview, i) in pendingImagePreviews" :key="i" class="image-preview-item">
+              <img :src="preview" />
+              <button class="image-remove" @click="removeImage(i)">✕</button>
+            </div>
+          </div>
+
           <!-- Hidden file input -->
           <input
             ref="fileInput"
@@ -411,7 +412,7 @@ watch(() => store.imageSupport, (supported) => {
                 title="Add"
                 @click.stop="showAddMenu = !showAddMenu; showModelPicker = false; showModePicker = false"
               >
-                <Plus :size="18" />
+                <PlusIcon class="w-4 h-4" />
               </button>
               <div v-if="showAddMenu" class="dropdown-menu add-menu">
                 <button
@@ -421,11 +422,11 @@ watch(() => store.imageSupport, (supported) => {
                   :title="!store.imageSupport ? 'Current model does not support images' : ''"
                   @click="triggerImageUpload(); showAddMenu = false"
                 >
-                  <Paperclip :size="15" class="dmi-icon" /> <span>Attach files</span>
+                  <PaperClipIcon class="w-3.5 h-3.5 dmi-icon" /> <span>Attach files</span>
                   <span v-if="pendingImages.length > 0" class="dmi-badge">{{ pendingImages.length }}</span>
                 </button>
                 <button class="dropdown-item" @click="insertToken('/')">
-                  <Slash :size="15" class="dmi-icon" /> <span>Command</span>
+                  <span class="dmi-icon dmi-slash">/</span> <span>Command</span>
                 </button>
                 <button
                   class="dropdown-item"
@@ -433,7 +434,7 @@ watch(() => store.imageSupport, (supported) => {
                   :title="store.goal ? 'Setting a new goal replaces the current one' : 'Next message becomes the session goal'"
                   @click="store.goalArmed = !store.goalArmed; showAddMenu = false"
                 >
-                  <Target :size="15" class="dmi-icon" /> <span>Goal</span>
+                  <BoltIcon class="w-3.5 h-3.5 dmi-icon" /> <span>Goal</span>
                 </button>
               </div>
             </div>
@@ -446,9 +447,7 @@ watch(() => store.imageSupport, (supported) => {
                 @click.stop="showModePicker = !showModePicker; showModelPicker = false; showAddMenu = false"
               >
                 {{ modeLabel(store.mode) }}
-                <svg class="w-3 h-3 opacity-60" viewBox="0 0 20 20" fill="currentColor">
-                  <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
-                </svg>
+                <ChevronDownIcon class="w-3 h-3 opacity-60" />
               </button>
               <div v-if="showModePicker" class="dropdown-menu">
                 <button
@@ -458,7 +457,7 @@ watch(() => store.imageSupport, (supported) => {
                   :class="{ active: store.mode === m.value }"
                   @click="selectMode(m.value)"
                 >
-                  <component :is="m.icon" :size="14" /> {{ m.label }}
+                  <component :is="m.icon" class="w-3.5 h-3.5" /> {{ m.label }}
                 </button>
               </div>
             </div>
@@ -469,9 +468,9 @@ watch(() => store.imageSupport, (supported) => {
               <span class="tb-divider" aria-hidden="true" />
               <div class="goal-chip" :title="store.goal ? 'Next message replaces the current goal' : 'Next message becomes the session goal'">
                 <button class="goal-chip-x" title="Remove goal" @click="store.goalArmed = false">
-                  <X :size="11" />
+                  <XMarkIcon class="w-2.5 h-2.5" />
                 </button>
-                <Target :size="13" />
+                <BoltIcon class="w-3 h-3" />
                 <span>Goal</span>
               </div>
             </template>
@@ -489,9 +488,7 @@ watch(() => store.imageSupport, (supported) => {
                 @click.stop="showModelPicker = !showModelPicker; showModePicker = false; showAddMenu = false"
               >
                 {{ store.modelName ? getModelDisplayName(store.providerName, store.modelName) : 'model' }}
-                <svg class="w-3 h-3 opacity-60" viewBox="0 0 20 20" fill="currentColor">
-                  <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
-                </svg>
+                <ChevronDownIcon class="w-3 h-3 opacity-60" />
               </button>
               <div
                 v-if="showModelPicker"
@@ -557,10 +554,7 @@ watch(() => store.imageSupport, (supported) => {
               :title="store.channelEnabled ? 'WeChat notifications ON' : 'WeChat notifications OFF'"
               @click="store.toggleChannel(!store.channelEnabled)"
             >
-              <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
-                <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
-                <path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767A2 2 0 0011 16h2l3 3v-3h1a2 2 0 002-2V9a2 2 0 00-2-2h-2z" />
-              </svg>
+              <ChatBubbleLeftRightIcon class="w-3 h-3" />
             </button>
             <!-- Stop button -->
             <button
@@ -569,9 +563,7 @@ watch(() => store.imageSupport, (supported) => {
               title="Stop agent (Esc)"
               @click="store.stopAgent()"
             >
-              <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor">
-                <rect x="6" y="6" width="12" height="12" rx="2" />
-              </svg>
+              <StopIcon class="w-3.5 h-3.5" />
               Stop
             </button>
             <!-- Send button -->
@@ -581,9 +573,7 @@ watch(() => store.imageSupport, (supported) => {
               :disabled="!input.trim() && pendingImages.length === 0"
               @click="send"
             >
-              <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path d="M5 12h14M12 5l7 7-7 7" />
-              </svg>
+              <PaperAirplaneIcon class="w-3.5 h-3.5" />
               Send
             </button>
           </div>
@@ -685,9 +675,7 @@ watch(() => store.imageSupport, (supported) => {
   border-radius: var(--radius-2xl);
   /* Tighter at the top (workspace row), a touch more white below the toolbar. */
   padding: 6px 12px 12px;
-  box-shadow:
-    0 1px 2px rgba(15, 18, 24, 0.04),
-    0 18px 44px -24px rgba(15, 18, 24, 0.28);
+  box-shadow: var(--shadow-xl);
 }
 .composer-elevated .composer-top {
   padding: 2px 4px 9px;
@@ -741,7 +729,9 @@ watch(() => store.imageSupport, (supported) => {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-bottom: 8px;
+  /* Rendered below the textarea now: separate from the text above, not the
+     toolbar below (the toolbar already owns the bottom padding). */
+  margin-top: 8px;
 }
 
 .image-preview-item {
@@ -764,7 +754,7 @@ watch(() => store.imageSupport, (supported) => {
   height: 16px;
   border-radius: 50%;
   background: var(--color-destructive);
-  color: white;
+  color: var(--color-on-destructive);
   font-size: 9px;
   display: flex;
   align-items: center;
@@ -847,7 +837,7 @@ watch(() => store.imageSupport, (supported) => {
   height: 14px;
   border-radius: 50%;
   background: var(--color-primary);
-  color: white;
+  color: var(--color-on-primary);
   font-size: 9px;
   display: flex;
   align-items: center;
@@ -951,6 +941,15 @@ watch(() => store.imageSupport, (supported) => {
   color: var(--color-muted-foreground);
   flex-shrink: 0;
 }
+/* The "/ Command" menu item uses a literal slash character instead of an icon
+   (heroicons has no slash glyph); size it to match the other menu icons. */
+.dmi-slash {
+  width: 15px;
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: 14px;
+  line-height: 1;
+}
 .dropdown-item.active .dmi-icon {
   color: var(--color-primary);
 }
@@ -1065,7 +1064,7 @@ watch(() => store.imageSupport, (supported) => {
   border: none;
   border-radius: var(--radius-lg);
   background: var(--color-primary);
-  color: var(--color-on-primary, #fff);
+  color: var(--color-on-primary);
   font-size: 12px;
   font-weight: 500;
   cursor: pointer;
@@ -1074,7 +1073,7 @@ watch(() => store.imageSupport, (supported) => {
 }
 
 .send-btn:disabled {
-  opacity: 0.3;
+  opacity: 0.45;
   cursor: not-allowed;
 }
 
@@ -1094,7 +1093,7 @@ watch(() => store.imageSupport, (supported) => {
   border: none;
   border-radius: var(--radius-lg);
   background: var(--color-destructive);
-  color: white;
+  color: var(--color-on-destructive);
   font-size: 12px;
   font-weight: 500;
   cursor: pointer;
diff --git a/web/src/components/ChatMessage.vue b/web/src/components/ChatMessage.vue
index 34de194..bcf8d44 100644
--- a/web/src/components/ChatMessage.vue
+++ b/web/src/components/ChatMessage.vue
@@ -2,10 +2,10 @@
 import { renderMarkdown } from '@/composables/markdown'
 import type { ChatMessage } from '@/types/api'
 import { ref, nextTick, computed } from 'vue'
+import { Square2StackIcon, CheckIcon, PencilSquareIcon } from '@heroicons/vue/24/outline'
 
 const props = defineProps<{
   message: ChatMessage
-  canRetry?: boolean
   canEdit?: boolean
 }>()
 
@@ -18,8 +18,19 @@ const systemColor = computed(() => {
 })
 const systemLabel = computed(() => (props.message.level === 'error' ? 'Error' : 'System'))
 
+// Human-readable elapsed time for the turn (assistant messages only). "45s" for
+// under a minute, "1m 23s" beyond. Empty when the message carries no duration.
+const durationLabel = computed(() => {
+  const ms = props.message.durationMs
+  if (!ms || ms < 0) return ''
+  const totalSec = Math.round(ms / 1000)
+  if (totalSec < 60) return `${totalSec}s`
+  const m = Math.floor(totalSec / 60)
+  const s = totalSec % 60
+  return s ? `${m}m ${s}s` : `${m}m`
+})
+
 const emit = defineEmits<{
-  retry: []
   edit: [newText: string]
 }>()
 
@@ -80,7 +91,7 @@ function handleEditKeyDown(e: KeyboardEvent) {
                       message.role === 'user' && message.source === 'wechat' ? 'var(--color-info-fg)' :
                       message.role === 'system' ? systemColor :
                       'var(--color-foreground)',
-          color: '#fff'
+          color: 'var(--color-on-primary)'
         }"
       >
         <template v-if="message.role === 'assistant'">J</template>
@@ -99,53 +110,6 @@ function handleEditKeyDown(e: KeyboardEvent) {
       >
         {{ message.role === 'user' ? (message.source === 'wechat' ? 'WeChat' : 'You') : message.role === 'assistant' ? '[J]CODE' : systemLabel }}
       </span>
-
-      <!-- Action buttons: visible on hover or keyboard focus-within -->
-      <div class="flex items-center gap-0.5 ml-1 opacity-0 group-hover/msg:opacity-100 group-focus-within/msg:opacity-100 transition-opacity duration-150">
-        <!-- Copy button -->
-        <button
-          class="w-5 h-5 flex items-center justify-center rounded-[var(--radius-sm)] transition-all cursor-pointer hover:bg-[var(--color-secondary)] active:scale-90"
-          style="color: var(--color-muted-foreground)"
-          :title="copied ? 'Copied!' : 'Copy'"
-          @click="copyContent"
-        >
-          <svg v-if="!copied" class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <rect x="9" y="9" width="13" height="13" rx="2" />
-            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-          </svg>
-          <svg v-else class="w-3 h-3" style="color: var(--color-primary)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="20 6 9 17 4 12" />
-          </svg>
-        </button>
-
-        <!-- Retry button (assistant messages) -->
-        <button
-          v-if="canRetry"
-          class="w-5 h-5 flex items-center justify-center rounded-[var(--radius-sm)] transition-all cursor-pointer hover:bg-[var(--color-secondary)] active:scale-90"
-          style="color: var(--color-muted-foreground)"
-          title="Retry"
-          @click="emit('retry')"
-        >
-          <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
-            <path d="M3 3v5h5" />
-          </svg>
-        </button>
-
-        <!-- Edit button (user messages) -->
-        <button
-          v-if="canEdit && !editing"
-          class="w-5 h-5 flex items-center justify-center rounded-[var(--radius-sm)] transition-all cursor-pointer hover:bg-[var(--color-secondary)] active:scale-90"
-          style="color: var(--color-muted-foreground)"
-          title="Edit"
-          @click="startEdit"
-        >
-          <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4Z" />
-          </svg>
-        </button>
-      </div>
     </div>
 
     <!-- Images -->
@@ -175,7 +139,7 @@ function handleEditKeyDown(e: KeyboardEvent) {
       <div class="flex items-center gap-2 mt-2">
         <button
           class="px-3 py-1 text-xs font-semibold transition-all cursor-pointer active:scale-95"
-          :style="{ background: 'var(--color-primary)', color: 'var(--color-on-primary, #fff)', borderRadius: 'var(--radius-md)' }"
+          :style="{ background: 'var(--color-primary)', color: 'var(--color-on-primary)', borderRadius: 'var(--radius-md)' }"
           @click="confirmEdit"
         >
           Send
@@ -191,6 +155,42 @@ function handleEditKeyDown(e: KeyboardEvent) {
       </div>
     </div>
 
+    <!-- Action footer (below the content): turn time persists; copy/edit reveal on
+         hover or keyboard focus. Moved here from the role-label row. -->
+    <div v-if="!editing" class="flex items-center gap-2 mt-1.5 pl-9">
+      <!-- Turn elapsed time (assistant only) — persists after the live timer. -->
+      <span
+        v-if="durationLabel"
+        class="text-[10px] tabular-nums"
+        style="font-family: var(--font-mono); color: var(--color-muted-foreground); opacity: 0.7"
+        title="Time this turn took"
+      >{{ durationLabel }}</span>
+
+      <div class="flex items-center gap-0.5 opacity-0 group-hover/msg:opacity-100 group-focus-within/msg:opacity-100 transition-opacity duration-150">
+        <!-- Copy button -->
+        <button
+          class="w-5 h-5 flex items-center justify-center rounded-[var(--radius-sm)] transition-all cursor-pointer hover:bg-[var(--color-secondary)] active:scale-90"
+          style="color: var(--color-muted-foreground)"
+          :title="copied ? 'Copied!' : 'Copy'"
+          @click="copyContent"
+        >
+          <Square2StackIcon v-if="!copied" class="w-3 h-3" />
+          <CheckIcon v-else class="w-3 h-3" style="color: var(--color-primary)" />
+        </button>
+
+        <!-- Edit button (user messages) -->
+        <button
+          v-if="canEdit"
+          class="w-5 h-5 flex items-center justify-center rounded-[var(--radius-sm)] transition-all cursor-pointer hover:bg-[var(--color-secondary)] active:scale-90"
+          style="color: var(--color-muted-foreground)"
+          title="Edit"
+          @click="startEdit"
+        >
+          <PencilSquareIcon class="w-3 h-3" />
+        </button>
+      </div>
+    </div>
+
     <!-- Collapsible raw detail for errors -->
     <details
       v-if="message.role === 'system' && message.level === 'error' && message.detail"
diff --git a/web/src/components/CommandPalette.vue b/web/src/components/CommandPalette.vue
index 3390570..c175b1a 100644
--- a/web/src/components/CommandPalette.vue
+++ b/web/src/components/CommandPalette.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, inject } from 'vue'
 import { Dialog, DialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
-import { Plus, Settings, FolderOpen, SunMoon, MessageSquare, CornerDownLeft } from 'lucide-vue-next'
+import { PlusIcon, Cog6ToothIcon, FolderOpenIcon, SunIcon, ChatBubbleLeftIcon, MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
 import { useChatStore } from '@/stores/chat'
 import { useProjectStore, isRemotePath, parseRemoteLabel } from '@/stores/project'
 import type { TaskItem, RemoteMeta } from '@/types/api'
@@ -63,10 +63,10 @@ async function openTask(task: TaskItem) {
 }
 
 const actions = computed<PaletteItem[]>(() => [
-  { id: 'a-new', group: 'Actions', label: 'New task', icon: Plus, run: () => { emit('close'); store.newSession() } },
-  { id: 'a-proj', group: 'Actions', label: 'Open project…', icon: FolderOpen, run: () => { emit('close'); emit('action', 'projects') } },
-  { id: 'a-settings', group: 'Actions', label: 'Open settings', icon: Settings, run: () => { emit('close'); emit('action', 'settings') } },
-  { id: 'a-theme', group: 'Actions', label: 'Toggle theme', icon: SunMoon, run: () => { emit('close'); emit('action', 'theme') } },
+  { id: 'a-new', group: 'Actions', label: 'New task', icon: PlusIcon, run: () => { emit('close'); store.newSession() } },
+  { id: 'a-proj', group: 'Actions', label: 'Open project…', icon: FolderOpenIcon, run: () => { emit('close'); emit('action', 'projects') } },
+  { id: 'a-settings', group: 'Actions', label: 'Open settings', icon: Cog6ToothIcon, run: () => { emit('close'); emit('action', 'settings') } },
+  { id: 'a-theme', group: 'Actions', label: 'Toggle theme', icon: SunIcon, run: () => { emit('close'); emit('action', 'theme') } },
 ])
 
 const taskItems = computed<PaletteItem[]>(() =>
@@ -77,7 +77,7 @@ const taskItems = computed<PaletteItem[]>(() =>
       group: 'Tasks',
       label: t.title || t.uuid.slice(0, 8) + '…',
       hint: projectStore.nameForPath(t.project),
-      icon: MessageSquare,
+      icon: ChatBubbleLeftIcon,
       run: () => openTask(t),
     })),
 )
@@ -155,9 +155,7 @@ function onKeydown(e: KeyboardEvent) {
           leave-to="opacity-0 scale-[0.98] -translate-y-1">
           <DialogPanel class="cp-panel">
             <div class="cp-input-row">
-              <svg class="cp-search-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7">
-                <circle cx="9" cy="9" r="6" /><path d="M14 14l3.5 3.5" stroke-linecap="round" />
-              </svg>
+              <MagnifyingGlassIcon class="cp-search-icon" />
               <input
                 ref="inputEl"
                 v-model="query"
@@ -180,10 +178,10 @@ function onKeydown(e: KeyboardEvent) {
                   @click="item.run()"
                   @mousemove="selectedIdx = flatIndex(item)"
                 >
-                  <component :is="item.icon" :size="15" class="cp-item-icon" />
+                  <component :is="item.icon" class="w-3.5 h-3.5 cp-item-icon" />
                   <span class="cp-item-label">{{ item.label }}</span>
                   <span v-if="item.hint" class="cp-item-hint">{{ item.hint }}</span>
-                  <CornerDownLeft v-if="flatIndex(item) === selectedIdx" :size="13" class="cp-enter" />
+                  <kbd v-if="flatIndex(item) === selectedIdx" class="cp-enter">↵</kbd>
                 </button>
               </template>
             </div>
@@ -293,6 +291,12 @@ function onKeydown(e: KeyboardEvent) {
   flex-shrink: 0;
 }
 .cp-enter {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 1px 5px;
+  border-radius: var(--radius-sm);
+  background: var(--color-secondary);
+  border: 1px solid var(--color-border);
   color: var(--color-muted-foreground);
   flex-shrink: 0;
 }
diff --git a/web/src/components/FileTreePanel.vue b/web/src/components/FileTreePanel.vue
index 4211a89..1df41e5 100644
--- a/web/src/components/FileTreePanel.vue
+++ b/web/src/components/FileTreePanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { ChevronRight, File, Folder, ArrowLeft } from 'lucide-vue-next'
+import { ChevronRightIcon, DocumentIcon, FolderIcon, ArrowLeftIcon } from '@heroicons/vue/24/outline'
 import { api } from '@/composables/api'
 import type { FileItem } from '@/types/api'
 import hljs from 'highlight.js'
@@ -107,16 +107,16 @@ onMounted(() => fetchDir(''))
         class="back-btn"
         @click="goBack"
       >
-        <ArrowLeft :size="14" />
+        <ArrowLeftIcon class="w-3.5 h-3.5" />
       </button>
       <div class="breadcrumb">
         <button class="crumb" @click="navigateTo(-1)">root</button>
         <template v-for="(seg, i) in breadcrumbs" :key="i">
-          <ChevronRight :size="10" class="crumb-sep" />
+          <ChevronRightIcon class="w-2.5 h-2.5 crumb-sep" />
           <button class="crumb" @click="navigateTo(i)">{{ seg }}</button>
         </template>
         <template v-if="previewFile">
-          <ChevronRight :size="10" class="crumb-sep" />
+          <ChevronRightIcon class="w-2.5 h-2.5 crumb-sep" />
           <span class="crumb current">{{ previewFile.path.split('/').pop() }}</span>
         </template>
       </div>
@@ -139,8 +139,8 @@ onMounted(() => fetchDir(''))
           class="file-item"
           @click="openItem(item)"
         >
-          <Folder v-if="item.is_dir" :size="14" class="item-icon folder" />
-          <File v-else :size="14" class="item-icon file" />
+          <FolderIcon v-if="item.is_dir" class="w-3.5 h-3.5 item-icon folder" />
+          <DocumentIcon v-else class="w-3.5 h-3.5 item-icon file" />
           <span class="item-name">{{ item.name }}</span>
           <span v-if="!item.is_dir" class="item-size">{{ formatSize(item.size) }}</span>
         </button>
diff --git a/web/src/components/GoalBanner.vue b/web/src/components/GoalBanner.vue
index defc447..1c3d596 100644
--- a/web/src/components/GoalBanner.vue
+++ b/web/src/components/GoalBanner.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Target } from 'lucide-vue-next'
+import { BoltIcon } from '@heroicons/vue/24/outline'
 import { useChatStore } from '@/stores/chat'
 
 const store = useChatStore()
@@ -48,7 +48,7 @@ const tokensLabel = computed(() => {
     class="mx-3 mt-2 rounded-md border px-3 py-2 flex items-start gap-2"
     :style="{ borderColor: 'var(--color-border)', backgroundColor: 'var(--color-secondary)' }"
   >
-    <Target :size="15" class="shrink-0 mt-0.5" :style="{ color: statusColor }" />
+    <BoltIcon class="w-3.5 h-3.5 shrink-0 mt-0.5" :style="{ color: statusColor }" />
     <div class="flex-1 min-w-0">
       <div class="flex items-center gap-2">
         <span class="text-[10px] uppercase tracking-wide font-semibold" :style="{ color: statusColor }">
@@ -63,7 +63,7 @@ const tokensLabel = computed(() => {
       </div>
     </div>
     <button
-      class="text-[10px] px-2 py-1 rounded shrink-0 cursor-pointer"
+      class="goal-clear text-[10px] px-2 py-1 rounded shrink-0 cursor-pointer"
       style="background-color: var(--color-background); color: var(--color-muted-foreground)"
       title="Clear goal"
       @click="store.clearGoal()"
@@ -72,3 +72,14 @@ const tokensLabel = computed(() => {
     </button>
   </div>
 </template>
+
+<style scoped>
+.goal-clear {
+  transition: background-color var(--duration-fast) var(--ease-out),
+              color var(--duration-fast) var(--ease-out);
+}
+.goal-clear:hover {
+  background-color: var(--color-muted);
+  color: var(--color-foreground);
+}
+</style>
diff --git a/web/src/components/ProjectSwitcher.vue b/web/src/components/ProjectSwitcher.vue
index bdfea3f..a63890e 100644
--- a/web/src/components/ProjectSwitcher.vue
+++ b/web/src/components/ProjectSwitcher.vue
@@ -11,7 +11,7 @@ import {
   TransitionRoot,
   TransitionChild,
 } from '@headlessui/vue'
-import { Folder } from 'lucide-vue-next'
+import { FolderIcon, TrashIcon } from '@heroicons/vue/24/outline'
 
 const props = defineProps<{
   open: boolean
@@ -142,7 +142,7 @@ function deleteProject(id: string) {
                 />
                 <button
                   class="px-3 py-1.5 text-xs font-medium rounded-md cursor-pointer transition-opacity hover:opacity-90"
-                  style="background: var(--color-primary); color: var(--color-on-primary, #fff)"
+                  style="background: var(--color-primary); color: var(--color-on-primary)"
                   @click="handlePathSubmit"
                 >
                   OK
@@ -180,7 +180,7 @@ function deleteProject(id: string) {
                   style="color: var(--color-foreground); border-bottom: 1px solid var(--color-border)"
                   @click="loadFolders(folder.path)"
                 >
-                  <Folder :size="14" class="shrink-0" style="color: var(--color-muted-foreground)" />
+                  <FolderIcon class="w-3.5 h-3.5 shrink-0" style="color: var(--color-muted-foreground)" />
                   <span class="truncate">{{ folder.name }}</span>
                 </button>
               </div>
@@ -191,7 +191,7 @@ function deleteProject(id: string) {
                 </div>
                 <button
                   class="px-4 py-1.5 text-xs font-medium rounded-md cursor-pointer transition-opacity hover:opacity-90 shrink-0"
-                  style="background: var(--color-primary); color: var(--color-on-primary, #fff)"
+                  style="background: var(--color-primary); color: var(--color-on-primary)"
                   @click="selectCurrentPath"
                 >
                   Open Folder
@@ -239,9 +239,7 @@ function deleteProject(id: string) {
                     @click.stop="deleteProject(p.id)"
                     title="Remove project"
                   >
-                    <svg class="w-3.5 h-3.5" viewBox="0 0 20 20" fill="currentColor">
-                      <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z" clip-rule="evenodd" />
-                    </svg>
+                    <TrashIcon class="w-3.5 h-3.5" />
                   </button>
                 </div>
               </div>
diff --git a/web/src/components/RemoteConnectWizard.vue b/web/src/components/RemoteConnectWizard.vue
index f022f1e..5555296 100644
--- a/web/src/components/RemoteConnectWizard.vue
+++ b/web/src/components/RemoteConnectWizard.vue
@@ -7,15 +7,15 @@ import {
   TransitionChild,
 } from '@headlessui/vue'
 import {
-  Server,
-  Container,
-  X,
-  ArrowLeft,
-  Folder,
-  Loader2,
-  Check,
-  ChevronRight,
-} from 'lucide-vue-next'
+  ServerIcon,
+  CubeIcon,
+  XMarkIcon,
+  ArrowLeftIcon,
+  FolderIcon,
+  ArrowPathIcon,
+  CheckIcon,
+  ChevronRightIcon,
+} from '@heroicons/vue/24/outline'
 import { useChatStore } from '@/stores/chat'
 import { useProjectStore } from '@/stores/project'
 import { api } from '@/composables/api'
@@ -335,7 +335,7 @@ function close() {
                   :class="{ done: i < stepIndex, current: i === stepIndex }"
                 >
                   <span class="rcw-step-dot">
-                    <Check v-if="i < stepIndex" :size="13" />
+                    <CheckIcon v-if="i < stepIndex" class="w-3 h-3" />
                     <span v-else>{{ i + 1 }}</span>
                   </span>
                   <span class="rcw-step-label">{{ s.label }}</span>
@@ -345,7 +345,7 @@ function close() {
 
             <!-- Content -->
             <div class="rcw-body">
-              <button class="rcw-close" @click="close"><X :size="18" /></button>
+              <button class="rcw-close" @click="close"><XMarkIcon class="w-4 h-4" /></button>
 
               <!-- Step 1: method -->
               <template v-if="step === 'method'">
@@ -353,19 +353,19 @@ function close() {
                 <p class="rcw-sub">Pick how to enter the remote workspace, then fill in the details.</p>
                 <div class="rcw-methods">
                   <button class="rcw-method" :class="{ active: method === 'ssh' }" @click="chooseMethod('ssh')">
-                    <Server :size="22" />
+                    <ServerIcon class="w-5 h-5" />
                     <span class="rcw-method-name">SSH</span>
                     <span class="rcw-method-desc">Remote host</span>
                   </button>
                   <button class="rcw-method disabled" disabled title="Coming soon">
-                    <Container :size="22" />
+                    <CubeIcon class="w-5 h-5" />
                     <span class="rcw-method-name">Docker</span>
                     <span class="rcw-method-desc">Coming soon</span>
                   </button>
                 </div>
                 <div class="rcw-foot">
                   <span />
-                  <button class="rcw-primary" @click="step = 'config'">Next <ChevronRight :size="15" /></button>
+                  <button class="rcw-primary" @click="step = 'config'">Next <ChevronRightIcon class="w-3.5 h-3.5" /></button>
                 </div>
               </template>
 
@@ -429,7 +429,7 @@ function close() {
                 <div class="rcw-foot">
                   <button class="rcw-ghost" :disabled="step === 'connecting'" @click="step = 'method'">Back</button>
                   <button class="rcw-primary" :disabled="step === 'connecting'" @click="connect">
-                    <Loader2 v-if="step === 'connecting'" :size="15" class="spin" />
+                    <ArrowPathIcon v-if="step === 'connecting'" class="w-3.5 h-3.5 spin" />
                     {{ step === 'connecting' ? 'Connecting…' : 'Connect' }}
                   </button>
                 </div>
@@ -443,12 +443,12 @@ function close() {
                 <div v-if="error" class="rcw-error">{{ error }}</div>
 
                 <div class="rcw-dirbar">
-                  <button class="rcw-back" title="Back to config" @click="backToConfig"><ArrowLeft :size="14" /></button>
+                  <button class="rcw-back" title="Back to config" @click="backToConfig"><ArrowLeftIcon class="w-3.5 h-3.5" /></button>
                   <span class="rcw-dir-path">{{ currentDir || '/' }}</span>
                 </div>
 
                 <div class="rcw-dirlist">
-                  <div v-if="dirLoading" class="rcw-hint"><Loader2 :size="15" class="spin" /> Loading…</div>
+                  <div v-if="dirLoading" class="rcw-hint"><ArrowPathIcon class="w-3.5 h-3.5 spin" /> Loading…</div>
                   <template v-else>
                     <button
                       v-for="d in dirs"
@@ -456,7 +456,7 @@ function close() {
                       class="rcw-dir-row"
                       @click="navigate(d)"
                     >
-                      <Folder :size="14" />
+                      <FolderIcon class="w-3.5 h-3.5" />
                       <span>{{ d }}</span>
                     </button>
                     <div v-if="dirs.length === 0" class="rcw-hint">No sub-directories</div>
@@ -472,7 +472,7 @@ function close() {
                 <div class="rcw-foot">
                   <button class="rcw-ghost" :disabled="binding" @click="close">Cancel</button>
                   <button class="rcw-primary" :disabled="binding" @click="bindHere">
-                    <Loader2 v-if="binding" :size="15" class="spin" />
+                    <ArrowPathIcon v-if="binding" class="w-3.5 h-3.5 spin" />
                     Use this directory
                   </button>
                 </div>
@@ -552,7 +552,7 @@ function close() {
 .rcw-step.done .rcw-step-dot {
   background: var(--color-success);
   border-color: var(--color-success);
-  color: #fff;
+  color: var(--color-on-primary);
 }
 .rcw-step-label {
   font-size: 13px;
@@ -798,7 +798,7 @@ function close() {
   border: none;
   border-radius: var(--radius-lg);
   background: var(--color-primary);
-  color: var(--color-on-primary, #fff);
+  color: var(--color-on-primary);
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
diff --git a/web/src/components/RightPanel.vue b/web/src/components/RightPanel.vue
index db9159f..59199a1 100644
--- a/web/src/components/RightPanel.vue
+++ b/web/src/components/RightPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { X } from 'lucide-vue-next'
+import { XMarkIcon } from '@heroicons/vue/24/outline'
 import FileTreePanel from './FileTreePanel.vue'
 import DiffViewer from './DiffViewer.vue'
 import TaskList from './TaskList.vue'
@@ -69,7 +69,7 @@ function startResize(e: MouseEvent) {
         </button>
       </div>
       <button class="close-btn" @click="emit('close')">
-        <X :size="14" />
+        <XMarkIcon class="w-3.5 h-3.5" />
       </button>
     </div>
     <div class="panel-content">
diff --git a/web/src/components/SettingsDialog.vue b/web/src/components/SettingsDialog.vue
index b8550bc..119ed61 100644
--- a/web/src/components/SettingsDialog.vue
+++ b/web/src/components/SettingsDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, computed, watch, nextTick, onUnmounted, inject } from 'vue'
+import { ref, reactive, computed, watch, nextTick, onUnmounted, inject, type Component } from 'vue'
 import { useChatStore } from '@/stores/chat'
 import { useTheme } from '@/composables/useTheme'
 import { api } from '@/composables/api'
@@ -12,7 +12,28 @@ import {
   TransitionRoot,
   TransitionChild,
 } from '@headlessui/vue'
-import { Globe, Zap, MessageSquare, Monitor, Key, Server, ChevronRight, Plus } from 'lucide-vue-next'
+import {
+  GlobeAltIcon,
+  BoltIcon,
+  ChatBubbleLeftIcon,
+  ComputerDesktopIcon,
+  KeyIcon,
+  ServerIcon,
+  ChevronRightIcon,
+  PlusIcon,
+  SignalIcon,
+  ShieldCheckIcon,
+  AdjustmentsHorizontalIcon,
+  SwatchIcon,
+  CpuChipIcon,
+  ServerStackIcon,
+  SparklesIcon,
+  CommandLineIcon,
+  BellAlertIcon,
+  TrashIcon,
+  ArrowLeftIcon,
+} from '@heroicons/vue/24/outline'
+import { isTauri } from '@/composables/useDesktop'
 
 const props = defineProps<{
   open: boolean
@@ -73,6 +94,11 @@ const channelQRContent = ref('')
 const channelLoginReminder = ref(false)
 const qrCanvas = ref<HTMLCanvasElement | null>(null)
 
+// Bluetooth (BLE) status channel — desktop-only preference, persisted in config
+// and applied on the next app launch.
+const bleEnabled = ref(false)
+const bleSaving = ref(false)
+
 // Provider management state
 const configuredProviders = ref<ProviderDetail[]>([])
 const showAddProvider = ref(false)
@@ -107,6 +133,13 @@ watch(() => props.open, async (isOpen) => {
       channelState.value = ch.state ?? 'none'
     } catch { /* ignore */ }
 
+    // Bluetooth status channel is desktop-only; skip the request in the browser.
+    if (isTauri) {
+      try {
+        bleEnabled.value = (await api.channelBLEStatus()).enabled
+      } catch { /* ignore */ }
+    }
+
     // Load configured providers
     try {
       configuredProviders.value = await api.listProviders()
@@ -158,7 +191,7 @@ async function toggleMCP(name: string, enabled: boolean) {
 }
 
 function serverIcon(type: string) {
-  return type === 'sse' || type === 'http' ? Globe : Zap
+  return type === 'sse' || type === 'http' ? GlobeAltIcon : BoltIcon
 }
 
 function mcpStatusLabel(info: MCPServerInfo): string {
@@ -404,24 +437,63 @@ const shortcuts = [
   { keys: 'Ctrl+`', desc: 'Toggle terminal' },
 ]
 
+// Draw the pending QR onto the canvas. The QR is rendered imperatively (not data-
+// bound), and the Channels tab is a v-if block, so the <canvas> is destroyed and
+// recreated whenever the user navigates away and back — leaving it blank. This
+// helper is the single source of truth for drawing, called both right after login
+// and whenever the canvas remounts (see the activeTab watcher below).
+async function drawChannelQR() {
+  await nextTick()
+  if (!qrCanvas.value || !channelQRContent.value) return
+  // Resolve colors from the design tokens so the QR follows the active theme —
+  // the "dark" modules use the terminal foreground, the "light" modules the
+  // surface color. Both read via getComputedStyle (QRCode needs resolved strings).
+  const root = document.documentElement
+  const fg = getComputedStyle(root).getPropertyValue('--term-fg').trim() || '#18181b'
+  const bg = getComputedStyle(root).getPropertyValue('--color-surface').trim() || '#ffffff'
+  await QRCode.toCanvas(qrCanvas.value, channelQRContent.value, {
+    width: 200,
+    margin: 2,
+    color: { dark: fg, light: bg },
+  })
+}
+
+// Re-draw the QR (and resume polling) when the user returns to the Channels tab
+// mid-scan — the v-if remount would otherwise show an empty canvas.
+watch(activeTab, (tab) => {
+  if (tab === 'channels' && channelQRContent.value) {
+    drawChannelQR()
+    if (channelState.value === 'scanning') pollChannelState()
+  }
+})
+
+// Flip the persisted default auto-approve preference (store handles the API +
+// keeping the unified mode/flag in sync).
+async function toggleAutoApprove() {
+  await store.setAutoApprove(!store.autoApprove)
+}
+
+// Flip the persisted Bluetooth status-channel preference.
+async function toggleBLE() {
+  if (bleSaving.value) return
+  bleSaving.value = true
+  const next = !bleEnabled.value
+  try {
+    await api.setChannelBLE(next)
+    bleEnabled.value = next
+  } catch (err) {
+    console.error('Failed to toggle Bluetooth notifications:', err)
+  }
+  bleSaving.value = false
+}
+
 async function channelLogin() {
   channelLoading.value = true
   try {
     const result = await api.channelLogin()
     channelQRContent.value = result.qr_content
     channelState.value = 'scanning'
-    await nextTick()
-    if (qrCanvas.value && channelQRContent.value) {
-      const isDark = document.documentElement.classList.contains('dark')
-      await QRCode.toCanvas(qrCanvas.value, channelQRContent.value, {
-        width: 200,
-        margin: 2,
-        color: {
-          dark: isDark ? '#e4e4e7' : '#18181b',
-          light: isDark ? '#27272a' : '#ffffff',
-        },
-      })
-    }
+    await drawChannelQR()
     pollChannelState()
   } catch (err) {
     console.error('Channel login failed:', err)
@@ -484,20 +556,22 @@ const tabLabel: Record<string, string> = {
   shortcuts: 'Shortcuts',
 }
 
-// Monochrome 20×20 stroke icons (inner SVG only) for the nav rail + empty
-// states. Rendered via v-html into an <svg stroke="currentColor" fill="none">
-// so they inherit the element's color/weight.
-const iconFor: Record<string, string> = {
-  general: '<line x1="3" y1="6.5" x2="17" y2="6.5" stroke-linecap="round"/><line x1="3" y1="13.5" x2="17" y2="13.5" stroke-linecap="round"/><circle cx="13" cy="6.5" r="2.1"/><circle cx="7" cy="13.5" r="2.1"/>',
-  appearance: '<circle cx="10" cy="10" r="3.2"/><path d="M10 2.5v2M10 15.5v2M2.5 10h2M15.5 10h2M4.9 4.9l1.4 1.4M13.7 13.7l1.4 1.4M15.1 4.9l-1.4 1.4M6.3 13.7l-1.4 1.4" stroke-linecap="round"/>',
-  providers: '<rect x="6" y="6" width="8" height="8" rx="1.5"/><path d="M8.5 3v3M11.5 3v3M8.5 14v3M11.5 14v3M3 8.5h3M3 11.5h3M14 8.5h3M14 11.5h3" stroke-linecap="round"/>',
-  mcp: '<rect x="3.5" y="4" width="13" height="5" rx="1.5"/><rect x="3.5" y="11" width="13" height="5" rx="1.5"/><path d="M6 6.5h0M6 13.5h0" stroke-linecap="round" stroke-width="2"/>',
-  skills: '<path d="M10 3l1.6 4.4L16 9l-4.4 1.6L10 15l-1.6-4.4L4 9l4.4-1.6z" stroke-linejoin="round"/>',
-  ssh: '<rect x="3" y="4.5" width="14" height="11" rx="1.8"/><path d="M6.5 8.5l2 2-2 2M10.8 12.5h3" stroke-linecap="round" stroke-linejoin="round"/>',
-  channels: '<path d="M7 8.5a3 3 0 016 0c0 2.6 1.2 3.6 1.8 4.2H5.2C5.8 12.1 7 11.1 7 8.5z" stroke-linejoin="round"/><path d="M8.6 15a1.6 1.6 0 002.8 0" stroke-linecap="round"/>',
-  shortcuts: '<rect x="3" y="6" width="14" height="8" rx="1.8"/><path d="M6 9.2h0M9 9.2h0M12 9.2h0M6 11.6h6" stroke-linecap="round" stroke-width="2"/>',
+// Nav-rail + empty-state icons. One heroicons component per section (was a
+// v-html SVG-path map; switched to components to drop the v-html injection
+// surface and keep icons consistent with the rest of the app).
+const iconFor: Record<string, Component> = {
+  general: AdjustmentsHorizontalIcon,
+  appearance: SwatchIcon,
+  providers: CpuChipIcon,
+  mcp: ServerStackIcon,
+  skills: SparklesIcon,
+  ssh: CommandLineIcon,
+  channels: BellAlertIcon,
+  shortcuts: ComputerDesktopIcon,
 }
 
+
+
 async function startAddProvider() {
   showAddProvider.value = true
   addProviderStep.value = 'select'
@@ -613,7 +687,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                   @click="activeTab = tab"
                 >
                   <span v-if="activeTab === tab" class="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-4 rounded-full" style="background-color: var(--color-primary)" />
-                  <svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" v-html="iconFor[tab]" />
+                  <component :is="iconFor[tab]" class="w-3.5 h-3.5 shrink-0" />
                   <span class="truncate">{{ tabLabel[tab] }}</span>
                 </button>
               </div>
@@ -624,9 +698,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                 class="settings-back group mt-auto flex items-center gap-1.5 h-9 px-2.5 rounded-md text-[13px] font-medium transition-colors cursor-pointer"
                 @click="emit('close')"
               >
-                <svg class="w-4 h-4 transition-transform group-hover:-translate-x-0.5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8">
-                  <path d="M11.5 5L6.5 10l5 5M6.5 10H16" stroke-linecap="round" stroke-linejoin="round" />
-                </svg>
+                <ArrowLeftIcon class="w-4 h-4 transition-transform group-hover:-translate-x-0.5" />
                 Back to workspace
               </button>
             </nav>
@@ -654,30 +726,6 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                     </span>
                   </div>
 
-                  <div class="grid grid-cols-2 gap-4">
-                    <div>
-                      <div class="text-[10px] uppercase tracking-wider mb-0.5 font-medium" style="color: var(--color-muted-foreground)">Provider</div>
-                      <div class="text-xs font-mono" style="color: var(--color-foreground)">{{ store.providerName || '—' }}</div>
-                    </div>
-                    <div>
-                      <div class="text-[10px] uppercase tracking-wider mb-0.5 font-medium" style="color: var(--color-muted-foreground)">Model</div>
-                      <div class="text-xs font-mono" style="color: var(--color-foreground)">{{ store.modelName || '—' }}</div>
-                    </div>
-                    <div>
-                      <div class="text-[10px] uppercase tracking-wider mb-0.5 font-medium" style="color: var(--color-muted-foreground)">Mode</div>
-                      <div class="text-xs font-mono" style="color: var(--color-foreground)">{{ store.mode.charAt(0).toUpperCase() + store.mode.slice(1) }}</div>
-                    </div>
-                    <div>
-                      <div class="text-[10px] uppercase tracking-wider mb-0.5 font-medium" style="color: var(--color-muted-foreground)">Auto-approve</div>
-                      <div class="text-xs font-mono" style="color: var(--color-foreground)">{{ store.autoApprove ? 'On' : 'Off' }}</div>
-                    </div>
-                  </div>
-
-                  <div>
-                    <div class="text-[10px] uppercase tracking-wider mb-0.5 font-medium" style="color: var(--color-muted-foreground)">Workspace</div>
-                    <div class="text-xs font-mono break-all" style="color: var(--color-muted-foreground)">{{ store.pwd || '—' }}</div>
-                  </div>
-
                   <div v-if="store.tokenInfo">
                     <div class="text-[10px] uppercase tracking-wider mb-1 font-medium" style="color: var(--color-muted-foreground)">Token Usage</div>
                     <div class="flex items-center gap-2">
@@ -693,6 +741,56 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                       </span>
                     </div>
                   </div>
+
+                  <!-- Preferences — configurable toggles with explanations. -->
+                  <div class="space-y-2 pt-1">
+                    <div class="text-[10px] uppercase tracking-wider font-medium" style="color: var(--color-muted-foreground)">Preferences</div>
+
+                    <!-- Default auto-approve -->
+                    <div class="flex items-center gap-3 px-3 py-2.5 rounded-md" style="border: 1px solid var(--color-border); background-color: var(--color-surface)">
+                      <ShieldCheckIcon class="w-4 h-4 shrink-0" style="color: var(--color-muted-foreground)" />
+                      <div class="flex-1 min-w-0">
+                        <div class="text-xs font-medium" style="color: var(--color-foreground)">Default auto-approve</div>
+                        <div class="text-[10px] leading-relaxed" style="color: var(--color-muted-foreground)">
+                          Run tool calls — file edits and commands — automatically without asking for confirmation (same as Autopilot mode; Plan mode still asks). Saved as the default for new sessions.
+                        </div>
+                      </div>
+                      <button
+                        class="relative inline-flex h-5 w-9 items-center rounded-full cursor-pointer transition-colors shrink-0"
+                        :style="{ backgroundColor: store.autoApprove ? 'var(--color-primary)' : 'var(--color-border)' }"
+                        :title="store.autoApprove ? 'Disable' : 'Enable'"
+                        @click="toggleAutoApprove"
+                      >
+                        <span
+                          class="inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform"
+                          :class="store.autoApprove ? 'translate-x-[20px]' : 'translate-x-[2px]'"
+                        />
+                      </button>
+                    </div>
+
+                    <!-- Bluetooth status notifications (desktop only) -->
+                    <div v-if="isTauri" class="flex items-center gap-3 px-3 py-2.5 rounded-md" style="border: 1px solid var(--color-border); background-color: var(--color-surface)">
+                      <SignalIcon class="w-4 h-4 shrink-0" style="color: var(--color-muted-foreground)" />
+                      <div class="flex-1 min-w-0">
+                        <div class="text-xs font-medium" style="color: var(--color-foreground)">Bluetooth status notifications</div>
+                        <div class="text-[10px] leading-relaxed" style="color: var(--color-muted-foreground)">
+                          Push agent status — working, needs approval, done — to a paired JCODE Bluetooth device. Takes effect after restarting the app.
+                        </div>
+                      </div>
+                      <button
+                        class="relative inline-flex h-5 w-9 items-center rounded-full cursor-pointer transition-colors shrink-0 disabled:opacity-50"
+                        :style="{ backgroundColor: bleEnabled ? 'var(--color-primary)' : 'var(--color-border)' }"
+                        :disabled="bleSaving"
+                        :title="bleEnabled ? 'Disable' : 'Enable'"
+                        @click="toggleBLE"
+                      >
+                        <span
+                          class="inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform"
+                          :class="bleEnabled ? 'translate-x-[20px]' : 'translate-x-[2px]'"
+                        />
+                      </button>
+                    </div>
+                  </div>
                 </div>
 
                 <!-- Appearance tab -->
@@ -707,7 +805,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                       : { border: '1px solid var(--color-border)', backgroundColor: 'var(--color-surface)' }"
                     @click="setTheme('system')"
                   >
-                    <Monitor :size="15" style="color: var(--color-muted-foreground)" />
+                      <ComputerDesktopIcon class="w-3.5 h-3.5" style="color: var(--color-muted-foreground)" />
                     <div class="flex-1 min-w-0">
                       <div class="text-xs font-medium" style="color: var(--color-foreground)">System</div>
                       <div class="text-[10px]" style="color: var(--color-muted-foreground)">Follow your OS light / dark setting</div>
@@ -830,7 +928,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                       <div v-if="addProviderStep === 'model'">
                         <div class="flex items-center gap-1 mb-2">
                           <button class="cursor-pointer" style="color: var(--color-muted-foreground)" @click="addProviderStep = 'select'">
-                            <svg class="w-3.5 h-3.5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" /></svg>
+                            <ChevronRightIcon class="w-3.5 h-3.5" />
                           </button>
                           <span class="text-[10px]" style="color: var(--color-muted-foreground)">{{ addProviderInfo()?.name }}</span>
                         </div>
@@ -851,7 +949,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                       <div v-if="addProviderStep === 'apikey'" class="space-y-2">
                         <div class="flex items-center gap-1 mb-1">
                           <button class="cursor-pointer" style="color: var(--color-muted-foreground)" @click="addProviderStep = 'model'">
-                            <svg class="w-3.5 h-3.5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" /></svg>
+                            <ChevronRightIcon class="w-3.5 h-3.5" />
                           </button>
                           <span class="text-[10px] font-mono" style="color: var(--color-muted-foreground)">{{ addSelectedProvider }} / {{ addSelectedModel }}</span>
                         </div>
@@ -868,7 +966,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                   <!-- Provider list -->
                   <div v-if="configuredProviders.length === 0" class="flex flex-col items-center justify-center text-center py-12 gap-2.5">
                     <div class="w-9 h-9 grid place-items-center rounded-lg" style="background-color: var(--color-secondary); color: var(--color-muted-foreground)">
-                      <svg class="w-4 h-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" v-html="iconFor.providers" />
+                      <component :is="iconFor.providers" class="w-4 h-4" />
                     </div>
                     <div class="text-[13px] font-medium" style="color: var(--color-foreground)">No providers configured</div>
                     <div class="text-[11px] leading-relaxed max-w-[240px]" style="color: var(--color-muted-foreground)">
@@ -882,7 +980,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                       class="flex items-center gap-3 px-3 py-2.5 rounded-md"
                       style="border: 1px solid var(--color-border); background-color: var(--color-surface)"
                     >
-                      <Key :size="15" style="color: var(--color-muted-foreground)" />
+                      <KeyIcon class="w-3.5 h-3.5" style="color: var(--color-muted-foreground)" />
                       <div class="flex-1 min-w-0">
                         <div class="text-xs font-medium font-mono" style="color: var(--color-foreground)">{{ p.id }}</div>
                         <div class="text-[10px] font-mono truncate" style="color: var(--color-muted-foreground)">
@@ -904,7 +1002,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                         title="Remove provider"
                         @click="deleteConfirmId = p.id"
                       >
-                        <svg class="w-3.5 h-3.5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.519.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z" clip-rule="evenodd" /></svg>
+                        <TrashIcon class="w-3.5 h-3.5" />
                       </button>
                       <div v-else class="flex items-center gap-1">
                         <button class="text-[10px] px-1.5 py-0.5 text-white rounded cursor-pointer" style="background-color: var(--color-destructive)" @click="deleteProvider(p.id)">Delete</button>
@@ -953,7 +1051,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                           :key="t"
                           class="px-3 py-1 text-[11px] cursor-pointer transition-colors"
                           :style="mcpForm.transport === t
-                            ? { backgroundColor: 'var(--color-primary)', color: '#fff' }
+                            ? { backgroundColor: 'var(--color-primary)', color: 'var(--color-on-primary)' }
                             : { color: 'var(--color-muted-foreground)' }"
                           @click="mcpForm.transport = t"
                         >{{ t === 'local' ? 'Local' : t.toUpperCase() }}</button>
@@ -1065,7 +1163,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                       <button class="text-[11px] px-3 py-1.5 rounded-md cursor-pointer" style="border: 1px solid var(--color-border); color: var(--color-foreground)" @click="cancelMCPEdit">Cancel</button>
                       <button
                         class="text-[11px] px-3 py-1.5 rounded-md cursor-pointer"
-                        style="background-color: var(--color-primary); color: #fff"
+                        style="background-color: var(--color-primary); color: var(--color-on-primary)"
                         :disabled="mcpSaving"
                         @click="saveMCP"
                       >{{ mcpSaving ? 'Saving…' : 'Save' }}</button>
@@ -1077,7 +1175,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                   </div>
                   <div v-else-if="mcpEditing === null && Object.keys(mcpServers).length === 0" class="flex flex-col items-center justify-center text-center py-12 gap-2.5">
                     <div class="w-9 h-9 grid place-items-center rounded-lg" style="background-color: var(--color-secondary); color: var(--color-muted-foreground)">
-                      <svg class="w-4 h-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" v-html="iconFor.mcp" />
+                      <component :is="iconFor.mcp" class="w-4 h-4" />
                     </div>
                     <div class="text-[13px] font-medium" style="color: var(--color-foreground)">No MCP servers configured</div>
                     <div class="text-[11px] leading-relaxed max-w-[240px]" style="color: var(--color-muted-foreground)">Connect one with the <span class="font-mono">Add&nbsp;server</span> button above.</div>
@@ -1094,7 +1192,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                       }"
                     >
                       <div class="flex items-center gap-3">
-                        <component :is="serverIcon(info.type)" :size="15" style="color: var(--color-muted-foreground)" />
+                        <component :is="serverIcon(info.type)" class="w-3.5 h-3.5" style="color: var(--color-muted-foreground)" />
                         <div class="flex-1 min-w-0">
                           <div class="flex items-center gap-2">
                             <span class="text-xs font-medium" style="color: var(--color-foreground)">{{ name }}</span>
@@ -1115,7 +1213,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                         >
                           <span
                             class="inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform"
-                            :class="info.enabled ? 'translate-x-4.5' : 'translate-x-0.76'"
+                            :class="info.enabled ? 'translate-x-[20px]' : 'translate-x-[2px]'"
                           />
                         </button>
                       </div>
@@ -1149,7 +1247,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                         :key="f"
                         class="px-2.5 py-1 text-[11px] cursor-pointer transition-colors"
                         :style="skillFilter === f
-                          ? { backgroundColor: 'var(--color-primary)', color: '#fff' }
+                          ? { backgroundColor: 'var(--color-primary)', color: 'var(--color-on-primary)' }
                           : { color: 'var(--color-muted-foreground)' }"
                         @click="skillFilter = f"
                       >{{ f === 'all' ? 'All' : f === 'local' ? 'On this device' : 'Built-in' }}</button>
@@ -1166,7 +1264,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                   <div v-if="skillsLoading" class="text-center text-xs py-6 animate-pulse" style="color: var(--color-muted-foreground)">Loading...</div>
                   <div v-else-if="filteredSkills.length === 0" class="flex flex-col items-center justify-center text-center py-12 gap-2.5">
                     <div class="w-9 h-9 grid place-items-center rounded-lg" style="background-color: var(--color-secondary); color: var(--color-muted-foreground)">
-                      <svg class="w-4 h-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" v-html="iconFor.skills" />
+                      <component :is="iconFor.skills" class="w-4 h-4" />
                     </div>
                     <div class="text-[13px] font-medium" style="color: var(--color-foreground)">No skills found</div>
                     <div class="text-[11px] leading-relaxed max-w-[240px]" style="color: var(--color-muted-foreground)">Try a different filter or search term.</div>
@@ -1197,7 +1295,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                       >
                         <span
                           class="inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform"
-                          :class="sk.enabled ? 'translate-x-4.5' : 'translate-x-0.76'"
+                          :class="sk.enabled ? 'translate-x-[20px]' : 'translate-x-[2px]'"
                         />
                       </button>
                     </div>
@@ -1213,7 +1311,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                       style="border: 1px solid var(--color-border); color: var(--color-foreground)"
                       @click="openRemoteWizard"
                     >
-                      <Plus :size="14" /> Connect to remote host
+                      <PlusIcon class="w-3.5 h-3.5" /> Connect to remote host
                     </button>
                   </div>
 
@@ -1227,7 +1325,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
 
                   <div v-if="sshAliases.length === 0" class="flex flex-col items-center justify-center text-center py-12 gap-2.5">
                     <div class="w-9 h-9 grid place-items-center rounded-lg" style="background-color: var(--color-secondary); color: var(--color-muted-foreground)">
-                      <svg class="w-4 h-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" v-html="iconFor.ssh" />
+                      <component :is="iconFor.ssh" class="w-4 h-4" />
                     </div>
                     <div class="text-[13px] font-medium" style="color: var(--color-foreground)">No saved hosts</div>
                     <div class="text-[11px] leading-relaxed max-w-[270px]" style="color: var(--color-muted-foreground)">
@@ -1243,7 +1341,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                       :title="`Connect to ${alias.name}`"
                       @click="connectToAlias(alias)"
                     >
-                      <Server :size="15" style="color: var(--color-muted-foreground)" />
+                      <ServerIcon class="w-3.5 h-3.5" style="color: var(--color-muted-foreground)" />
                       <div class="flex-1 min-w-0">
                         <div class="text-xs font-medium" style="color: var(--color-foreground)">{{ alias.name }}</div>
                         <div class="text-[10px] font-mono truncate" style="color: var(--color-muted-foreground)">
@@ -1258,7 +1356,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                       >
                         active
                       </span>
-                      <ChevronRight :size="15" class="opacity-0 group-hover:opacity-100 transition-opacity" style="color: var(--color-muted-foreground)" />
+                      <ChevronRightIcon class="w-3.5 h-3.5 opacity-0 group-hover:opacity-100 transition-opacity" style="color: var(--color-muted-foreground)" />
                     </button>
                   </div>
                 </div>
@@ -1269,7 +1367,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
 
                   <div v-if="!channelAvailable" class="flex flex-col items-center justify-center text-center py-12 gap-2.5">
                     <div class="w-9 h-9 grid place-items-center rounded-lg" style="background-color: var(--color-secondary); color: var(--color-muted-foreground)">
-                      <svg class="w-4 h-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" v-html="iconFor.channels" />
+                      <component :is="iconFor.channels" class="w-4 h-4" />
                     </div>
                     <div class="text-[13px] font-medium" style="color: var(--color-foreground)">No channels configured</div>
                     <div class="text-[11px] leading-relaxed max-w-[260px]" style="color: var(--color-muted-foreground)">
@@ -1281,7 +1379,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                     <div class="px-4 py-3 rounded-md" style="border: 1px solid var(--color-border); background-color: var(--color-surface)">
                       <div class="flex items-center justify-between mb-3">
                         <div class="flex items-center gap-2">
-                          <MessageSquare :size="16" style="color: var(--color-muted-foreground)" />
+                          <ChatBubbleLeftIcon class="w-4 h-4" style="color: var(--color-muted-foreground)" />
                           <div>
                             <div class="text-xs font-medium" style="color: var(--color-foreground)">WeChat</div>
                             <div class="text-[10px]" style="color: var(--color-muted-foreground)">iLink Bot integration</div>
diff --git a/web/src/components/SetupView.vue b/web/src/components/SetupView.vue
index d0da1e6..f9c50d9 100644
--- a/web/src/components/SetupView.vue
+++ b/web/src/components/SetupView.vue
@@ -1,5 +1,13 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
+import {
+  CheckIcon,
+  CheckCircleIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  EyeIcon,
+  EyeSlashIcon,
+} from '@heroicons/vue/24/outline'
 import { useChatStore } from '@/stores/chat'
 import { api } from '@/composables/api'
 import type { SetupProvider, SetupModel } from '@/types/api'
@@ -193,9 +201,7 @@ function finish() {
         <!-- Done state -->
         <div v-if="step === 'done'" class="text-center animate-fade-in">
           <div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-5" style="background: var(--color-success-bg)">
-            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" style="color: var(--color-success-fg)">
-              <path d="M5 13l4 4L19 7" />
-            </svg>
+            <CheckIcon class="w-8 h-8" style="color: var(--color-success-fg)" />
           </div>
           <h2 class="text-xl font-semibold mb-2" style="font-family: var(--font-sans); color: var(--color-foreground)">You're all set!</h2>
           <p class="text-sm mb-6" style="color: var(--color-muted-foreground)">
@@ -203,7 +209,7 @@ function finish() {
           </p>
           <button
             class="px-6 py-2.5 rounded-lg text-sm font-medium transition-opacity cursor-pointer shadow-sm hover:opacity-90"
-            style="background: var(--color-primary); color: var(--color-on-primary, #fff)"
+            style="background: var(--color-primary); color: var(--color-on-primary)"
             @click="finish"
           >
             Start coding
@@ -264,9 +270,7 @@ function finish() {
                     <span v-if="p.tag === 'recommended'" class="text-[10px] px-1.5 py-0.5 rounded-full font-medium" style="background: var(--accent-wash); color: var(--color-primary)">Recommended</span>
                     <span v-if="p.tag === 'local'" class="text-[10px] px-1.5 py-0.5 rounded-full font-medium" style="background: var(--color-info-bg); color: var(--color-info-fg)">Local</span>
                     <span v-if="p.configured" class="text-[10px] px-1.5 py-0.5 rounded-full font-medium" style="background: var(--color-success-bg); color: var(--color-success-fg)">configured</span>
-                    <svg class="setup-chevron w-4 h-4 transition-colors" viewBox="0 0 20 20" fill="currentColor">
-                      <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
-                    </svg>
+                    <ChevronLeftIcon class="setup-chevron w-4 h-4 transition-colors" />
                   </div>
                 </div>
               </button>
@@ -277,9 +281,7 @@ function finish() {
           <div v-if="step === 'model'" class="px-6 pb-5">
             <div class="flex items-center gap-2 mb-1">
               <button class="setup-back transition-colors cursor-pointer" @click="goBack">
-                <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
-                  <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
-                </svg>
+                <ChevronRightIcon class="w-4 h-4" />
               </button>
               <h2 class="text-base font-semibold" style="font-family: var(--font-sans); color: var(--color-foreground)">Choose a Model</h2>
             </div>
@@ -314,9 +316,7 @@ function finish() {
                   <div class="flex items-center gap-2">
                     <span v-if="m.context_limit" class="text-[10px]" style="color: var(--color-muted-foreground)">{{ (m.context_limit / 1000).toFixed(0) }}k ctx</span>
                     <span v-if="m.reasoning" class="text-[10px] px-1.5 py-0.5 rounded-full" style="background: var(--color-info-bg); color: var(--color-info-fg)">reasoning</span>
-                    <svg class="setup-chevron w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
-                      <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
-                    </svg>
+                    <ChevronLeftIcon class="setup-chevron w-4 h-4 transition-colors" />
                   </div>
                 </div>
               </button>
@@ -327,9 +327,7 @@ function finish() {
           <div v-if="step === 'apikey'" class="px-6 pb-5">
             <div class="flex items-center gap-2 mb-1">
               <button class="setup-back transition-colors cursor-pointer" @click="goBack">
-                <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
-                  <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
-                </svg>
+                <ChevronRightIcon class="w-4 h-4" />
               </button>
               <h2 class="text-base font-semibold" style="font-family: var(--font-sans); color: var(--color-foreground)">Enter API Key</h2>
             </div>
@@ -358,14 +356,8 @@ function finish() {
                     class="setup-back absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer"
                     @click="showApiKey = !showApiKey"
                   >
-                    <svg v-if="!showApiKey" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
-                      <path d="M10 12.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" />
-                      <path fill-rule="evenodd" d="M.664 10.59a1.651 1.651 0 010-1.186A10.004 10.004 0 0110 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0110 17c-4.257 0-7.893-2.66-9.336-6.41zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
-                    </svg>
-                    <svg v-else class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
-                      <path fill-rule="evenodd" d="M3.28 2.22a.75.75 0 00-1.06 1.06l14.5 14.5a.75.75 0 101.06-1.06l-14.5-14.5z" clip-rule="evenodd" />
-                      <path d="M4.262 6.49A8.97 8.97 0 002.175 10.3a1.655 1.655 0 000 .4 10.004 10.004 0 007.548 5.953 8.97 8.97 0 004.988-.628l-1.446-1.446a4.003 4.003 0 01-5.54-5.54L4.262 6.49z" />
-                    </svg>
+                    <EyeIcon v-if="!showApiKey" class="w-4 h-4" />
+                    <EyeSlashIcon v-else class="w-4 h-4" />
                   </button>
                 </div>
               </div>
@@ -391,7 +383,7 @@ function finish() {
                   {{ validating ? 'Checking...' : 'Test Connection' }}
                 </button>
                 <span v-if="validationResult?.valid" class="text-xs flex items-center gap-1" style="color: var(--color-success-fg)">
-                  <svg class="w-3.5 h-3.5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
+                  <CheckCircleIcon class="w-3.5 h-3.5" />
                   Connected
                 </span>
                 <span v-if="validationResult?.valid === false" class="text-xs" style="color: var(--color-error-fg)">{{ validationResult.error }}</span>
@@ -405,7 +397,7 @@ function finish() {
               <button
                 :disabled="loading || !apiKey.trim()"
                 class="w-full px-4 py-2.5 rounded-lg text-sm font-medium transition-opacity cursor-pointer shadow-sm hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed"
-                style="background: var(--color-primary); color: var(--color-on-primary, #fff)"
+                style="background: var(--color-primary); color: var(--color-on-primary)"
                 @click="submitSetup"
               >
                 {{ loading ? 'Setting up...' : 'Complete Setup' }}
@@ -441,7 +433,7 @@ function finish() {
 
 .setup-retry {
   background: var(--color-primary);
-  color: var(--color-on-primary, #fff);
+  color: var(--color-on-primary);
   transition: opacity 0.15s;
 }
 .setup-retry:hover {
diff --git a/web/src/components/Sidebar.vue b/web/src/components/Sidebar.vue
index 91bdcf1..e922fdc 100644
--- a/web/src/components/Sidebar.vue
+++ b/web/src/components/Sidebar.vue
@@ -8,19 +8,22 @@ import {
   MenuItem,
 } from '@headlessui/vue'
 import {
-  ChevronRight,
-  Folder,
-  FolderOpen,
-  Server,
-  Plus,
-  MoreHorizontal,
-  Pin,
-  Archive,
-  ArchiveRestore,
-  Pencil,
-  Trash2,
-  MailOpen,
-} from 'lucide-vue-next'
+  ChevronRightIcon,
+  FolderIcon,
+  FolderOpenIcon,
+  ServerIcon,
+  PlusIcon,
+  EllipsisHorizontalIcon,
+  BookmarkIcon,
+  ArchiveBoxIcon,
+  ArchiveBoxArrowDownIcon,
+  PencilIcon,
+  TrashIcon,
+  EnvelopeOpenIcon,
+  SunIcon,
+  MoonIcon,
+  Cog6ToothIcon,
+} from '@heroicons/vue/24/outline'
 import { useChatStore } from '@/stores/chat'
 import { useProjectStore, isRemotePath, parseRemoteLabel } from '@/stores/project'
 import type { TaskItem, RemoteMeta } from '@/types/api'
@@ -129,8 +132,8 @@ async function openTask(task: TaskItem) {
 }
 
 function projIcon(path: string) {
-  if (isRemotePath(path)) return Server
-  return path === activePath.value ? FolderOpen : Folder
+  if (isRemotePath(path)) return ServerIcon
+  return path === activePath.value ? FolderOpenIcon : FolderIcon
 }
 
 function isActiveTask(task: TaskItem): boolean {
@@ -193,7 +196,7 @@ function relativeTime(ts: string): string {
     <!-- New task -->
     <div class="sidebar-header">
       <button class="new-task-btn" @click="store.newSession()">
-        <Plus :size="16" />
+        <PlusIcon class="w-4 h-4" />
         <span>New task</span>
       </button>
     </div>
@@ -210,7 +213,7 @@ function relativeTime(ts: string): string {
             :aria-pressed="showArchived"
             @click="showArchived = !showArchived"
           >
-            <Archive :size="14" />
+            <ArchiveBoxIcon class="w-3.5 h-3.5" />
           </button>
         </div>
       </div>
@@ -219,8 +222,8 @@ function relativeTime(ts: string): string {
 
       <div v-for="proj in projectNodes" :key="proj.path" class="project-group">
         <button class="project-row" :class="{ active: proj.path === activePath }" @click="toggle(proj.path)">
-          <ChevronRight :size="14" class="proj-chevron" :class="{ open: isExpanded(proj.path) }" />
-          <component :is="projIcon(proj.path)" :size="15" class="proj-icon" />
+          <ChevronRightIcon class="w-3.5 h-3.5 proj-chevron" :class="{ open: isExpanded(proj.path) }" />
+          <component :is="projIcon(proj.path)" class="w-3.5 h-3.5 proj-icon" />
           <span class="proj-name">{{ proj.name }}</span>
           <span v-if="visibleCount(proj.path) > 0" class="proj-count">{{ visibleCount(proj.path) }}</span>
         </button>
@@ -235,7 +238,7 @@ function relativeTime(ts: string): string {
             @click="openTask(task)"
           >
             <span class="task-dot" :class="{ unread: task.unread }" aria-hidden="true" />
-            <Pin v-if="task.pinned" :size="11" class="task-pin" />
+            <BookmarkIcon v-if="task.pinned" class="w-2.5 h-2.5 task-pin" />
             <input
               v-if="renamingUuid === task.uuid"
               :ref="el => { renameInput = el as HTMLInputElement | null }"
@@ -251,7 +254,7 @@ function relativeTime(ts: string): string {
 
             <HMenu as="div" class="task-menu" @click.stop>
               <MenuButton class="task-menu-btn" title="Task actions" @click.stop="onTaskMenuClick($event, task.uuid)">
-                <MoreHorizontal :size="14" />
+                <EllipsisHorizontalIcon class="w-3.5 h-3.5" />
               </MenuButton>
               <transition
                 enter-active-class="pop-enter-active"
@@ -262,28 +265,28 @@ function relativeTime(ts: string): string {
                 <MenuItems class="task-menu-items" :class="{ 'flip-up': flipUpMenus.has(task.uuid) }">
                   <MenuItem v-slot="{ active }">
                     <button class="tmi" :class="{ hl: active }" @click.stop="projectStore.updateTaskMeta(task.uuid, { pinned: !task.pinned })">
-                      <Pin :size="14" /> {{ task.pinned ? 'Unpin' : 'Pin' }}
+                      <BookmarkIcon class="w-3.5 h-3.5" /> {{ task.pinned ? 'Unpin' : 'Pin' }}
                     </button>
                   </MenuItem>
                   <MenuItem v-slot="{ active }">
                     <button class="tmi" :class="{ hl: active }" @click.stop="renameTask(task)">
-                      <Pencil :size="14" /> Rename
+                      <PencilIcon class="w-3.5 h-3.5" /> Rename
                     </button>
                   </MenuItem>
                   <MenuItem v-slot="{ active }">
                     <button class="tmi" :class="{ hl: active }" @click.stop="projectStore.updateTaskMeta(task.uuid, { archived: !task.archived })">
-                      <component :is="task.archived ? ArchiveRestore : Archive" :size="14" /> {{ task.archived ? 'Unarchive' : 'Archive' }}
+                      <component :is="task.archived ? ArchiveBoxArrowDownIcon : ArchiveBoxIcon" class="w-3.5 h-3.5" /> {{ task.archived ? 'Unarchive' : 'Archive' }}
                     </button>
                   </MenuItem>
                   <MenuItem v-slot="{ active }">
                     <button class="tmi" :class="{ hl: active }" @click.stop="projectStore.updateTaskMeta(task.uuid, { unread: !task.unread })">
-                      <MailOpen :size="14" /> {{ task.unread ? 'Mark read' : 'Mark unread' }}
+                      <EnvelopeOpenIcon class="w-3.5 h-3.5" /> {{ task.unread ? 'Mark read' : 'Mark unread' }}
                     </button>
                   </MenuItem>
                   <div class="tmi-sep" />
                   <MenuItem v-slot="{ active }">
                     <button class="tmi danger" :class="{ hl: active }" @click.stop="handleDelete(task)">
-                      <Trash2 :size="14" /> Delete
+                      <TrashIcon class="w-3.5 h-3.5" /> Delete
                     </button>
                   </MenuItem>
                 </MenuItems>
@@ -298,17 +301,11 @@ function relativeTime(ts: string): string {
     <div class="sidebar-footer">
       <div class="footer-actions">
         <button class="footer-btn" @click="emit('toggleTheme')" :title="resolvedTheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'">
-          <svg v-if="resolvedTheme === 'dark'" class="w-3.5 h-3.5" viewBox="0 0 20 20" fill="currentColor">
-            <path d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.06 1.06l1.06 1.06z" />
-          </svg>
-          <svg v-else class="w-3.5 h-3.5" viewBox="0 0 20 20" fill="currentColor">
-            <path fill-rule="evenodd" d="M7.455 2.004a.75.75 0 01.26.77 7 7 0 009.958 7.967.75.75 0 011.067.853A8.5 8.5 0 116.647 1.921a.75.75 0 01.808.083z" clip-rule="evenodd" />
-          </svg>
+          <SunIcon v-if="resolvedTheme === 'dark'" class="w-3.5 h-3.5" />
+          <MoonIcon v-else class="w-3.5 h-3.5" />
         </button>
-        <button class="footer-btn" @click="emit('openSettings')" title="Settings">
-          <svg class="w-3.5 h-3.5" viewBox="0 0 20 20" fill="currentColor">
-            <path fill-rule="evenodd" d="M7.84 1.804A1 1 0 018.82 1h2.36a1 1 0 01.98.804l.331 1.652a6.993 6.993 0 011.929 1.115l1.598-.54a1 1 0 011.186.447l1.18 2.044a1 1 0 01-.205 1.251l-1.267 1.113a7.047 7.047 0 010 2.228l1.267 1.113a1 1 0 01.206 1.25l-1.18 2.045a1 1 0 01-1.187.447l-1.598-.54a6.993 6.993 0 01-1.929 1.115l-.33 1.652a1 1 0 01-.98.804H8.82a1 1 0 01-.98-.804l-.331-1.652a6.993 6.993 0 01-1.929-1.115l-1.598.54a1 1 0 01-1.186-.447l-1.18-2.044a1 1 0 01.205-1.251l1.267-1.114a7.05 7.05 0 010-2.227L1.821 7.773a1 1 0 01-.206-1.25l1.18-2.045a1 1 0 011.187-.447l1.598.54A6.993 6.993 0 017.51 3.456l.33-1.652zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
-          </svg>
+        <button class="footer-btn" @click="emit('openSettings')" title="Settings (⌘,)">
+          <Cog6ToothIcon class="w-3.5 h-3.5" />
         </button>
       </div>
     </div>
diff --git a/web/src/components/TaskList.vue b/web/src/components/TaskList.vue
index e20bef0..9bff843 100644
--- a/web/src/components/TaskList.vue
+++ b/web/src/components/TaskList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { Circle, LoaderCircle, CircleCheck, Ban, CircleDot } from 'lucide-vue-next'
+import { MinusCircleIcon, ArrowPathIcon, CheckCircleIcon, NoSymbolIcon, EllipsisHorizontalCircleIcon } from '@heroicons/vue/24/outline'
 import type { TodoItem } from '@/types/api'
 
 defineProps<{
@@ -45,29 +45,29 @@ onBeforeUnmount(() => {
       />
 
       <!-- Status icon -->
-      <CircleCheck
+      <CheckCircleIcon
         v-if="todo.status === 'completed'"
         class="w-3.5 h-3.5 shrink-0"
         style="color: var(--color-success-fg)"
       />
-      <Ban
+      <NoSymbolIcon
         v-else-if="todo.status === 'cancelled'"
         class="w-3.5 h-3.5 shrink-0"
         style="color: var(--color-destructive)"
       />
       <template v-else-if="todo.status === 'in_progress'">
-        <CircleDot
+        <EllipsisHorizontalCircleIcon
           v-if="reduceMotion"
           class="w-3.5 h-3.5 shrink-0"
           style="color: var(--color-primary)"
         />
-        <LoaderCircle
+        <ArrowPathIcon
           v-else
           class="w-3.5 h-3.5 shrink-0 animate-spin"
           style="color: var(--color-primary)"
         />
       </template>
-      <Circle
+      <MinusCircleIcon
         v-else
         class="w-3.5 h-3.5 shrink-0"
         style="color: var(--color-muted-foreground)"
diff --git a/web/src/components/TerminalInstance.vue b/web/src/components/TerminalInstance.vue
index 5f61db0..2325c32 100644
--- a/web/src/components/TerminalInstance.vue
+++ b/web/src/components/TerminalInstance.vue
@@ -25,27 +25,47 @@ let sessionId = ''
 let resizeObserver: ResizeObserver | null = null
 let themeObserver: MutationObserver | null = null
 
-const termBg = ref(isDarkMode() ? '#18181b' : '#fafafa')
+const termBg = ref(readToken('--term-bg', isDarkMode() ? '#18181b' : '#fafafa'))
 
 function isDarkMode(): boolean {
   return document.documentElement.classList.contains('dark')
 }
 
-const darkTheme = {
-  background: '#18181b', foreground: '#e4e4e7', cursor: '#10b981',
-  selectionBackground: '#3f3f4680', black: '#09090b', red: '#ef4444',
-  green: '#22c55e', yellow: '#eab308', blue: '#3b82f6', magenta: '#a855f7',
-  cyan: '#06b6d4', white: '#d4d4d8', brightBlack: '#71717a', brightRed: '#f87171',
-  brightGreen: '#4ade80', brightYellow: '#facc15', brightBlue: '#60a5fa',
-  brightMagenta: '#c084fc', brightCyan: '#22d3ee', brightWhite: '#fafafa',
+// Read a CSS custom property from :root and strip whitespace. Falls back to the
+// provided default when the token is unset (e.g. before tokens.css loads).
+function readToken(name: string, fallback: string): string {
+  if (typeof window === 'undefined') return fallback
+  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+  return v || fallback
 }
-const lightTheme = {
-  background: '#fafafa', foreground: '#27272a', cursor: '#10b981',
-  selectionBackground: '#d4d4d880', black: '#18181b', red: '#dc2626',
-  green: '#16a34a', yellow: '#ca8a04', blue: '#2563eb', magenta: '#9333ea',
-  cyan: '#0891b2', white: '#d4d4d8', brightBlack: '#71717a', brightRed: '#ef4444',
-  brightGreen: '#22c55e', brightYellow: '#eab308', brightBlue: '#3b82f6',
-  brightMagenta: '#a855f7', brightCyan: '#06b6d4', brightWhite: '#fafafa',
+
+// Build an xterm theme object from the --term-* tokens. xterm needs resolved
+// color strings (it can't read var(...)), so we resolve them at call time — both
+// on init and whenever the theme observer fires (light/dark switch). This is the
+// single source for terminal colors; the palette lives in tokens.css.
+function termTheme() {
+  return {
+    background: readToken('--term-bg', '#18181b'),
+    foreground: readToken('--term-fg', '#e4e4e7'),
+    cursor: readToken('--term-cursor', '#FF8400'),
+    selectionBackground: readToken('--term-selection', '#3f3f4680'),
+    black: readToken('--term-black', '#09090b'),
+    red: readToken('--term-red', '#ef4444'),
+    green: readToken('--term-green', '#22c55e'),
+    yellow: readToken('--term-yellow', '#eab308'),
+    blue: readToken('--term-blue', '#3b82f6'),
+    magenta: readToken('--term-magenta', '#a855f7'),
+    cyan: readToken('--term-cyan', '#06b6d4'),
+    white: readToken('--term-white', '#d4d4d8'),
+    brightBlack: readToken('--term-bright-black', '#71717a'),
+    brightRed: readToken('--term-bright-red', '#f87171'),
+    brightGreen: readToken('--term-bright-green', '#4ade80'),
+    brightYellow: readToken('--term-bright-yellow', '#facc15'),
+    brightBlue: readToken('--term-bright-blue', '#60a5fa'),
+    brightMagenta: readToken('--term-bright-magenta', '#c084fc'),
+    brightCyan: readToken('--term-bright-cyan', '#22d3ee'),
+    brightWhite: readToken('--term-bright-white', '#fafafa'),
+  }
 }
 
 function getWsUrl(ptyId: string): string {
@@ -66,7 +86,7 @@ async function init() {
     cursorBlink: true,
     fontSize: 13,
     fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', Menlo, Monaco, monospace",
-    theme: isDarkMode() ? darkTheme : lightTheme,
+    theme: termTheme(),
   })
 
   fitAddon = new FitAddon()
@@ -84,8 +104,8 @@ async function init() {
   resizeObserver.observe(termEl.value)
 
   themeObserver = new MutationObserver(() => {
-    if (term) term.options.theme = isDarkMode() ? darkTheme : lightTheme
-    termBg.value = isDarkMode() ? '#18181b' : '#fafafa'
+    if (term) term.options.theme = termTheme()
+    termBg.value = readToken('--term-bg', isDarkMode() ? '#18181b' : '#fafafa')
   })
   themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
 
@@ -110,13 +130,6 @@ function connectWS(ptyId: string) {
     emit('connected')
     sendResize()
   }
-  ws.onmessage = (event) => {
-    if (event.data instanceof ArrayBuffer) {
-      term!.write(new Uint8Array(event.data))
-    } else {
-      term!.write(event.data)
-    }
-  }
   ws.onclose = () => {
     connected.value = false
     emit('disconnected')
@@ -126,6 +139,18 @@ function connectWS(ptyId: string) {
     connected.value = false
   }
 
+  ws.onmessage = (event) => {
+    // Guard: the term may have been disposed by cleanup() (tab close / panel
+    // hidden) before an in-flight WS frame arrives. Writing to a disposed
+    // terminal throws, so check before writing.
+    if (!term) return
+    if (event.data instanceof ArrayBuffer) {
+      term.write(new Uint8Array(event.data))
+    } else {
+      term.write(event.data)
+    }
+  }
+
   term.onData((data) => {
     if (ws && ws.readyState === WebSocket.OPEN) {
       ws.send(new TextEncoder().encode(data))
@@ -139,6 +164,11 @@ function cleanup() {
   themeObserver?.disconnect()
   themeObserver = null
   if (ws) {
+    // Detach handlers before closing so a frame racing in after close can't
+    // reach a disposed terminal.
+    ws.onmessage = null
+    ws.onclose = null
+    ws.onerror = null
     ws.close()
     ws = null
   }
diff --git a/web/src/components/TerminalPanel.vue b/web/src/components/TerminalPanel.vue
index 0ae662d..1c5a27e 100644
--- a/web/src/components/TerminalPanel.vue
+++ b/web/src/components/TerminalPanel.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { XMarkIcon, PlusIcon } from '@heroicons/vue/24/outline'
 import TerminalInstance from './TerminalInstance.vue'
 
 const emit = defineEmits<{
@@ -74,27 +75,21 @@ function closeTab(id: string) {
             @keydown.enter.stop.prevent="closeTab(tab.id)"
             @keydown.space.stop.prevent="closeTab(tab.id)"
           >
-            <svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
-              <path d="M18 6L6 18M6 6l12 12" />
-            </svg>
+            <XMarkIcon class="w-2.5 h-2.5" />
           </button>
           <span class="tab-label">{{ tab.label }}</span>
         </div>
 
         <!-- + New terminal after the last tab -->
         <button class="ctrl-btn" title="New terminal" @click="addTab">
-          <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
-            <path d="M12 5v14M5 12h14" />
-          </svg>
+          <PlusIcon class="w-3 h-3" />
         </button>
       </div>
 
       <!-- Controls: close panel only -->
       <div class="flex items-center gap-0.5 shrink-0">
         <button class="ctrl-btn" title="Close panel" @click="emit('close')">
-          <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-            <path d="M18 6L6 18M6 6l12 12" />
-          </svg>
+          <XMarkIcon class="w-3 h-3" />
         </button>
       </div>
     </div>
diff --git a/web/src/components/ToolCallCard.vue b/web/src/components/ToolCallCard.vue
index efc2756..8da5c4f 100644
--- a/web/src/components/ToolCallCard.vue
+++ b/web/src/components/ToolCallCard.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { ChevronDownIcon } from '@heroicons/vue/24/outline'
 import type { ToolCall, TodoItem } from '@/types/api'
 import TaskList from './TaskList.vue'
 import AskUserCard from './AskUserCard.vue'
@@ -252,7 +253,12 @@ function subagentName(): string {
 }
 
 function truncate(text: string, max: number): string {
-  return text.length > max ? text.slice(0, max) + `… (${text.length} chars)` : text
+  // Count by code point ([...str]) so CJK text — where one character is far
+  // wider visually than one UTF-16 code unit — truncates at a comparable visual
+  // length to ASCII text. The trailing "(N chars)" still reports the raw length
+  // for debugging.
+  const chars = [...text]
+  return chars.length > max ? chars.slice(0, max).join('') + `… (${chars.length} chars)` : text
 }
 
 function formatArgs(args: string): string {
@@ -289,14 +295,11 @@ function formatArgs(args: string): string {
       <span class="text-[11px] font-mono" style="color: var(--color-foreground)">{{ subagentName() }}</span>
       <span v-if="tool.status === 'running'" class="text-[10px] animate-pulse" style="color: var(--color-muted-foreground)">working…</span>
       <span v-if="tool.children?.length" class="ml-auto text-[10px] tabular-nums" style="color: var(--color-muted-foreground)">{{ tool.children.length }} calls</span>
-      <svg
+      <ChevronDownIcon
         class="w-3 h-3 transition-transform shrink-0 ml-1"
         :class="{ 'rotate-180': subagentExpanded }"
         style="color: var(--color-muted-foreground)"
-        viewBox="0 0 20 20" fill="currentColor"
-      >
-        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
-      </svg>
+      />
     </button>
 
     <!-- Children: same inset as regular tool content -->
@@ -345,9 +348,7 @@ function formatArgs(args: string): string {
         class="text-xs font-mono truncate"
         :style="isContextTool ? 'color: var(--color-muted-foreground)' : 'color: var(--color-primary)'"
       >{{ displaySubtitle }}</span>
-      <svg class="w-3 h-3 shrink-0" style="color: var(--color-muted-foreground)" viewBox="0 0 20 20" fill="currentColor">
-        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
-      </svg>
+      <ChevronDownIcon class="w-3 h-3 shrink-0" style="color: var(--color-muted-foreground)" />
       <span v-if="renderType === 'diff' && diffData.added + diffData.deleted > 0" class="ml-auto text-[10px] font-mono tabular-nums shrink-0">
         <span v-if="diffData.added" style="color: var(--color-success-fg)">+{{ diffData.added }}</span>
         <span v-if="diffData.added && diffData.deleted" class="mx-0.5" style="color: var(--color-muted-foreground)">/</span>
@@ -369,9 +370,7 @@ function formatArgs(args: string): string {
           class="text-xs font-mono truncate"
           :style="isContextTool ? 'color: var(--color-muted-foreground)' : 'color: var(--color-primary)'"
         >{{ displaySubtitle }}</span>
-        <svg class="w-3 h-3 shrink-0 rotate-180" style="color: var(--color-muted-foreground)" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
-        </svg>
+        <ChevronDownIcon class="w-3 h-3 shrink-0 rotate-180" style="color: var(--color-muted-foreground)" />
         <span v-if="renderType === 'diff' && diffData.added + diffData.deleted > 0" class="ml-auto text-[10px] font-mono tabular-nums shrink-0">
           <span v-if="diffData.added" style="color: var(--color-success-fg)">+{{ diffData.added }}</span>
           <span v-if="diffData.added && diffData.deleted" class="mx-0.5" style="color: var(--color-muted-foreground)">/</span>
diff --git a/web/src/components/TopBar.vue b/web/src/components/TopBar.vue
index a86f2a1..d8bae7d 100644
--- a/web/src/components/TopBar.vue
+++ b/web/src/components/TopBar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, onMounted, watch } from 'vue'
-import { SquareTerminal, FileDiff, FolderOpen, ListChecks, ChevronDown, PanelRight } from 'lucide-vue-next'
+import { CommandLineIcon, ArrowsRightLeftIcon, FolderOpenIcon, ClipboardDocumentCheckIcon, ChevronDownIcon, RectangleStackIcon } from '@heroicons/vue/24/outline'
 import { Menu as HMenu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
 import { api } from '@/composables/api'
 
@@ -42,10 +42,10 @@ const statusLabel = computed(() => {
 })
 
 const panelButtons = [
-  { panel: 'plan' as PanelType, icon: ListChecks, label: 'Plan', shortcut: '⇧⌘P' },
-  { panel: 'files' as PanelType, icon: FolderOpen, label: 'Files', shortcut: '⇧⌘E' },
-  { panel: 'changes' as PanelType, icon: FileDiff, label: 'Changes', shortcut: '⇧⌘G' },
-  { panel: 'terminal' as PanelType, icon: SquareTerminal, label: 'Terminal', shortcut: '⌘`' },
+  { panel: 'plan' as PanelType, icon: ClipboardDocumentCheckIcon, label: 'Plan', shortcut: '⇧⌘P' },
+  { panel: 'files' as PanelType, icon: FolderOpenIcon, label: 'Files', shortcut: '⇧⌘E' },
+  { panel: 'changes' as PanelType, icon: ArrowsRightLeftIcon, label: 'Changes', shortcut: '⇧⌘G' },
+  { panel: 'terminal' as PanelType, icon: CommandLineIcon, label: 'Terminal', shortcut: '⌘`' },
 ]
 
 // Working-tree diff stat, shown inline on the Changes item. Fetched from the
@@ -86,11 +86,11 @@ watch(
         :class="{ open }"
         :aria-label="`Panels menu · ${statusLabel}`"
         :aria-expanded="open"
-        :title="`Panels · ${statusLabel}`"
+        :title="`Panels · ${statusLabel}  (⇧⌘P plan · ⇧⌘E files · ⇧⌘G changes · ⌘\` terminal)`"
         @click="loadDiffStat"
       >
-        <PanelRight :size="15" />
-        <ChevronDown :size="13" class="panel-menu-caret" />
+        <RectangleStackIcon class="w-3.5 h-3.5" />
+        <ChevronDownIcon class="w-3 h-3 panel-menu-caret" />
         <span class="status-dot panel-status-dot" :style="{ backgroundColor: statusColor }" />
       </MenuButton>
       <transition
@@ -107,7 +107,7 @@ watch(
               :aria-current="isCurrent(btn.panel) ? 'true' : undefined"
               @click="emit('toggle-panel', btn.panel)"
             >
-              <component :is="btn.icon" :size="16" class="pmi-icon" />
+              <component :is="btn.icon" class="w-4 h-4 pmi-icon" />
               <span class="pmi-label">{{ btn.label }}</span>
               <span v-if="btn.panel === 'changes' && diffStat" class="pmi-stat">
                 <span style="color: var(--color-success-fg)">+{{ diffStat.additions }}</span>
diff --git a/web/src/components/WorkspacePicker.vue b/web/src/components/WorkspacePicker.vue
index 8bb8786..d63b275 100644
--- a/web/src/components/WorkspacePicker.vue
+++ b/web/src/components/WorkspacePicker.vue
@@ -2,15 +2,15 @@
 import { ref, computed, inject } from 'vue'
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 import {
-  Folder,
-  FolderOpen,
-  Check,
-  Plus,
-  Server,
-  ChevronDown,
-  Search,
-  ArrowLeft,
-} from 'lucide-vue-next'
+  FolderIcon,
+  FolderOpenIcon,
+  CheckIcon,
+  PlusIcon,
+  ServerIcon,
+  ChevronDownIcon,
+  MagnifyingGlassIcon,
+  ArrowLeftIcon,
+} from '@heroicons/vue/24/outline'
 import { useChatStore } from '@/stores/chat'
 import { useProjectStore, isRemotePath, parseRemoteLabel } from '@/stores/project'
 import { useFolderBrowser } from '@/composables/useFolderBrowser'
@@ -152,9 +152,9 @@ function reset() {
   <Popover class="ws-popover" style="position: relative">
     <PopoverButton as="template" :disabled="store.isRunning">
       <button class="ws-pill ws-pill-action" :disabled="store.isRunning" :title="activePath">
-        <component :is="activeIsRemote ? Server : FolderOpen" :size="14" class="ws-pill-icon" />
+        <component :is="activeIsRemote ? ServerIcon : FolderOpenIcon" class="w-3.5 h-3.5 ws-pill-icon" />
         <span class="ws-name">{{ activeName }}</span>
-        <ChevronDown :size="13" class="ws-caret" />
+        <ChevronDownIcon class="w-3 h-3 ws-caret" />
       </button>
     </PopoverButton>
 
@@ -172,7 +172,7 @@ function reset() {
         <!-- Folder browser -->
         <div v-if="showBrowser" class="ws-browser">
           <div class="ws-browser-head">
-            <button class="ws-back" @click="showBrowser = false"><ArrowLeft :size="14" /></button>
+            <button class="ws-back" @click="showBrowser = false"><ArrowLeftIcon class="w-3.5 h-3.5" /></button>
             <input
               v-model="pathInput"
               class="ws-path-input"
@@ -196,7 +196,7 @@ function reset() {
               class="ws-row ws-folder"
               @click="loadFolders(folder.path)"
             >
-              <Folder :size="14" class="ws-folder-icon" />
+              <FolderIcon class="w-3.5 h-3.5 ws-folder-icon" />
               <span class="ws-row-name">{{ folder.name }}</span>
             </button>
           </div>
@@ -210,7 +210,7 @@ function reset() {
         <!-- Workspace list -->
         <div v-else class="ws-listview">
           <div class="ws-search">
-            <Search :size="13" class="ws-search-icon" />
+            <MagnifyingGlassIcon class="w-3 h-3 ws-search-icon" />
             <input v-model="query" class="ws-search-input" placeholder="Search workspaces" />
           </div>
 
@@ -223,19 +223,19 @@ function reset() {
               :class="{ active: isActive(node.path) }"
               @click="pickWorkspace(node, close)"
             >
-              <component :is="isRemotePath(node.path) ? Server : Folder" :size="14" class="ws-row-icon" />
+              <component :is="isRemotePath(node.path) ? ServerIcon : FolderIcon" class="w-3.5 h-3.5 ws-row-icon" />
               <span class="ws-row-name">{{ node.name }}</span>
-              <Check v-if="isActive(node.path)" :size="14" class="ws-check" />
+              <CheckIcon v-if="isActive(node.path)" class="w-3.5 h-3.5 ws-check" />
             </button>
           </div>
 
           <div v-if="switchErr" class="ws-error">{{ switchErr }}</div>
           <div class="ws-actions">
             <button class="ws-action" @click="openFolderAction(close)">
-              <Plus :size="14" /> <span>Open folder</span>
+              <PlusIcon class="w-3.5 h-3.5" /> <span>Open folder</span>
             </button>
             <button class="ws-action" @click="openRemote(close)">
-              <Server :size="14" /> <span>Remote connect</span>
+              <ServerIcon class="w-3.5 h-3.5" /> <span>Remote connect</span>
             </button>
           </div>
         </div>
@@ -503,7 +503,7 @@ function reset() {
   border: none;
   border-radius: var(--radius-md);
   background: var(--color-primary);
-  color: #fff;
+  color: var(--color-on-primary);
   font-size: 12px;
   font-weight: 500;
   cursor: pointer;
diff --git a/web/src/composables/api.ts b/web/src/composables/api.ts
index 8bf6668..9e7696e 100644
--- a/web/src/composables/api.ts
+++ b/web/src/composables/api.ts
@@ -212,6 +212,13 @@ export const api = {
     request<{ status: string; state: string }>('/api/channel/enable', { method: 'POST' }),
   channelDisable: () =>
     request<{ status: string; state: string }>('/api/channel/disable', { method: 'POST' }),
+  channelBLEStatus: () =>
+    request<{ enabled: boolean }>('/api/channel/ble'),
+  setChannelBLE: (enabled: boolean) =>
+    request<{ enabled: boolean }>('/api/channel/ble', {
+      method: 'POST',
+      body: JSON.stringify({ enabled }),
+    }),
 
   // Setup API
   setupProviders: () =>
diff --git a/web/src/composables/notifications.ts b/web/src/composables/notifications.ts
index fe40962..7c28810 100644
--- a/web/src/composables/notifications.ts
+++ b/web/src/composables/notifications.ts
@@ -38,7 +38,7 @@ export function useNotifications() {
     if (typeof Notification === 'undefined' || permission.value !== 'granted') return
     if (typeof document !== 'undefined' && !document.hidden) return
     try {
-      const n = new Notification(title, { body, icon: '/icon.svg', tag: 'jcode' })
+      const n = new Notification(title, { body, icon: '/icon.png', tag: 'jcode' })
       n.onclick = () => {
         window.focus()
         n.close()
diff --git a/web/src/stores/chat.ts b/web/src/stores/chat.ts
index afad2e2..2e3d352 100644
--- a/web/src/stores/chat.ts
+++ b/web/src/stores/chat.ts
@@ -81,6 +81,10 @@ export const useChatStore = defineStore('chat', () => {
   let streamingText = ''
   let streamingMsgId = ''
 
+  // Wall-clock start of the in-flight turn (set when a prompt is sent), used to
+  // stamp the turn's elapsed time onto its final assistant message on completion.
+  let turnStartedAt = 0
+
   // --- Getters ---
   const messages = computed(() =>
     timeline.value
@@ -257,6 +261,20 @@ export const useChatStore = defineStore('chat', () => {
     isRunning.value = false
     streamingText = ''
     streamingMsgId = ''
+    // Stamp the turn's elapsed time onto its final assistant message (done before
+    // any "Stopped"/error system message is appended, so we target the real
+    // response). The live "Thinking…" timer is transient; this makes the duration
+    // persist in the conversation history.
+    if (turnStartedAt > 0) {
+      for (let i = timeline.value.length - 1; i >= 0; i--) {
+        const item = timeline.value[i]
+        if (item && item.kind === 'message' && item.data.role === 'assistant') {
+          item.data.durationMs = Date.now() - turnStartedAt
+          break
+        }
+      }
+      turnStartedAt = 0
+    }
     // Clean up any tool calls still in 'running' state — the agent has finished.
     for (const item of timeline.value) {
       if (item.kind === 'tool') markToolTreeDone(item.data)
@@ -444,6 +462,7 @@ export const useChatStore = defineStore('chat', () => {
 
     addMessage('user', text, undefined, images)
     isRunning.value = true
+    turnStartedAt = Date.now()
     streamingText = ''
     streamingMsgId = ''
     try {
@@ -670,6 +689,19 @@ export const useChatStore = defineStore('chat', () => {
     }
   }
 
+  // Set the default auto-approve preference. The backend persists it as the
+  // startup mode and applies it now (auto-approve maps onto the unified mode:
+  // Autopilot when on, Ask when off), so keep the local mode/flag in sync.
+  async function setAutoApprove(enabled: boolean) {
+    try {
+      await api.setApprovalMode(enabled)
+      autoApprove.value = enabled
+      mode.value = enabled ? 'autopilot' : 'ask'
+    } catch (err) {
+      console.error('Failed to set auto-approve:', err)
+    }
+  }
+
 
   async function fetchChannelState() {
     try {
@@ -822,51 +854,6 @@ export const useChatStore = defineStore('chat', () => {
     }
   }
 
-  async function retryFromMessage(messageId: string) {
-    // Find the assistant/system message to retry
-    const msgIdx = timeline.value.findIndex(i => i.kind === 'message' && i.data.id === messageId)
-    if (msgIdx === -1) return
-
-    // Find the last user message before this index
-    let userMsgText = ''
-    let userMsgIdx = -1
-    for (let i = msgIdx - 1; i >= 0; i--) {
-      const item = timeline.value[i]
-      if (item && item.kind === 'message' && item.data.role === 'user') {
-        userMsgText = item.data.content
-        userMsgIdx = i
-        break
-      }
-    }
-    if (!userMsgText || userMsgIdx === -1) return
-
-    // Count user messages BEFORE userMsgIdx in the timeline.
-    // This matches the backend's user-message count (role === 'user' entries in s.history).
-    const beforeUserMessage = timeline.value
-      .slice(0, userMsgIdx)
-      .filter(i => i.kind === 'message' && i.data.role === 'user')
-      .length
-
-    // Truncate backend history in-place and keep using the returned session id.
-    // The backend preserves the same session UUID while removing the edited tail.
-    try {
-      const res = await api.truncateHistory(beforeUserMessage)
-      if (res.session_id) {
-        currentSessionId.value = res.session_id
-      }
-    } catch (err) {
-      console.error('Failed to truncate history:', err)
-      return
-    }
-
-    // Truncate frontend timeline from the user message (inclusive) and reset streaming state
-    timeline.value.splice(userMsgIdx)
-    streamingText = ''
-    streamingMsgId = ''
-
-    await sendMessage(userMsgText)
-  }
-
   async function editAndResend(messageId: string, newText: string) {
     // Find the user message to edit
     const msgIdx = timeline.value.findIndex(
@@ -1032,6 +1019,7 @@ export const useChatStore = defineStore('chat', () => {
     clearChat,
     loadSession,
     fetchApprovalMode,
+    setAutoApprove,
     fetchChannelState,
     toggleChannel,
     restoreCurrentSession,
@@ -1042,7 +1030,6 @@ export const useChatStore = defineStore('chat', () => {
     recentModels,
     favoriteModels,
     enabledProviders,
-    retryFromMessage,
     editAndResend,
   }
 })
diff --git a/web/src/style.css b/web/src/style.css
index df966e1..5ddde90 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -112,8 +112,8 @@ select:focus-visible {
   --tw-prose-links: var(--color-primary);
   --tw-prose-bold: var(--color-foreground);
   --tw-prose-code: var(--color-foreground);
-  --tw-prose-pre-bg: #1A1A1A;
-  --tw-prose-pre-code: #e4e4e7;
+  --tw-prose-pre-bg: var(--code-bg);
+  --tw-prose-pre-code: var(--hljs-fg);
   /* GitHub-style: tighter line-height than prose default (1.75) */
   line-height: 1.625;
   font-size: 0.9375rem; /* 15px */
@@ -143,21 +143,17 @@ select:focus-visible {
 
 .prose-chat pre {
   border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--code-border);
   font-size: 0.8125rem;
   line-height: 1.625;
   padding: 0.875em 1em;
-  background: #1A1A1A !important;
-  color: #e4e4e7;
-}
-
-/* Light mode: GitHub-style code block */
-:root:not(.dark) .prose-chat pre {
-  background: #f6f8fa !important;
+  background: var(--code-bg);
   color: var(--hljs-fg);
-  border-color: #d0d7de;
 }
 
+/* Light mode keeps the same token-driven treatment — the tokens already carry
+ * the light values, so no separate override is needed. */
+
 .prose-chat code:not(pre code) {
   padding: 0.15em 0.4em;
   border-radius: var(--radius-sm);
@@ -217,15 +213,12 @@ select:focus-visible {
 .diff-bar-empty {
   background: var(--color-border);
 }
-:root:not(.dark) .diff-bar-empty {
-  background: #d4d4d8;
-}
 
-/* ─── xterm terminal light mode fix ─── */
-/* Make the area surrounding the xterm canvas match the terminal theme background */
-:root:not(.dark) .xterm {
-  background-color: #fafafa;
+/* ─── xterm terminal — background follows the terminal token so the area around
+   the canvas matches the terminal theme, in both light and dark. ─── */
+.xterm {
+  background-color: var(--term-bg);
 }
-:root:not(.dark) .xterm-viewport {
-  background-color: #fafafa !important;
+.xterm-viewport {
+  background-color: var(--term-bg) !important;
 }
diff --git a/web/src/styles/tokens.css b/web/src/styles/tokens.css
index 2823c28..955922e 100644
--- a/web/src/styles/tokens.css
+++ b/web/src/styles/tokens.css
@@ -98,6 +98,44 @@
   --color-destructive: #D93C15;
   --color-sidebar-bg: #FAFAF8;
 
+  /* Text color on top of the primary / destructive fills (buttons, badges). The
+   * generated themes redefine --color-on-primary per theme, but defining it here
+   * too means the many `var(--color-on-primary, #fff)` fallbacks no longer fire
+   * in the base light/dark themes. */
+  --color-on-primary: #FFFFFF;
+  --color-on-destructive: #FFFFFF;
+
+  /* Code-block surface (markdown <pre>). Distinct from --color-surface so a code
+   * block reads as its own inset surface; matches GitHub's light code bg and the
+   * dark terminal/code tone. */
+  --code-bg: #f6f8fa;
+  --code-border: #d0d7de;
+
+  /* Terminal (xterm) palette — single source for the JS theme object in
+   * TerminalInstance.vue (read via getComputedStyle). Cursor uses the brand
+   * accent; the 16 ANSI colors align with the rest of the UI's success/error/
+   * info hues so shell output and the surrounding UI share one palette. */
+  --term-bg: #fafafa;
+  --term-fg: #27272a;
+  --term-cursor: var(--color-primary);
+  --term-selection: #d4d4d880;
+  --term-black: #18181b;
+  --term-red: #dc2626;
+  --term-green: #16a34a;
+  --term-yellow: #ca8a04;
+  --term-blue: #2563eb;
+  --term-magenta: #9333ea;
+  --term-cyan: #0891b2;
+  --term-white: #d4d4d8;
+  --term-bright-black: #71717a;
+  --term-bright-red: #ef4444;
+  --term-bright-green: #22c55e;
+  --term-bright-yellow: #eab308;
+  --term-bright-blue: #3b82f6;
+  --term-bright-magenta: #a855f7;
+  --term-bright-cyan: #06b6d4;
+  --term-bright-white: #fafafa;
+
   /* ─── Syntax highlighting (light) ─── */
   --hljs-fg: #3f3f46;
   --hljs-keyword: #0369a1;
@@ -137,6 +175,37 @@
   --color-sidebar-bg: #1A1A1A;
   --color-success: #22C55E;
 
+  /* Text on primary/destructive fills (see light-mode note above). */
+  --color-on-primary: #FFFFFF;
+  --color-on-destructive: #FFFFFF;
+
+  /* Code-block surface (dark). #1A1A1A matches --color-surface here, but kept as
+   * its own token so a generated theme can diverge the code tone independently. */
+  --code-bg: #1A1A1A;
+  --code-border: var(--color-border);
+
+  /* Terminal (xterm) palette — dark variant. */
+  --term-bg: #18181b;
+  --term-fg: #e4e4e7;
+  --term-cursor: var(--color-primary);
+  --term-selection: #3f3f4680;
+  --term-black: #09090b;
+  --term-red: #ef4444;
+  --term-green: #22c55e;
+  --term-yellow: #eab308;
+  --term-blue: #3b82f6;
+  --term-magenta: #a855f7;
+  --term-cyan: #06b6d4;
+  --term-white: #d4d4d8;
+  --term-bright-black: #71717a;
+  --term-bright-red: #f87171;
+  --term-bright-green: #4ade80;
+  --term-bright-yellow: #facc15;
+  --term-bright-blue: #60a5fa;
+  --term-bright-magenta: #c084fc;
+  --term-bright-cyan: #22d3ee;
+  --term-bright-white: #fafafa;
+
   /* ─── Syntax highlighting (dark) ─── */
   --hljs-fg: #e4e4e7;
   --hljs-keyword: #7dd3fc;
diff --git a/web/src/types/api.ts b/web/src/types/api.ts
index 6c1a005..ece93bb 100644
--- a/web/src/types/api.ts
+++ b/web/src/types/api.ts
@@ -381,6 +381,10 @@ export interface ChatMessage {
   level?: 'error' | 'notice'
   // Optional raw detail (e.g. the unmapped error string) shown collapsed.
   detail?: string
+  // For assistant messages: how long the turn took (ms), from the user prompt
+  // until the agent finished. Set on the final assistant message of a turn so
+  // the elapsed time persists in the header after the live timer disappears.
+  durationMs?: number
 }
 
 export interface ToolCall {