chore: version packages

fix: correct claudeSessionId for resumed sessions and clean up DEC sync dead code
Use resumeSessionId for Claude conversation ID when resuming sessions, increase default font size to 14, extract shared history fetch logic, and remove unused DEC 2026 sync constants/functions (xterm.js 6.0 handles natively). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-09-30 20:49:41 +02:00 · 2026-03-11 19:37:17 +01:00 · 2026-03-11 19:36:58 +01:00 · 2026-03-11 19:20:28 +01:00 · 2026-03-11 19:13:49 +01:00 · 2026-03-12 01:06:14 +08:00
40 changed files with 1838 additions and 483 deletions
@@ -1,9 +1,43 @@
 # aicodeman

+## 0.3.10
+
+### Patch Changes
+
+- - feat: upgrade xterm.js from 5.3 to 6.0 with native DEC 2026 synchronized output support
+  - feat: add history session resume UI and API — resume Claude conversations after reboot
+  - feat: add resumeSessionId support for conversation resume across session restarts
+  - feat: persist active tabs across page refresh
+  - feat: improve session resume reliability and persist user settings
+  - perf: increase terminal scrollback from 5,000 to 20,000 lines
+  - fix: resolve terminal resize scrollback ghost renders
+  - fix: route shell sessions to correct endpoint on tab click
+  - fix: correct claudeSessionId for resumed sessions (use original Claude conversation ID)
+  - fix: increase default desktop font size from 12 to 14
+  - refactor: extract shared \_fetchHistorySessions() method to eliminate duplication
+  - refactor: remove dead DEC 2026 sync code (extractSyncSegments, DEC_SYNC_START/END constants)
+
+## 0.3.9
+
+### Patch Changes
+
+- Add content-hash cache busting for static assets — build step now renames JS/CSS files with MD5 content hashes (e.g. app.js → app.94b71235.js) and rewrites index.html references. HTML served with Cache-Control: no-cache so browsers always revalidate and pick up new hashed filenames after deploys. Hashed assets keep immutable 1-year cache. Eliminates the need for manual hard refresh (Ctrl+Shift+R) after deployments.
+
+  Refactor path traversal validation into shared validatePathWithinBase() helper in route-helpers.ts, replacing 6 duplicate inline checks across case-routes, plan-routes, and session-routes.
+
+  Deduplicate stripAnsi in bash-tool-parser.ts — use shared utility from utils/index.ts instead of private method.
+
+## 0.3.8
+
+### Patch Changes
+
+- Add tunnel status indicator with control panel — green pulsing dot in header when Cloudflare tunnel is active, dropdown with URL, remote clients, auth sessions, and start/stop/QR/revoke controls
+
 ## 0.3.7

 ### Patch Changes

+- Operation Lightspeed: 5 parallel performance optimizations — multi-layer backpressure to prevent terminal write freezes, TERMINAL_TAIL_SIZE constant with client-drop recovery, tab switching SSE gating, and local echo improvements
 - Codebase cleanup: remove dead code (unused token validation exports, PlanPhase alias), add execPattern() regex helper to eliminate repetitive .lastIndex resets, centralize 11 magic number constants into config files, fix CLAUDE.md inaccuracies, and add 316 new tests for utilities, respawn helpers, and system-routes

 ## 0.3.6
@@ -44,7 +44,7 @@ When user says "COM":
   "aicodeman": patch
   ---

-   Description of changes
+   Detailed description of ALL changes since last release (not just the most recent commit — review full git log since last version tag)
   CHANGESET
   ```
   Replace `patch` with `minor` or `major` as needed. Include `"xterm-zerolag-input": patch` on a separate line if that package changed too.
@@ -52,7 +52,7 @@ When user says "COM":
 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`

-**Version**: 0.3.7 (must match `package.json`)
+**Version**: 0.3.10 (must match `package.json`)

 ## Project Overview

@@ -110,7 +110,7 @@ Codeman is a Claude Code session manager with web interface and autonomous Ralph
 | **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` (12 route modules + barrel), `src/web/ports/*.ts`, `src/web/middleware/auth.ts`, `src/web/schemas.ts` | |
 | **Frontend** | `src/web/public/app.js` ★ (~12.1K lines) + 9 JS modules (incl. `sw.js` service worker) | |
-| **Types** | `src/types/index.ts` → 13 domain files | See `@fileoverview` in index.ts |
+| **Types** | `src/types/index.ts` → 14 domain files | See `@fileoverview` in index.ts |

 ★ = Large file (>50KB). All files have `@fileoverview` JSDoc — read that before diving in.

@@ -143,6 +143,10 @@ Watch background agents work in real-time. Codeman monitors agent activity and d

 ## Zero-Lag Input Overlay

+<p align="center">
+  <img src="docs/images/zerolag-demo.gif" alt="Zerolag Demo — local echo vs server echo side-by-side" width="900">
+</p>
+
 When accessing your coding agent remotely (VPN, Tailscale, SSH tunnel), every keystroke normally takes 200-300ms to round-trip. Codeman implements a **Mosh-inspired local echo system** that makes typing feel instant regardless of latency.

 A pixel-perfect DOM overlay inside xterm.js renders keystrokes at 0ms. Background forwarding silently sends every character to the PTY in 50ms debounced batches, so Tab completion, `Ctrl+R` history search, and all shell features work normally. When the server echo arrives 200-300ms later, the overlay seamlessly disappears and the real terminal text takes over — the transition is invisible.
@@ -1,12 +1,12 @@
 {
  "name": "aicodeman",
-  "version": "0.3.1",
+  "version": "0.3.8",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "aicodeman",
-      "version": "0.3.1",
+      "version": "0.3.8",
      "hasInstallScript": true,
      "license": "MIT",
      "workspaces": [
@@ -17,8 +17,10 @@
        "@fastify/compress": "^8.3.1",
        "@fastify/cookie": "^11.0.2",
        "@fastify/static": "^8.0.0",
-        "@remotion/compositor-linux-x64-gnu": "^4.0.432",
-        "@rspack/binding-linux-x64-gnu": "^1.7.7",
+        "@xterm/addon-fit": "^0.11.0",
+        "@xterm/addon-unicode11": "^0.9.0",
+        "@xterm/addon-webgl": "^0.19.0",
+        "@xterm/xterm": "^6.0.0",
        "chalk": "^5.3.0",
        "chokidar": "^3.6.0",
        "commander": "^12.1.0",
@@ -27,10 +29,6 @@
        "qrcode": "^1.5.4",
        "uuid": "^10.0.0",
        "web-push": "^3.6.7",
-        "xterm": "^5.3.0",
-        "xterm-addon-fit": "^0.8.0",
-        "xterm-addon-unicode11": "^0.6.0",
-        "xterm-addon-webgl": "^0.16.0",
        "zod": "^4.3.6"
      },
      "bin": {
@@ -64,6 +62,10 @@
      },
      "engines": {
        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "@remotion/compositor-linux-x64-gnu": "^4.0.432",
+        "@rspack/binding-linux-x64-gnu": "^1.7.7"
      }
    },
    "node_modules/@asamuzakjp/css-color": {
@@ -1432,6 +1434,7 @@
      "cpu": [
        "x64"
      ],
+      "optional": true,
      "os": [
        "linux"
      ]
@@ -1861,6 +1864,7 @@
        "x64"
      ],
      "license": "MIT",
+      "optional": true,
      "os": [
        "linux"
      ]
@@ -2599,6 +2603,33 @@
        "@xtuc/long": "4.2.2"
      }
    },
+    "node_modules/@xterm/addon-fit": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.11.0.tgz",
+      "integrity": "sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g==",
+      "license": "MIT"
+    },
+    "node_modules/@xterm/addon-unicode11": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-unicode11/-/addon-unicode11-0.9.0.tgz",
+      "integrity": "sha512-FxDnYcyuXhNl+XSqGZL/t0U9eiNb/q3EWT5rYkQT/zuig8Gz/VagnQANKHdDWFM2lTMk9ly0EFQxxxtZUoRetw==",
+      "license": "MIT"
+    },
+    "node_modules/@xterm/addon-webgl": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-webgl/-/addon-webgl-0.19.0.tgz",
+      "integrity": "sha512-b3fMOsyLVuCeNJWxolACEUED0vm7qC0cy4wRvf3oURSzDTYVQiGPhTnhWZwIHdvC48Y+oLhvYXnY4XDXPoJo6A==",
+      "license": "MIT"
+    },
+    "node_modules/@xterm/xterm": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-6.0.0.tgz",
+      "integrity": "sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg==",
+      "license": "MIT",
+      "workspaces": [
+        "addons/*"
+      ]
+    },
    "node_modules/@xtuc/ieee754": {
      "version": "1.2.0",
      "dev": true,
@@ -8495,31 +8526,6 @@
        "node": ">=0.4"
      }
    },
-    "node_modules/xterm": {
-      "version": "5.3.0",
-      "license": "MIT"
-    },
-    "node_modules/xterm-addon-fit": {
-      "version": "0.8.0",
-      "license": "MIT",
-      "peerDependencies": {
-        "xterm": "^5.0.0"
-      }
-    },
-    "node_modules/xterm-addon-unicode11": {
-      "version": "0.6.0",
-      "license": "MIT",
-      "peerDependencies": {
-        "xterm": "^5.0.0"
-      }
-    },
-    "node_modules/xterm-addon-webgl": {
-      "version": "0.16.0",
-      "license": "MIT",
-      "peerDependencies": {
-        "xterm": "^5.0.0"
-      }
-    },
    "node_modules/xterm-zerolag-input": {
      "resolved": "packages/xterm-zerolag-input",
      "link": true
@@ -1,6 +1,6 @@
 {
  "name": "aicodeman",
-  "version": "0.3.7",
+  "version": "0.3.10",
  "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",
@@ -51,8 +51,10 @@
    "@fastify/compress": "^8.3.1",
    "@fastify/cookie": "^11.0.2",
    "@fastify/static": "^8.0.0",
-    "@remotion/compositor-linux-x64-gnu": "^4.0.432",
-    "@rspack/binding-linux-x64-gnu": "^1.7.7",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-unicode11": "^0.9.0",
+    "@xterm/addon-webgl": "^0.19.0",
+    "@xterm/xterm": "^6.0.0",
    "chalk": "^5.3.0",
    "chokidar": "^3.6.0",
    "commander": "^12.1.0",
@@ -61,10 +63,6 @@
    "qrcode": "^1.5.4",
    "uuid": "^10.0.0",
    "web-push": "^3.6.7",
-    "xterm": "^5.3.0",
-    "xterm-addon-fit": "^0.8.0",
-    "xterm-addon-unicode11": "^0.6.0",
-    "xterm-addon-webgl": "^0.16.0",
    "zod": "^4.3.6"
  },
  "devDependencies": {
@@ -93,6 +91,10 @@
    "typescript-eslint": "^8.0.0",
    "vitest": "^4.0.18"
  },
+  "optionalDependencies": {
+    "@remotion/compositor-linux-x64-gnu": "^4.0.432",
+    "@rspack/binding-linux-x64-gnu": "^1.7.7"
+  },
  "engines": {
    "node": ">=18.0.0"
  },
@@ -8,13 +8,15 @@
 *   2. Copy static assets (web/public, templates)
 *   3. Build vendor xterm bundles
 *   4. Minify frontend assets (app.js, styles.css, mobile.css)
- *   5. Compress with gzip + brotli
+ *   5. Content-hash cache busting (rename assets, rewrite index.html)
+ *   6. Compress with gzip + brotli
 */

 import { execSync } from 'child_process';
-import { appendFileSync } from 'fs';
+import { appendFileSync, readFileSync, writeFileSync, renameSync } from 'fs';
+import { createHash } from 'crypto';
 import { fileURLToPath } from 'url';
-import { join } from 'path';
+import { join, extname, basename, dirname } from 'path';

 const ROOT = join(fileURLToPath(import.meta.url), '..', '..');

