claude-code-remote-pilot 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.4.0 — 2026-05-06
+
+### Added
+- **Web dashboard**: `web [port]` REPL command starts a browser UI at `http://127.0.0.1:3742` (auto-opens in default browser).
+  - Live session list via SSE (Server-Sent Events) — no polling, no WebSocket dependency
+  - Terminal output viewer with 2-second auto-refresh
+  - Send message to Claude from the browser
+  - Create new sessions from the browser (name, path, optional initial prompt)
+  - Kill sessions from the session detail view
+  - Dark/light mode, responsive layout (mobile + desktop)
+  - Status activity log: tracks transitions between running / idle / needs-response / limit / offline
+  - All tmux calls use `spawnSync` array args — shell-injection safe; server binds to `127.0.0.1` only
+
+### Fixed
+- Shell injection vulnerability in `Watcher.js`: `tmux send-keys` on auto-resume now uses `spawnSync` with array args instead of shell interpolation.
+
+---
+
 ## 0.3.1 — 2026-05-06
 
 ### Changed

package/README.md

@@ -104,6 +104,7 @@ sudo apt update && sudo apt install tmux
 | `spawn <path> [name]` | Start Claude at a path. Name defaults to the directory name. |
 | `list` | One-shot status of all sessions. |
 | `watch` | Live dashboard with offline session history. Press a number to select, `q` to exit. |
+| `web [port]` | Start the web dashboard at `http://127.0.0.1:3742` (or given port). Opens browser automatically. |
 | `attach <name>` | Open a tmux session in the current terminal. |
 | `kill <name>` | Stop a session. |
 | `help` | Show command reference. |
@@ -111,6 +112,27 @@ sudo apt update && sudo apt install tmux
 
 ---
 
+## Web dashboard
+
+Type `web` in the REPL to open a browser dashboard:
+
+```
+claude-pilot> web
+  ✓ Web dashboard started at http://127.0.0.1:3742
+```
+
+The dashboard shows all sessions (live and offline), lets you:
+
+- View terminal output for each session (auto-refreshes every 2 seconds)
+- Send a message to Claude directly from the browser
+- Spawn new sessions with a name, path, and optional initial prompt
+- Kill sessions
+- See a live activity log of status transitions
+
+The server binds to `127.0.0.1` only — not reachable from other machines. Use `web <port>` to use a custom port.
+
+---
+
 ## Telegram setup
 
 Create a bot via `@BotFather` and get your token.
@@ -173,7 +195,7 @@ Start Claude without `--dangerously-skip-permissions` unless you know what you'r
 - [x] Telegram notifications
 - [x] interactive REPL — spawn, watch, attach, kill
 - [x] multi-session support
-- [ ] web dashboard (sessions connect to pilot server)
+- [x] web dashboard — `web [port]` command, React SPA, SSE live updates
 - [x] persistent session history with offline session display
 - [ ] pluggable notification providers
 - [ ] safety / policy engine

package/bin/claude-pilot.js

@@ -6,6 +6,7 @@ const path = require('path');
 const fs = require('fs');
 const readline = require('readline');
 const SessionManager = require('../lib/SessionManager');
+const WebServer = require('../lib/WebServer');
 const config = require('../lib/config');
 
 // ─── dependency checks ────────────────────────────────────────────────────────
@@ -318,6 +319,7 @@ const HELP = `
   spawn <path> [name]   Start Claude at path (name defaults to dir name)
   list                  Show all sessions
   watch                 Live session monitor  (q to exit)
+  web [port]            Start web dashboard  (default port 3742)
   attach <name>         Open tmux session in this terminal
   kill <name>           Stop a session
   resume [message]      Show or set the message sent after a limit resets
@@ -370,9 +372,9 @@ ${HELP}`);
 
   const cwd = process.cwd();
   const defaultName = path.basename(cwd);
-  const mount = await question(setupRl, `Mount current directory as a session? (${defaultName}) [Y/n] `);
+  const mount = await question(setupRl, `Mount current directory as a session? (${defaultName}) [y/N] `);
 
