diff --git a/.gitignore b/.gitignore
index dea606f..1a9d952 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,4 @@ docs/_site/
 docs/.jekyll-cache/
 docs/.jekyll-metadata
 .vite/
+.claude
diff --git a/desktop/splash/index.html b/desktop/splash/index.html
index 235058f..ce8ed8a 100644
--- a/desktop/splash/index.html
+++ b/desktop/splash/index.html
@@ -19,6 +19,17 @@
         user-select: none;
         -webkit-user-select: none;
       }
+      /* Draggable strip under the macOS overlay title bar (the main window uses
+         titleBarStyle:Overlay), so the splash window can be moved while the
+         local server starts. Transparent and harmless on other platforms. */
+      .drag-strip {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 28px;
+        z-index: 10;
+      }
       .wrap {
         height: 100%;
         display: flex;
@@ -62,7 +73,8 @@
     </style>
   </head>
   <body>
-    <div class="wrap">
+    <div class="drag-strip" data-tauri-drag-region></div>
+    <div class="wrap" role="main" aria-label="jcode 正在启动">
       <svg class="mark" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
         <defs>
           <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
@@ -78,7 +90,7 @@
         <path fill="#ff8400" 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" />
       </svg>
       <div class="title"><b>j</b>code</div>
-      <div class="status"><span class="spinner"></span><span>正在启动本地服务…</span></div>
+      <div class="status" role="status" aria-live="polite"><span class="spinner" aria-hidden="true"></span><span>正在启动本地服务…</span></div>
     </div>
   </body>
 </html>
diff --git a/desktop/src-tauri/src/main.rs b/desktop/src-tauri/src/main.rs
index fc30cb7..e270e50 100644
--- a/desktop/src-tauri/src/main.rs
+++ b/desktop/src-tauri/src/main.rs
@@ -36,12 +36,18 @@ pub fn show_main(app: &AppHandle) {
     }
 }
 
