fix(release): build before test in prepublishOnly so dashboard smoke tests find dist/

Dashboard smoke tests added in #1418 read `dashboard/dist/app.js` and
`app.css` at filesystem level. They pass under `npm run verify` (which
builds first) but fail under `npm publish`, whose `prepublishOnly` ran
in `lint → typecheck → test → build` order — tests fire before the
artifacts they need exist.

Reorder to `lint → typecheck → build → test` so the publish-time gate
matches the verify-time gate. Caught when the v0.50.0 publish-npm.yml
run failed before reaching `npm publish`.

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+github: esengine
+custom:
+  - https://paypal.me/yuhuahui

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,6 +4,10 @@ about: Something is broken
 labels: bug
 ---
 
+> **Screen flicker, garbled output, leftover artifacts, cursor jumping?**
+> Use the **Display / rendering issue** template instead — it asks for the
+> terminal-specific info we need to diagnose those.
+
 **What happened**
 A clear and concise description.
 
@@ -14,10 +18,13 @@ What you expected to happen.
 Steps or minimal code that reproduces it.
 
 **Environment**
-- Reasonix version:
-- Node version:
-- OS:
-- DeepSeek model (e.g. `deepseek-chat`, `deepseek-reasoner`):
+- Reasonix version (`reasonix --version`):
+- Node version (`node --version`):
+- OS (Windows 11 / macOS 14 / Ubuntu 24.04 / …):
+- Shell (bash, zsh, fish, PowerShell 7, PowerShell 5.1, cmd, …):
+- Terminal app (Windows Terminal, iTerm2, Alacritty, kitty, WezTerm, **VSCode integrated**, **Cursor integrated**, Hyper, …):
+- DeepSeek model (e.g. `deepseek-v4-flash`, `deepseek-v4-pro`):
 
 **Logs / transcript**
-If using the CLI, attach the relevant chunk of `--transcript`.
+If using the CLI, attach the relevant chunk of `--transcript`, or run
+`reasonix doctor` and paste the output.

.github/ISSUE_TEMPLATE/display_issue.md

@@ -0,0 +1,109 @@
+---
+name: Display / rendering issue
+about: Screen flicker, garbled output, leftover artifacts, cursor jumping
+labels: bug, rendering
+---
+
+> Display problems almost always come from the **terminal emulator**, not
+> the shell. Please fill the terminal section carefully — `bash vs PowerShell`
+> tells us very little; `VSCode integrated terminal vs Windows Terminal`
+> tells us everything.
+
+**Symptom** (tick all that apply)
+- [ ] Whole screen flickers / flashes during streaming response
+- [ ] Lines tear or only half-redraw
+- [ ] Stale output left behind after a frame updates
+- [ ] Cursor jumps to wrong column or vanishes
+- [ ] Mojibake / wrong-width characters (e.g. `□`, half-width emoji)
+- [ ] Other (describe below)
+
+**When it happens**
+- [ ] During assistant streaming (token-by-token output)
+- [ ] When tool cards expand / collapse
+- [ ] During scroll-up / scrollback
+- [ ] On terminal resize
+- [ ] On launch / on quit
+- [ ] Other (describe below)
+
+**Terminal — the important part**
+
+Where exactly are you running `reasonix`?
+
+- [ ] **VSCode** integrated terminal — VSCode version: `?`
+- [ ] **Cursor** integrated terminal — Cursor version: `?`
+- [ ] **Windows Terminal** — version: `?`
+- [ ] **cmd.exe** (legacy console host)
+- [ ] **PowerShell ISE** (note: ISE doesn't support ANSI — most things will look broken)
+- [ ] **iTerm2** / **Terminal.app** / **Alacritty** / **kitty** / **WezTerm** / **Hyper**
+- [ ] tmux / screen / mosh — and inside which outer terminal? `?`
+- [ ] Other:
+
+> 💡 **How to find your VSCode / Cursor version**
+> `Help → About` (Windows/Linux) or `Code → About Visual Studio Code` (macOS).
+> Paste the whole panel — version + commit + Electron + xterm.js if shown.
+
+**Diagnostic dump — copy/paste output**
+
+Run **one** of the snippets below in the same terminal where you saw the
+issue, and paste the output here:
+
+<details><summary>PowerShell (Windows)</summary>
+
+```powershell
+reasonix --version; node --version
+$PSVersionTable.PSVersion.ToString()
+[System.Environment]::OSVersion.VersionString
+"TERM=$env:TERM"
+"TERM_PROGRAM=$env:TERM_PROGRAM"
+"TERM_PROGRAM_VERSION=$env:TERM_PROGRAM_VERSION"
+"COLORTERM=$env:COLORTERM"
+"WT_SESSION=$env:WT_SESSION"
+"VSCODE_INJECTION=$env:VSCODE_INJECTION"
+"WSL_DISTRO_NAME=$env:WSL_DISTRO_NAME"
+```
+
+</details>
+
+<details><summary>bash / zsh (macOS / Linux / WSL / Git Bash)</summary>
+
+```bash
+reasonix --version; node --version
+uname -a
+echo "TERM=$TERM"
+echo "TERM_PROGRAM=$TERM_PROGRAM"
+echo "TERM_PROGRAM_VERSION=$TERM_PROGRAM_VERSION"
+echo "COLORTERM=$COLORTERM"
+echo "WT_SESSION=$WT_SESSION"
+echo "VSCODE_INJECTION=$VSCODE_INJECTION"
+echo "WSL_DISTRO_NAME=$WSL_DISTRO_NAME"
+```
+
+</details>
+
+```
+<paste output here>
+```
+
+**VSCode / Cursor users only — terminal settings**
+
+Open Settings (`Ctrl+,`), search `terminal.integrated.gpuAcceleration`,
+report current value: `auto` / `on` / `canvas` / `off` — `?`
+
+Already tried any of:
+- [ ] Switching `gpuAcceleration` to a different value
+- [ ] Detaching the terminal (drag tab into its own window)
+- [ ] Running the same command in a non-VSCode terminal — did it still flicker? `yes / no`
+
+**Reproduction**
+
+Steps that reliably trigger it (commands run, files edited, was a tool
+streaming a long response, was the window being resized, …):
+
+1.
+2.
+3.
+
+**Screen recording (strongly preferred)**
+
+A 5–10s GIF or MP4 is worth 1000 words for rendering bugs. Drop it in
+this comment box — GitHub uploads attachments inline.

.github/issue-labeler.yml

@@ -0,0 +1,25 @@
+bug:
+  - '/\b(crash|crashed|crashes|panic|panicked|stack trace|stacktrace|traceback)\b/i'
+  - '/\b(broken|doesn''?t work|not working|stopped working|regression)\b/i'
+  - '/\b(throws? (an? )?error|uncaught|unhandled)\b/i'
+
+enhancement:
+  - '/\b(feature request|would (be nice|like|love)|please add|please support)\b/i'
+  - '/\b(add (a |the )?(flag|option|config|setting|switch)|allow (configuring|disabling|enabling))\b/i'
+  - '/\b(can (we|you|reasonix) (add|support)|proposal|propose adding)\b/i'
+
+documentation:
+  - '/\b(docs?\b|documentation|readme|getting started|tutorial|wiki|man page)\b/i'
+  - '/\b(missing (docs?|documentation)|undocumented)\b/i'
+
+question:
+  - '/\b(how (do|to|can) (i|we|you)|is it possible|is there a way|why does|why is)\b/i'
+  - '/\b(question:|q:)\s/i'
+
+dashboard:
+  - '/\b(dashboard|\/dashboard|web UI|web companion|browser)\b/i'
+  - '/\blocalhost:|127\.0\.0\.1/i'
+
+rendering:
+  - '/\b(flicker|flickering|render artifact|redraw|repaint|ghost row|ghosting|screen tear)\b/i'
+  - '/\b(TUI (glitch|artifact|garbled)|terminal (glitch|garbled|broken display))\b/i'

.github/workflows/ci.yml

@@ -8,11 +8,12 @@ on:
 
 jobs:
   build:
-    name: build (node ${{ matrix.node }})
-    runs-on: ubuntu-latest
+    name: build (${{ matrix.os }} · node ${{ matrix.node }})
+    runs-on: ${{ matrix.os }}
     strategy:
       fail-fast: false
       matrix:
+        os: [ubuntu-latest, windows-latest]
         node: ["22"]
     steps:
       - uses: actions/checkout@v4
@@ -32,18 +33,32 @@ jobs:
       - name: Typecheck
         run: npm run typecheck
 
-      - name: Test (vitest)
-        run: npm test
-
-      - name: Build (tsup)
+      - name: Build (tsup + dashboard)
         run: npm run build
 
+      - name: Test (vitest + coverage)
+        run: npm run test:coverage
+
+      - name: Coverage job summary
+        if: always()
+        run: node scripts/coverage-summary.mjs
+
       # Smoke-test the bench harnesses themselves. --dry skips all LLM
       # calls, so this catches wiring regressions (task factories, CLI
       # parsing, file IO, checker determinism) without needing a
-      # DEEPSEEK_API_KEY in CI.
+      # DEEPSEEK_API_KEY in CI. RUNNER_TEMP is set on every GH Actions
+      # runner (POSIX + Windows) — beats hardcoding /tmp.
       - name: τ-bench harness dry-run
-        run: npx tsx benchmarks/tau-bench/runner.ts --dry --out /tmp/tau-dry.json
+        run: npx tsx benchmarks/tau-bench/runner.ts --dry --out "${{ runner.temp }}/tau-dry.json"
 
-      - name: Harvest-bench harness dry-run
-        run: npx tsx benchmarks/harvest/runner.ts --dry --out /tmp/harvest-dry.json
+      - name: Notify Discord on main failure
+        if: failure() && github.event_name == 'push' && github.ref == 'refs/heads/main'
+        shell: bash
+        env:
+          WEBHOOK_URL: ${{ secrets.DISCORD_CI_WEBHOOK }}
+        run: |
+          test -n "$WEBHOOK_URL" || { echo "DISCORD_CI_WEBHOOK unset, skipping"; exit 0; }
+          RUN_URL="${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}"
+          curl -sS -X POST -H "Content-Type: application/json" \
+            -d "{\"content\":\"❌ CI failed on \`${{ github.ref_name }}\` (${{ matrix.os }}) — ${{ github.actor }}\n${RUN_URL}\"}" \
+            "$WEBHOOK_URL"

.github/workflows/codeql.yml

@@ -0,0 +1,38 @@
+name: CodeQL
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+  schedule:
+    - cron: "0 6 * * 1"
+
+jobs:
+  analyze:
+    name: analyze (${{ matrix.language }})
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [javascript-typescript]
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v3
+        with:
+          languages: ${{ matrix.language }}
+          queries: security-extended
+
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v3
+
+      - name: Analyze
+        uses: github/codeql-action/analyze@v3
+        with:
+          category: "/language:${{ matrix.language }}"

.github/workflows/issue-labeler.yml

@@ -0,0 +1,22 @@
+name: Issue auto-label
+
+on:
+  issues:
+    types: [opened, edited]
+
+permissions:
+  issues: write
+  contents: read
+
+jobs:
+  label:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: github/[email protected]
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          configuration-path: .github/issue-labeler.yml
+          enable-versioned-regex: 0
+          include-title: 1
+          include-body: 1
+          sync-labels: 0

.github/workflows/issue-similarity.yml

@@ -0,0 +1,20 @@
+name: Issue similarity check
+
+on:
+  issues:
+    types: [opened, edited]
+
+permissions:
+  issues: write
+
+jobs:
+  similarity:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions-cool/issues-similarity-analysis@v1
+        with:
+          filter-threshold: 0.7
+          title-excludes: ""
+          comment-title: "### Possibly related issues"
+          comment-body: "- #${number} · ${title}"
+          show-footer: false

.github/workflows/oosmetrics.yml

@@ -0,0 +1,17 @@
+name: oosmetrics Health Check
+
+on:
+  schedule:
+    - cron: "0 9 * * 1"
+  workflow_dispatch:
+
+permissions:
+  issues: write
+
+jobs:
+  report:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: oosmetrics/health-check-action@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/publish-dsnix.yml

@@ -0,0 +1,63 @@
+name: Publish dsnix
+
+# Tag namespace: `dsnix-v<semver>` triggers npm publish for the
+# dsnix shim package only. Plain `v<semver>` tags publish the main
+# `reasonix` CLI (see publish-npm.yml); the two are decoupled so the
+# alias can be released independently when the shim itself changes.
+on:
+  push:
+    tags: ["dsnix-v*"]
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: "Tag to publish (e.g. dsnix-v0.48.0). Required when running manually."
+        required: true
+        type: string
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  publish:
+    name: publish dsnix to npm
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.tag || github.ref }}
+
+      - name: Setup Node 22
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: npm
+          registry-url: https://registry.npmjs.org/
+
+      - name: Verify tag matches packages/dsnix/package.json version
+        shell: bash
+        run: |
+          tag="${{ github.event.inputs.tag || github.ref_name }}"
+          tag_version="${tag#dsnix-v}"
+          pkg_version=$(node -p "require('./packages/dsnix/package.json').version")
+          if [ "$tag_version" != "$pkg_version" ]; then
+            echo "::error::tag $tag (version $tag_version) does not match packages/dsnix/package.json version $pkg_version"
+            exit 1
+          fi
+          echo "tag $tag matches packages/dsnix/package.json $pkg_version"
+
+      - name: Verify reasonix@<version> is already published on npm
+        shell: bash
+        run: |
+          dep_version=$(node -p "require('./packages/dsnix/package.json').dependencies.reasonix")
+          if ! npm view "reasonix@${dep_version}" version >/dev/null 2>&1; then
+            echo "::error::dsnix depends on reasonix@${dep_version} but that version is not published yet"
+            exit 1
+          fi
+          echo "reasonix@${dep_version} is published — safe to publish dsnix"
+
+      - name: Publish dsnix to npm
+        run: npm publish --access public
+        working-directory: packages/dsnix
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/publish-npm.yml

@@ -0,0 +1,66 @@
+name: Publish npm
+
+# Tag namespace: plain `v<semver>` triggers npm publish for the
+# reasonix CLI package. Desktop Tauri releases use `desktop-v*`
+# (see release.yml) — pushing one of those never reaches this
+# workflow, so the two release tracks are fully decoupled.
+on:
+  push:
+    tags: ["v*"]
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: "Tag to publish (e.g. v0.47.0). Required when running manually."
+        required: true
+        type: string
+
+permissions:
+  contents: read
+  # `id-token: write` is the npm provenance handshake — harmless if we
+  # don't enable provenance, required if we ever do.
+  id-token: write
+
+jobs:
+  publish:
+    name: publish to npm
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          # workflow_dispatch lets a maintainer publish an older tag
+          # without re-pushing it; tag pushes already point HEAD at the
+          # right ref so the fallback is a no-op.
+          ref: ${{ github.event.inputs.tag || github.ref }}
+
+      - name: Setup Node 22
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: npm
+          registry-url: https://registry.npmjs.org/
+
+      # Fail-fast if someone tags without bumping package.json. npm itself
+      # would reject the duplicate publish, but the error there is
+      # opaque ("403 You cannot publish over the previously published
+      # versions") and CI is the place to catch it cleanly.
+      - name: Verify tag matches package.json version
+        shell: bash
+        run: |
+          tag="${{ github.event.inputs.tag || github.ref_name }}"
+          tag_version="${tag#v}"
+          pkg_version=$(node -p "require('./package.json').version")
+          if [ "$tag_version" != "$pkg_version" ]; then
+            echo "::error::tag $tag (version $tag_version) does not match package.json version $pkg_version"
+            exit 1
+          fi
+          echo "tag $tag matches package.json $pkg_version"
+
+      - name: Install dependencies
+        run: npm ci
+
+      # `npm publish` runs the prepublishOnly hook (lint + typecheck +
+      # test + build) automatically, so no separate verify step here.
+      - name: Publish to npm
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/release-mirror.yml

@@ -0,0 +1,103 @@
+name: Release mirror
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: "Tag to mirror (e.g. v0.42.0)"
+        required: true
+        type: string
+
+permissions:
+  contents: read
+
+jobs:
+  mirror:
+    name: Mirror release assets to R2
+    runs-on: ubuntu-latest
+    env:
+      HAS_R2: ${{ secrets.R2_ACCESS_KEY_ID != '' && secrets.R2_SECRET_ACCESS_KEY != '' && secrets.R2_ACCOUNT_ID != '' && secrets.R2_BUCKET != '' }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Resolve tag
+        id: tag
+        shell: bash
+        run: |
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            echo "name=${{ inputs.tag }}" >> "$GITHUB_OUTPUT"
+          else
+            echo "name=${{ github.event.release.tag_name }}" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Download release assets from GitHub
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          mkdir -p assets
+          gh release download "${{ steps.tag.outputs.name }}" \
+            -R "${{ github.repository }}" \
+            -D assets
+
+      # Rewrite bundle URLs inside latest.json (Tauri updater manifest)
+      # so the desktop pulls bundles from R2, not GitHub. Without this the
+      # updater fetches the small JSON from R2 but still downloads the
+      # heavy installer from github.com — defeating the mirror.
+      # No-op when latest.json is absent (CLI-only releases).
+      - name: Rewrite latest.json URLs → R2
+        if: env.HAS_R2 == 'true'
+        env:
+          R2_PUBLIC_BASE: https://pub-147fb53b9c1e4bbf891a257968619ea7.r2.dev
+          TAG: ${{ steps.tag.outputs.name }}
+        run: |
+          file=assets/latest.json
+          if [ ! -f "$file" ]; then
+            echo "no latest.json in release — skipping rewrite"
+            exit 0
+          fi
+          # GitHub URLs look like:
+          #   https://github.com/<owner>/<repo>/releases/download/<TAG>/<file>
+          # Rewrite to:
+          #   <R2_PUBLIC_BASE>/<TAG>/<file>
+          jq --arg base "$R2_PUBLIC_BASE" --arg tag "$TAG" '
+            .platforms |= with_entries(
+              .value.url |= sub("https://github.com/[^/]+/[^/]+/releases/download/[^/]+/"; "\($base)/\($tag)/")
+            )
+          ' "$file" > "$file.new"
+          mv "$file.new" "$file"
+          echo "rewrote latest.json:"
+          cat "$file"
+
+      - name: Configure AWS CLI for R2
+        if: env.HAS_R2 == 'true'
+        run: |
+          aws configure set aws_access_key_id "${{ secrets.R2_ACCESS_KEY_ID }}"
+          aws configure set aws_secret_access_key "${{ secrets.R2_SECRET_ACCESS_KEY }}"
+          aws configure set region auto
+
+      - name: Mirror to R2
+        if: env.HAS_R2 == 'true'
+        env:
+          R2_ACCOUNT_ID: ${{ secrets.R2_ACCOUNT_ID }}
+          R2_BUCKET: ${{ secrets.R2_BUCKET }}
+          TAG: ${{ steps.tag.outputs.name }}
+        run: |
+          ENDPOINT="https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com"
+          aws s3 cp assets/ "s3://${R2_BUCKET}/${TAG}/" \
+            --recursive \
+            --endpoint-url "$ENDPOINT"
+          aws s3 cp assets/ "s3://${R2_BUCKET}/latest/" \
+            --recursive \
+            --endpoint-url "$ENDPOINT"
+
+      - name: Summary
+        if: always()
+        run: |
+          {
+            echo "## Mirror result"
+            echo ""
+            echo "- Tag: \`${{ steps.tag.outputs.name }}\`"
+            echo "- R2: ${{ env.HAS_R2 == 'true' && '✓ mirrored' || 'skipped (no R2 secrets)' }}"
+          } >> "$GITHUB_STEP_SUMMARY"

.github/workflows/release.yml

@@ -0,0 +1,174 @@
+name: Release desktop
+
+# Tag namespace: `desktop-v<semver>` triggers desktop Tauri bundles.
+# Plain `v<semver>` tags are reserved for the npm CLI release (see
+# publish-npm.yml) — they intentionally do NOT trigger this workflow.
+# Bump the desktop with: `git tag desktop-vX.Y.Z && git push origin desktop-vX.Y.Z`.
+on:
+  push:
+    tags: ["desktop-v*"]
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: "Tag to publish (e.g. desktop-v0.47.0). Required when running manually."
+        required: true
+        type: string
+
+permissions:
+  contents: write
+
+jobs:
+  bundle:
+    name: bundle (${{ matrix.target.label }})
+    strategy:
+      fail-fast: false
+      matrix:
+        target:
+          # `rust` is the comma-separated list installed by dtolnay/rust-toolchain;
+          # `tauri` is what we pass to `cargo tauri build --target`. They differ
+          # only for the universal Mac shard, which produces one fat binary from
+          # two real Rust targets via lipo. Intel-only macos-13 runner is dropped
+          # — GH retired most of that pool, queue waits ran to hours.
+          - { os: ubuntu-22.04, label: "linux-x64", rust: "x86_64-unknown-linux-gnu", tauri: "x86_64-unknown-linux-gnu" }
+          - { os: macos-14, label: "macos-universal", rust: "aarch64-apple-darwin,x86_64-apple-darwin", tauri: "universal-apple-darwin" }
+          - { os: windows-latest, label: "windows-x64", rust: "x86_64-pc-windows-msvc", tauri: "x86_64-pc-windows-msvc" }
+    runs-on: ${{ matrix.target.os }}
+    # secrets.* isn't accessible from step-level if:, so expose presence as a
+    # job-level env. Treat "true"/"false" strings as booleans downstream.
+    env:
+      HAS_APPLE_CERT: ${{ secrets.APPLE_CERTIFICATE != '' }}
+      HAS_WIN_CERT: ${{ secrets.WINDOWS_CERTIFICATE != '' }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Resolve tag
+        id: tag
+        shell: bash
+        run: |
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            echo "name=${{ inputs.tag }}" >> "$GITHUB_OUTPUT"
+          else
+            echo "name=${GITHUB_REF_NAME}" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Setup Node 22
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: npm
+
+      - name: Setup Rust (${{ matrix.target.rust }})
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: ${{ matrix.target.rust }}
+
+      - name: Rust cache
+        uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: desktop/src-tauri -> target
+          key: ${{ matrix.target.label }}
+
+      - name: Install Linux bundle deps
+        if: runner.os == 'Linux'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            libwebkit2gtk-4.1-dev \
+            libgtk-3-dev \
+            libayatana-appindicator3-dev \
+            librsvg2-dev \
+            patchelf
+
+      - name: Install root deps
+        run: npm ci
+
+      - name: Sync desktop version from tag
+        run: node scripts/sync-desktop-version.mjs "${{ steps.tag.outputs.name }}"
+
+      - name: Build CLI bundle (dist/)
+        run: npm run build
+
+      - name: Install desktop deps
+        working-directory: desktop
+        run: npm ci
+
+      - name: Download bundled Node runtime
+        working-directory: desktop
+        run: npm run bundle:node
+
+      - name: Verify bundled Node is universal (macOS)
+        if: startsWith(matrix.target.os, 'macos-')
+        working-directory: desktop
+        run: |
+          archs=$(lipo -archs src-tauri/binaries/node)
+          echo "node archs: $archs"
+          echo "$archs" | grep -q "arm64"
+          echo "$archs" | grep -q "x86_64"
+
+      - name: Build & verify desktop frontend
+        working-directory: desktop
+        shell: bash
+        run: |
+          npm run build
+          test -f dist/index.html
+          ls dist/assets/*.js >/dev/null
+
+      # tauri-action signs OS bundles whenever the corresponding env vars are
+      # defined — including when they're defined to the empty string, which is
+      # what `secrets.UNSET` evaluates to. Gate each signing block on its
+      # certificate being non-empty so unsigned prereleases don't trip
+      # `security import` / `signtool` on missing certs.
+      - name: Build Tauri bundle (unsigned)
+        if: >-
+          (matrix.target.os != 'windows-latest' || env.HAS_WIN_CERT != 'true')
+          && (!startsWith(matrix.target.os, 'macos-') || env.HAS_APPLE_CERT != 'true')
+        uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
+        with:
+          projectPath: desktop
+          tagName: ${{ steps.tag.outputs.name }}
+          releaseName: Reasonix ${{ steps.tag.outputs.name }}
+          releaseDraft: true
+          prerelease: false
+          args: --target ${{ matrix.target.tauri }}
+
+      - name: Build Tauri bundle (Windows, signed)
+        if: matrix.target.os == 'windows-latest' && env.HAS_WIN_CERT == 'true'
+        uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
+          WINDOWS_CERTIFICATE: ${{ secrets.WINDOWS_CERTIFICATE }}
+          WINDOWS_CERTIFICATE_PASSWORD: ${{ secrets.WINDOWS_CERTIFICATE_PASSWORD }}
+        with:
+          projectPath: desktop
+          tagName: ${{ steps.tag.outputs.name }}
+          releaseName: Reasonix ${{ steps.tag.outputs.name }}
+          releaseDraft: true
+          prerelease: false
+          args: --target ${{ matrix.target.tauri }}
+
+      - name: Build Tauri bundle (macOS, signed + notarized)
+        if: startsWith(matrix.target.os, 'macos-') && env.HAS_APPLE_CERT == 'true'
+        uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
+          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
+          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+        with:
+          projectPath: desktop
+          tagName: ${{ steps.tag.outputs.name }}
+          releaseName: Reasonix ${{ steps.tag.outputs.name }}
+          releaseDraft: true
+          prerelease: false
+          args: --target ${{ matrix.target.tauri }}

.gitignore

@@ -1,6 +1,7 @@
 node_modules/
 dist/
 coverage/
+.stryker-tmp/
 .env
 .env.local
 *.log
@@ -32,4 +33,18 @@ sessions/
 .reasonix/semantic-skip
 # Scratch entry regenerated each time scripts/bundle-codemirror.mjs runs.
 scripts/.cm-entry.mjs
+# Personal bun lockfile — project uses npm officially.
+bun.lock
 
+# Local portable Node/npm used for development on machines without npm.
+.tools/
+.npm-cache/
+
+# Tauri desktop shell build artifacts.
+desktop/src-tauri/target/
+desktop/src-tauri/gen/
+desktop/src-tauri/binaries/
+
+# Design mock-up reference (local, not part of repo)
+.design-ref/
+*.cpuprofile

README.md

@@ -1,123 +1,335 @@
 <p align="center">
-  <img src="docs/logo.svg" alt="Reasonix — DeepSeek-native agent framework" width="640"/>
+  <img src="docs/logo.svg" alt="Reasonix" width="640"/>
 </p>
 
 <p align="center">
-  <strong>English</strong> · <a href="./README.zh-CN.md">简体中文</a> · <a href="https://esengine.github.io/reasonix/">Website</a>
+  <strong>English</strong>
+  &nbsp;·&nbsp;
+  <a href="./README.zh-CN.md">简体中文</a>
+  &nbsp;·&nbsp;
+  <a href="https://esengine.github.io/DeepSeek-Reasonix/">Website</a>
+  &nbsp;·&nbsp;
+  <a href="https://esengine.github.io/DeepSeek-Reasonix/configuration.html">Guide</a>
+  &nbsp;·&nbsp;
+  <a href="./docs/ARCHITECTURE.md">Architecture</a>
+  &nbsp;·&nbsp;
+  <a href="./benchmarks/">Benchmarks</a>
+  &nbsp;·&nbsp;
+  <strong><a href="https://discord.gg/XF78rEME2D">Discord</a></strong>
 </p>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/reasonix"><img src="https://img.shields.io/npm/v/reasonix.svg" alt="npm version"/></a>
-  <a href="https://github.com/esengine/reasonix/actions/workflows/ci.yml"><img src="https://github.com/esengine/reasonix/actions/workflows/ci.yml/badge.svg" alt="CI"/></a>
-  <a href="./LICENSE"><img src="https://img.shields.io/npm/l/reasonix.svg" alt="license"/></a>
-  <a href="https://www.npmjs.com/package/reasonix"><img src="https://img.shields.io/npm/dm/reasonix.svg" alt="downloads"/></a>
-  <a href="./package.json"><img src="https://img.shields.io/node/v/reasonix.svg" alt="node"/></a>
-  <a href="https://github.com/esengine/reasonix/stargazers"><img src="https://img.shields.io/github/stars/esengine/reasonix.svg?style=flat&logo=github&label=stars" alt="GitHub stars"/></a>
-  <a href="https://github.com/esengine/reasonix/discussions"><img src="https://img.shields.io/github/discussions/esengine/reasonix.svg?logo=github&label=discussions" alt="Discussions"/></a>
+  <a href="https://www.npmjs.com/package/reasonix"><img src="https://img.shields.io/npm/v/reasonix.svg?style=flat-square&color=cb3837&labelColor=161b22&logo=npm&logoColor=white" alt="npm version"/></a>
+  <a href="https://github.com/esengine/reasonix/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/esengine/reasonix/ci.yml?style=flat-square&label=ci&labelColor=161b22&logo=githubactions&logoColor=white" alt="CI"/></a>
+  <a href="./LICENSE"><img src="https://img.shields.io/npm/l/reasonix.svg?style=flat-square&color=8b949e&labelColor=161b22" alt="license"/></a>
+  <a href="https://www.npmjs.com/package/reasonix"><img src="https://img.shields.io/npm/dm/reasonix.svg?style=flat-square&color=3fb950&labelColor=161b22&label=downloads" alt="downloads"/></a>
+  <a href="./package.json"><img src="https://img.shields.io/node/v/reasonix.svg?style=flat-square&color=5fa04e&labelColor=161b22&logo=nodedotjs&logoColor=white" alt="node"/></a>
+  <a href="https://github.com/esengine/reasonix/stargazers"><img src="https://img.shields.io/github/stars/esengine/reasonix.svg?style=flat-square&color=dbab09&labelColor=161b22&logo=github&logoColor=white" alt="GitHub stars"/></a>
+  <a href="https://github.com/esengine/reasonix/graphs/contributors"><img src="https://img.shields.io/github/contributors/esengine/reasonix.svg?style=flat-square&color=bc8cff&labelColor=161b22&logo=github&logoColor=white" alt="contributors"/></a>
+  <a href="https://github.com/esengine/reasonix/discussions"><img src="https://img.shields.io/github/discussions/esengine/reasonix.svg?style=flat-square&color=58a6ff&labelColor=161b22&logo=github&logoColor=white" alt="Discussions"/></a>
+  <a href="https://discord.gg/XF78rEME2D"><img src="https://img.shields.io/badge/discord-join-5865F2.svg?style=flat-square&labelColor=161b22&logo=discord&logoColor=white" alt="Discord"/></a>
 </p>
 
 <p align="center">
-  <strong>A DeepSeek-native AI coding agent for your terminal.</strong> Engineered around DeepSeek's prefix-cache, so the savings are real and the loop stays cheap enough to leave on.
+  <a href="https://oosmetrics.com/repo/esengine/reasonix"><img src="https://api.oosmetrics.com/api/v1/badge/achievement/9e931d80-2050-4b10-902e-44970cc133ad.svg" alt="oosmetrics — Top 2 in Agents by velocity"/></a>
+  <a href="https://oosmetrics.com/repo/esengine/reasonix"><img src="https://api.oosmetrics.com/api/v1/badge/achievement/556d94b3-61b7-486b-baf2-888b9327deab.svg" alt="oosmetrics — Top 3 in LLMs by velocity"/></a>
+  <a href="https://oosmetrics.com/repo/esengine/reasonix"><img src="https://api.oosmetrics.com/api/v1/badge/achievement/0f457d4c-efca-4d15-ad2b-139691ff342c.svg" alt="oosmetrics — Top 3 in CLI by velocity"/></a>
 </p>
 
-<p align="center">
-  <img src="docs/assets/hero-stats.svg" alt="94% live prefix-cache hit · ~30× cheaper per task vs Claude Code · MIT terminal-native" width="860"/>
-</p>
+<br/>
 
----
+<h3 align="center">A DeepSeek-native AI coding agent for your terminal.</h3>
+<p align="center">Engineered around prefix-cache stability — so token costs stay low across long sessions, and you can leave it running.</p>
 
-## Quick start
-
-```bash
-cd my-project
-npx reasonix code   # paste a DeepSeek API key on first run; persists after
-```
+<br/>
 
 <p align="center">
   <img src="docs/assets/hero-terminal.svg" alt="Reasonix code mode — assistant proposes a SEARCH/REPLACE edit; nothing on disk until /apply" width="860"/>
 </p>
 
-Requires Node ≥ 22. Tested on macOS, Linux, and Windows (PowerShell, Git Bash, Windows Terminal). Get a [DeepSeek API key →](https://platform.deepseek.com/api_keys) · `reasonix code --help` for flags.
+<br/>
 
----
+> [!TIP]
+> **Cache stability isn't a feature you turn on; it's an invariant the loop is designed around.** That's the whole reason Reasonix is DeepSeek-only — every layer is tuned to the byte-stable prefix-cache mechanic.
 
-## How it compares
+> [!NOTE]
+> **Real user, single day (2026-05-01):** 435M input tokens, **99.82% cache hit**, ~$12 instead of the ~$61 the same workload would cost with no cache on `v4-flash` — see the [case study](./benchmarks/real-world-cache/README.md). DeepSeek provides the cacheable bytes; the four mechanisms in [Pillar 1](./docs/ARCHITECTURE.md#pillar-1--cache-first-loop) are how Reasonix keeps them cacheable across long sessions.
 
-|                                   | Reasonix         | Claude Code     | Cursor             | Aider            |
-|-----------------------------------|------------------|-----------------|--------------------|------------------|
-| Backend                           | DeepSeek V4      | Anthropic       | OpenAI / Anthropic | any (OpenRouter) |
-| **Cost / typical task**           | **~¥0.01–0.04**  | ~¥0.40–4        | ¥150/mo + usage    | varies           |
-| License                           | **MIT**          | closed          | closed             | Apache 2         |
-| **DeepSeek prefix-cache hit**     | **94%** (live)   | n/a             | n/a                | ~33% (baseline)  |
-| Embedded web dashboard            | yes              | —               | n/a (IDE)          | —                |
-| Persistent per-workspace sessions | yes              | partial         | n/a                | —                |
+> [!IMPORTANT]
+> **Community · 加入社区** — bilingual Discord with channels for setup help (`#help` / `#求助`), workflow showcases, feature ideas, and contributor-only PR coordination. Verify your GitHub in-server to get the **Contributor** role automatically. → **<https://discord.gg/XF78rEME2D>**
 
-Plan mode, edit review, MCP, skills, hooks, and sandboxing are all `yes` for Reasonix and most peers — see the feature grid below for what they actually do here.
+<br/>
 
-Numbers from `benchmarks/tau-bench-lite` (8 multi-turn tasks × 3 repeats, live `deepseek-chat`). [Committed transcripts →](./benchmarks/)
+## Install
+
+Requires Node ≥ 22. Works on macOS · Linux · Windows (PowerShell · Git Bash · Windows Terminal).
+
+Install Reasonix globally if you want the `reasonix` command available on your `PATH`:
+
+~~~bash
+npm install -g reasonix
+reasonix code my-project   # paste a DeepSeek API key on first run; persists after
+~~~
+
+Or run it once without installing globally:
+
+~~~bash
+cd my-project
+npx reasonix code          # always uses the latest package by default
+~~~
+
+Grab a [DeepSeek API key →](https://platform.deepseek.com/api_keys) · `reasonix code --help` for flags.
+
+If you use Reasonix daily, global install is the simplest path. If you just want to try it, use `npx`.
+
+**Prefer fewer keystrokes?** The shorter `dsnix` alias resolves to the same CLI:
+
+~~~bash
+npm install -g dsnix       # exposes `dsnix` on PATH, depends on reasonix
+npx dsnix@latest code      # one-shot via the shorter command
+~~~
+
+A global `npm install -g reasonix` also drops a `dsnix` shim on PATH, so the two are interchangeable.
+
+Bare `reasonix` (no subcommand) launches `code` in the current directory — typing `reasonix` and `reasonix code` are equivalent.
+
+| Command | When |
+|---|---|
+| `reasonix` / `reasonix code [dir]` | The coding agent. **Start here.** |
+| `reasonix chat` | Plain chat — no filesystem or shell tools. |
+| `reasonix run "task"` | One-shot, streams to stdout. Good for pipes. |
+| `reasonix doctor` | Health check: Node, API key, MCP wiring. |
+| `reasonix update` | Upgrade Reasonix itself. |
+
+Other subcommands (`replay` · `diff` · `events` · `stats` · `index` · `mcp` · `prune-sessions`) are in `reasonix --help` and the [CLI reference](https://esengine.github.io/DeepSeek-Reasonix/#cli).
+
+### QQ channel
+
+QQ can extend an existing `chat`, `code`, or desktop session as a remote channel. It is part of the current session flow, not a separate runtime mode.
+
+- CLI: start a session, then run `/qq connect`
+- Desktop: open `Settings -> General -> QQ Channel`
+
+Once connected, QQ messages can enter the current session, assistant replies route back to QQ, and follow-up interactions can continue remotely.
+
+For full setup, desktop quick start, and troubleshooting, see [QQ channel setup](./docs/qq-connect.md).
+
+### Desktop client (prerelease)
+
+A native Tauri client for users who want a GUI over the same loop. Multi-tab, the right-panel shows files the agent has read or edited this session, the same cost / cache / token meters live at the bottom. Same DeepSeek API key, same `~/.reasonix` config — the desktop bundles its own Node runtime, no separate `npm install` step.
+
+Download platform installers from [GitHub Releases](https://github.com/esengine/DeepSeek-Reasonix/releases). The desktop ships as a **prerelease**: the loop and protocol are the same as the CLI, but the UI is still being polished and the installers aren't code-signed yet.
+
+- **macOS** — first launch hits Gatekeeper. One-time fix: `xattr -dr com.apple.quarantine /Applications/Reasonix.app` (or right-click → Open → confirm).
+- **Windows** — SmartScreen warns "Unknown publisher". Click **More info → Run anyway**.
+- **Linux** — `.deb` and `.AppImage` ship plain, no extra step.
+
+The CLI remains the canonical surface. Anything that lands in the CLI is also available from the desktop's composer.
 
 <details>
-<summary><strong>Why DeepSeek-only? — the cache economics</strong></summary>
+<summary><strong>Working in another folder · chat vs. code · author a skill</strong></summary>
 
-Cheap tokens alone is half the story. DeepSeek's prefix-cache is **byte-stable**: the cache fingerprints from byte 0 of the prompt. Reasonix's loop is engineered around that — append-only growth, no re-ordering, no marker-based compaction — so the cache prefix survives every tool call.
+**Working in a different folder.** Reasonix scopes filesystem tools to the launch directory; pass `--dir` to retarget. Mid-session switching isn't supported by design (memory paths would tangle with stale roots) — quit and relaunch.
 
-By comparison, Claude Code is built around Anthropic's `cache_control` markers (a fundamentally different mechanic). Pointing it at DeepSeek's Anthropic-compat endpoint keeps the cheap tokens but loses the cache hits — markers are ignored, and the underlying prefix isn't byte-stable. Generic-backend tools (Aider / Cline / Continue) hit the same wall from the other direction: their compaction patterns destroy byte stability.
+~~~bash
+npx reasonix code --dir /path/to/project
+~~~
 
-At DeepSeek's pricing — $0.07/Mtok uncached, $0.014/Mtok cached — **the difference between 50% and 94% hit is roughly 2.5× on input cost alone.** Same model, same API; the loop's invariants are what changed.
+**Picking `chat` vs `code`.** `code` is the default and the only mode with filesystem / shell tools and SEARCH/REPLACE review. `chat` is the lighter, tools-off shell — reach for it when you want a thinking partner with MCP attached but no disk access.
 
-A few DeepSeek-specific fixes generic loops miss:
-
-| Generic loops assume | DeepSeek actually does | Reasonix's fix |
+| What you get | `code` | `chat` |
 |---|---|---|
-| Reasoning emitted as a structured `thinking` block | R1 sometimes leaks tool-call JSON inside `<think>` tags | a `scavenge` pass that pulls escaped tool calls back out |
-| Tool schemas validated strictly | DeepSeek silently drops deeply-nested object/array params | auto-flatten — nested params get rewritten to single-level prefixed names |
-| Tool-call args are well-formed JSON | DeepSeek occasionally produces `string="false"` and other malformed fragments | dedicated `ToolCallRepair` heals the common shapes before dispatch |
-| Reasoning depth tuned via system-level switches | V4 exposes a `reasoning_effort` knob (`max` / `high`) | `/effort` slash + `--effort` flag for cheap turns |
+| Filesystem tools + `edit_file` | ✓ | — |
+| SEARCH/REPLACE → `/apply` review | ✓ | — |
+| Shell tool (gated) | ✓ | — |
+| Plan mode · `/todo` · `/skill new` · `/mcp add` | ✓ | — |
+| Memory (`remember` / `recall_memory`) | project + global | global only |
+| MCP servers from config · web search · `ask_choice` | ✓ | ✓ |
+| Coding system prompt | ✓ | generic |
+| Session scope | per-directory | shared default |
 
-Cache stability isn't a feature you turn on; it's an invariant the loop is designed around. That's the entire reason Reasonix is DeepSeek-only.
+**Author your first skill.** No remote registry — write them directly. Edit the file (`description:` frontmatter + body), then `/skill list`. Add `runAs: subagent` to spawn an isolated subagent loop instead of inlining the body.
+
+~~~bash
+/skill new my-skill              # <project>/.reasonix/skills/my-skill.md
+/skill new my-skill --global     # ~/.reasonix/skills for cross-project use
+~~~
+
+**Claude-format skills also load.** `<project>/.claude/skills/<name>/SKILL.md` and `~/.claude/skills/` are read alongside Reasonix's native paths, so tooling that emits Claude-format skills works out of the box. Example — drop OpenSpec workflows in without an upstream adapter:
+
+~~~bash
+npx openspec init --tools claude    # writes .claude/skills/openspec-*/SKILL.md
+/skill openspec-propose <task>      # then invoke from Reasonix
+~~~
 
 </details>
 
----
+<br/>
 
-## What's in the box
+## Configuration
+
+One JSON file at `~/.reasonix/config.json` plus per-project overrides under `<project>/.reasonix/`. The full bilingual reference — every key, every slash command, the on-disk shape of skills/memory/hooks — lives at:
+
+> 📘 **[Configuration Guide](https://esengine.github.io/DeepSeek-Reasonix/configuration.html)** · [中文](https://esengine.github.io/DeepSeek-Reasonix/configuration.html?lang=zh)
+
+| Topic | Quick read |
+|---|---|
+| [MCP servers](https://esengine.github.io/DeepSeek-Reasonix/configuration.html#mcp) | stdio · SSE · Streamable HTTP. One spec format works for both `config.json` and `--mcp`. |
+| [Skills](https://esengine.github.io/DeepSeek-Reasonix/configuration.html#skills) | Markdown playbooks the model can invoke. `inline` or `subagent` mode. |
+| [Memory](https://esengine.github.io/DeepSeek-Reasonix/configuration.html#memory) | User-private knowledge pinned into the prefix. `user` / `feedback` / `project` / `reference` types. |
+| [Hooks](https://esengine.github.io/DeepSeek-Reasonix/configuration.html#hooks) | Shell commands on lifecycle events. `PreToolUse` (gating) · `PostToolUse` · `UserPromptSubmit` · `Stop`. |
+| [Permissions](https://esengine.github.io/DeepSeek-Reasonix/configuration.html#permissions) | Per-workspace shell allowlist. Exact-prefix match. |
+| [Web search](https://esengine.github.io/DeepSeek-Reasonix/configuration.html#search) | Mojeek by default; switch to self-hosted SearXNG or Metaso with `/search-engine`. |
+| [Semantic index](https://esengine.github.io/DeepSeek-Reasonix/configuration.html#index) | `reasonix index` — local Ollama or any OpenAI-compatible embedding endpoint. |
+
+<br/>
+
+## What makes Reasonix different
+
+The loop is organized around three pillars. Each one solves a problem generic agent frameworks don't even see — because they were designed for a different cache mechanic.
+
+<sub align="center">
+
+Click through to the full architecture writeup → [Pillar 1 — Cache-first loop](./docs/ARCHITECTURE.md#pillar-1--cache-first-loop) · [Pillar 2 — Tool-call repair](./docs/ARCHITECTURE.md#pillar-2--tool-call-repair) · [Pillar 3 — Cost control](./docs/ARCHITECTURE.md#pillar-3--cost-control-v06)
+
+</sub>
+
+<br/>
+
+## Capabilities
 
 <p align="center">
-  <img src="docs/assets/feature-grid.svg" alt="Feature grid — cache-first loop, plan mode, MCP first-class, sessions and dashboard, hooks, memory and skills" width="860"/>
+  <img src="docs/assets/feature-grid.svg" alt="Reasonix capabilities — cell-diff renderer, MCP, plan mode, permissions, dashboard, persistent sessions, hooks/skills/memory, semantic search, auto-checkpoints, /effort knob, transcript replay, event log" width="880"/>
 </p>
 
-Permissions (`allow` / `ask` / `deny`), tool-call repair (flatten · scavenge · truncation · storm), and `/effort` for cheap turns round out the loop. [Architecture →](./docs/ARCHITECTURE.md) · [Dashboard mockup →](https://esengine.github.io/reasonix/design/agent-dashboard.html) · [TUI mockup →](https://esengine.github.io/reasonix/design/agent-tui-terminal.html) · [Website →](https://esengine.github.io/reasonix/)
+<br/>
 
----
+## How it compares
 
-## Contributing
+|                                   | Reasonix         | Claude Code       | Cursor              | Aider              |
+|-----------------------------------|------------------|-------------------|---------------------|--------------------|
+| Backend                           | DeepSeek         | Anthropic         | OpenAI / Anthropic  | any (OpenRouter)   |
+| License                           | **MIT**          | closed            | closed              | Apache 2           |
+| Cost profile                      | **low per task** | premium           | subscription + use  | varies             |
+| DeepSeek prefix-cache             | **engineered**   | not applicable    | not applicable      | incidental         |
+| Embedded web dashboard            | yes              | —                 | n/a (IDE)           | —                  |
+| Configurable web search engine    | `/search-engine` | —             | —                   | —                  |
+| Persistent per-workspace sessions | yes              | partial           | n/a                 | —                  |
+| Plan mode · MCP · hooks · skills  | yes              | yes               | yes                 | partial            |
+| Web search (Mojeek + SearXNG + Metaso)   | yes              | yes               | yes                 | yes                |
+| Open community development        | yes              | —                 | —                   | yes                |
 
-Reasonix is solo-maintained but designed to grow. Scoped starter tickets — each with background, code pointers, acceptance criteria, and hints — live under the [`good first issue`](https://github.com/esengine/reasonix/labels/good%20first%20issue) label. Pick anything open.
+For live cache-hit rates, costs, and methodology, see [`benchmarks/`](./benchmarks/) — the numbers move with model pricing, so they live with the harness, not in the README.
+
+<br/>
+
+## Documentation
+
+- [**Architecture**](./docs/ARCHITECTURE.md) — three pillars: cache-first loop, tool-call repair, cost control
+- [**CLI Reference**](./docs/CLI-REFERENCE.md) — every shell subcommand, every slash command, every keybinding
+- [**QQ channel setup**](./docs/qq-connect.md) — CLI first-connect flow, desktop entry, and QQ Open Platform credentials
+- [**Benchmarks**](./benchmarks/) — τ-bench-lite harness, transcripts, cost methodology
+- [**Website**](https://esengine.github.io/DeepSeek-Reasonix/) — getting started, dashboard mockup, TUI mockup
+- [**Contributing**](./CONTRIBUTING.md) — comment policy, error-handling rules, library-over-hand-rolled
+- [**Code of Conduct**](./CODE_OF_CONDUCT.md) · [**Security policy**](./SECURITY.md)
+
+<br/>
+
+## Community
+
+> [!NOTE]
+> Reasonix is open source and community-developed. Every avatar in the Acknowledgments wall at the bottom of this file is a real PR that shipped.
+
+Scoped starter tickets — each with background, code pointers, acceptance criteria, and hints — live under the [`good first issue`](https://github.com/esengine/reasonix/labels/good%20first%20issue) label. Pick anything open.
+
+**Open Discussions — opinions wanted:**
 
-**Open Discussions** — opinions wanted:
 - [#20 · CLI / TUI design](https://github.com/esengine/reasonix/discussions/20) — what's broken, what's missing, what would you change?
-- [#21 · Dashboard design](https://github.com/esengine/reasonix/discussions/21) — react against the [proposed mockup](https://esengine.github.io/reasonix/design/agent-dashboard.html)
+- [#21 · Dashboard design](https://github.com/esengine/reasonix/discussions/21) — react against the [proposed mockup](https://esengine.github.io/DeepSeek-Reasonix/design/agent-dashboard.html)
 - [#22 · Future feature wishlist](https://github.com/esengine/reasonix/discussions/22) — what would you build into Reasonix next?
 
-**Before your first PR**: read [`CONTRIBUTING.md`](./CONTRIBUTING.md) — short, strict project rules (comments, errors, libraries-over-hand-rolled). `tests/comment-policy.test.ts` enforces the comment ones; `npm run verify` is the pre-push gate. By participating you agree to the [Code of Conduct](./CODE_OF_CONDUCT.md). Security issues → [SECURITY.md](./SECURITY.md).
+**Already using Reasonix and willing to help others discover it?** Publish blog posts, articles, screenshots, talks, or videos to [**Show and tell**](https://github.com/esengine/reasonix/discussions/categories/show-and-tell). The project has no marketing budget — community word of mouth is how new users find it. Sustained advocates earn the badge below, displayed next to the contributors wall once awarded:
 
-### Contributors
+<p align="center">
+  <a href="https://github.com/esengine/reasonix/discussions/categories/show-and-tell">
+    <img src="https://img.shields.io/badge/REASONIX-📣%20ADVOCATE-c4b5fd?style=for-the-badge&labelColor=0d1117" alt="Reasonix Advocate badge — earned by sustained advocates"/>
+  </a>
+</p>
 
-<a href="https://github.com/esengine/reasonix/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=esengine/reasonix" alt="Contributors to esengine/reasonix"/>
-</a>
+**Before your first PR**: read [`CONTRIBUTING.md`](./CONTRIBUTING.md) — short, strict rules (comments, errors, libraries-over-hand-rolled). `tests/comment-policy.test.ts` enforces the comment ones; `npm run verify` is the pre-push gate. By participating you agree to the [Code of Conduct](./CODE_OF_CONDUCT.md). Security issues → [SECURITY.md](./SECURITY.md).
 
----
+<br/>
 
 ## Non-goals
 
-- **Multi-provider flexibility.** DeepSeek-only on purpose — every layer is tuned around DeepSeek's specific cache mechanic and pricing. Coupling to one backend is the feature.
-- **IDE integration.** Terminal-first; the diff lives in `git diff`, the file tree in `ls`. The dashboard is a companion, not a Cursor replacement.
-- **Hardest-leaderboard reasoning.** Claude Opus still wins some benchmarks. DeepSeek V4 is competitive on coding; if your work is "solve this PhD proof" rather than "fix this auth bug," start with Claude.
+> [!IMPORTANT]
+> Reasonix is opinionated. Some things it deliberately *doesn't* do — listed here so you can pick the right tool for your work.
+
+- **Multi-provider flexibility.** DeepSeek-only on purpose. Coupling to one backend is the feature, not a limitation.
+- **IDE integration.** Terminal-first. The diff lives in `git diff`, the file tree in `ls`. The dashboard is a companion, not a Cursor replacement.
+- **Hardest-leaderboard reasoning.** Claude Opus still wins some benchmarks. DeepSeek is competitive on coding; if your work is "solve this PhD proof" rather than "fix this auth bug," start with Claude.
 - **Air-gapped / fully-free.** Reasonix needs a paid DeepSeek API key. For air-gapped or zero-cost runs see Aider + Ollama or [Continue](https://continue.dev).
 
+<br/>
+
+## Star History
+
+<a href="https://www.star-history.com/?repos=esengine%2FDeepSeek-Reasonix&type=date&legend=top-left">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=esengine/DeepSeek-Reasonix&type=date&theme=dark&legend=top-left" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=esengine/DeepSeek-Reasonix&type=date&legend=top-left" />
+   <img alt="Star History Chart" src="https://api.star-history.com/chart?repos=esengine/DeepSeek-Reasonix&type=date&legend=top-left" />
+ </picture>
+</a>
+
+<br/>
+
+## Support
+
+If Reasonix has been useful and you'd like to say thanks, you can. It stays a coffee, not a contract — donations don't buy feature priority or change how issues get triaged.
+
+- **International** — PayPal: [paypal.me/yuhuahui](https://paypal.me/yuhuahui)
+- **国内** — 微信支付（扫码）
+
+<p align="center">
+  <img src=".github/sponsor/wechat-pay.jpg" alt="WeChat Pay QR code" width="240"/>
+</p>
+
+<br/>
+
+## Acknowledgments
+
+A small list of folks whose work has shaped Reasonix the most — measured
+by both commit count and code volume. **Listed alphabetically, no ordering
+of importance.** The full contributor graph is on
+[GitHub](https://github.com/esengine/DeepSeek-Reasonix/graphs/contributors).
+
+- [**ctharvey**](https://github.com/ctharvey)
+- [**dimasd-angga**](https://github.com/dimasd-angga) (Dimas D. Angga)
+- [**Evan-Pycraft**](https://github.com/Evan-Pycraft)
+- [**ForeverYoungPp**](https://github.com/ForeverYoungPp)
+- [**GTC2080**](https://github.com/GTC2080) (TaoMu)
+- [**kabaka9527**](https://github.com/kabaka9527)
+- [**lisniuse**](https://github.com/lisniuse) (Richie)
+- [**wade19990814-hue**](https://github.com/wade19990814-hue)
+- [**wviana**](https://github.com/wviana) (Wesley Viana)
+
+Also a separate thank-you to [**Bernardxu123**](https://github.com/Bernardxu123)
+for designing the project logo (see [`docs/brand/`](./docs/brand/)), and to
+[AIGC Link](https://xhslink.com/m/80ngts127cA) for promoting the project on XiaoHongShu.
+
+<p align="center">
+  <a href="https://github.com/esengine/DeepSeek-Reasonix/graphs/contributors">
+    <img src="https://contrib.rocks/image?repo=esengine/DeepSeek-Reasonix&max=100&columns=12" alt="Contributors to esengine/DeepSeek-Reasonix" width="860"/>
+  </a>
+</p>
+
+<br/>
+
 ---
 
-## License
-
-MIT — see [LICENSE](./LICENSE).
+<p align="center">
+  <sub>MIT — see <a href="./LICENSE">LICENSE</a></sub>
+  <br/>
+  <sub>Built by the community at <a href="https://github.com/esengine/DeepSeek-Reasonix/graphs/contributors">esengine/DeepSeek-Reasonix</a></sub>
+</p>

README.zh-CN.md

@@ -1,123 +1,287 @@
 <p align="center">
-  <img src="docs/logo.svg" alt="Reasonix — DeepSeek 原生的 agent 框架" width="640"/>
+  <img src="docs/logo.svg" alt="Reasonix" width="640"/>
 </p>
 
 <p align="center">
-  <a href="./README.md">English</a> · <strong>简体中文</strong> · <a href="https://esengine.github.io/reasonix/">官方网站</a>
+  <a href="./README.md">English</a>
+  &nbsp;·&nbsp;
+  <strong>简体中文</strong>
+  &nbsp;·&nbsp;
+  <a href="https://esengine.github.io/DeepSeek-Reasonix/">官方网站</a>
+  &nbsp;·&nbsp;
+  <a href="https://esengine.github.io/DeepSeek-Reasonix/configuration.html?lang=zh">配置指南</a>
+  &nbsp;·&nbsp;
+  <a href="./docs/ARCHITECTURE.md">架构文档</a>
+  &nbsp;·&nbsp;
+  <a href="./benchmarks/">基准测试</a>
+  &nbsp;·&nbsp;
+  <strong><a href="https://discord.gg/XF78rEME2D">Discord</a></strong>
 </p>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/reasonix"><img src="https://img.shields.io/npm/v/reasonix.svg" alt="npm version"/></a>
-  <a href="https://github.com/esengine/reasonix/actions/workflows/ci.yml"><img src="https://github.com/esengine/reasonix/actions/workflows/ci.yml/badge.svg" alt="CI"/></a>
-  <a href="./LICENSE"><img src="https://img.shields.io/npm/l/reasonix.svg" alt="license"/></a>
-  <a href="https://www.npmjs.com/package/reasonix"><img src="https://img.shields.io/npm/dm/reasonix.svg" alt="downloads"/></a>
-  <a href="./package.json"><img src="https://img.shields.io/node/v/reasonix.svg" alt="node"/></a>
-  <a href="https://github.com/esengine/reasonix/stargazers"><img src="https://img.shields.io/github/stars/esengine/reasonix.svg?style=flat&logo=github&label=stars" alt="GitHub stars"/></a>
-  <a href="https://github.com/esengine/reasonix/discussions"><img src="https://img.shields.io/github/discussions/esengine/reasonix.svg?logo=github&label=discussions" alt="Discussions"/></a>
+  <a href="https://www.npmjs.com/package/reasonix"><img src="https://img.shields.io/npm/v/reasonix.svg?style=flat-square&color=cb3837&labelColor=161b22&logo=npm&logoColor=white" alt="npm version"/></a>
+  <a href="https://github.com/esengine/reasonix/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/esengine/reasonix/ci.yml?style=flat-square&label=ci&labelColor=161b22&logo=githubactions&logoColor=white" alt="CI"/></a>
+  <a href="./LICENSE"><img src="https://img.shields.io/npm/l/reasonix.svg?style=flat-square&color=8b949e&labelColor=161b22" alt="license"/></a>
+  <a href="https://www.npmjs.com/package/reasonix"><img src="https://img.shields.io/npm/dm/reasonix.svg?style=flat-square&color=3fb950&labelColor=161b22&label=downloads" alt="downloads"/></a>
+  <a href="./package.json"><img src="https://img.shields.io/node/v/reasonix.svg?style=flat-square&color=5fa04e&labelColor=161b22&logo=nodedotjs&logoColor=white" alt="node"/></a>
+  <a href="https://github.com/esengine/reasonix/stargazers"><img src="https://img.shields.io/github/stars/esengine/reasonix.svg?style=flat-square&color=dbab09&labelColor=161b22&logo=github&logoColor=white" alt="GitHub stars"/></a>
+  <a href="https://github.com/esengine/reasonix/graphs/contributors"><img src="https://img.shields.io/github/contributors/esengine/reasonix.svg?style=flat-square&color=bc8cff&labelColor=161b22&logo=github&logoColor=white" alt="contributors"/></a>
+  <a href="https://github.com/esengine/reasonix/discussions"><img src="https://img.shields.io/github/discussions/esengine/reasonix.svg?style=flat-square&color=58a6ff&labelColor=161b22&logo=github&logoColor=white" alt="Discussions"/></a>
+  <a href="https://discord.gg/XF78rEME2D"><img src="https://img.shields.io/badge/discord-join-5865F2.svg?style=flat-square&labelColor=161b22&logo=discord&logoColor=white" alt="Discord"/></a>
 </p>
 
 <p align="center">
-  <strong>DeepSeek 原生的终端 AI 编程代理。</strong> 围绕 DeepSeek 的前缀缓存机制打造——省钱是真省，loop 便宜到可以一直开着。
+  <a href="https://oosmetrics.com/repo/esengine/reasonix"><img src="https://api.oosmetrics.com/api/v1/badge/achievement/9e931d80-2050-4b10-902e-44970cc133ad.svg" alt="oosmetrics — Agents 速度榜 Top 2"/></a>
+  <a href="https://oosmetrics.com/repo/esengine/reasonix"><img src="https://api.oosmetrics.com/api/v1/badge/achievement/556d94b3-61b7-486b-baf2-888b9327deab.svg" alt="oosmetrics — LLMs 速度榜 Top 3"/></a>
+  <a href="https://oosmetrics.com/repo/esengine/reasonix"><img src="https://api.oosmetrics.com/api/v1/badge/achievement/0f457d4c-efca-4d15-ad2b-139691ff342c.svg" alt="oosmetrics — CLI 速度榜 Top 3"/></a>
 </p>
 
-<p align="center">
-  <img src="docs/assets/hero-stats.zh-CN.svg" alt="94% 实测前缀缓存命中 · 单任务比 Claude Code 便宜 ~30 倍 · MIT 终端原生" width="860"/>
-</p>
+<br/>
 
----
+<h3 align="center">DeepSeek 原生的终端 AI 编程代理。</h3>
+<p align="center">围绕前缀缓存稳定性设计 —— 长会话下 token 成本始终低位运行，可以一直开着。</p>
 
-## 快速上手
-
-```bash
-cd my-project
-npx reasonix code   # 首次运行粘贴 DeepSeek API Key，之后会记住
-```
+<br/>
 
 <p align="center">
   <img src="docs/assets/hero-terminal.zh-CN.svg" alt="Reasonix code 模式预览 — 助手提出 SEARCH/REPLACE 编辑，未 /apply 不落盘" width="860"/>
 </p>
 
-要求 Node ≥ 22。已在 macOS、Linux、Windows（PowerShell · Git Bash · Windows Terminal）测过。[去拿 DeepSeek API Key →](https://platform.deepseek.com/api_keys) · 完整 flag 看 `reasonix code --help`。
+<br/>
 
----
+> [!TIP]
+> **缓存稳定不是开关，而是循环要围绕设计的不变量。** 这就是 Reasonix 只支持 DeepSeek 的根本原因 —— 每一层都为 DeepSeek 字节稳定的前缀缓存机制调过。
 
-## 横向对比
+> [!IMPORTANT]
+> **加入社区 · Community** — 中英双语 Discord，频道包括 `#求助` / `#help`、`#分享` / `#showcase`、`#想法反馈`、贡献者专属 PR 协调区。在群内绑定 GitHub 后自动识别贡献者身份。→ **<https://discord.gg/XF78rEME2D>**
 
-|                            | Reasonix          | Claude Code     | Cursor             | Aider             |
-|----------------------------|-------------------|-----------------|--------------------|-------------------|
-| 后端                       | DeepSeek V4       | Anthropic       | OpenAI / Anthropic | 任意（OpenRouter）|
-| **单任务成本**             | **~¥0.01–0.04**   | ~¥0.40–4        | ¥150/月 + 用量     | 不一              |
-| 协议                       | **MIT**           | 闭源            | 闭源               | Apache 2          |
-| **DeepSeek 前缀缓存命中**  | **94%**（实测）   | 不适用          | 不适用             | ~33%（基线）      |
-| 内嵌 web 仪表盘            | 支持              | —               | 不适用 (IDE)       | —                 |
-| 持久化的工作区会话         | 支持              | 部分            | 不适用             | —                 |
+<br/>
 
-计划模式、编辑审查、MCP、skill、Hooks、沙箱在 Reasonix 和大多数同类里都是"支持"——具体怎么做的看下面的功能一览。
+## 安装
 
-数据来自 `benchmarks/tau-bench-lite`（8 个多轮任务 × 3 次重放，真实 `deepseek-chat`）。[完整 transcript →](./benchmarks/)
+~~~bash
+cd my-project
+npx reasonix code   # 首次运行粘贴 DeepSeek API Key，之后会记住
+~~~
+
+要求 Node ≥ 22。在 macOS · Linux · Windows（PowerShell · Git Bash · Windows Terminal）都跑得顺。[去拿 DeepSeek API Key →](https://platform.deepseek.com/api_keys) · 完整 flag 看 `reasonix code --help`。
+
+`npx` 是推荐路径 —— 不用全局安装，每次都拿最新版。如果你天天用、想把 `reasonix` 装到 `PATH`，跑一次 `reasonix update`。
+
+| 命令 | 何时用 |
+|---|---|
+| `reasonix code [dir]` | 编码 agent。**先用这个。** |
+| `reasonix chat` | 纯聊天 —— 不挂文件系统 / shell 工具。 |
+| `reasonix run "task"` | 一次性，结果流到 stdout。适合 shell 管道。 |
+| `reasonix doctor` | 体检：Node 版本、API Key、MCP 接线。 |
+| `reasonix update` | 升级 Reasonix 本身。 |
+
+其他子命令（`replay` · `diff` · `events` · `stats` · `index` · `mcp` · `prune-sessions`）在 `reasonix --help` 和 [CLI 参考](https://esengine.github.io/DeepSeek-Reasonix/#cli)。
+
+### QQ 通道
+
+Reasonix 可以把现有的 `chat`、`code` 或桌面端会话延伸到 QQ 上，作为远程通道使用；它扩展的是当前会话，不是独立的新运行模式。
+
+- CLI：先启动会话，再执行 `/qq connect`
+- 桌面端：打开 `设置 -> 通用 -> QQ通道`
+
+连接成功后，QQ 消息可以进入当前会话，助手回复会回到 QQ，后续确认和跟进交互也可以继续在 QQ 上完成。
+
+完整配置、桌面端快速上手与排障说明见：[QQ 连接指南](./docs/qq-connect.zh-CN.md)。
 
 <details>
-<summary><strong>为什么只支持 DeepSeek？— 缓存经济学</strong></summary>
+<summary><strong>切换工作区 · chat vs. code · 写第一个 Skill</strong></summary>
 
-便宜的 token 只是故事的一半。DeepSeek 的前缀缓存是**字节稳定**的：缓存指纹从 prompt 第 0 字节开始算。Reasonix 整个循环都围绕这一点设计——只追加、不重排、不做基于标记的 compaction，所以缓存前缀能跨过每一次工具调用存活下来。
+**切换工作区。** Reasonix 把文件系统工具作用域绑定在启动目录，传 `--dir` 可以指别处。中途切换是有意不支持的（消息日志和 memory 路径会和旧根目录混在一起）—— 退出再启动。
 
-对比一下：Claude Code 是围绕 Anthropic 的 `cache_control` 标记构建的（完全不同的机制）。把 Claude Code 指向 DeepSeek 的 Anthropic 兼容端点，能拿到便宜的 token，但缓存命中没了——标记被忽略，底下的前缀本来就不字节稳定。通用后端工具（Aider / Cline / Continue）从另一个方向撞上同一堵墙：它们的 compaction 模式会破坏字节稳定。
+~~~bash
+npx reasonix code --dir /path/to/project
+~~~
 
-按 DeepSeek 的定价 —— $0.07/Mtok 未命中、$0.014/Mtok 命中 —— **50% 命中和 94% 命中之间的差距，光是输入成本就大约 2.5 倍。** 同模型、同 API；变的只是循环本身的不变量。
+**`chat` 还是 `code`？** `code` 是默认入口、唯一带文件系统 / shell 工具和 SEARCH/REPLACE 审阅的模式。`chat` 是更轻量的纯对话壳——想要一个挂着 MCP 但没有磁盘权限的“思路助手”时用它。
 
-通用循环漏掉的几个 DeepSeek 专属修复：
-
-| 通用循环假设的 | DeepSeek 实际表现 | Reasonix 的处理 |
+| 你拿到什么 | `code` | `chat` |
 |---|---|---|
-| reasoning 在结构化的 `thinking` 块里 | R1 偶尔把 tool-call JSON 漏在 `<think>` 标签里 | 一个 `scavenge` pass 把逃逸的 tool call 拉回来 |
-| 工具 schema 严格校验 | DeepSeek 会静默丢掉深层嵌套的 object/array 参数 | 自动 flatten——嵌套参数被改写成单层带前缀的名字 |
-| tool-call 参数是合法 JSON | DeepSeek 偶尔吐 `string="false"` 之类的破碎片段 | 专门的 `ToolCallRepair` 在 dispatch 前把常见形状修好 |
-| reasoning 深度靠系统级开关调 | V4 暴露了 `reasoning_effort` 旋钮（`max` / `high`） | `/effort` 斜杠 + `--effort` flag，便宜回合可以降档 |
+| 文件系统工具 + `edit_file` | ✓ | — |
+| SEARCH/REPLACE → `/apply` 审阅 | ✓ | — |
+| Shell 工具（带 gate） | ✓ | — |
+| Plan 模式 · `/todo` · `/skill new` · `/mcp add` | ✓ | — |
+| Memory（`remember` / `recall_memory`） | 项目 + 全局 | 仅全局 |
+| 配置里的 MCP · web 搜索 · `ask_choice` | ✓ | ✓ |
+| 编码导向系统提示词 | ✓ | 通用 |
+| Session 作用域 | 按目录 | 共享默认 |
 
-缓存稳定不是个开关，是循环要围绕设计的不变量。这就是 Reasonix 只支持 DeepSeek 的根本原因。
+**写第一个 Skill。** 暂无在线市场——自己写。编辑文件（`description:` frontmatter + 正文），然后 `/skill list` 就能看到。frontmatter 加 `runAs: subagent` 会以隔离 subagent 跑，而不是把正文内联进父 prompt。
+
+~~~bash
+/skill new my-skill              # <project>/.reasonix/skills/my-skill.md
+/skill new my-skill --global     # ~/.reasonix/skills，跨项目共用
+~~~
 
 </details>
 
----
+<br/>
 
-## 功能一览
+## 配置
+
+一个全局 JSON 文件 `~/.reasonix/config.json`，加上项目级 `<project>/.reasonix/` 下的覆盖。完整的双语参考 —— 每一个 key、每一条斜杠命令、skills / memory / hooks 在磁盘上的形状 —— 都在这里：
+
+> 📘 **[配置指南](https://esengine.github.io/DeepSeek-Reasonix/configuration.html?lang=zh)** · [English](https://esengine.github.io/DeepSeek-Reasonix/configuration.html)
+
+| 主题 | 速读 |
+|---|---|
+| [MCP 服务器](https://esengine.github.io/DeepSeek-Reasonix/configuration.html?lang=zh#mcp) | stdio · SSE · Streamable HTTP。`config.json` 和 `--mcp` 共用同一种 spec 格式。 |
+| [Skills](https://esengine.github.io/DeepSeek-Reasonix/configuration.html?lang=zh#skills) | 模型可以调用的 markdown 剧本。`inline` 或 `subagent` 两种模式。 |
+| [Memory](https://esengine.github.io/DeepSeek-Reasonix/configuration.html?lang=zh#memory) | 用户私有的知识，钉进前缀。`user` / `feedback` / `project` / `reference` 四类。 |
+| [Hooks](https://esengine.github.io/DeepSeek-Reasonix/configuration.html?lang=zh#hooks) | 生命周期事件触发的 shell 命令。`PreToolUse`（拦截）· `PostToolUse` · `UserPromptSubmit` · `Stop`。 |
+| [权限](https://esengine.github.io/DeepSeek-Reasonix/configuration.html?lang=zh#permissions) | 按工作区的 shell 白名单，精确前缀匹配。 |
+| [Web 搜索](https://esengine.github.io/DeepSeek-Reasonix/configuration.html?lang=zh#search) | 默认 Mojeek；用 `/search-engine` 可切到自托管的 SearXNG 或 Metaso。 |
+| [语义索引](https://esengine.github.io/DeepSeek-Reasonix/configuration.html?lang=zh#index) | `reasonix index` —— 本地 Ollama，或任何 OpenAI 兼容的 embedding 接口。 |
+
+<br/>
+
+## Reasonix 的不同之处
+
+整个循环围绕三根支柱组织。每一根解决的都是通用 agent 框架根本看不见的问题 —— 因为它们是为另一种缓存机制设计的。
+
+<sub align="center">
+
+各支柱完整说明 → [Pillar 1 — 缓存优先循环](./docs/ARCHITECTURE.md#pillar-1--cache-first-loop) · [Pillar 2 — 工具调用修复](./docs/ARCHITECTURE.md#pillar-2--tool-call-repair) · [Pillar 3 — 成本控制](./docs/ARCHITECTURE.md#pillar-3--cost-control-v06)
+
+</sub>
+
+<br/>
+
+## 能力一览
 
 <p align="center">
-  <img src="docs/assets/feature-grid.zh-CN.svg" alt="功能一览 — 缓存优先循环、计划模式、MCP 一等公民、会话与仪表盘、Hooks、Memory 与 Skills" width="860"/>
+  <img src="docs/assets/feature-grid.zh-CN.svg" alt="Reasonix 能力一览 — cell-diff 渲染器、MCP、计划模式、权限、仪表盘、持久化会话、Hooks/Skills/Memory、语义检索、自动 checkpoint、/effort 旋钮、transcript 重放、事件日志" width="880"/>
 </p>
 
-权限系统（`allow` / `ask` / `deny`）、tool-call repair（flatten · scavenge · truncation · storm）、`/effort` 给便宜回合降档——一起把整个 loop 兜起来。[架构文档 →](./docs/ARCHITECTURE.md) · [Dashboard 设计稿 →](https://esengine.github.io/reasonix/design/agent-dashboard.html) · [TUI 设计稿 →](https://esengine.github.io/reasonix/design/agent-tui-terminal.html) · [官网 →](https://esengine.github.io/reasonix/)
+<br/>
 
----
+## 横向对比
 
-## 参与贡献
+|                            | Reasonix          | Claude Code       | Cursor              | Aider              |
+|----------------------------|-------------------|-------------------|---------------------|--------------------|
+| 后端                       | DeepSeek          | Anthropic         | OpenAI / Anthropic  | 任意（OpenRouter） |
+| 协议                       | **MIT**           | 闭源              | 闭源                | Apache 2           |
+| 单任务成本                 | **低**            | 高                | 订阅 + 用量         | 不一               |
+| DeepSeek 前缀缓存          | **专门工程化**    | 不适用            | 不适用              | 偶发命中           |
+| 内嵌 web 仪表盘            | 支持              | —                 | 不适用 (IDE)        | —                  |
+| 持久化的工作区会话         | 支持              | 部分              | 不适用              | —                  |
+| 计划模式 · MCP · Hooks     | 支持              | 支持              | 支持                | 部分               |
+| 开放社区共建               | 支持              | —                 | —                   | 支持               |
 
-Reasonix 现在主要是单人维护，但是为协作设计的。给新手准备的入门 issue —— 每个都带背景说明、代码定位、验收标准、提示 —— 全部挂在 [`good first issue`](https://github.com/esengine/reasonix/labels/good%20first%20issue) 标签下。挑任意一个还没人认领的就行。
+实测缓存命中率、成本、方法论看 [`benchmarks/`](./benchmarks/) —— 这些数会随模型定价变化，所以归在 harness 里，不进 README。
+
+<br/>
+
+## 文档
+
+- [**架构**](./docs/ARCHITECTURE.md) —— 四大支柱、缓存优先循环、思维提取、脚手架
+- [**CLI 参考**](./docs/CLI-REFERENCE.md) —— 每个 shell 子命令、每个 slash 命令、每个快捷键
+- [**QQ 连接指南**](./docs/qq-connect.zh-CN.md) —— CLI 首次连接流程、桌面端入口和 QQ 开放平台凭据
+- [**基准测试**](./benchmarks/) —— τ-bench-lite harness、transcript、成本方法论
+- [**官方网站**](https://esengine.github.io/DeepSeek-Reasonix/) —— 入门、Dashboard 设计稿、TUI 设计稿
+- [**贡献指南**](./CONTRIBUTING.md) —— 注释规则、错误处理、用现成库不手写
+- [**行为准则**](./CODE_OF_CONDUCT.md) · [**安全策略**](./SECURITY.md)
+
+<br/>
+
+## 社区
+
+> [!NOTE]
+> Reasonix 是开源、社区共建的项目。文末"致谢"那面贡献者墙上的每一个头像，都对应一次真实合并的 PR。
+
+给新手准备的入门 issue —— 每个都带背景说明、代码定位、验收标准、提示 —— 全部挂在 [`good first issue`](https://github.com/esengine/reasonix/labels/good%20first%20issue) 标签下。挑任意一个还没人认领的就行。
 
 **正在征集意见的 Discussions：**
-- [#20 · CLI / TUI 设计](https://github.com/esengine/reasonix/discussions/20) — 哪里坏了、哪里少东西、哪里你会怎么改？
-- [#21 · Dashboard 设计](https://github.com/esengine/reasonix/discussions/21) — 对着[设计稿](https://esengine.github.io/reasonix/design/agent-dashboard.html)拍砖
-- [#22 · 未来功能愿望单](https://github.com/esengine/reasonix/discussions/22) — 你希望 Reasonix 长出什么功能？
+
+- [#20 · CLI / TUI 设计](https://github.com/esengine/reasonix/discussions/20) —— 哪里坏了、哪里少东西、哪里你会怎么改？
+- [#21 · Dashboard 设计](https://github.com/esengine/reasonix/discussions/21) —— 对着[设计稿](https://esengine.github.io/DeepSeek-Reasonix/design/agent-dashboard.html)拍砖
+- [#22 · 未来功能愿望单](https://github.com/esengine/reasonix/discussions/22) —— 你希望 Reasonix 长出什么功能？
+
+**正在使用 Reasonix，愿意让更多人了解它？** 欢迎将相关博客、文章、截图、演讲或视频发布到 [**Show and tell**](https://github.com/esengine/reasonix/discussions/categories/show-and-tell)。项目没有营销预算，新用户主要通过社区口碑找到这里。持续参与传播的用户将获得下方这枚徽章，颁发后会展示在贡献者墙旁：
+
+<p align="center">
+  <a href="https://github.com/esengine/reasonix/discussions/categories/show-and-tell">
+    <img src="https://img.shields.io/badge/REASONIX-📣%20ADVOCATE-c4b5fd?style=for-the-badge&labelColor=0d1117" alt="Reasonix Advocate 徽章 —— 授予持续参与传播的用户"/>
+  </a>
+</p>
 
 **第一次提 PR 之前**：先读 [`CONTRIBUTING.md`](./CONTRIBUTING.md) —— 短小、严格的项目规则（注释、错误处理、用现成库不手写）。`tests/comment-policy.test.ts` 静态强制执行注释那部分，`npm run verify` 是 push 前的闸。参与本项目即同意 [行为准则](./CODE_OF_CONDUCT.md)。安全相关问题请走 [SECURITY.md](./SECURITY.md)。
 
-### 贡献者
-
-<a href="https://github.com/esengine/reasonix/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=esengine/reasonix" alt="esengine/reasonix 贡献者"/>
-</a>
-
----
+<br/>
 
 ## 不做的事
 
-- **多供应商灵活性。** 故意只做 DeepSeek —— 每一层都为 DeepSeek 特定的缓存机制和定价调过。绑死一个后端是 feature，不是要克服的限制。
-- **IDE 集成。** 终端优先；diff 在 `git diff`，文件树在 `ls`。仪表盘是 TUI 的伴生，不是 Cursor 的替代。
-- **追最难的 reasoning 榜单。** Claude Opus 在某些榜单上还是赢家。DeepSeek V4 在编程任务上有竞争力；如果你的工作是"解一个 PhD 级证明"而不是"修个 auth bug"，先用 Claude。
+> [!IMPORTANT]
+> Reasonix 是有立场的。有些事它故意 *不做* —— 列在这里方便你为自己的工作挑对工具。
+
+- **多供应商灵活性。** 故意只做 DeepSeek。绑死一个后端是 feature，不是限制。
+- **IDE 集成。** 终端优先。diff 在 `git diff`，文件树在 `ls`。仪表盘是 TUI 的伴生，不是 Cursor 的替代。
+- **追最难的 reasoning 榜单。** Claude Opus 在某些榜单上还是赢家。DeepSeek 在编程任务上有竞争力；如果你的工作是"解一个 PhD 级证明"而不是"修个 auth bug"，先用 Claude。
 - **完全离线 / 永远免费。** Reasonix 需要付费的 DeepSeek API Key。要离线 / 零成本，看 Aider + Ollama 或 [Continue](https://continue.dev)。
 
+<br/>
+
+## Star 趋势
+
+<a href="https://www.star-history.com/?repos=esengine%2FDeepSeek-Reasonix&type=date&legend=top-left">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=esengine/DeepSeek-Reasonix&type=date&theme=dark&legend=top-left" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=esengine/DeepSeek-Reasonix&type=date&legend=top-left" />
+   <img alt="Star History Chart" src="https://api.star-history.com/chart?repos=esengine/DeepSeek-Reasonix&type=date&legend=top-left" />
+ </picture>
+</a>
+
+<br/>
+
+## 支持本项目
+
+如果 Reasonix 帮你省了时间或 token，欢迎请杯咖啡。捐助不会换来 feature 优先级，也不会影响 issue 的处理顺序——就是「谢谢」。
+
+- **国内** — 微信支付（扫下方二维码）
+- **海外** — PayPal: [paypal.me/yuhuahui](https://paypal.me/yuhuahui)
+
+<p align="center">
+  <img src=".github/sponsor/wechat-pay.jpg" alt="微信支付收款码" width="240"/>
+</p>
+
+<br/>
+
+## 致谢
+
+下面这些朋友的工作塑造了 Reasonix 今天的样子 —— 综合 commit 数和代码量两个维度。
+**按字母顺序排列，排名不分先后。** 完整贡献者列表在
+[GitHub](https://github.com/esengine/DeepSeek-Reasonix/graphs/contributors)。
+
+- [**ctharvey**](https://github.com/ctharvey)
+- [**dimasd-angga**](https://github.com/dimasd-angga)（Dimas D. Angga）
+- [**Evan-Pycraft**](https://github.com/Evan-Pycraft)
+- [**ForeverYoungPp**](https://github.com/ForeverYoungPp)
+- [**GTC2080**](https://github.com/GTC2080)（TaoMu）
+- [**kabaka9527**](https://github.com/kabaka9527)
+- [**lisniuse**](https://github.com/lisniuse)（Richie）
+- [**wade19990814-hue**](https://github.com/wade19990814-hue)
+- [**wviana**](https://github.com/wviana)（Wesley Viana）
+
+另外特别感谢 [**Bernardxu123**](https://github.com/Bernardxu123) 设计的项目 logo
+（见 [`docs/brand/`](./docs/brand/)），以及 [AIGC Link](https://xhslink.com/m/80ngts127cA) 在小红书上的推广。
+
+<p align="center">
+  <a href="https://github.com/esengine/DeepSeek-Reasonix/graphs/contributors">
+    <img src="https://contrib.rocks/image?repo=esengine/DeepSeek-Reasonix&max=100&columns=12" alt="esengine/DeepSeek-Reasonix 贡献者" width="860"/>
+  </a>
+</p>
+
+<br/>
+
 ---
 
-## 协议
-
-MIT —— 见 [LICENSE](./LICENSE)。
+<p align="center">
+  <sub>MIT —— 见 <a href="./LICENSE">LICENSE</a></sub>
+  <br/>
+  <sub>由 <a href="https://github.com/esengine/DeepSeek-Reasonix/graphs/contributors">esengine/DeepSeek-Reasonix</a> 社区共建</sub>
+</p>

benchmarks/behavior-stability/harness.ts

@@ -0,0 +1,39 @@
+/** Evaluation harness — runs scenarios and collects results. */
+
+import type { EvalReport, EvalResult, EvalScenario } from "./types.js";
+
+export async function runScenarios(
+  scenarios: EvalScenario[],
+  opts: {
+    onResult?: (r: EvalResult) => void;
+  } = {},
+): Promise<EvalReport> {
+  const results: EvalResult[] = [];
+  for (const sc of scenarios) {
+    const t0 = Date.now();
+    let result: EvalResult;
+    try {
+      result = await sc.run();
+      result.durationMs = Date.now() - t0;
+    } catch (err) {
+      result = {
+        scenarioId: sc.id,
+        pass: false,
+        durationMs: Date.now() - t0,
+        details: `UNEXPECTED ERROR: ${(err as Error).message}`,
+      };
+    }
+    results.push(result);
+    opts.onResult?.(result);
+  }
+
+  // Dynamic import avoids bundling VERSION into the harness module.
+  const { VERSION } = await import("../../src/version.js");
+  return {
+    meta: {
+      date: new Date().toISOString(),
+      reasonixVersion: VERSION,
+    },
+    results,
+  };
+}

benchmarks/behavior-stability/report.ts

@@ -0,0 +1,81 @@
+/** Render behavior-stability results.json → markdown report. */
+
+import { readFileSync, writeFileSync } from "node:fs";
+import { pathToFileURL } from "node:url";
+import type { EvalReport } from "./types.js";
+
+interface CliArgs {
+  input: string;
+  outPath: string;
+}
+
+function parseArgs(argv: string[]): CliArgs {
+  const out: CliArgs = { input: "", outPath: "benchmarks/behavior-stability/report.md" };
+  const positional: string[] = [];
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "--out") out.outPath = argv[++i] ?? out.outPath;
+    else if (a && !a.startsWith("--")) positional.push(a);
+  }
+  out.input = positional[0] ?? "";
+  if (!out.input) {
+    throw new Error(
+      "usage: npx tsx benchmarks/behavior-stability/report.ts <results.json> [--out report.md]",
+    );
+  }
+  return out;
+}
+
+function renderHeader(report: EvalReport): string {
+  return `# Reasonix Behavior-Stability Evaluation
+
+**Date:** ${report.meta.date}
+**Version:** ${report.meta.reasonixVersion}
+`;
+}
+
+function renderSummary(report: EvalReport): string {
+  const passed = report.results.filter((r) => r.pass).length;
+  const total = report.results.length;
+  const pct = total > 0 ? ((passed / total) * 100).toFixed(0) : "0";
+
+  const rows = report.results.map((r) => {
+    const icon = r.pass ? "✅" : "❌";
+    return `| ${icon} | \`${r.scenarioId}\` | ${r.durationMs}ms | ${r.details} |`;
+  });
+
+  return `## Summary
+
+**${passed}/${total} passed (${pct}%)**
+
+| status | scenario | time | details |
+|---|---:|---:|:---|
+${rows.join("\n")}
+`;
+}
+
+function render(report: EvalReport): string {
+  return [renderHeader(report), renderSummary(report)].join("\n\n");
+}
+
+function isMain(): boolean {
+  const entry = process.argv[1];
+  if (!entry) return false;
+  return import.meta.url === pathToFileURL(entry).href;
+}
+
+async function main(): Promise<void> {
+  const args = parseArgs(process.argv.slice(2));
+  const raw = readFileSync(args.input, "utf8");
+  const report = JSON.parse(raw) as EvalReport;
+  const md = render(report);
+  writeFileSync(args.outPath, md, "utf8");
+  console.log(`Wrote ${args.outPath} (${report.results.length} results)`);
+}
+
+if (isMain()) {
+  main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}

benchmarks/behavior-stability/runner.ts

@@ -0,0 +1,87 @@
+/** CLI runner for behavior-stability evaluation. */
+
+import { mkdirSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { pathToFileURL } from "node:url";
+import { loadDotenv } from "../../src/index.js";
+import { ALL_SCENARIOS, API_SCENARIOS, LOCAL_SCENARIOS } from "./scenarios.js";
+import { runScenarios } from "./harness.js";
+import type { EvalScenario } from "./types.js";
+
+loadDotenv();
+
+interface CliArgs {
+  local: boolean;
+  api: boolean;
+  outPath: string | null;
+}
+
+function parseArgs(argv: string[]): CliArgs {
+  const out: CliArgs = { local: false, api: false, outPath: null };
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "--local") out.local = true;
+    else if (a === "--api") out.api = true;
+    else if (a === "--out") out.outPath = argv[++i] ?? null;
+  }
+  // Default to local-only when neither flag is provided.
+  if (!out.local && !out.api) out.local = true;
+  return out;
+}
+
+function pickScenarios(args: CliArgs): EvalScenario[] {
+  const scenarios: EvalScenario[] = [];
+  if (args.local) scenarios.push(...LOCAL_SCENARIOS);
+  if (args.api) scenarios.push(...API_SCENARIOS);
+  return scenarios;
+}
+
+function isMain(): boolean {
+  const entry = process.argv[1];
+  if (!entry) return false;
+  return import.meta.url === pathToFileURL(entry).href;
+}
+
+async function main(): Promise<void> {
+  const args = parseArgs(process.argv.slice(2));
+  const scenarios = pickScenarios(args);
+
+  if (scenarios.length === 0) {
+    console.log("No scenarios selected. Use --local, --api, or both.");
+    process.exit(0);
+  }
+
+  const categories = new Set(scenarios.map((s) => s.category));
+  console.log(`Running ${scenarios.length} scenario(s) [${[...categories].join(", ")}] …\n`);
+
+  const report = await runScenarios(scenarios, {
+    onResult: (r) => {
+      const icon = r.pass ? "✅" : "❌";
+      console.log(`${icon} ${r.scenarioId} (${r.durationMs}ms)`);
+      console.log(`   ${r.details}\n`);
+    },
+  });
+
+  const passed = report.results.filter((r) => r.pass).length;
+  const total = report.results.length;
+  console.log(`────────────────────────────────────────`);
+  console.log(`Results: ${passed}/${total} passed`);
+  console.log(`Version: ${report.meta.reasonixVersion}`);
+  console.log(`Date:    ${report.meta.date}`);
+
+  if (args.outPath) {
+    const dir = dirname(args.outPath);
+    if (dir !== ".") mkdirSync(dir, { recursive: true });
+    writeFileSync(args.outPath, `${JSON.stringify(report, null, 2)}\n`, "utf8");
+    console.log(`Wrote ${args.outPath}`);
+  }
+
+  if (passed < total) process.exit(1);
+}
+
+if (isMain()) {
+  main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}

benchmarks/behavior-stability/scenarios.ts

@@ -0,0 +1,147 @@
+/** Behavior-stability scenario for PR #1462 — constraint persistence across context folds. */
+
+import { AppendOnlyLog, SessionStats } from "../../src/index.js";
+import { ContextManager } from "../../src/context-manager.js";
+import { Usage } from "../../src/client.js";
+import type { EvalResult, EvalScenario } from "./types.js";
+
+/* ------------------------------------------------------------------ */
+/*  Helpers                                                            */
+/* ------------------------------------------------------------------ */
+
+function withTiming(fn: () => Promise<EvalResult>): Promise<EvalResult> {
+  const t0 = Date.now();
+  return fn().then((r) => ({ ...r, durationMs: Date.now() - t0 }));
+}
+
+function pass(id: string, details: string): EvalResult {
+  return { scenarioId: id, pass: true, durationMs: 0, details };
+}
+
+function fail(id: string, details: string): EvalResult {
+  return { scenarioId: id, pass: false, durationMs: 0, details };
+}
+
+/* ------------------------------------------------------------------ */
+/*  Mock client — returns a fixed summary for fold testing             */
+/* ------------------------------------------------------------------ */
+
+class MockDeepSeekClient {
+  private _replyContent: string;
+  constructor(replyContent: string) {
+    this._replyContent = replyContent;
+  }
+  async chat(): Promise<{
+    content: string;
+    reasoningContent: string;
+    usage: Usage;
+  }> {
+    return {
+      content: this._replyContent,
+      reasoningContent: "",
+      usage: new Usage(100, 50, 150, 0, 100),
+    };
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*  #1462 — Constraint persistence across folds (local)                */
+/* ------------------------------------------------------------------ */
+
+const constraintPersistence: EvalScenario = {
+  id: "constraint-persistence",
+  name: "Context fold preserves pinned constraints from system prompt",
+  category: "context",
+  requiresApi: false,
+  run: () =>
+    withTiming(async () => {
+      const systemPrompt = `You are a coding assistant.
+
+# HIGH PRIORITY constraints
+
+- DO NOT use npm install without asking.
+- Never delete files without confirmation.
+
+# User memory
+
+The user prefers TypeScript over JavaScript.
+
+# Project memory
+
+This project uses pnpm instead of npm.`;
+
+      const log = new AppendOnlyLog();
+      // Fill log with synthetic long history to trigger a fold boundary > 0.
+      for (let i = 0; i < 40; i++) {
+        log.append({
+          role: "user",
+          content: `Turn ${i}: Please review the codebase and tell me what you found.`,
+        });
+        log.append({
+          role: "assistant",
+          content: `Turn ${i} summary: I reviewed the codebase and found several issues including unused imports, missing type annotations, and inconsistent formatting.`,
+        });
+      }
+
+      const client = new MockDeepSeekClient("Summary of all prior turns.");
+      const stats = new SessionStats();
+      const ctx = new ContextManager({
+        client: client as any,
+        log,
+        stats,
+        sessionName: null,
+        getAbortSignal: () => new AbortController().signal,
+        getCurrentTurn: () => 1,
+        getSystemPrompt: () => systemPrompt,
+      });
+
+      // Use a tiny tail budget so almost everything becomes head and gets summarized.
+      const result = await ctx.fold("deepseek-v4-flash", { keepRecentTokens: 200 });
+
+      if (!result.folded) {
+        return fail(
+          "constraint-persistence",
+          `Fold did not happen (before=${result.beforeMessages}, after=${result.afterMessages}).`,
+        );
+      }
+
+      const foldedSystem = log.toMessages()[0];
+      if (foldedSystem?.role !== "assistant") {
+        return fail(
+          "constraint-persistence",
+          `Expected first folded message to be assistant summary, got ${foldedSystem?.role}.`,
+        );
+      }
+
+      const content = foldedSystem.content as string;
+      const checks = [
+        { text: "DO NOT use npm install without asking", label: "HIGH PRIORITY constraint" },
+        { text: "Never delete files without confirmation", label: "HIGH PRIORITY constraint 2" },
+        { text: "TypeScript over JavaScript", label: "User memory" },
+        { text: "pnpm instead of npm", label: "Project memory" },
+      ];
+
+      const missing = checks.filter((c) => !content.includes(c.text));
+      if (missing.length > 0) {
+        return fail(
+          "constraint-persistence",
+          `Folded summary missing ${missing.length} constraint(s): ${missing.map((m) => m.label).join(", ")}.`,
+        );
+      }
+
+      return pass(
+        "constraint-persistence",
+        `Fold reduced ${result.beforeMessages} → ${result.afterMessages} messages and preserved all ${checks.length} pinned constraints.`,
+      );
+    }),
+};
+
+/* ------------------------------------------------------------------ */
+/*  Exports                                                            */
+/* ------------------------------------------------------------------ */
+
+export const LOCAL_SCENARIOS: EvalScenario[] = [constraintPersistence];
+
+export const API_SCENARIOS: EvalScenario[] = [];
+
+export const ALL_SCENARIOS: EvalScenario[] = [...LOCAL_SCENARIOS, ...API_SCENARIOS];

benchmarks/behavior-stability/types.ts

@@ -0,0 +1,26 @@
+/** Behavior-stability evaluation types — lightweight, local-first regression suite. */
+
+export interface EvalScenario {
+  id: string;
+  name: string;
+  category: "shell" | "context" | "integrity";
+  /** True when the scenario calls the live LLM API (costs money). */
+  requiresApi: boolean;
+  run: () => Promise<EvalResult>;
+}
+
+export interface EvalResult {
+  scenarioId: string;
+  pass: boolean;
+  durationMs: number;
+  details: string;
+}
+
+export interface EvalReport {
+  meta: {
+    date: string;
+    reasonixVersion: string;
+    model?: string;
+  };
+  results: EvalResult[];
+}

benchmarks/compression-eval/.gitignore

@@ -0,0 +1 @@
+runs/

benchmarks/compression-eval/driver.ts

@@ -0,0 +1,165 @@
+import { readFileSync, writeFileSync } from "node:fs";
+import { resolvePreset } from "../../src/cli/ui/presets.js";
+import { DeepSeekClient } from "../../src/client.js";
+import { codeSystemPrompt } from "../../src/code/prompt.js";
+import { buildCodeToolset } from "../../src/code/setup.js";
+import { loadApiKey, loadBaseUrl, loadPreset } from "../../src/config.js";
+import { loadDotenv } from "../../src/env.js";
+import { CacheFirstLoop } from "../../src/loop.js";
+import { ImmutablePrefix } from "../../src/memory/runtime.js";
+import { DEEPSEEK_CONTEXT_TOKENS } from "../../src/telemetry/stats.js";
+
+interface DriverOptions {
+  taskFile: string;
+  transcriptOut: string;
+  budgetUsd: number;
+  rootDir: string;
+  /** Override DEEPSEEK_CONTEXT_TOKENS to force fold triggers on short tasks. */
+  fakeCtxMax: number | null;
+}
+
+function parseArgs(argv: string[]): DriverOptions {
+  let taskFile = "";
+  let transcriptOut = "";
+  let budgetUsd = 2.0;
+  let rootDir = process.cwd();
+  let fakeCtxMax: number | null = null;
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i]!;
+    if (a === "--task-file") taskFile = argv[++i]!;
+    else if (a === "--transcript-out") transcriptOut = argv[++i]!;
+    else if (a === "--budget") budgetUsd = Number(argv[++i]);
+    else if (a === "--root") rootDir = argv[++i]!;
+    else if (a === "--fake-ctxmax") fakeCtxMax = Number(argv[++i]);
+  }
+  if (!taskFile || !transcriptOut) {
+    console.error(
+      "usage: driver.ts --task-file <p> --transcript-out <p> [--budget 2] [--root <dir>] [--fake-ctxmax N]",
+    );
+    process.exit(1);
+  }
+  return { taskFile, transcriptOut, budgetUsd, rootDir, fakeCtxMax };
+}
+
+interface TurnRecord {
+  turn: number;
+  role: string;
+  prompt_tokens?: number;
+  cache_hit_tokens?: number;
+  cache_miss_tokens?: number;
+  cost_usd?: number;
+  tool?: string;
+  content_preview?: string;
+}
+
+async function main(): Promise<void> {
+  loadDotenv();
+  const opts = parseArgs(process.argv.slice(2));
+  const key = loadApiKey();
+  if (!key) {
+    console.error("DEEPSEEK_API_KEY missing — run `reasonix setup` first");
+    process.exit(1);
+  }
+  process.env.DEEPSEEK_API_KEY = key;
+
+  const presetSettings = resolvePreset(loadPreset());
+  const model = presetSettings.model;
+  if (opts.fakeCtxMax !== null && opts.fakeCtxMax > 0) {
+    for (const k of Object.keys(DEEPSEEK_CONTEXT_TOKENS)) {
+      DEEPSEEK_CONTEXT_TOKENS[k] = opts.fakeCtxMax;
+    }
+    console.log(`ctxMax override (ALL deepseek models): -> ${opts.fakeCtxMax}`);
+  }
+  console.log(`model: ${model}`);
+  console.log(`root:  ${opts.rootDir}`);
+  console.log(`budget: $${opts.budgetUsd}`);
+
+  const task = readFileSync(opts.taskFile, "utf8").trim();
+  console.log(`task: ${task.length} chars`);
+
+  const toolset = await buildCodeToolset({ rootDir: opts.rootDir });
+  console.log(`tools: ${toolset.tools.specs().length} registered`);
+
+  const client = new DeepSeekClient({ baseUrl: loadBaseUrl() });
+  const prefix = new ImmutablePrefix({
+    system: codeSystemPrompt(opts.rootDir),
+    toolSpecs: toolset.tools.specs(),
+  });
+  const loop = new CacheFirstLoop({
+    client,
+    prefix,
+    tools: toolset.tools,
+    model,
+    budgetUsd: opts.budgetUsd,
+  });
+
+  const records: TurnRecord[] = [];
+  const t0 = Date.now();
+  let lastTurn = 0;
+  try {
+    for await (const ev of loop.step(task)) {
+      if (ev.role === "assistant_final" && ev.stats?.usage) {
+        const u = ev.stats.usage;
+        const rec: TurnRecord = {
+          turn: ev.turn,
+          role: "assistant_final",
+          prompt_tokens: u.promptTokens,
+          cache_hit_tokens: u.promptCacheHitTokens,
+          cache_miss_tokens: u.promptCacheMissTokens,
+          cost_usd: ev.stats.cost,
+          content_preview: (ev.content ?? "").slice(0, 200),
+        };
+        records.push(rec);
+        lastTurn = ev.turn;
+        const ratio = u.promptCacheHitTokens / (u.promptTokens || 1);
+        process.stdout.write(
+          `  turn ${ev.turn}: pt=${u.promptTokens} hit=${(ratio * 100).toFixed(1)}% cost=$${ev.stats.cost.toFixed(4)}\n`,
+        );
+      } else if (ev.role === "tool" && ev.toolName) {
+        records.push({
+          turn: ev.turn,
+          role: "tool",
+          tool: ev.toolName,
+          content_preview: (ev.content ?? "").slice(0, 200),
+        });
+      } else if (ev.role === "warning" || ev.role === "status") {
+        const lc = (ev.content ?? "").toLowerCase();
+        const isFold = lc.includes("fold") || lc.includes("compact") || lc.includes("summar");
+        records.push({
+          turn: ev.turn,
+          role: isFold ? "fold_event" : `${ev.role}_event`,
+          content_preview: ev.content,
+        });
+        if (isFold) {
+          process.stdout.write(
+            `  ⟳ ${ev.role.toUpperCase()} at turn ${ev.turn}: ${ev.content.slice(0, 120)}\n`,
+          );
+        }
+      } else if (ev.role === "error") {
+        records.push({ turn: ev.turn, role: "error", content_preview: ev.error });
+        process.stdout.write(`  ✗ error turn ${ev.turn}: ${ev.error}\n`);
+      } else if (ev.role === "done") {
+        process.stdout.write(`  ✓ done (turn ${ev.turn})\n`);
+      }
+    }
+  } catch (err) {
+    process.stdout.write(`  ✗ loop threw: ${(err as Error).message}\n`);
+  }
+
+  const elapsed = Math.round((Date.now() - t0) / 1000);
+  const s = loop.stats.summary();
+  console.log(
+    `\nDONE turns=${lastTurn} elapsed=${elapsed}s cache=${(s.cacheHitRatio * 100).toFixed(1)}% cost=$${s.totalCostUsd.toFixed(4)}`,
+  );
+
+  writeFileSync(
+    opts.transcriptOut,
+    `${JSON.stringify({ _meta: { model, task_length: task.length, elapsed_s: elapsed, summary: s } })}\n${records.map((r) => JSON.stringify(r)).join("\n")}\n`,
+  );
+  console.log(`transcript: ${opts.transcriptOut}`);
+}
+
+main().catch((err) => {
+  console.error("driver crashed:", err);
+  process.exit(1);
+});

benchmarks/compression-eval/e2e.ts

@@ -0,0 +1,325 @@
+import { spawnSync } from "node:child_process";
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+
+interface RunSpec {
+  name: string;
+  foldThreshold: number;
+  aggressiveThreshold: number;
+}
+
+interface RunSummary {
+  name: string;
+  repeat: number;
+  turns: number;
+  cacheHitRatio: number;
+  costUsd: number;
+  totalInputTokens: number;
+  cacheHitTokens: number;
+  cacheMissTokens: number;
+  foldCount: number;
+  exitCode: number;
+}
+
+const RUNS: RunSpec[] = [
+  { name: "no-fold", foldThreshold: 0.99, aggressiveThreshold: 0.99 },
+  { name: "current_50_70", foldThreshold: 0.5, aggressiveThreshold: 0.7 },
+  { name: "very_late_75_90", foldThreshold: 0.75, aggressiveThreshold: 0.9 },
+  { name: "aggressive_90_95", foldThreshold: 0.9, aggressiveThreshold: 0.95 },
+];
+
+function parseArgs(argv: string[]): {
+  taskFile: string;
+  budget: number;
+  outDir: string;
+  only: string | null;
+  fakeCtxMax: number | null;
+  repeats: number;
+} {
+  let taskFile = "";
+  let budget = 2.0;
+  let outDir = "";
+  let only: string | null = null;
+  let fakeCtxMax: number | null = null;
+  let repeats = 1;
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i]!;
+    if (a === "--task-file") taskFile = argv[++i]!;
+    else if (a === "--budget") budget = Number(argv[++i]);
+    else if (a === "--out-dir") outDir = argv[++i]!;
+    else if (a === "--only") only = argv[++i]!;
+    else if (a === "--fake-ctxmax") fakeCtxMax = Number(argv[++i]);
+    else if (a === "--repeats") repeats = Number(argv[++i]);
+  }
+  if (!taskFile) {
+    console.error(
+      "usage: tsx e2e.ts --task-file <p> [--budget N] [--out-dir <p>] [--only <n>] [--fake-ctxmax N] [--repeats N]",
+    );
+    process.exit(1);
+  }
+  if (!outDir) {
+    const ts = new Date().toISOString().replace(/[:.]/g, "-").slice(0, 19);
+    outDir = `benchmarks/compression-eval/runs/${ts}`;
+  }
+  return { taskFile, budget, outDir, only, fakeCtxMax, repeats };
+}
+
+function loadTranscriptSummary(path: string): Partial<RunSummary> {
+  let turns = 0;
+  let inputTokens = 0;
+  let cacheHit = 0;
+  let cacheMiss = 0;
+  let costUsd = 0;
+  let foldCount = 0;
+  const promptSeq: number[] = [];
+  try {
+    const lines = readFileSync(path, "utf8").split("\n");
+    for (const ln of lines) {
+      const t = ln.trim();
+      if (!t) continue;
+      let rec: {
+        role?: string;
+        prompt_tokens?: number;
+        cache_hit_tokens?: number;
+        cache_miss_tokens?: number;
+        cost_usd?: number;
+      };
+      try {
+        rec = JSON.parse(t);
+      } catch {
+        continue;
+      }
+      if (rec.role === "assistant_final") {
+        turns++;
+        const pt = rec.prompt_tokens ?? 0;
+        inputTokens += pt;
+        cacheHit += rec.cache_hit_tokens ?? 0;
+        cacheMiss += rec.cache_miss_tokens ?? 0;
+        costUsd += rec.cost_usd ?? 0;
+        if (pt > 0) promptSeq.push(pt);
+      } else if (rec.role === "fold_event") {
+        foldCount++;
+      }
+    }
+  } catch {
+    /* file missing — caller will see exitCode and zeros */
+  }
+  if (foldCount === 0) {
+    for (let i = 1; i < promptSeq.length; i++) {
+      if (promptSeq[i]! < promptSeq[i - 1]! * 0.6) foldCount++;
+    }
+  }
+  return {
+    turns,
+    totalInputTokens: inputTokens,
+    cacheHitTokens: cacheHit,
+    cacheMissTokens: cacheMiss,
+    cacheHitRatio: inputTokens > 0 ? cacheHit / inputTokens : 0,
+    costUsd,
+    foldCount,
+  };
+}
+
+function runOne(
+  spec: RunSpec,
+  task: string,
+  budget: number,
+  outDir: string,
+  fakeCtxMax: number | null,
+  repeat: number,
+): RunSummary {
+  const runName = repeat > 1 ? `${spec.name}_r${repeat}` : spec.name;
+  const runDir = join(outDir, runName);
+  mkdirSync(runDir, { recursive: true });
+  const transcript = join(runDir, "transcript.jsonl");
+  const logPath = join(runDir, "stdout.log");
+
+  console.log(
+    `\n>>> [${spec.name}] fold=${spec.foldThreshold} agg=${spec.aggressiveThreshold}`,
+  );
+  const tsxCli = join("node_modules", "tsx", "dist", "cli.mjs");
+  const taskFilePath = join(runDir, "task.txt");
+  writeFileSync(taskFilePath, task);
+  const t0 = Date.now();
+  const res = spawnSync(
+    process.execPath,
+    [
+      tsxCli,
+      "benchmarks/compression-eval/driver.ts",
+      "--task-file",
+      taskFilePath,
+      "--transcript-out",
+      transcript,
+      "--budget",
+      String(budget),
+      ...(fakeCtxMax ? ["--fake-ctxmax", String(fakeCtxMax)] : []),
+    ],
+    {
+      env: {
+        ...process.env,
+        REASONIX_FOLD_THRESHOLD: String(spec.foldThreshold),
+        REASONIX_FOLD_AGGRESSIVE_THRESHOLD: String(spec.aggressiveThreshold),
+      },
+      encoding: "utf8",
+      stdio: ["ignore", "pipe", "pipe"],
+      shell: false,
+      maxBuffer: 1024 * 1024 * 128,
+    },
+  );
+  const exitCode = res.status ?? -1;
+  const stdout = res.stdout ?? "";
+  const stderr = res.stderr ?? "";
+  const elapsedS = Math.round((Date.now() - t0) / 1000);
+  writeFileSync(logPath, `${stdout}\n--- stderr ---\n${stderr}`);
+  console.log(`    exit=${exitCode} elapsed=${elapsedS}s log=${logPath}`);
+
+  const parsed = loadTranscriptSummary(transcript);
+  return {
+    name: spec.name,
+    repeat,
+    turns: parsed.turns ?? 0,
+    cacheHitRatio: parsed.cacheHitRatio ?? 0,
+    costUsd: parsed.costUsd ?? 0,
+    totalInputTokens: parsed.totalInputTokens ?? 0,
+    cacheHitTokens: parsed.cacheHitTokens ?? 0,
+    cacheMissTokens: parsed.cacheMissTokens ?? 0,
+    foldCount: parsed.foldCount ?? 0,
+    exitCode,
+  };
+}
+
+function pct(n: number): string {
+  return `${(n * 100).toFixed(1)}%`;
+}
+function fmtTok(n: number): string {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(2)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+  return String(n);
+}
+
+interface AggregateRow {
+  name: string;
+  n: number;
+  meanCost: number;
+  stdCost: number;
+  meanMiss: number;
+  stdMiss: number;
+  meanHitPct: number;
+  stdHitPct: number;
+  meanTurns: number;
+  meanFolds: number;
+}
+
+function meanStd(xs: number[]): [number, number] {
+  if (xs.length === 0) return [0, 0];
+  const m = xs.reduce((a, b) => a + b, 0) / xs.length;
+  const v = xs.reduce((a, b) => a + (b - m) ** 2, 0) / xs.length;
+  return [m, Math.sqrt(v)];
+}
+
+function aggregateByConfig(rows: RunSummary[]): AggregateRow[] {
+  const groups = new Map<string, RunSummary[]>();
+  for (const r of rows) {
+    if (!groups.has(r.name)) groups.set(r.name, []);
+    groups.get(r.name)!.push(r);
+  }
+  const result: AggregateRow[] = [];
+  for (const [name, group] of groups) {
+    const [meanCost, stdCost] = meanStd(group.map((r) => r.costUsd));
+    const [meanMiss, stdMiss] = meanStd(group.map((r) => r.cacheMissTokens));
+    const [meanHitPct, stdHitPct] = meanStd(group.map((r) => r.cacheHitRatio * 100));
+    const [meanTurns] = meanStd(group.map((r) => r.turns));
+    const [meanFolds] = meanStd(group.map((r) => r.foldCount));
+    result.push({
+      name,
+      n: group.length,
+      meanCost,
+      stdCost,
+      meanMiss,
+      stdMiss,
+      meanHitPct,
+      stdHitPct,
+      meanTurns,
+      meanFolds,
+    });
+  }
+  return result;
+}
+
+function reportAggregate(rows: AggregateRow[]): string {
+  const cols: Array<[string, (r: AggregateRow) => string]> = [
+    ["config", (r) => r.name],
+    ["n", (r) => String(r.n)],
+    ["turns", (r) => r.meanTurns.toFixed(1)],
+    ["folds", (r) => r.meanFolds.toFixed(1)],
+    ["hit%", (r) => `${r.meanHitPct.toFixed(1)}±${r.stdHitPct.toFixed(1)}`],
+    ["miss", (r) => `${fmtTok(r.meanMiss)}±${fmtTok(r.stdMiss)}`],
+    ["cost$", (r) => `${r.meanCost.toFixed(4)}±${r.stdCost.toFixed(4)}`],
+  ];
+  const widths = cols.map(([h, f]) => Math.max(h.length, ...rows.map((r) => f(r).length)));
+  const head = cols.map(([h], i) => h.padEnd(widths[i]!)).join("│ ");
+  const sep = "─".repeat(widths.reduce((a, b) => a + b + 2, 0));
+  const body = rows
+    .map((r) => cols.map(([_, f], i) => f(r).padEnd(widths[i]!)).join("│ "))
+    .join("\n");
+  return `${head}\n${sep}\n${body}`;
+}
+
+function reportTable(rows: RunSummary[]): string {
+  const cols: Array<[string, (r: RunSummary) => string]> = [
+    ["config", (r) => r.name],
+    ["turns", (r) => String(r.turns)],
+    ["input", (r) => fmtTok(r.totalInputTokens)],
+    ["hit", (r) => fmtTok(r.cacheHitTokens)],
+    ["hit%", (r) => pct(r.cacheHitRatio)],
+    ["miss", (r) => fmtTok(r.cacheMissTokens)],
+    ["folds", (r) => String(r.foldCount)],
+    ["cost", (r) => `$${r.costUsd.toFixed(4)}`],
+    ["exit", (r) => String(r.exitCode)],
+  ];
+  const widths = cols.map(([h, f]) => Math.max(h.length, ...rows.map((r) => f(r).length)));
+  const head = cols.map(([h], i) => h.padEnd(widths[i]!)).join("│ ");
+  const sep = "─".repeat(widths.reduce((a, b) => a + b + 2, 0));
+  const body = rows
+    .map((r) => cols.map(([_, f], i) => f(r).padEnd(widths[i]!)).join("│ "))
+    .join("\n");
+  return `${head}\n${sep}\n${body}`;
+}
+
+function main(): void {
+  const { taskFile, budget, outDir, only, fakeCtxMax, repeats } = parseArgs(process.argv.slice(2));
+  const task = readFileSync(taskFile, "utf8").trim();
+  mkdirSync(outDir, { recursive: true });
+  const specs = only ? RUNS.filter((r) => r.name === only) : RUNS;
+  if (specs.length === 0) {
+    console.error(`no config matches --only=${only}; available: ${RUNS.map((r) => r.name).join(", ")}`);
+    process.exit(1);
+  }
+  console.log(`task: ${taskFile} (${task.length} chars)`);
+  console.log(`out:  ${outDir}`);
+  console.log(`budget per run: $${budget}`);
+  console.log(`configs: ${specs.map((s) => s.name).join(", ")}`);
+  console.log(`repeats: ${repeats}`);
+  if (fakeCtxMax) console.log(`fake ctxMax: ${fakeCtxMax}`);
+
+  const summaries: RunSummary[] = [];
+  for (let r = 1; r <= repeats; r++) {
+    for (const spec of specs) {
+      summaries.push(runOne(spec, task, budget, outDir, fakeCtxMax, r));
+    }
+  }
+
+  const table = reportTable(summaries);
+  console.log(`\n=== Raw runs ===\n${table}`);
+  if (repeats > 1) {
+    const agg = aggregateByConfig(summaries);
+    const aggTable = reportAggregate(agg);
+    console.log(`\n=== Aggregate (mean ± std) ===\n${aggTable}`);
+    writeFileSync(join(outDir, "aggregate.txt"), aggTable);
+  }
+  writeFileSync(join(outDir, "summary.json"), JSON.stringify(summaries, null, 2));
+  writeFileSync(join(outDir, "summary.txt"), table);
+  console.log(`\nsaved: ${join(outDir, "summary.json")}`);
+}
+
+main();

benchmarks/compression-eval/run.ts

@@ -0,0 +1,89 @@
+import { basename } from "node:path";
+import { loadSession, simulate, type RunResult, type ThresholdConfig } from "./simulator.js";
+
+const BASELINE: ThresholdConfig = {
+  ctxMax: 1_000_000,
+  foldThreshold: 0.5,
+  tailFraction: 0.2,
+  aggressiveThreshold: 0.7,
+  aggressiveTailFraction: 0.1,
+  minSavingsFraction: 0.3,
+  summaryRatio: 0.05,
+};
+
+interface NamedConfig {
+  name: string;
+  config: ThresholdConfig;
+}
+
+function configs(ctxMax: number): NamedConfig[] {
+  const mk = (over: Partial<ThresholdConfig>): ThresholdConfig => ({ ...BASELINE, ...over, ctxMax });
+  return [
+    { name: "no-fold", config: mk({ foldThreshold: 999, aggressiveThreshold: 999 }) },
+    { name: "current (50/70)", config: mk({ foldThreshold: 0.5, aggressiveThreshold: 0.7 }) },
+    { name: "late (60/80)", config: mk({ foldThreshold: 0.6, aggressiveThreshold: 0.8 }) },
+    { name: "very-late (75/90)", config: mk({ foldThreshold: 0.75, aggressiveThreshold: 0.9 }) },
+    { name: "early (35/55)", config: mk({ foldThreshold: 0.35, aggressiveThreshold: 0.55 }) },
+  ];
+}
+
+function parseArgs(argv: string[]): { sessions: string[]; ctxMax: number } {
+  const sessions: string[] = [];
+  let ctxMax = 1_000_000;
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i]!;
+    if (a === "--ctx-max") ctxMax = Number(argv[++i]);
+    else if (a === "--session") sessions.push(argv[++i]!);
+    else if (!a.startsWith("--")) sessions.push(a);
+  }
+  return { sessions, ctxMax };
+}
+
+function fmt(n: number): string {
+  if (n >= 1e9) return `${(n / 1e9).toFixed(2)}G`;
+  if (n >= 1e6) return `${(n / 1e6).toFixed(2)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+  return String(n);
+}
+
+function pct(n: number): string {
+  return `${(n * 100).toFixed(1)}%`;
+}
+
+function report(label: string, rows: Array<{ name: string; result: RunResult }>): void {
+  console.log(`\n=== ${label} ===`);
+  const w = [22, 10, 10, 8, 10, 6, 10];
+  const headers = ["config", "input", "cache_hit", "hit%", "miss", "folds", "peak"];
+  console.log(headers.map((h, i) => h.padEnd(w[i]!)).join("│ "));
+  console.log("─".repeat(w.reduce((a, b) => a + b + 2, 0)));
+  for (const { name, result: r } of rows) {
+    const peak = r.perTurn.reduce((m, t) => Math.max(m, t.ratio), 0);
+    console.log(
+      [
+        name.padEnd(w[0]!),
+        fmt(r.totalInputTokens).padEnd(w[1]!),
+        fmt(r.totalCacheHitTokens).padEnd(w[2]!),
+        pct(r.cacheHitRatio).padEnd(w[3]!),
+        fmt(r.totalCacheMissTokens).padEnd(w[4]!),
+        String(r.foldCount).padEnd(w[5]!),
+        pct(peak).padEnd(w[6]!),
+      ].join("│ "),
+    );
+  }
+}
+
+function main(): void {
+  const { sessions, ctxMax } = parseArgs(process.argv.slice(2));
+  if (sessions.length === 0) {
+    console.error("usage: tsx run.ts [--ctx-max N] <session.jsonl> [more...]");
+    process.exit(1);
+  }
+  for (const path of sessions) {
+    const msgs = loadSession(path);
+    const cfgs = configs(ctxMax);
+    const rows = cfgs.map(({ name, config }) => ({ name, result: simulate(msgs, config, path) }));
+    report(`${basename(path)}  (${msgs.length} msgs, ctxMax=${fmt(ctxMax)})`, rows);
+  }
+}
+
+main();

benchmarks/compression-eval/simulator.ts

@@ -0,0 +1,197 @@
+import { readFileSync } from "node:fs";
+import {
+  countTokensBounded,
+  estimateConversationTokens,
+  estimateRequestTokens,
+} from "../../src/tokenizer.js";
+import type { ChatMessage } from "../../src/types.js";
+
+export interface ThresholdConfig {
+  ctxMax: number;
+  foldThreshold: number;
+  tailFraction: number;
+  aggressiveThreshold: number;
+  aggressiveTailFraction: number;
+  minSavingsFraction: number;
+  summaryRatio: number;
+}
+
+export interface FoldEvent {
+  turn: number;
+  ratioBeforeFold: number;
+  promptTokensBefore: number;
+  headMessages: number;
+  tailMessages: number;
+  headTokens: number;
+  summaryTokens: number;
+  aggressive: boolean;
+}
+
+export interface TurnRecord {
+  turn: number;
+  promptTokens: number;
+  cacheHitTokens: number;
+  cacheMissTokens: number;
+  ratio: number;
+  folded: boolean;
+}
+
+export interface RunResult {
+  config: ThresholdConfig;
+  sessionPath: string;
+  totalTurns: number;
+  totalInputTokens: number;
+  totalCacheHitTokens: number;
+  totalCacheMissTokens: number;
+  cacheHitRatio: number;
+  foldCount: number;
+  folds: FoldEvent[];
+  perTurn: TurnRecord[];
+}
+
+export function loadSession(path: string): ChatMessage[] {
+  const lines = readFileSync(path, "utf8").split("\n");
+  const out: ChatMessage[] = [];
+  for (const ln of lines) {
+    const t = ln.trim();
+    if (!t) continue;
+    try {
+      out.push(JSON.parse(t) as ChatMessage);
+    } catch {
+      continue;
+    }
+  }
+  return out;
+}
+
+function messageTokens(m: ChatMessage): number {
+  return estimateConversationTokens([m], true);
+}
+
+function messageKey(m: ChatMessage): string {
+  return JSON.stringify({
+    r: m.role,
+    c: m.content ?? "",
+    tc: m.tool_calls ?? null,
+    tcid: m.tool_call_id ?? null,
+  });
+}
+
+function commonPrefixTokens(curr: ChatMessage[], prev: ChatMessage[]): number {
+  const n = Math.min(curr.length, prev.length);
+  let tokens = 0;
+  for (let i = 0; i < n; i++) {
+    if (messageKey(curr[i]!) !== messageKey(prev[i]!)) break;
+    tokens += messageTokens(curr[i]!);
+  }
+  return tokens;
+}
+
+function findFoldBoundary(log: ChatMessage[], tailBudget: number): number {
+  let cum = 0;
+  let boundary = log.length;
+  for (let i = log.length - 1; i >= 0; i--) {
+    const t = messageTokens(log[i]!);
+    if (cum + t > tailBudget) break;
+    cum += t;
+    if (log[i]!.role === "user") boundary = i;
+  }
+  return boundary;
+}
+
+function synthesizeSummary(head: ChatMessage[], targetTokens: number): ChatMessage {
+  const userBits: string[] = [];
+  for (const m of head) {
+    if (m.role === "user" && typeof m.content === "string") userBits.push(m.content);
+  }
+  const seed = userBits.join("\n") || "earlier turns folded";
+  let text = `[CONVERSATION HISTORY SUMMARY — fold of ${head.length} messages]\n\n${seed}`;
+  const currentTokens = countTokensBounded(text);
+  if (currentTokens > targetTokens) {
+    const ratio = targetTokens / currentTokens;
+    text = text.slice(0, Math.max(80, Math.floor(text.length * ratio)));
+  }
+  return { role: "assistant", content: text, reasoning_content: "" };
+}
+
+function turnBoundaries(messages: ChatMessage[]): number[] {
+  const ends: number[] = [];
+  for (let i = 0; i < messages.length; i++) {
+    if (messages[i]!.role === "assistant") ends.push(i);
+  }
+  return ends;
+}
+
+export function simulate(messages: ChatMessage[], config: ThresholdConfig, sessionPath: string): RunResult {
+  const ends = turnBoundaries(messages);
+  const log: ChatMessage[] = [];
+  let prevSnapshot: ChatMessage[] = [];
+  const perTurn: TurnRecord[] = [];
+  const folds: FoldEvent[] = [];
+  let totalInput = 0;
+  let totalHit = 0;
+  let totalMiss = 0;
+  let cursor = 0;
+
+  for (let turn = 0; turn < ends.length; turn++) {
+    const end = ends[turn]!;
+    for (let i = cursor; i < end; i++) log.push(messages[i]!);
+    cursor = end;
+
+    const promptTokens = estimateRequestTokens(log, null, true);
+    const ratio = promptTokens / config.ctxMax;
+    const hit = commonPrefixTokens(log, prevSnapshot);
+    const miss = Math.max(0, promptTokens - hit);
+    let folded = false;
+
+    if (ratio > config.foldThreshold) {
+      const aggressive = ratio > config.aggressiveThreshold;
+      const tailFrac = aggressive ? config.aggressiveTailFraction : config.tailFraction;
+      const tailBudget = Math.floor(config.ctxMax * tailFrac);
+      const boundary = findFoldBoundary(log, tailBudget);
+      if (boundary > 0) {
+        const head = log.slice(0, boundary);
+        const tail = log.slice(boundary);
+        const headTokens = head.reduce((a, m) => a + messageTokens(m), 0);
+        const totalTokens = log.reduce((a, m) => a + messageTokens(m), 0);
+        if (headTokens >= totalTokens * config.minSavingsFraction) {
+          const summaryTokens = Math.max(64, Math.floor(headTokens * config.summaryRatio));
+          const summary = synthesizeSummary(head, summaryTokens);
+          const next = [summary, ...tail];
+          log.length = 0;
+          for (const m of next) log.push(m);
+          folds.push({
+            turn,
+            ratioBeforeFold: ratio,
+            promptTokensBefore: promptTokens,
+            headMessages: head.length,
+            tailMessages: tail.length,
+            headTokens,
+            summaryTokens,
+            aggressive,
+          });
+          folded = true;
+        }
+      }
+    }
+
+    totalInput += promptTokens;
+    totalHit += hit;
+    totalMiss += miss;
+    perTurn.push({ turn, promptTokens, cacheHitTokens: hit, cacheMissTokens: miss, ratio, folded });
+    prevSnapshot = log.slice();
+  }
+
+  return {
+    config,
+    sessionPath,
+    totalTurns: ends.length,
+    totalInputTokens: totalInput,
+    totalCacheHitTokens: totalHit,
+    totalCacheMissTokens: totalMiss,
+    cacheHitRatio: totalInput > 0 ? totalHit / totalInput : 0,
+    foldCount: folds.length,
+    folds,
+    perTurn,
+  };
+}

benchmarks/compression-eval/task.txt

@@ -0,0 +1,13 @@
+为这个仓库的 src/ 目录写一份完整的架构总览文档。
+
+要求：
+1. 用 read_file / directory_tree / grep_search 等工具，**逐个**读取 src/ 下每个子目录（cli/, mcp/, memory/, telemetry/, transcript/, tools/, ui/, i18n/, loop/ 等）的代表性文件。每个子目录至少读 3-5 个核心 .ts 文件。
+2. 不要只 grep 关键词就下结论 —— 必须打开文件读真实内容，从代码里抽出"这个模块的职责 / 它的核心数据结构 / 它对外暴露什么"。
+3. 边读边在心里搭建依赖图。
+4. 全部读完后，输出一份 markdown 报告，包含：
+   - 整体架构图（mermaid 或 ASCII，模块之间的依赖关系）
+   - 按模块列出：职责 / 关键文件 / 对外接口 / 内部依赖
+   - 至少 8 个具体的代码引用（路径:行号），证明你真读了
+   - 结尾给出"如果新人加入项目，应该按什么顺序读代码"的建议
+
+这是一个真实的代码审计任务，请不要偷懒、不要瞎编、不要用通用模板。文件读得不够多就直接说"我读得不够"。

benchmarks/harvest/README.md

@@ -1,106 +0,0 @@
-# Harvest eval harness (Pillar 2)
-
-Measures Pillar 2 (R1 Thought Harvesting) the same way `tau-bench/`
-measures Pillar 1 (Cache-First Loop): isolate one variable, produce
-numbers anyone can reproduce.
-
-## What's different from τ-bench-lite?
-
-Deliberately different task shape:
-
-| | τ-bench-lite | harvest-bench |
-|---|---|---|
-| task style | multi-turn tool-use | single-turn reasoning |
-| user simulator | yes (LLM) | no |
-| DB state | yes | no |
-| checker | DB-predicate | regex + set/value compare |
-| target | Pillar 1 | Pillar 2 |
-| model | deepseek-chat (default) | deepseek-reasoner (only R1 has `reasoning_content` for harvest to work on) |
-
-The two harnesses answer different questions:
-
-- **τ-bench-lite**: *"Does Cache-First actually cut cost on real tool-use
-  workflows?"* (yes — 47.7pp cache, −39% cost on 48-run data.)
-- **harvest-bench**: *"Does the extra V3 harvest call add measurable
-  value above plain R1?"* (TBD — run it to find out.)
-
-## Modes
-
-Three modes isolate one variable each:
-
-| mode | model | harvest | what it measures |
-|---|---|---|---|
-| `baseline` | deepseek-chat | off | floor reference — V3 at its best |
-| `reasoner` | deepseek-reasoner | off | raw R1 gain over V3 on reasoning |
-| `reasoner-harvest` | deepseek-reasoner | on | R1 + the extra V3 harvest call |
-
-Deltas:
-
-- `baseline → reasoner` answers "is R1 worth the price on these
-  problems?"
-- `reasoner → reasoner-harvest` answers "is the harvest call worth
-  its incremental cost?"
-
-## Quickstart
-
-```bash
-# Dry-run — no API, smoke-test the wiring
-npx tsx benchmarks/harvest/runner.ts --dry
-
-# Full run (live DeepSeek, costs ~$0.20-0.60 for 6 tasks × 3 modes × 1 repeat)
-export DEEPSEEK_API_KEY=sk-...
-npx tsx benchmarks/harvest/runner.ts
-
-# Tighter run with 3 repeats (~$0.60-2.00)
-npx tsx benchmarks/harvest/runner.ts --repeats 3
-
-# Only the hard tasks (skip the easy floor)
-npx tsx benchmarks/harvest/runner.ts --task pseudoprime_base2
-npx tsx benchmarks/harvest/runner.ts --task derangements_d7
-npx tsx benchmarks/harvest/runner.ts --task euler_quadratic_break
-
-# Bump per-call timeout (reasoner + harvest occasionally blow past the 120s default)
-npx tsx benchmarks/harvest/runner.ts --timeout 600
-
-# Per-run transcripts so you can reasonix replay / diff them
-npx tsx benchmarks/harvest/runner.ts --repeats 3 --transcripts-dir transcripts/
-
-# Render report
-npx tsx benchmarks/harvest/report.ts benchmarks/harvest/results-*.json
-```
-
-## Tasks (v0.3 seed)
-
-Split into two bands:
-
-**Easy band** — V3 chat solves these, so baseline has a real pass rate and the bench has a reference floor.
-
-| id | shape | why |
-|---|---|---|
-| `mod7_list` | number theory, 29-element list | R1 often tries enumeration first, then reaches for modular arithmetic — clean rejectedPaths signal |
-| `flips_until_3heads` | probability, single integer | classic recurrence; R1 either derives or recalls, harvest should see hypotheses diverge |
-| `three_hats` | logic puzzle, one-word answer | pure deduction chain, tests harvest's ability to extract the nested reasoning |
-
-**Hard band** — picked specifically for known V3 failure modes. If R1 systematically beats V3 on these, and harvest further beats R1-only, we have our Pillar 2 story.
-
-| id | shape | why V3 tends to fail |
-|---|---|---|
-| `pseudoprime_base2` | smallest Fermat pseudoprime to base 2 = **341** | V3 often answers 561 (Carmichael) or some other composite it remembers — R1 actually checks 2^n mod n |
-| `derangements_d7` | D_7 = **1854** | V3 approximates via n!/e and rounds wrong, or recalls D_6/D_8; R1 uses the recurrence D_n=(n−1)(D_{n−1}+D_{n−2}) |
-| `euler_quadratic_break` | smallest n where n²+n+41 is composite = **40** | V3 frequently confuses with n²−n+41 (first fails at 41); R1 checks small n systematically |
-
-Adding a new task: see `tasks.ts`. Any checker that's deterministic is
-fair game — extract numeric/list/text with regex, compare with set
-equality or string matching.
-
-## Non-goals
-
-- **No LLM-as-judge.** Brittle and expensive; defeats the point of a
-  reproducible bench. If a checker is too hard to write deterministically,
-  the task doesn't belong here.
-- **No tool-use tasks.** Those live in `tau-bench/`. Different story.
-- **No multi-turn.** v0.3 harness is single-turn Q/A. Multi-turn reasoning
-  eval is separate scope.
-- **No benchmark-data cherry-picking.** When results come in, we publish
-  them whether they validate Pillar 2 or not. "harvest didn't help on
-  these 3 tasks" is still useful information.

benchmarks/harvest/report.md

@@ -1,82 +0,0 @@
-# Reasonix harvest eval (Pillar 2)
-
-**Date:** 2026-04-21T16:44:21.011Z
-**Tasks:** 6 · repeats × 1 · modes: baseline, reasoner, reasoner-harvest
-**Reasonix version:** 0.2.2
-
-## Summary by mode
-
-| mode | runs | pass rate | cache hit | cost / run | harvest turns | subgoals | uncertainties |
-|---|---:|---:|---:|---:|---:|---:|---:|
-| baseline | 6 | 100% | 39.5% | $0.001371 | 0.0 | 0.0 | 0.0 |
-| reasoner | 6 | 100% | 74.2% | $0.004170 | 0.0 | 0.0 | 0.0 |
-| reasoner-harvest | 6 | 83% | 61.6% | $0.003304 | 0.8 | 2.8 | 1.3 |
-
-## Deltas
-
-- **baseline → reasoner**
-  - pass rate: 0pp
-  - cost: ×3.04 (each run costs more)
-  - harvest signal / run: 0.0 subgoals, 0.0 uncertainties
-
-- **baseline → reasoner-harvest**
-  - pass rate: -17pp
-  - cost: ×2.41 (each run costs more)
-  - harvest signal / run: 2.8 subgoals, 1.3 uncertainties
-
-## Per-task breakdown
-
-| task | mode | rep | verdict | cache | cost | sg | un | note |
-|---|---|---:|:---:|---:|---:|---:|---:|---|
-| mod7_list | baseline | 1 | ✅ | 86.5% | $0.001361 | 0 | 0 |  |
-| mod7_list | reasoner | 1 | ✅ | 86.5% | $0.004797 | 0 | 0 |  |
-| mod7_list | reasoner-harvest | 1 | ✅ | 86.5% | $0.003045 | 4 | 2 |  |
-| flips_until_3heads | baseline | 1 | ✅ | 92.8% | $0.001198 | 0 | 0 |  |
-| flips_until_3heads | reasoner | 1 | ✅ | 92.8% | $0.002830 | 0 | 0 |  |
-| flips_until_3heads | reasoner-harvest | 1 | ✅ | 92.8% | $0.001691 | 4 | 0 |  |
-| three_hats | baseline | 1 | ✅ | 57.7% | $0.001514 | 0 | 0 |  |
-| three_hats | reasoner | 1 | ✅ | 57.7% | $0.009340 | 0 | 0 |  |
-| three_hats | reasoner-harvest | 1 | ✅ | 57.7% | $0.009651 | 3 | 2 |  |
-| pseudoprime_base2 | baseline | 1 | ✅ | 0.0% | $0.001894 | 0 | 0 |  |
-| pseudoprime_base2 | reasoner | 1 | ✅ | 75.3% | $0.003128 | 0 | 0 |  |
-| pseudoprime_base2 | reasoner-harvest | 1 | ❌ | 0.0% | $0.000000 | 0 | 0 | This operation was aborted |
-| derangements_d7 | baseline | 1 | ✅ | 0.0% | $0.001273 | 0 | 0 |  |
-| derangements_d7 | reasoner | 1 | ✅ | 71.9% | $0.003492 | 0 | 0 |  |
-| derangements_d7 | reasoner-harvest | 1 | ✅ | 71.9% | $0.002843 | 3 | 2 |  |
-| euler_quadratic_break | baseline | 1 | ✅ | 0.0% | $0.000985 | 0 | 0 |  |
-| euler_quadratic_break | reasoner | 1 | ✅ | 61.0% | $0.001431 | 0 | 0 |  |
-| euler_quadratic_break | reasoner-harvest | 1 | ✅ | 61.0% | $0.002594 | 3 | 2 |  |
-
-## Scope
-
-Unlike τ-bench-lite, these tasks are single-turn reasoning problems (no user simulator, no DB, no tool calls). Checkers are deterministic — regex + set / value compare, never an LLM judge. The point is to isolate whether the Pillar 2 harvest step adds measurable value above plain reasoner usage.
-
-Interpretation: `baseline` (chat / V3) is a floor. `reasoner` shows the raw R1 gain. `reasoner-harvest` isolates the cost + quality delta from the extra V3 harvest call.
-## Findings (v0.3, 18-run set)
-
-Two bands of tasks tried (easy: mod7 / flips / hats; hard: pseudoprime341 / D_7 / Euler quadratic). The hard band was chosen for *known V3 failure modes*. Result:
-
-1. **V3 chat passed all six tasks, including the three "hard" ones.** DeepSeek V3 knew 341 is the smallest base-2 pseudoprime, computed D_7=1854, and identified n=40 as the first Euler-polynomial failure. The tasks are well-known enough to be in training; the trap-answer variants (561, 265, 41) that the checkers specifically reject didn't fire.
-2. **Reasoner cost 3.04× baseline for identical pass rates (6/6 both sides).** On this task set, R1 adds cost and latency without measurable quality. The cache-hit story *does* extend to reasoner (74.2% mean), so Pillar 1 generalizes to R1 — but that's not a Pillar 2 story.
-3. **Harvest produced real signal** (mean 2.8 subgoals, 1.3 uncertainties per run where it fired) but didn't improve outcomes. One run hit the 300s timeout (bumped from 120s), suggesting reasoner-harvest latency is still unpredictable on some problems.
-
-### What this tells us about Pillar 2 positioning
-
-We've now given harvest two shots at showing answer-quality value on pure reasoning tasks. Both times V3 ate its lunch. This isn't a framework bug — it's a positioning signal:
-
-- **On well-known math / logic / counting problems, DeepSeek V3 is strong enough that paying for R1 is not justified by accuracy.** Pillar 2's "smart preset" cost multiplier (10×) quoted in the README is real but for most single-question Q/A it buys nothing.
-- **Harvest's plausible value surfaces are not "better math answers".** More likely: (a) transparency / auditability for developers, (b) planning support when tools are in the mix, (c) driving branch-sampling on cases where uncertainty correlates with wrongness. None of those are tested here.
-
-### Recommendation
-
-Don't ship v0.3 on the "harvest makes answers more correct" claim — the data doesn't support it. Two honest paths forward:
-
-- **Reframe Pillar 2 as a developer-facing introspection feature** (debug visibility into R1's planning). Keep harvest opt-in; stop implying it improves accuracy on end-user tasks.
-- **Move harvest eval to tool-use contexts** where uncertainty matters for *which tool to call next*, not *is this math right*. That's a new task shape — different harness, not a bigger task set here.
-
-In either case, the next Reasonix release is better served by MCP client (Pillar 1 leverage across the ecosystem) than by a bigger harvest-bench data push.
-
-### Notes
-
-- Cache hit on baseline runs surprised me (39.5% mean). That's DeepSeek's *cross-session* prompt cache: the same system prompt ran many times across modes and runs warmed the server-side cache. Real cross-session evidence that Cache-First's value isn't only per-session.
-- 5-subgoals cap still hit uniformly. `HarvestOptions.maxItems` default is 5; harvest is truncating. Moot unless we find a setting where that matters.

benchmarks/harvest/report.ts

@@ -1,229 +0,0 @@
-/** Render a harvest-bench results.json into a markdown report. CLI usage in README. */
-
-import { readFileSync, writeFileSync } from "node:fs";
-import { pathToFileURL } from "node:url";
-import {
-  ALL_MODES,
-  type HarvestBenchReport,
-  type HarvestMode,
-  type HarvestRunResult,
-} from "./types.js";
-
-interface CliArgs {
-  input: string;
-  outPath: string;
-}
-
-function parseArgs(argv: string[]): CliArgs {
-  const out: CliArgs = { input: "", outPath: "benchmarks/harvest/report.md" };
-  const positional: string[] = [];
-  for (let i = 0; i < argv.length; i++) {
-    const a = argv[i];
-    if (a === "--out") out.outPath = argv[++i] ?? out.outPath;
-    else if (a && !a.startsWith("--")) positional.push(a);
-  }
-  out.input = positional[0] ?? "";
-  if (!out.input) {
-    throw new Error("usage: npx tsx benchmarks/harvest/report.ts <results.json> [--out report.md]");
-  }
-  return out;
-}
-
-interface Agg {
-  runs: number;
-  passes: number;
-  avgCache: number;
-  avgCost: number;
-  avgClaudeCost: number;
-  avgHarvestedTurns: number;
-  avgSubgoals: number;
-  avgUncertainties: number;
-}
-
-function aggregate(results: HarvestRunResult[]): Agg {
-  if (results.length === 0) {
-    return {
-      runs: 0,
-      passes: 0,
-      avgCache: 0,
-      avgCost: 0,
-      avgClaudeCost: 0,
-      avgHarvestedTurns: 0,
-      avgSubgoals: 0,
-      avgUncertainties: 0,
-    };
-  }
-  const passes = results.filter((r) => r.verdict === "pass").length;
-  const mean = (fn: (r: HarvestRunResult) => number) =>
-    results.reduce((s, r) => s + fn(r), 0) / results.length;
-  return {
-    runs: results.length,
-    passes,
-    avgCache: mean((r) => r.cacheHitRatio),
-    avgCost: mean((r) => r.costUsd),
-    avgClaudeCost: mean((r) => r.claudeEquivalentUsd),
-    avgHarvestedTurns: mean((r) => r.harvestedTurns),
-    avgSubgoals: mean((r) => r.totalSubgoals),
-    avgUncertainties: mean((r) => r.totalUncertainties),
-  };
-}
-
-export function renderReport(report: HarvestBenchReport): string {
-  const lines: string[] = [];
-  lines.push("# Reasonix harvest eval (Pillar 2)");
-  lines.push("");
-  lines.push(`**Date:** ${report.meta.date}`);
-  lines.push(
-    `**Tasks:** ${report.meta.taskCount} · repeats × ${report.meta.repeatsPerTask} · modes: ${report.meta.modesRun.join(", ")}`,
-  );
-  lines.push(`**Reasonix version:** ${report.meta.reasonixVersion}`);
-  lines.push("");
-
-  // Per-mode summary
-  lines.push("## Summary by mode");
-  lines.push("");
-  lines.push(
-    "| mode | runs | pass rate | cache hit | cost / run | harvest turns | subgoals | uncertainties |",
-  );
-  lines.push("|---|---:|---:|---:|---:|---:|---:|---:|");
-  for (const mode of ALL_MODES) {
-    const rs = report.results.filter((r) => r.mode === mode);
-    const a = aggregate(rs);
-    if (a.runs === 0) continue;
-    lines.push(
-      `| ${mode} | ${a.runs} | ${pct(a.passes, a.runs)} | ${pct1(a.avgCache)} | $${a.avgCost.toFixed(6)} | ${a.avgHarvestedTurns.toFixed(1)} | ${a.avgSubgoals.toFixed(1)} | ${a.avgUncertainties.toFixed(1)} |`,
-    );
-  }
-  lines.push("");
-
-  // Pairwise deltas that actually answer the question
-  lines.push("## Deltas");
-  lines.push("");
-  const modes = ALL_MODES.filter((m) => report.results.some((r) => r.mode === m));
-  if (modes.length >= 2) {
-    const baseline = aggregate(report.results.filter((r) => r.mode === modes[0]));
-    for (let i = 1; i < modes.length; i++) {
-      const mode = modes[i]!;
-      const agg = aggregate(report.results.filter((r) => r.mode === mode));
-      const passDelta =
-        agg.passes / Math.max(agg.runs, 1) - baseline.passes / Math.max(baseline.runs, 1);
-      const costRatio = baseline.avgCost > 0 ? agg.avgCost / baseline.avgCost : 0;
-      lines.push(`- **${modes[0]} → ${mode}**`);
-      lines.push(`  - pass rate: ${(passDelta * 100).toFixed(0)}pp`);
-      lines.push(
-        `  - cost: ×${costRatio.toFixed(2)} (each run costs ${costRatio > 1 ? "more" : "less"})`,
-      );
-      lines.push(
-        `  - harvest signal / run: ${agg.avgSubgoals.toFixed(1)} subgoals, ${agg.avgUncertainties.toFixed(1)} uncertainties`,
-      );
-      lines.push("");
-    }
-  }
-
-  // Per-task breakdown
-  lines.push("## Per-task breakdown");
-  lines.push("");
-  const byTask = new Map<string, HarvestRunResult[]>();
-  for (const r of report.results) {
-    const list = byTask.get(r.taskId) ?? [];
-    list.push(r);
-    byTask.set(r.taskId, list);
-  }
-  lines.push("| task | mode | rep | verdict | cache | cost | sg | un | note |");
-  lines.push("|---|---|---:|:---:|---:|---:|---:|---:|---|");
-  for (const [taskId, runs] of byTask) {
-    for (const r of runs) {
-      const mark = r.verdict === "pass" ? "✅" : r.verdict === "fail" ? "❌" : "•";
-      lines.push(
-        `| ${taskId} | ${r.mode} | ${r.repeat} | ${mark} | ${pct1(r.cacheHitRatio)} | $${r.costUsd.toFixed(6)} | ${r.totalSubgoals} | ${r.totalUncertainties} | ${truncate(r.checkNote ?? "", 40)} |`,
-      );
-    }
-  }
-  lines.push("");
-
-  lines.push("## Scope");
-  lines.push("");
-  lines.push(
-    "Unlike τ-bench-lite, these tasks are single-turn reasoning problems (no user simulator, no DB, no tool calls). Checkers are deterministic — regex + set / value compare, never an LLM judge. The point is to isolate whether the Pillar 2 harvest step adds measurable value above plain reasoner usage.",
-  );
-  lines.push("");
-  lines.push(
-    "Interpretation: `baseline` (chat / V3) is a floor. `reasoner` shows the raw R1 gain. `reasoner-harvest` isolates the cost + quality delta from the extra V3 harvest call.",
-  );
-
-  return lines.join("\n");
-}
-
-/** Findings prose lives in report.md (hand-written after rendering); this stub keeps the function shape. */
-export function renderFindings(_report: HarvestBenchReport): string {
-  return [
-    "",
-    "## Findings (v0.3, 18-run set)",
-    "",
-    "Two bands of tasks tried (easy: mod7 / flips / hats; hard: pseudoprime341 / D_7 / Euler quadratic). The hard band was chosen for *known V3 failure modes*. Result:",
-    "",
-    '1. **V3 chat passed all six tasks, including the three "hard" ones.** DeepSeek V3 knew 341 is the smallest base-2 pseudoprime, computed D_7=1854, and identified n=40 as the first Euler-polynomial failure. The tasks are well-known enough to be in training; the trap-answer variants (561, 265, 41) that the checkers specifically reject didn\'t fire.',
-    "2. **Reasoner cost 3.04× baseline for identical pass rates (6/6 both sides).** On this task set, R1 adds cost and latency without measurable quality. The cache-hit story *does* extend to reasoner (74.2% mean), so Pillar 1 generalizes to R1 — but that's not a Pillar 2 story.",
-    "3. **Harvest produced real signal** (mean 2.8 subgoals, 1.3 uncertainties per run where it fired) but didn't improve outcomes. One run hit the 300s timeout (bumped from 120s), suggesting reasoner-harvest latency is still unpredictable on some problems.",
-    "",
-    "### What this tells us about Pillar 2 positioning",
-    "",
-    "We've now given harvest two shots at showing answer-quality value on pure reasoning tasks. Both times V3 ate its lunch. This isn't a framework bug — it's a positioning signal:",
-    "",
-    '- **On well-known math / logic / counting problems, DeepSeek V3 is strong enough that paying for R1 is not justified by accuracy.** Pillar 2\'s "smart preset" cost multiplier (10×) quoted in the README is real but for most single-question Q/A it buys nothing.',
-    '- **Harvest\'s plausible value surfaces are not "better math answers".** More likely: (a) transparency / auditability for developers, (b) planning support when tools are in the mix, (c) driving branch-sampling on cases where uncertainty correlates with wrongness. None of those are tested here.',
-    "",
-    "### Recommendation",
-    "",
-    "Don't ship v0.3 on the \"harvest makes answers more correct\" claim — the data doesn't support it. Two honest paths forward:",
-    "",
-    "- **Reframe Pillar 2 as a developer-facing introspection feature** (debug visibility into R1's planning). Keep harvest opt-in; stop implying it improves accuracy on end-user tasks.",
-    "- **Move harvest eval to tool-use contexts** where uncertainty matters for *which tool to call next*, not *is this math right*. That's a new task shape — different harness, not a bigger task set here.",
-    "",
-    "In either case, the next Reasonix release is better served by MCP client (Pillar 1 leverage across the ecosystem) than by a bigger harvest-bench data push.",
-    "",
-    "### Notes",
-    "",
-    "- Cache hit on baseline runs surprised me (39.5% mean). That's DeepSeek's *cross-session* prompt cache: the same system prompt ran many times across modes and runs warmed the server-side cache. Real cross-session evidence that Cache-First's value isn't only per-session.",
-    "- 5-subgoals cap still hit uniformly. `HarvestOptions.maxItems` default is 5; harvest is truncating. Moot unless we find a setting where that matters.",
-    "",
-  ].join("\n");
-}
-
-function pct(num: number, denom: number): string {
-  if (denom === 0) return "—";
-  return `${((num / denom) * 100).toFixed(0)}%`;
-}
-
-function pct1(x: number): string {
-  return `${(x * 100).toFixed(1)}%`;
-}
-
-function truncate(s: string, n: number): string {
-  return s.length > n ? `${s.slice(0, n)}…` : s;
-}
-
-async function main(): Promise<void> {
-  const args = parseArgs(process.argv.slice(2));
-  const raw = readFileSync(args.input, "utf8");
-  const report = JSON.parse(raw) as HarvestBenchReport;
-  const md = renderReport(report) + renderFindings(report);
-  writeFileSync(args.outPath, md, "utf8");
-  console.log(`wrote ${args.outPath} (${report.results.length} runs)`);
-}
-
-function isMain(): boolean {
-  const entry = process.argv[1];
-  if (!entry) return false;
-  return import.meta.url === pathToFileURL(entry).href;
-}
-
-if (isMain()) {
-  main().catch((err) => {
-    console.error(err);
-    process.exit(1);
-  });
-}
-
-// Suppress unused import warning — kept in scope so ALL_MODES order matches renderer iteration.
-export type { HarvestMode };

benchmarks/harvest/results.json

@@ -1,305 +0,0 @@
-{
-  "meta": {
-    "date": "2026-04-21T16:44:21.011Z",
-    "repeatsPerTask": 1,
-    "taskCount": 6,
-    "modesRun": [
-      "baseline",
-      "reasoner",
-      "reasoner-harvest"
-    ],
-    "reasonixVersion": "0.2.2"
-  },
-  "results": [
-    {
-      "taskId": "mod7_list",
-      "mode": "baseline",
-      "repeat": 1,
-      "verdict": "pass",
-      "finalAgentMessage": "Alright, let's go step-by-step.\n\n---\n\n## **Step 1: Problem restatement**\nWe want positive integers \\( n \\leq 100 \\) such that  \n\\[\nn^2 + n + 1 \\equiv 0 \\pmod{7}.\n\\]\n\n---\n\n## **Step 2: Try residues modulo 7**\nLet \\( n \\equiv r \\pmod{7} \\), where \\( r \\in \\{0, 1, 2, 3, 4, 5, 6\\} \\).\n\nWe compute \\( r^2 + r + 1 \\mod 7 \\):\n\n- \\( r = 0 \\): \\( 0 + 0 + 1 = 1 \\) → not divisible by 7.\n- \\( r = 1 \\): \\( 1 + 1 + 1 = 3 \\) → no.\n- \\( r = 2 \\): \\( 4 + 2 + 1 = 7 \\equiv 0 \\) → yes.\n- \\( r = 3 \\): \\( 9 + 3 + 1 = 13 \\equiv 6 \\) → no.\n- \\( r = 4 \\): \\( 16 + 4 + 1 = 21 \\equiv 0 \\) → yes.\n- \\( r = 5 \\): \\( 25 + 5 + 1 = 31 \\equiv 3 \\) → no.\n- \\( r = 6 \\): \\( 36 + 6 + 1 = 43 \\equiv 1 \\) → no.\n\nSo \\( n \\equiv 2 \\pmod{7} \\) or \\( n \\equiv 4 \\pmod{7} \\).\n\n---\n\n## **Step 3: General form**\n\\[\nn \\equiv 2 \\pmod{7} \\quad \\text{or} \\quad n \\equiv 4 \\pmod{7}.\n\\]\n\nThat means \\( n = 7k + 2 \\) or \\( n = 7k + 4 \\) for some integer \\( k \\ge 0 \\).\n\n---\n\n## **Step 4: Positive integers \\( n \\leq 100 \\)**\n**Case 1:** \\( n = 7k + 2 \\), \\( n \\leq 100 \\), \\( k \\ge 0 \\).\n\n\\( 7k + 2 \\leq 100 \\) → \\( 7k \\leq 98 \\) → \\( k \\leq 14 \\).\n\nSo \\( k = 0, 1, 2, \\dots, 14 \\) gives \\( n = 2, 9, 16, \\dots, 100 \\).\n\nCheck \\( n=100 \\): \\( 7 \\times 14 + 2 = 98 + 2 = 100 \\) okay.\n\n---\n\n**Case 2:** \\( n = 7k + 4 \\), \\( n \\leq 100 \\), \\( k \\ge 0 \\).\n\n\\( 7k + 4 \\leq 100 \\) → \\( 7k \\leq 96 \\) → \\( k \\leq 13 \\) (since \\( 7 \\times 13 = 91 \\), \\( 91+4=95 \\), \\( 7\\times14=98 \\) → \\( 98+4=102>100 \\)).\n\nSo \\( k = 0, 1, 2, \\dots, 13 \\) gives \\( n = 4, 11, 18, \\dots, 95 \\).\n\n---\n\n## **Step 5: List all such \\( n \\leq 100 \\)**\nFrom case 1: \\( 2, 9, 16, 23, 30, 37, 44, 51, 58, 65, 72, 79, 86, 93, 100 \\).\n\nFrom case 2: \\( 4, 11, 18, 25, 32, 39, 46, 53, 60, 67, 74, 81, 88, 95 \\).\n\nCombine and sort:\n\n\\[\n2, 4, 9, 11, 16, 18, 23, 25, 30, 32, 37, 39, 44, 46, 51, 53, 58, 60, 65, 67, 72, 74, 79, 81, 86, 88, 93, 95, 100.\n\\]\n\n---\n\n## **Step 6: Check count**\nEach sequence has 15 and 14 terms respectively, total \\( 15 + 14 = 29 \\) numbers.\n\nCheck: \\( n=2 \\) works? \\( 4+2+1=7 \\) yes. \\( n=4 \\) works? \\( 16+4+1=21 \\) yes. \\( n=100 \\) works? \\( 10000+100+1=10101 \\), divide by 7: \\( 10101/7 = 1443 \\) yes.\n\n---\n\n**Final answer:**\n\\[\n\\boxed{2, 4, 9, 11, 16, 18, 23, 25, 30, 32, 37, 39, 44, 46, 51, 53, 58, 60, 65, 67, 72, 74, 79, 81, 86, 88, 93, 95, 100}\n\\]\n\n---\n\nAnswer: 2, 4, 9, 11, 16, 18, 23, 25, 30, 32, 37, 39, 44, 46, 51, 53, 58, 60, 65, 67, 72, 74, 79, 81, 86, 88, 93, 95, 100",
-      "turns": 1,
-      "cacheHitRatio": 0.8648648648648649,
-      "costUsd": 0.0013612800000000003,
-      "claudeEquivalentUsd": 0.018687,
-      "harvestedTurns": 0,
-      "totalSubgoals": 0,
-      "totalUncertainties": 0,
-      "totalHypotheses": 0,
-      "totalRejectedPaths": 0
-    },
-    {
-      "taskId": "mod7_list",
-      "mode": "reasoner",
-      "repeat": 1,
-      "verdict": "pass",
-      "finalAgentMessage": "The condition \\(n^2 + n + 1\\) divisible by 7 is equivalent to \\(n^2 + n + 1 \\equiv 0 \\pmod{7}\\). Testing residues modulo 7:\n\n- \\(n \\equiv 0: 0+0+1 \\equiv 1\\)  \n- \\(n \\equiv 1: 1+1+1 \\equiv 3\\)  \n- \\(n \\equiv 2: 4+2+1 \\equiv 7 \\equiv 0\\)  \n- \\(n \\equiv 3: 9+3+1 \\equiv 13 \\equiv 6\\)  \n- \\(n \\equiv 4: 16+4+1 \\equiv 21 \\equiv 0\\)  \n- \\(n \\equiv 5: 25+5+1 \\equiv 31 \\equiv 3\\)  \n- \\(n \\equiv 6: 36+6+1 \\equiv 43 \\equiv 1\\)\n\nThus, \\(n \\equiv 2\\) or \\(n \\equiv 4 \\pmod{7}\\) are the solutions modulo 7. For positive integers \\(n \\leq 100\\), we list all numbers congruent to 2 or 4 modulo 7 in increasing order.\n\nAnswer: 2, 4, 9, 11, 16, 18, 23, 25, 30, 32, 37, 39, 44, 46, 51, 53, 58, 60, 65, 67, 72, 74, 79, 81, 86, 88, 93, 95, 100",
-      "turns": 1,
-      "cacheHitRatio": 0.8648648648648649,
-      "costUsd": 0.00479742,
-      "claudeEquivalentUsd": 0.032982,
-      "harvestedTurns": 0,
-      "totalSubgoals": 0,
-      "totalUncertainties": 0,
-      "totalHypotheses": 0,
-      "totalRejectedPaths": 0
-    },
-    {
-      "taskId": "mod7_list",
-      "mode": "reasoner-harvest",
-      "repeat": 1,
-      "verdict": "pass",
-      "finalAgentMessage": "The congruence \\(n^2 + n + 1 \\equiv 0 \\pmod{7}\\) is solved by testing residues modulo 7. The solutions are \\(n \\equiv 2\\) and \\(n \\equiv 4 \\pmod{7}\\). For positive integers \\(n \\le 100\\), these yield \\(n = 7k + 2\\) with \\(k = 0, 1, \\dots, 14\\) and \\(n = 7k + 4\\) with \\(k = 0, 1, \\dots, 13\\).\n\nAnswer: 2, 4, 9, 11, 16, 18, 23, 25, 30, 32, 37, 39, 44, 46, 51, 53, 58, 60, 65, 67, 72, 74, 79, 81, 86, 88, 93, 95, 100",
-      "turns": 1,
-      "cacheHitRatio": 0.8648648648648649,
-      "costUsd": 0.00304542,
-      "claudeEquivalentUsd": 0.020982,
-      "harvestedTurns": 1,
-      "totalSubgoals": 4,
-      "totalUncertainties": 2,
-      "totalHypotheses": 2,
-      "totalRejectedPaths": 2
-    },
-    {
-      "taskId": "flips_until_3heads",
-      "mode": "baseline",
-      "repeat": 1,
-      "verdict": "pass",
-      "finalAgentMessage": "Alright, let's reason through this step-by-step.\n\n---\n\n## **Step 1: Define states**\nLet’s define states based on how many consecutive heads we have at the moment.\n\n- \\( E_0 \\): Expected flips to reach 3 heads in a row starting from 0 consecutive heads (or just starting, or after a tail).\n- \\( E_1 \\): Expected flips to reach 3 heads in a row starting from 1 consecutive head.\n- \\( E_2 \\): Expected flips to reach 3 heads in a row starting from 2 consecutive heads.\n\nWe want \\( E_0 \\).\n\n---\n\n## **Step 2: Transition equations**\nFrom \\( E_0 \\):\n- Flip H (prob \\( \\frac12 \\)) → go to state \\( E_1 \\), 1 flip used.\n- Flip T (prob \\( \\frac12 \\)) → stay in \\( E_0 \\), 1 flip used.\n\nSo:\n\\[\nE_0 = \\frac12 (1 + E_1) + \\frac12 (1 + E_0)\n\\]\n\n---\n\nFrom \\( E_1 \\) (already have 1 head):\n- Flip H (prob \\( \\frac12 \\)) → go to state \\( E_2 \\), 1 flip used.\n- Flip T (prob \\( \\frac12 \\)) → go to state \\( E_0 \\), 1 flip used.\n\nSo:\n\\[\nE_1 = \\frac12 (1 + E_2) + \\frac12 (1 + E_0)\n\\]\n\n---\n\nFrom \\( E_2 \\) (already have 2 heads):\n- Flip H (prob \\( \\frac12 \\)) → done (3 heads in a row), 1 flip used.\n- Flip T (prob \\( \\frac12 \\)) → go to state \\( E_0 \\), 1 flip used.\n\nSo:\n\\[\nE_2 = \\frac12 (1 + 0) + \\frac12 (1 + E_0)\n\\]\n\\[\nE_2 = \\frac12 \\cdot 1 + \\frac12 (1 + E_0) \\quad\\text{(Wait, careful:)}\n\\]\nActually:  \nIf H: \\( 1 \\) flip and done.  \nIf T: \\( 1 \\) flip and then \\( E_0 \\) more.\n\nSo:\n\\[\nE_2 = \\frac12 \\cdot 1 + \\frac12 (1 + E_0)\n\\]\nCheck:  \nH: 1 flip → total 1, done. Contribution: \\( \\frac12 \\times 1 \\).  \nT: 1 flip + \\( E_0 \\) more → total \\( 1 + E_0 \\). Contribution: \\( \\frac12 \\times (1 + E_0) \\).\n\nYes:\n\\[\nE_2 = \\frac12 \\cdot 1 + \\frac12 (1 + E_0) = \\frac12 + \\frac12 + \\frac12 E_0 = 1 + \\frac{E_0}{2}.\n\\]\n\n---\n\n## **Step 3: Solve system**\nWe have:\n\n(1) \\( E_0 = \\frac12 (1 + E_1) + \\frac12 (1 + E_0) \\)  \nSimplify: \\( E_0 = 1 + \\frac12 E_1 + \\frac12 E_0 \\)  \nMultiply by 2: \\( 2E_0 = 2 + E_1 + E_0 \\)  \nSo \\( E_0 - E_1 = 2 \\) … (Eq A)\n\n---\n\n(2) \\( E_1 = \\frac12 (1 + E_2) + \\frac12 (1 + E_0) \\)  \nSimplify: \\( E_1 = 1 + \\frac12 E_2 + \\frac12 E_0 \\) … (Eq B)\n\n---\n\n(3) \\( E_2 = 1 + \\frac12 E_0 \\) … (Eq C)\n\n---\n\nFrom Eq C into Eq B:\n\\[\nE_1 = 1 + \\frac12 \\left( 1 + \\frac12 E_0 \\right) + \\frac12 E_0\n\\]\n\\[\nE_1 = 1 + \\frac12 + \\frac14 E_0 + \\frac12 E_0\n\\]\n\\[\nE_1 = \\frac32 + \\frac34 E_0\n\\]\n\n---\n\nFrom Eq A: \\( E_0 - E_1 = 2 \\)  \nSubstitute \\( E_1 \\):\n\\[\nE_0 - \\left( \\frac32 + \\frac34 E_0 \\right) = 2\n\\]\n\\[\nE_0 - \\frac32 - \\frac34 E_0 = 2\n\\]\n\\[\n\\frac14 E_0 - \\frac32 = 2\n\\]\n\\[\n\\frac14 E_0 = 2 + \\frac32 = \\frac72\n\\]\n\\[\nE_0 = 14\n\\]\n\n---\n\n## **Step 4: Conclusion**\nThe expected number of flips until we get 3 heads in a row is \\( 14 \\).\n\n---\n\n**Answer:** 14",
-      "turns": 1,
-      "cacheHitRatio": 0.927536231884058,
-      "costUsd": 0.00119823,
-      "claudeEquivalentUsd": 0.016467,
-      "harvestedTurns": 0,
-      "totalSubgoals": 0,
-      "totalUncertainties": 0,
-      "totalHypotheses": 0,
-      "totalRejectedPaths": 0
-    },
-    {
-      "taskId": "flips_until_3heads",
-      "mode": "reasoner",
-      "repeat": 1,
-      "verdict": "pass",
-      "finalAgentMessage": "The expected number of flips required to get three consecutive heads is 14, derived from solving the system of linear equations for the Markov chain states representing the current streak of heads.\n\nAnswer: 14",
-      "turns": 1,
-      "cacheHitRatio": 0.927536231884058,
-      "costUsd": 0.00283024,
-      "claudeEquivalentUsd": 0.019512,
-      "harvestedTurns": 0,
-      "totalSubgoals": 0,
-      "totalUncertainties": 0,
-      "totalHypotheses": 0,
-      "totalRejectedPaths": 0
-    },
-    {
-      "taskId": "flips_until_3heads",
-      "mode": "reasoner-harvest",
-      "repeat": 1,
-      "verdict": "pass",
-      "finalAgentMessage": "The expected number of flips until three consecutive heads appear is 14.\n\nAnswer: 14",
-      "turns": 1,
-      "cacheHitRatio": 0.927536231884058,
-      "costUsd": 0.00169144,
-      "claudeEquivalentUsd": 0.011712,
-      "harvestedTurns": 1,
-      "totalSubgoals": 4,
-      "totalUncertainties": 0,
-      "totalHypotheses": 2,
-      "totalRejectedPaths": 0
-    },
-    {
-      "taskId": "three_hats",
-      "mode": "baseline",
-      "repeat": 1,
-      "verdict": "pass",
-      "finalAgentMessage": "Let's break this down step by step.\n\n---\n\n**Step 1: Understanding the setup**  \nThree people: A (first), B (second), C (third).  \nEach hat is red (R) or blue (B).  \nThey know: at least one hat is red.  \nEach sees the other two hats, not their own.  \nThey are asked in order: \"Do you know your hat color?\"  \nA answers no, B answers no, C answers yes.  \nWe want C’s hat color.\n\n---\n\n**Step 2: From A’s perspective when asked**  \nA sees B and C.  \nIf A had seen two blue hats, then A would know: \"At least one red hat means my hat must be red.\"  \nSo A says \"no\" → A did **not** see two blue hats.  \nThus A sees at least one red hat on {B, C}.\n\nPossible cases for what A sees (B, C):  \n(R, R), (R, B), (B, R) — all have at least one red.\n\n---\n\n**Step 3: B’s reasoning when asked**  \nB hears A say \"no\".  \nB sees A and C.  \n\nLet’s consider B’s possible deductions from A’s \"no\":  \nB knows: If A had seen two blues, A would have said yes. Since A said no, A saw at least one red among B and C.  \nBut B sees A and C.  \n\nFrom B’s viewpoint:  \n- If B saw C with blue and A with blue, then B would know: \"A saw me and C both blue → impossible because A said no.\" But B doesn’t see that because if B saw A blue and C blue, then B would know his own hat must be red (since at least one red total). But then B would answer yes.  \nSo B’s \"no\" means B did **not** see A and C both blue.  \n\nAlso, B considers: Could my hat be blue? Let’s check:  \nSuppose B sees A red, C blue. Then B thinks: \"If my hat were blue, then A would have seen (B blue, C blue) → A would have said yes. But A said no, so my hat cannot be blue.\"  \nSo if B saw (A red, C blue), B would deduce: \"My hat must be red.\" Then B would answer yes.  \nBut B said no → so B did **not** see (A red, C blue).\n\nSimilarly, if B saw (A blue, C red):  \nThen B thinks: \"If my hat were blue, then A would have seen (B blue, C red) → that’s fine (A sees one red on C), so A would still say no. If my hat were red, then A would see (B red, C red) → A would still say no. So I don’t know.\" That’s consistent with B saying no.  \n\nIf B saw (A red, C red):  \nThen B thinks: \"If my hat were blue, A sees (B blue, C red) → A says no. If my hat were red, A sees (B red, C red) → A says no. So I don’t know.\" That’s also consistent with B saying no.\n\nSo B says no in cases:  \nB sees (A blue, C red) or (A red, C red).  \nB would say yes if B saw (A red, C blue) — but that didn’t happen.  \n\n---\n\n**Step 4: C’s reasoning**  \nC hears A says no, B says no.  \nC sees A and B.  \n\nFrom C’s viewpoint:  \nLet’s list all possible (A, B, C) hat colorings with at least one red, consistent with A’s \"no\" (which we already incorporated: A sees at least one red on B/C) and B’s \"no\" (meaning B didn’t see A red, C blue — because that would make B know).\n\nPossible cases for (A, B) that C could see:  \n\n1. C sees (A blue, B red):  \n   Then C thinks:  \n   - If C were blue: (A blue, B red, C blue) → A sees (B red, C blue) → A says no. B sees (A blue, C blue) → B sees two blues? Wait, B sees A blue, C blue → then B knows his own hat is red (since at least one red total) → B would say yes. But B said no → contradiction. So C cannot be blue.  \n   So C must be red.  \n\n2. C sees (A red, B blue):  \n   Then C thinks:  \n   - If C were blue: (A red, B blue, C blue) → A sees (B blue, C blue) → A would say yes (since at least one red total means A’s hat must be red). But A said no → contradiction. So C cannot be blue.  \n   So C must be red.  \n\n3. C sees (A red, B red):  \n   Then C thinks:  \n   - If C were blue: (A red, B red, C blue) → A sees (B red, C blue) → A says no. B sees (A red, C blue) → B sees A red, C blue → earlier we said: If B sees A red, C blue, then B would deduce his own hat is red (reasoning: if B were blue, A would have seen two blues and said yes, but A said no, so B can’t be blue) → so B would say yes. But B actually said no → contradiction. So C cannot be blue.  \n   - If C were red: (A red, B red, C red) → A sees (B red, C red) → A says no. B sees (A red, C red) → B says no. Works fine.  \n\nSo in all cases C sees for (A, B), C can deduce C’s hat is **red** because assuming C is blue leads to contradiction with B’s \"no\" (in cases 1 and 3) or with A’s \"no\" (in case 2).\n\n---\n\n**Step 5: Conclusion**  \nC answers yes, and C’s hat must be red.\n\n---\n\nAnswer: red",
-      "turns": 1,
-      "cacheHitRatio": 0.5765765765765766,
-      "costUsd": 0.0015142700000000003,
-      "claudeEquivalentUsd": 0.020748,
-      "harvestedTurns": 0,
-      "totalSubgoals": 0,
-      "totalUncertainties": 0,
-      "totalHypotheses": 0,
-      "totalRejectedPaths": 0
-    },
-    {
-      "taskId": "three_hats",
-      "mode": "reasoner",
-      "repeat": 1,
-      "verdict": "pass",
-      "finalAgentMessage": "Answer: red",
-      "turns": 1,
-      "cacheHitRatio": 0.5765765765765766,
-      "costUsd": 0.009340119999999999,
-      "claudeEquivalentUsd": 0.064068,
-      "harvestedTurns": 0,
-      "totalSubgoals": 0,
-      "totalUncertainties": 0,
-      "totalHypotheses": 0,
-      "totalRejectedPaths": 0
-    },
-    {
-      "taskId": "three_hats",
-      "mode": "reasoner-harvest",
-      "repeat": 1,
-      "verdict": "pass",
-      "finalAgentMessage": "The third person deduces their hat color based on the previous responses. Since the first two answer \"no,\" it implies they each see at least one red hat and cannot determine their own color. Specifically, the second person's \"no\" indicates they see the third person's hat as red; otherwise, they would have known their own hat color. Therefore, the third person's hat must be red.\n\nAnswer: red",
-      "turns": 1,
-      "cacheHitRatio": 0.5765765765765766,
-      "costUsd": 0.0096511,
-      "claudeEquivalentUsd": 0.066198,
-      "harvestedTurns": 1,
-      "totalSubgoals": 3,
-      "totalUncertainties": 2,
-      "totalHypotheses": 3,
-      "totalRejectedPaths": 3
-    },
-    {
-      "taskId": "pseudoprime_base2",
-      "mode": "baseline",
-      "repeat": 1,
-      "verdict": "pass",
-      "finalAgentMessage": "Alright, let's go step-by-step.\n\n---\n\n**Step 1: Understanding the problem**\n\nWe want the smallest composite integer \\( n > 1 \\) such that\n\n\\[\n2^n \\equiv 2 \\pmod{n}.\n\\]\n\nEquivalently, \\( 2^{n-1} \\equiv 1 \\pmod{n} \\) for composite \\( n \\).\n\nThis means \\( n \\) is a **Fermat pseudoprime to base 2**.\n\nWe check composite numbers starting from the smallest.\n\n---\n\n**Step 2: Check small composites**\n\n- \\( n = 4 \\): composite.  \n\\( 2^4 = 16 \\), \\( 16 \\mod 4 = 0 \\), not \\( 2 \\). So \\( 2^4 \\equiv 0 \\not\\equiv 2 \\pmod{4} \\). Fails.\n\n- \\( n = 6 \\): composite.  \n\\( 2^6 = 64 \\), \\( 64 \\mod 6 = 4 \\), not \\( 2 \\). Fails.\n\n- \\( n = 8 \\): composite.  \n\\( 2^8 = 256 \\), \\( 256 \\mod 8 = 0 \\), not \\( 2 \\). Fails.\n\n- \\( n = 9 \\): composite.  \n\\( 2^9 = 512 \\), \\( 512 \\mod 9 \\):  \n\\( 512 \\div 9 \\), \\( 9 \\times 56 = 504 \\), remainder \\( 8 \\), not \\( 2 \\). Fails.\n\n- \\( n = 10 \\): composite.  \n\\( 2^{10} = 1024 \\), \\( 1024 \\mod 10 = 4 \\), not \\( 2 \\). Fails.\n\n---\n\n**Step 3: Try n = 15**\n\n\\( n = 15 \\): composite.  \n\\( 2^{15} = 32768 \\).  \nCheck mod 15:  \nWe can use mod arithmetic:  \n\\( 2^4 = 16 \\equiv 1 \\pmod{15} \\)?? Wait, check: \\( 16 \\mod 15 = 1 \\), yes.  \nSo \\( 2^{15} = (2^4)^3 \\times 2^3 = 1^3 \\times 8 = 8 \\pmod{15} \\).  \nSo \\( 2^{15} \\equiv 8 \\not\\equiv 2 \\pmod{15} \\). Fails.\n\n---\n\n**Step 4: Try n = 21**\n\n\\( n = 21 \\): composite.  \nMod 21:  \n\\( 2^6 = 64 \\equiv 1 \\pmod{21} \\)? Check: \\( 64 \\div 21 = 3 \\times 21 = 63 \\), remainder 1, yes.  \nSo \\( 2^{21} = (2^6)^3 \\times 2^3 \\equiv 1^3 \\times 8 = 8 \\pmod{21} \\). Not 2. Fails.\n\n---\n\n**Step 5: Try n = 22**\n\n\\( n = 22 \\): composite.  \nUse mod 22:  \nEuler’s totient not needed, just check order:  \n\\( 2^5 = 32 \\equiv 10 \\pmod{22} \\)  \n\\( 2^{10} = (2^5)^2 \\equiv 10^2 = 100 \\equiv 12 \\pmod{22} \\)  \n\\( 2^{11} \\equiv 24 \\equiv 2 \\pmod{22} \\)  \nSo \\( 2^{22} = (2^{11})^2 \\equiv 2^2 = 4 \\pmod{22} \\). Not 2. Fails.\n\n---\n\n**Step 6: Try n = 25**\n\n\\( n = 25 \\): composite.  \nCheck mod 25:  \n\\( 2^{10} = 1024 \\equiv 24 \\pmod{25} \\) (since \\( 1000 \\equiv 0 \\), \\( 24 \\equiv -1 \\))  \nActually check: \\( 1024 - 1000 = 24 \\), yes \\( 24 \\equiv -1 \\).  \nSo \\( 2^{20} \\equiv 1 \\pmod{25} \\).  \nThus \\( 2^{25} = 2^{20} \\times 2^5 \\equiv 1 \\times 32 = 7 \\pmod{25} \\). Not 2. Fails.\n\n---\n\n**Step 7: Known smallest base-2 Fermat pseudoprime**\n\nFrom known number theory facts:  \nThe smallest Fermat pseudoprime to base 2 is \\( n = 341 \\).  \nBut let's check smaller ones just in case I’m skipping one.\n\n---\n\n**Step 8: Try n = 91**\n\n91 = 7 × 13.  \nCheck mod 7: \\( 2^{91} \\equiv (2^6)^{15} \\times 2^1 \\equiv 1^{15} \\times 2 = 2 \\pmod{7} \\).  \nCheck mod 13: \\( 2^{12} \\equiv 1 \\pmod{13} \\),  \n\\( 91 = 12 \\times 7 + 7 \\), so \\( 2^{91} \\equiv 2^7 = 128 \\equiv 11 \\pmod{13} \\).  \nFor \\( 2^{91} \\equiv 2 \\pmod{91} \\), we need \\( 2^{91} \\equiv 2 \\) mod 7 and mod 13.  \nMod 13 we got 11, not 2. So fails.\n\n---\n\n**Step 9: Try n = 341**\n\n341 = 11 × 31.  \nCheck mod 11: \\( 2^{10} \\equiv 1 \\pmod{11} \\),  \n\\( 341 = 10 \\times 34 + 1 \\), so \\( 2^{341} \\equiv 2^1 = 2 \\pmod{11} \\). Good.  \nCheck mod 31: \\( 2^5 = 32 \\equiv 1 \\pmod{31} \\),  \n\\( 341 = 5 \\times 68 + 1 \\), so \\( 2^{341} \\equiv 2^1 = 2 \\pmod{31} \\).  \nSo \\( 2^{341} \\equiv 2 \\) mod 11 and mod 31, hence mod 341.  \nThus \\( 341 \\) works.\n\n---\n\n**Step 10: Check smaller than 341**\n\nKnown list: 341 is smallest. Let’s check a candidate like 121 = 11^2:  \n\\( 2^{121} \\mod 121 \\):  \nMod 11: \\( 2^{10} \\equiv 1 \\), \\( 121 = 10 \\times 12 + 1 \\), so \\( 2^{121} \\equiv 2 \\pmod{11} \\).  \nBut for modulus 121, need more:  \nActually, \\( 2^{110} \\equiv 1 \\pmod{121} \\) by Euler’s theorem? Not exactly, but known: 121 is not a pseudoprime base 2. Quick check:  \n\\( 2^{121} - 2 \\) divisible by 121? Probably not. Let’s skip detailed check; known fact is 341 is smallest.\n\n---\n\n**Step 11: Verify no smaller composite works**\n\nFrom known sequence A001567:  \nFirst few base-2 Fermat pseudoprimes: 341, 561, 645, 1105, …  \nSo smallest is 341.\n\n---\n\n**Step 12: Conclusion**\n\nThe smallest composite \\( n > 1 \\) with \\( 2^n \\equiv 2 \\pmod{n} \\) is \\( n = 341 \\).\n\n---\n\n**Answer:** 341",
-      "turns": 1,
-      "cacheHitRatio": 0,
-      "costUsd": 0.0018940500000000002,
-      "claudeEquivalentUsd": 0.02577,
-      "harvestedTurns": 0,
-      "totalSubgoals": 0,
-      "totalUncertainties": 0,
-      "totalHypotheses": 0,
-      "totalRejectedPaths": 0
-    },
-    {
-      "taskId": "pseudoprime_base2",
-      "mode": "reasoner",
-      "repeat": 1,
-      "verdict": "pass",
-      "finalAgentMessage": "The smallest composite integer \\(n > 1\\) satisfying \\(2^n \\equiv 2 \\pmod{n}\\) is \\(n = 341\\). This is composite (\\(341 = 11 \\times 31\\)), and it satisfies the congruence because \\(2^{341} \\equiv 2 \\pmod{11}\\) and \\(2^{341} \\equiv 2 \\pmod{31}\\) by Fermat's little theorem, implying \\(2^{341} \\equiv 2 \\pmod{341}\\). All smaller composite integers (e.g., 4, 6, 8, 9, 10, 15, 21) fail to satisfy the condition.\n\nAnswer: 341",
-      "turns": 1,
-      "cacheHitRatio": 0.7529411764705882,
-      "costUsd": 0.0031281200000000003,
-      "claudeEquivalentUsd": 0.02154,
-      "harvestedTurns": 0,
-      "totalSubgoals": 0,
-      "totalUncertainties": 0,
-      "totalHypotheses": 0,
-      "totalRejectedPaths": 0
-    },
-    {
-      "taskId": "pseudoprime_base2",
-      "mode": "reasoner-harvest",
-      "repeat": 1,
-      "verdict": "fail",
-      "checkNote": "This operation was aborted",
-      "finalAgentMessage": "",
-      "turns": 0,
-      "cacheHitRatio": 0,
-      "costUsd": 0,
-      "claudeEquivalentUsd": 0,
-      "harvestedTurns": 0,
-      "totalSubgoals": 0,
-      "totalUncertainties": 0,
-      "totalHypotheses": 0,
-      "totalRejectedPaths": 0,
-      "errorMessage": "This operation was aborted"
-    },
-    {
-      "taskId": "derangements_d7",
-      "mode": "baseline",
-      "repeat": 1,
-      "verdict": "pass",
-      "finalAgentMessage": "Alright, let's go step-by-step.\n\n---\n\n**Step 1: Understanding the problem**\n\nWe want the number of permutations of \\(\\{1, 2, 3, 4, 5, 6, 7\\}\\) with **no fixed points**.  \nA fixed point means \\(\\pi(i) = i\\) for some \\(i\\).  \nA permutation with no fixed points is called a **derangement**.  \nThe number of derangements of \\(n\\) elements is denoted \\(D_n\\) or \\(!n\\).\n\n---\n\n**Step 2: Formula for derangements**\n\nThe formula for \\(D_n\\) is:\n\n\\[\nD_n = n! \\sum_{k=0}^{n} \\frac{(-1)^k}{k!}\n\\]\n\nFor \\(n=7\\):\n\n\\[\nD_7 = 7! \\left( \\frac{1}{0!} - \\frac{1}{1!} + \\frac{1}{2!} - \\frac{1}{3!} + \\frac{1}{4!} - \\frac{1}{5!} + \\frac{1}{6!} - \\frac{1}{7!} \\right)\n\\]\n\n---\n\n**Step 3: Compute step-by-step**\n\nFirst, \\(7! = 5040\\).\n\nNow compute the sum:\n\n\\[\n\\sum_{k=0}^{7} \\frac{(-1)^k}{k!} \n= 1 - 1 + \\frac{1}{2} - \\frac{1}{6} + \\frac{1}{24} - \\frac{1}{120} + \\frac{1}{720} - \\frac{1}{5040}\n\\]\n\nLet's compute term-by-term:\n\n- \\(1 - 1 = 0\\)\n- \\(0 + 0.5 = 0.5\\)\n- \\(0.5 - \\frac{1}{6} \\approx 0.5 - 0.1666667 = 0.3333333\\)\n- \\(0.3333333 + \\frac{1}{24} \\approx 0.3333333 + 0.0416667 = 0.375\\)\n- \\(0.375 - \\frac{1}{120} \\approx 0.375 - 0.0083333 = 0.3666667\\)\n- \\(0.3666667 + \\frac{1}{720} \\approx 0.3666667 + 0.0013889 = 0.3680556\\)\n- \\(0.3680556 - \\frac{1}{5040} \\approx 0.3680556 - 0.0001984 = 0.3678572\\)\n\nSo the sum is approximately \\(0.367857142857...\\)\n\n---\n\n**Step 4: Multiply by \\(7!\\)**\n\n\\[\nD_7 = 5040 \\times 0.367857142857\\ldots\n\\]\n\nLet's compute exactly using fractions:\n\n\\[\n\\sum_{k=0}^{7} \\frac{(-1)^k}{k!} \n= \\frac{1}{2!} - \\frac{1}{3!} + \\frac{1}{4!} - \\frac{1}{5!} + \\frac{1}{6!} - \\frac{1}{7!}\n\\]\n\nWrite with common denominator \\(7! = 5040\\):\n\n- \\(\\frac{1}{2!} = \\frac{2520}{5040}\\)\n- \\(\\frac{1}{3!} = \\frac{840}{5040}\\)\n- \\(\\frac{1}{4!} = \\frac{210}{5040}\\)\n- \\(\\frac{1}{5!} = \\frac{42}{5040}\\)\n- \\(\\frac{1}{6!} = \\frac{7}{5040}\\)\n- \\(\\frac{1}{7!} = \\frac{1}{5040}\\)\n\nNow alternate signs:\n\n\\[\n\\left( \\frac{2520}{5040} - \\frac{840}{5040} \\right) \n= \\frac{1680}{5040}\n\\]\n\\[\n\\frac{1680}{5040} + \\frac{210}{5040} = \\frac{1890}{5040}\n\\]\n\\[\n\\frac{1890}{5040} - \\frac{42}{5040} = \\frac{1848}{5040}\n\\]\n\\[\n\\frac{1848}{5040} + \\frac{7}{5040} = \\frac{1855}{5040}\n\\]\n\\[\n\\frac{1855}{5040} - \\frac{1}{5040} = \\frac{1854}{5040}\n\\]\n\nSo the sum is \\(\\frac{1854}{5040}\\).\n\n---\n\n**Step 5: Multiply by \\(7!\\)**\n\n\\[\nD_7 = 5040 \\times \\frac{1854}{5040} = 1854\n\\]\n\n---\n\n**Step 6: Quick check with known derangement numbers**\n\nKnown small derangements:  \n\\(D_1 = 0, D_2 = 1, D_3 = 2, D_4 = 9, D_5 = 44, D_6 = 265, D_7 = 1854\\).  \nYes, matches known sequence.\n\n---\n\n**Final answer:**\n\nAnswer: 1854",
-      "turns": 1,
-      "cacheHitRatio": 0,
-      "costUsd": 0.00127253,
-      "claudeEquivalentUsd": 0.017292,
-      "harvestedTurns": 0,
-      "totalSubgoals": 0,
-      "totalUncertainties": 0,
-      "totalHypotheses": 0,
-      "totalRejectedPaths": 0
-    },
-    {
-      "taskId": "derangements_d7",
-      "mode": "reasoner",
-      "repeat": 1,
-      "verdict": "pass",
-      "finalAgentMessage": "The number of derangements of \\(n\\) distinct objects, denoted \\(D_n\\), counts permutations with no fixed points. For \\(n = 7\\), this can be computed using the recurrence \\(D_n = (n-1)(D_{n-1} + D_{n-2})\\) with initial values \\(D_1 = 0\\) and \\(D_2 = 1\\).  \nThus:  \n\\(D_3 = 2(1+0) = 2\\),  \n\\(D_4 = 3(2+1) = 9\\),  \n\\(D_5 = 4(9+2) = 44\\),  \n\\(D_6 = 5(44+9) = 265\\),  \n\\(D_7 = 6(265+44) = 1854\\).\n\nAnswer: 1854",
-      "turns": 1,
-      "cacheHitRatio": 0.7191011235955056,
-      "costUsd": 0.00349167,
-      "claudeEquivalentUsd": 0.024027,
-      "harvestedTurns": 0,
-      "totalSubgoals": 0,
-      "totalUncertainties": 0,
-      "totalHypotheses": 0,
-      "totalRejectedPaths": 0
-    },
-    {
-      "taskId": "derangements_d7",
-      "mode": "reasoner-harvest",
-      "repeat": 1,
-      "verdict": "pass",
-      "finalAgentMessage": "The number of derangements of \\(n\\) elements, denoted \\(D_n\\), counts permutations with no fixed points. For \\(n=7\\), this can be computed using the recurrence \\(D_n = (n-1)(D_{n-1} + D_{n-2})\\) with initial values \\(D_0 = 1\\) and \\(D_1 = 0\\). Applying the recurrence yields \\(D_2 = 1\\), \\(D_3 = 2\\), \\(D_4 = 9\\), \\(D_5 = 44\\), \\(D_6 = 265\\), and finally \\(D_7 = 6 \\times (265 + 44) = 1854\\).\n\nAnswer: 1854",
-      "turns": 1,
-      "cacheHitRatio": 0.7191011235955056,
-      "costUsd": 0.0028434299999999997,
-      "claudeEquivalentUsd": 0.019587,
-      "harvestedTurns": 1,
-      "totalSubgoals": 3,
-      "totalUncertainties": 2,
-      "totalHypotheses": 2,
-      "totalRejectedPaths": 2
-    },
-    {
-      "taskId": "euler_quadratic_break",
-      "mode": "baseline",
-      "repeat": 1,
-      "verdict": "pass",
-      "finalAgentMessage": "Let’s check \\( f(n) = n^2 + n + 41 \\) for small \\( n \\):\n\n- \\( n = 0 \\): \\( f(0) = 41 \\) (prime)  \n- \\( n = 1 \\): \\( f(1) = 1 + 1 + 41 = 43 \\) (prime)  \n- \\( n = 2 \\): \\( f(2) = 4 + 2 + 41 = 47 \\) (prime)  \n- \\( n = 3 \\): \\( f(3) = 9 + 3 + 41 = 53 \\) (prime)  \n- \\( n = 4 \\): \\( f(4) = 16 + 4 + 41 = 61 \\) (prime)  \n- \\( n = 5 \\): \\( f(5) = 25 + 5 + 41 = 71 \\) (prime)  \n- \\( n = 6 \\): \\( f(6) = 36 + 6 + 41 = 83 \\) (prime)  \n- \\( n = 7 \\): \\( f(7) = 49 + 7 + 41 = 97 \\) (prime)  \n- \\( n = 8 \\): \\( f(8) = 64 + 8 + 41 = 113 \\) (prime)  \n- \\( n = 9 \\): \\( f(9) = 81 + 9 + 41 = 131 \\) (prime)  \n- \\( n = 10 \\): \\( f(10) = 100 + 10 + 41 = 151 \\) (prime)  \n\nWe can keep going, but the first known counterexample for this famous Euler polynomial is \\( n = 40 \\), because  \n\\[\nf(40) = 40^2 + 40 + 41 = 1600 + 40 + 41 = 1681.\n\\]  \nCheck if \\( 1681 \\) is prime:  \n\\( 1681 = 41^2 \\) (since \\( 41 \\times 41 = 1681 \\)), so it’s composite.\n\nBut wait — let’s check if there’s a smaller \\( n \\) where \\( f(n) \\) is composite.  \nWe can test \\( n = 41 \\):  \n\\( f(41) = 41^2 + 41 + 41 = 1681 + 82 = 1763 \\), which is \\( 41 \\times 43 \\) (since \\( 1763/41 = 43 \\)), so composite. But \\( n = 41 \\) is larger than \\( n = 40 \\).\n\nCheck \\( n = 39 \\): \\( f(39) = 1521 + 39 + 41 = 1601 \\). Test divisibility: not divisible by primes up to \\( \\sqrt{1601} \\approx 40 \\), seems prime.  \n\nCheck \\( n = 40 \\) is indeed the first composite? Let’s check \\( n = 1 \\) to \\( 39 \\) quickly for a smaller counterexample:  \nWe can note \\( f(n) = n(n+1) + 41 \\). If \\( 41 \\mid f(n) \\), then \\( 41 \\mid n(n+1) \\).  \nThat happens when \\( n \\equiv 0 \\pmod{41} \\) or \\( n \\equiv 40 \\pmod{41} \\).  \nThe smallest positive such \\( n \\) is \\( n = 40 \\) (since \\( n=41 \\) is larger).  \nSo for \\( n = 40 \\), \\( f(40) = 40 \\times 41 + 41 = 41 \\times 41 \\) is composite.  \n\nCheck \\( n = 0 \\) to \\( 39 \\): no multiple of 41 except \\( n=0 \\) (which gives 41, prime). So \\( n=40 \\) is indeed the first nonnegative integer where \\( f(n) \\) is composite.\n\nThus smallest \\( n \\) is \\( 40 \\), \\( f(40) = 1681 = 41^2 \\).\n\n**Answer:** 40",
-      "turns": 1,
-      "cacheHitRatio": 0,
-      "costUsd": 0.00098535,
-      "claudeEquivalentUsd": 0.013365,
-      "harvestedTurns": 0,
-      "totalSubgoals": 0,
-      "totalUncertainties": 0,
-      "totalHypotheses": 0,
-      "totalRejectedPaths": 0
-    },
-    {
-      "taskId": "euler_quadratic_break",
-      "mode": "reasoner",
-      "repeat": 1,
-      "verdict": "pass",
-      "finalAgentMessage": "The smallest nonnegative integer \\(n\\) for which \\(f(n) = n^2 + n + 41\\) is composite is \\(n = 40\\). At this value, \\(f(40) = 40^2 + 40 + 41 = 1681 = 41^2\\), which is not prime.\n\nAnswer: 40",
-      "turns": 1,
-      "cacheHitRatio": 0.6095238095238096,
-      "costUsd": 0.0014309199999999998,
-      "claudeEquivalentUsd": 0.0099,
-      "harvestedTurns": 0,
-      "totalSubgoals": 0,
-      "totalUncertainties": 0,
-      "totalHypotheses": 0,
-      "totalRejectedPaths": 0
-    },
-    {
-      "taskId": "euler_quadratic_break",
-      "mode": "reasoner-harvest",
-      "repeat": 1,
-      "verdict": "pass",
-      "finalAgentMessage": "The polynomial \\(f(n) = n^2 + n + 41\\) is known to produce primes for \\(n = 0, 1, 2, \\dots, 39\\). At \\(n = 40\\), we have \\(f(40) = 40^2 + 40 + 41 = 1681\\), and \\(1681 = 41^2\\), which is composite. Therefore, \\(n = 40\\) is the smallest nonnegative integer where \\(f(n)\\) fails to be prime.\n\nAnswer: 40",
-      "turns": 1,
-      "cacheHitRatio": 0.6095238095238096,
-      "costUsd": 0.0025938099999999998,
-      "claudeEquivalentUsd": 0.017865,
-      "harvestedTurns": 1,
-      "totalSubgoals": 3,
-      "totalUncertainties": 2,
-      "totalHypotheses": 3,
-      "totalRejectedPaths": 2
-    }
-  ]
-}

benchmarks/harvest/runner.ts

@@ -1,291 +0,0 @@
-/** Harvest-bench runner — writes results.json. CLI flags + sample invocations in benchmarks/README.md. */
-
-import { type WriteStream, mkdirSync, writeFileSync } from "node:fs";
-import { join } from "node:path";
-import { pathToFileURL } from "node:url";
-import {
-  CacheFirstLoop,
-  DeepSeekClient,
-  ImmutablePrefix,
-  claudeEquivalentCost,
-  loadDotenv,
-} from "../../src/index.js";
-import { openTranscriptFile, recordFromLoopEvent, writeRecord } from "../../src/transcript/log.js";
-import { TASKS } from "./tasks.js";
-import type {
-  HarvestBenchMeta,
-  HarvestBenchReport,
-  HarvestMode,
-  HarvestRunResult,
-  HarvestTask,
-} from "./types.js";
-import { ALL_MODES } from "./types.js";
-
-loadDotenv();
-
-interface CliArgs {
-  taskFilter: string | null;
-  modes: HarvestMode[];
-  repeats: number;
-  outPath: string | null;
-  transcriptsDir: string | null;
-  /** Per-HTTP-call timeout in ms. Default 300_000 (5 min) — reasoner + harvest runs legitimately need this. */
-  timeoutMs: number;
-  dry: boolean;
-  verbose: boolean;
-}
-
-function parseArgs(argv: string[]): CliArgs {
-  const out: CliArgs = {
-    taskFilter: null,
-    modes: [...ALL_MODES],
-    repeats: 1,
-    outPath: null,
-    transcriptsDir: null,
-    timeoutMs: 300_000,
-    dry: false,
-    verbose: false,
-  };
-  for (let i = 0; i < argv.length; i++) {
-    const a = argv[i];
-    if (a === "--task") out.taskFilter = argv[++i] ?? null;
-    else if (a === "--mode") {
-      const v = (argv[++i] ?? "").toLowerCase() as HarvestMode;
-      if ((ALL_MODES as string[]).includes(v)) out.modes = [v];
-    } else if (a === "--repeats") out.repeats = Number.parseInt(argv[++i] ?? "1", 10);
-    else if (a === "--out") out.outPath = argv[++i] ?? null;
-    else if (a === "--transcripts-dir") out.transcriptsDir = argv[++i] ?? null;
-    else if (a === "--timeout") {
-      // Accept seconds for humans, convert to ms internally.
-      const secs = Number.parseInt(argv[++i] ?? "300", 10);
-      if (Number.isFinite(secs) && secs > 0) out.timeoutMs = secs * 1000;
-    } else if (a === "--dry") out.dry = true;
-    else if (a === "--verbose" || a === "-v") out.verbose = true;
-  }
-  return out;
-}
-
-function modelForMode(mode: HarvestMode): string {
-  if (mode === "baseline") return "deepseek-chat";
-  return "deepseek-reasoner";
-}
-
-function harvestForMode(mode: HarvestMode): boolean {
-  return mode === "reasoner-harvest";
-}
-
-async function runOnce(
-  task: HarvestTask,
-  mode: HarvestMode,
-  rep: number,
-  client: DeepSeekClient,
-  transcriptStream: WriteStream | null,
-): Promise<HarvestRunResult> {
-  const model = modelForMode(mode);
-  const harvest = harvestForMode(mode);
-
-  const prefix = new ImmutablePrefix({ system: task.systemPrompt });
-  const loop = new CacheFirstLoop({
-    client,
-    prefix,
-    model,
-    harvest,
-    stream: false,
-  });
-  const prefixHash = prefix.fingerprint;
-
-  let harvestedTurns = 0;
-  let totalSubgoals = 0;
-  let totalUncertainties = 0;
-  let totalHypotheses = 0;
-  let totalRejectedPaths = 0;
-  let finalText = "";
-  let errorMessage: string | undefined;
-
-  if (transcriptStream) {
-    writeRecord(transcriptStream, {
-      ts: new Date().toISOString(),
-      turn: 1,
-      role: "user",
-      content: task.prompt,
-    });
-  }
-
-  try {
-    for await (const ev of loop.step(task.prompt)) {
-      if (transcriptStream && ev.role !== "assistant_delta") {
-        writeRecord(transcriptStream, recordFromLoopEvent(ev, { model, prefixHash }));
-      }
-      if (ev.role === "assistant_final") {
-        finalText = ev.content;
-        if (ev.planState) {
-          if (
-            ev.planState.subgoals.length +
-              ev.planState.hypotheses.length +
-              ev.planState.uncertainties.length +
-              ev.planState.rejectedPaths.length >
-            0
-          ) {
-            harvestedTurns++;
-            totalSubgoals += ev.planState.subgoals.length;
-            totalHypotheses += ev.planState.hypotheses.length;
-            totalUncertainties += ev.planState.uncertainties.length;
-            totalRejectedPaths += ev.planState.rejectedPaths.length;
-          }
-        }
-      } else if (ev.role === "done") {
-        finalText = ev.content || finalText;
-        break;
-      } else if (ev.role === "error") {
-        throw new Error(ev.error ?? "loop error");
-      }
-    }
-  } catch (err) {
-    errorMessage = (err as Error).message;
-  }
-
-  const verdict = errorMessage
-    ? { verdict: "fail" as const, note: errorMessage }
-    : task.check(finalText);
-
-  return {
-    taskId: task.id,
-    mode,
-    repeat: rep + 1,
-    verdict: verdict.verdict,
-    checkNote: verdict.note,
-    finalAgentMessage: finalText,
-    turns: loop.stats.turns.length,
-    cacheHitRatio: loop.stats.aggregateCacheHitRatio,
-    costUsd: loop.stats.totalCost,
-    claudeEquivalentUsd: loop.stats.turns.reduce((s, t) => s + claudeEquivalentCost(t.usage), 0),
-    harvestedTurns,
-    totalSubgoals,
-    totalUncertainties,
-    totalHypotheses,
-    totalRejectedPaths,
-    errorMessage,
-  };
-}
-
-function runDry(args: CliArgs): HarvestBenchReport {
-  const tasks = filterTasks(args.taskFilter);
-  const results: HarvestRunResult[] = [];
-  for (const task of tasks) {
-    // Exercise each checker with a deliberately wrong reply so we know
-    // the wiring is live — not a pass on empty.
-    const sanity = task.check("Answer: this is not the right answer at all");
-    console.log(`[${task.id}] checker exercises ok (sanity verdict=${sanity.verdict})`);
-    for (const mode of args.modes) {
-      results.push({
-        taskId: task.id,
-        mode,
-        repeat: 1,
-        verdict: "inconclusive",
-        checkNote: "dry-run (no model call)",
-        finalAgentMessage: "[dry-run]",
-        turns: 0,
-        cacheHitRatio: 0,
-        costUsd: 0,
-        claudeEquivalentUsd: 0,
-        harvestedTurns: 0,
-        totalSubgoals: 0,
-        totalUncertainties: 0,
-        totalHypotheses: 0,
-        totalRejectedPaths: 0,
-      });
-    }
-  }
-  return { meta: buildMeta(args, tasks.length), results };
-}
-
-function filterTasks(filter: string | null): HarvestTask[] {
-  if (!filter) return TASKS;
-  const t = TASKS.find((x) => x.id === filter);
-  if (!t) throw new Error(`unknown task: ${filter}`);
-  return [t];
-}
-
-function buildMeta(args: CliArgs, taskCount: number): HarvestBenchMeta {
-  return {
-    date: new Date().toISOString(),
-    repeatsPerTask: args.repeats,
-    taskCount,
-    modesRun: args.modes,
-    reasonixVersion: "0.2.2",
-  };
-}
-
-async function main(): Promise<void> {
-  const args = parseArgs(process.argv.slice(2));
-
-  if (args.dry) {
-    const report = runDry(args);
-    writeReport(report, args.outPath);
-    return;
-  }
-
-  const client = new DeepSeekClient({ timeoutMs: args.timeoutMs });
-  const tasks = filterTasks(args.taskFilter);
-
-  if (args.transcriptsDir) mkdirSync(args.transcriptsDir, { recursive: true });
-
-  const results: HarvestRunResult[] = [];
-  for (const task of tasks) {
-    for (let rep = 0; rep < args.repeats; rep++) {
-      for (const mode of args.modes) {
-        let stream: WriteStream | null = null;
-        if (args.transcriptsDir) {
-          const fname = `${task.id}.${mode}.r${rep + 1}.jsonl`;
-          stream = openTranscriptFile(join(args.transcriptsDir, fname), {
-            version: 1,
-            source: `harvest-bench/${mode}`,
-            model: modelForMode(mode),
-            task: task.id,
-            mode,
-            repeat: rep + 1,
-            startedAt: new Date().toISOString(),
-          });
-        }
-        const started = Date.now();
-        let result: HarvestRunResult;
-        try {
-          result = await runOnce(task, mode, rep, client, stream);
-        } finally {
-          stream?.end();
-        }
-        const elapsed = ((Date.now() - started) / 1000).toFixed(1);
-        const note = result.checkNote ? `  ${result.checkNote}` : "";
-        console.log(
-          `[${task.id}/${mode}/r${rep + 1}] verdict=${result.verdict} cache=${(result.cacheHitRatio * 100).toFixed(1)}% cost=$${result.costUsd.toFixed(6)} harvest=${result.harvestedTurns}:${result.totalSubgoals}s/${result.totalUncertainties}u (${elapsed}s)${note}`,
-        );
-        results.push(result);
-      }
-    }
-  }
-
-  const report: HarvestBenchReport = { meta: buildMeta(args, tasks.length), results };
-  writeReport(report, args.outPath);
-}
-
-function writeReport(report: HarvestBenchReport, outPath: string | null): void {
-  const path =
-    outPath ?? `benchmarks/harvest/results-${new Date().toISOString().replace(/[:.]/g, "-")}.json`;
-  writeFileSync(path, `${JSON.stringify(report, null, 2)}\n`, "utf8");
-  console.log(`wrote ${path}`);
-}
-
-function isMain(): boolean {
-  const entry = process.argv[1];
-  if (!entry) return false;
-  return import.meta.url === pathToFileURL(entry).href;
-}
-
-if (isMain()) {
-  main().catch((err) => {
-    console.error(err);
-    process.exit(1);
-  });
-}
-
-export { main as runHarvestBench };

benchmarks/harvest/tasks.ts

@@ -1,143 +0,0 @@
-/** Seed reasoning tasks for harvest-bench — single-turn Q/A with deterministic checkers. */
-
-import type { HarvestTask } from "./types.js";
-
-const CONCISE_SYSTEM = `You are a precise reasoner. Think carefully, then state your final answer on a clearly-labeled line starting with "Answer:".`;
-
-/** Parse non-negative integers; expands "2-4" → 2,3,4; strips LaTeX decorations first. */
-function extractIntegers(text: string): number[] {
-  // Strip LaTeX delimiters so n_1 / n^2 / \{ ... \} don't confuse us.
-  const cleaned = text
-    .replace(/\\[a-zA-Z]+/g, " ") // \frac, \mod etc.
-    .replace(/[{}\\]/g, " ")
-    .replace(/[_^]\d+/g, " "); // subscript/superscript numbers
-  // Expand ranges: "2-4" → "2,3,4" (only for small gaps)
-  const rangeExpanded = cleaned.replace(/(\d+)\s*[-–]\s*(\d+)/g, (_, a, b) => {
-    const lo = Number.parseInt(a, 10);
-    const hi = Number.parseInt(b, 10);
-    if (!Number.isFinite(lo) || !Number.isFinite(hi) || hi - lo > 50) return `${a} ${b}`;
-    const out: number[] = [];
-    for (let i = Math.min(lo, hi); i <= Math.max(lo, hi); i++) out.push(i);
-    return out.join(" ");
-  });
-  const matches = rangeExpanded.match(/-?\d+/g) ?? [];
-  return matches.map((m) => Number.parseInt(m, 10)).filter((n) => Number.isFinite(n));
-}
-
-/** Extract content after the last "Answer:" label (case-insensitive). */
-function extractAnswerLine(text: string): string {
-  const matches = [...text.matchAll(/answer\s*[:：]\s*([^\n]+)/gi)];
-  if (matches.length === 0) return text;
-  return matches[matches.length - 1]![1]!.trim();
-}
-
-/** Positive n ≤ 100 such that n^2 + n + 1 ≡ 0 (mod 7). */
-const MOD7_EXPECTED: number[] = (() => {
-  const out: number[] = [];
-  for (let n = 1; n <= 100; n++) {
-    if ((n * n + n + 1) % 7 === 0) out.push(n);
-  }
-  return out;
-})();
-
-/** Single-integer checker — first plausible int from the last "Answer:" line, exact equality. */
-function checkSingleInt(expected: number) {
-  return (reply: string) => {
-    const answerLine = extractAnswerLine(reply);
-    const nums = extractIntegers(answerLine);
-    if (nums.length === 0) return { verdict: "fail" as const, note: "no number in Answer line" };
-    const n = nums[0]!;
-    if (n === expected) return { verdict: "pass" as const };
-    return { verdict: "fail" as const, note: `got ${n}, expected ${expected}` };
-  };
-}
-
-export const TASKS: HarvestTask[] = [
-  {
-    id: "mod7_list",
-    description:
-      "Number theory — find all positive n ≤ 100 with n^2+n+1 ≡ 0 (mod 7). 29-element set. Classic R1 scratch-work territory.",
-    systemPrompt: CONCISE_SYSTEM,
-    prompt:
-      'Find all positive integers n with n ≤ 100 such that n^2 + n + 1 is divisible by 7. Briefly justify, then end with the full list on a line starting with "Answer:".',
-    check: (reply) => {
-      const answerLine = extractAnswerLine(reply);
-      const found = new Set(extractIntegers(answerLine).filter((n) => n >= 1 && n <= 100));
-      const expected = new Set(MOD7_EXPECTED);
-      if (found.size === 0) {
-        return { verdict: "fail", note: "no integers extracted from Answer line" };
-      }
-      // Exact set equality — both containment directions.
-      for (const n of expected)
-        if (!found.has(n)) return { verdict: "fail", note: `missing n=${n}` };
-      for (const n of found) if (!expected.has(n)) return { verdict: "fail", note: `extra n=${n}` };
-      return { verdict: "pass" };
-    },
-  },
-
-  {
-    id: "flips_until_3heads",
-    description:
-      "Probability — expected coin flips until 3 consecutive heads. Answer: 14. Tests whether R1 derives via recurrence or via memorized result.",
-    systemPrompt: CONCISE_SYSTEM,
-    prompt:
-      'A fair coin is flipped repeatedly until you see 3 heads in a row. What is the expected number of total flips? Give a single integer on a line starting with "Answer:".',
-    check: (reply) => {
-      const answerLine = extractAnswerLine(reply);
-      const nums = extractIntegers(answerLine);
-      if (nums.length === 0) return { verdict: "fail", note: "no number in Answer line" };
-      // Accept the first sensible number — sometimes agents write "Answer: 14 flips".
-      const n = nums[0]!;
-      if (n === 14) return { verdict: "pass" };
-      return { verdict: "fail", note: `got ${n}, expected 14` };
-    },
-  },
-
-  {
-    id: "three_hats",
-    description:
-      "Logic — three people wear red/blue hats, at least one red, they're asked in order. First two say no, third says yes. What color? Answer: red (deducible because if third were blue, the first two could see one red + one unknown and wouldn't have said no on their full first round, for most configurations the third can only be certain if red).",
-    systemPrompt: CONCISE_SYSTEM,
-    prompt:
-      'Three people wear hats that are each red or blue. They are told at least one hat is red. Each can see the other two hats but not their own. They are asked in order: "Do you know your hat color?" The first two answer no. The third answers yes. What color is the third person\'s hat? Give a one-word answer on a line starting with "Answer:".',
-    check: (reply) => {
-      const answerLine = extractAnswerLine(reply).toLowerCase();
-      // Accept "red" as a standalone word (not "redirected" etc).
-      if (/\bred\b/.test(answerLine) && !/\bblue\b/.test(answerLine)) {
-        return { verdict: "pass" };
-      }
-      if (/\bblue\b/.test(answerLine)) return { verdict: "fail", note: "answered blue" };
-      return { verdict: "fail", note: "no clear color in Answer line" };
-    },
-  },
-
-  {
-    id: "pseudoprime_base2",
-    description:
-      "Number theory — smallest composite n > 1 such that 2^n ≡ 2 (mod n). This is the smallest Fermat pseudoprime to base 2. Answer: 341 (= 11·31). V3 frequently answers 561 (Carmichael / wrong base-2 property) or 9 (not actually a pseudoprime to base 2, verifying the model isn't computing). R1 usually gets this right.",
-    systemPrompt: CONCISE_SYSTEM,
-    prompt:
-      'Find the smallest composite integer n > 1 such that 2^n is congruent to 2 modulo n (i.e., n is a Fermat pseudoprime to base 2). Briefly justify, then give a single integer on a line starting with "Answer:".',
-    check: checkSingleInt(341),
-  },
-
-  {
-    id: "derangements_d7",
-    description:
-      "Combinatorics — number of derangements of 7 elements. Answer: 1854 (D_7 = 7! · (1 − 1/1! + 1/2! − 1/3! + … ± 1/7!) = 5040 · 0.367857… = 1854). V3 sometimes approximates via n!/e and rounds wrong, or confuses with D_6=265 or D_8=14833. R1's explicit recurrence D_n = (n-1)(D_{n-1}+D_{n-2}) avoids the mistake.",
-    systemPrompt: CONCISE_SYSTEM,
-    prompt:
-      'How many permutations of {1, 2, 3, 4, 5, 6, 7} have no fixed points? (This is D_7, the derangement number.) Briefly justify, then give a single integer on a line starting with "Answer:".',
-    check: checkSingleInt(1854),
-  },
-
-  {
-    id: "euler_quadratic_break",
-    description:
-      "Number theory — smallest nonneg integer n where n^2 + n + 41 is NOT prime. Euler's prime-generating polynomial famously produces primes for n = 0..39 and first fails at n = 40 (40²+40+41 = 1681 = 41²). V3 often confuses this with the related n²-n+41 (first fails at 41) or cites the wrong threshold. R1 checks small n systematically.",
-    systemPrompt: CONCISE_SYSTEM,
-    prompt:
-      'Consider the polynomial f(n) = n^2 + n + 41 for n = 0, 1, 2, …. What is the smallest nonneg integer n at which f(n) fails to be prime? Briefly justify (including the value of f(n) at that point), then give just the integer n on a line starting with "Answer:".',
-    check: checkSingleInt(40),
-  },
-];

benchmarks/harvest/types.ts

@@ -1,61 +0,0 @@
-/** Harvest-bench types — single-turn Q/A with deterministic checkers; isolates Pillar 2 the way τ-bench-lite isolates Pillar 1. */
-
-export type HarvestMode =
-  /** deepseek-chat, no Reasonix tricks. Floor reference for answer quality on reasoning tasks (V3 at its best). */
-  | "baseline"
-  /** deepseek-reasoner, no harvest. Isolates "does reasoner help over chat on these problems?" */
-  | "reasoner"
-  /** deepseek-reasoner + harvest. Isolates "does the extra V3 harvest call add quality / change behavior?" */
-  | "reasoner-harvest";
-
-export const ALL_MODES: HarvestMode[] = ["baseline", "reasoner", "reasoner-harvest"];
-
-/** Checker verdict — `inconclusive` reserves room for "right shape, can't verify without running it". */
-export type CheckVerdict = "pass" | "fail" | "inconclusive";
-
-export interface HarvestTask {
-  id: string;
-  /** One-line human description, not shown to the model. */
-  description: string;
-  /** System prompt. Kept minimal so harvest signal can be attributed to the model, not to prompt engineering. */
-  systemPrompt: string;
-  /** The single question. */
-  prompt: string;
-  /** Pure + deterministic — no LLM calls, no file I/O. Verdict + optional one-line note. */
-  check: (agentReply: string) => { verdict: CheckVerdict; note?: string };
-}
-
-export interface HarvestRunResult {
-  taskId: string;
-  mode: HarvestMode;
-  repeat: number;
-  verdict: CheckVerdict;
-  checkNote?: string;
-  finalAgentMessage: string;
-  /** Turns the loop completed (usually 1 for a single-shot Q/A, > 1 if tool-calls happen). */
-  turns: number;
-  cacheHitRatio: number;
-  costUsd: number;
-  claudeEquivalentUsd: number;
-  /** Harvest-specific — only non-zero on reasoner-harvest mode. */
-  harvestedTurns: number;
-  totalSubgoals: number;
-  totalUncertainties: number;
-  totalHypotheses: number;
-  totalRejectedPaths: number;
-  /** Optional error message if the run crashed (model down, timeout, etc). */
-  errorMessage?: string;
-}
-
-export interface HarvestBenchMeta {
-  date: string;
-  repeatsPerTask: number;
-  taskCount: number;
-  modesRun: HarvestMode[];
-  reasonixVersion: string;
-}
-
-export interface HarvestBenchReport {
-  meta: HarvestBenchMeta;
-  results: HarvestRunResult[];
-}

benchmarks/real-world-cache/README.md

@@ -0,0 +1,76 @@
+# Real-world cache hit — single user, single day
+
+A real Reasonix user shared their DeepSeek dashboard for **2026-05-01**.
+Used with permission, anonymized.
+
+![DeepSeek usage dashboard, 2026-05-01](2026-05-01-deepseek-dashboard.png)
+
+## The numbers
+
+| | Tokens |
+|---|---:|
+| Input — cache hit | 435,033,856 |
+| Input — cache miss | 767,616 |
+| Output | 179,763 |
+| **Day total** | **435,981,235** |
+
+**Cache hit ratio (input):**
+`435,033,856 / (435,033,856 + 767,616)` = **99.82%**
+
+## Cost — using the prices Reasonix bills against (`src/telemetry/stats.ts`)
+
+USD per 1M tokens — `inputCacheHit / inputCacheMiss / output`:
+- `deepseek-v4-flash` — `0.028 / 0.139 / 0.278`
+- `deepseek-v4-pro` — `0.139 / 1.667 / 3.333`
+
+Assuming **v4-flash** (the project default):
+
+| | This user (99.82% hit) | Same workload, **0% cache** |
+|---|---:|---:|
+| Cache-hit input | $12.18 | — |
+| Cache-miss input | $0.11 | $60.58 |
+| Output | $0.05 | $0.05 |
+| **Total / day** | **$12.34** | **$60.63** |
+
+→ Cache saved this user **$48.29**, or **~80%** off the un-cached baseline, on a single day.
+
+On **v4-pro** (5× the prefix-cache discount) the same workload would cost
+**~$62.35** vs **~$727.08** without cache — a **~91% saving**.
+
+## "Isn't that just DeepSeek's prefix cache?"
+
+DeepSeek's API ships prefix caching enabled by default; the *cache* is theirs,
+the *hit rate* is the client's. Same API, different clients, very different
+hit rates:
+
+- DeepSeek's own web chat: 60–80% within a single conversation, drops to 0%
+  on a new session (system prompt may differ).
+- Cherry Studio / Open WebUI / generic OpenAI-shape SDKs: typically 30–60%
+  on long sessions — history gets reordered, tool specs get re-serialized,
+  every drift breaks the prefix.
+- Cline / Continue and other XML-tool-call clients: lower still — every tool
+  result inlines into the conversation, shifting bytes the cache keys on.
+
+99.82% is what falls out of these four design choices in Reasonix:
+
+1. **`ImmutablePrefix`** (`src/memory.ts`) — system prompt + tool specs are
+   frozen at session start. Same byte sequence every turn.
+2. **`AppendOnlyLog`** — turns only append. No reorder, no edit-in-place.
+3. **`VolatileScratch`** — chain-of-thought / per-turn scratch lives outside
+   the cached prefix so it never poisons the next hit.
+4. **Auto-compact** — when context approaches the cap, older turns fold into
+   a summary message *appended* to the prefix; the prefix itself isn't
+   rewritten, so the cache survives the fold.
+
+DeepSeek gave us cacheable bytes. The four mechanisms above are how we keep
+the bytes cacheable.
+
+## Reproduce
+
+The synthetic side of this lives in `benchmarks/tau-bench/` — same task set
+run through `CacheFirstLoop` vs a deliberately cache-hostile baseline. The
+real-world data above is what the synthetic numbers look like once a user
+runs the harness in anger.
+
+Submit your own dashboard screenshot if you want it anonymized and added
+here — open an issue.

benchmarks/spike-tdd-kernel/tdd-eval.mjs

@@ -45,7 +45,7 @@ const PROMPTS = [
   { id: "m3", level: "medium", task: "A function \`debounceAsync<T extends any[], R>(fn: (...args: T) => Promise<R>, ms: number): (...args: T) => Promise<R>\` in src/util/debounce.ts. Resolves only the latest call's promise; earlier callers reject with an AbortError-like." },
 
   // hard (2) — these touch domain types from the repo
-  { id: "h1", level: "hard", task: "A function \`extractTestId(file: string, fullName: string, source: string): { id: string, source: 'native' | 'annotation' }\` in src/repair/test-id.ts. If \`source\` contains a '// @reasonix-test-id: <slug>' comment within 3 lines above an it()/test() whose name matches \`fullName\`, return that slug with source='annotation'. Otherwise return \`\${file}::\${fullName}\` with source='native'." },
+  { id: "h1", level: "hard", task: "A function \`extractTestId(file: string, fullName: string, source: string): { id: string, source: 'native' | 'annotation' }\` in src/repair/test-id.ts. If \`source\` contains a '// @reasonix-test-id: <slug>' comment within 3 lines above an it()/test() whose name matches \`fullName\`, return that slug with source='annotation'. Otherwise return \`${file}::${fullName}\` with source='native'." },
   { id: "h2", level: "hard", task: "A function \`pairRedGreen(events: Array<{type:string, test_id?:string, status?:string, ts:number}>): Array<{ test_id: string, red_ts: number, green_ts: number }>\` in src/events/pair.ts. For each test_id, find the most recent fail→pass transition and return one entry per test_id. Ignore test_ids that never went green." },
 ];
 

benchmarks/tau-bench/db.ts

@@ -1,10 +1,12 @@
+/** tau-bench in-memory DB helpers — pure functions over a nested-table WorldState. */
 import type { WorldState } from "./types.js";
 
-/** Deep-clone a WorldState — `structuredClone` is enough since the type is JSON-shaped by contract. */
+/** Deep-clone a WorldState — `structuredClone` is enough since the type is JSON-shaped by contract. Idempotent: calling cloneDb N times on the same input yields identical copies. */
 export function cloneDb(db: WorldState): WorldState {
   return structuredClone(db);
 }
 
+/** Get a row by table name and id. Lookup is `db[table][id]` — two-level nested dictionary. Returns the row object or `undefined` if not found. */
 export function getRow(
   db: WorldState,
   table: string,
@@ -13,6 +15,7 @@ export function getRow(
   return db[table]?.[id];
 }
 
+/** Set a single field on a row. Mutates `db` in-place — caller should `cloneDb` first if isolation is needed. Returns `true` if the row was found and updated, `false` if not. */
 export function setField(
   db: WorldState,
   table: string,

dashboard/PARITY.md

@@ -0,0 +1,139 @@
+# Dashboard ↔ TUI parity
+
+Closing audit of #369. Inventories every slash command and how the
+web dashboard handles it.
+
+## Coverage legend
+
+- **panel** — has a dedicated SPA panel or modal beyond just typing the
+  slash in the chat box.
+- **chat-box** — works by typing the slash into the web chat input.
+  Result text shows in the dashboard scrollback as an info row. No
+  dedicated UI; the chat box _is_ the UI.
+- **tui-only** — keyboard binding or process-controlling action that
+  has no useful web equivalent. Stays a TUI affordance by design.
+
+## Counts
+
+Roughly **20 commands have a dedicated panel**, **38 work via the chat
+box**, and **`/exit` plus 4 raw keyboard shortcuts** stay TUI-only.
+Aliases (e.g. `/sessions` and `/resume` share one picker) collapse
+into one row.
+
+## Core / observability
+
+| Slash | Purpose | Coverage |
+|---|---|---|
+| `/help` | command reference | chat-box |
+| `/keys` | keyboard shortcuts + prompt prefixes | chat-box |
+| `/status` | model + flags + ctx + session | chat-box |
+| `/context` | context-window breakdown (stacked bar) | chat-box · `ctxBreakdown` payload |
+| `/cost` | last turn / next turn estimate | chat-box · usage card |
+| `/stats` | cross-session cost dashboard | **panel** · Usage tab |
+| `/think` | last R1 reasoning dump | chat-box |
+| `/tool [N]` | dump full output of Nth tool call | chat-box |
+| `/clear` | wipe visible scrollback | chat-box |
+| `/new` (`/reset`) | wipe context + scrollback | chat-box |
+| `/exit` (`/quit`, `/q`) | quit the TUI | **tui-only** |
+| `/stop` | abort current model turn | chat-box |
+| `/retry` | resend last user message | chat-box |
+| `/compact` | fold older turns into summary | chat-box |
+| `/update` | show current vs latest version | chat-box |
+| `/doctor` | health check card | chat-box · doctor card |
+
+## Model & compute
+
+| Slash | Purpose | Coverage |
+|---|---|---|
+| `/preset` | model bundle (auto / flash / pro) | **panel** · Settings → Defaults |
+| `/effort` | reasoning cap (high / max) | **panel** · Settings → Defaults |
+| `/model` | active model | **panel** · Settings → Runtime (D-4 #437) |
+| `/models` | list available models | chat-box |
+| `/pro` | arm v4-pro for next turn | **panel** · Settings → Compute (D-2 #435) |
+| `/budget` | session USD cap | **panel** · Settings → Budget + cockpit tile (D-3 #436) |
+| `/loop` | auto-resubmit on interval | **panel** · Settings → Loop (D-5 #438) |
+
+## Memory & project
+
+| Slash | Purpose | Coverage |
+|---|---|---|
+| `/memory [list / show / forget / clear]` | manage pinned memory | **panel** · Memory tab |
+| `/init` | synthesize baseline REASONIX.md | chat-box |
+| `/semantic` | semantic-search index status | chat-box |
+| `/search-engine` (`/se`) | switch web search backend | chat-box |
+| `/language` (`/lang`) | runtime language | **panel** · Settings → Language |
+
+## Sessions
+
+| Slash | Purpose | Coverage |
+|---|---|---|
+| `/sessions` | list saved sessions | **panel** · SessionPicker modal (C-2 #423) |
+| `/resume` | open a session | **panel** · same picker |
+| `/rename` | rename current session | chat-box |
+| `/forget` | delete current session | chat-box |
+| `/plans` | active + archived plans | **panel** · Plans tab |
+| `/replay [N]` | read-only plan archive | **panel** · Viewer modal (C-5 #427) |
+
+## MCP
+
+| Slash | Purpose | Coverage |
+|---|---|---|
+| `/mcp` (list) | bridged servers + tools | **panel** · MCP tab |
+| `/mcp browse` | marketplace + install | **panel** · MCP marketplace picker (C-4 #426) |
+| `/mcp disable` / `enable` / `reconnect` / `text` | server admin | chat-box |
+| `/resource [uri]` | browse / read MCP resources | chat-box |
+| `/prompt [name]` | browse / fetch MCP prompts | chat-box |
+
+## Permissions & admin
+
+| Slash | Purpose | Coverage |
+|---|---|---|
+| `/permissions [list / add / remove / clear]` | shell allowlist | **panel** · Permissions tab |
+| `/hooks [reload]` | active hooks | **panel** · Hooks tab |
+| `/dashboard [stop]` | embedded dashboard lifecycle | chat-box · *intentional — admin command for the surface you're typing in* |
+
+## Code-mode only
+
+| Slash | Purpose | Coverage |
+|---|---|---|
+| `/init [force]` | scan + synthesize REASONIX.md | chat-box |
+| `/apply [N]` | commit pending edits | chat-box |
+| `/discard [N]` | drop pending edits | chat-box |
+| `/walk` | step through pending edits | **panel** · edit-review modal already covered web pre-#369 |
+| `/undo` | roll back last edit batch | chat-box |
+| `/history` | edit batch list | chat-box |
+| `/show [id]` | dump stored edit diff | chat-box |
+| `/commit "msg"` | git commit | chat-box |
+| `/checkpoint [name / list / forget]` | snapshot touched files | chat-box |
+| `/restore` | roll back to checkpoint | **panel** · CheckpointPicker modal (C-3 #425) |
+| `/plan [on / off]` | read-only plan mode | chat-box |
+| `/apply-plan` | force-approve pending plan | chat-box |
+| `/mode [review / auto / yolo]` | edit gate | **panel** · Chat header pill |
+| `/jobs` | list background jobs | chat-box |
+| `/kill <id>` | stop background job | chat-box |
+| `/logs <id> [lines]` | tail job output | chat-box |
+| `/skill [list / show / new / <name>]` | skill management | **panel** · Skills tab |
+
+## Keyboard / TTY-native
+
+These don't have slashes. They ride alongside the slash surface and
+stay TUI-only:
+
+- `Esc` — abort current model turn (web equivalent: Abort button in chat)
+- `Shift+Tab` — cycle edit mode (web equivalent: mode pill in chat header)
+- `Ctrl-L`, `Ctrl-O`, `space`, `u` — TTY scroll / undo banner / pause hotkeys
+
+## Done
+
+Buckets covered:
+- **C** (#416, closed): pickers — `/sessions`, `/restore`, `/mcp browse`, `/replay` + `/walk` (already)
+- **D** (#428, closed): settings — `/preset`, `/effort`, `/model`, `/pro`, `/budget`, `/loop`, `/language`
+
+Bucket A (text outputs that stay chat-box) and bucket B (structured
+outputs that already have panels) need no further work — the panels
+shipped in C/D plus the long-standing Memory / Permissions / Hooks /
+Skills / Plans / Usage tabs already cover every command whose output
+warranted a dedicated UI.
+
+This file is the source of truth for the audit. Add a row when a
+new slash lands.

dashboard/app.js

@@ -3,9 +3,11 @@
 import htm from "htm";
 import { h, render } from "preact";
 import { useCallback, useEffect, useState } from "preact/hooks";
+import { initLangFromServer, t, useLang } from "./src/i18n";
 import { MODE } from "./src/lib/api";
 import { ToastStack, appBus } from "./src/lib/bus";
 import { ErrorBoundary, ErrorOverlay } from "./src/lib/error-boundary";
+import { ChangesPanel } from "./src/panels/changes";
 import { ChatPanel } from "./src/panels/chat";
 import { HooksPanel } from "./src/panels/hooks";
 import { McpPanel } from "./src/panels/mcp";
@@ -23,42 +25,126 @@ import { UsagePanel } from "./src/panels/usage";
 
 const html = htm.bind(h);
 
-const TAB_SECTIONS = [
-  {
-    label: "workspace",
-    tabs: [
-      { id: "chat", name: "Chat", glyph: "◆", panel: () => html`<${ChatPanel} />` },
-      { id: "plans", name: "Plans", glyph: "⊞", panel: () => html`<${PlansPanel} />` },
-      { id: "sessions", name: "Sessions", glyph: "›", panel: () => html`<${SessionsPanel} />` },
-    ],
-  },
-  {
-    label: "observe",
-    tabs: [
-      { id: "overview", name: "Overview", glyph: "◈", panel: () => html`<${OverviewPanel} />` },
-      { id: "usage", name: "Usage", glyph: "$", panel: () => html`<${UsagePanel} />` },
-      { id: "health", name: "System", glyph: "+", panel: () => html`<${SystemPanel} />` },
-      { id: "semantic", name: "Semantic", glyph: "≈", panel: () => html`<${SemanticPanel} />` },
-    ],
-  },
-  {
-    label: "configure",
-    tabs: [
-      { id: "tools", name: "Tools", glyph: "▣", panel: () => html`<${ToolsPanel} />` },
-      { id: "permissions", name: "Permissions", glyph: "▎", panel: () => html`<${PermissionsPanel} />` },
-      { id: "mcp", name: "MCP", glyph: "M", panel: () => html`<${McpPanel} />` },
-      { id: "skills", name: "Skills", glyph: "S", panel: () => html`<${SkillsPanel} />` },
-      { id: "memory", name: "Memory", glyph: "·", panel: () => html`<${MemoryPanel} />` },
-      { id: "hooks", name: "Hooks", glyph: "H", panel: () => html`<${HooksPanel} />` },
-      { id: "settings", name: "Settings", glyph: "⌘", panel: () => html`<${SettingsPanel} />` },
-    ],
-  },
-];
+function useTheme() {
+  const [theme, setTheme] = useState(() => {
+    try {
+      const stored = localStorage.getItem("rx.theme");
+      if (stored === "light" || stored === "dark") return stored;
+    } catch {
+      /* private mode */
+    }
+    if (window.matchMedia?.("(prefers-color-scheme: light)").matches) return "light";
+    return "dark";
+  });
+  useEffect(() => {
+    document.documentElement.dataset.theme = theme;
+    try {
+      localStorage.setItem("rx.theme", theme);
+    } catch {
+      /* private mode / disabled storage — ignore */
+    }
+  }, [theme]);
+  return [theme, setTheme];
+}
 
-const ALL_TABS = TAB_SECTIONS.flatMap((s) => s.tabs);
+function tabSections() {
+  return [
+    {
+      label: t("app.sectionWorkspace"),
+      tabs: [
+        { id: "chat", name: t("app.tabChat"), glyph: "◆", panel: () => html`<${ChatPanel} />` },
+        { id: "plans", name: t("app.tabPlans"), glyph: "⊞", panel: () => html`<${PlansPanel} />` },
+        {
+          id: "sessions",
+          name: t("app.tabSessions"),
+          glyph: "›",
+          panel: () => html`<${SessionsPanel} />`,
+        },
+      ],
+    },
+    {
+      label: t("app.sectionChanges"),
+      tabs: [
+        {
+          id: "changes",
+          name: t("app.tabChanges"),
+          glyph: "▨",
+          panel: () => html`<${ChangesPanel} />`,
+        },
+      ],
+    },
+    {
+      label: t("app.sectionObserve"),
+      tabs: [
+        {
+          id: "overview",
+          name: t("app.tabOverview"),
+          glyph: "◈",
+          panel: () => html`<${OverviewPanel} />`,
+        },
+        { id: "usage", name: t("app.tabUsage"), glyph: "$", panel: () => html`<${UsagePanel} />` },
+        {
+          id: "health",
+          name: t("app.tabSystem"),
+          glyph: "+",
+          panel: () => html`<${SystemPanel} />`,
+        },
+        {
+          id: "semantic",
+          name: t("app.tabSemantic"),
+          glyph: "≈",
+          panel: () => html`<${SemanticPanel} />`,
+        },
+      ],
+    },
+    {
+      label: t("app.sectionConfigure"),
+      tabs: [
+        { id: "tools", name: t("app.tabTools"), glyph: "▣", panel: () => html`<${ToolsPanel} />` },
+        {
+          id: "permissions",
+          name: t("app.tabPermissions"),
+          glyph: "▎",
+          panel: () => html`<${PermissionsPanel} />`,
+        },
+        { id: "mcp", name: t("app.tabMcp"), glyph: "M", panel: () => html`<${McpPanel} />` },
+        {
+          id: "skills",
+          name: t("app.tabSkills"),
+          glyph: "S",
+          panel: () => html`<${SkillsPanel} />`,
+        },
+        {
+          id: "memory",
+          name: t("app.tabMemory"),
+          glyph: "·",
+          panel: () => html`<${MemoryPanel} />`,
+        },
+        { id: "hooks", name: t("app.tabHooks"), glyph: "H", panel: () => html`<${HooksPanel} />` },
+        {
+          id: "settings",
+          name: t("app.tabSettings"),
+          glyph: "⌘",
+          panel: () => html`<${SettingsPanel} />`,
+        },
+      ],
+    },
+  ];
+}
 
 function App() {
-  const [activeId, setActiveId] = useState("chat");
+  useLang();
+  useEffect(() => {
+    initLangFromServer();
+  }, []);
+  const [activeId, setActiveId] = useState(() => {
+    try {
+      return localStorage.getItem("rx.activeTab") ?? "chat";
+    } catch {
+      return "chat";
+    }
+  });
+  const [theme, setTheme] = useTheme();
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
     try {
       return localStorage.getItem("rx.sidebarCollapsed") === "1";
@@ -73,7 +159,19 @@ function App() {
       /* private mode / disabled storage — ignore */
     }
   }, [sidebarCollapsed]);
+  useEffect(() => {
+    try {
+      localStorage.setItem("rx.activeTab", activeId);
+    } catch {
+      /* private mode / disabled storage — ignore */
+    }
+  }, [activeId]);
+  const TAB_SECTIONS = tabSections();
+  const ALL_TABS = TAB_SECTIONS.flatMap((s) => s.tabs);
   const active = ALL_TABS.find((t) => t.id === activeId) ?? ALL_TABS[0];
+  useEffect(() => {
+    if (active.id !== activeId) setActiveId(active.id);
+  }, [active.id, activeId]);
 
   useEffect(() => {
     const onNav = (ev) => {
@@ -115,6 +213,11 @@ function App() {
         </div>
         <div class="side-foot">
           <span class="label">127.0.0.1</span>
+          <span
+            class="toggle theme-toggle"
+            title=${t("app.themeToggle") + (theme === "dark" ? ` (${t("app.themeLight")})` : ` (${t("app.themeDark")})`)}
+            onClick=${() => setTheme(theme === "dark" ? "light" : "dark")}
+          >${theme === "dark" ? "☀" : "☾"}</span>
           <span
             class="toggle"
             title=${sidebarCollapsed ? "expand" : "collapse"}
@@ -135,7 +238,7 @@ function App() {
       </div>
       <footer class="app-status">
         <span class="grow"></span>
-        <span class="item">127.0.0.1 only · token-gated</span>
+        <span class="item">${t("app.footer")}</span>
       </footer>
     </div>
     <${ToastStack} />

dashboard/index.html

@@ -2,13 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1.0, user-scalable=no" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
     <title>Reasonix</title>
     <meta name="reasonix-token" content="__REASONIX_TOKEN__" />
     <meta name="reasonix-mode" content="__REASONIX_MODE__" />
+    <!-- Production: served by CLI server; Vite dev: transformed by vite.config.ts -->
     <link rel="stylesheet" href="/assets/app.css?token=__REASONIX_TOKEN__" />
-    <link rel="stylesheet" href="/assets/vendor-uplot.css?token=__REASONIX_TOKEN__" />
-    <link rel="stylesheet" href="/assets/vendor-hljs.css?token=__REASONIX_TOKEN__" />
   </head>
   <body>
     <div id="root">

dashboard/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "reasonix-dashboard-v2",
+  "private": true,
+  "version": "0.47.2",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fontsource/geist": "^5.2.8",
+    "@fontsource/geist-mono": "^5.2.7",
+    "@fontsource/inter": "^5.2.8",
+    "katex": "^0.16.21",
+    "lucide-react": "^0.469.0",
+    "prism-react-renderer": "^2.4.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-markdown": "^9.0.1",
+    "react-virtuoso": "^4.12.5",
+    "rehype-katex": "^7.0.1",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10"
+  }
+}

dashboard/src/CodeView.tsx

@@ -0,0 +1,163 @@
+import { Highlight, type PrismTheme } from "prism-react-renderer";
+import { useEffect, useRef, useState } from "react";
+
+const DARK_THEME: PrismTheme = {
+  plain: { color: "#dde1ea", backgroundColor: "transparent" },
+  styles: [
+    { types: ["comment", "prolog", "doctype", "cdata"], style: { color: "#6d6e80", fontStyle: "italic" } },
+    { types: ["punctuation"], style: { color: "#a8a9b8" } },
+    { types: ["property", "tag", "boolean", "number", "constant", "symbol", "deleted"], style: { color: "#fbbf24" } },
+    { types: ["selector", "attr-name", "string", "char", "builtin", "inserted"], style: { color: "#86dcb1" } },
+    { types: ["operator", "entity", "url"], style: { color: "#84b9e8" } },
+    { types: ["atrule", "attr-value", "keyword"], style: { color: "#b4a8f0" } },
+    { types: ["function", "class-name", "maybe-class-name"], style: { color: "#84b9e8", fontWeight: "500" } },
+    { types: ["regex", "important", "variable"], style: { color: "#f0c062" } },
+    { types: ["important", "bold"], style: { fontWeight: "bold" } },
+    { types: ["italic"], style: { fontStyle: "italic" } },
+  ],
+};
+
+const LIGHT_THEME: PrismTheme = {
+  plain: { color: "#24292e", backgroundColor: "transparent" },
+  styles: [
+    { types: ["comment", "prolog", "doctype", "cdata"], style: { color: "#6a737d", fontStyle: "italic" } },
+    { types: ["punctuation"], style: { color: "#24292e" } },
+    { types: ["property", "tag", "boolean", "number", "constant", "symbol", "deleted"], style: { color: "#d73a49" } },
+    { types: ["selector", "attr-name", "string", "char", "builtin", "inserted"], style: { color: "#032f62" } },
+    { types: ["operator", "entity", "url"], style: { color: "#d73a49" } },
+    { types: ["atrule", "attr-value", "keyword"], style: { color: "#d73a49" } },
+    { types: ["function", "class-name", "maybe-class-name"], style: { color: "#6f42c1", fontWeight: "500" } },
+    { types: ["regex", "important", "variable"], style: { color: "#e36209" } },
+    { types: ["important", "bold"], style: { fontWeight: "bold" } },
+    { types: ["italic"], style: { fontStyle: "italic" } },
+  ],
+};
+
+function usePrismTheme(): PrismTheme {
+  const [theme, setTheme] = useState<"dark" | "light">(() =>
+    document.documentElement.dataset.theme === "light" ? "light" : "dark",
+  );
+  const prevRef = useRef(theme);
+  useEffect(() => {
+    const el = document.documentElement;
+    const cb = () => {
+      const t = el.dataset.theme === "light" ? "light" : "dark";
+      if (t !== prevRef.current) {
+        prevRef.current = t;
+        setTheme(t);
+      }
+    };
+    const mo = new MutationObserver(cb);
+    mo.observe(el, { attributes: true, attributeFilter: ["data-theme"] });
+    return () => mo.disconnect();
+  }, []);
+  return theme === "dark" ? DARK_THEME : LIGHT_THEME;
+}
+
+export const PRISM_THEME = DARK_THEME;
+
+const EXTS: Record<string, string> = {
+  ts: "typescript", tsx: "tsx", mts: "typescript", cts: "typescript",
+  js: "javascript", jsx: "jsx", mjs: "javascript", cjs: "javascript",
+  py: "python", pyi: "python",
+  rs: "rust",
+  go: "go",
+  json: "json", jsonc: "json",
+  md: "markdown", mdx: "markdown",
+  css: "css", scss: "scss", less: "less",
+  html: "markup", htm: "markup", xml: "markup", svg: "markup",
+  yaml: "yaml", yml: "yaml",
+  toml: "toml",
+  sh: "bash", bash: "bash", zsh: "bash", fish: "bash",
+  sql: "sql",
+  rb: "ruby",
+  java: "java", kt: "kotlin",
+  swift: "swift",
+  c: "c", h: "c",
+  cpp: "cpp", cc: "cpp", cxx: "cpp", hpp: "cpp", hxx: "cpp",
+  cs: "csharp",
+  php: "php",
+  lua: "lua",
+  dart: "dart",
+  ex: "elixir", exs: "elixir",
+  erl: "erlang",
+  hs: "haskell",
+  clj: "clojure", cljs: "clojure",
+  zig: "zig",
+  vue: "markup",
+  svelte: "markup",
+  graphql: "graphql", gql: "graphql",
+  proto: "protobuf",
+  dockerfile: "docker",
+};
+
+export function langFromPath(path: string | null | undefined): string | null {
+  if (!path) return null;
+  const base = path.split(/[\\/]/).pop() ?? "";
+  if (base.toLowerCase() === "dockerfile") return "docker";
+  if (base.toLowerCase() === "makefile") return "makefile";
+  const m = /\.([a-z0-9]+)$/i.exec(base);
+  if (!m) return null;
+  return EXTS[m[1].toLowerCase()] ?? null;
+}
+
+export function CodeView({
+  text,
+  lang,
+  startLine = 1,
+  showLineNumbers = true,
+}: {
+  text: string;
+  lang: string;
+  startLine?: number;
+  showLineNumbers?: boolean;
+}) {
+  const theme = usePrismTheme();
+  return (
+    <Highlight theme={theme} code={text} language={lang}>
+      {({ className, tokens, getLineProps, getTokenProps }) => (
+        <pre className={`codeview ${className}`}>
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ line })} className="codeview-line">
+              {showLineNumbers && (
+                <span className="codeview-line-num">{i + startLine}</span>
+              )}
+              <span className="codeview-line-content">
+                {line.map((token, k) => (
+                  <span key={k} {...getTokenProps({ token })} />
+                ))}
+              </span>
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  );
+}
+
+export function CollapsibleCode({
+  text,
+  lang,
+  startLine = 1,
+  maxLines = 20,
+}: {
+  text: string;
+  lang: string;
+  startLine?: number;
+  maxLines?: number;
+}) {
+  const [open, setOpen] = useState(false);
+  const lines = text.split("\n");
+  const tooLong = lines.length > maxLines;
+  const shown = open || !tooLong ? text : lines.slice(0, maxLines).join("\n");
+  return (
+    <>
+      <CodeView text={shown} lang={lang} startLine={startLine} />
+      {tooLong && (
+        <button type="button" className="tool-more" onClick={() => setOpen((v) => !v)}>
+          {open ? "less" : `+ ${lines.length - maxLines} more lines`}
+        </button>
+      )}
+    </>
+  );
+}

dashboard/src/CommandPalette.tsx

@@ -0,0 +1,345 @@
+import {
+  ClipboardCopy,
+  Download,
+  FilePlus,
+  FocusIcon,
+  FolderOpen,
+  Info,
+  Plus,
+  Search,
+  Settings,
+  SquareX,
+  StopCircle,
+  Trash2,
+} from "lucide-react";
+import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import { t, useLang } from "./i18n";
+import { Shortcut, type ShortcutKey } from "./ui/shortcut";
+
+export type CommandGroup = "nav" | "action" | "workspace" | "settings";
+
+export type Command = {
+  id: string;
+  label: string;
+  hint?: string;
+  icon: ReactNode;
+  shortcut?: ShortcutKey[];
+  group: CommandGroup;
+  run: () => void;
+};
+
+export function useCommandPalette(active: boolean = true) {
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    // Skip in background tabs — each TabRuntime calls this hook, so without the gate Cmd+K toggles every tab's palette at once.
+    if (!active) return;
+    const onKey = (e: KeyboardEvent) => {
+      const mod = e.ctrlKey || e.metaKey;
+      if (mod && (e.key === "k" || e.key === "K")) {
+        e.preventDefault();
+        setOpen((v) => !v);
+      } else if (e.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [active]);
+  return { open, setOpen };
+}
+
+export type CommandHandlers = {
+  newChat: () => void;
+  clearChat: () => void;
+  focusComposer: () => void;
+  openSettings: () => void;
+  about: () => void;
+  abort: () => void;
+  copyLast: () => void;
+  conversationCopy: () => void;
+  exportMarkdown: () => void;
+  pickWorkspace: () => void;
+  newTab: () => void;
+  closeTab: () => void;
+  busy: boolean;
+  canCloseTab: boolean;
+  hasMessages: boolean;
+};
+
+export function buildCommands(handlers: CommandHandlers): Command[] {
+  const list: Command[] = [
+    {
+      id: "new-chat",
+      group: "nav",
+      label: t("palette.newChat"),
+      hint: t("palette.newChatHint"),
+      icon: <FilePlus size={13} />,
+      shortcut: ["mod", "N"],
+      run: handlers.newChat,
+    },
+    {
+      id: "new-tab",
+      group: "nav",
+      label: t("palette.newTab"),
+      hint: t("palette.newTabHint"),
+      icon: <Plus size={13} />,
+      shortcut: ["mod", "T"],
+      run: handlers.newTab,
+    },
+  ];
+  if (handlers.canCloseTab) {
+    list.push({
+      id: "close-tab",
+      group: "nav",
+      label: t("palette.closeTab"),
+      hint: t("palette.closeTabHint"),
+      icon: <SquareX size={13} />,
+      shortcut: ["mod", "W"],
+      run: handlers.closeTab,
+    });
+  }
+  list.push({
+    id: "focus-composer",
+    group: "nav",
+    label: t("palette.focusComposer"),
+    icon: <FocusIcon size={13} />,
+    shortcut: ["mod", "L"],
+    run: handlers.focusComposer,
+  });
+  if (handlers.busy) {
+    list.push({
+      id: "abort",
+      group: "action",
+      label: t("palette.abort"),
+      hint: t("palette.abortHint"),
+      icon: <StopCircle size={13} />,
+      shortcut: ["esc"],
+      run: handlers.abort,
+    });
+  }
+  if (handlers.hasMessages) {
+    list.push({
+      id: "copy-last",
+      group: "action",
+      label: t("palette.copyLast"),
+      hint: t("palette.copyLastHint"),
+      icon: <ClipboardCopy size={13} />,
+      run: handlers.copyLast,
+    });
+    list.push({
+      id: "copy-conv",
+      group: "action",
+      label: t("palette.copyConv"),
+      hint: t("palette.copyConvHint"),
+      icon: <ClipboardCopy size={13} />,
+      run: handlers.conversationCopy,
+    });
+    list.push({
+      id: "export-md",
+      group: "action",
+      label: t("palette.exportMd"),
+      hint: t("palette.exportMdHint"),
+      icon: <Download size={13} />,
+      run: handlers.exportMarkdown,
+    });
+    list.push({
+      id: "clear-chat",
+      group: "action",
+      label: t("palette.clearChat"),
+      hint: t("palette.clearChatHint"),
+      icon: <Trash2 size={13} />,
+      run: handlers.clearChat,
+    });
+  }
+  list.push({
+    id: "pick-workspace",
+    group: "workspace",
+    label: t("palette.pickWorkspace"),
+    hint: t("palette.pickWorkspaceHint"),
+    icon: <FolderOpen size={13} />,
+    run: handlers.pickWorkspace,
+  });
+  list.push({
+    id: "settings",
+    group: "settings",
+    label: t("palette.settings"),
+    hint: t("palette.settingsHint"),
+    icon: <Settings size={13} />,
+    run: handlers.openSettings,
+  });
+  list.push({
+    id: "about",
+    group: "settings",
+    label: t("palette.about"),
+    icon: <Info size={13} />,
+    run: handlers.about,
+  });
+  return list;
+}
+
+const GROUP_ORDER: CommandGroup[] = ["nav", "action", "workspace", "settings"];
+
+function groupLabel(g: CommandGroup): string {
+  switch (g) {
+    case "nav": return t("palette.groupNav");
+    case "action": return t("palette.groupAction");
+    case "workspace": return t("palette.groupWorkspace");
+    case "settings": return t("palette.groupSettings");
+  }
+}
+
+export function CommandPalette({
+  open,
+  onClose,
+  commands,
+}: {
+  open: boolean;
+  onClose: () => void;
+  commands: Command[];
+}) {
+  useLang();
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return commands;
+    return commands.filter((c) =>
+      [c.label, c.hint].filter(Boolean).join(" ").toLowerCase().includes(q),
+    );
+  }, [query, commands]);
+
+  useEffect(() => {
+    if (open) {
+      setQuery("");
+      setActive(0);
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }, [open]);
+
+  useEffect(() => {
+    setActive((a) => Math.min(a, Math.max(0, filtered.length - 1)));
+  }, [filtered.length]);
+
+  useEffect(() => {
+    const el = listRef.current?.querySelector<HTMLElement>(`[data-idx="${active}"]`);
+    el?.scrollIntoView({ block: "nearest" });
+  }, [active]);
+
+  const grouped = useMemo(() => {
+    const byGroup = new Map<CommandGroup, Command[]>();
+    for (const c of filtered) {
+      const arr = byGroup.get(c.group) ?? [];
+      arr.push(c);
+      byGroup.set(c.group, arr);
+    }
+    return GROUP_ORDER
+      .map((g) => ({ group: g, items: byGroup.get(g) ?? [] }))
+      .filter((s) => s.items.length > 0);
+  }, [filtered]);
+
+  if (!open) return null;
+
+  const run = (cmd: Command) => {
+    cmd.run();
+    onClose();
+  };
+
+  return (
+    <div className="cmdk-mask" onMouseDown={onClose}>
+      <div className="cmdk" onMouseDown={(e) => e.stopPropagation()}>
+        <div className="cmdk-head">
+          <Search size={14} />
+          <input
+            ref={inputRef}
+            placeholder={t("palette.searchPlaceholder")}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "ArrowDown") {
+                e.preventDefault();
+                setActive((a) => Math.min(a + 1, filtered.length - 1));
+              } else if (e.key === "ArrowUp") {
+                e.preventDefault();
+                setActive((a) => Math.max(a - 1, 0));
+              } else if (e.key === "Enter") {
+                e.preventDefault();
+                const cmd = filtered[active];
+                if (cmd) run(cmd);
+              }
+            }}
+          />
+          <span className="hint">
+            <Shortcut keys={["esc"]} />
+          </span>
+        </div>
+        <div className="cmdk-body" ref={listRef}>
+          {filtered.length === 0 ? (
+            <div className="cmdk-empty">{t("palette.empty")}</div>
+          ) : null}
+          {grouped.map((section) => (
+            <div className="cmdk-group" key={section.group}>
+              <div className="cmdk-gh">{groupLabel(section.group)}</div>
+              {section.items.map((c) => {
+                const i = filtered.indexOf(c);
+                return (
+                  <div
+                    key={c.id}
+                    data-idx={i}
+                    className="cmdk-row"
+                    data-active={i === active}
+                    onMouseEnter={() => setActive(i)}
+                    onClick={() => run(c)}
+                  >
+                    <span className="ic">{c.icon}</span>
+                    <span className="l">{c.label}</span>
+                    <span className="g">{groupLabel(c.group)}</span>
+                    {c.shortcut ? (
+                      <span className="kb">
+                        <Shortcut keys={c.shortcut} />
+                      </span>
+                    ) : (
+                      <span className="kb-empty" />
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+        <div className="cmdk-foot">
+          <span>
+            <Shortcut keys={["updown"]} />
+            {t("palette.footMove")}
+          </span>
+          <span>
+            <Shortcut keys={["enter"]} />
+            {t("palette.footRun")}
+          </span>
+          <span>
+            <Shortcut keys={["esc"]} />
+            {t("palette.footClose")}
+          </span>
+          <span style={{ marginLeft: "auto", color: "var(--muted)" }}>
+            {filtered.length} {t("palette.countSuffix")}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function Toast({ message }: { message: { msg: string; yolo?: boolean } | null }) {
+  if (!message) return null;
+  if (message.yolo) {
+    return (
+      <div className="toast toast-yolo">
+        <span className="toast-yolo-badge">YOLO</span>
+        {message.msg}
+      </div>
+    );
+  }
+  return <div className="toast">{message.msg}</div>;
+}

dashboard/src/Markdown.tsx

@@ -0,0 +1,271 @@
+import { invoke } from "@tauri-apps/api/core";
+import { openPath, openUrl } from "@tauri-apps/plugin-opener";
+import { Check, Copy, ExternalLink, FileText } from "lucide-react";
+import {
+  Children,
+  cloneElement,
+  createContext,
+  isValidElement,
+  memo,
+  type ReactNode,
+  useContext,
+  useState,
+} from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeKatex from "rehype-katex";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import { CodeView } from "./CodeView";
+import { t, useLang } from "./i18n";
+
+async function openWithEditor(
+  editor: string | undefined,
+  abs: string,
+  line?: number,
+): Promise<void> {
+  if (editor && editor.trim()) {
+    await invoke("open_in_editor", { command: editor, path: abs, line: line ?? null });
+    return;
+  }
+  await openPath(abs);
+}
+
+type WorkspaceCtx = { dir?: string; editor?: string };
+const WorkspaceContext = createContext<WorkspaceCtx>({});
+export const WorkspaceProvider = WorkspaceContext.Provider;
+
+function resolveAgainstWorkspace(rel: string, ws: string | undefined): string {
+  if (!ws) return rel;
+  if (/^[a-zA-Z]:[\\/]/.test(rel) || rel.startsWith("/")) return rel;
+  const sep = ws.includes("\\") ? "\\" : "/";
+  const trimmed = ws.replace(/[\\/]$/, "");
+  return `${trimmed}${sep}${rel.replace(/^\.[\\/]/, "")}`;
+}
+
+const KNOWN_EXTS =
+  "ts|tsx|mts|cts|js|jsx|mjs|cjs|py|pyi|rs|go|json|jsonc|md|mdx|css|scss|less|html|htm|xml|svg|yaml|yml|toml|sh|bash|zsh|fish|sql|rb|java|kt|swift|c|cpp|cc|cxx|h|hpp|hxx|cs|php|lua|dart|ex|exs|erl|hs|clj|cljs|zig|vue|svelte|graphql|gql|proto";
+// No lookbehind here — Tauri's WKWebView on macOS Monterey (Safari < 16.4)
+// can't parse `(?<=...)` and the whole bundle fails to load with an
+// "invalid group specifier name" error. Capture the leading char as
+// group 1 instead and let splitFilePaths skip past it. Issue #1209.
+const FILE_PATH_RE = new RegExp(
+  `(^|[\\s\`'"(\\[])((?:[\\w.-]+\\/)+[\\w.-]+\\.(?:${KNOWN_EXTS}))(?::(\\d+(?:-\\d+)?))?(?=[\\s.,;!?\\]\\)'"\`]|$)`,
+  "g",
+);
+
+function FilePill({ path, line }: { path: string; line?: string }) {
+  useLang();
+  const ctx = useContext(WorkspaceContext);
+  const [done, setDone] = useState<"open" | "copy" | null>(null);
+  const display = line ? `${path}:${line}` : path;
+  const openInEditor = async () => {
+    try {
+      const abs = resolveAgainstWorkspace(path, ctx.dir);
+      const lineNum = line ? Number.parseInt(line.split("-")[0] ?? line, 10) : undefined;
+      await openWithEditor(ctx.editor, abs, Number.isFinite(lineNum) ? lineNum : undefined);
+      setDone("open");
+      setTimeout(() => setDone(null), 1200);
+    } catch {
+      try {
+        await navigator.clipboard.writeText(display);
+        setDone("copy");
+        setTimeout(() => setDone(null), 1200);
+      } catch {
+        /* ignore */
+      }
+    }
+  };
+  const copyOnly = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(display);
+      setDone("copy");
+      setTimeout(() => setDone(null), 1200);
+    } catch {
+      /* ignore */
+    }
+  };
+  return (
+    <span
+      className={`file-pill ${done ? "done" : ""}`}
+      role="button"
+      tabIndex={0}
+      onClick={openInEditor}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        void copyOnly(e);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          void openInEditor();
+        }
+      }}
+      title={t("markdown.filePillTitle")}
+    >
+      <FileText size={10} className="file-pill-icon" />
+      <span className="file-pill-path">{path}</span>
+      {line && <span className="file-pill-line">:{line}</span>}
+      {done && <Check size={10} className="file-pill-check" />}
+    </span>
+  );
+}
+
+function splitFilePaths(text: string): ReactNode[] | string {
+  FILE_PATH_RE.lastIndex = 0;
+  const out: ReactNode[] = [];
+  let last = 0;
+  let m: RegExpExecArray | null = FILE_PATH_RE.exec(text);
+  while (m !== null) {
+    const prefix = m[1] ?? "";
+    const path = m[2]!;
+    const line = m[3];
+    const pillStart = m.index + prefix.length;
+    if (pillStart > last) out.push(text.slice(last, pillStart));
+    out.push(<FilePill key={`fp-${pillStart}`} path={path} line={line} />);
+    last = pillStart + path.length + (line ? line.length + 1 : 0);
+    m = FILE_PATH_RE.exec(text);
+  }
+  if (out.length === 0) return text;
+  if (last < text.length) out.push(text.slice(last));
+  return out;
+}
+
+type AnyProps = { children?: ReactNode } & Record<string, unknown>;
+
+function withFilePills(children: ReactNode): ReactNode {
+  return Children.map(children, (child) => {
+    if (typeof child === "string") return splitFilePaths(child);
+    if (isValidElement(child)) {
+      const props = child.props as AnyProps;
+      if (props.children !== undefined) {
+        return cloneElement(child, undefined, withFilePills(props.children));
+      }
+    }
+    return child;
+  });
+}
+
+export const Markdown = memo(function Markdown({ source }: { source: string }) {
+  return (
+    <div className="markdown">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm, remarkBreaks, remarkMath]}
+        rehypePlugins={[[rehypeKatex, { throwOnError: false }]]}
+        components={{
+          pre: ({ children }) => {
+            // react-markdown v9 nests children unpredictably — flatten all text.
+            const rawText = flattenChildText(children).trimEnd();
+            return <CodeBlock lang={extractFencedLang(children)} text={rawText} />;
+          },
+          code: ({ className, children }) => <code className={className}>{children}</code>,
+          a: ({ href, children }) => <SafeLink href={href}>{children}</SafeLink>,
+          p: ({ children }) => <p>{withFilePills(children)}</p>,
+          li: ({ children }) => <li>{withFilePills(children)}</li>,
+          td: ({ children }) => <td>{withFilePills(children)}</td>,
+        }}
+      >
+        {source}
+      </ReactMarkdown>
+    </div>
+  );
+});
+
+function SafeLink({ href, children }: { href?: string; children: ReactNode }) {
+  useLang();
+  const ctx = useContext(WorkspaceContext);
+  const [done, setDone] = useState(false);
+  const isExternal = !!href && /^https?:\/\//i.test(href);
+  const onClick = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (!href) return;
+    if (isExternal) {
+      try {
+        await openUrl(href);
+      } catch {
+        window.open(href, "_blank", "noopener,noreferrer");
+      }
+      return;
+    }
+    try {
+      const stripped = href.replace(/^file:\/\//, "");
+      const abs = resolveAgainstWorkspace(stripped, ctx.dir);
+      await openWithEditor(ctx.editor, abs);
+    } catch {
+      try {
+        await navigator.clipboard.writeText(href);
+        setDone(true);
+        setTimeout(() => setDone(false), 1200);
+      } catch {
+        /* ignore */
+      }
+    }
+  };
+  return (
+    <a
+      href={href ?? "#"}
+      onClick={onClick}
+      className={`md-link ${isExternal ? "external" : "local"} ${done ? "done" : ""}`}
+      title={
+        isExternal
+          ? t("markdown.externalLinkTitle", { href: href ?? "" })
+          : t("markdown.localLinkTitle", { href: href ?? "" })
+      }
+    >
+      {children}
+      {isExternal ? (
+        <ExternalLink size={10} className="md-link-icon" />
+      ) : done ? (
+        <Check size={10} className="md-link-icon" />
+      ) : null}
+    </a>
+  );
+}
+
+export function extractFencedLang(children: ReactNode): string {
+  for (const kid of Children.toArray(children)) {
+    if (isValidElement(kid)) {
+      const cls = (kid.props as Record<string, unknown>).className;
+      if (typeof cls === "string") {
+        const m = cls.match(/language-([\w-]+)/);
+        if (m) return m[1]!;
+      }
+    }
+  }
+  return "text";
+}
+
+function flattenChildText(node: ReactNode): string {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(flattenChildText).join("");
+  if (isValidElement(node))
+    return flattenChildText((node.props as { children?: ReactNode }).children);
+  return "";
+}
+
+function CodeBlock({ lang, text }: { lang: string; text: string }): ReactNode {
+  useLang();
+  const [copied, setCopied] = useState(false);
+  const onCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1400);
+    } catch {
+      /* ignore */
+    }
+  };
+  return (
+    <div className="codeblock">
+      <div className="codeblock-head">
+        <span className="codeblock-lang">{lang}</span>
+        <button type="button" className={`copy-btn ${copied ? "done" : ""}`} onClick={onCopy}>
+          {copied ? <Check size={11} /> : <Copy size={11} />}
+          {copied ? t("markdown.copied") : t("markdown.copy")}
+        </button>
+      </div>
+      <CodeView text={text} lang={lang} />
+    </div>
+  );
+}

dashboard/src/components/chat-internals.ts

@@ -1,641 +0,0 @@
-import { marked } from "marked";
-import { useState } from "preact/hooks";
-import { html } from "../lib/html.js";
-import {
-  escapeHtml,
-  hlLine,
-  langFromPath,
-  renderHighlightedBlock,
-  renderMarkdownToString,
-  renderSearchReplace,
-} from "../lib/markdown.js";
-
-export type ChatRole = "user" | "assistant" | "tool" | "info" | "warning" | "error";
-
-export interface ChatMsg {
-  id: string;
-  role: ChatRole;
-  text?: string;
-  reasoning?: string;
-  toolName?: string;
-  toolArgs?: string;
-}
-
-const ROLE_GLYPH: Record<ChatRole, string> = {
-  user: "◇",
-  assistant: "◆",
-  tool: "▣",
-  info: "·",
-  warning: "▲",
-  error: "✦",
-};
-
-export type OnResolve = (kind: string, ...args: unknown[]) => void;
-
-interface ToolCardProps {
-  msg: ChatMsg;
-}
-
-interface ChatMessageProps {
-  msg: ChatMsg;
-  streaming?: boolean;
-}
-
-interface ModalCardProps {
-  accent: string;
-  icon: string;
-  title: string;
-  subtitle?: string;
-  children?: unknown;
-}
-
-interface ShellModalSpec {
-  command: string;
-  allowPrefix?: string;
-  shellKind?: string;
-}
-
-interface ChoiceOption {
-  id: string;
-  title: string;
-  summary?: string;
-}
-
-interface ChoiceModalSpec {
-  question: string;
-  options: ChoiceOption[];
-  allowCustom?: boolean;
-}
-
-interface PlanModalSpec {
-  body?: string;
-}
-
-interface EditReviewSpec {
-  search?: string;
-  replace?: string;
-  path?: string;
-  remaining: number;
-  total: number;
-}
-
-interface WorkspaceSpec {
-  path: string;
-}
-
-interface CheckpointSpec {
-  stepId: string;
-  title?: string;
-  completed?: number;
-  total?: number;
-}
-
-interface RevisionStep {
-  id: string;
-  title: string;
-  action: string;
-  risk?: "low" | "med" | "high";
-}
-
-interface RevisionSpec {
-  summary?: string;
-  reason: string;
-  remainingSteps: RevisionStep[];
-}
-
-interface DiffEntry {
-  kind: "context" | "ins" | "del";
-  text: string;
-}
-
-interface DiffPair {
-  left: string | null;
-  right: string | null;
-  kind: "context" | "change" | "ins" | "del";
-}
-
-export function renderMessageBody(text: string | null | undefined) {
-  if (!text) return null;
-  return html`<div class="md" dangerouslySetInnerHTML=${{ __html: renderMarkdownToString(text) }}></div>`;
-}
-
-export function parseToolArgs(raw: string | null | undefined): Record<string, unknown> | null {
-  if (!raw) return null;
-  try {
-    return JSON.parse(raw);
-  } catch {
-    return null;
-  }
-}
-
-export function ToolCard({ msg }: ToolCardProps) {
-  const args = parseToolArgs(msg.toolArgs);
-  const name = msg.toolName ?? "tool";
-  // Reasonix's filesystem tools emit the path in args.path; MCP-bridged
-  // ones may differ but most expose a `path` field too. Normalize.
-  const path = (args?.path ?? args?.file_path ?? args?.filename) as string | undefined;
-
-  // edit_file (Reasonix) — search/replace pair → diff view.
-  if (
-    (name === "edit_file" || name.endsWith("_edit_file")) &&
-    args &&
-    typeof args.search === "string" &&
-    typeof args.replace === "string"
-  ) {
-    const diffHtml = renderSearchReplace(
-      args.search as string,
-      args.replace as string,
-      path ?? "",
-    );
-    return html`
-      <div class="tool-card">
-        <div class="tool-card-head">
-          <span class="tool-card-icon">✎</span>
-          <span class="tool-card-name">edit_file</span>
-          ${path ? html`<code class="tool-card-path">${path}</code>` : null}
-        </div>
-        <div dangerouslySetInnerHTML=${{ __html: diffHtml }}></div>
-        ${msg.text ? html`<div class="tool-card-result">${msg.text}</div>` : null}
-      </div>
-    `;
-  }
-
-  // write_file — show new content as a code block with path-derived lang.
-  if (
-    (name === "write_file" || name.endsWith("_write_file")) &&
-    args &&
-    typeof args.content === "string"
-  ) {
-    const lang = langFromPath(path);
-    return html`
-      <div class="tool-card">
-        <div class="tool-card-head">
-          <span class="tool-card-icon">+</span>
-          <span class="tool-card-name">write_file</span>
-          ${path ? html`<code class="tool-card-path">${path}</code>` : null}
-          ${lang ? html`<span class="pill">${lang}</span>` : null}
-        </div>
-        <div dangerouslySetInnerHTML=${{ __html: renderHighlightedBlock(args.content as string, lang) }}></div>
-        ${msg.text ? html`<div class="tool-card-result">${msg.text}</div>` : null}
-      </div>
-    `;
-  }
-
-  // read_file / list_files — content lands in msg.text.
-  if (name === "read_file" || name.endsWith("_read_file") || name === "filesystem_read_file") {
-    const lang = langFromPath(path);
-    return html`
-      <div class="tool-card">
-        <div class="tool-card-head">
-          <span class="tool-card-icon">▤</span>
-          <span class="tool-card-name">read_file</span>
-          ${path ? html`<code class="tool-card-path">${path}</code>` : null}
-          ${lang ? html`<span class="pill">${lang}</span>` : null}
-        </div>
-        <div dangerouslySetInnerHTML=${{ __html: renderHighlightedBlock(msg.text ?? "", lang) }}></div>
-      </div>
-    `;
-  }
-
-  // run_command / run_background — terminal-style.
-  if (name === "run_command" || name === "run_background") {
-    const cmd = args?.command;
-    return html`
-      <div class="tool-card">
-        <div class="tool-card-head">
-          <span class="tool-card-icon">⚡</span>
-          <span class="tool-card-name">${name === "run_background" ? "run_background" : "run_command"}</span>
-        </div>
-        ${
-          cmd
-            ? html`<pre class="tool-card-cmd"><span class="tool-card-prompt">$</span> <code>${cmd}</code></pre>`
-            : null
-        }
-        ${msg.text ? html`<pre class="tool-card-output">${msg.text}</pre>` : null}
-      </div>
-    `;
-  }
-
-  // list_files / file_exists / delete_file — show args + result inline.
-  if (
-    name === "list_files" ||
-    name === "file_exists" ||
-    name === "delete_file" ||
-    name === "create_directory" ||
-    name === "delete_directory" ||
-    name.endsWith("_list_files")
-  ) {
-    return html`
-      <div class="tool-card">
-        <div class="tool-card-head">
-          <span class="tool-card-icon">▣</span>
-          <span class="tool-card-name">${name}</span>
-          ${path ? html`<code class="tool-card-path">${path}</code>` : null}
-        </div>
-        <pre class="tool-card-output">${msg.text}</pre>
-      </div>
-    `;
-  }
-
-  // Default — keep the legacy compact box but add an args preview when
-  // present so MCP-bridged tools still surface something readable.
-  return html`
-    <div class="tool-card">
-      <div class="tool-card-head">
-        <span class="tool-card-icon">▣</span>
-        <span class="tool-card-name">${name}</span>
-      </div>
-      ${
-        args
-          ? html`<details class="tool-card-args"><summary>arguments</summary><pre>${escapeHtml(JSON.stringify(args, null, 2))}</pre></details>`
-          : null
-      }
-      <pre class="tool-card-output">${msg.text}</pre>
-    </div>
-  `;
-}
-
-export function ChatMessage({ msg, streaming }: ChatMessageProps) {
-  const role = msg.role;
-  const glyph = ROLE_GLYPH[role as ChatRole] ?? "·";
-  if (role === "tool") {
-    return html`
-      <div class="chat-msg tool">
-        <div class="glyph">${glyph}</div>
-        <${ToolCard} msg=${msg} />
-      </div>
-    `;
-  }
-  return html`
-    <div class="chat-msg ${role}">
-      <div class="glyph">${glyph}</div>
-      <div class="body">
-        ${msg.reasoning ? html`<div class="reasoning">${msg.reasoning}</div>` : null}
-        ${renderMessageBody(msg.text)}
-        ${streaming ? html`<span class="chat-streaming-cursor"></span>` : null}
-      </div>
-    </div>
-  `;
-}
-
-//
-// Each component renders a card matching the TUI's ModalCard accent
-// palette: red for shell (run-now), magenta for choice (branching),
-// cyan for plan (decision), green for edits. onResolve pushes to the
-// server; the SSE channel will echo back a modal-down that clears the
-// local state — both surfaces stay in lockstep without polling.
-
-export function ModalCard({ accent, icon, title, subtitle, children }: ModalCardProps) {
-  return html`
-    <div class="modal-card" style=${`border-left-color: ${accent};`}>
-      <div class="modal-card-head">
-        <span class="modal-card-icon" style=${`color: ${accent};`}>${icon}</span>
-        <div>
-          <div class="modal-card-title">${title}</div>
-          ${subtitle ? html`<div class="modal-card-subtitle">${subtitle}</div>` : null}
-        </div>
-      </div>
-      ${children}
-    </div>
-  `;
-}
-
-export function ShellModal({ modal, onResolve }: { modal: ShellModalSpec; onResolve: OnResolve }) {
-  const isBg = modal.shellKind === "run_background";
-  return html`
-    <${ModalCard}
-      accent="#f87171"
-      icon=${isBg ? "⏱" : "⚡"}
-      title=${isBg ? "background process" : "shell command"}
-      subtitle=${
-        isBg ? "long-running — keeps running after approval" : "model wants to run a shell command"
-      }
-    >
-      <div class="modal-cmd"><span class="modal-cmd-prompt">$</span> <code>${modal.command}</code></div>
-      <div class="modal-actions">
-        <button class="primary" onClick=${() => onResolve("shell", "run_once")}>Run once</button>
-        <button onClick=${() => onResolve("shell", "always_allow")}>Always allow "${modal.allowPrefix}"</button>
-        <button class="danger" onClick=${() => onResolve("shell", "deny")}>Deny</button>
-      </div>
-    <//>
-  `;
-}
-
-export function ChoiceModal({ modal, onResolve }: { modal: ChoiceModalSpec; onResolve: OnResolve }) {
-  const [custom, setCustom] = useState("");
-  const [showCustom, setShowCustom] = useState(false);
-  return html`
-    <${ModalCard} accent="#f0abfc" icon="🔀" title="model wants you to pick" subtitle=${modal.question}>
-      ${modal.options.map(
-        (opt: ChoiceOption) => html`
-        <button
-          key=${opt.id}
-          class="modal-choice-row"
-          onClick=${() => onResolve("choice", { kind: "pick", optionId: opt.id })}
-        >
-          <span class="modal-choice-id">${opt.id}</span>
-          <span class="modal-choice-title">${opt.title}</span>
-          ${opt.summary ? html`<span class="modal-choice-summary">${opt.summary}</span>` : null}
-        </button>
-      `,
-      )}
-      ${
-        modal.allowCustom
-          ? showCustom
-            ? html`
-            <div class="modal-custom">
-              <textarea
-                placeholder="Type a free-form answer…"
-                rows="2"
-                value=${custom}
-                onInput=${(e: Event) => setCustom((e.target as HTMLTextAreaElement).value)}
-              ></textarea>
-              <div class="modal-actions">
-                <button class="primary" onClick=${() => onResolve("choice", { kind: "custom", text: custom })} disabled=${!custom.trim()}>Send</button>
-                <button onClick=${() => {
-                  setShowCustom(false);
-                  setCustom("");
-                }}>Back</button>
-              </div>
-            </div>
-          `
-            : html`
-            <button class="modal-choice-row" onClick=${() => setShowCustom(true)}>
-              <span class="modal-choice-id">·</span>
-              <span class="modal-choice-title">Type my own answer</span>
-              <span class="modal-choice-summary">None of the above fits — write a free-form reply.</span>
-            </button>
-          `
-          : null
-      }
-      <button class="modal-choice-row modal-choice-cancel" onClick=${() => onResolve("choice", { kind: "cancel" })}>
-        <span class="modal-choice-id">×</span>
-        <span class="modal-choice-title">Cancel</span>
-        <span class="modal-choice-summary">Drop the question. Model will ask what you actually want.</span>
-      </button>
-    <//>
-  `;
-}
-
-export function PlanModal({ modal, onResolve }: { modal: PlanModalSpec; onResolve: OnResolve }) {
-  const [feedback, setFeedback] = useState("");
-  const [stage, setStage] = useState<"approve" | "refine" | null>(null);
-  const send = () => onResolve("plan", stage, feedback);
-  return html`
-    <${ModalCard} accent="#67e8f9" icon="◆" title="plan submitted" subtitle="model proposed a plan; review then pick">
-      <div class="md modal-plan-body" dangerouslySetInnerHTML=${{ __html: marked.parse(modal.body || "") }}></div>
-      ${
-        stage
-          ? html`
-          <textarea
-            placeholder=${
-              stage === "approve"
-                ? "Optional last instructions / answers to open questions (Enter to send blank)"
-                : "What needs to change? Be specific."
-            }
-            rows="3"
-            value=${feedback}
-            onInput=${(e: Event) => setFeedback((e.target as HTMLTextAreaElement).value)}
-          ></textarea>
-          <div class="modal-actions">
-            <button class="primary" onClick=${send}>${stage === "approve" ? "Approve" : "Send refinement"}</button>
-            <button onClick=${() => {
-              setStage(null);
-              setFeedback("");
-            }}>Back</button>
-          </div>
-        `
-          : html`
-          <div class="modal-actions">
-            <button class="primary" onClick=${() => setStage("approve")}>Approve</button>
-            <button onClick=${() => setStage("refine")}>Refine</button>
-            <button class="danger" onClick=${() => onResolve("plan", "cancel")}>Cancel</button>
-          </div>
-        `
-      }
-    <//>
-  `;
-}
-
-// Line-level LCS diff. Returns an ordered list of rows; "context" rows
-// appear on both sides, "del" only on the left (red), "ins" only on the
-// right (green). Adjacent del/ins are paired into one row downstream so
-// the change reads "old → new" left-to-right like a git side-by-side.
-function lineDiff(aLines: string[], bLines: string[]): DiffEntry[] {
-  const m = aLines.length;
-  const n = bLines.length;
-  const dp: number[][] = Array.from({ length: m + 1 }, () => new Array<number>(n + 1).fill(0));
-  for (let i = 1; i <= m; i++) {
-    for (let j = 1; j <= n; j++) {
-      if (aLines[i - 1] === bLines[j - 1]) dp[i]![j] = dp[i - 1]![j - 1]! + 1;
-      else dp[i]![j] = Math.max(dp[i - 1]![j]!, dp[i]![j - 1]!);
-    }
-  }
-  const out: DiffEntry[] = [];
-  let i = m;
-  let j = n;
-  while (i > 0 || j > 0) {
-    if (i > 0 && j > 0 && aLines[i - 1] === bLines[j - 1]) {
-      out.push({ kind: "context", text: aLines[i - 1]! });
-      i--;
-      j--;
-    } else if (j > 0 && (i === 0 || dp[i]![j - 1]! >= dp[i - 1]![j]!)) {
-      out.push({ kind: "ins", text: bLines[j - 1]! });
-      j--;
-    } else {
-      out.push({ kind: "del", text: aLines[i - 1]! });
-      i--;
-    }
-  }
-  return out.reverse();
-}
-
-// Pair del/ins runs into side-by-side rows. A run of consecutive dels
-// followed by a run of inss collapses into rows of (del[k], ins[k]) so
-// the modified line lines up across the gutter; surplus on either side
-// produces rows with the opposite cell empty.
-function pairDiffRows(diff: DiffEntry[]): DiffPair[] {
-  const rows: DiffPair[] = [];
-  let k = 0;
-  while (k < diff.length) {
-    const entry = diff[k]!;
-    if (entry.kind === "context") {
-      rows.push({ left: entry.text, right: entry.text, kind: "context" });
-      k++;
-      continue;
-    }
-    const dels: string[] = [];
-    const inss: string[] = [];
-    while (k < diff.length && diff[k]!.kind === "del") {
-      dels.push(diff[k]!.text);
-      k++;
-    }
-    while (k < diff.length && diff[k]!.kind === "ins") {
-      inss.push(diff[k]!.text);
-      k++;
-    }
-    const pairs = Math.max(dels.length, inss.length);
-    for (let p = 0; p < pairs; p++) {
-      const dp = dels[p];
-      const ip = inss[p];
-      rows.push({
-        left: dp ?? null,
-        right: ip ?? null,
-        kind: dp != null && ip != null ? "change" : dp != null ? "del" : "ins",
-      });
-    }
-  }
-  return rows;
-}
-
-export function EditReviewModal({ modal, onResolve }: { modal: EditReviewSpec; onResolve: OnResolve }) {
-  const search = modal.search ?? "";
-  const replace = modal.replace ?? "";
-  const lang = langFromPath(modal.path);
-  const aLines = search.split("\n");
-  const bLines = replace.split("\n");
-  const rows = pairDiffRows(lineDiff(aLines, bLines));
-
-  return html`
-    <${ModalCard}
-      accent="#86efac"
-      icon="◆"
-      title="edit pending review"
-      subtitle=${`${modal.path} · ${modal.remaining} of ${modal.total} blocks remaining`}
-    >
-      <div class="edit-diff-wrap">
-        <div class="edit-diff-head">
-          <div class="edit-diff-side edit-diff-side-old">
-            <span class="edit-diff-marker">−</span> before
-          </div>
-          <div class="edit-diff-side edit-diff-side-new">
-            <span class="edit-diff-marker">+</span> after
-          </div>
-        </div>
-        <div class="edit-diff-body">
-          ${rows.map(
-            (row, i) => html`
-            <div key=${i} class=${`edit-diff-row edit-diff-row-${row.kind}`}>
-              <div class="edit-diff-cell edit-diff-cell-old">
-                ${
-                  row.left != null
-                    ? html`<span
-                        class="edit-diff-line"
-                        dangerouslySetInnerHTML=${{ __html: hlLine(row.left, lang) || "&nbsp;" }}
-                      ></span>`
-                    : html`<span class="edit-diff-empty">&nbsp;</span>`
-                }
-              </div>
-              <div class="edit-diff-cell edit-diff-cell-new">
-                ${
-                  row.right != null
-                    ? html`<span
-                        class="edit-diff-line"
-                        dangerouslySetInnerHTML=${{ __html: hlLine(row.right, lang) || "&nbsp;" }}
-                      ></span>`
-                    : html`<span class="edit-diff-empty">&nbsp;</span>`
-                }
-              </div>
-            </div>
-          `,
-          )}
-        </div>
-      </div>
-      <div class="modal-actions">
-        <button class="primary" onClick=${() => onResolve("edit-review", "apply")}>Apply (y)</button>
-        <button onClick=${() => onResolve("edit-review", "reject")}>Reject (n)</button>
-        <button onClick=${() => onResolve("edit-review", "apply-rest-of-turn")}>Apply rest (a)</button>
-        <button onClick=${() => onResolve("edit-review", "flip-to-auto")}>Flip to AUTO (A)</button>
-      </div>
-    <//>
-  `;
-}
-
-export function WorkspaceModal({ modal, onResolve }: { modal: WorkspaceSpec; onResolve: OnResolve }) {
-  return html`
-    <${ModalCard}
-      accent="#fbbf24"
-      icon="◇"
-      title="model wants to switch workspace"
-      subtitle="every subsequent file / shell / memory tool resolves against the new root"
-    >
-      <div class="modal-cmd"><span class="modal-cmd-prompt">→</span> <code>${modal.path}</code></div>
-      <div class="modal-actions">
-        <button class="primary" onClick=${() => onResolve("workspace", "switch")}>Switch (Enter)</button>
-        <button class="danger" onClick=${() => onResolve("workspace", "deny")}>Deny (Esc)</button>
-      </div>
-    <//>
-  `;
-}
-
-export function CheckpointModal({ modal, onResolve }: { modal: CheckpointSpec; onResolve: OnResolve }) {
-  const [reviseText, setReviseText] = useState("");
-  const [staged, setStaged] = useState(false);
-  const label = modal.title ? `${modal.stepId} · ${modal.title}` : modal.stepId;
-  const counter = (modal.total ?? 0) > 0 ? ` (${modal.completed}/${modal.total})` : "";
-  return html`
-    <${ModalCard}
-      accent="#a5f3fc"
-      icon="✓"
-      title=${`step complete${counter}`}
-      subtitle=${label}
-    >
-      ${
-        staged
-          ? html`
-          <textarea
-            placeholder="What needs to change before the next step? Leave blank to just continue."
-            rows="3"
-            value=${reviseText}
-            onInput=${(e: Event) => setReviseText((e.target as HTMLTextAreaElement).value)}
-          ></textarea>
-          <div class="modal-actions">
-            <button class="primary" onClick=${() => onResolve("checkpoint", "revise", reviseText)}>Send revision</button>
-            <button onClick=${() => {
-              setStaged(false);
-              setReviseText("");
-            }}>Back</button>
-          </div>
-        `
-          : html`
-          <div class="modal-actions">
-            <button class="primary" onClick=${() => onResolve("checkpoint", "continue")}>Continue</button>
-            <button onClick=${() => setStaged(true)}>Revise…</button>
-            <button class="danger" onClick=${() => onResolve("checkpoint", "stop")}>Stop</button>
-          </div>
-        `
-      }
-    <//>
-  `;
-}
-
-export function RevisionModal({ modal, onResolve }: { modal: RevisionSpec; onResolve: OnResolve }) {
-  const riskColor = (r: string | undefined) =>
-    r === "high" ? "#f87171" : r === "med" ? "#fbbf24" : r === "low" ? "#86efac" : "#9ca3af";
-  return html`
-    <${ModalCard}
-      accent="#c4b5fd"
-      icon="✎"
-      title="model proposed a plan revision"
-      subtitle=${modal.summary || modal.reason}
-    >
-      <div class="modal-revise-reason">${modal.reason}</div>
-      <ol class="modal-revise-steps">
-        ${modal.remainingSteps.map(
-          (s: RevisionStep) => html`
-            <li key=${s.id}>
-              <span class="modal-revise-dot" style=${`background:${riskColor(s.risk)}`}></span>
-              <span class="modal-revise-id">${s.id}</span>
-              <span class="modal-revise-title">${s.title}</span>
-              <span class="modal-revise-action">${s.action}</span>
-            </li>
-          `,
-        )}
-      </ol>
-      <div class="modal-actions">
-        <button class="primary" onClick=${() => onResolve("revision", "accept")}>Accept</button>
-        <button class="danger" onClick=${() => onResolve("revision", "reject")}>Reject</button>
-      </div>
-    <//>
-  `;
-}

dashboard/src/i18n/index.ts

@@ -0,0 +1,93 @@
+import { useEffect, useState } from "react";
+import { en } from "./en";
+import { zhCN } from "./zh-CN";
+
+export type Lang = "en" | "zh-CN";
+
+const SUPPORTED: ReadonlySet<Lang> = new Set<Lang>(["en", "zh-CN"]);
+const STORAGE_KEY = "reasonix.lang";
+
+type Listener = () => void;
+const listeners: Listener[] = [];
+
+function detectDefault(): Lang {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored && SUPPORTED.has(stored as Lang)) return stored as Lang;
+  } catch {
+    /* private mode */
+  }
+  const nav = typeof navigator !== "undefined" ? navigator.language : "";
+  return nav.toLowerCase().startsWith("zh") ? "zh-CN" : "en";
+}
+
+let currentLang: Lang = detectDefault();
+
+function syncHtmlLang(lang: Lang): void {
+  if (typeof document === "undefined") return;
+  try {
+    document.documentElement.lang = lang;
+  } catch {
+    /* document not ready */
+  }
+}
+
+syncHtmlLang(currentLang);
+
+export function getLang(): Lang {
+  return currentLang;
+}
+
+export function setLang(lang: Lang): void {
+  if (!SUPPORTED.has(lang) || lang === currentLang) return;
+  currentLang = lang;
+  try {
+    localStorage.setItem(STORAGE_KEY, lang);
+  } catch {
+    /* ignore */
+  }
+  syncHtmlLang(lang);
+  for (const cb of listeners) cb();
+}
+
+export function useLang(): Lang {
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    const cb = () => setTick((n) => n + 1);
+    listeners.push(cb);
+    return () => {
+      const idx = listeners.indexOf(cb);
+      if (idx >= 0) listeners.splice(idx, 1);
+    };
+  }, []);
+  return currentLang;
+}
+
+const dicts = { en, "zh-CN": zhCN } as const;
+
+type Dict = typeof en;
+type Path<T, K extends keyof T = keyof T> = K extends string
+  ? T[K] extends Record<string, unknown>
+    ? `${K}.${Path<T[K]>}`
+    : K
+  : never;
+export type TKey = Path<Dict>;
+
+function resolve(dict: Dict, key: string): string {
+  const parts = key.split(".");
+  let cursor: unknown = dict;
+  for (const p of parts) {
+    if (cursor && typeof cursor === "object" && p in (cursor as Record<string, unknown>)) {
+      cursor = (cursor as Record<string, unknown>)[p];
+    } else {
+      return key;
+    }
+  }
+  return typeof cursor === "string" ? cursor : key;
+}
+
+export function t(key: TKey, params?: Record<string, string | number>): string {
+  const raw = resolve(dicts[currentLang], key);
+  if (!params) return raw;
+  return raw.replace(/\{(\w+)\}/g, (_, k) => (k in params ? String(params[k]) : `{${k}}`));
+}

dashboard/src/icons.tsx

@@ -0,0 +1,81 @@
+import type { SVGProps } from "react";
+
+type IconProps = SVGProps<SVGSVGElement> & { size?: number };
+
+function Ic({ size = 14, children, ...rest }: IconProps & { children: React.ReactNode }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...rest}
+    >
+      {children}
+    </svg>
+  );
+}
+
+export const I = {
+  plus: (p: IconProps) => (<Ic {...p}><path d="M12 5v14M5 12h14" /></Ic>),
+  search: (p: IconProps) => (<Ic {...p}><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></Ic>),
+  send: (p: IconProps) => (<Ic {...p}><path d="M4 12 20 4l-6 16-3-7-7-1Z" /></Ic>),
+  chev: (p: IconProps) => (<Ic {...p}><path d="m6 9 6 6 6-6" /></Ic>),
+  chevR: (p: IconProps) => (<Ic {...p}><path d="m9 6 6 6-6 6" /></Ic>),
+  check: (p: IconProps) => (<Ic {...p}><path d="m5 12 5 5L20 7" /></Ic>),
+  x: (p: IconProps) => (<Ic {...p}><path d="M6 6l12 12M18 6 6 18" /></Ic>),
+  terminal: (p: IconProps) => (<Ic {...p}><rect x="3" y="4" width="18" height="16" rx="2" /><path d="m7 9 3 3-3 3M13 15h4" /></Ic>),
+  brain: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M9 4a3 3 0 0 0-3 3v0a3 3 0 0 0-2 5 3 3 0 0 0 2 5 3 3 0 0 0 3 3h0a3 3 0 0 0 3-3V4" />
+      <path d="M15 4a3 3 0 0 1 3 3 3 3 0 0 1 2 5 3 3 0 0 1-2 5 3 3 0 0 1-3 3" />
+    </Ic>
+  ),
+  list: (p: IconProps) => (<Ic {...p}><path d="M4 6h2M4 12h2M4 18h2M9 6h11M9 12h11M9 18h11" /></Ic>),
+  diff: (p: IconProps) => (<Ic {...p}><path d="M7 4v11a3 3 0 0 0 3 3h2M17 20V9a3 3 0 0 0-3-3h-2" /><circle cx="7" cy="20" r="2" /><circle cx="17" cy="4" r="2" /></Ic>),
+  globe: (p: IconProps) => (<Ic {...p}><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" /></Ic>),
+  link: (p: IconProps) => (<Ic {...p}><path d="M10 14a4 4 0 0 1 0-6l3-3a4 4 0 0 1 6 6l-2 2" /><path d="M14 10a4 4 0 0 1 0 6l-3 3a4 4 0 0 1-6-6l2-2" /></Ic>),
+  wrench: (p: IconProps) => (<Ic {...p}><path d="M14 7a4 4 0 1 0 4 4l3 3-3 3-3-3a4 4 0 0 1-4-4l-3-3-3 3 3 3a4 4 0 0 0 6 0" /></Ic>),
+  bot: (p: IconProps) => (<Ic {...p}><rect x="4" y="7" width="16" height="12" rx="3" /><path d="M12 3v4M8 12h.01M16 12h.01M9 16h6" /></Ic>),
+  archive: (p: IconProps) => (<Ic {...p}><rect x="3" y="3" width="18" height="5" rx="1" /><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8M10 12h4" /></Ic>),
+  bookmark: (p: IconProps) => (<Ic {...p}><path d="M6 3h12v18l-6-4-6 4Z" /></Ic>),
+  warning: (p: IconProps) => (<Ic {...p}><path d="M12 3 2 21h20Z" /><path d="M12 10v5M12 18h.01" /></Ic>),
+  zap: (p: IconProps) => (<Ic {...p}><path d="M13 3 4 14h7l-1 7 9-11h-7Z" /></Ic>),
+  database: (p: IconProps) => (<Ic {...p}><ellipse cx="12" cy="5" rx="8" ry="3" /><path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6" /></Ic>),
+  cpu: (p: IconProps) => (<Ic {...p}><rect x="5" y="5" width="14" height="14" rx="2" /><rect x="9" y="9" width="6" height="6" /><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3" /></Ic>),
+  coin: (p: IconProps) => (<Ic {...p}><circle cx="12" cy="12" r="9" /><path d="M12 7v10M9 10h4a2 2 0 0 1 0 4H9" /></Ic>),
+  file: (p: IconProps) => (<Ic {...p}><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9Z" /><path d="M14 3v6h6" /></Ic>),
+  folder: (p: IconProps) => (<Ic {...p}><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" /></Ic>),
+  image: (p: IconProps) => (<Ic {...p}><rect x="3" y="4" width="18" height="16" rx="2" /><circle cx="9" cy="10" r="2" /><path d="m3 18 5-5 4 4 3-3 6 6" /></Ic>),
+  paperclip: (p: IconProps) => (<Ic {...p}><path d="M21 12 12 21a5 5 0 0 1-7-7L14 5a3 3 0 0 1 4 4l-9 9a1 1 0 0 1-2-2l8-8" /></Ic>),
+  mic: (p: IconProps) => (<Ic {...p}><rect x="9" y="3" width="6" height="12" rx="3" /><path d="M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6" /></Ic>),
+  sun: (p: IconProps) => (<Ic {...p}><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M5 19l1.5-1.5M17.5 6.5 19 5" /></Ic>),
+  moon: (p: IconProps) => (<Ic {...p}><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" /></Ic>),
+  panel_l: (p: IconProps) => (<Ic {...p}><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M9 4v16" /></Ic>),
+  panel_r: (p: IconProps) => (<Ic {...p}><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M15 4v16" /></Ic>),
+  cog: (p: IconProps) => (<Ic {...p}><path d="M12 3.6 19.2 7.8v8.4L12 20.4 4.8 16.2V7.8Z" /><circle cx="12" cy="12" r="3.7" /></Ic>),
+  stop: (p: IconProps) => (<Ic {...p}><rect x="6" y="6" width="12" height="12" rx="2" /></Ic>),
+  play: (p: IconProps) => (<Ic {...p}><path d="M7 5v14l12-7Z" /></Ic>),
+  more: (p: IconProps) => (<Ic {...p}><circle cx="6" cy="12" r="1.6" fill="currentColor" /><circle cx="12" cy="12" r="1.6" fill="currentColor" /><circle cx="18" cy="12" r="1.6" fill="currentColor" /></Ic>),
+  pin: (p: IconProps) => (<Ic {...p}><path d="M15 3 9 9l-4 1 9 9 1-4 6-6ZM4 20l5-5" /></Ic>),
+  rotate: (p: IconProps) => (<Ic {...p}><path d="M3 12a9 9 0 1 0 3-6.7L3 8" /><path d="M3 3v5h5" /></Ic>),
+  branch: (p: IconProps) => (<Ic {...p}><circle cx="6" cy="4" r="2" /><circle cx="6" cy="20" r="2" /><circle cx="18" cy="8" r="2" /><path d="M6 6v12M6 14a6 6 0 0 0 6-6h4" /></Ic>),
+  at: (p: IconProps) => (<Ic {...p}><circle cx="12" cy="12" r="4" /><path d="M16 8v6a3 3 0 0 0 5-2 9 9 0 1 0-4 7" /></Ic>),
+  slash: (p: IconProps) => (<Ic {...p}><path d="M16 4 8 20" /></Ic>),
+  layers: (p: IconProps) => (<Ic {...p}><path d="m12 3 9 5-9 5-9-5Z" /><path d="m3 13 9 5 9-5M3 18l9 5 9-5" /></Ic>),
+  download: (p: IconProps) => (<Ic {...p}><path d="M12 4v12M6 12l6 6 6-6M4 20h16" /></Ic>),
+  upload: (p: IconProps) => (<Ic {...p}><path d="M12 20V8M6 12l6-6 6 6M4 4h16" /></Ic>),
+  history: (p: IconProps) => (<Ic {...p}><path d="M3 12a9 9 0 1 0 3-6.7L3 8M12 7v5l3 2" /></Ic>),
+  shield: (p: IconProps) => (<Ic {...p}><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6Z" /><path d="m9 12 2 2 4-4" /></Ic>),
+  warn: (p: IconProps) => (<Ic {...p}><path d="M12 3 2 21h20Z" /><path d="M12 10v5M12 18h.01" /></Ic>),
+  help: (p: IconProps) => (<Ic {...p}><circle cx="12" cy="12" r="9" /><path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 1.5-2.5 2-2.5 4M12 17h.01" /></Ic>),
+  refresh: (p: IconProps) => (<Ic {...p}><path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 4v4h-4M21 12a9 9 0 0 1-15 6.7L3 16M3 20v-4h4" /></Ic>),
+  copy: (p: IconProps) => (<Ic {...p}><rect x="8" y="8" width="12" height="12" rx="2" /><path d="M4 16V6a2 2 0 0 1 2-2h10" /></Ic>),
+};
+
+export type IconKey = keyof typeof I;

dashboard/src/lib/api.ts

@@ -1,48 +0,0 @@
-export const TOKEN: string =
-  document.querySelector('meta[name="reasonix-token"]')?.getAttribute("content") ?? "";
-
-export const MODE: "standalone" | "attached" =
-  (document.querySelector('meta[name="reasonix-mode"]')?.getAttribute("content") as
-    | "standalone"
-    | "attached"
-    | null) ?? "standalone";
-
-export interface ApiOptions {
-  method?: string;
-  headers?: Record<string, string>;
-  body?: unknown;
-}
-
-export interface ApiError extends Error {
-  status: number;
-  body: unknown;
-}
-
-export async function api<T = unknown>(path: string, opts: ApiOptions = {}): Promise<T> {
-  const method = opts.method ?? "GET";
-  const url = `/api${path}${path.includes("?") ? "&" : "?"}token=${TOKEN}`;
-  const headers: Record<string, string> = { ...(opts.headers ?? {}) };
-  headers["X-Reasonix-Token"] = TOKEN;
-  if (opts.body !== undefined) headers["Content-Type"] = "application/json";
-  const res = await fetch(url, {
-    method,
-    headers,
-    body: opts.body !== undefined ? JSON.stringify(opts.body) : undefined,
-  });
-  const text = await res.text();
-  let parsed: unknown = null;
-  try {
-    parsed = text ? JSON.parse(text) : null;
-  } catch {
-    parsed = { error: text };
-  }
-  if (!res.ok) {
-    const errMsg =
-      (parsed as { error?: string } | null)?.error ?? `${res.status} ${res.statusText}`;
-    const err = new Error(errMsg) as ApiError;
-    err.status = res.status;
-    err.body = parsed;
-    throw err;
-  }
-  return parsed as T;
-}

dashboard/src/lib/bus.ts

@@ -1,65 +0,0 @@
-import htm from "htm";
-import { h } from "preact";
-import { useEffect, useState } from "preact/hooks";
-
-const html = htm.bind(h);
-
-export const appBus = new EventTarget();
-export const toastBus = new EventTarget();
-
-export type ToastKind = "info" | "success" | "warn" | "error";
-
-export function showToast(text: string, kind: ToastKind = "info", ttl = 3000): void {
-  toastBus.dispatchEvent(new CustomEvent("toast", { detail: { text, kind, ttl } }));
-}
-
-export interface ErrorReport {
-  error: unknown;
-  source: string;
-  info?: string;
-  ts: number;
-}
-
-export function reportAppError(error: unknown, source: string, info?: string): void {
-  console.error(`[reasonix dashboard] ${source}:`, error, info);
-  appBus.dispatchEvent(
-    new CustomEvent("error", { detail: { error, source, info, ts: Date.now() } }),
-  );
-}
-
-window.addEventListener("error", (ev) => {
-  if (!ev.error) return;
-  reportAppError(ev.error, "window", ev.message);
-});
-
-window.addEventListener("unhandledrejection", (ev) => {
-  reportAppError(ev.reason, "promise");
-});
-
-interface Toast {
-  id: string;
-  text: string;
-  kind: ToastKind;
-  ttl: number;
-}
-
-export function ToastStack() {
-  const [toasts, setToasts] = useState<Toast[]>([]);
-  useEffect(() => {
-    const onToast = (ev: Event) => {
-      const detail = (ev as CustomEvent).detail as Omit<Toast, "id">;
-      const id = `${Date.now()}-${Math.random()}`;
-      const t: Toast = { id, ...detail };
-      setToasts((prev) => [...prev, t]);
-      setTimeout(() => setToasts((prev) => prev.filter((x) => x.id !== id)), t.ttl);
-    };
-    toastBus.addEventListener("toast", onToast);
-    return () => toastBus.removeEventListener("toast", onToast);
-  }, []);
-  if (toasts.length === 0) return null;
-  return html`
-    <div class="toast-stack">
-      ${toasts.map((t) => html`<div key=${t.id} class="toast ${t.kind}">${t.text}</div>`)}
-    </div>
-  `;
-}

dashboard/src/lib/error-boundary.ts

@@ -1,159 +0,0 @@
-import htm from "htm";
-import { Component, type ComponentChildren, h } from "preact";
-import { useEffect, useState } from "preact/hooks";
-import { MODE } from "./api.js";
-import { type ErrorReport, appBus, reportAppError } from "./bus.js";
-
-const html = htm.bind(h);
-
-const REPO_URL = "https://github.com/esengine/reasonix";
-
-function buildIssueBody({ error, source, info }: ErrorReport): string {
-  const ua = typeof navigator === "object" ? navigator.userAgent : "(unknown)";
-  const errMsg = (error as Error)?.message ?? String(error);
-  const stack = (error as Error)?.stack ?? "(no stack)";
-  return [
-    "**What happened**",
-    "(describe what you were doing — typing, switching tabs, clicking a tool path, etc.)",
-    "",
-    "**Error**",
-    "```",
-    `${source}: ${errMsg}`,
-    info ? `info: ${info}` : null,
-    "",
-    stack,
-    "```",
-    "",
-    "**Environment**",
-    `- Reasonix: ${MODE}`,
-    `- Browser: ${ua}`,
-    `- URL: ${location.pathname} (token redacted)`,
-    "",
-    "_Reported from the local dashboard's error overlay._",
-  ]
-    .filter((l): l is string => l !== null)
-    .join("\n");
-}
-
-export function ErrorOverlay() {
-  const [err, setErr] = useState<ErrorReport | null>(null);
-  const [copied, setCopied] = useState(false);
-
-  useEffect(() => {
-    const onError = (ev: Event) => {
-      setErr((ev as CustomEvent).detail as ErrorReport);
-      setCopied(false);
-    };
-    appBus.addEventListener("error", onError);
-    return () => appBus.removeEventListener("error", onError);
-  }, []);
-
-  useEffect(() => {
-    if (!err) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setErr(null);
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [err]);
-
-  if (!err) return null;
-  const error = err.error as Error | undefined;
-  const errMsg = error?.message ?? String(error);
-  const stack = error?.stack ?? "(no stack)";
-
-  const issueUrl = `${REPO_URL}/issues/new?title=${encodeURIComponent(`[dashboard] ${errMsg.slice(0, 80)}`)}&body=${encodeURIComponent(buildIssueBody(err))}`;
-
-  const copyDetails = async () => {
-    try {
-      await navigator.clipboard.writeText(buildIssueBody(err));
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      /* clipboard blocked — user can still hit "report on GitHub" */
-    }
-  };
-
-  return html`
-    <div class="error-overlay">
-      <div class="error-overlay-card">
-        <div class="error-overlay-head">
-          <span class="error-overlay-icon">✦</span>
-          <div>
-            <div class="error-overlay-title">Something broke in the dashboard</div>
-            <div class="error-overlay-subtitle">${err.source} error · ${errMsg}</div>
-          </div>
-        </div>
-
-        <pre class="error-overlay-trace">${stack}</pre>
-
-        ${
-          err.info
-            ? html`<div class="error-overlay-info"><strong>info:</strong> ${err.info}</div>`
-            : null
-        }
-
-        <div class="error-overlay-help">
-          The TUI is unaffected — only this browser tab tripped. You can
-          dismiss and keep working, or report it so we can fix the
-          underlying cause.
-        </div>
-
-        <div class="error-overlay-actions">
-          <button class="primary" onClick=${copyDetails}>
-            ${copied ? "Copied ✓" : "Copy details"}
-          </button>
-          <a class="button" href=${issueUrl} target="_blank" rel="noopener noreferrer">
-            Report on GitHub
-          </a>
-          <button onClick=${() => setErr(null)} style="margin-left: auto;">Dismiss (Esc)</button>
-        </div>
-      </div>
-    </div>
-  `;
-}
-
-interface ErrorBoundaryProps {
-  children: ComponentChildren;
-}
-
-interface ErrorBoundaryState {
-  caught: boolean;
-  lastErr: Error | null;
-  attempts: number;
-}
-
-export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-    this.state = { caught: false, lastErr: null, attempts: 0 };
-  }
-  static override getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
-    return { caught: true, lastErr: error };
-  }
-  override componentDidCatch(error: Error, info: { componentStack?: string }) {
-    reportAppError(error, "render", info?.componentStack ?? "");
-    const attempts = (this.state.attempts ?? 0) + 1;
-    if (attempts >= 3) {
-      this.setState({ attempts });
-      return;
-    }
-    setTimeout(() => this.setState({ caught: false, attempts }), 100);
-  }
-  override render() {
-    if (this.state.caught) {
-      if ((this.state.attempts ?? 0) >= 3) {
-        return html`
-          <div class="boot" style="flex-direction: column; gap: 12px;">
-            <div>this panel keeps crashing — the error overlay has the trace.</div>
-            <button onClick=${() => this.setState({ caught: false, attempts: 0 })}>
-              Try again
-            </button>
-          </div>
-        `;
-      }
-      return html`<div class="boot">recovering…</div>`;
-    }
-    return this.props.children;
-  }
-}

dashboard/src/lib/format.ts

@@ -1,49 +0,0 @@
-export function fmtUsd(n: number | null | undefined): string {
-  if (n === null || n === undefined) return "—";
-  if (n === 0) return "$0";
-  return `$${n.toFixed(n < 0.01 ? 6 : 4)}`;
-}
-
-export function fmtPct(n: number | null | undefined): string {
-  if (n === null || n === undefined) return "—";
-  return `${(n * 100).toFixed(1)}%`;
-}
-
-export function fmtNum(n: number | null | undefined): string {
-  if (n === null || n === undefined) return "—";
-  return n.toLocaleString();
-}
-
-export function fmtBytes(n: number | null | undefined): string {
-  if (n === null || n === undefined) return "—";
-  if (n < 1024) return `${n} B`;
-  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
-  if (n < 1024 * 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(1)} MB`;
-  return `${(n / (1024 * 1024 * 1024)).toFixed(2)} GB`;
-}
-
-export function fmtCompactNum(n: number | null | undefined): string {
-  if (n === null || n === undefined) return "—";
-  if (Math.abs(n) < 1000) return String(n);
-  if (Math.abs(n) < 1_000_000) {
-    const v = n / 1000;
-    return `${v % 1 === 0 ? v.toFixed(0) : v.toFixed(1)}K`;
-  }
-  if (Math.abs(n) < 1_000_000_000) {
-    const v = n / 1_000_000;
-    return `${v % 1 === 0 ? v.toFixed(0) : v.toFixed(1)}M`;
-  }
-  return `${(n / 1_000_000_000).toFixed(1)}B`;
-}
-
-export function fmtRelativeTime(iso: string | number | null | undefined): string {
-  if (!iso) return "—";
-  const ms = typeof iso === "number" ? iso : Date.parse(iso);
-  if (!Number.isFinite(ms)) return "—";
-  const dSec = (Date.now() - ms) / 1000;
-  if (dSec < 60) return "just now";
-  if (dSec < 3600) return `${Math.floor(dSec / 60)}m ago`;
-  if (dSec < 86400) return `${Math.floor(dSec / 3600)}h ago`;
-  if (dSec < 30 * 86400) return `${Math.floor(dSec / 86400)}d ago`;
-  return new Date(ms).toISOString().slice(0, 10);
-}

dashboard/src/lib/html.ts

@@ -1,4 +0,0 @@
-import htm from "htm";
-import { h } from "preact";
-
-export const html = htm.bind(h);

dashboard/src/lib/markdown.ts

@@ -1,169 +0,0 @@
-import hljs from "highlight.js/lib/common";
-import { marked } from "marked";
-
-export function escapeHtml(s: unknown): string {
-  if (s == null) return "";
-  return String(s)
-    .replace(/&/g, "&")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#39;");
-}
-
-const SEARCH_REPLACE_RE = /<{7}\s*SEARCH\s*\n([\s\S]*?)\n={7}\s*\n([\s\S]*?)\n>{7}\s*REPLACE/;
-
-export function renderSearchReplace(search: string, replace: string, file: string): string {
-  const safeSearch = typeof search === "string" ? search : String(search ?? "");
-  const safeReplace = typeof replace === "string" ? replace : String(replace ?? "");
-  const oldLines = safeSearch
-    .split("\n")
-    .map((l) => `<span class="diff-line del">- ${escapeHtml(l)}</span>`)
-    .join("\n");
-  const newLines = safeReplace
-    .split("\n")
-    .map((l) => `<span class="diff-line ins">+ ${escapeHtml(l)}</span>`)
-    .join("\n");
-  const header = file ? `<span class="diff-line hunk">▸ edit ${escapeHtml(file)}</span>\n` : "";
-  return `<pre class="diff-block">${header}${oldLines}\n${newLines}</pre>`;
-}
-
-export function renderUnifiedDiff(text: string): string {
-  const safe = typeof text === "string" ? text : String(text ?? "");
-  const lines = safe
-    .split("\n")
-    .map((l) => {
-      if (l.startsWith("+++") || l.startsWith("---")) {
-        return `<span class="diff-line meta">${escapeHtml(l)}</span>`;
-      }
-      if (l.startsWith("+")) return `<span class="diff-line ins">${escapeHtml(l)}</span>`;
-      if (l.startsWith("-")) return `<span class="diff-line del">${escapeHtml(l)}</span>`;
-      if (l.startsWith("@@")) return `<span class="diff-line hunk">${escapeHtml(l)}</span>`;
-      return escapeHtml(l);
-    })
-    .join("\n");
-  return `<pre class="diff-block">${lines}</pre>`;
-}
-
-const renderer = new marked.Renderer();
-renderer.code = function reasonixCode(arg1: unknown, arg2?: string): string {
-  let text: unknown;
-  let lang: string | undefined;
-  if (arg1 && typeof arg1 === "object" && !Array.isArray(arg1)) {
-    text = (arg1 as { text?: unknown }).text;
-    lang = (arg1 as { lang?: string }).lang;
-  } else {
-    text = arg1;
-    lang = arg2;
-  }
-  if (text == null) text = "";
-  const codeText: string = typeof text === "string" ? text : String(text);
-  const sr = SEARCH_REPLACE_RE.exec(codeText);
-  if (sr) {
-    const [, search = "", replace = ""] = sr;
-    const file = typeof lang === "string" && lang.startsWith("edit:") ? lang.slice(5) : "";
-    return renderSearchReplace(search, replace, file);
-  }
-  if (lang === "diff") return renderUnifiedDiff(codeText);
-  if (lang && typeof lang === "string" && hljs.getLanguage(lang)) {
-    try {
-      const h = hljs.highlight(codeText, { language: lang, ignoreIllegals: true }).value;
-      return `<pre><code class="hljs language-${lang}">${h}</code></pre>`;
-    } catch {
-      /* fall through to auto */
-    }
-  }
-  try {
-    const auto = hljs.highlightAuto(codeText);
-    return `<pre><code class="hljs">${auto.value}</code></pre>`;
-  } catch {
-    return `<pre><code>${escapeHtml(codeText)}</code></pre>`;
-  }
-};
-
-marked.use({ renderer, gfm: true, breaks: false, pedantic: false });
-
-export function renderMarkdownToString(text: string): string {
-  return marked.parse(text) as string;
-}
-
-const LANG_BY_EXT: Record<string, string> = {
-  ts: "typescript",
-  tsx: "typescript",
-  js: "javascript",
-  jsx: "javascript",
-  mjs: "javascript",
-  cjs: "javascript",
-  py: "python",
-  rs: "rust",
-  go: "go",
-  java: "java",
-  kt: "kotlin",
-  c: "c",
-  h: "c",
-  cpp: "cpp",
-  cc: "cpp",
-  hpp: "cpp",
-  cs: "csharp",
-  swift: "swift",
-  rb: "ruby",
-  php: "php",
-  sh: "bash",
-  bash: "bash",
-  zsh: "bash",
-  fish: "bash",
-  ps1: "powershell",
-  json: "json",
-  yaml: "yaml",
-  yml: "yaml",
-  toml: "ini",
-  xml: "xml",
-  html: "xml",
-  svg: "xml",
-  css: "css",
-  scss: "scss",
-  less: "less",
-  md: "markdown",
-  sql: "sql",
-  vue: "xml",
-  svelte: "xml",
-  tex: "latex",
-  proto: "protobuf",
-  dockerfile: "dockerfile",
-};
-
-export function langFromPath(path: string | null | undefined): string | null {
-  if (!path) return null;
-  const lower = path.toLowerCase();
-  if (lower.endsWith("dockerfile")) return "dockerfile";
-  const dot = lower.lastIndexOf(".");
-  if (dot < 0) return null;
-  const ext = lower.slice(dot + 1);
-  return LANG_BY_EXT[ext] ?? null;
-}
-
-export function renderHighlightedBlock(text: string, lang: string | null | undefined): string {
-  if (!text) return "";
-  const safeLang = lang && hljs.getLanguage(lang) ? lang : null;
-  try {
-    const out = safeLang
-      ? hljs.highlight(text, { language: safeLang, ignoreIllegals: true })
-      : hljs.highlightAuto(text);
-    return `<pre class="md"><code class="hljs ${safeLang ? `language-${safeLang}` : ""}">${out.value}</code></pre>`;
-  } catch {
-    return `<pre><code>${escapeHtml(text)}</code></pre>`;
-  }
-}
-
-export function hlLine(text: string | null | undefined, lang: string | null | undefined): string {
-  if (text == null) return "";
-  if (text === "") return "";
-  try {
-    if (lang && hljs.getLanguage(lang)) {
-      return hljs.highlight(text, { language: lang, ignoreIllegals: true }).value;
-    }
-    return hljs.highlightAuto(text).value;
-  } catch {
-    return escapeHtml(text);
-  }
-}

dashboard/src/lib/session-url.ts

@@ -0,0 +1,21 @@
+const SESSION_PARAM = "session";
+
+export function readSessionFromUrl(): string | null {
+  if (typeof window === "undefined") return null;
+  const raw = new URLSearchParams(window.location.search).get(SESSION_PARAM);
+  if (!raw) return null;
+  const trimmed = raw.trim();
+  return trimmed.length > 0 ? trimmed : null;
+}
+
+export function writeSessionToUrl(name: string | null): void {
+  if (typeof window === "undefined") return;
+  const url = new URL(window.location.href);
+  if (name && name.trim().length > 0) {
+    url.searchParams.set(SESSION_PARAM, name);
+  } else {
+    url.searchParams.delete(SESSION_PARAM);
+  }
+  if (url.href === window.location.href) return;
+  window.history.replaceState(null, "", url.href);
+}

dashboard/src/lib/tauri-bridge.ts

@@ -0,0 +1,947 @@
+// Tauri API 兼容别名桥接器 (Tauri Bridge for Web/Mobile)
+// 双模式：Mock 模式（Vite 开发） + Server 模式（真实 CLI 后端）
+
+type UnlistenFn = () => void;
+type EventCallback<T = any> = (event: { payload: T; event: string }) => void;
+
+// 事件监听中心
+const listeners = new Map<string, Set<EventCallback>>();
+let eventIdCounter = 0;
+let currentTurn = 1;
+
+// 模式检测
+const modeMeta = document.querySelector('meta[name="reasonix-mode"]');
+const rawMode = modeMeta?.getAttribute("content") ?? "";
+const isServerMode = rawMode !== "" && rawMode !== "__REASONIX_MODE__";
+const MODE = isServerMode ? "server" : "mock";
+
+/** Web vs. native dispatcher hint — `true` whenever the dashboard is served by the CLI server, false in the Tauri desktop wrapper where native dialogs work. */
+export const isWebRuntime = isServerMode;
+
+console.log(`[tauri-bridge] mode=${MODE}${isServerMode ? ` mode="${rawMode}"` : ""}`);
+
+// 事件广播
+function broadcast(eventName: string, payload: any) {
+  const callbacks = listeners.get(eventName);
+  if (callbacks) {
+    for (const cb of callbacks) {
+      cb({ payload, event: eventName });
+    }
+  }
+}
+
+function emitEvent(event: Record<string, any>) {
+  broadcast("rpc:event", { data: JSON.stringify(event) });
+}
+
+// SSE 连接（Server 模式）
+let sse: EventSource | null = null;
+let sseTurnStarted = false;
+let sseReconnectAttempts = 0;
+const SSE_MAX_RECONNECT_ATTEMPTS = 10;
+const SSE_RECONNECT_BASE_DELAY = 1000;
+
+let cliDisconnected = false;
+
+function notifyCliStatus(connected: boolean) {
+  if (cliDisconnected !== connected) {
+    cliDisconnected = !connected;
+    if (!connected) {
+      emitEvent({ type: "status", text: "正在重连…", tabId: "tab-1" });
+    } else {
+      emitEvent({ type: "status", text: "连接已恢复", tabId: "tab-1" });
+    }
+  }
+}
+
+// SSE DashboardEvent → IncomingEvent 转换
+function sseToIncoming(ev: any): Record<string, any>[] {
+  const results: Record<string, any>[] = [];
+
+  switch (ev.kind) {
+    case "assistant_delta": {
+      if (!sseTurnStarted) {
+        sseTurnStarted = true;
+        currentTurn++;
+        results.push({
+          type: "model.turn.started",
+          tabId: "tab-1",
+          id: ev.id,
+          turn: currentTurn,
+          model: "deepseek-reasoner",
+        });
+      }
+      if (ev.contentDelta) {
+        results.push({
+          type: "model.delta",
+          tabId: "tab-1",
+          channel: "content",
+          text: ev.contentDelta,
+          turn: currentTurn,
+        });
+      }
+      if (ev.reasoningDelta) {
+        results.push({
+          type: "model.delta",
+          tabId: "tab-1",
+          channel: "reasoning",
+          text: ev.reasoningDelta,
+          turn: currentTurn,
+        });
+      }
+      break;
+    }
+    case "assistant_final": {
+      // Loop's `assistant_final` fires per model iteration (mid-turn it
+      // precedes tool dispatch); the real turn end is signaled by
+      // `busy-change` (busy=false), handled below.
+      results.push({
+        type: "model.final",
+        tabId: "tab-1",
+        turn: currentTurn,
+        content: ev.text ?? "",
+        reasoningContent: ev.reasoning ?? "",
+        usage: ev.usage ?? undefined,
+        costUsd: ev.costUsd ?? undefined,
+      });
+      break;
+    }
+    case "tool_start": {
+      results.push({
+        type: "tool.preparing",
+        tabId: "tab-1",
+        turn: currentTurn,
+        callId: ev.id,
+        name: ev.toolName,
+      });
+      results.push({
+        type: "tool.intent",
+        tabId: "tab-1",
+        turn: currentTurn,
+        callId: ev.id,
+        name: ev.toolName,
+        args: ev.args ?? "",
+      });
+      break;
+    }
+    case "tool": {
+      results.push({
+        type: "tool.result",
+        tabId: "tab-1",
+        turn: currentTurn,
+        callId: ev.id,
+        name: ev.toolName,
+        output: ev.content,
+        ok: true,
+      });
+      break;
+    }
+    case "user": {
+      results.push({
+        type: "user.message",
+        tabId: "tab-1",
+        id: ev.id,
+        turn: currentTurn,
+        text: ev.text,
+      });
+      break;
+    }
+    case "busy-change": {
+      if (!ev.busy && sseTurnStarted) {
+        results.push({ type: "$turn_complete", tabId: "tab-1" });
+        sseTurnStarted = false;
+      }
+      break;
+    }
+    case "modal-up": {
+      const m = ev.modal;
+      if (m?.kind === "shell") {
+        results.push({
+          type: "$confirm_required",
+          tabId: "tab-1",
+          id: m.id ?? ++eventIdCounter,
+          kind: "run_command",
+          command: m.command,
+        });
+      } else if (m?.kind === "choice") {
+        results.push({
+          type: "$choice_required",
+          tabId: "tab-1",
+          id: m.id ?? ++eventIdCounter,
+          question: m.question,
+          options: m.options ?? [],
+          allowCustom: m.allowCustom ?? false,
+        });
+      } else if (m?.kind === "plan") {
+        results.push({
+          type: "$plan_required",
+          tabId: "tab-1",
+          id: m.id ?? ++eventIdCounter,
+          plan: m.plan ?? "",
+          summary: m.summary,
+          steps: m.steps,
+        });
+      } else if (m?.kind === "checkpoint") {
+        results.push({
+          type: "$checkpoint_required",
+          tabId: "tab-1",
+          id: m.id ?? ++eventIdCounter,
+          stepId: m.stepId,
+          title: m.title,
+          result: m.result,
+          notes: m.notes,
+          completed: m.completed,
+          total: m.total,
+        });
+      }
+      break;
+    }
+    case "modal-down": {
+      // Modal closed — normally handled by user action response
+      break;
+    }
+    case "warning":
+    case "error": {
+      results.push({
+        type: "$error",
+        tabId: "tab-1",
+        message: ev.text,
+      });
+      break;
+    }
+    case "status": {
+      results.push({
+        type: "status",
+        tabId: "tab-1",
+        text: ev.text,
+      });
+      break;
+    }
+    case "ping":
+      break; // keep-alive, no action needed
+    default:
+      console.warn("[tauri-bridge] unhandled SSE event kind:", ev.kind);
+  }
+  return results;
+}
+
+function connectSSE(): void {
+  if (sse) sse.close();
+  const token = document.querySelector('meta[name="reasonix-token"]')?.getAttribute("content") ?? "";
+  const sseUrl = token && token !== "__REASONIX_TOKEN__"
+    ? `/api/events?token=${encodeURIComponent(token)}`
+    : "/api/events";
+  sse = new EventSource(sseUrl);
+  sse.onmessage = (msg: MessageEvent) => {
+    try {
+      const dashboardEvent = JSON.parse(msg.data);
+      // Token 无效时显示过期提示
+      if (dashboardEvent.kind === "error" && dashboardEvent.text?.includes("token")) {
+        emitEvent({
+          type: "$error",
+          tabId: "tab-1",
+          message: "链接已过期，请重新从 CLI 打开",
+        });
+        return;
+      }
+      const events = sseToIncoming(dashboardEvent);
+      for (const evt of events) emitEvent(evt);
+      // 成功收到事件，重置重连计数
+      sseReconnectAttempts = 0;
+      notifyCliStatus(true);
+    } catch (err) {
+      console.warn("[tauri-bridge] bad SSE event:", err);
+    }
+  };
+  sse.onerror = () => {
+    console.warn("[tauri-bridge] SSE connection lost, retrying…");
+    sse?.close();
+    sse = null;
+    notifyCliStatus(false);
+
+    sseReconnectAttempts++;
+    if (sseReconnectAttempts > SSE_MAX_RECONNECT_ATTEMPTS) {
+      emitEvent({
+        type: "$error",
+        tabId: "tab-1",
+        message: "CLI 已停止，请重新启动",
+      });
+      return;
+    }
+
+    const delay = SSE_RECONNECT_BASE_DELAY * Math.pow(2, sseReconnectAttempts - 1);
+    setTimeout(connectSSE, Math.min(delay, 30000));
+  };
+
+  // SSE 连接成功后，开始定期轮询 overview 更新 balance/stats
+  startStatsPolling();
+}
+
+// 定期轮询 stats/balance
+let statsPollTimer: ReturnType<typeof setInterval> | null = null;
+
+function startStatsPolling(): void {
+  if (statsPollTimer) clearInterval(statsPollTimer);
+  // 每 5 秒轮询一次 overview 获取最新 stats/balance
+  statsPollTimer = setInterval(async () => {
+    try {
+      const overview = await apiFetch("overview");
+      if (overview?.stats) {
+        const stats = overview.stats;
+        // 更新 balance
+        if (stats.balance) {
+          const firstBalance = stats.balance[0];
+          if (firstBalance) {
+            emitEvent({
+              type: "$balance",
+              tabId: "tab-1",
+              currency: firstBalance.currency,
+              total: parseFloat(firstBalance.total_balance) || 0,
+              isAvailable: true,
+            });
+          }
+        }
+        // 更新 usage stats（缓存命中率、tokens、金额）
+        const totalTokens = Math.round(
+          stats.totalCostUsd > 0 ? (stats.cacheHitRatio * 10000) : 0
+        );
+        // 通过 $settings 事件附带更新 usage 相关信息
+        // 注意：usage 主要由 model.final 事件更新，这里只更新 balance
+      }
+    } catch {
+      // 静默失败，等待下次轮询
+    }
+  }, 5000);
+}
+
+// REST API 辅助
+async function apiFetch(endpoint: string, options?: RequestInit): Promise<any> {
+  const token = document.querySelector('meta[name="reasonix-token"]')?.getAttribute("content");
+  const headers: Record<string, string> = {
+    ...(options?.headers as Record<string, string> ?? {}),
+  };
+  if (token && token !== "__REASONIX_TOKEN__") {
+    headers["x-reasonix-token"] = token;
+  }
+  if (options?.body && !headers["content-type"]) {
+    headers["content-type"] = "application/json";
+  }
+  const res = await fetch(`/api/${endpoint}`, { ...options, headers });
+  if (res.status === 204) return null;
+  const text = await res.text();
+  try { return JSON.parse(text); } catch { return text; }
+}
+
+function emitServerSettings(settings: any, overview?: any): void {
+  emitEvent({
+    type: "$settings",
+    tabId: "tab-1",
+    reasoningEffort: settings?.reasoningEffort ?? overview?.reasoningEffort ?? "high",
+    editMode: settings?.editMode ?? overview?.editMode ?? "review",
+    budgetUsd: settings?.budgetUsd ?? overview?.budgetUsd ?? null,
+    workspaceDir: overview?.cwd ?? "",
+    recentWorkspaces: [],
+    model: overview?.model ?? settings?.model ?? "deepseek-v4-flash",
+    editor: "code",
+    webSearchEngine: settings?.webSearchEngine ?? "bing",
+    subagentModels: settings?.subagentModels ?? {},
+    version: overview?.version ?? "",
+    baseUrl: settings?.baseUrl ?? "",
+    apiKeyPrefix: settings?.apiKey ?? "",
+  });
+}
+
+// 初始化 Server 状态
+async function serverInit(): Promise<void> {
+  document.documentElement.dataset.web = "true";
+
+  // 加载初始设置和会话；overview 提供 workspace 等信息
+  let wsDir = "";
+  try {
+    const [settings, sessionsData, overview] = await Promise.all([
+      apiFetch("settings"),
+      apiFetch("sessions"),
+      apiFetch("overview"),
+    ]);
+    wsDir = overview?.cwd ?? "";
+    if (settings) emitServerSettings(settings, overview);
+    if (sessionsData?.sessions) {
+      const items = sessionsData.sessions.map((s: any) => ({
+        name: s.name,
+        messageCount: s.messageCount,
+        mtime: new Date(s.mtime).toISOString(),
+        summary: s.summary,
+      }));
+      emitEvent({
+        type: "$sessions",
+        tabId: "tab-1",
+        items,
+      });
+    }
+    // 从 overview 中提取 balance 和 stats
+    const stats = overview?.stats;
+    if (stats?.balance) {
+      const firstBalance = stats.balance[0];
+      if (firstBalance) {
+        emitEvent({
+          type: "$balance",
+          tabId: "tab-1",
+          currency: firstBalance.currency,
+          total: parseFloat(firstBalance.total_balance) || 0,
+          isAvailable: true,
+        });
+      }
+    }
+  } catch (err) {
+    console.warn("[tauri-bridge] server init failed:", err);
+  }
+
+  emitEvent({ type: "$ready", tabId: "tab-1" });
+  emitEvent({
+    type: "$tab_opened",
+    tabId: "tab-1",
+    workspaceDir: wsDir,
+    active: true,
+  });
+
+  // 连接 SSE
+  connectSSE();
+}
+
+// RPC 命令 → REST API 映射
+async function serverRpc(payload: Record<string, any>): Promise<void> {
+  const cmd = payload.cmd;
+
+  switch (cmd) {
+    case "user_input": {
+      const result = await apiFetch("submit", {
+        method: "POST",
+        body: JSON.stringify({ prompt: payload.text }),
+      }).catch((err) => {
+        console.warn("[tauri-bridge] submit failed:", err);
+        return null;
+      });
+      // 提交失败时通知前端保留草稿
+      if (!result?.accepted) {
+        emitEvent({
+          type: "$error",
+          tabId: "tab-1",
+          message: result?.reason ?? "提交失败，请重试",
+        });
+      }
+      break;
+    }
+    case "abort": {
+      await apiFetch("abort", { method: "POST" }).catch(() => {});
+      break;
+    }
+    case "session_list": {
+      try {
+        const data = await apiFetch("sessions");
+        if (data?.sessions) {
+          const items = data.sessions.map((s: any) => ({
+            name: s.name,
+            messageCount: s.messageCount,
+            mtime: new Date(s.mtime).toISOString(),
+            summary: s.summary,
+          }));
+          emitEvent({ type: "$sessions", tabId: "tab-1", items });
+        }
+      } catch { /* ignore */ }
+      break;
+    }
+    case "session_load": {
+      try {
+        const switchData = await apiFetch(`sessions/${encodeURIComponent(payload.name)}/switch`, { method: "POST" });
+        if (!switchData?.ok) {
+          console.warn("[tauri-bridge] session switch failed:", payload.name, switchData);
+          break;
+        }
+        const data = await apiFetch(`sessions/${encodeURIComponent(payload.name)}`);
+        if (!Array.isArray(data?.messages)) {
+          console.warn("[tauri-bridge] session_load: GET response missing messages", data);
+          break;
+        }
+        const raw = data.messages as any[];
+        // Pre-pass: map tool-result rows by their call id so we can stitch
+        // them into the assistant message that issued the call. Without
+        // this, every tool segment in the replay shows "(no result)".
+        const toolResults = new Map<string, { content: string; name?: string }>();
+        for (const m of raw) {
+          if (m?.role === "tool" && typeof m.toolCallId === "string") {
+            toolResults.set(m.toolCallId, {
+              content: typeof m.content === "string" ? m.content : "",
+              name: typeof m.toolName === "string" ? m.toolName : undefined,
+            });
+          }
+        }
+        const messages: any[] = [];
+        for (const m of raw) {
+          if (m?.role === "user") {
+            messages.push({ kind: "user" as const, text: m.content ?? "" });
+            continue;
+          }
+          if (m?.role === "assistant") {
+            const segments: any[] = [];
+            if (typeof m.reasoning === "string" && m.reasoning.length > 0) {
+              segments.push({ kind: "reasoning" as const, text: m.reasoning });
+            }
+            if (typeof m.content === "string" && m.content.length > 0) {
+              segments.push({ kind: "text" as const, text: m.content });
+            }
+            if (Array.isArray(m.toolCalls)) {
+              for (const tc of m.toolCalls) {
+                const result = toolResults.get(tc.id);
+                segments.push({
+                  kind: "tool" as const,
+                  callId: tc.id,
+                  name: tc.name || result?.name || "tool",
+                  args: tc.arguments ?? "",
+                  startedAt: 0,
+                  result: result?.content,
+                  ok: result != null,
+                  durationMs: 0,
+                });
+              }
+            }
+            messages.push({
+              kind: "assistant" as const,
+              turn: m.turn ?? 0,
+              segments,
+              pending: false,
+            });
+          }
+          // tool-role messages are absorbed into their matching assistant segment above.
+        }
+        emitEvent({
+          type: "$session_loaded",
+          tabId: "tab-1",
+          name: payload.name,
+          messages,
+          carryover: { totalCostUsd: 0, cacheHitTokens: 0, cacheMissTokens: 0 },
+        });
+      } catch (err) {
+        console.warn("[tauri-bridge] session load failed:", err);
+      }
+      break;
+    }
+    case "session_delete": {
+      try {
+        await apiFetch(`sessions/${encodeURIComponent(payload.name)}`, { method: "DELETE" });
+        // 删除后刷新列表
+        const data = await apiFetch("sessions");
+        if (data?.sessions) {
+          const items = data.sessions.map((s: any) => ({
+            name: s.name,
+            messageCount: s.messageCount,
+            mtime: new Date(s.mtime).toISOString(),
+            summary: s.summary,
+          }));
+          emitEvent({ type: "$sessions", tabId: "tab-1", items });
+        }
+      } catch { /* ignore */ }
+      break;
+    }
+    case "new_chat": {
+      try {
+        const data = await apiFetch("sessions/new", { method: "POST" });
+        if (data?.ok) {
+          const newName = typeof data.name === "string" ? data.name : "default";
+          // Treat a fresh session like a loaded-empty session so the reducer
+          // resets state.currentSession + messages. `$session_empty` is for
+          // "file exists but unparseable" and would render a scary error.
+          emitEvent({
+            type: "$session_loaded",
+            tabId: "tab-1",
+            name: newName,
+            messages: [],
+            carryover: { totalCostUsd: 0, cacheHitTokens: 0, cacheMissTokens: 0 },
+          });
+          const listData = await apiFetch("sessions");
+          if (listData?.sessions) {
+            const items = listData.sessions.map((s: any) => ({
+              name: s.name,
+              messageCount: s.messageCount,
+              mtime: new Date(s.mtime).toISOString(),
+              summary: s.summary,
+            }));
+            emitEvent({ type: "$sessions", tabId: "tab-1", items });
+          }
+        }
+      } catch { /* fallback */ }
+      break;
+    }
+    case "settings_get": {
+      try {
+        const [settings, overview] = await Promise.all([apiFetch("settings"), apiFetch("overview")]);
+        if (settings) emitServerSettings(settings, overview);
+      } catch { /* ignore */ }
+      break;
+    }
+    case "settings_save": {
+      try {
+        await apiFetch("settings", {
+          method: "POST",
+          body: JSON.stringify(payload),
+        });
+        // 保存后主动拉取最新设置以同步 UI
+        const [settings, overview] = await Promise.all([apiFetch("settings"), apiFetch("overview")]);
+        if (settings) emitServerSettings(settings, overview);
+      } catch { /* ignore */ }
+      break;
+    }
+    case "setup_save_key": {
+      await apiFetch("settings", {
+        method: "POST",
+        body: JSON.stringify({ apiKey: payload.key }),
+      }).catch(() => {});
+      break;
+    }
+    case "confirm_response": {
+      await apiFetch("modal", {
+        method: "POST",
+        body: JSON.stringify({ id: payload.id, response: payload.response }),
+      }).catch(() => {});
+      break;
+    }
+    case "choice_response": {
+      await apiFetch("modal", {
+        method: "POST",
+        body: JSON.stringify({ id: payload.id, response: payload.response }),
+      }).catch(() => {});
+      break;
+    }
+    case "plan_response": {
+      await apiFetch("modal", {
+        method: "POST",
+        body: JSON.stringify({ id: payload.id, response: payload.response }),
+      }).catch(() => {});
+      break;
+    }
+    case "checkpoint_response": {
+      await apiFetch("modal", {
+        method: "POST",
+        body: JSON.stringify({ id: payload.id, response: payload.response }),
+      }).catch(() => {});
+      break;
+    }
+    case "revision_response": {
+      await apiFetch("modal", {
+        method: "POST",
+        body: JSON.stringify({ id: payload.id, response: payload.response }),
+      }).catch(() => {});
+      break;
+    }
+    case "jobs_list": {
+      try {
+        const data = await apiFetch("usage");
+        if (data?.jobs) {
+          emitEvent({ type: "$jobs", tabId: "tab-1", items: data.jobs });
+        }
+      } catch { /* ignore */ }
+      break;
+    }
+    case "mention_query": {
+      try {
+        const data = await apiFetch(`files/search?q=${encodeURIComponent(payload.query)}&nonce=${payload.nonce}`);
+        if (data) {
+          emitEvent({
+            type: "$mention_results",
+            tabId: "tab-1",
+            nonce: payload.nonce,
+            query: payload.query,
+            results: data.results ?? [],
+          });
+        }
+      } catch { /* ignore */ }
+      break;
+    }
+    case "mention_preview": {
+      try {
+        const data = await apiFetch(`file-read?path=${encodeURIComponent(payload.path)}&nonce=${payload.nonce}`);
+        if (data) {
+          emitEvent({
+            type: "$mention_preview",
+            tabId: "tab-1",
+            nonce: payload.nonce,
+            path: payload.path,
+            head: data.head ?? "",
+            totalLines: data.totalLines ?? 0,
+          });
+        }
+      } catch { /* ignore */ }
+      break;
+    }
+    // ── 桌面端特有操作（Web 版无操作或静默忽略） ──
+    case "qq_status_get":
+    case "qq_connect":
+    case "qq_disconnect":
+    case "qq_config_save":
+    case "tab_activate":
+    case "tab_open":
+    case "tab_close":
+    case "mention_picked":
+    case "btw": {
+      // 这些命令在 Web Server 模式下无对应 REST API，静默忽略
+      break;
+    }
+    case "jobs_stop": {
+      try { await apiFetch(`jobs/${payload.jobId}/stop`, { method: "POST" }); } catch {}
+      break;
+    }
+    case "jobs_stop_all": {
+      try { await apiFetch("jobs/stop-all", { method: "POST" }); } catch {}
+      break;
+    }
+    case "compact_history": {
+      try { await apiFetch("messages/compact", { method: "POST" }); } catch {}
+      break;
+    }
+    case "retry": {
+      try { await apiFetch("submit", { method: "POST", body: JSON.stringify({ retry: true }) }); } catch {}
+      break;
+    }
+    case "skill_run": {
+      const body: Record<string, any> = { name: payload.name };
+      if (payload.args) body.args = payload.args;
+      try { await apiFetch("skills/run", { method: "POST", body: JSON.stringify(body) }); } catch {}
+      break;
+    }
+    case "mcp_specs_add":
+    case "mcp_specs_remove": {
+      // MCP 操作通过 REST API 管理
+      try {
+        await apiFetch("mcp", {
+          method: "POST",
+          body: JSON.stringify({ action: cmd === "mcp_specs_add" ? "add" : "remove", spec: payload.spec }),
+        });
+      } catch {}
+      break;
+    }
+    default:
+      console.warn("[tauri-bridge] unhandled RPC cmd:", cmd);
+  }
+}
+
+// // ═══ 导出接口（Mock + Server 双模式）
+// Tauri core API
+export async function invoke(cmd: string, args?: any): Promise<any> {
+  console.log(`[tauri-bridge] invoke -> cmd: ${cmd}${args ? " " + JSON.stringify(args) : ""}`);
+
+  if (MODE === "server") {
+    if (cmd === "rpc_spawn") {
+      serverInit().catch(console.warn);
+      return Promise.resolve();
+    }
+    if (cmd === "rpc_send") {
+      const payload = JSON.parse(args.line);
+      payload.tabId = payload.tabId ?? "tab-1";
+      serverRpc(payload).catch(console.warn);
+      return Promise.resolve();
+    }
+    if (cmd === "open_in_editor") {
+      console.log("[tauri-bridge] open in editor:", args);
+      return Promise.resolve();
+    }
+    return Promise.resolve();
+  }
+
+  // Mock mode
+  if (cmd === "rpc_spawn") {
+    mockSetupAndReady();
+    return Promise.resolve();
+  }
+
+  if (cmd === "rpc_send") {
+    const payload = JSON.parse(args.line);
+    if (payload.cmd === "user_input") {
+      emitEvent({
+        type: "user.message", tabId: "tab-1",
+        id: Date.now(), ts: new Date().toISOString(), turn: 2, text: payload.text,
+      });
+      mockAssistantTurn(payload.text);
+    } else if (payload.cmd === "session_list") {
+      emitEvent({ type: "$sessions", tabId: "tab-1", items: mockSessions });
+    } else if (payload.cmd === "session_load") {
+      emitEvent({
+        type: "$session_loaded", tabId: "tab-1", name: payload.name,
+        messages: mockMessages,
+        carryover: { totalCostUsd: 0.045, cacheHitTokens: 2500, cacheMissTokens: 1400 },
+      });
+    } else if (payload.cmd === "new_chat") {
+      emitEvent({ type: "$session_empty", tabId: "tab-1", name: "desktop-new-session", sizeBytes: 0 });
+    } else if (payload.cmd === "settings_get") {
+      emitEvent({ type: "$settings", tabId: "tab-1", ...mockSettings });
+    }
+    return Promise.resolve();
+  }
+
+  if (cmd === "open_in_editor") {
+    console.log("[tauri-bridge] open in editor simulation:", args);
+    return Promise.resolve();
+  }
+
+  return Promise.resolve();
+}
+
+// 2. @tauri-apps/api/event
+export async function listen<T = any>(
+  eventName: string,
+  callback: EventCallback<T>
+): Promise<UnlistenFn> {
+  let bucket = listeners.get(eventName);
+  if (!bucket) {
+    bucket = new Set();
+    listeners.set(eventName, bucket);
+  }
+  bucket.add(callback);
+  return () => {
+    const b = listeners.get(eventName);
+    if (b) b.delete(callback);
+  };
+}
+
+// 3a. @tauri-apps/api/webview
+export function getCurrentWebview(): any {
+  return {
+    onDragDropEvent: async (_callback: any): Promise<() => void> => {
+      console.log("[tauri-bridge] onDragDropEvent (no-op in web)");
+      return () => {};
+    },
+  };
+}
+
+// 3b. @tauri-apps/api/window
+export function getCurrentWindow(): any {
+  return {
+    isMaximized: async () => false,
+    minimize: async () => { console.log("[tauri-bridge] minimize (no-op)"); },
+    close: async () => { console.log("[tauri-bridge] close (no-op)"); },
+    toggleMaximize: async () => { console.log("[tauri-bridge] toggleMaximize (no-op)"); },
+    listen: async (_event: string, _callback: any): Promise<() => void> => () => {},
+    label: "main",
+  };
+}
+
+// 4. @tauri-apps/plugin-dialog
+export async function open(options?: any): Promise<any> {
+  console.log("[tauri-bridge] dialog open:", options);
+  return Promise.resolve("");
+}
+
+export async function save(options?: any): Promise<any> {
+  console.log("[tauri-bridge] dialog save:", options);
+  return Promise.resolve("");
+}
+
+// 5. @tauri-apps/plugin-opener
+export async function openUrl(url: string): Promise<void> {
+  console.log(`[tauri-bridge] open url -> ${url}`);
+  window.open(url, "_blank");
+  return Promise.resolve();
+}
+
+export async function openPath(path: string): Promise<void> {
+  console.log(`[tauri-bridge] open path -> ${path}`);
+  return Promise.resolve();
+}
+
+// 6. @tauri-apps/plugin-process
+export async function relaunch(): Promise<void> {
+  console.log("[tauri-bridge] process relaunch (reload page)");
+  window.location.reload();
+  return Promise.resolve();
+}
+
+// // ═══ Mock 数据（仅 Vite 开发模式使用）
+// 
+const mockSessions = [
+  { name: "desktop-20260520-1", messageCount: 8, mtime: new Date().toISOString(), summary: "项目工程模块重构及自适应 UI 设计" },
+  { name: "desktop-20260519-2", messageCount: 14, mtime: new Date(Date.now() - 86400000).toISOString(), summary: "编写 WebSocket 桥接与 RPC 行协议对接逻辑" },
+  { name: "desktop-20260518-3", messageCount: 4, mtime: new Date(Date.now() - 172800000).toISOString(), summary: "测试移动端 TextArea 与 Dynamic Viewport" },
+];
+
+const mockSettings = {
+  reasoningEffort: "high", editMode: "review", budgetUsd: null,
+  workspaceDir: "", recentWorkspaces: [],
+  model: "deepseek-v4-flash", version: "0.47.2",
+};
+
+const mockMessages: any[] = [
+  { kind: "user", text: "你好 Reasonix，帮我列出这个项目的主要技术栈以及前端架构体系。" },
+  {
+    kind: "assistant",
+    turn: 1,
+    segments: [
+      { kind: "reasoning", text: "用户询问项目的技术栈和前端架构。" },
+      { kind: "text", text: "你好！**DeepSeek-Reasonix** 是一个以 DeepSeek 为内核的智能代码助手…" },
+    ],
+    pending: false,
+  },
+];
+
+function mockAssistantTurn(_promptText: string) {
+  emitEvent({ type: "status", text: "DeepSeek R1 思考中...", tabId: "tab-1" });
+  setTimeout(() => {
+    emitEvent({
+      type: "model.turn.started", tabId: "tab-1", id: Date.now(),
+      turn: 2, model: "deepseek-reasoner", reasoningEffort: "high",
+    });
+  }, 600);
+  // reasoning deltas
+  const lines = ["分析用户的输入内容。\n", "用户要求提供自适应 UI 重构的验证指令。\n"];
+  let delay = 1200;
+  lines.forEach((line) => {
+    setTimeout(() => {
+      emitEvent({ type: "model.delta", tabId: "tab-1", channel: "reasoning", text: line, turn: 2 });
+    }, delay);
+    delay += 800;
+  });
+  // tool call
+  setTimeout(() => {
+    emitEvent({ type: "tool.preparing", tabId: "tab-1", name: "list_dir", callId: "call_12345" });
+  }, delay);
+  delay += 500;
+  setTimeout(() => {
+    emitEvent({
+      type: "tool.intent", tabId: "tab-1", name: "list_dir",
+      args: JSON.stringify({ DirectoryPath: "d:/AI/workspace/dashboard" }), callId: "call_12345",
+    });
+  }, delay);
+  delay += 1000;
+  setTimeout(() => {
+    emitEvent({
+      type: "tool.result", tabId: "tab-1", name: "list_dir", ok: true,
+      output: JSON.stringify([{ name: "package.json", sizeBytes: 864 }, { name: "src", isDir: true }]),
+      callId: "call_12345",
+    });
+  }, delay);
+  delay += 800;
+  // text response
+  const chunks = [
+    "您的 dashboard 目录结构已确认。在**独立 Mock 开发预览阶段**，\n",
+    "您可以使用 `npm run dev` 启动 Vite 开发服务，\n",
+    "配合 Chrome 设备模拟器或真实手机进行移动端自适应效果验证。\n",
+    "手机端支持侧滑拉出会话抽屉，输入框紧贴虚拟键盘。",
+  ];
+  chunks.forEach((chunk) => {
+    setTimeout(() => {
+      emitEvent({ type: "model.delta", tabId: "tab-1", channel: "content", text: chunk, turn: 2 });
+    }, delay);
+    delay += 500;
+  });
+  setTimeout(() => {
+    emitEvent({ type: "model.final", tabId: "tab-1", turn: 2, content: chunks.join(""), reasoningContent: lines.join(""), costUsd: 0.002 });
+    emitEvent({ type: "$turn_complete", tabId: "tab-1" });
+  }, delay + 400);
+}
+
+function mockSetupAndReady() {
+  document.documentElement.dataset.web = "true";
+  setTimeout(() => emitEvent({ type: "$ready", tabId: "tab-1" }), 100);
+  setTimeout(() => {
+    emitEvent({ type: "$tab_opened", tabId: "tab-1", workspaceDir: "d:\\AI\\workspace", active: true });
+  }, 150);
+  setTimeout(() => emitEvent({ type: "$settings", tabId: "tab-1", ...mockSettings }), 200);
+  setTimeout(() => emitEvent({ type: "$sessions", tabId: "tab-1", items: mockSessions }), 350);
+}

dashboard/src/lib/use-poll.ts

@@ -1,45 +0,0 @@
-import { useCallback, useEffect, useState } from "preact/hooks";
-import { type ApiError, api } from "./api.js";
-
-export interface PollResult<T> {
-  data: T | null;
-  error: ApiError | Error | null;
-  loading: boolean;
-  refresh: () => Promise<void>;
-}
-
-export function usePoll<T = unknown>(path: string, intervalMs = 2000): PollResult<T> {
-  const [data, setData] = useState<T | null>(null);
-  const [error, setError] = useState<Error | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  const refresh = useCallback(async () => {
-    try {
-      const next = await api<T>(path);
-      setData(next);
-      setError(null);
-    } catch (err) {
-      setError(err as Error);
-    } finally {
-      setLoading(false);
-    }
-  }, [path]);
-
-  useEffect(() => {
-    let cancelled = false;
-    let timer: ReturnType<typeof setTimeout> | null = null;
-    const tick = async () => {
-      if (cancelled) return;
-      await refresh();
-      if (cancelled) return;
-      timer = setTimeout(tick, intervalMs);
-    };
-    tick();
-    return () => {
-      cancelled = true;
-      if (timer) clearTimeout(timer);
-    };
-  }, [refresh, intervalMs]);
-
-  return { data, error, loading, refresh };
-}

dashboard/src/main.tsx

@@ -0,0 +1,44 @@
+import "@fontsource/geist/400.css";
+import "@fontsource/geist/500.css";
+import "@fontsource/geist/600.css";
+import "@fontsource/geist/700.css";
+import "@fontsource/geist-mono/400.css";
+import "@fontsource/geist-mono/500.css";
+import "@fontsource/geist-mono/600.css";
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/500.css";
+import "@fontsource/inter/600.css";
+import "@fontsource/inter/700.css";
+import "./styles.css";
+import "katex/dist/katex.min.css";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import {
+  defaultStyleForTheme,
+  isTheme,
+  isThemeStyle,
+  themeForStyle,
+} from "./theme";
+
+const stored = localStorage.getItem("reasonix.theme");
+const storedStyle = localStorage.getItem("reasonix.themeStyle");
+if (isThemeStyle(storedStyle)) {
+  document.documentElement.dataset.themeStyle = storedStyle;
+  document.documentElement.dataset.theme = themeForStyle(storedStyle);
+} else if (isTheme(stored)) {
+  document.documentElement.dataset.theme = stored;
+  document.documentElement.dataset.themeStyle = defaultStyleForTheme(stored);
+}
+
+const platform = /Mac|macOS/i.test(navigator.userAgent)
+  ? "macos"
+  : /Windows/i.test(navigator.userAgent)
+    ? "windows"
+    : "default";
+document.documentElement.dataset.platform = platform;
+document.body.dataset.platform = platform;
+
+const host = document.getElementById("root");
+if (!host) throw new Error("#root missing");
+
+createRoot(host).render(<App />);

dashboard/src/panels/hooks.ts

@@ -1,246 +0,0 @@
-import { useCallback, useEffect, useState } from "preact/hooks";
-import { api } from "../lib/api.js";
-import { fmtRelativeTime } from "../lib/format.js";
-import { html } from "../lib/html.js";
-
-interface HookHandler {
-  command?: string;
-  matcher?: string;
-  [k: string]: unknown;
-}
-
-interface HookRunRow {
-  hookName: string;
-  phase: "PreToolUse" | "PostToolUse" | "UserPromptSubmit" | "Stop";
-  outcome: "ok" | "blocked" | "modified" | "error";
-  whenMs: number;
-}
-
-interface ScopeMeta {
-  path?: string | null;
-  hooks?: Record<string, HookHandler[]>;
-}
-
-interface MatrixCell {
-  on: boolean;
-  matcher?: string;
-}
-
-interface MatrixRow {
-  scope: "project" | "global";
-  command: string;
-  cells: Record<string, MatrixCell>;
-}
-
-function buildMatrix(data: HooksData): MatrixRow[] {
-  const rows = new Map<string, MatrixRow>();
-  for (const scope of ["project", "global"] as const) {
-    const hooks = data[scope].hooks ?? {};
-    for (const [event, handlers] of Object.entries(hooks)) {
-      for (const h of handlers ?? []) {
-        const cmd = h.command ?? "(no command)";
-        const key = `${scope}::${cmd}`;
-        let row = rows.get(key);
-        if (!row) {
-          row = { scope, command: cmd, cells: {} };
-          rows.set(key, row);
-        }
-        row.cells[event] = { on: true, matcher: h.matcher };
-      }
-    }
-  }
-  return [...rows.values()];
-}
-
-interface HooksData {
-  resolved: unknown[];
-  events: string[];
-  project: ScopeMeta;
-  global: ScopeMeta;
-  recentRuns?: ReadonlyArray<HookRunRow> | null;
-}
-
-export function HooksPanel() {
-  const [data, setData] = useState<HooksData | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [drafts, setDrafts] = useState<Record<string, string>>({});
-  const [busy, setBusy] = useState(false);
-  const [info, setInfo] = useState<string | null>(null);
-
-  const load = useCallback(async () => {
-    try {
-      const r = await api<HooksData>("/hooks");
-      setData(r);
-      setDrafts({
-        project: JSON.stringify(r.project.hooks ?? {}, null, 2),
-        global: JSON.stringify(r.global.hooks ?? {}, null, 2),
-      });
-    } catch (err) {
-      setError((err as Error).message);
-    }
-  }, []);
-
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  const saveScope = useCallback(
-    async (scope: "project" | "global") => {
-      setBusy(true);
-      setError(null);
-      let parsed: unknown;
-      try {
-        parsed = JSON.parse(drafts[scope] ?? "{}");
-      } catch (err) {
-        setError(`${scope} JSON: ${(err as Error).message}`);
-        setBusy(false);
-        return;
-      }
-      try {
-        await api("/hooks/save", { method: "POST", body: { scope, hooks: parsed } });
-        await api("/hooks/reload", { method: "POST", body: {} });
-        setInfo(`saved + reloaded ${scope}`);
-        setTimeout(() => setInfo(null), 3000);
-        await load();
-      } catch (err) {
-        setError((err as Error).message);
-      } finally {
-        setBusy(false);
-      }
-    },
-    [drafts, load],
-  );
-
-  if (!data && !error)
-    return html`<div class="card" style="color:var(--fg-3)">loading hooks…</div>`;
-  if (error && !data) return html`<div class="card accent-err">${error}</div>`;
-  if (!data) return null;
-
-  const sectionH3 = (text: string, sub?: string) => html`
-    <h3 style="margin:18px 0 8px;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em">
-      ${text}${sub ? html`<span style="margin-left:10px;color:var(--fg-4);font-weight:400;text-transform:none;letter-spacing:0">${sub}</span>` : null}
-    </h3>
-  `;
-
-  const matrixRows = buildMatrix(data);
-  const events =
-    data.events.length > 0
-      ? data.events
-      : Array.from(new Set(matrixRows.flatMap((r) => Object.keys(r.cells))));
-  const gridCols = `220px repeat(${Math.max(events.length, 1)}, minmax(0, 1fr))`;
-
-  return html`
-    <div style="display:flex;flex-direction:column;gap:6px">
-      <div class="chips">
-        <span class="chip-f active">resolved <span class="ct">${data.resolved.length}</span></span>
-        ${data.events.map((ev) => html`<span class="chip-f">${ev}</span>`)}
-      </div>
-      ${info ? html`<div><span class="pill ok">${info}</span></div>` : null}
-      ${error ? html`<div class="card accent-err">${error}</div>` : null}
-
-      ${sectionH3("Event matrix", `${matrixRows.length} script${matrixRows.length === 1 ? "" : "s"} × ${events.length} event${events.length === 1 ? "" : "s"}`)}
-      ${
-        matrixRows.length === 0
-          ? html`<div class="card" style="color:var(--fg-3)">
-              No hooks configured. Edit the JSON below to add some.
-            </div>`
-          : html`
-            <div class="card" style="padding:10px 14px;overflow-x:auto">
-              <div class="matrix" style=${`min-width:fit-content`}>
-                <div class="row h" style=${`grid-template-columns:${gridCols}`}>
-                  <div>script</div>
-                  ${events.map((ev) => html`<div>${ev}</div>`)}
-                </div>
-                ${matrixRows.map(
-                  (r) => html`
-                    <div class="row" style=${`grid-template-columns:${gridCols}`}>
-                      <div class="cell" title=${r.command}>
-                        <span style="color:var(--fg-4);font-size:10px;margin-right:6px">${r.scope}</span>
-                        <code class="mono" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${r.command}</code>
-                      </div>
-                      ${events.map((ev) => {
-                        const c = r.cells[ev];
-                        if (!c?.on) return html`<div class="cell off">—</div>`;
-                        return html`
-                          <div class="cell on" title=${c.matcher ?? ""}>
-                            ${c.matcher ? html`<span style="font-size:10px;color:var(--c-warn)">${c.matcher}</span>` : "✓"}
-                          </div>
-                        `;
-                      })}
-                    </div>
-                  `,
-                )}
-              </div>
-            </div>
-          `
-      }
-
-      ${(["project", "global"] as const).map((scope) => {
-        const meta = data[scope];
-        return html`
-          ${sectionH3(scope, meta.path ?? "(no path)")}
-          ${
-            scope === "project" && !meta.path
-              ? html`<div class="card" style="color:var(--fg-3)">
-                  No active project — open <code class="mono">/dashboard</code> from
-                  <code class="mono">reasonix code</code> to edit project hooks.
-                </div>`
-              : html`
-                <div class="card">
-                  <textarea
-                    style="width:100%;height:240px;background:var(--bg-input);color:var(--fg-0);border:1px solid var(--bd);border-radius:var(--r);padding:10px;font-family:var(--font-mono);font-size:12.5px;line-height:1.55;resize:vertical"
-                    value=${drafts[scope] ?? ""}
-                    onInput=${(e: Event) =>
-                      setDrafts({ ...drafts, [scope]: (e.target as HTMLTextAreaElement).value })}
-                    disabled=${busy}
-                  ></textarea>
-                  <div style="display:flex;gap:6px;margin-top:8px">
-                    <button class="btn primary" disabled=${busy} onClick=${() => saveScope(scope)}>
-                      Save + Reload
-                    </button>
-                    <button class="btn ghost" disabled=${busy} onClick=${load}>Discard changes</button>
-                  </div>
-                </div>
-              `
-          }
-        `;
-      })}
-
-      ${sectionH3("Recent runs", `${data.recentRuns?.length ?? 0}`)}
-      ${
-        !data.recentRuns || data.recentRuns.length === 0
-          ? html`<div class="card" style="color:var(--fg-3)">
-              No hook runs in the recent session log.
-            </div>`
-          : html`
-            <div class="card" style="padding:0;overflow-x:auto">
-              <table class="tbl" style="width:100%;font-family:var(--font-mono);font-size:11.5px">
-                <thead>
-                  <tr>
-                    <th style="text-align:left;padding:8px 12px">when</th>
-                    <th style="text-align:left;padding:8px 12px">phase</th>
-                    <th style="text-align:left;padding:8px 12px">hook</th>
-                    <th style="text-align:left;padding:8px 12px">outcome</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  ${data.recentRuns.map(
-                    (r) => html`
-                      <tr>
-                        <td style="padding:6px 12px;color:var(--fg-3)">${fmtRelativeTime(r.whenMs)}</td>
-                        <td style="padding:6px 12px;color:var(--fg-1)">${r.phase}</td>
-                        <td style="padding:6px 12px;color:var(--fg-1)">${r.hookName}</td>
-                        <td style="padding:6px 12px">
-                          <span class=${`pill ${r.outcome === "ok" ? "ok" : r.outcome === "error" ? "err" : "warn"}`}>${r.outcome}</span>
-                        </td>
-                      </tr>
-                    `,
-                  )}
-                </tbody>
-              </table>
-            </div>
-          `
-      }
-    </div>
-  `;
-}

dashboard/src/panels/mcp.ts

@@ -1,297 +0,0 @@
-import { useCallback, useEffect, useState } from "preact/hooks";
-import { api } from "../lib/api.js";
-import { fmtNum } from "../lib/format.js";
-import { html } from "../lib/html.js";
-
-interface McpServer {
-  label: string;
-  spec: string;
-  serverInfo?: { name?: string; version?: string };
-  protocolVersion?: string;
-  instructions?: string;
-  toolCount: number;
-  tools: { name: string; description?: string }[];
-  resources: { name: string; uri: string }[];
-  prompts: { name: string; description?: string }[];
-}
-
-interface McpData {
-  servers: McpServer[];
-}
-
-function specLabel(spec: string): string {
-  const eq = spec.indexOf("=");
-  return eq > 0 ? spec.slice(0, eq) : spec;
-}
-
-function specCommand(spec: string): string {
-  const eq = spec.indexOf("=");
-  return eq > 0 ? spec.slice(eq + 1) : spec;
-}
-
-type McpFilter = "all" | "live" | "unbridged";
-
-export function McpPanel() {
-  const [data, setData] = useState<McpData | null>(null);
-  const [specs, setSpecs] = useState<string[] | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [info, setInfo] = useState<string | null>(null);
-  const [newSpec, setNewSpec] = useState("");
-  const [busy, setBusy] = useState(false);
-  const [open, setOpen] = useState<McpServer | null>(null);
-  const [openUnbridged, setOpenUnbridged] = useState<string | null>(null);
-  const [filter, setFilter] = useState<McpFilter>("all");
-
-  const load = useCallback(async () => {
-    try {
-      setData(await api<McpData>("/mcp"));
-      setSpecs((await api<{ specs: string[] }>("/mcp/specs")).specs);
-    } catch (err) {
-      setError((err as Error).message);
-    }
-  }, []);
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  const addSpec = useCallback(async () => {
-    if (!newSpec.trim()) return;
-    setBusy(true);
-    try {
-      const r = await api<{ requiresRestart?: boolean }>("/mcp/specs", {
-        method: "POST",
-        body: { spec: newSpec.trim() },
-      });
-      setInfo(
-        r.requiresRestart ? "saved — restart `reasonix code` to bridge this server" : "saved",
-      );
-      setTimeout(() => setInfo(null), 4000);
-      setNewSpec("");
-      await load();
-    } catch (err) {
-      setError((err as Error).message);
-    } finally {
-      setBusy(false);
-    }
-  }, [newSpec, load]);
-
-  const removeSpec = useCallback(
-    async (spec: string) => {
-      if (!confirm(`Remove MCP spec from config?\n\n${spec}`)) return;
-      setBusy(true);
-      try {
-        await api("/mcp/specs", { method: "DELETE", body: { spec } });
-        setInfo("removed — restart to drop the live bridge");
-        setTimeout(() => setInfo(null), 4000);
-        await load();
-      } catch (err) {
-        setError((err as Error).message);
-      } finally {
-        setBusy(false);
-      }
-    },
-    [load],
-  );
-
-  if (!data && !error) return html`<div class="card" style="color:var(--fg-3)">loading MCP…</div>`;
-  if (error && !data) return html`<div class="card accent-err">${error}</div>`;
-  if (!data) return null;
-
-  const liveCount = data.servers.length;
-  const unbridgedSpecs = (specs ?? []).filter((spec) => !data.servers.some((s) => s.spec === spec));
-  const unbridgedCount = unbridgedSpecs.length;
-  const showLive = filter !== "unbridged";
-  const showUnbridged = filter !== "live";
-
-  return html`
-    <div class="sessions-grid">
-      <div class="sessions-list">
-        <div class="ssl-h" style="font-family:var(--font-mono);font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em">
-          MCP servers · ${liveCount} bridged
-        </div>
-        <div style="padding:8px 12px 4px">
-          <div class="chips">
-            <span class=${`chip-f ${filter === "all" ? "active" : ""}`} onClick=${() => setFilter("all")}>all <span class="ct">${liveCount + unbridgedCount}</span></span>
-            <span class=${`chip-f ${filter === "live" ? "active" : ""}`} onClick=${() => setFilter("live")}>live <span class="ct">${liveCount}</span></span>
-            <span class=${`chip-f ${filter === "unbridged" ? "active" : ""}`} onClick=${() => setFilter("unbridged")}>unbridged <span class="ct">${unbridgedCount}</span></span>
-          </div>
-        </div>
-        <div style="padding:8px 12px;display:flex;gap:6px">
-          <input
-            type="text"
-            placeholder='spec — e.g. fs=npx -y @modelcontextprotocol/...'
-            value=${newSpec}
-            onInput=${(e: Event) => setNewSpec((e.target as HTMLInputElement).value)}
-            style="flex:1;font-size:11px"
-          />
-          <button class="btn primary" disabled=${busy || !newSpec.trim()} onClick=${addSpec}>+</button>
-        </div>
-        ${info ? html`<div style="padding:0 12px 8px"><span class="pill ok">${info}</span></div>` : null}
-        ${error ? html`<div class="card accent-err" style="margin:0 12px 8px">${error}</div>` : null}
-
-        <div class="ssl-rows">
-          ${
-            liveCount === 0 && unbridgedCount === 0
-              ? html`<div style="color:var(--fg-3);padding:14px;font-size:12px">
-                No MCP servers in this session.
-              </div>`
-              : null
-          }
-          ${
-            showLive
-              ? data.servers.map(
-                  (s) => html`
-                  <div
-                    class=${`ssl-row ${open?.label === s.label ? "sel" : ""}`}
-                    onClick=${() => {
-                      setOpen(s);
-                      setOpenUnbridged(null);
-                    }}
-                  >
-                    <span class="name">${s.label} <span class="pill ok">live</span></span>
-                    <span class="preview">${specCommand(s.spec)}</span>
-                    <span class="meta"><span><span class="v">${fmtNum(s.toolCount)}</span> tools</span></span>
-                  </div>
-                `,
-                )
-              : null
-          }
-          ${
-            showUnbridged
-              ? unbridgedSpecs.map(
-                  (spec) => html`
-                  <div
-                    class=${`ssl-row ${openUnbridged === spec ? "sel" : ""}`}
-                    onClick=${() => {
-                      setOpenUnbridged(spec);
-                      setOpen(null);
-                    }}
-                  >
-                    <span class="name">${specLabel(spec)} <span class="pill">unbridged</span></span>
-                    <span class="preview">${specCommand(spec)}</span>
-                    <span class="meta"><span class="dim">in config · not loaded</span></span>
-                  </div>
-                `,
-                )
-              : null
-          }
-        </div>
-      </div>
-
-      <div class="sessions-detail">
-        ${
-          openUnbridged != null
-            ? html`
-              <div class="sessions-detail-h">
-                <span class="name">${specLabel(openUnbridged)}</span>
-                <span class="ws"><span class="pill">unbridged · in config</span></span>
-                <span class="actions">
-                  <button class="btn" disabled=${busy} onClick=${() => removeSpec(openUnbridged)}
-                    style="border-color:var(--c-err);color:var(--c-err)">Remove</button>
-                  <button class="btn ghost" onClick=${() => setOpenUnbridged(null)}>← back</button>
-                </span>
-              </div>
-              <div class="card" style="margin-bottom:12px">
-                <div class="card-h"><span class="title">spec</span></div>
-                <code class="mono" style="font-size:11.5px;color:var(--fg-2);word-break:break-all">${openUnbridged}</code>
-              </div>
-              <div class="card accent-warn">
-                <div class="card-h"><span class="title" style="color:var(--c-warn)">Why unbridged?</span></div>
-                <div class="card-b" style="font-size:13px;line-height:1.6">
-                  This spec lives in your <code class="mono">config.json</code> but isn't bridged into the live session.
-                  MCP servers attach when <code class="mono">reasonix code</code> starts; the dashboard alone can't
-                  spawn the child process.
-                  <div style="margin-top:10px;color:var(--fg-3);font-size:12px">
-                    To activate: restart <code class="mono">reasonix code</code>, then refresh this dashboard.
-                  </div>
-                </div>
-              </div>
-            `
-            : open == null
-              ? html`<div style="color:var(--fg-3);font-size:13px;text-align:center;padding:60px 20px">
-                Pick an MCP server on the left to inspect tools / resources / prompts.
-              </div>`
-              : html`
-                <div class="sessions-detail-h">
-                  <span class="name">${open.label}</span>
-                  <span class="ws">${open.serverInfo?.name ?? "—"} ${open.serverInfo?.version ? `v${open.serverInfo.version}` : ""} · ${open.protocolVersion ?? "—"}</span>
-                  <span class="actions">
-                    <button class="btn ghost" onClick=${() => setOpen(null)}>← back</button>
-                  </span>
-                </div>
-
-                <div class="card" style="margin-bottom:12px">
-                  <div class="card-h"><span class="title">spec</span></div>
-                  <code class="mono" style="font-size:11.5px;color:var(--fg-2)">${open.spec}</code>
-                </div>
-
-                ${
-                  open.instructions
-                    ? html`<div class="card accent-brand" style="margin-bottom:12px">
-                        <div class="card-b">${open.instructions}</div>
-                      </div>`
-                    : null
-                }
-
-                <h3 style="margin:18px 0 6px;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em">
-                  Tools · ${open.tools.length}
-                </h3>
-                <div class="card" style="padding:0;overflow:hidden">
-                  <table class="tbl">
-                    <thead><tr><th>name</th><th>description</th></tr></thead>
-                    <tbody>
-                      ${open.tools.map(
-                        (t) =>
-                          html`<tr><td><code class="mono">${t.name}</code></td><td class="dim">${t.description ?? ""}</td></tr>`,
-                      )}
-                    </tbody>
-                  </table>
-                </div>
-
-                ${
-                  open.resources.length > 0
-                    ? html`
-                      <h3 style="margin:18px 0 6px;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em">
-                        Resources · ${open.resources.length}
-                      </h3>
-                      <div class="card" style="padding:0;overflow:hidden">
-                        <table class="tbl">
-                          <thead><tr><th>name</th><th>uri</th></tr></thead>
-                          <tbody>
-                            ${open.resources.map(
-                              (r) =>
-                                html`<tr><td>${r.name}</td><td class="path">${r.uri}</td></tr>`,
-                            )}
-                          </tbody>
-                        </table>
-                      </div>
-                    `
-                    : null
-                }
-
-                ${
-                  open.prompts.length > 0
-                    ? html`
-                      <h3 style="margin:18px 0 6px;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em">
-                        Prompts · ${open.prompts.length}
-                      </h3>
-                      <div class="card" style="padding:0;overflow:hidden">
-                        <table class="tbl">
-                          <thead><tr><th>name</th><th>description</th></tr></thead>
-                          <tbody>
-                            ${open.prompts.map(
-                              (p) =>
-                                html`<tr><td><code class="mono">${p.name}</code></td><td class="dim">${p.description ?? ""}</td></tr>`,
-                            )}
-                          </tbody>
-                        </table>
-                      </div>
-                    `
-                    : null
-                }
-              `
-        }
-      </div>
-    </div>
-  `;
-}

dashboard/src/panels/memory.ts

@@ -1,181 +0,0 @@
-import { useCallback, useEffect, useState } from "preact/hooks";
-import { api } from "../lib/api.js";
-import { fmtBytes, fmtRelativeTime } from "../lib/format.js";
-import { html } from "../lib/html.js";
-
-interface MemoryFile {
-  name: string;
-  size: number;
-  mtime: string | number;
-}
-
-interface MemoryTree {
-  project: { path?: string | null; exists?: boolean };
-  global: { files: MemoryFile[] };
-  projectMem: { path?: string | null; files: MemoryFile[] };
-}
-
-type Scope = "project" | "global" | "project-mem";
-
-export function MemoryPanel() {
-  const [tree, setTree] = useState<MemoryTree | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [open, setOpen] = useState<{ scope: Scope; name?: string } | null>(null);
-  const [body, setBody] = useState("");
-  const [busy, setBusy] = useState(false);
-  const [info, setInfo] = useState<string | null>(null);
-
-  const load = useCallback(async () => {
-    try {
-      setTree(await api<MemoryTree>("/memory"));
-    } catch (err) {
-      setError((err as Error).message);
-    }
-  }, []);
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  const openFile = useCallback(async (scope: Scope, name?: string) => {
-    setOpen({ scope, name });
-    setBusy(true);
-    try {
-      const path =
-        scope === "project"
-          ? "/memory/project"
-          : `/memory/${scope}/${encodeURIComponent(name ?? "")}`;
-      const r = await api<{ body: string }>(path);
-      setBody(r.body);
-    } catch (err) {
-      setError((err as Error).message);
-    } finally {
-      setBusy(false);
-    }
-  }, []);
-
-  const save = useCallback(async () => {
-    if (!open) return;
-    setBusy(true);
-    setError(null);
-    try {
-      const path =
-        open.scope === "project"
-          ? "/memory/project"
-          : `/memory/${open.scope}/${encodeURIComponent(open.name ?? "")}`;
-      await api(path, { method: "POST", body: { body } });
-      setInfo(`saved ${open.scope}${open.name ? `/${open.name}` : ""}`);
-      setTimeout(() => setInfo(null), 3000);
-      await load();
-    } catch (err) {
-      setError((err as Error).message);
-    } finally {
-      setBusy(false);
-    }
-  }, [open, body, load]);
-
-  if (!tree && !error)
-    return html`<div class="card" style="color:var(--fg-3)">loading memory…</div>`;
-  if (error && !tree) return html`<div class="card accent-err">${error}</div>`;
-  if (!tree) return null;
-
-  const fileRow = (scope: Scope, f: MemoryFile) => {
-    const sel = open && open.scope === scope && open.name === f.name;
-    return html`
-      <div
-        class=${`ssl-row ${sel ? "sel" : ""}`}
-        onClick=${() => openFile(scope, f.name)}
-      >
-        <span class="name">${f.name}</span>
-        <span class="meta">
-          <span class="dim">${scope}</span>
-          <span><span class="v">${fmtBytes(f.size)}</span></span>
-          <span>${fmtRelativeTime(f.mtime)}</span>
-        </span>
-      </div>
-    `;
-  };
-
-  return html`
-    <div class="sessions-grid">
-      <div class="sessions-list">
-        <div class="ssl-h" style="font-family:var(--font-mono);font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em">
-          memory · ${
-            (tree.project.path ? 1 : 0) +
-            tree.global.files.length +
-            tree.projectMem.files.length
-          } files
-        </div>
-        <div class="ssl-rows">
-          ${
-            tree.project.path
-              ? html`
-                <div
-                  class=${`ssl-row ${open?.scope === "project" ? "sel" : ""}`}
-                  onClick=${() => openFile("project")}
-                >
-                  <span class="name">
-                    REASONIX.md
-                    ${
-                      tree.project.exists
-                        ? html`<span class="pill ok">exists</span>`
-                        : html`<span class="pill">create</span>`
-                    }
-                  </span>
-                  <span class="preview">${tree.project.path}</span>
-                  <span class="meta"><span class="dim">project</span></span>
-                </div>
-              `
-              : null
-          }
-          ${tree.global.files.map((f) => fileRow("global", f))}
-          ${tree.projectMem.files.map((f) => fileRow("project-mem", f))}
-          ${
-            (tree.global.files.length === 0 &&
-              tree.projectMem.files.length === 0 &&
-              !tree.project.path)
-              ? html`<div style="color:var(--fg-3);padding:14px;font-size:12px">
-                  No memory files yet.
-                </div>`
-              : null
-          }
-        </div>
-      </div>
-
-      <div class="sessions-detail">
-        ${
-          open == null
-            ? html`<div style="color:var(--fg-3);font-size:13px;text-align:center;padding:60px 20px">
-                Pick a memory file on the left.
-                <div style="margin-top:12px;font-size:11.5px">
-                  Project REASONIX.md is committable; global notes live in
-                  <code class="mono">~/.reasonix/memory/</code>.
-                </div>
-              </div>`
-            : html`
-                <div class="sessions-detail-h">
-                  <span class="name">
-                    ${open.scope}${open.name ? `/${open.name}` : ""}
-                  </span>
-                  <span class="ws">${body.length.toLocaleString()} chars</span>
-                  <span class="actions">
-                    <button class="btn primary" disabled=${busy} onClick=${save}>Save</button>
-                    <button class="btn ghost" onClick=${() => setOpen(null)}>← back</button>
-                  </span>
-                </div>
-                ${info ? html`<div style="margin-bottom:8px"><span class="pill ok">${info}</span></div>` : null}
-                ${error ? html`<div class="card accent-err" style="margin-bottom:8px">${error}</div>` : null}
-                <textarea
-                  style="width:100%;min-height:480px;background:var(--bg-input);color:var(--fg-0);border:1px solid var(--bd);border-radius:var(--r);padding:12px;font-family:var(--font-mono);font-size:13px;line-height:1.55;resize:vertical"
-                  value=${body}
-                  onInput=${(e: Event) => setBody((e.target as HTMLTextAreaElement).value)}
-                  disabled=${busy}
-                ></textarea>
-                <div style="margin-top:8px;color:var(--fg-3);font-size:11.5px">
-                  re-applied on next <code class="mono">/new</code> or session restart
-                </div>
-              `
-        }
-      </div>
-    </div>
-  `;
-}

dashboard/src/panels/overview.ts

@@ -1,308 +0,0 @@
-import { fmtCompactNum, fmtNum, fmtRelativeTime, fmtUsd } from "../lib/format.js";
-import { html } from "../lib/html.js";
-import { usePoll } from "../lib/use-poll.js";
-
-interface CockpitKpi {
-  total: number;
-  deltaPct: number | null;
-}
-interface CockpitCacheKpi {
-  ratio: number;
-  deltaPp: number | null;
-}
-interface CockpitDailyCost {
-  date: string;
-  usd: number;
-}
-interface CockpitCurrentSession {
-  id: string;
-  turns: number;
-  totalCostUsd: number;
-  lastPromptTokens: number;
-  completionTokens: number;
-}
-interface CockpitToolCallsKpi {
-  total: number;
-  delta: number | null;
-}
-interface CockpitRecentPlan {
-  id: string;
-  title: string;
-  totalSteps: number;
-  completedSteps: number;
-  status: "active" | "done";
-  whenMs: number;
-}
-interface CockpitToolFeedRow {
-  name: string;
-  args: string;
-  level: "ok" | "warn" | "err";
-  whenMs: number;
-}
-
-interface CockpitData {
-  balance: { currency: string; total: string } | null;
-  tokens7d: CockpitKpi | null;
-  cacheHit7d: CockpitCacheKpi | null;
-  costTrend14d: ReadonlyArray<CockpitDailyCost> | null;
-  currentSession: CockpitCurrentSession | null;
-  toolCalls24h: CockpitToolCallsKpi | null;
-  recentPlans: ReadonlyArray<CockpitRecentPlan> | null;
-  toolActivity: ReadonlyArray<CockpitToolFeedRow> | null;
-}
-
-interface OverviewData {
-  mode: "standalone" | "attached";
-  version?: string;
-  latestVersion?: string;
-  session?: string | null;
-  model?: string;
-  editMode?: string;
-  planMode?: boolean | null;
-  pendingEdits?: number;
-  mcpServerCount?: number;
-  toolCount?: number;
-  cwd?: string;
-  cockpit?: CockpitData;
-}
-
-function kpi(label: string, value: unknown, delta?: unknown, deltaTone?: "up" | "down" | "flat") {
-  const muted = value === "—" || value === null || value === undefined;
-  return html`
-    <div class="kpi cock-w-1">
-      <div class="label">${label}</div>
-      <div class="value" style=${muted ? "color:var(--fg-4)" : ""}>${value ?? "—"}</div>
-      ${delta != null ? html`<div class=${`delta ${deltaTone ?? ""}`}>${delta}</div>` : null}
-    </div>
-  `;
-}
-
-function deltaPctText(deltaPct: number | null): { text: string; tone: "up" | "down" | "flat" } {
-  if (deltaPct === null) return { text: "no prior data", tone: "flat" };
-  if (Math.abs(deltaPct) < 1) return { text: "— stable", tone: "flat" };
-  const arrow = deltaPct > 0 ? "▲" : "▼";
-  return {
-    text: `${arrow} ${Math.abs(deltaPct).toFixed(0)}% vs prior`,
-    tone: deltaPct > 0 ? "up" : "down",
-  };
-}
-
-function deltaPpText(deltaPp: number | null): { text: string; tone: "up" | "down" | "flat" } {
-  if (deltaPp === null) return { text: "no prior data", tone: "flat" };
-  if (Math.abs(deltaPp) < 0.5) return { text: "— stable", tone: "flat" };
-  const arrow = deltaPp > 0 ? "▲" : "▼";
-  return { text: `${arrow} ${Math.abs(deltaPp).toFixed(1)}pp`, tone: deltaPp > 0 ? "up" : "down" };
-}
-
-function deltaCountText(delta: number | null): { text: string; tone: "up" | "down" | "flat" } {
-  if (delta === null || delta === 0) return { text: "— stable", tone: "flat" };
-  const arrow = delta > 0 ? "▲" : "▼";
-  return { text: `${arrow} ${Math.abs(delta)}`, tone: delta > 0 ? "up" : "down" };
-}
-
-function balanceKpi(c: CockpitData) {
-  if (!c.balance) return kpi("balance", "—", "open in TUI", "flat");
-  const symbol = c.balance.currency === "CNY" ? "¥" : c.balance.currency === "USD" ? "$" : "";
-  return kpi("balance", `${symbol}${c.balance.total}`, c.balance.currency, "flat");
-}
-
-function tokens7dKpi(c: CockpitData) {
-  if (!c.tokens7d) return kpi("tokens · 7d", "—", "no usage yet", "flat");
-  const d = deltaPctText(c.tokens7d.deltaPct);
-  return kpi("tokens · 7d", fmtCompactNum(c.tokens7d.total), d.text, d.tone);
-}
-
-function cacheHitKpi(c: CockpitData) {
-  if (!c.cacheHit7d) return kpi("cache hit", "—", "no usage yet", "flat");
-  const pct = (c.cacheHit7d.ratio * 100).toFixed(0);
-  const d = deltaPpText(c.cacheHit7d.deltaPp);
-  return html`
-    <div class="kpi cock-w-1">
-      <div class="label">cache hit</div>
-      <div class="value">${pct}<span class="unit">%</span></div>
-      <div class=${`delta ${d.tone}`}>${d.text}</div>
-    </div>
-  `;
-}
-
-function toolCallsKpi(c: CockpitData) {
-  if (!c.toolCalls24h) return kpi("tool calls · 24h", "—", "no events", "flat");
-  const d = deltaCountText(c.toolCalls24h.delta);
-  return kpi("tool calls · 24h", fmtNum(c.toolCalls24h.total), d.text, d.tone);
-}
-
-function currentSessionBlock(c: CockpitData) {
-  if (!c.currentSession) {
-    return html`
-      <div class="cock-list cock-w-2">
-        <div class="ch"><span class="ttl">current session</span></div>
-        <div style="color:var(--fg-3);font-size:12.5px;padding:8px 0">
-          No live session — <code class="mono">/dashboard</code> from inside <code class="mono">reasonix code</code> to attach.
-        </div>
-      </div>
-    `;
-  }
-  const s = c.currentSession;
-  return html`
-    <div class="cock-list cock-w-2">
-      <div class="ch"><span class="ttl">current session</span></div>
-      <div class="card accent-brand" style="margin:0 0 8px;background:transparent;border:none;padding:0">
-        <div class="card-h"><span class="glyph">◆</span><span class="title">${s.id}</span><span class="meta">${s.turns} turn${s.turns === 1 ? "" : "s"}</span></div>
-      </div>
-      <div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;font-family:var(--font-mono);font-size:11px">
-        <div><span style="color:var(--fg-3)">prompt tok</span><div style="color:var(--fg-0);font-size:13px;font-weight:600">${fmtNum(s.lastPromptTokens)}</div></div>
-        <div><span style="color:var(--fg-3)">completion tok</span><div style="color:var(--fg-0);font-size:13px;font-weight:600">${fmtNum(s.completionTokens)}</div></div>
-        <div><span style="color:var(--fg-3)">cost</span><div style="color:var(--fg-0);font-size:13px;font-weight:600">${fmtUsd(s.totalCostUsd)}</div></div>
-      </div>
-    </div>
-  `;
-}
-
-function costTrendSpark(c: CockpitData) {
-  if (!c.costTrend14d || c.costTrend14d.length === 0) {
-    return html`
-      <div class="chart cock-w-2">
-        <div class="chart-h"><span class="title">cost · 14 day</span></div>
-        <div class="chart-v" style="color:var(--fg-4)">—<span class="unit">no usage yet</span></div>
-      </div>
-    `;
-  }
-  const days = c.costTrend14d;
-  const total = days.reduce((s, d) => s + d.usd, 0);
-  const max = Math.max(...days.map((d) => d.usd), 0.0001);
-  const w = 400;
-  const h = 60;
-  const points = days
-    .map((d, i) => {
-      const x = days.length === 1 ? 0 : (i * w) / (days.length - 1);
-      const y = h - (d.usd / max) * (h - 6) - 3;
-      return `${x.toFixed(0)},${y.toFixed(0)}`;
-    })
-    .join(" ");
-  const area = `${points} ${w},${h} 0,${h}`;
-  const avg = total / days.length;
-  return html`
-    <div class="chart cock-w-2">
-      <div class="chart-h"><span class="title">cost · 14 day</span></div>
-      <div class="chart-v">${fmtUsd(avg)}<span class="unit">/day avg</span></div>
-      <div class="chart-spark">
-        <svg viewBox=${`0 0 ${w} ${h}`} preserveAspectRatio="none">
-          <polyline fill="none" stroke="var(--c-brand)" stroke-width="1.5" points=${points} />
-          <polyline fill="rgba(121,192,255,.10)" stroke="none" points=${area} />
-        </svg>
-      </div>
-    </div>
-  `;
-}
-
-function recentPlansRail(c: CockpitData) {
-  return html`
-    <div class="cock-list cock-w-2">
-      <div class="ch"><span class="ttl">recent plans</span></div>
-      ${
-        !c.recentPlans || c.recentPlans.length === 0
-          ? html`<div style="color:var(--fg-3);font-size:12.5px;padding:8px 0">No plans yet — submit one with <code class="mono">submit_plan</code>.</div>`
-          : c.recentPlans.map(
-              (p) => html`
-                <div class=${`rail-step ${p.status === "done" ? "done" : "active"}`}>
-                  <span class="g">${p.status === "done" ? "✓" : "⏵"}</span>
-                  <span>${p.title} · ${p.completedSteps}/${p.totalSteps} step${p.totalSteps === 1 ? "" : "s"}</span>
-                  <span style="margin-left:auto;color:var(--fg-4);font-family:var(--font-mono);font-size:10.5px">${fmtRelativeTime(p.whenMs)}</span>
-                </div>
-              `,
-            )
-      }
-    </div>
-  `;
-}
-
-function toolActivityFeed(c: CockpitData) {
-  return html`
-    <div class="cock-list cock-w-2">
-      <div class="ch"><span class="ttl">tool activity</span></div>
-      ${
-        !c.toolActivity || c.toolActivity.length === 0
-          ? html`<div style="color:var(--fg-3);font-size:12.5px;padding:8px 0">No tool calls yet.</div>`
-          : c.toolActivity.map(
-              (r) => html`
-                <div class=${`feed-row ${r.level}`}>
-                  <span class="g">${r.level === "ok" ? "●" : r.level === "warn" ? "▲" : "✕"}</span>
-                  <span class="name">${r.name}${r.args ? html` <span class="args">${r.args}</span>` : null}</span>
-                  <span class="when" style="margin-left:auto">${fmtRelativeTime(r.whenMs)}</span>
-                </div>
-              `,
-            )
-      }
-    </div>
-  `;
-}
-
-export function OverviewPanel() {
-  const { data, error, loading } = usePoll<OverviewData>("/overview", 2500);
-  if (loading && !data)
-    return html`<div class="card" style="color:var(--fg-3)">loading overview…</div>`;
-  if (error) return html`<div class="card accent-err">overview failed: ${error.message}</div>`;
-  if (!data) return null;
-  const o = data;
-  const c: CockpitData = o.cockpit ?? {
-    balance: null,
-    tokens7d: null,
-    cacheHit7d: null,
-    costTrend14d: null,
-    currentSession: null,
-    toolCalls24h: null,
-    recentPlans: null,
-    toolActivity: null,
-  };
-  const upToDate = o.latestVersion ? o.latestVersion === o.version : null;
-  const versionDelta =
-    upToDate === null ? "checking" : upToDate ? "latest" : `latest: ${o.latestVersion}`;
-  const versionTone: "up" | "down" | "flat" = upToDate === false ? "down" : "flat";
-
-  return html`
-    <div style="display:flex;flex-direction:column;gap:14px">
-      ${
-        o.mode === "standalone"
-          ? html`<div class="card accent-warn">
-              <div class="card-h">
-                <span class="title" style="color:var(--c-warn)">Standalone mode</span>
-              </div>
-              <div class="card-b">
-                Read-only disk view. Start <code class="mono">/dashboard</code> from inside
-                <code class="mono">reasonix code</code> for live session state, MCP, and tools.
-              </div>
-            </div>`
-          : null
-      }
-
-      <h3 style="margin:0;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em">
-        Cockpit
-      </h3>
-      <div class="cockpit">
-        ${balanceKpi(c)}
-        ${tokens7dKpi(c)}
-        ${cacheHitKpi(c)}
-        ${toolCallsKpi(c)}
-
-        ${currentSessionBlock(c)}
-        ${costTrendSpark(c)}
-
-        ${recentPlansRail(c)}
-        ${toolActivityFeed(c)}
-
-        ${kpi("tools loaded", fmtNum(o.toolCount), o.toolCount ? "active" : "—", "flat")}
-        ${kpi("mcp servers", fmtNum(o.mcpServerCount), o.mcpServerCount ? "all up" : "—", o.mcpServerCount ? "up" : "flat")}
-        ${kpi("edit mode", o.editMode ?? "—", o.editMode === "yolo" ? "all prompts bypassed" : null, o.editMode === "yolo" ? "down" : "flat")}
-        ${kpi("Reasonix", o.version ?? "—", versionDelta, versionTone)}
-      </div>
-
-      <h3 style="margin:0;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em">
-        Working directory
-      </h3>
-      <div class="card">
-        <div class="card-h"><span class="title">project root</span></div>
-        <code class="mono" style="color:var(--fg-2);font-size:12px">${o.cwd ?? "—"}</code>
-      </div>
-    </div>
-  `;
-}

dashboard/src/panels/permissions.ts

@@ -1,226 +0,0 @@
-import { useCallback, useState } from "preact/hooks";
-import { api } from "../lib/api.js";
-import { html } from "../lib/html.js";
-import { usePoll } from "../lib/use-poll.js";
-
-interface PermissionsData {
-  editMode?: string;
-  currentCwd?: string | null;
-  project: string[];
-  builtin: string[];
-}
-
-interface Feedback {
-  kind: "ok" | "err" | "info";
-  text: string;
-}
-
-function groupByVerb(list: string[]): [string, string[]][] {
-  const groups = new Map<string, string[]>();
-  for (const entry of list) {
-    const sp = entry.indexOf(" ");
-    const verb = sp > 0 ? entry.slice(0, sp) : entry;
-    const tail = sp > 0 ? entry.slice(sp + 1) : "";
-    const arr = groups.get(verb) ?? [];
-    arr.push(tail);
-    groups.set(verb, arr);
-  }
-  return [...groups.entries()];
-}
-
-export function PermissionsPanel() {
-  const { data, error, loading, refresh } = usePoll<PermissionsData>("/permissions", 5000);
-  const [draft, setDraft] = useState("");
-  const [busy, setBusy] = useState(false);
-  const [feedback, setFeedback] = useState<Feedback | null>(null);
-
-  const add = useCallback(async () => {
-    const prefix = draft.trim();
-    if (!prefix) return;
-    setBusy(true);
-    setFeedback(null);
-    try {
-      const res = await api<{ alreadyPresent?: boolean }>("/permissions", {
-        method: "POST",
-        body: { prefix },
-      });
-      if (res.alreadyPresent) setFeedback({ kind: "info", text: `${prefix} already in list` });
-      else setFeedback({ kind: "ok", text: `added: ${prefix}` });
-      setDraft("");
-      await refresh();
-    } catch (err) {
-      setFeedback({ kind: "err", text: (err as Error).message });
-    } finally {
-      setBusy(false);
-    }
-  }, [draft, refresh]);
-
-  const remove = useCallback(
-    async (prefix: string) => {
-      if (!confirm(`Remove "${prefix}" from this project's allowlist?`)) return;
-      setBusy(true);
-      setFeedback(null);
-      try {
-        await api("/permissions", { method: "DELETE", body: { prefix } });
-        setFeedback({ kind: "ok", text: `removed: ${prefix}` });
-        await refresh();
-      } catch (err) {
-        setFeedback({ kind: "err", text: (err as Error).message });
-      } finally {
-        setBusy(false);
-      }
-    },
-    [refresh],
-  );
-
-  const clearAll = useCallback(async () => {
-    if (!confirm("Wipe every project allowlist entry? Builtin entries are unaffected.")) return;
-    setBusy(true);
-    setFeedback(null);
-    try {
-      const res = await api<{ dropped: number }>("/permissions/clear", {
-        method: "POST",
-        body: { confirm: true },
-      });
-      setFeedback({
-        kind: "ok",
-        text: `cleared ${res.dropped} entr${res.dropped === 1 ? "y" : "ies"}`,
-      });
-      await refresh();
-    } catch (err) {
-      setFeedback({ kind: "err", text: (err as Error).message });
-    } finally {
-      setBusy(false);
-    }
-  }, [refresh]);
-
-  if (loading && !data)
-    return html`<div class="card" style="color:var(--fg-3)">loading permissions…</div>`;
-  if (error) return html`<div class="card accent-err">permissions failed: ${error.message}</div>`;
-  if (!data) return null;
-  const p = data;
-
-  const feedbackPill = feedback
-    ? html`<span
-        class=${`pill ${feedback.kind === "err" ? "err" : feedback.kind === "ok" ? "ok" : "warn"}`}
-      >${feedback.text}</span>`
-    : null;
-
-  return html`
-    <div style="display:flex;flex-direction:column;gap:14px">
-      ${
-        p.editMode === "yolo"
-          ? html`<div class="card accent-warn">
-              <div class="card-h"><span class="title" style="color:var(--c-warn)">YOLO mode</span></div>
-              <div class="card-b">
-                Every shell command auto-runs, allowlist bypassed.
-                Switch back with <code class="mono">/mode review</code> in the TUI.
-              </div>
-            </div>`
-          : null
-      }
-
-      <div class="chips">
-        <span class="chip-f active">project <span class="ct">${p.project.length}</span></span>
-        <span class="chip-f">builtin <span class="ct">${p.builtin.length}</span></span>
-      </div>
-
-      ${
-        p.currentCwd
-          ? html`
-            <div class="card">
-              <div class="card-h">
-                <span class="title">add a prefix</span>
-                <span class="meta">${p.currentCwd}</span>
-              </div>
-              <div style="display:flex;gap:8px;align-items:center">
-                <input
-                  type="text"
-                  placeholder='e.g. "npm run build" or "deploy.sh"'
-                  value=${draft}
-                  onInput=${(e: Event) => setDraft((e.target as HTMLInputElement).value)}
-                  onKeyDown=${(e: KeyboardEvent) => {
-                    if (e.key === "Enter") add();
-                  }}
-                  disabled=${busy}
-                  style="flex:1"
-                />
-                <button class="primary" onClick=${add} disabled=${busy || !draft.trim()}>Add</button>
-                <button
-                  class="danger"
-                  onClick=${clearAll}
-                  disabled=${busy || p.project.length === 0}
-                >Clear all</button>
-              </div>
-              ${feedbackPill ? html`<div style="margin-top:8px">${feedbackPill}</div>` : null}
-            </div>
-          `
-          : html`
-            <div class="card accent-warn">
-              <div class="card-b">
-                Mutations require <code class="mono">/dashboard</code> from inside an active
-                <code class="mono">reasonix code</code> session — standalone
-                <code class="mono">reasonix dashboard</code> can't tell which project's allowlist to edit.
-              </div>
-            </div>
-          `
-      }
-
-      <h3 style="margin:6px 0 0;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em">
-        Project allowlist · ${p.project.length}
-      </h3>
-      ${
-        p.project.length === 0
-          ? html`<div class="card" style="color:var(--fg-3)">Nothing stored yet for this project.</div>`
-          : html`
-            <div class="card" style="padding:0;overflow:hidden">
-              <table class="tbl">
-                <thead>
-                  <tr>
-                    <th style="width:48px">#</th>
-                    <th>prefix</th>
-                    <th style="width:120px"></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  ${p.project.map(
-                    (prefix, i) => html`
-                      <tr>
-                        <td class="dim">${i + 1}</td>
-                        <td><code class="mono">${prefix}</code></td>
-                        <td>
-                          ${
-                            p.currentCwd
-                              ? html`<button
-                                  class="danger"
-                                  onClick=${() => remove(prefix)}
-                                  disabled=${busy}
-                                >remove</button>`
-                              : null
-                          }
-                        </td>
-                      </tr>
-                    `,
-                  )}
-                </tbody>
-              </table>
-            </div>
-          `
-      }
-
-      <h3 style="margin:6px 0 0;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em">
-        Builtin · ${p.builtin.length} · read-only
-      </h3>
-      <div class="card" style="font-family:var(--font-mono);font-size:11.5px;line-height:1.8">
-        ${groupByVerb(p.builtin).map(
-          ([verb, list]) => html`
-            <div style="margin-bottom:4px">
-              <span class="pill" style="margin-right:6px">${verb}</span>
-              <span style="color:var(--fg-2)">${list.join(" · ")}</span>
-            </div>
-          `,
-        )}
-      </div>
-    </div>
-  `;
-}

dashboard/src/panels/plans.ts

@@ -1,149 +0,0 @@
-import { useState } from "preact/hooks";
-import { fmtPct, fmtRelativeTime } from "../lib/format.js";
-import { html } from "../lib/html.js";
-import { usePoll } from "../lib/use-poll.js";
-
-interface PlanStep {
-  id: string;
-  title: string;
-  action?: string;
-  risk?: "low" | "medium" | "high";
-}
-
-interface ArchivedPlan {
-  session: string;
-  summary?: string;
-  steps: PlanStep[];
-  completedStepIds: string[];
-  completedSteps: number;
-  totalSteps: number;
-  completionRatio: number;
-  completedAt: string | number;
-}
-
-interface PlansData {
-  plans?: ArchivedPlan[];
-}
-
-function statusPill(p: ArchivedPlan) {
-  if (p.completionRatio >= 1) return html`<span class="pill ok">done</span>`;
-  if (p.completionRatio > 0) return html`<span class="pill info">active</span>`;
-  return html`<span class="pill">idle</span>`;
-}
-
-export function PlansPanel() {
-  const { data, error, loading } = usePoll<PlansData>("/plans", 8000);
-  const [openIdx, setOpenIdx] = useState<number | null>(null);
-  const [filter, setFilter] = useState("");
-
-  if (loading && !data)
-    return html`<div class="card" style="color:var(--fg-3)">loading plans…</div>`;
-  if (error) return html`<div class="card accent-err">plans failed: ${error.message}</div>`;
-  const plans = data?.plans ?? [];
-
-  if (plans.length === 0)
-    return html`<div class="card" style="color:var(--fg-3)">
-      No archived plans yet — run a turn that calls <code class="mono">submit_plan</code>
-      and <code class="mono">mark_step_complete</code>.
-    </div>`;
-
-  const filtered = filter.trim()
-    ? plans.filter(
-        (p) =>
-          p.session.toLowerCase().includes(filter.toLowerCase()) ||
-          (p.summary ?? "").toLowerCase().includes(filter.toLowerCase()),
-      )
-    : plans;
-
-  const open = openIdx !== null ? plans[openIdx] : null;
-
-  return html`
-    <div class="sessions-grid">
-      <div class="sessions-list">
-        <div class="ssl-h">
-          <input
-            type="text"
-            placeholder="filter plans"
-            value=${filter}
-            onInput=${(e: Event) => setFilter((e.target as HTMLInputElement).value)}
-            style="flex:1"
-          />
-        </div>
-        <div class="chips" style="padding:0 12px 8px">
-          <span class="chip-f active">all <span class="ct">${plans.length}</span></span>
-          <span class="chip-f">
-            active
-            <span class="ct">${plans.filter((p) => p.completionRatio > 0 && p.completionRatio < 1).length}</span>
-          </span>
-          <span class="chip-f">
-            done <span class="ct">${plans.filter((p) => p.completionRatio >= 1).length}</span>
-          </span>
-        </div>
-        <div class="ssl-rows">
-          ${filtered.map((p) => {
-            const idx = plans.indexOf(p);
-            const sel = idx === openIdx;
-            return html`
-              <div class=${`ssl-row ${sel ? "sel" : ""}`} onClick=${() => setOpenIdx(idx)}>
-                <span class="name">${p.summary ?? p.session} ${statusPill(p)}</span>
-                ${
-                  p.summary && p.session !== p.summary
-                    ? html`<span class="preview">${p.session}</span>`
-                    : null
-                }
-                <span class="meta">
-                  <span><span class="v">${p.totalSteps}</span> steps</span>
-                  <span><span class="v">${p.completedSteps} / ${p.totalSteps}</span> · ${fmtPct(p.completionRatio)}</span>
-                  <span>${fmtRelativeTime(p.completedAt)}</span>
-                </span>
-              </div>
-            `;
-          })}
-        </div>
-      </div>
-
-      <div class="sessions-detail">
-        ${
-          open == null
-            ? html`<div style="color:var(--fg-3);font-size:13px;text-align:center;padding:60px 20px">
-                Pick a plan on the left.
-              </div>`
-            : html`
-                <div class="sessions-detail-h">
-                  <span class="name">${open.summary ?? "(no title)"}</span>
-                  <span class="ws">${open.session} · ${fmtRelativeTime(open.completedAt)}</span>
-                  <span class="actions">
-                    <button class="btn ghost" onClick=${() => setOpenIdx(null)}>← back</button>
-                  </span>
-                </div>
-
-                <h3 style="margin:0 0 6px;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em">
-                  Step timeline · ${open.completedSteps} / ${open.totalSteps}
-                </h3>
-                <div class="plan-timeline" style="margin-bottom:14px">
-                  ${open.steps.map((step, i) => {
-                    const done = open.completedStepIds.includes(step.id);
-                    const cls = done ? "done" : i === open.completedSteps ? "active" : "";
-                    return html`
-                      <div class=${`plan-step ${cls}`}>
-                        <span class="lbl">step ${i + 1}</span>
-                        <span class="name">${step.title}</span>
-                        ${step.action ? html`<span class="meta">${step.action}</span>` : null}
-                        ${
-                          step.risk
-                            ? html`<span
-                                class=${`pill ${step.risk === "high" ? "err" : step.risk === "medium" ? "warn" : ""}`}
-                                style="align-self:flex-start;margin-top:4px"
-                              >${step.risk}</span>`
-                            : null
-                        }
-                      </div>
-                    `;
-                  })}
-                </div>
-              `
-        }
-      </div>
-    </div>
-  `;
-}

dashboard/src/panels/semantic.ts

@@ -1,831 +0,0 @@
-import { useCallback, useEffect, useState } from "preact/hooks";
-import { api } from "../lib/api.js";
-import { fmtBytes, fmtNum, fmtRelativeTime } from "../lib/format.js";
-import { html } from "../lib/html.js";
-
-interface SemanticData {
-  attached?: boolean;
-  reason?: string;
-  root?: string;
-  index?: IndexInfo;
-  job?: SemanticJob | null;
-  pull?: { status: string; startedAt: number; lastLine?: string } | null;
-  ollama?: {
-    binaryFound?: boolean;
-    daemonRunning?: boolean;
-    modelPulled?: boolean;
-    modelName?: string;
-    installedModels?: string[];
-    error?: string;
-  };
-}
-
-interface IndexInfo {
-  exists: boolean;
-  chunks?: number;
-  files?: number;
-  dim?: number;
-  sizeBytes?: number;
-  lastBuiltMs?: number;
-  model?: string;
-}
-
-interface SemanticJob {
-  phase: string;
-  startedAt: number;
-  chunksTotal?: number;
-  chunksDone?: number;
-  filesScanned?: number;
-  filesChanged?: number;
-  filesSkipped?: number;
-  aborted?: boolean;
-  error?: string;
-  result?: {
-    chunksAdded: number;
-    chunksRemoved: number;
-    chunksSkipped?: number;
-    durationMs: number;
-    skipBuckets?: Record<string, number>;
-  };
-}
-
-export function SemanticPanel() {
-  const [data, setData] = useState<SemanticData | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [busy, setBusy] = useState(false);
-  const [info, setInfo] = useState<string | null>(null);
-
-  const load = useCallback(async () => {
-    try {
-      const r = await api<SemanticData>("/semantic");
-      setData(r);
-    } catch (err) {
-      setError((err as Error).message);
-    }
-  }, []);
-
-  useEffect(() => {
-    load();
-    const phase = data?.job?.phase;
-    const running = phase === "scan" || phase === "embed" || phase === "write";
-    const pulling = data?.pull?.status === "pulling";
-    const ms = running || pulling ? 1200 : 5000;
-    const id = setInterval(load, ms);
-    return () => clearInterval(id);
-  }, [load, data?.job?.phase, data?.pull?.status]);
-
-  const start = useCallback(
-    async (rebuild: boolean) => {
-      setBusy(true);
-      setError(null);
-      setInfo(null);
-      try {
-        await api("/semantic/start", { method: "POST", body: { rebuild: !!rebuild } });
-        setInfo(rebuild ? "rebuild started" : "incremental index started");
-        await load();
-      } catch (err) {
-        setError((err as Error).message);
-      } finally {
-        setBusy(false);
-      }
-    },
-    [load],
-  );
-
-  const stop = useCallback(async () => {
-    setBusy(true);
-    setError(null);
-    try {
-      await api("/semantic/stop", { method: "POST", body: {} });
-      setInfo("stopping requested — current chunk batch will finish first");
-      await load();
-    } catch (err) {
-      setError((err as Error).message);
-    } finally {
-      setBusy(false);
-    }
-  }, [load]);
-
-  const startDaemon = useCallback(async () => {
-    setBusy(true);
-    setError(null);
-    setInfo("starting ollama daemon (15s timeout)…");
-    try {
-      const r = await api<{ ready: boolean }>("/semantic/ollama/start", { method: "POST", body: {} });
-      setInfo(
-        r.ready ? "daemon is up" : "daemon didn't come up in time — check `ollama serve` manually",
-      );
-      await load();
-    } catch (err) {
-      setError((err as Error).message);
-    } finally {
-      setBusy(false);
-    }
-  }, [load]);
-
-  const pullModel = useCallback(
-    async (model: string) => {
-      setBusy(true);
-      setError(null);
-      setInfo(`pulling ${model} — this may take a few minutes on first install`);
-      try {
-        await api("/semantic/ollama/pull", { method: "POST", body: { model } });
-        await load();
-      } catch (err) {
-        setError((err as Error).message);
-      } finally {
-        setBusy(false);
-      }
-    },
-    [load],
-  );
-
-  if (!data && !error)
-    return html`<div class="card" style="color:var(--fg-3)">loading semantic status…</div>`;
-  if (error && !data) return html`<div class="card accent-err">${error}</div>`;
-  if (!data) return null;
-
-  if (!data.attached) {
-    return html`
-      <div class="card" style="color:var(--fg-3)">
-        <div class="card-h"><span class="title">Semantic — code-mode required</span></div>
-        <div class="card-b">${data.reason}</div>
-      </div>
-    `;
-  }
-
-  const job = data.job;
-  const phase = job?.phase;
-  const running = phase === "scan" || phase === "embed" || phase === "write";
-  const pull = data.pull;
-  const pulling = pull?.status === "pulling";
-
-  const o = data.ollama ?? {};
-  const binaryFound = o.binaryFound === true;
-  const daemonRunning = o.daemonRunning === true;
-  const modelPulled = o.modelPulled === true;
-  const modelName = o.modelName ?? "nomic-embed-text";
-  const installedModels = o.installedModels ?? [];
-  const ready = binaryFound && daemonRunning && modelPulled;
-
-  const sectionH3 = (text: string) => html`
-    <h3 style="margin:18px 0 8px;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em">${text}</h3>
-  `;
-
-  const idx = data.index;
-  return html`
-    <div style="display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px;align-items:start">
-      <div style="display:flex;flex-direction:column;gap:10px;min-width:0">
-        <div class="chips">
-          <span class=${`chip-f ${idx?.exists ? "active" : ""}`}>
-            ${idx?.exists ? "index built" : "no index yet"}
-          </span>
-          ${
-            ready
-              ? html`<span class="chip-f" style="border-color:var(--c-ok);color:var(--c-ok)">ready</span>`
-              : html`<span class="chip-f" style="border-color:var(--c-warn);color:var(--c-warn)">setup needed</span>`
-          }
-        </div>
-        ${info ? html`<div><span class="pill info">${info}</span></div>` : null}
-        ${error ? html`<div class="card accent-err">${error}</div>` : null}
-
-        ${idx?.exists ? html`<${SemanticSearchSection} />` : null}
-
-        ${
-          !binaryFound
-            ? html`
-              <div class="card">
-                <div class="card-h"><span class="title">Install Ollama</span></div>
-                <div class="card-b" style="font-size:13px">
-                  Reasonix doesn't run package managers for you. Install Ollama first, then come back:
-                  <ul style="margin:10px 0 4px 18px;padding:0">
-                    <li><strong>macOS / Windows:</strong> download from <a href="https://ollama.com/download" target="_blank" rel="noreferrer">ollama.com/download</a></li>
-                    <li><strong>Linux:</strong> <code class="mono">curl -fsSL https://ollama.com/install.sh | sh</code></li>
-                  </ul>
-                  <div style="color:var(--fg-3);margin-top:8px">Refresh after install — this panel will offer to start the daemon and pull <code class="mono">${modelName}</code>.</div>
-                </div>
-              </div>
-            `
-            : null
-        }
-        ${
-          binaryFound && !daemonRunning
-            ? html`
-              <div class="card">
-                <div class="card-h"><span class="title">Daemon</span></div>
-                <div class="card-b" style="font-size:13px">
-                  <code class="mono">ollama</code> is on your PATH but the HTTP daemon isn't reachable.
-                  <div style="display:flex;gap:8px;margin-top:10px;align-items:center">
-                    <button class="primary" disabled=${busy} onClick=${startDaemon}>Start daemon</button>
-                    <span style="color:var(--fg-3);font-size:12px">runs <code class="mono">ollama serve</code> detached</span>
-                  </div>
-                </div>
-              </div>
-            `
-            : null
-        }
-        ${
-          daemonRunning && !modelPulled
-            ? html`
-              <div class="card">
-                <div class="card-h"><span class="title">Model</span></div>
-                <div class="card-b" style="font-size:13px">
-                  <code class="mono">${modelName}</code> isn't installed yet.${pulling ? "" : " ~270 MB on first pull."}
-                  <div style="display:flex;gap:8px;margin-top:10px">
-                    <button class="primary" disabled=${busy || pulling} onClick=${() => pullModel(modelName)}>
-                      ${pulling ? "pulling…" : `Pull ${modelName}`}
-                    </button>
-                  </div>
-                  ${
-                    pull
-                      ? html`
-                        <div style="margin-top:10px;display:flex;gap:10px;align-items:center;font-size:11.5px">
-                          <span class=${`pill ${pull.status === "done" ? "ok" : pull.status === "error" ? "err" : ""}`}>${pull.status}</span>
-                          <span style="color:var(--fg-3)">${((Date.now() - pull.startedAt) / 1000).toFixed(1)}s</span>
-                          ${pull.lastLine ? html`<code class="mono" style="color:var(--fg-3)">${pull.lastLine}</code>` : null}
-                        </div>
-                      `
-                      : null
-                  }
-                </div>
-              </div>
-            `
-            : null
-        }
-
-        ${
-          job
-            ? html`
-              ${sectionH3("Job")}
-              <${SemanticJobView} job=${job} running=${running} />
-            `
-            : null
-        }
-      </div>
-
-      <aside style="display:flex;flex-direction:column;gap:10px">
-        <div class="card">
-          <div class="card-h">
-            <span class="title">index status</span>
-            <span class="meta">
-              ${
-                idx?.exists
-                  ? html`<span class="pill ok">● built</span>`
-                  : html`<span class="pill">none</span>`
-              }
-            </span>
-          </div>
-          ${
-            idx?.exists
-              ? html`
-                <div class="rail-kv"><span class="k">chunks</span><span class="v">${fmtNum(idx.chunks)}</span></div>
-                <div class="rail-kv"><span class="k">files</span><span class="v">${fmtNum(idx.files)}</span></div>
-                <div class="rail-kv"><span class="k">model</span><span class="v" style="font-size:11px">${idx.model ?? modelName}</span></div>
-                <div class="rail-kv"><span class="k">dim</span><span class="v">${fmtNum(idx.dim)}</span></div>
-                <div class="rail-kv"><span class="k">size</span><span class="v">${fmtBytes(idx.sizeBytes)}</span></div>
-                <div class="rail-kv"><span class="k">last build</span><span class="v">${fmtRelativeTime(idx.lastBuiltMs ?? null)}</span></div>
-              `
-              : html`
-                <div style="color:var(--fg-3);font-size:12.5px;padding:6px 0">
-                  Run an index to enable <code class="mono">semantic_search</code>.
-                </div>
-              `
-          }
-          <div style="display:flex;gap:6px;margin-top:10px;flex-wrap:wrap">
-            <button class="primary" disabled=${busy || running || !ready} onClick=${() => start(false)}>${idx?.exists ? "Re-index" : "Build"}</button>
-            ${
-              idx?.exists
-                ? html`<button disabled=${busy || running || !ready} onClick=${() => start(true)}>Rebuild</button>`
-                : null
-            }
-            ${running ? html`<button onClick=${stop} style="border-color:var(--c-err);color:var(--c-err)">Stop</button>` : null}
-          </div>
-        </div>
-
-        <div class="card">
-          <div class="card-h"><span class="title">ollama</span></div>
-          <div class="rail-kv">
-            <span class="k">binary</span>
-            <span class="v">${binaryFound ? html`<span class="pill ok">found</span>` : html`<span class="pill err">missing</span>`}</span>
-          </div>
-          <div class="rail-kv">
-            <span class="k">daemon</span>
-            <span class="v">${daemonRunning ? html`<span class="pill ok">up</span>` : html`<span class="pill warn">down</span>`}</span>
-          </div>
-          <div class="rail-kv">
-            <span class="k">model</span>
-            <span class="v">${modelPulled ? html`<span class="pill ok">pulled</span>` : html`<span class="pill warn">missing</span>`}</span>
-          </div>
-        </div>
-
-        <${SemanticExcludesCard} />
-      </aside>
-    </div>
-  `;
-}
-
-interface IndexConfig {
-  excludeDirs?: string[];
-  excludeFiles?: string[];
-  excludeExts?: string[];
-  excludePatterns?: string[];
-  respectGitignore?: boolean;
-  maxFileBytes?: number;
-}
-
-interface IndexConfigResponse {
-  resolved: IndexConfig;
-  defaults: IndexConfig;
-}
-
-interface ExcludeDraft {
-  excludeDirs: string[];
-  excludeFiles: string[];
-  excludeExts: string[];
-  excludePatterns: string[];
-  respectGitignore: boolean;
-  maxFileBytes: number;
-}
-
-interface PreviewData {
-  filesIncluded: number;
-  skipBuckets?: Record<string, number>;
-  skipSamples?: Record<string, string[]>;
-  sampleIncluded?: string[];
-}
-
-interface SearchHit {
-  path: string;
-  startLine: number;
-  endLine: number;
-  score: number;
-  snippet: string;
-}
-
-interface SearchResponse {
-  hits: SearchHit[];
-  elapsedMs: number;
-  model: string;
-}
-
-function SemanticSearchSection() {
-  const [query, setQuery] = useState("");
-  const [hits, setHits] = useState<SearchHit[] | null>(null);
-  const [meta, setMeta] = useState<{ elapsedMs: number; model: string } | null>(null);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const runSearch = useCallback(async () => {
-    const q = query.trim();
-    if (!q || busy) return;
-    setBusy(true);
-    setError(null);
-    try {
-      const r = await api<SearchResponse>("/semantic/search", {
-        method: "POST",
-        body: { query: q, topK: 8, minScore: 0.3 },
-      });
-      setHits(r.hits);
-      setMeta({ elapsedMs: r.elapsedMs, model: r.model });
-    } catch (err) {
-      setError((err as Error).message);
-      setHits(null);
-    } finally {
-      setBusy(false);
-    }
-  }, [query, busy]);
-
-  return html`
-    <div style="margin-bottom:14px">
-      <div style="position:relative">
-        <div style="position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--c-brand);font-family:var(--font-mono);font-size:14px;pointer-events:none">≈</div>
-        <input
-          type="text"
-          class="mono"
-          style="width:100%;padding:10px 14px 10px 38px;font-size:13.5px;background:var(--bg-input);border:1px solid var(--bd);border-radius:var(--r);color:var(--fg-0);outline:none"
-          placeholder="describe what to find — 'where do we handle abort signals'"
-          value=${query}
-          disabled=${busy}
-          onInput=${(e: Event) => setQuery((e.target as HTMLInputElement).value)}
-          onKeyDown=${(e: KeyboardEvent) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-              runSearch();
-            }
-          }}
-        />
-      </div>
-      ${
-        hits || busy || error
-          ? html`
-            <div style="font-family:var(--font-mono);font-size:11px;color:var(--fg-3);margin:8px 0 6px;display:flex;align-items:center;gap:8px">
-              ${busy
-                ? html`<span>searching…</span>`
-                : error
-                ? html`<span style="color:var(--c-err)">${error}</span>`
-                : hits
-                ? html`<span>${hits.length} result${hits.length === 1 ? "" : "s"} · ${meta?.elapsedMs ?? 0}ms · ${meta?.model ?? ""}</span>`
-                : null}
-            </div>
-            ${
-              hits && hits.length > 0
-                ? html`
-                  <div class="card" style="padding:0;max-height:420px;overflow-y:auto">
-                    ${hits.map(
-                      (h) => html`
-                        <div class="sr-card">
-                          <div class="sr-h">
-                            <span class="sr-path">${h.path}</span>
-                            <span class="sr-loc">L${h.startLine} – L${h.endLine}</span>
-                            <span class="sr-score">${h.score.toFixed(3)}</span>
-                          </div>
-                          <div class="sr-snip">${truncateSnippet(h.snippet)}</div>
-                        </div>
-                      `,
-                    )}
-                  </div>
-                `
-                : hits && hits.length === 0 && !busy
-                ? html`<div class="card" style="color:var(--fg-3);font-size:12px">No matches above the score threshold.</div>`
-                : null
-            }
-          `
-          : null
-      }
-    </div>
-  `;
-}
-
-function truncateSnippet(text: string, maxLines = 8): string {
-  const lines = text.split("\n");
-  if (lines.length <= maxLines) return text;
-  return `${lines.slice(0, maxLines).join("\n")}\n  …(${lines.length - maxLines} more lines)`;
-}
-
-function toDraft(c: IndexConfig): ExcludeDraft {
-  return {
-    excludeDirs: c.excludeDirs ?? [],
-    excludeFiles: c.excludeFiles ?? [],
-    excludeExts: c.excludeExts ?? [],
-    excludePatterns: c.excludePatterns ?? [],
-    respectGitignore: c.respectGitignore !== false,
-    maxFileBytes: c.maxFileBytes ?? 262144,
-  };
-}
-
-function fromDraft(d: ExcludeDraft): IndexConfig {
-  return {
-    excludeDirs: d.excludeDirs,
-    excludeFiles: d.excludeFiles,
-    excludeExts: d.excludeExts,
-    excludePatterns: d.excludePatterns,
-    respectGitignore: !!d.respectGitignore,
-    maxFileBytes: d.maxFileBytes,
-  };
-}
-
-function SemanticExcludesCard() {
-  const [data, setData] = useState<IndexConfigResponse | null>(null);
-  const [draft, setDraft] = useState<ExcludeDraft | null>(null);
-  const [preview, setPreview] = useState<PreviewData | null>(null);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [info, setInfo] = useState<string | null>(null);
-
-  const load = useCallback(async () => {
-    try {
-      const r = await api<IndexConfigResponse>("/index-config");
-      setData(r);
-      setDraft(toDraft(r.resolved));
-    } catch (err) {
-      setError((err as Error).message);
-    }
-  }, []);
-
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  const reset = useCallback(() => {
-    if (data) setDraft(toDraft(data.defaults));
-    setPreview(null);
-  }, [data]);
-
-  const save = useCallback(async () => {
-    if (!draft) return;
-    setBusy(true);
-    setError(null);
-    setInfo(null);
-    try {
-      const payload = fromDraft(draft);
-      const r = await api<{ changed: string[] }>("/index-config", {
-        method: "POST",
-        body: payload,
-      });
-      setInfo(`saved · ${r.changed.length || 0} fields updated · re-run index to apply`);
-      await load();
-    } catch (err) {
-      setError((err as Error).message);
-    } finally {
-      setBusy(false);
-    }
-  }, [draft, load]);
-
-  const runPreview = useCallback(async () => {
-    if (!draft) return;
-    setBusy(true);
-    setError(null);
-    setInfo("running dry walk against project root…");
-    try {
-      const payload = fromDraft(draft);
-      const r = await api<PreviewData>("/index-config/preview", {
-        method: "POST",
-        body: payload,
-      });
-      setPreview(r);
-      setInfo(null);
-    } catch (err) {
-      setError((err as Error).message);
-      setInfo(null);
-    } finally {
-      setBusy(false);
-    }
-  }, [draft]);
-
-  if (!draft) {
-    return html`
-      <div class="card">
-        <div class="card-h"><span class="title">index config</span></div>
-        <div style="color:var(--fg-3);font-size:12.5px">loading…</div>
-      </div>
-    `;
-  }
-
-  return html`
-    <div class="card">
-      <div class="card-h">
-        <span class="title">index config</span>
-        <span class="meta">
-          <a
-            class="mono"
-            style="color:var(--c-brand);text-decoration:none;font-size:11px;cursor:pointer"
-            onClick=${reset}
-          >reset</a>
-        </span>
-      </div>
-      ${info ? html`<div style="margin-bottom:8px"><span class="pill ok">${info}</span></div>` : null}
-      ${error ? html`<div class="card accent-err" style="margin-bottom:8px">${error}</div>` : null}
-
-      <${ChipFormRow}
-        label="exclude dirs"
-        value=${draft.excludeDirs}
-        onChange=${(v: string[]) => setDraft({ ...draft, excludeDirs: v })}
-        placeholder="dist"
-      />
-      <${ChipFormRow}
-        label="exclude files"
-        value=${draft.excludeFiles}
-        onChange=${(v: string[]) => setDraft({ ...draft, excludeFiles: v })}
-        placeholder="package-lock.json"
-      />
-      <${ChipFormRow}
-        label="exclude exts"
-        value=${draft.excludeExts}
-        onChange=${(v: string[]) => setDraft({ ...draft, excludeExts: v })}
-        placeholder=".lock"
-      />
-      <${ChipFormRow}
-        label="exclude patterns"
-        sub="glob"
-        value=${draft.excludePatterns}
-        onChange=${(v: string[]) => setDraft({ ...draft, excludePatterns: v })}
-        placeholder="**/*.test.ts"
-      />
-
-      <div
-        class="checkbox-row"
-        style="margin-top:8px;cursor:pointer"
-        onClick=${() => setDraft({ ...draft, respectGitignore: !draft.respectGitignore })}
-      >
-        <span class=${`box ${draft.respectGitignore ? "on" : ""}`}>${draft.respectGitignore ? "✓" : ""}</span>
-        <span>respect <code class="mono">.gitignore</code></span>
-      </div>
-
-      <div class="form-row" style="margin-top:10px">
-        <span class="lbl">max file bytes</span>
-        <input
-          class="input mono"
-          type="number"
-          min="1024"
-          step="1024"
-          value=${draft.maxFileBytes}
-          onInput=${(e: Event) =>
-            setDraft({ ...draft, maxFileBytes: Number((e.target as HTMLInputElement).value) || 0 })}
-          style="font-size:12px"
-        />
-        <span class="help">skip files larger than ~${(draft.maxFileBytes / 1024 / 1024).toFixed(1)} MiB</span>
-      </div>
-
-      <div style="display:flex;gap:6px;margin-top:10px">
-        <button class="btn ghost" style="flex:1" disabled=${busy} onClick=${runPreview}>
-          <span class="g">⊕</span><span>Preview</span>
-        </button>
-        <button class="btn primary" style="flex:1" disabled=${busy} onClick=${save}>Save</button>
-      </div>
-
-      ${preview ? html`<div style="margin-top:10px"><${ExcludesPreview} preview=${preview} /></div>` : null}
-    </div>
-  `;
-}
-
-function ExcludesPreview({ preview }: { preview: PreviewData }) {
-  const buckets = preview.skipBuckets || {};
-  const samples = preview.skipSamples || {};
-  const totalSkipped = Object.values(buckets).reduce((a, b) => a + (b || 0), 0);
-  const reasons = [
-    "gitignore",
-    "pattern",
-    "defaultDir",
-    "defaultFile",
-    "binaryExt",
-    "binaryContent",
-    "tooLarge",
-    "readError",
-  ].filter((k) => (buckets[k] || 0) > 0);
-  return html`
-    <div class="excludes-preview">
-      <div class="summary">
-        Preview — would index <strong>${preview.filesIncluded}</strong> file(s), skip <strong>${totalSkipped}</strong>
-      </div>
-      ${
-        reasons.length === 0
-          ? html`<div style="color:var(--fg-3)">nothing skipped — all walked files would be indexed.</div>`
-          : reasons.map(
-              (r) => html`
-                <details>
-                  <summary><strong>${r}: ${buckets[r]}</strong></summary>
-                  <ul>
-                    ${(samples[r] || []).map((p) => html`<li><code>${p}</code></li>`)}
-                    ${
-                      (buckets[r] || 0) > (samples[r] || []).length
-                        ? html`<li style="color:var(--fg-3)">…${(buckets[r] || 0) - (samples[r] || []).length} more</li>`
-                        : null
-                    }
-                  </ul>
-                </details>
-              `,
-            )
-      }
-      ${
-        preview.sampleIncluded?.length
-          ? html`
-            <details>
-              <summary>first ${preview.sampleIncluded.length} included file(s)</summary>
-              <ul>
-                ${preview.sampleIncluded.map((p) => html`<li><code>${p}</code></li>`)}
-              </ul>
-            </details>
-          `
-          : null
-      }
-    </div>
-  `;
-}
-
-function ChipFormRow({
-  label,
-  sub,
-  value,
-  onChange,
-  placeholder = "+ add",
-}: {
-  label: string;
-  sub?: string;
-  value: string[];
-  onChange: (v: string[]) => void;
-  placeholder?: string;
-}) {
-  const [adding, setAdding] = useState("");
-  const remove = (entry: string) => onChange(value.filter((v) => v !== entry));
-  const commit = () => {
-    const trimmed = adding.trim();
-    if (!trimmed || value.includes(trimmed)) {
-      setAdding("");
-      return;
-    }
-    onChange([...value, trimmed]);
-    setAdding("");
-  };
-  return html`
-    <div class="form-row">
-      <span class="lbl">
-        ${label}
-        ${sub ? html`<span style="color:var(--fg-3);font-weight:400;text-transform:none;letter-spacing:0"> · ${sub}</span>` : null}
-      </span>
-      <div style="display:flex;flex-wrap:wrap;gap:4px">
-        ${value.map(
-          (e) => html`
-            <span class="chip-f">
-              <span>${e}</span>
-              <span class="x" style="cursor:pointer" onClick=${() => remove(e)} title="remove">×</span>
-            </span>
-          `,
-        )}
-        <input
-          type="text"
-          class="chip-add-input"
-          value=${adding}
-          placeholder=${placeholder}
-          onInput=${(ev: Event) => setAdding((ev.target as HTMLInputElement).value)}
-          onKeyDown=${(ev: KeyboardEvent) => {
-            if (ev.key === "Enter") {
-              ev.preventDefault();
-              commit();
-            }
-          }}
-          onBlur=${commit}
-        />
-      </div>
-    </div>
-  `;
-}
-
-function SemanticJobView({ job, running }: { job: SemanticJob; running: boolean }) {
-  const phaseLabel =
-    ({
-      scan: "scanning files",
-      embed: "embedding chunks",
-      write: "writing index",
-      done: "done",
-      error: "error",
-    } as Record<string, string>)[job.phase] ?? job.phase;
-  const total = job.chunksTotal ?? 0;
-  const doneN = job.chunksDone ?? 0;
-  const ratio = total > 0 ? Math.min(1, doneN / total) : 0;
-  const elapsed = ((Date.now() - job.startedAt) / 1000).toFixed(1);
-
-  return html`
-    <div class="kv">
-      <div><span class="kv-key">phase</span>
-        <span class=${`pill ${job.phase === "error" ? "pill-err" : running ? "pill-active" : "pill-dim"}`}>${phaseLabel}</span>
-        ${job.aborted ? html`<span class="pill warn" style="margin-left: 6px;">stopping</span>` : null}
-        <span style="color:var(--fg-3);margin-left:8px">${elapsed}s</span>
-      </div>
-      ${
-        job.filesScanned !== null && job.filesScanned !== undefined
-          ? html`<div><span class="kv-key">files</span>scanned ${job.filesScanned}${
-              job.filesChanged != null ? ` · changed ${job.filesChanged}` : ""
-            }${job.filesSkipped ? ` · skipped ${job.filesSkipped}` : ""}</div>`
-          : null
-      }
-      ${
-        total > 0
-          ? html`
-            <div>
-              <span class="kv-key">chunks</span>${doneN} / ${total} (${(ratio * 100).toFixed(0)}%)
-            </div>
-            <div class="bar" style="margin-top: 4px;">
-              <div class="fill" style=${`width: ${(ratio * 100).toFixed(1)}%; background: var(--primary);`}></div>
-            </div>
-          `
-          : null
-      }
-      ${
-        job.error
-          ? html`<div><span class="kv-key">error</span><span class="err">${job.error}</span></div>`
-          : null
-      }
-      ${
-        job.result
-          ? html`<div><span class="kv-key">result</span>added ${job.result.chunksAdded} · removed ${job.result.chunksRemoved}${
-              job.result.chunksSkipped ? ` · failed ${job.result.chunksSkipped}` : ""
-            } · ${(job.result.durationMs / 1000).toFixed(1)}s</div>`
-          : null
-      }
-      ${
-        job.result?.skipBuckets
-          ? html`<${SkipBucketsView} buckets=${job.result.skipBuckets} />`
-          : null
-      }
-    </div>
-  `;
-}
-
-function SkipBucketsView({ buckets }: { buckets: Record<string, number> }) {
-  const order: [string, string][] = [
-    ["gitignore", "gitignore"],
-    ["pattern", "pattern"],
-    ["defaultDir", "defaultDir"],
-    ["defaultFile", "defaultFile"],
-    ["binaryExt", "binaryExt"],
-    ["binaryContent", "binaryContent"],
-    ["tooLarge", "tooLarge"],
-    ["readError", "readError"],
-  ];
-  const total = order.reduce((a, [k]) => a + (buckets[k] || 0), 0);
-  if (total === 0) return null;
-  const parts = order
-    .filter(([k]) => (buckets[k] || 0) > 0)
-    .map(([k, label]) => `${label}: ${buckets[k]}`);
-  return html`<div><span class="kv-key">skipped</span>${total} files <span style="color:var(--fg-3)">(${parts.join(", ")})</span></div>`;
-}

dashboard/src/panels/sessions.ts

@@ -1,153 +0,0 @@
-import { useCallback, useState } from "preact/hooks";
-import { ChatMessage } from "../components/chat-internals.js";
-import { api } from "../lib/api.js";
-import { fmtBytes, fmtNum, fmtRelativeTime } from "../lib/format.js";
-import { html } from "../lib/html.js";
-import { usePoll } from "../lib/use-poll.js";
-
-interface SessionEntry {
-  name: string;
-  messageCount: number;
-  size: number;
-  mtime: string | number;
-}
-
-interface SessionsData {
-  sessions?: SessionEntry[];
-}
-
-interface OpenSession {
-  name: string;
-  messages: unknown[] | null;
-  error?: string;
-}
-
-export function SessionsPanel() {
-  const { data, error, loading } = usePoll<SessionsData>("/sessions", 5000);
-  const [open, setOpen] = useState<OpenSession | null>(null);
-  const [openLoading, setOpenLoading] = useState(false);
-  const [filter, setFilter] = useState("");
-
-  const view = useCallback(async (name: string) => {
-    setOpen({ name, messages: null });
-    setOpenLoading(true);
-    try {
-      const detail = await api<{ messages: unknown[] }>(`/sessions/${encodeURIComponent(name)}`);
-      setOpen({ name, messages: detail.messages });
-    } catch (err) {
-      setOpen({ name, messages: null, error: (err as Error).message });
-    } finally {
-      setOpenLoading(false);
-    }
-  }, []);
-
-  if (loading && !data)
-    return html`<div class="card" style="color:var(--fg-3)">loading sessions…</div>`;
-  if (error) return html`<div class="card accent-err">sessions failed: ${error.message}</div>`;
-  const sessions = data?.sessions ?? [];
-
-  if (sessions.length === 0)
-    return html`<div class="card" style="color:var(--fg-3)">No saved sessions yet.</div>`;
-
-  const filtered = filter.trim()
-    ? sessions.filter((s) => s.name.toLowerCase().includes(filter.toLowerCase()))
-    : sessions;
-
-  return html`
-    <div class="sessions-grid">
-      <div class="sessions-list">
-        <div class="ssl-h">
-          <input
-            type="text"
-            placeholder="filter sessions"
-            value=${filter}
-            onInput=${(e: Event) => setFilter((e.target as HTMLInputElement).value)}
-            style="flex:1"
-          />
-        </div>
-        <div class="chips" style="padding:0 12px 8px">
-          <span class="chip-f active">all <span class="ct">${sessions.length}</span></span>
-        </div>
-        <div class="ssl-rows">
-          ${filtered.map(
-            (s) => html`
-              <div
-                class=${`ssl-row ${open?.name === s.name ? "sel" : ""}`}
-                onClick=${() => view(s.name)}
-              >
-                <span class="name">${s.name}</span>
-                <span class="meta">
-                  <span><span class="v">${fmtNum(s.messageCount)}</span> msgs</span>
-                  <span><span class="v">${fmtBytes(s.size)}</span></span>
-                  <span>${fmtRelativeTime(s.mtime)}</span>
-                </span>
-              </div>
-            `,
-          )}
-        </div>
-      </div>
-
-      <div class="sessions-detail">
-        ${
-          open == null
-            ? html`<div style="color:var(--fg-3);font-size:13px;text-align:center;padding:60px 20px">
-                Pick a session on the left to read its transcript.
-              </div>`
-            : html`
-                <div class="sessions-detail-h">
-                  <span class="name">${open.name}</span>
-                  <span class="ws">
-                    ${
-                      open.messages
-                        ? `${open.messages.length} message${open.messages.length === 1 ? "" : "s"}`
-                        : "loading…"
-                    }
-                  </span>
-                  <span class="actions">
-                    <button class="btn ghost" onClick=${() => setOpen(null)}>← back</button>
-                  </span>
-                </div>
-                <div class="card accent-brand" style="margin-bottom:10px">
-                  <div class="card-h"><span class="title">Resume in TUI</span></div>
-                  <div class="card-b" style="font-size:12.5px;color:var(--fg-2)">
-                    Mid-session swap requires a restart so the message log can rewind cleanly. Quit your current session, then run:
-                    <code class="mono" style="display:block;margin-top:8px;padding:8px 10px;background:var(--bg-input);border-radius:var(--r);color:var(--fg-0);font-size:12px;user-select:all">reasonix chat --session ${open.name}</code>
-                  </div>
-                </div>
-                ${
-                  openLoading
-                    ? html`<div style="color:var(--fg-3)">loading transcript…</div>`
-                    : open.error
-                      ? html`<div class="card accent-err">${open.error}</div>`
-                      : open.messages && open.messages.length > 0
-                        ? html`<div class="chat-feed" style="max-height:calc(100vh - 220px);overflow-y:auto">
-                            ${open.messages.map(
-                              (m: any, i: number) => html`
-                                <${ChatMessage}
-                                  key=${i}
-                                  msg=${{
-                                    id: `r-${i}`,
-                                    role:
-                                      m.role === "tool"
-                                        ? "tool"
-                                        : m.role === "assistant"
-                                          ? "assistant"
-                                          : m.role === "user"
-                                            ? "user"
-                                            : "info",
-                                    text: m.content ?? "",
-                                    toolName: m.toolName,
-                                  }}
-                                  streaming=${false}
-                                />
-                              `,
-                            )}
-                          </div>`
-                        : html`<div style="color:var(--fg-3)">empty transcript.</div>`
-                }
-              `
-        }
-      </div>
-    </div>
-  `;
-}

dashboard/src/panels/settings.ts

@@ -1,183 +0,0 @@
-import { useCallback, useEffect, useState } from "preact/hooks";
-import { api } from "../lib/api.js";
-import { html } from "../lib/html.js";
-
-interface SettingsData {
-  apiKey?: string | null;
-  baseUrl?: string;
-  preset?: string;
-  reasoningEffort?: string;
-  search?: boolean;
-  model?: string;
-  editMode?: string;
-}
-
-export function SettingsPanel() {
-  const [data, setData] = useState<SettingsData | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [saving, setSaving] = useState(false);
-  const [saved, setSaved] = useState<string | null>(null);
-  const [draft, setDraft] = useState<Partial<SettingsData>>({});
-
-  const load = useCallback(async () => {
-    try {
-      const r = await api<SettingsData>("/settings");
-      setData(r);
-      setDraft({});
-    } catch (err) {
-      setError((err as Error).message);
-    }
-  }, []);
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  const save = useCallback(
-    async (fields: Partial<SettingsData>) => {
-      setSaving(true);
-      setError(null);
-      try {
-        await api("/settings", { method: "POST", body: fields });
-        await load();
-        setSaved(`saved: ${Object.keys(fields).join(", ")}`);
-        setTimeout(() => setSaved(null), 3000);
-      } catch (err) {
-        setError((err as Error).message);
-      } finally {
-        setSaving(false);
-      }
-    },
-    [load],
-  );
-
-  if (!data && !error)
-    return html`<div class="card" style="color:var(--fg-3)">loading settings…</div>`;
-  if (error && !data) return html`<div class="card accent-err">${error}</div>`;
-  if (!data) return null;
-  const v = data;
-
-  const sectionH3 = (text: string) => html`
-    <h3 style="margin:18px 0 8px;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em">${text}</h3>
-  `;
-  const fieldRow = (
-    label: string,
-    control: unknown,
-    note?: string,
-  ) => html`
-    <div style="display:flex;align-items:center;gap:10px;padding:6px 0">
-      <span style="flex:0 0 110px;font-family:var(--font-mono);font-size:11.5px;color:var(--fg-3)">${label}</span>
-      <div style="flex:1;display:flex;align-items:center;gap:8px">${control}</div>
-      ${note ? html`<span style="color:var(--fg-3);font-size:11px">${note}</span>` : null}
-    </div>
-  `;
-
-  return html`
-    <div style="max-width:760px;display:flex;flex-direction:column;gap:6px">
-      ${
-        saved ? html`<div><span class="pill ok">${saved}</span></div>` : null
-      }
-      ${
-        error ? html`<div class="card accent-err">${error}</div>` : null
-      }
-
-      ${sectionH3("DeepSeek API")}
-      <div class="card">
-        ${fieldRow(
-          "API key",
-          html`<code class="mono" style="color:var(--fg-2);font-size:11.5px">${v.apiKey ?? "(not set)"}</code>`,
-        )}
-        ${fieldRow(
-          "replace",
-          html`
-            <input
-              type="password"
-              placeholder="paste a fresh sk-… token"
-              value=${draft.apiKey ?? ""}
-              onInput=${(e: Event) => setDraft({ ...draft, apiKey: (e.target as HTMLInputElement).value })}
-              style="flex:1"
-            />
-            <button
-              class="btn primary"
-              disabled=${saving || !(draft.apiKey ?? "").trim()}
-              onClick=${() => save({ apiKey: draft.apiKey })}
-            >Save key</button>
-          `,
-        )}
-        ${fieldRow(
-          "base url",
-          html`
-            <input
-              type="text"
-              value=${draft.baseUrl ?? v.baseUrl ?? ""}
-              placeholder="https://api.deepseek.com (default)"
-              onInput=${(e: Event) => setDraft({ ...draft, baseUrl: (e.target as HTMLInputElement).value })}
-              style="flex:1"
-            />
-            <button
-              class="btn"
-              disabled=${saving || (draft.baseUrl ?? v.baseUrl ?? "") === (v.baseUrl ?? "")}
-              onClick=${() => save({ baseUrl: draft.baseUrl })}
-            >Save</button>
-          `,
-        )}
-      </div>
-
-      ${sectionH3("Defaults")}
-      <div class="card">
-        ${fieldRow(
-          "preset",
-          html`
-            <select
-              value=${["auto", "flash", "pro"].includes(v.preset ?? "") ? v.preset : "auto"}
-              onChange=${(e: Event) => save({ preset: (e.target as HTMLSelectElement).value })}
-              disabled=${saving}
-            >
-              <option value="auto">auto — flash → pro on hard turns</option>
-              <option value="flash">flash — always flash, no auto-escalate</option>
-              <option value="pro">pro — always pro</option>
-            </select>
-          `,
-          "applies next turn",
-        )}
-        ${fieldRow(
-          "effort",
-          html`
-            <select
-              value=${v.reasoningEffort}
-              onChange=${(e: Event) => save({ reasoningEffort: (e.target as HTMLSelectElement).value })}
-              disabled=${saving}
-            >
-              <option value="max">max (default — best)</option>
-              <option value="high">high (cheaper / faster)</option>
-            </select>
-          `,
-          "applies next turn",
-        )}
-        ${fieldRow(
-          "web search",
-          html`
-            <button
-              class=${`btn ${v.search ? "primary" : ""}`}
-              onClick=${() => save({ search: !v.search })}
-              disabled=${saving}
-            >${v.search ? "ON" : "off"}</button>
-          `,
-          "web_fetch + web_search tools",
-        )}
-      </div>
-
-      ${sectionH3("Runtime")}
-      <div class="card">
-        ${fieldRow(
-          "active model",
-          html`<code class="mono">${v.model ?? "—"}</code>`,
-        )}
-        ${fieldRow(
-          "edit mode",
-          html`<code class="mono">${v.editMode}</code>`,
-          "switch from the Chat tab header",
-        )}
-      </div>
-    </div>
-  `;
-}

dashboard/src/panels/skills.ts

@@ -1,246 +0,0 @@
-import { useCallback, useEffect, useState } from "preact/hooks";
-import { api } from "../lib/api.js";
-import { html } from "../lib/html.js";
-
-interface SkillEntry {
-  name: string;
-  description?: string;
-  runs7d?: number;
-}
-
-interface SkillsData {
-  paths: { project?: string };
-  project: SkillEntry[];
-  global: SkillEntry[];
-  builtin: SkillEntry[];
-}
-
-type Scope = "project" | "global" | "builtin";
-
-export function SkillsPanel() {
-  const [data, setData] = useState<SkillsData | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [open, setOpen] = useState<{ scope: Scope; name: string } | null>(null);
-  const [body, setBody] = useState("");
-  const [busy, setBusy] = useState(false);
-  const [info, setInfo] = useState<string | null>(null);
-  const [newName, setNewName] = useState("");
-  const [newScope, setNewScope] = useState<"global" | "project">("global");
-  const [filter, setFilter] = useState("");
-
-  const load = useCallback(async () => {
-    try {
-      setData(await api<SkillsData>("/skills"));
-    } catch (err) {
-      setError((err as Error).message);
-    }
-  }, []);
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  const openSkill = useCallback(async (scope: Scope, name: string) => {
-    setOpen({ scope, name });
-    if (scope === "builtin") {
-      setBody("");
-      return;
-    }
-    setBusy(true);
-    try {
-      const r = await api<{ body: string }>(`/skills/${scope}/${encodeURIComponent(name)}`);
-      setBody(r.body);
-    } catch (err) {
-      setError((err as Error).message);
-    } finally {
-      setBusy(false);
-    }
-  }, []);
-
-  const save = useCallback(async () => {
-    if (!open) return;
-    setBusy(true);
-    try {
-      await api(`/skills/${open.scope}/${encodeURIComponent(open.name)}`, {
-        method: "POST",
-        body: { body },
-      });
-      setInfo(`saved ${open.scope}/${open.name}`);
-      setTimeout(() => setInfo(null), 3000);
-      await load();
-    } catch (err) {
-      setError((err as Error).message);
-    } finally {
-      setBusy(false);
-    }
-  }, [open, body, load]);
-
-  const remove = useCallback(async () => {
-    if (!open) return;
-    if (!confirm(`Delete skill ${open.scope}/${open.name}?`)) return;
-    setBusy(true);
-    try {
-      await api(`/skills/${open.scope}/${encodeURIComponent(open.name)}`, { method: "DELETE" });
-      setOpen(null);
-      await load();
-    } catch (err) {
-      setError((err as Error).message);
-    } finally {
-      setBusy(false);
-    }
-  }, [open, load]);
-
-  const create = useCallback(async () => {
-    if (!newName.trim()) return;
-    setBusy(true);
-    const stub = `---\nname: ${newName.trim()}\ndescription: TODO — one-line description that helps the model match this skill\n---\n\n# ${newName.trim()}\n\n`;
-    try {
-      await api(`/skills/${newScope}/${encodeURIComponent(newName.trim())}`, {
-        method: "POST",
-        body: { body: stub },
-      });
-      setNewName("");
-      await load();
-      openSkill(newScope, newName.trim());
-    } catch (err) {
-      setError((err as Error).message);
-    } finally {
-      setBusy(false);
-    }
-  }, [newName, newScope, load, openSkill]);
-
-  if (!data && !error)
-    return html`<div class="card" style="color:var(--fg-3)">loading skills…</div>`;
-  if (error && !data) return html`<div class="card accent-err">${error}</div>`;
-  if (!data) return null;
-
-  const allWith = [
-    ...data.project.map((s) => ({ scope: "project" as Scope, ...s })),
-    ...data.global.map((s) => ({ scope: "global" as Scope, ...s })),
-    ...data.builtin.map((s) => ({ scope: "builtin" as Scope, ...s })),
-  ];
-  const filtered = filter.trim()
-    ? allWith.filter(
-        (s) =>
-          s.name.toLowerCase().includes(filter.toLowerCase()) ||
-          (s.description ?? "").toLowerCase().includes(filter.toLowerCase()),
-      )
-    : allWith;
-
-  return html`
-    <div class="sessions-grid">
-      <div class="sessions-list">
-        <div class="ssl-h">
-          <input
-            type="text"
-            placeholder="filter skills"
-            value=${filter}
-            onInput=${(e: Event) => setFilter((e.target as HTMLInputElement).value)}
-            style="flex:1"
-          />
-        </div>
-        <div class="chips" style="padding:0 12px 8px">
-          <span class="chip-f active">all <span class="ct">${allWith.length}</span></span>
-          <span class="chip-f">project <span class="ct">${data.project.length}</span></span>
-          <span class="chip-f">global <span class="ct">${data.global.length}</span></span>
-          <span class="chip-f">builtin <span class="ct">${data.builtin.length}</span></span>
-        </div>
-
-        <div style="padding:0 12px 8px;display:flex;gap:6px;flex-wrap:wrap">
-          <select
-            value=${newScope}
-            onChange=${(e: Event) => setNewScope((e.target as HTMLSelectElement).value as "global" | "project")}
-            style="flex:0 0 auto;font-size:11.5px;padding:5px 6px"
-          >
-            <option value="global">global</option>
-            ${data.paths.project ? html`<option value="project">project</option>` : null}
-          </select>
-          <input
-            type="text"
-            placeholder="new skill"
-            value=${newName}
-            onInput=${(e: Event) => setNewName((e.target as HTMLInputElement).value)}
-            style="flex:1;min-width:0"
-          />
-          <button class="btn primary" disabled=${busy || !newName.trim()} onClick=${create} style="flex:0 0 auto">+</button>
-        </div>
-
-        <div class="ssl-rows">
-          ${filtered.map((s) => {
-            const sel = open?.scope === s.scope && open?.name === s.name;
-            return html`
-              <div
-                class=${`ssl-row ${sel ? "sel" : ""}`}
-                onClick=${() => openSkill(s.scope, s.name)}
-              >
-                <span class="name">
-                  ${s.name}
-                  ${s.scope === "builtin" ? html`<span class="pill">builtin</span>` : null}
-                </span>
-                <span class="preview">${s.description ?? "(no description)"}</span>
-                <span class="meta">
-                  ${
-                    typeof s.runs7d === "number" && s.runs7d > 0
-                      ? html`<span><span class="v">${s.runs7d}</span> runs · 7d</span>`
-                      : null
-                  }
-                  <span class="dim">${s.scope}</span>
-                </span>
-              </div>
-            `;
-          })}
-        </div>
-      </div>
-
-      <div class="sessions-detail">
-        ${
-          open == null
-            ? html`<div style="color:var(--fg-3);font-size:13px;text-align:center;padding:60px 20px">
-                Pick a skill on the left, or create a new one above.
-              </div>`
-            : open.scope === "builtin"
-              ? (() => {
-                  const builtin = data.builtin.find((b) => b.name === open.name);
-                  return html`
-                    <div class="sessions-detail-h">
-                      <span class="name">${open.scope}/${open.name}</span>
-                      <span class="ws"><span class="pill">read-only · builtin</span></span>
-                      <span class="actions">
-                        <button class="btn ghost" onClick=${() => setOpen(null)}>← back</button>
-                      </span>
-                    </div>
-                    <div style="color:var(--fg-2);font-size:13px;line-height:1.6">
-                      ${builtin?.description ?? "(no description)"}
-                    </div>
-                    <div style="margin-top:14px;color:var(--fg-3);font-size:11.5px">
-                      Built-in skills ship with Reasonix; the model picks them up automatically. To customize, create a project- or global-scoped skill with the same name.
-                    </div>
-                  `;
-                })()
-              : html`
-                <div class="sessions-detail-h">
-                  <span class="name">${open.scope}/${open.name}</span>
-                  <span class="ws">${body.length.toLocaleString()} chars</span>
-                  <span class="actions">
-                    <button class="btn primary" disabled=${busy} onClick=${save}>Save</button>
-                    <button class="btn" disabled=${busy} onClick=${remove}
-                      style="border-color:var(--c-err);color:var(--c-err)">Delete</button>
-                    <button class="btn ghost" onClick=${() => setOpen(null)}>← back</button>
-                  </span>
-                </div>
-                ${info ? html`<div style="margin-bottom:8px"><span class="pill ok">${info}</span></div>` : null}
-                ${error ? html`<div class="card accent-err" style="margin-bottom:8px">${error}</div>` : null}
-                <textarea
-                  style="width:100%;min-height:520px;background:var(--bg-input);color:var(--fg-0);border:1px solid var(--bd);border-radius:var(--r);padding:12px;font-family:var(--font-mono);font-size:13px;line-height:1.55;resize:vertical"
-                  value=${body}
-                  onInput=${(e: Event) => setBody((e.target as HTMLTextAreaElement).value)}
-                  disabled=${busy}
-                ></textarea>
-                <div style="margin-top:8px;color:var(--fg-3);font-size:11.5px">
-                  re-loaded on next <code class="mono">/new</code> or session restart
-                </div>
-              `
-        }
-      </div>
-    </div>
-  `;
-}

dashboard/src/panels/system.ts

@@ -1,113 +0,0 @@
-import { fmtBytes, fmtNum } from "../lib/format.js";
-import { html } from "../lib/html.js";
-import { usePoll } from "../lib/use-poll.js";
-
-interface HealthData {
-  version: string;
-  latestVersion: string | null;
-  sessions: { count: number; totalBytes: number; path: string };
-  memory: { fileCount: number; totalBytes: number; path: string };
-  semantic: { exists: boolean; fileCount?: number; totalBytes?: number; path: string };
-  usageLog: { bytes: number; path: string };
-  jobs: number | null;
-  reasonixHome: string;
-}
-
-export function SystemPanel() {
-  const { data, error, loading } = usePoll<HealthData>("/health", 5000);
-  if (loading && !data)
-    return html`<div class="card" style="color:var(--fg-3)">loading health…</div>`;
-  if (error) return html`<div class="card accent-err">health failed: ${error.message}</div>`;
-  if (!data) return null;
-  const h = data;
-  const upToDate = h.latestVersion ? h.latestVersion === h.version : null;
-
-  return html`
-    <div style="display:flex;flex-direction:column;gap:14px">
-      <h3 style="margin:0;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em">Health checks</h3>
-      <div class="health-grid">
-        <div class=${`health-item ${upToDate === false ? "warn" : ""}`}>
-          <div class="lbl">
-            version
-            ${
-              upToDate === null
-                ? html`<span class="pill">checking</span>`
-                : upToDate
-                  ? html`<span class="pill ok">● latest</span>`
-                  : html`<span class="pill warn">● out of date</span>`
-            }
-          </div>
-          <div class="v">${h.version}</div>
-          <div class="meta">${
-            upToDate === null
-              ? "version check pending"
-              : upToDate
-                ? "up to date"
-                : `latest: ${h.latestVersion}`
-          }</div>
-        </div>
-
-        <div class="health-item">
-          <div class="lbl">sessions <span class="pill ok">● ok</span></div>
-          <div class="v">${fmtBytes(h.sessions.totalBytes)}</div>
-          <div class="meta">${fmtNum(h.sessions.count)} files</div>
-        </div>
-
-        <div class="health-item">
-          <div class="lbl">memory <span class="pill ok">● ok</span></div>
-          <div class="v">${fmtBytes(h.memory.totalBytes)}</div>
-          <div class="meta">${fmtNum(h.memory.fileCount)} files</div>
-        </div>
-
-        <div class="health-item">
-          <div class="lbl">
-            semantic index
-            ${
-              h.semantic.exists
-                ? html`<span class="pill ok">● built</span>`
-                : html`<span class="pill">— none</span>`
-            }
-          </div>
-          <div class="v">${h.semantic.exists ? fmtBytes(h.semantic.totalBytes) : "—"}</div>
-          <div class="meta">
-            ${h.semantic.exists ? `${fmtNum(h.semantic.fileCount)} files` : "run reasonix index to build"}
-          </div>
-        </div>
-
-        <div class="health-item">
-          <div class="lbl">usage log <span class="pill ok">● ok</span></div>
-          <div class="v">${fmtBytes(h.usageLog.bytes)}</div>
-          <div class="meta">~/.reasonix/usage.jsonl</div>
-        </div>
-
-        <div class="health-item">
-          <div class="lbl">
-            background jobs
-            ${
-              h.jobs === null
-                ? html`<span class="pill">— no session</span>`
-                : html`<span class="pill ok">● ${fmtNum(h.jobs)}</span>`
-            }
-          </div>
-          <div class="v">${h.jobs === null ? "—" : `${fmtNum(h.jobs)} running`}</div>
-          <div class="meta">${h.jobs === null ? "attach a session to see jobs" : "shell + spawn"}</div>
-        </div>
-      </div>
-
-      <div class="card" style="padding:0">
-        <div class="card-h" style="padding:12px 14px 6px">
-          <span class="title">paths</span>
-        </div>
-        <table class="tbl">
-          <tbody style="font-size:11.5px">
-            <tr><td class="dim" style="padding:5px 14px">home</td><td class="path">${h.reasonixHome}</td></tr>
-            <tr><td class="dim" style="padding:5px 14px">sessions</td><td class="path">${h.sessions.path}</td></tr>
-            <tr><td class="dim" style="padding:5px 14px">memory</td><td class="path">${h.memory.path}</td></tr>
-            <tr><td class="dim" style="padding:5px 14px">semantic</td><td class="path">${h.semantic.path}</td></tr>
-            <tr><td class="dim" style="padding:5px 14px">usage</td><td class="path">${h.usageLog.path}</td></tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  `;
-}

dashboard/src/panels/tools.ts

@@ -1,77 +0,0 @@
-import { html } from "../lib/html.js";
-import { usePoll } from "../lib/use-poll.js";
-
-interface ToolEntry {
-  name: string;
-  description?: string;
-  readOnly?: boolean;
-  flattened?: boolean;
-}
-
-interface ToolsData {
-  total: number;
-  planMode?: boolean;
-  tools: ToolEntry[];
-}
-
-interface ToolsError {
-  status?: number;
-  message: string;
-  body?: { error?: string };
-}
-
-export function ToolsPanel() {
-  const { data, error, loading } = usePoll<ToolsData>("/tools", 4000);
-  if (loading && !data)
-    return html`<div class="card" style="color:var(--fg-3)">loading tools…</div>`;
-  const e = error as ToolsError | null;
-  if (e?.status === 503) {
-    return html`<div class="card accent-warn">${e.body?.error ?? "live tools view requires an attached session"}</div>`;
-  }
-  if (e) return html`<div class="card accent-err">tools failed: ${e.message}</div>`;
-  if (!data) return null;
-  const t = data;
-
-  return html`
-    <div style="display:flex;flex-direction:column;gap:14px">
-      <div class="chips">
-        <span class="chip-f active">all <span class="ct">${t.total}</span></span>
-        ${t.planMode ? html`<span class="chip-f" style="border-color:var(--c-warn);color:var(--c-warn)">plan mode — writes gated</span>` : null}
-      </div>
-
-      ${
-        t.tools.length === 0
-          ? html`<div class="card" style="color:var(--fg-3)">No tools registered.</div>`
-          : html`
-            <div class="card" style="padding:0;overflow:hidden">
-              <table class="tbl">
-                <thead>
-                  <tr>
-                    <th>tool</th>
-                    <th>flags</th>
-                    <th>description</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  ${t.tools.map(
-                    (tool) => html`
-                      <tr>
-                        <td><code class="mono">${tool.name}</code></td>
-                        <td>
-                          ${tool.readOnly
-                            ? html`<span class="pill ok">read-only</span>`
-                            : html`<span class="pill acc">write</span>`}
-                          ${tool.flattened ? html` <span class="pill">flat</span>` : null}
-                        </td>
-                        <td class="dim">${tool.description ?? ""}</td>
-                      </tr>
-                    `,
-                  )}
-                </tbody>
-              </table>
-            </div>
-          `
-      }
-    </div>
-  `;
-}

dashboard/src/panels/usage.ts

@@ -1,269 +0,0 @@
-import { useEffect, useRef, useState } from "preact/hooks";
-import { api } from "../lib/api.js";
-import { fmtNum, fmtPct, fmtUsd } from "../lib/format.js";
-import { html } from "../lib/html.js";
-import { usePoll } from "../lib/use-poll.js";
-
-type UPlotInstance = {
-  destroy(): void;
-  setSize(opts: { width: number; height: number }): void;
-};
-
-type UPlotConstructor = new (
-  opts: unknown,
-  data: unknown,
-  el: HTMLElement,
-) => UPlotInstance;
-
-let uPlotPromise: Promise<UPlotConstructor> | null = null;
-function loadUPlot(): Promise<UPlotConstructor> {
-  if (!uPlotPromise) {
-    uPlotPromise = import("uplot").then(
-      (m) => (m.default ?? m) as UPlotConstructor,
-    );
-  }
-  return uPlotPromise;
-}
-
-interface UsageDay {
-  day: string;
-  costUsd: number;
-  cacheSavingsUsd: number;
-  turns: number;
-}
-
-function UsageChart({ days }: { days: UsageDay[] }) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const plotRef = useRef<UPlotInstance | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-    loadUPlot().then((uPlot) => {
-      if (cancelled || !containerRef.current) return;
-      if (plotRef.current) {
-        plotRef.current.destroy();
-        plotRef.current = null;
-      }
-      if (!days || days.length === 0) return;
-      const xs = days.map((d) => Math.floor(Date.parse(d.day) / 1000));
-      const cost = days.map((d) => d.costUsd);
-      const saved = days.map((d) => d.cacheSavingsUsd);
-      const turns = days.map((d) => d.turns);
-      const data = [xs, cost, saved, turns];
-      const opts = {
-        width: containerRef.current.clientWidth,
-        height: 280,
-        cursor: { drag: { x: true, y: false } },
-        scales: {
-          x: { time: true },
-          y: { auto: true },
-          turns: { auto: true },
-        },
-        axes: [
-          { stroke: "#94a3b8", grid: { stroke: "rgba(148, 163, 184, 0.08)" } },
-          {
-            scale: "y",
-            label: "USD",
-            stroke: "#94a3b8",
-            grid: { stroke: "rgba(148, 163, 184, 0.08)" },
-            values: (_u: unknown, v: number[]) => v.map((n) => `$${n.toFixed(4)}`),
-          },
-          {
-            scale: "turns",
-            side: 1,
-            label: "turns",
-            stroke: "#94a3b8",
-            grid: { show: false },
-          },
-        ],
-        series: [
-          {},
-          { label: "cost", stroke: "#67e8f9", width: 2, fill: "rgba(103, 232, 249, 0.10)" },
-          { label: "cache saved", stroke: "#5eead4", width: 2, dash: [4, 4] },
-          {
-            label: "turns",
-            stroke: "#c4b5fd",
-            scale: "turns",
-            width: 1.5,
-            points: { show: true, size: 4 },
-          },
-        ],
-        legend: { live: true },
-      };
-      plotRef.current = new uPlot(opts, data, containerRef.current);
-    });
-
-    const ro = new ResizeObserver(() => {
-      if (plotRef.current && containerRef.current) {
-        plotRef.current.setSize({ width: containerRef.current.clientWidth, height: 280 });
-      }
-    });
-    if (containerRef.current) ro.observe(containerRef.current);
-
-    return () => {
-      cancelled = true;
-      ro.disconnect();
-      if (plotRef.current) {
-        plotRef.current.destroy();
-        plotRef.current = null;
-      }
-    };
-  }, [days]);
-
-  return html`<div ref=${containerRef} style="width: 100%; min-height: 280px;"></div>`;
-}
-
-interface Bucket {
-  label: string;
-  turns: number;
-  cacheHitTokens: number;
-  cacheMissTokens: number;
-  costUsd: number;
-  cacheSavingsUsd: number;
-  claudeEquivUsd: number;
-}
-
-interface UsageSummary {
-  recordCount: number;
-  logSize: string;
-  buckets: Bucket[];
-  byModel: { model: string; turns: number }[];
-  subagents?: { total: number; costUsd: number; totalDurationMs: number };
-}
-
-export function UsagePanel() {
-  const { data: summary, error, loading } = usePoll<UsageSummary>("/usage", 5000);
-  const [series, setSeries] = useState<UsageDay[] | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-    (async () => {
-      try {
-        const s = await api<{ days?: UsageDay[] }>("/usage/series");
-        if (!cancelled) setSeries(s.days ?? []);
-      } catch {
-        /* keep null; chart hides */
-      }
-    })();
-    const t = setInterval(async () => {
-      try {
-        const s = await api<{ days?: UsageDay[] }>("/usage/series");
-        if (!cancelled) setSeries(s.days ?? []);
-      } catch {
-        /* swallow */
-      }
-    }, 30_000);
-    return () => {
-      cancelled = true;
-      clearInterval(t);
-    };
-  }, []);
-
-  if (loading && !summary)
-    return html`<div class="card" style="color:var(--fg-3)">loading usage…</div>`;
-  if (error) return html`<div class="card accent-err">usage failed: ${error.message}</div>`;
-  if (!summary) return null;
-  const u = summary;
-
-  const sectionH3 = (text: string) => html`
-    <h3 style="margin:18px 0 8px;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em">${text}</h3>
-  `;
-
-  return html`
-    <div style="display:flex;flex-direction:column;gap:6px">
-      <div class="chips">
-        <span class="chip-f active">${u.recordCount.toLocaleString()} records</span>
-        <span class="chip-f">${u.logSize}</span>
-      </div>
-
-      ${
-        series && series.length > 0
-          ? html`
-            <div class="card" style="padding:18px">
-              <div class="card-h">
-                <span class="title">Daily usage</span>
-                <span class="meta">cost · cache saved · turns</span>
-              </div>
-              <${UsageChart} days=${series} />
-            </div>
-          `
-          : null
-      }
-
-      ${
-        u.recordCount === 0
-          ? html`<div class="card" style="color:var(--fg-3);margin-top:8px">
-              No usage data yet — run a turn in <code class="mono">reasonix chat</code> /
-              <code class="mono">code</code> / <code class="mono">run</code> and refresh.
-            </div>`
-          : html`
-              ${sectionH3("Rolling windows")}
-              <div class="card" style="padding:0;overflow:hidden">
-                <table class="tbl">
-                  <thead>
-                    <tr>
-                      <th></th>
-                      <th>turns</th>
-                      <th>cache hit</th>
-                      <th>cost (USD)</th>
-                      <th>cache saved</th>
-                      <th>vs Claude</th>
-                      <th>saved</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    ${u.buckets.map((b) => {
-                      const hitRatio =
-                        b.cacheHitTokens + b.cacheMissTokens > 0
-                          ? b.cacheHitTokens / (b.cacheHitTokens + b.cacheMissTokens)
-                          : 0;
-                      const claudeSavings =
-                        b.claudeEquivUsd > 0 ? 1 - b.costUsd / b.claudeEquivUsd : 0;
-                      return html`
-                        <tr>
-                          <td class="dim">${b.label}</td>
-                          <td class="num">${fmtNum(b.turns)}</td>
-                          <td class="num">${b.turns > 0 ? fmtPct(hitRatio) : "—"}</td>
-                          <td class="num">${b.turns > 0 ? fmtUsd(b.costUsd) : "—"}</td>
-                          <td class="num">${b.turns > 0 && b.cacheSavingsUsd > 0 ? fmtUsd(b.cacheSavingsUsd) : "—"}</td>
-                          <td class="num">${b.turns > 0 ? fmtUsd(b.claudeEquivUsd) : "—"}</td>
-                          <td class="num">${b.turns > 0 && claudeSavings > 0 ? fmtPct(claudeSavings) : "—"}</td>
-                        </tr>
-                      `;
-                    })}
-                  </tbody>
-                </table>
-              </div>
-            `
-      }
-
-      ${
-        u.byModel.length > 0
-          ? html`
-              ${sectionH3("Most used models")}
-              <div class="card" style="padding:0;overflow:hidden">
-                <table class="tbl">
-                  <thead>
-                    <tr>
-                      <th>model</th>
-                      <th>turns</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    ${u.byModel.slice(0, 5).map(
-                      (m) => html`
-                        <tr>
-                          <td><code class="mono">${m.model}</code></td>
-                          <td class="num">${fmtNum(m.turns)}</td>
-                        </tr>
-                      `,
-                    )}
-                  </tbody>
-                </table>
-              </div>
-            `
-          : null
-      }
-    </div>
-  `;
-}

dashboard/src/protocol.ts

@@ -0,0 +1,495 @@
+export type ReadyEvent = { type: "$ready" };
+export type ProtocolErrorEvent = { type: "$error"; message: string };
+export type TurnCompleteEvent = { type: "$turn_complete" };
+export type PathAccessRequiredEvent = {
+  type: "$path_access_required";
+  id: number;
+  path: string;
+  intent: "read" | "write";
+  toolName: string;
+  sandboxRoot: string;
+  allowPrefix: string;
+};
+
+export type ConfirmRequiredEvent = {
+  type: "$confirm_required";
+  id: number;
+  kind: "run_command" | "run_background";
+  command: string;
+};
+
+export type ConfirmationChoice =
+  | { type: "deny"; denyContext?: string }
+  | { type: "run_once" }
+  | { type: "always_allow"; prefix: string };
+
+export type ChoiceOption = {
+  id: string;
+  title: string;
+  summary?: string;
+};
+
+export type ChoiceRequiredEvent = {
+  type: "$choice_required";
+  id: number;
+  question: string;
+  options: ChoiceOption[];
+  allowCustom: boolean;
+};
+
+export type ChoiceVerdict =
+  | { type: "pick"; optionId: string }
+  | { type: "text"; text: string }
+  | { type: "cancel" };
+
+export type PlanRequiredEvent = {
+  type: "$plan_required";
+  id: number;
+  plan: string;
+  steps?: unknown[];
+  summary?: string;
+};
+
+export type PlanVerdict =
+  | { type: "approve"; feedback?: string }
+  | { type: "refine"; feedback?: string }
+  | { type: "cancel"; feedback?: string };
+
+export type PlanStep = {
+  id: string;
+  title: string;
+  action: string;
+  risk?: "low" | "med" | "high";
+};
+
+export type CheckpointRequiredEvent = {
+  type: "$checkpoint_required";
+  id: number;
+  stepId: string;
+  title?: string;
+  result: string;
+  notes?: string;
+  completed: number;
+  total: number;
+};
+
+export type CheckpointVerdict =
+  | { type: "continue" }
+  | { type: "revise"; feedback?: string }
+  | { type: "stop" };
+
+export type RevisionRequiredEvent = {
+  type: "$revision_required";
+  id: number;
+  reason: string;
+  remainingSteps: PlanStep[];
+  summary?: string;
+};
+
+export type RevisionVerdict = { type: "accepted" } | { type: "rejected" } | { type: "cancelled" };
+
+export type StepCompletedEvent = {
+  type: "$step_completed";
+  stepId: string;
+  title?: string;
+  result: string;
+  notes?: string;
+};
+
+export type PlanClearedEvent = { type: "$plan_cleared" };
+
+export type SessionsEvent = {
+  type: "$sessions";
+  items: { name: string; messageCount: number; mtime: string; summary?: string }[];
+};
+
+export type MentionResultsEvent = {
+  type: "$mention_results";
+  nonce: number;
+  query: string;
+  results: string[];
+};
+
+export type MentionPreviewEvent = {
+  type: "$mention_preview";
+  nonce: number;
+  path: string;
+  head: string;
+  totalLines: number;
+};
+
+export type TabOpenedEvent = {
+  type: "$tab_opened";
+  workspaceDir: string;
+  /** True when the frontend should focus this tab (user-opened, or the restored focused tab). */
+  active?: boolean;
+};
+
+export type TabClosedEvent = {
+  type: "$tab_closed";
+};
+
+export type McpSpecStatus = "configured" | "handshake" | "connected" | "failed" | "disabled";
+
+export type McpSpecInfo = {
+  raw: string;
+  name: string | null;
+  transport: "stdio" | "sse" | "streamable-http";
+  summary: string;
+  parseError?: string;
+  status: McpSpecStatus;
+  statusReason?: string;
+  toolCount?: number;
+};
+
+export type McpSpecsEvent = {
+  type: "$mcp_specs";
+  specs: McpSpecInfo[];
+  bridged: boolean;
+};
+
+export type SkillScope = "project" | "global" | "builtin";
+
+export type SkillInfo = {
+  name: string;
+  description: string;
+  scope: SkillScope;
+  path: string;
+  runAs: "inline" | "subagent";
+  model?: string;
+};
+
+export type SkillsEvent = {
+  type: "$skills";
+  items: SkillInfo[];
+};
+
+export type CtxBreakdownEvent = {
+  type: "$ctx_breakdown";
+  reservedTokens: number;
+};
+
+export type MemoryEntryInfo = {
+  name: string;
+  scope: "project" | "global";
+  description: string;
+};
+
+export type MemoryEvent = {
+  type: "$memory";
+  entries: MemoryEntryInfo[];
+};
+
+export type RetryResultEvent = { type: "$retry_result"; text: string };
+
+export type BtwResultEvent = { type: "$btw_result"; question: string; answer: string };
+
+export type JobInfo = {
+  id: number;
+  tabId: string;
+  sessionLabel: string;
+  command: string;
+  pid: number | null;
+  running: boolean;
+  exitCode: number | null;
+  startedAt: number;
+  outputTail: string;
+  spawnError?: string;
+};
+
+export type JobsEvent = {
+  type: "$jobs";
+  items: JobInfo[];
+};
+
+export type LoadedSegment =
+  | { kind: "text"; text: string }
+  | { kind: "reasoning"; text: string }
+  | {
+      kind: "tool";
+      callId: string;
+      name: string;
+      args: string;
+      result?: string;
+      ok?: boolean;
+    };
+
+export type LoadedMessage =
+  | { kind: "user"; text: string }
+  | {
+      kind: "assistant";
+      turn: number;
+      segments: LoadedSegment[];
+      pending: false;
+    };
+
+export type SessionLoadedEvent = {
+  type: "$session_loaded";
+  name: string;
+  messages: LoadedMessage[];
+  carryover: {
+    totalCostUsd: number;
+    cacheHitTokens: number;
+    cacheMissTokens: number;
+  };
+};
+
+export type SessionEmptyEvent = {
+  type: "$session_empty";
+  name: string;
+  sizeBytes: number;
+};
+
+export type NeedsSetupEvent = {
+  type: "$needs_setup";
+  reason: "no_api_key";
+};
+
+export type EditMode = "review" | "auto" | "yolo";
+
+export type ReasoningEffort = "low" | "medium" | "high" | "max";
+
+export type WebSearchEngineName =
+  | "bing"
+  | "searxng"
+  | "metaso"
+  | "tavily"
+  | "perplexity"
+  | "exa";
+
+export type SettingsEvent = {
+  type: "$settings";
+  reasoningEffort: ReasoningEffort;
+  editMode: EditMode;
+  budgetUsd: number | null;
+  baseUrl?: string;
+  apiKeyPrefix?: string;
+  workspaceDir: string;
+  recentWorkspaces: string[];
+  model: string;
+  editor?: string;
+  webSearchEngine?: WebSearchEngineName;
+  subagentModels?: Record<string, "flash" | "pro">;
+  showSystemEvents?: boolean;
+  version: string;
+};
+
+export type QQSettingsEvent = {
+  type: "$qq_settings";
+  appId?: string;
+  appSecret?: string;
+  sandbox: boolean;
+  enabled: boolean;
+  configured: boolean;
+  runtimeState: "disconnected" | "connecting" | "connected" | "failed";
+  lastError?: string;
+  appIdPreview?: string;
+  access: string;
+};
+
+export type BalanceEvent = {
+  type: "$balance";
+  currency: string;
+  total: number;
+  isAvailable: boolean;
+};
+
+export type SettingsPatch = {
+  reasoningEffort?: ReasoningEffort;
+  editMode?: EditMode;
+  budgetUsd?: number | null;
+  baseUrl?: string;
+  workspaceDir?: string;
+  model?: string;
+  editor?: string;
+  webSearchEngine?: WebSearchEngineName;
+  subagentModels?: Record<string, "flash" | "pro">;
+  showSystemEvents?: boolean;
+};
+
+export type QQConfigPatch = {
+  appId?: string;
+  appSecret?: string;
+  sandbox: boolean;
+};
+
+export type UserMessageEvent = {
+  type: "user.message";
+  id: number;
+  ts: string;
+  turn: number;
+  text: string;
+};
+
+export type ModelTurnStartedEvent = {
+  type: "model.turn.started";
+  id: number;
+  ts: string;
+  turn: number;
+  model: string;
+  reasoningEffort: ReasoningEffort;
+  prefixHash: string;
+};
+
+export type ModelDeltaEvent = {
+  type: "model.delta";
+  id: number;
+  ts: string;
+  turn: number;
+  channel: "content" | "reasoning" | "tool_args";
+  text: string;
+};
+
+export type Usage = {
+  prompt_tokens?: number;
+  completion_tokens?: number;
+  total_tokens?: number;
+  prompt_cache_hit_tokens?: number;
+  prompt_cache_miss_tokens?: number;
+};
+
+export type ModelFinalEvent = {
+  type: "model.final";
+  id: number;
+  ts: string;
+  turn: number;
+  content: string;
+  reasoningContent?: string;
+  usage?: Usage;
+  costUsd?: number;
+};
+
+export type ToolPreparingEvent = {
+  type: "tool.preparing";
+  id: number;
+  ts: string;
+  turn: number;
+  callId: string;
+  name: string;
+};
+
+export type ToolIntentEvent = {
+  type: "tool.intent";
+  id: number;
+  ts: string;
+  turn: number;
+  callId: string;
+  name: string;
+  args: string;
+};
+
+export type ToolResultEvent = {
+  type: "tool.result";
+  id: number;
+  ts: string;
+  turn: number;
+  callId: string;
+  ok: boolean;
+  output: string;
+};
+
+export type StatusEvent = {
+  type: "status";
+  id: number;
+  ts: string;
+  turn: number;
+  text: string;
+};
+
+export type WarningEvent = {
+  type: "warning";
+  id: number;
+  ts: string;
+  turn: number;
+  text: string;
+  severity: "low" | "high";
+};
+
+export type KernelErrorEvent = {
+  type: "error";
+  id: number;
+  ts: string;
+  turn: number;
+  message: string;
+  recoverable: boolean;
+};
+
+export type IncomingEvent = { tabId?: string } & (
+  | ReadyEvent
+  | ProtocolErrorEvent
+  | TurnCompleteEvent
+  | ConfirmRequiredEvent
+  | PathAccessRequiredEvent
+  | ChoiceRequiredEvent
+  | PlanRequiredEvent
+  | SessionsEvent
+  | SessionLoadedEvent
+  | SessionEmptyEvent
+  | NeedsSetupEvent
+  | SettingsEvent
+  | QQSettingsEvent
+  | BalanceEvent
+  | CheckpointRequiredEvent
+  | RevisionRequiredEvent
+  | StepCompletedEvent
+  | PlanClearedEvent
+  | MentionResultsEvent
+  | MentionPreviewEvent
+  | TabOpenedEvent
+  | TabClosedEvent
+  | McpSpecsEvent
+  | SkillsEvent
+  | CtxBreakdownEvent
+  | MemoryEvent
+  | JobsEvent
+  | UserMessageEvent
+  | ModelTurnStartedEvent
+  | ModelDeltaEvent
+  | ModelFinalEvent
+  | ToolPreparingEvent
+  | ToolIntentEvent
+  | ToolResultEvent
+  | StatusEvent
+  | WarningEvent
+  | KernelErrorEvent
+  | RetryResultEvent
+  | BtwResultEvent
+);
+
+export type OutgoingCommand = { tabId?: string } & (
+  | { cmd: "user_input"; text: string }
+  | { cmd: "abort" }
+  | { cmd: "confirm_response"; id: number; response: ConfirmationChoice }
+  | { cmd: "choice_response"; id: number; response: ChoiceVerdict }
+  | { cmd: "plan_response"; id: number; response: PlanVerdict }
+  | { cmd: "checkpoint_response"; id: number; response: CheckpointVerdict }
+  | { cmd: "revision_response"; id: number; response: RevisionVerdict }
+  | { cmd: "session_list" }
+  | { cmd: "session_delete"; name: string }
+  | { cmd: "session_load"; name: string }
+  | { cmd: "new_chat" }
+  | { cmd: "setup_save_key"; key: string }
+  | { cmd: "settings_get" }
+  | ({ cmd: "settings_save" } & SettingsPatch)
+  | { cmd: "qq_status_get" }
+  | { cmd: "qq_connect" }
+  | { cmd: "qq_disconnect" }
+  | ({ cmd: "qq_config_save" } & QQConfigPatch)
+  | { cmd: "mention_query"; query: string; nonce: number }
+  | { cmd: "mention_preview"; path: string; nonce: number }
+  | { cmd: "mention_picked"; path: string }
+  | { cmd: "tab_open"; workspaceDir?: string }
+  | { cmd: "tab_close" }
+  | { cmd: "tab_activate"; tabId: string }
+  | { cmd: "mcp_specs_get" }
+  | { cmd: "mcp_specs_add"; spec: string }
+  | { cmd: "mcp_specs_remove"; spec: string }
+  | { cmd: "skills_get" }
+  | { cmd: "skill_run"; name: string; args?: string }
+  | { cmd: "jobs_list" }
+  | { cmd: "jobs_stop"; jobId: number }
+  | { cmd: "jobs_stop_all" }
+  | { cmd: "compact_history" }
+  | { cmd: "retry" }
+  | { cmd: "btw"; text: string }
+);

dashboard/src/qq-settings.ts

@@ -0,0 +1,63 @@
+import { t } from "./i18n";
+
+export interface QQDesktopSettingsState {
+  appId?: string;
+  appSecret?: string;
+  sandbox: boolean;
+  enabled: boolean;
+  configured: boolean;
+  runtimeState: "disconnected" | "connecting" | "connected" | "failed";
+  lastError?: string;
+  appIdPreview?: string;
+  access: string;
+}
+
+export function maskQQAppId(appId: string | undefined): string | undefined {
+  if (!appId) return undefined;
+  return appId.length > 6 ? `${appId.slice(0, 6)}...` : appId;
+}
+
+export function getQQConnectIntent(qq: QQDesktopSettingsState): "configure" | "connect" {
+  return qq.configured ? "connect" : "configure";
+}
+
+export function getQQStatusLabel(qq: QQDesktopSettingsState): string {
+  switch (qq.runtimeState) {
+    case "connected":
+      return t("settings.qqConnected");
+    case "connecting":
+      return t("settings.qqConnecting");
+    case "failed":
+      return t("settings.qqFailed");
+    default:
+      return t("settings.qqDisconnected");
+  }
+}
+
+export function describeQQAccessLabel(access: string): string {
+  const owner = /^owner (.+?)(?:, allowlist (\d+))?$/.exec(access);
+  if (owner) {
+    const openId = owner[1] ?? "unknown";
+    const count = owner[2];
+    if (count) return t("settings.qqAccessOwnerWithAllowlist", { openId, count });
+    return t("settings.qqAccessOwner", { openId });
+  }
+
+  const allowlist = /^allowlist (\d+)$/.exec(access);
+  if (allowlist) return t("settings.qqAccessAllowlist", { count: allowlist[1] ?? "0" });
+
+  const runtime = /^first-sender \(runtime only, (.+)\)$/.exec(access);
+  if (runtime) return t("settings.qqAccessRuntime", { openId: runtime[1] ?? "unknown" });
+
+  return t("settings.qqAccessOpen");
+}
+
+export function describeQQRowSummary(qq: QQDesktopSettingsState): string {
+  if (!qq.configured) return t("settings.qqSummaryMissing");
+  const appId = qq.appIdPreview ?? maskQQAppId(qq.appId) ?? "unknown";
+  return t("settings.qqSummaryDetail", {
+    appId: t("settings.qqSummaryAppId", { appId }),
+    environment: qq.sandbox ? t("settings.qqSandbox") : t("settings.qqProduction"),
+    access: describeQQAccessLabel(qq.access),
+  });
+}

dashboard/src/theme.ts

@@ -0,0 +1,91 @@
+export const THEME = {
+  DARK: "dark",
+  LIGHT: "light",
+} as const;
+
+export type Theme = (typeof THEME)[keyof typeof THEME];
+
+export function isTheme(value: unknown): value is Theme {
+  return value === THEME.DARK || value === THEME.LIGHT;
+}
+
+export const THEME_STYLE = {
+  GRAPHITE: "graphite",
+  SANDSTONE: "sandstone",
+  PORCELAIN: "porcelain",
+  MIDNIGHT: "midnight",
+} as const;
+
+export type ThemeStyle = (typeof THEME_STYLE)[keyof typeof THEME_STYLE];
+
+export const DEFAULT_THEME_STYLE: Record<Theme, ThemeStyle> = {
+  dark: THEME_STYLE.GRAPHITE,
+  light: THEME_STYLE.SANDSTONE,
+};
+
+export const THEME_STYLE_THEME: Record<ThemeStyle, Theme> = {
+  graphite: THEME.DARK,
+  sandstone: THEME.LIGHT,
+  porcelain: THEME.LIGHT,
+  midnight: THEME.DARK,
+};
+
+export const THEME_STYLES = [
+  THEME_STYLE.GRAPHITE,
+  THEME_STYLE.SANDSTONE,
+  THEME_STYLE.PORCELAIN,
+  THEME_STYLE.MIDNIGHT,
+] as const;
+
+export function isThemeStyle(value: unknown): value is ThemeStyle {
+  return (
+    value === THEME_STYLE.GRAPHITE ||
+    value === THEME_STYLE.SANDSTONE ||
+    value === THEME_STYLE.PORCELAIN ||
+    value === THEME_STYLE.MIDNIGHT
+  );
+}
+
+export function themeForStyle(style: ThemeStyle): Theme {
+  return THEME_STYLE_THEME[style];
+}
+
+export function defaultStyleForTheme(theme: Theme): ThemeStyle {
+  return DEFAULT_THEME_STYLE[theme];
+}
+
+export const FONT_SCALE = {
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large",
+} as const;
+
+export type FontScale = (typeof FONT_SCALE)[keyof typeof FONT_SCALE];
+
+export function isFontScale(value: unknown): value is FontScale {
+  return value === FONT_SCALE.SMALL || value === FONT_SCALE.MEDIUM || value === FONT_SCALE.LARGE;
+}
+
+export const FONT_SCALE_ZOOM: Record<FontScale, number> = {
+  small: 0.875,
+  medium: 1.0,
+  large: 1.125,
+};
+
+export const FONT_FAMILY = {
+  SANS: "sans",
+  SYSTEM: "system",
+  SERIF: "serif",
+} as const;
+
+export type FontFamily = (typeof FONT_FAMILY)[keyof typeof FONT_FAMILY];
+
+export function isFontFamily(value: unknown): value is FontFamily {
+  return value === FONT_FAMILY.SANS || value === FONT_FAMILY.SYSTEM || value === FONT_FAMILY.SERIF;
+}
+
+export const FONT_FAMILY_STACK: Record<FontFamily, string> = {
+  sans: '"Geist", system-ui, sans-serif',
+  system: '-apple-system, system-ui, "Segoe UI", Roboto, sans-serif',
+  serif: 'Georgia, "Times New Roman", serif',
+};

dashboard/src/ui/about.tsx

@@ -0,0 +1,38 @@
+import { openUrl } from "@tauri-apps/plugin-opener";
+import { t } from "../i18n";
+import { I } from "../icons";
+
+const REPO_URL = "https://github.com/esengine/DeepSeek-Reasonix";
+
+export function AboutModal({ onClose }: { onClose: () => void }) {
+  const openGitHub = () => {
+    void openUrl(REPO_URL).catch(() => undefined);
+  };
+
+  return (
+    <div className="about-mask" onClick={onClose}>
+      <div className="about-modal" onClick={(e) => e.stopPropagation()}>
+        <button type="button" className="about-close" onClick={onClose} aria-label={t("about.close")}>
+          <I.x size={14} />
+        </button>
+        <div className="about-brand">
+          <div className="about-name">Reasonix</div>
+          <div className="about-tagline">{t("about.tagline")}</div>
+        </div>
+        <div className="about-meta">
+          <div className="about-row">
+            <span className="about-label">{t("about.version")}</span>
+            <code className="about-value">{__APP_VERSION__}</code>
+          </div>
+          <div className="about-row">
+            <span className="about-label">{t("about.repo")}</span>
+            <button type="button" className="about-link" onClick={openGitHub}>
+              <I.link size={12} />
+              <span>esengine/DeepSeek-Reasonix</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

dashboard/src/ui/cards.tsx

@@ -0,0 +1,750 @@
+import { memo, useState, type ReactNode } from "react";
+import { I } from "../icons";
+import { Markdown } from "../Markdown";
+import { t, useLang } from "../i18n";
+import { Shortcut } from "./shortcut";
+
+type Tone = "default" | "success" | "warning" | "danger" | "accent" | "violet";
+
+export function Card({
+  tone = "default",
+  icon,
+  kind,
+  name,
+  meta,
+  defaultOpen = true,
+  compact = false,
+  children,
+  headRight,
+}: {
+  tone?: Tone;
+  icon: ReactNode;
+  kind: string;
+  name?: ReactNode;
+  meta?: ReactNode;
+  defaultOpen?: boolean;
+  /** Slimmer header — used for thinking / tool-call process cards so they
+   *  read as background detail rather than primary content. */
+  compact?: boolean;
+  children: ReactNode;
+  headRight?: ReactNode;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <div className={compact ? "card is-compact" : "card"} data-tone={tone} data-open={open}>
+      <button
+        type="button"
+        className="card-head"
+        onClick={() => setOpen((v) => !v)}
+        style={{
+          width: "100%",
+          background: "none",
+          border: "none",
+          textAlign: "left",
+          font: "inherit",
+          color: "inherit",
+        }}
+      >
+        <span className="ico">{icon}</span>
+        <span className="kind">{kind}</span>
+        {name ? <span className="name">{name}</span> : null}
+        <span className="grow" />
+        {meta ? <span className="meta">{meta}</span> : null}
+        {headRight}
+        <span className="chev">
+          <I.chev size={12} />
+        </span>
+      </button>
+      {open ? <div className="card-body">{children}</div> : null}
+    </div>
+  );
+}
+
+// ---- Plan ----
+
+export type PlanItem = {
+  id: string | number;
+  status: "todo" | "active" | "done" | "failed" | "blocked" | "skipped";
+  text: string;
+  tool?: string;
+  note?: string;
+};
+
+function derivePlanBadge(items: PlanItem[]): { state: "running" | "done" | "failed" | "waiting" | "blocked"; label: string } {
+  if (items.some((x) => x.status === "failed")) return { state: "failed", label: t("planBadge.failed") };
+  if (items.some((x) => x.status === "blocked")) return { state: "blocked", label: t("planBadge.blocked") };
+  if (items.some((x) => x.status === "active")) return { state: "running", label: t("planBadge.running") };
+  if (items.length > 0 && items.every((x) => x.status === "done")) return { state: "done", label: t("planBadge.done") };
+  return { state: "waiting", label: t("planBadge.pending") };
+}
+
+function StatusIcon({ state, label }: { state: "running" | "done" | "failed" | "waiting" | "blocked"; label: string }) {
+  switch (state) {
+    case "running":
+      return <span className="spin-meta" role="img" aria-label={label} title={label} />;
+    case "done":
+      return <I.check size={10} style={{ color: "var(--success)" }} aria-label={label} />;
+    case "failed":
+      return <I.x size={10} style={{ color: "var(--danger)" }} aria-label={label} />;
+    case "waiting":
+      return <span className="status-dot warn" role="img" aria-label={label} title={label} />;
+    case "blocked":
+      return <I.slash size={10} style={{ color: "var(--warning)" }} aria-label={label} />;
+  }
+}
+
+export function PlanCardView({ items, title }: { items: PlanItem[]; title?: string }) {
+  useLang();
+  const resolvedTitle = title ?? t("cards.planDefaultTitle");
+  const done = items.filter((x) => x.status === "done").length;
+  const badge = derivePlanBadge(items);
+  return (
+    <Card
+      tone="accent"
+      icon={<I.list size={12} />}
+      kind="plan"
+      name={resolvedTitle}
+      meta={
+        <>
+          <span>
+            {done}/{items.length}
+          </span>
+          <StatusIcon state={badge.state} label={badge.label} />
+          <span className="meta-label">{badge.label}</span>
+        </>
+      }
+    >
+      <ul className="plan-list" style={{ listStyle: "none", margin: 0, padding: "8px 12px 12px" }}>
+        {items.map((it) => (
+          <li key={it.id} className="plan-item" data-status={it.status}>
+            <span className="ck">{it.status === "done" ? <I.check size={12} /> : null}</span>
+            <div>
+              <div className="text">{it.text}</div>
+              {it.tool || it.note ? (
+                <div className="sub">
+                  {it.tool ? <span className="tool">{it.tool}</span> : null}
+                  {it.note ? <span>{it.note}</span> : null}
+                </div>
+              ) : null}
+            </div>
+            <span className="stat">{it.status === "active" ? <span className="spin" /> : null}</span>
+          </li>
+        ))}
+      </ul>
+    </Card>
+  );
+}
+
+// ---- Reasoning ----
+
+export function ReasoningCard({
+  text,
+  streaming,
+  tokens,
+  elapsed,
+  model,
+}: {
+  text: string;
+  streaming: boolean;
+  tokens?: number;
+  elapsed?: string;
+  model?: string;
+}) {
+  useLang();
+  return (
+    <Card
+      tone="violet"
+      icon={<I.brain size={12} />}
+      kind="reasoning"
+      name={t("cards.reasoningName")}
+      meta={
+        <>
+          {elapsed || tokens ? (
+            <span>
+              {elapsed ?? ""}
+              {elapsed && tokens ? " · " : ""}
+              {tokens ? `${tokens.toLocaleString()} t` : ""}
+            </span>
+          ) : null}
+          {streaming ? (
+            <StatusIcon state="running" label={t("cards.streaming")} />
+          ) : (
+            <StatusIcon state="done" label={t("cards.reasoningComplete")} />
+          )}
+        </>
+      }
+      defaultOpen={streaming}
+      compact
+    >
+      <div className="reason">
+        <div className="stream">
+          {text.split(/\n\n+/).map((para, i) => (
+            <p
+              key={i}
+              dangerouslySetInnerHTML={{
+                __html: para
+                  .replace(/`([^`]+)`/g, '<span class="hl">$1</span>')
+                  .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>"),
+              }}
+            />
+          ))}
+        </div>
+        {model || tokens !== undefined ? (
+          <div className="meta">
+            {model ? (
+              <span>
+                <span className="k">{t("settings.model")}</span> {model}
+              </span>
+            ) : null}
+            {tokens !== undefined ? (
+              <span>
+                <span className="k">{t("statusbar.tokens")}</span> {tokens.toLocaleString()}
+              </span>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    </Card>
+  );
+}
+
+// ---- Shell ----
+
+export function ShellCard({
+  command,
+  output,
+  state,
+  durationMs,
+  onApprove,
+  onReject,
+  onAlwaysAllow,
+}: {
+  command: string;
+  output?: string;
+  state: "await" | "running" | "done" | "failed";
+  durationMs?: number;
+  onApprove?: () => void;
+  onReject?: () => void;
+  onAlwaysAllow?: () => void;
+}) {
+  useLang();
+  const tone: Tone = state === "failed" ? "danger" : state === "done" ? "success" : "warning";
+  return (
+    <Card
+      tone={tone}
+      icon={<I.terminal size={12} />}
+      kind="shell"
+      name="shell"
+      compact
+      meta={
+        <>
+          {state === "await" ? (
+            <StatusIcon state="waiting" label={t("cards.shellAwaiting")} />
+          ) : state === "running" ? (
+            <StatusIcon state="running" label={t("cards.shellRunning")} />
+          ) : state === "failed" ? (
+            <StatusIcon state="failed" label={t("cards.failed")} />
+          ) : (
+            <StatusIcon state="done" label={t("cards.done")} />
+          )}
+          {(state === "done" || state === "failed") && durationMs ? (
+            <span className="meta-dur">{(durationMs / 1000).toFixed(2)}s</span>
+          ) : null}
+        </>
+      }
+    >
+      <div className="shell">
+        <div className="cmd">
+          <span className="prompt">$</span>
+          <span className="text">{command}</span>
+        </div>
+        {output ? (
+          <pre className="out">
+            {output.split("\n").map((ln, i) => {
+              if (ln.startsWith(" ✓") || ln.startsWith("✓"))
+                return (
+                  <div key={i}>
+                    <span className="ok">{ln}</span>
+                  </div>
+                );
+              if (ln.startsWith(" ✗") || ln.startsWith("✗") || /error/i.test(ln))
+                return (
+                  <div key={i}>
+                    <span className="err">{ln}</span>
+                  </div>
+                );
+              return <div key={i}>{ln}</div>;
+            })}
+          </pre>
+        ) : null}
+        {state === "await" && onApprove ? (
+          <div className="approve-row">
+            <div className="why">
+              <b>{t("cards.shellAwaiting")}</b> — {t("cards.shellExecuteHint")}
+            </div>
+            <div className="actions">
+              {onAlwaysAllow ? (
+                <button type="button" className="btn ghost" onClick={onAlwaysAllow}>
+                  {t("cards.shellAlwaysAllow")}
+                </button>
+              ) : null}
+              {onReject ? (
+                <button type="button" className="btn" onClick={onReject}>
+                  {t("cards.shellReject")} <Shortcut keys={["mod", "."]} />
+                </button>
+              ) : null}
+              <button type="button" className="btn primary" onClick={onApprove}>
+                {t("cards.shellRun")} <Shortcut keys={["mod", "enter"]} />
+              </button>
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </Card>
+  );
+}
+
+// ---- Compaction ----
+
+export function CompactionCard({ summary }: { summary: string }) {
+  useLang();
+  const charCount = summary.length;
+  return (
+    <Card
+      tone="default"
+      icon={<I.archive size={12} />}
+      kind="compaction"
+      name={t("cards.compactionName")}
+      meta={<span>{t("cards.compactionMeta", { chars: charCount.toLocaleString() })}</span>}
+      defaultOpen={false}
+      compact
+    >
+      <div className="compaction-body">
+        <Markdown source={summary} />
+      </div>
+    </Card>
+  );
+}
+
+// ---- Generic Tool ----
+
+export function ToolCard({
+  name,
+  args,
+  result,
+  ok,
+  durationMs,
+}: {
+  name: string;
+  args?: string;
+  result?: string;
+  ok?: boolean;
+  durationMs?: number;
+}) {
+  useLang();
+  const running = result === undefined;
+  const tone: Tone = running ? "default" : ok === false ? "danger" : "success";
+  return (
+    <Card
+      tone={tone}
+      icon={<I.wrench size={12} />}
+      kind="tool"
+      name={name}
+      defaultOpen={false}
+      compact
+      meta={
+        <>
+          {running ? (
+            <StatusIcon state="running" label={t("cards.running")} />
+          ) : ok === false ? (
+            <StatusIcon state="failed" label={t("cards.error")} />
+          ) : (
+            <StatusIcon state="done" label={t("cards.done")} />
+          )}
+          {!running && durationMs !== undefined ? (
+            <span className="meta-dur">{durationMs} ms</span>
+          ) : null}
+        </>
+      }
+    >
+      <div className="tool-call">
+        {args ? (
+          <div className="row">
+            <span className="k">args</span>
+            <span className="v">
+              <span className="str">{args.length > 600 ? `${args.slice(0, 600)}…` : args}</span>
+            </span>
+          </div>
+        ) : null}
+        {result !== undefined ? (
+          <div className="row">
+            <span className="k">{ok === false ? t("cards.error") : t("cards.result")}</span>
+            <span className="v">
+              <span className={ok === false ? "num" : "str"}>
+                {result.length > 1200 ? `${result.slice(0, 1200)}…` : result}
+              </span>
+            </span>
+          </div>
+        ) : null}
+      </div>
+    </Card>
+  );
+}
+
+// ---- Diff ----
+
+export type DiffLine =
+  | { t: "hunk"; s: string }
+  | { t: "ctx"; l?: number; r?: number; s: string }
+  | { t: "add"; r: number; s: string }
+  | { t: "rm"; l: number; s: string };
+
+export function DiffCard({
+  filename,
+  lines,
+  applied,
+  onApply,
+  onDiscard,
+}: {
+  filename: string;
+  lines: DiffLine[];
+  applied?: boolean;
+  onApply?: () => void;
+  onDiscard?: () => void;
+}) {
+  useLang();
+  const adds = lines.filter((x) => x.t === "add").length;
+  const rms = lines.filter((x) => x.t === "rm").length;
+  return (
+    <Card
+      tone={applied ? "success" : "accent"}
+      icon={<I.diff size={12} />}
+      kind="edit"
+      name={filename}
+      meta={
+        <>
+          <span style={{ color: "var(--success)" }}>+{adds}</span>
+          <span style={{ color: "var(--danger)" }}>−{rms}</span>
+          {applied ? (
+            <StatusIcon state="done" label={t("cards.applied")} />
+          ) : (
+            <StatusIcon state="waiting" label={t("cards.diffAwaiting")} />
+          )}
+        </>
+      }
+    >
+      <div className="diff">
+        <div className="lines">
+          {lines.map((ln, i) => {
+            if (ln.t === "hunk")
+              return (
+                <div key={i} className="ln hunk">
+                  <span className="code">{ln.s}</span>
+                </div>
+              );
+            const cls = ln.t === "add" ? "add" : ln.t === "rm" ? "rm" : "";
+            const l = ln.t === "ctx" ? ln.l : ln.t === "rm" ? ln.l : undefined;
+            const r = ln.t === "ctx" ? ln.r : ln.t === "add" ? ln.r : undefined;
+            return (
+              <div key={i} className={`ln ${cls}`}>
+                <span className="num">{l ?? ""}</span>
+                <span className="num">{r ?? ""}</span>
+                <span className="code">
+                  {ln.t === "add" ? "+ " : ln.t === "rm" ? "− " : "  "}
+                  {ln.s}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+        {!applied && (onApply || onDiscard) ? (
+          <div className="approve-row">
+            <div className="why">
+              <b>{t("cards.diffApplyChanges")}</b> · +{adds} / −{rms}
+            </div>
+            <div className="actions">
+              {onDiscard ? (
+                <button type="button" className="btn" onClick={onDiscard}>
+                  {t("cards.diffDiscard")}
+                </button>
+              ) : null}
+              {onApply ? (
+                <button type="button" className="btn primary" onClick={onApply}>
+                  {t("cards.diffApply")} <Shortcut keys={["mod", "enter"]} />
+                </button>
+              ) : null}
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </Card>
+  );
+}
+
+// ---- Error ----
+
+export function ErrorCard({ message, hint, code }: { message: string; hint?: ReactNode; code?: string }) {
+  useLang();
+  return (
+    <Card
+      tone="danger"
+      icon={<I.warning size={12} />}
+      kind="error"
+      name={t("cards.errorName")}
+      meta={code ? <span className="pill-tag err">{code}</span> : null}
+    >
+      <div className="error-body">
+        <div className="msg-err">{message}</div>
+        {hint ? <div className="hint">{hint}</div> : null}
+      </div>
+    </Card>
+  );
+}
+
+// ---- Search results ----
+
+export type SearchHit = { url: string; title: string; snippet: string };
+
+export function WebSearchCard({ query, results }: { query: string; results: SearchHit[] }) {
+  useLang();
+  return (
+    <Card
+      tone="default"
+      icon={<I.globe size={12} />}
+      kind="web_search"
+      name={t("cards.searchName")}
+      meta={
+        <>
+          <span>"{query}"</span>
+          <span className="pill-tag ok">{results.length} {t("cards.hits")}</span>
+        </>
+      }
+    >
+      <div className="search-results">
+        {results.map((r, i) => (
+          <div className="search-result" key={i}>
+            <div className="url">
+              <span className="favicon" />
+              <span>{r.url}</span>
+            </div>
+            <div className="title">{r.title}</div>
+            <div className="snippet">{r.snippet}</div>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+}
+
+// ---- Subagent ----
+
+export type SubAgentChild = {
+  avatar: string;
+  what: string;
+  role: string;
+  status: "done" | "running" | "queued";
+};
+
+export function SubagentCard({
+  name,
+  children,
+  status,
+}: {
+  name: string;
+  children: SubAgentChild[];
+  status: "running" | "done" | "failed";
+}) {
+  useLang();
+  const done = children.filter((c) => c.status === "done").length;
+  return (
+    <Card
+      tone="violet"
+      icon={<I.bot size={12} />}
+      kind="subagent"
+      name={name}
+      meta={
+        <>
+          <span>
+            {done} / {children.length} {t("cards.subagentDoneProgress")}
+          </span>
+          {status === "done" ? (
+            <StatusIcon state="done" label={t("cards.subagentDone")} />
+          ) : status === "failed" ? (
+            <StatusIcon state="failed" label={t("cards.subagentFailed")} />
+          ) : (
+            <StatusIcon state="running" label={t("cards.subagentRunning")} />
+          )}
+        </>
+      }
+    >
+      <div className="sub-card">
+        {children.map((c, i) => (
+          <div className="sub-row" key={i}>
+            <span className="av">{c.avatar}</span>
+            <div className="what">
+              <div>{c.what}</div>
+              <div className="role">{c.role}</div>
+            </div>
+            <span className="prog">
+              {c.status === "done" ? (
+                <I.check size={12} style={{ color: "var(--success)" }} />
+              ) : c.status === "running" ? (
+                <span className="spin" />
+              ) : null}
+            </span>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+}
+
+// ---- Memory rows ----
+
+export type MemRow = { scope: string; txt: string };
+
+export function MemoryCard({ rows }: { rows: MemRow[] }) {
+  useLang();
+  return (
+    <Card
+      tone="violet"
+      icon={<I.bookmark size={12} />}
+      kind="memory"
+      name={t("cards.memoryName")}
+      meta={<span>+ {rows.length} {t("cards.memoryCountSuffix")}</span>}
+    >
+      <div className="mem">
+        {rows.map((m, i) => (
+          <div className="mem-row" key={i}>
+            <span className="scope">{m.scope}</span>
+            <span className="txt">{m.txt}</span>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+}
+
+// ---- Image attachment ----
+
+export function AttachCard({
+  filename,
+  meta,
+  preview,
+}: {
+  filename: string;
+  meta: string;
+  preview?: string;
+}) {
+  useLang();
+  return (
+    <Card
+      tone="default"
+      icon={<I.image size={12} />}
+      kind="image"
+      name={filename}
+      meta={<span>{meta}</span>}
+    >
+      <div className="attach-card">
+        <div className="ph">{preview ?? "PNG"}</div>
+        <div className="info">
+          <div className="n">{filename}</div>
+          <div className="m">{meta}</div>
+        </div>
+        <button type="button" className="btn ghost">
+          <I.download size={12} />
+        </button>
+      </div>
+    </Card>
+  );
+}
+
+// ---- Metric strip (inline) ----
+
+export function MetricStrip({
+  cacheHit,
+  promptTokens,
+  outputTokens,
+  costLabel,
+  elapsed,
+}: {
+  cacheHit?: number;
+  promptTokens?: number;
+  outputTokens?: number;
+  costLabel?: string;
+  elapsed?: string;
+}) {
+  return (
+    <div className="metric-strip">
+      {cacheHit !== undefined ? (
+        <span className="item">
+          <I.zap size={11} style={{ color: "var(--accent)" }} />
+          <span>{t("cards.cacheHit")}</span>
+          <span className="v acc">{cacheHit}%</span>
+        </span>
+      ) : null}
+      {promptTokens !== undefined ? (
+        <span className="item">
+          <span>{t("cards.prompt")}</span>
+          <span className="v">{promptTokens.toLocaleString()} t</span>
+        </span>
+      ) : null}
+      {outputTokens !== undefined ? (
+        <span className="item">
+          <span>{t("cards.output")}</span>
+          <span className="v">{outputTokens.toLocaleString()} t</span>
+        </span>
+      ) : null}
+      {costLabel ? (
+        <span className="item">
+          <I.coin size={11} />
+          <span>{t("cards.cost")}</span>
+          <span className="v ok">{costLabel}</span>
+        </span>
+      ) : null}
+      {elapsed ? (
+        <span className="item">
+          <span>{t("cards.elapsed")}</span>
+          <span className="v">{elapsed}</span>
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+// ---- Checkpoint marker (inline) ----
+
+export function Checkpoint({
+  hash,
+  label,
+  onRewind,
+}: {
+  hash: string;
+  label: string;
+  onRewind?: () => void;
+}) {
+  useLang();
+  return (
+    <div className="checkpoint">
+      <I.history size={12} />
+      <span className="hash">{hash}</span>
+      <span>·</span>
+      <span>{label}</span>
+      {onRewind ? (
+        <button type="button" onClick={onRewind}>
+          {t("cards.checkpointRewind")}
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+// ---- Plain text block (assistant content via markdown) ----
+
+export const AssistantText = memo(function AssistantText({ text }: { text: string }) {
+  return (
+    <div className="msg-text">
+      <Markdown source={text} />
+    </div>
+  );
+});

dashboard/src/ui/composer.tsx

@@ -0,0 +1,804 @@
+import {
+  type ChangeEvent,
+  type KeyboardEvent,
+  type RefObject,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import type React from "react";
+import { open as openFileDialog } from "@tauri-apps/plugin-dialog";
+import { t, type TKey } from "../i18n";
+import { I } from "../icons";
+import { fmtElapsed } from "./live";
+import { Shortcut } from "./shortcut";
+
+export type ReasoningEffort = "low" | "medium" | "high" | "max";
+export type EditMode = "review" | "auto" | "yolo";
+
+type ModeEntry = { k: EditMode; label: TKey; icon: React.ReactNode; hint: TKey };
+
+const EFFORTS: readonly ReasoningEffort[] = ["low", "medium", "high", "max"];
+
+const MODE_INFO: ModeEntry[] = [
+  { k: "review", label: "editMode.review", icon: <I.shield size={11} />, hint: "editMode.reviewHint" },
+  { k: "auto", label: "editMode.auto", icon: <I.zap size={11} />, hint: "editMode.autoHint" },
+  { k: "yolo", label: "editMode.yolo", icon: <I.warn size={11} />, hint: "editMode.yoloHint" },
+];
+
+export function ModeSwitch({
+  mode,
+  onChange,
+}: {
+  mode: EditMode;
+  onChange: (m: EditMode) => void;
+}) {
+  return (
+    <div className="mode-switch" data-mode={mode}>
+      {MODE_INFO.map((m) => (
+        <button
+          key={m.k}
+          type="button"
+          className="ms-seg"
+          data-on={mode === m.k}
+          data-k={m.k}
+          onClick={() => onChange(m.k)}
+          title={t(m.hint)}
+        >
+          {m.icon}
+          <span>{t(m.label)}</span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export type SlashCmd = {
+  cmd: string;
+  desc: string;
+  run: () => void;
+  kb?: string;
+  insertOnly?: boolean;
+};
+export type MentionItem = {
+  name: string;
+  kind: "file" | "dir" | "url" | "agent" | "clip";
+  desc?: string;
+};
+
+export type Chip =
+  | { kind: "at"; label: string }
+  | { kind: "slash"; label: string };
+
+type Popup =
+  | { kind: "slash"; query: string }
+  | { kind: "at"; query: string; nonce: number }
+  | null;
+
+function slashIcon(cmd: string) {
+  const m: Record<string, React.ReactNode> = {
+    "/clear": <I.x size={12} />,
+    "/new": <I.plus size={12} />,
+    "/abort": <I.stop size={12} />,
+    "/copy": <I.layers size={12} />,
+    "/export": <I.download size={12} />,
+    "/model": <I.cpu size={12} />,
+    "/theme": <I.sun size={12} />,
+    "/lang": <I.globe size={12} />,
+  };
+  return m[cmd] || <I.slash size={12} />;
+}
+
+/** Parent dir of the current @ query, with trailing slash. `null` = no parent to show (at workspace root). */
+function parentOfAtQuery(query: string): string | null {
+  const normalized = query.replace(/\\/g, "/");
+  const trailingSlash = normalized.endsWith("/");
+  const lastSlash = normalized.lastIndexOf("/");
+  if (lastSlash < 0) return null;
+  const dirContext = trailingSlash ? normalized.slice(0, -1) : normalized.slice(0, lastSlash);
+  if (!dirContext) return null;
+  const parentIdx = dirContext.lastIndexOf("/");
+  return parentIdx >= 0 ? `${dirContext.slice(0, parentIdx)}/` : "";
+}
+
+function atIcon(k: MentionItem["kind"]) {
+  if (k === "file") return <I.file size={12} />;
+  if (k === "dir") return <I.folder size={12} />;
+  if (k === "url") return <I.globe size={12} />;
+  if (k === "agent") return <I.bot size={12} />;
+  if (k === "clip") return <I.layers size={12} />;
+  return <I.at size={12} />;
+}
+
+export function Composer({
+  draft,
+  setDraft,
+  onSend,
+  onAbort,
+  disabled,
+  busy,
+  busyLabel,
+  busyElapsedMs,
+  modelLabel,
+  reasoningEffort,
+  onModelChange,
+  onEffortChange,
+  editMode,
+  onEditModeChange,
+  textareaRef,
+  slashCommands,
+  onMentionQuery,
+  onMentionPreview,
+  onMentionPicked,
+  mentionResults,
+  workspaceDir,
+  queuedSends,
+  onQueueWhileBusy,
+  onDequeueSend,
+}: {
+  draft: string;
+  setDraft: (s: string) => void;
+  onSend: () => void;
+  onAbort: () => void;
+  disabled?: boolean;
+  busy?: boolean;
+  /** Replaces the hint-row left side while the agent is running — typically "Reasoning" or "Skill · <name>". */
+  busyLabel?: string;
+  busyElapsedMs?: number;
+  modelLabel: string;
+  reasoningEffort: ReasoningEffort;
+  onModelChange: (model: string) => void;
+  onEffortChange: (effort: ReasoningEffort) => void;
+  editMode: EditMode;
+  onEditModeChange: (mode: EditMode) => void;
+  textareaRef: RefObject<HTMLTextAreaElement | null>;
+  slashCommands: SlashCmd[];
+  onMentionQuery?: (q: string, nonce: number) => void;
+  onMentionPreview?: (path: string, nonce: number) => void;
+  onMentionPicked?: (path: string) => void;
+  mentionResults?: { nonce: number; query: string; results: string[] } | null;
+  workspaceDir?: string;
+  /** Messages typed while busy=true; rendered as removable chips above the textarea and auto-drained FIFO on turn-complete. */
+  queuedSends?: string[];
+  /** Called when the user presses Enter while busy with a non-empty draft. Owns clearing the draft. */
+  onQueueWhileBusy?: (text: string) => void;
+  onDequeueSend?: (index: number) => void;
+}) {
+  const [chips, setChips] = useState<Chip[]>([]);
+  const [popup, setPopup] = useState<Popup>(null);
+  const [activeIdx, setActiveIdx] = useState(0);
+  const [modelMenuOpen, setModelMenuOpen] = useState(false);
+  const nonceRef = useRef(0);
+  const modelWrapRef = useRef<HTMLDivElement>(null);
+  // macOS Chinese IME fires compositionend before the confirm keydown.
+  const composingRef = useRef(false);
+  const compositionEndedAtRef = useRef(0);
+
+  // Programmatic draft transitions to "/" (e.g. /help suggestion in EmptyState, #929) must open the slash popup, since handleChange only fires on actual user input.
+  const prevDraftRef = useRef(draft);
+  useEffect(() => {
+    const prev = prevDraftRef.current;
+    prevDraftRef.current = draft;
+    if (draft === "/" && prev !== "/") {
+      setPopup({ kind: "slash", query: "" });
+    }
+  }, [draft]);
+
+  useEffect(() => {
+    if (!modelMenuOpen) return;
+    const onDown = (e: MouseEvent) => {
+      if (
+        modelWrapRef.current &&
+        !modelWrapRef.current.contains(e.target as Node)
+      ) {
+        setModelMenuOpen(false);
+      }
+    };
+    window.addEventListener("mousedown", onDown);
+    return () => window.removeEventListener("mousedown", onDown);
+  }, [modelMenuOpen]);
+
+  const attachFile = async (filter?: "image") => {
+    try {
+      const picked = await openFileDialog({
+        multiple: false,
+        directory: false,
+        defaultPath: workspaceDir,
+        filters:
+          filter === "image"
+            ? [
+                {
+                  name: t("composer.imageFilterName"),
+                  extensions: ["png", "jpg", "jpeg", "gif", "webp", "svg"],
+                },
+              ]
+            : undefined,
+      });
+      if (typeof picked !== "string" || !picked) return;
+      const rel =
+        workspaceDir && picked.startsWith(workspaceDir)
+          ? picked.slice(workspaceDir.length).replace(/^[\\/]+/, "")
+          : picked;
+      setDraft(draft ? `${draft.replace(/\s+$/, "")} @${rel} ` : `@${rel} `);
+      setChips((c) => [...c, { kind: "at", label: rel }]);
+      onMentionPicked?.(rel);
+      textareaRef.current?.focus();
+    } catch (err) {
+      console.error("attach failed", err);
+    }
+  };
+
+  const slashItems = useMemo(() => {
+    if (!popup || popup.kind !== "slash") return [];
+    const q = popup.query.toLowerCase();
+    if (!q) return slashCommands;
+    return slashCommands.filter((c) => c.cmd.toLowerCase().includes(q));
+  }, [popup, slashCommands]);
+
+  const atItems = useMemo<MentionItem[]>(() => {
+    if (!popup || popup.kind !== "at") return [];
+    if (!mentionResults || mentionResults.nonce !== popup.nonce) return [];
+    const base: MentionItem[] = mentionResults.results.map((path) => ({
+      name: path,
+      kind: path.endsWith("/") || path.endsWith("\\") ? "dir" : "file",
+      desc: path,
+    }));
+    // "../" entry (#1019): one level up whenever the @ query is inside a subdir.
+    const parent = parentOfAtQuery(popup.query);
+    if (parent !== null) {
+      base.unshift({
+        name: "..",
+        kind: "dir",
+        desc: parent ? `↑ ${parent}` : `↑ ${t("composer.workspaceRoot")}`,
+      });
+    }
+    return base;
+  }, [popup, mentionResults]);
+
+  const items =
+    popup?.kind === "slash" ? slashItems : popup?.kind === "at" ? atItems : [];
+
+  useEffect(() => {
+    setActiveIdx(0);
+  }, [items.length, popup?.kind]);
+
+  useEffect(() => {
+    if (!popup || popup.kind !== "at" || !onMentionQuery) return;
+    onMentionQuery(popup.query, popup.nonce);
+  }, [popup, onMentionQuery]);
+
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const v = e.target.value;
+    setDraft(v);
+    const trail = v.match(/(^|\s)([/@])([^\s]*)$/);
+    if (trail) {
+      const sigil = trail[2];
+      const query = trail[3] ?? "";
+      if (sigil === "/") {
+        setPopup({ kind: "slash", query });
+      } else {
+        const nonce = ++nonceRef.current;
+        setPopup({ kind: "at", query, nonce });
+      }
+    } else if (popup) {
+      setPopup(null);
+    }
+  };
+
+  const dismiss = () => setPopup(null);
+
+  const pickItem = (idx: number) => {
+    const it = items[idx];
+    if (!it || !popup) return;
+    if (popup.kind === "slash") {
+      const cmd = (it as SlashCmd).cmd;
+      const insertOnly = (it as SlashCmd).insertOnly === true;
+      if (insertOnly) {
+        const next = draft.replace(/[/@][^\s]*$/, "").trimEnd();
+        setDraft(next ? `${next} ${cmd} ` : `${cmd} `);
+        setChips((c) => [...c, { kind: "slash", label: cmd.replace(/^\//, "") }]);
+      } else {
+        const next = draft.replace(/[/@][^\s]*$/, "").trimEnd();
+        setDraft(next);
+        setChips((c) => [...c, { kind: "slash", label: cmd.replace(/^\//, "") }]);
+        (it as SlashCmd).run();
+      }
+    } else {
+      const mention = it as MentionItem;
+      if (mention.name === "..") {
+        const parent = parentOfAtQuery(popup.query) ?? "";
+        const next = draft.replace(/[@][^\s]*$/, `@${parent}`);
+        setDraft(next);
+        const nonce = ++nonceRef.current;
+        setPopup({ kind: "at", query: parent, nonce });
+        textareaRef.current?.focus();
+        return;
+      }
+      const next = draft.replace(/[/@][^\s]*$/, "").trimEnd();
+      setDraft(next ? `${next} @${mention.name} ` : `@${mention.name} `);
+      setChips((c) => [...c, { kind: "at", label: mention.name }]);
+      onMentionPicked?.(mention.name);
+    }
+    setPopup(null);
+    textareaRef.current?.focus();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (popup) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIdx((i) => (items.length ? (i + 1) % items.length : 0));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIdx((i) =>
+          items.length ? (i - 1 + items.length) % items.length : 0,
+        );
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        dismiss();
+        return;
+      }
+      if (e.key === "Tab" && popup.kind === "at" && items.length > 0) {
+        // Tab on a directory enters it — replaces `@src` with `@src/`
+        // and re-queries so the popup shows that directory's children.
+        // `..` is the synthetic parent-dir entry (#1019); same shape
+        // but rewrites to the parent path.
+        const it = items[activeIdx];
+        if (it && (it as MentionItem).kind === "dir") {
+          e.preventDefault();
+          const mention = it as MentionItem;
+          if (mention.name === "..") {
+            const parent = parentOfAtQuery(popup.query) ?? "";
+            const next = draft.replace(/[@][^\s]*$/, `@${parent}`);
+            setDraft(next);
+            const nonce = ++nonceRef.current;
+            setPopup({ kind: "at", query: parent, nonce });
+            return;
+          }
+          const dirPath = mention.name.replace(/\/+$/, "");
+          const next = draft.replace(/[@][^\s]*$/, `@${dirPath}/`);
+          setDraft(next);
+          const nonce = ++nonceRef.current;
+          setPopup({ kind: "at", query: `${dirPath}/`, nonce });
+          return;
+        }
+      }
+      if (e.key === "Enter") {
+        if (items.length > 0) {
+          e.preventDefault();
+          pickItem(activeIdx);
+          return;
+        }
+        dismiss();
+      }
+    }
+    if (composingRef.current || Date.now() - compositionEndedAtRef.current < 50) return;
+    if (e.key === "Enter" && !e.shiftKey && !popup) {
+      e.preventDefault();
+      if (busy) {
+        const text = draft.trim();
+        if (text && onQueueWhileBusy) {
+          onQueueWhileBusy(text);
+          setChips([]);
+        }
+      } else if (!disabled && draft.trim()) {
+        onSend();
+        setChips([]);
+      }
+    }
+  };
+
+  return (
+    <div className="composer-wrap">
+      <div className="composer-inner">
+        {queuedSends && queuedSends.length > 0 ? (
+          <div className="composer-queued">
+            <span className="composer-queued-label">
+              {t("composer.queueCount", { count: queuedSends.length })}
+            </span>
+            {queuedSends.map((text, i) => (
+              <span key={i} className="composer-queue-chip" title={text}>
+                <span className="text">{text}</span>
+                {onDequeueSend ? (
+                  <span className="x" onClick={() => onDequeueSend(i)}>
+                    <I.x size={10} />
+                  </span>
+                ) : null}
+              </span>
+            ))}
+          </div>
+        ) : null}
+
+        <div className="hint-row">
+          {busy && busyLabel ? (
+            <>
+              <span className="composer-busy-status">
+                <span className="composer-busy-pip" />
+                <span className="composer-busy-label">{busyLabel}</span>
+                <span className="composer-busy-time">
+                  {fmtElapsed(busyElapsedMs ?? 0)}
+                </span>
+              </span>
+              <span className="grow" />
+              <ModeSwitch mode={editMode} onChange={onEditModeChange} />
+              <span className="hint-sep" />
+              <span>
+                <Shortcut keys={["enter"]} /> {t("composer.queue")} &nbsp;·&nbsp;{" "}
+                <Shortcut keys={["esc"]} /> {t("composer.interrupt")}
+              </span>
+            </>
+          ) : (
+            <>
+              <span>
+                <Shortcut keys={["/"]} /> {t("composer.commands")} &nbsp;·&nbsp;{" "}
+                <Shortcut keys={["@"]} /> {t("composer.mentionFiles")}
+                &nbsp;·&nbsp; <Shortcut keys={["mod", "K"]} /> {t("composer.commandPalette")}
+              </span>
+              <span className="grow" />
+              <ModeSwitch mode={editMode} onChange={onEditModeChange} />
+              <span className="hint-sep" />
+              <span>
+                <Shortcut keys={["enter"]} /> {t("composer.send")} &nbsp;{" "}
+                <Shortcut keys={["shift", "enter"]} /> {t("composer.newline")}
+              </span>
+            </>
+          )}
+        </div>
+
+        <div className="composer">
+          {chips.length > 0 ? (
+            <div className="composer-tags">
+              {chips.map((c, i) => (
+                <span key={i} className={`chip ${c.kind}`}>
+                  {c.kind === "slash" ? (
+                    <I.slash size={11} />
+                  ) : (
+                    <I.at size={11} />
+                  )}
+                  <span>{c.label}</span>
+                  <span
+                    className="x"
+                    onClick={() =>
+                      setChips((cs) => cs.filter((_, j) => j !== i))
+                    }
+                  >
+                    <I.x size={10} />
+                  </span>
+                </span>
+              ))}
+            </div>
+          ) : null}
+
+          <textarea
+            ref={textareaRef}
+            value={draft}
+            placeholder={t("composer.placeholder")}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            onCompositionStart={() => {
+              composingRef.current = true;
+            }}
+            onCompositionEnd={() => {
+              composingRef.current = false;
+              compositionEndedAtRef.current = Date.now();
+            }}
+            rows={2}
+            disabled={disabled}
+          />
+
+          <div className="composer-foot">
+            <button
+              type="button"
+              className="cf-btn"
+              title={t("composer.insertFile")}
+              onClick={() => void attachFile()}
+            >
+              <span className="ico">
+                <I.paperclip size={14} />
+              </span>
+            </button>
+            <button
+              type="button"
+              className="cf-btn"
+              title={t("composer.insertImage")}
+              onClick={() => void attachFile("image")}
+            >
+              <span className="ico">
+                <I.image size={14} />
+              </span>
+            </button>
+            <button
+              type="button"
+              className="cf-btn"
+              onClick={() => setPopup({ kind: "slash", query: "" })}
+            >
+              <span className="ico">
+                <I.slash size={14} />
+              </span>
+              <span className="label">{t("composer.commandsLabel")}</span>
+            </button>
+            <button
+              type="button"
+              className="cf-btn"
+              onClick={() => {
+                const nonce = ++nonceRef.current;
+                setPopup({ kind: "at", query: "", nonce });
+              }}
+            >
+              <span className="ico">
+                <I.at size={14} />
+              </span>
+              <span className="label">{t("composer.mentionLabel")}</span>
+            </button>
+
+            <span className="grow" />
+
+            <div ref={modelWrapRef} style={{ position: "relative" }}>
+              <button
+                type="button"
+                className="model-pill"
+                onClick={() => setModelMenuOpen((v) => !v)}
+                title={t("composer.switchModel")}
+              >
+                <I.brain size={12} />
+                <span>{modelLabel}</span>
+                <span className="badge">{reasoningEffort}</span>
+                <I.chev size={10} />
+              </button>
+              {modelMenuOpen ? (
+                <ModelEffortMenu
+                  modelLabel={modelLabel}
+                  currentEffort={reasoningEffort}
+                  onPickModel={(m) => {
+                    onModelChange(m);
+                    setModelMenuOpen(false);
+                  }}
+                  onPickEffort={(e) => {
+                    onEffortChange(e);
+                    setModelMenuOpen(false);
+                  }}
+                />
+              ) : null}
+            </div>
+            {busy ? (
+              <button
+                type="button"
+                className="send-btn"
+                style={{ background: "var(--danger)" }}
+                onClick={onAbort}
+                title={t("composer.interrupt")}
+              >
+                <I.stop size={14} />
+              </button>
+            ) : (
+              <button
+                type="button"
+                className="send-btn"
+                disabled={disabled || !draft.trim()}
+                onClick={() => {
+                  if (!disabled && draft.trim()) {
+                    onSend();
+                    setChips([]);
+                  }
+                }}
+              >
+                <I.send size={14} />
+              </button>
+            )}
+          </div>
+
+          {popup ? (
+            <Popup
+              kind={popup.kind}
+              items={items}
+              activeIdx={activeIdx}
+              onPick={(i) => pickItem(i)}
+              onClose={dismiss}
+              onHover={(i, item) => {
+                setActiveIdx(i);
+                if (popup.kind === "at" && onMentionPreview) {
+                  const path = (item as MentionItem).name;
+                  onMentionPreview(path, popup.nonce);
+                }
+              }}
+            />
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Popup({
+  kind,
+  items,
+  activeIdx,
+  onPick,
+  onClose,
+  onHover,
+}: {
+  kind: "slash" | "at";
+  items: (SlashCmd | MentionItem)[];
+  activeIdx: number;
+  onPick: (i: number) => void;
+  onClose: () => void;
+  onHover: (i: number, item: SlashCmd | MentionItem) => void;
+}) {
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      const el = listRef.current?.querySelector<HTMLElement>(`[data-active="true"]`);
+      el?.scrollIntoView({ block: "nearest" });
+    });
+  }, [activeIdx]);
+
+  return (
+    <div className="popup" onMouseDown={(e) => e.preventDefault()}>
+      <div className="ph">
+        <span className="tok">{kind === "slash" ? "/" : "@"}</span>
+        <span>
+          {kind === "slash"
+            ? t("composer.slashHeader")
+            : t("composer.atHeader")}
+        </span>
+        <span className="grow" />
+        <span style={{ cursor: "pointer" }} onClick={onClose}>
+          <I.x size={11} />
+        </span>
+      </div>
+      <div className="popup-list" ref={listRef}>
+        {items.length === 0 ? (
+          <div
+            style={{
+              padding: "12px 8px",
+              fontSize: 11.5,
+              color: "var(--muted-2)",
+              fontFamily: "Geist Mono, monospace",
+            }}
+          >
+            {t("composer.noMatches")}
+          </div>
+        ) : null}
+        {items.map((it, i) => (
+          <div
+            key={i}
+            className="popup-item"
+            data-active={i === activeIdx}
+            onClick={() => onPick(i)}
+            onMouseEnter={() => onHover(i, it)}
+          >
+            <span className="ico">
+              {kind === "slash"
+                ? slashIcon((it as SlashCmd).cmd)
+                : atIcon((it as MentionItem).kind)}
+            </span>
+            <div className="nm">
+              {kind === "slash" ? (
+                <>
+                  <span className="cmd">{(it as SlashCmd).cmd}</span>
+                  <span className="desc">{(it as SlashCmd).desc}</span>
+                </>
+              ) : (
+                <>
+                  <span>{(it as MentionItem).name}</span>
+                  {(it as MentionItem).desc ? (
+                    <div className="desc">{(it as MentionItem).desc}</div>
+                  ) : null}
+                </>
+              )}
+            </div>
+            <span className="kb">
+              {kind === "slash" ? ((it as SlashCmd).kb ?? "") : ""}
+            </span>
+          </div>
+        ))}
+      </div>
+      <div className="popup-foot">
+        <span>
+          <Shortcut keys={["updown"]} /> {t("composer.select")}
+        </span>
+        <span>
+          <Shortcut keys={["enter"]} /> {t("composer.confirm")}
+        </span>
+        <span>
+          <Shortcut keys={["esc"]} /> {t("composer.close")}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+const KNOWN_MODELS: readonly string[] = ["deepseek-v4-flash", "deepseek-v4-pro"];
+
+function ModelEffortMenu({
+  modelLabel,
+  currentEffort,
+  onPickModel,
+  onPickEffort,
+}: {
+  modelLabel: string;
+  currentEffort: ReasoningEffort;
+  onPickModel: (model: string) => void;
+  onPickEffort: (effort: ReasoningEffort) => void;
+}) {
+  const [draft, setDraft] = useState(modelLabel);
+  return (
+    <div
+      className="popup"
+      style={{
+        bottom: "calc(100% + 6px)",
+        left: "auto",
+        right: 0,
+        width: 280,
+        position: "absolute",
+      }}
+    >
+      <div className="ph">
+        <span className="tok">M</span>
+        <span>{t("composer.switchModel")}</span>
+      </div>
+      <div className="popup-list">
+        {KNOWN_MODELS.map((m) => (
+          <div
+            key={m}
+            className="popup-item"
+            data-active={m === modelLabel}
+            onClick={() => onPickModel(m)}
+          >
+            <span className="ico">
+              <I.brain size={12} />
+            </span>
+            <div className="nm">
+              <span className="cmd">{m}</span>
+            </div>
+          </div>
+        ))}
+        <div style={{ padding: "6px 8px", display: "flex", gap: 6 }}>
+          <input
+            className="field mono"
+            style={{ flex: 1 }}
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            placeholder="custom model id"
+          />
+          <button
+            type="button"
+            className="btn"
+            disabled={!draft.trim() || draft.trim() === modelLabel}
+            onClick={() => onPickModel(draft.trim())}
+          >
+            {t("composer.confirm")}
+          </button>
+        </div>
+      </div>
+      <div className="ph" style={{ marginTop: 4 }}>
+        <span className="tok">E</span>
+        <span>{t("composer.switchEffort")}</span>
+      </div>
+      <div className="popup-list">
+        {EFFORTS.map((e) => (
+          <div
+            key={e}
+            className="popup-item"
+            data-active={e === currentEffort}
+            onClick={() => onPickEffort(e)}
+          >
+            <span className="ico">
+              <I.cpu size={12} />
+            </span>
+            <div className="nm">
+              <span className="cmd">{e}</span>
+              <div className="desc">{t(`effort.${e}Desc` as TKey)}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

dashboard/src/ui/context-panel.tsx

@@ -0,0 +1,300 @@
+import { useMemo, useState } from "react";
+import type { SessionFile, Settings, UsageStats } from "../App";
+import { t, useLang } from "../i18n";
+import { I } from "../icons";
+import type { McpSpecInfo, MemoryEntryInfo } from "../protocol";
+import { PanelErrorBoundary } from "./error-boundary";
+
+type Tab = "files" | "tools" | "memory" | "rules";
+
+const CONTEXT_MAX_TOKENS = 1_000_000;
+
+export function ContextPanel({
+  settings,
+  usage,
+  mcpSpecs,
+  mcpBridged,
+  sessionFiles,
+  memory,
+}: {
+  settings: Settings | null;
+  usage: UsageStats;
+  mcpSpecs: McpSpecInfo[];
+  mcpBridged: boolean;
+  sessionFiles: SessionFile[];
+  memory: MemoryEntryInfo[];
+}) {
+  useLang();
+  const [tab, setTab] = useState<Tab>("files");
+  const reserved = usage.reservedTokens;
+  // After a warm cache turn the API counts the reserved prefix inside cacheHit;
+  // subtract to keep the bar segments visually disjoint. Cold cache shows the
+  // reserved portion in cacheMiss instead, so do the same for `used`.
+  const cached = Math.max(0, usage.cacheHitTokens - reserved);
+  const used = Math.max(0, usage.cacheMissTokens - Math.max(0, reserved - usage.cacheHitTokens));
+  const reservedPct = Math.min(100, (reserved / CONTEXT_MAX_TOKENS) * 100);
+  const usedPct = Math.min(100, (used / CONTEXT_MAX_TOKENS) * 100);
+  const cachedPct = Math.min(100, (cached / CONTEXT_MAX_TOKENS) * 100);
+  const free = Math.max(0, CONTEXT_MAX_TOKENS - reserved - used - cached);
+  return (
+    <aside className="ctx">
+      <div className="ctx-tabs">
+        <div className="ctx-tab" data-active={tab === "files"} onClick={() => setTab("files")}>
+          {t("contextPanel.filesTab")}
+        </div>
+        <div className="ctx-tab" data-active={tab === "tools"} onClick={() => setTab("tools")}>
+          {t("contextPanel.toolsTab")}
+        </div>
+        <div className="ctx-tab" data-active={tab === "memory"} onClick={() => setTab("memory")}>
+          {t("contextPanel.memoryTab")}
+        </div>
+        <div className="ctx-tab" data-active={tab === "rules"} onClick={() => setTab("rules")}>
+          {t("contextPanel.rulesTab")}
+        </div>
+      </div>
+
+      <div className="ctx-body">
+        <div className="ctx-block">
+          <div className="h">
+            <span>{t("contextPanel.contextTokens")}</span>
+            <span className="right">
+              {(reserved + used + cached).toLocaleString()} /{" "}
+              {CONTEXT_MAX_TOKENS.toLocaleString()}
+            </span>
+          </div>
+          <div className="meter">
+            <span className="rsvd" style={{ width: `${reservedPct}%` }} />
+            <span className="cached" style={{ width: `${cachedPct}%` }} />
+            <span className="used" style={{ width: `${usedPct}%` }} />
+          </div>
+          <div className="legend">
+            <span className="l">
+              <span className="sw r" />
+              {t("contextPanel.reservedKey")} <span className="v">{reserved.toLocaleString()}</span>
+            </span>
+            <span className="l">
+              <span className="sw c" />
+              {t("contextPanel.cacheKey")} <span className="v">{cached.toLocaleString()}</span>
+            </span>
+            <span className="l">
+              <span className="sw u" />
+              {t("contextPanel.usedKey")} <span className="v">{used.toLocaleString()}</span>
+            </span>
+            <span className="l">
+              {t("contextPanel.freeKey")} <span className="v">{free.toLocaleString()}</span>
+            </span>
+          </div>
+        </div>
+
+        <PanelErrorBoundary key={tab} label={tab}>
+          {tab === "files" && <CtxFiles files={sessionFiles} />}
+          {tab === "tools" && <CtxTools specs={mcpSpecs} bridged={mcpBridged} />}
+          {tab === "memory" && <CtxMemory entries={memory} />}
+          {tab === "rules" && <CtxRules settings={settings} />}
+        </PanelErrorBoundary>
+      </div>
+    </aside>
+  );
+}
+
+type TreeNode =
+  | { kind: "dir"; depth: number; name: string; key: string }
+  | { kind: "file"; depth: number; name: string; key: string; status: "c" | "m" };
+
+function buildSessionTree(files: SessionFile[]): TreeNode[] {
+  const sorted = [...files].sort((a, b) =>
+    a.path.replace(/\\/g, "/").localeCompare(b.path.replace(/\\/g, "/")),
+  );
+  const out: TreeNode[] = [];
+  const seenDirs = new Set<string>();
+  for (const f of sorted) {
+    const parts = f.path.replace(/\\/g, "/").split("/").filter(Boolean);
+    if (parts.length === 0) continue;
+    let prefix = "";
+    for (let i = 0; i < parts.length - 1; i++) {
+      const seg = parts[i] ?? "";
+      prefix = prefix ? `${prefix}/${seg}` : seg;
+      if (!seenDirs.has(prefix)) {
+        seenDirs.add(prefix);
+        out.push({ kind: "dir", depth: i, name: seg, key: `d:${prefix}` });
+      }
+    }
+    const leaf = parts[parts.length - 1] ?? "";
+    out.push({
+      kind: "file",
+      depth: parts.length - 1,
+      name: leaf,
+      key: `f:${f.path}`,
+      status: f.status,
+    });
+  }
+  return out;
+}
+
+function CtxFiles({ files }: { files: SessionFile[] }) {
+  const tree = useMemo(() => buildSessionTree(files), [files]);
+  return (
+    <div className="ctx-block">
+      <div className="h">
+        <span>{t("contextPanel.filesTitle")}</span>
+        <span className="right">
+          {files.length === 0 ? "—" : t("contextPanel.filesCount", { count: files.length })}
+        </span>
+      </div>
+      <div className="tree">
+        {files.length === 0 ? (
+          <div className="ctx-empty">{t("contextPanel.noFilesMsg")}</div>
+        ) : (
+          tree.map((n) =>
+            n.kind === "dir" ? (
+              <div className="node" key={n.key} data-d={n.depth} data-kind="dir">
+                <span className="ico">
+                  <I.folder size={12} />
+                </span>
+                <span className="nm">{n.name}/</span>
+              </div>
+            ) : (
+              <div
+                className="node"
+                key={n.key}
+                data-d={n.depth}
+                data-kind="file"
+                title={n.name}
+              >
+                <span className="ico">
+                  <I.file size={12} />
+                </span>
+                <span className="nm">{n.name}</span>
+                <span
+                  className="dot"
+                  data-s={n.status}
+                  title={n.status === "m" ? t("contextPanel.fileModified") : t("contextPanel.fileInContext")}
+                />
+              </div>
+            ),
+          )
+        )}
+      </div>
+    </div>
+  );
+}
+
+function CtxTools({ specs, bridged }: { specs: McpSpecInfo[]; bridged: boolean }) {
+  const readyCount = specs.filter((s) => s.status === "connected").length;
+  return (
+    <div className="ctx-block">
+      <div className="h">
+        <span>{t("contextPanel.mcpTitle")}</span>
+        <span className="right">
+          {specs.length === 0
+            ? "—"
+            : bridged
+              ? t("contextPanel.mcpReadyAll", { count: specs.length })
+              : t("contextPanel.mcpReadySome", { ready: readyCount, count: specs.length })}
+        </span>
+      </div>
+      {specs.length === 0 ? (
+        <div className="ctx-empty">{t("contextPanel.mcpEmpty")}</div>
+      ) : (
+        specs.map((s) => {
+          const dot =
+            s.status === "connected"
+              ? "ok"
+              : s.status === "failed" || s.parseError
+                ? "off"
+                : "pending";
+          const suffix = s.statusReason
+            ? ` · ${s.statusReason}`
+            : s.status === "connected"
+              ? typeof s.toolCount === "number"
+                ? ` · ${t("contextPanel.mcpTools", { count: s.toolCount })}`
+                : ` · ${t("contextPanel.mcpReady")}`
+              : s.status === "handshake"
+                ? ` · ${t("contextPanel.mcpConnecting")}`
+                : s.status === "disabled"
+                  ? ` · ${t("contextPanel.mcpDisabled")}`
+                  : s.status === "failed"
+                    ? ` · ${t("contextPanel.mcpFailed")}`
+                    : ` · ${t("contextPanel.mcpConfigured")}`;
+          return (
+            <div className="mcp-row" key={s.raw}>
+              <span className="ico">
+                <I.wrench size={12} />
+              </span>
+              <div className="body">
+                <div className="n">{s.name ?? s.summary}</div>
+                <div className="m">
+                  {s.transport}
+                  {suffix}
+                </div>
+              </div>
+              <span className="status" data-s={dot} />
+            </div>
+          );
+        })
+      )}
+    </div>
+  );
+}
+
+function CtxMemory({ entries }: { entries: MemoryEntryInfo[] }) {
+  return (
+    <div className="ctx-block">
+      <div className="h">
+        <span>{t("contextPanel.memoryTitle")}</span>
+        <span className="right">
+          {entries.length === 0 ? "—" : t("contextPanel.itemCount", { count: entries.length })}
+        </span>
+      </div>
+      {entries.length === 0 ? (
+        <div className="ctx-empty">{t("contextPanel.noMemoriesMsg")}</div>
+      ) : (
+        <div className="mem">
+          {entries.map((m) => (
+            <div className="mem-row" key={`${m.scope}/${m.name}`}>
+              <span className="scope" data-s={m.scope}>
+                {m.scope === "project" ? t("contextPanel.scopeProject") : t("contextPanel.scopeGlobal")}
+              </span>
+              <span className="txt">{m.description || m.name}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CtxRules({ settings }: { settings: Settings | null }) {
+  const editMode = settings?.editMode ?? "review";
+  const items: { p: string; allow: boolean; desc: string }[] =
+    editMode === "yolo"
+      ? [{ p: "*", allow: true, desc: t("contextPanel.ruleYolo") }]
+      : editMode === "auto"
+        ? [
+            { p: "read_file, list_directory, search_files, *", allow: true, desc: t("contextPanel.ruleReadOnly") },
+            { p: "run_command (allowlist)", allow: true, desc: t("contextPanel.ruleShellAllowlist") },
+            { p: "edit_file, write_file, run_command (other)", allow: false, desc: t("contextPanel.ruleWritesAsk") },
+          ]
+        : [
+            { p: "*", allow: false, desc: t("contextPanel.ruleReview") },
+          ];
+  return (
+    <div className="ctx-block">
+      <div className="h">
+        <span>{t("contextPanel.autoApproveTitle")}</span>
+        <span className="right">{editMode}</span>
+      </div>
+      {items.map((r) => (
+        <div className="rule" key={r.p}>
+          <div className="top">
+            <span className={`pat ${r.allow ? "" : "deny"}`}>{r.p}</span>
+            <span className={`sw ${r.allow ? "" : "deny"}`}>
+              {r.allow ? t("contextPanel.allow") : t("contextPanel.ask")}
+            </span>
+          </div>
+          <div className="desc">{r.desc}</div>
+        </div>
+      ))}
+    </div>
+  );
+}

dashboard/src/ui/error-boundary.tsx

@@ -0,0 +1,37 @@
+import { Component, type ReactNode } from "react";
+import { t } from "../i18n";
+
+type Props = { label: string; children: ReactNode };
+type State = { error: Error | null };
+
+export class PanelErrorBoundary extends Component<Props, State> {
+  state: State = { error: null };
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: { componentStack?: string | null }): void {
+    console.error(`[panel:${this.props.label}] render error`, error, info);
+  }
+
+  render(): ReactNode {
+    if (!this.state.error) return this.props.children;
+    return (
+      <div
+        className="ctx-empty"
+        style={{
+          color: "var(--danger, #e25555)",
+          padding: 12,
+          fontSize: 12,
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word",
+        }}
+      >
+        {t("panel.renderError", { panel: this.props.label })}
+        {": "}
+        {this.state.error.message}
+      </div>
+    );
+  }
+}

dashboard/src/ui/extra-cards.tsx

@@ -0,0 +1,490 @@
+import type { ReactNode } from "react";
+import { I } from "../icons";
+import { t, useLang } from "../i18n";
+
+export type ApprovalTone = "ok" | "warn" | "danger" | "info" | "brand" | "ghost";
+
+export function ApprovalCard({
+  kind,
+  tone = "info",
+  title,
+  sub,
+  body,
+  preview,
+  meta,
+  primaryLabel,
+  secondaryLabel,
+  tertiaryLabel,
+  onPrimary,
+  onSecondary,
+  onTertiary,
+}: {
+  kind: string;
+  tone?: ApprovalTone;
+  title: string;
+  sub?: string;
+  body?: ReactNode;
+  preview?: ReactNode;
+  meta?: ReactNode;
+  primaryLabel?: string;
+  secondaryLabel?: string;
+  tertiaryLabel?: string;
+  onPrimary?: () => void;
+  onSecondary?: () => void;
+  onTertiary?: () => void;
+}) {
+  useLang();
+  return (
+    <div className="approval" data-tone={tone}>
+      <div className="ap-head">
+        <span className="ap-ico">
+          <I.shield size={13} />
+        </span>
+        <div>
+          <div className="ap-kind">{kind}</div>
+          <div className="ap-title">{title}</div>
+          {sub ? <div className="ap-sub">{sub}</div> : null}
+        </div>
+      </div>
+      {body ? <div className="ap-body">{body}</div> : null}
+      {preview ? <div className="ap-preview">{preview}</div> : null}
+      <div className="ap-foot">
+        {onPrimary ? (
+          <button type="button" className="btn primary" onClick={onPrimary}>
+            {primaryLabel ?? t("extraCards.approve")}
+          </button>
+        ) : null}
+        {onSecondary ? (
+          <button type="button" className="btn ghost" onClick={onSecondary}>
+            {secondaryLabel ?? t("extraCards.reject")}
+          </button>
+        ) : null}
+        {onTertiary && tertiaryLabel ? (
+          <button type="button" className="btn ghost" onClick={onTertiary}>
+            {tertiaryLabel}
+          </button>
+        ) : null}
+        <span className="grow" />
+        {meta ? <span className="meta">{meta}</span> : null}
+      </div>
+    </div>
+  );
+}
+
+// ---- Task Card (multi-step execution from active plan) ----
+
+export type TaskStepView = {
+  n: string;
+  state: "queued" | "running" | "done" | "failed" | "blocked" | "skipped";
+  label: string;
+  hint?: string;
+  durationLabel?: string;
+};
+
+export function TaskCard({
+  title,
+  subtitle,
+  steps,
+}: {
+  title: string;
+  subtitle?: string;
+  steps: TaskStepView[];
+}) {
+  useLang();
+  const done = steps.filter((x) => x.state === "done").length;
+  const pct = steps.length ? (done / steps.length) * 100 : 0;
+  return (
+    <div className="task-card">
+      <div className="th">
+        <span className="ico">
+          <I.list size={13} />
+        </span>
+        <div>
+          <div className="tt">{title}</div>
+          {subtitle ? <div className="ss">{subtitle}</div> : null}
+        </div>
+        <span className="grow" />
+        <span className="ss">
+          {done}/{steps.length}
+        </span>
+        <div className="meter">
+          <span style={{ width: `${pct}%` }} />
+        </div>
+      </div>
+      <div className="tb">
+        {steps.map((st) => (
+          <div className="task-step" key={st.n} data-state={st.state}>
+            <span className="nx">step.{st.n}</span>
+            <span className="st" />
+            <div className="l">
+              {st.label}
+              {st.hint ? <div className="h">{st.hint}</div> : null}
+            </div>
+            <span className="t">{st.durationLabel ?? "—"}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ---- Warn / Tip / Doctor ----
+
+export function WarnCard({ title, body }: { title: string; body: ReactNode }) {
+  return (
+    <div className="warn-card">
+      <span className="ico">
+        <I.warn size={16} />
+      </span>
+      <div>
+        <div className="tt">{title}</div>
+        <div className="ds">{body}</div>
+      </div>
+    </div>
+  );
+}
+
+export type TipSection = { title: string; rows: ReactNode[] };
+
+export function TipCard({
+  topic,
+  command,
+  sections,
+  footer,
+}: {
+  topic: string;
+  command?: string;
+  sections: TipSection[];
+  footer?: ReactNode;
+}) {
+  return (
+    <div className="tip-card">
+      <div className="head">
+        <span className="ico">
+          <I.help size={12} />
+        </span>
+        <span className="topic">{topic}</span>
+        <span className="grow" />
+        {command ? <span className="pill">{command}</span> : null}
+      </div>
+      {sections.map((sec, i) => (
+        <div className="sec" key={i}>
+          <div className="stt">{sec.title}</div>
+          {sec.rows.map((r, j) => (
+            <div className="row" key={j}>
+              {r}
+            </div>
+          ))}
+        </div>
+      ))}
+      {footer ? <div className="foot">{footer}</div> : null}
+    </div>
+  );
+}
+
+export type DoctorRow = { s: "ok" | "warn" | "fail"; nm: string; sub: string; v: string };
+
+export function DoctorCard({ rows, headerSubtitle }: { rows: DoctorRow[]; headerSubtitle?: string }) {
+  useLang();
+  const c = { ok: 0, warn: 0, fail: 0 };
+  for (const r of rows) c[r.s]++;
+  return (
+    <div className="doctor-card">
+      <div className="dh">
+        <span className="ico">
+          <I.shield size={13} />
+        </span>
+        <div>
+          <div className="tt">{t("extraCards.doctorTitle")}</div>
+          {headerSubtitle ? (
+            <div
+              className="ss"
+              style={{
+                fontFamily: "Geist Mono, monospace",
+                fontSize: 10.5,
+                color: "var(--muted)",
+              }}
+            >
+              {headerSubtitle}
+            </div>
+          ) : null}
+        </div>
+        <span className="grow" />
+        <div className="summary">
+          <span>
+            <span className="b ok">{c.ok}</span> ok
+          </span>
+          <span>
+            <span className="b warn">{c.warn}</span> warn
+          </span>
+          <span>
+            <span className="b err">{c.fail}</span> fail
+          </span>
+        </div>
+      </div>
+      {rows.map((r, i) => (
+        <div className="doctor-row" key={i} data-s={r.s}>
+          <span className="ic" data-mark={r.s === "ok" ? "✓" : r.s === "warn" ? "!" : "✕"} />
+          <div className="body">
+            <div className="nm">{r.nm}</div>
+            <div className="sub">{r.sub}</div>
+          </div>
+          <span className="v">{r.v}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ---- Usage (full) ----
+
+export function UsageFull({
+  promptTokens,
+  reasoningTokens,
+  outputTokens,
+  cacheHitTokens,
+  costLabel,
+  balanceLabel,
+  range,
+}: {
+  promptTokens: number;
+  reasoningTokens: number;
+  outputTokens: number;
+  cacheHitTokens: number;
+  costLabel: string;
+  balanceLabel?: string;
+  range?: string;
+}) {
+  useLang();
+  const fmt = (n: number) => (n >= 1000 ? `${(n / 1000).toFixed(1)}k` : `${n}`);
+  const total = promptTokens + reasoningTokens + outputTokens + cacheHitTokens || 1;
+  const pct = (n: number) => Math.round((n / total) * 100);
+  return (
+    <div className="usage-full">
+      <div className="uh">
+        <div>
+          <div className="tt">{t("extraCards.sessionUsage")}</div>
+          {range ? <div className="ss">{range}</div> : null}
+        </div>
+        <span className="grow" />
+      </div>
+      <div className="ub">
+        <div className="ucol">
+          <div className="l">{t("extraCards.prompt")}</div>
+          <div className="v acc">{fmt(promptTokens)}</div>
+          <div className="pct">{pct(promptTokens)}%</div>
+        </div>
+        <div className="ucol">
+          <div className="l">{t("extraCards.reasoning")}</div>
+          <div className="v vio">{fmt(reasoningTokens)}</div>
+          <div className="pct">{pct(reasoningTokens)}%</div>
+        </div>
+        <div className="ucol">
+          <div className="l">{t("extraCards.output")}</div>
+          <div className="v ok">{fmt(outputTokens)}</div>
+          <div className="pct">{pct(outputTokens)}%</div>
+        </div>
+        <div className="ucol">
+          <div className="l">{t("extraCards.cacheHit")}</div>
+          <div className="v">{fmt(cacheHitTokens)}</div>
+          <div className="pct">{pct(cacheHitTokens)}%</div>
+        </div>
+      </div>
+      <div className="stack">
+        <span className="s1" style={{ width: `${pct(promptTokens)}%` }} />
+        <span className="s2" style={{ width: `${pct(reasoningTokens)}%` }} />
+        <span className="s3" style={{ width: `${pct(outputTokens)}%` }} />
+        <span className="s4" style={{ width: `${pct(cacheHitTokens)}%` }} />
+      </div>
+      <div className="uf">
+        <span className="x">
+          <span className="sw" style={{ background: "var(--accent)" }} />
+          {t("extraCards.prompt")}
+        </span>
+        <span className="x">
+          <span className="sw" style={{ background: "var(--violet)" }} />
+          {t("extraCards.reasoning")}
+        </span>
+        <span className="x">
+          <span className="sw" style={{ background: "var(--tone-ok)" }} />
+          {t("extraCards.output")}
+        </span>
+        <span className="x">
+          <span className="sw" style={{ background: "var(--border-strong)" }} />
+          {t("extraCards.cache")}
+        </span>
+        <span style={{ marginLeft: "auto" }}>
+          {t("extraCards.sessionCost", { costLabel })}
+          {balanceLabel ? ` · ${t("extraCards.balance", { balanceLabel })}` : ""}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+// ---- Context window breakdown ----
+
+export type CtxPart = { k: "system" | "tools" | "log" | "input"; label: string; value: string; widthPct: number };
+export type CtxTopRow = { name: string; widthPct: number; value: string };
+
+export function CtxCard({
+  totalLabel,
+  parts,
+  topTools,
+}: {
+  totalLabel: string;
+  parts: CtxPart[];
+  topTools: CtxTopRow[];
+}) {
+  useLang();
+  return (
+    <div className="ctx-card">
+      <div className="h">
+        <span className="tt">{t("extraCards.contextWindow")}</span>
+        <span className="grow" />
+        <span className="v">{totalLabel}</span>
+      </div>
+      <div className="bar">
+        {parts.map((p) => (
+          <span key={p.k} className={p.k} style={{ width: `${p.widthPct}%` }} />
+        ))}
+      </div>
+      <div className="legend">
+        {parts.map((p) => {
+          const color =
+            p.k === "system"
+              ? "var(--accent)"
+              : p.k === "tools"
+                ? "var(--violet)"
+                : p.k === "log"
+                  ? "var(--tone-ok)"
+                  : "var(--tone-warn)";
+          return (
+            <div key={p.k}>
+              <span className="sw" style={{ background: color }} />
+              <span className="l">{p.label}</span>
+              <span className="v">{p.value}</span>
+            </div>
+          );
+        })}
+      </div>
+      {topTools.length > 0 ? (
+        <div className="ttop">
+          <div className="stt">{t("extraCards.topToolsUsage")}</div>
+          {topTools.map((t, i) => (
+            <div className="row" key={i}>
+              <span className="n">{t.name}</span>
+              <div className="bbar">
+                <span style={{ width: `${t.widthPct}%` }} />
+              </div>
+              <span className="v">{t.value}</span>
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+// ---- Memory groups ----
+
+export type MemGroupKey = "user" | "feedback" | "project" | "reference";
+export type MemEntry = { text: string; meta?: string };
+export type MemGroups = Partial<Record<MemGroupKey, MemEntry[]>>;
+
+const GROUP_LABELS: Record<MemGroupKey, Parameters<typeof t>[0]> = {
+  user: "extraCards.memoryUser",
+  feedback: "extraCards.memoryFeedback",
+  project: "extraCards.memoryProject",
+  reference: "extraCards.memoryReference",
+};
+
+export function MemoryGroups({ data }: { data: MemGroups }) {
+  useLang();
+  const keys: MemGroupKey[] = ["user", "feedback", "project", "reference"];
+  return (
+    <div className="mem-groups">
+      {keys.map((g) => {
+        const rows = data[g] ?? [];
+        if (rows.length === 0) return null;
+        return (
+          <div key={g}>
+            <div className="gh" data-g={g}>
+              <span className="sw" />
+              <span>{t(GROUP_LABELS[g])}</span>
+              <span className="grow" />
+              <span className="cnt">{rows.length}</span>
+            </div>
+            {rows.map((r, i) => (
+              <div className="mrow" key={i}>
+                <span className="b">·</span>
+                <div className="t">{r.text}</div>
+                {r.meta ? <span className="meta">{r.meta}</span> : null}
+              </div>
+            ))}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ---- Fallback ----
+
+export function FallbackCard({ kindLabel, payload }: { kindLabel: string; payload: Record<string, string> }) {
+  useLang();
+  return (
+    <div className="fallback-card">
+      <div className="hd">{t("extraCards.unknownKind")}</div>
+      <div className="kv">
+        <span className="k">kind</span>
+        <span className="v">"{kindLabel}"</span>
+        {Object.entries(payload).map(([k, v]) => (
+          <span key={k} style={{ display: "contents" }}>
+            <span className="k">{k}</span>
+            <span className="v">{v}</span>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ---- LiveCard (pill variants) ----
+
+export type LiveVariant =
+  | "thinking"
+  | "undo"
+  | "ctxPressure"
+  | "aborted"
+  | "retry"
+  | "checkpoint"
+  | "stepProgress"
+  | "mcpEvent"
+  | "sessionOp";
+
+export function LiveCard({
+  variant,
+  icon,
+  body,
+  action,
+  onAction,
+}: {
+  variant: LiveVariant;
+  icon: ReactNode;
+  body: ReactNode;
+  action?: string;
+  onAction?: () => void;
+}) {
+  return (
+    <span className={`live-card ${variant === "stepProgress" ? "step" : ""}`} data-v={variant}>
+      <span className="lc-ico">{icon}</span>
+      <span className="lc-body">{body}</span>
+      {action ? (
+        <button type="button" className="lc-act" onClick={onAction}>
+          {action}
+        </button>
+      ) : null}
+    </span>
+  );
+}

dashboard/src/ui/jobs-pop.tsx

@@ -0,0 +1,201 @@
+import { useEffect, useMemo, useState } from "react";
+import { I } from "../icons";
+import { t, useLang } from "../i18n";
+import type { JobInfo } from "../protocol";
+import { Shortcut } from "./shortcut";
+
+export function JobsPop({
+  open,
+  onClose,
+  jobs,
+  onStop,
+  onStopAll,
+}: {
+  open: boolean;
+  onClose: () => void;
+  jobs: JobInfo[];
+  onStop: (jobId: number) => void;
+  onStopAll: () => void;
+}) {
+  useLang();
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    if (!open) return;
+    const id = window.setInterval(() => setTick((n) => n + 1), 600);
+    return () => window.clearInterval(id);
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  const running = useMemo(() => jobs.filter((j) => j.running), [jobs]);
+  const exited = useMemo(() => jobs.filter((j) => !j.running), [jobs]);
+
+  if (!open) return null;
+
+  return (
+    <div className="jobs-mask" onClick={onClose}>
+      <div className="jobs-pop" onClick={(e) => e.stopPropagation()}>
+        <div className="jobs-head">
+          <span className="ico">
+            <I.cpu size={13} />
+          </span>
+          <div>
+            <div className="tt">{t("jobs.title")}</div>
+            <div className="ss">
+              <span className="b ok">{running.length}</span> {t("jobs.running")} ·{" "}
+              <span className="b mut">{exited.length}</span> {t("jobs.exited")}
+            </div>
+          </div>
+          <span className="grow" />
+          {running.length > 0 ? (
+            <button
+              type="button"
+              className="btn danger sm"
+              onClick={onStopAll}
+              title={t("jobs.stopAllTip")}
+            >
+              <I.stop size={10} /> {t("jobs.stopAll")}
+            </button>
+          ) : null}
+        </div>
+
+        <div className="jobs-body">
+          {jobs.length === 0 ? (
+            <div className="jobs-empty">{t("jobs.empty")}</div>
+          ) : (
+            <>
+              {running.length > 0 ? <div className="jobs-grp">{t("jobs.running")}</div> : null}
+              {running.map((j) => (
+                <JobRow key={j.id} job={j} tick={tick} onStop={onStop} />
+              ))}
+              {exited.length > 0 ? <div className="jobs-grp">{t("jobs.exited")}</div> : null}
+              {exited.map((j) => (
+                <JobRow key={j.id} job={j} tick={tick} onStop={onStop} />
+              ))}
+            </>
+          )}
+        </div>
+
+        <div className="jobs-foot">
+          <div className="row">
+            <I.zap size={11} />
+            <span>
+              {t("jobs.running")} <span className="v">{running.length}</span>
+            </span>
+            <span>·</span>
+            <span>
+              {t("jobs.exited")} <span className="v">{exited.length}</span>
+            </span>
+            <span className="grow" />
+            <span>
+              <Shortcut keys={["mod", "J"]} /> {t("jobs.kbToggle")} ·{" "}
+              <Shortcut keys={["esc"]} /> {t("jobs.kbClose")}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function formatElapsed(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  const s = ms / 1000;
+  if (s < 60) return `${s.toFixed(1)}s`;
+  const m = Math.floor(s / 60);
+  const r = Math.floor(s % 60);
+  return `${m}m${r}s`;
+}
+
+function JobRow({
+  job,
+  tick,
+  onStop,
+}: {
+  job: JobInfo;
+  tick: number;
+  onStop: (jobId: number) => void;
+}) {
+  const [exp, setExp] = useState(false);
+  const elapsedMs = (job.running ? Date.now() : job.startedAt + 0) - job.startedAt;
+  const liveMs = job.running ? Date.now() - job.startedAt : elapsedMs;
+  // tick is referenced so the row re-renders for the running clock
+  void tick;
+  return (
+    <div className="job-row" data-status={job.running ? "running" : "exited"}>
+      <div className="jr-main" onClick={() => setExp((v) => !v)}>
+        <span className="jr-state">
+          {job.running ? (
+            <span className="spin" />
+          ) : (
+            <I.history size={11} style={{ color: "var(--muted-2)" }} />
+          )}
+        </span>
+        <span className="jr-kind">
+          <I.terminal size={11} />
+          <span>shell</span>
+        </span>
+        <div className="jr-body">
+          <div className="nm" title={job.command}>
+            {job.command}
+          </div>
+          <div className="sub">
+            <span className="ses">{job.sessionLabel}</span>
+            {job.spawnError ? <span className="rk">· {job.spawnError}</span> : null}
+            {!job.running && job.exitCode !== null && job.exitCode !== 0 ? (
+              <span className="rk">· exit {job.exitCode}</span>
+            ) : null}
+          </div>
+        </div>
+        <div className="jr-time">{formatElapsed(liveMs)}</div>
+        <div className="jr-act">
+          {job.running ? (
+            <button
+              type="button"
+              className="btn danger sm"
+              title={t("jobs.stopOne")}
+              onClick={(e) => {
+                e.stopPropagation();
+                onStop(job.id);
+              }}
+            >
+              <I.stop size={10} /> {t("jobs.stop")}
+            </button>
+          ) : (
+            <span className="jr-exit" title={`exit ${job.exitCode ?? "—"}`}>
+              {job.exitCode === 0 ? "ok" : `exit ${job.exitCode ?? "?"}`}
+            </span>
+          )}
+        </div>
+      </div>
+      {exp ? (
+        <div className="jr-detail">
+          <div className="kv-grid">
+            <div>
+              <span className="k">job_id</span>
+              <span className="v">{job.id}</span>
+            </div>
+            <div>
+              <span className="k">pid</span>
+              <span className="v">{job.pid ?? "—"}</span>
+            </div>
+            <div>
+              <span className="k">elapsed</span>
+              <span className="v">{formatElapsed(liveMs)}</span>
+            </div>
+          </div>
+          {job.outputTail ? <pre className="jr-log">{job.outputTail}</pre> : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}

dashboard/src/ui/live.tsx

@@ -0,0 +1,142 @@
+import { useEffect, useRef, useState } from "react";
+import { I } from "../icons";
+import { t, useLang } from "../i18n";
+
+export function fmtElapsed(ms: number): string {
+  const s = ms / 1000;
+  return s < 10 ? `${s.toFixed(1)}s` : `${Math.floor(s)}s`;
+}
+
+export function useElapsed(active: boolean, startAt?: number): number {
+  const [ms, setMs] = useState(0);
+  const start = useRef<number | null>(null);
+  useEffect(() => {
+    if (!active) {
+      setMs(0);
+      start.current = null;
+      return;
+    }
+    start.current = startAt ?? performance.now();
+    const id = setInterval(() => {
+      if (start.current !== null) setMs(performance.now() - start.current);
+    }, 80);
+    return () => clearInterval(id);
+  }, [active, startAt]);
+  return ms;
+}
+
+export function ThinkingPill({
+  phase = "thinking",
+  label,
+  elapsedMs,
+}: {
+  phase?: "queued" | "thinking" | "tool";
+  label: string;
+  elapsedMs: number;
+}) {
+  const color =
+    phase === "queued"
+      ? "var(--muted)"
+      : phase === "tool"
+        ? "var(--warning)"
+        : "var(--accent)";
+  return (
+    <div className="thinking">
+      <span className="dots" style={{ color }}>
+        <span style={{ background: color }} />
+        <span style={{ background: color }} />
+        <span style={{ background: color }} />
+      </span>
+      <span className="label">
+        <span className="sh">{label}</span>
+      </span>
+      <span className="timer">{fmtElapsed(elapsedMs)}</span>
+    </div>
+  );
+}
+
+export function LiveReasoning({ lines }: { lines: string[] }) {
+  useLang();
+  return (
+    <div className="live-reason">
+      <div className="head">
+        <span className="dot" /> {t("live.reasoning")}
+      </div>
+      {lines.map((line, i) => (
+        <div key={i}>
+          {line}
+          {i === lines.length - 1 ? <span className="stream-caret" /> : null}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function ToolRunningCard({
+  kind = "tool",
+  name,
+  elapsedMs,
+  logLines,
+}: {
+  kind?: "shell" | "fetch" | "search" | "tool";
+  name: string;
+  elapsedMs: number;
+  logLines?: { text: string; tone?: "ok" | "dim" }[];
+}) {
+  useLang();
+  const ic =
+    kind === "shell" ? <I.terminal size={12} /> : kind === "fetch" ? <I.globe size={12} /> : kind === "search" ? <I.search size={12} /> : <I.wrench size={12} />;
+  return (
+    <div className="skel-card">
+      <div className="h">
+        <span className="ico">{ic}</span>
+        <span className="kind">{kind}</span>
+        <span style={{ color: "var(--fg)", fontWeight: 500 }}>{name}</span>
+        <span className="grow" />
+        <span className="spin-meta" role="img" aria-label={t("live.running")} title={t("live.running")} />
+        <span className="timer">{fmtElapsed(elapsedMs)}</span>
+      </div>
+      {logLines && logLines.length > 0 ? (
+        <div className="live-log">
+          {logLines.map((ln, i) => (
+            <div
+              key={i}
+              className={`line ${ln.tone ?? ""}`}
+              style={{ animationDelay: `${i * 0.25}s` }}
+            >
+              {ln.text}
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="body">
+          <div className="skel-line w-90" />
+          <div className="skel-line w-70" />
+          <div className="skel-line w-60" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function PendingUserMsg({ text, elapsedMs }: { text: string; elapsedMs: number }) {
+  useLang();
+  return (
+    <div className="msg user">
+      <div className="avatar">YOU</div>
+      <div className="body">
+        <div className="who">
+          <span className="name">{t("live.you")}</span>
+          <span className="time">
+            {t("live.secondsAgo", { seconds: (elapsedMs / 1000).toFixed(1) })}
+          </span>
+        </div>
+        <div className="msg-text user-pending">{text}</div>
+        <div className="user-status">
+          <span className="spin" />
+          <span>{t("live.deliveredWaiting")}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

dashboard/src/ui/shortcut.tsx

@@ -0,0 +1,60 @@
+import type { ReactNode } from "react";
+
+export type ShortcutKey = "mod" | "shift" | "enter" | "tab" | "esc" | "updown" | string;
+
+function isMacPlatform(): boolean {
+  if (typeof document === "undefined") return false;
+  return document.documentElement.dataset.platform === "macos";
+}
+
+function keyLabel(key: ShortcutKey, mac: boolean): string {
+  switch (key) {
+    case "mod":
+    case "⌘":
+      return mac ? "⌘" : "Ctrl";
+    case "shift":
+    case "⇧":
+      return mac ? "⇧" : "Shift";
+    case "enter":
+    case "⏎":
+      return "Enter";
+    case "tab":
+    case "⇥":
+      return "Tab";
+    case "esc":
+      return "Esc";
+    case "updown":
+    case "↑↓":
+      return "↑↓";
+    default:
+      return key;
+  }
+}
+
+export function shortcutText(keys: readonly ShortcutKey[]): string {
+  const mac = isMacPlatform();
+  return keys.map((key) => keyLabel(key, mac)).join(mac ? "" : "+");
+}
+
+export function localizeShortcutText(text: string): string {
+  return text.replace(/⌘/g, keyLabel("mod", isMacPlatform()));
+}
+
+export function Shortcut({
+  keys,
+  className,
+}: {
+  keys: readonly ShortcutKey[];
+  className?: string;
+}): ReactNode {
+  const mac = isMacPlatform();
+  return (
+    <span className={["shortcut", className].filter(Boolean).join(" ")}>
+      {keys.map((key, index) => (
+        <kbd key={`${key}-${index}`} data-key={key}>
+          {keyLabel(key, mac)}
+        </kbd>
+      ))}
+    </span>
+  );
+}

dashboard/src/ui/sidebar.tsx

@@ -0,0 +1,316 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import type { SessionInfo } from "../App";
+import { t, useLang } from "../i18n";
+import { I } from "../icons";
+import { Shortcut } from "./shortcut";
+
+type PendingDelete = {
+  name: string;
+  pretty: string;
+  x: number;
+  y: number;
+};
+
+function prettyName(s: SessionInfo): string {
+  if (s.summary && s.summary.trim()) return s.summary.trim();
+  const m = s.name.match(/^desktop-(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(?:-(\d+))?$/);
+  if (m) {
+    const [, , month, day, hh, mm, tab] = m;
+    return `${t("sidebarPanel.sessionTitle", {
+      month,
+      day,
+      hour: hh,
+      minute: mm,
+    })}${tab && tab !== "1" ? ` · #${tab}` : ""}`;
+  }
+  return s.name.replace(/^desktop-/, "").replace(/[-_]+/g, " ");
+}
+
+function relative(ms: number): string {
+  const min = ms / 60_000;
+  if (min < 1) return t("sidebarPanel.justNow");
+  if (min < 60) return t("sidebarPanel.minutesAgo", { n: Math.floor(min) });
+  const hr = min / 60;
+  if (hr < 24) return t("sidebarPanel.hoursAgo", { n: Math.floor(hr) });
+  const d = hr / 24;
+  if (d < 7) return t("sidebarPanel.daysAgo", { n: Math.floor(d) });
+  return t("sidebarPanel.weeksAgo", { n: Math.floor(d / 7) });
+}
+
+export function Sidebar({
+  sessions,
+  activeName,
+  loadingName,
+  onNewChat,
+  onLoadSession,
+  onDeleteSession,
+  onOpenSettings,
+  onOpenRules,
+  onOpenCommands,
+  onOpenAbout,
+}: {
+  sessions: SessionInfo[];
+  activeName?: string;
+  /** Name of the session currently being loaded — drives the per-row spinner. */
+  loadingName?: string | null;
+  onNewChat: () => void;
+  onLoadSession: (name: string) => void;
+  onDeleteSession: (name: string) => void;
+  onOpenSettings: () => void;
+  onOpenRules: () => void;
+  onOpenCommands: () => void;
+  onOpenAbout: () => void;
+}) {
+  useLang();
+  const [query, setQuery] = useState("");
+  const [pendingDelete, setPendingDelete] = useState<PendingDelete | null>(null);
+  const filtered = query
+    ? sessions.filter((s) => {
+        const q = query.toLowerCase();
+        return (
+          prettyName(s).toLowerCase().includes(q) || s.name.toLowerCase().includes(q)
+        );
+      })
+    : sessions;
+
+  useEffect(() => {
+    if (!pendingDelete) return;
+    const onMouseDown = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (!target?.closest(".session-delete-popover")) setPendingDelete(null);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setPendingDelete(null);
+    };
+    window.addEventListener("mousedown", onMouseDown);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("mousedown", onMouseDown);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [pendingDelete]);
+
+  return (
+    <aside className="sidebar">
+      <div className="side-head">
+        <button type="button" className="new-btn" onClick={onNewChat}>
+          <I.plus size={14} />
+          <span>{t("sidebarPanel.newChat")}</span>
+          <Shortcut keys={["mod", "N"]} />
+        </button>
+        <button
+          type="button"
+          className="icon-btn"
+          title={t("sidebarPanel.commandPalette")}
+          onClick={onOpenCommands}
+        >
+          <I.history size={14} />
+        </button>
+      </div>
+
+      <div className="search-row">
+        <div className="input">
+          <I.search size={13} />
+          <input
+            placeholder={t("sidebarPanel.searchSessions")}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+          <Shortcut keys={["mod", "K"]} />
+        </div>
+      </div>
+
+      <div className="session-list">
+        <div className="side-section">
+          <div className="label">
+            <span>{t("sidebarPanel.recent")}</span>
+            <span className="count">{filtered.length}</span>
+          </div>
+          {sessions.length === 0 ? (
+            <div
+              style={{
+                padding: "12px 8px",
+                fontSize: 11,
+                color: "var(--muted-2)",
+                fontFamily: "Geist Mono, monospace",
+              }}
+            >
+              {t("sidebarPanel.noSessions")}
+            </div>
+          ) : filtered.length === 0 ? (
+            <div
+              style={{
+                padding: "12px 8px",
+                fontSize: 11,
+                color: "var(--muted-2)",
+                fontFamily: "Geist Mono, monospace",
+              }}
+            >
+              {t("sidebarPanel.noMatches")}
+            </div>
+          ) : null}
+          {filtered.map((s) => {
+            const active = s.name === activeName;
+            const loading = s.name === loadingName;
+            const mtime = Date.parse(s.mtime);
+            const updated = Number.isFinite(mtime) ? relative(Date.now() - mtime) : s.mtime;
+            return (
+              <div
+                key={s.name}
+                className="session-item"
+                data-active={active}
+                data-loading={loading || undefined}
+                style={loadingName && !loading ? { opacity: 0.5, pointerEvents: "none" } : undefined}
+                onClick={() => onLoadSession(s.name)}
+                role="button"
+                tabIndex={0}
+                title={s.name}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") onLoadSession(s.name);
+                }}
+              >
+                <span
+                  className="state"
+                  style={{
+                    background: loading
+                      ? "var(--accent)"
+                      : active
+                        ? "var(--accent)"
+                        : "var(--border-strong)",
+                    animation: loading ? "session-pulse 0.9s ease-in-out infinite" : undefined,
+                  }}
+                />
+                <div className="body">
+                  <span className="title">{prettyName(s)}</span>
+                  <span className="meta">
+                    {loading ? (
+                      <span>{t("sidebarPanel.loading")}</span>
+                    ) : (
+                      <>
+                        <span>{t("sidebarPanel.messageCount", { count: s.messageCount })}</span>
+                        <span className="sep">·</span>
+                        <span>{updated}</span>
+                      </>
+                    )}
+                  </span>
+                </div>
+                <button
+                  type="button"
+                  className="delete-btn"
+                  title={t("sidebarPanel.deleteSession")}
+                  aria-label={t("sidebarPanel.deleteSession")}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    const rect = e.currentTarget.getBoundingClientRect();
+                    setPendingDelete({
+                      name: s.name,
+                      pretty: prettyName(s),
+                      x: rect.right,
+                      y: rect.bottom,
+                    });
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") e.stopPropagation();
+                  }}
+                >
+                  <I.x size={12} />
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="side-foot">
+        <div className="row" onClick={onOpenRules}>
+          <span className="ico">
+            <I.shield size={13} />
+          </span>
+          <span>{t("sidebarPanel.approvalRules")}</span>
+        </div>
+        <div className="row" onClick={onOpenAbout}>
+          <span className="ico">
+            <I.help size={13} />
+          </span>
+          <span>{t("about.sidebarLabel")}</span>
+        </div>
+        <div className="row" onClick={onOpenSettings}>
+          <span className="ico">
+            <I.cog size={13} />
+          </span>
+          <span>{t("sidebarPanel.settings")}</span>
+          <span className="right">
+            <Shortcut keys={["mod", ","]} />
+          </span>
+        </div>
+      </div>
+
+      {pendingDelete ? (
+        <SessionDeletePopover
+          target={pendingDelete}
+          onCancel={() => setPendingDelete(null)}
+          onConfirm={() => {
+            onDeleteSession(pendingDelete.name);
+            setPendingDelete(null);
+          }}
+        />
+      ) : null}
+    </aside>
+  );
+}
+
+function SessionDeletePopover({
+  target,
+  onCancel,
+  onConfirm,
+}: {
+  target: PendingDelete;
+  onCancel: () => void;
+  onConfirm: () => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const cancelRef = useRef<HTMLButtonElement>(null);
+  const [pos, setPos] = useState<{ left: number; top: number }>({
+    left: target.x,
+    top: target.y,
+  });
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const pad = 8;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let left = target.x;
+    let top = target.y;
+    if (left + rect.width + pad > vw) left = Math.max(pad, vw - rect.width - pad);
+    if (top + rect.height + pad > vh) top = Math.max(pad, vh - rect.height - pad);
+    if (left !== pos.left || top !== pos.top) setPos({ left, top });
+    cancelRef.current?.focus();
+  }, [target.x, target.y, pos.left, pos.top]);
+
+  return (
+    <div
+      ref={ref}
+      className="session-delete-popover"
+      role="dialog"
+      aria-modal="true"
+      style={{ left: pos.left, top: pos.top }}
+    >
+      <div className="msg">
+        {t("sidebarPanel.deleteSession")}
+        <span className="name">{target.pretty}</span>
+      </div>
+      <div className="actions">
+        <button ref={cancelRef} type="button" className="cancel" onClick={onCancel}>
+          {t("sidebarPanel.cancel")}
+        </button>
+        <button type="button" className="confirm" onClick={onConfirm}>
+          <I.x size={11} />
+          {t("sidebarPanel.delete")}
+        </button>
+      </div>
+    </div>
+  );
+}

dashboard/src/ui/splash.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useRef, useState } from "react";
+import { t } from "../i18n";
+
+const SPLASH_FLAG = "reasonix.splash.shown";
+
+export function shouldShowSplash(): boolean {
+  try {
+    return sessionStorage.getItem(SPLASH_FLAG) !== "1";
+  } catch {
+    return true;
+  }
+}
+
+function markSplashShown() {
+  try {
+    sessionStorage.setItem(SPLASH_FLAG, "1");
+  } catch {
+    /* sessionStorage unavailable */
+  }
+}
+
+export function Splash({ onDone }: { onDone: () => void }) {
+  const [leaving, setLeaving] = useState(false);
+  const onDoneRef = useRef(onDone);
+  onDoneRef.current = onDone;
+
+  useEffect(() => {
+    const t1 = window.setTimeout(() => setLeaving(true), 1350);
+    const t2 = window.setTimeout(() => {
+      markSplashShown();
+      onDoneRef.current();
+    }, 1800);
+    return () => {
+      window.clearTimeout(t1);
+      window.clearTimeout(t2);
+    };
+  }, []);
+
+  useEffect(() => {
+    const skip = (e: KeyboardEvent) => {
+      if (e.key !== "Escape" && e.key !== "Enter" && e.key !== " ") return;
+      markSplashShown();
+      onDoneRef.current();
+    };
+    window.addEventListener("keydown", skip);
+    return () => window.removeEventListener("keydown", skip);
+  }, []);
+
+  const skipClick = () => {
+    markSplashShown();
+    onDone();
+  };
+
+  return (
+    <div className="splash" data-leaving={leaving} onClick={skipClick}>
+      <div className="splash-card">
+        <div className="splash-mark" />
+        <div className="splash-name">Reasonix</div>
+        <div className="splash-sub">{t("app.splashSubtitle")}</div>
+        <div className="splash-dots">
+          <span />
+          <span />
+          <span />
+        </div>
+      </div>
+    </div>
+  );
+}

dashboard/src/ui/statusbar.tsx

@@ -0,0 +1,198 @@
+import { useEffect, useRef, useState } from "react";
+import { I } from "../icons";
+import { t } from "../i18n";
+import type { Balance, Settings, UsageStats } from "../App";
+import type { JobInfo } from "../protocol";
+import { THEME, THEME_STYLES, type Theme, type ThemeStyle, themeForStyle } from "../theme";
+import { localizeShortcutText } from "./shortcut";
+
+const USD_TO_CNY = 7.2;
+
+function formatMoney(amountUsd: number, currency: "CNY" | "USD"): string {
+  const symbol = currency === "CNY" ? "¥" : "$";
+  const amount = currency === "CNY" ? amountUsd * USD_TO_CNY : amountUsd;
+  return `${symbol} ${amount.toFixed(4)}`;
+}
+
+function tokenLabel(n: number): string {
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
+  return `${n}`;
+}
+
+export function StatusBar({
+  settings,
+  balance,
+  usage,
+  busy,
+  ready,
+  currency,
+  theme,
+  themeStyle,
+  jobs,
+  jobsOpen,
+  onToggleJobs,
+  onSetThemeStyle,
+  onToggleCurrency,
+  onOpenSettings,
+  onOpenWorkdir,
+}: {
+  settings: Settings | null;
+  balance: Balance | null;
+  usage: UsageStats;
+  busy: boolean;
+  ready: boolean;
+  currency: "CNY" | "USD";
+  theme: Theme;
+  themeStyle: ThemeStyle;
+  jobs: JobInfo[];
+  jobsOpen: boolean;
+  onToggleJobs: () => void;
+  onSetThemeStyle: (style: ThemeStyle) => void;
+  onToggleCurrency: () => void;
+  onOpenSettings: () => void;
+  onOpenWorkdir?: (anchor: { bottom: number; left: number }) => void;
+}) {
+  const totalTokens = usage.cacheHitTokens + usage.cacheMissTokens;
+  const cacheHitPct = totalTokens > 0 ? Math.round((usage.cacheHitTokens / totalTokens) * 100) : 0;
+  const runningJobs = jobs.filter((j) => j.running).length;
+  const spent = formatMoney(usage.totalCostUsd, currency);
+  const balanceLabel = balance
+    ? `${balance.currency === "USD" ? "$" : "¥"} ${balance.total.toFixed(2)}`
+    : "—";
+  const connState = !ready ? "off" : busy ? "running" : "online";
+  const [themeOpen, setThemeOpen] = useState(false);
+  const themePopRef = useRef<HTMLDivElement | null>(null);
+  const themeButtonRef = useRef<HTMLSpanElement | null>(null);
+
+  useEffect(() => {
+    if (!themeOpen) return;
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as Node;
+      if (themePopRef.current?.contains(target) || themeButtonRef.current?.contains(target)) return;
+      setThemeOpen(false);
+    };
+    window.addEventListener("pointerdown", onPointerDown);
+    return () => window.removeEventListener("pointerdown", onPointerDown);
+  }, [themeOpen]);
+
+  return (
+    <footer className="statusbar">
+      <span className="seg" title={`API · ${settings?.baseUrl ?? "api.deepseek.com"}`}>
+        <span
+          className={connState === "off" ? "sw warn" : "sw"}
+          style={connState === "off" ? { background: "var(--danger)" } : undefined}
+        />
+        <span>{settings?.baseUrl?.replace(/^https?:\/\//, "") ?? "api.deepseek.com"}</span>
+        <span className="v">{!ready ? t("statusbar.offline") : busy ? t("statusbar.busy") : t("statusbar.online")}</span>
+      </span>
+      <span className="seg" title={t("statusbar.cacheHit")}>
+        <I.zap size={11} style={{ color: "var(--accent)" }} />
+        <span>{t("statusbar.cache")}</span>
+        <span className="v acc">{cacheHitPct}%</span>
+      </span>
+      <span className="seg">
+        <I.cpu size={11} />
+        <span>{t("statusbar.tokens")}</span>
+        <span className="v">{tokenLabel(totalTokens)}</span>
+      </span>
+      <span className="seg">
+        <I.coin size={11} />
+        <span>{t("statusbar.thisTurn")}</span>
+        <span className="v ok">{spent}</span>
+      </span>
+
+      <span className="grow" />
+
+      <span
+        className={`seg jobs ${jobsOpen ? "active" : ""}`}
+        onClick={onToggleJobs}
+        title={localizeShortcutText(t("statusbar.jobsTip"))}
+      >
+        <I.cpu size={11} />
+        <span>{t("statusbar.jobs")}</span>
+        <span className={runningJobs > 0 ? "v acc" : "v"}>{runningJobs}</span>
+      </span>
+
+      {settings?.workspaceDir ? (
+        <span
+          className="seg"
+          title={t("statusbar.switchWorkspace", { workspace: settings.workspaceDir })}
+          style={onOpenWorkdir ? { cursor: "pointer" } : undefined}
+          onClick={(e) => {
+            if (!onOpenWorkdir) return;
+            const r = (e.currentTarget as HTMLElement).getBoundingClientRect();
+            onOpenWorkdir({ bottom: window.innerHeight - r.top + 6, left: r.left });
+          }}
+        >
+          <I.folder size={11} />
+          <span className="v">{settings.workspaceDir.split(/[\\/]/).pop() || "ws"}</span>
+        </span>
+      ) : null}
+      <span
+        className="seg"
+        title={`model · effort ${settings?.reasoningEffort ?? "high"}`}
+        onClick={onOpenSettings}
+      >
+        <I.brain size={11} style={{ color: "var(--violet)" }} />
+        <span className="v vio">{settings?.model ?? "—"}</span>
+        <span className="v">{settings?.reasoningEffort ?? "high"}</span>
+      </span>
+      <span className="seg" title={t("statusbar.switchCurrency")} onClick={onToggleCurrency}>
+        <I.coin size={11} />
+        <span>{t("statusbar.balance")}</span>
+        <span className="v ok">{balanceLabel}</span>
+      </span>
+      <span
+        ref={themeButtonRef}
+        className={`seg theme-trigger ${themeOpen ? "active" : ""}`}
+        title={t("statusbar.switchTheme")}
+        onClick={() => setThemeOpen((open) => !open)}
+      >
+        {theme === THEME.DARK ? <I.moon size={11} /> : <I.sun size={11} />}
+        <span className="v">
+          {t(`statusbar.themeStyle${themeStyle[0]!.toUpperCase()}${themeStyle.slice(1)}` as any)}
+        </span>
+      </span>
+      {themeOpen ? (
+        <div ref={themePopRef} className="theme-pop" role="menu" aria-label={t("settings.themeStyle")}>
+          <div className="theme-pop-head">
+            <div className="tt">{t("settings.themeStyle")}</div>
+            <div className="ss">{t("statusbar.switchTheme")}</div>
+          </div>
+          <div className="theme-pop-list">
+            {THEME_STYLES.map((style) => (
+              <button
+                key={style}
+                type="button"
+                className="theme-pop-item"
+                data-on={themeStyle === style}
+                data-style={style}
+                onClick={() => {
+                  onSetThemeStyle(style);
+                  setThemeOpen(false);
+                }}
+              >
+                <span className="style-swatches" aria-hidden="true">
+                  <span />
+                  <span />
+                  <span />
+                </span>
+                <span className="txt">
+                  <span className="nm">
+                    {t(`statusbar.themeStyle${style[0]!.toUpperCase()}${style.slice(1)}` as any)}
+                  </span>
+                  <span className="md">
+                    {themeForStyle(style) === THEME.DARK
+                      ? t("statusbar.themeDark")
+                      : t("statusbar.themeLight")}
+                  </span>
+                </span>
+                {themeStyle === style ? <I.check size={13} /> : null}
+              </button>
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </footer>
+  );
+}

dashboard/src/ui/thread.tsx

@@ -0,0 +1,542 @@
+import { isCompactionSummary, stripCompactionMarker } from "@reasonix/core-utils/compaction";
+import { derivePrefix } from "@reasonix/core-utils/derive-prefix";
+import { memo, useState, type ReactNode } from "react";
+import { Copy } from "lucide-react";
+import { I } from "../icons";
+import { t, useLang } from "../i18n";
+import type { AssistantSegment, ActivePlan, PendingPlan, PendingCheckpoint, PendingRevision, PendingConfirm, PendingChoice, SkillOrigin } from "../App";
+import { AssistantText, CompactionCard, PlanCardView, ReasoningCard, ShellCard, ToolCard, type PlanItem } from "./cards";
+import { ApprovalCard, TaskCard, type TaskStepView } from "./extra-cards";
+
+export function TurnDivider({ label }: { label: string }) {
+  return (
+    <div className="turn-divider">
+      <span>{label}</span>
+      <span className="line" />
+    </div>
+  );
+}
+
+export const UserMsg = memo(function UserMsg({
+  text,
+  time,
+  skill,
+}: {
+  text: string;
+  time?: string;
+  skill?: SkillOrigin;
+}) {
+  useLang();
+  const [copied, setCopied] = useState(false);
+  const onCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+      /* ignore */
+    }
+  };
+  return (
+    <div className="msg user">
+      <div className="avatar">YOU</div>
+      <div className="body">
+        <div className="who">
+          <span className="name">{t("thread.you")}</span>
+          {skill ? (
+            <span className="skill-chip" title={`skill · ${skill.runAs}`}>
+              <I.zap size={10} /> /{skill.name}
+              {skill.runAs === "subagent" ? <span className="sub">{t("thread.subagent")}</span> : null}
+            </span>
+          ) : null}
+          {time ? <span className="time">{time}</span> : null}
+        </div>
+        <div className="msg-text">{text}</div>
+        <div className="msg-actions">
+          <button
+            type="button"
+            className={`copy-btn ${copied ? "done" : ""}`}
+            onClick={onCopy}
+            title={t("thread.copyMessage")}
+          >
+            <Copy size={11} />
+            {copied ? t("markdown.copied") : null}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export const AssistantMsg = memo(function AssistantMsg({
+  segments,
+  pending,
+  model,
+  time,
+  onApproveConfirm,
+  onRejectConfirm,
+  onAlwaysAllowConfirm,
+  pendingConfirms,
+}: {
+  segments: AssistantSegment[];
+  pending: boolean;
+  model?: string;
+  time?: string;
+  onApproveConfirm: (id: number) => void;
+  onRejectConfirm: (id: number) => void;
+  onAlwaysAllowConfirm: (id: number, prefix: string) => void;
+  pendingConfirms: PendingConfirm[];
+}) {
+  const [copied, setCopied] = useState(false);
+  const content = segments
+    .filter((s): s is AssistantSegment & { kind: "text" } => s.kind === "text")
+    .map((s) => s.text)
+    .join("\n\n");
+  const onCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+      /* ignore */
+    }
+  };
+  return (
+    <div className="msg assistant">
+      <div className="avatar">DS</div>
+      <div className="body">
+        <div className="who">
+          <span className="name">Reasonix</span>
+          {model ? <span className="model">{model}</span> : null}
+          {time ? <span className="time">{time}</span> : null}
+        </div>
+        {segments.map((s, i) => {
+          if (s.kind === "text") {
+            if (!s.text.trim()) return null;
+            if (isCompactionSummary(s.text)) {
+              return <CompactionCard key={i} summary={stripCompactionMarker(s.text)} />;
+            }
+            return <AssistantText key={i} text={s.text} />;
+          }
+          if (s.kind === "reasoning") {
+            return (
+              <ReasoningCard
+                key={i}
+                text={s.text}
+                streaming={pending && i === segments.length - 1}
+              />
+            );
+          }
+          // tool segment
+          const pendingConfirm =
+            (s.name === "run_command" || s.name === "run_background") && s.result === undefined
+              ? pendingConfirms.find((c) => c.command === extractCommand(s.args))
+              : undefined;
+          if (s.name === "run_command" || s.name === "run_background") {
+            const cmd = extractCommand(s.args) ?? s.args;
+            const state: "await" | "running" | "done" | "failed" =
+              s.result === undefined
+                ? pendingConfirm
+                  ? "await"
+                  : "running"
+                : s.ok === false
+                  ? "failed"
+                  : "done";
+            return (
+              <ShellCard
+                key={i}
+                command={cmd}
+                output={s.result}
+                state={state}
+                durationMs={s.durationMs}
+                onApprove={pendingConfirm ? () => onApproveConfirm(pendingConfirm.id) : undefined}
+                onReject={pendingConfirm ? () => onRejectConfirm(pendingConfirm.id) : undefined}
+                onAlwaysAllow={
+                  pendingConfirm
+                    ? () => {
+                        onAlwaysAllowConfirm(pendingConfirm.id, derivePrefix(cmd));
+                      }
+                    : undefined
+                }
+              />
+            );
+          }
+          return (
+            <ToolCard
+              key={i}
+              name={s.name}
+              args={s.args}
+              result={s.result}
+              ok={s.ok}
+              durationMs={s.durationMs}
+            />
+          );
+        })}
+        {content ? (
+          <div className="msg-actions">
+            <button
+              type="button"
+              className={`copy-btn ${copied ? "done" : ""}`}
+              onClick={onCopy}
+              title={t("thread.copyResponse")}
+            >
+              <Copy size={11} />
+              {copied ? t("markdown.copied") : null}
+            </button>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+});
+
+function extractCommand(args: string): string | undefined {
+  if (!args) return undefined;
+  try {
+    const v = JSON.parse(args);
+    if (v && typeof v === "object" && typeof v.command === "string") return v.command;
+  } catch {
+    // ignore
+  }
+  return undefined;
+}
+
+export function PlanBanner({
+  plan,
+  onDismiss,
+}: {
+  plan: ActivePlan;
+  onDismiss?: () => void;
+}) {
+  useLang();
+  const total = plan.steps.length || 1;
+  const done = plan.completedStepIds.length;
+  const pct = (done / total) * 100;
+  const current = plan.steps.find((s) => !plan.completedStepIds.includes(s.id));
+  return (
+    <div className="plan-banner">
+      <span className="ico">
+        <I.list size={14} />
+      </span>
+      <div className="body">
+        <div className="t">
+          {t("thread.planRunning", { step: Math.min(done + 1, total), total })}
+          {current ? ` — ${current.title}` : ""}
+        </div>
+        <div className="s">{plan.plan}</div>
+      </div>
+      <div className="prog">
+        <div className="meter-mini">
+          <span style={{ width: `${pct}%` }} />
+        </div>
+        {onDismiss ? (
+          <button type="button" onClick={onDismiss}>
+            {t("thread.collapse")}
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export function ActivePlanCard({ plan }: { plan: ActivePlan }) {
+  useLang();
+  const done = new Set(plan.completedStepIds);
+  const items: PlanItem[] = plan.steps.map((s) => {
+    let status: PlanItem["status"];
+    if (done.has(s.id)) status = "done";
+    else if (s === plan.steps.find((x) => !done.has(x.id))) status = "active";
+    else status = "todo";
+    return {
+      id: s.id,
+      status,
+      text: s.title,
+      tool: s.action,
+      note: s.risk ? `${t("thread.risk")}: ${s.risk}` : undefined,
+    };
+  });
+  return <PlanCardView items={items} title={t("thread.activePlan")} />;
+}
+
+// ---- Approval bindings ----
+
+export function PlanApprovalCard({
+  p,
+  onApprove,
+  onRefine,
+  onCancel,
+}: {
+  p: PendingPlan;
+  onApprove: () => void;
+  onRefine: () => void;
+  onCancel: () => void;
+}) {
+  useLang();
+  const stepCount = p.steps?.length ?? 0;
+  const sub = stepCount > 0 ? t("thread.planStepCount", { count: stepCount }) : undefined;
+  return (
+    <ApprovalCard
+      kind={t("thread.planConfirmationKind")}
+      tone="info"
+      title={t("thread.startPlan")}
+      sub={sub}
+      body={
+        <>
+          {p.summary ? <div style={{ marginBottom: 6 }}>{p.summary}</div> : null}
+          <div style={{ whiteSpace: "pre-wrap" }}>{p.plan}</div>
+        </>
+      }
+      meta={`plan/#${p.id}`}
+      primaryLabel={t("thread.approve")}
+      secondaryLabel={t("thread.cancel")}
+      tertiaryLabel={t("thread.refine")}
+      onPrimary={onApprove}
+      onSecondary={onCancel}
+      onTertiary={onRefine}
+    />
+  );
+}
+
+export function CheckpointApprovalCard({
+  c,
+  onContinue,
+  onRevise,
+  onStop,
+}: {
+  c: PendingCheckpoint;
+  onContinue: () => void;
+  onRevise: () => void;
+  onStop: () => void;
+}) {
+  useLang();
+  return (
+    <ApprovalCard
+      kind={t("thread.checkpointKind")}
+      tone="brand"
+      title={c.title ?? t("thread.checkpointTitle", { completed: c.completed, total: c.total })}
+      sub={t("thread.checkpointSub", { completed: c.completed, total: c.total })}
+      body={
+        <>
+          <div style={{ whiteSpace: "pre-wrap" }}>{c.result}</div>
+          {c.notes ? (
+            <div style={{ marginTop: 8, fontSize: 11.5, color: "var(--muted)" }}>{c.notes}</div>
+          ) : null}
+        </>
+      }
+      meta={`checkpoint · ${c.stepId}`}
+      primaryLabel={t("thread.continue")}
+      secondaryLabel={t("thread.stop")}
+      tertiaryLabel={t("thread.revise")}
+      onPrimary={onContinue}
+      onSecondary={onStop}
+      onTertiary={onRevise}
+    />
+  );
+}
+
+export function RevisionApprovalCard({
+  r,
+  onAccept,
+  onReject,
+}: {
+  r: PendingRevision;
+  onAccept: () => void;
+  onReject: () => void;
+}) {
+  useLang();
+  return (
+    <ApprovalCard
+      kind={t("thread.planRevisionKind")}
+      tone="warn"
+      title={t("thread.rewritePlan")}
+      sub={t("thread.keepSteps", { n: r.remainingSteps.length })}
+      body={
+        <>
+          <div style={{ marginBottom: 8 }}>{r.reason}</div>
+          {r.summary ? (
+            <div style={{ fontSize: 11.5, color: "var(--muted)", marginBottom: 8 }}>{r.summary}</div>
+          ) : null}
+          <ul style={{ margin: 0, paddingLeft: 18 }}>
+            {r.remainingSteps.map((s) => (
+              <li key={s.id} style={{ fontSize: 12, marginBottom: 2 }}>
+                {s.title}
+                {s.risk ? (
+                  <span
+                    style={{
+                      marginLeft: 6,
+                      fontSize: 10,
+                      color:
+                        s.risk === "high"
+                          ? "var(--tone-err)"
+                          : s.risk === "med"
+                            ? "var(--tone-warn)"
+                            : "var(--muted)",
+                    }}
+                  >
+                    [{s.risk}]
+                  </span>
+                ) : null}
+              </li>
+            ))}
+          </ul>
+        </>
+      }
+      meta={t("thread.revisionMeta")}
+      primaryLabel={t("thread.approveRewrite")}
+      secondaryLabel={t("thread.keepOriginal")}
+      onPrimary={onAccept}
+      onSecondary={onReject}
+    />
+  );
+}
+
+export function ConfirmApprovalCard({
+  c,
+  onAllow,
+  onAlwaysAllow,
+  onDeny,
+}: {
+  c: PendingConfirm;
+  onAllow: () => void;
+  onAlwaysAllow: (prefix: string) => void;
+  onDeny: () => void;
+}) {
+  useLang();
+  const isBackground = c.kind === "run_background";
+  const prefix = derivePrefix(c.command);
+  return (
+    <ApprovalCard
+      kind={t("thread.shellConfirmationKind")}
+      tone="warn"
+      title={isBackground ? t("thread.runBackgroundCommand") : t("thread.runCommand")}
+      sub={c.command.length > 80 ? `${c.command.slice(0, 80)}…` : c.command}
+      preview={
+        <>
+          <span style={{ color: "var(--accent)" }}>$</span> {c.command}
+        </>
+      }
+      meta={t("thread.riskMedium", { kind: c.kind })}
+      primaryLabel={t("thread.execute")}
+      secondaryLabel={t("thread.reject")}
+      tertiaryLabel={t("thread.alwaysAllow", { prefix })}
+      onPrimary={onAllow}
+      onSecondary={onDeny}
+      onTertiary={() => onAlwaysAllow(prefix)}
+    />
+  );
+}
+
+export function PathAccessApprovalCard({
+  p,
+  onAllow,
+  onAlwaysAllow,
+  onDeny,
+}: {
+  p: {
+    id: number;
+    path: string;
+    intent: "read" | "write";
+    toolName: string;
+    sandboxRoot: string;
+    allowPrefix: string;
+  };
+  onAllow: () => void;
+  onAlwaysAllow: (prefix: string) => void;
+  onDeny: () => void;
+}) {
+  useLang();
+  const isWrite = p.intent === "write";
+  return (
+    <ApprovalCard
+      kind={t("thread.pathAccessKind")}
+      tone="warn"
+      title={isWrite ? t("thread.writePathOutsideSandbox") : t("thread.readPathOutsideSandbox")}
+      sub={p.path}
+      preview={
+        <>
+          <div>{p.toolName} → {p.path}</div>
+          <div style={{ color: "var(--muted)", marginTop: 4 }}>
+            workspace: {p.sandboxRoot}
+          </div>
+        </>
+      }
+      meta={t("thread.riskMedium", { kind: p.intent })}
+      primaryLabel={isWrite ? t("thread.allowWrite") : t("thread.allowRead")}
+      secondaryLabel={t("thread.reject")}
+      tertiaryLabel={t("thread.alwaysAllowPrefix", { prefix: p.allowPrefix })}
+      onPrimary={onAllow}
+      onSecondary={onDeny}
+      onTertiary={() => onAlwaysAllow(p.allowPrefix)}
+    />
+  );
+}
+
+export function ChoiceApprovalCard({
+  c,
+  onPick,
+  onCancel,
+}: {
+  c: PendingChoice;
+  onPick: (optionId: string) => void;
+  onCancel: () => void;
+}) {
+  useLang();
+  return (
+    <ApprovalCard
+      kind={t("thread.userChoiceKind")}
+      tone="info"
+      title={c.question}
+      sub={t("thread.optionCount", { count: c.options.length })}
+      body={
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          {c.options.map((o) => (
+            <button
+              key={o.id}
+              type="button"
+              className="btn"
+              style={{ justifyContent: "flex-start", textAlign: "left" }}
+              onClick={() => onPick(o.id)}
+            >
+              <div>
+                <div style={{ fontWeight: 600 }}>{o.title}</div>
+                {o.summary ? (
+                  <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 2 }}>
+                    {o.summary}
+                  </div>
+                ) : null}
+              </div>
+            </button>
+          ))}
+        </div>
+      }
+      primaryLabel={t("thread.cancel")}
+      onPrimary={onCancel}
+    />
+  );
+}
+
+export function activePlanToTaskSteps(plan: ActivePlan): TaskStepView[] {
+  const done = new Set(plan.completedStepIds);
+  return plan.steps.map((s, i) => ({
+    n: String(i + 1),
+    state: done.has(s.id) ? "done" : i === plan.completedStepIds.length ? "running" : "queued",
+    label: s.title,
+    hint: s.action,
+    durationLabel: undefined,
+  }));
+}
+
+export function ActivePlanTaskCard({ plan }: { plan: ActivePlan }) {
+  useLang();
+  return (
+    <TaskCard
+      title={t("thread.activePlan")}
+      subtitle={plan.summary}
+      steps={activePlanToTaskSteps(plan)}
+    />
+  );
+}
+
+export function HeaderHint({ children }: { children: ReactNode }) {
+  return <div className="msg-text">{children}</div>;
+}

dashboard/src/ui/useAutoScroll.ts

@@ -0,0 +1,144 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+const PIN_THRESHOLD = 80; // px from bottom to consider "pinned"
+
+// Auto-scrolls while content grows; un-pins only on real user gestures.
+// Scroll events are avoided because smooth scrollTo can fire them mid-flight.
+export function useAutoScroll(
+  containerRef: React.RefObject<HTMLDivElement | null>,
+  contentRef: React.RefObject<HTMLDivElement | null>,
+  busy: boolean,
+  /** Optional boot-time restore: the offset the transcript should open at. */
+  getRestoreScrollTop?: () => number | null,
+) {
+  const [showJumpButton, setShowJumpButton] = useState(false);
+  const isPinnedRef = useRef(true);
+  const wasBusyRef = useRef(busy);
+  const rafIdRef = useRef<number>(0);
+
+  const isAtBottom = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return true;
+    return el.scrollTop + el.clientHeight >= el.scrollHeight - PIN_THRESHOLD;
+  }, [containerRef]);
+
+  const refreshJumpButton = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    setShowJumpButton(
+      !isPinnedRef.current && el.scrollHeight > el.clientHeight + PIN_THRESHOLD,
+    );
+  }, [containerRef]);
+
+  const scrollToBottom = useCallback(
+    (smooth = true) => {
+      const el = containerRef.current;
+      if (!el) return;
+      isPinnedRef.current = true;
+      setShowJumpButton(false);
+      el.scrollTo({
+        top: el.scrollHeight,
+        behavior: smooth ? "smooth" : "instant",
+      });
+    },
+    [containerRef],
+  );
+
+  // User-intent detection: only these gestures un-pin. Scroll events are
+  // intentionally NOT listened to — they can't tell user gestures from our
+  // own scrollTo.
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    // rAF lets the gesture's scroll delta land before we measure.
+    let pendingFrame = 0;
+    const onUserGesture = () => {
+      if (pendingFrame) cancelAnimationFrame(pendingFrame);
+      pendingFrame = requestAnimationFrame(() => {
+        pendingFrame = 0;
+        isPinnedRef.current = isAtBottom();
+        refreshJumpButton();
+      });
+    };
+
+    el.addEventListener("wheel", onUserGesture, { passive: true });
+    el.addEventListener("touchmove", onUserGesture, { passive: true });
+    el.addEventListener("keydown", onUserGesture);
+    // pointerdown on the scrollbar gutter starts a drag-scroll. The
+    // drag itself fires no wheel/touch, but pointerdown's followup
+    // scroll arrives within a frame; one rAF measure catches it.
+    el.addEventListener("pointerdown", onUserGesture);
+
+    return () => {
+      if (pendingFrame) cancelAnimationFrame(pendingFrame);
+      el.removeEventListener("wheel", onUserGesture);
+      el.removeEventListener("touchmove", onUserGesture);
+      el.removeEventListener("keydown", onUserGesture);
+      el.removeEventListener("pointerdown", onUserGesture);
+    };
+  }, [containerRef, isAtBottom, refreshJumpButton]);
+
+  // Both busy edges re-pin: turn start = user just sent and expects to
+  // see the reply; turn end = settle on the final answer (issue #1182).
+  useEffect(() => {
+    if (wasBusyRef.current !== busy) {
+      scrollToBottom(true);
+    }
+    wasBusyRef.current = busy;
+  }, [busy, scrollToBottom]);
+
+  // Watch content size changes (streaming text, tool results, new
+  // messages) and follow the bottom while pinned.
+  useEffect(() => {
+    const content = contentRef.current;
+    if (!content) return;
+
+    const ro = new ResizeObserver(() => {
+      if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = requestAnimationFrame(() => {
+        rafIdRef.current = 0;
+        const el = containerRef.current;
+        if (!el) return;
+        if (isPinnedRef.current) {
+          el.scrollTo({ top: el.scrollHeight, behavior: "instant" });
+        } else {
+          refreshJumpButton();
+        }
+      });
+    });
+
+    ro.observe(content);
+    return () => {
+      ro.disconnect();
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = 0;
+      }
+    };
+  }, [containerRef, contentRef, refreshJumpButton]);
+
+  // Initial scroll when the hook mounts (e.g. session loaded). Restores the
+  // saved offset if there is one (#1244), otherwise pins to the bottom.
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const id = setTimeout(() => {
+      const restore = getRestoreScrollTop?.() ?? null;
+      if (restore != null && restore > PIN_THRESHOLD) {
+        // Mid-transcript restore: stay un-pinned so content growth and the
+        // ResizeObserver don't yank the view back to the bottom.
+        isPinnedRef.current = false;
+        el.scrollTop = restore;
+        refreshJumpButton();
+      } else {
+        isPinnedRef.current = true;
+        setShowJumpButton(false);
+        el.scrollTo({ top: el.scrollHeight, behavior: "instant" });
+      }
+    }, 60);
+    return () => clearTimeout(id);
+  }, [containerRef, getRestoreScrollTop, refreshJumpButton]);
+
+  return { showJumpButton, scrollToBottom };
+}

dashboard/src/ui/useDisableTextAssist.ts

@@ -0,0 +1,76 @@
+import { useEffect } from "react";
+
+const TEXT_INPUT_SELECTOR =
+  'input, textarea, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]';
+
+function getTextAssistAttrs() {
+  return {
+    autoCorrect: "off" as const,
+    autoCapitalize: "off" as const,
+    spellCheck: false as const,
+  };
+}
+
+function isMacPlatform() {
+  if (typeof document === "undefined") return false;
+  return document.documentElement.dataset.platform === "macos";
+}
+
+function applyTextAssistAttrs(element: Element) {
+  if (!(element instanceof HTMLElement)) return;
+  if (
+    !(element instanceof HTMLInputElement) &&
+    !(element instanceof HTMLTextAreaElement) &&
+    !element.isContentEditable
+  ) {
+    return;
+  }
+
+  const attrs = getTextAssistAttrs();
+  element.setAttribute("autocorrect", attrs.autoCorrect);
+  element.setAttribute("autocapitalize", attrs.autoCapitalize);
+  element.setAttribute("spellcheck", String(attrs.spellCheck));
+  element.spellcheck = attrs.spellCheck;
+}
+
+function applyWithin(root: ParentNode) {
+  if (root instanceof Element) {
+    applyTextAssistAttrs(root);
+  }
+  root.querySelectorAll(TEXT_INPUT_SELECTOR).forEach(applyTextAssistAttrs);
+}
+
+export function useDisableTextAssist() {
+  useEffect(() => {
+    if (typeof document === "undefined" || !isMacPlatform()) return;
+
+    const root = document.body;
+    if (!root) return;
+
+    applyWithin(root);
+
+    const handleFocusIn = (event: FocusEvent) => {
+      if (event.target instanceof Element) {
+        applyTextAssistAttrs(event.target);
+      }
+    };
+
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        mutation.addedNodes.forEach((node) => {
+          if (node instanceof Element) {
+            applyWithin(node);
+          }
+        });
+      }
+    });
+
+    document.addEventListener("focusin", handleFocusIn, true);
+    observer.observe(root, { childList: true, subtree: true });
+
+    return () => {
+      document.removeEventListener("focusin", handleFocusIn, true);
+      observer.disconnect();
+    };
+  }, []);
+}

dashboard/src/ui/workdir-input-modal.tsx

@@ -0,0 +1,190 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { I } from "../icons";
+import { t, useLang } from "../i18n";
+
+interface BrowseEntry {
+  name: string;
+  full: string;
+}
+
+interface BrowseResult {
+  path: string;
+  parent: string | null;
+  entries: BrowseEntry[];
+}
+
+async function fetchBrowse(path: string): Promise<BrowseResult> {
+  const token = document
+    .querySelector('meta[name="reasonix-token"]')
+    ?.getAttribute("content") ?? "";
+  const params = new URLSearchParams();
+  if (path) params.set("path", path);
+  if (token && token !== "__REASONIX_TOKEN__") params.set("token", token);
+  const res = await fetch(`/api/browse?${params.toString()}`);
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text || `browse failed (${res.status})`);
+  }
+  return (await res.json()) as BrowseResult;
+}
+
+export function WorkdirInputModal({
+  open,
+  initialPath,
+  onCancel,
+  onConfirm,
+}: {
+  open: boolean;
+  initialPath?: string;
+  onCancel: () => void;
+  onConfirm: (path: string) => void;
+}) {
+  useLang();
+  const [typed, setTyped] = useState<string>(initialPath ?? "");
+  const [browse, setBrowse] = useState<BrowseResult | null>(null);
+  const [error, setError] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+  const seededRef = useRef(false);
+
+  const navigate = useCallback(async (path: string) => {
+    setLoading(true);
+    setError("");
+    try {
+      const result = await fetchBrowse(path);
+      setBrowse(result);
+      setTyped(result.path);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!open) {
+      seededRef.current = false;
+      return;
+    }
+    if (seededRef.current) return;
+    seededRef.current = true;
+    void navigate(initialPath ?? "");
+  }, [open, initialPath, navigate]);
+
+  if (!open) return null;
+
+  const trimmedTyped = typed.trim();
+  const canConfirm = trimmedTyped.length > 0 && !loading;
+  const sameAsCurrent = browse !== null && trimmedTyped === browse.path;
+
+  const handleConfirm = () => {
+    if (!canConfirm) return;
+    onConfirm(trimmedTyped);
+  };
+
+  const handleTypedKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onCancel();
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (sameAsCurrent) {
+        handleConfirm();
+      } else {
+        void navigate(trimmedTyped);
+      }
+    }
+  };
+
+  return (
+    <div className="settings-mask" onMouseDown={onCancel}>
+      <div
+        className="workdir-input"
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <div className="workdir-input-head">
+          <I.folder size={14} />
+          <span>{t("workdir.title")}</span>
+          <button
+            type="button"
+            className="close-btn"
+            onClick={onCancel}
+            title={t("workdir.cancel")}
+          >
+            <I.x size={13} />
+          </button>
+        </div>
+        <div className="workdir-input-pathrow">
+          <input
+            autoFocus
+            className="workdir-input-path"
+            value={typed}
+            placeholder={t("workdir.pathPlaceholder")}
+            onChange={(e) => setTyped(e.target.value)}
+            onKeyDown={handleTypedKey}
+            spellCheck={false}
+          />
+          <button
+            type="button"
+            className="btn ghost"
+            onClick={() => void navigate(trimmedTyped)}
+            disabled={loading || trimmedTyped.length === 0}
+            title={t("workdir.goTip")}
+          >
+            {t("workdir.go")}
+          </button>
+        </div>
+        {error ? <div className="workdir-input-error">{error}</div> : null}
+        <div className="workdir-input-list">
+          {browse?.parent ? (
+            <div
+              className="workdir-input-row up"
+              onClick={() => void navigate(browse.parent!)}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") void navigate(browse.parent!);
+              }}
+            >
+              <span className="ic">↑</span>
+              <span>..</span>
+            </div>
+          ) : null}
+          {browse?.entries.length === 0 && !loading ? (
+            <div className="workdir-input-empty">{t("workdir.emptyDir")}</div>
+          ) : null}
+          {browse?.entries.map((e) => (
+            <div
+              key={e.full}
+              className="workdir-input-row"
+              onClick={() => void navigate(e.full)}
+              onDoubleClick={() => onConfirm(e.full)}
+              role="button"
+              tabIndex={0}
+              title={e.full}
+              onKeyDown={(ev) => {
+                if (ev.key === "Enter") void navigate(e.full);
+              }}
+            >
+              <span className="ic"><I.folder size={12} /></span>
+              <span className="n">{e.name}</span>
+            </div>
+          ))}
+          {loading ? <div className="workdir-input-empty">{t("workdir.loading")}</div> : null}
+        </div>
+        <div className="workdir-input-foot">
+          <button type="button" className="btn ghost" onClick={onCancel}>
+            {t("workdir.cancel")}
+          </button>
+          <button
+            type="button"
+            className="btn primary"
+            onClick={handleConfirm}
+            disabled={!canConfirm}
+          >
+            {t("workdir.openHere")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}