chore: version packages

Constrains the per-client SSE identifier introduced in #86 to
`[A-Za-z0-9_-]{8,64}` at both ingress points (`GET /api/events`
query and `POST /api/events/subscribe` body). Without this, an
authenticated attacker could:
  - Send a victim's clientId to silently evict their tab from
    sseClients (DoS — socket stays open, broadcasts stop).
  - Mutate any clientId's session filter, blackholing that tab's
    terminal stream.
  - Grow sseClientsById without bound via long IDs.

Also caps the subscribe payload to 64 session entries of ≤128 chars
each, since the previous handler accepted arbitrary-length arrays.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

.github/workflows/ci.yml

@@ -22,6 +22,9 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Check package-lock.json version sync
+        run: npm run check:lockfile
+
       - name: Type check
         run: npm run typecheck
 

CHANGELOG.md

@@ -1,5 +1,116 @@
 # aicodeman
 
+## 0.6.9
+
+### Patch Changes
+
+- Terminal renderer hardening, SSE bandwidth cut, image paste, and a security tightening on the new live filter:
+  - **Multi-primitive yield for write pacing** (#85): replaces six raw `requestAnimationFrame` callsites in the xterm.js write pipeline with a yielding helper that races `requestAnimationFrame`, `setTimeout(50)`, and a tick Worker. Keeps the terminal responsive when the tab is backgrounded or occluded — Chrome's intensive-throttling no longer stalls long writes.
+  - **WebGL longtask auto-fallback** (#83): a `PerformanceObserver` watches for ≥200ms WebGL frames; three within a 30s window disposes the WebGL addon and falls back to the canvas renderer. Decision is persisted in localStorage for 7 days, and `?webgl=force` clears it.
+  - **Per-client live SSE subscription filter** (#86): each connected client gets a stable UUID and can narrow its terminal stream to one session via `POST /api/events/subscribe` — no EventSource reconnect on tab switches. Cuts SSE bandwidth roughly N× when N sessions are open. Lifecycle/metadata events (`session:*`, `case:*`, `ralph:*`, `hook:*`) now broadcast to every client so sidebars stay in sync.
+  - **Image paste and drag-and-drop into the terminal** (#84): `Ctrl+V` and dropped images upload to `POST /api/sessions/:id/paste-image`, save under `${workingDir}/.claude-images/paste-${ts}.${ext}` and type the path into the terminal. Hard 10MB cap, server-generated filename (no traversal), `.svg` deliberately excluded from the allowlist to avoid a same-origin XSS path through `file-raw`.
+  - **SSE clientId validation**: the per-client identifier introduced in #86 is now constrained to `[A-Za-z0-9_-]{8,64}` at both ingress points. Without this, an authenticated attacker could send another tab's clientId to silently evict it from broadcasts, mutate any clientId's session filter to blackhole the victim's terminal stream, or grow `sseClientsById` unboundedly via long IDs. The subscribe payload is also capped at 64 session entries of ≤128 chars each.
+
+## 0.6.8
+
+### Patch Changes
+
+- Finish the hostname-aware notification plumbing started in 0.6.7 and lock down the recent UI/runtime fixes with regression tests.
+  - Browser Notification API (OS-level desktop pop-ups, layer 3 of the 5-layer notification system) now uses `${originalTitle}: ${title}` instead of the hardcoded `Codeman:` literal — so multi-host users running Codeman on laptop / dev box / NAS see `codeman:<host>: <event>` consistently across tab title, tab-flash, Web Push, and OS notifications.
+  - Inline session rename hardened against three corner cases: IME composition commits (Chinese pinyin Enter no longer ships half-composed text as the session name), mid-rename SSE deletion (orphaned `<input>` no longer 404s on blur), and double-fire on stuck settle-once flag (closure-local `settled` boolean replaces the boolean instance flag).
+  - Test coverage backfilled for two prior shipped fixes:
+    - `<title>codeman:<host></title>` server-side templating (#82): 8 tests covering default `os.hostname()`, `--title-hostname` override, HTML-escape against `<script>`-style breakout, ampersand non-double-encoding, and template-tail byte-identical invariance.
+    - tmux size-query helper (#80): 15 tests covering the browser-resize-between-attaches happy path, the query-then-die race, zero/negative/empty/non-numeric output fallbacks, and argv-form/timeout assertions that lock down the no-shell-interpolation guarantee. Inline 14-line query block extracted into a named `queryTmuxWindowSize()` export in `session.ts` so the test surface is a pure function.
+  - Regression coverage added for `stripInkRedrawBloat` route helper.
+  - CLAUDE.md and README.md updated to document dual-CLI env-prefix discipline (`CLAUDE_CODE_*` vs `OPENCODE_*`), the `xterm-zerolag-input` published-package side-effect of overlay edits, and the unified hostname prefix across tab title / tab-flash / OS notifications.
+
+## 0.6.7
+
+### Patch Changes
+
+- - **fix(client): preserve inline rename input across tab re-renders** (#81) — Right-click → rename on a session tab no longer loses keystrokes when SSE traffic from sibling sessions triggers a tab re-render. Adds an `_inlineRenameActive` guard at the top of `renderSessionTabs()` and `_fullRenameSessionTabs()` so the in-progress input isn't destroyed mid-typing. Also fixes a latent double-fire of `finishRename` (blur + Enter could both invoke it). Drive-by: safer DOM child clearing in place of `innerHTML = ''`.
+  - **feat: hostname-aware window title** (#82) — The browser tab title is now `codeman:<hostname>` instead of the bare `Codeman` literal, so users running Codeman on multiple hosts (laptop, dev box, NAS) can tell at a glance which tab points at which backend. New `--title-hostname <name>` CLI flag overrides the detected `os.hostname()` when it's noisy or you want a cosmetic name. The title is templated into the served HTML on first byte (with narrow HTML escaping), so it's correct from the first paint and works without JavaScript. Title-flash logic now respects the per-host title.
+  - **perf: larger terminal tail on tab switch** — `TERMINAL_TAIL_SIZE` raised from 128KB to 1MB. When switching back to a busy session tab you now get ~8× more scrollback restored immediately.
+  - **fix: preserve response text in Ink redraw stripping** — `stripInkRedrawBloat()` rewritten from a first-VPA approach to cluster-based detection. The previous algorithm assumed all VPA escapes after the first one belonged to a single redraw region and discarded everything in between, which silently lost 100KB+ of legitimate Claude response text once a render had occurred. The new approach groups VPAs into clusters separated by ≥8KB gaps and only collapses clusters spanning ≥32KB, so streamed response content between redraw bursts is preserved.
+  - **docs**: `CLAUDE.md` Additional Commands gains the `--title-hostname` row; `README.md` gets a "Hostname-Aware Window Title" subsection under Multi-Session Dashboard.
+
+## 0.6.6
+
+### Patch Changes
+
+- **Terminal scrollback significantly increased** — both the xterm.js viewport and the tmux backing buffer were bottlenecking how far back you could scroll. Three changes:
+  - `DEFAULT_SCROLLBACK` raised from 20000 → 50000 lines (xterm.js, main terminal). The previous bump from 5000 only helped users with empty localStorage; existing users were stuck on whatever value they first picked up. The loader now treats `DEFAULT_SCROLLBACK` as a floor — if your stored value is below the new minimum, you're raised to it automatically.
+  - Subagent / teammate terminals (`panels-ui.js`) were stuck at 5000; now use the same `DEFAULT_SCROLLBACK` constant (50000).
+  - New tmux sessions now run with `history-limit 50000` (tmux defaults to 2000). This matters for hard-reload / re-attach — without it, only the last ~2000 lines survive the round-trip back into a fresh xterm.
+
+  **Tmux flicker on session re-attach fixed (PR #80 by @aakhter)**: the PTY now queries the existing tmux window size via `tmux display -p` before spawning, instead of hardcoding 120x40. Previously, every re-attach forced tmux to resize down to 120x40, causing a visible flicker and one frame of scrollback loss. The `-x 120 -y 40` flag was also dropped from `tmux new-session` so the initial size matches the first attaching client. Uses `execFileSync` (not shell) for safety and falls back to 120x40 on any error.
+
+  **Docs**: CLAUDE.md now documents two recurring foot-guns — the `xterm-zerolag-input` overlay code is duplicated between `packages/xterm-zerolag-input/src/` and inline inside `src/web/public/app.js`, so any overlay change must touch both; and the COM workflow explicitly includes a post-push `gh run watch` step to confirm CI before considering the release done.
+
+## 0.6.5
+
+### Patch Changes
+
+- **Mobile fix**
+  - Android virtual keyboard: space character was silently dropped on touch devices using GBoard / SwiftKey / similar IMEs. Root cause: the input-event handler in `terminal-ui.js` treated any whitespace-only textarea value as proof that xterm had already processed the input. A lone space (`' '.trim() === ''`) tripped this guard, so the space was consumed but never forwarded. Now skips only when the textarea is truly empty (or whitespace from a non-space key). Reported and diagnosed by @coolk8 in #79.
+
+  **Docs**
+  - `CLAUDE.md`: added Zod `.optional()`-vs-`null` gotcha (recurring trap from 0.6.3 / 0.6.4 incidents) and a more visible warning against running bare `npm test` (kills the host tmux session).
+  - `docs/local-echo-overlay-plan.md`: marked SHIPPED, corrected xterm version reference (v5.3.0 → `@xterm/xterm` ^6.0.0).
+
+## 0.6.4
+
+### Patch Changes
+
+- Fix "Failed to enable respawn: Invalid request body" error when selecting infinity duration (∞) in the respawn modal. Frontend was sending `durationMinutes: null`, which Zod's `.optional()` schema rejected (it accepts `undefined` only). The body now omits the field when no duration is selected.
+
+## 0.6.3
+
+### Patch Changes
+
+- **Fix**
+  - Allowlist `opusContext1mEnabled` in `SettingsUpdateSchema`. Without this entry, the strict schema rejected `PUT /api/settings {"opusContext1mEnabled":...}` with `INVALID_INPUT`, so the toggle's value never persisted across reloads. The frontend was already reading and writing this key (`settings-ui.js:336/1137`, `session-ui.js:340`), so saves were silently failing — users never noticed because the load path falls back to `false` on missing keys, hiding the bug. (#78)
+
+## 0.6.2
+
+### Patch Changes
+
+- **Mobile UX**
+  - Resume Conversation list (welcome page) reworked for narrow screens: 2-line title clamp so more of the first prompt is visible; case-aware subtitle that renders `#caseName` (or `#caseName/sub`) when `workingDir` matches a known case, otherwise falls back to the directory basename; inline `⋯` toggle that expands a detail panel with full prompt, full path, timestamp, size, and short session id; `/Users/<user>/` now collapses to `~/` alongside `/home/<user>/`. (#77)
+  - Response viewer: ASCII diagram wrap toggle, dedicated mobile code-block layout, and chrome-stripping fallback when the model wraps its reply in extra markup. (#75)
+  - Mobile keyboard accessory bar no longer triggers vertical scroll. (#72)
+
+  **Sessions & settings**
+  - New `thinkingEffort` setting on session creation, with `xhigh` option and `/effort max` mobile shortcut. (#73)
+  - `thinkingEffort` is now allowlisted in `SettingsUpdateSchema` so it round-trips through PATCH /api/settings.
+  - `envOverrides` (`CLAUDE_CODE_*` / `OPENCODE_*`) are now passed to Claude via tmux env exports at spawn time instead of being written to `<case>/.claude/settings.local.json`. Eliminates UI/disk drift; the value lives on `Session._envOverrides`, is exported by `tmux-manager.buildEnvExports()`, and is persisted in `SessionState.envOverrides`. (#74)
+
+  **Fixes**
+  - Eye icon (active-session indicator) now follows `/clear` to the new Claude conversation instead of getting stuck on the previous transcript. (#76)
+  - `tmux-manager.reconcileSessions` now uses `|` as the field separator, fixing parsing when session names contain other delimiters. (#71)
+
+  **Docs**
+  - CLAUDE.md: added `npm run knip` to the dead-code sweep table and a `Common Gotchas` entry documenting the `envOverrides` → tmux export flow.
+
+## 0.6.1
+
+### Patch Changes
+
+- Internal cleanup and release hygiene:
+  - **Dead-code sweep via knip**: added `knip.json` for dead-code detection and ran a full sweep — removed unused test files, unused scripts, and narrowed internal module exports to the minimum surface area actually consumed.
+  - **Lockfile drift prevention**: `version-packages` now runs `npm install --package-lock-only` and verifies the lockfile is in sync via `scripts/check-lockfile-sync.mjs`; CI runs the same check on every push/PR so version drift fails the build instead of reaching production. Resolves the `package-lock.json` / `package.json` version mismatch that shipped in 0.6.0.
+  - **Docs tightening**: archived 22 completed plan docs from `docs/`, corrected file/handler counts in `CLAUDE.md`, documented the lockfile step in the COM workflow, and removed footer redundancy.
+
+## 0.6.0
+
+### Minor Changes
+
+- Community contributions from @aakhter:
+  - **feat (#66): Tab reorder shortcuts** — `Ctrl+Shift+{` and `Ctrl+Shift+}` move the active session tab left/right, matching WezTerm convention. Order persists across reloads via `saveSessionOrder()`.
+  - **feat (#67): Active tab visibility + Alt+N badges** — active tab now has a bright green border with color-matched glow, and the first 9 tabs display number badges hinting at the `Alt+N` switch shortcut. Badges update on reorder/rerender.
+  - **feat (#68): Clipboard API** — new `POST /api/clipboard` accepting `{text}` broadcasts a `clipboard:write` SSE event; connected browsers attempt `navigator.clipboard.writeText()` with a manual-copy modal fallback when the page isn't focused. Auth-protected via the standard middleware. Useful for pushing snippets from remote sessions to the user's local clipboard.
+  - **fix (#65): Android Shift+key double character** — pressing `Shift+A` on attached Android keyboards no longer produces "AA". Tracks xterm-handled keydown timestamps and skips the orphaned-input listener for 50ms after a real keydown, while still catching Gboard symbol-keyboard inputs (keyCode 229).
+
 ## 0.5.13
 
 ### Patch Changes

CLAUDE.md

@@ -10,7 +10,8 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 | Type check | `tsc --noEmit` |
 | Lint | `npm run lint` (fix: `npm run lint:fix`) |
 | Format | `npm run format` (check: `npm run format:check`) |
-| Single test | `npx vitest run test/<file>.test.ts` |
+| Single test | `npm test -- test/<file>.test.ts` (or `npx vitest run --config config/vitest.config.ts test/<file>.test.ts`) — ⚠ **never** run bare `npm test`, see Testing section |
+| Build | `npm run build` (esbuild via `scripts/build.mjs`, NOT tsc — `tsc --noEmit` is type-check only) |
 | Production | `npm run build && systemctl --user restart codeman-web` |
 
 ## CRITICAL: Session Safety
@@ -48,11 +49,14 @@ When user says "COM":
    CHANGESET
    ```
    Replace `patch` with `minor` or `major` as needed. Include `"xterm-zerolag-input": patch` on a separate line if that package changed too.
-3. **Consume the changeset**: `npm run version-packages` (bumps versions in `package.json` files and updates `CHANGELOG.md`)
+3. **Consume the changeset**: `npm run version-packages` (auto-bumps `package.json` files, updates `CHANGELOG.md`, runs `npm install --package-lock-only`, and verifies lockfile sync via `scripts/check-lockfile-sync.mjs` — all in one command; never hand-edit `CHANGELOG.md` or `package-lock.json` versions)
 4. **Sync CLAUDE.md version**: Update the `**Version**` line below to match the new version from `package.json`
 5. **Commit and deploy**: `git add -A && git commit -m "chore: version packages" && git push && npm run build && systemctl --user restart codeman-web`
+6. **Wait for CI**: after `git push`, find the run with `gh run list -L 1 --json databaseId,headBranch -q '.[0].databaseId'` and watch it with `gh run watch <id> --exit-status`. Confirm all checks pass before considering the release done.
 
-**Version**: 0.5.13 (must match `package.json`)
+CI runs `npm run check:lockfile` on every push/PR, so lockfile drift fails the build even if the `version-packages` script is bypassed.
+
+**Version**: 0.6.9 (must match `package.json`)
 
 ## Project Overview
 
@@ -73,12 +77,14 @@ Codeman is a Claude Code session manager with web interface and autonomous Ralph
 | Task | Command |
 |------|---------|
 | Dev with TLS | `npx tsx src/index.ts web --https` |
+| Override window title hostname | `npx tsx src/index.ts web --title-hostname <name>` (default: `os.hostname()` — `codeman:<name>` is used for tab title, title-flash, and OS desktop notification prefix) |
 | Continuous typecheck | `tsc --noEmit --watch` |
 | Test coverage | `npm run test:coverage` |
+| Dead-code sweep | `npm run knip` (config in `knip.json`) |
 | Production start | `npm run start` |
 | Production logs | `journalctl --user -u codeman-web -f` |
 
-**CI**: `.github/workflows/ci.yml` runs `typecheck`, `lint`, `format:check` on push to master/main and on PRs (Node 22). Tests excluded (they spawn tmux).
+**CI**: `.github/workflows/ci.yml` runs `check:lockfile`, `typecheck`, `lint`, `format:check` on push to master/main and on PRs (Node 22). Tests excluded (they spawn tmux).
 
 **Code style**: Prettier (`singleQuote: true`, `printWidth: 120`, `trailingComma: "es5"`). ESLint flat config (`config/eslint.config.js`) allows `no-console`, warns on `@typescript-eslint/no-explicit-any`. Ignores: `app.js`, `scripts/**/*.mjs`, `src/web/public/vendor/**`, `scripts/remotion/**`.
 
@@ -87,7 +93,11 @@ Codeman is a Claude Code session manager with web interface and autonomous Ralph
 - **Single-line prompts only** — `writeViaMux()` sends text+Enter separately; multi-line breaks Ink
 - **ESM only** — Never `require()`, use `await import()`. `tsx` masks CJS/ESM issues in dev but production breaks
 - **Package ≠ product name** — npm: `aicodeman`, product: **Codeman**. Release renames tags accordingly
-- **Global regex `lastIndex`** — Use `createAnsiPatternFull/Simple()` factories, not shared `g`-flag patterns in loops
+- **Global regex `lastIndex`** — Shared `g`-flag patterns in loops must reset `lastIndex = 0` first, or use the `execPattern()` helper in `utils/regex-patterns.ts` (resets automatically)
+- **`envOverrides` flow `CLAUDE_CODE_*` / `OPENCODE_*` env vars** — Set via `POST /api/sessions { envOverrides }`, stored on `Session._envOverrides`, exported by `tmux-manager.buildEnvExports()` at spawn time, persisted in `SessionState.envOverrides`. **Do NOT** write these to `<case>/.claude/settings.local.json` — that's the old path and creates UI/disk drift
+- **Dual-CLI prefix discipline** — Codeman supports both Claude Code and OpenCode (`claude-cli-resolver.ts` / `opencode-cli-resolver.ts`); env-var prefix is CLI-specific (`CLAUDE_CODE_*` vs `OPENCODE_*`) and the allowlist in `schemas.ts` enforces this. When adding settings, decide which CLI(s) it applies to and gate the env export accordingly — don't blindly forward both prefixes
+- **Zod `.optional()` rejects `null`** — accepts `undefined` only. When the frontend builds a request body with `JSON.stringify`, an explicit `null` field is preserved on the wire and fails validation with `INVALID_INPUT`. Convert `null` → `undefined` before stringifying (e.g. `field: value ?? undefined`), or declare the schema `.nullish()`. Real bugs caused: 0.6.4 (`durationMinutes` for ∞ respawn), and the same shape pattern hit `opusContext1mEnabled` in 0.6.3
+- **`xterm-zerolag-input` is duplicated** — the local-echo overlay lives in BOTH `packages/xterm-zerolag-input/src/` (published to npm as a standalone library for external consumers — see README "Published Packages") AND inline inside `src/web/public/app.js` (runtime copy the web UI actually loads, since the page ships as plain JS without a bundler). Any change to overlay behavior MUST be applied to both, or dev and prod diverge — and a public API break in the package warrants a separate version bump for `xterm-zerolag-input` in the changeset. Always test on mobile after touching it.
 
 **Import conventions**: Utils from `./utils`, types from `./types` (barrel), config from specific `./config/*` files.
 
@@ -109,11 +119,11 @@ Codeman is a Claude Code session manager with web interface and autonomous Ralph
 | **State** | `src/state-store.ts`, `src/run-summary.ts`, `src/session-lifecycle-log.ts` | |
 | **Infra** | `src/hooks-config.ts`, `src/push-store.ts`, `src/tunnel-manager.ts`, `src/image-watcher.ts`, `src/file-stream-manager.ts` | |
 | **Plan** | `src/plan-orchestrator.ts`, `src/prompts/*.ts`, `src/templates/claude-md.ts` | |
-| **Web** | `src/web/server.ts`, `src/web/sse-events.ts`, `src/web/routes/*.ts` (14 route modules + barrel), `src/web/route-helpers.ts`, `src/web/ports/*.ts`, `src/web/middleware/auth.ts`, `src/web/schemas.ts` | |
-| **Frontend** | `src/web/public/app.js` (~2.8K lines, core) + 5 infra modules (`constants.js`, `mobile-handlers.js`, `voice-input.js`, `notification-manager.js`, `keyboard-accessory.js`) + 7 domain modules (`terminal-ui.js`, `respawn-ui.js`, `ralph-panel.js`, `orchestrator-panel.js`, `settings-ui.js`, `panels-ui.js`, `session-ui.js`) + 4 feature modules (`ralph-wizard.js`, `api-client.js`, `subagent-windows.js`, `input-cjk.js`) + `sw.js` | |
-| **Types** | `src/types/index.ts` → 14 domain files | See `@fileoverview` in index.ts |
+| **Web** | `src/web/server.ts`, `src/web/sse-events.ts`, `src/web/routes/*.ts` (15 route modules + barrel), `src/web/route-helpers.ts`, `src/web/ports/*.ts`, `src/web/middleware/auth.ts`, `src/web/schemas.ts` | |
+| **Frontend** | `src/web/public/app.js` (~2.9K lines, core) + 5 infra modules (`constants.js`, `mobile-handlers.js`, `voice-input.js`, `notification-manager.js`, `keyboard-accessory.js`) + 7 domain modules (`terminal-ui.js`, `respawn-ui.js`, `ralph-panel.js`, `orchestrator-panel.js`, `settings-ui.js`, `panels-ui.js`, `session-ui.js`) + 4 feature modules (`ralph-wizard.js`, `api-client.js`, `subagent-windows.js`, `input-cjk.js`) + `sw.js` | |
+| **Types** | `src/types/index.ts` (barrel) → 14 domain files; also `src/types.ts` root re-export | See `@fileoverview` in index.ts |
 
-★ = Large file (>50KB). All files have `@fileoverview` JSDoc — read that before diving in.
+★ = Large file (>50KB). All files have `@fileoverview` JSDoc — read that before diving in. Discovery aid: `grep -l '@fileoverview' src/web/routes/*.ts` lists all route modules; same grep works for `src/types/`, `src/web/public/*.js`.
 
 **Local package**: `packages/xterm-zerolag-input/` — local echo overlay for xterm.js; copy embedded in `app.js`.
 
@@ -150,7 +160,7 @@ Frontend JS modules have `@fileoverview` with `@dependency`/`@loadorder` tags. L
 
 **Respawn presets**: `solo-work` (3s/60min), `subagent-workflow` (45s/240min), `team-lead` (90s/480min), `ralph-todo` (8s/480min), `overnight-autonomous` (10s/480min).
 
-**Keyboard shortcuts**: Escape (close), Ctrl+? (help), Ctrl+W (kill), Ctrl+Tab (next), Alt+1-9 (switch tab), Shift+Enter (newline), Ctrl+L (clear), Ctrl+Shift+R (restore size), Ctrl/Cmd +/- (font).
+**Keyboard shortcuts**: Escape (close), Ctrl+? (help), Ctrl+W (kill), Ctrl+Tab (next), Alt+1-9 (switch tab), Ctrl+Shift+{/} (move tab left/right), Shift+Enter (newline), Ctrl+L (clear), Ctrl+Shift+R (restore size), Ctrl+Shift+V (voice input), Ctrl/Cmd +/- (font).
 
 ### Security
 
@@ -167,11 +177,11 @@ Frontend JS modules have `@fileoverview` with `@dependency`/`@loadorder` tags. L
 
 ### SSE Event Registry
 
-~117 event types in `src/web/sse-events.ts` (backend) and `SSE_EVENTS` in `constants.js` (frontend). Both must be kept in sync.
+~120 event types in `src/web/sse-events.ts` (backend) and `SSE_EVENTS` in `constants.js` (frontend). Both must be kept in sync.
 
 ### API Routes
 
-~124 handlers across 14 route files in `src/web/routes/`: system (36), sessions (25), orchestrator (10), ralph (9), plan (8), respawn (7), cases (7), files (5), mux (5), scheduled (4), push (4), teams (2), hooks (1), ws (1 WebSocket). Each file has `@fileoverview` with endpoint details.
+~128 handlers across 15 route files in `src/web/routes/`: system (36), sessions (27), orchestrator (10), cases (9), ralph (9), plan (8), respawn (7), files (5), mux (5), push (4), scheduled (4), teams (2), hooks (1), clipboard (1), ws (1 WebSocket). Each file has `@fileoverview` with endpoint details.
 
 ## Adding Features
 
@@ -193,11 +203,13 @@ All in `~/.codeman/`: `state.json` (sessions, settings, respawn), `mux-sessions.
 **CRITICAL: You are running inside a Codeman-managed tmux session.** Never run `npx vitest run` (full suite) — it spawns/kills tmux sessions and will crash your own session. Only run individual files:
 
 ```bash
-npx vitest run test/<specific-file>.test.ts     # Single file (SAFE)
-npx vitest run -t "pattern"                      # By name (SAFE)
-# npx vitest run                                 # DANGEROUS — DON'T DO THIS
+npm test -- test/<specific-file>.test.ts         # Single file (SAFE, uses config/vitest.config.ts)
+npm test -- -t "pattern"                          # By name (SAFE)
+# npm test                                        # DANGEROUS — runs full suite, DON'T DO THIS
 ```
 
+Raw `npx vitest` skips `config/vitest.config.ts`; always use `npm test --` or pass `--config config/vitest.config.ts`.
+
 **Config**: Vitest with `globals: true`, `fileParallelism: false`. Timeout 30s, teardown 60s.
 
 **Safety**: `test/setup.ts` snapshots pre-existing tmux sessions and never kills them. Only `registerTestTmuxSession()` sessions get cleaned up.
@@ -206,10 +218,6 @@ npx vitest run -t "pattern"                      # By name (SAFE)
 
 **Respawn tests**: Use `MockSession` from `test/respawn-test-utils.ts`. **Route tests**: `app.inject()` in `test/routes/`. **Mobile tests**: Playwright suite in `test/mobile/` (135 device profiles).
 
-## Screenshots
-
-Mobile screenshots in `~/.codeman/screenshots/`. API: `GET /api/screenshots`, `POST /api/screenshots`.
-
 ## Debugging
 
 ```bash
@@ -220,27 +228,14 @@ curl localhost:3000/api/subagents | jq             # Background agents
 cat ~/.codeman/state.json | jq                     # Persisted state
 ```
 
+Mobile screenshots: `~/.codeman/screenshots/`, accessed via `GET/POST /api/screenshots`.
+
 ## Performance & Limits
 
 Target: 20 sessions, 50 agent windows at 60fps. Limits in `src/config/`: terminal 2MB, text 1MB, messages 1000, max agents 500, max sessions 50, max SSE clients 100. Use `LRUMap` for bounded caches, `StaleExpirationMap` for TTL cleanup. Anti-flicker pipeline: `docs/terminal-anti-flicker.md`.
 
-## References
+**Memory leaks (24+ hour sessions)**: use `CleanupManager`, clear Maps in `stop()`, guard async with `if (this.cleanup.isStopped) return`. Frontend: store handler refs, clean in `close*()`. Verify: `npm test -- test/memory-leak-prevention.test.ts`.
 
-Deep-dive docs in `docs/`: `respawn-state-machine.md`, `ralph-wiggum-guide.md`, `claude-code-hooks-reference.md`, `terminal-anti-flicker.md`, `opencode-integration.md`, `qr-auth-plan.md`, `orchestrator-loop-architecture.md`, `browser-testing-guide.md`. Agent Teams: `docs/agent-teams/README.md`. SSE events: `src/web/sse-events.ts` + `constants.js`.
+## Scripts & Tunnel
 
-## Scripts
-
-Key: `scripts/tmux-manager.sh` (safe tmux mgmt), `scripts/tunnel.sh` (tunnel start/stop/url). Production: `scripts/codeman-web.service`, `scripts/codeman-tunnel.service`.
-
-## Memory Leak Prevention
-
-24+ hour sessions: use `CleanupManager`, clear Maps in `stop()`, guard async with `if (this.cleanup.isStopped) return`. Frontend: store handler refs, clean in `close*()`. Verify: `npx vitest run test/memory-leak-prevention.test.ts`.
-
-## Common Workflows
-
-**Bug investigation**: Dev server → reproduce in browser → check terminal + `~/.codeman/state.json`.
-**Respawn changes**: Read `docs/respawn-state-machine.md` first. Use `MockSession` from `test/respawn-test-utils.ts`.
-
-## Tunnel
-
-`./scripts/tunnel.sh start|stop|url`. **Always set `CODEMAN_PASSWORD`** before exposing via tunnel.
+Key scripts: `scripts/tmux-manager.sh` (safe tmux mgmt), `scripts/tunnel.sh start|stop|url` (tunnel). Production services: `scripts/codeman-web.service`, `scripts/codeman-tunnel.service`. **Always set `CODEMAN_PASSWORD`** before exposing via tunnel.

README.md

@@ -226,6 +226,17 @@ Run **20 parallel sessions** with full visibility — real-time xterm.js termina
 
 Every session runs inside **tmux** — sessions survive server restarts, network drops, and machine sleep. Auto-recovery on startup with dual redundancy. Ghost session discovery finds orphaned tmux sessions. Managed sessions are environment-tagged so the agent won't kill its own session.
 
+### Hostname-Aware Window Title
+
+Running Codeman on multiple hosts (laptop, dev box, NAS)? The browser tab title is `codeman:<hostname>` so you can tell which backend each tab points at without clicking in:
+
+```bash
+codeman web                                # codeman:<os.hostname()>
+codeman web --title-hostname dev-box       # codeman:dev-box (manual override for noisy hostnames)
+```
+
+The title is templated into the served HTML on first byte, so it's correct from the very first paint and works without JavaScript. The same hostname prefix is applied to the tab-flash format (`⚠️ (N) codeman:<host>`) and to OS-level desktop notifications (`codeman:<host>: <event>`), so cross-host alerts in the system notification center are also unambiguous.
+
 ### Smart Token Management
 
 | Threshold | Action | Result |
@@ -401,9 +412,12 @@ Single-digit selection (1-9), color-coded status, token counts, auto-refresh. De
 | `Ctrl+Enter` | Quick-start session |
 | `Ctrl+W` | Close session |
 | `Ctrl+Tab` | Next session |
+| `Alt+1`–`Alt+9` | Switch to tab N |
+| `Ctrl+Shift+{` / `Ctrl+Shift+}` | Move active tab left / right |
 | `Ctrl+K` | Kill all sessions |
 | `Ctrl+L` | Clear terminal |
 | `Ctrl+Shift+R` | Restore terminal size |
+| `Ctrl+Shift+V` | Toggle voice input |
 | `Ctrl/Cmd +/-` | Font size |
 | `Escape` | Close panels |
 
@@ -446,6 +460,7 @@ Single-digit selection (1-9), color-coded status, token counts, auto-refresh. De
 | `GET` | `/api/events` | SSE stream |
 | `GET` | `/api/status` | Full app state |
 | `POST` | `/api/hook-event` | Hook callbacks |
+| `POST` | `/api/clipboard` | Push text to all connected browsers (`{text}`) |
 | `GET` | `/api/sessions/:id/run-summary` | Timeline + stats |
 
 ---

docs/local-echo-overlay-plan.md

@@ -1,5 +1,7 @@
 # Local Echo Overlay — Implementation Plan
 
+> **Status: SHIPPED.** Implementation lives in `packages/xterm-zerolag-input/src/` (overlay-renderer.ts, prompt-finder.ts, cell-dimensions.ts, zerolag-input-addon.ts) with the embedded copy in `src/web/public/app.js`. This document is retained as historical design context.
+
 ## Context
 
 User accesses Codeman remotely from Thailand to Switzerland over Tailscale (~200-300ms RTT).
@@ -18,9 +20,9 @@ redraws. A DOM overlay sits in a separate rendering layer (z-index 7) and doesn'
 with Ink's cursor management or screen redraws at all. When Ink redraws (server output arrives),
 we simply hide the overlay.
 
-**Why it will look indistinguishable:** We use the DOM renderer (not canvas/WebGL) in our
-xterm.js v5.3.0, so both terminal text and overlay text are rendered by the same browser
-font engine with identical sub-pixel rendering.
+**Why it will look indistinguishable:** We use the DOM renderer (not canvas/WebGL), so both
+terminal text and overlay text are rendered by the same browser font engine with identical
+sub-pixel rendering. (Originally designed against xterm.js v5.3.0; project now on `@xterm/xterm` ^6.0.0 — the internal `_core._renderService.dimensions` access path still works in v6.)
 
 ## Key Technical Details (from research)
 
@@ -36,7 +38,7 @@ const top  = cursorY * dims.css.cell.height;  // CSS pixels, relative to .xterm-
 - `cursorY` = `terminal.buffer.active.cursorY` (0 to terminal.rows-1, ALREADY viewport-relative)
 - No scroll offset math needed
 
-### Cell Dimensions (v5.3.0 — no public API, use internal)
+### Cell Dimensions (no public API in v5/v6 — use internal; public in v7+)
 ```js
 const dims = terminal._core._renderService.dimensions;
 dims.css.cell.width   // e.g., 8.4px

knip.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://unpkg.com/knip@5/schema.json",
+  "entry": [
+    "scripts/*.mjs",
+    "scripts/*.js",
+    "scripts/watch-subagents.ts",
+    "scripts/remotion/Root.tsx",
+    "scripts/remotion/index.ts",
+    "test/**/*.test.ts",
+    "test/mobile/vitest.config.ts",
+    "test/**/*.mjs"
+  ],
+  "project": ["src/**/*.{ts,tsx}", "scripts/**/*.{ts,tsx,mjs,js}", "test/**/*.{ts,mjs}"],
+  "ignoreExportsUsedInFile": true,
+  "ignoreDependencies": ["@remotion/cli", "@remotion/transitions", "esbuild", "agent-browser"]
+}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "aicodeman",
-  "version": "0.3.11",
+  "version": "0.6.9",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "aicodeman",
-      "version": "0.3.11",
+      "version": "0.6.9",
       "hasInstallScript": true,
       "license": "MIT",
       "workspaces": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aicodeman",
-  "version": "0.5.13",
+  "version": "0.6.9",
   "description": "The missing control plane for AI coding agents - run 20 autonomous agents with real-time monitoring and session persistence",
   "type": "module",
   "main": "dist/index.js",
@@ -25,7 +25,9 @@
     "format:check": "prettier --check 'src/**/*.ts'",
     "capture:subagents": "node scripts/capture-subagent-screenshots.mjs",
     "changeset": "changeset",
-    "version-packages": "changeset version",
+    "version-packages": "changeset version && npm install --package-lock-only && node scripts/check-lockfile-sync.mjs",
+    "check:lockfile": "node scripts/check-lockfile-sync.mjs",
+    "knip": "npx --yes knip@latest",
     "release": "changeset publish"
   },
   "workspaces": [

scripts/browser-comparison.mjs

@@ -19,6 +19,10 @@ const PORTS = {
 
 const results = [];
 
+function isCodemanTitle(title) {
+  return typeof title === 'string' && title.startsWith('codeman:');
+}
+
 function logSection(title) {
   console.log('\n' + '='.repeat(60));
   console.log(`  ${title}`);
@@ -88,7 +92,7 @@ async function main() {
       const page = await playwrightBrowser.newPage();
       await page.goto(`http://localhost:${PORTS.playwright}`);
       const title = await page.title();
-      if (title !== 'Codeman') throw new Error(`Expected Codeman, got ${title}`);
+      if (!isCodemanTitle(title)) throw new Error(`Expected codeman:<hostname>, got ${title}`);
       await page.close();
     });
 
@@ -149,7 +153,7 @@ async function main() {
       const page = await puppeteerBrowser.newPage();
       await page.goto(`http://localhost:${PORTS.puppeteer}`);
       const title = await page.title();
-      if (title !== 'Codeman') throw new Error(`Expected Codeman, got ${title}`);
+      if (!isCodemanTitle(title)) throw new Error(`Expected codeman:<hostname>, got ${title}`);
       await page.close();
     });
 
@@ -202,7 +206,7 @@ async function main() {
     agentBrowser(`open http://localhost:${PORTS.agentBrowser}`);
     await new Promise(r => setTimeout(r, 2000));
     const title = agentBrowserJson('get title');
-    agentBrowserAvailable = title.title === 'Codeman';
+    agentBrowserAvailable = isCodemanTitle(title.title);
     console.log('  Browser launched');
 
     // Test 1: Page load
@@ -210,7 +214,7 @@ async function main() {
       agentBrowser(`open http://localhost:${PORTS.agentBrowser}`);
       await new Promise(r => setTimeout(r, 1000));
       const title = agentBrowserJson('get title');
-      if (title.title !== 'Codeman') throw new Error(`Expected Codeman, got ${title.title}`);
+      if (!isCodemanTitle(title.title)) throw new Error(`Expected codeman:<hostname>, got ${title.title}`);
     });
 
     // Test 2: Element selection

scripts/build.mjs

@@ -93,6 +93,7 @@ console.log('\n[build] content-hash cache busting');
     'ralph-wizard.js',
     'api-client.js',
     'subagent-windows.js',
+    'image-input.js',
     'vendor/xterm-zerolag-input.js',
   ];
   const manifest = {};

scripts/check-lockfile-sync.mjs

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+// Fails if package-lock.json's version fields don't match package.json.
+// Changesets bumps package.json but NOT the lockfile — this catches that drift
+// (the top-level `version` in lockfiles is metadata, so `npm ci` won't flag it).
+
+import { readFileSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const pkg = JSON.parse(readFileSync(resolve(repoRoot, 'package.json'), 'utf8'));
+const lock = JSON.parse(readFileSync(resolve(repoRoot, 'package-lock.json'), 'utf8'));
+
+const expected = pkg.version;
+const rootVersion = lock.version;
+const selfVersion = lock.packages?.['']?.version;
+
+const mismatches = [];
+if (rootVersion !== expected) mismatches.push(`  package-lock.json#.version = ${rootVersion} (expected ${expected})`);
+if (selfVersion !== expected) mismatches.push(`  package-lock.json#.packages[""].version = ${selfVersion} (expected ${expected})`);
+
+if (mismatches.length > 0) {
+  console.error(`\nLockfile version drift detected (package.json is ${expected}):`);
+  console.error(mismatches.join('\n'));
+  console.error('\nFix: run `npm install --package-lock-only` and commit the updated package-lock.json.\n');
+  process.exit(1);
+}
+
+console.log(`Lockfile in sync with package.json (${expected}).`);

scripts/remotion/components/TerminalScreen.tsx

@@ -1,117 +0,0 @@
-import React from 'react';
-import { useCurrentFrame } from 'remotion';
-import { colors, fonts } from '../lib/theme';
-
-type OverlayChar = {
-  char: string;
-  confirmed: boolean;
-};
-
-type TerminalScreenProps = {
-  typed: string;
-  cursorVisible: boolean;
-  overlayChars?: OverlayChar[];
-  fontSize?: number;
-};
-
-/**
- * Renders a terminal area styled exactly like the real Codeman xterm.js terminal.
- * Background #0d0d0d, Fira Code font, block cursor, Claude Code prompt.
- */
-export const TerminalScreen: React.FC<TerminalScreenProps> = ({
-  typed,
-  cursorVisible,
-  overlayChars,
-  fontSize = 28,
-}) => {
-  const frame = useCurrentFrame();
-
-  // Block cursor — solid, no blink (matches Codeman's cursorBlink: false)
-  const cursorOn = cursorVisible;
-  // But add a subtle blink for video clarity so viewers notice it
-  const cursorOpacity = cursorOn ? (Math.floor(frame / 20) % 2 === 0 ? 0.9 : 0.6) : 0;
-
-  const lineHeight = Math.round(fontSize * 1.35);
-  const charWidth = fontSize * 0.6;
-
-  return (
-    <div
-      style={{
-        width: '100%',
-        height: '100%',
-        background: '#0d0d0d',
-        position: 'relative',
-        fontFamily: '"Fira Code", "Cascadia Code", "JetBrains Mono", "SF Mono", Monaco, monospace',
-        overflow: 'hidden',
-      }}
-    >
-      {/* Previous terminal output lines (fake history for realism) */}
-      <div
-        style={{
-          padding: '16px 20px',
-          fontSize: fontSize * 0.65,
-          lineHeight: `${Math.round(fontSize * 0.65 * 1.4)}px`,
-          color: '#495057',
-        }}
-      >
-        <div>
-          <span style={{ color: '#339af0' }}>❯</span>
-          <span style={{ color: '#495057' }}> claude --dangerously-skip-permissions</span>
-        </div>
-        <div style={{ color: '#3a3a3a', marginTop: 4 }}>
-          ╭────────────────────────────────────╮
-        </div>
-        <div style={{ color: '#3a3a3a' }}>
-          │ Claude Code session active         │
-        </div>
-        <div style={{ color: '#3a3a3a' }}>
-          ╰────────────────────────────────────╯
-        </div>
-      </div>
-
-      {/* Active prompt line — this is where the typing happens */}
-      <div
-        style={{
-          padding: '8px 20px',
-          fontSize,
-          lineHeight: `${lineHeight}px`,
-          display: 'flex',
-          alignItems: 'baseline',
-        }}
-      >
-        {/* Prompt character */}
-        <span style={{ color: '#339af0', fontWeight: 700, marginRight: charWidth * 0.8 }}>❯</span>
-
-        {/* Typed text */}
-        {overlayChars ? (
-          // Zerolag mode: show overlay chars with confirmed/unconfirmed color
-          overlayChars.map((oc, i) => (
-            <span
-              key={i}
-              style={{
-                color: oc.confirmed ? '#e0e0e0' : '#7a7a7a',
-                letterSpacing: '0.5px',
-              }}
-            >
-              {oc.char}
-            </span>
-          ))
-        ) : (
-          <span style={{ color: '#e0e0e0', letterSpacing: '0.5px' }}>{typed}</span>
-        )}
-
-        {/* Block cursor */}
-        <span
-          style={{
-            display: 'inline-block',
-            width: charWidth,
-            height: lineHeight * 0.85,
-            background: `rgba(224, 224, 224, ${cursorOpacity})`,
-            verticalAlign: 'text-bottom',
-            marginLeft: 1,
-          }}
-        />
-      </div>
-    </div>
-  );
-};

src/ai-idle-checker.ts

@@ -41,7 +41,7 @@ import {
 
 // ========== Types ==========
 
-export type AiIdleCheckConfig = AiCheckerConfigBase;
+type AiIdleCheckConfig = AiCheckerConfigBase;
 
 export type AiCheckVerdict = 'IDLE' | 'WORKING' | 'ERROR';
 

src/ai-plan-checker.ts

@@ -40,13 +40,13 @@ import {
 
 // ========== Types ==========
 
-export type AiPlanCheckConfig = AiCheckerConfigBase;
+type AiPlanCheckConfig = AiCheckerConfigBase;
 
 export type AiPlanCheckVerdict = 'PLAN_MODE' | 'NOT_PLAN_MODE' | 'ERROR';
 
 export type AiPlanCheckResult = AiCheckerResultBase<AiPlanCheckVerdict>;
 
-export type AiPlanCheckState = AiCheckerStateBase<AiPlanCheckVerdict>;
+type AiPlanCheckState = AiCheckerStateBase<AiPlanCheckVerdict>;
 
 // ========== Constants ==========
 

src/bash-tool-parser.ts

@@ -99,7 +99,7 @@ const LOG_FILE_MENTION_PATTERN = /([/~][^\s'"<>|;&\n]*(?:\.log|\.txt|\.out|\/log
 /**
  * Events emitted by BashToolParser.
  */
-export interface BashToolParserEvents {
+interface BashToolParserEvents {
   /** New Bash tool with file paths started */
   toolStart: [tool: ActiveBashTool];
   /** Bash tool completed */
@@ -111,7 +111,7 @@ export interface BashToolParserEvents {
 /**
  * Configuration options for BashToolParser.
  */
-export interface BashToolParserConfig {
+interface BashToolParserConfig {
   /** Session ID this parser belongs to */
   sessionId: string;
   /** Whether the parser is enabled (default: true) */

src/cli.ts

@@ -485,16 +485,18 @@ program
   .description('Start the web interface')
   .option('-p, --port <port>', 'Port to listen on', '3000')
   .option('--https', 'Enable HTTPS with self-signed certificate (only needed for remote access, not localhost)')
+  .option('--title-hostname <hostname>', 'Override the hostname shown in the browser title')
   .action(async (options) => {
     const { startWebServer } = await import('./web/server.js');
     const port = parseInt(options.port, 10);
     const https = !!options.https;
+    const titleHostname = options.titleHostname;
     const protocol = https ? 'https' : 'http';
 
     console.log(chalk.cyan(`Starting Codeman web interface on port ${port}${https ? ' (HTTPS)' : ''}...`));
 
     try {
-      const server = await startWebServer(port, https);
+      const server = await startWebServer(port, https, false, titleHostname);
       console.log(chalk.green(`\n✓ Web interface running at ${protocol}://localhost:${port}`));
       if (https) {
         console.log(chalk.yellow('  Note: Accept the self-signed certificate in your browser on first visit'));

src/file-stream-manager.ts

@@ -48,7 +48,7 @@ const STREAM_INACTIVITY_TIMEOUT_MS = INACTIVITY_TIMEOUT_MS;
 /**
  * Represents an active file stream.
  */
-export interface FileStream {
+interface FileStream {
   /** Unique stream identifier */
   id: string;
   /** Session this stream belongs to */
@@ -74,7 +74,7 @@ export interface FileStream {
 /**
  * Options for creating a file stream.
  */
-export interface CreateStreamOptions {
+interface CreateStreamOptions {
   /** Session ID requesting the stream */
   sessionId: string;
   /** Path to the file to stream */
@@ -94,7 +94,7 @@ export interface CreateStreamOptions {
 /**
  * Result of creating a stream.
  */
-export interface CreateStreamResult {
+interface CreateStreamResult {
   success: boolean;
   streamId?: string;
   error?: string;

src/hooks-config.ts

@@ -84,6 +84,42 @@ export function generateHooksConfig(): { hooks: Record<string, unknown[]> } {
   };
 }
 
+/**
+ * Remove a subset of env keys from .claude/settings.local.json.env if present.
+ * Used during the disk→tmux-setenv migration: when the caller is actively setting
+ * a fresh value for a Codeman-managed key, any stale disk entry for THAT KEY is
+ * superseded and should be removed. Keys NOT in `keysToRemove` are left alone
+ * (they may be user-managed). No-op if the file/keys don't exist.
+ */
+export async function stripCaseEnvKeys(casePath: string, keysToRemove: readonly string[]): Promise<void> {
+  if (keysToRemove.length === 0) return;
+
+  const settingsPath = join(casePath, '.claude', 'settings.local.json');
+  if (!existsSync(settingsPath)) return;
+
+  let existing: Record<string, unknown>;
+  try {
+    existing = JSON.parse(await readFile(settingsPath, 'utf-8'));
+  } catch {
+    return; // Malformed — don't rewrite it
+  }
+
+  const env = existing.env as Record<string, string> | undefined;
+  if (!env) return;
+
+  let changed = false;
+  for (const key of keysToRemove) {
+    if (key in env) {
+      delete env[key];
+      changed = true;
+    }
+  }
+  if (!changed) return;
+
+  existing.env = env;
+  await writeFile(settingsPath, JSON.stringify(existing, null, 2) + '\n');
+}
+
 /**
  * Updates env vars in .claude/settings.local.json for the given case path.
  * Merges with existing env field; removes vars set to empty string.

src/image-watcher.ts

@@ -17,11 +17,6 @@ import { KeyedDebouncer } from './utils/index.js';
 
 // ========== Types ==========
 
-export interface ImageWatcherEvents {
-  'image:detected': (event: ImageDetectedEvent) => void;
-  'image:error': (error: Error, sessionId?: string) => void;
-}
-
 // ========== Constants ==========
 
 /** Supported image file extensions (lowercase) */

src/mux-interface.ts

@@ -63,6 +63,8 @@ export interface CreateSessionOptions {
   openCodeConfig?: OpenCodeConfig;
   /** When restoring after reboot, resume a previous Claude conversation by its session ID */
   resumeSessionId?: string;
+  /** Extra env vars exported before launching the CLI (e.g., CLAUDE_CODE_EFFORT_LEVEL). Ephemeral — not written to disk. */
+  envOverrides?: Record<string, string>;
 }
 
 /** Options for respawning a dead pane. */
@@ -77,6 +79,8 @@ export interface RespawnPaneOptions {
   openCodeConfig?: OpenCodeConfig;
   /** Resume a previous Claude conversation when respawning */
   resumeSessionId?: string;
+  /** Extra env vars exported before launching the CLI (preserved across respawns). */
+  envOverrides?: Record<string, string>;
 }
 
 /**

src/orchestrator-loop.ts

@@ -60,21 +60,6 @@ const POST_PHASE_DELAY_MS = 1000;
 // Events
 // ═══════════════════════════════════════════════════════════════
 
-export interface OrchestratorLoopEvents {
-  stateChanged: (state: OrchestratorState, prevState: OrchestratorState) => void;
-  planProgress: (phase: string, detail: string) => void;
-  planReady: (plan: OrchestratorPlan) => void;
-  phaseStarted: (phase: OrchestratorPhase) => void;
-  phaseCompleted: (phase: OrchestratorPhase) => void;
-  phaseFailed: (phase: OrchestratorPhase, reason: string) => void;
-  taskAssigned: (task: OrchestratorTask, sessionId: string) => void;
-  taskCompleted: (task: OrchestratorTask) => void;
-  taskFailed: (task: OrchestratorTask, error: string) => void;
-  verificationResult: (phase: OrchestratorPhase, result: VerificationResult) => void;
-  completed: (stats: OrchestratorStats) => void;
-  error: (error: Error) => void;
-}
-
 // ═══════════════════════════════════════════════════════════════
 // OrchestratorLoop
 // ═══════════════════════════════════════════════════════════════

src/plan-orchestrator.ts

@@ -68,7 +68,7 @@ export interface DetailedPlanResult {
 
 export type ProgressCallback = (phase: string, detail: string) => void;
 
-export interface PlanSubagentEvent {
+interface PlanSubagentEvent {
   type: 'started' | 'progress' | 'completed' | 'failed';
   agentId: string;
   agentType: 'research' | 'planner';
@@ -80,7 +80,7 @@ export interface PlanSubagentEvent {
   error?: string;
 }
 
-export type SubagentCallback = (event: PlanSubagentEvent) => void;
+type SubagentCallback = (event: PlanSubagentEvent) => void;
 
 // ============================================================================
 // JSON Repair Helper

src/prompts/index.ts

@@ -7,10 +7,4 @@
 
 export { RESEARCH_AGENT_PROMPT } from './research-agent.js';
 export { PLANNER_PROMPT } from './planner.js';
-export {
-  PHASE_EXECUTION_PROMPT,
-  TEAM_LEAD_PROMPT,
-  VERIFICATION_PROMPT,
-  REPLAN_PROMPT,
-  SINGLE_TASK_PROMPT,
-} from './orchestrator.js';
+export { PHASE_EXECUTION_PROMPT, TEAM_LEAD_PROMPT, REPLAN_PROMPT, SINGLE_TASK_PROMPT } from './orchestrator.js';

src/prompts/orchestrator.ts

@@ -57,22 +57,6 @@ Suggested teammate roles:
 Each teammate should focus on their assigned task area. Monitor their progress.
 When ALL tasks are complete and you've verified the results, output: <promise>{COMPLETION_PHRASE}</promise>`;
 
-/**
- * Verification prompt — asks Claude to verify phase completion.
- *
- * Placeholders:
- * - {PHASE_NAME}: Phase name
- * - {CRITERIA}: Numbered verification criteria
- * - {PASS_PHRASE}: Phrase to output on success
- * - {FAIL_PHRASE}: Phrase to output on failure
- */
-export const VERIFICATION_PROMPT = `Review the work done in "{PHASE_NAME}". Check these criteria:
-
-{CRITERIA}
-
-If ALL criteria are met, respond with: {PASS_PHRASE}
-If ANY criteria fail, respond with: {FAIL_PHRASE} and explain what failed.`;
-
 /**
  * Replan prompt — gives failure context and asks for recovery.
  *

src/ralph-config.ts

@@ -24,7 +24,7 @@ const YAML_LINE_PATTERN = /^([a-zA-Z_-]+):\s*"?([^"\n]+)"?\s*$/gm;
 /**
  * Ralph Loop configuration from .claude/ralph-loop.local.md
  */
-export interface RalphLoopConfig {
+interface RalphLoopConfig {
   enabled: boolean;
   iteration: number;
   maxIterations: number | null;

src/ralph-loop.ts

@@ -34,19 +34,11 @@ import { RalphLoopStatus, getErrorMessage } from './types.js';
 /**
  * Events emitted by RalphLoop
  */
-export interface RalphLoopEvents {
-  started: () => void;
-  stopped: () => void;
-  taskAssigned: (taskId: string, sessionId: string) => void;
-  taskCompleted: (taskId: string) => void;
-  taskFailed: (taskId: string, error: string) => void;
-  error: (error: Error) => void;
-}
 
 /**
  * Configuration options for RalphLoop
  */
-export interface RalphLoopOptions {
+interface RalphLoopOptions {
   /** How often to check for new tasks (default from config) */
   pollIntervalMs?: number;
   /** Minimum time to run before stopping (null = no minimum) */

src/ralph-tracker.ts

@@ -19,7 +19,6 @@
  * Key exports:
  * - `RalphTracker` class — main tracker, extends EventEmitter
  * - `RalphTrackerEvents` interface — typed event map
- * - Re-exports: `EnhancedPlanTask`, `CheckpointReview` from ralph-plan-tracker
  *
  * Key methods: `processData(data)` — feed terminal output, `getState()`,
  * `getTodos()`, `getCompletionHistory()`, `getPlanTasks()`, `reset()`
@@ -66,9 +65,6 @@ import { RalphStallDetector } from './ralph-stall-detector.js';
 import { RalphStatusParser } from './ralph-status-parser.js';
 import { STALE_DATA_MAX_AGE_MS, INACTIVITY_TIMEOUT_MS } from './config/server-timing.js';
 
-// Re-export sub-module types for backward compatibility
-export type { EnhancedPlanTask, CheckpointReview } from './ralph-plan-tracker.js';
-
 // ========== Configuration Constants ==========
 // Note: MAX_TODOS_PER_SESSION and MAX_LINE_BUFFER_SIZE are imported from config modules
 
@@ -390,32 +386,6 @@ const P2_PRIORITY_PATTERNS = [
  * @event circuitBreakerUpdate - Fired when circuit breaker state changes
  * @event exitGateMet - Fired when dual-condition exit gate is met
  */
-export interface RalphTrackerEvents {
-  /** Emitted when loop state changes */
-  loopUpdate: (state: RalphTrackerState) => void;
-  /** Emitted when todo list is modified */
-  todoUpdate: (todos: RalphTodoItem[]) => void;
-  /** Emitted when completion phrase detected (loop finished) */
-  completionDetected: (phrase: string) => void;
-  /** Emitted when tracker auto-enables from disabled state */
-  enabled: () => void;
-  /** Emitted when a RALPH_STATUS block is parsed */
-  statusBlockDetected: (block: RalphStatusBlock) => void;
-  /** Emitted when circuit breaker state changes */
-  circuitBreakerUpdate: (status: CircuitBreakerStatus) => void;
-  /** Emitted when dual-condition exit gate is met (completion indicators >= 2 AND EXIT_SIGNAL: true) */
-  exitGateMet: (data: { completionIndicators: number; exitSignal: boolean }) => void;
-  /** Emitted when iteration count hasn't changed for an extended period (stall warning) */
-  iterationStallWarning: (data: { iteration: number; stallDurationMs: number }) => void;
-  /** Emitted when iteration count hasn't changed for critical period (stall critical) */
-  iterationStallCritical: (data: { iteration: number; stallDurationMs: number }) => void;
-  /** Emitted when a common/risky completion phrase is detected (P1-002) */
-  phraseValidationWarning: (data: {
-    phrase: string;
-    reason: 'common' | 'short' | 'numeric';
-    suggestedPhrase: string;
-  }) => void;
-}
 
 /**
  * RalphTracker - Parses terminal output to detect Ralph Wiggum loops and todos

src/respawn-controller.ts

@@ -27,7 +27,7 @@
  * - `RespawnController` class — state machine, extends EventEmitter
  * - `RespawnConfig` interface — all configuration options
  * - `RespawnState` type — union of all state machine states
- * - `DetectionStatus`, `ActiveTimerInfo`, `RespawnEvents` — status/event types
+ * - `DetectionStatus`, `ActiveTimerInfo` — status types
  *
  * Key methods: `start()`, `stop()`, `getStatus()`, `getConfig()`,
  * `getDetectionStatus()`, `getActiveTimers()`, `getAggregateMetrics()`,
@@ -46,8 +46,8 @@
 import { EventEmitter } from 'node:events';
 import { randomUUID } from 'node:crypto';
 import { Session } from './session.js';
-import { AiIdleChecker, type AiCheckResult, type AiCheckState } from './ai-idle-checker.js';
-import { AiPlanChecker, type AiPlanCheckResult } from './ai-plan-checker.js';
+import { AiIdleChecker, type AiCheckState } from './ai-idle-checker.js';
+import { AiPlanChecker } from './ai-plan-checker.js';
 import type { TeamWatcher } from './team-watcher.js';
 import { BufferAccumulator, ANSI_ESCAPE_PATTERN_SIMPLE, assertNever, CleanupManager } from './utils/index.js';
 import { MAX_RESPAWN_BUFFER_SIZE, TRIM_RESPAWN_BUFFER_TO as RESPAWN_BUFFER_TRIM_SIZE } from './config/buffer-limits.js';
@@ -99,13 +99,13 @@ const PLAN_MODE_SELECTOR_PATTERN = /[❯>]\s*\d+\./;
  * Each layer provides a confidence signal that Claude has finished working.
  */
 /** Active timer info for UI display */
-export interface ActiveTimerInfo {
+interface ActiveTimerInfo {
   name: string;
   remainingMs: number;
   totalMs: number;
 }
 
-export interface DetectionStatus {
+interface DetectionStatus {
   /** Layer 0: Stop hook received (highest priority - definitive signal) */
   stopHookReceived: boolean;
   /** Timestamp when Stop hook was received */
@@ -488,70 +488,13 @@ export interface RespawnConfig {
  * @event error - Fired on errors
  * @event log - Fired for debug logging
  */
-/** Timer info for countdown display */
-export interface TimerInfo {
-  name: string;
-  durationMs: number;
-  endsAt: number;
-  reason?: string;
-}
-
 /** Action log entry for detailed UI feedback */
-export interface ActionLogEntry {
+interface ActionLogEntry {
   type: string;
   detail: string;
   timestamp: number;
 }
 
-export interface RespawnEvents {
-  /** State machine transition */
-  stateChanged: (state: RespawnState, prevState: RespawnState) => void;
-  /** New respawn cycle started */
-  respawnCycleStarted: (cycleNumber: number) => void;
-  /** Respawn cycle finished */
-  respawnCycleCompleted: (cycleNumber: number) => void;
-  /** Command sent to session */
-  stepSent: (step: string, input: string) => void;
-  /** Step completed (ready indicator detected) */
-  stepCompleted: (step: string) => void;
-  /** Detection status update for UI display */
-  detectionUpdate: (status: DetectionStatus) => void;
-  /** Auto-accept sent for plan mode approval */
-  autoAcceptSent: () => void;
-  /** AI idle check started */
-  aiCheckStarted: () => void;
-  /** AI idle check completed with verdict */
-  aiCheckCompleted: (result: AiCheckResult) => void;
-  /** AI idle check failed */
-  aiCheckFailed: (error: string) => void;
-  /** AI idle check cooldown state changed */
-  aiCheckCooldown: (active: boolean, endsAt: number | null) => void;
-  /** AI plan check started */
-  planCheckStarted: () => void;
-  /** AI plan check completed with verdict */
-  planCheckCompleted: (result: AiPlanCheckResult) => void;
-  /** AI plan check failed */
-  planCheckFailed: (error: string) => void;
-  /** Timer started for countdown display */
-  timerStarted: (timer: TimerInfo) => void;
-  /** Timer cancelled */
-  timerCancelled: (timerName: string, reason?: string) => void;
-  /** Timer completed */
-  timerCompleted: (timerName: string) => void;
-  /** Verbose action log for detailed UI feedback */
-  actionLog: (action: ActionLogEntry) => void;
-  /** Error occurred */
-  error: (error: Error) => void;
-  /** Debug log message */
-  log: (message: string) => void;
-  /** Stuck state warning emitted */
-  stuckStateWarning: (state: RespawnState, durationMs: number) => void;
-  /** Stuck state recovery triggered */
-  stuckStateRecovery: (state: RespawnState, durationMs: number, attempt: number) => void;
-  /** Respawn blocked by external signal */
-  respawnBlocked: (data: { reason: string; details: string }) => void;
-}
-
 /**
  * Convert milliseconds to a non-negative whole number of seconds for countdown display.
  * Rounds up so that e.g. 1200 ms shows as 2 s (never under-reports remaining time).

src/session-auto-ops.ts

@@ -93,7 +93,7 @@ const DEFAULT_AUTO_COMPACT_THRESHOLD = 110_000;
 /**
  * Callbacks required by SessionAutoOps to interact with the parent Session.
  */
-export interface AutoOpsCallbacks {
+interface AutoOpsCallbacks {
   /** Send a command via the terminal multiplexer */
   writeCommand: (command: string) => Promise<boolean>;
   /** Check if Claude is currently working */
@@ -109,12 +109,6 @@ export interface AutoOpsCallbacks {
 /**
  * Events emitted by SessionAutoOps.
  */
-export interface SessionAutoOpsEvents {
-  /** Auto-compact was triggered and the /compact command was sent */
-  autoCompact: (data: { tokens: number; threshold: number; prompt?: string }) => void;
-  /** Auto-clear was triggered and the /clear command was sent */
-  autoClear: (data: { tokens: number; threshold: number }) => void;
-}
 
 /**
  * Manages auto-compact and auto-clear automation for a Session.

src/session-cli-builder.ts

@@ -15,7 +15,7 @@ import { getAugmentedPath } from './utils/index.js';
  * Build Claude CLI permission flags based on the configured mode.
  * Returns an array of args to pass to the CLI.
  */
-export function buildPermissionArgs(claudeMode: ClaudeMode, allowedTools?: string): string[] {
+function buildPermissionArgs(claudeMode: ClaudeMode, allowedTools?: string): string[] {
   switch (claudeMode) {
     case 'dangerously-skip-permissions':
       return ['--dangerously-skip-permissions'];

src/session-manager.ts

@@ -30,18 +30,6 @@ import { SessionState } from './types.js';
 /**
  * Events emitted by SessionManager
  */
-export interface SessionManagerEvents {
-  /** Fired when a new session starts successfully */
-  sessionStarted: (session: Session) => void;
-  /** Fired when a session stops (graceful or forced) */
-  sessionStopped: (sessionId: string) => void;
-  /** Fired when a session encounters an error */
-  sessionError: (sessionId: string, error: string) => void;
-  /** Fired when a session produces terminal output */
-  sessionOutput: (sessionId: string, output: string) => void;
-  /** Fired when a completion phrase is detected */
-  sessionCompletion: (sessionId: string, phrase: string) => void;
-}
 
 /**
  * Manages multiple Claude sessions with lifecycle coordination.
@@ -164,7 +152,7 @@ export class SessionManager extends EventEmitter {
       await session.start();
 
       this.sessions.set(session.id, session);
-      this.store.setSession(session.id, session.toState());
+      this.updateSessionState(session);
 
       this.emit('sessionStarted', session);
       return session;
@@ -259,7 +247,15 @@ export class SessionManager extends EventEmitter {
   }
 
   private updateSessionState(session: Session): void {
-    this.store.setSession(session.id, session.toState());
+    // envOverrides is intentionally NOT on SessionState (API safety). For disk
+    // persistence we augment the stored object with __envOverrides so reboot
+    // recovery can restore them without leaking through any API serializer.
+    // The key uses the reserved `__` prefix so it is visibly "internal" to any
+    // future reader of state.json.
+    const state = session.toState();
+    const envOverrides = session.getEnvOverridesForPersist();
+    const toStore = envOverrides ? { ...state, __envOverrides: envOverrides } : state;
+    this.store.setSession(session.id, toStore as SessionState);
   }
 
   /** Gets all sessions from persistent storage (including stopped). */

src/session.ts

@@ -29,7 +29,7 @@
  */
 
 import { EventEmitter } from 'node:events';
-import { execSync } from 'node:child_process';
+import { execSync, execFileSync } from 'node:child_process';
 import { v4 as uuidv4 } from 'uuid';
 import * as pty from 'node-pty';
 import {
@@ -121,6 +121,37 @@ const NEWLINE_SPLIT_PATTERN = /\r?\n/;
 
 // Note: Claude CLI PATH resolution moved to session-cli-builder.ts (buildClaudeEnv)
 
+/** PTY fallback geometry when tmux can't be queried (matches pre-#80 hardcoded values). */
+const DEFAULT_PTY_COLS = 120;
+const DEFAULT_PTY_ROWS = 40;
+const TMUX_DISPLAY_TIMEOUT_MS = 2000;
+
+/**
+ * Ask tmux for the current window geometry of `muxName` so a re-attaching PTY
+ * client can spawn at the same size and avoid the resize-flicker / scrollback
+ * loss documented in #80. Returns `{ cols: 120, rows: 40 }` on any failure
+ * (tmux dead, muxName unknown, malformed output) — caller never has to
+ * differentiate "tmux unreachable" from "size 120x40".
+ *
+ * Argv form (execFileSync, not execSync) keeps `muxName` out of any shell so
+ * a hostile session name can't inject options.
+ */
+export function queryTmuxWindowSize(muxName: string): { cols: number; rows: number } {
+  try {
+    const sizeStr = execFileSync('tmux', ['display', '-t', muxName, '-p', '#{window_width} #{window_height}'], {
+      timeout: TMUX_DISPLAY_TIMEOUT_MS,
+      encoding: 'utf8',
+    }).trim();
+    const [w, h] = sizeStr.split(' ').map(Number);
+    if (w > 0 && h > 0) {
+      return { cols: w, rows: h };
+    }
+  } catch {
+    /* fall back below */
+  }
+  return { cols: DEFAULT_PTY_COLS, rows: DEFAULT_PTY_ROWS };
+}
+
 /**
  * Represents a JSON message from Claude CLI's stream-json output format.
  * Messages are newline-delimited JSON objects parsed from PTY output.
@@ -154,63 +185,6 @@ export interface ClaudeMessage {
  * Event signatures emitted by the Session class.
  * Subscribe using `session.on('eventName', handler)`.
  */
-export interface SessionEvents {
-  /** Processed text output (ANSI stripped) */
-  output: (data: string) => void;
-  /** Parsed JSON message from Claude CLI */
-  message: (msg: ClaudeMessage) => void;
-  /** Error output from the session */
-  error: (data: string) => void;
-  /** Session process exited */
-  exit: (code: number | null) => void;
-  /** One-shot prompt completed with result and cost */
-  completion: (result: string, cost: number) => void;
-  /** Raw terminal data (includes ANSI codes) */
-  terminal: (data: string) => void;
-  /** Signal to clear terminal display (after mux attach) */
-  clearTerminal: () => void;
-  /** New background task started */
-  taskCreated: (task: BackgroundTask) => void;
-  /** Background task status changed */
-  taskUpdated: (task: BackgroundTask) => void;
-  /** Background task finished successfully */
-  taskCompleted: (task: BackgroundTask) => void;
-  /** Background task failed with error */
-  taskFailed: (task: BackgroundTask, error: string) => void;
-  /** Auto-clear triggered due to token threshold */
-  autoClear: (data: { tokens: number; threshold: number }) => void;
-  /** Auto-compact triggered due to token threshold */
-  autoCompact: (data: { tokens: number; threshold: number; prompt?: string }) => void;
-  /** Ralph loop state changed */
-  ralphLoopUpdate: (state: RalphTrackerState) => void;
-  /** Ralph todo list updated */
-  ralphTodoUpdate: (todos: RalphTodoItem[]) => void;
-  /** Ralph completion phrase detected */
-  ralphCompletionDetected: (phrase: string) => void;
-  /** RALPH_STATUS block detected */
-  ralphStatusBlockDetected: (block: import('./types.js').RalphStatusBlock) => void;
-  /** Circuit breaker state changed */
-  ralphCircuitBreakerUpdate: (status: import('./types.js').CircuitBreakerStatus) => void;
-  /** Dual-condition exit gate met */
-  ralphExitGateMet: (data: { completionIndicators: number; exitSignal: boolean }) => void;
-  /** Bash tool with file paths started */
-  bashToolStart: (tool: ActiveBashTool) => void;
-  /** Bash tool completed */
-  bashToolEnd: (tool: ActiveBashTool) => void;
-  /** Active Bash tools list updated */
-  bashToolsUpdate: (tools: ActiveBashTool[]) => void;
-  /** CLI info (version, model, account) updated */
-  cliInfoUpdated: (info: {
-    version: string | null;
-    model: string | null;
-    accountType: string | null;
-    latestVersion: string | null;
-  }) => void;
-}
-
-// SessionMode is imported from types.ts (single source of truth)
-// Re-export for backwards compatibility with any external consumers
-export type { SessionMode } from './types.js';
 
 /**
  * Core session class that wraps a PTY process running Claude CLI or a shell.
@@ -330,6 +304,10 @@ export class Session extends EventEmitter {
   private _openCodeConfig: OpenCodeConfig | undefined;
   private _resumeSessionId: string | undefined;
 
+  // Ephemeral env overrides (e.g., CLAUDE_CODE_EFFORT_LEVEL). Exported by tmux at spawn,
+  // preserved across respawns via persisted state. Not written to .claude/settings.local.json.
+  private _envOverrides: Record<string, string> | undefined;
+
   // Session color for visual differentiation
   private _color: import('./types.js').SessionColor = 'default';
 
@@ -389,6 +367,8 @@ export class Session extends EventEmitter {
       openCodeConfig?: OpenCodeConfig;
       /** Resume a previous Claude conversation (used after server reboot) */
       resumeSessionId?: string;
+      /** Extra env vars exported to the CLI at spawn time (no disk persistence) */
+      envOverrides?: Record<string, string>;
     }
   ) {
     super();
@@ -436,6 +416,11 @@ export class Session extends EventEmitter {
       this._openCodeConfig = config.openCodeConfig;
     }
 
+    // Apply env overrides (exported at spawn, not persisted to disk)
+    if (config.envOverrides && Object.keys(config.envOverrides).length > 0) {
+      this._envOverrides = { ...config.envOverrides };
+    }
+
     // Initialize task tracker and forward events (store handlers for cleanup)
     this._taskTracker = new TaskTracker();
     this._taskTrackerHandlers = {
@@ -530,6 +515,15 @@ export class Session extends EventEmitter {
     return this._claudeSessionId;
   }
 
+  // Adopt a Claude conversation ID observed from an external source (e.g. hook
+  // payload). In interactive PTY mode Claude CLI emits no JSON to stdout, so
+  // `_handleJsonMessage` never sees `session_id`; hooks are the only signal
+  // that conveys a post-/clear conversation switch.
+  adoptClaudeSessionId(newId: string): void {
+    if (!newId || newId === this._claudeSessionId) return;
+    this._claudeSessionId = newId;
+  }
+
   /** The tmux session name, if the session is running inside a mux */
   get muxName(): string | null {
     return this._muxSession?.muxName ?? null;
@@ -846,9 +840,29 @@ export class Session extends EventEmitter {
       cliLatestVersion: this._cliLatestVersion || undefined,
       openCodeConfig: this._openCodeConfig,
       resumeSessionId: this._resumeSessionId,
+      // envOverrides intentionally NOT on the public SessionState type — they must not
+      // leak into SSE / GET /api/sessions broadcasts (schema allows OPENCODE_*, which
+      // can carry secrets). For disk persistence, session-manager calls
+      // getEnvOverridesForPersist() and writes alongside state.
     };
   }
 
+  /**
+   * Returns a subset of env overrides safe for disk persistence (state.json).
+   * Only non-sensitive `CLAUDE_CODE_*` keys are included. `OPENCODE_*` keys are
+   * filtered out because the schema permits them and they can carry secrets
+   * (e.g., OPENCODE_API_KEY); secrets must not land in `~/.codeman/state.json`.
+   * Must NOT be included in any API-bound serializer — see toState() comment.
+   */
+  getEnvOverridesForPersist(): Record<string, string> | undefined {
+    if (!this._envOverrides) return undefined;
+    const safe: Record<string, string> = {};
+    for (const [key, value] of Object.entries(this._envOverrides)) {
+      if (key.startsWith('CLAUDE_CODE_')) safe[key] = value;
+    }
+    return Object.keys(safe).length > 0 ? safe : undefined;
+  }
+
   toDetailedState() {
     return {
       ...this.toLightDetailedState(),
@@ -963,11 +977,13 @@ export class Session extends EventEmitter {
     }
 
     // Attach to the mux session via PTY
+    // Query existing tmux window size so re-attach matches (avoids flicker from 120x40 default)
+    const { cols: ptyCols, rows: ptyRows } = queryTmuxWindowSize(this._muxSession!.muxName);
     try {
       this.ptyProcess = pty.spawn(mux.getAttachCommand(), mux.getAttachArgs(this._muxSession!.muxName), {
         name: 'xterm-256color',
-        cols: 120,
-        rows: 40,
+        cols: ptyCols,
+        rows: ptyRows,
         cwd: this.workingDir,
         env: buildMuxAttachEnv(),
       });
@@ -1014,6 +1030,7 @@ export class Session extends EventEmitter {
             allowedTools: this._allowedTools,
             openCodeConfig: this._openCodeConfig,
             resumeSessionId: this._resumeSessionId,
+            envOverrides: this._envOverrides,
           },
           createSessionOptions: {
             sessionId: this.id,
@@ -1026,6 +1043,7 @@ export class Session extends EventEmitter {
             allowedTools: this._allowedTools,
             openCodeConfig: this._openCodeConfig,
             resumeSessionId: this._resumeSessionId,
+            envOverrides: this._envOverrides,
           },
           spawnErrLabel: 'mux attachment',
         });
@@ -1101,7 +1119,8 @@ export class Session extends EventEmitter {
           cols: 120,
           rows: 40,
           cwd: this.workingDir,
-          env: buildClaudeEnv(this.id),
+          // Merge envOverrides after buildClaudeEnv so user settings shadow defaults.
+          env: { ...buildClaudeEnv(this.id), ...(this._envOverrides ?? {}) },
         });
       } catch (spawnErr) {
         console.error('[Session] Failed to spawn Claude PTY:', spawnErr);
@@ -1346,6 +1365,7 @@ export class Session extends EventEmitter {
             workingDir: this.workingDir,
             mode: 'shell',
             niceConfig: this._niceConfig,
+            envOverrides: this._envOverrides,
           },
           createSessionOptions: {
             sessionId: this.id,
@@ -1353,6 +1373,7 @@ export class Session extends EventEmitter {
             mode: 'shell',
             name: this._name,
             niceConfig: this._niceConfig,
+            envOverrides: this._envOverrides,
           },
           spawnErrLabel: 'shell mux attachment',
         });
@@ -1488,7 +1509,8 @@ export class Session extends EventEmitter {
             cols: 120,
             rows: 40,
             cwd: this.workingDir,
-            env: buildClaudeEnv(this.id),
+            // Merge envOverrides after buildClaudeEnv so user settings shadow defaults.
+            env: { ...buildClaudeEnv(this.id), ...(this._envOverrides ?? {}) },
           });
         } catch (spawnErr) {
           console.error('[Session] Failed to spawn Claude PTY for runPrompt:', spawnErr);
@@ -1634,11 +1656,14 @@ export class Session extends EventEmitter {
         this._messages = this._messages.slice(-Math.floor(MAX_MESSAGES * 0.8));
       }
 
-      // Extract Claude session ID from messages (can be in any message type)
-      // Support both sessionId (camelCase) and session_id (snake_case)
+      // Extract Claude session ID from messages (can be in any message type).
+      // Support both sessionId (camelCase) and session_id (snake_case).
+      // The constructor seeds _claudeSessionId with this.id as a placeholder;
+      // once Claude CLI emits its real session ID, adopt it so JSONL lookups
+      // (e.g. /api/sessions/:id/last-response) can find the transcript file.
       const msgSessionId =
         ((msg as unknown as Record<string, unknown>).sessionId as string | undefined) ?? msg.session_id;
-      if (msgSessionId && !this._claudeSessionId) {
+      if (msgSessionId && msgSessionId !== this._claudeSessionId) {
         this._claudeSessionId = msgSessionId;
       }
 

src/subagent-watcher.ts

@@ -134,17 +134,6 @@ export interface SubagentToolResult {
   isError: boolean; // Whether result is an error
 }
 
-export interface SubagentEvents {
-  'subagent:discovered': (info: SubagentInfo) => void;
-  'subagent:updated': (info: SubagentInfo) => void;
-  'subagent:tool_call': (data: SubagentToolCall) => void;
-  'subagent:tool_result': (data: SubagentToolResult) => void;
-  'subagent:progress': (data: SubagentProgress) => void;
-  'subagent:message': (data: SubagentMessage) => void;
-  'subagent:completed': (info: SubagentInfo) => void;
-  'subagent:error': (error: Error, agentId?: string) => void;
-}
-
 // ========== Constants ==========
 
 const CLAUDE_PROJECTS_DIR = join(homedir(), '.claude/projects');

src/task-queue.ts

@@ -17,14 +17,6 @@ import { getStore } from './state-store.js';
 /**
  * Events emitted by TaskQueue
  */
-export interface TaskQueueEvents {
-  /** Fired when a task is added to the queue */
-  taskAdded: (task: Task) => void;
-  /** Fired when a task is removed from the queue */
-  taskRemoved: (taskId: string) => void;
-  /** Fired when a task's state changes */
-  taskUpdated: (task: Task) => void;
-}
 
 /**
  * Priority queue for managing tasks with dependency support.

src/task-tracker.ts

@@ -153,16 +153,6 @@ export interface BackgroundTask {
  * @event taskCompleted - Task finished successfully
  * @event taskFailed - Task finished with error
  */
-export interface TaskTrackerEvents {
-  /** New task created */
-  taskCreated: (task: BackgroundTask) => void;
-  /** Task state updated */
-  taskUpdated: (task: BackgroundTask) => void;
-  /** Task completed successfully */
-  taskCompleted: (task: BackgroundTask) => void;
-  /** Task failed with error */
-  taskFailed: (task: BackgroundTask, error: string) => void;
-}
 
 /**
  * TaskTracker - Detects and tracks background tasks in Claude Code sessions.

src/tmux-manager.ts

@@ -98,6 +98,44 @@ const LEGACY_MUX_NAME_PATTERN = /^claudeman-[a-f0-9-]+$/;
 /** Regex to validate tmux pane targets (e.g., "%0", "%1", "0", "1") */
 const SAFE_PANE_TARGET_PATTERN = /^(%\d+|\d+)$/;
 
+/**
+ * Separator used in `tmux list-panes -F` output between session name and pid.
+ *
+ * Must NOT be a backslash-escape (e.g. `\t`, `\n`): under non-tty execution
+ * contexts (launchd on macOS, systemd without TTYPath) tmux can emit such
+ * escapes as the literal two characters `\` + letter rather than the control
+ * byte, breaking the parser and causing every tracked session to be classified
+ * as dead — which wipes state.json on restart. '|' is passed through verbatim
+ * in every environment and is rejected by tmux's own session-name validation,
+ * so it cannot appear inside `#{session_name}` and cause a false split.
+ */
+const PANE_LIST_SEP = '|';
+
+/** Format string for `tmux list-panes -F`. Keep in sync with {@link parsePaneList}. */
+const PANE_LIST_FORMAT = `#{session_name}${PANE_LIST_SEP}#{pane_pid}`;
+
+/**
+ * Parse the output of `tmux list-panes -a -F '#{session_name}|#{pane_pid}'`
+ * into a Map of session-name → pane pid. Exported for unit testing.
+ *
+ * - Skips empty lines and lines without the separator.
+ * - Skips entries with a non-numeric pid or empty name.
+ */
+export function parsePaneList(output: string): Map<string, number> {
+  const result = new Map<string, number>();
+  for (const line of output.split('\n')) {
+    if (!line) continue;
+    const sep = line.indexOf(PANE_LIST_SEP);
+    if (sep === -1) continue;
+    const name = line.slice(0, sep);
+    const pid = parseInt(line.slice(sep + 1), 10);
+    if (name && !Number.isNaN(pid)) {
+      result.set(name, pid);
+    }
+  }
+  return result;
+}
+
 /** Characters unsafe in paths — shell metacharacters, quotes, and control chars */
 const UNSAFE_PATH_CHARS = /[;&|$`(){}<>'"\n\r]/;
 
@@ -361,6 +399,10 @@ export class TmuxManager extends EventEmitter implements TerminalMultiplexer {
   /**
    * Build the array of environment export commands shared by createSession() and respawnPane().
    * Includes locale, mux markers, session identity, and API URL.
+   *
+   * User-supplied envOverrides are NOT inlined here — they go through applyEnvOverrides()
+   * via `tmux setenv` so secret values (e.g., OPENCODE_API_KEY) never appear in the bash
+   * command line (visible in `ps`). This also sidesteps shell-metachar injection via keys.
    */
   private buildEnvExports(sessionId: string, muxName: string, mode: SessionMode): string[] {
     const exports = [
@@ -377,6 +419,35 @@ export class TmuxManager extends EventEmitter implements TerminalMultiplexer {
     return exports;
   }
 
+  /**
+   * Apply user-supplied env overrides to a tmux session via `tmux setenv`.
+   * Values stay off the bash command line (not visible in `ps`), and are inherited
+   * by new panes — including `respawn-pane`. Persists at tmux-session level, so
+   * Codeman server restarts don't lose the setting as long as the tmux session lives.
+   *
+   * Key validation is strict (`/^[A-Z_][A-Z0-9_]*$/`) as defense-in-depth against
+   * shell-metachar injection even if upstream schema check is bypassed.
+   */
+  private applyEnvOverrides(muxName: string, envOverrides?: Record<string, string>): void {
+    if (!envOverrides) return;
+    const VALID_KEY = /^[A-Z_][A-Z0-9_]*$/;
+    for (const [key, value] of Object.entries(envOverrides)) {
+      if (!value) continue; // Skip empty — nothing to set
+      if (!VALID_KEY.test(key)) {
+        console.warn(`[TmuxManager] Skipping invalid env override key: ${JSON.stringify(key)}`);
+        continue;
+      }
+      try {
+        execSync(`tmux setenv -t ${shellescape(muxName)} ${key} ${shellescape(value)}`, {
+          timeout: EXEC_TIMEOUT_MS,
+          stdio: ['pipe', 'pipe', 'pipe'],
+        });
+      } catch (err) {
+        console.warn(`[TmuxManager] Failed to set env override ${key}:`, err);
+      }
+    }
+  }
+
   /**
    * Resolve the CLI binary directory and return the PATH export prefix string.
    * Returns '' if no override is needed (shell mode) or the binary dir is not found.
@@ -420,6 +491,7 @@ export class TmuxManager extends EventEmitter implements TerminalMultiplexer {
       allowedTools,
       openCodeConfig,
       resumeSessionId,
+      envOverrides,
     } = options;
     const muxName = `codeman-${sessionId.slice(0, 8)}`;
 
@@ -484,7 +556,7 @@ export class TmuxManager extends EventEmitter implements TerminalMultiplexer {
       // (Production uses systemd which has a clean env, but dev/test may be nested.)
       const cleanEnv = { ...process.env };
       delete cleanEnv.TMUX;
-      execSync(`tmux new-session -ds "${muxName}" -c "${workingDir}" -x 120 -y 40`, {
+      execSync(`tmux new-session -ds "${muxName}" -c "${workingDir}"`, {
         cwd: workingDir,
         timeout: EXEC_TIMEOUT_MS,
         stdio: 'ignore',
@@ -507,6 +579,10 @@ export class TmuxManager extends EventEmitter implements TerminalMultiplexer {
         this._configureOpenCode(muxName, openCodeConfig);
       }
 
+      // Apply user-supplied env overrides (e.g., CLAUDE_CODE_EFFORT_LEVEL) via tmux setenv
+      // so secret values stay off the bash command line. Must run before respawn-pane.
+      this.applyEnvOverrides(muxName, envOverrides);
+
       // Replace the shell with the actual command (no echo in terminal)
       execSync(`tmux respawn-pane -k -t "${muxName}" bash -c ${JSON.stringify(fullCmd)}`, {
         timeout: EXEC_TIMEOUT_MS,
@@ -533,6 +609,13 @@ export class TmuxManager extends EventEmitter implements TerminalMultiplexer {
           .catch(() => {
             /* Already set globally as fallback */
           }),
+        // Raise tmux scrollback from its 2000-line default so re-attach preserves
+        // more context. Matches the xterm-side default in constants.js.
+        execAsync(`tmux set-option -t "${muxName}" history-limit 50000`, { timeout: EXEC_TIMEOUT_MS })
+          .then(() => {})
+          .catch(() => {
+            /* Non-critical — falls back to tmux default */
+          }),
       ];
 
       // Enable 24-bit true color passthrough — server-wide, set once per lifetime
@@ -647,6 +730,7 @@ export class TmuxManager extends EventEmitter implements TerminalMultiplexer {
       allowedTools,
       openCodeConfig,
       resumeSessionId,
+      envOverrides,
     } = options;
     const session = this.sessions.get(sessionId);
     if (!session) return null;
@@ -678,6 +762,9 @@ export class TmuxManager extends EventEmitter implements TerminalMultiplexer {
         this._configureOpenCode(muxName, openCodeConfig);
       }
 
+      // Re-apply user env overrides before respawn so the new shell inherits them.
+      this.applyEnvOverrides(muxName, envOverrides);
+
       await execAsync(`tmux respawn-pane -k -t "${muxName}" bash -c ${JSON.stringify(fullCmd)}`, {
         timeout: EXEC_TIMEOUT_MS,
       });
@@ -902,23 +989,13 @@ export class TmuxManager extends EventEmitter implements TerminalMultiplexer {
     const discovered: string[] = [];
 
     // Batch: single tmux call to get all session names + pane PIDs (replaces N per-session subprocess calls)
-    const activeSessions = new Map<string, number>();
+    let activeSessions = new Map<string, number>();
     try {
-      const output = execSync("tmux list-panes -a -F '#{session_name}\t#{pane_pid}' 2>/dev/null || true", {
+      const output = execSync(`tmux list-panes -a -F '${PANE_LIST_FORMAT}' 2>/dev/null || true`, {
         encoding: 'utf-8',
         timeout: EXEC_TIMEOUT_MS,
       }).trim();
-
-      for (const line of output.split('\n')) {
-        if (!line) continue;
-        const sep = line.indexOf('\t');
-        if (sep === -1) continue;
-        const name = line.slice(0, sep);
-        const pid = parseInt(line.slice(sep + 1), 10);
-        if (name && !Number.isNaN(pid)) {
-          activeSessions.set(name, pid);
-        }
-      }
+      activeSessions = parsePaneList(output);
     } catch (err) {
       console.error('[TmuxManager] Failed to list tmux panes:', err);
     }

src/transcript-watcher.ts

@@ -20,7 +20,7 @@ import { createInterface } from 'node:readline';
 /**
  * Parsed transcript entry from the JSONL file
  */
-export interface TranscriptEntry {
+interface TranscriptEntry {
   type: 'user' | 'assistant' | 'system' | 'result';
   timestamp: string;
   message?: {
@@ -35,7 +35,7 @@ export interface TranscriptEntry {
   };
 }
 
-export interface TranscriptContentBlock {
+interface TranscriptContentBlock {
   type: 'text' | 'tool_use' | 'tool_result';
   text?: string;
   name?: string;
@@ -68,15 +68,6 @@ export interface TranscriptState {
   lastUpdateAt: string | null;
 }
 
-export interface TranscriptWatcherEvents {
-  'transcript:update': (state: TranscriptState) => void;
-  'transcript:complete': (state: TranscriptState) => void;
-  'transcript:tool_start': (toolName: string) => void;
-  'transcript:tool_end': (toolName: string, isError: boolean) => void;
-  'transcript:error': (error: Error) => void;
-  'transcript:plan_mode': () => void;
-}
-
 // ========== Constants ==========
 
 /** How often to check for new content when file watching fails */
@@ -435,7 +426,3 @@ export class TranscriptWatcher extends EventEmitter {
     }
   }
 }
-
-// ========== Singleton Export ==========
-
-export const transcriptWatcher = new TranscriptWatcher();

src/tunnel-manager.ts

@@ -33,7 +33,7 @@ import { getErrorMessage } from './types.js';
 
 // ========== Types ==========
 
-export interface TunnelStatus {
+interface TunnelStatus {
   running: boolean;
   url: string | null;
 }

src/types/orchestrator.ts

@@ -268,18 +268,3 @@ export function createInitialOrchestratorStats(): OrchestratorStats {
     replanCount: 0,
   };
 }
-
-/** Factory function for initial orchestrator persist state */
-export function createInitialOrchestratorPersistState(
-  config: OrchestratorConfig = DEFAULT_ORCHESTRATOR_CONFIG
-): OrchestratorPersistState {
-  return {
-    state: 'idle',
-    plan: null,
-    currentPhaseIndex: 0,
-    startedAt: null,
-    completedAt: null,
-    config,
-    stats: createInitialOrchestratorStats(),
-  };
-}

src/types/respawn.ts

@@ -230,22 +230,6 @@ export interface TimingHistory {
 /**
  * Named respawn configuration preset for quick setup
  */
-export interface RespawnPreset {
-  /** Unique preset identifier */
-  id: string;
-  /** User-friendly preset name */
-  name: string;
-  /** Description of when to use this preset */
-  description?: string;
-  /** The respawn configuration (without enabled flag) */
-  config: Omit<RespawnConfig, 'enabled'>;
-  /** Duration in minutes (optional default) */
-  durationMinutes?: number;
-  /** Whether this is a built-in preset */
-  builtIn?: boolean;
-  /** Timestamp when created */
-  createdAt: number;
-}
 
 /**
  * Persisted respawn configuration for mux sessions.

src/types/session.ts

@@ -150,11 +150,3 @@ export interface SessionState {
 /**
  * Output captured from a session
  */
-export interface SessionOutput {
-  /** Standard output content */
-  stdout: string;
-  /** Standard error content */
-  stderr: string;
-  /** Exit code of the process, null if still running */
-  exitCode: number | null;
-}

src/utils/cleanup-manager.ts

@@ -14,7 +14,7 @@ import type { Disposable, CleanupRegistration, CleanupResourceType } from '../ty
 /**
  * Options for setTimeout/setInterval with automatic cleanup.
  */
-export interface TimerOptions {
+interface TimerOptions {
   /** Human-readable description for debugging */
   description?: string;
 }

src/utils/index.ts

@@ -7,17 +7,14 @@
  */
 
 export { BufferAccumulator } from './buffer-accumulator.js';
-export { LRUMap, type LRUMapOptions } from './lru-map.js';
-export { CleanupManager, type TimerOptions } from './cleanup-manager.js';
+export { CleanupManager } from './cleanup-manager.js';
 export { Debouncer, KeyedDebouncer } from './debouncer.js';
-export { StaleExpirationMap, type StaleExpirationMapOptions } from './stale-expiration-map.js';
+export { StaleExpirationMap } from './stale-expiration-map.js';
 export {
   ANSI_ESCAPE_PATTERN_FULL,
   ANSI_ESCAPE_PATTERN_SIMPLE,
   TOKEN_PATTERN,
   SPINNER_PATTERN,
-  createAnsiPatternFull,
-  createAnsiPatternSimple,
   stripAnsi,
   SAFE_PATH_PATTERN,
   execPattern,
@@ -27,4 +24,4 @@ export { stringSimilarity, fuzzyPhraseMatch, todoContentHash } from './string-si
 export { assertNever } from './type-safety.js';
 export { wrapWithNice } from './nice-wrapper.js';
 export { findClaudeDir, getAugmentedPath } from './claude-cli-resolver.js';
-export { resolveOpenCodeDir, isOpenCodeAvailable } from './opencode-cli-resolver.js';
+export { resolveOpenCodeDir } from './opencode-cli-resolver.js';

src/utils/lru-map.ts

@@ -10,7 +10,7 @@
 /**
  * Configuration options for LRUMap.
  */
-export interface LRUMapOptions<K, V> {
+interface LRUMapOptions<K, V> {
   /** Maximum number of entries before eviction */
   maxSize: number;
   /** Optional callback when an entry is evicted */

src/utils/regex-patterns.ts

@@ -40,24 +40,6 @@ export const ANSI_ESCAPE_PATTERN_SIMPLE = /\x1b\[[0-9;]*[A-Za-z]/g;
  */
 export const TOKEN_PATTERN = /(\d+(?:\.\d+)?)\s*([kKmM])?\s*tokens/;
 
-/**
- * Creates a fresh copy of ANSI_ESCAPE_PATTERN_FULL.
- * Use when you need a pattern without shared lastIndex state.
- */
-export function createAnsiPatternFull(): RegExp {
-  // eslint-disable-next-line no-control-regex
-  return /\x1b(?:\[[0-9;?]*[A-Za-z]|\][^\x07\x1b]*(?:\x07|\x1b\\)|[=>])/g;
-}
-
-/**
- * Creates a fresh copy of ANSI_ESCAPE_PATTERN_SIMPLE.
- * Use when you need a pattern without shared lastIndex state.
- */
-export function createAnsiPatternSimple(): RegExp {
-  // eslint-disable-next-line no-control-regex
-  return /\x1b\[[0-9;]*[A-Za-z]/g;
-}
-
 /**
  * Strips ANSI escape codes from text using the comprehensive pattern.
  * @param text - Text containing ANSI escape codes

src/utils/stale-expiration-map.ts

@@ -22,7 +22,7 @@ interface TimedEntry<V> {
 /**
  * Configuration options for StaleExpirationMap.
  */
-export interface StaleExpirationMapOptions<K, V> {
+interface StaleExpirationMapOptions<K, V> {
   /** Time-to-live in milliseconds before entries expire */
   ttlMs: number;
   /** How often to run cleanup (default: ttlMs / 2) */

src/web/middleware/auth.ts

@@ -23,7 +23,7 @@ import {
 export const AUTH_COOKIE_NAME = 'codeman_session';
 
 /** State returned from registerAuthMiddleware for cleanup in server stop() */
-export interface AuthState {
+interface AuthState {
   authSessions: StaleExpirationMap<string, AuthSessionRecord> | null;
   authFailures: StaleExpirationMap<string, number> | null;
   qrAuthFailures: StaleExpirationMap<string, number> | null;

src/web/ports/index.ts

@@ -11,5 +11,5 @@ export type { EventPort } from './event-port.js';
 export type { RespawnPort } from './respawn-port.js';
 export type { ConfigPort } from './config-port.js';
 export type { InfraPort, ScheduledRun } from './infra-port.js';
-export type { AuthPort, AuthSessionRecord } from './auth-port.js';
+export type { AuthPort } from './auth-port.js';
 export type { OrchestratorPort } from './orchestrator-port.js';

src/web/public/app.js

@@ -249,6 +249,9 @@ const _SSE_HANDLER_MAP = [
   [SSE_EVENTS.ORCHESTRATOR_TASK_FAILED, '_onOrchestratorTaskFailed'],
   [SSE_EVENTS.ORCHESTRATOR_COMPLETED, '_onOrchestratorCompleted'],
   [SSE_EVENTS.ORCHESTRATOR_ERROR, '_onOrchestratorError'],
+
+  // Clipboard
+  [SSE_EVENTS.CLIPBOARD_WRITE, '_onClipboardWrite'],
 ];
 
 
@@ -283,6 +286,12 @@ class CodemanApp {
     this.totalTokens = 0;
     this.globalStats = null; // Global token/cost stats across all sessions
     this.eventSource = null;
+    // Stable per-page client ID — lets the server target this connection
+    // for live filter updates (POST /api/events/subscribe) without forcing
+    // an SSE reconnect on session switches.
+    this._clientId = (typeof crypto !== 'undefined' && crypto.randomUUID)
+      ? crypto.randomUUID()
+      : 'c-' + Math.random().toString(36).slice(2) + Date.now().toString(36);
     this.terminal = null;
     this.fitAddon = null;
     this.activeSessionId = null;
@@ -614,14 +623,57 @@ class CodemanApp {
       this._webglAddon = new WebglAddon.WebglAddon();
       this._webglAddon.onContextLoss(() => {
         console.error('[CRASH-DIAG] WebGL context LOST — falling back to canvas renderer');
-        this._webglAddon.dispose();
+        _crashDiag.log('WEBGL_LOST');
+        this._disableWebGLSticky('context-lost');
+        this._webglAddon?.dispose();
         this._webglAddon = null;
       });
       this.terminal.loadAddon(this._webglAddon);
       console.log('[CRASH-DIAG] WebGL renderer enabled');
+      this._installWebGLLongTaskGuard();
     } catch (_e) { /* WebGL2 unavailable — canvas renderer used */ }
   }
 
+  /**
+   * Watch for sustained main-thread stalls that indicate WebGL/GPU trouble.
+   * After 3 long tasks (>=200ms each) within 30s, dispose the WebGL addon and
+   * persist a sticky disable so subsequent reloads also use the DOM renderer.
+   * 5s grace period skips initial-load stalls. Force-re-enable: ?webgl=force.
+   */
+  _installWebGLLongTaskGuard() {
+    if (typeof PerformanceObserver === 'undefined' || this._webglLongTaskObserver) return;
+    const installedAt = performance.now();
+    const recent = [];
+    try {
+      this._webglLongTaskObserver = new PerformanceObserver((list) => {
+        if (!this._webglAddon) return;
+        const now = performance.now();
+        if (now - installedAt < 5000) return;
+        for (const entry of list.getEntries()) {
+          if (entry.duration >= 200) recent.push(entry.startTime);
+        }
+        while (recent.length && now - recent[0] > 30000) recent.shift();
+        if (recent.length >= 3) {
+          console.warn(`[CRASH-DIAG] WebGL long-task threshold (${recent.length} stalls/30s) — falling back to canvas renderer`);
+          _crashDiag.log(`WEBGL_FALLBACK: ${recent.length}`);
+          this._disableWebGLSticky('long-tasks');
+          this._webglAddon?.dispose();
+          this._webglAddon = null;
+          try { this._webglLongTaskObserver.disconnect(); } catch {}
+          this._webglLongTaskObserver = null;
+          try { this.terminal.refresh(0, this.terminal.rows - 1); } catch {}
+        }
+      });
+      this._webglLongTaskObserver.observe({ type: 'longtask', buffered: false });
+    } catch { /* longtask not supported */ }
+  }
+
+  _disableWebGLSticky(reason) {
+    try {
+      localStorage.setItem('codeman-webgl-disabled', JSON.stringify({ reason, at: Date.now() }));
+    } catch {}
+  }
+
   // ═══════════════════════════════════════════════════════════════
   // Event Listeners (Keyboard Shortcuts, Resize, Beforeunload)
   // ═══════════════════════════════════════════════════════════════
@@ -639,6 +691,8 @@ class CodemanApp {
       { key: '=', altKey: '+', ctrl: true, action: () => this.increaseFontSize() },
       { key: '-', ctrl: true, action: () => this.decreaseFontSize() },
       { key: 'V', ctrl: true, shift: true, action: () => VoiceInput.toggle() },
+      { key: '{', ctrl: true, shift: true, action: () => this.moveActiveTabLeft() },
+      { key: '}', ctrl: true, shift: true, action: () => this.moveActiveTabRight() },
     ];
 
     // Use capture to handle before terminal
@@ -691,6 +745,28 @@ class CodemanApp {
   // SSE Connection
   // ═══════════════════════════════════════════════════════════════
 
+  /**
+   * POST a live subscription update so the server filters terminal events
+   * to the given session(s) for this client. Fire-and-forget — failures
+   * are non-fatal because we'll still get every event we don't want
+   * (just at higher cost), and the next reconnect carries the filter via
+   * the SSE query string.
+   */
+  _updateSseSubscription(sessionId) {
+    try {
+      const body = JSON.stringify({
+        clientId: this._clientId,
+        sessions: sessionId ? [sessionId] : null,
+      });
+      fetch('/api/events/subscribe', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body,
+        keepalive: true,
+      }).catch(() => { /* non-fatal */ });
+    } catch { /* non-fatal */ }
+  }
+
   connectSSE() {
     // Check if browser is offline
     if (!navigator.onLine) {
@@ -720,7 +796,13 @@ class CodemanApp {
       this.setConnectionStatus('reconnecting');
     }
 
-    this.eventSource = new EventSource('/api/events');
+    // Build URL with stable client ID and (if known) the active-session
+    // filter so the server only streams session:terminal events for the
+    // session we're rendering. Lifecycle/metadata events are sent globally
+    // regardless of filter (server side).
+    const _sseParams = new URLSearchParams({ clientId: this._clientId });
+    if (this.activeSessionId) _sseParams.set('sessions', this.activeSessionId);
+    this.eventSource = new EventSource(`/api/events?${_sseParams.toString()}`);
 
     // Store all event listeners for cleanup on reconnect
     const listeners = [];
@@ -903,11 +985,9 @@ class CodemanApp {
     const tpl = document.createElement('template');
     tpl.innerHTML = html;
     const frag = tpl.content;
-    // Remove dangerous elements
     for (const el of frag.querySelectorAll('script, iframe, object, embed, form, base, meta, link, style')) {
       el.remove();
     }
-    // Strip dangerous attributes from all elements
     for (const el of frag.querySelectorAll('*')) {
       for (const attr of [...el.attributes]) {
         const name = attr.name.toLowerCase();
@@ -921,17 +1001,143 @@ class CodemanApp {
         }
       }
     }
-    // Serialize back via a container
     const div = document.createElement('div');
     div.appendChild(frag);
     return div.innerHTML;
   }
 
+  /**
+   * Strip ANSI escape sequences and Claude CLI chrome (status bar, hints,
+   * spinner, progress bar) from a terminal buffer so the response viewer can
+   * show just the conversational text when the JSONL transcript is missing.
+   */
+  _cleanTerminalBuffer(buf) {
+    const stripped = buf
+      // CSI sequences — params (0x30-0x3F includes digits, ?, ;, <, =, >),
+      // intermediates (0x20-0x2F), final byte (0x40-0x7E). Catches \x1b[>c,
+      // \x1b[>q, \x1b[?25l etc. that the previous regex missed.
+      .replace(/\x1b\[[\x30-\x3F]*[\x20-\x2F]*[\x40-\x7E]/g, '')
+      // OSC sequences (window titles etc.) terminated by BEL or ST
+      .replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, '')
+      // DCS / APC / PM / SOS sequences
+      .replace(/\x1b[PX^_][^\x1b]*\x1b\\/g, '')
+      // SS2/SS3 + charset selects + single-char escapes
+      .replace(/\x1b[NO()][A-Z0-9]?/g, '')
+      .replace(/\x1b[>=<78cDEHM]/g, '')
+      // Stray control chars (except \t \n)
+      .replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g, '')
+      .replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+
+    // Drop Claude CLI chrome lines that aren't part of the response.
+    const CHROME_PATTERNS = [
+      /^\s*❯\s*/,                                  // shell prompt
+      /^\s*[⏵⏺⏸⏹]+\s*/,                           // status glyphs
+      /^\s*✻\s*(Crunching|Crunched|Thinking)/i,   // spinner lines
+      /bypass permissions/i,
+      /\bshift\+tab to cycle\b/i,
+      /^\s*focus\s*$/,
+      /^\s*new task\?/i,
+      /\/clear to save/i,
+      /^\s*─{5,}\s*$/,                            // horizontal dividers
+      /\[(Opus|Sonnet|Haiku|GPT|Claude)[\s\S]*(tokens?|\$|¥|%|↑|↓)/i, // status bar
+      /^\s*\[\d+[km]?\/\d+[km]?\]/i,              // token counter
+      /[█░▓▒]{3,}/,                              // progress bar
+      /^\s*\(.*\s*(tokens?|context).*\)\s*$/i,
+    ];
+
+    const lines = stripped.split('\n');
+    const kept = lines.filter((line) => {
+      const trimmed = line.trim();
+      if (!trimmed) return true; // keep blanks so paragraphs survive
+      return !CHROME_PATTERNS.some((re) => re.test(line));
+    });
+
+    return kept
+      .join('\n')
+      .replace(/[ \t]+$/gm, '')
+      .replace(/\n{4,}/g, '\n\n\n')
+      .trim();
+  }
+
+  /**
+   * Wrap ASCII/box diagrams in fenced code blocks so marked.js preserves whitespace.
+   * Claude often emits box-drawing diagrams without triple-backticks; without this
+   * step, HTML collapses the whitespace and the diagram becomes unreadable prose.
+   */
+  _preprocessAsciiArt(text) {
+    // Only trigger on characters that rarely appear in prose:
+    //   U+2500-U+257F  Box Drawing      (─│┌┐└┘├┤┬┴┼╔╗╚╝═║)
+    //   U+2580-U+259F  Block Elements   (▀▄█▌▐░▒▓, progress bars)
+    // Deliberately excluded:
+    //   U+2190-U+21FF  Arrows           (→←↑↓⇒ — common rhetorical prose)
+    //   U+25A0-U+25FF  Geometric Shapes (●○■□◆◇ — common bullets)
+    // Triggering on those would wrap numbered lists / prose that merely uses
+    // arrows in code blocks and break their markdown rendering.
+    const BOX_PATTERN = /[─-╿▀-▟]/;
+
+    // Preserve existing fenced code blocks as-is (hide them behind placeholders)
+    const fenceRe = /```[\s\S]*?```/g;
+    const placeholders = [];
+    const masked = text.replace(fenceRe, (m) => {
+      placeholders.push(m);
+      return `FENCE${placeholders.length - 1}`;
+    });
+
+    // Split on blank-line paragraph boundaries; wrap any paragraph containing
+    // box-drawing/arrow chars in its own fenced block.
+    const processed = masked
+      .split(/(\n{2,})/)
+      .map((chunk) => {
+        if (/^\n{2,}$/.test(chunk)) return chunk; // keep separators
+        if (!chunk.trim()) return chunk;
+        if (chunk.includes('FENCE')) return chunk;
+        if (BOX_PATTERN.test(chunk)) return '\n```\n' + chunk + '\n```\n';
+        return chunk;
+      })
+      .join('');
+
+    return processed.replace(/FENCE(\d+)/g, (_m, i) => placeholders[Number(i)]);
+  }
+
   /** Render markdown to sanitized HTML, falling back to plain text if marked.js unavailable */
   _renderMarkdown(text) {
     if (typeof marked !== 'undefined' && marked.parse) {
       try {
-        return this._sanitizeHtml(marked.parse(text, { breaks: true, gfm: true }));
+        const prepared = this._preprocessAsciiArt(text);
+        let html = this._sanitizeHtml(marked.parse(prepared, { breaks: true, gfm: true }));
+        // Wrap tables in a horizontal-scroll container so they overflow gracefully
+        // on mobile without collapsing into block-level cells.
+        html = html.replace(/<table>/g, '<div class="rv-table-wrap"><table>')
+                   .replace(/<\/table>/g, '</table></div>');
+        // Tag code blocks containing box-drawing glyphs as diagrams (same
+        // narrow trigger as _preprocessAsciiArt — arrows/geometric shapes
+        // don't count because they appear frequently in prose).
+        // Default is wrap (readable on mobile); a toggle button lets the user
+        // switch to horizontal-scroll mode when the original structure matters.
+        // The button must live OUTSIDE the <pre> scroll container so it stays
+        // pinned to the visual right edge when the user scrolls horizontally.
+        const DIAGRAM_CHAR = /[─-╿▀-▟]/;
+        const tmpl = document.createElement('template');
+        tmpl.innerHTML = html;
+        tmpl.content.querySelectorAll('pre > code').forEach((code) => {
+          if (!DIAGRAM_CHAR.test(code.textContent || '')) return;
+          const pre = code.parentElement;
+          pre.classList.add('rv-diagram');
+
+          const wrap = document.createElement('div');
+          wrap.className = 'rv-diagram-wrap';
+
+          const btn = document.createElement('button');
+          btn.className = 'rv-wrap-toggle';
+          btn.type = 'button';
+          btn.setAttribute('aria-label', 'Toggle line wrapping');
+          btn.setAttribute('title', 'Toggle line wrapping');
+
+          pre.parentNode.insertBefore(wrap, pre);
+          wrap.appendChild(btn);
+          wrap.appendChild(pre);
+        });
+        return tmpl.innerHTML;
       } catch { /* fall through */ }
     }
     // Fallback: escape HTML and preserve whitespace
@@ -939,6 +1145,27 @@ class CodemanApp {
     return `<pre style="white-space:pre-wrap;word-break:break-word">${escaped}</pre>`;
   }
 
+  /**
+   * Bind click handlers inside the response viewer body. Uses event delegation
+   * so a single listener serves every diagram-toggle button, including those
+   * added when the conversation is reloaded. Idempotent via a dataset flag.
+   */
+  _bindResponseViewerInteractions(body) {
+    if (!body || body.dataset.rvBound === '1') return;
+    body.dataset.rvBound = '1';
+    body.addEventListener('click', (ev) => {
+      const btn = ev.target.closest('.rv-wrap-toggle');
+      if (!btn) return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      const wrap = btn.closest('.rv-diagram-wrap');
+      const pre = wrap?.querySelector('pre.rv-diagram');
+      if (!pre || !wrap) return;
+      const nowrap = pre.classList.toggle('rv-nowrap');
+      wrap.classList.toggle('rv-wrap-nowrap', nowrap);
+    });
+  }
+
   async toggleResponseViewer() {
     const viewer = document.getElementById('responseViewer');
     const backdrop = document.getElementById('responseViewerBackdrop');
@@ -958,27 +1185,18 @@ class CodemanApp {
       const data = await res.json();
       let lastResponse = data.text || '';
 
-      // Source 2: Terminal buffer fallback (strip ANSI codes)
+      // Source 2: Terminal buffer fallback — strip ANSI, drop Claude CLI chrome
       if (!lastResponse) {
         const termRes = await fetch(`/api/sessions/${this.activeSessionId}/terminal`);
         const termData = await termRes.json();
         if (termData.terminalBuffer) {
-          lastResponse = termData.terminalBuffer
-            .replace(/\x1b\[\?[0-9;]*[a-zA-Z]/g, '')
-            .replace(/\x1b\[[0-9;]*[a-zA-Z]/g, '')
-            .replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, '')
-            .replace(/\x1b[()][A-Z0-9]/g, '')
-            .replace(/\x1b[>=<]/g, '')
-            .replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g, '')
-            .replace(/\r\n/g, '\n').replace(/\r/g, '\n')
-            .replace(/[ \t]+$/gm, '')
-            .replace(/\n{4,}/g, '\n\n\n')
-            .trim();
+          lastResponse = this._cleanTerminalBuffer(termData.terminalBuffer);
         }
       }
 
       const body = document.getElementById('responseViewerBody');
       body.innerHTML = this._renderMarkdown(lastResponse);
+      this._bindResponseViewerInteractions(body);
 
       // Reset state for fresh open
       const title = document.getElementById('responseViewerTitle');
@@ -1015,11 +1233,12 @@ class CodemanApp {
       body.innerHTML = '';
       for (const msg of messages) {
         const div = document.createElement('div');
-        div.className = 'rv-message';
+        const isUser = msg.role === 'user';
+        div.className = 'rv-message ' + (isUser ? 'rv-msg-user' : 'rv-msg-assistant');
 
         const role = document.createElement('div');
-        role.className = 'rv-role ' + (msg.role === 'user' ? 'rv-role-user' : 'rv-role-assistant');
-        role.textContent = msg.role === 'user' ? 'You' : 'Claude';
+        role.className = 'rv-role ' + (isUser ? 'rv-role-user' : 'rv-role-assistant');
+        role.textContent = isUser ? 'You' : 'Claude';
         div.appendChild(role);
 
         const text = document.createElement('div');
@@ -1029,6 +1248,7 @@ class CodemanApp {
 
         body.appendChild(div);
       }
+      this._bindResponseViewerInteractions(body);
 
       if (title) title.textContent = `Conversation (${messages.length} messages)`;
       if (moreBtn) moreBtn.style.display = 'none';
@@ -1701,6 +1921,8 @@ class CodemanApp {
   // ═══════════════════════════════════════════════════════════════
 
   renderSessionTabs() {
+    // Don't re-render while user is typing in the inline rename input
+    if (this._activeRename) return;
     this._debouncedCall('sessionTabs', this._renderSessionTabsImmediate);
   }
 
@@ -1757,6 +1979,17 @@ class CodemanApp {
         else if (wantIdle && !hasIdle) { tab.classList.add('tab-alert-idle'); tab.classList.remove('tab-alert-action'); }
         else if (!alertType && (hasAction || hasIdle)) { tab.classList.remove('tab-alert-action', 'tab-alert-idle'); }
 
+        // Inject tab-number badge if missing (added after initial render)
+        if (!tab.querySelector('.tab-number')) {
+          const idx = this.sessionOrder.indexOf(id);
+          if (idx >= 0 && idx < 9) {
+            const numSpan = document.createElement('span');
+            numSpan.className = 'tab-number';
+            numSpan.textContent = String(idx + 1);
+            tab.insertBefore(numSpan, tab.firstChild);
+          }
+        }
+
         // Update status indicator
         const statusEl = tab.querySelector('.tab-status');
         if (statusEl && !statusEl.classList.contains(status)) {
@@ -1834,6 +2067,7 @@ class CodemanApp {
   }
 
   _fullRenderSessionTabs() {
+    if (this._activeRename) return;
     const container = this.$('sessionTabs');
 
     // Clean up any orphaned dropdowns before re-rendering
@@ -1849,6 +2083,7 @@ class CodemanApp {
       // Reorder to put active tab first
       tabOrder = [this.activeSessionId, ...this.sessionOrder.filter(id => id !== this.activeSessionId)];
     }
+    let _tabIdx = 0;
     for (const id of tabOrder) {
       const session = this.sessions.get(id);
       if (!session) continue; // Skip if session was removed
@@ -1875,6 +2110,7 @@ class CodemanApp {
 
       const endedAttr = session._ended ? ' data-ended="1"' : '';
       parts.push(`<div class="session-tab ${isActive ? 'active' : ''}${alertClass}" data-id="${id}" data-color="${color}"${endedAttr} onclick="app.selectSession('${escapeHtml(id)}')" oncontextmenu="event.preventDefault(); app.startInlineRename('${escapeHtml(id)}')" tabindex="0" role="tab" aria-selected="${isActive ? 'true' : 'false'}" aria-label="${escapeHtml(name)} session" ${session.workingDir ? `title="${escapeHtml(session.workingDir)}"` : ''}>
+          ${_tabIdx < 9 ? '<span class="tab-number">' + (_tabIdx + 1) + '</span>' : ''}
           <span class="tab-status ${status}" aria-hidden="true"></span>
           <span class="tab-info">
             <span class="tab-name-row">
@@ -1888,6 +2124,7 @@ class CodemanApp {
           <span class="tab-gear" onclick="event.stopPropagation(); app.openSessionOptions('${escapeHtml(id)}')" title="Session options" aria-label="Session options" tabindex="0">&#x2699;</span>
           <span class="tab-close" onclick="event.stopPropagation(); app.requestCloseSession('${escapeHtml(id)}')" title="Close session" aria-label="Close session" tabindex="0">&times;</span>
         </div>`);
+      _tabIdx++;
     }
 
     container.innerHTML = parts.join('');
@@ -2106,6 +2343,24 @@ class CodemanApp {
     });
   }
 
+  moveActiveTabLeft() {
+    if (!this.activeSessionId) return;
+    const idx = this.sessionOrder.indexOf(this.activeSessionId);
+    if (idx <= 0) return;
+    [this.sessionOrder[idx - 1], this.sessionOrder[idx]] = [this.sessionOrder[idx], this.sessionOrder[idx - 1]];
+    this.saveSessionOrder();
+    this._fullRenderSessionTabs();
+  }
+
+  moveActiveTabRight() {
+    if (!this.activeSessionId) return;
+    const idx = this.sessionOrder.indexOf(this.activeSessionId);
+    if (idx === -1 || idx >= this.sessionOrder.length - 1) return;
+    [this.sessionOrder[idx], this.sessionOrder[idx + 1]] = [this.sessionOrder[idx + 1], this.sessionOrder[idx]];
+    this.saveSessionOrder();
+    this._fullRenderSessionTabs();
+  }
+
   // ═══════════════════════════════════════════════════════════════
   // Session Lifecycle — select, close, navigate
   // ═══════════════════════════════════════════════════════════════
@@ -2246,6 +2501,12 @@ class CodemanApp {
     this._cleanupPreviousSession(sessionId);
     this.activeSessionId = sessionId;
     try { localStorage.setItem('codeman-active-session', sessionId); } catch {}
+    // Narrow SSE filter to the active session — server stops streaming
+    // session:terminal events for other sessions to this client. Cuts
+    // SSE traffic ~Nx for N concurrent sessions. Fire-and-forget; on the
+    // rare race where server doesn't know our clientId yet, the next
+    // selectSession or reconnect catches up.
+    this._updateSseSubscription(sessionId);
     this.hideWelcome();
     // Clear idle hooks on view, but keep action hooks until user interacts
     this.clearPendingHooks(sessionId, 'idle_prompt');
@@ -2516,6 +2777,11 @@ class CodemanApp {
 
   // Shared cleanup for all session data — called from both closeSession() and session:deleted handler
   _cleanupSessionData(sessionId) {
+    // If the deleted session is currently being renamed, abort the rename
+    // so the inline <input> doesn't ghost as a stale tab on screen.
+    if (this._activeRename?.sessionId === sessionId) {
+      this._activeRename.cancel();
+    }
     this.sessions.delete(sessionId);
     // Remove from tab order
     const orderIndex = this.sessionOrder.indexOf(sessionId);

src/web/public/constants.js

@@ -43,7 +43,7 @@ function urlBase64ToUint8Array(base64String) {
 // ═══════════════════════════════════════════════════════════════
 
 // Default terminal scrollback (can be changed via settings)
-const DEFAULT_SCROLLBACK = 20000;
+const DEFAULT_SCROLLBACK = 50000;
 
 // Timing constants
 const STUCK_THRESHOLD_DEFAULT_MS = 600000;  // 10 minutes - default for stuck detection
@@ -54,7 +54,7 @@ const BROWSER_NOTIF_RATE_LIMIT_MS = 3000;   // Rate limit for browser notificati
 const AUTO_CLOSE_NOTIFICATION_MS = 8000;    // Auto-close browser notifications
 const THROTTLE_DELAY_MS = 100;              // General UI throttle delay
 const TERMINAL_CHUNK_SIZE = 32 * 1024;      // 32KB chunks for terminal buffer loading
-const TERMINAL_TAIL_SIZE = 128 * 1024;      // 128KB tail for initial load
+const TERMINAL_TAIL_SIZE = 1024 * 1024;     // 1MB tail for initial load (more scrollback on tab switch)
 const SYNC_WAIT_TIMEOUT_MS = 50;            // Wait timeout for terminal sync
 const STATS_POLLING_INTERVAL_MS = 2000;     // System stats polling
 
@@ -292,6 +292,9 @@ const SSE_EVENTS = {
   ORCHESTRATOR_COMPLETED: 'orchestrator:completed',
   ORCHESTRATOR_ERROR: 'orchestrator:error',
 
+  // Clipboard
+  CLIPBOARD_WRITE: 'clipboard:write',
+
   // Cases
   CASE_CREATED: 'case:created',
   CASE_LINKED: 'case:linked',

src/web/public/image-input.js

@@ -0,0 +1,143 @@
+/**
+ * Image Input Mixin - Clipboard paste and drag-and-drop image support
+ *
+ * For paste: intercepts Ctrl+V at the xterm keyboard level, creates a temporary
+ * hidden contenteditable div ("paste trap"), lets the browser's native paste fill
+ * it, then checks for image data. This works on HTTP (no secure context needed).
+ *
+ * For drag-and-drop: listens on the terminal container for file drops.
+ *
+ * @dependency app.js (uses global `app` for sendInput, activeSessionId, showToast)
+ * @dependency panels-ui.js (provides showToast)
+ */
+
+Object.assign(CodemanApp.prototype, {
+
+  initImageInput() {
+    // Drag-and-drop handlers on terminal container
+    const container = document.getElementById('terminalContainer');
+    if (!container) return;
+
+    container.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
+        container.classList.add('drag-active');
+      }
+    });
+
+    container.addEventListener('dragleave', (e) => {
+      if (!container.contains(e.relatedTarget)) {
+        container.classList.remove('drag-active');
+      }
+    });
+
+    container.addEventListener('drop', (e) => {
+      e.preventDefault();
+      container.classList.remove('drag-active');
+
+      if (!this.activeSessionId) return;
+      if (!e.dataTransfer || !e.dataTransfer.files.length) return;
+
+      const imageFiles = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith('image/'));
+      if (imageFiles.length === 0) {
+        this.showToast('Only image files are supported', 'error');
+        return;
+      }
+      this._uploadAndInsertImages(imageFiles);
+    });
+  },
+
+  // Called from customKeyEventHandler in terminal-ui.js on Ctrl+V keydown.
+  // Creates a hidden paste trap, lets the browser paste into it, then inspects
+  // the result for images. Works on plain HTTP (no Clipboard API needed).
+  _handleImagePaste() {
+    const self = this;
+
+    // Create a hidden contenteditable div to receive the paste
+    const trap = document.createElement('div');
+    trap.contentEditable = 'true';
+    trap.style.cssText = 'position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0;overflow:hidden';
+    document.body.appendChild(trap);
+    trap.focus();
+
+    // Listen for the paste event on our trap
+    trap.addEventListener('paste', function(e) {
+      e.stopPropagation();
+
+      // Check for images in clipboard items
+      var imageFiles = [];
+      var items = e.clipboardData && e.clipboardData.items;
+      if (items) {
+        for (var i = 0; i < items.length; i++) {
+          if (items[i].type.startsWith('image/')) {
+            var blob = items[i].getAsFile();
+            if (blob) imageFiles.push(blob);
+          }
+        }
+      }
+
+      // Clean up the trap
+      setTimeout(function() {
+        if (trap.parentNode) trap.parentNode.removeChild(trap);
+        // Refocus the terminal
+        if (self.terminal) self.terminal.focus();
+      }, 0);
+
+      if (imageFiles.length > 0) {
+        e.preventDefault();
+        self._uploadAndInsertImages(imageFiles);
+      } else {
+        // No image -- extract text and send to terminal
+        var text = e.clipboardData ? e.clipboardData.getData('text/plain') : '';
+        e.preventDefault();
+        if (text) self.sendInput(text);
+      }
+    });
+
+    // Trigger the browser's native paste via execCommand
+    // (this fires the paste event on our focused trap element)
+    document.execCommand('paste');
+  },
+
+  async _uploadAndInsertImages(files) {
+    const sessionId = this.activeSessionId;
+    if (!sessionId) return;
+
+    this.showToast('Uploading ' + files.length + ' image' + (files.length > 1 ? 's' : '') + '...', 'info');
+
+    const paths = [];
+    for (const file of files) {
+      try {
+        const path = await this._uploadPasteImage(sessionId, file);
+        paths.push(path);
+      } catch (err) {
+        this.showToast('Upload failed: ' + (err.message || 'unknown error'), 'error');
+      }
+    }
+
+    if (paths.length > 0) {
+      const pathStr = paths.join(' ');
+      await this.sendInput(pathStr);
+      this.showToast(paths.length + ' image' + (paths.length > 1 ? 's' : '') + ' ready', 'success');
+    }
+  },
+
+  async _uploadPasteImage(sessionId, file) {
+    const form = new FormData();
+    form.append('image', file);
+
+    const resp = await fetch('/api/sessions/' + sessionId + '/paste-image', {
+      method: 'POST',
+      body: form,
+    });
+
+    if (!resp.ok) {
+      const data = await resp.json().catch(() => ({}));
+      throw new Error(data.error || 'HTTP ' + resp.status);
+    }
+
+    const data = await resp.json();
+    return data.path;
+  },
+
+});

src/web/public/index.html

@@ -1095,6 +1095,18 @@
               </label>
               <span class="form-hint">Use 1M token context window (model: opus[1m]) for all new sessions</span>
             </div>
+            <div class="form-row">
+              <label>Thinking Effort</label>
+              <select id="appSettingsThinkingEffort" class="form-select">
+                <option value="">Default</option>
+                <option value="low">Low</option>
+                <option value="medium">Medium</option>
+                <option value="high">High</option>
+                <option value="xhigh">XHigh</option>
+                <option value="max">Max</option>
+              </select>
+              <span class="form-hint">Set CLAUDE_CODE_EFFORT_LEVEL for all new sessions (default = no override)</span>
+            </div>
             <!-- Nice Priority Section -->
             <div class="form-section-header">Nice Priority</div>
             <div class="form-row form-row-switch">
@@ -1792,5 +1804,6 @@
   <script defer src="ralph-wizard.js"></script>
   <script defer src="api-client.js"></script>
   <script defer src="subagent-windows.js"></script>
+  <script defer src="image-input.js"></script>
 </body>
 </html>

src/web/public/keyboard-accessory.js

@@ -92,6 +92,7 @@ const KeyboardAccessoryBar = {
       </button>
       <button class="accessory-btn" data-action="tab" title="Tab">Tab</button>
       <button class="accessory-btn" data-action="shift-tab" title="Shift+Tab">⇧Tab</button>
+      <button class="accessory-btn" data-action="effort-max" title="/effort max">Max</button>
       <button class="accessory-btn" data-action="ctrl-o" title="Ctrl+O">⌃O</button>
       <button class="accessory-btn" data-action="opt-enter" title="Option+Enter (newline)">⌥Enter</button>
       <button class="accessory-btn" data-action="esc" title="Escape">Esc</button>
@@ -125,7 +126,7 @@ const KeyboardAccessoryBar = {
       this.handleAction(action, btn);
 
       // Refocus terminal so keyboard stays open (tap blurs terminal → keyboard dismisses → toolbar shifts)
-      const refocusActions = new Set(['scroll-up', 'scroll-down', 'arrow-left', 'arrow-right', 'tab', 'shift-tab', 'ctrl-o', 'opt-enter', 'esc']);
+      const refocusActions = new Set(['scroll-up', 'scroll-down', 'arrow-left', 'arrow-right', 'tab', 'shift-tab', 'ctrl-o', 'opt-enter', 'esc', 'effort-max']);
       if (refocusActions.has(action) ||
           ((action === 'clear' || action === 'compact') && this._confirmAction)) {
         if (typeof app !== 'undefined' && app.terminal) {
@@ -184,6 +185,9 @@ const KeyboardAccessoryBar = {
       case 'ctrl-o':
         this.sendKey('\x0f');
         break;
+      case 'effort-max':
+        this.sendCommand('/effort max');
+        break;
       case 'init':
         this.sendCommand('/init');
         break;

src/web/public/mobile.css

@@ -893,6 +893,7 @@ html.mobile-init .file-browser-panel {
     gap: 8px;
     align-items: center;
     overflow-x: auto;
+    overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
     z-index: 51;
     transition: transform 0.15s ease-out;
@@ -1195,11 +1196,6 @@ html.mobile-init .file-browser-panel {
     touch-action: none;
   }
 
-  /* Response viewer — show eye icon in header on mobile */
-  .btn-response-viewer-header {
-    display: inline-flex !important;
-  }
-
   .response-viewer {
     padding-bottom: var(--safe-area-bottom, 0px);
   }
@@ -2097,6 +2093,7 @@ html.mobile-init .file-browser-panel {
   gap: 8px;
   align-items: center;
   overflow-x: auto;
+  overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   z-index: 51;
 }

src/web/public/notification-manager.js

@@ -3,7 +3,7 @@
  *
  * The NotificationManager class implements five notification layers:
  *   1. In-app notification drawer (slide-out panel with grouped notifications)
- *   2. Tab title flash (alternating "(*) Codeman" when tab is hidden)
+ *   2. Tab title flash (alternating "⚠️ (N) codeman:<host>" / "codeman:<host>" when tab is hidden; uses this.originalTitle so it tracks any per-host title)
  *   3. Browser Notification API (desktop push with auto-close after 8s)
  *   4. Web Push via service worker (OS-level notifications when tab is closed)
  *   5. Audio alerts (Web Audio API beep, user-opt-in)
@@ -291,11 +291,11 @@ class NotificationManager {
         this.titleFlashInterval = setInterval(() => {
           this.titleFlashState = !this.titleFlashState;
           document.title = this.titleFlashState
-            ? `\u26A0\uFE0F (${this.unreadCount}) Codeman`
+            ? `\u26A0\uFE0F (${this.unreadCount}) ${this.originalTitle}`
             : this.originalTitle;
         }, TITLE_FLASH_INTERVAL_MS);
         // Set immediately
-        document.title = `\u26A0\uFE0F (${this.unreadCount}) Codeman`;
+        document.title = `\u26A0\uFE0F (${this.unreadCount}) ${this.originalTitle}`;
       }
     }
   }
@@ -330,7 +330,7 @@ class NotificationManager {
     if (now - this.lastBrowserNotifTime < BROWSER_NOTIF_RATE_LIMIT_MS) return;
     this.lastBrowserNotifTime = now;
 
-    const notif = new Notification(`Codeman: ${title}`, {
+    const notif = new Notification(`${this.originalTitle}: ${title}`, {
       body,
       tag, // Groups same-tag notifications
       icon: '/favicon.ico',

src/web/public/panels-ui.js

@@ -1575,7 +1575,7 @@ Object.assign(CodemanApp.prototype, {
         lineHeight: 1.2,
         cursorBlink: true,
         cursorStyle: 'block',
-        scrollback: 5000,
+        scrollback: DEFAULT_SCROLLBACK,
         allowTransparency: true,
         allowProposedApi: true,
       });
@@ -3246,4 +3246,68 @@ Object.assign(CodemanApp.prototype, {
       }
     }
   },
+
+  // ─── Clipboard ──────────────────────────────────────────────────────────────
+
+  async _onClipboardWrite(data) {
+    const text = data?.text;
+    if (typeof text !== 'string') return;
+    try {
+      await navigator.clipboard.writeText(text);
+      this.showToast(`Copied to clipboard (${text.length} chars)`, 'success');
+    } catch {
+      this._showClipboardFallback(text);
+    }
+  },
+
+  _showClipboardFallback(text) {
+    const overlay = document.createElement('div');
+    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:10000;display:flex;align-items:center;justify-content:center';
+
+    const modal = document.createElement('div');
+    modal.style.cssText = 'background:#1e1e2e;border:1px solid #444;border-radius:8px;padding:16px;max-width:600px;width:90%;max-height:60vh;display:flex;flex-direction:column;gap:12px';
+
+    const header = document.createElement('div');
+    header.style.cssText = 'display:flex;justify-content:space-between;align-items:center';
+    const title = document.createElement('span');
+    title.style.cssText = 'color:#cdd6f4;font-weight:600';
+    title.textContent = 'Clipboard (browser blocked auto-copy)';
+    const closeBtn = document.createElement('button');
+    closeBtn.style.cssText = 'background:none;border:none;color:#cdd6f4;font-size:18px;cursor:pointer';
+    closeBtn.textContent = '\u00d7';
+    header.appendChild(title);
+    header.appendChild(closeBtn);
+
+    const textarea = document.createElement('textarea');
+    textarea.readOnly = true;
+    textarea.style.cssText = 'background:#181825;color:#cdd6f4;border:1px solid #555;border-radius:4px;padding:8px;font-family:monospace;font-size:13px;resize:none;height:200px;width:100%';
+    textarea.value = text;
+
+    const copyBtn = document.createElement('button');
+    copyBtn.style.cssText = 'background:#89b4fa;color:#1e1e2e;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-weight:600';
+    copyBtn.textContent = 'Copy to Clipboard';
+
+    modal.appendChild(header);
+    modal.appendChild(textarea);
+    modal.appendChild(copyBtn);
+    overlay.appendChild(modal);
+    document.body.appendChild(overlay);
+
+    copyBtn.onclick = async () => {
+      try {
+        await navigator.clipboard.writeText(text);
+        this.showToast('Copied to clipboard', 'success');
+        overlay.remove();
+      } catch {
+        textarea.select();
+        document.execCommand('copy');
+        this.showToast('Copied (fallback)', 'success');
+        overlay.remove();
+      }
+    };
+
+    const close = () => overlay.remove();
+    closeBtn.onclick = close;
+    overlay.onclick = (e) => { if (e.target === overlay) close(); };
+  },
 });

src/web/public/ralph-wizard.js

@@ -1032,6 +1032,10 @@ Object.assign(CodemanApp.prototype, {
     const enabledItems = config.generatedPlan?.filter(i => i.enabled);
 
     try {
+      const envOverrides = this.buildEnvOverrides(
+        this.getCaseSettings(config.caseName),
+        this.loadAppSettingsFromStorage()
+      );
       const res = await fetch('/api/ralph-loop/start', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -1042,6 +1046,7 @@ Object.assign(CodemanApp.prototype, {
           maxIterations: config.maxIterations || null,
           enableRespawn: config.enableRespawn,
           planItems: enabledItems?.length ? enabledItems : undefined,
+          ...(Object.keys(envOverrides).length > 0 ? { envOverrides } : {}),
         }),
       });
       const data = await res.json();

src/web/public/respawn-ui.js

@@ -792,7 +792,7 @@ Object.assign(CodemanApp.prototype, {
       const res = await fetch(`/api/sessions/${this.editingSessionId}/respawn/enable`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ config: respawnConfig, durationMinutes })
+        body: JSON.stringify({ config: respawnConfig, durationMinutes: durationMinutes ?? undefined })
       });
       const data = await res.json();
       if (data.error) throw new Error(data.error);

src/web/public/session-ui.js

@@ -12,6 +12,22 @@
  */
 
 Object.assign(CodemanApp.prototype, {
+  /**
+   * Build envOverrides payload from case + global settings.
+   * Single source of truth for the server-side tmux setenv values.
+   * Keys omitted when value is default/falsy — backend treats unset as "no override".
+   */
+  buildEnvOverrides(caseSettings, globalSettings) {
+    const env = {};
+    if (caseSettings?.agentTeams || globalSettings?.agentTeamsEnabled) {
+      env.CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS = '1';
+    }
+    if (globalSettings?.thinkingEffort) {
+      env.CLAUDE_CODE_EFFORT_LEVEL = globalSettings.thinkingEffort;
+    }
+    return env;
+  },
+
   // ═══════════════════════════════════════════════════════════════
   // Quick Start
   // ═══════════════════════════════════════════════════════════════
@@ -319,10 +335,7 @@ Object.assign(CodemanApp.prototype, {
       // Build env overrides from global + case settings (case overrides global)
       const caseSettings = this.getCaseSettings(caseName);
       const globalSettings = this.loadAppSettingsFromStorage();
-      const envOverrides = {};
-      if (caseSettings.agentTeams || globalSettings.agentTeamsEnabled) {
-        envOverrides.CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS = '1';
-      }
+      const envOverrides = this.buildEnvOverrides(caseSettings, globalSettings);
       const hasEnvOverrides = Object.keys(envOverrides).length > 0;
       const useOpus1m = caseSettings.opusContext1m || globalSettings.opusContext1mEnabled;
       const modelOverride = useOpus1m ? 'opus[1m]' : '';
@@ -526,6 +539,7 @@ Object.assign(CodemanApp.prototype, {
       }
 
       // Quick-start with opencode mode (auto-allow tools by default)
+      const envOverrides = this.buildEnvOverrides(this.getCaseSettings(caseName), this.loadAppSettingsFromStorage());
       const res = await fetch('/api/quick-start', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -533,6 +547,7 @@ Object.assign(CodemanApp.prototype, {
           caseName,
           mode: 'opencode',
           openCodeConfig: { autoAllowTools: true },
+          ...(Object.keys(envOverrides).length > 0 ? { envOverrides } : {}),
         })
       });
       const data = await res.json();
@@ -897,11 +912,16 @@ Object.assign(CodemanApp.prototype, {
     const tabName = document.querySelector(`.tab-name[data-session-id="${sessionId}"]`);
     if (!tabName) return;
 
+    // If a previous rename somehow leaked (shouldn't happen, but defends against
+    // future code paths that throw before cleanup), abort it before starting fresh.
+    if (this._activeRename) this._activeRename.cancel();
+
     const currentName = this.getSessionName(session);
     const parsed = parseSessionPrefix(session.name);
     const originalContent = tabName.textContent;
+    // Clear existing content to make room for the input element
     tabName.textContent = '';
-    tabName.innerHTML = '';
+    while (tabName.firstChild) tabName.removeChild(tabName.firstChild);
 
     // If prefix detected, show it as non-editable label
     if (parsed) {
@@ -922,17 +942,26 @@ Object.assign(CodemanApp.prototype, {
     input.focus();
     input.select();
 
-    const finishRename = async () => {
-      const suffix = input.value.trim();
-      let fullName;
-      if (parsed) {
-        fullName = parsed.prefix + (suffix ? ': ' + suffix : '');
-      } else {
-        fullName = suffix;
+    let settled = false;
+    const finishRename = async ({ commit }) => {
+      if (settled) return;
+      settled = true;
+      this._activeRename = null;
+
+      // Aborted (e.g. session was deleted mid-rename): just re-render so any
+      // ghost DOM left behind is replaced with the canonical tab list.
+      if (!commit) {
+        this.renderSessionTabs();
+        return;
       }
+
+      const suffix = input.value.trim();
+      const fullName = parsed ? parsed.prefix + (suffix ? ': ' + suffix : '') : suffix;
       tabName.textContent = fullName || originalContent;
 
-      if (fullName !== session.name) {
+      // Skip the API call if the session vanished between focus and blur.
+      const stillExists = this.sessions.has(sessionId);
+      if (stillExists && fullName !== session.name) {
         try {
           await fetch(`/api/sessions/${sessionId}/name`, {
             method: 'PUT',
@@ -944,10 +973,22 @@ Object.assign(CodemanApp.prototype, {
           this.showToast('Failed to rename', 'error');
         }
       }
+      // Re-render tabs to restore full tab structure
+      this.renderSessionTabs();
     };
 
-    input.addEventListener('blur', finishRename);
+    // Register only after the input is wired so a throw above can't strand state.
+    this._activeRename = {
+      sessionId,
+      cancel: () => finishRename({ commit: false }),
+    };
+
+    input.addEventListener('blur', () => finishRename({ commit: true }));
     input.addEventListener('keydown', (e) => {
+      // Enter/Escape during IME composition belong to the IME (e.g. confirming
+      // a Chinese pinyin candidate). keyCode 229 is the legacy signal for the
+      // same condition on browsers that don't set isComposing reliably.
+      if (e.isComposing || e.keyCode === 229) return;
       if (e.key === 'Enter') {
         e.preventDefault();
         input.blur();

src/web/public/settings-ui.js

@@ -334,6 +334,7 @@ Object.assign(CodemanApp.prototype, {
     // Claude Permissions settings
     document.getElementById('appSettingsAgentTeams').checked = settings.agentTeamsEnabled ?? false;
     document.getElementById('appSettingsOpusContext1m').checked = settings.opusContext1mEnabled ?? false;
+    document.getElementById('appSettingsThinkingEffort').value = settings.thinkingEffort ?? '';
     // CPU Priority settings
     const niceSettings = settings.nice || {};
     document.getElementById('appSettingsNiceEnabled').checked = niceSettings.enabled ?? false;
@@ -1134,6 +1135,7 @@ Object.assign(CodemanApp.prototype, {
       // Claude Permissions settings
       agentTeamsEnabled: document.getElementById('appSettingsAgentTeams').checked,
       opusContext1mEnabled: document.getElementById('appSettingsOpusContext1m').checked,
+      thinkingEffort: document.getElementById('appSettingsThinkingEffort').value,
       // CPU Priority settings
       nice: {
         enabled: document.getElementById('appSettingsNiceEnabled').checked,

src/web/public/styles.css

@@ -258,15 +258,16 @@ body {
 }
 
 .session-tab.active {
-  background: rgba(255, 255, 255, 0.04);
-  border-color: var(--glass-border);
-  color: var(--text);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  background: rgba(34, 197, 94, 0.15) !important;
+  border: 2px solid #00FF66 !important;
+  color: #fff !important;
+  box-shadow: none !important;
+  outline: none !important;
 }
 
 /* Tab switch feedback: bright green glow on the newly-active tab */
 .session-tab.tab-glow {
-  animation: tab-glow 0.35s ease-out forwards;
+  animation: tab-glow 0.35s ease-out;
 }
 
 @keyframes tab-glow {
@@ -304,13 +305,36 @@ body {
 .session-tab[data-color="pink"] { border-left: 3px solid var(--session-pink); }
 
 /* Active tabs with color get subtle background tint */
-.session-tab.active[data-color="red"] { background: rgba(239, 68, 68, 0.1); }
-.session-tab.active[data-color="orange"] { background: rgba(249, 115, 22, 0.1); }
-.session-tab.active[data-color="yellow"] { background: rgba(234, 179, 8, 0.1); }
-.session-tab.active[data-color="green"] { background: rgba(34, 197, 94, 0.1); }
-.session-tab.active[data-color="blue"] { background: rgba(59, 130, 246, 0.1); }
-.session-tab.active[data-color="purple"] { background: rgba(168, 85, 247, 0.1); }
-.session-tab.active[data-color="pink"] { background: rgba(236, 72, 153, 0.1); }
+.session-tab.active[data-color="red"] { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.5); box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); }
+.session-tab.active[data-color="orange"] { background: rgba(249, 115, 22, 0.15); border-color: rgba(249, 115, 22, 0.5); box-shadow: 0 0 10px rgba(249, 115, 22, 0.3); }
+.session-tab.active[data-color="yellow"] { background: rgba(234, 179, 8, 0.15); border-color: rgba(234, 179, 8, 0.5); box-shadow: 0 0 10px rgba(234, 179, 8, 0.3); }
+.session-tab.active[data-color="green"] { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.5); box-shadow: 0 0 10px rgba(34, 197, 94, 0.3); }
+.session-tab.active[data-color="blue"] { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.5); box-shadow: 0 0 10px rgba(59, 130, 246, 0.3); }
+.session-tab.active[data-color="purple"] { background: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.5); box-shadow: 0 0 10px rgba(168, 85, 247, 0.3); }
+.session-tab.active[data-color="pink"] { background: rgba(236, 72, 153, 0.15); border-color: rgba(236, 72, 153, 0.5); box-shadow: 0 0 10px rgba(236, 72, 153, 0.3); }
+
+/* Tab number indicator (Alt+N shortcut hint) */
+.session-tab .tab-number {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 0.6rem;
+  font-weight: 700;
+  flex-shrink: 0;
+  font-family: monospace;
+}
+
+.session-tab.active .tab-number {
+  background: rgba(0, 255, 102, 0.2) !important;
+  border-color: rgba(0, 255, 102, 0.5) !important;
+  color: #00FF66 !important;
+}
 
 .session-tab .tab-info {
   display: flex;
@@ -2178,13 +2202,10 @@ body {
 
 .history-item {
   display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.55rem 0.8rem;
+  flex-direction: column;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 8px;
-  cursor: pointer;
   transition: all var(--transition-smooth);
   text-align: left;
 }
@@ -2195,20 +2216,37 @@ body {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
+.history-item.expanded {
+  border-color: rgba(59, 130, 246, 0.35);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.history-item-main {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.55rem 0.8rem;
+  cursor: pointer;
+  border-radius: 8px;
+}
+
 .history-item-text {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.15rem;
+  gap: 0.2rem;
 }
 
 .history-item-title {
   font-size: 0.8rem;
   color: var(--text);
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  word-break: break-word;
 }
 
 .history-item-subtitle {
@@ -2219,18 +2257,99 @@ body {
   white-space: nowrap;
 }
 
+.history-item-subtitle.is-case {
+  color: #7aa7ff;
+  font-weight: 500;
+}
+
 .history-item-meta {
   font-size: 0.7rem;
   color: var(--text-muted);
   white-space: nowrap;
+  align-self: center;
 }
 
-.history-item-size {
-  font-size: 0.7rem;
+.history-item-expand {
+  appearance: none;
+  border: none;
+  background: transparent;
   color: var(--text-dim);
-  white-space: nowrap;
-  min-width: 45px;
-  text-align: right;
+  font-size: 1.1rem;
+  line-height: 1;
+  padding: 0.25rem 0.4rem;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background var(--transition-smooth), color var(--transition-smooth);
+  flex-shrink: 0;
+}
+
+.history-item-expand:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text);
+}
+
+.history-item.expanded .history-item-expand {
+  color: #7aa7ff;
+  transform: rotate(90deg);
+}
+
+.history-item-detail {
+  padding: 0.5rem 0.8rem 0.7rem;
+  border-top: 1px dashed rgba(255, 255, 255, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  font-size: 0.72rem;
+  color: var(--text-muted);
+}
+
+.history-item-detail[hidden] {
+  display: none;
+}
+
+.history-detail-row {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-start;
+  word-break: break-word;
+}
+
+.history-detail-label {
+  color: var(--text-dim);
+  min-width: 46px;
+  flex-shrink: 0;
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding-top: 0.1rem;
+}
+
+.history-detail-value {
+  color: var(--text);
+  flex: 1;
+  min-width: 0;
+  white-space: pre-wrap;
+}
+
+.history-detail-path {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 0.68rem;
+  color: #a8b5c9;
+}
+
+.history-detail-meta {
+  color: var(--text-dim);
+  font-size: 0.68rem;
+}
+
+@media (max-width: 640px) {
+  .history-item-meta {
+    font-size: 0.65rem;
+  }
+  .history-item-main {
+    gap: 0.45rem;
+    padding: 0.6rem 0.7rem;
+  }
 }
 
 .history-show-more {
@@ -7793,9 +7912,8 @@ kbd {
    Response Viewer — native-scroll overlay for reading Claude responses
    ═══════════════════════════════════════════════════════════════ */
 
-/* Hidden on desktop — only shown on mobile via mobile.css override */
 .btn-response-viewer-header {
-  display: none !important;
+  display: inline-flex !important;
 }
 
 .response-viewer {
@@ -7861,33 +7979,54 @@ kbd {
   line-height: 1;
 }
 
-/* Conversation thread messages */
+/* Conversation thread messages — card-style layout for clear separation */
 .rv-message {
-  margin-bottom: 16px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #2a2a3a;
+  margin: 0 0 18px;
+  padding: 14px 16px 16px;
+  border-radius: 10px;
+  border: 1px solid #252538;
+  border-left-width: 3px;
+  background: #181826;
+  position: relative;
 }
 
 .rv-message:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
-  padding-bottom: 0;
-}
-
-.rv-role {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
   margin-bottom: 6px;
 }
 
+/* Distinct accent per role so threads are scannable at a glance */
+.rv-message:has(.rv-role-user),
+.rv-message.rv-msg-user {
+  border-left-color: #7aa2ff;
+  background: #16182a;
+}
+
+.rv-message:has(.rv-role-assistant),
+.rv-message.rv-msg-assistant {
+  border-left-color: #6ddb7f;
+  background: #161f1a;
+}
+
+.rv-role {
+  display: inline-block;
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: 10px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.04);
+}
+
 .rv-role-user {
-  color: #5c7cfa;
+  color: #7aa2ff;
+  background: rgba(122, 162, 255, 0.12);
 }
 
 .rv-role-assistant {
-  color: #51cf66;
+  color: #6ddb7f;
+  background: rgba(109, 219, 127, 0.12);
 }
 
 /* Markdown rendered content inside response viewer */
@@ -7927,6 +8066,116 @@ kbd {
   border-radius: 6px;
   padding: 10px 12px;
   overflow-x: auto;
+  margin: 1em 0;
+  -webkit-overflow-scrolling: touch;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
+  position: relative;
+}
+
+/* Default: wrap long lines so mobile code reads naturally without horizontal scroll.
+   Preserve indentation (pre-wrap) but allow breaks inside long tokens
+   (URLs, paths, identifiers) so they don't overflow. */
+.rv-text pre code,
+.response-viewer-body > pre code {
+  background: none;
+  color: #e6e6f0;
+  padding: 0;
+  font-family: 'Fira Code', 'JetBrains Mono', 'SF Mono', Menlo, Monaco, monospace;
+  font-size: 12.5px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: normal;
+  overflow-wrap: anywhere;
+  tab-size: 4;
+}
+
+/* ASCII diagrams (box-drawing, arrows): default is wrap for mobile readability.
+   A toggle button lets users switch to horizontal-scroll mode when preserving
+   the original grid structure matters more than fitting the viewport. The
+   button lives in a wrapper div outside the <pre> so it stays pinned to the
+   visual right edge when the user scrolls horizontally. */
+.rv-text .rv-diagram-wrap,
+.response-viewer-body .rv-diagram-wrap {
+  position: relative;
+  margin: 1em 0;
+  max-width: var(--rv-content-max, 720px);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.rv-text .rv-diagram-wrap > pre.rv-diagram,
+.response-viewer-body .rv-diagram-wrap > pre.rv-diagram {
+  /* Pre lives inside wrap — move outer spacing to wrap */
+  margin: 0;
+  padding-right: 44px;    /* reserve space for the pinned button */
+}
+
+/* Default state: wrap long lines — same behavior as regular code blocks */
+.rv-text pre.rv-diagram code,
+.response-viewer-body pre.rv-diagram code {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: normal;
+}
+
+/* Scroll-mode (toggled): preserve structure, horizontal scroll with gradient hint */
+.rv-text pre.rv-diagram.rv-nowrap code,
+.response-viewer-body pre.rv-diagram.rv-nowrap code {
+  white-space: pre;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.rv-text pre.rv-diagram.rv-nowrap,
+.response-viewer-body pre.rv-diagram.rv-nowrap {
+  background:
+    linear-gradient(to left, #0f0f1a 0, rgba(15, 15, 26, 0) 28px) right / 28px 100% no-repeat,
+    linear-gradient(to left, rgba(122, 162, 255, 0.18) 0, rgba(15, 15, 26, 0) 28px) right / 28px 100% no-repeat,
+    #0f0f1a;
+}
+
+/* Toggle button — pinned to the wrapper's top-right, NOT affected by <pre>'s
+   horizontal scroll since it lives outside that scrolling container. */
+.rv-wrap-toggle {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 28px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid #2f2f45;
+  border-radius: 5px;
+  background: rgba(20, 20, 32, 0.92);
+  color: #8b8b97;
+  font-size: 11px;
+  line-height: 1;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s, border-color 0.15s;
+  z-index: 2;
+}
+
+.rv-wrap-toggle:hover,
+.rv-wrap-toggle:active {
+  color: #e0e0ec;
+  border-color: #4a4a65;
+}
+
+/* Default icon = "return" (wrap is active). Clicking switches to expand/scroll. */
+.rv-wrap-toggle::before {
+  content: '↵';
+  font-size: 13px;
+}
+
+.rv-diagram-wrap:has(> pre.rv-nowrap) .rv-wrap-toggle::before,
+.rv-diagram-wrap.rv-wrap-nowrap .rv-wrap-toggle::before {
+  content: '⤢';
+}
+
+.rv-text ul, .rv-text ol,
+.response-viewer-body > ul, .response-viewer-body > ol {
   margin: 0.6em 0;
 }
 
@@ -7962,25 +8211,80 @@ kbd {
   text-decoration: none;
 }
 
-.rv-text table {
+.rv-text a:hover,
+.response-viewer-body a:hover {
+  border-bottom-color: #7aa2ff;
+}
+
+/* Tables — scroll wrapper keeps table proper while allowing horizontal overflow */
+.rv-table-wrap {
+  margin: 1em 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  border: 1px solid #2a2a3d;
+  border-radius: 8px;
+  background: #12121d;
+}
+
+.rv-text table,
+.response-viewer-body > table,
+.rv-table-wrap > table {
   border-collapse: collapse;
-  margin: 0.6em 0;
+  margin: 0;
   width: 100%;
-  font-size: 0.9em;
+  font-size: 0.92em;
+  line-height: 1.55;
 }
 
-.rv-text th, .rv-text td {
-  border: 1px solid #333;
-  padding: 4px 8px;
+.rv-text th, .rv-text td,
+.response-viewer-body > table th,
+.response-viewer-body > table td,
+.rv-table-wrap th, .rv-table-wrap td {
+  border-bottom: 1px solid #252538;
+  border-right: 1px solid #252538;
+  padding: 8px 12px;
   text-align: left;
+  vertical-align: top;
+  white-space: normal;
 }
 
-.rv-text th {
-  background: #2a2a3e;
-  color: #e0e0e0;
+.rv-text th:last-child, .rv-text td:last-child,
+.response-viewer-body > table th:last-child,
+.response-viewer-body > table td:last-child,
+.rv-table-wrap th:last-child, .rv-table-wrap td:last-child {
+  border-right: none;
 }
 
-.rv-text hr {
+.rv-text tr:last-child td,
+.response-viewer-body > table tr:last-child td,
+.rv-table-wrap tr:last-child td {
+  border-bottom: none;
+}
+
+.rv-text th,
+.response-viewer-body > table th,
+.rv-table-wrap th {
+  background: #20202e;
+  color: #f0f0f5;
+  font-weight: 600;
+  border-bottom: 2px solid #2f2f45;
+  white-space: nowrap;
+}
+
+.rv-text tbody tr:nth-child(even) td,
+.response-viewer-body > table tbody tr:nth-child(even) td,
+.rv-table-wrap tbody tr:nth-child(even) td {
+  background: rgba(255, 255, 255, 0.022);
+}
+
+.rv-text tbody tr:hover td,
+.response-viewer-body > table tbody tr:hover td,
+.rv-table-wrap tbody tr:hover td {
+  background: rgba(122, 162, 255, 0.06);
+}
+
+.rv-text hr,
+.response-viewer-body > hr {
   border: none;
   border-top: 1px solid #333;
   margin: 1em 0;
@@ -8287,3 +8591,23 @@ kbd {
   margin-top: 4px;
   font-size: 0.7rem;
 }
+
+/* Image drag-and-drop overlay */
+#terminalContainer.drag-active {
+  outline: 2px dashed #4a9eff;
+  outline-offset: -2px;
+  position: relative;
+}
+#terminalContainer.drag-active::after {
+  content: 'Drop image here';
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(74, 158, 255, 0.08);
+  color: #4a9eff;
+  font-size: 1.2rem;
+  pointer-events: none;
+  z-index: 100;
+}

src/web/public/sw.js

@@ -110,7 +110,7 @@ self.addEventListener('push', (event) => {
     return;
   }
 
-  const { title, body, tag, sessionId, urgency, actions } = payload;
+  const { title, hostTitle, body, tag, sessionId, urgency, actions } = payload;
 
   const options = {
     body: body || '',
@@ -126,8 +126,15 @@ self.addEventListener('push', (event) => {
     options.actions = actions;
   }
 
+  // Match the in-page Notification format: "codeman:<host>: <event title>".
+  // hostTitle is sent by servers >= the hostname-aware push payload change;
+  // older servers omit it and we fall back to the bare title.
+  const displayTitle = hostTitle && title
+    ? `${hostTitle}: ${title}`
+    : (title || hostTitle || 'Codeman');
+
   event.waitUntil(
-    self.registration.showNotification(title || 'Codeman', options)
+    self.registration.showNotification(displayTitle, options)
   );
 });
 

src/web/public/terminal-ui.js

@@ -18,8 +18,10 @@ Object.assign(CodemanApp.prototype, {
   // ═══════════════════════════════════════════════════════════════
 
   initTerminal() {
-    // Load scrollback setting from localStorage (default 5000)
-    const scrollback = parseInt(localStorage.getItem('codeman-scrollback')) || DEFAULT_SCROLLBACK;
+    // Load scrollback setting from localStorage, treating DEFAULT_SCROLLBACK as a floor
+    // so users who picked up the previous (smaller) default get the new minimum on upgrade.
+    const stored = parseInt(localStorage.getItem('codeman-scrollback'));
+    const scrollback = Number.isFinite(stored) && stored > 0 ? Math.max(stored, DEFAULT_SCROLLBACK) : DEFAULT_SCROLLBACK;
 
     this.terminal = new Terminal({
       theme: {
@@ -81,6 +83,15 @@ Object.assign(CodemanApp.prototype, {
       // Let Alt+digit pass through to browser (tab switching)
       if (ev.altKey && ev.key >= '0' && ev.key <= '9') return false;
 
+      // Ctrl+V / Cmd+V: intercept before xterm sends ^V to PTY.
+      // Route through our paste trap which handles both images and text.
+      if ((ev.ctrlKey || ev.metaKey) && ev.key === 'v' && ev.type === 'keydown') {
+        if (this.activeSessionId && this._handleImagePaste) {
+          this._handleImagePaste();
+        }
+        return false;
+      }
+
       // Shift+Enter / Ctrl+Enter: insert newline for multi-line input.
       // xterm.js sends plain \r for all Enter variants, so Claude Code (Ink) can't
       // distinguish them. We use tmux send-keys -H to send a line feed byte (0x0a)
@@ -122,21 +133,45 @@ Object.assign(CodemanApp.prototype, {
     // On Android Chrome, typing symbols (e.g., "/" from Gboard's symbol keyboard)
     // sends keyCode 229 + input event WITHOUT compositionstart/end wrapping.
     // The custom key handler above returns false for keyCode 229, telling xterm
-    // to ignore the keydown. This listener catches those orphaned input events.
+    // to ignore the keydown. xterm.js expects the character to arrive via
+    // composition events, but since there's no composition, the character is lost.
+    // This listener catches those orphaned input events and forwards them to onData.
     {
       const xtermTextarea = container.querySelector('.xterm-helper-textarea');
       if (xtermTextarea && MobileDetection.isTouchDevice()) {
         let composing = false;
+        let lastKeydownHandled = 0;
         xtermTextarea.addEventListener('compositionstart', () => { composing = true; });
         xtermTextarea.addEventListener('compositionend', () => { composing = false; });
+        // Track when xterm handles a keydown normally (non-229 keyCode).
+        // If xterm processed the keydown, it will emit onData itself --
+        // the input event handler below must NOT re-send the character.
+        xtermTextarea.addEventListener('keydown', (e) => {
+          if (!e.isComposing && e.keyCode !== 229) {
+            lastKeydownHandled = Date.now();
+          }
+        });
         xtermTextarea.addEventListener('input', (e) => {
+          // Only handle insertText events outside of composition -- these are
+          // the ones xterm.js misses on Android virtual keyboards.
           if (composing || e.isComposing) return;
           if (e.inputType !== 'insertText' || !e.data) return;
+          // If xterm just handled a keydown (within 50ms), it already sent the
+          // char via onData. Skip to avoid double-send (e.g., Shift+A => AA).
+          if (Date.now() - lastKeydownHandled < 50) return;
+          // xterm.js may have already processed this via its own input handler.
+          // Check if the textarea was cleared by xterm (value is empty or just
+          // whitespace) -- if so, xterm handled it and we should not double-send.
+          // Use a microtask to check after xterm's own handlers have run.
           const data = e.data;
           Promise.resolve().then(() => {
+            // If xterm cleared the textarea, it processed the input -- skip.
             const val = xtermTextarea.value;
-            if (!val || val.trim() === '') return;
+            if (!val || (val.trim() === '' && data !== ' ')) return;
+            // xterm didn't process it -- forward to terminal as if typed.
+            // Emit via onData path by writing to terminal's input handler.
             this.terminal._core.coreService.triggerDataEvent(data, true);
+            // Clear the textarea to prevent xterm from processing it later.
             xtermTextarea.value = '';
           });
         });
@@ -148,10 +183,36 @@ Object.assign(CodemanApp.prototype, {
     // but the 48KB/frame flush cap in flushPendingWrites() now prevents
     // oversized terminal.write() calls that triggered the stalls.
     // Disable with ?nowebgl URL param if GPU issues return.
+    // Auto-fallback: _initWebGL installs a long-task watchdog that disables
+    // WebGL sticky in localStorage after repeated GPU stalls (see app.js).
+    // Force re-enable after sticky disable with ?webgl=force.
     // Lazy-loaded: script downloaded only on desktop (saves 244KB on mobile).
     this._webglAddon = null;
-    const skipWebGL = MobileDetection.getDeviceType() !== 'desktop';
-    if (!skipWebGL && !new URLSearchParams(location.search).has('nowebgl')) {
+    const _params = new URLSearchParams(location.search);
+    if (_params.get('webgl') === 'force') {
+      try { localStorage.removeItem('codeman-webgl-disabled'); } catch {}
+    }
+    const _stickyDisabled = (() => {
+      try {
+        const raw = localStorage.getItem('codeman-webgl-disabled');
+        if (!raw) return false;
+        const { at } = JSON.parse(raw);
+        // Auto-expire after 7 days so we retry (driver may have been fixed)
+        if (Date.now() - at > 7 * 24 * 60 * 60 * 1000) {
+          localStorage.removeItem('codeman-webgl-disabled');
+          return false;
+        }
+        return true;
+      } catch { return false; }
+    })();
+    const skipWebGL =
+      MobileDetection.getDeviceType() !== 'desktop' ||
+      _params.has('nowebgl') ||
+      _stickyDisabled;
+    if (_stickyDisabled) {
+      console.log('[CRASH-DIAG] WebGL sticky-disabled from prior stalls — DOM renderer in use. Re-enable: ?webgl=force');
+    }
+    if (!skipWebGL) {
       if (typeof WebglAddon !== 'undefined') {
         this._initWebGL();
       } else {
@@ -315,6 +376,9 @@ Object.assign(CodemanApp.prototype, {
     // Welcome message
     this.showWelcome();
 
+    // Image paste and drag-and-drop support
+    this.initImageInput();
+
     // Generation counter for chunkedTerminalWrite — aborts stale writes on tab switch
     this._chunkedWriteGen = 0;
 
@@ -821,8 +885,40 @@ Object.assign(CodemanApp.prototype, {
     return items;
   },
 
+  /**
+   * Resolve workingDir to a case-aware short label.
+   * - Exact case path match → "#caseName"
+   * - workingDir under a case dir → "#caseName/subdir"
+   * - Otherwise → basename (e.g. "Claudeman")
+   */
+  _resolveCaseLabel(workingDir, cases) {
+    if (!workingDir) return '';
+    let best = null;
+    for (const c of cases || []) {
+      if (!c || !c.path) continue;
+      if (workingDir === c.path) {
+        return `#${c.name}`;
+      }
+      if (workingDir.startsWith(c.path + '/')) {
+        const len = c.path.length;
+        if (!best || len > best.len) {
+          best = { name: c.name, suffix: workingDir.slice(len), len };
+        }
+      }
+    }
+    if (best) return `#${best.name}${best.suffix}`;
+    return workingDir.split('/').pop() || workingDir;
+  },
+
+  /** Normalize home prefixes to "~/" on both Linux and macOS */
+  _shortenHomePath(p) {
+    return (p || '')
+      .replace(/^\/home\/[^/]+\//, '~/')
+      .replace(/^\/Users\/[^/]+\//, '~/');
+  },
+
   /** Build a single history item DOM element */
-  _buildHistoryItem(s) {
+  _buildHistoryItem(s, cases) {
     const size =
       s.sizeBytes < 1024
         ? `${s.sizeBytes}B`
@@ -834,12 +930,17 @@ Object.assign(CodemanApp.prototype, {
       date.toLocaleDateString('en', { month: 'short', day: 'numeric' }) +
       ' ' +
       date.toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit', hour12: false });
-    const shortDir = s.workingDir.replace(/^\/home\/[^/]+\//, '~/');
+    const shortDir = this._shortenHomePath(s.workingDir);
+    const caseLabel = this._resolveCaseLabel(s.workingDir, cases);
 
     const item = document.createElement('div');
     item.className = 'history-item';
     item.title = s.workingDir;
-    item.addEventListener('click', () => this.resumeHistorySession(s.sessionId, s.workingDir));
+
+    // Main row: clickable surface that triggers resume
+    const mainRow = document.createElement('div');
+    mainRow.className = 'history-item-main';
+    mainRow.addEventListener('click', () => this.resumeHistorySession(s.sessionId, s.workingDir));
 
     const textCol = document.createElement('div');
     textCol.className = 'history-item-text';
@@ -850,7 +951,8 @@ Object.assign(CodemanApp.prototype, {
 
     const subtitleSpan = document.createElement('span');
     subtitleSpan.className = 'history-item-subtitle';
-    subtitleSpan.textContent = shortDir;
+    if (caseLabel.startsWith('#')) subtitleSpan.classList.add('is-case');
+    subtitleSpan.textContent = caseLabel;
 
     textCol.append(titleSpan, subtitleSpan);
 
@@ -858,11 +960,54 @@ Object.assign(CodemanApp.prototype, {
     metaSpan.className = 'history-item-meta';
     metaSpan.textContent = timeStr;
 
-    const sizeSpan = document.createElement('span');
-    sizeSpan.className = 'history-item-size';
-    sizeSpan.textContent = size;
+    const expandBtn = document.createElement('button');
+    expandBtn.className = 'history-item-expand';
+    expandBtn.type = 'button';
+    expandBtn.setAttribute('aria-label', 'Show details');
+    expandBtn.setAttribute('aria-expanded', 'false');
+    expandBtn.textContent = '⋯'; // ⋯
 
-    item.append(textCol, metaSpan, sizeSpan);
+    mainRow.append(textCol, metaSpan, expandBtn);
+
+    // Detail panel: full prompt + full path, hidden by default
+    const detail = document.createElement('div');
+    detail.className = 'history-item-detail';
+    detail.hidden = true;
+
+    const promptRow = document.createElement('div');
+    promptRow.className = 'history-detail-row';
+    const promptLabel = document.createElement('span');
+    promptLabel.className = 'history-detail-label';
+    promptLabel.textContent = 'Prompt';
+    const promptText = document.createElement('span');
+    promptText.className = 'history-detail-value history-detail-prompt';
+    promptText.textContent = s.firstPrompt || '(no prompt captured)';
+    promptRow.append(promptLabel, promptText);
+
+    const pathRow = document.createElement('div');
+    pathRow.className = 'history-detail-row';
+    const pathLabel = document.createElement('span');
+    pathLabel.className = 'history-detail-label';
+    pathLabel.textContent = 'Path';
+    const pathText = document.createElement('span');
+    pathText.className = 'history-detail-value history-detail-path';
+    pathText.textContent = shortDir;
+    pathRow.append(pathLabel, pathText);
+
+    const metaRow = document.createElement('div');
+    metaRow.className = 'history-detail-row history-detail-meta';
+    metaRow.textContent = `${timeStr} · ${size} · ${s.sessionId.slice(0, 8)}`;
+
+    detail.append(promptRow, pathRow, metaRow);
+
+    expandBtn.addEventListener('click', (ev) => {
+      ev.stopPropagation();
+      const expanded = item.classList.toggle('expanded');
+      detail.hidden = !expanded;
+      expandBtn.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+    });
+
+    item.append(mainRow, detail);
     return item;
   },
 
@@ -875,7 +1020,15 @@ Object.assign(CodemanApp.prototype, {
     if (!container || !list) return;
 
     try {
-      const allSessions = await this._fetchHistorySessions(30);
+      // Load cases in parallel so subtitle can show "#caseName" labels.
+      // Prefer already-loaded this.cases to avoid an extra request.
+      const casesPromise = Array.isArray(this.cases) && this.cases.length > 0
+        ? Promise.resolve(this.cases)
+        : fetch('/api/cases').then((r) => (r.ok ? r.json() : [])).catch(() => []);
+      const [allSessions, cases] = await Promise.all([
+        this._fetchHistorySessions(30),
+        casesPromise,
+      ]);
       if (allSessions.length === 0) {
         container.style.display = 'none';
         return;
@@ -886,7 +1039,7 @@ Object.assign(CodemanApp.prototype, {
 
       // Render initial items
       for (let i = 0; i < Math.min(initialCount, allSessions.length); i++) {
-        list.appendChild(this._buildHistoryItem(allSessions[i]));
+        list.appendChild(this._buildHistoryItem(allSessions[i], cases));
       }
 
       // Add "Show More" button if there are more items
@@ -896,7 +1049,7 @@ Object.assign(CodemanApp.prototype, {
         moreBtn.textContent = `Show ${allSessions.length - initialCount} more`;
         moreBtn.addEventListener('click', () => {
           for (let i = initialCount; i < allSessions.length; i++) {
-            list.insertBefore(this._buildHistoryItem(allSessions[i]), moreBtn);
+            list.insertBefore(this._buildHistoryItem(allSessions[i], cases), moreBtn);
           }
           moreBtn.remove();
         });
@@ -929,11 +1082,21 @@ Object.assign(CodemanApp.prototype, {
       }
       const name = `w${startNumber}-${dirName}`;
 
-      // Create session with resumeSessionId
+      // Create session with resumeSessionId — include envOverrides so resumed
+      // conversations inherit current UI settings (effort, agent teams, etc.).
+      // Match by path (not basename) so linked/renamed cases still resolve correctly.
+      const matchingCase = (this.cases || []).find((c) => c.path === workingDir);
+      const caseName = matchingCase?.name || workingDir.split('/').pop() || '';
+      const envOverrides = this.buildEnvOverrides(this.getCaseSettings(caseName), this.loadAppSettingsFromStorage());
       const createRes = await fetch('/api/sessions', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ workingDir, name, resumeSessionId: sessionId }),
+        body: JSON.stringify({
+          workingDir,
+          name,
+          resumeSessionId: sessionId,
+          ...(Object.keys(envOverrides).length > 0 ? { envOverrides } : {}),
+        }),
       });
       const createData = await createRes.json();
       if (!createData.success) throw new Error(createData.error);
@@ -1026,7 +1189,7 @@ Object.assign(CodemanApp.prototype, {
 
     if (!this.writeFrameScheduled) {
       this.writeFrameScheduled = true;
-      requestAnimationFrame(() => {
+      this._safeYield(() => {
         // xterm.js 6.0 handles DEC 2026 sync markers natively — it buffers
         // content between 2026h/2026l and renders atomically. No need for
         // client-side incomplete-block detection; just flush every frame.
@@ -1051,7 +1214,7 @@ Object.assign(CodemanApp.prototype, {
     // Trigger a normal flush
     if (!this.writeFrameScheduled) {
       this.writeFrameScheduled = true;
-      requestAnimationFrame(() => {
+      this._safeYield(() => {
         this.flushPendingWrites();
         this.writeFrameScheduled = false;
       });
@@ -1139,7 +1302,7 @@ Object.assign(CodemanApp.prototype, {
       deferred = true;
       if (!this.writeFrameScheduled) {
         this.writeFrameScheduled = true;
-        requestAnimationFrame(() => {
+        this._safeYield(() => {
           this.flushPendingWrites();
           this.writeFrameScheduled = false;
         });
@@ -1211,9 +1374,70 @@ Object.assign(CodemanApp.prototype, {
     }
   },
 
+  /**
+   * Schedule cb via THREE racing primitives so data-pacing makes progress
+   * regardless of which scheduling primitive Chrome is throttling:
+   *   1. requestAnimationFrame — primary, fires at compositor rate
+   *      (may be 0Hz when window is occluded / on backgrounded monitor).
+   *   2. setTimeout(50) — fallback for occluded-but-visible windows
+   *      (clamped to 1Hz by Chrome's intensive wake-up throttling
+   *      after ~5 min of no user interaction).
+   *   3. Worker postMessage — bypasses intensive throttling entirely;
+   *      Workers are not subject to background-tab / idle-tab throttling
+   *      (the React Scheduler trick).
+   * Whichever fires first wins; the others are no-ops thanks to the
+   * `done` guard. Without all three, chunkedTerminalWrite and the deferred
+   * path of flushPendingWrites stall indefinitely when the substrate is
+   * degraded (visible-but-occluded window, OR idle-throttled tab, OR
+   * background tab on a different monitor).
+   */
+  _safeYield(cb) {
+    let done = false;
+    const wrapped = () => {
+      if (done) return;
+      done = true;
+      cb();
+    };
+    requestAnimationFrame(wrapped);
+    setTimeout(wrapped, 50);
+    this._workerYield(wrapped);
+  },
+
+  /**
+   * Lazy-init a tiny "tick" worker whose only job is to postMessage back to
+   * us as fast as possible, escaping main-thread throttling. The worker's
+   * setTimeout(0) is not subject to Chrome's intensive wake-up throttling
+   * even when the parent tab is idle.
+   */
+  _workerYield(cb) {
+    try {
+      if (this._yieldWorker === undefined) {
+        // First call: build the worker (or mark unavailable). Each
+        // postMessage in produces exactly one postMessage out — we count on
+        // FIFO 1:1 to drain queue entries.
+        const src = "onmessage=()=>setTimeout(()=>postMessage(0),0);";
+        const blob = new Blob([src], { type: 'application/javascript' });
+        const url = URL.createObjectURL(blob);
+        this._yieldWorker = new Worker(url);
+        URL.revokeObjectURL(url);
+        this._yieldQueue = [];
+        this._yieldWorker.onmessage = () => {
+          const fn = this._yieldQueue.shift();
+          if (fn) fn();
+        };
+      }
+      if (!this._yieldWorker) return;
+      this._yieldQueue.push(cb);
+      this._yieldWorker.postMessage(0);
+    } catch {
+      this._yieldWorker = null; // mark unavailable, future calls skip
+    }
+  },
+
   /**
    * Write large buffer to terminal in chunks to avoid UI jank.
-   * Uses requestAnimationFrame to spread work across frames.
+   * Uses _safeYield to spread work across frames; falls back to setTimeout
+   * and a tick-Worker so progress continues on occluded / idle-throttled tabs.
    * @param {string} buffer - The full terminal buffer to write
    * @param {number} chunkSize - Size of each chunk (default 128KB for smooth 60fps)
    * @returns {Promise<void>} - Resolves when all chunks written
@@ -1272,7 +1496,7 @@ Object.assign(CodemanApp.prototype, {
             `[CRASH-DIAG] chunkedTerminalWrite complete: ${cleanBuffer.length} bytes in ${_chunkCount} chunks, ${_totalMs.toFixed(0)}ms total`
           );
           // Wait one more frame for xterm to finish rendering before resolving
-          requestAnimationFrame(finish);
+          this._safeYield(finish);
           return;
         }
 
@@ -1287,12 +1511,13 @@ Object.assign(CodemanApp.prototype, {
           );
         offset += chunkSize;
 
-        // Schedule next chunk on next frame
-        requestAnimationFrame(writeChunk);
+        // Schedule next chunk; rAF if possible, else setTimeout/Worker
+        // fallback so progress doesn't stall on occluded/unfocused windows.
+        this._safeYield(writeChunk);
       };
 
       // Start writing
-      requestAnimationFrame(writeChunk);
+      this._safeYield(writeChunk);
     });
   },
 

src/web/routes/clipboard-routes.ts

@@ -0,0 +1,24 @@
+/**
+ * @fileoverview Clipboard routes.
+ * Accepts text via POST and broadcasts to connected browsers for clipboard write.
+ */
+
+import { FastifyInstance } from 'fastify';
+import { SseEvent } from '../sse-events.js';
+import type { EventPort } from '../ports/index.js';
+
+export function registerClipboardRoutes(app: FastifyInstance, ctx: EventPort): void {
+  app.post('/api/clipboard', async (req) => {
+    const body = req.body as { text?: string; sessionId?: string };
+    const text = body?.text;
+    if (typeof text !== 'string' || text.length === 0) {
+      return { success: false, error: 'Missing or empty "text" field' };
+    }
+    ctx.broadcast(SseEvent.ClipboardWrite, {
+      text,
+      sessionId: body.sessionId ?? null,
+      timestamp: Date.now(),
+    });
+    return { success: true };
+  });
+}

src/web/routes/hook-event-routes.ts

@@ -43,6 +43,14 @@ export function registerHookEventRoutes(
       }
     }
 
+    // Sync Claude's current conversation id. Interactive PTY mode never emits
+    // `session_id` on stdout, so hooks are the only reliable way to learn that
+    // the user ran `/clear` (which spins up a new conversation jsonl).
+    if (data && typeof data.session_id === 'string' && data.session_id) {
+      const session = ctx.sessions.get(sessionId);
+      session?.adoptClaudeSessionId(data.session_id);
+    }
+
     // Sanitize forwarded data: only include known safe fields, limit size
     const safeData = sanitizeHookData(data);
     ctx.broadcast(`hook:${event}`, { sessionId, timestamp: Date.now(), ...safeData });

src/web/routes/index.ts

@@ -15,4 +15,5 @@ export { registerRespawnRoutes } from './respawn-routes.js';
 export { registerRalphRoutes } from './ralph-routes.js';
 export { registerPlanRoutes } from './plan-routes.js';
 export { registerOrchestratorRoutes } from './orchestrator-routes.js';
+export { registerClipboardRoutes } from './clipboard-routes.js';
 export { registerWsRoutes } from './ws-routes.js';

src/web/routes/ralph-routes.ts

@@ -14,7 +14,7 @@ import { RespawnController } from '../../respawn-controller.js';
 import { RalphConfigSchema, FixPlanImportSchema, RalphPromptWriteSchema, RalphLoopStartSchema } from '../schemas.js';
 import { SseEvent } from '../sse-events.js';
 import { autoConfigureRalph, CASES_DIR, SETTINGS_PATH, findSessionOrFail, parseBody } from '../route-helpers.js';
-import { writeHooksConfig } from '../../hooks-config.js';
+import { writeHooksConfig, stripCaseEnvKeys } from '../../hooks-config.js';
 import { generateClaudeMd } from '../../templates/claude-md.js';
 import { getLifecycleLog } from '../../session-lifecycle-log.js';
 import type { SessionPort, EventPort, RespawnPort, ConfigPort, InfraPort } from '../ports/index.js';
@@ -268,10 +268,8 @@ export function registerRalphRoutes(
       );
     }
 
-    const { caseName, taskDescription, completionPhrase, maxIterations, enableRespawn, planItems } = parseBody(
-      RalphLoopStartSchema,
-      req.body
-    );
+    const { caseName, taskDescription, completionPhrase, maxIterations, enableRespawn, planItems, envOverrides } =
+      parseBody(RalphLoopStartSchema, req.body);
 
     const casePath = join(CASES_DIR, caseName);
 
@@ -298,6 +296,11 @@ export function registerRalphRoutes(
       }
     }
 
+    // Strip stale disk entries for keys this request is actively setting.
+    if (envOverrides && Object.keys(envOverrides).length > 0) {
+      await stripCaseEnvKeys(casePath, Object.keys(envOverrides));
+    }
+
     // Create session
     const niceConfig = await ctx.getGlobalNiceConfig();
     const rlModelConfig = await ctx.getModelConfig();
@@ -311,6 +314,7 @@ export function registerRalphRoutes(
       model: rlModelConfig?.defaultModel || undefined,
       claudeMode: rlClaudeModeConfig.claudeMode,
       allowedTools: rlClaudeModeConfig.allowedTools,
+      envOverrides,
     });
 
     // Configure Ralph tracker

src/web/routes/session-routes.ts

@@ -5,7 +5,7 @@
  */
 
 import { FastifyInstance } from 'fastify';
-import { join, dirname } from 'node:path';
+import { join, dirname, extname } from 'node:path';
 import { homedir } from 'node:os';
 import { existsSync, statSync, mkdirSync, writeFileSync } from 'node:fs';
 import { execFile } from 'node:child_process';
@@ -44,7 +44,7 @@ import {
   validatePathWithinBase,
 } from '../route-helpers.js';
 import { AUTH_COOKIE_NAME } from '../middleware/auth.js';
-import { writeHooksConfig, updateCaseEnvVars, updateCaseModel } from '../../hooks-config.js';
+import { writeHooksConfig, updateCaseModel, stripCaseEnvKeys } from '../../hooks-config.js';
 import { generateClaudeMd } from '../../templates/claude-md.js';
 import { imageWatcher } from '../../image-watcher.js';
 import { getLifecycleLog } from '../../session-lifecycle-log.js';
@@ -66,48 +66,60 @@ const LEADING_WHITESPACE_PATTERN = /^[\s\r\n]+/;
 
 /**
  * Strip redundant Ink spinner/status-bar redraw frames from the terminal buffer.
- * Ink (Claude Code's TUI) uses absolute cursor positioning (CSI n d = VPA, CSI n;m H = CUP)
- * to animate the spinner and update the status bar. During long thinking phases, these frames
- * accumulate to 500KB+ of repeated overwrites to the same rows. When the buffer is tailed,
- * only spinner frames are returned, making the terminal appear empty.
+ * Ink (Claude Code's TUI) uses absolute cursor positioning (CSI n d = VPA) to animate
+ * the spinner and update the status bar. During long thinking phases, these frames
+ * accumulate to 500KB+ of repeated overwrites to the same rows.
  *
- * Strategy: find where absolute-positioned redraws begin (first VPA sequence), then keep
- * only the last ~4KB of redraw frames (the final visual state) and discard the rest.
+ * Strategy: detect "redraw clusters" — dense runs of VPA escapes where each is within
+ * FRAME_GAP bytes of the previous (i.e. continuous rerendering of the same UI region).
+ * Collapse each big cluster down to just the bytes from its last VPA onwards (the final
+ * frame). Content *between* clusters (Claude's streamed response text) is preserved.
+ *
+ * Without clustering, a single first-VPA-finds-all approach would discard the entire
+ * conversation after Claude's first render — losing 100KB+ of legitimate scrollback.
  */
-function stripInkRedrawBloat(buffer: string): string {
-  // Find where Ink's absolute-positioned redraws start (first CSI n d = VPA)
+export function stripInkRedrawBloat(buffer: string): string {
   // eslint-disable-next-line no-control-regex
-  const firstVPA = buffer.search(/\x1b\[\d+d/);
-  if (firstVPA === -1) return buffer; // No Ink redraws
-
-  const contentPart = buffer.slice(0, firstVPA);
-  const redrawPart = buffer.slice(firstVPA);
-
-  // If the redraw section is small (<16KB), not worth stripping
-  if (redrawPart.length < 16384) return buffer;
-
-  // Find the last complete Ink frame by searching for where the VPA row
-  // number drops (cursor jumps back to viewport top for a new render cycle).
-  // Search the last 64KB — a single Ink frame with response content can be
-  // 10-20KB, so 4KB was too small and caused partial frames (blank gap).
-  const searchLen = Math.min(redrawPart.length, 65536);
-  const searchWindow = redrawPart.slice(-searchLen);
-
-  // eslint-disable-next-line no-control-regex
-  const vpaRe = /\x1b\[(\d+)d/g;
-  let lastFrameStart = 0;
-  let prevRow = -1;
-  let match;
-  while ((match = vpaRe.exec(searchWindow)) !== null) {
-    const row = parseInt(match[1], 10);
-    // Row number dropped significantly — Ink started a new frame
-    if (prevRow > 0 && row < prevRow - 5) {
-      lastFrameStart = match.index;
-    }
-    prevRow = row;
+  const vpaRe = /\x1b\[\d+d/g;
+  const positions: number[] = [];
+  let m: RegExpExecArray | null;
+  while ((m = vpaRe.exec(buffer)) !== null) {
+    positions.push(m.index);
   }
+  if (positions.length < 10) return buffer; // Too few VPAs to be bloat
 
-  return contentPart + searchWindow.slice(lastFrameStart);
+  // Group consecutive VPAs into clusters separated by gaps > FRAME_GAP.
+  // Within a cluster, VPAs are close together (continuous rerenders).
+  // Between clusters, real terminal output (response text) lives.
+  const FRAME_GAP = 8 * 1024; // 8KB — one Ink frame is typically 1-4KB
+  const MIN_BLOAT_SIZE = 32 * 1024; // Only collapse clusters spanning >= 32KB
+
+  const clusters: { start: number; end: number }[] = [];
+  let cs = positions[0];
+  let ce = positions[0];
+  for (let i = 1; i < positions.length; i++) {
+    if (positions[i] - ce <= FRAME_GAP) {
+      ce = positions[i];
+    } else {
+      clusters.push({ start: cs, end: ce });
+      cs = positions[i];
+      ce = positions[i];
+    }
+  }
+  clusters.push({ start: cs, end: ce });
+
+  // For each big cluster, replace [start..end] with the bytes from `end` onwards
+  // (which contains the last frame's content up to where the next cluster, or
+  // post-cluster content, begins).
+  const parts: string[] = [];
+  let cursor = 0;
+  for (const cl of clusters) {
+    if (cl.end - cl.start < MIN_BLOAT_SIZE) continue;
+    parts.push(buffer.slice(cursor, cl.start));
+    cursor = cl.end;
+  }
+  parts.push(buffer.slice(cursor));
+  return parts.join('');
 }
 
 export function registerSessionRoutes(
@@ -166,9 +178,21 @@ export function registerSessionRoutes(
       }
     }
 
-    // Write env overrides to .claude/settings.local.json if provided
-    if (body.envOverrides && Object.keys(body.envOverrides).length > 0) {
-      await updateCaseEnvVars(workingDir, body.envOverrides);
+    // envOverrides flow through Session → tmux setenv (ephemeral, per-session).
+    //
+    // For keys the caller is actively setting, strip any stale disk entry a prior
+    // Codeman version may have written. Scope limited to:
+    //   - Claude mode (OpenCode doesn't read .claude/settings.local.json)
+    //   - workingDir inside CASES_DIR (Codeman's managed territory — we never mutate
+    //     .claude/settings.local.json in arbitrary user repos that POST /api/sessions
+    //     can target, because those may have hand-authored values).
+    const canStripDisk =
+      body.mode !== 'opencode' &&
+      body.envOverrides &&
+      Object.keys(body.envOverrides).length > 0 &&
+      workingDir.startsWith(CASES_DIR + '/');
+    if (canStripDisk) {
+      await stripCaseEnvKeys(workingDir, Object.keys(body.envOverrides!));
     }
 
     // Write model override to .claude/settings.local.json if provided
@@ -239,6 +263,7 @@ export function registerSessionRoutes(
       allowedTools: claudeModeConfig.allowedTools,
       openCodeConfig: mode === 'opencode' ? body.openCodeConfig : undefined,
       resumeSessionId: validatedResumeId,
+      envOverrides: body.envOverrides,
     });
 
     ctx.addSession(session);
@@ -582,15 +607,99 @@ export function registerSessionRoutes(
 
   // ========== Get Last Response (from transcript JSONL) ==========
 
+  // Resolves the most recent Claude conversation id for a session's cwd by
+  // tailing ~/.claude/history.jsonl. After `/clear`, Claude Code keeps writing
+  // to a new <uuid>.jsonl; history.jsonl is the only source-of-truth update
+  // that does not rely on project-local hooks (we intentionally don't install
+  // hooks in arbitrary user repos, see the POST /api/sessions comment).
+  //
+  // Entries from OTHER Codeman sessions in the same cwd are filtered out by
+  // their known claudeSessionIds so concurrent tabs don't shadow each other,
+  // as long as each has had its id resolved at least once.
+  async function resolveActiveClaudeSessionIdFromHistory(
+    session: Session,
+    projectsDir: string
+  ): Promise<string | null> {
+    const historyPath = join(homedir(), '.claude', 'history.jsonl');
+    const otherClaudeIds = new Set<string>();
+    for (const s of ctx.sessions.values()) {
+      if (s.id !== session.id && s.workingDir === session.workingDir && s.claudeSessionId) {
+        otherClaudeIds.add(s.claudeSessionId);
+      }
+    }
+
+    let candidateSid: string | null = null;
+    try {
+      const content = await fs.readFile(historyPath, 'utf8');
+      const lines = content.split('\n');
+      for (let i = lines.length - 1; i >= 0; i--) {
+        const line = lines[i];
+        if (!line) continue;
+        try {
+          const entry = JSON.parse(line) as { project?: string; sessionId?: string };
+          if (
+            entry.project === session.workingDir &&
+            typeof entry.sessionId === 'string' &&
+            !otherClaudeIds.has(entry.sessionId)
+          ) {
+            candidateSid = entry.sessionId;
+            break;
+          }
+        } catch {
+          // Skip unparseable lines
+        }
+      }
+    } catch {
+      return null;
+    }
+    if (!candidateSid || candidateSid === session.id) return candidateSid;
+
+    // Safety: only adopt if the candidate's jsonl is more recently written
+    // than our initial conversation's jsonl. Blocks stale ids inherited from
+    // a prior Codeman session that happened to share this cwd.
+    try {
+      const projectDirs = await fs.readdir(projectsDir);
+      let candidateMtime = 0;
+      let initialMtime = 0;
+      for (const projDir of projectDirs) {
+        try {
+          const cs = await fs.stat(join(projectsDir, projDir, `${candidateSid}.jsonl`));
+          if (cs.mtimeMs > candidateMtime) candidateMtime = cs.mtimeMs;
+        } catch {
+          /* not in this dir */
+        }
+        try {
+          const is = await fs.stat(join(projectsDir, projDir, `${session.id}.jsonl`));
+          if (is.mtimeMs > initialMtime) initialMtime = is.mtimeMs;
+        } catch {
+          /* not in this dir */
+        }
+      }
+      if (candidateMtime === 0) return null;
+      if (initialMtime > 0 && candidateMtime <= initialMtime) return null;
+    } catch {
+      return null;
+    }
+    return candidateSid;
+  }
+
   app.get('/api/sessions/:id/last-response', async (req) => {
     const { id } = req.params as { id: string };
     const session = findSessionOrFail(ctx, id);
 
-    // The Claude conversation ID (used as JSONL filename)
-    const claudeSessionId = session.claudeSessionId || session.id;
-
     // Scan ~/.claude/projects/*/ for the transcript file
     const projectsDir = join(process.env.HOME || '/tmp', '.claude', 'projects');
+
+    // Adopt the current conversation id if the user ran `/clear` — Claude CLI's
+    // interactive PTY emits no JSON on stdout, so without this lookup the
+    // stored id stays pinned to the pre-/clear transcript.
+    const activeId = await resolveActiveClaudeSessionIdFromHistory(session, projectsDir);
+    if (activeId && activeId !== session.claudeSessionId) {
+      session.adoptClaudeSessionId(activeId);
+    }
+
+    // The Claude conversation ID (used as JSONL filename)
+    const claudeSessionId = session.claudeSessionId || session.id;
     let transcriptText = '';
     let transcriptTimestamp = '';
 
@@ -854,7 +963,11 @@ export function registerSessionRoutes(
       );
     }
 
-    const { prompt, workingDir } = parseBody(QuickRunSchema, req.body, 'Invalid request body');
+    const {
+      prompt,
+      workingDir,
+      envOverrides: runEnvOverrides,
+    } = parseBody(QuickRunSchema, req.body, 'Invalid request body');
 
     if (!prompt.trim()) {
       return createErrorResponse(ApiErrorCode.INVALID_INPUT, 'prompt is required');
@@ -873,7 +986,7 @@ export function registerSessionRoutes(
       }
     }
 
-    const session = new Session({ workingDir: dir });
+    const session = new Session({ workingDir: dir, envOverrides: runEnvOverrides });
     ctx.addSession(session);
     ctx.store.incrementSessionsCreated();
     ctx.persistSessionState(session);
@@ -910,7 +1023,12 @@ export function registerSessionRoutes(
       );
     }
 
-    const { caseName = 'testcase', mode = 'claude', openCodeConfig } = parseBody(QuickStartSchema, req.body);
+    const {
+      caseName = 'testcase',
+      mode = 'claude',
+      openCodeConfig,
+      envOverrides,
+    } = parseBody(QuickStartSchema, req.body);
 
     // Check OpenCode availability if requested
     if (mode === 'opencode') {
@@ -962,6 +1080,12 @@ export function registerSessionRoutes(
       }
     }
 
+    // Strip stale disk entries for keys this request is actively setting (Claude only —
+    // see POST /api/sessions for full rationale).
+    if (mode !== 'opencode' && envOverrides && Object.keys(envOverrides).length > 0) {
+      await stripCaseEnvKeys(casePath, Object.keys(envOverrides));
+    }
+
     // Create a new session with the case as working directory
     // Apply global Nice priority config and model config from settings
     const niceConfig = await ctx.getGlobalNiceConfig();
@@ -983,6 +1107,7 @@ export function registerSessionRoutes(
       claudeMode: qsClaudeModeConfig.claudeMode,
       allowedTools: qsClaudeModeConfig.allowedTools,
       openCodeConfig: mode === 'opencode' ? openCodeConfig : undefined,
+      envOverrides,
     });
 
     // Auto-detect completion phrase from CLAUDE.md BEFORE broadcasting
@@ -1312,4 +1437,109 @@ export function registerSessionRoutes(
 
     return { sessions: results.slice(0, 50) };
   });
+
+  // ═══════════════════════════════════════════════════════════════
+  // Paste Image (clipboard / drag-drop upload)
+  // ═══════════════════════════════════════════════════════════════
+
+  const MAX_PASTE_IMAGE_SIZE = 10 * 1024 * 1024; // 10 MB
+  const ALLOWED_IMAGE_EXTS = new Set(['.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp']);
+
+  app.post('/api/sessions/:id/paste-image', async (req, reply) => {
+    const { id } = req.params as { id: string };
+    const session = findSessionOrFail(ctx, id);
+
+    const contentType = req.headers['content-type'] ?? '';
+    if (!contentType.includes('multipart/form-data')) {
+      reply.code(400);
+      return createErrorResponse(ApiErrorCode.INVALID_INPUT, 'Expected multipart/form-data');
+    }
+
+    // Parse multipart boundary
+    const boundaryMatch = contentType.match(/boundary=(.+?)(?:;|$)/);
+    if (!boundaryMatch) {
+      reply.code(400);
+      return createErrorResponse(ApiErrorCode.INVALID_INPUT, 'Missing boundary');
+    }
+
+    // Collect raw body with size limit
+    const chunks: Buffer[] = [];
+    let totalSize = 0;
+    for await (const chunk of req.raw) {
+      totalSize += chunk.length;
+      if (totalSize > MAX_PASTE_IMAGE_SIZE) {
+        reply.code(413);
+        return createErrorResponse(ApiErrorCode.INVALID_INPUT, 'File too large (max 10MB)');
+      }
+      chunks.push(chunk as Buffer);
+    }
+    const body = Buffer.concat(chunks);
+
+    // Extract image from multipart body
+    const boundary = '--' + boundaryMatch[1];
+    const boundaryBuf = Buffer.from(boundary);
+    const parts: { headers: string; data: Buffer }[] = [];
+    let pos = 0;
+
+    while (pos < body.length) {
+      const start = body.indexOf(boundaryBuf, pos);
+      if (start === -1) break;
+      const afterBoundary = start + boundaryBuf.length;
+      if (body[afterBoundary] === 0x2d && body[afterBoundary + 1] === 0x2d) break;
+      const headerStart = afterBoundary + 2;
+      const headerEnd = body.indexOf(Buffer.from('\r\n\r\n'), headerStart);
+      if (headerEnd === -1) break;
+      const headers = body.subarray(headerStart, headerEnd).toString();
+      const dataStart = headerEnd + 4;
+      const nextBoundary = body.indexOf(boundaryBuf, dataStart);
+      const dataEnd = nextBoundary === -1 ? body.length : nextBoundary - 2;
+      parts.push({ headers, data: body.subarray(dataStart, dataEnd) });
+      pos = nextBoundary === -1 ? body.length : nextBoundary;
+    }
+
+    const imagePart = parts.find((p) => p.headers.includes('name="image"'));
+    if (!imagePart || imagePart.data.length === 0) {
+      reply.code(400);
+      return createErrorResponse(ApiErrorCode.INVALID_INPUT, 'No image uploaded');
+    }
+
+    // Determine extension from filename or Content-Type
+    let ext = '.png';
+    const filenameMatch = imagePart.headers.match(/filename="(.+?)"/);
+    if (filenameMatch) {
+      const origExt = extname(filenameMatch[1]).toLowerCase();
+      if (ALLOWED_IMAGE_EXTS.has(origExt)) ext = origExt;
+    }
+    const ctMatch = imagePart.headers.match(/Content-Type:\s*image\/(png|jpeg|jpg|webp|gif|bmp)/i);
+    if (ctMatch) {
+      const map: Record<string, string> = {
+        png: '.png',
+        jpeg: '.jpg',
+        jpg: '.jpg',
+        webp: '.webp',
+        gif: '.gif',
+        bmp: '.bmp',
+      };
+      ext = map[ctMatch[1].toLowerCase()] ?? ext;
+    }
+
+    if (!ALLOWED_IMAGE_EXTS.has(ext)) {
+      reply.code(400);
+      return createErrorResponse(
+        ApiErrorCode.INVALID_INPUT,
+        `Unsupported image type: ${ext}. Allowed: ${[...ALLOWED_IMAGE_EXTS].join(', ')}`
+      );
+    }
+
+    // Save to {workingDir}/.claude-images/
+    const imageDir = join(session.workingDir, '.claude-images');
+    if (!existsSync(imageDir)) {
+      mkdirSync(imageDir, { recursive: true });
+    }
+    const filename = `paste-${Date.now()}${ext}`;
+    const filepath = join(imageDir, filename);
+    await fs.writeFile(filepath, imagePart.data);
+
+    return { success: true, path: filepath, filename };
+  });
 }

src/web/schemas.ts

@@ -178,6 +178,7 @@ export const QuickStartSchema = z.object({
     .optional(),
   mode: z.enum(['claude', 'shell', 'opencode']).optional(),
   openCodeConfig: OpenCodeConfigSchema,
+  envOverrides: safeEnvOverridesSchema,
 });
 
 // ========== Hook Events ==========
@@ -267,6 +268,8 @@ export const SettingsUpdateSchema = z
     tunnelEnabled: z.boolean().optional(),
     tabTwoRows: z.boolean().optional(),
     agentTeamsEnabled: z.boolean().optional(),
+    opusContext1mEnabled: z.boolean().optional(),
+    thinkingEffort: z.string().max(20).optional(),
     // UI visibility
     showFontControls: z.boolean().optional(),
     showSystemStats: z.boolean().optional(),
@@ -416,6 +419,7 @@ export const FlickerFilterSchema = z.object({
 export const QuickRunSchema = z.object({
   prompt: z.string().min(1).max(100000),
   workingDir: safePathSchema.optional(),
+  envOverrides: safeEnvOverridesSchema,
 });
 
 /** POST /api/scheduled */
@@ -538,6 +542,7 @@ export const RalphLoopStartSchema = z.object({
   completionPhrase: z.string().max(100).default('COMPLETE'),
   maxIterations: z.number().int().min(0).max(1000).nullable().default(10),
   enableRespawn: z.boolean().default(false),
+  envOverrides: safeEnvOverridesSchema,
   planItems: z
     .array(
       z.object({
@@ -549,45 +554,6 @@ export const RalphLoopStartSchema = z.object({
     .optional(),
 });
 
-// ========== Inferred Types ==========
-
-export type CreateSessionInput = z.infer<typeof CreateSessionSchema>;
-export type RunPromptInput = z.infer<typeof RunPromptSchema>;
-export type ResizeInput = z.infer<typeof ResizeSchema>;
-export type CreateCaseInput = z.infer<typeof CreateCaseSchema>;
-export type QuickStartInput = z.infer<typeof QuickStartSchema>;
-export type HookEventInput = z.infer<typeof HookEventSchema>;
-export type RespawnConfigInput = z.infer<typeof RespawnConfigSchema>;
-export type ConfigUpdateInput = z.infer<typeof ConfigUpdateSchema>;
-export type SettingsUpdateInput = z.infer<typeof SettingsUpdateSchema>;
-export type SessionInputWithLimitInput = z.infer<typeof SessionInputWithLimitSchema>;
-export type SessionNameInput = z.infer<typeof SessionNameSchema>;
-export type SessionColorInput = z.infer<typeof SessionColorSchema>;
-export type RalphConfigInput = z.infer<typeof RalphConfigSchema>;
-export type FixPlanImportInput = z.infer<typeof FixPlanImportSchema>;
-export type RalphPromptWriteInput = z.infer<typeof RalphPromptWriteSchema>;
-export type AutoClearInput = z.infer<typeof AutoClearSchema>;
-export type AutoCompactInput = z.infer<typeof AutoCompactSchema>;
-export type ImageWatcherInput = z.infer<typeof ImageWatcherSchema>;
-export type FlickerFilterInput = z.infer<typeof FlickerFilterSchema>;
-export type QuickRunInput = z.infer<typeof QuickRunSchema>;
-export type ScheduledRunInput = z.infer<typeof ScheduledRunSchema>;
-export type LinkCaseInput = z.infer<typeof LinkCaseSchema>;
-export type GeneratePlanInput = z.infer<typeof GeneratePlanSchema>;
-export type GeneratePlanDetailedInput = z.infer<typeof GeneratePlanDetailedSchema>;
-export type CancelPlanInput = z.infer<typeof CancelPlanSchema>;
-export type PlanTaskUpdateInput = z.infer<typeof PlanTaskUpdateSchema>;
-export type PlanTaskAddInput = z.infer<typeof PlanTaskAddSchema>;
-export type CpuLimitInput = z.infer<typeof CpuLimitSchema>;
-export type ModelConfigUpdateInput = z.infer<typeof ModelConfigUpdateSchema>;
-export type SubagentWindowStatesInput = z.infer<typeof SubagentWindowStatesSchema>;
-export type SubagentParentMapInput = z.infer<typeof SubagentParentMapSchema>;
-export type InteractiveRespawnInput = z.infer<typeof InteractiveRespawnSchema>;
-export type RespawnEnableInput = z.infer<typeof RespawnEnableSchema>;
-export type PushSubscribeInput = z.infer<typeof PushSubscribeSchema>;
-export type PushPreferencesUpdateInput = z.infer<typeof PushPreferencesUpdateSchema>;
-export type RalphLoopStartInput = z.infer<typeof RalphLoopStartSchema>;
-
 // ========== Orchestrator Loop ==========
 
 /** POST /api/orchestrator/start */
@@ -612,6 +578,3 @@ export const OrchestratorStartSchema = z.object({
 export const OrchestratorRejectSchema = z.object({
   feedback: z.string().min(1).max(10000),
 });
-
-export type OrchestratorStartInput = z.infer<typeof OrchestratorStartSchema>;
-export type OrchestratorRejectInput = z.infer<typeof OrchestratorRejectSchema>;

src/web/server.ts

@@ -34,13 +34,13 @@ import fastifyStatic from '@fastify/static';
 import fastifyWebsocket from '@fastify/websocket';
 import { join, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { existsSync, mkdirSync, readFileSync, chmodSync } from 'node:fs';
+import { existsSync, mkdirSync, readFileSync, chmodSync, rmSync } from 'node:fs';
 import fs from 'node:fs/promises';
 import { execSync } from 'node:child_process';
-import { homedir } from 'node:os';
+import { homedir, hostname as getHostname } from 'node:os';
 import { EventEmitter } from 'node:events';
 import { Session, type BackgroundTask } from '../session.js';
-import type { ClaudeMode } from '../types.js';
+import type { ClaudeMode, SessionState } from '../types.js';
 import { RespawnController, RespawnConfig } from '../respawn-controller.js';
 import type { TerminalMultiplexer } from '../mux-interface.js';
 import { createMultiplexer } from '../mux-factory.js';
@@ -112,12 +112,22 @@ import {
   registerRespawnRoutes,
   registerRalphRoutes,
   registerPlanRoutes,
+  registerClipboardRoutes,
   registerOrchestratorRoutes,
   registerWsRoutes,
 } from './routes/index.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
+// Bounded, predictable shape for SSE client identifiers: alphanumerics, `_`, `-`.
+// Length range covers crypto.randomUUID() (36 chars) plus any short stable IDs,
+// while capping growth of `sseClientsById` and blocking pathological inputs.
+const SSE_CLIENT_ID_RE = /^[A-Za-z0-9_-]{8,64}$/;
+
+function escapeHtmlText(value: string): string {
+  return value.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+}
+
 import {
   SESSIONS_LIST_CACHE_TTL,
   SCHEDULED_CLEANUP_INTERVAL,
@@ -225,12 +235,18 @@ export class WebServer extends EventEmitter {
     teamRemoved: (config: unknown) => void;
     taskUpdated: (data: unknown) => void;
   } | null = null;
-  constructor(port: number = 3000, https: boolean = false, testMode: boolean = false) {
+  private readonly titleHostname: string;
+  private readonly windowTitle: string;
+  private readonly indexHtmlTemplate: string;
+  constructor(port: number = 3000, https: boolean = false, testMode: boolean = false, titleHostname?: string) {
     super();
     this.setMaxListeners(0);
     this.port = port;
     this.https = https;
     this.testMode = testMode;
+    this.titleHostname = titleHostname || getHostname();
+    this.windowTitle = `codeman:${this.titleHostname}`;
+    this.indexHtmlTemplate = readFileSync(join(__dirname, 'public', 'index.html'), 'utf-8');
 
     if (https) {
       const { key, cert } = getOrCreateSelfSignedCert();
@@ -525,6 +541,12 @@ export class WebServer extends EventEmitter {
 
     // Security headers + CORS
     registerSecurityHeaders(this.app, this.https);
+    this.app.get('/', async (_req, reply) => {
+      return reply.header('Cache-Control', 'no-cache').type('text/html; charset=utf-8').send(this.renderIndexHtml());
+    });
+    this.app.get('/index.html', async (_req, reply) => {
+      return reply.header('Cache-Control', 'no-cache').type('text/html; charset=utf-8').send(this.renderIndexHtml());
+    });
     // Service worker must never be cached — browsers check for SW updates on navigation
     this.app.get('/sw.js', async (_req, reply) => {
       return reply
@@ -562,9 +584,11 @@ export class WebServer extends EventEmitter {
       }
 
       // Parse optional session subscription filter from query parameter.
-      // /api/events?sessions=id1,id2 — client only receives events for those sessions.
-      // /api/events (no param) — client receives all events (backwards-compatible).
-      const query = req.query as { sessions?: string };
+      // /api/events?sessions=id1,id2 — client only receives session:terminal
+      //   events for those sessions (other events broadcast to all clients).
+      // /api/events?clientId=<uuid> — enables live filter updates via
+      //   POST /api/events/subscribe without reconnecting.
+      const query = req.query as { sessions?: string; clientId?: string };
       let sessionFilter: Set<string> | null = null;
       if (query.sessions) {
         const ids = query.sessions
@@ -575,6 +599,8 @@ export class WebServer extends EventEmitter {
           sessionFilter = new Set(ids);
         }
       }
+      const clientId =
+        typeof query.clientId === 'string' && SSE_CLIENT_ID_RE.test(query.clientId) ? query.clientId : undefined;
 
       reply.raw.writeHead(200, {
         'Content-Type': 'text/event-stream',
@@ -586,7 +612,7 @@ export class WebServer extends EventEmitter {
       // Track tunnel clients — cloudflared proxies locally so req.ip is always
       // 127.0.0.1; detect tunnel traffic via Cf-Connecting-Ip header instead.
       const isRemote = !!req.headers['cf-connecting-ip'];
-      this.sse.addClient(reply, sessionFilter, isRemote);
+      this.sse.addClient(reply, sessionFilter, isRemote, clientId);
 
       // Send initial state
       // Use light state for SSE init to avoid sending 2MB+ terminal buffers
@@ -601,6 +627,22 @@ export class WebServer extends EventEmitter {
       });
     });
 
+    // Live subscription update — change a connected client's session filter
+    // without forcing an SSE reconnect. Body: { clientId, sessions: string[] | null }
+    // Empty/null sessions array = remove filter (receive all session:terminal events).
+    this.app.post('/api/events/subscribe', (req, reply) => {
+      const body = (req.body || {}) as { clientId?: string; sessions?: string[] | null };
+      if (typeof body.clientId !== 'string' || !SSE_CLIENT_ID_RE.test(body.clientId)) {
+        reply.code(400).send({ error: 'clientId required' });
+        return;
+      }
+      const sessions = Array.isArray(body.sessions)
+        ? body.sessions.filter((s) => typeof s === 'string' && s.length > 0 && s.length <= 128).slice(0, 64)
+        : null;
+      const updated = this.sse.updateClientFilter(body.clientId, sessions);
+      reply.code(updated ? 204 : 404).send();
+    });
+
     // Global error handler for structured errors thrown by findSessionOrFail
     this.app.setErrorHandler((error, _req, reply) => {
       const statusCode = (error as { statusCode?: number }).statusCode ?? 500;
@@ -650,6 +692,7 @@ export class WebServer extends EventEmitter {
     registerRespawnRoutes(this.app, ctx);
     registerRalphRoutes(this.app, ctx);
     registerPlanRoutes(this.app, ctx);
+    registerClipboardRoutes(this.app, ctx);
     registerOrchestratorRoutes(this.app, ctx);
     registerWsRoutes(this.app, ctx);
   }
@@ -729,7 +772,11 @@ export class WebServer extends EventEmitter {
 
   /** Persists full session state including respawn config to state.json */
   private _persistSessionStateNow(session: Session): void {
-    const state = session.toState();
+    // See session-manager.updateSessionState: __envOverrides is an internal disk-only
+    // field kept off SessionState to avoid leaking via API broadcasts.
+    const base = session.toState();
+    const envOverrides = session.getEnvOverridesForPersist();
+    const state = (envOverrides ? { ...base, __envOverrides: envOverrides } : base) as SessionState;
     const controller = this.respawnControllers.get(session.id);
     if (controller) {
       const config = controller.getConfig();
@@ -904,6 +951,15 @@ export class WebServer extends EventEmitter {
       fileStreamManager.closeSessionStreams(sessionId);
       // Stop watching for images in this session's directory
       imageWatcher.unwatchSession(sessionId);
+      // Clean up pasted images directory for this session
+      if (killMux && session.workingDir) {
+        const pasteImageDir = join(session.workingDir, '.claude-images');
+        try {
+          rmSync(pasteImageDir, { recursive: true, force: true });
+        } catch {
+          // Best-effort cleanup
+        }
+      }
       await session.stop(killMux);
       this.sessions.delete(sessionId);
       // Only remove from state.json if we're also killing the mux session.
@@ -916,6 +972,13 @@ export class WebServer extends EventEmitter {
     this.broadcast(SseEvent.SessionDeleted, { id: sessionId });
   }
 
+  private renderIndexHtml(): string {
+    return this.indexHtmlTemplate.replace(
+      '<title>Codeman</title>',
+      `<title>${escapeHtmlText(this.windowTitle)}</title>`
+    );
+  }
+
   private async setupSessionListeners(session: Session): Promise<void> {
     // Create run summary tracker for this session
     const summaryTracker = new RunSummaryTracker(session.id, session.name);
@@ -1408,6 +1471,10 @@ export class WebServer extends EventEmitter {
 
     const payload = JSON.stringify({
       title: template.title,
+      // Hostname-aware prefix so OS-level notifications from multiple Codeman
+      // instances (laptop / dev box / NAS) are unambiguous in the system tray.
+      // Mirrors the in-page Notification format in notification-manager.js.
+      hostTitle: this.windowTitle,
       body,
       tag: `codeman-${event}-${sessionId}`,
       sessionId,
@@ -1629,6 +1696,9 @@ export class WebServer extends EventEmitter {
 
             // Create a session object for this mux session
             const recoveryClaudeMode = await this.getClaudeModeConfig();
+            // Recover envOverrides from the internal __envOverrides field written by
+            // session-manager (see updateSessionState). Cast to read the non-public field.
+            const savedEnvOverrides = (savedState as { __envOverrides?: Record<string, string> })?.__envOverrides;
             const session = new Session({
               id: muxSession.sessionId, // Preserve the original session ID
               workingDir: muxSession.workingDir,
@@ -1639,6 +1709,7 @@ export class WebServer extends EventEmitter {
               muxSession: muxSession, // Pass the existing session so startInteractive() can attach to it
               claudeMode: recoveryClaudeMode.claudeMode,
               allowedTools: recoveryClaudeMode.allowedTools,
+              envOverrides: savedEnvOverrides,
             });
 
             // Update session name if it was a "Restored:" placeholder or doesn't match saved name
@@ -1960,9 +2031,10 @@ export class WebServer extends EventEmitter {
 export async function startWebServer(
   port: number = 3000,
   https: boolean = false,
-  testMode: boolean = false
+  testMode: boolean = false,
+  titleHostname?: string
 ): Promise<WebServer> {
-  const server = new WebServer(port, https, testMode);
+  const server = new WebServer(port, https, testMode, titleHostname);
   await server.start();
   return server;
 }

src/web/session-listener-wiring.ts

@@ -58,7 +58,7 @@ export interface SessionListenerRefs {
 }
 
 /** Dependencies injected by WebServer — keeps listener creation decoupled from server internals. */
-export interface SessionListenerDeps {
+interface SessionListenerDeps {
   broadcast(event: string, data: unknown): void;
   batchTerminalData(sessionId: string, data: string): void;
   batchTaskUpdate(sessionId: string, task: BackgroundTask): void;

src/web/sse-events.ts

@@ -319,6 +319,11 @@ export const OrchestratorCompleted = 'orchestrator:completed' as const;
 /** Orchestrator error. */
 export const OrchestratorError = 'orchestrator:error' as const;
 
+// ─── Clipboard ──────────────────────────────────────────────────────────────
+
+/** Clipboard content pushed to browser. */
+export const ClipboardWrite = 'clipboard:write' as const;
+
 // ─── Cases ───────────────────────────────────────────────────────────────────
 
 /** New case directory created. */
@@ -486,6 +491,9 @@ export const SseEvent = {
   OrchestratorCompleted,
   OrchestratorError,
 
+  // Clipboard
+  ClipboardWrite,
+
   // Cases
   CaseCreated,
   CaseLinked,

src/web/sse-stream-manager.ts

@@ -35,7 +35,7 @@ import {
 const SSE_PADDING = ':' + 'p'.repeat(SSE_PADDING_SIZE) + '\n';
 
 /** Dependencies injected by WebServer — keeps SseStreamManager decoupled from session/respawn state. */
-export interface SseStreamManagerDeps {
+interface SseStreamManagerDeps {
   /** Get session state with respawn info for session:updated broadcasts */
   getSessionStateWithRespawn(sessionId: string): unknown;
 }
@@ -48,6 +48,8 @@ export class SseStreamManager {
    * or `null` meaning "receive all events" (backwards-compatible default).
    */
   private sseClients: Map<FastifyReply, Set<string> | null> = new Map();
+  /** Optional client-supplied IDs → reply, for live filter updates without reconnecting */
+  private sseClientsById: Map<string, FastifyReply> = new Map();
   /** SSE clients connecting from non-localhost (i.e. through tunnel) */
   private remoteSseClients: Set<FastifyReply> = new Set();
   /** Clients with backpressure — skip writes until 'drain' fires */
@@ -103,17 +105,43 @@ export class SseStreamManager {
     this._isTunnelActive = active;
   }
 
-  addClient(reply: FastifyReply, sessionFilter: Set<string> | null, isRemote: boolean): void {
+  addClient(reply: FastifyReply, sessionFilter: Set<string> | null, isRemote: boolean, clientId?: string): void {
     this.sseClients.set(reply, sessionFilter);
     if (isRemote) {
       this.remoteSseClients.add(reply);
     }
+    if (clientId) {
+      // If a previous reply registered the same id (reconnect), drop the old one.
+      const prev = this.sseClientsById.get(clientId);
+      if (prev && prev !== reply) {
+        this.sseClients.delete(prev);
+        this.remoteSseClients.delete(prev);
+        this.backpressuredClients.delete(prev);
+      }
+      this.sseClientsById.set(clientId, reply);
+    }
   }
 
   removeClient(reply: FastifyReply): void {
     this.sseClients.delete(reply);
     this.remoteSseClients.delete(reply);
     this.backpressuredClients.delete(reply);
+    // Clear any clientId mappings pointing at this reply
+    for (const [id, r] of this.sseClientsById) {
+      if (r === reply) this.sseClientsById.delete(id);
+    }
+  }
+
+  /**
+   * Update an existing client's session subscription filter without forcing
+   * an SSE reconnect. Returns true if the client was found and updated.
+   */
+  updateClientFilter(clientId: string, sessions: string[] | null): boolean {
+    const reply = this.sseClientsById.get(clientId);
+    if (!reply || !this.sseClients.has(reply)) return false;
+    const filter = sessions && sessions.length > 0 ? new Set(sessions) : null;
+    this.sseClients.set(reply, filter);
+    return true;
   }
 
   /** Send a single SSE event to a specific client. */
@@ -188,35 +216,18 @@ export class SseStreamManager {
       console.error(`[Server] Failed to serialize SSE event "${event}":`, err);
       return;
     }
-    // Extract sessionId from event data for subscription filtering.
-    const eventSessionId = this.extractSessionId(event, data);
-
-    for (const [client, filter] of this.sseClients) {
-      // No filter (null) = receive everything. Otherwise, skip if event is
-      // session-scoped and the session isn't in the client's subscription set.
-      if (filter && eventSessionId && !filter.has(eventSessionId)) continue;
+    // Subscription filtering is intentionally NOT applied here. The
+    // `?sessions=` filter is intended to suppress only the high-volume
+    // terminal stream — lifecycle/metadata events (session:created,
+    // session:updated, ralph:*, hook:*, etc.) are needed for correct UI
+    // state across all sessions even when the client subscribes to a single
+    // active session's terminal output. Terminal events bypass this method
+    // entirely (see flushSessionTerminalBatch — it applies the filter).
+    for (const [client] of this.sseClients) {
       this.sendSSEPreformatted(client, message);
     }
   }
 
-  /**
-   * Extract the session ID from an event's data payload for subscription filtering.
-   * Returns the sessionId string if the event is session-scoped, or null for global events.
-   */
-  private extractSessionId(event: string, data: unknown): string | null {
-    if (data == null || typeof data !== 'object') return null;
-    const record = data as Record<string, unknown>;
-
-    // Most session-scoped events use `sessionId`
-    if (typeof record.sessionId === 'string') return record.sessionId;
-
-    // Session lifecycle events (session:*) use `id` from the session state object
-    if (typeof record.id === 'string' && event.startsWith('session:')) return record.id;
-
-    // No session ID found — treat as global event (sent to all clients)
-    return null;
-  }
-
   // ========== Terminal Data Batching ==========
 
   // Batch terminal data for better performance (60fps)

test/file-link-click.test.ts

@@ -49,8 +49,10 @@ async function waitForElement(selector: string, timeout = 10000): Promise<boolea
     try {
       const count = browserJson<{ count: number }>(`get count "${selector}"`);
       if (count.count > 0) return true;
-    } catch { /* retry */ }
-    await new Promise(r => setTimeout(r, 500));
+    } catch {
+      /* retry */
+    }
+    await new Promise((r) => setTimeout(r, 500));
   }
   return false;
 }
@@ -74,7 +76,9 @@ function isVisible(selector: string): boolean {
 function closeBrowser() {
   try {
     browser('close');
-  } catch { /* ignore */ }
+  } catch {
+    /* ignore */
+  }
 }
 
 describe('File Link Click Tests', () => {
@@ -95,14 +99,14 @@ describe('File Link Click Tests', () => {
 
     server = new WebServer(TEST_PORT, false, true);
     await server.start();
-    await new Promise(r => setTimeout(r, 1000));
+    await new Promise((r) => setTimeout(r, 1000));
 
     // Test if browser is available
     try {
       browser(`open ${baseUrl}`);
-      await new Promise(r => setTimeout(r, 2000));
+      await new Promise((r) => setTimeout(r, 2000));
       const title = browserJson<{ title: string }>('get title');
-      browserAvailable = title.title === 'Codeman';
+      browserAvailable = title.title.startsWith('codeman:');
     } catch (e) {
       console.warn('Browser not available, skipping browser tests:', (e as Error).message);
       browserAvailable = false;
@@ -114,14 +118,18 @@ describe('File Link Click Tests', () => {
     for (const sessionId of createdSessions) {
       try {
         await fetch(`${baseUrl}/api/sessions/${sessionId}`, { method: 'DELETE' });
-      } catch { /* ignore */ }
+      } catch {
+        /* ignore */
+      }
     }
     await server.stop();
 
     // Cleanup test directory
     try {
       rmSync(testDir, { recursive: true, force: true });
-    } catch { /* ignore */ }
+    } catch {
+      /* ignore */
+    }
   }, 60000);
 
   it('should create shell session and display terminal output', async () => {
@@ -142,7 +150,7 @@ describe('File Link Click Tests', () => {
     createdSessions.push(data.session.id);
 
     // Wait for session to appear in UI
-    await new Promise(r => setTimeout(r, 2000));
+    await new Promise((r) => setTimeout(r, 2000));
 
     // Check that terminal is visible
     const terminalExists = await waitForElement('.xterm-screen', 5000);
@@ -167,7 +175,7 @@ describe('File Link Click Tests', () => {
       body: JSON.stringify({ input: command + '\r' }),
     });
 
-    await new Promise(r => setTimeout(r, 2000));
+    await new Promise((r) => setTimeout(r, 2000));
 
     // Check if xterm contains the file path
     // The xterm link provider should detect "tail -f /path/to/file" pattern
@@ -204,7 +212,7 @@ describe('File Link Click Tests', () => {
       // Click somewhere in the terminal where the tail -f line should be
       // This is approximate - the link detection works on hover
       browser('click ".xterm-screen"');
-      await new Promise(r => setTimeout(r, 500));
+      await new Promise((r) => setTimeout(r, 500));
     } catch (e) {
       console.log('Click failed:', e);
     }
@@ -243,10 +251,10 @@ describe('File Link Click Tests', () => {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ input: `echo "${pattern}"\r` }),
       });
-      await new Promise(r => setTimeout(r, 500));
+      await new Promise((r) => setTimeout(r, 500));
     }
 
-    await new Promise(r => setTimeout(r, 1000));
+    await new Promise((r) => setTimeout(r, 1000));
 
     // Verify patterns appear in terminal
     const terminalText = getText('.xterm-screen');
@@ -255,11 +263,12 @@ describe('File Link Click Tests', () => {
     }
   }, 60000);
 
-it('should match file paths with various command patterns', () => {
+  it('should match file paths with various command patterns', () => {
     // Unit test for pattern matching logic - runs without browser
     // Pattern matches: tail -f /path, grep pattern /path, cat -n /path
     const cmdPattern = /(tail|cat|head|less|grep|watch|vim|nano)\s+(?:[^\s\/]*\s+)*(\/[^\s"'<>|;&\n\x00-\x1f]+)/g;
-    const extPattern = /(\/(?:home|tmp|var|etc|opt)[^\s"'<>|;&\n\x00-\x1f]*\.(?:log|txt|json|md|yaml|yml|csv|xml|sh|py|ts|js))\b/g;
+    const extPattern =
+      /(\/(?:home|tmp|var|etc|opt)[^\s"'<>|;&\n\x00-\x1f]*\.(?:log|txt|json|md|yaml|yml|csv|xml|sh|py|ts|js))\b/g;
     const bashPattern = /Bash\([^)]*?(\/(?:home|tmp|var|etc|opt)[^\s"'<>|;&\)\n\x00-\x1f]+)/g;
 
     // Test cmdPattern
@@ -309,13 +318,14 @@ it('should match file paths with various command patterns', () => {
   });
 
   it('should NOT match invalid or unsafe paths', () => {
-    const extPattern = /(\/(?:home|tmp|var|etc|opt)[^\s"'<>|;&\n\x00-\x1f]*\.(?:log|txt|json|md|yaml|yml|csv|xml|sh|py|ts|js))\b/g;
+    const extPattern =
+      /(\/(?:home|tmp|var|etc|opt)[^\s"'<>|;&\n\x00-\x1f]*\.(?:log|txt|json|md|yaml|yml|csv|xml|sh|py|ts|js))\b/g;
 
     const invalidCases = [
       'This is just text without paths',
-      './relative/path.log',  // relative path
-      'C:\\Windows\\path.log',  // windows path
-      '/usr/bin/something.log',  // /usr not in allowed prefixes
+      './relative/path.log', // relative path
+      'C:\\Windows\\path.log', // windows path
+      '/usr/bin/something.log', // /usr not in allowed prefixes
     ];
 
     for (const line of invalidCases) {
@@ -337,7 +347,7 @@ it('should match file paths with various command patterns', () => {
       });
       const data = await response.json();
       expect(data.success).toBe(true);
-      sessionId = data.sessionId;  // quick-start returns sessionId directly
+      sessionId = data.sessionId; // quick-start returns sessionId directly
       createdSessions.push(sessionId);
     }
 

test/inline-rename.test.ts

@@ -0,0 +1,281 @@
+/**
+ * Inline rename input tests.
+ *
+ * Covers the three fixes shipped after the audit of #81:
+ *   1. CJK composition guard — Enter/Escape during IME composition belong to
+ *      the IME and must not commit/cancel the rename.
+ *   2. Ghost tab cleanup — when a session is deleted while its tab is being
+ *      renamed, _cleanupSessionData() must cancel the rename so the inline
+ *      <input> doesn't ghost on screen.
+ *   3. Settle-once — cancel()/blur convergence is idempotent and reliably
+ *      clears _activeRename, even on repeated invocation.
+ *
+ * Strategy: stub a synthetic .tab-name node and a fake session entry, then
+ * drive the rename function directly via page.evaluate(). No real PTY/tmux.
+ *
+ * Port: 3164 (per MEMORY.md, ports 3150+ for tests)
+ */
+
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+import { chromium, type Browser, type Page } from 'playwright';
+import { WebServer } from '../src/web/server.js';
+
+const PORT = 3164;
+const BASE_URL = `http://localhost:${PORT}`;
+
+describe('Inline rename input', () => {
+  let server: WebServer;
+  let browser: Browser;
+  let page: Page;
+
+  beforeAll(async () => {
+    server = new WebServer(PORT, false, true); // testMode = true
+    await server.start();
+    browser = await chromium.launch({ headless: true });
+    page = await browser.newPage();
+    await page.goto(BASE_URL, { waitUntil: 'domcontentloaded' });
+    // Wait for app.js to expose window.app and finish constructor init.
+    await page.waitForFunction(
+      () =>
+        typeof (window as { app?: unknown }).app !== 'undefined' &&
+        !!(window as { app?: { sessions?: Map<string, unknown> } }).app?.sessions
+    );
+  }, 60000);
+
+  afterAll(async () => {
+    if (browser) await browser.close();
+    if (server) await server.stop();
+  }, 60000);
+
+  // Reset state between tests so each starts from a clean slate.
+  async function resetState(): Promise<void> {
+    await page.evaluate(() => {
+      const app = (
+        window as unknown as { app: { _activeRename: { cancel: () => void } | null; sessions: Map<string, unknown> } }
+      ).app;
+      if (app._activeRename) app._activeRename.cancel();
+      app.sessions.clear();
+      document.querySelectorAll('[data-test-tab]').forEach((n) => n.remove());
+    });
+    // Allow any cancel-triggered renderSessionTabs to settle.
+    await page.waitForTimeout(20);
+  }
+
+  // Helper: stub a session + tab-name DOM node, then start rename.
+  // Returns whether the rename input was successfully created.
+  async function startRename(sessionId: string, name: string): Promise<boolean> {
+    return page.evaluate(
+      ({ id, name }) => {
+        const app = (
+          window as unknown as {
+            app: {
+              sessions: Map<string, { id: string; name: string }>;
+              startInlineRename: (id: string) => void;
+            };
+          }
+        ).app;
+        app.sessions.set(id, { id, name });
+        const wrap = document.createElement('div');
+        wrap.setAttribute('data-test-tab', '1');
+        const tabName = document.createElement('span');
+        tabName.className = 'tab-name';
+        tabName.setAttribute('data-session-id', id);
+        tabName.textContent = name;
+        wrap.appendChild(tabName);
+        document.body.appendChild(wrap);
+        app.startInlineRename(id);
+        return !!tabName.querySelector('input.tab-rename-input');
+      },
+      { id: sessionId, name }
+    );
+  }
+
+  it('CJK guard: Enter with isComposing=true does not commit', async () => {
+    await resetState();
+    expect(await startRename('cjk-isc', 'OldName')).toBe(true);
+
+    const result = await page.evaluate(() => {
+      const app = (window as unknown as { app: { _activeRename: unknown } }).app;
+      const input = document.querySelector('input.tab-rename-input') as HTMLInputElement;
+      input.value = 'partial-pinyin';
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', isComposing: true, bubbles: true }));
+      return {
+        inputStillInDom: document.body.contains(input),
+        renameStillActive: !!app._activeRename,
+      };
+    });
+
+    expect(result.inputStillInDom).toBe(true);
+    expect(result.renameStillActive).toBe(true);
+  });
+
+  it('CJK guard: Enter with legacy keyCode 229 does not commit', async () => {
+    await resetState();
+    expect(await startRename('cjk-229', 'OldName')).toBe(true);
+
+    const renameStillActive = await page.evaluate(() => {
+      const app = (window as unknown as { app: { _activeRename: unknown } }).app;
+      const input = document.querySelector('input.tab-rename-input') as HTMLInputElement;
+      // Some Safari/Edge versions report keyCode 229 with isComposing=false on the
+      // Enter that triggers compositionend — the legacy guard catches that case.
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', keyCode: 229, bubbles: true }));
+      return !!app._activeRename;
+    });
+
+    expect(renameStillActive).toBe(true);
+  });
+
+  it('CJK guard: regular Enter (no IME) DOES commit', async () => {
+    await resetState();
+    expect(await startRename('regular-enter', 'OldName')).toBe(true);
+
+    // Stub fetch so the commit doesn't hit the real API.
+    const result = await page.evaluate(async () => {
+      const app = (window as unknown as { app: { _activeRename: unknown } }).app;
+      let fetchUrl: string | null = null;
+      const origFetch = window.fetch;
+      window.fetch = (async (input: RequestInfo | URL) => {
+        fetchUrl = String(input);
+        return new Response('{"success":true}', { status: 200 });
+      }) as typeof window.fetch;
+
+      const inputEl = document.querySelector('input.tab-rename-input') as HTMLInputElement;
+      inputEl.value = 'NewName';
+      inputEl.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+      // Enter calls input.blur() which fires the async finishRename. Wait for it.
+      await new Promise((r) => setTimeout(r, 30));
+
+      window.fetch = origFetch;
+      return { fetchUrl, renameActive: !!app._activeRename };
+    });
+
+    expect(result.fetchUrl).toContain('/api/sessions/regular-enter/name');
+    expect(result.renameActive).toBe(false);
+  });
+
+  it('Ghost tab: _cleanupSessionData cancels rename for the deleted session', async () => {
+    await resetState();
+    expect(await startRename('ghost-id', 'OldName')).toBe(true);
+
+    const result = await page.evaluate(async () => {
+      const app = (
+        window as unknown as {
+          app: {
+            _activeRename: { sessionId: string } | null;
+            sessions: Map<string, unknown>;
+            _cleanupSessionData: (id: string) => void;
+          };
+        }
+      ).app;
+
+      let fetchFired = false;
+      const origFetch = window.fetch;
+      window.fetch = (async (input: RequestInfo | URL) => {
+        if (String(input).includes('/api/sessions/ghost-id/name')) fetchFired = true;
+        return new Response('{}', { status: 200 });
+      }) as typeof window.fetch;
+
+      const matchedBefore = app._activeRename?.sessionId === 'ghost-id';
+      app._cleanupSessionData('ghost-id');
+      // Cancel triggers async renderSessionTabs; allow it to settle.
+      await new Promise((r) => setTimeout(r, 50));
+
+      window.fetch = origFetch;
+      return {
+        matchedBefore,
+        renameActiveAfter: !!app._activeRename,
+        sessionGone: !app.sessions.has('ghost-id'),
+        fetchFired,
+      };
+    });
+
+    expect(result.matchedBefore).toBe(true);
+    expect(result.renameActiveAfter).toBe(false);
+    expect(result.sessionGone).toBe(true);
+    // Cancel path skips the API call — deleting a session shouldn't trigger a stale rename PUT.
+    expect(result.fetchFired).toBe(false);
+  });
+
+  it('Ghost tab: _cleanupSessionData for a DIFFERENT session does NOT cancel rename', async () => {
+    await resetState();
+    expect(await startRename('keep-rename', 'OldName')).toBe(true);
+
+    const result = await page.evaluate(() => {
+      const app = (
+        window as unknown as {
+          app: {
+            _activeRename: unknown;
+            sessions: Map<string, { id: string; name: string }>;
+            _cleanupSessionData: (id: string) => void;
+          };
+        }
+      ).app;
+      // Add an unrelated session and delete it — the rename for keep-rename must survive.
+      app.sessions.set('unrelated', { id: 'unrelated', name: 'X' });
+      app._cleanupSessionData('unrelated');
+      return { renameStillActive: !!app._activeRename };
+    });
+
+    expect(result.renameStillActive).toBe(true);
+  });
+
+  it('Settle-once: cancel() is idempotent and clears _activeRename', async () => {
+    await resetState();
+    expect(await startRename('idempotent-id', 'OldName')).toBe(true);
+
+    const result = await page.evaluate(async () => {
+      const app = (window as unknown as { app: { _activeRename: { cancel: () => void } | null } }).app;
+      const cancelFn = app._activeRename!.cancel;
+      cancelFn();
+      const afterFirst = app._activeRename;
+      let threw = false;
+      try {
+        cancelFn();
+      } catch {
+        threw = true;
+      }
+      // Allow any async re-renders to settle.
+      await new Promise((r) => setTimeout(r, 30));
+      const afterSecond = app._activeRename;
+      return { afterFirstNull: afterFirst === null, afterSecondNull: afterSecond === null, threw };
+    });
+
+    expect(result.afterFirstNull).toBe(true);
+    expect(result.afterSecondNull).toBe(true);
+    expect(result.threw).toBe(false);
+  });
+
+  it('Re-entry: starting rename while one is active aborts the previous one', async () => {
+    await resetState();
+    expect(await startRename('first-id', 'First')).toBe(true);
+
+    const result = await page.evaluate(() => {
+      const app = (
+        window as unknown as {
+          app: {
+            _activeRename: { sessionId: string } | null;
+            sessions: Map<string, { id: string; name: string }>;
+            startInlineRename: (id: string) => void;
+          };
+        }
+      ).app;
+      const firstActive = app._activeRename?.sessionId;
+      // Start a second rename without cancelling — startInlineRename should
+      // pre-emptively cancel the previous one so state never gets stuck on the dead session.
+      app.sessions.set('second-id', { id: 'second-id', name: 'Second' });
+      const wrap = document.createElement('div');
+      wrap.setAttribute('data-test-tab', '1');
+      const tabName = document.createElement('span');
+      tabName.className = 'tab-name';
+      tabName.setAttribute('data-session-id', 'second-id');
+      tabName.textContent = 'Second';
+      wrap.appendChild(tabName);
+      document.body.appendChild(wrap);
+      app.startInlineRename('second-id');
+      return { firstActive, secondActive: app._activeRename?.sessionId };
+    });
+
+    expect(result.firstActive).toBe('first-id');
+    expect(result.secondActive).toBe('second-id');
+  });
+});

test/input-echo-test.mjs

@@ -1,241 +0,0 @@
-/**
- * Input echo test: Verifies that typing in the web UI doesn't produce
- * "visible below" artifacts (text mirrored onto Ink's status bar rows).
- *
- * Test approach:
- * 1. Creates a SHELL session (bash, not Claude) to avoid Ink complexity
- * 2. Types various input patterns and captures terminal state
- * 3. Verifies echo appears at correct cursor position, not duplicated
- *
- * Usage: node test/input-echo-test.mjs [--live]
- *   --live  Use existing sessions instead of creating new ones
- */
-import { chromium } from 'playwright';
-
-const PORT = 3000;
-const BASE = `http://localhost:${PORT}`;
-
-async function createShellSession() {
-  const resp = await fetch(`${BASE}/api/sessions`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ mode: 'shell', name: 'input-test' })
-  });
-  if (!resp.ok) throw new Error(`Failed to create session: ${resp.status}`);
-  const data = await resp.json();
-  return data.session?.id || data.id;
-}
-
-async function deleteSession(id) {
-  await fetch(`${BASE}/api/sessions/${id}`, { method: 'DELETE' }).catch(() => {});
-}
-
-async function waitForSessionReady(sessionId, timeoutMs = 10000) {
-  const start = Date.now();
-  while (Date.now() - start < timeoutMs) {
-    const resp = await fetch(`${BASE}/api/sessions/${sessionId}`);
-    if (resp.ok) {
-      const data = await resp.json();
-      if (data.status === 'idle' || data.status === 'busy') return true;
-    }
-    await new Promise(r => setTimeout(r, 200));
-  }
-  return false;
-}
-
-async function getTerminalContent(page) {
-  return page.evaluate(() => {
-    const app = window.app;
-    if (!app?.terminal) return null;
-    const buf = app.terminal.buffer.active;
-    const lines = [];
-    for (let i = 0; i <= buf.baseY + buf.viewportY + app.terminal.rows; i++) {
-      const line = buf.getLine(i);
-      if (line) lines.push(line.translateToString(true));
-    }
-    return {
-      lines,
-      cursorX: buf.cursorX,
-      cursorY: buf.cursorY,
-      rows: app.terminal.rows,
-      cols: app.terminal.cols,
-    };
-  });
-}
-
-async function main() {
-  const isLive = process.argv.includes('--live');
-  let sessionId = null;
-
-  console.log('=== Input Echo Test ===\n');
-
-  // Create a shell session for testing
-  if (!isLive) {
-    console.log('Creating shell session...');
-    sessionId = await createShellSession();
-    console.log(`Session created: ${sessionId}`);
-
-    const ready = await waitForSessionReady(sessionId);
-    if (!ready) {
-      console.error('Session failed to become ready');
-      await deleteSession(sessionId);
-      process.exit(1);
-    }
-    console.log('Session ready\n');
-  }
-
-  const browser = await chromium.launch({
-    headless: true,
-    args: ['--window-size=1280,800']
-  });
-  const context = await browser.newContext({ viewport: { width: 1280, height: 800 } });
-  const page = await context.newPage();
-
-  // Collect console output for debugging
-  const consoleLogs = [];
-  page.on('console', msg => consoleLogs.push(`[${msg.type()}] ${msg.text()}`));
-
-  try {
-    console.log('Opening Codeman...');
-    await page.goto(BASE);
-    await page.waitForSelector('.xterm-screen', { timeout: 10000 });
-    await page.waitForTimeout(2000);
-
-    // Switch to our test session if not live
-    if (sessionId) {
-      // Click the test session tab
-      const tabClicked = await page.evaluate((id) => {
-        const tabs = document.querySelectorAll('.session-tab');
-        for (const tab of tabs) {
-          if (tab.dataset.sessionId === id) {
-            tab.click();
-            return true;
-          }
-        }
-        return false;
-      }, sessionId);
-      if (tabClicked) {
-        await page.waitForTimeout(1000);
-        console.log('Switched to test session');
-      }
-    }
-
-    // Focus the terminal
-    await page.click('.xterm-screen');
-    await page.waitForTimeout(500);
-
-    // Take before screenshot
-    await page.screenshot({ path: '/tmp/input-test-before.png' });
-    console.log('Screenshot: /tmp/input-test-before.png (before typing)');
-
-    // Get terminal state before typing
-    const beforeState = await getTerminalContent(page);
-    const beforeCursorY = beforeState?.cursorY ?? -1;
-    console.log(`Before: cursor at row ${beforeCursorY}, col ${beforeState?.cursorX}`);
-
-    // TEST 1: Type a short string
-    console.log('\n--- Test 1: Short string ---');
-    const testStr = 'echo hello-world-test-123';
-    await page.keyboard.type(testStr, { delay: 30 });
-    await page.waitForTimeout(600);  // Wait for PTY echo round-trip
-
-    const afterShort = await getTerminalContent(page);
-    await page.screenshot({ path: '/tmp/input-test-short.png' });
-    console.log('Screenshot: /tmp/input-test-short.png');
-
-    // Check: cursor should still be on same row (or +1 for wrap)
-    // and text should appear at/near the cursor position
-    const cursorRowAfter = afterShort?.cursorY ?? -1;
-    console.log(`After: cursor at row ${cursorRowAfter}, col ${afterShort?.cursorX}`);
-
-    // The echo should be on the cursor's row, not below
-    const echoLine = afterShort?.lines?.[afterShort.cursorY + (afterShort.lines.length - afterShort.rows)] ?? '';
-    console.log(`Echo line: "${echoLine.trim()}"`);
-    if (echoLine.includes(testStr)) {
-      console.log('PASS: Echo found at cursor row');
-    } else {
-      console.log('INFO: Echo may be on a different row (check screenshots)');
-    }
-
-    // TEST 2: Press Enter and check response
-    console.log('\n--- Test 2: Enter key ---');
-    await page.keyboard.press('Enter');
-    await page.waitForTimeout(1000);
-
-    const afterEnter = await getTerminalContent(page);
-    await page.screenshot({ path: '/tmp/input-test-enter.png' });
-    console.log('Screenshot: /tmp/input-test-enter.png');
-
-    // Check for "hello-world-test-123" in the output
-    const allText = afterEnter?.lines?.join('\n') ?? '';
-    if (allText.includes('hello-world-test-123')) {
-      console.log('PASS: Command output visible');
-    } else {
-      console.log('WARN: Command output not found');
-    }
-
-    // TEST 3: Type a LONG string that approaches right edge
-    console.log('\n--- Test 3: Long string (near right edge) ---');
-    const longStr = 'echo ' + 'A'.repeat(afterShort?.cols ? afterShort.cols - 10 : 150);
-    await page.keyboard.type(longStr, { delay: 10 });
-    await page.waitForTimeout(800);
-
-    const afterLong = await getTerminalContent(page);
-    await page.screenshot({ path: '/tmp/input-test-long.png' });
-    console.log('Screenshot: /tmp/input-test-long.png');
-    console.log(`After long: cursor at row ${afterLong?.cursorY}, col ${afterLong?.cursorX}`);
-
-    // Check that no text leaked below the cursor row
-    const cursorAbsRow = (afterLong?.lines?.length ?? 0) - (afterLong?.rows ?? 0) + (afterLong?.cursorY ?? 0);
-    const rowsBelow = afterLong?.lines?.slice(cursorAbsRow + 1) ?? [];
-    const leakedText = rowsBelow.filter(l => l.trim().length > 0 && l.includes('AAA'));
-    if (leakedText.length === 0) {
-      console.log('PASS: No text leaked below cursor row');
-    } else {
-      console.log(`FAIL: Text leaked below cursor: ${leakedText.map(l => `"${l.trim()}"`).join(', ')}`);
-    }
-
-    // TEST 4: Rapid typing (paste-like)
-    console.log('\n--- Test 4: Rapid input (paste simulation) ---');
-    await page.keyboard.press('Enter');
-    await page.waitForTimeout(500);
-    // Type rapidly (no delay between chars)
-    await page.keyboard.type('echo rapid-test-no-delay-abcdefghij', { delay: 0 });
-    await page.waitForTimeout(800);
-
-    await page.screenshot({ path: '/tmp/input-test-rapid.png' });
-    console.log('Screenshot: /tmp/input-test-rapid.png');
-
-    await page.keyboard.press('Enter');
-    await page.waitForTimeout(1000);
-
-    const afterRapid = await getTerminalContent(page);
-    const rapidText = afterRapid?.lines?.join('\n') ?? '';
-    if (rapidText.includes('rapid-test-no-delay-abcdefghij')) {
-      console.log('PASS: Rapid input command output visible');
-    } else {
-      console.log('WARN: Rapid input output not found (check screenshots)');
-    }
-
-    // Final screenshot
-    await page.screenshot({ path: '/tmp/input-test-final.png' });
-    console.log('\nScreenshot: /tmp/input-test-final.png (final state)');
-
-    // Summary
-    console.log('\n=== Test Complete ===');
-    console.log('Check screenshots in /tmp/input-test-*.png');
-    console.log('Key check: no text should appear below the active cursor row');
-
-  } finally {
-    await browser.close();
-    if (sessionId && !isLive) {
-      console.log(`\nCleaning up session ${sessionId}...`);
-      await deleteSession(sessionId);
-    }
-  }
-}
-
-main().catch(err => {
-  console.error('Test failed:', err);
-  process.exit(1);
-});

test/local-echo-basic-test.mjs

@@ -1,590 +0,0 @@
-/**
- * Local Echo Overlay — Basic operation tests.
- *
- * Tests the most fundamental user scenarios:
- * 1. Type → switch tab → come back → backspace works
- * 2. Type → switch tab → come back → space doesn't erase text
- * 3. Type → switch tab → come back → backspace + new text works
- * 4. Overlay position stays consistent across renders
- * 5. Overlay doesn't shift left during Ink redraws
- * 6. Type → switch → back → rapid backspace+retype
- * 7. Overlay covers flushed canvas text properly
- *
- * Usage: node test/local-echo-basic-test.mjs
- */
-import { chromium } from 'playwright';
-
-const PORT = 3000;
-const BASE = `http://localhost:${PORT}`;
-const SCREENSHOT_DIR = '/tmp/local-echo-basic';
-
-async function createSession(name) {
-  const resp = await fetch(`${BASE}/api/sessions`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ mode: 'claude', name })
-  });
-  if (!resp.ok) throw new Error(`Failed to create '${name}': ${resp.status}`);
-  const data = await resp.json();
-  return data.session?.id || data.id;
-}
-
-async function deleteSession(id) {
-  await fetch(`${BASE}/api/sessions/${id}`, { method: 'DELETE' }).catch(() => {});
-}
-
-async function waitForReady(id, ms = 15000) {
-  const start = Date.now();
-  while (Date.now() - start < ms) {
-    const r = await fetch(`${BASE}/api/sessions/${id}`);
-    if (r.ok) { const d = await r.json(); if (d.status === 'idle' || d.status === 'busy') return true; }
-    await new Promise(r => setTimeout(r, 300));
-  }
-  return false;
-}
-
-async function getState(page) {
-  return page.evaluate(() => {
-    const app = window.app;
-    if (!app) return null;
-    const ov = app._localEchoOverlay;
-    const buf = app.terminal?.buffer?.active;
-    return {
-      visible: ov?.overlay?.style.display !== 'none',
-      text: ov?.pendingText || '',
-      flushed: ov?._flushedOffset || 0,
-      flushedMap: app._flushedOffsets ? Object.fromEntries(app._flushedOffsets) : {},
-      enabled: app._localEchoEnabled,
-      activeId: app.activeSessionId,
-      // Overlay position and content
-      overlayLeft: ov?.overlay?.style.left,
-      overlayTop: ov?.overlay?.style.top,
-      children: (() => {
-        if (!ov?.overlay) return [];
-        return Array.from(ov.overlay.children).map(c => ({
-          text: Array.from(c.querySelectorAll('span')).map(s => s.textContent).join(''),
-          left: c.style.left,
-          top: c.style.top,
-          width: c.style.width,
-          bgColor: c.style.backgroundColor,
-          spanCount: c.querySelectorAll('span').length,
-        }));
-      })(),
-      // Prompt line from buffer
-      promptLine: (() => {
-        if (!buf) return null;
-        for (let row = app.terminal.rows - 1; row >= 0; row--) {
-          const line = buf.getLine(buf.viewportY + row);
-          if (!line) continue;
-          const text = line.translateToString(true);
-          if (text.includes('\u276f')) return { text, row, col: text.lastIndexOf('\u276f') };
-        }
-        return null;
-      })(),
-    };
-  });
-}
-
-async function focus(page) {
-  await page.evaluate(() => document.querySelector('.xterm-helper-textarea')?.focus());
-  await page.waitForTimeout(200);
-}
-
-async function switchTab(page, id) {
-  await page.evaluate((id) => document.querySelector(`.session-tab[data-id="${id}"]`)?.click(), id);
-  await page.waitForTimeout(1500);
-}
-
-async function waitForPrompt(page, timeoutMs = 10000) {
-  const start = Date.now();
-  while (Date.now() - start < timeoutMs) {
-    const state = await getState(page);
-    if (state?.promptLine) return true;
-    await page.waitForTimeout(200);
-  }
-  return false;
-}
-
-async function sc(page, name) {
-  const path = `${SCREENSHOT_DIR}/${name}.png`;
-  await page.screenshot({ path });
-  console.log(`  📸 ${path}`);
-}
-
-const R = [];
-const pass = (n) => { R.push({n, s:'PASS'}); console.log(`  ✅ ${n}`); };
-const fail = (n, d) => { R.push({n, s:'FAIL', d}); console.log(`  ❌ ${n} — ${d}`); };
-
-async function main() {
-  const { mkdirSync } = await import('fs');
-  try { mkdirSync(SCREENSHOT_DIR, { recursive: true }); } catch {}
-
-  console.log('=== Local Echo — Basic Operation Tests ===\n');
-
-  const sA = await createSession('basic-A');
-  const sB = await createSession('basic-B');
-  console.log(`  A: ${sA}\n  B: ${sB}`);
-  if (!await waitForReady(sA) || !await waitForReady(sB)) {
-    await deleteSession(sA); await deleteSession(sB);
-    throw new Error('Sessions not ready');
-  }
-  console.log('  Ready\n');
-
-  const browser = await chromium.launch({ headless: true });
-  const ctx = await browser.newContext({
-    viewport: { width: 390, height: 844 },
-    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0)',
-    isMobile: true, hasTouch: true,
-  });
-  const page = await ctx.newPage();
-
-  // Capture JS errors
-  const jsErrors = [];
-  page.on('pageerror', err => jsErrors.push(err.message));
-
-  try {
-    await page.goto(BASE, { waitUntil: 'domcontentloaded' });
-    await page.waitForSelector('.xterm-screen', { timeout: 10000 });
-    await page.waitForTimeout(2000);
-
-    // Enable local echo
-    await page.evaluate(() => {
-      const s = JSON.parse(localStorage.getItem('codeman-app-settings') || '{}');
-      s.localEchoEnabled = true;
-      localStorage.setItem('codeman-app-settings', JSON.stringify(s));
-      window.app?._updateLocalEchoState?.();
-    });
-
-    // Select tab A, wait for prompt
-    await switchTab(page, sA);
-    await focus(page);
-    if (!await waitForPrompt(page)) throw new Error('No prompt on A');
-
-    // ══════════════════════════════════════════════════════════════
-    // TEST 1: Type → switch → back → IMMEDIATE backspace
-    // ══════════════════════════════════════════════════════════════
-    console.log('--- 1. Type → switch → back → immediate backspace ---');
-    await page.keyboard.type('hello world', { delay: 30 });
-    await page.waitForTimeout(300);
-
-    let st = await getState(page);
-    console.log(`  Typed: text="${st?.text}"`);
-    if (st?.text === 'hello world') pass('1a: Text buffered');
-    else fail('1a: Text buffered', `"${st?.text}"`);
-    await sc(page, '01-typed');
-
-    // Switch to B and back
-    await switchTab(page, sB);
-    st = await getState(page);
-    console.log(`  On B: text="${st?.text}", flushedMap=${JSON.stringify(st?.flushedMap)}`);
-
-    await switchTab(page, sA);
-    await focus(page);
-
-    // Check state BEFORE doing anything — flushed offset should be restored
-    st = await getState(page);
-    console.log(`  Back on A: text="${st?.text}", flushed=${st?.flushed}`);
-    if (st?.flushed === 11) pass('1b: Flushed offset restored');
-    else fail('1b: Flushed offset', `expected 11, got ${st?.flushed}`);
-
-    // IMMEDIATELY backspace (don't wait for buffer load)
-    await page.keyboard.press('Backspace');
-    await page.waitForTimeout(300);
-
-    st = await getState(page);
-    console.log(`  After 1 backspace: text="${st?.text}", flushed=${st?.flushed}`);
-    if (st?.flushed === 10) pass('1c: Backspace decremented flushed');
-    else fail('1c: Backspace', `expected flushed=10, got ${st?.flushed}`);
-    await sc(page, '02-after-backspace');
-
-    // Backspace 5 more times
-    for (let i = 0; i < 5; i++) {
-      await page.keyboard.press('Backspace');
-      await page.waitForTimeout(50);
-    }
-    await page.waitForTimeout(300);
-
-    st = await getState(page);
-    console.log(`  After 6 total backspaces: flushed=${st?.flushed}`);
-    if (st?.flushed === 5) pass('1d: Multiple backspaces work');
-    else fail('1d: Multiple backspaces', `expected flushed=5, got ${st?.flushed}`);
-
-    // Clean up
-    await page.keyboard.press('Control+c');
-    await page.waitForTimeout(500);
-
-    // ══════════════════════════════════════════════════════════════
-    // TEST 2: Type → switch → back → IMMEDIATE space (don't erase)
-    // ══════════════════════════════════════════════════════════════
-    console.log('\n--- 2. Type → switch → back → immediate space ---');
-    await focus(page);
-    await waitForPrompt(page);
-    await page.keyboard.type('test input', { delay: 30 });
-    await page.waitForTimeout(300);
-
-    // Switch and return
-    await switchTab(page, sB);
-    await switchTab(page, sA);
-    await focus(page);
-
-    // Check flushed offset is restored
-    st = await getState(page);
-    console.log(`  Back on A: flushed=${st?.flushed}`);
-
-    // Type a space immediately
-    await page.keyboard.type(' ', { delay: 30 });
-    await page.waitForTimeout(300);
-
-    st = await getState(page);
-    console.log(`  After space: text="${st?.text}", flushed=${st?.flushed}`);
-    console.log(`  Children: ${JSON.stringify(st?.children?.map(c => c.text))}`);
-    await sc(page, '03-after-space');
-
-    // The overlay should show the flushed text + space
-    if (st?.text === ' ' && st?.flushed > 0) pass('2a: Space typed with flushed offset');
-    else fail('2a: Space', `text="${st?.text}", flushed=${st?.flushed}`);
-
-    // The first child should contain the flushed text + space (not just space)
-    const child = st?.children?.[0];
-    if (child && child.text && child.text.length > 1) {
-      pass('2b: Overlay shows flushed text + space (not just space)');
-      console.log(`  Overlay text: "${child.text}"`);
-    } else {
-      fail('2b: Overlay content', `child text="${child?.text}"`);
-    }
-
-    // Clean up
-    await page.keyboard.press('Control+c');
-    await page.waitForTimeout(500);
-
-    // ══════════════════════════════════════════════════════════════
-    // TEST 3: Type → switch → back → backspace some + type new text
-    // ══════════════════════════════════════════════════════════════
-    console.log('\n--- 3. Type → switch → back → backspace + retype ---');
-    await focus(page);
-    await waitForPrompt(page);
-    await page.keyboard.type('old text here', { delay: 30 });
-    await page.waitForTimeout(300);
-
-    // Switch and return
-    await switchTab(page, sB);
-    await switchTab(page, sA);
-    await focus(page);
-    await page.waitForTimeout(500); // Small wait for buffer
-
-    // Backspace 4 chars ("here")
-    for (let i = 0; i < 4; i++) {
-      await page.keyboard.press('Backspace');
-      await page.waitForTimeout(50);
-    }
-    await page.waitForTimeout(300);
-
-    st = await getState(page);
-    console.log(`  After 4 backspaces: flushed=${st?.flushed}, text="${st?.text}"`);
-    if (st?.flushed === 9) pass('3a: Backspace 4 leaves flushed=9');
-    else fail('3a: Backspace count', `expected flushed=9, got ${st?.flushed}`);
-
-    // Now type new text
-    await page.keyboard.type('new stuff', { delay: 30 });
-    await page.waitForTimeout(300);
-
-    st = await getState(page);
-    console.log(`  After retype: text="${st?.text}", flushed=${st?.flushed}`);
-    console.log(`  Overlay: ${JSON.stringify(st?.children?.map(c => c.text))}`);
-    await sc(page, '04-backspace-retype');
-
-    if (st?.text === 'new stuff') pass('3b: New text after backspace correct');
-    else fail('3b: New text', `"${st?.text}"`);
-
-    // Overlay should show flushed chars + new text
-    const overlayText3 = st?.children?.[0]?.text || '';
-    console.log(`  Full overlay text: "${overlayText3}"`);
-    if (overlayText3.endsWith('new stuff') && overlayText3.length > 'new stuff'.length) {
-      pass('3c: Overlay combines flushed + new text');
-    } else {
-      fail('3c: Combined overlay', `"${overlayText3}"`);
-    }
-
-    await page.keyboard.press('Control+c');
-    await page.waitForTimeout(500);
-
-    // ══════════════════════════════════════════════════════════════
-    // TEST 4: Overlay position consistency
-    // ══════════════════════════════════════════════════════════════
-    console.log('\n--- 4. Overlay position consistency ---');
-    await focus(page);
-    await waitForPrompt(page);
-
-    // Type and record position
-    await page.keyboard.type('position test', { delay: 30 });
-    await page.waitForTimeout(300);
-
-    st = await getState(page);
-    const pos1 = {
-      overlayLeft: st?.overlayLeft,
-      overlayTop: st?.overlayTop,
-      childLeft: st?.children?.[0]?.left,
-      promptCol: st?.promptLine?.col,
-    };
-    console.log(`  Initial position: overlay=(${pos1.overlayLeft}, ${pos1.overlayTop}), child left=${pos1.childLeft}, prompt col=${pos1.promptCol}`);
-    await sc(page, '05-position-1');
-
-    // Type more text — position should stay stable (left doesn't change)
-    await page.keyboard.type('!', { delay: 30 });
-    await page.waitForTimeout(300);
-
-    st = await getState(page);
-    const pos2 = {
-      overlayLeft: st?.overlayLeft,
-      overlayTop: st?.overlayTop,
-      childLeft: st?.children?.[0]?.left,
-      promptCol: st?.promptLine?.col,
-    };
-    console.log(`  After more text: overlay=(${pos2.overlayLeft}, ${pos2.overlayTop}), child left=${pos2.childLeft}, prompt col=${pos2.promptCol}`);
-
-    if (pos1.overlayLeft === pos2.overlayLeft && pos1.overlayTop === pos2.overlayTop) {
-      pass('4a: Overlay container position stable');
-    } else {
-      fail('4a: Overlay shifted', `${pos1.overlayLeft},${pos1.overlayTop} → ${pos2.overlayLeft},${pos2.overlayTop}`);
-    }
-
-    if (pos1.childLeft === pos2.childLeft) {
-      pass('4b: Child left position stable');
-    } else {
-      fail('4b: Child left shifted', `${pos1.childLeft} → ${pos2.childLeft}`);
-    }
-
-    await page.keyboard.press('Control+c');
-    await page.waitForTimeout(500);
-
-    // ══════════════════════════════════════════════════════════════
-    // TEST 5: Switch → return → type → position matches prompt
-    // ══════════════════════════════════════════════════════════════
-    console.log('\n--- 5. Position after tab switch ---');
-    await focus(page);
-    await waitForPrompt(page);
-
-    // Record prompt position
-    st = await getState(page);
-    const promptCol5 = st?.promptLine?.col;
-    console.log(`  Prompt col before: ${promptCol5}`);
-
-    await page.keyboard.type('before switch', { delay: 30 });
-    await page.waitForTimeout(300);
-
-    st = await getState(page);
-    const beforeLeft = st?.children?.[0]?.left;
-    console.log(`  Overlay left before switch: ${beforeLeft}`);
-    await sc(page, '06-before-switch');
-
-    // Switch and return
-    await switchTab(page, sB);
-    await switchTab(page, sA);
-    await focus(page);
-    await page.waitForTimeout(500);
-
-    // Type something
-    await page.keyboard.type(' more', { delay: 30 });
-    await page.waitForTimeout(300);
-
-    st = await getState(page);
-    const afterLeft = st?.children?.[0]?.left;
-    const promptCol5After = st?.promptLine?.col;
-    console.log(`  Prompt col after: ${promptCol5After}`);
-    console.log(`  Overlay left after switch+type: ${afterLeft}`);
-    await sc(page, '07-after-switch-type');
-
-    if (beforeLeft === afterLeft) {
-      pass('5a: Overlay position stable after tab switch');
-    } else {
-      fail('5a: Position shifted after switch', `${beforeLeft} → ${afterLeft}`);
-    }
-
-    await page.keyboard.press('Control+c');
-    await page.waitForTimeout(500);
-
-    // ══════════════════════════════════════════════════════════════
-    // TEST 6: Rapid backspace-and-retype after return
-    // ══════════════════════════════════════════════════════════════
-    console.log('\n--- 6. Rapid backspace-and-retype ---');
-    await focus(page);
-    await waitForPrompt(page);
-    await page.keyboard.type('rapid test', { delay: 20 });
-    await page.waitForTimeout(200);
-
-    // Switch and return
-    await switchTab(page, sB);
-    await switchTab(page, sA);
-    await focus(page);
-
-    // Rapidly: backspace 4, type "done"
-    for (let i = 0; i < 4; i++) await page.keyboard.press('Backspace');
-    await page.keyboard.type('done', { delay: 10 });
-    await page.waitForTimeout(300);
-
-    st = await getState(page);
-    console.log(`  After rapid edit: text="${st?.text}", flushed=${st?.flushed}`);
-    await sc(page, '08-rapid-edit');
-
-    if (st?.text === 'done') pass('6a: Rapid backspace+retype text correct');
-    else fail('6a: Rapid edit text', `"${st?.text}"`);
-
-    if (st?.flushed === 6) pass('6b: Flushed offset correct after rapid backspace');
-    else fail('6b: Flushed offset', `expected 6, got ${st?.flushed}`);
-
-    await page.keyboard.press('Control+c');
-    await page.waitForTimeout(500);
-
-    // ══════════════════════════════════════════════════════════════
-    // TEST 7: Overlay background covers canvas text
-    // ══════════════════════════════════════════════════════════════
-    console.log('\n--- 7. Overlay covers canvas text ---');
-    await focus(page);
-    await waitForPrompt(page);
-    await page.keyboard.type('canvas cover', { delay: 30 });
-    await page.waitForTimeout(200);
-
-    // Flush by switching tabs
-    await switchTab(page, sB);
-    await switchTab(page, sA);
-    await focus(page);
-    await page.waitForTimeout(500); // Wait for buffer
-
-    // Type a space — overlay should render flushed text + space
-    await page.keyboard.type('X', { delay: 30 });
-    await page.waitForTimeout(300);
-
-    st = await getState(page);
-    const overlayChild = st?.children?.[0];
-    console.log(`  Overlay: visible=${st?.visible}, text="${overlayChild?.text}", width=${overlayChild?.width}, bg=${overlayChild?.bgColor}`);
-    await sc(page, '09-canvas-cover');
-
-    if (st?.visible && overlayChild?.text?.includes('canvas cover')) {
-      pass('7a: Overlay contains flushed text');
-    } else {
-      fail('7a: Flushed text in overlay', `"${overlayChild?.text}"`);
-    }
-
-    if (overlayChild?.bgColor) {
-      pass('7b: Overlay has background color');
-    } else {
-      fail('7b: No background color', `bg="${overlayChild?.bgColor}"`);
-    }
-
-    await page.keyboard.press('Control+c');
-    await page.waitForTimeout(500);
-
-    // ══════════════════════════════════════════════════════════════
-    // TEST 8: Backspace ALL flushed text back to zero
-    // ══════════════════════════════════════════════════════════════
-    console.log('\n--- 8. Full backspace through flushed text ---');
-    await focus(page);
-    await waitForPrompt(page);
-    await page.keyboard.type('abcde', { delay: 20 });
-    await page.waitForTimeout(200);
-
-    // Flush
-    await switchTab(page, sB);
-    await switchTab(page, sA);
-    await focus(page);
-
-    st = await getState(page);
-    console.log(`  Flushed: ${st?.flushed}`);
-
-    // Backspace ALL 5 chars + 2 extra (should be no-ops)
-    for (let i = 0; i < 7; i++) {
-      await page.keyboard.press('Backspace');
-      await page.waitForTimeout(40);
-    }
-    await page.waitForTimeout(300);
-
-    st = await getState(page);
-    console.log(`  After full backspace: flushed=${st?.flushed}, text="${st?.text}", visible=${st?.visible}`);
-    await sc(page, '10-full-backspace');
-
-    if (st?.flushed === 0) pass('8a: Flushed offset back to 0');
-    else fail('8a: Flushed not zero', `${st?.flushed}`);
-
-    if (!st?.text && !st?.visible) pass('8b: Overlay hidden after full backspace');
-    else fail('8b: Overlay state', `text="${st?.text}", visible=${st?.visible}`);
-
-    await page.keyboard.press('Control+c');
-    await page.waitForTimeout(500);
-
-    // ══════════════════════════════════════════════════════════════
-    // TEST 9: Fresh type after full backspace
-    // ══════════════════════════════════════════════════════════════
-    console.log('\n--- 9. Type fresh after full backspace ---');
-    await focus(page);
-    await waitForPrompt(page);
-    await page.keyboard.type('delete me', { delay: 20 });
-    await page.waitForTimeout(200);
-
-    // Flush
-    await switchTab(page, sB);
-    await switchTab(page, sA);
-    await focus(page);
-
-    // Delete all
-    for (let i = 0; i < 12; i++) {
-      await page.keyboard.press('Backspace');
-      await page.waitForTimeout(30);
-    }
-    await page.waitForTimeout(200);
-
-    // Now type fresh text
-    await page.keyboard.type('brand new', { delay: 30 });
-    await page.waitForTimeout(300);
-
-    st = await getState(page);
-    console.log(`  Fresh type: text="${st?.text}", flushed=${st?.flushed}, visible=${st?.visible}`);
-    await sc(page, '11-fresh-type');
-
-    if (st?.text === 'brand new' && st?.flushed === 0) {
-      pass('9a: Clean fresh text after full delete');
-    } else {
-      fail('9a: Fresh text', `text="${st?.text}", flushed=${st?.flushed}`);
-    }
-
-    if (st?.visible) pass('9b: Overlay visible with fresh text');
-    else fail('9b: Overlay not visible');
-
-    await page.keyboard.press('Control+c');
-    await page.waitForTimeout(500);
-
-    // ══════════════════════════════════════════════════════════════
-    // JS ERRORS
-    // ══════════════════════════════════════════════════════════════
-    console.log('\n--- JS Errors ---');
-    if (jsErrors.length === 0) {
-      pass('No JS errors');
-    } else {
-      for (const err of jsErrors) {
-        fail('JS Error', err.slice(0, 120));
-      }
-    }
-
-    await sc(page, '12-final');
-
-    // ══════════════════════════════════════════════════════════════
-    // SUMMARY
-    // ══════════════════════════════════════════════════════════════
-    console.log('\n=== SUMMARY ===');
-    const passes = R.filter(r => r.s === 'PASS').length;
-    const fails = R.filter(r => r.s === 'FAIL').length;
-    console.log(`  ${passes} passed, ${fails} failed`);
-
-    if (fails > 0) {
-      console.log('\n  FAILURES:');
-      R.filter(r => r.s === 'FAIL').forEach(r => console.log(`    ❌ ${r.n}: ${r.d}`));
-    }
-
-  } finally {
-    await browser.close();
-    console.log('\nCleaning up...');
-    await deleteSession(sA);
-    await deleteSession(sB);
-  }
-}
-
-main().catch(err => { console.error('Test failed:', err); process.exit(1); });

test/local-echo-daily-test.mjs

@@ -1,395 +0,0 @@
-/**
- * Local Echo Overlay — Daily use scenarios test.
- *
- * Simulates real mobile usage:
- * 1. Type text → switch tabs → switch back → verify state
- * 2. Type → change mind → delete all → type something else
- * 3. Type → reload page → verify recovery
- * 4. Rapidly type-delete-type (simulate editing)
- * 5. Type on Tab A → switch B → type on B → switch A → verify both
- * 6. Type → Enter → wait for response → type again
- * 7. Partial delete then add more text
- *
- * Usage: node test/local-echo-daily-test.mjs
- */
-import { chromium } from 'playwright';
-
-const PORT = 3000;
-const BASE = `http://localhost:${PORT}`;
-const SCREENSHOT_DIR = '/tmp/local-echo-daily';
-
-async function createSession(name) {
-  const resp = await fetch(`${BASE}/api/sessions`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ mode: 'claude', name })
-  });
-  if (!resp.ok) throw new Error(`Failed: ${resp.status}`);
-  const data = await resp.json();
-  return data.session?.id || data.id;
-}
-
-async function deleteSession(id) {
-  await fetch(`${BASE}/api/sessions/${id}`, { method: 'DELETE' }).catch(() => {});
-}
-
-async function waitForReady(id, ms = 15000) {
-  const start = Date.now();
-  while (Date.now() - start < ms) {
-    const r = await fetch(`${BASE}/api/sessions/${id}`);
-    if (r.ok) { const d = await r.json(); if (d.status === 'idle' || d.status === 'busy') return true; }
-    await new Promise(r => setTimeout(r, 300));
-  }
-  return false;
-}
-
-async function getState(page) {
-  return page.evaluate(() => {
-    const app = window.app;
-    if (!app) return null;
-    const ov = app._localEchoOverlay;
-    return {
-      visible: ov?.overlay?.style.display !== 'none',
-      text: ov?.pendingText || '',
-      flushed: ov?._flushedOffset || 0,
-      flushedMap: app._flushedOffsets ? Object.fromEntries(app._flushedOffsets) : {},
-      enabled: app._localEchoEnabled,
-      activeId: app.activeSessionId,
-      children: (() => {
-        if (!ov?.overlay) return [];
-        return Array.from(ov.overlay.children).map(c => ({
-          text: Array.from(c.querySelectorAll('span')).map(s => s.textContent).join(''),
-          left: c.style.left, top: c.style.top,
-        }));
-      })(),
-    };
-  });
-}
-
-async function focus(page) {
-  await page.evaluate(() => document.querySelector('.xterm-helper-textarea')?.focus());
-  await page.waitForTimeout(200);
-}
-
-async function switchTab(page, id) {
-  await page.evaluate((id) => document.querySelector(`.session-tab[data-id="${id}"]`)?.click(), id);
-  await page.waitForTimeout(1500);
-}
-
-async function sc(page, name) {
-  const p = `${SCREENSHOT_DIR}/${name}.png`;
-  await page.screenshot({ path: p });
-  console.log(`  📸 ${p}`);
-}
-
-const R = [];
-const pass = (n) => { R.push({n, s:'PASS'}); console.log(`  ✅ ${n}`); };
-const fail = (n, d) => { R.push({n, s:'FAIL', d}); console.log(`  ❌ ${n} — ${d}`); };
-const info = (n, d) => { R.push({n, s:'INFO', d}); console.log(`  ℹ️  ${n} — ${d}`); };
-
-async function main() {
-  const { mkdirSync } = await import('fs');
-  try { mkdirSync(SCREENSHOT_DIR, { recursive: true }); } catch {}
-
-  console.log('=== Local Echo — Daily Use Tests ===\n');
-
-  const sA = await createSession('daily-A');
-  const sB = await createSession('daily-B');
-  console.log(`  A: ${sA}\n  B: ${sB}`);
-  if (!await waitForReady(sA) || !await waitForReady(sB)) {
-    await deleteSession(sA); await deleteSession(sB);
-    throw new Error('Sessions not ready');
-  }
-  console.log('  Ready\n');
-
-  const browser = await chromium.launch({ headless: true });
-  const ctx = await browser.newContext({
-    viewport: { width: 390, height: 844 },
-    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0)',
-    isMobile: true, hasTouch: true,
-  });
-  const page = await ctx.newPage();
-
-  try {
-    await page.goto(BASE, { waitUntil: 'domcontentloaded' });
-    await page.waitForSelector('.xterm-screen', { timeout: 10000 });
-    await page.waitForTimeout(2000);
-
-    // Enable local echo
-    await page.evaluate(() => {
-      const s = JSON.parse(localStorage.getItem('codeman-app-settings') || '{}');
-      s.localEchoEnabled = true;
-      localStorage.setItem('codeman-app-settings', JSON.stringify(s));
-      window.app?._updateLocalEchoState?.();
-    });
-
-    await switchTab(page, sA);
-    await focus(page);
-
-    // ══════════════════════════════════════════
-    // 1. Type → switch tab → switch back
-    // ══════════════════════════════════════════
-    console.log('--- 1. Type → Tab switch → Return ---');
-    await page.keyboard.type('fix the login bug', { delay: 40 });
-    await page.waitForTimeout(300);
-    let st = await getState(page);
-    await sc(page, '01-typed');
-    console.log(`  Typed: "${st?.text}"`);
-
-    if (st?.text === 'fix the login bug') pass('Text buffered');
-    else fail('Buffer', `"${st?.text}"`);
-
-    // Switch to B
-    await switchTab(page, sB);
-    st = await getState(page);
-    console.log(`  After switch to B: text="${st?.text}", flushed A=${st?.flushedMap?.[sA]}`);
-    await sc(page, '02-on-tab-b');
-
-    if (!st?.text) pass('Overlay cleared on switch');
-    else fail('Clear on switch', `"${st?.text}"`);
-
-    // Switch back to A
-    await switchTab(page, sA);
-    await focus(page);
-    st = await getState(page);
-    await sc(page, '03-back-on-a');
-    console.log(`  Back on A: text="${st?.text}", flushed=${st?.flushed}`);
-
-    if (!st?.text && st?.flushed > 0) pass('Flushed text preserved on return');
-    else info('Return state', `text="${st?.text}", flushed=${st?.flushed}`);
-
-    // Type more
-    await page.keyboard.type(' please', { delay: 40 });
-    await page.waitForTimeout(300);
-    st = await getState(page);
-    await sc(page, '04-type-more-on-a');
-    console.log(`  After adding: text="${st?.text}", flushed=${st?.flushed}`);
-
-    if (st?.text === ' please' && st?.flushed > 0) pass('Can type after return with flushed offset');
-    else fail('Type after return', `text="${st?.text}", flushed=${st?.flushed}`);
-
-    // Submit
-    await page.keyboard.press('Enter');
-    await page.waitForTimeout(2000);
-
-    // ══════════════════════════════════════════
-    // 2. Type → delete all → retype
-    // ══════════════════════════════════════════
-    console.log('\n--- 2. Type → delete all → retype ---');
-    await focus(page);
-    await page.keyboard.type('wrong command oops', { delay: 30 });
-    await page.waitForTimeout(200);
-    st = await getState(page);
-    console.log(`  Typed wrong: "${st?.text}"`);
-
-    // Delete all
-    for (let i = 0; i < 'wrong command oops'.length + 2; i++) {
-      await page.keyboard.press('Backspace');
-      await page.waitForTimeout(20);
-    }
-    await page.waitForTimeout(200);
-
-    st = await getState(page);
-    console.log(`  After delete: text="${st?.text}", visible=${st?.visible}`);
-    if (!st?.text && !st?.visible) pass('Fully deleted');
-    else fail('Full delete', `"${st?.text}"`);
-
-    // Retype correct command
-    await page.keyboard.type('say hello', { delay: 40 });
-    await page.waitForTimeout(300);
-    st = await getState(page);
-    await sc(page, '05-retyped');
-    console.log(`  Retyped: "${st?.text}"`);
-
-    if (st?.text === 'say hello' && st?.visible) pass('Retype after delete works');
-    else fail('Retype', `"${st?.text}", visible=${st?.visible}`);
-
-    await page.keyboard.press('Enter');
-    await page.waitForTimeout(2000);
-
-    // ══════════════════════════════════════════
-    // 3. Type → reload page → check recovery
-    // ══════════════════════════════════════════
-    console.log('\n--- 3. Type → reload page → recovery ---');
-    await focus(page);
-    await page.keyboard.type('unsent text before reload', { delay: 30 });
-    await page.waitForTimeout(300);
-    st = await getState(page);
-    console.log(`  Before reload: "${st?.text}"`);
-    await sc(page, '06-before-reload');
-
-    // Reload the page
-    await page.reload({ waitUntil: 'domcontentloaded' });
-    await page.waitForSelector('.xterm-screen', { timeout: 10000 });
-    await page.waitForTimeout(3000); // Wait for SSE reconnect + buffer load
-
-    st = await getState(page);
-    await sc(page, '07-after-reload');
-    console.log(`  After reload: text="${st?.text}", enabled=${st?.enabled}`);
-
-    // localStorage persistence was removed — stale text from previous page
-    // loads caused ghost-merging with new input, breaking editing.
-    // After reload, overlay should be clean (no stale text).
-    if (st?.text === '') {
-      pass('Overlay clean after reload (no stale text)');
-    } else {
-      fail('Stale text after reload', `text="${st?.text}"`);
-    }
-
-    // ══════════════════════════════════════════
-    // 4. Rapid type-delete-type (simulate editing)
-    // ══════════════════════════════════════════
-    console.log('\n--- 4. Rapid type-delete-type editing ---');
-    await focus(page);
-
-    // Type "hello", delete "lo", type "p me"
-    await page.keyboard.type('hello', { delay: 20 });
-    await page.waitForTimeout(100);
-    await page.keyboard.press('Backspace');
-    await page.keyboard.press('Backspace');
-    await page.waitForTimeout(100);
-    await page.keyboard.type('p me', { delay: 20 });
-    await page.waitForTimeout(300);
-
-    st = await getState(page);
-    await sc(page, '08-rapid-edit');
-    console.log(`  After rapid edit: "${st?.text}"`);
-
-    if (st?.text === 'help me') pass('Rapid edit produces correct text');
-    else fail('Rapid edit', `expected "help me", got "${st?.text}"`);
-
-    await page.keyboard.press('Control+c');
-    await page.waitForTimeout(500);
-
-    // ══════════════════════════════════════════
-    // 5. Interleaved typing on two tabs
-    // ══════════════════════════════════════════
-    console.log('\n--- 5. Interleaved typing on two tabs ---');
-    await focus(page);
-    await page.keyboard.type('tab A input', { delay: 30 });
-    await page.waitForTimeout(200);
-    await sc(page, '09-tab-a-input');
-
-    st = await getState(page);
-    console.log(`  Tab A: "${st?.text}"`);
-    if (st?.text === 'tab A input') pass('Tab A text correct');
-    else fail('Tab A text', `"${st?.text}"`);
-
-    // Switch to B and type
-    await switchTab(page, sB);
-    await focus(page);
-    await page.keyboard.type('tab B input', { delay: 30 });
-    await page.waitForTimeout(200);
-    await sc(page, '10-tab-b-input');
-
-    st = await getState(page);
-    console.log(`  Tab B: "${st?.text}"`);
-    if (st?.text === 'tab B input') pass('Tab B text correct');
-    else fail('Tab B text', `"${st?.text}"`);
-
-    // Switch back to A — A's text was flushed
-    await switchTab(page, sA);
-    await focus(page);
-    st = await getState(page);
-    await sc(page, '11-back-to-a');
-    console.log(`  Back to A: text="${st?.text}", flushed=${st?.flushed}, flushedMap A=${st?.flushedMap?.[sA]}, B=${st?.flushedMap?.[sB]}`);
-
-    // A's input was flushed (11 chars), B's was flushed (11 chars)
-    if (st?.flushed > 0) pass('Tab A flushed offset restored');
-    else info('Tab A flushed', `offset=${st?.flushed}`);
-
-    // Switch to B — B's input was flushed
-    await switchTab(page, sB);
-    await focus(page);
-    st = await getState(page);
-    await sc(page, '12-back-to-b');
-    console.log(`  Back to B: text="${st?.text}", flushed=${st?.flushed}`);
-
-    if (st?.flushed > 0) pass('Tab B flushed offset restored');
-    else info('Tab B flushed', `offset=${st?.flushed}`);
-
-    // Submit both with Enter
-    await page.keyboard.press('Enter');
-    await page.waitForTimeout(1000);
-    await switchTab(page, sA);
-    await focus(page);
-    await page.keyboard.press('Enter');
-    await page.waitForTimeout(1000);
-
-    // ══════════════════════════════════════════
-    // 6. Type → Enter → response → type again
-    // ══════════════════════════════════════════
-    console.log('\n--- 6. Type → Enter → wait → type again ---');
-    await focus(page);
-    await page.keyboard.type('just say ok', { delay: 30 });
-    await page.keyboard.press('Enter');
-    await page.waitForTimeout(4000); // Wait for response
-
-    await focus(page);
-    await page.keyboard.type('now say goodbye', { delay: 30 });
-    await page.waitForTimeout(300);
-
-    st = await getState(page);
-    await sc(page, '13-second-prompt');
-    console.log(`  Second prompt: "${st?.text}", flushed=${st?.flushed}`);
-
-    if (st?.text === 'now say goodbye' && st?.flushed === 0) {
-      pass('Clean typing on new prompt after response');
-    } else {
-      fail('Second prompt', `text="${st?.text}", flushed=${st?.flushed}`);
-    }
-
-    await page.keyboard.press('Control+c');
-    await page.waitForTimeout(500);
-
-    // ══════════════════════════════════════════
-    // 7. Partial delete then add text
-    // ══════════════════════════════════════════
-    console.log('\n--- 7. Partial delete + add ---');
-    await focus(page);
-    await page.keyboard.type('fixing the bug', { delay: 30 });
-    await page.waitForTimeout(200);
-
-    // Delete "bug" (3 chars), keeping the space
-    for (let i = 0; i < 3; i++) await page.keyboard.press('Backspace');
-    await page.waitForTimeout(100);
-
-    // Add "typo"
-    await page.keyboard.type('typo', { delay: 30 });
-    await page.waitForTimeout(300);
-
-    st = await getState(page);
-    await sc(page, '14-partial-edit');
-    console.log(`  After partial edit: "${st?.text}"`);
-
-    if (st?.text === 'fixing the typo') pass('Partial delete + add correct');
-    else fail('Partial edit', `expected "fixing the typo", got "${st?.text}"`);
-
-    // Final
-    await page.keyboard.press('Control+c');
-    await page.waitForTimeout(300);
-    await sc(page, '15-final');
-
-    // ══════════════════════════════════════════
-    // SUMMARY
-    // ══════════════════════════════════════════
-    console.log('\n=== SUMMARY ===');
-    const p = R.filter(r => r.s === 'PASS').length;
-    const f = R.filter(r => r.s === 'FAIL').length;
-    const i = R.filter(r => r.s === 'INFO').length;
-    console.log(`  ${p} passed, ${f} failed, ${i} info`);
-
-    if (f > 0) {
-      console.log('\n  FAILURES:');
-      R.filter(r => r.s === 'FAIL').forEach(r => console.log(`    ❌ ${r.n}: ${r.d}`));
-    }
-
-  } finally {
-    await browser.close();
-    console.log('\nCleaning up...');
-    await deleteSession(sA);
-    await deleteSession(sB);
-  }
-}
-
-main().catch(err => { console.error('Test failed:', err); process.exit(1); });