-/// Toggle window visibility — the tray icon's left-click behaviour.
+/// Toggle window visibility — the tray icon's left-click behaviour. A minimized
+/// window still reports `is_visible() == true`, so treat "visible but minimized"
+/// as "should be restored" rather than hiding it; otherwise a left-click on a
+/// minimized window would hide it instead of bringing it forward.
 pub fn toggle_main(app: &AppHandle) {
     if let Some(w) = app.get_webview_window("main") {
-        if w.is_visible().unwrap_or(false) {
+        let visible = w.is_visible().unwrap_or(false);
+        let minimized = w.is_minimized().unwrap_or(false);
+        if visible && !minimized {
             let _ = w.hide();
         } else {
+            let _ = w.unminimize();
             let _ = w.show();
             let _ = w.set_focus();
         }
diff --git a/internal/handler/web.go b/internal/handler/web.go
index 53f2a1c..b78a744 100644
--- a/internal/handler/web.go
+++ b/internal/handler/web.go
@@ -273,13 +273,23 @@ type WebHandler struct {
 
 	mu              sync.Mutex
 	approvalCounter int
-	pendingApproval map[string]chan ApprovalResponse
+	pendingApproval map[string]*webPendingApproval
 
 	askUserMu      sync.Mutex
 	askUserCounter int
 	pendingAskUser map[string]*pendingAskUser
 }
 
+// pendingApproval pairs an approval's response channel with the request payload
+// so the latter can be re-surfaced to a (re)connecting client via
+// /api/approval/pending — mirroring pendingAskUser. The WS approval_request event
+// is fire-once, so without retaining the data a reload/reconnect while an
+// approval is pending would leave the agent blocked with no card to act on.
+type webPendingApproval struct {
+	ch   chan ApprovalResponse
+	data WebApprovalRequestData
+}
+
 // pendingAskUser pairs a question's response channel with the request payload so
 // the latter can be re-surfaced to a (re)connecting client via /api/ask/pending.
 type pendingAskUser struct {
@@ -291,7 +301,7 @@ type pendingAskUser struct {
 func NewWebHandler() *WebHandler {
 	return &WebHandler{
 		eventCh:         make(chan WebEvent, 256),
-		pendingApproval: make(map[string]chan ApprovalResponse),
+		pendingApproval: make(map[string]*webPendingApproval),
 		pendingAskUser:  make(map[string]*pendingAskUser),
 	}
 }
@@ -391,7 +401,13 @@ func (h *WebHandler) RequestApproval(ctx context.Context, req ApprovalRequest) (
 	h.approvalCounter++
 	id := fmt.Sprintf("approval_%d", h.approvalCounter)
 	respCh := make(chan ApprovalResponse, 1)
-	h.pendingApproval[id] = respCh
+	data := WebApprovalRequestData{
+		ID:         id,
+		ToolName:   req.ToolName,
+		ToolArgs:   req.ToolArgs,
+		IsExternal: req.IsExternal,
+	}
+	h.pendingApproval[id] = &webPendingApproval{ch: respCh, data: data}
 	h.mu.Unlock()
 
 	defer func() {
@@ -400,12 +416,7 @@ func (h *WebHandler) RequestApproval(ctx context.Context, req ApprovalRequest) (
 		h.mu.Unlock()
 	}()
 
-	h.emit("approval_request", WebApprovalRequestData{
-		ID:         id,
-		ToolName:   req.ToolName,
-		ToolArgs:   req.ToolArgs,
-		IsExternal: req.IsExternal,
-	})
+	h.emit("approval_request", data)
 
 	select {
 	case resp := <-respCh:
@@ -423,7 +434,7 @@ func (h *WebHandler) RequestApproval(ctx context.Context, req ApprovalRequest) (
 // Autopilot on a single Allow click.
 func (h *WebHandler) ResolveApproval(id string, approved, approveAll bool) error {
 	h.mu.Lock()
-	ch, ok := h.pendingApproval[id]
+	p, ok := h.pendingApproval[id]
 	h.mu.Unlock()
 
 	if !ok {
@@ -436,13 +447,28 @@ func (h *WebHandler) ResolveApproval(id string, approved, approveAll bool) error
 	}
 
 	select {
-	case ch <- ApprovalResponse{Approved: approved, Mode: mode}:
+	case p.ch <- ApprovalResponse{Approved: approved, Mode: mode}:
 		return nil
 	default:
 		return fmt.Errorf("approval %q already resolved", id)
 	}
 }
 
+// PendingApprovalRequests returns the still-unanswered approval requests so a
+// reloaded/reconnecting client can re-surface the approval card (the
+// approval_request WS event is fire-once and ephemeral). Without this, a page
+// refresh or WS reconnect while an approval is pending would drop the card and
+// leave the agent blocked forever. Mirrors PendingAskUserRequests.
+func (h *WebHandler) PendingApprovalRequests() []WebApprovalRequestData {
+	h.mu.Lock()
+	defer h.mu.Unlock()
+	out := make([]WebApprovalRequestData, 0, len(h.pendingApproval))
+	for _, p := range h.pendingApproval {
+		out = append(out, p.data)
+	}
+	return out
+}
+
 // --- Ask-user flow ---
 
 // RequestAskUser emits the question(s) to web clients and blocks until the user
diff --git a/internal/web/server.go b/internal/web/server.go
index 82101df..545b24f 100644
--- a/internal/web/server.go
+++ b/internal/web/server.go
@@ -285,6 +285,7 @@ func (s *Server) Start(ctx context.Context) error {
 	mux.HandleFunc("POST /api/goal", s.handleSetGoal)
 	mux.HandleFunc("DELETE /api/goal", s.handleClearGoal)
 	mux.HandleFunc("POST /api/approval", s.handleApproval)
+	mux.HandleFunc("GET /api/approval/pending", s.handlePendingApproval)
 	mux.HandleFunc("POST /api/ask", s.handleAskUser)
 	mux.HandleFunc("GET /api/ask/pending", s.handlePendingAskUser)
 	mux.HandleFunc("GET /api/files", s.handleListFiles)
@@ -1267,6 +1268,14 @@ func (s *Server) handleApproval(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, http.StatusOK, map[string]string{"status": "ok"})
 }
 
+// handlePendingApproval returns approval requests still awaiting a decision.
+// The frontend pulls this after rebuilding the timeline (page reload / session
+// resume / WS reconnect) so an in-flight approval is re-attached as a card
+// instead of leaving the agent blocked forever.
+func (s *Server) handlePendingApproval(w http.ResponseWriter, _ *http.Request) {
+	writeJSON(w, http.StatusOK, s.handler.PendingApprovalRequests())
+}
+
 // handleAskUser resolves a pending ask_user request with the user's answers,
 // routed back to the blocked tool via WebHandler.ResolveAskUser. The "answers"
 // array is parallel to the questions the frontend received in ask_user_request:
diff --git a/web/src/App.vue b/web/src/App.vue
index 9f0a8fe..77c2081 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -43,6 +43,12 @@ function openRemoteConnect(prefill?: RemoteMeta & { loadTaskUuid?: string }) {
   remoteWizardOpen.value = true
 }
 provide('openRemoteConnect', openRemoteConnect)
+// Single post-switch handler shared by every local-workspace entry point
+// (ProjectSwitcher via @project-switched, WorkspacePicker via inject) so they
+// can't drift: all reload the full workspace state and restore the target
+// workspace's session, instead of WorkspacePicker landing on a blank welcome
+// while the projects modal restored the session.
+provide('onWorkspaceSwitched', () => onProjectSwitched())
 
 // When the wizard is launched from Settings it stacks ON TOP of the Settings
 // overlay. headlessui treats a click inside the wizard as an "outside" click for
@@ -164,7 +170,16 @@ function handleGlobalKeydown(e: KeyboardEvent) {
     settingsOpen.value = !settingsOpen.value
     return
   }
-  if (e.key === 'Escape' && store.isRunning) {
+  // Esc stops the agent only when no overlay is open — otherwise pressing Esc to
+  // dismiss a dialog (Settings/Projects/Palette/Wizard) would also kill the run.
+  if (
+    e.key === 'Escape' &&
+    store.isRunning &&
+    !settingsOpen.value &&
+    !projectsOpen.value &&
+    !paletteOpen.value &&
+    !remoteWizardOpen.value
+  ) {
     e.preventDefault()
     store.stopAgent()
     return
@@ -191,15 +206,18 @@ function handleGlobalKeydown(e: KeyboardEvent) {
   }
 }
 
-onMounted(async () => {
-  document.addEventListener('keydown', handleGlobalKeydown)
-  ensurePermission()
-  const health = await store.fetchHealth()
-  // Check if setup is needed — health returns needs_setup status
-  if (health?.needs_setup) {
-    needsSetup.value = true
-    return
-  }
+// True when the very first /api/health probe failed — the backend/sidecar isn't
+// reachable yet (common on the desktop shell right after it navigates to the
+// sidecar port). Drives a visible "can't connect" overlay with a Retry button,
+// instead of silently falling through to an empty shell with console errors.
+const connectionError = ref(false)
+const booting = ref(false)
+
+// All the workspace-scoped state that must be (re)loaded on boot, after setup,
+// and on every project switch. Centralized so the three entry points can't drift
+// out of sync (they previously each fetched a different subset, leaving stale
+// models/approval-mode/channel/config after a switch).
+function loadWorkspaceState() {
   store.fetchConfig()
   store.fetchTodos()
   store.fetchGoal()
@@ -212,8 +230,36 @@ onMounted(async () => {
   if (store.pwd) {
     projectStore.ensureCurrentProject(store.pwd)
   }
-  // Restore the current session content if available
-  await store.restoreCurrentSession()
+}
+
+// Initial boot: probe health first. Distinguishes three outcomes —
+// unreachable (show connection error + Retry), needs setup (show wizard), or
+// ready (load everything + restore the session).
+async function boot() {
+  booting.value = true
+  try {
+    const health = await store.fetchHealth()
+    if (!health) {
+      connectionError.value = true
+      return
+    }
+    connectionError.value = false
+    if (health.needs_setup) {
+      needsSetup.value = true
+      return
+    }
+    needsSetup.value = false
+    loadWorkspaceState()
+    await store.restoreCurrentSession()
+  } finally {
+    booting.value = false
+  }
+}
+
+onMounted(async () => {
+  document.addEventListener('keydown', handleGlobalKeydown)
+  ensurePermission()
+  await boot()
 })
 
 onUnmounted(() => {
@@ -279,29 +325,19 @@ watch(() => store.todos.length, (len) => {
 async function onProjectSwitched() {
   await store.fetchHealth()
   store.clearChat()
-  store.fetchTodos()
-  store.fetchGoal()
-  refreshBranch()
-  store.fetchSessions()
+  // Reload the full workspace-scoped state (models/approval-mode/channel/config
+  // included) so switching projects doesn't leave controls on the old project's
+  // values.
+  loadWorkspaceState()
   // Restore the current session for the new project
   await store.restoreCurrentSession()
 }
 
 function onSetupComplete() {
   needsSetup.value = false
-  // Now load everything
-  store.fetchConfig()
-  store.fetchTodos()
-  store.fetchGoal()
-  refreshBranch()
-  store.fetchModels()
-  store.fetchModelState()
-  store.fetchSessions()
-  store.fetchApprovalMode()
-  store.fetchChannelState()
-  if (store.pwd) {
-    projectStore.ensureCurrentProject(store.pwd)
-  }
+  connectionError.value = false
+  // Now load everything (fresh setup → no prior session to restore).
+  loadWorkspaceState()
 }
 
 // Panel resize
@@ -543,6 +579,19 @@ function startResize(e: MouseEvent) {
 
     <!-- Setup overlay — shown when no providers are configured -->
     <SetupView v-if="needsSetup" @complete="onSetupComplete" />
+
+    <!-- Connection-error overlay — the first health probe failed, so the local
+         server isn't reachable. Replaces the old silent fall-through to an empty
+         shell. Retry re-runs the boot sequence. -->
+    <div v-if="connectionError" class="conn-error-overlay">
+      <div class="conn-error-card">
+        <div class="conn-error-title">无法连接到 jcode 服务</div>
+        <div class="conn-error-msg">本地服务可能尚未就绪或已停止。请稍候重试，或退出后重新启动。</div>
+        <button class="conn-error-retry" :disabled="booting" @click="boot">
+          {{ booting ? '正在重试…' : '重试连接' }}
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -550,6 +599,60 @@ function startResize(e: MouseEvent) {
 /* The titlebar-drag strip + macOS top inset live in the GLOBAL style.css
    (Vue's scoped compiler mangles `:global(...) .child` selectors). */
 
+/* Connection-error overlay — full-window, above everything, so a backend that
+   never came up shows an actionable message instead of an empty shell. */
+.conn-error-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal);
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: var(--color-background);
+}
+.conn-error-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  max-width: 420px;
+  text-align: center;
+  padding: 28px 32px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-2xl);
+  box-shadow: var(--shadow-lg);
+}
+.conn-error-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-foreground);
+}
+.conn-error-msg {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--color-muted-foreground);
+}
+.conn-error-retry {
+  margin-top: 4px;
+  padding: 8px 22px;
+  border: none;
+  border-radius: var(--radius-lg);
+  background: var(--color-primary);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.conn-error-retry:hover:not(:disabled) {
+  opacity: 0.9;
+}
+.conn-error-retry:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
 /* The conversation + composer live in one inset surface panel so the chat
    canvas reads as distinct from the sidebar shell, wrapped with breathing room
    above (below the top bar) and below (above the window edge) — 包裹感. */
diff --git a/web/src/components/ApprovalBanner.vue b/web/src/components/ApprovalBanner.vue
index 024871a..ade2480 100644
--- a/web/src/components/ApprovalBanner.vue
+++ b/web/src/components/ApprovalBanner.vue
@@ -112,12 +112,14 @@ function formatArgs(args: string): string {
         >{{ formatArgs(approval.tool_args) }}</pre>
       </div>
 
-      <!-- Buttons: clear 3-tier hierarchy (primary / ghost / quiet) -->
-      <div class="flex gap-1.5 shrink-0 self-end">
+      <!-- Buttons: clear 3-tier hierarchy (primary / ghost / quiet). All disabled
+           while a decision POST is in flight to prevent double-submit. -->
+      <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)"
+          :disabled="approval.resolving"
           @click="store.resolveApproval(approval.id, true, false)"
         >
           Allow once
@@ -127,6 +129,7 @@ function formatArgs(args: string): string {
           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"
+          :disabled="approval.resolving"
           @click="store.resolveApproval(approval.id, true, true)"
         >
           Allow all
@@ -135,6 +138,7 @@ function formatArgs(args: string): string {
           type="button"
           class="approval-deny px-3 py-1.5 text-xs rounded-md transition-colors cursor-pointer font-medium"
           style="background-color: transparent; color: var(--color-muted-foreground)"
+          :disabled="approval.resolving"
           @click="store.resolveApproval(approval.id, false)"
         >
           Deny
@@ -161,6 +165,14 @@ function formatArgs(args: string): string {
   background-color: var(--color-muted) !important;
 }
 
+/* In-flight: dim the button row and block further clicks. */
+.approval-busy {
+  opacity: 0.6;
+}
+.approval-busy button {
+  cursor: progress;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .approval-accent { animation: none !important; }
 }
diff --git a/web/src/components/AskUserCard.vue b/web/src/components/AskUserCard.vue
index eef7013..62317eb 100644
--- a/web/src/components/AskUserCard.vue
+++ b/web/src/components/AskUserCard.vue
@@ -56,8 +56,10 @@ function toggleOption(qi: number, label: string, multi: boolean) {
   if (multi) {
     selections[qi] = cur.includes(label) ? cur.filter((l) => l !== label) : [...cur, label]
   } else {
-    // Single-select: replace, and clear any "Other" free text.
-    selections[qi] = cur.includes(label) ? [] : [label]
+    // Single-select: set this option (idempotent — re-selecting the current one
+    // keeps it, so a repeated keyboard digit or click never clears the choice
+    // and leaves Submit disabled), and clear any "Other" free text.
+    selections[qi] = [label]
     freeText[qi] = ''
   }
 }
@@ -160,6 +162,14 @@ const resolvedAnswers = computed<string[]>(() => {
       style="background: transparent"
       @click="collapsed = false"
     >
+      <!-- Pending indicator so a collapsed card still signals it's awaiting an
+           answer (Skip/Submit live in the expanded view). -->
+      <span
+        v-if="isPending"
+        class="w-1.5 h-1.5 rounded-full shrink-0 animate-pulse"
+        style="background: var(--color-primary)"
+        aria-hidden="true"
+      />
       <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>
@@ -222,7 +232,10 @@ const resolvedAnswers = computed<string[]>(() => {
               <div class="text-sm" style="color: var(--color-foreground)">{{ opt.label }}</div>
               <div v-if="opt.description" class="text-xs mt-0.5" style="color: var(--color-muted-foreground)">{{ opt.description }}</div>
             </div>
+            <!-- Digit hint only for 1–9, which are the keyboard-selectable ones;
+                 showing 10+ would imply a shortcut that doesn't exist. -->
             <span
+              v-if="oi < 9"
               class="shrink-0 text-[10px] font-mono tabular-nums w-4 text-center rounded"
               style="color: var(--color-muted-foreground)"
             >{{ oi + 1 }}</span>
diff --git a/web/src/components/ChatInput.vue b/web/src/components/ChatInput.vue
index 3f6b760..3eeb675 100644
--- a/web/src/components/ChatInput.vue
+++ b/web/src/components/ChatInput.vue
@@ -5,6 +5,7 @@ import { api } from '@/composables/api'
 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'
 
 // Which way the workspace/branch pickers open. The docked composer opens them
@@ -15,6 +16,9 @@ withDefaults(defineProps<{ pickerPlacement?: 'top' | 'bottom' }>(), {
 })
 
 const store = useChatStore()
+// Current git branch (singleton) — used to decide whether the composer's top row
+// is worth showing once the workspace picker is hidden mid-conversation.
+const { current: branchCurrent } = useBranch()
 const input = ref('')
 const textarea = ref<HTMLTextAreaElement | null>(null)
 const showModelPicker = ref(false)
@@ -303,6 +307,30 @@ onUnmounted(() => {
 watch(() => store.isRunning, (running) => {
   if (!running) nextTick(() => textarea.value?.focus())
 })
+
+// Reset all composer-local state when the active session changes (switching
+// sessions / projects). clearChat() only resets store-level state, so without
+// this a half-typed draft, attached images, or an open menu from session A
+// would leak into session B and risk being sent to the wrong conversation.
+watch(() => store.currentSessionId, () => {
+  input.value = ''
+  pendingImages.value = []
+  pendingImagePreviews.value = []
+  showSlashMenu.value = false
+  showModelPicker.value = false
+  showModePicker.value = false
+  showAddMenu.value = false
+  showManageModels.value = false
+})
+
+// If the newly-selected model can't accept images, drop any already-attached
+// ones so they aren't silently sent to (and rejected by) a text-only model.
+watch(() => store.imageSupport, (supported) => {
+  if (!supported && pendingImages.value.length > 0) {
+    pendingImages.value = []
+    pendingImagePreviews.value = []
+  }
+})
 </script>
 
 <template>
@@ -327,11 +355,14 @@ watch(() => store.isRunning, (running) => {
         </div>
 
         <!-- Workspace selector — pick the workspace for this task directly on the
-             composer (replaces opening the projects modal from the sidebar). On
-             the centered new-task screen its menu opens downward; once docked at
-             the bottom during a conversation it opens upward. -->
-        <div class="composer-top">
-          <WorkspacePicker :placement="pickerPlacement" />
+             composer (replaces opening the projects modal from the sidebar). Only
+             on the new-task screen: once a conversation has started the workspace
+             is fixed for that task, so switching it here is meaningless. The
+             branch picker stays (switching branch mid-task is still useful). The
+             whole row is dropped when it would be empty (in a conversation with no
+             git branch) so it leaves no blank gap above the composer. -->
+        <div v-if="!store.hasMessages || branchCurrent" class="composer-top">
+          <WorkspacePicker v-if="!store.hasMessages" :placement="pickerPlacement" />
           <BranchPicker :placement="pickerPlacement" />
         </div>
 
@@ -349,7 +380,7 @@ watch(() => store.isRunning, (running) => {
           <textarea
             ref="textarea"
             v-model="input"
-            :placeholder="store.isRunning ? 'Agent is working…' : store.goalArmed ? 'Describe the goal — the agent pursues it until verifiably complete' : 'Ask JCODE, @agent, or /command'"
+            :placeholder="store.isRunning ? 'Agent is working…' : store.goalArmed ? 'Describe the goal — the agent pursues it until verifiably complete' : 'Ask JCODE or type / for commands'"
             rows="1"
             :disabled="store.isRunning"
             @keydown="handleKeyDown"
diff --git a/web/src/components/CommandPalette.vue b/web/src/components/CommandPalette.vue
index 390b0eb..3390570 100644
--- a/web/src/components/CommandPalette.vue
+++ b/web/src/components/CommandPalette.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue'
+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 { useChatStore } from '@/stores/chat'
-import { useProjectStore } from '@/stores/project'
-import type { TaskItem } from '@/types/api'
+import { useProjectStore, isRemotePath, parseRemoteLabel } from '@/stores/project'
+import type { TaskItem, RemoteMeta } from '@/types/api'
 
 const props = defineProps<{ open: boolean }>()
 const emit = defineEmits<{
@@ -14,10 +14,12 @@ const emit = defineEmits<{
 
 const store = useChatStore()
 const projectStore = useProjectStore()
+const openRemoteConnect = inject<(prefill?: RemoteMeta & { loadTaskUuid?: string }) => void>('openRemoteConnect')
 
 const query = ref('')
 const selectedIdx = ref(0)
 const inputEl = ref<HTMLInputElement | null>(null)
+const resultsEl = ref<HTMLElement | null>(null)
 
 interface PaletteItem {
   id: string
@@ -28,23 +30,43 @@ interface PaletteItem {
   run: () => void | Promise<void>
 }
 
+let opening = false
 async function openTask(task: TaskItem) {
+  // Guard against a double-trigger (held Enter / rapid clicks) interleaving two
+  // project switches + session loads.
+  if (opening) return
+  opening = true
   emit('close')
-  if (task.unread) projectStore.updateTaskMeta(task.uuid, { unread: false })
-  const cur = projectStore.activeProject?.path || store.pwd
-  if (cur !== task.project) {
-    const ok = await projectStore.openProject(task.project)
-    if (!ok) return
-    await store.fetchHealth()
+  try {
+    if (task.unread) projectStore.updateTaskMeta(task.uuid, { unread: false })
+    const cur = projectStore.activeProject?.path || store.pwd
+    // Remote tasks must reconnect through the SSH wizard (mirrors the sidebar) —
+    // a local path switch to an ssh:// label would fail.
+    if (isRemotePath(task.project)) {
+      if (cur === task.project) {
+        await store.loadSession(task.uuid)
+      } else {
+        const meta = parseRemoteLabel(task.project)
+        if (meta) openRemoteConnect?.({ ...meta, loadTaskUuid: task.uuid })
+      }
+      return
+    }
+    if (cur !== task.project) {
+      const ok = await projectStore.openProject(task.project)
+      if (!ok) return
+      await store.fetchHealth()
+    }
+    await store.loadSession(task.uuid)
+  } finally {
+    opening = false
   }
-  await store.loadSession(task.uuid)
 }
 
 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('action', 'theme') } },
+  { id: 'a-theme', group: 'Actions', label: 'Toggle theme', icon: SunMoon, run: () => { emit('close'); emit('action', 'theme') } },
 ])
 
 const taskItems = computed<PaletteItem[]>(() =>
@@ -100,6 +122,11 @@ function move(delta: number) {
   const n = results.value.length
   if (n === 0) return
   selectedIdx.value = (selectedIdx.value + delta + n) % n
+  // Keep the highlighted row visible — the results list scrolls (max-height),
+  // so arrow-key navigation could otherwise move the selection out of view.
+  nextTick(() => {
+    resultsEl.value?.querySelector('.cp-item.sel')?.scrollIntoView({ block: 'nearest' })
+  })
 }
 function runSelected() {
   results.value[selectedIdx.value]?.run()
@@ -141,7 +168,7 @@ function onKeydown(e: KeyboardEvent) {
               <kbd class="cp-esc">Esc</kbd>
             </div>
 
-            <div class="cp-results">
+            <div ref="resultsEl" class="cp-results">
               <div v-if="results.length === 0" class="cp-empty">No results</div>
               <template v-for="g in groups" :key="g.name">
                 <div class="cp-group-label">{{ g.name }}</div>
diff --git a/web/src/components/DiffViewer.vue b/web/src/components/DiffViewer.vue
index d98bdf2..b8c1ec3 100644
--- a/web/src/components/DiffViewer.vue
+++ b/web/src/components/DiffViewer.vue
@@ -20,8 +20,13 @@ async function fetchDiff() {
   try {
     const result = await api.diff(mode.value)
     entries.value = result.entries
-    if (entries.value.length > 0 && !selectedFile.value) {
-      selectedFile.value = entries.value[0]?.file ?? ''
+    // Keep the current selection only if it still exists in the new entry set;
+    // otherwise fall back to the first entry. Without this, switching mode to one
+    // that doesn't contain the previously-selected file left the body blank
+    // ("Select a file…") even though the file list had content.
+    const stillThere = selectedFile.value && entries.value.some((e) => e.file === selectedFile.value)
+    if (!stillThere) {
+      selectedFile.value = entries.value.length > 0 ? (entries.value[0]?.file ?? null) : null
     }
   } catch (err) {
     console.error('Failed to fetch diff:', err)
diff --git a/web/src/components/FileTreePanel.vue b/web/src/components/FileTreePanel.vue
index 774a534..4211a89 100644
--- a/web/src/components/FileTreePanel.vue
+++ b/web/src/components/FileTreePanel.vue
@@ -1,22 +1,25 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, onMounted } from 'vue'
 import { ChevronRight, File, Folder, ArrowLeft } from 'lucide-vue-next'
 import { api } from '@/composables/api'
 import type { FileItem } from '@/types/api'
 import hljs from 'highlight.js'
 
-const props = defineProps<{
-  rootPath?: string
-}>()
-
 const currentPath = ref('')
 const items = ref<FileItem[]>([])
 const loading = ref(false)
 const previewFile = ref<{ path: string; content: string } | null>(null)
 const breadcrumbs = ref<string[]>([])
+// Distinct error states: a directory that failed to load (replaces the list, so
+// it isn't mistaken for an empty folder) vs. a file that failed to open (a
+// dismissable banner above the still-visible listing).
+const dirError = ref('')
+const fileError = ref('')
 
 async function fetchDir(path: string) {
   loading.value = true
+  dirError.value = ''
+  fileError.value = ''
   try {
     items.value = await api.files(path || undefined)
     currentPath.value = path
@@ -24,6 +27,7 @@ async function fetchDir(path: string) {
   } catch (err) {
     console.error('Failed to fetch files:', err)
     items.value = []
+    dirError.value = '无法加载此目录。'
   } finally {
     loading.value = false
   }
@@ -35,11 +39,14 @@ async function openItem(item: FileItem) {
     await fetchDir(newPath)
   } else {
     const filePath = currentPath.value ? `${currentPath.value}/${item.name}` : item.name
+    fileError.value = ''
     try {
       const result = await api.fileContent(filePath)
       previewFile.value = result
     } catch (err) {
       console.error('Failed to fetch file content:', err)
+      // Don't fail silently — tell the user the click didn't no-op.
+      fileError.value = `无法打开 ${item.name}（可能是二进制文件、过大或权限不足）。`
     }
   }
 }
@@ -85,10 +92,10 @@ function formatSize(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
 }
 
-watch(() => props.rootPath, () => {
-  previewFile.value = null
-  fetchDir(props.rootPath || '')
-}, { immediate: true })
+// Initial load of the workspace root. The panel is keyed on the active workspace
+// by its parent (RightPanel), so a project switch remounts it and this runs
+// again against the new server cwd.
+onMounted(() => fetchDir(''))
 </script>
 
 <template>
@@ -123,7 +130,9 @@ watch(() => props.rootPath, () => {
     <!-- Directory listing -->
     <div v-else class="file-list">
       <div v-if="loading" class="loading-state">Loading…</div>
+      <div v-else-if="dirError" class="error-state">{{ dirError }}</div>
       <template v-else>
+        <div v-if="fileError" class="file-error">{{ fileError }}</div>
         <button
           v-for="item in items"
           :key="item.name"
@@ -135,7 +144,7 @@ watch(() => props.rootPath, () => {
           <span class="item-name">{{ item.name }}</span>
           <span v-if="!item.is_dir" class="item-size">{{ formatSize(item.size) }}</span>
         </button>
-        <div v-if="items.length === 0 && !loading" class="empty-state">
+        <div v-if="items.length === 0" class="empty-state">
           Empty directory
         </div>
       </template>
@@ -287,4 +296,22 @@ watch(() => props.rootPath, () => {
   font-size: 12px;
   color: var(--color-muted-foreground);
 }
+
+.error-state {
+  padding: 24px 12px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--color-error-fg);
+}
+
+.file-error {
+  margin: 6px 8px;
+  padding: 6px 8px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-error-fg);
+  background: var(--color-error-bg);
+  color: var(--color-error-fg);
+  font-size: 11px;
+  line-height: 1.4;
+}
 </style>
diff --git a/web/src/components/GoalBanner.vue b/web/src/components/GoalBanner.vue
index cc18c26..defc447 100644
--- a/web/src/components/GoalBanner.vue
+++ b/web/src/components/GoalBanner.vue
@@ -18,6 +18,20 @@ const statusColor = computed(() => {
   }
 })
 
+// Human-readable status — the raw enum (e.g. 'in_progress') would render with an
+// underscore. Falls back to a de-underscored form for any unmapped value.
+const statusLabel = computed(() => {
+  const s = goal.value?.status || ''
+  const map: Record<string, string> = {
+    active: 'Active',
+    in_progress: 'In progress',
+    complete: 'Completed',
+    completed: 'Completed',
+    blocked: 'Blocked',
+  }
+  return map[s] || s.replace(/_/g, ' ')
+})
+
 const tokensLabel = computed(() => {
   if (!goal.value) return ''
   const used = goal.value.tokens_used ?? 0
@@ -38,7 +52,7 @@ const tokensLabel = computed(() => {
     <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 }">
-          {{ goal.status }}
+          {{ statusLabel }}
         </span>
         <span v-if="tokensLabel" class="text-[10px]" style="color: var(--color-muted-foreground)">
           {{ tokensLabel }}
diff --git a/web/src/components/MCPPanel.vue b/web/src/components/MCPPanel.vue
deleted file mode 100644
index 230fd77..0000000
--- a/web/src/components/MCPPanel.vue
+++ /dev/null
@@ -1,200 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { Globe, Zap, RefreshCw } from 'lucide-vue-next'
-import { api } from '@/composables/api'
-import type { MCPServerInfo } from '@/types/api'
-
-const servers = ref<Record<string, MCPServerInfo>>({})
-const loading = ref(false)
-
-async function fetchMCP() {
-  loading.value = true
-  try {
-    const result = await api.mcpList()
-    servers.value = result.servers
-  } catch (err) {
-    console.error('Failed to fetch MCP servers:', err)
-  } finally {
-    loading.value = false
-  }
-}
-
-async function toggleServer(name: string, enabled: boolean) {
-  try {
-    await api.mcpToggle(name, enabled)
-    if (!enabled) {
-      delete servers.value[name]
-    }
-  } catch (err) {
-    console.error('Failed to toggle MCP server:', err)
-  }
-}
-
-function isNetworked(type: string) {
-  return type === 'sse' || type === 'http'
-}
-
-onMounted(fetchMCP)
-</script>
-
-<template>
-  <div class="mcp-panel">
-    <!-- Header -->
-    <div class="mcp-head">
-      <span class="mcp-title">MCP Servers</span>
-      <button class="mcp-refresh" @click="fetchMCP">
-        <RefreshCw :size="13" /> Refresh
-      </button>
-    </div>
-
-    <!-- Server list -->
-    <div class="mcp-list">
-      <div v-if="loading" class="mcp-state animate-pulse">Loading…</div>
-
-      <div v-else-if="Object.keys(servers).length === 0" class="mcp-empty">
-        <div class="mcp-empty-title">No MCP servers configured</div>
-        <div class="mcp-empty-hint">
-          Add servers to <span class="font-mono">~/.jcode/config.json</span>
-        </div>
-      </div>
-
-      <div v-for="(info, name) in servers" :key="name" class="mcp-card">
-        <component :is="isNetworked(info.type) ? Globe : Zap" :size="16" class="mcp-icon" />
-        <div class="flex-1 min-w-0">
-          <div class="mcp-name">{{ name }}</div>
-          <div class="mcp-detail">
-            {{ isNetworked(info.type) ? info.url : info.command }}
-          </div>
-        </div>
-        <div class="flex items-center gap-2 shrink-0">
-          <span class="mcp-badge" :class="info.status === 'configured' ? 'ok' : 'muted'">
-            {{ info.status }}
-          </span>
-          <button class="mcp-toggle" @click="toggleServer(String(name), false)" title="Disable server">
-            <span class="mcp-knob" />
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.mcp-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.mcp-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--color-border);
-}
-.mcp-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--color-foreground);
-}
-.mcp-refresh {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--color-muted-foreground);
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  transition: color 0.15s;
-}
-.mcp-refresh:hover {
-  color: var(--color-foreground);
-}
-.mcp-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.mcp-state,
-.mcp-empty {
-  text-align: center;
-  font-size: 12px;
-  color: var(--color-muted-foreground);
-  padding: 24px 0;
-}
-.mcp-empty-title {
-  margin-bottom: 4px;
-}
-.mcp-empty-hint {
-  font-size: 10px;
-  color: var(--color-text-muted, var(--color-muted-foreground));
-}
-.mcp-card {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border);
-  background: var(--color-surface);
-  transition: border-color 0.15s;
-}
-.mcp-card:hover {
-  border-color: color-mix(in srgb, var(--color-foreground) 24%, transparent);
-}
-.mcp-icon {
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-.mcp-name {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--color-foreground);
-}
-.mcp-detail {
-  font-size: 10px;
-  font-family: var(--font-mono);
-  color: var(--color-muted-foreground);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.mcp-badge {
-  font-size: 10px;
-  padding: 2px 7px;
-  border-radius: var(--radius-pill);
-}
-.mcp-badge.ok {
-  background: var(--color-success-bg);
-  color: var(--color-success-fg);
-}
-.mcp-badge.muted {
-  background: var(--color-muted);
-  color: var(--color-muted-foreground);
-}
-.mcp-toggle {
-  width: 32px;
-  height: 18px;
-  border-radius: var(--radius-pill);
-  position: relative;
-  cursor: pointer;
-  border: none;
-  background: var(--color-success);
-  transition: background 0.15s;
-}
-.mcp-knob {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: #fff;
-  box-shadow: var(--shadow-sm);
-}
-</style>
diff --git a/web/src/components/ProjectSwitcher.vue b/web/src/components/ProjectSwitcher.vue
index daa7f55..bdfea3f 100644
--- a/web/src/components/ProjectSwitcher.vue
+++ b/web/src/components/ProjectSwitcher.vue
@@ -2,6 +2,7 @@
 import { watch, computed, inject } from 'vue'
 import { useProjectStore, parseRemoteLabel } from '@/stores/project'
 import { useFolderBrowser } from '@/composables/useFolderBrowser'
+import { isTauri, pickFolder } from '@/composables/useDesktop'
 import type { RemoteMeta } from '@/types/api'
 import {
   Dialog,
@@ -55,6 +56,24 @@ function selectCurrentPath() {
   })
 }
 
+// "Open Folder": on the desktop use the native OS picker (same as the composer's
+// WorkspacePicker); in the browser, or if the native picker is unavailable, fall
+// back to the in-app folder browser.
+async function openFolderAction() {
+  if (isTauri) {
+    try {
+      const path = await pickFolder()
+      if (!path) return // cancelled
+      const ok = await projectStore.openProject(path)
+      if (ok) { emit('close'); emit('projectSwitched') }
+      return
+    } catch {
+      /* native picker unavailable → in-app browser */
+    }
+  }
+  openBrowser()
+}
+
 async function selectProject(id: string) {
   const project = projectStore.projects.find((p) => p.id === id)
   // Remote workspaces are reconnected through the SSH wizard, not a local switch.
@@ -232,7 +251,7 @@ function deleteProject(id: string) {
                   <button
                     class="text-xs cursor-pointer transition-opacity hover:opacity-80 font-medium"
                     style="color: var(--color-primary)"
-                    @click="openBrowser"
+                    @click="openFolderAction"
                   >
                     + Open Folder
                   </button>
diff --git a/web/src/components/RemoteConnectWizard.vue b/web/src/components/RemoteConnectWizard.vue
index 4c302ac..f022f1e 100644
--- a/web/src/components/RemoteConnectWizard.vue
+++ b/web/src/components/RemoteConnectWizard.vue
@@ -313,6 +313,11 @@ function close() {
         <div class="fixed inset-0" style="background: var(--backdrop); backdrop-filter: blur(6px)" />
       </TransitionChild>
 
+      <!-- Native title-bar drag strip — the blurred backdrop covers the shell's
+           own drag band, so without this the macOS window can't be dragged while
+           the wizard is open. Rendered only inside is-tauri-macos. -->
+      <div class="titlebar-drag" data-tauri-drag-region aria-hidden="true" />
+
       <div class="fixed inset-0 flex items-center justify-center p-4">
         <TransitionChild
           enter="ease-out duration-150" enter-from="opacity-0 translate-y-2" enter-to="opacity-100 translate-y-0"
diff --git a/web/src/components/RightPanel.vue b/web/src/components/RightPanel.vue
index ac5140f..db9159f 100644
--- a/web/src/components/RightPanel.vue
+++ b/web/src/components/RightPanel.vue
@@ -73,8 +73,11 @@ function startResize(e: MouseEvent) {
       </button>
     </div>
     <div class="panel-content">
-      <FileTreePanel v-if="activeTab === 'files'" />
-      <DiffViewer v-else-if="activeTab === 'changes'" />
+      <!-- Keyed on the active workspace so switching projects remounts these and
+           re-fetches: both only load on mount, so without the key the Files tree
+           and Changes diff would keep showing the previous project's content. -->
+      <FileTreePanel v-if="activeTab === 'files'" :key="store.pwd" />
+      <DiffViewer v-else-if="activeTab === 'changes'" :key="store.pwd" />
       <div v-else class="plan-pane">
         <div class="plan-head">
           <span class="plan-title">Plan</span>
diff --git a/web/src/components/SettingsDialog.vue b/web/src/components/SettingsDialog.vue
index bc97c75..b8550bc 100644
--- a/web/src/components/SettingsDialog.vue
+++ b/web/src/components/SettingsDialog.vue
@@ -91,6 +91,7 @@ watch(() => props.open, async (isOpen) => {
   if (isOpen) {
     mcpEditing.value = null
     mcpLoginMessage.value = ''
+    mcpLoginMessageFor.value = ''
     await loadMCP()
     loadSkills()
 
@@ -117,9 +118,24 @@ watch(() => props.open, async (isOpen) => {
     deleteConfirmId.value = ''
     mcpEditing.value = null
     stopLoginPoll()
+    stopChannelPoll()
   }
 })
 
+// Switching sections abandons any in-progress sub-flow on the previous tab —
+// otherwise a half-filled MCP/provider form, an open delete confirmation, or a
+// stale login/poll from one tab would linger when the user navigates to another.
+watch(activeTab, () => {
+  mcpEditing.value = null
+  showAddProvider.value = false
+  addError.value = ''
+  deleteConfirmId.value = ''
+  mcpLoginMessage.value = ''
+  mcpLoginMessageFor.value = ''
+  stopLoginPoll()
+  stopChannelPoll()
+})
+
 async function loadMCP() {
   mcpLoading.value = true
   try {
@@ -297,6 +313,7 @@ async function deleteMCP(name: string) {
 // --- MCP OAuth login ---
 const mcpLoginBusy = ref('')      // server name currently logging in
 const mcpLoginMessage = ref('')   // status text shown under the row
+const mcpLoginMessageFor = ref('') // which server the message belongs to
 let loginPollTimer: ReturnType<typeof setInterval> | null = null
 
 function stopLoginPoll() {
@@ -305,11 +322,13 @@ function stopLoginPoll() {
 
 async function loginMCP(name: string) {
   mcpLoginBusy.value = name
+  mcpLoginMessageFor.value = name
   mcpLoginMessage.value = 'Opening browser — complete authorization, then return here…'
   try {
     await api.mcpLogin(name)
   } catch (err) {
     mcpLoginMessage.value = err instanceof Error ? err.message : 'Login failed'
+    mcpLoginMessageFor.value = name
     mcpLoginBusy.value = ''
     return
   }
@@ -321,21 +340,24 @@ async function loginMCP(name: string) {
         stopLoginPoll()
         mcpLoginBusy.value = ''
         mcpLoginMessage.value = ''
+        mcpLoginMessageFor.value = ''
         await loadMCP()
       } else if (st.status === 'error') {
         stopLoginPoll()
         mcpLoginBusy.value = ''
+        mcpLoginMessageFor.value = name
         mcpLoginMessage.value = st.message || 'Login failed'
       } else if (st.status === 'needs_client_id') {
         stopLoginPoll()
         mcpLoginBusy.value = ''
+        mcpLoginMessageFor.value = name
         mcpLoginMessage.value = 'This server does not support automatic registration. Edit it and set an OAuth Client ID, then log in again.'
       }
     } catch { /* keep polling */ }
   }, 1500)
 }
 
-onUnmounted(stopLoginPoll)
+onUnmounted(() => { stopLoginPoll(); stopChannelPoll() })
 
 // --- Skills ---
 const skills = ref<SkillInfo[]>([])
@@ -420,9 +442,18 @@ async function channelLogout() {
   channelLoading.value = false
 }
 
+let channelPollInterval: ReturnType<typeof setInterval> | null = null
+let channelPollTimeout: ReturnType<typeof setTimeout> | null = null
+
+function stopChannelPoll() {
+  if (channelPollInterval) { clearInterval(channelPollInterval); channelPollInterval = null }
+  if (channelPollTimeout) { clearTimeout(channelPollTimeout); channelPollTimeout = null }
+}
+
 function pollChannelState() {
+  stopChannelPoll()
   const previousState = channelState.value
-  const interval = setInterval(async () => {
+  channelPollInterval = setInterval(async () => {
     try {
       const ch = await api.channelStatus()
       if (ch.state === 'enabled' || ch.state === 'disabled') {
@@ -434,11 +465,12 @@ function pollChannelState() {
         if (ch.state === 'enabled' && previousState === 'scanning') {
           channelLoginReminder.value = true
         }
-        clearInterval(interval)
+        stopChannelPoll()
       }
     } catch { /* ignore */ }
   }, 2000)
-  setTimeout(() => clearInterval(interval), 180000)
+  // Safety cap: stop after 3 min even if the state never resolves.
+  channelPollTimeout = setTimeout(stopChannelPoll, 180000)
 }
 
 const tabLabel: Record<string, string> = {
@@ -1098,7 +1130,7 @@ const addProviderInfo = () => addProviderList.value.find(p => p.id === addSelect
                         <span v-if="info.has_auth" class="text-[10px]" style="color: var(--color-success-fg)">Authenticated</span>
                       </div>
                       <div v-if="mcpLoginBusy === name && mcpLoginMessage" class="mt-1 text-[10px]" style="color: var(--color-muted-foreground)">{{ mcpLoginMessage }}</div>
-                      <div v-else-if="mcpLoginMessage && !mcpLoginBusy" class="mt-1 text-[10px]" style="color: var(--color-warning-fg)">{{ mcpLoginMessage }}</div>
+                      <div v-else-if="mcpLoginMessageFor === name && mcpLoginMessage && !mcpLoginBusy" class="mt-1 text-[10px]" style="color: var(--color-warning-fg)">{{ mcpLoginMessage }}</div>
                       <div v-if="info.error" class="mt-1 text-[10px] font-mono" style="color: var(--color-error-fg)">{{ info.error }}</div>
                     </div>
                   </div>
diff --git a/web/src/components/SetupView.vue b/web/src/components/SetupView.vue
index c783410..d0da1e6 100644
--- a/web/src/components/SetupView.vue
+++ b/web/src/components/SetupView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { useChatStore } from '@/stores/chat'
 import { api } from '@/composables/api'
 import type { SetupProvider, SetupModel } from '@/types/api'
@@ -50,39 +50,56 @@ const selectedProviderInfo = computed(() =>
   providers.value.find(p => p.id === selectedProvider.value)
 )
 
-onMounted(async () => {
+// Provider list loader — named so the provider step can offer a Retry when the
+// first attempt fails (e.g. the sidecar wasn't ready yet). Without a retry path,
+// a transient failure here would strand first-run setup until a full restart.
+async function loadProviders() {
   loading.value = true
+  error.value = ''
   try {
     providers.value = await api.setupProviders()
   } catch {
     error.value = 'Failed to load providers'
   }
   loading.value = false
-})
+}
+onMounted(loadProviders)
 
-async function selectProvider(id: string) {
-  selectedProvider.value = id
+// Model list loader for the currently-selected provider — retryable from the
+// model step.
+async function loadModels() {
   loading.value = true
   error.value = ''
+  models.value = []
   try {
-    models.value = await api.setupProviderModels(id)
-    step.value = 'model'
-    modelSearch.value = ''
+    models.value = await api.setupProviderModels(selectedProvider.value)
   } catch {
     error.value = 'Failed to load models'
   }
   loading.value = false
 }
 
+async function selectProvider(id: string) {
+  // Switching to a different provider invalidates any key/base-url/validation
+  // entered for the previous one — clear them so provider A's secret can't leak
+  // into provider B's form and get submitted to B's endpoint.
+  if (id !== selectedProvider.value) {
+    apiKey.value = ''
+    baseURL.value = ''
+    showApiKey.value = false
+    validationResult.value = null
+  }
+  selectedProvider.value = id
+  modelSearch.value = ''
+  // Advance to the model step regardless, so a load failure shows there with a
+  // Retry (instead of silently keeping the user on the provider step).
+  step.value = 'model'
+  await loadModels()
+}
+
 function selectModel(id: string) {
   selectedModel.value = id
   step.value = 'apikey'
-  // Auto-fill base URL from provider info if available
-  const prov = selectedProviderInfo.value
-  if (prov?.api && !baseURL.value) {
-    baseURL.value = ''
-    // Don't auto-fill, the backend will use the default
-  }
 }
 
 function goBack() {
@@ -92,12 +109,24 @@ function goBack() {
     step.value = 'provider'
     selectedProvider.value = ''
     models.value = []
+    // Also clear the api-key step fields so a different provider chosen next
+    // doesn't inherit the previous one's key/base URL.
+    apiKey.value = ''
+    baseURL.value = ''
+    showApiKey.value = false
   } else if (step.value === 'apikey') {
     step.value = 'model'
     selectedModel.value = ''
   }
 }
 
+// A validated "Connected" / "Failed" result only describes the key+base-URL that
+// were tested. Once the user edits either, drop the stale result so the UI never
+// shows a green "Connected" for a now-different (possibly broken) key.
+watch([apiKey, baseURL], () => {
+  validationResult.value = null
+})
+
 async function validateConnection() {
   if (!apiKey.value.trim()) return
   validating.value = true
@@ -149,6 +178,11 @@ function finish() {
   <!-- Onboarding is a full-page, framed window so first-run matches the app's
        enclosed look and brand palette (orange), not a one-off green theme. -->
   <div class="setup-viewport" style="z-index: var(--z-modal)">
+    <!-- Native title-bar drag strip — the setup overlay sits above .app-shell and
+         covers the shell's own drag band, so on the macOS desktop shell the window
+         would otherwise be undraggable during first-run. Rendered (via global CSS)
+         only inside is-tauri-macos; a no-op element elsewhere. -->
+    <div class="titlebar-drag" data-tauri-drag-region aria-hidden="true" />
     <div class="setup-frame">
       <div class="w-full max-w-lg mx-auto px-6">
         <!-- Logo -->
@@ -208,6 +242,10 @@ function finish() {
             />
 
             <div v-if="loading" class="text-center py-8 text-sm animate-pulse" style="color: var(--color-muted-foreground)">Loading providers...</div>
+            <div v-else-if="error" class="text-center py-8">
+              <div class="text-sm mb-3" style="color: var(--color-error-fg)">{{ error }}</div>
+              <button class="setup-retry px-4 py-1.5 text-xs rounded-lg cursor-pointer font-medium" @click="loadProviders">Retry</button>
+            </div>
             <div v-else-if="filteredProviders.length === 0" class="text-center py-8 text-sm" style="color: var(--color-muted-foreground)">No providers found</div>
             <div v-else class="space-y-1.5 max-h-72 overflow-y-auto pr-1">
               <button
@@ -255,6 +293,10 @@ function finish() {
             />
 
             <div v-if="loading" class="text-center py-8 text-sm animate-pulse" style="color: var(--color-muted-foreground)">Loading models...</div>
+            <div v-else-if="error" class="text-center py-8">
+              <div class="text-sm mb-3" style="color: var(--color-error-fg)">{{ error }}</div>
+              <button class="setup-retry px-4 py-1.5 text-xs rounded-lg cursor-pointer font-medium" @click="loadModels">Retry</button>
+            </div>
             <div v-else-if="filteredModels.length === 0" class="text-center py-8 text-sm" style="color: var(--color-muted-foreground)">No models found</div>
             <div v-else class="space-y-1 max-h-72 overflow-y-auto pr-1">
               <button
@@ -397,6 +439,15 @@ function finish() {
   overflow: auto;
 }
 
+.setup-retry {
+  background: var(--color-primary);
+  color: var(--color-on-primary, #fff);
+  transition: opacity 0.15s;
+}
+.setup-retry:hover {
+  opacity: 0.9;
+}
+
 .setup-input {
   background: var(--color-background);
   border: 1px solid var(--color-border);
diff --git a/web/src/components/Sidebar.vue b/web/src/components/Sidebar.vue
index 45539bd..91bdcf1 100644
--- a/web/src/components/Sidebar.vue
+++ b/web/src/components/Sidebar.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
-import { ref, computed, onMounted, watch, inject } from 'vue'
+import { ref, computed, onMounted, watch, nextTick, inject } from 'vue'
 import {
   Menu as HMenu,
   MenuButton,
@@ -142,13 +142,33 @@ async function handleDelete(task: TaskItem) {
   await refresh()
 }
 
+// Inline rename — window.prompt is unreliable in the Tauri webview (can return
+// null, silently no-op) and looks non-native, so edit the title in place.
+const renamingUuid = ref('')
+const renameValue = ref('')
+const renameInput = ref<HTMLInputElement | null>(null)
+
 async function renameTask(task: TaskItem) {
-  const title = window.prompt('Rename task', task.title || '')
-  if (title != null && title.trim()) {
-    await projectStore.updateTaskMeta(task.uuid, { title: title.trim() })
+  renamingUuid.value = task.uuid
+  renameValue.value = task.title || ''
+  await nextTick()
+  renameInput.value?.focus()
+  renameInput.value?.select()
+}
+
+async function commitRename(task: TaskItem) {
+  if (renamingUuid.value !== task.uuid) return
+  const title = renameValue.value.trim()
+  renamingUuid.value = ''
+  if (title && title !== (task.title || '')) {
+    await projectStore.updateTaskMeta(task.uuid, { title })
   }
 }
 
+function cancelRename() {
+  renamingUuid.value = ''
+}
+
 function taskTitle(t: TaskItem): string {
   return t.title || t.uuid.slice(0, 8) + '…'
 }
@@ -182,6 +202,17 @@ function relativeTime(ts: string): string {
     <div class="tree">
       <div class="tree-head">
         <span class="tree-label">Workspace</span>
+        <div class="tree-head-actions">
+          <button
+            class="tree-icon-btn"
+            :class="{ on: showArchived }"
+            :title="showArchived ? 'Hide archived tasks' : 'Show archived tasks'"
+            :aria-pressed="showArchived"
+            @click="showArchived = !showArchived"
+          >
+            <Archive :size="14" />
+          </button>
+        </div>
       </div>
 
       <div v-if="projectNodes.length === 0" class="empty-state">No projects yet</div>
@@ -205,7 +236,17 @@ function relativeTime(ts: string): string {
           >
             <span class="task-dot" :class="{ unread: task.unread }" aria-hidden="true" />
             <Pin v-if="task.pinned" :size="11" class="task-pin" />
-            <span class="task-title">{{ taskTitle(task) }}</span>
+            <input
+              v-if="renamingUuid === task.uuid"
+              :ref="el => { renameInput = el as HTMLInputElement | null }"
+              v-model="renameValue"
+              class="task-rename"
+              @click.stop
+              @keydown.enter.stop.prevent="commitRename(task)"
+              @keydown.esc.stop.prevent="cancelRename"
+              @blur="commitRename(task)"
+            />
+            <span v-else class="task-title">{{ taskTitle(task) }}</span>
             <span class="task-time">{{ relativeTime(task.created_at) }}</span>
 
             <HMenu as="div" class="task-menu" @click.stop>
@@ -469,6 +510,18 @@ function relativeTime(ts: string): string {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.task-rename {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  font-family: inherit;
+  color: var(--color-foreground);
+  background: var(--color-background);
+  border: 1px solid var(--color-primary);
+  border-radius: var(--radius-sm);
+  padding: 1px 5px;
+  outline: none;
+}
 .task-time {
   font-size: 10px;
   font-family: var(--font-mono);
diff --git a/web/src/components/TerminalPanel.vue b/web/src/components/TerminalPanel.vue
index 6904b4c..0ae662d 100644
--- a/web/src/components/TerminalPanel.vue
+++ b/web/src/components/TerminalPanel.vue
@@ -50,18 +50,26 @@ function closeTab(id: string) {
     >
       <!-- Tabs -->
       <div class="flex items-center gap-0.5 h-full flex-1 min-w-0 overflow-x-auto">
-        <button
+        <!-- Tab is a role=button div (not a <button>) so the close control can be
+             a real nested <button> without invalid button-in-button nesting. -->
+        <div
           v-for="tab in tabs"
           :key="tab.id"
           class="tab-btn"
           :class="{ 'tab-active': tab.id === activeId }"
+          role="button"
+          tabindex="0"
+          :aria-pressed="tab.id === activeId"
+          :aria-label="tab.label"
           @click="activeId = tab.id"
+          @keydown.enter="activeId = tab.id"
+          @keydown.space.prevent="activeId = tab.id"
         >
-          <!-- × on the left of the label, appears on hover -->
+          <!-- × on the left of the label; keyboard-reachable (no tabindex=-1) and
+               revealed on focus-within so it's usable without a mouse. -->
           <button
             class="tab-close"
             :aria-label="`Close ${tab.label}`"
-            tabindex="-1"
             @click.stop="closeTab(tab.id)"
             @keydown.enter.stop.prevent="closeTab(tab.id)"
             @keydown.space.stop.prevent="closeTab(tab.id)"
@@ -71,7 +79,7 @@ function closeTab(id: string) {
             </svg>
           </button>
           <span class="tab-label">{{ tab.label }}</span>
-        </button>
+        </div>
 
         <!-- + New terminal after the last tab -->
         <button class="ctrl-btn" title="New terminal" @click="addTab">
@@ -149,12 +157,15 @@ function closeTab(id: string) {
   pointer-events: none;
   transition: opacity 0.1s, background 0.1s;
 }
-/* Show × when hovering the tab or for the active tab */
-.tab-btn:hover .tab-close {
+/* Show × when hovering the tab, focusing within it (keyboard), or for the
+   active tab — so keyboard users can reach and trigger it. */
+.tab-btn:hover .tab-close,
+.tab-btn:focus-within .tab-close {
   opacity: 0.6;
   pointer-events: auto;
 }
-.tab-btn:hover .tab-close:hover {
+.tab-btn:hover .tab-close:hover,
+.tab-close:focus-visible {
   opacity: 1;
   background: color-mix(in srgb, var(--color-foreground) 15%, transparent);
 }
diff --git a/web/src/components/ToolCallCard.vue b/web/src/components/ToolCallCard.vue
index c407d06..efc2756 100644
--- a/web/src/components/ToolCallCard.vue
+++ b/web/src/components/ToolCallCard.vue
@@ -378,8 +378,13 @@ function formatArgs(args: string): string {
           <span v-if="diffData.deleted" style="color: var(--color-error-fg)">-{{ diffData.deleted }}</span>
         </span>
       </div>
-      <!-- Content box: only content gets the border -->
+      <!-- Content box: only content gets the border. data-selectable opts the
+           tool output (terminal/file/diff/search/generic) back into text
+           selection inside the desktop shell, where .app-shell sets
+           user-select:none — otherwise the most copy-worthy content (command
+           output, file contents, grep hits) couldn't be selected. -->
       <div
+        data-selectable
         class="overflow-hidden ml-0 mr-2 mt-1.5 mb-1.5"
         :style="{ borderRadius: 'var(--radius-xl)', border: tool.status === 'error' ? '1px solid var(--color-destructive)' : '1px solid var(--color-border)' }"
       >
diff --git a/web/src/components/TopBar.vue b/web/src/components/TopBar.vue
index 5d8b3ac..a86f2a1 100644
--- a/web/src/components/TopBar.vue
+++ b/web/src/components/TopBar.vue
@@ -24,6 +24,11 @@ function isCurrent(panel: PanelType): boolean {
   return props.activePanel === panel
 }
 
+// Dot colour and label share the same priority order (running > connected >
+// disconnected) so they never disagree — previously the colour led with
+// isRunning while the label led with wsConnected, so a running+connected agent
+// showed an orange "Running" dot but a "Connected" tooltip, and the 'Running'
+// label was effectively dead (running always implies connected).
 const statusColor = computed(() => {
   if (props.isRunning) return 'var(--color-primary)'
   if (props.wsConnected) return 'var(--color-success)'
@@ -31,8 +36,8 @@ const statusColor = computed(() => {
 })
 
 const statusLabel = computed(() => {
-  if (props.wsConnected) return 'Connected'
   if (props.isRunning) return 'Running'
+  if (props.wsConnected) return 'Connected'
   return 'Disconnected'
 })
 
@@ -79,7 +84,8 @@ watch(
       <MenuButton
         class="panel-menu-btn"
         :class="{ open }"
-        aria-label="Open panel"
+        :aria-label="`Panels menu · ${statusLabel}`"
+        :aria-expanded="open"
         :title="`Panels · ${statusLabel}`"
         @click="loadDiffStat"
       >
diff --git a/web/src/components/WorkspacePicker.vue b/web/src/components/WorkspacePicker.vue
index 5ab4bbb..8bb8786 100644
--- a/web/src/components/WorkspacePicker.vue
+++ b/web/src/components/WorkspacePicker.vue
@@ -28,8 +28,16 @@ const projectStore = useProjectStore()
 
 // Provided by App: opens the SSH wizard, optionally prefilled for a reconnect.
 const openRemoteConnect = inject<(prefill?: RemoteMeta & { loadTaskUuid?: string }) => void>('openRemoteConnect')
+// Provided by App: the unified post-switch handler (reload workspace state +
+// restore the target session). Used so this inline picker behaves identically to
+// the projects modal instead of landing on a blank welcome.
+const onWorkspaceSwitched = inject<() => Promise<void> | void>('onWorkspaceSwitched')
 
 const query = ref('')
+// Inline error surfaced when a workspace switch fails — without this the picker
+// would close (or do nothing) silently, unlike ProjectSwitcher which shows a
+// red error row. Cleared on every new attempt.
+const switchErr = ref('')
 
 const activePath = computed(() => projectStore.activeProject?.path || store.pwd)
 const activeIsRemote = computed(() => isRemotePath(activePath.value))
@@ -65,9 +73,21 @@ const {
 } = useFolderBrowser()
 
 async function applyLocalSwitch(path: string, close: () => void) {
+  // Guard empty path (browser may not have loaded a folder yet) — matches
+  // ProjectSwitcher's `if (!browsePath.value) return`; otherwise we'd open a
+  // bogus empty-path project.
+  if (!path) return
+  switchErr.value = ''
   const ok = await projectStore.openProject(path)
-  if (!ok) return
-  await store.resetToWelcomeAfterSwitch()
+  if (!ok) {
+    // Keep the panel open and show why, instead of failing silently.
+    switchErr.value = projectStore.switchError || 'Failed to open workspace'
+    return
+  }
+  // Route through the same post-switch handler the projects modal uses, so both
+  // entry points reload identically and restore the target workspace's session.
+  if (onWorkspaceSwitched) await onWorkspaceSwitched()
+  else await store.resetToWelcomeAfterSwitch()
   reset()
   close()
 }
@@ -95,8 +115,14 @@ async function pickWorkspace(node: { id: string; path: string }, close: () => vo
 // browser, fall back to the in-app folder browser sub-view.
 async function openFolderAction(close: () => void) {
   if (isTauri) {
-    const path = await pickFolder(activePath.value || undefined)
-    if (path) await applyLocalSwitch(path, close)
+    try {
+      const path = await pickFolder(activePath.value || undefined)
+      // null = user cancelled the native dialog → do nothing.
+      if (path) await applyLocalSwitch(path, close)
+    } catch {
+      // Native picker unavailable (e.g. dialog plugin missing) → in-app browser.
+      openBrowser()
+    }
     return
   }
   openBrowser()
@@ -111,6 +137,7 @@ function openRemote(close: () => void) {
 function reset() {
   resetBrowser()
   query.value = ''
+  switchErr.value = ''
 }
 
 </script>
@@ -173,9 +200,10 @@ function reset() {
               <span class="ws-row-name">{{ folder.name }}</span>
             </button>
           </div>
+          <div v-if="switchErr" class="ws-error">{{ switchErr }}</div>
           <div class="ws-browser-foot">
             <span class="ws-cur-path">{{ browsePath || '~' }}</span>
-            <button class="ws-open-btn" @click="applyLocalSwitch(browsePath, close)">Open</button>
+            <button class="ws-open-btn" :disabled="!browsePath" @click="applyLocalSwitch(browsePath, close)">Open</button>
           </div>
         </div>
 
@@ -201,6 +229,7 @@ function reset() {
             </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>
@@ -480,9 +509,27 @@ function reset() {
   cursor: pointer;
   transition: opacity 0.15s;
 }
-.ws-open-btn:hover {
+.ws-open-btn:hover:not(:disabled) {
   opacity: 0.9;
 }
+.ws-open-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* Inline switch-failure message — mirrors ProjectSwitcher's error row. */
+.ws-error {
+  flex-shrink: 0;
+  margin: 4px 2px 0;
+  padding: 6px 8px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-error-fg);
+  background: var(--color-error-bg);
+  color: var(--color-error-fg);
+  font-size: 11.5px;
+  line-height: 1.35;
+  word-break: break-word;
+}
 
 /* Panel transition */
 .pop-enter-active,
diff --git a/web/src/composables/api.ts b/web/src/composables/api.ts
index f29284c..8bf6668 100644
--- a/web/src/composables/api.ts
+++ b/web/src/composables/api.ts
@@ -1,5 +1,5 @@
 // API client for jcode backend
-import type { ModelsResponse, AgentMode, ExecResponse, DiffResponse, WorkspaceInfo, GitBranchesResponse, TaskItem, TaskMetaPatch, MCPListResponse, MCPServerRequest, MCPLoginStatus, BrowseResponse, SSHListResponse, SkillInfo, SlashCommandInfo, TodoItem, Goal, SessionItem, SessionEntry, FileItem, SetupProvider, SetupModel, ProviderDetail, ModelStateResponse, ChatImage, AskUserAnswer, AskUserRequestData, RemoteConnectRequest, RemoteConnectResponse, RemoteListDirResponse, RemoteBindResponse } from '@/types/api'
+import type { ModelsResponse, AgentMode, ExecResponse, DiffResponse, WorkspaceInfo, GitBranchesResponse, TaskItem, TaskMetaPatch, MCPListResponse, MCPServerRequest, MCPLoginStatus, BrowseResponse, SSHListResponse, SkillInfo, SlashCommandInfo, TodoItem, Goal, SessionItem, SessionEntry, FileItem, SetupProvider, SetupModel, ProviderDetail, ModelStateResponse, ChatImage, AskUserAnswer, AskUserRequestData, ApprovalRequestData, RemoteConnectRequest, RemoteConnectResponse, RemoteListDirResponse, RemoteBindResponse } from '@/types/api'
 
 const BASE = ''
 
@@ -82,6 +82,7 @@ export const api = {
       body: JSON.stringify({ id, answers }),
     }),
   askPending: () => request<AskUserRequestData[]>('/api/ask/pending'),
+  approvalPending: () => request<ApprovalRequestData[]>('/api/approval/pending'),
   models: () => request<ModelsResponse>('/api/models'),
   switchModel: (provider: string, model: string) =>
     request<{ status: string }>('/api/model', {
diff --git a/web/src/composables/notifications.ts b/web/src/composables/notifications.ts
index da3cde3..fe40962 100644
--- a/web/src/composables/notifications.ts
+++ b/web/src/composables/notifications.ts
@@ -14,8 +14,6 @@ const permission = ref<NotificationPermission>(
 )
 
 export function useNotifications() {
-  const supported = isTauri || typeof Notification !== 'undefined'
-
   async function ensurePermission() {
     if (isTauri) {
       await ensureNativePermission()
@@ -50,5 +48,5 @@ export function useNotifications() {
     }
   }
 
-  return { supported, permission, ensurePermission, notify }
+  return { ensurePermission, notify }
 }
diff --git a/web/src/composables/useDesktop.ts b/web/src/composables/useDesktop.ts
index 3bd4912..36e79ee 100644
--- a/web/src/composables/useDesktop.ts
+++ b/web/src/composables/useDesktop.ts
@@ -85,19 +85,18 @@ export async function openExternal(url: string): Promise<void> {
 
 // --- native folder picker --------------------------------------------------
 /**
- * Open the OS folder picker and return the chosen absolute path, or null if
- * cancelled / unavailable. Callers fall back to the in-app folder browser when
- * this returns null.
+ * Open the OS folder picker and return the chosen absolute path, or null if the
+ * user cancelled. Throws when the native picker is unavailable (not Tauri, plugin
+ * failed to load, or the dialog errored) so callers can tell "user cancelled"
+ * (null → do nothing) apart from "picker broken" (throw → fall back to the in-app
+ * folder browser). Conflating the two previously left desktop users stuck when
+ * the dialog plugin wasn't available.
  */
 export async function pickFolder(defaultPath?: string): Promise<string | null> {
-  if (!isTauri) return null
-  try {
-    const { open } = await import('@tauri-apps/plugin-dialog')
-    const res = await open({ directory: true, multiple: false, defaultPath })
-    return typeof res === 'string' ? res : null
-  } catch {
-    return null
-  }
+  if (!isTauri) throw new Error('native folder picker unavailable')
+  const { open } = await import('@tauri-apps/plugin-dialog')
+  const res = await open({ directory: true, multiple: false, defaultPath })
+  return typeof res === 'string' ? res : null
 }
 
 // --- one-time desktop init -------------------------------------------------
@@ -111,6 +110,11 @@ export function initDesktop(): void {
   const root = document.documentElement
   root.classList.add('is-tauri')
   const platform = navigator.platform || ''
+  // Only macOS uses an overlay title bar (titleBarStyle:Overlay in tauri.conf),
+  // so only `is-tauri-macos` currently drives CSS (the traffic-light inset +
+  // drag strips). Windows/Linux keep their native OS title bar and need no
+  // in-content inset; their classes are intentional forward-compat hooks, not
+  // dead code — keep them so per-platform tweaks have a selector to hang on.
   if (/Mac/i.test(platform)) root.classList.add('is-tauri-macos')
   else if (/Win/i.test(platform)) root.classList.add('is-tauri-windows')
   else root.classList.add('is-tauri-linux')
diff --git a/web/src/stores/chat.ts b/web/src/stores/chat.ts
index d999edf..afad2e2 100644
--- a/web/src/stores/chat.ts
+++ b/web/src/stores/chat.ts
@@ -242,15 +242,24 @@ export const useChatStore = defineStore('chat', () => {
     return cleaned || raw
   }
 
+  // Recursively mark a tool (and its subagent child tools) done if still
+  // running. Subagent children live in tool.children and were previously never
+  // cleaned, so interrupting a run mid-subagent left child tools spinning
+  // ("running…/Searching…") forever under an already-✓ parent.
+  function markToolTreeDone(tool: ToolCall) {
+    if (tool.status === 'running') tool.status = 'done'
+    if (tool.children) {
+      for (const child of tool.children) markToolTreeDone(child)
+    }
+  }
+
   function agentDone(error?: string) {
     isRunning.value = false
     streamingText = ''
     streamingMsgId = ''
     // Clean up any tool calls still in 'running' state — the agent has finished.
     for (const item of timeline.value) {
-      if (item.kind === 'tool' && item.data.status === 'running') {
-        item.data.status = 'done'
-      }
+      if (item.kind === 'tool') markToolTreeDone(item.data)
     }
     if (error) {
       // Match only the exact cancellation forms the backend emits, so a real
@@ -348,6 +357,25 @@ export const useChatStore = defineStore('chat', () => {
     }
   }
 
+  /**
+   * Re-attach any server-side pending approval requests after the timeline is
+   * (re)built from a session — covers page reload / session resume / WS
+   * reconnect mid-approval, where the live approval_request event was already
+   * consumed and lost. Without this a pending approval card vanishes on switch
+   * and the agent stays blocked forever. Dedupes by id so re-pulls are safe.
+   */
+  async function reconcileApprovals() {
+    try {
+      const pending = await api.approvalPending()
+      for (const req of pending) {
+        const exists = timeline.value.some((i) => i.kind === 'approval' && i.data.id === req.id)
+        if (!exists) addApprovalRequest(req)
+      }
+    } catch {
+      /* ignore */
+    }
+  }
+
   /** Submit answers for a pending ask_user request and collapse its card. */
   async function submitAskUser(id: string, answers: AskUserAnswer[]) {
     try {
@@ -437,11 +465,25 @@ export const useChatStore = defineStore('chat', () => {
   }
 
   async function resolveApproval(id: string, approved: boolean, approveAll = false) {
+    const item = timeline.value.find((i) => i.kind === 'approval' && i.data.id === id)
+    if (item && item.kind === 'approval') {
+      // Block re-entry while a previous click is still in flight (or already
+      // resolved) — otherwise repeated clicks fire multiple POSTs.
+      if (item.data.resolving || item.data.resolved) return
+      item.data.resolving = true
+    }
     try {
       await api.approval(id, approved, approveAll)
       resolveApprovalLocal(id, approved)
     } catch (err: unknown) {
-      console.error('Approval error:', err)
+      // Re-enable the buttons and tell the user, instead of a silent
+      // console.error that leaves the card looking unresponsive.
+      if (item && item.kind === 'approval') item.data.resolving = false
+      addMessage(
+        'system',
+        `Approval failed: ${err instanceof Error ? err.message : String(err)}`,
+        undefined, undefined, 'error',
+      )
     }
   }
 
@@ -772,8 +814,9 @@ export const useChatStore = defineStore('chat', () => {
       for (const tc of pendingToolCalls.values()) {
         tc.status = 'done'
       }
-      // Re-attach any question still awaiting an answer on the server.
+      // Re-attach any question/approval still awaiting a response on the server.
       await reconcileAskUser()
+      await reconcileApprovals()
     } catch {
       // Session file may not exist yet (lazy creation), silently ignore
     }
@@ -921,8 +964,9 @@ export const useChatStore = defineStore('chat', () => {
       for (const tc of pendingToolCalls.values()) {
         tc.status = 'done'
       }
-      // Re-attach any question still awaiting an answer on the server.
+      // Re-attach any question/approval still awaiting a response on the server.
       await reconcileAskUser()
+      await reconcileApprovals()
     } catch (err: unknown) {
       addMessage('system', `Failed to load session: ${err instanceof Error ? err.message : String(err)}`)
     }
@@ -968,6 +1012,7 @@ export const useChatStore = defineStore('chat', () => {
     attachAskUserRequest,
     submitAskUser,
     reconcileAskUser,
+    reconcileApprovals,
     resolveApproval,
     sendMessage,
     stopAgent,
diff --git a/web/src/stores/project.ts b/web/src/stores/project.ts
index 205d8d0..a4eb179 100644
--- a/web/src/stores/project.ts
+++ b/web/src/stores/project.ts
@@ -112,8 +112,10 @@ export const useProjectStore = defineStore('project', () => {
     // Remote workspaces cannot be re-activated by a local path switch (the
     // backend would `stat` a path that only exists on the remote host, and we
     // never persist the SSH secret). Callers must route these through the SSH
-    // wizard instead.
-    if (project.remote) {
+    // wizard instead. Guard on the label too (not just the .remote metadata):
+    // a project added from a task whose path is an ssh:// label may lack the
+    // metadata, and must still not fall through to a doomed local switch.
+    if (project.remote || isRemotePath(project.path)) {
       switchError.value = 'Remote workspace — reconnect via the SSH wizard'
       return false
     }
@@ -133,6 +135,13 @@ export const useProjectStore = defineStore('project', () => {
   }
 
   async function openProject(path: string): Promise<boolean> {
+    // A remote (ssh://) label can't be opened as a local workspace — don't even
+    // persist it as a bare local project; signal the caller to use the SSH
+    // wizard instead (matches ProjectSwitcher.selectProject's remote handling).
+    if (isRemotePath(path)) {
+      switchError.value = 'Remote workspace — reconnect via the SSH wizard'
+      return false
+    }
     const proj = addProject(path)
     return switchToProject(proj.id)
   }
diff --git a/web/src/style.css b/web/src/style.css
index d571ae1..df966e1 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -31,6 +31,14 @@ html.is-tauri-macos .app-shell,
 html.is-tauri-macos .settings-shell {
   padding-top: 28px;
 }
+/* The setup overlay sits ABOVE .app-shell and covers the shell's own drag band,
+   so it needs its own top inset to keep first-run content clear of the floating
+   traffic-light buttons. Its .titlebar-drag child restores window dragging. The
+   SSH wizard is a centered modal (content isn't at the very top) so it only adds
+   a drag strip, no inset. */
+html.is-tauri-macos .setup-frame {
+  padding-top: 28px;
+}
 /* On desktop the 28px title-bar strip already lifts the surface below the
    floating control, so it needs far less of its own top margin than the
    browser (40px). 28 + 12 = 40 → consistent clearance either way. */
diff --git a/web/src/types/api.ts b/web/src/types/api.ts
index 08e99b0..6c1a005 100644
--- a/web/src/types/api.ts
+++ b/web/src/types/api.ts
@@ -431,6 +431,9 @@ export interface PendingApproval {
   is_external: boolean
   resolved?: boolean
   approved?: boolean
+  // True while a resolve POST is in flight — disables the buttons so a slow/failed
+  // request can't be double-submitted.
+  resolving?: boolean
 }
 
 // Project management (localStorage)

No results