diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2b765ff1..79a586d2 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -76,8 +76,8 @@ jobs:
       - uses: actions/checkout@v5
 
       # Go is needed only to run the theme generator, which writes
-      # web/src/composables/themes.generated.ts + styles/tokens.generated.css
-      # (gitignored) — without them vue-tsc can't resolve ./themes.generated.
+      # web/src/lib/themes.generated.ts + styles/tokens.generated.css
+      # (gitignored) — without them tsc can't resolve the theme registry.
       - uses: actions/setup-go@v6
         with:
           go-version-file: 'go.mod'
@@ -92,18 +92,19 @@ jobs:
       - name: Generate theme assets
         run: go generate ./internal/theme/...
 
-      - name: Install deps
-        working-directory: web
-        run: pnpm install --frozen-lockfile
+      - name: Install monorepo deps
+        run: pnpm install --frozen-lockfile || pnpm install
 
-      - name: Type-check
-        working-directory: web
-        run: pnpm type-check
+      - name: Build packages
+        run: |
+          cd packages/jcode-ui-core && npx tsc -p tsconfig.build.json
+          cd ../jcode-ui && npx tsc -p tsconfig.build.json
+          npx tailwindcss -i src/styles/entry.css -o dist/styles.css --minify
 
-      - name: Lint
+      - name: Type-check web app
         working-directory: web
-        run: npx oxlint .
+        run: npx tsc --noEmit -p tsconfig.app.json
 
-      - name: Build
+      - name: Build web app
         working-directory: web
         run: npx vite build
diff --git a/.gitignore b/.gitignore
index bf3bd38b..e1b6e9c4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,17 +3,16 @@
 /jcode-new
 /weixin_poc
 internal/web/dist
-internal/web/dist-react
 internal/model/registry_generated.go
 web/src/styles/tokens.generated.css
-web/src/composables/themes.generated.ts
+web/src/lib/themes.generated.ts
 
 # Node / pnpm (root monorepo + per-app workspaces)
 node_modules/
 **/node_modules/
 *.tsbuildinfo
 packages/*/dist/
-web-react/dist/
+web/dist/
 
 # Lockfile — committed at repo root for the monorepo
 # (pnpm-lock.yaml IS committed; do NOT ignore it)
diff --git a/AGENTS.md b/AGENTS.md
index dddb03c4..4666bd6d 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,6 +1,6 @@
 # AGENTS.md — JCode Project Development Guide
 
-Go coding agent — [Eino](https://github.com/cloudwego/eino) + BubbleTea v2 TUI + Vue 3 web UI + Tauri 2 desktop shell.
+Go coding agent — [Eino](https://github.com/cloudwego/eino) + BubbleTea v2 TUI + React web UI + Tauri 2 desktop shell.
 
 - **Module:** `github.com/cnjack/jcode` | **Entry:** `cmd/jcode/` | **Config dir:** `~/.jcode/`
 
@@ -12,7 +12,7 @@ Go coding agent — [Eino](https://github.com/cloudwego/eino) + BubbleTea v2 TUI
 make build          # generate → build-web → go build
 make install        # generate → build-web → go install
 make run            # go run ./cmd/jcode/
-make lint           # golangci-lint + eslint/oxlint (lint-go / lint-web)
+make lint           # golangci-lint + React typecheck (lint-go / lint-web)
 make doctor         # system check
 make desktop-dev    # Tauri desktop app in dev mode (rebuilds the Go sidecar first)
 make desktop-build  # distributable desktop bundle (.app/.dmg/.msi)
@@ -52,9 +52,8 @@ internal/
   feature/           # Compile-time feature flags via build tags (e.g. desktop, jcode_headless, ble)
   telemetry/         # Optional Langfuse tracing
   tui/               # BubbleTea v2 TUI components
-  web/               # HTTP server (REST + WS + PTY) + embedded Vue dist
-web/                 # Vue 3 + Vite + TypeScript frontend source (the CURRENT product UI)
-web-react/           # React 18 + Vite + RTK product app (migration in progress; parallel to web/)
+  web/               # HTTP server (REST + WS + PTY) + embedded React dist
+web/                 # React 18 + Vite + RTK product UI (embedded in the binary / Tauri)
 packages/            # pnpm workspace: the reusable jcode-ui component library
   jcode-ui/          #   published styled React chat components (→ npm: jcode-ui)
   jcode-ui-core/     #   framework-agnostic core: types, ChatRuntime, headless primitives
@@ -66,18 +65,15 @@ script/              # Build-time code generation + install.sh
 agent-eval/          # Agent evaluation harness + showcase generation
 ```
 
-### Frontend migration (Vue → React) — in progress
+### Frontend (React)
 
-The product UI is migrating from Vue 3 (`web/`) to React 18 (`web-react/`),
-built on a new reusable component library (`packages/jcode-ui` + `jcode-ui-core`).
-**During the migration both coexist:**
+The product UI is React 18 (`web/`) built on `packages/jcode-ui` + `jcode-ui-core`.
 
-- `make build-web` (default) builds the **Vue** app → `internal/web/dist/` (production).
-- `make build-web-react` builds the **React** app + packages → `internal/web/dist-react/` (parallel validation).
-- `make lint-react` typechecks the React app + both packages.
-- The Go `embed.FS` and Tauri `frontendDist` still point at the Vue `dist/`. The switch-over happens once `web-react` reaches feature parity.
+- `make build-web` builds packages + the React app → `internal/web/dist/` (production embed).
+- `make lint-web` typechecks the React app + both packages.
+- Go `//go:embed dist/*` and Tauri `frontendDist` both point at `internal/web/dist/`.
 
-The component library is the migration's organizing principle — see `packages/jcode-ui/README.md` and `site/docs/chat-ui/`. It's published to npm as `jcode-ui` (styled) + `jcode-ui-core` (headless). The runtime abstraction (`ChatRuntime` + `createExternalStoreRuntime`) is the seam that lets the components render from any Redux-shaped store.
+See `packages/jcode-ui/README.md` and `site/docs/chat-ui/`. Published to npm as `jcode-ui` (styled) + `jcode-ui-core` (headless). The runtime abstraction (`ChatRuntime` + `createExternalStoreRuntime`) is the seam that lets the components render from any Redux-shaped store.
 
 ### Key Design Decisions
 
@@ -192,21 +188,19 @@ The component library is the migration's organizing principle — see `packages/
 
 ---
 
-## Frontend (web/) — Vue (production)
+## Frontend (web/) — React (production)
 
-> **Note:** the product UI is migrating to React (`web-react/` + `packages/jcode-ui`). The Vue app remains the production build during the migration. New reusable UI work goes in `packages/jcode-ui` (React); see the migration section above and `packages/jcode-ui/README.md`.
-
-- **Stack:** Vue 3 + TypeScript + Vite
-- **Build:** `cd web && pnpm install && npx vite build` (or `make build-web`)
-- **Output:** builds to `internal/web/dist/`, embedded in Go binary via `//go:embed`
-- **Lint:** `cd web && pnpm lint` (eslint + oxlint)
+- **Stack:** React 18 + TypeScript + Vite + Redux Toolkit + `jcode-ui` / `jcode-ui-core`
+- **Build:** `make build-web` (packages + `cd web && npx vite build`)
+- **Output:** builds to `internal/web/dist/`, embedded in the Go binary via `//go:embed`
+- **Lint:** `make lint-web` (tsc for web + packages)
 - Changes to the frontend require rebuilding via `make build-web` for the Go binary to pick them up
-- **Don't confuse `web/` with `site/`:** `web/` (Vue) is the product UI embedded in the binary and reused by the desktop app; `site/` (React) is the public website + docs at www.j-code.net and is deployed separately (`cd site && pnpm build`).
+- **Don't confuse `web/` with `site/`:** `web/` is the product UI embedded in the binary and reused by the desktop app; `site/` is the public website + docs at www.j-code.net and is deployed separately (`cd site && pnpm build`).
 
 ### 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.
+- **Icons:** use `@heroicons/react/24/outline` exclusively. Import each icon by name. Do **not** hand-write inline `<svg>` icons.
+- **Icon sizing:** use Tailwind `h-N w-N` classes (e.g. `className="h-3.5 w-3.5"`).
+- **Colors:** every color must come from a CSS custom property (jcode-ui tokens / `tokens.generated.css`). Never hardcode hex/rgb/`#fff`/`white` in components.
+- **Themes:** edit `internal/theme/palette.go` and run `make generate` — never edit `tokens.generated.css` or `themes.generated.ts` by hand.
+- **Reusable chat UI:** prefer components from `packages/jcode-ui` over one-off markup in `web/`.
diff --git a/Makefile b/Makefile
index caa852d5..a9b26c3b 100644
--- a/Makefile
+++ b/Makefile
@@ -13,7 +13,7 @@ LDFLAGS := -s -w \
 
 export GOFLAGS := -buildvcs=false
 
-.PHONY: build build-binary run doctor version install clean build-web build-web-react fmt lint lint-go lint-web lint-react generate setup-hooks desktop-icons desktop-sidecar desktop-dev desktop-build desktop-react-dev desktop-react-build desktop-clean
+.PHONY: build build-binary run doctor version install clean build-web fmt lint lint-go lint-web generate setup-hooks desktop-icons desktop-sidecar desktop-dev desktop-build desktop-clean build-ble
 
 fmt:
 	@echo "Formatting Go..."
@@ -26,54 +26,29 @@ lint-go:
 	golangci-lint run
 
 lint-web:
-	@echo "Linting frontend (Vue)..."
-	cd web && (pnpm install --frozen-lockfile 2>/dev/null || pnpm install)
-	cd web && pnpm lint
-
-lint-react:
 	@echo "Type-checking React frontend + packages..."
-	cd packages/jcode-ui-core && pnpm install --frozen-lockfile 2>/dev/null || pnpm install
+	-pnpm install --frozen-lockfile 2>/dev/null || true
 	cd packages/jcode-ui-core && npx tsc --noEmit -p tsconfig.json
 	cd packages/jcode-ui && npx tsc --noEmit -p tsconfig.json
-	cd web-react && npx tsc --noEmit -p tsconfig.app.json
+	cd web && npx tsc --noEmit -p tsconfig.app.json
 
 generate:
 	@echo "Generating code..."
 	go generate ./internal/model/...
 	go generate ./internal/theme/...
 
-# The frontend build. FRONTEND selects which app to build:
-#   web        (default) — the current Vue app (production)
-#   web-react  — the new React app (migration in progress; produces dist-react/)
-# During the migration both coexist. The switch-over to React-as-default happens
-# once web-react reaches feature parity and the Go embed points at dist-react.
-FRONTEND ?= web
-
-build-web: generate
-	@echo "Building frontend ($(FRONTEND))..."
-ifeq ($(FRONTEND),web-react)
-	$(MAKE) build-web-react
-else
-	cd web && (pnpm install --frozen-lockfile 2>/dev/null || pnpm install)
-	cd web && npx vite build
-endif
-
-# Build the React frontend + the two component-library packages it depends on.
-# Output goes to ../internal/web/dist-react (kept separate from the Vue dist
-# until the embed path is switched). The packages are workspace-linked, so this
-# also builds jcode-ui-core (a dependency of jcode-ui).
+# Build the React product UI (web/) + jcode-ui packages into internal/web/dist
+# for Go //go:embed and the Tauri shell.
 #
 # NOTE: pnpm's ERR_PNPM_IGNORED_BUILDS (esbuild/@parcel/watcher native scripts)
-# returns a non-zero exit even when deps are fully installed. We tolerate that
-# exit code from the install step — the build steps below don't depend on those
-# build scripts having run.
-build-web-react: generate
+# can return non-zero even when deps are fully installed. Tolerate install exit.
+build-web: generate
 	@echo "Building React frontend + packages..."
 	-pnpm install --frozen-lockfile 2>/dev/null || true
 	cd packages/jcode-ui-core && npx tsc -p tsconfig.build.json
 	cd packages/jcode-ui && npx tsc -p tsconfig.build.json
 	cd packages/jcode-ui && npx tailwindcss -i src/styles/entry.css -o dist/styles.css --minify
-	cd web-react && npx vite build
+	cd web && npx vite build
 
 # The main binary never links CoreBluetooth (whose eager init triggers the macOS
 # Bluetooth permission prompt at startup). BLE runs in a separate `jcode-ble`
@@ -112,6 +87,7 @@ version:
 clean:
 	rm -f $(BIN)
 	rm -rf internal/web/dist
+	rm -rf packages/jcode-ui/dist packages/jcode-ui-core/dist
 
 setup-hooks:
 	@git config core.hooksPath .githooks
@@ -155,22 +131,5 @@ desktop-dev: desktop-sidecar
 desktop-build: desktop-sidecar
 	cd $(DESKTOP_DIR) && (pnpm install 2>/dev/null || npm install) && pnpm tauri build
 
-# ─── React desktop variants ────────────────────────────────────────────────
-# Same as desktop-dev/desktop-build but load the React frontend (web-react/)
-# instead of the Vue app (web/). Uses tauri.react.conf.json to override the
-# build block (frontendDist / beforeDevCommand / beforeBuildCommand) — every
-# other Tauri setting (window, tray, sidecar, capabilities) is inherited.
-# Requires `pnpm install` to have run once at the repo root (the React
-# workspace lives there, not under desktop/).
-desktop-react-dev: desktop-sidecar
-	@echo "Launching desktop (React frontend)…"
-	cd $(DESKTOP_DIR) && (pnpm install 2>/dev/null || npm install) && \
-		pnpm tauri dev --config src-tauri/tauri.react.conf.json
-
-desktop-react-build: desktop-sidecar
-	@echo "Bundling desktop (React frontend)…"
-	cd $(DESKTOP_DIR) && (pnpm install 2>/dev/null || npm install) && \
-		pnpm tauri build --config src-tauri/tauri.react.conf.json
-
 desktop-clean:
 	rm -rf $(SIDECAR_DIR) $(DESKTOP_DIR)/src-tauri/target
diff --git a/desktop/src-tauri/tauri.conf.json b/desktop/src-tauri/tauri.conf.json
index cb802754..a11223de 100644
--- a/desktop/src-tauri/tauri.conf.json
+++ b/desktop/src-tauri/tauri.conf.json
@@ -5,7 +5,7 @@
   "identifier": "com.cnjack.jcode",
   "build": {
     "frontendDist": "../../internal/web/dist",
-    "beforeDevCommand": "pnpm --dir ../web dev",
+    "beforeDevCommand": "pnpm --dir ../web dev --host",
     "devUrl": "http://localhost:5173",
     "beforeBuildCommand": "make -C .. build-web"
   },
diff --git a/desktop/src-tauri/tauri.react.conf.json b/desktop/src-tauri/tauri.react.conf.json
deleted file mode 100644
index 1d46c63b..00000000
--- a/desktop/src-tauri/tauri.react.conf.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "build": {
-    "frontendDist": "../../internal/web/dist-react",
-    "beforeDevCommand": "pnpm --dir ../web-react dev",
-    "devUrl": "http://localhost:5173",
-    "beforeBuildCommand": "make -C .. build-web-react"
-  }
-}
diff --git a/internal/theme/gen/main.go b/internal/theme/gen/main.go
index debca903..964cd82a 100644
--- a/internal/theme/gen/main.go
+++ b/internal/theme/gen/main.go
@@ -4,9 +4,9 @@
 //
 // Two files are generated (both build artifacts, gitignored — never edit by
 // hand):
-//   - web/src/styles/tokens.generated.css : one html[data-theme="<name>"] block
+//   - web/src/styles/tokens.generated.css : one [data-theme="<name>"] block
 //     of CSS custom properties per theme.
-//   - web/src/composables/themes.generated.ts : the theme registry (id, label,
+//   - web/src/lib/themes.generated.ts : the theme registry (id, label,
 //     appearance) the picker UI iterates, so the list can't drift either.
 package main
 
@@ -22,7 +22,7 @@ import (
 
 func main() {
 	writeFile(repoPath("web", "src", "styles", "tokens.generated.css"), css())
-	writeFile(repoPath("web", "src", "composables", "themes.generated.ts"), ts())
+	writeFile(repoPath("web", "src", "lib", "themes.generated.ts"), ts())
 	fmt.Printf("theme/gen: wrote %d themes (css + ts)\n", len(theme.All()))
 }
 
@@ -61,6 +61,13 @@ func ts() string {
 }
 
 func writeFile(path, content string) {
+	// Generated files are gitignored; their parent dirs may not exist on a
+	// clean checkout (CI). Create them so go generate never fails only because
+	// tokens.generated.css / themes.generated.ts were never committed.
+	if err := os.MkdirAll(filepath.Dir(path), 0o755); err != nil {
+		fmt.Fprintf(os.Stderr, "theme/gen: mkdir %s: %v\n", filepath.Dir(path), err)
+		os.Exit(1)
+	}
 	if err := os.WriteFile(path, []byte(content), 0o644); err != nil {
 		fmt.Fprintf(os.Stderr, "theme/gen: write %s: %v\n", path, err)
 		os.Exit(1)
diff --git a/packages/jcode-ui-core/src/primitives/ToolCallView.tsx b/packages/jcode-ui-core/src/primitives/ToolCallView.tsx
index 35789e94..da6ee7e1 100644
--- a/packages/jcode-ui-core/src/primitives/ToolCallView.tsx
+++ b/packages/jcode-ui-core/src/primitives/ToolCallView.tsx
@@ -1,17 +1,16 @@
 /**
  * ToolCallView — the headless expand/collapse shell for a tool invocation.
  *
- * Owns: expand/collapse state, status glyph dispatch, and renderer lookup via a
- * ToolRendererRegistry (provided through context by the host). Does NOT own the
- * per-tool rendering logic — that lives in registered renderers. The styled
- * `jcode-ui` `ToolCallCard` wraps this with the jcode visual language.
+ * Owns: expand/collapse state, renderer lookup via ToolRendererRegistry, and
+ * subagent recursion. Does NOT own per-tool body chrome — the styled
+ * `jcode-ui` `ToolCallCard` supplies header styling + CSS for `.toolcall-body`.
  *
- * Subagent recursion: when `tool.name === 'subagent'`, children are rendered as
- * nested ToolCallView instances (capped at a max-depth). ask_user tools are
- * routed to the AskUserBlock renderer.
+ * Subagent: only `tool.name === 'subagent'` (NOT team_spawn — that has its own
+ * renderer). Children recurse as nested ToolCallView instances. ask_user tools
+ * route to the host's renderAskUser slot.
  */
 
-import { useContext, useMemo, useState } from 'react'
+import { createContext, useContext, useMemo, useState } from 'react'
 import type { ReactNode } from 'react'
 import type { ToolCall } from '../types/index.js'
 import type { ToolRendererRegistry, ToolRendererProps } from '../adapters/index.js'
@@ -25,7 +24,6 @@ export interface ToolCallContextValue {
   renderAskUser?: (tool: ToolCall) => ReactNode
 }
 
-import { createContext } from 'react'
 const ToolCallCtx = createContext<ToolCallContextValue | null>(null)
 
 export function ToolCallProvider({ value, children }: { value: ToolCallContextValue; children: ReactNode }) {
@@ -44,14 +42,17 @@ export interface ToolCallViewProps {
   maxDepth?: number
   /** Default expanded state. Default false (subagents default true). */
   defaultExpanded?: boolean
-  /** Render-prop for the collapsed header. Falls back to a default row. */
+  /** Render-prop for the header. Falls back to a default row. */
   renderHeader?: (tool: ToolCall, expanded: boolean, toggle: () => void) => ReactNode
+  /**
+   * Optional subagent body (output/error). Styled layer supplies markdown.
+   * Receives only output-related fields — never args.
+   */
+  renderSubagentOutput?: (tool: ToolCall) => ReactNode
   /** className passthrough. */
   className?: string
 }
 
-const SUBAGENT_NAMES = new Set(['subagent', 'team_spawn'])
-
 export function ToolCallView({
   tool,
   depth = 0,
@@ -59,9 +60,11 @@ export function ToolCallView({
   defaultExpanded,
   className,
   renderHeader,
+  renderSubagentOutput,
 }: ToolCallViewProps): ReactNode {
   const ctx = useToolCallContext()
-  const isSubagent = SUBAGENT_NAMES.has(tool.name)
+  // Only the recursive subagent tool — team_spawn has its own renderer (Vue parity).
+  const isSubagent = tool.name === 'subagent'
   const isAskUser = tool.name === 'ask_user' && (!!tool.askUserId || tool.status === 'running')
 
   const [expanded, setExpanded] = useState(defaultExpanded ?? isSubagent)
@@ -72,7 +75,7 @@ export function ToolCallView({
     return <>{ctx.renderAskUser(tool)}</>
   }
 
-  // Look up a renderer for the body.
+  // Look up a renderer for the body (not used for subagent shells — no args dump).
   const Renderer = ctx?.registry.get(tool.name) ?? null
 
   const header =
@@ -80,23 +83,63 @@ export function ToolCallView({
       <DefaultToolHeader tool={tool} expanded={expanded} onToggle={toggle} />
     )
 
-  const body = Renderer ? <Renderer {...toRendererProps(tool)} /> : null
+  const body = !isSubagent && Renderer ? <Renderer {...toRendererProps(tool)} /> : null
+
   const children =
     isSubagent && tool.children && tool.children.length > 0 && depth < maxDepth
-      ? tool.children.map((c) => (
-          <div key={c.id} style={{ marginLeft: 12 }}>
-            {ctx?.renderChild ? ctx.renderChild(c, depth + 1) : <ToolCallView tool={c} depth={depth + 1} maxDepth={maxDepth} />}
-          </div>
-        ))
+      ? tool.children.map((c) =>
+          ctx?.renderChild ? (
+            <div key={c.id}>{ctx.renderChild(c, depth + 1)}</div>
+          ) : (
+            <ToolCallView
+              key={c.id}
+              tool={c}
+              depth={depth + 1}
+              maxDepth={maxDepth}
+              renderHeader={renderHeader}
+              renderSubagentOutput={renderSubagentOutput}
+            />
+          ),
+        )
       : null
 
+  // Prefer displayOutput (clean) over raw output; never surface args for subagents.
+  const subagentText = tool.displayOutput || tool.output || ''
+
   return (
-    <div className={className} data-tool-name={tool.name} data-tool-status={tool.status}>
+    <div
+      className={className}
+      data-tool-name={tool.name}
+      data-tool-status={tool.status}
+      data-expanded={expanded ? 'true' : 'false'}
+    >
       {header}
-      {expanded && (
-        <div className="toolcall-body">
+
+      {/* Subagent: children + output only (no args). Output rendered by styled slot. */}
+      {expanded && isSubagent && (
+        <div className="toolcall-subagent-body">
+          {children && children.length > 0 ? (
+            <div className="toolcall-subagent-children">{children}</div>
+          ) : tool.status === 'running' && !subagentText ? (
+            <div className="toolcall-subagent-starting">Starting…</div>
+          ) : null}
+          {renderSubagentOutput
+            ? renderSubagentOutput(tool)
+            : subagentText
+              ? <pre className="toolcall-subagent-output">{truncate(subagentText, 2000)}</pre>
+              : null}
+          {tool.error ? <pre className="toolcall-subagent-error">{tool.error}</pre> : null}
+        </div>
+      )}
+
+      {/* Regular tool: single content box under the title (top edge = divider). */}
+      {expanded && !isSubagent && (
+        <div
+          className="toolcall-body jcode-selectable"
+          data-selectable
+          data-tool-status={tool.status}
+        >
           {body}
-          {children}
         </div>
       )}
     </div>
@@ -117,7 +160,12 @@ function toRendererProps(tool: ToolCall): ToolRendererProps {
   }
 }
 
-/** Minimal default header: status glyph + title + subtitle + chevron. */
+function truncate(text: string, max: number): string {
+  const chars = [...text]
+  return chars.length > max ? chars.slice(0, max).join('') + `… (${chars.length} chars)` : text
+}
+
+/** Minimal default header (headless fallback). */
 function DefaultToolHeader({
   tool,
   expanded,
@@ -127,12 +175,23 @@ function DefaultToolHeader({
   expanded: boolean
   onToggle: () => void
 }): ReactNode {
-  const glyph = tool.status === 'running' ? '◈' : tool.status === 'error' ? '✗' : '✓'
   const title = tool.displayInfo?.title ?? tool.name
   const subtitle = tool.displayInfo?.subtitle ?? ''
   return (
-    <button type="button" onClick={onToggle} style={{ display: 'flex', gap: 8, alignItems: 'center', cursor: 'pointer', background: 'none', border: 'none', padding: 0, textAlign: 'left' }}>
-      <span aria-hidden>{glyph}</span>
+    <button
+      type="button"
+      onClick={onToggle}
+      style={{
+        display: 'flex',
+        gap: 6,
+        alignItems: 'center',
+        cursor: 'pointer',
+        background: 'none',
+        border: 'none',
+        padding: 0,
+        textAlign: 'left',
+      }}
+    >
       <span>{title}</span>
       {subtitle && <span style={{ opacity: 0.7 }}>{subtitle}</span>}
       <span aria-hidden>{expanded ? '▾' : '▸'}</span>
diff --git a/packages/jcode-ui/src/components/Message.tsx b/packages/jcode-ui/src/components/Message.tsx
index 517124db..30973925 100644
--- a/packages/jcode-ui/src/components/Message.tsx
+++ b/packages/jcode-ui/src/components/Message.tsx
@@ -1,16 +1,20 @@
 /**
- * Message — styled chat bubble (wraps the headless MessageView).
+ * Message — flat chat message (matches web/src/components/ChatMessage.vue).
  *
- * Adds: token-driven role styling (user right-aligned primary, assistant left,
- * system muted/error), markdown rendering via the marked+hljs+DOMPurify pipeline,
- * Geist font, and the copy/edit affordances styled with heroicons.
+ * Layout (NOT chat-bubble cards):
+ *   [avatar] Role label
+ *            markdown content (pl-9, no bg / no border)
+ *            duration · copy / edit (hover)
+ *
+ * User and assistant share the same left-aligned structure; only the avatar
+ * fill and label color differ. System messages keep the same skeleton with
+ * a level-tinted avatar.
  */
 
-import { memo, useMemo } from 'react'
+import { memo, useCallback, useMemo, useState } from 'react'
 import { CheckIcon, PencilSquareIcon, Square2StackIcon } from '@heroicons/react/24/outline'
 import type { Message as MessageData } from 'jcode-ui-core'
-import { MessageView } from 'jcode-ui-core/primitives'
-import type { MessageActions } from 'jcode-ui-core/primitives'
+import { useRuntimeActions } from 'jcode-ui-core/runtime'
 import { renderMarkdown } from '../lib/markdown.js'
 import { Reasoning } from './Reasoning.js'
 import { Sources } from './Sources.js'
@@ -22,130 +26,270 @@ export interface MessageProps {
 }
 
 export const Message = memo(function Message({ message, canEdit }: MessageProps) {
+  const actions = useRuntimeActions()
+  const [copied, setCopied] = useState(false)
+  const [editing, setEditing] = useState(false)
+  const [draft, setDraft] = useState(message.content)
+
   const isUser = message.role === 'user'
   const isSystem = message.role === 'system'
+  const isWechat = isUser && message.source === 'wechat'
+
+  const systemColor =
+    message.level === 'error'
+      ? 'var(--color-destructive, var(--color-error-fg))'
+      : message.level === 'notice'
+        ? 'var(--color-muted-foreground)'
+        : 'var(--color-warning-fg)'
+
+  const avatarBg = isSystem
+    ? systemColor
+    : message.role === 'assistant'
+      ? 'var(--color-accent-neutral)'
+      : isWechat
+        ? 'var(--color-info-fg)'
+        : 'var(--color-foreground)'
+
+  const labelColor = avatarBg
+  const roleLabel = isSystem
+    ? message.level === 'error'
+      ? 'Error'
+      : 'System'
+    : isWechat
+      ? 'WeChat'
+      : isUser
+        ? 'You'
+        : 'JCODE'
+
+  const avatarGlyph = isSystem
+    ? 'S'
+    : isWechat
+      ? 'W'
+      : isUser
+        ? 'U'
+        : 'J'
 
-  // System messages have their own muted/error treatment and no avatar.
-  if (isSystem) {
-    return <SystemMessage message={message} />
-  }
+  const durationLabel = formatDuration(message.durationMs)
+
+  const copy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(message.content)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch {
+      // clipboard unavailable
+    }
+  }, [message.content])
+
+  const startEdit = useCallback(() => {
+    setDraft(message.content)
+    setEditing(true)
+  }, [message.content])
+
+  const saveEdit = useCallback(() => {
+    const text = draft.trim()
+    setEditing(false)
+    if (text && text !== message.content) {
+      actions.editMessage(message.id, text)
+    }
+  }, [actions, draft, message.content, message.id])
+
+  const cancelEdit = useCallback(() => setEditing(false), [])
 
   return (
     <div
-      className={`jcode-message flex gap-3 px-4 py-2 ${isUser ? 'flex-row-reverse' : 'flex-row'}`}
+      className="jcode-message chat-col group/msg animate-fade-in py-3"
       data-role={message.role}
       data-source={message.source}
+      data-level={message.level}
     >
-      <Avatar role={message.role} source={message.source} />
-      <div className={`min-w-0 max-w-[85%] ${isUser ? 'items-end' : 'items-start'} flex flex-col`}>
-        {message.reasoning && <Reasoning reasoning={message.reasoning} durationMs={message.durationMs} />}
-        <Bubble message={message} canEdit={canEdit} isUser={isUser} />
-        {message.sources && message.sources.length > 0 && <Sources sources={message.sources} />}
+      {/* Role label + avatar — always left-aligned, no bubble chrome. */}
+      <div className="mb-2 flex items-center gap-2.5">
+        <div
+          className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[10px] font-bold"
+          style={{ background: avatarBg, color: 'var(--color-surface)' }}
+          aria-hidden
+        >
+          {avatarGlyph}
+        </div>
+        <span className="text-[11px] font-semibold" style={{ color: labelColor }}>
+          {roleLabel}
+        </span>
       </div>
-    </div>
-  )
-})
 
-function Bubble({ message, canEdit, isUser }: { message: MessageData; canEdit?: boolean; isUser: boolean }) {
-  return (
-    <div className="group/msg">
-      <MessageView
-        message={message}
-        canEdit={canEdit}
-        className={`jcode-selectable relative rounded-[var(--radius-lg)] px-3.5 py-2.5 text-[0.9rem] leading-relaxed ${
-          isUser
-            ? 'bg-[var(--color-primary)] text-[var(--color-on-primary)]'
-            : 'bg-[var(--color-surface)] text-[var(--color-foreground)] border border-[var(--color-border)]'
-        }`}
-        renderContent={(content) => <MarkdownBody html={content} />}
-        renderAvatar={() => null}
-        renderActions={(actions) => <MessageActionsRow {...actions} />}
-      />
-    </div>
-  )
-}
+      {/* Attachments */}
+      {message.images && message.images.length > 0 && (
+        <div className="mb-2 flex flex-wrap gap-2 pl-9">
+          {message.images.map((img, i) => (
+            <img
+              key={i}
+              src={`data:${img.media_type};base64,${img.data}`}
+              alt={`attachment ${i + 1}`}
+              className="max-h-48 max-w-64 cursor-pointer object-contain transition-opacity hover:opacity-90"
+              style={{
+                borderRadius: 'var(--radius-lg)',
+                border: '1px solid var(--color-border)',
+              }}
+            />
+          ))}
+        </div>
+      )}
 
-/**
- * Icon-based hover actions (mirrors ChatMessage.vue lines 172-189): a copy
- * button (Square2StackIcon → CheckIcon when copied) and, for editable user
- * messages, an edit button (PencilSquareIcon). Both render inside a row that
- * fades in on group hover/focus.
- */
-function MessageActionsRow({ copied, onCopy, canEdit, onEdit }: MessageActions) {
-  return (
-    <div className="flex items-center gap-0.5 pl-9 opacity-0 transition-opacity duration-150 group-hover/msg:opacity-100 group-focus-within/msg:opacity-100">
-      <button
-        type="button"
-        onClick={onCopy}
-        title={copied ? 'Copied' : 'Copy'}
-        aria-label={copied ? 'Copied' : 'Copy'}
-        className="flex h-5 w-5 items-center justify-center rounded-[var(--radius-sm)] cursor-pointer transition-all hover:bg-[var(--color-secondary)] active:scale-90"
-        style={{ color: 'var(--color-muted-foreground)' }}
-      >
-        {copied ? (
-          <CheckIcon className="h-3 w-3" style={{ color: 'var(--color-accent-neutral)' }} />
-        ) : (
-          <Square2StackIcon className="h-3 w-3" />
-        )}
-      </button>
-      {canEdit && (
-        <button
-          type="button"
-          onClick={onEdit}
-          title="Edit"
-          aria-label="Edit"
-          className="flex h-5 w-5 items-center justify-center rounded-[var(--radius-sm)] cursor-pointer transition-all hover:bg-[var(--color-secondary)] active:scale-90"
-          style={{ color: 'var(--color-muted-foreground)' }}
-        >
-          <PencilSquareIcon className="h-3 w-3" />
-        </button>
+      {message.reasoning && (
+        <div className="pl-9">
+          <Reasoning reasoning={message.reasoning} durationMs={message.durationMs} />
+        </div>
+      )}
+
+      {/* Body or inline edit — flat prose, no card bg/border. */}
+      {editing ? (
+        <div className="pl-9">
+          <textarea
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault()
+                saveEdit()
+              } else if (e.key === 'Escape') {
+                e.preventDefault()
+                cancelEdit()
+              }
+            }}
+            className="min-h-20 max-h-80 w-full resize-y px-3 py-2 text-sm transition-colors"
+            style={{
+              borderRadius: 'var(--radius-lg)',
+              border: '1px solid var(--color-border)',
+              background: 'var(--color-surface)',
+              color: 'var(--color-foreground)',
+            }}
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus
+          />
+          <div className="mt-2 flex items-center gap-2">
+            <button
+              type="button"
+              onClick={saveEdit}
+              className="cursor-pointer px-3 py-1 text-xs font-semibold transition-all active:scale-95"
+              style={{
+                background: 'var(--color-accent-neutral)',
+                color: 'var(--color-surface)',
+                borderRadius: 'var(--radius-md)',
+              }}
+            >
+              Save
+            </button>
+            <button
+              type="button"
+              onClick={cancelEdit}
+              className="cursor-pointer px-3 py-1 text-xs font-medium transition-all active:scale-95"
+              style={{
+                background: 'var(--color-secondary)',
+                color: 'var(--color-foreground)',
+                borderRadius: 'var(--radius-md)',
+              }}
+            >
+              Cancel
+            </button>
+            <span className="text-[10px]" style={{ color: 'var(--color-muted-foreground)' }}>
+              Enter to save · Esc to cancel
+            </span>
+          </div>
+        </div>
+      ) : (
+        <MarkdownBody html={message.content} />
+      )}
+
+      {message.sources && message.sources.length > 0 && (
+        <div className="pl-9">
+          <Sources sources={message.sources} />
+        </div>
+      )}
+
+      {/* Action footer: duration (assistant) + hover copy/edit. */}
+      {!editing && (
+        <div className="mt-1.5 flex items-center gap-2 pl-9">
+          {durationLabel && message.role === 'assistant' && (
+            <span
+              className="text-[10px] tabular-nums"
+              style={{
+                fontFamily: 'var(--font-mono)',
+                color: 'var(--color-muted-foreground)',
+                opacity: 0.7,
+              }}
+              title="Time this turn took"
+            >
+              {durationLabel}
+            </span>
+          )}
+          <div className="flex items-center gap-0.5 opacity-0 transition-opacity duration-150 group-hover/msg:opacity-100 group-focus-within/msg:opacity-100">
+            <button
+              type="button"
+              onClick={copy}
+              title={copied ? 'Copied' : 'Copy'}
+              aria-label={copied ? 'Copied' : 'Copy'}
+              className="flex h-5 w-5 cursor-pointer items-center justify-center rounded-[var(--radius-sm)] transition-all hover:bg-[var(--color-secondary)] active:scale-90"
+              style={{ color: 'var(--color-muted-foreground)' }}
+            >
+              {copied ? (
+                <CheckIcon className="h-3 w-3" style={{ color: 'var(--color-accent-neutral)' }} />
+              ) : (
+                <Square2StackIcon className="h-3 w-3" />
+              )}
+            </button>
+            {canEdit && (
+              <button
+                type="button"
+                onClick={startEdit}
+                title="Edit"
+                aria-label="Edit"
+                className="flex h-5 w-5 cursor-pointer items-center justify-center rounded-[var(--radius-sm)] transition-all hover:bg-[var(--color-secondary)] active:scale-90"
+                style={{ color: 'var(--color-muted-foreground)' }}
+              >
+                <PencilSquareIcon className="h-3 w-3" />
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* System error detail */}
+      {isSystem && message.level === 'error' && message.detail && (
+        <details className="mt-1 pl-9">
+          <summary className="cursor-pointer text-[11px] text-[var(--color-muted-foreground)]">
+            details
+          </summary>
+          <pre
+            className="mt-1 overflow-x-auto whitespace-pre-wrap px-2 py-1.5 font-mono text-[11px]"
+            style={{
+              color: 'var(--color-muted-foreground)',
+              background: 'var(--color-muted)',
+              borderRadius: 'var(--radius-md)',
+            }}
+          >
+            {message.detail}
+          </pre>
+        </details>
       )}
     </div>
   )
-}
+})
 
 const MarkdownBody = memo(function MarkdownBody({ html }: { html: string }) {
   const sanitized = useMemo(() => renderMarkdown(html), [html])
   return (
     <div
-      className="jcode-prose max-w-none break-words [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1 [&_li]:my-0"
+      className="jcode-prose jcode-selectable max-w-none break-words pl-9"
       dangerouslySetInnerHTML={{ __html: sanitized }}
     />
   )
 })
 
-function Avatar({ role, source }: { role: MessageData['role']; source?: string }) {
-  const glyph = role === 'user' ? 'U' : 'J'
-  const tint = source === 'wechat' ? 'bg-[var(--color-success)] text-white' : 'bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]'
-  return (
-    <span
-      className={`mt-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[0.7rem] font-semibold ${tint}`}
-      aria-hidden
-    >
-      {glyph}
-    </span>
-  )
-}
-
-function SystemMessage({ message }: { message: MessageData }) {
-  const isError = message.level === 'error'
-  return (
-    <div className="jcode-message flex justify-center px-4 py-1.5" data-role="system" data-level={message.level}>
-      <div
-        className={`max-w-[90%] rounded-[var(--radius-md)] px-3 py-1.5 text-center text-xs ${
-          isError
-            ? 'bg-[var(--color-error-bg)] text-[var(--color-error-fg)]'
-            : 'bg-[var(--color-muted)] text-[var(--color-muted-foreground)]'
-        }`}
-      >
-        {message.content}
-        {message.detail && (
-          <details className="mt-1 text-left">
-            <summary className="cursor-pointer opacity-70">details</summary>
-            <pre className="mt-1 whitespace-pre-wrap text-left font-mono text-[0.7rem] opacity-80">{message.detail}</pre>
-          </details>
-        )}
-      </div>
-    </div>
-  )
+function formatDuration(ms?: number): string {
+  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`
 }
diff --git a/packages/jcode-ui/src/components/Thread.tsx b/packages/jcode-ui/src/components/Thread.tsx
index 7f142002..f2723ef5 100644
--- a/packages/jcode-ui/src/components/Thread.tsx
+++ b/packages/jcode-ui/src/components/Thread.tsx
@@ -9,6 +9,7 @@
 
 import type { ReactNode } from 'react'
 import { Thread as ThreadPrimitive } from 'jcode-ui-core/primitives'
+import { useRuntimeState } from 'jcode-ui-core/runtime'
 import { isMessageItem, isToolItem, isApprovalItem } from 'jcode-ui-core'
 import type { ThreadItem } from 'jcode-ui-core'
 import { Message } from './Message.js'
@@ -22,7 +23,7 @@ export interface ThreadProps {
   emptyState?: ReactNode
   /** Override the pending ("Thinking…") indicator. */
   renderPending?: () => ReactNode
-  /** className passthrough. */
+  /** className passthrough for the scroll container. */
   className?: string
   /** Extra bottom padding (px) to clear a sticky composer. */
   overscanBottom?: number
@@ -35,36 +36,75 @@ export function Thread({
   className,
   overscanBottom,
 }: ThreadProps): ReactNode {
+  const { isRunning } = useRuntimeState()
   return (
     <ThreadPrimitive
       virtualize={virtualize}
-      className={`jcode-thread ${className ?? ''}`}
-      overscanBottom={overscanBottom}
-      renderItem={renderItem}
+      className={`jcode-thread messages-feather h-full scroll-smooth rounded-t-[13px] ${className ?? ''}`}
+      overscanBottom={overscanBottom ?? 24}
+      renderItem={(item) => renderItem(item, isRunning)}
       renderPending={renderPending ?? DefaultPending}
       renderEmpty={emptyState ? () => emptyState : undefined}
     />
   )
 }
 
-function renderItem(item: ThreadItem): ReactNode {
+function renderItem(item: ThreadItem, isRunning: boolean): ReactNode {
   if (isMessageItem(item)) {
-    return <Message key={item.seq} message={item.data} canEdit={item.data.role === 'user'} />
+    return (
+      <Message
+        key={item.seq}
+        message={item.data}
+        canEdit={item.data.role === 'user' && !isRunning}
+      />
+    )
   }
   if (isToolItem(item)) {
-    return <ToolCallCard key={item.seq} tool={item.data} />
+    // pl-9 matches Vue App.vue: tools indent under the message content column.
+    return (
+      <div key={item.seq} className="chat-col">
+        <ToolCallCard tool={item.data} className="pl-9" />
+      </div>
+    )
   }
   if (isApprovalItem(item)) {
-    return <ApprovalBanner key={item.seq} approval={item.data} />
+    return (
+      <div key={item.seq} className="chat-col">
+        <div className="pl-9">
+          <ApprovalBanner approval={item.data} />
+        </div>
+      </div>
+    )
   }
   return null
 }
 
 function DefaultPending(): ReactNode {
+  // Matches Vue's thinking footer: three pulsing dots + label, indented pl-9.
   return (
-    <div className="jcode-pending flex items-center gap-2 px-4 py-2 text-[var(--color-muted-foreground)]">
-      <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-[var(--color-primary)]" />
-      <span>Thinking…</span>
+    <div
+      className="jcode-pending chat-col flex select-none items-center gap-2.5 py-3 pl-[3.25rem]"
+      role="status"
+      aria-live="polite"
+      aria-label="Thinking…"
+    >
+      <span className="flex gap-1" aria-hidden="true">
+        <span
+          className="h-1.5 w-1.5 animate-pulse rounded-full"
+          style={{ background: 'var(--color-accent-neutral)', animationDelay: '0ms' }}
+        />
+        <span
+          className="h-1.5 w-1.5 animate-pulse rounded-full"
+          style={{ background: 'var(--color-accent-neutral)', animationDelay: '160ms' }}
+        />
+        <span
+          className="h-1.5 w-1.5 animate-pulse rounded-full"
+          style={{ background: 'var(--color-accent-neutral)', animationDelay: '320ms' }}
+        />
+      </span>
+      <span className="text-[13px]" style={{ fontFamily: 'var(--font-sans)', color: 'var(--color-muted-foreground)' }}>
+        Thinking…
+      </span>
     </div>
   )
 }
diff --git a/packages/jcode-ui/src/components/ToolCallCard.tsx b/packages/jcode-ui/src/components/ToolCallCard.tsx
index 5452250e..9f7e5450 100644
--- a/packages/jcode-ui/src/components/ToolCallCard.tsx
+++ b/packages/jcode-ui/src/components/ToolCallCard.tsx
@@ -1,13 +1,12 @@
 /**
- * ToolCallCard — styled tool-invocation card (wraps headless ToolCallView).
+ * ToolCallCard — styled tool-invocation shell (matches web ToolCallCard.vue).
  *
- * Renders the expand/collapse header (status glyph, title/subtitle, diff counter,
- * chevron) and dispatches the body to a registered ToolRenderer. Sets up the
- * ToolCallProvider so the headless primitive can find the registry + route
- * ask_user tools to the styled AskUserCard.
- *
- * Subagent tools get a borderless recursive treatment; the shimmer-running class
- * animates the header while a tool is in flight.
+ * Design:
+ *   - Header is a borderless plain-text row (title + subtitle + chevron).
+ *     No permanent status glyph; running titles use `.shimmer-running`.
+ *   - Content box is ONE shared frame (`.toolcall-body` in components.css);
+ *     individual renderers must not add their own outer border.
+ *   - Subagent gets a dedicated header + unboxed children list.
  */
 
 import { memo, useMemo } from 'react'
@@ -17,90 +16,238 @@ import { ToolCallView, ToolCallProvider } from 'jcode-ui-core/primitives'
 import type { ToolRendererRegistry } from 'jcode-ui-core/adapters'
 import { AskUserCard } from './AskUserCard.js'
 import { useToolRegistry } from './ToolRegistryContext.js'
+import { renderMarkdown } from '../lib/markdown.js'
 
 export interface ToolCallCardProps {
   tool: ToolCall
   /** Override the registry (defaults to the context-provided one). */
   registry?: ToolRendererRegistry
+  /** Extra classes (e.g. pl-9 to indent under the message content column). */
+  className?: string
+  /** Nesting depth for subagent children. */
+  depth?: number
 }
 
-export const ToolCallCard = memo(function ToolCallCard({ tool, registry }: ToolCallCardProps) {
+export const ToolCallCard = memo(function ToolCallCard({
+  tool,
+  registry,
+  className,
+  depth = 0,
+}: ToolCallCardProps) {
   const ctxRegistry = useToolRegistry()
   const reg = registry ?? ctxRegistry
   const providerValue = useMemo(
-    () => ({ registry: reg, renderAskUser: (t: ToolCall) => <AskUserCard tool={t} /> }),
+    () => ({
+      registry: reg,
+      renderAskUser: (t: ToolCall) => <AskUserCard tool={t} />,
+      // Nested subagent children re-enter the styled card (same header chrome).
+      renderChild: (child: ToolCall, childDepth: number) => (
+        <ToolCallCard tool={child} registry={reg} depth={childDepth} />
+      ),
+    }),
     [reg],
   )
   return (
     <ToolCallProvider value={providerValue}>
       <ToolCallView
         tool={tool}
-        className="jcode-toolcall px-4 py-1"
-        renderHeader={(t, expanded, toggle) => <Header tool={t} expanded={expanded} onToggle={toggle} />}
+        depth={depth}
+        className={`jcode-toolcall my-1 ${className ?? ''}`}
+        renderHeader={(t, expanded, toggle) =>
+          t.name === 'subagent' ? (
+            <SubagentHeader tool={t} expanded={expanded} onToggle={toggle} />
+          ) : (
+            <ToolHeader tool={t} expanded={expanded} onToggle={toggle} />
+          )
+        }
+        renderSubagentOutput={(t) => <SubagentOutput tool={t} />}
       />
     </ToolCallProvider>
   )
 })
 
-function Header({ tool, expanded, onToggle }: { tool: ToolCall; expanded: boolean; onToggle: () => void }) {
-  const isSubagent = tool.name === 'subagent' || tool.name === 'team_spawn'
-  const isRunning = tool.status === 'running'
-  const isError = tool.status === 'error'
+/**
+ * Subagent body: output only (never args), rendered as markdown.
+ * Matches Vue's subagent output box but with prose instead of a plain <pre>.
+ */
+function SubagentOutput({ tool }: { tool: ToolCall }) {
+  const text = (tool.displayOutput || tool.output || '').trim()
+  if (!text) return null
+  // Cap very long outputs for DOM size; still enough for typical summaries.
+  const capped = text.length > 12000 ? text.slice(0, 12000) + '\n\n…' : text
+  const html = renderMarkdown(capped)
+  return (
+    <div
+      className="toolcall-subagent-output jcode-prose jcode-selectable max-h-72 overflow-y-auto break-words"
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  )
+}
 
+// ─── Regular tool header (Vue: transparent row, no glyph) ───
+
+function ToolHeader({
+  tool,
+  expanded,
+  onToggle,
+}: {
+  tool: ToolCall
+  expanded: boolean
+  onToggle: () => void
+}) {
   const title = tool.displayInfo?.title ?? tool.name
   const subtitle = tool.displayInfo?.subtitle ?? ''
-  const glyph = isRunning ? '◈' : isError ? '✗' : '✓'
-  const glyphColor = isError
-    ? 'text-[var(--color-error-fg)]'
-    : isRunning
-      ? 'text-[var(--color-primary)]'
-      : 'text-[var(--color-muted-foreground)]'
+  const isContext = tool.displayInfo?.category === 'context'
+  const isRunning = tool.status === 'running'
+  const isError = tool.status === 'error'
+  const diff = useMemo(() => parseDiffCount(tool), [tool])
+
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      className="flex w-full cursor-pointer items-center gap-1.5 bg-transparent py-1 pl-0 pr-1 text-left transition-opacity hover:opacity-70"
+    >
+      <span
+        className={`shrink-0 text-xs font-medium ${isRunning ? 'shimmer-running' : ''}`}
+        style={{
+          color: isError ? 'var(--color-destructive, var(--color-error-fg))' : 'var(--color-muted-foreground)',
+        }}
+      >
+        {title}
+      </span>
+      {subtitle && (
+        <span
+          className="truncate font-mono text-xs"
+          style={{
+            color: isContext ? 'var(--color-muted-foreground)' : 'var(--color-accent-neutral)',
+          }}
+          // Subtitle may contain backend-escaped HTML (path highlights).
+          dangerouslySetInnerHTML={{ __html: subtitle }}
+        />
+      )}
+      <ChevronDownIcon
+        className={`h-3 w-3 shrink-0 text-[var(--color-muted-foreground)] transition-transform ${
+          expanded ? 'rotate-180' : ''
+        }`}
+      />
+      {diff && (diff.added > 0 || diff.deleted > 0) && (
+        <span className="ml-auto shrink-0 font-mono text-[10px] tabular-nums">
+          {diff.added > 0 && (
+            <span style={{ color: 'var(--color-success-fg)' }}>+{diff.added}</span>
+          )}
+          {diff.added > 0 && diff.deleted > 0 && (
+            <span className="mx-0.5" style={{ color: 'var(--color-muted-foreground)' }}>
+              /
+            </span>
+          )}
+          {diff.deleted > 0 && (
+            <span style={{ color: 'var(--color-error-fg)' }}>-{diff.deleted}</span>
+          )}
+        </span>
+      )}
+    </button>
+  )
+}
 
-  // Diff line counter for edit/multi_edit.
-  const diffCount = useMemo(() => {
-    if (tool.name !== 'edit' && tool.name !== 'multi_edit') return null
-    return parseDiffCount(tool)
-  }, [tool])
+// ─── Subagent header (Vue: SUBAGENT label + name + working + call count) ───
+
+function SubagentHeader({
+  tool,
+  expanded,
+  onToggle,
+}: {
+  tool: ToolCall
+  expanded: boolean
+  onToggle: () => void
+}) {
+  const name = useMemo(() => {
+    try {
+      const parsed = JSON.parse(tool.args)
+      return (parsed.name || parsed.description || 'subagent') as string
+    } catch {
+      return 'subagent'
+    }
+  }, [tool.args])
+
+  const statusColor =
+    tool.status === 'done'
+      ? 'var(--color-accent-neutral)'
+      : tool.status === 'error'
+        ? 'var(--color-destructive, var(--color-error-fg))'
+        : 'var(--color-muted-foreground)'
+
+  const glyph = tool.status === 'running' ? '◈' : tool.status === 'done' ? '✓' : '✗'
+  const childCount = tool.children?.length ?? 0
 
   return (
     <button
       type="button"
       onClick={onToggle}
-      className={`group flex w-full items-center gap-2 rounded-[var(--radius-md)] px-2 py-1 text-left text-[0.82rem] transition-colors hover:bg-[var(--neutral-wash-soft)] ${
-        isRunning ? 'shimmer-running' : ''
-      } ${isSubagent ? 'font-medium' : ''}`}
+      className="flex w-full cursor-pointer items-center gap-1.5 bg-transparent py-1 pl-0 pr-1 text-left transition-opacity hover:opacity-70"
     >
-      <span className={`shrink-0 text-xs ${glyphColor}`} aria-hidden>
+      <span
+        className={`shrink-0 text-[10px] ${tool.status === 'running' ? 'animate-pulse' : ''}`}
+        style={{ color: statusColor }}
+        aria-hidden
+      >
         {glyph}
       </span>
-      <span className="truncate text-[var(--color-foreground)]">{title}</span>
-      {subtitle && (
-        <span className="truncate text-[var(--color-muted-foreground)]" dangerouslySetInnerHTML={{ __html: subtitle }} />
+      <span
+        className="shrink-0 text-[10px] font-semibold uppercase tracking-wider"
+        style={{ color: 'var(--color-muted-foreground)' }}
+      >
+        Subagent
+      </span>
+      <span className="font-mono text-[11px]" style={{ color: 'var(--color-foreground)' }}>
+        {name}
+      </span>
+      {tool.status === 'running' && (
+        <span
+          className="animate-pulse text-[10px]"
+          style={{ color: 'var(--color-muted-foreground)' }}
+        >
+          working
+        </span>
       )}
-      {diffCount && (
-        <span className="ml-1 shrink-0 rounded-[var(--radius-xs)] bg-[var(--color-muted)] px-1 text-[0.65rem] text-[var(--color-muted-foreground)]">
-          {diffCount}
+      {childCount > 0 && (
+        <span
+          className="ml-auto text-[10px] tabular-nums"
+          style={{ color: 'var(--color-muted-foreground)' }}
+        >
+          {childCount} call{childCount === 1 ? '' : 's'}
         </span>
       )}
       <ChevronDownIcon
-        className={`ml-auto h-3.5 w-3.5 shrink-0 text-[var(--color-muted-foreground)] transition-transform ${expanded ? 'rotate-180' : ''}`}
+        className={`ml-1 h-3 w-3 shrink-0 text-[var(--color-muted-foreground)] transition-transform ${
+          expanded ? 'rotate-180' : ''
+        }`}
       />
     </button>
   )
 }
 
-/** Compute "+N/-M" from an edit/multi_edit tool's args. */
-function parseDiffCount(tool: ToolCall): string | null {
+/** Count +N/-M lines from edit/multi_edit args (matches Vue diffData). */
+function parseDiffCount(tool: ToolCall): { added: number; deleted: number } | null {
+  if (tool.name !== 'edit' && tool.name !== 'multi_edit') return null
   try {
     const parsed = JSON.parse(tool.args)
-    const edits = Array.isArray(parsed) ? parsed : [parsed]
-    let add = 0
-    let del = 0
-    for (const e of edits) {
-      if (typeof e.old_string === 'string') del += e.old_string.split('\n').length
-      if (typeof e.new_string === 'string') add += e.new_string.split('\n').length
+    if (tool.name === 'multi_edit' && Array.isArray(parsed.edits)) {
+      let added = 0
+      let deleted = 0
+      for (const e of parsed.edits as Array<{ old_string?: string; new_string?: string }>) {
+        if (e.old_string) deleted += e.old_string.split('\n').length
+        if (e.new_string) added += e.new_string.split('\n').length
+      }
+      return { added, deleted }
+    }
+    const oldStr: string = parsed.old_string || ''
+    const newStr: string = parsed.new_string || ''
+    const isCreate = !oldStr && !!newStr
+    return {
+      added: newStr ? newStr.split('\n').length : 0,
+      deleted: isCreate ? 0 : oldStr ? oldStr.split('\n').length : 0,
     }
-    return `+${add}/-${del}`
   } catch {
     return null
   }
diff --git a/packages/jcode-ui/src/components/ToolRegistryContext.tsx b/packages/jcode-ui/src/components/ToolRegistryContext.tsx
index 664ef0ea..81efdb28 100644
--- a/packages/jcode-ui/src/components/ToolRegistryContext.tsx
+++ b/packages/jcode-ui/src/components/ToolRegistryContext.tsx
@@ -15,13 +15,18 @@ import { DiffRenderer } from '../toolRenderers/diff.js'
 import { SearchRenderer } from '../toolRenderers/search.js'
 import { TodoRenderer } from '../toolRenderers/todo.js'
 import { SkillRenderer } from '../toolRenderers/skill.js'
-import { TeamListRenderer, TeamMessageRenderer, TeamCreateRenderer } from '../toolRenderers/team.js'
+import {
+  TeamListRenderer,
+  TeamMessageRenderer,
+  TeamCreateRenderer,
+  TeamSpawnRenderer,
+} from '../toolRenderers/team.js'
 import { BrowserShotRenderer } from '../toolRenderers/browserShot.js'
 import { GenericRenderer } from '../toolRenderers/generic.js'
 
 const Ctx = createContext<ToolRendererRegistry | null>(null)
 
-/** Build the jcode default registry (9 tool renderers + generic fallback). */
+/** Build the jcode default registry (matches Vue ToolCallCard renderType map). */
 export function createDefaultToolRegistry(): ToolRendererRegistry {
   const r = createToolRendererRegistry()
   const map: Record<string, ToolRenderer> = {
@@ -37,6 +42,7 @@ export function createDefaultToolRegistry(): ToolRendererRegistry {
     team_list: TeamListRenderer,
     team_send_message: TeamMessageRenderer,
     team_create: TeamCreateRenderer,
+    team_spawn: TeamSpawnRenderer,
     browser_screenshot: BrowserShotRenderer,
   }
   r.registerAll(map)
diff --git a/packages/jcode-ui/src/lib/markdown.ts b/packages/jcode-ui/src/lib/markdown.ts
index a360c466..dc67b069 100644
--- a/packages/jcode-ui/src/lib/markdown.ts
+++ b/packages/jcode-ui/src/lib/markdown.ts
@@ -28,10 +28,18 @@ marked.setOptions({
   gfm: true,
 })
 
+/** Wrap each <table> so wide GFM tables scroll inside a framed container. */
+function wrapTables(html: string): string {
+  return html
+    .replace(/<table(\s[^>]*)?>/gi, '<div class="jcode-md-table-wrap"><table$1>')
+    .replace(/<\/table>/gi, '</table></div>')
+}
+
 export function renderMarkdown(text: string): string {
   const raw = marked.parse(text) as string
-  return DOMPurify.sanitize(raw, {
-    ADD_ATTR: ['target'],
+  const withTables = wrapTables(typeof raw === 'string' ? raw : String(raw))
+  return DOMPurify.sanitize(withTables, {
+    ADD_ATTR: ['target', 'class'],
     ADD_TAGS: ['mark'],
   })
 }
diff --git a/packages/jcode-ui/src/styles/components.css b/packages/jcode-ui/src/styles/components.css
index 1fa9e4ed..8afab101 100644
--- a/packages/jcode-ui/src/styles/components.css
+++ b/packages/jcode-ui/src/styles/components.css
@@ -36,19 +36,182 @@
   text-underline-offset: 2px;
 }
 
-/* ─── Tool-call diff renderer ───
- * Red/green line tinting for edit/multi_edit. Uses the semantic status tokens
- * so generated themes recolor correctly. */
+/* ─── Markdown tables (GFM) ───
+ * Framed, scrollable, token-driven. renderMarkdown wraps each <table> in
+ * `.jcode-md-table-wrap` so wide tables scroll without breaking the layout. */
+.jcode-prose .jcode-md-table-wrap {
+  margin: 0.85em 0;
+  max-width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  /* Soft inset so the table reads as its own surface against the chat panel. */
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-foreground) 3%, transparent);
+  -webkit-overflow-scrolling: touch;
+}
+.jcode-prose .jcode-md-table-wrap > table,
+.jcode-prose table {
+  width: 100%;
+  min-width: max-content;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 0.84em;
+  line-height: 1.5;
+  margin: 0;
+  color: var(--color-foreground);
+}
+/* Bare tables (no wrap yet / paste) still get a basic frame. */
+.jcode-prose > table {
+  margin: 0.85em 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.jcode-prose th,
+.jcode-prose td {
+  padding: 0.55rem 0.85rem;
+  text-align: left;
+  vertical-align: top;
+  border-bottom: 1px solid var(--color-border);
+  border-right: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
+}
+.jcode-prose th:last-child,
+.jcode-prose td:last-child {
+  border-right: none;
+}
+.jcode-prose thead th {
+  background: var(--color-muted);
+  color: var(--color-foreground);
+  font-weight: 600;
+  font-size: 0.92em;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--color-border);
+}
+.jcode-prose tbody tr:last-child th,
+.jcode-prose tbody tr:last-child td {
+  border-bottom: none;
+}
+.jcode-prose tbody tr:nth-child(even) td,
+.jcode-prose tbody tr:nth-child(even) th {
+  background: color-mix(in srgb, var(--color-muted) 45%, transparent);
+}
+.jcode-prose tbody tr:hover td,
+.jcode-prose tbody tr:hover th {
+  background: var(--neutral-wash-soft);
+}
+/* Numeric-looking cells stay monospace-friendly when authors use code in cells. */
+.jcode-prose td code,
+.jcode-prose th code {
+  font-size: 0.9em;
+}
+
+/* ─── Shared conversation column ───
+ * Messages, tools, and the docked composer all use this so their outer edges
+ * line up (max-w-4xl + 20px horizontal inset — Vue App.vue column geometry). */
+.chat-col {
+  width: 100%;
+  max-width: 56rem;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  box-sizing: border-box;
+}
+
+/* ─── Tool call shell (matches Vue ToolCallCard.vue) ───
+ * Header stays outside; ONLY the expanded body gets a frame. The top edge of
+ * `.toolcall-body` is the visual divider between title and content. */
+.jcode-toolcall .toolcall-body {
+  overflow: hidden;
+  /* Vue: ml-0 mr-2 mt-1.5 mb-1.5 */
+  margin: 0.375rem 0.5rem 0.375rem 0;
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  /* Stronger top edge so title ↔ content separation reads as a 横线. */
+  box-shadow: 0 -1px 0 0 transparent;
+}
+.jcode-toolcall .toolcall-body[data-tool-status='error'] {
+  border-color: var(--color-destructive, var(--color-error-fg));
+}
+
+/* When expanded, a hairline under the header row reinforces the title/content split
+   even before the content box edge is noticed. */
+.jcode-toolcall[data-expanded='true'] > button {
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: 6px;
+  margin-bottom: 2px;
+}
+
+/* Subagent: children under a plain indent; output is a framed markdown block. */
+.jcode-toolcall .toolcall-subagent-body {
+  margin: 0.25rem 0.5rem 0.25rem 0;
+}
+.jcode-toolcall .toolcall-subagent-children {
+  max-height: 600px;
+  overflow-y: auto;
+}
+.jcode-toolcall .toolcall-subagent-starting {
+  padding: 0.5rem 0;
+  font-size: 0.75rem;
+  color: var(--color-muted-foreground);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+.jcode-toolcall .toolcall-subagent-output {
+  margin-top: 0.375rem;
+  max-height: 18rem;
+  overflow: auto;
+  padding: 0.625rem 0.875rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  background: var(--color-surface);
+  color: var(--color-foreground);
+  font-size: 0.8125rem;
+  line-height: 1.55;
+}
+.jcode-toolcall .toolcall-subagent-output.jcode-prose {
+  font-size: 0.8125rem;
+}
+.jcode-toolcall .toolcall-subagent-error {
+  margin-top: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-destructive, var(--color-error-fg));
+  border-radius: var(--radius-xl);
+  color: var(--color-destructive, var(--color-error-fg));
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  white-space: pre-wrap;
+}
+
+/* ─── Tool-call diff renderer ─── */
 .jcode-diff-table {
   width: 100%;
   border-collapse: collapse;
   font-family: var(--font-mono);
-  font-size: 0.8em;
+  font-size: 0.75rem;
 }
 .jcode-diff-table td {
   padding: 0 0.5rem;
   white-space: pre-wrap;
   word-break: break-word;
+  vertical-align: top;
+}
+.jcode-diff-table .jcode-diff-ln {
+  width: 1px;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  text-align: right;
+  white-space: nowrap;
+  user-select: none;
+  opacity: 0.6;
+}
+.jcode-diff-table .jcode-diff-sign {
+  width: 1rem;
+  padding: 0 0.25rem;
+  user-select: none;
+  font-weight: 700;
 }
 .jcode-diff-line-add {
   background: var(--color-success-bg);
@@ -67,34 +230,56 @@
   width: 100%;
   border-collapse: collapse;
   font-family: var(--font-mono);
-  font-size: 0.8em;
+  font-size: 0.75rem;
 }
 .jcode-file-table td {
-  padding: 0 0.5rem;
+  padding: 0 0.75rem 0 0;
   white-space: pre-wrap;
-  word-break: break-word;
+  word-break: break-all;
+  vertical-align: top;
+}
+.jcode-file-table tr:hover {
+  background: var(--neutral-wash-soft);
 }
 .jcode-file-lineno {
-  color: var(--color-muted-foreground);
+  color: color-mix(in srgb, var(--color-muted-foreground), transparent 40%);
   user-select: none;
   text-align: right;
-  min-width: 2.5rem;
-  border-right: 1px solid var(--color-border);
+  white-space: nowrap;
+  width: 1px;
+  padding: 0 0.75rem 0 0.5rem;
 }
 
-/* ─── Tool running shimmer ───
- * Wired to the `shimmer` keyframe defined in animations.css. Applied to the
- * header of a running tool call so the user sees live activity. Class name
- * matches the Vue app's `.shimmer-running` so generated themes stay consistent. */
+/* ─── Tool running shimmer (text gradient, matches Vue ToolCallCard) ─── */
+@keyframes shimmer-sweep {
+  0% {
+    background-position: -200% center;
+  }
+  100% {
+    background-position: 200% center;
+  }
+}
 .shimmer-running {
   background: linear-gradient(
     90deg,
-    var(--neutral-wash-soft) 0%,
-    var(--neutral-wash) 50%,
-    var(--neutral-wash-soft) 100%
+    var(--color-muted-foreground) 20%,
+    var(--color-foreground) 50%,
+    var(--color-muted-foreground) 80%
   );
-  background-size: 200% 100%;
-  animation: shimmer 1.6s ease-in-out infinite;
+  background-size: 200% auto;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent !important;
+  -webkit-text-fill-color: transparent;
+  animation: shimmer-sweep 2s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .shimmer-running {
+    animation: none;
+    background: none;
+    color: var(--color-muted-foreground) !important;
+    -webkit-text-fill-color: var(--color-muted-foreground);
+  }
 }
 
 /* ─── Selection ───
diff --git a/packages/jcode-ui/src/toolRenderers/browserShot.tsx b/packages/jcode-ui/src/toolRenderers/browserShot.tsx
index 8cc40fa4..3d8eb62a 100644
--- a/packages/jcode-ui/src/toolRenderers/browserShot.tsx
+++ b/packages/jcode-ui/src/toolRenderers/browserShot.tsx
@@ -1,11 +1,6 @@
 /**
- * BrowserShotRenderer — renders `browser_screenshot` tool calls.
- * Extracts the image_ref emitted in output (`image_ref=/api/browser/shots/…`)
- * and renders it inline. The image URL must be resolved against the API base by
- * the host; here we accept an optional `apiBase` via context to prefix it.
- *
- * If no image_ref is present (still running, or a non-screenshot browser tool),
- * falls back to a generic block.
+ * BrowserShotRenderer — `browser_screenshot`.
+ * Extracts image_ref from output and renders inline. Falls back to generic.
  */
 
 import { memo, useContext, useMemo } from 'react'
@@ -19,10 +14,19 @@ export const BrowserShotRenderer = memo(function BrowserShotRenderer(props: Tool
     const m = (props.output ?? '').match(/image_ref=(\/api\/browser\/shots\/[\w-]+\.png)/)
     return m ? `${apiBase}${m[1]}` : ''
   }, [props.output, apiBase])
+
   if (!src) return <GenericRenderer {...props} />
+
   return (
-    <div className="jcode-browser-shot my-1 overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)]">
-      <img src={src} alt="browser screenshot" className="max-h-[400px] w-full object-contain" />
+    <div className="jcode-browser-shot px-3 py-2" style={{ background: 'var(--color-surface)' }}>
+      <a href={src} target="_blank" rel="noopener noreferrer">
+        <img
+          src={src}
+          alt="page screenshot"
+          className="max-h-80 max-w-full rounded-md border"
+          style={{ borderColor: 'var(--color-border)' }}
+        />
+      </a>
     </div>
   )
 })
diff --git a/packages/jcode-ui/src/toolRenderers/diff.tsx b/packages/jcode-ui/src/toolRenderers/diff.tsx
index 1ca8966f..55b921c5 100644
--- a/packages/jcode-ui/src/toolRenderers/diff.tsx
+++ b/packages/jcode-ui/src/toolRenderers/diff.tsx
@@ -1,82 +1,100 @@
 /**
- * DiffRenderer — renders `edit`/`multi_edit` tool calls.
- * Builds a red/green diff table from old_string → new_string in the args.
- * Handles both single-edit and multi_edit (array) shapes.
+ * DiffRenderer — `edit` / `multi_edit` (matches Vue diff block).
+ * Sections of del/add lines with line numbers + sign column. No outer border.
  */
 
 import { memo, useMemo } from 'react'
 import type { ToolRendererProps } from 'jcode-ui-core/adapters'
+import { truncate } from './terminal.js'
 
-interface EditSpec {
-  old_string?: string
-  new_string?: string
-  path?: string
-  file_path?: string
+interface Section {
+  type: 'add' | 'del'
+  lines: string[]
 }
 
-interface DiffRow {
-  kind: 'add' | 'del' | 'ctx' | 'meta'
-  text: string
-}
+export const DiffRenderer = memo(function DiffRenderer({
+  name,
+  args,
+  output,
+  error,
+  status,
+}: ToolRendererProps) {
+  const { sections } = useMemo(() => buildDiff(name, args), [name, args])
+
+  if (sections.length > 0) {
+    return (
+      <div className="jcode-diff max-h-72 overflow-y-auto" style={{ background: 'var(--color-surface)' }}>
+        <table className="jcode-diff-table w-full border-collapse">
+          <tbody>
+            {sections.map((section, si) =>
+              section.lines.map((line, li) => (
+                <tr
+                  key={`${si}-${li}`}
+                  className={section.type === 'del' ? 'jcode-diff-line-del' : 'jcode-diff-line-add'}
+                >
+                  <td className="jcode-diff-ln">{li + 1}</td>
+                  <td className="jcode-diff-sign">{section.type === 'del' ? '−' : '+'}</td>
+                  <td>{line}</td>
+                </tr>
+              )),
+            )}
+          </tbody>
+        </table>
+        {output && !error && (
+          <div
+            className="px-3 py-1 font-mono text-[10px]"
+            style={{ color: 'var(--color-muted-foreground)' }}
+          >
+            {truncate(output, 200)}
+          </div>
+        )}
+      </div>
+    )
+  }
 
-export const DiffRenderer = memo(function DiffRenderer({ args }: ToolRendererProps) {
-  const { path, rows } = useMemo(() => buildDiff(args), [args])
-  if (rows.length === 0) {
-    return <div className="px-3 py-2 text-[var(--color-muted-foreground)]">No changes</div>
+  if (error) {
+    return (
+      <div
+        className="px-3 py-2 font-mono text-xs whitespace-pre-wrap"
+        style={{ color: 'var(--color-destructive, var(--color-error-fg))' }}
+      >
+        {error}
+      </div>
+    )
+  }
+  if (status === 'running') {
+    return (
+      <div className="animate-pulse px-3 py-3 text-xs" style={{ color: 'var(--color-muted-foreground)' }}>
+        Applying…
+      </div>
+    )
   }
   return (
-    <div className="jcode-diff jcode-selectable my-1 overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--code-bg)]">
-      {path && (
-        <div className="truncate border-b border-[var(--color-border)] px-3 py-1 font-mono text-[0.72rem] text-[var(--color-muted-foreground)]">
-          {path}
-        </div>
-      )}
-      <table className="jcode-diff-table">
-        <tbody>
-          {rows.map((r, i) => (
-            <tr key={i} className={rowClass(r.kind)}>
-              <td className="w-4 select-none text-center">
-                {r.kind === 'add' ? '+' : r.kind === 'del' ? '-' : ''}
-              </td>
-              <td>{r.text}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+    <div className="px-3 py-2 text-xs italic" style={{ color: 'var(--color-muted-foreground)' }}>
+      No changes
     </div>
   )
 })
 
-function rowClass(kind: DiffRow['kind']): string {
-  switch (kind) {
-    case 'add':
-      return 'jcode-diff-line-add'
-    case 'del':
-      return 'jcode-diff-line-del'
-    case 'meta':
-      return 'jcode-diff-line-meta'
-    default:
-      return ''
-  }
-}
-
-function buildDiff(args: string): { path: string; rows: DiffRow[] } {
-  let specs: EditSpec[]
+function buildDiff(name: string, args: string): { sections: Section[] } {
   try {
     const parsed = JSON.parse(args)
-    specs = Array.isArray(parsed) ? parsed : [parsed]
+    if (name === 'multi_edit' && Array.isArray(parsed.edits)) {
+      const sections: Section[] = []
+      for (const edit of parsed.edits as Array<{ old_string?: string; new_string?: string }>) {
+        if (edit.old_string) sections.push({ type: 'del', lines: edit.old_string.split('\n') })
+        if (edit.new_string) sections.push({ type: 'add', lines: edit.new_string.split('\n') })
+      }
+      return { sections }
+    }
+    const oldStr: string = parsed.old_string || ''
+    const newStr: string = parsed.new_string || ''
+    const isCreate = !oldStr && !!newStr
+    const sections: Section[] = []
+    if (oldStr && !isCreate) sections.push({ type: 'del', lines: oldStr.split('\n') })
+    if (newStr) sections.push({ type: 'add', lines: newStr.split('\n') })
+    return { sections }
   } catch {
-    return { path: '', rows: [] }
-  }
-  const path = specs[0]?.path ?? specs[0]?.file_path ?? ''
-  const rows: DiffRow[] = []
-  for (const s of specs) {
-    const oldLines = (s.old_string ?? '').split('\n')
-    const newLines = (s.new_string ?? '').split('\n')
-    rows.push({ kind: 'del', text: '── old ──' })
-    for (const l of oldLines) rows.push({ kind: 'del', text: l })
-    rows.push({ kind: 'add', text: '── new ──' })
-    for (const l of newLines) rows.push({ kind: 'add', text: l })
+    return { sections: [] }
   }
-  return { path, rows }
 }
diff --git a/packages/jcode-ui/src/toolRenderers/fileViewer.tsx b/packages/jcode-ui/src/toolRenderers/fileViewer.tsx
index 83f0cf2c..e8f7090c 100644
--- a/packages/jcode-ui/src/toolRenderers/fileViewer.tsx
+++ b/packages/jcode-ui/src/toolRenderers/fileViewer.tsx
@@ -1,69 +1,95 @@
 /**
- * FileViewerRenderer — renders `read`/`write` tool calls.
- * Parses output lines of the form `   N│content` (jcode's read format) into a
- * line-numbered table. Falls back to a plain <pre> if the format doesn't match.
+ * FileViewerRenderer — `read` / `write` (matches Vue file-viewer block).
+ * read: parse `   N│content` lines. write: raw content from args with generated line numbers.
+ * No outer border — lives inside `.toolcall-body`.
  */
 
 import { memo, useMemo } from 'react'
 import type { ToolRendererProps } from 'jcode-ui-core/adapters'
-import { truncate } from './terminal.js'
 
 interface FileLine {
-  no: string
-  content: string
+  num: number
+  text: string
 }
 
-export const FileViewerRenderer = memo(function FileViewerRenderer({ args, output }: ToolRendererProps) {
-  let path = ''
-  try {
-    const parsed = JSON.parse(args)
-    path = parsed.path ?? parsed.file_path ?? ''
-  } catch {
-    // ignore
-  }
-  const lines = useMemo(() => parseLines(output), [output])
-  return (
-    <div className="jcode-file-viewer jcode-selectable my-1 overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--code-bg)]">
-      {path && (
-        <div className="truncate border-b border-[var(--color-border)] px-3 py-1 font-mono text-[0.72rem] text-[var(--color-muted-foreground)]">
-          {path}
-        </div>
-      )}
-      {lines ? (
-        <table className="jcode-file-table max-h-[500px] overflow-auto">
+export const FileViewerRenderer = memo(function FileViewerRenderer({
+  name,
+  args,
+  output,
+  error,
+  status,
+}: ToolRendererProps) {
+  const lines = useMemo(() => buildLines(name, args, output), [name, args, output])
+
+  if (lines.length > 0) {
+    return (
+      <div className="jcode-file-viewer max-h-72 overflow-y-auto" style={{ background: 'var(--color-surface)' }}>
+        <table className="jcode-file-table w-full border-collapse">
           <tbody>
-            {lines.map((l, i) => (
-              <tr key={i}>
-                <td className="jcode-file-lineno">{l.no}</td>
-                <td className="text-[var(--color-foreground)]">{l.content}</td>
+            {lines.map((l) => (
+              <tr key={l.num}>
+                <td className="jcode-file-lineno">{l.num}</td>
+                <td style={{ color: 'var(--color-foreground)' }}>{l.text}</td>
               </tr>
             ))}
           </tbody>
         </table>
-      ) : (
-        <pre className="max-h-[500px] overflow-auto px-3 py-2 font-mono text-[0.76rem] text-[var(--color-foreground)]">
-          {truncate(output ?? '', 30000)}
-        </pre>
-      )}
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div
+        className="px-3 py-2 font-mono text-xs whitespace-pre-wrap"
+        style={{ color: 'var(--color-destructive, var(--color-error-fg))' }}
+      >
+        {error}
+      </div>
+    )
+  }
+  if (status === 'running') {
+    return (
+      <div className="animate-pulse px-3 py-3 text-xs" style={{ color: 'var(--color-muted-foreground)' }}>
+        Loading…
+      </div>
+    )
+  }
+  return (
+    <div className="px-3 py-2 text-xs italic" style={{ color: 'var(--color-muted-foreground)' }}>
+      No content
     </div>
   )
 })
 
-/** Parse jcode's `   N│content` read format. Returns null if not matching. */
-function parseLines(output?: string): FileLine[] | null {
-  if (!output) return null
-  const raw = output.split('\n')
-  const out: FileLine[] = []
-  let matched = 0
-  for (const line of raw) {
-    const m = line.match(/^\s*(\d+)│(.*)$/)
-    if (m) {
-      matched++
-      out.push({ no: m[1] ?? '', content: m[2] ?? '' })
-    } else {
-      out.push({ no: '', content: line })
+function buildLines(name: string, args: string, output?: string): FileLine[] {
+  // write: content lives in args
+  if (name === 'write') {
+    try {
+      const parsed = JSON.parse(args)
+      const content: string = parsed.content || ''
+      if (!content) return []
+      return content.split('\n').map((text, i) => ({ num: i + 1, text }))
+    } catch {
+      return []
     }
   }
-  // Only treat as line-numbered if a meaningful fraction matched the format.
-  return matched >= Math.max(1, Math.floor(out.length / 3)) ? out : null
+  // read: output is `   N│content` (or raw)
+  if (!output) return []
+  const raw = output.split('\n')
+  const numbered = raw
+    .map((line) => {
+      const m = line.match(/^\s*(\d+)│(.*)$/)
+      if (m) return { num: parseInt(m[1] ?? '0', 10), text: m[2] ?? '' }
+      return null
+    })
+    .filter((x): x is FileLine => x !== null)
+  // Drop trailing empty line artifact
+  if (numbered.length) {
+    return numbered.filter((_, i, arr) => !(i === arr.length - 1 && _.text === ''))
+  }
+  // Fallback: raw content with generated numbers
+  return raw
+    .filter((line, i, arr) => !(i === arr.length - 1 && line === ''))
+    .map((text, i) => ({ num: i + 1, text }))
 }
diff --git a/packages/jcode-ui/src/toolRenderers/generic.tsx b/packages/jcode-ui/src/toolRenderers/generic.tsx
index ecebdb4c..e756e085 100644
--- a/packages/jcode-ui/src/toolRenderers/generic.tsx
+++ b/packages/jcode-ui/src/toolRenderers/generic.tsx
@@ -1,41 +1,84 @@
 /**
- * GenericRenderer — fallback renderer for tools without a specific renderer.
- * Shows args + output + error in labeled columns.
+ * GenericRenderer — fallback (matches Vue left-border block).
+ * No full card chrome — a left accent border inside the shared toolcall-body.
  */
 
 import { memo } from 'react'
 import type { ToolRendererProps } from 'jcode-ui-core/adapters'
 import { truncate } from './terminal.js'
 
-export const GenericRenderer = memo(function GenericRenderer({ args, output, error }: ToolRendererProps) {
+export const GenericRenderer = memo(function GenericRenderer({
+  args,
+  output,
+  error,
+  status,
+}: ToolRendererProps) {
+  const borderColor =
+    status === 'error' || error
+      ? 'var(--color-destructive, var(--color-error-fg))'
+      : 'var(--color-border)'
+
   return (
-    <div className="jcode-tool-generic jcode-selectable my-1 space-y-1 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--code-bg)] px-3 py-2 font-mono text-[0.76rem]">
+    <div
+      className="jcode-tool-generic max-h-64 overflow-y-auto border-l-2 py-2 pl-3 ml-3 font-mono text-xs"
+      style={{ borderColor }}
+    >
       {args && args !== '{}' && (
-        <div>
-          <div className="text-[0.68rem] uppercase text-[var(--color-muted-foreground)]">args</div>
-          <pre className="whitespace-pre-wrap break-words text-[var(--color-foreground)]">{truncate(prettyArgs(args), 8000)}</pre>
+        <div className="mb-1.5">
+          <span
+            className="text-[10px] uppercase tracking-wider"
+            style={{ color: 'var(--color-muted-foreground)' }}
+          >
+            args
+          </span>
+          <div className="mt-0.5" style={{ color: 'var(--color-muted-foreground)' }}>
+            {formatArgs(args)}
+          </div>
         </div>
       )}
       {output && (
-        <div>
-          <div className="text-[0.68rem] uppercase text-[var(--color-muted-foreground)]">output</div>
-          <pre className="whitespace-pre-wrap break-words text-[var(--color-foreground)]">{truncate(output, 20000)}</pre>
+        <div className="mt-2">
+          <span
+            className="text-[10px] uppercase tracking-wider"
+            style={{ color: 'var(--color-muted-foreground)' }}
+          >
+            output
+          </span>
+          <div className="mt-0.5 whitespace-pre-wrap" style={{ color: 'var(--color-muted-foreground)' }}>
+            {truncate(output, 500)}
+          </div>
         </div>
       )}
       {error && (
-        <div>
-          <div className="text-[0.68rem] uppercase text-[var(--color-muted-foreground)]">error</div>
-          <pre className="whitespace-pre-wrap break-words text-[var(--color-error-fg)]">{truncate(error, 8000)}</pre>
+        <div className="mt-2">
+          <span
+            className="text-[10px] uppercase tracking-wider"
+            style={{ color: 'var(--color-destructive, var(--color-error-fg))' }}
+          >
+            error
+          </span>
+          <div
+            className="mt-0.5 whitespace-pre-wrap"
+            style={{ color: 'var(--color-destructive, var(--color-error-fg))' }}
+          >
+            {truncate(error, 500)}
+          </div>
         </div>
       )}
     </div>
   )
 })
 
-function prettyArgs(args: string): string {
+function formatArgs(args: string): string {
   try {
-    return JSON.stringify(JSON.parse(args), null, 2)
+    const parsed = JSON.parse(args)
+    return Object.entries(parsed)
+      .map(
+        ([k, v]) =>
+          `${k}: ${typeof v === 'string' ? v.slice(0, 80) : JSON.stringify(v).slice(0, 80)}`,
+      )
+      .join(', ')
   } catch {
-    return args
+    return args.slice(0, 120)
   }
 }
diff --git a/packages/jcode-ui/src/toolRenderers/index.ts b/packages/jcode-ui/src/toolRenderers/index.ts
index 9f6dc7bf..99ca1ff2 100644
--- a/packages/jcode-ui/src/toolRenderers/index.ts
+++ b/packages/jcode-ui/src/toolRenderers/index.ts
@@ -4,6 +4,11 @@ export * from './diff.js'
 export * from './search.js'
 export * from './todo.js'
 export * from './skill.js'
-export * from './team.js'
+export {
+  TeamListRenderer,
+  TeamMessageRenderer,
+  TeamCreateRenderer,
+  TeamSpawnRenderer,
+} from './team.js'
 export * from './browserShot.js'
 export * from './generic.js'
diff --git a/packages/jcode-ui/src/toolRenderers/search.tsx b/packages/jcode-ui/src/toolRenderers/search.tsx
index 959c0b01..641683c0 100644
--- a/packages/jcode-ui/src/toolRenderers/search.tsx
+++ b/packages/jcode-ui/src/toolRenderers/search.tsx
@@ -1,6 +1,6 @@
 /**
- * SearchRenderer — renders `grep` tool calls.
- * Parses `file:line:content` matches from the output.
+ * SearchRenderer — `grep` (matches Vue search block).
+ * Shows args summary + file:line hits + match count. No outer border.
  */
 
 import { memo, useMemo } from 'react'
@@ -8,48 +8,108 @@ import type { ToolRendererProps } from 'jcode-ui-core/adapters'
 
 interface GrepHit {
   file: string
-  line?: string
+  lineNum: number
   content: string
+  isRef: boolean
 }
 
-export const SearchRenderer = memo(function SearchRenderer({ output }: ToolRendererProps) {
-  const hits = useMemo(() => parseGrep(output), [output])
-  if (hits.length === 0) {
-    return <div className="px-3 py-2 text-[var(--color-muted-foreground)]">No matches</div>
-  }
+export const SearchRenderer = memo(function SearchRenderer({
+  args,
+  output,
+  error,
+  status,
+}: ToolRendererProps) {
+  const argsDisplay = useMemo(() => formatArgs(args), [args])
+  const { lines, count } = useMemo(() => parseResults(output), [output])
+
   return (
-    <div className="jcode-search jcode-selectable my-1 max-h-[500px] overflow-auto rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--code-bg)] px-3 py-2 font-mono text-[0.76rem]">
-      <div className="mb-1 text-[0.7rem] text-[var(--color-muted-foreground)]">{hits.length} matches</div>
-      {hits.map((h, i) => (
-        <div key={i} className="py-0.5">
-          <span className="text-[var(--color-primary)]">{h.file}</span>
-          {h.line && <span className="text-[var(--color-muted-foreground)]">:{h.line}</span>}
-          <span className="text-[var(--color-muted-foreground)]">:</span>
-          <span className="text-[var(--color-foreground)]">{h.content}</span>
+    <div
+      className="jcode-search max-h-72 overflow-y-auto px-3 py-2"
+      style={{ background: 'var(--color-surface)' }}
+    >
+      {argsDisplay && (
+        <div
+          className="mb-2 whitespace-pre-wrap font-mono text-[11px]"
+          style={{ color: 'var(--color-muted-foreground)' }}
+        >
+          {argsDisplay}
+        </div>
+      )}
+      {lines.length > 0 ? (
+        lines.map((line, i) => (
+          <div key={i} className="py-0.5">
+            {line.isRef && (
+              <div className="flex items-baseline gap-1.5 font-mono text-[10px]">
+                <span style={{ color: 'var(--color-accent-neutral)' }}>{line.file}</span>
+                <span style={{ color: 'var(--color-muted-foreground)' }}>:{line.lineNum}</span>
+              </div>
+            )}
+            <div
+              className="whitespace-pre-wrap font-mono text-xs"
+              style={{ color: 'var(--color-foreground)' }}
+            >
+              {line.content}
+            </div>
+          </div>
+        ))
+      ) : status === 'running' ? (
+        <div className="animate-pulse py-1 text-xs" style={{ color: 'var(--color-muted-foreground)' }}>
+          Searching…
+        </div>
+      ) : error ? (
+        <div
+          className="whitespace-pre-wrap py-1 font-mono text-xs"
+          style={{ color: 'var(--color-destructive, var(--color-error-fg))' }}
+        >
+          {error}
         </div>
-      ))}
+      ) : (
+        <div className="py-1 text-xs italic" style={{ color: 'var(--color-muted-foreground)' }}>
+          No results
+        </div>
+      )}
+      {count !== null && (
+        <div className="mt-1.5 font-mono text-[10px]" style={{ color: 'var(--color-muted-foreground)' }}>
+          {count} matches found
+        </div>
+      )}
     </div>
   )
 })
 
-function parseGrep(output?: string): GrepHit[] {
-  if (!output) return []
-  const hits: GrepHit[] = []
-  for (const line of output.split('\n')) {
-    if (!line.trim()) continue
-    // ripgrep default: file:line:content
-    const m = line.match(/^([^:]+):(\d+):(.*)$/)
-    if (m) {
-      hits.push({ file: m[1] ?? '', line: m[2], content: m[3] ?? '' })
-      continue
-    }
-    // file:content (no line number)
-    const m2 = line.match(/^([^:]+):(.*)$/)
-    if (m2) {
-      hits.push({ file: m2[1] ?? '', content: m2[2] ?? '' })
-      continue
-    }
-    hits.push({ file: '', content: line })
+function formatArgs(args: string): string {
+  try {
+    const parsed = JSON.parse(args)
+    return Object.entries(parsed)
+      .filter(([, v]) => v !== undefined && v !== null && v !== '')
+      .map(([k, v]) => `${k}: ${typeof v === 'string' ? v : JSON.stringify(v)}`)
+      .join('\n')
+  } catch {
+    return args
   }
-  return hits
+}
+
+function parseResults(output?: string): { lines: GrepHit[]; count: number | null } {
+  if (!output) return { lines: [], count: null }
+  const countMatch = output.match(/\((\d+) (?:matches found|results?)\)/)
+  const count = countMatch ? parseInt(countMatch[1] ?? '', 10) : null
+  const lines = output
+    .split('\n')
+    .filter((l) => {
+      const t = l.trim()
+      return t && !t.startsWith('(')
+    })
+    .map((line) => {
+      const m = line.match(/^([^:]+):(\d+):(.*)$/)
+      if (m) {
+        return {
+          file: m[1] ?? '',
+          lineNum: parseInt(m[2] ?? '0', 10),
+          content: m[3] ?? '',
+          isRef: true,
+        }
+      }
+      return { file: '', lineNum: 0, content: line, isRef: false }
+    })
+  return { lines, count }
 }
diff --git a/packages/jcode-ui/src/toolRenderers/skill.tsx b/packages/jcode-ui/src/toolRenderers/skill.tsx
index a9a205c9..fe58c781 100644
--- a/packages/jcode-ui/src/toolRenderers/skill.tsx
+++ b/packages/jcode-ui/src/toolRenderers/skill.tsx
@@ -1,14 +1,16 @@
 /**
- * SkillRenderer — renders `load_skill` tool calls.
- * Parses the skill name from args and description from output (format:
- * `description="..."`).
+ * SkillRenderer — `load_skill` (matches Vue skill block). No outer border / icon.
  */
 
 import { memo, useMemo } from 'react'
-import { SparklesIcon } from '@heroicons/react/24/outline'
 import type { ToolRendererProps } from 'jcode-ui-core/adapters'
 
-export const SkillRenderer = memo(function SkillRenderer({ args, output }: ToolRendererProps) {
+export const SkillRenderer = memo(function SkillRenderer({
+  args,
+  output,
+  error,
+  status,
+}: ToolRendererProps) {
   const { name, description } = useMemo(() => {
     let n = ''
     try {
@@ -17,15 +19,34 @@ export const SkillRenderer = memo(function SkillRenderer({ args, output }: ToolR
       // ignore
     }
     const descMatch = (output ?? '').match(/description="([^"]*)"/)
-    return { name: n, description: descMatch ? descMatch[1] ?? '' : '' }
+    return { name: n, description: descMatch ? (descMatch[1] ?? '') : '' }
   }, [args, output])
+
   return (
-    <div className="jcode-skill my-1 flex items-start gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--code-bg)] px-3 py-2">
-      <SparklesIcon className="mt-0.5 h-4 w-4 shrink-0 text-[var(--color-primary)]" />
-      <div className="min-w-0">
-        <div className="font-medium text-[var(--color-foreground)]">{name}</div>
-        {description && <div className="text-[0.78rem] text-[var(--color-muted-foreground)]">{description}</div>}
+    <div className="jcode-skill px-3 py-2.5" style={{ background: 'var(--color-surface)' }}>
+      <div className="flex items-center gap-2">
+        <span className="font-mono text-[11px] font-semibold" style={{ color: 'var(--color-foreground)' }}>
+          {name}
+        </span>
+        {status === 'running' && (
+          <span className="animate-pulse text-[10px]" style={{ color: 'var(--color-muted-foreground)' }}>
+            loading
+          </span>
+        )}
       </div>
+      {description && (
+        <div className="mt-1 text-[11px] leading-snug" style={{ color: 'var(--color-muted-foreground)' }}>
+          {description}
+        </div>
+      )}
+      {error && (
+        <div
+          className="mt-1 font-mono text-[11px]"
+          style={{ color: 'var(--color-destructive, var(--color-error-fg))' }}
+        >
+          {error}
+        </div>
+      )}
     </div>
   )
 })
diff --git a/packages/jcode-ui/src/toolRenderers/team.tsx b/packages/jcode-ui/src/toolRenderers/team.tsx
index f9a2b8aa..557d64c8 100644
--- a/packages/jcode-ui/src/toolRenderers/team.tsx
+++ b/packages/jcode-ui/src/toolRenderers/team.tsx
@@ -1,11 +1,11 @@
 /**
- * TeamRenderers — renders team_* tool calls.
- * Three renderers: team_list (member table), team_send_message (message card),
- * team_create (team summary). Output formats parsed from the Vue ToolCallCard.
+ * Team renderers — team_list / team_send_message / team_create / team_spawn.
+ * Layouts match Vue ToolCallCard.vue (dot rows, not tables). No outer borders.
  */
 
 import { memo, useMemo } from 'react'
 import type { ToolRendererProps } from 'jcode-ui-core/adapters'
+import { truncate } from './terminal.js'
 
 interface TeamMember {
   name: string
@@ -14,70 +14,288 @@ interface TeamMember {
   progress: string
 }
 
-export const TeamListRenderer = memo(function TeamListRenderer({ output }: ToolRendererProps) {
+function memberStatusColor(status: string): string {
+  if (status === 'running' || status === 'busy') return 'var(--color-accent-neutral)'
+  if (status === 'done' || status === 'finished') return 'var(--color-success-fg)'
+  if (status === 'error') return 'var(--color-destructive, var(--color-error-fg))'
+  return 'var(--color-muted-foreground)'
+}
+
+export const TeamListRenderer = memo(function TeamListRenderer({
+  output,
+  error,
+  status,
+}: ToolRendererProps) {
   const { teamName, members } = useMemo(() => parseTeamList(output), [output])
   return (
-    <div className="jcode-team-list my-1 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--code-bg)] px-3 py-2">
+    <div className="jcode-team-list max-h-64 overflow-y-auto px-3 py-2" style={{ background: 'var(--color-surface)' }}>
       {teamName && (
-        <div className="mb-2 font-medium text-[var(--color-foreground)]">
-          Team: {teamName} <span className="text-[var(--color-muted-foreground)]">({members.length})</span>
+        <div
+          className="mb-2 flex items-center gap-2 pb-1.5"
+          style={{ borderBottom: '1px solid var(--color-border)' }}
+        >
+          <span
+            className="text-[10px] font-semibold uppercase tracking-wider"
+            style={{ color: 'var(--color-muted-foreground)' }}
+          >
+            Team
+          </span>
+          <span className="font-mono text-xs font-semibold" style={{ color: 'var(--color-foreground)' }}>
+            {teamName}
+          </span>
+          <span
+            className="ml-auto text-[10px] tabular-nums"
+            style={{ color: 'var(--color-muted-foreground)' }}
+          >
+            {members.length} member{members.length === 1 ? '' : 's'}
+          </span>
         </div>
       )}
-      <table className="w-full text-[0.78rem]">
-        <thead>
-          <tr className="text-left text-[0.7rem] text-[var(--color-muted-foreground)]">
-            <th className="py-1 pr-2">member</th>
-            <th className="py-1 pr-2">status</th>
-            <th className="py-1 pr-2">type</th>
-            <th className="py-1">progress</th>
-          </tr>
-        </thead>
-        <tbody>
+      {members.length > 0 ? (
+        <div className="space-y-0.5">
           {members.map((m, i) => (
-            <tr key={i} className="border-t border-[var(--color-border)]">
-              <td className="py-1 pr-2 text-[var(--color-primary)]">@{m.name}</td>
-              <td className="py-1 pr-2 text-[var(--color-foreground)]">{m.status}</td>
-              <td className="py-1 pr-2 text-[var(--color-muted-foreground)]">{m.type}</td>
-              <td className="py-1 text-[var(--color-muted-foreground)]">{m.progress}</td>
-            </tr>
+            <div key={`${m.name}-${i}`} className="flex items-center gap-2 py-0.5">
+              <span
+                className="w-3 shrink-0 text-center text-[11px]"
+                style={{ color: memberStatusColor(m.status) }}
+              >
+                ●
+              </span>
+              <span className="flex-1 font-mono text-xs" style={{ color: 'var(--color-foreground)' }}>
+                @{m.name}
+              </span>
+              <span
+                className="rounded px-1.5 py-0.5 font-mono text-[10px] tabular-nums"
+                style={{ background: 'var(--color-muted)', color: 'var(--color-muted-foreground)' }}
+              >
+                {m.status}
+              </span>
+              {m.type && (
+                <span className="text-[10px]" style={{ color: 'var(--color-muted-foreground)' }}>
+                  {m.type}
+                </span>
+              )}
+            </div>
           ))}
-        </tbody>
-      </table>
+        </div>
+      ) : status === 'running' ? (
+        <div className="animate-pulse py-1 text-xs" style={{ color: 'var(--color-muted-foreground)' }}>
+          Loading…
+        </div>
+      ) : (
+        <div className="py-1 text-xs italic" style={{ color: 'var(--color-muted-foreground)' }}>
+          No teammates
+        </div>
+      )}
+      {error && (
+        <div
+          className="mt-1.5 font-mono text-xs"
+          style={{ color: 'var(--color-destructive, var(--color-error-fg))' }}
+        >
+          {error}
+        </div>
+      )}
     </div>
   )
 })
 
-export const TeamMessageRenderer = memo(function TeamMessageRenderer({ args, output }: ToolRendererProps) {
-  const { to, message } = useMemo(() => {
-    let t = ''
-    let m = ''
+export const TeamCreateRenderer = memo(function TeamCreateRenderer({
+  args,
+  output,
+  error,
+  status,
+}: ToolRendererProps) {
+  const data = useMemo(() => {
     try {
       const parsed = JSON.parse(args)
-      t = parsed.to ?? parsed.recipient ?? ''
-      m = parsed.message ?? parsed.content ?? ''
+      const leadMatch = (output ?? '').match(/Lead agent: (\S+)/)
+      return {
+        teamName: (parsed.team_name || '') as string,
+        description: (parsed.description || '') as string,
+        lead: leadMatch ? (leadMatch[1] ?? '') : '',
+      }
     } catch {
-      // ignore
+      return { teamName: '', description: '', lead: '' }
     }
-    if (!m && output) m = output
-    return { to: t, message: m }
   }, [args, output])
+
   return (
-    <div className="jcode-team-message my-1 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--code-bg)] px-3 py-2">
-      {to && <div className="text-[0.78rem] text-[var(--color-muted-foreground)]">→ @{to}</div>}
-      <div className="mt-1 text-[0.82rem] text-[var(--color-foreground)]">{message}</div>
+    <div className="jcode-team-create px-3 py-2.5" style={{ background: 'var(--color-surface)' }}>
+      <div className="mb-1 flex items-center gap-2">
+        <span className="font-mono text-xs font-semibold" style={{ color: 'var(--color-foreground)' }}>
+          {data.teamName}
+        </span>
+        {status === 'done' && !error && (
+          <span className="ml-auto text-[10px] font-semibold" style={{ color: 'var(--color-accent-neutral)' }}>
+            created
+          </span>
+        )}
+        {status === 'running' && (
+          <span className="ml-auto animate-pulse text-[10px]" style={{ color: 'var(--color-muted-foreground)' }}>
+            creating
+          </span>
+        )}
+      </div>
+      {data.description && (
+        <div className="text-[11px] leading-snug" style={{ color: 'var(--color-muted-foreground)' }}>
+          {data.description}
+        </div>
+      )}
+      {data.lead && (
+        <div className="mt-1.5 font-mono text-[10px]" style={{ color: 'var(--color-muted-foreground)' }}>
+          Lead {data.lead}
+        </div>
+      )}
+      {error && (
+        <div
+          className="mt-1 font-mono text-xs"
+          style={{ color: 'var(--color-destructive, var(--color-error-fg))' }}
+        >
+          {error}
+        </div>
+      )}
     </div>
   )
 })
 
-export const TeamCreateRenderer = memo(function TeamCreateRenderer({ output }: ToolRendererProps) {
-  const teamName = useMemo(() => {
-    const m = (output ?? '').match(/Team:\s*(.+?)(?:\s+\(|$)/)
-    return m ? m[1] ?? '' : ''
-  }, [output])
+export const TeamSpawnRenderer = memo(function TeamSpawnRenderer({
+  args,
+  output,
+  error,
+  status,
+}: ToolRendererProps) {
+  const data = useMemo(() => {
+    try {
+      const parsed = JSON.parse(args)
+      const idMatch = (output ?? '').match(/\(ID: ([^)]+)\)/)
+      return {
+        name: (parsed.name || '') as string,
+        prompt: (parsed.prompt || '') as string,
+        agentType: (parsed.agent_type || '') as string,
+        id: idMatch ? (idMatch[1] ?? '') : '',
+      }
+    } catch {
+      return { name: '', prompt: '', agentType: '', id: '' }
+    }
+  }, [args, output])
+
   return (
-    <div className="jcode-team-create my-1 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--code-bg)] px-3 py-2">
-      <span className="text-[0.82rem] text-[var(--color-foreground)]">Created team </span>
-      <span className="font-medium text-[var(--color-primary)]">{teamName}</span>
+    <div className="jcode-team-spawn px-3 py-2.5" style={{ background: 'var(--color-surface)' }}>
+      <div className="mb-1 flex items-center gap-2">
+        <span className="font-mono text-xs font-semibold" style={{ color: 'var(--color-foreground)' }}>
+          @{data.name}
+        </span>
+        {data.agentType && (
+          <span
+            className="rounded px-1.5 py-0.5 text-[10px]"
+            style={{ background: 'var(--color-muted)', color: 'var(--color-muted-foreground)' }}
+          >
+            {data.agentType}
+          </span>
+        )}
+        {status === 'done' && !error && (
+          <span className="ml-auto text-[10px] font-semibold" style={{ color: 'var(--color-accent-neutral)' }}>
+            running
+          </span>
+        )}
+        {status === 'running' && (
+          <span className="ml-auto animate-pulse text-[10px]" style={{ color: 'var(--color-muted-foreground)' }}>
+            spawning
+          </span>
+        )}
+      </div>
+      {data.prompt && (
+        <div
+          className="text-[11px] leading-snug"
+          style={{
+            color: 'var(--color-muted-foreground)',
+            fontStyle: 'italic',
+            whiteSpace: 'pre-wrap',
+          }}
+        >
+          {truncate(data.prompt, 150)}
+        </div>
+      )}
+      {data.id && (
+        <div className="mt-1.5 font-mono text-[10px]" style={{ color: 'var(--color-muted-foreground)' }}>
+          ID {data.id}
+        </div>
+      )}
+      {error && (
+        <div
+          className="mt-1 font-mono text-xs"
+          style={{ color: 'var(--color-destructive, var(--color-error-fg))' }}
+        >
+          {error}
+        </div>
+      )}
+    </div>
+  )
+})
+
+export const TeamMessageRenderer = memo(function TeamMessageRenderer({
+  args,
+  error,
+  status,
+}: ToolRendererProps) {
+  const data = useMemo(() => {
+    try {
+      const parsed = JSON.parse(args)
+      return {
+        to: (parsed.to || '') as string,
+        message: (parsed.message || '') as string,
+        summary: (parsed.summary || '') as string,
+      }
+    } catch {
+      return { to: '', message: '', summary: '' }
+    }
+  }, [args])
+
+  return (
+    <div className="jcode-team-message px-3 py-2.5" style={{ background: 'var(--color-surface)' }}>
+      <div className="mb-1.5 flex items-center gap-2">
+        <span className="text-[10px]" style={{ color: 'var(--color-muted-foreground)' }}>
+          →
+        </span>
+        <span className="font-mono text-xs font-semibold" style={{ color: 'var(--color-foreground)' }}>
+          {data.to === '*' ? 'all' : `@${data.to}`}
+        </span>
+        {status === 'done' && !error && (
+          <span className="ml-auto text-[10px] font-semibold" style={{ color: 'var(--color-accent-neutral)' }}>
+            sent
+          </span>
+        )}
+        {status === 'running' && (
+          <span className="ml-auto animate-pulse text-[10px]" style={{ color: 'var(--color-muted-foreground)' }}>
+            sending
+          </span>
+        )}
+      </div>
+      {data.summary && (
+        <div className="mb-1 text-[11px] font-medium leading-snug" style={{ color: 'var(--color-foreground)' }}>
+          {data.summary}
+        </div>
+      )}
+      {data.message && (
+        <div
+          className="text-[11px] leading-snug"
+          style={{
+            color: 'var(--color-muted-foreground)',
+            fontStyle: 'italic',
+            whiteSpace: 'pre-wrap',
+          }}
+        >
+          {truncate(data.message, 200)}
+        </div>
+      )}
+      {error && (
+        <div
+          className="mt-1.5 font-mono text-xs"
+          style={{ color: 'var(--color-destructive, var(--color-error-fg))' }}
+        >
+          {error}
+        </div>
+      )}
     </div>
   )
 })
diff --git a/packages/jcode-ui/src/toolRenderers/terminal.tsx b/packages/jcode-ui/src/toolRenderers/terminal.tsx
index 345ed09f..37c89391 100644
--- a/packages/jcode-ui/src/toolRenderers/terminal.tsx
+++ b/packages/jcode-ui/src/toolRenderers/terminal.tsx
@@ -1,12 +1,19 @@
 /**
- * TerminalRenderer — renders `execute` tool calls.
- * Shows `$ <command>` then stdout/stderr, with error tinting on failure.
+ * TerminalRenderer — `execute` tool (matches Vue ToolCallCard terminal block).
+ * Renders inside `.toolcall-body` — no outer border of its own.
+ * Background is muted (not code-bg); `$ ` prefix is muted-foreground.
  */
 
 import { memo } from 'react'
 import type { ToolRendererProps } from 'jcode-ui-core/adapters'
 
-export const TerminalRenderer = memo(function TerminalRenderer({ args, output, error, status }: ToolRendererProps) {
+export const TerminalRenderer = memo(function TerminalRenderer({
+  args,
+  output,
+  displayOutput,
+  error,
+  status,
+}: ToolRendererProps) {
   let command = ''
   try {
     const parsed = JSON.parse(args)
@@ -14,21 +21,37 @@ export const TerminalRenderer = memo(function TerminalRenderer({ args, output, e
   } catch {
     // ignore
   }
-  const isError = status === 'error' || !!error
+  const body = displayOutput || output || ''
   return (
-    <div className="jcode-terminal jcode-selectable my-1 overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--code-bg)]">
+    <div
+      className="jcode-terminal max-h-72 overflow-y-auto px-3 py-2 font-mono text-xs"
+      style={{ background: 'var(--color-muted)' }}
+    >
       {command && (
-        <div className="border-b border-[var(--color-border)] px-3 py-1.5 font-mono text-[0.78rem]">
-          <span className="text-[var(--color-primary)]">$ </span>
-          <span className="text-[var(--color-foreground)]">{command}</span>
+        <div>
+          <span className="select-none" style={{ color: 'var(--color-muted-foreground)' }}>
+            ${' '}
+          </span>
+          <span style={{ color: 'var(--color-foreground)' }}>{command}</span>
         </div>
       )}
-      {(output || error) && (
-        <pre className="max-h-[400px] overflow-auto px-3 py-2 font-mono text-[0.76rem] leading-relaxed">
-          {error && <span className="text-[var(--color-error-fg)]">{error}</span>}
-          {error && output && '\n'}
-          {output && <span className={isError ? 'text-[var(--color-error-fg)]' : 'text-[var(--color-foreground)]'}>{truncate(output, 20000)}</span>}
-        </pre>
+      {body && (
+        <div
+          className="mt-1 whitespace-pre-wrap break-all"
+          style={{ color: 'var(--color-muted-foreground)' }}
+        >
+          {truncate(body, 2000)}
+        </div>
+      )}
+      {error && (
+        <div className="mt-1 whitespace-pre-wrap" style={{ color: 'var(--color-error-fg)' }}>
+          {error}
+        </div>
+      )}
+      {status === 'running' && (
+        <div className="mt-1 animate-pulse" style={{ color: 'var(--color-muted-foreground)' }}>
+          Running…
+        </div>
       )}
     </div>
   )
@@ -38,5 +61,5 @@ export const TerminalRenderer = memo(function TerminalRenderer({ args, output, e
 export function truncate(text: string, max: number): string {
   const chars = [...text]
   if (chars.length <= max) return text
-  return chars.slice(0, max).join('') + `\n… (${chars.length - max} more chars truncated)`
+  return chars.slice(0, max).join('') + `… (${chars.length} chars)`
 }
diff --git a/packages/jcode-ui/src/toolRenderers/todo.tsx b/packages/jcode-ui/src/toolRenderers/todo.tsx
index 82fc6df7..e4fd03a1 100644
--- a/packages/jcode-ui/src/toolRenderers/todo.tsx
+++ b/packages/jcode-ui/src/toolRenderers/todo.tsx
@@ -1,71 +1,167 @@
 /**
- * TodoRenderer — renders `todowrite`/`todoread` tool calls.
- * Parses the todo list from args (todowrite) or output (todoread) and renders
- * status icons. Mirrors the Vue TaskList component.
+ * TodoRenderer — `todowrite` / `todoread` (matches Vue TaskList + tool block).
+ * Icons: CheckCircle / ArrowPath(spin) / NoSymbol / MinusCircle.
+ * in_progress gets a soft highlight + left accent bar.
  */
 
-import { memo, useMemo } from 'react'
+import { memo, useEffect, useMemo, useState } from 'react'
 import {
+  ArrowPathIcon,
   CheckCircleIcon,
-  XCircleIcon,
-  PlayCircleIcon,
   EllipsisHorizontalCircleIcon,
+  MinusCircleIcon,
+  NoSymbolIcon,
 } from '@heroicons/react/24/outline'
 import type { ToolRendererProps } from 'jcode-ui-core/adapters'
 import type { TodoItem } from 'jcode-ui-core'
 
-export const TodoRenderer = memo(function TodoRenderer({ args, output }: ToolRendererProps) {
+export const TodoRenderer = memo(function TodoRenderer({
+  args,
+  output,
+  error,
+  status,
+}: ToolRendererProps) {
   const todos = useMemo(() => extractTodos(args, output), [args, output])
+  const reduceMotion = usePrefersReducedMotion()
+
   if (todos.length === 0) {
-    return <div className="px-3 py-2 text-[var(--color-muted-foreground)]">No todos</div>
+    if (status === 'running') {
+      return (
+        <div className="animate-pulse px-3 py-2 text-xs" style={{ color: 'var(--color-muted-foreground)' }}>
+          Loading…
+        </div>
+      )
+    }
+    return (
+      <div className="px-3 py-2 text-xs italic" style={{ color: 'var(--color-muted-foreground)' }}>
+        No todos
+      </div>
+    )
   }
+
   return (
-    <ul className="jcode-todo jcode-selectable my-1 space-y-1 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--code-bg)] px-3 py-2">
-      {todos.map((t, i) => (
-        <li key={t.id ?? i} className="flex items-start gap-2 text-[0.82rem]">
-          <StatusIcon status={t.status} />
-          <span className={t.status === 'completed' ? 'text-[var(--color-muted-foreground)] line-through' : 'text-[var(--color-foreground)]'}>
-            {t.title}
-          </span>
-        </li>
-      ))}
-    </ul>
+    <div className="jcode-todo max-h-64 overflow-y-auto px-3 py-2" style={{ background: 'var(--color-surface)' }}>
+      <div className="space-y-0.5">
+        {todos.map((todo, i) => {
+          const done = todo.status === 'completed' || todo.status === 'cancelled'
+          const active = todo.status === 'in_progress'
+          return (
+            <div
+              key={todo.id ?? i}
+              className="relative flex items-center gap-2 py-1 pl-2 pr-1.5"
+              style={
+                active
+                  ? {
+                      backgroundColor: 'var(--color-warning-bg)',
+                      borderRadius: 'var(--radius-md)',
+                    }
+                  : undefined
+              }
+            >
+              {active && (
+                <span
+                  className="absolute bottom-0.5 left-0 top-0.5 w-0.5 rounded-[var(--radius-pill)]"
+                  style={{ backgroundColor: 'var(--color-accent-neutral)' }}
+                  aria-hidden
+                />
+              )}
+              <StatusIcon status={todo.status} reduceMotion={reduceMotion} />
+              <span
+                className={`min-w-0 flex-1 truncate text-xs sm:text-sm ${active ? 'font-medium' : ''}`}
+                style={{
+                  color: done ? 'var(--color-muted-foreground)' : 'var(--color-foreground)',
+                  textDecoration: done ? 'line-through' : 'none',
+                }}
+              >
+                {todo.title}
+              </span>
+            </div>
+          )
+        })}
+      </div>
+      {error && (
+        <div
+          className="mt-1.5 whitespace-pre-wrap font-mono text-xs"
+          style={{ color: 'var(--color-destructive, var(--color-error-fg))' }}
+        >
+          {error}
+        </div>
+      )}
+    </div>
   )
 })
 
-function StatusIcon({ status }: { status: TodoItem['status'] }) {
-  const cls = 'mt-0.5 h-4 w-4 shrink-0'
+function StatusIcon({
+  status,
+  reduceMotion,
+}: {
+  status: TodoItem['status']
+  reduceMotion: boolean
+}) {
+  const cls = 'h-3.5 w-3.5 shrink-0'
   switch (status) {
     case 'completed':
-      return <CheckCircleIcon className={`${cls} text-[var(--color-success)]`} />
-    case 'in_progress':
-      return <PlayCircleIcon className={`${cls} text-[var(--color-primary)]`} />
+      return <CheckCircleIcon className={cls} style={{ color: 'var(--color-success-fg)' }} />
     case 'cancelled':
-      return <XCircleIcon className={`${cls} text-[var(--color-muted-foreground)]`} />
+      return (
+        <NoSymbolIcon
+          className={cls}
+          style={{ color: 'var(--color-destructive, var(--color-error-fg))' }}
+        />
+      )
+    case 'in_progress':
+      return reduceMotion ? (
+        <EllipsisHorizontalCircleIcon className={cls} style={{ color: 'var(--color-accent-neutral)' }} />
+      ) : (
+        <ArrowPathIcon
+          className={`${cls} animate-spin`}
+          style={{ color: 'var(--color-accent-neutral)' }}
+        />
+      )
     default:
-      return <EllipsisHorizontalCircleIcon className={`${cls} text-[var(--color-muted-foreground)]`} />
+      return <MinusCircleIcon className={cls} style={{ color: 'var(--color-muted-foreground)' }} />
   }
 }
 
+function usePrefersReducedMotion(): boolean {
+  const [v, setV] = useState(false)
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return
+    const mql = window.matchMedia('(prefers-reduced-motion: reduce)')
+    setV(mql.matches)
+    const onChange = (e: MediaQueryListEvent) => setV(e.matches)
+    mql.addEventListener('change', onChange)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+  return v
+}
+
 function extractTodos(args: string, output?: string): TodoItem[] {
-  // todowrite: todos in args
-  try {
-    const parsed = JSON.parse(args)
-    if (Array.isArray(parsed.todos)) return normalize(parsed.todos)
-    if (Array.isArray(parsed)) return normalize(parsed)
-  } catch {
-    // ignore
-  }
-  // todoread: todos in output (JSON or free text)
+  // Prefer output (final state), fall back to args (requested state) — Vue order.
   if (output) {
+    const jsonMatch = output.match(/\[[\s\S]*\]/)
+    if (jsonMatch) {
+      try {
+        return normalize(JSON.parse(jsonMatch[0]) as unknown[])
+      } catch {
+        // fall through
+      }
+    }
     try {
       const parsed = JSON.parse(output)
       if (Array.isArray(parsed)) return normalize(parsed)
-      if (Array.isArray(parsed.todos)) return normalize(parsed)
+      if (Array.isArray(parsed.todos)) return normalize(parsed.todos)
     } catch {
-      // ignore
+      // fall through
     }
   }
+  try {
+    const parsed = JSON.parse(args)
+    if (Array.isArray(parsed.todos)) return normalize(parsed.todos)
+    if (Array.isArray(parsed)) return normalize(parsed)
+  } catch {
+    // ignore
+  }
   return []
 }
 
@@ -76,7 +172,12 @@ function normalize(arr: unknown[]): TodoItem[] {
       const o = a as Record<string, unknown>
       return {
         id: typeof o.id === 'number' ? o.id : i,
-        title: typeof o.title === 'string' ? o.title : typeof o.content === 'string' ? o.content : '',
+        title:
+          typeof o.title === 'string'
+            ? o.title
+            : typeof o.content === 'string'
+              ? o.content
+              : '',
         status: isValidStatus(o.status) ? o.status : 'pending',
       }
     })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 99c25065..340fd49e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -74,7 +74,7 @@ importers:
         specifier: ^5.9.2
         version: 5.9.3
 
-  web-react:
+  web:
     dependencies:
       '@heroicons/react':
         specifier: ^2.2.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 0e492fee..b88afd36 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,15 +1,14 @@
-# Root pnpm workspace for the React migration + reusable component library.
+# Root pnpm workspace for the product UI + reusable component library.
 #
 # Members:
 #   - packages/jcode-ui       : published React component library (styled)
 #   - packages/jcode-ui-core  : framework-agnostic core (types, runtime, primitives)
-#   - web-react               : the React product app (replaces web/ after switch-over)
+#   - web                     : React product app (embedded in the Go binary / Tauri)
 #
-# The legacy web/ (Vue) and site/ keep their own workspace files and are NOT
-# members here — they are independent during the migration.
+# site/ (marketing + docs) keeps its own workspace and is NOT a member here.
 packages:
   - 'packages/*'
-  - 'web-react'
+  - 'web'
 allowBuilds:
   '@parcel/watcher': true
   esbuild: true
diff --git a/site/docs/chat-ui/components.md b/site/docs/chat-ui/components.md
index b2b8e2a1..1ba2a8c9 100644
--- a/site/docs/chat-ui/components.md
+++ b/site/docs/chat-ui/components.md
@@ -19,7 +19,7 @@ an existing component, or a documented product-app equivalent).
 | assistant-ui | jcode-ui equivalent | Status | Notes |
 |--------------|---------------------|--------|-------|
 | `Thread` | `Thread` | ✅ same-named | Virtualized + auto-follow. |
-| `ThreadList` (conversation list) | `Sidebar` (product app) | 🟡 product | The conversation list is app chrome, not a library primitive — shipped in the web-react product app. |
+| `ThreadList` (conversation list) | `Sidebar` (product app) | 🟡 product | The conversation list is app chrome, not a library primitive — shipped in the product web app. |
 | `Composer` | `ChatInput` | ✅ same concept | Send/queue/stop, slash commands, attachments, context bar. |
 | `Attachment` | `Attachment` + `AttachmentList` | ✅ same-named | Standalone + embedded in ChatInput. |
 | `Markdown` | (built into `Message`) | ✅ field-driven | marked + highlight.js + DOMPurify. Render any markdown via `renderMarkdown()`. |
diff --git a/site/docs/themes.md b/site/docs/themes.md
index 04b764f1..b635a814 100644
--- a/site/docs/themes.md
+++ b/site/docs/themes.md
@@ -119,7 +119,7 @@ Every theme is defined once, in Go:
 internal/theme/palette.go        # the Theme catalog (~26 semantic tokens each)
         │  go generate ./internal/theme/...   (run by `make generate`)
         ├─►  web/src/styles/tokens.generated.css        # [data-theme="…"] blocks
-        └─►  web/src/composables/themes.generated.ts     # the picker registry
+        └─►  web/src/lib/themes.generated.ts             # the picker registry
 ```
 
 The web token set and the picker list are a pure function of the Go palette, so
diff --git a/web-react/index.html b/web-react/index.html
deleted file mode 100644
index d5c9380a..00000000
--- a/web-react/index.html
+++ /dev/null
@@ -1,102 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>jcode</title>
-    <style>
-      .boot-screen {
-        position: fixed;
-        inset: 0;
-        display: grid;
-        place-items: center;
-        background: var(--color-background, #f7f7f4);
-        color: var(--color-foreground, #171717);
-        font-family: Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      }
-      .boot-card {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 14px;
-      }
-      .boot-logo {
-        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-        font-size: 26px;
-        font-weight: 800;
-        letter-spacing: 0;
-      }
-      .boot-logo span:first-child,
-      .boot-logo span:last-child {
-        color: var(--color-muted-foreground, #8a8a84);
-      }
-      .boot-logo b {
-        color: var(--color-primary, #ff7a00);
-      }
-      .boot-copy {
-        color: var(--color-muted-foreground, #73736d);
-        font-size: 14px;
-      }
-      .boot-dots {
-        display: flex;
-        gap: 5px;
-      }
-      .boot-dots span {
-        width: 5px;
-        height: 5px;
-        border-radius: 999px;
-        background: var(--color-primary, #ff7a00);
-        animation: boot-pulse 1.1s ease-in-out infinite;
-      }
-      .boot-dots span:nth-child(2) {
-        animation-delay: 140ms;
-      }
-      .boot-dots span:nth-child(3) {
-        animation-delay: 280ms;
-      }
-      @keyframes boot-pulse {
-        0%, 80%, 100% { opacity: .32; transform: translateY(0); }
-        40% { opacity: 1; transform: translateY(-3px); }
-      }
-      @media (prefers-color-scheme: dark) {
-        .boot-screen {
-          background: var(--color-background, #111111);
-          color: var(--color-foreground, #f6f6f2);
-        }
-      }
-    </style>
-    <!-- Pre-mount theme resolution: apply the saved theme BEFORE the bundle loads
-         so there's no flash of the wrong theme. Mirrors web/index.html. -->
-    <script>
-      ;(function () {
-        try {
-          var stored = localStorage.getItem('jcode_theme') || 'system'
-          var dark =
-            stored === 'dark' ||
-            stored === 'jcode-dark' ||
-            (stored === 'system' && matchMedia('(prefers-color-scheme: dark)').matches)
-          var cls = document.documentElement.classList
-          cls.toggle('dark', dark)
-          if (stored && stored !== 'system' && stored !== 'light' && stored !== 'dark') {
-            document.documentElement.setAttribute('data-theme', stored)
-          }
-        } catch (e) {
-          /* noop */
-        }
-      })()
-    </script>
-  </head>
-  <body>
-    <div id="root">
-      <div class="boot-screen" role="status" aria-live="polite">
-        <div class="boot-card">
-          <div class="boot-logo"><span>[</span><b>J</b>CODE<span>]</span></div>
-          <div class="boot-copy">Starting local server...</div>
-          <div class="boot-dots" aria-hidden="true"><span></span><span></span><span></span></div>
-        </div>
-      </div>
-    </div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
diff --git a/web-react/package.json b/web-react/package.json
deleted file mode 100644
index 8d7c55c2..00000000
--- a/web-react/package.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "name": "web-react",
-  "private": true,
-  "version": "0.1.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview",
-    "typecheck": "tsc --noEmit -p tsconfig.app.json"
-  },
-  "dependencies": {
-    "@heroicons/react": "^2.2.0",
-    "@lobehub/icons-static-svg": "^1.91.0",
-    "@reduxjs/toolkit": "^2.8.2",
-    "@tauri-apps/api": "^2.9.0",
-    "@tauri-apps/plugin-dialog": "^2.0.0",
-    "@tauri-apps/plugin-notification": "^2.0.0",
-    "@tauri-apps/plugin-opener": "^2.0.0",
-    "@xterm/addon-fit": "^0.10.0",
-    "@xterm/addon-web-links": "^0.11.0",
-    "@xterm/xterm": "^5.5.0",
-    "dompurify": "^3.2.4",
-    "highlight.js": "^11.11.1",
-    "jcode-ui": "workspace:*",
-    "jcode-ui-core": "workspace:*",
-    "marked": "^18.0.0",
-    "marked-highlight": "^2.2.2",
-    "qrcode": "^1.5.4",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-i18next": "^15.6.1",
-    "react-redux": "^9.2.0",
-    "i18next": "^25.3.2"
-  },
-  "devDependencies": {
-    "@tailwindcss/vite": "^4.1.0",
-    "@types/qrcode": "^1.5.5",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@vitejs/plugin-react": "^4.3.4",
-    "tailwindcss": "^4.1.0",
-    "typescript": "^5.9.2",
-    "vite": "^6.0.7"
-  }
-}
diff --git a/web-react/src/components/GoalBanner.tsx b/web-react/src/components/GoalBanner.tsx
deleted file mode 100644
index ed057961..00000000
--- a/web-react/src/components/GoalBanner.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/** GoalBanner — renders the active goal (set via /goal). Reads from the chat slice. */
-
-import { CheckCircleIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline'
-import { useAppSelector } from '../app/hooks'
-
-export function GoalBanner() {
-  const goal = useAppSelector((s) => s.chat.goal)
-  if (!goal) return null
-  const Icon = goal.status === 'complete' ? CheckCircleIcon : goal.status === 'blocked' ? ExclamationTriangleIcon : null
-  const tint =
-    goal.status === 'complete'
-      ? 'border-[var(--color-success)] bg-[var(--color-success-bg)] text-[var(--color-success-fg)]'
-      : goal.status === 'blocked'
-        ? 'border-[var(--color-error-fg)] bg-[var(--color-error-bg)] text-[var(--color-error-fg)]'
-        : 'border-[var(--color-primary)] bg-[var(--accent-wash)] text-[var(--color-foreground)]'
-  return (
-    <div className={`flex items-center gap-2 border-b px-4 py-1.5 text-xs ${tint}`}>
-      {Icon && <Icon className="h-3.5 w-3.5 shrink-0" />}
-      <span className="truncate">{goal.objective}</span>
-      {goal.tokens_used != null && (
-        <span className="ml-auto shrink-0 font-mono opacity-70">{goal.tokens_used} tok</span>
-      )}
-    </div>
-  )
-}
diff --git a/web-react/src/components/RemoteConnectWizard.tsx b/web-react/src/components/RemoteConnectWizard.tsx
deleted file mode 100644
index c48c726c..00000000
--- a/web-react/src/components/RemoteConnectWizard.tsx
+++ /dev/null
@@ -1,421 +0,0 @@
-import { useEffect, useState } from 'react'
-import {
-  ArrowLeftIcon,
-  ArrowPathIcon,
-  CheckIcon,
-  CubeIcon,
-  FolderIcon,
-  ServerIcon,
-  XMarkIcon,
-} from '@heroicons/react/24/outline'
-import { useTranslation } from 'react-i18next'
-import { useAppDispatch } from '../app/hooks'
-import { chatActions, loadWorkspaceState, sessionActions } from '../app/store'
-import { api } from '../lib/api'
-import type { DockerContainer, RemoteAuthMethod, RemoteKind, SSHAlias } from '../lib/types'
-
-type Step = 'method' | 'config' | 'docker' | 'connecting' | 'dir'
-
-export interface RemoteConnectWizardProps {
-  open: boolean
-  onClose: () => void
-  onBound?: () => void
-}
-
-export function RemoteConnectWizard({ open, onClose, onBound }: RemoteConnectWizardProps) {
-  const { t } = useTranslation()
-  const dispatch = useAppDispatch()
-  const [step, setStep] = useState<Step>('method')
-  const [method, setMethod] = useState<RemoteKind>('ssh')
-  const [host, setHost] = useState('')
-  const [port, setPort] = useState(22)
-  const [user, setUser] = useState('root')
-  const [authMethod, setAuthMethod] = useState<RemoteAuthMethod>('key')
-  const [password, setPassword] = useState('')
-  const [keyPath, setKeyPath] = useState('~/.ssh/id_rsa')
-  const [passphrase, setPassphrase] = useState('')
-  const [aliases, setAliases] = useState<SSHAlias[]>([])
-  const [containers, setContainers] = useState<DockerContainer[]>([])
-  const [containersLoading, setContainersLoading] = useState(false)
-  const [connectionId, setConnectionId] = useState('')
-  const [currentDir, setCurrentDir] = useState('')
-  const [dirs, setDirs] = useState<string[]>([])
-  const [dirLoading, setDirLoading] = useState(false)
-  const [aliasName, setAliasName] = useState('')
-  const [error, setError] = useState('')
-  const [binding, setBinding] = useState(false)
-
-  useEffect(() => {
-    if (!open) return
-    reset()
-    void loadAliases()
-  }, [open])
-
-  if (!open) return null
-
-  async function loadAliases() {
-    try {
-      const res = await api.sshList()
-      setAliases(res.aliases || [])
-    } catch {
-      setAliases([])
-    }
-  }
-
-  async function loadContainers() {
-    setContainersLoading(true)
-    setError('')
-    try {
-      const res = await api.dockerContainers()
-      setContainers((res.containers || []).slice().sort((a, b) => {
-        if (a.running !== b.running) return a.running ? -1 : 1
-        return (a.name || a.id).localeCompare(b.name || b.id)
-      }))
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Failed to list containers')
-      setContainers([])
-    } finally {
-      setContainersLoading(false)
-    }
-  }
-
-  function applyAlias(alias: SSHAlias) {
-    const at = alias.addr.indexOf('@')
-    const nextUser = at >= 0 ? alias.addr.slice(0, at) : ''
-    let nextHost = at >= 0 ? alias.addr.slice(at + 1) : alias.addr
-    const colon = nextHost.lastIndexOf(':')
-    if (colon >= 0) {
-      setPort(parseInt(nextHost.slice(colon + 1), 10) || 22)
-      nextHost = nextHost.slice(0, colon)
-    }
-    if (nextUser) setUser(nextUser)
-    setHost(nextHost)
-    if (alias.path) setAliasName(alias.name)
-  }
-
-  async function discardConnection() {
-    if (!connectionId) return
-    try {
-      await api.remoteCancel(connectionId)
-    } catch {
-      // best-effort cleanup
-    }
-    setConnectionId('')
-  }
-
-  async function connectSSH() {
-    if (!host.trim()) {
-      setError('Host is required')
-      return
-    }
-    await discardConnection()
-    setError('')
-    setStep('connecting')
-    try {
-      const res = await api.remoteConnect({
-        type: 'ssh',
-        host: host.trim(),
-        port,
-        user: user.trim() || 'root',
-        auth_method: authMethod,
-        password: authMethod === 'password' ? password : undefined,
-        key_path: authMethod === 'key' ? keyPath.trim() : undefined,
-        passphrase: authMethod === 'key' ? passphrase : undefined,
-      })
-      setConnectionId(res.connection_id)
-      await listDir(res.connection_id, res.remote_pwd)
-      setStep('dir')
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Connection failed')
-      setStep('config')
-    }
-  }
-
-  async function connectDocker(container: string) {
-    await discardConnection()
-    setError('')
-    setStep('connecting')
-    try {
-      const res = await api.remoteConnect({ type: 'docker', container })
-      setConnectionId(res.connection_id)
-      await listDir(res.connection_id, res.remote_pwd)
-      setStep('dir')
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Connection failed')
-      setStep('docker')
-    }
-  }
-
-  async function listDir(connId: string, path: string) {
-    setDirLoading(true)
-    setError('')
-    try {
-      const res = await api.remoteListDir(connId, path)
-      setCurrentDir(res.path)
-      setDirs(res.dirs || [])
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Failed to list directory')
-    } finally {
-      setDirLoading(false)
-    }
-  }
-
-  function navigate(name: string) {
-    if (!connectionId) return
-    if (name === '..') {
-      const parent = currentDir.split('/').slice(0, -1).join('/') || '/'
-      void listDir(connectionId, parent)
-      return
-    }
-    const base = currentDir.endsWith('/') ? currentDir : `${currentDir}/`
-    void listDir(connectionId, `${base}${name}`)
-  }
-
-  async function bindHere() {
-    if (!connectionId || binding) return
-    setBinding(true)
-    setError('')
-    try {
-      const res = await api.remoteBind(connectionId, currentDir)
-      if (res.kind === 'docker') {
-        const name = aliasName.trim() || res.container || 'container'
-        await api.remoteSaveDockerAlias(name, res.container || '', res.remote_path).catch(() => {})
-      } else {
-        const addr = `${res.user}@${res.host}`
-        await api.remoteSaveAlias(aliasName.trim() || addr, addr, res.remote_path).catch(() => {})
-      }
-      setConnectionId('')
-      dispatch(chatActions.clearChat())
-      dispatch(sessionActions.setProjectPath(res.label || res.pwd))
-      dispatch(sessionActions.setCurrentSession(''))
-      await dispatch(loadWorkspaceState())
-      onBound?.()
-      close()
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Failed to bind workspace')
-    } finally {
-      setBinding(false)
-    }
-  }
-
-  function reset() {
-    setStep('method')
-    setMethod('ssh')
-    setHost('')
-    setPort(22)
-    setUser('root')
-    setAuthMethod('key')
-    setPassword('')
-    setKeyPath('~/.ssh/id_rsa')
-    setPassphrase('')
-    setAliases([])
-    setContainers([])
-    setConnectionId('')
-    setCurrentDir('')
-    setDirs([])
-    setAliasName('')
-    setError('')
-    setBinding(false)
-  }
-
-  function close() {
-    void discardConnection()
-    onClose()
-  }
-
-  return (
-    <div className="fixed inset-0 z-[var(--z-modal)] flex items-center justify-center p-4" role="dialog" aria-modal="true">
-      <div className="absolute inset-0 bg-[var(--backdrop)] backdrop-blur-[6px]" onClick={close} />
-      <div className="titlebar-drag" data-tauri-drag-region aria-hidden="true" />
-      <div className="relative flex max-h-[88vh] w-full max-w-[640px] flex-col overflow-hidden rounded-[var(--radius-2xl)] border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[var(--shadow-lg)]">
-        <header className="flex items-center justify-between border-b border-[var(--color-border)] px-5 py-4">
-          <div>
-            <h2 className="text-base font-semibold text-[var(--color-foreground)]">{t('nav.remoteConnect')}</h2>
-            <p className="mt-1 text-xs text-[var(--color-muted-foreground)]">{t('wizard.pickMethodDesc')}</p>
-          </div>
-          <button type="button" onClick={close} aria-label={t('common.close')} className="grid h-8 w-8 place-items-center rounded-[var(--radius-md)] text-[var(--color-muted-foreground)] hover:bg-[var(--color-muted)]">
-            <XMarkIcon className="h-4 w-4" />
-          </button>
-        </header>
-
-        <div className="min-h-0 flex-1 overflow-y-auto p-5">
-          {step === 'method' && (
-            <div className="grid grid-cols-2 gap-3">
-              <MethodCard active={method === 'ssh'} Icon={ServerIcon} title="SSH" desc={t('wizard.sshDesc')} onClick={() => setMethod('ssh')} />
-              <MethodCard active={method === 'docker'} Icon={CubeIcon} title="Docker" desc={t('wizard.dockerDesc')} onClick={() => setMethod('docker')} />
-            </div>
-          )}
-
-          {step === 'config' && (
-            <div className="space-y-3">
-              {aliases.length > 0 && (
-                <label className="block">
-                  <span className="mb-1 block text-xs font-medium text-[var(--color-muted-foreground)]">{t('settings.ssh.aliases')}</span>
-                  <select onChange={(e) => {
-                    const alias = aliases.find((a) => a.name === e.target.value)
-                    if (alias) applyAlias(alias)
-                  }} className="w-full rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-background)] px-2 py-2 text-sm text-[var(--color-foreground)]">
-                    <option value="">{t('settings.ssh.noAlias')}</option>
-                    {aliases.map((alias) => <option key={alias.name} value={alias.name}>{alias.name} - {alias.addr}</option>)}
-                  </select>
-                </label>
-              )}
-              <div className="grid grid-cols-[1fr_90px] gap-2">
-                <Field label="Host">
-                  <input value={host} onChange={(e) => setHost(e.target.value)} placeholder={t('wizard.hostPlaceholder')} className={INPUT} />
-                </Field>
-                <Field label="Port">
-                  <input value={port} onChange={(e) => setPort(Number(e.target.value) || 22)} type="number" className={INPUT} />
-                </Field>
-              </div>
-              <Field label="User">
-                <input value={user} onChange={(e) => setUser(e.target.value)} placeholder={t('wizard.userPlaceholder')} className={INPUT} />
-              </Field>
-              <Field label={t('wizard.auth')}>
-                <select value={authMethod} onChange={(e) => setAuthMethod(e.target.value as RemoteAuthMethod)} className={INPUT}>
-                  <option value="key">Key / agent</option>
-                  <option value="password">Password</option>
-                </select>
-              </Field>
-              {authMethod === 'password' ? (
-                <Field label="Password">
-                  <input value={password} onChange={(e) => setPassword(e.target.value)} type="password" className={INPUT} />
-                </Field>
-              ) : (
-                <div className="grid grid-cols-2 gap-2">
-                  <Field label="Key path">
-                    <input value={keyPath} onChange={(e) => setKeyPath(e.target.value)} className={INPUT} />
-                  </Field>
-                  <Field label="Passphrase">
-                    <input value={passphrase} onChange={(e) => setPassphrase(e.target.value)} type="password" className={INPUT} />
-                  </Field>
-                </div>
-              )}
-            </div>
-          )}
-
-          {step === 'docker' && (
-            <div>
-              <div className="mb-3 flex items-center justify-between">
-                <h3 className="text-sm font-semibold text-[var(--color-foreground)]">{t('wizard.selectContainer')}</h3>
-                <button type="button" onClick={() => void loadContainers()} className="inline-flex items-center gap-1.5 rounded-[var(--radius-md)] border border-[var(--color-border)] px-2 py-1 text-xs text-[var(--color-foreground)] hover:bg-[var(--color-muted)]">
-                  <ArrowPathIcon className="h-3.5 w-3.5" />
-                  {t('wizard.refresh')}
-                </button>
-              </div>
-              {containersLoading ? (
-                <div className="py-8 text-center text-xs text-[var(--color-muted-foreground)]">{t('wizard.loading')}</div>
-              ) : containers.length === 0 ? (
-                <div className="py-8 text-center text-xs text-[var(--color-muted-foreground)]">{t('wizard.noContainers')}</div>
-              ) : (
-                <div className="space-y-1">
-                  {containers.map((container) => (
-                    <button key={container.id} type="button" disabled={!container.running} onClick={() => void connectDocker(container.id || container.name)} className="flex w-full items-center gap-2 rounded-[var(--radius-md)] px-2 py-2 text-left text-sm text-[var(--color-foreground)] hover:bg-[var(--color-muted)] disabled:opacity-45">
-                      <CubeIcon className="h-4 w-4 shrink-0 text-[var(--color-muted-foreground)]" />
-                      <span className="min-w-0 flex-1">
-                        <span className="block truncate">{container.name || container.id}</span>
-                        <span className="block truncate text-[11px] text-[var(--color-muted-foreground)]">{container.status}</span>
-                      </span>
-                      {container.running && <span className="text-[10px] font-semibold text-[var(--color-success-fg)]">{t('wizard.running')}</span>}
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-
-          {step === 'connecting' && (
-            <div className="flex flex-col items-center justify-center py-14 text-sm text-[var(--color-muted-foreground)]">
-              <ArrowPathIcon className="mb-3 h-6 w-6 animate-spin" />
-              {t('wizard.connecting')}
-            </div>
-          )}
-
-          {step === 'dir' && (
-            <div className="space-y-3">
-              <p className="text-xs text-[var(--color-muted-foreground)]">{t('wizard.dirDesc')}</p>
-              <div className="rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-background)] px-2 py-1.5 font-mono text-xs text-[var(--color-foreground)]">{currentDir}</div>
-              <div className="max-h-64 overflow-y-auto rounded-[var(--radius-lg)] border border-[var(--color-border)] p-1">
-                {currentDir !== '/' && <DirRow name=".." onClick={() => navigate('..')} />}
-                {dirLoading ? (
-                  <div className="py-8 text-center text-xs text-[var(--color-muted-foreground)]">{t('wizard.loading')}</div>
-                ) : dirs.length === 0 ? (
-                  <div className="py-8 text-center text-xs text-[var(--color-muted-foreground)]">{t('wizard.noSubDirs')}</div>
-                ) : (
-                  dirs.map((dir) => <DirRow key={dir} name={dir} onClick={() => navigate(dir)} />)
-                )}
-              </div>
-              <Field label={t('wizard.saveAlias')}>
-                <input value={aliasName} onChange={(e) => setAliasName(e.target.value)} placeholder={t('wizard.aliasNamePlaceholder')} className={INPUT} />
-              </Field>
-            </div>
-          )}
-
-          {error && <div className="mt-3 rounded-[var(--radius-md)] border border-[var(--color-destructive)] bg-[var(--color-error-bg)] px-3 py-2 text-xs text-[var(--color-error-fg)]">{error}</div>}
-        </div>
-
-        <footer className="flex items-center justify-between border-t border-[var(--color-border)] bg-[var(--color-muted)] px-5 py-3">
-          <button type="button" onClick={() => {
-            if (step === 'method') close()
-            else if (step === 'dir' && method === 'ssh') setStep('config')
-            else setStep('method')
-          }} className="inline-flex items-center gap-1.5 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-1.5 text-xs text-[var(--color-foreground)] hover:bg-[var(--color-background)]">
-            <ArrowLeftIcon className="h-3.5 w-3.5" />
-            {t('common.back')}
-          </button>
-          {step === 'method' && (
-            <button type="button" onClick={() => {
-              if (method === 'docker') {
-                setStep('docker')
-                void loadContainers()
-              } else setStep('config')
-            }} className="rounded-[var(--radius-md)] bg-[var(--color-primary)] px-3 py-1.5 text-xs font-medium text-[var(--color-on-primary)]">
-              {t('wizard.next')}
-            </button>
-          )}
-          {step === 'config' && (
-            <button type="button" onClick={() => void connectSSH()} className="rounded-[var(--radius-md)] bg-[var(--color-primary)] px-3 py-1.5 text-xs font-medium text-[var(--color-on-primary)]">
-              {t('wizard.connect')}
-            </button>
-          )}
-          {step === 'dir' && (
-            <button type="button" disabled={binding} onClick={() => void bindHere()} className="inline-flex items-center gap-1.5 rounded-[var(--radius-md)] bg-[var(--color-primary)] px-3 py-1.5 text-xs font-medium text-[var(--color-on-primary)] disabled:opacity-50">
-              <CheckIcon className="h-3.5 w-3.5" />
-              {t('wizard.useDirectory')}
-            </button>
-          )}
-        </footer>
-      </div>
-    </div>
-  )
-}
-
-const INPUT = 'w-full rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-background)] px-2.5 py-2 text-sm text-[var(--color-foreground)] outline-none focus:border-[var(--color-primary)]'
-
-function Field({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <label className="block">
-      <span className="mb-1 block text-xs font-medium text-[var(--color-muted-foreground)]">{label}</span>
-      {children}
-    </label>
-  )
-}
-
-function MethodCard({ active, Icon, title, desc, onClick }: { active: boolean; Icon: typeof ServerIcon; title: string; desc: string; onClick: () => void }) {
-  return (
-    <button type="button" onClick={onClick} className={`flex flex-col gap-2 rounded-[var(--radius-xl)] border p-4 text-left transition-colors hover:bg-[var(--color-muted)] ${active ? 'border-[var(--color-primary)] bg-[var(--accent-wash)]' : 'border-[var(--color-border)] bg-[var(--color-background)]'}`}>
-      <Icon className="h-5 w-5 text-[var(--color-primary)]" />
-      <span className="text-sm font-semibold text-[var(--color-foreground)]">{title}</span>
-      <span className="text-xs leading-relaxed text-[var(--color-muted-foreground)]">{desc}</span>
-    </button>
-  )
-}
-
-function DirRow({ name, onClick }: { name: string; onClick: () => void }) {
-  return (
-    <button type="button" onClick={onClick} className="flex w-full items-center gap-2 rounded-[var(--radius-md)] px-2 py-1.5 text-left text-sm text-[var(--color-foreground)] hover:bg-[var(--color-muted)]">
-      {name === '..' ? <span className="w-4 text-center font-mono text-xs">..</span> : <FolderIcon className="h-4 w-4 text-[var(--color-muted-foreground)]" />}
-      <span className="min-w-0 flex-1 truncate">{name}</span>
-    </button>
-  )
-}
diff --git a/web-react/src/components/WorkspacePicker.tsx b/web-react/src/components/WorkspacePicker.tsx
deleted file mode 100644
index 6d429056..00000000
--- a/web-react/src/components/WorkspacePicker.tsx
+++ /dev/null
@@ -1,300 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import {
-  ArrowLeftIcon,
-  CheckIcon,
-  ChevronDownIcon,
-  FolderIcon,
-  FolderOpenIcon,
-  MagnifyingGlassIcon,
-  PlusIcon,
-  ServerIcon,
-} from '@heroicons/react/24/outline'
-import { useTranslation } from 'react-i18next'
-import { useAppDispatch, useAppSelector } from '../app/hooks'
-import { chatActions, loadWorkspaceState, sessionActions } from '../app/store'
-import { api } from '../lib/api'
-
-interface WorkspaceNode {
-  path: string
-  name: string
-  remote: boolean
-}
-
-interface BrowseFolder {
-  name: string
-  path: string
-}
-
-export function WorkspacePicker({ placement = 'top' }: { placement?: 'top' | 'bottom' }) {
-  const { t } = useTranslation()
-  const dispatch = useAppDispatch()
-  const activePath = useAppSelector((s) => s.session.projectPath)
-  const tasks = useAppSelector((s) => s.session.tasks)
-  const isRunning = useAppSelector((s) => s.chat.isRunning)
-  const [open, setOpen] = useState(false)
-  const [query, setQuery] = useState('')
-  const [missing, setMissing] = useState<Set<string>>(new Set())
-  const [browserOpen, setBrowserOpen] = useState(false)
-  const [browsePath, setBrowsePath] = useState('')
-  const [pathInput, setPathInput] = useState('')
-  const [folders, setFolders] = useState<BrowseFolder[]>([])
-  const [loadingFolders, setLoadingFolders] = useState(false)
-  const [switching, setSwitching] = useState(false)
-  const [error, setError] = useState('')
-  const rootRef = useRef<HTMLDivElement | null>(null)
-
-  const workspaces = useMemo<WorkspaceNode[]>(() => {
-    const map = new Map<string, WorkspaceNode>()
-    if (activePath) map.set(activePath, { path: activePath, name: workspaceName(activePath), remote: isRemotePath(activePath) })
-    for (const task of tasks) {
-      if (!task.project || map.has(task.project)) continue
-      map.set(task.project, { path: task.project, name: workspaceName(task.project), remote: isRemotePath(task.project) })
-    }
-    const q = query.trim().toLowerCase()
-    return [...map.values()]
-      .filter((node) => node.remote || !missing.has(node.path))
-      .filter((node) => !q || node.name.toLowerCase().includes(q) || node.path.toLowerCase().includes(q))
-      .sort((a, b) => {
-        if (a.path === activePath) return -1
-        if (b.path === activePath) return 1
-        return a.name.localeCompare(b.name)
-      })
-  }, [activePath, tasks, missing, query])
-
-  const activeName = activePath ? workspaceName(activePath) : t('workspace.none')
-  const activeRemote = isRemotePath(activePath)
-
-  const validateKnownPaths = useCallback(async () => {
-    const localPaths = [...new Set(tasks.map((t) => t.project).filter((p) => p && !isRemotePath(p)))]
-    if (activePath && !isRemotePath(activePath)) localPaths.push(activePath)
-    if (localPaths.length === 0) return
-    try {
-      const res = await api.validatePaths([...new Set(localPaths)])
-      setMissing(new Set(res.missing || []))
-    } catch {
-      // The picker remains usable; failed validation should not hide paths.
-    }
-  }, [activePath, tasks])
-
-  useEffect(() => {
-    void validateKnownPaths()
-  }, [validateKnownPaths])
-
-  useEffect(() => {
-    function onOpenPicker() {
-      setOpen(true)
-      void validateKnownPaths()
-    }
-    window.addEventListener('jcode:open-workspace-picker', onOpenPicker)
-    return () => window.removeEventListener('jcode:open-workspace-picker', onOpenPicker)
-  }, [validateKnownPaths])
-
-  useEffect(() => {
-    if (!open) return
-    function onDown(e: MouseEvent) {
-      if (rootRef.current && !rootRef.current.contains(e.target as Node)) reset()
-    }
-    function onKey(e: KeyboardEvent) {
-      if (e.key === 'Escape') reset()
-    }
-    document.addEventListener('mousedown', onDown)
-    document.addEventListener('keydown', onKey)
-    return () => {
-      document.removeEventListener('mousedown', onDown)
-      document.removeEventListener('keydown', onKey)
-    }
-  }, [open])
-
-  async function loadFolders(path?: string) {
-    setLoadingFolders(true)
-    setError('')
-    try {
-      const res = await api.browse(path)
-      setBrowsePath(res.current)
-      setPathInput(res.current)
-      setFolders(res.folders || [])
-      setBrowserOpen(true)
-    } catch (e) {
-      setError(e instanceof Error ? e.message : t('workspace.openError'))
-    } finally {
-      setLoadingFolders(false)
-    }
-  }
-
-  async function switchTo(path: string) {
-    if (!path) return
-    setSwitching(true)
-    setError('')
-    try {
-      if (isRemotePath(path)) {
-        setError(t('errors.remoteReconnect'))
-        return
-      }
-      if (path === activePath) {
-        const resp = await api.newSession()
-        dispatch(chatActions.clearChat())
-        dispatch(sessionActions.setCurrentSession(resp.session_id))
-        await dispatch(loadWorkspaceState())
-        reset()
-        return
-      }
-      const resp = await api.switchProject(path)
-      dispatch(chatActions.clearChat())
-      dispatch(sessionActions.setCurrentSession(''))
-      dispatch(sessionActions.setProjectPath(resp.pwd || path))
-      await dispatch(loadWorkspaceState())
-      reset()
-    } catch (e) {
-      setError(e instanceof Error ? e.message : t('workspace.openError'))
-    } finally {
-      setSwitching(false)
-    }
-  }
-
-  function reset() {
-    setOpen(false)
-    setQuery('')
-    setBrowserOpen(false)
-    setBrowsePath('')
-    setPathInput('')
-    setFolders([])
-    setError('')
-  }
-
-  function goUp() {
-    if (!browsePath || browsePath === '/') return
-    const parent = browsePath.replace(/\/+$/, '').split('/').slice(0, -1).join('/') || '/'
-    void loadFolders(parent)
-  }
-
-  return (
-    <div ref={rootRef} className="relative inline-flex min-w-0">
-      <button
-        type="button"
-        disabled={isRunning || switching}
-        title={activePath}
-        onClick={(e) => {
-          e.stopPropagation()
-          setOpen((v) => {
-            if (!v) void validateKnownPaths()
-            return !v
-          })
-        }}
-        className="inline-flex h-7 max-w-[200px] items-center gap-1.5 rounded-[var(--radius-lg)] px-2 text-xs text-[var(--color-muted-foreground)] transition-colors hover:bg-[var(--color-muted)] hover:text-[var(--color-foreground)] disabled:opacity-55"
-      >
-        {activeRemote ? <ServerIcon className="h-3.5 w-3.5 shrink-0" /> : <FolderOpenIcon className="h-3.5 w-3.5 shrink-0" />}
-        <span className="truncate">{activeName}</span>
-        <ChevronDownIcon className={`h-3 w-3 shrink-0 opacity-70 transition-transform ${open ? 'rotate-180' : ''}`} />
-      </button>
-
-      {open && (
-        <div className={`absolute left-0 z-[var(--z-dropdown)] w-[320px] max-w-[86vw] rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-1.5 shadow-[var(--shadow-lg)] ${
-          placement === 'bottom' ? 'top-full mt-1' : 'bottom-full mb-1'
-        }`}>
-          {browserOpen ? (
-            <div className="flex flex-col gap-1.5">
-              <div className="flex items-center gap-1.5">
-                <button type="button" onClick={() => setBrowserOpen(false)} className="grid h-7 w-7 place-items-center rounded-[var(--radius-md)] text-[var(--color-muted-foreground)] hover:bg-[var(--color-muted)]">
-                  <ArrowLeftIcon className="h-3.5 w-3.5" />
-                </button>
-                <input
-                  value={pathInput}
-                  onChange={(e) => setPathInput(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') void loadFolders(pathInput)
-                  }}
-                  placeholder={t('projectSwitcher.pathPlaceholder')}
-                  className="min-w-0 flex-1 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-background)] px-2 py-1.5 font-mono text-xs text-[var(--color-foreground)] outline-none"
-                />
-              </div>
-              <div className="max-h-60 overflow-y-auto">
-                {browsePath && browsePath !== '/' && (
-                  <button type="button" onClick={goUp} className="flex w-full items-center gap-2 rounded-[var(--radius-md)] px-2 py-1.5 text-left text-xs text-[var(--color-foreground)] hover:bg-[var(--color-muted)]">
-                    <span className="w-4 text-center font-mono">..</span>
-                  </button>
-                )}
-                {loadingFolders ? (
-                  <div className="px-2 py-4 text-xs text-[var(--color-muted-foreground)]">{t('workspace.loading')}</div>
-                ) : folders.length === 0 ? (
-                  <div className="px-2 py-4 text-xs text-[var(--color-muted-foreground)]">{t('workspace.noFolders')}</div>
-                ) : (
-                  folders.map((folder) => (
-                    <button key={folder.path} type="button" onClick={() => void loadFolders(folder.path)} className="flex w-full items-center gap-2 rounded-[var(--radius-md)] px-2 py-1.5 text-left text-xs text-[var(--color-foreground)] hover:bg-[var(--color-muted)]">
-                      <FolderIcon className="h-3.5 w-3.5 shrink-0 text-[var(--color-muted-foreground)]" />
-                      <span className="min-w-0 flex-1 truncate">{folder.name}</span>
-                    </button>
-                  ))
-                )}
-              </div>
-              {error && <div className="px-2 text-[11px] text-[var(--color-destructive)]">{error}</div>}
-              <div className="flex items-center gap-2 border-t border-[var(--color-border)] pt-1.5">
-                <span className="min-w-0 flex-1 truncate font-mono text-[10.5px] text-[var(--color-muted-foreground)]">{browsePath || '~'}</span>
-                <button type="button" disabled={!browsePath || switching} onClick={() => void switchTo(browsePath)} className="rounded-[var(--radius-md)] bg-[var(--color-primary)] px-2 py-1.5 text-xs font-medium text-[var(--color-on-primary)] disabled:opacity-50">
-                  {t('workspace.open')}
-                </button>
-              </div>
-            </div>
-          ) : (
-            <>
-              <div className="flex items-center gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-background)] px-2 py-1.5">
-                <MagnifyingGlassIcon className="h-3.5 w-3.5 text-[var(--color-muted-foreground)]" />
-                <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder={t('workspace.search')} className="min-w-0 flex-1 border-none bg-transparent text-[12.5px] text-[var(--color-foreground)] outline-none" />
-              </div>
-              <div className="max-h-64 overflow-y-auto py-1">
-                {workspaces.length === 0 ? (
-                  <div className="px-2 py-4 text-xs text-[var(--color-muted-foreground)]">{t('workspace.nonePlural')}</div>
-                ) : (
-                  workspaces.map((node) => {
-                    const active = node.path === activePath
-                    return (
-                      <button key={node.path} type="button" disabled={switching} onClick={() => void switchTo(node.path)} className={`flex w-full items-center gap-2 rounded-[var(--radius-md)] px-2 py-1.5 text-left text-xs transition-colors hover:bg-[var(--color-muted)] disabled:opacity-55 ${active ? 'font-semibold text-[var(--color-primary)]' : 'text-[var(--color-foreground)]'}`}>
-                        {node.remote ? <ServerIcon className="h-3.5 w-3.5 shrink-0" /> : <FolderIcon className="h-3.5 w-3.5 shrink-0" />}
-                        <span className="min-w-0 flex-1">
-                          <span className="block truncate">{node.name}</span>
-                          <span className="block truncate font-mono text-[10px] font-normal text-[var(--color-muted-foreground)]">{node.path}</span>
-                        </span>
-                        {active && <CheckIcon className="h-3.5 w-3.5 shrink-0" />}
-                      </button>
-                    )
-                  })
-                )}
-              </div>
-              {error && <div className="px-2 py-1 text-[11px] text-[var(--color-destructive)]">{error}</div>}
-              <div className="flex gap-1.5 border-t border-[var(--color-border)] pt-1.5">
-                <button type="button" onClick={() => void loadFolders(activePath || undefined)} className="flex flex-1 items-center gap-1.5 rounded-[var(--radius-md)] px-2 py-1.5 text-xs text-[var(--color-foreground)] hover:bg-[var(--color-muted)]">
-                  <PlusIcon className="h-3.5 w-3.5" />
-                  {t('workspace.openFolder')}
-                </button>
-                <button type="button" onClick={() => window.dispatchEvent(new Event('jcode:open-remote-connect'))} className="flex items-center gap-1.5 rounded-[var(--radius-md)] px-2 py-1.5 text-xs text-[var(--color-foreground)] hover:bg-[var(--color-muted)]">
-                  <ServerIcon className="h-3.5 w-3.5" />
-                  {t('nav.remoteConnect')}
-                </button>
-              </div>
-            </>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-function isRemotePath(path: string): boolean {
-  return path.startsWith('ssh://') || path.startsWith('docker://')
-}
-
-function workspaceName(path: string): string {
-  if (!path) return ''
-  if (path.startsWith('docker://')) {
-    const rest = path.slice('docker://'.length)
-    return rest.split('/')[0] || path
-  }
-  if (path.startsWith('ssh://')) {
-    const rest = path.slice('ssh://'.length)
-    const slash = rest.indexOf('/')
-    const host = slash >= 0 ? rest.slice(0, slash) : rest
-    const tail = slash >= 0 ? rest.slice(slash).split('/').filter(Boolean).at(-1) : ''
-    return tail ? `${tail} (${host})` : host
-  }
-  const parts = path.split('/').filter(Boolean)
-  return parts.at(-1) || path
-}
diff --git a/web-react/src/i18n/index.ts b/web-react/src/i18n/index.ts
deleted file mode 100644
index 51915990..00000000
--- a/web-react/src/i18n/index.ts
+++ /dev/null
@@ -1,402 +0,0 @@
-import i18n from 'i18next'
-import { initReactI18next } from 'react-i18next'
-import enBase from './locales/en'
-import zhHansBase from './locales/zh-Hans'
-import zhHantBase from './locales/zh-Hant'
-import jaBase from './locales/ja'
-import koBase from './locales/ko'
-
-export const SUPPORTED_LOCALES = ['en', 'zh-Hans', 'zh-Hant', 'ja', 'ko'] as const
-export type SupportedLocale = (typeof SUPPORTED_LOCALES)[number]
-
-export const LOCALE_LABELS: Record<SupportedLocale, string> = {
-  en: 'English',
-  'zh-Hans': '简体中文',
-  'zh-Hant': '繁體中文',
-  ja: '日本語',
-  ko: '한국어',
-}
-
-const STORAGE_KEY = 'jcode_locale'
-const LEGACY_KEY = 'jcode-lang'
-const FALLBACK: SupportedLocale = 'en'
-
-const HTML_LANG: Record<SupportedLocale, string> = {
-  en: 'en',
-  'zh-Hans': 'zh-Hans',
-  'zh-Hant': 'zh-Hant',
-  ja: 'ja',
-  ko: 'ko',
-}
-
-function isSupported(value: string | null | undefined): value is SupportedLocale {
-  return !!value && (SUPPORTED_LOCALES as readonly string[]).includes(value)
-}
-
-function normalizeLegacy(value: string | null): SupportedLocale | null {
-  if (!value) return null
-  if (isSupported(value)) return value
-  if (value === 'zh') return 'zh-Hans'
-  return null
-}
-
-function browserLocale(): SupportedLocale {
-  if (typeof navigator === 'undefined') return FALLBACK
-  const tags = navigator.languages?.length ? navigator.languages : [navigator.language]
-  for (const tag of tags) {
-    const lower = tag.toLowerCase()
-    if (lower === 'zh' || lower.startsWith('zh-cn') || lower.startsWith('zh-sg') || lower.startsWith('zh-hans')) return 'zh-Hans'
-    if (lower.startsWith('zh-tw') || lower.startsWith('zh-hk') || lower.startsWith('zh-mo') || lower.startsWith('zh-hant')) return 'zh-Hant'
-    const primary = lower.split('-')[0]
-    if (primary === 'ja') return 'ja'
-    if (primary === 'ko') return 'ko'
-    if (primary === 'en') return 'en'
-  }
-  return FALLBACK
-}
-
-function initialLocale(): SupportedLocale {
-  if (typeof localStorage === 'undefined') return FALLBACK
-  return (
-    normalizeLegacy(localStorage.getItem(STORAGE_KEY)) ||
-    normalizeLegacy(localStorage.getItem(LEGACY_KEY)) ||
-    browserLocale()
-  )
-}
-
-function applyDocumentLang(locale: SupportedLocale) {
-  if (typeof document !== 'undefined') {
-    document.documentElement.lang = HTML_LANG[locale] ?? locale
-  }
-}
-
-function isPlainRecord(value: unknown): value is Record<string, unknown> {
-  return !!value && typeof value === 'object' && !Array.isArray(value)
-}
-
-function deepMerge<T extends Record<string, unknown>>(base: T, override: Record<string, unknown>): T {
-  const out: Record<string, unknown> = { ...base }
-  for (const [key, value] of Object.entries(override)) {
-    const prev = out[key]
-    out[key] = isPlainRecord(prev) && isPlainRecord(value) ? deepMerge(prev, value) : value
-  }
-  return out as T
-}
-
-const resources = {
-  en: {
-    translation: {
-      common: {
-        enable: 'Enable',
-        disable: 'Disable',
-        reset: 'Reset',
-        loading: 'Loading...',
-      },
-      nav: {
-        newTask: 'New chat',
-        chat: 'Chat',
-        automations: 'Automations',
-        channels: 'Channels',
-        workspace: 'Workspace',
-        settingsWithShortcut: 'Settings (⌘,)',
-      },
-      sidebar: {
-        noConversations: 'No conversations yet',
-        noTasks: 'No tasks',
-        running: 'running',
-        remoteReconnectRequired: 'Reconnect to that remote workspace before opening this conversation.',
-        switchProjectFailed: 'Could not switch workspace for this conversation.',
-        actions: {
-          taskActions: 'Actions',
-          pin: 'Pin',
-          unpin: 'Unpin',
-          archive: 'Archive',
-          unarchive: 'Unarchive',
-          markRead: 'Mark read',
-          markUnread: 'Mark unread',
-          delete: 'Delete',
-        },
-        filter: {
-          title: 'Filter conversations',
-          status: 'Status',
-          statusAll: 'All',
-          statusActive: 'Active',
-          statusArchived: 'Archived',
-          project: 'Project',
-          projectAll: 'All projects',
-          lastActivity: 'Last activity',
-          activityAll: 'Any time',
-          activityToday: 'Today',
-          activityWeek: 'This week',
-          activityMonth: 'This month',
-          groupBy: 'Group by',
-          groupProject: 'Project',
-          groupDate: 'Date',
-          sortBy: 'Sort by',
-          sortRecency: 'Recency',
-          sortName: 'Name',
-          sortCreated: 'Created',
-          time: 'Time',
-          timeAll: 'All time',
-          timeToday: 'Today',
-          timeWeek: 'This week',
-          timeMonth: 'This month',
-          sort: 'Sort',
-          sortRecent: 'Recent',
-          sortTitle: 'Title',
-        },
-        dateBucket: {
-          today: 'Today',
-          yesterday: 'Yesterday',
-          week: 'This Week',
-          month: 'This Month',
-          older: 'Older',
-        },
-        relativeTime: {
-          now: 'now',
-          minutes: '{{n}}m',
-          hours: '{{n}}h',
-          days: '{{n}}d',
-        },
-      },
-      topbar: {
-        plan: 'Plan',
-        files: 'Files',
-        changes: 'Changes',
-        terminal: 'Terminal',
-        status: {
-          running: 'Running',
-          connected: 'Connected',
-          disconnected: 'Disconnected',
-        },
-        panelsHint: 'Panels · {{status}}  (⇧⌘P plan · ⇧⌘E files · ⇧⌘G changes · ⌘` terminal)',
-        panelsMenu: 'Panels menu · {{status}}',
-      },
-      settings: {
-        backToWorkspace: 'Close',
-        tabs: {
-          general: 'General',
-          appearance: 'Appearance',
-          providers: 'Providers',
-          mcp: 'MCP',
-          skills: 'Skills',
-          browser: 'Browser',
-          ssh: 'SSH',
-          channels: 'Channels',
-          shortcuts: 'Shortcuts',
-          usage: 'Usage',
-        },
-        general: {
-          title: 'General',
-          serverState: 'Server state',
-          serverOnline: 'Online',
-          serverOffline: 'Offline',
-          tokenUsage: 'Token usage',
-          preferences: 'Preferences',
-          defaultMode: 'Default mode',
-          defaultModeDesc: 'Controls how much autonomy the agent has on each new chat.',
-          autoApproveTitle: 'Auto-approve',
-          autoApproveDesc: 'Automatically approve tool calls without prompting.',
-          bleTitle: 'Bluetooth notifications',
-          bleDesc: 'Use the desktop BLE status channel for nearby notifications.',
-          languageTitle: 'Language',
-          languageDesc: 'Interface language preference.',
-          maxIterations: 'Max iterations',
-          maxIterationsReadOnly: 'Configured in ~/.jcode/config.json and applied when a run starts.',
-        },
-      },
-      chat: {
-        modes: {
-          approval: 'Ask for approval',
-          plan: 'Plan',
-          fullAccess: 'Full access',
-        },
-      },
-    },
-  },
-  'zh-Hans': {
-    translation: {
-      common: { enable: '启用', disable: '停用', reset: '重置', loading: '加载中...' },
-      nav: {
-        newTask: '新聊天',
-        chat: '聊天',
-        automations: '自动化',
-        channels: '渠道',
-        workspace: '工作区',
-        settingsWithShortcut: '设置 (⌘,)',
-      },
-      sidebar: {
-        noConversations: '还没有会话',
-        noTasks: '暂无任务',
-        running: '运行中',
-        remoteReconnectRequired: '请先重新连接该远程工作区，再打开这个会话。',
-        switchProjectFailed: '无法切换到这个会话所在的工作区。',
-        actions: {
-          taskActions: '操作',
-          pin: '置顶',
-          unpin: '取消置顶',
-          archive: '归档',
-          unarchive: '取消归档',
-          markRead: '标为已读',
-          markUnread: '标为未读',
-          delete: '删除',
-        },
-        filter: {
-          title: '筛选会话',
-          status: '状态',
-          statusAll: '全部',
-          statusActive: '活跃',
-          statusArchived: '已归档',
-          project: '项目',
-          projectAll: '所有项目',
-          lastActivity: '最近活动',
-          activityAll: '任意时间',
-          activityToday: '今天',
-          activityWeek: '本周',
-          activityMonth: '本月',
-          groupBy: '分组方式',
-          groupProject: '项目',
-          groupDate: '日期',
-          sortBy: '排序方式',
-          sortRecency: '最近',
-          sortName: '名称',
-          sortCreated: '创建时间',
-          time: '时间',
-          timeAll: '全部时间',
-          timeToday: '今天',
-          timeWeek: '本周',
-          timeMonth: '本月',
-          sort: '排序',
-          sortRecent: '最近',
-          sortTitle: '标题',
-        },
-        dateBucket: { today: '今天', yesterday: '昨天', week: '本周', month: '本月', older: '更早' },
-        relativeTime: { now: '刚刚', minutes: '{{n}}分钟', hours: '{{n}}小时', days: '{{n}}天' },
-      },
-      topbar: {
-        plan: '计划',
-        files: '文件',
-        changes: '变更',
-        terminal: '终端',
-        status: { running: '运行中', connected: '已连接', disconnected: '未连接' },
-        panelsHint: '面板 · {{status}}  (⇧⌘P 计划 · ⇧⌘E 文件 · ⇧⌘G 变更 · ⌘` 终端)',
-        panelsMenu: '面板菜单 · {{status}}',
-      },
-      settings: {
-        backToWorkspace: '关闭',
-        tabs: {
-          general: '通用',
-          appearance: '外观',
-          providers: '服务商',
-          mcp: 'MCP',
-          skills: '技能',
-          browser: '浏览器',
-          ssh: 'SSH',
-          channels: '渠道',
-          shortcuts: '快捷键',
-          usage: '用量',
-        },
-        general: {
-          title: '通用',
-          serverState: '服务状态',
-          serverOnline: '在线',
-          serverOffline: '离线',
-          tokenUsage: 'Token 用量',
-          preferences: '偏好',
-          defaultMode: '默认模式',
-          defaultModeDesc: '控制每个新聊天中 agent 的自主程度。',
-          autoApproveTitle: '自动批准',
-          autoApproveDesc: '无需提示即可自动批准工具调用。',
-          bleTitle: '蓝牙通知',
-          bleDesc: '使用桌面 BLE 状态通道发送附近通知。',
-          languageTitle: '语言',
-          languageDesc: '界面语言偏好。',
-          maxIterations: '最大迭代次数',
-          maxIterationsReadOnly: '在 ~/.jcode/config.json 中配置，并在运行开始时生效。',
-        },
-      },
-      chat: {
-        modes: {
-          approval: '请求批准',
-          plan: '计划',
-          fullAccess: '完全访问',
-        },
-      },
-    },
-  },
-  'zh-Hant': {
-    translation: {
-      common: { enable: '啟用', disable: '停用', reset: '重置', loading: '載入中...' },
-      nav: { newTask: '新聊天', chat: '聊天', automations: '自動化', channels: '渠道', workspace: '工作區', settingsWithShortcut: '設定 (⌘,)' },
-      sidebar: {
-        noConversations: '還沒有會話',
-        noTasks: '暫無任務',
-        running: '執行中',
-        remoteReconnectRequired: '請先重新連線該遠端工作區，再開啟這個會話。',
-        switchProjectFailed: '無法切換到這個會話所在的工作區。',
-        actions: { taskActions: '操作', pin: '置頂', unpin: '取消置頂', archive: '封存', unarchive: '取消封存', markRead: '標為已讀', markUnread: '標為未讀', delete: '刪除' },
-        filter: { title: '篩選會話', status: '狀態', statusAll: '全部', statusActive: '活躍', statusArchived: '已封存', project: '專案', projectAll: '所有專案', lastActivity: '最近活動', activityAll: '任意時間', activityToday: '今天', activityWeek: '本週', activityMonth: '本月', groupBy: '分組方式', groupProject: '專案', groupDate: '日期', sortBy: '排序方式', sortRecency: '最近', sortName: '名稱', sortCreated: '建立時間', time: '時間', timeAll: '全部時間', timeToday: '今天', timeWeek: '本週', timeMonth: '本月', sort: '排序', sortRecent: '最近', sortTitle: '標題' },
-        dateBucket: { today: '今天', yesterday: '昨天', week: '本週', month: '本月', older: '更早' },
-        relativeTime: { now: '剛剛', minutes: '{{n}}分鐘', hours: '{{n}}小時', days: '{{n}}天' },
-      },
-      topbar: {
-        plan: '計劃', files: '檔案', changes: '變更', terminal: '終端機',
-        status: { running: '執行中', connected: '已連線', disconnected: '未連線' },
-        panelsHint: '面板 · {{status}}', panelsMenu: '面板選單 · {{status}}',
-      },
-      settings: {
-        backToWorkspace: '關閉',
-        tabs: { general: '一般', appearance: '外觀', providers: '服務商', mcp: 'MCP', skills: '技能', browser: '瀏覽器', ssh: 'SSH', channels: '渠道', shortcuts: '快捷鍵', usage: '用量' },
-        general: { title: '一般', serverState: '服務狀態', serverOnline: '在線', serverOffline: '離線', tokenUsage: 'Token 用量', preferences: '偏好', defaultMode: '預設模式', defaultModeDesc: '控制每個新聊天中 agent 的自主程度。', autoApproveTitle: '自動批准', autoApproveDesc: '無需提示即可自動批准工具呼叫。', bleTitle: '藍牙通知', bleDesc: '使用桌面 BLE 狀態通道傳送附近通知。', languageTitle: '語言', languageDesc: '介面語言偏好。', maxIterations: '最大迭代次數', maxIterationsReadOnly: '在 ~/.jcode/config.json 中設定，並在執行開始時生效。' },
-      },
-      chat: { modes: { approval: '請求批准', plan: '計劃', fullAccess: '完全存取' } },
-    },
-  },
-  ja: {
-    translation: {
-      common: { enable: '有効', disable: '無効', reset: 'リセット', loading: '読み込み中...' },
-      nav: { newTask: '新規チャット', chat: 'チャット', automations: '自動化', channels: 'チャンネル', workspace: 'ワークスペース', settingsWithShortcut: '設定 (⌘,)' },
-      sidebar: { noConversations: '会話はまだありません', noTasks: 'タスクはありません', running: '実行中', remoteReconnectRequired: 'この会話を開く前にリモートワークスペースへ再接続してください。', switchProjectFailed: 'この会話のワークスペースへ切り替えられませんでした。', actions: { taskActions: '操作', pin: 'ピン留め', unpin: 'ピン解除', archive: 'アーカイブ', unarchive: '復元', markRead: '既読にする', markUnread: '未読にする', delete: '削除' }, filter: { title: '会話をフィルター', status: '状態', statusAll: 'すべて', statusActive: 'アクティブ', statusArchived: 'アーカイブ済み', project: 'プロジェクト', projectAll: 'すべてのプロジェクト', lastActivity: '最終アクティビティ', activityAll: 'すべての期間', activityToday: '今日', activityWeek: '今週', activityMonth: '今月', groupBy: 'グループ化', groupProject: 'プロジェクト', groupDate: '日付', sortBy: '並び替え', sortRecency: '最近', sortName: '名前', sortCreated: '作成日', time: '時間', timeAll: '全期間', timeToday: '今日', timeWeek: '今週', timeMonth: '今月', sort: '並び替え', sortRecent: '最近', sortTitle: 'タイトル' }, dateBucket: { today: '今日', yesterday: '昨日', week: '今週', month: '今月', older: '以前' }, relativeTime: { now: '今', minutes: '{{n}}分', hours: '{{n}}時間', days: '{{n}}日' } },
-      topbar: { plan: '計画', files: 'ファイル', changes: '変更', terminal: 'ターミナル', status: { running: '実行中', connected: '接続済み', disconnected: '未接続' }, panelsHint: 'パネル · {{status}}', panelsMenu: 'パネルメニュー · {{status}}' },
-      settings: { backToWorkspace: '閉じる', tabs: { general: '一般', appearance: '外観', providers: 'プロバイダー', mcp: 'MCP', skills: 'スキル', browser: 'ブラウザー', ssh: 'SSH', channels: 'チャンネル', shortcuts: 'ショートカット', usage: '使用量' }, general: { title: '一般', serverState: 'サーバー状態', serverOnline: 'オンライン', serverOffline: 'オフライン', tokenUsage: 'トークン使用量', preferences: '設定', defaultMode: '既定モード', defaultModeDesc: '新しいチャットでの agent の自律性を制御します。', autoApproveTitle: '自動承認', autoApproveDesc: '確認なしでツール呼び出しを承認します。', bleTitle: 'Bluetooth 通知', bleDesc: 'デスクトップ BLE 状態チャンネルを使います。', languageTitle: '言語', languageDesc: 'UI 言語の設定。', maxIterations: '最大反復回数', maxIterationsReadOnly: '~/.jcode/config.json で設定され、実行開始時に適用されます。' } },
-      chat: { modes: { approval: '承認を求める', plan: '計画', fullAccess: 'フルアクセス' } },
-    },
-  },
-  ko: {
-    translation: {
-      common: { enable: '사용', disable: '사용 안 함', reset: '초기화', loading: '불러오는 중...' },
-      nav: { newTask: '새 채팅', chat: '채팅', automations: '자동화', channels: '채널', workspace: '작업공간', settingsWithShortcut: '설정 (⌘,)' },
-      sidebar: { noConversations: '아직 대화가 없습니다', noTasks: '작업이 없습니다', running: '실행 중', remoteReconnectRequired: '이 대화를 열기 전에 해당 원격 작업공간에 다시 연결하세요.', switchProjectFailed: '이 대화의 작업공간으로 전환하지 못했습니다.', actions: { taskActions: '작업', pin: '고정', unpin: '고정 해제', archive: '보관', unarchive: '보관 해제', markRead: '읽음으로 표시', markUnread: '읽지 않음으로 표시', delete: '삭제' }, filter: { title: '대화 필터', status: '상태', statusAll: '전체', statusActive: '활성', statusArchived: '보관됨', project: '프로젝트', projectAll: '모든 프로젝트', lastActivity: '최근 활동', activityAll: '전체 기간', activityToday: '오늘', activityWeek: '이번 주', activityMonth: '이번 달', groupBy: '그룹화', groupProject: '프로젝트', groupDate: '날짜', sortBy: '정렬', sortRecency: '최근', sortName: '이름', sortCreated: '생성일', time: '시간', timeAll: '전체 기간', timeToday: '오늘', timeWeek: '이번 주', timeMonth: '이번 달', sort: '정렬', sortRecent: '최근', sortTitle: '제목' }, dateBucket: { today: '오늘', yesterday: '어제', week: '이번 주', month: '이번 달', older: '이전' }, relativeTime: { now: '방금', minutes: '{{n}}분', hours: '{{n}}시간', days: '{{n}}일' } },
-      topbar: { plan: '계획', files: '파일', changes: '변경', terminal: '터미널', status: { running: '실행 중', connected: '연결됨', disconnected: '연결 안 됨' }, panelsHint: '패널 · {{status}}', panelsMenu: '패널 메뉴 · {{status}}' },
-      settings: { backToWorkspace: '닫기', tabs: { general: '일반', appearance: '모양', providers: '공급자', mcp: 'MCP', skills: '스킬', browser: '브라우저', ssh: 'SSH', channels: '채널', shortcuts: '단축키', usage: '사용량' }, general: { title: '일반', serverState: '서버 상태', serverOnline: '온라인', serverOffline: '오프라인', tokenUsage: '토큰 사용량', preferences: '환경설정', defaultMode: '기본 모드', defaultModeDesc: '새 채팅에서 agent 자율성을 제어합니다.', autoApproveTitle: '자동 승인', autoApproveDesc: '확인 없이 도구 호출을 승인합니다.', bleTitle: 'Bluetooth 알림', bleDesc: '데스크톱 BLE 상태 채널을 사용합니다.', languageTitle: '언어', languageDesc: '인터페이스 언어 설정.', maxIterations: '최대 반복', maxIterationsReadOnly: '~/.jcode/config.json 에서 설정되며 실행 시작 시 적용됩니다.' } },
-      chat: { modes: { approval: '승인 요청', plan: '계획', fullAccess: '전체 접근' } },
-    },
-  },
-} as const
-
-const fullResources = {
-  en: { translation: deepMerge(enBase, resources.en.translation) },
-  'zh-Hans': { translation: deepMerge(zhHansBase, resources['zh-Hans'].translation) },
-  'zh-Hant': { translation: deepMerge(zhHantBase, resources['zh-Hant'].translation) },
-  ja: { translation: deepMerge(jaBase, resources.ja.translation) },
-  ko: { translation: deepMerge(koBase, resources.ko.translation) },
-}
-
-void i18n.use(initReactI18next).init({
-  resources: fullResources,
-  lng: initialLocale(),
-  fallbackLng: FALLBACK,
-  interpolation: { escapeValue: false },
-})
-
-applyDocumentLang(i18n.language as SupportedLocale)
-
-export async function setLocale(locale: SupportedLocale): Promise<void> {
-  if (!isSupported(locale)) return
-  await i18n.changeLanguage(locale)
-  applyDocumentLang(locale)
-  localStorage.setItem(STORAGE_KEY, locale)
-  localStorage.removeItem(LEGACY_KEY)
-}
-
-export { i18n }
diff --git a/web-react/src/i18n/locales/en.ts b/web-react/src/i18n/locales/en.ts
deleted file mode 100644
index 150ceddc..00000000
--- a/web-react/src/i18n/locales/en.ts
+++ /dev/null
@@ -1,844 +0,0 @@
-/**
- * English source locale — the canonical key structure.
- *
- * Every other locale file (zh-Hans/zh-Hant/ja/ko) mirrors this exact shape.
- * When adding a new string, add the key here first, then mirror it into the
- * other four files. Group keys by feature domain; keep key names stable
- * (renames break all translations).
- */
-export default {
-  common: {
-    ok: 'OK',
-    add: 'Add',
-    cancel: 'Cancel',
-    close: 'Close',
-    back: 'Back',
-    delete: 'Delete',
-    save: 'Save',
-    saved: 'Saved',
-    edit: 'Edit',
-    retry: 'Retry',
-    loading: 'Loading…',
-    remove: 'Remove',
-    rename: 'Rename',
-    enable: 'Enable',
-    disable: 'Disable',
-    active: 'active',
-    configured: 'configured',
-    recommended: 'Recommended',
-    local: 'Local',
-    search: 'Search',
-    other: 'Other',
-    details: 'Details',
-    connected: 'Connected',
-    disconnected: 'Disconnected',
-    scanning: 'Scanning…',
-    notConfigured: 'Not configured',
-    done: 'Done',
-  },
-
-  nav: {
-    newTask: 'New task',
-    automations: 'Automations',
-    channels: 'Channels',
-    workspace: 'Workspace',
-    projects: 'Projects',
-    openFolder: 'Open Folder',
-    openProject: 'Open project…',
-    remoteConnect: 'Remote connect',
-    settings: 'Settings',
-    settingsWithShortcut: 'Settings (⌘,)',
-    switchToLight: 'Switch to light mode',
-    switchToDark: 'Switch to dark mode',
-    openSettings: 'Open settings',
-    toggleTheme: 'Toggle theme',
-  },
-
-  welcome: {
-    startIn: 'Start a new task in {project}',
-    subtitle: 'Send a message to start. {kbd} for commands.',
-  },
-
-  // Channels page (ChannelsView.vue) — the remote-control landing. Distinct
-  // from settings.channels.* (the WeChat config tab); this is the promo + mock.
-  channels: {
-    connected: 'Connected',
-    promo: {
-      // {accent}...</accent> wraps the emphasized span (rendered via v-html).
-      title: 'Approve and monitor from <span class="accent">your phone</span>',
-      lede: 'Link WeChat once. jcode forwards every approval request and task-completion notice straight to your chat — so a long-running agent never waits on you being at the desk.',
-    },
-    features: {
-      approvals: { title: 'One-tap approvals', desc: 'Approve or deny a tool call right from the WeChat message — no need to open the app.' },
-      notifications: { title: 'Done notifications', desc: 'Get pinged the moment a scheduled automation or background task finishes.' },
-      scan: { title: 'Scan to connect', desc: 'Pair in seconds with a QR code. Disconnect any time from Settings → Channels.' },
-    },
-    mock: {
-      now: 'now',
-      approvalTitle: 'Approval needed',
-      run: 'Run',
-      approve: 'Approve',
-      deny: 'Deny',
-      done: 'Nightly automations finished',
-      summary: '3 tasks · 0 failed',
-    },
-  },
-
-  // Connection-error overlay (App.vue). Currently hardcoded Chinese in the
-  // source — English is the canonical source here; the zh-* files carry the
-  // original Chinese wording.
-  auth: {
-    title: 'Access token required',
-    body: 'This server is reachable over the network, so it needs a token. Paste the token shown in the server startup banner.',
-    placeholder: 'Paste access token',
-    show: 'Show',
-    hide: 'Hide',
-    submit: 'Continue',
-    verifying: 'Verifying…',
-    required: 'Please enter the token',
-    invalid: 'Invalid token',
-    serverError: 'Could not verify the token. Check the connection and try again.',
-  },
-
-  connection: {
-    errorTitle: "Can't connect to the jcode service",
-    errorBody: 'The local service may not be ready yet, or it has stopped. Please retry shortly, or restart the app.',
-    retrying: 'Retrying…',
-    retry: 'Retry connection',
-  },
-
-  chat: {
-    placeholder: 'Ask JCODE or type / for commands',
-    goalPlaceholder: 'Describe the goal — the agent pursues it until verifiably complete',
-    workingPlaceholder: 'Agent is working…',
-    queuePlaceholder: 'Agent is working — type to queue a follow-up…',
-    queue: 'Queue',
-    removeQueued: 'Remove from queue',
-    stopAndNext: 'Stop current turn and send the next queued message',
-    send: 'Send',
-    stop: 'Stop',
-    stopAgent: 'Stop agent (Esc)',
-    thinking: 'Thinking…',
-    attachFiles: 'Attach files',
-    goal: 'Goal',
-    add: 'Add',
-    copilotHint: 'Enter to send · Shift+Enter for newline · Esc to cancel',
-    turnDuration: 'Time this turn took',
-    wechatOn: 'WeChat notifications ON',
-    wechatOff: 'WeChat notifications OFF',
-    modes: {
-      approval: 'Ask for approval',
-      approvalSub: 'Pause before each write or command.',
-      plan: 'Plan',
-      planSub: 'Propose a plan first; nothing runs until you approve it.',
-      fullAccess: 'Full access',
-      fullAccessSub: 'Act freely — no approval prompts.',
-    },
-    roles: {
-      you: 'You',
-      assistant: 'JCODE',
-      wechat: 'WeChat',
-      system: 'System',
-      error: 'Error',
-    },
-    actions: {
-      copy: 'Copy',
-      copied: 'Copied!',
-    },
-    model: {
-      current: 'Current',
-      favorites: '★ Favorites',
-      manage: 'Manage models…',
-      manageTitle: 'Manage Models',
-      none: 'No models available',
-      noMatch: 'No models match your filter.',
-      filter: 'Filter models…',
-      toggleVisibility: 'Toggle which models appear in the model selector',
-      noImages: 'Current model does not support images',
-      reasoning: 'Reasoning',
-      tools: 'Tool use',
-      images: 'Image input',
-      // Per-model reasoning-effort control (chat picker).
-      effort: 'Effort',
-      effortTitle: 'Reasoning effort for this model',
-      effortDefault: 'Default',
-      visibleCount: '{visible} of {total} models visible in the selector',
-    },
-    goalHint: {
-      replace: 'Setting a new goal replaces the current one',
-      next: 'Next message becomes the session goal',
-      nextReplaces: 'Next message replaces the current goal',
-      remove: 'Remove goal',
-    },
-    // Slash-command placeholder shown when the user types "/".
-    command: 'Command',
-    stopped: 'Stopped',
-    nextMessageGoal: 'Next message becomes the session goal',
-    durationSeconds: '{n}s',
-    durationMinutes: '{m}m {s}s',
-    durationMinutesOnly: '{m}m',
-  },
-
-  approval: {
-    needed: 'Approval needed',
-    asking: 'Asking',
-    allowed: 'Allowed',
-    denied: 'Denied',
-    external: '· external',
-    externalPath: 'external path',
-    allowOnce: 'Allow once',
-    allowAll: 'Allow all',
-    confirm: 'Confirm?',
-    confirmHint: 'Click again to auto-approve the rest of the session',
-    allowAllTitle: 'Approve this and auto-approve the rest of the session',
-    deny: 'Deny',
-    toggleArgs: 'Toggle arguments',
-    runCommand: 'Run command',
-    createFile: 'Create file',
-    editFile: 'Edit file',
-    toolAction: '{name}',
-    showArgs: 'Show arguments',
-    hideArgs: 'Hide arguments',
-  },
-
-  tool: {
-    // Tool display titles (composables/toolInfo.ts).
-    read: 'Read',
-    write: 'Write',
-    edit: 'Edit',
-    multiEdit: 'Multi Edit',
-    glob: 'Glob',
-    search: 'Search',
-    shell: 'Shell',
-    background: 'Background',
-    updateTodos: 'Update Todos',
-    readTodos: 'Read Todos',
-    subagent: 'Subagent',
-    askUser: 'Ask User',
-    // Status / progress labels (ToolCallCard.vue).
-    subagentLabel: 'subagent',
-    teamLabel: 'team',
-    working: 'working…',
-    starting: 'Starting subagent…',
-    running: 'running…',
-    loading: 'Loading…',
-    noContent: 'No content',
-    noChanges: 'No changes',
-    applying: 'Applying…',
-    searching: 'Searching…',
-    noResults: 'No results',
-    noTodos: 'No todos',
-    loadingLower: 'loading…',
-    noTeammates: 'No teammates',
-    created: '✓ created',
-    creating: 'creating…',
-    lead: 'lead:',
-    runningMark: '✓ running',
-    spawning: 'spawning…',
-    id: 'id:',
-    all: 'all',
-    sent: '✓ sent',
-    sending: 'sending…',
-    args: 'args',
-    output: 'output',
-    error: 'error',
-    calls: '{n} calls',
-    matchesFound: '({n} matches found)',
-    members: '{n} members',
-  },
-
-  settings: {
-    backToWorkspace: 'Back to workspace',
-    title: 'Settings',
-    tabs: {
-      general: 'General',
-      appearance: 'Appearance',
-      providers: 'Providers',
-      mcp: 'MCP Servers',
-      skills: 'Skills',
-      browser: 'Browser',
-      ssh: 'SSH',
-      channels: 'Channels',
-      shortcuts: 'Shortcuts',
-      usage: 'Usage',
-    },
-    general: {
-      serverOnline: 'Online',
-      serverOffline: 'Offline',
-      serverState: 'Server',
-      tokenUsage: 'Token Usage',
-      preferences: 'Preferences',
-      autoApproveTitle: 'Default auto-approve',
-      autoApproveDesc: 'Run tool calls — file edits and commands — automatically without asking for confirmation (same as Full access mode; Plan mode still asks). Saved as the default for new sessions.',
-      bleTitle: 'Bluetooth status notifications',
-      bleDesc: 'Push agent status — working, needs approval, done — to a paired JCODE Bluetooth device. Takes effect after restarting the app.',
-      languageTitle: 'Language',
-      languageDesc: 'Interface language for the app.',
-    },
-    appearance: {
-      theme: 'Theme',
-      system: 'System',
-      systemDesc: 'Follow your OS light / dark setting',
-      dark: 'Dark',
-      light: 'Light',
-      active: 'active',
-      terminalHint: 'The terminal UI has its own themes — switch them there with the {cmd} command.',
-    },
-    providers: {
-      title: 'Providers',
-      add: '+ Add provider',
-      selectProvider: 'Select Provider',
-      selectModel: 'Select Model',
-      enterApiKey: 'Enter API Key',
-      apiKey: 'API Key',
-      baseUrl: 'Base URL (optional)',
-      saving: 'Saving…',
-      addBtn: 'Add',
-      noneConfigured: 'No providers configured',
-      noneHint: 'Add one with the {btn} button above to get started.',
-      allConfigured: 'All providers configured',
-      remove: 'Remove provider',
-      confirmRemove: 'Remove this provider?',
-      testConnection: 'Test Connection',
-      testing: 'Checking…',
-      connected: 'Connected',
-      connectFailed: 'Connection failed',
-      loadingHint: 'Loading…',
-      edit: 'Edit provider',
-      editProvider: 'Edit Provider',
-      apiKeyUnchanged: 'API Key (leave blank to keep)',
-      advanced: 'Advanced',
-      endpoint: 'Custom Endpoint',
-      endpointPlaceholder: 'https://api.example.com/v1',
-      headers: 'Custom Headers',
-      addHeader: 'Add header',
-      headerKey: 'Header name',
-      headerValue: 'Value',
-      headersHint: 'Leave a value blank to keep the saved one.',
-      // Custom (non-registry, OpenAI-compatible) provider support.
-      custom: 'Custom',
-      customProvider: 'Custom Provider',
-      customProviderDesc: 'Any OpenAI-compatible endpoint',
-      customId: 'Provider ID',
-      customIdPlaceholder: 'my-provider',
-      customIdRequired: 'Provider ID is required',
-      customName: 'Display name',
-      customNamePlaceholder: 'My Provider',
-      customModelId: 'Model ID',
-      customModelPlaceholder: 'gpt-4o',
-      customModelRequired: 'Model ID is required for custom providers',
-      customUrlRequired: 'Base URL is required for custom providers',
-      customReasoning: 'Reasoning model',
-      customReasoningDesc: 'Expose reasoning-effort control for this model',
-      customModels: 'Custom Models',
-      customModelsHint: 'Models you can route to on this provider.',
-      addModel: 'Add model',
-      editModel: 'Edit model',
-      customModelNamePlaceholder: 'Display name (optional)',
-      contextWindow: 'Context window (tokens)',
-      contextPlaceholder: '200000',
-      testEnterKey: 'Enter an API key above to test',
-      customModelExists: 'This model ID already exists',
-      customModelConflict: 'This model ID duplicates an existing model (including built-in) — choose another',
-      browseCatalog: 'Browse models',
-      browseModels: 'Browse models',
-      models: 'models',
-      addCustomModel: 'Custom model',
-      supportImage: 'Supports images',
-      supportImageDesc: 'Allow image attachments',
-      supportReasoning: 'Reasoning effort',
-      supportReasoningDesc: 'Define selectable effort tiers',
-      effortTiers: 'Effort tiers',
-      effortTiersHint: 'Each tier is a selectable level in the model picker, e.g. minimal / low / medium / high / max',
-      addTier: 'Add tier',
-      newTierPlaceholder: 'tier name',
-      catalogSearch: 'Search models…',
-      refreshCatalog: 'Refresh catalog',
-      hideModel: 'Hide this model',
-      showModel: 'Show this model',
-      addedCount: 'added',
-      noCatalog: 'No catalog for this endpoint — add models manually',
-      switchModelFirst: 'This model is in use — switch to another first',
-      deleteInUseTitle: 'Cannot delete: a model on this provider is in use',
-      deleteInUseBody: 'The current session is using {model}. Switch to another provider’s model before deleting this connection.',
-      testSuccess: 'Connection successful',
-      testLatency: 'Latency',
-      testModels: '{n} models found',
-      testAuthFail: 'Authentication failed',
-      testNetworkFail: 'Network error',
-      switchModel: 'Switch model',
-    },
-    mcp: {
-      title: 'MCP Servers',
-      add: '+ Add server',
-      addServer: 'Add server',
-      editServer: 'Edit server',
-      name: 'Name',
-      serverName: 'Server name',
-      command: 'Command',
-      args: 'Args',
-      arguments: 'Arguments',
-      env: 'Env (key=value per line)',
-      transport: 'Transport',
-      transportLocal: 'Local',
-      url: 'URL',
-      headers: 'Headers',
-      addHeader: '+ Add header',
-      headerKey: 'Key',
-      headerValue: 'Value',
-      useOauth: 'Use OAuth (log in after saving)',
-      oauthClientId: 'OAuth Client ID',
-      oauthClientSecret: 'OAuth Client Secret',
-      oauthScopes: 'Scopes',
-      timeout: 'Timeout (seconds)',
-      status: {
-        disabled: 'Disabled',
-        connected: 'Connected',
-        loginRequired: 'Login required',
-        error: 'Error',
-        configured: 'Configured',
-      },
-      login: 'Log in',
-      reauth: 'Re-authenticate',
-      waitingBrowser: 'Waiting for browser…',
-      authenticated: 'Authenticated',
-      none: 'No MCP servers configured.',
-      noneConfigured: 'No MCP servers configured',
-      noneHint: 'Connect one with the {btn} button above.',
-      save: 'Save',
-    },
-    skills: {
-      title: 'Skills',
-      add: 'Add skill',
-      none: 'No skills found',
-      noneHint: 'Try a different filter or search term.',
-      search: 'Search skills…',
-      filterAll: 'All',
-      filterLocal: 'On this device',
-      filterBuiltin: 'Built-in',
-      builtin: 'Built-in',
-      loadingHint: 'Loading…',
-    },
-    browser: {
-      title: 'Browser',
-      subtitle: 'Let jcode operate a browser. The managed browser works out of the box; connect the Chrome extension to reuse your logged-in sessions.',
-      enableTitle: 'Enable browser use',
-      enableDesc: 'Adds the browser_* tools to the agent.',
-      control: 'Control',
-      managed: 'Managed browser',
-      noChrome: 'No Chrome found — set a path below',
-      extension: 'Google Chrome extension',
-      connected: 'Reuse your own Chrome + logins',
-      notConnected: 'Not connected — reuse your own Chrome + logins',
-      online: 'Connected',
-      connectHint: 'To connect: install the jcode Browser Bridge extension, open its popup, and click "Auto-connect to jcode".',
-      chromePath: 'Chrome path',
-      approval: 'Approval',
-      navigate: 'Open sites (navigation)',
-      interact: 'Page interaction (click / type)',
-      askEachSite: 'Ask each site',
-      alwaysAllow: 'Always allow',
-      sitePermissions: 'Site permissions',
-      add: 'Add',
-      noSitePermissions: 'No site-specific permissions yet',
-      developerMode: 'Developer mode',
-      elevatedRisk: 'Elevated risk',
-      devModeTitle: 'Enable browser_eval & raw CDP',
-      devModeDesc: "Lets the agent run JavaScript and raw DevTools commands in the page. Each call still prompts; site allow-lists don't apply.",
-    },
-    ssh: {
-      title: 'SSH Environments',
-      connect: 'Connect to remote host',
-      currentEnv: 'Current Environment',
-      noneConfigured: 'No saved hosts',
-      noneHint: 'Use {btn} to add one, or pre-configure hosts in {config}.',
-      connectTo: 'Connect to {name}',
-      host: 'Host',
-      port: 'Port',
-      user: 'User',
-      password: 'Password',
-      key: 'Key',
-      privateKeyPath: 'Private key path',
-      passphrase: 'Passphrase (optional)',
-      savedAlias: 'Saved alias (optional)',
-      noAlias: "Don't use an alias",
-      saveAlias: 'Save alias',
-      remove: 'Remove',
-    },
-    channels: {
-      title: 'Notification Channels',
-      scanQr: 'Scan with WeChat to connect',
-      activate: 'Send a message to activate',
-      activateBody: 'Please send any message to the WeChat bot now to activate notifications. Once activated, you can receive notifications for 24 hours.',
-      wechat: 'WeChat',
-      integration: 'iLink Bot integration',
-      connect: 'Connect',
-      disconnect: 'Disconnect',
-      loadingHint: 'Loading…',
-      noneConfigured: 'No channels configured',
-      noneHint: 'Set {flag} in {config}.',
-      whenConnected: 'When connected, jcode sends approval requests and task completion notifications to your WeChat.',
-      enable: 'Enable WeChat notifications',
-      permission: 'Notification permission',
-      grant: 'Grant permission',
-      test: 'Send a test notification',
-      loginRequired: 'Login required',
-      login: 'Login',
-    },
-    shortcuts: {
-      title: 'Keyboard Shortcuts',
-      items: {
-        sendMessage: 'Send message',
-        newLine: 'New line',
-        stopAgent: 'Stop agent',
-        slashCommands: 'Slash commands',
-        focusInput: 'Focus input',
-        newConversation: 'New conversation',
-        openSettings: 'Open settings',
-        toggleTerminal: 'Toggle terminal',
-      },
-    },
-    usageStats: {
-      title: 'Usage Statistics',
-      subtitle: 'Token usage, sessions and cache efficiency across all projects.',
-      lastNDays: 'Last {n} days',
-      totalTokens: 'Tokens used',
-      cacheHitRate: 'Cache hit rate',
-      mostUsedModel: 'Top model',
-      share: '{pct} of tokens',
-      sessions: 'Sessions',
-      turns: 'Turns',
-      activeDays: 'Active days',
-      streak: '{n}-day streak',
-      tokenBreakdown: 'Token breakdown',
-      tokenBreakdownHint: 'Cached is part of Input and Reasoning is part of Output — these don’t sum.',
-      promptTokens: 'Input',
-      cachedTokens: 'Cached',
-      completionTokens: 'Output',
-      reasoningTokens: 'Reasoning',
-      heatmap: 'Activity heatmap',
-      less: 'Less',
-      more: 'More',
-      dailyTrend: 'Daily tokens',
-      byModel: 'By model',
-      byProject: 'By project',
-      noData: 'No data yet',
-      noActivity: 'No activity',
-      turnsUnit: 'turns',
-    },
-  },
-
-  contextCapacity: {
-    title: 'Context capacity',
-    messages: 'Messages',
-    systemTools: 'System tools',
-    mcpTools: 'MCP tools',
-    skills: 'Skills',
-    systemPrompt: 'System prompt',
-    cacheHitRate: 'Cache hit rate',
-    freeSpace: 'Free space',
-    sessionTotal: 'Conversation total',
-    estimated: 'Breakdown is estimated (~4 bytes/token).',
-  },
-
-  setup: {
-    step: 'Step {n}: {label}',
-    chooseProvider: 'Choose a Provider',
-    enterApiKey: 'Enter API Key',
-    allSet: "You're all set!",
-    startCoding: 'Start coding',
-    searchProviders: 'Search providers…',
-    noProviders: 'No providers found',
-    selectProviderDesc: "Select the AI provider you'd like to use.",
-    loadingProviders: 'Loading providers…',
-    for: 'For',
-    envVar: 'Environment variable',
-    apiKey: 'API Key',
-    apiKeyPlaceholder: 'sk-…',
-    apiKeyRequired: 'API Key is required',
-    baseUrl: 'Base URL (optional)',
-    testConnection: 'Test Connection',
-    checking: 'Checking…',
-    connected: 'Connected',
-    settingUp: 'Setting up…',
-    retry: 'Retry',
-    savedTo: 'Configuration saved to ~/.jcode/config.json',
-    completeSetup: 'Complete Setup',
-    usingModel: 'Using {model} via {provider}',
-    // Custom (OpenAI-compatible) provider entry on the setup wizard.
-    customProvider: 'Custom Provider',
-    customProviderDesc: 'Any OpenAI-compatible endpoint',
-    customId: 'Provider ID',
-    customIdPlaceholder: 'my-provider',
-    customIdRequired: 'Provider ID is required',
-    customName: 'Display name',
-    customNamePlaceholder: 'My Provider',
-      customModelId: 'Model ID',
-      customModelPlaceholder: 'gpt-4o',
-      customModelRequired: 'Model ID is required for custom providers',
-      customUrlRequired: 'Base URL is required for custom providers',
-      customReasoning: 'Reasoning model',
-      customReasoningDesc: 'Expose reasoning-effort control for this model',
-      // Advanced settings panel.
-      advanced: 'Advanced',
-    headers: 'Custom Headers',
-    addHeader: 'Add header',
-    headerKey: 'Header name',
-    headerValue: 'Value',
-  },
-
-  wizard: {
-    title: 'Remote connect',
-    chooseMethod: 'Choose a connection method',
-    ssh: 'SSH',
-    docker: 'Docker',
-    remoteHost: 'Remote host',
-    container: 'Container',
-    comingSoon: 'Coming soon',
-    dockerConnection: 'Docker container',
-    dockerDesc: 'Pick a container to use as the workspace. A stopped container is started for you, and stopped again when no task is using it.',
-    selectContainer: 'Select a container',
-    noContainers: 'No containers found on this Docker host.',
-    refresh: 'Refresh',
-    running: 'running',
-    stopped: 'stopped',
-    sshConnection: 'SSH connection',
-    pickMethodDesc: 'Pick how to enter the remote workspace, then fill in the details.',
-    next: 'Next',
-    sshDesc: 'Key/agent auth uses your local SSH keys; password & passphrase are supported.',
-    auth: 'Auth',
-    hostPlaceholder: '1.2.3.4 or example.com',
-    userPlaceholder: 'root',
-    dirDesc: 'Choose the working directory for this remote workspace.',
-    backToConfig: 'Back to config',
-    aliasNamePlaceholder: 'name',
-    steps: {
-      chooseMethod: 'Choose method',
-      configure: 'Configure',
-      connecting: 'Connecting',
-      selectDirectory: 'Select directory',
-    },
-    connecting: 'Connecting…',
-    connect: 'Connect',
-    selectDirectory: 'Select a directory',
-    loading: 'Loading…',
-    noSubDirs: 'No sub-directories',
-    saveAlias: 'Save as alias',
-    useDirectory: 'Use this directory',
-  },
-
-  sidebar: {
-    hideArchived: 'Hide archived tasks',
-    showArchived: 'Show archived tasks',
-    noProjects: 'No projects yet',
-    noTasks: 'No tasks',
-    running: 'Running',
-    newTaskHere: 'New task here',
-    filter: {
-      title: 'Filters & sorting',
-      status: 'Status',
-      statusActive: 'Active',
-      statusArchived: 'Archived',
-      statusAll: 'All',
-      project: 'Project',
-      projectAll: 'All',
-      lastActivity: 'Last activity',
-      activityAll: 'All',
-      activityToday: 'Today',
-      activityWeek: 'Last 7 days',
-      activityMonth: 'Last 30 days',
-      groupBy: 'Group by',
-      groupProject: 'Project',
-      groupDate: 'Date',
-      sortBy: 'Sort by',
-      sortRecency: 'Recency',
-      sortName: 'Name',
-      sortCreated: 'Created',
-      reset: 'Reset filters',
-    },
-    dateBucket: {
-      today: 'Today',
-      yesterday: 'Yesterday',
-      week: 'Previous 7 days',
-      month: 'Previous 30 days',
-      older: 'Older',
-    },
-    actions: {
-      pin: 'Pin',
-      unpin: 'Unpin',
-      rename: 'Rename',
-      archive: 'Archive',
-      unarchive: 'Unarchive',
-      markRead: 'Mark read',
-      markUnread: 'Mark unread',
-      delete: 'Delete',
-      taskActions: 'Task actions',
-    },
-    relativeTime: {
-      now: 'now',
-      // Suffixes applied to a numeric value.
-      minutes: '{n}m',
-      hours: '{n}h',
-      days: '{n}d',
-    },
-  },
-
-  topbar: {
-    panels: 'Panels',
-    panelsMenu: 'Panels menu · {status}',
-    panelsHint: 'Panels · {status}  (⇧⌘P plan · ⇧⌘E files · ⇧⌘G changes · ⌘` terminal)',
-    plan: 'Plan',
-    files: 'Files',
-    changes: 'Changes',
-    terminal: 'Terminal',
-    status: {
-      running: 'Running',
-      connected: 'Connected',
-      disconnected: 'Disconnected',
-    },
-  },
-
-  rightPanel: {
-    plan: 'Plan',
-    files: 'Files',
-    changes: 'Changes',
-    noTasks: 'No tasks yet',
-  },
-
-  diff: {
-    changes: 'Changes',
-    refresh: '↻ Refresh',
-    noChanges: 'No changes',
-    selectFile: 'Select a file to view changes',
-    modes: {
-      session: 'Session',
-      working: 'Working',
-      staged: 'Staged',
-      branch: 'Branch',
-    },
-  },
-
-  branches: {
-    title: 'Branches',
-    none: 'No branches',
-    create: 'Create & checkout new branch',
-    createBtn: 'Create',
-    search: 'Search branches',
-    newName: 'new-branch-name',
-    current: 'Branch: {name}',
-    confirmTitle: 'Uncommitted work',
-    confirmIntro: 'Switching to "{branch}" would overwrite local files at:',
-    confirmMore: '+{count} more',
-    confirmStash: 'Stash & switch',
-    confirmDiscard: 'Discard & switch',
-    confirmCancel: 'Cancel',
-    confirmHint: 'Stash saves your work (recover with git stash pop). Discard permanently deletes these files, including untracked ones.',
-  },
-
-  projectSwitcher: {
-    title: 'Projects',
-    openFolder: 'Open Folder',
-    ok: 'OK',
-    loading: 'Loading…',
-    noFolders: 'No folders found',
-    switching: 'Switching project…',
-    noProjects: 'No projects yet',
-    removeProject: 'Remove project',
-    openFolderBtn: '+ Open Folder',
-    pathPlaceholder: '/path/to/folder',
-  },
-
-  workspace: {
-    none: 'No workspace',
-    loading: 'Loading…',
-    noFolders: 'No folders',
-    open: 'Open',
-    nonePlural: 'No workspaces',
-    search: 'Search workspaces',
-    openFolder: 'Open folder',
-    openError: 'Failed to open workspace',
-  },
-
-  askUser: {
-    asking: 'Asking',
-    collapse: 'Collapse',
-    skip: 'Skip',
-    other: 'Other',
-    submit: 'Submit',
-    noAnswer: 'No answer recorded',
-    customPlaceholder: 'Type your own answer here',
-  },
-
-  goal: {
-    clearGoal: 'Clear goal',
-    clear: 'Clear',
-    tokens: '{used} tokens',
-    tokensK: '{k}k tokens',
-    status: {
-      active: 'Active',
-      inProgress: 'In progress',
-      completed: 'Completed',
-      blocked: 'Blocked',
-    },
-    // Goal status messages rendered as system messages in the timeline.
-    statusReport: '🎯 {status} — {objective}',
-    noGoal: '🎯 No goal set. Use /goal <objective> to set one.',
-    cleared: '🎯 Goal cleared.',
-  },
-
-  commandPalette: {
-    placeholder: 'Search tasks or run a command…',
-    noResults: 'No results',
-    groups: {
-      actions: 'Actions',
-      tasks: 'Tasks',
-    },
-    newTask: 'New task',
-  },
-
-  notifications: {
-    taskFinished: 'jcode — task finished',
-    taskFailed: 'jcode — task failed',
-    approvalNeeded: 'jcode — approval needed',
-    finishedBody: 'The agent finished its run.',
-    approvalBody: 'The agent is waiting for your approval.',
-  },
-
-  terminal: {
-    newTerminal: 'New terminal',
-    closePanel: 'Close panel',
-    closeTab: 'Close {label}',
-    shell: 'Shell {n}',
-    failedCreate: 'Failed to create terminal: {msg}',
-    sessionEnded: '[Session ended]',
-  },
-
-  fileTree: {
-    root: 'root',
-    loading: 'Loading…',
-    empty: 'Empty directory',
-    dirError: "Couldn't load this directory.",
-    fileError: "Couldn't open {name} (it may be a binary file, too large, or unreadable).",
-  },
-
-  fileViewer: {
-    close: 'Close',
-  },
-
-  // Backend-error friendliness (stores/chat.ts friendlyError()).
-  errors: {
-    timeout: 'The request timed out. Please try again.',
-    network: 'Network error. Check your connection and try again.',
-    auth: 'Authentication failed. Check your API key in settings.',
-    rateLimit: 'Rate limited by the provider. Please wait and try again.',
-    provider: 'The model provider had a temporary error. Please try again.',
-    switchFailed: 'Failed to switch project',
-    remoteReconnect: 'Remote workspace — reconnect via the SSH wizard',
-    branchSwitch: 'Failed to switch branch',
-    generic: 'Something went wrong.',
-    submitAnswer: 'Failed to submit answer: {detail}',
-    approval: 'Approval failed: {detail}',
-    switchModel: 'Failed to switch model: {detail}',
-    loadSession: 'Failed to load session: {detail}',
-  },
-}
diff --git a/web-react/src/i18n/locales/ja.ts b/web-react/src/i18n/locales/ja.ts
deleted file mode 100644
index e4671321..00000000
--- a/web-react/src/i18n/locales/ja.ts
+++ /dev/null
@@ -1,765 +0,0 @@
-/**
- * 日本語 (ja)。キー構造は en.ts と完全に一致します。
- */
-export default {
-  common: {
-    ok: 'OK',
-    add: '追加',
-    cancel: 'キャンセル',
-    close: '閉じる',
-    back: '戻る',
-    delete: '削除',
-    save: '保存',
-    saved: '保存済み',
-    edit: '編集',
-    retry: '再試行',
-    loading: '読み込み中…',
-    remove: '削除',
-    rename: '名前変更',
-    enable: '有効化',
-    disable: '無効化',
-    active: '使用中',
-    configured: '設定済み',
-    recommended: '推奨',
-    local: 'ローカル',
-    search: '検索',
-    other: 'その他',
-    details: '詳細',
-    connected: '接続済み',
-    disconnected: '未接続',
-    scanning: 'スキャン中…',
-    notConfigured: '未設定',
-    done: '完了',
-  },
-
-  nav: {
-    newTask: '新しいタスク',
-    automations: '自動化',
-    channels: 'チャネル',
-    workspace: 'ワークスペース',
-    projects: 'プロジェクト',
-    openFolder: 'フォルダーを開く',
-    openProject: 'プロジェクトを開く…',
-    remoteConnect: 'リモート接続',
-    settings: '設定',
-    settingsWithShortcut: '設定 (⌘,)',
-    switchToLight: 'ライトモードに切り替え',
-    switchToDark: 'ダークモードに切り替え',
-    openSettings: '設定を開く',
-    toggleTheme: 'テーマを切り替え',
-  },
-
-  welcome: {
-    startIn: '{project} で新しいタスクを開始',
-    subtitle: 'メッセージを送信して開始します。{kbd} でコマンドを表示。',
-  },
-
-  channels: {
-    connected: '接続済み',
-    promo: {
-      title: '<span class="accent">スマホから</span>承認・監視',
-      lede: 'WeChat に一度だけ連携すれば、jcode はすべての承認要求とタスク完了通知をチャットに直接転送します。長時間のエージェント実行をデスクで待つ必要はありません。',
-    },
-    features: {
-      approvals: { title: 'ワンタップ承認', desc: 'WeChat メッセージから直接ツール呼び出しを承認・拒否できます。アプリを開く必要はありません。' },
-      notifications: { title: '完了通知', desc: 'スケジュールされた自動化やバックグラウンドタスクが完了した瞬間に通知します。' },
-      scan: { title: 'スキャンで接続', desc: 'QR コードで数秒でペアリング。設定 → チャネルからいつでも切断できます。' },
-    },
-    mock: {
-      now: 'たった今',
-      approvalTitle: '承認が必要です',
-      run: '実行',
-      approve: '承認',
-      deny: '拒否',
-      done: '夜間自動化が完了しました',
-      summary: '3 タスク · 0 失敗',
-    },
-  },
-
-  auth: {
-    title: 'アクセストークンが必要です',
-    body: 'このサーバーはネットワーク経由でアクセス可能なため、トークンが必要です。起動時に表示されたトークンを貼り付けてください。',
-    placeholder: 'アクセストークンを貼り付け',
-    show: '表示',
-    hide: '非表示',
-    submit: '続行',
-    verifying: '検証中…',
-    required: 'トークンを入力してください',
-    invalid: 'トークンが無効です',
-    serverError: 'トークンを検証できませんでした。接続を確認して再試行してください。',
-  },
-
-  connection: {
-    errorTitle: 'jcode サービスに接続できません',
-    errorBody: 'ローカルサービスの準備ができていないか、停止している可能性があります。しばらくしてから再試行するか、アプリを再起動してください。',
-    retrying: '再試行中…',
-    retry: '再接続',
-  },
-
-  chat: {
-    placeholder: 'JCODE に質問、または / でコマンドを入力',
-    goalPlaceholder: '目標を記述 — 検証可能になるまでエージェントが追求します',
-    workingPlaceholder: 'エージェントが作業中…',
-    queuePlaceholder: 'エージェントが作業中 — 入力するとキューに追加されます…',
-    queue: 'キュー',
-    removeQueued: 'キューから削除',
-    stopAndNext: '現在のターンを停止して次のキューを送信',
-    send: '送信',
-    stop: '停止',
-    stopAgent: 'エージェントを停止 (Esc)',
-    thinking: '考え中…',
-    attachFiles: 'ファイルを添付',
-    goal: '目標',
-    add: '追加',
-    copilotHint: 'Enter で送信 · Shift+Enter で改行 · Esc でキャンセル',
-    turnDuration: 'このターンの所要時間',
-    wechatOn: 'WeChat 通知オン',
-    wechatOff: 'WeChat 通知オフ',
-    modes: {
-      approval: '承認を求める',
-      approvalSub: '書き込みやコマンド実行の前に毎回確認します。',
-      plan: '計画',
-      planSub: 'まず計画を提案し、承認するまで実行しません。',
-      fullAccess: 'フルアクセス',
-      fullAccessSub: '自由に実行—確認は不要です。',
-    },
-    roles: {
-      you: 'あなた',
-      assistant: 'JCODE',
-      wechat: 'WeChat',
-      system: 'システム',
-      error: 'エラー',
-    },
-    actions: {
-      copy: 'コピー',
-      copied: 'コピーしました！',
-    },
-    model: {
-      current: '現在',
-      favorites: '★ お気に入り',
-      manage: 'モデルを管理…',
-      manageTitle: 'モデルを管理',
-      none: '利用可能なモデルがありません',
-      noMatch: '条件に一致するモデルがありません。',
-      filter: 'モデルを絞り込み…',
-      toggleVisibility: 'モデルセレクターに表示するモデルを選択',
-      noImages: '現在のモデルは画像をサポートしていません',
-      reasoning: '推論',
-      tools: 'ツール使用',
-      images: '画像入力',
-      effort: '強度',
-      effortTitle: 'このモデルの推論強度',
-      effortDefault: 'デフォルト',
-      visibleCount: 'セレクターに {visible} / {total} モデルを表示',
-    },
-    goalHint: {
-      replace: '新しい目標を設定すると現在の目標が置き換えられます',
-      next: '次のメッセージがセッションの目標になります',
-      nextReplaces: '次のメッセージが現在の目標を置き換えます',
-      remove: '目標を削除',
-    },
-    command: 'コマンド',
-    stopped: '停止しました',
-    nextMessageGoal: '次のメッセージがセッションの目標になります',
-    durationSeconds: '{n}秒',
-    durationMinutes: '{m}分 {s}秒',
-    durationMinutesOnly: '{m}分',
-  },
-
-  approval: {
-    needed: '承認が必要です',
-    asking: '質問中',
-    allowed: '許可済み',
-    denied: '拒否されました',
-    external: '· 外部',
-    externalPath: '外部パス',
-    allowOnce: '一度だけ許可',
-    allowAll: 'すべて許可',
-    confirm: '確認？',
-    confirmHint: 'もう一度クリックすると、このセッションの残りの操作を自動承認します',
-    allowAllTitle: 'これを承認し、セッションの残りの操作を自動承認します',
-    deny: '拒否',
-    toggleArgs: '引数の表示切替',
-    runCommand: 'コマンドを実行',
-    createFile: 'ファイルを作成',
-    editFile: 'ファイルを編集',
-    toolAction: '{name}',
-    showArgs: '引数を表示',
-    hideArgs: '引数を非表示',
-  },
-
-  tool: {
-    read: '読み取り',
-    write: '書き込み',
-    edit: '編集',
-    multiEdit: '複数編集',
-    glob: 'ファイル検索',
-    search: '検索',
-    shell: 'シェル',
-    background: 'バックグラウンド',
-    updateTodos: 'Todo を更新',
-    readTodos: 'Todo を読み取り',
-    subagent: 'サブエージェント',
-    askUser: 'ユーザーに質問',
-    subagentLabel: 'サブエージェント',
-    teamLabel: 'チーム',
-    working: '作業中…',
-    starting: 'サブエージェントを開始中…',
-    running: '実行中…',
-    loading: '読み込み中…',
-    noContent: '内容なし',
-    noChanges: '変更なし',
-    applying: '適用中…',
-    searching: '検索中…',
-    noResults: '結果なし',
-    noTodos: 'Todo なし',
-    loadingLower: '読み込み中…',
-    noTeammates: 'チームメイトなし',
-    created: '✓ 作成済み',
-    creating: '作成中…',
-    lead: 'リード：',
-    runningMark: '✓ 実行中',
-    spawning: '起動中…',
-    id: 'ID：',
-    all: 'すべて',
-    sent: '✓ 送信済み',
-    sending: '送信中…',
-    args: '引数',
-    output: '出力',
-    error: 'エラー',
-    calls: '{n} 回の呼び出し',
-    matchesFound: '({n} 件の一致)',
-    members: '{n} 人のメンバー',
-  },
-
-  settings: {
-    backToWorkspace: 'ワークスペースに戻る',
-    title: '設定',
-    tabs: {
-      general: '一般',
-      appearance: '外観',
-      providers: 'プロバイダー',
-      mcp: 'MCP サーバー',
-      skills: 'スキル',
-      browser: 'ブラウザ',
-      ssh: 'SSH',
-      channels: 'チャンネル',
-      shortcuts: 'ショートカット',
-      usage: '使用状況',
-    },
-    general: {
-      serverOnline: 'オンライン',
-      serverOffline: 'オフライン',
-      serverState: 'サーバー',
-      tokenUsage: 'トークン使用量',
-      preferences: '設定',
-      autoApproveTitle: 'デフォルトの自動承認',
-      autoApproveDesc: 'ツール呼び出し（ファイル編集やコマンド）を確認なしで自動的に実行します（フルアクセスモードと同等。計画モードは引き続き確認します）。新しいセッションのデフォルトとして保存されます。',
-      bleTitle: 'Bluetooth ステータス通知',
-      bleDesc: 'エージェントのステータス（作業中、承認待ち、完了）をペアリングした JCODE Bluetooth デバイスに送信します。アプリの再起動後に有効になります。',
-      languageTitle: '言語',
-      languageDesc: 'アプリのインターフェース言語。',
-    },
-    appearance: {
-      theme: 'テーマ',
-      system: 'システム',
-      systemDesc: 'OS のライト / ダーク設定に従う',
-      dark: 'ダーク',
-      light: 'ライト',
-      active: '適用中',
-      terminalHint: 'ターミナル UI には独自のテーマがあります — そちらで {cmd} コマンドで切り替えてください。',
-    },
-    providers: {
-      title: 'プロバイダー',
-      add: '+ プロバイダーを追加',
-      selectProvider: 'プロバイダーを選択',
-      selectModel: 'モデルを選択',
-      enterApiKey: 'API Key を入力',
-      apiKey: 'API Key',
-      baseUrl: 'Base URL（任意）',
-      saving: '保存中…',
-      addBtn: '追加',
-      noneConfigured: 'プロバイダーが設定されていません',
-      noneHint: '上の {btn} ボタンで追加して開始してください。',
-      allConfigured: 'すべてのプロバイダーが設定済みです',
-      remove: 'プロバイダーを削除',
-      confirmRemove: 'このプロバイダーを削除しますか？',
-      testConnection: '接続テスト',
-      testing: '確認中…',
-      connected: '接続済み',
-      connectFailed: '接続に失敗しました',
-      loadingHint: '読み込み中…',
-      edit: 'プロバイダーを編集',
-      editProvider: 'プロバイダーを編集',
-      apiKeyUnchanged: 'APIキー（変更しない場合は空欄）',
-      advanced: '詳細設定',
-      endpoint: 'カスタムエンドポイント',
-      endpointPlaceholder: 'https://api.example.com/v1',
-      headers: 'カスタムヘッダー',
-      addHeader: 'ヘッダーを追加',
-      headerKey: 'ヘッダー名',
-      headerValue: '値',
-      headersHint: '値を空欄にすると保存済みの内容を保持します。',
-      // カスタム（非レジストリ・OpenAI 互換）プロバイダー。
-      custom: 'カスタム',
-      customProvider: 'カスタムプロバイダー',
-      customProviderDesc: '任意の OpenAI 互換エンドポイント',
-      customId: 'プロバイダー ID',
-      customIdPlaceholder: 'my-provider',
-      customIdRequired: 'プロバイダー ID は必須です',
-      customName: '表示名',
-      customNamePlaceholder: 'マイプロバイダー',
-      customModelId: 'モデル ID',
-      customModelPlaceholder: 'gpt-4o',
-      customModelRequired: 'カスタムプロバイダーにはモデル ID が必要です',
-      customUrlRequired: 'カスタムプロバイダーには Base URL が必要です',
-      customReasoning: '推論モデル',
-      customReasoningDesc: 'このモデルに推論強度コントロールを表示',
-      customModels: 'カスタムモデル',
-      customModelsHint: 'このプロバイダーでルーティングできるモデル。',
-      addModel: 'モデルを追加',
-      customModelNamePlaceholder: '表示名（任意）',
-    },
-    mcp: {
-      title: 'MCP サーバー',
-      add: '+ サーバーを追加',
-      addServer: 'サーバーを追加',
-      editServer: 'サーバーを編集',
-      name: '名前',
-      serverName: 'サーバー名',
-      command: 'コマンド',
-      args: '引数',
-      arguments: '引数',
-      env: '環境変数（1 行に 1 つ key=value）',
-      transport: 'トランスポート',
-      transportLocal: 'ローカル',
-      url: 'URL',
-      headers: 'ヘッダー',
-      addHeader: '+ ヘッダーを追加',
-      headerKey: 'キー',
-      headerValue: '値',
-      useOauth: 'OAuth を使用（保存後にログイン）',
-      oauthClientId: 'OAuth Client ID',
-      oauthClientSecret: 'OAuth Client Secret',
-      oauthScopes: 'スコープ',
-      timeout: 'タイムアウト（秒）',
-      status: {
-        disabled: '無効',
-        connected: '接続済み',
-        loginRequired: 'ログインが必要',
-        error: 'エラー',
-        configured: '設定済み',
-      },
-      login: 'ログイン',
-      reauth: '再認証',
-      waitingBrowser: 'ブラウザーを待っています…',
-      authenticated: '認証済み',
-      none: 'MCP サーバーが設定されていません。',
-      noneConfigured: 'MCP サーバーが設定されていません',
-      noneHint: '上の {btn} ボタンで追加してください。',
-      save: '保存',
-    },
-    skills: {
-      title: 'スキル',
-      add: 'スキルを追加',
-      none: 'スキルが見つかりません',
-      noneHint: '別のフィルターや検索語をお試しください。',
-      search: 'スキルを検索…',
-      filterAll: 'すべて',
-      filterLocal: 'このデバイス',
-      filterBuiltin: '組み込み',
-      builtin: '組み込み',
-      loadingHint: '読み込み中…',
-    },
-    ssh: {
-      title: 'SSH 環境',
-      connect: 'リモートホストに接続',
-      currentEnv: '現在の環境',
-      noneConfigured: '保存済みのホストがありません',
-      noneHint: '{btn} で追加するか、{config} でホストを事前設定してください。',
-      connectTo: '{name} に接続',
-      host: 'ホスト',
-      port: 'ポート',
-      user: 'ユーザー',
-      password: 'パスワード',
-      key: 'キー',
-      privateKeyPath: '秘密鍵のパス',
-      passphrase: 'パスフレーズ（任意）',
-      savedAlias: 'エイリアスを保存（任意）',
-      noAlias: 'エイリアスを使わない',
-      saveAlias: 'エイリアスを保存',
-      remove: '削除',
-    },
-    channels: {
-      title: '通知チャネル',
-      scanQr: 'WeChat でスキャンして接続',
-      activate: 'メッセージを送信して有効化',
-      activateBody: '今すぐ WeChat ボットにメッセージを送信して通知を有効化してください。有効化すると、24 時間通知を受け取れます。',
-      wechat: 'WeChat',
-      integration: 'iLink Bot 連携',
-      connect: '接続',
-      disconnect: '切断',
-      loadingHint: '読み込み中…',
-      noneConfigured: 'チャネルが設定されていません',
-      noneHint: '{config} で {flag} を設定してください。',
-      whenConnected: '接続すると、jcode は承認リクエストとタスク完了通知を WeChat に送信します。',
-      enable: 'WeChat 通知を有効化',
-      permission: '通知権限',
-      grant: '権限を付与',
-      test: 'テスト通知を送信',
-      loginRequired: 'ログインが必要',
-      login: 'ログイン',
-    },
-    shortcuts: {
-      title: 'キーボードショートカット',
-      items: {
-        sendMessage: 'メッセージを送信',
-        newLine: '改行',
-        stopAgent: 'エージェントを停止',
-        slashCommands: 'スラッシュコマンド',
-        focusInput: '入力にフォーカス',
-        newConversation: '新しい会話',
-        openSettings: '設定を開く',
-        toggleTerminal: 'ターミナルを切り替え',
-      },
-    },
-    usageStats: {
-      title: '使用状況',
-      subtitle: 'すべてのプロジェクトのトークン使用量・セッション・キャッシュ効率。',
-      lastNDays: '過去 {n} 日',
-      totalTokens: 'トークン使用量',
-      cacheHitRate: 'キャッシュ率',
-      mostUsedModel: '最多モデル',
-      share: '割合 {pct}',
-      sessions: 'セッション',
-      turns: 'ターン',
-      activeDays: 'アクティブ日数',
-      streak: '連続 {n} 日',
-      tokenBreakdown: 'トークン内訳',
-      tokenBreakdownHint: 'キャッシュは入力の一部、推論は出力の一部です。単純に合計はできません。',
-      promptTokens: '入力',
-      cachedTokens: 'キャッシュ',
-      completionTokens: '出力',
-      reasoningTokens: '推論',
-      heatmap: 'アクティビティ',
-      less: '少',
-      more: '多',
-      dailyTrend: '日別トークン',
-      byModel: 'モデル別',
-      byProject: 'プロジェクト別',
-      noData: 'データなし',
-      noActivity: 'アクティビティなし',
-      turnsUnit: 'ターン',
-    },
-  },
-
-  contextCapacity: {
-    title: 'コンテキスト容量',
-    messages: 'メッセージ',
-    systemTools: 'システムツール',
-    mcpTools: 'MCP ツール',
-    skills: 'スキル',
-    systemPrompt: 'システムプロンプト',
-    cacheHitRate: 'キャッシュ率',
-    freeSpace: '空き容量',
-    sessionTotal: '会話の累計',
-    estimated: '内訳は概算です(約 4 バイト/トークン)。',
-  },
-
-  setup: {
-    step: 'ステップ {n}：{label}',
-    chooseProvider: 'プロバイダーを選択',
-    enterApiKey: 'API Key を入力',
-    allSet: '準備が完了しました！',
-    startCoding: 'コーディングを開始',
-    searchProviders: 'プロバイダーを検索…',
-    noProviders: 'プロバイダーが見つかりません',
-    selectProviderDesc: '使用する AI プロバイダーを選択してください。',
-    loadingProviders: 'プロバイダーを読み込み中…',
-    for: '対象：',
-    envVar: '環境変数',
-    apiKey: 'API Key',
-    apiKeyPlaceholder: 'sk-…',
-    apiKeyRequired: 'API Key は必須です',
-    baseUrl: 'Base URL（任意）',
-    testConnection: '接続テスト',
-    checking: '確認中…',
-    connected: '接続済み',
-    settingUp: '設定中…',
-    retry: '再試行',
-    savedTo: '設定は ~/.jcode/config.json に保存されました',
-    completeSetup: 'セットアップを完了',
-    usingModel: '{provider} の {model} を使用',
-    // セットアップウィザードのカスタム（OpenAI 互換）プロバイダー入口。
-    customProvider: 'カスタムプロバイダー',
-    customProviderDesc: '任意の OpenAI 互換エンドポイント',
-    customId: 'プロバイダー ID',
-    customIdPlaceholder: 'my-provider',
-    customIdRequired: 'プロバイダー ID は必須です',
-    customName: '表示名',
-    customNamePlaceholder: 'マイプロバイダー',
-    customModelId: 'モデル ID',
-    customModelPlaceholder: 'gpt-4o',
-    customModelRequired: 'カスタムプロバイダーにはモデル ID が必要です',
-    customUrlRequired: 'カスタムプロバイダーには Base URL が必要です',
-    customReasoning: '推論モデル',
-    // 詳細設定パネル。
-    advanced: '詳細',
-    headers: 'カスタムヘッダー',
-    addHeader: 'ヘッダーを追加',
-    headerKey: 'ヘッダー名',
-    headerValue: '値',
-  },
-
-  wizard: {
-    title: 'リモート接続',
-    chooseMethod: '接続方法を選択',
-    ssh: 'SSH',
-    docker: 'Docker',
-    container: 'コンテナ',
-    dockerConnection: 'Docker コンテナ',
-    dockerDesc: 'ワークスペースとして使用するコンテナを選択してください。停止中のコンテナは自動的に起動され、どのタスクも使用していないときに再び停止されます。',
-    selectContainer: 'コンテナを選択',
-    noContainers: 'この Docker ホストにコンテナが見つかりません。',
-    refresh: '更新',
-    running: '実行中',
-    stopped: '停止中',
-    remoteHost: 'リモートホスト',
-    comingSoon: '近日対応',
-    sshConnection: 'SSH 接続',
-    pickMethodDesc: 'リモートワークスペースへの接続方法を選択し、詳細を入力してください。',
-    next: '次へ',
-    sshDesc: 'キー/エージェント認証はローカルの SSH 鍵を使用します。パスワードとパスフレーズもサポートしています。',
-    auth: '認証',
-    hostPlaceholder: '1.2.3.4 または example.com',
-    userPlaceholder: 'root',
-    dirDesc: 'このリモートワークスペースの作業ディレクトリを選択してください。',
-    backToConfig: '設定に戻る',
-    aliasNamePlaceholder: '名前',
-    steps: {
-      chooseMethod: '方法を選択',
-      configure: '設定',
-      connecting: '接続中',
-      selectDirectory: 'ディレクトリを選択',
-    },
-    connecting: '接続中…',
-    connect: '接続',
-    selectDirectory: 'ディレクトリを選択',
-    loading: '読み込み中…',
-    noSubDirs: 'サブディレクトリなし',
-    saveAlias: 'エイリアスとして保存',
-    useDirectory: 'このディレクトリを使用',
-  },
-
-  sidebar: {
-    hideArchived: 'アーカイブ済みタスクを非表示',
-    showArchived: 'アーカイブ済みタスクを表示',
-    noProjects: 'プロジェクトがまだありません',
-    noTasks: 'タスクなし',
-    running: '実行中',
-    newTaskHere: 'ここで新規タスク',
-    filter: {
-      title: 'フィルターと並べ替え',
-      status: 'ステータス',
-      statusActive: 'アクティブ',
-      statusArchived: 'アーカイブ済み',
-      statusAll: 'すべて',
-      project: 'プロジェクト',
-      projectAll: 'すべて',
-      lastActivity: '最終アクティビティ',
-      activityAll: 'すべて',
-      activityToday: '今日',
-      activityWeek: '過去7日間',
-      activityMonth: '過去30日間',
-      groupBy: 'グループ化',
-      groupProject: 'プロジェクト',
-      groupDate: '日付',
-      sortBy: '並べ替え',
-      sortRecency: '最近',
-      sortName: '名前',
-      sortCreated: '作成日',
-      reset: 'フィルターをリセット',
-    },
-    dateBucket: {
-      today: '今日',
-      yesterday: '昨日',
-      week: '過去7日間',
-      month: '過去30日間',
-      older: 'それ以前',
-    },
-    actions: {
-      pin: 'ピン留め',
-      unpin: 'ピン留めを解除',
-      rename: '名前変更',
-      archive: 'アーカイブ',
-      unarchive: 'アーカイブ解除',
-      markRead: '既読にする',
-      markUnread: '未読にする',
-      delete: '削除',
-      taskActions: 'タスク操作',
-    },
-    relativeTime: {
-      now: 'たった今',
-      minutes: '{n} 分前',
-      hours: '{n} 時間前',
-      days: '{n} 日前',
-    },
-  },
-
-  topbar: {
-    panels: 'パネル',
-    panelsMenu: 'パネルメニュー · {status}',
-    panelsHint: 'パネル · {status}  (⇧⌘P 計画 · ⇧⌘E ファイル · ⇧⌘G 変更 · ⌘` ターミナル)',
-    plan: '計画',
-    files: 'ファイル',
-    changes: '変更',
-    terminal: 'ターミナル',
-    status: {
-      running: '実行中',
-      connected: '接続済み',
-      disconnected: '未接続',
-    },
-  },
-
-  rightPanel: {
-    plan: '計画',
-    files: 'ファイル',
-    changes: '変更',
-    noTasks: 'タスクがまだありません',
-  },
-
-  diff: {
-    changes: '変更',
-    refresh: '↻ 更新',
-    noChanges: '変更なし',
-    selectFile: '変更を表示するファイルを選択',
-    modes: {
-      session: 'セッション',
-      working: 'ワーキング',
-      staged: 'ステージ済み',
-      branch: 'ブランチ',
-    },
-  },
-
-  branches: {
-    title: 'ブランチ',
-    none: 'ブランチなし',
-    create: '新しいブランチを作成してチェックアウト',
-    createBtn: '作成',
-    search: 'ブランチを検索',
-    newName: '新しいブランチ名',
-    current: 'ブランチ：{name}',
-    confirmTitle: '未コミットの作業があります',
-    confirmIntro: '「{branch}」に切り替えると、次のローカルファイルが上書きされます：',
-    confirmMore: '他 {count} 件',
-    confirmStash: 'スタッシュして切り替え',
-    confirmDiscard: '破棄して切り替え',
-    confirmCancel: 'キャンセル',
-    confirmHint: 'スタッシュは作業を保存します（git stash pop で復元可能）。破棄するとこれらのファイルは完全に削除されます（追跡対象外のファイルを含む）。',
-  },
-
-  projectSwitcher: {
-    title: 'プロジェクト',
-    openFolder: 'フォルダーを開く',
-    ok: 'OK',
-    loading: '読み込み中…',
-    noFolders: 'フォルダーが見つかりません',
-    switching: 'プロジェクトを切り替え中…',
-    noProjects: 'プロジェクトがまだありません',
-    removeProject: 'プロジェクトを削除',
-    openFolderBtn: '+ フォルダーを開く',
-    pathPlaceholder: '/path/to/folder',
-  },
-
-  workspace: {
-    none: 'ワークスペースなし',
-    loading: '読み込み中…',
-    noFolders: 'フォルダーなし',
-    open: '開く',
-    nonePlural: 'ワークスペースなし',
-    search: 'ワークスペースを検索',
-    openFolder: 'フォルダーを開く',
-    openError: 'ワークスペースを開けませんでした',
-  },
-
-  askUser: {
-    asking: '質問中',
-    collapse: '折りたたむ',
-    skip: 'スキップ',
-    other: 'その他',
-    submit: '送信',
-    noAnswer: '回答の記録なし',
-    customPlaceholder: 'ここに独自の回答を入力',
-  },
-
-  goal: {
-    clearGoal: '目標をクリア',
-    clear: 'クリア',
-    tokens: '{used} トークン',
-    tokensK: '{k}k トークン',
-    status: {
-      active: 'アクティブ',
-      inProgress: '進行中',
-      completed: '完了',
-      blocked: 'ブロック中',
-    },
-    statusReport: '🎯 {status} — {objective}',
-    noGoal: '🎯 目標が未設定です。/goal <目標> で設定してください。',
-    cleared: '🎯 目標をクリアしました。',
-  },
-
-  commandPalette: {
-    placeholder: 'タスクを検索またはコマンドを実行…',
-    noResults: '結果なし',
-    groups: {
-      actions: 'アクション',
-      tasks: 'タスク',
-    },
-    newTask: '新しいタスク',
-  },
-
-  notifications: {
-    taskFinished: 'jcode — タスク完了',
-    taskFailed: 'jcode — タスク失敗',
-    approvalNeeded: 'jcode — 承認待ち',
-    finishedBody: 'エージェントの実行が完了しました。',
-    approvalBody: 'エージェントが承認を待っています。',
-  },
-
-  terminal: {
-    newTerminal: '新しいターミナル',
-    closePanel: 'パネルを閉じる',
-    closeTab: '{label} を閉じる',
-    shell: 'シェル {n}',
-    failedCreate: 'ターミナルの作成に失敗しました：{msg}',
-    sessionEnded: '[セッションが終了しました]',
-  },
-
-  fileTree: {
-    root: 'ルート',
-    loading: '読み込み中…',
-    empty: '空のディレクトリ',
-    dirError: 'このディレクトリを読み込めませんでした。',
-    fileError: '{name} を開けませんでした（バイナリファイル、サイズ超過、または権限不足の可能性があります）。',
-  },
-
-  fileViewer: {
-    close: '閉じる',
-  },
-
-  errors: {
-    timeout: 'リクエストがタイムアウトしました。再試行してください。',
-    network: 'ネットワークエラーです。接続を確認して再試行してください。',
-    auth: '認証に失敗しました。設定で API Key を確認してください。',
-    rateLimit: 'プロバイダーによってレート制限されています。しばらく待ってから再試行してください。',
-    provider: 'モデルプロバイダーで一時的なエラーが発生しました。再試行してください。',
-    switchFailed: 'プロジェクトの切り替えに失敗しました',
-    remoteReconnect: 'リモートワークスペース — SSH ウィザードで再接続してください',
-    branchSwitch: 'ブランチの切り替えに失敗しました',
-    generic: '問題が発生しました。',
-    submitAnswer: '回答の送信に失敗しました：{detail}',
-    approval: '承認に失敗しました：{detail}',
-    switchModel: 'モデルの切り替えに失敗しました：{detail}',
-    loadSession: 'セッションの読み込みに失敗しました：{detail}',
-  },
-}
diff --git a/web-react/src/i18n/locales/ko.ts b/web-react/src/i18n/locales/ko.ts
deleted file mode 100644
index 0029fbf9..00000000
--- a/web-react/src/i18n/locales/ko.ts
+++ /dev/null
@@ -1,765 +0,0 @@
-/**
- * 한국어 (ko). 키 구조는 en.ts와 완전히 동일합니다.
- */
-export default {
-  common: {
-    ok: '확인',
-    add: '추가',
-    cancel: '취소',
-    close: '닫기',
-    back: '뒤로',
-    delete: '삭제',
-    save: '저장',
-    saved: '저장됨',
-    edit: '편집',
-    retry: '재시도',
-    loading: '불러오는 중…',
-    remove: '제거',
-    rename: '이름 변경',
-    enable: '활성화',
-    disable: '비활성화',
-    active: '사용 중',
-    configured: '설정됨',
-    recommended: '추천',
-    local: '로컬',
-    search: '검색',
-    other: '기타',
-    details: '상세',
-    connected: '연결됨',
-    disconnected: '연결 끊김',
-    scanning: '스캔 중…',
-    notConfigured: '미설정',
-    done: '완료',
-  },
-
-  nav: {
-    newTask: '새 작업',
-    automations: '자동화',
-    channels: '채널',
-    workspace: '워크스페이스',
-    projects: '프로젝트',
-    openFolder: '폴더 열기',
-    openProject: '프로젝트 열기…',
-    remoteConnect: '원격 연결',
-    settings: '설정',
-    settingsWithShortcut: '설정 (⌘,)',
-    switchToLight: '라이트 모드로 전환',
-    switchToDark: '다크 모드로 전환',
-    openSettings: '설정 열기',
-    toggleTheme: '테마 전환',
-  },
-
-  welcome: {
-    startIn: '{project}에서 새 작업 시작',
-    subtitle: '메시지를 보내 시작하세요. {kbd}로 명령어를 확인하세요.',
-  },
-
-  channels: {
-    connected: '연결됨',
-    promo: {
-      title: '<span class="accent">휴대폰에서</span> 승인하고 모니터링하세요',
-      lede: 'WeChat에 한 번만 연결하세요. jcode가 모든 승인 요청과 작업 완료 알림을 채팅으로 바로 전달합니다 — 오래 실행되는 에이전트를 책상에서 기다릴 필요가 없습니다.',
-    },
-    features: {
-      approvals: { title: '원탭 승인', desc: 'WeChat 메시지에서 바로 도구 호출을 승인하거나 거부하세요 — 앱을 열 필요가 없습니다.' },
-      notifications: { title: '완료 알림', desc: '예약된 자동화나 백그라운드 작업이 완료되는 즉시 알림을 받습니다.' },
-      scan: { title: '스캔하여 연결', desc: 'QR 코드로 몇 초 만에 페어링하세요. 설정 → 채널에서 언제든 연결을 끊을 수 있습니다.' },
-    },
-    mock: {
-      now: '방금',
-      approvalTitle: '승인이 필요합니다',
-      run: '실행',
-      approve: '승인',
-      deny: '거부',
-      done: '야간 자동화가 완료되었습니다',
-      summary: '3 작업 · 0 실패',
-    },
-  },
-
-  auth: {
-    title: '액세스 토큰이 필요합니다',
-    body: '이 서버는 네트워크로 접근할 수 있어 토큰이 필요합니다. 서버 시작 시 표시된 토큰을 붙여넣으세요.',
-    placeholder: '액세스 토큰 붙여넣기',
-    show: '표시',
-    hide: '숨기기',
-    submit: '계속',
-    verifying: '확인 중…',
-    required: '토큰을 입력하세요',
-    invalid: '유효하지 않은 토큰',
-    serverError: '토큰을 확인할 수 없습니다. 연결을 확인한 후 다시 시도하세요.',
-  },
-
-  connection: {
-    errorTitle: 'jcode 서비스에 연결할 수 없습니다',
-    errorBody: '로컬 서비스가 아직 준비되지 않았거나 중지되었을 수 있습니다. 잠시 후 다시 시도하거나, 앱을 종료하고 다시 시작하세요.',
-    retrying: '재시도 중…',
-    retry: '다시 연결',
-  },
-
-  chat: {
-    placeholder: 'JCODE에게 질문하거나 /를 입력해 명령어 확인',
-    goalPlaceholder: '목표를 설명하세요 — 에이전트가 검증 가능하게 완료될 때까지 추구합니다',
-    workingPlaceholder: '에이전트가 작업 중…',
-    queuePlaceholder: '에이전트가 작업 중 — 입력하면 대기열에 추가됩니다…',
-    queue: '대기열',
-    removeQueued: '대기열에서 제거',
-    stopAndNext: '현재 턴을 중지하고 다음 대기열 메시지 전송',
-    send: '전송',
-    stop: '중지',
-    stopAgent: '에이전트 중지 (Esc)',
-    thinking: '생각 중…',
-    attachFiles: '파일 첨부',
-    goal: '목표',
-    add: '추가',
-    copilotHint: 'Enter로 전송 · Shift+Enter로 줄바꿈 · Esc로 취소',
-    turnDuration: '이번 턴 소요 시간',
-    wechatOn: 'WeChat 알림 켜짐',
-    wechatOff: 'WeChat 알림 꺼짐',
-    modes: {
-      approval: '승인 요청',
-      approvalSub: '쓰기나 명령 실행 전에 매번 확인합니다.',
-      plan: '계획',
-      planSub: '먼저 계획을 제안하며, 승인하기 전까지는 실행하지 않습니다.',
-      fullAccess: '전체 액세스',
-      fullAccessSub: '자유롭게 실행—승인 프롬프트가 없습니다.',
-    },
-    roles: {
-      you: '나',
-      assistant: 'JCODE',
-      wechat: 'WeChat',
-      system: '시스템',
-      error: '오류',
-    },
-    actions: {
-      copy: '복사',
-      copied: '복사했습니다!',
-    },
-    model: {
-      current: '현재',
-      favorites: '★ 즐겨찾기',
-      manage: '모델 관리…',
-      manageTitle: '모델 관리',
-      none: '사용 가능한 모델이 없습니다',
-      noMatch: '조건에 맞는 모델이 없습니다.',
-      filter: '모델 필터…',
-      toggleVisibility: '모델 선택기에 표시할 모델 선택',
-      noImages: '현재 모델은 이미지를 지원하지 않습니다',
-      reasoning: '추론',
-      tools: '도구 사용',
-      images: '이미지 입력',
-      effort: '강도',
-      effortTitle: '이 모델의 추론 강도',
-      effortDefault: '기본값',
-      visibleCount: '선택기에 {visible} / {total}개 모델 표시',
-    },
-    goalHint: {
-      replace: '새 목표를 설정하면 현재 목표가 대체됩니다',
-      next: '다음 메시지가 세션의 목표가 됩니다',
-      nextReplaces: '다음 메시지가 현재 목표를 대체합니다',
-      remove: '목표 제거',
-    },
-    command: '명령어',
-    stopped: '중지됨',
-    nextMessageGoal: '다음 메시지가 세션의 목표가 됩니다',
-    durationSeconds: '{n}초',
-    durationMinutes: '{m}분 {s}초',
-    durationMinutesOnly: '{m}분',
-  },
-
-  approval: {
-    needed: '승인이 필요합니다',
-    asking: '질문 중',
-    allowed: '허용됨',
-    denied: '거부됨',
-    external: '· 외부',
-    externalPath: '외부 경로',
-    allowOnce: '한 번 허용',
-    allowAll: '모두 허용',
-    confirm: '확인?',
-    confirmHint: '다시 클릭하면 이 세션의 나머지 작업을 자동 승인합니다',
-    allowAllTitle: '이 작업을 승인하고 세션의 나머지 작업을 자동 승인합니다',
-    deny: '거부',
-    toggleArgs: '인수 표시 전환',
-    runCommand: '명령 실행',
-    createFile: '파일 생성',
-    editFile: '파일 편집',
-    toolAction: '{name}',
-    showArgs: '인수 표시',
-    hideArgs: '인수 숨기기',
-  },
-
-  tool: {
-    read: '읽기',
-    write: '쓰기',
-    edit: '편집',
-    multiEdit: '다중 편집',
-    glob: '파일 검색',
-    search: '검색',
-    shell: '셸',
-    background: '백그라운드',
-    updateTodos: 'Todo 업데이트',
-    readTodos: 'Todo 읽기',
-    subagent: '서브에이전트',
-    askUser: '사용자에게 질문',
-    subagentLabel: '서브에이전트',
-    teamLabel: '팀',
-    working: '작업 중…',
-    starting: '서브에이전트 시작 중…',
-    running: '실행 중…',
-    loading: '불러오는 중…',
-    noContent: '내용 없음',
-    noChanges: '변경 없음',
-    applying: '적용 중…',
-    searching: '검색 중…',
-    noResults: '결과 없음',
-    noTodos: 'Todo 없음',
-    loadingLower: '불러오는 중…',
-    noTeammates: '팀원 없음',
-    created: '✓ 생성됨',
-    creating: '생성 중…',
-    lead: '리드:',
-    runningMark: '✓ 실행 중',
-    spawning: '시작 중…',
-    id: 'ID:',
-    all: '전체',
-    sent: '✓ 전송됨',
-    sending: '전송 중…',
-    args: '인수',
-    output: '출력',
-    error: '오류',
-    calls: '{n}회 호출',
-    matchesFound: '({n}개 일치)',
-    members: '{n}명의 멤버',
-  },
-
-  settings: {
-    backToWorkspace: '워크스페이스로 돌아가기',
-    title: '설정',
-    tabs: {
-      general: '일반',
-      appearance: '모양',
-      providers: '프로바이더',
-      mcp: 'MCP 서버',
-      skills: '스킬',
-      browser: '브라우저',
-      ssh: 'SSH',
-      channels: '채널',
-      shortcuts: '단축키',
-      usage: '사용 통계',
-    },
-    general: {
-      serverOnline: '온라인',
-      serverOffline: '오프라인',
-      serverState: '서버',
-      tokenUsage: '토큰 사용량',
-      preferences: '환경설정',
-      autoApproveTitle: '기본 자동 승인',
-      autoApproveDesc: '도구 호출(파일 편집 및 명령)을 확인 없이 자동으로 실행합니다(전체 액세스 모드와 동일. 계획 모드는 여전히 확인합니다). 새 세션의 기본값으로 저장됩니다.',
-      bleTitle: '블루투스 상태 알림',
-      bleDesc: '에이전트 상태 — 작업 중, 승인 대기, 완료 — 를 페어링된 JCODE 블루투스 장치로 전송합니다. 앱 재시작 후 적용됩니다.',
-      languageTitle: '언어',
-      languageDesc: '앱의 인터페이스 언어.',
-    },
-    appearance: {
-      theme: '테마',
-      system: '시스템',
-      systemDesc: '운영체제의 라이트 / 다크 설정 따르기',
-      dark: '다크',
-      light: '라이트',
-      active: '사용 중',
-      terminalHint: '터미널 UI에는 자체 테마가 있습니다 — 터미널에서 {cmd} 명령으로 전환하세요.',
-    },
-    providers: {
-      title: '프로바이더',
-      add: '+ 프로바이더 추가',
-      selectProvider: '프로바이더 선택',
-      selectModel: '모델 선택',
-      enterApiKey: 'API Key 입력',
-      apiKey: 'API Key',
-      baseUrl: 'Base URL (선택)',
-      saving: '저장 중…',
-      addBtn: '추가',
-      noneConfigured: '설정된 프로바이더가 없습니다',
-      noneHint: '위의 {btn} 버튼으로 추가하여 시작하세요.',
-      allConfigured: '모든 프로바이더가 설정되었습니다',
-      remove: '프로바이더 제거',
-      confirmRemove: '이 프로바이더를 제거하시겠습니까?',
-      testConnection: '연결 테스트',
-      testing: '확인 중…',
-      connected: '연결됨',
-      connectFailed: '연결 실패',
-      loadingHint: '불러오는 중…',
-      edit: '프로바이더 편집',
-      editProvider: '프로바이더 편집',
-      apiKeyUnchanged: 'API 키 (비워두면 유지)',
-      advanced: '고급',
-      endpoint: '사용자 지정 엔드포인트',
-      endpointPlaceholder: 'https://api.example.com/v1',
-      headers: '사용자 지정 헤더',
-      addHeader: '헤더 추가',
-      headerKey: '헤더 이름',
-      headerValue: '값',
-      headersHint: '값을 비워두면 저장된 내용을 유지합니다.',
-      // 커스텀(레지스트리 외, OpenAI 호환) 프로바이더.
-      custom: '커스텀',
-      customProvider: '커스텀 프로바이더',
-      customProviderDesc: 'OpenAI 호환 엔드포인트',
-      customId: '프로바이더 ID',
-      customIdPlaceholder: 'my-provider',
-      customIdRequired: '프로바이더 ID는 필수입니다',
-      customName: '표시 이름',
-      customNamePlaceholder: '내 프로바이더',
-      customModelId: '모델 ID',
-      customModelPlaceholder: 'gpt-4o',
-      customModelRequired: '커스텀 프로바이더에는 모델 ID가 필요합니다',
-      customUrlRequired: '커스텀 프로바이더에는 Base URL이 필요합니다',
-      customReasoning: '추론 모델',
-      customReasoningDesc: '이 모델에 추론 강도 컨트롤 표시',
-      customModels: '커스텀 모델',
-      customModelsHint: '이 프로바이더에서 사용할 수 있는 모델입니다.',
-      addModel: '모델 추가',
-      customModelNamePlaceholder: '표시 이름 (선택)',
-    },
-    mcp: {
-      title: 'MCP 서버',
-      add: '+ 서버 추가',
-      addServer: '서버 추가',
-      editServer: '서버 편집',
-      name: '이름',
-      serverName: '서버 이름',
-      command: '명령',
-      args: '인수',
-      arguments: '인수',
-      env: '환경 변수 (한 줄에 key=value)',
-      transport: '전송 방식',
-      transportLocal: '로컬',
-      url: 'URL',
-      headers: '헤더',
-      addHeader: '+ 헤더 추가',
-      headerKey: '키',
-      headerValue: '값',
-      useOauth: 'OAuth 사용 (저장 후 로그인)',
-      oauthClientId: 'OAuth Client ID',
-      oauthClientSecret: 'OAuth Client Secret',
-      oauthScopes: '스코프',
-      timeout: '시간 초과 (초)',
-      status: {
-        disabled: '비활성화',
-        connected: '연결됨',
-        loginRequired: '로그인 필요',
-        error: '오류',
-        configured: '설정됨',
-      },
-      login: '로그인',
-      reauth: '재인증',
-      waitingBrowser: '브라우저를 기다리는 중…',
-      authenticated: '인증됨',
-      none: '설정된 MCP 서버가 없습니다.',
-      noneConfigured: '설정된 MCP 서버가 없습니다',
-      noneHint: '위의 {btn} 버튼으로 추가하세요.',
-      save: '저장',
-    },
-    skills: {
-      title: '스킬',
-      add: '스킬 추가',
-      none: '스킬을 찾을 수 없습니다',
-      noneHint: '다른 필터나 검색어로 시도해 보세요.',
-      search: '스킬 검색…',
-      filterAll: '전체',
-      filterLocal: '이 기기',
-      filterBuiltin: '내장',
-      builtin: '내장',
-      loadingHint: '불러오는 중…',
-    },
-    ssh: {
-      title: 'SSH 환경',
-      connect: '원격 호스트에 연결',
-      currentEnv: '현재 환경',
-      noneConfigured: '저장된 호스트가 없습니다',
-      noneHint: '{btn} 으로 추가하거나 {config} 에서 호스트를 미리 설정하세요.',
-      connectTo: '{name} 에 연결',
-      host: '호스트',
-      port: '포트',
-      user: '사용자',
-      password: '비밀번호',
-      key: '키',
-      privateKeyPath: '개인 키 경로',
-      passphrase: '패스프레이즈 (선택)',
-      savedAlias: '별명 저장 (선택)',
-      noAlias: '별명 사용 안 함',
-      saveAlias: '별명 저장',
-      remove: '제거',
-    },
-    channels: {
-      title: '알림 채널',
-      scanQr: 'WeChat으로 스캔하여 연결',
-      activate: '메시지를 보내 활성화',
-      activateBody: '지금 WeChat 봇에게 메시지를 보내 알림을 활성화하세요. 활성화되면 24시간 동안 알림을 받을 수 있습니다.',
-      wechat: 'WeChat',
-      integration: 'iLink Bot 연동',
-      connect: '연결',
-      disconnect: '연결 해제',
-      loadingHint: '불러오는 중…',
-      noneConfigured: '설정된 채널이 없습니다',
-      noneHint: '{config} 에서 {flag} 을(를) 설정하세요.',
-      whenConnected: '연결되면 jcode가 승인 요청과 작업 완료 알림을 WeChat으로 보냅니다.',
-      enable: 'WeChat 알림 활성화',
-      permission: '알림 권한',
-      grant: '권한 부여',
-      test: '테스트 알림 보내기',
-      loginRequired: '로그인 필요',
-      login: '로그인',
-    },
-    shortcuts: {
-      title: '키보드 단축키',
-      items: {
-        sendMessage: '메시지 전송',
-        newLine: '줄바꿈',
-        stopAgent: '에이전트 중지',
-        slashCommands: '슬래시 명령어',
-        focusInput: '입력란 포커스',
-        newConversation: '새 대화',
-        openSettings: '설정 열기',
-        toggleTerminal: '터미널 전환',
-      },
-    },
-    usageStats: {
-      title: '사용 통계',
-      subtitle: '모든 프로젝트의 토큰 사용량, 세션, 캐시 효율.',
-      lastNDays: '최근 {n}일',
-      totalTokens: '토큰 사용량',
-      cacheHitRate: '캐시 적중률',
-      mostUsedModel: '최다 모델',
-      share: '비중 {pct}',
-      sessions: '세션',
-      turns: '턴',
-      activeDays: '활동 일수',
-      streak: '{n}일 연속',
-      tokenBreakdown: '토큰 구성',
-      tokenBreakdownHint: '캐시는 입력의 일부이고 추론은 출력의 일부이므로 단순히 합산할 수 없습니다.',
-      promptTokens: '입력',
-      cachedTokens: '캐시',
-      completionTokens: '출력',
-      reasoningTokens: '추론',
-      heatmap: '활동 히트맵',
-      less: '적음',
-      more: '많음',
-      dailyTrend: '일별 토큰',
-      byModel: '모델별',
-      byProject: '프로젝트별',
-      noData: '데이터 없음',
-      noActivity: '활동 없음',
-      turnsUnit: '턴',
-    },
-  },
-
-  contextCapacity: {
-    title: '컨텍스트 용량',
-    messages: '메시지',
-    systemTools: '시스템 도구',
-    mcpTools: 'MCP 도구',
-    skills: '스킬',
-    systemPrompt: '시스템 프롬프트',
-    cacheHitRate: '캐시 적중률',
-    freeSpace: '여유 공간',
-    sessionTotal: '대화 누적',
-    estimated: '구성은 추정치입니다(약 4바이트/토큰).',
-  },
-
-  setup: {
-    step: '{n}단계: {label}',
-    chooseProvider: '프로바이더 선택',
-    enterApiKey: 'API Key 입력',
-    allSet: '모든 준비가 완료되었습니다!',
-    startCoding: '코딩 시작',
-    searchProviders: '프로바이더 검색…',
-    noProviders: '프로바이더를 찾을 수 없습니다',
-    selectProviderDesc: '사용할 AI 프로바이더를 선택하세요.',
-    loadingProviders: '프로바이더 불러오는 중…',
-    for: '대상:',
-    envVar: '환경 변수',
-    apiKey: 'API Key',
-    apiKeyPlaceholder: 'sk-…',
-    apiKeyRequired: 'API Key는 필수입니다',
-    baseUrl: 'Base URL (선택)',
-    testConnection: '연결 테스트',
-    checking: '확인 중…',
-    connected: '연결됨',
-    settingUp: '설정 중…',
-    retry: '재시도',
-    savedTo: '설정이 ~/.jcode/config.json에 저장되었습니다',
-    completeSetup: '설정 완료',
-    usingModel: '{provider}의 {model} 사용',
-    // 설정 마법사의 커스텀(OpenAI 호환) 프로바이더 진입점.
-    customProvider: '커스텀 프로바이더',
-    customProviderDesc: 'OpenAI 호환 엔드포인트',
-    customId: '프로바이더 ID',
-    customIdPlaceholder: 'my-provider',
-    customIdRequired: '프로바이더 ID는 필수입니다',
-    customName: '표시 이름',
-    customNamePlaceholder: '내 프로바이더',
-    customModelId: '모델 ID',
-    customModelPlaceholder: 'gpt-4o',
-    customModelRequired: '커스텀 프로바이더에는 모델 ID가 필요합니다',
-    customUrlRequired: '커스텀 프로바이더에는 Base URL이 필요합니다',
-    customReasoning: '추론 모델',
-    // 고급 설정 패널.
-    advanced: '고급',
-    headers: '커스텀 헤더',
-    addHeader: '헤더 추가',
-    headerKey: '헤더 이름',
-    headerValue: '값',
-  },
-
-  wizard: {
-    title: '원격 연결',
-    chooseMethod: '연결 방법 선택',
-    ssh: 'SSH',
-    docker: 'Docker',
-    container: '컨테이너',
-    dockerConnection: 'Docker 컨테이너',
-    dockerDesc: '워크스페이스로 사용할 컨테이너를 선택하세요. 중지된 컨테이너는 자동으로 시작되며, 사용 중인 작업이 없으면 다시 중지됩니다.',
-    selectContainer: '컨테이너 선택',
-    noContainers: '이 Docker 호스트에서 컨테이너를 찾을 수 없습니다.',
-    refresh: '새로 고침',
-    running: '실행 중',
-    stopped: '중지됨',
-    remoteHost: '원격 호스트',
-    comingSoon: '준비 중',
-    sshConnection: 'SSH 연결',
-    pickMethodDesc: '원격 워크스페이스에 접속할 방법을 선택한 후 세부 정보를 입력하세요.',
-    next: '다음',
-    sshDesc: '키/에이전트 인증은 로컬 SSH 키를 사용합니다. 비밀번호와 패스프레이즈도 지원됩니다.',
-    auth: '인증',
-    hostPlaceholder: '1.2.3.4 또는 example.com',
-    userPlaceholder: 'root',
-    dirDesc: '이 원격 워크스페이스의 작업 디렉터리를 선택하세요.',
-    backToConfig: '설정으로 돌아가기',
-    aliasNamePlaceholder: '이름',
-    steps: {
-      chooseMethod: '방법 선택',
-      configure: '설정',
-      connecting: '연결 중',
-      selectDirectory: '디렉터리 선택',
-    },
-    connecting: '연결 중…',
-    connect: '연결',
-    selectDirectory: '디렉터리 선택',
-    loading: '불러오는 중…',
-    noSubDirs: '하위 디렉터리 없음',
-    saveAlias: '별명으로 저장',
-    useDirectory: '이 디렉터리 사용',
-  },
-
-  sidebar: {
-    hideArchived: '보관된 작업 숨기기',
-    showArchived: '보관된 작업 표시',
-    noProjects: '프로젝트가 아직 없습니다',
-    noTasks: '작업 없음',
-    running: '실행 중',
-    newTaskHere: '여기에 새 작업',
-    filter: {
-      title: '필터 및 정렬',
-      status: '상태',
-      statusActive: '활성',
-      statusArchived: '보관됨',
-      statusAll: '전체',
-      project: '프로젝트',
-      projectAll: '전체',
-      lastActivity: '최근 활동',
-      activityAll: '전체',
-      activityToday: '오늘',
-      activityWeek: '최근 7일',
-      activityMonth: '최근 30일',
-      groupBy: '그룹화',
-      groupProject: '프로젝트별',
-      groupDate: '날짜별',
-      sortBy: '정렬',
-      sortRecency: '최근',
-      sortName: '이름',
-      sortCreated: '생성일',
-      reset: '필터 초기화',
-    },
-    dateBucket: {
-      today: '오늘',
-      yesterday: '어제',
-      week: '최근 7일',
-      month: '최근 30일',
-      older: '이전',
-    },
-    actions: {
-      pin: '고정',
-      unpin: '고정 해제',
-      rename: '이름 변경',
-      archive: '보관',
-      unarchive: '보관 해제',
-      markRead: '읽음으로 표시',
-      markUnread: '안 읽음으로 표시',
-      delete: '삭제',
-      taskActions: '작업 동작',
-    },
-    relativeTime: {
-      now: '방금',
-      minutes: '{n}분 전',
-      hours: '{n}시간 전',
-      days: '{n}일 전',
-    },
-  },
-
-  topbar: {
-    panels: '패널',
-    panelsMenu: '패널 메뉴 · {status}',
-    panelsHint: '패널 · {status}  (⇧⌘P 계획 · ⇧⌘E 파일 · ⇧⌘G 변경 · ⌘` 터미널)',
-    plan: '계획',
-    files: '파일',
-    changes: '변경',
-    terminal: '터미널',
-    status: {
-      running: '실행 중',
-      connected: '연결됨',
-      disconnected: '연결 끊김',
-    },
-  },
-
-  rightPanel: {
-    plan: '계획',
-    files: '파일',
-    changes: '변경',
-    noTasks: '작업이 아직 없습니다',
-  },
-
-  diff: {
-    changes: '변경',
-    refresh: '↻ 새로 고침',
-    noChanges: '변경 없음',
-    selectFile: '변경을 표시할 파일 선택',
-    modes: {
-      session: '세션',
-      working: '워킹',
-      staged: '스테이지됨',
-      branch: '브랜치',
-    },
-  },
-
-  branches: {
-    title: '브랜치',
-    none: '브랜치 없음',
-    create: '새 브랜치 만들고 체크아웃',
-    createBtn: '만들기',
-    search: '브랜치 검색',
-    newName: '새-브랜치-이름',
-    current: '브랜치: {name}',
-    confirmTitle: '커밋되지 않은 작업',
-    confirmIntro: '"{branch}"(으)로 전환하면 다음 로컬 파일을 덮어씁니다:',
-    confirmMore: '외 {count}개',
-    confirmStash: '스태시하고 전환',
-    confirmDiscard: '버리고 전환',
-    confirmCancel: '취소',
-    confirmHint: '스태시는 작업을 저장합니다(git stash pop 으로 복구). 버리면 이 파일들이 영구 삭제됩니다(추적되지 않는 파일 포함).',
-  },
-
-  projectSwitcher: {
-    title: '프로젝트',
-    openFolder: '폴더 열기',
-    ok: '확인',
-    loading: '불러오는 중…',
-    noFolders: '폴더를 찾을 수 없습니다',
-    switching: '프로젝트 전환 중…',
-    noProjects: '프로젝트가 아직 없습니다',
-    removeProject: '프로젝트 제거',
-    openFolderBtn: '+ 폴더 열기',
-    pathPlaceholder: '/path/to/folder',
-  },
-
-  workspace: {
-    none: '워크스페이스 없음',
-    loading: '불러오는 중…',
-    noFolders: '폴더 없음',
-    open: '열기',
-    nonePlural: '워크스페이스 없음',
-    search: '워크스페이스 검색',
-    openFolder: '폴더 열기',
-    openError: '워크스페이스를 열 수 없습니다',
-  },
-
-  askUser: {
-    asking: '질문 중',
-    collapse: '접기',
-    skip: '건너뛰기',
-    other: '기타',
-    submit: '제출',
-    noAnswer: '기록된 답변 없음',
-    customPlaceholder: '여기에 직접 답변을 입력하세요',
-  },
-
-  goal: {
-    clearGoal: '목표 지우기',
-    clear: '지우기',
-    tokens: '{used} 토큰',
-    tokensK: '{k}k 토큰',
-    status: {
-      active: '활성',
-      inProgress: '진행 중',
-      completed: '완료',
-      blocked: '차단됨',
-    },
-    statusReport: '🎯 {status} — {objective}',
-    noGoal: '🎯 설정된 목표가 없습니다. /goal <목표>로 설정하세요.',
-    cleared: '🎯 목표를 지웠습니다.',
-  },
-
-  commandPalette: {
-    placeholder: '작업 검색 또는 명령 실행…',
-    noResults: '결과 없음',
-    groups: {
-      actions: '동작',
-      tasks: '작업',
-    },
-    newTask: '새 작업',
-  },
-
-  notifications: {
-    taskFinished: 'jcode — 작업 완료',
-    taskFailed: 'jcode — 작업 실패',
-    approvalNeeded: 'jcode — 승인 대기',
-    finishedBody: '에이전트의 실행이 완료되었습니다.',
-    approvalBody: '에이전트가 승인을 기다리고 있습니다.',
-  },
-
-  terminal: {
-    newTerminal: '새 터미널',
-    closePanel: '패널 닫기',
-    closeTab: '{label} 닫기',
-    shell: '셸 {n}',
-    failedCreate: '터미널 생성 실패: {msg}',
-    sessionEnded: '[세션이 종료되었습니다]',
-  },
-
-  fileTree: {
-    root: '루트',
-    loading: '불러오는 중…',
-    empty: '빈 디렉터리',
-    dirError: '이 디렉터리를 불러올 수 없습니다.',
-    fileError: '{name}을(를) 열 수 없습니다 (바이너리 파일이거나, 너무 크거나, 권한이 부족할 수 있습니다).',
-  },
-
-  fileViewer: {
-    close: '닫기',
-  },
-
-  errors: {
-    timeout: '요청 시간이 초과되었습니다. 다시 시도해 주세요.',
-    network: '네트워크 오류입니다. 연결을 확인하고 다시 시도해 주세요.',
-    auth: '인증에 실패했습니다. 설정에서 API Key를 확인해 주세요.',
-    rateLimit: '프로바이더에 의해 요청이 제한되었습니다. 잠시 후 다시 시도해 주세요.',
-    provider: '모델 프로바이더에 일시적인 오류가 발생했습니다. 다시 시도해 주세요.',
-    switchFailed: '프로젝트 전환 실패',
-    remoteReconnect: '원격 워크스페이스 — SSH 마법사를 통해 다시 연결하세요',
-    branchSwitch: '브랜치 전환 실패',
-    generic: '문제가 발생했습니다.',
-    submitAnswer: '답변 제출 실패: {detail}',
-    approval: '승인 실패: {detail}',
-    switchModel: '모델 전환 실패: {detail}',
-    loadSession: '세션 불러오기 실패: {detail}',
-  },
-}
diff --git a/web-react/src/i18n/locales/zh-Hans.ts b/web-react/src/i18n/locales/zh-Hans.ts
deleted file mode 100644
index 27e098dd..00000000
--- a/web-react/src/i18n/locales/zh-Hans.ts
+++ /dev/null
@@ -1,825 +0,0 @@
-/**
- * 简体中文 (zh-Hans)。键结构与 en.ts 完全一致。
- */
-export default {
-  common: {
-    ok: '确定',
-    add: '添加',
-    cancel: '取消',
-    close: '关闭',
-    back: '返回',
-    delete: '删除',
-    save: '保存',
-    saved: '已保存',
-    edit: '编辑',
-    retry: '重试',
-    loading: '加载中…',
-    remove: '移除',
-    rename: '重命名',
-    enable: '启用',
-    disable: '禁用',
-    active: '使用中',
-    configured: '已配置',
-    recommended: '推荐',
-    local: '本地',
-    search: '搜索',
-    other: '其他',
-    details: '详情',
-    connected: '已连接',
-    disconnected: '未连接',
-    scanning: '扫描中…',
-    notConfigured: '未配置',
-    done: '完成',
-  },
-
-  nav: {
-    newTask: '新建任务',
-    automations: '自动化',
-    channels: '通道',
-    workspace: '工作区',
-    projects: '项目',
-    openFolder: '打开文件夹',
-    openProject: '打开项目…',
-    remoteConnect: '远程连接',
-    settings: '设置',
-    settingsWithShortcut: '设置 (⌘,)',
-    switchToLight: '切换到浅色模式',
-    switchToDark: '切换到深色模式',
-    openSettings: '打开设置',
-    toggleTheme: '切换主题',
-  },
-
-  welcome: {
-    startIn: '在 {project} 中开始一个新任务',
-    subtitle: '发送消息即可开始。{kbd} 查看命令。',
-  },
-
-  channels: {
-    connected: '已连接',
-    promo: {
-      title: '在<span class="accent">手机上</span>审批与监控',
-      lede: '只需连接一次微信。jcode 会把每一次审批请求和任务完成通知直接转发到你的聊天中——长时间运行的 agent 不再需要你守在电脑前。',
-    },
-    features: {
-      approvals: { title: '一键审批', desc: '直接在微信消息里批准或拒绝一次工具调用——无需打开应用。' },
-      notifications: { title: '完成通知', desc: '当定时自动化或后台任务完成时，立刻收到提醒。' },
-      scan: { title: '扫码连接', desc: '用二维码几秒配对。随时可在 设置 → 通道 断开。' },
-    },
-    mock: {
-      now: '刚刚',
-      approvalTitle: '需要审批',
-      run: '执行',
-      approve: '批准',
-      deny: '拒绝',
-      done: '夜间自动化已完成',
-      summary: '3 个任务 · 0 失败',
-    },
-  },
-
-  auth: {
-    title: '需要访问令牌',
-    body: '此服务可通过网络访问，因此需要令牌。请粘贴服务器启动时打印的令牌。',
-    placeholder: '粘贴访问令牌',
-    show: '显示',
-    hide: '隐藏',
-    submit: '进入',
-    verifying: '验证中…',
-    required: '请输入令牌',
-    invalid: '令牌无效',
-    serverError: '无法验证令牌，请检查连接后重试。',
-  },
-
-  connection: {
-    errorTitle: '无法连接到 jcode 服务',
-    errorBody: '本地服务可能尚未就绪或已停止。请稍候重试，或退出后重新启动。',
-    retrying: '正在重试…',
-    retry: '重试连接',
-  },
-
-  chat: {
-    placeholder: '向 JCODE 提问，或输入 / 查看命令',
-    goalPlaceholder: '描述目标 — Agent 会一直推进，直到可验证完成',
-    workingPlaceholder: 'Agent 正在工作…',
-    queuePlaceholder: 'Agent 正在工作 — 输入将排队，稍后自动发送…',
-    queue: '排队',
-    removeQueued: '从队列移除',
-    stopAndNext: '停止当前回合并发送下一条排队消息',
-    send: '发送',
-    stop: '停止',
-    stopAgent: '停止 Agent (Esc)',
-    thinking: '思考中…',
-    attachFiles: '添加附件',
-    goal: '目标',
-    add: '添加',
-    copilotHint: '回车发送 · Shift+回车换行 · Esc 取消',
-    turnDuration: '本次耗时',
-    wechatOn: '微信通知已开启',
-    wechatOff: '微信通知已关闭',
-    modes: {
-      approval: '请求批准',
-      approvalSub: '每次写入或执行命令前都需要确认。',
-      plan: '计划',
-      planSub: '先提出计划，经你批准后才会执行。',
-      fullAccess: '完全访问',
-      fullAccessSub: '自由操作——不再弹出确认。',
-    },
-    roles: {
-      you: '你',
-      assistant: 'JCODE',
-      wechat: '微信',
-      system: '系统',
-      error: '错误',
-    },
-    actions: {
-      copy: '复制',
-      copied: '已复制！',
-    },
-    model: {
-      current: '当前',
-      favorites: '★ 收藏',
-      manage: '管理模型…',
-      manageTitle: '管理模型',
-      none: '暂无可用模型',
-      noMatch: '没有匹配的模型。',
-      filter: '筛选模型…',
-      toggleVisibility: '选择哪些模型显示在模型选择器中',
-      noImages: '当前模型不支持图片',
-      reasoning: '推理',
-      tools: '工具调用',
-      images: '图片输入',
-      effort: '强度',
-      effortTitle: '该模型的推理强度',
-      effortDefault: '默认',
-      visibleCount: '选择器中显示 {visible} / {total} 个模型',
-    },
-    goalHint: {
-      replace: '设置新目标会替换当前目标',
-      next: '下一条消息将成为本次会话的目标',
-      nextReplaces: '下一条消息会替换当前目标',
-      remove: '移除目标',
-    },
-    command: '命令',
-    stopped: '已停止',
-    nextMessageGoal: '下一条消息将成为本次会话的目标',
-    durationSeconds: '{n}秒',
-    durationMinutes: '{m}分 {s}秒',
-    durationMinutesOnly: '{m}分',
-  },
-
-  approval: {
-    needed: '需要确认',
-    asking: '询问中',
-    allowed: '已允许',
-    denied: '已拒绝',
-    external: '· 外部',
-    externalPath: '外部路径',
-    allowOnce: '允许一次',
-    allowAll: '全部允许',
-    confirm: '确认？',
-    confirmHint: '再次点击以在本次会话中自动批准剩余操作',
-    allowAllTitle: '批准此项，并自动批准本次会话的剩余操作',
-    deny: '拒绝',
-    toggleArgs: '切换参数',
-    runCommand: '执行命令',
-    createFile: '创建文件',
-    editFile: '编辑文件',
-    toolAction: '{name}',
-    showArgs: '展开参数',
-    hideArgs: '收起参数',
-  },
-
-  tool: {
-    read: '读取',
-    write: '写入',
-    edit: '编辑',
-    multiEdit: '批量编辑',
-    glob: '文件匹配',
-    search: '搜索',
-    shell: '终端',
-    background: '后台',
-    updateTodos: '更新待办',
-    readTodos: '读取待办',
-    subagent: '子 Agent',
-    askUser: '询问用户',
-    subagentLabel: '子 Agent',
-    teamLabel: '团队',
-    working: '工作中…',
-    starting: '正在启动子 Agent…',
-    running: '运行中…',
-    loading: '加载中…',
-    noContent: '无内容',
-    noChanges: '无变更',
-    applying: '应用中…',
-    searching: '搜索中…',
-    noResults: '无结果',
-    noTodos: '无待办',
-    loadingLower: '加载中…',
-    noTeammates: '无队友',
-    created: '✓ 已创建',
-    creating: '创建中…',
-    lead: '主导：',
-    runningMark: '✓ 运行中',
-    spawning: '生成中…',
-    id: 'ID：',
-    all: '全部',
-    sent: '✓ 已发送',
-    sending: '发送中…',
-    args: '参数',
-    output: '输出',
-    error: '错误',
-    calls: '{n} 次调用',
-    matchesFound: '(找到 {n} 个匹配)',
-    members: '{n} 名成员',
-  },
-
-  settings: {
-    backToWorkspace: '返回工作区',
-    title: '设置',
-    tabs: {
-      general: '通用',
-      appearance: '外观',
-      providers: '服务商',
-      mcp: 'MCP 服务器',
-      skills: '技能',
-      browser: '浏览器',
-      ssh: 'SSH',
-      channels: '渠道',
-      shortcuts: '快捷键',
-      usage: '使用统计',
-    },
-    general: {
-      serverOnline: '在线',
-      serverOffline: '离线',
-      serverState: '服务',
-      tokenUsage: 'Token 用量',
-      preferences: '偏好设置',
-      autoApproveTitle: '默认自动批准',
-      autoApproveDesc: '自动执行工具调用（文件编辑和命令），无需确认（等同于完全访问模式；计划模式仍会询问）。保存为新会话的默认设置。',
-      bleTitle: '蓝牙状态通知',
-      bleDesc: '将 Agent 状态 — 工作中、待确认、已完成 — 推送到已配对的 JCODE 蓝牙设备。重启应用后生效。',
-      languageTitle: '语言',
-      languageDesc: '应用的界面语言。',
-    },
-    appearance: {
-      theme: '主题',
-      system: '跟随系统',
-      systemDesc: '跟随操作系统的浅色 / 深色设置',
-      dark: '深色',
-      light: '浅色',
-      active: '使用中',
-      terminalHint: '终端界面有自己的主题 — 在终端中用 {cmd} 命令切换。',
-    },
-    providers: {
-      title: '服务商',
-      add: '+ 添加服务商',
-      selectProvider: '选择服务商',
-      selectModel: '选择模型',
-      enterApiKey: '输入 API Key',
-      apiKey: 'API Key',
-      baseUrl: 'Base URL（可选）',
-      saving: '保存中…',
-      addBtn: '添加',
-      noneConfigured: '未配置任何服务商',
-      noneHint: '点击上方的 {btn} 按钮添加一个以开始使用。',
-      allConfigured: '所有服务商已配置',
-      remove: '移除服务商',
-      confirmRemove: '确定移除此服务商？',
-      testConnection: '测试连接',
-      testing: '检测中…',
-      connected: '已连接',
-      connectFailed: '连接失败',
-      loadingHint: '加载中…',
-      edit: '编辑服务商',
-      editProvider: '编辑服务商',
-      apiKeyUnchanged: 'API 密钥（留空则保持不变）',
-      advanced: '高级',
-      endpoint: '自定义 Endpoint',
-      endpointPlaceholder: 'https://api.example.com/v1',
-      headers: '自定义 Header',
-      addHeader: '添加 Header',
-      headerKey: 'Header 名称',
-      headerValue: '值',
-      headersHint: '留空值则保留已保存的内容。',
-      // 自定义（非内置、OpenAI 兼容）服务商。
-      custom: '自定义',
-      customProvider: '自定义服务商',
-      customProviderDesc: '任意 OpenAI 兼容端点',
-      customId: '服务商 ID',
-      customIdPlaceholder: 'my-provider',
-      customIdRequired: '服务商 ID 不能为空',
-      customName: '显示名称',
-      customNamePlaceholder: '我的服务商',
-      customModelId: '模型 ID',
-      customModelPlaceholder: 'gpt-4o',
-      customModelRequired: '自定义服务商必须填写模型 ID',
-      customUrlRequired: '自定义服务商必须填写 Base URL',
-      customReasoning: '推理模型',
-      customReasoningDesc: '为该模型显示推理强度控件',
-      customModels: '自定义模型',
-      customModelsHint: '该服务商可路由的模型。',
-      addModel: '添加模型',
-      editModel: '编辑模型',
-      customModelNamePlaceholder: '显示名称（可选）',
-      contextWindow: '上下文窗口（tokens）',
-      contextPlaceholder: '200000',
-      testEnterKey: '请先在上方输入 API 密钥后再测试',
-      customModelExists: '该模型 ID 已存在',
-      customModelConflict: '该模型 ID 与已有模型重复（含内置模型），请换一个',
-      browseCatalog: '浏览模型',
-      browseModels: '浏览模型',
-      models: '模型',
-      addCustomModel: '自定义模型',
-      supportImage: '支持图片',
-      supportImageDesc: '允许传入图像附件',
-      supportReasoning: '支持推理强度',
-      supportReasoningDesc: '开启后可定义可选的强度档位',
-      effortTiers: '强度档位',
-      effortTiersHint: '每个档位即模型选择器里可选的一项，例如 minimal / low / medium / high / max',
-      addTier: '添加档位',
-      newTierPlaceholder: '档位名',
-      catalogSearch: '搜索模型…',
-      refreshCatalog: '刷新目录',
-      hideModel: '隐藏该模型',
-      showModel: '显示该模型',
-      addedCount: '已添加',
-      noCatalog: '该端点无目录，请手动添加模型',
-      switchModelFirst: '该模型正在使用，请先切换到其他模型',
-      deleteInUseTitle: '无法删除：该 Provider 下有模型正在使用',
-      deleteInUseBody: '当前会话正在使用「{model}」。请先切换到其他 Provider 的模型，再删除此连接。',
-      testSuccess: '连接成功',
-      testLatency: '延迟',
-      testModels: '命中 {n} 个模型',
-      testAuthFail: '认证失败',
-      testNetworkFail: '网络错误',
-      switchModel: '切换模型',
-    },
-    mcp: {
-      title: 'MCP 服务器',
-      add: '+ 添加服务器',
-      addServer: '添加服务器',
-      editServer: '编辑服务器',
-      name: '名称',
-      serverName: '服务器名称',
-      command: '命令',
-      args: '参数',
-      arguments: '参数',
-      env: '环境变量（每行 key=value）',
-      transport: '传输方式',
-      transportLocal: '本地',
-      url: 'URL',
-      headers: '请求头',
-      addHeader: '+ 添加请求头',
-      headerKey: '键',
-      headerValue: '值',
-      useOauth: '使用 OAuth（保存后登录）',
-      oauthClientId: 'OAuth Client ID',
-      oauthClientSecret: 'OAuth Client Secret',
-      oauthScopes: 'Scopes',
-      timeout: '超时（秒）',
-      status: {
-        disabled: '已禁用',
-        connected: '已连接',
-        loginRequired: '需要登录',
-        error: '错误',
-        configured: '已配置',
-      },
-      login: '登录',
-      reauth: '重新认证',
-      waitingBrowser: '等待浏览器…',
-      authenticated: '已认证',
-      none: '未配置 MCP 服务器。',
-      noneConfigured: '未配置 MCP 服务器',
-      noneHint: '点击上方的 {btn} 按钮添加一个。',
-      save: '保存',
-    },
-    skills: {
-      title: '技能',
-      add: '添加技能',
-      none: '未找到技能',
-      noneHint: '试试其他筛选或搜索词。',
-      search: '搜索技能…',
-      filterAll: '全部',
-      filterLocal: '本机',
-      filterBuiltin: '内置',
-      builtin: '内置',
-      loadingHint: '加载中…',
-    },
-    browser: {
-      title: '浏览器',
-      subtitle: '让 jcode 操控浏览器。托管浏览器开箱即用；连接 Chrome 扩展可复用你已登录的会话。',
-      enableTitle: '启用浏览器操控',
-      enableDesc: '为 agent 添加 browser_* 工具。',
-      control: '控制',
-      managed: '托管浏览器',
-      noChrome: '未找到 Chrome — 请在下方设置路径',
-      extension: 'Google Chrome 扩展',
-      connected: '复用你自己的 Chrome 与登录态',
-      notConnected: '未连接 — 复用你自己的 Chrome 与登录态',
-      online: '已连接',
-      connectHint: '连接方式：安装 jcode Browser Bridge 扩展，打开它的 popup，点 "Auto-connect to jcode"。',
-      chromePath: 'Chrome 路径',
-      approval: '审批',
-      navigate: '打开网站（导航）',
-      interact: '页面交互（点击 / 输入）',
-      askEachSite: '每个站点询问',
-      alwaysAllow: '总是允许',
-      sitePermissions: '站点权限',
-      add: '添加',
-      noSitePermissions: '暂无站点级权限',
-      developerMode: '开发者模式',
-      elevatedRisk: '高风险',
-      devModeTitle: '启用 browser_eval 与原始 CDP',
-      devModeDesc: '允许 agent 在页面执行 JavaScript 与原始 DevTools 命令。每次调用仍会询问；站点白名单对此无效。',
-    },
-    ssh: {
-      title: 'SSH 环境',
-      connect: '连接远程主机',
-      currentEnv: '当前环境',
-      noneConfigured: '没有已保存的主机',
-      noneHint: '使用 {btn} 添加一个，或在 {config} 中预配置主机。',
-      connectTo: '连接到 {name}',
-      host: '主机',
-      port: '端口',
-      user: '用户',
-      password: '密码',
-      key: '密钥',
-      privateKeyPath: '私钥路径',
-      passphrase: '口令（可选）',
-      savedAlias: '保存别名（可选）',
-      noAlias: '不使用别名',
-      saveAlias: '保存别名',
-      remove: '移除',
-    },
-    channels: {
-      title: '通知渠道',
-      scanQr: '用微信扫码连接',
-      activate: '发送一条消息以激活',
-      activateBody: '请立即向微信机器人发送任意消息以激活通知。激活后，您可在 24 小时内接收通知。',
-      wechat: '微信',
-      integration: 'iLink Bot 集成',
-      connect: '连接',
-      disconnect: '断开连接',
-      loadingHint: '加载中…',
-      noneConfigured: '未配置任何渠道',
-      noneHint: '在 {config} 中设置 {flag}。',
-      whenConnected: '连接后，jcode 会将审批请求和任务完成通知发送到您的微信。',
-      enable: '启用微信通知',
-      permission: '通知权限',
-      grant: '授予权限',
-      test: '发送测试通知',
-      loginRequired: '需要登录',
-      login: '登录',
-    },
-    shortcuts: {
-      title: '键盘快捷键',
-      items: {
-        sendMessage: '发送消息',
-        newLine: '换行',
-        stopAgent: '停止 Agent',
-        slashCommands: '斜杠命令',
-        focusInput: '聚焦输入框',
-        newConversation: '新建会话',
-        openSettings: '打开设置',
-        toggleTerminal: '切换终端',
-      },
-    },
-    usageStats: {
-      title: '使用统计',
-      subtitle: '所有项目的 token 用量、会话与缓存效率。',
-      lastNDays: '最近 {n} 天',
-      totalTokens: 'Token 用量',
-      cacheHitRate: '缓存命中率',
-      mostUsedModel: '最常用模型',
-      share: '占比 {pct}',
-      sessions: '会话数量',
-      turns: '对话轮次',
-      activeDays: '活跃天数',
-      streak: '连续 {n} 天',
-      tokenBreakdown: 'Token 构成',
-      tokenBreakdownHint: '缓存包含于输入、推理包含于输出,各项不可直接相加',
-      promptTokens: '输入',
-      cachedTokens: '缓存',
-      completionTokens: '输出',
-      reasoningTokens: '推理',
-      heatmap: '活跃热力图',
-      less: '较少',
-      more: '较多',
-      dailyTrend: '按天 Token',
-      byModel: '按模型',
-      byProject: '按项目',
-      noData: '暂无数据',
-      noActivity: '无活动',
-      turnsUnit: '轮',
-    },
-  },
-
-  contextCapacity: {
-    title: '上下文容量',
-    messages: '消息',
-    systemTools: '系统工具',
-    mcpTools: 'MCP 工具',
-    skills: '技能',
-    systemPrompt: '系统提示词',
-    cacheHitRate: '缓存命中率',
-    freeSpace: '剩余空间',
-    sessionTotal: '本会话累计',
-    estimated: '构成为估算值(约 4 字节/token)。',
-  },
-
-  setup: {
-    step: '第 {n} 步：{label}',
-    chooseProvider: '选择服务商',
-    enterApiKey: '输入 API Key',
-    allSet: '一切就绪！',
-    startCoding: '开始编码',
-    searchProviders: '搜索服务商…',
-    noProviders: '未找到服务商',
-    selectProviderDesc: '选择你想使用的 AI 服务商。',
-    loadingProviders: '加载服务商中…',
-    for: '用于',
-    envVar: '环境变量',
-    apiKey: 'API Key',
-    apiKeyPlaceholder: 'sk-…',
-    apiKeyRequired: 'API Key 不能为空',
-    baseUrl: 'Base URL（可选）',
-    testConnection: '测试连接',
-    checking: '检测中…',
-    connected: '已连接',
-    settingUp: '配置中…',
-    retry: '重试',
-    savedTo: '配置已保存到 ~/.jcode/config.json',
-    completeSetup: '完成设置',
-    usingModel: '使用 {provider} 的 {model}',
-    // 配置向导里的自定义（OpenAI 兼容）服务商入口。
-    customProvider: '自定义服务商',
-    customProviderDesc: '任意 OpenAI 兼容端点',
-    customId: '服务商 ID',
-    customIdPlaceholder: 'my-provider',
-    customIdRequired: '服务商 ID 不能为空',
-    customName: '显示名称',
-    customNamePlaceholder: '我的服务商',
-    customModelId: '模型 ID',
-    customModelPlaceholder: 'gpt-4o',
-    customModelRequired: '自定义服务商必须填写模型 ID',
-    customUrlRequired: '自定义服务商必须填写 Base URL',
-    customReasoning: '推理模型',
-    // 高级设置面板。
-    advanced: '高级',
-    headers: '自定义请求头',
-    addHeader: '添加请求头',
-    headerKey: '键',
-    headerValue: '值',
-  },
-
-  wizard: {
-    title: '远程连接',
-    chooseMethod: '选择连接方式',
-    ssh: 'SSH',
-    docker: 'Docker',
-    container: '容器',
-    dockerConnection: 'Docker 容器',
-    dockerDesc: '选择一个容器作为工作区。已停止的容器会自动为你启动，在没有任务使用时再次停止。',
-    selectContainer: '选择一个容器',
-    noContainers: '此 Docker 主机上未找到容器。',
-    refresh: '刷新',
-    running: '运行中',
-    stopped: '已停止',
-    remoteHost: '远程主机',
-    comingSoon: '即将推出',
-    sshConnection: 'SSH 连接',
-    pickMethodDesc: '选择进入远程工作区的方式，然后填写详细信息。',
-    next: '下一步',
-    sshDesc: '密钥/代理认证使用你本地的 SSH 密钥；支持密码和口令。',
-    auth: '认证',
-    hostPlaceholder: '1.2.3.4 或 example.com',
-    userPlaceholder: 'root',
-    dirDesc: '选择此远程工作区的工作目录。',
-    backToConfig: '返回配置',
-    aliasNamePlaceholder: '名称',
-    steps: {
-      chooseMethod: '选择方式',
-      configure: '配置',
-      connecting: '连接中',
-      selectDirectory: '选择目录',
-    },
-    connecting: '连接中…',
-    connect: '连接',
-    selectDirectory: '选择一个目录',
-    loading: '加载中…',
-    noSubDirs: '无子目录',
-    saveAlias: '保存为别名',
-    useDirectory: '使用此目录',
-  },
-
-  sidebar: {
-    hideArchived: '隐藏已归档任务',
-    showArchived: '显示已归档任务',
-    noProjects: '暂无项目',
-    noTasks: '暂无任务',
-    running: '运行中',
-    newTaskHere: '在此新建任务',
-    filter: {
-      title: '筛选与排序',
-      status: '状态',
-      statusActive: '活跃',
-      statusArchived: '已归档',
-      statusAll: '全部',
-      project: '项目',
-      projectAll: '全部',
-      lastActivity: '最近活动',
-      activityAll: '全部',
-      activityToday: '今天',
-      activityWeek: '近 7 天',
-      activityMonth: '近 30 天',
-      groupBy: '分组方式',
-      groupProject: '按项目',
-      groupDate: '按日期',
-      sortBy: '排序方式',
-      sortRecency: '最近活动',
-      sortName: '名称',
-      sortCreated: '创建时间',
-      reset: '重置筛选',
-    },
-    dateBucket: {
-      today: '今天',
-      yesterday: '昨天',
-      week: '近 7 天',
-      month: '近 30 天',
-      older: '更早',
-    },
-    actions: {
-      pin: '置顶',
-      unpin: '取消置顶',
-      rename: '重命名',
-      archive: '归档',
-      unarchive: '取消归档',
-      markRead: '标记为已读',
-      markUnread: '标记为未读',
-      delete: '删除',
-      taskActions: '任务操作',
-    },
-    relativeTime: {
-      now: '刚刚',
-      minutes: '{n}分钟前',
-      hours: '{n}小时前',
-      days: '{n}天前',
-    },
-  },
-
-  topbar: {
-    panels: '面板',
-    panelsMenu: '面板菜单 · {status}',
-    panelsHint: '面板 · {status}  (⇧⌘P 计划 · ⇧⌘E 文件 · ⇧⌘G 变更 · ⌘` 终端)',
-    plan: '计划',
-    files: '文件',
-    changes: '变更',
-    terminal: '终端',
-    status: {
-      running: '运行中',
-      connected: '已连接',
-      disconnected: '未连接',
-    },
-  },
-
-  rightPanel: {
-    plan: '计划',
-    files: '文件',
-    changes: '变更',
-    noTasks: '暂无任务',
-  },
-
-  diff: {
-    changes: '变更',
-    refresh: '↻ 刷新',
-    noChanges: '无变更',
-    selectFile: '选择一个文件以查看变更',
-    modes: {
-      session: '会话',
-      working: '工作区',
-      staged: '暂存区',
-      branch: '分支',
-    },
-  },
-
-  branches: {
-    title: '分支',
-    none: '暂无分支',
-    create: '创建并检出新分支',
-    createBtn: '创建',
-    search: '搜索分支',
-    newName: '新分支名',
-    current: '分支：{name}',
-    confirmTitle: '有未提交的改动',
-    confirmIntro: '切换到“{branch}”会覆盖以下本地文件：',
-    confirmMore: '其余 {count} 项',
-    confirmStash: '暂存并切换',
-    confirmDiscard: '丢弃并切换',
-    confirmCancel: '取消',
-    confirmHint: '暂存会保存你的改动（可用 git stash pop 恢复）；丢弃将永久删除这些文件，包括未跟踪的文件。',
-  },
-
-  projectSwitcher: {
-    title: '项目',
-    openFolder: '打开文件夹',
-    ok: '确定',
-    loading: '加载中…',
-    noFolders: '未找到文件夹',
-    switching: '切换项目中…',
-    noProjects: '暂无项目',
-    removeProject: '移除项目',
-    openFolderBtn: '+ 打开文件夹',
-    pathPlaceholder: '/path/to/folder',
-  },
-
-  workspace: {
-    none: '无工作区',
-    loading: '加载中…',
-    noFolders: '无文件夹',
-    open: '打开',
-    nonePlural: '暂无工作区',
-    search: '搜索工作区',
-    openFolder: '打开文件夹',
-    openError: '打开工作区失败',
-  },
-
-  askUser: {
-    asking: '询问中',
-    collapse: '折叠',
-    skip: '跳过',
-    other: '其他',
-    submit: '提交',
-    noAnswer: '无记录的答案',
-    customPlaceholder: '在此输入你的答案',
-  },
-
-  goal: {
-    clearGoal: '清除目标',
-    clear: '清除',
-    tokens: '{used} tokens',
-    tokensK: '{k}k tokens',
-    status: {
-      active: '进行中',
-      inProgress: '推进中',
-      completed: '已完成',
-      blocked: '已阻塞',
-    },
-    statusReport: '🎯 {status} — {objective}',
-    noGoal: '🎯 未设置目标。使用 /goal <目标> 来设置。',
-    cleared: '🎯 目标已清除。',
-  },
-
-  commandPalette: {
-    placeholder: '搜索任务或运行命令…',
-    noResults: '无结果',
-    groups: {
-      actions: '操作',
-      tasks: '任务',
-    },
-    newTask: '新建任务',
-  },
-
-  notifications: {
-    taskFinished: 'jcode — 任务已完成',
-    taskFailed: 'jcode — 任务失败',
-    approvalNeeded: 'jcode — 待确认',
-    finishedBody: 'Agent 已完成本次运行。',
-    approvalBody: 'Agent 正在等待你的确认。',
-  },
-
-  terminal: {
-    newTerminal: '新建终端',
-    closePanel: '关闭面板',
-    closeTab: '关闭 {label}',
-    shell: '终端 {n}',
-    failedCreate: '创建终端失败：{msg}',
-    sessionEnded: '[会话已结束]',
-  },
-
-  fileTree: {
-    root: '根目录',
-    loading: '加载中…',
-    empty: '空目录',
-    dirError: '无法加载此目录。',
-    fileError: '无法打开 {name}（可能是二进制文件、过大或权限不足）。',
-  },
-
-  fileViewer: {
-    close: '关闭',
-  },
-
-  errors: {
-    timeout: '请求超时，请重试。',
-    network: '网络错误，请检查连接后重试。',
-    auth: '认证失败，请在设置中检查 API Key。',
-    rateLimit: '已被服务商限流，请稍候重试。',
-    provider: '模型服务商出现临时错误，请重试。',
-    switchFailed: '切换项目失败',
-    remoteReconnect: '远程工作区 — 请通过 SSH 向导重新连接',
-    branchSwitch: '切换分支失败',
-    generic: '出错了。',
-    submitAnswer: '提交答案失败：{detail}',
-    approval: '确认失败：{detail}',
-    switchModel: '切换模型失败：{detail}',
-    loadSession: '加载会话失败：{detail}',
-  },
-}
diff --git a/web-react/src/i18n/locales/zh-Hant.ts b/web-react/src/i18n/locales/zh-Hant.ts
deleted file mode 100644
index d6ab5135..00000000
--- a/web-react/src/i18n/locales/zh-Hant.ts
+++ /dev/null
@@ -1,766 +0,0 @@
-/**
- * 繁體中文 (zh-Hant)。鍵結構與 en.ts 完全一致。
- * 採用台/港慣用語（設定、工作區、檔案、終端機）。
- */
-export default {
-  common: {
-    ok: '確定',
-    add: '添加',
-    cancel: '取消',
-    close: '關閉',
-    back: '返回',
-    delete: '刪除',
-    save: '儲存',
-    saved: '已儲存',
-    edit: '編輯',
-    retry: '重試',
-    loading: '載入中…',
-    remove: '移除',
-    rename: '重新命名',
-    enable: '啟用',
-    disable: '停用',
-    active: '使用中',
-    configured: '已設定',
-    recommended: '推薦',
-    local: '本機',
-    search: '搜尋',
-    other: '其他',
-    details: '詳情',
-    connected: '已連線',
-    disconnected: '未連線',
-    scanning: '掃描中…',
-    notConfigured: '未設定',
-    done: '完成',
-  },
-
-  nav: {
-    newTask: '新增工作',
-    automations: '自動化',
-    channels: '通道',
-    workspace: '工作區',
-    projects: '專案',
-    openFolder: '開啟資料夾',
-    openProject: '開啟專案…',
-    remoteConnect: '遠端連線',
-    settings: '設定',
-    settingsWithShortcut: '設定 (⌘,)',
-    switchToLight: '切換到淺色模式',
-    switchToDark: '切換到深色模式',
-    openSettings: '開啟設定',
-    toggleTheme: '切換主題',
-  },
-
-  welcome: {
-    startIn: '在 {project} 中開始一項新工作',
-    subtitle: '傳送訊息即可開始。{kbd} 查看指令。',
-  },
-
-  channels: {
-    connected: '已連接',
-    promo: {
-      title: '在<span class="accent">手機上</span>審批與監控',
-      lede: '只需連接一次微信。jcode 會把每一次審批請求和工作完成通知直接轉發到你的聊天中——長時間執行的 agent 不再需要你守在電腦前。',
-    },
-    features: {
-      approvals: { title: '一鍵審批', desc: '直接在微信訊息裡批准或拒絕一次工具呼叫——無需開啟應用。' },
-      notifications: { title: '完成通知', desc: '當排程自動化或背景工作完成時，立刻收到提醒。' },
-      scan: { title: '掃碼連接', desc: '用 QR Code 幾秒配對。隨時可在 設定 → 通道 斷開。' },
-    },
-    mock: {
-      now: '剛剛',
-      approvalTitle: '需要審批',
-      run: '執行',
-      approve: '批准',
-      deny: '拒絕',
-      done: '夜間自動化已完成',
-      summary: '3 個工作 · 0 失敗',
-    },
-  },
-
-  auth: {
-    title: '需要存取權杖',
-    body: '此服務可透過網路存取，因此需要權杖。請貼上伺服器啟動時顯示的權杖。',
-    placeholder: '貼上存取權杖',
-    show: '顯示',
-    hide: '隱藏',
-    submit: '進入',
-    verifying: '驗證中…',
-    required: '請輸入權杖',
-    invalid: '權杖無效',
-    serverError: '無法驗證權杖，請檢查連線後重試。',
-  },
-
-  connection: {
-    errorTitle: '無法連線到 jcode 服務',
-    errorBody: '本機服務可能尚未就緒或已停止。請稍候重試，或結束後重新啟動。',
-    retrying: '正在重試…',
-    retry: '重試連線',
-  },
-
-  chat: {
-    placeholder: '向 JCODE 提問，或輸入 / 查看指令',
-    goalPlaceholder: '描述目標 — Agent 會持續推進，直到可驗證完成',
-    workingPlaceholder: 'Agent 正在工作中…',
-    queuePlaceholder: 'Agent 正在工作 — 輸入將排隊，稍後自動傳送…',
-    queue: '排隊',
-    removeQueued: '從佇列移除',
-    stopAndNext: '停止目前回合並傳送下一則排隊訊息',
-    send: '傳送',
-    stop: '停止',
-    stopAgent: '停止 Agent (Esc)',
-    thinking: '思考中…',
-    attachFiles: '附加檔案',
-    goal: '目標',
-    add: '新增',
-    copilotHint: 'Enter 傳送 · Shift+Enter 換行 · Esc 取消',
-    turnDuration: '本次耗時',
-    wechatOn: '微信通知已開啟',
-    wechatOff: '微信通知已關閉',
-    modes: {
-      approval: '請求批准',
-      approvalSub: '每次寫入或執行命令前都需要確認。',
-      plan: '計劃',
-      planSub: '先提出計劃，經你批准後才會執行。',
-      fullAccess: '完全存取',
-      fullAccessSub: '自由操作——不再彈出確認。',
-    },
-    roles: {
-      you: '你',
-      assistant: 'JCODE',
-      wechat: '微信',
-      system: '系統',
-      error: '錯誤',
-    },
-    actions: {
-      copy: '複製',
-      copied: '已複製！',
-    },
-    model: {
-      current: '目前',
-      favorites: '★ 收藏',
-      manage: '管理模型…',
-      manageTitle: '管理模型',
-      none: '暫無可用模型',
-      noMatch: '沒有符合的模型。',
-      filter: '篩選模型…',
-      toggleVisibility: '選擇哪些模型顯示在模型選擇器中',
-      noImages: '目前模型不支援圖片',
-      reasoning: '推理',
-      tools: '工具呼叫',
-      images: '圖片輸入',
-      effort: '強度',
-      effortTitle: '此模型的推理強度',
-      effortDefault: '預設',
-      visibleCount: '選擇器中顯示 {visible} / {total} 個模型',
-    },
-    goalHint: {
-      replace: '設定新目標會取代目前目標',
-      next: '下一則訊息將成為本次工作階段的目標',
-      nextReplaces: '下一則訊息會取代目前目標',
-      remove: '移除目標',
-    },
-    command: '指令',
-    stopped: '已停止',
-    nextMessageGoal: '下一則訊息將成為本次工作階段的目標',
-    durationSeconds: '{n}秒',
-    durationMinutes: '{m}分 {s}秒',
-    durationMinutesOnly: '{m}分',
-  },
-
-  approval: {
-    needed: '需要確認',
-    asking: '詢問中',
-    allowed: '已允許',
-    denied: '已拒絕',
-    external: '· 外部',
-    externalPath: '外部路徑',
-    allowOnce: '允許一次',
-    allowAll: '全部允許',
-    confirm: '確認？',
-    confirmHint: '再次點擊以在工作階段中自動批准剩餘操作',
-    allowAllTitle: '批准此項，並自動批准本次工作階段的剩餘操作',
-    deny: '拒絕',
-    toggleArgs: '切換參數',
-    runCommand: '執行命令',
-    createFile: '建立檔案',
-    editFile: '編輯檔案',
-    toolAction: '{name}',
-    showArgs: '展開參數',
-    hideArgs: '收起參數',
-  },
-
-  tool: {
-    read: '讀取',
-    write: '寫入',
-    edit: '編輯',
-    multiEdit: '批次編輯',
-    glob: '檔案比對',
-    search: '搜尋',
-    shell: '終端機',
-    background: '背景',
-    updateTodos: '更新待辦',
-    readTodos: '讀取待辦',
-    subagent: '子 Agent',
-    askUser: '詢問使用者',
-    subagentLabel: '子 Agent',
-    teamLabel: '團隊',
-    working: '工作中…',
-    starting: '正在啟動子 Agent…',
-    running: '執行中…',
-    loading: '載入中…',
-    noContent: '無內容',
-    noChanges: '無變更',
-    applying: '套用中…',
-    searching: '搜尋中…',
-    noResults: '無結果',
-    noTodos: '無待辦',
-    loadingLower: '載入中…',
-    noTeammates: '無隊友',
-    created: '✓ 已建立',
-    creating: '建立中…',
-    lead: '主導：',
-    runningMark: '✓ 執行中',
-    spawning: '產生中…',
-    id: 'ID：',
-    all: '全部',
-    sent: '✓ 已傳送',
-    sending: '傳送中…',
-    args: '參數',
-    output: '輸出',
-    error: '錯誤',
-    calls: '{n} 次呼叫',
-    matchesFound: '(找到 {n} 個符合)',
-    members: '{n} 名成員',
-  },
-
-  settings: {
-    backToWorkspace: '返回工作區',
-    title: '設定',
-    tabs: {
-      general: '一般',
-      appearance: '外觀',
-      providers: '服務商',
-      mcp: 'MCP 伺服器',
-      skills: '技能',
-      browser: '瀏覽器',
-      ssh: 'SSH',
-      channels: '頻道',
-      shortcuts: '快捷鍵',
-      usage: '使用統計',
-    },
-    general: {
-      serverOnline: '上線',
-      serverOffline: '離線',
-      serverState: '伺服器',
-      tokenUsage: 'Token 用量',
-      preferences: '偏好設定',
-      autoApproveTitle: '預設自動批准',
-      autoApproveDesc: '自動執行工具呼叫（檔案編輯與指令），無需確認（等同於完全存取模式；計劃模式仍會詢問）。儲存為新工作階段的預設設定。',
-      bleTitle: '藍牙狀態通知',
-      bleDesc: '將 Agent 狀態 — 工作中、待確認、已完成 — 推送到已配對的 JCODE 藍牙裝置。重新啟動應用程式後生效。',
-      languageTitle: '語言',
-      languageDesc: '應用程式的介面語言。',
-    },
-    appearance: {
-      theme: '主題',
-      system: '跟隨系統',
-      systemDesc: '跟隨作業系統的淺色 / 深色設定',
-      dark: '深色',
-      light: '淺色',
-      active: '使用中',
-      terminalHint: '終端機介面有自己的主題 — 在終端機中用 {cmd} 指令切換。',
-    },
-    providers: {
-      title: '服務商',
-      add: '+ 新增服務商',
-      selectProvider: '選擇服務商',
-      selectModel: '選擇模型',
-      enterApiKey: '輸入 API Key',
-      apiKey: 'API Key',
-      baseUrl: 'Base URL（選填）',
-      saving: '儲存中…',
-      addBtn: '新增',
-      noneConfigured: '未設定任何服務商',
-      noneHint: '點擊上方的 {btn} 按鈕新增一個以開始使用。',
-      allConfigured: '所有服務商已設定',
-      remove: '移除服務商',
-      confirmRemove: '確定移除此服務商？',
-      testConnection: '測試連線',
-      testing: '檢測中…',
-      connected: '已連線',
-      connectFailed: '連線失敗',
-      loadingHint: '載入中…',
-      edit: '編輯服務商',
-      editProvider: '編輯服務商',
-      apiKeyUnchanged: 'API 金鑰（留空則保持不變）',
-      advanced: '進階',
-      endpoint: '自訂 Endpoint',
-      endpointPlaceholder: 'https://api.example.com/v1',
-      headers: '自訂 Header',
-      addHeader: '新增 Header',
-      headerKey: 'Header 名稱',
-      headerValue: '值',
-      headersHint: '留空值則保留已儲存的內容。',
-      // 自訂（非內建、OpenAI 相容）服務商。
-      custom: '自訂',
-      customProvider: '自訂服務商',
-      customProviderDesc: '任意 OpenAI 相容端點',
-      customId: '服務商 ID',
-      customIdPlaceholder: 'my-provider',
-      customIdRequired: '服務商 ID 不可為空',
-      customName: '顯示名稱',
-      customNamePlaceholder: '我的服務商',
-      customModelId: '模型 ID',
-      customModelPlaceholder: 'gpt-4o',
-      customModelRequired: '自訂服務商必須填寫模型 ID',
-      customUrlRequired: '自訂服務商必須填寫 Base URL',
-      customReasoning: '推理模型',
-      customReasoningDesc: '為此模型顯示推理強度控制項',
-      customModels: '自訂模型',
-      customModelsHint: '該服務商可路由的模型。',
-      addModel: '新增模型',
-      customModelNamePlaceholder: '顯示名稱（選填）',
-    },
-    mcp: {
-      title: 'MCP 伺服器',
-      add: '+ 新增伺服器',
-      addServer: '新增伺服器',
-      editServer: '編輯伺服器',
-      name: '名稱',
-      serverName: '伺服器名稱',
-      command: '指令',
-      args: '參數',
-      arguments: '參數',
-      env: '環境變數（每行 key=value）',
-      transport: '傳輸方式',
-      transportLocal: '本機',
-      url: 'URL',
-      headers: '標頭',
-      addHeader: '+ 新增標頭',
-      headerKey: '鍵',
-      headerValue: '值',
-      useOauth: '使用 OAuth（儲存後登入）',
-      oauthClientId: 'OAuth Client ID',
-      oauthClientSecret: 'OAuth Client Secret',
-      oauthScopes: 'Scopes',
-      timeout: '逾時（秒）',
-      status: {
-        disabled: '已停用',
-        connected: '已連線',
-        loginRequired: '需要登入',
-        error: '錯誤',
-        configured: '已設定',
-      },
-      login: '登入',
-      reauth: '重新驗證',
-      waitingBrowser: '等待瀏覽器…',
-      authenticated: '已驗證',
-      none: '未設定 MCP 伺服器。',
-      noneConfigured: '未設定 MCP 伺服器',
-      noneHint: '點擊上方的 {btn} 按鈕新增一個。',
-      save: '儲存',
-    },
-    skills: {
-      title: '技能',
-      add: '新增技能',
-      none: '未找到技能',
-      noneHint: '試試其他篩選或搜尋詞。',
-      search: '搜尋技能…',
-      filterAll: '全部',
-      filterLocal: '本機',
-      filterBuiltin: '內建',
-      builtin: '內建',
-      loadingHint: '載入中…',
-    },
-    ssh: {
-      title: 'SSH 環境',
-      connect: '連線到遠端主機',
-      currentEnv: '目前環境',
-      noneConfigured: '沒有已儲存的主機',
-      noneHint: '使用 {btn} 新增一個，或在 {config} 中預先設定主機。',
-      connectTo: '連線到 {name}',
-      host: '主機',
-      port: '連接埠',
-      user: '使用者',
-      password: '密碼',
-      key: '金鑰',
-      privateKeyPath: '私鑰路徑',
-      passphrase: '通關密語（選填）',
-      savedAlias: '儲存別名（選填）',
-      noAlias: '不使用別名',
-      saveAlias: '儲存別名',
-      remove: '移除',
-    },
-    channels: {
-      title: '通知管道',
-      scanQr: '用微信掃碼連線',
-      activate: '傳送一則訊息以啟用',
-      activateBody: '請立即向微信機器人傳送任意訊息以啟用通知。啟用後，您可在 24 小時內接收通知。',
-      wechat: '微信',
-      integration: 'iLink Bot 整合',
-      connect: '連線',
-      disconnect: '斷開連線',
-      loadingHint: '載入中…',
-      noneConfigured: '未設定任何管道',
-      noneHint: '在 {config} 中設定 {flag}。',
-      whenConnected: '連線後，jcode 會將審批請求和工作完成通知傳送至您的微信。',
-      enable: '啟用微信通知',
-      permission: '通知權限',
-      grant: '授予權限',
-      test: '傳送測試通知',
-      loginRequired: '需要登入',
-      login: '登入',
-    },
-    shortcuts: {
-      title: '鍵盤快捷鍵',
-      items: {
-        sendMessage: '傳送訊息',
-        newLine: '換行',
-        stopAgent: '停止 Agent',
-        slashCommands: '斜線指令',
-        focusInput: '聚焦輸入框',
-        newConversation: '新增對話',
-        openSettings: '開啟設定',
-        toggleTerminal: '切換終端機',
-      },
-    },
-    usageStats: {
-      title: '使用統計',
-      subtitle: '所有專案的 token 用量、工作階段與快取效率。',
-      lastNDays: '最近 {n} 天',
-      totalTokens: 'Token 用量',
-      cacheHitRate: '快取命中率',
-      mostUsedModel: '最常用模型',
-      share: '佔比 {pct}',
-      sessions: '工作階段',
-      turns: '對話輪次',
-      activeDays: '活躍天數',
-      streak: '連續 {n} 天',
-      tokenBreakdown: 'Token 構成',
-      tokenBreakdownHint: '快取包含於輸入、推理包含於輸出,各項不可直接相加',
-      promptTokens: '輸入',
-      cachedTokens: '快取',
-      completionTokens: '輸出',
-      reasoningTokens: '推理',
-      heatmap: '活躍熱力圖',
-      less: '較少',
-      more: '較多',
-      dailyTrend: '每日 Token',
-      byModel: '依模型',
-      byProject: '依專案',
-      noData: '尚無資料',
-      noActivity: '無活動',
-      turnsUnit: '輪',
-    },
-  },
-
-  contextCapacity: {
-    title: '上下文容量',
-    messages: '訊息',
-    systemTools: '系統工具',
-    mcpTools: 'MCP 工具',
-    skills: '技能',
-    systemPrompt: '系統提示詞',
-    cacheHitRate: '快取命中率',
-    freeSpace: '剩餘空間',
-    sessionTotal: '本對話累計',
-    estimated: '構成為估算值(約 4 位元組/token)。',
-  },
-
-  setup: {
-    step: '第 {n} 步：{label}',
-    chooseProvider: '選擇服務商',
-    enterApiKey: '輸入 API Key',
-    allSet: '一切就緒！',
-    startCoding: '開始編碼',
-    searchProviders: '搜尋服務商…',
-    noProviders: '未找到服務商',
-    selectProviderDesc: '選擇你想使用的 AI 服務商。',
-    loadingProviders: '載入服務商中…',
-    for: '用於',
-    envVar: '環境變數',
-    apiKey: 'API Key',
-    apiKeyPlaceholder: 'sk-…',
-    apiKeyRequired: 'API Key 不可為空',
-    baseUrl: 'Base URL（選填）',
-    testConnection: '測試連線',
-    checking: '檢測中…',
-    connected: '已連線',
-    settingUp: '設定中…',
-    retry: '重試',
-    savedTo: '設定已儲存到 ~/.jcode/config.json',
-    completeSetup: '完成設定',
-    usingModel: '使用 {provider} 的 {model}',
-    // 設定向導裡的自訂（OpenAI 相容）服務商入口。
-    customProvider: '自訂服務商',
-    customProviderDesc: '任意 OpenAI 相容端點',
-    customId: '服務商 ID',
-    customIdPlaceholder: 'my-provider',
-    customIdRequired: '服務商 ID 不可為空',
-    customName: '顯示名稱',
-    customNamePlaceholder: '我的服務商',
-    customModelId: '模型 ID',
-    customModelPlaceholder: 'gpt-4o',
-    customModelRequired: '自訂服務商必須填寫模型 ID',
-    customUrlRequired: '自訂服務商必須填寫 Base URL',
-    customReasoning: '推理模型',
-    // 進階設定面板。
-    advanced: '進階',
-    headers: '自訂請求標頭',
-    addHeader: '新增請求標頭',
-    headerKey: '鍵',
-    headerValue: '值',
-  },
-
-  wizard: {
-    title: '遠端連線',
-    chooseMethod: '選擇連線方式',
-    ssh: 'SSH',
-    docker: 'Docker',
-    container: '容器',
-    dockerConnection: 'Docker 容器',
-    dockerDesc: '選擇一個容器作為工作區。已停止的容器會自動為你啟動，在沒有任務使用時再次停止。',
-    selectContainer: '選擇一個容器',
-    noContainers: '此 Docker 主機上未找到容器。',
-    refresh: '重新整理',
-    running: '執行中',
-    stopped: '已停止',
-    remoteHost: '遠端主機',
-    comingSoon: '即將推出',
-    sshConnection: 'SSH 連線',
-    pickMethodDesc: '選擇進入遠端工作區的方式，然後填寫詳細資料。',
-    next: '下一步',
-    sshDesc: '金鑰/代理認證使用你本機的 SSH 金鑰；支援密碼和通關密語。',
-    auth: '認證',
-    hostPlaceholder: '1.2.3.4 或 example.com',
-    userPlaceholder: 'root',
-    dirDesc: '選擇此遠端工作區的工作目錄。',
-    backToConfig: '返回設定',
-    aliasNamePlaceholder: '名稱',
-    steps: {
-      chooseMethod: '選擇方式',
-      configure: '設定',
-      connecting: '連線中',
-      selectDirectory: '選擇目錄',
-    },
-    connecting: '連線中…',
-    connect: '連線',
-    selectDirectory: '選擇一個目錄',
-    loading: '載入中…',
-    noSubDirs: '無子目錄',
-    saveAlias: '儲存為別名',
-    useDirectory: '使用此目錄',
-  },
-
-  sidebar: {
-    hideArchived: '隱藏已封存工作',
-    showArchived: '顯示已封存工作',
-    noProjects: '暫無專案',
-    noTasks: '暫無工作',
-    running: '執行中',
-    newTaskHere: '在此新建工作',
-    filter: {
-      title: '篩選與排序',
-      status: '狀態',
-      statusActive: '使用中',
-      statusArchived: '已封存',
-      statusAll: '全部',
-      project: '專案',
-      projectAll: '全部',
-      lastActivity: '最近活動',
-      activityAll: '全部',
-      activityToday: '今天',
-      activityWeek: '近 7 天',
-      activityMonth: '近 30 天',
-      groupBy: '分組方式',
-      groupProject: '依專案',
-      groupDate: '依日期',
-      sortBy: '排序方式',
-      sortRecency: '最近活動',
-      sortName: '名稱',
-      sortCreated: '建立時間',
-      reset: '重設篩選',
-    },
-    dateBucket: {
-      today: '今天',
-      yesterday: '昨天',
-      week: '近 7 天',
-      month: '近 30 天',
-      older: '更早',
-    },
-    actions: {
-      pin: '釘選',
-      unpin: '取消釘選',
-      rename: '重新命名',
-      archive: '封存',
-      unarchive: '取消封存',
-      markRead: '標記為已讀',
-      markUnread: '標記為未讀',
-      delete: '刪除',
-      taskActions: '工作操作',
-    },
-    relativeTime: {
-      now: '剛剛',
-      minutes: '{n} 分鐘前',
-      hours: '{n} 小時前',
-      days: '{n} 天前',
-    },
-  },
-
-  topbar: {
-    panels: '面板',
-    panelsMenu: '面板選單 · {status}',
-    panelsHint: '面板 · {status}  (⇧⌘P 計劃 · ⇧⌘E 檔案 · ⇧⌘G 變更 · ⌘` 終端機)',
-    plan: '計劃',
-    files: '檔案',
-    changes: '變更',
-    terminal: '終端機',
-    status: {
-      running: '執行中',
-      connected: '已連線',
-      disconnected: '未連線',
-    },
-  },
-
-  rightPanel: {
-    plan: '計劃',
-    files: '檔案',
-    changes: '變更',
-    noTasks: '暫無工作',
-  },
-
-  diff: {
-    changes: '變更',
-    refresh: '↻ 重新整理',
-    noChanges: '無變更',
-    selectFile: '選擇一個檔案以查看變更',
-    modes: {
-      session: '對話',
-      working: '工作區',
-      staged: '暫存區',
-      branch: '分支',
-    },
-  },
-
-  branches: {
-    title: '分支',
-    none: '暫無分支',
-    create: '建立並切換到新分支',
-    createBtn: '建立',
-    search: '搜尋分支',
-    newName: '新分支名稱',
-    current: '分支：{name}',
-    confirmTitle: '有未提交的變更',
-    confirmIntro: '切換到「{branch}」會覆蓋以下本機檔案：',
-    confirmMore: '其餘 {count} 項',
-    confirmStash: '暫存並切換',
-    confirmDiscard: '丟棄並切換',
-    confirmCancel: '取消',
-    confirmHint: '暫存會保存你的變更（可用 git stash pop 還原）；丟棄將永久刪除這些檔案，包括未追蹤的檔案。',
-  },
-
-  projectSwitcher: {
-    title: '專案',
-    openFolder: '開啟資料夾',
-    ok: '確定',
-    loading: '載入中…',
-    noFolders: '未找到資料夾',
-    switching: '切換專案中…',
-    noProjects: '暫無專案',
-    removeProject: '移除專案',
-    openFolderBtn: '+ 開啟資料夾',
-    pathPlaceholder: '/path/to/folder',
-  },
-
-  workspace: {
-    none: '無工作區',
-    loading: '載入中…',
-    noFolders: '無資料夾',
-    open: '開啟',
-    nonePlural: '暫無工作區',
-    search: '搜尋工作區',
-    openFolder: '開啟資料夾',
-    openError: '開啟工作區失敗',
-  },
-
-  askUser: {
-    asking: '詢問中',
-    collapse: '摺疊',
-    skip: '略過',
-    other: '其他',
-    submit: '提交',
-    noAnswer: '無記錄的答案',
-    customPlaceholder: '在此輸入你的答案',
-  },
-
-  goal: {
-    clearGoal: '清除目標',
-    clear: '清除',
-    tokens: '{used} tokens',
-    tokensK: '{k}k tokens',
-    status: {
-      active: '進行中',
-      inProgress: '推進中',
-      completed: '已完成',
-      blocked: '已阻塞',
-    },
-    statusReport: '🎯 {status} — {objective}',
-    noGoal: '🎯 未設定目標。使用 /goal <目標> 來設定。',
-    cleared: '🎯 目標已清除。',
-  },
-
-  commandPalette: {
-    placeholder: '搜尋工作或執行指令…',
-    noResults: '無結果',
-    groups: {
-      actions: '操作',
-      tasks: '工作',
-    },
-    newTask: '新增工作',
-  },
-
-  notifications: {
-    taskFinished: 'jcode — 工作已完成',
-    taskFailed: 'jcode — 工作失敗',
-    approvalNeeded: 'jcode — 待確認',
-    finishedBody: 'Agent 已完成本次執行。',
-    approvalBody: 'Agent 正在等待你的確認。',
-  },
-
-  terminal: {
-    newTerminal: '新增終端機',
-    closePanel: '關閉面板',
-    closeTab: '關閉 {label}',
-    shell: '終端機 {n}',
-    failedCreate: '建立終端機失敗：{msg}',
-    sessionEnded: '[對話已結束]',
-  },
-
-  fileTree: {
-    root: '根目錄',
-    loading: '載入中…',
-    empty: '空目錄',
-    dirError: '無法載入此目錄。',
-    fileError: '無法開啟 {name}（可能是二進位檔案、過大或權限不足）。',
-  },
-
-  fileViewer: {
-    close: '關閉',
-  },
-
-  errors: {
-    timeout: '請求逾時，請重試。',
-    network: '網路錯誤，請檢查連線後重試。',
-    auth: '認證失敗，請在設定中檢查 API Key。',
-    rateLimit: '已被服務商限流，請稍候重試。',
-    provider: '模型服務商出現暫時性錯誤，請重試。',
-    switchFailed: '切換專案失敗',
-    remoteReconnect: '遠端工作區 — 請透過 SSH 精靈重新連線',
-    branchSwitch: '切換分支失敗',
-    generic: '發生錯誤。',
-    submitAnswer: '提交答案失敗：{detail}',
-    approval: '確認失敗：{detail}',
-    switchModel: '切換模型失敗：{detail}',
-    loadSession: '載入對話失敗：{detail}',
-  },
-}
diff --git a/web-react/src/styles.css b/web-react/src/styles.css
deleted file mode 100644
index bec56b0e..00000000
--- a/web-react/src/styles.css
+++ /dev/null
@@ -1,194 +0,0 @@
-@import 'tailwindcss';
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-/* jcode-ui ships its own tokens + component styles via jcode-ui/styles.css.
-   It brings in the base :root/.dark tokens, animations, and component-local CSS. */
-@import 'jcode-ui/styles.css';
-
-/* Generated themes (dracula, nord, midnight, solarized, etc.) — produced by
-   `go generate ./internal/theme/...` from palette.go. Defines
-   html[data-theme="<id>"] color overrides. Copied from web/src/styles/. */
-@import './styles/tokens.generated.css';
-
-/* ─── Layout sizing fallbacks ───
-   jcode-ui/styles.css should bring these in, but declare them at the app root
-   as a safety net so the sidebar/header never collapse if the workspace link
-   is stale or the package dist hasn't been rebuilt. Mirrors web/src/styles/tokens.css. */
-:root {
-  --sidebar-width: 20rem;
-  --sidebar-collapsed-width: 0px;
-  --header-height: 3.25rem;
-}
-
-/* ─── Workspace wrapper (包裹感) ───
-   The sidebar and the content area live inside the same inset surface, so the
-   shell reads as one wrapped workspace instead of a free sidebar beside a card. */
-.workspace-frame {
-  background: var(--color-surface);
-  border-radius: var(--radius-2xl);
-  margin: 48px 14px 14px;
-  box-shadow: none;
-  overflow: hidden;
-}
-
-.workspace-frame .sb-root {
-  position: relative;
-  border-right: 0;
-  border-top-left-radius: inherit;
-  border-bottom-left-radius: inherit;
-  overflow: hidden;
-}
-
-.workspace-frame .sb-root::after {
-  content: '';
-  position: absolute;
-  top: 12px;
-  right: 0;
-  bottom: 12px;
-  width: 1px;
-  background: var(--color-border);
-  pointer-events: none;
-}
-
-.workspace-main {
-  background: var(--color-surface);
-  border-radius: var(--radius-2xl);
-  overflow: hidden;
-}
-
-.chat-panel {
-  background: var(--color-surface);
-  min-width: 0;
-}
-
-.page-surface {
-  background: var(--color-surface);
-  min-width: 0;
-}
-
-.provider-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  line-height: 0;
-}
-.provider-icon svg {
-  width: 1em;
-  height: 1em;
-  display: block;
-}
-.provider-icon-fallback {
-  border-radius: 6px;
-  background: var(--color-secondary);
-  color: var(--color-muted-foreground);
-  font-weight: 600;
-  line-height: 1;
-}
-
-/* ─── New-task welcome ─── */
-.welcome {
-  position: relative;
-}
-.welcome-aura {
-  position: absolute;
-  z-index: 0;
-  top: 40%;
-  left: 50%;
-  width: min(640px, 78%);
-  height: 420px;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-  background: radial-gradient(
-    ellipse at center,
-    color-mix(in srgb, var(--color-primary) 13%, transparent),
-    transparent 70%
-  );
-  filter: blur(6px);
-}
-.welcome-hero,
-.welcome-composer {
-  position: relative;
-  z-index: 1;
-}
-.welcome-logo {
-  display: flex;
-  align-items: center;
-  margin-bottom: 26px;
-  font-family: var(--font-mono);
-  font-size: 26px;
-  font-weight: 700;
-  letter-spacing: 0;
-}
-.welcome-logo .wl-dim {
-  color: var(--color-muted-foreground);
-}
-.welcome-logo .wl-j {
-  color: var(--color-primary);
-  text-shadow: 0 0 22px color-mix(in srgb, var(--color-primary) 50%, transparent);
-}
-.welcome-logo .wl-fg {
-  color: var(--color-foreground);
-}
-.welcome-title {
-  margin-bottom: 12px;
-  color: var(--color-foreground);
-  font-family: var(--font-sans);
-  font-size: 30px;
-  font-weight: 600;
-  line-height: 1.1;
-  text-align: center;
-  text-wrap: balance;
-}
-.welcome-sub {
-  max-width: 24rem;
-  color: var(--color-muted-foreground);
-  font-size: 13.5px;
-  line-height: 1.6;
-  text-align: center;
-}
-.welcome-kbd {
-  padding: 1px 6px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-muted);
-  font-family: var(--font-mono);
-  font-size: 10px;
-}
-
-@media (max-width: 640px) {
-  .workspace-frame {
-    margin: 2px 8px 8px;
-  }
-  .welcome-title {
-    font-size: 24px;
-  }
-}
-
-/* ─── Title-bar drag strip (Tauri desktop only) ───
-   In the Tauri shell the window uses an overlay title bar; this reserves the
-   band the traffic-light buttons float over and lets the user drag the window.
-   In the browser it's hidden. Mirrors web/src/style.css. */
-.titlebar-drag {
-  display: none;
-}
-html.is-tauri-macos .app-shell,
-html.is-tauri-macos .settings-shell {
-  padding-top: 28px;
-}
-html.is-tauri-macos .setup-frame {
-  padding-top: 28px;
-}
-html.is-tauri-macos .workspace-frame {
-  margin-top: 20px;
-}
-html.is-tauri-macos .titlebar-drag {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 28px;
-  z-index: 45;
-}
diff --git a/web-react/src/styles/tokens.generated.css b/web-react/src/styles/tokens.generated.css
deleted file mode 100644
index 47c0887f..00000000
--- a/web-react/src/styles/tokens.generated.css
+++ /dev/null
@@ -1,234 +0,0 @@
-/* Code generated by internal/theme/gen; DO NOT EDIT. */
-/* Source of truth: internal/theme/palette.go — run `go generate ./internal/theme/...`. */
-
-/* jcode Dark (dark) */
-[data-theme="jcode-dark"] {
-  --color-primary: #FF8400;
-  --color-on-primary: #1A1A2E;
-  --color-accent: #06B6D4;
-  --color-border-focus: #FF8400;
-  --color-background: #111827;
-  --color-surface: #1A2333;
-  --color-sidebar-bg: #1A2333;
-  --color-muted: #1F2A3C;
-  --color-secondary: #1F2A3C;
-  --color-secondary-foreground: #E5E7EB;
-  --color-selection: #243047;
-  --color-foreground: #E5E7EB;
-  --color-muted-foreground: #9CA3AF;
-  --color-text-muted: #6B7280;
-  --color-border: #374151;
-  --color-success-fg: #10B981;
-  --color-success-bg: #0E2A20;
-  --color-warning-fg: #F59E0B;
-  --color-warning-bg: #2A1F0E;
-  --color-error-fg: #EF4444;
-  --color-error-bg: #2E1414;
-  --color-info-fg: #38BDF8;
-  --color-info-bg: #14202E;
-  --color-destructive: #F87171;
-  --color-plan-mode: #C084FC;
-  --color-subagent: #8B5CF6;
-  --color-role-user: #06B6D4;
-  --color-diff-added-fg: #34D399;
-  --color-diff-removed-fg: #F87171;
-}
-
-/* Midnight (dark) */
-[data-theme="midnight"] {
-  --color-primary: #FF8400;
-  --color-on-primary: #0A0E18;
-  --color-accent: #22D3EE;
-  --color-border-focus: #FF8400;
-  --color-background: #0A0E18;
-  --color-surface: #121828;
-  --color-sidebar-bg: #121828;
-  --color-muted: #1B2540;
-  --color-secondary: #1B2540;
-  --color-secondary-foreground: #E6EAF2;
-  --color-selection: #1B2540;
-  --color-foreground: #E6EAF2;
-  --color-muted-foreground: #9AA4BC;
-  --color-text-muted: #5C6680;
-  --color-border: #283149;
-  --color-success-fg: #34D399;
-  --color-success-bg: #0B2620;
-  --color-warning-fg: #FBBF24;
-  --color-warning-bg: #2A2310;
-  --color-error-fg: #F87171;
-  --color-error-bg: #2A1218;
-  --color-info-fg: #60A5FA;
-  --color-info-bg: #10202E;
-  --color-destructive: #FB7185;
-  --color-plan-mode: #C4B5FD;
-  --color-subagent: #A78BFA;
-  --color-role-user: #22D3EE;
-  --color-diff-added-fg: #4ADE80;
-  --color-diff-removed-fg: #FB7185;
-}
-
-/* Dracula (dark) */
-[data-theme="dracula"] {
-  --color-primary: #FFB86C;
-  --color-on-primary: #282A36;
-  --color-accent: #8BE9FD;
-  --color-border-focus: #FFB86C;
-  --color-background: #282A36;
-  --color-surface: #343746;
-  --color-sidebar-bg: #343746;
-  --color-muted: #44475A;
-  --color-secondary: #44475A;
-  --color-secondary-foreground: #F8F8F2;
-  --color-selection: #44475A;
-  --color-foreground: #F8F8F2;
-  --color-muted-foreground: #C7C9D1;
-  --color-text-muted: #6272A4;
-  --color-border: #44475A;
-  --color-success-fg: #50FA7B;
-  --color-success-bg: #22372B;
-  --color-warning-fg: #F1FA8C;
-  --color-warning-bg: #3A3A1F;
-  --color-error-fg: #FF5555;
-  --color-error-bg: #3A2230;
-  --color-info-fg: #8BE9FD;
-  --color-info-bg: #1F3A3D;
-  --color-destructive: #FF5555;
-  --color-plan-mode: #BD93F9;
-  --color-subagent: #BD93F9;
-  --color-role-user: #8BE9FD;
-  --color-diff-added-fg: #50FA7B;
-  --color-diff-removed-fg: #FF5555;
-}
-
-/* Nord (dark) */
-[data-theme="nord-dark"] {
-  --color-primary: #D08770;
-  --color-on-primary: #2E3440;
-  --color-accent: #88C0D0;
-  --color-border-focus: #D08770;
-  --color-background: #2E3440;
-  --color-surface: #3B4252;
-  --color-sidebar-bg: #3B4252;
-  --color-muted: #434C5E;
-  --color-secondary: #434C5E;
-  --color-secondary-foreground: #ECEFF4;
-  --color-selection: #434C5E;
-  --color-foreground: #ECEFF4;
-  --color-muted-foreground: #D8DEE9;
-  --color-text-muted: #7B88A1;
-  --color-border: #434C5E;
-  --color-success-fg: #A3BE8C;
-  --color-success-bg: #3B4A3A;
-  --color-warning-fg: #EBCB8B;
-  --color-warning-bg: #48432E;
-  --color-error-fg: #BF616A;
-  --color-error-bg: #4A3A3D;
-  --color-info-fg: #81A1C1;
-  --color-info-bg: #2E3A48;
-  --color-destructive: #BF616A;
-  --color-plan-mode: #B48EAD;
-  --color-subagent: #B48EAD;
-  --color-role-user: #88C0D0;
-  --color-diff-added-fg: #A3BE8C;
-  --color-diff-removed-fg: #BF616A;
-}
-
-/* jcode Light (light) */
-[data-theme="jcode-light"] {
-  --color-primary: #FF8400;
-  --color-on-primary: #FFFFFF;
-  --color-accent: #0891B2;
-  --color-border-focus: #FF8400;
-  --color-background: #F2F3F0;
-  --color-surface: #FFFFFF;
-  --color-sidebar-bg: #FFFFFF;
-  --color-muted: #E7E8E5;
-  --color-secondary: #E7E8E5;
-  --color-secondary-foreground: #111111;
-  --color-selection: #E7E8E5;
-  --color-foreground: #111111;
-  --color-muted-foreground: #666666;
-  --color-text-muted: #8A8C88;
-  --color-border: #CBCCC9;
-  --color-success-fg: #004D1A;
-  --color-success-bg: #DFE6E1;
-  --color-warning-fg: #804200;
-  --color-warning-bg: #E9E3D8;
-  --color-error-fg: #8C1C00;
-  --color-error-bg: #E5DCDA;
-  --color-info-fg: #000066;
-  --color-info-bg: #DFDFE6;
-  --color-destructive: #D93C15;
-  --color-plan-mode: #7C3AED;
-  --color-subagent: #6D28D9;
-  --color-role-user: #0891B2;
-  --color-diff-added-fg: #004D1A;
-  --color-diff-removed-fg: #8C1C00;
-}
-
-/* GitHub Light (light) */
-[data-theme="github-light"] {
-  --color-primary: #FF8400;
-  --color-on-primary: #FFFFFF;
-  --color-accent: #0969DA;
-  --color-border-focus: #FF8400;
-  --color-background: #FFFFFF;
-  --color-surface: #F6F8FA;
-  --color-sidebar-bg: #F6F8FA;
-  --color-muted: #EAEEF2;
-  --color-secondary: #EAEEF2;
-  --color-secondary-foreground: #1F2328;
-  --color-selection: #DDF4FF;
-  --color-foreground: #1F2328;
-  --color-muted-foreground: #656D76;
-  --color-text-muted: #8C959F;
-  --color-border: #D0D7DE;
-  --color-success-fg: #1A7F37;
-  --color-success-bg: #DAFBE1;
-  --color-warning-fg: #9A6700;
-  --color-warning-bg: #FFF8C5;
-  --color-error-fg: #CF222E;
-  --color-error-bg: #FFEBE9;
-  --color-info-fg: #0969DA;
-  --color-info-bg: #DDF4FF;
-  --color-destructive: #CF222E;
-  --color-plan-mode: #8250DF;
-  --color-subagent: #8250DF;
-  --color-role-user: #0969DA;
-  --color-diff-added-fg: #1A7F37;
-  --color-diff-removed-fg: #CF222E;
-}
-
-/* Solarized Light (light) */
-[data-theme="solarized-light"] {
-  --color-primary: #CB4B16;
-  --color-on-primary: #FDF6E3;
-  --color-accent: #268BD2;
-  --color-border-focus: #CB4B16;
-  --color-background: #FDF6E3;
-  --color-surface: #EEE8D5;
-  --color-sidebar-bg: #EEE8D5;
-  --color-muted: #E3DCC4;
-  --color-secondary: #E3DCC4;
-  --color-secondary-foreground: #073642;
-  --color-selection: #E3DCC4;
-  --color-foreground: #073642;
-  --color-muted-foreground: #586E75;
-  --color-text-muted: #93A1A1;
-  --color-border: #D6CFB7;
-  --color-success-fg: #5A7000;
-  --color-success-bg: #E3E9C8;
-  --color-warning-fg: #A57A00;
-  --color-warning-bg: #EEE3C0;
-  --color-error-fg: #DC322F;
-  --color-error-bg: #F2DAD3;
-  --color-info-fg: #268BD2;
-  --color-info-bg: #D9E6EF;
-  --color-destructive: #DC322F;
-  --color-plan-mode: #6C71C4;
-  --color-subagent: #6C71C4;
-  --color-role-user: #268BD2;
-  --color-diff-added-fg: #5A7000;
-  --color-diff-removed-fg: #DC322F;
-}
-
diff --git a/web-react/tsconfig.app.json b/web-react/tsconfig.app.json
deleted file mode 100644
index 786384d7..00000000
--- a/web-react/tsconfig.app.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "verbatimModuleSyntax": false,
-
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true
-  },
-  "include": ["src"]
-}
diff --git a/web-react/tsconfig.json b/web-react/tsconfig.json
deleted file mode 100644
index 1ffef600..00000000
--- a/web-react/tsconfig.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}
diff --git a/web-react/tsconfig.node.json b/web-react/tsconfig.node.json
deleted file mode 100644
index 1199ad65..00000000
--- a/web-react/tsconfig.node.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "strict": true,
-    "esModuleInterop": true
-  },
-  "include": ["vite.config.ts"]
-}
diff --git a/web-react/vite.config.ts b/web-react/vite.config.ts
deleted file mode 100644
index ebce3d78..00000000
--- a/web-react/vite.config.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
-import { fileURLToPath, URL } from 'node:url'
-
-// mirroring web/vite.config.ts: builds into ../internal/web/dist (consumed by the
-// Go embed.FS and the Tauri shell), and proxies /api → the Go server on :8080 in dev.
-export default defineConfig({
-  plugins: [tailwindcss(), react()],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-    },
-  },
-  build: {
-    // NOTE: still points at the Vue dist during the migration so both builds can
-    // coexist. The switch-over (Makefile build-web + this outDir) happens in the
-    // final phase once the React app is feature-complete.
-    outDir: '../internal/web/dist-react',
-    emptyOutDir: true,
-  },
-  server: {
-    // Pinned to 5173 to match the Tauri shell's devUrl (see desktop/src-tauri/
-    // tauri.react.conf.json). The Vue app also defaults to 5173 — only one runs
-    // at a time, so no conflict in practice.
-    port: 5173,
-    strictPort: true,
-    proxy: {
-      '/api': {
-        target: 'http://127.0.0.1:8080',
-        ws: true,
-      },
-    },
-  },
-})
diff --git a/web/.editorconfig b/web/.editorconfig
deleted file mode 100644
index 3b510aa6..00000000
--- a/web/.editorconfig
+++ /dev/null
@@ -1,8 +0,0 @@
-[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
-charset = utf-8
-indent_size = 2
-indent_style = space
-insert_final_newline = true
-trim_trailing_whitespace = true
-end_of_line = lf
-max_line_length = 100
diff --git a/web/.gitattributes b/web/.gitattributes
deleted file mode 100644
index 6313b56c..00000000
--- a/web/.gitattributes
+++ /dev/null
@@ -1 +0,0 @@
-* text=auto eol=lf
diff --git a/web/.gitignore b/web/.gitignore
deleted file mode 100644
index cd68f140..00000000
--- a/web/.gitignore
+++ /dev/null
@@ -1,39 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-.DS_Store
-dist
-dist-ssr
-coverage
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-*.tsbuildinfo
-
-.eslintcache
-
-# Cypress
-/cypress/videos/
-/cypress/screenshots/
-
-# Vitest
-__screenshots__/
-
-# Vite
-*.timestamp-*-*.mjs
diff --git a/web/.oxfmtrc.json b/web/.oxfmtrc.json
deleted file mode 100644
index 4bddb675..00000000
--- a/web/.oxfmtrc.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "$schema": "./node_modules/oxfmt/configuration_schema.json",
-  "semi": false,
-  "singleQuote": true
-}
diff --git a/web/.oxlintrc.json b/web/.oxlintrc.json
deleted file mode 100644
index d5648b96..00000000
--- a/web/.oxlintrc.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "$schema": "./node_modules/oxlint/configuration_schema.json",
-  "plugins": ["eslint", "typescript", "unicorn", "oxc", "vue"],
-  "env": {
-    "browser": true
-  },
-  "categories": {
-    "correctness": "error"
-  }
-}
diff --git a/web/.vscode/extensions.json b/web/.vscode/extensions.json
deleted file mode 100644
index 55ad03cf..00000000
--- a/web/.vscode/extensions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "recommendations": [
-    "Vue.volar",
-    "dbaeumer.vscode-eslint",
-    "EditorConfig.EditorConfig",
-    "oxc.oxc-vscode"
-  ]
-}
diff --git a/web/README.md b/web/README.md
deleted file mode 100644
index 851b0447..00000000
--- a/web/README.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# web
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Recommended Browser Setup
-
-- Chromium-based browsers (Chrome, Edge, Brave, etc.):
-  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
-  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
-- Firefox:
-  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
-  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
-
-```sh
-pnpm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-pnpm dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-pnpm build
-```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-pnpm lint
-```
diff --git a/web/env.d.ts b/web/env.d.ts
deleted file mode 100644
index 11f02fe2..00000000
--- a/web/env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/web/eslint.config.ts b/web/eslint.config.ts
deleted file mode 100644
index 89fdc89a..00000000
--- a/web/eslint.config.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { globalIgnores } from 'eslint/config'
-import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
-import pluginVue from 'eslint-plugin-vue'
-import pluginOxlint from 'eslint-plugin-oxlint'
-import skipFormatting from 'eslint-config-prettier/flat'
-
-// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
-// import { configureVueProject } from '@vue/eslint-config-typescript'
-// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
-// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
-
-export default defineConfigWithVueTs(
-  {
-    name: 'app/files-to-lint',
-    files: ['**/*.{vue,ts,mts,tsx}'],
-  },
-
-  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
-
-  ...pluginVue.configs['flat/essential'],
-  vueTsConfigs.recommended,
-
-  ...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'),
-
-  skipFormatting,
-)
diff --git a/web/index.html b/web/index.html
index d89c3a1b..d5c9380a 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html>
-<html lang="en" class="dark">
+<!doctype html>
+<html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <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">
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>jcode</title>
     <style>
       .boot-screen {
         position: fixed;
@@ -66,54 +66,29 @@
         }
       }
     </style>
+    <!-- Pre-mount theme resolution: apply the saved theme BEFORE the bundle loads
+         so there's no flash of the wrong theme. Mirrors web/index.html. -->
     <script>
-      // Pre-mount theme application to avoid a flash before Vue boots. Mirrors
-      // useTheme.ts; the post-mount applyTheme() corrects any edge case using
-      // the real theme registry. This runs before the module bundle, so it
-      // can't import the registry: light theme ids end in "-light" and dark
-      // ids do not — a convention enforced by TestLightThemeNamingConvention
-      // in internal/theme, which keeps the /-light$/ check below correct.
-      (function () {
+      ;(function () {
         try {
-          var v = localStorage.getItem('jcode_theme');
-          var id;
-          if (!v || v === 'system') id = matchMedia('(prefers-color-scheme: dark)').matches ? 'jcode-dark' : 'jcode-light';
-          else if (v === 'dark') id = 'jcode-dark';
-          else if (v === 'light') id = 'jcode-light';
-          else id = v;
-          var html = document.documentElement;
-          html.setAttribute('data-theme', id);
-          html.classList.toggle('dark', !/-light$/.test(id));
-        } catch (e) {}
-
-        // Pre-mount <html lang> application to match the stored UI locale. i18n
-        // re-applies this after boot, but setting it early avoids a flash and
-        // keeps screen readers / translation prompts correct from first paint.
-        try {
-          var map = { en: 'en', 'zh-Hans': 'zh-Hans', 'zh-Hant': 'zh-Hant', ja: 'ja', ko: 'ko' };
-          var loc = localStorage.getItem('jcode_locale');
-          if (!loc && navigator.languages) {
-            for (var i = 0; i < navigator.languages.length; i++) {
-              var l = (navigator.languages[i] || '').toLowerCase();
-              if (l === 'zh' || l.indexOf('zh-cn') === 0 || l.indexOf('zh-sg') === 0 || l.indexOf('zh-hans') === 0) { loc = 'zh-Hans'; break; }
-              if (l.indexOf('zh-tw') === 0 || l.indexOf('zh-hk') === 0 || l.indexOf('zh-mo') === 0 || l.indexOf('zh-hant') === 0) { loc = 'zh-Hant'; break; }
-              var p = l.split('-')[0];
-              if (p === 'ja') { loc = 'ja'; break; }
-              if (p === 'ko') { loc = 'ko'; break; }
-              if (p === 'en') { loc = 'en'; break; }
-            }
+          var stored = localStorage.getItem('jcode_theme') || 'system'
+          var dark =
+            stored === 'dark' ||
+            stored === 'jcode-dark' ||
+            (stored === 'system' && matchMedia('(prefers-color-scheme: dark)').matches)
+          var cls = document.documentElement.classList
+          cls.toggle('dark', dark)
+          if (stored && stored !== 'system' && stored !== 'light' && stored !== 'dark') {
+            document.documentElement.setAttribute('data-theme', stored)
           }
-          if (loc && map[loc]) document.documentElement.lang = map[loc];
-        } catch (e) {}
-      })();
+        } catch (e) {
+          /* noop */
+        }
+      })()
     </script>
-    <title>JCODE — Coding Assistant</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
   </head>
-  <body style="background: var(--color-background); color: var(--color-foreground);" class="antialiased">
-    <div id="app">
+  <body>
+    <div id="root">
       <div class="boot-screen" role="status" aria-live="polite">
         <div class="boot-card">
           <div class="boot-logo"><span>[</span><b>J</b>CODE<span>]</span></div>
@@ -122,6 +97,6 @@
         </div>
       </div>
     </div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/web/package.json b/web/package.json
index fb8b3f37..11f9ade2 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,63 +1,46 @@
 {
   "name": "web",
-  "version": "0.0.0",
   "private": true,
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
+    "build": "tsc -b && vite build",
     "preview": "vite preview",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --build",
-    "lint": "run-s lint:*",
-    "lint:oxlint": "oxlint . --fix",
-    "lint:eslint": "eslint . --fix --cache",
-    "format": "oxfmt src/"
+    "typecheck": "tsc --noEmit -p tsconfig.app.json"
   },
   "dependencies": {
-    "@headlessui/vue": "^1.7.23",
-    "@heroicons/vue": "^2.2.0",
+    "@heroicons/react": "^2.2.0",
     "@lobehub/icons-static-svg": "^1.91.0",
-    "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.2.2",
+    "@reduxjs/toolkit": "^2.8.2",
     "@tauri-apps/api": "^2.9.0",
-    "@tauri-apps/plugin-dialog": "^2.4.0",
-    "@tauri-apps/plugin-notification": "^2.3.1",
-    "@tauri-apps/plugin-opener": "^2.5.0",
-    "@types/qrcode": "^1.5.6",
-    "@xterm/addon-fit": "^0.11.0",
-    "@xterm/addon-web-links": "^0.12.0",
-    "@xterm/xterm": "^6.0.0",
-    "dompurify": "^3.4.11",
+    "@tauri-apps/plugin-dialog": "^2.0.0",
+    "@tauri-apps/plugin-notification": "^2.0.0",
+    "@tauri-apps/plugin-opener": "^2.0.0",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/addon-web-links": "^0.11.0",
+    "@xterm/xterm": "^5.5.0",
+    "dompurify": "^3.2.4",
     "highlight.js": "^11.11.1",
-    "marked": "^18.0.2",
-    "marked-highlight": "^2.2.4",
-    "pinia": "^3.0.4",
+    "jcode-ui": "workspace:*",
+    "jcode-ui-core": "workspace:*",
+    "marked": "^18.0.0",
+    "marked-highlight": "^2.2.2",
     "qrcode": "^1.5.4",
-    "vue": "^3.5.31",
-    "vue-i18n": "^11.4.6"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^15.6.1",
+    "react-redux": "^9.2.0",
+    "i18next": "^25.3.2"
   },
   "devDependencies": {
-    "@tsconfig/node24": "^24.0.4",
-    "@types/node": "^24.12.0",
-    "@vitejs/plugin-vue": "^6.0.5",
-    "@vitejs/plugin-vue-jsx": "^5.1.5",
-    "@vue/eslint-config-typescript": "^14.7.0",
-    "@vue/tsconfig": "^0.9.1",
-    "eslint": "^10.1.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-oxlint": "~1.57.0",
-    "eslint-plugin-vue": "~10.8.0",
-    "jiti": "^2.6.1",
-    "npm-run-all2": "^8.0.4",
-    "oxfmt": "^0.42.0",
-    "oxlint": "~1.57.0",
-    "tailwindcss": "^4.2.2",
-    "typescript": "~6.0.0",
-    "vite": "^8.0.16",
-    "vue-tsc": "^3.2.6"
-  },
-  "engines": {
-    "node": "^20.19.0 || >=22.12.0"
+    "@tailwindcss/vite": "^4.1.0",
+    "@types/qrcode": "^1.5.5",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4.1.0",
+    "typescript": "^5.9.2",
+    "vite": "^6.0.7"
   }
 }
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
deleted file mode 100644
index 5a112b05..00000000
--- a/web/pnpm-lock.yaml
+++ /dev/null
@@ -1,3633 +0,0 @@
-lockfileVersion: '9.0'
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
-overrides:
-  shell-quote: '>=1.8.4'
-  '@babel/core': ^7.29.6
-
-importers:
-
-  .:
-    dependencies:
-      '@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))
-      '@lobehub/icons-static-svg':
-        specifier: ^1.91.0
-        version: 1.91.0
-      '@tailwindcss/typography':
-        specifier: ^0.5.19
-        version: 0.5.19(tailwindcss@4.2.2)
-      '@tailwindcss/vite':
-        specifier: ^4.2.2
-        version: 4.2.2(vite@8.1.0(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3))
-      '@tauri-apps/api':
-        specifier: ^2.9.0
-        version: 2.11.1
-      '@tauri-apps/plugin-dialog':
-        specifier: ^2.4.0
-        version: 2.7.1
-      '@tauri-apps/plugin-notification':
-        specifier: ^2.3.1
-        version: 2.3.3
-      '@tauri-apps/plugin-opener':
-        specifier: ^2.5.0
-        version: 2.5.4
-      '@types/qrcode':
-        specifier: ^1.5.6
-        version: 1.5.6
-      '@xterm/addon-fit':
-        specifier: ^0.11.0
-        version: 0.11.0
-      '@xterm/addon-web-links':
-        specifier: ^0.12.0
-        version: 0.12.0
-      '@xterm/xterm':
-        specifier: ^6.0.0
-        version: 6.0.0
-      dompurify:
-        specifier: ^3.4.11
-        version: 3.4.11
-      highlight.js:
-        specifier: ^11.11.1
-        version: 11.11.1
-      marked:
-        specifier: ^18.0.2
-        version: 18.0.2
-      marked-highlight:
-        specifier: ^2.2.4
-        version: 2.2.4(marked@18.0.2)
-      pinia:
-        specifier: ^3.0.4
-        version: 3.0.4(typescript@6.0.2)(vue@3.5.32(typescript@6.0.2))
-      qrcode:
-        specifier: ^1.5.4
-        version: 1.5.4
-      vue:
-        specifier: ^3.5.31
-        version: 3.5.32(typescript@6.0.2)
-      vue-i18n:
-        specifier: ^11.4.6
-        version: 11.4.6(vue@3.5.32(typescript@6.0.2))
-    devDependencies:
-      '@tsconfig/node24':
-        specifier: ^24.0.4
-        version: 24.0.4
-      '@types/node':
-        specifier: ^24.12.0
-        version: 24.12.2
-      '@vitejs/plugin-vue':
-        specifier: ^6.0.5
-        version: 6.0.6(vite@8.1.0(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3))(vue@3.5.32(typescript@6.0.2))
-      '@vitejs/plugin-vue-jsx':
-        specifier: ^5.1.5
-        version: 5.1.5(vite@8.1.0(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3))(vue@3.5.32(typescript@6.0.2))
-      '@vue/eslint-config-typescript':
-        specifier: ^14.7.0
-        version: 14.7.0(eslint-plugin-vue@10.8.0(@typescript-eslint/parser@8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(vue-eslint-parser@10.4.0(eslint@10.2.0(jiti@2.6.1))))(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      '@vue/tsconfig':
-        specifier: ^0.9.1
-        version: 0.9.1(typescript@6.0.2)(vue@3.5.32(typescript@6.0.2))
-      eslint:
-        specifier: ^10.1.0
-        version: 10.2.0(jiti@2.6.1)
-      eslint-config-prettier:
-        specifier: ^10.1.8
-        version: 10.1.8(eslint@10.2.0(jiti@2.6.1))
-      eslint-plugin-oxlint:
-        specifier: ~1.57.0
-        version: 1.57.0(oxlint@1.57.0)
-      eslint-plugin-vue:
-        specifier: ~10.8.0
-        version: 10.8.0(@typescript-eslint/parser@8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(vue-eslint-parser@10.4.0(eslint@10.2.0(jiti@2.6.1)))
-      jiti:
-        specifier: ^2.6.1
-        version: 2.6.1
-      npm-run-all2:
-        specifier: ^8.0.4
-        version: 8.0.4
-      oxfmt:
-        specifier: ^0.42.0
-        version: 0.42.0
-      oxlint:
-        specifier: ~1.57.0
-        version: 1.57.0
-      tailwindcss:
-        specifier: ^4.2.2
-        version: 4.2.2
-      typescript:
-        specifier: ~6.0.0
-        version: 6.0.2
-      vite:
-        specifier: ^8.0.16
-        version: 8.1.0(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3)
-      vue-tsc:
-        specifier: ^3.2.6
-        version: 3.2.6(typescript@6.0.2)
-
-packages:
-
-  '@babel/code-frame@7.29.0':
-    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/code-frame@7.29.7':
-    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/compat-data@7.29.7':
-    resolution: {integrity: sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/core@7.29.7':
-    resolution: {integrity: sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/generator@7.29.1':
-    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/generator@7.29.7':
-    resolution: {integrity: sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-annotate-as-pure@7.27.3':
-    resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-compilation-targets@7.29.7':
-    resolution: {integrity: sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-create-class-features-plugin@7.28.6':
-    resolution: {integrity: sha512-dTOdvsjnG3xNT9Y0AUg1wAl38y+4Rl4sf9caSQZOXdNqVn+H+HbbJ4IyyHaIqNR6SW9oJpA/RuRjsjCw2IdIow==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.29.6
-
-  '@babel/helper-globals@7.28.0':
-    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-globals@7.29.7':
-    resolution: {integrity: sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-member-expression-to-functions@7.28.5':
-    resolution: {integrity: sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-imports@7.28.6':
-    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-imports@7.29.7':
-    resolution: {integrity: sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-transforms@7.29.7':
-    resolution: {integrity: sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.29.6
-
-  '@babel/helper-optimise-call-expression@7.27.1':
-    resolution: {integrity: sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-plugin-utils@7.28.6':
-    resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-replace-supers@7.28.6':
-    resolution: {integrity: sha512-mq8e+laIk94/yFec3DxSjCRD2Z0TAjhVbEJY3UQrlwVo15Lmt7C2wAUbK4bjnTs4APkwsYLTahXRraQXhb1WCg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.29.6
-
-  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
-    resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-string-parser@7.27.1':
-    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-string-parser@7.29.7':
-    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-validator-identifier@7.28.5':
-    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-validator-identifier@7.29.7':
-    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-validator-option@7.29.7':
-    resolution: {integrity: sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helpers@7.29.7':
-    resolution: {integrity: sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/parser@7.29.2':
-    resolution: {integrity: sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
-  '@babel/parser@7.29.7':
-    resolution: {integrity: sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
-  '@babel/plugin-syntax-jsx@7.28.6':
-    resolution: {integrity: sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.29.6
-
-  '@babel/plugin-syntax-typescript@7.28.6':
-    resolution: {integrity: sha512-+nDNmQye7nlnuuHDboPbGm00Vqg3oO8niRRL27/4LYHUsHYh0zJ1xWOz0uRwNFmM1Avzk8wZbc6rdiYhomzv/A==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.29.6
-
-  '@babel/plugin-transform-typescript@7.28.6':
-    resolution: {integrity: sha512-0YWL2RFxOqEm9Efk5PvreamxPME8OyY0wM5wh5lHjF+VtVhdneCWGzZeSqzOfiobVqQaNCd2z0tQvnI9DaPWPw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.29.6
-
-  '@babel/template@7.28.6':
-    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/template@7.29.7':
-    resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/traverse@7.29.0':
-    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/traverse@7.29.7':
-    resolution: {integrity: sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/types@7.29.0':
-    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/types@7.29.7':
-    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
-    engines: {node: '>=6.9.0'}
-
-  '@emnapi/core@1.11.1':
-    resolution: {integrity: sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==}
-
-  '@emnapi/runtime@1.11.1':
-    resolution: {integrity: sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==}
-
-  '@emnapi/wasi-threads@1.2.2':
-    resolution: {integrity: sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==}
-
-  '@eslint-community/eslint-utils@4.9.1':
-    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-
-  '@eslint-community/regexpp@4.12.2':
-    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-
-  '@eslint/config-array@0.23.5':
-    resolution: {integrity: sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA==}
-    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
-
-  '@eslint/config-helpers@0.5.5':
-    resolution: {integrity: sha512-eIJYKTCECbP/nsKaaruF6LW967mtbQbsw4JTtSVkUQc9MneSkbrgPJAbKl9nWr0ZeowV8BfsarBmPpBzGelA2w==}
-    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
-
-  '@eslint/core@1.2.1':
-    resolution: {integrity: sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==}
-    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
-
-  '@eslint/object-schema@3.0.5':
-    resolution: {integrity: sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==}
-    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
-
-  '@eslint/plugin-kit@0.7.1':
-    resolution: {integrity: sha512-rZAP3aVgB9ds9KOeUSL+zZ21hPmo8dh6fnIFwRQj5EAZl9gzR7wxYbYXYysAM8CTqGmUGyp2S4kUdV17MnGuWQ==}
-    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
-
-  '@headlessui/vue@1.7.23':
-    resolution: {integrity: sha512-JzdCNqurrtuu0YW6QaDtR2PIYCKPUWq28csDyMvN4zmGccmE7lz40Is6hc3LA4HFeCI7sekZ/PQMTNmn9I/4Wg==}
-    engines: {node: '>=10'}
-    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'}
-
-  '@humanfs/node@0.16.7':
-    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
-    engines: {node: '>=18.18.0'}
-
-  '@humanwhocodes/module-importer@1.0.1':
-    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
-    engines: {node: '>=12.22'}
-
-  '@humanwhocodes/retry@0.4.3':
-    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
-    engines: {node: '>=18.18'}
-
-  '@intlify/core-base@11.4.6':
-    resolution: {integrity: sha512-EOeHO95XESK9IFHgHeZXunsM/WBAoCA0DlaWODvx14vKmetAuS97t+l6Xe9hTUqntPpF93vtVSjjUDafw3wXMw==}
-    engines: {node: '>= 22'}
-
-  '@intlify/devtools-types@11.4.6':
-    resolution: {integrity: sha512-wowQPpNem56b2d43IJmqbrzG2FeBKe5f/kUGlpNuBmXs6OSqncF8m1+1lxHuW8ISZJF0ma2RkW3iLkw0g0G4VA==}
-    engines: {node: '>= 22'}
-
-  '@intlify/message-compiler@11.4.6':
-    resolution: {integrity: sha512-5nj3jULqeTAC1WovwMs1LQWgatTa2pM/rXN9T3XW8rdOtXW9ZF6/GLSNFTKDQmPLwclhPdgUWLJ/4w3fMeeC/Q==}
-    engines: {node: '>= 22'}
-
-  '@intlify/shared@11.4.6':
-    resolution: {integrity: sha512-m1p1HHAMLhqSpTRH7VnXdrN0CQ4y+9vunFkpLkbD8soIuBsnQdawZXqMCgvwI2UVF9Ww7sVaw7g9tV2VO7shoA==}
-    engines: {node: '>= 22'}
-
-  '@jridgewell/gen-mapping@0.3.13':
-    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
-
-  '@jridgewell/remapping@2.3.5':
-    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
-
-  '@jridgewell/resolve-uri@3.1.2':
-    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
-    engines: {node: '>=6.0.0'}
-
-  '@jridgewell/sourcemap-codec@1.5.5':
-    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
-
-  '@jridgewell/trace-mapping@0.3.31':
-    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
-
-  '@lobehub/icons-static-svg@1.91.0':
-    resolution: {integrity: sha512-ZDflEq0uUvAkH4WK4h3qNvvY09ts4OqUb5azD7A0xKfcuYhffGwB1Q/As2RguZYq4Gh4v925CJ8iodiClzc4zw==}
-
-  '@napi-rs/wasm-runtime@1.1.5':
-    resolution: {integrity: sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q==}
-    peerDependencies:
-      '@emnapi/core': ^1.7.1
-      '@emnapi/runtime': ^1.7.1
-
-  '@nodelib/fs.scandir@2.1.5':
-    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
-    engines: {node: '>= 8'}
-
-  '@nodelib/fs.stat@2.0.5':
-    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
-    engines: {node: '>= 8'}
-
-  '@nodelib/fs.walk@1.2.8':
-    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
-    engines: {node: '>= 8'}
-
-  '@oxc-project/types@0.137.0':
-    resolution: {integrity: sha512-WT+Gb24i8hmvo85AIv2oEYouEXkRlKAlT9WaCa3TfLgNCN+GhrJOGZuIlMouAh38Qe4QOx26eUOVsq70qXrywA==}
-
-  '@oxfmt/binding-android-arm-eabi@0.42.0':
-    resolution: {integrity: sha512-dsqPTYsozeokRjlrt/b4E7Pj0z3eS3Eg74TWQuuKbjY4VttBmA88rB7d50Xrd+TZ986qdXCNeZRPEzZHAe+jow==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [android]
-
-  '@oxfmt/binding-android-arm64@0.42.0':
-    resolution: {integrity: sha512-t+aAjHxcr5eOBphFHdg1ouQU9qmZZoRxnX7UOJSaTwSoKsb6TYezNKO0YbWytGXCECObRqNcUxPoPr0KaraAIg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [android]
-
-  '@oxfmt/binding-darwin-arm64@0.42.0':
-    resolution: {integrity: sha512-ulpSEYMKg61C5bRMZinFHrKJYRoKGVbvMEXA5zM1puX3O9T6Q4XXDbft20yrDijpYWeuG59z3Nabt+npeTsM1A==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@oxfmt/binding-darwin-x64@0.42.0':
-    resolution: {integrity: sha512-ttxLKhQYPdFiM8I/Ri37cvqChE4Xa562nNOsZFcv1CKTVLeEozXjKuYClNvxkXmNlcF55nzM80P+CQkdFBu+uQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [darwin]
-
-  '@oxfmt/binding-freebsd-x64@0.42.0':
-    resolution: {integrity: sha512-Og7QS3yI3tdIKYZ58SXik0rADxIk2jmd+/YvuHRyKULWpG4V2fR5V4hvKm624Mc0cQET35waPXiCQWvjQEjwYQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@oxfmt/binding-linux-arm-gnueabihf@0.42.0':
-    resolution: {integrity: sha512-jwLOw/3CW4H6Vxcry4/buQHk7zm9Ne2YsidzTL1kpiMe4qqrRCwev3dkyWe2YkFmP+iZCQ7zku4KwjcLRoh8ew==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxfmt/binding-linux-arm-musleabihf@0.42.0':
-    resolution: {integrity: sha512-XwXu2vkMtiq2h7tfvN+WA/9/5/1IoGAVCFPiiQUvcAuG3efR97KNcRGM8BetmbYouFotQ2bDal3yyjUx6IPsTg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxfmt/binding-linux-arm64-gnu@0.42.0':
-    resolution: {integrity: sha512-ea7s/XUJoT7ENAtUQDudFe3nkSM3e3Qpz4nJFRdzO2wbgXEcjnchKLEsV3+t4ev3r8nWxIYr9NRjPWtnyIFJVA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxfmt/binding-linux-arm64-musl@0.42.0':
-    resolution: {integrity: sha512-+JA0YMlSdDqmacygGi2REp57c3fN+tzARD8nwsukx9pkCHK+6DkbAA9ojS4lNKsiBjIW8WWa0pBrBWhdZEqfuw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@oxfmt/binding-linux-ppc64-gnu@0.42.0':
-    resolution: {integrity: sha512-VfnET0j4Y5mdfCzh5gBt0NK28lgn5DKx+8WgSMLYYeSooHhohdbzwAStLki9pNuGy51y4I7IoW8bqwAaCMiJQg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxfmt/binding-linux-riscv64-gnu@0.42.0':
-    resolution: {integrity: sha512-gVlCbmBkB0fxBWbhBj9rcxezPydsQHf4MFKeHoTSPicOQ+8oGeTQgQ8EeesSybWeiFPVRx3bgdt4IJnH6nOjAA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxfmt/binding-linux-riscv64-musl@0.42.0':
-    resolution: {integrity: sha512-zN5OfstL0avgt/IgvRu0zjQzVh/EPkcLzs33E9LMAzpqlLWiPWeMDZyMGFlSRGOdDjuNmlZBCgj0pFnK5u32TQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [musl]
-
-  '@oxfmt/binding-linux-s390x-gnu@0.42.0':
-    resolution: {integrity: sha512-9X6+H2L0qMc2sCAgO9HS03bkGLMKvOFjmEdchaFlany3vNZOjnVui//D8k/xZAtQv2vaCs1reD5KAgPoIU4msA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxfmt/binding-linux-x64-gnu@0.42.0':
-    resolution: {integrity: sha512-BajxJ6KQvMMdpXGPWhBGyjb2Jvx4uec0w+wi6TJZ6Tv7+MzPwe0pO8g5h1U0jyFgoaF7mDl6yKPW3ykWcbUJRw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxfmt/binding-linux-x64-musl@0.42.0':
-    resolution: {integrity: sha512-0wV284I6vc5f0AqAhgAbHU2935B4bVpncPoe5n/WzVZY/KnHgqxC8iSFGeSyLWEgstFboIcWkOPck7tqbdHkzA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@oxfmt/binding-openharmony-arm64@0.42.0':
-    resolution: {integrity: sha512-p4BG6HpGnhfgHk1rzZfyR6zcWkE7iLrWxyehHfXUy4Qa5j3e0roglFOdP/Nj5cJJ58MA3isQ5dlfkW2nNEpolw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [openharmony]
-
-  '@oxfmt/binding-win32-arm64-msvc@0.42.0':
-    resolution: {integrity: sha512-mn//WV60A+IetORDxYieYGAoQso4KnVRRjORDewMcod4irlRe0OSC7YPhhwaexYNPQz/GCFk+v9iUcZ2W22yxQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [win32]
-
-  '@oxfmt/binding-win32-ia32-msvc@0.42.0':
-    resolution: {integrity: sha512-3gWltUrvuz4LPJXWivoAxZ28Of2O4N7OGuM5/X3ubPXCEV8hmgECLZzjz7UYvSDUS3grfdccQwmjynm+51EFpw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ia32]
-    os: [win32]
-
-  '@oxfmt/binding-win32-x64-msvc@0.42.0':
-    resolution: {integrity: sha512-Wg4TMAfQRL9J9AZevJ/ZNy3uyyDztDYQtGr4P8UyyzIhLhFrdSmz1J/9JT+rv0fiCDLaFOBQnj3f3K3+a5PzDQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [win32]
-
-  '@oxlint/binding-android-arm-eabi@1.57.0':
-    resolution: {integrity: sha512-C7EiyfAJG4B70496eV543nKiq5cH0o/xIh/ufbjQz3SIvHhlDDsyn+mRFh+aW8KskTyUpyH2LGWL8p2oN6bl1A==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [android]
-
-  '@oxlint/binding-android-arm64@1.57.0':
-    resolution: {integrity: sha512-9i80AresjZ/FZf5xK8tKFbhQnijD4s1eOZw6/FHUwD59HEZbVLRc2C88ADYJfLZrF5XofWDiRX/Ja9KefCLy7w==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [android]
-
-  '@oxlint/binding-darwin-arm64@1.57.0':
-    resolution: {integrity: sha512-0eUfhRz5L2yKa9I8k3qpyl37XK3oBS5BvrgdVIx599WZK63P8sMbg+0s4IuxmIiZuBK68Ek+Z+gcKgeYf0otsg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@oxlint/binding-darwin-x64@1.57.0':
-    resolution: {integrity: sha512-UvrSuzBaYOue+QMAcuDITe0k/Vhj6KZGjfnI6x+NkxBTke/VoM7ZisaxgNY0LWuBkTnd1OmeQfEQdQ48fRjkQg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [darwin]
-
-  '@oxlint/binding-freebsd-x64@1.57.0':
-    resolution: {integrity: sha512-wtQq0dCoiw4bUwlsNVDJJ3pxJA218fOezpgtLKrbQqUtQJcM9yP8z+I9fu14aHg0uyAxIY+99toL6uBa2r7nxA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@oxlint/binding-linux-arm-gnueabihf@1.57.0':
-    resolution: {integrity: sha512-qxFWl2BBBFcT4djKa+OtMdnLgoHEJXpqjyGwz8OhW35ImoCwR5qtAGqApNYce5260FQqoAHW8S8eZTjiX67Tsg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxlint/binding-linux-arm-musleabihf@1.57.0':
-    resolution: {integrity: sha512-SQoIsBU7J0bDW15/f0/RvxHfY3Y0+eB/caKBQtNFbuerTiA6JCYx9P1MrrFTwY2dTm/lMgTSgskvCEYk2AtG/Q==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxlint/binding-linux-arm64-gnu@1.57.0':
-    resolution: {integrity: sha512-jqxYd1W6WMeozsCmqe9Rzbu3SRrGTyGDAipRlRggetyYbUksJqJKvUNTQtZR/KFoJPb+grnSm5SHhdWrywv3RQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxlint/binding-linux-arm64-musl@1.57.0':
-    resolution: {integrity: sha512-i66WyEPVEvq9bxRUCJ/MP5EBfnTDN3nhwEdFZFTO5MmLLvzngfWEG3NSdXQzTT3vk5B9i6C2XSIYBh+aG6uqyg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@oxlint/binding-linux-ppc64-gnu@1.57.0':
-    resolution: {integrity: sha512-oMZDCwz4NobclZU3pH+V1/upVlJZiZvne4jQP+zhJwt+lmio4XXr4qG47CehvrW1Lx2YZiIHuxM2D4YpkG3KVA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxlint/binding-linux-riscv64-gnu@1.57.0':
-    resolution: {integrity: sha512-uoBnjJ3MMEBbfnWC1jSFr7/nSCkcQYa72NYoNtLl1imshDnWSolYCjzb8LVCwYCCfLJXD+0gBLD7fyC14c0+0g==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxlint/binding-linux-riscv64-musl@1.57.0':
-    resolution: {integrity: sha512-BdrwD7haPZ8a9KrZhKJRSj6jwCor+Z8tHFZ3PT89Y3Jq5v3LfMfEePeAmD0LOTWpiTmzSzdmyw9ijneapiVHKQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [musl]
-
-  '@oxlint/binding-linux-s390x-gnu@1.57.0':
-    resolution: {integrity: sha512-BNs+7ZNsRstVg2tpNxAXfMX/Iv5oZh204dVyb8Z37+/gCh+yZqNTlg6YwCLIMPSk5wLWIGOaQjT0GUOahKYImw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxlint/binding-linux-x64-gnu@1.57.0':
-    resolution: {integrity: sha512-AghS18w+XcENcAX0+BQGLiqjpqpaxKJa4cWWP0OWNLacs27vHBxu7TYkv9LUSGe5w8lOJHeMxcYfZNOAPqw2bg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxlint/binding-linux-x64-musl@1.57.0':
-    resolution: {integrity: sha512-E/FV3GB8phu/Rpkhz5T96hAiJlGzn91qX5yj5gU754P5cmVGXY1Jw/VSjDSlZBCY3VHjsVLdzgdkJaomEmcNOg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@oxlint/binding-openharmony-arm64@1.57.0':
-    resolution: {integrity: sha512-xvZ2yZt0nUVfU14iuGv3V25jpr9pov5N0Wr28RXnHFxHCRxNDMtYPHV61gGLhN9IlXM96gI4pyYpLSJC5ClLCQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [openharmony]
-
-  '@oxlint/binding-win32-arm64-msvc@1.57.0':
-    resolution: {integrity: sha512-Z4D8Pd0AyHBKeazhdIXeUUy5sIS3Mo0veOlzlDECg6PhRRKgEsBJCCV1n+keUZtQ04OP+i7+itS3kOykUyNhDg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [win32]
-
-  '@oxlint/binding-win32-ia32-msvc@1.57.0':
-    resolution: {integrity: sha512-StOZ9nFMVKvevicbQfql6Pouu9pgbeQnu60Fvhz2S6yfMaii+wnueLnqQ5I1JPgNF0Syew4voBlAaHD13wH6tw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ia32]
-    os: [win32]
-
-  '@oxlint/binding-win32-x64-msvc@1.57.0':
-    resolution: {integrity: sha512-6PuxhYgth8TuW0+ABPOIkGdBYw+qYGxgIdXPHSVpiCDm+hqTTWCmC739St1Xni0DJBt8HnSHTG67i1y6gr8qrA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [win32]
-
-  '@rolldown/binding-android-arm64@1.1.2':
-    resolution: {integrity: sha512-2cZ+7xRS+DBcuJBJKnfzsbleumJhBqSlJVpuzHC0nTqfd3QQ7Vx2/x5YR/D7cBamKSeWplwo82Fn9lqYUDEMfA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [android]
-
-  '@rolldown/binding-darwin-arm64@1.1.2':
-    resolution: {integrity: sha512-RkPMJnygxsgOYdkfqgpwY0/Fzm8d0VQe6HGU2/B00Xa9eqdLbrII+DOKAodbJAn3ZL1AJxGHkZRPYazgGY6Ljw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@rolldown/binding-darwin-x64@1.1.2':
-    resolution: {integrity: sha512-Uiczh6vFhwyfd7WNe7Q7mCA4KxAiLdz7jPE/WGizfRpIieoyFuNVMmM8HqZ9HwudTkY6/AeMQwlNJ9NJijguWw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [darwin]
-
-  '@rolldown/binding-freebsd-x64@1.1.2':
-    resolution: {integrity: sha512-+TpdtTRgHiJFjCVFbw311SuLk3KfytPOQQn+VlAEv+gBxYPtL7E6JS9e/tk+8CwxhIZvemJKo4rTKgfWNsKkkA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@rolldown/binding-linux-arm-gnueabihf@1.1.2':
-    resolution: {integrity: sha512-4lv1/tkmi7ueIVHnyreaOeUpiZP26BH9rRy6hoYfR9310A2B9nUEVRDvBx69vx64Nr3eTPPRkyciqJJs+j9Jmw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@rolldown/binding-linux-arm64-gnu@1.1.2':
-    resolution: {integrity: sha512-gBSUVO0eaWgw1JMjK3gB8BMlX2Mk148s2lTiVT3e9vjVxbl7UDfMWWY8CfIaaqiXuM9fVTMxIpUz6CAo/B6Vlw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rolldown/binding-linux-arm64-musl@1.1.2':
-    resolution: {integrity: sha512-LjQP/iZLBu8o8PjIfk4x3At0/mT6h282pvz8Z5LAyhGbu/kDezyO7ea62rF5uoqmgnIYqbN/MqJ3Si3Aymi7xQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@rolldown/binding-linux-ppc64-gnu@1.1.2':
-    resolution: {integrity: sha512-X/7bVLWelEsbyWDUSXt7zVsTniLLPIY2n1rH58qr78l9i7MNbbxBWD8gI2vRfBWf4NUXJCUuQnfZDsp32LqsfQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rolldown/binding-linux-s390x-gnu@1.1.2':
-    resolution: {integrity: sha512-gb6dYKW/1KDorGXyy48glEBJs/sxVSC5pcVrox/pFGV4mvwSFeg2sK5L2tRkVsVlh7kueqOgg4GEcuipJcGuKg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
-  '@rolldown/binding-linux-x64-gnu@1.1.2':
-    resolution: {integrity: sha512-JY4w85pU3iAiJVMh5nuk4/Mh9GjMsupe8MrIN53rwxAZW64GKrWeJBuN6SxQg9QTU5uB1cxyhDzW8jqRn1EABw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rolldown/binding-linux-x64-musl@1.1.2':
-    resolution: {integrity: sha512-xvpA7o5KCYLB0Rwscmuylb1/zHHSUx4g4xilm4prC5jP76pEUlzBmMbgpbh7bVDbId4NcfT96gN5i6mE6UDaiw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@rolldown/binding-openharmony-arm64@1.1.2':
-    resolution: {integrity: sha512-p/ts6KBLjuk49Bp21XH77poQGt02iNz7ChgHep7tudPOaLinR/De/RHdxF8w8Yj4r/bF/bqXwH6PZrB2sA+Nvw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [openharmony]
-
-  '@rolldown/binding-wasm32-wasi@1.1.2':
-    resolution: {integrity: sha512-VMu/wmrZ9hJzYlRhbw7jK5PODlugyKZ5mOdX78+lS8OvuFkWNQdz1pFLrI2p3P0pjXOmUZ7B48o5VnMH9QOGtg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [wasm32]
-
-  '@rolldown/binding-win32-arm64-msvc@1.1.2':
-    resolution: {integrity: sha512-xtUJqs8qEkuSviS0n1tsohaPuz3a1SPhZywOji4Oo+sgrJs8daEDMZ0QtqL0OS7dx8PoVpg2J/ZZycPY5I2+Zg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [win32]
-
-  '@rolldown/binding-win32-x64-msvc@1.1.2':
-    resolution: {integrity: sha512-85YiLQqjUKgSO/Zjnf9e0XIn5Ymrh1fLDWBeAkZqpuBR/3R8TpfoHXuyblqyQrftSSgWO9qpcHN8mkyKsLraoA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [win32]
-
-  '@rolldown/pluginutils@1.0.0-rc.13':
-    resolution: {integrity: sha512-3ngTAv6F/Py35BsYbeeLeecvhMKdsKm4AoOETVhAA+Qc8nrA2I0kF7oa93mE9qnIurngOSpMnQ0x2nQY2FPviA==}
-
-  '@rolldown/pluginutils@1.0.0-rc.15':
-    resolution: {integrity: sha512-UromN0peaE53IaBRe9W7CjrZgXl90fqGpK+mIZbA3qSTeYqg3pqpROBdIPvOG3F5ereDHNwoHBI2e50n1BDr1g==}
-
-  '@rolldown/pluginutils@1.0.1':
-    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
-
-  '@tailwindcss/node@4.2.2':
-    resolution: {integrity: sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==}
-
-  '@tailwindcss/oxide-android-arm64@4.2.2':
-    resolution: {integrity: sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [android]
-
-  '@tailwindcss/oxide-darwin-arm64@4.2.2':
-    resolution: {integrity: sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@tailwindcss/oxide-darwin-x64@4.2.2':
-    resolution: {integrity: sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@tailwindcss/oxide-freebsd-x64@4.2.2':
-    resolution: {integrity: sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
-    resolution: {integrity: sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==}
-    engines: {node: '>= 20'}
-    cpu: [arm]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
-    resolution: {integrity: sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
-    resolution: {integrity: sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
-    resolution: {integrity: sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
-    resolution: {integrity: sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
-    resolution: {integrity: sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-    bundledDependencies:
-      - '@napi-rs/wasm-runtime'
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-      - '@tybys/wasm-util'
-      - '@emnapi/wasi-threads'
-      - tslib
-
-  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
-    resolution: {integrity: sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
-    resolution: {integrity: sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [win32]
-
-  '@tailwindcss/oxide@4.2.2':
-    resolution: {integrity: sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==}
-    engines: {node: '>= 20'}
-
-  '@tailwindcss/typography@0.5.19':
-    resolution: {integrity: sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==}
-    peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
-
-  '@tailwindcss/vite@4.2.2':
-    resolution: {integrity: sha512-mEiF5HO1QqCLXoNEfXVA1Tzo+cYsrqV7w9Juj2wdUFyW07JRenqMG225MvPwr3ZD9N1bFQj46X7r33iHxLUW0w==}
-    peerDependencies:
-      vite: ^5.2.0 || ^6 || ^7 || ^8
-
-  '@tanstack/virtual-core@3.13.23':
-    resolution: {integrity: sha512-zSz2Z2HNyLjCplANTDyl3BcdQJc2k1+yyFoKhNRmCr7V7dY8o8q5m8uFTI1/Pg1kL+Hgrz6u3Xo6eFUB7l66cg==}
-
-  '@tanstack/vue-virtual@3.13.23':
-    resolution: {integrity: sha512-b5jPluAR6U3eOq6GWAYSpj3ugnAIZgGR0e6aGAgyRse0Yu6MVQQ0ZWm9SArSXWtageogn6bkVD8D//c4IjW3xQ==}
-    peerDependencies:
-      vue: ^2.7.0 || ^3.0.0
-
-  '@tauri-apps/api@2.11.1':
-    resolution: {integrity: sha512-M2FPuYND2m+wh5hfW9ZpSdxMPdEJovPBWwoHJmwUpysTYNHaOkVFN419m/K0LIgjb/7KU2vBgsUepJWugQCvAA==}
-
-  '@tauri-apps/plugin-dialog@2.7.1':
-    resolution: {integrity: sha512-OK1UBXYt+ojcmxMktzzuyonYIFta8CmAASpX+CA+DTGK24KlHjhYI6x2iOJ/TjZF4N7/ACK1oFmEOjIY9IhzOQ==}
-
-  '@tauri-apps/plugin-notification@2.3.3':
-    resolution: {integrity: sha512-Zw+ZH18RJb41G4NrfHgIuofJiymusqN+q8fGUIIV7vyCH+5sSn5coqRv/MWB9qETsUs97vmU045q7OyseCV3Qg==}
-
-  '@tauri-apps/plugin-opener@2.5.4':
-    resolution: {integrity: sha512-1HnPkb+AmgO29HBazm4uPLKB+r7zzcTBW1d0fyYp1uP+jwtpoiNDGKMMzz58SFp49nOIrxdE3aUJtT57lfO9CQ==}
-
-  '@tsconfig/node24@24.0.4':
-    resolution: {integrity: sha512-2A933l5P5oCbv6qSxHs7ckKwobs8BDAe9SJ/Xr2Hy+nDlwmLE1GhFh/g/vXGRZWgxBg9nX/5piDtHR9Dkw/XuA==}
-
-  '@tybys/wasm-util@0.10.3':
-    resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==}
-
-  '@types/esrecurse@4.3.1':
-    resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
-
-  '@types/estree@1.0.8':
-    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
-
-  '@types/json-schema@7.0.15':
-    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
-
-  '@types/node@24.12.2':
-    resolution: {integrity: sha512-A1sre26ke7HDIuY/M23nd9gfB+nrmhtYyMINbjI1zHJxYteKR6qSMX56FsmjMcDb3SMcjJg5BiRRgOCC/yBD0g==}
-
-  '@types/qrcode@1.5.6':
-    resolution: {integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==}
-
-  '@types/trusted-types@2.0.7':
-    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
-
-  '@typescript-eslint/eslint-plugin@8.58.1':
-    resolution: {integrity: sha512-eSkwoemjo76bdXl2MYqtxg51HNwUSkWfODUOQ3PaTLZGh9uIWWFZIjyjaJnex7wXDu+TRx+ATsnSxdN9YWfRTQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^8.58.1
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.1.0'
-
-  '@typescript-eslint/parser@8.58.1':
-    resolution: {integrity: sha512-gGkiNMPqerb2cJSVcruigx9eHBlLG14fSdPdqMoOcBfh+vvn4iCq2C8MzUB89PrxOXk0y3GZ1yIWb9aOzL93bw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.1.0'
-
-  '@typescript-eslint/project-service@8.58.1':
-    resolution: {integrity: sha512-gfQ8fk6cxhtptek+/8ZIqw8YrRW5048Gug8Ts5IYcMLCw18iUgrZAEY/D7s4hkI0FxEfGakKuPK/XUMPzPxi5g==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.1.0'
-
-  '@typescript-eslint/scope-manager@8.58.1':
-    resolution: {integrity: sha512-TPYUEqJK6avLcEjumWsIuTpuYODTTDAtoMdt8ZZa93uWMTX13Nb8L5leSje1NluammvU+oI3QRr5lLXPgihX3w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/tsconfig-utils@8.58.1':
-    resolution: {integrity: sha512-JAr2hOIct2Q+qk3G+8YFfqkqi7sC86uNryT+2i5HzMa2MPjw4qNFvtjnw1IiA1rP7QhNKVe21mSSLaSjwA1Olw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.1.0'
-
-  '@typescript-eslint/type-utils@8.58.1':
-    resolution: {integrity: sha512-HUFxvTJVroT+0rXVJC7eD5zol6ID+Sn5npVPWoFuHGg9Ncq5Q4EYstqR+UOqaNRFXi5TYkpXXkLhoCHe3G0+7w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.1.0'
-
-  '@typescript-eslint/types@8.58.1':
-    resolution: {integrity: sha512-io/dV5Aw5ezwzfPBBWLoT+5QfVtP8O7q4Kftjn5azJ88bYyp/ZMCsyW1lpKK46EXJcaYMZ1JtYj+s/7TdzmQMw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/typescript-estree@8.58.1':
-    resolution: {integrity: sha512-w4w7WR7GHOjqqPnvAYbazq+Y5oS68b9CzasGtnd6jIeOIeKUzYzupGTB2T4LTPSv4d+WPeccbxuneTFHYgAAWg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.1.0'
-
-  '@typescript-eslint/utils@8.58.1':
-    resolution: {integrity: sha512-Ln8R0tmWC7pTtLOzgJzYTXSCjJ9rDNHAqTaVONF4FEi2qwce8mD9iSOxOpLFFvWp/wBFlew0mjM1L1ihYWfBdQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.1.0'
-
-  '@typescript-eslint/visitor-keys@8.58.1':
-    resolution: {integrity: sha512-y+vH7QE8ycjoa0bWciFg7OpFcipUuem1ujhrdLtq1gByKwfbC7bPeKsiny9e0urg93DqwGcHey+bGRKCnF1nZQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@vitejs/plugin-vue-jsx@5.1.5':
-    resolution: {integrity: sha512-jIAsvHOEtWpslLOI2MeElGFxH7M8pM83BU/Tor4RLyiwH0FM4nUW3xdvbw20EeU9wc5IspQwMq225K3CMnJEpA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    peerDependencies:
-      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
-      vue: ^3.0.0
-
-  '@vitejs/plugin-vue@6.0.6':
-    resolution: {integrity: sha512-u9HHgfrq3AjXlysn0eINFnWQOJQLO9WN6VprZ8FXl7A2bYisv3Hui9Ij+7QZ41F/WYWarHjwBbXtD7dKg3uxbg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    peerDependencies:
-      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
-      vue: ^3.2.25
-
-  '@volar/language-core@2.4.28':
-    resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
-
-  '@volar/source-map@2.4.28':
-    resolution: {integrity: sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==}
-
-  '@volar/typescript@2.4.28':
-    resolution: {integrity: sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==}
-
-  '@vue/babel-helper-vue-transform-on@2.0.1':
-    resolution: {integrity: sha512-uZ66EaFbnnZSYqYEyplWvn46GhZ1KuYSThdT68p+am7MgBNbQ3hphTL9L+xSIsWkdktwhPYLwPgVWqo96jDdRA==}
-
-  '@vue/babel-plugin-jsx@2.0.1':
-    resolution: {integrity: sha512-a8CaLQjD/s4PVdhrLD/zT574ZNPnZBOY+IhdtKWRB4HRZ0I2tXBi5ne7d9eCfaYwp5gU5+4KIyFTV1W1YL9xZA==}
-    peerDependencies:
-      '@babel/core': ^7.29.6
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-
-  '@vue/babel-plugin-resolve-type@2.0.1':
-    resolution: {integrity: sha512-ybwgIuRGRRBhOU37GImDoWQoz+TlSqap65qVI6iwg/J7FfLTLmMf97TS7xQH9I7Qtr/gp161kYVdhr1ZMraSYQ==}
-    peerDependencies:
-      '@babel/core': ^7.29.6
-
-  '@vue/compiler-core@3.5.32':
-    resolution: {integrity: sha512-4x74Tbtqnda8s/NSD6e1Dr5p1c8HdMU5RWSjMSUzb8RTcUQqevDCxVAitcLBKT+ie3o0Dl9crc/S/opJM7qBGQ==}
-
-  '@vue/compiler-dom@3.5.32':
-    resolution: {integrity: sha512-ybHAu70NtiEI1fvAUz3oXZqkUYEe5J98GjMDpTGl5iHb0T15wQYLR4wE3h9xfuTNA+Cm2f4czfe8B4s+CCH57Q==}
-
-  '@vue/compiler-sfc@3.5.32':
-    resolution: {integrity: sha512-8UYUYo71cP/0YHMO814TRZlPuUUw3oifHuMR7Wp9SNoRSrxRQnhMLNlCeaODNn6kNTJsjFoQ/kqIj4qGvya4Xg==}
-
-  '@vue/compiler-ssr@3.5.32':
-    resolution: {integrity: sha512-Gp4gTs22T3DgRotZ8aA/6m2jMR+GMztvBXUBEUOYOcST+giyGWJ4WvFd7QLHBkzTxkfOt8IELKNdpzITLbA2rw==}
-
-  '@vue/devtools-api@6.6.4':
-    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
-
-  '@vue/devtools-api@7.7.9':
-    resolution: {integrity: sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==}
-
-  '@vue/devtools-kit@7.7.9':
-    resolution: {integrity: sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==}
-
-  '@vue/devtools-shared@7.7.9':
-    resolution: {integrity: sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==}
-
-  '@vue/eslint-config-typescript@14.7.0':
-    resolution: {integrity: sha512-iegbMINVc+seZ/QxtzWiOBozctrHiF2WvGedruu2EbLujg9VuU0FQiNcN2z1ycuaoKKpF4m2qzB5HDEMKbxtIg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^9.10.0 || ^10.0.0
-      eslint-plugin-vue: ^9.28.0 || ^10.0.0
-      typescript: '>=4.8.4'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@vue/language-core@3.2.6':
-    resolution: {integrity: sha512-xYYYX3/aVup576tP/23sEUpgiEnujrENaoNRbaozC1/MA9I6EGFQRJb4xrt/MmUCAGlxTKL2RmT8JLTPqagCkg==}
-
-  '@vue/reactivity@3.5.32':
-    resolution: {integrity: sha512-/ORasxSGvZ6MN5gc+uE364SxFdJ0+WqVG0CENXaGW58TOCdrAW76WWaplDtECeS1qphvtBZtR+3/o1g1zL4xPQ==}
-
-  '@vue/runtime-core@3.5.32':
-    resolution: {integrity: sha512-pDrXCejn4UpFDFmMd27AcJEbHaLemaE5o4pbb7sLk79SRIhc6/t34BQA7SGNgYtbMnvbF/HHOftYBgFJtUoJUQ==}
-
-  '@vue/runtime-dom@3.5.32':
-    resolution: {integrity: sha512-1CDVv7tv/IV13V8Nip1k/aaObVbWqRlVCVezTwx3K07p7Vxossp5JU1dcPNhJk3w347gonIUT9jQOGutyJrSVQ==}
-
-  '@vue/server-renderer@3.5.32':
-    resolution: {integrity: sha512-IOjm2+JQwRFS7W28HNuJeXQle9KdZbODFY7hFGVtnnghF51ta20EWAZJHX+zLGtsHhaU6uC9BGPV52KVpYryMQ==}
-    peerDependencies:
-      vue: 3.5.32
-
-  '@vue/shared@3.5.32':
-    resolution: {integrity: sha512-ksNyrmRQzWJJ8n3cRDuSF7zNNontuJg1YHnmWRJd2AMu8Ij2bqwiiri2lH5rHtYPZjj4STkNcgcmiQqlOjiYGg==}
-
-  '@vue/tsconfig@0.9.1':
-    resolution: {integrity: sha512-buvjm+9NzLCJL29KY1j1991YYJ5e6275OiK+G4jtmfIb+z4POywbdm0wXusT9adVWqe0xqg70TbI7+mRx4uU9w==}
-    peerDependencies:
-      typescript: '>= 5.8'
-      vue: ^3.4.0
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-      vue:
-        optional: true
-
-  '@xterm/addon-fit@0.11.0':
-    resolution: {integrity: sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g==}
-
-  '@xterm/addon-web-links@0.12.0':
-    resolution: {integrity: sha512-4Smom3RPyVp7ZMYOYDoC/9eGJJJqYhnPLGGqJ6wOBfB8VxPViJNSKdgRYb8NpaM6YSelEKbA2SStD7lGyqaobw==}
-
-  '@xterm/xterm@6.0.0':
-    resolution: {integrity: sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg==}
-
-  acorn-jsx@5.3.2:
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-
-  acorn@8.16.0:
-    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
-  ajv@6.14.0:
-    resolution: {integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==}
-
-  alien-signals@3.1.2:
-    resolution: {integrity: sha512-d9dYqZTS90WLiU0I5c6DHj/HcKkF8ZyGN3G5x8wSbslulz70KOxaqCT0hQCo9KOyhVqzqGojvNdJXoTumZOtcw==}
-
-  ansi-regex@5.0.1:
-    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
-    engines: {node: '>=8'}
-
-  ansi-styles@4.3.0:
-    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
-    engines: {node: '>=8'}
-
-  ansi-styles@6.2.3:
-    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
-    engines: {node: '>=12'}
-
-  balanced-match@4.0.4:
-    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
-    engines: {node: 18 || 20 || >=22}
-
-  baseline-browser-mapping@2.10.18:
-    resolution: {integrity: sha512-VSnGQAOLtP5mib/DPyg2/t+Tlv65NTBz83BJBJvmLVHHuKJVaDOBvJJykiT5TR++em5nfAySPccDZDa4oSrn8A==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
-  birpc@2.9.0:
-    resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
-
-  boolbase@1.0.0:
-    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
-
-  brace-expansion@5.0.5:
-    resolution: {integrity: sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==}
-    engines: {node: 18 || 20 || >=22}
-
-  braces@3.0.3:
-    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
-    engines: {node: '>=8'}
-
-  browserslist@4.28.2:
-    resolution: {integrity: sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-
-  camelcase@5.3.1:
-    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
-    engines: {node: '>=6'}
-
-  caniuse-lite@1.0.30001787:
-    resolution: {integrity: sha512-mNcrMN9KeI68u7muanUpEejSLghOKlVhRqS/Za2IeyGllJ9I9otGpR9g3nsw7n4W378TE/LyIteA0+/FOZm4Kg==}
-
-  cliui@6.0.0:
-    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
-
-  color-convert@2.0.1:
-    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
-    engines: {node: '>=7.0.0'}
-
-  color-name@1.1.4:
-    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-
-  convert-source-map@2.0.0:
-    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
-
-  copy-anything@4.0.5:
-    resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
-    engines: {node: '>=18'}
-
-  cross-spawn@7.0.6:
-    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
-    engines: {node: '>= 8'}
-
-  cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
-
-  csstype@3.2.3:
-    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
-
-  debug@4.4.3:
-    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
-  decamelize@1.2.0:
-    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
-    engines: {node: '>=0.10.0'}
-
-  deep-is@0.1.4:
-    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
-
-  detect-libc@2.1.2:
-    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
-    engines: {node: '>=8'}
-
-  dijkstrajs@1.0.3:
-    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
-
-  dompurify@3.4.11:
-    resolution: {integrity: sha512-zhlUV12GsaRzMsf9q5M254YhA4+VuF0fG+QFqu6aYpoGlKtz+w8//jBcGVYBgQkR5GHjUomejY84AV+/uPbWdw==}
-
-  electron-to-chromium@1.5.335:
-    resolution: {integrity: sha512-q9n5T4BR4Xwa2cwbrwcsDJtHD/enpQ5S1xF1IAtdqf5AAgqDFmR/aakqH3ChFdqd/QXJhS3rnnXFtexU7rax6Q==}
-
-  emoji-regex@8.0.0:
-    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-
-  enhanced-resolve@5.20.1:
-    resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==}
-    engines: {node: '>=10.13.0'}
-
-  entities@7.0.1:
-    resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
-    engines: {node: '>=0.12'}
-
-  escalade@3.2.0:
-    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
-    engines: {node: '>=6'}
-
-  escape-string-regexp@4.0.0:
-    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
-    engines: {node: '>=10'}
-
-  eslint-config-prettier@10.1.8:
-    resolution: {integrity: sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==}
-    hasBin: true
-    peerDependencies:
-      eslint: '>=7.0.0'
-
-  eslint-plugin-oxlint@1.57.0:
-    resolution: {integrity: sha512-+c1ZqIKq6pJ/BzZkpFxkuk+40EFXSb57t8AytjEnCqeCW6WecHzeBOIukfq6nHOxIrzX+uJ0ulN70Fj8YaR50g==}
-    peerDependencies:
-      oxlint: ~1.57.0
-
-  eslint-plugin-vue@10.8.0:
-    resolution: {integrity: sha512-f1J/tcbnrpgC8suPN5AtdJ5MQjuXbSU9pGRSSYAuF3SHoiYCOdEX6O22pLaRyLHXvDcOe+O5ENgc1owQ587agA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      '@stylistic/eslint-plugin': ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
-      '@typescript-eslint/parser': ^7.0.0 || ^8.0.0
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      vue-eslint-parser: ^10.0.0
-    peerDependenciesMeta:
-      '@stylistic/eslint-plugin':
-        optional: true
-      '@typescript-eslint/parser':
-        optional: true
-
-  eslint-scope@9.1.2:
-    resolution: {integrity: sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==}
-    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
-
-  eslint-visitor-keys@3.4.3:
-    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  eslint-visitor-keys@5.0.1:
-    resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==}
-    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
-
-  eslint@10.2.0:
-    resolution: {integrity: sha512-+L0vBFYGIpSNIt/KWTpFonPrqYvgKw1eUI5Vn7mEogrQcWtWYtNQ7dNqC+px/J0idT3BAkiWrhfS7k+Tum8TUA==}
-    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
-    hasBin: true
-    peerDependencies:
-      jiti: '*'
-    peerDependenciesMeta:
-      jiti:
-        optional: true
-
-  espree@11.2.0:
-    resolution: {integrity: sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==}
-    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
-
-  esquery@1.7.0:
-    resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
-    engines: {node: '>=0.10'}
-
-  esrecurse@4.3.0:
-    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
-    engines: {node: '>=4.0'}
-
-  estraverse@5.3.0:
-    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
-    engines: {node: '>=4.0'}
-
-  estree-walker@2.0.2:
-    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
-
-  esutils@2.0.3:
-    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
-    engines: {node: '>=0.10.0'}
-
-  fast-deep-equal@3.1.3:
-    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
-
-  fast-glob@3.3.3:
-    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
-    engines: {node: '>=8.6.0'}
-
-  fast-json-stable-stringify@2.1.0:
-    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
-
-  fast-levenshtein@2.0.6:
-    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
-
-  fastq@1.20.1:
-    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
-
-  fdir@6.5.0:
-    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      picomatch: ^3 || ^4
-    peerDependenciesMeta:
-      picomatch:
-        optional: true
-
-  file-entry-cache@8.0.0:
-    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
-    engines: {node: '>=16.0.0'}
-
-  fill-range@7.1.1:
-    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
-    engines: {node: '>=8'}
-
-  find-up@4.1.0:
-    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
-    engines: {node: '>=8'}
-
-  find-up@5.0.0:
-    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
-    engines: {node: '>=10'}
-
-  flat-cache@4.0.1:
-    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
-    engines: {node: '>=16'}
-
-  flatted@3.4.2:
-    resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==}
-
-  fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-
-  gensync@1.0.0-beta.2:
-    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
-    engines: {node: '>=6.9.0'}
-
-  get-caller-file@2.0.5:
-    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
-    engines: {node: 6.* || 8.* || >= 10.*}
-
-  glob-parent@5.1.2:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
-    engines: {node: '>= 6'}
-
-  glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
-
-  graceful-fs@4.2.11:
-    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-
-  highlight.js@11.11.1:
-    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
-    engines: {node: '>=12.0.0'}
-
-  hookable@5.5.3:
-    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
-
-  ignore@5.3.2:
-    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
-    engines: {node: '>= 4'}
-
-  ignore@7.0.5:
-    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
-    engines: {node: '>= 4'}
-
-  imurmurhash@0.1.4:
-    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
-    engines: {node: '>=0.8.19'}
-
-  is-extglob@2.1.1:
-    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
-    engines: {node: '>=0.10.0'}
-
-  is-fullwidth-code-point@3.0.0:
-    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
-    engines: {node: '>=8'}
-
-  is-glob@4.0.3:
-    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
-    engines: {node: '>=0.10.0'}
-
-  is-number@7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
-    engines: {node: '>=0.12.0'}
-
-  is-what@5.5.0:
-    resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==}
-    engines: {node: '>=18'}
-
-  isexe@2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-
-  isexe@3.1.5:
-    resolution: {integrity: sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==}
-    engines: {node: '>=18'}
-
-  jiti@2.6.1:
-    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
-    hasBin: true
-
-  js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-
-  jsesc@3.1.0:
-    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
-    engines: {node: '>=6'}
-    hasBin: true
-
-  json-buffer@3.0.1:
-    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
-
-  json-parse-even-better-errors@4.0.0:
-    resolution: {integrity: sha512-lR4MXjGNgkJc7tkQ97kb2nuEMnNCyU//XYVH0MKTGcXEiSudQ5MKGKen3C5QubYy0vmq+JGitUg92uuywGEwIA==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-
-  json-schema-traverse@0.4.1:
-    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
-
-  json-stable-stringify-without-jsonify@1.0.1:
-    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
-
-  json5@2.2.3:
-    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
-    engines: {node: '>=6'}
-    hasBin: true
-
-  jsonc-parser@3.3.1:
-    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
-
-  keyv@4.5.4:
-    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
-
-  levn@0.4.1:
-    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
-    engines: {node: '>= 0.8.0'}
-
-  lightningcss-android-arm64@1.32.0:
-    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [android]
-
-  lightningcss-darwin-arm64@1.32.0:
-    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [darwin]
-
-  lightningcss-darwin-x64@1.32.0:
-    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [darwin]
-
-  lightningcss-freebsd-x64@1.32.0:
-    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [freebsd]
-
-  lightningcss-linux-arm-gnueabihf@1.32.0:
-    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm]
-    os: [linux]
-
-  lightningcss-linux-arm64-gnu@1.32.0:
-    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  lightningcss-linux-arm64-musl@1.32.0:
-    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  lightningcss-linux-x64-gnu@1.32.0:
-    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  lightningcss-linux-x64-musl@1.32.0:
-    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  lightningcss-win32-arm64-msvc@1.32.0:
-    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [win32]
-
-  lightningcss-win32-x64-msvc@1.32.0:
-    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [win32]
-
-  lightningcss@1.32.0:
-    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
-    engines: {node: '>= 12.0.0'}
-
-  locate-path@5.0.0:
-    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
-    engines: {node: '>=8'}
-
-  locate-path@6.0.0:
-    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
-    engines: {node: '>=10'}
-
-  lru-cache@5.1.1:
-    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
-
-  magic-string@0.30.21:
-    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
-
-  marked-highlight@2.2.4:
-    resolution: {integrity: sha512-PZxisNMJDduSjc0q6uvjsnqqHCXc9s0eyzxDO9sB1eNGJnd/H1/Fu+z6g/liC1dfJdFW4SftMwMlLvsBhUPrqQ==}
-    peerDependencies:
-      marked: '>=4 <19'
-
-  marked@18.0.2:
-    resolution: {integrity: sha512-NsmlUYBS/Zg57rgDWMYdnre6OTj4e+qq/JS2ot3KrYLSoHLw+sDu0Nm1ZGpRgYAq6c+b1ekaY5NzVchMCQnzcg==}
-    engines: {node: '>= 20'}
-    hasBin: true
-
-  memorystream@0.3.1:
-    resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
-    engines: {node: '>= 0.10.0'}
-
-  merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
-
-  micromatch@4.0.8:
-    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
-    engines: {node: '>=8.6'}
-
-  minimatch@10.2.5:
-    resolution: {integrity: sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==}
-    engines: {node: 18 || 20 || >=22}
-
-  mitt@3.0.1:
-    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
-
-  ms@2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
-
-  muggle-string@0.4.1:
-    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
-
-  nanoid@3.3.12:
-    resolution: {integrity: sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
-
-  natural-compare@1.4.0:
-    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
-
-  node-releases@2.0.37:
-    resolution: {integrity: sha512-1h5gKZCF+pO/o3Iqt5Jp7wc9rH3eJJ0+nh/CIoiRwjRxde/hAHyLPXYN4V3CqKAbiZPSeJFSWHmJsbkicta0Eg==}
-
-  npm-normalize-package-bin@4.0.0:
-    resolution: {integrity: sha512-TZKxPvItzai9kN9H/TkmCtx/ZN/hvr3vUycjlfmH0ootY9yFBzNOpiXAdIn1Iteqsvk4lQn6B5PTrt+n6h8k/w==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-
-  npm-run-all2@8.0.4:
-    resolution: {integrity: sha512-wdbB5My48XKp2ZfJUlhnLVihzeuA1hgBnqB2J9ahV77wLS+/YAJAlN8I+X3DIFIPZ3m5L7nplmlbhNiFDmXRDA==}
-    engines: {node: ^20.5.0 || >=22.0.0, npm: '>= 10'}
-    hasBin: true
-
-  nth-check@2.1.1:
-    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
-
-  optionator@0.9.4:
-    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
-    engines: {node: '>= 0.8.0'}
-
-  oxfmt@0.42.0:
-    resolution: {integrity: sha512-QhejGErLSMReNuZ6vxgFHDyGoPbjTRNi6uGHjy0cvIjOQFqD6xmr/T+3L41ixR3NIgzcNiJ6ylQKpvShTgDfqg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    hasBin: true
-
-  oxlint@1.57.0:
-    resolution: {integrity: sha512-DGFsuBX5MFZX9yiDdtKjTrYPq45CZ8Fft6qCltJITYZxfwYjVdGf/6wycGYTACloauwIPxUnYhBVeZbHvleGhw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    hasBin: true
-    peerDependencies:
-      oxlint-tsgolint: '>=0.15.0'
-    peerDependenciesMeta:
-      oxlint-tsgolint:
-        optional: true
-
-  p-limit@2.3.0:
-    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
-    engines: {node: '>=6'}
-
-  p-limit@3.1.0:
-    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
-    engines: {node: '>=10'}
-
-  p-locate@4.1.0:
-    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
-    engines: {node: '>=8'}
-
-  p-locate@5.0.0:
-    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
-    engines: {node: '>=10'}
-
-  p-try@2.2.0:
-    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
-    engines: {node: '>=6'}
-
-  path-browserify@1.0.1:
-    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
-
-  path-exists@4.0.0:
-    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
-    engines: {node: '>=8'}
-
-  path-key@3.1.1:
-    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
-    engines: {node: '>=8'}
-
-  perfect-debounce@1.0.0:
-    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
-
-  picocolors@1.1.1:
-    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
-
-  picomatch@2.3.2:
-    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
-    engines: {node: '>=8.6'}
-
-  picomatch@4.0.4:
-    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
-    engines: {node: '>=12'}
-
-  pidtree@0.6.0:
-    resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
-    engines: {node: '>=0.10'}
-    hasBin: true
-
-  pinia@3.0.4:
-    resolution: {integrity: sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==}
-    peerDependencies:
-      typescript: '>=4.5.0'
-      vue: ^3.5.11
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  pngjs@5.0.0:
-    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
-    engines: {node: '>=10.13.0'}
-
-  postcss-selector-parser@6.0.10:
-    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
-    engines: {node: '>=4'}
-
-  postcss-selector-parser@7.1.1:
-    resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
-    engines: {node: '>=4'}
-
-  postcss@8.5.10:
-    resolution: {integrity: sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==}
-    engines: {node: ^10 || ^12 || >=14}
-
-  postcss@8.5.15:
-    resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
-    engines: {node: ^10 || ^12 || >=14}
-
-  prelude-ls@1.2.1:
-    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
-    engines: {node: '>= 0.8.0'}
-
-  punycode@2.3.1:
-    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
-    engines: {node: '>=6'}
-
-  qrcode@1.5.4:
-    resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
-    engines: {node: '>=10.13.0'}
-    hasBin: true
-
-  queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-
-  read-package-json-fast@4.0.0:
-    resolution: {integrity: sha512-qpt8EwugBWDw2cgE2W+/3oxC+KTez2uSVR8JU9Q36TXPAGCaozfQUs59v4j4GFpWTaw0i6hAZSvOmu1J0uOEUg==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-
-  require-directory@2.1.1:
-    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
-    engines: {node: '>=0.10.0'}
-
-  require-main-filename@2.0.0:
-    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
-
-  reusify@1.1.0:
-    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
-    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-
-  rfdc@1.4.1:
-    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
-
-  rolldown@1.1.2:
-    resolution: {integrity: sha512-x0CrQQqCXWGeI8dTvFfN/Dnv3yMKT9hv5jFjlOreKAx9wqLq9wz7VvLLHyaAXC90/CpggTu9SisSbsJJTPSjNQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    hasBin: true
-
-  run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
-
-  semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
-
-  semver@7.7.4:
-    resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
-    engines: {node: '>=10'}
-    hasBin: true
-
-  set-blocking@2.0.0:
-    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
-
-  shebang-command@2.0.0:
-    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
-    engines: {node: '>=8'}
-
-  shebang-regex@3.0.0:
-    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
-    engines: {node: '>=8'}
-
-  shell-quote@1.8.4:
-    resolution: {integrity: sha512-VsC6n6vz1ihYYyZZwX7YZSF5l5x36ca17OC+a69h94YqB7X6XLwf+5MOgynYir2SLFUbl8gIYvBo8K8RoNQ6bQ==}
-    engines: {node: '>= 0.4'}
-
-  source-map-js@1.2.1:
-    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
-    engines: {node: '>=0.10.0'}
-
-  speakingurl@14.0.1:
-    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
-    engines: {node: '>=0.10.0'}
-
-  string-width@4.2.3:
-    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
-    engines: {node: '>=8'}
-
-  strip-ansi@6.0.1:
-    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
-    engines: {node: '>=8'}
-
-  superjson@2.2.6:
-    resolution: {integrity: sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==}
-    engines: {node: '>=16'}
-
-  tailwindcss@4.2.2:
-    resolution: {integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==}
-
-  tapable@2.3.2:
-    resolution: {integrity: sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA==}
-    engines: {node: '>=6'}
-
-  tinyglobby@0.2.17:
-    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
-    engines: {node: '>=12.0.0'}
-
-  tinypool@2.1.0:
-    resolution: {integrity: sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw==}
-    engines: {node: ^20.0.0 || >=22.0.0}
-
-  to-regex-range@5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
-    engines: {node: '>=8.0'}
-
-  ts-api-utils@2.5.0:
-    resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==}
-    engines: {node: '>=18.12'}
-    peerDependencies:
-      typescript: '>=4.8.4'
-
-  tslib@2.8.1:
-    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
-
-  type-check@0.4.0:
-    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
-    engines: {node: '>= 0.8.0'}
-
-  typescript-eslint@8.58.1:
-    resolution: {integrity: sha512-gf6/oHChByg9HJvhMO1iBexJh12AqqTfnuxscMDOVqfJW3htsdRJI/GfPpHTTcyeB8cSTUY2JcZmVgoyPqcrDg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.1.0'
-
-  typescript@6.0.2:
-    resolution: {integrity: sha512-bGdAIrZ0wiGDo5l8c++HWtbaNCWTS4UTv7RaTH/ThVIgjkveJt83m74bBHMJkuCbslY8ixgLBVZJIOiQlQTjfQ==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-
-  undici-types@7.16.0:
-    resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
-
-  update-browserslist-db@1.2.3:
-    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-
-  uri-js@4.4.1:
-    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
-
-  util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-
-  vite@8.1.0:
-    resolution: {integrity: sha512-BuJcQK/56NQTWDGn4ABea3q4SSBdNPWwNZKTkkUpcMPnLoquSYH8llRtSUIgoL1KSCpHt5eghLShn50mH36y7Q==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': ^20.19.0 || >=22.12.0
-      '@vitejs/devtools': ^0.3.0
-      esbuild: ^0.27.0 || ^0.28.0
-      jiti: '>=1.21.0'
-      less: ^4.0.0
-      sass: ^1.70.0
-      sass-embedded: ^1.70.0
-      stylus: '>=0.54.8'
-      sugarss: ^5.0.0
-      terser: ^5.16.0
-      tsx: ^4.8.1
-      yaml: ^2.4.2
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      '@vitejs/devtools':
-        optional: true
-      esbuild:
-        optional: true
-      jiti:
-        optional: true
-      less:
-        optional: true
-      sass:
-        optional: true
-      sass-embedded:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-      tsx:
-        optional: true
-      yaml:
-        optional: true
-
-  vscode-uri@3.1.0:
-    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
-
-  vue-eslint-parser@10.4.0:
-    resolution: {integrity: sha512-Vxi9pJdbN3ZnVGLODVtZ7y4Y2kzAAE2Cm0CZ3ZDRvydVYxZ6VrnBhLikBsRS+dpwj4Jv4UCv21PTEwF5rQ9WXg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-
-  vue-i18n@11.4.6:
-    resolution: {integrity: sha512-l0gE7Rfy0phCa5ChKYkOq543Wgd39BCK6hkktfr1Ed4D99oRkgPK9ffShASZdeC8OJxGfdWmpYoAaAH6iLEuIg==}
-    engines: {node: '>= 22'}
-    peerDependencies:
-      vue: ^3.0.0
-
-  vue-tsc@3.2.6:
-    resolution: {integrity: sha512-gYW/kWI0XrwGzd0PKc7tVB/qpdeAkIZLNZb10/InizkQjHjnT8weZ/vBarZoj4kHKbUTZT/bAVgoOr8x4NsQ/Q==}
-    hasBin: true
-    peerDependencies:
-      typescript: '>=5.0.0'
-
-  vue@3.5.32:
-    resolution: {integrity: sha512-vM4z4Q9tTafVfMAK7IVzmxg34rSzTFMyIe0UUEijUCkn9+23lj0WRfA83dg7eQZIUlgOSGrkViIaCfqSAUXsMw==}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  which-module@2.0.1:
-    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
-
-  which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
-    hasBin: true
-
-  which@5.0.0:
-    resolution: {integrity: sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-    hasBin: true
-
-  word-wrap@1.2.5:
-    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
-    engines: {node: '>=0.10.0'}
-
-  wrap-ansi@6.2.0:
-    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
-    engines: {node: '>=8'}
-
-  xml-name-validator@4.0.0:
-    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
-    engines: {node: '>=12'}
-
-  y18n@4.0.3:
-    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
-
-  yallist@3.1.1:
-    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
-
-  yaml@2.8.3:
-    resolution: {integrity: sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==}
-    engines: {node: '>= 14.6'}
-    hasBin: true
-
-  yargs-parser@18.1.3:
-    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
-    engines: {node: '>=6'}
-
-  yargs@15.4.1:
-    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
-    engines: {node: '>=8'}
-
-  yocto-queue@0.1.0:
-    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
-    engines: {node: '>=10'}
-
-snapshots:
-
-  '@babel/code-frame@7.29.0':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.28.5
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
-
-  '@babel/code-frame@7.29.7':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.29.7
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
-
-  '@babel/compat-data@7.29.7': {}
-
-  '@babel/core@7.29.7':
-    dependencies:
-      '@babel/code-frame': 7.29.7
-      '@babel/generator': 7.29.7
-      '@babel/helper-compilation-targets': 7.29.7
-      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
-      '@babel/helpers': 7.29.7
-      '@babel/parser': 7.29.7
-      '@babel/template': 7.29.7
-      '@babel/traverse': 7.29.7
-      '@babel/types': 7.29.7
-      '@jridgewell/remapping': 2.3.5
-      convert-source-map: 2.0.0
-      debug: 4.4.3
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/generator@7.29.1':
-    dependencies:
-      '@babel/parser': 7.29.2
-      '@babel/types': 7.29.0
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-      jsesc: 3.1.0
-
-  '@babel/generator@7.29.7':
-    dependencies:
-      '@babel/parser': 7.29.7
-      '@babel/types': 7.29.7
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-      jsesc: 3.1.0
-
-  '@babel/helper-annotate-as-pure@7.27.3':
-    dependencies:
-      '@babel/types': 7.29.0
-
-  '@babel/helper-compilation-targets@7.29.7':
-    dependencies:
-      '@babel/compat-data': 7.29.7
-      '@babel/helper-validator-option': 7.29.7
-      browserslist: 4.28.2
-      lru-cache: 5.1.1
-      semver: 6.3.1
-
-  '@babel/helper-create-class-features-plugin@7.28.6(@babel/core@7.29.7)':
-    dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-member-expression-to-functions': 7.28.5
-      '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/helper-replace-supers': 7.28.6(@babel/core@7.29.7)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/traverse': 7.29.0
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-globals@7.28.0': {}
-
-  '@babel/helper-globals@7.29.7': {}
-
-  '@babel/helper-member-expression-to-functions@7.28.5':
-    dependencies:
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-module-imports@7.28.6':
-    dependencies:
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-module-imports@7.29.7':
-    dependencies:
-      '@babel/traverse': 7.29.7
-      '@babel/types': 7.29.7
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7)':
-    dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-module-imports': 7.29.7
-      '@babel/helper-validator-identifier': 7.29.7
-      '@babel/traverse': 7.29.7
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-optimise-call-expression@7.27.1':
-    dependencies:
-      '@babel/types': 7.29.0
-
-  '@babel/helper-plugin-utils@7.28.6': {}
-
-  '@babel/helper-replace-supers@7.28.6(@babel/core@7.29.7)':
-    dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-member-expression-to-functions': 7.28.5
-      '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/traverse': 7.29.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
-    dependencies:
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-string-parser@7.27.1': {}
-
-  '@babel/helper-string-parser@7.29.7': {}
-
-  '@babel/helper-validator-identifier@7.28.5': {}
-
-  '@babel/helper-validator-identifier@7.29.7': {}
-
-  '@babel/helper-validator-option@7.29.7': {}
-
-  '@babel/helpers@7.29.7':
-    dependencies:
-      '@babel/template': 7.29.7
-      '@babel/types': 7.29.7
-
-  '@babel/parser@7.29.2':
-    dependencies:
-      '@babel/types': 7.29.0
-
-  '@babel/parser@7.29.7':
-    dependencies:
-      '@babel/types': 7.29.7
-
-  '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.7)':
-    dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.7)':
-    dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-typescript@7.28.6(@babel/core@7.29.7)':
-    dependencies:
-      '@babel/core': 7.29.7
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.7)
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.7)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/template@7.28.6':
-    dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/parser': 7.29.2
-      '@babel/types': 7.29.0
-
-  '@babel/template@7.29.7':
-    dependencies:
-      '@babel/code-frame': 7.29.7
-      '@babel/parser': 7.29.7
-      '@babel/types': 7.29.7
-
-  '@babel/traverse@7.29.0':
-    dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/generator': 7.29.1
-      '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.29.2
-      '@babel/template': 7.28.6
-      '@babel/types': 7.29.0
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/traverse@7.29.7':
-    dependencies:
-      '@babel/code-frame': 7.29.7
-      '@babel/generator': 7.29.7
-      '@babel/helper-globals': 7.29.7
-      '@babel/parser': 7.29.7
-      '@babel/template': 7.29.7
-      '@babel/types': 7.29.7
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/types@7.29.0':
-    dependencies:
-      '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.28.5
-
-  '@babel/types@7.29.7':
-    dependencies:
-      '@babel/helper-string-parser': 7.29.7
-      '@babel/helper-validator-identifier': 7.29.7
-
-  '@emnapi/core@1.11.1':
-    dependencies:
-      '@emnapi/wasi-threads': 1.2.2
-      tslib: 2.8.1
-    optional: true
-
-  '@emnapi/runtime@1.11.1':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
-  '@emnapi/wasi-threads@1.2.2':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
-  '@eslint-community/eslint-utils@4.9.1(eslint@10.2.0(jiti@2.6.1))':
-    dependencies:
-      eslint: 10.2.0(jiti@2.6.1)
-      eslint-visitor-keys: 3.4.3
-
-  '@eslint-community/regexpp@4.12.2': {}
-
-  '@eslint/config-array@0.23.5':
-    dependencies:
-      '@eslint/object-schema': 3.0.5
-      debug: 4.4.3
-      minimatch: 10.2.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@eslint/config-helpers@0.5.5':
-    dependencies:
-      '@eslint/core': 1.2.1
-
-  '@eslint/core@1.2.1':
-    dependencies:
-      '@types/json-schema': 7.0.15
-
-  '@eslint/object-schema@3.0.5': {}
-
-  '@eslint/plugin-kit@0.7.1':
-    dependencies:
-      '@eslint/core': 1.2.1
-      levn: 0.4.1
-
-  '@headlessui/vue@1.7.23(vue@3.5.32(typescript@6.0.2))':
-    dependencies:
-      '@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':
-    dependencies:
-      '@humanfs/core': 0.19.1
-      '@humanwhocodes/retry': 0.4.3
-
-  '@humanwhocodes/module-importer@1.0.1': {}
-
-  '@humanwhocodes/retry@0.4.3': {}
-
-  '@intlify/core-base@11.4.6':
-    dependencies:
-      '@intlify/devtools-types': 11.4.6
-      '@intlify/message-compiler': 11.4.6
-      '@intlify/shared': 11.4.6
-
-  '@intlify/devtools-types@11.4.6':
-    dependencies:
-      '@intlify/core-base': 11.4.6
-      '@intlify/shared': 11.4.6
-
-  '@intlify/message-compiler@11.4.6':
-    dependencies:
-      '@intlify/shared': 11.4.6
-      source-map-js: 1.2.1
-
-  '@intlify/shared@11.4.6': {}
-
-  '@jridgewell/gen-mapping@0.3.13':
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-      '@jridgewell/trace-mapping': 0.3.31
-
-  '@jridgewell/remapping@2.3.5':
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-
-  '@jridgewell/resolve-uri@3.1.2': {}
-
-  '@jridgewell/sourcemap-codec@1.5.5': {}
-
-  '@jridgewell/trace-mapping@0.3.31':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
-
-  '@lobehub/icons-static-svg@1.91.0': {}
-
-  '@napi-rs/wasm-runtime@1.1.5(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
-    dependencies:
-      '@emnapi/core': 1.11.1
-      '@emnapi/runtime': 1.11.1
-      '@tybys/wasm-util': 0.10.3
-    optional: true
-
-  '@nodelib/fs.scandir@2.1.5':
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
-
-  '@nodelib/fs.stat@2.0.5': {}
-
-  '@nodelib/fs.walk@1.2.8':
-    dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.20.1
-
-  '@oxc-project/types@0.137.0': {}
-
-  '@oxfmt/binding-android-arm-eabi@0.42.0':
-    optional: true
-
-  '@oxfmt/binding-android-arm64@0.42.0':
-    optional: true
-
-  '@oxfmt/binding-darwin-arm64@0.42.0':
-    optional: true
-
-  '@oxfmt/binding-darwin-x64@0.42.0':
-    optional: true
-
-  '@oxfmt/binding-freebsd-x64@0.42.0':
-    optional: true
-
-  '@oxfmt/binding-linux-arm-gnueabihf@0.42.0':
-    optional: true
-
-  '@oxfmt/binding-linux-arm-musleabihf@0.42.0':
-    optional: true
-
-  '@oxfmt/binding-linux-arm64-gnu@0.42.0':
-    optional: true
-
-  '@oxfmt/binding-linux-arm64-musl@0.42.0':
-    optional: true
-
-  '@oxfmt/binding-linux-ppc64-gnu@0.42.0':
-    optional: true
-
-  '@oxfmt/binding-linux-riscv64-gnu@0.42.0':
-    optional: true
-
-  '@oxfmt/binding-linux-riscv64-musl@0.42.0':
-    optional: true
-
-  '@oxfmt/binding-linux-s390x-gnu@0.42.0':
-    optional: true
-
-  '@oxfmt/binding-linux-x64-gnu@0.42.0':
-    optional: true
-
-  '@oxfmt/binding-linux-x64-musl@0.42.0':
-    optional: true
-
-  '@oxfmt/binding-openharmony-arm64@0.42.0':
-    optional: true
-
-  '@oxfmt/binding-win32-arm64-msvc@0.42.0':
-    optional: true
-
-  '@oxfmt/binding-win32-ia32-msvc@0.42.0':
-    optional: true
-
-  '@oxfmt/binding-win32-x64-msvc@0.42.0':
-    optional: true
-
-  '@oxlint/binding-android-arm-eabi@1.57.0':
-    optional: true
-
-  '@oxlint/binding-android-arm64@1.57.0':
-    optional: true
-
-  '@oxlint/binding-darwin-arm64@1.57.0':
-    optional: true
-
-  '@oxlint/binding-darwin-x64@1.57.0':
-    optional: true
-
-  '@oxlint/binding-freebsd-x64@1.57.0':
-    optional: true
-
-  '@oxlint/binding-linux-arm-gnueabihf@1.57.0':
-    optional: true
-
-  '@oxlint/binding-linux-arm-musleabihf@1.57.0':
-    optional: true
-
-  '@oxlint/binding-linux-arm64-gnu@1.57.0':
-    optional: true
-
-  '@oxlint/binding-linux-arm64-musl@1.57.0':
-    optional: true
-
-  '@oxlint/binding-linux-ppc64-gnu@1.57.0':
-    optional: true
-
-  '@oxlint/binding-linux-riscv64-gnu@1.57.0':
-    optional: true
-
-  '@oxlint/binding-linux-riscv64-musl@1.57.0':
-    optional: true
-
-  '@oxlint/binding-linux-s390x-gnu@1.57.0':
-    optional: true
-
-  '@oxlint/binding-linux-x64-gnu@1.57.0':
-    optional: true
-
-  '@oxlint/binding-linux-x64-musl@1.57.0':
-    optional: true
-
-  '@oxlint/binding-openharmony-arm64@1.57.0':
-    optional: true
-
-  '@oxlint/binding-win32-arm64-msvc@1.57.0':
-    optional: true
-
-  '@oxlint/binding-win32-ia32-msvc@1.57.0':
-    optional: true
-
-  '@oxlint/binding-win32-x64-msvc@1.57.0':
-    optional: true
-
-  '@rolldown/binding-android-arm64@1.1.2':
-    optional: true
-
-  '@rolldown/binding-darwin-arm64@1.1.2':
-    optional: true
-
-  '@rolldown/binding-darwin-x64@1.1.2':
-    optional: true
-
-  '@rolldown/binding-freebsd-x64@1.1.2':
-    optional: true
-
-  '@rolldown/binding-linux-arm-gnueabihf@1.1.2':
-    optional: true
-
-  '@rolldown/binding-linux-arm64-gnu@1.1.2':
-    optional: true
-
-  '@rolldown/binding-linux-arm64-musl@1.1.2':
-    optional: true
-
-  '@rolldown/binding-linux-ppc64-gnu@1.1.2':
-    optional: true
-
-  '@rolldown/binding-linux-s390x-gnu@1.1.2':
-    optional: true
-
-  '@rolldown/binding-linux-x64-gnu@1.1.2':
-    optional: true
-
-  '@rolldown/binding-linux-x64-musl@1.1.2':
-    optional: true
-
-  '@rolldown/binding-openharmony-arm64@1.1.2':
-    optional: true
-
-  '@rolldown/binding-wasm32-wasi@1.1.2':
-    dependencies:
-      '@emnapi/core': 1.11.1
-      '@emnapi/runtime': 1.11.1
-      '@napi-rs/wasm-runtime': 1.1.5(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
-    optional: true
-
-  '@rolldown/binding-win32-arm64-msvc@1.1.2':
-    optional: true
-
-  '@rolldown/binding-win32-x64-msvc@1.1.2':
-    optional: true
-
-  '@rolldown/pluginutils@1.0.0-rc.13': {}
-
-  '@rolldown/pluginutils@1.0.0-rc.15': {}
-
-  '@rolldown/pluginutils@1.0.1': {}
-
-  '@tailwindcss/node@4.2.2':
-    dependencies:
-      '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.20.1
-      jiti: 2.6.1
-      lightningcss: 1.32.0
-      magic-string: 0.30.21
-      source-map-js: 1.2.1
-      tailwindcss: 4.2.2
-
-  '@tailwindcss/oxide-android-arm64@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-darwin-arm64@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-darwin-x64@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-freebsd-x64@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide@4.2.2':
-    optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.2.2
-      '@tailwindcss/oxide-darwin-arm64': 4.2.2
-      '@tailwindcss/oxide-darwin-x64': 4.2.2
-      '@tailwindcss/oxide-freebsd-x64': 4.2.2
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.2
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.2
-      '@tailwindcss/oxide-linux-arm64-musl': 4.2.2
-      '@tailwindcss/oxide-linux-x64-gnu': 4.2.2
-      '@tailwindcss/oxide-linux-x64-musl': 4.2.2
-      '@tailwindcss/oxide-wasm32-wasi': 4.2.2
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.2
-      '@tailwindcss/oxide-win32-x64-msvc': 4.2.2
-
-  '@tailwindcss/typography@0.5.19(tailwindcss@4.2.2)':
-    dependencies:
-      postcss-selector-parser: 6.0.10
-      tailwindcss: 4.2.2
-
-  '@tailwindcss/vite@4.2.2(vite@8.1.0(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3))':
-    dependencies:
-      '@tailwindcss/node': 4.2.2
-      '@tailwindcss/oxide': 4.2.2
-      tailwindcss: 4.2.2
-      vite: 8.1.0(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3)
-
-  '@tanstack/virtual-core@3.13.23': {}
-
-  '@tanstack/vue-virtual@3.13.23(vue@3.5.32(typescript@6.0.2))':
-    dependencies:
-      '@tanstack/virtual-core': 3.13.23
-      vue: 3.5.32(typescript@6.0.2)
-
-  '@tauri-apps/api@2.11.1': {}
-
-  '@tauri-apps/plugin-dialog@2.7.1':
-    dependencies:
-      '@tauri-apps/api': 2.11.1
-
-  '@tauri-apps/plugin-notification@2.3.3':
-    dependencies:
-      '@tauri-apps/api': 2.11.1
-
-  '@tauri-apps/plugin-opener@2.5.4':
-    dependencies:
-      '@tauri-apps/api': 2.11.1
-
-  '@tsconfig/node24@24.0.4': {}
-
-  '@tybys/wasm-util@0.10.3':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
-  '@types/esrecurse@4.3.1': {}
-
-  '@types/estree@1.0.8': {}
-
-  '@types/json-schema@7.0.15': {}
-
-  '@types/node@24.12.2':
-    dependencies:
-      undici-types: 7.16.0
-
-  '@types/qrcode@1.5.6':
-    dependencies:
-      '@types/node': 24.12.2
-
-  '@types/trusted-types@2.0.7':
-    optional: true
-
-  '@typescript-eslint/eslint-plugin@8.58.1(@typescript-eslint/parser@8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)':
-    dependencies:
-      '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      '@typescript-eslint/scope-manager': 8.58.1
-      '@typescript-eslint/type-utils': 8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      '@typescript-eslint/utils': 8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      '@typescript-eslint/visitor-keys': 8.58.1
-      eslint: 10.2.0(jiti@2.6.1)
-      ignore: 7.0.5
-      natural-compare: 1.4.0
-      ts-api-utils: 2.5.0(typescript@6.0.2)
-      typescript: 6.0.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/parser@8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.58.1
-      '@typescript-eslint/types': 8.58.1
-      '@typescript-eslint/typescript-estree': 8.58.1(typescript@6.0.2)
-      '@typescript-eslint/visitor-keys': 8.58.1
-      debug: 4.4.3
-      eslint: 10.2.0(jiti@2.6.1)
-      typescript: 6.0.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/project-service@8.58.1(typescript@6.0.2)':
-    dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.58.1(typescript@6.0.2)
-      '@typescript-eslint/types': 8.58.1
-      debug: 4.4.3
-      typescript: 6.0.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/scope-manager@8.58.1':
-    dependencies:
-      '@typescript-eslint/types': 8.58.1
-      '@typescript-eslint/visitor-keys': 8.58.1
-
-  '@typescript-eslint/tsconfig-utils@8.58.1(typescript@6.0.2)':
-    dependencies:
-      typescript: 6.0.2
-
-  '@typescript-eslint/type-utils@8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)':
-    dependencies:
-      '@typescript-eslint/types': 8.58.1
-      '@typescript-eslint/typescript-estree': 8.58.1(typescript@6.0.2)
-      '@typescript-eslint/utils': 8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      debug: 4.4.3
-      eslint: 10.2.0(jiti@2.6.1)
-      ts-api-utils: 2.5.0(typescript@6.0.2)
-      typescript: 6.0.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/types@8.58.1': {}
-
-  '@typescript-eslint/typescript-estree@8.58.1(typescript@6.0.2)':
-    dependencies:
-      '@typescript-eslint/project-service': 8.58.1(typescript@6.0.2)
-      '@typescript-eslint/tsconfig-utils': 8.58.1(typescript@6.0.2)
-      '@typescript-eslint/types': 8.58.1
-      '@typescript-eslint/visitor-keys': 8.58.1
-      debug: 4.4.3
-      minimatch: 10.2.5
-      semver: 7.7.4
-      tinyglobby: 0.2.17
-      ts-api-utils: 2.5.0(typescript@6.0.2)
-      typescript: 6.0.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/utils@8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@10.2.0(jiti@2.6.1))
-      '@typescript-eslint/scope-manager': 8.58.1
-      '@typescript-eslint/types': 8.58.1
-      '@typescript-eslint/typescript-estree': 8.58.1(typescript@6.0.2)
-      eslint: 10.2.0(jiti@2.6.1)
-      typescript: 6.0.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/visitor-keys@8.58.1':
-    dependencies:
-      '@typescript-eslint/types': 8.58.1
-      eslint-visitor-keys: 5.0.1
-
-  '@vitejs/plugin-vue-jsx@5.1.5(vite@8.1.0(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3))(vue@3.5.32(typescript@6.0.2))':
-    dependencies:
-      '@babel/core': 7.29.7
-      '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.7)
-      '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.7)
-      '@rolldown/pluginutils': 1.0.0-rc.15
-      '@vue/babel-plugin-jsx': 2.0.1(@babel/core@7.29.7)
-      vite: 8.1.0(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3)
-      vue: 3.5.32(typescript@6.0.2)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@vitejs/plugin-vue@6.0.6(vite@8.1.0(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3))(vue@3.5.32(typescript@6.0.2))':
-    dependencies:
-      '@rolldown/pluginutils': 1.0.0-rc.13
-      vite: 8.1.0(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3)
-      vue: 3.5.32(typescript@6.0.2)
-
-  '@volar/language-core@2.4.28':
-    dependencies:
-      '@volar/source-map': 2.4.28
-
-  '@volar/source-map@2.4.28': {}
-
-  '@volar/typescript@2.4.28':
-    dependencies:
-      '@volar/language-core': 2.4.28
-      path-browserify: 1.0.1
-      vscode-uri: 3.1.0
-
-  '@vue/babel-helper-vue-transform-on@2.0.1': {}
-
-  '@vue/babel-plugin-jsx@2.0.1(@babel/core@7.29.7)':
-    dependencies:
-      '@babel/helper-module-imports': 7.28.6
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.7)
-      '@babel/template': 7.28.6
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
-      '@vue/babel-helper-vue-transform-on': 2.0.1
-      '@vue/babel-plugin-resolve-type': 2.0.1(@babel/core@7.29.7)
-      '@vue/shared': 3.5.32
-    optionalDependencies:
-      '@babel/core': 7.29.7
-    transitivePeerDependencies:
-      - supports-color
-
-  '@vue/babel-plugin-resolve-type@2.0.1(@babel/core@7.29.7)':
-    dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/core': 7.29.7
-      '@babel/helper-module-imports': 7.28.6
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/parser': 7.29.2
-      '@vue/compiler-sfc': 3.5.32
-    transitivePeerDependencies:
-      - supports-color
-
-  '@vue/compiler-core@3.5.32':
-    dependencies:
-      '@babel/parser': 7.29.2
-      '@vue/shared': 3.5.32
-      entities: 7.0.1
-      estree-walker: 2.0.2
-      source-map-js: 1.2.1
-
-  '@vue/compiler-dom@3.5.32':
-    dependencies:
-      '@vue/compiler-core': 3.5.32
-      '@vue/shared': 3.5.32
-
-  '@vue/compiler-sfc@3.5.32':
-    dependencies:
-      '@babel/parser': 7.29.2
-      '@vue/compiler-core': 3.5.32
-      '@vue/compiler-dom': 3.5.32
-      '@vue/compiler-ssr': 3.5.32
-      '@vue/shared': 3.5.32
-      estree-walker: 2.0.2
-      magic-string: 0.30.21
-      postcss: 8.5.10
-      source-map-js: 1.2.1
-
-  '@vue/compiler-ssr@3.5.32':
-    dependencies:
-      '@vue/compiler-dom': 3.5.32
-      '@vue/shared': 3.5.32
-
-  '@vue/devtools-api@6.6.4': {}
-
-  '@vue/devtools-api@7.7.9':
-    dependencies:
-      '@vue/devtools-kit': 7.7.9
-
-  '@vue/devtools-kit@7.7.9':
-    dependencies:
-      '@vue/devtools-shared': 7.7.9
-      birpc: 2.9.0
-      hookable: 5.5.3
-      mitt: 3.0.1
-      perfect-debounce: 1.0.0
-      speakingurl: 14.0.1
-      superjson: 2.2.6
-
-  '@vue/devtools-shared@7.7.9':
-    dependencies:
-      rfdc: 1.4.1
-
-  '@vue/eslint-config-typescript@14.7.0(eslint-plugin-vue@10.8.0(@typescript-eslint/parser@8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(vue-eslint-parser@10.4.0(eslint@10.2.0(jiti@2.6.1))))(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)':
-    dependencies:
-      '@typescript-eslint/utils': 8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      eslint: 10.2.0(jiti@2.6.1)
-      eslint-plugin-vue: 10.8.0(@typescript-eslint/parser@8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(vue-eslint-parser@10.4.0(eslint@10.2.0(jiti@2.6.1)))
-      fast-glob: 3.3.3
-      typescript-eslint: 8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      vue-eslint-parser: 10.4.0(eslint@10.2.0(jiti@2.6.1))
-    optionalDependencies:
-      typescript: 6.0.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@vue/language-core@3.2.6':
-    dependencies:
-      '@volar/language-core': 2.4.28
-      '@vue/compiler-dom': 3.5.32
-      '@vue/shared': 3.5.32
-      alien-signals: 3.1.2
-      muggle-string: 0.4.1
-      path-browserify: 1.0.1
-      picomatch: 4.0.4
-
-  '@vue/reactivity@3.5.32':
-    dependencies:
-      '@vue/shared': 3.5.32
-
-  '@vue/runtime-core@3.5.32':
-    dependencies:
-      '@vue/reactivity': 3.5.32
-      '@vue/shared': 3.5.32
-
-  '@vue/runtime-dom@3.5.32':
-    dependencies:
-      '@vue/reactivity': 3.5.32
-      '@vue/runtime-core': 3.5.32
-      '@vue/shared': 3.5.32
-      csstype: 3.2.3
-
-  '@vue/server-renderer@3.5.32(vue@3.5.32(typescript@6.0.2))':
-    dependencies:
-      '@vue/compiler-ssr': 3.5.32
-      '@vue/shared': 3.5.32
-      vue: 3.5.32(typescript@6.0.2)
-
-  '@vue/shared@3.5.32': {}
-
-  '@vue/tsconfig@0.9.1(typescript@6.0.2)(vue@3.5.32(typescript@6.0.2))':
-    optionalDependencies:
-      typescript: 6.0.2
-      vue: 3.5.32(typescript@6.0.2)
-
-  '@xterm/addon-fit@0.11.0': {}
-
-  '@xterm/addon-web-links@0.12.0': {}
-
-  '@xterm/xterm@6.0.0': {}
-
-  acorn-jsx@5.3.2(acorn@8.16.0):
-    dependencies:
-      acorn: 8.16.0
-
-  acorn@8.16.0: {}
-
-  ajv@6.14.0:
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-json-stable-stringify: 2.1.0
-      json-schema-traverse: 0.4.1
-      uri-js: 4.4.1
-
-  alien-signals@3.1.2: {}
-
-  ansi-regex@5.0.1: {}
-
-  ansi-styles@4.3.0:
-    dependencies:
-      color-convert: 2.0.1
-
-  ansi-styles@6.2.3: {}
-
-  balanced-match@4.0.4: {}
-
-  baseline-browser-mapping@2.10.18: {}
-
-  birpc@2.9.0: {}
-
-  boolbase@1.0.0: {}
-
-  brace-expansion@5.0.5:
-    dependencies:
-      balanced-match: 4.0.4
-
-  braces@3.0.3:
-    dependencies:
-      fill-range: 7.1.1
-
-  browserslist@4.28.2:
-    dependencies:
-      baseline-browser-mapping: 2.10.18
-      caniuse-lite: 1.0.30001787
-      electron-to-chromium: 1.5.335
-      node-releases: 2.0.37
-      update-browserslist-db: 1.2.3(browserslist@4.28.2)
-
-  camelcase@5.3.1: {}
-
-  caniuse-lite@1.0.30001787: {}
-
-  cliui@6.0.0:
-    dependencies:
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wrap-ansi: 6.2.0
-
-  color-convert@2.0.1:
-    dependencies:
-      color-name: 1.1.4
-
-  color-name@1.1.4: {}
-
-  convert-source-map@2.0.0: {}
-
-  copy-anything@4.0.5:
-    dependencies:
-      is-what: 5.5.0
-
-  cross-spawn@7.0.6:
-    dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
-
-  cssesc@3.0.0: {}
-
-  csstype@3.2.3: {}
-
-  debug@4.4.3:
-    dependencies:
-      ms: 2.1.3
-
-  decamelize@1.2.0: {}
-
-  deep-is@0.1.4: {}
-
-  detect-libc@2.1.2: {}
-
-  dijkstrajs@1.0.3: {}
-
-  dompurify@3.4.11:
-    optionalDependencies:
-      '@types/trusted-types': 2.0.7
-
-  electron-to-chromium@1.5.335: {}
-
-  emoji-regex@8.0.0: {}
-
-  enhanced-resolve@5.20.1:
-    dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.3.2
-
-  entities@7.0.1: {}
-
-  escalade@3.2.0: {}
-
-  escape-string-regexp@4.0.0: {}
-
-  eslint-config-prettier@10.1.8(eslint@10.2.0(jiti@2.6.1)):
-    dependencies:
-      eslint: 10.2.0(jiti@2.6.1)
-
-  eslint-plugin-oxlint@1.57.0(oxlint@1.57.0):
-    dependencies:
-      jsonc-parser: 3.3.1
-      oxlint: 1.57.0
-
-  eslint-plugin-vue@10.8.0(@typescript-eslint/parser@8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(vue-eslint-parser@10.4.0(eslint@10.2.0(jiti@2.6.1))):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@10.2.0(jiti@2.6.1))
-      eslint: 10.2.0(jiti@2.6.1)
-      natural-compare: 1.4.0
-      nth-check: 2.1.1
-      postcss-selector-parser: 7.1.1
-      semver: 7.7.4
-      vue-eslint-parser: 10.4.0(eslint@10.2.0(jiti@2.6.1))
-      xml-name-validator: 4.0.0
-    optionalDependencies:
-      '@typescript-eslint/parser': 8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-
-  eslint-scope@9.1.2:
-    dependencies:
-      '@types/esrecurse': 4.3.1
-      '@types/estree': 1.0.8
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-
-  eslint-visitor-keys@3.4.3: {}
-
-  eslint-visitor-keys@5.0.1: {}
-
-  eslint@10.2.0(jiti@2.6.1):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@10.2.0(jiti@2.6.1))
-      '@eslint-community/regexpp': 4.12.2
-      '@eslint/config-array': 0.23.5
-      '@eslint/config-helpers': 0.5.5
-      '@eslint/core': 1.2.1
-      '@eslint/plugin-kit': 0.7.1
-      '@humanfs/node': 0.16.7
-      '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.4.3
-      '@types/estree': 1.0.8
-      ajv: 6.14.0
-      cross-spawn: 7.0.6
-      debug: 4.4.3
-      escape-string-regexp: 4.0.0
-      eslint-scope: 9.1.2
-      eslint-visitor-keys: 5.0.1
-      espree: 11.2.0
-      esquery: 1.7.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 8.0.0
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      ignore: 5.3.2
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      json-stable-stringify-without-jsonify: 1.0.1
-      minimatch: 10.2.5
-      natural-compare: 1.4.0
-      optionator: 0.9.4
-    optionalDependencies:
-      jiti: 2.6.1
-    transitivePeerDependencies:
-      - supports-color
-
-  espree@11.2.0:
-    dependencies:
-      acorn: 8.16.0
-      acorn-jsx: 5.3.2(acorn@8.16.0)
-      eslint-visitor-keys: 5.0.1
-
-  esquery@1.7.0:
-    dependencies:
-      estraverse: 5.3.0
-
-  esrecurse@4.3.0:
-    dependencies:
-      estraverse: 5.3.0
-
-  estraverse@5.3.0: {}
-
-  estree-walker@2.0.2: {}
-
-  esutils@2.0.3: {}
-
-  fast-deep-equal@3.1.3: {}
-
-  fast-glob@3.3.3:
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.8
-
-  fast-json-stable-stringify@2.1.0: {}
-
-  fast-levenshtein@2.0.6: {}
-
-  fastq@1.20.1:
-    dependencies:
-      reusify: 1.1.0
-
-  fdir@6.5.0(picomatch@4.0.4):
-    optionalDependencies:
-      picomatch: 4.0.4
-
-  file-entry-cache@8.0.0:
-    dependencies:
-      flat-cache: 4.0.1
-
-  fill-range@7.1.1:
-    dependencies:
-      to-regex-range: 5.0.1
-
-  find-up@4.1.0:
-    dependencies:
-      locate-path: 5.0.0
-      path-exists: 4.0.0
-
-  find-up@5.0.0:
-    dependencies:
-      locate-path: 6.0.0
-      path-exists: 4.0.0
-
-  flat-cache@4.0.1:
-    dependencies:
-      flatted: 3.4.2
-      keyv: 4.5.4
-
-  flatted@3.4.2: {}
-
-  fsevents@2.3.3:
-    optional: true
-
-  gensync@1.0.0-beta.2: {}
-
-  get-caller-file@2.0.5: {}
-
-  glob-parent@5.1.2:
-    dependencies:
-      is-glob: 4.0.3
-
-  glob-parent@6.0.2:
-    dependencies:
-      is-glob: 4.0.3
-
-  graceful-fs@4.2.11: {}
-
-  highlight.js@11.11.1: {}
-
-  hookable@5.5.3: {}
-
-  ignore@5.3.2: {}
-
-  ignore@7.0.5: {}
-
-  imurmurhash@0.1.4: {}
-
-  is-extglob@2.1.1: {}
-
-  is-fullwidth-code-point@3.0.0: {}
-
-  is-glob@4.0.3:
-    dependencies:
-      is-extglob: 2.1.1
-
-  is-number@7.0.0: {}
-
-  is-what@5.5.0: {}
-
-  isexe@2.0.0: {}
-
-  isexe@3.1.5: {}
-
-  jiti@2.6.1: {}
-
-  js-tokens@4.0.0: {}
-
-  jsesc@3.1.0: {}
-
-  json-buffer@3.0.1: {}
-
-  json-parse-even-better-errors@4.0.0: {}
-
-  json-schema-traverse@0.4.1: {}
-
-  json-stable-stringify-without-jsonify@1.0.1: {}
-
-  json5@2.2.3: {}
-
-  jsonc-parser@3.3.1: {}
-
-  keyv@4.5.4:
-    dependencies:
-      json-buffer: 3.0.1
-
-  levn@0.4.1:
-    dependencies:
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-
-  lightningcss-android-arm64@1.32.0:
-    optional: true
-
-  lightningcss-darwin-arm64@1.32.0:
-    optional: true
-
-  lightningcss-darwin-x64@1.32.0:
-    optional: true
-
-  lightningcss-freebsd-x64@1.32.0:
-    optional: true
-
-  lightningcss-linux-arm-gnueabihf@1.32.0:
-    optional: true
-
-  lightningcss-linux-arm64-gnu@1.32.0:
-    optional: true
-
-  lightningcss-linux-arm64-musl@1.32.0:
-    optional: true
-
-  lightningcss-linux-x64-gnu@1.32.0:
-    optional: true
-
-  lightningcss-linux-x64-musl@1.32.0:
-    optional: true
-
-  lightningcss-win32-arm64-msvc@1.32.0:
-    optional: true
-
-  lightningcss-win32-x64-msvc@1.32.0:
-    optional: true
-
-  lightningcss@1.32.0:
-    dependencies:
-      detect-libc: 2.1.2
-    optionalDependencies:
-      lightningcss-android-arm64: 1.32.0
-      lightningcss-darwin-arm64: 1.32.0
-      lightningcss-darwin-x64: 1.32.0
-      lightningcss-freebsd-x64: 1.32.0
-      lightningcss-linux-arm-gnueabihf: 1.32.0
-      lightningcss-linux-arm64-gnu: 1.32.0
-      lightningcss-linux-arm64-musl: 1.32.0
-      lightningcss-linux-x64-gnu: 1.32.0
-      lightningcss-linux-x64-musl: 1.32.0
-      lightningcss-win32-arm64-msvc: 1.32.0
-      lightningcss-win32-x64-msvc: 1.32.0
-
-  locate-path@5.0.0:
-    dependencies:
-      p-locate: 4.1.0
-
-  locate-path@6.0.0:
-    dependencies:
-      p-locate: 5.0.0
-
-  lru-cache@5.1.1:
-    dependencies:
-      yallist: 3.1.1
-
-  magic-string@0.30.21:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-
-  marked-highlight@2.2.4(marked@18.0.2):
-    dependencies:
-      marked: 18.0.2
-
-  marked@18.0.2: {}
-
-  memorystream@0.3.1: {}
-
-  merge2@1.4.1: {}
-
-  micromatch@4.0.8:
-    dependencies:
-      braces: 3.0.3
-      picomatch: 2.3.2
-
-  minimatch@10.2.5:
-    dependencies:
-      brace-expansion: 5.0.5
-
-  mitt@3.0.1: {}
-
-  ms@2.1.3: {}
-
-  muggle-string@0.4.1: {}
-
-  nanoid@3.3.12: {}
-
-  natural-compare@1.4.0: {}
-
-  node-releases@2.0.37: {}
-
-  npm-normalize-package-bin@4.0.0: {}
-
-  npm-run-all2@8.0.4:
-    dependencies:
-      ansi-styles: 6.2.3
-      cross-spawn: 7.0.6
-      memorystream: 0.3.1
-      picomatch: 4.0.4
-      pidtree: 0.6.0
-      read-package-json-fast: 4.0.0
-      shell-quote: 1.8.4
-      which: 5.0.0
-
-  nth-check@2.1.1:
-    dependencies:
-      boolbase: 1.0.0
-
-  optionator@0.9.4:
-    dependencies:
-      deep-is: 0.1.4
-      fast-levenshtein: 2.0.6
-      levn: 0.4.1
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-      word-wrap: 1.2.5
-
-  oxfmt@0.42.0:
-    dependencies:
-      tinypool: 2.1.0
-    optionalDependencies:
-      '@oxfmt/binding-android-arm-eabi': 0.42.0
-      '@oxfmt/binding-android-arm64': 0.42.0
-      '@oxfmt/binding-darwin-arm64': 0.42.0
-      '@oxfmt/binding-darwin-x64': 0.42.0
-      '@oxfmt/binding-freebsd-x64': 0.42.0
-      '@oxfmt/binding-linux-arm-gnueabihf': 0.42.0
-      '@oxfmt/binding-linux-arm-musleabihf': 0.42.0
-      '@oxfmt/binding-linux-arm64-gnu': 0.42.0
-      '@oxfmt/binding-linux-arm64-musl': 0.42.0
-      '@oxfmt/binding-linux-ppc64-gnu': 0.42.0
-      '@oxfmt/binding-linux-riscv64-gnu': 0.42.0
-      '@oxfmt/binding-linux-riscv64-musl': 0.42.0
-      '@oxfmt/binding-linux-s390x-gnu': 0.42.0
-      '@oxfmt/binding-linux-x64-gnu': 0.42.0
-      '@oxfmt/binding-linux-x64-musl': 0.42.0
-      '@oxfmt/binding-openharmony-arm64': 0.42.0
-      '@oxfmt/binding-win32-arm64-msvc': 0.42.0
-      '@oxfmt/binding-win32-ia32-msvc': 0.42.0
-      '@oxfmt/binding-win32-x64-msvc': 0.42.0
-
-  oxlint@1.57.0:
-    optionalDependencies:
-      '@oxlint/binding-android-arm-eabi': 1.57.0
-      '@oxlint/binding-android-arm64': 1.57.0
-      '@oxlint/binding-darwin-arm64': 1.57.0
-      '@oxlint/binding-darwin-x64': 1.57.0
-      '@oxlint/binding-freebsd-x64': 1.57.0
-      '@oxlint/binding-linux-arm-gnueabihf': 1.57.0
-      '@oxlint/binding-linux-arm-musleabihf': 1.57.0
-      '@oxlint/binding-linux-arm64-gnu': 1.57.0
-      '@oxlint/binding-linux-arm64-musl': 1.57.0
-      '@oxlint/binding-linux-ppc64-gnu': 1.57.0
-      '@oxlint/binding-linux-riscv64-gnu': 1.57.0
-      '@oxlint/binding-linux-riscv64-musl': 1.57.0
-      '@oxlint/binding-linux-s390x-gnu': 1.57.0
-      '@oxlint/binding-linux-x64-gnu': 1.57.0
-      '@oxlint/binding-linux-x64-musl': 1.57.0
-      '@oxlint/binding-openharmony-arm64': 1.57.0
-      '@oxlint/binding-win32-arm64-msvc': 1.57.0
-      '@oxlint/binding-win32-ia32-msvc': 1.57.0
-      '@oxlint/binding-win32-x64-msvc': 1.57.0
-
-  p-limit@2.3.0:
-    dependencies:
-      p-try: 2.2.0
-
-  p-limit@3.1.0:
-    dependencies:
-      yocto-queue: 0.1.0
-
-  p-locate@4.1.0:
-    dependencies:
-      p-limit: 2.3.0
-
-  p-locate@5.0.0:
-    dependencies:
-      p-limit: 3.1.0
-
-  p-try@2.2.0: {}
-
-  path-browserify@1.0.1: {}
-
-  path-exists@4.0.0: {}
-
-  path-key@3.1.1: {}
-
-  perfect-debounce@1.0.0: {}
-
-  picocolors@1.1.1: {}
-
-  picomatch@2.3.2: {}
-
-  picomatch@4.0.4: {}
-
-  pidtree@0.6.0: {}
-
-  pinia@3.0.4(typescript@6.0.2)(vue@3.5.32(typescript@6.0.2)):
-    dependencies:
-      '@vue/devtools-api': 7.7.9
-      vue: 3.5.32(typescript@6.0.2)
-    optionalDependencies:
-      typescript: 6.0.2
-
-  pngjs@5.0.0: {}
-
-  postcss-selector-parser@6.0.10:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
-  postcss-selector-parser@7.1.1:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
-  postcss@8.5.10:
-    dependencies:
-      nanoid: 3.3.12
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
-
-  postcss@8.5.15:
-    dependencies:
-      nanoid: 3.3.12
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
-
-  prelude-ls@1.2.1: {}
-
-  punycode@2.3.1: {}
-
-  qrcode@1.5.4:
-    dependencies:
-      dijkstrajs: 1.0.3
-      pngjs: 5.0.0
-      yargs: 15.4.1
-
-  queue-microtask@1.2.3: {}
-
-  read-package-json-fast@4.0.0:
-    dependencies:
-      json-parse-even-better-errors: 4.0.0
-      npm-normalize-package-bin: 4.0.0
-
-  require-directory@2.1.1: {}
-
-  require-main-filename@2.0.0: {}
-
-  reusify@1.1.0: {}
-
-  rfdc@1.4.1: {}
-
-  rolldown@1.1.2:
-    dependencies:
-      '@oxc-project/types': 0.137.0
-      '@rolldown/pluginutils': 1.0.1
-    optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.1.2
-      '@rolldown/binding-darwin-arm64': 1.1.2
-      '@rolldown/binding-darwin-x64': 1.1.2
-      '@rolldown/binding-freebsd-x64': 1.1.2
-      '@rolldown/binding-linux-arm-gnueabihf': 1.1.2
-      '@rolldown/binding-linux-arm64-gnu': 1.1.2
-      '@rolldown/binding-linux-arm64-musl': 1.1.2
-      '@rolldown/binding-linux-ppc64-gnu': 1.1.2
-      '@rolldown/binding-linux-s390x-gnu': 1.1.2
-      '@rolldown/binding-linux-x64-gnu': 1.1.2
-      '@rolldown/binding-linux-x64-musl': 1.1.2
-      '@rolldown/binding-openharmony-arm64': 1.1.2
-      '@rolldown/binding-wasm32-wasi': 1.1.2
-      '@rolldown/binding-win32-arm64-msvc': 1.1.2
-      '@rolldown/binding-win32-x64-msvc': 1.1.2
-
-  run-parallel@1.2.0:
-    dependencies:
-      queue-microtask: 1.2.3
-
-  semver@6.3.1: {}
-
-  semver@7.7.4: {}
-
-  set-blocking@2.0.0: {}
-
-  shebang-command@2.0.0:
-    dependencies:
-      shebang-regex: 3.0.0
-
-  shebang-regex@3.0.0: {}
-
-  shell-quote@1.8.4: {}
-
-  source-map-js@1.2.1: {}
-
-  speakingurl@14.0.1: {}
-
-  string-width@4.2.3:
-    dependencies:
-      emoji-regex: 8.0.0
-      is-fullwidth-code-point: 3.0.0
-      strip-ansi: 6.0.1
-
-  strip-ansi@6.0.1:
-    dependencies:
-      ansi-regex: 5.0.1
-
-  superjson@2.2.6:
-    dependencies:
-      copy-anything: 4.0.5
-
-  tailwindcss@4.2.2: {}
-
-  tapable@2.3.2: {}
-
-  tinyglobby@0.2.17:
-    dependencies:
-      fdir: 6.5.0(picomatch@4.0.4)
-      picomatch: 4.0.4
-
-  tinypool@2.1.0: {}
-
-  to-regex-range@5.0.1:
-    dependencies:
-      is-number: 7.0.0
-
-  ts-api-utils@2.5.0(typescript@6.0.2):
-    dependencies:
-      typescript: 6.0.2
-
-  tslib@2.8.1:
-    optional: true
-
-  type-check@0.4.0:
-    dependencies:
-      prelude-ls: 1.2.1
-
-  typescript-eslint@8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2):
-    dependencies:
-      '@typescript-eslint/eslint-plugin': 8.58.1(@typescript-eslint/parser@8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      '@typescript-eslint/parser': 8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      '@typescript-eslint/typescript-estree': 8.58.1(typescript@6.0.2)
-      '@typescript-eslint/utils': 8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      eslint: 10.2.0(jiti@2.6.1)
-      typescript: 6.0.2
-    transitivePeerDependencies:
-      - supports-color
-
-  typescript@6.0.2: {}
-
-  undici-types@7.16.0: {}
-
-  update-browserslist-db@1.2.3(browserslist@4.28.2):
-    dependencies:
-      browserslist: 4.28.2
-      escalade: 3.2.0
-      picocolors: 1.1.1
-
-  uri-js@4.4.1:
-    dependencies:
-      punycode: 2.3.1
-
-  util-deprecate@1.0.2: {}
-
-  vite@8.1.0(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3):
-    dependencies:
-      lightningcss: 1.32.0
-      picomatch: 4.0.4
-      postcss: 8.5.15
-      rolldown: 1.1.2
-      tinyglobby: 0.2.17
-    optionalDependencies:
-      '@types/node': 24.12.2
-      fsevents: 2.3.3
-      jiti: 2.6.1
-      yaml: 2.8.3
-
-  vscode-uri@3.1.0: {}
-
-  vue-eslint-parser@10.4.0(eslint@10.2.0(jiti@2.6.1)):
-    dependencies:
-      debug: 4.4.3
-      eslint: 10.2.0(jiti@2.6.1)
-      eslint-scope: 9.1.2
-      eslint-visitor-keys: 5.0.1
-      espree: 11.2.0
-      esquery: 1.7.0
-      semver: 7.7.4
-    transitivePeerDependencies:
-      - supports-color
-
-  vue-i18n@11.4.6(vue@3.5.32(typescript@6.0.2)):
-    dependencies:
-      '@intlify/core-base': 11.4.6
-      '@intlify/devtools-types': 11.4.6
-      '@intlify/shared': 11.4.6
-      '@vue/devtools-api': 6.6.4
-      vue: 3.5.32(typescript@6.0.2)
-
-  vue-tsc@3.2.6(typescript@6.0.2):
-    dependencies:
-      '@volar/typescript': 2.4.28
-      '@vue/language-core': 3.2.6
-      typescript: 6.0.2
-
-  vue@3.5.32(typescript@6.0.2):
-    dependencies:
-      '@vue/compiler-dom': 3.5.32
-      '@vue/compiler-sfc': 3.5.32
-      '@vue/runtime-dom': 3.5.32
-      '@vue/server-renderer': 3.5.32(vue@3.5.32(typescript@6.0.2))
-      '@vue/shared': 3.5.32
-    optionalDependencies:
-      typescript: 6.0.2
-
-  which-module@2.0.1: {}
-
-  which@2.0.2:
-    dependencies:
-      isexe: 2.0.0
-
-  which@5.0.0:
-    dependencies:
-      isexe: 3.1.5
-
-  word-wrap@1.2.5: {}
-
-  wrap-ansi@6.2.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-
-  xml-name-validator@4.0.0: {}
-
-  y18n@4.0.3: {}
-
-  yallist@3.1.1: {}
-
-  yaml@2.8.3:
-    optional: true
-
-  yargs-parser@18.1.3:
-    dependencies:
-      camelcase: 5.3.1
-      decamelize: 1.2.0
-
-  yargs@15.4.1:
-    dependencies:
-      cliui: 6.0.0
-      decamelize: 1.2.0
-      find-up: 4.1.0
-      get-caller-file: 2.0.5
-      require-directory: 2.1.1
-      require-main-filename: 2.0.0
-      set-blocking: 2.0.0
-      string-width: 4.2.3
-      which-module: 2.0.1
-      y18n: 4.0.3
-      yargs-parser: 18.1.3
-
-  yocto-queue@0.1.0: {}
diff --git a/web/pnpm-workspace.yaml b/web/pnpm-workspace.yaml
deleted file mode 100644
index 783a7063..00000000
--- a/web/pnpm-workspace.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-overrides:
-  shell-quote: '>=1.8.4'
-  '@babel/core': '^7.29.6'
diff --git a/web-react/src/App.tsx b/web/src/App.tsx
similarity index 85%
rename from web-react/src/App.tsx
rename to web/src/App.tsx
index 309eca7d..89b92bf1 100644
--- a/web-react/src/App.tsx
+++ b/web/src/App.tsx
@@ -52,6 +52,7 @@ import { TopBar } from './components/TopBar'
 import { RightPanel } from './components/RightPanel'
 import { TerminalPanel } from './components/TerminalPanel'
 import { RemoteConnectWizard } from './components/RemoteConnectWizard'
+import type { RemotePrefill } from './lib/remote'
 
 export default function App() {
   const dispatch = useAppDispatch()
@@ -177,6 +178,7 @@ function Shell({ activeView }: { activeView: 'chat' | 'automations' | 'channels'
   const [bottomPanelHeight, setBottomPanelHeight] = useState(260)
   const [activeRun, setActiveRun] = useState<AutomationRun | null>(null)
   const [remoteWizardOpen, setRemoteWizardOpen] = useState(false)
+  const [remotePrefill, setRemotePrefill] = useState<RemotePrefill | null>(null)
 
   const openRun = useCallback((run: AutomationRun) => {
     setActiveRun(run)
@@ -223,7 +225,9 @@ function Shell({ activeView }: { activeView: 'chat' | 'automations' | 'channels'
   }, [togglePanel])
 
   useEffect(() => {
-    function onOpenRemote() {
+    function onOpenRemote(e: Event) {
+      const detail = (e as CustomEvent<RemotePrefill | null>).detail
+      setRemotePrefill(detail ?? null)
       setRemoteWizardOpen(true)
     }
     window.addEventListener('jcode:open-remote-connect', onOpenRemote)
@@ -264,44 +268,59 @@ function Shell({ activeView }: { activeView: 'chat' | 'automations' | 'channels'
             />
           )}
 
-          <div className="workspace-frame flex min-h-0 flex-1 overflow-hidden">
-            <Sidebar />
+          {/* Sidebar floats on the shell background — no border, no shared frame
+              with the main canvas (matches Vue App.vue). */}
+          <Sidebar />
 
-            <main className="workspace-main relative flex min-w-0 flex-1 flex-col">
-              {activeView === 'chat' && <ChatView />}
-              {activeView === 'automations' && <AutomationsView onOpenRun={openRun} />}
-              {activeView === 'channels' && <ChannelsView />}
-              {activeView === 'automation-run' && (
-                <AutomationRunReplay run={activeRun} onBack={closeRun} />
-              )}
+          {/* Main column: the chat/page surface is an inset rounded card with
+              breathing room; its left corners are fully rounded because the
+              sidebar is outside the card. */}
+          <main className="workspace-main relative flex min-h-0 min-w-0 flex-1 flex-col">
+            {activeView === 'chat' && <ChatView />}
+            {activeView === 'automations' && <AutomationsView onOpenRun={openRun} />}
+            {activeView === 'channels' && <ChannelsView />}
+            {activeView === 'automation-run' && (
+              <AutomationRunReplay run={activeRun} onBack={closeRun} />
+            )}
 
-              {/* Bottom panel (terminal) */}
-              {bottomPanel === 'terminal' && (
-                <div className="relative shrink-0 border-t border-[var(--color-border)]" style={{ height: bottomPanelHeight }}>
-                  <div
-                    className="absolute -top-1 left-0 right-0 z-10 h-2 cursor-row-resize"
-                    onMouseDown={startResize}
-                  >
-                    <div className="absolute left-1/2 top-[3px] h-1 w-8 -translate-x-1/2 rounded-full bg-[var(--color-border)]" />
-                  </div>
-                  <TerminalPanel onClose={() => setBottomPanel('none')} />
+            {/* Bottom panel (terminal) — lives under the inset surface. */}
+            {bottomPanel === 'terminal' && (
+              <div className="relative shrink-0 border-t border-[var(--color-border)]" style={{ height: bottomPanelHeight }}>
+                <div
+                  className="absolute -top-1 left-0 right-0 z-10 h-2 cursor-row-resize"
+                  onMouseDown={startResize}
+                >
+                  <div className="absolute left-1/2 top-[3px] h-1 w-8 -translate-x-1/2 rounded-full bg-[var(--color-border)]" />
                 </div>
-              )}
-            </main>
-
-            {/* Right panel (files/changes/plan) */}
-            {rightPanelOpen && (
-              <RightPanel
-                activeTab={rightPanelTab}
-                onClose={() => setRightPanelOpen(false)}
-                onSwitchTab={setRightPanelTab}
-              />
+                <TerminalPanel onClose={() => setBottomPanel('none')} />
+              </div>
             )}
-          </div>
+          </main>
+
+          {/* Right panel (files/changes/plan) — sibling of main, like Vue. */}
+          {rightPanelOpen && (
+            <RightPanel
+              activeTab={rightPanelTab}
+              onClose={() => setRightPanelOpen(false)}
+              onSwitchTab={setRightPanelTab}
+            />
+          )}
 
           {paletteOpen && <CommandPalette />}
           <SettingsDialog />
-          <RemoteConnectWizard open={remoteWizardOpen} onClose={() => setRemoteWizardOpen(false)} />
+          <RemoteConnectWizard
+            open={remoteWizardOpen}
+            prefill={remotePrefill}
+            onClose={() => {
+              setRemoteWizardOpen(false)
+              setRemotePrefill(null)
+            }}
+            onBound={() => {
+              setRemoteWizardOpen(false)
+              setRemotePrefill(null)
+              dispatch(uiActions.setSettingsOpen(false))
+            }}
+          />
         </div>
       </ToolRegistryProvider>
     </RuntimeProvider>
@@ -320,7 +339,7 @@ function AutomationRunReplay({ run, onBack }: { run: AutomationRun | null; onBac
   }
 
   return (
-    <div className="flex min-h-0 flex-1 flex-col">
+    <div className="page-surface flex min-h-0 flex-1 flex-col">
       <header className="flex shrink-0 flex-col gap-2 border-b border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-3">
         <button
           type="button"
diff --git a/web/src/App.vue b/web/src/App.vue
deleted file mode 100644
index 06ccf42a..00000000
--- a/web/src/App.vue
+++ /dev/null
@@ -1,975 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, nextTick, watch, onUnmounted, provide } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { ChevronDoubleDownIcon } from '@heroicons/vue/24/outline'
-import { normalizeMode } from '@/types/api'
-import type { RemoteMeta } from '@/types/api'
-import { useChatStore } from '@/stores/chat'
-import { useProjectStore } from '@/stores/project'
-import { useWebSocket } from '@/composables/ws'
-import { api } from '@/composables/api'
-import { useAuthToken, clearAuthToken, setAuthExpiredHandler } from '@/composables/authToken'
-import { useTheme } from '@/composables/useTheme'
-import { useBranch } from '@/composables/useBranch'
-import ChatMessageVue from '@/components/ChatMessage.vue'
-import ToolCallCard from '@/components/ToolCallCard.vue'
-import ApprovalBanner from '@/components/ApprovalBanner.vue'
-import GoalBanner from '@/components/GoalBanner.vue'
-import ChatInput from '@/components/ChatInput.vue'
-import Sidebar from '@/components/Sidebar.vue'
-import SettingsDialog from '@/components/SettingsDialog.vue'
-import ProjectSwitcher from '@/components/ProjectSwitcher.vue'
-import RemoteConnectWizard from '@/components/RemoteConnectWizard.vue'
-import TerminalPanel from '@/components/TerminalPanel.vue'
-import RightPanel from '@/components/RightPanel.vue'
-import SetupView from '@/components/SetupView.vue'
-import TokenGate from '@/components/TokenGate.vue'
-import TopBar from '@/components/TopBar.vue'
-import CommandPalette from '@/components/CommandPalette.vue'
-import AutomationsView from '@/components/AutomationsView.vue'
-import AutomationRunView from '@/components/AutomationRunView.vue'
-import ChannelsView from '@/components/ChannelsView.vue'
-import { useNotifications } from '@/composables/notifications'
-import { useAutomationStore } from '@/stores/automation'
-import type { AutomationRun } from '@/types/automation'
-
-const store = useChatStore()
-const projectStore = useProjectStore()
-const automationStore = useAutomationStore()
-const { t } = useI18n()
-const { resolvedTheme, toggleTheme } = useTheme()
-const { refresh: refreshBranch } = useBranch()
-const { ensurePermission, notify } = useNotifications()
-const messagesEl = ref<HTMLDivElement | null>(null)
-const settingsOpen = ref(false)
-const projectsOpen = ref(false)
-const paletteOpen = ref(false)
-// View switch inside the shell: the main column shows either the chat canvas,
-// the Automations page, the Channels page, or an automation run detail page.
-// Unlike the dialog overlays (Settings/Projects), this is a real page change —
-// each renders as a wrapped inset surface that shares <main>'s geometry with
-// the chat panel, not a full-bleed takeover.
-const activeView = ref<'chat' | 'automations' | 'channels' | 'automation-run'>('chat')
-// The run drilled into from the Automations page (clicking a run row, or Run
-// again from a card). Resolved against the automation it belongs to so the
-// detail header can show the name + schedule.
-const activeRun = ref<AutomationRun | null>(null)
-
-// Remote-connect (SSH) wizard. `openRemoteConnect` is provided to descendants
-// (WorkspacePicker, ProjectSwitcher, Sidebar) so any of them can launch or
-// prefill it for a reconnect.
-const remoteWizardOpen = ref(false)
-const remotePrefill = ref<(RemoteMeta & { loadTaskUuid?: string }) | null>(null)
-function openRemoteConnect(prefill?: RemoteMeta & { loadTaskUuid?: string }) {
-  remotePrefill.value = prefill ?? null
-  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())
-// Sidebar "+" on a workspace row: switch to that workspace (full workspace-scoped
-// reload, like onProjectSwitched) but land on a fresh welcome screen so the next
-// message starts a brand-new task there — instead of restoring its last session.
-provide('onNewTaskInProject', (path: string) => startNewTaskInProject(path))
-// Switch the shell back to the chat page. Provided to the sidebar so the
-// "New task" button (and any other chat-bound nav) returns from the Automations
-// page to a fresh chat instead of doing nothing behind the overlay.
-provide('goToChat', () => { activeView.value = 'chat' })
-
-// 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
-// Settings and would dismiss it (dropping the user back to the workspace), so we
-// ignore Settings' close requests while the wizard is open. Settings then closes
-// only via its own Back button, or programmatically when a remote bind succeeds.
-function onSettingsClose() {
-  if (remoteWizardOpen.value) return
-  settingsOpen.value = false
-}
-const needsSetup = ref(false)
-const needsAuth = ref(false)
-const authToken = useAuthToken()
-
-// Honor reduced-motion for the new-task ↔ conversation composer transition.
-const reduceMotion = ref(
-  typeof window !== 'undefined' && window.matchMedia
-    ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
-    : false,
-)
-
-function onPaletteAction(name: 'settings' | 'projects' | 'theme') {
-  if (name === 'settings') settingsOpen.value = true
-  else if (name === 'projects') projectsOpen.value = true
-  else if (name === 'theme') toggleTheme()
-}
-
-// Drill into an automation run detail page from the Automations list. Resolves
-// the parent automation (for the header name + schedule) from the store.
-function openAutomationRun(run: AutomationRun) {
-  activeRun.value = run
-  activeView.value = 'automation-run'
-}
-// The automation backing the active run detail view (best-effort lookup by id).
-function automationForRun(run: AutomationRun | null) {
-  if (!run) return null
-  return automationStore.items.find((a) => a.id === run.automation_id) ?? null
-}
-
-const bottomPanel = ref<'none' | 'terminal'>('none')
-const bottomPanelHeight = ref(260)
-const isResizingPanel = ref(false)
-const rightPanelOpen = ref(false)
-const rightPanelTab = ref<'files' | 'changes' | 'plan'>('files')
-
-// Scroll-to-bottom
-const isAtBottom = ref(true)
-const showScrollBtn = ref(false)
-
-function checkScrollPosition() {
-  if (!messagesEl.value) return
-  const el = messagesEl.value
-  const threshold = 80
-  isAtBottom.value = el.scrollHeight - el.scrollTop - el.clientHeight < threshold
-  showScrollBtn.value = !isAtBottom.value
-}
-
-function scrollToBottom(smooth = true) {
-  if (!messagesEl.value) return
-  messagesEl.value.scrollTo({
-    top: messagesEl.value.scrollHeight,
-    behavior: smooth ? 'smooth' : 'instant',
-  })
-}
-
-// Sending a message is an explicit action: snap to the latest even if the user
-// had scrolled up into history. Marking atBottom also re-arms the timeline watch
-// so the streaming reply keeps following.
-function onComposerSent() {
-  isAtBottom.value = true
-  nextTick(() => scrollToBottom())
-}
-
-// WebSocket connection
-const { connected } = useWebSocket({
-  activeTaskId: () => store.currentSessionId,
-  onTaskStatus: (taskId, running) => {
-    // Live sidebar running indicator for ANY task (incl. backgrounded ones).
-    projectStore.setTaskRunning(taskId, running)
-    // Keep the composer's Stop/Send button in sync with the *viewed* task, so a
-    // run that starts or stops while you're looking at it flips the button live
-    // (task_status is the one event that reaches us for the active task without
-    // a fresh agent_start/agent_done round-trip).
-    if (taskId === store.currentSessionId) store.isRunning = running
-    // Re-sync persisted status + recency/order from the server.
-    projectStore.fetchAllTasks()
-  },
-  onAgentStart: () => { store.isRunning = true },
-  onAgentText: (data) => store.appendAgentText(data.text),
-  onToolCall: (data) => store.addToolCall(data.name, data.args, data.tool_call_id, data.display_info),
-  onToolResult: (data) => store.resolveToolCall(data.name, data.output, data.tool_call_id, data.error, data.display_output),
-  onTokenUpdate: (data) => { store.tokenInfo = data },
-  onAgentDone: (data) => {
-    store.agentDone(data?.error)
-    notify(data?.error ? t('notifications.taskFailed') : t('notifications.taskFinished'), data?.error || t('notifications.finishedBody'))
-  },
-  onTodoUpdate: () => store.fetchTodos(),
-  onGoalUpdate: (data) => { store.goal = data },
-  onApprovalRequest: (data) => {
-    store.addApprovalRequest(data)
-    notify(t('notifications.approvalNeeded'), t('notifications.approvalBody'))
-  },
-  onAskUserRequest: (data) => store.attachAskUserRequest(data.id, data.questions, data.task_id),
-  onSessionReset: () => store.clearChat(),
-  onModelChanged: (data) => {
-    store.providerName = data.provider
-    store.modelName = data.model
-  },
-  onModeChanged: (data) => {
-    store.mode = normalizeMode(data.mode)
-    store.autoApprove = store.mode === 'full_access'
-  },
-  onApprovalModeChanged: (data) => {
-    store.autoApprove = data.auto_approve
-    if (data.auto_approve) store.mode = 'full_access'
-    else if (store.mode === 'full_access') store.mode = 'approval'
-  },
-  onSubagentProgress: (data) => {
-    store.addSubagentProgress(data.agent_name, data.event, data.tool_name, data.detail)
-  },
-  onUserMessage: (data) => {
-    store.addMessage('user', data.content, data.source || undefined)
-    store.isRunning = true
-  },
-})
-
-watch(connected, (val) => { store.wsConnected = val })
-
-// Auto-scroll when timeline changes (only if user is at bottom)
-watch(
-  () => store.timeline.length + (store.messages.length > 0 ? store.messages[store.messages.length - 1]?.content?.length || 0 : 0),
-  () => {
-    if (isAtBottom.value) {
-      nextTick(() => scrollToBottom(false))
-    }
-  },
-)
-
-// Global keyboard shortcuts
-function handleGlobalKeydown(e: KeyboardEvent) {
-  if ((e.ctrlKey || e.metaKey) && (e.key === 'k' || e.key === 'K')) {
-    e.preventDefault()
-    paletteOpen.value = !paletteOpen.value
-    return
-  }
-  // ⌘N — New task. (Used to be ⌘⇧N; ⌘N is the conventional "new" binding.) The
-  // other app shortcuts keep a Shift modifier, so ⌘N alone never collides with
-  // ⌘⇧K / ⌘⇧E etc. Ignored while the user is typing in a field only if it would
-  // conflict with the browser's native "new window" — but in the Tauri shell
-  // there's no such binding, and on web the preventDefault keeps it ours.
-  if ((e.ctrlKey || e.metaKey) && !e.shiftKey && (e.key === 'n' || e.key === 'N')) {
-    e.preventDefault()
-    store.newSession()
-    return
-  }
-  if ((e.ctrlKey || e.metaKey) && e.key === ',') {
-    e.preventDefault()
-    settingsOpen.value = !settingsOpen.value
-    return
-  }
-  // Automations / Channels are reached only via the nav buttons — they no longer
-  // have keyboard shortcuts (the ⌘⇧A / ⌘⇧C bindings were removed). Esc still
-  // steps back from these pages to chat.
-  // 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 &&
-    activeView.value === 'chat'
-  ) {
-    e.preventDefault()
-    store.stopAgent()
-    return
-  }
-  // On a non-chat page (Automations/Channels/automation-run, no overlay open)
-  // Esc steps back one level: from a run detail → the Automations page, and
-  // from Automations/Channels → chat. It should not also kill a running agent,
-  // mirroring the overlay-dismissal guard above.
-  if (
-    e.key === 'Escape' &&
-    !settingsOpen.value &&
-    !projectsOpen.value &&
-    !paletteOpen.value &&
-    !remoteWizardOpen.value &&
-    activeView.value !== 'chat'
-  ) {
-    e.preventDefault()
-    if (activeView.value === 'automation-run') activeView.value = 'automations'
-    else activeView.value = 'chat'
-    return
-  }
-  if ((e.ctrlKey || e.metaKey) && e.key === '`') {
-    e.preventDefault()
-    togglePanel('terminal')
-    return
-  }
-  if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'E') {
-    e.preventDefault()
-    togglePanel('files')
-    return
-  }
-  if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'G') {
-    e.preventDefault()
-    togglePanel('changes')
-    return
-  }
-  if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'P') {
-    e.preventDefault()
-    togglePanel('plan')
-    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()
-  refreshBranch()
-  store.fetchModels()
-  store.fetchModelState()
-  store.fetchSessions()
-  store.fetchApprovalMode()
-  store.fetchChannelState()
-  if (store.pwd) {
-    projectStore.ensureCurrentProject(store.pwd)
-  }
-}
-
-// 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
-    // Auth gate must run BEFORE the setup gate: /api/setup/* is itself protected,
-    // so without a valid token the wizard's own calls would 401.
-    if (health.auth_required) {
-      if (!authToken.value) {
-        needsAuth.value = true
-        return
-      }
-      const res = await verifyToken(authToken.value)
-      if (res === 'invalid') {
-        needsAuth.value = true
-        return
-      }
-      if (res === 'error') {
-        // Transport/5xx: the stored token may still be valid — surface as a
-        // connection error (retryable) rather than forcing the login gate.
-        connectionError.value = true
-        return
-      }
-    }
-    needsAuth.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)
-  // A 401 from any request (e.g. a token that expired mid-session) routes here.
-  // Idempotent: only clear when we actually hold a token, so boot-time parallel
-  // 401s (the fire-and-forget status() before the gate) don't loop the gate.
-  setAuthExpiredHandler(() => {
-    if (authToken.value) clearAuthToken()
-    needsAuth.value = true
-  })
-  ensurePermission()
-  await boot()
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleGlobalKeydown)
-  setAuthExpiredHandler(null)
-  if (runTimer) clearInterval(runTimer)
-})
-
-function openFile() {
-  // Open file in right panel files tab
-  rightPanelOpen.value = true
-  rightPanelTab.value = 'files'
-}
-
-function togglePanel(panel: 'terminal' | 'files' | 'changes' | 'plan') {
-  if (panel === 'terminal') {
-    bottomPanel.value = bottomPanel.value === 'terminal' ? 'none' : 'terminal'
-    return
-  }
-  // files, changes, and plan toggle the right panel
-  if (rightPanelOpen.value && rightPanelTab.value === panel) {
-    rightPanelOpen.value = false
-  } else {
-    rightPanelOpen.value = true
-    rightPanelTab.value = panel
-  }
-}
-
-// Auto-open the Plan tab once when a plan first appears during an active run.
-// Gated on isRunning so page loads and session switches (not running) never
-// seize the panel, and one-shot per run so a manual close is respected for the
-// rest of that run. A new run re-arms the one-shot.
-const planAutoOpened = ref(false)
-// Elapsed-time counter for the "Thinking…" footer; ticks once per second while
-// the agent runs, resets on each new run. Appears in the UI only after 2s.
-// Re-read the git branch whenever the active workspace changes (every switch
-// path — the composer's WorkspacePicker, the projects modal, opening a task in
-// another project, a remote connect — funnels through fetchHealth, which updates
-// store.pwd). Without this, switching from a non-git workspace to a git one left
-// the branch picker blank.
-watch(() => store.pwd, (pwd) => { if (pwd) refreshBranch() })
-
-const elapsed = ref(0)
-let runTimer: ReturnType<typeof setInterval> | null = null
-watch(() => store.isRunning, (running) => {
-  if (running) {
-    planAutoOpened.value = false
-    elapsed.value = 0
-    if (runTimer) clearInterval(runTimer)
-    runTimer = setInterval(() => { elapsed.value++ }, 1000)
-  } else if (runTimer) {
-    clearInterval(runTimer)
-    runTimer = null
-  }
-})
-watch(() => store.todos.length, (len) => {
-  if (len > 0 && store.isRunning && !planAutoOpened.value && !rightPanelOpen.value) {
-    rightPanelOpen.value = true
-    rightPanelTab.value = 'plan'
-    planAutoOpened.value = true
-  }
-})
-
-async function onProjectSwitched() {
-  await store.fetchHealth()
-  store.clearChat()
-  // 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()
-}
-
-// Switch to a workspace (if not already active) and open a fresh welcome screen
-// there, so the next message starts a new task in it. Mirrors onProjectSwitched's
-// workspace-scoped reload but deliberately skips restoreCurrentSession — the
-// whole point is a blank composer, not the project's last conversation.
-async function startNewTaskInProject(path: string): Promise<boolean> {
-  const active = projectStore.activeProject?.path || store.pwd
-  if (path !== active) {
-    const ok = await projectStore.openProject(path)
-    if (!ok) return false
-    await store.fetchHealth()
-    loadWorkspaceState()
-  }
-  await store.newSession()
-  return true
-}
-
-// 'ok' = token valid; 'invalid' = server returned 401; 'error' = transport/5xx,
-// so the stored token may still be good and we should not force the login gate.
-async function verifyToken(candidate: string): Promise<'ok' | 'invalid' | 'error'> {
-  try {
-    await api.authVerify(candidate)
-    return 'ok'
-  } catch (e) {
-    return (e as { status?: number })?.status === 401 ? 'invalid' : 'error'
-  }
-}
-
-// TokenGate already persisted the token; re-run boot so health/setup/workspace
-// all load with the token in place.
-function onAuthed() {
-  needsAuth.value = false
-  boot()
-}
-
-function onSetupComplete() {
-  needsSetup.value = false
-  connectionError.value = false
-  // Now load everything (fresh setup → no prior session to restore).
-  loadWorkspaceState()
-}
-
-// Panel resize
-function startResize(e: MouseEvent) {
-  e.preventDefault()
-  isResizingPanel.value = true
-  const startY = e.clientY
-  const startH = bottomPanelHeight.value
-  function onMove(ev: MouseEvent) {
-    const diff = startY - ev.clientY
-    bottomPanelHeight.value = Math.max(120, Math.min(600, startH + diff))
-  }
-  function onUp() {
-    isResizingPanel.value = false
-    document.removeEventListener('mousemove', onMove)
-    document.removeEventListener('mouseup', onUp)
-  }
-  document.addEventListener('mousemove', onMove)
-  document.addEventListener('mouseup', onUp)
-}
-</script>
-
-<template>
-  <!-- One continuous surface: sidebar, top bar and chat area share a single
-       background with no hard dividers, so the regions read as one enclosed
-       space (包裹感) rather than separately-bordered panels. -->
-  <div class="app-shell relative flex h-[100dvh] overflow-hidden transition-colors duration-300" style="background: var(--color-background); color: var(--color-foreground);">
-    <!-- Native title-bar drag strip. Only rendered (via CSS) inside the macOS
-         desktop shell, where the window uses an overlay title bar: it reserves
-         the band the traffic-light buttons float over and lets the user drag
-         the window. A no-op empty element in the browser. -->
-    <div class="titlebar-drag" data-tauri-drag-region aria-hidden="true" />
-
-    <!-- The single top-right control (panel menu + connection dot), floated into
-         the title-bar zone — there is no separate top bar anymore. It carries the
-         chat-context panels (Plan/Files/Changes/Terminal), so it's hidden on the
-         Automations page: those panels don't apply there and the chip would
-         crowd the page's own header controls in the top-right corner. -->
-    <TopBar
-      v-if="activeView === 'chat'"
-      :is-running="store.isRunning"
-      :ws-connected="store.wsConnected"
-      :active-panel="rightPanelOpen ? rightPanelTab : 'none'"
-      :terminal-open="bottomPanel === 'terminal'"
-      @toggle-panel="togglePanel"
-    />
-
-    <!-- Sidebar — always visible (no collapse toggle on the desktop shell). -->
-    <Sidebar
-      :active-view="activeView"
-      @open-file="openFile"
-      @open-settings="settingsOpen = true"
-      @open-projects="projectsOpen = true"
-      @open-automations="activeView = 'automations'"
-      @open-channels="activeView = 'channels'"
-      @show-chat="activeView = 'chat'"
-      @toggle-theme="toggleTheme"
-      :resolved-theme="resolvedTheme"
-    />
-
-    <!-- Main content — shell tone (same as sidebar); the conversation lives in
-         an inset surface panel below, so it reads as one continuous shell that
-         wraps a distinct chat canvas (包裹感). -->
-    <main class="flex-1 flex flex-col min-w-0 relative">
-      <!-- Chat area — inset surface panel: distinct tone, rounded, wrapped with
-           breathing room so it reads as a distinct chat canvas (包裹感).
-           v-show (not v-if): when the user navigates to the Automations page we
-           keep the chat DOM mounted so its scroll position and streaming state
-           survive the round-trip. -->
-
-      <div v-show="activeView === 'chat'" class="chat-panel flex-1 flex flex-col min-h-0 relative">
-        <!-- Smoothly hand off between the centered new-task composer and the
-             docked conversation composer: the welcome slides down + fades out and
-             the conversation rises + fades in, so the composer reads as settling
-             at the bottom. No `appear`: an `appear` + `mode="out-in"` initial
-             enter could stick at opacity-0 and leave the whole new-task screen
-             invisible. The welcome now renders at full opacity on first load;
-             the welcome↔conversation crossfade still plays on message send. -->
-        <transition
-          :css="!reduceMotion"
-          enter-active-class="transition-all duration-300 ease-out"
-          enter-from-class="opacity-0 translate-y-3"
-          enter-to-class="opacity-100 translate-y-0"
-          leave-active-class="transition-all duration-200 ease-in"
-          leave-from-class="opacity-100 translate-y-0"
-          leave-to-class="opacity-0 translate-y-4"
-          mode="out-in"
-        >
-        <!-- New-task welcome: the composer lives in the CENTER of the canvas
-             (with its workspace chip on top) until the first message is sent. -->
-        <div
-          v-if="!store.hasMessages"
-          key="welcome"
-          class="welcome flex-1 flex flex-col items-center px-6 overflow-y-auto"
-        >
-          <!-- Soft brand-tinted aura gives the empty canvas a focal point. -->
-          <div class="welcome-aura" aria-hidden="true" />
-
-          <!-- Top half: the hero floats just above the centered composer. -->
-          <div class="welcome-hero flex-1 min-h-0 flex flex-col items-center justify-end pb-10">
-            <div class="welcome-logo select-none">
-              <span class="wl-dim">[</span><span class="wl-j">J</span><span class="wl-fg">CODE</span><span class="wl-dim">]</span>
-            </div>
-            <h2 class="welcome-title">
-              {{ t('welcome.startIn', { project: store.projectName || 'jcode' }) }}
-            </h2>
-            <p class="welcome-sub">
-              <i18n-t keypath="welcome.subtitle" tag="span">
-                <template #kbd><kbd class="welcome-kbd">/</kbd></template>
-              </i18n-t>
-            </p>
-          </div>
-
-          <!-- Composer sits on the vertical centerline. Its pickers open
-               downward into the empty lower half (room above is tighter). -->
-          <div class="welcome-composer w-full max-w-2xl">
-            <ChatInput picker-placement="bottom" @sent="onComposerSent" />
-          </div>
-
-          <!-- Bottom half balances the center. -->
-          <div class="flex-1 min-h-0" aria-hidden="true" />
-        </div>
-
-        <!-- Active conversation: scrollable timeline + bottom composer. -->
-        <div v-else key="convo" class="flex-1 flex flex-col min-h-0">
-          <div
-            ref="messagesEl"
-            class="messages-feather flex-1 overflow-y-auto scroll-smooth rounded-t-[13px]"
-            @scroll="checkScrollPosition"
-          >
-            <div class="max-w-4xl mx-auto px-5 py-6 space-y-0.5">
-              <template v-for="item in store.timeline" :key="item.seq">
-                <ChatMessageVue
-                  v-if="item.kind === 'message'"
-                  :message="item.data"
-                  :can-edit="item.data.role === 'user' && !store.isRunning"
-                  class="animate-fade-up"
-                  @edit="(text) => store.editAndResend(item.data.id, text)"
-                />
-                <ToolCallCard v-else-if="item.kind === 'tool'" :tool="item.data" class="animate-fade-up pl-9" />
-                <ApprovalBanner v-else-if="item.kind === 'approval'" :approval="item.data" class="animate-fade-up" />
-              </template>
-
-              <!-- Thinking footer: single source of truth for "agent is working".
-                   Trails the last timeline item, rides existing auto-scroll, and
-                   stays visible the whole run (initial wait AND while content
-                   accumulates) — not only when the timeline is empty. -->
-              <transition
-                enter-active-class="transition-opacity duration-300 ease-out"
-                enter-from-class="opacity-0"
-                enter-to-class="opacity-100"
-                leave-active-class="transition-opacity duration-150 ease-in"
-                leave-from-class="opacity-100"
-                leave-to-class="opacity-0"
-              >
-                <div
-                  v-if="store.isRunning"
-                  class="flex items-center gap-2.5 py-3 pl-9 select-none"
-                  role="status"
-                  aria-live="polite"
-                  :aria-label="t('chat.thinking')"
-                >
-                  <span class="flex gap-1" aria-hidden="true">
-                    <span class="w-1.5 h-1.5 rounded-full animate-dot-pulse" style="background: var(--color-accent-neutral); animation-delay: 0ms" />
-                    <span class="w-1.5 h-1.5 rounded-full animate-dot-pulse" style="background: var(--color-accent-neutral); animation-delay: 160ms" />
-                    <span class="w-1.5 h-1.5 rounded-full animate-dot-pulse" style="background: var(--color-accent-neutral); animation-delay: 320ms" />
-                  </span>
-                  <span class="thinking-label text-[13px]" style="font-family: var(--font-sans)">{{ t('chat.thinking') }}</span>
-                  <span
-                    v-if="elapsed >= 2"
-                    class="text-xs tabular-nums"
-                    style="font-family: var(--font-mono); color: var(--color-muted-foreground); opacity: 0.6"
-                  >{{ elapsed }}s</span>
-                </div>
-              </transition>
-            </div>
-          </div>
-
-          <!-- Scroll-to-bottom button -->
-          <!-- 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"
-            >
-              <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>
-
-          <!-- Composer shares the messages' centered max-w-4xl column with the
-               same px-5 inset, so the input box's left edge lines up with the
-               message avatars (and its right edge with the content). -->
-          <div class="w-full max-w-4xl mx-auto">
-            <GoalBanner />
-            <ChatInput @sent="onComposerSent" />
-          </div>
-        </div>
-        </transition>
-      </div>
-
-      <!-- Automations page — renders inside <main> as a sibling of the chat
-           canvas, wrapped in the same inset-surface geometry so it reads as a
-           page within the shell (包裹感), not a full-bleed overlay. Only mounted
-           while active so its data fetch fires on entry and tears down on exit.
-           open-run hands a clicked run up so the shell can swap to the run
-           detail page. -->
-      <AutomationsView
-        v-if="activeView === 'automations'"
-        class="flex-1 flex flex-col min-h-0"
-        @open-run="openAutomationRun"
-      />
-
-      <!-- Automation run detail — the "content page" for a run: replays the
-           run's session as a read-only timeline (same ChatMessage + ToolCallCard
-           vocabulary as the chat canvas), framed by a run-summary header and a
-           Run-again/Stop footer. -->
-      <AutomationRunView
-        v-if="activeView === 'automation-run' && activeRun"
-        class="flex-1 flex flex-col min-h-0"
-        :run="activeRun"
-        :automation="automationForRun(activeRun)"
-        @back="activeView = 'automations'"
-      />
-
-      <!-- Channels page — same inset-surface geometry as Automations (both use
-           the shared PageSurface); mounted only while active so its
-           channel-status fetch + WeChat scan poll run on entry and tear down on
-           exit. -->
-      <ChannelsView
-        v-if="activeView === 'channels'"
-        class="flex-1 flex flex-col min-h-0"
-      />
-
-      <!-- Bottom panel -->
-      <div
-        v-if="bottomPanel !== 'none'"
-        class="relative"
-        style="border-top: 1px solid var(--color-border)"
-        :style="{ height: bottomPanelHeight + 'px' }"
-      >
-        <!-- Resize handle -->
-        <div
-          class="absolute -top-1 left-0 right-0 h-2 cursor-row-resize z-10 group"
-          @mousedown="startResize"
-        >
-          <div class="absolute top-[3px] left-1/2 -translate-x-1/2 w-8 h-1 rounded-full transition-colors" style="background: var(--color-border)" />
-        </div>
-        <TerminalPanel v-if="bottomPanel === 'terminal'" @close="bottomPanel = 'none'" />
-      </div>
-    </main>
-
-    <!-- Right Panel -->
-    <transition
-      enter-active-class="transition-all duration-200 ease-out"
-      enter-from-class="translate-x-4 opacity-0"
-      enter-to-class="translate-x-0 opacity-100"
-      leave-active-class="transition-all duration-150 ease-in"
-      leave-from-class="translate-x-0 opacity-100"
-      leave-to-class="translate-x-4 opacity-0"
-    >
-      <RightPanel
-        v-if="rightPanelOpen"
-        :active-tab="rightPanelTab"
-        @close="rightPanelOpen = false"
-        @switch-tab="(tab) => rightPanelTab = tab"
-      />
-    </transition>
-
-    <SettingsDialog :open="settingsOpen" @close="onSettingsClose" />
-    <ProjectSwitcher :open="projectsOpen" @close="projectsOpen = false" @project-switched="onProjectSwitched" />
-    <RemoteConnectWizard
-      :open="remoteWizardOpen"
-      :prefill="remotePrefill"
-      @close="remoteWizardOpen = false"
-      @bound="remoteWizardOpen = false; settingsOpen = false"
-    />
-    <CommandPalette :open="paletteOpen" @close="paletteOpen = false" @action="onPaletteAction" />
-
-    <!-- Auth gate — shown when the server requires a token (non-loopback bind)
-         and we don't yet have a valid one. Sits above setup because the setup
-         endpoints are themselves token-protected. -->
-    <TokenGate v-if="needsAuth" @authed="onAuthed" />
-
-    <!-- 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">{{ t('connection.errorTitle') }}</div>
-        <div class="conn-error-msg">{{ t('connection.errorBody') }}</div>
-        <button class="conn-error-retry" :disabled="booting" @click="boot">
-          {{ booting ? t('connection.retrying') : t('connection.retry') }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-/* 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-accent-neutral);
-  color: var(--color-surface);
-  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;
-}
-
-/* Feather (羽化) the bottom edge of the timeline so messages softly dissolve
-   into the surface as they meet the composer, instead of being hard-cut. A mask
-   is background-agnostic (content goes transparent, revealing the panel behind)
-   so it adapts to light/dark with no color to maintain. The fade height tracks
-   the timeline's bottom padding (py-6 ≈ 24px) so the last message stays crisp at
-   rest and only fades while scrolling past the edge. */
-.messages-feather {
-  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
-  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
-}
-
-/* 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) — 包裹感. */
-.chat-panel {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-2xl);
-  /* Top margin clears the floating panel control at the top-right, so it sits
-     in a band above the surface instead of overlapping its corner. On the
-     desktop shell the 28px title-bar strip already provides most of it (see the
-     is-tauri-macos override in style.css). A bit of extra band leaves the
-     floating chip in open space instead of touching the panel's top corner. */
-  margin: 48px 14px 14px;
-  /* NOT overflow:hidden — that would clip the composer's upward model/slash
-     menus on short viewports. The scroll area rounds its own top corners
-     (rounded-t) and the composer is inset, so the panel corners stay clean. */
-  box-shadow: var(--shadow-sm);
-}
-
-/* ─── New-task welcome ─── composer on the vertical centerline, hero floating
-   above it, a soft brand-tinted aura behind for focus, and small accents (the
-   glowing J, the orange project name) so the empty state reads as designed. */
-.welcome {
-  position: relative;
-}
-.welcome-aura {
-  position: absolute;
-  z-index: 0;
-  top: 40%;
-  left: 50%;
-  width: min(640px, 78%);
-  height: 420px;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-  background: radial-gradient(
-    ellipse at center,
-    color-mix(in srgb, var(--color-primary) 13%, transparent),
-    transparent 70%
-  );
-  filter: blur(6px);
-}
-.welcome-hero,
-.welcome-composer {
-  position: relative;
-  z-index: 1;
-}
-.welcome-logo {
-  display: flex;
-  align-items: center;
-  font-family: var(--font-mono);
-  font-size: 26px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  margin-bottom: 26px;
-}
-.welcome-logo .wl-dim {
-  color: var(--color-text-muted, var(--color-muted-foreground));
-}
-.welcome-logo .wl-j {
-  color: var(--color-primary);
-  text-shadow: 0 0 22px color-mix(in srgb, var(--color-primary) 50%, transparent);
-}
-.welcome-logo .wl-fg {
-  color: var(--color-foreground);
-}
-.welcome-title {
-  font-family: var(--font-sans);
-  font-size: 30px;
-  font-weight: 600;
-  line-height: 1.1;
-  letter-spacing: -0.025em;
-  color: var(--color-foreground);
-  text-align: center;
-  margin-bottom: 12px;
-  text-wrap: balance;
-}
-.welcome-project {
-  color: var(--color-primary);
-}
-.welcome-sub {
-  max-width: 24rem;
-  font-size: 13.5px;
-  line-height: 1.6;
-  color: var(--color-muted-foreground);
-  text-align: center;
-}
-.welcome-kbd {
-  padding: 1px 6px;
-  font-family: var(--font-mono);
-  font-size: 10px;
-  border-radius: var(--radius-sm);
-  background: var(--color-muted);
-  border: 1px solid var(--color-border);
-}
-
-@media (max-width: 640px) {
-  .chat-panel {
-    margin: 2px 8px 8px;
-  }
-}
-</style>
diff --git a/web-react/src/app/hooks.ts b/web/src/app/hooks.ts
similarity index 100%
rename from web-react/src/app/hooks.ts
rename to web/src/app/hooks.ts
diff --git a/web-react/src/app/runtime.ts b/web/src/app/runtime.ts
similarity index 100%
rename from web-react/src/app/runtime.ts
rename to web/src/app/runtime.ts
diff --git a/web-react/src/app/store.ts b/web/src/app/store.ts
similarity index 100%
rename from web-react/src/app/store.ts
rename to web/src/app/store.ts
diff --git a/web-react/src/app/wsBridge.ts b/web/src/app/wsBridge.ts
similarity index 97%
rename from web-react/src/app/wsBridge.ts
rename to web/src/app/wsBridge.ts
index 327dd010..f469de2e 100644
--- a/web-react/src/app/wsBridge.ts
+++ b/web/src/app/wsBridge.ts
@@ -27,6 +27,7 @@ export function createWSHandlers(
 ): WSHandlers {
   return {
     activeTaskId: () => getState().session.currentSessionId || undefined,
+    onConnectionChange: (connected) => dispatch(sessionActions.setWsConnected(connected)),
     onAgentStart: () => dispatch(chatActions.setRunning(true)),
     onAgentText: (d) => dispatch(chatActions.appendAgentText(d.text)),
     onToolCall: (d) =>
diff --git a/web/src/components/ApprovalBanner.vue b/web/src/components/ApprovalBanner.vue
deleted file mode 100644
index 2de1d64a..00000000
--- a/web/src/components/ApprovalBanner.vue
+++ /dev/null
@@ -1,376 +0,0 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import {
-  ShieldCheckIcon,
-  ShieldExclamationIcon,
-  CommandLineIcon,
-  PencilSquareIcon,
-  DocumentTextIcon,
-  ExclamationTriangleIcon,
-  ChevronDownIcon,
-} from '@heroicons/vue/24/outline'
-import { useI18n } from 'vue-i18n'
-import type { PendingApproval } from '@/types/api'
-import { useChatStore } from '@/stores/chat'
-
-const props = defineProps<{
-  approval: PendingApproval
-}>()
-
-const store = useChatStore()
-const { t } = useI18n()
-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 {
-    return JSON.stringify(JSON.parse(args), null, 2).slice(0, 300)
-  } catch {
-    return args.slice(0, 300)
-  }
-}
-
-// Tool identity — icon + verb + the primary target (the path or command), so
-// the card reads WHAT before WHY before WHAT TO DO. The verb and icon are
-// keyed off the tool name; the target is pulled from the parsed args so it
-// shows inline without a click.
-interface ToolIdentity { icon: typeof CommandLineIcon; verb: string }
-const toolIdentity = computed<ToolIdentity>(() => {
-  switch (props.approval.tool_name) {
-    case 'execute':   return { icon: CommandLineIcon,    verb: t('approval.runCommand') }
-    case 'write':     return { icon: DocumentTextIcon,   verb: t('approval.createFile') }
-    case 'edit':
-    case 'multi_edit':return { icon: PencilSquareIcon,   verb: t('approval.editFile') }
-    default:          return { icon: PencilSquareIcon,   verb: t('approval.toolAction', { name: props.approval.tool_name }) }
-  }
-})
-
-// The one argument a user actually judges — the path for file tools, the
-// command for execute. Pulled from tool_args so it shows inline by default;
-// the full payload stays behind the "show args" toggle.
-const primaryTarget = computed<string | null>(() => {
-  try {
-    const parsed = JSON.parse(props.approval.tool_args)
-    if (typeof parsed === 'object' && parsed) {
-      if (typeof parsed.command === 'string') return parsed.command
-      if (typeof parsed.path === 'string') return parsed.path
-      if (typeof parsed.file_path === 'string') return parsed.file_path
-    }
-  } catch { /* not JSON */ }
-  return null
-})
-</script>
-
-<template>
-  <!-- ─── RESOLVED — dissolves into the borderless tool-row stream ─── -->
-  <div
-    v-if="approval.resolved"
-    class="pl-9 animate-fade-up"
-  >
-    <div class="flex items-center gap-1.5 py-1">
-      <!-- Shield glyph carries the resolved state (success / destructive) -->
-      <ShieldCheckIcon
-        v-if="approval.approved"
-        class="w-3.5 h-3.5 shrink-0"
-        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"
-        :style="{ color: approval.approved ? 'var(--color-success-fg)' : 'var(--color-error-fg)' }"
-      >{{ approval.approved ? t('approval.allowed') : t('approval.denied') }}</span>
-      <span v-if="approval.is_external" class="text-[10px] shrink-0" style="color: var(--color-muted-foreground)">{{ t('approval.external') }}</span>
-    </div>
-  </div>
-
-  <!-- ─── PENDING — a decision card: surface + 1px border + 3px left accent.
-       Leads with the tool identity (icon tile + verb), shows the primary
-       target inline, and a strict three-tier button ramp. ─── -->
-  <div
-    v-else
-    class="ap-card relative my-2 overflow-hidden animate-fade-up"
-  >
-    <!-- Left accent bar — the one chromatic signal, warning-tinted. -->
-    <span
-      class="approval-accent absolute left-0 top-0 bottom-0"
-      style="width: 3px; background: var(--color-warning-fg)"
-      aria-hidden="true"
-    />
-
-    <div class="ap-main">
-      <!-- Tool identity tile — same squircle primitive as the model mark and
-           the mode tile, warning-tinted because every approval is a pause. -->
-      <div class="ap-tool">
-        <component :is="toolIdentity.icon" class="w-4 h-4" aria-hidden="true" />
-      </div>
-
-      <div class="ap-body">
-        <!-- Header: verb + external chip -->
-        <div class="ap-head">
-          <span class="ap-verb">{{ toolIdentity.verb }}</span>
-          <span
-            v-if="approval.is_external"
-            class="ap-chip"
-          >
-            <ExclamationTriangleIcon class="ap-chip-icon" aria-hidden="true" />
-            {{ t('approval.externalPath') }}
-          </span>
-        </div>
-
-        <!-- Primary target — the path/command, shown inline by default. -->
-        <div v-if="primaryTarget" class="ap-target">{{ primaryTarget }}</div>
-        <div v-else class="ap-target ap-target-mono">{{ approval.tool_name }}</div>
-
-        <!-- Full payload — quiet toggle, collapsed by default. -->
-        <button
-          v-if="approval.tool_args && approval.tool_args !== '{}'"
-          type="button"
-          class="ap-args-toggle"
-          :aria-expanded="showArgs"
-          :aria-label="t('approval.toggleArgs')"
-          @click="showArgs = !showArgs"
-        >
-          <ChevronDownIcon
-            class="ap-args-chev"
-            :class="{ 'ap-args-chev-open': showArgs }"
-            aria-hidden="true"
-          />
-          {{ showArgs ? t('approval.hideArgs') : t('approval.showArgs') }}
-        </button>
-        <pre
-          v-if="showArgs"
-          class="ap-args"
-        >{{ formatArgs(approval.tool_args) }}</pre>
-      </div>
-
-      <!-- Buttons: clear 3-tier hierarchy (primary / outlined / ghost). All
-           disabled while a decision POST is in flight to prevent double-submit. -->
-      <div class="ap-actions" :class="{ 'approval-busy': approval.resolving }">
-        <button
-          type="button"
-          class="ap-btn ap-btn-yes"
-          :disabled="approval.resolving"
-          @click="store.resolveApproval(approval.id, true, false)"
-        >
-          {{ t('approval.allowOnce') }}
-        </button>
-        <button
-          type="button"
-          class="ap-btn ap-btn-all"
-          :class="{ armed: armingAllowAll }"
-          :title="armingAllowAll ? t('approval.confirmHint') : t('approval.allowAllTitle')"
-          :disabled="approval.resolving"
-          @click="armingAllowAll
-            ? store.resolveApproval(approval.id, true, true)
-            : (armingAllowAll = true)"
-          @blur="armingAllowAll = false"
-        >
-          {{ armingAllowAll ? t('approval.confirm') : t('approval.allowAll') }}
-        </button>
-        <button
-          type="button"
-          class="ap-btn ap-btn-no"
-          :disabled="approval.resolving"
-          @click="store.resolveApproval(approval.id, false)"
-        >
-          {{ t('approval.deny') }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.ap-card {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-sm);
-}
-
-/* Subtle attention pulse on the accent bar — opacity-only, no glow flood. */
-@keyframes accent-breathe {
-  0%, 100% { opacity: 0.55; }
-  50% { opacity: 1; }
-}
-.approval-accent {
-  animation: accent-breathe 2.4s ease-in-out infinite;
-}
-
-.ap-main {
-  display: flex;
-  align-items: stretch;
-  gap: 14px;
-  padding: 13px 14px 13px 17px;
-}
-
-/* Tool identity tile — warning-tinted squircle, the same shape used for the
-   provider mark and the mode tile, so "an icon in a soft squircle" is the
-   project's one identity primitive. */
-.ap-tool {
-  width: 34px;
-  height: 34px;
-  flex-shrink: 0;
-  display: grid;
-  place-items: center;
-  border-radius: var(--radius-md);
-  background: var(--color-warning-bg);
-  color: var(--color-warning-fg);
-  align-self: flex-start;
-}
-
-.ap-body {
-  flex: 1;
-  min-width: 0;
-}
-.ap-head {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 2px;
-}
-.ap-verb {
-  font-size: 12.5px;
-  font-weight: 600;
-  color: var(--color-foreground);
-  letter-spacing: -0.005em;
-}
-.ap-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  height: 17px;
-  padding: 0 7px;
-  border-radius: var(--radius-pill);
-  font-size: 10px;
-  font-weight: 500;
-  background: var(--color-warning-bg);
-  color: var(--color-warning-fg);
-  white-space: nowrap;
-}
-.ap-chip-icon { width: 11px; height: 11px; }
-
-/* The primary argument — the part you actually judge. Always visible. */
-.ap-target {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  color: var(--color-foreground);
-  margin-top: 4px;
-  line-height: 1.4;
-  word-break: break-all;
-}
-.ap-target-mono { color: var(--color-muted-foreground); }
-
-.ap-args-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  margin-top: 8px;
-  border: none;
-  background: transparent;
-  color: var(--color-muted-foreground);
-  font: inherit;
-  font-size: 11px;
-  cursor: pointer;
-  padding: 0;
-}
-.ap-args-toggle:hover { color: var(--color-foreground); }
-.ap-args-chev {
-  width: 11px;
-  height: 11px;
-  transition: transform var(--duration-fast);
-}
-.ap-args-chev-open { transform: rotate(180deg); }
-
-.ap-args {
-  margin: 8px 0 0;
-  padding: 8px 10px;
-  background: var(--color-muted);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-family: var(--font-mono);
-  font-size: 10.5px;
-  line-height: 1.55;
-  color: var(--color-muted-foreground);
-  max-height: 96px;
-  overflow-y: auto;
-  white-space: pre-wrap;
-}
-
-/* Button ramp — three distinct roles, equal height. */
-.ap-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-  align-self: flex-end;
-}
-.ap-btn {
-  height: 30px;
-  padding: 0 13px;
-  border-radius: var(--radius-md);
-  font: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
-  white-space: nowrap;
-  border: 1px solid transparent;
-}
-
-/* Allow once — the primary, safe yes. Accent-neutral fill (orange stays
-   reserved for the send/hero token); calm, deliberate confirm. */
-.ap-btn-yes {
-  background: var(--color-accent-neutral);
-  color: var(--color-surface);
-  box-shadow: var(--shadow-sm);
-}
-.ap-btn-yes:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--color-accent-neutral) 88%, var(--color-background));
-}
-
-/* Allow all — outlined neutral; arms to destructive on click. */
-.ap-btn-all {
-  background: transparent;
-  color: var(--color-foreground);
-  border-color: var(--color-border);
-}
-.ap-btn-all:hover:not(:disabled) { background: var(--color-muted); }
-.ap-btn-all.armed {
-  background: var(--color-destructive);
-  color: var(--color-on-destructive);
-  border-color: transparent;
-}
-
-/* Deny — ghost; leans red only on hover, never at rest. */
-.ap-btn-no {
-  background: transparent;
-  color: var(--color-muted-foreground);
-}
-.ap-btn-no:hover:not(:disabled) {
-  background: var(--color-error-bg);
-  color: var(--color-error-fg);
-}
-
-/* In-flight: dim the button row and block further clicks. */
-.approval-busy {
-  opacity: 0.6;
-}
-.approval-busy .ap-btn {
-  cursor: progress;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .approval-accent { animation: none !important; }
-}
-</style>
diff --git a/web/src/components/AskUserCard.vue b/web/src/components/AskUserCard.vue
deleted file mode 100644
index db650de6..00000000
--- a/web/src/components/AskUserCard.vue
+++ /dev/null
@@ -1,305 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, reactive, watch, onUnmounted } from 'vue'
-import { ChevronDownIcon, XMarkIcon } from '@heroicons/vue/24/outline'
-import { useI18n } from 'vue-i18n'
-import type { ToolCall, AskUserQuestion, AskUserAnswer } from '@/types/api'
-import { useChatStore } from '@/stores/chat'
-
-defineOptions({ name: 'AskUserCard' })
-
-const props = defineProps<{
-  tool: ToolCall
-}>()
-
-const store = useChatStore()
-const { t } = useI18n()
-const collapsed = ref(false)
-// Locally remembered answers, set on submit/skip so the resolved view shows the
-// choice immediately during the brief gap before the tool_result event lands.
-const submitted = ref<string[] | null>(null)
-
-// ─── Questions: prefer the backend-normalized list, else parse the tool args ───
-const questions = computed<AskUserQuestion[]>(() => {
-  if (props.tool.askUserQuestions?.length) return props.tool.askUserQuestions
-  try {
-    const parsed = JSON.parse(props.tool.args || '{}')
-    if (Array.isArray(parsed.questions) && parsed.questions.length) {
-      return parsed.questions as AskUserQuestion[]
-    }
-    // Legacy single-question form: { question, options:[{label}] }
-    if (parsed.question) {
-      return [{
-        question: parsed.question,
-        options: Array.isArray(parsed.options)
-          ? parsed.options.map((o: { label: string }) => ({ label: o.label }))
-          : undefined,
-      }]
-    }
-  } catch { /* ignore */ }
-  return []
-})
-
-// Pending = there is a live request id and the tool has not resolved yet.
-const isPending = computed(() =>
-  !!props.tool.askUserId && props.tool.status === 'running' && !props.tool.output,
-)
-
-const title = computed(() => questions.value[0]?.question || t('approval.asking'))
-
-// ─── Answer state (per question index) ───
-const selections = reactive<Record<number, string[]>>({})
-const freeText = reactive<Record<number, string>>({})
-
-function isSelected(qi: number, label: string): boolean {
-  return (selections[qi] || []).includes(label)
-}
-
-function toggleOption(qi: number, label: string, multi: boolean) {
-  const cur = selections[qi] || []
-  if (multi) {
-    selections[qi] = cur.includes(label) ? cur.filter((l) => l !== label) : [...cur, label]
-  } else {
-    // 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] = ''
-  }
-}
-
-function onFreeTextInput(qi: number, multi: boolean) {
-  // Typing a custom answer clears option selection for single-select.
-  if (!multi && freeText[qi]) selections[qi] = []
-}
-
-function buildAnswers(): AskUserAnswer[] {
-  return questions.value.map((q, qi) => {
-    const header = q.header || ''
-    const text = (freeText[qi] || '').trim()
-    const picked = selections[qi] || []
-    if (q.multi_select) {
-      const selected = [...picked]
-      if (text) selected.push(text)
-      return { question_header: header, answer: '', selected }
-    }
-    if (text) return { question_header: header, answer: text }
-    return { question_header: header, answer: picked[0] || '' }
-  })
-}
-
-function submit() {
-  if (!props.tool.askUserId) return
-  const answers = buildAnswers()
-  submitted.value = answers.map((a) => a.answer || (a.selected || []).join(', '))
-  store.submitAskUser(props.tool.askUserId, answers)
-}
-
-function skip() {
-  if (!props.tool.askUserId) return
-  submitted.value = []
-  store.submitAskUser(props.tool.askUserId, [])
-}
-
-// Submit is allowed once every question has either a selection or free text.
-const canSubmit = computed(() =>
-  questions.value.every((q, qi) =>
-    (selections[qi] && selections[qi].length > 0) || (freeText[qi] || '').trim() !== '',
-  ),
-)
-
-// ─── Keyboard: digit keys select options for the common single-question case ───
-function onKeydown(e: KeyboardEvent) {
-  if (!isPending.value || collapsed.value || questions.value.length !== 1) return
-  const target = e.target as HTMLElement | null
-  if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) return
-  const q = questions.value[0]
-  if (!q?.options?.length) return
-  const n = parseInt(e.key, 10)
-  if (!Number.isNaN(n) && n >= 1 && n <= q.options.length) {
-    e.preventDefault()
-    toggleOption(0, q.options[n - 1]!.label, !!q.multi_select)
-  } else if (e.key === 'Enter' && canSubmit.value) {
-    e.preventDefault()
-    submit()
-  }
-}
-// Only listen while this card is the live, pending one — resolved/replay cards
-// (and there can be many in a long session) must not each hold a global listener.
-watch(isPending, (pending) => {
-  if (pending) window.addEventListener('keydown', onKeydown)
-  else window.removeEventListener('keydown', onKeydown)
-}, { immediate: true })
-onUnmounted(() => window.removeEventListener('keydown', onKeydown))
-
-// ─── Resolved / replay display: extract the chosen answers from tool output ───
-const resolvedAnswers = computed<string[]>(() => {
-  const out = props.tool.output || ''
-  // No output yet (just submitted, awaiting tool_result) → show local choice.
-  if (!out) return submitted.value ?? []
-  // Backend "no answer" sentinels (skip / cancelled) → render the empty state
-  // for the whole card, not as a fake answer mapped onto the first question.
-  if (/^The user did not provide (an answer|any answers)\.?$/.test(out.trim())) return []
-  if (out.startsWith('ask_user cancelled')) return []
-  // Multi-question JSON form: { answers: [{question_header, answer, selected}] }
-  try {
-    const parsed = JSON.parse(out)
-    if (Array.isArray(parsed.answers)) {
-      return parsed.answers.map((a: { answer?: string; selected?: string[] }) =>
-        a.answer || (a.selected || []).join(', '),
-      )
-    }
-  } catch { /* not JSON */ }
-  // Single-question plain form: "User's answer: X"
-  const m = out.match(/^User's answer:\s*([\s\S]*)$/)
-  if (m) return [m[1]!.trim()]
-  return [out.trim()]
-})
-</script>
-
-<template>
-  <div class="my-1.5">
-    <!-- Collapsed: one-line summary (matches the inline "Asking …" affordance) -->
-    <button
-      v-if="collapsed"
-      class="w-full flex items-center gap-1.5 pl-0 pr-1 py-1 text-left cursor-pointer hover:opacity-70 transition-opacity"
-      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-accent-neutral)"
-        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-accent-neutral)">{{ questions[0].header }}</span>
-      <span class="text-xs font-mono truncate" style="color: var(--color-muted-foreground)">{{ title }}</span>
-      <ChevronDownIcon class="w-3 h-3 shrink-0" style="color: var(--color-muted-foreground)" />
-    </button>
-
-    <!-- Expanded card -->
-    <div
-      v-else
-      class="overflow-hidden mr-2"
-      :style="{ borderRadius: 'var(--radius-xl)', border: '1px solid var(--color-border)', background: 'var(--color-surface)' }"
-    >
-      <!-- Header -->
-      <div class="flex items-center gap-2 px-3.5 py-2.5" :style="{ borderBottom: '1px solid var(--color-border)' }">
-        <span
-          class="w-1.5 h-1.5 rounded-full shrink-0"
-          :class="{ 'animate-pulse': isPending }"
-          :style="{ background: isPending ? 'var(--color-accent-neutral)' : 'var(--color-muted-foreground)' }"
-        />
-        <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="t('askUser.collapse')" @click="collapsed = true">
-          <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="t('askUser.skip')" @click="skip">
-          <XMarkIcon class="w-3.5 h-3.5" style="color: var(--color-muted-foreground)" />
-        </button>
-      </div>
-
-      <!-- ════ Interactive (pending) ════ -->
-      <div v-if="isPending" class="px-2.5 py-2">
-        <div v-for="(q, qi) in questions" :key="qi" :class="{ 'mt-2 pt-2': qi > 0 }" :style="qi > 0 ? 'border-top: 1px solid var(--color-border)' : ''">
-          <!-- Question text (when multiple questions, each gets its own label) -->
-          <div v-if="questions.length > 1" class="px-1 pb-1.5 text-xs font-medium" style="color: var(--color-foreground)">{{ q.question }}</div>
-
-          <!-- Options -->
-          <button
-            v-for="(opt, oi) in q.options"
-            :key="oi"
-            class="ask-opt w-full flex items-center gap-3 px-3 py-2 text-left cursor-pointer rounded-lg"
-            :class="{ 'ask-opt-selected': isSelected(qi, opt.label) }"
-            :style="{ border: isSelected(qi, opt.label) ? '1px solid var(--color-accent-neutral)' : '1px solid transparent' }"
-            @click="toggleOption(qi, opt.label, !!q.multi_select)"
-          >
-            <span
-              v-if="q.multi_select"
-              class="w-4 h-4 rounded shrink-0 flex items-center justify-center text-[10px]"
-              :style="{
-                border: '1.5px solid ' + (isSelected(qi, opt.label) ? 'var(--color-accent-neutral)' : 'var(--color-border)'),
-                background: isSelected(qi, opt.label) ? 'var(--color-accent-neutral)' : 'transparent',
-                color: 'var(--color-surface)',
-              }"
-            >{{ isSelected(qi, opt.label) ? '✓' : '' }}</span>
-            <div class="flex-1 min-w-0">
-              <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>
-          </button>
-
-          <!-- Free-form "Other" input -->
-          <div class="mt-1 px-1">
-            <div v-if="q.options?.length" class="px-2 pt-1 pb-0.5 text-sm" style="color: var(--color-foreground)">{{ t('askUser.other') }}</div>
-            <input
-              v-model="freeText[qi]"
-              type="text"
-              :placeholder="t('askUser.customPlaceholder')"
-              class="w-full px-2.5 py-1.5 text-sm rounded-lg outline-none"
-              :style="{ background: 'var(--color-background)', border: '1px solid var(--color-border)', color: 'var(--color-foreground)' }"
-              @input="onFreeTextInput(qi, !!q.multi_select)"
-              @keydown.enter.prevent="canSubmit && submit()"
-            />
-          </div>
-        </div>
-
-        <!-- Footer -->
-        <div class="flex items-center justify-end gap-2 px-1 pt-2.5 pb-0.5">
-          <button
-            class="px-3 py-1.5 text-xs rounded-md cursor-pointer transition-colors"
-            style="color: var(--color-muted-foreground)"
-            @click="skip"
-          >{{ t('askUser.skip') }}</button>
-          <button
-            class="px-3.5 py-1.5 text-xs rounded-md font-medium transition-opacity flex items-center gap-1.5"
-            :class="canSubmit ? 'cursor-pointer' : 'cursor-not-allowed opacity-40'"
-            :style="{ background: 'var(--color-accent-neutral)', color: 'var(--color-surface)' }"
-            :disabled="!canSubmit"
-            @click="submit"
-          >
-            <span>{{ t('askUser.submit') }}</span>
-            <span class="text-[10px] opacity-80">↵</span>
-          </button>
-        </div>
-      </div>
-
-      <!-- ════ Resolved / replay ════ -->
-      <div v-else class="px-3.5 py-2.5 space-y-2">
-        <template v-if="resolvedAnswers.length">
-          <div v-for="(q, qi) in questions" :key="qi">
-            <div v-if="questions.length > 1" class="text-xs" style="color: var(--color-muted-foreground)">{{ q.question }}</div>
-            <div class="text-sm flex items-baseline gap-1.5">
-              <span class="shrink-0 text-[10px]" style="color: var(--color-accent-neutral)">▸</span>
-              <span style="color: var(--color-foreground)">{{ resolvedAnswers[qi] || '—' }}</span>
-            </div>
-          </div>
-        </template>
-        <div v-else class="text-xs italic" style="color: var(--color-muted-foreground)">{{ t('askUser.noAnswer') }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.ask-opt {
-  background: transparent;
-  transition: background 0.12s ease;
-}
-.ask-opt:hover {
-  background: var(--color-muted);
-}
-.ask-opt-selected,
-.ask-opt-selected:hover {
-  background: color-mix(in srgb, var(--color-accent-neutral), transparent 88%);
-}
-</style>
diff --git a/web-react/src/components/AuthGate.tsx b/web/src/components/AuthGate.tsx
similarity index 100%
rename from web-react/src/components/AuthGate.tsx
rename to web/src/components/AuthGate.tsx
diff --git a/web/src/components/AutomationEditorDialog.vue b/web/src/components/AutomationEditorDialog.vue
deleted file mode 100644
index 8f85380d..00000000
--- a/web/src/components/AutomationEditorDialog.vue
+++ /dev/null
@@ -1,311 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch, computed } from 'vue'
-import { XMarkIcon } from '@heroicons/vue/24/outline'
-import { useAutomationStore } from '@/stores/automation'
-import { useChatStore } from '@/stores/chat'
-import MenuSelect, { type MenuSelectOption } from '@/components/MenuSelect.vue'
-import ProjectPickerPanel from '@/components/ProjectPickerPanel.vue'
-import type { AutomationItem, AutomationCreate, AutomationCadence } from '@/types/automation'
-
-const props = defineProps<{ open: boolean; editing: AutomationItem | null; prefill?: Partial<AutomationCreate> | null }>()
-const emit = defineEmits<{ (e: 'close'): void; (e: 'saved'): void }>()
-
-const store = useAutomationStore()
-const chat = useChatStore()
-
-type FormTrigger = 'manual' | 'hourly' | 'daily' | 'weekly'
-const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
-
-const form = reactive({
-  name: '',
-  trigger: 'daily' as FormTrigger,
-  hour: 9,
-  minute: 0,
-  weekday: 1,
-  projectPath: '',
-  mode: 'full_access',
-  prompt: '',
-  enabled: true,
-})
-const saving = ref(false)
-const localError = ref<string | null>(null)
-
-const isSchedule = computed(() => form.trigger !== 'manual')
-const showHour = computed(() => form.trigger === 'daily' || form.trigger === 'weekly')
-const showWeekday = computed(() => form.trigger === 'weekly')
-
-// Headless-select option sets for the trigger/cadence/time/mode fields. These
-// replace the native <select> elements so the form reads as part of the app's
-// control set (matching WorkspacePicker/BranchPicker).
-const triggerOptions: MenuSelectOption<FormTrigger>[] = [
-  { value: 'daily', label: 'Daily' },
-  { value: 'weekly', label: 'Weekly' },
-  { value: 'hourly', label: 'Hourly' },
-  { value: 'manual', label: 'Manual' },
-]
-const weekdayOptions: MenuSelectOption[] = weekdays.map((d, i) => ({ value: i, label: d }))
-// Hour shows the hour only — minutes have their own field beside it. The old
-// "09:00" label read as a full time and duplicated the Minute column.
-const hourOptions: MenuSelectOption[] = Array.from({ length: 24 }, (_, h) => ({
-  value: h,
-  label: `${String(h).padStart(2, '0')}`,
-}))
-const minuteOptions: MenuSelectOption[] = Array.from({ length: 60 }, (_, m) => ({
-  value: m,
-  label: `:${String(m).padStart(2, '0')}`,
-}))
-const modeOptions: MenuSelectOption[] = [
-  { value: 'full_access', label: 'Autopilot' },
-  { value: 'approval', label: 'Ask' },
-  { value: 'plan', label: 'Plan' },
-]
-
-watch(
-  () => props.open,
-  (open) => {
-    if (!open) return
-    localError.value = null
-    const e = props.editing
-    if (e) {
-      form.name = e.name
-      form.trigger = e.trigger.type === 'manual' ? 'manual' : (e.trigger.cadence as FormTrigger)
-      form.hour = e.trigger.hour ?? 9
-      form.minute = e.trigger.minute ?? 0
-      form.weekday = e.trigger.weekday ?? 1
-      form.projectPath = e.project_path
-      form.mode = e.mode || 'full_access'
-      form.prompt = e.prompt
-      form.enabled = e.enabled // preserve paused state when editing
-    } else {
-      form.name = ''
-      form.trigger = 'daily'
-      form.hour = 9
-      form.minute = 0
-      form.weekday = 1
-      form.projectPath = props.prefill?.project_path || chat.pwd || ''
-      form.mode = 'full_access'
-      form.prompt = ''
-      form.enabled = true
-      if (props.prefill) Object.assign(form, normalizePrefill(props.prefill))
-    }
-  },
-)
-
-function normalizePrefill(p: Partial<AutomationCreate>) {
-  const out: Partial<typeof form> = {}
-  if (p.name) out.name = p.name
-  if (p.prompt) out.prompt = p.prompt
-  if (p.mode) out.mode = p.mode
-  if (p.trigger) {
-    out.trigger = (p.trigger.type === 'manual' ? 'manual' : p.trigger.cadence) as FormTrigger
-    if (p.trigger.hour != null) out.hour = p.trigger.hour
-    if (p.trigger.minute != null) out.minute = p.trigger.minute
-    if (p.trigger.weekday != null) out.weekday = p.trigger.weekday
-  }
-  return out
-}
-
-function buildPayload(runNow: boolean): AutomationCreate {
-  const trigger =
-    form.trigger === 'manual'
-      ? { type: 'manual' as const }
-      : {
-          type: 'schedule' as const,
-          cadence: form.trigger as AutomationCadence,
-          hour: form.hour,
-          minute: form.minute,
-          weekday: form.weekday,
-        }
-  // A scheduled automation runs unattended, so it must auto-approve.
-  const mode = form.trigger === 'manual' ? form.mode : 'full_access'
-  return {
-    name: form.name.trim(),
-    prompt: form.prompt.trim(),
-    trigger,
-    project_path: form.projectPath.trim(),
-    mode,
-    enabled: form.enabled,
-    run_now: runNow,
-  }
-}
-
-async function save(runNow = false) {
-  localError.value = null
-  if (!form.name.trim()) { localError.value = 'Name is required.'; return }
-  if (!form.prompt.trim()) { localError.value = 'Prompt is required.'; return }
-  if (!form.projectPath.trim()) { localError.value = 'A project is required (no-project automations cannot run unattended).'; return }
-  saving.value = true
-  try {
-    const payload = buildPayload(runNow)
-    const ok = props.editing
-      ? await store.update(props.editing.id, payload)
-      : !!(await store.create(payload))
-    if (ok) {
-      emit('saved')
-      emit('close')
-    } else {
-      localError.value = store.error || 'Failed to save automation.'
-    }
-  } finally {
-    saving.value = false
-  }
-}
-</script>
-
-<template>
-  <transition
-    enter-active-class="transition-opacity duration-150"
-    enter-from-class="opacity-0"
-    leave-active-class="transition-opacity duration-100"
-    leave-to-class="opacity-0"
-  >
-    <div v-if="open" class="auto-modal-overlay" @click.self="emit('close')">
-      <div class="auto-modal" role="dialog" aria-modal="true">
-        <header class="auto-modal-head">
-          <h2>{{ editing ? 'Edit automation' : 'New automation' }}</h2>
-          <button class="icon-btn" aria-label="Close" @click="emit('close')"><XMarkIcon class="w-5 h-5" /></button>
-        </header>
-
-        <div class="auto-modal-body">
-          <label class="field">
-            <span class="field-label">Name</span>
-            <input v-model="form.name" class="field-input" placeholder="e.g., Daily code review" />
-          </label>
-
-          <div class="field-row">
-            <label class="field">
-              <span class="field-label">Trigger</span>
-              <MenuSelect v-model="form.trigger" :options="triggerOptions" placement="bottom" block />
-            </label>
-            <label v-if="showWeekday" class="field">
-              <span class="field-label">Day</span>
-              <MenuSelect v-model="form.weekday" :options="weekdayOptions" placement="bottom" block />
-            </label>
-            <label v-if="showHour" class="field">
-              <span class="field-label">Hour</span>
-              <MenuSelect v-model="form.hour" :options="hourOptions" placement="bottom" block />
-            </label>
-            <label v-if="isSchedule" class="field">
-              <span class="field-label">Minute</span>
-              <MenuSelect v-model="form.minute" :options="minuteOptions" placement="bottom" block />
-            </label>
-          </div>
-
-          <label class="field">
-            <span class="field-label">Project</span>
-            <ProjectPickerPanel v-model="form.projectPath" placement="top" />
-            <span class="field-hint">Required — scheduled automations run unattended in this project.</span>
-          </label>
-
-          <label v-if="!isSchedule" class="field">
-            <span class="field-label">Mode</span>
-            <MenuSelect v-model="form.mode" :options="modeOptions" placement="top" block />
-          </label>
-          <p v-else class="mode-note">Scheduled runs use <strong>Autopilot</strong> (unattended; approvals would block).</p>
-
-          <label class="field">
-            <span class="field-label">Prompt</span>
-            <textarea v-model="form.prompt" class="field-input prompt" rows="4" placeholder="Describe what this automation should do…" />
-          </label>
-
-          <p v-if="localError" class="form-error">{{ localError }}</p>
-        </div>
-
-        <footer class="auto-modal-foot">
-          <span class="foot-hint">Use “Create and run” to test your prompt right away.</span>
-          <div class="foot-actions">
-            <button class="btn-ghost" @click="emit('close')">Cancel</button>
-            <button v-if="!editing" class="btn-ghost" :disabled="saving" @click="save(true)">Create and run</button>
-            <button class="btn-primary" :disabled="saving" @click="save(false)">{{ editing ? 'Save' : 'Create' }}</button>
-          </div>
-        </footer>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<style scoped>
-.auto-modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: var(--z-modal, 50);
-  display: grid;
-  place-items: center;
-  padding: 24px;
-  background: color-mix(in srgb, var(--color-background) 55%, transparent);
-  backdrop-filter: blur(3px);
-}
-.auto-modal {
-  width: min(560px, 100%);
-  max-height: 88vh;
-  display: flex;
-  flex-direction: column;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-2xl, 16px);
-  box-shadow: var(--shadow-lg);
-  /* NOT overflow:hidden — the select dropdowns are DOM popovers (unlike native
-     <select>, which renders in a non-clipped OS layer), so a clipping ancestor
-     would cut them off. The body is short enough not to need its own scroll. */
-}
-.auto-modal-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 18px 20px 12px;
-}
-.auto-modal-head h2 {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--color-foreground);
-}
-.auto-modal-body {
-  padding: 4px 20px 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-.field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
-.field-row { display: flex; gap: 10px; flex-wrap: wrap; }
-.field-label { font-size: 12px; font-weight: 600; color: var(--color-foreground); }
-.field-hint { font-size: 11px; color: var(--color-muted-foreground); }
-.field-input {
-  width: 100%;
-  padding: 8px 10px;
-  font-size: 13px;
-  color: var(--color-foreground);
-  background: var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg, 10px);
-  outline: none;
-}
-.field-input:focus { border-color: var(--color-primary); }
-.field-input.prompt { resize: vertical; font-family: var(--font-sans); line-height: 1.5; }
-.mode-note { font-size: 12px; color: var(--color-muted-foreground); }
-.form-error { font-size: 12px; color: var(--color-danger, var(--color-destructive)); }
-.auto-modal-foot {
-  display: flex; align-items: center; justify-content: space-between; gap: 12px;
-  padding: 12px 20px; border-top: 1px solid var(--color-border); background: var(--color-muted);
-  /* Round the bottom corners to match the modal now that it no longer clips. */
-  border-bottom-left-radius: var(--radius-2xl, 16px);
-  border-bottom-right-radius: var(--radius-2xl, 16px);
-}
-.foot-hint { font-size: 11px; color: var(--color-muted-foreground); flex: 1; min-width: 0; }
-.foot-actions { display: flex; gap: 8px; flex-shrink: 0; }
-.icon-btn { color: var(--color-muted-foreground); padding: 4px; border-radius: 8px; cursor: pointer; }
-.icon-btn:hover { background: var(--color-muted); }
-/* Unified button scale (matches the sidebar / AutomationsView primary) — the
- * old 7px/13px footer buttons read oversized next to the form controls. */
-.btn-ghost {
-  padding: 6px 12px; font-size: 12.5px; white-space: nowrap; border-radius: var(--radius-lg, 10px);
-  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-foreground); cursor: pointer;
-  transition: background 0.15s;
-}
-.btn-ghost:hover:not(:disabled) { background: var(--color-muted); }
-.btn-primary {
-  padding: 6px 14px; font-size: 12.5px; font-weight: 500; white-space: nowrap; border-radius: var(--radius-lg, 10px);
-  border: none; background: var(--color-primary); color: var(--color-on-primary); cursor: pointer; transition: opacity 0.15s;
-}
-.btn-primary:hover:not(:disabled) { opacity: 0.9; }
-.btn-primary:disabled, .btn-ghost:disabled { opacity: 0.55; cursor: not-allowed; }
-</style>
diff --git a/web/src/components/AutomationRunView.vue b/web/src/components/AutomationRunView.vue
deleted file mode 100644
index 38dd68a2..00000000
--- a/web/src/components/AutomationRunView.vue
+++ /dev/null
@@ -1,400 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
-import {
-  ArrowLeftIcon, PlayIcon, StopIcon, BoltIcon,
-  CheckCircleIcon, ExclamationCircleIcon,
-} from '@heroicons/vue/24/outline'
-import { api } from '@/composables/api'
-import { extractToolDisplayInfo } from '@/composables/toolInfo'
-import ChatMessage from '@/components/ChatMessage.vue'
-import ToolCallCard from '@/components/ToolCallCard.vue'
-import type { AutomationRun, AutomationItem } from '@/types/automation'
-import type { SessionEntry, ChatMessage as ChatMsg, ToolCall } from '@/types/api'
-import type { TimelineItem } from '@/stores/chat'
-import { useAutomationStore } from '@/stores/automation'
-
-// AutomationRunView — the page you land on after clicking a run (or a card while
-// it's running). It replays the run's session as a READ-ONLY timeline — the same
-// ChatMessage + ToolCallCard vocabulary as the chat canvas — wrapped by a
-// run-summary header and a Run-again/Stop footer (no composer: a historical run
-// is something you watch, not type into).
-//
-// Data: a run's `session_id` IS a chat session. api.session(session_id) returns
-// the SessionEntry[] JSONL, parsed here into the same TimelineItem shape the chat
-// store uses (see restoreCurrentSession). Reusing ChatMessage + ToolCallCard means
-// no new renderer — the run is just a replayed session with a different frame.
-
-const props = defineProps<{ run: AutomationRun; automation?: AutomationItem | null }>()
-const emit = defineEmits<{ (e: 'back'): void }>()
-
-const store = useAutomationStore()
-
-const timeline = ref<TimelineItem[]>([])
-const loading = ref(true)
-const error = ref<string | null>(null)
-const messagesEl = ref<HTMLDivElement | null>(null)
-
-// Whether this run is currently executing. Seeded from the run's status, then
-// reconciled via a poll — the run view isn't wired to the task-scoped WS stream
-// the chat canvas uses, so we refresh the runs list to detect completion.
-const running = ref(props.run.terminal_status === 'running' || (!props.run.terminal_status && props.run.status === 'running'))
-
-let seqCounter = 0
-function nextSeq() { return ++seqCounter }
-function genId(p: string) { return `${p}-${Math.random().toString(36).slice(2, 9)}` }
-
-// ── Status helpers ── mirror the card/list vocabulary so state reads the same.
-const statusKind = computed<'success' | 'error' | 'running'>(() => {
-  const s = props.run.terminal_status || props.run.status
-  if (s === 'success') return 'success'
-  if (s === 'error') return 'error'
-  return 'running'
-})
-const statusLabel = computed(() => ({ success: 'Completed', error: 'Failed', running: 'Running' })[statusKind.value])
-
-// ── Run summary stats line ── the six facts you'd otherwise hunt for.
-const windowLabel = computed(() => props.automation?.human_schedule || props.run.trigger_kind)
-const startLabel = computed(() => {
-  if (!props.run.start_time) return ''
-  return new Date(props.run.start_time).toLocaleString()
-})
-const durLabel = computed(() => {
-  if (!props.run.start_time) return ''
-  const end = props.run.end_time ? new Date(props.run.end_time).getTime() : (running.value ? Date.now() : new Date(props.run.start_time).getTime())
-  const sec = Math.max(0, Math.round((end - new Date(props.run.start_time).getTime()) / 1000))
-  if (sec < 60) return `${sec}s`
-  const m = Math.floor(sec / 60); const s = sec % 60
-  return s ? `${m}m ${s}s` : `${m}m`
-})
-const toolCount = computed(() => timeline.value.filter((i) => i.kind === 'tool').length)
-
-// ── Parse the session JSONL into a timeline. Same mapping as the chat store's
-// restoreCurrentSession: user/assistant → message, tool_call/tool_result → tool.
-function applyEntries(entries: SessionEntry[]) {
-  timeline.value = []
-  const pending = new Map<string, ToolCall>()
-  for (const e of entries) {
-    if (e.type === 'user' && e.content) {
-      const msg: ChatMsg = { id: genId('m'), role: 'user', content: e.content, timestamp: e.timestamp ? new Date(e.timestamp).getTime() : Date.now() }
-      timeline.value.push({ kind: 'message', data: msg, seq: nextSeq() })
-    } else if (e.type === 'assistant' && e.content) {
-      const msg: ChatMsg = { id: genId('m'), role: 'assistant', content: e.content, timestamp: e.timestamp ? new Date(e.timestamp).getTime() : Date.now() }
-      timeline.value.push({ kind: 'message', data: msg, seq: nextSeq() })
-    } else if (e.type === 'tool_call' && e.name) {
-      const tc: ToolCall = {
-        id: genId('tc'),
-        toolCallID: e.tool_call_id,
-        name: e.name,
-        args: e.args || '',
-        status: 'running',
-        timestamp: e.timestamp ? new Date(e.timestamp).getTime() : Date.now(),
-        displayInfo: extractToolDisplayInfo(e.name, e.args || ''),
-      }
-      timeline.value.push({ kind: 'tool', data: tc, seq: nextSeq() })
-      if (e.tool_call_id) pending.set(e.tool_call_id, tc)
-    } else if (e.type === 'tool_result') {
-      let resolved = false
-      if (e.tool_call_id) {
-        const tc = pending.get(e.tool_call_id)
-        if (tc) {
-          tc.output = e.output || ''
-          tc.error = e.error || ''
-          tc.status = e.error ? 'error' : 'done'
-          pending.delete(e.tool_call_id)
-          resolved = true
-        }
-      }
-      if (!resolved && e.name) {
-        for (let i = timeline.value.length - 1; i >= 0; i--) {
-          const item = timeline.value[i]
-          if (item && item.kind === 'tool' && item.data.name === e.name && item.data.status === 'running') {
-            item.data.output = e.output || ''
-            item.data.error = e.error || ''
-            item.data.status = e.error ? 'error' : 'done'
-            break
-          }
-        }
-      }
-    }
-  }
-  // Mark any tool calls that never got a result as done (replay of a finished run).
-  for (const tc of pending.values()) tc.status = 'done'
-}
-
-async function load() {
-  loading.value = true
-  error.value = null
-  try {
-    const entries = await api.session(props.run.session_id)
-    applyEntries(entries)
-    await nextTick(() => { if (running.value) scrollToBottom(false) })
-  } catch (e) {
-    error.value = e instanceof Error ? e.message : String(e)
-  } finally {
-    loading.value = false
-  }
-}
-
-function scrollToBottom(smooth = true) {
-  if (!messagesEl.value) return
-  messagesEl.value.scrollTo({ top: messagesEl.value.scrollHeight, behavior: smooth ? 'smooth' : 'instant' })
-}
-
-// ── Actions ──
-async function runAgain() {
-  if (!props.automation) return
-  await store.runNow(props.automation.id)
-  // Give the new run a moment to register, then refresh and re-seed this view.
-  setTimeout(() => { void store.fetchAll() }, 1200)
-}
-
-async function stopRun() {
-  try {
-    await api.stop(props.run.session_id)
-    running.value = false
-  } catch {
-    // Surface as a stopped state regardless — the user asked to stop.
-    running.value = false
-  }
-}
-
-// ── Lifecycle ── fetch on mount; poll the runs list while a run is live so the
-// header + status reconcile without a task-scoped WS subscription.
-let pollTimer: ReturnType<typeof setInterval> | null = null
-onMounted(() => {
-  void load()
-  if (running.value) {
-    pollTimer = setInterval(async () => {
-      await store.fetchAll()
-      const fresh = store.runs.find((r) => r.session_id === props.run.session_id)
-      if (fresh && fresh.terminal_status && fresh.terminal_status !== 'running') {
-        running.value = false
-        if (pollTimer) { clearInterval(pollTimer); pollTimer = null }
-        void load() // re-render the now-complete timeline
-      }
-    }, 3000)
-  }
-})
-onUnmounted(() => { if (pollTimer) clearInterval(pollTimer) })
-
-// The first user message is the automation prompt — render it distinctly.
-const promptEntry = computed(() => timeline.value.find((i) => i.kind === 'message' && i.data.role === 'user'))
-const timelineRest = computed(() => {
-  const p = promptEntry.value
-  if (!p) return timeline.value
-  return timeline.value.filter((i) => i !== p)
-})
-</script>
-
-<template>
-  <div class="run-surface">
-    <!-- ── run summary header ── replaces the "Automations" title. Breadcrumb
-         back-link, automation name + outcome chip, and a dense stats line. -->
-    <header class="run-head">
-      <button class="breadcrumb" @click="emit('back')">
-        <ArrowLeftIcon class="w-3.5 h-3.5" /> Automations
-      </button>
-      <div class="run-title-row">
-        <span class="run-title">{{ automation?.name || run.title || 'Automation run' }}</span>
-        <span class="status-chip lg" :class="statusKind">
-          <CheckCircleIcon v-if="statusKind === 'success'" class="w-3.5 h-3.5" />
-          <ExclamationCircleIcon v-else-if="statusKind === 'error'" class="w-3.5 h-3.5" />
-          <PlayIcon v-else class="w-3.5 h-3.5" />
-          {{ statusLabel }}
-        </span>
-      </div>
-      <div class="run-stats">
-        <span class="k">trigger</span><span class="v">{{ run.trigger_kind }}</span>
-        <template v-if="windowLabel"><span class="sep">·</span><span class="k">window</span><span class="v">{{ windowLabel }}</span></template>
-        <template v-if="startLabel"><span class="sep">·</span><span class="k">ran</span><span class="v">{{ startLabel }}</span></template>
-        <template v-if="durLabel"><span class="sep">·</span><span class="k">duration</span><span class="v">{{ durLabel }}</span></template>
-        <template v-if="toolCount"><span class="sep">·</span><span class="k">tools</span><span class="v">{{ toolCount }} calls</span></template>
-      </div>
-      <div v-if="run.error_reason && statusKind === 'error'" class="run-err-banner">{{ run.error_reason }}</div>
-    </header>
-
-    <!-- ── timeline ── the run's session, same centered column + vocabulary as
-         the chat canvas. -->
-    <div ref="messagesEl" class="run-scroll">
-      <div class="timeline">
-        <div v-if="loading" class="empty">Loading run…</div>
-        <div v-else-if="error" class="empty err">Couldn't load this run: {{ error }}</div>
-        <div v-else-if="!timeline.length" class="empty">No activity recorded for this run.</div>
-        <template v-else>
-          <!-- the automation prompt: brand-tinted block, not a user avatar -->
-          <div v-if="promptEntry && promptEntry.kind === 'message'" class="run-prompt">
-            <div class="run-prompt-icon"><BoltIcon class="w-4 h-4" /></div>
-            <div class="run-prompt-body">
-              <div class="run-prompt-label">Automation prompt</div>
-              <div class="run-prompt-text">{{ (promptEntry.data as ChatMsg).content }}</div>
-            </div>
-          </div>
-
-          <!-- the rest of the timeline (assistant messages + tool calls) -->
-          <template v-for="item in timelineRest" :key="item.seq">
-            <ChatMessage
-              v-if="item.kind === 'message'"
-              :message="item.data"
-              class="run-msg"
-            />
-            <ToolCallCard v-else-if="item.kind === 'tool'" :tool="item.data" class="run-tool" />
-          </template>
-
-          <!-- live thinking footer (running runs only) -->
-          <div v-if="running && !loading" class="thinking">
-            <span class="dots"><span /><span /><span /></span>
-            <span class="thinking-label">Thinking…</span>
-          </div>
-        </template>
-      </div>
-    </div>
-
-    <!-- ── footer ── replaces the composer. A historical run ends in an action
-         bar; a live run shows Stop. -->
-    <footer class="run-foot">
-      <div class="run-foot-inner">
-        <span class="run-foot-hint">
-          <template v-if="running"><span class="live">●</span> Running for {{ durLabel }} · {{ toolCount }} tool calls so far.</template>
-          <template v-else-if="toolCount">Completed in {{ durLabel }} · {{ toolCount }} tool calls.</template>
-          <template v-else>Completed in {{ durLabel }}.</template>
-        </span>
-        <div class="run-foot-actions">
-          <button v-if="running" class="btn-danger" @click="stopRun">
-            <StopIcon class="w-3.5 h-3.5" /> Stop run
-          </button>
-          <button v-else-if="automation" class="btn-primary" @click="runAgain">
-            <PlayIcon class="w-3.5 h-3.5" /> Run again
-          </button>
-        </div>
-      </div>
-    </footer>
-  </div>
-</template>
-
-<style scoped>
-.run-surface {
-  display: flex; flex-direction: column;
-  min-height: 0; height: 100%;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-2xl);
-  box-shadow: var(--shadow-sm);
-  overflow: hidden;
-  color: var(--color-foreground);
-  margin: 48px 14px 14px;
-}
-
-/* ── run summary header ── */
-.run-head {
-  flex-shrink: 0;
-  max-width: 48rem; width: 100%;
-  margin-inline: auto;
-  padding: 14px 20px;
-  border-bottom: 1px solid var(--color-border);
-}
-.breadcrumb {
-  display: inline-flex; align-items: center; gap: 5px;
-  font-family: inherit; font-size: 12px;
-  color: var(--color-muted-foreground);
-  background: none; border: none; padding: 0;
-  cursor: pointer; margin-bottom: 10px;
-  transition: color 0.15s;
-}
-.breadcrumb:hover { color: var(--color-foreground); }
-.run-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-.run-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
-
-.status-chip {
-  display: inline-flex; align-items: center; gap: 4px;
-  font-size: 10.5px; font-weight: 600; line-height: 1;
-  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
-}
-.status-chip.lg { padding: 4px 9px; font-size: 11.5px; }
-.status-chip.success { color: var(--color-success-fg); background: var(--color-success-bg); }
-.status-chip.error   { color: var(--color-error-fg);   background: var(--color-error-bg); }
-.status-chip.running { color: var(--color-primary);    background: var(--accent-wash, color-mix(in srgb, var(--color-primary) 11%, transparent)); }
-
-.run-stats {
-  display: flex; flex-wrap: wrap; align-items: center;
-  gap: 4px 10px; margin-top: 7px;
-  font-size: 12px; color: var(--color-muted-foreground); font-variant-numeric: tabular-nums;
-}
-.run-stats .sep { color: var(--color-border); }
-.run-stats .k { font-family: var(--font-mono); font-size: 10.5px; }
-.run-stats .v { color: var(--color-foreground); font-weight: 500; }
-.run-err-banner {
-  margin-top: 9px; padding: 8px 10px;
-  font-size: 12px; line-height: 1.5; color: var(--color-error-fg);
-  background: var(--color-error-bg); border-radius: var(--radius-md, 6px);
-}
-
-/* ── timeline ── centered column, same vocabulary as the chat canvas. */
-.run-scroll { flex: 1; min-height: 0; overflow-y: auto; }
-.timeline { max-width: 48rem; margin-inline: auto; padding: 10px 20px 40px; }
-.empty { padding: 28px 0; color: var(--color-muted-foreground); font-size: 13.5px; }
-.empty.err { color: var(--color-error-fg); }
-
-/* the automation prompt — brand-tinted block with an eyebrow, so it reads as
-   "this came from the schedule", not a hand-typed user message. */
-.run-prompt {
-  display: flex; gap: 11px;
-  margin: 8px 0 4px; padding: 14px 16px;
-  background: var(--accent-wash-soft, color-mix(in srgb, var(--color-primary) 8%, transparent));
-  border: 1px solid var(--accent-border, color-mix(in srgb, var(--color-primary) 30%, transparent));
-  border-radius: var(--radius-xl, 12px);
-}
-.run-prompt-icon {
-  flex-shrink: 0; width: 28px; height: 28px;
-  display: grid; place-items: center;
-  border-radius: var(--radius-md, 6px);
-  color: var(--color-primary); background: var(--color-surface);
-  border: 1px solid var(--accent-border, color-mix(in srgb, var(--color-primary) 30%, transparent));
-}
-.run-prompt-body { min-width: 0; }
-.run-prompt-label {
-  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
-  text-transform: uppercase; color: var(--color-primary); margin-bottom: 4px;
-}
-.run-prompt-text { font-size: 13.5px; line-height: 1.6; color: var(--color-foreground); }
-
-/* reuse the chat components but indent tool cards into the message column */
-.run-msg { padding: 10px 0; }
-.run-tool { padding-left: 2.25rem; margin: 4px 0; }
-
-/* live thinking footer */
-.thinking { display: flex; align-items: center; gap: 9px; padding: 13px 0 13px 2.25rem; }
-.thinking .dots { display: flex; gap: 4px; }
-.thinking .dots span {
-  width: 6px; height: 6px; border-radius: 50%;
-  background: var(--color-accent-neutral, var(--color-foreground));
-  animation: dot-pulse 1.2s ease-in-out infinite;
-}
-.thinking .dots span:nth-child(2) { animation-delay: 0.16s; }
-.thinking .dots span:nth-child(3) { animation-delay: 0.32s; }
-.thinking-label { font-size: 13px; color: var(--color-muted-foreground); }
-@keyframes dot-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
-
-/* ── footer ── replaces the composer. */
-.run-foot { flex-shrink: 0; border-top: 1px solid var(--color-border); background: var(--color-muted); }
-.run-foot-inner {
-  max-width: 48rem; margin-inline: auto; padding: 12px 20px;
-  display: flex; align-items: center; justify-content: space-between; gap: 12px;
-}
-.run-foot-hint { font-size: 12px; color: var(--color-muted-foreground); min-width: 0; }
-.run-foot-hint .live { color: var(--color-primary); font-weight: 600; }
-.run-foot-actions { display: flex; gap: 8px; flex-shrink: 0; }
-.btn-primary {
-  display: inline-flex; align-items: center; gap: 6px;
-  padding: 6px 12px; font-family: inherit; font-size: 12.5px; font-weight: 500;
-  border: none; border-radius: var(--radius-lg, 10px);
-  background: var(--color-primary); color: var(--color-on-primary); cursor: pointer; transition: opacity 0.15s;
-}
-.btn-primary:hover { opacity: 0.9; }
-.btn-danger {
-  display: inline-flex; align-items: center; gap: 6px;
-  padding: 6px 12px; font-family: inherit; font-size: 12.5px; font-weight: 500;
-  border: none; border-radius: var(--radius-lg, 10px);
-  background: var(--color-destructive); color: var(--color-on-destructive); cursor: pointer; transition: opacity 0.15s;
-}
-.btn-danger:hover { opacity: 0.9; }
-</style>
diff --git a/web-react/src/components/AutomationsView.tsx b/web/src/components/AutomationsView.tsx
similarity index 100%
rename from web-react/src/components/AutomationsView.tsx
rename to web/src/components/AutomationsView.tsx
diff --git a/web/src/components/AutomationsView.vue b/web/src/components/AutomationsView.vue
deleted file mode 100644
index a8de12a7..00000000
--- a/web/src/components/AutomationsView.vue
+++ /dev/null
@@ -1,505 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import { PlayIcon, TrashIcon, PencilSquareIcon, CheckCircleIcon, ExclamationCircleIcon, BoltIcon, CalendarDaysIcon, HandRaisedIcon, ClockIcon } from '@heroicons/vue/24/outline'
-import { useAutomationStore } from '@/stores/automation'
-import AutomationEditorDialog from '@/components/AutomationEditorDialog.vue'
-import PageSurface from '@/components/PageSurface.vue'
-import MenuSelect, { type MenuSelectOption } from '@/components/MenuSelect.vue'
-import type { AutomationItem, AutomationCreate, AutomationTemplate, AutomationRun } from '@/types/automation'
-
-// Automations is a *page* inside the shell, not a fixed overlay. The parent
-// (<main> in App.vue) mounts this component when it's the active view, so there
-// is no `open` prop to guard against — fetching happens on mount below. The
-// page surface (inset chrome + title head) is provided by PageSurface; this
-// component owns only its content.
-
-// The selected run, if the user drilled into one. When set, the parent renders
-// AutomationRunView instead; emitting 'open-run' hands a run up so a card's
-// "run now" can optionally land on the detail page once the run registers.
-const emit = defineEmits<{ (e: 'open-run', run: AutomationRun): void }>()
-
-const store = useAutomationStore()
-
-const view = ref<'list' | 'templates'>('list')
-const statusFilter = ref<'all' | 'success' | 'failed'>('all')
-const statusOptions: MenuSelectOption[] = [
-  { value: 'all', label: 'All' },
-  { value: 'success', label: 'Success' },
-  { value: 'failed', label: 'Failed' },
-]
-const search = ref('')
-const editorOpen = ref(false)
-const editing = ref<AutomationItem | null>(null)
-const prefill = ref<Partial<AutomationCreate> | null>(null)
-
-// Fetch on mount. The component is v-if'd by the parent, so this fires exactly
-// when the page becomes active (and tears down on exit) — replacing the old
-// watch(props.open) that assumed a persistent overlay.
-onMounted(() => {
-  void store.fetchAll()
-  void store.fetchTemplates()
-})
-
-const filteredRuns = computed(() => {
-  const q = search.value.trim().toLowerCase()
-  return store.runs.filter((r) => {
-    if (statusFilter.value === 'success' && r.terminal_status !== 'success') return false
-    if (statusFilter.value === 'failed' && r.terminal_status !== 'error') return false
-    if (q && !r.title.toLowerCase().includes(q)) return false
-    return true
-  })
-})
-
-function newAutomation() {
-  editing.value = null
-  prefill.value = null
-  editorOpen.value = true
-}
-
-function editAutomation(item: AutomationItem) {
-  editing.value = item
-  prefill.value = null
-  editorOpen.value = true
-}
-
-function fromTemplate(t: AutomationTemplate) {
-  editing.value = null
-  prefill.value = { name: t.name, prompt: t.prompt, trigger: t.trigger, mode: t.suggest_mode }
-  view.value = 'list'
-  editorOpen.value = true
-}
-
-function runLabel(r: AutomationRun): string {
-  const time = r.start_time ? new Date(r.start_time).toLocaleString() : ''
-  return time
-}
-
-function isRunning(item: AutomationItem) {
-  return item.state.last_status === 'running'
-}
-
-// ── Card state helpers ── drive the status strip colour + chip. A card maps to
-// one of four states: running / error / success / paused. Paused is the absence
-// of a run state (enabled=false), so it drops the chip and dims the card.
-type CardState = 'running' | 'error' | 'success' | 'paused'
-function cardState(a: AutomationItem): CardState {
-  if (!a.enabled) return 'paused'
-  const s = a.state.last_status
-  if (s === 'running') return 'running'
-  if (s === 'error') return 'error'
-  return 'success'
-}
-
-// The cadence chip: the trigger as a compact label + icon (Daily/Weekly/Hourly/
-// Manual). Falls back to a generic "Schedule"/"Manual" when cadence is absent.
-const cadenceMap: Record<string, { label: string; icon: typeof CalendarDaysIcon }> = {
-  daily: { label: 'Daily', icon: CalendarDaysIcon },
-  weekly: { label: 'Weekly', icon: CalendarDaysIcon },
-  hourly: { label: 'Hourly', icon: ClockIcon },
-}
-function cadenceOf(a: AutomationItem) {
-  if (a.trigger.type === 'manual') return { label: 'Manual', icon: HandRaisedIcon }
-  const c = a.trigger.cadence ? cadenceMap[a.trigger.cadence] : null
-  return c ?? { label: 'Schedule', icon: CalendarDaysIcon }
-}
-
-// Next/last run line. Scheduled automations show "next" (the brand-accent line,
-// the highest-signal text on the card); manual ones show "last run" instead.
-function nextRunLabel(a: AutomationItem): string {
-  if (a.trigger.type === 'manual') {
-    const last = a.state.last_run_at
-    if (!last) return 'Not run yet'
-    const ok = a.state.last_status === 'success'
-    return relTime(last) + (ok ? ' · ok' : a.state.last_status === 'error' ? ' · failed' : '')
-  }
-  const next = a.state.next_run_at
-  return next ? 'in ' + relTimeFromNow(next) : a.human_schedule
-}
-
-// Relative-time helpers — compact ("3d ago", "in 6h 12m"). Kept tiny since the
-// backend already supplies human_schedule for the schedule line itself.
-function relTime(iso: string): string {
-  const diff = Date.now() - new Date(iso).getTime()
-  return relLabel(diff)
-}
-function relTimeFromNow(iso: string): string {
-  const diff = new Date(iso).getTime() - Date.now()
-  return relLabel(diff)
-}
-function relLabel(diff: number): string {
-  const abs = Math.abs(diff)
-  const min = 60000, hr = 60 * min, day = 24 * hr
-  if (abs < min) return 'just now'
-  if (abs < hr) return `${Math.round(abs / min)}m`
-  if (abs < day) {
-    const h = Math.floor(abs / hr); const m = Math.round((abs % hr) / min)
-    return m ? `${h}h ${m}m` : `${h}h`
-  }
-  return `${Math.round(abs / day)}d`
-}
-</script>
-
-<template>
-  <!-- The page surface (inset chrome + title head) is provided by PageSurface;
-       this component owns only the content and the header actions (segmented
-       toggle + New automation). No close button — dismissal is via Esc / the
-       nav header / clicking a task. -->
-  <PageSurface title="Automations">
-    <template #actions>
-      <div class="seg">
-        <button :class="['seg-btn', { on: view === 'list' }]" @click="view = 'list'">Your automations</button>
-        <button :class="['seg-btn', { on: view === 'templates' }]" @click="view = 'templates'">Templates</button>
-      </div>
-      <button class="btn-primary" @click="newAutomation">
-        <PencilSquareIcon class="w-3.5 h-3.5" />
-        New automation
-      </button>
-    </template>
-
-      <!-- ── Your automations ── -->
-      <template v-if="view === 'list'">
-        <div v-if="store.loading && !store.items.length" class="empty">Loading…</div>
-
-        <!-- Empty state — a real designed panel (icon + heading + actions) that
-             fills the page column and is vertically centred, rather than two
-             stray lines of text floating at the top of the canvas. -->
-        <div v-else-if="!store.items.length" class="col center-empty">
-          <div class="empty-hero">
-            <div class="empty-hero-icon"><BoltIcon class="w-5 h-5" /></div>
-            <h2 class="empty-hero-title">No automations yet</h2>
-            <p class="empty-hero-sub">Use agents to handle recurring work on a cadence you choose.</p>
-            <div class="empty-hero-actions">
-              <button class="btn-primary" @click="newAutomation">New automation</button>
-              <button class="btn-ghost" @click="view = 'templates'">Browse templates</button>
-            </div>
-          </div>
-        </div>
-
-        <template v-else>
-          <div class="col">
-            <p class="section-sub">Use agents to handle recurring work on a cadence you choose.</p>
-
-            <div class="cards">
-              <div
-                v-for="a in store.items"
-                :key="a.id"
-                class="card"
-                :class="cardState(a)"
-              >
-                <div class="card-top">
-                  <div class="card-title-row">
-                    <span class="card-name">{{ a.name }}</span>
-                    <span class="cadence">
-                      <component :is="cadenceOf(a).icon" class="w-3 h-3" />
-                      {{ cadenceOf(a).label }}
-                    </span>
-                  </div>
-                  <!-- Status chip — labelled (Ran ok / Running / Failed). Paused
-                       cards omit it entirely. -->
-                  <span v-if="cardState(a) === 'success'" class="status-chip ok"><CheckCircleIcon class="w-3 h-3" />Ran ok</span>
-                  <span v-else-if="cardState(a) === 'running'" class="status-chip run"><PlayIcon class="w-3 h-3" />Running</span>
-                  <span v-else-if="cardState(a) === 'error'" class="status-chip err"><ExclamationCircleIcon class="w-3 h-3" />Failed</span>
-                </div>
-                <p class="card-prompt">{{ a.prompt }}</p>
-                <div class="card-meta">
-                  <span class="meta-label">Schedule</span>
-                  <span class="meta-value">{{ a.human_schedule }}</span>
-                  <span class="meta-label">{{ a.trigger.type === 'manual' ? 'Last run' : 'Next run' }}</span>
-                  <span class="meta-value" :class="{ next: a.trigger.type !== 'manual' && a.enabled }">{{ nextRunLabel(a) }}</span>
-                  <div class="card-actions">
-                    <button class="icon-btn sm" title="Edit" @click="editAutomation(a)"><PencilSquareIcon class="w-4 h-4" /></button>
-                    <button class="icon-btn sm danger" title="Delete" @click="store.remove(a.id)"><TrashIcon class="w-4 h-4" /></button>
-                    <label class="switch" :title="a.enabled ? 'Enabled' : 'Disabled'">
-                      <input type="checkbox" :checked="a.enabled" @change="store.setEnabled(a, ($event.target as HTMLInputElement).checked)" />
-                      <span class="switch-track"><span class="switch-knob" /></span>
-                    </label>
-                    <button class="run-btn" :class="{ live: isRunning(a) }" :disabled="isRunning(a)" title="Run now" @click="store.runNow(a.id)">
-                      <PlayIcon class="w-4 h-4" />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- ── Recent runs ── The filter + search only appear once there are
-                 runs to act on, so an empty list never shows a stray, misaligned
-                 toolbar. -->
-            <div class="runs-head">
-              <h2>Recent runs</h2>
-              <div v-if="store.runs.length" class="runs-tools">
-                <MenuSelect
-                  v-model="statusFilter"
-                  :options="statusOptions"
-                  placement="bottom"
-                  title="Filter runs"
-                />
-                <input v-model="search" class="run-search" :placeholder="`Search ${store.runs.length} runs…`" />
-              </div>
-            </div>
-            <div v-if="!filteredRuns.length" class="empty sm">No runs yet.</div>
-            <div v-else class="runs">
-              <button
-                v-for="r in filteredRuns"
-                :key="r.session_id"
-                class="run-row"
-                :data-status="r.terminal_status === 'success' ? 'success' : r.terminal_status === 'error' ? 'error' : 'running'"
-                @click="emit('open-run', r)"
-              >
-                <div class="run-main">
-                  <span class="run-title">{{ r.title || 'Automation run' }}</span>
-                  <span class="run-meta">
-                    <span>{{ runLabel(r) }}</span>
-                    <span class="sep">·</span>
-                    <span class="trigger-tag">{{ r.trigger_kind }}</span>
-                  </span>
-                  <span v-if="r.error_reason" class="run-err">{{ r.error_reason }}</span>
-                </div>
-              </button>
-            </div>
-          </div>
-        </template>
-      </template>
-
-      <!-- ── Templates ── -->
-      <template v-else>
-        <div class="col">
-          <p class="section-sub">Start from a template — pick a project and confirm.</p>
-          <div class="tpl-grid">
-            <button v-for="t in store.templates" :key="t.id" class="tpl-card" @click="fromTemplate(t)">
-              <div class="card-top">
-                <span class="card-name">{{ t.name }}</span>
-                <span class="badge">{{ t.badge }}</span>
-              </div>
-              <p class="card-prompt">{{ t.description }}</p>
-              <div class="tpl-foot">{{ t.suggest_mode === 'full_access' ? 'Autopilot' : t.suggest_mode === 'approval' ? 'Ask' : 'Plan' }} · {{ t.trigger.type === 'manual' ? 'manual' : 'schedule' }}</div>
-            </button>
-          </div>
-        </div>
-      </template>
-
-    <AutomationEditorDialog
-      :open="editorOpen"
-      :editing="editing"
-      :prefill="prefill"
-      @close="editorOpen = false"
-      @saved="store.fetchAll()"
-    />
-  </PageSurface>
-</template>
-
-<style scoped>
-/* The page surface (inset chrome + title head + scroll body) is owned by
- * PageSurface. This component styles only its own content + the header actions
- * (segmented toggle + primary button). */
-.seg { display: flex; gap: 2px; background: var(--color-muted); padding: 2px; border-radius: 999px; }
-.seg-btn {
-  padding: 4px 11px; font-family: inherit; font-size: 12px;
-  border: none; border-radius: 999px; color: var(--color-muted-foreground); cursor: pointer;
-  transition: background 0.15s, color 0.15s;
-}
-.seg-btn.on { background: var(--color-surface); color: var(--color-foreground); box-shadow: var(--shadow-sm); }
-
-/* Content column — every block aligns to this centered max-w so cards/runs line
- * up with the header rather than hugging the panel edges. The empty-state
- * variant fills the body and centres the hero vertically. */
-.col { max-width: 48rem; width: 100%; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
-.col.center-empty {
-  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
-  max-width: 380px; text-align: center;
-}
-.section-sub { font-size: 13px; color: var(--color-muted-foreground); padding-top: 18px; padding-bottom: 18px; line-height: 1.5; }
-.empty { padding: 28px 0; color: var(--color-muted-foreground); font-size: 13.5px; }
-.empty.sm { padding: 14px 0; font-size: 13px; }
-
-/* Empty state — a centred, designed panel so the page never reads as "blank".
-   The icon is a quiet outlined tile (no solid orange fill) so it harmonises with
-   the surface rather than punching a hot-coloured disc into the canvas. */
-.empty-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; }
-.empty-hero-icon {
-  display: grid; place-items: center;
-  width: 40px; height: 40px; margin-bottom: 4px;
-  border-radius: var(--radius-lg);
-  color: var(--color-muted-foreground);
-  border: 1px solid var(--color-border);
-  background: var(--color-surface);
-}
-.empty-hero-title { font-size: 15px; font-weight: 600; color: var(--color-foreground); }
-.empty-hero-sub { font-size: 13px; line-height: 1.55; color: var(--color-muted-foreground); }
-.empty-hero-actions { display: flex; gap: 8px; margin-top: 12px; }
-.btn-ghost {
-  padding: 6px 12px; font-family: inherit; font-size: 12.5px; font-weight: 500; border-radius: var(--radius-lg, 10px);
-  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-foreground);
-  cursor: pointer; transition: background 0.15s;
-}
-.btn-ghost:hover { background: var(--color-muted); }
-
-/* ── Automation cards ── redesigned anatomy: status strip + cadence/status
-   header, prompt, then a labelled Schedule / Next-run meta grid. */
-.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; padding-bottom: 6px; }
-.card {
-  position: relative;
-  display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px;
-  background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-xl, 14px);
-  overflow: hidden;
-  transition: border-color 0.15s, box-shadow 0.15s;
-}
-.card:hover { box-shadow: var(--shadow-sm); }
-/* Status strip — a 3px left edge whose colour encodes the run state. */
-.card::before {
-  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-border);
-}
-.card.success::before { background: var(--color-success); }
-.card.error::before   { background: var(--color-destructive); }
-.card.running::before { background: var(--color-primary); }
-.card.paused::before  { background: var(--color-border); }
-.card.paused { opacity: 0.7; }
-
-.card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-.card-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
-.card-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-/* Cadence chip — the trigger as a compact pill. */
-.cadence {
-  display: inline-flex; align-items: center; gap: 4px;
-  font-size: 11px; font-weight: 500; line-height: 1;
-  padding: 3px 8px; border-radius: 999px;
-  color: var(--color-muted-foreground); background: var(--color-muted);
-  white-space: nowrap; flex-shrink: 0;
-}
-/* Status chip — labelled. */
-.status-chip {
-  display: inline-flex; align-items: center; gap: 4px;
-  font-size: 10.5px; font-weight: 600; line-height: 1;
-  padding: 3px 7px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
-}
-.status-chip.ok  { color: var(--color-success-fg); background: var(--color-success-bg); }
-.status-chip.err { color: var(--color-error-fg);   background: var(--color-error-bg); }
-.status-chip.run { color: var(--color-primary);    background: var(--accent-wash, color-mix(in srgb, var(--color-primary) 11%, transparent)); }
-
-.card-prompt {
-  font-size: 12.5px; line-height: 1.5; color: var(--color-muted-foreground);
-  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
-  min-height: 2.6em;
-}
-
-/* Meta grid — the schedule and the next/last run are two labelled facts, not
-   two clauses joined by "·". Actions sit in a right column spanning both rows. */
-.card-meta {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-auto-rows: auto;
-  align-items: center;
-  gap: 4px 12px;
-  margin-top: 4px;
-  padding-top: 10px;
-  border-top: 1px solid var(--color-border);
-}
-.meta-label {
-  font-family: var(--font-mono);
-  grid-column: 1;
-  font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
-  color: var(--color-muted-foreground);
-}
-.meta-value {
-  grid-column: 2;
-  font-size: 12px; color: var(--color-foreground);
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-/* The next-run value is the highest-signal text on a scheduled card — brand
-   accent so the eye lands there. */
-.meta-value.next {
-  color: var(--color-primary); font-weight: 600; font-variant-numeric: tabular-nums;
-}
-
-.card-actions {
-  grid-column: 3; grid-row: 1 / span 2;
-  display: flex; align-items: center; gap: 2px;
-}
-.icon-btn { color: var(--color-muted-foreground); padding: 5px; border-radius: var(--radius-md, 8px); cursor: pointer; transition: background 0.15s, color 0.15s; }
-.icon-btn:hover { background: var(--color-muted); color: var(--color-foreground); }
-.icon-btn.sm { padding: 4px; }
-.icon-btn.danger:hover { color: var(--color-destructive); }
-
-/* Run-now button — a quiet ghost icon button in the same family as edit/delete,
-   NOT a primary-coloured chip. A vivid orange button on every card floods the
-   grid with accent and dominates the row. */
-.run-btn {
-  display: inline-grid; place-items: center;
-  width: 26px; height: 26px;
-  border: none; border-radius: var(--radius-md, 8px);
-  background: transparent; color: var(--color-muted-foreground);
-  cursor: pointer; transition: background 0.15s, color 0.15s;
-}
-.run-btn:hover:not(:disabled) { background: var(--color-muted); color: var(--color-foreground); }
-.run-btn:disabled { opacity: 0.45; cursor: not-allowed; }
-.run-btn.live { color: var(--color-primary); }
-
-.btn-primary {
-  display: inline-flex; align-items: center; gap: 6px;
-  padding: 6px 12px; font-family: inherit; font-size: 12.5px; font-weight: 500; border-radius: var(--radius-lg, 10px);
-  border: none; background: var(--color-primary); color: var(--color-on-primary); cursor: pointer; transition: opacity 0.15s;
-}
-.btn-primary:hover { opacity: 0.9; }
-
-.switch { display: inline-flex; cursor: pointer; }
-.switch input { display: none; }
-.switch-track { width: 32px; height: 18px; border-radius: 999px; background: var(--color-muted); position: relative; transition: background 0.15s; }
-.switch-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform 0.15s; }
-.switch input:checked + .switch-track { background: var(--color-primary); }
-.switch input:checked + .switch-track .switch-knob { transform: translateX(14px); }
-
-/* ── Recent runs — a real list with a status colour-bar + tabular metadata. */
-.runs-head { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; margin-bottom: 12px; }
-.runs-head h2 { font-size: 15px; font-weight: 600; }
-.runs-tools { display: flex; gap: 8px; align-items: center; }
-.run-search {
-  height: 32px; padding: 0 10px; font-family: inherit; font-size: 12.5px; border: 1px solid var(--color-border); border-radius: var(--radius-lg, 10px);
-  background: var(--color-background); color: var(--color-foreground); outline: none; min-width: 220px;
-}
-.run-search:focus { border-color: var(--color-primary); }
-.runs { border: 1px solid var(--color-border); border-radius: var(--radius-xl, 14px); overflow: hidden; background: var(--color-background); margin-bottom: 24px; }
-.run-row {
-  position: relative;
-  display: block; width: 100%; text-align: left;
-  padding: 12px 16px 12px 18px;
-  background: transparent; border: none; border-bottom: 1px solid var(--color-border);
-  cursor: pointer; transition: background 0.15s;
-  font-family: inherit;
-}
-.run-row:last-child { border-bottom: none; }
-.run-row:hover { background: var(--neutral-wash-soft, color-mix(in srgb, var(--color-foreground) 8%, transparent)); }
-.run-row::before {
-  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
-  width: 3px; border-radius: 999px; background: var(--color-border);
-}
-.run-row[data-status="success"]::before { background: var(--color-success); }
-.run-row[data-status="error"]::before   { background: var(--color-destructive); }
-.run-row[data-status="running"]::before { background: var(--color-primary); }
-.run-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
-.run-title { font-size: 13.5px; font-weight: 500; }
-.run-meta {
-  display: inline-flex; align-items: center; gap: 8px;
-  font-size: 11.5px; color: var(--color-muted-foreground); font-variant-numeric: tabular-nums;
-}
-.run-meta .sep { color: var(--color-border); }
-.trigger-tag {
-  font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: var(--radius-sm, 4px);
-  color: var(--color-muted-foreground); background: var(--color-muted);
-}
-.run-err { font-size: 11.5px; line-height: 1.45; color: var(--color-error-fg); margin-top: 2px; }
-
-/* ── Templates ── */
-.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; padding-bottom: 24px; }
-.tpl-card {
-  display: flex; flex-direction: column; gap: 8px; padding: 16px; text-align: left;
-  background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-xl, 14px); cursor: pointer;
-  transition: border-color 0.15s, box-shadow 0.15s;
-  font-family: inherit;
-}
-.tpl-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
-.tpl-card .card-top { margin-bottom: 2px; }
-.badge {
-  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
-  color: var(--color-primary); background: var(--accent-wash, color-mix(in srgb, var(--color-primary) 14%, transparent));
-}
-.tpl-foot { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--color-muted-foreground); margin-top: 2px; }
-</style>
diff --git a/web-react/src/components/BranchPicker.tsx b/web/src/components/BranchPicker.tsx
similarity index 100%
rename from web-react/src/components/BranchPicker.tsx
rename to web/src/components/BranchPicker.tsx
diff --git a/web/src/components/BranchPicker.vue b/web/src/components/BranchPicker.vue
deleted file mode 100644
index ca40e8be..00000000
--- a/web/src/components/BranchPicker.vue
+++ /dev/null
@@ -1,533 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, nextTick } from 'vue'
-import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
-import { CodeBracketIcon, MagnifyingGlassIcon, ChevronDownIcon, CheckIcon, PlusIcon } from '@heroicons/vue/24/outline'
-import { useI18n } from 'vue-i18n'
-import { useBranch } from '@/composables/useBranch'
-
-withDefaults(defineProps<{
-  // Open upward by default; the composer sits low in the viewport.
-  placement?: 'top' | 'bottom'
-}>(), { placement: 'top' })
-
-const { current, branches, switching, error, pending, checkout, resolvePending, cancelPending } =
-  useBranch()
-const { t } = useI18n()
-
-// How many at-risk files to list before collapsing into a "+N more" line.
-const MAX_FILES = 8
-
-const query = ref('')
-const creating = ref(false)
-const newName = ref('')
-const newInput = ref<HTMLInputElement | null>(null)
-
-const filtered = computed(() => {
-  const q = query.value.trim().toLowerCase()
-  if (!q) return branches.value
-  return branches.value.filter((b) => b.toLowerCase().includes(q))
-})
-
-async function pick(branch: string, close: () => void) {
-  if (branch === current.value) {
-    reset()
-    close()
-    return
-  }
-  const ok = await checkout(branch, false)
-  if (ok) {
-    reset()
-    close()
-  }
-  // On failure keep the panel open: either an error message or — when git refused
-  // a dirty-tree switch — the confirmation dialog stays visible.
-}
-
-// Retry a blocked switch with the chosen strategy (stash keeps changes, force
-// discards them). Closes the panel on success.
-async function applyStrategy(strategy: 'stash' | 'force', close: () => void) {
-  const ok = await resolvePending(strategy)
-  if (ok) {
-    reset()
-    close()
-  }
-}
-
-function startCreate() {
-  creating.value = true
-  newName.value = query.value.trim()
-  nextTick(() => newInput.value?.focus())
-}
-
-async function confirmCreate(close: () => void) {
-  const name = newName.value.trim()
-  if (!name) return
-  const ok = await checkout(name, true)
-  if (ok) {
-    reset()
-    close()
-  }
-}
-
-function reset() {
-  query.value = ''
-  creating.value = false
-  newName.value = ''
-  error.value = ''
-  cancelPending()
-}
-</script>
-
-<template>
-  <!-- Only shown for git workspaces (no current branch ⇒ not a repo). -->
-  <div v-if="current" class="bp-bar">
-    <Popover class="bp-popover" style="position: relative">
-      <PopoverButton as="template" :disabled="switching">
-        <button
-          class="bp-pill"
-          :disabled="switching"
-          :title="t('branches.current', { name: current })"
-          @click="reset"
-        >
-          <CodeBracketIcon class="w-3 h-3 bp-pill-icon" />
-          <span class="bp-name">{{ current }}</span>
-          <ChevronDownIcon class="w-3 h-3 bp-caret" />
-        </button>
-      </PopoverButton>
-
-      <transition
-        enter-active-class="pop-enter-active"
-        enter-from-class="pop-enter-from"
-        leave-active-class="pop-leave-active"
-        leave-to-class="pop-leave-to"
-      >
-        <PopoverPanel
-          v-slot="{ close }"
-          class="bp-panel"
-          :class="placement === 'top' ? 'place-top' : 'place-bottom'"
-        >
-          <!-- Confirmation: git refused to switch because it would overwrite
-               uncommitted work. Offer to stash (safe) or discard (force). -->
-          <div v-if="pending" class="bp-confirm">
-            <div class="bp-confirm-title">{{ t('branches.confirmTitle') }}</div>
-            <div class="bp-confirm-intro">
-              {{ t('branches.confirmIntro', { branch: pending.branch }) }}
-            </div>
-            <ul v-if="pending.files.length" class="bp-confirm-files">
-              <li v-for="f in pending.files.slice(0, MAX_FILES)" :key="f">{{ f }}</li>
-              <li v-if="pending.files.length > MAX_FILES" class="bp-confirm-more">
-                {{ t('branches.confirmMore', { count: pending.files.length - MAX_FILES }) }}
-              </li>
-            </ul>
-
-            <div v-if="error" class="bp-error">{{ error }}</div>
-
-            <div class="bp-confirm-actions">
-              <button class="bp-confirm-btn stash" :disabled="switching" @click="applyStrategy('stash', close)">
-                {{ t('branches.confirmStash') }}
-              </button>
-              <button class="bp-confirm-btn discard" :disabled="switching" @click="applyStrategy('force', close)">
-                {{ t('branches.confirmDiscard') }}
-              </button>
-              <button class="bp-confirm-btn cancel" :disabled="switching" @click="reset">
-                {{ t('branches.confirmCancel') }}
-              </button>
-            </div>
-            <div class="bp-confirm-hint">{{ t('branches.confirmHint') }}</div>
-          </div>
-
-          <template v-else>
-            <div class="bp-search">
-              <MagnifyingGlassIcon class="w-3 h-3 bp-search-icon" />
-              <input v-model="query" class="bp-search-input" :placeholder="t('branches.search')" />
-            </div>
-
-            <div class="bp-section">{{ t('branches.title') }}</div>
-            <div class="bp-list">
-              <div v-if="filtered.length === 0" class="bp-hint">{{ t('branches.none') }}</div>
-              <button
-                v-for="b in filtered"
-                :key="b"
-                class="bp-row"
-                :class="{ active: b === current }"
-                :disabled="switching"
-                @click="pick(b, close)"
-              >
-                <CodeBracketIcon class="w-3 h-3 bp-row-icon" />
-                <span class="bp-row-name">{{ b }}</span>
-                <CheckIcon v-if="b === current" class="w-3.5 h-3.5 bp-check" />
-              </button>
-            </div>
-
-            <div v-if="error" class="bp-error">{{ error }}</div>
-
-            <div class="bp-actions">
-              <button v-if="!creating" class="bp-action" @click="startCreate">
-                <PlusIcon class="w-3.5 h-3.5" /> <span>{{ t('branches.create') }}</span>
-              </button>
-              <div v-else class="bp-create">
-                <input
-                  ref="newInput"
-                  v-model="newName"
-                  class="bp-create-input"
-                  :placeholder="t('branches.newName')"
-                  @keydown.enter="confirmCreate(close)"
-                  @keydown.esc="creating = false"
-                />
-                <button
-                  class="bp-create-btn"
-                  :disabled="!newName.trim() || switching"
-                  @click="confirmCreate(close)"
-                >
-                  {{ t('branches.createBtn') }}
-                </button>
-              </div>
-            </div>
-          </template>
-        </PopoverPanel>
-      </transition>
-    </Popover>
-  </div>
-</template>
-
-<style scoped>
-.bp-bar {
-  display: inline-flex;
-  align-items: center;
-  min-width: 0;
-}
-.bp-popover {
-  display: inline-flex;
-  min-width: 0;
-}
-
-.bp-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  height: 28px;
-  max-width: 200px;
-  padding: 0 8px;
-  border: 1px solid transparent;
-  border-radius: var(--radius-lg);
-  background: transparent;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  transition: background 0.15s, transform 0.06s ease;
-}
-.bp-pill:hover:not(:disabled) {
-  background: var(--color-muted);
-}
-.bp-pill:active:not(:disabled) {
-  transform: translateY(0.5px);
-}
-.bp-pill:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-.bp-pill-icon {
-  flex-shrink: 0;
-}
-.bp-name {
-  font-family: var(--font-mono);
-  font-size: 11.5px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.bp-caret {
-  flex-shrink: 0;
-  margin-left: 1px;
-  opacity: 0.7;
-}
-
-.bp-panel {
-  position: absolute;
-  left: 0;
-  z-index: 40;
-  width: 300px;
-  max-width: 84vw;
-  padding: 6px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-lg);
-}
-.bp-panel.place-top {
-  bottom: calc(100% + 6px);
-}
-.bp-panel.place-bottom {
-  top: calc(100% + 6px);
-}
-
-.bp-search {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 5px 8px;
-  margin-bottom: 4px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: var(--color-background);
-}
-.bp-search-icon {
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-.bp-search-input {
-  flex: 1;
-  min-width: 0;
-  border: none;
-  outline: none;
-  background: transparent;
-  font-size: 12.5px;
-  color: var(--color-foreground);
-}
-.bp-search-input::placeholder {
-  color: var(--color-muted-foreground);
-}
-
-.bp-section {
-  padding: 4px 8px 2px;
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--color-muted-foreground);
-}
-
-.bp-list {
-  max-height: 240px;
-  overflow-y: auto;
-  padding: 2px;
-}
-.bp-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 8px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  text-align: left;
-  color: var(--color-foreground);
-  font-size: 12.5px;
-  font-family: var(--font-mono);
-  transition: background 0.12s;
-}
-.bp-row:hover:not(:disabled) {
-  background: var(--color-muted);
-}
-.bp-row.active {
-  background: var(--neutral-wash-soft);
-}
-.bp-row:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-.bp-row-icon {
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-.bp-row.active .bp-row-icon {
-  color: var(--color-accent-neutral);
-}
-.bp-row-name {
-  flex: 1;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.bp-check {
-  color: var(--color-accent-neutral);
-  flex-shrink: 0;
-}
-.bp-hint {
-  padding: 14px 8px;
-  text-align: center;
-  font-size: 11.5px;
-  color: var(--color-muted-foreground);
-}
-
-.bp-error {
-  margin: 4px 2px 2px;
-  padding: 7px 9px;
-  border-radius: var(--radius-md);
-  background: var(--color-error-bg);
-  color: var(--color-error-fg);
-  font-size: 11.5px;
-  line-height: 1.45;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.bp-confirm {
-  padding: 6px 6px 4px;
-}
-.bp-confirm-title {
-  font-size: 12.5px;
-  font-weight: 600;
-  color: var(--color-foreground);
-}
-.bp-confirm-intro {
-  margin-top: 4px;
-  font-size: 11.5px;
-  line-height: 1.45;
-  color: var(--color-muted-foreground);
-}
-.bp-confirm-files {
-  margin: 8px 0 2px;
-  padding: 6px 8px;
-  max-height: 132px;
-  overflow-y: auto;
-  list-style: none;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-background);
-}
-.bp-confirm-files li {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  line-height: 1.6;
-  color: var(--color-foreground);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.bp-confirm-files .bp-confirm-more {
-  font-family: inherit;
-  color: var(--color-muted-foreground);
-}
-.bp-confirm-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 10px;
-}
-.bp-confirm-btn {
-  flex: 1 1 auto;
-  height: 30px;
-  padding: 0 10px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  color: var(--color-foreground);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.12s, opacity 0.15s;
-}
-.bp-confirm-btn:hover:not(:disabled) {
-  background: var(--color-muted);
-}
-.bp-confirm-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.bp-confirm-btn.stash {
-  border-color: transparent;
-  background: var(--color-accent-neutral);
-  color: var(--color-surface);
-}
-.bp-confirm-btn.stash:hover:not(:disabled) {
-  background: var(--color-accent-neutral);
-  opacity: 0.9;
-}
-.bp-confirm-btn.discard {
-  border-color: var(--color-error-fg);
-  color: var(--color-error-fg);
-}
-.bp-confirm-btn.discard:hover:not(:disabled) {
-  background: var(--color-error-bg);
-}
-.bp-confirm-hint {
-  margin-top: 8px;
-  font-size: 10.5px;
-  line-height: 1.45;
-  color: var(--color-muted-foreground);
-}
-
-.bp-actions {
-  margin-top: 4px;
-  padding-top: 4px;
-  border-top: 1px solid var(--color-border);
-}
-.bp-action {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 8px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  font-size: 12.5px;
-  color: var(--color-foreground);
-  transition: background 0.12s;
-}
-.bp-action:hover {
-  background: var(--color-muted);
-}
-.bp-action svg {
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-
-.bp-create {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px;
-}
-.bp-create-input {
-  flex: 1;
-  min-width: 0;
-  height: 30px;
-  padding: 0 9px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-background);
-  color: var(--color-foreground);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  outline: none;
-}
-.bp-create-input:focus {
-  border-color: var(--color-accent-neutral);
-}
-.bp-create-btn {
-  flex-shrink: 0;
-  height: 30px;
-  padding: 0 12px;
-  border: none;
-  border-radius: var(--radius-md);
-  background: var(--color-accent-neutral);
-  color: var(--color-surface);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: opacity 0.15s;
-}
-.bp-create-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.pop-enter-active,
-.pop-leave-active {
-  transition: opacity 0.12s ease, transform 0.12s ease;
-}
-.pop-enter-from,
-.pop-leave-to {
-  opacity: 0;
-  transform: translateY(4px);
-}
-.bp-panel.place-bottom.pop-enter-from,
-.bp-panel.place-bottom.pop-leave-to {
-  transform: translateY(-4px);
-}
-</style>
diff --git a/web-react/src/components/ChannelsView.tsx b/web/src/components/ChannelsView.tsx
similarity index 88%
rename from web-react/src/components/ChannelsView.tsx
rename to web/src/components/ChannelsView.tsx
index d6d59021..e6f918f0 100644
--- a/web-react/src/components/ChannelsView.tsx
+++ b/web/src/components/ChannelsView.tsx
@@ -16,7 +16,7 @@
  * settings.channels.* keys the Vue file reuses).
  */
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   SignalIcon,
   CursorArrowRaysIcon,
@@ -26,6 +26,7 @@ import {
   CheckBadgeIcon,
 } from '@heroicons/react/24/outline'
 import QRCode from 'qrcode'
+import { useTranslation } from 'react-i18next'
 import { api } from '../lib/api'
 import { useAppDispatch } from '../app/hooks'
 import { uiActions } from '../app/store'
@@ -33,32 +34,30 @@ import { uiActions } from '../app/store'
 // Finer-grained string the QR flow drives.
 type ChannelState = 'none' | 'scanning' | 'enabled' | 'disabled'
 
-interface Feature {
-  icon: typeof SignalIcon
-  title: string
-  desc: string
-}
-
-const FEATURES: Feature[] = [
-  {
-    icon: CursorArrowRaysIcon,
-    title: 'One-tap approvals',
-    desc: 'Approve or deny a tool call right from the WeChat message — no need to open the app.',
-  },
-  {
-    icon: BellAlertIcon,
-    title: 'Done notifications',
-    desc: 'Get pinged the moment a scheduled automation or background task finishes.',
-  },
-  {
-    icon: QrCodeIcon,
-    title: 'Scan to connect',
-    desc: 'Pair in seconds with a QR code. Disconnect any time from Settings → Channels.',
-  },
-]
-
 export function ChannelsView() {
+  const { t } = useTranslation()
   const dispatch = useAppDispatch()
+
+  const features = useMemo(
+    () => [
+      {
+        icon: CursorArrowRaysIcon,
+        title: t('channels.features.approvals.title'),
+        desc: t('channels.features.approvals.desc'),
+      },
+      {
+        icon: BellAlertIcon,
+        title: t('channels.features.notifications.title'),
+        desc: t('channels.features.notifications.desc'),
+      },
+      {
+        icon: QrCodeIcon,
+        title: t('channels.features.scan.title'),
+        desc: t('channels.features.scan.desc'),
+      },
+    ],
+    [t],
+  )
   // ── WeChat channel state ──
   const [channelAvailable, setChannelAvailable] = useState(false)
   const [channelState, setChannelState] = useState<ChannelState>('none')
@@ -202,11 +201,14 @@ export function ChannelsView() {
   const isConnected = channelState === 'enabled'
   const isScanning = channelState === 'scanning'
 
+  // Promo title uses HTML for the accent span (matches Vue v-html).
+  const promoTitleHtml = t('channels.promo.title')
+
   return (
     <div className="page-surface flex min-h-0 flex-1 flex-col">
       <header className="flex h-[var(--header-height)] shrink-0 items-center gap-2 border-b border-[var(--color-border)] bg-[var(--color-surface)] px-4">
         <SignalIcon className="h-4 w-4 text-[var(--color-primary)]" />
-        <h1 className="text-sm font-medium">Channels</h1>
+        <h1 className="text-sm font-medium">{t('nav.channels')}</h1>
       </header>
 
       <div className="min-h-0 flex-1 overflow-y-auto">
@@ -220,16 +222,13 @@ export function ChannelsView() {
               <div className="promo-inner">
                 <span className="promo-eyebrow">
                   <SignalIcon className="h-3.5 w-3.5" />
-                  Channels
+                  {t('nav.channels')}
                 </span>
-                <h2 className="promo-title">
-                  Approve and monitor from <span className="accent">your phone</span>
-                </h2>
-                <p className="promo-lede">
-                  Link WeChat once. jcode forwards every approval request and task-completion notice
-                  straight to your chat — so a long-running agent never waits on you being at the
-                  desk.
-                </p>
+                <h2
+                  className="promo-title"
+                  dangerouslySetInnerHTML={{ __html: promoTitleHtml }}
+                />
+                <p className="promo-lede">{t('channels.promo.lede')}</p>
 
                 {/* Connect flow: QR while scanning */}
                 {isScanning && (
@@ -238,13 +237,13 @@ export function ChannelsView() {
                       /* eslint-disable-next-line @next/next/no-img-element -- local data URL */
                       <img
                         src={qrDataUrl}
-                        alt="WeChat login QR code"
+                        alt={t('settings.channels.qrAlt')}
                         className="qr-canvas"
                         width={200}
                         height={200}
                       />
                     )}
-                    <p className="qr-hint">Scan with WeChat to connect</p>
+                    <p className="qr-hint">{t('settings.channels.scanQr')}</p>
                   </div>
                 )}
 
@@ -253,13 +252,10 @@ export function ChannelsView() {
                   <div className="connected">
                     <div className="conn-status">
                       <span className="conn-dot" />
-                      <span>Connected</span>
+                      <span>{t('channels.connected')}</span>
                     </div>
                     {loginReminder && (
-                      <p className="conn-reminder">
-                        Please send any message to the WeChat bot now to activate notifications.
-                        Once activated, you can receive notifications for 24 hours.
-                      </p>
+                      <p className="conn-reminder">{t('settings.channels.activateBody')}</p>
                     )}
                     <div className="flex flex-wrap gap-2">
                       <button
@@ -268,7 +264,7 @@ export function ChannelsView() {
                         disabled={channelLoading}
                         className="btn-outline"
                       >
-                        Disable
+                        {t('settings.channels.disable')}
                       </button>
                       <button
                         type="button"
@@ -276,7 +272,7 @@ export function ChannelsView() {
                         disabled={channelLoading}
                         className="btn-outline"
                       >
-                        Disconnect
+                        {t('settings.channels.disconnect')}
                       </button>
                     </div>
                   </div>
@@ -286,7 +282,7 @@ export function ChannelsView() {
                 {!isScanning && !isConnected && (
                   <>
                     <div className="promo-features">
-                      {FEATURES.map((f) => {
+                      {features.map((f) => {
                         const Icon = f.icon
                         return (
                           <div key={f.title} className="promo-feat">
@@ -311,7 +307,7 @@ export function ChannelsView() {
                           className="btn-primary"
                         >
                           <DevicePhoneMobileIcon className="h-4 w-4" />
-                          {channelLoading ? 'Loading…' : 'Enable'}
+                          {channelLoading ? t('settings.channels.loadingHint') : t('settings.channels.enable')}
                         </button>
                       ) : (
                         <button
@@ -321,10 +317,12 @@ export function ChannelsView() {
                           className="btn-primary"
                         >
                           <DevicePhoneMobileIcon className="h-4 w-4" />
-                          {channelLoading ? 'Loading…' : 'Connect'}
+                          {channelLoading ? t('settings.channels.loadingHint') : t('settings.channels.connect')}
                         </button>
                       )}
-                      {!channelAvailable && <span className="cta-hint">No channels configured</span>}
+                      {!channelAvailable && (
+                        <span className="cta-hint">{t('settings.channels.noneConfigured')}</span>
+                      )}
                     </div>
                   </>
                 )}
@@ -347,29 +345,29 @@ export function ChannelsView() {
                     <div className="wc-head">
                       <span className="wc-avatar">j</span>
                       <span className="wc-name">jcode</span>
-                      <span className="wc-time">now</span>
+                      <span className="wc-time">{t('channels.mock.now')}</span>
                     </div>
                     <div className="wc-body">
-                      <b>Approval needed</b>
+                      <b>{t('channels.mock.approvalTitle')}</b>
                       <br />
-                      <span className="muted">Run</span> <code>git push origin</code>{' '}
+                      <span className="muted">{t('channels.mock.run')}</span> <code>git push origin</code>{' '}
                       <span className="muted">?</span>
                     </div>
                     <div className="wc-actions">
                       <button type="button" className="wc-btn approve">
-                        Approve
+                        {t('channels.mock.approve')}
                       </button>
                       <button type="button" className="wc-btn deny">
-                        Deny
+                        {t('channels.mock.deny')}
                       </button>
                     </div>
                   </div>
 
                   <div className="wc-msg-2">
-                    <div className="wc-sub">jcode · now</div>
-                    <div className="wc-line">✓ Nightly automations finished</div>
+                    <div className="wc-sub">jcode · {t('channels.mock.now')}</div>
+                    <div className="wc-line">✓ {t('channels.mock.done')}</div>
                     <span className="wc-pill">
-                      <CheckBadgeIcon className="h-2.5 w-2.5" /> 3 tasks · 0 failed
+                      <CheckBadgeIcon className="h-2.5 w-2.5" /> {t('channels.mock.summary')}
                     </span>
                   </div>
                 </div>
diff --git a/web/src/components/ChannelsView.vue b/web/src/components/ChannelsView.vue
deleted file mode 100644
index 91c26ec3..00000000
--- a/web/src/components/ChannelsView.vue
+++ /dev/null
@@ -1,400 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
-import {
-  SignalIcon,
-  CursorArrowRaysIcon,
-  BellAlertIcon,
-  QrCodeIcon,
-  DevicePhoneMobileIcon,
-  CheckBadgeIcon,
-} from '@heroicons/vue/24/outline'
-import QRCode from 'qrcode'
-import { useI18n } from 'vue-i18n'
-import { useChatStore } from '@/stores/chat'
-import { api } from '@/composables/api'
-import PageSurface from '@/components/PageSurface.vue'
-
-// Channels is a page inside the shell (same inset-surface geometry as
-// AutomationsView via the shared PageSurface), not an overlay. The parent
-// (<main> in App.vue) mounts this via v-if, so the channel-status fetch fires
-// on entry and the poll tears down on exit. The WeChat login/QR/poll logic
-// mirrors SettingsDialog's Channels tab (kept local on purpose — a shared
-// composable was deferred to avoid touching SettingsDialog).
-const { t } = useI18n()
-const store = useChatStore()
-
-// Channel state. `channelState` is the finer-grained string the QR flow needs;
-// store.channelEnabled is the derived boolean the rest of the app reads.
-const channelAvailable = ref(false)
-const channelState = ref<'none' | 'scanning' | 'enabled' | 'disabled'>('none')
-const channelLoading = ref(false)
-const channelQRContent = ref('')
-const channelLoginReminder = ref(false)
-const qrCanvas = ref<HTMLCanvasElement | null>(null)
-
-async function fetchStatus() {
-  try {
-    const ch = await api.channelStatus()
-    channelAvailable.value = ch.available
-    channelState.value = (ch.state as typeof channelState.value) || 'none'
-    store.channelEnabled = ch.state === 'enabled'
-  } catch { /* ignore */ }
-}
-
-onMounted(() => { void fetchStatus() })
-
-// ── WeChat connect (QR) ── mirrored from SettingsDialog so this page owns its
-// own scan lifecycle without depending on the settings dialog being open.
-async function drawChannelQR() {
-  await nextTick()
-  if (!qrCanvas.value || !channelQRContent.value) return
-  // Resolve QR colors from design tokens so the code follows the active theme.
-  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 },
-  })
-}
-
-async function channelLogin() {
-  channelLoading.value = true
-  try {
-    const result = await api.channelLogin()
-    channelQRContent.value = result.qr_content
-    channelState.value = 'scanning'
-    await drawChannelQR()
-    pollChannelState()
-  } catch (err) {
-    console.error('Channel login failed:', err)
-  }
-  channelLoading.value = false
-}
-
-async function channelLogout() {
-  channelLoading.value = true
-  try {
-    await api.channelLogout()
-    channelState.value = 'none'
-    channelQRContent.value = ''
-    store.channelEnabled = false
-    channelAvailable.value = false
-  } catch (err) {
-    console.error('Channel logout failed:', err)
-  }
-  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
-  channelPollInterval = setInterval(async () => {
-    try {
-      const ch = await api.channelStatus()
-      if (ch.state === 'enabled' || ch.state === 'disabled') {
-        channelState.value = ch.state as typeof channelState.value
-        channelQRContent.value = ''
-        channelAvailable.value = true
-        store.channelEnabled = ch.state === 'enabled'
-        if (ch.state === 'enabled' && previousState === 'scanning') {
-          channelLoginReminder.value = true
-        }
-        stopChannelPoll()
-      }
-    } catch { /* ignore */ }
-  }, 2000)
-  channelPollTimeout = setTimeout(stopChannelPoll, 180000)
-}
-
-onUnmounted(() => { stopChannelPoll() })
-
-const isConnected = computed(() => channelState.value === 'enabled')
-const isScanning = computed(() => channelState.value === 'scanning')
-
-// Re-draw the QR if it's mid-scan and the canvas remounts (e.g. after a theme
-// switch re-evaluates the v-if). Mirrors the settings tab re-entry behavior.
-watch(channelQRContent, (v) => { if (v) void drawChannelQR() })
-
-const features = computed(() => [
-  { icon: CursorArrowRaysIcon, title: t('channels.features.approvals.title'), desc: t('channels.features.approvals.desc') },
-  { icon: BellAlertIcon, title: t('channels.features.notifications.title'), desc: t('channels.features.notifications.desc') },
-  { icon: QrCodeIcon, title: t('channels.features.scan.title'), desc: t('channels.features.scan.desc') },
-])
-</script>
-
-<template>
-  <PageSurface :title="t('nav.channels')" col-width="56rem">
-      <div class="chan-stage">
-        <!-- LEFT: promo / connection card -->
-        <div class="promo-card">
-          <div class="promo-glow" aria-hidden="true" />
-          <div class="promo-inner">
-            <span class="promo-eyebrow">
-              <SignalIcon class="w-3.5 h-3.5" /> {{ t('nav.channels') }}
-            </span>
-            <h2 class="promo-title" v-html="t('channels.promo.title')" />
-            <p class="promo-lede">{{ t('channels.promo.lede') }}</p>
-
-            <!-- Connect flow: QR while scanning -->
-            <div v-if="isScanning" class="qr-block">
-              <canvas ref="qrCanvas" class="qr-canvas" />
-              <p class="qr-hint">{{ t('settings.channels.scanQr') }}</p>
-            </div>
-
-            <!-- Connected state -->
-            <div v-else-if="isConnected" class="connected">
-              <div class="conn-status">
-                <span class="conn-dot" />
-                <span>{{ t('channels.connected') }}</span>
-              </div>
-              <p v-if="channelLoginReminder" class="conn-reminder">{{ t('settings.channels.activateBody') }}</p>
-              <button class="btn-outline" :disabled="channelLoading" @click="channelLogout">
-                {{ t('settings.channels.disconnect') }}
-              </button>
-            </div>
-
-            <!-- Feature list + CTA (disconnected) -->
-            <template v-else>
-              <div class="promo-features">
-                <div v-for="f in features" :key="f.title" class="promo-feat">
-                  <span class="feat-ic"><component :is="f.icon" class="w-4 h-4" /></span>
-                  <div>
-                    <h4>{{ f.title }}</h4>
-                    <p>{{ f.desc }}</p>
-                  </div>
-                </div>
-              </div>
-
-              <div class="promo-cta">
-                <button class="btn-primary" :disabled="channelLoading" @click="channelLogin">
-                  <DevicePhoneMobileIcon class="w-4 h-4" />
-                  {{ channelLoading ? t('settings.channels.loadingHint') : t('settings.channels.connect') }}
-                </button>
-                <span v-if="!channelAvailable" class="cta-hint">{{ t('settings.channels.noneConfigured') }}</span>
-              </div>
-            </template>
-          </div>
-        </div>
-
-        <!-- RIGHT: phone mock — what the remote experience looks like -->
-        <div class="phone-col">
-          <div class="phone">
-            <div class="phone-notch" />
-            <div class="phone-screen">
-              <div class="phone-status"><span>9:41</span><span class="bat" /></div>
-
-              <div class="wc-msg">
-                <div class="wc-head">
-                  <span class="wc-avatar">j</span>
-                  <span class="wc-name">jcode</span>
-                  <span class="wc-time">{{ t('channels.mock.now') }}</span>
-                </div>
-                <div class="wc-body">
-                  <b>{{ t('channels.mock.approvalTitle') }}</b><br>
-                  <span class="muted">{{ t('channels.mock.run') }}</span>
-                  <code>git push origin</code>
-                  <span class="muted">?</span>
-                </div>
-                <div class="wc-actions">
-                  <button class="wc-btn approve">{{ t('channels.mock.approve') }}</button>
-                  <button class="wc-btn deny">{{ t('channels.mock.deny') }}</button>
-                </div>
-              </div>
-
-              <div class="wc-msg-2">
-                <div class="wc-sub">jcode · {{ t('channels.mock.now') }}</div>
-                <div class="wc-line">✓ {{ t('channels.mock.done') }}</div>
-                <span class="wc-pill">
-                  <CheckBadgeIcon class="w-2.5 h-2.5" /> {{ t('channels.mock.summary') }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-  </PageSurface>
-</template>
-
-<style scoped>
-/* The page surface (inset chrome + title head + scroll body) is owned by
- * PageSurface. This component styles only its own content. Content column is
- * centered + inset to match the chat timeline, scoped to PageSurface's body. */
-:deep(.page-body) > * { max-width: 56rem; margin-left: auto; margin-right: auto; padding: 0 20px 32px; }
-
-.chan-stage { display: flex; gap: 40px; align-items: flex-start; padding-top: 16px; }
-@media (max-width: 860px) { .chan-stage { flex-direction: column; } }
-
-/* ── Promo card (left-anchored) ── */
-.promo-card {
-  flex: 1;
-  min-width: 0;
-  position: relative;
-  background:
-    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 60%),
-    var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-2xl);
-  overflow: hidden;
-}
-.promo-glow {
-  position: absolute;
-  top: -90px; left: -60px;
-  width: 280px; height: 280px;
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--color-primary) 13%, transparent);
-  filter: blur(46px);
-  opacity: 0.8;
-  pointer-events: none;
-}
-.promo-inner { position: relative; padding: 32px; display: flex; flex-direction: column; }
-.promo-eyebrow {
-  align-self: flex-start;
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--color-primary);
-  padding: 5px 11px;
-  border-radius: var(--radius-pill);
-  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
-  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
-}
-.promo-title {
-  font-size: 26px;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  margin: 18px 0 0;
-  line-height: 1.15;
-}
-.promo-title :deep(.accent) { color: var(--color-primary); }
-.promo-lede {
-  font-size: 13.5px;
-  color: var(--color-muted-foreground);
-  line-height: 1.6;
-  margin: 14px 0 0;
-  max-width: 44ch;
-}
-
-.promo-features { display: flex; flex-direction: column; gap: 16px; margin: 24px 0 0; }
-.promo-feat { display: flex; gap: 13px; align-items: flex-start; }
-.feat-ic {
-  display: grid; place-items: center;
-  width: 36px; height: 36px; flex-shrink: 0;
-  border-radius: var(--radius-lg);
-  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
-  border: 1px solid color-mix(in srgb, var(--color-foreground) 30%, transparent);
-  color: var(--color-foreground);
-}
-.promo-feat h4 { font-size: 13.5px; font-weight: 600; margin: 3px 0 3px; }
-.promo-feat p { font-size: 12.5px; color: var(--color-muted-foreground); line-height: 1.5; margin: 0; max-width: 42ch; }
-
-.promo-cta { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
-.btn-primary {
-  display: inline-flex; align-items: center; gap: 8px;
-  padding: 10px 18px;
-  background: var(--color-primary);
-  color: var(--color-on-primary, #fff);
-  border: none;
-  border-radius: var(--radius-pill);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--color-primary) 60%, transparent);
-  transition: box-shadow 0.15s, opacity 0.15s;
-}
-.btn-primary:hover:not(:disabled) { box-shadow: 0 6px 22px -5px color-mix(in srgb, var(--color-primary) 70%, transparent); }
-.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
-.cta-hint { font-size: 11.5px; color: var(--color-muted-foreground); }
-
-/* ── Connect (QR) ── */
-.qr-block { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; }
-.qr-canvas { border: 1px solid var(--color-border); border-radius: var(--radius-md); }
-.qr-hint { font-size: 12px; color: var(--color-muted-foreground); }
-
-/* ── Connected ── */
-.connected { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
-.conn-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--color-success); }
-.conn-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-success); }
-.conn-reminder {
-  font-size: 12px; line-height: 1.5; color: var(--color-foreground);
-  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
-  border-radius: var(--radius-lg); padding: 10px 12px;
-}
-.btn-outline {
-  align-self: flex-start;
-  padding: 7px 14px;
-  font-size: 12.5px;
-  font-weight: 500;
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border);
-  background: var(--color-surface);
-  color: var(--color-foreground);
-  cursor: pointer;
-  transition: background 0.15s;
-}
-.btn-outline:hover:not(:disabled) { background: var(--color-muted); }
-.btn-outline:disabled { opacity: 0.6; cursor: not-allowed; }
-
-/* ── Phone mock (right) ── */
-.phone-col { flex: 0 0 auto; display: flex; padding-top: 24px; }
-.phone {
-  width: 240px;
-  border: 2px solid var(--color-foreground);
-  border-radius: 32px;
-  padding: 10px;
-  background: var(--color-background);
-  box-shadow: var(--shadow-xl);
-  position: relative;
-}
-.phone-notch {
-  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
-  width: 72px; height: 18px;
-  background: var(--color-foreground);
-  border-radius: 0 0 12px 12px;
-}
-.phone-screen {
-  border-radius: 24px;
-  overflow: hidden;
-  background: var(--color-muted);
-  height: 400px;
-  padding: 32px 12px 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 11px;
-}
-.phone-status { display: flex; align-items: center; justify-content: space-between; font-size: 9px; color: var(--color-muted-foreground); padding: 0 6px; }
-.bat { width: 16px; height: 8px; border: 1px solid currentColor; border-radius: 2px; position: relative; }
-.bat::after { content: ''; position: absolute; inset: 1px; background: currentColor; border-radius: 1px; }
-
-.wc-msg, .wc-msg-2 { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; }
-.wc-msg { padding: 12px 13px; box-shadow: var(--shadow-sm); }
-.wc-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
-.wc-avatar { width: 22px; height: 22px; border-radius: 6px; background: var(--color-primary); display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; font-family: var(--font-mono); }
-.wc-name { font-size: 11.5px; font-weight: 600; }
-.wc-time { margin-left: auto; font-size: 9px; color: var(--color-muted-foreground); }
-.wc-body { font-size: 11.5px; line-height: 1.5; color: var(--color-foreground); }
-.wc-body .muted { color: var(--color-muted-foreground); }
-.wc-body code { font-family: var(--font-mono); font-size: 10px; background: var(--color-muted); padding: 1px 4px; border-radius: 3px; }
-.wc-actions { display: flex; gap: 8px; margin-top: 10px; }
-.wc-btn { flex: 1; padding: 8px 0; border-radius: 8px; font-size: 11px; font-weight: 600; border: none; cursor: default; }
-.wc-btn.approve { background: #07C160; color: #fff; }
-.wc-btn.deny { background: var(--color-muted); color: var(--color-foreground); border: 1px solid var(--color-border); }
-.wc-msg-2 { padding: 10px 13px; }
-.wc-sub { font-size: 10px; color: var(--color-muted-foreground); margin-bottom: 3px; }
-.wc-line { font-size: 11.5px; font-weight: 500; }
-.wc-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: #07C160; background: color-mix(in srgb, #07C160 12%, transparent); padding: 2px 8px; border-radius: var(--radius-pill); margin-top: 7px; }
-</style>
diff --git a/web-react/src/components/ChatInput.tsx b/web/src/components/ChatInput.tsx
similarity index 97%
rename from web-react/src/components/ChatInput.tsx
rename to web/src/components/ChatInput.tsx
index c566b539..ca176c71 100644
--- a/web-react/src/components/ChatInput.tsx
+++ b/web/src/components/ChatInput.tsx
@@ -74,6 +74,12 @@ export interface ChatInputProps {
   onSent?: () => void
   /** Direction for workspace/branch panels. Welcome opens downward. */
   pickerPlacement?: 'top' | 'bottom'
+  /**
+   * Elevate the whole composer into a bordered, shadowed card (welcome /
+   * new-task screen). Docked conversation composers stay recessed.
+   * Mirrors Vue's `.composer-elevated` on `.chat-input-card`.
+   */
+  elevated?: boolean
 }
 
 // ─── Constants ──────────────────────────────────────────────────────────────
@@ -123,7 +129,7 @@ function modelSubline(modelId: string, info?: { context_limit?: number }): strin
 
 // ─── Component ──────────────────────────────────────────────────────────────
 
-export function ChatInput({ onSent, pickerPlacement = 'top' }: ChatInputProps) {
+export function ChatInput({ onSent, pickerPlacement = 'top', elevated = false }: ChatInputProps) {
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
 
@@ -613,8 +619,13 @@ export function ChatInput({ onSent, pickerPlacement = 'top' }: ChatInputProps) {
 
   // ─── Render ───────────────────────────────────────────────────────────────
 
+  // Welcome/new-task elevates the whole card; docked conversation stays flat.
+  const isElevated = elevated || !hasMessages
+
+  // Horizontal inset comes from the parent (`.chat-col` or welcome `px-5`) so
+  // the composer width matches the message column exactly.
   return (
-    <div ref={containerRef} className="relative bg-transparent" style={{ padding: '8px 20px 14px' }}>
+    <div ref={containerRef} className="relative w-full bg-transparent" style={{ padding: '8px 0 14px' }}>
       {/* Type-ahead queue */}
       {queued.length > 0 && (
         <div className="mx-auto mb-1.5 flex flex-col gap-1" style={{ padding: '0 8px 6px' }}>
@@ -650,8 +661,12 @@ export function ChatInput({ onSent, pickerPlacement = 'top' }: ChatInputProps) {
       )}
 
       <div
-        className="relative mx-auto flex flex-col rounded-[var(--radius-xl)]"
-        style={{ padding: '4px 6px 10px' }}
+        className={`relative mx-auto flex flex-col ${
+          isElevated
+            ? 'rounded-[var(--radius-2xl)] border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[var(--shadow-xl)]'
+            : 'rounded-[var(--radius-xl)] bg-transparent'
+        }`}
+        style={{ padding: isElevated ? '6px 12px 12px' : '4px 6px 10px' }}
       >
         {/* Slash command menu */}
         {showSlashMenu && filteredSlashCommands.length > 0 && (
@@ -668,7 +683,7 @@ export function ChatInput({ onSent, pickerPlacement = 'top' }: ChatInputProps) {
               >
                 <span className="shrink-0 font-mono text-xs text-[var(--color-primary)]">{cmd.slash}</span>
                 {cmd.type === 'flow' && (
-                  <span className="shrink-00 rounded-[var(--radius-pill)] border border-[var(--accent-wash)] bg-[var(--accent-wash)] px-1.5 py-0.5 text-[10px] font-semibold leading-none text-[var(--color-primary)]">
+                  <span className="shrink-0 rounded-[var(--radius-pill)] border border-[var(--accent-wash)] bg-[var(--accent-wash)] px-1.5 py-0.5 text-[10px] font-semibold leading-none text-[var(--color-primary)]">
                     workflow
                   </span>
                 )}
@@ -679,14 +694,19 @@ export function ChatInput({ onSent, pickerPlacement = 'top' }: ChatInputProps) {
         )}
 
         {!hasMessages && (
-          <div className="flex min-w-0 items-center gap-1.5 px-1 pb-2">
+          <div
+            className="flex min-w-0 items-center gap-1.5"
+            style={{ padding: isElevated ? '2px 4px 9px' : '0 2px 5px' }}
+          >
             <WorkspacePicker placement={pickerPlacement} />
             <BranchPicker placement={pickerPlacement} />
           </div>
         )}
 
         <div
-          className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[color-mix(in_srgb,var(--color-surface)_90%,#000)] transition-colors focus-within:border-[color-mix(in_srgb,var(--color-foreground)_30%,transparent)]"
+          className={`border border-[var(--color-border)] bg-[color-mix(in_srgb,var(--color-surface)_90%,#000)] transition-colors focus-within:border-[color-mix(in_srgb,var(--color-foreground)_30%,transparent)] ${
+            isElevated ? 'rounded-[var(--radius-xl)]' : 'rounded-[var(--radius-lg)]'
+          }`}
           style={{ padding: '14px 16px 0' }}
         >
           {/* Textarea + image previews */}
diff --git a/web/src/components/ChatInput.vue b/web/src/components/ChatInput.vue
deleted file mode 100644
index a4ca027e..00000000
--- a/web/src/components/ChatInput.vue
+++ /dev/null
@@ -1,2210 +0,0 @@
-<script setup lang="ts">
-import { ref, nextTick, watch, computed, onMounted, onUnmounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useChatStore } from '@/stores/chat'
-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 ContextCapacityPopup from '@/components/ContextCapacityPopup.vue'
-import ProviderIcon from '@/components/ProviderIcon.vue'
-import { HandRaisedIcon, ShieldExclamationIcon, ClipboardDocumentListIcon, BoltIcon, PlusIcon, PaperClipIcon, XMarkIcon, ChevronDownIcon, StopIcon, PaperAirplaneIcon, MagnifyingGlassIcon, SquaresPlusIcon, PhotoIcon, WrenchScrewdriverIcon, CheckIcon, StarIcon, SparklesIcon } from '@heroicons/vue/24/outline'
-import { StarIcon as StarIconSolid, CheckCircleIcon } from '@heroicons/vue/24/solid'
-
-// Which way the workspace/branch pickers open. The docked composer opens them
-// upward (default); the centered welcome composer has more empty room below, so
-// it opens them downward to avoid clipping against the top of the canvas.
-withDefaults(defineProps<{ pickerPlacement?: 'top' | 'bottom' }>(), {
-  pickerPlacement: 'top',
-})
-
-// Fired when the user dispatches a message (sent now or queued while a turn is
-// in flight). The parent uses it to snap the timeline to the bottom so you see
-// your message land even if you'd scrolled up into history.
-const emit = defineEmits<{ sent: [] }>()
-
-const store = useChatStore()
-const { t } = useI18n()
-const input = ref('')
-const textarea = ref<HTMLTextAreaElement | null>(null)
-const showModelPicker = ref(false)
-const showEffortPicker = ref(false)
-const showModePicker = ref(false)
-const showAddMenu = ref(false)
-const showContextPopup = ref(false)
-
-// Context-fill ring on the composer: the orange arc fills with the % of the
-// context window in use, turning red as it approaches the limit.
-const ctxRingCirc = 2 * Math.PI * 6.4
-const ctxRingOffset = computed(() => {
-  const p = Math.min(100, Math.max(0, store.tokenPercentage))
-  return ctxRingCirc * (1 - p / 100)
-})
-const ctxRingColor = computed(() => (store.tokenPercentage >= 90 ? '#E24B4A' : 'var(--color-primary)'))
-const showManageModels = ref(false)
-const modelFilter = ref('')
-const containerRef = ref<HTMLDivElement | null>(null)
-
-const slashCommands = ref<SlashCommandInfo[]>([])
-const showSlashMenu = ref(false)
-const slashFilter = ref('')
-const selectedSlashIdx = ref(0)
-
-// Image attachment state
-const pendingImages = ref<ChatImage[]>([])
-const pendingImagePreviews = ref<string[]>([])
-const fileInput = ref<HTMLInputElement | null>(null)
-
-const modes = computed(() => [
-  { value: 'approval' as const, label: t('chat.modes.approval'), icon: HandRaisedIcon, sub: t('chat.modes.approvalSub'), risk: 'neutral' as const },
-  { value: 'plan' as const, label: t('chat.modes.plan'), icon: ClipboardDocumentListIcon, sub: t('chat.modes.planSub'), risk: 'plan' as const },
-  { value: 'full_access' as const, label: t('chat.modes.fullAccess'), icon: ShieldExclamationIcon, sub: t('chat.modes.fullAccessSub'), risk: 'danger' as const },
-])
-
-const filteredSlashCommands = computed(() => {
-  const filter = slashFilter.value.toLowerCase()
-  return slashCommands.value.filter(
-    (s) => s.slash.toLowerCase().startsWith('/' + filter),
-  )
-})
-
-const filteredProviders = computed(() => {
-  const filter = modelFilter.value.toLowerCase()
-  if (!filter) return store.providers
-
-  return store.providers
-    .map(p => ({
-      ...p,
-      models: p.models.filter(m =>
-        (m.name || m.id).toLowerCase().includes(filter) ||
-        p.name.toLowerCase().includes(filter)
-      )
-    }))
-    .filter(p => p.models.length > 0)
-})
-
-// The picker lists only models the user has enabled ("opened"). Disabled models
-// stay hidden here but remain visible in the Manage dialog (which uses
-// filteredProviders directly) so they can be re-enabled.
-const pickerProviders = computed(() =>
-  filteredProviders.value
-    .map(p => ({ ...p, models: p.models.filter(m => m.enabled !== false) }))
-    .filter(p => p.models.length > 0),
-)
-
-// Get full display name for a model (e.g., "DeepSeek V4 Pro")
-function getModelDisplayName(providerId: string, modelId: string): string {
-  for (const p of store.providers) {
-    if (p.id === providerId) {
-      const m = p.models.find(model => model.id === modelId)
-      return m?.name || modelId
-    }
-  }
-  return modelId
-}
-
-// Compact context-limit label for the subline: 200000 → "200K", 1000000 → "1M".
-function formatContext(limit?: number): string | null {
-  if (!limit || limit <= 0) return null
-  if (limit >= 1_000_000) {
-    const m = limit / 1_000_000
-    return (Number.isInteger(m) ? m : m.toFixed(1)) + 'M'
-  }
-  if (limit >= 1000) return Math.round(limit / 1000) + 'K'
-  return String(limit)
-}
-
-// Subline under a model row: "claude-sonnet-4-5 · 200K".
-function modelSubline(providerId: string, m: { id: string; context_limit?: number } | undefined): string {
-  if (!m) return ''
-  const parts = [m.id]
-  const ctx = formatContext(m.context_limit)
-  if (ctx) parts.push(ctx)
-  return parts.join(' · ')
-}
-
-// Look up the ModelInfo for a provider+model pair (used by recent/favorite refs
-// which only carry ids).
-function modelInfoFor(provider: string, model: string) {
-  const p = store.providers.find((x) => x.id === provider)
-  return p?.models.find((m) => m.id === model)
-}
-
-// Custom (OpenAI-compatible) provider ids, so their icon falls back to the
-// OpenAI mark instead of a monogram.
-const customProviderIds = computed(() => new Set(store.providers.filter((p) => p.custom).map((p) => p.id)))
-function isCustomProvider(id: string) {
-  return customProviderIds.value.has(id)
-}
-
-// The ModelInfo for the currently-active model — drives the pinned row subline
-// + capability dots.
-const currentModelInfo = computed(() => modelInfoFor(store.providerName, store.modelName))
-
-// The reasoning-effort levels the current model accepts, taken from its
-// models.dev reasoning_options (type === 'effort'). Empty when the model has
-// no effort control — in which case the effort control is hidden entirely.
-const currentEffortOptions = computed<string[]>(() => {
-  const info = currentModelInfo.value
-  if (!info?.reasoning_options) return []
-  for (const o of info.reasoning_options) {
-    if (o.type === 'effort' && o.values?.length) return o.values
-  }
-  return []
-})
-
-// Whether to show the per-model effort control: only when the active model
-// advertises effort levels. A "" (off) option is always prepended so the user
-// can clear the override.
-const showEffortControl = computed(() => currentEffortOptions.value.length > 0)
-
-// The user's saved effort choice for the current model ('' = unset/default).
-const currentEffort = computed(() => store.getEffortOverride(store.providerName, store.modelName))
-
-async function pickEffort(effort: string) {
-  // Empty means "clear override" → send '' so the provider default is restored.
-  await store.setModelEffort(store.providerName, store.modelName, effort)
-}
-
-// Favorite recent models (recent keeps the recency order), filtered by the
-// search box and excluding the current model (it's pinned above).
-const favoriteModelRefs = computed(() => {
-  const q = modelFilter.value.trim().toLowerCase()
-  return store.recentModels.filter((r) => {
-    if (!store.favoriteModels.has(`${r.provider}/${r.model}`)) return false
-    if (store.providerName === r.provider && store.modelName === r.model) return false
-    if (!q) return true
-    const name = getModelDisplayName(r.provider, r.model).toLowerCase()
-    return name.includes(q) || r.provider.toLowerCase().includes(q)
-  })
-})
-
-// Enter in the filter selects the first visible model.
-function selectFirstFiltered() {
-  const p = pickerProviders.value[0]
-  const m = p?.models[0]
-  if (p && m) selectModel(p.id, m.id)
-}
-
-// Counts for the Manage dialog footer: visible (after filter) vs total models.
-const manageVisibleCount = computed(() =>
-  filteredProviders.value.reduce((n, p) => n + p.models.length, 0),
-)
-const manageTotalCount = computed(() =>
-  store.providers.reduce((n, p) => n + p.models.length, 0),
-)
-
-function autoResize() {
-  const el = textarea.value
-  if (!el) return
-  el.style.height = 'auto'
-  el.style.height = Math.min(el.scrollHeight, 160) + 'px'
-}
-
-function handleKeyDown(e: KeyboardEvent) {
-  // While an IME composition is active (e.g. confirming a CJK candidate), let
-  // the IME own every key — pressing Enter to commit a character must not send
-  // the message or trigger menu shortcuts.
-  if (e.isComposing || e.keyCode === 229) return
-
-  // Handle ESC key for dialogs
-  if (e.key === 'Escape') {
-    if (showManageModels.value) {
-      e.preventDefault()
-      showManageModels.value = false
-      modelFilter.value = ''
-      return
-    }
-    if (showModelPicker.value) {
-      e.preventDefault()
-      showModelPicker.value = false
-      return
-    }
-    if (showSlashMenu.value) {
-      e.preventDefault()
-      showSlashMenu.value = false
-      return
-    }
-  }
-
-  if (showSlashMenu.value) {
-    if (e.key === 'ArrowDown') {
-      e.preventDefault()
-      selectedSlashIdx.value = Math.min(selectedSlashIdx.value + 1, filteredSlashCommands.value.length - 1)
-      return
-    }
-    if (e.key === 'ArrowUp') {
-      e.preventDefault()
-      selectedSlashIdx.value = Math.max(selectedSlashIdx.value - 1, 0)
-      return
-    }
-    if (e.key === 'Enter' || e.key === 'Tab') {
-      const cmd = filteredSlashCommands.value[selectedSlashIdx.value]
-      if (cmd) {
-        e.preventDefault()
-        applySlashCommand(cmd)
-        return
-      }
-    }
-    if (e.key === 'Escape') {
-      e.preventDefault()
-      showSlashMenu.value = false
-      return
-    }
-  }
-
-  if (e.key === 'Enter' && !e.shiftKey) {
-    e.preventDefault()
-    send()
-  }
-}
-
-function handlePaste(e: ClipboardEvent) {
-  if (!store.imageSupport) return
-  const items = e.clipboardData?.items
-  if (!items) return
-  for (const item of Array.from(items)) {
-    if (!item.type.startsWith('image/')) continue
-    e.preventDefault()
-    const file = item.getAsFile()
-    if (!file) continue
-    const reader = new FileReader()
-    reader.onload = () => {
-      const result = reader.result as string
-      const commaIdx = result.indexOf(',')
-      if (commaIdx < 0) return
-      const base64Data = result.substring(commaIdx + 1)
-      pendingImages.value.push({ data: base64Data, media_type: file.type })
-      pendingImagePreviews.value.push(result)
-    }
-    reader.readAsDataURL(file)
-  }
-}
-
-function handleInput() {
-  autoResize()
-  const text = input.value
-  if (text.startsWith('/')) {
-    slashFilter.value = text.slice(1)
-    showSlashMenu.value = true
-    selectedSlashIdx.value = 0
-  } else {
-    showSlashMenu.value = false
-  }
-}
-
-function applySlashCommand(cmd: SlashCommandInfo) {
-  input.value = cmd.slash + ' '
-  showSlashMenu.value = false
-  nextTick(() => textarea.value?.focus())
-}
-
-async function send() {
-  const text = input.value.trim()
-  if (!text && pendingImages.value.length === 0) return
-  const images = pendingImages.value.length > 0 ? [...pendingImages.value] : undefined
-  // Capture the running state before clearing the box: while a turn is in
-  // flight we queue the message (terminal-style type-ahead) instead of sending
-  // it now; it goes out automatically when the current turn completes.
-  const queue = store.isRunning
-  input.value = ''
-  pendingImages.value = []
-  pendingImagePreviews.value = []
-  showSlashMenu.value = false
-  await nextTick()
-  autoResize()
-  if (queue) {
-    store.enqueueMessage(text || '(see attached images)', images)
-  } else {
-    store.sendMessage(text || '(see attached images)', images)
-  }
-  emit('sent')
-}
-
-function selectModel(provider: string, model: string) {
-  showModelPicker.value = false
-  showEffortPicker.value = false
-  store.switchModel(provider, model)
-}
-
-function triggerImageUpload() {
-  fileInput.value?.click()
-}
-
-// Insert a trigger character at the cursor from the "+" menu. For "/" at the
-// start of an empty box this also opens the slash-command menu via handleInput.
-function insertToken(char: string) {
-  showAddMenu.value = false
-  const el = textarea.value
-  const start = el ? el.selectionStart : input.value.length
-  const end = el ? el.selectionEnd : input.value.length
-  input.value = input.value.slice(0, start) + char + input.value.slice(end)
-  nextTick(() => {
-    el?.focus()
-    const pos = start + char.length
-    el?.setSelectionRange(pos, pos)
-    handleInput()
-  })
-}
-
-function handleImageSelect(e: Event) {
-  const target = e.target as HTMLInputElement
-  const files = target.files
-  if (!files) return
-  for (const file of Array.from(files)) {
-    if (!file.type.startsWith('image/')) continue
-    if (file.size > 10 * 1024 * 1024) continue // 10MB limit
-    const reader = new FileReader()
-    reader.onload = () => {
-      const result = reader.result as string
-      // result is "data:<media_type>;base64,<data>"
-      const commaIdx = result.indexOf(',')
-      if (commaIdx < 0) return
-      const base64Data = result.substring(commaIdx + 1)
-      pendingImages.value.push({ data: base64Data, media_type: file.type })
-      pendingImagePreviews.value.push(result)
-    }
-    reader.readAsDataURL(file)
-  }
-  // Reset input so the same file can be re-selected
-  target.value = ''
-}
-
-function removeImage(index: number) {
-  pendingImages.value.splice(index, 1)
-  pendingImagePreviews.value.splice(index, 1)
-}
-
-function selectMode(mode: 'approval' | 'plan' | 'full_access') {
-  showModePicker.value = false
-  store.switchMode(mode)
-}
-
-function modeLabel(m: string): string {
-  return m === 'plan' ? t('chat.modes.plan') : m === 'full_access' ? t('chat.modes.fullAccess') : t('chat.modes.approval')
-}
-
-// The icon shown on the mode trigger reflects the active mode.
-const currentModeIcon = computed(() => modes.value.find((m) => m.value === store.mode)?.icon ?? HandRaisedIcon)
-
-function handleClickOutside(e: MouseEvent) {
-  if (containerRef.value && !containerRef.value.contains(e.target as Node)) {
-    showModelPicker.value = false
-    showModePicker.value = false
-    showAddMenu.value = false
-    showSlashMenu.value = false
-    showContextPopup.value = false
-    showEffortPicker.value = false
-    if (showManageModels.value) {
-      showManageModels.value = false
-      modelFilter.value = ''
-    }
-  }
-}
-
-function handleGlobalKey(e: KeyboardEvent) {
-  if ((e.ctrlKey || e.metaKey) && e.key === 'l') {
-    e.preventDefault()
-    textarea.value?.focus()
-  }
-  // Global ESC handler for dialogs
-  if (e.key === 'Escape') {
-    if (showManageModels.value) {
-      e.preventDefault()
-      showManageModels.value = false
-      modelFilter.value = ''
-      return
-    }
-    if (showModelPicker.value) {
-      e.preventDefault()
-      showModelPicker.value = false
-      return
-    }
-    if (showContextPopup.value) {
-      e.preventDefault()
-      showContextPopup.value = false
-      return
-    }
-  }
-}
-
-onMounted(async () => {
-  document.addEventListener('click', handleClickOutside)
-  document.addEventListener('keydown', handleGlobalKey)
-  try {
-    slashCommands.value = await api.slashCommands()
-  } catch { /* ignore */ }
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-  document.removeEventListener('keydown', handleGlobalKey)
-})
-
-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
-  showContextPopup.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>
-  <div ref="containerRef" class="chat-input-wrapper">
-    <!-- Type-ahead queue: messages composed while the agent is working. They are
-         sent one at a time as each turn completes; the × removes one early. -->
-    <div v-if="store.queuedMessages.length > 0" class="queued-list">
-      <div v-for="(q, i) in store.queuedMessages" :key="q.id" class="queued-item">
-        <span class="queued-index">{{ i + 1 }}</span>
-        <span class="queued-text">{{ q.text }}</span>
-        <span v-if="q.images && q.images.length > 0" class="queued-imgs">
-          <PaperClipIcon class="w-3 h-3" />{{ q.images.length }}
-        </span>
-        <button
-          class="queued-remove"
-          :title="t('chat.removeQueued')"
-          :aria-label="t('chat.removeQueued')"
-          @click="store.removeQueuedMessage(q.id)"
-        >
-          <XMarkIcon class="w-3 h-3" />
-        </button>
-      </div>
-    </div>
-    <div class="chat-input-card" :class="{ 'composer-elevated': !store.hasMessages }">
-      <!-- Slash command menu -->
-      <div
-        v-if="showSlashMenu && filteredSlashCommands.length > 0"
-        class="slash-menu"
-      >
-          <button
-            v-for="(cmd, i) in filteredSlashCommands"
-            :key="cmd.slash"
-            class="slash-item"
-            :class="{ active: i === selectedSlashIdx }"
-            @click="applySlashCommand(cmd)"
-            @mouseenter="selectedSlashIdx = i"
-          >
-            <span class="slash-cmd">{{ cmd.slash }}</span>
-            <span v-if="cmd.type === 'flow'" class="slash-badge slash-badge-flow">workflow</span>
-            <span class="slash-desc">{{ cmd.description }}</span>
-          </button>
-        </div>
-
-        <!-- Workspace and branch are selected before a task starts. Once the
-             conversation begins, hide the entire row so its context stays fixed. -->
-        <div v-if="!store.hasMessages" class="composer-top">
-          <WorkspacePicker :placement="pickerPlacement" />
-          <BranchPicker :placement="pickerPlacement" />
-        </div>
-
-        <div class="chat-input-inner">
-        <!-- Textarea area -->
-        <div class="textarea-area">
-          <textarea
-            ref="textarea"
-            v-model="input"
-            :placeholder="store.isRunning ? t('chat.queuePlaceholder') : store.goalArmed ? t('chat.goalPlaceholder') : t('chat.placeholder')"
-            rows="1"
-            @keydown="handleKeyDown"
-            @input="handleInput"
-            @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"
-            type="file"
-            accept="image/*"
-            multiple
-            class="hidden"
-            @change="handleImageSelect"
-          />
-      </div>
-
-      <!-- Toolbar -->
-      <div class="toolbar">
-          <div class="toolbar-left">
-            <!-- "+" menu: attach files, slash command, and Goal (only the items
-                 that have real functionality). -->
-            <div class="relative">
-              <button
-                class="add-btn"
-                :class="{ open: showAddMenu }"
-                :title="t('chat.add')"
-                @click.stop="showAddMenu = !showAddMenu; showModelPicker = false; showModePicker = false"
-              >
-                <PlusIcon class="w-4 h-4" />
-              </button>
-              <div v-if="showAddMenu" class="dropdown-menu add-menu">
-                <button
-                  class="dropdown-item"
-                  :class="{ disabled: !store.imageSupport }"
-                  :disabled="!store.imageSupport"
-                  :title="!store.imageSupport ? t('chat.model.noImages') : ''"
-                  @click="triggerImageUpload(); showAddMenu = false"
-                >
-                  <PaperClipIcon class="w-3.5 h-3.5 dmi-icon" /> <span>{{ t('chat.attachFiles') }}</span>
-                  <span v-if="pendingImages.length > 0" class="dmi-badge">{{ pendingImages.length }}</span>
-                </button>
-                <button class="dropdown-item" @click="insertToken('/')">
-                  <span class="dmi-icon dmi-slash">/</span> <span>{{ t('chat.command') }}</span>
-                </button>
-                <button
-                  class="dropdown-item"
-                  :class="{ active: store.goalArmed }"
-                  :title="store.goal ? t('chat.goalHint.replace') : t('chat.goalHint.next')"
-                  @click="store.goalArmed = !store.goalArmed; showAddMenu = false"
-                >
-                  <BoltIcon class="w-3.5 h-3.5 dmi-icon" /> <span>{{ t('chat.goal') }}</span>
-                </button>
-              </div>
-            </div>
-
-            <!-- Mode selector (Ask for approval/Plan/Full access) — stays visible on the toolbar.
-                 Full access is the one destructive mode; its trigger + row tint red so the
-                 "agent can act without you" state is visible without opening the menu. -->
-            <div class="relative">
-              <button
-                class="mo-trigger"
-                :data-risk="store.mode === 'full_access' ? 'danger' : store.mode === 'plan' ? 'plan' : 'neutral'"
-                :aria-expanded="showModePicker"
-                @click.stop="showModePicker = !showModePicker; showModelPicker = false; showAddMenu = false"
-              >
-                <span class="mo-trigger-ic">
-                  <component :is="currentModeIcon" class="w-3.5 h-3.5" />
-                </span>
-                <span :class="{ 'mo-trigger-danger': store.mode === 'full_access', 'mo-trigger-plan': store.mode === 'plan' }">{{ modeLabel(store.mode) }}</span>
-                <ChevronDownIcon class="mo-trigger-chev" />
-              </button>
-              <div v-if="showModePicker" class="mo-panel">
-                <button
-                  v-for="m in modes"
-                  :key="m.value"
-                  class="mo-row"
-                  :class="{ active: store.mode === m.value }"
-                  @click="selectMode(m.value)"
-                >
-                  <span class="mo-ic" :class="{ danger: m.risk === 'danger', plan: m.risk === 'plan' }">
-                    <component :is="m.icon" class="w-4 h-4" />
-                  </span>
-                  <span class="mo-body">
-                    <span class="mo-title" :class="{ 'mo-title-danger': m.risk === 'danger', 'mo-title-plan': m.risk === 'plan' }">{{ m.label }}</span>
-                    <span class="mo-sub">{{ m.sub }}</span>
-                  </span>
-                  <CheckIcon v-if="store.mode === m.value" class="w-3.5 h-3.5 mo-check" />
-                </button>
-              </div>
-            </div>
-
-            <!-- Goal chip — appears once Goal is armed (from the + menu); its ×
-                 disarms it. Mirrors the Codex "目标" pill. -->
-            <template v-if="store.goalArmed">
-              <span class="tb-divider" aria-hidden="true" />
-              <div class="goal-chip" :title="store.goal ? t('chat.goalHint.nextReplaces') : t('chat.goalHint.next')">
-                <button class="goal-chip-x" :title="t('chat.goalHint.remove')" @click="store.goalArmed = false">
-                  <XMarkIcon class="w-2.5 h-2.5" />
-                </button>
-                <BoltIcon class="w-3 h-3" />
-                <span>Goal</span>
-              </div>
-            </template>
-          </div>
-
-          <div class="toolbar-right">
-            <div v-if="store.tokenInfo && store.tokenInfo.total_tokens > 0 && store.hasMessages" class="relative">
-              <button
-                type="button"
-                class="token-count token-count-btn ctx-trigger"
-                :title="t('contextCapacity.title')"
-                @click.stop="showContextPopup = !showContextPopup; showModelPicker = false; showModePicker = false; showAddMenu = false"
-              >
-                <svg class="ctx-ring" width="17" height="17" viewBox="0 0 16 16" aria-hidden="true">
-                  <circle cx="8" cy="8" r="6.4" fill="none" stroke="color-mix(in srgb, var(--color-foreground) 20%, transparent)" stroke-width="2.2" />
-                  <circle
-                    cx="8" cy="8" r="6.4" fill="none"
-                    :stroke="ctxRingColor" stroke-width="2.2" stroke-linecap="round"
-                    :stroke-dasharray="ctxRingCirc" :stroke-dashoffset="ctxRingOffset"
-                    transform="rotate(-90 8 8)"
-                  />
-                </svg>
-                <span class="tabular-nums">{{ store.tokenPercentage }}%</span>
-              </button>
-              <ContextCapacityPopup v-if="showContextPopup" class="absolute bottom-full right-0 mb-2 z-50" />
-            </div>
-
-            <!-- Model selector (moved to the right, near Send). The trigger shows
-                 the active provider's identity tile so the brand is readable at rest. -->
-            <div class="relative flex items-center gap-1">
-              <button
-                class="mm-trigger"
-                :aria-expanded="showModelPicker"
-                @click.stop="showModelPicker = !showModelPicker; showModePicker = false; showAddMenu = false; showEffortPicker = false"
-              >
-                <ProviderIcon
-                  v-if="store.providerName"
-                  :provider="store.providerName"
-                  :custom="isCustomProvider(store.providerName)"
-                  :size="16"
-                />
-                {{ store.modelName ? getModelDisplayName(store.providerName, store.modelName) : 'model' }}
-                <ChevronDownIcon class="mm-trigger-chev" />
-              </button>
-
-              <!-- Per-model reasoning-effort control. Only shown when the active
-                   model advertises effort levels (reasoning_options type=effort). -->
-              <button
-                v-if="showEffortControl"
-                class="effort-trigger"
-                :class="{ on: currentEffort }"
-                :aria-expanded="showEffortPicker"
-                :title="t('chat.model.effortTitle')"
-                @click.stop="showEffortPicker = !showEffortPicker; showModelPicker = false; showModePicker = false; showAddMenu = false"
-              >
-                <SparklesIcon class="w-3 h-3" />
-                <span v-if="currentEffort">{{ currentEffort }}</span>
-                <span v-else>{{ t('chat.model.effort') }}</span>
-                <ChevronDownIcon class="w-3 h-3 effort-chev" />
-              </button>
-              <div v-if="showEffortControl && showEffortPicker" class="effort-panel">
-                <button
-                  class="effort-row"
-                  :class="{ active: !currentEffort }"
-                  @click.stop="pickEffort(''); showEffortPicker = false"
-                >
-                  <span>{{ t('chat.model.effortDefault') }}</span>
-                  <CheckIcon v-if="!currentEffort" class="w-3.5 h-3.5" />
-                </button>
-                <button
-                  v-for="opt in currentEffortOptions"
-                  :key="opt"
-                  class="effort-row"
-                  :class="{ active: currentEffort === opt }"
-                  @click.stop="pickEffort(opt); showEffortPicker = false"
-                >
-                  <span class="font-mono">{{ opt }}</span>
-                  <CheckIcon v-if="currentEffort === opt" class="w-3.5 h-3.5" />
-                </button>
-              </div>
-
-              <div
-                v-if="showModelPicker"
-                class="mm-panel align-right"
-              >
-                <!-- Search — first-class, filters both the list and favorites. -->
-                <div class="mm-search">
-                  <MagnifyingGlassIcon class="w-3.5 h-3.5" />
-                  <input
-                    v-model="modelFilter"
-                    type="text"
-                    :placeholder="t('chat.model.filter')"
-                    @keydown.enter.prevent="selectFirstFiltered"
-                  />
-                  <kbd class="mm-search-kbd">/</kbd>
-                </div>
-
-                <!-- Pinned current row — never scrolls out of view. -->
-                <div v-if="store.providerName && store.modelName" class="mm-pinned">
-                  <CheckCircleIcon class="mm-pinned-pin" :title="t('chat.model.current')" />
-                  <ProviderIcon :provider="store.providerName" :custom="isCustomProvider(store.providerName)" :size="22" />
-                  <span class="mm-pinned-body">
-                    <span class="mm-name">{{ getModelDisplayName(store.providerName, store.modelName) }}</span>
-                    <span class="mm-id">{{ modelSubline(store.providerName, currentModelInfo) }}</span>
-                  </span>
-                  <span class="mm-caps">
-                    <SparklesIcon v-if="currentModelInfo?.reasoning" class="w-3 h-3" :title="t('chat.model.reasoning')" />
-                    <WrenchScrewdriverIcon v-if="currentModelInfo?.tool_call" class="w-3 h-3" :title="t('chat.model.tools')" />
-                    <PhotoIcon v-if="currentModelInfo?.image_support" class="w-3 h-3" :title="t('chat.model.images')" />
-                  </span>
-                </div>
-
-                <div class="mm-list">
-                  <!-- Favorites (filtered by the same search) -->
-                  <template v-if="favoriteModelRefs.length > 0">
-                    <div class="mm-group">{{ t('chat.model.favorites') }} <span class="mm-group-count">{{ favoriteModelRefs.length }}</span></div>
-                    <button
-                      v-for="r in favoriteModelRefs"
-                      :key="'fav-'+r.provider+'-'+r.model"
-                      class="mm-row"
-                      @click="selectModel(r.provider, r.model)"
-                    >
-                      <ProviderIcon :provider="r.provider" :custom="isCustomProvider(r.provider)" :size="22" />
-                      <span class="mm-body">
-                        <span class="mm-name">{{ getModelDisplayName(r.provider, r.model) }}</span>
-                        <span class="mm-id">{{ modelSubline(r.provider, modelInfoFor(r.provider, r.model)) }}</span>
-                      </span>
-                      <span class="mm-caps">
-                        <SparklesIcon v-if="modelInfoFor(r.provider, r.model)?.reasoning" class="w-3 h-3" :title="t('chat.model.reasoning')" />
-                        <WrenchScrewdriverIcon v-if="modelInfoFor(r.provider, r.model)?.tool_call" class="w-3 h-3" :title="t('chat.model.tools')" />
-                        <PhotoIcon v-if="modelInfoFor(r.provider, r.model)?.image_support" class="w-3 h-3" :title="t('chat.model.images')" />
-                      </span>
-                      <StarIconSolid class="w-3.5 h-3.5 mm-fav on" @click.stop="store.toggleFavorite(r.provider, r.model)" />
-                    </button>
-                  </template>
-
-                  <!-- All providers (enabled models only), filtered by search. -->
-                  <template v-for="p in pickerProviders" :key="p.id">
-                    <div class="mm-group">{{ p.name }}</div>
-                    <div
-                      v-for="m in p.models"
-                      :key="m.id"
-                      class="mm-row"
-                      :class="{ active: store.providerName === p.id && store.modelName === m.id }"
-                      role="button"
-                      tabindex="0"
-                      @click="selectModel(p.id, m.id)"
-                      @keydown.enter.prevent="selectModel(p.id, m.id)"
-                      @keydown.space.prevent="selectModel(p.id, m.id)"
-                    >
-                      <ProviderIcon :provider="p.id" :custom="p.custom" :size="22" />
-                      <span class="mm-body">
-                        <span class="mm-name">{{ m.name || m.id }}</span>
-                        <span class="mm-id">{{ modelSubline(p.id, m) }}</span>
-                      </span>
-                      <span v-if="m.recommended" class="mm-recommend">{{ t('common.recommended') }}</span>
-                      <span class="mm-caps">
-                        <SparklesIcon v-if="m.reasoning" class="w-3 h-3" :title="t('chat.model.reasoning')" />
-                        <WrenchScrewdriverIcon v-if="m.tool_call" class="w-3 h-3" :title="t('chat.model.tools')" />
-                        <PhotoIcon v-if="m.image_support" class="w-3 h-3" :title="t('chat.model.images')" />
-                        <PhotoIcon v-else-if="m.image_support === false" class="w-3 h-3 mm-cap-warn" :title="t('chat.model.noImages')" />
-                      </span>
-                      <CheckIcon v-if="store.providerName === p.id && store.modelName === m.id" class="w-3.5 h-3.5 mm-check" />
-                      <StarIcon
-                        class="w-3.5 h-3.5 mm-fav"
-                        :class="{ on: store.isFavorite(p.id, m.id) }"
-                        @click.stop="store.toggleFavorite(p.id, m.id)"
-                      />
-                    </div>
-                  </template>
-                  <div v-if="pickerProviders.length === 0" class="mm-empty">
-                    {{ modelFilter ? t('chat.model.noMatch') : t('chat.model.none') }}
-                  </div>
-                </div>
-
-                <!-- Manage models link -->
-                <div class="mm-foot">
-                  <button @click.stop="showModelPicker = false; showManageModels = true">
-                    <SquaresPlusIcon class="w-3.5 h-3.5" />
-                    {{ t('chat.model.manage') }}
-                  </button>
-                </div>
-              </div>
-            </div>
-
-            <!-- Stop button — halts the current turn. With a non-empty queue it
-                 then sends the next queued message ("skip & continue"). -->
-            <button
-              v-if="store.isRunning"
-              class="stop-btn"
-              :title="store.queuedMessages.length > 0 ? t('chat.stopAndNext') : t('chat.stopAgent')"
-              @click="store.stopAgent()"
-            >
-              <StopIcon class="w-3.5 h-3.5" />
-              {{ t('chat.stop') }}
-            </button>
-            <!-- Send button. While a turn is running it stays available (only when
-                 there is content) and queues the message instead of sending now. -->
-            <button
-              v-if="!store.isRunning || input.trim() || pendingImages.length > 0"
-              class="send-btn"
-              :disabled="!input.trim() && pendingImages.length === 0"
-              :aria-label="store.isRunning ? t('chat.queue') : t('chat.send')"
-              @click="send"
-            >
-              <PaperAirplaneIcon class="w-3.5 h-3.5" />
-              {{ store.isRunning ? t('chat.queue') : t('chat.send') }}
-            </button>
-          </div>
-        </div>
-        </div><!-- /chat-input-inner -->
-      </div>
-
-    <!-- Manage Models Dialog — same anatomy as SettingsDialog: scrim + header
-         with an icon tile + subtitle, a filter row, and a footer with a count
-         summary + actions. Rows reuse the selector's identity tile + subline. -->
-    <Teleport to="body">
-      <div
-        v-if="showManageModels"
-        class="manage-scrim"
-        @click="showManageModels = false; modelFilter = ''; store.fetchModels()"
-      >
-        <div class="manage-dlg" role="dialog" aria-modal="true" :aria-label="t('chat.model.manageTitle')" @click.stop>
-          <div class="manage-head">
-            <div class="manage-head-icon"><SquaresPlusIcon class="w-4 h-4" /></div>
-            <div class="manage-head-text">
-              <h3 class="manage-title">{{ t('chat.model.manageTitle') }}</h3>
-              <p class="manage-sub">{{ t('chat.model.toggleVisibility') }}</p>
-            </div>
-            <button
-              class="manage-close"
-              :aria-label="t('common.close')"
-              @click="showManageModels = false; modelFilter = ''; store.fetchModels()"
-            ><XMarkIcon class="w-4 h-4" /></button>
-          </div>
-
-          <div class="manage-filter">
-            <div class="manage-filter-wrap">
-              <MagnifyingGlassIcon class="w-3.5 h-3.5" />
-              <input
-                v-model="modelFilter"
-                type="text"
-                :placeholder="t('chat.model.filter')"
-              />
-            </div>
-            <span class="manage-filter-count">{{ manageVisibleCount }} / {{ manageTotalCount }}</span>
-          </div>
-
-          <div class="manage-body">
-            <template v-for="p in filteredProviders" :key="'mgr-'+p.id">
-              <div class="manage-prov">
-                <ProviderIcon :provider="p.id" :size="18" />
-                <span class="manage-prov-name">{{ p.name }}</span>
-                <span class="manage-prov-id">{{ p.id }}</span>
-                <span class="manage-prov-count">{{ p.models.length }}</span>
-              </div>
-              <div
-                v-for="m in p.models"
-                :key="'mgr-'+p.id+'-'+m.id"
-                class="manage-row"
-                :data-off="m.enabled === false ? 'true' : 'false'"
-              >
-                <ProviderIcon :provider="p.id" :size="18" />
-                <span class="manage-row-text">
-                  <span class="manage-row-name">{{ m.name || m.id }}</span>
-                  <span class="manage-row-id">{{ modelSubline(p.id, m) }}</span>
-                </span>
-                <span v-if="m.recommended" class="mm-recommend">{{ t('common.recommended') }}</span>
-                <button
-                  class="manage-switch"
-                  role="switch"
-                  :aria-checked="m.enabled !== false ? 'true' : 'false'"
-                  :aria-label="m.enabled !== false ? t('common.disable') : t('common.enable')"
-                  @click="store.toggleModelEnabled(p.id, m.id, m.enabled === false)"
-                />
-              </div>
-            </template>
-            <div v-if="filteredProviders.length === 0" class="manage-empty">
-              {{ modelFilter ? t('chat.model.noMatch') : t('chat.model.none') }}
-            </div>
-          </div>
-
-          <div class="manage-foot">
-            <span class="manage-foot-hint">{{ t('chat.model.visibleCount', { visible: manageVisibleCount, total: manageTotalCount }) }}</span>
-            <div class="manage-foot-actions">
-              <button class="manage-btn" @click="showManageModels = false; modelFilter = ''; store.fetchModels()">{{ t('common.done') }}</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Teleport>
-
-
-  </div>
-</template>
-
-<style scoped>
-.chat-input-wrapper {
-  /* 20px horizontal matches the messages column's px-5 so the input box
-     sits flush with the conversation content. */
-  padding: 8px 20px 14px;
-  /* Sits inside the surface chat panel — transparent so it blends with it. */
-  background: transparent;
-  position: relative;
-}
-
-.chat-input-card {
-  margin: 0 auto;
-  border-radius: var(--radius-xl);
-  padding: 4px 6px 10px;
-  background: transparent;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Type-ahead queue — pending messages stacked just above the composer, mirroring
-   a terminal's queued input. Each row is removable via its × button. */
-.queued-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 0 8px 6px;
-  margin: 0 auto;
-}
-
-.queued-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 8px 6px 10px;
-  border-radius: var(--radius-lg);
-  background: var(--color-muted);
-  border: 1px solid var(--color-border);
-  font-size: 12px;
-  color: var(--color-foreground);
-}
-
-.queued-index {
-  display: grid;
-  place-items: center;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  border-radius: var(--radius-pill);
-  background: var(--neutral-wash);
-  color: var(--color-accent-neutral);
-  font-size: 10px;
-  font-weight: 600;
-  font-family: var(--font-mono);
-}
-
-.queued-text {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.queued-imgs {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  flex-shrink: 0;
-  color: var(--color-muted-foreground);
-  font-size: 11px;
-  font-family: var(--font-mono);
-}
-
-.queued-remove {
-  display: grid;
-  place-items: center;
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s;
-}
-
-.queued-remove:hover {
-  background: var(--color-secondary);
-  color: var(--color-foreground);
-}
-
-.composer-top {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0 2px 5px;
-  min-width: 0;
-}
-
-/* On the new-task screen the composer is the centerpiece: lift the whole thing
-   (workspace pills + input + toolbar) into one cohesive elevated card with a
-   soft, background-tinted shadow. The docked conversation composer keeps the
-   recessed, frameless look. */
-.composer-elevated {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-2xl);
-  /* Tighter at the top (workspace row), a touch more white below the toolbar. */
-  padding: 6px 12px 12px;
-  box-shadow: var(--shadow-xl);
-}
-.composer-elevated .composer-top {
-  padding: 2px 4px 9px;
-}
-.composer-elevated .chat-input-inner {
-  border-radius: var(--radius-xl);
-}
-
-.chat-input-inner {
-  /* Recessed: always one step darker than the surface panel, derived from it so
-     the depth cue holds on every theme (some light themes have a background
-     token that is lighter than surface, which would otherwise invert it). */
-  background: color-mix(in srgb, var(--color-surface) 90%, #000);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 14px 16px 0;
-  transition: border-color 0.2s;
-}
-
-.chat-input-inner:focus-within {
-  border-color: color-mix(in srgb, var(--color-foreground) 30%, transparent);
-}
-
-.textarea-area {
-  padding: 0 0 8px;
-}
-
-.textarea-area textarea {
-  width: 100%;
-  background: transparent;
-  border: none;
-  outline: none;
-  resize: none;
-  font-size: 14px;
-  line-height: 1.6;
-  color: var(--color-foreground);
-  min-height: 28px;
-  max-height: 200px;
-  font-family: var(--font-sans);
-}
-
-.textarea-area textarea::placeholder {
-  color: var(--color-muted-foreground);
-}
-
-.textarea-area textarea:disabled {
-  opacity: 0.5;
-}
-
-.image-previews {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 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 {
-  position: relative;
-}
-
-.image-preview-item img {
-  width: 56px;
-  height: 56px;
-  object-fit: cover;
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-border);
-}
-
-.image-preview-item .image-remove {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: var(--color-destructive);
-  color: var(--color-on-destructive);
-  font-size: 9px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
-
-.image-preview-item:hover .image-remove {
-  opacity: 1;
-}
-
-/* Toolbar */
-.toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 0 12px;
-  gap: 8px;
-  /* Softened red for the "Full access" mode — the stock error red read as
-     "太红"; lightened toward the surface so it warns without shouting. Inherits
-     down to the mode trigger and its dropdown panel. */
-  --color-danger-soft: color-mix(in srgb, var(--color-error-fg) 72%, var(--color-background));
-}
-
-.toolbar-left {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.tool-btn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  font-size: 12px;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s;
-  white-space: nowrap;
-}
-
-.tool-btn:hover {
-  background: var(--color-muted);
-  color: var(--color-foreground);
-}
-
-.tool-btn.highlighted {
-  background: var(--neutral-wash);
-  color: var(--color-accent-neutral);
-}
-
-.attach-btn {
-  padding: 4px 6px;
-  position: relative;
-}
-
-.attach-btn.disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.attach-btn.has-images {
-  color: var(--color-accent-neutral);
-}
-
-.attach-badge {
-  position: absolute;
-  top: -2px;
-  right: -2px;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--color-accent-neutral);
-  color: var(--color-surface);
-  font-size: 9px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-}
-
-/* Dropdown menus */
-.dropdown-menu {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  margin-bottom: 4px;
-  z-index: 20;
-  min-width: 140px;
-  padding: 4px 0;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-md);
-}
-
-.dropdown-menu.model-menu {
-  min-width: 220px;
-  max-height: 280px;
-  overflow-y: auto;
-}
-
-.dropdown-item {
-  width: 100%;
-  padding: 6px 12px;
-  font-size: 12px;
-  text-align: left;
-  border: none;
-  background: transparent;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  transition: background 0.1s;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.dropdown-item:hover {
-  background: var(--color-muted);
-}
-
-.dropdown-item.active {
-  color: var(--color-accent-neutral);
-  background: var(--neutral-wash);
-}
-
-.dropdown-item.disabled {
-  cursor: default;
-  opacity: 0.5;
-}
-
-.dropdown-section-title {
-  padding: 4px 12px;
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-muted-foreground);
-  border-top: 1px solid var(--color-border);
-  margin-top: 2px;
-}
-
-.dropdown-section-title:first-child {
-  border-top: none;
-  margin-top: 0;
-}
-
-/* "+" add menu button + items */
-.add-btn {
-  display: grid;
-  place-items: center;
-  width: 30px;
-  height: 30px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s;
-}
-.add-btn:hover,
-.add-btn.open {
-  background: var(--color-secondary);
-  color: var(--color-foreground);
-}
-.add-menu {
-  min-width: 188px;
-}
-.add-menu .dropdown-item {
-  gap: 9px;
-  padding: 7px 12px;
-  color: var(--color-foreground);
-}
-.dmi-icon {
-  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-accent-neutral);
-}
-.dmi-badge {
-  margin-left: auto;
-  font-size: 10px;
-  font-family: var(--font-mono);
-  color: var(--color-accent-neutral);
-}
-
-/* Right-anchored dropdown (the model picker now lives on the toolbar's right) */
-.dropdown-menu.align-right {
-  left: auto;
-  right: 0;
-}
-
-/* Subtle divider + the armed-Goal chip (Codex-style "× Goal" pill) */
-.tb-divider {
-  width: 1px;
-  height: 16px;
-  background: var(--color-border);
-  margin: 0 2px;
-  flex-shrink: 0;
-}
-.goal-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  height: 26px;
-  padding: 0 9px 0 4px;
-  border-radius: var(--radius-md);
-  background: var(--neutral-wash);
-  color: var(--color-accent-neutral);
-  font-size: 12px;
-  font-weight: 500;
-}
-.goal-chip-x {
-  display: grid;
-  place-items: center;
-  width: 16px;
-  height: 16px;
-  border: none;
-  border-radius: var(--radius-pill);
-  background: color-mix(in srgb, var(--color-accent-neutral) 18%, transparent);
-  color: var(--color-accent-neutral);
-  cursor: pointer;
-  transition: background 0.15s;
-}
-.goal-chip-x:hover {
-  background: color-mix(in srgb, var(--color-accent-neutral) 34%, transparent);
-}
-
-.dropdown-footer {
-  padding: 4px 12px;
-  border-top: 1px solid var(--color-border);
-}
-
-.dropdown-footer button {
-  width: 100%;
-  text-align: left;
-  font-size: 12px;
-  color: var(--color-muted-foreground);
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 4px 0;
-}
-
-.recommend-badge {
-  font-size: 9px;
-  padding: 1px 5px;
-  border-radius: var(--radius-sm);
-  background: var(--neutral-wash);
-  color: var(--color-accent-neutral);
-  font-weight: 500;
-  margin-left: 4px;
-}
-
-.fav-star {
-  opacity: 0;
-  margin-left: auto;
-  background: transparent;
-  border: none;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  font-size: 12px;
-  padding: 0 2px;
-}
-
-.fav-star.is-fav {
-  opacity: 1;
-  color: var(--color-accent-neutral);
-}
-
-.dropdown-item:hover .fav-star {
-  opacity: 1;
-}
-
-/* ───────────────────────────────────────────────────────────────────────────
- * Mode selector — Ask for approval / Plan / Full access.
- * Flat three-item list; the only chromatic signal is the destructive tint on
- * Full access (the one mode that can act without you). Icons are stock
- * heroicons: HandRaised / ClipboardDocumentList / ShieldExclamation.
- * ─────────────────────────────────────────────────────────────────────────── */
-.mo-trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  height: 28px;
-  padding: 0 8px 0 6px;
-  border: 1px solid transparent;
-  border-radius: var(--radius-lg);
-  background: transparent;
-  color: var(--color-foreground);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background var(--duration-fast);
-}
-.mo-trigger:hover { background: var(--color-muted); }
-.mo-trigger-ic {
-  width: 18px;
-  height: 18px;
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-  background: transparent;
-  color: var(--color-accent-neutral);
-}
-.mo-trigger[data-risk='danger'] .mo-trigger-ic { color: var(--color-danger-soft); }
-.mo-trigger[data-risk='plan'] .mo-trigger-ic { color: var(--color-success); }
-/* The label tints to match the active mode so the state reads at rest:
-   soft red for Full access, green for Plan. */
-.mo-trigger-danger { color: var(--color-danger-soft); }
-.mo-trigger-plan { color: var(--color-success); }
-.mo-trigger-chev {
-  width: 12px;
-  height: 12px;
-  opacity: 0.55;
-  transition: transform var(--duration-normal);
-}
-.mo-trigger[aria-expanded='true'] .mo-trigger-chev { transform: rotate(180deg); }
-
-.mo-panel {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  margin-bottom: 4px;
-  z-index: var(--z-dropdown);
-  width: 264px;
-  padding: 4px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-lg);
-}
-.mo-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  width: 100%;
-  padding: 8px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  color: var(--color-foreground);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  transition: background var(--duration-fast);
-}
-.mo-row:hover { background: var(--color-muted); }
-.mo-row.active { background: var(--neutral-wash); }
-.mo-ic {
-  width: 26px;
-  height: 26px;
-  display: grid;
-  place-items: center;
-  background: transparent;
-  color: var(--color-accent-neutral);
-  flex-shrink: 0;
-  margin-top: 1px;
-}
-.mo-ic.danger { color: var(--color-danger-soft); }
-.mo-ic.plan { color: var(--color-success); }
-.mo-body {
-  flex: 1;
-  min-width: 0;
-  padding-top: 1px;
-}
-.mo-title {
-  display: block;
-  font-size: 12.5px;
-  font-weight: 500;
-  color: var(--color-foreground);
-  letter-spacing: -0.005em;
-}
-.mo-row.active .mo-title { font-weight: 600; }
-.mo-title-danger { color: var(--color-danger-soft); }
-.mo-title-plan { color: var(--color-success); }
-.mo-sub {
-  display: block;
-  font-size: 10.5px;
-  color: var(--color-muted-foreground);
-  line-height: 1.4;
-  margin-top: 1px;
-}
-.mo-check {
-  flex-shrink: 0;
-  margin-top: 3px;
-  color: var(--color-accent-neutral);
-}
-
-/* ───────────────────────────────────────────────────────────────────────────
- * Model selector — identity tiles, capability dots, pinned current, search.
- * ─────────────────────────────────────────────────────────────────────────── */
-.mm-trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 28px;
-  padding: 0 8px;
-  border: 1px solid transparent;
-  border-radius: var(--radius-lg);
-  background: transparent;
-  color: var(--color-foreground);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background var(--duration-fast);
-}
-.mm-trigger:hover { background: var(--color-muted); }
-.mm-trigger-chev {
-  width: 12px;
-  height: 12px;
-  opacity: 0.55;
-  transition: transform var(--duration-normal);
-}
-.mm-trigger[aria-expanded='true'] .mm-trigger-chev { transform: rotate(180deg); }
-
-/* Per-model reasoning-effort control — visually matches the model picker
-   trigger (transparent border, no background; muted bg only on hover). */
-.effort-trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  height: 28px;
-  padding: 0 8px;
-  border: 1px solid transparent;
-  border-radius: var(--radius-lg);
-  background: transparent;
-  color: var(--color-foreground);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background var(--duration-fast);
-}
-.effort-trigger:hover { background: var(--color-muted); }
-/* When an effort is selected, tint only the text (no chip fill/border), so the
-   trigger stays visually consistent with the adjacent model picker. */
-.effort-trigger.on { color: var(--color-primary); }
-.effort-chev { opacity: 0.55; transition: transform var(--duration-normal); }
-.effort-trigger[aria-expanded='true'] .effort-chev { transform: rotate(180deg); }
-.effort-panel {
-  position: absolute;
-  bottom: 100%;
-  right: 0;
-  margin-bottom: 4px;
-  z-index: var(--z-dropdown);
-  min-width: 140px;
-  padding: 4px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  box-shadow: var(--shadow-md);
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-.effort-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  width: 100%;
-  padding: 6px 8px;
-  border: none;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--color-foreground);
-  font-size: 12px;
-  cursor: pointer;
-  transition: background var(--duration-fast);
-}
-.effort-row:hover { background: var(--color-muted); }
-.effort-row.active { color: var(--color-primary); font-weight: 600; }
-.effort-row .heroicon { color: var(--color-primary); }
-
-.mm-panel {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  margin-bottom: 4px;
-  z-index: var(--z-dropdown);
-  width: 290px;
-  max-height: 540px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-lg);
-}
-.mm-panel.align-right { left: auto; right: 0; }
-
-.mm-search {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 9px 12px;
-  border-bottom: 1px solid var(--color-border);
-  color: var(--color-foreground);
-}
-.mm-search input {
-  flex: 1;
-  border: none;
-  outline: none;
-  background: transparent;
-  color: var(--color-foreground);
-  font: inherit;
-  font-size: 13px;
-}
-.mm-search input::placeholder { color: var(--color-foreground); opacity: 1; }
-.mm-search-kbd {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  padding: 1px 5px;
-  border-radius: var(--radius-sm);
-  background: var(--color-muted);
-  border: 1px solid var(--color-border);
-  color: var(--color-muted-foreground);
-}
-
-/* Pinned current row. */
-.mm-pinned {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 9px 12px;
-  background: transparent;
-  border-bottom: 1px solid var(--color-border);
-}
-.mm-pinned-pin {
-  width: 17px;
-  height: 17px;
-  flex-shrink: 0;
-  color: var(--color-accent-neutral);
-}
-.mm-pinned-body {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-}
-
-.mm-list {
-  overflow-y: auto;
-  padding: 4px;
-  flex: 1;
-}
-.mm-group {
-  padding: 8px 8px 4px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--color-muted-foreground);
-}
-.mm-group-count {
-  font-family: var(--font-mono);
-  font-weight: 400;
-  letter-spacing: 0;
-  text-transform: none;
-  opacity: 0.7;
-}
-.mm-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 6px 8px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  color: var(--color-foreground);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  transition: background var(--duration-fast);
-}
-.mm-row:hover { background: var(--color-muted); }
-.mm-row.active { background: var(--neutral-wash); }
-.mm-row.active .mm-name { color: var(--color-accent-neutral); font-weight: 600; }
-.mm-body {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-}
-.mm-name {
-  font-size: 12.5px;
-  color: var(--color-foreground);
-  line-height: 1.25;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.mm-id {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--color-muted-foreground);
-  margin-top: 1px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-/* Capability dots — mono-stroke, identical baseline. Darkened + sized up a
- * touch so the icons stay legible against the active/pinned wash. */
-.mm-caps {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-  color: var(--color-foreground);
-}
-.mm-caps svg { width: 15px; height: 15px; stroke-width: 1.9; }
-.mm-cap-warn { color: var(--color-warning-fg); }
-.mm-recommend {
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  padding: 1px 6px;
-  border-radius: var(--radius-xs);
-  background: var(--neutral-wash-strong);
-  border: 1px solid var(--color-border);
-  color: var(--color-foreground);
-  flex-shrink: 0;
-}
-.mm-check {
-  flex-shrink: 0;
-  color: var(--color-accent-neutral);
-  stroke-width: 2;
-}
-.mm-fav {
-  opacity: 0;
-  flex-shrink: 0;
-  background: transparent;
-  border: none;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  transition: opacity var(--duration-fast), color var(--duration-fast);
-}
-.mm-row:hover .mm-fav,
-.mm-fav.on { opacity: 1; }
-.mm-fav.on { color: var(--color-primary); }
-.mm-fav:hover { color: var(--color-primary); }
-.mm-empty {
-  text-align: center;
-  font-size: 13px;
-  color: var(--color-muted-foreground);
-  padding: 20px 0;
-}
-.mm-foot {
-  border-top: 1px solid var(--color-border);
-  padding: 6px;
-}
-.mm-foot button {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 8px;
-  border: none;
-  background: transparent;
-  color: var(--color-foreground);
-  font: inherit;
-  font-size: 12px;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: background var(--duration-fast), color var(--duration-fast);
-}
-.mm-foot button:hover {
-  background: var(--color-muted);
-  color: var(--color-foreground);
-}
-
-/* ───────────────────────────────────────────────────────────────────────────
- * Manage Models dialog — SettingsDialog anatomy (scrim + header + filter +
- * body + footer). Raw checkbox replaced by the s-switch shape.
- * ─────────────────────────────────────────────────────────────────────────── */
-.manage-scrim {
-  position: fixed;
-  inset: 0;
-  z-index: var(--z-modal);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--backdrop);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-}
-.manage-dlg {
-  width: min(560px, 94vw);
-  max-height: 70vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-lg);
-  margin: 0 16px;
-}
-.manage-head {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 16px 18px 14px;
-  border-bottom: 1px solid var(--color-border);
-}
-.manage-head-icon {
-  width: 30px;
-  height: 30px;
-  display: grid;
-  place-items: center;
-  border-radius: var(--radius-md);
-  background: var(--neutral-wash);
-  color: var(--color-accent-neutral);
-  flex-shrink: 0;
-}
-.manage-head-text { flex: 1; min-width: 0; }
-.manage-title {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--color-foreground);
-  letter-spacing: -0.01em;
-}
-.manage-sub {
-  margin: 2px 0 0;
-  font-size: 11.5px;
-  color: var(--color-muted-foreground);
-  line-height: 1.45;
-}
-.manage-close {
-  margin-left: auto;
-  width: 28px;
-  height: 28px;
-  flex-shrink: 0;
-  display: grid;
-  place-items: center;
-  border: 1px solid transparent;
-  background: transparent;
-  color: var(--color-muted-foreground);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
-}
-.manage-close:hover {
-  background: var(--color-muted);
-  color: var(--color-foreground);
-  border-color: var(--color-border);
-}
-.manage-filter {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 18px;
-  border-bottom: 1px solid var(--color-border);
-}
-.manage-filter-wrap {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0 10px;
-  height: 30px;
-  background: var(--color-muted);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  color: var(--color-muted-foreground);
-  transition: border-color var(--duration-fast);
-}
-.manage-filter-wrap:focus-within { border-color: var(--color-accent-neutral); }
-.manage-filter-wrap input {
-  flex: 1;
-  border: none;
-  outline: none;
-  background: transparent;
-  color: var(--color-foreground);
-  font: inherit;
-  font-size: 12.5px;
-}
-.manage-filter-wrap input::placeholder { color: var(--color-muted-foreground); }
-.manage-filter-count {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-.manage-body {
-  overflow-y: auto;
-  flex: 1;
-  padding: 6px 10px 10px;
-}
-.manage-prov {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 8px 6px;
-  position: sticky;
-  top: 0;
-  background: var(--color-surface);
-  z-index: 1;
-}
-.manage-prov-name {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--color-foreground);
-}
-.manage-prov-id {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--color-muted-foreground);
-}
-.manage-prov-count {
-  margin-left: auto;
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--color-muted-foreground);
-}
-.manage-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px;
-  border-radius: var(--radius-md);
-  transition: background var(--duration-fast);
-}
-.manage-row:hover { background: var(--color-muted); }
-.manage-row[data-off='true'] { opacity: 0.5; }
-.manage-row[data-off='true'] .manage-row-name { color: var(--color-muted-foreground); }
-.manage-row-text {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-}
-.manage-row-name {
-  font-size: 12.5px;
-  color: var(--color-foreground);
-  line-height: 1.3;
-}
-.manage-row-id {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--color-muted-foreground);
-  margin-top: 1px;
-}
-.manage-switch {
-  position: relative;
-  width: 32px;
-  height: 18px;
-  flex-shrink: 0;
-  border-radius: var(--radius-pill);
-  border: none;
-  background: var(--color-border);
-  cursor: pointer;
-  padding: 0;
-  transition: background var(--duration-fast);
-}
-.manage-switch[aria-checked='true'] { background: var(--color-accent-neutral); }
-.manage-switch::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--color-surface);
-  box-shadow: var(--shadow-sm);
-  transition: transform var(--duration-fast) var(--ease-out);
-}
-.manage-switch[aria-checked='true']::after { transform: translateX(14px); }
-.manage-empty {
-  text-align: center;
-  font-size: 13px;
-  color: var(--color-muted-foreground);
-  padding: 32px 0;
-}
-.manage-foot {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 11px 18px;
-  border-top: 1px solid var(--color-border);
-  background: var(--color-muted);
-}
-.manage-foot-hint {
-  font-size: 11px;
-  color: var(--color-muted-foreground);
-}
-.manage-foot-actions { display: flex; gap: 8px; }
-.manage-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 30px;
-  padding: 0 13px;
-  border: 1px solid transparent;
-  border-radius: var(--radius-md);
-  background: var(--color-accent-neutral);
-  color: var(--color-surface);
-  font: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background var(--duration-fast);
-}
-.manage-btn:hover {
-  background: color-mix(in srgb, var(--color-accent-neutral) 88%, var(--color-background));
-}
-
-/* Token count */
-.token-count {
-  font-size: 10px;
-  font-family: var(--font-mono);
-  color: var(--color-muted-foreground);
-}
-/* Clickable variant: opens the context-capacity popup. */
-.token-count-btn {
-  background: none;
-  border: none;
-  padding: 2px 5px;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: background var(--duration-fast), color var(--duration-fast);
-}
-.token-count-btn:hover {
-  background: var(--color-secondary);
-  color: var(--color-foreground);
-}
-/* Context-fill ring + percentage. */
-.ctx-trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-}
-.ctx-ring {
-  display: block;
-  transition: stroke-dashoffset var(--duration-normal, 0.3s) ease;
-}
-.ctx-ring circle:last-child {
-  transition: stroke-dashoffset var(--duration-normal, 0.3s) ease;
-}
-
-/* Send & Stop buttons */
-.send-btn {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 5px 12px;
-  border: none;
-  border-radius: var(--radius-lg);
-  background: var(--color-primary);
-  color: var(--color-on-primary);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: opacity 0.15s, transform 0.08s var(--ease-out);
-  white-space: nowrap;
-}
-
-.send-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.send-btn:not(:disabled):hover {
-  opacity: 0.92;
-}
-
-.send-btn:not(:disabled):active {
-  transform: translateY(0.5px);
-}
-
-.stop-btn {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 5px 12px;
-  border: none;
-  border-radius: var(--radius-lg);
-  background: var(--color-destructive);
-  color: var(--color-on-destructive);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-/* Slash menu */
-.slash-menu {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  margin-bottom: 8px;
-  z-index: 30;
-  padding: 6px 0;
-  max-height: 200px;
-  overflow-y: auto;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-md);
-}
-
-.slash-item {
-  width: 100%;
-  padding: 8px 14px;
-  text-align: left;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  transition: background 0.1s;
-}
-
-.slash-item.active,
-.slash-item:hover {
-  background: var(--color-muted);
-}
-
-.slash-cmd {
-  font-size: 12px;
-  font-family: var(--font-mono);
-  color: var(--color-accent-neutral);
-  flex-shrink: 0;
-}
-
-.slash-badge {
-  flex-shrink: 0;
-  font-size: 10px;
-  line-height: 1;
-  padding: 2px 6px;
-  border-radius: 999px;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-}
-
-.slash-badge-flow {
-  color: var(--color-accent);
-  background: var(--accent-wash);
-  border: 1px solid var(--accent-wash);
-}
-
-.slash-desc {
-  font-size: 11px;
-  color: var(--color-muted-foreground);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.hidden {
-  display: none;
-}
-</style>
diff --git a/web/src/components/ChatMessage.vue b/web/src/components/ChatMessage.vue
deleted file mode 100644
index 9e0ed954..00000000
--- a/web/src/components/ChatMessage.vue
+++ /dev/null
@@ -1,206 +0,0 @@
-<script setup lang="ts">
-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'
-import { useI18n } from 'vue-i18n'
-
-const props = defineProps<{
-  message: ChatMessage
-  canEdit?: boolean
-}>()
-
-const { t } = useI18n()
-
-// System messages carry a level: 'error' (red), 'notice' (muted, e.g. Stopped),
-// or undefined (default warning styling).
-const systemColor = computed(() => {
-  if (props.message.level === 'error') return 'var(--color-destructive)'
-  if (props.message.level === 'notice') return 'var(--color-muted-foreground)'
-  return 'var(--color-warning-fg)'
-})
-const systemLabel = computed(() => (props.message.level === 'error' ? t('chat.roles.error') : t('chat.roles.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 t('chat.durationSeconds', { n: totalSec })
-  const m = Math.floor(totalSec / 60)
-  const s = totalSec % 60
-  return s ? t('chat.durationMinutes', { m, s }) : t('chat.durationMinutesOnly', { m })
-})
-
-const emit = defineEmits<{
-  edit: [newText: string]
-}>()
-
-const copied = ref(false)
-const editing = ref(false)
-const editText = ref('')
-const editTextarea = ref<HTMLTextAreaElement | null>(null)
-
-function copyContent() {
-  navigator.clipboard.writeText(props.message.content).then(() => {
-    copied.value = true
-    setTimeout(() => { copied.value = false }, 1500)
-  }).catch((err) => {
-    console.error('Failed to copy:', err)
-  })
-}
-
-function startEdit() {
-  editText.value = props.message.content
-  editing.value = true
-  nextTick(() => {
-    editTextarea.value?.focus()
-  })
-}
-
-function confirmEdit() {
-  const text = editText.value.trim()
-  if (text) {
-    emit('edit', text)
-  }
-  editing.value = false
-}
-
-function cancelEdit() {
-  editing.value = false
-}
-
-function handleEditKeyDown(e: KeyboardEvent) {
-  if (e.key === 'Enter' && !e.shiftKey) {
-    e.preventDefault()
-    confirmEdit()
-  }
-  if (e.key === 'Escape') {
-    e.preventDefault()
-    cancelEdit()
-  }
-}
-</script>
-
-<template>
-  <div class="py-3 animate-fade-in group/msg">
-    <!-- Role label + action buttons -->
-    <div class="flex items-center gap-2.5 mb-2">
-      <div
-        class="w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0"
-        :style="{
-          background: message.role === 'assistant' ? 'var(--color-accent-neutral)' :
-                      message.role === 'user' && message.source === 'wechat' ? 'var(--color-info-fg)' :
-                      message.role === 'system' ? systemColor :
-                      'var(--color-foreground)',
-          color: 'var(--color-surface)'
-        }"
-      >
-        <template v-if="message.role === 'assistant'">J</template>
-        <template v-else-if="message.role === 'user' && message.source === 'wechat'">W</template>
-        <template v-else-if="message.role === 'user'">U</template>
-        <template v-else>S</template>
-      </div>
-      <span
-        class="text-[11px] font-semibold"
-        :style="{
-          color: message.role === 'assistant' ? 'var(--color-accent-neutral)' :
-                 message.role === 'user' && message.source === 'wechat' ? 'var(--color-info-fg)' :
-                 message.role === 'system' ? systemColor :
-                 'var(--color-foreground)'
-        }"
-      >
-        {{ message.role === 'user' ? (message.source === 'wechat' ? t('chat.roles.wechat') : t('chat.roles.you')) : message.role === 'assistant' ? t('chat.roles.assistant') : systemLabel }}
-      </span>
-    </div>
-
-    <!-- Images -->
-    <div v-if="message.images && message.images.length > 0" class="pl-9 mb-2 flex flex-wrap gap-2">
-      <img
-        v-for="(img, i) in message.images"
-        :key="i"
-        :src="`data:${img.media_type};base64,${img.data}`"
-        class="max-w-64 max-h-48 object-contain cursor-pointer hover:opacity-90 transition-opacity"
-        :style="{ borderRadius: 'var(--radius-lg)', border: '1px solid var(--color-border)' }"
-        @click="($event.target as HTMLImageElement).classList.toggle('max-w-64'); ($event.target as HTMLImageElement).classList.toggle('max-w-full')"
-      />
-    </div>
-
-    <!-- Content or Edit mode -->
-    <div v-if="!editing" class="prose-chat pl-9" v-html="renderMarkdown(message.content)" />
-
-    <!-- Inline edit mode -->
-    <div v-else class="pl-9">
-      <textarea
-        ref="editTextarea"
-        v-model="editText"
-        class="w-full min-h-20 max-h-80 resize-y text-sm px-3 py-2 transition-colors"
-        :style="{ borderRadius: 'var(--radius-lg)', border: '1px solid var(--color-border)', background: 'var(--color-surface)', color: 'var(--color-foreground)' }"
-        @keydown="handleEditKeyDown"
-      />
-      <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-accent-neutral)', color: 'var(--color-surface)', borderRadius: 'var(--radius-md)' }"
-          @click="confirmEdit"
-        >
-          {{ t('common.save') }}
-        </button>
-        <button
-          class="px-3 py-1 text-xs font-medium transition-all cursor-pointer active:scale-95"
-          :style="{ background: 'var(--color-secondary)', color: 'var(--color-foreground)', borderRadius: 'var(--radius-md)' }"
-          @click="cancelEdit"
-        >
-          {{ t('common.cancel') }}
-        </button>
-        <span class="text-[10px]" style="color: var(--color-muted-foreground)">{{ t('chat.copilotHint') }}</span>
-      </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="t('chat.turnDuration')"
-      >{{ 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 ? t('chat.actions.copied') : t('chat.actions.copy')"
-          @click="copyContent"
-        >
-          <Square2StackIcon v-if="!copied" class="w-3 h-3" />
-          <CheckIcon v-else class="w-3 h-3" style="color: var(--color-accent-neutral)" />
-        </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="t('common.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"
-      class="pl-9 mt-1"
-    >
-      <summary class="text-[11px] cursor-pointer select-none" style="color: var(--color-muted-foreground)">{{ t('common.details') }}</summary>
-      <pre class="text-[11px] font-mono whitespace-pre-wrap mt-1 px-2 py-1.5 overflow-x-auto" style="color: var(--color-muted-foreground); background: var(--color-muted); border-radius: var(--radius-md)">{{ message.detail }}</pre>
-    </details>
-  </div>
-</template>
diff --git a/web-react/src/components/ChatView.tsx b/web/src/components/ChatView.tsx
similarity index 78%
rename from web-react/src/components/ChatView.tsx
rename to web/src/components/ChatView.tsx
index 38c52bcc..db7f338b 100644
--- a/web-react/src/components/ChatView.tsx
+++ b/web/src/components/ChatView.tsx
@@ -2,8 +2,9 @@
  * ChatView — the main chat column.
  *
  * Two states (matches Vue App.vue):
- *   - Welcome: no messages → centered hero ([ J CODE ]) + centered composer.
- *   - Conversation: messages exist → scrollable timeline + docked composer.
+ *   - Welcome: no messages → centered hero ([ J CODE ]) + elevated composer.
+ *   - Conversation: messages exist → feathered scrollable timeline + docked
+ *     composer (no hard border-t; messages dissolve into the surface).
  *
  * The TopBar (floated top-right) carries the panel menu + connection status,
  * so there is NO separate header here.
@@ -29,7 +30,6 @@ export function ChatView({ readOnly }: ChatViewProps) {
   if (readOnly) {
     return (
       <div className="chat-panel flex min-h-0 flex-1 flex-col">
-        <GoalBanner />
         <div className="min-h-0 flex-1">
           <Thread overscanBottom={8} />
         </div>
@@ -37,7 +37,7 @@ export function ChatView({ readOnly }: ChatViewProps) {
     )
   }
 
-  // Welcome screen: centered hero + composer (no messages yet).
+  // Welcome screen: centered hero + elevated composer (no messages yet).
   if (!hasMessages) {
     const subtitle = t('welcome.subtitle')
     const title = t('welcome.startIn').replace('{project}', project)
@@ -61,9 +61,9 @@ export function ChatView({ readOnly }: ChatViewProps) {
             {subtitleAfter}
           </p>
         </div>
-        {/* Centered composer */}
-        <div className="welcome-composer w-full max-w-2xl">
-          <ChatInput pickerPlacement="bottom" onSent={() => { /* timeline auto-follows */ }} />
+        {/* Centered elevated composer */}
+        <div className="welcome-composer w-full max-w-2xl px-5">
+          <ChatInput elevated pickerPlacement="bottom" onSent={() => { /* timeline auto-follows */ }} />
         </div>
         {/* Bottom half balances the center */}
         <div className="min-h-0 flex-1" aria-hidden="true" />
@@ -71,14 +71,16 @@ export function ChatView({ readOnly }: ChatViewProps) {
     )
   }
 
-  // Active conversation: scrollable timeline + docked composer.
+  // Active conversation: feathered timeline + docked composer (no border-t).
+  // `.chat-col` is shared with messages so the input box width matches the
+  // message column exactly (same max-width + 20px horizontal inset).
   return (
     <div className="chat-panel flex min-h-0 flex-1 flex-col">
-      <GoalBanner />
       <div className="min-h-0 flex-1">
-        <Thread overscanBottom={96} />
+        <Thread overscanBottom={28} />
       </div>
-      <div className="border-t border-[var(--color-border)] px-3 py-2.5">
+      <div className="chat-col">
+        <GoalBanner />
         <ChatInput onSent={() => { /* timeline auto-follows via useStreamFollow */ }} />
       </div>
     </div>
diff --git a/web-react/src/components/CommandPalette.tsx b/web/src/components/CommandPalette.tsx
similarity index 96%
rename from web-react/src/components/CommandPalette.tsx
rename to web/src/components/CommandPalette.tsx
index 33d85756..5c84bf67 100644
--- a/web-react/src/components/CommandPalette.tsx
+++ b/web/src/components/CommandPalette.tsx
@@ -12,6 +12,7 @@ import { useAppDispatch, useAppSelector } from '../app/hooks'
 import { chatActions, loadSession, loadTasks, loadWorkspaceState, sessionActions, uiActions } from '../app/store'
 import { api } from '../lib/api'
 import type { TaskItem } from '../lib/types'
+import { isRemotePath, openRemoteConnect, parseRemoteLabel } from '../lib/remote'
 
 interface PaletteItem {
   id: string
@@ -54,7 +55,9 @@ export function CommandPalette() {
       dispatch(uiActions.setView('chat'))
       if (task.project && task.project !== activePath) {
         if (isRemotePath(task.project)) {
-          window.dispatchEvent(new Event('jcode:open-remote-connect'))
+          const meta = parseRemoteLabel(task.project)
+          openRemoteConnect(meta ? { ...meta, loadTaskUuid: task.uuid } : undefined)
+          close()
           return
         }
         const resp = await api.switchProject(task.project)
@@ -77,7 +80,7 @@ export function CommandPalette() {
     { id: 'chat', group: t('commandPalette.groups.actions'), label: t('nav.chat'), Icon: ChatBubbleLeftIcon, run: () => dispatch(uiActions.setView('chat')) },
     { id: 'automations', group: t('commandPalette.groups.actions'), label: t('nav.automations'), Icon: ChatBubbleLeftIcon, run: () => dispatch(uiActions.setView('automations')) },
     { id: 'channels', group: t('commandPalette.groups.actions'), label: t('nav.channels'), Icon: ChatBubbleLeftIcon, run: () => dispatch(uiActions.setView('channels')) },
-    { id: 'remote', group: t('commandPalette.groups.actions'), label: t('nav.remoteConnect'), Icon: ServerIcon, run: () => window.dispatchEvent(new Event('jcode:open-remote-connect')) },
+    { id: 'remote', group: t('commandPalette.groups.actions'), label: t('nav.remoteConnect'), Icon: ServerIcon, run: () => openRemoteConnect() },
     { id: 'settings', group: t('commandPalette.groups.actions'), label: t('nav.openSettings'), Icon: Cog6ToothIcon, run: () => dispatch(uiActions.setSettingsOpen(true)) },
     { id: 'folder', group: t('commandPalette.groups.actions'), label: t('nav.openProject'), Icon: FolderOpenIcon, run: () => {
       dispatch(uiActions.setView('chat'))
@@ -203,10 +206,6 @@ export function CommandPalette() {
   )
 }
 
-function isRemotePath(path: string): boolean {
-  return path.startsWith('ssh://') || path.startsWith('docker://')
-}
-
 function workspaceName(path: string): string {
   if (!path) return ''
   const parts = path.split('/').filter(Boolean)
diff --git a/web/src/components/CommandPalette.vue b/web/src/components/CommandPalette.vue
deleted file mode 100644
index c76ca05c..00000000
--- a/web/src/components/CommandPalette.vue
+++ /dev/null
@@ -1,305 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch, nextTick, inject } from 'vue'
-import { Dialog, DialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
-import { PlusIcon, Cog6ToothIcon, FolderOpenIcon, SunIcon, ChatBubbleLeftIcon, MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
-import { useI18n } from 'vue-i18n'
-import { useChatStore } from '@/stores/chat'
-import { useProjectStore, isRemotePath, parseRemoteLabel } from '@/stores/project'
-import type { TaskItem, RemoteMeta } from '@/types/api'
-
-const props = defineProps<{ open: boolean }>()
-const emit = defineEmits<{
-  close: []
-  action: [name: 'settings' | 'projects' | 'theme']
-}>()
-
-const store = useChatStore()
-const projectStore = useProjectStore()
-const { t } = useI18n()
-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
-  group: string
-  label: string
-  hint?: string
-  icon: unknown
-  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')
-  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
-  }
-}
-
-const actions = computed<PaletteItem[]>(() => [
-  { id: 'a-new', group: t('commandPalette.groups.actions'), label: t('commandPalette.newTask'), icon: PlusIcon, run: () => { emit('close'); store.newSession() } },
-  { id: 'a-proj', group: t('commandPalette.groups.actions'), label: t('nav.openProject'), icon: FolderOpenIcon, run: () => { emit('close'); emit('action', 'projects') } },
-  { id: 'a-settings', group: t('commandPalette.groups.actions'), label: t('nav.openSettings'), icon: Cog6ToothIcon, run: () => { emit('close'); emit('action', 'settings') } },
-  { id: 'a-theme', group: t('commandPalette.groups.actions'), label: t('nav.toggleTheme'), icon: SunIcon, run: () => { emit('close'); emit('action', 'theme') } },
-])
-
-const taskItems = computed<PaletteItem[]>(() =>
-  projectStore.allTasks
-    .filter((task) => !task.archived)
-    .map((task) => ({
-      id: 't-' + task.uuid,
-      group: t('commandPalette.groups.tasks'),
-      label: task.title || task.uuid.slice(0, 8) + '…',
-      hint: projectStore.nameForPath(task.project),
-      icon: ChatBubbleLeftIcon,
-      run: () => openTask(task),
-    })),
-)
-
-const results = computed<PaletteItem[]>(() => {
-  const q = query.value.trim().toLowerCase()
-  const all = [...actions.value, ...taskItems.value]
-  if (!q) return [...actions.value, ...taskItems.value.slice(0, 8)]
-  return all.filter((i) => i.label.toLowerCase().includes(q) || (i.hint || '').toLowerCase().includes(q))
-})
-
-// Group results in display order while keeping a flat index for keyboard nav.
-const groups = computed(() => {
-  const order: string[] = []
-  const map: Record<string, PaletteItem[]> = {}
-  results.value.forEach((item) => {
-    if (!map[item.group]) {
-      map[item.group] = []
-      order.push(item.group)
-    }
-    map[item.group]!.push(item)
-  })
-  return order.map((g) => ({ name: g, items: map[g]! }))
-})
-
-function flatIndex(item: PaletteItem): number {
-  return results.value.findIndex((i) => i.id === item.id)
-}
-
-watch(() => props.open, async (o) => {
-  if (o) {
-    query.value = ''
-    selectedIdx.value = 0
-    projectStore.fetchAllTasks()
-    await nextTick()
-    inputEl.value?.focus()
-  }
-})
-watch(results, () => { selectedIdx.value = 0 })
-
-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()
-}
-function onKeydown(e: KeyboardEvent) {
-  if (e.key === 'ArrowDown') { e.preventDefault(); move(1) }
-  else if (e.key === 'ArrowUp') { e.preventDefault(); move(-1) }
-  else if (e.key === 'Enter') { e.preventDefault(); runSelected() }
-}
-</script>
-
-<template>
-  <TransitionRoot :show="open" as="template">
-    <Dialog @close="emit('close')" class="relative" style="z-index: var(--z-modal)">
-      <TransitionChild
-        enter="ease-out duration-150" enter-from="opacity-0" enter-to="opacity-100"
-        leave="ease-in duration-100" leave-from="opacity-100" leave-to="opacity-0">
-        <div class="fixed inset-0" style="background: var(--backdrop); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px)" />
-      </TransitionChild>
-
-      <div class="fixed inset-0 flex items-start justify-center pt-[12vh] px-4">
-        <TransitionChild
-          enter="ease-out duration-150" enter-from="opacity-0 scale-[0.98] -translate-y-1"
-          enter-to="opacity-100 scale-100 translate-y-0"
-          leave="ease-in duration-100" leave-from="opacity-100 scale-100"
-          leave-to="opacity-0 scale-[0.98] -translate-y-1">
-          <DialogPanel class="cp-panel">
-            <div class="cp-input-row">
-              <MagnifyingGlassIcon class="cp-search-icon" />
-              <input
-                ref="inputEl"
-                v-model="query"
-                class="cp-input"
-                :placeholder="t('commandPalette.placeholder')"
-                @keydown="onKeydown"
-              />
-              <kbd class="cp-esc">Esc</kbd>
-            </div>
-
-            <div ref="resultsEl" class="cp-results">
-              <div v-if="results.length === 0" class="cp-empty">{{ t('commandPalette.noResults') }}</div>
-              <template v-for="g in groups" :key="g.name">
-                <div class="cp-group-label">{{ g.name }}</div>
-                <button
-                  v-for="item in g.items"
-                  :key="item.id"
-                  class="cp-item"
-                  :class="{ sel: flatIndex(item) === selectedIdx }"
-                  @click="item.run()"
-                  @mousemove="selectedIdx = flatIndex(item)"
-                >
-                  <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>
-                  <kbd v-if="flatIndex(item) === selectedIdx" class="cp-enter">↵</kbd>
-                </button>
-              </template>
-            </div>
-          </DialogPanel>
-        </TransitionChild>
-      </div>
-    </Dialog>
-  </TransitionRoot>
-</template>
-
-<style scoped>
-.cp-panel {
-  width: min(560px, 94vw);
-  max-height: 60vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-lg);
-}
-.cp-input-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 14px;
-  border-bottom: 1px solid var(--color-border);
-}
-.cp-search-icon {
-  width: 16px;
-  height: 16px;
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-.cp-input {
-  flex: 1;
-  background: transparent;
-  border: none;
-  outline: none;
-  font-size: 14px;
-  color: var(--color-foreground);
-  font-family: var(--font-sans);
-}
-.cp-input::placeholder {
-  color: var(--color-muted-foreground);
-}
-.cp-esc {
-  font-size: 10px;
-  font-family: var(--font-mono);
-  padding: 2px 6px;
-  border-radius: var(--radius-sm);
-  background: var(--color-secondary);
-  border: 1px solid var(--color-border);
-  color: var(--color-muted-foreground);
-}
-.cp-results {
-  overflow-y: auto;
-  padding: 6px;
-}
-.cp-empty {
-  text-align: center;
-  font-size: 13px;
-  color: var(--color-muted-foreground);
-  padding: 24px 0;
-}
-.cp-group-label {
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--color-muted-foreground);
-  padding: 8px 8px 4px;
-}
-.cp-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 8px 10px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  text-align: left;
-}
-.cp-item.sel {
-  background: var(--color-muted);
-}
-.cp-item-icon {
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-.cp-item-label {
-  flex: 1;
-  min-width: 0;
-  font-size: 13px;
-  color: var(--color-foreground);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.cp-item-hint {
-  font-size: 11px;
-  font-family: var(--font-mono);
-  color: var(--color-muted-foreground);
-  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;
-}
-</style>
diff --git a/web/src/components/ContextCapacityPopup.vue b/web/src/components/ContextCapacityPopup.vue
deleted file mode 100644
index f0aeb6e9..00000000
--- a/web/src/components/ContextCapacityPopup.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { storeToRefs } from 'pinia'
-import { useChatStore } from '@/stores/chat'
-import { useUsageStore } from '@/stores/usage'
-
-const { t, locale } = useI18n()
-const chat = useChatStore()
-const usage = useUsageStore()
-const { taskStats, taskLoading } = storeToRefs(usage)
-
-onMounted(() => {
-  if (chat.currentSessionId) usage.fetchTaskStats(chat.currentSessionId)
-})
-
-function fmtCompact(n: number): string {
-  try {
-    return new Intl.NumberFormat(locale.value, { notation: 'compact', maximumFractionDigits: 1 }).format(n)
-  } catch {
-    return String(n)
-  }
-}
-function fmtPct(frac: number): string {
-  return `${(frac * 100).toFixed(1)}%`
-}
-
-// Bucket palette: an accent gradient for the model-driven parts, a neutral for
-// the conversation-independent system prompt. Keeps the theme's orange identity.
-const BUCKETS = [
-  { key: 'messages', field: 'messages_tokens', color: 'color-mix(in srgb, var(--color-primary) 90%, transparent)' },
-  { key: 'systemTools', field: 'system_tools_tokens', color: 'color-mix(in srgb, var(--color-primary) 60%, transparent)' },
-  { key: 'mcpTools', field: 'mcp_tools_tokens', color: 'color-mix(in srgb, var(--color-primary) 38%, transparent)' },
-  { key: 'skills', field: 'skills_tokens', color: 'color-mix(in srgb, var(--color-primary) 22%, transparent)' },
-  { key: 'systemPrompt', field: 'system_prompt_tokens', color: 'color-mix(in srgb, var(--color-foreground) 30%, transparent)' },
-] as const
-
-const FREE_COLOR = 'color-mix(in srgb, var(--color-foreground) 7%, transparent)'
-
-// model_context_limit comes live over the WS; fall back to the per-task fetch.
-const limit = computed(() => chat.tokenInfo?.model_context_limit ?? taskStats.value?.context?.context_limit ?? 0)
-const hasWindow = computed(() => limit.value > 0)
-
-const rawRows = computed(() => {
-  const ctx = taskStats.value?.context
-  if (!ctx) return []
-  return BUCKETS.map((b) => ({
-    key: b.key,
-    color: b.color,
-    tokens: (ctx as unknown as Record<string, number>)[b.field] ?? 0,
-  })).filter((r) => r.tokens > 0)
-})
-
-const usedTokens = computed(() => rawRows.value.reduce((s, r) => s + r.tokens, 0))
-const freeTokens = computed(() => Math.max(0, limit.value - usedTokens.value))
-
-// Fractions are of the FULL context window when the window is known (matching
-// the canonical "context window" view), otherwise of the used total so the bar
-// still reads on models with no published limit.
-const denom = computed(() => (hasWindow.value ? limit.value : usedTokens.value || 1))
-const rows = computed(() => rawRows.value.map((r) => ({ ...r, frac: r.tokens / denom.value })))
-const freeFrac = computed(() => (hasWindow.value ? freeTokens.value / denom.value : 0))
-const usedPct = computed(() => (hasWindow.value ? Math.round((usedTokens.value / limit.value) * 100) : 0))
-
-// Cumulative tokens this conversation has consumed (input+output across turns).
-const sessionTotal = computed(() => taskStats.value?.tokens?.total_tokens ?? 0)
-
-const cachePct = computed<number | null>(() => {
-  const live = chat.cacheHitPercentage
-  if (live != null) return live
-  const ts = taskStats.value
-  if (ts && ts.cache_supported) return Math.round(ts.cache_hit_rate * 100)
-  return null
-})
-</script>
-
-<template>
-  <div class="ctx-popup" @click.stop>
-    <div class="flex items-baseline justify-between gap-3">
-      <span class="text-[12px] font-semibold" style="color: var(--color-foreground)">{{ t('contextCapacity.title') }}</span>
-      <span class="text-[11px] tabular-nums" style="color: var(--color-muted-foreground)">
-        {{ fmtCompact(usedTokens) }}<span v-if="hasWindow"> / {{ fmtCompact(limit) }}</span>
-        <span v-if="usedPct"> · {{ usedPct }}%</span>
-      </span>
-    </div>
-
-    <!-- Stacked composition bar over the free-space track -->
-    <div v-if="rows.length" class="ctx-bar mt-2.5" :style="{ background: FREE_COLOR }">
-      <div
-        v-for="seg in rows"
-        :key="seg.key"
-        class="ctx-seg"
-        :style="{ width: `${seg.frac * 100}%`, background: seg.color }"
-        :title="`${t('contextCapacity.' + seg.key)} · ${fmtCompact(seg.tokens)} · ${fmtPct(seg.frac)}`"
-      />
-    </div>
-
-    <!-- Per-category rows: absolute tokens + share of the context window -->
-    <div v-if="rows.length" class="mt-2.5 space-y-1">
-      <div v-for="seg in rows" :key="seg.key" class="flex items-center gap-2 text-[11px]">
-        <span class="inline-block w-2.5 h-2.5 rounded-[3px] shrink-0" :style="{ background: seg.color }" />
-        <span class="flex-1 truncate" style="color: var(--color-foreground)">{{ t('contextCapacity.' + seg.key) }}</span>
-        <span class="tabular-nums" style="color: var(--color-muted-foreground)">{{ fmtCompact(seg.tokens) }}</span>
-        <span class="w-12 text-right tabular-nums" style="color: var(--color-muted-foreground)">{{ fmtPct(seg.frac) }}</span>
-      </div>
-      <!-- Free space, like the canonical context-window view -->
-      <div v-if="hasWindow" class="flex items-center gap-2 text-[11px]">
-        <span class="inline-block w-2.5 h-2.5 rounded-[3px] shrink-0" :style="{ background: FREE_COLOR }" />
-        <span class="flex-1" style="color: var(--color-muted-foreground)">{{ t('contextCapacity.freeSpace') }}</span>
-        <span class="tabular-nums" style="color: var(--color-muted-foreground)">{{ fmtCompact(freeTokens) }}</span>
-        <span class="w-12 text-right tabular-nums" style="color: var(--color-muted-foreground)">{{ fmtPct(freeFrac) }}</span>
-      </div>
-    </div>
-
-    <div v-else-if="taskLoading" class="mt-2 text-[11px]" style="color: var(--color-muted-foreground)">
-      {{ t('common.loading') }}
-    </div>
-
-    <div class="ctx-divider" />
-
-    <!-- Conversation-level totals -->
-    <div class="flex items-center justify-between text-[11px]">
-      <span style="color: var(--color-muted-foreground)">{{ t('contextCapacity.cacheHitRate') }}</span>
-      <span class="font-semibold tabular-nums" :style="{ color: cachePct != null ? 'var(--color-primary)' : 'var(--color-muted-foreground)' }">
-        {{ cachePct != null ? cachePct + '%' : '—' }}
-      </span>
-    </div>
-    <div v-if="sessionTotal > 0" class="flex items-center justify-between text-[11px] mt-1.5">
-      <span style="color: var(--color-muted-foreground)">{{ t('contextCapacity.sessionTotal') }}</span>
-      <span class="tabular-nums" style="color: var(--color-foreground)">{{ fmtCompact(sessionTotal) }}</span>
-    </div>
-
-    <div class="mt-2 text-[10px]" style="color: var(--color-muted-foreground)">{{ t('contextCapacity.estimated') }}</div>
-  </div>
-</template>
-
-<style scoped>
-.ctx-popup {
-  width: 290px;
-  padding: 12px 14px;
-  border-radius: var(--radius-md);
-  background: var(--color-background);
-  border: 1px solid var(--color-border);
-  box-shadow: var(--elevation-popover, 0 8px 24px rgba(0, 0, 0, 0.16));
-}
-.ctx-bar {
-  display: flex;
-  height: 10px;
-  width: 100%;
-  border-radius: 5px;
-  overflow: hidden;
-}
-.ctx-seg {
-  height: 100%;
-}
-.ctx-seg + .ctx-seg {
-  border-left: 1px solid var(--color-background);
-}
-.ctx-divider {
-  height: 1px;
-  background: var(--color-border);
-  margin: 10px 0;
-}
-</style>
diff --git a/web/src/components/DiffViewer.vue b/web/src/components/DiffViewer.vue
deleted file mode 100644
index 898ca339..00000000
--- a/web/src/components/DiffViewer.vue
+++ /dev/null
@@ -1,222 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { api } from '@/composables/api'
-import type { DiffEntry } from '@/types/api'
-
-const { t } = useI18n()
-const entries = ref<DiffEntry[]>([])
-const mode = ref<'working' | 'staged' | 'branch' | 'session'>('session')
-const loading = ref(false)
-const selectedFile = ref<string | null>(null)
-
-const modes = computed(() => [
-  { value: 'session' as const, label: t('diff.modes.session') },
-  { value: 'working' as const, label: t('diff.modes.working') },
-  { value: 'staged' as const, label: t('diff.modes.staged') },
-  { value: 'branch' as const, label: t('diff.modes.branch') },
-])
-
-async function fetchDiff() {
-  loading.value = true
-  try {
-    const result = await api.diff(mode.value)
-    entries.value = result.entries
-    // 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)
-    entries.value = []
-  } finally {
-    loading.value = false
-  }
-}
-
-const selectedEntry = computed(() =>
-  entries.value.find((e) => e.file === selectedFile.value) || null,
-)
-
-const totalChanges = computed(() => ({
-  additions: entries.value.reduce((sum, e) => sum + e.additions, 0),
-  deletions: entries.value.reduce((sum, e) => sum + e.deletions, 0),
-}))
-
-function statusBadge(status: string): { label: string; style: Record<string, string> } {
-  switch (status) {
-    case 'A': return { label: 'A', style: { background: 'var(--color-success-bg)', color: 'var(--color-success-fg)' } }
-    case 'D': return { label: 'D', style: { background: 'var(--color-error-bg)', color: 'var(--color-error-fg)' } }
-    default: return { label: 'M', style: { background: 'var(--color-warning-bg)', color: 'var(--color-warning-fg)' } }
-  }
-}
-
-function parsePatchLines(patch: string) {
-  const lines = patch.split('\n')
-  return lines.map((line) => {
-    if (line.startsWith('+') && !line.startsWith('+++')) {
-      return { text: line, type: 'add' as const }
-    }
-    if (line.startsWith('-') && !line.startsWith('---')) {
-      return { text: line, type: 'del' as const }
-    }
-    if (line.startsWith('@@')) {
-      return { text: line, type: 'hunk' as const }
-    }
-    return { text: line, type: 'ctx' as const }
-  })
-}
-
-onMounted(fetchDiff)
-</script>
-
-<template>
-  <div class="flex flex-col h-full" style="background: var(--color-background)">
-    <!-- Header -->
-    <div class="flex items-center justify-between px-3 py-1.5" style="border-bottom: 1px solid var(--color-border); background: var(--color-sidebar-bg)">
-      <div class="flex items-center gap-2">
-        <span class="text-[11px] font-semibold uppercase tracking-wider" style="color: var(--color-muted-foreground)">{{ t('diff.changes') }}</span>
-        <div class="flex gap-0.5">
-          <button
-            v-for="m in modes"
-            :key="m.value"
-            class="dv-mode px-1.5 py-0.5 text-[10px] rounded cursor-pointer transition-colors font-medium"
-            :class="{ active: mode === m.value }"
-            @click="mode = m.value; fetchDiff()"
-          >
-            {{ m.label }}
-          </button>
-        </div>
-      </div>
-      <div class="flex items-center gap-2">
-        <span v-if="totalChanges.additions || totalChanges.deletions" class="text-[10px] font-mono">
-          <span style="color: var(--color-success-fg)">+{{ totalChanges.additions }}</span>
-          <span class="mx-0.5" style="color: var(--color-border)">/</span>
-          <span style="color: var(--color-error-fg)">-{{ totalChanges.deletions }}</span>
-        </span>
-        <button
-          class="dv-mute text-[10px] cursor-pointer transition-colors font-medium"
-          @click="fetchDiff"
-        >
-          {{ t('diff.refresh') }}
-        </button>
-      </div>
-    </div>
-
-    <div class="flex flex-col flex-1 min-h-0">
-      <!-- File list -->
-      <div class="overflow-y-auto shrink-0 max-h-[30%]" style="border-bottom: 1px solid var(--color-border)">
-        <div v-if="entries.length === 0 && !loading" class="text-center text-[11px] py-6" style="color: var(--color-muted-foreground)">
-          {{ t('diff.noChanges') }}
-        </div>
-        <div v-if="loading" class="text-center text-[11px] py-6 animate-pulse" style="color: var(--color-muted-foreground)">
-          Loading...
-        </div>
-        <button
-          v-for="entry in entries"
-          :key="entry.file"
-          class="dv-file w-full flex items-center gap-1.5 px-2 py-1.5 text-left cursor-pointer transition-colors"
-          :class="{ active: selectedFile === entry.file }"
-          @click="selectedFile = entry.file"
-        >
-          <span
-            class="text-[9px] font-bold rounded px-1 py-px shrink-0"
-            :style="statusBadge(entry.status).style"
-          >
-            {{ statusBadge(entry.status).label }}
-          </span>
-          <span class="text-[11px] font-mono truncate">{{ entry.file.split('/').pop() }}</span>
-          <span class="text-[9px] font-mono ml-auto shrink-0">
-            <span style="color: var(--color-success-fg)">+{{ entry.additions }}</span>
-            <span class="ml-0.5" style="color: var(--color-error-fg)">-{{ entry.deletions }}</span>
-          </span>
-        </button>
-      </div>
-
-      <!-- Diff content -->
-      <div class="flex-1 overflow-auto">
-        <div v-if="!selectedEntry" class="text-center text-[11px] py-8" style="color: var(--color-muted-foreground)">
-          {{ t('diff.selectFile') }}
-        </div>
-        <div v-else>
-          <div class="px-3 py-1.5" style="border-bottom: 1px solid var(--color-border); background: var(--color-muted)">
-            <span class="text-[11px] font-mono" style="color: var(--color-foreground)">{{ selectedEntry.file }}</span>
-            <span class="text-[10px] font-mono ml-2">
-              <span style="color: var(--color-success-fg)">+{{ selectedEntry.additions }}</span>
-              <span class="mx-0.5" style="color: var(--color-border)">/</span>
-              <span style="color: var(--color-error-fg)">-{{ selectedEntry.deletions }}</span>
-            </span>
-          </div>
-          <div class="font-mono text-[11px] leading-5">
-            <div
-              v-for="(line, i) in parsePatchLines(selectedEntry.patch)"
-              :key="i"
-              class="dv-line px-3 border-l-2"
-              :class="`dv-${line.type}`"
-            >
-              <pre class="whitespace-pre-wrap">{{ line.text }}</pre>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.dv-mode {
-  color: var(--color-muted-foreground);
-}
-.dv-mode:hover {
-  color: var(--color-foreground);
-  background: var(--color-muted);
-}
-.dv-mode.active {
-  background: var(--neutral-wash);
-  color: var(--color-accent-neutral);
-}
-
-.dv-mute {
-  color: var(--color-muted-foreground);
-}
-.dv-mute:hover {
-  color: var(--color-foreground);
-}
-
-.dv-file {
-  color: var(--color-muted-foreground);
-}
-.dv-file:hover {
-  background: var(--color-muted);
-}
-.dv-file.active {
-  background: var(--neutral-wash-soft);
-  color: var(--color-foreground);
-}
-
-.dv-line {
-  border-color: transparent;
-}
-.dv-add {
-  background: var(--color-success-bg);
-  border-color: var(--color-success-fg);
-  color: var(--color-success-fg);
-}
-.dv-del {
-  background: var(--color-error-bg);
-  border-color: var(--color-error-fg);
-  color: var(--color-error-fg);
-}
-.dv-hunk {
-  background: var(--color-info-bg);
-  border-color: var(--color-info-fg);
-  color: var(--color-info-fg);
-}
-.dv-ctx {
-  color: var(--color-muted-foreground);
-}
-</style>
diff --git a/web/src/components/FileTreePanel.vue b/web/src/components/FileTreePanel.vue
deleted file mode 100644
index 0635dbb4..00000000
--- a/web/src/components/FileTreePanel.vue
+++ /dev/null
@@ -1,319 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { ChevronRightIcon, DocumentIcon, FolderIcon, ArrowLeftIcon } from '@heroicons/vue/24/outline'
-import { useI18n } from 'vue-i18n'
-import { api } from '@/composables/api'
-import type { FileItem } from '@/types/api'
-import hljs from 'highlight.js'
-
-const { t } = useI18n()
-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
-    breadcrumbs.value = path ? path.split('/').filter(Boolean) : []
-  } catch (err) {
-    console.error('Failed to fetch files:', err)
-    items.value = []
-    dirError.value = t('fileTree.dirError')
-  } finally {
-    loading.value = false
-  }
-}
-
-async function openItem(item: FileItem) {
-  if (item.is_dir) {
-    const newPath = currentPath.value ? `${currentPath.value}/${item.name}` : item.name
-    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 = t('fileTree.fileError', { name: item.name })
-    }
-  }
-}
-
-function navigateTo(index: number) {
-  if (index < 0) {
-    previewFile.value = null
-    fetchDir('')
-  } else {
-    previewFile.value = null
-    const path = breadcrumbs.value.slice(0, index + 1).join('/')
-    fetchDir(path)
-  }
-}
-
-function goBack() {
-  if (previewFile.value) {
-    previewFile.value = null
-    return
-  }
-  if (breadcrumbs.value.length > 0) {
-    const parent = breadcrumbs.value.slice(0, -1).join('/')
-    fetchDir(parent)
-  }
-}
-
-function ext(path: string): string {
-  const parts = path.split('.')
-  return parts.length > 1 ? (parts[parts.length - 1] ?? '') : ''
-}
-
-function highlighted(content: string, path: string): string {
-  const language = ext(path)
-  if (language && hljs.getLanguage(language)) {
-    return hljs.highlight(content, { language }).value
-  }
-  return hljs.highlightAuto(content).value
-}
-
-function formatSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-}
-
-// 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>
-  <div class="file-tree-panel">
-    <!-- Breadcrumb / navigation -->
-    <div class="panel-nav">
-      <button
-        v-if="breadcrumbs.length > 0 || previewFile"
-        class="back-btn"
-        @click="goBack"
-      >
-        <ArrowLeftIcon class="w-3.5 h-3.5" />
-      </button>
-      <div class="breadcrumb">
-        <button class="crumb" @click="navigateTo(-1)">{{ t('fileTree.root') }}</button>
-        <template v-for="(seg, i) in breadcrumbs" :key="i">
-          <ChevronRightIcon class="w-2.5 h-2.5 crumb-sep" />
-          <button class="crumb" @click="navigateTo(i)">{{ seg }}</button>
-        </template>
-        <template v-if="previewFile">
-          <ChevronRightIcon class="w-2.5 h-2.5 crumb-sep" />
-          <span class="crumb current">{{ previewFile.path.split('/').pop() }}</span>
-        </template>
-      </div>
-    </div>
-
-    <!-- File preview -->
-    <div v-if="previewFile" class="file-preview">
-      <pre class="preview-code"><code class="hljs" v-html="highlighted(previewFile.content, previewFile.path)" /></pre>
-    </div>
-
-    <!-- Directory listing -->
-    <div v-else class="file-list">
-      <div v-if="loading" class="loading-state">{{ t('fileTree.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"
-          class="file-item"
-          @click="openItem(item)"
-        >
-          <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>
-        <div v-if="items.length === 0" class="empty-state">
-          {{ t('fileTree.empty') }}
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.file-tree-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.panel-nav {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--color-border);
-  min-height: 36px;
-}
-
-.back-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-sm);
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  flex-shrink: 0;
-}
-
-.back-btn:hover {
-  background: var(--color-muted);
-  color: var(--color-foreground);
-}
-
-.breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  overflow: hidden;
-  flex: 1;
-}
-
-.crumb {
-  font-size: 11px;
-  color: var(--color-muted-foreground);
-  background: transparent;
-  border: none;
-  padding: 2px 4px;
-  border-radius: var(--radius-xs);
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.crumb:hover {
-  color: var(--color-foreground);
-  background: var(--color-muted);
-}
-
-.crumb.current {
-  color: var(--color-foreground);
-  cursor: default;
-}
-
-.crumb-sep {
-  color: var(--color-muted-foreground);
-  opacity: 0.5;
-  flex-shrink: 0;
-}
-
-.file-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 4px 0;
-}
-
-.file-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 6px 12px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
-  transition: background 0.1s;
-}
-
-.file-item:hover {
-  background: var(--color-muted);
-}
-
-.item-icon {
-  flex-shrink: 0;
-}
-
-.item-icon.folder {
-  color: var(--color-accent-neutral);
-}
-
-.item-icon.file {
-  color: var(--color-muted-foreground);
-}
-
-.item-name {
-  font-size: 12px;
-  color: var(--color-foreground);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-}
-
-.item-size {
-  font-size: 10px;
-  color: var(--color-muted-foreground);
-  font-family: var(--font-mono);
-  flex-shrink: 0;
-}
-
-.file-preview {
-  flex: 1;
-  overflow: auto;
-  padding: 12px;
-}
-
-.preview-code {
-  font-size: 11px;
-  line-height: 1.6;
-  font-family: var(--font-mono);
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.loading-state,
-.empty-state {
-  padding: 24px 12px;
-  text-align: center;
-  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.tsx b/web/src/components/GoalBanner.tsx
new file mode 100644
index 00000000..6caf0c73
--- /dev/null
+++ b/web/src/components/GoalBanner.tsx
@@ -0,0 +1,88 @@
+/**
+ * GoalBanner — active goal display (set via /goal or the Goal toggle).
+ * Ported from web/src/components/GoalBanner.vue: a rounded inset card with
+ * Bolt/status tint, status label, objective, and clear button — not a full-width
+ * border-b strip.
+ */
+
+import { BoltIcon } from '@heroicons/react/24/outline'
+import { useTranslation } from 'react-i18next'
+import { useAppDispatch, useAppSelector } from '../app/hooks'
+import { chatActions } from '../app/store'
+import { api } from '../lib/api'
+
+export function GoalBanner() {
+  const { t } = useTranslation()
+  const dispatch = useAppDispatch()
+  const goal = useAppSelector((s) => s.chat.goal)
+  if (!goal) return null
+
+  const statusColor =
+    goal.status === 'complete'
+      ? 'var(--color-success-fg)'
+      : goal.status === 'blocked'
+        ? 'var(--color-destructive, var(--color-error-fg))'
+        : 'var(--color-accent-neutral)'
+
+  const statusLabel =
+    goal.status === 'active'
+      ? t('goal.status.active')
+      : goal.status === 'complete'
+        ? t('goal.status.completed')
+        : goal.status === 'blocked'
+          ? t('goal.status.blocked')
+          : String(goal.status || '').replace(/_/g, ' ')
+
+  const used = goal.tokens_used ?? 0
+  const tokensLabel =
+    used <= 0
+      ? ''
+      : used < 1000
+        ? t('goal.tokens', { used })
+        : t('goal.tokensK', { k: (used / 1000).toFixed(1) })
+
+  async function clear() {
+    try {
+      await api.clearGoal()
+    } catch {
+      // still clear local so the banner dismisses
+    }
+    dispatch(chatActions.setGoal(null))
+  }
+
+  return (
+    <div
+      className="mt-2 flex items-start gap-2 rounded-md border px-3 py-2"
+      style={{ borderColor: 'var(--color-border)', backgroundColor: 'var(--color-secondary)' }}
+    >
+      <BoltIcon className="mt-0.5 h-3.5 w-3.5 shrink-0" style={{ color: statusColor }} />
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <span
+            className="text-[10px] font-semibold uppercase tracking-wide"
+            style={{ color: statusColor }}
+          >
+            {statusLabel}
+          </span>
+          {tokensLabel && (
+            <span className="text-[10px]" style={{ color: 'var(--color-muted-foreground)' }}>
+              {tokensLabel}
+            </span>
+          )}
+        </div>
+        <div className="mt-0.5 break-words text-xs" style={{ color: 'var(--color-foreground)' }}>
+          {goal.objective}
+        </div>
+      </div>
+      <button
+        type="button"
+        className="goal-clear shrink-0 cursor-pointer rounded px-2 py-1 text-[10px] transition-colors hover:bg-[var(--color-muted)] hover:text-[var(--color-foreground)]"
+        style={{ backgroundColor: 'var(--color-background)', color: 'var(--color-muted-foreground)' }}
+        title={t('goal.clearGoal')}
+        onClick={() => void clear()}
+      >
+        {t('goal.clear')}
+      </button>
+    </div>
+  )
+}
diff --git a/web/src/components/GoalBanner.vue b/web/src/components/GoalBanner.vue
deleted file mode 100644
index a9ddc8e1..00000000
--- a/web/src/components/GoalBanner.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { BoltIcon } from '@heroicons/vue/24/outline'
-import { useI18n } from 'vue-i18n'
-import { useChatStore } from '@/stores/chat'
-
-const store = useChatStore()
-const { t } = useI18n()
-
-const goal = computed(() => store.goal)
-
-const statusColor = computed(() => {
-  switch (goal.value?.status) {
-    case 'complete':
-      return 'var(--color-success-fg)'
-    case 'blocked':
-      return 'var(--color-destructive)'
-    default:
-      return 'var(--color-accent-neutral)'
-  }
-})
-
-// Human-readable status — maps the GoalStatus enum ('active' | 'complete' |
-// 'blocked') to localized labels. Falls back to a de-underscored form for any
-// unmapped value.
-const statusLabel = computed(() => {
-  const s = goal.value?.status || ''
-  switch (s) {
-    case 'active':
-      return t('goal.status.active')
-    case 'complete':
-      return t('goal.status.completed')
-    case 'blocked':
-      return t('goal.status.blocked')
-    default:
-      return s.replace(/_/g, ' ')
-  }
-})
-
-const tokensLabel = computed(() => {
-  if (!goal.value) return ''
-  const used = goal.value.tokens_used ?? 0
-  if (used <= 0) return ''
-  return used < 1000
-    ? t('goal.tokens', { used })
-    : t('goal.tokensK', { k: (used / 1000).toFixed(1) })
-})
-</script>
-
-<template>
-  <!-- Active goal display. Goals are set from the prompt box (Goal toggle
-       in the input toolbar, or the /goal command). -->
-  <div
-    v-if="goal"
-    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)' }"
-  >
-    <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 }">
-          {{ statusLabel }}
-        </span>
-        <span v-if="tokensLabel" class="text-[10px]" style="color: var(--color-muted-foreground)">
-          {{ tokensLabel }}
-        </span>
-      </div>
-      <div class="text-xs mt-0.5 break-words" style="color: var(--color-foreground)">
-        {{ goal.objective }}
-      </div>
-    </div>
-    <button
-      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="t('goal.clearGoal')"
-      @click="store.clearGoal()"
-    >
-      {{ t('goal.clear') }}
-    </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/MenuSelect.vue b/web/src/components/MenuSelect.vue
deleted file mode 100644
index c8f7b4cb..00000000
--- a/web/src/components/MenuSelect.vue
+++ /dev/null
@@ -1,313 +0,0 @@
-<script setup lang="ts">
-// A compact headless single-select built on HeadlessUI's Popover.
-//
-// Why Popover and not Listbox? MenuSelect is used inside the automation editor
-// <Dialog>. A Listbox's value-driven auto-close fights the dialog: selecting an
-// option updates :model-value, which re-renders the panel mid-open, and the
-// Listbox then fails to dismiss (it flickers and stays open). The Popover hands
-// us an explicit `close` slot callback, so a click dismisses the panel
-// deterministically — the same reason ProjectPickerPanel uses a Popover. This
-// used to be a Listbox; switching here fixes "select item doesn't close".
-//
-// Keyboard parity with the old Listbox is kept manually: ArrowUp/Down move the
-// highlighted option, Home/End jump to the ends, Enter selects, Esc closes, and
-// typing the first letter of an option jumps to it (type-ahead).
-//
-// Designed for small, known option sets (trigger cadence, weekday, hour, mode,
-// run filter). Values are emitted verbatim (numbers stay numbers via
-// v-model.number).
-import { ref, computed } from 'vue'
-import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
-import { ChevronUpDownIcon, CheckIcon } from '@heroicons/vue/24/outline'
-
-export interface MenuSelectOption<V extends string | number = string | number> {
-  value: V
-  label: string
-}
-
-const props = withDefaults(defineProps<{
-  modelValue: string | number
-  options: MenuSelectOption[]
-  // Which way the panel opens relative to the trigger. Pickers near the bottom
-  // of a viewport (e.g. inside a dialog) open upward.
-  placement?: 'top' | 'bottom'
-  // Optional accessible label / title for the trigger button.
-  title?: string
-  // Match the field-input width of sibling inputs inside a form row.
-  block?: boolean
-}>(), {
-  placement: 'bottom',
-  title: undefined,
-  block: false,
-})
-
-const emit = defineEmits<{ (e: 'update:modelValue', value: typeof props.modelValue): void }>()
-
-// Display text for the trigger = the selected option's label (falls back to the
-// raw value so a transient/out-of-range model never blanks the control).
-const selectedLabel = computed(() => {
-  const hit = props.options.find((o) => o.value === props.modelValue)
-  return hit ? hit.label : String(props.modelValue)
-})
-
-// ── Keyboard navigation (replaces what Listbox gave us for free) ──
-// `activeIndex` is the highlighted option; -1 means nothing highlighted. It is
-// reset every time the panel opens (afterOpen) so a stale highlight from a
-// previous open never lands on the wrong row.
-const activeIndex = ref(-1)
-const optionRefs = ref<Array<HTMLLIElement | null>>([])
-
-function selectedIndex(): number {
-  return props.options.findIndex((o) => o.value === props.modelValue)
-}
-
-function clamp(i: number): number {
-  if (!props.options.length) return -1
-  return (i + props.options.length) % props.options.length
-}
-
-function move(delta: number) {
-  if (!props.options.length) return
-  const start = activeIndex.value >= 0 ? activeIndex.value : (delta > 0 ? -1 : 0)
-  activeIndex.value = clamp(start + delta)
-  scrollActiveIntoView()
-}
-
-function jumpTo(edge: 'home' | 'end') {
-  if (!props.options.length) return
-  activeIndex.value = edge === 'home' ? 0 : props.options.length - 1
-  scrollActiveIntoView()
-}
-
-function choose(i: number, close: () => void) {
-  const opt = props.options[i]
-  if (opt) emit('update:modelValue', opt.value)
-  close()
-}
-
-function scrollActiveIntoView() {
-  const el = optionRefs.value[activeIndex.value]
-  el?.scrollIntoView({ block: 'nearest' })
-}
-
-// Type-ahead: jump to the first option whose label starts with the typed key
-// (case-insensitive). Matches the Listbox feel for small option sets.
-function typeAhead(key: string, close: () => void) {
-  if (!props.options.length) return
-  const lower = key.toLowerCase()
-  const from = activeIndex.value >= 0 ? activeIndex.value + 1 : 0
-  let hit = -1
-  for (let i = 0; i < props.options.length; i++) {
-    const idx = (from + i) % props.options.length
-    const opt = props.options[idx]
-    if (opt && opt.label.toLowerCase().startsWith(lower)) { hit = idx; break }
-  }
-  if (hit >= 0) activeIndex.value = hit
-  // Space/Enter on a type-ahead hit selects; a printable char only moves focus.
-  if (key === 'Enter' && activeIndex.value >= 0) choose(activeIndex.value, close)
-}
-
-// `afterOpen` is wired to the transition's @before-enter so the highlight is
-// seeded exactly when the panel appears — keeping it in a headless-slot scope
-// would be cleaner, but HeadlessUI's Popover doesn't expose a lifecycle hook,
-// so the transition hook is the reliable anchor.
-function afterOpen() {
-  const i = selectedIndex()
-  activeIndex.value = i >= 0 ? i : (props.options.length ? 0 : -1)
-  optionRefs.value = []
-}
-
-function onKeydown(e: KeyboardEvent, close: () => void) {
-  switch (e.key) {
-    case 'ArrowDown': e.preventDefault(); move(1); break
-    case 'ArrowUp': e.preventDefault(); move(-1); break
-    case 'Home': e.preventDefault(); jumpTo('home'); break
-    case 'End': e.preventDefault(); jumpTo('end'); break
-    case 'Enter': e.preventDefault(); if (activeIndex.value >= 0) choose(activeIndex.value, close); break
-    case 'Escape': e.preventDefault(); close(); break
-    case 'Tab': close(); break
-    default:
-      if (e.key.length === 1 && /\S/.test(e.key)) { e.preventDefault(); typeAhead(e.key, close) }
-  }
-}
-</script>
-
-<template>
-  <!-- Inline position:relative on the root — headlessui's component root doesn't
-       receive the SFC scoped attribute, so the absolute options panel needs an
-       anchor. A Popover (not a Listbox) drives the dropdown so we control
-       dismissal explicitly via the `close` slot callback. -->
-  <Popover class="ms-root" :class="{ block }" style="position: relative">
-    <PopoverButton as="template">
-      <button
-        type="button"
-        class="ms-trigger"
-        :class="{ block }"
-        :title="title"
-      >
-        <span class="ms-value">{{ selectedLabel }}</span>
-        <ChevronUpDownIcon class="w-4 h-4 ms-caret" />
-      </button>
-    </PopoverButton>
-
-    <transition
-      enter-active-class="pop-enter-active"
-      enter-from-class="pop-enter-from"
-      leave-active-class="pop-leave-active"
-      leave-to-class="pop-leave-to"
-      @before-enter="afterOpen"
-    >
-      <PopoverPanel
-        v-slot="{ close }"
-        class="ms-panel"
-        :class="placement === 'top' ? 'place-top' : 'place-bottom'"
-      >
-        <!-- keydown is captured on the panel so it works whether the panel or a
-             child has focus; HeadlessUI keeps focus on the trigger after open,
-             so we also let key events bubble from the PopoverButton. -->
-        <ul role="listbox" @keydown="(e) => onKeydown(e, close)">
-          <li
-            v-for="(opt, i) in options"
-            :key="opt.value"
-            ref="optionRefs"
-            role="option"
-            :aria-selected="opt.value === modelValue"
-            class="ms-option"
-            :class="{ focus: i === activeIndex, selected: opt.value === modelValue }"
-            @click="choose(i, close)"
-            @mousemove="activeIndex = i"
-          >
-            <span class="ms-opt-label">{{ opt.label }}</span>
-            <CheckIcon v-if="opt.value === modelValue" class="w-3.5 h-3.5 ms-check" />
-          </li>
-        </ul>
-      </PopoverPanel>
-    </transition>
-  </Popover>
-</template>
-
-<style scoped>
-.ms-root {
-  display: inline-flex;
-  min-width: 0;
-}
-.ms-root.block {
-  display: flex;
-  width: 100%;
-}
-
-.ms-trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 6px;
-  width: auto;
-  min-width: 0;
-  height: 32px;
-  padding: 0 9px;
-  font-size: 13px;
-  color: var(--color-foreground);
-  background: var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  outline: none;
-  cursor: pointer;
-  transition: border-color 0.15s;
-}
-.ms-trigger.block {
-  width: 100%;
-}
-.ms-trigger:hover {
-  border-color: color-mix(in srgb, var(--color-foreground) 32%, var(--color-border));
-}
-.ms-trigger:focus-visible {
-  border-color: var(--color-primary);
-}
-.ms-value {
-  flex: 1;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-align: left;
-}
-.ms-caret {
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-  opacity: 0.75;
-}
-
-.ms-panel {
-  position: absolute;
-  left: 0;
-  z-index: var(--z-dropdown, 40);
-  min-width: 100%;
-  max-height: min(60vh, 320px);
-  overflow-y: auto;
-  margin: 0;
-  padding: 4px;
-  list-style: none;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-md);
-  outline: none;
-}
-.ms-panel.place-top {
-  bottom: calc(100% + 6px);
-}
-.ms-panel.place-bottom {
-  top: calc(100% + 4px);
-}
-
-.ms-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 9px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  color: var(--color-foreground);
-  font-size: 13px;
-  text-align: left;
-  cursor: pointer;
-  transition: background 0.12s;
-}
-/* `focus` = the keyboard-highlighted option (replaces HeadlessUI Listbox's
-   `active` slot prop). */
-.ms-option.focus {
-  background: var(--color-muted);
-}
-/* `selected` = the currently chosen value. */
-.ms-option.selected {
-  color: var(--color-accent-neutral);
-}
-.ms-opt-label {
-  flex: 1;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ms-check {
-  color: var(--color-accent-neutral);
-  flex-shrink: 0;
-}
-
-.pop-enter-active,
-.pop-leave-active {
-  transition: opacity 0.12s ease, transform 0.12s ease;
-}
-.pop-enter-from,
-.pop-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-.ms-panel.place-top.pop-enter-from,
-.ms-panel.place-top.pop-leave-to {
-  transform: translateY(4px);
-}
-</style>
diff --git a/web/src/components/ModelEditDialog.vue b/web/src/components/ModelEditDialog.vue
deleted file mode 100644
index 17e67a83..00000000
--- a/web/src/components/ModelEditDialog.vue
+++ /dev/null
@@ -1,384 +0,0 @@
-<script setup lang="ts">
-// ModelEditDialog — a modal for adding or editing a single custom model on a
-// provider. Separated from ProviderEditDialog (which only covers the connection)
-// so model authoring has its own focused window.
-//
-// In add mode (model = null) all fields start blank; in edit mode they're seeded
-// from the model being edited. On save the dialog emits 'save' with the model
-// fields; the parent persists it by rebuilding the provider's custom_models.
-import { ref, watch, computed, nextTick } from 'vue'
-import { XMarkIcon } from '@heroicons/vue/24/outline'
-import { useI18n } from 'vue-i18n'
-import type { CustomModelDetail } from '@/types/api'
-
-const props = defineProps<{
-  open: boolean
-  providerId: string
-  // null = add mode; a model = edit mode (seeded from it).
-  model: CustomModelDetail | null
-  // Validation error set by the parent (e.g. duplicate-id conflict against an
-  // existing or built-in model). Shown in place of the local required-field error.
-  serverError?: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'close'): void
-  (e: 'save', model: { id: string; name?: string; reasoning: boolean; context: number; attachment: boolean; effortTiers: string[]; isEdit: boolean; originalId?: string }): void
-  // Clear a parent-set server error when the user edits the conflicting field.
-  (e: 'clear-error'): void
-}>()
-
-const { t } = useI18n()
-
-interface Draft {
-  id: string
-  name: string
-  reasoning: boolean
-  context: number
-  attachment: boolean
-  effortTiers: string[]
-}
-
-const draft = ref<Draft>({ id: '', name: '', reasoning: false, context: 0, attachment: false, effortTiers: [] })
-const error = ref('')
-const saving = ref(false)
-
-// Inline tier-add input state.
-const tierInputOpen = ref(false)
-const tierInputValue = ref('')
-const tierInputRef = ref<HTMLInputElement | null>(null)
-
-const DEFAULT_TIERS = ['minimal', 'low', 'medium', 'high']
-const isEdit = computed(() => !!props.model)
-
-watch(() => props.open, (isOpen) => {
-  if (!isOpen) return
-  error.value = ''
-  if (props.model) {
-    draft.value = {
-      id: props.model.id,
-      name: props.model.name ?? '',
-      reasoning: !!props.model.reasoning,
-      context: props.model.context ?? 0,
-      attachment: !!props.model.attachment,
-      effortTiers: props.model.effort_tiers ? [...props.model.effort_tiers] : [],
-    }
-  } else {
-    draft.value = { id: '', name: '', reasoning: false, context: 0, attachment: false, effortTiers: [] }
-  }
-})
-
-function onReasoningToggle() {
-  if (draft.value.reasoning && draft.value.effortTiers.length === 0) {
-    draft.value.effortTiers = [...DEFAULT_TIERS]
-  }
-  if (!draft.value.reasoning) {
-    draft.value.effortTiers = []
-  }
-}
-
-function removeTier(tier: string) {
-  const i = draft.value.effortTiers.indexOf(tier)
-  if (i >= 0) draft.value.effortTiers.splice(i, 1)
-}
-
-async function openTierInput() {
-  tierInputOpen.value = true
-  tierInputValue.value = ''
-  await nextTick()
-  tierInputRef.value?.focus()
-}
-
-function commitTier() {
-  const v = tierInputValue.value.trim()
-  if (v && !draft.value.effortTiers.includes(v)) draft.value.effortTiers.push(v)
-  tierInputOpen.value = false
-  tierInputValue.value = ''
-}
-
-function save() {
-  const id = draft.value.id.trim()
-  if (!id) {
-    error.value = t('settings.providers.customIdRequired')
-    return
-  }
-  saving.value = true
-  emit('save', {
-    id,
-    name: draft.value.name.trim() || undefined,
-    reasoning: draft.value.reasoning,
-    context: draft.value.context || 0,
-    attachment: draft.value.attachment,
-    effortTiers: draft.value.reasoning ? [...draft.value.effortTiers] : [],
-    isEdit: isEdit.value,
-    originalId: isEdit.value ? props.model?.id : undefined,
-  })
-  saving.value = false
-}
-</script>
-
-<template>
-  <transition
-    enter-active-class="transition-opacity duration-150"
-    enter-from-class="opacity-0"
-    leave-active-class="transition-opacity duration-100"
-    leave-to-class="opacity-0"
-  >
-    <div v-if="open" class="mdl-overlay" @click.self="emit('close')">
-      <div class="mdl" role="dialog" aria-modal="true">
-        <header class="mdl-head">
-          <h2>{{ isEdit ? t('settings.providers.editModel') : t('settings.providers.addModel') }}</h2>
-          <button class="icon-btn" :aria-label="t('common.close')" @click="emit('close')"><XMarkIcon class="w-5 h-5" /></button>
-        </header>
-
-        <div class="mdl-body">
-          <label class="s-field">
-            <span class="s-label">Model ID <span style="color: var(--color-destructive)">*</span></span>
-            <input v-model="draft.id" type="text" class="s-input mono" :placeholder="t('settings.providers.customModelPlaceholder')" @input="emit('clear-error')" />
-          </label>
-          <label class="s-field">
-            <span class="s-label">{{ t('settings.providers.customModelNamePlaceholder') }}</span>
-            <input v-model="draft.name" type="text" class="s-input" />
-          </label>
-          <label class="s-field">
-            <span class="s-label">{{ t('settings.providers.contextWindow') }}</span>
-            <input v-model.number="draft.context" type="number" min="0" class="s-input mono" :placeholder="t('settings.providers.contextPlaceholder')" />
-          </label>
-
-          <!-- Capability toggles -->
-          <div class="mdl-toggle">
-            <div>
-              <div class="text-[12px] font-medium">{{ t('settings.providers.supportImage') }}</div>
-              <div class="text-[10.5px]" style="color: var(--color-muted-foreground)">{{ t('settings.providers.supportImageDesc') }}</div>
-            </div>
-            <button class="s-switch" :data-on="draft.attachment ? 'true' : 'false'" :aria-pressed="draft.attachment" @click="draft.attachment = !draft.attachment" />
-          </div>
-          <div class="mdl-toggle">
-            <div>
-              <div class="text-[12px] font-medium">{{ t('settings.providers.supportReasoning') }}</div>
-              <div class="text-[10.5px]" style="color: var(--color-muted-foreground)">{{ t('settings.providers.supportReasoningDesc') }}</div>
-            </div>
-            <button class="s-switch" :data-on="draft.reasoning ? 'true' : 'false'" :aria-pressed="draft.reasoning" @click="draft.reasoning = !draft.reasoning; onReasoningToggle()" />
-          </div>
-
-          <!-- Effort-tier editor -->
-          <div v-if="draft.reasoning" class="s-field">
-            <span class="s-label">{{ t('settings.providers.effortTiers') }}</span>
-            <div class="p-tiers">
-              <span v-for="tier in draft.effortTiers" :key="tier" class="p-tier">
-                {{ tier }}
-                <button class="p-tier-x" :aria-label="t('common.remove')" @click="removeTier(tier)"><XMarkIcon class="w-2.5 h-2.5" /></button>
-              </span>
-              <span v-if="tierInputOpen" class="p-tier-input-wrap">
-                <input
-                  ref="tierInputRef"
-                  v-model="tierInputValue"
-                  type="text"
-                  class="p-tier-input"
-                  :placeholder="t('settings.providers.newTierPlaceholder')"
-                  @keydown.enter.prevent="commitTier"
-                  @keydown.esc="tierInputOpen = false"
-                  @blur="commitTier"
-                />
-              </span>
-              <button v-else class="p-tier-add" @click="openTierInput">+ {{ t('settings.providers.addTier') }}</button>
-            </div>
-            <span class="s-helper">{{ t('settings.providers.effortTiersHint') }}</span>
-          </div>
-
-          <div v-if="serverError || error" class="s-error">{{ serverError || error }}</div>
-
-          <div class="mdl-actions">
-            <button class="s-btn s-btn-ghost s-btn-sm" @click="emit('close')">{{ t('common.cancel') }}</button>
-            <button class="s-btn s-btn-primary s-btn-sm" :disabled="!draft.id.trim() || saving" @click="save">
-              {{ saving ? t('settings.providers.saving') : isEdit ? t('common.save') : t('common.add') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<style scoped>
-.mdl-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: calc(var(--z-modal) + 10);
-  background: var(--backdrop);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-}
-.mdl {
-  width: 100%;
-  max-width: 440px;
-  max-height: 85vh;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-lg);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.mdl-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--color-border);
-}
-.mdl-head h2 {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--color-foreground);
-  margin: 0;
-}
-.icon-btn {
-  width: 30px;
-  height: 30px;
-  display: grid;
-  place-items: center;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-}
-.icon-btn:hover { background: var(--color-secondary); color: var(--color-foreground); }
-.mdl-body {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-.s-field { display: flex; flex-direction: column; }
-.s-label { font-size: 11px; font-weight: 500; color: var(--color-foreground); margin-bottom: 5px; }
-.s-helper { font-size: 11px; line-height: 1.45; color: var(--color-muted-foreground); margin-top: 5px; }
-.s-error { font-size: 11px; line-height: 1.45; color: var(--color-destructive); }
-.s-input {
-  width: 100%;
-  height: 32px;
-  padding: 0 10px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  color: var(--color-foreground);
-  font-size: 12px;
-  font-family: var(--font-sans);
-  outline: none;
-  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
-}
-.s-input::placeholder { color: var(--color-muted-foreground); opacity: 0.7; }
-.s-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--accent-wash-soft); }
-.s-input.mono { font-family: var(--font-mono); }
-.mdl-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; }
-.s-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 32px;
-  padding: 0 12px;
-  border-radius: var(--radius-md);
-  font-size: 12px;
-  font-weight: 500;
-  font-family: var(--font-sans);
-  cursor: pointer;
-  border: 1px solid transparent;
-  white-space: nowrap;
-}
-.s-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-.s-btn-primary { background: var(--color-foreground); color: var(--color-surface); }
-.s-btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--color-foreground) 85%, transparent); }
-.s-btn-ghost { background: transparent; color: var(--color-foreground); }
-.s-btn-ghost:hover:not(:disabled) { background: var(--color-secondary); }
-.s-btn-sm { height: 28px; padding: 0 10px; font-size: 11.5px; border-radius: var(--radius-sm); }
-.s-switch {
-  position: relative;
-  display: inline-block;
-  width: 34px;
-  height: 20px;
-  flex-shrink: 0;
-  background: var(--color-border);
-  border-radius: var(--radius-pill);
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  transition: background var(--duration-fast);
-}
-.s-switch[data-on='true'] { background: var(--color-accent-neutral); }
-.s-switch::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: var(--color-surface);
-  box-shadow: var(--shadow-sm);
-  transition: transform var(--duration-fast) var(--ease-out);
-}
-.s-switch[data-on='true']::after { transform: translateX(14px); }
-
-/* Tier editor */
-.p-tiers { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
-.p-tier {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  height: 24px;
-  padding: 0 4px 0 9px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-pill);
-  font-size: 11px;
-  font-family: var(--font-mono);
-  color: var(--color-foreground);
-}
-.p-tier-x {
-  width: 16px;
-  height: 16px;
-  display: grid;
-  place-items: center;
-  border: none;
-  background: none;
-  border-radius: 50%;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-}
-.p-tier-x:hover { background: var(--color-error-bg); color: var(--color-error-fg); }
-.p-tier-add {
-  height: 24px;
-  padding: 0 10px;
-  background: transparent;
-  border: 1px dashed var(--color-border);
-  border-radius: var(--radius-pill);
-  font-size: 11px;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-}
-.p-tier-add:hover { border-color: var(--color-border-active); color: var(--color-foreground); }
-.p-tier-input-wrap { display: inline-flex; align-items: center; }
-.p-tier-input {
-  height: 24px;
-  padding: 0 10px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border-active);
-  border-radius: var(--radius-pill);
-  font-size: 11px;
-  font-family: var(--font-mono);
-  color: var(--color-foreground);
-  outline: none;
-  width: 96px;
-}
-.p-tier-input:focus { box-shadow: 0 0 0 3px var(--accent-wash-soft); }
-
-.mdl-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; }
-</style>
diff --git a/web/src/components/PageSurface.vue b/web/src/components/PageSurface.vue
deleted file mode 100644
index b18aebe7..00000000
--- a/web/src/components/PageSurface.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<script setup lang="ts">
-// Shared page surface for secondary pages (Automations, Channels) that render
-// inside <main> as a wrapped inset panel — the same surface geometry the chat
-// canvas uses (border / radius / margin / shadow), so the page reads as a panel
-// within the shell (包裹感) rather than a full-bleed overlay.
-//
-// Centralizing the chrome here removes the duplicate .auto-panel / .chan-panel
-// copies that had drifted out of sync. Each page supplies a title and optional
-// #actions (e.g. the Automations segmented control + primary button); the
-// surface owns no close button — page dismissal is via Esc / the nav header /
-// clicking a task, not an in-page X.
-// colWidth lets each page set its own content-column width (e.g. 48rem for
-// Automations, 56rem for Channels). The head aligns to the same column so the
-// title + actions line up with the body content rather than hugging the panel
-// edges. Exposed as the --page-col custom property below.
-defineProps<{ title: string; colWidth?: string }>()
-</script>
-
-<template>
-  <div class="page-surface" :style="colWidth ? { '--page-col': colWidth } : undefined">
-    <header class="page-head">
-      <h1>{{ title }}</h1>
-      <div v-if="$slots.actions" class="page-actions">
-        <slot name="actions" />
-      </div>
-    </header>
-    <div class="page-body">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.page-surface {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-2xl);
-  /* Mirrors .chat-panel's margin so secondary pages align with the chat canvas.
-     The macOS Tauri override (style.css) collapses the top to 20px since the
-     28px title-bar strip already provides clearance. */
-  margin: 48px 14px 14px;
-  box-shadow: var(--shadow-sm);
-  overflow: hidden;
-  color: var(--color-foreground);
-}
-.page-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  /* Collapse the head into the same centered column as the body content
-     (:deep(.page-body) > * in each page) so the title + actions align with the
-     cards/runs below instead of stretching to the panel edges. */
-  width: 100%;
-  max-width: var(--page-col, 48rem);
-  margin-inline: auto;
-  padding: 16px 20px 12px;
-  flex-shrink: 0;
-}
-.page-head h1 {
-  font-size: 17px;
-  font-weight: 600;
-}
-.page-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.page-body {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  /* Flex column so a page's empty-state can fill the body height and centre its
-     hero vertically (see .col.center-empty in AutomationsView). Pages with real
-     content still stack from the top since their children default to auto. */
-  display: flex;
-  flex-direction: column;
-}
-</style>
diff --git a/web-react/src/components/ProjectHeader.tsx b/web/src/components/ProjectHeader.tsx
similarity index 100%
rename from web-react/src/components/ProjectHeader.tsx
rename to web/src/components/ProjectHeader.tsx
diff --git a/web/src/components/ProjectPickerPanel.vue b/web/src/components/ProjectPickerPanel.vue
deleted file mode 100644
index a8fc4332..00000000
--- a/web/src/components/ProjectPickerPanel.vue
+++ /dev/null
@@ -1,537 +0,0 @@
-<script setup lang="ts">
-// The automation editor's project field. Built on HeadlessUI's Popover (with a
-// manual `close()` callback on each row), NOT the Listbox — the Listbox's
-// auto-close-on-select fought the dialog: changing `:model-value` mid-open
-// re-rendered the panel and it would flicker then refuse to dismiss. The Popover
-// pattern (the same one WorkspacePicker uses) hands us an explicit `close`, so a
-// selection closes the panel deterministically. The trigger still reads as a
-// bordered form control that matches the MenuSelect fields beside it.
-//
-// Emits a project PATH string (v-model:modelValue). Unlike WorkspacePicker it
-// never *switches* the active workspace — it only records the path the automation
-// will run in — so it deliberately does not call openProject.
-//
-// "Open folder…" uses the native OS picker on desktop; in the browser build it
-// falls back to a small in-app folder browser anchored under the field.
-import { computed } from 'vue'
-import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
-import {
-  FolderIcon,
-  FolderOpenIcon,
-  CheckIcon,
-  PlusIcon,
-  ServerIcon,
-  ChevronUpDownIcon,
-  ArrowLeftIcon,
-} from '@heroicons/vue/24/outline'
-import { useProjectStore, isRemotePath } from '@/stores/project'
-import { useFolderBrowser } from '@/composables/useFolderBrowser'
-import { isTauri, pickFolder } from '@/composables/useDesktop'
-import { useI18n } from 'vue-i18n'
-
-const props = defineProps<{
-  modelValue: string
-  // Which way the dropdown opens. The automation dialog sits mid-viewport, so it
-  // passes 'top' to open upward.
-  placement?: 'top' | 'bottom'
-  error?: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-}>()
-
-const projectStore = useProjectStore()
-const { t } = useI18n()
-
-// Show the full project path (not just its last segment) so same-named folders
-// are distinguishable. When the path is long we collapse the middle — the
-// leading and trailing segments are the most identifiable parts, and the
-// uncut path is always reachable via the trigger's title tooltip.
-const selectedLabel = computed(() => {
-  const p = props.modelValue
-  if (!p) return t('projectSwitcher.pathPlaceholder')
-  return collapsePathMiddle(p)
-})
-
-// collapsePathMiddle trims a long path to ~max chars by hiding the middle,
-// keeping a bit more of the tail (it ends in the project name, the highest-
-// signal segment). A single … marks the cut.
-function collapsePathMiddle(path: string, max = 44): string {
-  if (path.length <= max) return path
-  const budget = max - 1 // leave room for the ellipsis
-  const head = Math.floor(budget * 0.42)
-  const tail = budget - head
-  return path.slice(0, head) + '…' + path.slice(path.length - tail)
-}
-
-const selectedIsRemote = computed(() => isRemotePath(props.modelValue))
-
-// Known projects, minus local folders that no longer exist on disk (selecting
-// one would only surface "path does not exist"). Remote (ssh://) labels are
-// never validated locally, so they always stay listed.
-const workspaces = computed(() =>
-  projectStore.projectsForTree.filter(
-    (n) => isRemotePath(n.path) || !projectStore.missingPaths.has(n.path),
-  ),
-)
-
-// ─── Folder browser sub-view (shared logic, see useFolderBrowser) ───
-const {
-  showBrowser,
-  browsePath,
-  browseFolders,
-  browseLoading,
-  pathInput,
-  loadFolders,
-  openBrowser,
-  goUp,
-  handlePathSubmit,
-  resetBrowser,
-} = useFolderBrowser()
-
-// Pick a workspace row: record the path and close the panel. `close` is the
-// PopoverPanel slot callback — calling it dismisses the dropdown immediately,
-// which is the fix for the old Listbox's flicker/no-dismiss behaviour.
-function pickWorkspace(path: string, close: () => void) {
-  if (path && path !== props.modelValue) emit('update:modelValue', path)
-  close()
-}
-
-// "Open folder": native OS picker on desktop, in-app browser otherwise. Kept
-// open (no close()) because the browser sub-view replaces the list in place.
-async function openFolderAction(close?: () => void) {
-  if (isTauri) {
-    try {
-      const path = await pickFolder(props.modelValue || undefined)
-      if (path && path !== props.modelValue) emit('update:modelValue', path)
-      close?.()
-      return
-    } catch {
-      openBrowser()
-    }
-    return
-  }
-  openBrowser()
-}
-
-function pickPath(path: string) {
-  if (path && path !== props.modelValue) emit('update:modelValue', path)
-  resetBrowser()
-}
-</script>
-
-<template>
-  <div class="ppp-root">
-    <!-- Inline position:relative — headlessui's component root doesn't receive the
-         SFC scoped attribute, so the absolute options panel needs an anchor. A
-         Popover (not a Listbox) drives the dropdown so we control dismissal
-         explicitly via the `close` slot callback — the Listbox's auto-close
-         flickered and failed to dismiss inside the dialog. -->
-    <Popover class="ppp-listbox" style="position: relative">
-      <PopoverButton as="template">
-        <button
-          type="button"
-          class="ppp-trigger"
-          :class="{ error, remote: selectedIsRemote }"
-          :title="modelValue || t('projectSwitcher.pathPlaceholder')"
-        >
-          <component :is="selectedIsRemote ? ServerIcon : (modelValue ? FolderOpenIcon : FolderIcon)" class="w-3.5 h-3.5 ppp-icon" />
-          <span class="ppp-name">{{ selectedLabel }}</span>
-          <ChevronUpDownIcon class="w-4 h-4 ppp-caret" />
-        </button>
-      </PopoverButton>
-
-      <transition
-        enter-active-class="pop-enter-active"
-        enter-from-class="pop-enter-from"
-        leave-active-class="pop-leave-active"
-        leave-to-class="pop-leave-to"
-      >
-        <PopoverPanel
-          v-slot="{ close }"
-          class="ppp-panel"
-          :class="placement === 'top' ? 'place-top' : 'place-bottom'"
-        >
-          <button
-            v-for="node in workspaces"
-            :key="node.path"
-            type="button"
-            class="ppp-option"
-            :class="{ selected: node.path === modelValue }"
-            :title="node.path"
-            @click="pickWorkspace(node.path, close)"
-          >
-            <component :is="isRemotePath(node.path) ? ServerIcon : FolderIcon" class="w-3.5 h-3.5 ppp-opt-icon" />
-            <span class="ppp-opt-name">{{ collapsePathMiddle(node.path) }}</span>
-            <CheckIcon v-if="node.path === modelValue" class="w-3.5 h-3.5 ppp-check" />
-          </button>
-
-          <div v-if="!workspaces.length" class="ppp-empty">{{ t('workspace.nonePlural') }}</div>
-
-          <div class="ppp-sep" role="separator" />
-
-          <button type="button" class="ppp-option ppp-action" @click="openFolderAction(close)">
-            <PlusIcon class="w-3.5 h-3.5 ppp-opt-icon" />
-            <span class="ppp-opt-name">{{ t('workspace.openFolder') }}</span>
-          </button>
-        </PopoverPanel>
-      </transition>
-    </Popover>
-
-    <!-- Browser build fallback for "Open folder…": a small folder browser
-         anchored under the field, with a click-away backdrop. -->
-    <template v-if="showBrowser">
-      <div class="ppp-browser-backdrop" @click="resetBrowser" />
-      <div class="ppp-browser-pop" :class="placement === 'top' ? 'place-top' : 'place-bottom'">
-        <div class="ppp-browser-head">
-          <button class="ppp-back" @click="resetBrowser"><ArrowLeftIcon class="w-3.5 h-3.5" /></button>
-          <input
-            v-model="pathInput"
-            class="ppp-path-input"
-            :placeholder="t('projectSwitcher.pathPlaceholder')"
-            @keydown.enter="handlePathSubmit"
-          />
-        </div>
-        <div class="ppp-list">
-          <button
-            v-if="browsePath && browsePath !== '/'"
-            class="ppp-row ppp-folder"
-            @click="goUp"
-          >
-            <span class="ppp-folder-icon">..</span>
-          </button>
-          <div v-if="browseLoading" class="ppp-hint">{{ t('workspace.loading') }}</div>
-          <div v-else-if="browseFolders.length === 0" class="ppp-hint">{{ t('workspace.noFolders') }}</div>
-          <button
-            v-for="folder in browseFolders"
-            :key="folder.path"
-            class="ppp-row ppp-folder"
-            @click="loadFolders(folder.path)"
-          >
-            <FolderIcon class="w-3.5 h-3.5 ppp-folder-icon" />
-            <span class="ppp-row-name">{{ folder.name }}</span>
-          </button>
-        </div>
-        <div class="ppp-browser-foot">
-          <span class="ppp-cur-path">{{ browsePath || '~' }}</span>
-          <button class="ppp-open-btn" :disabled="!browsePath" @click="pickPath(browsePath)">
-            {{ t('workspace.open') }}
-          </button>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-/* Block layout (not flex) so the listbox + trigger stretch to the field width —
-   a flex row would shrink the trigger to its label ("jack"). */
-.ppp-root {
-  position: relative;
-  width: 100%;
-}
-.ppp-listbox {
-  width: 100%;
-  min-width: 0;
-}
-
-/* Trigger mirrors the MenuSelect field-control height/look so the project field
-   reads as one of the form's select controls. min-width:0 lets width:100%
-   actually clamp the field — without it an inline-flex trigger's intrinsic
-   min-content width (a long absolute project path) can push it wider than its
-   siblings (Trigger/Hour/Minute), so the Project field reads oversized and
-   misaligned. Matches the MenuSelect .ms-trigger { min-width: 0 } pattern. */
-.ppp-trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  min-width: 0;
-  height: 32px;
-  padding: 0 10px;
-  font-size: 13px;
-  color: var(--color-foreground);
-  background: var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  cursor: pointer;
-  transition: border-color 0.15s;
-}
-.ppp-trigger:hover {
-  border-color: color-mix(in srgb, var(--color-foreground) 32%, var(--color-border));
-}
-.ppp-trigger:focus-visible {
-  border-color: var(--color-primary);
-  outline: none;
-}
-.ppp-trigger.error {
-  border-color: var(--color-danger, var(--color-destructive));
-}
-.ppp-icon {
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-.ppp-trigger.remote .ppp-icon {
-  color: var(--color-accent-neutral);
-}
-.ppp-name {
-  flex: 1;
-  min-width: 0;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-align: left;
-}
-.ppp-caret {
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-  opacity: 0.75;
-}
-
-/* Options panel (a Listbox <ul>). */
-.ppp-panel {
-  position: absolute;
-  left: 0;
-  z-index: var(--z-dropdown, 40);
-  width: 100%;
-  min-width: 100%;
-  max-height: min(54vh, 360px);
-  overflow-y: auto;
-  margin: 0;
-  padding: 6px;
-  list-style: none;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-lg);
-  outline: none;
-}
-.ppp-panel.place-top {
-  bottom: calc(100% + 6px);
-}
-.ppp-panel.place-bottom {
-  top: calc(100% + 4px);
-}
-
-.ppp-option {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 8px;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  text-align: left;
-  color: var(--color-foreground);
-  font-size: 12.5px;
-  transition: background 0.12s;
-}
-/* Now real <button>s (Popover rows) rather than Listbox <li v-slot=active> — so
-   the hover/keyboard-focus highlight rides native :hover/:focus-visible instead
-   of the Listbox's `active` prop. */
-.ppp-option:hover,
-.ppp-option:focus-visible {
-  background: var(--color-muted);
-  outline: none;
-}
-.ppp-option.selected {
-  color: var(--color-accent-neutral);
-}
-.ppp-opt-icon {
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-.ppp-option.selected .ppp-opt-icon {
-  color: var(--color-accent-neutral);
-}
-.ppp-opt-name {
-  flex: 1;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ppp-check {
-  color: var(--color-accent-neutral);
-  flex-shrink: 0;
-}
-.ppp-empty {
-  padding: 14px 8px;
-  text-align: center;
-  font-size: 11.5px;
-  color: var(--color-muted-foreground);
-}
-.ppp-sep {
-  height: 1px;
-  margin: 4px 2px;
-  background: var(--color-border);
-  list-style: none;
-}
-
-/* ─── Browser build fallback popover ─── */
-.ppp-browser-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: var(--z-dropdown, 40);
-}
-.ppp-browser-pop {
-  position: absolute;
-  left: 0;
-  z-index: calc(var(--z-dropdown, 40) + 1);
-  width: 100%;
-  max-width: 360px;
-  max-height: min(54vh, 360px);
-  display: flex;
-  flex-direction: column;
-  padding: 6px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-lg);
-}
-.ppp-browser-pop.place-top {
-  bottom: calc(100% + 6px);
-}
-.ppp-browser-pop.place-bottom {
-  top: calc(100% + 4px);
-}
-
-.ppp-browser-head {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-  padding: 5px 8px;
-  margin-bottom: 4px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: var(--color-background);
-}
-.ppp-path-input {
-  flex: 1;
-  min-width: 0;
-  border: none;
-  outline: none;
-  background: transparent;
-  font-family: var(--font-mono);
-  font-size: 11.5px;
-  color: var(--color-foreground);
-}
-.ppp-path-input::placeholder {
-  color: var(--color-muted-foreground);
-}
-.ppp-back {
-  display: grid;
-  place-items: center;
-  border: none;
-  background: transparent;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  flex-shrink: 0;
-}
-.ppp-back:hover {
-  color: var(--color-foreground);
-}
-
-.ppp-list {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 2px;
-}
-.ppp-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 8px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  text-align: left;
-  color: var(--color-foreground);
-  font-size: 12.5px;
-  transition: background 0.12s;
-}
-.ppp-row:hover {
-  background: var(--color-muted);
-}
-.ppp-row-icon,
-.ppp-folder-icon {
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-.ppp-row-name {
-  flex: 1;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ppp-folder .ppp-folder-icon {
-  font-family: var(--font-mono);
-  font-size: 12px;
-}
-.ppp-hint {
-  padding: 14px 8px;
-  text-align: center;
-  font-size: 11.5px;
-  color: var(--color-muted-foreground);
-}
-
-.ppp-browser-foot {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-  margin-top: 4px;
-  padding-top: 6px;
-  border-top: 1px solid var(--color-border);
-}
-.ppp-cur-path {
-  flex: 1;
-  min-width: 0;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--color-muted-foreground);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ppp-open-btn {
-  flex-shrink: 0;
-  padding: 5px 14px;
-  border: none;
-  border-radius: var(--radius-md);
-  background: var(--color-accent-neutral);
-  color: var(--color-surface);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: opacity 0.15s;
-}
-.ppp-open-btn:hover:not(:disabled) {
-  opacity: 0.9;
-}
-.ppp-open-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.pop-enter-active,
-.pop-leave-active {
-  transition: opacity 0.12s ease, transform 0.12s ease;
-}
-.pop-enter-from,
-.pop-leave-to {
-  opacity: 0;
-  transform: translateY(4px);
-}
-.ppp-panel.place-top.pop-enter-from,
-.ppp-panel.place-top.pop-leave-to {
-  transform: translateY(-4px);
-}
-</style>
diff --git a/web/src/components/ProjectSwitcher.vue b/web/src/components/ProjectSwitcher.vue
deleted file mode 100644
index 788ac282..00000000
--- a/web/src/components/ProjectSwitcher.vue
+++ /dev/null
@@ -1,327 +0,0 @@
-<script setup lang="ts">
-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,
-  DialogPanel,
-  DialogTitle,
-  TransitionRoot,
-  TransitionChild,
-} from '@headlessui/vue'
-import { FolderIcon, TrashIcon } from '@heroicons/vue/24/outline'
-import { useI18n } from 'vue-i18n'
-
-const props = defineProps<{
-  open: boolean
-}>()
-
-const emit = defineEmits<{
-  close: []
-  projectSwitched: []
-}>()
-
-const projectStore = useProjectStore()
-const { t } = useI18n()
-const openRemoteConnect = inject<(prefill?: RemoteMeta) => void>('openRemoteConnect')
-
-const {
-  showBrowser,
-  browsePath,
-  browseFolders,
-  browseLoading,
-  pathInput,
-  loadFolders,
-  openBrowser,
-  goUp,
-  handlePathSubmit,
-  resetBrowser,
-} = useFolderBrowser()
-
-const displayPath = computed(() => browsePath.value || '~')
-
-// Reset the folder browser each time the dialog opens.
-watch(() => props.open, (isOpen) => {
-  if (isOpen) resetBrowser()
-})
-
-function selectCurrentPath() {
-  if (!browsePath.value) return
-  projectStore.openProject(browsePath.value).then((ok) => {
-    if (ok) {
-      showBrowser.value = false
-      emit('close')
-      emit('projectSwitched')
-    }
-  })
-}
-
-// "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.
-  if (project?.remote) {
-    emit('close')
-    openRemoteConnect?.(parseRemoteLabel(project.path) ?? undefined)
-    return
-  }
-  const ok = await projectStore.switchToProject(id)
-  if (ok) {
-    emit('close')
-    emit('projectSwitched')
-  }
-}
-
-function openRemote() {
-  emit('close')
-  openRemoteConnect?.()
-}
-
-function deleteProject(id: string) {
-  projectStore.removeProject(id)
-}
-</script>
-
-<template>
-  <TransitionRoot :show="open" as="template">
-    <Dialog @close="emit('close')" class="relative z-50">
-      <TransitionChild
-        enter="ease-out duration-150"
-        enter-from="opacity-0"
-        enter-to="opacity-100"
-        leave="ease-in duration-100"
-        leave-from="opacity-100"
-        leave-to="opacity-0"
-      >
-        <div class="fixed inset-0" style="background: var(--backdrop); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px)" />
-      </TransitionChild>
-
-      <div class="fixed inset-0 flex items-start justify-center pt-16 px-4">
-        <TransitionChild
-          enter="ease-out duration-150"
-          enter-from="opacity-0 translate-y-2"
-          enter-to="opacity-100 translate-y-0"
-          leave="ease-in duration-100"
-          leave-from="opacity-100 translate-y-0"
-          leave-to="opacity-0 translate-y-2"
-        >
-          <DialogPanel class="w-full max-w-lg overflow-hidden" style="background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg)">
-            <!-- Header -->
-            <div class="px-5 pt-4 pb-2">
-              <DialogTitle class="text-sm font-semibold" style="font-family: var(--font-sans); color: var(--color-foreground)">
-                {{ showBrowser ? t('projectSwitcher.openFolder') : t('projectSwitcher.title') }}
-              </DialogTitle>
-            </div>
-
-            <!-- Folder browser mode -->
-            <div v-if="showBrowser" class="px-5 pb-4">
-              <div class="flex items-center gap-2 mb-3">
-                <input
-                  v-model="pathInput"
-                  type="text"
-                  class="ps-input flex-1 px-3 py-1.5 text-sm font-mono rounded-md outline-none"
-                  :placeholder="t('projectSwitcher.pathPlaceholder')"
-                  @keydown.enter="handlePathSubmit"
-                />
-                <button
-                  class="px-3 py-1.5 text-xs font-medium rounded-md cursor-pointer transition-opacity hover:opacity-90"
-                  style="background: var(--color-accent-neutral); color: var(--color-surface)"
-                  @click="handlePathSubmit"
-                >
-                  OK
-                </button>
-                <button
-                  class="ps-muted-btn px-2 py-1.5 text-xs cursor-pointer transition-colors"
-                  @click="showBrowser = false"
-                >
-                  Back
-                </button>
-              </div>
-
-              <div class="rounded-md overflow-hidden max-h-80 overflow-y-auto" style="border: 1px solid var(--color-border); background: var(--color-background)">
-                <button
-                  v-if="browsePath && browsePath !== '/'"
-                  class="ps-folder w-full flex items-center gap-2 px-3 py-2 text-sm cursor-pointer transition-colors"
-                  style="color: var(--color-muted-foreground); border-bottom: 1px solid var(--color-border)"
-                  @click="goUp"
-                >
-                  <span style="color: var(--color-muted-foreground)">..</span>
-                </button>
-
-                <div v-if="browseLoading" class="px-3 py-6 text-center text-xs animate-pulse" style="color: var(--color-muted-foreground)">
-                  {{ t('projectSwitcher.loading') }}
-                </div>
-
-                <div v-else-if="browseFolders.length === 0" class="px-3 py-6 text-center text-xs" style="color: var(--color-muted-foreground)">
-                  {{ t('projectSwitcher.noFolders') }}
-                </div>
-
-                <button
-                  v-for="folder in browseFolders"
-                  :key="folder.path"
-                  class="ps-folder w-full flex items-center gap-2 px-3 py-2 text-sm text-left cursor-pointer transition-colors"
-                  style="color: var(--color-foreground); border-bottom: 1px solid var(--color-border)"
-                  @click="loadFolders(folder.path)"
-                >
-                  <FolderIcon class="w-3.5 h-3.5 shrink-0" style="color: var(--color-muted-foreground)" />
-                  <span class="truncate">{{ folder.name }}</span>
-                </button>
-              </div>
-
-              <div class="mt-3 flex items-center justify-between">
-                <div class="text-[11px] font-mono truncate flex-1 mr-2" style="color: var(--color-muted-foreground)">
-                  {{ displayPath }}
-                </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-accent-neutral); color: var(--color-surface)"
-                  @click="selectCurrentPath"
-                >
-                  {{ t('projectSwitcher.openFolder') }}
-                </button>
-              </div>
-            </div>
-
-            <!-- Project list mode -->
-            <div v-else>
-              <div v-if="projectStore.switchError" class="px-5 py-2">
-                <div class="text-xs rounded-md px-3 py-2" style="color: var(--color-error-fg); background: var(--color-error-bg); border: 1px solid var(--color-error-fg)">
-                  {{ projectStore.switchError }}
-                </div>
-              </div>
-
-              <div v-if="projectStore.switching" class="px-3 py-6 text-center text-xs animate-pulse" style="color: var(--color-muted-foreground)">
-                {{ t('projectSwitcher.switching') }}
-              </div>
-
-              <div v-else class="px-3 pb-2 max-h-72 overflow-y-auto">
-                <div v-if="projectStore.projects.length === 0" class="text-xs py-6 text-center" style="color: var(--color-muted-foreground)">
-                  {{ t('projectSwitcher.noProjects') }}
-                </div>
-                <div
-                  v-for="p in projectStore.projects"
-                  :key="p.id"
-                  class="ps-project group flex items-center gap-2 px-3 py-2.5 rounded-md cursor-pointer transition-colors"
-                  :class="{ active: projectStore.activeId === p.id }"
-                  @click="selectProject(p.id)"
-                >
-                  <div
-                    class="w-7 h-7 rounded-md flex items-center justify-center text-xs font-bold shrink-0"
-                    :style="projectStore.activeId === p.id
-                      ? { background: 'var(--neutral-wash-strong)', color: 'var(--color-accent-neutral)' }
-                      : { background: 'var(--color-muted)', color: 'var(--color-muted-foreground)' }"
-                  >
-                    {{ projectStore.projectName(p).charAt(0).toUpperCase() }}
-                  </div>
-                  <div class="min-w-0 flex-1">
-                    <div class="text-sm truncate" style="color: var(--color-foreground)">{{ projectStore.projectName(p) }}</div>
-                    <div class="text-[10px] font-mono truncate" style="color: var(--color-muted-foreground)">{{ p.path }}</div>
-                  </div>
-                  <button
-                    class="ps-delete opacity-0 group-hover:opacity-100 p-1 cursor-pointer transition-all"
-                    @click.stop="deleteProject(p.id)"
-                    :title="t('projectSwitcher.removeProject')"
-                  >
-                    <TrashIcon class="w-3.5 h-3.5" />
-                  </button>
-                </div>
-              </div>
-
-              <div class="px-5 py-3 flex justify-between items-center" style="border-top: 1px solid var(--color-border)">
-                <div class="flex items-center gap-4">
-                  <button
-                    class="text-xs cursor-pointer transition-opacity hover:opacity-80 font-medium"
-                    style="color: var(--color-accent-neutral)"
-                    @click="openFolderAction"
-                  >
-                    {{ t('projectSwitcher.openFolderBtn') }}
-                  </button>
-                  <button
-                    class="text-xs cursor-pointer transition-opacity hover:opacity-80 font-medium"
-                    style="color: var(--color-accent-neutral)"
-                    @click="openRemote"
-                  >
-                    {{ t('nav.remoteConnect') }}
-                  </button>
-                </div>
-                <button
-                  class="ps-muted-btn px-3 py-1 text-xs cursor-pointer transition-colors"
-                  @click="emit('close')"
-                >
-                  {{ t('common.close') }}
-                </button>
-              </div>
-            </div>
-          </DialogPanel>
-        </TransitionChild>
-      </div>
-    </Dialog>
-  </TransitionRoot>
-</template>
-
-<style scoped>
-.ps-input {
-  background: var(--color-background);
-  border: 1px solid var(--color-border);
-  color: var(--color-foreground);
-  transition: border-color 0.15s;
-}
-.ps-input::placeholder {
-  color: var(--color-muted-foreground);
-}
-.ps-input:focus {
-  border-color: var(--color-accent-neutral);
-}
-
-.ps-muted-btn {
-  color: var(--color-muted-foreground);
-}
-.ps-muted-btn:hover {
-  color: var(--color-foreground);
-}
-
-.ps-folder:last-child {
-  border-bottom: none !important;
-}
-.ps-folder:hover {
-  background: var(--neutral-wash-soft);
-  color: var(--color-accent-neutral) !important;
-}
-
-.ps-project {
-  border: 1px solid transparent;
-}
-.ps-project:hover {
-  background: var(--color-muted);
-}
-.ps-project.active {
-  background: var(--neutral-wash-soft);
-  border-color: var(--neutral-border);
-}
-
-.ps-delete {
-  color: var(--color-muted-foreground);
-}
-.ps-delete:hover {
-  color: var(--color-destructive);
-}
-</style>
diff --git a/web/src/components/ProviderEditDialog.vue b/web/src/components/ProviderEditDialog.vue
deleted file mode 100644
index 37877529..00000000
--- a/web/src/components/ProviderEditDialog.vue
+++ /dev/null
@@ -1,598 +0,0 @@
-<script setup lang="ts">
-// ProviderEditDialog — a modal for a provider's CONNECTION fields only
-// (display name, endpoint, API key, headers). Model management lives on the
-// provider card in SettingsDialog, so this dialog never edits the model list.
-//
-// Two modes share one dialog:
-//  - edit: editingProvider is set → connection fields for an existing provider
-//  - add:  editingProvider is null → the add flow (select type → credentials).
-//          A new custom provider is created connection-only; its models are
-//          added afterward from the card.
-//
-// The dialog owns its own form state, seeded from the provider on open, and
-// emits 'saved' after a successful save so the parent can refresh its list.
-import { ref, watch, computed } from 'vue'
-import { XMarkIcon, ChevronRightIcon, ArrowPathIcon } from '@heroicons/vue/24/outline'
-import { useI18n } from 'vue-i18n'
-import { api } from '@/composables/api'
-import ProviderIcon from '@/components/ProviderIcon.vue'
-import type { ProviderDetail, SetupProvider, ValidateResult } from '@/types/api'
-
-const props = defineProps<{
-  open: boolean
-  editingProvider: ProviderDetail | null
-  // The full registry provider list (for the add-flow "select type" step).
-  setupProviders: SetupProvider[]
-  // Already-configured provider ids, to hide them from the add-flow select step.
-  configuredIds: string[]
-}>()
-
-const emit = defineEmits<{
-  (e: 'close'): void
-  (e: 'saved'): void
-}>()
-
-const { t } = useI18n()
-
-// ── Form state ──
-const step = ref<'select' | 'credentials'>('select')
-const selectedProvider = ref('')
-const isCustom = ref(false)
-const customId = ref('')
-const customName = ref('')
-const apiKey = ref('')
-const baseURL = ref('')
-const headers = ref<{ key: string; value: string; ph?: string }[]>([])
-const advancedOpen = ref(false)
-const saving = ref(false)
-const error = ref('')
-// Test-connection state.
-const testing = ref(false)
-const testResult = ref<ValidateResult | null>(null)
-
-const editingId = computed(() => props.editingProvider?.id ?? '')
-
-// ── Seed form state when the dialog opens ──
-watch(() => props.open, (isOpen) => {
-  if (!isOpen) return
-  error.value = ''
-  testResult.value = null
-  testing.value = false
-  if (props.editingProvider) {
-    step.value = 'credentials'
-    selectedProvider.value = props.editingProvider.id
-    isCustom.value = !!props.editingProvider.custom
-    customId.value = props.editingProvider.id
-    customName.value = props.editingProvider.name || ''
-    apiKey.value = '' // masked server-side; blank ⇒ keep
-    baseURL.value = props.editingProvider.base_url || ''
-    headers.value = Object.entries(props.editingProvider.headers ?? {}).map(([key, value]) => ({ key, value: '', ph: value }))
-    advancedOpen.value = headers.value.length > 0 || !!props.editingProvider.base_url
-  } else {
-    resetAddForm()
-    step.value = 'select'
-  }
-})
-
-function resetAddForm() {
-  selectedProvider.value = ''
-  isCustom.value = false
-  customId.value = ''
-  customName.value = ''
-  apiKey.value = ''
-  baseURL.value = ''
-  headers.value = []
-  advancedOpen.value = false
-}
-
-// ── Add-flow step 1: select a connection type ──
-function selectProvider(id: string) {
-  selectedProvider.value = id
-  isCustom.value = false
-  step.value = 'credentials'
-}
-
-function selectCustom() {
-  selectedProvider.value = ''
-  isCustom.value = true
-  baseURL.value = ''
-  advancedOpen.value = true
-  step.value = 'credentials'
-}
-
-const selectableProviders = computed(() =>
-  props.setupProviders.filter((p) => !props.configuredIds.includes(p.id)),
-)
-
-function addHeaderRow() {
-  headers.value.push({ key: '', value: '' })
-}
-
-function removeHeaderRow(i: number) {
-  headers.value.splice(i, 1)
-}
-
-// Build the headers payload: drop blank keys, keep blank values (server preserves secrets).
-function headersPayload(): Record<string, string> | undefined {
-  const out: Record<string, string> = {}
-  for (const h of headers.value) {
-    const k = h.key.trim()
-    if (k) out[k] = h.value
-  }
-  return Object.keys(out).length ? out : undefined
-}
-
-// ── Test connection ──
-// In edit mode the stored key is masked/blank; to test we send the entered key
-// (if any) plus the provider id so the server resolves the base URL. When the
-// key is blank in edit mode we can't really test (the server would reject an
-// empty key), so we surface that as a hint rather than a failing request.
-async function testConnection() {
-  if (editingId.value && !apiKey.value) {
-    testResult.value = { valid: false, error_type: 'server', error: t('settings.providers.testEnterKey') }
-    return
-  }
-  testing.value = true
-  testResult.value = null
-  try {
-    testResult.value = await api.setupValidate({
-      provider: editingId.value || selectedProvider.value || 'openai-compatible',
-      api_key: apiKey.value,
-      base_url: baseURL.value || undefined,
-      headers: headersPayload(),
-    })
-  } catch (err: unknown) {
-    testResult.value = { valid: false, error_type: 'server', error: err instanceof Error ? err.message : 'failed' }
-  }
-  testing.value = false
-}
-
-// Any edit to credentials invalidates a prior test result.
-watch([apiKey, baseURL, headers], () => { testResult.value = null }, { deep: true })
-
-// ── Save ──
-async function save() {
-  error.value = ''
-  // Custom-provider required fields (add mode only).
-  if (!editingId.value && isCustom.value) {
-    if (!customId.value.trim()) { error.value = t('settings.providers.customIdRequired'); return }
-    if (!baseURL.value.trim()) { error.value = t('settings.providers.customUrlRequired'); return }
-  }
-  saving.value = true
-  try {
-    const advanced = { base_url: baseURL.value || undefined, headers: headersPayload() }
-    if (editingId.value) {
-      // Connection-only edit: models are managed on the provider card, so we
-      // omit custom_models here (the server keeps the existing list when the
-      // field is absent).
-      await api.updateProvider(editingId.value, {
-        api_key: apiKey.value || undefined,
-        name: isCustom.value ? (customName.value || undefined) : undefined,
-        ...advanced,
-      })
-    } else if (isCustom.value) {
-      // A brand-new custom provider is created connection-only; its models are
-      // added afterward from the card.
-      await api.addProvider({
-        id: customId.value.trim(),
-        api_key: apiKey.value,
-        name: customName.value.trim() || undefined,
-        ...advanced,
-      })
-    } else {
-      await api.addProvider({
-        id: selectedProvider.value,
-        api_key: apiKey.value,
-        ...advanced,
-      })
-    }
-    emit('saved')
-    emit('close')
-  } catch (err: unknown) {
-    error.value = err instanceof Error ? err.message : 'Failed to save provider'
-  }
-  saving.value = false
-}
-</script>
-
-<template>
-  <transition
-    enter-active-class="transition-opacity duration-150"
-    enter-from-class="opacity-0"
-    leave-active-class="transition-opacity duration-100"
-    leave-to-class="opacity-0"
-  >
-    <div v-if="open" class="prov-modal-overlay" @click.self="emit('close')">
-      <div class="prov-modal" role="dialog" aria-modal="true">
-        <header class="prov-modal-head">
-          <h2>{{ editingProvider ? t('settings.providers.editProvider') : step === 'select' ? t('settings.providers.selectProvider') : t('settings.providers.enterApiKey') }}</h2>
-          <button class="icon-btn" aria-label="Close" @click="emit('close')"><XMarkIcon class="w-5 h-5" /></button>
-        </header>
-
-        <div class="prov-modal-body">
-          <!-- Step 1: select connection type -->
-          <div v-if="step === 'select' && !editingProvider" class="prov-step-select">
-            <div v-if="setupProviders.length === 0" class="prov-empty-hint">{{ t('settings.providers.loadingHint') }}</div>
-            <div v-else-if="selectableProviders.length === 0" class="prov-empty-hint">{{ t('settings.providers.allConfigured') }}</div>
-            <div v-else class="prov-type-list">
-              <button
-                v-for="p in selectableProviders"
-                :key="p.id"
-                class="prov-type-row"
-                @click="selectProvider(p.id)"
-              >
-                <span class="prov-type-icon"><ProviderIcon :provider="p.id" :size="18" /></span>
-                <span class="prov-type-name">{{ p.name }}</span>
-                <span class="prov-type-id">{{ p.id }}</span>
-                <ChevronRightIcon class="w-4 h-4 prov-type-chev" />
-              </button>
-              <button class="prov-type-row" @click="selectCustom">
-                <span class="prov-type-icon"><ProviderIcon provider="openai" :custom="true" :size="18" /></span>
-                <span class="prov-type-name">{{ t('settings.providers.customProvider') }}</span>
-                <span class="prov-type-desc">{{ t('settings.providers.customProviderDesc') }}</span>
-                <ChevronRightIcon class="w-4 h-4 prov-type-chev" />
-              </button>
-            </div>
-          </div>
-
-          <!-- Step 2: connection credentials -->
-          <div v-else class="prov-step-cred">
-            <!-- Breadcrumb back to type select (add mode only) -->
-            <div v-if="!editingProvider" class="prov-crumb">
-              <button class="s-btn s-btn-ghost s-btn-xs" @click="step = 'select'">‹</button>
-              <span class="prov-crumb-id">{{ isCustom ? (customName || customId || t('settings.providers.customProvider')) : selectedProvider }}</span>
-            </div>
-
-            <!-- Custom-provider identity (add mode) -->
-            <template v-if="isCustom && !editingProvider">
-              <label class="s-field">
-                <span class="s-label">{{ t('settings.providers.customId') }}</span>
-                <input v-model="customId" type="text" class="s-input mono" :placeholder="t('settings.providers.customIdPlaceholder')" />
-              </label>
-              <label class="s-field">
-                <span class="s-label">{{ t('settings.providers.customName') }}</span>
-                <input v-model="customName" type="text" class="s-input" :placeholder="t('settings.providers.customNamePlaceholder')" />
-              </label>
-            </template>
-
-            <label class="s-field">
-              <span class="s-label">{{ t('settings.providers.apiKey') }}</span>
-              <input v-model="apiKey" type="password" class="s-input mono" :placeholder="editingProvider ? t('settings.providers.apiKeyUnchanged') : t('settings.providers.apiKey')" @keydown.enter="save" />
-            </label>
-
-            <!-- Advanced: endpoint + headers -->
-            <button class="s-adv-toggle" :aria-expanded="advancedOpen" @click="advancedOpen = !advancedOpen">
-              <ChevronRightIcon class="w-3 h-3" :style="{ transform: advancedOpen ? 'rotate(90deg)' : 'none' }" />
-              {{ t('settings.providers.advanced') }}
-            </button>
-            <div v-if="advancedOpen" class="prov-advanced">
-              <label class="s-field">
-                <span class="s-label">{{ t('settings.providers.endpoint') }}</span>
-                <input v-model="baseURL" type="text" class="s-input mono" :placeholder="t('settings.providers.endpointPlaceholder')" />
-              </label>
-              <div class="s-field">
-                <div class="s-field-head">
-                  <span class="s-label">{{ t('settings.providers.headers') }}</span>
-                  <button class="s-btn s-btn-ghost s-btn-xs" @click="addHeaderRow">+ {{ t('settings.providers.addHeader') }}</button>
-                </div>
-                <div v-for="(h, i) in headers" :key="i" class="s-kv">
-                  <input v-model="h.key" type="text" class="s-input mono" :placeholder="t('settings.providers.headerKey')" />
-                  <input v-model="h.value" type="text" class="s-input mono" :placeholder="h.ph || t('settings.providers.headerValue')" />
-                  <button class="s-kv-rm" @click="removeHeaderRow(i)"><XMarkIcon class="w-3 h-3" /></button>
-                </div>
-                <div v-if="headers.length" class="s-helper">{{ t('settings.providers.headersHint') }}</div>
-              </div>
-            </div>
-
-            <!-- Test-connection result -->
-            <div v-if="error" class="s-error">{{ error }}</div>
-            <div v-if="testResult" class="p-test-result" :class="testResult.valid ? 'p-test-ok' : { 'p-test-auth': testResult.error_type === 'auth', 'p-test-net': testResult.error_type === 'network' }">
-              <template v-if="testResult.valid">
-                <span class="p-test-ic">✓</span>
-                <span>{{ t('settings.providers.testSuccess') }} · {{ t('settings.providers.testLatency') }} {{ testResult.latency_ms }}ms · {{ t('settings.providers.testModels', { n: testResult.model_count ?? 0 }) }}</span>
-              </template>
-              <template v-else>
-                <span class="p-test-ic">✕</span>
-                <span>
-                  <b>{{ testResult.error_type === 'auth' ? t('settings.providers.testAuthFail') : testResult.error_type === 'network' ? t('settings.providers.testNetworkFail') : t('settings.providers.connectFailed') }}</b>
-                  <template v-if="testResult.error"> · {{ testResult.error }}</template>
-                </span>
-              </template>
-            </div>
-
-            <!-- Actions: Test (left) + Save (right, compact, not full-width, not yellow) -->
-            <div class="prov-actions">
-              <button :disabled="testing || (!apiKey && !editingId)" class="s-btn s-btn-secondary s-btn-sm" @click="testConnection">
-                <ArrowPathIcon v-if="testing" class="w-3.5 h-3.5 animate-spin" />
-                {{ testing ? t('settings.providers.testing') : t('settings.providers.testConnection') }}
-              </button>
-              <button :disabled="saving || (!editingId && !apiKey)" class="s-btn s-btn-primary s-btn-sm prov-save" @click="save">
-                {{ saving ? t('settings.providers.saving') : editingProvider ? t('common.save') : t('settings.providers.addBtn') }}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<style scoped>
-.prov-modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: var(--z-modal);
-  background: var(--backdrop);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-}
-.prov-modal {
-  width: 100%;
-  max-width: 480px;
-  max-height: min(80vh, 640px);
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-lg);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.prov-modal-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--color-border);
-}
-.prov-modal-head h2 {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--color-foreground);
-  margin: 0;
-}
-.icon-btn {
-  width: 30px;
-  height: 30px;
-  display: grid;
-  place-items: center;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-}
-.icon-btn:hover {
-  background: var(--color-secondary);
-  color: var(--color-foreground);
-}
-.prov-modal-body {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-/* Step 1: type list */
-.prov-type-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.prov-type-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 9px 11px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  color: var(--color-foreground);
-  cursor: pointer;
-  text-align: left;
-  transition: background var(--duration-fast);
-}
-.prov-type-row:hover {
-  background: var(--color-secondary);
-}
-.prov-type-icon {
-  width: 28px;
-  height: 28px;
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-}
-.prov-type-icon-fallback {
-  font-family: var(--font-mono);
-  font-weight: 700;
-  color: var(--color-muted-foreground);
-}
-.prov-type-name {
-  font-size: 12.5px;
-  font-weight: 600;
-}
-.prov-type-id {
-  font-size: 11px;
-  font-family: var(--font-mono);
-  color: var(--color-muted-foreground);
-  margin-left: 4px;
-}
-.prov-type-desc {
-  font-size: 11px;
-  color: var(--color-muted-foreground);
-}
-.prov-type-chev {
-  margin-left: auto;
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-.prov-empty-hint {
-  font-size: 11px;
-  color: var(--color-muted-foreground);
-  text-align: center;
-  padding: 16px 0;
-}
-
-/* Step 2: credentials */
-.prov-crumb {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.prov-crumb-id {
-  font-size: 10.5px;
-  font-family: var(--font-mono);
-  color: var(--color-muted-foreground);
-}
-.prov-advanced {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding-left: 2px;
-}
-
-/* shared form primitives (mirrors SettingsDialog's .s-* but scoped here) */
-.s-field {
-  display: flex;
-  flex-direction: column;
-}
-.s-field-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 5px;
-}
-.s-label {
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--color-foreground);
-  margin-bottom: 5px;
-}
-.s-helper {
-  font-size: 11px;
-  line-height: 1.45;
-  color: var(--color-muted-foreground);
-  margin-top: 5px;
-}
-.s-error {
-  font-size: 11px;
-  line-height: 1.45;
-  color: var(--color-destructive);
-  margin-top: 4px;
-}
-.s-input {
-  width: 100%;
-  height: 32px;
-  padding: 0 10px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  color: var(--color-foreground);
-  font-size: 12px;
-  font-family: var(--font-sans);
-  outline: none;
-  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
-}
-.s-input::placeholder { color: var(--color-muted-foreground); opacity: 0.7; }
-.s-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--accent-wash-soft); }
-.s-input.mono { font-family: var(--font-mono); }
-.s-kv {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-.s-kv-rm {
-  width: 28px;
-  height: 32px;
-  display: grid;
-  place-items: center;
-  border: none;
-  background: transparent;
-  color: var(--color-muted-foreground);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  flex-shrink: 0;
-}
-.s-kv-rm:hover { background: var(--color-secondary); color: var(--color-foreground); }
-.s-adv-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--color-muted-foreground);
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 2px 0;
-  align-self: flex-start;
-}
-.s-adv-toggle:hover { color: var(--color-foreground); }
-.s-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 32px;
-  padding: 0 12px;
-  border-radius: var(--radius-md);
-  font-size: 12px;
-  font-weight: 500;
-  font-family: var(--font-sans);
-  cursor: pointer;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  transition: background var(--duration-fast), border-color var(--duration-fast), opacity var(--duration-fast);
-}
-.s-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-.s-btn-primary {
-  background: var(--color-foreground);
-  color: var(--color-surface);
-}
-.s-btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--color-foreground) 85%, transparent); }
-.s-btn-secondary {
-  background: var(--color-surface);
-  border-color: var(--color-border);
-  color: var(--color-foreground);
-}
-.s-btn-secondary:hover:not(:disabled) { background: var(--color-secondary); }
-.s-btn-ghost { background: transparent; color: var(--color-foreground); }
-.s-btn-ghost:hover:not(:disabled) { background: var(--color-secondary); }
-.s-btn-sm { height: 28px; padding: 0 10px; font-size: 11.5px; border-radius: var(--radius-sm); }
-.s-btn-xs { height: 22px; padding: 0 7px; font-size: 10px; border-radius: var(--radius-sm); }
-
-/* Test-connection banner */
-.p-test-result {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 11px;
-  border-radius: var(--radius-md);
-  font-size: 11px;
-  line-height: 1.4;
-}
-.p-test-ic { font-weight: 700; flex-shrink: 0; }
-.p-test-ok { background: var(--color-success-bg); color: var(--color-success-fg); }
-.p-test-auth { background: var(--color-error-bg); color: var(--color-error-fg); }
-.p-test-net { background: var(--color-warning-bg); color: var(--color-warning-fg); }
-
-/* Actions: Test left, Save right — Save is compact (not full-width, not yellow) */
-.prov-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 4px;
-}
-.prov-save {
-  min-width: 84px;
-}
-.animate-spin { animation: prov-spin 0.7s linear infinite; }
-@keyframes prov-spin { to { transform: rotate(360deg); } }
-</style>
diff --git a/web-react/src/components/ProviderIcon.tsx b/web/src/components/ProviderIcon.tsx
similarity index 100%
rename from web-react/src/components/ProviderIcon.tsx
rename to web/src/components/ProviderIcon.tsx
diff --git a/web/src/components/ProviderIcon.vue b/web/src/components/ProviderIcon.vue
deleted file mode 100644
index c981cc36..00000000
--- a/web/src/components/ProviderIcon.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { iconForProvider } from '@/utils/providerIcons'
-
-const props = withDefaults(defineProps<{ provider: string; size?: number; custom?: boolean }>(), {
-  size: 18,
-  custom: false,
-})
-
-// Trusted, build-time bundled SVG strings (not user input), so v-html is safe.
-// Custom providers fall back to the OpenAI mark (they're OpenAI-compatible).
-const svg = computed(() => iconForProvider(props.provider, props.custom))
-
-// First alphanumeric character, shown when the provider has no brand icon.
-const initial = computed(
-  () => (props.provider || '').replace(/[^a-z0-9]/gi, '').charAt(0).toUpperCase() || '?',
-)
-</script>
-
-<template>
-  <span
-    v-if="svg"
-    class="provider-icon"
-    :style="{ fontSize: size + 'px', width: size + 'px', height: size + 'px' }"
-    aria-hidden="true"
-    v-html="svg"
-  />
-  <span
-    v-else
-    class="provider-icon provider-icon-fallback"
-    :style="{ width: size + 'px', height: size + 'px', fontSize: Math.round(size * 0.52) + 'px' }"
-    aria-hidden="true"
-    >{{ initial }}</span
-  >
-</template>
-
-<style scoped>
-.provider-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  line-height: 0;
-}
-.provider-icon :deep(svg) {
-  width: 1em;
-  height: 1em;
-  display: block;
-}
-.provider-icon-fallback {
-  border-radius: 6px;
-  background: var(--color-secondary);
-  color: var(--color-muted-foreground);
-  font-weight: 600;
-  line-height: 1;
-}
-</style>
diff --git a/web/src/components/RemoteConnectWizard.tsx b/web/src/components/RemoteConnectWizard.tsx
new file mode 100644
index 00000000..cc13149f
--- /dev/null
+++ b/web/src/components/RemoteConnectWizard.tsx
@@ -0,0 +1,935 @@
+/**
+ * RemoteConnectWizard — SSH / Docker connect flow.
+ * Parity with web/src/components/RemoteConnectWizard.vue:
+ *   method → config|docker → connecting → dir → bind
+ *   + prefill silent reconnect for key/agent and docker
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  ArrowLeftIcon,
+  ArrowPathIcon,
+  CheckIcon,
+  ChevronRightIcon,
+  CubeIcon,
+  FolderIcon,
+  ServerIcon,
+  XMarkIcon,
+} from '@heroicons/react/24/outline'
+import { useTranslation } from 'react-i18next'
+import { useAppDispatch } from '../app/hooks'
+import { chatActions, loadSession, loadWorkspaceState, sessionActions } from '../app/store'
+import { api } from '../lib/api'
+import type { RemotePrefill } from '../lib/remote'
+import type { DockerContainer, RemoteAuthMethod, RemoteKind, SSHAlias } from '../lib/types'
+
+type Step = 'method' | 'config' | 'docker' | 'connecting' | 'dir'
+
+export interface RemoteConnectWizardProps {
+  open: boolean
+  prefill?: RemotePrefill | null
+  onClose: () => void
+  onBound?: () => void
+}
+
+export function RemoteConnectWizard({ open, prefill, onClose, onBound }: RemoteConnectWizardProps) {
+  const { t } = useTranslation()
+  const dispatch = useAppDispatch()
+  const [step, setStep] = useState<Step>('method')
+  const [method, setMethod] = useState<RemoteKind>('ssh')
+  const [host, setHost] = useState('')
+  const [port, setPort] = useState(22)
+  const [user, setUser] = useState('root')
+  const [authMethod, setAuthMethod] = useState<RemoteAuthMethod>('key')
+  const [password, setPassword] = useState('')
+  const [keyPath, setKeyPath] = useState('~/.ssh/id_rsa')
+  const [passphrase, setPassphrase] = useState('')
+  const [aliases, setAliases] = useState<SSHAlias[]>([])
+  const [selectedAlias, setSelectedAlias] = useState('')
+  const [containers, setContainers] = useState<DockerContainer[]>([])
+  const [containersLoading, setContainersLoading] = useState(false)
+  const [connectionId, setConnectionId] = useState('')
+  const [currentDir, setCurrentDir] = useState('')
+  const [dirs, setDirs] = useState<string[]>([])
+  const [dirLoading, setDirLoading] = useState(false)
+  const [aliasName, setAliasName] = useState('')
+  const [error, setError] = useState('')
+  const [binding, setBinding] = useState(false)
+  /** Keep prefill for bind-time loadTaskUuid without re-running open effect. */
+  const prefillRef = useRef<RemotePrefill | null>(null)
+  const boundRef = useRef(false)
+
+  const steps = useMemo(
+    () => [
+      { key: 'method' as const, label: t('wizard.steps.chooseMethod') },
+      { key: 'config' as const, label: t('wizard.steps.configure') },
+      { key: 'connecting' as const, label: t('wizard.steps.connecting') },
+      { key: 'dir' as const, label: t('wizard.steps.selectDirectory') },
+    ],
+    [t],
+  )
+  const stepIndex = useMemo(() => {
+    const key = step === 'docker' ? 'config' : step
+    return steps.findIndex((s) => s.key === key)
+  }, [step, steps])
+
+  useEffect(() => {
+    if (!open) return
+    boundRef.current = false
+    prefillRef.current = prefill ?? null
+    resetForm()
+    void loadAliases()
+    if (prefill) {
+      if (prefill.kind === 'docker') {
+        void autoReconnectDocker(prefill)
+      } else if (prefill.remotePath) {
+        void autoReconnectSSH(prefill)
+      } else {
+        applyPrefill(prefill)
+      }
+    }
+    // Only re-run when the dialog opens / prefill identity changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, prefill])
+
+  if (!open) return null
+
+  function resetForm() {
+    setStep('method')
+    setMethod('ssh')
+    setHost('')
+    setPort(22)
+    setUser('root')
+    setAuthMethod('key')
+    setPassword('')
+    setKeyPath('~/.ssh/id_rsa')
+    setPassphrase('')
+    setAliases([])
+    setSelectedAlias('')
+    setContainers([])
+    setConnectionId('')
+    setCurrentDir('')
+    setDirs([])
+    setAliasName('')
+    setError('')
+    setBinding(false)
+  }
+
+  function applyPrefill(p: RemotePrefill) {
+    const colon = p.host.lastIndexOf(':')
+    setHost(colon >= 0 ? p.host.slice(0, colon) : p.host)
+    setPort(p.port || 22)
+    setUser(p.user || 'root')
+    setMethod(p.kind === 'docker' ? 'docker' : 'ssh')
+    setStep(p.kind === 'docker' ? 'docker' : 'config')
+  }
+
+  async function loadAliases() {
+    try {
+      const res = await api.sshList()
+      setAliases(res.aliases || [])
+    } catch {
+      setAliases([])
+    }
+  }
+
+  async function loadContainers() {
+    setContainersLoading(true)
+    setError('')
+    try {
+      const res = await api.dockerContainers()
+      setContainers(
+        (res.containers || []).slice().sort((a, b) => {
+          if (a.running !== b.running) return a.running ? -1 : 1
+          return (a.name || a.id).localeCompare(b.name || b.id)
+        }),
+      )
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to list containers')
+      setContainers([])
+    } finally {
+      setContainersLoading(false)
+    }
+  }
+
+  function applyAlias(name: string) {
+    setSelectedAlias(name)
+    const alias = aliases.find((a) => a.name === name)
+    if (!alias) return
+    const at = alias.addr.indexOf('@')
+    const nextUser = at >= 0 ? alias.addr.slice(0, at) : ''
+    let nextHost = at >= 0 ? alias.addr.slice(at + 1) : alias.addr
+    const colon = nextHost.lastIndexOf(':')
+    if (colon >= 0) {
+      setPort(parseInt(nextHost.slice(colon + 1), 10) || 22)
+      nextHost = nextHost.slice(0, colon)
+    }
+    if (nextUser) setUser(nextUser)
+    setHost(nextHost)
+    if (alias.path) setAliasName(alias.name)
+  }
+
+  async function discardConnection(id?: string) {
+    const cid = id ?? connectionId
+    if (!cid || boundRef.current) {
+      if (!boundRef.current) setConnectionId('')
+      return
+    }
+    try {
+      await api.remoteCancel(cid)
+    } catch {
+      // best-effort
+    }
+    setConnectionId('')
+  }
+
+  /** Seamless SSH reconnect with key/agent; fall back to prefilled form. */
+  async function autoReconnectSSH(p: RemotePrefill) {
+    applyPrefill(p)
+    setMethod('ssh')
+    setStep('connecting')
+    const colon = p.host.lastIndexOf(':')
+    const h = colon >= 0 ? p.host.slice(0, colon) : p.host
+    const po = p.port || 22
+    const u = p.user || 'root'
+    try {
+      const res = await api.remoteConnect({
+        type: 'ssh',
+        host: h.trim(),
+        port: po,
+        user: u.trim() || 'root',
+        auth_method: 'key',
+        key_path: '~/.ssh/id_rsa',
+      })
+      setConnectionId(res.connection_id)
+      const dir = p.remotePath && p.remotePath !== '/' ? p.remotePath : res.remote_pwd
+      setCurrentDir(dir)
+      const ok = await bindWith(res.connection_id, dir)
+      if (!ok && !boundRef.current) {
+        if (res.connection_id) {
+          await listDir(res.connection_id, dir)
+          setStep('dir')
+        } else {
+          setStep('config')
+        }
+      }
+    } catch {
+      setError('')
+      setStep('config')
+    }
+  }
+
+  async function autoReconnectDocker(p: RemotePrefill) {
+    setMethod('docker')
+    if (!p.container) {
+      setStep('docker')
+      void loadContainers()
+      return
+    }
+    setStep('connecting')
+    try {
+      const res = await api.remoteConnect({ type: 'docker', container: p.container })
+      setConnectionId(res.connection_id)
+      const dir = p.remotePath && p.remotePath !== '/' ? p.remotePath : res.remote_pwd
+      setCurrentDir(dir)
+      const ok = await bindWith(res.connection_id, dir)
+      if (!ok && !boundRef.current && res.connection_id) {
+        await listDir(res.connection_id, dir)
+        setStep('dir')
+      }
+    } catch {
+      setError('')
+      setStep('docker')
+      void loadContainers()
+    }
+  }
+
+  async function connectSSH() {
+    if (!host.trim()) {
+      setError('Host is required')
+      return
+    }
+    await discardConnection()
+    setError('')
+    setStep('connecting')
+    try {
+      const res = await api.remoteConnect({
+        type: 'ssh',
+        host: host.trim(),
+        port,
+        user: user.trim() || 'root',
+        auth_method: authMethod,
+        password: authMethod === 'password' ? password : undefined,
+        key_path: authMethod === 'key' ? keyPath.trim() : undefined,
+        passphrase: authMethod === 'key' ? passphrase : undefined,
+      })
+      setConnectionId(res.connection_id)
+      await listDir(res.connection_id, res.remote_pwd)
+      setStep('dir')
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Connection failed')
+      setStep('config')
+    }
+  }
+
+  async function connectDocker(container: string) {
+    if (!container) return
+    await discardConnection()
+    setError('')
+    setStep('connecting')
+    try {
+      const res = await api.remoteConnect({ type: 'docker', container })
+      setConnectionId(res.connection_id)
+      await listDir(res.connection_id, res.remote_pwd)
+      setStep('dir')
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Connection failed')
+      setStep('docker')
+    }
+  }
+
+  async function listDir(connId: string, path: string) {
+    setDirLoading(true)
+    setError('')
+    try {
+      const res = await api.remoteListDir(connId, path)
+      setCurrentDir(res.path)
+      setDirs(res.dirs || [])
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to list directory')
+    } finally {
+      setDirLoading(false)
+    }
+  }
+
+  function navigate(name: string) {
+    if (!connectionId) return
+    if (name === '..') {
+      const parent = currentDir.split('/').slice(0, -1).join('/') || '/'
+      void listDir(connectionId, parent)
+      return
+    }
+    const base = currentDir.endsWith('/') ? currentDir : `${currentDir}/`
+    void listDir(connectionId, `${base}${name}`)
+  }
+
+  async function bindWith(connId: string, dir: string): Promise<boolean> {
+    if (!connId || binding) return false
+    setBinding(true)
+    setError('')
+    try {
+      const res = await api.remoteBind(connId, dir)
+      if (res.kind === 'docker') {
+        const name = aliasName.trim() || res.container || 'container'
+        await api.remoteSaveDockerAlias(name, res.container || '', res.remote_path).catch(() => {})
+      } else {
+        const addr = `${res.user}@${res.host}`
+        await api.remoteSaveAlias(aliasName.trim() || addr, addr, res.remote_path).catch(() => {})
+      }
+      boundRef.current = true
+      setConnectionId('')
+      dispatch(chatActions.clearChat())
+      dispatch(sessionActions.setProjectPath(res.label || res.pwd))
+      dispatch(sessionActions.setCurrentSession(''))
+      await dispatch(loadWorkspaceState())
+      const taskUuid = prefillRef.current?.loadTaskUuid
+      if (taskUuid) {
+        await dispatch(loadSession(taskUuid))
+      }
+      onBound?.()
+      onClose()
+      return true
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to bind workspace')
+      return false
+    } finally {
+      setBinding(false)
+    }
+  }
+
+  async function bindHere() {
+    if (!connectionId) return
+    await bindWith(connectionId, currentDir)
+  }
+
+  function close() {
+    void discardConnection()
+    onClose()
+  }
+
+  function goBack() {
+    if (step === 'method') {
+      close()
+      return
+    }
+    if (step === 'dir') {
+      void discardConnection()
+      setStep(method === 'docker' ? 'docker' : 'config')
+      return
+    }
+    if (step === 'config' || step === 'docker' || step === 'connecting') {
+      void discardConnection()
+      setStep('method')
+      setError('')
+    }
+  }
+
+  const connecting = step === 'connecting'
+  const showSSHForm = step === 'config' || (connecting && method !== 'docker')
+  const showDocker = step === 'docker' || (connecting && method === 'docker')
+
+  function proceedFromMethod() {
+    if (method === 'docker') {
+      setStep('docker')
+      void loadContainers()
+    } else setStep('config')
+  }
+
+  function backToConfig() {
+    void discardConnection()
+    setStep(method === 'docker' ? 'docker' : 'config')
+  }
+
+  return (
+    <div className="fixed inset-0 z-[var(--z-modal)]" role="dialog" aria-modal="true">
+      <div className="fixed inset-0" style={{ background: 'var(--backdrop)', backdropFilter: 'blur(6px)' }} onClick={close} />
+      <div className="titlebar-drag" data-tauri-drag-region aria-hidden="true" />
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <div className="rcw">
+          {/* Step rail — Vue .rcw-rail */}
+          <div className="rcw-rail">
+            <div className="rcw-rail-title">{t('wizard.title')}</div>
+            <ol className="rcw-steps">
+              {steps.map((s, i) => (
+                <li key={s.key} className={`rcw-step${i < stepIndex ? ' done' : ''}${i === stepIndex ? ' current' : ''}`}>
+                  <span className="rcw-step-dot">
+                    {i < stepIndex ? <CheckIcon className="h-3 w-3" /> : i + 1}
+                  </span>
+                  <span className="rcw-step-label">{s.label}</span>
+                </li>
+              ))}
+            </ol>
+          </div>
+
+          <div className="rcw-body">
+            <button type="button" className="rcw-close" onClick={close} aria-label={t('common.close')}>
+              <XMarkIcon className="h-4 w-4" />
+            </button>
+
+            {/* Method */}
+            {step === 'method' && (
+              <>
+                <h3 className="rcw-h">{t('wizard.chooseMethod')}</h3>
+                <p className="rcw-sub">{t('wizard.pickMethodDesc')}</p>
+                <div className="rcw-methods">
+                  <button type="button" className={`rcw-method${method === 'ssh' ? ' active' : ''}`} onClick={() => setMethod('ssh')}>
+                    <ServerIcon className="h-5 w-5" />
+                    <span className="rcw-method-name">{t('wizard.ssh')}</span>
+                    <span className="rcw-method-desc">{t('wizard.remoteHost')}</span>
+                  </button>
+                  <button type="button" className={`rcw-method${method === 'docker' ? ' active' : ''}`} onClick={() => setMethod('docker')}>
+                    <CubeIcon className="h-5 w-5" />
+                    <span className="rcw-method-name">{t('wizard.docker')}</span>
+                    <span className="rcw-method-desc">{t('wizard.container')}</span>
+                  </button>
+                </div>
+                <div className="rcw-foot">
+                  <span />
+                  <button type="button" className="rcw-primary" onClick={proceedFromMethod}>
+                    {t('wizard.next')} <ChevronRightIcon className="h-3.5 w-3.5" />
+                  </button>
+                </div>
+              </>
+            )}
+
+            {/* SSH config (kept visible under connecting overlay) */}
+            {showSSHForm && (
+              <>
+                <h3 className="rcw-h">{t('wizard.sshConnection')}</h3>
+                <p className="rcw-sub">{t('wizard.sshDesc')}</p>
+                {error && <div className="rcw-error">{error}</div>}
+                {connecting && (
+                  <div className="rcw-hint">
+                    <ArrowPathIcon className="h-3.5 w-3.5 spin" /> {t('wizard.connecting')}
+                  </div>
+                )}
+                <div className={connecting ? 'rcw-disabled' : undefined}>
+                  {aliases.length > 0 && (
+                    <div className="rcw-field">
+                      <label>{t('settings.ssh.savedAlias')}</label>
+                      <select
+                        className="rcw-input"
+                        value={selectedAlias}
+                        disabled={connecting}
+                        onChange={(e) => applyAlias(e.target.value)}
+                      >
+                        <option value="">{t('settings.ssh.noAlias')}</option>
+                        {aliases.map((a) => (
+                          <option key={a.name} value={a.name}>{a.name} — {a.addr}</option>
+                        ))}
+                      </select>
+                    </div>
+                  )}
+                  <div className="rcw-row">
+                    <div className="rcw-field grow">
+                      <label>{t('wizard.host')}</label>
+                      <input className="rcw-input" value={host} disabled={connecting} onChange={(e) => setHost(e.target.value)} placeholder={t('wizard.hostPlaceholder')} />
+                    </div>
+                    <div className="rcw-field port">
+                      <label>{t('wizard.port')}</label>
+                      <input className="rcw-input" type="number" value={port} disabled={connecting} onChange={(e) => setPort(Number(e.target.value) || 22)} />
+                    </div>
+                  </div>
+                  <div className="rcw-row">
+                    <div className="rcw-field grow">
+                      <label>{t('wizard.user')}</label>
+                      <input className="rcw-input" value={user} disabled={connecting} onChange={(e) => setUser(e.target.value)} placeholder={t('wizard.userPlaceholder')} />
+                    </div>
+                    <div className="rcw-field">
+                      <label>{t('wizard.auth')}</label>
+                      <div className="rcw-seg">
+                        <button type="button" className={authMethod === 'password' ? 'on' : ''} disabled={connecting} onClick={() => setAuthMethod('password')}>{t('wizard.authPassword')}</button>
+                        <button type="button" className={authMethod === 'key' ? 'on' : ''} disabled={connecting} onClick={() => setAuthMethod('key')}>{t('wizard.authKey')}</button>
+                      </div>
+                    </div>
+                  </div>
+                  {authMethod === 'password' ? (
+                    <div className="rcw-field">
+                      <label>{t('wizard.password')}</label>
+                      <input className="rcw-input" type="password" value={password} disabled={connecting} onChange={(e) => setPassword(e.target.value)} />
+                    </div>
+                  ) : (
+                    <>
+                      <div className="rcw-field">
+                        <label>{t('wizard.keyPath')}</label>
+                        <input className="rcw-input mono" value={keyPath} disabled={connecting} onChange={(e) => setKeyPath(e.target.value)} placeholder="~/.ssh/id_rsa" />
+                      </div>
+                      <div className="rcw-field">
+                        <label>{t('wizard.passphrase')}</label>
+                        <input className="rcw-input" type="password" value={passphrase} disabled={connecting} onChange={(e) => setPassphrase(e.target.value)} />
+                      </div>
+                    </>
+                  )}
+                </div>
+                <div className="rcw-foot">
+                  <button type="button" className="rcw-ghost" disabled={connecting} onClick={goBack}>{t('common.back')}</button>
+                  <button type="button" className="rcw-primary" disabled={connecting} onClick={() => void connectSSH()}>
+                    {connecting ? <><ArrowPathIcon className="h-3.5 w-3.5 spin" /> {t('wizard.connecting')}</> : t('wizard.connect')}
+                  </button>
+                </div>
+              </>
+            )}
+
+            {/* Docker */}
+            {showDocker && (
+              <>
+                <h3 className="rcw-h">{t('wizard.dockerConnection')}</h3>
+                <p className="rcw-sub">{t('wizard.dockerDesc')}</p>
+                {error && <div className="rcw-error">{error}</div>}
+                {connecting ? (
+                  <div className="rcw-hint">
+                    <ArrowPathIcon className="h-3.5 w-3.5 spin" /> {t('wizard.connecting')}
+                  </div>
+                ) : (
+                  <>
+                    <div className="rcw-dirbar">
+                      <span className="rcw-dir-path">{t('wizard.selectContainer')}</span>
+                      <button type="button" className="rcw-back" style={{ marginLeft: 'auto' }} title={t('wizard.refresh')} onClick={() => void loadContainers()}>
+                        <ArrowPathIcon className={`h-3.5 w-3.5${containersLoading ? ' spin' : ''}`} />
+                      </button>
+                    </div>
+                    <div className="rcw-dirlist">
+                      {containersLoading ? (
+                        <div className="rcw-hint"><ArrowPathIcon className="h-3.5 w-3.5 spin" /> {t('wizard.loading')}</div>
+                      ) : containers.length === 0 ? (
+                        <div className="rcw-hint">{t('wizard.noContainers')}</div>
+                      ) : (
+                        containers.map((c) => (
+                          <button key={c.id} type="button" className="rcw-dir-row" onClick={() => void connectDocker(c.name || c.id)}>
+                            <CubeIcon className="h-3.5 w-3.5" />
+                            <span className="rcw-ctr-name">{c.name || c.id.slice(0, 12)}</span>
+                            <span className="rcw-ctr-img">{c.image}</span>
+                            <span className={`rcw-ctr-state${c.running ? ' on' : ''}`}>{c.running ? t('wizard.running') : t('wizard.stopped')}</span>
+                          </button>
+                        ))
+                      )}
+                    </div>
+                    <div className="rcw-foot">
+                      <button type="button" className="rcw-ghost" onClick={goBack}>{t('common.back')}</button>
+                      <span />
+                    </div>
+                  </>
+                )}
+              </>
+            )}
+
+            {/* Directory */}
+            {step === 'dir' && (
+              <>
+                <h3 className="rcw-h">{t('wizard.selectDirectory')}</h3>
+                <p className="rcw-sub">{t('wizard.dirDesc')}</p>
+                {error && <div className="rcw-error">{error}</div>}
+                <div className="rcw-dirbar">
+                  <button type="button" className="rcw-back" title={t('wizard.backToConfig')} onClick={backToConfig}>
+                    <ArrowLeftIcon className="h-3.5 w-3.5" />
+                  </button>
+                  <span className="rcw-dir-path">{currentDir || '/'}</span>
+                </div>
+                <div className="rcw-dirlist">
+                  {dirLoading ? (
+                    <div className="rcw-hint"><ArrowPathIcon className="h-3.5 w-3.5 spin" /> {t('wizard.loading')}</div>
+                  ) : (
+                    <>
+                      {currentDir !== '/' && (
+                        <button type="button" className="rcw-dir-row" onClick={() => navigate('..')}>
+                          <span className="rcw-up">..</span>
+                          <span>..</span>
+                        </button>
+                      )}
+                      {dirs.map((d) => (
+                        <button key={d} type="button" className="rcw-dir-row" onClick={() => navigate(d)}>
+                          <FolderIcon className="h-3.5 w-3.5" />
+                          <span>{d}</span>
+                        </button>
+                      ))}
+                      {dirs.length === 0 && <div className="rcw-hint">{t('wizard.noSubDirs')}</div>}
+                    </>
+                  )}
+                </div>
+                <label className="rcw-save">
+                  <span>{t('wizard.saveAlias')}</span>
+                  <input className="rcw-input mini" value={aliasName} onChange={(e) => setAliasName(e.target.value)} placeholder={t('wizard.aliasNamePlaceholder')} />
+                </label>
+                <div className="rcw-foot">
+                  <button type="button" className="rcw-ghost" disabled={binding} onClick={close}>{t('common.cancel')}</button>
+                  <button type="button" className="rcw-primary" disabled={binding} onClick={() => void bindHere()}>
+                    {binding ? <ArrowPathIcon className="h-3.5 w-3.5 spin" /> : null}
+                    {t('wizard.useDirectory')}
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <style>{RCW_CSS}</style>
+    </div>
+  )
+}
+
+/** Ported from web/src/components/RemoteConnectWizard.vue scoped styles. */
+const RCW_CSS = `
+.rcw {
+  display: flex;
+  width: 900px;
+  max-width: calc(100vw - 32px);
+  height: 600px;
+  max-height: 86vh;
+  overflow: hidden;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl, 16px);
+  box-shadow: var(--shadow-lg);
+  position: relative;
+  z-index: 1;
+}
+.rcw-rail {
+  width: 220px;
+  flex-shrink: 0;
+  padding: 22px 18px;
+  background: var(--color-background);
+  border-right: 1px solid var(--color-border);
+}
+.rcw-rail-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-muted-foreground);
+  margin-bottom: 22px;
+}
+.rcw-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.rcw-step {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 10px;
+  border-radius: var(--radius-lg);
+  color: var(--color-muted-foreground);
+}
+.rcw-step.current {
+  background: var(--color-surface);
+  color: var(--color-foreground);
+}
+.rcw-step-dot {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  border: 1px solid var(--color-border);
+  font-size: 12px;
+  font-weight: 600;
+}
+.rcw-step.current .rcw-step-dot {
+  background: var(--color-foreground);
+  color: var(--color-background);
+  border-color: var(--color-foreground);
+}
+.rcw-step.done .rcw-step-dot {
+  background: var(--color-success, #16a34a);
+  border-color: var(--color-success, #16a34a);
+  color: var(--color-surface);
+}
+.rcw-step-label { font-size: 13px; }
+.rcw-body {
+  flex: 1;
+  min-width: 0;
+  position: relative;
+  padding: 24px 26px;
+  overflow-y: auto;
+}
+.rcw-close {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  border: none;
+  background: transparent;
+  color: var(--color-muted-foreground);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+}
+.rcw-close:hover { color: var(--color-foreground); }
+.rcw-h {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-foreground);
+  padding-right: 28px;
+}
+.rcw-sub {
+  margin-top: 6px;
+  margin-bottom: 18px;
+  font-size: 12.5px;
+  color: var(--color-muted-foreground);
+}
+.rcw-error {
+  margin-bottom: 14px;
+  padding: 8px 12px;
+  font-size: 12px;
+  border-radius: var(--radius-lg);
+  color: var(--color-error-fg, #b91c1c);
+  background: var(--color-error-bg, rgba(220, 38, 38, 0.08));
+  border: 1px solid var(--color-error-fg, rgba(220, 38, 38, 0.3));
+  word-break: break-word;
+}
+.rcw-methods {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+.rcw-method {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 20px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  background: var(--color-background);
+  cursor: pointer;
+  color: var(--color-foreground);
+  transition: border-color 0.15s, background 0.15s;
+  text-align: left;
+}
+.rcw-method:hover { border-color: color-mix(in srgb, var(--color-foreground) 30%, transparent); }
+.rcw-method.active {
+  border-color: var(--color-foreground);
+  background: var(--color-surface);
+}
+.rcw-method-name { font-size: 15px; font-weight: 600; }
+.rcw-method-desc { font-size: 12px; color: var(--color-muted-foreground); }
+.rcw-row { display: flex; gap: 12px; }
+.rcw-field {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin-bottom: 14px;
+}
+.rcw-field.grow { flex: 1; min-width: 0; }
+.rcw-field.port { width: 96px; flex-shrink: 0; }
+.rcw-field label { font-size: 12px; color: var(--color-muted-foreground); }
+.rcw-input {
+  width: 100%;
+  padding: 9px 11px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-background);
+  color: var(--color-foreground);
+  font-size: 13px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.rcw-input:focus { border-color: var(--color-accent-neutral); }
+.rcw-input.mono { font-family: var(--font-mono); font-size: 12px; }
+.rcw-input.mini { width: 120px; padding: 5px 9px; font-size: 12px; }
+.rcw-input:disabled { opacity: 0.55; }
+.rcw-seg {
+  display: flex;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.rcw-seg button {
+  padding: 8px 14px;
+  border: none;
+  background: var(--color-background);
+  color: var(--color-muted-foreground);
+  font-size: 12.5px;
+  cursor: pointer;
+}
+.rcw-seg button.on {
+  background: var(--color-foreground);
+  color: var(--color-background);
+}
+.rcw-seg button:disabled { opacity: 0.55; cursor: not-allowed; }
+.rcw-dirbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  margin-bottom: 8px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-background);
+}
+.rcw-back {
+  display: grid;
+  place-items: center;
+  border: none;
+  background: transparent;
+  color: var(--color-muted-foreground);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.rcw-back:hover { color: var(--color-foreground); }
+.rcw-dir-path {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--color-foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rcw-dirlist {
+  height: 190px;
+  overflow-y: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-background);
+  padding: 4px;
+}
+.rcw-dir-row {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-md);
+  color: var(--color-foreground);
+  font-size: 13px;
+  cursor: pointer;
+  text-align: left;
+}
+.rcw-dir-row:hover { background: var(--color-muted); }
+.rcw-dir-row svg { color: var(--color-muted-foreground); flex-shrink: 0; }
+.rcw-up { width: 14px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--color-muted-foreground); }
+.rcw-ctr-name { font-weight: 500; flex-shrink: 0; }
+.rcw-ctr-img {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  color: var(--color-muted-foreground);
+}
+.rcw-ctr-state {
+  flex-shrink: 0;
+  font-size: 11px;
+  padding: 2px 7px;
+  border-radius: 999px;
+  background: var(--color-muted);
+  color: var(--color-muted-foreground);
+}
+.rcw-ctr-state.on {
+  background: color-mix(in srgb, var(--color-success, #16a34a) 18%, transparent);
+  color: var(--color-success, #16a34a);
+}
+.rcw-hint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px;
+  font-size: 12px;
+  color: var(--color-muted-foreground);
+}
+.rcw-save {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+  font-size: 12.5px;
+  color: var(--color-muted-foreground);
+  cursor: pointer;
+}
+.rcw-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 22px;
+}
+.rcw-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 9px 18px;
+  border: none;
+  border-radius: var(--radius-lg);
+  background: var(--color-accent-neutral);
+  color: var(--color-surface);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.rcw-primary:hover:not(:disabled) { opacity: 0.9; }
+.rcw-primary:disabled { opacity: 0.6; cursor: not-allowed; }
+.rcw-ghost {
+  padding: 9px 16px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: transparent;
+  color: var(--color-foreground);
+  font-size: 13px;
+  cursor: pointer;
+}
+.rcw-ghost:disabled { opacity: 0.5; cursor: not-allowed; }
+.rcw-disabled { opacity: 0.55; pointer-events: none; }
+.spin { animation: rcw-spin 0.8s linear infinite; }
+@keyframes rcw-spin { to { transform: rotate(360deg); } }
+@media (max-width: 720px) {
+  .rcw-rail { display: none; }
+  .rcw { height: auto; max-height: 90vh; }
+}
+`
diff --git a/web/src/components/RemoteConnectWizard.vue b/web/src/components/RemoteConnectWizard.vue
deleted file mode 100644
index 9f491cee..00000000
--- a/web/src/components/RemoteConnectWizard.vue
+++ /dev/null
@@ -1,1124 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch, computed } from 'vue'
-import {
-  Dialog,
-  DialogPanel,
-  TransitionRoot,
-  TransitionChild,
-  Listbox,
-  ListboxButton,
-  ListboxOptions,
-  ListboxOption,
-} from '@headlessui/vue'
-import {
-  ServerIcon,
-  CubeIcon,
-  XMarkIcon,
-  ArrowLeftIcon,
-  FolderIcon,
-  ArrowPathIcon,
-  CheckIcon,
-  ChevronRightIcon,
-  ChevronUpDownIcon,
-} from '@heroicons/vue/24/outline'
-import { useI18n } from 'vue-i18n'
-import { useChatStore } from '@/stores/chat'
-import { useProjectStore } from '@/stores/project'
-import { api } from '@/composables/api'
-import type { RemoteMeta, SSHAlias, RemoteAuthMethod, DockerContainer } from '@/types/api'
-
-type Prefill = RemoteMeta & { loadTaskUuid?: string }
-
-const { t } = useI18n()
-
-const props = defineProps<{
-  open: boolean
-  prefill?: Prefill | null
-}>()
-
-const emit = defineEmits<{
-  close: []
-  bound: []
-}>()
-
-const store = useChatStore()
-const projectStore = useProjectStore()
-
-type Step = 'method' | 'config' | 'docker' | 'connecting' | 'dir'
-const step = ref<Step>('method')
-const method = ref<'ssh' | 'docker'>('ssh')
-
-const form = reactive({
-  host: '',
-  port: 22,
-  user: 'root',
-  authMethod: 'key' as RemoteAuthMethod,
-  password: '',
-  keyPath: '~/.ssh/id_rsa',
-  passphrase: '',
-})
-
-const aliases = ref<SSHAlias[]>([])
-const selectedAlias = ref('')
-
-// Docker container picker state.
-const containers = ref<DockerContainer[]>([])
-const containersLoading = ref(false)
-const selectedContainer = ref('')
-
-// Label shown on the alias Listbox button (mirrors the option text).
-const selectedAliasLabel = computed(() => {
-  const a = aliases.value.find((x) => x.name === selectedAlias.value)
-  return a ? `${a.name} — ${a.addr}` : t('settings.ssh.noAlias')
-})
-
-const error = ref('')
-const connectionId = ref('')
-const bound = ref(false)
-
-// Directory picker state.
-const currentDir = ref('')
-const dirs = ref<string[]>([])
-const dirLoading = ref(false)
-
-// Optional custom name for the saved alias (defaults to user@host on bind).
-const aliasName = ref('')
-
-const steps = computed<{ key: Step; label: string }[]>(() => [
-  { key: 'method', label: t('wizard.steps.chooseMethod') },
-  { key: 'config', label: t('wizard.steps.configure') },
-  { key: 'connecting', label: t('wizard.steps.connecting') },
-  { key: 'dir', label: t('wizard.steps.selectDirectory') },
-])
-const stepIndex = computed(() => {
-  // The docker container picker occupies the same rail position as SSH config.
-  const key = step.value === 'docker' ? 'config' : step.value
-  return steps.value.findIndex((s) => s.key === key)
-})
-
-watch(() => props.open, (isOpen) => {
-  if (!isOpen) return
-  resetState()
-  void loadAliases()
-  if (props.prefill) {
-    // A prefill that carries a known remote path is a *reconnect* (reopening a
-    // remote workspace/task that was connected before). Since we never persist
-    // the SSH secret, the link must be re-established — but for key/agent auth
-    // (the common case) we can do it silently instead of making the user re-fill
-    // the form. Fall back to the form only if the key isn't accepted.
-    if (props.prefill.kind === 'docker') {
-      void autoReconnectDocker(props.prefill)
-    } else if (props.prefill.remotePath) {
-      void autoReconnect(props.prefill)
-    } else {
-      applyPrefill(props.prefill)
-    }
-  }
-})
-
-function resetState() {
-  step.value = 'method'
-  method.value = 'ssh'
-  form.host = ''
-  form.port = 22
-  form.user = 'root'
-  form.authMethod = 'key'
-  form.password = ''
-  form.keyPath = '~/.ssh/id_rsa'
-  form.passphrase = ''
-  selectedAlias.value = ''
-  containers.value = []
-  selectedContainer.value = ''
-  error.value = ''
-  connectionId.value = ''
-  bound.value = false
-  currentDir.value = ''
-  dirs.value = []
-  aliasName.value = ''
-}
-
-function applyPrefill(p: Prefill) {
-  // host may carry a port (e.g. "1.2.3.4:22"); split it out for the form.
-  const colon = p.host.lastIndexOf(':')
-  form.host = colon >= 0 ? p.host.slice(0, colon) : p.host
-  form.port = p.port || 22
-  form.user = p.user || 'root'
-  // Jump straight to the config step for a reconnect.
-  step.value = 'config'
-}
-
-// Seamless reconnect: try key/agent auth to the known remote path and bind
-// straight to it (loading the task if one was requested), so reopening a remote
-// workspace doesn't make the user walk the wizard again. Any failure (password
-// auth, non-default key, passphrase, missing path) drops to the prefilled form.
-async function autoReconnect(p: Prefill) {
-  applyPrefill(p)
-  step.value = 'connecting'
-  try {
-    const res = await api.remoteConnect({
-      type: 'ssh',
-      host: form.host.trim(),
-      port: form.port || 22,
-      user: form.user.trim() || 'root',
-      auth_method: 'key',
-      key_path: form.keyPath.trim(),
-    })
-    connectionId.value = res.connection_id
-    currentDir.value = p.remotePath && p.remotePath !== '/' ? p.remotePath : res.remote_pwd
-    await bindHere()
-    // bindHere closes on success; if it failed, let the user pick a directory.
-    if (!bound.value) {
-      if (connectionId.value) {
-        await listDir(currentDir.value)
-        step.value = 'dir'
-      } else {
-        step.value = 'config'
-      }
-    }
-  } catch {
-    // Key/agent auth not accepted — fall back to the prefilled form (no scary
-    // error; the user just chooses auth + connects manually).
-    error.value = ''
-    step.value = 'config'
-  }
-}
-
-async function loadAliases() {
-  try {
-    const res = await api.sshList()
-    aliases.value = res.aliases || []
-  } catch {
-    aliases.value = []
-  }
-}
-
-function applyAlias(name: string) {
-  selectedAlias.value = name
-  const a = aliases.value.find((x) => x.name === name)
-  if (!a) return
-  // addr is "user@host" (host may include :port).
-  const at = a.addr.indexOf('@')
-  const user = at >= 0 ? a.addr.slice(0, at) : ''
-  let host = at >= 0 ? a.addr.slice(at + 1) : a.addr
-  const colon = host.lastIndexOf(':')
-  if (colon >= 0) {
-    form.port = parseInt(host.slice(colon + 1), 10) || 22
-    host = host.slice(0, colon)
-  }
-  if (user) form.user = user
-  form.host = host
-}
-
-function chooseMethod(m: 'ssh' | 'docker') {
-  method.value = m
-}
-
-function proceedFromMethod() {
-  if (method.value === 'docker') {
-    step.value = 'docker'
-    void loadContainers()
-  } else {
-    step.value = 'config'
-  }
-}
-
-async function loadContainers() {
-  containersLoading.value = true
-  error.value = ''
-  try {
-    const res = await api.dockerContainers()
-    // Running containers first, then by name.
-    containers.value = (res.containers || []).slice().sort((a, b) => {
-      if (a.running !== b.running) return a.running ? -1 : 1
-      return (a.name || a.id).localeCompare(b.name || b.id)
-    })
-  } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : 'Failed to list containers'
-    containers.value = []
-  } finally {
-    containersLoading.value = false
-  }
-}
-
-async function connectDocker(container: string) {
-  if (!container) return
-  await discardConnection()
-  selectedContainer.value = container
-  error.value = ''
-  step.value = 'connecting'
-  try {
-    const res = await api.remoteConnect({ type: 'docker', container })
-    connectionId.value = res.connection_id
-    await listDir(res.remote_pwd)
-    step.value = 'dir'
-  } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : 'Connection failed'
-    step.value = 'docker'
-  }
-}
-
-// Seamless docker reconnect: re-attach to the known container and bind straight
-// to its previous path. Falls back to the container picker on any failure.
-async function autoReconnectDocker(p: Prefill) {
-  method.value = 'docker'
-  if (!p.container) {
-    step.value = 'docker'
-    void loadContainers()
-    return
-  }
-  step.value = 'connecting'
-  try {
-    const res = await api.remoteConnect({ type: 'docker', container: p.container })
-    connectionId.value = res.connection_id
-    currentDir.value = p.remotePath && p.remotePath !== '/' ? p.remotePath : res.remote_pwd
-    await bindHere()
-    if (!bound.value && connectionId.value) {
-      await listDir(currentDir.value)
-      step.value = 'dir'
-    }
-  } catch {
-    error.value = ''
-    step.value = 'docker'
-    void loadContainers()
-  }
-}
-
-// discardConnection releases an established-but-unbound SSH connection so it
-// doesn't linger in the backend's pending registry (up to its TTL).
-async function discardConnection() {
-  if (connectionId.value && !bound.value) {
-    try { await api.remoteCancel(connectionId.value) } catch { /* ignore */ }
-  }
-  connectionId.value = ''
-}
-
-function backToConfig() {
-  void discardConnection()
-  step.value = 'config'
-}
-
-async function connect() {
-  if (!form.host.trim()) {
-    error.value = 'Host is required'
-    return
-  }
-  // Drop any prior pending connection (e.g. user went back and reconnected).
-  await discardConnection()
-  error.value = ''
-  step.value = 'connecting'
-  try {
-    const res = await api.remoteConnect({
-      type: 'ssh',
-      host: form.host.trim(),
-      port: form.port || 22,
-      user: form.user.trim() || 'root',
-      auth_method: form.authMethod,
-      password: form.authMethod === 'password' ? form.password : undefined,
-      key_path: form.authMethod === 'key' ? form.keyPath.trim() : undefined,
-      passphrase: form.authMethod === 'key' ? form.passphrase : undefined,
-    })
-    connectionId.value = res.connection_id
-    await listDir(res.remote_pwd)
-    step.value = 'dir'
-  } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : 'Connection failed'
-    step.value = 'config'
-  }
-}
-
-async function listDir(path: string) {
-  if (!connectionId.value) return
-  dirLoading.value = true
-  error.value = ''
-  try {
-    const res = await api.remoteListDir(connectionId.value, path)
-    currentDir.value = res.path
-    dirs.value = res.dirs
-  } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : 'Failed to list directory'
-  } finally {
-    dirLoading.value = false
-  }
-}
-
-function navigate(name: string) {
-  if (name === '..') {
-    const parts = currentDir.value.split('/')
-    parts.pop()
-    listDir(parts.join('/') || '/')
-    return
-  }
-  const base = currentDir.value.endsWith('/') ? currentDir.value : currentDir.value + '/'
-  listDir(base + name)
-}
-
-const binding = ref(false)
-async function bindHere() {
-  if (!connectionId.value || binding.value) return
-  binding.value = true
-  error.value = ''
-  try {
-    const res = await api.remoteBind(connectionId.value, currentDir.value)
-    const isDocker = res.kind === 'docker'
-    const proj = projectStore.upsertRemoteProject(res.label, isDocker
-      ? { kind: 'docker', host: '', user: '', port: 0, remotePath: res.remote_path, container: res.container }
-      : { kind: 'ssh', host: res.host, user: res.user, port: res.port, remotePath: res.remote_path })
-    projectStore.setActive(proj.id)
-    bound.value = true
-    connectionId.value = '' // ownership transferred; do not cancel on close
-
-    // Always persist the target to config so it returns for one-click reconnects
-    // next time — no opt-in needed. Use the custom name when given, otherwise
-    // derive a stable one. Secrets are never stored.
-    if (isDocker) {
-      const container = res.container || ''
-      const name = aliasName.value.trim() || container || 'container'
-      try {
-        await api.remoteSaveDockerAlias(name, container, res.remote_path)
-      } catch (e: unknown) {
-        console.error('Failed to save Docker alias:', e)
-      }
-    } else {
-      const addr = `${res.user}@${res.host}`
-      const name = aliasName.value.trim() || addr
-      try {
-        await api.remoteSaveAlias(name, addr, res.remote_path)
-      } catch (e: unknown) {
-        console.error('Failed to save SSH alias:', e)
-      }
-    }
-
-    await store.resetToWelcomeAfterSwitch()
-    if (props.prefill?.loadTaskUuid) {
-      await store.loadSession(props.prefill.loadTaskUuid)
-    }
-    emit('bound')
-    emit('close')
-  } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : 'Failed to bind workspace'
-  } finally {
-    binding.value = false
-  }
-}
-
-function close() {
-  void discardConnection()
-  emit('close')
-}
-</script>
-
-<template>
-  <TransitionRoot :show="open" as="template">
-    <Dialog class="relative z-50" @close="close">
-      <TransitionChild
-        enter="ease-out duration-150" enter-from="opacity-0" enter-to="opacity-100"
-        leave="ease-in duration-100" leave-from="opacity-100" leave-to="opacity-0"
-      >
-        <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"
-          leave="ease-in duration-100" leave-from="opacity-100 translate-y-0" leave-to="opacity-0 translate-y-2"
-        >
-          <DialogPanel class="rcw">
-            <!-- Step rail -->
-            <div class="rcw-rail">
-              <div class="rcw-rail-title">{{ t('wizard.title') }}</div>
-              <ol class="rcw-steps">
-                <li
-                  v-for="(s, i) in steps"
-                  :key="s.key"
-                  class="rcw-step"
-                  :class="{ done: i < stepIndex, current: i === stepIndex }"
-                >
-                  <span class="rcw-step-dot">
-                    <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>
-                </li>
-              </ol>
-            </div>
-
-            <!-- Content -->
-            <div class="rcw-body">
-              <button class="rcw-close" @click="close"><XMarkIcon class="w-4 h-4" /></button>
-
-              <!-- Step 1: method -->
-              <template v-if="step === 'method'">
-                <h3 class="rcw-h">{{ t('wizard.chooseMethod') }}</h3>
-                <p class="rcw-sub">{{ t('wizard.pickMethodDesc') }}</p>
-                <div class="rcw-methods">
-                  <button class="rcw-method" :class="{ active: method === 'ssh' }" @click="chooseMethod('ssh')">
-                    <ServerIcon class="w-5 h-5" />
-                    <span class="rcw-method-name">{{ t('wizard.ssh') }}</span>
-                    <span class="rcw-method-desc">{{ t('wizard.remoteHost') }}</span>
-                  </button>
-                  <button class="rcw-method" :class="{ active: method === 'docker' }" @click="chooseMethod('docker')">
-                    <CubeIcon class="w-5 h-5" />
-                    <span class="rcw-method-name">{{ t('wizard.docker') }}</span>
-                    <span class="rcw-method-desc">{{ t('wizard.container') }}</span>
-                  </button>
-                </div>
-                <div class="rcw-foot">
-                  <span />
-                  <button class="rcw-primary" @click="proceedFromMethod">{{ t('wizard.next') }} <ChevronRightIcon class="w-3.5 h-3.5" /></button>
-                </div>
-              </template>
-
-              <!-- Step 2: config (SSH) -->
-              <template v-else-if="step === 'config' || (step === 'connecting' && method !== 'docker')">
-                <h3 class="rcw-h">{{ t('wizard.sshConnection') }}</h3>
-                <p class="rcw-sub">{{ t('wizard.sshDesc') }}</p>
-
-                <div v-if="error" class="rcw-error">{{ error }}</div>
-
-                <div v-if="aliases.length > 0" class="rcw-field">
-                  <label>{{ t('settings.ssh.savedAlias') }}</label>
-                  <Listbox
-                    :model-value="selectedAlias"
-                    :disabled="step === 'connecting'"
-                    @update:model-value="applyAlias"
-                  >
-                    <div class="rcw-listbox">
-                      <ListboxButton class="rcw-input rcw-select">
-                        <span class="rcw-select-label" :class="{ placeholder: !selectedAlias }">{{ selectedAliasLabel }}</span>
-                        <ChevronUpDownIcon class="rcw-select-chevron" />
-                      </ListboxButton>
-                      <transition
-                        enter-active-class="pop-enter-active"
-                        enter-from-class="pop-enter-from"
-                        leave-active-class="pop-leave-active"
-                        leave-to-class="pop-leave-to"
-                      >
-                        <ListboxOptions class="rcw-options">
-                          <ListboxOption v-slot="{ active, selected }" :value="''" as="template">
-                            <li class="rcw-option" :class="{ active }">
-                              <span class="rcw-option-text">{{ t('settings.ssh.noAlias') }}</span>
-                              <CheckIcon v-if="selected" class="rcw-option-check" />
-                            </li>
-                          </ListboxOption>
-                          <ListboxOption
-                            v-for="a in aliases"
-                            :key="a.name"
-                            v-slot="{ active, selected }"
-                            :value="a.name"
-                            as="template"
-                          >
-                            <li class="rcw-option" :class="{ active }">
-                              <span class="rcw-option-text">{{ a.name }} — {{ a.addr }}</span>
-                              <CheckIcon v-if="selected" class="rcw-option-check" />
-                            </li>
-                          </ListboxOption>
-                        </ListboxOptions>
-                      </transition>
-                    </div>
-                  </Listbox>
-                </div>
-
-                <div class="rcw-row">
-                  <div class="rcw-field grow">
-                    <label>{{ t('settings.ssh.host') }}</label>
-                    <input v-model="form.host" class="rcw-input" :placeholder="t('wizard.hostPlaceholder')" :disabled="step === 'connecting'" />
-                  </div>
-                  <div class="rcw-field port">
-                    <label>{{ t('settings.ssh.port') }}</label>
-                    <input v-model.number="form.port" type="number" class="rcw-input" :disabled="step === 'connecting'" />
-                  </div>
-                </div>
-
-                <div class="rcw-row">
-                  <div class="rcw-field grow">
-                    <label>{{ t('settings.ssh.user') }}</label>
-                    <input v-model="form.user" class="rcw-input" :placeholder="t('wizard.userPlaceholder')" :disabled="step === 'connecting'" />
-                  </div>
-                  <div class="rcw-field">
-                    <label>{{ t('wizard.auth') }}</label>
-                    <div class="rcw-seg">
-                      <button :class="{ on: form.authMethod === 'password' }" :disabled="step === 'connecting'" @click="form.authMethod = 'password'">{{ t('settings.ssh.password') }}</button>
-                      <button :class="{ on: form.authMethod === 'key' }" :disabled="step === 'connecting'" @click="form.authMethod = 'key'">{{ t('settings.ssh.key') }}</button>
-                    </div>
-                  </div>
-                </div>
-
-                <template v-if="form.authMethod === 'password'">
-                  <div class="rcw-field">
-                    <label>{{ t('settings.ssh.password') }}</label>
-                    <input v-model="form.password" type="password" class="rcw-input" :disabled="step === 'connecting'" />
-                  </div>
-                </template>
-                <template v-else>
-                  <div class="rcw-field">
-                    <label>{{ t('settings.ssh.privateKeyPath') }}</label>
-                    <input v-model="form.keyPath" class="rcw-input mono" placeholder="~/.ssh/id_rsa" :disabled="step === 'connecting'" />
-                  </div>
-                  <div class="rcw-field">
-                    <label>{{ t('settings.ssh.passphrase') }}</label>
-                    <input v-model="form.passphrase" type="password" class="rcw-input" :disabled="step === 'connecting'" />
-                  </div>
-                </template>
-
-                <div class="rcw-foot">
-                  <button class="rcw-ghost" :disabled="step === 'connecting'" @click="step = 'method'">{{ t('common.back') }}</button>
-                  <button class="rcw-primary" :disabled="step === 'connecting'" @click="connect">
-                    <ArrowPathIcon v-if="step === 'connecting'" class="w-3.5 h-3.5 spin" />
-                    {{ step === 'connecting' ? t('wizard.connecting') : t('wizard.connect') }}
-                  </button>
-                </div>
-              </template>
-
-              <!-- Step 2b: docker container picker -->
-              <template v-else-if="step === 'docker' || (step === 'connecting' && method === 'docker')">
-                <h3 class="rcw-h">{{ t('wizard.dockerConnection') }}</h3>
-                <p class="rcw-sub">{{ t('wizard.dockerDesc') }}</p>
-
-                <div v-if="error" class="rcw-error">{{ error }}</div>
-
-                <div v-if="step === 'connecting'" class="rcw-hint">
-                  <ArrowPathIcon class="w-3.5 h-3.5 spin" /> {{ t('wizard.connecting') }}
-                </div>
-                <template v-else>
-                  <div class="rcw-dirbar">
-                    <span class="rcw-dir-path">{{ t('wizard.selectContainer') }}</span>
-                    <button class="rcw-back" style="margin-left:auto" :title="t('wizard.refresh')" @click="loadContainers">
-                      <ArrowPathIcon class="w-3.5 h-3.5" :class="{ spin: containersLoading }" />
-                    </button>
-                  </div>
-
-                  <div class="rcw-dirlist">
-                    <div v-if="containersLoading" class="rcw-hint"><ArrowPathIcon class="w-3.5 h-3.5 spin" /> {{ t('wizard.loading') }}</div>
-                    <template v-else>
-                      <button
-                        v-for="c in containers"
-                        :key="c.id"
-                        class="rcw-dir-row"
-                        @click="connectDocker(c.name || c.id)"
-                      >
-                        <CubeIcon class="w-3.5 h-3.5" />
-                        <span class="rcw-ctr-name">{{ c.name || c.id.slice(0, 12) }}</span>
-                        <span class="rcw-ctr-img">{{ c.image }}</span>
-                        <span class="rcw-ctr-state" :class="{ on: c.running }">{{ c.running ? t('wizard.running') : t('wizard.stopped') }}</span>
-                      </button>
-                      <div v-if="containers.length === 0" class="rcw-hint">{{ t('wizard.noContainers') }}</div>
-                    </template>
-                  </div>
-
-                  <div class="rcw-foot">
-                    <button class="rcw-ghost" @click="step = 'method'">{{ t('common.back') }}</button>
-                    <span />
-                  </div>
-                </template>
-              </template>
-
-              <!-- Step 4: directory -->
-              <template v-else-if="step === 'dir'">
-                <h3 class="rcw-h">{{ t('wizard.selectDirectory') }}</h3>
-                <p class="rcw-sub">{{ t('wizard.dirDesc') }}</p>
-
-                <div v-if="error" class="rcw-error">{{ error }}</div>
-
-                <div class="rcw-dirbar">
-                  <button class="rcw-back" :title="t('wizard.backToConfig')" @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"><ArrowPathIcon class="w-3.5 h-3.5 spin" /> {{ t('wizard.loading') }}</div>
-                  <template v-else>
-                    <button
-                      v-for="d in dirs"
-                      :key="d"
-                      class="rcw-dir-row"
-                      @click="navigate(d)"
-                    >
-                      <FolderIcon class="w-3.5 h-3.5" />
-                      <span>{{ d }}</span>
-                    </button>
-                    <div v-if="dirs.length === 0" class="rcw-hint">{{ t('wizard.noSubDirs') }}</div>
-                  </template>
-                </div>
-
-                <label class="rcw-save">
-                  <span>{{ t('wizard.saveAlias') }}</span>
-                  <input v-model="aliasName" class="rcw-input mini" :placeholder="t('wizard.aliasNamePlaceholder')" />
-                </label>
-
-                <div class="rcw-foot">
-                  <button class="rcw-ghost" :disabled="binding" @click="close">{{ t('common.cancel') }}</button>
-                  <button class="rcw-primary" :disabled="binding" @click="bindHere">
-                    <ArrowPathIcon v-if="binding" class="w-3.5 h-3.5 spin" />
-                    {{ t('wizard.useDirectory') }}
-                  </button>
-                </div>
-              </template>
-            </div>
-          </DialogPanel>
-        </TransitionChild>
-      </div>
-    </Dialog>
-  </TransitionRoot>
-</template>
-
-<style scoped>
-.rcw {
-  display: flex;
-  width: 900px;
-  max-width: calc(100vw - 32px);
-  height: 600px;
-  max-height: 86vh;
-  overflow: hidden;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl, 16px);
-  box-shadow: var(--shadow-lg);
-}
-
-/* Rail */
-.rcw-rail {
-  width: 220px;
-  flex-shrink: 0;
-  padding: 22px 18px;
-  background: var(--color-background);
-  border-right: 1px solid var(--color-border);
-}
-.rcw-rail-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--color-muted-foreground);
-  margin-bottom: 22px;
-}
-.rcw-steps {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.rcw-step {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 9px 10px;
-  border-radius: var(--radius-lg);
-  color: var(--color-muted-foreground);
-}
-.rcw-step.current {
-  background: var(--color-surface);
-  color: var(--color-foreground);
-}
-.rcw-step-dot {
-  display: grid;
-  place-items: center;
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-  border-radius: 50%;
-  border: 1px solid var(--color-border);
-  font-size: 12px;
-  font-weight: 600;
-}
-.rcw-step.current .rcw-step-dot {
-  background: var(--color-foreground);
-  color: var(--color-background);
-  border-color: var(--color-foreground);
-}
-.rcw-step.done .rcw-step-dot {
-  background: var(--color-success);
-  border-color: var(--color-success);
-  color: var(--color-surface);
-}
-.rcw-step-label {
-  font-size: 13px;
-}
-
-/* Body */
-.rcw-body {
-  flex: 1;
-  min-width: 0;
-  position: relative;
-  padding: 24px 26px;
-  overflow-y: auto;
-}
-.rcw-close {
-  position: absolute;
-  top: 18px;
-  right: 18px;
-  border: none;
-  background: transparent;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-}
-.rcw-close:hover {
-  color: var(--color-foreground);
-}
-.rcw-h {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--color-foreground);
-}
-.rcw-sub {
-  margin-top: 6px;
-  margin-bottom: 18px;
-  font-size: 12.5px;
-  color: var(--color-muted-foreground);
-}
-.rcw-error {
-  margin-bottom: 14px;
-  padding: 8px 12px;
-  font-size: 12px;
-  border-radius: var(--radius-lg);
-  color: var(--color-error-fg, #b91c1c);
-  background: var(--color-error-bg, rgba(220, 38, 38, 0.08));
-  border: 1px solid var(--color-error-fg, rgba(220, 38, 38, 0.3));
-  word-break: break-word;
-}
-
-/* Methods */
-.rcw-methods {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 14px;
-}
-.rcw-method {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 20px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  background: var(--color-background);
-  cursor: pointer;
-  color: var(--color-foreground);
-  transition: border-color 0.15s, background 0.15s;
-}
-.rcw-method:hover:not(.disabled) {
-  border-color: color-mix(in srgb, var(--color-foreground) 30%, transparent);
-}
-.rcw-method.active {
-  border-color: var(--color-foreground);
-  background: var(--color-surface);
-}
-.rcw-method.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.rcw-method-name {
-  font-size: 15px;
-  font-weight: 600;
-}
-.rcw-method-desc {
-  font-size: 12px;
-  color: var(--color-muted-foreground);
-}
-
-/* Form */
-.rcw-row {
-  display: flex;
-  gap: 12px;
-}
-.rcw-field {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  margin-bottom: 14px;
-}
-.rcw-field.grow {
-  flex: 1;
-  min-width: 0;
-}
-.rcw-field.port {
-  width: 96px;
-  flex-shrink: 0;
-}
-.rcw-field label {
-  font-size: 12px;
-  color: var(--color-muted-foreground);
-}
-.rcw-input {
-  width: 100%;
-  padding: 9px 11px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: var(--color-background);
-  color: var(--color-foreground);
-  font-size: 13px;
-  outline: none;
-  transition: border-color 0.15s;
-}
-.rcw-input:focus {
-  border-color: var(--color-accent-neutral);
-}
-.rcw-input.mono {
-  font-family: var(--font-mono);
-  font-size: 12px;
-}
-.rcw-input.mini {
-  width: 120px;
-  padding: 5px 9px;
-  font-size: 12px;
-}
-
-/* Alias picker — Headless UI Listbox styled to match .rcw-input fields. */
-.rcw-listbox {
-  position: relative;
-}
-.rcw-select {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  text-align: left;
-  font-family: inherit;
-  cursor: pointer;
-}
-.rcw-select:focus,
-.rcw-select:focus-visible {
-  border-color: var(--color-accent-neutral);
-}
-.rcw-select-label {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.rcw-select-label.placeholder {
-  color: var(--color-muted-foreground);
-}
-.rcw-select-chevron {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  color: var(--color-muted-foreground);
-}
-.rcw-options {
-  position: absolute;
-  z-index: var(--z-dropdown);
-  top: calc(100% + 4px);
-  left: 0;
-  right: 0;
-  max-height: 240px;
-  overflow-y: auto;
-  margin: 0;
-  padding: 4px;
-  list-style: none;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-md);
-  outline: none;
-}
-.rcw-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 7px 9px;
-  border-radius: var(--radius-md);
-  font-size: 13px;
-  color: var(--color-foreground);
-  cursor: pointer;
-}
-.rcw-option.active {
-  background: var(--color-secondary);
-}
-.rcw-option-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.rcw-option-check {
-  width: 15px;
-  height: 15px;
-  flex-shrink: 0;
-  color: var(--color-accent);
-}
-.pop-enter-active,
-.pop-leave-active {
-  transition: opacity 0.12s ease, transform 0.12s ease;
-}
-.pop-enter-from,
-.pop-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-.rcw-seg {
-  display: flex;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-}
-.rcw-seg button {
-  padding: 8px 14px;
-  border: none;
-  background: var(--color-background);
-  color: var(--color-muted-foreground);
-  font-size: 12.5px;
-  cursor: pointer;
-}
-.rcw-seg button.on {
-  background: var(--color-foreground);
-  color: var(--color-background);
-}
-
-/* Directory list */
-.rcw-dirbar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  margin-bottom: 8px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: var(--color-background);
-}
-.rcw-back {
-  display: grid;
-  place-items: center;
-  border: none;
-  background: transparent;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  flex-shrink: 0;
-}
-.rcw-back:hover {
-  color: var(--color-foreground);
-}
-.rcw-dir-path {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  color: var(--color-foreground);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.rcw-dirlist {
-  height: 190px;
-  overflow-y: auto;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: var(--color-background);
-  padding: 4px;
-}
-.rcw-dir-row {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  width: 100%;
-  padding: 8px 10px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  color: var(--color-foreground);
-  font-size: 13px;
-  cursor: pointer;
-  text-align: left;
-}
-.rcw-dir-row:hover {
-  background: var(--color-muted);
-}
-.rcw-dir-row svg {
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-.rcw-ctr-name {
-  font-weight: 500;
-  flex-shrink: 0;
-}
-.rcw-ctr-img {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12px;
-  color: var(--color-muted-foreground);
-}
-.rcw-ctr-state {
-  flex-shrink: 0;
-  font-size: 11px;
-  padding: 2px 7px;
-  border-radius: 999px;
-  background: var(--color-muted);
-  color: var(--color-muted-foreground);
-}
-.rcw-ctr-state.on {
-  background: color-mix(in srgb, var(--color-success) 18%, transparent);
-  color: var(--color-success);
-}
-.rcw-hint {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 24px;
-  font-size: 12px;
-  color: var(--color-muted-foreground);
-}
-.rcw-save {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 12px;
-  font-size: 12.5px;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-}
-
-/* Footer */
-.rcw-foot {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 22px;
-}
-.rcw-primary {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 9px 18px;
-  border: none;
-  border-radius: var(--radius-lg);
-  background: var(--color-accent-neutral);
-  color: var(--color-surface);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: opacity 0.15s;
-}
-.rcw-primary:hover:not(:disabled) {
-  opacity: 0.9;
-}
-.rcw-primary:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-.rcw-ghost {
-  padding: 9px 16px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: transparent;
-  color: var(--color-foreground);
-  font-size: 13px;
-  cursor: pointer;
-}
-.rcw-ghost:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.spin {
-  animation: rcw-spin 0.8s linear infinite;
-}
-@keyframes rcw-spin {
-  to { transform: rotate(360deg); }
-}
-</style>
diff --git a/web-react/src/components/RightPanel.tsx b/web/src/components/RightPanel.tsx
similarity index 100%
rename from web-react/src/components/RightPanel.tsx
rename to web/src/components/RightPanel.tsx
diff --git a/web/src/components/RightPanel.vue b/web/src/components/RightPanel.vue
deleted file mode 100644
index d7ae2d45..00000000
--- a/web/src/components/RightPanel.vue
+++ /dev/null
@@ -1,241 +0,0 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { XMarkIcon } from '@heroicons/vue/24/outline'
-import { useI18n } from 'vue-i18n'
-import FileTreePanel from './FileTreePanel.vue'
-import DiffViewer from './DiffViewer.vue'
-import TaskList from './TaskList.vue'
-import { useChatStore } from '@/stores/chat'
-
-defineProps<{
-  activeTab: 'files' | 'changes' | 'plan'
-}>()
-
-const emit = defineEmits<{
-  close: []
-  'switch-tab': [tab: 'files' | 'changes' | 'plan']
-}>()
-
-const store = useChatStore()
-const { t } = useI18n()
-const total = computed(() => store.todos.length)
-const completed = computed(() => store.todos.filter((t) => t.status === 'completed').length)
-const progressPct = computed(() => (total.value ? Math.round((completed.value / total.value) * 100) : 0))
-
-const panelWidth = ref(320)
-
-function startResize(e: MouseEvent) {
-  e.preventDefault()
-  const startX = e.clientX
-  const startWidth = panelWidth.value
-
-  function onMove(e: MouseEvent) {
-    const dx = startX - e.clientX
-    panelWidth.value = Math.min(600, Math.max(220, startWidth + dx))
-  }
-  function onUp() {
-    window.removeEventListener('mousemove', onMove)
-    window.removeEventListener('mouseup', onUp)
-  }
-  window.addEventListener('mousemove', onMove)
-  window.addEventListener('mouseup', onUp)
-}
-</script>
-
-<template>
-  <aside class="right-panel" :style="{ width: panelWidth + 'px' }">
-    <!-- Resize handle -->
-    <div class="resize-handle" @mousedown="startResize" />
-    <div class="panel-header">
-      <div class="panel-tabs">
-        <button
-          class="tab-btn"
-          :class="{ active: activeTab === 'plan' }"
-          @click="emit('switch-tab', 'plan')"
-        >
-          {{ t('rightPanel.plan') }}
-        </button>
-        <button
-          class="tab-btn"
-          :class="{ active: activeTab === 'files' }"
-          @click="emit('switch-tab', 'files')"
-        >
-          {{ t('rightPanel.files') }}
-        </button>
-        <button
-          class="tab-btn"
-          :class="{ active: activeTab === 'changes' }"
-          @click="emit('switch-tab', 'changes')"
-        >
-          {{ t('rightPanel.changes') }}
-        </button>
-      </div>
-      <button class="close-btn" @click="emit('close')">
-        <XMarkIcon class="w-3.5 h-3.5" />
-      </button>
-    </div>
-    <div class="panel-content">
-      <!-- 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">{{ t('rightPanel.plan') }}</span>
-          <div class="plan-track"><div class="plan-fill" :style="{ width: progressPct + '%' }" /></div>
-          <span class="plan-count">{{ completed }} / {{ total }}</span>
-        </div>
-        <div class="plan-list">
-          <TaskList v-if="total" :todos="store.todos" />
-          <div v-else class="plan-empty">{{ t('rightPanel.noTasks') }}</div>
-        </div>
-      </div>
-    </div>
-  </aside>
-</template>
-
-<style scoped>
-.right-panel {
-  min-width: 220px;
-  max-width: 600px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background: var(--color-background);
-  border-left: 1px solid var(--color-border);
-  overflow: hidden;
-  position: relative;
-}
-
-.panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 8px 0 12px;
-  height: 40px;
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-.panel-tabs {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.tab-btn {
-  font-size: 12px;
-  font-weight: 500;
-  padding: 4px 10px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s;
-}
-
-.tab-btn:hover {
-  color: var(--color-foreground);
-}
-
-.tab-btn.active {
-  color: var(--color-foreground);
-  background: var(--color-muted);
-}
-
-.close-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-sm);
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-}
-
-.close-btn:hover {
-  background: var(--color-muted);
-  color: var(--color-foreground);
-}
-
-.resize-handle {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 4px;
-  cursor: col-resize;
-  z-index: 10;
-  transition: background 0.15s;
-}
-
-.resize-handle:hover {
-  background: color-mix(in srgb, var(--color-accent-neutral) 40%, transparent);
-}
-
-.panel-content {
-  flex: 1;
-  overflow: hidden;
-}
-
-.plan-pane {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.plan-head {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-.plan-title {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--color-foreground);
-}
-
-.plan-track {
-  flex: 1;
-  height: 5px;
-  border-radius: var(--radius-pill);
-  background: var(--color-border);
-  overflow: hidden;
-}
-
-.plan-fill {
-  height: 100%;
-  background: var(--color-accent-neutral);
-  border-radius: var(--radius-pill);
-  transition: width var(--duration-slow) var(--ease-out);
-}
-
-.plan-count {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--color-muted-foreground);
-  white-space: nowrap;
-}
-
-.plan-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 6px;
-}
-
-.plan-empty {
-  padding: 16px 8px;
-  font-size: 13px;
-  color: var(--color-muted-foreground);
-  text-align: center;
-}
-</style>
diff --git a/web-react/src/components/SettingsDialog.tsx b/web/src/components/SettingsDialog.tsx
similarity index 87%
rename from web-react/src/components/SettingsDialog.tsx
rename to web/src/components/SettingsDialog.tsx
index b9aa7c5e..68ba9a68 100644
--- a/web-react/src/components/SettingsDialog.tsx
+++ b/web/src/components/SettingsDialog.tsx
@@ -22,7 +22,7 @@
 import { useEffect, useRef, useState } from 'react'
 import {
   Cog6ToothIcon,
-  XMarkIcon,
+  ArrowLeftIcon,
   PlusIcon,
   TrashIcon,
   ChevronDownIcon,
@@ -47,6 +47,7 @@ import { useTranslation } from 'react-i18next'
 import { useAppDispatch, useAppSelector } from '../app/hooks'
 import { uiActions, modelActions } from '../app/store'
 import { api } from '../lib/api'
+import { openRemoteConnect } from '../lib/remote'
 import { LOCALE_LABELS, SUPPORTED_LOCALES, setLocale, type SupportedLocale } from '../i18n'
 import type { BrowserConfig, BrowserStatusResponse, BrowserSitePermission } from '../lib/api'
 import type {
@@ -244,17 +245,17 @@ function cmToDetail(cm: CatalogModel): CustomModelDetail {
   }
 }
 
-function mcpStatusLabel(info: MCPServerInfo): string {
-  if (!info.enabled) return 'Disabled'
+function mcpStatusLabel(info: MCPServerInfo, t: (k: string) => string): string {
+  if (!info.enabled) return t('settings.mcp.status.disabled')
   switch (info.status) {
     case 'connected':
-      return 'Connected'
+      return t('settings.mcp.status.connected')
     case 'needs_auth':
-      return 'Login required'
+      return t('settings.mcp.status.loginRequired')
     case 'error':
-      return 'Error'
+      return t('settings.mcp.status.error')
     default:
-      return 'Configured'
+      return t('settings.mcp.status.configured')
   }
 }
 
@@ -343,9 +344,9 @@ export function SettingsDialog() {
           type="button"
           onClick={close}
           title={`${t('settings.backToWorkspace')} (Esc)`}
-          className="mt-auto flex h-9 items-center gap-1.5 rounded-[var(--radius-md)] px-2.5 text-[13px] font-medium text-[var(--color-muted-foreground)] transition-colors hover:bg-[var(--color-secondary)] hover:text-[var(--color-foreground)]"
+          className="group mt-auto flex h-9 items-center gap-1.5 rounded-[var(--radius-md)] px-2.5 text-[13px] font-medium text-[var(--color-muted-foreground)] transition-colors hover:bg-[var(--color-secondary)] hover:text-[var(--color-foreground)]"
         >
-          <XMarkIcon className="h-4 w-4" />
+          <ArrowLeftIcon className="h-4 w-4 transition-transform group-hover:-translate-x-0.5" />
           {t('settings.backToWorkspace')}
         </button>
       </nav>
@@ -381,6 +382,7 @@ export function SettingsDialog() {
 // ════════════════════════════════════════════════════════════════════════════
 
 function ProvidersTab() {
+  const { t } = useTranslation()
   const dispatch = useAppDispatch()
   const activeProvider = useAppSelector((s) => s.model.providerName)
   const activeModel = useAppSelector((s) => s.model.modelName)
@@ -592,21 +594,21 @@ function ProvidersTab() {
     <div>
       <div className="mb-4 flex items-center justify-between">
         <div className="flex items-baseline gap-2">
-          <h3 className={SECTION_TITLE}>Providers</h3>
+          <h3 className={SECTION_TITLE}>{t('settings.providers.title')}</h3>
           <span className="font-mono text-[11px] text-[var(--color-muted-foreground)]">{providers.length}</span>
         </div>
         <button type="button" className={`${BTN_SECONDARY} ${BTN_SM}`} onClick={() => setAdding(true)}>
-          <PlusIcon className="h-3.5 w-3.5" /> Add
+          <PlusIcon className="h-3.5 w-3.5" /> {t('settings.providers.addBtn')}
         </button>
       </div>
 
       {loading ? (
-        <div className="animate-pulse py-6 text-center text-xs text-[var(--color-muted-foreground)]">Loading…</div>
+        <div className="animate-pulse py-6 text-center text-xs text-[var(--color-muted-foreground)]">{t('settings.providers.loadingHint')}</div>
       ) : providers.length === 0 ? (
         <EmptyState
           Icon={CpuChipIcon}
-          title="No providers configured"
-          hint="Click Add to configure your first model provider."
+          title={t('settings.providers.noneConfigured')}
+          hint={t('settings.providers.noneHint', { btn: t('settings.providers.addBtn') })}
         />
       ) : (
         <div className="space-y-2.5">
@@ -680,6 +682,7 @@ function ProviderCard({
   onEdit: () => void
   onDelete: () => void
 }) {
+  const { t } = useTranslation()
   const [deleteConfirm, setDeleteConfirm] = useState(false)
   const [search, setSearch] = useState('')
 
@@ -702,11 +705,11 @@ function ProviderCard({
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2 text-[13px] font-semibold text-[var(--color-foreground)]">
             <span className="truncate">{provider.name || provider.id}</span>
-            {activeProvider === provider.id && <span className={CHIP_ACCENT}>Active</span>}
-            {provider.custom && <span className={CHIP}>Custom</span>}
+            {activeProvider === provider.id && <span className={CHIP_ACCENT}>{t('settings.appearance.active')}</span>}
+            {provider.custom && <span className={CHIP}>{t('settings.providers.custom')}</span>}
           </div>
           <div className="mt-0.5 truncate font-mono text-[11px] text-[var(--color-muted-foreground)]">
-            {provider.base_url || (provider.api_key_set ? 'API key set' : '—')}
+            {provider.base_url || (provider.api_key_set ? t('settings.providers.apiKey') : '—')}
           </div>
         </div>
         <div className="flex shrink-0 items-center gap-1.5">
@@ -714,33 +717,33 @@ function ProviderCard({
             activeModelName ? (
               <div className="flex max-w-[280px] flex-col gap-2 rounded-[var(--radius-md)] border border-[var(--color-warning-fg)] bg-[var(--color-warning-bg)] p-2.5 text-right">
                 <div>
-                  <div className="text-[12px] font-semibold text-[var(--color-warning-fg)]">Model in use</div>
+                  <div className="text-[12px] font-semibold text-[var(--color-warning-fg)]">{t('settings.providers.deleteInUseTitle')}</div>
                   <div className="mt-0.5 text-[10.5px] text-[var(--color-muted-foreground)]">
-                    Switch away from “{activeModelName}” before deleting this provider.
+                    {t('settings.providers.deleteInUseBody', { model: activeModelName })}
                   </div>
                 </div>
                 <div className="flex flex-wrap justify-end gap-1.5">
                   <button type="button" className={`${BTN_GHOST} ${BTN_XS}`} onClick={() => setDeleteConfirm(false)}>
-                    Cancel
+                    {t('common.cancel')}
                   </button>
                 </div>
               </div>
             ) : (
               <>
                 <button type="button" className={`${BTN_DANGER} ${BTN_XS}`} onClick={onDelete}>
-                  Delete
+                  {t('common.delete')}
                 </button>
                 <button type="button" className={`${BTN_GHOST} ${BTN_XS}`} onClick={() => setDeleteConfirm(false)}>
-                  Cancel
+                  {t('common.cancel')}
                 </button>
               </>
             )
           ) : (
             <>
-              <button type="button" title="Edit" className={`${BTN_GHOST} ${BTN_XS}`} onClick={onEdit}>
+              <button type="button" title={t('settings.providers.edit')} className={`${BTN_GHOST} ${BTN_XS}`} onClick={onEdit}>
                 <PencilSquareIcon className="h-3.5 w-3.5" />
               </button>
-              <button type="button" title="Remove" className={`${BTN_GHOST} ${BTN_XS}`} onClick={() => setDeleteConfirm(true)}>
+              <button type="button" title={t('settings.providers.remove')} className={`${BTN_GHOST} ${BTN_XS}`} onClick={() => setDeleteConfirm(true)}>
                 <TrashIcon className="h-3.5 w-3.5" />
               </button>
             </>
@@ -752,19 +755,19 @@ function ProviderCard({
       <div className="px-3 pb-3 pt-2">
         <div className="flex flex-wrap items-center justify-between gap-2 pb-2">
           <span className="text-[10.5px] text-[var(--color-muted-foreground)]">
-            <b className="font-semibold text-[var(--color-foreground)]">{addedCount}</b>/{catalog.length} models
+            <b className="font-semibold text-[var(--color-foreground)]">{addedCount}</b>/{catalog.length} {t('settings.providers.models')}
           </span>
           <div className="ml-auto flex items-center gap-1.5">
             <button
               type="button"
               className={`${BTN_SECONDARY} ${BTN_XS}`}
               onClick={onRefreshCatalog}
-              title="Refresh catalog"
+              title={t('settings.providers.refreshCatalog')}
             >
               ↻
             </button>
             <button type="button" className={`${BTN_SECONDARY} ${BTN_XS}`} onClick={onAddCustomModel}>
-              <PlusIcon className="h-3.5 w-3.5" /> Custom model
+              <PlusIcon className="h-3.5 w-3.5" /> {t('settings.providers.addCustomModel')}
             </button>
           </div>
         </div>
@@ -773,7 +776,7 @@ function ProviderCard({
         <div className="mt-1.5 border-t border-dashed border-[var(--color-border)] pt-2">
           {catalogLoading && catalog.length === 0 ? (
             <div className="animate-pulse py-3 text-center text-[10px] text-[var(--color-muted-foreground)]">
-              Loading models…
+              {t('settings.providers.loadingHint')}
             </div>
           ) : (
             <>
@@ -781,12 +784,12 @@ function ProviderCard({
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
                 type="text"
-                placeholder="Search models…"
+                placeholder={t('settings.providers.catalogSearch')}
                 className={INPUT_SM + ' mb-1.5'}
               />
               {filtered.length === 0 ? (
                 <div className="py-3 text-center text-[10px] text-[var(--color-muted-foreground)]">
-                  {provider.custom ? 'No models in catalog' : 'All models configured'}
+                  {provider.custom ? t('settings.providers.noCatalog') : t('settings.providers.allConfigured')}
                 </div>
               ) : (
                 <div className="max-h-[220px] overflow-y-auto rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-background)] p-0.5">
@@ -800,15 +803,15 @@ function ProviderCard({
                         <div className="truncate text-[10px] text-[var(--color-muted-foreground)]">
                           {cm.name || cm.id}
                           {cm.context ? ` · ${formatContext(cm.context)}` : ''}
-                          {cm.reasoning ? ' · reasoning' : ''}
-                          {cm.attachment ? ' · vision' : ''}
+                          {cm.reasoning ? ` · ${t('settings.providers.customReasoning')}` : ''}
+                          {cm.attachment ? ` · ${t('settings.providers.supportImage')}` : ''}
                         </div>
                       </div>
                       {cm.added && cm.custom ? (
                         <div className="flex items-center gap-1">
                           <button
                             type="button"
-                            title="Edit model"
+                            title={t('settings.providers.editModel')}
                             className={`${BTN_GHOST} ${BTN_XS}`}
                             onClick={() => onEditCustomModel(cmToDetail(cm))}
                           >
@@ -816,7 +819,7 @@ function ProviderCard({
                           </button>
                           <button
                             type="button"
-                            title="Remove"
+                            title={t('settings.providers.remove')}
                             className={`${BTN_GHOST} ${BTN_XS} text-[var(--color-muted-foreground)] hover:text-[var(--color-destructive)]`}
                             onClick={() => onRemoveCustomModel(cm.id)}
                           >
@@ -827,7 +830,7 @@ function ProviderCard({
                         <Switch
                           on={!!cm.added}
                           onClick={() => onToggleModel(cm.id)}
-                          title={cm.added ? 'Hide from picker' : 'Show in picker'}
+                          title={cm.added ? t('settings.providers.hideModel') : t('settings.providers.showModel')}
                         />
                       )}
                     </div>
@@ -867,6 +870,7 @@ function ProviderForm({
   onCancel: () => void
   onSaved: () => void
 }) {
+  const { t } = useTranslation()
   const isEdit = !!editing
   const [mode, setMode] = useState<'registry' | 'custom'>(editing?.custom ? 'custom' : 'registry')
   const [selId, setSelId] = useState('')
@@ -895,11 +899,11 @@ function ProviderForm({
     e.preventDefault()
     setError('')
     if (!providerId) {
-      setError('Provider is required.')
+      setError(t('settings.providers.customIdRequired'))
       return
     }
     if (!isEdit && !apiKey.trim()) {
-      setError('API key is required.')
+      setError(t('settings.providers.enterApiKey'))
       return
     }
     setSaving(true)
@@ -930,7 +934,7 @@ function ProviderForm({
       }
       onSaved()
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to save')
+      setError(err instanceof Error ? err.message : t('settings.providers.connectFailed'))
     } finally {
       setSaving(false)
     }
@@ -939,26 +943,26 @@ function ProviderForm({
   return (
     <form onSubmit={save}>
       <div className="mb-4 flex items-center justify-between">
-        <h3 className={SECTION_TITLE}>{isEdit ? 'Edit provider' : 'Add provider'}</h3>
+        <h3 className={SECTION_TITLE}>{isEdit ? t('settings.providers.editProvider') : t('settings.providers.add')}</h3>
         <button type="button" className={`${BTN_GHOST} ${BTN_SM}`} onClick={onCancel}>
-          ← Back
+          ← {t('common.back')}
         </button>
       </div>
 
       <div className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)]">
         <div className="border-b border-[var(--color-border)] bg-[var(--color-muted)] px-3.5 py-2.5 text-[11px] font-semibold uppercase tracking-wide text-[var(--color-muted-foreground)]">
-          {isEdit ? editing!.name || editing!.id : 'New provider'}
+          {isEdit ? editing!.name || editing!.id : t('settings.providers.add')}
         </div>
         <div className="p-4">
           {/* Provider selection (add mode only) */}
           {!isEdit && (
-            <Field label="Provider">
+            <Field label={t('settings.providers.selectProvider')}>
               <Segmented
                 value={mode}
                 onChange={(m) => setMode(m)}
                 options={[
-                  { value: 'registry', label: 'Registry' },
-                  { value: 'custom', label: 'Custom' },
+                  { value: 'registry', label: t('settings.providers.selectProvider') },
+                  { value: 'custom', label: t('settings.providers.custom') },
                 ]}
               />
               <div className="mt-2">
@@ -968,7 +972,7 @@ function ProviderForm({
                     onChange={(e) => setSelId(e.target.value)}
                     className={INPUT}
                   >
-                    <option value="">Select a provider…</option>
+                    <option value="">{t('settings.providers.selectProvider')}</option>
                     {availableSetup.map((s) => (
                       <option key={s.id} value={s.id}>
                         {s.name}
@@ -980,7 +984,7 @@ function ProviderForm({
                     value={customId}
                     onChange={(e) => setCustomId(e.target.value)}
                     type="text"
-                    placeholder="my-provider"
+                    placeholder={t('settings.providers.customIdPlaceholder')}
                     className={INPUT_MONO}
                   />
                 )}
@@ -988,23 +992,23 @@ function ProviderForm({
             </Field>
           )}
 
-          <Field label="API key">
+          <Field label={t('settings.providers.apiKey')}>
             <input
               value={apiKey}
               onChange={(e) => setApiKey(e.target.value)}
               type="password"
-              placeholder={isEdit ? 'Leave blank to keep current' : 'sk-…'}
+              placeholder={isEdit ? t('settings.providers.apiKeyUnchanged') : 'sk-…'}
               className={INPUT_MONO}
             />
           </Field>
 
           {(mode === 'custom' || isEdit) && (
-            <Field label="Display name">
+            <Field label={t('settings.providers.customName')}>
               <input
                 value={name}
                 onChange={(e) => setName(e.target.value)}
                 type="text"
-                placeholder="My Provider"
+                placeholder={t('settings.providers.customNamePlaceholder')}
                 className={INPUT}
               />
             </Field>
@@ -1020,34 +1024,34 @@ function ProviderForm({
               className="h-3.5 w-3.5 transition-transform"
               style={{ transform: advancedOpen ? 'rotate(180deg)' : 'none' }}
             />
-            Advanced configuration
+            {t('settings.providers.advanced')}
           </button>
 
           {advancedOpen && (
             <div className="mb-3 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-muted)] p-3">
-              <Field label="Base URL">
+              <Field label={t('settings.providers.endpoint')}>
                 <input
                   value={baseUrl}
                   onChange={(e) => setBaseUrl(e.target.value)}
                   type="text"
-                  placeholder="https://api.example.com/v1"
+                  placeholder={t('settings.providers.endpointPlaceholder')}
                   className={INPUT_MONO}
                 />
               </Field>
 
               <div className="mb-3.5">
                 <div className="mb-1.5 flex items-center justify-between">
-                  <label className={LABEL + ' !mb-0'}>Headers</label>
+                  <label className={LABEL + ' !mb-0'}>{t('settings.providers.headers')}</label>
                   <button
                     type="button"
                     className={`${BTN_GHOST} ${BTN_XS}`}
                     onClick={() => setHeaders((h) => [...h, { key: '', value: '' }])}
                   >
-                    + Add header
+                    + {t('settings.providers.addHeader')}
                   </button>
                 </div>
                 {headers.length === 0 && (
-                  <div className="text-[11px] text-[var(--color-muted-foreground)]">No custom headers.</div>
+                  <div className="text-[11px] text-[var(--color-muted-foreground)]">{t('settings.providers.headersHint')}</div>
                 )}
                 {headers.map((h, i) => (
                   <div key={i} className="mb-2 flex gap-2">
@@ -1055,7 +1059,7 @@ function ProviderForm({
                       value={h.key}
                       onChange={(e) => setHeaders((prev) => prev.map((x, j) => (j === i ? { ...x, key: e.target.value } : x)))}
                       type="text"
-                      placeholder="Header-Name"
+                      placeholder={t('settings.providers.headerKey')}
                       className={INPUT_MONO}
                     />
                     <input
@@ -1076,24 +1080,24 @@ function ProviderForm({
                 ))}
               </div>
 
-              <Field label="Capabilities (provider-level overrides)">
+              <Field label={t('settings.providers.advanced')}>
                 <div className="space-y-2">
                   <div className="flex items-center justify-between rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2">
                     <div>
-                      <div className="text-[12px] font-medium text-[var(--color-foreground)]">Vision</div>
-                      <div className="text-[10px] text-[var(--color-muted-foreground)]">Accept image inputs</div>
+                      <div className="text-[12px] font-medium text-[var(--color-foreground)]">{t('settings.providers.supportImage')}</div>
+                      <div className="text-[10px] text-[var(--color-muted-foreground)]">{t('settings.providers.supportImageDesc')}</div>
                     </div>
                     <Switch on={vision} onClick={() => setVision((v) => !v)} />
                   </div>
                   <div className="flex items-center justify-between rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2">
                     <div>
-                      <div className="text-[12px] font-medium text-[var(--color-foreground)]">Thinking</div>
-                      <div className="text-[10px] text-[var(--color-muted-foreground)]">Extended reasoning</div>
+                      <div className="text-[12px] font-medium text-[var(--color-foreground)]">{t('settings.providers.customReasoning')}</div>
+                      <div className="text-[10px] text-[var(--color-muted-foreground)]">{t('settings.providers.customReasoningDesc')}</div>
                     </div>
                     <Switch on={thinking} onClick={() => setThinking((v) => !v)} />
                   </div>
                   <div className="flex items-center justify-between rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2">
-                    <div className="text-[12px] font-medium text-[var(--color-foreground)]">Reasoning effort</div>
+                    <div className="text-[12px] font-medium text-[var(--color-foreground)]">{t('settings.providers.supportReasoning')}</div>
                     <select
                       value={reasoningEffort}
                       onChange={(e) => setReasoningEffort(e.target.value)}
@@ -1115,10 +1119,10 @@ function ProviderForm({
         </div>
         <div className="flex justify-end gap-2 border-t border-[var(--color-border)] bg-[var(--color-muted)] px-3.5 py-3">
           <button type="button" className={BTN_SECONDARY} onClick={onCancel}>
-            Cancel
+            {t('common.cancel')}
           </button>
           <button type="submit" disabled={saving} className={BTN_PRIMARY}>
-            {saving ? 'Saving…' : isEdit ? 'Save changes' : 'Add provider'}
+            {saving ? t('settings.providers.saving') : isEdit ? t('settings.mcp.save') : t('settings.providers.addBtn')}
           </button>
         </div>
       </div>
@@ -1145,6 +1149,7 @@ function CustomModelForm({
     originalId?: string
   }) => Promise<void>
 }) {
+  const { t } = useTranslation()
   const isEdit = !!target
   const [id, setId] = useState(target?.id ?? '')
   const [name, setName] = useState(target?.name ?? '')
@@ -1159,7 +1164,7 @@ function CustomModelForm({
     e.preventDefault()
     setError('')
     if (!id.trim()) {
-      setError('Model ID is required.')
+      setError(t('settings.providers.customModelRequired'))
       return
     }
     setSaving(true)
@@ -1175,7 +1180,7 @@ function CustomModelForm({
         originalId: target?.id,
       })
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to save model')
+      setError(err instanceof Error ? err.message : t('settings.providers.connectFailed'))
     } finally {
       setSaving(false)
     }
@@ -1187,16 +1192,16 @@ function CustomModelForm({
       className="mt-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-muted)] p-3"
     >
       <div className="mb-2 text-[11.5px] font-semibold text-[var(--color-foreground)]">
-        {isEdit ? 'Edit custom model' : 'Add custom model'}
+        {isEdit ? t('settings.providers.editModel') : t('settings.providers.addModel')}
       </div>
       <div className="grid grid-cols-2 gap-2.5">
-        <Field label="Model ID">
+        <Field label={t('settings.providers.customModelId')}>
           <input value={id} onChange={(e) => setId(e.target.value)} type="text" placeholder="gpt-4o" className={INPUT_MONO} />
         </Field>
-        <Field label="Display name">
+        <Field label={t('settings.providers.customName')}>
           <input value={name} onChange={(e) => setName(e.target.value)} type="text" placeholder="GPT-4o" className={INPUT} />
         </Field>
-        <Field label="Context (tokens)">
+        <Field label={t('settings.providers.contextWindow')}>
           <input
             value={context}
             onChange={(e) => setContext(e.target.value)}
@@ -1205,7 +1210,7 @@ function CustomModelForm({
             className={INPUT}
           />
         </Field>
-        <Field label="Effort tiers">
+        <Field label={t('settings.providers.effortTiers')}>
           <input
             value={tiersText}
             onChange={(e) => setTiersText(e.target.value)}
@@ -1217,19 +1222,19 @@ function CustomModelForm({
       </div>
       <div className="mb-2 flex items-center gap-4">
         <label className="flex items-center gap-2 text-[11px] text-[var(--color-foreground)]">
-          <Switch on={reasoning} onClick={() => setReasoning((v) => !v)} /> Reasoning
+          <Switch on={reasoning} onClick={() => setReasoning((v) => !v)} /> {t('settings.providers.customReasoning')}
         </label>
         <label className="flex items-center gap-2 text-[11px] text-[var(--color-foreground)]">
-          <Switch on={attachment} onClick={() => setAttachment((v) => !v)} /> Vision
+          <Switch on={attachment} onClick={() => setAttachment((v) => !v)} /> {t('settings.providers.supportImage')}
         </label>
       </div>
       {error && <div className="mb-2 text-[11px] text-[var(--color-destructive)]">{error}</div>}
       <div className="flex justify-end gap-2">
         <button type="button" className={`${BTN_GHOST} ${BTN_SM}`} onClick={onCancel}>
-          Cancel
+          {t('common.cancel')}
         </button>
         <button type="submit" disabled={saving} className={`${BTN_PRIMARY} ${BTN_SM}`}>
-          {saving ? 'Saving…' : 'Save'}
+          {saving ? t('settings.providers.saving') : t('settings.mcp.save')}
         </button>
       </div>
     </form>
@@ -1286,7 +1291,7 @@ function GeneralTab() {
 
   return (
     <div className="space-y-5">
-      <h3 className={SECTION_TITLE}>{t('settings.general.title')}</h3>
+      <h3 className={SECTION_TITLE}>{t('settings.tabs.general')}</h3>
 
       <div className={ROW}>
         <div className="grid h-7 w-7 shrink-0 place-items-center rounded-[var(--radius-md)] text-[var(--color-muted-foreground)]">
@@ -1395,21 +1400,22 @@ function GeneralTab() {
 // Shortcuts tab — static keyboard shortcuts reference
 // ════════════════════════════════════════════════════════════════════════════
 
-const SHORTCUTS: { keys: string; label: string }[] = [
-  { keys: '⌘K', label: 'Open command palette' },
-  { keys: '⌘N', label: 'New chat' },
-  { keys: '⌘,', label: 'Open settings' },
-  { keys: '⇧⌘P', label: 'Switch to plan mode' },
-  { keys: '⇧⌘E', label: 'Toggle files panel' },
-  { keys: '⇧⌘G', label: 'Toggle changes panel' },
-  { keys: '⌘`', label: 'Toggle terminal' },
-  { keys: '⌘L', label: 'Focus chat input' },
+const SHORTCUTS: { keys: string; labelKey: string }[] = [
+  { keys: '⌘K', labelKey: 'commandPalette' },
+  { keys: '⌘N', labelKey: 'newChat' },
+  { keys: '⌘,', labelKey: 'openSettings' },
+  { keys: '⇧⌘P', labelKey: 'planMode' },
+  { keys: '⇧⌘E', labelKey: 'filesPanel' },
+  { keys: '⇧⌘G', labelKey: 'changesPanel' },
+  { keys: '⌘`', labelKey: 'toggleTerminal' },
+  { keys: '⌘L', labelKey: 'focusInput' },
 ]
 
 function ShortcutsTab() {
+  const { t } = useTranslation()
   return (
     <div className="space-y-4">
-      <h3 className={SECTION_TITLE}>Keyboard shortcuts</h3>
+      <h3 className={SECTION_TITLE}>{t('settings.shortcuts.title')}</h3>
       <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)]">
         {SHORTCUTS.map((s, i) => (
           <div
@@ -1417,7 +1423,9 @@ function ShortcutsTab() {
             className="flex items-center justify-between px-3.5 py-2.5"
             style={{ borderTop: i === 0 ? 'none' : '1px solid var(--color-border)' }}
           >
-            <span className="text-[12px] text-[var(--color-foreground)]">{s.label}</span>
+            <span className="text-[12px] text-[var(--color-foreground)]">
+              {t(`settings.shortcuts.items.${s.labelKey}`)}
+            </span>
             <kbd
               className="inline-flex h-6 min-w-[28px] items-center justify-center rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-muted)] px-2 font-mono text-[11px] text-[var(--color-foreground)]"
             >
@@ -1427,7 +1435,7 @@ function ShortcutsTab() {
         ))}
       </div>
       <div className="text-[10.5px] leading-relaxed text-[var(--color-muted-foreground)]">
-        On Windows/Linux, use Ctrl in place of ⌘.
+        {t('settings.shortcuts.windowsHint')}
       </div>
     </div>
   )
@@ -1438,18 +1446,19 @@ function ShortcutsTab() {
 // ════════════════════════════════════════════════════════════════════════════
 
 function ChannelsTab() {
+  const { t } = useTranslation()
   const dispatch = useAppDispatch()
   return (
     <div className="space-y-4">
-      <h3 className={SECTION_TITLE}>Channels</h3>
+      <h3 className={SECTION_TITLE}>{t('settings.channels.title')}</h3>
       <div className={ROW}>
         <div className="grid h-7 w-7 shrink-0 place-items-center rounded-[var(--radius-md)] text-[var(--color-muted-foreground)]">
           <ChatBubbleOvalLeftIcon className="h-4 w-4" />
         </div>
         <div className="min-w-0 flex-1">
-          <div className="text-[12px] font-medium text-[var(--color-foreground)]">Manage messaging channels</div>
+          <div className="text-[12px] font-medium text-[var(--color-foreground)]">{t('settings.channels.manageTitle')}</div>
           <div className="text-[11px] text-[var(--color-muted-foreground)]">
-            WeChat, Telegram, and other channels are configured on the dedicated Channels page.
+            {t('settings.channels.manageDesc')}
           </div>
         </div>
         <button
@@ -1460,7 +1469,7 @@ function ChannelsTab() {
             dispatch(uiActions.setSettingsOpen(false))
           }}
         >
-          Open Channels <ArrowRightIcon className="h-3.5 w-3.5" />
+          {t('settings.channels.openPage')} <ArrowRightIcon className="h-3.5 w-3.5" />
         </button>
       </div>
     </div>
@@ -1506,6 +1515,7 @@ function emptyMCPForm(): MCPForm {
 }
 
 function MCPTab() {
+  const { t } = useTranslation()
   const [servers, setServers] = useState<Record<string, MCPServerInfo>>({})
   const [loading, setLoading] = useState(true)
   const [editing, setEditing] = useState<string | null>(null) // null=list, ''=add, name=edit
@@ -1591,15 +1601,15 @@ function MCPTab() {
     e.preventDefault()
     setFormError('')
     if (!form.name.trim()) {
-      setFormError('Server name is required')
+      setFormError(t('settings.mcp.serverName') + ' *')
       return
     }
     if (form.transport === 'local' && !form.command.trim()) {
-      setFormError('Command is required')
+      setFormError(t('settings.mcp.command') + ' *')
       return
     }
     if (form.transport !== 'local' && !form.url.trim()) {
-      setFormError('URL is required')
+      setFormError(t('settings.mcp.url') + ' *')
       return
     }
     setSaving(true)
@@ -1610,7 +1620,7 @@ function MCPTab() {
       setEditing(null)
       await load()
     } catch (err) {
-      setFormError(err instanceof Error ? err.message : 'Failed to save')
+      setFormError(err instanceof Error ? err.message : t('settings.mcp.status.error'))
     }
     setSaving(false)
   }
@@ -1636,11 +1646,11 @@ function MCPTab() {
   async function login(name: string) {
     setLoginBusy(name)
     setLoginMsgFor(name)
-    setLoginMsg('Opening browser — complete authorization, then return here…')
+    setLoginMsg(t('settings.mcp.waitingBrowser'))
     try {
       await api.mcpLogin(name)
     } catch (err) {
-      setLoginMsg(err instanceof Error ? err.message : 'Login failed')
+      setLoginMsg(err instanceof Error ? err.message : t('settings.mcp.status.error'))
       setLoginBusy('')
       return
     }
@@ -1658,7 +1668,7 @@ function MCPTab() {
           stopPoll()
           setLoginBusy('')
           setLoginMsgFor(name)
-          setLoginMsg(st.message || 'Login failed')
+          setLoginMsg(st.message || t('settings.mcp.status.error'))
         } else if (st.status === 'needs_client_id') {
           stopPoll()
           setLoginBusy('')
@@ -1678,18 +1688,18 @@ function MCPTab() {
     return (
       <form onSubmit={save}>
         <div className="mb-4 flex items-center justify-between">
-          <h3 className={SECTION_TITLE}>{editing ? 'Edit server' : 'Add server'}</h3>
+          <h3 className={SECTION_TITLE}>{editing ? t('settings.mcp.editServer') : t('settings.mcp.addServer')}</h3>
           <button type="button" className={`${BTN_GHOST} ${BTN_SM}`} onClick={() => setEditing(null)}>
-            ← Back
+            ← {t('common.back')}
           </button>
         </div>
 
         <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)]">
           <div className="border-b border-[var(--color-border)] bg-[var(--color-muted)] px-3.5 py-2.5 text-[11px] font-semibold uppercase tracking-wide text-[var(--color-muted-foreground)]">
-            {editing ? 'Edit' : 'New'} server
+            {editing ? t('settings.mcp.editServer') : t('settings.mcp.addServer')}
           </div>
           <div className="p-4">
-            <Field label="Server name">
+            <Field label={t('settings.mcp.serverName')}>
               <input
                 value={form.name}
                 onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
@@ -1700,12 +1710,12 @@ function MCPTab() {
               />
             </Field>
 
-            <Field label="Transport">
+            <Field label={t('settings.mcp.transport')}>
               <Segmented
                 value={form.transport}
                 onChange={(t) => setForm((f) => ({ ...f, transport: t }))}
                 options={[
-                  { value: 'local', label: 'Local' },
+                  { value: 'local', label: t('settings.mcp.transportLocal') },
                   { value: 'http', label: 'HTTP' },
                   { value: 'sse', label: 'SSE' },
                 ]}
@@ -1714,7 +1724,7 @@ function MCPTab() {
 
             {form.transport !== 'local' ? (
               <>
-                <Field label="URL">
+                <Field label={t('settings.mcp.url')}>
                   <input
                     value={form.url}
                     onChange={(e) => setForm((f) => ({ ...f, url: e.target.value }))}
@@ -1726,13 +1736,13 @@ function MCPTab() {
 
                 <div className="mb-3.5">
                   <div className="mb-1.5 flex items-center justify-between">
-                    <label className={LABEL + ' !mb-0'}>Headers</label>
+                    <label className={LABEL + ' !mb-0'}>{t('settings.providers.headers')}</label>
                     <button
                       type="button"
                       className={`${BTN_GHOST} ${BTN_XS}`}
                       onClick={() => setForm((f) => ({ ...f, headers: [...f.headers, { key: '', value: '' }] }))}
                     >
-                      + Add header
+                      + {t('settings.providers.addHeader')}
                     </button>
                   </div>
                   {form.headers.map((h, i) => (
@@ -1746,7 +1756,7 @@ function MCPTab() {
                           }))
                         }
                         type="text"
-                        placeholder="Header-Name"
+                        placeholder={t('settings.providers.headerKey')}
                         className={INPUT_MONO}
                       />
                       <input
@@ -1773,7 +1783,7 @@ function MCPTab() {
                 </div>
 
                 <div className="mb-3.5 flex items-center justify-between rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-muted)] px-3 py-2">
-                  <div className="text-[12px] font-medium text-[var(--color-foreground)]">Use OAuth</div>
+                  <div className="text-[12px] font-medium text-[var(--color-foreground)]">{t('settings.mcp.useOauth')}</div>
                   <Switch
                     on={form.oauthEnabled}
                     onClick={() => setForm((f) => ({ ...f, oauthEnabled: !f.oauthEnabled }))}
@@ -1782,7 +1792,7 @@ function MCPTab() {
 
                 {form.oauthEnabled && (
                   <div className="mb-3.5 space-y-3">
-                    <Field label="OAuth client ID">
+                    <Field label={t('settings.mcp.oauthClientId')}>
                       <input
                         value={form.clientId}
                         onChange={(e) => setForm((f) => ({ ...f, clientId: e.target.value }))}
@@ -1791,7 +1801,7 @@ function MCPTab() {
                         className={INPUT_MONO}
                       />
                     </Field>
-                    <Field label="OAuth client secret">
+                    <Field label={t('settings.mcp.oauthClientSecret')}>
                       <input
                         value={form.clientSecret}
                         onChange={(e) => setForm((f) => ({ ...f, clientSecret: e.target.value }))}
@@ -1800,7 +1810,7 @@ function MCPTab() {
                         className={INPUT_MONO}
                       />
                     </Field>
-                    <Field label="Scopes">
+                    <Field label={t('settings.mcp.oauthScopes')}>
                       <input
                         value={form.scopesText}
                         onChange={(e) => setForm((f) => ({ ...f, scopesText: e.target.value }))}
@@ -1812,7 +1822,7 @@ function MCPTab() {
                   </div>
                 )}
 
-                <Field label="Timeout (seconds)">
+                <Field label={t('settings.mcp.timeout')}>
                   <input
                     value={form.timeout}
                     onChange={(e) => setForm((f) => ({ ...f, timeout: e.target.value }))}
@@ -1825,7 +1835,7 @@ function MCPTab() {
               </>
             ) : (
               <>
-                <Field label="Command">
+                <Field label={t('settings.mcp.command')}>
                   <input
                     value={form.command}
                     onChange={(e) => setForm((f) => ({ ...f, command: e.target.value }))}
@@ -1834,7 +1844,7 @@ function MCPTab() {
                     className={INPUT_MONO}
                   />
                 </Field>
-                <Field label="Arguments">
+                <Field label={t('settings.mcp.arguments')}>
                   <input
                     value={form.argsText}
                     onChange={(e) => setForm((f) => ({ ...f, argsText: e.target.value }))}
@@ -1850,10 +1860,10 @@ function MCPTab() {
           </div>
           <div className="flex justify-end gap-2 border-t border-[var(--color-border)] bg-[var(--color-muted)] px-3.5 py-3">
             <button type="button" className={BTN_SECONDARY} onClick={() => setEditing(null)}>
-              Cancel
+              {t('common.cancel')}
             </button>
             <button type="submit" disabled={saving} className={BTN_PRIMARY}>
-              {saving ? 'Saving…' : 'Save'}
+              {saving ? t('settings.providers.saving') : t('settings.mcp.save')}
             </button>
           </div>
         </div>
@@ -1865,21 +1875,21 @@ function MCPTab() {
     <div>
       <div className="mb-4 flex items-center justify-between">
         <div className="flex items-baseline gap-2">
-          <h3 className={SECTION_TITLE}>MCP Servers</h3>
+          <h3 className={SECTION_TITLE}>{t('settings.mcp.title')}</h3>
           <span className="font-mono text-[11px] text-[var(--color-muted-foreground)]">{serverList.length}</span>
         </div>
         <button type="button" className={`${BTN_SECONDARY} ${BTN_SM}`} onClick={openAdd}>
-          <PlusIcon className="h-3.5 w-3.5" /> Add
+          <PlusIcon className="h-3.5 w-3.5" /> {t('settings.mcp.addServer')}
         </button>
       </div>
 
       {loading ? (
-        <div className="animate-pulse py-6 text-center text-xs text-[var(--color-muted-foreground)]">Loading…</div>
+        <div className="animate-pulse py-6 text-center text-xs text-[var(--color-muted-foreground)]">{t('common.loading')}</div>
       ) : serverList.length === 0 ? (
         <EmptyState
           Icon={ServerStackIcon}
-          title="No MCP servers"
-          hint="Add a server to extend the agent with external tools."
+          title={t('settings.mcp.noneConfigured')}
+          hint={t('settings.mcp.noneHint', { btn: t('settings.mcp.add') })}
         />
       ) : (
         <div className="space-y-2">
@@ -1900,7 +1910,7 @@ function MCPTab() {
                       {name}
                       <span className={CHIP}>{info.type || 'stdio'}</span>
                       <span className="text-[10px]" style={{ color: mcpStatusColor(info) }}>
-                        ● {mcpStatusLabel(info)}
+                        ● {mcpStatusLabel(info, t)}
                       </span>
                     </div>
                     <div className="truncate font-mono text-[11px] text-[var(--color-muted-foreground)]">
@@ -1909,14 +1919,14 @@ function MCPTab() {
                   </div>
                   <div className="flex shrink-0 items-center gap-1.5">
                     <button type="button" className={`${BTN_GHOST} ${BTN_XS}`} onClick={() => openEdit(info)}>
-                      Edit
+                      {t('common.edit')}
                     </button>
                     <button
                       type="button"
                       className={`${BTN_GHOST} ${BTN_XS} text-[var(--color-destructive)]`}
                       onClick={() => remove(name)}
                     >
-                      Delete
+                      {t('common.delete')}
                     </button>
                     <Switch on={info.enabled} onClick={() => toggle(name, !info.enabled)} />
                   </div>
@@ -1931,12 +1941,12 @@ function MCPTab() {
                       onClick={() => login(name)}
                     >
                       {loginBusy === name
-                        ? 'Waiting for browser…'
+                        ? t('settings.mcp.waitingBrowser')
                         : info.has_auth
-                          ? 'Re-authorize'
-                          : 'Log in'}
+                          ? t('settings.mcp.reauth')
+                          : t('settings.mcp.login')}
                     </button>
-                    {info.has_auth && <span className={CHIP + ' !bg-[var(--color-success-bg)] !text-[var(--color-success-fg)]'}>Authenticated</span>}
+                    {info.has_auth && <span className={CHIP + ' !bg-[var(--color-success-bg)] !text-[var(--color-success-fg)]'}>{t('settings.mcp.authenticated')}</span>}
                   </div>
                 )}
                 {loginBusy === name && loginMsg && (
@@ -1962,6 +1972,7 @@ function MCPTab() {
 // ════════════════════════════════════════════════════════════════════════════
 
 function SkillsTab() {
+  const { t } = useTranslation()
   const [skills, setSkills] = useState<SkillInfo[]>([])
   const [loading, setLoading] = useState(true)
   const [filter, setFilter] = useState<'all' | 'local' | 'builtin'>('all')
@@ -2000,7 +2011,7 @@ function SkillsTab() {
   return (
     <div>
       <div className="mb-4 flex items-baseline gap-2">
-        <h3 className={SECTION_TITLE}>Skills</h3>
+        <h3 className={SECTION_TITLE}>{t('settings.skills.title')}</h3>
         <span className="font-mono text-[11px] text-[var(--color-muted-foreground)]">{skills.length}</span>
       </div>
       <div className="mb-3 flex items-center gap-2">
@@ -2008,25 +2019,25 @@ function SkillsTab() {
           value={filter}
           onChange={(f) => setFilter(f)}
           options={[
-            { value: 'all', label: 'All' },
-            { value: 'local', label: 'Local' },
-            { value: 'builtin', label: 'Built-in' },
+            { value: 'all', label: t('settings.skills.filterAll') },
+            { value: 'local', label: t('settings.skills.filterLocal') },
+            { value: 'builtin', label: t('settings.skills.filterBuiltin') },
           ]}
         />
         <input
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           type="text"
-          placeholder="Search skills…"
+          placeholder={t('settings.skills.search')}
           className={INPUT}
           style={{ flex: 1 }}
         />
       </div>
 
       {loading ? (
-        <div className="animate-pulse py-6 text-center text-xs text-[var(--color-muted-foreground)]">Loading…</div>
+        <div className="animate-pulse py-6 text-center text-xs text-[var(--color-muted-foreground)]">{t('settings.skills.loadingHint')}</div>
       ) : filtered.length === 0 ? (
-        <EmptyState Icon={SparklesIcon} title="No skills found" hint="Skills extend the agent with slash commands." />
+        <EmptyState Icon={SparklesIcon} title={t('settings.skills.none')} hint={t('settings.skills.noneHint')} />
       ) : (
         <div className="space-y-2">
           {filtered.map((s) => (
@@ -2034,7 +2045,7 @@ function SkillsTab() {
               <div className="min-w-0 flex-1">
                 <div className="flex items-center gap-2 text-[12px] font-medium text-[var(--color-foreground)]">
                   {s.name}
-                  {s.builtin && <span className={CHIP}>Built-in</span>}
+                  {s.builtin && <span className={CHIP}>{t('settings.skills.builtin')}</span>}
                 </div>
                 {s.description && (
                   <div className="text-[11px] text-[var(--color-muted-foreground)]">{s.description}</div>
@@ -2066,19 +2077,20 @@ function applyTheme(name: string) {
 }
 
 function AppearanceTab() {
+  const { t } = useTranslation()
   const dispatch = useAppDispatch()
   const storeTheme = useAppSelector((s) => s.ui.theme)
   // Resolve the active theme: prefer store, fall back to localStorage, then default.
   const [active, setActive] = useState(() => {
-    let t = storeTheme
-    if (!t || t === 'system' || !THEMES.some((x) => x.id === t)) {
+    let th = storeTheme
+    if (!th || th === 'system' || !THEMES.some((x) => x.id === th)) {
       try {
-        t = localStorage.getItem('jcode-theme') || 'jcode-dark'
+        th = localStorage.getItem('jcode-theme') || 'jcode-dark'
       } catch {
-        t = 'jcode-dark'
+        th = 'jcode-dark'
       }
     }
-    return t
+    return th
   })
 
   function choose(name: string) {
@@ -2087,17 +2099,17 @@ function AppearanceTab() {
     applyTheme(name)
   }
 
-  const darkThemes = THEMES.filter((t) => t.appearance === 'dark')
-  const lightThemes = THEMES.filter((t) => t.appearance === 'light')
+  const darkThemes = THEMES.filter((th) => th.appearance === 'dark')
+  const lightThemes = THEMES.filter((th) => th.appearance === 'light')
 
-  const ThemeButton = ({ t }: { t: { id: string; label: string; appearance: string } }) => (
+  const ThemeButton = ({ theme }: { theme: { id: string; label: string; appearance: string } }) => (
     <button
       type="button"
-      data-theme={t.id}
-      onClick={() => choose(t.id)}
+      data-theme={theme.id}
+      onClick={() => choose(theme.id)}
       className="cursor-pointer overflow-hidden rounded-[var(--radius-md)] text-left transition-transform active:scale-[0.98]"
       style={{
-        border: active === t.id ? '2px solid var(--color-accent-neutral)' : '1px solid var(--color-border)',
+        border: active === theme.id ? '2px solid var(--color-accent-neutral)' : '1px solid var(--color-border)',
         backgroundColor: 'var(--color-background)',
       }}
     >
@@ -2119,8 +2131,8 @@ function AppearanceTab() {
         className="flex items-center justify-between px-2.5 py-1.5"
         style={{ backgroundColor: 'var(--color-surface)', borderTop: '1px solid var(--color-border)' }}
       >
-        <span className="truncate text-[11px] font-medium text-[var(--color-foreground)]">{t.label}</span>
-        {active === t.id && (
+        <span className="truncate text-[11px] font-medium text-[var(--color-foreground)]">{theme.label}</span>
+        {active === theme.id && (
           <CheckIcon className="h-3.5 w-3.5 shrink-0" style={{ color: 'var(--color-accent-neutral)' }} />
         )}
       </div>
@@ -2129,25 +2141,25 @@ function AppearanceTab() {
 
   return (
     <div className="space-y-5">
-      <h3 className={SECTION_TITLE}>Theme</h3>
+      <h3 className={SECTION_TITLE}>{t('settings.appearance.theme')}</h3>
       <div>
-        <div className="mb-2 text-[10px] font-medium text-[var(--color-muted-foreground)]">Dark</div>
+        <div className="mb-2 text-[10px] font-medium text-[var(--color-muted-foreground)]">{t('settings.appearance.dark')}</div>
         <div className="grid grid-cols-2 gap-2">
-          {darkThemes.map((t) => (
-            <ThemeButton key={t.id} t={t} />
+          {darkThemes.map((th) => (
+            <ThemeButton key={th.id} theme={th} />
           ))}
         </div>
       </div>
       <div>
-        <div className="mb-2 text-[10px] font-medium text-[var(--color-muted-foreground)]">Light</div>
+        <div className="mb-2 text-[10px] font-medium text-[var(--color-muted-foreground)]">{t('settings.appearance.light')}</div>
         <div className="grid grid-cols-2 gap-2">
-          {lightThemes.map((t) => (
-            <ThemeButton key={t.id} t={t} />
+          {lightThemes.map((th) => (
+            <ThemeButton key={th.id} theme={th} />
           ))}
         </div>
       </div>
       <div className="text-[10px] leading-relaxed text-[var(--color-muted-foreground)]">
-        Tip: run <span className="font-mono">/theme</span> in the chat to switch from the terminal.
+        {t('settings.appearance.terminalHint', { cmd: '/theme' })}
       </div>
     </div>
   )
@@ -2158,6 +2170,7 @@ function AppearanceTab() {
 // ════════════════════════════════════════════════════════════════════════════
 
 function BrowserTab() {
+  const { t } = useTranslation()
   const [status, setStatus] = useState<BrowserStatusResponse | null>(null)
   const [cfg, setCfg] = useState<BrowserConfig>({
     enabled: false,
@@ -2243,8 +2256,8 @@ function BrowserTab() {
   return (
     <div>
       <div className="mb-4">
-        <h3 className={SECTION_TITLE}>Browser</h3>
-        <p className="mt-0.5 text-[12px] text-[var(--color-muted-foreground)]">Control browser-use tool access and permissions.</p>
+        <h3 className={SECTION_TITLE}>{t('settings.browser.title')}</h3>
+        <p className="mt-0.5 text-[12px] text-[var(--color-muted-foreground)]">{t('settings.browser.subtitle')}</p>
       </div>
 
       <div className={ROW}>
@@ -2252,8 +2265,8 @@ function BrowserTab() {
           <GlobeAltIcon className="h-4 w-4" />
         </div>
         <div className="min-w-0 flex-1">
-          <div className="text-[12px] font-medium text-[var(--color-foreground)]">Enable browser use</div>
-          <div className="text-[11px] text-[var(--color-muted-foreground)]">Allow the agent to drive a browser.</div>
+          <div className="text-[12px] font-medium text-[var(--color-foreground)]">{t('settings.browser.enableTitle')}</div>
+          <div className="text-[11px] text-[var(--color-muted-foreground)]">{t('settings.browser.enableDesc')}</div>
         </div>
         <Switch on={cfg.enabled} onClick={() => patch({ enabled: !cfg.enabled })} />
       </div>
@@ -2261,16 +2274,16 @@ function BrowserTab() {
       {cfg.enabled && (
         <>
           <div className="mb-2 mt-5 text-[11px] font-medium uppercase tracking-wide text-[var(--color-muted-foreground)]">
-            Control
+            {t('settings.browser.control')}
           </div>
           <div className={ROW}>
             <div className="grid h-7 w-7 shrink-0 place-items-center rounded-[var(--radius-md)] text-[var(--color-muted-foreground)]">
               <ComputerDesktopIcon className="h-4 w-4" />
             </div>
             <div className="min-w-0 flex-1">
-              <div className="text-[12px] font-medium text-[var(--color-foreground)]">Managed Chrome</div>
+              <div className="text-[12px] font-medium text-[var(--color-foreground)]">{t('settings.browser.managedChrome')}</div>
               <div className="text-[11px] text-[var(--color-muted-foreground)]">
-                {st?.chrome_found ? st.chrome_version || st.chrome_path : 'No Chrome detected'}
+                {st?.chrome_found ? st.chrome_version || st.chrome_path : t('settings.browser.noChromeDetected')}
               </div>
             </div>
             <select
@@ -2279,9 +2292,9 @@ function BrowserTab() {
               className={INPUT_SM}
               style={{ width: '8rem' }}
             >
-              <option value="auto">Auto</option>
-              <option value="managed">Managed</option>
-              <option value="extension">Extension</option>
+              <option value="auto">{t('settings.browser.backendAuto')}</option>
+              <option value="managed">{t('settings.browser.backendManaged')}</option>
+              <option value="extension">{t('settings.browser.backendExtension')}</option>
             </select>
           </div>
           <div className={ROW}>
@@ -2289,23 +2302,23 @@ function BrowserTab() {
               <GlobeAltIcon className="h-4 w-4" />
             </div>
             <div className="min-w-0 flex-1">
-              <div className="text-[12px] font-medium text-[var(--color-foreground)]">Extension</div>
+              <div className="text-[12px] font-medium text-[var(--color-foreground)]">{t('settings.browser.extension')}</div>
               <div className="flex items-center gap-1.5 text-[11px] text-[var(--color-muted-foreground)]">
                 <span
                   className="h-1.5 w-1.5 shrink-0 rounded-full"
                   style={{ backgroundColor: st?.extension_online ? 'var(--color-success-fg)' : 'var(--color-border)' }}
                 />
-                {st?.extension_online ? 'Connected' : 'Not connected'}
+                {st?.extension_online ? t('settings.browser.connected') : t('settings.browser.notConnected')}
               </div>
             </div>
             {st?.extension_online && (
-              <span className={CHIP + ' !bg-[var(--color-success-bg)] !text-[var(--color-success-fg)]'}>Online</span>
+              <span className={CHIP + ' !bg-[var(--color-success-bg)] !text-[var(--color-success-fg)]'}>{t('settings.browser.online')}</span>
             )}
           </div>
 
           {!st?.chrome_found && (
             <div className="mt-3">
-              <label className="text-[11px] font-medium text-[var(--color-muted-foreground)]">Chrome path</label>
+              <label className="text-[11px] font-medium text-[var(--color-muted-foreground)]">{t('settings.browser.chromePath')}</label>
               <input
                 value={cfg.chrome_path ?? ''}
                 onChange={(e) => patch({ chrome_path: e.target.value })}
@@ -2316,11 +2329,11 @@ function BrowserTab() {
           )}
 
           <div className="mb-2 mt-5 text-[11px] font-medium uppercase tracking-wide text-[var(--color-muted-foreground)]">
-            Approval
+            {t('settings.browser.approval')}
           </div>
           <div className={ROW}>
             <div className="min-w-0 flex-1">
-              <div className="text-[12px] font-medium text-[var(--color-foreground)]">Navigation</div>
+              <div className="text-[12px] font-medium text-[var(--color-foreground)]">{t('settings.browser.navigate')}</div>
             </div>
             <select
               value={cfg.approval?.['navigate'] ?? 'ask'}
@@ -2328,13 +2341,13 @@ function BrowserTab() {
               className={INPUT_SM}
               style={{ width: '10rem' }}
             >
-              <option value="ask">Ask each site</option>
-              <option value="always_allow">Always allow</option>
+              <option value="ask">{t('settings.browser.askEachSite')}</option>
+              <option value="always_allow">{t('settings.browser.alwaysAllow')}</option>
             </select>
           </div>
           <div className={ROW}>
             <div className="min-w-0 flex-1">
-              <div className="text-[12px] font-medium text-[var(--color-foreground)]">Interaction</div>
+              <div className="text-[12px] font-medium text-[var(--color-foreground)]">{t('settings.browser.interact')}</div>
             </div>
             <select
               value={cfg.approval?.['interact'] ?? 'ask'}
@@ -2342,22 +2355,22 @@ function BrowserTab() {
               className={INPUT_SM}
               style={{ width: '10rem' }}
             >
-              <option value="ask">Ask each site</option>
-              <option value="always_allow">Always allow</option>
+              <option value="ask">{t('settings.browser.askEachSite')}</option>
+              <option value="always_allow">{t('settings.browser.alwaysAllow')}</option>
             </select>
           </div>
 
           <div className="mb-2 mt-5 flex items-center justify-between">
             <div className="text-[11px] font-medium uppercase tracking-wide text-[var(--color-muted-foreground)]">
-              Site permissions
+              {t('settings.browser.sitePermissions')}
             </div>
             <button type="button" className={`${BTN_SECONDARY} ${BTN_SM}`} onClick={addSitePerm}>
-              <PlusIcon className="h-3.5 w-3.5" /> Add
+              <PlusIcon className="h-3.5 w-3.5" /> {t('settings.browser.add')}
             </button>
           </div>
           {!(cfg.site_permissions?.length ?? 0) && (
             <div className={ROW}>
-              <div className="text-[11px] text-[var(--color-muted-foreground)]">No site permissions configured.</div>
+              <div className="text-[11px] text-[var(--color-muted-foreground)]">{t('settings.browser.noSitePermissions')}</div>
             </div>
           )}
           {(cfg.site_permissions ?? []).map((sp, i) => (
@@ -2375,8 +2388,8 @@ function BrowserTab() {
                 className={INPUT_SM}
                 style={{ width: '7rem' }}
               >
-                <option value="ask">nav: ask</option>
-                <option value="allow">nav: allow</option>
+                <option value="ask">{t('settings.browser.navAsk')}</option>
+                <option value="allow">{t('settings.browser.navAllow')}</option>
               </select>
               <select
                 value={sp.interact ?? 'ask'}
@@ -2384,8 +2397,8 @@ function BrowserTab() {
                 className={INPUT_SM}
                 style={{ width: '7rem' }}
               >
-                <option value="ask">act: ask</option>
-                <option value="allow">act: allow</option>
+                <option value="ask">{t('settings.browser.actAsk')}</option>
+                <option value="allow">{t('settings.browser.actAllow')}</option>
               </select>
               <button type="button" className={`${BTN_GHOST} ${BTN_SM}`} onClick={() => removeSitePerm(i)}>
                 <TrashIcon className="h-3.5 w-3.5" />
@@ -2394,14 +2407,14 @@ function BrowserTab() {
           ))}
 
           <div className="mb-2 mt-5 text-[11px] font-medium uppercase tracking-wide text-[var(--color-muted-foreground)]">
-            Developer mode
+            {t('settings.browser.developerMode')}
           </div>
           <div className={ROW}>
             <div className="min-w-0 flex-1">
-              <div className="mb-0.5 text-[11px] font-semibold text-[var(--color-warning-fg)]">⚠ Elevated risk</div>
-              <div className="text-[12px] font-medium text-[var(--color-foreground)]">Developer mode</div>
+              <div className="mb-0.5 text-[11px] font-semibold text-[var(--color-warning-fg)]">⚠ {t('settings.browser.elevatedRisk')}</div>
+              <div className="text-[12px] font-medium text-[var(--color-foreground)]">{t('settings.browser.devModeTitle')}</div>
               <div className="text-[11px] text-[var(--color-muted-foreground)]">
-                Auto-approve browser actions without confirmation.
+                {t('settings.browser.devModeDesc')}
               </div>
             </div>
             <Switch on={!!cfg.dev_mode} onClick={() => patch({ dev_mode: !cfg.dev_mode })} />
@@ -2417,6 +2430,7 @@ function BrowserTab() {
 // ════════════════════════════════════════════════════════════════════════════
 
 function SSHTab() {
+  const { t } = useTranslation()
   const [data, setData] = useState<SSHListResponse | null>(null)
   const [loading, setLoading] = useState(true)
 
@@ -2434,14 +2448,14 @@ function SSHTab() {
   return (
     <div>
       <div className="mb-4 flex items-center justify-between">
-        <h3 className={SECTION_TITLE}>SSH</h3>
-        <button type="button" className={`${BTN_SECONDARY} ${BTN_SM}`} onClick={() => window.dispatchEvent(new Event('jcode:open-remote-connect'))}>
-          <PlusIcon className="h-3.5 w-3.5" /> Connect
+        <h3 className={SECTION_TITLE}>{t('settings.ssh.title')}</h3>
+        <button type="button" className={`${BTN_SECONDARY} ${BTN_SM}`} onClick={() => openRemoteConnect()}>
+          <PlusIcon className="h-3.5 w-3.5" /> {t('settings.ssh.connect')}
         </button>
       </div>
 
       <div className="mb-3">
-        <div className="mb-1 text-[11px] font-medium text-[var(--color-muted-foreground)]">Current environment</div>
+        <div className="mb-1 text-[11px] font-medium text-[var(--color-muted-foreground)]">{t('settings.ssh.currentEnv')}</div>
         <span className={CHIP_ACCENT}>
           <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: 'var(--color-accent-neutral)' }} />
           {current}
@@ -2449,12 +2463,12 @@ function SSHTab() {
       </div>
 
       {loading ? (
-        <div className="animate-pulse py-6 text-center text-xs text-[var(--color-muted-foreground)]">Loading…</div>
+        <div className="animate-pulse py-6 text-center text-xs text-[var(--color-muted-foreground)]">{t('common.loading')}</div>
       ) : aliases.length === 0 ? (
         <EmptyState
           Icon={CommandLineIcon}
-          title="No SSH aliases"
-          hint="Add aliases to ~/.jcode/config.json to connect to remote workspaces."
+          title={t('settings.ssh.noneAliases')}
+          hint={t('settings.ssh.noneAliasesHint')}
         />
       ) : (
         <div className="space-y-2">
@@ -2470,7 +2484,7 @@ function SSHTab() {
                   {alias.path ? ` · ${alias.path}` : ''}
                 </div>
               </div>
-              {current === alias.name && <span className={CHIP_ACCENT}>Active</span>}
+              {current === alias.name && <span className={CHIP_ACCENT}>{t('settings.ssh.active')}</span>}
             </div>
           ))}
         </div>
diff --git a/web/src/components/SettingsDialog.vue b/web/src/components/SettingsDialog.vue
deleted file mode 100644
index c6ec4a0f..00000000
--- a/web/src/components/SettingsDialog.vue
+++ /dev/null
@@ -1,2732 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, computed, watch, onUnmounted, inject, nextTick, type Component } from 'vue'
-import { useChatStore } from '@/stores/chat'
-import { useTheme } from '@/composables/useTheme'
-import { api } from '@/composables/api'
-import type { BrowserConfig, BrowserStatusResponse } from '@/composables/api'
-import type { MCPServerInfo, MCPServerRequest, SkillInfo, SSHAlias, SetupProvider, ProviderDetail, RemoteMeta, CatalogModel, CustomModelDetail } from '@/types/api'
-import QRCode from 'qrcode'
-import {
-  Dialog,
-  DialogPanel,
-  DialogTitle,
-  TransitionRoot,
-  TransitionChild,
-  Menu as HMenu,
-  MenuButton,
-  MenuItems,
-  MenuItem,
-} from '@headlessui/vue'
-import {
-  GlobeAltIcon,
-  BoltIcon,
-  ChatBubbleLeftIcon,
-  ComputerDesktopIcon,
-  ServerIcon,
-  ChevronRightIcon,
-  PencilSquareIcon,
-  PlusIcon,
-  SignalIcon,
-  ShieldCheckIcon,
-  AdjustmentsHorizontalIcon,
-  SwatchIcon,
-  CpuChipIcon,
-  ServerStackIcon,
-  SparklesIcon,
-  CommandLineIcon,
-  BellAlertIcon,
-  TrashIcon,
-  ArrowLeftIcon,
-  ChevronDownIcon,
-  CheckIcon,
-  ChartBarIcon,
-} from '@heroicons/vue/24/outline'
-import UsageStatsPanel from '@/components/UsageStatsPanel.vue'
-import ProviderIcon from '@/components/ProviderIcon.vue'
-import ProviderEditDialog from '@/components/ProviderEditDialog.vue'
-import ModelEditDialog from '@/components/ModelEditDialog.vue'
-import { useI18n } from 'vue-i18n'
-import { SUPPORTED_LOCALES, LOCALE_LABELS, setLocale, i18n, type SupportedLocale } from '@/i18n'
-
-const props = defineProps<{
-  open: boolean
-}>()
-
-const emit = defineEmits<{
-  close: []
-}>()
-
-const store = useChatStore()
-const { t } = useI18n()
-
-// Locale picker state. The active locale drives vue-i18n globally; setLocale()
-// persists the choice to localStorage and updates <html lang>.
-const currentLocale = computed(() => (i18n.global.locale as { value: string }).value as SupportedLocale)
-const supportedLocales = SUPPORTED_LOCALES
-async function chooseLocale(locale: SupportedLocale) {
-  await setLocale(locale)
-}
-
-// Launch the Remote-connect wizard from the SSH tab (provided by App). We close
-// Settings first so the wizard opens in the workspace context rather than
-// stacking on top of the full-page settings overlay.
-const openRemoteConnect = inject<(prefill?: RemoteMeta & { loadTaskUuid?: string }) => void>('openRemoteConnect')
-
-// Open the wizard ON TOP of Settings (it stacks above via DOM order), rather
-// than closing Settings first — that dumped the user back to the workspace
-// (welcome) behind the wizard. Cancelling the wizard now returns to Settings;
-// only a successful bind closes Settings (App handles @bound → go to the new
-// remote workspace).
-function launchWizard(prefill?: RemoteMeta) {
-  openRemoteConnect?.(prefill)
-}
-
-function openRemoteWizard() {
-  launchWizard()
-}
-
-function connectToAlias(alias: SSHAlias) {
-  // addr is "user@host" where host may include ":port" (mirrors the wizard's
-  // applyAlias parsing) → build a prefill the wizard jumps straight into.
-  const at = alias.addr.indexOf('@')
-  const user = at >= 0 ? alias.addr.slice(0, at) : 'root'
-  let host = at >= 0 ? alias.addr.slice(at + 1) : alias.addr
-  let port = 22
-  const colon = host.lastIndexOf(':')
-  if (colon >= 0) {
-    port = parseInt(host.slice(colon + 1), 10) || 22
-    host = host.slice(0, colon)
-  }
-  launchWizard({ host, port, user, remotePath: alias.path || '' })
-}
-
-const { themeChoice, setTheme, themes } = useTheme()
-const darkThemes = computed(() => themes.filter((t) => t.appearance === 'dark'))
-const lightThemes = computed(() => themes.filter((t) => t.appearance === 'light'))
-const activeTab = ref<'general' | 'appearance' | 'providers' | 'mcp' | 'skills' | 'browser' | 'ssh' | 'channels' | 'shortcuts' | 'usage'>('general')
-const mcpServers = ref<Record<string, MCPServerInfo>>({})
-const sshAliases = ref<SSHAlias[]>([])
-const sshCurrent = ref('local')
-const mcpLoading = ref(false)
-
-const channelAvailable = ref(false)
-const channelState = ref('none')
-const channelLoading = ref(false)
-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)
-// Whether the connected backend was built with BLE support (`-tags desktop`).
-// Web builds report false, so the toggle is hidden — a compile-time distinction.
-const bleAvailable = ref(false)
-
-// Provider management state
-const configuredProviders = ref<ProviderDetail[]>([])
-// Edit/add-model dialog: opens in its own modal window (not inline) so the
-// providers tab reads as a clean list of cards. `editingProviderTarget` is null
-// for add mode, or the provider being edited.
-const showProviderDialog = ref(false)
-const editingProviderTarget = ref<ProviderDetail | null>(null)
-// Add/edit-model dialog: a separate modal for authoring a single custom model.
-// `modelDialogTarget` is null for add, or the model being edited.
-const showModelDialog = ref(false)
-const modelDialogProvider = ref('')
-const modelDialogTarget = ref<CustomModelDetail | null>(null)
-// Validation error surfaced in the model dialog (e.g. duplicate id). Cleared
-// when the dialog closes or the user edits the id.
-const modelSaveError = ref('')
-const showAddProvider = ref(false)
-const addProviderList = ref<SetupProvider[]>([]) // registry list, passed to the dialog
-const addLoading = ref(false)
-const deleteConfirmId = ref('')
-
-
-// Catalog (browse directory) state, keyed by provider id so each card tracks its
-// own open/search/refresh state independently. The edit/add flow lives in
-// ProviderEditDialog; this tab only owns the inline catalog expansion.
-const catalogOpen = ref<string>('') // provider id whose catalog is expanded, '' = none
-const catalogLoading = ref<string>('') // provider id currently fetching
-const catalogModels = ref<Record<string, CatalogModel[]>>({})
-const catalogSearch = ref<string>('')
-
-
-watch(() => props.open, async (isOpen) => {
-  if (isOpen) {
-    mcpEditing.value = null
-    mcpLoginMessage.value = ''
-    mcpLoginMessageFor.value = ''
-    await loadMCP()
-    loadSkills()
-
-    try {
-      const sshData = await api.sshList()
-      sshAliases.value = sshData.aliases
-      sshCurrent.value = sshData.current
-    } catch { /* ignore */ }
-
-    try {
-      const ch = await api.channelStatus()
-      channelAvailable.value = ch.available
-      channelState.value = ch.state ?? 'none'
-    } catch { /* ignore */ }
-
-    // Bluetooth status channel: the backend reports whether it was compiled with
-    // BLE support (`available`). Web builds report false → the toggle stays hidden.
-    try {
-      const ble = await api.channelBLEStatus()
-      bleAvailable.value = ble.available
-      bleEnabled.value = ble.enabled
-    } catch { /* ignore */ }
-
-    // Load configured providers, then pre-fetch each one's model catalog so the
-    // "Browse Models" panel (default-open on each card) shows models immediately.
-    try {
-      configuredProviders.value = await api.listProviders()
-      await Promise.all(configuredProviders.value.map(async (p) => {
-        if (!catalogModels.value[p.id]) {
-          try { catalogModels.value[p.id] = await api.providerCatalog(p.id) }
-          catch { catalogModels.value[p.id] = [] }
-        }
-      }))
-      // Catalogs are pre-loaded; keep them visible (not collapsed) by default.
-      catalogOpen.value = configuredProviders.value[0]?.id ?? ''
-    } catch { /* ignore */ }
-  } else {
-    channelQRContent.value = ''
-    showAddProvider.value = false
-    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
-  deleteConfirmId.value = ''
-  mcpLoginMessage.value = ''
-  mcpLoginMessageFor.value = ''
-  stopLoginPoll()
-  stopChannelPoll()
-})
-
-async function loadMCP() {
-  mcpLoading.value = true
-  try {
-    const result = await api.mcpList()
-    mcpServers.value = result.servers
-  } catch { /* ignore */ }
-  mcpLoading.value = false
-}
-
-async function toggleMCP(name: string, enabled: boolean) {
-  try {
-    await api.mcpToggle(name, enabled)
-    if (mcpServers.value[name]) {
-      mcpServers.value[name].enabled = enabled
-    }
-    await loadMCP()
-  } catch (err) {
-    console.error('Failed to toggle MCP server:', err)
-  }
-}
-
-function serverIcon(type: string) {
-  return type === 'sse' || type === 'http' ? GlobeAltIcon : BoltIcon
-}
-
-function mcpStatusLabel(info: MCPServerInfo): string {
-  if (!info.enabled) return t('settings.mcp.status.disabled')
-  switch (info.status) {
-    case 'connected': return t('settings.mcp.status.connected')
-    case 'needs_auth': return t('settings.mcp.status.loginRequired')
-    case 'error': return t('settings.mcp.status.error')
-    default: return t('settings.mcp.status.configured')
-  }
-}
-
-function mcpStatusColor(info: MCPServerInfo): string {
-  if (!info.enabled) return 'var(--color-muted-foreground)'
-  switch (info.status) {
-    case 'connected': return 'var(--color-success-fg)'
-    case 'needs_auth': return 'var(--color-warning-fg)'
-    case 'error': return 'var(--color-error-fg)'
-    default: return 'var(--color-muted-foreground)'
-  }
-}
-
-// --- MCP server add/edit form ---
-interface MCPHeaderRow { key: string; value: string }
-interface MCPForm {
-  name: string
-  transport: 'local' | 'http' | 'sse'
-  url: string
-  command: string
-  argsText: string
-  headers: MCPHeaderRow[]
-  timeout: string
-  oauthEnabled: boolean
-  clientId: string
-  clientSecret: string
-  scopesText: string
-}
-
-// mcpEditing: null = no form, '' = adding new, otherwise the server name being edited.
-const mcpEditing = ref<string | null>(null)
-const mcpSaving = ref(false)
-const mcpFormError = ref('')
-const mcpForm = reactive<MCPForm>({
-  name: '', transport: 'http', url: '', command: '', argsText: '',
-  headers: [], timeout: '', oauthEnabled: false, clientId: '', clientSecret: '', scopesText: '',
-})
-
-function resetMCPForm() {
-  mcpForm.name = ''
-  mcpForm.transport = 'http'
-  mcpForm.url = ''
-  mcpForm.command = ''
-  mcpForm.argsText = ''
-  mcpForm.headers = []
-  mcpForm.timeout = ''
-  mcpForm.oauthEnabled = false
-  mcpForm.clientId = ''
-  mcpForm.clientSecret = ''
-  mcpForm.scopesText = ''
-  mcpFormError.value = ''
-}
-
-function openAddMCP() {
-  resetMCPForm()
-  mcpEditing.value = ''
-}
-
-function openEditMCP(info: MCPServerInfo) {
-  resetMCPForm()
-  mcpForm.name = info.name
-  mcpForm.transport = (info.type === 'stdio' || info.type === '') ? 'local' : (info.type as 'http' | 'sse')
-  mcpForm.url = info.url ?? ''
-  mcpForm.command = info.command ?? ''
-  mcpForm.argsText = (info.args ?? []).join(' ')
-  mcpForm.headers = Object.entries(info.headers ?? {}).map(([key, value]) => ({ key, value }))
-  mcpForm.timeout = info.timeout ? String(info.timeout) : ''
-  mcpForm.oauthEnabled = info.oauth
-  mcpEditing.value = info.name
-}
-
-function cancelMCPEdit() {
-  mcpEditing.value = null
-  mcpFormError.value = ''
-}
-
-function addHeaderRow() {
-  mcpForm.headers.push({ key: '', value: '' })
-}
-
-function removeHeaderRow(i: number) {
-  mcpForm.headers.splice(i, 1)
-}
-
-function buildMCPRequest(): MCPServerRequest {
-  const headers: Record<string, string> = {}
-  for (const h of mcpForm.headers) {
-    if (h.key.trim()) headers[h.key.trim()] = h.value
-  }
-  const req: MCPServerRequest = {
-    name: mcpForm.name.trim(),
-    type: mcpForm.transport,
-  }
-  if (mcpForm.transport === 'local') {
-    req.command = mcpForm.command.trim()
-    req.args = mcpForm.argsText.trim() ? mcpForm.argsText.trim().split(/\s+/) : undefined
-  } else {
-    req.url = mcpForm.url.trim()
-    if (Object.keys(headers).length) req.headers = headers
-    if (mcpForm.timeout.trim()) req.timeout = Number(mcpForm.timeout)
-    if (mcpForm.oauthEnabled || mcpForm.clientId.trim()) {
-      req.oauth = {
-        enabled: true,
-        client_id: mcpForm.clientId.trim() || undefined,
-        client_secret: mcpForm.clientSecret.trim() || undefined,
-        scopes: mcpForm.scopesText.trim() ? mcpForm.scopesText.trim().split(/\s+/) : undefined,
-      }
-    }
-  }
-  return req
-}
-
-async function saveMCP() {
-  mcpFormError.value = ''
-  if (!mcpForm.name.trim()) { mcpFormError.value = 'Server name is required'; return }
-  if (mcpForm.transport === 'local' && !mcpForm.command.trim()) { mcpFormError.value = 'Command is required'; return }
-  if (mcpForm.transport !== 'local' && !mcpForm.url.trim()) { mcpFormError.value = 'URL is required'; return }
-  mcpSaving.value = true
-  try {
-    const req = buildMCPRequest()
-    if (mcpEditing.value) {
-      await api.mcpUpdate(mcpEditing.value, req)
-    } else {
-      await api.mcpCreate(req)
-    }
-    mcpEditing.value = null
-    await loadMCP()
-  } catch (err) {
-    mcpFormError.value = err instanceof Error ? err.message : 'Failed to save'
-  }
-  mcpSaving.value = false
-}
-
-async function deleteMCP(name: string) {
-  try {
-    await api.mcpDelete(name)
-    await loadMCP()
-  } catch (err) {
-    console.error('Failed to delete MCP server:', err)
-  }
-}
-
-// --- 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() {
-  if (loginPollTimer) { clearInterval(loginPollTimer); loginPollTimer = null }
-}
-
-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
-  }
-  stopLoginPoll()
-  loginPollTimer = setInterval(async () => {
-    try {
-      const st = await api.mcpLoginStatus(name)
-      if (st.status === 'authorized') {
-        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(); stopChannelPoll() })
-
-// --- Skills ---
-const skills = ref<SkillInfo[]>([])
-const skillsLoading = ref(false)
-const skillFilter = ref<'all' | 'local' | 'builtin'>('all')
-const skillSearch = ref('')
-
-const filteredSkills = computed(() => {
-  const q = skillSearch.value.trim().toLowerCase()
-  return skills.value.filter((s) => {
-    if (skillFilter.value === 'builtin' && !s.builtin) return false
-    if (skillFilter.value === 'local' && s.builtin) return false
-    if (q && !s.name.toLowerCase().includes(q) && !(s.description ?? '').toLowerCase().includes(q)) return false
-    return true
-  })
-})
-
-async function loadSkills() {
-  skillsLoading.value = true
-  try {
-    skills.value = await api.skillsList()
-  } catch { /* ignore */ }
-  skillsLoading.value = false
-}
-
-async function toggleSkill(name: string, enabled: boolean) {
-  try {
-    await api.skillToggle(name, enabled)
-    const sk = skills.value.find((s) => s.name === name)
-    if (sk) sk.enabled = enabled
-  } catch (err) {
-    console.error('Failed to toggle skill:', err)
-  }
-}
-
-const shortcuts = computed(() => [
-  { keys: 'Enter', desc: t('settings.shortcuts.items.sendMessage') },
-  { keys: 'Shift+Enter', desc: t('settings.shortcuts.items.newLine') },
-  { keys: 'Escape', desc: t('settings.shortcuts.items.stopAgent') },
-  { keys: '/', desc: t('settings.shortcuts.items.slashCommands') },
-  { keys: 'Ctrl+L', desc: t('settings.shortcuts.items.focusInput') },
-  { keys: 'Ctrl+Shift+N', desc: t('settings.shortcuts.items.newConversation') },
-  { keys: 'Ctrl+,', desc: t('settings.shortcuts.items.openSettings') },
-  { keys: 'Ctrl+`', desc: t('settings.shortcuts.items.toggleTerminal') },
-])
-
-// 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()
-  }
-})
-
-// --- Browser use ---
-const browserStatus = ref<BrowserStatusResponse | null>(null)
-const browserCfg = ref<BrowserConfig>({ enabled: false, backend: 'auto', site_permissions: [], approval: {}, dev_mode: false })
-let browserSaveTimer: ReturnType<typeof setTimeout> | null = null
-
-async function loadBrowser() {
-  try {
-    const st = await api.browserStatus()
-    browserStatus.value = st
-    if (st.status) {
-      browserCfg.value = {
-        enabled: st.status.enabled,
-        backend: st.status.backend || 'auto',
-        chrome_path: st.status.chrome_path,
-        dev_mode: st.status.dev_mode,
-        approval: st.approval || {},
-        site_permissions: st.site_permissions || [],
-      }
-    }
-  } catch (err) {
-    console.error('Failed to load browser status:', err)
-  }
-}
-
-async function saveBrowser() {
-  if (browserSaveTimer) clearTimeout(browserSaveTimer)
-  browserSaveTimer = setTimeout(async () => {
-    try {
-      await api.browserSaveConfig(browserCfg.value)
-      await loadBrowser()
-    } catch (err) {
-      console.error('Failed to save browser config:', err)
-    }
-  }, 250)
-}
-
-function browserApproval(cls: string): string {
-  return browserCfg.value.approval?.[cls] || 'ask'
-}
-function setApproval(cls: string, val: string) {
-  if (!browserCfg.value.approval) browserCfg.value.approval = {}
-  browserCfg.value.approval[cls] = val
-  saveBrowser()
-}
-function addSitePerm() {
-  if (!browserCfg.value.site_permissions) browserCfg.value.site_permissions = []
-  browserCfg.value.site_permissions.push({ origin: '', navigate: 'allow', interact: 'allow' })
-}
-function removeSitePerm(i: number) {
-  browserCfg.value.site_permissions?.splice(i, 1)
-  saveBrowser()
-}
-// Load browser status when entering the tab; poll so the connected badge and
-// the extension's online state update live.
-let browserPoll: ReturnType<typeof setInterval> | null = null
-watch(activeTab, (tab) => {
-  if (browserPoll) { clearInterval(browserPoll); browserPoll = null }
-  if (tab === 'browser') {
-    loadBrowser()
-    browserPoll = setInterval(loadBrowser, 3000)
-  }
-})
-
-// 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 drawChannelQR()
-    pollChannelState()
-  } catch (err) {
-    console.error('Channel login failed:', err)
-  }
-  channelLoading.value = false
-}
-
-async function channelLogout() {
-  channelLoading.value = true
-  try {
-    await api.channelLogout()
-    channelState.value = 'none'
-    channelQRContent.value = ''
-    store.channelEnabled = false
-  } catch (err) {
-    console.error('Channel logout failed:', err)
-  }
-  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
-  channelPollInterval = setInterval(async () => {
-    try {
-      const ch = await api.channelStatus()
-      if (ch.state === 'enabled' || ch.state === 'disabled') {
-        channelState.value = ch.state
-        channelQRContent.value = ''
-        store.channelAvailable = true
-        store.channelEnabled = ch.state === 'enabled'
-        // Show reminder when first connected via login flow
-        if (ch.state === 'enabled' && previousState === 'scanning') {
-          channelLoginReminder.value = true
-        }
-        stopChannelPoll()
-      }
-    } catch { /* ignore */ }
-  }, 2000)
-  // Safety cap: stop after 3 min even if the state never resolves.
-  channelPollTimeout = setTimeout(stopChannelPoll, 180000)
-}
-
-const tabLabel = computed<Record<string, string>>(() => ({
-  general: t('settings.tabs.general'),
-  appearance: t('settings.tabs.appearance'),
-  providers: t('settings.tabs.providers'),
-  mcp: t('settings.tabs.mcp'),
-  skills: t('settings.tabs.skills'),
-  browser: t('settings.tabs.browser'),
-  ssh: t('settings.tabs.ssh'),
-  channels: t('settings.tabs.channels'),
-  shortcuts: t('settings.tabs.shortcuts'),
-  usage: t('settings.tabs.usage'),
-}))
-
-// 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,
-  browser: GlobeAltIcon,
-  ssh: CommandLineIcon,
-  channels: BellAlertIcon,
-  shortcuts: ComputerDesktopIcon,
-  usage: ChartBarIcon,
-}
-
-
-
-// Open the edit/add dialog. For add, editingProviderTarget stays null and the
-// dialog shows its "select type" step. For edit, it seeds from the provider.
-async function startAddProvider() {
-  editingProviderTarget.value = null
-  addLoading.value = true
-  try {
-    addProviderList.value = await api.setupProviders()
-  } catch { /* ignore */ }
-  addLoading.value = false
-  showProviderDialog.value = true
-}
-
-function startEditProvider(p: ProviderDetail) {
-  editingProviderTarget.value = p
-  showProviderDialog.value = true
-}
-
-// After the dialog saves, refresh the provider list + chat models, then close.
-async function onProviderSaved() {
-  configuredProviders.value = await api.listProviders()
-  store.fetchModels()
-}
-
-async function deleteProvider(id: string) {
-  try {
-    await api.deleteProvider(id)
-    configuredProviders.value = configuredProviders.value.filter(p => p.id !== id)
-    deleteConfirmId.value = ''
-    store.fetchModels()
-  } catch (err: unknown) {
-    console.error('Failed to delete provider:', err)
-  }
-}
-
-// ── Add / edit custom model (separate modal) ──
-// The card lists registry + custom models uniformly; only custom models are
-// editable (registry models are read-only and have no stored per-model fields).
-function startAddModel(providerId: string) {
-  modelSaveError.value = ''
-  modelDialogProvider.value = providerId
-  modelDialogTarget.value = null
-  showModelDialog.value = true
-}
-
-function startEditModel(providerId: string, model: CustomModelDetail) {
-  modelSaveError.value = ''
-  modelDialogProvider.value = providerId
-  modelDialogTarget.value = model
-  showModelDialog.value = true
-}
-
-// Save a model from the dialog: rebuild the provider's custom_models (edit =
-// replace the matching id, add = append) and persist via updateProvider.
-async function onModelSave(payload: { id: string; name?: string; reasoning: boolean; context: number; attachment: boolean; effortTiers: string[]; isEdit: boolean; originalId?: string }) {
-  const providerId = modelDialogProvider.value
-  const p = configuredProviders.value.find(x => x.id === providerId)
-  if (!p) return
-  // Reject duplicate model ids — including collisions with built-in (registry)
-  // models. The provider's custom_models already lists both registry and custom
-  // models, so a single membership check covers both. When editing, the model's
-  // own original id is allowed (renaming to itself is a no-op).
-  const newId = payload.id.trim()
-  const isSelf = payload.isEdit && payload.originalId === newId
-  if (!isSelf) {
-    const clash = (p.custom_models ?? []).some(m => m.id === newId)
-    if (clash) {
-      modelSaveError.value = t('settings.providers.customModelConflict')
-      return
-    }
-  }
-  modelSaveError.value = ''
-  // Only user-defined models are persisted; registry models are excluded from
-  // the saved list (they're read-only and derived from models.dev).
-  const next = (p.custom_models ?? []).filter(m => m.custom).map(m => ({
-    id: m.id, name: m.name, reasoning: m.reasoning, context: m.context,
-    attachment: m.attachment, effort_tiers: m.effort_tiers,
-  }))
-  const built = { id: payload.id, name: payload.name, reasoning: payload.reasoning, context: payload.context || undefined, attachment: payload.attachment || undefined, effort_tiers: payload.effortTiers.length ? payload.effortTiers : undefined }
-  if (payload.isEdit && payload.originalId) {
-    const i = next.findIndex(m => m.id === payload.originalId)
-    if (i >= 0) {
-      next[i] = built
-    } else {
-      next.push(built)
-    }
-  } else {
-    next.push(built)
-  }
-  try {
-    await api.updateProvider(providerId, { custom_models: next })
-    configuredProviders.value = await api.listProviders()
-    await refreshCatalog(providerId)
-    store.fetchModels()
-    showModelDialog.value = false
-  } catch (err: unknown) {
-    console.error('Failed to save model:', err)
-  }
-}
-
-// ── Browse directory (catalog) ── Each provider card can expand an inline
-// catalog of its models. For registry providers this is the built-in list;
-// for custom endpoints it queries the live /models endpoint. A row's "added"
-// flag is a toggle: click "✓ 已添加" to remove, "+ 添加" to add (then save).
-// toggleCatalog below is the entry point used by the card's "Browse Models" button.
-
-
-// Coerce a catalog model row into a CustomModelDetail for the edit dialog.
-function cmToDetail(cm: CatalogModel): CustomModelDetail {
-  return {
-    id: cm.id,
-    name: cm.name,
-    reasoning: cm.reasoning,
-    context: cm.context,
-    attachment: cm.attachment,
-    effort_tiers: cm.effort_tiers ? [...cm.effort_tiers] : [],
-    custom: true,
-  }
-}
-
-// Format a context-window size compactly: < 1000 tokens shows the raw number,
-// >= 1000 shows K (e.g. 200000 → "200K"), so small/unset values don't render as
-// a cluttered "0K".
-function formatContext(ctx: number | undefined): string {
-  if (!ctx || ctx <= 0) return ''
-  if (ctx < 1000) return String(ctx)
-  const k = Math.round(ctx / 1000)
-  return k + 'K'
-}
-
-// Remove a user-defined custom model by id (registry models can't be removed
-// this way). Used by the catalog row's remove button.
-async function removeCustomModelById(providerId: string, modelId: string) {
-  const p = configuredProviders.value.find(x => x.id === providerId)
-  if (!p) return
-  const next = (p.custom_models ?? []).filter(m => m.custom && m.id !== modelId).map(m => ({
-    id: m.id, name: m.name, reasoning: m.reasoning, context: m.context,
-    attachment: m.attachment, effort_tiers: m.effort_tiers,
-  }))
-  try {
-    await api.updateProvider(providerId, { custom_models: next })
-    configuredProviders.value = await api.listProviders()
-    await refreshCatalog(providerId)
-    store.fetchModels()
-  } catch (err: unknown) {
-    console.error('Failed to remove model:', err)
-  }
-}
-
-async function refreshCatalog(providerId: string) {
-  catalogLoading.value = providerId
-  try {
-    catalogModels.value[providerId] = await api.providerCatalog(providerId)
-  } catch {
-    catalogModels.value[providerId] = []
-  }
-  catalogLoading.value = ''
-}
-
-function filteredCatalog(providerId: string): CatalogModel[] {
-  const list = catalogModels.value[providerId] ?? []
-  const q = catalogSearch.value.trim().toLowerCase()
-  if (!q) return list
-  return list.filter(m => m.id.toLowerCase().includes(q) || (m.name ?? '').toLowerCase().includes(q))
-}
-
-function addedCount(providerId: string): number {
-  return (catalogModels.value[providerId] ?? []).filter(m => m.added).length
-}
-
-function totalCount(providerId: string): number {
-  return (catalogModels.value[providerId] ?? []).length
-}
-
-// Toggle a catalog row's added state locally (optimistic); the new model set is
-// persisted by calling saveCatalogModels, which rebuilds the provider's
-// custom_models from the "added" registry models + existing custom models.
-// For registry providers toggling only affects the model-state (enabled), so we
-// keep this purely a visual affordance here and rely on the model picker for the
-// real enable/disable. For custom endpoints, an "added" id becomes a custom model.
-// Toggle a catalog row's added state and persist it. For registry models this
-// enables/disables them in model_state (so they appear in / disappear from the
-// chat model picker); for custom models it's handled by add/remove instead.
-async function toggleCatalogModel(providerId: string, modelId: string) {
-  const list = catalogModels.value[providerId]
-  if (!list) return
-  const m = list.find(x => x.id === modelId)
-  if (!m) return
-  const next = !m.added
-  m.added = next
-  try {
-    await api.toggleModelEnabled(providerId, modelId, next)
-    store.fetchModels()
-  } catch (err: unknown) {
-    // revert on failure
-    m.added = !next
-    console.error('Failed to toggle model:', err)
-  }
-}
-
-// startAddModel / startEditModel / onModelSave / removeCustomModel live above
-// (declared with the provider-dialog handlers). The card's "+ 添加自定义模型"
-// button opens the ModelEditDialog modal rather than an inline form.
-
-// ── Delete guard ── If the provider hosts the currently active model, guide
-// the user to switch models instead of failing outright.
-function activeModelOnProvider(providerId: string): string {
-  // store.providerName / store.modelName hold the active provider + model ids.
-  // We surface the active model id when it belongs to the provider being deleted.
-  if (store.providerName === providerId && store.modelName) return store.modelName
-  return ''
-}
-
-// Close the delete-confirm popover and open the model picker so the user can
-// move off an in-use model before deleting its provider.
-function closeAndSwitchModel() {
-  deleteConfirmId.value = ''
-  emit('close')
-  // The model picker is opened from the chat composer; there's no direct store
-  // action here, so we rely on the user re-opening it. Closing settings returns
-  // them to the chat where the picker is one click away.
-}
-
-
-</script>
-
-<template>
-  <TransitionRoot :show="open" as="template">
-    <Dialog @close="emit('close')" class="relative" style="z-index: var(--z-modal)">
-      <!-- Opaque page background: settings is a full page, not a floating modal. -->
-      <TransitionChild
-        enter="ease-out duration-150"
-        enter-from="opacity-0"
-        enter-to="opacity-100"
-        leave="ease-in duration-100"
-        leave-from="opacity-100"
-        leave-to="opacity-0">
-        <div class="fixed inset-0" style="background: var(--color-background)" />
-      </TransitionChild>
-
-      <!-- Edge-to-edge full page. -->
-      <div class="fixed inset-0 flex">
-        <TransitionChild
-          class="w-full h-full"
-          enter="ease-out duration-200"
-          enter-from="opacity-0 scale-[0.995]"
-          enter-to="opacity-100 scale-100"
-          leave="ease-in duration-100"
-          leave-from="opacity-100 scale-100"
-          leave-to="opacity-0 scale-[0.995]">
-          <!-- Mirrors the chat page shell: full-height left rail + right column
-               with a transparent top bar and an inset surface content panel. -->
-          <DialogPanel
-            class="settings-shell relative flex w-full h-full overflow-hidden"
-            style="background-color: var(--color-background)"
-          >
-            <!-- Native macOS title-bar drag strip, matching the workspace shell
-                 so Settings has the same top inset / draggable region. -->
-            <div class="titlebar-drag" data-tauri-drag-region aria-hidden="true" />
-
-            <!-- Left rail (shell tone, like the sidebar): back-to-workspace at
-                 the top, then the section nav. -->
-            <nav class="settings-rail shrink-0 flex flex-col">
-              <div class="flex flex-col gap-0.5">
-                <button
-                  v-for="tab in (['general', 'appearance', 'providers', 'mcp', 'skills', 'browser', 'ssh', 'channels', 'shortcuts', 'usage'] as const)"
-                  :key="tab"
-                  class="group relative w-full flex items-center gap-2.5 h-8 pl-2.5 pr-2 text-left text-[13px] cursor-pointer transition-colors duration-[var(--duration-fast)] hover:bg-[var(--color-secondary)]"
-                  :style="activeTab === tab
-                    ? { borderRadius: 'var(--radius-md)', color: 'var(--color-foreground)', backgroundColor: 'var(--color-secondary)', fontWeight: '500' }
-                    : { borderRadius: 'var(--radius-md)', color: 'var(--color-muted-foreground)', backgroundColor: 'transparent' }"
-                  @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-accent-neutral)" />
-                  <component :is="iconFor[tab]" class="w-3.5 h-3.5 shrink-0" />
-                  <span class="truncate">{{ tabLabel[tab] }}</span>
-                </button>
-              </div>
-              <!-- A second "Back to workspace" pinned to the bottom of the rail:
-                   settings is opened from the sidebar's bottom gear, so returning
-                   shouldn't require traveling all the way back to the top. -->
-              <button
-                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')"
-              >
-                <ArrowLeftIcon class="w-4 h-4 transition-transform group-hover:-translate-x-0.5" />
-                {{ t('settings.backToWorkspace') }}
-              </button>
-            </nav>
-
-            <!-- Right column: just the inset surface content panel — no header
-                 bar. The active section is shown by the rail; close via the
-                 rail's "Back to workspace" or Esc. A visually-hidden title keeps
-                 the dialog accessible. -->
-            <div class="flex flex-col flex-1 min-w-0">
-              <DialogTitle class="sr-only">Settings · {{ tabLabel[activeTab] }}</DialogTitle>
-
-              <!-- Inset content panel — matches .chat-panel. Only the inner div
-                   scrolls; each tab block is centered and width-capped. -->
-              <div class="settings-panel flex flex-col flex-1 min-h-0">
-                <div class="flex-1 min-h-0 overflow-y-auto px-8 py-7 [&>div]:max-w-3xl [&>div]:mx-auto">
-                <!-- General tab -->
-                <div v-if="activeTab === 'general'" class="space-y-5">
-                  <!-- Connection status -->
-                  <div class="s-row">
-                    <div class="s-row-icon">
-                      <span
-                        class="w-2 h-2 rounded-full"
-                        :style="{ backgroundColor: store.wsConnected ? 'var(--color-success)' : 'var(--color-border)' }"
-                      />
-                    </div>
-                    <div class="s-row-body">
-                      <div class="s-row-title">{{ t('settings.general.serverState') }}</div>
-                      <div class="s-row-sub" :style="{ color: store.wsConnected ? 'var(--color-success)' : 'var(--color-muted-foreground)' }">
-                        {{ store.wsConnected ? t('settings.general.serverOnline') : t('settings.general.serverOffline') }}
-                      </div>
-                    </div>
-                  </div>
-
-                  <!-- Token usage -->
-                  <div v-if="store.tokenInfo" class="s-row">
-                    <div class="s-row-body">
-                      <div class="s-row-title">{{ t('settings.general.tokenUsage') }}</div>
-                      <div class="flex items-center gap-2 mt-1.5">
-                        <div class="flex-1 h-1.5 rounded-full overflow-hidden" style="background-color: var(--color-muted)">
-                          <div
-                            class="h-full rounded-full transition-all"
-                            :style="{ width: store.tokenPercentage + '%', backgroundColor: store.tokenPercentage > 80 ? 'var(--color-destructive)' : store.tokenPercentage > 50 ? 'var(--color-warning-fg)' : 'var(--color-accent-neutral)' }"
-                          />
-                        </div>
-                        <span class="text-[10px] font-mono" style="color: var(--color-muted-foreground)">
-                          {{ store.tokenInfo.total_tokens.toLocaleString() }}
-                          <span v-if="store.tokenInfo.model_context_limit"> / {{ store.tokenInfo.model_context_limit.toLocaleString() }}</span>
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-
-                  <!-- Preferences — configurable toggles with explanations. -->
-                  <div>
-                    <div class="text-[10px] uppercase tracking-wider font-medium mb-2" style="color: var(--color-muted-foreground)">{{ t('settings.general.preferences') }}</div>
-
-                    <!-- Default auto-approve -->
-                    <div class="s-row">
-                      <div class="s-row-icon"><ShieldCheckIcon class="w-4 h-4" /></div>
-                      <div class="s-row-body">
-                        <div class="s-row-title">{{ t('settings.general.autoApproveTitle') }}</div>
-                        <div class="s-row-sub">{{ t('settings.general.autoApproveDesc') }}</div>
-                      </div>
-                      <div class="s-row-actions">
-                        <button
-                          class="s-switch"
-                          :data-on="store.autoApprove ? 'true' : 'false'"
-                          :title="store.autoApprove ? t('common.disable') : t('common.enable')"
-                          :aria-pressed="store.autoApprove"
-                          @click="toggleAutoApprove"
-                        />
-                      </div>
-                    </div>
-
-                    <!-- Bluetooth status notifications (desktop-only; the backend
-                         reports availability from a compile-time feature flag). -->
-                    <div v-if="bleAvailable" class="s-row">
-                      <div class="s-row-icon"><SignalIcon class="w-4 h-4" /></div>
-                      <div class="s-row-body">
-                        <div class="s-row-title">{{ t('settings.general.bleTitle') }}</div>
-                        <div class="s-row-sub">{{ t('settings.general.bleDesc') }}</div>
-                      </div>
-                      <div class="s-row-actions">
-                        <button
-                          class="s-switch"
-                          :data-on="bleEnabled ? 'true' : 'false'"
-                          :disabled="bleSaving"
-                          :title="bleEnabled ? t('common.disable') : t('common.enable')"
-                          :aria-pressed="bleEnabled"
-                          @click="toggleBLE"
-                        />
-                      </div>
-                    </div>
-
-                    <!-- Language -->
-                    <div class="s-row">
-                      <div class="s-row-icon"><GlobeAltIcon class="w-4 h-4" /></div>
-                      <div class="s-row-body">
-                        <div class="s-row-title">{{ t('settings.general.languageTitle') }}</div>
-                        <div class="s-row-sub">{{ t('settings.general.languageDesc') }}</div>
-                      </div>
-                      <div class="s-row-actions">
-                        <HMenu as="div" class="relative lang-menu" v-slot="{ open }">
-                          <MenuButton
-                            class="s-btn s-btn-secondary s-btn-sm"
-                            :aria-label="t('settings.general.languageTitle')"
-                            :aria-expanded="open"
-                          >
-                            <span class="lang-trigger-label">{{ LOCALE_LABELS[currentLocale] }}</span>
-                            <ChevronDownIcon class="w-3 h-3 lang-trigger-caret" :class="{ open }" />
-                          </MenuButton>
-                          <transition
-                            enter-active-class="pop-enter-active"
-                            enter-from-class="pop-enter-from"
-                            leave-active-class="pop-leave-active"
-                            leave-to-class="pop-leave-to"
-                          >
-                            <MenuItems class="lang-menu-items">
-                              <MenuItem v-for="loc in supportedLocales" :key="loc" v-slot="{ active }">
-                                <button
-                                  class="lang-menu-item"
-                                  :class="{ highlight: active, current: loc === currentLocale }"
-                                  :aria-current="loc === currentLocale ? 'true' : undefined"
-                                  @click="chooseLocale(loc)"
-                                >
-                                  <span class="lang-item-label">{{ LOCALE_LABELS[loc] }}</span>
-                                  <CheckIcon v-if="loc === currentLocale" class="w-3.5 h-3.5 lang-item-check" />
-                                </button>
-                              </MenuItem>
-                            </MenuItems>
-                          </transition>
-                        </HMenu>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Appearance tab -->
-                <div v-if="activeTab === 'appearance'" class="space-y-5">
-                  <h3 class="text-[13px] font-semibold tracking-tight" style="color: var(--color-foreground)">{{ t('settings.appearance.theme') }}</h3>
-
-                  <!-- System (follow OS) -->
-                  <button
-                    class="w-full flex items-center gap-3 px-3 py-2.5 rounded-md cursor-pointer transition-colors text-left"
-                    :style="themeChoice === 'system'
-                      ? { border: '1px solid var(--color-accent-neutral)', backgroundColor: 'var(--neutral-wash-soft)' }
-                      : { border: '1px solid var(--color-border)', backgroundColor: 'var(--color-surface)' }"
-                    @click="setTheme('system')"
-                  >
-                      <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)">{{ t('settings.appearance.system') }}</div>
-                      <div class="text-[10px]" style="color: var(--color-muted-foreground)">{{ t('settings.appearance.systemDesc') }}</div>
-                    </div>
-                    <span v-if="themeChoice === 'system'" class="text-[10px] px-1.5 py-0.5 rounded-full shrink-0" style="background-color: var(--neutral-wash); color: var(--color-accent-neutral)">{{ t('settings.appearance.active') }}</span>
-                  </button>
-
-                  <!-- Dark themes -->
-                  <div>
-                    <div class="text-[10px] mb-2 font-medium" style="color: var(--color-muted-foreground)">{{ t('settings.appearance.dark') }}</div>
-                    <div class="grid grid-cols-2 gap-2">
-                      <button
-                        v-for="t in darkThemes"
-                        :key="t.id"
-                        :data-theme="t.id"
-                        class="rounded-md overflow-hidden cursor-pointer text-left transition-transform active:scale-[0.98]"
-                        :style="{ border: themeChoice === t.id ? '2px solid var(--color-accent-neutral)' : '1px solid var(--color-border)', backgroundColor: 'var(--color-background)' }"
-                        @click="setTheme(t.id)"
-                      >
-                        <div class="px-2.5 pt-2 pb-1.5">
-                          <div class="flex items-center gap-1.5 mb-1.5">
-                            <span class="w-2.5 h-2.5 rounded-full" style="background-color: var(--color-primary)" />
-                            <span class="w-2.5 h-2.5 rounded-full" style="background-color: var(--color-accent)" />
-                            <span class="w-2.5 h-2.5 rounded-full" style="background-color: var(--color-success-fg)" />
-                            <span class="w-2.5 h-2.5 rounded-full" style="background-color: var(--color-error-fg)" />
-                          </div>
-                          <div class="rounded px-1.5 py-1 text-[10px] font-mono truncate" style="background-color: var(--color-surface); color: var(--color-foreground)">
-                            <span style="color: var(--color-primary)">&gt;</span> jcode
-                          </div>
-                        </div>
-                        <div class="px-2.5 py-1.5 flex items-center justify-between" style="background-color: var(--color-surface); border-top: 1px solid var(--color-border)">
-                          <span class="text-[11px] font-medium truncate" style="color: var(--color-foreground)">{{ t.label }}</span>
-                          <span v-if="themeChoice === t.id" class="text-[10px] shrink-0" style="color: var(--color-accent-neutral)">●</span>
-                        </div>
-                      </button>
-                    </div>
-                  </div>
-
-                  <!-- Light themes -->
-                  <div>
-                    <div class="text-[10px] mb-2 font-medium" style="color: var(--color-muted-foreground)">{{ t('settings.appearance.light') }}</div>
-                    <div class="grid grid-cols-2 gap-2">
-                      <button
-                        v-for="t in lightThemes"
-                        :key="t.id"
-                        :data-theme="t.id"
-                        class="rounded-md overflow-hidden cursor-pointer text-left transition-transform active:scale-[0.98]"
-                        :style="{ border: themeChoice === t.id ? '2px solid var(--color-accent-neutral)' : '1px solid var(--color-border)', backgroundColor: 'var(--color-background)' }"
-                        @click="setTheme(t.id)"
-                      >
-                        <div class="px-2.5 pt-2 pb-1.5">
-                          <div class="flex items-center gap-1.5 mb-1.5">
-                            <span class="w-2.5 h-2.5 rounded-full" style="background-color: var(--color-primary)" />
-                            <span class="w-2.5 h-2.5 rounded-full" style="background-color: var(--color-accent)" />
-                            <span class="w-2.5 h-2.5 rounded-full" style="background-color: var(--color-success-fg)" />
-                            <span class="w-2.5 h-2.5 rounded-full" style="background-color: var(--color-error-fg)" />
-                          </div>
-                          <div class="rounded px-1.5 py-1 text-[10px] font-mono truncate" style="background-color: var(--color-surface); color: var(--color-foreground)">
-                            <span style="color: var(--color-primary)">&gt;</span> jcode
-                          </div>
-                        </div>
-                        <div class="px-2.5 py-1.5 flex items-center justify-between" style="background-color: var(--color-surface); border-top: 1px solid var(--color-border)">
-                          <span class="text-[11px] font-medium truncate" style="color: var(--color-foreground)">{{ t.label }}</span>
-                          <span v-if="themeChoice === t.id" class="text-[10px] shrink-0" style="color: var(--color-accent-neutral)">●</span>
-                        </div>
-                      </button>
-                    </div>
-                  </div>
-
-                  <div class="text-[10px] leading-relaxed" style="color: var(--color-muted-foreground)">
-                    {{ t('settings.appearance.terminalHint', { cmd: '/theme' }) }}
-                  </div>
-                </div>
-
-                <!-- Providers tab -->
-                <div v-if="activeTab === 'providers'">
-                  <div class="flex items-center justify-between mb-4">
-                    <div class="flex items-baseline gap-2">
-                      <h3 class="text-[13px] font-semibold tracking-tight" style="color: var(--color-foreground)">{{ t('settings.providers.title') }}</h3>
-                      <span class="s-section-count">{{ configuredProviders.length }}</span>
-                    </div>
-                    <button class="s-btn s-btn-secondary s-btn-sm" @click="startAddProvider">
-                      {{ t('settings.providers.add') }}
-                    </button>
-                  </div>
-
-                  <!-- 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)">
-                      <component :is="iconFor.providers" class="w-4 h-4" />
-                    </div>
-                    <div class="text-[13px] font-medium" style="color: var(--color-foreground)">{{ t('settings.providers.noneConfigured') }}</div>
-                    <div class="text-[11px] leading-relaxed max-w-[240px]" style="color: var(--color-muted-foreground)">
-                      {{ t('settings.providers.noneHint', { btn: t('settings.providers.add') }) }}
-                    </div>
-                  </div>
-                  <div v-else class="space-y-2.5">
-                    <div v-for="p in configuredProviders" :key="p.id" class="p-card">
-                      <!-- Card head: brand · name · url · actions -->
-                      <div class="p-card-head">
-                        <div class="p-card-brand"><ProviderIcon :provider="p.id" :custom="p.custom" :size="18" /></div>
-                        <div class="p-card-meta">
-                          <div class="p-card-name">
-                            <span>{{ p.name || p.id }}</span>
-                            <span v-if="store.providerName === p.id" class="s-chip s-chip-accent">{{ t('common.active') }}</span>
-                            <span v-if="p.custom" class="s-chip">{{ t('settings.providers.custom') }}</span>
-                          </div>
-                          <div class="p-card-url">
-                            {{ p.base_url || (p.custom ? '' : (p.api_key ? p.api_key : '—')) }}
-                            <template v-if="p.api_key && !p.base_url"> · {{ p.api_key }}</template>
-                          </div>
-                        </div>
-                        <div class="p-card-actions">
-                          <!-- Delete-in-use guide: when this provider hosts the active model,
-                               deleting would strand the session — guide a switch first. -->
-                          <template v-if="deleteConfirmId === p.id">
-                            <div v-if="activeModelOnProvider(p.id)" class="p-card-guide">
-                              <div>
-                                <div class="text-[12px] font-semibold" style="color: var(--color-warning-fg)">{{ t('settings.providers.deleteInUseTitle') }}</div>
-                                <div class="text-[10.5px] mt-0.5" style="color: var(--color-muted-foreground)">{{ t('settings.providers.deleteInUseBody', { model: activeModelOnProvider(p.id) }) }}</div>
-                              </div>
-                              <div class="flex gap-1.5 flex-wrap justify-end">
-                                <button class="s-btn s-btn-ghost s-btn-xs" @click="deleteConfirmId = ''">{{ t('common.cancel') }}</button>
-                                <button class="s-btn s-btn-primary s-btn-xs" @click="closeAndSwitchModel">{{ t('settings.providers.switchModel') }}</button>
-                              </div>
-                            </div>
-                            <template v-else>
-                              <button class="s-btn s-btn-danger s-btn-xs" @click="deleteProvider(p.id)">{{ t('common.delete') }}</button>
-                              <button class="s-btn s-btn-ghost s-btn-xs" @click="deleteConfirmId = ''">{{ t('common.cancel') }}</button>
-                            </template>
-                          </template>
-                          <template v-else>
-                            <button class="s-btn s-btn-ghost s-btn-xs" :title="t('settings.providers.edit')" @click="startEditProvider(p)"><PencilSquareIcon class="w-3.5 h-3.5" /></button>
-                            <button class="s-btn s-btn-ghost s-btn-xs" :title="t('settings.providers.remove')" @click="deleteConfirmId = p.id"><TrashIcon class="w-3.5 h-3.5" /></button>
-                          </template>
-                        </div>
-                      </div>
-
-                      <!-- Models sub-area. Models are shown only inside the
-                           "Browse Models" catalog (kept expanded by default),
-                           not duplicated inline. Custom models get inline
-                           edit/remove; registry models toggle add/added. -->
-                      <div class="p-card-models">
-                        <div class="p-card-bar">
-                          <span class="text-[10.5px]" style="color: var(--color-muted-foreground)"><b style="color: var(--color-foreground)">{{ addedCount(p.id) }}</b>/{{ totalCount(p.id) }} {{ t('settings.providers.models') }}</span>
-                          <button class="s-btn s-btn-secondary s-btn-xs ml-auto" @click="startAddModel(p.id)"><PlusIcon class="w-3.5 h-3.5" />{{ t('settings.providers.addCustomModel') }}</button>
-                        </div>
-
-                        <!-- Inline model catalog — always expanded (the card's
-                             purpose is to show this provider's models). -->
-                        <div class="p-catalog">
-                          <div v-if="catalogLoading === p.id && !(catalogModels[p.id]?.length)" class="text-center py-3 text-[10px] animate-pulse" style="color: var(--color-muted-foreground)">{{ t('settings.providers.loadingHint') }}</div>
-                          <template v-else>
-                            <div class="p-catalog-search">
-                              <input v-model="catalogSearch" type="text" :placeholder="t('settings.providers.catalogSearch')" class="s-input" />
-                            </div>
-                            <div v-if="filteredCatalog(p.id).length === 0" class="text-center py-3 text-[10px]" style="color: var(--color-muted-foreground)">
-                              {{ p.custom ? t('settings.providers.noCatalog') : t('settings.providers.allConfigured') }}
-                            </div>
-                            <div v-else class="p-catalog-list">
-                              <div v-for="cm in filteredCatalog(p.id)" :key="cm.id" class="p-cat-row">
-                                <div class="p-cat-meta">
-                                  <div class="p-cat-id">{{ cm.id }}</div>
-                                  <div class="p-cat-sub">
-                                    {{ cm.name || cm.id }}
-                                    <template v-if="cm.context"> · {{ formatContext(cm.context) }}</template>
-                                    <template v-if="cm.reasoning"> · {{ t('settings.providers.customReasoning') }}</template>
-                                    <template v-if="cm.attachment"> · {{ t('settings.providers.supportImage') }}</template>
-                                  </div>
-                                </div>
-                                <!-- Custom (user-defined) model: edit/remove inline -->
-                                <div v-if="cm.added && cm.custom" class="flex items-center gap-1">
-                                  <button class="s-btn s-btn-ghost s-btn-xs" :title="t('settings.providers.editModel')" @click="startEditModel(p.id, cmToDetail(cm))"><PencilSquareIcon class="w-3.5 h-3.5" /></button>
-                                  <button class="s-btn s-btn-ghost s-btn-xs p-model-rm" :title="t('settings.providers.remove')" @click="removeCustomModelById(p.id, cm.id)"><TrashIcon class="w-3.5 h-3.5" /></button>
-                                </div>
-                                <!-- Registry model: show/hide toggle (a switch). -->
-                                <button
-                                  v-else
-                                  class="s-switch"
-                                  :data-on="cm.added ? 'true' : 'false'"
-                                  :aria-pressed="cm.added"
-                                  :title="cm.added ? t('settings.providers.hideModel') : t('settings.providers.showModel')"
-                                  @click="toggleCatalogModel(p.id, cm.id)"
-                                />
-                              </div>
-                            </div>
-                          </template>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- MCP Servers tab -->
-                <div v-if="activeTab === 'mcp'">
-                  <div class="flex items-center justify-between mb-4">
-                    <div class="flex items-baseline gap-2">
-                      <h3 class="text-[13px] font-semibold tracking-tight" style="color: var(--color-foreground)">{{ t('settings.mcp.title') }}</h3>
-                      <span class="s-section-count">{{ Object.keys(mcpServers).length }}</span>
-                    </div>
-                    <button
-                      v-if="mcpEditing === null"
-                      class="s-btn s-btn-secondary s-btn-sm"
-                      @click="openAddMCP"
-                    >{{ t('settings.mcp.add') }}</button>
-                  </div>
-
-                  <!-- Add / Edit form -->
-                  <div v-if="mcpEditing !== null" class="s-form mb-4">
-                    <div class="s-form-head">
-                      <span class="s-form-head-title">{{ mcpEditing ? t('settings.mcp.editServer') : t('settings.mcp.addServer') }}</span>
-                      <button class="s-btn s-btn-ghost s-btn-xs" @click="cancelMCPEdit">✕</button>
-                    </div>
-                    <div class="s-form-body">
-                      <div class="s-field">
-                        <label class="s-label">{{ t('settings.mcp.serverName') }}</label>
-                        <input
-                          v-model="mcpForm.name"
-                          :disabled="!!mcpEditing"
-                          type="text"
-                          placeholder="my-server"
-                          class="s-input"
-                        />
-                      </div>
-
-                      <div class="s-field">
-                        <label class="s-label">{{ t('settings.mcp.transport') }}</label>
-                        <div class="s-seg">
-                          <button
-                            v-for="transport in (['local', 'http', 'sse'] as const)"
-                            :key="transport"
-                            class="s-seg-btn"
-                            :aria-pressed="mcpForm.transport === transport"
-                            @click="mcpForm.transport = transport"
-                          >{{ transport === 'local' ? t('settings.mcp.transportLocal') : transport.toUpperCase() }}</button>
-                        </div>
-                      </div>
-
-                      <!-- HTTP / SSE fields -->
-                      <template v-if="mcpForm.transport !== 'local'">
-                        <div class="s-field">
-                          <label class="s-label">{{ t('settings.mcp.url') }}</label>
-                          <input
-                            v-model="mcpForm.url"
-                            type="text"
-                            placeholder="https://api.example.com/mcp"
-                            class="s-input mono"
-                          />
-                        </div>
-
-                        <div class="s-field">
-                          <div class="flex items-center justify-between mb-1">
-                            <label class="s-label" style="margin: 0">{{ t('settings.mcp.headers') }}</label>
-                            <button class="s-btn s-btn-ghost s-btn-xs" @click="addHeaderRow">+ {{ t('settings.mcp.addHeader') }}</button>
-                          </div>
-                          <div v-for="(h, i) in mcpForm.headers" :key="i" class="s-kv">
-                            <input v-model="h.key" type="text" :placeholder="t('settings.mcp.headerKey')" class="s-input mono" />
-                            <input v-model="h.value" type="text" :placeholder="t('settings.mcp.headerValue')" class="s-input mono" />
-                            <button class="s-kv-rm" @click="removeHeaderRow(i)">✕</button>
-                          </div>
-                        </div>
-
-                        <div class="s-field">
-                          <div class="s-row" style="padding: 8px 12px">
-                            <div class="s-row-body">
-                              <div class="s-row-title">{{ t('settings.mcp.useOauth') }}</div>
-                            </div>
-                            <button
-                              class="s-switch"
-                              :data-on="mcpForm.oauthEnabled ? 'true' : 'false'"
-                              :aria-pressed="mcpForm.oauthEnabled"
-                              @click="mcpForm.oauthEnabled = !mcpForm.oauthEnabled"
-                            />
-                          </div>
-                        </div>
-
-                        <div v-if="mcpForm.oauthEnabled" class="space-y-3 pl-1 mb-3">
-                          <div class="s-field">
-                            <label class="s-label">{{ t('settings.mcp.oauthClientId') }}</label>
-                            <input
-                              v-model="mcpForm.clientId"
-                              type="text"
-                              placeholder="Optional — leave blank to auto-register"
-                              class="s-input mono"
-                            />
-                          </div>
-                          <div class="s-field">
-                            <label class="s-label">{{ t('settings.mcp.oauthClientSecret') }}</label>
-                            <input
-                              v-model="mcpForm.clientSecret"
-                              type="password"
-                              placeholder="Optional (confidential clients)"
-                              class="s-input mono"
-                            />
-                          </div>
-                          <div class="s-field">
-                            <label class="s-label">{{ t('settings.mcp.oauthScopes') }}</label>
-                            <input
-                              v-model="mcpForm.scopesText"
-                              type="text"
-                              placeholder="space-separated, optional"
-                              class="s-input mono"
-                            />
-                          </div>
-                        </div>
-
-                        <div class="s-field">
-                          <label class="s-label">{{ t('settings.mcp.timeout') }}</label>
-                          <input
-                            v-model="mcpForm.timeout"
-                            type="number"
-                            placeholder="180"
-                            class="s-input"
-                            style="max-width: 120px"
-                          />
-                        </div>
-                      </template>
-
-                      <!-- Local fields -->
-                      <template v-else>
-                        <div class="s-field">
-                          <label class="s-label">{{ t('settings.mcp.command') }}</label>
-                          <input
-                            v-model="mcpForm.command"
-                            type="text"
-                            placeholder="npx"
-                            class="s-input mono"
-                          />
-                        </div>
-                        <div class="s-field">
-                          <label class="s-label">{{ t('settings.mcp.arguments') }}</label>
-                          <input
-                            v-model="mcpForm.argsText"
-                            type="text"
-                            placeholder="-y @some/mcp-server"
-                            class="s-input mono"
-                          />
-                        </div>
-                      </template>
-
-                      <div v-if="mcpFormError" class="s-error">{{ mcpFormError }}</div>
-                    </div>
-                    <div class="s-form-foot">
-                      <button class="s-btn s-btn-secondary" @click="cancelMCPEdit">{{ t('common.cancel') }}</button>
-                      <button
-                        class="s-btn s-btn-primary"
-                        :disabled="mcpSaving"
-                        @click="saveMCP"
-                      >{{ mcpSaving ? t('settings.providers.saving') : t('settings.mcp.save') }}</button>
-                    </div>
-                  </div>
-
-                  <div v-if="mcpLoading" class="text-center text-xs py-6 animate-pulse" style="color: var(--color-muted-foreground)">
-                    {{ t('settings.providers.loadingHint') }}
-                  </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)">
-                      <component :is="iconFor.mcp" class="w-4 h-4" />
-                    </div>
-                    <div class="text-[13px] font-medium" style="color: var(--color-foreground)">{{ t('settings.mcp.noneConfigured') }}</div>
-                    <div class="text-[11px] leading-relaxed max-w-[240px]" style="color: var(--color-muted-foreground)">{{ t('settings.mcp.noneHint', { btn: t('settings.mcp.add') }) }}</div>
-                  </div>
-                  <div v-else-if="mcpEditing === null">
-                    <div
-                      v-for="(info, name) in mcpServers"
-                      :key="name"
-                      class="s-row items-start"
-                      :data-muted="!info.enabled ? 'true' : 'false'"
-                      style="flex-direction: column; align-items: stretch"
-                    >
-                      <div class="flex items-center gap-3 w-full">
-                        <div class="s-row-icon"><component :is="serverIcon(info.type)" class="w-3.5 h-3.5" /></div>
-                        <div class="s-row-body">
-                          <div class="s-row-title" style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap">
-                            {{ name }}
-                            <span class="s-chip">{{ info.type || 'stdio' }}</span>
-                            <span class="text-[10px]" :style="{ color: mcpStatusColor(info) }">● {{ mcpStatusLabel(info) }}</span>
-                          </div>
-                          <div class="s-row-sub" style="font-family: var(--font-mono)">
-                            {{ info.type === 'sse' || info.type === 'http' ? info.url : info.command }}
-                          </div>
-                        </div>
-                        <div class="s-row-actions">
-                          <button class="s-btn s-btn-ghost s-btn-xs" :title="t('common.edit')" @click="openEditMCP(info)">{{ t('common.edit') }}</button>
-                          <button class="s-btn s-btn-ghost s-btn-xs" style="color: var(--color-destructive)" :title="t('common.delete')" @click="deleteMCP(String(name))">{{ t('common.delete') }}</button>
-                          <button
-                            class="s-switch"
-                            :data-on="info.enabled ? 'true' : 'false'"
-                            :title="info.enabled ? t('common.disable') : t('common.enable')"
-                            :aria-pressed="info.enabled"
-                            @click="toggleMCP(String(name), !info.enabled)"
-                          />
-                        </div>
-                      </div>
-                      <!-- OAuth login row -->
-                      <div v-if="(info.type === 'http' || info.type === 'sse') && (info.oauth || info.status === 'needs_auth')" class="mt-2 flex items-center gap-2 pl-10">
-                        <button
-                          class="s-btn s-btn-secondary s-btn-xs"
-                          :disabled="mcpLoginBusy === name"
-                          @click="loginMCP(String(name))"
-                        >{{ mcpLoginBusy === name ? t('settings.mcp.waitingBrowser') : (info.has_auth ? t('settings.mcp.reauth') : t('settings.mcp.login')) }}</button>
-                        <span v-if="info.has_auth" class="s-chip s-chip-success">{{ t('settings.mcp.authenticated') }}</span>
-                      </div>
-                      <div v-if="mcpLoginBusy === name && mcpLoginMessage" class="mt-1 text-[10px] pl-10" style="color: var(--color-muted-foreground)">{{ mcpLoginMessage }}</div>
-                      <div v-else-if="mcpLoginMessageFor === name && mcpLoginMessage && !mcpLoginBusy" class="mt-1 text-[10px] pl-10" style="color: var(--color-warning-fg)">{{ mcpLoginMessage }}</div>
-                      <div v-if="info.error" class="mt-1 text-[10px] font-mono pl-10" style="color: var(--color-error-fg)">{{ info.error }}</div>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Skills tab -->
-                <div v-if="activeTab === 'skills'">
-                  <div class="flex items-baseline gap-2 mb-4">
-                    <h3 class="text-[13px] font-semibold tracking-tight" style="color: var(--color-foreground)">{{ t('settings.skills.title') }}</h3>
-                    <span class="s-section-count">{{ skills.length }}</span>
-                  </div>
-                  <div class="flex items-center gap-2 mb-3">
-                    <div class="s-seg">
-                      <button
-                        v-for="f in (['all', 'local', 'builtin'] as const)"
-                        :key="f"
-                        class="s-seg-btn"
-                        :aria-pressed="skillFilter === f"
-                        @click="skillFilter = f"
-                      >{{ f === 'all' ? t('settings.skills.filterAll') : f === 'local' ? t('settings.skills.filterLocal') : t('settings.skills.filterBuiltin') }}</button>
-                    </div>
-                    <input
-                      v-model="skillSearch"
-                      type="text"
-                      :placeholder="t('settings.skills.search')"
-                      class="s-input"
-                      style="flex: 1"
-                    />
-                  </div>
-
-                  <div v-if="skillsLoading" class="text-center text-xs py-6 animate-pulse" style="color: var(--color-muted-foreground)">{{ t('settings.skills.loadingHint') }}</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)">
-                      <component :is="iconFor.skills" class="w-4 h-4" />
-                    </div>
-                    <div class="text-[13px] font-medium" style="color: var(--color-foreground)">{{ t('settings.skills.none') }}</div>
-                    <div class="text-[11px] leading-relaxed max-w-[240px]" style="color: var(--color-muted-foreground)">{{ t('settings.skills.noneHint') }}</div>
-                  </div>
-                  <div v-else>
-                    <div
-                      v-for="sk in filteredSkills"
-                      :key="sk.name"
-                      class="s-row"
-                      :data-muted="!sk.enabled ? 'true' : 'false'"
-                    >
-                      <div class="s-row-body">
-                        <div class="s-row-title" style="display: flex; align-items: center; gap: 8px">
-                          {{ sk.name }}
-                          <span v-if="sk.builtin" class="s-chip">{{ t('settings.skills.builtin') }}</span>
-                        </div>
-                        <div v-if="sk.description" class="s-row-sub">{{ sk.description }}</div>
-                      </div>
-                      <div class="s-row-actions">
-                        <button
-                          class="s-switch"
-                          :data-on="sk.enabled ? 'true' : 'false'"
-                          @click="toggleSkill(sk.name, !sk.enabled)"
-                          :title="sk.enabled ? t('common.disable') : t('common.enable')"
-                          :aria-pressed="sk.enabled"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Browser tab -->
-                <div v-if="activeTab === 'browser'">
-                  <div class="mb-4">
-                    <h3 class="text-[13px] font-semibold tracking-tight" style="color: var(--color-foreground)">{{ t('settings.browser.title') }}</h3>
-                    <p class="text-[12px] mt-0.5" style="color: var(--color-muted-foreground)">{{ t('settings.browser.subtitle') }}</p>
-                  </div>
-
-                  <!-- Master enable -->
-                  <div class="s-row">
-                    <div class="s-row-icon"><GlobeAltIcon class="w-4 h-4" /></div>
-                    <div class="s-row-body">
-                      <div class="s-row-title">{{ t('settings.browser.enableTitle') }}</div>
-                      <div class="s-row-sub">{{ t('settings.browser.enableDesc') }}</div>
-                    </div>
-                    <div class="s-row-actions">
-                      <button class="s-switch" :data-on="browserCfg.enabled ? 'true' : 'false'" :aria-pressed="browserCfg.enabled" @click="browserCfg.enabled = !browserCfg.enabled; saveBrowser()" />
-                    </div>
-                  </div>
-
-                  <template v-if="browserCfg.enabled">
-                    <!-- Control: managed + extension -->
-                    <div class="mt-5 mb-2 text-[11px] font-medium uppercase tracking-wide" style="color: var(--color-muted-foreground)">{{ t('settings.browser.control') }}</div>
-                    <div class="s-row">
-                      <div class="s-row-icon"><ComputerDesktopIcon class="w-4 h-4" /></div>
-                      <div class="s-row-body">
-                        <div class="s-row-title">{{ t('settings.browser.managed') }}</div>
-                        <div class="s-row-sub">
-                          <template v-if="browserStatus?.status?.chrome_found">{{ browserStatus.status.chrome_version || browserStatus.status.chrome_path }}</template>
-                          <template v-else>{{ t('settings.browser.noChrome') }}</template>
-                        </div>
-                      </div>
-                      <div class="s-row-actions">
-                        <select v-model="browserCfg.backend" class="s-input s-input-sm" style="width: 8rem" @change="saveBrowser()">
-                          <option value="auto">Auto</option>
-                          <option value="managed">Managed</option>
-                          <option value="extension">Extension</option>
-                        </select>
-                      </div>
-                    </div>
-                    <div class="s-row">
-                      <div class="s-row-icon"><GlobeAltIcon class="w-4 h-4" /></div>
-                      <div class="s-row-body">
-                        <div class="s-row-title">{{ t('settings.browser.extension') }}</div>
-                        <div class="s-row-sub flex items-center gap-1.5">
-                          <span class="w-1.5 h-1.5 rounded-full shrink-0" :style="{ backgroundColor: browserStatus?.status?.extension_online ? 'var(--color-success-fg)' : 'var(--color-border)' }" />
-                          {{ browserStatus?.status?.extension_online ? t('settings.browser.connected') : t('settings.browser.notConnected') }}
-                        </div>
-                      </div>
-                      <div class="s-row-actions">
-                        <span v-if="browserStatus?.status?.extension_online" class="s-chip s-chip-success">{{ t('settings.browser.online') }}</span>
-                      </div>
-                    </div>
-                    <p v-if="!browserStatus?.status?.extension_online" class="text-[11px] mt-1.5 px-1" style="color: var(--color-muted-foreground)">
-                      {{ t('settings.browser.connectHint') }}
-                    </p>
-
-                    <!-- Chrome path (when not found) -->
-                    <div v-if="!browserStatus?.status?.chrome_found" class="mt-3">
-                      <label class="text-[11px] font-medium" style="color: var(--color-muted-foreground)">{{ t('settings.browser.chromePath') }}</label>
-                      <input v-model="browserCfg.chrome_path" class="s-input mt-1" style="width: 100%" placeholder="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" @change="saveBrowser()" />
-                    </div>
-
-                    <!-- Approval -->
-                    <div class="mt-5 mb-2 text-[11px] font-medium uppercase tracking-wide" style="color: var(--color-muted-foreground)">{{ t('settings.browser.approval') }}</div>
-                    <div class="s-row">
-                      <div class="s-row-body"><div class="s-row-title">{{ t('settings.browser.navigate') }}</div></div>
-                      <div class="s-row-actions">
-                        <select :value="browserApproval('navigate')" class="s-input s-input-sm" style="width: 10rem" @change="setApproval('navigate', ($event.target as HTMLSelectElement).value)">
-                          <option value="ask">{{ t('settings.browser.askEachSite') }}</option>
-                          <option value="always_allow">{{ t('settings.browser.alwaysAllow') }}</option>
-                        </select>
-                      </div>
-                    </div>
-                    <div class="s-row">
-                      <div class="s-row-body"><div class="s-row-title">{{ t('settings.browser.interact') }}</div></div>
-                      <div class="s-row-actions">
-                        <select :value="browserApproval('interact')" class="s-input s-input-sm" style="width: 10rem" @change="setApproval('interact', ($event.target as HTMLSelectElement).value)">
-                          <option value="ask">{{ t('settings.browser.askEachSite') }}</option>
-                          <option value="always_allow">{{ t('settings.browser.alwaysAllow') }}</option>
-                        </select>
-                      </div>
-                    </div>
-
-                    <!-- Site permissions -->
-                    <div class="mt-5 mb-2 flex items-center justify-between">
-                      <div class="text-[11px] font-medium uppercase tracking-wide" style="color: var(--color-muted-foreground)">{{ t('settings.browser.sitePermissions') }}</div>
-                      <button class="s-btn s-btn-secondary s-btn-sm" @click="addSitePerm()"><PlusIcon class="w-3.5 h-3.5" /> {{ t('settings.browser.add') }}</button>
-                    </div>
-                    <div v-if="!browserCfg.site_permissions?.length" class="s-row">
-                      <div class="s-row-body"><div class="s-row-sub">{{ t('settings.browser.noSitePermissions') }}</div></div>
-                    </div>
-                    <div v-for="(sp, i) in browserCfg.site_permissions" :key="i" class="s-row">
-                      <input v-model="sp.origin" class="s-input s-input-sm flex-1" placeholder="https://github.com" @change="saveBrowser()" />
-                      <select v-model="sp.navigate" class="s-input s-input-sm" style="width: 7rem" @change="saveBrowser()"><option value="ask">nav: ask</option><option value="allow">nav: allow</option></select>
-                      <select v-model="sp.interact" class="s-input s-input-sm" style="width: 7rem" @change="saveBrowser()"><option value="ask">act: ask</option><option value="allow">act: allow</option></select>
-                      <button class="s-btn s-btn-ghost s-btn-sm" @click="removeSitePerm(i)"><TrashIcon class="w-3.5 h-3.5" /></button>
-                    </div>
-
-                    <!-- Developer mode -->
-                    <div class="mt-5 mb-2 text-[11px] font-medium uppercase tracking-wide" style="color: var(--color-muted-foreground)">{{ t('settings.browser.developerMode') }}</div>
-                    <div class="s-row">
-                      <div class="s-row-body">
-                        <div class="text-[11px] font-semibold mb-0.5" style="color: var(--color-warning-fg)">⚠ {{ t('settings.browser.elevatedRisk') }}</div>
-                        <div class="s-row-title">{{ t('settings.browser.devModeTitle') }}</div>
-                        <div class="s-row-sub" style="white-space: normal">{{ t('settings.browser.devModeDesc') }}</div>
-                      </div>
-                      <div class="s-row-actions">
-                        <button class="s-switch" :data-on="browserCfg.dev_mode ? 'true' : 'false'" :aria-pressed="browserCfg.dev_mode" @click="browserCfg.dev_mode = !browserCfg.dev_mode; saveBrowser()" />
-                      </div>
-                    </div>
-                  </template>
-                </div>
-
-                <!-- SSH tab -->
-                <div v-if="activeTab === 'ssh'">
-                  <div class="flex items-center justify-between mb-4">
-                    <h3 class="text-[13px] font-semibold tracking-tight" style="color: var(--color-foreground)">{{ t('settings.ssh.title') }}</h3>
-                    <button class="s-btn s-btn-secondary s-btn-sm" @click="openRemoteWizard">
-                      <PlusIcon class="w-3.5 h-3.5" /> {{ t('settings.ssh.connect') }}
-                    </button>
-                  </div>
-
-                  <div class="mb-3">
-                    <div class="text-[11px] font-medium mb-1" style="color: var(--color-muted-foreground)">{{ t('settings.ssh.currentEnv') }}</div>
-                    <span class="s-chip s-chip-accent">
-                      <span class="w-1.5 h-1.5 rounded-full" style="background-color: var(--color-accent-neutral)" />
-                      {{ sshCurrent }}
-                    </span>
-                  </div>
-
-                  <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)">
-                      <component :is="iconFor.ssh" class="w-4 h-4" />
-                    </div>
-                    <div class="text-[13px] font-medium" style="color: var(--color-foreground)">{{ t('settings.ssh.noneConfigured') }}</div>
-                    <div class="text-[11px] leading-relaxed max-w-[270px]" style="color: var(--color-muted-foreground)">
-                      {{ t('settings.ssh.noneHint', { btn: t('settings.ssh.connect'), config: '~/.jcode/config.json' }) }}
-                    </div>
-                  </div>
-                  <div v-else>
-                    <button
-                      v-for="alias in sshAliases"
-                      :key="alias.name"
-                      class="group s-row w-full text-left cursor-pointer transition-colors hover:bg-[var(--color-secondary)]"
-                      :title="t('settings.ssh.connectTo', { name: alias.name })"
-                      @click="connectToAlias(alias)"
-                    >
-                      <div class="s-row-icon"><ServerIcon class="w-3.5 h-3.5" /></div>
-                      <div class="s-row-body">
-                        <div class="s-row-title">{{ alias.name }}</div>
-                        <div class="s-row-sub" style="font-family: var(--font-mono)">
-                          {{ alias.addr }}
-                          <template v-if="alias.path"> · {{ alias.path }}</template>
-                        </div>
-                      </div>
-                      <div class="s-row-actions">
-                        <span v-if="sshCurrent === alias.name" class="s-chip s-chip-accent">{{ t('common.active') }}</span>
-                        <ChevronRightIcon class="w-3.5 h-3.5 opacity-0 group-hover:opacity-100 transition-opacity" style="color: var(--color-muted-foreground)" />
-                      </div>
-                    </button>
-                  </div>
-                </div>
-
-                <!-- Channels tab -->
-                <div v-if="activeTab === 'channels'">
-                  <h3 class="text-[13px] font-semibold tracking-tight mb-4" style="color: var(--color-foreground)">{{ t('settings.channels.title') }}</h3>
-
-                  <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)">
-                      <component :is="iconFor.channels" class="w-4 h-4" />
-                    </div>
-                    <div class="text-[13px] font-medium" style="color: var(--color-foreground)">{{ t('settings.channels.noneConfigured') }}</div>
-                    <div class="text-[11px] leading-relaxed max-w-[260px]" style="color: var(--color-muted-foreground)">
-                      {{ t('settings.channels.noneHint', { flag: 'channel.web_enabled: true', config: '~/.jcode/config.json' }) }}
-                    </div>
-                  </div>
-
-                  <div v-else class="space-y-4">
-                    <div class="s-row items-start" style="flex-direction: column; align-items: stretch; padding: 14px 16px">
-                      <div class="flex items-center justify-between mb-3 w-full">
-                        <div class="flex items-center gap-3">
-                          <div class="s-row-icon"><ChatBubbleLeftIcon class="w-4 h-4" /></div>
-                          <div class="s-row-body">
-                            <div class="s-row-title">{{ t('settings.channels.wechat') }}</div>
-                            <div class="s-row-sub">{{ t('settings.channels.integration') }}</div>
-                          </div>
-                        </div>
-                        <span
-                          class="s-chip"
-                          :class="{
-                            's-chip-accent': channelState === 'enabled',
-                            's-chip-warning': channelState === 'disabled' || channelState === 'scanning',
-                          }"
-                        >
-                          <span
-                            class="w-1.5 h-1.5 rounded-full"
-                            :style="{ backgroundColor: 'currentColor' }"
-                          />
-                          {{ channelState === 'enabled' ? t('common.connected') : channelState === 'disabled' ? t('common.disconnected') : channelState === 'scanning' ? t('common.scanning') : t('common.notConfigured') }}
-                        </span>
-                      </div>
-
-                      <div v-if="channelQRContent" class="flex flex-col items-center py-3">
-                        <canvas ref="qrCanvas" class="rounded-md" style="border: 1px solid var(--color-border)" />
-                        <div class="text-[10px] mt-2" style="color: var(--color-muted-foreground)">{{ t('settings.channels.scanQr') }}</div>
-                      </div>
-
-                      <div class="flex gap-2 mt-2">
-                        <button
-                          v-if="channelState === 'none'"
-                          :disabled="channelLoading"
-                          class="s-btn s-btn-primary flex-1"
-                          @click="channelLogin"
-                        >
-                          {{ channelLoading ? t('settings.channels.loadingHint') : t('settings.channels.connect') }}
-                        </button>
-                        <button
-                          v-if="channelState === 'enabled' || channelState === 'disabled'"
-                          :disabled="channelLoading"
-                          class="s-btn s-btn-ghost flex-1"
-                          style="color: var(--color-destructive)"
-                          @click="channelLogout"
-                        >
-                          {{ t('settings.channels.disconnect') }}
-                        </button>
-                      </div>
-                    </div>
-
-                    <!-- Login reminder banner -->
-                    <div
-                      v-if="channelLoginReminder"
-                      class="px-4 py-3 rounded-md flex items-start gap-2.5"
-                      style="border: 1px solid var(--color-warning-fg); background-color: var(--color-warning-bg)"
-                    >
-                      <span class="text-sm shrink-0 mt-0.5">⚠️</span>
-                      <div class="flex-1 min-w-0">
-                        <div class="text-xs font-medium" style="color: var(--color-warning-fg)">{{ t('settings.channels.activate') }}</div>
-                        <div class="text-[10px] mt-0.5 leading-relaxed" style="color: var(--color.warning-fg); opacity: 0.8">
-                          {{ t('settings.channels.activateBody') }}
-                        </div>
-                      </div>
-                      <button
-                        class="s-btn s-btn-ghost s-btn-xs shrink-0"
-                        style="color: var(--color-warning-fg)"
-                        @click="channelLoginReminder = false"
-                      >✕</button>
-                    </div>
-
-                    <div class="text-[10px] leading-relaxed" style="color: var(--color-muted-foreground)">
-                      {{ t('settings.channels.whenConnected') }}
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Shortcuts tab -->
-                <div v-if="activeTab === 'shortcuts'">
-                  <h3 class="text-[13px] font-semibold tracking-tight mb-4" style="color: var(--color-foreground)">{{ t('settings.shortcuts.title') }}</h3>
-                  <div>
-                    <div
-                      v-for="s in shortcuts"
-                      :key="s.keys"
-                      class="s-row"
-                      style="padding: 8px 12px"
-                    >
-                      <div class="s-row-body">
-                        <div class="s-row-title">{{ s.desc }}</div>
-                      </div>
-                      <kbd class="px-2 py-0.5 text-[10px] font-mono rounded" style="background-color: var(--color-secondary); border: 1px solid var(--color-border); color: var(--color-muted-foreground)">{{ s.keys }}</kbd>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Usage statistics (lazily rendered: the panel fetches on mount) -->
-                <UsageStatsPanel v-if="activeTab === 'usage'" />
-                </div>
-              </div>
-            </div>
-
-            <!-- Provider edit/add-model dialog: a separate modal, not an inline
-                 expansion, so the providers tab stays a clean list of cards.
-                 Must render INSIDE DialogPanel — headlessui's Dialog treats any
-                 click outside the panel as a dismiss, so a sibling-of-panel
-                 placement made every button in this nested dialog close Settings
-                 and drop the user back to the welcome screen. -->
-      <ProviderEditDialog
-        :open="showProviderDialog"
-        :editing-provider="editingProviderTarget"
-        :setup-providers="addProviderList"
-        :configured-ids="configuredProviders.map(p => p.id)"
-        @close="showProviderDialog = false"
-        @saved="onProviderSaved"
-      />
-      <!-- Add/edit custom-model dialog: a separate modal for authoring a single
-           model (ID/name/context/image/reasoning tiers). -->
-      <ModelEditDialog
-        :open="showModelDialog"
-        :provider-id="modelDialogProvider"
-        :model="modelDialogTarget"
-        :server-error="modelSaveError"
-        @close="showModelDialog = false; modelSaveError = ''"
-        @save="onModelSave"
-        @clear-error="modelSaveError = ''"
-      />
-          </DialogPanel>
-        </TransitionChild>
-      </div>
-    </Dialog>
-  </TransitionRoot>
-</template>
-
-<style scoped>
-/* Left rail mirrors the chat sidebar: same width + shell tone, no border. */
-.settings-rail {
-  width: var(--sidebar-width);
-  padding: 12px;
-  overflow-y: auto;
-  background: var(--color-background);
-}
-
-.settings-back {
-  color: var(--color-muted-foreground);
-}
-.settings-back:hover {
-  background: var(--color-secondary);
-  color: var(--color-foreground);
-}
-
-/* Inset content panel — identical treatment to App.vue's .chat-panel so the two
-   pages read as the same layout. */
-.settings-panel {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-2xl);
-  margin: 4px 14px 14px;
-  overflow: hidden;
-  box-shadow: var(--shadow-sm);
-}
-
-@media (max-width: 640px) {
-  .settings-rail {
-    width: 100%;
-  }
-  .settings-panel {
-    margin: 2px 8px 8px;
-  }
-}
-
-/* Language picker (General → Preferences). Mirrors the headlessui Menu pattern
-   used by TopBar's panel switcher, but sized to fit inside a preference row. */
-.lang-menu {
-  position: relative;
-  flex-shrink: 0;
-}
-.lang-trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 28px;
-  padding: 0 9px;
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-border);
-  background-color: var(--color-muted);
-  color: var(--color-foreground);
-  font-size: 11px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.12s ease, border-color 0.12s ease;
-}
-.lang-trigger:hover {
-  background-color: var(--color-surface);
-  border-color: var(--color-accent-neutral);
-}
-.lang-trigger-label {
-  white-space: nowrap;
-}
-.lang-trigger-caret {
-  color: var(--color-muted-foreground);
-  transition: transform 0.12s ease;
-}
-.lang-trigger-caret.open {
-  transform: rotate(180deg);
-}
-.lang-menu-items {
-  position: absolute;
-  top: calc(100% + 6px);
-  right: 0;
-  min-width: 160px;
-  padding: 4px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-md);
-  z-index: var(--z-dropdown);
-  outline: none;
-}
-.lang-menu-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 9px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  color: var(--color-foreground);
-  font-size: 12px;
-  text-align: left;
-  cursor: pointer;
-}
-.lang-menu-item.highlight {
-  background: var(--color-muted);
-}
-.lang-menu-item.current {
-  color: var(--color-accent-neutral);
-  font-weight: 600;
-}
-.lang-item-check {
-  color: var(--color-accent-neutral);
-  flex-shrink: 0;
-}
-.pop-enter-active,
-.pop-leave-active {
-  transition: opacity 0.12s ease, transform 0.12s ease;
-}
-.pop-enter-from,
-.pop-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-
-/* ============================================================
-   Unified design atoms — collapses 20+ inline styles into 8
-   groups so every Settings tab reads as one product. Every value
-   references a design token; no hardcoded colors.
-   ============================================================ */
-
-/* Input — replaces ~20 inline <input> styles across tabs. */
-.s-input {
-  width: 100%;
-  height: 32px;
-  padding: 0 10px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  color: var(--color-foreground);
-  font-size: 12px;
-  font-family: var(--font-sans);
-  outline: none;
-  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
-}
-.s-input::placeholder {
-  color: var(--color-muted-foreground);
-  opacity: 0.7;
-}
-.s-input:focus {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--accent-wash-soft);
-}
-.s-input:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-.s-input.mono {
-  font-family: var(--font-mono);
-}
-
-/* Buttons — 4 variants × 3 sizes. primary = the one main action per row. */
-.s-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 32px;
-  padding: 0 12px;
-  border-radius: var(--radius-md);
-  font-size: 12px;
-  font-weight: 500;
-  font-family: var(--font-sans);
-  cursor: pointer;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  transition: background var(--duration-fast), border-color var(--duration-fast), opacity var(--duration-fast);
-}
-.s-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.s-btn-primary {
-  background: var(--color-primary);
-  color: var(--color-on-primary);
-}
-.s-btn-primary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--color-primary) 88%, #000);
-}
-.s-btn-secondary {
-  background: var(--color-surface);
-  border-color: var(--color-border);
-  color: var(--color-foreground);
-}
-.s-btn-secondary:hover:not(:disabled) {
-  background: var(--color-secondary);
-}
-.s-btn-ghost {
-  background: transparent;
-  color: var(--color-foreground);
-}
-.s-btn-ghost:hover:not(:disabled) {
-  background: var(--color-secondary);
-}
-.s-btn-danger {
-  background: var(--color-destructive);
-  color: var(--color-on-destructive);
-}
-.s-btn-danger:hover:not(:disabled) {
-  filter: brightness(0.92);
-}
-/* Success-tinted action (the catalog "✓ added" toggle, distinct from primary). */
-.s-btn-success {
-  background: var(--color-success-bg);
-  color: var(--color-success-fg);
-  border: 1px solid transparent;
-}
-.s-btn-success:hover:not(:disabled) {
-  filter: brightness(0.96);
-}
-.s-btn-sm {
-  height: 26px;
-  padding: 0 9px;
-  font-size: 11px;
-  border-radius: var(--radius-sm);
-}
-.s-btn-xs {
-  height: 22px;
-  padding: 0 7px;
-  font-size: 10px;
-  border-radius: var(--radius-sm);
-}
-
-/* Switch — single boolean toggle. Replaces the per-call inline toggles
- * (autoApprove / BLE / MCP / Skill) AND the raw <input checkbox> in the
- * MCP OAuth field, so a screen never shows two switch shapes. */
-.s-switch {
-  position: relative;
-  display: inline-block;
-  width: 34px;
-  height: 20px;
-  flex-shrink: 0;
-  background: var(--color-border);
-  border-radius: var(--radius-pill);
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  transition: background var(--duration-fast);
-}
-/* Kept on --color-accent-neutral (not --color-primary) to match the
- * existing de-emphasis policy: primary orange is reserved for the hero +
- * send button only. */
-.s-switch[data-on='true'] {
-  background: var(--color-accent-neutral);
-}
-.s-switch::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: var(--color-surface);
-  box-shadow: var(--shadow-sm);
-  transition: transform var(--duration-fast) var(--ease-out);
-}
-.s-switch[data-on='true']::after {
-  transform: translateX(14px);
-}
-.s-switch:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Advanced disclosure toggle in the provider form. */
-.s-adv-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  color: var(--color-muted-foreground);
-  padding: 2px 0;
-  cursor: pointer;
-  background: none;
-  border: none;
-}
-.s-adv-toggle:hover {
-  color: var(--color-foreground);
-}
-
-/* Row — unified list row for prefs / provider / mcp / skill / ssh /
- * shortcuts. Collapses 5 structurally-similar but differently-written
- * row containers into one. */
-.s-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 14px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-}
-.s-row + .s-row {
-  margin-top: 8px;
-}
-.s-row[data-muted='true'] {
-  background: var(--color-muted);
-  opacity: 0.75;
-}
-.s-row-icon {
-  width: 28px;
-  height: 28px;
-  display: grid;
-  place-items: center;
-  background: transparent;
-  border-radius: var(--radius-md);
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-.s-row-body {
-  flex: 1;
-  min-width: 0;
-}
-.s-row-title {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--color-foreground);
-}
-.s-row-sub {
-  font-size: 11px;
-  color: var(--color-muted-foreground);
-  margin-top: 1px;
-  line-height: 1.4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.s-row-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-/* Chips / badges — status + active markers. */
-.s-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  height: 18px;
-  padding: 0 7px;
-  border-radius: var(--radius-pill);
-  font-size: 10px;
-  font-weight: 500;
-  background: var(--color-muted);
-  color: var(--color-muted-foreground);
-  white-space: nowrap;
-}
-.s-chip-accent {
-  background: var(--neutral-wash);
-  color: var(--color-accent-neutral);
-}
-.s-chip-success {
-  background: var(--color-success-bg);
-  color: var(--color-success-fg);
-}
-.s-chip-warning {
-  background: var(--color-warning-bg);
-  color: var(--color-warning-fg);
-}
-.s-chip-error {
-  background: var(--color-error-bg);
-  color: var(--color-error-fg);
-}
-
-/* Segmented control — transport picker + skill filter. */
-.s-seg {
-  display: inline-flex;
-  background: var(--color-muted);
-  border-radius: var(--radius-md);
-  padding: 2px;
-  gap: 2px;
-}
-.s-seg-btn {
-  height: 24px;
-  padding: 0 10px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-sm);
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  transition: background var(--duration-fast), color var(--duration-fast);
-}
-.s-seg-btn[aria-pressed='true'] {
-  background: var(--color-surface);
-  color: var(--color-foreground);
-  box-shadow: var(--shadow-sm);
-}
-
-/* Section count — small monospace number beside a section title. */
-.s-section-count {
-  font-size: 11px;
-  font-family: var(--font-mono);
-  color: var(--color-muted-foreground);
-}
-
-/* Field group: label → control → helper/error. Gives MCP / Provider
- * forms a consistent vertical rhythm instead of ad-hoc label markup. */
-.s-field {
-  margin-bottom: 14px;
-}
-.s-field:last-child {
-  margin-bottom: 0;
-}
-.s-label {
-  display: block;
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--color-foreground);
-  margin-bottom: 5px;
-}
-.s-helper {
-  font-size: 11px;
-  line-height: 1.45;
-  color: var(--color-muted-foreground);
-  margin-top: 5px;
-}
-.s-error {
-  font-size: 11px;
-  line-height: 1.45;
-  color: var(--color-destructive);
-  margin-top: 5px;
-}
-
-/* Form card — MCP add/edit + Provider add. */
-.s-form {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-}
-.s-form-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 14px;
-  background: var(--color-muted);
-  border-bottom: 1px solid var(--color-border);
-}
-.s-form-head-title {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--color-muted-foreground);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-}
-.s-form-body {
-  padding: 16px;
-}
-.s-form-foot {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 12px 14px;
-  background: var(--color-muted);
-  border-top: 1px solid var(--color-border);
-}
-
-/* Key-value rows — MCP headers. */
-.s-kv {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-.s-cm {
-  padding: 8px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  margin-bottom: 8px;
-}
-.s-cm-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  font-size: 11px;
-  color: var(--color-muted-foreground);
-}
-.s-kv .s-input {
-  height: 28px;
-  font-size: 11px;
-}
-.s-kv-rm {
-  width: 28px;
-  height: 28px;
-  flex-shrink: 0;
-  display: grid;
-  place-items: center;
-  background: transparent;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  color: var(--color-muted-foreground);
-  transition: background var(--duration-fast), color var(--duration-fast);
-}
-.s-kv-rm:hover {
-  background: var(--color-secondary);
-  color: var(--color-foreground);
-}
-
-/* ── Provider card (providers tab) ── Replaces the flat .s-row with a two-zone
- * card: a head (brand · name · url · actions) and a models sub-area (count +
- * browse/add entries + model rows with capability badges + inline catalog).
- * Mirrors design/provider-redesign.html's .pcard structure. */
-.p-card {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: var(--color-surface);
-  overflow: hidden;
-}
-.p-card-head {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 11px 13px;
-  border-bottom: 1px solid var(--color-border);
-}
-.p-card-brand {
-  width: 30px;
-  height: 30px;
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-  border-radius: var(--radius-md);
-  background: var(--color-secondary);
-  color: var(--color-foreground);
-}
-.p-card-meta {
-  flex: 1;
-  min-width: 0;
-}
-.p-card-name {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--color-foreground);
-  display: flex;
-  align-items: center;
-  gap: 7px;
-}
-.p-card-url {
-  font-size: 11px;
-  color: var(--color-muted-foreground);
-  margin-top: 2px;
-  font-family: var(--font-mono);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.p-card-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-}
-/* Delete-in-use guide popover: spans under the head when the active model
- * blocks deletion. */
-.p-card-guide {
-  margin-left: auto;
-  max-width: 280px;
-  padding: 10px 12px;
-  border-radius: var(--radius-md);
-  background: var(--color-warning-bg);
-  border: 1px solid color-mix(in srgb, var(--color-warning-fg) 30%, transparent);
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.p-card-models {
-  padding: 8px 13px 12px;
-}
-.p-card-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 6px 0 8px;
-  flex-wrap: wrap;
-}
-.p-card-count {
-  font-size: 11.5px;
-  color: var(--color-muted-foreground);
-}
-.p-card-count b {
-  color: var(--color-foreground);
-  font-weight: 600;
-}
-.p-model-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 7px 9px;
-  border-radius: var(--radius-md);
-}
-.p-model-row:hover {
-  background: var(--color-muted);
-}
-.p-model-main {
-  flex: 1;
-  min-width: 0;
-}
-.p-model-name {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--color-foreground);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.p-model-id {
-  font-size: 10.5px;
-  color: var(--color-muted-foreground);
-  font-family: var(--font-mono);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.p-model-badges {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  flex-shrink: 0;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
-/* Hover affordances (edit/remove) only show on user-defined models. Registry
- * models have no .p-model-hover, so they render cleanly read-only. */
-.p-model-hover {
-  display: none;
-  align-items: center;
-  gap: 2px;
-  flex-shrink: 0;
-}
-.p-model-row.p-model-editable:hover .p-model-hover {
-  display: flex;
-}
-.p-model-rm {
-  flex-shrink: 0;
-  color: var(--color-muted-foreground);
-}
-.p-model-rm:hover {
-  color: var(--color-destructive);
-}
-
-/* Inline catalog (browse directory) — expands in place, not an overlay. */
-.p-catalog {
-  margin-top: 6px;
-  padding-top: 8px;
-  border-top: 1px dashed var(--color-border);
-}
-.p-catalog-search {
-  margin-bottom: 6px;
-}
-.p-catalog-list {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  max-height: 220px;
-  overflow-y: auto;
-  padding: 2px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-background);
-}
-.p-cat-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 6px 8px;
-  border-radius: var(--radius-sm);
-}
-.p-cat-row:hover {
-  background: var(--color-secondary);
-}
-.p-cat-meta {
-  flex: 1;
-  min-width: 0;
-}
-.p-cat-id {
-  font-size: 11px;
-  font-family: var(--font-mono);
-  color: var(--color-foreground);
-}
-.p-cat-sub {
-  font-size: 10px;
-  color: var(--color-muted-foreground);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Inline custom-model form (.p-cm-form) — a model draft surface that opens on
- * a provider card, distinct from the full edit dialog. Neutral background (not
- * accent-tinted) per design review. */
-.p-cm-form {
-  margin-top: 8px;
-  padding: 11px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-muted);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.p-cm-title {
-  font-size: 11.5px;
-  font-weight: 600;
-}
-.p-cm-fields {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
-}
-.p-cm-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 4px 0;
-}
-
-/* Effort-tier editor (chips you can add/remove). */
-.p-tiers {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  align-items: center;
-}
-.p-tier {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  height: 24px;
-  padding: 0 4px 0 9px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-pill);
-  font-size: 11px;
-  font-family: var(--font-mono);
-  color: var(--color-foreground);
-}
-.p-tier-x {
-  width: 16px;
-  height: 16px;
-  display: grid;
-  place-items: center;
-  border: none;
-  background: none;
-  border-radius: 50%;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-}
-.p-tier-x:hover {
-  background: var(--color-error-bg);
-  color: var(--color-error-fg);
-}
-.p-tier-add {
-  height: 24px;
-  padding: 0 10px;
-  background: transparent;
-  border: 1px dashed var(--color-border);
-  border-radius: var(--radius-pill);
-  font-size: 11px;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-}
-.p-tier-add:hover {
-  border-color: var(--color-border-active);
-  color: var(--color-foreground);
-}
-.p-tier-input-wrap {
-  display: inline-flex;
-  align-items: center;
-}
-.p-tier-input {
-  height: 24px;
-  padding: 0 10px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border-active);
-  border-radius: var(--radius-pill);
-  font-size: 11px;
-  font-family: var(--font-mono);
-  color: var(--color-foreground);
-  outline: none;
-  width: 96px;
-}
-.p-tier-input:focus {
-  box-shadow: 0 0 0 3px var(--accent-wash-soft);
-}
-
-/* Stateful test-connection banner (add/edit form). */
-.p-test-result {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 11px;
-  border-radius: var(--radius-md);
-  font-size: 11px;
-  line-height: 1.4;
-}
-.p-test-ic {
-  font-weight: 700;
-  flex-shrink: 0;
-}
-.p-test-ok {
-  background: var(--color-success-bg);
-  color: var(--color-success-fg);
-}
-.p-test-auth {
-  background: var(--color-error-bg);
-  color: var(--color-error-fg);
-}
-.p-test-net {
-  background: var(--color-warning-bg);
-  color: var(--color-warning-fg);
-}
-</style>
diff --git a/web-react/src/components/SetupView.tsx b/web/src/components/SetupView.tsx
similarity index 100%
rename from web-react/src/components/SetupView.tsx
rename to web/src/components/SetupView.tsx
diff --git a/web/src/components/SetupView.vue b/web/src/components/SetupView.vue
deleted file mode 100644
index 63f100da..00000000
--- a/web/src/components/SetupView.vue
+++ /dev/null
@@ -1,617 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue'
-import {
-  CheckIcon,
-  CheckCircleIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  EyeIcon,
-  EyeSlashIcon,
-} from '@heroicons/vue/24/outline'
-import { useI18n } from 'vue-i18n'
-import { useChatStore } from '@/stores/chat'
-import { api } from '@/composables/api'
-import ProviderIcon from './ProviderIcon.vue'
-import type { SetupProvider } from '@/types/api'
-
-const emit = defineEmits<{
-  complete: []
-}>()
-
-const store = useChatStore()
-const { t } = useI18n()
-
-// The wizard no longer has a model-selection step: a default model is picked
-// server-side for registry providers. Custom (OpenAI-compatible) providers
-// must supply a model id, name and base URL.
-type Step = 'provider' | 'apikey' | 'done'
-const step = ref<Step>('provider')
-const loading = ref(false)
-const error = ref('')
-
-// Step 1: Provider selection
-const providers = ref<SetupProvider[]>([])
-const selectedProvider = ref('')
-const providerSearch = ref('')
-const isCustom = ref(false) // chose "Custom" entry instead of a registry provider
-
-// Step 2: API key + advanced
-const apiKey = ref('')
-const baseURL = ref('')
-const showApiKey = ref(false)
-const validating = ref(false)
-const validationResult = ref<{ valid: boolean; error?: string } | null>(null)
-
-// Custom provider fields (only when isCustom)
-const customName = ref('')
-const customId = ref('')
-const customModelId = ref('')
-const customReasoning = ref(false)
-
-// Advanced settings (custom endpoint + headers). Capabilities (vision/thinking/
-// reasoning_effort) are model-level, not provider-level, so they're not exposed
-// here — they're driven by each model's registry metadata.
-const advancedOpen = ref(false)
-const headers = ref<{ key: string; value: string }[]>([])
-
-const filteredProviders = computed(() => {
-  const q = providerSearch.value.toLowerCase()
-  return providers.value.filter(p =>
-    p.name.toLowerCase().includes(q) || p.id.toLowerCase().includes(q)
-  )
-})
-
-const selectedProviderInfo = computed(() =>
-  providers.value.find(p => p.id === selectedProvider.value)
-)
-
-// 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)
-
-function resetProviderState() {
-  apiKey.value = ''
-  baseURL.value = ''
-  showApiKey.value = false
-  validationResult.value = null
-}
-
-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.
-  resetProviderState()
-  selectedProvider.value = id
-  isCustom.value = false
-  customName.value = ''
-  customId.value = ''
-  customModelId.value = ''
-  customReasoning.value = false
-  headers.value = []
-  advancedOpen.value = false
-  step.value = 'apikey'
-}
-
-function selectCustomProvider() {
-  resetProviderState()
-  selectedProvider.value = ''
-  isCustom.value = true
-  customName.value = ''
-  customId.value = ''
-  customModelId.value = ''
-  customReasoning.value = false
-  // Custom providers always need a base URL — surface the advanced panel.
-  baseURL.value = ''
-  headers.value = []
-  advancedOpen.value = true
-  step.value = 'apikey'
-}
-
-function goBack() {
-  error.value = ''
-  validationResult.value = null
-  step.value = 'provider'
-  selectedProvider.value = ''
-  isCustom.value = false
-  resetProviderState()
-}
-
-function addHeaderRow() {
-  headers.value.push({ key: '', value: '' })
-}
-
-function removeHeaderRow(i: number) {
-  headers.value.splice(i, 1)
-}
-
-// Build the headers payload: drop rows with a blank key.
-function collectHeaders(): Record<string, string> | undefined {
-  const out: Record<string, string> = {}
-  for (const h of headers.value) {
-    const k = h.key.trim()
-    if (k) out[k] = h.value
-  }
-  return Object.keys(out).length ? out : undefined
-}
-
-// 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
-  validationResult.value = null
-  try {
-    validationResult.value = await api.setupValidate({
-      provider: selectedProvider.value || 'openai-compatible',
-      api_key: apiKey.value.trim(),
-      base_url: baseURL.value.trim() || undefined,
-      headers: collectHeaders(),
-    })
-  } catch (err: unknown) {
-    validationResult.value = { valid: false, error: err instanceof Error ? err.message : 'Validation failed' }
-  }
-  validating.value = false
-}
-
-// The model the server picked (registry default, or the custom model id). Shown
-// on the done screen.
-const resolvedModel = ref('')
-
-async function submitSetup() {
-  if (!apiKey.value.trim()) {
-    error.value = t('setup.apiKeyRequired')
-    return
-  }
-  if (isCustom.value) {
-    if (!customId.value.trim()) {
-      error.value = t('setup.customIdRequired')
-      return
-    }
-    if (!baseURL.value.trim()) {
-      error.value = t('setup.customUrlRequired')
-      return
-    }
-    if (!customModelId.value.trim()) {
-      error.value = t('setup.customModelRequired')
-      return
-    }
-  }
-  loading.value = true
-  error.value = ''
-  try {
-    const provider = isCustom.value ? customId.value.trim() : selectedProvider.value
-    const res = await api.setupComplete({
-      provider,
-      api_key: apiKey.value.trim(),
-      model: isCustom.value ? customModelId.value.trim() : undefined,
-      model_reasoning: isCustom.value ? customReasoning.value : undefined,
-      base_url: baseURL.value.trim() || undefined,
-      name: isCustom.value ? (customName.value.trim() || customId.value.trim()) : undefined,
-      headers: collectHeaders(),
-    })
-    resolvedModel.value = res.model
-    step.value = 'done'
-    // Update store state
-    store.providerName = provider
-    store.modelName = res.model
-    // Refresh models list
-    store.fetchModels()
-  } catch (err: unknown) {
-    error.value = err instanceof Error ? err.message : 'Setup failed'
-  }
-  loading.value = false
-}
-
-function finish() {
-  emit('complete')
-}
-</script>
-
-<template>
-  <!-- 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 -->
-        <div class="flex items-center justify-center gap-0 mb-8 select-none" style="font-family: var(--font-mono); font-size: 32px; font-weight: 700;">
-          <span style="color: var(--color-muted-foreground)">[</span><span style="color: var(--color-primary)">J</span><span style="color: var(--color-foreground)">CODE</span><span style="color: var(--color-muted-foreground)">]</span>
-        </div>
-
-        <!-- 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)">
-            <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)">{{ t('setup.allSet') }}</h2>
-          <p class="text-sm mb-6" style="color: var(--color-muted-foreground)">
-            {{ t('setup.usingModel', { model: resolvedModel, provider: isCustom ? (customName || customId) : (selectedProviderInfo?.name || selectedProvider) }) }}
-          </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)"
-            @click="finish"
-          >
-            {{ t('setup.startCoding') }}
-          </button>
-        </div>
-
-        <!-- Setup steps -->
-        <div v-else class="rounded-xl overflow-hidden" style="background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm)">
-          <!-- Step indicator -->
-          <div class="flex items-center gap-2 px-6 pt-5 pb-3">
-            <div class="flex items-center gap-1.5">
-              <div
-                v-for="s in (['provider', 'apikey'] as const)"
-                :key="s"
-                class="w-2 h-2 rounded-full transition-colors"
-                :style="{ backgroundColor: step === s
-                  ? 'var(--color-primary)'
-                  : (['provider', 'apikey'].indexOf(step) > ['provider', 'apikey'].indexOf(s) ? 'var(--accent-fill)' : 'var(--color-border)') }"
-              />
-            </div>
-            <span class="text-[10px] uppercase tracking-wider ml-auto" style="color: var(--color-muted-foreground)">
-              {{ step === 'provider' ? t('setup.step', { n: 1, label: t('setup.chooseProvider') }) : t('setup.step', { n: 2, label: t('setup.enterApiKey') }) }}
-            </span>
-          </div>
-
-          <!-- Provider selection -->
-          <div v-if="step === 'provider'" class="px-6 pb-5">
-            <h2 class="text-base font-semibold mb-1" style="font-family: var(--font-sans); color: var(--color-foreground)">{{ t('setup.chooseProvider') }}</h2>
-            <p class="text-xs mb-3" style="color: var(--color-muted-foreground)">{{ t('setup.selectProviderDesc') }}</p>
-
-            <input
-              v-model="providerSearch"
-              type="text"
-              :placeholder="t('setup.searchProviders')"
-              class="setup-input w-full px-3 py-2 text-sm rounded-lg mb-3 outline-none"
-            />
-
-            <div v-if="loading" class="text-center py-8 text-sm animate-pulse" style="color: var(--color-muted-foreground)">{{ t('setup.loadingProviders') }}</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">{{ t('setup.retry') }}</button>
-            </div>
-            <div v-else-if="filteredProviders.length === 0" class="text-center py-8 text-sm" style="color: var(--color-muted-foreground)">{{ t('setup.noProviders') }}</div>
-            <div v-else class="space-y-1.5 max-h-72 overflow-y-auto pr-1">
-              <button
-                v-for="p in filteredProviders"
-                :key="p.id"
-                class="setup-option w-full px-4 py-3 text-left rounded-lg cursor-pointer group"
-                :class="{ selected: selectedProvider === p.id }"
-                @click="selectProvider(p.id)"
-              >
-                <div class="flex items-center justify-between gap-2">
-                  <div class="flex items-center gap-2.5 min-w-0">
-                    <ProviderIcon :provider="p.id" :size="22" />
-                    <div class="min-w-0">
-                      <div class="text-sm font-medium" style="color: var(--color-foreground)">{{ p.name }}</div>
-                      <div v-if="p.doc" class="text-[10px] mt-0.5 truncate" style="color: var(--color-muted-foreground)">{{ p.doc }}</div>
-                    </div>
-                  </div>
-                  <div class="flex items-center gap-2 shrink-0">
-                    <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)">{{ t('common.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)">{{ t('common.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)">{{ t('common.configured') }}</span>
-                    <ChevronLeftIcon class="setup-chevron w-4 h-4 transition-colors" />
-                  </div>
-                </div>
-              </button>
-
-              <!-- Custom provider entry -->
-              <button
-                class="setup-option w-full px-4 py-3 text-left rounded-lg cursor-pointer group"
-                :class="{ selected: isCustom }"
-                @click="selectCustomProvider"
-              >
-                <div class="flex items-center justify-between gap-2">
-                  <div class="flex items-center gap-2.5 min-w-0">
-                    <div class="w-[22px] h-[22px] rounded-md grid place-items-center shrink-0" style="background: var(--color-muted)">
-                      <span class="text-[11px] font-mono" style="color: var(--color-muted-foreground)">{ }</span>
-                    </div>
-                    <div class="min-w-0">
-                      <div class="text-sm font-medium" style="color: var(--color-foreground)">{{ t('setup.customProvider') }}</div>
-                      <div class="text-[10px] mt-0.5 truncate" style="color: var(--color-muted-foreground)">{{ t('setup.customProviderDesc') }}</div>
-                    </div>
-                  </div>
-                  <ChevronLeftIcon class="setup-chevron w-4 h-4 transition-colors" />
-                </div>
-              </button>
-            </div>
-          </div>
-
-          <!-- API Key + advanced settings -->
-          <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">
-                <ChevronRightIcon class="w-4 h-4" />
-              </button>
-              <h2 class="text-base font-semibold" style="font-family: var(--font-sans); color: var(--color-foreground)">{{ t('setup.enterApiKey') }}</h2>
-            </div>
-            <p class="text-xs mb-4 ml-6" style="color: var(--color-muted-foreground)">
-              {{ isCustom ? t('setup.customProvider') : t('setup.for') }} <span class="font-mono">{{ isCustom ? (customName || customId || t('setup.customProvider')) : selectedProviderInfo?.name }}</span>
-            </p>
-
-            <div class="space-y-3 ml-6">
-              <div v-if="!isCustom && selectedProviderInfo?.env?.length" class="px-3 py-2 rounded-md" style="background: var(--color-muted); border: 1px solid var(--color-border)">
-                <div class="text-[10px] mb-1" style="color: var(--color-muted-foreground)">{{ t('setup.envVar') }}</div>
-                <div class="text-xs font-mono" style="color: var(--color-foreground)">{{ selectedProviderInfo.env[0] }}</div>
-              </div>
-
-              <!-- Custom provider identity fields -->
-              <template v-if="isCustom">
-                <div>
-                  <label class="block text-[10px] uppercase tracking-wider mb-1 font-medium" style="color: var(--color-muted-foreground)">{{ t('setup.customId') }}</label>
-                  <input
-                    v-model="customId"
-                    type="text"
-                    :placeholder="t('setup.customIdPlaceholder')"
-                    class="setup-input w-full px-3 py-2 text-sm font-mono rounded-lg outline-none"
-                  />
-                </div>
-                <div>
-                  <label class="block text-[10px] uppercase tracking-wider mb-1 font-medium" style="color: var(--color-muted-foreground)">{{ t('setup.customName') }}</label>
-                  <input
-                    v-model="customName"
-                    type="text"
-                    :placeholder="t('setup.customNamePlaceholder')"
-                    class="setup-input w-full px-3 py-2 text-sm rounded-lg outline-none"
-                  />
-                </div>
-                <div>
-                  <label class="block text-[10px] uppercase tracking-wider mb-1 font-medium" style="color: var(--color-muted-foreground)">{{ t('setup.customModelId') }}</label>
-                  <input
-                    v-model="customModelId"
-                    type="text"
-                    :placeholder="t('setup.customModelPlaceholder')"
-                    class="setup-input w-full px-3 py-2 text-sm font-mono rounded-lg outline-none"
-                  />
-                </div>
-                <div class="flex items-center justify-between">
-                  <span class="text-[11px]" style="color: var(--color-foreground)">{{ t('setup.customReasoning') }}</span>
-                  <button class="setup-switch" :data-on="customReasoning ? 'true' : 'false'" :aria-pressed="customReasoning" @click="customReasoning = !customReasoning" />
-                </div>
-              </template>
-
-              <div>
-                <label class="block text-[10px] uppercase tracking-wider mb-1 font-medium" style="color: var(--color-muted-foreground)">{{ t('setup.apiKey') }}</label>
-                <div class="relative">
-                  <input
-                    v-model="apiKey"
-                    :type="showApiKey ? 'text' : 'password'"
-                    :placeholder="t('setup.apiKeyPlaceholder')"
-                    class="setup-input w-full px-3 py-2 text-sm font-mono rounded-lg outline-none pr-10"
-                    :class="{ valid: validationResult?.valid, invalid: validationResult?.valid === false }"
-                    @keydown.enter="submitSetup"
-                  />
-                  <button
-                    class="setup-back absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer"
-                    @click="showApiKey = !showApiKey"
-                  >
-                    <EyeIcon v-if="!showApiKey" class="w-4 h-4" />
-                    <EyeSlashIcon v-else class="w-4 h-4" />
-                  </button>
-                </div>
-              </div>
-
-              <div>
-                <label class="block text-[10px] uppercase tracking-wider mb-1 font-medium" style="color: var(--color-muted-foreground)">{{ t('setup.baseUrl') }}</label>
-                <input
-                  v-model="baseURL"
-                  type="text"
-                  :placeholder="isCustom ? 'https://your-endpoint/v1' : (selectedProviderInfo?.api || 'https://api.example.com/v1')"
-                  class="setup-input w-full px-3 py-2 text-sm font-mono rounded-lg outline-none"
-                  @keydown.enter="submitSetup"
-                />
-              </div>
-
-              <!-- Advanced toggle -->
-              <button class="setup-adv-toggle" :aria-expanded="advancedOpen" @click="advancedOpen = !advancedOpen">
-                <ChevronRightIcon class="w-3 h-3 transition-transform" :style="{ transform: advancedOpen ? 'rotate(90deg)' : 'none' }" />
-                {{ t('setup.advanced') }}
-              </button>
-
-              <div v-if="advancedOpen" class="space-y-3 pt-1">
-                <!-- Custom headers -->
-                <div>
-                  <div class="flex items-center justify-between mb-1">
-                    <label class="text-[10px] uppercase tracking-wider font-medium" style="color: var(--color-muted-foreground)">{{ t('setup.headers') }}</label>
-                    <button class="setup-secondary px-2 py-0.5 text-[10px] rounded cursor-pointer" @click="addHeaderRow">+ {{ t('setup.addHeader') }}</button>
-                  </div>
-                  <div v-for="(h, i) in headers" :key="i" class="flex items-center gap-1.5 mb-1">
-                    <input v-model="h.key" type="text" :placeholder="t('setup.headerKey')" class="setup-input flex-1 px-2 py-1.5 text-xs font-mono rounded outline-none" />
-                    <input v-model="h.value" type="text" :placeholder="t('setup.headerValue')" class="setup-input flex-1 px-2 py-1.5 text-xs font-mono rounded outline-none" />
-                    <button class="setup-back cursor-pointer px-1" @click="removeHeaderRow(i)">✕</button>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Validate connection -->
-              <div class="flex items-center gap-2">
-                <button
-                  :disabled="validating || !apiKey.trim()"
-                  class="setup-secondary px-3 py-1.5 text-xs rounded-lg disabled:opacity-50 cursor-pointer transition-colors"
-                  @click="validateConnection"
-                >
-                  {{ validating ? t('setup.checking') : t('setup.testConnection') }}
-                </button>
-                <span v-if="validationResult?.valid" class="text-xs flex items-center gap-1" style="color: var(--color-success-fg)">
-                  <CheckCircleIcon class="w-3.5 h-3.5" />
-                  {{ t('setup.connected') }}
-                </span>
-                <span v-if="validationResult?.valid === false" class="text-xs" style="color: var(--color-error-fg)">{{ validationResult.error }}</span>
-              </div>
-
-              <!-- Error -->
-              <div v-if="error" class="px-3 py-2 rounded-md" style="background: var(--color-error-bg); border: 1px solid var(--color-error-fg)">
-                <span class="text-xs" style="color: var(--color-error-fg)">{{ error }}</span>
-              </div>
-
-              <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)"
-                @click="submitSetup"
-              >
-                {{ loading ? t('setup.settingUp') : t('setup.completeSetup') }}
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Footer hint -->
-        <p v-if="step !== 'done'" class="text-center text-[10px] mt-4" style="color: var(--color-muted-foreground)">
-          {{ t('setup.savedTo') }}
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.setup-viewport {
-  position: fixed;
-  inset: 0;
-  background: var(--color-background);
-  display: flex;
-}
-
-.setup-frame {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: auto;
-}
-
-.setup-retry {
-  background: var(--color-primary);
-  color: var(--color-on-primary);
-  transition: opacity 0.15s;
-}
-.setup-retry:hover {
-  opacity: 0.9;
-}
-
-.setup-input {
-  background: var(--color-background);
-  border: 1px solid var(--color-border);
-  color: var(--color-foreground);
-  transition: border-color 0.15s;
-}
-.setup-input::placeholder {
-  color: var(--color-muted-foreground);
-}
-.setup-input:focus {
-  border-color: var(--color-primary);
-}
-.setup-input.valid {
-  border-color: var(--color-success-fg);
-}
-.setup-input.invalid {
-  border-color: var(--color-error-fg);
-}
-
-.setup-option {
-  border: 1px solid var(--color-border);
-  background: transparent;
-  transition: border-color 0.15s, background 0.15s;
-}
-.setup-option:hover {
-  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
-  background: var(--color-muted);
-}
-.setup-option.selected {
-  border-color: var(--color-primary);
-  background: var(--accent-wash-soft);
-}
-
-.setup-chevron {
-  color: var(--color-border);
-}
-.setup-option:hover .setup-chevron {
-  color: var(--color-primary);
-}
-
-.setup-back {
-  color: var(--color-muted-foreground);
-}
-.setup-back:hover {
-  color: var(--color-foreground);
-}
-
-.setup-secondary {
-  border: 1px solid var(--color-border);
-  color: var(--color-muted-foreground);
-}
-.setup-secondary:hover {
-  background: var(--color-muted);
-  color: var(--color-foreground);
-}
-
-.setup-adv-toggle {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 11px;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  padding: 0;
-}
-.setup-adv-toggle:hover {
-  color: var(--color-foreground);
-}
-
-.setup-switch {
-  width: 28px;
-  height: 16px;
-  border-radius: 9999px;
-  background: var(--color-muted);
-  border: 1px solid var(--color-border);
-  position: relative;
-  cursor: pointer;
-  transition: background-color 0.15s;
-  flex-shrink: 0;
-}
-.setup-switch::after {
-  content: '';
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: var(--color-foreground);
-  transition: transform 0.15s;
-}
-.setup-switch[data-on='true'] {
-  background: var(--color-primary);
-}
-.setup-switch[data-on='true']::after {
-  transform: translateX(12px);
-  background: var(--color-on-primary);
-}
-</style>
diff --git a/web-react/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
similarity index 72%
rename from web-react/src/components/Sidebar.tsx
rename to web/src/components/Sidebar.tsx
index 3222f93f..f34fbe1a 100644
--- a/web-react/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -12,6 +12,7 @@
  */
 
 import { useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 import {
   PlusIcon,
   ChevronRightIcon,
@@ -21,13 +22,11 @@ import {
   SparklesIcon,
   SignalIcon,
   Cog6ToothIcon,
-  AdjustmentsHorizontalIcon,
   BookmarkIcon,
   ArchiveBoxIcon,
   ArchiveBoxArrowDownIcon,
   EnvelopeOpenIcon,
   TrashIcon,
-  CheckIcon,
   EllipsisHorizontalIcon,
 } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
@@ -36,30 +35,16 @@ import { uiActions, sessionActions, chatActions, loadSession, loadTasks, loadWor
 import { api } from '../lib/api'
 import type { TaskItem } from '../lib/types'
 import { ThemeToggle } from './ThemeToggle'
-
-// ─── Filter state (local; mirrors SidebarFilterMenu.vue's options) ───
-
-type StatusFilter = 'all' | 'active' | 'archived'
-type LastActivityFilter = 'all' | 'today' | 'week' | 'month'
-type GroupByMode = 'project' | 'date'
-type SortFilter = 'recency' | 'name' | 'created'
-
-interface FilterState {
-  status: StatusFilter
-  project: string
-  lastActivity: LastActivityFilter
-  groupBy: GroupByMode
-  sort: SortFilter
-}
+import {
+  DEFAULT_FILTERS,
+  SidebarFilterMenu,
+  type FilterState,
+  type LastActivityFilter,
+  type SortFilter,
+} from './SidebarFilterMenu'
+import { isRemotePath, openRemoteConnect, parseRemoteLabel } from '../lib/remote'
 
 const FILTERS_KEY = 'jcode_sidebar_filters'
-const DEFAULT_FILTERS: FilterState = {
-  status: 'active',
-  project: '',
-  lastActivity: 'all',
-  groupBy: 'project',
-  sort: 'recency',
-}
 
 // ─── Enriched row: a session joined with its task metadata ───
 
@@ -75,6 +60,21 @@ interface SessionRow {
   running: boolean
 }
 
+/** Matches Vue .task-menu-items min-width. */
+const CTX_MENU_WIDTH = 160
+const CTX_MENU_EST_H = 180
+
+/**
+ * Context menu — left-click ⋯ opens to the RIGHT of the button
+ * (into the main column), not left over the row title.
+ * 靠上 → 右下 (below + right of ⋯); 靠下 → 右上 (above + right of ⋯).
+ */
+type CtxMenu = {
+  row: SessionRow
+  left: number
+  top: number
+}
+
 interface SidebarGroup {
   key: string
   kind: 'project' | 'date'
@@ -95,12 +95,11 @@ export function Sidebar() {
   const activeView = useAppSelector((s) => s.ui.activeView)
 
   const [filters, setFilters] = useState<FilterState>(() => loadFilters())
-  const [filterOpen, setFilterOpen] = useState(false)
-  const filterRef = useRef<HTMLDivElement | null>(null)
   const [expanded, setExpanded] = useState<Set<string>>(() => new Set(activePath ? [activePath] : []))
 
-  // Right-click / ⋯ context menu.
-  const [ctx, setCtx] = useState<{ x: number; y: number; row: SessionRow } | null>(null)
+  // ⋯ left-click / right-click menu — fixed, portaled to body.
+  // ⋯: menu's LEFT edge starts just to the RIGHT of the button.
+  const [ctx, setCtx] = useState<CtxMenu | null>(null)
   const ctxRef = useRef<HTMLDivElement | null>(null)
 
   // A coarse clock so time-based filtering/grouping re-evaluates as the wall
@@ -253,23 +252,8 @@ export function Sidebar() {
     return new Set([...counts].filter(([, count]) => count > 1).map(([name]) => name))
   }, [groups])
 
-  // ── Outside-click / Esc handling for the filter + context menus ──
-
-  useEffect(() => {
-    if (!filterOpen) return
-    function onDown(e: MouseEvent) {
-      if (filterRef.current && !filterRef.current.contains(e.target as Node)) setFilterOpen(false)
-    }
-    function onKey(e: KeyboardEvent) {
-      if (e.key === 'Escape') setFilterOpen(false)
-    }
-    document.addEventListener('mousedown', onDown)
-    document.addEventListener('keydown', onKey)
-    return () => {
-      document.removeEventListener('mousedown', onDown)
-      document.removeEventListener('keydown', onKey)
-    }
-  }, [filterOpen])
+  // ── Outside-click / Esc handling for the context menu ──
+  // (Filter menu owns its own outside-click / Esc handling.)
 
   useEffect(() => {
     if (!ctx) return
@@ -289,38 +273,6 @@ export function Sidebar() {
     }
   }, [ctx])
 
-  const isDirty =
-    filters.status !== DEFAULT_FILTERS.status ||
-    filters.project !== DEFAULT_FILTERS.project ||
-    filters.lastActivity !== DEFAULT_FILTERS.lastActivity ||
-    filters.groupBy !== DEFAULT_FILTERS.groupBy ||
-    filters.sort !== DEFAULT_FILTERS.sort
-
-  const statusOptions = useMemo(() => [
-    { value: 'all' as StatusFilter, label: t('sidebar.filter.statusAll') },
-    { value: 'active' as StatusFilter, label: t('sidebar.filter.statusActive') },
-    { value: 'archived' as StatusFilter, label: t('sidebar.filter.statusArchived') },
-  ], [t])
-  const projectOptions = useMemo(() => [
-    { value: '', label: t('sidebar.filter.projectAll') },
-    ...projects.map((p) => ({ value: p.path, label: p.name })),
-  ], [projects, t])
-  const lastActivityOptions = useMemo(() => [
-    { value: 'all' as LastActivityFilter, label: t('sidebar.filter.activityAll') },
-    { value: 'today' as LastActivityFilter, label: t('sidebar.filter.activityToday') },
-    { value: 'week' as LastActivityFilter, label: t('sidebar.filter.activityWeek') },
-    { value: 'month' as LastActivityFilter, label: t('sidebar.filter.activityMonth') },
-  ], [t])
-  const groupOptions = useMemo(() => [
-    { value: 'project' as GroupByMode, label: t('sidebar.filter.groupProject') },
-    { value: 'date' as GroupByMode, label: t('sidebar.filter.groupDate') },
-  ], [t])
-  const sortOptions = useMemo(() => [
-    { value: 'recency' as SortFilter, label: t('sidebar.filter.sortRecency') },
-    { value: 'name' as SortFilter, label: t('sidebar.filter.sortName') },
-    { value: 'created' as SortFilter, label: t('sidebar.filter.sortCreated') },
-  ], [t])
-
   // ── Actions ──
 
   async function newChat() {
@@ -342,12 +294,10 @@ export function Sidebar() {
     dispatch(uiActions.setView('chat'))
     if (row.unread) await patchTask(row.uuid, { unread: false })
     if (row.project && activePath && row.project !== activePath) {
+      // Remote workspaces need the wizard (prefill + optional load task).
       if (isRemotePath(row.project)) {
-        dispatch(chatActions.addMessage({
-          role: 'system',
-          content: t('sidebar.remoteReconnectRequired'),
-          level: 'error',
-        }))
+        const meta = parseRemoteLabel(row.project)
+        openRemoteConnect(meta ? { ...meta, loadTaskUuid: row.uuid } : undefined)
         return
       }
       try {
@@ -397,25 +347,73 @@ export function Sidebar() {
   function openContext(e: React.MouseEvent, row: SessionRow) {
     e.preventDefault()
     e.stopPropagation()
-    // Clamp so the menu never overflows the viewport.
-    const x = Math.min(e.clientX, window.innerWidth - 180)
-    const y = Math.min(e.clientY, window.innerHeight - 200)
-    setCtx({ x, y, row })
+    setCtx(placeMenu(e.clientX, e.clientY, row))
   }
 
   function openContextFromButton(e: React.MouseEvent, row: SessionRow) {
     e.preventDefault()
     e.stopPropagation()
+    // Toggle closed if already open for this row.
+    if (ctx && ctx.row.uuid === row.uuid) {
+      setCtx(null)
+      return
+    }
     const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
-    const x = Math.min(rect.left, window.innerWidth - 180)
-    // Flip up if there's no room below.
-    const below = rect.bottom + 210 > window.innerHeight
-    const y = below ? Math.max(8, rect.top - 200) : rect.bottom + 4
-    setCtx({ x, y, row })
+    // Open to the RIGHT of the ⋯ button (not left over the title).
+    const gap = 4
+    const flipUp = rect.bottom + 200 > window.innerHeight - 12
+    const left = rect.right + gap
+    const top = flipUp
+      ? Math.max(8, rect.top - CTX_MENU_EST_H - gap)
+      : rect.bottom + gap
+    setCtx(placeMenu(left, top, row))
+  }
+
+  /** Clamp fixed menu coords so the panel stays on-screen. */
+  function placeMenu(left: number, top: number, row: SessionRow): CtxMenu {
+    const pad = 8
+    const vw = window.innerWidth
+    const vh = window.innerHeight
+    let x = left
+    let y = top
+    if (x + CTX_MENU_WIDTH > vw - pad) x = Math.max(pad, vw - CTX_MENU_WIDTH - pad)
+    if (y + CTX_MENU_EST_H > vh - pad) y = Math.max(pad, vh - CTX_MENU_EST_H - pad)
+    if (x < pad) x = pad
+    if (y < pad) y = pad
+    return { row, left: x, top: y }
   }
 
-  function setFilter<K extends keyof FilterState>(key: K, value: FilterState[K]) {
-    setFilters((f) => ({ ...f, [key]: value }))
+  function closeCtx() {
+    setCtx(null)
+  }
+
+  function renderCtxItems(row: SessionRow) {
+    return (
+      <>
+        <CtxItem
+          icon={BookmarkIcon}
+          label={row.pinned ? t('sidebar.actions.unpin') : t('sidebar.actions.pin')}
+          onClick={() => { void patchTask(row.uuid, { pinned: !row.pinned }); closeCtx() }}
+        />
+        <CtxItem
+          icon={row.archived ? ArchiveBoxArrowDownIcon : ArchiveBoxIcon}
+          label={row.archived ? t('sidebar.actions.unarchive') : t('sidebar.actions.archive')}
+          onClick={() => { void patchTask(row.uuid, { archived: !row.archived }); closeCtx() }}
+        />
+        <CtxItem
+          icon={EnvelopeOpenIcon}
+          label={row.unread ? t('sidebar.actions.markRead') : t('sidebar.actions.markUnread')}
+          onClick={() => { void patchTask(row.uuid, { unread: !row.unread }); closeCtx() }}
+        />
+        <div className="my-1 h-px bg-[var(--color-border)]" />
+        <CtxItem
+          icon={TrashIcon}
+          label={t('sidebar.actions.delete')}
+          danger
+          onClick={() => { void deleteItem(row); closeCtx() }}
+        />
+      </>
+    )
   }
 
   function toggleGroup(key: string) {
@@ -430,11 +428,8 @@ export function Sidebar() {
   async function newTaskInProject(path: string) {
     dispatch(uiActions.setView('chat'))
     if (isRemotePath(path)) {
-      dispatch(chatActions.addMessage({
-        role: 'system',
-        content: t('sidebar.remoteReconnectRequired'),
-        level: 'error',
-      }))
+      const meta = parseRemoteLabel(path)
+      openRemoteConnect(meta ?? undefined)
       return
     }
     if (path && activePath && path !== activePath) {
@@ -458,7 +453,7 @@ export function Sidebar() {
   const ctxRow = ctx?.row
 
   return (
-    <aside className="sb-root flex w-[var(--sidebar-width,20rem)] shrink-0 flex-col border-r border-[var(--color-border)] bg-[var(--color-background)]">
+    <aside className="sb-root flex w-[var(--sidebar-width,20rem)] shrink-0 flex-col bg-[var(--color-background)]">
       <div className="sb-header">
         <div className="sb-nav-list">
           <button
@@ -489,54 +484,10 @@ export function Sidebar() {
         </div>
       </div>
 
-      <div className="sb-tree min-h-0 flex-1 overflow-y-auto">
+      <div className="sb-tree sb-tree-feather min-h-0 flex-1 overflow-y-auto">
         <div className="sb-tree-head">
           <span className="sb-tree-label">{t('nav.workspace')}</span>
-          <div ref={filterRef} className="relative inline-flex">
-            <button
-              type="button"
-              onClick={() => setFilterOpen((v) => !v)}
-              title={t('sidebar.filter.title')}
-              aria-label={t('sidebar.filter.title')}
-              aria-expanded={filterOpen}
-              className={`relative grid h-[22px] w-[22px] place-items-center rounded-[var(--radius-sm)] text-[var(--color-muted-foreground)] transition-colors hover:bg-[var(--color-muted)] hover:text-[var(--color-foreground)] ${
-                filterOpen || isDirty ? 'text-[var(--color-foreground)]' : ''
-              } ${filterOpen ? 'bg-[var(--color-muted)]' : ''}`}
-            >
-              <AdjustmentsHorizontalIcon className="h-4 w-4" />
-              {isDirty && (
-                <span className="absolute right-[1px] top-[1px] h-[5px] w-[5px] rounded-full bg-[var(--color-accent-neutral)]" aria-hidden="true" />
-              )}
-            </button>
-            {filterOpen && (
-              <div
-                className="sb-pop absolute right-0 top-full z-[var(--z-dropdown)] mt-1 w-[232px] rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-1 shadow-[var(--shadow-md)]"
-                role="menu"
-              >
-                <FilterSection label={t('sidebar.filter.status')} options={statusOptions} value={filters.status} onSelect={(v) => setFilter('status', v)} />
-                <div className="my-1 h-px bg-[var(--color-border)]" />
-                <FilterSection label={t('sidebar.filter.project')} options={projectOptions} value={filters.project} onSelect={(v) => setFilter('project', v)} />
-                <div className="my-1 h-px bg-[var(--color-border)]" />
-                <FilterSection label={t('sidebar.filter.lastActivity')} options={lastActivityOptions} value={filters.lastActivity} onSelect={(v) => setFilter('lastActivity', v)} />
-                <div className="my-1 h-px bg-[var(--color-border)]" />
-                <FilterSection label={t('sidebar.filter.groupBy')} options={groupOptions} value={filters.groupBy} onSelect={(v) => setFilter('groupBy', v)} />
-                <div className="my-1 h-px bg-[var(--color-border)]" />
-                <FilterSection label={t('sidebar.filter.sort')} options={sortOptions} value={filters.sort} onSelect={(v) => setFilter('sort', v)} />
-                {isDirty && (
-                  <>
-                    <div className="my-1 h-px bg-[var(--color-border)]" />
-                    <button
-                      type="button"
-                      onClick={() => setFilters({ ...DEFAULT_FILTERS })}
-                      className="flex w-full items-center gap-2 rounded-[var(--radius-md)] px-2 py-1.5 text-left text-[12.5px] text-[var(--color-muted-foreground)] transition-colors hover:bg-[var(--color-muted)]"
-                    >
-                      {t('common.reset')}
-                    </button>
-                  </>
-                )}
-              </div>
-            )}
-          </div>
+          <SidebarFilterMenu filters={filters} projects={projects} onChange={setFilters} />
         </div>
 
         {groups.length === 0 ? (
@@ -598,7 +549,7 @@ export function Sidebar() {
                 {open && (
                   <div className={`sb-task-list ${isProject ? '' : 'date-list'}`}>
                     {isProject && g.items.length === 0 && (
-                      <div className="px-2 py-1.5 text-xs text-[var(--color-muted-foreground)]">{t('sidebar.noTasks')}</div>
+                      <div className="sb-task-empty">{t('sidebar.noTasks')}</div>
                     )}
                     {g.items.map((row) => {
                       const active = row.uuid === currentSessionId
@@ -625,10 +576,10 @@ export function Sidebar() {
                               aria-hidden="true"
                             />
                           )}
-                          {row.pinned && <BookmarkIcon className="h-2.5 w-2.5 shrink-0 text-[var(--color-accent-neutral)]" />}
-                          <span className="min-w-0 flex-1 truncate">{rowTitle(row)}</span>
+                          {row.pinned && <BookmarkIcon className="sb-task-pin h-2.5 w-2.5 shrink-0" />}
+                          <span className="sb-task-title">{rowTitle(row)}</span>
                           {!isProject && <span className="sb-task-project">{projectName(row.project)}</span>}
-                          <span className={`shrink-0 font-mono text-[0.625rem] ${row.running ? 'text-[var(--color-accent)]' : 'text-[var(--color-muted-foreground)]'}`}>
+                          <span className={`sb-task-time ${row.running ? 'running' : ''}`}>
                             {row.running ? t('sidebar.running') : relativeTime(row.updated_at || row.created_at, now, t)}
                           </span>
                           <button
@@ -636,7 +587,7 @@ export function Sidebar() {
                             title={t('sidebar.actions.taskActions')}
                             aria-label={t('sidebar.actions.taskActions')}
                             onClick={(e) => openContextFromButton(e, row)}
-                            className="grid h-5 w-5 shrink-0 place-items-center rounded-[var(--radius-sm)] text-[var(--color-muted-foreground)] opacity-0 transition-all hover:bg-[var(--color-secondary)] hover:text-[var(--color-foreground)] group-hover:opacity-100"
+                            className="sb-task-menu-btn"
                           >
                             <EllipsisHorizontalIcon className="h-3.5 w-3.5" />
                           </button>
@@ -651,38 +602,40 @@ export function Sidebar() {
         )}
       </div>
 
-      <div className="flex shrink-0 items-center justify-end gap-1 px-3 py-2">
+      <div className="sb-footer relative flex shrink-0 items-center justify-end gap-1.5 px-3">
         <ThemeToggle compact />
         <button
           type="button"
           onClick={() => dispatch(uiActions.setSettingsOpen(true))}
-          className="rounded-[var(--radius-md)] p-1.5 text-[var(--color-muted-foreground)] transition-colors hover:bg-[var(--neutral-wash-soft)] hover:text-[var(--color-foreground)]"
+          className="sb-footer-btn flex h-9 w-9 items-center justify-center rounded-[var(--radius-md)] text-[var(--color-muted-foreground)] transition-colors hover:bg-[var(--color-muted)] hover:text-[var(--color-foreground)]"
           aria-label="Settings"
           title={t('nav.settingsWithShortcut')}
         >
-          <Cog6ToothIcon className="h-3.5 w-3.5" />
+          <Cog6ToothIcon className="h-[18px] w-[18px]" />
         </button>
       </div>
 
-      {/* Right-click / ⋯ context menu (fixed-positioned at the cursor) */}
-      {ctx && ctxRow && (
-        <div
-          ref={ctxRef}
-          role="menu"
-          className="sb-pop fixed z-[var(--z-dropdown)] min-w-[170px] rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-1 shadow-[var(--shadow-md)]"
-          style={{ left: ctx.x, top: ctx.y }}
-        >
-          <CtxItem icon={BookmarkIcon} label={ctxRow.pinned ? t('sidebar.actions.unpin') : t('sidebar.actions.pin')} onClick={() => { void patchTask(ctxRow.uuid, { pinned: !ctxRow.pinned }); setCtx(null) }} />
-          <CtxItem
-            icon={ctxRow.archived ? ArchiveBoxArrowDownIcon : ArchiveBoxIcon}
-            label={ctxRow.archived ? t('sidebar.actions.unarchive') : t('sidebar.actions.archive')}
-            onClick={() => { void patchTask(ctxRow.uuid, { archived: !ctxRow.archived }); setCtx(null) }}
-          />
-          <CtxItem icon={EnvelopeOpenIcon} label={ctxRow.unread ? t('sidebar.actions.markRead') : t('sidebar.actions.markUnread')} onClick={() => { void patchTask(ctxRow.uuid, { unread: !ctxRow.unread }); setCtx(null) }} />
-          <div className="my-1 h-px bg-[var(--color-border)]" />
-          <CtxItem icon={TrashIcon} label={t('sidebar.actions.delete')} danger onClick={() => { void deleteItem(ctxRow); setCtx(null) }} />
-        </div>
-      )}
+      {/* ⋯ / right-click menu — fixed to the RIGHT of ⋯ (into the main column). */}
+      {ctx && ctxRow && typeof document !== 'undefined'
+        ? createPortal(
+            <div
+              ref={ctxRef}
+              role="menu"
+              className="sb-task-menu-items sb-pop"
+              style={{
+                position: 'fixed',
+                top: ctx.top,
+                left: ctx.left,
+                right: 'auto',
+                bottom: 'auto',
+                zIndex: 1000,
+              }}
+            >
+              {renderCtxItems(ctxRow)}
+            </div>,
+            document.body,
+          )
+        : null}
 
       {/* Animations: running ring breathe + pop-in for menus. Scoped via sb-* names. */}
       <style>{`
@@ -703,7 +656,17 @@ export function Sidebar() {
         .sb-nav-ic { width:18px; height:18px; flex-shrink:0; color:var(--color-muted-foreground); transition:color 0.15s; }
         .sb-nav-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:500; }
         .sb-nav-kbd { flex-shrink:0; color:var(--color-foreground); font-family:var(--font-sans); font-size:11.5px; line-height:1; white-space:nowrap; }
-        .sb-tree { padding:4px 8px 8px; }
+        .sb-tree { padding:4px 8px 20px; }
+        /* Feather the bottom of the session list into the footer (same idea as
+           messages-feather above the composer). */
+        .sb-tree-feather {
+          -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
+          mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
+        }
+        .sb-footer {
+          padding-top: 14px;
+          padding-bottom: 14px;
+        }
         .sb-tree-head { display:flex; align-items:center; justify-content:space-between; padding:6px 6px 4px; }
         .sb-tree-label, .sb-date-label {
           color:var(--color-muted-foreground); font-size:10px; font-weight:600;
@@ -719,7 +682,7 @@ export function Sidebar() {
         .sb-project-row.active .sb-project-icon { color:var(--color-accent-neutral); }
         .sb-project-name {
           flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
-          color:var(--color-foreground); font-size:13px; font-weight:500;
+          color:var(--color-foreground); font-size:13px; font-weight:500; line-height:1.25;
         }
         .sb-project-hint {
           max-width:80px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
@@ -739,21 +702,69 @@ export function Sidebar() {
         .sb-project-ring { width:9px; height:9px; margin-left:auto; }
         .sb-task-list { padding-left:14px; }
         .sb-task-list.date-list { padding-left:0; }
+        .sb-task-empty {
+          font-size:11px; color:var(--color-muted-foreground); padding:5px 8px;
+        }
         .sb-date-row { display:flex; align-items:center; gap:6px; padding:10px 6px 4px; }
         .sb-date-label { flex:1; }
         .sb-task-row {
           display:flex; align-items:center; gap:6px; margin-left:6px; padding:8px 8px;
           border-left:1px solid var(--color-border); color:var(--color-foreground);
           cursor:pointer; position:relative; transition:background 0.15s, border-color 0.15s;
+          /* Match Vue: no custom line-height — inherit body (tight, single-line rows). */
+          line-height: normal;
         }
         .sb-task-row:hover { background:var(--color-muted); }
         .sb-task-row.active { background:var(--neutral-wash-soft); border-left-color:var(--color-accent-neutral); }
         .sb-task-row.archived { opacity:0.55; }
         .sb-task-row.running { border-left-color:color-mix(in srgb, var(--color-accent) 50%, var(--color-border)); }
         .date-list .sb-task-row { margin-left:0; border-left:none; padding-left:6px; }
+        /* Conversation title — Vue .task-title */
+        .sb-task-title {
+          flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
+          font-size:13px; line-height:1.25; color:var(--color-foreground);
+        }
+        .sb-task-pin { color:var(--color-accent-neutral); flex-shrink:0; }
+        /* Relative time — Vue .task-time (10px mono) */
+        .sb-task-time {
+          flex-shrink:0; font-size:10px; line-height:1; font-family:var(--font-mono);
+          color:var(--color-muted-foreground);
+        }
+        .sb-task-time.running { color:var(--color-accent); }
         .sb-task-project {
           max-width:90px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
-          color:var(--color-muted-foreground); font-size:10px; opacity:0.75;
+          color:var(--color-muted-foreground); font-size:10px; line-height:1; opacity:0.75;
+        }
+        /* ⋯ button (Vue .task-menu-btn) */
+        .sb-task-menu-btn {
+          display: grid;
+          place-items: center;
+          width: 20px;
+          height: 20px;
+          flex-shrink: 0;
+          border: none;
+          background: transparent;
+          border-radius: var(--radius-sm);
+          color: var(--color-muted-foreground);
+          cursor: pointer;
+          opacity: 0;
+          transition: opacity 0.15s, background 0.15s, color 0.15s;
+        }
+        .sb-task-row:hover .sb-task-menu-btn,
+        .sb-task-row:focus-within .sb-task-menu-btn { opacity: 1; }
+        .sb-task-menu-btn:hover {
+          background: var(--color-secondary);
+          color: var(--color-foreground);
+        }
+        .sb-task-menu-items {
+          min-width: 160px;
+          width: max-content;
+          padding: 4px;
+          background: var(--color-surface);
+          border: 1px solid var(--color-border);
+          border-radius: var(--radius-lg);
+          box-shadow: var(--shadow-md);
+          outline: none;
         }
         .sb-ring {
           border:1.6px solid var(--color-accent);
@@ -772,40 +783,6 @@ export function Sidebar() {
 
 // ─── Sub-components ───
 
-function FilterSection<T extends string>({
-  label,
-  options,
-  value,
-  onSelect,
-}: {
-  label: string
-  options: { value: T; label: string }[]
-  value: T
-  onSelect: (v: T) => void
-}) {
-  return (
-    <div>
-      <div className="px-2 py-1 text-[0.625rem] font-semibold uppercase tracking-wide text-[var(--color-muted-foreground)]">{label}</div>
-      {options.map((o) => {
-        const selected = o.value === value
-        return (
-          <button
-            key={o.value}
-            type="button"
-            onClick={() => onSelect(o.value)}
-            className={`flex w-full items-center gap-2 rounded-[var(--radius-md)] px-2 py-1.5 text-left text-[12.5px] transition-colors hover:bg-[var(--color-muted)] ${
-              selected ? 'text-[var(--color-accent-neutral)]' : 'text-[var(--color-foreground)]'
-            }`}
-          >
-            <span className="flex-1 truncate">{o.label}</span>
-            {selected && <CheckIcon className="h-3.5 w-3.5 shrink-0 text-[var(--color-accent-neutral)]" />}
-          </button>
-        )
-      })}
-    </div>
-  )
-}
-
 function CtxItem({
   icon: Icon,
   label,
@@ -895,10 +872,6 @@ function loadFilters(): FilterState {
   }
 }
 
-function isRemotePath(path: string): boolean {
-  return path.startsWith('ssh://') || path.startsWith('docker://')
-}
-
 function projectName(path: string): string {
   if (!path) return ''
   if (path.startsWith('docker://')) {
diff --git a/web/src/components/Sidebar.vue b/web/src/components/Sidebar.vue
deleted file mode 100644
index 96aee336..00000000
--- a/web/src/components/Sidebar.vue
+++ /dev/null
@@ -1,1087 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch, nextTick, inject } from 'vue'
-import {
-  Menu as HMenu,
-  MenuButton,
-  MenuItems,
-  MenuItem,
-} from '@headlessui/vue'
-import {
-  ChevronRightIcon,
-  FolderIcon,
-  FolderOpenIcon,
-  ServerIcon,
-  PlusIcon,
-  EllipsisHorizontalIcon,
-  BookmarkIcon,
-  ArchiveBoxIcon,
-  ArchiveBoxArrowDownIcon,
-  PencilIcon,
-  TrashIcon,
-  EnvelopeOpenIcon,
-  SunIcon,
-  MoonIcon,
-  Cog6ToothIcon,
-  SparklesIcon,
-  SignalIcon,
-} from '@heroicons/vue/24/outline'
-import { useI18n } from 'vue-i18n'
-import { useChatStore } from '@/stores/chat'
-import { useProjectStore, isRemotePath, parseRemoteLabel } from '@/stores/project'
-import type { TaskItem, RemoteMeta } from '@/types/api'
-import SidebarFilterMenu from '@/components/SidebarFilterMenu.vue'
-
-const store = useChatStore()
-const { t } = useI18n()
-const projectStore = useProjectStore()
-const openRemoteConnect = inject<(prefill?: RemoteMeta & { loadTaskUuid?: string }) => void>('openRemoteConnect')
-const startNewTaskInProject = inject<(path: string) => Promise<boolean>>('onNewTaskInProject')
-// Provided by App: switch the shell back to the chat page. Used by the "New
-// task" button so starting a task from the Automations page returns to chat.
-const goToChat = inject<() => void>('goToChat')
-
-defineProps<{
-  resolvedTheme: 'light' | 'dark'
-  // Mirrors App.vue's activeView union. 'automation-run' is included even though
-  // the sidebar only highlights chat/automations/channels — omitting it would
-  // make the :active-view binding in App.vue fail type-check (the ref holds it).
-  activeView?: 'chat' | 'automations' | 'channels' | 'automation-run'
-}>()
-
-const emit = defineEmits<{
-  openFile: [path: string, content: string]
-  openSettings: []
-  openProjects: []
-  openAutomations: []
-  openChannels: []
-  showChat: []
-  toggleTheme: []
-}>()
-
-// Shortcut prefix for the New Task nav kbd hint: ⌘ on macOS, Ctrl+ elsewhere.
-// The app is macOS-first (Tauri overlay title bar) but the hint shouldn't lie
-// on other platforms. (Automations/Channels no longer have shortcuts.)
-const platformModPlain = (() => {
-  if (typeof navigator !== 'undefined' && /Mac/i.test(navigator.platform)) return '⌘'
-  return 'Ctrl+'
-})()
-
-// Expanded project paths. The active project is auto-expanded.
-const expanded = ref<Set<string>>(new Set())
-
-// A coarse reactive clock so time-based filtering/grouping (last-activity window,
-// date buckets) re-evaluate as the wall clock advances — Date.now()/new Date()
-// alone aren't reactive deps, so without this rows would go stale until an
-// unrelated refresh.
-const now = ref(Date.now())
-let clockTimer: ReturnType<typeof setInterval> | null = null
-
-// The task "⋯" menu opens downward by default; for rows near the bottom of the
-// sidebar that clips it, so flip it upward when there isn't room below.
-const flipUpMenus = ref<Set<string>>(new Set())
-function onTaskMenuClick(e: MouseEvent, uuid: string) {
-  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
-  const next = new Set(flipUpMenus.value)
-  if (rect.bottom + 200 > window.innerHeight - 12) next.add(uuid)
-  else next.delete(uuid)
-  flipUpMenus.value = next
-}
-
-const activePath = computed(() => projectStore.activeProject?.path || store.pwd)
-
-function isExpanded(path: string): boolean {
-  return expanded.value.has(path)
-}
-function toggle(path: string) {
-  const next = new Set(expanded.value)
-  if (next.has(path)) next.delete(path)
-  else next.add(path)
-  expanded.value = next
-}
-
-// ── Filter → group → sort pipeline (driven by projectStore.filters) ──
-
-// Status: active hides archived, archived shows only archived, all = both.
-function passesStatus(task: TaskItem): boolean {
-  const s = projectStore.filters.status
-  if (s === 'active') return !task.archived
-  if (s === 'archived') return task.archived
-  return true
-}
-
-// Last-activity window against updated_at (fallback created_at).
-function withinActivity(ts: string): boolean {
-  const f = projectStore.filters.lastActivity
-  if (f === 'all') return true
-  const then = new Date(ts).getTime()
-  if (Number.isNaN(then)) return false
-  const day = 86400000
-  const span = f === 'today' ? day : f === 'week' ? 7 * day : 30 * day
-  return now.value - then <= span
-}
-
-// The single-project filter, ignored if it points at a project that no longer
-// exists (e.g. it was just deleted) so the list is never stranded empty.
-const projectFilter = computed(() => {
-  const p = projectStore.filters.project
-  if (!p) return ''
-  return projectStore.projectsForTree.some((n) => n.path === p) ? p : ''
-})
-
-const filteredTasks = computed(() =>
-  projectStore.allTasks.filter((task) => {
-    // The conversation you currently have open always stays visible & selectable,
-    // regardless of filters — otherwise archiving (or a narrowing window) would
-    // strand the open task with no row anywhere in the tree.
-    if (task.uuid === store.currentSessionId && task.project === activePath.value) return true
-    if (!passesStatus(task)) return false
-    if (projectFilter.value && task.project !== projectFilter.value) return false
-    if (!withinActivity(task.updated_at || task.created_at || '')) return false
-    return true
-  }),
-)
-
-// Within a group: live work first, then pinned, then the chosen sort key.
-function taskComparator(a: TaskItem, b: TaskItem): number {
-  if (!!a.running !== !!b.running) return a.running ? -1 : 1
-  if (a.pinned !== b.pinned) return a.pinned ? -1 : 1
-  const f = projectStore.filters.sortBy
-  if (f === 'name') return taskTitle(a).localeCompare(taskTitle(b))
-  if (f === 'created') return (b.created_at || '').localeCompare(a.created_at || '')
-  const at = a.updated_at || a.created_at || ''
-  const bt = b.updated_at || b.created_at || ''
-  return bt.localeCompare(at)
-}
-
-// Date-bucket assignment for "group by date" (calendar-day based for today /
-// yesterday, then rolling windows).
-const DATE_BUCKETS = ['today', 'yesterday', 'week', 'month', 'older'] as const
-function bucketFor(ts: string): string {
-  const then = new Date(ts).getTime()
-  if (Number.isNaN(then)) return 'older'
-  const today = new Date(now.value)
-  const startToday = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime()
-  const day = 86400000
-  if (then >= startToday) return 'today'
-  if (then >= startToday - day) return 'yesterday'
-  if (then >= startToday - 7 * day) return 'week'
-  if (then >= startToday - 30 * day) return 'month'
-  return 'older'
-}
-
-function pushTask(map: Map<string, TaskItem[]>, key: string, task: TaskItem) {
-  const arr = map.get(key)
-  if (arr) arr.push(task)
-  else map.set(key, [task])
-}
-
-// "New task" header button: always return to the chat page first (so the
-// Automations page is dismissed) then start a fresh session. Without the
-// goToChat() hop, starting a task from the Automations page left the new chat
-// hidden behind the page — it looked like the button did nothing.
-async function newTask() {
-  goToChat?.()
-  emit('showChat')
-  await store.newSession()
-}
-
-// "+" on a workspace row: switch to that workspace and open a fresh welcome
-// screen, so the next message starts a new task there. Remote workspaces must
-// reconnect through the SSH wizard first (it lands on a fresh session too).
-async function newTaskInProject(proj: { path: string }) {
-  if (isRemotePath(proj.path)) {
-    const meta = parseRemoteLabel(proj.path)
-    if (meta) openRemoteConnect?.(meta)
-    return
-  }
-  const ok = await startNewTaskInProject?.(proj.path)
-  if (ok === false) return
-  if (!expanded.value.has(proj.path)) toggle(proj.path)
-}
-
-interface SidebarGroup {
-  kind: 'project' | 'date'
-  key: string
-  label: string
-  path?: string // project kind only
-  tasks: TaskItem[]
-}
-
-// Per-group ordering signals: surface live work, unread, then recency.
-function aggregate(tasks: TaskItem[]) {
-  let running = false
-  let unread = false
-  let lastTs = ''
-  for (const task of tasks) {
-    if (task.running) running = true
-    if (task.unread) unread = true
-    const ts = task.updated_at || task.created_at || ''
-    if (ts > lastTs) lastTs = ts
-  }
-  return { running, unread, lastTs }
-}
-
-// The rendered list: filtered tasks bucketed by project or date, each group
-// internally sorted. Project groups keep the active-first → running → unread →
-// recency → name order; date groups run newest bucket first.
-const sidebarGroups = computed<SidebarGroup[]>(() => {
-  const tasks = filteredTasks.value
-
-  if (projectStore.filters.groupBy === 'date') {
-    const map = new Map<string, TaskItem[]>()
-    for (const task of tasks) pushTask(map, bucketFor(task.updated_at || task.created_at || ''), task)
-    return DATE_BUCKETS.filter((k) => map.has(k)).map((k) => ({
-      kind: 'date' as const,
-      key: k,
-      label: t(`sidebar.dateBucket.${k}`),
-      tasks: map.get(k)!.sort(taskComparator),
-    }))
-  }
-
-  // Group by project.
-  const map = new Map<string, TaskItem[]>()
-  for (const task of tasks) pushTask(map, task.project, task)
-  // Under a single-project filter the set is just that folder; otherwise every
-  // project with a (filtered) task. The active project is added below so the
-  // open conversation is never hidden.
-  const paths = projectFilter.value ? new Set([projectFilter.value]) : new Set(map.keys())
-  // Keep the active project's folder so the place you're working never vanishes.
-  // Under a narrowing filter only keep it when it has a visible task (which now
-  // includes the always-kept open conversation), so we don't synthesize a
-  // misleading empty "No tasks" folder.
-  const narrowing =
-    !!projectFilter.value ||
-    projectStore.filters.status === 'archived' ||
-    projectStore.filters.lastActivity !== 'all'
-  if (activePath.value && (map.has(activePath.value) || !narrowing)) {
-    paths.add(activePath.value)
-  }
-  const groups: SidebarGroup[] = [...paths].map((path) => ({
-    kind: 'project',
-    key: path,
-    path,
-    label: projectStore.nameForPath(path),
-    tasks: (map.get(path) || []).sort(taskComparator),
-  }))
-  return groups.sort((a, b) => {
-    if (a.path === activePath.value) return -1
-    if (b.path === activePath.value) return 1
-    const A = aggregate(a.tasks)
-    const B = aggregate(b.tasks)
-    if (A.running !== B.running) return A.running ? -1 : 1
-    if (A.unread !== B.unread) return A.unread ? -1 : 1
-    if (A.lastTs !== B.lastTs) return B.lastTs.localeCompare(A.lastTs)
-    return a.label.localeCompare(b.label)
-  })
-})
-
-// When two project groups share a basename (e.g. ~/work/jack and ~/srv/jack),
-// show the parent directory so they're tellable apart at a glance.
-const duplicateNames = computed(() => {
-  const counts = new Map<string, number>()
-  for (const g of sidebarGroups.value) {
-    if (g.kind === 'project') counts.set(g.label, (counts.get(g.label) || 0) + 1)
-  }
-  return new Set([...counts].filter(([, c]) => c > 1).map(([name]) => name))
-})
-function projHint(group: SidebarGroup): string {
-  if (group.kind !== 'project' || !group.path) return ''
-  if (!duplicateNames.value.has(group.label) || isRemotePath(group.path)) return ''
-  const segs = group.path.split('/').filter(Boolean)
-  return segs.length >= 2 ? segs[segs.length - 2] ?? '' : ''
-}
-
-async function refresh() {
-  await projectStore.fetchAllTasks()
-}
-
-onMounted(() => {
-  refresh()
-  if (activePath.value) expanded.value = new Set([activePath.value])
-  // Tick the clock once a minute so last-activity windows and date buckets
-  // re-evaluate as time passes (incl. the midnight today→yesterday rollover).
-  clockTimer = setInterval(() => { now.value = Date.now() }, 60000)
-})
-
-onUnmounted(() => {
-  if (clockTimer) clearInterval(clockTimer)
-})
-
-// Keep the active project expanded and the tree fresh as the active session /
-// session list changes (new task, send, delete).
-watch(activePath, (p) => {
-  if (p && !expanded.value.has(p)) toggle(p)
-})
-watch(() => store.sessions.length, refresh)
-watch(() => store.currentSessionId, refresh)
-
-async function openTask(task: TaskItem) {
-  if (task.unread) projectStore.updateTaskMeta(task.uuid, { unread: false })
-
-  // Return to the chat page first — otherwise loading a task from the
-  // Automations/Channels page leaves it hidden behind that page (chat-panel is
-  // v-show-gated on activeView === 'chat'). Mirrors the newTask() hop.
-  goToChat?.()
-
-  // Remote tasks: if their workspace is already the active connection just load
-  // the transcript; otherwise reconnect via the SSH wizard (it loads the task
-  // after binding). We never persist the SSH secret, so a fresh connect is
-  // required to continue the conversation.
-  if (isRemotePath(task.project)) {
-    if (activePath.value === task.project) {
-      await store.loadSession(task.uuid)
-    } else {
-      const meta = parseRemoteLabel(task.project)
-      if (meta) openRemoteConnect?.({ ...meta, loadTaskUuid: task.uuid })
-    }
-    return
-  }
-
-  if (activePath.value !== task.project) {
-    const ok = await projectStore.openProject(task.project)
-    if (!ok) return
-    await store.fetchHealth()
-  }
-  await store.loadSession(task.uuid)
-}
-
-function projIcon(path: string) {
-  if (isRemotePath(path)) return ServerIcon
-  return path === activePath.value ? FolderOpenIcon : FolderIcon
-}
-
-function isActiveTask(task: TaskItem): boolean {
-  return task.uuid === store.currentSessionId && activePath.value === task.project
-}
-
-async function handleDelete(task: TaskItem) {
-  const path = task.project
-  // Capture before mutating: deleting the conversation you're currently viewing
-  // must also reset the chat view, otherwise the timeline stays rendered and
-  // currentSessionId keeps pointing at the now-dead session (the next message
-  // would be sent to it). Guarded so deleting a background task never disturbs
-  // the open chat.
-  const wasActive = isActiveTask(task)
-  await store.deleteSession(task.uuid)
-  await refresh()
-  if (wasActive) {
-    store.clearChat()
-    store.currentSessionId = ''
-    store.isRunning = false
-  }
-  // If that was the workspace's last conversation, drop the now-empty folder from
-  // the tree too. Archived chats still count (tasksByProject keeps them), so a
-  // folder with only archived conversations is preserved.
-  if (!projectStore.tasksByProject[path]?.length) {
-    projectStore.removeProjectByPath(path)
-  }
-}
-
-// 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) {
-  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) + '…'
-}
-
-function relativeTime(ts: string): string {
-  if (!ts) return ''
-  const then = new Date(ts).getTime()
-  if (Number.isNaN(then)) return ''
-  const mins = Math.floor((Date.now() - then) / 60000)
-  if (mins < 1) return t('sidebar.relativeTime.now')
-  if (mins < 60) return t('sidebar.relativeTime.minutes', { n: mins })
-  const hrs = Math.floor(mins / 60)
-  if (hrs < 24) return t('sidebar.relativeTime.hours', { n: hrs })
-  const days = Math.floor(hrs / 24)
-  if (days < 30) return t('sidebar.relativeTime.days', { n: days })
-  return new Date(ts).toLocaleDateString([], { month: 'short', day: 'numeric' })
-}
-</script>
-
-<template>
-  <aside class="sidebar">
-    <!-- Nav header — a whitespace index (the "C2" design: no lines, just air).
-         Three equal controls float on the sidebar background; a row only gains
-         a body on hover/active, so at rest there's no cage of borders. Only
-         "New task" carries a shortcut (⌘N); the other two are page views with
-         no binding. -->
-    <div class="sidebar-header">
-      <div class="nav-list">
-        <button class="nav-row" @click="newTask">
-          <PlusIcon class="nav-ic" />
-          <span class="nav-name">{{ t('nav.newTask') }}</span>
-          <span class="nav-kbd">{{ platformModPlain }} N</span>
-        </button>
-        <button
-          class="nav-row"
-          :class="{ active: activeView === 'automations' }"
-          @click="emit('openAutomations')"
-          :aria-current="activeView === 'automations' ? 'page' : undefined"
-        >
-          <SparklesIcon class="nav-ic" />
-          <span class="nav-name">{{ t('nav.automations') }}</span>
-        </button>
-        <button
-          class="nav-row"
-          :class="{ active: activeView === 'channels' }"
-          @click="emit('openChannels')"
-          :aria-current="activeView === 'channels' ? 'page' : undefined"
-        >
-          <SignalIcon class="nav-ic" />
-          <span class="nav-name">{{ t('nav.channels') }}</span>
-        </button>
-      </div>
-    </div>
-
-    <!-- Workspace tree -->
-    <div class="tree">
-      <div class="tree-head">
-        <span class="tree-label">{{ t('nav.workspace') }}</span>
-        <SidebarFilterMenu />
-      </div>
-
-      <div v-if="sidebarGroups.length === 0" class="empty-state">{{ t('sidebar.noProjects') }}</div>
-
-      <div v-for="group in sidebarGroups" :key="group.kind + ':' + group.key" class="project-group">
-        <!-- Project group → folder row (collapsible, with new-task + running cue). -->
-        <div
-          v-if="group.kind === 'project'"
-          class="project-row"
-          :class="{ active: group.path === activePath }"
-          :title="group.path"
-          role="button"
-          tabindex="0"
-          @click="toggle(group.key)"
-          @keydown.enter.prevent="toggle(group.key)"
-          @keydown.space.prevent="toggle(group.key)"
-        >
-          <ChevronRightIcon class="w-3.5 h-3.5 proj-chevron" :class="{ open: isExpanded(group.key) }" />
-          <component :is="projIcon(group.path!)" class="w-3.5 h-3.5 proj-icon" />
-          <span class="proj-name">{{ group.label }}</span>
-          <span v-if="projHint(group)" class="proj-hint">{{ projHint(group) }}</span>
-          <span
-            v-if="!isExpanded(group.key) && group.tasks.some((tk) => tk.running)"
-            class="task-running-ring proj-running-ring"
-            :title="t('sidebar.running')"
-            aria-hidden="true"
-          />
-          <button
-            class="proj-add"
-            :title="t('sidebar.newTaskHere')"
-            :aria-label="t('sidebar.newTaskHere')"
-            @click.stop="newTaskInProject({ path: group.path! })"
-            @keydown.stop
-          >
-            <PlusIcon class="w-3.5 h-3.5" />
-          </button>
-          <span v-if="group.tasks.length > 0" class="proj-count">{{ group.tasks.length }}</span>
-        </div>
-
-        <!-- Date group → static bucket header (no folder affordances). -->
-        <div v-else class="date-row">
-          <span class="date-label">{{ group.label }}</span>
-          <span class="proj-count">{{ group.tasks.length }}</span>
-        </div>
-
-        <div
-          v-show="group.kind === 'date' || isExpanded(group.key)"
-          class="task-list"
-          :class="{ 'date-list': group.kind === 'date' }"
-        >
-          <div v-if="group.kind === 'project' && group.tasks.length === 0" class="task-empty">{{ t('sidebar.noTasks') }}</div>
-          <div
-            v-for="task in group.tasks"
-            :key="task.uuid"
-            class="task-row"
-            :class="{ active: isActiveTask(task), archived: task.archived, running: task.running }"
-            @click="openTask(task)"
-          >
-            <span
-              v-if="task.running"
-              class="task-running-ring"
-              :title="t('sidebar.running')"
-              aria-hidden="true"
-            />
-            <span v-else class="task-dot" :class="{ unread: task.unread }" aria-hidden="true" />
-            <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 }"
-              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
-              v-if="group.kind === 'date'"
-              class="task-proj"
-              :title="task.project"
-            >{{ projectStore.nameForPath(task.project) }}</span>
-            <span class="task-time" :class="{ running: task.running }">
-              {{ task.running ? t('sidebar.running') : relativeTime(task.updated_at || task.created_at) }}
-            </span>
-
-            <HMenu as="div" class="task-menu" @click.stop>
-              <MenuButton class="task-menu-btn" :title="t('sidebar.actions.taskActions')" @click.stop="onTaskMenuClick($event, task.uuid)">
-                <EllipsisHorizontalIcon class="w-3.5 h-3.5" />
-              </MenuButton>
-              <transition
-                enter-active-class="pop-enter-active"
-                enter-from-class="pop-enter-from"
-                leave-active-class="pop-leave-active"
-                leave-to-class="pop-leave-to"
-              >
-                <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 })">
-                      <BookmarkIcon class="w-3.5 h-3.5" /> {{ task.pinned ? t('sidebar.actions.unpin') : t('sidebar.actions.pin') }}
-                    </button>
-                  </MenuItem>
-                  <MenuItem v-slot="{ active }">
-                    <button class="tmi" :class="{ hl: active }" @click.stop="renameTask(task)">
-                      <PencilIcon class="w-3.5 h-3.5" /> {{ t('sidebar.actions.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 ? ArchiveBoxArrowDownIcon : ArchiveBoxIcon" class="w-3.5 h-3.5" /> {{ task.archived ? t('sidebar.actions.unarchive') : t('sidebar.actions.archive') }}
-                    </button>
-                  </MenuItem>
-                  <MenuItem v-slot="{ active }">
-                    <button class="tmi" :class="{ hl: active }" @click.stop="projectStore.updateTaskMeta(task.uuid, { unread: !task.unread })">
-                      <EnvelopeOpenIcon class="w-3.5 h-3.5" /> {{ task.unread ? t('sidebar.actions.markRead') : t('sidebar.actions.markUnread') }}
-                    </button>
-                  </MenuItem>
-                  <div class="tmi-sep" />
-                  <MenuItem v-slot="{ active }">
-                    <button class="tmi danger" :class="{ hl: active }" @click.stop="handleDelete(task)">
-                      <TrashIcon class="w-3.5 h-3.5" /> {{ t('sidebar.actions.delete') }}
-                    </button>
-                  </MenuItem>
-                </MenuItems>
-              </transition>
-            </HMenu>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Footer -->
-    <div class="sidebar-footer">
-      <div class="footer-actions">
-        <button class="footer-btn" @click="emit('toggleTheme')" :title="resolvedTheme === 'dark' ? t('nav.switchToLight') : t('nav.switchToDark')">
-          <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="t('nav.settingsWithShortcut')">
-          <Cog6ToothIcon class="w-3.5 h-3.5" />
-        </button>
-      </div>
-    </div>
-  </aside>
-</template>
-
-<style scoped>
-.sidebar {
-  width: var(--sidebar-width);
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  position: relative;
-  background: var(--color-background);
-}
-
-/* The header sits in the same top band as the chat canvas. The chat panel uses
- * margin-top: 48px (browser) / 20px (tauri, on top of the 28px title bar) — the
- * sidebar header mirrors that so "New task"/"Automations" line up with the top
- * of the chat surface instead of starting higher up at the window edge. */
-.sidebar-header {
-  padding: 48px 12px 6px;
-}
-html.is-tauri-macos .sidebar-header {
-  padding-top: 20px;
-}
-
-/* Nav header — "C2" whitespace index: no lines, just air. Three equal controls
- * float on the sidebar background; a row gains a rounded body only on
- * hover/active, so at rest there's no cage of borders separating them. Each row
- * is icon + name + shortcut. Active = accent wash (borderless), mirroring the
- * de-emphasized accent used elsewhere (not the brand orange flood). */
-.nav-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.nav-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  padding: 9px 12px;
-  border: 1px solid transparent;
-  background: transparent;
-  border-radius: var(--radius-lg);
-  cursor: pointer;
-  text-align: left;
-  transition: background 0.15s, color 0.15s, border-color 0.15s;
-}
-.nav-row:hover {
-  background: var(--color-muted);
-}
-.nav-row:hover .nav-ic {
-  color: var(--color-foreground);
-}
-/* Active page: a quiet gray wash + full-saturation foreground, no border (the
-   "no cage" principle). The current target reads without an outline and without
-   a brand colour — the pages aren't primary actions, so accent (yellow) here
-   would shout. Icon + label keep weight but stay neutral. */
-.nav-row.active {
-  background: var(--color-muted);
-}
-.nav-row.active .nav-ic {
-  color: var(--color-foreground);
-}
-.nav-row.active .nav-name {
-  color: var(--color-foreground);
-  font-weight: 600;
-}
-.nav-ic {
-  width: 18px;
-  height: 18px;
-  flex-shrink: 0;
-  color: var(--color-muted-foreground);
-  transition: color 0.15s;
-}
-.nav-name {
-  flex: 1;
-  min-width: 0;
-  font-size: 13.5px;
-  font-weight: 500;
-  color: var(--color-foreground);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-/* Kbd hint — plain text, no chip: no border, no background, no padding. Uses the
-   app's sans face (not mono) so the ⌘ symbol and the letter N render at the
-   same visual size — mono fonts draw ⌘ thinner/smaller than letters. Foreground
-   (not muted) so the hint reads clearly without a keycap. */
-.nav-kbd {
-  font-family: var(--font-sans);
-  font-size: 11.5px;
-  line-height: 1;
-  color: var(--color-foreground);
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-/* ─── Tree ─── */
-.tree {
-  flex: 1;
-  overflow-y: auto;
-  padding: 4px 8px 8px;
-}
-
-.tree-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 6px 4px;
-}
-.tree-label {
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--color-muted-foreground);
-}
-
-.empty-state {
-  text-align: center;
-  font-size: 11px;
-  padding: 24px 0;
-  color: var(--color-muted-foreground);
-}
-
-.project-group {
-  margin-bottom: 2px;
-}
-
-.project-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  padding: 8px 6px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  text-align: left;
-  transition: background 0.15s;
-}
-.project-row:hover {
-  background: var(--color-muted);
-}
-.proj-chevron {
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-  transition: transform 0.15s;
-}
-.proj-chevron.open {
-  transform: rotate(90deg);
-}
-.proj-icon {
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-.project-row.active .proj-icon {
-  color: var(--color-accent-neutral);
-}
-.proj-name {
-  flex: 1;
-  min-width: 0;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--color-foreground);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.proj-hint {
-  font-size: 10px;
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-  opacity: 0.7;
-  max-width: 80px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.proj-count {
-  font-size: 10px;
-  font-family: var(--font-mono);
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-
-/* "+" new-task affordance — hidden until the row is hovered/focused, mirroring
-   the task row's ⋯ menu button so the tree stays calm at rest. */
-.proj-add {
-  display: grid;
-  place-items: center;
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-sm);
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s, background 0.15s, color 0.15s;
-}
-.project-row:hover .proj-add,
-.project-row:focus-within .proj-add {
-  opacity: 1;
-}
-.proj-add:hover {
-  background: var(--color-secondary);
-  color: var(--color-foreground);
-}
-
-.task-list {
-  padding-left: 14px;
-}
-/* Date grouping is a flat chronological feed — drop the folder indent + rail. */
-.task-list.date-list {
-  padding-left: 0;
-}
-.task-empty {
-  font-size: 11px;
-  color: var(--color-muted-foreground);
-  padding: 5px 8px;
-}
-
-/* Date-bucket header (Today / Yesterday / …) — a quiet label, not a folder. */
-.date-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 10px 6px 4px;
-}
-.date-label {
-  flex: 1;
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--color-muted-foreground);
-}
-
-.task-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 8px;
-  margin-left: 6px;
-  border-left: 1px solid var(--color-border);
-  cursor: pointer;
-  transition: background 0.15s;
-  position: relative;
-}
-.task-row:hover {
-  background: var(--color-muted);
-}
-.task-row.active {
-  background: var(--neutral-wash-soft);
-  border-left-color: var(--color-accent-neutral);
-}
-.task-row.archived {
-  opacity: 0.55;
-}
-
-.task-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: var(--radius-pill);
-  flex-shrink: 0;
-  background: transparent;
-}
-.task-dot.unread {
-  background: var(--color-accent-neutral);
-}
-/* Running indicator: a thin accent ring that breathes (scale + opacity) — a calm
-   "working" cue matched to a clean ring aesthetic. */
-.task-running-ring {
-  width: 11px;
-  height: 11px;
-  flex-shrink: 0;
-  border-radius: var(--radius-pill);
-  border: 1.6px solid var(--color-accent);
-  animation: task-ring-breathe 1.6s ease-in-out infinite;
-}
-.proj-running-ring {
-  width: 9px;
-  height: 9px;
-  margin-left: auto;
-}
-@keyframes task-ring-breathe {
-  0%,
-  100% {
-    opacity: 0.35;
-    transform: scale(0.78);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-/* A running task row gets a faint accent rail so live work reads at a glance. */
-.task-row.running {
-  border-left-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border));
-}
-/* Without motion the ring sits static at full opacity so it still clearly
-   means "running". */
-@media (prefers-reduced-motion: reduce) {
-  .task-running-ring {
-    animation: none;
-    opacity: 1;
-    transform: none;
-  }
-}
-.task-pin {
-  color: var(--color-accent-neutral);
-  flex-shrink: 0;
-}
-.task-title {
-  flex: 1;
-  min-width: 0;
-  font-size: 13px;
-  color: var(--color-foreground);
-  white-space: nowrap;
-  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-accent-neutral);
-  border-radius: var(--radius-sm);
-  padding: 1px 5px;
-  outline: none;
-}
-.task-time {
-  font-size: 10px;
-  font-family: var(--font-mono);
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-.task-time.running {
-  color: var(--color-accent);
-}
-
-/* In date grouping the rows aren't under a folder, so drop the tree rail/indent
-   and show which project each task belongs to. */
-.date-list .task-row {
-  margin-left: 0;
-  border-left: none;
-  padding-left: 6px;
-}
-.task-proj {
-  flex-shrink: 0;
-  max-width: 90px;
-  font-size: 10px;
-  color: var(--color-muted-foreground);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  opacity: 0.75;
-}
-
-/* ─── Task action menu ─── */
-.task-menu {
-  position: relative;
-  display: inline-flex;
-  flex-shrink: 0;
-}
-.task-menu-btn {
-  display: grid;
-  place-items: center;
-  width: 20px;
-  height: 20px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-sm);
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s, background 0.15s, color 0.15s;
-}
-.task-row:hover .task-menu-btn {
-  opacity: 1;
-}
-.task-menu-btn:hover {
-  background: var(--color-secondary);
-  color: var(--color-foreground);
-}
-.task-menu-items.flip-up {
-  top: auto;
-  bottom: calc(100% + 4px);
-}
-.task-menu-items {
-  position: absolute;
-  top: calc(100% + 4px);
-  right: 0;
-  min-width: 160px;
-  padding: 4px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-md);
-  z-index: var(--z-dropdown);
-  outline: none;
-}
-.tmi {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 8px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  color: var(--color-foreground);
-  font-size: 12.5px;
-  text-align: left;
-  cursor: pointer;
-}
-.tmi.hl {
-  background: var(--color-muted);
-}
-.tmi.danger {
-  color: var(--color-destructive);
-}
-.tmi-sep {
-  height: 1px;
-  margin: 4px 0;
-  background: var(--color-border);
-}
-
-.pop-enter-active,
-.pop-leave-active {
-  transition: opacity 0.12s ease, transform 0.12s ease;
-}
-.pop-enter-from,
-.pop-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-
-/* ─── Footer ─── */
-.sidebar-footer {
-  padding: 10px 12px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-.footer-actions {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-.footer-btn {
-  width: 34px;
-  height: 34px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-md);
-  border: none;
-  background: transparent;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s;
-}
-.footer-btn:hover {
-  background: var(--color-muted);
-  color: var(--color-foreground);
-}
-.footer-btn svg {
-  width: 18px;
-  height: 18px;
-}
-</style>
diff --git a/web/src/components/SidebarFilterMenu.tsx b/web/src/components/SidebarFilterMenu.tsx
new file mode 100644
index 00000000..7e8d74e2
--- /dev/null
+++ b/web/src/components/SidebarFilterMenu.tsx
@@ -0,0 +1,307 @@
+/**
+ * SidebarFilterMenu — drill-down filter/sort popover for the sidebar tree.
+ *
+ * Ported from web/src/components/SidebarFilterMenu.vue: a compact root list of
+ * filter rows (label + current value + chevron), each of which drills into a
+ * flat option list with a back button. Keeps the panel anchored to the narrow
+ * rail instead of a side-flyout.
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  AdjustmentsHorizontalIcon,
+  ArrowPathIcon,
+  CheckIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from '@heroicons/react/24/outline'
+import { useTranslation } from 'react-i18next'
+
+export type StatusFilter = 'all' | 'active' | 'archived'
+export type LastActivityFilter = 'all' | 'today' | 'week' | 'month'
+export type GroupByMode = 'project' | 'date'
+export type SortFilter = 'recency' | 'name' | 'created'
+
+export interface FilterState {
+  status: StatusFilter
+  project: string
+  lastActivity: LastActivityFilter
+  groupBy: GroupByMode
+  sort: SortFilter
+}
+
+export const DEFAULT_FILTERS: FilterState = {
+  status: 'active',
+  project: '',
+  lastActivity: 'all',
+  groupBy: 'project',
+  sort: 'recency',
+}
+
+type RowKey = keyof FilterState
+
+interface Opt {
+  value: string
+  label: string
+}
+
+interface Row {
+  key: RowKey
+  label: string
+  options: Opt[]
+}
+
+interface Props {
+  filters: FilterState
+  projects: { path: string; name: string }[]
+  onChange: (next: FilterState | ((prev: FilterState) => FilterState)) => void
+}
+
+export function SidebarFilterMenu({ filters, projects, onChange }: Props) {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const [openSub, setOpenSub] = useState<RowKey | ''>('')
+  const rootRef = useRef<HTMLDivElement | null>(null)
+
+  const filterRows = useMemo<Row[]>(
+    () => [
+      {
+        key: 'status',
+        label: t('sidebar.filter.status'),
+        options: [
+          { value: 'active', label: t('sidebar.filter.statusActive') },
+          { value: 'archived', label: t('sidebar.filter.statusArchived') },
+          { value: 'all', label: t('sidebar.filter.statusAll') },
+        ],
+      },
+      {
+        key: 'project',
+        label: t('sidebar.filter.project'),
+        options: [
+          { value: '', label: t('sidebar.filter.projectAll') },
+          ...projects.map((p) => ({ value: p.path, label: p.name })),
+        ],
+      },
+      {
+        key: 'lastActivity',
+        label: t('sidebar.filter.lastActivity'),
+        options: [
+          { value: 'all', label: t('sidebar.filter.activityAll') },
+          { value: 'today', label: t('sidebar.filter.activityToday') },
+          { value: 'week', label: t('sidebar.filter.activityWeek') },
+          { value: 'month', label: t('sidebar.filter.activityMonth') },
+        ],
+      },
+    ],
+    [projects, t],
+  )
+
+  const viewRows = useMemo<Row[]>(
+    () => [
+      {
+        key: 'groupBy',
+        label: t('sidebar.filter.groupBy'),
+        options: [
+          { value: 'project', label: t('sidebar.filter.groupProject') },
+          { value: 'date', label: t('sidebar.filter.groupDate') },
+        ],
+      },
+      {
+        key: 'sort',
+        label: t('sidebar.filter.sortBy'),
+        options: [
+          { value: 'recency', label: t('sidebar.filter.sortRecency') },
+          { value: 'name', label: t('sidebar.filter.sortName') },
+          { value: 'created', label: t('sidebar.filter.sortCreated') },
+        ],
+      },
+    ],
+    [t],
+  )
+
+  const allRows = useMemo(() => [...filterRows, ...viewRows], [filterRows, viewRows])
+  const activeRow = openSub ? allRows.find((r) => r.key === openSub) ?? null : null
+
+  const isDirty = (Object.keys(DEFAULT_FILTERS) as RowKey[]).some(
+    (k) => filters[k] !== DEFAULT_FILTERS[k],
+  )
+
+  function currentLabel(row: Row): string {
+    const cur = String(filters[row.key])
+    const match = row.options.find((o) => o.value === cur)
+    return match ? match.label : row.options[0]?.label ?? ''
+  }
+
+  function isSelected(row: Row, value: string): boolean {
+    return String(filters[row.key]) === value
+  }
+
+  function apply(key: RowKey, value: string) {
+    onChange((prev) => ({ ...prev, [key]: value }))
+    setOpenSub('')
+  }
+
+  function reset() {
+    onChange({ ...DEFAULT_FILTERS })
+    setOpenSub('')
+  }
+
+  function toggle() {
+    setOpen((v) => {
+      const next = !v
+      if (next) setOpenSub('')
+      return next
+    })
+  }
+
+  function close() {
+    setOpen(false)
+    setOpenSub('')
+  }
+
+  useEffect(() => {
+    if (!open) return
+    function onDocClick(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) close()
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        e.stopPropagation()
+        close()
+      }
+    }
+    document.addEventListener('click', onDocClick)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('click', onDocClick)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open])
+
+  return (
+    <div ref={rootRef} className="fm-root relative inline-flex">
+      <button
+        type="button"
+        className={`fm-btn relative grid h-[22px] w-[22px] place-items-center rounded-[var(--radius-sm)] border-none bg-transparent text-[var(--color-muted-foreground)] transition-[background,color] duration-150 ${
+          open || isDirty ? 'text-[var(--color-foreground)]' : ''
+        } ${open ? 'bg-[var(--color-muted)]' : ''} hover:bg-[var(--color-muted)] hover:text-[var(--color-foreground)]`}
+        title={t('sidebar.filter.title')}
+        aria-label={t('sidebar.filter.title')}
+        aria-expanded={open}
+        onClick={(e) => {
+          e.stopPropagation()
+          toggle()
+        }}
+      >
+        <AdjustmentsHorizontalIcon className="h-4 w-4" />
+        {isDirty && (
+          <span
+            className="absolute right-px top-px h-[5px] w-[5px] rounded-[var(--radius-pill)] bg-[var(--color-accent-neutral)]"
+            aria-hidden="true"
+          />
+        )}
+      </button>
+
+      {open && (
+        <div
+          className="fm-panel sb-pop absolute right-0 top-[calc(100%+4px)] z-[var(--z-dropdown)] max-h-[380px] w-[232px] overflow-y-auto rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-1 shadow-[var(--shadow-md)] outline-none"
+          role="menu"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {!activeRow ? (
+            <>
+              {filterRows.map((row) => (
+                <FilterRootRow
+                  key={row.key}
+                  label={row.label}
+                  value={currentLabel(row)}
+                  onClick={() => setOpenSub(row.key)}
+                />
+              ))}
+              <div className="fm-sep my-1 h-px bg-[var(--color-border)]" />
+              {viewRows.map((row) => (
+                <FilterRootRow
+                  key={row.key}
+                  label={row.label}
+                  value={currentLabel(row)}
+                  onClick={() => setOpenSub(row.key)}
+                />
+              ))}
+              {isDirty && (
+                <>
+                  <div className="fm-sep my-1 h-px bg-[var(--color-border)]" />
+                  <button
+                    type="button"
+                    className="fm-row flex w-full items-center gap-2 rounded-[var(--radius-md)] border-none bg-transparent px-2 py-[7px] text-left text-[12.5px] text-[var(--color-muted-foreground)] transition-colors hover:bg-[var(--color-muted)]"
+                    onClick={reset}
+                  >
+                    <ArrowPathIcon className="h-3.5 w-3.5 shrink-0" />
+                    <span>{t('sidebar.filter.reset')}</span>
+                  </button>
+                </>
+              )}
+            </>
+          ) : (
+            <>
+              <button
+                type="button"
+                className="fm-back flex w-full items-center gap-1.5 rounded-[var(--radius-md)] border-none bg-transparent px-2 py-1.5 text-left text-[12.5px] font-medium text-[var(--color-foreground)] transition-colors hover:bg-[var(--color-muted)]"
+                onClick={() => setOpenSub('')}
+              >
+                <ChevronLeftIcon className="h-3.5 w-3.5 shrink-0" />
+                <span>{activeRow.label}</span>
+              </button>
+              <div className="fm-sep my-1 h-px bg-[var(--color-border)]" />
+              <div className="flex flex-col">
+                {activeRow.options.map((opt) => {
+                  const selected = isSelected(activeRow, opt.value)
+                  return (
+                    <button
+                      key={opt.value || '__all__'}
+                      type="button"
+                      className={`fm-opt flex w-full items-center gap-2 rounded-[var(--radius-md)] border-none bg-transparent px-2 py-[7px] text-left text-[12.5px] transition-colors hover:bg-[var(--color-muted)] ${
+                        selected
+                          ? 'text-[var(--color-accent-neutral)]'
+                          : 'text-[var(--color-foreground)]'
+                      }`}
+                      onClick={() => apply(activeRow.key, opt.value)}
+                    >
+                      <span className="min-w-0 flex-1 truncate">{opt.label}</span>
+                      {selected && (
+                        <CheckIcon className="h-3.5 w-3.5 shrink-0 text-[var(--color-accent-neutral)]" />
+                      )}
+                    </button>
+                  )
+                })}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function FilterRootRow({
+  label,
+  value,
+  onClick,
+}: {
+  label: string
+  value: string
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      className="fm-row flex w-full items-center gap-2 rounded-[var(--radius-md)] border-none bg-transparent px-2 py-[7px] text-left text-[12.5px] text-[var(--color-foreground)] transition-colors hover:bg-[var(--color-muted)]"
+      onClick={onClick}
+    >
+      <span className="shrink-0">{label}</span>
+      <span className="min-w-0 flex-1 truncate text-right text-[var(--color-muted-foreground)]">
+        {value}
+      </span>
+      <ChevronRightIcon className="h-3.5 w-3.5 shrink-0 text-[var(--color-muted-foreground)]" />
+    </button>
+  )
+}
diff --git a/web/src/components/SidebarFilterMenu.vue b/web/src/components/SidebarFilterMenu.vue
deleted file mode 100644
index e06ee3fc..00000000
--- a/web/src/components/SidebarFilterMenu.vue
+++ /dev/null
@@ -1,366 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-import {
-  AdjustmentsHorizontalIcon,
-  ChevronRightIcon,
-  ChevronLeftIcon,
-  CheckIcon,
-  ArrowPathIcon,
-} from '@heroicons/vue/24/outline'
-import { useProjectStore, DEFAULT_FILTERS } from '@/stores/project'
-import type { SidebarFilters } from '@/stores/project'
-
-const { t } = useI18n()
-const projectStore = useProjectStore()
-const filters = computed(() => projectStore.filters)
-
-type RowKey = keyof SidebarFilters
-interface Opt { value: string; label: string }
-interface Row { key: RowKey; label: string; options: Opt[] }
-
-// Open state + which row's options are showing ('' = the root list). Drill-in
-// keeps the panel anchored and avoids a side-flyout overflowing the narrow rail.
-const open = ref(false)
-const openSub = ref<RowKey | ''>('')
-const root = ref<HTMLElement | null>(null)
-
-function toggle() {
-  open.value = !open.value
-  if (open.value) openSub.value = ''
-}
-function close() {
-  open.value = false
-}
-// Manual outside-click / Esc close (mirrors ChatInput) — more reliable here than
-// a headlessui Popover, which didn't toggle in this slot.
-function onDocClick(e: MouseEvent) {
-  if (root.value && !root.value.contains(e.target as Node)) close()
-}
-function onKey(e: KeyboardEvent) {
-  if (e.key === 'Escape' && open.value) {
-    e.stopPropagation()
-    close()
-  }
-}
-onMounted(() => {
-  document.addEventListener('click', onDocClick)
-  document.addEventListener('keydown', onKey)
-})
-onUnmounted(() => {
-  document.removeEventListener('click', onDocClick)
-  document.removeEventListener('keydown', onKey)
-})
-
-const filterRows = computed<Row[]>(() => [
-  {
-    key: 'status',
-    label: t('sidebar.filter.status'),
-    options: [
-      { value: 'active', label: t('sidebar.filter.statusActive') },
-      { value: 'archived', label: t('sidebar.filter.statusArchived') },
-      { value: 'all', label: t('sidebar.filter.statusAll') },
-    ],
-  },
-  {
-    key: 'project',
-    label: t('sidebar.filter.project'),
-    options: [
-      { value: '', label: t('sidebar.filter.projectAll') },
-      ...projectStore.projectsForTree.map((p) => ({ value: p.path, label: p.name })),
-    ],
-  },
-  {
-    key: 'lastActivity',
-    label: t('sidebar.filter.lastActivity'),
-    options: [
-      { value: 'all', label: t('sidebar.filter.activityAll') },
-      { value: 'today', label: t('sidebar.filter.activityToday') },
-      { value: 'week', label: t('sidebar.filter.activityWeek') },
-      { value: 'month', label: t('sidebar.filter.activityMonth') },
-    ],
-  },
-])
-
-const viewRows = computed<Row[]>(() => [
-  {
-    key: 'groupBy',
-    label: t('sidebar.filter.groupBy'),
-    options: [
-      { value: 'project', label: t('sidebar.filter.groupProject') },
-      { value: 'date', label: t('sidebar.filter.groupDate') },
-    ],
-  },
-  {
-    key: 'sortBy',
-    label: t('sidebar.filter.sortBy'),
-    options: [
-      { value: 'recency', label: t('sidebar.filter.sortRecency') },
-      { value: 'name', label: t('sidebar.filter.sortName') },
-      { value: 'created', label: t('sidebar.filter.sortCreated') },
-    ],
-  },
-])
-
-const allRows = computed(() => [...filterRows.value, ...viewRows.value])
-const activeRow = computed(() => allRows.value.find((r) => r.key === openSub.value) || null)
-
-// The right-aligned current value on a row. A project filter pointing at a
-// deleted project falls back to "All" (its first option).
-function currentLabel(row: Row): string {
-  const cur = String(filters.value[row.key])
-  const match = row.options.find((o) => o.value === cur)
-  return match ? match.label : row.options[0]?.label ?? ''
-}
-
-function isSelected(row: Row, value: string): boolean {
-  return String(filters.value[row.key]) === value
-}
-
-function apply(key: RowKey, value: string) {
-  projectStore.setFilters({ [key]: value } as Partial<SidebarFilters>)
-  openSub.value = ''
-}
-
-// Non-default filters get a dot on the trigger so an applied filter shows
-// without opening the menu.
-const isDirty = computed(() =>
-  (Object.keys(DEFAULT_FILTERS) as RowKey[]).some((k) => filters.value[k] !== DEFAULT_FILTERS[k]),
-)
-
-function reset() {
-  projectStore.resetFilters()
-  openSub.value = ''
-}
-</script>
-
-<template>
-  <div ref="root" class="filter-menu">
-    <button
-      class="filter-btn"
-      :class="{ dirty: isDirty, on: open }"
-      :title="t('sidebar.filter.title')"
-      :aria-label="t('sidebar.filter.title')"
-      @click.stop="toggle"
-    >
-      <AdjustmentsHorizontalIcon class="w-4 h-4" />
-      <span v-if="isDirty" class="filter-dot" aria-hidden="true" />
-    </button>
-
-    <transition
-      enter-active-class="pop-enter-active"
-      enter-from-class="pop-enter-from"
-      leave-active-class="pop-leave-active"
-      leave-to-class="pop-leave-to"
-    >
-      <div v-if="open" class="filter-panel" @click.stop>
-        <!-- Root list -->
-        <template v-if="!activeRow">
-          <button v-for="row in filterRows" :key="row.key" class="fm-row" @click="openSub = row.key">
-            <span class="fm-row-label">{{ row.label }}</span>
-            <span class="fm-row-value">{{ currentLabel(row) }}</span>
-            <ChevronRightIcon class="w-3.5 h-3.5 fm-row-chev" />
-          </button>
-          <div class="fm-sep" />
-          <button v-for="row in viewRows" :key="row.key" class="fm-row" @click="openSub = row.key">
-            <span class="fm-row-label">{{ row.label }}</span>
-            <span class="fm-row-value">{{ currentLabel(row) }}</span>
-            <ChevronRightIcon class="w-3.5 h-3.5 fm-row-chev" />
-          </button>
-          <template v-if="isDirty">
-            <div class="fm-sep" />
-            <button class="fm-row fm-reset" @click="reset">
-              <ArrowPathIcon class="w-3.5 h-3.5" />
-              <span class="fm-row-label">{{ t('sidebar.filter.reset') }}</span>
-            </button>
-          </template>
-        </template>
-
-        <!-- A filter's options -->
-        <template v-else>
-          <button class="fm-back" @click="openSub = ''">
-            <ChevronLeftIcon class="w-3.5 h-3.5" />
-            <span>{{ activeRow.label }}</span>
-          </button>
-          <div class="fm-sep" />
-          <div class="fm-opts">
-            <button
-              v-for="opt in activeRow.options"
-              :key="opt.value"
-              class="fm-opt"
-              :class="{ on: isSelected(activeRow, opt.value) }"
-              @click="apply(activeRow.key, opt.value)"
-            >
-              <span class="fm-opt-label">{{ opt.label }}</span>
-              <CheckIcon v-if="isSelected(activeRow, opt.value)" class="w-3.5 h-3.5 fm-opt-check" />
-            </button>
-          </div>
-        </template>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<style scoped>
-.filter-menu {
-  position: relative;
-  display: inline-flex;
-}
-.filter-btn {
-  position: relative;
-  display: grid;
-  place-items: center;
-  width: 22px;
-  height: 22px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-sm);
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s;
-}
-.filter-btn:hover,
-.filter-btn.dirty,
-.filter-btn.on {
-  color: var(--color-foreground);
-}
-.filter-btn:hover,
-.filter-btn.on {
-  background: var(--color-muted);
-}
-.filter-dot {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  width: 5px;
-  height: 5px;
-  border-radius: var(--radius-pill);
-  background: var(--color-accent-neutral);
-}
-
-.filter-panel {
-  position: absolute;
-  top: calc(100% + 4px);
-  right: 0;
-  z-index: var(--z-dropdown);
-  width: 232px;
-  max-height: 380px;
-  overflow-y: auto;
-  padding: 4px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-md);
-  outline: none;
-}
-
-.fm-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 8px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  color: var(--color-foreground);
-  font-size: 12.5px;
-  text-align: left;
-  cursor: pointer;
-  transition: background 0.12s;
-}
-.fm-row:hover {
-  background: var(--color-muted);
-}
-.fm-row-label {
-  flex-shrink: 0;
-}
-.fm-row-value {
-  flex: 1;
-  min-width: 0;
-  text-align: right;
-  color: var(--color-muted-foreground);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.fm-row-chev {
-  flex-shrink: 0;
-  color: var(--color-muted-foreground);
-}
-.fm-reset {
-  color: var(--color-muted-foreground);
-}
-
-.fm-sep {
-  height: 1px;
-  margin: 4px 0;
-  background: var(--color-border);
-}
-
-.fm-back {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  padding: 6px 8px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  color: var(--color-foreground);
-  font-size: 12.5px;
-  font-weight: 500;
-  text-align: left;
-  cursor: pointer;
-}
-.fm-back:hover {
-  background: var(--color-muted);
-}
-
-.fm-opts {
-  display: flex;
-  flex-direction: column;
-}
-.fm-opt {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 8px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  color: var(--color-foreground);
-  font-size: 12.5px;
-  text-align: left;
-  cursor: pointer;
-  transition: background 0.12s;
-}
-.fm-opt:hover {
-  background: var(--color-muted);
-}
-.fm-opt.on {
-  color: var(--color-accent-neutral);
-}
-.fm-opt-label {
-  flex: 1;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.fm-opt-check {
-  flex-shrink: 0;
-  color: var(--color-accent-neutral);
-}
-
-.pop-enter-active,
-.pop-leave-active {
-  transition: opacity 0.12s ease, transform 0.12s ease;
-}
-.pop-enter-from,
-.pop-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-</style>
diff --git a/web/src/components/TaskList.vue b/web/src/components/TaskList.vue
deleted file mode 100644
index ff98c507..00000000
--- a/web/src/components/TaskList.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { MinusCircleIcon, ArrowPathIcon, CheckCircleIcon, NoSymbolIcon, EllipsisHorizontalCircleIcon } from '@heroicons/vue/24/outline'
-import type { TodoItem } from '@/types/api'
-
-defineProps<{
-  todos: TodoItem[]
-}>()
-
-// Respect prefers-reduced-motion: swap the spinning LoaderCircle for a
-// static CircleDot so the spin actually stops (not just visually paused).
-const reduceMotion = ref(false)
-let mql: MediaQueryList | null = null
-function syncMotion(e?: MediaQueryListEvent) {
-  reduceMotion.value = e ? e.matches : (mql?.matches ?? false)
-}
-onMounted(() => {
-  if (typeof window !== 'undefined' && window.matchMedia) {
-    mql = window.matchMedia('(prefers-reduced-motion: reduce)')
-    reduceMotion.value = mql.matches
-    mql.addEventListener('change', syncMotion)
-  }
-})
-onBeforeUnmount(() => {
-  mql?.removeEventListener('change', syncMotion)
-})
-</script>
-
-<template>
-  <div class="space-y-0.5">
-    <div
-      v-for="todo in todos"
-      :key="todo.id"
-      class="relative flex items-center gap-2 py-1 pl-2 pr-1.5"
-      :style="todo.status === 'in_progress'
-        ? { backgroundColor: 'var(--color-warning-bg)', borderRadius: 'var(--radius-md)' }
-        : undefined"
-    >
-      <!-- 2px left accent bar for the active task (inner span, not a single-sided border) -->
-      <span
-        v-if="todo.status === 'in_progress'"
-        class="absolute left-0 top-0.5 bottom-0.5 w-0.5"
-        style="background-color: var(--color-accent-neutral); border-radius: var(--radius-pill)"
-        aria-hidden="true"
-      />
-
-      <!-- Status icon -->
-      <CheckCircleIcon
-        v-if="todo.status === 'completed'"
-        class="w-3.5 h-3.5 shrink-0"
-        style="color: var(--color-success-fg)"
-      />
-      <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'">
-        <EllipsisHorizontalCircleIcon
-          v-if="reduceMotion"
-          class="w-3.5 h-3.5 shrink-0"
-          style="color: var(--color-accent-neutral)"
-        />
-        <ArrowPathIcon
-          v-else
-          class="w-3.5 h-3.5 shrink-0 animate-spin"
-          style="color: var(--color-accent-neutral)"
-        />
-      </template>
-      <MinusCircleIcon
-        v-else
-        class="w-3.5 h-3.5 shrink-0"
-        style="color: var(--color-muted-foreground)"
-      />
-
-      <!-- Title -->
-      <span
-        class="text-xs sm:text-sm flex-1 min-w-0 truncate"
-        :class="{ 'font-medium': todo.status === 'in_progress' }"
-        :style="{
-          color: (todo.status === 'completed' || todo.status === 'cancelled')
-            ? 'var(--color-muted-foreground)'
-            : 'var(--color-foreground)',
-          textDecoration: (todo.status === 'completed' || todo.status === 'cancelled')
-            ? 'line-through'
-            : 'none',
-        }"
-      >{{ todo.title }}</span>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-/* Belt-and-suspenders: even if a spinner slips through, halt it for
-   users who prefer reduced motion. */
-@media (prefers-reduced-motion: reduce) {
-  .animate-spin {
-    animation: none;
-  }
-}
-</style>
diff --git a/web/src/components/TerminalInstance.vue b/web/src/components/TerminalInstance.vue
deleted file mode 100644
index 7a27716d..00000000
--- a/web/src/components/TerminalInstance.vue
+++ /dev/null
@@ -1,252 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
-import { Terminal } from '@xterm/xterm'
-import { FitAddon } from '@xterm/addon-fit'
-import { WebLinksAddon } from '@xterm/addon-web-links'
-import { useI18n } from 'vue-i18n'
-import { api } from '@/composables/api'
-import { wsBase } from '@/composables/apiBase'
-import { getAuthToken } from '@/composables/authToken'
-import '@xterm/xterm/css/xterm.css'
-
-const props = defineProps<{
-  active: boolean
-}>()
-
-const emit = defineEmits<{
-  connected: []
-  disconnected: []
-}>()
-
-const { t } = useI18n()
-const termEl = ref<HTMLDivElement | null>(null)
-const connected = ref(false)
-
-let term: Terminal | null = null
-let fitAddon: FitAddon | null = null
-let ws: WebSocket | null = null
-let sessionId = ''
-let resizeObserver: ResizeObserver | null = null
-let themeObserver: MutationObserver | null = null
-
-const termBg = ref(readToken('--term-bg', isDarkMode() ? '#18181b' : '#fafafa'))
-
-function isDarkMode(): boolean {
-  return document.documentElement.classList.contains('dark')
-}
-
-// 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
-}
-
-// 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 {
-  // wsBase() yields the page origin in browser mode (same-origin) or the
-  // resolved sidecar host in desktop mode (cross-origin). See apiBase.ts.
-  return `${wsBase()}/api/pty/${encodeURIComponent(ptyId)}/ws`
-}
-
-function sendResize() {
-  if (ws && ws.readyState === WebSocket.OPEN && term) {
-    ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }))
-  }
-}
-
-async function init() {
-  if (!termEl.value) return
-
-  term = new Terminal({
-    cursorBlink: true,
-    fontSize: 13,
-    fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', Menlo, Monaco, monospace",
-    theme: termTheme(),
-  })
-
-  fitAddon = new FitAddon()
-  term.loadAddon(fitAddon)
-  term.loadAddon(new WebLinksAddon())
-  term.open(termEl.value)
-  fitAddon.fit()
-
-  resizeObserver = new ResizeObserver(() => {
-    if (props.active) {
-      fitAddon?.fit()
-      sendResize()
-    }
-  })
-  resizeObserver.observe(termEl.value)
-
-  themeObserver = new MutationObserver(() => {
-    if (term) term.options.theme = termTheme()
-    termBg.value = readToken('--term-bg', isDarkMode() ? '#18181b' : '#fafafa')
-  })
-  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
-
-  try {
-    const result = await api.ptyCreate()
-    sessionId = result.id
-    connectWS(result.id)
-  } catch (err: unknown) {
-    const msg = err instanceof Error ? err.message : String(err)
-    term.writeln(`\r\n\x1b[31m${t('terminal.failedCreate', { msg })}\x1b[0m`)
-  }
-}
-
-function connectWS(ptyId: string) {
-  if (!term) return
-  const url = getWsUrl(ptyId)
-  // Token (when the server requires auth) rides as the second WS subprotocol —
-  // browsers can't set headers on a WS handshake. See auth.go.
-  const token = getAuthToken()
-  ws = token ? new WebSocket(url, ['jcode-auth', token]) : new WebSocket(url)
-  ws.binaryType = 'arraybuffer'
-
-  ws.onopen = () => {
-    connected.value = true
-    emit('connected')
-    sendResize()
-  }
-  ws.onclose = () => {
-    connected.value = false
-    emit('disconnected')
-    term?.writeln(`\r\n\x1b[33m${t('terminal.sessionEnded')}\x1b[0m`)
-  }
-  ws.onerror = () => {
-    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))
-    }
-  })
-}
-
-function cleanup() {
-  resizeObserver?.disconnect()
-  resizeObserver = null
-  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
-  }
-  if (sessionId) {
-    api.ptyKill(sessionId).catch(() => {})
-    sessionId = ''
-  }
-  if (term) {
-    term.dispose()
-    term = null
-  }
-  fitAddon = null
-  connected.value = false
-}
-
-// When tab becomes active, fit the terminal
-watch(() => props.active, async (active) => {
-  if (active && fitAddon && termEl.value) {
-    await nextTick()
-    requestAnimationFrame(() => {
-      fitAddon?.fit()
-      sendResize()
-    })
-  }
-})
-
-onMounted(init)
-onUnmounted(cleanup)
-</script>
-
-<template>
-  <div
-    class="term-instance"
-    :class="{ 'term-inactive': !active }"
-    :style="{ background: termBg }"
-    ref="termEl"
-  />
-</template>
-
-<style scoped>
-.term-instance {
-  width: 100%;
-  height: 100%;
-  padding: 4px 4px 0;
-}
-
-/* Hidden but still laid out — xterm needs to measure the container */
-.term-inactive {
-  visibility: hidden;
-  position: absolute;
-  pointer-events: none;
-  top: 0; left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-:deep(.xterm) {
-  height: 100%;
-  padding: 4px 6px;
-}
-:deep(.xterm-viewport) {
-  border-radius: 0;
-}
-:deep(.xterm-viewport::-webkit-scrollbar) {
-  width: 5px;
-}
-:deep(.xterm-viewport::-webkit-scrollbar-track) {
-  background: transparent;
-}
-:deep(.xterm-viewport::-webkit-scrollbar-thumb) {
-  background: var(--color-border);
-  border-radius: var(--radius-xs);
-}</style>
diff --git a/web-react/src/components/TerminalPanel.tsx b/web/src/components/TerminalPanel.tsx
similarity index 97%
rename from web-react/src/components/TerminalPanel.tsx
rename to web/src/components/TerminalPanel.tsx
index 86cb54a4..8901ff54 100644
--- a/web-react/src/components/TerminalPanel.tsx
+++ b/web/src/components/TerminalPanel.tsx
@@ -229,11 +229,12 @@ export function TerminalPanel({ onClose }: Props) {
         </div>
       </div>
 
-      {/* Terminal area. The xterm CSS + fit addon measure this container. */}
+      {/* Terminal area. Padding + term-bg live on .xterm via styles.css
+          (mirrors Vue TerminalInstance :deep(.xterm) rules). */}
       <div
         ref={termElRef}
         className="relative min-h-0 flex-1"
-        style={{ background: 'var(--color-background)', padding: '4px 4px 0' }}
+        style={{ background: 'var(--term-bg, var(--color-background))' }}
       />
     </div>
   )
diff --git a/web/src/components/TerminalPanel.vue b/web/src/components/TerminalPanel.vue
deleted file mode 100644
index aa8e8bcd..00000000
--- a/web/src/components/TerminalPanel.vue
+++ /dev/null
@@ -1,194 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { XMarkIcon, PlusIcon } from '@heroicons/vue/24/outline'
-import { useI18n } from 'vue-i18n'
-import TerminalInstance from './TerminalInstance.vue'
-
-const emit = defineEmits<{
-  close: []
-}>()
-
-const { t } = useI18n()
-
-interface Tab {
-  id: string
-  label: string
-}
-
-let nextId = 1
-function makeTab(): Tab {
-  return { id: String(nextId++), label: t('terminal.shell', { n: nextId - 1 }) }
-}
-
-const initialTab = makeTab()
-const tabs = ref<Tab[]>([initialTab])
-const activeId = ref(initialTab.id)
-
-function addTab() {
-  const tab = makeTab()
-  tabs.value.push(tab)
-  activeId.value = tab.id
-}
-
-function closeTab(id: string) {
-  const idx = tabs.value.findIndex(t => t.id === id)
-  if (idx === -1) return
-  tabs.value.splice(idx, 1)
-  if (tabs.value.length === 0) {
-    emit('close')
-    return
-  }
-  // Select adjacent tab
-  const newIdx = Math.min(idx, tabs.value.length - 1)
-  const nextTab = tabs.value[newIdx]
-  if (nextTab) activeId.value = nextTab.id
-}
-</script>
-
-<template>
-  <div class="flex flex-col h-full" style="background: var(--color-background)">
-    <!-- Tab bar -->
-    <div
-      class="flex items-center shrink-0 px-2 gap-1"
-      style="height: 32px; border-bottom: 1px solid var(--color-border); background: var(--color-background)"
-    >
-      <!-- Tabs -->
-      <div class="flex items-center gap-0.5 h-full flex-1 min-w-0 overflow-x-auto">
-        <!-- 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; keyboard-reachable (no tabindex=-1) and
-               revealed on focus-within so it's usable without a mouse. -->
-          <button
-            class="tab-close"
-            :aria-label="t('terminal.closeTab', { label: tab.label })"
-            @click.stop="closeTab(tab.id)"
-            @keydown.enter.stop.prevent="closeTab(tab.id)"
-            @keydown.space.stop.prevent="closeTab(tab.id)"
-          >
-            <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="t('terminal.newTerminal')" @click="addTab">
-          <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="t('terminal.closePanel')" @click="emit('close')">
-          <XMarkIcon class="w-3 h-3" />
-        </button>
-      </div>
-    </div>
-
-    <!-- Terminal area -->
-    <div class="flex-1 min-h-0 relative" style="background: var(--color-background)">
-      <TerminalInstance
-        v-for="tab in tabs"
-        :key="tab.id"
-        :active="tab.id === activeId"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.tab-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 0 8px;
-  height: 22px;
-  font-size: 11px;
-  font-family: var(--font-mono);
-  font-weight: 500;
-  border: none;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  cursor: pointer;
-  color: var(--color-muted-foreground);
-  white-space: nowrap;
-  transition: background 0.1s, color 0.1s;
-  flex-shrink: 0;
-}
-.tab-btn:hover {
-  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
-  color: var(--color-foreground);
-}
-.tab-active {
-  background: color-mix(in srgb, var(--color-foreground) 10%, transparent);
-  color: var(--color-foreground);
-}
-.tab-label {
-  pointer-events: none;
-}
-.tab-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-xs);
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  flex-shrink: 0;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.1s, background 0.1s;
-}
-/* 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-close:focus-visible {
-  opacity: 1;
-  background: color-mix(in srgb, var(--color-foreground) 15%, transparent);
-}
-.tab-active .tab-close {
-  opacity: 0.4;
-  pointer-events: auto;
-}
-.tab-active:hover .tab-close {
-  opacity: 0.7;
-}
-.ctrl-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  color: var(--color-muted-foreground);
-  transition: background 0.1s, color 0.1s;
-}
-.ctrl-btn:hover {
-  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
-  color: var(--color-foreground);
-}
-</style>
diff --git a/web-react/src/components/ThemeToggle.tsx b/web/src/components/ThemeToggle.tsx
similarity index 94%
rename from web-react/src/components/ThemeToggle.tsx
rename to web/src/components/ThemeToggle.tsx
index 0d59d90d..1d03e527 100644
--- a/web-react/src/components/ThemeToggle.tsx
+++ b/web/src/components/ThemeToggle.tsx
@@ -45,12 +45,12 @@ export function ThemeToggle({ compact = false }: { compact?: boolean }) {
         onClick={compact ? toggleDark : () => setOpen((v) => !v)}
         title={resolvedTheme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'}
         aria-label={resolvedTheme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'}
-        className={`flex items-center justify-center rounded-[var(--radius-md)] text-[var(--color-muted-foreground)] transition-colors hover:bg-[var(--neutral-wash-soft)] hover:text-[var(--color-foreground)] ${compact ? 'h-7 w-7' : 'h-[34px] w-[34px] hover:bg-[var(--color-muted)]'}`}
+        className={`flex items-center justify-center rounded-[var(--radius-md)] text-[var(--color-muted-foreground)] transition-colors hover:bg-[var(--neutral-wash-soft)] hover:text-[var(--color-foreground)] ${compact ? 'h-9 w-9 hover:bg-[var(--color-muted)]' : 'h-[34px] w-[34px] hover:bg-[var(--color-muted)]'}`}
       >
         {resolvedTheme === 'dark' ? (
-          <SunIcon className={compact ? 'h-3.5 w-3.5' : 'h-[18px] w-[18px]'} />
+          <SunIcon className="h-[18px] w-[18px]" />
         ) : (
-          <MoonIcon className={compact ? 'h-3.5 w-3.5' : 'h-[18px] w-[18px]'} />
+          <MoonIcon className="h-[18px] w-[18px]" />
         )}
       </button>
 
diff --git a/web/src/components/TokenGate.vue b/web/src/components/TokenGate.vue
deleted file mode 100644
index 93ea9290..00000000
--- a/web/src/components/TokenGate.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { api } from '@/composables/api'
-import { setAuthToken } from '@/composables/authToken'
-
-// Shown when the server is bound to a non-loopback host and requires a token
-// (reported via /api/health auth_required). The user pastes the token printed in
-// the server's startup banner; on success it is persisted and the app boots.
-const emit = defineEmits<{ authed: [] }>()
-const { t } = useI18n()
-
-const token = ref('')
-const showToken = ref(false)
-const error = ref('')
-const submitting = ref(false)
-
-async function submit() {
-  const candidate = token.value.trim()
-  if (!candidate) {
-    error.value = t('auth.required')
-    return
-  }
-  submitting.value = true
-  error.value = ''
-  try {
-    await api.authVerify(candidate) // skipAuth: a 401 surfaces here, not as expiry
-    setAuthToken(candidate)
-    emit('authed')
-  } catch (e) {
-    // Only a 401 means the token is wrong; transport/5xx is a server problem and
-    // should not be reported as bad credentials.
-    error.value = (e as { status?: number })?.status === 401 ? t('auth.invalid') : t('auth.serverError')
-  } finally {
-    submitting.value = false
-  }
-}
-</script>
-
-<template>
-  <div class="auth-gate" style="z-index: var(--z-modal)">
-    <!-- Drag strip so the macOS desktop shell stays draggable behind this overlay. -->
-    <div class="titlebar-drag" data-tauri-drag-region aria-hidden="true" />
-    <div class="auth-card">
-      <div class="auth-logo" aria-hidden="true">
-        <span class="auth-dim">[</span><span class="auth-accent">J</span><span class="auth-fg">CODE</span><span class="auth-dim">]</span>
-      </div>
-      <div class="auth-title">{{ t('auth.title') }}</div>
-      <div class="auth-msg">{{ t('auth.body') }}</div>
-      <form class="auth-form" @submit.prevent="submit">
-        <div class="auth-input-row">
-          <input
-            v-model="token"
-            :type="showToken ? 'text' : 'password'"
-            class="auth-input"
-            :placeholder="t('auth.placeholder')"
-            autocomplete="off"
-            autofocus
-          />
-          <button type="button" class="auth-toggle" @click="showToken = !showToken">
-            {{ showToken ? t('auth.hide') : t('auth.show') }}
-          </button>
-        </div>
-        <div v-if="error" class="auth-error">{{ error }}</div>
-        <button type="submit" class="auth-submit" :disabled="submitting">
-          {{ submitting ? t('auth.verifying') : t('auth.submit') }}
-        </button>
-      </form>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.auth-gate {
-  position: fixed;
-  inset: 0;
-  display: grid;
-  place-items: center;
-  padding: 24px;
-  background: var(--color-background);
-}
-.auth-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  max-width: 400px;
-  text-align: center;
-  padding: 32px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-2xl);
-  box-shadow: var(--shadow-lg);
-}
-.auth-logo {
-  font-family: var(--font-mono);
-  font-size: 26px;
-  font-weight: 700;
-  margin-bottom: 6px;
-  user-select: none;
-}
-.auth-dim { color: var(--color-muted-foreground); }
-.auth-accent { color: var(--color-primary); }
-.auth-fg { color: var(--color-foreground); }
-.auth-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--color-foreground);
-}
-.auth-msg {
-  font-size: 13px;
-  line-height: 1.6;
-  color: var(--color-muted-foreground);
-  margin-bottom: 6px;
-}
-.auth-form {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.auth-input-row {
-  display: flex;
-  gap: 8px;
-}
-.auth-input {
-  flex: 1;
-  min-width: 0;
-  padding: 9px 12px;
-  font-size: 13px;
-  font-family: var(--font-mono);
-  color: var(--color-foreground);
-  background: var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  outline: none;
-}
-.auth-input:focus { border-color: var(--color-primary); }
-.auth-toggle {
-  padding: 0 12px;
-  font-size: 12px;
-  color: var(--color-muted-foreground);
-  background: transparent;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  cursor: pointer;
-  white-space: nowrap;
-}
-.auth-error {
-  font-size: 12px;
-  color: var(--color-error-fg);
-  text-align: left;
-}
-.auth-submit {
-  margin-top: 2px;
-  padding: 9px 22px;
-  border: none;
-  border-radius: var(--radius-lg);
-  background: var(--color-primary);
-  color: var(--color-on-primary);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: opacity 0.15s;
-}
-.auth-submit:hover:not(:disabled) { opacity: 0.9; }
-.auth-submit:disabled { opacity: 0.6; cursor: default; }
-</style>
diff --git a/web/src/components/ToolCallCard.vue b/web/src/components/ToolCallCard.vue
deleted file mode 100644
index beeb9b30..00000000
--- a/web/src/components/ToolCallCard.vue
+++ /dev/null
@@ -1,637 +0,0 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { ChevronDownIcon } from '@heroicons/vue/24/outline'
-import { useI18n } from 'vue-i18n'
-import type { ToolCall, TodoItem } from '@/types/api'
-import { apiBase } from '@/composables/apiBase'
-import TaskList from './TaskList.vue'
-import AskUserCard from './AskUserCard.vue'
-
-defineOptions({ name: 'ToolCallCard' })
-
-const props = defineProps<{
-  tool: ToolCall
-  depth?: number
-}>()
-
-const { t } = useI18n()
-const expanded = ref(false)
-const isSubagent = computed(() => props.tool.name === 'subagent')
-const isAskUser = computed(() => props.tool.name === 'ask_user')
-const subagentExpanded = ref(true)
-
-// Display info: use backend-provided or fall back to name
-const displayTitle = computed(() => props.tool.displayInfo?.title || props.tool.name)
-const displaySubtitle = computed(() => props.tool.displayInfo?.subtitle || '')
-const isContextTool = computed(() => props.tool.displayInfo?.category === 'context')
-
-// Determine render type for expanded content
-const renderType = computed(() => {
-  const name = props.tool.name
-  if (name === 'execute') return 'terminal'
-  if (name === 'read') return 'file-viewer'
-  if (name === 'write') return 'file-viewer'
-  if (name === 'edit' || name === 'multi_edit') return 'diff'
-  if (name === 'grep') return 'search'
-  if (name === 'todowrite' || name === 'todoread') return 'todo'
-  if (name === 'load_skill') return 'skill'
-  if (name === 'team_list') return 'team-list'
-  if (name === 'team_send_message') return 'team-message'
-  if (name === 'team_create') return 'team-create'
-  if (name === 'team_spawn') return 'team-spawn'
-  if (name === 'browser_screenshot' && screenshotRef.value) return 'browser-shot'
-  return 'generic'
-})
-
-// Extract the image_ref emitted by browser_screenshot so the shot renders
-// inline (fetched over HTTP; the WS frame never carries the bytes).
-const screenshotRef = computed(() => {
-  const output = props.tool.output || ''
-  const m = output.match(/image_ref=(\/api\/browser\/shots\/[\w-]+\.png)/)
-  return m ? apiBase + m[1] : ''
-})
-
-// ─── Skill renderer helpers ───
-const skillData = computed(() => {
-  try {
-    const skillName = JSON.parse(props.tool.args).name || ''
-    const output = props.tool.output || ''
-    const descMatch = output.match(/description="([^"]*)"/)
-    return { name: skillName, description: descMatch ? descMatch[1] : '' }
-  } catch { return { name: '', description: '' } }
-})
-
-// ─── Team list renderer helpers ───
-interface TeamMember { name: string; status: string; type: string; progress: string }
-const teamListData = computed(() => {
-  const output = props.tool.output || ''
-  const teamMatch = output.match(/^Team: (.+?) \((\d+)/)
-  const teamName = teamMatch ? teamMatch[1] : ''
-  const members: TeamMember[] = []
-  for (const line of output.split('\n')) {
-    const m = line.match(/@(\S+)\s+status=(\S+)\s+type=(\S*)(.*)/)
-    if (m) {
-      const progress = m[4] ? m[4].trim() : ''
-      members.push({ name: m[1] ?? '', status: m[2] ?? '', type: m[3] ?? '', progress })
-    }
-  }
-  return { teamName, members }
-})
-
-function memberStatusColor(status: string): string {
-  if (status === 'running' || status === 'busy') return 'var(--color-accent-neutral)'
-  if (status === 'done' || status === 'finished') return 'var(--color-success-fg)'
-  if (status === 'error') return 'var(--color-destructive)'
-  return 'var(--color-muted-foreground)'
-}
-
-// ─── Team create renderer helpers ───
-const teamCreateData = computed(() => {
-  try {
-    const parsed = JSON.parse(props.tool.args)
-    const output = props.tool.output || ''
-    const leadMatch = output.match(/Lead agent: (\S+)/)
-    return {
-      teamName: parsed.team_name || '',
-      description: parsed.description || '',
-      lead: leadMatch ? leadMatch[1] : '',
-    }
-  } catch { return { teamName: '', description: '', lead: '' } }
-})
-
-// ─── Team spawn renderer helpers ───
-const teamSpawnData = computed(() => {
-  try {
-    const parsed = JSON.parse(props.tool.args)
-    const output = props.tool.output || ''
-    const idMatch = output.match(/\(ID: ([^)]+)\)/)
-    return {
-      name: parsed.name || '',
-      prompt: parsed.prompt || '',
-      agentType: parsed.agent_type || '',
-      id: idMatch ? idMatch[1] : '',
-    }
-  } catch { return { name: '', prompt: '', agentType: '', id: '' } }
-})
-
-// ─── Team message renderer helpers ───
-const teamMsgData = computed(() => {
-  try {
-    const parsed = JSON.parse(props.tool.args)
-    return {
-      to: parsed.to || '',
-      message: parsed.message || '',
-      summary: parsed.summary || '',
-    }
-  } catch { return { to: '', message: '', summary: '' } }
-})
-
-// ─── Todo renderer helpers ───
-const todoItems = computed((): TodoItem[] => {
-  try {
-    // Prefer output (final state), fall back to args (requested state)
-    const output = props.tool.output || ''
-    const jsonMatch = output.match(/\[.*\]/s)
-    if (jsonMatch) return JSON.parse(jsonMatch[0]) as TodoItem[]
-    const parsed = JSON.parse(props.tool.args)
-    return (parsed.todos || []) as TodoItem[]
-  } catch { return [] }
-})
-
-// ─── Terminal renderer helpers ───
-const terminalCommand = computed(() => {
-  try {
-    const parsed = JSON.parse(props.tool.args)
-    return parsed.command || ''
-  } catch { return '' }
-})
-
-// ─── Search renderer helpers ───
-const searchArgsDisplay = computed(() => {
-  try {
-    const parsed = JSON.parse(props.tool.args)
-    return Object.entries(parsed)
-      .filter(([, v]) => v !== undefined && v !== null && v !== '')
-      .map(([k, v]) => `${k}: ${typeof v === 'string' ? v : JSON.stringify(v)}`)
-      .join('\n')
-  } catch { return props.tool.args }
-})
-
-const searchResults = computed(() => {
-  const output = props.tool.output || ''
-  if (!output) return { lines: [], count: null }
-  const countMatch = output.match(/\((\d+) (?:matches found|results?)\)/)
-  const count = countMatch ? parseInt(countMatch[1] ?? '') : null
-  const lines = output.split('\n')
-    .filter(l => {
-      const t = l.trim()
-      return t && !t.startsWith('(')
-    })
-    .map(line => {
-      const m = line.match(/^([^:]+):(\d+):(.*)$/)
-      if (m) return { file: m[1] ?? '', lineNum: parseInt(m[2] ?? ''), content: m[3] ?? '', isRef: true }
-      return { file: '', lineNum: 0, content: line, isRef: false }
-    })
-  return { lines, count }
-})
-
-// ─── File viewer helpers ───
-const fileContent = computed(() => {
-  const name = props.tool.name
-  if (name === 'write') {
-    try {
-      const parsed = JSON.parse(props.tool.args)
-      return parsed.content || ''
-    } catch { return '' }
-  }
-  // For read — output is the file content (with line numbers from the tool)
-  return props.tool.output || ''
-})
-
-const fileLines = computed(() => {
-  if (!fileContent.value) return []
-  const raw = fileContent.value
-  const lines = raw.split('\n')
-  // The read tool outputs lines like "   1│content"
-  // For write tool, content is raw — we add our own line numbers
-  if (props.tool.name === 'read') {
-    return lines.map((line: string) => {
-      const match = line.match(/^\s*(\d+)│(.*)$/)
-      if (match) return { num: parseInt(match[1] ?? ''), text: match[2] ?? '' }
-      return { num: 0, text: line }
-    }).filter((_: { num: number; text: string }, i: number, arr: { num: number; text: string }[]) => !(i === arr.length - 1 && _.text === ''))
-  }
-  // Write tool: raw content with line numbers we generate
-  return lines.map((line: string, i: number) => ({ num: i + 1, text: line }))
-})
-
-// ─── Diff renderer helpers ───
-const diffData = computed(() => {
-  try {
-    const parsed = JSON.parse(props.tool.args)
-    const oldStr: string = parsed.old_string || ''
-    const newStr: string = parsed.new_string || ''
-    const isCreate = !oldStr && newStr
-
-    // For multi_edit, try to show edits array
-    if (props.tool.name === 'multi_edit' && parsed.edits) {
-      const edits = parsed.edits as Array<{ old_string: string; new_string: string }>
-      let totalAdd = 0, totalDel = 0
-      const sections: Array<{ type: 'add' | 'del' | 'context'; lines: string[] }> = []
-      for (const edit of edits) {
-        if (edit.old_string) {
-          const lines = edit.old_string.split('\n')
-          totalDel += lines.length
-          sections.push({ type: 'del', lines })
-        }
-        if (edit.new_string) {
-          const lines = edit.new_string.split('\n')
-          totalAdd += lines.length
-          sections.push({ type: 'add', lines })
-        }
-      }
-      return { added: totalAdd, deleted: totalDel, sections, isCreate: false }
-    }
-
-    const addedLines = newStr ? newStr.split('\n') : []
-    const deletedLines = oldStr ? oldStr.split('\n') : []
-
-    const sections: Array<{ type: 'add' | 'del' | 'context'; lines: string[] }> = []
-    if (deletedLines.length && !isCreate) {
-      sections.push({ type: 'del', lines: deletedLines })
-    }
-    if (addedLines.length) {
-      sections.push({ type: 'add', lines: addedLines })
-    }
-
-    return {
-      added: addedLines.length,
-      deleted: isCreate ? 0 : deletedLines.length,
-      sections,
-      isCreate,
-    }
-  } catch {
-    return { added: 0, deleted: 0, sections: [], isCreate: false }
-  }
-})
-
-function subagentName(): string {
-  try {
-    const parsed = JSON.parse(props.tool.args)
-    return parsed.name || parsed.description || 'subagent'
-  } catch {
-    return 'subagent'
-  }
-}
-
-function truncate(text: string, max: number): string {
-  // 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 {
-  try {
-    const parsed = JSON.parse(args)
-    return Object.entries(parsed)
-      .map(([k, v]) => `${k}: ${typeof v === 'string' ? v.slice(0, 80) : JSON.stringify(v).slice(0, 80)}`)
-      .join(', ')
-  } catch {
-    return args.slice(0, 120)
-  }
-}
-</script>
-
-<template>
-  <!-- Subagent card — borderless header, children indented below -->
-  <div v-if="isSubagent" class="my-1">
-    <!-- Header: no box, just a plain label row -->
-    <button
-      class="w-full flex items-center gap-1.5 pl-0 pr-1 py-1 text-left cursor-pointer hover:opacity-70 transition-opacity"
-      style="background: transparent"
-      @click="subagentExpanded = !subagentExpanded"
-    >
-      <span
-        class="text-[10px] shrink-0"
-        :class="{ 'animate-pulse': tool.status === 'running' }"
-        :style="{ color: tool.status === 'done' ? 'var(--color-accent-neutral)' : tool.status === 'error' ? 'var(--color-destructive)' : 'var(--color-muted-foreground)' }"
-      >
-        <template v-if="tool.status === 'running'">◈</template>
-        <template v-else-if="tool.status === 'done'">✓</template>
-        <template v-else>✗</template>
-      </span>
-      <span class="text-[10px] font-semibold uppercase tracking-wider" style="color: var(--color-muted-foreground)">{{ t('tool.subagentLabel') }}</span>
-      <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)">{{ t('tool.working') }}</span>
-      <span v-if="tool.children?.length" class="ml-auto text-[10px] tabular-nums" style="color: var(--color-muted-foreground)">{{ t('tool.calls', { n: tool.children.length }) }}</span>
-      <ChevronDownIcon
-        class="w-3 h-3 transition-transform shrink-0 ml-1"
-        :class="{ 'rotate-180': subagentExpanded }"
-        style="color: var(--color-muted-foreground)"
-      />
-    </button>
-
-    <!-- Children: same inset as regular tool content -->
-    <div v-if="subagentExpanded" class="mx-2 mt-1 mb-1">
-      <div v-if="tool.children?.length" class="max-h-[600px] overflow-y-auto">
-        <ToolCallCard
-          v-for="child in tool.children"
-          :key="child.id"
-          :tool="child"
-          :depth="(depth ?? 0) + 1"
-        />
-      </div>
-      <div v-else-if="tool.status === 'running'" class="py-2 text-xs animate-pulse" style="color: var(--color-muted-foreground)">
-        {{ t('tool.starting') }}
-      </div>
-      <div
-        v-if="tool.output"
-        class="overflow-hidden mt-1"
-        :style="{ borderRadius: 'var(--radius-xl)', border: '1px solid var(--color-border)' }"
-      >
-        <div class="px-3 py-2 text-xs font-mono whitespace-pre-wrap max-h-48 overflow-y-auto" style="color: var(--color-muted-foreground); background: var(--color-surface)">{{ truncate(tool.output, 800) }}</div>
-      </div>
-      <div v-if="tool.error" class="mt-1 px-3 py-2 text-xs font-mono whitespace-pre-wrap overflow-hidden" :style="{ borderRadius: 'var(--radius-xl)', border: '1px solid var(--color-destructive)', color: 'var(--color-destructive)' }">{{ tool.error }}</div>
-    </div>
-  </div>
-
-  <!-- Ask User — interactive question card (or static answer on replay) -->
-  <AskUserCard v-else-if="isAskUser" :tool="tool" />
-
-  <!-- Regular tool call -->
-  <div v-else class="my-1">
-    <!-- Trigger: only shown when collapsed -->
-    <button
-      v-if="!expanded"
-      class="w-full flex items-center gap-1.5 pl-0 pr-1 py-1 text-left cursor-pointer hover:opacity-70 transition-opacity"
-      style="background: transparent"
-      @click="expanded = true"
-    >
-      <span
-        class="text-xs font-medium"
-        :class="{ 'shimmer-running': tool.status === 'running' }"
-        :style="{ color: tool.status === 'error' ? 'var(--color-destructive)' : 'var(--color-muted-foreground)' }"
-      >{{ displayTitle }}</span>
-      <span
-        v-if="displaySubtitle"
-        class="text-xs font-mono truncate"
-        :style="isContextTool ? 'color: var(--color-muted-foreground)' : 'color: var(--color-accent-neutral)'"
-      >{{ displaySubtitle }}</span>
-      <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>
-        <span v-if="diffData.deleted" style="color: var(--color-error-fg)">-{{ diffData.deleted }}</span>
-      </span>
-    </button>
-
-    <!-- Expanded: header outside, content box below -->
-    <div v-else>
-      <!-- Header: plain text row, no box — click to collapse -->
-      <div class="flex items-center gap-1.5 pl-0 pr-1 py-1 cursor-pointer hover:opacity-70 transition-opacity" @click="expanded = false">
-        <span
-          class="text-xs font-medium"
-          :class="{ 'shimmer-running': tool.status === 'running' }"
-          :style="{ color: tool.status === 'error' ? 'var(--color-destructive)' : 'var(--color-muted-foreground)' }"
-        >{{ displayTitle }}</span>
-        <span
-          v-if="displaySubtitle"
-          class="text-xs font-mono truncate"
-          :style="isContextTool ? 'color: var(--color-muted-foreground)' : 'color: var(--color-accent-neutral)'"
-        >{{ displaySubtitle }}</span>
-        <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>
-          <span v-if="diffData.deleted" style="color: var(--color-error-fg)">-{{ diffData.deleted }}</span>
-        </span>
-      </div>
-      <!-- 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)' }"
-      >
-
-      <!-- ═══════ Terminal (execute) ═══════ -->
-      <div v-if="renderType === 'terminal'" class="px-3 py-2 font-mono text-xs max-h-72 overflow-y-auto" style="background: var(--color-muted)">
-        <div>
-          <span class="select-none" style="color: var(--color-muted-foreground)">$ </span>
-          <span style="color: var(--color-foreground)">{{ terminalCommand }}</span>
-        </div>
-        <div v-if="tool.displayOutput || tool.output" class="mt-1 whitespace-pre-wrap break-all" style="color: var(--color-muted-foreground)">{{ truncate(tool.displayOutput || tool.output || '', 2000) }}</div>
-        <div v-if="tool.error" class="mt-1 whitespace-pre-wrap" style="color: var(--color-error-fg)">{{ tool.error }}</div>
-        <div v-if="tool.status === 'running'" class="mt-1 animate-pulse" style="color: var(--color-muted-foreground)">{{ t('tool.running') }}</div>
-      </div>
-
-      <!-- ═══════ File Viewer (read/write) ═══════ -->
-      <div v-else-if="renderType === 'file-viewer'" class="max-h-72 overflow-y-auto" style="background: var(--color-surface)">
-        <table v-if="fileLines.length" class="w-full text-xs font-mono border-collapse">
-          <tr v-for="line in fileLines" :key="line.num" class="hover:bg-[var(--neutral-wash-soft)]">
-            <td class="text-right select-none pr-3 pl-2 py-0 w-1 align-top whitespace-nowrap" style="color: color-mix(in srgb, var(--color-muted-foreground), transparent 40%)">{{ line.num }}</td>
-            <td class="pr-3 py-0 whitespace-pre-wrap break-all" style="color: var(--color-foreground)">{{ line.text }}</td>
-          </tr>
-        </table>
-        <div v-else-if="tool.error" class="px-3 py-2 text-xs font-mono whitespace-pre-wrap" style="color: var(--color-destructive)">{{ tool.error }}</div>
-        <div v-else-if="tool.status === 'running'" class="px-3 py-3 text-xs animate-pulse" style="color: var(--color-muted-foreground)">{{ t('tool.loading') }}</div>
-        <div v-else class="px-3 py-2 text-xs italic" style="color: var(--color-muted-foreground)">{{ t('tool.noContent') }}</div>
-      </div>
-
-      <!-- ═══════ Diff Viewer (edit/multi_edit) ═══════ -->
-      <div v-else-if="renderType === 'diff'" class="max-h-72 overflow-y-auto" style="background: var(--color-surface)">
-        <table v-if="diffData.sections.length" class="w-full text-xs font-mono border-collapse">
-          <template v-for="(section, si) in diffData.sections" :key="si">
-            <tr
-              v-for="(line, li) in section.lines"
-              :key="`${si}-${li}`"
-              :style="section.type === 'del' ? 'background: var(--color-error-bg)' : section.type === 'add' ? 'background: var(--color-success-bg)' : ''"
-            >
-              <td class="text-right select-none pr-2 pl-2 py-0 w-1 align-top whitespace-nowrap"
-                :style="section.type === 'del' ? 'color: var(--color-error-fg)' : section.type === 'add' ? 'color: var(--color-success-fg)' : 'color: color-mix(in srgb, var(--color-muted-foreground), transparent 40%)'"
-              >{{ li + 1 }}</td>
-              <td class="px-1 py-0 w-4 select-none font-bold"
-                :style="section.type === 'del' ? 'color: var(--color-error-fg)' : section.type === 'add' ? 'color: var(--color-success-fg)' : ''"
-              >{{ section.type === 'del' ? '-' : section.type === 'add' ? '+' : ' ' }}</td>
-              <td class="pr-3 py-0 whitespace-pre-wrap break-all"
-                :style="section.type === 'del' ? 'color: var(--color-error-fg)' : section.type === 'add' ? 'color: var(--color-success-fg)' : 'color: var(--color-foreground)'"
-              >{{ line }}</td>
-            </tr>
-          </template>
-        </table>
-        <div v-else-if="tool.error" class="px-3 py-2 text-xs font-mono whitespace-pre-wrap" style="color: var(--color-destructive)">{{ tool.error }}</div>
-        <div v-else-if="tool.status === 'running'" class="px-3 py-3 text-xs animate-pulse" style="color: var(--color-muted-foreground)">{{ t('tool.applying') }}</div>
-        <div v-else class="px-3 py-2 text-xs italic" style="color: var(--color-muted-foreground)">{{ t('tool.noChanges') }}</div>
-        <div v-if="tool.output && !tool.error" class="px-3 py-1 text-[10px] font-mono" style="background: var(--color-surface); color: var(--color-muted-foreground)">{{ truncate(tool.output, 200) }}</div>
-      </div>
-
-      <!-- ═══════ Search Viewer (grep) ═══════ -->
-      <div v-else-if="renderType === 'search'" class="px-3 py-2 max-h-72 overflow-y-auto" style="background: var(--color-surface)">
-        <div v-if="searchArgsDisplay" class="text-[11px] font-mono whitespace-pre-wrap mb-2" style="color: var(--color-muted-foreground)">{{ searchArgsDisplay }}</div>
-        <template v-if="searchResults.lines.length">
-          <div v-for="(line, i) in searchResults.lines" :key="i" class="py-0.5">
-            <div v-if="line.isRef" class="flex items-baseline gap-1.5 text-[10px] font-mono">
-              <span style="color: var(--color-accent-neutral)">{{ line.file }}</span>
-              <span style="color: var(--color-muted-foreground)">:{{ line.lineNum }}</span>
-            </div>
-            <div class="text-xs font-mono whitespace-pre-wrap" style="color: var(--color-foreground)">{{ line.content }}</div>
-          </div>
-        </template>
-        <div v-else-if="tool.status === 'running'" class="py-1 text-xs animate-pulse" style="color: var(--color-muted-foreground)">{{ t('tool.searching') }}</div>
-        <div v-else-if="tool.error" class="py-1 text-xs font-mono whitespace-pre-wrap" style="color: var(--color-destructive)">{{ tool.error }}</div>
-        <div v-else class="py-1 text-xs italic" style="color: var(--color-muted-foreground)">{{ t('tool.noResults') }}</div>
-        <div v-if="searchResults.count !== null" class="mt-1.5 text-[10px] font-mono" style="color: var(--color-muted-foreground)">{{ t('tool.matchesFound', { n: searchResults.count }) }}</div>
-      </div>
-
-      <!-- ═══════ Todo List ═══════ -->
-      <div v-else-if="renderType === 'todo'" class="px-3 py-2 max-h-64 overflow-y-auto" style="background: var(--color-surface)">
-        <TaskList v-if="todoItems.length" :todos="todoItems" />
-        <div v-else-if="tool.status === 'running'" class="py-1 text-xs animate-pulse" style="color: var(--color-muted-foreground)">{{ t('tool.loading') }}</div>
-        <div v-else class="py-1 text-xs italic" style="color: var(--color-muted-foreground)">{{ t('tool.noTodos') }}</div>
-        <div v-if="tool.error" class="mt-1.5 text-xs font-mono whitespace-pre-wrap" style="color: var(--color-destructive)">{{ tool.error }}</div>
-      </div>
-
-      <!-- ═══════ Skill Loader ═══════ -->
-      <div v-else-if="renderType === 'skill'" class="px-3 py-2.5" style="background: var(--color-surface)">
-        <div class="flex items-center gap-2">
-          <span class="text-[11px] font-semibold font-mono" style="color: var(--color-foreground)">{{ skillData.name }}</span>
-          <span
-            v-if="tool.status === 'running'"
-            class="text-[10px] animate-pulse"
-            style="color: var(--color-muted-foreground)"
-          >{{ t('tool.loadingLower') }}</span>
-        </div>
-        <div
-          v-if="skillData.description"
-          class="mt-1 text-[11px] leading-snug"
-          style="color: var(--color-muted-foreground)"
-        >{{ skillData.description }}</div>
-        <div v-if="tool.error" class="mt-1 text-[11px] font-mono" style="color: var(--color-destructive)">{{ tool.error }}</div>
-      </div>
-
-      <!-- ═══════ Team List ═══════ -->
-      <div v-else-if="renderType === 'team-list'" class="px-3 py-2 max-h-64 overflow-y-auto" style="background: var(--color-surface)">
-        <div
-          v-if="teamListData.teamName"
-          class="flex items-center gap-2 mb-2 pb-1.5"
-          style="border-bottom: 1px solid var(--color-border)"
-        >
-          <span class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--color-muted-foreground)">{{ t('tool.teamLabel') }}</span>
-          <span class="text-xs font-mono font-semibold" style="color: var(--color-foreground)">{{ teamListData.teamName }}</span>
-          <span class="ml-auto text-[10px] tabular-nums" style="color: var(--color-muted-foreground)">{{ t('tool.members', { n: teamListData.members.length }) }}</span>
-        </div>
-        <div v-if="teamListData.members.length" class="space-y-0.5">
-          <div v-for="(member, idx) in teamListData.members" :key="`${member.name}-${idx}`" class="flex items-center gap-2 py-0.5">
-            <span class="text-[11px] w-3 text-center shrink-0" :style="{ color: memberStatusColor(member.status) }">●</span>
-            <span class="text-xs font-mono flex-1" style="color: var(--color-foreground)">@{{ member.name }}</span>
-            <span
-              class="text-[10px] font-mono px-1.5 py-0.5 rounded tabular-nums"
-              style="background: var(--color-muted); color: var(--color-muted-foreground)"
-            >{{ member.status }}</span>
-            <span v-if="member.type" class="text-[10px]" style="color: var(--color-muted-foreground)">{{ member.type }}</span>
-          </div>
-        </div>
-        <div v-else-if="tool.status === 'running'" class="py-1 text-xs animate-pulse" style="color: var(--color-muted-foreground)">{{ t('tool.loading') }}</div>
-        <div v-else class="py-1 text-xs italic" style="color: var(--color-muted-foreground)">{{ t('tool.noTeammates') }}</div>
-        <div v-if="tool.error" class="mt-1.5 text-xs font-mono" style="color: var(--color-destructive)">{{ tool.error }}</div>
-      </div>
-
-      <!-- ═══════ Team Create ═══════ -->
-      <div v-else-if="renderType === 'team-create'" class="px-3 py-2.5" style="background: var(--color-surface)">
-        <div class="flex items-center gap-2 mb-1">
-          <span class="text-xs font-mono font-semibold" style="color: var(--color-foreground)">{{ teamCreateData.teamName }}</span>
-          <span v-if="tool.status === 'done' && !tool.error" class="ml-auto text-[10px] font-semibold" style="color: var(--color-accent-neutral)">{{ t('tool.created') }}</span>
-          <span v-else-if="tool.status === 'running'" class="ml-auto text-[10px] animate-pulse" style="color: var(--color-muted-foreground)">{{ t('tool.creating') }}</span>
-        </div>
-        <div v-if="teamCreateData.description" class="text-[11px] leading-snug" style="color: var(--color-muted-foreground)">{{ teamCreateData.description }}</div>
-        <div v-if="teamCreateData.lead" class="mt-1.5 text-[10px] font-mono" style="color: var(--color-muted-foreground)">{{ t('tool.lead') }} {{ teamCreateData.lead }}</div>
-        <div v-if="tool.error" class="mt-1 text-xs font-mono" style="color: var(--color-destructive)">{{ tool.error }}</div>
-      </div>
-
-      <!-- ═══════ Team Spawn ═══════ -->
-      <div v-else-if="renderType === 'team-spawn'" class="px-3 py-2.5" style="background: var(--color-surface)">
-        <div class="flex items-center gap-2 mb-1">
-          <span class="text-xs font-mono font-semibold" style="color: var(--color-foreground)">@{{ teamSpawnData.name }}</span>
-          <span
-            v-if="teamSpawnData.agentType"
-            class="text-[10px] px-1.5 py-0.5 rounded"
-            style="background: var(--color-muted); color: var(--color-muted-foreground)"
-          >{{ teamSpawnData.agentType }}</span>
-          <span v-if="tool.status === 'done' && !tool.error" class="ml-auto text-[10px] font-semibold" style="color: var(--color-accent-neutral)">{{ t('tool.runningMark') }}</span>
-          <span v-else-if="tool.status === 'running'" class="ml-auto text-[10px] animate-pulse" style="color: var(--color-muted-foreground)">{{ t('tool.spawning') }}</span>
-        </div>
-        <div
-          v-if="teamSpawnData.prompt"
-          class="text-[11px] leading-snug"
-          style="color: var(--color-muted-foreground); font-style: italic; white-space: pre-wrap"
-        >{{ truncate(teamSpawnData.prompt, 150) }}</div>
-        <div v-if="teamSpawnData.id" class="mt-1.5 text-[10px] font-mono" style="color: var(--color-muted-foreground)">{{ t('tool.id') }} {{ teamSpawnData.id }}</div>
-        <div v-if="tool.error" class="mt-1 text-xs font-mono" style="color: var(--color-destructive)">{{ tool.error }}</div>
-      </div>
-
-      <!-- ═══════ Team Message ═══════ -->
-      <div v-else-if="renderType === 'team-message'" class="px-3 py-2.5" style="background: var(--color-surface)">
-        <!-- Header: recipient + sent status -->
-        <div class="flex items-center gap-2 mb-1.5">
-          <span class="text-[10px]" style="color: var(--color-muted-foreground)">→</span>
-          <span class="text-xs font-mono font-semibold" style="color: var(--color-foreground)">
-            {{ teamMsgData.to === '*' ? t('tool.all') : '@' + teamMsgData.to }}
-          </span>
-          <span
-            v-if="tool.status === 'done' && !tool.error"
-            class="ml-auto text-[10px] font-semibold"
-            style="color: var(--color-accent-neutral)"
-          >{{ t('tool.sent') }}</span>
-          <span
-            v-else-if="tool.status === 'running'"
-            class="ml-auto text-[10px] animate-pulse"
-            style="color: var(--color-muted-foreground)"
-          >{{ t('tool.sending') }}</span>
-        </div>
-        <!-- Summary -->
-        <div v-if="teamMsgData.summary" class="text-[11px] leading-snug font-medium mb-1" style="color: var(--color-foreground)">
-          {{ teamMsgData.summary }}
-        </div>
-        <!-- Message body (truncated) -->
-        <div
-          v-if="teamMsgData.message"
-          class="text-[11px] leading-snug"
-          style="color: var(--color-muted-foreground); font-style: italic; white-space: pre-wrap"
-        >{{ truncate(teamMsgData.message, 200) }}</div>
-        <div v-if="tool.error" class="mt-1.5 text-xs font-mono" style="color: var(--color-destructive)">{{ tool.error }}</div>
-      </div>
-
-      <!-- ═══════ Browser screenshot ═══════ -->
-      <div v-else-if="renderType === 'browser-shot'" class="px-3 py-2" style="background: var(--color-surface)">
-        <a :href="screenshotRef" target="_blank" rel="noopener">
-          <img :src="screenshotRef" alt="page screenshot" class="max-w-full rounded-md border" style="border-color: var(--color-border); max-height: 320px" />
-        </a>
-      </div>
-
-      <!-- ═══════ Generic fallback ═══════ -->
-      <div v-else class="ml-3 pl-3 border-l-2 text-xs font-mono py-2 max-h-64 overflow-y-auto"
-        :style="'border-color: ' + (tool.status === 'error' ? 'var(--color-destructive)' : 'var(--color-border)')"
-      >
-        <div class="mb-1.5">
-          <span class="text-[10px] uppercase tracking-wider" style="color: var(--color-muted-foreground)">{{ t('tool.args') }}</span>
-          <div class="mt-0.5" style="color: var(--color-muted-foreground)">{{ formatArgs(tool.args) }}</div>
-        </div>
-        <div v-if="tool.output" class="mt-2">
-          <span class="text-[10px] uppercase tracking-wider" style="color: var(--color-muted-foreground)">{{ t('tool.output') }}</span>
-          <div class="whitespace-pre-wrap mt-0.5" style="color: var(--color-muted-foreground)">{{ truncate(tool.output, 500) }}</div>
-        </div>
-        <div v-if="tool.error" class="mt-2">
-          <span class="text-[10px] uppercase tracking-wider" style="color: var(--color-destructive)">{{ t('tool.error') }}</span>
-          <div class="whitespace-pre-wrap mt-0.5" style="color: var(--color-destructive)">{{ tool.error }}</div>
-        </div>
-      </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-@keyframes shimmer-sweep {
-  0% { background-position: -200% center; }
-  100% { background-position: 200% center; }
-}
-.shimmer-running {
-  background: linear-gradient(
-    90deg,
-    var(--color-muted-foreground) 20%,
-    var(--color-foreground) 50%,
-    var(--color-muted-foreground) 80%
-  );
-  background-size: 200% auto;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: shimmer-sweep 1.8s linear infinite;
-}
-</style>
diff --git a/web-react/src/components/TopBar.tsx b/web/src/components/TopBar.tsx
similarity index 100%
rename from web-react/src/components/TopBar.tsx
rename to web/src/components/TopBar.tsx
diff --git a/web/src/components/TopBar.vue b/web/src/components/TopBar.vue
deleted file mode 100644
index 508135a5..00000000
--- a/web/src/components/TopBar.vue
+++ /dev/null
@@ -1,269 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, onMounted, watch } from 'vue'
-import { CommandLineIcon, ArrowsRightLeftIcon, FolderOpenIcon, ClipboardDocumentCheckIcon, ChevronDownIcon, RectangleStackIcon } from '@heroicons/vue/24/outline'
-import { useI18n } from 'vue-i18n'
-import { Menu as HMenu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
-import { api } from '@/composables/api'
-
-type PanelType = 'terminal' | 'files' | 'changes' | 'plan'
-
-const props = defineProps<{
-  isRunning: boolean
-  wsConnected: boolean
-  activePanel: 'none' | PanelType
-  terminalOpen: boolean
-}>()
-
-const emit = defineEmits<{
-  'toggle-panel': [panel: PanelType]
-}>()
-
-const { t } = useI18n()
-
-// Terminal is a bottom panel and can be open alongside a right-panel tab, so it
-// is tracked separately from activePanel (which reflects the right panel only).
-function isCurrent(panel: PanelType): boolean {
-  if (panel === 'terminal') return props.terminalOpen
-  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-accent-neutral)'
-  if (props.wsConnected) return 'var(--color-success)'
-  return 'var(--color-muted-foreground)'
-})
-
-const statusLabel = computed(() => {
-  if (props.isRunning) return t('topbar.status.running')
-  if (props.wsConnected) return t('topbar.status.connected')
-  return t('topbar.status.disconnected')
-})
-
-const panelButtons = computed(() => [
-  { panel: 'plan' as PanelType, icon: ClipboardDocumentCheckIcon, label: t('topbar.plan'), shortcut: '⇧⌘P' },
-  { panel: 'files' as PanelType, icon: FolderOpenIcon, label: t('topbar.files'), shortcut: '⇧⌘E' },
-  { panel: 'changes' as PanelType, icon: ArrowsRightLeftIcon, label: t('topbar.changes'), shortcut: '⇧⌘G' },
-  { panel: 'terminal' as PanelType, icon: CommandLineIcon, label: t('topbar.terminal'), shortcut: '⌘`' },
-])
-
-// Working-tree diff stat, shown inline on the Changes item. Fetched from the
-// real /api/diff endpoint; never fabricated (null on failure / clean tree).
-const diffStat = ref<{ additions: number; deletions: number } | null>(null)
-
-async function loadDiffStat() {
-  try {
-    const result = await api.diff('working')
-    const additions = result.entries.reduce((sum, e) => sum + e.additions, 0)
-    const deletions = result.entries.reduce((sum, e) => sum + e.deletions, 0)
-    diffStat.value = result.entries.length > 0 ? { additions, deletions } : null
-  } catch (err) {
-    console.error('Failed to fetch diff stat:', err)
-    diffStat.value = null
-  }
-}
-
-onMounted(loadDiffStat)
-watch(
-  () => props.isRunning,
-  (running, was) => {
-    if (was && !running) loadDiffStat()
-  },
-)
-</script>
-
-<template>
-  <!-- The single top-right control, floated into the title-bar zone. The panel
-       menu carries Plan/Files/Changes/Terminal; the dot on the button reflects
-       live connection status. Inline position:relative — headlessui's root
-       doesn't get the SFC scoped attribute, so the absolute menu would otherwise
-       anchor to the wrong ancestor. -->
-  <div class="topbar-control">
-    <HMenu as="div" class="panel-menu" style="position: relative" v-slot="{ open }">
-      <MenuButton
-        class="panel-menu-btn"
-        :class="{ open }"
-        :aria-label="t('topbar.panelsMenu', { status: statusLabel })"
-        :aria-expanded="open"
-        :title="t('topbar.panelsHint', { status: statusLabel })"
-        @click="loadDiffStat"
-      >
-        <RectangleStackIcon class="w-4 h-4" />
-        <ChevronDownIcon class="w-3 h-3 panel-menu-caret" />
-        <span class="status-dot panel-status-dot" :style="{ backgroundColor: statusColor }" />
-      </MenuButton>
-      <transition
-        enter-active-class="pop-enter-active"
-        enter-from-class="pop-enter-from"
-        leave-active-class="pop-leave-active"
-        leave-to-class="pop-leave-to"
-      >
-        <MenuItems class="panel-menu-items">
-          <MenuItem v-for="btn in panelButtons" :key="btn.panel" v-slot="{ active }">
-            <button
-              class="panel-menu-item"
-              :class="{ highlight: active, current: isCurrent(btn.panel) }"
-              :aria-current="isCurrent(btn.panel) ? 'true' : undefined"
-              @click="emit('toggle-panel', btn.panel)"
-            >
-              <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>
-                <span style="color: var(--color-error-fg)">-{{ diffStat.deletions }}</span>
-              </span>
-              <span class="pmi-key">{{ btn.shortcut }}</span>
-            </button>
-          </MenuItem>
-        </MenuItems>
-      </transition>
-    </HMenu>
-  </div>
-</template>
-
-<style scoped>
-/* Floated into the top-right of the window's title-bar zone (anchored to the
-   position:relative .app-shell). z above the drag strip so it stays clickable.
-   Sized larger now: this is the single window-wide panels menu, so it should
-   read as a real affordance rather than a 28px chip. */
-.topbar-control {
-  position: absolute;
-  top: 6px;
-  right: 14px;
-  /* Above the title-bar drag strip (45) so it stays clickable, but below
-     --z-modal (50) so the Settings overlay covers it. */
-  z-index: 46;
-  font-family: var(--font-sans);
-}
-
-.panel-menu {
-  position: relative;
-  display: inline-flex;
-}
-
-.panel-menu-btn {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  height: 34px;
-  padding: 0 9px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: var(--color-background);
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s, border-color 0.15s;
-}
-
-.panel-menu-btn:hover {
-  color: var(--color-foreground);
-  border-color: var(--color-foreground);
-}
-
-.panel-menu-btn.open {
-  background: var(--color-muted);
-  color: var(--color-foreground);
-}
-
-.panel-menu-caret {
-  opacity: 0.6;
-}
-
-/* Small live-status dot on the corner of the button. The border matches the
-   shell tone so the dot reads as a separate indicator. */
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: var(--radius-pill);
-  flex-shrink: 0;
-}
-.panel-status-dot {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  width: 7px;
-  height: 7px;
-  border: 1.5px solid var(--color-background);
-}
-
-.panel-menu-items {
-  position: absolute;
-  top: calc(100% + 6px);
-  right: 0;
-  min-width: 224px;
-  padding: 4px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-md);
-  z-index: var(--z-dropdown);
-  outline: none;
-}
-
-.panel-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 7px 8px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  color: var(--color-foreground);
-  font-size: 13px;
-  text-align: left;
-  cursor: pointer;
-}
-
-.panel-menu-item.highlight {
-  background: var(--color-muted);
-}
-
-.pmi-icon {
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-
-.panel-menu-item.current .pmi-icon {
-  color: var(--color-accent-neutral);
-}
-
-.pmi-label {
-  flex: 1;
-  white-space: nowrap;
-}
-
-.pmi-key {
-  color: var(--color-muted-foreground);
-  font-size: 11px;
-  letter-spacing: 0.04em;
-  flex-shrink: 0;
-}
-
-/* Working-tree diff stat shown inline on the Changes menu item. */
-.pmi-stat {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  flex-shrink: 0;
-}
-
-/* Menu transition */
-.pop-enter-active,
-.pop-leave-active {
-  transition: opacity 0.12s ease, transform 0.12s ease;
-}
-
-.pop-enter-from,
-.pop-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-</style>
diff --git a/web/src/components/UsageStatsPanel.vue b/web/src/components/UsageStatsPanel.vue
deleted file mode 100644
index efc56721..00000000
--- a/web/src/components/UsageStatsPanel.vue
+++ /dev/null
@@ -1,405 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { storeToRefs } from 'pinia'
-import { useUsageStore } from '@/stores/usage'
-import type { UsageDayBucket } from '@/types/api'
-
-const { t, locale } = useI18n()
-const usage = useUsageStore()
-const { stats, loading, error, rangeDays } = storeToRefs(usage)
-
-onMounted(() => {
-  if (!stats.value) usage.fetchStats()
-})
-
-// --- formatting --------------------------------------------------------------
-
-function fmtCompact(n: number): string {
-  try {
-    return new Intl.NumberFormat(locale.value, { notation: 'compact', maximumFractionDigits: 1 }).format(n)
-  } catch {
-    return String(n)
-  }
-}
-function fmtFull(n: number): string {
-  try {
-    return new Intl.NumberFormat(locale.value).format(n)
-  } catch {
-    return String(n)
-  }
-}
-function fmtPct(frac: number): string {
-  return `${Math.round(frac * 100)}%`
-}
-
-// Parse a local YYYY-MM-DD without UTC shifting.
-function parseLocal(s: string): Date {
-  const [y = 1970, m = 1, d = 1] = s.split('-').map(Number)
-  return new Date(y, m - 1, d)
-}
-function toKey(d: Date): string {
-  const m = String(d.getMonth() + 1).padStart(2, '0')
-  const day = String(d.getDate()).padStart(2, '0')
-  return `${d.getFullYear()}-${m}-${day}`
-}
-function fmtDayLabel(s: string): string {
-  try {
-    return new Intl.DateTimeFormat(locale.value, { month: 'short', day: 'numeric' }).format(parseLocal(s))
-  } catch {
-    return s
-  }
-}
-
-// --- derived cards -----------------------------------------------------------
-
-const cacheLabel = computed(() => {
-  const s = stats.value
-  if (!s || !s.cache_supported) return '—'
-  return fmtPct(s.cache_hit_rate)
-})
-const modelShare = computed(() => {
-  const s = stats.value
-  if (!s || !s.by_model.length) return null
-  return s.by_model[0]?.share ?? null
-})
-
-// --- heatmap (53 weeks x 7 days, ending today) -------------------------------
-
-const HEAT_WEEKS = 53
-const CELL = 11
-const GAP = 3
-const STEP = CELL + GAP
-
-interface HeatCell {
-  date: string
-  tokens: number
-  turns: number
-  level: number // 0-4
-  future: boolean
-}
-
-const heatmap = computed(() => {
-  const buckets = new Map<string, UsageDayBucket>()
-  let max = 0
-  for (const b of stats.value?.heatmap ?? []) {
-    buckets.set(b.date, b)
-    if (b.tokens > max) max = b.tokens
-  }
-  const today = new Date()
-  today.setHours(0, 0, 0, 0)
-  // Sunday of the current week is the top of the final column.
-  const lastSunday = new Date(today)
-  lastSunday.setDate(today.getDate() - today.getDay())
-  const start = new Date(lastSunday)
-  start.setDate(lastSunday.getDate() - (HEAT_WEEKS - 1) * 7)
-
-  const cols: HeatCell[][] = []
-  for (let w = 0; w < HEAT_WEEKS; w++) {
-    const col: HeatCell[] = []
-    for (let d = 0; d < 7; d++) {
-      const cur = new Date(start)
-      cur.setDate(start.getDate() + w * 7 + d)
-      const key = toKey(cur)
-      const b = buckets.get(key)
-      const tokens = b?.tokens ?? 0
-      col.push({
-        date: key,
-        tokens,
-        turns: b?.turns ?? 0,
-        level: levelFor(tokens, max),
-        future: cur.getTime() > today.getTime(),
-      })
-    }
-    cols.push(col)
-  }
-  return cols
-})
-
-function levelFor(tokens: number, max: number): number {
-  if (tokens <= 0 || max <= 0) return 0
-  // Log scale so a few huge days don't flatten everything else.
-  const r = Math.log(tokens + 1) / Math.log(max + 1)
-  return Math.min(4, Math.max(1, Math.ceil(r * 4)))
-}
-
-const HEAT_FILL = [
-  'color-mix(in srgb, var(--color-foreground) 7%, transparent)',
-  'color-mix(in srgb, var(--color-primary) 28%, transparent)',
-  'color-mix(in srgb, var(--color-primary) 48%, transparent)',
-  'color-mix(in srgb, var(--color-primary) 72%, transparent)',
-  'var(--color-primary)',
-]
-const heatWidth = HEAT_WEEKS * STEP - GAP
-const heatHeight = 7 * STEP - GAP
-
-function fillFor(c: HeatCell): string {
-  if (c.future) return 'transparent'
-  return HEAT_FILL[c.level] ?? 'transparent'
-}
-
-function cellTitle(c: HeatCell): string {
-  if (c.future) return ''
-  if (c.tokens <= 0) return `${fmtDayLabel(c.date)} · ${t('settings.usageStats.noActivity')}`
-  return `${fmtDayLabel(c.date)} · ${fmtCompact(c.tokens)} tokens · ${c.turns} ${t('settings.usageStats.turnsUnit')}`
-}
-
-// --- daily trend -------------------------------------------------------------
-
-const trend = computed(() => stats.value?.daily_trend ?? [])
-const trendMax = computed(() => Math.max(1, ...trend.value.map((d) => d.tokens)))
-function barTitle(d: UsageDayBucket): string {
-  return `${fmtDayLabel(d.date)} · ${fmtCompact(d.tokens)} tokens · ${d.turns} ${t('settings.usageStats.turnsUnit')}`
-}
-
-function setRange(days: number) {
-  if (rangeDays.value === days && stats.value) return
-  usage.fetchStats(days)
-}
-function shortName(path: string): string {
-  const parts = path.replace(/\/+$/, '').split('/')
-  return parts[parts.length - 1] || path
-}
-</script>
-
-<template>
-  <div class="space-y-5">
-    <div class="flex items-center justify-between gap-3 flex-wrap">
-      <div>
-        <h3 class="text-[13px] font-semibold tracking-tight" style="color: var(--color-foreground)">
-          {{ t('settings.usageStats.title') }}
-        </h3>
-        <p class="text-[11px] mt-0.5" style="color: var(--color-muted-foreground)">
-          {{ t('settings.usageStats.subtitle') }}
-        </p>
-      </div>
-      <!-- Range toggle -->
-      <div class="inline-flex p-0.5 rounded-md" style="background: var(--color-secondary)">
-        <button
-          v-for="d in [7, 30]"
-          :key="d"
-          class="px-2.5 h-7 text-[12px] rounded transition-colors cursor-pointer"
-          :style="rangeDays === d
-            ? { background: 'var(--color-background)', color: 'var(--color-foreground)', fontWeight: '500' }
-            : { background: 'transparent', color: 'var(--color-muted-foreground)' }"
-          @click="setRange(d)"
-        >
-          {{ t('settings.usageStats.lastNDays', { n: d }) }}
-        </button>
-      </div>
-    </div>
-
-    <div v-if="error" class="text-[12px] px-3 py-2 rounded-md" style="background: var(--color-warning-bg); color: var(--color-warning-fg)">
-      {{ error }}
-    </div>
-
-    <div v-else-if="loading && !stats" class="text-[12px] py-8 text-center" style="color: var(--color-muted-foreground)">
-      {{ t('common.loading') }}
-    </div>
-
-    <template v-else-if="stats">
-      <!-- Stat cards -->
-      <div class="grid grid-cols-2 sm:grid-cols-3 gap-2.5">
-        <div class="us-card us-card-lg">
-          <div class="us-label">{{ t('settings.usageStats.totalTokens') }}</div>
-          <div class="us-value" :title="fmtFull(stats.totals.total_tokens)">{{ fmtCompact(stats.totals.total_tokens) }}</div>
-        </div>
-        <div class="us-card us-card-lg">
-          <div class="us-label">{{ t('settings.usageStats.cacheHitRate') }}</div>
-          <div class="us-value" style="color: var(--color-primary)">{{ cacheLabel }}</div>
-        </div>
-        <div class="us-card us-card-lg">
-          <div class="us-label">{{ t('settings.usageStats.mostUsedModel') }}</div>
-          <div class="us-value us-value-sm" :title="stats.most_used_model">{{ stats.most_used_model || '—' }}</div>
-          <div v-if="modelShare != null" class="us-sub">{{ t('settings.usageStats.share', { pct: fmtPct(modelShare) }) }}</div>
-        </div>
-        <div class="us-card">
-          <div class="us-label">{{ t('settings.usageStats.sessions') }}</div>
-          <div class="us-value">{{ fmtFull(stats.totals.sessions) }}</div>
-        </div>
-        <div class="us-card">
-          <div class="us-label">{{ t('settings.usageStats.turns') }}</div>
-          <div class="us-value">{{ fmtFull(stats.totals.turns) }}</div>
-        </div>
-        <div class="us-card">
-          <div class="us-label">{{ t('settings.usageStats.activeDays') }}</div>
-          <div class="us-value">{{ stats.active_days }}</div>
-          <div class="us-sub">{{ t('settings.usageStats.streak', { n: stats.current_streak }) }}</div>
-        </div>
-      </div>
-
-      <!-- Token composition strip -->
-      <div class="us-panel">
-        <div class="us-panel-title">{{ t('settings.usageStats.tokenBreakdown') }}</div>
-        <div class="grid grid-cols-2 sm:grid-cols-4 gap-2.5 mt-2">
-          <div>
-            <div class="us-mini-label">{{ t('settings.usageStats.promptTokens') }}</div>
-            <div class="us-mini-value">{{ fmtCompact(stats.totals.prompt_tokens) }}</div>
-          </div>
-          <div>
-            <div class="us-mini-label">{{ t('settings.usageStats.cachedTokens') }}</div>
-            <div class="us-mini-value">{{ fmtCompact(stats.totals.cached_tokens) }}</div>
-          </div>
-          <div>
-            <div class="us-mini-label">{{ t('settings.usageStats.completionTokens') }}</div>
-            <div class="us-mini-value">{{ fmtCompact(stats.totals.completion_tokens) }}</div>
-          </div>
-          <div>
-            <div class="us-mini-label">{{ t('settings.usageStats.reasoningTokens') }}</div>
-            <div class="us-mini-value">{{ fmtCompact(stats.totals.reasoning_tokens) }}</div>
-          </div>
-        </div>
-        <div class="us-mini-hint">{{ t('settings.usageStats.tokenBreakdownHint') }}</div>
-      </div>
-
-      <!-- Activity heatmap -->
-      <div class="us-panel">
-        <div class="flex items-center justify-between">
-          <div class="us-panel-title">{{ t('settings.usageStats.heatmap') }}</div>
-          <div class="flex items-center gap-1 text-[10px]" style="color: var(--color-muted-foreground)">
-            <span>{{ t('settings.usageStats.less') }}</span>
-            <span v-for="(f, i) in HEAT_FILL" :key="i" class="inline-block rounded-[2px]" :style="{ width: '10px', height: '10px', background: f }" />
-            <span>{{ t('settings.usageStats.more') }}</span>
-          </div>
-        </div>
-        <div class="overflow-x-auto mt-2 pb-1">
-          <svg :viewBox="`0 0 ${heatWidth} ${heatHeight}`" :width="heatWidth" :height="heatHeight" role="img" :aria-label="t('settings.usageStats.heatmap')">
-            <template v-for="(col, w) in heatmap" :key="w">
-              <rect
-                v-for="(c, d) in col"
-                :key="d"
-                :x="w * STEP"
-                :y="d * STEP"
-                :width="CELL"
-                :height="CELL"
-                rx="2"
-                :fill="fillFor(c)"
-              >
-                <title>{{ cellTitle(c) }}</title>
-              </rect>
-            </template>
-          </svg>
-        </div>
-      </div>
-
-      <!-- Daily trend -->
-      <div class="us-panel">
-        <div class="us-panel-title">{{ t('settings.usageStats.dailyTrend') }}</div>
-        <div v-if="trend.length" class="flex items-end gap-[3px] mt-3" style="height: 120px">
-          <div
-            v-for="d in trend"
-            :key="d.date"
-            class="flex-1 rounded-t-[2px] transition-[height] min-w-[2px]"
-            :style="{ height: `${Math.max(2, (d.tokens / trendMax) * 100)}%`, background: 'var(--accent-fill)' }"
-            :title="barTitle(d)"
-          />
-        </div>
-        <div v-else class="text-[11px] py-6 text-center" style="color: var(--color-muted-foreground)">
-          {{ t('settings.usageStats.noData') }}
-        </div>
-      </div>
-
-      <!-- Breakdown bars -->
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-        <div class="us-panel">
-          <div class="us-panel-title">{{ t('settings.usageStats.byModel') }}</div>
-          <div class="space-y-2 mt-2">
-            <div v-for="m in stats.by_model.slice(0, 6)" :key="m.name" class="us-bar-row">
-              <div class="flex items-center justify-between text-[11px] mb-1">
-                <span class="truncate" style="color: var(--color-foreground)">{{ m.name }}</span>
-                <span style="color: var(--color-muted-foreground)">{{ fmtCompact(m.tokens) }}</span>
-              </div>
-              <div class="us-bar-track"><div class="us-bar-fill" :style="{ width: fmtPct(m.share) }" /></div>
-            </div>
-            <div v-if="!stats.by_model.length" class="us-empty">{{ t('settings.usageStats.noData') }}</div>
-          </div>
-        </div>
-        <div class="us-panel">
-          <div class="us-panel-title">{{ t('settings.usageStats.byProject') }}</div>
-          <div class="space-y-2 mt-2">
-            <div v-for="p in stats.by_project.slice(0, 6)" :key="p.name" class="us-bar-row">
-              <div class="flex items-center justify-between text-[11px] mb-1">
-                <span class="truncate" style="color: var(--color-foreground)" :title="p.name">{{ shortName(p.name) }}</span>
-                <span style="color: var(--color-muted-foreground)">{{ fmtCompact(p.tokens) }}</span>
-              </div>
-              <div class="us-bar-track"><div class="us-bar-fill" :style="{ width: fmtPct(p.share) }" /></div>
-            </div>
-            <div v-if="!stats.by_project.length" class="us-empty">{{ t('settings.usageStats.noData') }}</div>
-          </div>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-.us-card {
-  border-radius: var(--radius-md);
-  background: var(--color-secondary);
-  padding: 12px 14px;
-}
-.us-label {
-  font-size: 11px;
-  color: var(--color-muted-foreground);
-  margin-bottom: 4px;
-}
-.us-value {
-  font-size: 24px;
-  font-weight: 600;
-  line-height: 1.1;
-  color: var(--color-foreground);
-}
-.us-value-sm {
-  font-size: 16px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.us-sub {
-  font-size: 10px;
-  color: var(--color-muted-foreground);
-  margin-top: 4px;
-}
-.us-panel {
-  border-radius: var(--radius-md);
-  background: var(--color-secondary);
-  padding: 14px;
-}
-.us-panel-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--color-foreground);
-}
-.us-mini-label {
-  font-size: 10px;
-  color: var(--color-muted-foreground);
-}
-.us-mini-value {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--color-foreground);
-  margin-top: 2px;
-}
-.us-mini-hint {
-  margin-top: 10px;
-  font-size: 10px;
-  line-height: 1.4;
-  color: var(--color-muted-foreground);
-}
-.us-bar-track {
-  height: 6px;
-  border-radius: 3px;
-  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
-  overflow: hidden;
-}
-.us-bar-fill {
-  height: 100%;
-  border-radius: 3px;
-  background: var(--color-primary);
-}
-.us-empty {
-  font-size: 11px;
-  color: var(--color-muted-foreground);
-  padding: 8px 0;
-}
-</style>
diff --git a/web/src/components/WorkspacePicker.tsx b/web/src/components/WorkspacePicker.tsx
new file mode 100644
index 00000000..365f8b7e
--- /dev/null
+++ b/web/src/components/WorkspacePicker.tsx
@@ -0,0 +1,538 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  ArrowLeftIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  FolderIcon,
+  FolderOpenIcon,
+  MagnifyingGlassIcon,
+  PlusIcon,
+  ServerIcon,
+} from '@heroicons/react/24/outline'
+import { useTranslation } from 'react-i18next'
+import { useAppDispatch, useAppSelector } from '../app/hooks'
+import { chatActions, loadWorkspaceState, sessionActions } from '../app/store'
+import { api } from '../lib/api'
+import { isRemotePath, openRemoteConnect, parseRemoteLabel } from '../lib/remote'
+import { isTauri, pickFolder } from '../lib/useDesktop'
+
+interface WorkspaceNode {
+  path: string
+  name: string
+  remote: boolean
+}
+
+interface BrowseFolder {
+  name: string
+  path: string
+}
+
+export function WorkspacePicker({ placement = 'top' }: { placement?: 'top' | 'bottom' }) {
+  const { t } = useTranslation()
+  const dispatch = useAppDispatch()
+  const activePath = useAppSelector((s) => s.session.projectPath)
+  const tasks = useAppSelector((s) => s.session.tasks)
+  const isRunning = useAppSelector((s) => s.chat.isRunning)
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [missing, setMissing] = useState<Set<string>>(new Set())
+  const [browserOpen, setBrowserOpen] = useState(false)
+  const [browsePath, setBrowsePath] = useState('')
+  const [pathInput, setPathInput] = useState('')
+  const [folders, setFolders] = useState<BrowseFolder[]>([])
+  const [loadingFolders, setLoadingFolders] = useState(false)
+  const [switching, setSwitching] = useState(false)
+  const [error, setError] = useState('')
+  const rootRef = useRef<HTMLDivElement | null>(null)
+
+  const workspaces = useMemo<WorkspaceNode[]>(() => {
+    const map = new Map<string, WorkspaceNode>()
+    if (activePath) map.set(activePath, { path: activePath, name: workspaceName(activePath), remote: isRemotePath(activePath) })
+    for (const task of tasks) {
+      if (!task.project || map.has(task.project)) continue
+      map.set(task.project, { path: task.project, name: workspaceName(task.project), remote: isRemotePath(task.project) })
+    }
+    const q = query.trim().toLowerCase()
+    return [...map.values()]
+      .filter((node) => node.remote || !missing.has(node.path))
+      .filter((node) => !q || node.name.toLowerCase().includes(q) || node.path.toLowerCase().includes(q))
+      .sort((a, b) => {
+        if (a.path === activePath) return -1
+        if (b.path === activePath) return 1
+        return a.name.localeCompare(b.name)
+      })
+  }, [activePath, tasks, missing, query])
+
+  const activeName = activePath ? workspaceName(activePath) : t('workspace.none')
+  const activeRemote = isRemotePath(activePath)
+
+  const validateKnownPaths = useCallback(async () => {
+    const localPaths = [...new Set(tasks.map((t) => t.project).filter((p) => p && !isRemotePath(p)))]
+    if (activePath && !isRemotePath(activePath)) localPaths.push(activePath)
+    if (localPaths.length === 0) return
+    try {
+      const res = await api.validatePaths([...new Set(localPaths)])
+      setMissing(new Set(res.missing || []))
+    } catch {
+      // The picker remains usable; failed validation should not hide paths.
+    }
+  }, [activePath, tasks])
+
+  useEffect(() => {
+    void validateKnownPaths()
+  }, [validateKnownPaths])
+
+  useEffect(() => {
+    function onOpenPicker() {
+      setOpen(true)
+      void validateKnownPaths()
+    }
+    window.addEventListener('jcode:open-workspace-picker', onOpenPicker)
+    return () => window.removeEventListener('jcode:open-workspace-picker', onOpenPicker)
+  }, [validateKnownPaths])
+
+  useEffect(() => {
+    if (!open) return
+    function onDown(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) reset()
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') reset()
+    }
+    document.addEventListener('mousedown', onDown)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onDown)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open])
+
+  async function loadFolders(path?: string) {
+    setLoadingFolders(true)
+    setError('')
+    try {
+      const res = await api.browse(path)
+      setBrowsePath(res.current)
+      setPathInput(res.current)
+      setFolders(res.folders || [])
+      setBrowserOpen(true)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : t('workspace.openError'))
+    } finally {
+      setLoadingFolders(false)
+    }
+  }
+
+  async function switchTo(path: string) {
+    if (!path) return
+    setSwitching(true)
+    setError('')
+    try {
+      // Remote workspaces must reconnect through the SSH/Docker wizard.
+      if (isRemotePath(path)) {
+        const meta = parseRemoteLabel(path)
+        reset()
+        openRemoteConnect(meta ?? undefined)
+        return
+      }
+      if (path === activePath) {
+        const resp = await api.newSession()
+        dispatch(chatActions.clearChat())
+        dispatch(sessionActions.setCurrentSession(resp.session_id))
+        await dispatch(loadWorkspaceState())
+        reset()
+        return
+      }
+      const resp = await api.switchProject(path)
+      dispatch(chatActions.clearChat())
+      dispatch(sessionActions.setCurrentSession(''))
+      dispatch(sessionActions.setProjectPath(resp.pwd || path))
+      await dispatch(loadWorkspaceState())
+      reset()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : t('workspace.openError'))
+    } finally {
+      setSwitching(false)
+    }
+  }
+
+  /** "Open folder": native picker on desktop, in-app browser in web. */
+  async function openFolderAction() {
+    if (isTauri) {
+      try {
+        const path = await pickFolder(activePath && !isRemotePath(activePath) ? activePath : undefined)
+        if (path) await switchTo(path)
+        return
+      } catch {
+        // Native picker unavailable → fall through to in-app browser.
+      }
+    }
+    void loadFolders(activePath && !isRemotePath(activePath) ? activePath : undefined)
+  }
+
+  function openRemote() {
+    reset()
+    openRemoteConnect()
+  }
+
+  function reset() {
+    setOpen(false)
+    setQuery('')
+    setBrowserOpen(false)
+    setBrowsePath('')
+    setPathInput('')
+    setFolders([])
+    setError('')
+  }
+
+  function goUp() {
+    if (!browsePath || browsePath === '/') return
+    const parent = browsePath.replace(/\/+$/, '').split('/').slice(0, -1).join('/') || '/'
+    void loadFolders(parent)
+  }
+
+  return (
+    <div ref={rootRef} className="ws-bar" style={{ position: 'relative' }}>
+      <button
+        type="button"
+        disabled={isRunning || switching}
+        title={activePath}
+        onClick={(e) => {
+          e.stopPropagation()
+          setOpen((v) => {
+            if (!v) void validateKnownPaths()
+            return !v
+          })
+        }}
+        className="ws-pill ws-pill-action"
+      >
+        {activeRemote
+          ? <ServerIcon className="h-3.5 w-3.5 ws-pill-icon" />
+          : <FolderOpenIcon className="h-3.5 w-3.5 ws-pill-icon" />}
+        <span className="ws-name">{activeName}</span>
+        <ChevronDownIcon className={`h-3 w-3 ws-caret${open ? ' open' : ''}`} />
+      </button>
+
+      {open && (
+        <div className={`ws-panel ${placement === 'bottom' ? 'place-bottom' : 'place-top'}`}>
+          {browserOpen ? (
+            <div className="ws-browser">
+              <div className="ws-browser-head">
+                <button type="button" className="ws-back" onClick={() => setBrowserOpen(false)}>
+                  <ArrowLeftIcon className="h-3.5 w-3.5" />
+                </button>
+                <input
+                  value={pathInput}
+                  onChange={(e) => setPathInput(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') void loadFolders(pathInput)
+                  }}
+                  placeholder={t('projectSwitcher.pathPlaceholder')}
+                  className="ws-path-input"
+                />
+              </div>
+              <div className="ws-list">
+                {browsePath && browsePath !== '/' && (
+                  <button type="button" className="ws-row ws-folder" onClick={goUp}>
+                    <span className="ws-folder-icon">..</span>
+                  </button>
+                )}
+                {loadingFolders ? (
+                  <div className="ws-hint">{t('workspace.loading')}</div>
+                ) : folders.length === 0 ? (
+                  <div className="ws-hint">{t('workspace.noFolders')}</div>
+                ) : (
+                  folders.map((folder) => (
+                    <button key={folder.path} type="button" className="ws-row ws-folder" onClick={() => void loadFolders(folder.path)}>
+                      <FolderIcon className="h-3.5 w-3.5 ws-folder-icon" />
+                      <span className="ws-row-name">{folder.name}</span>
+                    </button>
+                  ))
+                )}
+              </div>
+              {error && <div className="ws-error">{error}</div>}
+              <div className="ws-browser-foot">
+                <span className="ws-cur-path">{browsePath || '~'}</span>
+                <button type="button" className="ws-open-btn" disabled={!browsePath || switching} onClick={() => void switchTo(browsePath)}>
+                  {t('workspace.open')}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="ws-listview">
+              <div className="ws-search">
+                <MagnifyingGlassIcon className="h-3 w-3 ws-search-icon" />
+                <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder={t('workspace.search')} className="ws-search-input" />
+              </div>
+              <div className="ws-list">
+                {workspaces.length === 0 ? (
+                  <div className="ws-hint">{t('workspace.nonePlural')}</div>
+                ) : (
+                  workspaces.map((node) => {
+                    const active = node.path === activePath
+                    return (
+                      <button
+                        key={node.path}
+                        type="button"
+                        disabled={switching}
+                        onClick={() => void switchTo(node.path)}
+                        className={`ws-row${active ? ' active' : ''}`}
+                      >
+                        {node.remote
+                          ? <ServerIcon className="h-3.5 w-3.5 ws-row-icon" />
+                          : <FolderIcon className="h-3.5 w-3.5 ws-row-icon" />}
+                        <span className="ws-row-name">{node.name}</span>
+                        {active && <CheckIcon className="h-3.5 w-3.5 ws-check" />}
+                      </button>
+                    )
+                  })
+                )}
+              </div>
+              {error && <div className="ws-error">{error}</div>}
+              <div className="ws-actions">
+                <button type="button" className="ws-action" onClick={() => void openFolderAction()}>
+                  <PlusIcon className="h-3.5 w-3.5" />
+                  <span>{t('workspace.openFolder')}</span>
+                </button>
+                <button type="button" className="ws-action" onClick={openRemote}>
+                  <ServerIcon className="h-3.5 w-3.5" />
+                  <span>{t('nav.remoteConnect')}</span>
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+      <style>{WS_CSS}</style>
+    </div>
+  )
+}
+
+/** Ported from web/src/components/WorkspacePicker.vue scoped styles. */
+const WS_CSS = `
+.ws-bar {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+.ws-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 9px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-lg);
+  font-size: 12.5px;
+  color: var(--color-foreground);
+  min-width: 0;
+}
+.ws-pill-icon { flex-shrink: 0; }
+.ws-pill-action {
+  max-width: 230px;
+  background: transparent;
+  cursor: pointer;
+  transition: background 0.15s, transform 0.06s ease;
+}
+.ws-pill-action .ws-pill-icon { color: var(--color-accent-neutral); }
+.ws-pill-action:hover:not(:disabled) { background: var(--color-muted); }
+.ws-pill-action:active:not(:disabled) { transform: translateY(0.5px); }
+.ws-pill-action:disabled { opacity: 0.55; cursor: not-allowed; }
+.ws-name {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ws-caret {
+  color: var(--color-muted-foreground);
+  flex-shrink: 0;
+  margin-left: 1px;
+  transition: transform 0.15s;
+}
+.ws-caret.open { transform: rotate(180deg); }
+.ws-panel {
+  position: absolute;
+  left: 0;
+  z-index: 40;
+  width: 320px;
+  max-width: 84vw;
+  max-height: min(54vh, 360px);
+  display: flex;
+  flex-direction: column;
+  padding: 6px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-lg);
+}
+.ws-panel.place-top { bottom: calc(100% + 6px); }
+.ws-panel.place-bottom { top: calc(100% + 6px); }
+.ws-browser, .ws-listview {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+.ws-search, .ws-browser-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  padding: 5px 8px;
+  margin-bottom: 4px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-background);
+}
+.ws-search-icon { color: var(--color-muted-foreground); flex-shrink: 0; }
+.ws-search-input, .ws-path-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 12.5px;
+  color: var(--color-foreground);
+}
+.ws-path-input { font-family: var(--font-mono); font-size: 11.5px; }
+.ws-search-input::placeholder, .ws-path-input::placeholder { color: var(--color-muted-foreground); }
+.ws-back {
+  display: grid;
+  place-items: center;
+  border: none;
+  background: transparent;
+  color: var(--color-muted-foreground);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.ws-back:hover { color: var(--color-foreground); }
+.ws-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 2px;
+}
+.ws-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 8px;
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  text-align: left;
+  color: var(--color-foreground);
+  font-size: 12.5px;
+  transition: background 0.12s;
+}
+.ws-row:hover { background: var(--color-muted); }
+.ws-row.active { background: var(--neutral-wash-soft, var(--color-muted)); }
+.ws-row:disabled { opacity: 0.55; cursor: not-allowed; }
+.ws-row-icon, .ws-folder-icon {
+  color: var(--color-muted-foreground);
+  flex-shrink: 0;
+}
+.ws-row.active .ws-row-icon { color: var(--color-accent-neutral); }
+.ws-row-name {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ws-folder .ws-folder-icon {
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+.ws-check { color: var(--color-accent-neutral); flex-shrink: 0; }
+.ws-hint {
+  padding: 14px 8px;
+  text-align: center;
+  font-size: 11.5px;
+  color: var(--color-muted-foreground);
+}
+.ws-error {
+  padding: 4px 8px;
+  font-size: 11px;
+  color: var(--color-destructive, #b91c1c);
+  flex-shrink: 0;
+}
+.ws-actions {
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: 2px;
+}
+.ws-action {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px;
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 12.5px;
+  color: var(--color-foreground);
+  transition: background 0.12s;
+}
+.ws-action:hover { background: var(--color-muted); }
+.ws-action svg { color: var(--color-muted-foreground); flex-shrink: 0; }
+.ws-browser-foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  margin-top: 4px;
+  padding-top: 6px;
+  border-top: 1px solid var(--color-border);
+}
+.ws-cur-path {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--color-muted-foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ws-open-btn {
+  flex-shrink: 0;
+  padding: 5px 12px;
+  border: none;
+  border-radius: var(--radius-md);
+  background: var(--color-accent-neutral);
+  color: var(--color-surface);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+}
+.ws-open-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.ws-open-btn:hover:not(:disabled) { opacity: 0.9; }
+`
+
+function workspaceName(path: string): string {
+  if (!path) return ''
+  if (path.startsWith('docker://')) {
+    const rest = path.slice('docker://'.length)
+    return rest.split('/')[0] || path
+  }
+  if (path.startsWith('ssh://')) {
+    const rest = path.slice('ssh://'.length)
+    const slash = rest.indexOf('/')
+    const host = slash >= 0 ? rest.slice(0, slash) : rest
+    const tail = slash >= 0 ? rest.slice(slash).split('/').filter(Boolean).at(-1) : ''
+    return tail ? `${tail} (${host})` : host
+  }
+  const parts = path.split('/').filter(Boolean)
+  return parts.at(-1) || path
+}
diff --git a/web/src/components/WorkspacePicker.vue b/web/src/components/WorkspacePicker.vue
deleted file mode 100644
index 97e9fbcf..00000000
--- a/web/src/components/WorkspacePicker.vue
+++ /dev/null
@@ -1,563 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, inject, onMounted } from 'vue'
-import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
-import {
-  FolderIcon,
-  FolderOpenIcon,
-  CheckIcon,
-  PlusIcon,
-  ServerIcon,
-  ChevronDownIcon,
-  MagnifyingGlassIcon,
-  ArrowLeftIcon,
-} from '@heroicons/vue/24/outline'
-import { useI18n } from 'vue-i18n'
-import { useChatStore } from '@/stores/chat'
-import { useProjectStore, isRemotePath, parseRemoteLabel } from '@/stores/project'
-import { useFolderBrowser } from '@/composables/useFolderBrowser'
-import { isTauri, pickFolder } from '@/composables/useDesktop'
-import type { RemoteMeta } from '@/types/api'
-
-withDefaults(defineProps<{
-  // Which way the panel opens relative to the trigger. The composer sits near
-  // the bottom of the viewport, so it opens upward by default.
-  placement?: 'top' | 'bottom'
-}>(), { placement: 'top' })
-
-const store = useChatStore()
-const projectStore = useProjectStore()
-const { t } = useI18n()
-
-// 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))
-const activeName = computed(() => {
-  const p = activePath.value
-  if (!p) return t('workspace.none')
-  return projectStore.nameForPath(p)
-})
-
-const workspaces = computed(() => {
-  const q = query.value.trim().toLowerCase()
-  // Drop local workspaces whose folder no longer exists on disk — selecting one
-  // would only surface "path does not exist or is not a directory". Remote
-  // (ssh://) labels are never validated locally, so they always stay listed.
-  const nodes = projectStore.projectsForTree.filter(
-    (n) => isRemotePath(n.path) || !projectStore.missingPaths.has(n.path),
-  )
-  if (!q) return nodes
-  return nodes.filter((n) => n.name.toLowerCase().includes(q) || n.path.toLowerCase().includes(q))
-})
-
-// Re-stat the known workspaces whenever the picker is shown, so a folder deleted
-// while the app was open disappears from the list. Runs on mount (the pill is
-// always mounted) and again each time the panel is opened.
-onMounted(() => projectStore.validateProjectPaths())
-function onOpen() {
-  projectStore.validateProjectPaths()
-}
-
-function isActive(path: string): boolean {
-  return path === activePath.value
-}
-
-// ─── Folder browser sub-view (shared logic, see useFolderBrowser) ───
-const {
-  showBrowser,
-  browsePath,
-  browseFolders,
-  browseLoading,
-  pathInput,
-  loadFolders,
-  openBrowser,
-  goUp,
-  handlePathSubmit,
-  resetBrowser,
-} = 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) {
-    // Keep the panel open and show why, instead of failing silently.
-    switchErr.value = projectStore.switchError || t('workspace.openError')
-    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()
-}
-
-async function pickWorkspace(node: { id: string; path: string }, close: () => void) {
-  // Remote workspaces must be reconnected through the SSH wizard.
-  if (isRemotePath(node.path)) {
-    const meta = parseRemoteLabel(node.path)
-    close()
-    reset()
-    if (meta) openRemoteConnect?.(meta)
-    return
-  }
-  if (node.path === activePath.value) {
-    // Same workspace → start a fresh task in it.
-    await store.newSession()
-    reset()
-    close()
-    return
-  }
-  await applyLocalSwitch(node.path, close)
-}
-
-// "Open folder": on the desktop, use the native OS folder picker; in the
-// browser, fall back to the in-app folder browser sub-view.
-async function openFolderAction(close: () => void) {
-  if (isTauri) {
-    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()
-}
-
-function openRemote(close: () => void) {
-  close()
-  reset()
-  openRemoteConnect?.()
-}
-
-function reset() {
-  resetBrowser()
-  query.value = ''
-  switchErr.value = ''
-}
-
-</script>
-
-<template>
-  <div class="ws-bar">
-  <!-- Inline position:relative — headlessui's Popover root doesn't receive the
-       SFC scoped attribute, so the scoped `.ws-popover { position: relative }`
-       never applies and the absolutely-positioned panel would otherwise anchor
-       to the composer card (landing far below the pill). Inline style is the
-       reliable way to make the panel sit right next to its trigger. -->
-  <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" @click="onOpen">
-        <component :is="activeIsRemote ? ServerIcon : FolderOpenIcon" class="w-3.5 h-3.5 ws-pill-icon" />
-        <span class="ws-name">{{ activeName }}</span>
-        <ChevronDownIcon class="w-3 h-3 ws-caret" />
-      </button>
-    </PopoverButton>
-
-    <transition
-      enter-active-class="pop-enter-active"
-      enter-from-class="pop-enter-from"
-      leave-active-class="pop-leave-active"
-      leave-to-class="pop-leave-to"
-    >
-      <PopoverPanel
-        v-slot="{ close }"
-        class="ws-panel"
-        :class="placement === 'top' ? 'place-top' : 'place-bottom'"
-      >
-        <!-- Folder browser -->
-        <div v-if="showBrowser" class="ws-browser">
-          <div class="ws-browser-head">
-            <button class="ws-back" @click="showBrowser = false"><ArrowLeftIcon class="w-3.5 h-3.5" /></button>
-            <input
-              v-model="pathInput"
-              class="ws-path-input"
-              :placeholder="t('projectSwitcher.pathPlaceholder')"
-              @keydown.enter="handlePathSubmit"
-            />
-          </div>
-          <div class="ws-list">
-            <button
-              v-if="browsePath && browsePath !== '/'"
-              class="ws-row ws-folder"
-              @click="goUp"
-            >
-              <span class="ws-folder-icon">..</span>
-            </button>
-            <div v-if="browseLoading" class="ws-hint">{{ t('workspace.loading') }}</div>
-            <div v-else-if="browseFolders.length === 0" class="ws-hint">{{ t('workspace.noFolders') }}</div>
-            <button
-              v-for="folder in browseFolders"
-              :key="folder.path"
-              class="ws-row ws-folder"
-              @click="loadFolders(folder.path)"
-            >
-              <FolderIcon class="w-3.5 h-3.5 ws-folder-icon" />
-              <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" :disabled="!browsePath" @click="applyLocalSwitch(browsePath, close)">{{ t('workspace.open') }}</button>
-          </div>
-        </div>
-
-        <!-- Workspace list -->
-        <div v-else class="ws-listview">
-          <div class="ws-search">
-            <MagnifyingGlassIcon class="w-3 h-3 ws-search-icon" />
-            <input v-model="query" class="ws-search-input" :placeholder="t('workspace.search')" />
-          </div>
-
-          <div class="ws-list">
-            <div v-if="workspaces.length === 0" class="ws-hint">{{ t('workspace.nonePlural') }}</div>
-            <button
-              v-for="node in workspaces"
-              :key="node.path"
-              class="ws-row"
-              :class="{ active: isActive(node.path) }"
-              @click="pickWorkspace(node, close)"
-            >
-              <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>
-              <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)">
-              <PlusIcon class="w-3.5 h-3.5" /> <span>{{ t('workspace.openFolder') }}</span>
-            </button>
-            <button class="ws-action" @click="openRemote(close)">
-              <ServerIcon class="w-3.5 h-3.5" /> <span>{{ t('nav.remoteConnect') }}</span>
-            </button>
-          </div>
-        </div>
-      </PopoverPanel>
-    </transition>
-  </Popover>
-  </div>
-</template>
-
-<style scoped>
-.ws-bar {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-.ws-popover {
-  position: relative;
-  display: inline-flex;
-  min-width: 0;
-}
-
-/* Two distinct pills: an interactive workspace selector + a read-only branch. */
-.ws-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 28px;
-  padding: 0 9px;
-  border: 1px solid transparent;
-  border-radius: var(--radius-lg);
-  font-size: 12.5px;
-  color: var(--color-foreground);
-  min-width: 0;
-}
-.ws-pill-icon {
-  flex-shrink: 0;
-}
-
-.ws-pill-action {
-  max-width: 230px;
-  background: transparent;
-  cursor: pointer;
-  transition: background 0.15s, transform 0.06s ease;
-}
-.ws-pill-action .ws-pill-icon {
-  color: var(--color-accent-neutral);
-}
-.ws-pill-action:hover:not(:disabled) {
-  background: var(--color-muted);
-}
-.ws-pill-action:active:not(:disabled) {
-  transform: translateY(0.5px);
-}
-.ws-pill-action:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-.ws-name {
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ws-caret {
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-  margin-left: 1px;
-}
-
-.ws-panel {
-  position: absolute;
-  left: 0;
-  z-index: 40;
-  width: 320px;
-  max-width: 84vw;
-  /* Cap the height so the popover never overflows a short window (it would
-     otherwise get clipped); the list region scrolls instead. */
-  max-height: min(54vh, 360px);
-  display: flex;
-  flex-direction: column;
-  padding: 6px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-lg);
-}
-/* Both panel views (workspace list + folder browser) are flex columns so their
-   middle list region is the part that scrolls within the capped height. */
-.ws-browser,
-.ws-listview {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  flex: 1 1 auto;
-}
-.ws-panel.place-top {
-  bottom: calc(100% + 6px);
-}
-.ws-panel.place-bottom {
-  top: calc(100% + 6px);
-}
-
-/* Search */
-.ws-search,
-.ws-browser-head {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-  padding: 5px 8px;
-  margin-bottom: 4px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: var(--color-background);
-}
-.ws-search-icon {
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-.ws-search-input,
-.ws-path-input {
-  flex: 1;
-  min-width: 0;
-  border: none;
-  outline: none;
-  background: transparent;
-  font-size: 12.5px;
-  color: var(--color-foreground);
-}
-.ws-path-input {
-  font-family: var(--font-mono);
-  font-size: 11.5px;
-}
-.ws-search-input::placeholder,
-.ws-path-input::placeholder {
-  color: var(--color-muted-foreground);
-}
-.ws-back {
-  display: grid;
-  place-items: center;
-  border: none;
-  background: transparent;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
-  flex-shrink: 0;
-}
-.ws-back:hover {
-  color: var(--color-foreground);
-}
-
-/* List */
-.ws-list {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 2px;
-}
-.ws-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 8px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  text-align: left;
-  color: var(--color-foreground);
-  font-size: 12.5px;
-  transition: background 0.12s;
-}
-.ws-row:hover {
-  background: var(--color-muted);
-}
-.ws-row.active {
-  background: var(--neutral-wash-soft);
-}
-.ws-row-icon,
-.ws-folder-icon {
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-.ws-row.active .ws-row-icon {
-  color: var(--color-accent-neutral);
-}
-.ws-row-name {
-  flex: 1;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ws-folder .ws-folder-icon {
-  font-family: var(--font-mono);
-  font-size: 12px;
-}
-.ws-check {
-  color: var(--color-accent-neutral);
-  flex-shrink: 0;
-}
-.ws-hint {
-  padding: 14px 8px;
-  text-align: center;
-  font-size: 11.5px;
-  color: var(--color-muted-foreground);
-}
-
-/* Action rows */
-.ws-actions {
-  margin-top: 4px;
-  padding-top: 4px;
-  border-top: 1px solid var(--color-border);
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  gap: 2px;
-}
-.ws-action {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 8px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  font-size: 12.5px;
-  color: var(--color-foreground);
-  transition: background 0.12s;
-}
-.ws-action:hover {
-  background: var(--color-muted);
-}
-.ws-action svg {
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-
-/* Browser footer */
-.ws-browser-foot {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-  margin-top: 4px;
-  padding-top: 6px;
-  border-top: 1px solid var(--color-border);
-}
-.ws-cur-path {
-  flex: 1;
-  min-width: 0;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--color-muted-foreground);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ws-open-btn {
-  flex-shrink: 0;
-  padding: 5px 14px;
-  border: none;
-  border-radius: var(--radius-md);
-  background: var(--color-accent-neutral);
-  color: var(--color-surface);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: opacity 0.15s;
-}
-.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,
-.pop-leave-active {
-  transition: opacity 0.12s ease, transform 0.12s ease;
-}
-.pop-enter-from,
-.pop-leave-to {
-  opacity: 0;
-  transform: translateY(4px);
-}
-.ws-panel.place-bottom.pop-enter-from,
-.ws-panel.place-bottom.pop-leave-to {
-  transform: translateY(-4px);
-}
-</style>
diff --git a/web/src/composables/api.ts b/web/src/composables/api.ts
deleted file mode 100644
index d2aad8b4..00000000
--- a/web/src/composables/api.ts
+++ /dev/null
@@ -1,384 +0,0 @@
-// API client for jcode backend
-import type { ModelsResponse, AgentMode, ExecResponse, DiffResponse, WorkspaceInfo, GitBranchesResponse, GitCheckoutResponse, TaskItem, TaskMetaPatch, MCPListResponse, MCPServerRequest, MCPLoginStatus, BrowseResponse, SSHListResponse, SkillInfo, SlashCommandInfo, TodoItem, Goal, SessionItem, SessionEntry, FileItem, SetupProvider, SetupModel, ProviderDetail, ProviderAdvanced, CustomModelDetail, ValidateResult, CatalogModel, ModelStateResponse, ChatImage, AskUserAnswer, AskUserRequestData, ApprovalRequestData, RemoteConnectRequest, RemoteConnectResponse, RemoteListDirResponse, RemoteBindResponse, DockerContainersResponse, UsageStats, TaskStats, TokenUpdateData } from '@/types/api'
-import type { AutomationItem, AutomationRun, AutomationTemplate, AutomationCreate, Automation } from '@/types/automation'
-import { apiBase } from './apiBase'
-import { getAuthToken, notifyAuthExpired } from './authToken'
-
-interface RequestOptions extends RequestInit {
-  /**
-   * Skip auto Authorization injection AND the global 401 handler. Used by
-   * authVerify, where a 401 means "wrong token typed in the login page" and must
-   * surface as an error in that form — not clear the token / re-trigger the gate.
-   */
-  skipAuth?: boolean
-}
-
-async function request<T>(path: string, options?: RequestOptions): Promise<T> {
-  const token = getAuthToken()
-  // Normalize to a Headers instance so every HeadersInit form (plain object,
-  // Headers, tuple array) is preserved rather than silently dropped.
-  const headers = new Headers(options?.headers)
-  if (!headers.has('Content-Type')) headers.set('Content-Type', 'application/json')
-  if (token && !options?.skipAuth && !headers.has('Authorization')) {
-    headers.set('Authorization', `Bearer ${token}`)
-  }
-  const resp = await fetch(`${apiBase}${path}`, { ...options, headers })
-  if (resp.status === 401 && !options?.skipAuth) {
-    notifyAuthExpired()
-  }
-  if (!resp.ok) {
-    const body = await resp.json().catch(() => ({ error: resp.statusText }))
-    // Attach the status so callers can distinguish 401 (bad token) from
-    // transport/5xx failures and react differently.
-    const err = new Error(body.error || `HTTP ${resp.status}`) as Error & { status?: number }
-    err.status = resp.status
-    throw err
-  }
-  return resp.json()
-}
-
-export const api = {
-  truncateHistory: (beforeUserMessage: number) =>
-    request<{ status: string; session_id: string }>('/api/history/truncate', {
-      method: 'POST',
-      body: JSON.stringify({ before_user_message: beforeUserMessage }),
-    }),
-  health: () =>
-    request<{ status: string; version: string; pwd: string; provider: string; model: string; mode: string; session_id: string; running: boolean; image_support?: boolean; needs_setup?: boolean; auth_required?: boolean }>(
-      '/api/health',
-    ),
-  // authVerify validates a token typed into the login gate. skipAuth keeps a 401
-  // (wrong token) from tripping the global expiry handler — the gate shows it.
-  authVerify: (token: string) =>
-    request<{ ok: boolean }>('/api/auth/verify', {
-      method: 'POST',
-      skipAuth: true,
-      headers: { Authorization: `Bearer ${token}` },
-    }),
-  status: () =>
-    request<{
-      running: boolean
-      ws_clients: number
-      pwd: string
-      provider: string
-      model: string
-      mode: string
-      token?: TokenUpdateData
-    }>('/api/status'),
-  config: () => request<{ provider: string; model: string; max_iterations: number }>('/api/config'),
-  usageStats: (days = 30) => request<UsageStats>(`/api/usage/stats?days=${days}`),
-  taskStats: (id: string) => request<TaskStats>(`/api/tasks/${encodeURIComponent(id)}/stats`),
-  todos: () => request<TodoItem[]>('/api/todos'),
-  goal: () => request<Goal | null>('/api/goal'),
-  setGoal: (objective: string, start = true) =>
-    request<Goal>('/api/goal', {
-      method: 'POST',
-      body: JSON.stringify({ objective, start }),
-    }),
-  clearGoal: () => request<{ status: string }>('/api/goal', { method: 'DELETE' }),
-  sessions: () => request<SessionItem[]>('/api/sessions'),
-  session: (id: string) => request<SessionEntry[]>(`/api/sessions/${encodeURIComponent(id)}`),
-  deleteSession: (id: string) =>
-    request<{ status: string }>(`/api/sessions/${encodeURIComponent(id)}`, { method: 'DELETE' }),
-  newSession: (sessionId?: string) =>
-    request<{ status: string; session_id: string }>('/api/sessions', {
-      method: 'POST',
-      body: sessionId ? JSON.stringify({ session_id: sessionId }) : undefined,
-    }),
-  files: (path?: string) => {
-    const q = path ? `?path=${encodeURIComponent(path)}` : ''
-    return request<FileItem[]>(`/api/files${q}`)
-  },
-  fileContent: (path: string) =>
-    request<{ path: string; content: string }>(`/api/files/content?path=${encodeURIComponent(path)}`),
-  chat: (message: string, mode?: AgentMode, sessionId?: string, images?: ChatImage[]) =>
-    request<{ status: string; session_id: string }>('/api/chat', {
-      method: 'POST',
-      body: JSON.stringify({
-        message,
-        mode,
-        session_id: sessionId || undefined,
-        images: images && images.length > 0 ? images : undefined,
-      }),
-    }),
-  approval: (id: string, approved: boolean, approveAll = false, taskId?: string) =>
-    request<{ status: string }>('/api/approval', {
-      method: 'POST',
-      body: JSON.stringify({ id, approved, approve_all: approveAll, task_id: taskId }),
-    }),
-  askUser: (id: string, answers: AskUserAnswer[], taskId?: string) =>
-    request<{ status: string }>('/api/ask', {
-      method: 'POST',
-      body: JSON.stringify({ id, answers, task_id: taskId }),
-    }),
-  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', {
-      method: 'POST',
-      body: JSON.stringify({ provider, model }),
-    }),
-  switchMode: (mode: string) =>
-    request<{ status: string; mode: string }>('/api/mode', {
-      method: 'POST',
-      body: JSON.stringify({ mode }),
-    }),
-  exec: (command: string) =>
-    request<ExecResponse>('/api/exec', {
-      method: 'POST',
-      body: JSON.stringify({ command }),
-    }),
-  diff: (mode?: string) => {
-    const q = mode ? `?mode=${encodeURIComponent(mode)}` : ''
-    return request<DiffResponse>(`/api/diff${q}`)
-  },
-  workspace: () => request<WorkspaceInfo>('/api/workspace'),
-  gitBranches: () => request<GitBranchesResponse>('/api/git/branches'),
-  gitCheckout: (branch: string, create = false, strategy: '' | 'stash' | 'force' = '') =>
-    request<GitCheckoutResponse>('/api/git/checkout', {
-      method: 'POST',
-      body: JSON.stringify({ branch, create, strategy }),
-    }),
-  tasks: () => request<TaskItem[]>('/api/tasks'),
-  updateTask: (id: string, patch: TaskMetaPatch) =>
-    request<TaskItem>(`/api/tasks/${encodeURIComponent(id)}`, {
-      method: 'PATCH',
-      body: JSON.stringify(patch),
-    }),
-  mcpList: () => request<MCPListResponse>('/api/mcp'),
-  mcpToggle: (name: string, enabled: boolean) =>
-    request<{ status: string }>(`/api/mcp/${encodeURIComponent(name)}/toggle`, {
-      method: 'POST',
-      body: JSON.stringify({ enabled }),
-    }),
-  mcpCreate: (data: MCPServerRequest) =>
-    request<{ status: string; name: string }>('/api/mcp/servers', {
-      method: 'POST',
-      body: JSON.stringify(data),
-    }),
-  mcpUpdate: (name: string, data: MCPServerRequest) =>
-    request<{ status: string; name: string }>(`/api/mcp/servers/${encodeURIComponent(name)}`, {
-      method: 'PUT',
-      body: JSON.stringify(data),
-    }),
-  mcpDelete: (name: string) =>
-    request<{ status: string }>(`/api/mcp/servers/${encodeURIComponent(name)}`, {
-      method: 'DELETE',
-    }),
-  mcpLogin: (name: string) =>
-    request<MCPLoginStatus>(`/api/mcp/${encodeURIComponent(name)}/login`, { method: 'POST' }),
-  mcpLoginStatus: (name: string) =>
-    request<MCPLoginStatus>(`/api/mcp/${encodeURIComponent(name)}/login/status`),
-  browse: (path?: string) => {
-    const q = path ? `?path=${encodeURIComponent(path)}` : ''
-    return request<BrowseResponse>(`/api/browse${q}`)
-  },
-  switchProject: (path: string) =>
-    request<{ status: string; pwd: string }>('/api/project/switch', {
-      method: 'POST',
-      body: JSON.stringify({ path }),
-    }),
-  // Returns the subset of the given local paths that no longer exist on disk, so
-  // the workspace picker can hide dead entries. Send local paths only — ssh://
-  // labels can't be stat'd server-side.
-  validatePaths: (paths: string[]) =>
-    request<{ missing: string[] }>('/api/project/validate', {
-      method: 'POST',
-      body: JSON.stringify({ paths }),
-    }),
-  ptyCreate: () =>
-    request<{ id: string }>('/api/pty', { method: 'POST' }),
-  ptyList: () =>
-    request<{ sessions: string[] }>('/api/pty'),
-  ptyKill: (id: string) =>
-    request<{ status: string }>(`/api/pty/${encodeURIComponent(id)}`, { method: 'DELETE' }),
-  approvalMode: () =>
-    request<{ auto_approve: boolean }>('/api/approval/mode'),
-  setApprovalMode: (autoApprove: boolean) =>
-    request<{ auto_approve: boolean }>('/api/approval/mode', {
-      method: 'POST',
-      body: JSON.stringify({ auto_approve: autoApprove }),
-    }),
-  stop: (taskId?: string) =>
-    request<{ status: string }>('/api/stop', {
-      method: 'POST',
-      body: JSON.stringify({ task_id: taskId || '' }),
-    }),
-  sshList: () =>
-    request<SSHListResponse>('/api/ssh'),
-  dockerContainers: () =>
-    request<DockerContainersResponse>('/api/docker/containers'),
-
-  // Remote connection wizard (SSH)
-  remoteConnect: (data: RemoteConnectRequest) =>
-    request<RemoteConnectResponse>('/api/remote/connect', {
-      method: 'POST',
-      body: JSON.stringify(data),
-    }),
-  remoteListDir: (connectionId: string, path: string) =>
-    request<RemoteListDirResponse>('/api/remote/list-dir', {
-      method: 'POST',
-      body: JSON.stringify({ connection_id: connectionId, path }),
-    }),
-  remoteBind: (connectionId: string, path: string) =>
-    request<RemoteBindResponse>('/api/remote/bind', {
-      method: 'POST',
-      body: JSON.stringify({ connection_id: connectionId, path }),
-    }),
-  remoteCancel: (connectionId: string) =>
-    request<{ status: string }>('/api/remote/cancel', {
-      method: 'POST',
-      body: JSON.stringify({ connection_id: connectionId }),
-    }),
-  remoteSaveAlias: (name: string, addr: string, path: string) =>
-    request<{ status: string }>('/api/remote/save-alias', {
-      method: 'POST',
-      body: JSON.stringify({ name, addr, path }),
-    }),
-  remoteSaveDockerAlias: (name: string, container: string, path: string) =>
-    request<{ status: string }>('/api/remote/save-docker-alias', {
-      method: 'POST',
-      body: JSON.stringify({ name, container, path }),
-    }),
-  skillsList: () =>
-    request<SkillInfo[]>('/api/skills'),
-  skillToggle: (name: string, enabled: boolean) =>
-    request<{ status: string }>(`/api/skills/${encodeURIComponent(name)}/toggle`, {
-      method: 'POST',
-      body: JSON.stringify({ enabled }),
-    }),
-  slashCommands: () =>
-    request<SlashCommandInfo[]>('/api/slash-commands'),
-  channelStatus: () =>
-    request<{ available: boolean; channel?: string; state?: string }>('/api/channel'),
-  channelLogin: () =>
-    request<{ status: string; qr_content: string }>('/api/channel/login', { method: 'POST' }),
-  channelLogout: () =>
-    request<{ status: string; state: string }>('/api/channel/logout', { method: 'POST' }),
-  channelEnable: () =>
-    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; available: boolean }>('/api/channel/ble'),
-  setChannelBLE: (enabled: boolean) =>
-    request<{ enabled: boolean }>('/api/channel/ble', {
-      method: 'POST',
-      body: JSON.stringify({ enabled }),
-    }),
-
-  // Setup API
-  setupProviders: () =>
-    request<SetupProvider[]>('/api/setup/providers'),
-  setupProviderModels: (providerId: string) =>
-    request<SetupModel[]>(`/api/setup/providers/${encodeURIComponent(providerId)}/models`),
-  setupComplete: (data: { provider: string; api_key: string; model?: string; model_reasoning?: boolean; base_url?: string; name?: string; headers?: Record<string, string> }) =>
-    request<{ status: string; provider: string; model: string }>('/api/setup/complete', {
-      method: 'POST',
-      body: JSON.stringify(data),
-    }),
-  setupStatus: () =>
-    request<{ needs_setup: boolean }>('/api/setup/status'),
-  setupValidate: (data: { provider: string; api_key: string; base_url?: string; headers?: Record<string, string> }) =>
-    request<ValidateResult>('/api/setup/validate', {
-      method: 'POST',
-      body: JSON.stringify(data),
-    }),
-
-  // Provider management
-  listProviders: () =>
-    request<ProviderDetail[]>('/api/providers'),
-  addProvider: (data: { id: string; api_key: string; name?: string; model?: string; model_reasoning?: boolean; vision?: boolean; thinking?: boolean; reasoning_effort?: string } & ProviderAdvanced) =>
-    request<{ status: string }>('/api/providers', {
-      method: 'POST',
-      body: JSON.stringify(data),
-    }),
-  updateProvider: (id: string, data: { api_key?: string; name?: string; custom_models?: CustomModelDetail[]; vision?: boolean; thinking?: boolean; reasoning_effort?: string } & ProviderAdvanced) =>
-    request<{ status: string }>(`/api/providers/${encodeURIComponent(id)}`, {
-      method: 'PUT',
-      body: JSON.stringify(data),
-    }),
-  deleteProvider: (id: string) =>
-    request<{ status: string }>(`/api/providers/${encodeURIComponent(id)}`, { method: 'DELETE' }),
-  // Browse a provider's model catalog (built-in for registry providers, live
-  // /models for custom endpoints). Each entry is flagged added=true when already
-  // configured, so the UI renders "+ add" / "✓ added" toggles.
-  providerCatalog: (id: string) =>
-    request<CatalogModel[]>(`/api/providers/${encodeURIComponent(id)}/models`),
-
-  // Model state
-  modelState: () =>
-    request<ModelStateResponse>('/api/model-state'),
-  toggleFavorite: (provider: string, model: string) =>
-    request<{ favorite: boolean }>('/api/model-state/favorite', {
-      method: 'POST',
-      body: JSON.stringify({ provider, model }),
-    }),
-  toggleModelEnabled: (provider: string, model: string, enabled: boolean) =>
-    request<{ enabled: boolean }>('/api/model-state/enabled', {
-      method: 'POST',
-      body: JSON.stringify({ provider, model, enabled }),
-    }),
-  setModelEffort: (provider: string, model: string, effort: string) =>
-    request<{ effort: string }>('/api/model-state/effort', {
-      method: 'POST',
-      body: JSON.stringify({ provider, model, effort }),
-    }),
-
-  // Automations
-  automations: () => request<AutomationItem[]>('/api/automations'),
-  automationCreate: (data: AutomationCreate) =>
-    request<AutomationItem>('/api/automations', { method: 'POST', body: JSON.stringify(data) }),
-  automationUpdate: (id: string, data: Partial<Automation>) =>
-    request<AutomationItem>(`/api/automations/${encodeURIComponent(id)}`, {
-      method: 'PUT',
-      body: JSON.stringify(data),
-    }),
-  automationDelete: (id: string) =>
-    request<{ status: string }>(`/api/automations/${encodeURIComponent(id)}`, { method: 'DELETE' }),
-  automationRunNow: (id: string) =>
-    request<{ status: string }>(`/api/automations/${encodeURIComponent(id)}/run`, { method: 'POST' }),
-  automationRuns: (automationId?: string) => {
-    const q = automationId ? `?automation_id=${encodeURIComponent(automationId)}` : ''
-    return request<AutomationRun[]>(`/api/automations/runs${q}`)
-  },
-  automationTemplates: () => request<AutomationTemplate[]>('/api/automation-templates'),
-
-  // Browser use
-  browserStatus: () => request<BrowserStatusResponse>('/api/browser/status'),
-  browserSaveConfig: (data: BrowserConfig) =>
-    request<{ status: string }>('/api/browser/config', { method: 'POST', body: JSON.stringify(data) }),
-}
-
-export interface BrowserSitePermission {
-  origin: string
-  navigate?: string
-  interact?: string
-}
-
-export interface BrowserConfig {
-  enabled: boolean
-  backend: string
-  chrome_path?: string
-  headless?: boolean
-  viewport?: string
-  approval?: Record<string, string>
-  site_permissions?: BrowserSitePermission[]
-  dev_mode?: boolean
-}
-
-export interface BrowserStatusResponse {
-  available: boolean
-  status?: {
-    enabled: boolean
-    backend: string
-    chrome_found: boolean
-    chrome_path?: string
-    chrome_version?: string
-    extension_online: boolean
-    dev_mode: boolean
-  }
-  site_permissions?: BrowserSitePermission[]
-  approval?: Record<string, string>
-}
diff --git a/web/src/composables/apiBase.ts b/web/src/composables/apiBase.ts
deleted file mode 100644
index 5389de43..00000000
--- a/web/src/composables/apiBase.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-// Resolves the absolute base URL of the jcode backend API, and exposes it to
-// api.ts / ws.ts / TerminalInstance.vue.
-//
-// Two hosting modes share one frontend bundle:
-//
-//   • Browser mode (`jcode web`): the page is served by the Go server itself,
-//     so the page's origin IS the API origin. All request/WebSocket URLs stay
-//     relative (base = '').
-//
-//   • Desktop mode (Tauri shell): the page is served by Tauri's built-in
-//     frontend (origin `tauri://localhost` / `http://tauri.localhost`), which is
-//     cross-origin to the Go server on `127.0.0.1:<dynamic port>`. The port is
-//     published to the frontend via the `get_sidecar_port` Tauri IPC command,
-//     and every request / WS must use an absolute `http(s)://127.0.0.1:<port>`
-//     (or `ws(s)://…`) URL.
-//
-// `initApiBase()` is awaited in main.ts before the app mounts, so by the time
-// any component issues a request the base is known. In desktop mode it polls the
-// port until the sidecar has published it (the window can render before the Go
-// server has bound its port).
-
-import { isTauri } from './useDesktop'
-
-/** HTTP base, e.g. '' (browser) or 'http://127.0.0.1:53913' (desktop). No trailing slash. */
-export let apiBase = ''
-
-/** WebSocket base derived from apiBase, e.g. '' or 'ws://127.0.0.1:53913'. */
-export function wsBase(): string {
-  if (!apiBase) {
-    // Browser mode: keep using the page's own protocol/host (same-origin).
-    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:'
-    return `${proto}//${location.host}`
-  }
-  // Desktop mode: swap the http(s):// scheme to ws(s):// on the resolved host.
-  const wsProto = apiBase.startsWith('https://') ? 'wss://' : 'ws://'
-  return wsProto + apiBase.replace(/^https?:\/\//, '')
-}
-
-/**
- * Resolve and cache the API base, then wait until the sidecar is actually
- * serving. In browser mode this is a no-op (the server that served the page is
- * already up). In desktop mode it invokes `get_sidecar_port`, polls the port
- * until the Rust side has published it, then polls `/api/health` until the Go
- * server is accepting connections. This must complete before the app mounts and
- * issues its first request — otherwise boot() races a not-yet-listening server
- * and shows the "can't connect" overlay even though the sidecar comes up a
- * moment later. Safe to call once at boot; later calls are no-ops once a
- * non-null port + healthy server have been resolved.
- */
-export async function initApiBase(): Promise<void> {
-  if (!isTauri) return // browser mode: relative URLs, server already up
-  // Dynamic import: the @tauri-apps/api/core package is only ever pulled in on
-  // the desktop, keeping the browser bundle free of Tauri runtime code.
-  const { invoke } = await import('@tauri-apps/api/core')
-  const port = await waitForPort(invoke)
-  apiBase = `http://127.0.0.1:${port}`
-  await waitForHealth()
-}
-
-// Poll the IPC command until it returns a port (or time out). The window can
-// mount and reach this code before sidecar::start has stored the port, so a
-// single invoke returning null must retry rather than fail.
-async function waitForPort(
-  invoke: <T>(cmd: string) => Promise<T>,
-  attempts = 200,
-  intervalMs = 100,
-): Promise<number> {
-  for (let i = 0; i < attempts; i++) {
-    try {
-      const port = await invoke<number | null>('get_sidecar_port')
-      if (port) return port
-    } catch {
-      // IPC not ready yet (very early boot) — keep polling.
-    }
-    await new Promise((r) => setTimeout(r, intervalMs))
-  }
-  throw new Error('Timed out waiting for the jcode backend port')
-}
-
-// Poll /api/health until the Go server is accepting connections. The port is
-// known before the server binds (pick_free_port races the sidecar startup), so
-// resolving the port alone is not enough — without this, boot()'s first
-// fetchHealth hits a not-yet-listening socket and the "can't connect" overlay
-// flashes on every desktop launch. Matches the Rust health_ok gate.
-async function waitForHealth(attempts = 400, intervalMs = 150): Promise<void> {
-  for (let i = 0; i < attempts; i++) {
-    try {
-      const resp = await fetch(`${apiBase}/api/health`)
-      if (resp.ok) {
-        const body = await resp.json().catch(() => null)
-        if (body && body.status) return
-      }
-    } catch {
-      // ECONNREFUSED while the server is still binding — keep polling.
-    }
-    await new Promise((r) => setTimeout(r, intervalMs))
-  }
-  throw new Error('Timed out waiting for the jcode backend to become healthy')
-}
diff --git a/web/src/composables/authToken.ts b/web/src/composables/authToken.ts
deleted file mode 100644
index cb248e62..00000000
--- a/web/src/composables/authToken.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-// Web access token storage + accessors.
-//
-// Kept OUTSIDE the Pinia store on purpose: api.ts and ws.ts must read the token
-// without importing a store, which would create a circular import (api ↔ store)
-// and may run before createPinia(). The token is a plain module-level reactive
-// ref, persisted to localStorage so it survives reloads.
-//
-// Only relevant when the server is bound to a non-loopback host (it reports
-// `auth_required` from /api/health). On loopback / desktop the token stays empty
-// and nothing here has any effect.
-import { readonly, ref } from 'vue'
-
-const STORAGE_KEY = 'jcode_web_token'
-
-const token = ref<string>(localStorage.getItem(STORAGE_KEY) || '')
-
-/** Current token (empty string when none). Read fresh on every request/WS connect. */
-export function getAuthToken(): string {
-  return token.value
-}
-
-/** Persist (or clear, when empty) the token. */
-export function setAuthToken(t: string): void {
-  token.value = t
-  if (t) localStorage.setItem(STORAGE_KEY, t)
-  else localStorage.removeItem(STORAGE_KEY)
-}
-
-export function clearAuthToken(): void {
-  setAuthToken('')
-}
-
-/**
- * Read-only reactive ref for components (login gate) that need to watch the
- * token. Returned readonly so callers can't bypass setAuthToken() and leave
- * localStorage out of sync with the in-memory value.
- */
-export function useAuthToken() {
-  return readonly(token)
-}
-
-// --- expiry notification ---------------------------------------------------
-// api.ts cannot import the App component, so on a 401 it calls notifyAuthExpired()
-// and App registers a handler at mount (clears the token + shows the login gate).
-type AuthExpiredHandler = () => void
-let onExpired: AuthExpiredHandler | null = null
-
-export function setAuthExpiredHandler(fn: AuthExpiredHandler | null): void {
-  onExpired = fn
-}
-
-export function notifyAuthExpired(): void {
-  onExpired?.()
-}
-
-// NOTE: desktop (Tauri) token injection hook — when the desktop sidecar later
-// runs on a non-loopback bind, initApiBase() can `invoke('get_sidecar_token')`
-// and call setAuthToken() here; api.ts/ws.ts need no further change.
diff --git a/web/src/composables/markdown.ts b/web/src/composables/markdown.ts
deleted file mode 100644
index 62e05148..00000000
--- a/web/src/composables/markdown.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// Markdown rendering composable
-import { Marked } from 'marked'
-import { markedHighlight } from 'marked-highlight'
-import hljs from 'highlight.js'
-import DOMPurify from 'dompurify'
-
-const marked = new Marked(
-  markedHighlight({
-    emptyLangClass: 'hljs',
-    langPrefix: 'hljs language-',
-    highlight(code: string, lang: string) {
-      if (lang && hljs.getLanguage(lang)) {
-        return hljs.highlight(code, { language: lang }).value
-      }
-      return hljs.highlightAuto(code).value
-    },
-  }),
-)
-
-marked.setOptions({
-  breaks: true,
-  gfm: true,
-})
-
-export function renderMarkdown(text: string): string {
-  const raw = marked.parse(text) as string
-  return DOMPurify.sanitize(raw, {
-    ADD_ATTR: ['target'],
-    ADD_TAGS: ['mark'],
-  })
-}
diff --git a/web/src/composables/notifications.ts b/web/src/composables/notifications.ts
deleted file mode 100644
index 7c28810c..00000000
--- a/web/src/composables/notifications.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-// Notifications for long-running agent events (task finished, approval needed).
-// Fires only when the user isn't already looking at the app, so a run is never
-// interrupted while it's being watched.
-//
-// In the Tauri desktop shell this routes through the native OS notification
-// plugin; in a plain browser it falls back to the web Notification API. Both
-// paths are feature-detected, so the same bundle works in either host.
-import { ref } from 'vue'
-
-import { isTauri, isAppFocused, ensureNativePermission, nativeNotify } from './useDesktop'
-
-const permission = ref<NotificationPermission>(
-  typeof Notification !== 'undefined' ? Notification.permission : 'denied',
-)
-
-export function useNotifications() {
-  async function ensurePermission() {
-    if (isTauri) {
-      await ensureNativePermission()
-      return
-    }
-    if (typeof Notification === 'undefined' || permission.value !== 'default') return
-    try {
-      permission.value = await Notification.requestPermission()
-    } catch {
-      /* ignore */
-    }
-  }
-
-  function notify(title: string, body?: string) {
-    // Desktop: native OS notification, only when the window isn't focused.
-    if (isTauri) {
-      if (isAppFocused()) return
-      void nativeNotify(title, body)
-      return
-    }
-    // Web: only notify when the tab is in the background.
-    if (typeof Notification === 'undefined' || permission.value !== 'granted') return
-    if (typeof document !== 'undefined' && !document.hidden) return
-    try {
-      const n = new Notification(title, { body, icon: '/icon.png', tag: 'jcode' })
-      n.onclick = () => {
-        window.focus()
-        n.close()
-      }
-    } catch {
-      /* ignore */
-    }
-  }
-
-  return { ensurePermission, notify }
-}
diff --git a/web/src/composables/toolInfo.ts b/web/src/composables/toolInfo.ts
deleted file mode 100644
index 7f9a5bc6..00000000
--- a/web/src/composables/toolInfo.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-// Tool display information utilities for client-side rendering.
-// Used when replaying sessions (where the backend display_info is not available).
-
-import type { ToolDisplayInfo } from '@/types/api'
-import { i18n } from '@/i18n'
-
-/** Extract the last 2 path components for compact display. */
-function shortenPath(path: string): string {
-  if (!path) return ''
-  const parts = path.replace(/\\/g, '/').split('/')
-  if (parts.length <= 2) return path
-  return '…/' + parts.slice(-2).join('/')
-}
-
-/**
- * Extract display metadata from a tool name and its JSON args.
- * Mirrors the backend extractToolDisplayInfo function for session replay.
- */
-export function extractToolDisplayInfo(name: string, argsJSON: string): ToolDisplayInfo {
-  let args: Record<string, unknown> = {}
-  try {
-    args = JSON.parse(argsJSON) || {}
-  } catch {
-    // ignore parse errors
-  }
-
-  const getString = (key: string): string => {
-    const v = args[key]
-    return typeof v === 'string' ? v : ''
-  }
-
-  const t = i18n.global.t.bind(i18n.global)
-  switch (name) {
-    case 'read':
-      return { title: t('tool.read'), icon: 'file', category: 'context', subtitle: shortenPath(getString('file_path')) }
-    case 'write':
-      return { title: t('tool.write'), icon: 'file-edit', category: 'mutation', subtitle: shortenPath(getString('file_path')) }
-    case 'edit':
-      return { title: t('tool.edit'), icon: 'file-edit', category: 'mutation', subtitle: shortenPath(getString('file_path')) }
-    case 'multi_edit':
-      return { title: t('tool.multiEdit'), icon: 'file-edit', category: 'mutation', subtitle: shortenPath(getString('file_path')) }
-    case 'glob':
-      return { title: t('tool.glob'), icon: 'search', category: 'context', subtitle: getString('pattern') }
-    case 'grep':
-      return { title: t('tool.search'), icon: 'search', category: 'context', subtitle: getString('pattern') }
-    case 'execute': {
-      let subtitle = getString('description')
-      if (!subtitle) {
-        const cmd = getString('command')
-        subtitle = cmd.length > 100 ? cmd.slice(0, 100) + '…' : cmd
-      }
-      return { title: t('tool.shell'), icon: 'terminal', category: 'execution', subtitle }
-    }
-    case 'background':
-      return { title: t('tool.background'), icon: 'terminal', category: 'execution', subtitle: getString('description') }
-    case 'todowrite':
-      return { title: t('tool.updateTodos'), icon: 'checklist', category: 'mutation' }
-    case 'todoread':
-      return { title: t('tool.readTodos'), icon: 'checklist', category: 'context' }
-    case 'subagent': {
-      const subtitle = getString('description') || getString('name')
-      return { title: t('tool.subagent'), icon: 'agent', category: 'execution', subtitle }
-    }
-    case 'ask_user': {
-      let subtitle = getString('question')
-      if (subtitle.length > 60) subtitle = subtitle.slice(0, 60) + '…'
-      return { title: t('tool.askUser'), icon: 'question', category: 'context', subtitle }
-    }
-    default:
-      return { title: name, icon: 'tool', category: '' }
-  }
-}
diff --git a/web/src/composables/useBranch.ts b/web/src/composables/useBranch.ts
deleted file mode 100644
index 3f3201b9..00000000
--- a/web/src/composables/useBranch.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-// Shared git-branch state for the composer's BranchPicker and the TopBar chip.
-// Module-level singletons so every consumer reflects the same current branch,
-// and so a switch — whether done in the UI or with `git checkout` in a terminal
-// — shows up everywhere.
-import { ref } from 'vue'
-import { api } from '@/composables/api'
-import { i18n } from '@/i18n'
-
-// A switch git refused because it would overwrite uncommitted work. Held so the
-// UI can confirm how to resolve it (stash / discard) before retrying.
-export interface PendingSwitch {
-  branch: string
-  create: boolean
-  files: string[] // files that would be overwritten
-}
-
-const current = ref('')
-const branches = ref<string[]>([])
-const loading = ref(false)
-const switching = ref(false)
-const error = ref('')
-const pending = ref<PendingSwitch | null>(null)
-
-// refresh re-reads the current branch + local branch list. Any error (not a git
-// repo, git missing) collapses to an empty state rather than throwing.
-async function refresh() {
-  loading.value = true
-  try {
-    const res = await api.gitBranches()
-    current.value = res.current || ''
-    branches.value = res.branches || []
-  } catch {
-    current.value = ''
-    branches.value = []
-  } finally {
-    loading.value = false
-  }
-}
-
-// checkout switches branch (create=true → `git checkout -b`). strategy picks how
-// to handle a dirty tree: '' lets git decide (and abort if it would clobber
-// changes), 'stash' tucks changes away first, 'force' discards them.
-//
-// Returns true on success. A plain switch git refuses because it would overwrite
-// uncommitted work is NOT an error: it parks the conflict in `pending` (returning
-// false) so the caller can confirm a strategy and retry. Any other failure sets
-// `error`. Always re-reads afterwards so the UI matches reality.
-async function checkout(
-  branch: string,
-  create = false,
-  strategy: '' | 'stash' | 'force' = '',
-): Promise<boolean> {
-  switching.value = true
-  error.value = ''
-  try {
-    const res = await api.gitCheckout(branch, create, strategy)
-    if (res.blocked) {
-      // Non-destructive: git aborted before touching the tree. Surface the
-      // conflict so the caller can confirm how to proceed.
-      pending.value = { branch, create, files: res.files || [] }
-      return false
-    }
-    pending.value = null
-    current.value = res.branch || branch
-    return true
-  } catch (e) {
-    error.value = (e as Error).message || i18n.global.t('errors.branchSwitch')
-    return false
-  } finally {
-    switching.value = false
-    await refresh()
-  }
-}
-
-// resolvePending retries the parked switch with a chosen strategy: 'stash' saves
-// the working changes first (recoverable via `git stash pop`), 'force' discards
-// them. On success `pending` is cleared by checkout().
-async function resolvePending(strategy: 'stash' | 'force'): Promise<boolean> {
-  const p = pending.value
-  if (!p) return false
-  return checkout(p.branch, p.create, strategy)
-}
-
-// cancelPending dismisses the confirmation without switching.
-function cancelPending() {
-  pending.value = null
-}
-
-// Keep the UI in sync when the branch changes outside the app (e.g. the user or
-// the agent runs `git checkout` in a terminal): re-read whenever the window
-// regains focus or the tab becomes visible. Wired once.
-let wired = false
-function wireExternalSync() {
-  if (wired || typeof window === 'undefined') return
-  wired = true
-  window.addEventListener('focus', () => { void refresh() })
-  document.addEventListener('visibilitychange', () => {
-    if (document.visibilityState === 'visible') void refresh()
-  })
-}
-
-export function useBranch() {
-  wireExternalSync()
-  return {
-    current,
-    branches,
-    loading,
-    switching,
-    error,
-    pending,
-    refresh,
-    checkout,
-    resolvePending,
-    cancelPending,
-  }
-}
diff --git a/web/src/composables/useDesktop.ts b/web/src/composables/useDesktop.ts
deleted file mode 100644
index de0b6c3a..00000000
--- a/web/src/composables/useDesktop.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-// Central bridge to native desktop (Tauri) capabilities.
-//
-// Every export here is feature-detected and degrades to a web fallback or a
-// no-op, so the exact same web bundle runs unchanged in a plain browser
-// (`jcode web`) and inside the Tauri desktop shell. Tauri plugin packages are
-// imported dynamically and only ever reached when `isTauri` is true, so the
-// browser build never executes their native-only code paths.
-
-// Tauri 2 injects `__TAURI_INTERNALS__` into every webview it controls,
-// including the remote loopback origin the desktop app navigates to.
-export const isTauri =
-  typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window
-
-// --- window focus tracking -------------------------------------------------
-// On the desktop we only want to fire a notification when the app isn't the
-// focused window (the web build keeps using document.hidden instead).
-let _focused = typeof document === 'undefined' ? true : document.hasFocus()
-if (typeof window !== 'undefined') {
-  window.addEventListener('focus', () => (_focused = true))
-  window.addEventListener('blur', () => (_focused = false))
-}
-
-/** True when the app window is currently focused / in the foreground. */
-export function isAppFocused(): boolean {
-  if (typeof document !== 'undefined' && document.hidden) return false
-  return _focused
-}
-
-// --- native notifications --------------------------------------------------
-type NotifModule = typeof import('@tauri-apps/plugin-notification')
-let _notif: NotifModule | null = null
-async function notifModule(): Promise<NotifModule | null> {
-  if (!isTauri) return null
-  if (!_notif) _notif = await import('@tauri-apps/plugin-notification')
-  return _notif
-}
-
-/** Request OS notification permission (idempotent). Returns whether granted. */
-export async function ensureNativePermission(): Promise<boolean> {
-  const m = await notifModule()
-  if (!m) return false
-  try {
-    let granted = await m.isPermissionGranted()
-    if (!granted) granted = (await m.requestPermission()) === 'granted'
-    return granted
-  } catch {
-    return false
-  }
-}
-
-/** Fire a native OS notification. No-op (returns false) outside Tauri. */
-export async function nativeNotify(title: string, body?: string): Promise<boolean> {
-  const m = await notifModule()
-  if (!m) return false
-  try {
-    // Request permission on the spot if it was never granted — otherwise the
-    // first notification (e.g. a task that finishes before the user answers the
-    // initial async OS prompt) would be silently dropped.
-    if (!(await m.isPermissionGranted())) {
-      if ((await m.requestPermission()) !== 'granted') return false
-    }
-    m.sendNotification({ title, body })
-    return true
-  } catch {
-    return false
-  }
-}
-
-// --- native folder picker --------------------------------------------------
-/**
- * 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) 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 -------------------------------------------------
-/**
- * Tag the document so CSS can adapt to the native shell (e.g. inset the top bar
- * for the macOS traffic-light buttons under an overlay title bar). Safe to call
- * on every boot; a no-op in the browser.
- */
-export function initDesktop(): void {
-  if (!isTauri || typeof document === 'undefined') return
-  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/composables/useFolderBrowser.ts b/web/src/composables/useFolderBrowser.ts
deleted file mode 100644
index 418a82c5..00000000
--- a/web/src/composables/useFolderBrowser.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-// useFolderBrowser — shared local folder-browsing state for the two workspace
-// pickers (the ProjectSwitcher modal and the inline WorkspacePicker popover),
-// which previously each re-implemented identical browse/navigate logic against
-// /api/browse. The composable owns the directory-list navigation; each caller
-// wires its own "open this path" action (switch project vs. open folder).
-import { ref } from 'vue'
-import { api } from '@/composables/api'
-import type { BrowseFolder } from '@/types/api'
-
-export function useFolderBrowser() {
-  const showBrowser = ref(false)
-  const browsePath = ref('')
-  const browseFolders = ref<BrowseFolder[]>([])
-  const browseLoading = ref(false)
-  const pathInput = ref('')
-
-  async function loadFolders(path?: string) {
-    browseLoading.value = true
-    try {
-      const result = await api.browse(path)
-      browsePath.value = result.current
-      pathInput.value = result.current
-      browseFolders.value = result.folders
-    } catch (err: unknown) {
-      console.error('Browse failed:', err)
-      browseFolders.value = []
-    } finally {
-      browseLoading.value = false
-    }
-  }
-
-  function openBrowser() {
-    showBrowser.value = true
-    loadFolders()
-  }
-
-  function goUp() {
-    if (!browsePath.value) return
-    const parts = browsePath.value.split('/')
-    parts.pop()
-    loadFolders(parts.join('/') || '/')
-  }
-
-  function handlePathSubmit() {
-    const path = pathInput.value.trim()
-    if (path) loadFolders(path)
-  }
-
-  function resetBrowser() {
-    showBrowser.value = false
-    browsePath.value = ''
-    pathInput.value = ''
-    browseFolders.value = []
-  }
-
-  return {
-    showBrowser,
-    browsePath,
-    browseFolders,
-    browseLoading,
-    pathInput,
-    loadFolders,
-    openBrowser,
-    goUp,
-    handlePathSubmit,
-    resetBrowser,
-  }
-}
diff --git a/web/src/composables/useTheme.ts b/web/src/composables/useTheme.ts
deleted file mode 100644
index ec77e318..00000000
--- a/web/src/composables/useTheme.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-// Theme management: named built-in themes applied via html[data-theme],
-// with terminal/Go parity through the generated registry. A `.dark` class is
-// kept in sync with the active theme's appearance so the existing
-// :root:not(.dark) / .dark forks in style.css keep working.
-import { ref, watch, onMounted } from 'vue'
-import { THEMES, type ThemeDef } from './themes.generated'
-
-export type { ThemeDef }
-
-// A choice is either a built-in theme id or the special 'system' value, which
-// follows the OS light/dark preference.
-export type ThemeChoice = string
-
-const STORAGE_KEY = 'jcode_theme'
-const DEFAULT_DARK = 'jcode-dark'
-const DEFAULT_LIGHT = 'jcode-light'
-
-function getSystemAppearance(): 'light' | 'dark' {
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-}
-
-function appearanceOf(id: string): 'light' | 'dark' {
-  return THEMES.find((t) => t.id === id)?.appearance ?? 'dark'
-}
-
-// migrate maps legacy stored values ('light' | 'dark' | 'system') onto the new
-// named-theme scheme. Newer values (a theme id or 'system') pass through.
-function migrate(v: string | null): ThemeChoice {
-  switch (v) {
-    case null:
-    case '':
-    case 'system':
-      return 'system'
-    case 'light':
-      return DEFAULT_LIGHT
-    case 'dark':
-      return DEFAULT_DARK
-    default:
-      return THEMES.some((t) => t.id === v) ? v : 'system'
-  }
-}
-
-function loadStored(): ThemeChoice {
-  try {
-    return migrate(localStorage.getItem(STORAGE_KEY))
-  } catch {
-    return 'system'
-  }
-}
-
-const themeChoice = ref<ThemeChoice>(loadStored())
-const resolvedTheme = ref<'light' | 'dark'>('dark')
-
-// resolveId turns a choice into a concrete theme id.
-function resolveId(choice: ThemeChoice): string {
-  if (choice === 'system') {
-    return getSystemAppearance() === 'dark' ? DEFAULT_DARK : DEFAULT_LIGHT
-  }
-  return THEMES.some((t) => t.id === choice) ? choice : DEFAULT_DARK
-}
-
-function applyTheme(choice: ThemeChoice) {
-  const id = resolveId(choice)
-  const appearance = appearanceOf(id)
-  resolvedTheme.value = appearance
-
-  const html = document.documentElement
-  html.setAttribute('data-theme', id)
-  // Keep .dark in sync so style.css's scrollbar/prose/diff/xterm forks work.
-  html.classList.toggle('dark', appearance === 'dark')
-
-  // Sync the browser chrome color to the active theme background.
-  const meta = document.querySelector('meta[name="theme-color"]')
-  if (meta) {
-    const bg = getComputedStyle(html).getPropertyValue('--color-background').trim()
-    meta.setAttribute('content', bg || (appearance === 'dark' ? '#09090b' : '#fafafa'))
-  }
-}
-
-export function useTheme() {
-  function setTheme(choice: ThemeChoice) {
-    themeChoice.value = choice
-    try {
-      localStorage.setItem(STORAGE_KEY, choice)
-    } catch { /* ignore */ }
-    applyTheme(choice)
-  }
-
-  // toggleTheme is the Sidebar's quick light/dark flip; it switches to the
-  // brand default of the opposite appearance. The Appearance settings tab is
-  // where specific named themes are chosen.
-  function toggleTheme() {
-    setTheme(resolvedTheme.value === 'dark' ? DEFAULT_LIGHT : DEFAULT_DARK)
-  }
-
-  onMounted(() => {
-    applyTheme(themeChoice.value)
-
-    const mq = window.matchMedia('(prefers-color-scheme: dark)')
-    mq.addEventListener('change', () => {
-      if (themeChoice.value === 'system') applyTheme('system')
-    })
-  })
-
-  watch(themeChoice, (choice) => applyTheme(choice))
-
-  return {
-    themeChoice,
-    resolvedTheme,
-    themes: THEMES,
-    setTheme,
-    toggleTheme,
-  }
-}
diff --git a/web/src/composables/ws.ts b/web/src/composables/ws.ts
deleted file mode 100644
index 7f9e5c29..00000000
--- a/web/src/composables/ws.ts
+++ /dev/null
@@ -1,173 +0,0 @@
-// WebSocket client composable for jcode web
-import { ref, onUnmounted } from 'vue'
-import { wsBase } from './apiBase'
-import { getAuthToken } from './authToken'
-import type {
-  AgentTextData,
-  ToolCallData,
-  ToolResultData,
-  TokenUpdateData,
-  AgentDoneData,
-  ApprovalRequestData,
-  AskUserRequestData,
-  SubagentEventData,
-  SubagentProgressData,
-  Goal,
-} from '@/types/api'
-
-type WSHandler = {
-  onAgentStart?: () => void
-  onAgentText?: (data: AgentTextData) => void
-  onToolCall?: (data: ToolCallData) => void
-  onToolResult?: (data: ToolResultData) => void
-  onTokenUpdate?: (data: TokenUpdateData) => void
-  onAgentDone?: (data: AgentDoneData) => void
-  onTodoUpdate?: () => void
-  onGoalUpdate?: (data: Goal | null) => void
-  onApprovalRequest?: (data: ApprovalRequestData) => void
-  onAskUserRequest?: (data: AskUserRequestData) => void
-  onSessionReset?: (data: { session_id: string }) => void
-  onModelChanged?: (data: { provider: string; model: string }) => void
-  onModeChanged?: (data: { mode: string }) => void
-  onApprovalModeChanged?: (data: { auto_approve: boolean }) => void
-  onSubagentEvent?: (data: SubagentEventData) => void
-  onSubagentProgress?: (data: SubagentProgressData) => void
-  onUserMessage?: (data: { content: string; source: string }) => void
-  // onTaskStatus fires for ANY task (including backgrounded ones) when its run
-  // starts/stops, so the sidebar can show a live running indicator.
-  onTaskStatus?: (taskId: string, running: boolean) => void
-  // activeTaskId returns the task currently shown in the foreground. Events
-  // tagged with a DIFFERENT task id (a backgrounded task that keeps running after
-  // you switch away) are dropped so they don't pollute the active view.
-  activeTaskId?: () => string | undefined
-}
-
-interface WSMessage {
-  type: string
-  task_id?: string
-  data?: unknown
-}
-
-export function useWebSocket(handlers: WSHandler) {
-  const connected = ref(false)
-  let ws: WebSocket | null = null
-  let retryTimer: ReturnType<typeof setTimeout> | null = null
-  let pingTimer: ReturnType<typeof setInterval> | null = null
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handlerMap: Record<string, (data: any) => void> = {
-    agent_start: () => handlers.onAgentStart?.(),
-    agent_text: (d) => handlers.onAgentText?.(d),
-    tool_call: (d) => handlers.onToolCall?.(d),
-    tool_result: (d) => handlers.onToolResult?.(d),
-    token_update: (d) => handlers.onTokenUpdate?.(d),
-    agent_done: (d) => handlers.onAgentDone?.(d),
-    todo_update: () => handlers.onTodoUpdate?.(),
-    goal_update: (d) => handlers.onGoalUpdate?.(d),
-    approval_request: (d) => handlers.onApprovalRequest?.(d),
-    ask_user_request: (d) => handlers.onAskUserRequest?.(d),
-    session_reset: (d) => handlers.onSessionReset?.(d),
-    model_changed: (d) => handlers.onModelChanged?.(d),
-    mode_changed: (d) => handlers.onModeChanged?.(d),
-    approval_mode_changed: (d) => handlers.onApprovalModeChanged?.(d),
-    subagent_event: (d) => handlers.onSubagentEvent?.(d),
-    subagent_progress: (d) => handlers.onSubagentProgress?.(d),
-    user_message: (d) => handlers.onUserMessage?.(d),
-    task_status: (d) => handlers.onTaskStatus?.(d?.task_id, !!d?.running),
-    pong: () => {}, // heartbeat response, no-op
-  }
-
-  function connect() {
-    if (ws) {
-      ws.close()
-      ws = null
-    }
-
-    // Build the WS URL from the resolved base: relative in browser mode (the
-    // page is served by the API server), absolute in desktop mode (the page is
-    // cross-origin to the Go server). See composables/apiBase.ts.
-    // Token (when the server requires auth) rides as the second WebSocket
-    // subprotocol — browsers can't set headers on a WS handshake. Read fresh on
-    // every (re)connect so a token entered after a drop is picked up. See auth.go.
-    const token = getAuthToken()
-    ws = token
-      ? new WebSocket(`${wsBase()}/api/ws`, ['jcode-auth', token])
-      : new WebSocket(`${wsBase()}/api/ws`)
-
-    ws.onopen = () => {
-      connected.value = true
-      // Start heartbeat
-      if (pingTimer) clearInterval(pingTimer)
-      pingTimer = setInterval(() => {
-        send({ type: 'ping' })
-      }, 30000)
-    }
-
-    ws.onmessage = (event) => {
-      try {
-        const msg: WSMessage = JSON.parse(event.data)
-        // Drop events from a different (backgrounded) task. Global events carry no
-        // task_id and always pass; while the foreground task id is still unknown
-        // (first message in flight) we also pass everything.
-        const active = handlers.activeTaskId?.()
-        if (msg.task_id && active && msg.task_id !== active) {
-          return
-        }
-        const handler = handlerMap[msg.type]
-        if (handler) {
-          let data = msg.data
-          // Carry the task id onto approval/ask cards so the resolve can echo it
-          // back and route to the correct task's engine.
-          if (
-            msg.task_id &&
-            (msg.type === 'approval_request' || msg.type === 'ask_user_request') &&
-            data &&
-            typeof data === 'object'
-          ) {
-            data = { ...(data as Record<string, unknown>), task_id: msg.task_id }
-          }
-          handler(data)
-        }
-      } catch (err) {
-        console.error('WS parse error:', err)
-      }
-    }
-
-    ws.onerror = () => {
-      connected.value = false
-    }
-
-    ws.onclose = () => {
-      connected.value = false
-      if (pingTimer) {
-        clearInterval(pingTimer)
-        pingTimer = null
-      }
-      ws = null
-      retryTimer = setTimeout(connect, 3000)
-    }
-  }
-
-  function send(msg: WSMessage) {
-    if (ws && ws.readyState === WebSocket.OPEN) {
-      ws.send(JSON.stringify(msg))
-    }
-  }
-
-  function sendApproval(id: string, approved: boolean, approveAll = false, taskId?: string) {
-    send({ type: 'approval', data: { id, approved, approve_all: approveAll, task_id: taskId } })
-  }
-
-  function disconnect() {
-    if (retryTimer) clearTimeout(retryTimer)
-    if (pingTimer) clearInterval(pingTimer)
-    ws?.close()
-    ws = null
-    connected.value = false
-  }
-
-  connect()
-  onUnmounted(disconnect)
-
-  return { connected, send, sendApproval, disconnect }
-}
diff --git a/web/src/i18n/index.ts b/web/src/i18n/index.ts
index 4980f133..32af6db5 100644
--- a/web/src/i18n/index.ts
+++ b/web/src/i18n/index.ts
@@ -1,28 +1,14 @@
-import { createI18n } from 'vue-i18n'
-import en from './locales/en'
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import enBase from './locales/en'
+import zhHansBase from './locales/zh-Hans'
+import zhHantBase from './locales/zh-Hant'
+import jaBase from './locales/ja'
+import koBase from './locales/ko'
 
-/**
- * i18n setup for the jcode web UI.
- *
- * Architecture borrows the locale-registry pattern from the sibling `jtype`
- * project (SUPPORTED_LOCALES / LOCALE_LABELS / HTML_LANG / getDefaultLocale),
- * adapted to vue-i18n's Composition-API mode (`legacy: false`).
- *
- * Persistence is front-end only: the chosen locale lives in localStorage under
- * `jcode_locale` (same `jcode_` prefix convention as `jcode_theme`). The backend
- * is intentionally unaware of the UI language — switching is instant and needs
- * no API round-trip. Messages for every locale are bundled (the catalog is
- * small enough that lazy-loading isn't worth the complexity).
- */
-
-// The supported UI languages. `en` is the canonical source; the others are
-// translations of it.
 export const SUPPORTED_LOCALES = ['en', 'zh-Hans', 'zh-Hant', 'ja', 'ko'] as const
 export type SupportedLocale = (typeof SUPPORTED_LOCALES)[number]
 
-// Each locale's own endonym, shown in the language picker so the option is
-// readable no matter which language the UI is currently in (a Japanese user
-// can find 日本語 even while the UI is in English).
 export const LOCALE_LABELS: Record<SupportedLocale, string> = {
   en: 'English',
   'zh-Hans': '简体中文',
@@ -31,9 +17,10 @@ export const LOCALE_LABELS: Record<SupportedLocale, string> = {
   ko: '한국어',
 }
 
-// BCP-47 tags for the <html lang> attribute. Keeping it in sync with the active
-// locale fixes screen-reader pronunciation, browser translation prompts, and
-// search-engine language detection.
+const STORAGE_KEY = 'jcode_locale'
+const LEGACY_KEY = 'jcode-lang'
+const FALLBACK: SupportedLocale = 'en'
+
 const HTML_LANG: Record<SupportedLocale, string> = {
   en: 'en',
   'zh-Hans': 'zh-Hans',
@@ -42,31 +29,24 @@ const HTML_LANG: Record<SupportedLocale, string> = {
   ko: 'ko',
 }
 
-const STORAGE_KEY = 'jcode_locale'
-const FALLBACK: SupportedLocale = 'en'
-
 function isSupported(value: string | null | undefined): value is SupportedLocale {
   return !!value && (SUPPORTED_LOCALES as readonly string[]).includes(value)
 }
 
-// localStorage first, then the browser language (matching only the primary
-// subtag — `zh-TW` maps to `zh-Hant`, `en-GB` maps to `en`), then English.
-function getDefaultLocale(): SupportedLocale {
-  if (typeof window === 'undefined') return FALLBACK
-  const stored = localStorage.getItem(STORAGE_KEY)
-  if (isSupported(stored)) return stored
-  // zh maps to simplified by default; the traditional variants (zh-TW/zh-Hant/
-  // zh-HK) map to zh-Hant. Everything else matches the primary subtag.
-  const browserTags = navigator.languages?.length ? navigator.languages : [navigator.language]
-  for (const tag of browserTags) {
-    if (!tag) continue
+function normalizeLegacy(value: string | null): SupportedLocale | null {
+  if (!value) return null
+  if (isSupported(value)) return value
+  if (value === 'zh') return 'zh-Hans'
+  return null
+}
+
+function browserLocale(): SupportedLocale {
+  if (typeof navigator === 'undefined') return FALLBACK
+  const tags = navigator.languages?.length ? navigator.languages : [navigator.language]
+  for (const tag of tags) {
     const lower = tag.toLowerCase()
-    if (lower === 'zh' || lower.startsWith('zh-cn') || lower.startsWith('zh-sg') || lower.startsWith('zh-hans')) {
-      return 'zh-Hans'
-    }
-    if (lower.startsWith('zh-tw') || lower.startsWith('zh-hk') || lower.startsWith('zh-mo') || lower.startsWith('zh-hant')) {
-      return 'zh-Hant'
-    }
+    if (lower === 'zh' || lower.startsWith('zh-cn') || lower.startsWith('zh-sg') || lower.startsWith('zh-hans')) return 'zh-Hans'
+    if (lower.startsWith('zh-tw') || lower.startsWith('zh-hk') || lower.startsWith('zh-mo') || lower.startsWith('zh-hant')) return 'zh-Hant'
     const primary = lower.split('-')[0]
     if (primary === 'ja') return 'ja'
     if (primary === 'ko') return 'ko'
@@ -75,45 +55,52 @@ function getDefaultLocale(): SupportedLocale {
   return FALLBACK
 }
 
+function initialLocale(): SupportedLocale {
+  if (typeof localStorage === 'undefined') return FALLBACK
+  return (
+    normalizeLegacy(localStorage.getItem(STORAGE_KEY)) ||
+    normalizeLegacy(localStorage.getItem(LEGACY_KEY)) ||
+    browserLocale()
+  )
+}
+
 function applyDocumentLang(locale: SupportedLocale) {
   if (typeof document !== 'undefined') {
     document.documentElement.lang = HTML_LANG[locale] ?? locale
   }
 }
 
-export const i18n = createI18n({
-  legacy: false, // Composition API mode — required for useI18n() in <script setup>
-  locale: getDefaultLocale(),
-  fallbackLocale: FALLBACK,
-  messages: {
-    en,
+// Full locale files are the single source of truth (same shape as Vue's
+// web/src/i18n/locales/*). Do NOT deep-merge incomplete partial overrides —
+// those used to clobber keys like settings.backToWorkspace ("返回工作区" → "关闭").
+const fullResources = {
+  en: { translation: enBase },
+  'zh-Hans': { translation: zhHansBase },
+  'zh-Hant': { translation: zhHantBase },
+  ja: { translation: jaBase },
+  ko: { translation: koBase },
+}
+
+void i18n.use(initReactI18next).init({
+  resources: fullResources,
+  lng: initialLocale(),
+  fallbackLng: FALLBACK,
+  // Locale files use Vue-style `{n}` placeholders (not i18next's default `{{n}}`).
+  interpolation: {
+    escapeValue: false,
+    prefix: '{',
+    suffix: '}',
   },
 })
 
-// Apply the <html lang> on load so it's correct before the first paint.
-applyDocumentLang(i18n.global.locale.value as SupportedLocale)
+applyDocumentLang(i18n.language as SupportedLocale)
 
-// Switch the active locale at runtime: updates vue-i18n, the <html lang>
-// attribute, and persists the choice for next launch. Returns a Promise so
-// callers can await the message file load if we ever switch to lazy loading.
 export async function setLocale(locale: SupportedLocale): Promise<void> {
   if (!isSupported(locale)) return
-  // Lazy-load the locale's messages on first use; en is bundled above.
-  if (!(locale in i18n.global.messages.value)) {
-    const mod = await import(`./locales/${locale}.ts`)
-    i18n.global.setLocaleMessage(locale, mod.default)
-  }
-  // vue-i18n v11 narrows the `locale` type from the keys present in `messages`
-  // at creation time (only `en` initially), so the runtime assignment of other
-  // supported locales needs an explicit cast.
-  ;(i18n.global.locale as { value: string }).value = locale
+  await i18n.changeLanguage(locale)
   applyDocumentLang(locale)
   localStorage.setItem(STORAGE_KEY, locale)
+  localStorage.removeItem(LEGACY_KEY)
 }
 
-// Pre-load the initial non-en locale's messages so the first render is already
-// translated (avoids a flash of English for zh/ja/ko users).
-const initial = getDefaultLocale()
-if (initial !== FALLBACK) {
-  void setLocale(initial)
-}
+export { i18n }
diff --git a/web/src/i18n/locales/en.ts b/web/src/i18n/locales/en.ts
index 150ceddc..62f6be63 100644
--- a/web/src/i18n/locales/en.ts
+++ b/web/src/i18n/locales/en.ts
@@ -411,7 +411,8 @@ export default {
       title: 'Skills',
       add: 'Add skill',
       none: 'No skills found',
-      noneHint: 'Try a different filter or search term.',
+      noneHint: 'Skills extend the agent with slash commands.',
+      noneFilterHint: 'Try a different filter or search term.',
       search: 'Search skills…',
       filterAll: 'All',
       filterLocal: 'On this device',
@@ -423,50 +424,75 @@ export default {
       title: 'Browser',
       subtitle: 'Let jcode operate a browser. The managed browser works out of the box; connect the Chrome extension to reuse your logged-in sessions.',
       enableTitle: 'Enable browser use',
-      enableDesc: 'Adds the browser_* tools to the agent.',
+      enableDesc: 'Allow the agent to drive a browser.',
       control: 'Control',
       managed: 'Managed browser',
+      managedChrome: 'Managed Chrome',
       noChrome: 'No Chrome found — set a path below',
-      extension: 'Google Chrome extension',
-      connected: 'Reuse your own Chrome + logins',
-      notConnected: 'Not connected — reuse your own Chrome + logins',
-      online: 'Connected',
+      noChromeDetected: 'No Chrome detected',
+      extension: 'Extension',
+      extensionFull: 'Google Chrome extension',
+      connected: 'Connected',
+      notConnected: 'Not connected',
+      online: 'Online',
       connectHint: 'To connect: install the jcode Browser Bridge extension, open its popup, and click "Auto-connect to jcode".',
       chromePath: 'Chrome path',
       approval: 'Approval',
-      navigate: 'Open sites (navigation)',
-      interact: 'Page interaction (click / type)',
+      navigate: 'Navigation',
+      interact: 'Interaction',
+      navigateLong: 'Open sites (navigation)',
+      interactLong: 'Page interaction (click / type)',
       askEachSite: 'Ask each site',
       alwaysAllow: 'Always allow',
       sitePermissions: 'Site permissions',
       add: 'Add',
-      noSitePermissions: 'No site-specific permissions yet',
+      noSitePermissions: 'No site permissions configured.',
       developerMode: 'Developer mode',
       elevatedRisk: 'Elevated risk',
-      devModeTitle: 'Enable browser_eval & raw CDP',
-      devModeDesc: "Lets the agent run JavaScript and raw DevTools commands in the page. Each call still prompts; site allow-lists don't apply.",
+      devModeTitle: 'Developer mode',
+      devModeDesc: 'Auto-approve browser actions without confirmation.',
+      backendAuto: 'Auto',
+      backendManaged: 'Managed',
+      backendExtension: 'Extension',
+      navAsk: 'nav: ask',
+      navAllow: 'nav: allow',
+      actAsk: 'act: ask',
+      actAllow: 'act: allow',
     },
     ssh: {
-      title: 'SSH Environments',
-      connect: 'Connect to remote host',
-      currentEnv: 'Current Environment',
+      title: 'SSH',
+      titleFull: 'SSH Environments',
+      connect: 'Connect',
+      connectRemote: 'Connect to remote host',
+      currentEnv: 'Current environment',
       noneConfigured: 'No saved hosts',
+      noneAliases: 'No SSH aliases',
       noneHint: 'Use {btn} to add one, or pre-configure hosts in {config}.',
+      noneAliasesHint: 'Add aliases to ~/.jcode/config.json to connect to remote workspaces.',
       connectTo: 'Connect to {name}',
       host: 'Host',
       port: 'Port',
       user: 'User',
       password: 'Password',
       key: 'Key',
+      keyAgent: 'Key / agent',
       privateKeyPath: 'Private key path',
-      passphrase: 'Passphrase (optional)',
+      keyPath: 'Key path',
+      passphrase: 'Passphrase',
+      passphraseOptional: 'Passphrase (optional)',
       savedAlias: 'Saved alias (optional)',
+      aliases: 'Saved aliases',
       noAlias: "Don't use an alias",
       saveAlias: 'Save alias',
       remove: 'Remove',
+      active: 'Active',
     },
     channels: {
-      title: 'Notification Channels',
+      title: 'Channels',
+      titleFull: 'Notification Channels',
+      manageTitle: 'Manage messaging channels',
+      manageDesc: 'WeChat, Telegram, and other channels are configured on the dedicated Channels page.',
+      openPage: 'Open Channels',
       scanQr: 'Scan with WeChat to connect',
       activate: 'Send a message to activate',
       activateBody: 'Please send any message to the WeChat bot now to activate notifications. Once activated, you can receive notifications for 24 hours.',
@@ -474,28 +500,37 @@ export default {
       integration: 'iLink Bot integration',
       connect: 'Connect',
       disconnect: 'Disconnect',
+      disable: 'Disable',
+      enable: 'Enable',
       loadingHint: 'Loading…',
       noneConfigured: 'No channels configured',
       noneHint: 'Set {flag} in {config}.',
       whenConnected: 'When connected, jcode sends approval requests and task completion notifications to your WeChat.',
-      enable: 'Enable WeChat notifications',
+      enableWechat: 'Enable WeChat notifications',
       permission: 'Notification permission',
       grant: 'Grant permission',
       test: 'Send a test notification',
       loginRequired: 'Login required',
       login: 'Login',
+      qrAlt: 'WeChat login QR code',
     },
     shortcuts: {
-      title: 'Keyboard Shortcuts',
+      title: 'Keyboard shortcuts',
+      windowsHint: 'On Windows/Linux, use Ctrl in place of ⌘.',
       items: {
+        commandPalette: 'Open command palette',
+        newChat: 'New chat',
+        openSettings: 'Open settings',
+        planMode: 'Switch to plan mode',
+        filesPanel: 'Toggle files panel',
+        changesPanel: 'Toggle changes panel',
+        toggleTerminal: 'Toggle terminal',
+        focusInput: 'Focus chat input',
         sendMessage: 'Send message',
         newLine: 'New line',
         stopAgent: 'Stop agent',
         slashCommands: 'Slash commands',
-        focusInput: 'Focus input',
         newConversation: 'New conversation',
-        openSettings: 'Open settings',
-        toggleTerminal: 'Toggle terminal',
       },
     },
     usageStats: {
@@ -607,6 +642,14 @@ export default {
     next: 'Next',
     sshDesc: 'Key/agent auth uses your local SSH keys; password & passphrase are supported.',
     auth: 'Auth',
+    authKey: 'Key / agent',
+    authPassword: 'Password',
+    host: 'Host',
+    port: 'Port',
+    user: 'User',
+    password: 'Password',
+    keyPath: 'Key path',
+    passphrase: 'Passphrase',
     hostPlaceholder: '1.2.3.4 or example.com',
     userPlaceholder: 'root',
     dirDesc: 'Choose the working directory for this remote workspace.',
diff --git a/web/src/i18n/locales/ja.ts b/web/src/i18n/locales/ja.ts
index e4671321..377e77e0 100644
--- a/web/src/i18n/locales/ja.ts
+++ b/web/src/i18n/locales/ja.ts
@@ -363,7 +363,8 @@ export default {
       title: 'スキル',
       add: 'スキルを追加',
       none: 'スキルが見つかりません',
-      noneHint: '別のフィルターや検索語をお試しください。',
+      noneHint: 'スキルはスラッシュコマンドでエージェントを拡張します。',
+      noneFilterHint: '別のフィルターや検索語を試してください。',
       search: 'スキルを検索…',
       filterAll: 'すべて',
       filterLocal: 'このデバイス',
@@ -371,56 +372,117 @@ export default {
       builtin: '組み込み',
       loadingHint: '読み込み中…',
     },
+    browser: {
+      title: 'ブラウザ',
+      subtitle: 'jcode にブラウザ操作を許可します。マネージドブラウザはすぐ使え、拡張機能でログイン済みセッションを再利用できます。',
+      enableTitle: 'ブラウザ利用を有効化',
+      enableDesc: 'エージェントがブラウザを操作できるようにします。',
+      control: '制御',
+      managed: 'マネージドブラウザ',
+      managedChrome: 'マネージド Chrome',
+      noChrome: 'Chrome が見つかりません — 下にパスを設定',
+      noChromeDetected: 'Chrome が検出されません',
+      extension: '拡張機能',
+      extensionFull: 'Google Chrome 拡張機能',
+      connected: '接続済み',
+      notConnected: '未接続',
+      online: 'オンライン',
+      connectHint: '接続方法: jcode Browser Bridge 拡張をインストールし、ポップアップから "Auto-connect to jcode" を押します。',
+      chromePath: 'Chrome パス',
+      approval: '承認',
+      navigate: 'ナビゲート',
+      interact: '操作',
+      navigateLong: 'サイトを開く（ナビゲート）',
+      interactLong: 'ページ操作（クリック / 入力）',
+      askEachSite: 'サイトごとに確認',
+      alwaysAllow: '常に許可',
+      sitePermissions: 'サイト権限',
+      add: '追加',
+      noSitePermissions: 'サイト権限は未設定です。',
+      developerMode: '開発者モード',
+      elevatedRisk: '高リスク',
+      devModeTitle: '開発者モード',
+      devModeDesc: '確認なしでブラウザ操作を自動承認します。',
+      backendAuto: '自動',
+      backendManaged: 'マネージド',
+      backendExtension: '拡張',
+      navAsk: 'nav: 確認',
+      navAllow: 'nav: 許可',
+      actAsk: 'act: 確認',
+      actAllow: 'act: 許可',
+    },
     ssh: {
-      title: 'SSH 環境',
-      connect: 'リモートホストに接続',
+      title: 'SSH',
+      titleFull: 'SSH 環境',
+      connect: '接続',
+      connectRemote: 'リモートホストに接続',
       currentEnv: '現在の環境',
-      noneConfigured: '保存済みのホストがありません',
-      noneHint: '{btn} で追加するか、{config} でホストを事前設定してください。',
+      noneConfigured: '保存済みホストなし',
+      noneAliases: 'SSH エイリアスなし',
+      noneHint: '{btn} で追加するか、{config} でホストを事前設定します。',
+      noneAliasesHint: 'リモートワークスペースに接続するには ~/.jcode/config.json にエイリアスを追加します。',
       connectTo: '{name} に接続',
       host: 'ホスト',
       port: 'ポート',
       user: 'ユーザー',
       password: 'パスワード',
-      key: 'キー',
-      privateKeyPath: '秘密鍵のパス',
-      passphrase: 'パスフレーズ（任意）',
-      savedAlias: 'エイリアスを保存（任意）',
+      key: '鍵',
+      keyAgent: '鍵 / agent',
+      privateKeyPath: '秘密鍵パス',
+      keyPath: '鍵パス',
+      passphrase: 'パスフレーズ',
+      passphraseOptional: 'パスフレーズ（任意）',
+      savedAlias: '保存エイリアス（任意）',
+      aliases: '保存済みエイリアス',
       noAlias: 'エイリアスを使わない',
       saveAlias: 'エイリアスを保存',
       remove: '削除',
+      active: '使用中',
     },
     channels: {
-      title: '通知チャネル',
+      title: 'チャネル',
+      titleFull: '通知チャネル',
+      manageTitle: 'メッセージングチャネルを管理',
+      manageDesc: 'WeChat や Telegram などのチャネルは専用のチャネルページで設定します。',
+      openPage: 'チャネルを開く',
       scanQr: 'WeChat でスキャンして接続',
-      activate: 'メッセージを送信して有効化',
-      activateBody: '今すぐ WeChat ボットにメッセージを送信して通知を有効化してください。有効化すると、24 時間通知を受け取れます。',
+      activate: 'メッセージを送って有効化',
+      activateBody: '通知を有効にするには、今すぐ WeChat ボットに任意のメッセージを送ってください。有効後 24 時間通知を受け取れます。',
       wechat: 'WeChat',
       integration: 'iLink Bot 連携',
       connect: '接続',
       disconnect: '切断',
+      disable: '無効化',
+      enable: '有効化',
       loadingHint: '読み込み中…',
-      noneConfigured: 'チャネルが設定されていません',
+      noneConfigured: 'チャネル未設定',
       noneHint: '{config} で {flag} を設定してください。',
-      whenConnected: '接続すると、jcode は承認リクエストとタスク完了通知を WeChat に送信します。',
-      enable: 'WeChat 通知を有効化',
+      whenConnected: '接続すると、承認リクエストとタスク完了通知が WeChat に送られます。',
+      enableWechat: 'WeChat 通知を有効化',
       permission: '通知権限',
-      grant: '権限を付与',
+      grant: '権限を許可',
       test: 'テスト通知を送信',
       loginRequired: 'ログインが必要',
       login: 'ログイン',
+      qrAlt: 'WeChat ログイン QR コード',
     },
     shortcuts: {
       title: 'キーボードショートカット',
+      windowsHint: 'Windows/Linux では ⌘ の代わりに Ctrl を使います。',
       items: {
-        sendMessage: 'メッセージを送信',
+        commandPalette: 'コマンドパレットを開く',
+        newChat: '新しいチャット',
+        openSettings: '設定を開く',
+        planMode: 'プランモードに切替',
+        filesPanel: 'ファイルパネル切替',
+        changesPanel: '変更パネル切替',
+        toggleTerminal: 'ターミナル切替',
+        focusInput: '入力にフォーカス',
+        sendMessage: 'メッセージ送信',
         newLine: '改行',
-        stopAgent: 'エージェントを停止',
+        stopAgent: 'エージェント停止',
         slashCommands: 'スラッシュコマンド',
-        focusInput: '入力にフォーカス',
         newConversation: '新しい会話',
-        openSettings: '設定を開く',
-        toggleTerminal: 'ターミナルを切り替え',
       },
     },
     usageStats: {
@@ -531,6 +593,14 @@ export default {
     next: '次へ',
     sshDesc: 'キー/エージェント認証はローカルの SSH 鍵を使用します。パスワードとパスフレーズもサポートしています。',
     auth: '認証',
+    authKey: '鍵 / agent',
+    authPassword: 'パスワード',
+    host: 'ホスト',
+    port: 'ポート',
+    user: 'ユーザー',
+    password: 'パスワード',
+    keyPath: '鍵パス',
+    passphrase: 'パスフレーズ',
     hostPlaceholder: '1.2.3.4 または example.com',
     userPlaceholder: 'root',
     dirDesc: 'このリモートワークスペースの作業ディレクトリを選択してください。',
diff --git a/web/src/i18n/locales/ko.ts b/web/src/i18n/locales/ko.ts
index 0029fbf9..fc6a18b3 100644
--- a/web/src/i18n/locales/ko.ts
+++ b/web/src/i18n/locales/ko.ts
@@ -362,65 +362,127 @@ export default {
     skills: {
       title: '스킬',
       add: '스킬 추가',
-      none: '스킬을 찾을 수 없습니다',
-      noneHint: '다른 필터나 검색어로 시도해 보세요.',
+      none: '스킬을 찾을 수 없음',
+      noneHint: '스킬은 슬래시 명령으로 에이전트를 확장합니다.',
+      noneFilterHint: '다른 필터나 검색어를 시도하세요.',
       search: '스킬 검색…',
       filterAll: '전체',
       filterLocal: '이 기기',
       filterBuiltin: '내장',
       builtin: '내장',
-      loadingHint: '불러오는 중…',
+      loadingHint: '로딩 중…',
+    },
+    browser: {
+      title: '브라우저',
+      subtitle: 'jcode가 브라우저를 조작하도록 합니다. 관리형 브라우저는 바로 사용 가능하며, 확장으로 로그인 세션을 재사용할 수 있습니다.',
+      enableTitle: '브라우저 사용 활성화',
+      enableDesc: '에이전트가 브라우저를 조작할 수 있게 합니다.',
+      control: '제어',
+      managed: '관리형 브라우저',
+      managedChrome: '관리형 Chrome',
+      noChrome: 'Chrome을 찾을 수 없음 — 아래에 경로를 설정하세요',
+      noChromeDetected: 'Chrome이 감지되지 않음',
+      extension: '확장',
+      extensionFull: 'Google Chrome 확장',
+      connected: '연결됨',
+      notConnected: '연결 안 됨',
+      online: '온라인',
+      connectHint: '연결 방법: jcode Browser Bridge 확장을 설치하고 팝업에서 "Auto-connect to jcode"를 클릭하세요.',
+      chromePath: 'Chrome 경로',
+      approval: '승인',
+      navigate: '탐색',
+      interact: '상호작용',
+      navigateLong: '사이트 열기 (탐색)',
+      interactLong: '페이지 상호작용 (클릭 / 입력)',
+      askEachSite: '사이트마다 묻기',
+      alwaysAllow: '항상 허용',
+      sitePermissions: '사이트 권한',
+      add: '추가',
+      noSitePermissions: '사이트 권한이 없습니다.',
+      developerMode: '개발자 모드',
+      elevatedRisk: '높은 위험',
+      devModeTitle: '개발자 모드',
+      devModeDesc: '확인 없이 브라우저 작업을 자동 승인합니다.',
+      backendAuto: '자동',
+      backendManaged: '관리형',
+      backendExtension: '확장',
+      navAsk: 'nav: 묻기',
+      navAllow: 'nav: 허용',
+      actAsk: 'act: 묻기',
+      actAllow: 'act: 허용',
     },
     ssh: {
-      title: 'SSH 환경',
-      connect: '원격 호스트에 연결',
+      title: 'SSH',
+      titleFull: 'SSH 환경',
+      connect: '연결',
+      connectRemote: '원격 호스트 연결',
       currentEnv: '현재 환경',
-      noneConfigured: '저장된 호스트가 없습니다',
-      noneHint: '{btn} 으로 추가하거나 {config} 에서 호스트를 미리 설정하세요.',
-      connectTo: '{name} 에 연결',
+      noneConfigured: '저장된 호스트 없음',
+      noneAliases: 'SSH 별칭 없음',
+      noneHint: '{btn}으로 추가하거나 {config}에 호스트를 미리 설정하세요.',
+      noneAliasesHint: '원격 워크스페이스에 연결하려면 ~/.jcode/config.json에 별칭을 추가하세요.',
+      connectTo: '{name}에 연결',
       host: '호스트',
       port: '포트',
       user: '사용자',
       password: '비밀번호',
       key: '키',
+      keyAgent: '키 / agent',
       privateKeyPath: '개인 키 경로',
-      passphrase: '패스프레이즈 (선택)',
-      savedAlias: '별명 저장 (선택)',
-      noAlias: '별명 사용 안 함',
-      saveAlias: '별명 저장',
+      keyPath: '키 경로',
+      passphrase: '암호문',
+      passphraseOptional: '암호문 (선택)',
+      savedAlias: '저장된 별칭 (선택)',
+      aliases: '저장된 별칭',
+      noAlias: '별칭 사용 안 함',
+      saveAlias: '별칭 저장',
       remove: '제거',
+      active: '사용 중',
     },
     channels: {
-      title: '알림 채널',
+      title: '채널',
+      titleFull: '알림 채널',
+      manageTitle: '메시징 채널 관리',
+      manageDesc: 'WeChat, Telegram 등 채널은 전용 채널 페이지에서 구성합니다.',
+      openPage: '채널 열기',
       scanQr: 'WeChat으로 스캔하여 연결',
       activate: '메시지를 보내 활성화',
-      activateBody: '지금 WeChat 봇에게 메시지를 보내 알림을 활성화하세요. 활성화되면 24시간 동안 알림을 받을 수 있습니다.',
+      activateBody: '알림을 활성화하려면 지금 WeChat 봇에 아무 메시지나 보내세요. 활성화 후 24시간 동안 알림을 받을 수 있습니다.',
       wechat: 'WeChat',
       integration: 'iLink Bot 연동',
       connect: '연결',
       disconnect: '연결 해제',
-      loadingHint: '불러오는 중…',
-      noneConfigured: '설정된 채널이 없습니다',
-      noneHint: '{config} 에서 {flag} 을(를) 설정하세요.',
-      whenConnected: '연결되면 jcode가 승인 요청과 작업 완료 알림을 WeChat으로 보냅니다.',
-      enable: 'WeChat 알림 활성화',
+      disable: '비활성화',
+      enable: '활성화',
+      loadingHint: '로딩 중…',
+      noneConfigured: '구성된 채널 없음',
+      noneHint: '{config}에서 {flag}를 설정하세요.',
+      whenConnected: '연결되면 승인 요청과 작업 완료 알림이 WeChat으로 전송됩니다.',
+      enableWechat: 'WeChat 알림 활성화',
       permission: '알림 권한',
-      grant: '권한 부여',
+      grant: '권한 허용',
       test: '테스트 알림 보내기',
       loginRequired: '로그인 필요',
       login: '로그인',
+      qrAlt: 'WeChat 로그인 QR 코드',
     },
     shortcuts: {
       title: '키보드 단축키',
+      windowsHint: 'Windows/Linux에서는 ⌘ 대신 Ctrl을 사용하세요.',
       items: {
-        sendMessage: '메시지 전송',
+        commandPalette: '명령 팔레트 열기',
+        newChat: '새 채팅',
+        openSettings: '설정 열기',
+        planMode: '계획 모드로 전환',
+        filesPanel: '파일 패널 전환',
+        changesPanel: '변경 패널 전환',
+        toggleTerminal: '터미널 전환',
+        focusInput: '입력창 포커스',
+        sendMessage: '메시지 보내기',
         newLine: '줄바꿈',
         stopAgent: '에이전트 중지',
-        slashCommands: '슬래시 명령어',
-        focusInput: '입력란 포커스',
+        slashCommands: '슬래시 명령',
         newConversation: '새 대화',
-        openSettings: '설정 열기',
-        toggleTerminal: '터미널 전환',
       },
     },
     usageStats: {
@@ -531,6 +593,14 @@ export default {
     next: '다음',
     sshDesc: '키/에이전트 인증은 로컬 SSH 키를 사용합니다. 비밀번호와 패스프레이즈도 지원됩니다.',
     auth: '인증',
+    authKey: '키 / agent',
+    authPassword: '비밀번호',
+    host: '호스트',
+    port: '포트',
+    user: '사용자',
+    password: '비밀번호',
+    keyPath: '키 경로',
+    passphrase: '암호문',
     hostPlaceholder: '1.2.3.4 또는 example.com',
     userPlaceholder: 'root',
     dirDesc: '이 원격 워크스페이스의 작업 디렉터리를 선택하세요.',
diff --git a/web/src/i18n/locales/zh-Hans.ts b/web/src/i18n/locales/zh-Hans.ts
index 27e098dd..385441da 100644
--- a/web/src/i18n/locales/zh-Hans.ts
+++ b/web/src/i18n/locales/zh-Hans.ts
@@ -396,7 +396,8 @@ export default {
       title: '技能',
       add: '添加技能',
       none: '未找到技能',
-      noneHint: '试试其他筛选或搜索词。',
+      noneHint: '技能通过斜杠命令扩展 agent。',
+      noneFilterHint: '试试其他筛选或搜索词。',
       search: '搜索技能…',
       filterAll: '全部',
       filterLocal: '本机',
@@ -408,50 +409,75 @@ export default {
       title: '浏览器',
       subtitle: '让 jcode 操控浏览器。托管浏览器开箱即用；连接 Chrome 扩展可复用你已登录的会话。',
       enableTitle: '启用浏览器操控',
-      enableDesc: '为 agent 添加 browser_* 工具。',
+      enableDesc: '允许 agent 驱动浏览器。',
       control: '控制',
       managed: '托管浏览器',
+      managedChrome: '托管 Chrome',
       noChrome: '未找到 Chrome — 请在下方设置路径',
-      extension: 'Google Chrome 扩展',
-      connected: '复用你自己的 Chrome 与登录态',
-      notConnected: '未连接 — 复用你自己的 Chrome 与登录态',
-      online: '已连接',
+      noChromeDetected: '未检测到 Chrome',
+      extension: '扩展',
+      extensionFull: 'Google Chrome 扩展',
+      connected: '已连接',
+      notConnected: '未连接',
+      online: '在线',
       connectHint: '连接方式：安装 jcode Browser Bridge 扩展，打开它的 popup，点 "Auto-connect to jcode"。',
       chromePath: 'Chrome 路径',
       approval: '审批',
-      navigate: '打开网站（导航）',
-      interact: '页面交互（点击 / 输入）',
+      navigate: '导航',
+      interact: '交互',
+      navigateLong: '打开网站（导航）',
+      interactLong: '页面交互（点击 / 输入）',
       askEachSite: '每个站点询问',
       alwaysAllow: '总是允许',
       sitePermissions: '站点权限',
       add: '添加',
-      noSitePermissions: '暂无站点级权限',
+      noSitePermissions: '暂无站点权限配置。',
       developerMode: '开发者模式',
       elevatedRisk: '高风险',
-      devModeTitle: '启用 browser_eval 与原始 CDP',
-      devModeDesc: '允许 agent 在页面执行 JavaScript 与原始 DevTools 命令。每次调用仍会询问；站点白名单对此无效。',
+      devModeTitle: '开发者模式',
+      devModeDesc: '自动批准浏览器操作，无需确认。',
+      backendAuto: '自动',
+      backendManaged: '托管',
+      backendExtension: '扩展',
+      navAsk: '导航: 询问',
+      navAllow: '导航: 允许',
+      actAsk: '交互: 询问',
+      actAllow: '交互: 允许',
     },
     ssh: {
-      title: 'SSH 环境',
-      connect: '连接远程主机',
+      title: 'SSH',
+      titleFull: 'SSH 环境',
+      connect: '连接',
+      connectRemote: '连接远程主机',
       currentEnv: '当前环境',
       noneConfigured: '没有已保存的主机',
+      noneAliases: '没有 SSH 别名',
       noneHint: '使用 {btn} 添加一个，或在 {config} 中预配置主机。',
+      noneAliasesHint: '在 ~/.jcode/config.json 中添加别名以连接远程工作区。',
       connectTo: '连接到 {name}',
       host: '主机',
       port: '端口',
       user: '用户',
       password: '密码',
       key: '密钥',
+      keyAgent: '密钥 / agent',
       privateKeyPath: '私钥路径',
-      passphrase: '口令（可选）',
+      keyPath: '密钥路径',
+      passphrase: '口令',
+      passphraseOptional: '口令（可选）',
       savedAlias: '保存别名（可选）',
+      aliases: '已保存别名',
       noAlias: '不使用别名',
       saveAlias: '保存别名',
       remove: '移除',
+      active: '使用中',
     },
     channels: {
-      title: '通知渠道',
+      title: '渠道',
+      titleFull: '通知渠道',
+      manageTitle: '管理消息渠道',
+      manageDesc: '微信、Telegram 等渠道在独立的渠道页面中配置。',
+      openPage: '打开渠道页',
       scanQr: '用微信扫码连接',
       activate: '发送一条消息以激活',
       activateBody: '请立即向微信机器人发送任意消息以激活通知。激活后，您可在 24 小时内接收通知。',
@@ -459,28 +485,37 @@ export default {
       integration: 'iLink Bot 集成',
       connect: '连接',
       disconnect: '断开连接',
+      disable: '禁用',
+      enable: '启用',
       loadingHint: '加载中…',
       noneConfigured: '未配置任何渠道',
       noneHint: '在 {config} 中设置 {flag}。',
       whenConnected: '连接后，jcode 会将审批请求和任务完成通知发送到您的微信。',
-      enable: '启用微信通知',
+      enableWechat: '启用微信通知',
       permission: '通知权限',
       grant: '授予权限',
       test: '发送测试通知',
       loginRequired: '需要登录',
       login: '登录',
+      qrAlt: '微信登录二维码',
     },
     shortcuts: {
       title: '键盘快捷键',
+      windowsHint: '在 Windows/Linux 上，用 Ctrl 代替 ⌘。',
       items: {
+        commandPalette: '打开命令面板',
+        newChat: '新建会话',
+        openSettings: '打开设置',
+        planMode: '切换到计划模式',
+        filesPanel: '切换文件面板',
+        changesPanel: '切换变更面板',
+        toggleTerminal: '切换终端',
+        focusInput: '聚焦输入框',
         sendMessage: '发送消息',
         newLine: '换行',
         stopAgent: '停止 Agent',
         slashCommands: '斜杠命令',
-        focusInput: '聚焦输入框',
         newConversation: '新建会话',
-        openSettings: '打开设置',
-        toggleTerminal: '切换终端',
       },
     },
     usageStats: {
@@ -591,6 +626,14 @@ export default {
     next: '下一步',
     sshDesc: '密钥/代理认证使用你本地的 SSH 密钥；支持密码和口令。',
     auth: '认证',
+    authKey: '密钥 / agent',
+    authPassword: '密码',
+    host: '主机',
+    port: '端口',
+    user: '用户',
+    password: '密码',
+    keyPath: '密钥路径',
+    passphrase: '口令',
     hostPlaceholder: '1.2.3.4 或 example.com',
     userPlaceholder: 'root',
     dirDesc: '选择此远程工作区的工作目录。',
diff --git a/web/src/i18n/locales/zh-Hant.ts b/web/src/i18n/locales/zh-Hant.ts
index d6ab5135..bc036a22 100644
--- a/web/src/i18n/locales/zh-Hant.ts
+++ b/web/src/i18n/locales/zh-Hant.ts
@@ -363,8 +363,9 @@ export default {
     skills: {
       title: '技能',
       add: '新增技能',
-      none: '未找到技能',
-      noneHint: '試試其他篩選或搜尋詞。',
+      none: '找不到技能',
+      noneHint: '技能透過斜線命令擴充 agent。',
+      noneFilterHint: '試試其他篩選或搜尋詞。',
       search: '搜尋技能…',
       filterAll: '全部',
       filterLocal: '本機',
@@ -372,56 +373,117 @@ export default {
       builtin: '內建',
       loadingHint: '載入中…',
     },
+    browser: {
+      title: '瀏覽器',
+      subtitle: '讓 jcode 操控瀏覽器。託管瀏覽器開箱即用；連接 Chrome 擴充可重用已登入工作階段。',
+      enableTitle: '啟用瀏覽器操控',
+      enableDesc: '允許 agent 驅動瀏覽器。',
+      control: '控制',
+      managed: '託管瀏覽器',
+      managedChrome: '託管 Chrome',
+      noChrome: '找不到 Chrome — 請在下方設定路徑',
+      noChromeDetected: '未偵測到 Chrome',
+      extension: '擴充功能',
+      extensionFull: 'Google Chrome 擴充功能',
+      connected: '已連線',
+      notConnected: '未連線',
+      online: '線上',
+      connectHint: '連線方式：安裝 jcode Browser Bridge 擴充，開啟 popup，點 "Auto-connect to jcode"。',
+      chromePath: 'Chrome 路徑',
+      approval: '審批',
+      navigate: '導航',
+      interact: '互動',
+      navigateLong: '開啟網站（導航）',
+      interactLong: '頁面互動（點擊 / 輸入）',
+      askEachSite: '每個站點詢問',
+      alwaysAllow: '總是允許',
+      sitePermissions: '站點權限',
+      add: '新增',
+      noSitePermissions: '尚無站點權限設定。',
+      developerMode: '開發者模式',
+      elevatedRisk: '高風險',
+      devModeTitle: '開發者模式',
+      devModeDesc: '自動批准瀏覽器操作，無需確認。',
+      backendAuto: '自動',
+      backendManaged: '託管',
+      backendExtension: '擴充',
+      navAsk: '導航: 詢問',
+      navAllow: '導航: 允許',
+      actAsk: '互動: 詢問',
+      actAllow: '互動: 允許',
+    },
     ssh: {
-      title: 'SSH 環境',
-      connect: '連線到遠端主機',
+      title: 'SSH',
+      titleFull: 'SSH 環境',
+      connect: '連線',
+      connectRemote: '連線遠端主機',
       currentEnv: '目前環境',
       noneConfigured: '沒有已儲存的主機',
-      noneHint: '使用 {btn} 新增一個，或在 {config} 中預先設定主機。',
+      noneAliases: '沒有 SSH 別名',
+      noneHint: '使用 {btn} 新增，或在 {config} 中預先設定主機。',
+      noneAliasesHint: '在 ~/.jcode/config.json 中新增別名以連線遠端工作區。',
       connectTo: '連線到 {name}',
       host: '主機',
-      port: '連接埠',
+      port: '埠',
       user: '使用者',
       password: '密碼',
       key: '金鑰',
+      keyAgent: '金鑰 / agent',
       privateKeyPath: '私鑰路徑',
-      passphrase: '通關密語（選填）',
+      keyPath: '金鑰路徑',
+      passphrase: '密語',
+      passphraseOptional: '密語（選填）',
       savedAlias: '儲存別名（選填）',
+      aliases: '已儲存別名',
       noAlias: '不使用別名',
       saveAlias: '儲存別名',
       remove: '移除',
+      active: '使用中',
     },
     channels: {
-      title: '通知管道',
+      title: '管道',
+      titleFull: '通知管道',
+      manageTitle: '管理訊息管道',
+      manageDesc: '微信、Telegram 等管道在獨立的管道頁面中設定。',
+      openPage: '開啟管道頁',
       scanQr: '用微信掃碼連線',
-      activate: '傳送一則訊息以啟用',
+      activate: '傳送訊息以啟用',
       activateBody: '請立即向微信機器人傳送任意訊息以啟用通知。啟用後，您可在 24 小時內接收通知。',
       wechat: '微信',
       integration: 'iLink Bot 整合',
       connect: '連線',
-      disconnect: '斷開連線',
+      disconnect: '中斷連線',
+      disable: '停用',
+      enable: '啟用',
       loadingHint: '載入中…',
       noneConfigured: '未設定任何管道',
       noneHint: '在 {config} 中設定 {flag}。',
-      whenConnected: '連線後，jcode 會將審批請求和工作完成通知傳送至您的微信。',
-      enable: '啟用微信通知',
+      whenConnected: '連線後，jcode 會將審批請求與任務完成通知傳送到您的微信。',
+      enableWechat: '啟用微信通知',
       permission: '通知權限',
       grant: '授予權限',
       test: '傳送測試通知',
       loginRequired: '需要登入',
       login: '登入',
+      qrAlt: '微信登入 QR 碼',
     },
     shortcuts: {
       title: '鍵盤快捷鍵',
+      windowsHint: '在 Windows/Linux 上，用 Ctrl 代替 ⌘。',
       items: {
+        commandPalette: '開啟命令面板',
+        newChat: '新增對話',
+        openSettings: '開啟設定',
+        planMode: '切換到計劃模式',
+        filesPanel: '切換檔案面板',
+        changesPanel: '切換變更面板',
+        toggleTerminal: '切換終端機',
+        focusInput: '聚焦輸入框',
         sendMessage: '傳送訊息',
         newLine: '換行',
         stopAgent: '停止 Agent',
-        slashCommands: '斜線指令',
-        focusInput: '聚焦輸入框',
+        slashCommands: '斜線命令',
         newConversation: '新增對話',
-        openSettings: '開啟設定',
-        toggleTerminal: '切換終端機',
       },
     },
     usageStats: {
@@ -532,6 +594,14 @@ export default {
     next: '下一步',
     sshDesc: '金鑰/代理認證使用你本機的 SSH 金鑰；支援密碼和通關密語。',
     auth: '認證',
+    authKey: '金鑰 / agent',
+    authPassword: '密碼',
+    host: '主機',
+    port: '埠',
+    user: '使用者',
+    password: '密碼',
+    keyPath: '金鑰路徑',
+    passphrase: '密語',
     hostPlaceholder: '1.2.3.4 或 example.com',
     userPlaceholder: 'root',
     dirDesc: '選擇此遠端工作區的工作目錄。',
diff --git a/web-react/src/lib/api.ts b/web/src/lib/api.ts
similarity index 100%
rename from web-react/src/lib/api.ts
rename to web/src/lib/api.ts
diff --git a/web-react/src/lib/apiBase.ts b/web/src/lib/apiBase.ts
similarity index 100%
rename from web-react/src/lib/apiBase.ts
rename to web/src/lib/apiBase.ts
diff --git a/web-react/src/lib/authToken.ts b/web/src/lib/authToken.ts
similarity index 100%
rename from web-react/src/lib/authToken.ts
rename to web/src/lib/authToken.ts
diff --git a/web-react/src/lib/automation.ts b/web/src/lib/automation.ts
similarity index 100%
rename from web-react/src/lib/automation.ts
rename to web/src/lib/automation.ts
diff --git a/web-react/src/lib/providerIcons.ts b/web/src/lib/providerIcons.ts
similarity index 100%
rename from web-react/src/lib/providerIcons.ts
rename to web/src/lib/providerIcons.ts
diff --git a/web/src/lib/remote.ts b/web/src/lib/remote.ts
new file mode 100644
index 00000000..339ae8c1
--- /dev/null
+++ b/web/src/lib/remote.ts
@@ -0,0 +1,44 @@
+/**
+ * Remote workspace helpers — parse labels and open the connect wizard.
+ * Mirrors web/src/stores/project.ts parseRemoteLabel / isRemotePath.
+ */
+
+import type { RemoteMeta } from './types'
+
+export type RemotePrefill = RemoteMeta & { loadTaskUuid?: string }
+
+export function isRemotePath(path: string): boolean {
+  return path.startsWith('ssh://') || path.startsWith('docker://')
+}
+
+/** Decompose ssh:// / docker:// project labels for wizard reconnect. */
+export function parseRemoteLabel(label: string): RemoteMeta | null {
+  if (label.startsWith('docker://')) {
+    const rest = label.slice('docker://'.length)
+    const slash = rest.indexOf('/')
+    const container = slash < 0 ? rest : rest.slice(0, slash)
+    const remotePath = slash < 0 ? '/' : rest.slice(slash)
+    return { kind: 'docker', host: '', user: '', port: 0, remotePath, container }
+  }
+  if (!label.startsWith('ssh://')) return null
+  const rest = label.slice('ssh://'.length)
+  const at = rest.indexOf('@')
+  if (at < 0) return null
+  const user = rest.slice(0, at)
+  const afterUser = rest.slice(at + 1)
+  const slash = afterUser.indexOf('/')
+  const hostPort = slash < 0 ? afterUser : afterUser.slice(0, slash)
+  const remotePath = slash < 0 ? '/' : afterUser.slice(slash)
+  const colon = hostPort.lastIndexOf(':')
+  const port = colon >= 0 ? parseInt(hostPort.slice(colon + 1), 10) || 22 : 22
+  return { kind: 'ssh', host: hostPort, user, port, remotePath }
+}
+
+/** Open RemoteConnectWizard (optionally prefilled for reconnect). */
+export function openRemoteConnect(prefill?: RemotePrefill | null): void {
+  window.dispatchEvent(
+    new CustomEvent<RemotePrefill | null>('jcode:open-remote-connect', {
+      detail: prefill ?? null,
+    }),
+  )
+}
diff --git a/web-react/src/lib/toolInfo.ts b/web/src/lib/toolInfo.ts
similarity index 100%
rename from web-react/src/lib/toolInfo.ts
rename to web/src/lib/toolInfo.ts
diff --git a/web-react/src/lib/types.ts b/web/src/lib/types.ts
similarity index 100%
rename from web-react/src/lib/types.ts
rename to web/src/lib/types.ts
diff --git a/web-react/src/lib/useDesktop.ts b/web/src/lib/useDesktop.ts
similarity index 80%
rename from web-react/src/lib/useDesktop.ts
rename to web/src/lib/useDesktop.ts
index cf582fdb..d22c3e22 100644
--- a/web-react/src/lib/useDesktop.ts
+++ b/web/src/lib/useDesktop.ts
@@ -54,3 +54,15 @@ export async function notify(title: string, body?: string): Promise<void> {
     }
   }
 }
+
+/**
+ * Open the OS folder picker and return the chosen absolute path, or null if the
+ * user cancelled. Throws when the native picker is unavailable so callers can
+ * fall back to the in-app folder browser (null = cancel → do nothing).
+ */
+export async function pickFolder(defaultPath?: string): Promise<string | 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
+}
diff --git a/web-react/src/lib/useTheme.ts b/web/src/lib/useTheme.ts
similarity index 80%
rename from web-react/src/lib/useTheme.ts
rename to web/src/lib/useTheme.ts
index c24b18a7..b9d0daa9 100644
--- a/web-react/src/lib/useTheme.ts
+++ b/web/src/lib/useTheme.ts
@@ -1,17 +1,16 @@
 /**
- * Theme management — React port of web/src/composables/useTheme.ts.
+ * Theme management for the React product UI.
  *
  * Named built-in themes are applied via html[data-theme], with the `.dark`
- * class kept in sync with the active theme's appearance so the existing
- * :root:not(.dark) / .dark forks in style.css keep working. A choice is
- * either a built-in theme id or the special 'system' value, which follows
- * the OS light/dark preference.
+ * class kept in sync with the active theme's appearance. A choice is either a
+ * built-in theme id or the special 'system' value (follows OS preference).
  *
- * State lives at module scope (a single source of truth) and components
- * subscribe via useSyncExternalStore, so every useTheme() instance stays in
- * sync without prop-drilling or a context provider.
+ * THEMES is generated from internal/theme/palette.go — never edit by hand.
  */
 import { useSyncExternalStore } from 'react'
+import { THEMES, type ThemeDef } from './themes.generated'
+
+export type { ThemeDef }
 
 /** A built-in named theme id, or 'system' to follow the OS preference. */
 export type ThemeName = string
@@ -20,26 +19,7 @@ const STORAGE_KEY = 'jcode_theme'
 const DEFAULT_DARK = 'jcode-dark'
 const DEFAULT_LIGHT = 'jcode-light'
 
-/**
- * The full theme list (ported from web/src/composables/themes.generated.ts).
- * Source of truth is internal/theme/palette.go. Appearance is hard-coded here
- * per-theme so the React app does not depend on the generated registry.
- */
-export interface ThemeDef {
-  id: string
-  label: string
-  appearance: 'light' | 'dark'
-}
-
-export const THEMES: ThemeDef[] = [
-  { id: 'jcode-dark', label: 'jcode Dark', appearance: 'dark' },
-  { id: 'midnight', label: 'Midnight', appearance: 'dark' },
-  { id: 'dracula', label: 'Dracula', appearance: 'dark' },
-  { id: 'nord-dark', label: 'Nord', appearance: 'dark' },
-  { id: 'jcode-light', label: 'jcode Light', appearance: 'light' },
-  { id: 'github-light', label: 'GitHub Light', appearance: 'light' },
-  { id: 'solarized-light', label: 'Solarized Light', appearance: 'light' },
-]
+export { THEMES }
 
 /** Theme picker options: the named themes plus the special 'system' value. */
 export const THEME_CHOICES: { id: ThemeName; label: string }[] = [
diff --git a/web-react/src/lib/ws.ts b/web/src/lib/ws.ts
similarity index 95%
rename from web-react/src/lib/ws.ts
rename to web/src/lib/ws.ts
index f7c9b286..6ca71dca 100644
--- a/web-react/src/lib/ws.ts
+++ b/web/src/lib/ws.ts
@@ -33,6 +33,8 @@ export interface WSHandlers {
   onSubagentProgress?: (data: import('./types').SubagentProgressData) => void
   onUserMessage?: (data: { content: string; source: string }) => void
   onTaskStatus?: (taskId: string, running: boolean) => void
+  /** Fired when the socket opens/closes so the UI can show online/offline. */
+  onConnectionChange?: (connected: boolean) => void
   /** Returns the task currently shown in the foreground. Events tagged with a
    *  DIFFERENT task id are dropped so they don't pollute the active view. */
   activeTaskId?: () => string | undefined
@@ -78,6 +80,7 @@ export class WSClient {
 
     this.ws.onopen = () => {
       this.connected = true
+      this.handlers.onConnectionChange?.(true)
       if (this.pingTimer) clearInterval(this.pingTimer)
       this.pingTimer = setInterval(() => this.send({ type: 'ping' }), 30000)
     }
@@ -107,10 +110,12 @@ export class WSClient {
 
     this.ws.onerror = () => {
       this.connected = false
+      this.handlers.onConnectionChange?.(false)
     }
 
     this.ws.onclose = () => {
       this.connected = false
+      this.handlers.onConnectionChange?.(false)
       if (this.pingTimer) {
         clearInterval(this.pingTimer)
         this.pingTimer = null
diff --git a/web/src/main.ts b/web/src/main.ts
deleted file mode 100644
index 43504bb6..00000000
--- a/web/src/main.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-
-import App from './App.vue'
-import './style.css'
-import { initDesktop } from './composables/useDesktop'
-import { initApiBase } from './composables/apiBase'
-import { i18n } from './i18n'
-
-// Tag <html> for the native desktop shell (no-op in a plain browser).
-initDesktop()
-
-// Resolve the backend API base before mounting. In browser mode (`jcode web`)
-// this is a no-op (relative URLs). In the Tauri desktop shell the page is
-// cross-origin to the Go server, so this awaits the sidecar port via the
-// `get_sidecar_port` IPC command; every request/WS then uses an absolute URL.
-// Awaited up front so no component issues a request against the wrong origin.
-// The Tauri-built page (splash/app shell) renders immediately while this
-// resolves, so there is no blank-screen penalty.
-try {
-  await initApiBase()
-} catch (err) {
-  console.error('[jcode] failed to resolve backend port:', err)
-}
-
-const app = createApp(App)
-app.use(createPinia())
-app.use(i18n)
-app.mount('#app')
diff --git a/web-react/src/main.tsx b/web/src/main.tsx
similarity index 100%
rename from web-react/src/main.tsx
rename to web/src/main.tsx
diff --git a/web/src/stores/automation.ts b/web/src/stores/automation.ts
deleted file mode 100644
index 06a22353..00000000
--- a/web/src/stores/automation.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import { api } from '@/composables/api'
-import type { AutomationItem, AutomationRun, AutomationTemplate, AutomationCreate, Automation } from '@/types/automation'
-
-export const useAutomationStore = defineStore('automation', () => {
-  const items = ref<AutomationItem[]>([])
-  const runs = ref<AutomationRun[]>([])
-  const templates = ref<AutomationTemplate[]>([])
-  const loading = ref(false)
-  const error = ref<string | null>(null)
-
-  async function fetchAll() {
-    loading.value = true
-    error.value = null
-    try {
-      const [its, rns] = await Promise.all([api.automations(), api.automationRuns()])
-      items.value = its
-      runs.value = rns
-    } catch (e) {
-      error.value = e instanceof Error ? e.message : String(e)
-    } finally {
-      loading.value = false
-    }
-  }
-
-  async function fetchTemplates() {
-    if (templates.value.length) return
-    try {
-      templates.value = await api.automationTemplates()
-    } catch {
-      // non-fatal
-    }
-  }
-
-  async function create(data: AutomationCreate): Promise<AutomationItem | null> {
-    error.value = null
-    try {
-      const created = await api.automationCreate(data)
-      await fetchAll()
-      return created
-    } catch (e) {
-      error.value = e instanceof Error ? e.message : String(e)
-      return null
-    }
-  }
-
-  async function update(id: string, data: Partial<Automation>): Promise<boolean> {
-    error.value = null
-    try {
-      await api.automationUpdate(id, data)
-      await fetchAll()
-      return true
-    } catch (e) {
-      error.value = e instanceof Error ? e.message : String(e)
-      return false
-    }
-  }
-
-  async function setEnabled(item: AutomationItem, enabled: boolean) {
-    await update(item.id, { ...stripDerived(item), enabled })
-  }
-
-  async function remove(id: string) {
-    try {
-      await api.automationDelete(id)
-      await fetchAll()
-    } catch (e) {
-      error.value = e instanceof Error ? e.message : String(e)
-    }
-  }
-
-  async function runNow(id: string) {
-    try {
-      await api.automationRunNow(id)
-      // Give the run a moment to register, then refresh recent runs.
-      setTimeout(() => { void fetchAll() }, 1200)
-    } catch (e) {
-      error.value = e instanceof Error ? e.message : String(e)
-    }
-  }
-
-  return { items, runs, templates, loading, error, fetchAll, fetchTemplates, create, update, setEnabled, remove, runNow }
-})
-
-// stripDerived returns just the editable automation fields (drops the derived
-// human_schedule/badge/state) so a PUT round-trips cleanly.
-function stripDerived(item: AutomationItem): Partial<Automation> {
-  return {
-    name: item.name,
-    prompt: item.prompt,
-    trigger: item.trigger,
-    project_path: item.project_path,
-    mode: item.mode,
-    provider: item.provider,
-    model: item.model,
-    enabled: item.enabled,
-  }
-}
diff --git a/web/src/stores/chat.ts b/web/src/stores/chat.ts
deleted file mode 100644
index 03312122..00000000
--- a/web/src/stores/chat.ts
+++ /dev/null
@@ -1,1209 +0,0 @@
-// Main chat store using Pinia
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
-import { i18n } from '@/i18n'
-import type {
-  ChatMessage,
-  ChatImage,
-  ToolCall,
-  PendingApproval,
-  TodoItem,
-  Goal,
-  TokenUpdateData,
-  SessionItem,
-  AgentMode,
-  ProviderInfo,
-  ToolDisplayInfo,
-  ModelRef,
-  AskUserQuestion,
-  AskUserAnswer,
-} from '@/types/api'
-import { normalizeMode } from '@/types/api'
-import { api } from '@/composables/api'
-import { extractToolDisplayInfo } from '@/composables/toolInfo'
-import { useProjectStore } from '@/stores/project'
-
-let _seqId = 0
-function nextSeqId() {
-  return ++_seqId
-}
-
-function genId(prefix: string) {
-  return `${prefix}_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`
-}
-
-// Timeline item: a single entry in the conversation timeline.
-export type TimelineItem =
-  | { kind: 'message'; data: ChatMessage; seq: number }
-  | { kind: 'tool'; data: ToolCall; seq: number }
-  | { kind: 'approval'; data: PendingApproval; seq: number }
-
-// A message the user composed while the agent was still running. Queued messages
-// are sent one at a time as each turn completes (terminal-style type-ahead) and
-// can be removed before they are sent.
-export interface QueuedMessage {
-  id: string
-  text: string
-  images?: ChatImage[]
-}
-
-export const useChatStore = defineStore('chat', () => {
-  // --- State ---
-  const timeline = ref<TimelineItem[]>([])
-  const todos = ref<TodoItem[]>([])
-  const goal = ref<Goal | null>(null)
-  // When armed (toggled from the input toolbar), the next message typed in the
-  // normal prompt box is submitted as the session goal instead of a chat message.
-  const goalArmed = ref(false)
-  const sessions = ref<SessionItem[]>([])
-  const isRunning = ref(false)
-  const tokenInfo = ref<TokenUpdateData | null>(null)
-  const config = ref<{ provider: string; model: string } | null>(null)
-  const pwd = ref('')
-  const wsConnected = ref(false)
-
-  // Mode & model
-  const mode = ref<AgentMode>('approval')
-  const providerName = ref('')
-  const modelName = ref('')
-  const providers = ref<ProviderInfo[]>([])
-
-  // Approval mode
-  const autoApprove = ref(false)
-
-  // Channel state
-  const channelAvailable = ref(false)
-  const channelEnabled = ref(false)
-
-  // Image support for current model
-  const imageSupport = ref(false)
-
-  // Server version
-  const serverVersion = ref('')
-
-  // Model favorites & recent
-  const favoriteModels = ref<Set<string>>(new Set())
-  const recentModels = ref<ModelRef[]>([])
-  // Per-"provider/model" reasoning-effort overrides set from the chat picker.
-  const effortOverrides = ref<Record<string, string>>({})
-
-  // Current session tracking
-  const currentSessionId = ref('')
-
-  // Type-ahead queue: messages composed while a turn is running. Drained one at
-  // a time by flushQueue() as each turn ends. See enqueueMessage/flushQueue.
-  const queuedMessages = ref<QueuedMessage[]>([])
-
-  // Current streaming text accumulator
-  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
-      .filter((i): i is TimelineItem & { kind: 'message' } => i.kind === 'message')
-      .map((i) => i.data),
-  )
-  const hasMessages = computed(() => messages.value.length > 0)
-  const activeTodos = computed(() => todos.value.filter((t) => t.status !== 'completed'))
-  const tokenPercentage = computed(() => {
-    if (!tokenInfo.value || !tokenInfo.value.model_context_limit) return 0
-    return Math.round((tokenInfo.value.total_tokens / tokenInfo.value.model_context_limit) * 100)
-  })
-  // Aggregate KV cache hit rate (0-100), or null when the provider never
-  // reported caching so the UI can render "—" instead of a misleading 0%.
-  const cacheHitPercentage = computed<number | null>(() => {
-    const t = tokenInfo.value
-    if (!t || t.cache_supported === false) return null
-    if (t.cache_hit_rate == null) return null
-    return Math.round(t.cache_hit_rate * 100)
-  })
-  const projectName = computed(() => {
-    const p = pwd.value
-    if (!p) return ''
-    const parts = p.split('/')
-    return parts[parts.length - 1] || p
-  })
-
-  // --- Actions ---
-  function addMessage(
-    role: ChatMessage['role'],
-    content: string,
-    source?: string,
-    images?: ChatImage[],
-    level?: ChatMessage['level'],
-    detail?: string,
-  ): string {
-    const id = genId('msg')
-    const msg: ChatMessage = { id, role, content, timestamp: Date.now(), source, images, level, detail }
-    timeline.value.push({ kind: 'message', data: msg, seq: nextSeqId() })
-    return id
-  }
-
-  function updateMessage(id: string, content: string) {
-    const item = timeline.value.find((i) => i.kind === 'message' && i.data.id === id)
-    if (item && item.kind === 'message') {
-      item.data.content = content
-    }
-  }
-
-  function appendAgentText(text: string) {
-    streamingText += text
-    if (!streamingMsgId) {
-      streamingMsgId = addMessage('assistant', streamingText)
-    } else {
-      updateMessage(streamingMsgId, streamingText)
-    }
-  }
-
-  function addToolCall(name: string, args: string, toolCallID?: string, displayInfo?: ToolDisplayInfo) {
-    // Flush current streaming — new text after tool will get a fresh message
-    streamingText = ''
-    streamingMsgId = ''
-
-    const tc: ToolCall = {
-      id: genId('tc'),
-      toolCallID,
-      name,
-      args,
-      status: 'running',
-      timestamp: Date.now(),
-      displayInfo,
-    }
-    timeline.value.push({ kind: 'tool', data: tc, seq: nextSeqId() })
-  }
-
-  function resolveToolCall(name: string, output: string, toolCallID?: string, error?: string, displayOutput?: string) {
-    // Prefer matching by backend tool_call_id (exact, unambiguous).
-    // Fall back to name-based scan for older events without an ID.
-    for (let i = timeline.value.length - 1; i >= 0; i--) {
-      const item = timeline.value[i]
-      if (item && item.kind === 'tool') {
-        const tc = item.data
-        if (tc.status !== 'running') continue
-        const idMatch = toolCallID && tc.toolCallID && tc.toolCallID === toolCallID
-        const nameMatch = !toolCallID && tc.name === name
-        if (idMatch || nameMatch) {
-          tc.output = output
-          tc.displayOutput = displayOutput || undefined
-          tc.error = error
-          tc.status = error ? 'error' : 'done'
-          break
-        }
-      }
-    }
-  }
-
-  /** Attach an intermediate tool event to the most recent running subagent tool call. */
-  function addSubagentProgress(agentName: string, event: string, toolName: string, detail: string) {
-    // Find the running subagent tool call (name === 'subagent') that matches the agentName
-    for (let i = timeline.value.length - 1; i >= 0; i--) {
-      const item = timeline.value[i]
-      if (item && item.kind === 'tool' && item.data.name === 'subagent' && item.data.status === 'running') {
-        if (!item.data.children) {
-          item.data.children = []
-        }
-        const children = item.data.children
-
-        if (event === 'tool_call') {
-          // Create a new child ToolCall in running state
-          children.push({
-            id: genId('sub_tc'),
-            name: toolName,
-            args: detail,
-            status: 'running',
-            timestamp: Date.now(),
-            displayInfo: extractToolDisplayInfo(toolName, detail),
-          })
-        } else if (event === 'tool_result') {
-          // Resolve the most recent running child with this toolName
-          for (let j = children.length - 1; j >= 0; j--) {
-            const child = children[j]
-            if (child && child.name === toolName && child.status === 'running') {
-              child.output = detail
-              child.status = 'done'
-              break
-            }
-          }
-        }
-        break
-      }
-    }
-  }
-
-  // Map raw backend/model error strings to a short, readable message. The raw
-  // string is preserved separately (shown collapsed) when it differs.
-  function friendlyError(raw: string): string {
-    const e = raw.toLowerCase()
-    // Phrase-based only: bare tokens like "eof" or a stray "401"/"500" in an
-    // error body (e.g. "unexpected EOF", a line number) must not be misread.
-    const t = i18n.global.t.bind(i18n.global)
-    if (e.includes('deadline exceeded') || e.includes('timed out') || e.includes('timeout'))
-      return t('errors.timeout')
-    if (
-      e.includes('connection refused') ||
-      e.includes('no such host') ||
-      e.includes('connection reset') ||
-      e.includes('dial tcp') ||
-      e.includes('network is unreachable') ||
-      e.includes('network error')
-    )
-      return t('errors.network')
-    if (e.includes('unauthorized') || e.includes('invalid api key') || e.includes('api key'))
-      return t('errors.auth')
-    if (e.includes('rate limit') || e.includes('too many requests'))
-      return t('errors.rateLimit')
-    if (
-      e.includes('internal server error') ||
-      e.includes('service unavailable') ||
-      e.includes('bad gateway') ||
-      e.includes('overloaded')
-    )
-      return t('errors.provider')
-    // Otherwise strip internal framing noise (e.g. "[NodeRunError] … node path: […]").
-    const cleaned = raw
-      .replace(/^\[[A-Za-z]+Error\]\s*/, '')
-      .replace(/\s*node path:\s*\[[^\]]*\]\s*$/i, '')
-      .trim()
-    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 = ''
-    // 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)
-    }
-    if (error) {
-      // Match only the exact cancellation forms the backend emits, so a real
-      // failure that merely mentions a canceled child context is still surfaced
-      // as an error rather than swallowed as a benign "Stopped".
-      const lower = error.trim().toLowerCase()
-      const isCancel =
-        lower === 'stopped by user' ||
-        lower === 'context canceled' ||
-        lower === 'context cancelled'
-      if (isCancel) {
-        // A user stop is expected, not an error. One stop can emit several
-        // cancellation signals (stopped-by-user, the in-flight "context
-        // canceled", node errors); collapse them into a single calm notice.
-        const last = timeline.value[timeline.value.length - 1]
-        const stoppedText = i18n.global.t('chat.stopped')
-        const alreadyNoted =
-          last?.kind === 'message' &&
-          last.data.role === 'system' &&
-          last.data.content === stoppedText
-        if (!alreadyNoted) addMessage('system', stoppedText, undefined, undefined, 'notice')
-      } else {
-        const friendly = friendlyError(error)
-        addMessage('system', friendly, undefined, undefined, 'error', friendly !== error ? error : undefined)
-      }
-    }
-    // Refresh session list & current session ID (the recorder may have been
-    // created lazily during this run).
-    fetchSessions()
-    // Advance the type-ahead queue: start the next queued message now that the
-    // turn has ended. We deliberately skip fetchHealth in that case — flushQueue
-    // optimistically sets isRunning=true for the new turn, and an in-flight
-    // health response (running=false) would otherwise clobber it. With an empty
-    // queue, refresh health as before.
-    if (queuedMessages.value.length > 0) {
-      void flushQueue()
-    } else {
-      fetchHealth()
-    }
-  }
-
-  // Queue a message typed while the agent is running. It is sent automatically
-  // when the current turn (and any earlier queued messages) complete.
-  function enqueueMessage(text: string, images?: ChatImage[]) {
-    queuedMessages.value.push({ id: genId('q'), text, images })
-  }
-
-  // Remove a still-pending queued message (its × button) before it is sent.
-  function removeQueuedMessage(id: string) {
-    queuedMessages.value = queuedMessages.value.filter((q) => q.id !== id)
-  }
-
-  // Drain the queue while the agent is idle. Sends the next message and stops as
-  // soon as it starts a turn (isRunning flips true) — the remaining queue then
-  // advances on the next agentDone. Client-handled commands (e.g. "/goal status")
-  // that start no turn are skipped over so a later real message still goes out.
-  async function flushQueue() {
-    while (!isRunning.value && queuedMessages.value.length > 0) {
-      const next = queuedMessages.value.shift()
-      if (!next) break
-      await sendMessage(next.text, next.images)
-    }
-  }
-
-  function addApprovalRequest(data: PendingApproval) {
-    timeline.value.push({ kind: 'approval', data, seq: nextSeqId() })
-  }
-
-  /**
-   * Arm a timeline ask_user tool item with a request id so its card switches to
-   * interactive answer mode. Returns true if a matching item was armed (or was
-   * already armed with this id — idempotent, so re-emits/pulls are safe).
-   * An item already armed with a *different* id is skipped, so two concurrent
-   * ask_user calls in one turn each bind to a distinct item.
-   */
-  function armAskItem(id: string, questions: AskUserQuestion[], taskId?: string): boolean {
-    for (let i = timeline.value.length - 1; i >= 0; i--) {
-      const item = timeline.value[i]
-      if (!item || item.kind !== 'tool' || item.data.name !== 'ask_user') continue
-      if (item.data.askUserId === id) return true // already armed (idempotent)
-      // Match an unarmed item: live (running) or a replayed one (done, no output).
-      if (!item.data.askUserId && (item.data.status === 'running' || (item.data.status === 'done' && !item.data.output))) {
-        item.data.status = 'running'
-        item.data.askUserId = id
-        item.data.askUserQuestions = questions
-        ;(item.data as { askUserTaskId?: string }).askUserTaskId = taskId
-        return true
-      }
-    }
-    return false
-  }
-
-  /**
-   * Handle an ask_user_request event. The tool_call event normally creates the
-   * timeline item first, so we just arm it. If no item exists — the tool_call
-   * was dropped (full event buffer), a rare but unrecoverable case — synthesize
-   * one so the question still renders instead of silently hanging the run.
-   */
-  function attachAskUserRequest(id: string, questions: AskUserQuestion[], taskId?: string) {
-    if (armAskItem(id, questions, taskId)) return
-    const args = JSON.stringify({ questions })
-    const data = {
-      id: genId('tc'),
-      name: 'ask_user',
-      args,
-      status: 'running' as const,
-      timestamp: Date.now(),
-      displayInfo: extractToolDisplayInfo('ask_user', args),
-      askUserId: id,
-      askUserQuestions: questions,
-    }
-    ;(data as { askUserTaskId?: string }).askUserTaskId = taskId
-    timeline.value.push({ kind: 'tool', data, seq: nextSeqId() })
-  }
-
-  /**
-   * Re-attach any server-side pending ask_user questions after the timeline is
-   * (re)built from a session — covers page reload / session resume mid-question,
-   * where the live ask_user_request event was already consumed and lost.
-   */
-  async function reconcileAskUser() {
-    try {
-      const pending = await api.askPending()
-      for (const req of pending) armAskItem(req.id, req.questions)
-    } catch {
-      /* ignore */
-    }
-  }
-
-  /**
-   * 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 {
-      // Echo the task id (stored when the question was armed) so the answer routes
-      // to the requesting task's engine.
-      let taskId: string | undefined
-      for (const item of timeline.value) {
-        if (item.kind === 'tool' && item.data.askUserId === id) {
-          taskId = (item.data as { askUserTaskId?: string }).askUserTaskId
-          break
-        }
-      }
-      await api.askUser(id, answers, taskId)
-      // Clear the pending state only after the answer is delivered, so a failed
-      // POST leaves the card interactive (the agent is still blocked waiting).
-      for (const item of timeline.value) {
-        if (item.kind === 'tool' && item.data.askUserId === id) {
-          item.data.askUserId = undefined
-          break
-        }
-      }
-    } catch (err: unknown) {
-      addMessage(
-        'system',
-        i18n.global.t('errors.submitAnswer', { detail: err instanceof Error ? err.message : String(err) }),
-        undefined, undefined, 'error',
-      )
-    }
-  }
-
-  function resolveApprovalLocal(id: string, approved: boolean) {
-    const item = timeline.value.find((i) => i.kind === 'approval' && i.data.id === id)
-    if (item && item.kind === 'approval') {
-      item.data.resolved = true
-      item.data.approved = approved
-    }
-  }
-
-  async function sendMessage(text: string, images?: ChatImage[]) {
-    const trimmed = text.trim()
-
-    // Goal-armed mode: the 🎯 toggle in the input toolbar arms the prompt box,
-    // and the next normal message becomes the session goal (slash commands
-    // still behave as commands).
-    if (goalArmed.value && trimmed && !trimmed.startsWith('/')) {
-      goalArmed.value = false
-      addMessage('user', text)
-      await setGoalObjective(trimmed)
-      return
-    }
-
-    // Intercept the /goal slash command so it manages the session goal instead
-    // of being sent to the model as a plain message. Grammar matches TUI/ACP:
-    // "" | "status" reports, "clear" removes, anything else sets the objective.
-    if (trimmed === '/goal' || trimmed.startsWith('/goal ')) {
-      const arg = trimmed.slice('/goal'.length).trim()
-      if (arg === '' || arg === 'status') {
-        await fetchGoal()
-        const g = goal.value
-        addMessage(
-          'system',
-          g
-            ? i18n.global.t('goal.statusReport', { status: g.status, objective: g.objective })
-            : i18n.global.t('goal.noGoal'),
-        )
-        return
-      }
-      if (arg === 'clear') {
-        await clearGoal()
-        addMessage('system', i18n.global.t('goal.cleared'))
-        return
-      }
-      addMessage('user', text)
-      await setGoalObjective(arg)
-      return
-    }
-
-    addMessage('user', text, undefined, images)
-    isRunning.value = true
-    turnStartedAt = Date.now()
-    streamingText = ''
-    streamingMsgId = ''
-    try {
-      const resp = await api.chat(
-        text,
-        mode.value,
-        currentSessionId.value || undefined,
-        images,
-      )
-      // Track the session_id returned by the backend so subsequent messages
-      // continue the same session (prevents duplicate session creation).
-      if (resp.session_id) {
-        currentSessionId.value = resp.session_id
-      }
-    } catch (err: unknown) {
-      isRunning.value = false
-      addMessage('system', err instanceof Error ? err.message : String(err))
-    }
-  }
-
-  async function resolveApproval(id: string, approved: boolean, approveAll = false) {
-    const item = timeline.value.find((i) => i.kind === 'approval' && i.data.id === id)
-    let taskId: string | undefined
-    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
-      taskId = (item.data as { task_id?: string }).task_id
-    }
-    try {
-      // Echo the task id so the resolve routes to the requesting task's engine.
-      await api.approval(id, approved, approveAll, taskId)
-      resolveApprovalLocal(id, approved)
-    } catch (err: unknown) {
-      // 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',
-        i18n.global.t('errors.approval', { detail: err instanceof Error ? err.message : String(err) }),
-        undefined, undefined, 'error',
-      )
-    }
-  }
-
-  async function stopAgent() {
-    // Stop interrupts the current turn; it does NOT clear the queue. When the
-    // turn ends (agent_done), agentDone flushes the next queued message — so Stop
-    // acts as "skip the current turn and send my next queued instruction now".
-    // To cancel pending messages, remove them individually via the × on each.
-    // Target the task currently in view so Stop interrupts exactly the run you
-    // are looking at, even if it's a backgrounded task that isn't the active
-    // engine (the backend falls back to the active task only when id is empty).
-    try {
-      await api.stop(currentSessionId.value || undefined)
-    } catch (err: unknown) {
-      console.error('Stop error:', err)
-    }
-  }
-
-  async function fetchSessions() {
-    try {
-      const list = await api.sessions()
-      // Sort newest first by created_at
-      list.sort((a, b) => {
-        if (!a.created_at || !b.created_at) return 0
-        return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
-      })
-      sessions.value = list
-    } catch (err) {
-      console.error('Failed to fetch sessions:', err)
-    }
-  }
-
-  async function deleteSession(uuid: string) {
-    try {
-      await api.deleteSession(uuid)
-      sessions.value = sessions.value.filter((s) => s.uuid !== uuid)
-    } catch (err: unknown) {
-      console.error('Failed to delete session:', err)
-    }
-  }
-
-  async function newSession() {
-    // Already on the welcome screen — nothing to do.
-    if (!currentSessionId.value && timeline.value.length === 0) return
-    try {
-      // The backend creates a fresh engine for the new task and returns its id.
-      // Bind to it so a still-running PREVIOUS task's events (tagged with its own
-      // task_id) are filtered out of this new chat instead of leaking in.
-      const resp = await api.newSession()
-      clearChat()
-      currentSessionId.value = resp.session_id || ''
-      isRunning.value = false // the new task starts idle
-      await fetchSessions()
-    } catch (err: unknown) {
-      addMessage('system', err instanceof Error ? err.message : String(err))
-    }
-  }
-
-  // resetToWelcomeAfterSwitch refreshes session-scoped state after the active
-  // workspace changed (local switch or remote bind) and lands on a fresh welcome
-  // screen so the next message starts a new task in the chosen workspace.
-  async function resetToWelcomeAfterSwitch() {
-    // fetchHealth binds currentSessionId + isRunning to the NEW active engine, so
-    // don't blank currentSessionId afterward (an empty id would let a backgrounded
-    // task's events leak into this view).
-    await fetchHealth()
-    clearChat()
-    fetchTodos()
-    fetchGoal()
-    await fetchSessions()
-  }
-
-  async function fetchTodos() {
-    try {
-      todos.value = await api.todos()
-    } catch (err) {
-      console.error('Failed to fetch todos:', err)
-    }
-  }
-
-  async function fetchGoal() {
-    try {
-      goal.value = await api.goal()
-    } catch (err) {
-      console.error('Failed to fetch goal:', err)
-    }
-  }
-
-  // setGoalObjective sets a new session goal. The backend starts working toward
-  // it immediately, so reflect the running state locally.
-  async function setGoalObjective(objective: string) {
-    try {
-      goal.value = await api.setGoal(objective, true)
-      isRunning.value = true
-    } catch (err: unknown) {
-      addMessage('system', err instanceof Error ? err.message : String(err))
-    }
-  }
-
-  async function clearGoal() {
-    try {
-      await api.clearGoal()
-      goal.value = null
-    } catch (err) {
-      console.error('Failed to clear goal:', err)
-    }
-  }
-
-  async function fetchConfig() {
-    try {
-      const c = await api.config()
-      config.value = c
-    } catch (err) {
-      console.error('Failed to fetch config:', err)
-    }
-  }
-
-  async function fetchHealth() {
-    try {
-      const h = await api.health()
-      pwd.value = h.pwd
-      providerName.value = h.provider
-      modelName.value = h.model
-      mode.value = normalizeMode(h.mode)
-      autoApprove.value = mode.value === 'full_access'
-      currentSessionId.value = h.session_id || ''
-      isRunning.value = h.running || false
-      imageSupport.value = h.image_support || false
-      serverVersion.value = h.version || ''
-      // Seed the live context indicator so it's visible at rest / after a page
-      // reload, not only after the first turn completes. Fire-and-forget.
-      api
-        .status()
-        .then((s) => {
-          if (s.token) tokenInfo.value = s.token
-        })
-        .catch(() => {})
-      return h
-    } catch (err) {
-      console.error('Failed to fetch health:', err)
-    }
-  }
-
-  async function fetchModels() {
-    try {
-      const data = await api.models()
-      providers.value = data.providers || []
-      providerName.value = data.current.provider
-      modelName.value = data.current.model
-    } catch (err) {
-      console.error('Failed to fetch models:', err)
-    }
-  }
-
-  async function switchModel(provider: string, model: string) {
-    try {
-      await api.switchModel(provider, model)
-      providerName.value = provider
-      modelName.value = model
-      // Update image support based on the new model's capabilities.
-      updateImageSupport(provider, model)
-    } catch (err: unknown) {
-      addMessage('system', i18n.global.t('errors.switchModel', { detail: err instanceof Error ? err.message : String(err) }))
-    }
-  }
-
-  function updateImageSupport(provider: string, model: string) {
-    const p = providers.value.find(pv => pv.id === provider)
-    if (p) {
-      const m = p.models.find(mv => mv.id === model)
-      imageSupport.value = m?.image_support || false
-    } else {
-      imageSupport.value = false
-    }
-  }
-
-  async function switchMode(newMode: AgentMode) {
-    try {
-      await api.switchMode(newMode)
-      mode.value = newMode
-      autoApprove.value = newMode === 'full_access'
-    } catch (err: unknown) {
-      console.error('Failed to switch mode:', err)
-    }
-  }
-
-  function clearChat() {
-    timeline.value = []
-    todos.value = []
-    goal.value = null
-    goalArmed.value = false
-    tokenInfo.value = null
-    queuedMessages.value = []
-    streamingText = ''
-    streamingMsgId = ''
-  }
-
-  async function fetchApprovalMode() {
-    try {
-      const data = await api.approvalMode()
-      autoApprove.value = data.auto_approve
-    } catch (err) {
-      console.error('Failed to fetch approval mode:', err)
-    }
-  }
-
-  // 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:
-  // Full access when on, Approval 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 ? 'full_access' : 'approval'
-    } catch (err) {
-      console.error('Failed to set auto-approve:', err)
-    }
-  }
-
-
-  async function fetchChannelState() {
-    try {
-      const data = await api.channelStatus()
-      channelAvailable.value = data.available
-      channelEnabled.value = data.state === 'enabled'
-    } catch {
-      /* ignore */
-    }
-  }
-
-  async function toggleChannel(enabled: boolean) {
-    try {
-      if (enabled) {
-        await api.channelEnable()
-        channelEnabled.value = true
-      } else {
-        await api.channelDisable()
-        channelEnabled.value = false
-      }
-    } catch (err: unknown) {
-      console.error('Failed to toggle channel:', err)
-    }
-  }
-
-  async function fetchModelState() {
-    try {
-      const data = await api.modelState()
-      recentModels.value = data.recent || []
-      const favs = new Set<string>()
-      for (const r of data.favorite || []) {
-        favs.add(`${r.provider}/${r.model}`)
-      }
-      favoriteModels.value = favs
-      effortOverrides.value = data.effort_overrides || {}
-    } catch {
-      /* ignore */
-    }
-  }
-
-  // setModelEffort records a per-model reasoning-effort choice and updates the
-  // local override map immediately. An empty effort clears it.
-  async function setModelEffort(provider: string, model: string, effort: string) {
-    const key = `${provider}/${model}`
-    const next = { ...effortOverrides.value }
-    if (effort) {
-      next[key] = effort
-    } else {
-      delete next[key]
-    }
-    effortOverrides.value = next
-    try {
-      await api.setModelEffort(provider, model, effort)
-    } catch {
-      // Revert on failure so the UI doesn't lie about what was applied.
-      effortOverrides.value = effortOverrides.value === next ? { ...effortOverrides.value } : effortOverrides.value
-    }
-  }
-
-  // getEffortOverride returns the user's per-model effort choice, or '' if none.
-  function getEffortOverride(provider: string, model: string): string {
-    return effortOverrides.value[`${provider}/${model}`] || ''
-  }
-
-  async function toggleFavorite(provider: string, model: string) {
-    try {
-      const data = await api.toggleFavorite(provider, model)
-      const key = `${provider}/${model}`
-      const favs = new Set(favoriteModels.value)
-      if (data.favorite) {
-        favs.add(key)
-      } else {
-        favs.delete(key)
-      }
-      favoriteModels.value = favs
-    } catch {
-      /* ignore */
-    }
-  }
-
-  async function toggleModelEnabled(provider: string, model: string, enabled: boolean) {
-    try {
-      await api.toggleModelEnabled(provider, model, enabled)
-      // Update the local providers list to reflect the change
-      for (const p of providers.value) {
-        if (p.id === provider) {
-          const m = p.models.find(m => m.id === model)
-          if (m) {
-            m.enabled = enabled
-          }
-        }
-      }
-    } catch {
-      /* ignore */
-    }
-  }
-
-  function isFavorite(provider: string, model: string): boolean {
-    return favoriteModels.value.has(`${provider}/${model}`)
-  }
-
-  // Providers with only enabled models (for model picker)
-  const enabledProviders = computed(() => {
-    return providers.value
-      .map(p => ({
-        ...p,
-        models: p.models.filter(m => m.enabled !== false),
-      }))
-      .filter(p => p.models.length > 0)
-  })
-
-  /** Restore the current session content if available (called on page load). */
-  async function restoreCurrentSession() {
-    if (!currentSessionId.value) return
-    try {
-      const entries = await api.session(currentSessionId.value)
-      if (entries.length === 0) return
-
-      clearChat()
-
-      const pendingToolCalls = new Map<string, ToolCall>()
-      for (const e of entries) {
-        if (e.type === 'user' && e.content) {
-          addMessage('user', e.content)
-        } else if (e.type === 'assistant' && e.content) {
-          addMessage('assistant', e.content)
-        } else if (e.type === 'tool_call' && e.name) {
-          const tc: ToolCall = {
-            id: genId('tc'),
-            toolCallID: e.tool_call_id,
-            name: e.name,
-            args: e.args || '',
-            status: 'running',
-            timestamp: e.timestamp ? new Date(e.timestamp).getTime() : Date.now(),
-            displayInfo: extractToolDisplayInfo(e.name, e.args || ''),
-          }
-          timeline.value.push({ kind: 'tool', data: tc, seq: nextSeqId() })
-          if (e.tool_call_id) {
-            pendingToolCalls.set(e.tool_call_id, tc)
-          }
-        } else if (e.type === 'tool_result') {
-          let resolved = false
-          if (e.tool_call_id) {
-            const tc = pendingToolCalls.get(e.tool_call_id)
-            if (tc) {
-              tc.output = e.output || ''
-              tc.error = e.error || ''
-              tc.status = e.error ? 'error' : 'done'
-              pendingToolCalls.delete(e.tool_call_id)
-              resolved = true
-            }
-          }
-          if (!resolved && e.name) {
-            for (let i = timeline.value.length - 1; i >= 0; i--) {
-              const item = timeline.value[i]
-              if (item && item.kind === 'tool' && item.data.name === e.name && item.data.status === 'running') {
-                item.data.output = e.output || ''
-                item.data.error = e.error || ''
-                item.data.status = e.error ? 'error' : 'done'
-                break
-              }
-            }
-          }
-        }
-      }
-      // Mark any tool calls that never got a result as done
-      for (const tc of pendingToolCalls.values()) {
-        tc.status = 'done'
-      }
-      // Re-attach any question/approval still awaiting a response on the server.
-      await reconcileAskUser()
-      await reconcileApprovals()
-      // Restore the persisted plan/goal that clearChat() above blanked. boot()
-      // also fires these via loadWorkspaceState(), but that runs concurrently and
-      // un-awaited — its fetches race our clearChat(), and since api.session() is
-      // the heaviest call clearChat() tends to land last and win, dropping the
-      // plan on reload. Re-fetching here makes restore self-consistent regardless.
-      fetchGoal()
-      fetchTodos()
-    } catch {
-      // Session file may not exist yet (lazy creation), silently ignore
-    }
-  }
-
-  async function editAndResend(messageId: string, newText: string) {
-    // Find the user message to edit
-    const msgIdx = timeline.value.findIndex(
-      i => i.kind === 'message' && i.data.id === messageId && i.data.role === 'user',
-    )
-    if (msgIdx === -1) return
-
-    // Count user messages BEFORE this message in the timeline.
-    const beforeUserMessage = timeline.value
-      .slice(0, msgIdx)
-      .filter(i => i.kind === 'message' && i.data.role === 'user')
-      .length
-
-    // Truncate backend history in-place and keep using the returned session id.
-    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 this message (inclusive) and reset streaming state
-    timeline.value.splice(msgIdx)
-    streamingText = ''
-    streamingMsgId = ''
-
-    await sendMessage(newText)
-  }
-
-  async function loadSession(uuid: string) {
-    try {
-      const entries = await api.session(uuid)
-
-      // Notify backend to switch to this session (resume) before clearing UI.
-      const resp = await api.newSession(uuid)
-      currentSessionId.value = resp.session_id || uuid
-
-      clearChat()
-      // Seed the Stop/Send button from this task's real live state: a task that
-      // is still running in the background must show Stop (so it can be
-      // interrupted) the instant you open it. The turn already started before we
-      // switched in, so no fresh agent_start arrives to flip the button — we'd
-      // otherwise be stuck showing Send over a live run. projectStore is kept
-      // current by task_status events (it's what drives the sidebar running
-      // indicator); agent_done, scoped to this task, flips it back to idle when
-      // the run ends.
-      const resumedId = resp.session_id || uuid
-      isRunning.value = !!useProjectStore().allTasks.find((t) => t.uuid === resumedId)?.running
-      // The backend restored the session's goal and todos — refresh both
-      // explicitly. clearChat() above blanked them, and no goal_update/todo_update
-      // WS push fires on a switch, so without this the Plan panel would show
-      // "no tasks" / 0/0 even though the resumed task has a live plan.
-      fetchGoal()
-      fetchTodos()
-
-      // Track pending tool calls by tool_call_id so we can match results
-      const pendingToolCalls = new Map<string, ToolCall>()
-      for (const e of entries) {
-        if (e.type === 'user' && e.content) {
-          addMessage('user', e.content)
-        } else if (e.type === 'assistant' && e.content) {
-          addMessage('assistant', e.content)
-        } else if (e.type === 'tool_call' && e.name) {
-          const tc: ToolCall = {
-            id: genId('tc'),
-            toolCallID: e.tool_call_id,
-            name: e.name,
-            args: e.args || '',
-            status: 'running',
-            timestamp: e.timestamp ? new Date(e.timestamp).getTime() : Date.now(),
-            displayInfo: extractToolDisplayInfo(e.name, e.args || ''),
-          }
-          timeline.value.push({ kind: 'tool', data: tc, seq: nextSeqId() })
-          if (e.tool_call_id) {
-            pendingToolCalls.set(e.tool_call_id, tc)
-          }
-        } else if (e.type === 'tool_result') {
-          let resolved = false
-          // First try matching by tool_call_id (exact, unambiguous)
-          if (e.tool_call_id) {
-            const tc = pendingToolCalls.get(e.tool_call_id)
-            if (tc) {
-              tc.output = e.output || ''
-              tc.error = e.error || ''
-              tc.status = e.error ? 'error' : 'done'
-              pendingToolCalls.delete(e.tool_call_id)
-              resolved = true
-            }
-          }
-          // Fallback: match by name scanning timeline backwards
-          if (!resolved && e.name) {
-            for (let i = timeline.value.length - 1; i >= 0; i--) {
-              const item = timeline.value[i]
-              if (item && item.kind === 'tool' && item.data.name === e.name && item.data.status === 'running') {
-                item.data.output = e.output || ''
-                item.data.error = e.error || ''
-                item.data.status = e.error ? 'error' : 'done'
-                break
-              }
-            }
-          }
-        }
-      }
-      // Mark any tool calls that never got a result as done (session was interrupted).
-      for (const tc of pendingToolCalls.values()) {
-        tc.status = 'done'
-      }
-      // Re-attach any question/approval still awaiting a response on the server.
-      await reconcileAskUser()
-      await reconcileApprovals()
-
-      // Seed the context indicator so the ring shows immediately on resume.
-      // total = the live static buckets (system prompt + tools + MCP + skills)
-      // plus a ~4-bytes/token estimate of the loaded history. The next real turn
-      // replaces this with the exact prompt token count from token_update.
-      try {
-        let chars = 0
-        for (const e of entries) {
-          chars += (e.content?.length || 0) + (e.args?.length || 0) + (e.output?.length || 0)
-        }
-        const msgTokens = Math.ceil(chars / 4)
-        const ts = await api.taskStats(currentSessionId.value)
-        const c = ts.context
-        const staticTokens = c
-          ? c.system_prompt_tokens + c.system_tools_tokens + c.mcp_tools_tokens + c.skills_tokens
-          : 0
-        const limit = c?.context_limit || tokenInfo.value?.model_context_limit || 0
-        const total = staticTokens + msgTokens
-        if (limit > 0 && total > 0) {
-          tokenInfo.value = {
-            total_tokens: total,
-            prompt_tokens: total,
-            completion_tokens: 0,
-            model_context_limit: limit,
-            cache_supported: false,
-          }
-        }
-      } catch {
-        // Best-effort: leave the ring hidden until the next turn populates it.
-      }
-    } catch (err: unknown) {
-      addMessage('system', i18n.global.t('errors.loadSession', { detail: err instanceof Error ? err.message : String(err) }))
-    }
-  }
-
-  return {
-    // State
-    timeline,
-    todos,
-    goal,
-    goalArmed,
-    sessions,
-    isRunning,
-    tokenInfo,
-    config,
-    pwd,
-    wsConnected,
-    mode,
-    providerName,
-    modelName,
-    providers,
-    autoApprove,
-    channelAvailable,
-    channelEnabled,
-    imageSupport,
-    serverVersion,
-    currentSessionId,
-    queuedMessages,
-    // Getters
-    messages,
-    hasMessages,
-    activeTodos,
-    tokenPercentage,
-    cacheHitPercentage,
-    projectName,
-    // Actions
-    addMessage,
-    updateMessage,
-    appendAgentText,
-    addToolCall,
-    resolveToolCall,
-    addSubagentProgress,
-    agentDone,
-    addApprovalRequest,
-    attachAskUserRequest,
-    submitAskUser,
-    reconcileAskUser,
-    reconcileApprovals,
-    resolveApproval,
-    sendMessage,
-    enqueueMessage,
-    removeQueuedMessage,
-    flushQueue,
-    stopAgent,
-    fetchSessions,
-    deleteSession,
-    newSession,
-    resetToWelcomeAfterSwitch,
-    fetchTodos,
-    fetchGoal,
-    setGoalObjective,
-    clearGoal,
-    fetchConfig,
-    fetchHealth,
-    fetchModels,
-    switchModel,
-    switchMode,
-    clearChat,
-    loadSession,
-    fetchApprovalMode,
-    setAutoApprove,
-    fetchChannelState,
-    toggleChannel,
-    restoreCurrentSession,
-    fetchModelState,
-    toggleFavorite,
-    toggleModelEnabled,
-    isFavorite,
-    recentModels,
-    favoriteModels,
-    setModelEffort,
-    getEffortOverride,
-    enabledProviders,
-    editAndResend,
-  }
-})
diff --git a/web/src/stores/project.ts b/web/src/stores/project.ts
deleted file mode 100644
index 66204f92..00000000
--- a/web/src/stores/project.ts
+++ /dev/null
@@ -1,355 +0,0 @@
-// Project management store using localStorage
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
-import { i18n } from '@/i18n'
-import type { Project, RemoteMeta, TaskItem, TaskMetaPatch } from '@/types/api'
-import { api } from '@/composables/api'
-
-// A remote workspace is identified by a scheme-qualified label:
-//   ssh://user@host:port/remote/path   or   docker://container/path
-export function isRemotePath(path: string): boolean {
-  return path.startsWith('ssh://') || path.startsWith('docker://')
-}
-
-// parseRemoteLabel decomposes a remote project label into the pieces the
-// wizard needs to reconnect. Returns null for non-remote paths.
-export function parseRemoteLabel(label: string): RemoteMeta | null {
-  if (label.startsWith('docker://')) {
-    const rest = label.slice('docker://'.length)
-    const slash = rest.indexOf('/')
-    const container = slash < 0 ? rest : rest.slice(0, slash)
-    const remotePath = slash < 0 ? '/' : rest.slice(slash)
-    return { kind: 'docker', host: '', user: '', port: 0, remotePath, container }
-  }
-  if (!isRemotePath(label)) return null
-  const rest = label.slice('ssh://'.length)
-  const at = rest.indexOf('@')
-  if (at < 0) return null
-  const user = rest.slice(0, at)
-  const afterUser = rest.slice(at + 1)
-  const slash = afterUser.indexOf('/')
-  const hostPort = slash < 0 ? afterUser : afterUser.slice(0, slash)
-  const remotePath = slash < 0 ? '/' : afterUser.slice(slash)
-  const colon = hostPort.lastIndexOf(':')
-  const port = colon >= 0 ? parseInt(hostPort.slice(colon + 1), 10) || 22 : 22
-  return { kind: 'ssh', host: hostPort, user, port, remotePath }
-}
-
-const STORAGE_KEY = 'jcode_projects'
-const ACTIVE_KEY = 'jcode_active_project'
-const FILTERS_KEY = 'jcode_sidebar_filters'
-
-// Sidebar filter / grouping / sorting preferences (driven by the filter menu).
-export type StatusFilter = 'active' | 'archived' | 'all'
-export type LastActivityFilter = 'all' | 'today' | 'week' | 'month'
-export type GroupByMode = 'project' | 'date'
-export type SortByMode = 'recency' | 'name' | 'created'
-
-export interface SidebarFilters {
-  status: StatusFilter
-  project: string // '' = all projects, otherwise a project path
-  lastActivity: LastActivityFilter
-  groupBy: GroupByMode
-  sortBy: SortByMode
-}
-
-export const DEFAULT_FILTERS: SidebarFilters = {
-  status: 'active',
-  project: '',
-  lastActivity: 'all',
-  groupBy: 'project',
-  sortBy: 'recency',
-}
-
-function loadFilters(): SidebarFilters {
-  try {
-    const raw = localStorage.getItem(FILTERS_KEY)
-    // Spread over defaults so a newly-added key is filled in for old installs.
-    return raw ? { ...DEFAULT_FILTERS, ...JSON.parse(raw) } : { ...DEFAULT_FILTERS }
-  } catch {
-    return { ...DEFAULT_FILTERS }
-  }
-}
-
-function loadProjects(): Project[] {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY)
-    return raw ? JSON.parse(raw) : []
-  } catch {
-    return []
-  }
-}
-
-function saveProjects(projects: Project[]) {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(projects))
-}
-
-export const useProjectStore = defineStore('project', () => {
-  const projects = ref<Project[]>(loadProjects())
-  const activeId = ref<string>(localStorage.getItem(ACTIVE_KEY) || '')
-
-  // Sidebar filter/sort/group prefs — persisted so they survive reloads.
-  const filters = ref<SidebarFilters>(loadFilters())
-  function setFilters(patch: Partial<SidebarFilters>) {
-    filters.value = { ...filters.value, ...patch }
-    localStorage.setItem(FILTERS_KEY, JSON.stringify(filters.value))
-  }
-  function resetFilters() {
-    setFilters({ ...DEFAULT_FILTERS })
-  }
-
-  const activeProject = computed(() =>
-    projects.value.find((p) => p.id === activeId.value) || null,
-  )
-
-  function addProject(path: string): Project {
-    // Deduplicate by path
-    const existing = projects.value.find((p) => p.path === path)
-    if (existing) return existing
-    const project: Project = {
-      id: `proj_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
-      path,
-      createdAt: Date.now(),
-    }
-    projects.value.push(project)
-    saveProjects(projects.value)
-    return project
-  }
-
-  // upsertRemoteProject records a bound remote workspace (keyed by its
-  // host-qualified label) and returns it. Unlike addProject it carries remote
-  // metadata so the tree can render it distinctly and offer reconnect.
-  function upsertRemoteProject(label: string, remote: RemoteMeta): Project {
-    const existing = projects.value.find((p) => p.path === label)
-    if (existing) {
-      existing.remote = remote
-      saveProjects(projects.value)
-      return existing
-    }
-    const project: Project = {
-      id: `proj_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
-      path: label,
-      createdAt: Date.now(),
-      remote,
-    }
-    projects.value.push(project)
-    saveProjects(projects.value)
-    return project
-  }
-
-  function removeProject(id: string) {
-    const removed = projects.value.find((p) => p.id === id)
-    projects.value = projects.value.filter((p) => p.id !== id)
-    saveProjects(projects.value)
-    if (activeId.value === id) {
-      activeId.value = ''
-      localStorage.removeItem(ACTIVE_KEY)
-    }
-    // Drop a single-project filter pointing at the project we just removed, so a
-    // stale path can't silently reactivate when that path later reappears.
-    if (removed && filters.value.project === removed.path) {
-      setFilters({ project: '' })
-    }
-  }
-
-  // removeProjectByPath drops a workspace by its path (used when its last
-  // conversation is deleted). No-op if the path isn't a tracked project — paths
-  // that only existed because they had tasks fall out of the tree on their own.
-  function removeProjectByPath(path: string) {
-    const proj = projects.value.find((p) => p.path === path)
-    if (proj) removeProject(proj.id)
-  }
-
-  function setActive(id: string) {
-    activeId.value = id
-    localStorage.setItem(ACTIVE_KEY, id)
-  }
-
-  const switching = ref(false)
-  const switchError = ref('')
-
-  async function switchToProject(id: string): Promise<boolean> {
-    const project = projects.value.find((p) => p.id === id)
-    if (!project) return false
-    // If already active, no-op.
-    if (activeId.value === id) return true
-
-    // 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. 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 = i18n.global.t('errors.remoteReconnect')
-      return false
-    }
-
-    switching.value = true
-    switchError.value = ''
-    try {
-      await api.switchProject(project.path)
-      setActive(id)
-      return true
-    } catch (err: unknown) {
-      switchError.value = err instanceof Error ? err.message : i18n.global.t('errors.switchFailed')
-      return false
-    } finally {
-      switching.value = false
-    }
-  }
-
-  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 = i18n.global.t('errors.remoteReconnect')
-      return false
-    }
-    const proj = addProject(path)
-    return switchToProject(proj.id)
-  }
-
-  function ensureCurrentProject(pwd: string) {
-    // Auto-create project for current workspace if none exists
-    const existing = projects.value.find((p) => p.path === pwd)
-    if (existing) {
-      if (!activeId.value) setActive(existing.id)
-      return
-    }
-    const proj = addProject(pwd)
-    setActive(proj.id)
-  }
-
-  function projectName(p: Project): string {
-    return p.path.split('/').filter(Boolean).pop() || p.path
-  }
-
-  function nameForPath(path: string): string {
-    return path.split('/').filter(Boolean).pop() || path
-  }
-
-  // ─── Cross-project tasks (for the sidebar tree) ───
-  const allTasks = ref<TaskItem[]>([])
-
-  async function fetchAllTasks() {
-    try {
-      allTasks.value = await api.tasks()
-    } catch {
-      allTasks.value = []
-    }
-  }
-
-  // Local workspace paths that no longer exist on disk. Populated by
-  // validateProjectPaths and used to hide dead entries from the picker, so the
-  // user never clicks one and hits "path does not exist or is not a directory".
-  const missingPaths = ref<Set<string>>(new Set())
-
-  async function validateProjectPaths() {
-    // Gather every known local workspace path (localStorage projects + paths that
-    // have tasks). Remote (ssh://) labels can't be stat'd locally, so they're
-    // never validated and never marked missing.
-    const paths = new Set<string>()
-    for (const p of projects.value) if (!isRemotePath(p.path)) paths.add(p.path)
-    for (const t of allTasks.value) if (!isRemotePath(t.project)) paths.add(t.project)
-    if (paths.size === 0) {
-      missingPaths.value = new Set()
-      return
-    }
-    try {
-      const { missing } = await api.validatePaths([...paths])
-      missingPaths.value = new Set(missing)
-    } catch {
-      // If the check itself fails, hide nothing — a stale-but-visible workspace
-      // is far less surprising than an entire list vanishing on a network blip.
-      missingPaths.value = new Set()
-    }
-  }
-
-  // Tasks grouped by project path, ordered: live work first, then pinned, then
-  // newest activity. Putting running tasks above pinned ones means whatever is
-  // actively generating is always the top row of its workspace.
-  const tasksByProject = computed(() => {
-    const map: Record<string, TaskItem[]> = {}
-    for (const t of allTasks.value) {
-      ;(map[t.project] ??= []).push(t)
-    }
-    for (const path in map) {
-      const list = map[path]
-      if (!list) continue
-      list.sort((a, b) => {
-        if (!!a.running !== !!b.running) return a.running ? -1 : 1
-        if (a.pinned !== b.pinned) return a.pinned ? -1 : 1
-        // Newest activity first.
-        const at = a.updated_at || a.created_at || ''
-        const bt = b.updated_at || b.created_at || ''
-        return bt.localeCompare(at)
-      })
-    }
-    return map
-  })
-
-  // The project nodes to render: known (localStorage) projects unioned with any
-  // project path that has tasks, so nothing is hidden just because it wasn't
-  // explicitly opened.
-  const projectsForTree = computed(() => {
-    const paths = new Set<string>(projects.value.map((p) => p.path))
-    for (const t of allTasks.value) paths.add(t.project)
-    return [...paths].map((path) => {
-      const known = projects.value.find((p) => p.path === path)
-      return { id: known?.id ?? '', path, name: nameForPath(path) }
-    })
-  })
-
-  // setTaskRunning optimistically marks a task running/idle in the sidebar from a
-  // task_status WS event (the authoritative live state is re-synced by a
-  // following fetchAllTasks).
-  function setTaskRunning(uuid: string, running: boolean) {
-    const t = allTasks.value.find((x) => x.uuid === uuid)
-    if (t) {
-      t.running = running
-      if (running) t.updated_at = new Date().toISOString()
-    }
-  }
-
-  async function updateTaskMeta(uuid: string, patch: TaskMetaPatch) {
-    // Optimistic local update, then persist.
-    const t = allTasks.value.find((x) => x.uuid === uuid)
-    if (t) Object.assign(t, patch)
-    try {
-      await api.updateTask(uuid, patch)
-    } catch {
-      await fetchAllTasks() // resync on failure
-    }
-  }
-
-  return {
-    projects,
-    activeId,
-    activeProject,
-    switching,
-    switchError,
-    addProject,
-    upsertRemoteProject,
-    removeProject,
-    removeProjectByPath,
-    setActive,
-    switchToProject,
-    openProject,
-    ensureCurrentProject,
-    projectName,
-    nameForPath,
-    allTasks,
-    fetchAllTasks,
-    missingPaths,
-    validateProjectPaths,
-    setTaskRunning,
-    tasksByProject,
-    projectsForTree,
-    updateTaskMeta,
-    filters,
-    setFilters,
-    resetFilters,
-  }
-})
diff --git a/web/src/stores/usage.ts b/web/src/stores/usage.ts
deleted file mode 100644
index ce2a9568..00000000
--- a/web/src/stores/usage.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import { api } from '@/composables/api'
-import type { UsageStats, TaskStats } from '@/types/api'
-
-// Global usage-statistics store. Kept separate from chat.ts so the stats page
-// (a lazily-rendered Settings tab) doesn't bloat the hot chat store.
-export const useUsageStore = defineStore('usage', () => {
-  const stats = ref<UsageStats | null>(null)
-  const loading = ref(false)
-  const error = ref<string | null>(null)
-  const rangeDays = ref(30)
-
-  // Per-task context-capacity stats, keyed by session UUID.
-  const taskStats = ref<TaskStats | null>(null)
-  const taskLoading = ref(false)
-
-  async function fetchTaskStats(uuid: string) {
-    if (!uuid) return
-    taskLoading.value = true
-    try {
-      taskStats.value = await api.taskStats(uuid)
-    } catch {
-      taskStats.value = null
-    } finally {
-      taskLoading.value = false
-    }
-  }
-
-  async function fetchStats(days = rangeDays.value) {
-    loading.value = true
-    error.value = null
-    rangeDays.value = days
-    try {
-      stats.value = await api.usageStats(days)
-    } catch (e) {
-      error.value = e instanceof Error ? e.message : String(e)
-    } finally {
-      loading.value = false
-    }
-  }
-
-  return { stats, loading, error, rangeDays, fetchStats, taskStats, taskLoading, fetchTaskStats }
-})
diff --git a/web/src/style.css b/web/src/style.css
deleted file mode 100644
index 624c8bb4..00000000
--- a/web/src/style.css
+++ /dev/null
@@ -1,228 +0,0 @@
-@import 'tailwindcss';
-@plugin '@tailwindcss/typography';
-@custom-variant dark (&:where(.dark, .dark *));
-@import './styles/tokens.css';
-@import './styles/tokens.generated.css';
-@import './styles/animations.css';
-
-/* ─── Global ─── */
-html {
-  font-family: var(--font-sans);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-}
-
-::selection {
-  background: var(--accent-selection);
-}
-
-/* ─── Native desktop (Tauri macOS overlay title bar) ───
-   Reserve a thin draggable strip at the top for the OS traffic-light buttons.
-   These MUST be global (not App.vue's <style scoped>): Vue's scoped compiler
-   mangles `:global(html.is-tauri-macos) .child` into `html.is-tauri-macos`,
-   dropping the descendant — which put `padding-top` on <html> and made the whole
-   window scroll 28px. Plain global selectors avoid that. padding-top on the
-   100dvh .app-shell is border-box, so it never overflows the viewport. */
-.titlebar-drag {
-  display: none;
-}
-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 (48px). 28 + 20 = 48 → consistent clearance either way, leaving a
-   clear gap below the floating chip. The Automations page shares the chat
-   canvas's inset-surface geometry, so it gets the same override so both pages
-   align. */
-html.is-tauri-macos .chat-panel,
-	html.is-tauri-macos .page-surface {
-  margin-top: 20px;
-}
-html.is-tauri-macos .titlebar-drag {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 28px;
-  /* Above the sidebar (--z-sidebar: 30) so it catches drags, but below
-     --z-modal (50) so the Settings overlay covers it. */
-  z-index: 45;
-}
-
-/* ─── Non-selectable chrome ───
-   App chrome (sidebar, top bar, composer controls, menus, settings nav) is not
-   text-selectable, the way a native app behaves. Real content — chat messages,
-   code, terminal output, and form fields — opts selection back in. */
-.app-shell,
-.settings-shell {
-  -webkit-user-select: none;
-  user-select: none;
-}
-.prose-chat,
-.prose-chat *,
-input,
-textarea,
-[contenteditable='true'],
-pre,
-code,
-.fv-pre,
-.preview-code,
-.xterm,
-.xterm *,
-[data-selectable],
-[data-selectable] * {
-  -webkit-user-select: text;
-  user-select: text;
-}
-
-/* ─── Scrollbars: hidden, scrolling preserved (native-app feel) ─── */
-* {
-  scrollbar-width: none; /* Firefox */
-}
-*::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-}
-
-/* ─── Focus ring ─── keyboard-only via :focus-visible. Restores an a11y
-   affordance that was previously removed outright. Text fields signal focus
-   through their own border, so they opt out to avoid a double ring. */
-*:focus-visible {
-  outline: 2px solid var(--color-border-focus, var(--color-primary));
-  outline-offset: 2px;
-}
-input:focus-visible,
-textarea:focus-visible,
-select:focus-visible {
-  outline: none;
-}
-
-/* ─── Prose overrides for chat messages ─── */
-.prose-chat {
-  --tw-prose-body: var(--color-muted-foreground);
-  --tw-prose-headings: var(--color-foreground);
-  --tw-prose-links: var(--color-primary);
-  --tw-prose-bold: var(--color-foreground);
-  --tw-prose-code: var(--color-foreground);
-  --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 */
-}
-
-/* Tighter paragraph spacing — GitHub uses margin-bottom: 16px, no top margin */
-.prose-chat p {
-  margin-top: 0.6em;
-  margin-bottom: 0.6em;
-}
-.prose-chat p:first-child {
-  margin-top: 0;
-}
-.prose-chat p:last-child {
-  margin-bottom: 0;
-}
-/* Tighter list spacing */
-.prose-chat ul,
-.prose-chat ol {
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-.prose-chat li {
-  margin-top: 0.25em;
-  margin-bottom: 0.25em;
-}
-
-.prose-chat pre {
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--code-border);
-  font-size: 0.8125rem;
-  line-height: 1.625;
-  padding: 0.875em 1em;
-  background: var(--code-bg);
-  color: var(--hljs-fg);
-}
-
-/* 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);
-  font-size: 0.8125em;
-  font-family: var(--font-mono);
-  background: var(--color-muted);
-  color: var(--color-foreground);
-}
-
-.prose-chat a {
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  text-decoration-color: var(--accent-border);
-  transition: text-decoration-color 150ms;
-}
-.prose-chat a:hover {
-  text-decoration-color: var(--color-primary);
-}
-
-/* ─── Noise texture overlay ─── */
-.noise-bg::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  opacity: 0.015;
-  pointer-events: none;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-}
-
-/* ─── Tool Card Refinements ─── */
-
-/* Smooth expand/collapse transition */
-.tool-trigger {
-  transition: background-color 150ms var(--ease-out),
-              border-color 150ms var(--ease-out);
-}
-
-/* Context tool group: collapsed summary of read-only tools */
-.tool-context-group {
-  border-radius: var(--radius-lg);
-  border: 1px solid;
-  padding: 0.25rem 0.5rem;
-  margin: 0.25rem 0;
-}
-.tool-context-group {
-  border-color: var(--color-border);
-  background: var(--color-muted);
-}
-
-/* Diff change bars — colored blocks showing additions/deletions */
-.diff-bar-add {
-  background: var(--color-success-fg);
-}
-.diff-bar-del {
-  background: var(--color-error-fg);
-}
-.diff-bar-empty {
-  background: var(--color-border);
-}
-
-/* ─── 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);
-}
-.xterm-viewport {
-  background-color: var(--term-bg) !important;
-}
diff --git a/web/src/styles.css b/web/src/styles.css
new file mode 100644
index 00000000..929bb8b7
--- /dev/null
+++ b/web/src/styles.css
@@ -0,0 +1,360 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* jcode-ui ships its own tokens + component styles via jcode-ui/styles.css.
+   It brings in the base :root/.dark tokens, animations, and component-local CSS. */
+@import 'jcode-ui/styles.css';
+
+/* Generated themes (dracula, nord, midnight, solarized, etc.) — produced by
+   `go generate ./internal/theme/...` from palette.go. Defines
+   html[data-theme="<id>"] color overrides. Copied from web/src/styles/. */
+@import './styles/tokens.generated.css';
+
+/* ─── Layout sizing fallbacks ───
+   jcode-ui/styles.css should bring these in, but declare them at the app root
+   as a safety net so the sidebar/header never collapse if the workspace link
+   is stale or the package dist hasn't been rebuilt. Mirrors web/src/styles/tokens.css. */
+:root {
+  --sidebar-width: 20rem;
+  --sidebar-collapsed-width: 0px;
+  --header-height: 3.25rem;
+}
+
+/* ─── Global chrome (mirrors web/src/style.css) ─── */
+html {
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+::selection {
+  background: var(--accent-selection);
+}
+
+/* App chrome is not text-selectable (native-app feel). Real content opts back in. */
+.app-shell,
+.settings-shell {
+  -webkit-user-select: none;
+  user-select: none;
+}
+.jcode-prose,
+.jcode-prose *,
+.jcode-selectable,
+.jcode-selectable *,
+input,
+textarea,
+[contenteditable='true'],
+pre,
+code,
+.xterm,
+.xterm *,
+[data-selectable],
+[data-selectable] * {
+  -webkit-user-select: text;
+  user-select: text;
+}
+
+/* Scrollbars: hidden, scrolling preserved */
+* {
+  scrollbar-width: none; /* Firefox */
+}
+*::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+/* Focus ring — keyboard-only via :focus-visible. Text fields signal focus
+   through their own border, so they opt out to avoid a double ring. */
+*:focus-visible {
+  outline: 2px solid var(--color-border-focus, var(--color-primary));
+  outline-offset: 2px;
+}
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: none;
+}
+
+/* xterm terminal — background follows the terminal token; thin scrollbar
+   overrides the global hide so long scrollback stays navigable. */
+.xterm {
+  background-color: var(--term-bg);
+  height: 100%;
+  padding: 4px 6px;
+}
+.xterm-viewport {
+  background-color: var(--term-bg) !important;
+  border-radius: 0;
+}
+.xterm-viewport::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.xterm-viewport::-webkit-scrollbar-track {
+  background: transparent;
+}
+.xterm-viewport::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: var(--radius-xs);
+}
+
+/* Markdown prose parity with Vue .prose-chat (jcode-ui uses .jcode-prose). */
+.jcode-prose {
+  --tw-prose-body: var(--color-muted-foreground);
+  --tw-prose-headings: var(--color-foreground);
+  --tw-prose-links: var(--color-primary);
+  --tw-prose-bold: var(--color-foreground);
+  --tw-prose-code: var(--color-foreground);
+  --tw-prose-pre-bg: var(--code-bg);
+  --tw-prose-pre-code: var(--hljs-fg);
+  line-height: 1.625;
+  font-size: 0.9375rem; /* 15px */
+}
+.jcode-prose p {
+  margin-top: 0.6em;
+  margin-bottom: 0.6em;
+}
+.jcode-prose p:first-child {
+  margin-top: 0;
+}
+.jcode-prose p:last-child {
+  margin-bottom: 0;
+}
+.jcode-prose ul,
+.jcode-prose ol {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+.jcode-prose li {
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+}
+.jcode-prose pre {
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--code-border);
+  font-size: 0.8125rem;
+  line-height: 1.625;
+  padding: 0.875em 1em;
+  background: var(--code-bg);
+  color: var(--hljs-fg);
+}
+.jcode-prose code:not(pre code) {
+  padding: 0.15em 0.4em;
+  border-radius: var(--radius-sm);
+  font-size: 0.8125em;
+  font-family: var(--font-mono);
+  background: var(--color-muted);
+  color: var(--color-foreground);
+}
+.jcode-prose a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-color: var(--accent-border);
+  transition: text-decoration-color 150ms;
+}
+.jcode-prose a:hover {
+  text-decoration-color: var(--color-primary);
+}
+
+/* Table styles live primarily in jcode-ui/components.css; keep a thin safety
+   net here so tables still look right if the package stylesheet is stale. */
+.jcode-prose .jcode-md-table-wrap {
+  margin: 0.85em 0;
+  max-width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+}
+.jcode-prose th,
+.jcode-prose td {
+  padding: 0.55rem 0.85rem;
+  text-align: left;
+  vertical-align: top;
+  border-bottom: 1px solid var(--color-border);
+}
+.jcode-prose thead th {
+  background: var(--color-muted);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+/* ─── Layout chrome (matches Vue App.vue) ───
+   Sidebar floats on the shell background with NO border. The main canvas
+   (chat-panel / page-surface) is a separate inset card with full 2xl radius —
+   including the top-left and bottom-left corners — so it reads as a wrapped
+   surface next to the free sidebar, not a shared frame. */
+
+.sb-root {
+  /* No border, no divider — "no cage" principle from Vue Sidebar.vue. */
+  background: var(--color-background);
+  border: none;
+}
+
+.workspace-main {
+  /* Main column is transparent shell; the inset surface owns the chrome. */
+  min-width: 0;
+  background: transparent;
+}
+
+/* Chat + secondary pages: inset rounded surface (包裹感). Full 2xl radius
+   on ALL corners — including top-left / bottom-left — because the sidebar
+   sits outside this card (not sharing a frame). */
+.chat-panel,
+.page-surface {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-2xl);
+  /* Top margin clears the floating TopBar; left/right/bottom give breathing
+     room so the left corners are visibly rounded against the shell. */
+  margin: 48px 14px 14px;
+  box-shadow: var(--shadow-sm);
+  min-width: 0;
+}
+
+/* chat-panel must NOT use overflow:hidden — that would clip the composer's
+   upward model/slash menus (matches Vue App.vue). page-surface can clip. */
+.page-surface {
+  overflow: hidden;
+}
+
+/* Feather (羽化) the bottom edge of the timeline so messages softly dissolve
+   into the surface as they meet the composer, instead of being hard-cut by a
+   border-t. Mask is background-agnostic (content goes transparent). Mirrors
+   web/src/App.vue `.messages-feather`. */
+.messages-feather {
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
+  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
+}
+
+.provider-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  line-height: 0;
+}
+.provider-icon svg {
+  width: 1em;
+  height: 1em;
+  display: block;
+}
+.provider-icon-fallback {
+  border-radius: 6px;
+  background: var(--color-secondary);
+  color: var(--color-muted-foreground);
+  font-weight: 600;
+  line-height: 1;
+}
+
+/* ─── New-task welcome ─── */
+.welcome {
+  position: relative;
+}
+.welcome-aura {
+  position: absolute;
+  z-index: 0;
+  top: 40%;
+  left: 50%;
+  width: min(640px, 78%);
+  height: 420px;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  background: radial-gradient(
+    ellipse at center,
+    color-mix(in srgb, var(--color-primary) 13%, transparent),
+    transparent 70%
+  );
+  filter: blur(6px);
+}
+.welcome-hero,
+.welcome-composer {
+  position: relative;
+  z-index: 1;
+}
+.welcome-logo {
+  display: flex;
+  align-items: center;
+  margin-bottom: 26px;
+  font-family: var(--font-mono);
+  font-size: 26px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+.welcome-logo .wl-dim {
+  color: var(--color-muted-foreground);
+}
+.welcome-logo .wl-j {
+  color: var(--color-primary);
+  text-shadow: 0 0 22px color-mix(in srgb, var(--color-primary) 50%, transparent);
+}
+.welcome-logo .wl-fg {
+  color: var(--color-foreground);
+}
+.welcome-title {
+  margin-bottom: 12px;
+  color: var(--color-foreground);
+  font-family: var(--font-sans);
+  font-size: 30px;
+  font-weight: 600;
+  line-height: 1.1;
+  text-align: center;
+  text-wrap: balance;
+}
+.welcome-sub {
+  max-width: 24rem;
+  color: var(--color-muted-foreground);
+  font-size: 13.5px;
+  line-height: 1.6;
+  text-align: center;
+}
+.welcome-kbd {
+  padding: 1px 6px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-muted);
+  font-family: var(--font-mono);
+  font-size: 10px;
+}
+
+@media (max-width: 640px) {
+  .chat-panel,
+  .page-surface {
+    margin: 2px 8px 8px;
+  }
+  .welcome-title {
+    font-size: 24px;
+  }
+}
+
+/* ─── Title-bar drag strip (Tauri desktop only) ───
+   In the Tauri shell the window uses an overlay title bar; this reserves the
+   band the traffic-light buttons float over and lets the user drag the window.
+   In the browser it's hidden. Mirrors web/src/style.css. */
+.titlebar-drag {
+  display: none;
+}
+html.is-tauri-macos .app-shell,
+html.is-tauri-macos .settings-shell {
+  padding-top: 28px;
+}
+html.is-tauri-macos .setup-frame {
+  padding-top: 28px;
+}
+/* Desktop title-bar already lifts content; collapse the panel's own top
+   margin so the floating chip + surface stay aligned with Vue. */
+html.is-tauri-macos .chat-panel,
+html.is-tauri-macos .page-surface {
+  margin-top: 20px;
+}
+html.is-tauri-macos .titlebar-drag {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 28px;
+  z-index: 45;
+}
diff --git a/web/src/styles/animations.css b/web/src/styles/animations.css
deleted file mode 100644
index 03dbdb58..00000000
--- a/web/src/styles/animations.css
+++ /dev/null
@@ -1,205 +0,0 @@
-/*
- * Animations — jcode
- * Keyframes and utility classes for motion design.
- */
-
-/* ─── Keyframes ─── */
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes fade-up {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fade-down {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slide-in-right {
-  from {
-    opacity: 0;
-    transform: translateX(12px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes slide-in-left {
-  from {
-    opacity: 0;
-    transform: translateX(-12px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes scale-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes shimmer {
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
-}
-
-@keyframes pulse-glow {
-  0%, 100% {
-    box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 20%, transparent);
-  }
-  50% {
-    box-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 40%, transparent);
-  }
-}
-
-@keyframes dot-pulse {
-  0%, 80%, 100% {
-    opacity: 0.3;
-    transform: scale(0.8);
-  }
-  40% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes spin-slow {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-@keyframes breathing {
-  0%, 100% { opacity: 0.5; }
-  50% { opacity: 1; }
-}
-
-/* ─── Utility Classes ─── */
-.animate-fade-in {
-  animation: fade-in var(--duration-slow) var(--ease-out) both;
-}
-
-.animate-fade-up {
-  animation: fade-up var(--duration-slow) var(--ease-out) both;
-}
-
-.animate-fade-down {
-  animation: fade-down var(--duration-slow) var(--ease-out) both;
-}
-
-.animate-slide-in-right {
-  animation: slide-in-right var(--duration-slow) var(--ease-out) both;
-}
-
-.animate-scale-in {
-  animation: scale-in var(--duration-slow) var(--ease-out) both;
-}
-
-.animate-shimmer {
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    oklch(1 0 0 / 0.05) 50%,
-    transparent 100%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 2s infinite;
-}
-
-.animate-pulse-glow {
-  animation: pulse-glow 2s ease-in-out infinite;
-}
-
-.animate-breathing {
-  animation: breathing 2s ease-in-out infinite;
-}
-
-/* Reusable dot-pulse utility (keyframe defined above) for the thinking footer. */
-.animate-dot-pulse {
-  animation: dot-pulse 1.4s ease-in-out infinite both;
-}
-
-/* "Thinking…" label — same text-sweep idiom as ToolCallCard's .shimmer-running,
-   so the global working cue and running tools share one motion vocabulary. */
-@keyframes thinking-sweep {
-  0%   { background-position: -200% center; }
-  100% { background-position: 200% center; }
-}
-.thinking-label {
-  background: linear-gradient(
-    90deg,
-    var(--color-muted-foreground) 20%,
-    var(--color-foreground) 50%,
-    var(--color-muted-foreground) 80%
-  );
-  background-size: 200% auto;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  color: transparent; /* non-webkit fallback */
-  animation: thinking-sweep 1.8s linear infinite;
-  letter-spacing: 0.01em;
-}
-
-/* Stagger children */
-.stagger-children > * {
-  animation: fade-up var(--duration-slow) var(--ease-out) both;
-}
-.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
-.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
-.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
-.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
-.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
-.stagger-children > *:nth-child(6) { animation-delay: 250ms; }
-.stagger-children > *:nth-child(7) { animation-delay: 300ms; }
-.stagger-children > *:nth-child(8) { animation-delay: 350ms; }
-
-/* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  .animate-fade-in,
-  .animate-fade-up,
-  .animate-fade-down,
-  .animate-slide-in-right,
-  .animate-scale-in,
-  .animate-shimmer,
-  .animate-pulse-glow,
-  .animate-breathing,
-  .animate-spin,
-  .animate-pulse,
-  .animate-dot-pulse,
-  .thinking-label,
-  .stagger-children > * {
-    animation: none !important;
-  }
-  /* Repaint the clipped-gradient label as solid muted text so the word stays
-     visible once the sweep is frozen. */
-  .thinking-label {
-    -webkit-text-fill-color: var(--color-muted-foreground);
-    color: var(--color-muted-foreground);
-  }
-}
diff --git a/web/src/styles/tokens.css b/web/src/styles/tokens.css
deleted file mode 100644
index e7165cfa..00000000
--- a/web/src/styles/tokens.css
+++ /dev/null
@@ -1,263 +0,0 @@
-/*
- * Design Tokens — jcode
- * Orange accent color system with light/dark mode support.
- */
-
-:root {
-  /* ─── Fonts ─── */
-  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
-
-  /* ─── Radii ─── one scale; map by role, never hardcode px.
-   *   xs  status dots, tiny chips, kbd       sm  badges, small controls
-   *   md  rows, menu items, inputs           lg  buttons, cards, dropdowns, panels
-   *   xl  dialogs / popovers                 2xl hero composer
-   */
-  --radius-xs: 3px;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
-  --radius-2xl: 16px;
-  --radius-pill: 9999px;
-
-  /* ─── Shadows & elevation ─── one warm-tinted scale (near-invisible on dark
-   * surfaces, which is correct). sm = resting card · md = dropdown/menu ·
-   * lg = dialog/modal · xl = floating hero (the centered composer). */
-  --shadow-sm: 0 1px 2px rgba(24, 20, 16, 0.06);
-  --shadow-md: 0 4px 14px -4px rgba(24, 20, 16, 0.12);
-  --shadow-lg: 0 14px 36px -14px rgba(24, 20, 16, 0.20);
-  --shadow-xl: 0 1px 2px rgba(24, 20, 16, 0.04), 0 24px 56px -28px rgba(24, 20, 16, 0.26);
-
-  /* Modal scrim — one backdrop for every dialog/popover overlay. */
-  --backdrop: rgba(20, 18, 16, 0.5);
-
-  /* ─── Accent washes ─── the single source for orange tints. Derived from
-   * --color-primary via color-mix so every theme (and dark mode) adapts, and so
-   * the 8 ad-hoc rgba(255,132,0,…) alphas collapse to three semantic steps.
-   *   soft   = resting active row / subtle hover
-   *   base   = active control / highlighted button / selected item
-   *   strong = hover-on-active / emphasis
-   * border = accent hairline · fill = vivid progress · selection = ::selection */
-  --accent-wash-soft: color-mix(in srgb, var(--color-primary) 8%, transparent);
-  --accent-wash: color-mix(in srgb, var(--color-primary) 11%, transparent);
-  --accent-wash-strong: color-mix(in srgb, var(--color-primary) 16%, transparent);
-  --accent-border: color-mix(in srgb, var(--color-primary) 30%, transparent);
-  --accent-fill: color-mix(in srgb, var(--color-primary) 45%, transparent);
-  --accent-selection: color-mix(in srgb, var(--color-primary) 22%, transparent);
-
-  /* ─── Neutral accent ─── the "everything else" color. The brand orange
-   * (--color-primary) is now reserved for the welcome hero + send button only;
-   * every other control/selection/running-state uses this neutral foreground
-   * tint instead, so the UI reads as calm and monochrome rather than flooded
-   * with orange. It's a single alias so the whole de-emphasis can be retuned
-   * (e.g. to muted-foreground) by editing one line. */
-  --color-accent-neutral: var(--color-foreground);
-  --neutral-wash-soft: color-mix(in srgb, var(--color-foreground) 8%, transparent);
-  --neutral-wash: color-mix(in srgb, var(--color-foreground) 11%, transparent);
-  --neutral-wash-strong: color-mix(in srgb, var(--color-foreground) 16%, transparent);
-  --neutral-border: color-mix(in srgb, var(--color-foreground) 30%, transparent);
-
-  /* Interactive conventions */
-  --color-border-active: var(--color-primary);
-  --icon-stroke: 2;
-
-  /* ─── Status indicators ─── */
-  /* Saturated "online" green for small status dots. Distinct from
-   * --color-success-fg (a dark text token tuned for the success chip), which
-   * reads near-black on a tiny dot in light mode. */
-  --color-success: #16A34A;
-
-  /* ─── Z-index scale ─── */
-  --z-sidebar: 30;
-  --z-header: 20;
-  --z-dropdown: 40;
-  --z-modal: 50;
-  --z-toast: 60;
-
-  /* ─── Transitions ─── */
-  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
-  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-  --duration-fast: 100ms;
-  --duration-normal: 150ms;
-  --duration-slow: 300ms;
-  --duration-slower: 500ms;
-
-  /* ─── Sizing ─── */
-  --sidebar-width: 20rem;
-  --sidebar-collapsed-width: 0px;
-  --header-height: 3.25rem;
-
-  /* ─── Colors (light mode) ─── */
-  --color-primary: #FF8400;
-  --color-background: #F2F3F0;
-  --color-surface: #FFFFFF;
-  --color-foreground: #111111;
-  --color-muted-foreground: #666666;
-  --color-border: #CBCCC9;
-  --color-muted: #F2F3F0;
-  --color-secondary: #E7E8E5;
-  --color-secondary-foreground: #111111;
-  --color-success-bg: #DFE6E1;
-  --color-success-fg: #004D1A;
-  --color-error-bg: #E5DCDA;
-  --color-error-fg: #8C1C00;
-  --color-warning-bg: #E9E3D8;
-  --color-warning-fg: #804200;
-  --color-info-bg: #DFDFE6;
-  --color-info-fg: #000066;
-  --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;
-  --hljs-string: #047857;
-  --hljs-comment: #a1a1aa;
-  --hljs-number: #b45309;
-  --hljs-title: #7c3aed;
-  --hljs-type: #dc2626;
-  --hljs-params: #c026d3;
-  --hljs-variable: #ca8a04;
-  --hljs-function: #7c3aed;
-  --hljs-meta: #71717a;
-  --hljs-property: #2563eb;
-  --hljs-punctuation: #a1a1aa;
-}
-
-/* ─── Dark Mode ─── */
-.dark {
-  --color-primary: #FF8400;
-  --color-background: #111111;
-  --color-surface: #1A1A1A;
-  --color-foreground: #FFFFFF;
-  --color-muted-foreground: #B8B9B6;
-  --color-border: #2E2E2E;
-  --color-muted: #2E2E2E;
-  --color-secondary: #2E2E2E;
-  --color-secondary-foreground: #FFFFFF;
-  --color-success-bg: #222924;
-  --color-success-fg: #B6FFCE;
-  --color-error-bg: #24100B;
-  --color-error-fg: #FF5C33;
-  --color-warning-bg: #291C0F;
-  --color-warning-fg: #FF8400;
-  --color-info-bg: #222229;
-  --color-info-fg: #B2B2FF;
-  --color-destructive: #FF5C33;
-  --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;
-  --hljs-string: #6ee7b7;
-  --hljs-comment: #52525b;
-  --hljs-number: #fbbf24;
-  --hljs-title: #c4b5fd;
-  --hljs-type: #fca5a5;
-  --hljs-params: #f0abfc;
-  --hljs-variable: #fde68a;
-  --hljs-function: #c4b5fd;
-  --hljs-meta: #71717a;
-  --hljs-property: #93c5fd;
-  --hljs-punctuation: #71717a;
-}
-
-/* ─── Code Syntax Highlighting ─── */
-.hljs {
-  color: var(--hljs-fg);
-  background: transparent;
-}
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-built_in { color: var(--hljs-keyword); }
-.hljs-string,
-.hljs-attr { color: var(--hljs-string); }
-.hljs-comment,
-.hljs-quote { color: var(--hljs-comment); font-style: italic; }
-.hljs-number,
-.hljs-literal { color: var(--hljs-number); }
-.hljs-title,
-.hljs-section { color: var(--hljs-title); }
-.hljs-type,
-.hljs-class .hljs-title { color: var(--hljs-type); }
-.hljs-params { color: var(--hljs-params); }
-.hljs-variable,
-.hljs-template-variable { color: var(--hljs-variable); }
-.hljs-function { color: var(--hljs-function); }
-.hljs-meta { color: var(--hljs-meta); }
-.hljs-property { color: var(--hljs-property); }
-.hljs-punctuation { color: var(--hljs-punctuation); }
-.hljs-addition { color: var(--color-success-fg); background: var(--color-success-bg); }
-.hljs-deletion { color: var(--color-error-fg); background: var(--color-error-bg); }
diff --git a/web/src/types/api.ts b/web/src/types/api.ts
deleted file mode 100644
index 6ffe1028..00000000
--- a/web/src/types/api.ts
+++ /dev/null
@@ -1,685 +0,0 @@
-// API types for jcode web backend
-
-export interface HealthResponse {
-  status: string
-  version: string
-  pwd: string
-  provider: string
-  model: string
-  mode: string
-}
-
-export interface StatusResponse {
-  running: boolean
-  clients: number
-  pwd: string
-  provider: string
-  model: string
-  mode: string
-}
-
-export interface SessionItem {
-  uuid: string
-  created_at: string
-  provider: string
-  model: string
-  title?: string
-}
-
-export interface SessionEntry {
-  type: string
-  uuid?: string
-  project?: string
-  provider?: string
-  model?: string
-  content?: string
-  name?: string
-  args?: string
-  output?: string
-  error?: string
-  tool_call_id?: string
-  timestamp?: string
-
-  // plan_update fields
-  plan_status?: string
-  plan_title?: string
-  plan_content?: string
-  feedback?: string
-
-  // todo_snapshot fields
-  todos?: { id: number; title: string; status: string }[]
-
-  // subagent fields
-  subagent_name?: string
-  subagent_type?: string
-
-  // mode_change field
-  mode?: string
-
-  // compact fields
-  summary?: string
-  compacted_n?: number
-}
-
-export interface ConfigResponse {
-  provider: string
-  model: string
-  max_iterations: number
-}
-
-export interface TodoItem {
-  id: number
-  title: string
-  status: 'pending' | 'in_progress' | 'completed' | 'cancelled'
-}
-
-export interface FileItem {
-  name: string
-  is_dir: boolean
-  size: number
-}
-
-export type GoalStatus = 'active' | 'complete' | 'blocked'
-
-export interface Goal {
-  objective: string
-  status: GoalStatus
-  tokens_used: number
-  created_at: number
-  updated_at: number
-}
-
-export interface FileContent {
-  path: string
-  content: string
-}
-
-// Model registry types
-export interface ModelInfo {
-  id: string
-  name: string
-  tool_call: boolean
-  context_limit?: number
-  reasoning?: boolean
-  recommended?: boolean
-  default_enabled?: boolean
-  enabled?: boolean
-  image_support?: boolean
-  // How this model exposes its reasoning/thinking controls (from models.dev).
-  // Absent/empty ⇒ no reasoning controls to render.
-  reasoning_options?: ReasoningOption[]
-}
-
-export interface ProviderInfo {
-  id: string
-  name: string
-  custom?: boolean // true for user-configured OpenAI-compatible providers
-  models: ModelInfo[]
-}
-
-export interface ModelsResponse {
-  current: { provider: string; model: string }
-  providers: ProviderInfo[]
-}
-
-// Exec types
-export interface ExecResponse {
-  output: string
-  exit_code: number
-}
-
-// Diff types
-export interface DiffEntry {
-  file: string
-  patch: string
-  additions: number
-  deletions: number
-  status: string // "M", "A", "D"
-}
-
-export interface DiffResponse {
-  mode: string
-  entries: DiffEntry[]
-}
-
-export interface WorkspaceInfo {
-  branch: string // empty if not a git repo
-  dirty: boolean
-}
-
-export interface GitBranchesResponse {
-  current: string // empty if not a git repo
-  branches: string[] // local branches, most-recently-committed first
-}
-
-export interface GitCheckoutResponse {
-  branch: string // new current branch on success; '' when blocked
-  blocked?: boolean // true when a plain switch was aborted by uncommitted changes
-  message?: string // git's raw (C-locale) message when blocked
-  files?: string[] // files that would be overwritten, parsed from git's output
-  stashed?: boolean // true when changes were stashed as part of this switch
-}
-
-// A task = a conversation, listed across all projects for the sidebar tree.
-export interface TaskItem {
-  uuid: string
-  project: string // project path
-  created_at: string
-  updated_at?: string
-  provider: string
-  model: string
-  title?: string
-  pinned: boolean
-  archived: boolean
-  unread: boolean
-  status?: string
-  running?: boolean // a live engine for this task is currently running
-}
-
-export interface TaskMetaPatch {
-  pinned?: boolean
-  archived?: boolean
-  unread?: boolean
-  title?: string
-}
-
-// MCP types
-export interface MCPServerInfo {
-  name: string
-  type: string
-  command?: string
-  url?: string
-  args?: string[]
-  env?: string[]
-  headers?: Record<string, string>
-  timeout?: number
-  enabled: boolean
-  oauth: boolean
-  has_auth: boolean
-  status: string // connected | needs_auth | error | disabled | configured
-  error?: string
-}
-
-export interface MCPListResponse {
-  servers: Record<string, MCPServerInfo>
-}
-
-// Request body for creating/updating an MCP server.
-export interface MCPServerRequest {
-  name: string
-  type: string // local | http | sse
-  url?: string
-  command?: string
-  args?: string[]
-  env?: string[]
-  headers?: Record<string, string>
-  timeout?: number
-  oauth?: {
-    enabled: boolean
-    client_id?: string
-    client_secret?: string
-    scopes?: string[]
-  }
-}
-
-export interface MCPLoginStatus {
-  status: string // idle | pending | authorized | error | needs_client_id
-  auth_url?: string
-  message?: string
-}
-
-// SSH types
-export interface SSHAlias {
-  name: string
-  addr: string
-  path?: string
-}
-
-export interface SSHListResponse {
-  current: string
-  aliases: SSHAlias[]
-}
-
-// Remote connection wizard
-export type RemoteAuthMethod = 'password' | 'key'
-export type RemoteKind = 'ssh' | 'docker'
-
-export interface RemoteConnectRequest {
-  type?: RemoteKind
-  host?: string
-  port?: number
-  user?: string
-  auth_method?: RemoteAuthMethod
-  password?: string
-  key_path?: string
-  passphrase?: string
-  container?: string // docker: container id or name
-}
-
-export interface RemoteConnectResponse {
-  connection_id: string
-  remote_pwd: string
-  platform: string
-  user?: string
-  host?: string
-  container?: string
-}
-
-export interface RemoteListDirResponse {
-  path: string
-  dirs: string[]
-}
-
-export interface RemoteBindResponse {
-  status: string
-  kind?: RemoteKind
-  pwd: string
-  label: string
-  name: string
-  host: string
-  user: string
-  port: number
-  container?: string
-  remote_path: string
-}
-
-export interface DockerContainer {
-  id: string
-  name: string
-  image: string
-  state: string
-  status: string
-  running: boolean
-}
-
-export interface DockerContainersResponse {
-  containers: DockerContainer[]
-}
-
-// Skill types (for slash commands)
-export interface SkillInfo {
-  name: string
-  description: string
-  slash?: string
-  builtin?: boolean
-  source?: string // builtin | local
-  enabled?: boolean
-}
-
-// Slash command types (unified built-in + skill)
-export interface SlashCommandInfo {
-  slash: string
-  description: string
-  type: 'builtin' | 'skill' | 'flow'
-}
-
-// WebSocket event data types
-export interface AgentTextData {
-  text: string
-}
-
-export interface ToolCallData {
-  name: string
-  args: string
-  tool_call_id?: string
-  display_info?: ToolDisplayInfo
-}
-
-export interface ToolDisplayInfo {
-  title: string
-  subtitle?: string
-  icon?: string
-  category?: string // 'context' | 'mutation' | 'execution'
-}
-
-export interface ToolResultData {
-  name: string
-  output: string
-  display_output?: string  // clean output for UI display (no metadata)
-  error?: string
-  tool_call_id?: string
-}
-
-export interface TokenUpdateData {
-  // total_tokens is current context occupancy (last call); the cumulative
-  // counters + cache_hit_rate cover the whole session.
-  total_tokens: number
-  prompt_tokens: number
-  completion_tokens: number
-  cached_tokens?: number
-  reasoning_tokens?: number
-  cache_write_tokens?: number
-  call_count?: number
-  cache_hit_rate?: number
-  cache_supported?: boolean
-  model_context_limit: number
-}
-
-export interface AgentDoneData {
-  error?: string
-}
-
-// --- Usage statistics ---
-
-export interface UsageDayBucket {
-  date: string // YYYY-MM-DD
-  tokens: number
-  turns: number
-  calls: number
-}
-
-export interface UsageShare {
-  name: string
-  tokens: number
-  share: number // 0-1 fraction of grand total
-}
-
-export interface UsageTotals {
-  total_tokens: number
-  prompt_tokens: number
-  completion_tokens: number
-  cached_tokens: number
-  reasoning_tokens: number
-  calls: number
-  turns: number
-  sessions: number
-}
-
-export interface TaskContextBreakdown {
-  context_limit: number
-  system_prompt_tokens: number
-  system_tools_tokens: number
-  mcp_tools_tokens: number
-  skills_tokens: number
-  messages_tokens: number
-}
-
-export interface TaskStats {
-  uuid: string
-  is_active: boolean
-  context?: TaskContextBreakdown
-  cache_hit_rate: number
-  cache_supported: boolean
-  tokens: {
-    total_tokens: number
-    prompt_tokens: number
-    completion_tokens: number
-    cached_tokens: number
-    reasoning_tokens: number
-    calls: number
-    turns?: number
-  }
-}
-
-export interface UsageStats {
-  range_days: number
-  totals: UsageTotals
-  active_days: number
-  current_streak: number
-  longest_streak: number
-  most_used_model: string
-  cache_hit_rate: number // 0-1
-  cache_supported: boolean
-  heatmap: UsageDayBucket[] // fixed ~365-day window
-  daily_trend: UsageDayBucket[] // selected range
-  by_model: UsageShare[]
-  by_project: UsageShare[]
-}
-
-export interface ApprovalRequestData {
-  id: string
-  tool_name: string
-  tool_args: string
-  is_external: boolean
-  task_id?: string // the task (engine) the approval belongs to; echoed back on resolve
-}
-
-// ask_user types — an interactive question (or batch of questions) the agent
-// poses mid-run. Mirrors the Go AskUserQuestion / AskUserAnswer structs.
-export interface AskUserOption {
-  label: string
-  description?: string
-}
-
-export interface AskUserQuestion {
-  question: string
-  header?: string
-  options?: AskUserOption[]
-  multi_select?: boolean
-}
-
-export interface AskUserRequestData {
-  id: string
-  questions: AskUserQuestion[]
-  task_id?: string // the task (engine) the question belongs to; echoed back on resolve
-}
-
-export interface AskUserAnswer {
-  question_header: string
-  answer: string
-  selected?: string[]
-}
-
-// UI message types
-export type MessageRole = 'user' | 'assistant' | 'system'
-
-export type AgentMode = 'approval' | 'plan' | 'full_access'
-
-// normalizeMode maps a backend mode string to the UI's unified AgentMode.
-export function normalizeMode(m?: string): AgentMode {
-  if (m === 'plan') return 'plan'
-  if (m === 'full_access') return 'full_access'
-  return 'approval'
-}
-
-export interface ChatImage {
-  data: string       // base64 data (without data: prefix)
-  media_type: string // e.g. "image/png", "image/jpeg"
-}
-
-export interface ChatMessage {
-  id: string
-  role: MessageRole
-  content: string
-  timestamp: number
-  source?: string
-  images?: ChatImage[]
-  // For system messages: 'error' renders as a real error, 'notice' as a calm
-  // notice (e.g. "Stopped"). Undefined keeps the default system styling.
-  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 {
-  id: string
-  toolCallID?: string  // backend tool_call_id for precise result matching
-  name: string
-  args: string
-  output?: string
-  displayOutput?: string  // clean output for UI display
-  error?: string
-  status: 'running' | 'done' | 'error'
-  timestamp: number
-  /** Display metadata extracted from tool args */
-  displayInfo?: ToolDisplayInfo
-  /** For subagent tools: nested tool calls from within the subagent */
-  children?: ToolCall[]
-  /**
-   * For ask_user tools: the request id from the ask_user_request event. Present
-   * only while the question is awaiting an answer (live runs, not replay).
-   * Cleared once answered/resolved so the interactive UI collapses.
-   */
-  askUserId?: string
-  /** For ask_user tools: the backend-normalized questions to render. */
-  askUserQuestions?: AskUserQuestion[]
-}
-
-/** Subagent lifecycle event (start/done). */
-export interface SubagentEventData {
-  name: string
-  agent_type: string
-  done: boolean
-  result?: string
-  error?: string
-}
-
-/** Subagent intermediate progress (inner tool calls). */
-export interface SubagentProgressData {
-  agent_name: string
-  event: string // "tool_call" | "tool_result"
-  tool_name: string
-  detail: string
-}
-
-export interface PendingApproval {
-  id: string
-  tool_name: string
-  tool_args: string
-  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)
-export interface RemoteMeta {
-  kind?: RemoteKind // defaults to 'ssh' for back-compat
-  host: string // host:port as dialed (ssh)
-  user: string
-  port: number
-  remotePath: string
-  container?: string // docker container name/id
-}
-
-export interface Project {
-  id: string
-  path: string
-  createdAt: number
-  // Present for remote (SSH) workspaces. `path` is the host-qualified label
-  // (ssh://user@host:port/remote/path); remote workspaces cannot be re-activated
-  // by a local path switch and must be reconnected through the SSH wizard.
-  remote?: RemoteMeta
-}
-
-// Browse (folder picker)
-export interface BrowseFolder {
-  name: string
-  path: string
-}
-
-export interface BrowseResponse {
-  current: string
-  folders: BrowseFolder[]
-}
-
-// Setup types
-export interface SetupProvider {
-  id: string
-  name: string
-  doc?: string
-  api?: string
-  env?: string[]
-  configured: boolean
-  tag?: string // "recommended", "local", etc.
-}
-
-// ReasoningOption mirrors models.dev's reasoning_options: how a model exposes
-// its thinking controls. type is 'effort' | 'toggle' | 'budget_tokens'.
-export interface ReasoningOption {
-  type: string
-  values?: string[]
-  min?: number
-  max?: number
-}
-
-export interface SetupModel {
-  id: string
-  name: string
-  tool_call: boolean
-  context_limit?: number
-  reasoning?: boolean
-  attachment?: boolean
-  reasoning_options?: ReasoningOption[]
-}
-
-// A model attached to a provider via config (custom providers always have at
-// least one; registry providers may add extras not yet in the registry).
-export interface CustomModelDetail {
-  id: string
-  name?: string
-  reasoning?: boolean
-  context?: number // context window in tokens
-  attachment?: boolean // accepts image inputs (vision)
-  effort_tiers?: string[] // selectable reasoning-effort levels, e.g. ['low','medium','high']
-  custom?: boolean // true = user-defined (editable); false/undefined = built-in registry (read-only)
-}
-
-export interface ProviderDetail {
-  id: string
-  name?: string // display name for custom (non-registry) providers
-  custom?: boolean // true if this provider is not in the registry
-  api_key_set: boolean
-  api_key?: string
-  base_url?: string
-  headers?: Record<string, string> // values masked
-  custom_models?: CustomModelDetail[]
-  vision?: boolean // provider-level image-input override (null ⇒ registry default)
-  thinking?: boolean // provider-level extended-reasoning toggle
-  reasoning_effort?: string // provider-level default effort
-}
-
-// Advanced provider settings shared by the add/update payloads. Capabilities
-// (vision/thinking/reasoning_effort) are model-level, so they're not part of
-// provider configuration.
-export interface ProviderAdvanced {
-  base_url?: string
-  headers?: Record<string, string>
-}
-
-// Result of a connection test against a provider's /models endpoint. On success
-// it carries the measured latency and the number of advertised models; on
-// failure the error is classified (auth | network | server) so the UI can show
-// a targeted message.
-export interface ValidateResult {
-  valid: boolean
-  latency_ms?: number
-  model_count?: number
-  error?: string
-  error_type?: 'auth' | 'network' | 'server' | ''
-}
-
-// A model entry in a provider's browsable catalog (the "browse directory" UI).
-// `added` reflects whether the model is already configured for this provider,
-// so each row renders as "+ add" or "✓ added" (toggle to remove).
-export interface CatalogModel {
-  id: string
-  name?: string
-  added?: boolean
-  context?: number
-  reasoning?: boolean
-  attachment?: boolean
-  effort_tiers?: string[] // selectable reasoning-effort levels (custom models)
-  custom?: boolean // true = user-defined (editable/removable); false/undefined = registry model
-}
-
-// Model state types
-export interface ModelRef {
-  provider: string
-  model: string
-}
-
-export interface ModelStateResponse {
-  recent: ModelRef[]
-  favorite: ModelRef[]
-  enabled_models: ModelRef[]
-  disabled_models: ModelRef[]
-  // Per-"provider/model" reasoning-effort choices made from the chat picker.
-  effort_overrides?: Record<string, string>
-}
diff --git a/web/src/types/automation.ts b/web/src/types/automation.ts
deleted file mode 100644
index 595fe0cc..00000000
--- a/web/src/types/automation.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-// Automation types — mirror internal/automation + internal/web/automation_api.go.
-
-export type AutomationCadence = 'hourly' | 'daily' | 'weekly'
-
-export interface AutomationTrigger {
-  type: 'schedule' | 'manual'
-  cadence?: AutomationCadence
-  hour?: number
-  minute?: number
-  weekday?: number
-}
-
-export interface Automation {
-  id: string
-  name: string
-  prompt: string
-  trigger: AutomationTrigger
-  project_path: string
-  mode: string
-  provider?: string
-  model?: string
-  run_in_cloud: boolean
-  enabled: boolean
-  source: string
-  created_at: string
-  updated_at: string
-}
-
-export interface AutomationRunState {
-  last_run_at?: string
-  last_status?: string
-  last_error?: string
-  last_session_id?: string
-  next_run_at?: string
-}
-
-export interface AutomationItem extends Automation {
-  human_schedule: string
-  badge: string
-  state: AutomationRunState
-}
-
-export interface AutomationRun {
-  session_id: string
-  automation_id: string
-  title: string
-  project: string
-  trigger_kind: string
-  start_time: string
-  end_time?: string
-  terminal_status?: string
-  status?: string
-  error_reason?: string
-}
-
-export interface AutomationTemplate {
-  id: string
-  name: string
-  description: string
-  badge: string
-  prompt: string
-  trigger: AutomationTrigger
-  suggest_mode: string
-}
-
-export type AutomationCreate = Partial<Omit<Automation, 'id' | 'created_at' | 'updated_at'>> & {
-  run_now?: boolean
-}
diff --git a/web/src/utils/providerIcons.ts b/web/src/utils/providerIcons.ts
deleted file mode 100644
index d895d42d..00000000
--- a/web/src/utils/providerIcons.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-// Brand logos for the model providers, sourced from @lobehub/icons-static-svg
-// (the same official-brand icon set used by LobeChat and friends, MIT-licensed).
-//
-// Each SVG is imported as a raw string (Vite `?raw`) so it can be inlined into
-// the DOM. Inlining is what lets the monochrome marks inherit `currentColor` and
-// follow the app's light/dark theme — an <img> tag cannot do that.
-import openai from '@lobehub/icons-static-svg/icons/openai.svg?raw'
-import anthropic from '@lobehub/icons-static-svg/icons/anthropic.svg?raw'
-import gemini from '@lobehub/icons-static-svg/icons/gemini-color.svg?raw'
-import deepseek from '@lobehub/icons-static-svg/icons/deepseek-color.svg?raw'
-import zhipu from '@lobehub/icons-static-svg/icons/zhipu-color.svg?raw'
-import zai from '@lobehub/icons-static-svg/icons/zai.svg?raw'
-import mistral from '@lobehub/icons-static-svg/icons/mistral-color.svg?raw'
-import openrouter from '@lobehub/icons-static-svg/icons/openrouter.svg?raw'
-import groq from '@lobehub/icons-static-svg/icons/groq.svg?raw'
-import together from '@lobehub/icons-static-svg/icons/together-color.svg?raw'
-import qwen from '@lobehub/icons-static-svg/icons/qwen-color.svg?raw'
-import moonshot from '@lobehub/icons-static-svg/icons/moonshot.svg?raw'
-import minimax from '@lobehub/icons-static-svg/icons/minimax-color.svg?raw'
-import siliconcloud from '@lobehub/icons-static-svg/icons/siliconcloud-color.svg?raw'
-import hunyuan from '@lobehub/icons-static-svg/icons/hunyuan-color.svg?raw'
-import xiaomi from '@lobehub/icons-static-svg/icons/xiaomimimo.svg?raw'
-import ollama from '@lobehub/icons-static-svg/icons/ollama.svg?raw'
-
-// Ordered keyword → icon rules. A provider id from the registry is matched by
-// substring (first hit wins), so brand variants like `zhipuai-coding-plan`,
-// `alibaba-coding-plan-cn`, `minimax-coding-plan`, or `tencent-tokenhub` all map
-// to a single brand without needing an entry per variant. Order matters where
-// one brand's keyword could appear inside another's id — keep `zhipu` ahead of
-// the looser `zai`.
-const RULES: ReadonlyArray<readonly [RegExp, string]> = [
-  [/openrouter/, openrouter],
-  [/openai/, openai],
-  [/anthropic|claude/, anthropic],
-  [/gemini|google|vertex/, gemini],
-  [/deepseek/, deepseek],
-  [/zhipu/, zhipu],
-  [/zai/, zai],
-  [/mistral/, mistral],
-  [/groq/, groq],
-  [/together/, together],
-  [/alibaba|qwen|dashscope|tongyi/, qwen],
-  [/moonshot|kimi/, moonshot],
-  [/minimax/, minimax],
-  [/silicon/, siliconcloud],
-  [/tencent|hunyuan/, hunyuan],
-  [/xiaomi|mimo/, xiaomi],
-  [/ollama/, ollama],
-]
-
-// Returns the raw SVG markup for a provider id, or null when no brand icon is
-// known. Callers render a monogram fallback in that case — except for custom
-// (OpenAI-compatible) providers, where passing fallbackOpenai shows the OpenAI
-// mark since that's the wire protocol they speak.
-export function iconForProvider(id: string, fallbackOpenai = false): string | null {
-  const key = (id || '').toLowerCase()
-  for (const [re, svg] of RULES) {
-    if (re.test(key)) return svg
-  }
-  return fallbackOpenai ? openai : null
-}
diff --git a/web-react/src/vite-env.d.ts b/web/src/vite-env.d.ts
similarity index 100%
rename from web-react/src/vite-env.d.ts
rename to web/src/vite-env.d.ts
diff --git a/web/tsconfig.app.json b/web/tsconfig.app.json
index c0f2d867..786384d7 100644
--- a/web/tsconfig.app.json
+++ b/web/tsconfig.app.json
@@ -1,18 +1,28 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
-    // Extra safety for array and object lookups, but may have false positives.
-    "noUncheckedIndexedAccess": true,
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
 
-    // Path mapping for cleaner imports.
-    "paths": {
-      "@/*": ["./src/*"]
-    },
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
 
-    // `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
-    // Specified here to keep it out of the root directory.
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
-  }
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "verbatimModuleSyntax": false,
+
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src"]
 }
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 66b5e570..1ffef600 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "files": [],
   "references": [
-    {
-      "path": "./tsconfig.node.json"
-    },
-    {
-      "path": "./tsconfig.app.json"
-    }
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
   ]
 }
diff --git a/web/tsconfig.node.json b/web/tsconfig.node.json
index c9b2badc..1199ad65 100644
--- a/web/tsconfig.node.json
+++ b/web/tsconfig.node.json
@@ -1,27 +1,16 @@
-// TSConfig for modules that run in Node.js environment via either transpilation or type-stripping.
 {
-  "extends": "@tsconfig/node24/tsconfig.json",
-  "include": [
-    "vite.config.*",
-    "vitest.config.*",
-    "cypress.config.*",
-    "playwright.config.*",
-    "eslint.config.*"
-  ],
   "compilerOptions": {
-    // Most tools use transpilation instead of Node.js's native type-stripping.
-    // Bundler mode provides a smoother developer experience.
-    "module": "preserve",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
     "moduleResolution": "bundler",
-
-    // Include Node.js types and avoid accidentally including other `@types/*` packages.
-    "types": ["node"],
-
-    // Disable emitting output during `vue-tsc --build`, which is used for type-checking only.
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
     "noEmit": true,
-
-    // `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
-    // Specified here to keep it out of the root directory.
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
-  }
+    "strict": true,
+    "esModuleInterop": true
+  },
+  "include": ["vite.config.ts"]
 }
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 4bd9668a..92a496de 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,20 +1,15 @@
-import { fileURLToPath, URL } from 'node:url'
-
 import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
+import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
+import { fileURLToPath, URL } from 'node:url'
 
-// https://vite.dev/config/
+// Builds into ../internal/web/dist (consumed by Go //go:embed and the Tauri shell).
+// Dev server proxies /api → the Go backend on :8080.
 export default defineConfig({
-  plugins: [
-    tailwindcss(),
-    vue(),
-    vueJsx(),
-  ],
+  plugins: [tailwindcss(), react()],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
   build: {
@@ -22,6 +17,9 @@ export default defineConfig({
     emptyOutDir: true,
   },
   server: {
+    // Pinned to 5173 to match the Tauri shell's devUrl (desktop/src-tauri/tauri.conf.json).
+    port: 5173,
+    strictPort: true,
     proxy: {
       '/api': {
         target: 'http://127.0.0.1:8080',