-  if (isYes(mount)) {
+  if (mount === 'y' || mount === 'yes') {
     const rawName = await questionRaw(setupRl, `Session name [${defaultName}]: `);
     const session = manager.spawn(cwd, rawName || defaultName);
     console.log(`  ✓ "${session.name}" started at ${session.path}`);
@@ -428,6 +430,22 @@ ${HELP}`);
           startWatch(manager, replRl);
           return;
         }
+        case 'web': {
+          const port = parseInt(args[0]) || 3742;
+          let webServer = manager._webServer;
+          if (webServer) {
+            console.log(`  Web dashboard already running at http://127.0.0.1:${webServer.port}`);
+            break;
+          }
+          webServer = new WebServer(manager, port);
+          manager._webServer = webServer;
+          webServer.start();
+          const url = `http://127.0.0.1:${port}`;
+          console.log(`  ✓ Web dashboard started at ${url}`);
+          const opener = process.platform === 'darwin' ? 'open' : 'xdg-open';
+          spawn(opener, [url], { stdio: 'ignore', detached: true }).unref();
+          break;
+        }
         case 'attach': {
           if (!args[0]) { console.log('  Usage: attach <name>'); break; }
           replRl.pause();

package/lib/Watcher.js

@@ -1,5 +1,5 @@
 'use strict';
-const { execSync } = require('child_process');
+const { execSync, spawnSync } = require('child_process');
 const crypto = require('crypto');
 const notifier = require('./notifier');
 
@@ -146,7 +146,7 @@ class Watcher {
 
     await new Promise(r => setTimeout(r, wait * 1000));
 
-    try { execSync(`tmux send-keys -t "${this.session.name}" "${this.resumeCommand}" Enter`, { stdio: 'ignore' }); }
+    try { spawnSync('tmux', ['send-keys', '-t', this.session.name, this.resumeCommand, 'Enter'], { stdio: 'ignore' }); }
     catch {}
 
     this.lastResumeAt = Date.now() / 1000;

package/lib/WebServer.js

@@ -0,0 +1,171 @@
+'use strict';
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const { spawnSync } = require('child_process');
+const config = require('./config');
+
+const STRIP_ANSI = /\x1b\[[0-9;]*[mGKHFABCDJsuhl]|\x1b[()][AB012]/g;
+
+class WebServer {
+  constructor(manager, port = 3742) {
+    this.manager = manager;
+    this.port = port;
+    this.startedAt = new Date();
+    this.server = null;
+    this._clients = new Set();
+    this._broadcastInterval = null;
+  }
+
+  _buildAllSessions() {
+    const active = this.manager.list();
+    const activeNames = new Set(active.map(s => s.name));
+    const history = config.getHistory();
+    const offline = history
+      .filter(h => !activeNames.has(h.name))
+      .map(h => ({ name: h.name, path: h.path, status: 'offline', startedAt: h.lastSeen, resumeAt: null }));
+    return [...active, ...offline].map(s => ({ ...s, id: s.name }));
+  }
+
+  _getOutput(name) {
+    const result = spawnSync('tmux', ['capture-pane', '-pt', name, '-S', '-500'], { encoding: 'utf8' });
+    return result.stdout ? result.stdout.replace(STRIP_ANSI, '') : '';
+  }
+
+  _json(res, code, data) {
+    res.writeHead(code, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify(data));
+  }
+
+  _readBody(req, cb) {
+    let raw = '';
+    req.on('data', d => raw += d);
+    req.on('end', () => {
+      try { cb(null, JSON.parse(raw || '{}')); }
+      catch { cb(new Error('Invalid JSON')); }
+    });
+  }
+
+  _handleApi(req, res, pathname) {
+    // GET /api/sessions
+    if (req.method === 'GET' && pathname === '/api/sessions') {
+      return this._json(res, 200, this._buildAllSessions());
+    }
+
+    // GET /api/status
+    if (req.method === 'GET' && pathname === '/api/status') {
+      return this._json(res, 200, {
+        startedAt: this.startedAt,
+        port: this.port,
+        activeSessions: this.manager.list().length,
+      });
+    }
+
+    // POST /api/sessions — spawn
+    if (req.method === 'POST' && pathname === '/api/sessions') {
+      return this._readBody(req, (err, body) => {
+        if (err) return this._json(res, 400, { error: err.message });
+        const { name, path: dirPath, prompt: initialPrompt } = body;
+        try {
+          const session = this.manager.spawn(dirPath, name);
+          if (initialPrompt) {
+            setTimeout(() => {
+              spawnSync('tmux', ['send-keys', '-t', session.name, initialPrompt, 'Enter']);
+            }, 2000);
+          }
+          this._json(res, 201, { ...session, id: session.name });
+        } catch (e) {
+          this._json(res, 400, { error: e.message });
+        }
+      });
+    }
+
+    // GET /api/sessions/:name/output
+    const outputMatch = pathname.match(/^\/api\/sessions\/([^/]+)\/output$/);
+    if (req.method === 'GET' && outputMatch) {
+      const name = decodeURIComponent(outputMatch[1]);
+      return this._json(res, 200, { output: this._getOutput(name) });
+    }
+
+    // POST /api/sessions/:name/send
+    const sendMatch = pathname.match(/^\/api\/sessions\/([^/]+)\/send$/);
+    if (req.method === 'POST' && sendMatch) {
+      const name = decodeURIComponent(sendMatch[1]);
+      return this._readBody(req, (err, body) => {
+        if (err) return this._json(res, 400, { error: err.message });
+        const { message } = body;
+        if (!message) return this._json(res, 400, { error: 'message required' });
+        spawnSync('tmux', ['send-keys', '-t', name, message, 'Enter']);
+        this._json(res, 200, { ok: true });
+      });
+    }
+
+    // DELETE /api/sessions/:name
+    const killMatch = pathname.match(/^\/api\/sessions\/([^/]+)$/);
+    if (req.method === 'DELETE' && killMatch) {
+      const name = decodeURIComponent(killMatch[1]);
+      try {
+        this.manager.kill(name);
+        return this._json(res, 200, { ok: true });
+      } catch (e) {
+        return this._json(res, 400, { error: e.message });
+      }
+    }
+
+    this._json(res, 404, { error: 'Not found' });
+  }
+
+  _broadcast() {
+    if (!this._clients.size) return;
+    const payload = `data: ${JSON.stringify(this._buildAllSessions())}\n\n`;
+    for (const res of this._clients) {
+      try { res.write(payload); } catch { this._clients.delete(res); }
+    }
+  }
+
+  start() {
+    const uiHtml = fs.readFileSync(path.join(__dirname, 'ui.html'), 'utf8');
+
+    this.server = http.createServer((req, res) => {
+      const url = new URL(req.url, `http://127.0.0.1:${this.port}`);
+      const pathname = url.pathname;
+
+      if (pathname === '/' || pathname === '/index.html') {
+        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+        return res.end(uiHtml);
+      }
+
+      if (pathname === '/events') {
+        res.writeHead(200, {
+          'Content-Type': 'text/event-stream',
+          'Cache-Control': 'no-cache',
+          'Connection': 'keep-alive',
+        });
+        this._clients.add(res);
+        res.write(`data: ${JSON.stringify(this._buildAllSessions())}\n\n`);
+        req.on('close', () => this._clients.delete(res));
+        return;
+      }
+
+      if (pathname.startsWith('/api/')) {
+        return this._handleApi(req, res, pathname);
+      }
+
+      res.writeHead(404);
+      res.end('Not found');
+    });
+
+    this._broadcastInterval = setInterval(() => this._broadcast(), 3000);
+    this.server.listen(this.port, '127.0.0.1');
+    return this.port;
+  }
+
+  stop() {
+    clearInterval(this._broadcastInterval);
+    for (const res of this._clients) { try { res.end(); } catch {} }
+    this._clients.clear();
+    if (this.server) this.server.close();
+  }
+}
+
+module.exports = WebServer;

package/lib/ui.html

@@ -0,0 +1,858 @@
+<!doctype html>
+<html lang="en">
+<head><script>(function(){
+  function makeStore(){
+    var data={};
+    var api={getItem:function(k){return Object.prototype.hasOwnProperty.call(data,k)?data[k]:null;},setItem:function(k,v){data[k]=String(v);},removeItem:function(k){delete data[k];},clear:function(){data={};},key:function(i){return Object.keys(data)[i]||null;}};
+    Object.defineProperty(api,'length',{get:function(){return Object.keys(data).length;}});
+    return api;
+  }
+  function tryShim(name){var works=false;try{works=!!window[name]&&typeof window[name].getItem==='function';void window[name].length;}catch(_){works=false;}if(works)return;try{Object.defineProperty(window,name,{configurable:true,value:makeStore()});}catch(_){try{window[name]=makeStore();}catch(__){}}};
+  tryShim('localStorage');tryShim('sessionStorage');
+})();</script>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Claude Code Pilot — Dashboard</title>
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" crossorigin="anonymous"></script>
+<style>
+  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
+
+  :root {
+    --bg:      oklch(97% 0.018 70);
+    --surface: oklch(99% 0.008 70);
+    --surface-hover: oklch(96% 0.016 70);
+    --fg:      oklch(22% 0.02 50);
+    --fg-secondary: oklch(35% 0.022 50);
+    --muted:   oklch(50% 0.018 50);
+    --border:  oklch(90% 0.014 70);
+    --accent:  oklch(64% 0.13 28);
+    --accent-soft: oklch(64% 0.13 28 / 0.08);
+    --accent-medium: oklch(64% 0.13 28 / 0.15);
+    --success: oklch(62% 0.14 145);
+    --success-soft: oklch(62% 0.14 145 / 0.1);
+    --warning: oklch(68% 0.16 75);
+    --warning-soft: oklch(68% 0.16 75 / 0.1);
+    --error:   oklch(58% 0.20 25);
+    --error-soft: oklch(58% 0.20 25 / 0.1);
+    --idle:    oklch(55% 0.018 250);
+    --idle-soft: oklch(55% 0.018 250 / 0.1);
+    --font-display: 'Newsreader','Iowan Old Style',Georgia,serif;
+    --font-body:    -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
+    --font-mono:    'SF Mono','JetBrains Mono',ui-monospace,Menlo,monospace;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --shadow-sm: 0 1px 2px oklch(22% 0.02 50 / 0.04);
+    --shadow-md: 0 2px 8px oklch(22% 0.02 50 / 0.06);
+    --shadow-inner: inset 0 1px 3px oklch(22% 0.02 50 / 0.04);
+    --sidebar-w: 240px;
+    --header-h: 56px;
+  }
+
+  [data-theme="dark"] {
+    --bg:      oklch(18% 0.018 50);
+    --surface: oklch(22% 0.02 50);
+    --surface-hover: oklch(26% 0.022 50);
+    --fg:      oklch(95% 0.008 70);
+    --fg-secondary: oklch(75% 0.012 70);
+    --muted:   oklch(55% 0.018 50);
+    --border:  oklch(32% 0.02 50);
+    --accent:  oklch(70% 0.14 32);
+    --accent-soft: oklch(70% 0.14 32 / 0.12);
+    --accent-medium: oklch(70% 0.14 32 / 0.2);
+    --success: oklch(68% 0.15 150);
+    --success-soft: oklch(68% 0.15 150 / 0.12);
+    --warning: oklch(72% 0.16 78);
+    --warning-soft: oklch(72% 0.16 78 / 0.12);
+    --error:   oklch(64% 0.20 28);
+    --error-soft: oklch(64% 0.20 28 / 0.12);
+    --idle:    oklch(60% 0.018 250);
+    --idle-soft: oklch(60% 0.018 250 / 0.12);
+    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.2);
+    --shadow-md: 0 2px 8px oklch(0% 0 0 / 0.25);
+    --shadow-inner: inset 0 1px 3px oklch(0% 0 0 / 0.15);
+  }
+
+  body { font-family:var(--font-body);background:var(--bg);color:var(--fg);line-height:1.5;font-size:14px;-webkit-font-smoothing:antialiased; }
+
+  #root { height:100vh;display:flex;flex-direction:column; }
+  .app-shell { display:flex;flex-direction:column;height:100vh;overflow:hidden; }
+
+  .sidebar { position:fixed;top:0;left:0;width:100%;height:auto;max-height:85vh;background:var(--surface);border-bottom:1px solid var(--border);z-index:100;transform:translateY(-100%);transition:transform 0.25s ease;border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow-y:auto; }
+  .sidebar.open { transform:translateY(0); }
+  .sidebar-overlay { position:fixed;inset:0;background:oklch(0% 0 0 / 0.3);z-index:99;opacity:0;pointer-events:none;transition:opacity 0.25s ease; }
+  .sidebar-overlay.open { opacity:1;pointer-events:auto; }
+  .sidebar-header { padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px; }
+  .sidebar-close { margin-left:auto;background:none;border:none;cursor:pointer;color:var(--muted);padding:4px;display:flex; }
+  .logo { display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg); }
+  .logo-mark { width:28px;height:28px;background:var(--accent);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--surface);font-weight:700;font-size:13px; }
+  .logo-text { font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-0.01em; }
+  .logo-badge { font-size:10px;font-family:var(--font-mono);color:var(--muted);background:var(--accent-soft);padding:2px 6px;border-radius:4px; }
+  .sidebar-nav { padding:12px 10px; }
+  .nav-section-label { font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);padding:8px 8px 4px;margin-top:8px; }
+  .nav-item { display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--radius-sm);color:var(--fg-secondary);cursor:pointer;font-size:14px;font-weight:500;transition:background 0.15s,color 0.15s;user-select:none;border:none;background:none;width:100%;text-align:left; }
+  .nav-item:hover { background:var(--surface-hover);color:var(--fg); }
+  .nav-item.active { background:var(--accent-soft);color:var(--fg);font-weight:600; }
+  .nav-icon { width:18px;height:18px;opacity:0.7;flex-shrink:0; }
+  .nav-item.active .nav-icon { opacity:1; }
+  .nav-count { margin-left:auto;font-size:11px;font-family:var(--font-mono);color:var(--muted);background:var(--surface-hover);padding:1px 6px;border-radius:10px;min-width:20px;text-align:center; }
+  .sidebar-footer { padding:12px 10px;border-top:1px solid var(--border);margin-top:auto; }
+
+  .main { flex:1;display:flex;flex-direction:column;overflow:hidden; }
+  .mobile-header { height:var(--header-h);border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:center;padding:0 16px;gap:12px;flex-shrink:0; }
+  .menu-btn { background:none;border:none;cursor:pointer;color:var(--fg);padding:6px;display:flex; }
+  .header { height:var(--header-h);border-bottom:1px solid var(--border);background:var(--surface);display:none;align-items:center;padding:0 24px;gap:16px;flex-shrink:0; }
+  .mobile-title { font-family:var(--font-display);font-size:15px;font-weight:600;flex:1; }
+  .header-title { font-family:var(--font-display);font-size:15px;font-weight:600; }
+  .header-spacer { flex:1; }
+  .theme-toggle { display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--fg-secondary);cursor:pointer;font-size:12px;font-family:var(--font-body);transition:border-color 0.15s; }
+  .theme-toggle:hover { border-color:var(--muted); }
+
+  .content { flex:1;overflow-y:auto;padding:16px; }
+
+  .session-cards { display:grid;grid-template-columns:1fr;gap:12px; }
+  .session-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;cursor:pointer;transition:border-color 0.15s,box-shadow 0.15s; }
+  .session-card:hover { border-color:var(--muted);box-shadow:var(--shadow-md); }
+  .session-card.offline { opacity:0.6; }
+  .session-card-header { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px; }
+  .session-card-name { font-weight:600;font-size:14px;color:var(--fg);line-height:1.3; }
+  .session-card-meta { font-size:12px;color:var(--muted);margin-top:4px; }
+  .session-card-body { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border); }
+  .session-card-field { font-size:11px; }
+  .session-card-field-label { color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:2px; }
+  .session-card-field-value { font-family:var(--font-mono);font-size:12px;color:var(--fg-secondary); }
+
+  .status-pill { display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:10px;font-family:var(--font-mono);letter-spacing:0.02em; }
+  .status-dot { width:6px;height:6px;border-radius:50%; }
+  .status-running { background:var(--success-soft);color:var(--success); }
+  .status-running .status-dot { background:var(--success); }
+  .status-idle { background:var(--idle-soft);color:var(--idle); }
+  .status-idle .status-dot { background:var(--idle); }
+  .status-error { background:var(--error-soft);color:var(--error); }
+  .status-error .status-dot { background:var(--error); }
+  .status-warn { background:var(--warning-soft);color:var(--warning); }
+  .status-warn .status-dot { background:var(--warning); }
+
+  .card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm); }
+
+  .btn { display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;font-family:var(--font-body);cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--fg);transition:background 0.15s,border-color 0.15s;white-space:nowrap; }
+  .btn:hover { background:var(--surface-hover); }
+  .btn:disabled { opacity:0.5;cursor:not-allowed; }
+  .btn-primary { background:var(--accent);color:oklch(99% 0.008 70);border-color:var(--accent); }
+  .btn-primary:hover { filter:brightness(1.05); }
+  .btn-sm { padding:4px 10px;font-size:12px; }
+
+  .terminal { background:oklch(14% 0.015 50);color:oklch(82% 0.015 70);font-family:var(--font-mono);font-size:13px;line-height:1.6;border-radius:var(--radius-md);overflow:hidden;border:1px solid oklch(28% 0.02 50); }
+  .terminal-header { display:flex;align-items:center;gap:8px;padding:10px 14px;background:oklch(18% 0.018 50);border-bottom:1px solid oklch(28% 0.02 50); }
+  .terminal-dot { width:10px;height:10px;border-radius:50%; }
+  .terminal-title { font-size:12px;color:oklch(65% 0.018 50);margin-left:8px; }
+  .terminal-body { padding:16px;min-height:320px;max-height:420px;overflow-y:auto;white-space:pre-wrap;word-break:break-word;font-family:var(--font-mono);font-size:12px;line-height:1.5; }
+
+  .form-group { margin-bottom:18px; }
+  .form-label { display:block;font-size:12px;font-weight:600;color:var(--fg);margin-bottom:6px; }
+  .form-hint { font-size:11px;color:var(--muted);margin-top:4px; }
+  .form-input,.form-select,.form-textarea { width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);font-size:13px;font-family:var(--font-body);transition:border-color 0.15s; }
+  .form-input:focus,.form-select:focus,.form-textarea:focus { outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft); }
+  .form-textarea { resize:vertical;min-height:80px; }
+  .form-actions { display:flex;gap:10px;justify-content:flex-end;padding-top:20px;border-top:1px solid var(--border);margin-top:8px; }
+
+  .stat-row { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px; }
+  .stat-card { padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-inner); }
+  .stat-label { font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);margin-bottom:6px; }
+  .stat-value { font-size:22px;font-weight:700;font-family:var(--font-display);color:var(--fg);line-height:1.2; }
+  .stat-sub { font-size:11px;color:var(--muted);margin-top:4px; }
+
+  .activity-list { list-style:none; }
+  .activity-item { display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px; }
+  .activity-item:last-child { border-bottom:none; }
+  .activity-time { font-size:11px;color:var(--muted);font-family:var(--font-mono);white-space:nowrap;margin-top:2px; }
+  .activity-text { color:var(--fg-secondary); }
+  .activity-text strong { color:var(--fg);font-weight:600; }
+
+  .section-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
+  .section-title { font-family:var(--font-display);font-size:15px;font-weight:600; }
+
+  .back-link { display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer;margin-bottom:16px;font-weight:500;border:none;background:none;padding:0;font-family:var(--font-body); }
+  .back-link:hover { color:var(--fg); }
+
+  .detail-header { display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:20px; }
+  .detail-title { font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.3; }
+  .detail-meta { font-size:12px;color:var(--muted);margin-top:4px; }
+  .detail-actions { display:flex;gap:8px;margin-left:0;flex-wrap:wrap; }
+
+  .detail-grid { display:grid;grid-template-columns:1fr;gap:16px; }
+  .detail-sidebar .card { padding:16px; }
+  .detail-sidebar h3 { font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);margin-bottom:12px; }
+
+  .info-row { display:flex;justify-content:space-between;padding:6px 0;font-size:12px; }
+  .info-label { color:var(--muted); }
+  .info-value { font-weight:600;font-family:var(--font-mono); }
+
+  .empty-state { text-align:center;padding:48px 24px;color:var(--muted); }
+  .empty-state-icon { font-size:32px;margin-bottom:12px;opacity:0.5; }
+  .empty-state-title { font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--fg-secondary);margin-bottom:6px; }
+  .empty-state-desc { font-size:13px; }
+
+  .create-layout { max-width:640px; }
+
+  .content::-webkit-scrollbar { width:6px; }
+  .content::-webkit-scrollbar-track { background:transparent; }
+  .content::-webkit-scrollbar-thumb { background:var(--border);border-radius:3px; }
+  .terminal-body::-webkit-scrollbar { width:6px; }
+  .terminal-body::-webkit-scrollbar-track { background:transparent; }
+  .terminal-body::-webkit-scrollbar-thumb { background:oklch(30% 0.02 50);border-radius:3px; }
+
+  .conn-dot { width:8px;height:8px;border-radius:50%;background:var(--success);display:inline-block; }
+  .conn-dot.disconnected { background:var(--error); }
+
+  @media (min-width:768px) {
+    .app-shell { flex-direction:row; }
+    .sidebar { position:static;width:var(--sidebar-w);height:100vh;max-height:none;transform:none;border-bottom:none;border-right:1px solid var(--border);border-radius:0;display:flex;flex-direction:column; }
+    .sidebar-close,.sidebar-overlay { display:none; }
+    .mobile-header { display:none; }
+    .header { display:flex; }
+    .content { padding:24px; }
+    .session-cards { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
+    .stat-row { grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px; }
+    .detail-grid { grid-template-columns:1fr 300px;gap:20px; }
+    .detail-header { flex-direction:row;align-items:flex-start;gap:16px;margin-bottom:24px; }
+    .detail-title { font-size:20px; }
+    .detail-actions { margin-left:auto; }
+  }
+
+  @media (min-width:1200px) {
+    .session-cards { grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); }
+  }
+</style>
+</head>
+<body>
+<div id="root"></div>
+
+<script type="text/babel">
+const { useState, useEffect, useRef, useCallback } = React;
+
+const memStore = new Map();
+const storage = {
+  getItem(key) { try { return localStorage.getItem(key); } catch { return memStore.has(key) ? memStore.get(key) : null; } },
+  setItem(key, val) { try { localStorage.setItem(key, val); } catch { memStore.set(key, val); } },
+};
+
+function relativeTime(dateStr) {
+  if (!dateStr) return '—';
+  const secs = Math.max(0, Math.floor((Date.now() - new Date(dateStr)) / 1000));
+  if (secs < 60) return `${secs}s ago`;
+  if (secs < 3600) return `${Math.floor(secs / 60)}m ago`;
+  if (secs < 86400) return `${Math.floor(secs / 3600)}h ${Math.floor((secs % 3600) / 60)}m ago`;
+  return `${Math.floor(secs / 86400)}d ago`;
+}
+
+function formatUptime(startedAt) {
+  if (!startedAt) return '—';
+  const secs = Math.max(0, Math.floor((Date.now() - new Date(startedAt)) / 1000));
+  const h = Math.floor(secs / 3600);
+  const m = Math.floor((secs % 3600) / 60);
+  if (h > 0) return `${h}h ${m}m`;
+  return `${m}m`;
+}
+
+function formatTokens(tokens) {
+  if (!tokens) return '—';
+  return `↑${tokens.sent} ↓${tokens.received}`;
+}
+
+function statusCls(status) {
+  switch (status) {
+    case 'running': return 'status-running';
+    case 'needs-response': return 'status-warn';
+    case 'limit': return 'status-warn';
+    case 'idle': return 'status-idle';
+    default: return 'status-idle';
+  }
+}
+
+function statusLabel(status) {
+  if (status === 'needs-response') return 'needs input';
+  return status;
+}
+
+/* --- Icons --- */
+const Icons = {
+  dashboard: <svg className="nav-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="2" y="2" width="6" height="6" rx="1"/><rect x="10" y="2" width="6" height="6" rx="1"/><rect x="2" y="10" width="6" height="6" rx="1"/><rect x="10" y="10" width="6" height="6" rx="1"/></svg>,
+  sessions: <svg className="nav-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="2" y="3" width="14" height="12" rx="1.5"/><line x1="2" y1="7" x2="16" y2="7"/><line x1="5" y1="11" x2="9" y2="11"/></svg>,
+  plus: <svg className="nav-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><line x1="9" y1="3" x2="9" y2="15"/><line x1="3" y1="9" x2="15" y2="9"/></svg>,
+  settings: <svg className="nav-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="9" cy="9" r="3"/><path d="M9 1v2M9 15v2M1 9h2M15 9h2M3.3 3.3l1.4 1.4M13.3 13.3l1.4 1.4M3.3 14.7l1.4-1.4M13.3 4.7l1.4-1.4"/></svg>,
+  sun: <svg className="nav-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="9" cy="9" r="4"/><line x1="9" y1="1" x2="9" y2="3"/><line x1="9" y1="15" x2="9" y2="17"/><line x1="1" y1="9" x2="3" y2="9"/><line x1="15" y1="9" x2="17" y2="9"/></svg>,
+  moon: <svg className="nav-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M15 10.5a6.5 6.5 0 0 1-8-8A6.5 6.5 0 1 0 15 10.5Z"/></svg>,
+  arrow: <svg className="nav-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><polyline points="11,4 6,9 11,14"/></svg>,
+  terminal: <svg className="nav-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><polyline points="4,5 8,9 4,13"/><line x1="10" y1="13" x2="14" y2="13"/></svg>,
+  trash: <svg className="nav-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 5h12M7 5V3.5A1.5 1.5 0 0 1 8.5 2h1A1.5 1.5 0 0 1 11 3.5V5M6 8v5M9 8v5M12 8v5"/><path d="M4.5 5l.7 9.8a1.5 1.5 0 0 0 1.5 1.2h6.6a1.5 1.5 0 0 0 1.5-1.2L13.5 5"/></svg>,
+  refresh: <svg className="nav-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 9a6 6 0 0 1 10.9-2.5M15 9a6 6 0 0 1-10.9 2.5"/><polyline points="3,4 3,9 8,9"/><polyline points="15,14 15,9 10,9"/></svg>,
+  menu: <svg className="nav-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><line x1="3" y1="5" x2="15" y2="5"/><line x1="3" y1="9" x2="15" y2="9"/><line x1="3" y1="13" x2="15" y2="13"/></svg>,
+  close: <svg className="nav-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><line x1="4" y1="4" x2="14" y2="14"/><line x1="14" y1="4" x2="4" y2="14"/></svg>,
+  send: <svg className="nav-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><line x1="2" y1="9" x2="16" y2="9"/><polyline points="10,3 16,9 10,15"/></svg>,
+};
+
+/* --- Status Pill --- */
+function StatusPill({ status }) {
+  const cls = statusCls(status);
+  const label = statusLabel(status);
+  const dim = status === 'offline';
+  return (
+    <span className={`status-pill ${cls}`} style={dim ? { opacity: 0.55 } : {}}>
+      <span className="status-dot" />
+      {label}
+    </span>
+  );
+}
+
+/* --- Sidebar --- */
+function Sidebar({ currentScreen, onNavigate, sessionCount, open, onClose, connected }) {
+  return (
+    <>
+      <div className={`sidebar-overlay ${open ? 'open' : ''}`} onClick={onClose} />
+      <aside className={`sidebar ${open ? 'open' : ''}`}>
+        <div className="sidebar-header">
+          <a className="logo" href="#">
+            <div className="logo-mark">C</div>
+            <span className="logo-text">Code Pilot</span>
+          </a>
+          <span className="logo-badge">v0.4.0</span>
+          <button className="sidebar-close" onClick={onClose}>{Icons.close}</button>
+        </div>
+        <nav className="sidebar-nav">
+          <div className="nav-section-label">Workspace</div>
+          <button className={`nav-item ${currentScreen === 'dashboard' ? 'active' : ''}`} onClick={() => { onNavigate('dashboard'); onClose(); }}>
+            {Icons.dashboard} Dashboard
+          </button>
+          <button className={`nav-item ${currentScreen === 'sessions' ? 'active' : ''}`} onClick={() => { onNavigate('sessions'); onClose(); }}>
+            {Icons.sessions} Sessions <span className="nav-count">{sessionCount}</span>
+          </button>
+          <button className={`nav-item ${currentScreen === 'create' ? 'active' : ''}`} onClick={() => { onNavigate('create'); onClose(); }}>
+            {Icons.plus} New Session
+          </button>
+        </nav>
+        <div className="sidebar-footer">
+          <div style={{ padding: '4px 8px', fontSize: '11px', color: 'var(--muted)', fontFamily: 'var(--font-mono)', display: 'flex', alignItems: 'center', gap: 6 }}>
+            <span className={`conn-dot ${connected ? '' : 'disconnected'}`} />
+            {connected ? 'Connected' : 'Disconnected'}
+          </div>
+        </div>
+      </aside>
+    </>
+  );
+}
+
+/* --- Dashboard Screen --- */
+function DashboardScreen({ onNavigate, sessions, activity, serverStatus }) {
+  const active = sessions.filter(s => s.status !== 'offline');
+  const running = sessions.filter(s => s.status === 'running');
+  const uptime = serverStatus ? formatUptime(serverStatus.startedAt) : '—';
+  const port = serverStatus ? serverStatus.port : 3742;
+
+  return (
+    <div>
+      <div className="stat-row">
+        <div className="stat-card">
+          <div className="stat-label">Running</div>
+          <div className="stat-value">{running.length}</div>
+          <div className="stat-sub">of {sessions.length} total</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-label">Active</div>
+          <div className="stat-value">{active.length}</div>
+          <div className="stat-sub">tmux sessions</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-label">Supervisor</div>
+          <div className="stat-value" style={{ color: 'var(--success)', fontSize: 16 }}>Online</div>
+          <div className="stat-sub">:{port}</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-label">Uptime</div>
+          <div className="stat-value" style={{ fontSize: 16 }}>{uptime}</div>
+          <div className="stat-sub">since last start</div>
+        </div>
+      </div>
+
+      <div className="section-header">
+        <h2 className="section-title">Sessions</h2>
+        <button className="btn btn-sm" onClick={() => onNavigate('create')}>
+          {Icons.plus} New
+        </button>
+      </div>
+
+      {sessions.length === 0 ? (
+        <div className="empty-state">
+          <div className="empty-state-icon">⌘</div>
+          <div className="empty-state-title">No sessions yet</div>
+          <div className="empty-state-desc">Create a session to get started.</div>
+        </div>
+      ) : (
+        <div className="session-cards">
+          {sessions.map(s => (
+            <div key={s.id} className={`session-card ${s.status === 'offline' ? 'offline' : ''}`} onClick={() => onNavigate('detail', s)}>
+              <div className="session-card-header">
+                <div>
+                  <div className="session-card-name">{s.name}</div>
+                  <div className="session-card-meta" style={{ maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.path}</div>
+                </div>
+                <StatusPill status={s.status} />
+              </div>
+              <div className="session-card-body">
+                <div className="session-card-field">
+                  <div className="session-card-field-label">Started</div>
+                  <div className="session-card-field-value">{relativeTime(s.startedAt)}</div>
+                </div>
+                <div className="session-card-field">
+                  <div className="session-card-field-label">Tokens</div>
+                  <div className="session-card-field-value">{formatTokens(s.tokens)}</div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {activity.length > 0 && (
+        <div style={{ marginTop: 24 }}>
+          <div className="section-header">
+            <h2 className="section-title">Recent Activity</h2>
+          </div>
+          <div className="card" style={{ padding: '14px 18px' }}>
+            <ul className="activity-list">
+              {activity.map((a, i) => (
+                <li key={i} className="activity-item">
+                  <span className="activity-time">{relativeTime(a.time)}</span>
+                  <span className="activity-text">
+                    <strong>{a.name}</strong> — {a.from} → {a.to}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* --- Session Detail Screen --- */
+function SessionDetailScreen({ session, onBack, onKilled }) {
+  const [output, setOutput] = useState('');
+  const [msg, setMsg] = useState('');
+  const [sending, setSending] = useState(false);
+  const [killing, setKilling] = useState(false);
+  const terminalRef = useRef(null);
+
+  useEffect(() => {
+    if (session.status === 'offline') return;
+    const poll = () => {
+      fetch(`/api/sessions/${encodeURIComponent(session.name)}/output`)
+        .then(r => r.json())
+        .then(d => setOutput(d.output || ''))
+        .catch(() => {});
+    };
+    poll();
+    const t = setInterval(poll, 2000);
+    return () => clearInterval(t);
+  }, [session.name, session.status]);
+
+  useEffect(() => {
+    if (terminalRef.current) {
+      terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
+    }
+  }, [output]);
+
+  const sendMessage = async () => {
+    if (!msg.trim() || sending || session.status === 'offline') return;
+    setSending(true);
+    try {
+      await fetch(`/api/sessions/${encodeURIComponent(session.name)}/send`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: msg }),
+      });
+      setMsg('');
+    } catch {
+    } finally {
+      setSending(false);
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  };
+
+  const handleKill = async () => {
+    if (!confirm(`End session "${session.name}"?`)) return;
+    setKilling(true);
+    try {
+      await fetch(`/api/sessions/${encodeURIComponent(session.name)}`, { method: 'DELETE' });
+      onKilled();
+    } catch {
+      setKilling(false);
+    }
+  };
+
+  const isOffline = session.status === 'offline';
+
+  return (
+    <div>
+      <button className="back-link" onClick={onBack}>
+        {Icons.arrow} Back
+      </button>
+
+      <div className="detail-header">
+        <div>
+          <h2 className="detail-title">{session.name}</h2>
+          <div className="detail-meta" style={{ maxWidth: 480, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{session.path}</div>
+        </div>
+        <div className="detail-actions">
+          {!isOffline && (
+            <button className="btn btn-sm" style={{ color: 'var(--error)' }} onClick={handleKill} disabled={killing}>
+              {Icons.trash} {killing ? 'Ending…' : 'End Session'}
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="detail-grid">
+        <div>
+          <div className="terminal">
+            <div className="terminal-header">
+              <span className="terminal-dot" style={{ background: '#ff5f57' }} />
+              <span className="terminal-dot" style={{ background: '#febc2e' }} />
+              <span className="terminal-dot" style={{ background: '#28c840' }} />
+              <span className="terminal-title">{session.name}</span>
+            </div>
+            <div className="terminal-body" ref={terminalRef}>
+              {isOffline
+                ? <span style={{ color: 'oklch(50% 0.018 50)' }}>Session is offline — no output available.</span>
+                : (output || <span style={{ color: 'oklch(50% 0.018 50)' }}>Loading…</span>)
+              }
+              {!isOffline && output && <span style={{ opacity: 0.5 }}>▊</span>}
+            </div>
+          </div>
+
+          {!isOffline && (
+            <div style={{ marginTop: 16 }}>
+              <div className="form-group" style={{ marginBottom: 0 }}>
+                <label className="form-label">Send message to Claude</label>
+                <div style={{ display: 'flex', gap: 8 }}>
+                  <input
+                    className="form-input"
+                    placeholder="Type a message…"
+                    value={msg}
+                    onChange={e => setMsg(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    style={{ flex: 1 }}
+                    disabled={sending}
+                  />
+                  <button className="btn btn-primary" onClick={sendMessage} disabled={sending || !msg.trim()}>
+                    {Icons.send} {sending ? 'Sending…' : 'Send'}
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="detail-sidebar">
+          <div className="card">
+            <h3>Session Info</h3>
+            <div className="info-row">
+              <span className="info-label">Status</span>
+              <StatusPill status={session.status} />
+            </div>
+            <div className="info-row">
+              <span className="info-label">Started</span>
+              <span className="info-value" style={{ fontSize: 11 }}>{relativeTime(session.startedAt)}</span>
+            </div>
+            <div className="info-row">
+              <span className="info-label">Tokens</span>
+              <span className="info-value" style={{ fontSize: 11 }}>{formatTokens(session.tokens)}</span>
+            </div>
+            {session.status === 'limit' && session.resumeAt && (
+              <div className="info-row">
+                <span className="info-label">Resumes</span>
+                <span className="info-value" style={{ fontSize: 11, color: 'var(--warning)' }}>
+                  {relativeTime(session.resumeAt)}
+                </span>
+              </div>
+            )}
+            <div className="info-row">
+              <span className="info-label">tmux</span>
+              <span className="info-value" style={{ fontSize: 11 }}>{session.name}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* --- Create Session Screen --- */
+function CreateSessionScreen({ onBack, onCreated }) {
+  const [name, setName] = useState('');
+  const [path, setPath] = useState('');
+  const [prompt, setPrompt] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleCreate = async () => {
+    if (!name.trim() || !path.trim()) {
+      setError('Session name and working directory are required.');
+      return;
+    }
+    setError('');
+    setLoading(true);
+    try {
+      const res = await fetch('/api/sessions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: name.trim(), path: path.trim(), prompt: prompt.trim() || undefined }),
+      });
+      const data = await res.json();
+      if (!res.ok) { setError(data.error || 'Failed to create session.'); return; }
+      onCreated(data);
+    } catch {
+      setError('Network error. Is the supervisor running?');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="create-layout">
+      <button className="back-link" onClick={onBack}>
+        {Icons.arrow} Back
+      </button>
+
+      <h2 className="section-title" style={{ marginBottom: 20, fontSize: 18 }}>New Session</h2>
+
+      <div className="form-group">
+        <label className="form-label">Session name</label>
+        <input className="form-input" placeholder="e.g. refactor-auth-flow" value={name} onChange={e => setName(e.target.value)} />
+        <div className="form-hint">Used as the tmux session name. Lowercase with hyphens.</div>
+      </div>
+
+      <div className="form-group">
+        <label className="form-label">Working directory</label>
+        <input className="form-input" placeholder="~/projects/app" value={path} onChange={e => setPath(e.target.value)} />
+        <div className="form-hint">Absolute path or ~ home-relative path where Claude will run.</div>
+      </div>
+
+      <div className="form-group">
+        <label className="form-label">Initial prompt <span style={{ fontWeight: 400, color: 'var(--muted)' }}>(optional)</span></label>
+        <textarea className="form-textarea" placeholder="What should Claude work on?" value={prompt} onChange={e => setPrompt(e.target.value)} rows={4} />
+        <div className="form-hint">Sent to Claude 2 seconds after the session starts.</div>
+      </div>
+
+      {error && (
+        <div style={{ marginBottom: 16, padding: '10px 14px', background: 'var(--error-soft)', color: 'var(--error)', borderRadius: 'var(--radius-sm)', fontSize: 13 }}>
+          {error}
+        </div>
+      )}
+
+      <div className="form-actions">
+        <button className="btn" onClick={onBack}>Cancel</button>
+        <button className="btn btn-primary" onClick={handleCreate} disabled={loading}>
+          {loading ? 'Creating…' : 'Create & Start Session'}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/* --- Sessions List Screen --- */
+function SessionsScreen({ sessions, onNavigate }) {
+  return (
+    <div>
+      <div className="section-header">
+        <h2 className="section-title">All Sessions</h2>
+        <button className="btn btn-sm" onClick={() => onNavigate('create')}>{Icons.plus} New</button>
+      </div>
+
+      {sessions.length === 0 ? (
+        <div className="empty-state">
+          <div className="empty-state-icon">⌘</div>
+          <div className="empty-state-title">No sessions</div>
+          <div className="empty-state-desc">Spawn a session to get started.</div>
+        </div>
+      ) : (
+        <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)' }}>
+          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+            <thead>
+              <tr>
+                {['Name', 'Path', 'Status', 'Started', 'Tokens'].map(h => (
+                  <th key={h} style={{ textAlign: 'left', padding: '10px 14px', fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--muted)', borderBottom: '1px solid var(--border)' }}>{h}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {sessions.map(s => (
+                <tr key={s.id} style={{ cursor: 'pointer', opacity: s.status === 'offline' ? 0.6 : 1, transition: 'background 0.12s' }}
+                  onClick={() => onNavigate('detail', s)}
+                  onMouseEnter={e => e.currentTarget.style.background = 'var(--surface-hover)'}
+                  onMouseLeave={e => e.currentTarget.style.background = ''}>
+                  <td style={{ padding: '12px 14px', fontWeight: 600, fontSize: 13, borderBottom: '1px solid var(--border)' }}>{s.name}</td>
+                  <td style={{ padding: '12px 14px', fontSize: 12, color: 'var(--muted)', borderBottom: '1px solid var(--border)', maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.path}</td>
+                  <td style={{ padding: '12px 14px', borderBottom: '1px solid var(--border)' }}><StatusPill status={s.status} /></td>
+                  <td style={{ padding: '12px 14px', fontSize: 12, color: 'var(--muted)', fontFamily: 'var(--font-mono)', borderBottom: '1px solid var(--border)' }}>{relativeTime(s.startedAt)}</td>
+                  <td style={{ padding: '12px 14px', fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--fg-secondary)', borderBottom: '1px solid var(--border)' }}>{formatTokens(s.tokens)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* --- App --- */
+function App() {
+  const savedTheme = storage.getItem('ccp-theme');
+  const [dark, setDark] = useState(savedTheme === 'dark');
+  const [screen, setScreen] = useState('dashboard');
+  const [selectedSession, setSelectedSession] = useState(null);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [sessions, setSessions] = useState([]);
+  const [serverStatus, setServerStatus] = useState(null);
+  const [activity, setActivity] = useState([]);
+  const [connected, setConnected] = useState(false);
+  const prevStatusRef = useRef({});
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
+    storage.setItem('ccp-theme', dark ? 'dark' : 'light');
+  }, [dark]);
+
+  // SSE for live sessions
+  useEffect(() => {
+    let es;
+    let retryTimer;
+    const connect = () => {
+      es = new EventSource('/events');
+      es.onopen = () => setConnected(true);
+      es.onerror = () => {
+        setConnected(false);
+        es.close();
+        retryTimer = setTimeout(connect, 5000);
+      };
+      es.onmessage = (e) => {
+        const incoming = JSON.parse(e.data);
+        setSessions(incoming);
+
+        const now = new Date();
+        const prev = prevStatusRef.current;
+        const newEntries = [];
+        for (const s of incoming) {
+          if (prev[s.name] && prev[s.name] !== s.status) {
+            newEntries.push({ time: now, name: s.name, from: prev[s.name], to: s.status });
+          }
+          prev[s.name] = s.status;
+        }
+        if (newEntries.length) {
+          setActivity(a => [...newEntries, ...a].slice(0, 20));
+        }
+
+        // Update selected session data if viewing detail
+        setSelectedSession(sel => {
+          if (!sel) return sel;
+          const updated = incoming.find(s => s.name === sel.name);
+          return updated || sel;
+        });
+      };
+    };
+    connect();
+    return () => { clearTimeout(retryTimer); if (es) es.close(); };
+  }, []);
+
+  // Server status
+  useEffect(() => {
+    fetch('/api/status').then(r => r.json()).then(setServerStatus).catch(() => {});
+  }, []);
+
+  const navigate = useCallback((target, session) => {
+    setScreen(target);
+    if (session) setSelectedSession(session);
+    setSidebarOpen(false);
+  }, []);
+
+  const screenTitle = {
+    dashboard: 'Dashboard',
+    sessions: 'Sessions',
+    create: 'New Session',
+    detail: selectedSession ? selectedSession.name : 'Session',
+  }[screen] || 'Dashboard';
+
+  const renderScreen = () => {
+    switch (screen) {
+      case 'dashboard':
+        return <DashboardScreen onNavigate={navigate} sessions={sessions} activity={activity} serverStatus={serverStatus} />;
+      case 'sessions':
+        return <SessionsScreen sessions={sessions} onNavigate={navigate} />;
+      case 'create':
+        return (
+          <CreateSessionScreen
+            onBack={() => navigate('dashboard')}
+            onCreated={(s) => navigate('detail', s)}
+          />
+        );
+      case 'detail':
+        return (
+          <SessionDetailScreen
+            session={selectedSession}
+            onBack={() => navigate('dashboard')}
+            onKilled={() => navigate('sessions')}
+          />
+        );
+      default:
+        return <DashboardScreen onNavigate={navigate} sessions={sessions} activity={activity} serverStatus={serverStatus} />;
+    }
+  };
+
+  return (
+    <div className="app-shell">
+      <Sidebar
+        currentScreen={screen}
+        onNavigate={navigate}
+        sessionCount={sessions.length}
+        open={sidebarOpen}
+        onClose={() => setSidebarOpen(false)}
+        connected={connected}
+      />
+      <div className="main">
+        <div className="mobile-header">
+          <button className="menu-btn" onClick={() => setSidebarOpen(true)}>{Icons.menu}</button>
+          <span className="mobile-title">{screenTitle}</span>
+          <button className="theme-toggle" onClick={() => setDark(d => !d)}>
+            {dark ? Icons.sun : Icons.moon}
+          </button>
+        </div>
+        <header className="header">
+          <h1 className="header-title">{screenTitle}</h1>
+          <div className="header-spacer" />
+          <button className="theme-toggle" onClick={() => setDark(d => !d)}>
+            {dark ? Icons.sun : Icons.moon}
+            {dark ? 'Light' : 'Dark'}
+          </button>
+        </header>
+        <div className="content">
+          {renderScreen()}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+</script>
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-remote-pilot",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Interactive Claude Code supervisor — spawn and monitor multiple Claude sessions from a single terminal.",
   "type": "commonjs",
   "bin": {