@@ -27,17 +29,18 @@ function run(label, cmd) {
 run('tsc', 'tsc');
 run('chmod dist/index.js', 'chmod +x dist/index.js');

-// 2. Copy static assets
+// 2. Copy static assets (clean first to remove stale hashed files from previous builds)
+run('clean public', 'rm -rf dist/web/public');
 run('prepare dirs', 'mkdir -p dist/web dist/templates dist/web/public/vendor');
 run('copy web assets', 'cp -r src/web/public dist/web/');
 run('copy template', 'cp src/templates/case-template.md dist/templates/');

-// 3. Vendor xterm bundles
-run('xterm css', 'cp node_modules/xterm/css/xterm.css dist/web/public/vendor/');
-run('xterm js', 'npx esbuild node_modules/xterm/lib/xterm.js --minify --outfile=dist/web/public/vendor/xterm.min.js');
-run('xterm-addon-fit', 'npx esbuild node_modules/xterm-addon-fit/lib/xterm-addon-fit.js --minify --outfile=dist/web/public/vendor/xterm-addon-fit.min.js');
-run('xterm-addon-webgl', 'cp node_modules/xterm-addon-webgl/lib/xterm-addon-webgl.js dist/web/public/vendor/xterm-addon-webgl.min.js');
-run('xterm-addon-unicode11', 'npx esbuild node_modules/xterm-addon-unicode11/lib/xterm-addon-unicode11.js --minify --outfile=dist/web/public/vendor/xterm-addon-unicode11.min.js');
+// 3. Vendor xterm bundles (xterm.js 6.x — @xterm scoped packages)
+run('xterm css', 'cp node_modules/@xterm/xterm/css/xterm.css dist/web/public/vendor/');
+run('xterm js', 'npx esbuild node_modules/@xterm/xterm/lib/xterm.js --minify --outfile=dist/web/public/vendor/xterm.min.js');
+run('xterm-addon-fit', 'npx esbuild node_modules/@xterm/addon-fit/lib/addon-fit.js --minify --outfile=dist/web/public/vendor/xterm-addon-fit.min.js');
+run('xterm-addon-webgl', 'cp node_modules/@xterm/addon-webgl/lib/addon-webgl.js dist/web/public/vendor/xterm-addon-webgl.min.js');
+run('xterm-addon-unicode11', 'npx esbuild node_modules/@xterm/addon-unicode11/lib/addon-unicode11.js --minify --outfile=dist/web/public/vendor/xterm-addon-unicode11.min.js');
 run('xterm-zerolag-input', 'npx esbuild packages/xterm-zerolag-input/src/zerolag-input-addon.ts --bundle --minify --format=iife --global-name=XtermZerolagInput --outfile=dist/web/public/vendor/xterm-zerolag-input.js');

 // Append global aliases so app.js can use `new LocalEchoOverlay(terminal)`
@@ -60,7 +63,49 @@ run('minify app.js', 'npx esbuild dist/web/public/app.js --minify --outfile=dist
 run('minify styles.css', 'npx esbuild dist/web/public/styles.css --minify --outfile=dist/web/public/styles.css --allow-overwrite');
 run('minify mobile.css', 'npx esbuild dist/web/public/mobile.css --minify --outfile=dist/web/public/mobile.css --allow-overwrite');

-// 5. Compress with gzip + brotli
+// 5. Content-hash cache busting
+console.log('\n[build] content-hash cache busting');
+{
+  const distPublic = join(ROOT, 'dist/web/public');
+  const HASHABLE = [
+    'styles.css',
+    'mobile.css',
+    'constants.js',
+    'mobile-handlers.js',
+    'voice-input.js',
+    'notification-manager.js',
+    'keyboard-accessory.js',
+    'app.js',
+    'ralph-wizard.js',
+    'api-client.js',
+    'subagent-windows.js',
+    'vendor/xterm-zerolag-input.js',
+  ];
+  const manifest = {};
+  for (const file of HASHABLE) {
+    const filePath = join(distPublic, file);
+    const content = readFileSync(filePath);
+    const hash = createHash('md5').update(content).digest('hex').slice(0, 8);
+    const ext = extname(file);
+    const base = basename(file, ext);
+    const dir = dirname(file);
+    const hashed = dir === '.' ? `${base}.${hash}${ext}` : `${dir}/${base}.${hash}${ext}`;
+    renameSync(filePath, join(distPublic, hashed));
+    manifest[file] = hashed;
+  }
+  // Rewrite index.html to reference hashed filenames
+  let html = readFileSync(join(distPublic, 'index.html'), 'utf8');
+  for (const [original, hashed] of Object.entries(manifest)) {
+    html = html.replaceAll(`"${original}"`, `"${hashed}"`);
+  }
+  writeFileSync(join(distPublic, 'index.html'), html);
+  console.log('  Hashed files:');
+  for (const [orig, hashed] of Object.entries(manifest)) {
+    console.log(`    ${orig} -> ${hashed}`);
+  }
+}
+
+// 6. Compress with gzip + brotli
 run(
  'compress',
  `for f in dist/web/public/*.js dist/web/public/*.css dist/web/public/*.html dist/web/public/vendor/*.js dist/web/public/vendor/*.css; do` +
@@ -250,10 +250,10 @@ if (isGlobalInstall) {
 } else {
    try {
        const require = createRequire(import.meta.url);
-        const xtermDir = join(require.resolve('xterm'), '..', '..');
-        const fitDir = join(require.resolve('xterm-addon-fit'), '..', '..');
-        const webglDir = join(require.resolve('xterm-addon-webgl'), '..', '..');
-        const unicode11Dir = join(require.resolve('xterm-addon-unicode11'), '..', '..');
+        const xtermDir = join(require.resolve('@xterm/xterm'), '..', '..');
+        const fitDir = join(require.resolve('@xterm/addon-fit'), '..', '..');
+        const webglDir = join(require.resolve('@xterm/addon-webgl'), '..', '..');
+        const unicode11Dir = join(require.resolve('@xterm/addon-unicode11'), '..', '..');
        const vendorDir = join(srcDir, 'web', 'public', 'vendor');

        const { mkdirSync, copyFileSync } = await import('fs');
@@ -263,19 +263,19 @@ if (isGlobalInstall) {
        // Minify xterm JS for dev vendor dir (npm packages don't ship .min.js)
        try {
            execSync(`npx esbuild "${join(xtermDir, 'lib', 'xterm.js')}" --minify --outfile="${join(vendorDir, 'xterm.min.js')}"`, { stdio: 'pipe' });
-            execSync(`npx esbuild "${join(fitDir, 'lib', 'xterm-addon-fit.js')}" --minify --outfile="${join(vendorDir, 'xterm-addon-fit.min.js')}"`, { stdio: 'pipe' });
-            execSync(`npx esbuild "${join(unicode11Dir, 'lib', 'xterm-addon-unicode11.js')}" --minify --outfile="${join(vendorDir, 'xterm-addon-unicode11.min.js')}"`, { stdio: 'pipe' });
+            execSync(`npx esbuild "${join(fitDir, 'lib', 'addon-fit.js')}" --minify --outfile="${join(vendorDir, 'xterm-addon-fit.min.js')}"`, { stdio: 'pipe' });
+            execSync(`npx esbuild "${join(unicode11Dir, 'lib', 'addon-unicode11.js')}" --minify --outfile="${join(vendorDir, 'xterm-addon-unicode11.min.js')}"`, { stdio: 'pipe' });
            console.log(colors.green('✓ xterm vendor files copied to src/web/public/vendor/'));
        } catch {
            // Fallback: copy unminified
            copyFileSync(join(xtermDir, 'lib', 'xterm.js'), join(vendorDir, 'xterm.min.js'));
-            copyFileSync(join(fitDir, 'lib', 'xterm-addon-fit.js'), join(vendorDir, 'xterm-addon-fit.min.js'));
-            copyFileSync(join(unicode11Dir, 'lib', 'xterm-addon-unicode11.js'), join(vendorDir, 'xterm-addon-unicode11.min.js'));
+            copyFileSync(join(fitDir, 'lib', 'addon-fit.js'), join(vendorDir, 'xterm-addon-fit.min.js'));
+            copyFileSync(join(unicode11Dir, 'lib', 'addon-unicode11.js'), join(vendorDir, 'xterm-addon-unicode11.min.js'));
            console.log(colors.green('✓ xterm vendor files copied') + colors.dim(' (unminified — esbuild not available)'));
        }

        // WebGL addon: copy unminified (matches build script behavior)
-        copyFileSync(join(webglDir, 'lib', 'xterm-addon-webgl.js'), join(vendorDir, 'xterm-addon-webgl.min.js'));
+        copyFileSync(join(webglDir, 'lib', 'addon-webgl.js'), join(vendorDir, 'xterm-addon-webgl.min.js'));

        // xterm-zerolag-input: bundle local package as IIFE for <script> tag loading
        try {
@@ -15,7 +15,7 @@
 import { EventEmitter } from 'node:events';
 import { v4 as uuidv4 } from 'uuid';
 import { ActiveBashTool } from './types.js';
-import { CleanupManager, Debouncer } from './utils/index.js';
+import { CleanupManager, Debouncer, stripAnsi } from './utils/index.js';

 // ========== Configuration Constants ==========

@@ -462,7 +462,7 @@ export class BashToolParser extends EventEmitter<BashToolParserEvents> {
   * Process a single line of terminal output (raw — will strip ANSI).
   */
  private processLine(line: string): void {
-    const cleanLine = this.stripAnsi(line);
+    const cleanLine = stripAnsi(line);
    this.processCleanLine(cleanLine);
  }

@@ -668,15 +668,6 @@ export class BashToolParser extends EventEmitter<BashToolParserEvents> {
    return this.deduplicatePaths(rawPaths);
  }

-  /**
-   * Strip ANSI escape codes from a string.
-   */
-  private stripAnsi(str: string): string {
-    // Comprehensive ANSI pattern
-    // eslint-disable-next-line no-control-regex
-    return str.replace(/\x1b(?:\[[0-9;?]*[A-Za-z]|\][^\x07\x1b]*(?:\x07|\x1b\\)|[=>])/g, '');
-  }
-
  /**
   * Schedule a debounced update emission.
   */
@@ -61,6 +61,8 @@ export interface CreateSessionOptions {
  claudeMode?: ClaudeMode;
  allowedTools?: string;
  openCodeConfig?: OpenCodeConfig;
+  /** When restoring after reboot, resume a previous Claude conversation by its session ID */
+  resumeSessionId?: string;
 }

 /** Options for respawning a dead pane. */
@@ -73,6 +75,8 @@ export interface RespawnPaneOptions {
  claudeMode?: ClaudeMode;
  allowedTools?: string;
  openCodeConfig?: OpenCodeConfig;
+  /** Resume a previous Claude conversation when respawning */
+  resumeSessionId?: string;
 }

 /**
@@ -324,6 +324,7 @@ export class Session extends EventEmitter {

  // OpenCode configuration (only for mode === 'opencode')
  private _openCodeConfig: OpenCodeConfig | undefined;
+  private _resumeSessionId: string | undefined;

  // Session color for visual differentiation
  private _color: import('./types.js').SessionColor = 'default';
@@ -382,6 +383,8 @@ export class Session extends EventEmitter {
      allowedTools?: string;
      /** OpenCode configuration (only for mode === 'opencode') */
      openCodeConfig?: OpenCodeConfig;
+      /** Resume a previous Claude conversation (used after server reboot) */
+      resumeSessionId?: string;
    }
  ) {
    super();
@@ -398,12 +401,10 @@ export class Session extends EventEmitter {
    this.createdAt = config.createdAt || Date.now();
    this.mode = config.mode || 'claude';
    this._name = config.name || '';
+    this._resumeSessionId = config.resumeSessionId;
    this._lastActivityAt = this.createdAt;
-    // Set claudeSessionId immediately — Codeman always passes --session-id ${this.id}
-    // to Claude CLI, so the Claude session ID always matches the Codeman session ID.
-    // This ensures subagent matching works even for recovered sessions (where
-    // startInteractive() hasn't been called yet).
-    this._claudeSessionId = this.id;
+    // Set claudeSessionId — when resuming, the Claude conversation ID is the resumed one.
+    this._claudeSessionId = config.resumeSessionId || this.id;
    this._mux = config.mux || null;
    this._useMux = config.useMux ?? (this._mux !== null && this._mux.isAvailable());
    this._muxSession = config.muxSession || null;
@@ -792,6 +793,7 @@ export class Session extends EventEmitter {
      cliAccountType: this._cliAccountType || undefined,
      cliLatestVersion: this._cliLatestVersion || undefined,
      openCodeConfig: this._openCodeConfig,
+      resumeSessionId: this._resumeSessionId,
    };
  }

@@ -910,6 +912,7 @@ export class Session extends EventEmitter {
            claudeMode: this._claudeMode,
            allowedTools: this._allowedTools,
            openCodeConfig: this._openCodeConfig,
+            resumeSessionId: this._resumeSessionId,
          });
          if (!newPid) {
            console.error('[Session] Failed to respawn pane, will create new session');
@@ -936,6 +939,7 @@ export class Session extends EventEmitter {
            claudeMode: this._claudeMode,
            allowedTools: this._allowedTools,
            openCodeConfig: this._openCodeConfig,
+            resumeSessionId: this._resumeSessionId,
          });
          console.log('[Session] Created mux session:', this._muxSession.muxName);
          // No extra sleep — createSession() already waits for tmux readiness
@@ -955,9 +959,8 @@ export class Session extends EventEmitter {
            }
          );

-          // Set claudeSessionId immediately since we passed --session-id to Claude
-          // The mux manager passes --session-id ${sessionId} to Claude
-          this._claudeSessionId = this.id;
+          // Set claudeSessionId — when resuming, the Claude conversation ID is the resumed one.
+          this._claudeSessionId = this._resumeSessionId || this.id;
        } catch (spawnErr) {
          console.error('[Session] Failed to spawn PTY for mux attachment:', spawnErr);
          this.emit('error', `Failed to attach to mux session: ${spawnErr}`);
@@ -1042,9 +1045,8 @@ export class Session extends EventEmitter {
      }
    }

-    // Set the claudeSessionId immediately since we passed --session-id
-    // This ensures subagent matching works without waiting for JSON messages
-    this._claudeSessionId = this.id;
+    // Set claudeSessionId — when resuming, the Claude conversation ID is the resumed one.
+    this._claudeSessionId = this._resumeSessionId || this.id;

    this._pid = this.ptyProcess.pid;
    console.log('[Session] Interactive PTY spawned with PID:', this._pid);
@@ -200,12 +200,24 @@ function buildSpawnCommand(options: {
  claudeMode?: ClaudeMode;
  allowedTools?: string;
  openCodeConfig?: OpenCodeConfig;
+  resumeSessionId?: string;
 }): string {
  if (options.mode === 'claude') {
    // Validate model to prevent command injection
    const safeModel = options.model && /^[a-zA-Z0-9._-]+$/.test(options.model) ? options.model : undefined;
    const modelFlag = safeModel ? ` --model ${safeModel}` : '';
-    return `claude${buildClaudePermissionFlags(options.claudeMode, options.allowedTools)} --session-id "${options.sessionId}"${modelFlag}`;
+    // Use --resume to restore a previous conversation, otherwise --session-id for new sessions.
+    // Wrap --resume in a fallback: if it exits non-zero (session not found, corrupt, etc.),
+    // fall back to a new session with --session-id so the pane doesn't die.
+    const safeResumeId =
+      options.resumeSessionId && /^[a-f0-9-]+$/.test(options.resumeSessionId) ? options.resumeSessionId : undefined;
+    const permFlags = buildClaudePermissionFlags(options.claudeMode, options.allowedTools);
+    if (safeResumeId) {
+      const resumeCmd = `claude${permFlags} --resume "${safeResumeId}"${modelFlag}`;
+      const fallbackCmd = `claude${permFlags} --session-id "${options.sessionId}"${modelFlag}`;
+      return `${resumeCmd} || ${fallbackCmd}`;
+    }
+    return `claude${permFlags} --session-id "${options.sessionId}"${modelFlag}`;
  }
  if (options.mode === 'opencode') {
    return buildOpenCodeCommand(options.openCodeConfig);
@@ -370,7 +382,18 @@ export class TmuxManager extends EventEmitter implements TerminalMultiplexer {
   * In test mode: creates an in-memory session only (no real tmux session).
   */
  async createSession(options: CreateSessionOptions): Promise<MuxSession> {
-    const { sessionId, workingDir, mode, name, niceConfig, model, claudeMode, allowedTools, openCodeConfig } = options;
+    const {
+      sessionId,
+      workingDir,
+      mode,
+      name,
+      niceConfig,
+      model,
+      claudeMode,
+      allowedTools,
+      openCodeConfig,
+      resumeSessionId,
+    } = options;
    const muxName = `codeman-${sessionId.slice(0, 8)}`;

    if (!isValidMuxName(muxName)) {
@@ -433,6 +456,7 @@ export class TmuxManager extends EventEmitter implements TerminalMultiplexer {
      claudeMode,
      allowedTools,
      openCodeConfig,
+      resumeSessionId,
    });

    const config = niceConfig || DEFAULT_NICE_CONFIG;
@@ -605,7 +629,17 @@ export class TmuxManager extends EventEmitter implements TerminalMultiplexer {
   * preserving the session and its scrollback buffer.
   */
  async respawnPane(options: RespawnPaneOptions): Promise<number | null> {
-    const { sessionId, workingDir, mode, niceConfig, model, claudeMode, allowedTools, openCodeConfig } = options;
+    const {
+      sessionId,
+      workingDir,
+      mode,
+      niceConfig,
+      model,
+      claudeMode,
+      allowedTools,
+      openCodeConfig,
+      resumeSessionId,
+    } = options;
    const session = this.sessions.get(sessionId);
    if (!session) return null;
    const muxName = session.muxName;
@@ -641,6 +675,7 @@ export class TmuxManager extends EventEmitter implements TerminalMultiplexer {
      claudeMode,
      allowedTools,
      openCodeConfig,
+      resumeSessionId,
    });
    const config = niceConfig || DEFAULT_NICE_CONFIG;
    const cmd = wrapWithNice(baseCmd, config);
@@ -143,6 +143,8 @@ export interface SessionState {
  cliLatestVersion?: string;
  /** OpenCode-specific configuration (only for mode === 'opencode') */
  openCodeConfig?: OpenCodeConfig;
+  /** Claude conversation session ID to resume after reboot (set by restore script) */
+  resumeSessionId?: string;
 }

 /**
@@ -11,4 +11,5 @@ export interface EventPort {
  batchTerminalData(sessionId: string, data: string): void;
  broadcastSessionStateDebounced(sessionId: string): void;
  batchTaskUpdate(sessionId: string, task: BackgroundTask): void;
+  getSseClientCount(): number;
 }
@@ -63,7 +63,7 @@
 * @class CodemanApp
 * @globals {CodemanApp} app - Singleton instance (also on window.app)
 *
- * @dependency constants.js (SSE_EVENTS, timing constants, escapeHtml, extractSyncSegments, DEC sync markers)
+ * @dependency constants.js (SSE_EVENTS, timing constants, escapeHtml, DEC_SYNC_STRIP_RE)
 * @dependency mobile-handlers.js (MobileDetection, KeyboardHandler, SwipeHandler)
 * @dependency voice-input.js (VoiceInput, DeepgramProvider)
 * @dependency notification-manager.js (NotificationManager class)
@@ -351,6 +351,9 @@ class CodemanApp {
    this.imagePopups = new Map(); // Map<imageId, { element, sessionId, filePath }>
    this.imagePopupZIndex = ZINDEX_IMAGE_POPUP_BASE;

+    // Tunnel indicator state
+    this._tunnelUrl = null;
+
    // Tab alert states: Map<sessionId, 'action' | 'idle'>
    this.tabAlerts = new Map();

@@ -519,6 +522,8 @@ class CodemanApp {
    });
    // Register service worker for push notifications
    this.registerServiceWorker();
+    // Fetch tunnel status for header indicator (desktop only)
+    this.loadTunnelStatus();
    // Share a single settings fetch between both consumers
    const settingsPromise = fetch('/api/settings').then(r => r.ok ? r.json() : null).catch(() => null);
    this.loadQuickStartCases(null, settingsPromise);
@@ -753,40 +758,73 @@ class CodemanApp {
    const MIN_ROWS = 10;

    const throttledResize = () => {
-      if (this._resizeTimeout) return;
+      // Trailing-edge debounce: ALL resize work (fit + clear + SIGWINCH) happens
+      // once after the user stops resizing. During active resize, the terminal
+      // stays at its old dimensions for up to 300ms.
+      //
+      // Why not fit() immediately? Each fitAddon.fit() reflows content at the
+      // new width — lines that were 7 rows become 10, and the overflow gets
+      // pushed into scrollback. With continuous resize events, this creates
+      // dozens of intermediate reflow states in scrollback, appearing as
+      // duplicate/garbled content when the user scrolls up.
+      //
+      // By deferring fit() to the trailing edge, there's exactly ONE reflow
+      // at the final dimensions, ONE viewport clear, and ONE Ink redraw.
+      if (this._resizeTimeout) {
+        clearTimeout(this._resizeTimeout);
+      }
      this._resizeTimeout = setTimeout(() => {
        this._resizeTimeout = null;
+        // Fit xterm.js to final container dimensions
        if (this.fitAddon) {
          this.fitAddon.fit();
-          // Skip server resize while mobile keyboard is visible — sending SIGWINCH
-          // causes Ink to re-render at the new row count, garbling terminal output.
-          // Local fit() still runs so xterm knows the viewport size for scrolling.
-          const keyboardUp = typeof KeyboardHandler !== 'undefined' && KeyboardHandler.keyboardVisible;
-          if (this.activeSessionId && !keyboardUp) {
-            const dims = this.fitAddon.proposeDimensions();
-            // Enforce minimum dimensions to prevent layout issues
-            const cols = dims ? Math.max(dims.cols, MIN_COLS) : MIN_COLS;
-            const rows = dims ? Math.max(dims.rows, MIN_ROWS) : MIN_ROWS;
-            // Only send resize if dimensions actually changed
-            if (!this._lastResizeDims ||
-                cols !== this._lastResizeDims.cols ||
-                rows !== this._lastResizeDims.rows) {
-              this._lastResizeDims = { cols, rows };
-              fetch(`/api/sessions/${this.activeSessionId}/resize`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ cols, rows })
-              }).catch(() => {});
-            }
+        }
+        // Flush any stale flicker buffer before clearing viewport
+        if (this.flickerFilterBuffer) {
+          if (this.flickerFilterTimeout) {
+            clearTimeout(this.flickerFilterTimeout);
+            this.flickerFilterTimeout = null;
+          }
+          this.flushFlickerBuffer();
+        }
+        // Clear viewport + scrollback for Ink-based sessions before sending SIGWINCH.
+        // fitAddon.fit() reflows content: lines at old width may wrap to more rows,
+        // pushing overflow into scrollback. Ink's cursor-up count is based on the
+        // pre-reflow line count, so ghost renders accumulate in scrollback.
+        // Fix: \x1b[3J (Erase Saved Lines) clears scrollback reflow debris,
+        // then \x1b[H\x1b[2J clears the viewport for a clean Ink redraw.
+        const activeResizeSession = this.activeSessionId ? this.sessions.get(this.activeSessionId) : null;
+        if (activeResizeSession && activeResizeSession.mode !== 'shell' && !activeResizeSession._ended
+            && this.terminal && this.isTerminalAtBottom()) {
+          this.terminal.write('\x1b[3J\x1b[H\x1b[2J');
+        }
+        // Skip server resize while mobile keyboard is visible — sending SIGWINCH
+        // causes Ink to re-render at the new row count, garbling terminal output.
+        // Local fit() still runs so xterm knows the viewport size for scrolling.
+        const keyboardUp = typeof KeyboardHandler !== 'undefined' && KeyboardHandler.keyboardVisible;
+        if (this.activeSessionId && !keyboardUp) {
+          const dims = this.fitAddon.proposeDimensions();
+          // Enforce minimum dimensions to prevent layout issues
+          const cols = dims ? Math.max(dims.cols, MIN_COLS) : MIN_COLS;
+          const rows = dims ? Math.max(dims.rows, MIN_ROWS) : MIN_ROWS;
+          // Only send resize if dimensions actually changed
+          if (!this._lastResizeDims ||
+              cols !== this._lastResizeDims.cols ||
+              rows !== this._lastResizeDims.rows) {
+            this._lastResizeDims = { cols, rows };
+            fetch(`/api/sessions/${this.activeSessionId}/resize`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ cols, rows })
+            }).catch(() => {});
          }
        }
-        // Update subagent connection lines when viewport resizes
+        // Update subagent connection lines and local echo at new dimensions
        this.updateConnectionLines();
-        // Re-render local echo overlay at new cell dimensions/positions
        if (this._localEchoOverlay?.hasPending) {
          this._localEchoOverlay.rerender();
        }
-      }, 100); // Throttle to 100ms
+      }, 300); // Trailing-edge: only fire after 300ms of no resize events
    };

    window.addEventListener('resize', throttledResize);
@@ -1126,6 +1164,7 @@ class CodemanApp {
    if (overlay) {
      overlay.classList.add('visible');
      this.loadTunnelStatus();
+      this.loadHistorySessions();
    }
  }

@@ -1142,6 +1181,121 @@ class CodemanApp {
    }
  }

+  /**
+   * Fetch and deduplicate history sessions (up to 2 per dir, max `limit` total).
+   * @returns {Promise<Array>} deduplicated session list, sorted by lastModified desc
+   */
+  async _fetchHistorySessions(limit = 12) {
+    const res = await fetch('/api/history/sessions');
+    const data = await res.json();
+    const sessions = data.sessions || [];
+    if (sessions.length === 0) return [];
+
+    const byDir = new Map();
+    for (const s of sessions) {
+      if (!byDir.has(s.workingDir)) byDir.set(s.workingDir, []);
+      byDir.get(s.workingDir).push(s);
+    }
+    const items = [];
+    for (const [, group] of byDir) {
+      items.push(...group.slice(0, 2));
+    }
+    items.sort((a, b) => new Date(b.lastModified) - new Date(a.lastModified));
+    return items.slice(0, limit);
+  }
+
+  async loadHistorySessions() {
+    const container = document.getElementById('historySessions');
+    const list = document.getElementById('historyList');
+    if (!container || !list) return;
+
+    try {
+      const display = await this._fetchHistorySessions(12);
+      if (display.length === 0) {
+        container.style.display = 'none';
+        return;
+      }
+
+      // Build DOM safely (no innerHTML with user data)
+      list.replaceChildren();
+      for (const s of display) {
+        const size = s.sizeBytes < 1024 ? `${s.sizeBytes}B`
+          : s.sizeBytes < 1048576 ? `${(s.sizeBytes / 1024).toFixed(0)}K`
+          : `${(s.sizeBytes / 1048576).toFixed(1)}M`;
+        const date = new Date(s.lastModified);
+        const timeStr = 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 item = document.createElement('div');
+        item.className = 'history-item';
+        item.title = s.workingDir;
+        item.addEventListener('click', () => this.resumeHistorySession(s.sessionId, s.workingDir));
+
+        const dirSpan = document.createElement('span');
+        dirSpan.className = 'history-item-dir';
+        dirSpan.textContent = shortDir;
+
+        const metaSpan = document.createElement('span');
+        metaSpan.className = 'history-item-meta';
+        metaSpan.textContent = timeStr;
+
+        const sizeSpan = document.createElement('span');
+        sizeSpan.className = 'history-item-size';
+        sizeSpan.textContent = size;
+
+        item.append(dirSpan, metaSpan, sizeSpan);
+        list.appendChild(item);
+      }
+
+      container.style.display = '';
+    } catch (err) {
+      console.error('[loadHistorySessions]', err);
+      container.style.display = 'none';
+    }
+  }
+
+  async resumeHistorySession(sessionId, workingDir) {
+    // Close the run mode menu if open
+    document.getElementById('runModeMenu')?.classList.remove('active');
+    try {
+      this.terminal.clear();
+      this.terminal.writeln(`\x1b[1;32m Resuming conversation ${sessionId.slice(0, 8)}...\x1b[0m`);
+
+      // Generate a session name from the working dir
+      const dirName = workingDir.split('/').pop() || 'session';
+      let startNumber = 1;
+      for (const [, session] of this.sessions) {
+        const match = session.name && session.name.match(/^w(\d+)-/);
+        if (match) {
+          const num = parseInt(match[1]);
+          if (num >= startNumber) startNumber = num + 1;
+        }
+      }
+      const name = `w${startNumber}-${dirName}`;
+
+      // Create session with resumeSessionId
+      const createRes = await fetch('/api/sessions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ workingDir, name, resumeSessionId: sessionId })
+      });
+      const createData = await createRes.json();
+      if (!createData.success) throw new Error(createData.error);
+
+      const newSessionId = createData.session.id;
+
+      // Start interactive
+      await fetch(`/api/sessions/${newSessionId}/interactive`, { method: 'POST' });
+
+      this.terminal.writeln(`\x1b[90m Session ${name} ready\x1b[0m`);
+      await this.selectSession(newSessionId);
+      this.terminal.focus();
+    } catch (err) {
+      this.terminal.writeln(`\x1b[1;31m Error: ${err.message}\x1b[0m`);
+    }
+  }
+
  // ═══════════════════════════════════════════════════════════════
  // Terminal Rendering
  // ═══════════════════════════════════════════════════════════════
@@ -1178,56 +1332,13 @@ class CodemanApp {
    const session = this.activeSessionId ? this.sessions.get(this.activeSessionId) : null;
    const flickerFilterEnabled = session?.flickerFilterEnabled ?? false;

-    // Always buffer Ink's cursor-up redraws regardless of flicker filter setting.
-    // Ink's status bar updates use cursor-up + erase-line + rewrite, which can split
-    // across render frames causing old/new status text to overlap (garbled output).
-    // Buffering for 50ms ensures the full redraw arrives atomically.
-    //
-    // Shell mode is excluded: shell readline also uses cursor-up for prompt redraws
-    // (e.g. zsh syntax highlighting on every keystroke), and there's no Ink status bar
-    // to protect. Applying the filter in shell mode delays character feedback until the
-    // user stops typing for 50ms, making the terminal feel unresponsive.
-    const isShellMode = session?.mode === 'shell';
-    const hasCursorUpRedraw = !isShellMode && /\x1b\[\d{1,2}A/.test(data);
-    if (hasCursorUpRedraw || (this.flickerFilterActive && !flickerFilterEnabled)) {
-      this.flickerFilterActive = true;
-      this.flickerFilterBuffer += data;
+    // xterm.js 6.0 handles DEC 2026 synchronized output natively — Ink's cursor-up
+    // redraws are wrapped in 2026h/2026l markers and rendered atomically by xterm.js.
+    // No client-side cursor-up detection/buffering needed. The old 50ms flicker filter
+    // was actively harmful: it accumulated multiple resize redraws and flushed them
+    // together, causing stacked ghost renders due to reflow line-count mismatches.

-      // Only reset the 50ms timer on cursor-up events (start of a new Ink redraw cycle).
-      // Non-cursor-up events while the filter is active are trailing data from the same
-      // redraw — don't extend the deadline further. Without this guard, a busy Claude
-      // session emitting terminal data faster than SYNC_WAIT_TIMEOUT_MS never flushes,
-      // accumulating MBs in flickerFilterBuffer that freeze Chrome all at once.
-      if (hasCursorUpRedraw) {
-        if (this.flickerFilterTimeout) {
-          clearTimeout(this.flickerFilterTimeout);
-        }
-        this.flickerFilterTimeout = setTimeout(() => {
-          this.flickerFilterTimeout = null;
-          this.flushFlickerBuffer();
-        }, SYNC_WAIT_TIMEOUT_MS); // 50ms buffer window
-      } else if (!this.flickerFilterTimeout) {
-        // Safety: if no timer is running for some reason, ensure we eventually flush.
-        this.flickerFilterTimeout = setTimeout(() => {
-          this.flickerFilterTimeout = null;
-          this.flushFlickerBuffer();
-        }, SYNC_WAIT_TIMEOUT_MS);
-      }
-
-      // Safety valve: if buffer grew very large (e.g. from a burst before the timer fired),
-      // flush immediately to avoid writing a huge block all at once.
-      if (this.flickerFilterBuffer.length > 256 * 1024) {
-        if (this.flickerFilterTimeout) {
-          clearTimeout(this.flickerFilterTimeout);
-          this.flickerFilterTimeout = null;
-        }
-        this.flushFlickerBuffer();
-      }
-
-      return;
-    }
-
-    // Opt-in flicker filter: also buffer screen clear patterns
+    // Opt-in flicker filter: buffer screen clear patterns (for sessions that enable it)
    if (flickerFilterEnabled) {
      const hasScreenClear = data.includes('\x1b[2J') ||
                             data.includes('\x1b[H\x1b[J') ||
@@ -1260,34 +1371,10 @@ class CodemanApp {
    if (!this.writeFrameScheduled) {
      this.writeFrameScheduled = true;
      requestAnimationFrame(() => {
-        if (this.pendingWrites.length > 0 && this.terminal) {
-          // Join chunks for sync marker detection
-          const pending = this.pendingWrites.join('');
-          // Check if we have an incomplete sync block (SYNC_START without SYNC_END)
-          const hasStart = pending.includes(DEC_SYNC_START);
-          const hasEnd = pending.includes(DEC_SYNC_END);
-
-          if (hasStart && !hasEnd) {
-            // Incomplete sync block - wait for more data (up to 50ms max)
-            if (!this.syncWaitTimeout) {
-              this.syncWaitTimeout = setTimeout(() => {
-                this.syncWaitTimeout = null;
-                // Force flush after timeout to prevent stuck state
-                this.flushPendingWrites();
-              }, 50);
-            }
-            this.writeFrameScheduled = false;
-            return;
-          }
-
-          // Clear any pending sync wait timeout
-          if (this.syncWaitTimeout) {
-            clearTimeout(this.syncWaitTimeout);
-            this.syncWaitTimeout = null;
-          }
-
-          this.flushPendingWrites();
-        }
+        // 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.
+        this.flushPendingWrites();
        this.writeFrameScheduled = false;
      });
    }
@@ -1372,57 +1459,35 @@ class CodemanApp {
    if (this.pendingWrites.length === 0 || !this.terminal) return;

    const _t0 = performance.now();
-    // Extract segments, stripping DEC 2026 markers
-    // This implements synchronized output for xterm.js which doesn't support DEC 2026 natively
-    const _joinedLen = this.pendingWrites.reduce((s, w) => s + w.length, 0);
-    if (_joinedLen > 16384) _crashDiag.log(`FLUSH: ${(_joinedLen/1024).toFixed(0)}KB`);
+    // xterm.js 6.0+ natively handles DEC 2026 synchronized output markers.
+    // Pass raw data through — xterm.js buffers content between markers and
+    // renders atomically, eliminating split-frame Ink redraws.
    const joined = this.pendingWrites.join('');
    this.pendingWrites = [];
+    const _joinedLen = joined.length;
+    if (_joinedLen > 16384) _crashDiag.log(`FLUSH: ${(_joinedLen/1024).toFixed(0)}KB`);

-    const segments = extractSyncSegments(joined);
-
-    // Write segments respecting a per-frame byte budget.
-    // Each DEC 2026 sync segment is a complete Ink redraw — writing whole segments
-    // preserves atomicity (no flicker). But when total data exceeds 48KB, defer
-    // remaining segments to the next frame to prevent terminal.write() from blocking
-    // the main thread. 141KB single-frame writes have been observed to freeze Chrome
-    // for 2+ minutes even with the canvas renderer.
+    // Per-frame byte budget to prevent main thread blocking.
+    // Large writes (141KB+) can freeze Chrome for 2+ minutes.
    const MAX_FRAME_BYTES = 65536; // 64KB budget per frame
-    let bytesThisFrame = 0;
    let deferred = false;

-    for (let i = 0; i < segments.length; i++) {
-      const segment = segments[i];
-      if (!segment) continue;
-      const content = segment.startsWith(DEC_SYNC_START)
-        ? segment.slice(DEC_SYNC_START.length)
-        : segment;
-      if (!content) continue;
-
-      // If we'd exceed the budget, defer this and all remaining segments
-      if (bytesThisFrame > 0 && bytesThisFrame + content.length > MAX_FRAME_BYTES) {
-        // Re-queue remaining segments as raw content for next flush
-        const remaining = segments.slice(i).map(s => {
-          if (!s) return '';
-          return s.startsWith(DEC_SYNC_START) ? s.slice(DEC_SYNC_START.length) : s;
-        }).filter(Boolean).join('');
-        if (remaining) {
-          this.pendingWrites.push(remaining);
-          if (!this.writeFrameScheduled) {
-            this.writeFrameScheduled = true;
-            requestAnimationFrame(() => {
-              this.flushPendingWrites();
-              this.writeFrameScheduled = false;
-            });
-          }
-        }
-        deferred = true;
-        break;
+    if (_joinedLen <= MAX_FRAME_BYTES) {
+      this.terminal.write(joined);
+    } else {
+      // Write first chunk now, defer rest to next frame
+      this.terminal.write(joined.slice(0, MAX_FRAME_BYTES));
+      this.pendingWrites.push(joined.slice(MAX_FRAME_BYTES));
+      deferred = true;
+      if (!this.writeFrameScheduled) {
+        this.writeFrameScheduled = true;
+        requestAnimationFrame(() => {
+          this.flushPendingWrites();
+          this.writeFrameScheduled = false;
+        });
      }
-
-      this.terminal.write(content);
-      bytesThisFrame += content.length;
    }
+    const bytesThisFrame = deferred ? MAX_FRAME_BYTES : _joinedLen;
    const _dt = performance.now() - _t0;
    if (_dt > 100 || deferred) console.warn(`[CRASH-DIAG] flushPendingWrites: ${_dt.toFixed(0)}ms, ${(bytesThisFrame/1024).toFixed(0)}KB written${deferred ? ', rest deferred' : ''} (total ${(_joinedLen/1024).toFixed(0)}KB)`);

@@ -2617,8 +2682,10 @@ class CodemanApp {
  // Tunnel
  _onTunnelStarted(data) {
    console.log('[Tunnel] Started:', data.url);
+    this._tunnelUrl = data.url;
    this._dismissTunnelConnecting();
    this._updateTunnelUrlDisplay(data.url);
+    this._updateTunnelIndicator(true);
    const welcomeVisible = document.getElementById('welcomeOverlay')?.classList.contains('visible');
    if (welcomeVisible) {
      // On welcome screen: QR appears inline, expanded first
@@ -2634,9 +2701,12 @@ class CodemanApp {

  _onTunnelStopped() {
    console.log('[Tunnel] Stopped');
+    this._tunnelUrl = null;
    this._dismissTunnelConnecting();
    this._updateTunnelUrlDisplay(null);
    this._updateWelcomeTunnelBtn(false);
+    this._updateTunnelIndicator(false);
+    this.closeTunnelPanel();
    this.closeTunnelQR();
  }

@@ -2998,6 +3068,9 @@ class CodemanApp {
      }
    });

+    // Restore tabs that were open before refresh but are no longer on the server
+    this._restoreEndedTabs();
+
    // Sync sessionOrder with current sessions (preserve order, add new, remove stale)
    this.syncSessionOrder();

@@ -3289,7 +3362,8 @@ class CodemanApp {
      const tallTabsEnabled = this._tallTabsEnabled ?? false;
      const showFolder = tallTabsEnabled && session.name && folderName && folderName !== name;

-      parts.push(`<div class="session-tab ${isActive ? 'active' : ''}${alertClass}" data-id="${id}" data-color="${color}" 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)}"` : ''}>
+      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)}"` : ''}>
          <span class="tab-status ${status}" aria-hidden="true"></span>
          <span class="tab-info">
            <span class="tab-name-row">
@@ -3307,6 +3381,9 @@ class CodemanApp {

    container.innerHTML = parts.join('');

+    // Persist tab metadata for refresh recovery
+    this._saveTabMetadata();
+
    // Set up drag-and-drop handlers for tab reordering
    this.setupTabDragHandlers();

@@ -3406,6 +3483,33 @@ class CodemanApp {
    }
  }

+  // Save tab metadata to localStorage so ended sessions can be restored after refresh
+  _saveTabMetadata() {
+    try {
+      const meta = {};
+      for (const [id, s] of this.sessions) {
+        if (s._ended) continue; // Don't persist ended stubs back
+        meta[id] = { id, name: s.name || '', workingDir: s.workingDir || '', mode: s.mode || 'claude', color: s.color || 'default' };
+      }
+      localStorage.setItem('codeman-tab-meta', JSON.stringify(meta));
+    } catch { /* ignore */ }
+  }
+
+  // Restore tabs that were open before refresh but are no longer on the server
+  _restoreEndedTabs() {
+    try {
+      const saved = localStorage.getItem('codeman-tab-meta');
+      if (!saved) return;
+      const meta = JSON.parse(saved);
+      for (const [id, info] of Object.entries(meta)) {
+        if (!this.sessions.has(id)) {
+          // Add a stub session so the tab renders
+          this.sessions.set(id, { id, name: info.name, workingDir: info.workingDir, mode: info.mode, color: info.color, status: 'ended', _ended: true });
+        }
+      }
+    } catch { /* ignore */ }
+  }
+
  // Set up drag-and-drop handlers on tab elements
  setupTabDragHandlers() {
    const container = this.$('sessionTabs');
@@ -3629,12 +3733,22 @@ class CodemanApp {
    // Check if this is a restored session that needs to be attached
    const session = this.sessions.get(sessionId);

+    // Ended tabs (restored from localStorage, no longer on server) — show message, skip buffer load
+    if (session?._ended) {
+      this.terminal.clear();
+      this.terminal.write('\r\n  \x1b[2mSession ended. Close tab or click to reopen.\x1b[0m\r\n');
+      return;
+    }
+
    // Track working directory for path normalization in Project Insights
    this.currentSessionWorkingDir = session?.workingDir || null;
    if (session && session.pid === null && session.status === 'idle') {
-      // This is a restored session - attach to the existing screen
+      // This is a restored session - attach to the existing screen/shell
      try {
-        await fetch(`/api/sessions/${sessionId}/interactive`, { method: 'POST' });
+        const endpoint = session.mode === 'shell'
+          ? `/api/sessions/${sessionId}/shell`
+          : `/api/sessions/${sessionId}/interactive`;
+        await fetch(endpoint, { method: 'POST' });
        // Update local session state
        session.status = 'busy';
      } catch (err) {
@@ -4121,6 +4235,8 @@ class CodemanApp {
    this._runMode = mode;
    try { localStorage.setItem('codeman_runMode', mode); } catch {}
    this._applyRunMode();
+    // Sync to server for cross-device persistence
+    this._apiPut('/api/settings', { runMode: mode }).catch(() => {});
    // Close menu
    document.getElementById('runModeMenu')?.classList.remove('active');
  }
@@ -4134,8 +4250,9 @@ class CodemanApp {
    menu.querySelectorAll('.run-mode-option').forEach(btn => {
      btn.classList.toggle('selected', btn.dataset.mode === this.runMode);
    });
-    // Close on click outside
+    // Load history sessions when menu opens
    if (menu.classList.contains('active')) {
+      this._loadRunModeHistory();
      const close = (ev) => {
        if (!menu.contains(ev.target)) {
          menu.classList.remove('active');
@@ -4146,6 +4263,52 @@ class CodemanApp {
    }
  }

+  async _loadRunModeHistory() {
+    const container = document.getElementById('runModeHistory');
+    if (!container) return;
+    container.innerHTML = '<div class="run-mode-hist-empty">Loading...</div>';
+
+    try {
+      const display = await this._fetchHistorySessions(10);
+      if (display.length === 0) {
+        container.innerHTML = '<div class="run-mode-hist-empty">No history</div>';
+        return;
+      }
+
+      // Build items using DOM API for reliable mobile touch handling
+      container.replaceChildren();
+      for (const s of display) {
+        const date = new Date(s.lastModified);
+        const timeStr = 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 btn = document.createElement('button');
+        btn.className = 'run-mode-option';
+        btn.title = s.workingDir;
+        btn.dataset.sessionId = s.sessionId;
+        btn.dataset.workingDir = s.workingDir;
+
+        const dirSpan = document.createElement('span');
+        dirSpan.className = 'hist-dir';
+        dirSpan.textContent = shortDir;
+
+        const metaSpan = document.createElement('span');
+        metaSpan.className = 'hist-meta';
+        metaSpan.textContent = timeStr;
+
+        btn.append(dirSpan, metaSpan);
+        btn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          this.resumeHistorySession(s.sessionId, s.workingDir);
+        });
+        container.appendChild(btn);
+      }
+    } catch (err) {
+      container.innerHTML = '<div class="run-mode-hist-empty">Failed to load</div>';
+    }
+  }
+
  _applyRunMode() {
    const mode = this.runMode;
    const runBtn = document.getElementById('runBtn');
@@ -5472,6 +5635,9 @@ class CodemanApp {
  // ═══════════════════════════════════════════════════════════════

  loadRespawnPresets() {
+    // Custom presets: prefer server-synced cache, fall back to legacy localStorage key
+    const serverCache = this._serverRespawnPresets;
+    if (serverCache) return [...BUILTIN_RESPAWN_PRESETS, ...serverCache];
    const saved = localStorage.getItem('codeman-respawn-presets');
    const custom = saved ? JSON.parse(saved) : [];
    return [...BUILTIN_RESPAWN_PRESETS, ...custom];
@@ -5480,7 +5646,11 @@ class CodemanApp {
  saveRespawnPresets(presets) {
    // Only save custom presets (not built-in)
    const custom = presets.filter(p => !p.builtIn);
+    // Update local cache + legacy localStorage
+    this._serverRespawnPresets = custom;
    localStorage.setItem('codeman-respawn-presets', JSON.stringify(custom));
+    // Persist to server (cross-device sync)
+    this._apiPut('/api/settings', { respawnPresets: custom }).catch(() => {});
  }

  renderPresetDropdown() {
@@ -6471,11 +6641,15 @@ class CodemanApp {
      const res = await fetch('/api/tunnel/status');
      const status = await res.json();
      const active = status.running && status.url;
-      this._updateTunnelUrlDisplay(active ? status.url : null);
-      this._updateWelcomeTunnelBtn(!!active, active ? status.url : null);
+      this._tunnelUrl = active ? status.url : null;
+      this._updateTunnelUrlDisplay(this._tunnelUrl);
+      this._updateWelcomeTunnelBtn(!!active, this._tunnelUrl);
+      this._updateTunnelIndicator(!!active);
    } catch {
+      this._tunnelUrl = null;
      this._updateTunnelUrlDisplay(null);
      this._updateWelcomeTunnelBtn(false);
+      this._updateTunnelIndicator(false);
    }
  }

@@ -6803,6 +6977,214 @@ class CodemanApp {
    }
  }

+  // ═══════════════════════════════════════════════════════════════
+  // Tunnel Header Indicator & Panel (desktop only)
+  // ═══════════════════════════════════════════════════════════════
+
+  _updateTunnelIndicator(active) {
+    if (MobileDetection.getDeviceType() === 'mobile') return;
+    const indicator = document.getElementById('tunnelIndicator');
+    if (!indicator) return;
+    indicator.style.display = active ? 'flex' : 'none';
+    indicator.classList.remove('connecting');
+  }
+
+  toggleTunnelPanel() {
+    const existing = document.getElementById('tunnelPanel');
+    if (existing) {
+      this.closeTunnelPanel();
+      return;
+    }
+    this._openTunnelPanel();
+  }
+
+  async _openTunnelPanel() {
+    const panel = document.createElement('div');
+    panel.className = 'tunnel-panel';
+    panel.id = 'tunnelPanel';
+    panel.innerHTML = `
+      <div class="tunnel-panel-header">
+        <h3>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+          Cloudflare Tunnel
+          <span class="tunnel-panel-status" id="tunnelPanelStatus">Loading...</span>
+        </h3>
+      </div>
+      <div class="tunnel-panel-body" id="tunnelPanelBody">
+        <div style="font-size:12px;color:var(--text-muted);padding:8px 0">Loading...</div>
+      </div>
+    `;
+    document.body.appendChild(panel);
+
+    // Close on outside click
+    this._tunnelPanelClickHandler = (e) => {
+      if (!panel.contains(e.target) && e.target.id !== 'tunnelIndicator' && !e.target.closest('.tunnel-indicator')) {
+        this.closeTunnelPanel();
+      }
+    };
+    setTimeout(() => document.addEventListener('click', this._tunnelPanelClickHandler), 0);
+
+    // Close on Escape
+    this._tunnelPanelEscHandler = (e) => { if (e.key === 'Escape') this.closeTunnelPanel(); };
+    document.addEventListener('keydown', this._tunnelPanelEscHandler);
+
+    // Fetch tunnel info
+    try {
+      const res = await fetch('/api/tunnel/info');
+      const info = await res.json();
+      this._renderTunnelPanel(info);
+    } catch {
+      const body = document.getElementById('tunnelPanelBody');
+      if (body) body.innerHTML = '<div style="font-size:12px;color:var(--red);padding:8px 0">Failed to load tunnel info</div>';
+    }
+  }
+
+  _renderTunnelPanel(info) {
+    const statusEl = document.getElementById('tunnelPanelStatus');
+    const body = document.getElementById('tunnelPanelBody');
+    if (!statusEl || !body) return;
+
+    statusEl.textContent = info.running ? 'Connected' : 'Offline';
+    statusEl.className = 'tunnel-panel-status' + (info.running ? '' : ' offline');
+
+    let html = '';
+
+    // URL section
+    if (info.url) {
+      html += `
+        <div class="tunnel-panel-section">
+          <div class="tunnel-panel-label">URL</div>
+          <div class="tunnel-panel-url" id="tunnelPanelUrl" title="Click to copy">${escapeHtml(info.url)}</div>
+        </div>`;
+    }
+
+    // Clients section
+    html += `
+      <div class="tunnel-panel-section">
+        <div class="tunnel-panel-label">Connections</div>
+        <div class="tunnel-panel-stat">
+          <span>Remote Clients</span>
+          <span class="tunnel-panel-stat-value">${info.sseClients}</span>
+        </div>`;
+
+    if (info.authEnabled) {
+      html += `
+        <div class="tunnel-panel-stat">
+          <span>Auth Sessions</span>
+          <span class="tunnel-panel-stat-value">${info.authSessions.length}</span>
+        </div>`;
+    }
+    html += '</div>';
+
+    // Auth sessions detail
+    if (info.authEnabled && info.authSessions.length > 0) {
+      html += '<div class="tunnel-panel-section"><div class="tunnel-panel-label">Authenticated Devices</div>';
+      for (const s of info.authSessions) {
+        const ua = s.ua || 'Unknown';
+        const browser = ua.match(/Chrome|Firefox|Safari|Edge|Mobile/)?.[0] || 'Browser';
+        const ago = this._formatTimeAgo(s.createdAt);
+        html += `
+          <div class="tunnel-panel-session">
+            <span class="tunnel-panel-session-dot"></span>
+            <span class="tunnel-panel-session-info" title="${escapeHtml(ua)}">${escapeHtml(browser)} &middot; ${escapeHtml(s.ip)} &middot; ${ago}</span>
+            <span class="tunnel-panel-session-method">${s.method}</span>
+          </div>`;
+      }
+      html += '</div>';
+    }
+
+    // Actions
+    html += '<div class="tunnel-panel-actions">';
+    if (info.running) {
+      html += `
+        <button class="tunnel-panel-btn btn-qr" onclick="app.showTunnelQR();app.closeTunnelPanel()">QR Code</button>
+        <button class="tunnel-panel-btn btn-stop" onclick="app._tunnelPanelToggle(false)">Stop Tunnel</button>`;
+    } else {
+      html += `<button class="tunnel-panel-btn btn-start" onclick="app._tunnelPanelToggle(true)">Start Tunnel</button>`;
+    }
+    html += '</div>';
+
+    // Revoke all sessions button
+    if (info.authEnabled && info.authSessions.length > 0) {
+      html += `
+        <div style="padding-top:8px">
+          <button class="tunnel-panel-btn btn-revoke" style="width:100%" onclick="app._tunnelPanelRevokeAll()">Revoke All Sessions</button>
+        </div>`;
+    }
+
+    body.innerHTML = html;
+
+    // Bind URL copy handler
+    const urlEl = document.getElementById('tunnelPanelUrl');
+    if (urlEl) {
+      urlEl.onclick = () => {
+        navigator.clipboard.writeText(info.url).then(() => this.showToast('Tunnel URL copied', 'success'));
+      };
+    }
+  }
+
+  _formatTimeAgo(timestamp) {
+    const diff = Date.now() - timestamp;
+    const mins = Math.floor(diff / 60000);
+    if (mins < 1) return 'just now';
+    if (mins < 60) return `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h ago`;
+    return `${Math.floor(hrs / 24)}d ago`;
+  }
+
+  async _tunnelPanelToggle(enable) {
+    try {
+      await fetch('/api/settings', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ tunnelEnabled: enable }),
+      });
+      if (enable) {
+        this._updateTunnelIndicator(false);
+        const indicator = document.getElementById('tunnelIndicator');
+        if (indicator) {
+          indicator.style.display = 'flex';
+          indicator.classList.add('connecting');
+        }
+        this.showToast('Tunnel starting...', 'info');
+        this._showTunnelConnecting();
+        this._pollTunnelStatus();
+      } else {
+        this.showToast('Tunnel stopped', 'info');
+      }
+      this.closeTunnelPanel();
+    } catch {
+      this.showToast('Failed to toggle tunnel', 'error');
+    }
+  }
+
+  async _tunnelPanelRevokeAll() {
+    try {
+      await fetch('/api/auth/revoke', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' });
+      this.showToast('All sessions revoked', 'success');
+      // Refresh panel
+      const res = await fetch('/api/tunnel/info');
+      const info = await res.json();
+      this._renderTunnelPanel(info);
+    } catch {
+      this.showToast('Failed to revoke sessions', 'error');
+    }
+  }
+
+  closeTunnelPanel() {
+    const panel = document.getElementById('tunnelPanel');
+    if (panel) panel.remove();
+    if (this._tunnelPanelClickHandler) {
+      document.removeEventListener('click', this._tunnelPanelClickHandler);
+      this._tunnelPanelClickHandler = null;
+    }
+    if (this._tunnelPanelEscHandler) {
+      document.removeEventListener('keydown', this._tunnelPanelEscHandler);
+      this._tunnelPanelEscHandler = null;
+    }
+  }
+
  toggleDeepgramKeyVisibility() {
    const input = document.getElementById('voiceDeepgramKey');
    const btn = document.getElementById('voiceKeyToggleBtn');
@@ -7427,7 +7809,7 @@ class CodemanApp {
      const settings = settingsPromise ? await settingsPromise : await fetch('/api/settings').then(r => r.ok ? r.json() : null);
      if (settings) {
        // Extract notification prefs before merging app settings
-        const { notificationPreferences, voiceSettings, ...appSettings } = settings;
+        const { notificationPreferences, voiceSettings, respawnPresets, runMode, ...appSettings } = settings;
        // Filter out display settings — these are device-specific (mobile vs desktop)
        // and should not be synced from the server to avoid overriding mobile defaults.
        // NOTE: Feature toggles (subagentTrackingEnabled, imageWatcherEnabled, ralphTrackerEnabled)
@@ -7472,6 +7854,30 @@ class CodemanApp {
          }
        }

+        // Sync respawn presets from server (server is source of truth)
+        if (respawnPresets && Array.isArray(respawnPresets)) {
+          this._serverRespawnPresets = respawnPresets;
+          // Also update localStorage for offline access
+          localStorage.setItem('codeman-respawn-presets', JSON.stringify(respawnPresets));
+        } else {
+          // Migration: push existing localStorage presets to server
+          const localPresets = localStorage.getItem('codeman-respawn-presets');
+          if (localPresets) {
+            const parsed = JSON.parse(localPresets);
+            if (parsed.length > 0) {
+              this._serverRespawnPresets = parsed;
+              this._apiPut('/api/settings', { respawnPresets: parsed }).catch(() => {});
+            }
+          }
+        }
+
+        // Sync run mode from server
+        if (runMode) {
+          this.runMode = runMode;
+          try { localStorage.setItem('codeman_runMode', runMode); } catch {}
+          this._applyRunMode();
+        }
+
        return merged;
      }
    } catch (err) {
@@ -2,13 +2,12 @@
 * @fileoverview Shared constants, utility functions, and SSE event type registry for all frontend modules.
 *
 * This is the first script loaded in index.html. Every other frontend module depends on the
- * globals defined here: timing constants, Z-index layers, DEC 2026 sync markers, respawn
- * preset definitions, the SSE_EVENTS registry, and shared utilities (escapeHtml, extractSyncSegments,
+ * globals defined here: timing constants, Z-index layers, respawn
+ * preset definitions, the SSE_EVENTS registry, and shared utilities (escapeHtml,
 * getEventCoords, scheduleBackground, urlBase64ToUint8Array).
 *
 * @globals {function} urlBase64ToUint8Array - VAPID key conversion for Web Push
 * @globals {function} scheduleBackground - scheduler.postTask wrapper (background priority)
- * @globals {function} extractSyncSegments - DEC 2026 terminal sync marker parser
 * @globals {function} getEventCoords - Unified mouse/touch coordinate extractor
 * @globals {function} escapeHtml - XSS-safe HTML escaping
 * @globals {object} SSE_EVENTS - Centralized SSE event type constants (~73 event types)
@@ -42,7 +41,7 @@ function urlBase64ToUint8Array(base64String) {
 // ═══════════════════════════════════════════════════════════════

 // Default terminal scrollback (can be changed via settings)
-const DEFAULT_SCROLLBACK = 5000;
+const DEFAULT_SCROLLBACK = 20000;

 // Timing constants
 const STUCK_THRESHOLD_DEFAULT_MS = 600000;  // 10 minutes - default for stuck detection
@@ -79,14 +78,8 @@ function scheduleBackground(fn) {
  else { requestAnimationFrame(fn); }
 }

-// DEC mode 2026 - Synchronized Output
-// Wrap terminal writes with these markers to prevent partial-frame flicker.
-// Terminal buffers all output between markers and renders atomically.
-// Supported by: WezTerm, Kitty, Ghostty, iTerm2 3.5+, Windows Terminal, VSCode terminal
-// xterm.js doesn't support DEC 2026 natively, so we implement buffering ourselves.
-const DEC_SYNC_START = '\x1b[?2026h';
-const DEC_SYNC_END = '\x1b[?2026l';
-// Pre-compiled regex for stripping DEC 2026 markers (single pass instead of two replaceAll calls)
+// DEC mode 2026 marker stripping — xterm.js 6.0 handles sync natively,
+// but server-sent terminal buffers may still contain markers from Claude CLI.
 const DEC_SYNC_STRIP_RE = /\x1b\[\?2026[hl]/g;

 // Built-in respawn configuration presets
@@ -303,59 +296,6 @@ function getEventCoords(e) {
  return { clientX: e.clientX, clientY: e.clientY };
 }

-/**
- * Process data containing DEC 2026 sync markers.
- * Strips markers and returns segments that should be written atomically.
- * Each returned segment represents content between SYNC_START and SYNC_END.
- * Content outside sync blocks is returned as-is.
- *
- * @param {string} data - Raw terminal data with potential sync markers
- * @returns {string[]} - Array of content segments to write (markers stripped)
- */
-function extractSyncSegments(data) {
-  const segments = [];
-  let remaining = data;
-
-  while (remaining.length > 0) {
-    const startIdx = remaining.indexOf(DEC_SYNC_START);
-
-    if (startIdx === -1) {
-      // No more sync blocks, return rest as-is
-      if (remaining.length > 0) {
-        segments.push(remaining);
-      }
-      break;
-    }
-
-    // Content before sync block (if any)
-    if (startIdx > 0) {
-      segments.push(remaining.slice(0, startIdx));
-    }
-
-    // Find matching end marker
-    const afterStart = remaining.slice(startIdx + DEC_SYNC_START.length);
-    const endIdx = afterStart.indexOf(DEC_SYNC_END);
-
-    if (endIdx === -1) {
-      // No end marker found - sync block continues in next chunk
-      // Include the start marker so it can be handled when more data arrives
-      segments.push(remaining.slice(startIdx));
-      break;
-    }
-
-    // Extract synchronized content (without markers)
-    const syncContent = afterStart.slice(0, endIdx);
-    if (syncContent.length > 0) {
-      segments.push(syncContent);
-    }
-
-    // Continue with content after end marker
-    remaining = afterStart.slice(endIdx + DEC_SYNC_END.length);
-  }
-
-  return segments;
-}
-
 // HTML escape utility (shared by NotificationManager, CodemanApp, and ralph-wizard.js)
 const _htmlEscapeMap = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
 const _htmlEscapePattern = /[&<>"']/g;
@@ -2,15 +2,15 @@
 <html lang="en">
 <head>
  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <meta name="description" content="Claude Code session manager with web interface">
  <meta name="theme-color" content="#0a0a0a">
  <meta name="google" content="notranslate">
  <link rel="manifest" href="manifest.json">
  <title>Codeman</title>
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2360a5fa'/%3E%3Cstop offset='100%25' stop-color='%233b82f6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='6' fill='%230a0a0a'/%3E%3Cpath d='M18 4L8 18h6l-2 10 10-14h-6z' fill='url(%23g)'/%3E%3C/svg%3E">
-  <link rel="stylesheet" href="styles.css?v=0.1631">
-  <link rel="stylesheet" href="mobile.css?v=0.1631" media="(max-width: 1023px)">
+  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="mobile.css" media="(max-width: 1023px)">
  <!-- xterm.css loaded async — terminal won't display until xterm.js runs anyway -->
  <link rel="preload" href="vendor/xterm.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="vendor/xterm.css"></noscript>
@@ -20,12 +20,12 @@
  <script defer src="vendor/xterm-addon-fit.min.js"></script>
  <script defer src="vendor/xterm-addon-webgl.min.js"></script>
  <script defer src="vendor/xterm-addon-unicode11.min.js"></script>
-  <script defer src="vendor/xterm-zerolag-input.js?v=0.3.2"></script>
+  <script defer src="vendor/xterm-zerolag-input.js"></script>
  <!-- Synchronous mobile detection — runs before first paint to prevent panel flash -->
  <script>if(window.innerWidth<768||(('ontouchstart' in window||navigator.maxTouchPoints>0)&&window.innerWidth<1024))document.documentElement.classList.add('mobile-init');</script>
  <!-- Inline critical CSS for instant skeleton paint (before styles.css loads) -->
  <style>
-    .loading-skeleton{display:flex;flex-direction:column;height:100vh;background:#0a0a0a}
+    .loading-skeleton{display:flex;flex-direction:column;height:100vh;height:100dvh;background:#0a0a0a}
    .skeleton-header{height:40px;background:#111;border-bottom:1px solid #1a1a2e;display:flex;align-items:center;padding:0 12px}
    .skeleton-brand{color:#60a5fa;font-size:14px;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;opacity:.7}
    .skeleton-tabs{display:flex;gap:4px;margin-left:16px}
@@ -59,6 +59,9 @@
      </div>

      <div class="header-right">
+        <button class="tunnel-indicator" id="tunnelIndicator" style="display: none;" onclick="app.toggleTunnelPanel()" title="Cloudflare Tunnel" aria-label="Tunnel status">
+          <span class="tunnel-dot"></span>
+        </button>
        <div class="connection-indicator" id="connectionIndicator" style="display: none;">
          <span class="connection-dot" id="connectionDot"></span>
          <span class="connection-text" id="connectionText"></span>
@@ -253,6 +256,10 @@
            <div class="welcome-qr-inner" id="welcomeQrInner"></div>
            <div class="welcome-qr-url" id="welcomeQrUrl"></div>
          </div>
+          <div class="history-sessions" id="historySessions" style="display:none">
+            <h3 class="history-title">Resume Conversation</h3>
+            <div class="history-list" id="historyList"></div>
+          </div>
          <p class="welcome-hint">Or press <kbd>Ctrl</kbd>+<kbd>Enter</kbd> to start</p>
          <button class="welcome-ralph-link" onclick="app.showRalphWizard()">Start Ralph Loop &rarr;</button>
        </div>
@@ -323,6 +330,9 @@
              <button class="run-mode-option" data-mode="opencode" onclick="app.setRunMode('opencode')">
                <span class="run-mode-dot opencode"></span>OpenCode
              </button>
+              <div class="run-mode-sep"></div>
+              <div class="run-mode-header">Recent Sessions</div>
+              <div class="run-mode-history" id="runModeHistory"></div>
            </div>
          </div>
          <div class="tab-count-group" title="Instance count">
@@ -1674,14 +1684,14 @@
    <!-- Lines drawn dynamically -->
  </svg>

-  <script defer src="constants.js?v=0.3.2"></script>
-  <script defer src="mobile-handlers.js?v=0.3.2"></script>
-  <script defer src="voice-input.js?v=0.3.2"></script>
-  <script defer src="notification-manager.js?v=0.3.2"></script>
-  <script defer src="keyboard-accessory.js?v=0.3.2"></script>
-  <script defer src="app.js?v=0.3.2"></script>
-  <script defer src="ralph-wizard.js?v=0.3.2"></script>
-  <script defer src="api-client.js?v=0.3.2"></script>
-  <script defer src="subagent-windows.js?v=0.3.2"></script>
+  <script defer src="constants.js"></script>
+  <script defer src="mobile-handlers.js"></script>
+  <script defer src="voice-input.js"></script>
+  <script defer src="notification-manager.js"></script>
+  <script defer src="keyboard-accessory.js"></script>
+  <script defer src="app.js"></script>
+  <script defer src="ralph-wizard.js"></script>
+  <script defer src="api-client.js"></script>
+  <script defer src="subagent-windows.js"></script>
 </body>
 </html>
@@ -98,14 +98,33 @@ const MobileDetection = {
    }
  },

+  /** Set --app-height CSS variable from visual viewport.
+   *  On iPad Safari with tabs, 100vh extends behind the tab bar.
+   *  visualViewport.height reflects the actual visible area. */
+  updateAppHeight() {
+    const vh = window.visualViewport?.height || window.innerHeight;
+    document.documentElement.style.setProperty('--app-height', `${vh}px`);
+  },
+
  /** Initialize mobile detection and set up resize listener */
  init() {
    this.updateBodyClass();
+    this.updateAppHeight();
+
+    // Update --app-height on viewport resize (orientation, tab bar toggle)
+    if (window.visualViewport) {
+      this._appHeightHandler = () => this.updateAppHeight();
+      window.visualViewport.addEventListener('resize', this._appHeightHandler);
+    }
+
    // Debounced resize handler
    let resizeTimeout;
    this._resizeHandler = () => {
      clearTimeout(resizeTimeout);
-      resizeTimeout = setTimeout(() => this.updateBodyClass(), 100);
+      resizeTimeout = setTimeout(() => {
+        this.updateBodyClass();
+        this.updateAppHeight();
+      }, 100);
    };
    window.addEventListener('resize', this._resizeHandler);

@@ -234,6 +234,35 @@ html.mobile-init .file-browser-panel {
  .subagent-window-body {
    font-size: 0.7rem;
  }
+
+  /* Show desktop voice button on tablet (hidden by max-width:1023px in styles.css,
+     mobile .btn-voice-mobile only shows at <430px) */
+  .toolbar-center .btn-toolbar.btn-voice {
+    display: flex !important;
+  }
+
+  /* Toolbar — use desktop-style sizing on tablet (plenty of room at 430-768px) */
+  .toolbar {
+    padding: 0 0.5rem;
+    gap: 0.5rem;
+  }
+
+  .toolbar-left,
+  .toolbar-right {
+    gap: 0.5rem;
+  }
+
+  /* Instance count controls are hidden on tablet, so toolbar-group needs gap
+     to space out Run / Stop / Run Shell (desktop uses gap:0 because -1+ separates them) */
+  .toolbar-group {
+    gap: 0.5rem;
+  }
+
+  .btn-toolbar {
+    padding: 0.4rem 0.75rem;
+    font-size: 0.75rem;
+    min-height: unset;
+  }
 }

 /* ============================================================================
@@ -498,6 +527,13 @@ html.mobile-init .file-browser-panel {
    will-change: transform;
  }

+  /* iOS Safari with tab bar: position: fixed uses the layout viewport which
+     extends behind the browser chrome. Offset the toolbar upward by the delta
+     between 100vh (layout) and --app-height (visual). */
+  .ios-device.safari-browser .toolbar {
+    bottom: calc(var(--safe-area-bottom) + (100vh - var(--app-height, 100vh)));
+  }
+
  /* Show case selector in center */
  .toolbar-center {
    display: flex !important;
@@ -626,12 +662,20 @@ html.mobile-init .file-browser-panel {
    bottom: 100%;
    left: 0;
    margin-bottom: 6px;
-    min-width: 140px;
+    min-width: 160px;
+    max-width: 80vw;
  }

  .run-mode-option {
    padding: 10px 12px;
    font-size: 0.8rem;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .run-mode-history {
+    -webkit-overflow-scrolling: touch;
+    touch-action: manipulation;
  }

  /* Stop button - visible on mobile, icon-only */
@@ -1895,6 +1939,87 @@ html.mobile-init .file-browser-panel {
 }


+/* ============================================================================
+   Keyboard Accessory Bar — all mobile/tablet sizes
+   Visual styles extracted from phone breakpoint so they apply on iPad too.
+   Phone-specific positioning (position: fixed) remains in @media (max-width: 430px).
+   ============================================================================ */
+.keyboard-accessory-bar {
+  display: none;
+  height: 44px;
+  background: #1a1a1a;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 6px 8px;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  z-index: 51;
+}
+
+.keyboard-accessory-bar.visible {
+  display: flex;
+}
+
+.accessory-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 6px 12px;
+  background: #2a2a2a;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 6px;
+  color: #e5e5e5;
+  font-size: 0.65rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.accessory-btn.confirming {
+  background: #6b4f00;
+  border-color: #b8860b;
+  color: #ffd54f;
+}
+
+.accessory-btn:active {
+  background: #3a3a3a;
+}
+
+.accessory-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+.accessory-btn-arrow {
+  padding: 6px 10px;
+  background: #1e3a5f;
+  border-color: rgba(59, 130, 246, 0.3);
+  color: #93c5fd;
+}
+
+.accessory-btn-arrow:active {
+  background: #2563eb;
+}
+
+.accessory-btn-dismiss {
+  padding: 8px 14px;
+  background: #2a2a2a;
+  border: 1.5px solid rgba(255, 255, 255, 0.25);
+  border-radius: 6px;
+  color: #e5e5e5;
+}
+
+.accessory-btn-dismiss svg {
+  width: 22px;
+  height: 22px;
+  stroke-width: 3;
+}
+
+.accessory-btn-dismiss:active {
+  background: #3a3a3a;
+}
+
 /* ============================================================================
   iOS Safari Specific Fixes
   ============================================================================ */
@@ -116,6 +116,8 @@ body {
  background: var(--bg-dark);
  color: var(--text);
  height: 100vh;
+  height: 100dvh;
+  height: var(--app-height, 100dvh);
  overflow: hidden;
 }

@@ -124,6 +126,8 @@ body {
  display: flex;
  flex-direction: column;
  height: 100vh;
+  height: 100dvh;
+  height: var(--app-height, 100dvh);
 }

 /* Compact Header */
@@ -266,6 +270,8 @@ body {
  will-change: opacity;
 }
 .session-tab .tab-status.error { background: var(--red); }
+.session-tab .tab-status.ended { background: var(--text-muted); opacity: 0.5; }
+.session-tab[data-ended] { opacity: 0.55; }

 /* Session color coding - left border indicator */
 .session-tab[data-color="red"] { border-left: 3px solid var(--session-red); }
@@ -444,6 +450,249 @@ body {
  50% { opacity: 0.3; }
 }

+/* Tunnel Indicator */
+.tunnel-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 0;
+  position: relative;
+}
+
+.tunnel-indicator:hover {
+  background: var(--bg-hover);
+}
+
+.tunnel-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #22c55e;
+  box-shadow: 0 0 6px #22c55e, 0 0 12px rgba(34, 197, 94, 0.4);
+  animation: tunnel-glow 2s ease-in-out infinite;
+}
+
+.tunnel-indicator.connecting .tunnel-dot {
+  background: #f59e0b;
+  box-shadow: 0 0 6px #f59e0b, 0 0 12px rgba(245, 158, 11, 0.4);
+  animation: tunnel-glow-amber 1s ease-in-out infinite;
+}
+
+@keyframes tunnel-glow {
+  0%, 100% { box-shadow: 0 0 6px #22c55e, 0 0 12px rgba(34, 197, 94, 0.4); }
+  50% { box-shadow: 0 0 8px #22c55e, 0 0 18px rgba(34, 197, 94, 0.6); }
+}
+
+@keyframes tunnel-glow-amber {
+  0%, 100% { box-shadow: 0 0 6px #f59e0b, 0 0 12px rgba(245, 158, 11, 0.4); opacity: 1; }
+  50% { box-shadow: 0 0 4px #f59e0b; opacity: 0.4; }
+}
+
+/* Tunnel Panel Dropdown */
+.tunnel-panel {
+  position: fixed;
+  top: 36px;
+  right: 12px;
+  width: 320px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  overflow: hidden;
+}
+
+.tunnel-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.tunnel-panel-header h3 {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tunnel-panel-status {
+  font-size: 11px;
+  font-weight: 400;
+  color: #22c55e;
+}
+
+.tunnel-panel-status.offline {
+  color: var(--text-muted);
+}
+
+.tunnel-panel-body {
+  padding: 10px 14px;
+}
+
+.tunnel-panel-section {
+  margin-bottom: 12px;
+}
+
+.tunnel-panel-section:last-child {
+  margin-bottom: 0;
+}
+
+.tunnel-panel-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+
+.tunnel-panel-url {
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 11px;
+  color: var(--accent-hover);
+  word-break: break-all;
+  cursor: pointer;
+  padding: 6px 8px;
+  background: var(--bg-input);
+  border-radius: 4px;
+  transition: background 0.15s;
+}
+
+.tunnel-panel-url:hover {
+  background: var(--bg-hover);
+}
+
+.tunnel-panel-stat {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 0;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.tunnel-panel-stat-value {
+  color: var(--text);
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 11px;
+}
+
+.tunnel-panel-session {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  background: var(--bg-input);
+  border-radius: 4px;
+  margin-bottom: 4px;
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+.tunnel-panel-session-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #22c55e;
+  flex-shrink: 0;
+}
+
+.tunnel-panel-session-info {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tunnel-panel-session-method {
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: var(--bg-hover);
+  color: var(--text-muted);
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+.tunnel-panel-actions {
+  display: flex;
+  gap: 6px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+}
+
+.tunnel-panel-btn {
+  flex: 1;
+  padding: 6px 0;
+  font-size: 12px;
+  font-weight: 500;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  cursor: pointer;
+  text-align: center;
+  transition: all 0.15s;
+}
+
+.tunnel-panel-btn.btn-start {
+  background: rgba(34, 197, 94, 0.1);
+  border-color: rgba(34, 197, 94, 0.3);
+  color: #22c55e;
+}
+
+.tunnel-panel-btn.btn-start:hover {
+  background: rgba(34, 197, 94, 0.2);
+}
+
+.tunnel-panel-btn.btn-stop {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.3);
+  color: #ef4444;
+}
+
+.tunnel-panel-btn.btn-stop:hover {
+  background: rgba(239, 68, 68, 0.2);
+}
+
+.tunnel-panel-btn.btn-qr {
+  background: var(--bg-input);
+  color: var(--text-dim);
+}
+
+.tunnel-panel-btn.btn-qr:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+
+.tunnel-panel-btn.btn-revoke {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.3);
+  color: #ef4444;
+  font-size: 11px;
+}
+
+.tunnel-panel-btn.btn-revoke:hover {
+  background: rgba(239, 68, 68, 0.2);
+}
+
+.tunnel-panel-empty {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-style: italic;
+  padding: 4px 0;
+}
+
 .header-tokens {
  font-size: 0.75rem;
  font-weight: 500;
@@ -1837,6 +2086,70 @@ body {
  text-align: center;
 }

+/* History sessions panel (welcome overlay) */
+.history-sessions {
+  margin-top: 1.5rem;
+  width: 100%;
+  max-width: 560px;
+}
+
+.history-title {
+  font-size: 0.85rem;
+  color: var(--text-dim);
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  text-align: left;
+}
+
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.history-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+  text-align: left;
+}
+
+.history-item:hover {
+  border-color: var(--accent);
+  background: var(--bg-hover);
+}
+
+.history-item-dir {
+  flex: 1;
+  font-size: 0.8rem;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.history-item-meta {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.history-item-size {
+  font-size: 0.7rem;
+  color: var(--text-dim);
+  white-space: nowrap;
+  min-width: 45px;
+  text-align: right;
+}
+
 .welcome-hint {
  color: var(--text-muted);
  font-size: 0.8rem;
@@ -2017,7 +2330,8 @@ body {
  border-radius: 6px;
  padding: 4px;
  z-index: 1000;
-  min-width: 150px;
+  min-width: 180px;
+  max-width: 300px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
 }
 .run-mode-menu.active {
@@ -2054,6 +2368,40 @@ body {
 .run-mode-dot.claude { background: #3b82f6; }
 .run-mode-dot.opencode { background: #10b981; }

+.run-mode-sep {
+  height: 1px;
+  background: var(--border);
+  margin: 4px 0;
+}
+.run-mode-header {
+  padding: 4px 10px 2px;
+  font-size: 0.72em;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-weight: 600;
+}
+.run-mode-history {
+  max-height: 200px;
+  overflow-y: auto;
+}
+.run-mode-option .hist-dir {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.run-mode-option .hist-meta {
+  font-size: 0.85em;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+.run-mode-hist-empty {
+  padding: 6px 10px;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
 /* Shell Button - Special styling */
 .btn-toolbar.btn-shell {
  background: linear-gradient(135deg, #1a2e1a 0%, #234023 100%);
@@ -4204,6 +4552,7 @@ kbd {
  right: 0;
  width: 340px;
  height: calc(100vh - var(--header-height));
+  height: calc(100dvh - var(--header-height));
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  z-index: 10001;
@@ -5572,6 +5921,7 @@ kbd {
  left: 0;
  width: 100vw;
  height: 100vh;
+  height: 100dvh;
  pointer-events: none;
  z-index: 999; /* Below windows (1000+), above panels (91) */
 }
@@ -5799,6 +6149,7 @@ kbd {
  right: 20px;
  width: 280px;
  height: calc(100vh - var(--header-height) - var(--toolbar-height) - 40px);
+  height: calc(100dvh - var(--header-height) - var(--toolbar-height) - 40px);
  max-height: 600px;
  min-width: 200px;
  min-height: 300px;
@@ -5,7 +5,7 @@
 * that replaces ~43 inline not-found checks across route handlers.
 */

-import { join } from 'node:path';
+import { join, resolve, relative, isAbsolute } from 'node:path';
 import { homedir } from 'node:os';
 import { Session } from '../session.js';
 import { ApiErrorCode, createErrorResponse } from '../types.js';
@@ -18,6 +18,20 @@ import type { EventPort } from './ports/event-port.js';
 export const CASES_DIR = join(homedir(), 'codeman-cases');
 export const SETTINGS_PATH = join(homedir(), '.codeman', 'settings.json');

+/**
+ * Validates that a path component doesn't escape the base directory.
+ * Returns the resolved full path, or null if the path is a traversal attempt.
+ */
+export function validatePathWithinBase(name: string, baseDir: string): string | null {
+  const fullPath = resolve(join(baseDir, name));
+  const resolvedBase = resolve(baseDir);
+  const relPath = relative(resolvedBase, fullPath);
+  if (relPath.startsWith('..') || isAbsolute(relPath)) {
+    return null;
+  }
+  return fullPath;
+}
+
 // Maximum hook data size (prevents oversized SSE broadcasts)
 const MAX_HOOK_DATA_SIZE = 8 * 1024;

@@ -7,14 +7,14 @@
 import { FastifyInstance } from 'fastify';
 import { existsSync, mkdirSync, writeFileSync, readdirSync } from 'node:fs';
 import fs from 'node:fs/promises';
-import { join, resolve, relative, isAbsolute } from 'node:path';
+import { join, resolve } from 'node:path';
 import { homedir } from 'node:os';
 import type { ApiResponse, CaseInfo } from '../../types.js';
 import { ApiErrorCode, createErrorResponse, getErrorMessage } from '../../types.js';
 import { CreateCaseSchema, LinkCaseSchema } from '../schemas.js';
 import { generateClaudeMd } from '../../templates/claude-md.js';
 import { writeHooksConfig } from '../../hooks-config.js';
-import { CASES_DIR } from '../route-helpers.js';
+import { CASES_DIR, validatePathWithinBase } from '../route-helpers.js';
 import { SseEvent } from '../sse-events.js';
 import type { EventPort, ConfigPort } from '../ports/index.js';

@@ -74,13 +74,8 @@ export function registerCaseRoutes(app: FastifyInstance, ctx: EventPort & Config
    }
    const { name, description } = result.data;

-    const casePath = join(CASES_DIR, name);
-
-    // Security: Path traversal protection - use relative path check
-    const resolvedPath = resolve(casePath);
-    const resolvedBase = resolve(CASES_DIR);
-    const relPath = relative(resolvedBase, resolvedPath);
-    if (relPath.startsWith('..') || isAbsolute(relPath)) {
+    const casePath = validatePathWithinBase(name, CASES_DIR);
+    if (!casePath) {
      return createErrorResponse(ApiErrorCode.INVALID_INPUT, 'Invalid case path');
    }

@@ -167,11 +162,7 @@ export function registerCaseRoutes(app: FastifyInstance, ctx: EventPort & Config
  app.get('/api/cases/:name', async (req) => {
    const { name } = req.params as { name: string };

-    // Security: Path traversal protection
-    const resolvedPath = resolve(join(CASES_DIR, name));
-    const resolvedBase = resolve(CASES_DIR);
-    const relPath = relative(resolvedBase, resolvedPath);
-    if (relPath.startsWith('..') || isAbsolute(relPath)) {
+    if (!validatePathWithinBase(name, CASES_DIR)) {
      return createErrorResponse(ApiErrorCode.INVALID_INPUT, 'Invalid case name');
    }

@@ -210,11 +201,7 @@ export function registerCaseRoutes(app: FastifyInstance, ctx: EventPort & Config
  app.get('/api/cases/:name/fix-plan', async (req) => {
    const { name } = req.params as { name: string };

-    // Security: Path traversal protection
-    const resolvedPath = resolve(join(CASES_DIR, name));
-    const resolvedBase = resolve(CASES_DIR);
-    const relPath = relative(resolvedBase, resolvedPath);
-    if (relPath.startsWith('..') || isAbsolute(relPath)) {
+    if (!validatePathWithinBase(name, CASES_DIR)) {
      return createErrorResponse(ApiErrorCode.INVALID_INPUT, 'Invalid case name');
    }

@@ -334,13 +321,8 @@ export function registerCaseRoutes(app: FastifyInstance, ctx: EventPort & Config

  app.get('/api/cases/:caseName/ralph-wizard/files', async (req) => {
    const { caseName } = req.params as { caseName: string };
-    let casePath = join(CASES_DIR, caseName);
-
-    // Security: Path traversal protection - use relative path check
-    const resolvedCase = resolve(casePath);
-    const resolvedBase = resolve(CASES_DIR);
-    const relPath = relative(resolvedBase, resolvedCase);
-    if (relPath.startsWith('..') || isAbsolute(relPath)) {
+    let casePath = validatePathWithinBase(caseName, CASES_DIR);
+    if (!casePath) {
      return createErrorResponse(ApiErrorCode.INVALID_INPUT, 'Invalid case name');
    }

@@ -394,21 +376,16 @@ export function registerCaseRoutes(app: FastifyInstance, ctx: EventPort & Config
  // Cache disabled to ensure fresh prompts when starting new plan generations
  app.get('/api/cases/:caseName/ralph-wizard/file/:filePath', async (req, reply) => {
    const { caseName, filePath } = req.params as { caseName: string; filePath: string };
-    let casePath = join(CASES_DIR, caseName);
+    let casePath = validatePathWithinBase(caseName, CASES_DIR);
+    if (!casePath) {
+      return createErrorResponse(ApiErrorCode.INVALID_INPUT, 'Invalid case name');
+    }

    // Prevent browser caching - prompts change between plan generations
    reply.header('Cache-Control', 'no-store, no-cache, must-revalidate');
    reply.header('Pragma', 'no-cache');
    reply.header('Expires', '0');

-    // Security: Path traversal protection for case name - use relative path check
-    const resolvedCase = resolve(casePath);
-    const resolvedBase = resolve(CASES_DIR);
-    const relPath = relative(resolvedBase, resolvedCase);
-    if (relPath.startsWith('..') || isAbsolute(relPath)) {
-      return createErrorResponse(ApiErrorCode.INVALID_INPUT, 'Invalid case name');
-    }
-
    // Check linked cases if path doesn't exist
    if (!existsSync(casePath)) {
      const linkedCasesFile = join(homedir(), '.codeman', 'linked-cases.json');
@@ -5,7 +5,7 @@
 */

 import { FastifyInstance } from 'fastify';
-import { join, resolve, relative, isAbsolute } from 'node:path';
+import { join } from 'node:path';
 import { existsSync, rmSync } from 'node:fs';
 import { Session } from '../../session.js';
 import { ApiErrorCode, createErrorResponse, getErrorMessage, type ApiResponse } from '../../types.js';
@@ -17,7 +17,7 @@ import {
  PlanTaskUpdateSchema,
  PlanTaskAddSchema,
 } from '../schemas.js';
-import { findSessionOrFail, CASES_DIR } from '../route-helpers.js';
+import { findSessionOrFail, CASES_DIR, validatePathWithinBase } from '../route-helpers.js';
 import { SseEvent } from '../sse-events.js';
 import type { SessionPort, EventPort, ConfigPort, InfraPort } from '../ports/index.js';

@@ -232,12 +232,8 @@ NOW: Generate the implementation plan for the task above. Think step by step.`;
    // Determine output directory for saving wizard results
    let outputDir: string | undefined;
    if (caseName) {
-      const casePath = join(CASES_DIR, caseName);
-      // Security: Path traversal protection - use relative path check
-      const resolvedCase = resolve(casePath);
-      const resolvedBase = resolve(CASES_DIR);
-      const relPath = relative(resolvedBase, resolvedCase);
-      if (!relPath.startsWith('..') && !isAbsolute(relPath) && existsSync(casePath)) {
+      const casePath = validatePathWithinBase(caseName, CASES_DIR);
+      if (casePath && existsSync(casePath)) {
        outputDir = join(casePath, 'ralph-wizard');

        // Clear old ralph-wizard directory to ensure fresh prompts for each generation
@@ -28,6 +28,7 @@ const noopEventPort: EventPort = {
  batchTerminalData: () => {},
  broadcastSessionStateDebounced: () => {},
  batchTaskUpdate: () => {},
+  getSseClientCount: () => 0,
 };

 export function registerRespawnRoutes(
@@ -5,7 +5,7 @@
 */

 import { FastifyInstance } from 'fastify';
-import { join, dirname, resolve, relative, isAbsolute } from 'node:path';
+import { join, dirname } from 'node:path';
 import { existsSync, statSync, mkdirSync, writeFileSync } from 'node:fs';
 import fs from 'node:fs/promises';
 import {
@@ -32,7 +32,7 @@ import {
  QuickRunSchema,
  QuickStartSchema,
 } from '../schemas.js';
-import { autoConfigureRalph, CASES_DIR, SETTINGS_PATH } from '../route-helpers.js';
+import { autoConfigureRalph, CASES_DIR, SETTINGS_PATH, validatePathWithinBase } from '../route-helpers.js';
 import { AUTH_COOKIE_NAME } from '../middleware/auth.js';
 import { writeHooksConfig, updateCaseEnvVars } from '../../hooks-config.js';
 import { generateClaudeMd } from '../../templates/claude-md.js';
@@ -144,6 +144,7 @@ export function registerSessionRoutes(
      claudeMode: claudeModeConfig.claudeMode,
      allowedTools: claudeModeConfig.allowedTools,
      openCodeConfig: mode === 'opencode' ? body.openCodeConfig : undefined,
+      resumeSessionId: body.resumeSessionId,
    });

    ctx.addSession(session);
@@ -788,13 +789,8 @@ export function registerSessionRoutes(
      }
    }

-    const casePath = join(CASES_DIR, caseName);
-
-    // Security: Path traversal protection - use relative path check
-    const resolvedPath = resolve(casePath);
-    const resolvedBase = resolve(CASES_DIR);
-    const relPath = relative(resolvedBase, resolvedPath);
-    if (relPath.startsWith('..') || isAbsolute(relPath)) {
+    const casePath = validatePathWithinBase(caseName, CASES_DIR);
+    if (!casePath) {
      return createErrorResponse(ApiErrorCode.INVALID_INPUT, 'Invalid case path');
    }

@@ -922,4 +918,91 @@ export function registerSessionRoutes(
      return createErrorResponse(ApiErrorCode.OPERATION_FAILED, getErrorMessage(err));
    }
  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // History — list past Claude conversations for resume
+  // ═══════════════════════════════════════════════════════════════
+
+  app.get('/api/history/sessions', async () => {
+    const projectsDir = join(process.env.HOME || '/tmp', '.claude', 'projects');
+    const results: Array<{
+      sessionId: string;
+      workingDir: string;
+      projectKey: string;
+      sizeBytes: number;
+      lastModified: string;
+    }> = [];
+
+    try {
+      const projectDirs = await fs.readdir(projectsDir);
+      for (const projDir of projectDirs) {
+        const projPath = join(projectsDir, projDir);
+        const stat = await fs.stat(projPath).catch(() => null);
+        if (!stat?.isDirectory()) continue;
+
+        // Decode project key to working dir. The encoding replaces '/' with '-',
+        // which is lossy when path components contain '-'. Do naive decode first,
+        // then verify it exists. Fall back to HOME if the decoded path is invalid.
+        const naiveDecode = projDir.replace(/^-/, '/').replace(/-/g, '/');
+        const dirExists = await fs
+          .access(naiveDecode)
+          .then(() => true)
+          .catch(() => false);
+        const workingDir = dirExists ? naiveDecode : process.env.HOME || '/tmp';
+
+        const entries = await fs.readdir(projPath);
+        for (const entry of entries) {
+          if (!entry.endsWith('.jsonl')) continue;
+          const sessionId = entry.replace('.jsonl', '');
+          // Only valid UUIDs
+          if (!/^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}$/.test(sessionId)) continue;
+
+          const filePath = join(projPath, entry);
+          const fileStat = await fs.stat(filePath).catch(() => null);
+          if (!fileStat) continue;
+          // Skip files too small to contain real conversation (metadata-only sessions
+          // like file-history-snapshot entries are typically < 4KB)
+          if (fileStat.size < 4000) continue;
+
+          // Quick content check: verify actual conversation data exists.
+          // Sessions with only file-history-snapshot or hook_progress entries have
+          // no "user"/"assistant" messages and will fail claude --resume.
+          // Files > 50KB are almost certainly real conversations (skip the read).
+          if (fileStat.size < 50000) {
+            try {
+              const fd = await fs.open(filePath, 'r');
+              const buf = Buffer.alloc(16384);
+              const { bytesRead } = await fd.read(buf, 0, 16384, 0);
+              await fd.close();
+              const head = buf.toString('utf8', 0, bytesRead);
+              if (
+                !head.includes('"type":"user"') &&
+                !head.includes('"type":"assistant"') &&
+                !head.includes('"type":"summary"')
+              ) {
+                continue; // No conversation content — skip
+              }
+            } catch {
+              continue;
+            }
+          }
+
+          results.push({
+            sessionId,
+            workingDir,
+            projectKey: projDir,
+            sizeBytes: fileStat.size,
+            lastModified: fileStat.mtime.toISOString(),
+          });
+        }
+      }
+    } catch {
+      // Projects dir may not exist
+    }
+
+    // Sort by lastModified descending
+    results.sort((a, b) => new Date(b.lastModified).getTime() - new Date(a.lastModified).getTime());
+
+    return { sessions: results.slice(0, 50) };
+  });
 }
@@ -104,6 +104,23 @@ export function registerSystemRoutes(

  app.get('/api/tunnel/status', async () => ctx.tunnelManager.getStatus());

+  app.get('/api/tunnel/info', async () => {
+    const status = ctx.tunnelManager.getStatus();
+    const sseClients = ctx.getSseClientCount();
+    const sessions: Array<{ ip: string; ua: string; createdAt: number; method: string }> = [];
+    if (ctx.authSessions) {
+      for (const [, record] of ctx.authSessions) {
+        sessions.push({ ip: record.ip, ua: record.ua, createdAt: record.createdAt, method: record.method });
+      }
+    }
+    return {
+      ...status,
+      sseClients,
+      authEnabled: !!process.env.CODEMAN_PASSWORD,
+      authSessions: sessions,
+    };
+  });
+
  app.get('/api/tunnel/qr', async (_req, reply) => {
    const url = ctx.tunnelManager.getUrl();
    if (!url) {
@@ -125,6 +125,12 @@ export const CreateSessionSchema = z.object({
  name: z.string().max(100).optional(),
  envOverrides: safeEnvOverridesSchema,
  openCodeConfig: OpenCodeConfigSchema,
+  /** Resume a previous Claude conversation by its session ID (used for reboot recovery) */
+  resumeSessionId: z
+    .string()
+    .max(100)
+    .regex(/^[a-f0-9-]+$/, 'resumeSessionId must be a valid UUID')
+    .optional(),
 });

 /**
@@ -315,6 +321,30 @@ export const SettingsUpdateSchema = z
        insertMode: z.string().max(20).optional(),
      })
      .optional(),
+    // Run mode preference (cross-device sync)
+    runMode: z.string().max(20).optional(),
+    // Custom respawn presets (cross-device sync, replaces localStorage-only storage)
+    respawnPresets: z
+      .array(
+        z.object({
+          id: z.string().max(100),
+          name: z.string().max(100),
+          config: z.object({
+            idleTimeoutMs: z.number().optional(),
+            updatePrompt: z.string().max(5000).optional(),
+            interStepDelayMs: z.number().optional(),
+            sendClear: z.boolean().optional(),
+            sendInit: z.boolean().optional(),
+            kickstartPrompt: z.string().max(5000).optional(),
+            autoAcceptPrompts: z.boolean().optional(),
+          }),
+          durationMinutes: z.number().optional(),
+          builtIn: z.boolean().optional(),
+          createdAt: z.number().optional(),
+        })
+      )
+      .max(20)
+      .optional(),
  })
  .strict();

@@ -123,13 +123,6 @@ import {
  INACTIVITY_TIMEOUT_MS,
 } from '../config/server-timing.js';

-// DEC mode 2026 - Synchronized Output
-// When terminal supports this, it buffers all output between start/end markers
-// and renders atomically, eliminating partial-frame flicker from Ink redraws.
-// Supported by: WezTerm, Kitty, Ghostty, iTerm2 3.5+, Windows Terminal, VSCode terminal
-const DEC_SYNC_START = '\x1b[?2026h'; // Begin synchronized update
-const DEC_SYNC_END = '\x1b[?2026l'; // End synchronized update (flush to screen)
-
 // SSE padding for Cloudflare tunnel buffer flushing.
 // Cloudflare quick tunnels buffer small SSE responses, causing lag for real-time events.
 // Appending SSE comment padding (ignored by EventSource) forces the proxy to flush.
@@ -217,6 +210,8 @@ export class WebServer extends EventEmitter {
   * or `null` meaning "receive all events" (backwards-compatible default).
   */
  private sseClients: Map<FastifyReply, Set<string> | null> = 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 */
  private backpressuredClients: Set<FastifyReply> = new Set();
  private store = getStore();
@@ -505,6 +500,7 @@ export class WebServer extends EventEmitter {
      batchTerminalData: this.batchTerminalData.bind(this),
      broadcastSessionStateDebounced: this.broadcastSessionStateDebounced.bind(this),
      batchTaskUpdate: this.batchTaskUpdate.bind(this),
+      getSseClientCount: () => this.remoteSseClients.size,
      // RespawnPort
      respawnControllers: this.respawnControllers,
      respawnTimers: this.respawnTimers,
@@ -578,14 +574,22 @@ export class WebServer extends EventEmitter {
        .sendFile('sw.js', join(__dirname, 'public'));
    });

-    // Serve static files — versioned assets (?v=X) are immutable, cache aggressively
+    // Serve static files — content-hashed assets (e.g. app.a3f8c2e1.js) are immutable, cache aggressively.
+    // HTML must revalidate every time so browsers pick up new hashed filenames after deploys.
+    // cacheControl disabled so setHeaders has full control (fastify-static's reply.headers() overwrites setHeaders otherwise).
    // preCompressed: serve pre-built .br/.gz files (from build step) to avoid per-request CPU compression
    await this.app.register(fastifyStatic, {
      root: join(__dirname, 'public'),
      prefix: '/',
-      maxAge: '1y',
-      immutable: true,
+      cacheControl: false,
      preCompressed: true,
+      setHeaders: (res, path) => {
+        if (path.endsWith('.html')) {
+          res.setHeader('Cache-Control', 'no-cache');
+        } else {
+          res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
+        }
+      },
    });

    // SSE endpoint for real-time updates
@@ -620,6 +624,12 @@ export class WebServer extends EventEmitter {

      this.sseClients.set(reply, sessionFilter);

+      // Track tunnel clients — cloudflared proxies locally so req.ip is always
+      // 127.0.0.1; detect tunnel traffic via Cf-Connecting-Ip header instead.
+      if (req.headers['cf-connecting-ip']) {
+        this.remoteSseClients.add(reply);
+      }
+
      // Send initial state
      // Use light state for SSE init to avoid sending 2MB+ terminal buffers
      // Buffers are fetched on-demand when switching tabs
@@ -636,6 +646,7 @@ export class WebServer extends EventEmitter {

      req.raw.on('close', () => {
        this.sseClients.delete(reply);
+        this.remoteSseClients.delete(reply);
        this.backpressuredClients.delete(reply);
      });
    });
@@ -1947,6 +1958,7 @@ export class WebServer extends EventEmitter {
      reply.raw.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
    } catch {
      this.sseClients.delete(reply);
+      this.remoteSseClients.delete(reply);
    }
  }

@@ -1976,6 +1988,7 @@ export class WebServer extends EventEmitter {
      }
    } catch {
      this.sseClients.delete(reply);
+      this.remoteSseClients.delete(reply);
      this.backpressuredClients.delete(reply);
    }
  }
@@ -2107,14 +2120,13 @@ export class WebServer extends EventEmitter {
    if (chunks && chunks.length > 0) {
      // Join chunks only at flush time (avoids O(n^2) string concatenation in batchTerminalData)
      const data = chunks.join('');
-      // Wrap with DEC mode 2026 synchronized output markers
-      // Terminal buffers all output between markers and renders atomically,
-      // eliminating partial-frame flicker from Ink's full-screen redraws.
-      // Unsupported terminals ignore these sequences harmlessly.
-      const syncData = DEC_SYNC_START + data + DEC_SYNC_END;
+      // xterm.js 6.0+ handles DEC 2026 synchronized output natively.
+      // Claude CLI (Ink) already emits its own DEC 2026 markers around redraws.
+      // Do NOT add an outer wrapper — DEC 2026 is not reference-counted, so
+      // the inner 2026l would prematurely exit sync mode, defeating the purpose.
      // Fast path: build SSE message directly without JSON.stringify on wrapper object.
      // Only the terminal data string needs escaping; sessionId is a UUID (safe to template).
-      const escapedData = JSON.stringify(syncData);
+      const escapedData = JSON.stringify(data);
      // Append tunnel padding for immediate Cloudflare proxy flush —
      // terminal data is high-frequency and latency-sensitive.
      const padding = this._isTunnelActive ? SSE_PADDING : '';
@@ -2316,6 +2328,7 @@ export class WebServer extends EventEmitter {
    // Remove dead clients
    for (const client of deadClients) {
      this.sseClients.delete(client);
+      this.remoteSseClients.delete(client);
      this.backpressuredClients.delete(client);
    }

@@ -2704,6 +2717,7 @@ export class WebServer extends EventEmitter {
      }
    }
    this.sseClients.clear();
+    this.remoteSseClients.clear();
    this.backpressuredClients.clear();

    // Clear per-session batch timers
@@ -38,6 +38,7 @@ export function createMockRouteContext(options?: { sessionId?: string }) {
    batchTerminalData: vi.fn(),
    broadcastSessionStateDebounced: vi.fn(),
    batchTaskUpdate: vi.fn(),
+    getSseClientCount: vi.fn(() => 0),

    // -- RespawnPort --
    respawnControllers: new Map(),
@@ -75,11 +75,7 @@ describe('session-routes', () => {
      expect(res.statusCode).toBe(200);
      const body = JSON.parse(res.body);
      expect(body.success).toBe(true);
-      expect(harness.ctx.cleanupSession).toHaveBeenCalledWith(
-        harness.ctx._sessionId,
-        true,
-        'user_delete',
-      );
+      expect(harness.ctx.cleanupSession).toHaveBeenCalledWith(harness.ctx._sessionId, true, 'user_delete');
    });

    it('returns error for unknown session', async () => {
@@ -123,10 +119,7 @@ describe('session-routes', () => {
      expect(body.success).toBe(true);
      expect(body.name).toBe('new-name');
      expect(harness.ctx.persistSessionState).toHaveBeenCalled();
-      expect(harness.ctx.broadcast).toHaveBeenCalledWith(
-        'session:updated',
-        expect.anything(),
-      );
+      expect(harness.ctx.broadcast).toHaveBeenCalledWith('session:updated', expect.anything());
    });

    it('returns error for unknown session', async () => {
@@ -462,4 +455,109 @@ describe('session-routes', () => {
      expect(body.success).toBe(true);
    });
  });
+
+  // ========== GET /api/history/sessions ==========
+
+  describe('GET /api/history/sessions', () => {
+    it('returns sessions array', async () => {
+      const res = await harness.app.inject({
+        method: 'GET',
+        url: '/api/history/sessions',
+      });
+      expect(res.statusCode).toBe(200);
+      const body = JSON.parse(res.body);
+      expect(body).toHaveProperty('sessions');
+      expect(Array.isArray(body.sessions)).toBe(true);
+    });
+
+    it('sessions have required fields', async () => {
+      const res = await harness.app.inject({
+        method: 'GET',
+        url: '/api/history/sessions',
+      });
+      const body = JSON.parse(res.body);
+      for (const session of body.sessions) {
+        expect(session).toHaveProperty('sessionId');
+        expect(session).toHaveProperty('workingDir');
+        expect(session).toHaveProperty('projectKey');
+        expect(session).toHaveProperty('sizeBytes');
+        expect(session).toHaveProperty('lastModified');
+        // sessionId must be a valid UUID
+        expect(session.sessionId).toMatch(/^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}$/);
+      }
+    });
+
+    it('sessions are sorted by lastModified descending', async () => {
+      const res = await harness.app.inject({
+        method: 'GET',
+        url: '/api/history/sessions',
+      });
+      const body = JSON.parse(res.body);
+      const dates = body.sessions.map((s: { lastModified: string }) => new Date(s.lastModified).getTime());
+      for (let i = 1; i < dates.length; i++) {
+        expect(dates[i - 1]).toBeGreaterThanOrEqual(dates[i]);
+      }
+    });
+
+    it('returns at most 50 sessions', async () => {
+      const res = await harness.app.inject({
+        method: 'GET',
+        url: '/api/history/sessions',
+      });
+      const body = JSON.parse(res.body);
+      expect(body.sessions.length).toBeLessThanOrEqual(50);
+    });
+  });
+
+  // ========== POST /api/sessions (with resumeSessionId) ==========
+
+  describe('POST /api/sessions with resumeSessionId', () => {
+    it('creates session with valid resumeSessionId', async () => {
+      const res = await harness.app.inject({
+        method: 'POST',
+        url: '/api/sessions',
+        payload: {
+          name: 'resume-test',
+          mode: 'claude',
+          workingDir: process.env.HOME || '/tmp',
+          resumeSessionId: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+        },
+      });
+      expect(res.statusCode).toBe(200);
+      const body = JSON.parse(res.body);
+      expect(body.success).toBe(true);
+      expect(body.session).toBeDefined();
+    });
+
+    it('rejects invalid resumeSessionId format', async () => {
+      const res = await harness.app.inject({
+        method: 'POST',
+        url: '/api/sessions',
+        payload: {
+          name: 'bad-resume',
+          mode: 'claude',
+          workingDir: process.env.HOME || '/tmp',
+          resumeSessionId: 'not-a-uuid',
+        },
+      });
+      expect(res.statusCode).toBe(200);
+      const body = JSON.parse(res.body);
+      expect(body.success).toBe(false);
+    });
+
+    it('creates session without resumeSessionId (optional field)', async () => {
+      const res = await harness.app.inject({
+        method: 'POST',
+        url: '/api/sessions',
+        payload: {
+          name: 'no-resume',
+          mode: 'claude',
+          workingDir: process.env.HOME || '/tmp',
+        },
+      });
+      expect(res.statusCode).toBe(200);
+      const body = JSON.parse(res.body);
+      expect(body.success).toBe(true);
+    });
+  });
 });
@@ -16,69 +16,54 @@ import { IOSKeyboard } from '../components/IOSKeyboard';
 // ─── Scene timing (frames @ 30fps) ───
 const TITLE_DUR = 60;
 const PHONES_DUR = 30;
-const TYPING_DUR = 468;
-const HOLD_DUR = 60;
+const TYPING_DUR = 610;
+const HOLD_DUR = 50;
 const OUTRO_DUR = 45;

 const TITLE_START = 0;
 const PHONES_START = TITLE_DUR; // 60
 const TYPING_START = PHONES_START + PHONES_DUR; // 90
-const HOLD_START = TYPING_START + TYPING_DUR; // 558
-const OUTRO_START = HOLD_START + HOLD_DUR; // 618
+const HOLD_START = TYPING_START + TYPING_DUR; // 700
+const OUTRO_START = HOLD_START + HOLD_DUR; // 750

-export const ZEROLAG_TOTAL_FRAMES = OUTRO_START + OUTRO_DUR; // 663
+export const ZEROLAG_TOTAL_FRAMES = OUTRO_START + OUTRO_DUR; // 795

 // ─── iPhone 17 Pro safe area ───
 const SAFE_AREA_TOP = 59; // Below Dynamic Island
 const PHONE_SCALE = 1.12; // Scale up to fill more of the frame

-// The Codeman screenshot starts content at y=0 (the session tab).
-// On a real device it would sit below the safe area, so we offset it.
-const SCREENSHOT_Y_OFFSET = SAFE_AREA_TOP;
+// Claude Code header: tab bar + session info + prompt context from screenshot
+const HEADER_H = 120;

-// Terminal typing overlay position (relative to screenshot top)
-// Session tab is ~44px, then terminal starts. Adding safe area offset:
-const TERMINAL_TOP = SAFE_AREA_TOP + 52;
+// Terminal typing overlay: aligned with the ❯ prompt position in the Claude Code screenshot
+const TERMINAL_TOP = 185;
 const TERMINAL_LEFT = 14;
-const TERMINAL_FONT = 22; // Large for video readability
+const TERMINAL_FONT = 21; // Slightly smaller to fit toolbar below

-// ─── Typing schedule (with typo + backspace correction) ───
-const CORRECT_TEXT = 'fix the auth bug in the login flow';
-const FRAME_GAP = 12; // ~400ms between keystrokes
-const TYPO_INDEX = 28; // After "logi", type "m" instead of "n"
+// Codeman toolbar from screenshot (bottom section showing /init, /clear, Run, etc.)
+const TOOLBAR_H = 95;

-// Remote connection lag: 600ms-1.2s+ per char (18-36+ frames)
+// ─── Typing schedule ───
+const CORRECT_TEXT =
+  'zerolag technology brings in a visual dom overlay to make typing instant, even if your codeman server is on the other side of the world';
+const FRAME_GAP = 4; // ~133ms per keystroke (~75 WPM)
+
+// Remote connection lag: 600ms–2.7s per char (18–80 frames @ 30fps).
+// Periodic spikes simulate packet loss / retransmission bursts.
+// TCP head-of-line blocking causes a single spike to freeze all subsequent chars.
 const LAGGY_DELAYS = [
-  24, 30, 36, 32, 26, 22, 34, 28, 38, 20, 30, 24, 32, 26, 36, 22,
-  30, 24, 32, 28, 34, 26, 30, 22, 28, 36, 24, 30, 32, 26, 34, 28, 24, 30,
-  26, 32, 28, 34,
+  24, 30, 26, 32, 72, 28, 22, 34, 26, 30, 20, 28, 36, 24, 30, 22, 26, 34, 28, 20, 68, 30, 24, 32,
+  26, 22, 28, 34, 30, 26, 32, 24, 80, 22, 30, 26, 28, 34, 24, 30,
 ];

-type KeyAction = { frame: number; action: 'type' | 'backspace'; char: string; lagDelay: number };
+type KeyAction = { frame: number; char: string; lagDelay: number };

 const buildSchedule = (): KeyAction[] => {
  const actions: KeyAction[] = [];
-  let idx = 0;
  const lag = (i: number) => LAGGY_DELAYS[i % LAGGY_DELAYS.length];

-  // Type correctly up to typo point: "fix the auth bug in the logi"
-  for (let i = 0; i < TYPO_INDEX; i++) {
-    actions.push({ frame: idx * FRAME_GAP, action: 'type', char: CORRECT_TEXT[i], lagDelay: lag(idx) });
-    idx++;
-  }
-
-  // Typo: type "m" instead of "n"
-  actions.push({ frame: idx * FRAME_GAP, action: 'type', char: 'm', lagDelay: lag(idx) });
-  idx++;
-
-  // Backspace to fix it
-  actions.push({ frame: idx * FRAME_GAP, action: 'backspace', char: '⌫', lagDelay: lag(idx) });
-  idx++;
-
-  // Type correct remaining: "n flow"
-  for (let i = TYPO_INDEX; i < CORRECT_TEXT.length; i++) {
-    actions.push({ frame: idx * FRAME_GAP, action: 'type', char: CORRECT_TEXT[i], lagDelay: lag(idx) });
-    idx++;
+  for (let i = 0; i < CORRECT_TEXT.length; i++) {
+    actions.push({ frame: i * FRAME_GAP, char: CORRECT_TEXT[i], lagDelay: lag(i) });
  }

  return actions;
@@ -86,14 +71,16 @@ const buildSchedule = (): KeyAction[] => {

 const TYPING_SCHEDULE = buildSchedule();

-/** Replay actions in order up to current frame, computing the visible text buffer */
+/**
+ * Replay actions in order up to current frame, computing the visible text buffer.
+ * TCP-ordered: stops at first unresolved echo (head-of-line blocking).
+ */
 const computeVisibleText = (frame: number, withLag: boolean): string => {
  let buffer = '';
  for (const a of TYPING_SCHEDULE) {
    const threshold = withLag ? a.frame + a.lagDelay : a.frame;
-    if (frame < threshold) break; // TCP-ordered: stop at first unresolved
-    if (a.action === 'backspace') buffer = buffer.slice(0, -1);
-    else buffer += a.char;
+    if (frame < threshold) break;
+    buffer += a.char;
  }
  return buffer;
 };
@@ -128,8 +115,20 @@ const IOSStatusBar: React.FC = () => (
      </svg>
      {/* WiFi */}
      <svg width="16" height="12" viewBox="0 0 16 12">
-        <path d="M4.5 8.5C5.5 7.2 6.7 6.5 8 6.5s2.5.7 3.5 2" stroke="#fff" strokeWidth="1.5" fill="none" strokeLinecap="round" />
-        <path d="M1.5 5.5C3.5 3 5.7 1.5 8 1.5s4.5 1.5 6.5 4" stroke="#fff" strokeWidth="1.5" fill="none" strokeLinecap="round" />
+        <path
+          d="M4.5 8.5C5.5 7.2 6.7 6.5 8 6.5s2.5.7 3.5 2"
+          stroke="#fff"
+          strokeWidth="1.5"
+          fill="none"
+          strokeLinecap="round"
+        />
+        <path
+          d="M1.5 5.5C3.5 3 5.7 1.5 8 1.5s4.5 1.5 6.5 4"
+          stroke="#fff"
+          strokeWidth="1.5"
+          fill="none"
+          strokeLinecap="round"
+        />
        <circle cx="8" cy="11" r="1.5" fill="#fff" />
      </svg>
      {/* Battery */}
@@ -145,9 +144,8 @@ const IOSStatusBar: React.FC = () => (
 // ─── Typing overlay ───
 const TypingOverlay: React.FC<{
  typed: string;
-  overlayChars?: { char: string; confirmed: boolean }[];
  cursorVisible: boolean;
-}> = ({ typed, overlayChars, cursorVisible }) => {
+}> = ({ typed, cursorVisible }) => {
  const frame = useCurrentFrame();
  const cursorOpacity = cursorVisible ? (Math.floor(frame / 18) % 2 === 0 ? 0.85 : 0.5) : 0;
  const lineH = Math.round(TERMINAL_FONT * 1.4);
@@ -167,13 +165,7 @@ const TypingOverlay: React.FC<{
      }}
    >
      <span style={{ color: '#339af0', fontWeight: 700 }}>{'❯ '}</span>
-      {overlayChars
-        ? overlayChars.map((oc, i) => (
-            <span key={i} style={{ color: oc.confirmed ? '#e0e0e0' : '#666' }}>
-              {oc.char}
-            </span>
-          ))
-        : <span style={{ color: '#e0e0e0' }}>{typed}</span>}
+      <span style={{ color: '#e0e0e0' }}>{typed}</span>
      <span
        style={{
          display: 'inline-block',
@@ -188,37 +180,116 @@ const TypingOverlay: React.FC<{
  );
 };

-// ─── Single phone: iPhone 17 Pro + real screenshot + typing + keyboard ───
+// ─── Single phone: iPhone 17 Pro + Claude Code header + typing + keyboard ───
 const MobileCodeman: React.FC<{
  typed: string;
-  overlayChars?: { char: string; confirmed: boolean }[];
  cursorVisible: boolean;
  activeKey?: string;
  pressAge?: number;
  showKeyboard?: boolean;
  noAnimation?: boolean;
-}> = ({ typed, overlayChars, cursorVisible, activeKey, pressAge, showKeyboard = true, noAnimation }) => (
+  showPromo?: boolean;
+}> = ({ typed, cursorVisible, activeKey, pressAge, showKeyboard = true, noAnimation, showPromo }) => (
  <IPhone17ProFrame noAnimation={noAnimation}>
-    <div style={{ width: SCREEN_W, height: SCREEN_H, position: 'relative', overflow: 'hidden', background: '#000' }}>
-      {/* Real Codeman mobile screenshot, pushed down by safe area */}
-      <Img
-        src={staticFile('mobile-claude.png')}
-        style={{
-          width: SCREEN_W,
-          height: SCREEN_H - SCREENSHOT_Y_OFFSET,
-          objectFit: 'cover',
-          objectPosition: 'top',
-          position: 'absolute',
-          top: SCREENSHOT_Y_OFFSET,
-          left: 0,
-        }}
-      />
-
+    <div
+      style={{ width: SCREEN_W, height: SCREEN_H, position: 'relative', overflow: 'hidden', background: '#0d0d0d' }}
+    >
      {/* iOS status bar in the safe area */}
      <IOSStatusBar />

+      {/* Claude Code header from screenshot (tabs + session info) */}
+      <div
+        style={{
+          position: 'absolute',
+          top: SAFE_AREA_TOP,
+          left: 0,
+          right: 0,
+          height: HEADER_H,
+          overflow: 'hidden',
+          zIndex: 5,
+        }}
+      >
+        <Img
+          src={staticFile('mobile-claude.png')}
+          style={{
+            width: SCREEN_W,
+            objectFit: 'cover',
+            objectPosition: 'top left',
+          }}
+        />
+        {/* Fade to terminal background */}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: 30,
+            background: 'linear-gradient(transparent, #0d0d0d)',
+          }}
+        />
+      </div>
+
+      {/* Dark mask: hides screenshot text below Claude Code info (e.g. "Try edit...") */}
+      <div
+        style={{
+          position: 'absolute',
+          top: SAFE_AREA_TOP + 95,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 8,
+        }}
+      >
+        {/* Smooth gradient blend from screenshot into dark terminal */}
+        <div
+          style={{
+            height: 18,
+            background: 'linear-gradient(transparent, #0d0d0d)',
+          }}
+        />
+        <div style={{ flex: 1, background: '#0d0d0d' }} />
+      </div>
+
      {/* Typing animation */}
-      <TypingOverlay typed={typed} overlayChars={overlayChars} cursorVisible={cursorVisible} />
+      <TypingOverlay typed={typed} cursorVisible={cursorVisible} />
+
+      {/* Codeman toolbar from screenshot (/init, /clear, /compact, Run, Run Shell, voice) */}
+      <div
+        style={{
+          position: 'absolute',
+          bottom: 232,
+          left: 0,
+          right: 0,
+          height: TOOLBAR_H,
+          overflow: 'hidden',
+          zIndex: 15,
+        }}
+      >
+        {/* Gradient blend at top */}
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            height: 18,
+            background: 'linear-gradient(#0d0d0d, transparent)',
+            zIndex: 1,
+          }}
+        />
+        <Img
+          src={staticFile('mobile-claude.png')}
+          style={{
+            width: SCREEN_W,
+            position: 'absolute',
+            bottom: 0,
+          }}
+        />
+      </div>
+
+      {/* Promo cards between text and toolbar (left phone only) */}
+      {showPromo && <PromoBanners />}

      {/* iOS keyboard at bottom */}
      {showKeyboard && (
@@ -230,22 +301,22 @@ const MobileCodeman: React.FC<{
  </IPhone17ProFrame>
 );

-// ─── Label beneath phone ───
+// ─── Label above phone (prominent header) ───
 const PhoneLabel: React.FC<{
  title: string;
  detail: string;
  dotColor: string;
  detailColor: string;
 }> = ({ title, detail, dotColor, detailColor }) => (
-  <div style={{ textAlign: 'center', marginTop: 20 }}>
+  <div style={{ textAlign: 'center', marginBottom: 16 }}>
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 10,
-        fontSize: 24,
-        fontWeight: 600,
+        fontSize: 28,
+        fontWeight: 700,
        fontFamily: fonts.ui,
        color: '#fff',
      }}
@@ -267,6 +338,62 @@ const PhoneLabel: React.FC<{
  </div>
 );

+// ─── Promo banners (inside left phone, between text and keyboard) ───
+const PromoBanners: React.FC = () => (
+  <div
+    style={{
+      position: 'absolute',
+      bottom: 332,
+      left: 8,
+      right: 8,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 8,
+      zIndex: 15,
+    }}
+  >
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+        padding: '12px 14px',
+        background: 'rgba(255,255,255,0.06)',
+        borderRadius: 12,
+        border: '1px solid rgba(255,255,255,0.1)',
+      }}
+    >
+      <svg width="30" height="30" viewBox="0 0 16 16" fill="#ccc" style={{ flexShrink: 0 }}>
+        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+      </svg>
+      <div>
+        <div style={{ fontSize: 18, fontWeight: 700, fontFamily: fonts.ui, color: '#e0e0e0' }}>Codeman</div>
+        <div style={{ fontSize: 12, fontFamily: fonts.mono, color: '#888' }}>github.com/Ark0N/Codeman</div>
+      </div>
+    </div>
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+        padding: '12px 14px',
+        background: 'rgba(255,255,255,0.06)',
+        borderRadius: 12,
+        border: '1px solid rgba(255,255,255,0.1)',
+      }}
+    >
+      <svg width="30" height="30" viewBox="0 0 16 16" style={{ flexShrink: 0 }}>
+        <rect width="16" height="16" rx="2" fill="#cb3837" />
+        <path d="M3 3h10v10H8V5H5v8H3z" fill="#fff" />
+      </svg>
+      <div>
+        <div style={{ fontSize: 18, fontWeight: 700, fontFamily: fonts.ui, color: '#e0e0e0' }}>xterm-zerolag-input</div>
+        <div style={{ fontSize: 12, fontFamily: fonts.mono, color: '#888' }}>npmjs.com/package/xterm-zerolag-input</div>
+      </div>
+    </div>
+  </div>
+);
+
 // ─── Title scene ───
 const TitleScene: React.FC = () => {
  const frame = useCurrentFrame();
@@ -357,12 +484,22 @@ const TypingDemo: React.FC = () => {
        }}
      >
        <div>
-          <MobileCodeman typed={zerolagTyped} cursorVisible activeKey={activeKey} pressAge={pressAge} noAnimation />
-          <PhoneLabel title="With Zerolag" detail="0ms delay" dotColor={colors.accent.green} detailColor={colors.accent.green} />
+          <PhoneLabel
+            title="With Zerolag"
+            detail="0ms local echo"
+            dotColor={colors.accent.green}
+            detailColor={colors.accent.green}
+          />
+          <MobileCodeman typed={zerolagTyped} cursorVisible activeKey={activeKey} pressAge={pressAge} noAnimation showPromo />
        </div>
        <div>
+          <PhoneLabel
+            title="Without Zerolag"
+            detail="600ms–2.7s server echo"
+            dotColor={colors.accent.red}
+            detailColor={colors.accent.red}
+          />
          <MobileCodeman typed={laggyTyped} cursorVisible activeKey={activeKey} pressAge={pressAge} noAnimation />
-          <PhoneLabel title="Without Zerolag" detail="600ms–1.2s delay" dotColor={colors.accent.red} detailColor={colors.accent.red} />
        </div>
      </div>
    </AbsoluteFill>
@@ -389,12 +526,22 @@ const PanelsEntrance: React.FC = () => {
    >
      <div style={{ display: 'flex', gap: 50, alignItems: 'flex-start' }}>
        <div>
+          <PhoneLabel
+            title="With Zerolag"
+            detail="0ms local echo"
+            dotColor={colors.accent.green}
+            detailColor={colors.accent.green}
+          />
          <MobileCodeman typed="" cursorVisible noAnimation />
-          <PhoneLabel title="With Zerolag" detail="0ms delay" dotColor={colors.accent.green} detailColor={colors.accent.green} />
        </div>
        <div>
+          <PhoneLabel
+            title="Without Zerolag"
+            detail="600ms–2.7s server echo"
+            dotColor={colors.accent.red}
+            detailColor={colors.accent.red}
+          />
          <MobileCodeman typed="" cursorVisible noAnimation />
-          <PhoneLabel title="Without Zerolag" detail="600ms–1.2s delay" dotColor={colors.accent.red} detailColor={colors.accent.red} />
        </div>
      </div>
    </AbsoluteFill>
Author	SHA1	Message	Date
arkon	625d4976d3	chore: version packages	2026-03-11 19:37:17 +01:00
arkonandClaude Opus 4.6	d02cddece6	fix: correct claudeSessionId for resumed sessions and clean up DEC sync dead code Use resumeSessionId for Claude conversation ID when resuming sessions, increase default font size to 14, extract shared history fetch logic, and remove unused DEC 2026 sync constants/functions (xterm.js 6.0 handles natively). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-11 19:36:58 +01:00
Ark0N	abbc4b13fd	Merge pull request #39 from sunnyzhouy/master feat: session resume, xterm.js 6.0 upgrade, and resize fix	2026-03-11 19:20:28 +01:00
arkonandClaude Opus 4.6	a14e47e19c	chore: version packages Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-11 19:13:49 +01:00
sunnyzhouy	754a966b53	Merge branch 'Ark0N:master' into master	2026-03-12 01:06:14 +08:00
zhouyuan	28dfc279d4	fix: resolve terminal resize scrollback ghost renders - Switch resize handler to 300ms trailing-edge debounce for single reflow - Add \x1b[3J (Erase Saved Lines) to clear scrollback reflow debris - Remove client-side cursor-up flicker filter and DEC 2026 marker stripping — xterm.js 6.0 handles synchronized output natively - Remove server-side DEC 2026 wrapping to prevent premature sync exit from non-reference-counted nested markers	2026-03-12 01:04:21 +08:00
arkonandClaude Opus 4.6	da85e9738b	fix: iPad tablet toolbar styling and PR #34 refinements - Scope toolbar bottom-offset to phone breakpoint only (position:fixed); prevents double-correction on iPad where toolbar is position:relative - Extract keyboard accessory bar styles to top-level mobile.css so /init, /clear, /compact buttons render correctly on iPad - Use desktop-style toolbar sizing on tablet (430-768px): smaller font, no forced min-height, proper gap between buttons - Show voice/mic button on tablet (was hidden at <1023px with no mobile replacement above 430px) - Bump CSS cache-bust version to 0.1633 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-11 12:59:47 +01:00
Ark0N	8b8907c4ec	Merge pull request #34 from arnlaugsson/fix/ipad-safari-toolbar-viewport fix: toolbar off-screen on iPad Safari with tabs	2026-03-11 01:26:55 +01:00
zhouyuan	2329dab240	feat: upgrade xterm.js 5.3 to 6.0 for native DEC 2026 synchronized output xterm.js 6.0.0 natively handles DEC mode 2026 (synchronized output), which renders Ink's cursor-up redraws atomically at the parser level. This eliminates split-frame rendering that caused table header loss and garbled overlapping text in Claude CLI sessions. - Migrate from xterm/xterm-addon-* to @xterm/* scoped packages - Update build.mjs and postinstall.js vendor paths - Remove old xterm 5.x dependencies	2026-03-10 14:59:26 +08:00
zhouyuan	31ce7405a6	perf: increase terminal scrollback from 5000 to 20000 lines Long-running Claude sessions can exceed 5000 lines easily, causing earlier content to be lost. 20000 lines retains ~4x more history.	2026-03-10 14:36:10 +08:00
zhouyuan	06f7d40c42	feat: reduce default font size and persist tabs across refresh - Default terminal font 14px → 12px, min 10px → 8px - Save tab metadata to localStorage on every render - Restore ended sessions as dimmed tabs after page refresh - Ended tabs show "Session ended" message on click	2026-03-10 14:30:21 +08:00
zhouyuan	05eba70598	feat: improve session resume reliability and persist user settings - Filter empty sessions from history API (check for conversation content) - Add --resume fallback to new session if resume fails (prevents dead panes) - Pass resumeSessionId through respawnPane for dead pane recovery - Persist respawn presets and runMode to server settings (cross-device sync) - Fix mobile touch handling for Recent Sessions dropdown (DOM API + touch CSS)	2026-03-10 14:03:42 +08:00
zhouyuan	d27974ff6e	chore: update package-lock.json	2026-03-10 02:23:15 +08:00
zhouyuan	3cca5380ba	fix: route shell sessions to correct endpoint on tab click selectSession() was always calling /interactive for restored idle sessions regardless of mode. Shell sessions now correctly call /shell. Also add loadHistorySessions and resumeHistorySession to frontend.	2026-03-10 02:23:10 +08:00
zhouyuan	6d7efc13e6	feat: add history session resume UI and API Add GET /api/history/sessions endpoint that scans Claude conversation files for resume. Add welcome overlay UI with clickable history items. Path decoding validates existence via fs.access with HOME fallback.	2026-03-10 02:23:02 +08:00
zhouyuan	63f86807ad	feat: add resumeSessionId support for conversation resume after reboot Add resumeSessionId field throughout the session creation pipeline, allowing sessions to resume previous Claude conversations via --resume flag instead of --session-id.	2026-03-10 02:22:53 +08:00
Skúli Arnlaugsson	2e4e646c06	fix: toolbar pushed off-screen on iPad Safari with tabs On iPad Safari with the tab bar visible, `100vh` extends behind the browser chrome, pushing the fixed-position toolbar out of view. - Add `viewport-fit=cover` to viewport meta tag - Use `100dvh` with `100vh` fallback for body/.app height - Set `--app-height` CSS variable from `visualViewport.height` via JS - Offset fixed toolbar on iOS Safari using the layout/visual viewport delta	2026-03-08 23:54:15 +00:00
arkon	507423b776	chore: version packages	2026-03-08 16:06:51 +01:00
arkonandClaude Opus 4.6	67d0b0b538	feat: add tunnel status indicator with control panel in header Green pulsing dot in the desktop header shows when Cloudflare tunnel is active. Clicking opens a dropdown panel with tunnel URL, remote client count, auth sessions, and start/stop/QR/revoke controls. Detects tunnel clients via Cf-Connecting-Ip header to exclude local connections from the count. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-08 16:06:15 +01:00
Ark0N	26cfd8b7ef	Merge pull request #33 from arnlaugsson/fix/macos-install-platform-deps fix: move Linux-only native deps to optionalDependencies	2026-03-08 15:55:16 +01:00
Skúli ArnlaugssonandClaude Opus 4.6	208e6bc175	fix: move Linux-only native deps to optionalDependencies `@remotion/compositor-linux-x64-gnu` and `@rspack/binding-linux-x64-gnu` are Linux x64 binaries that cause npm install to fail on macOS (arm64) with EBADPLATFORM. Moving them to optionalDependencies allows npm to skip them gracefully on unsupported platforms. Fixes #32 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-07 20:59:57 +00:00
arkonandClaude Opus 4.6	6d52b16edc	docs: add zerolag demo video to README Side-by-side comparison of local echo (0ms) vs server echo (600ms-2.7s) rendered from Remotion ZerolagDemo composition. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-07 07:43:52 +01:00
arkonandClaude Opus 4.6	4988e85901	docs: add Operation Lightspeed to v0.3.7 changelog Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-07 07:37:22 +01:00