sapper-iq 1.1.40 → 1.2.1

package/sapper-ui.mjs

@@ -1,2017 +1,2229 @@
 #!/usr/bin/env node
 /**
- * Sapper Desktop UI v2 — Full-featured web frontend for Sapper
- * Features: Agents/Skills CRUD, Sessions, File Browser/Editor,
- *           Thinking model display, Tool action cards, Quick Actions
+ * Sapper Web — Runs the real sapper.mjs inside a browser terminal,
+ * with a sidebar (Files / Config / Agents / Skills) and a document
+ * viewer/editor that auto-refreshes when Sapper modifies a file.
+ *
+ *   Browser  <--WebSocket-->  Node  <--pty-->  sapper.mjs
+ *           <--WebSocket-->  Node  <--fs.watch-->  workspace
+ *           <--REST-->        Node  <--fs-->        files / config
  */
 
 import http from 'http';
 import fs from 'fs';
-import { spawn } from 'child_process';
+import os from 'os';
 import { fileURLToPath } from 'url';
-import { dirname, join, resolve, basename } from 'path';
-import ollama from 'ollama';
+import { dirname, join, resolve as pathResolve, relative, sep } from 'path';
+import { spawn as ptySpawn } from 'node-pty';
+import { WebSocketServer } from 'ws';
+import { spawn } from 'child_process';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-const PORT = 3777;
-const SAPPER_DIR = '.sapper';
+const PORT = parseInt(process.env.SAPPER_UI_PORT || '3777', 10);
+const SAPPER_BIN = join(__dirname, 'sapper.mjs');
+const workingDir = process.cwd();
+const SAPPER_DIR = join(workingDir, '.sapper');
+const CONFIG_FILE = join(SAPPER_DIR, 'config.json');
 const AGENTS_DIR = join(SAPPER_DIR, 'agents');
 const SKILLS_DIR = join(SAPPER_DIR, 'skills');
-const SESSIONS_DIR = join(SAPPER_DIR, 'sessions');
 
-let workingDir = process.cwd();
+const IGNORE_NAMES = new Set([
+  '.git', 'node_modules', '.next', 'dist', 'build', '.cache',
+  '.DS_Store', '__pycache__', '.venv', 'venv',
+]);
 
-// ─── Helpers ───────────────────────────────────────────────
+const DEBUG = !!process.env.SAPPER_UI_DEBUG;
+const dbg = (...a) => { if (DEBUG) console.log('[ui]', ...a); };
 
-function ensureDir(dir) {
-  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
-}
+// ─── Path safety ─────────────────────────────────────────────────
 
-function parseFrontmatter(raw) {
-  const fmMatch = raw.match(/^---\s*\n([\s\S]*?)\n---\s*\n([\s\S]*)$/);
-  if (!fmMatch) return { meta: {}, body: raw };
-  const meta = {};
-  for (const line of fmMatch[1].split('\n')) {
-    const idx = line.indexOf(':');
-    if (idx === -1) continue;
-    let key = line.slice(0, idx).trim();
-    let value = line.slice(idx + 1).trim();
-    if ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'")))
-      value = value.slice(1, -1);
-    if (value.startsWith('[') && value.endsWith(']'))
-      value = value.slice(1, -1).split(',').map(s => s.trim().replace(/^["']|["']$/g, '')).filter(Boolean);
-    meta[key] = value;
-  }
-  if (!meta.name) {
-    const heading = fmMatch[2].match(/^#\s+(.+)/m);
-    meta.name = heading ? heading[1].trim() : 'Unnamed';
-  }
-  return { meta, body: fmMatch[2] };
-}
-
-function loadAgents() {
-  ensureDir(AGENTS_DIR);
-  const agents = {};
-  try {
-    for (const file of fs.readdirSync(AGENTS_DIR)) {
-      if (!file.endsWith('.md')) continue;
-      const name = file.replace('.md', '').toLowerCase();
-      const raw = fs.readFileSync(join(AGENTS_DIR, file), 'utf8');
-      const { meta, body } = parseFrontmatter(raw);
-      agents[name] = {
-        name: meta.name || name,
-        description: meta.description || name,
-        tools: meta.tools || null,
-        content: body,
-      };
+function safePath(p) {
+  if (typeof p !== 'string') return null;
+  const cleaned = p.replace(/^\/+/, '');
+  const abs = pathResolve(workingDir, cleaned || '.');
+  if (abs !== workingDir && !abs.startsWith(workingDir + sep)) return null;
+  return abs;
+}
+
+function stripJSONC(src) {
+  // Remove // line comments and /* ... */ block comments outside strings.
+  let out = '';
+  let i = 0;
+  const n = src.length;
+  while (i < n) {
+    const c = src[i];
+    const c2 = src[i + 1];
+    if (c === '"' || c === "'") {
+      const quote = c;
+      out += c; i++;
+      while (i < n) {
+        const ch = src[i];
+        out += ch; i++;
+        if (ch === '\\' && i < n) { out += src[i]; i++; continue; }
+        if (ch === quote) break;
+      }
+      continue;
+    }
+    if (c === '/' && c2 === '/') { while (i < n && src[i] !== '\n') i++; continue; }
+    if (c === '/' && c2 === '*') {
+      i += 2;
+      while (i < n && !(src[i] === '*' && src[i + 1] === '/')) i++;
+      i += 2; continue;
     }
-  } catch (e) {}
-  return agents;
+    out += c; i++;
+  }
+  return out;
 }
 
-function loadSkills() {
-  ensureDir(SKILLS_DIR);
-  const skills = {};
+function readJSON(file, fallback = null) {
   try {
-    for (const file of fs.readdirSync(SKILLS_DIR)) {
-      if (!file.endsWith('.md')) continue;
-      const name = file.replace('.md', '').toLowerCase();
-      const raw = fs.readFileSync(join(SKILLS_DIR, file), 'utf8');
-      const { meta, body } = parseFrontmatter(raw);
-      skills[name] = { name: meta.name || name, description: meta.description || name, content: body };
+    const raw = fs.readFileSync(file, 'utf8');
+    try { return JSON.parse(raw); }
+    catch {
+      const cleaned = stripJSONC(raw).replace(/,(\s*[}\]])/g, '$1'); // also tolerate trailing commas
+      return JSON.parse(cleaned);
     }
-  } catch (e) {}
-  return skills;
+  } catch { return fallback; }
 }
 
-const IGNORE_DIRS = new Set(['node_modules', '.git', '.sapper', '__pycache__', '.next', 'dist', 'build', '.cache']);
+function ensureDir(d) { try { fs.mkdirSync(d, { recursive: true }); } catch {} }
 
-// ─── .sapperignore Support ─────────────────────────────────
-const SAPPERIGNORE_FILE = '.sapperignore';
+// ─── Markdown frontmatter (for agents/skills) ────────────────────
 
-function loadSapperIgnorePatterns() {
-  const patterns = [];
-  try {
-    const ignorePath = join(workingDir, SAPPERIGNORE_FILE);
-    if (fs.existsSync(ignorePath)) {
-      const lines = fs.readFileSync(ignorePath, 'utf8').split('\n');
-      for (const rawLine of lines) {
-        const line = rawLine.trim();
-        if (!line || line.startsWith('#')) continue;
-        const negate = line.startsWith('!');
-        const pattern = negate ? line.slice(1) : line;
-        patterns.push({ pattern, negate });
-      }
+function parseFrontmatter(raw) {
+  const m = raw.match(/^---\s*\n([\s\S]*?)\n---\s*\n([\s\S]*)$/);
+  if (!m) return { meta: {}, body: raw };
+  const meta = {};
+  for (const line of m[1].split('\n')) {
+    const i = line.indexOf(':');
+    if (i === -1) continue;
+    let k = line.slice(0, i).trim();
+    let v = line.slice(i + 1).trim();
+    if ((v.startsWith('"') && v.endsWith('"')) || (v.startsWith("'") && v.endsWith("'"))) v = v.slice(1, -1);
+    if (v.startsWith('[') && v.endsWith(']')) {
+      v = v.slice(1, -1).split(',').map(s => s.trim().replace(/^["']|["']$/g, '')).filter(Boolean);
     }
-  } catch (e) {}
-  return patterns;
-}
-
-let _sapperIgnorePatterns = null;
-function getSapperIgnorePatterns() {
-  if (_sapperIgnorePatterns === null) _sapperIgnorePatterns = loadSapperIgnorePatterns();
-  return _sapperIgnorePatterns;
-}
-
-function ignorePatternToRegex(pattern) {
-  try {
-    let p = pattern.replace(/\/+$/, '');
-    p = p.replace(/([.+^${}()|[\]\\])/g, '\\$1');
-    p = p.replace(/\*\*/g, '<<<GLOBSTAR>>>');
-    p = p.replace(/\*/g, '[^/]*');
-    p = p.replace(/<<<GLOBSTAR>>>/g, '.*');
-    p = p.replace(/\?/g, '[^/]');
-    return new RegExp(`(^|/)${p}($|/)`, 'i');
-  } catch (e) {
-    return /^$/; // Return a regex that never matches on error
+    meta[k] = v;
   }
+  return { meta, body: m[2] };
 }
 
-function shouldIgnore(nameOrPath) {
-  const baseName = nameOrPath.includes('/') ? nameOrPath.split('/').pop() : nameOrPath;
-  if (IGNORE_DIRS.has(baseName)) return true;
-  const patterns = getSapperIgnorePatterns();
-  if (patterns.length === 0) return false;
-  let ignored = false;
-  for (const { pattern, negate } of patterns) {
-    const regex = ignorePatternToRegex(pattern);
-    if (regex.test(nameOrPath) || regex.test(baseName)) ignored = !negate;
+function listMdDir(dir) {
+  if (!fs.existsSync(dir)) return [];
+  const out = [];
+  for (const f of fs.readdirSync(dir)) {
+    if (!f.endsWith('.md')) continue;
+    const full = join(dir, f);
+    try {
+      const raw = fs.readFileSync(full, 'utf8');
+      const { meta } = parseFrontmatter(raw);
+      out.push({
+        key: f.replace(/\.md$/, ''),
+        file: f,
+        name: meta.name || f.replace(/\.md$/, ''),
+        description: meta.description || '',
+        path: relative(workingDir, full),
+      });
+    } catch {}
   }
-  return ignored;
+  return out.sort((a, b) => a.name.localeCompare(b.name));
 }
 
-function safePath(p) {
-  const resolved = resolve(workingDir, p || '.');
-  if (!resolved.startsWith(workingDir)) return null;
-  return resolved;
-}
+// ─── HTML page ───────────────────────────────────────────────────
 
-function buildSystemPrompt(agentContent = null, agentTools = null, skillContents = []) {
-  const now = new Date();
-  const dateStr = now.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
-  const timeStr = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
-  let prompt = `You are Sapper, an intelligent AI assistant with access to the local filesystem and shell.
-You can help with ANY task - coding, writing, research, planning, analysis, and more.
-
-CURRENT DATE AND TIME: ${dateStr}, ${timeStr}
-WORKING DIRECTORY: ${workingDir}
-
-RULES:
-1. EXPLORE FIRST: Use LIST and READ to understand files before making changes.
-2. THINK IN STEPS: Explain what you found and what you plan to do before acting.
-3. BE PRECISE: When using PATCH, prefer LINE:number mode.
-4. VERIFY: After making changes, verify they work.
-5. NO HALLUCINATIONS: If a file doesn't exist, don't guess its content.
-
-TOOL SYNTAX:
-- [TOOL:LIST]dir[/TOOL] - List directory contents
-- [TOOL:READ]file_path[/TOOL] - Read file contents
-- [TOOL:SEARCH]pattern[/TOOL] - Search files for pattern
-- [TOOL:WRITE]path:::content[/TOOL] - Create/overwrite file
-- [TOOL:PATCH]path:::old|||new[/TOOL] - Edit file (exact/fuzzy match)
-- [TOOL:PATCH]path:::LINE:number|||new text[/TOOL] - Replace line by number (PREFERRED)
-- [TOOL:SHELL]command[/TOOL] - Run shell command
-- [TOOL:MKDIR]path[/TOOL] - Create directory
-
-PATCH TIPS:
-- PREFER LINE:number mode. Always READ first.
-- If PATCH fails, switch to LINE:number or WRITE.
-
-You MUST use [TOOL:...][/TOOL] syntax to perform actions.
-Do NOT show tool syntax as examples to the user — only use them to perform real actions.`;
-
-  if (agentContent) {
-    prompt += `\n\n═══ ACTIVE AGENT ═══\n${agentContent}\n═══ END AGENT ═══`;
-    if (agentTools && agentTools.length > 0) {
-      const allTools = ['READ', 'WRITE', 'PATCH', 'LIST', 'SEARCH', 'SHELL', 'MKDIR'];
-      const forbidden = allTools.filter(t => !agentTools.includes(t));
-      prompt += `\nTOOL RESTRICTION: ONLY use: ${agentTools.join(', ')}. FORBIDDEN: ${forbidden.join(', ')}.`;
-    }
+function buildHTML() {
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Sapper</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github-dark.min.css" />
+<style>
+  :root {
+    --bg: #0a0e14;
+    --panel: #0d1117;
+    --panel2: #11161d;
+    --border: #21262d;
+    --border2: #30363d;
+    --fg: #e6edf3;
+    --muted: #8b949e;
+    --dim: #6e7681;
+    --accent: #58a6ff;
+    --accent2: #79c0ff;
+    --green: #3fb950;
+    --red: #f85149;
+    --yellow: #d29922;
+    --purple: #bc8cff;
   }
-  if (skillContents.length > 0) {
-    prompt += `\n\n═══ SKILLS ═══\n${skillContents.join('\n---\n')}\n═══ END SKILLS ═══`;
+  * { box-sizing: border-box; }
+  html, body { margin: 0; height: 100%; width: 100%; max-width: 100vw; overflow: hidden;
+    background: var(--bg); color: var(--fg);
+    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; }
+  button { font-family: inherit; }
+
+  #app { display: flex; flex-direction: column; height: 100vh; width: 100vw;
+    max-width: 100vw; overflow: hidden; }
+
+  /* ─── Top bar ─── */
+  #bar {
+    height: 38px; flex-shrink: 0; display: flex; align-items: center;
+    padding: 0 12px; gap: 10px;
+    background: var(--panel); border-bottom: 1px solid var(--border);
+    font-size: 12px;
   }
-  return prompt;
-}
-
-// ─── Tool Execution ────────────────────────────────────────
-
-const tools = {
-  list: (path) => {
-    try {
-      let dir = resolve(workingDir, path.trim() || '.');
-      if (dir === '/') dir = workingDir;
-      const entries = fs.readdirSync(dir);
-      return entries.filter(e => !shouldIgnore(e) && !e.startsWith('.')).join('\n') || '(empty)';
-    } catch (e) { return `Error: ${e.message}`; }
-  },
-  read: (path) => {
-    try { return fs.readFileSync(resolve(workingDir, path.trim()), 'utf8'); }
-    catch (e) { return `Error: ${e.message}`; }
-  },
-  write: (path, content) => {
-    try {
-      const p = resolve(workingDir, path.trim());
-      fs.mkdirSync(dirname(p), { recursive: true });
-      fs.writeFileSync(p, content);
-      return `Successfully saved ${path.trim()}`;
-    } catch (e) { return `Error: ${e.message}`; }
-  },
-  mkdir: (path) => {
-    try { fs.mkdirSync(resolve(workingDir, path.trim()), { recursive: true }); return `Created ${path}`; }
-    catch (e) { return `Error: ${e.message}`; }
-  },
-  patch: (path, oldText, newText) => {
-    const p = resolve(workingDir, path.trim());
-    try {
-      const content = fs.readFileSync(p, 'utf8');
-      const lineMatch = oldText.match(/^LINE:(\d+)$/);
-      if (lineMatch) {
-        const n = parseInt(lineMatch[1], 10);
-        const lines = content.split('\n');
-        if (n < 1 || n > lines.length) return `Error: Line ${n} out of range (${lines.length} lines)`;
-        const old = lines[n - 1];
-        lines[n - 1] = newText;
-        fs.writeFileSync(p, lines.join('\n'));
-        return `Patched line ${n}: "${old}" → "${newText}"`;
-      }
-      if (content.includes(oldText)) {
-        fs.writeFileSync(p, content.replace(oldText, newText));
-        return `Successfully patched ${path.trim()}`;
-      }
-      if (content.includes(oldText.trim())) {
-        fs.writeFileSync(p, content.replace(oldText.trim(), newText.trim()));
-        return `Successfully patched ${path.trim()} (trimmed match)`;
-      }
-      const normalize = s => s.replace(/[\u{1F000}-\u{1FFFF}]/gu, '').replace(/\s+/g, ' ').trim();
-      const normOld = normalize(oldText);
-      const lines = content.split('\n');
-      const oldLines = oldText.trim().split('\n');
-      for (let i = 0; i <= lines.length - oldLines.length; i++) {
-        const win = lines.slice(i, i + oldLines.length).join('\n');
-        if (normalize(win) === normOld) {
-          const newContent = content.replace(win, newText.trim());
-          fs.writeFileSync(p, newContent);
-          return `Successfully patched ${path.trim()} (fuzzy match at line ${i + 1})`;
-        }
-      }
-      return `Error: Text not found in ${path.trim()}. Use LINE:number mode instead.`;
-    } catch (e) { return `Error: ${e.message}`; }
-  },
-  search: (pattern) => {
-    return new Promise((res) => {
-      const allIgnoreDirs = new Set(IGNORE_DIRS);
-      for (const { pattern: p, negate } of getSapperIgnorePatterns()) {
-        if (!negate && p.endsWith('/')) allIgnoreDirs.add(p.replace(/\/+$/, ''));
-      }
-      // Use args array to avoid command injection
-      const args = ['-rEin', pattern, '.'];
-      for (const dir of allIgnoreDirs) {
-        args.push(`--exclude-dir=${dir}`);
-      }
-      args.push('--include=*.js', '--include=*.ts', '--include=*.jsx', '--include=*.tsx',
-        '--include=*.py', '--include=*.java', '--include=*.go', '--include=*.rs',
-        '--include=*.rb', '--include=*.php', '--include=*.c', '--include=*.cpp',
-        '--include=*.h', '--include=*.css', '--include=*.scss', '--include=*.html',
-        '--include=*.json', '--include=*.md', '--include=*.txt', '--include=*.yml',
-        '--include=*.yaml', '--include=*.toml', '--include=*.sh');
-      const proc = spawn('grep', args, { cwd: workingDir });
-      let out = '';
-      let lineCount = 0;
-      proc.stdout.on('data', d => {
-        const text = d.toString();
-        const lines = text.split('\n');
-        for (const line of lines) {
-          if (lineCount >= 50) { proc.kill(); return; }
-          if (line) { out += line + '\n'; lineCount++; }
-        }
-      });
-      proc.stderr.on('data', () => {});
-      proc.on('error', (err) => res(`Error searching: ${err.message}`));
-      proc.on('close', () => res(out.trim() || `No matches for: ${pattern}`));
-    });
-  },
-  shell: (cmd) => {
-    return new Promise((res) => {
-      const proc = spawn('sh', ['-c', cmd], { cwd: workingDir });
-      let out = '';
-      proc.stdout.on('data', d => out += d);
-      proc.stderr.on('data', d => out += d);
-      proc.on('error', (err) => {
-        res(`Shell error: ${err.message}`);
-      });
-      proc.on('close', code => {
-        let result = out.trim();
-        if (result.length > 10000) result = result.substring(0, 10000) + '\n...(truncated)';
-        res(result || `Completed (exit ${code})`);
-      });
-    });
-  },
-};
-
-async function executeTool(type, path, content, agentTools) {
-  if (agentTools && !agentTools.includes(type.toUpperCase())) {
-    return { result: `Error: Tool ${type.toUpperCase()} not allowed. Allowed: ${agentTools.join(', ')}`, blocked: true };
+  #bar .title { font-weight: 700; letter-spacing: .3px; user-select: none; }
+  #bar .title span { color: var(--accent); }
+  #bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); transition: background .2s; }
+  #bar .dot.on { background: var(--green); }
+  #bar .dot.err { background: var(--red); }
+  #bar .cwd { color: var(--muted); font-family: ui-monospace, 'SF Mono', monospace;
+    font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 35vw; }
+  #bar .spacer { flex: 1; }
+  #bar button {
+    background: transparent; color: var(--muted); border: 1px solid var(--border);
+    border-radius: 6px; padding: 4px 10px; font-size: 11px; cursor: pointer;
+    transition: all .12s;
   }
-  const t = type.toLowerCase();
-  let result;
-  if (t === 'list') result = tools.list(path);
-  else if (t === 'read') result = tools.read(path);
-  else if (t === 'mkdir') result = tools.mkdir(path);
-  else if (t === 'write') result = tools.write(path, content || '');
-  else if (t === 'patch') {
-    // Use indexOf to split into exactly 2 parts, preserving ||| in content
-    const sepIdx = content?.indexOf('|||');
-    let parts = null;
-    if (sepIdx > -1) {
-      parts = [content.substring(0, sepIdx), content.substring(sepIdx + 3)];
-    }
-    if (parts && parts.length === 2) result = tools.patch(path, parts[0], parts[1]);
-    else result = 'Error: PATCH needs OLD_TEXT|||NEW_TEXT';
+  #bar button:hover { color: var(--accent); border-color: var(--accent); }
+  #bar button.toggle.on { color: var(--accent); border-color: var(--accent); background: rgba(88,166,255,.08); }
+
+  /* live system stats */
+  #stats { display: grid; grid-template-columns: auto auto auto; gap: 4px 10px;
+    align-items: center; padding: 4px 10px; margin: 0 8px;
+    background: var(--panel2); border: 1px solid var(--border); border-radius: 6px;
+    font-family: ui-monospace, 'SF Mono', monospace; font-size: 10px; line-height: 1; }
+  #stats .srow { display: contents; }
+  #stats .slbl { color: var(--dim); font-size: 9px; letter-spacing: .5px; min-width: 22px; }
+  #stats .sbar { width: 60px; height: 5px; background: var(--bg); border-radius: 3px;
+    overflow: hidden; }
+  #stats .sbar i { display: block; height: 100%; width: 0%;
+    background: linear-gradient(90deg, var(--green), var(--accent));
+    transition: width .35s ease, background .25s; }
+  #stats .sbar i.warn { background: linear-gradient(90deg, var(--yellow), #ff9b3f); }
+  #stats .sbar i.crit { background: linear-gradient(90deg, #ff7b72, var(--red)); }
+  #stats .sval { color: var(--fg); min-width: 60px; text-align: right; font-variant-numeric: tabular-nums; }
+  @media (max-width: 1100px) {
+    #stats .sbar { width: 40px; }
+    #stats .sval { min-width: 48px; font-size: 9px; }
+    #bar .cwd { display: none; }
   }
-  else if (t === 'search') result = await tools.search(path);
-  else if (t === 'shell') result = await tools.shell(path);
-  else result = `Unknown tool: ${type}`;
-  return { result, blocked: false };
-}
+  @media (max-width: 820px) { #stats { display: none; } }
 
-// ─── Chat Engine ───────────────────────────────────────────
+  /* ─── Body layout ─── */
+  #body { flex: 1; min-height: 0; min-width: 0; display: flex; overflow: hidden; }
 
-let abortFlag = false;
+  /* ─── Sidebar ─── */
+  #side {
+    width: 280px; flex-shrink: 0; display: flex; flex-direction: column;
+    background: var(--panel); border-right: 1px solid var(--border);
+    min-width: 0; overflow: hidden;
+  }
+  #side.hidden { display: none; }
+  .tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
+  .tabs button {
+    flex: 1; padding: 8px 4px; background: none; border: none;
+    border-bottom: 2px solid transparent; color: var(--dim); font-size: 11px;
+    font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: .5px;
+  }
+  .tabs button:hover { color: var(--muted); }
+  .tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
+  .pane { flex: 1; min-height: 0; min-width: 0; overflow-x: hidden; overflow-y: auto; display: none; padding: 6px 0; }
+  .pane.active { display: block; }
+  .pane::-webkit-scrollbar { width: 6px; }
+  .pane::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
+
+  /* Files tree */
+  .files-toolbar { display: flex; align-items: center; gap: 4px; padding: 6px 8px;
+    border-bottom: 1px solid var(--border); background: var(--panel); }
+  .files-toolbar .ftb-spacer { flex: 1; }
+  .files-toolbar .ftb { background: transparent; color: var(--muted); border: 1px solid transparent;
+    border-radius: 4px; padding: 3px 7px; font-size: 13px; cursor: pointer; line-height: 1;
+    position: relative; }
+  .files-toolbar .ftb sup { font-size: 9px; color: var(--green); margin-left: 1px; }
+  .files-toolbar .ftb:hover { background: rgba(255,255,255,.05); color: var(--fg); border-color: var(--border); }
+  .files-toolbar .ftb.on { color: var(--accent); border-color: var(--accent); background: rgba(88,166,255,.08); }
+
+  /* Activity feed */
+  #activityPanel { display: none; border-bottom: 1px solid var(--border);
+    background: var(--panel2); max-height: 180px; overflow-y: auto;
+    font-family: ui-monospace, 'SF Mono', monospace; font-size: 11px; }
+  #activityPanel.on { display: block; }
+  #activityPanel .ah { display: flex; align-items: center; padding: 5px 10px;
+    border-bottom: 1px solid var(--border); color: var(--dim); font-size: 10px;
+    text-transform: uppercase; letter-spacing: .5px; position: sticky; top: 0;
+    background: var(--panel2); z-index: 1; }
+  #activityPanel .ah .acl { margin-left: auto; color: var(--accent); cursor: pointer;
+    text-transform: none; letter-spacing: 0; font-size: 10px; }
+  #activityPanel .ai { display: flex; align-items: center; gap: 6px; padding: 4px 10px;
+    color: var(--muted); cursor: pointer; border-left: 2px solid transparent; }
+  #activityPanel .ai:hover { background: rgba(255,255,255,.04); color: var(--fg); }
+  #activityPanel .ai .ak { font-size: 9px; text-transform: uppercase; letter-spacing: .5px;
+    width: 56px; flex-shrink: 0; font-weight: 600; }
+  #activityPanel .ai .ap { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  #activityPanel .ai .at { color: var(--dim); font-size: 9px; flex-shrink: 0; }
+  #activityPanel .ai.kind-created { border-left-color: var(--green); }
+  #activityPanel .ai.kind-modified { border-left-color: var(--yellow); }
+  #activityPanel .ai.kind-deleted { border-left-color: var(--red); }
+  #activityPanel .ai.kind-created .ak { color: var(--green); }
+  #activityPanel .ai.kind-modified .ak { color: var(--yellow); }
+  #activityPanel .ai.kind-deleted .ak { color: var(--red); }
+  #activityPanel .empty { padding: 12px; color: var(--dim); text-align: center; font-size: 11px; }
+  .tree { font-family: ui-monospace, 'SF Mono', monospace; font-size: 12px; padding-bottom: 12px; }
+  .row { display: flex; align-items: center; gap: 4px; padding: 3px 8px; cursor: pointer; color: var(--muted);
+    white-space: nowrap; user-select: none; position: relative; }
+  .row:hover { background: rgba(255,255,255,.04); color: var(--fg); }
+  .row.active { background: rgba(88,166,255,.12); color: var(--accent); }
+  .row .chev { width: 12px; display: inline-block; color: var(--dim); font-size: 9px; flex-shrink: 0; text-align: center; }
+  .row .ico { width: 14px; flex-shrink: 0; }
+  .row .name { overflow: hidden; text-overflow: ellipsis; }
+  .row .badge { margin-left: auto; font-size: 9px; color: var(--yellow); opacity: 0; transition: opacity .2s; }
+  .row.changed .badge { opacity: 1; }
+  .row .actdot { display: none; width: 7px; height: 7px; border-radius: 50%;
+    margin-left: 4px; flex-shrink: 0; box-shadow: 0 0 6px currentColor; }
+  .row.act-created .actdot { display: inline-block; background: var(--green); color: var(--green); }
+  .row.act-modified .actdot { display: inline-block; background: var(--yellow); color: var(--yellow); }
+  .row.act-deleted .actdot { display: inline-block; background: var(--red); color: var(--red); }
+  .row.act-fresh .actdot { animation: pulse 1.4s ease-out 2; }
+  .row.act-created .name { color: #56d364; }
+  .row.act-modified .name { color: #e3b341; }
+  .row.act-deleted .name { color: #ffa198; text-decoration: line-through; opacity: .7; }
+  @keyframes pulse { 0%{transform:scale(1);} 50%{transform:scale(1.6);} 100%{transform:scale(1);} }
+  .row .actcount { display: none; font-size: 9px; color: var(--dim);
+    font-family: ui-monospace, monospace; margin-left: 2px; }
+  .row.act-multi .actcount { display: inline-block; }
+  .row .rmenu { margin-left: auto; color: var(--dim); font-size: 14px; padding: 0 4px;
+    opacity: 0; flex-shrink: 0; line-height: 1; border-radius: 3px; }
+  .row.changed .rmenu { margin-left: 4px; }
+  .row:hover .rmenu, .row .rmenu.open { opacity: 1; }
+  .row .rmenu:hover { color: var(--fg); background: rgba(255,255,255,.08); }
+
+  /* Context menu */
+  .ctx-menu { position: fixed; z-index: 9999; min-width: 180px;
+    background: var(--panel2); border: 1px solid var(--border); border-radius: 6px;
+    padding: 4px 0; box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: 12px;
+    color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
+  .ctx-menu .ci { padding: 6px 14px; cursor: pointer; display: flex; align-items: center;
+    gap: 10px; color: var(--muted); }
+  .ctx-menu .ci:hover { background: rgba(88,166,255,.12); color: var(--accent); }
+  .ctx-menu .ci.danger:hover { background: rgba(248,81,73,.15); color: var(--red); }
+  .ctx-menu .ci .k { margin-left: auto; color: var(--dim); font-size: 10px; }
+  .ctx-menu .sep { height: 1px; background: var(--border); margin: 4px 0; }
+
+  /* Modal */
+  .modal-bd { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 10000;
+    display: flex; align-items: center; justify-content: center; }
+  .modal { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
+    padding: 18px 18px 14px; width: 460px; max-width: 92vw;
+    font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
+  .modal h3 { margin: 0 0 12px; font-size: 14px; color: var(--fg); font-weight: 600; }
+  .modal label { display: block; font-size: 11px; color: var(--dim); margin: 8px 0 4px;
+    text-transform: uppercase; letter-spacing: .5px; }
+  .modal input[type=text] { width: 100%; box-sizing: border-box; background: var(--bg);
+    color: var(--fg); border: 1px solid var(--border); border-radius: 4px;
+    padding: 7px 9px; font-family: ui-monospace, 'SF Mono', monospace; font-size: 12px; outline: none; }
+  .modal input[type=text]:focus { border-color: var(--accent); }
+  .modal .hint { font-size: 11px; color: var(--dim); margin-top: 4px; }
+  .modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
+  .modal .actions button { background: transparent; color: var(--muted); border: 1px solid var(--border);
+    border-radius: 5px; padding: 6px 14px; font-size: 12px; cursor: pointer; }
+  .modal .actions button:hover { color: var(--fg); border-color: var(--accent); }
+  .modal .actions button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
+  .modal .actions button.primary:hover { filter: brightness(1.1); }
+  .modal .actions button.danger { background: var(--red); color: #fff; border-color: var(--red); }
+
+  /* Config / Agents / Skills lists */
+  .pane-section { padding: 10px 14px; }
+  .pane-section h4 { font-size: 11px; color: var(--dim); text-transform: uppercase;
+    letter-spacing: .5px; margin: 0 0 8px; font-weight: 600; }
+  .pane-section p { font-size: 12px; color: var(--muted); margin: 4px 0 12px; line-height: 1.4; }
+  .pane-section label { display: block; font-size: 11px; color: var(--muted); margin: 8px 0 4px; font-weight: 500; }
+  .pane-section input[type=text], .pane-section input[type=number], .pane-section select {
+    width: 100%; background: var(--panel2); border: 1px solid var(--border2); border-radius: 5px;
+    padding: 5px 8px; color: var(--fg); font-size: 12px; outline: none; font-family: inherit;
+  }
+  .pane-section input:focus, .pane-section select:focus { border-color: var(--accent); }
+  .pane-section .toggle-row { display: flex; align-items: center; justify-content: space-between;
+    padding: 6px 0; border-bottom: 1px solid var(--border); }
+  .pane-section .toggle-row span { font-size: 12px; color: var(--muted); }
+  .switch { position: relative; width: 30px; height: 16px; background: var(--border2); border-radius: 8px;
+    cursor: pointer; transition: background .15s; flex-shrink: 0; }
+  .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
+    background: var(--muted); border-radius: 50%; transition: all .15s; }
+  .switch.on { background: var(--accent); }
+  .switch.on::after { background: white; left: 16px; }
+
+  .json-edit {
+    width: 100%; max-width: 100%; height: 320px; background: var(--bg);
+    border: 1px solid var(--border2); border-radius: 6px; padding: 8px 10px; color: var(--fg);
+    font-family: ui-monospace, 'SF Mono', monospace; font-size: 11px; line-height: 1.45;
+    resize: vertical; outline: none; display: block;
+    white-space: pre; overflow: auto;
+  }
+  .json-edit:focus { border-color: var(--accent); }
+  .row-btns { display: flex; gap: 6px; margin-top: 8px; }
+  .row-btns button {
+    flex: 1; padding: 6px 10px; border-radius: 5px; border: 1px solid var(--border2);
+    background: var(--panel2); color: var(--muted); font-size: 11px; cursor: pointer;
+    transition: all .12s;
+  }
+  .row-btns button:hover { color: var(--accent); border-color: var(--accent); }
+  .row-btns button.primary { background: var(--accent); color: white; border-color: var(--accent); }
+  .row-btns button.primary:hover { background: var(--accent2); }
+  .row-btns button.danger:hover { color: var(--red); border-color: var(--red); }
+
+  .item { padding: 8px 14px; cursor: pointer; border-left: 2px solid transparent; }
+  .item:hover { background: rgba(255,255,255,.03); border-left-color: var(--border2); }
+  .item .ti { font-size: 13px; color: var(--fg); display: flex; align-items: center; gap: 6px; }
+  .item .ti .b { background: var(--accent); color: white; font-size: 9px; padding: 1px 5px;
+    border-radius: 8px; text-transform: uppercase; letter-spacing: .3px; }
+  .item .ds { font-size: 11px; color: var(--dim); margin-top: 2px; line-height: 1.35; }
+
+  /* ─── Terminal area ─── */
+  #center { flex: 1; min-width: 0; min-height: 0; display: flex;
+    flex-direction: column; background: var(--bg); overflow: hidden; position: relative; }
+  #qa { display: flex; align-items: center; gap: 6px; padding: 6px 10px;
+    background: var(--panel2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
+  #qa .qabtn { background: transparent; color: var(--muted); border: 1px solid var(--border);
+    border-radius: 5px; padding: 4px 10px; font-size: 11px; cursor: pointer;
+    display: inline-flex; align-items: center; gap: 5px; font-family: inherit; line-height: 1; }
+  #qa .qabtn:hover { color: var(--accent); border-color: var(--accent); }
+  #qa .qabtn .qaico { font-size: 13px; }
+  #qa .qabtn.rec.on { color: var(--red); border-color: var(--red); background: rgba(248,81,73,.08); }
+  #qa .qa-sp { flex: 1; }
+  #qa .rec-dot { display: none; width: 8px; height: 8px; border-radius: 50%;
+    background: var(--red); animation: blink 1s infinite; }
+  #qa .rec-dot.on { display: inline-block; }
+  #qa .rec-time { display: none; font-family: ui-monospace, 'SF Mono', monospace;
+    font-size: 11px; color: var(--red); font-variant-numeric: tabular-nums; }
+  #qa .rec-time.on { display: inline-block; }
+  @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.3;} }
+
+  #term-wrap { flex: 1; min-height: 0; min-width: 0; padding: 6px 0 0 10px;
+    overflow: hidden; position: relative; }
+  #term-wrap .terminal, #term-wrap .xterm { height: 100% !important; width: 100% !important; }
+  .xterm-screen, .xterm-viewport { max-width: 100% !important; }
+  .xterm .xterm-viewport { background-color: var(--bg) !important; }
+  .xterm-viewport::-webkit-scrollbar { width: 8px; }
+  .xterm-viewport::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
+  .xterm-viewport::-webkit-scrollbar-track { background: transparent; }
+
+  /* drag-drop overlay */
+  #dropOverlay { position: absolute; inset: 0; display: none; z-index: 200;
+    background: rgba(10,14,20,.85); align-items: center; justify-content: center;
+    border: 2px dashed var(--accent); pointer-events: none; }
+  #dropOverlay.on { display: flex; }
+  #dropOverlay .drop-card { text-align: center; }
+  #dropOverlay .drop-icon { font-size: 48px; margin-bottom: 8px; }
+  #dropOverlay .drop-text { color: var(--accent); font-size: 16px; font-weight: 600; }
+  #dropOverlay .drop-text span { color: var(--muted); font-weight: 400; font-size: 12px; }
+
+  /* ─── Preview panel ─── */
+  #preview {
+    width: 480px; flex-shrink: 0; display: flex; flex-direction: column;
+    background: var(--panel); border-left: 1px solid var(--border);
+    min-width: 0; overflow: hidden;
+  }
+  #preview.hidden { display: none; }
+  #preview .ph {
+    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
+    background: var(--panel2); border-bottom: 1px solid var(--border); flex-shrink: 0;
+  }
+  #preview .ph .pp { flex: 1; font-family: ui-monospace, 'SF Mono', monospace;
+    font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  #preview .ph button {
+    background: transparent; color: var(--muted); border: 1px solid var(--border2);
+    border-radius: 5px; padding: 3px 9px; font-size: 11px; cursor: pointer;
+  }
+  #preview .ph button:hover { color: var(--accent); border-color: var(--accent); }
+  #preview .ph button.primary { background: var(--accent); color: white; border-color: var(--accent); }
+  #preview .ph button.primary:hover { background: var(--accent2); }
 
-async function* chatStream(messages, model, agentTools) {
-  const MAX_TOOL_ROUNDS = 15;
-  let rounds = 0;
-  const patchFails = {};
+  #preview .ind {
+    display: none; padding: 4px 12px; background: rgba(210,153,34,.12);
+    color: var(--yellow); font-size: 11px; border-bottom: 1px solid rgba(210,153,34,.3);
+  }
+  #preview .ind.show { display: block; }
+
+  #pview { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px; font-size: 13.5px; line-height: 1.6; }
+  #pview::-webkit-scrollbar { width: 8px; }
+  #pview::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
+  #pview pre { background: var(--bg); border: 1px solid var(--border);
+    border-radius: 6px; padding: 10px 12px; overflow-x: auto;
+    font-family: ui-monospace, 'SF Mono', monospace; font-size: 12px; line-height: 1.5; }
+  #pview code { font-family: ui-monospace, 'SF Mono', monospace; font-size: 12px; }
+  #pview :not(pre) > code { background: var(--panel2); padding: 1px 5px; border-radius: 3px; }
+  #pview h1, #pview h2, #pview h3 { color: var(--accent); margin-top: 1.2em; }
+  #pview h1 { font-size: 22px; border-bottom: 1px solid var(--border); padding-bottom: .3em; }
+  #pview h2 { font-size: 18px; }
+  #pview h3 { font-size: 15px; }
+  #pview a { color: var(--accent); }
+  #pview blockquote { border-left: 3px solid var(--accent); padding-left: 12px; color: var(--muted); margin: 8px 0; }
+  #pview table { border-collapse: collapse; margin: 8px 0; }
+  #pview th, #pview td { border: 1px solid var(--border); padding: 5px 8px; }
+  #pview hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
+  #pview img { max-width: 100%; border-radius: 4px; }
+  #pview iframe.html-preview { width: 100%; height: 100%; border: 0; background: #fff;
+    border-radius: 4px; display: block; }
+
+  #pview.code { padding: 0; }
+  #pview.code pre { margin: 0; border: none; border-radius: 0; min-height: 100%; }
+
+  #pedit {
+    flex: 1; min-height: 0; width: 100%; padding: 12px 14px;
+    background: var(--bg); border: none; color: var(--fg);
+    font-family: ui-monospace, 'SF Mono', monospace; font-size: 12.5px; line-height: 1.5;
+    resize: none; outline: none; display: none;
+  }
+  #pedit.show { display: block; }
+  #pview.hide { display: none; }
+
+  #empty { padding: 40px 20px; text-align: center; color: var(--dim); font-size: 13px; }
+  #empty .lg { font-size: 36px; margin-bottom: 8px; }
+
+  /* Toast for fs events */
+  #toast { position: fixed; bottom: 14px; right: 14px; z-index: 100;
+    display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
+  .tmsg { background: rgba(13,17,23,.95); color: var(--fg); border: 1px solid var(--border2);
+    border-radius: 6px; padding: 8px 12px; font-size: 12px; pointer-events: auto;
+    animation: slideIn .2s ease; max-width: 360px; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
+  .tmsg.warn { border-color: rgba(210,153,34,.5); }
+  .tmsg.err { border-color: var(--red); }
+  @keyframes slideIn { from { transform: translateX(10px); opacity: 0; } to { transform: none; opacity: 1; } }
+</style>
+</head>
+<body>
+<div id="app">
+  <div id="bar">
+    <span class="dot" id="dot"></span>
+    <span class="title">&#9889; <span>Sapper</span></span>
+    <span class="cwd" id="cwd"></span>
+    <div id="stats" title="Live system stats">
+      <div class="srow"><span class="slbl">CPU</span><div class="sbar"><i id="bCpu"></i></div><span class="sval" id="vCpu">—</span></div>
+      <div class="srow"><span class="slbl">RAM</span><div class="sbar"><i id="bRam"></i></div><span class="sval" id="vRam">—</span></div>
+      <div class="srow"><span class="slbl">GPU</span><div class="sbar"><i id="bGpu"></i></div><span class="sval" id="vGpu">—</span></div>
+    </div>
+    <span class="spacer"></span>
+    <button id="btnSide" class="toggle on" onclick="toggleSide()">Sidebar</button>
+    <button id="btnPrev" class="toggle" onclick="togglePreview()">Preview</button>
+    <button onclick="sendCmd('/help')">/help</button>
+    <button onclick="sendCmd('/agents')">agents</button>
+    <button onclick="sendCmd('/model')">model</button>
+    <button onclick="sendCmd('/clear')">clear</button>
+    <button onclick="restartSapper()">restart</button>
+  </div>
 
-  while (true) {
-    if (abortFlag) { abortFlag = false; yield { type: 'system', data: 'Generation stopped' }; break; }
+  <div id="body">
+    <!-- Sidebar -->
+    <aside id="side">
+      <div class="tabs">
+        <button class="active" data-tab="files" onclick="switchTab('files')">Files</button>
+        <button data-tab="config" onclick="switchTab('config')">Config</button>
+        <button data-tab="agents" onclick="switchTab('agents')">Agents</button>
+        <button data-tab="skills" onclick="switchTab('skills')">Skills</button>
+      </div>
+      <div class="pane active" id="pane-files">
+        <div class="files-toolbar">
+          <button class="ftb" title="New file" onclick="newItemPrompt('file','')">&#128462;<sup>+</sup></button>
+          <button class="ftb" title="New folder" onclick="newItemPrompt('folder','')">&#128193;<sup>+</sup></button>
+          <button class="ftb" id="ftbAct" title="Show activity log" onclick="toggleActivity()">&#9737;</button>
+          <span class="ftb-spacer"></span>
+          <button class="ftb" title="Clear change marks" onclick="clearAllMarks()">&#10005;</button>
+          <button class="ftb" title="Refresh tree" onclick="loadTree()">&#8634;</button>
+          <button class="ftb" title="Collapse all" onclick="collapseAll()">&#8676;</button>
+        </div>
+        <div id="activityPanel">
+          <div class="ah">Recent activity<span class="acl" onclick="clearActivity()">clear</span></div>
+          <div id="activityList"></div>
+        </div>
+        <div class="tree" id="tree"></div>
+      </div>
+      <div class="pane" id="pane-config">
+        <div class="pane-section" id="cfgQuick">
+          <h4>Quick settings</h4>
+          <div id="cfgQuickBody"></div>
+        </div>
+        <div class="pane-section">
+          <h4>Raw config.json</h4>
+          <p>Full <code>.sapper/config.json</code> — every Sapper option lives here.</p>
+          <textarea class="json-edit" id="cfgJson" spellcheck="false"></textarea>
+          <div class="row-btns">
+            <button onclick="reloadConfig()">Reload</button>
+            <button class="primary" onclick="saveConfig()">Save</button>
+          </div>
+        </div>
+      </div>
+      <div class="pane" id="pane-agents">
+        <div class="pane-section">
+          <h4>Available agents</h4>
+          <p>Click any agent to open its <code>.md</code> file in preview.</p>
+        </div>
+        <div id="agentsList"></div>
+      </div>
+      <div class="pane" id="pane-skills">
+        <div class="pane-section">
+          <h4>Available skills</h4>
+          <p>Click a skill to open it. Use <code>/use name</code> in the terminal to load.</p>
+        </div>
+        <div id="skillsList"></div>
+      </div>
+    </aside>
+
+    <!-- Center: terminal -->
+    <main id="center">
+      <div id="qa">
+        <button class="qabtn" title="Attach files (sends @path to Sapper)" onclick="pickAndUpload()">
+          <span class="qaico">&#128206;</span><span class="qalbl">Attach</span>
+        </button>
+        <button class="qabtn rec" title="Record voice (auto-transcribed by Sapper)" onclick="toggleRecord()" id="qaRec">
+          <span class="qaico">&#127908;</span><span class="qalbl">Record</span>
+        </button>
+        <span id="recDot" class="rec-dot"></span>
+        <span id="recTime" class="rec-time"></span>
+        <span class="qa-sp"></span>
+        <button class="qabtn" title="Send /attach (interactive)" onclick="sendCmd('/attach')">/attach</button>
+        <button class="qabtn" title="Open file by path" onclick="sendOpenPrompt()">/open</button>
+        <button class="qabtn" title="Compact context" onclick="sendCmd('/summary')">/summary</button>
+        <input type="file" id="qaFile" multiple style="display:none">
+      </div>
+      <div id="term-wrap"></div>
+      <div id="dropOverlay">
+        <div class="drop-card">
+          <div class="drop-icon">&#128229;</div>
+          <div class="drop-text">Drop files to upload<br><span>They will be attached to Sapper with <code>@path</code></span></div>
+        </div>
+      </div>
+    </main>
+
+    <!-- Right: preview -->
+    <aside id="preview" class="hidden">
+      <div class="ph">
+        <span class="pp" id="pPath">No file open</span>
+        <button id="pEdit" onclick="startEdit()" style="display:none">Edit</button>
+        <button id="pSave" onclick="saveEdit()" class="primary" style="display:none">Save</button>
+        <button id="pCancel" onclick="cancelEdit()" style="display:none">Cancel</button>
+        <button id="pSrc" onclick="toggleSource()" style="display:none">Source</button>
+        <button id="pReload" onclick="reloadPreview()" style="display:none">Reload</button>
+        <button onclick="closePreview()">&times;</button>
+      </div>
+      <div class="ind" id="pInd">File changed on disk — reload to view latest.</div>
+      <div id="pview"><div id="empty"><div class="lg">&#128196;</div>Open a file from the sidebar.</div></div>
+      <textarea id="pedit" spellcheck="false"></textarea>
+    </aside>
+  </div>
+</div>
+<div id="toast"></div>
 
-    let fullMsg = '';
-    const response = await ollama.chat({ model, messages, stream: true });
-    for await (const chunk of response) {
-      if (abortFlag) { abortFlag = false; yield { type: 'system', data: 'Generation stopped' }; messages.push({ role: 'assistant', content: fullMsg }); return; }
-      const token = chunk.message?.content || '';
-      fullMsg += token;
-      yield { type: 'token', data: token };
-    }
-    messages.push({ role: 'assistant', content: fullMsg });
+<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xterm-addon-web-links@0.9.0/lib/xterm-addon-web-links.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/marked@12.0.2/marked.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
+<script>
+/* ─────────────────────────────────────────────────────────────── */
+/*  Sapper Web — frontend                                         */
+/* ─────────────────────────────────────────────────────────────── */
 
-    const clean = fullMsg.replace(/```[\s\S]*?```/g, '');
-    const toolMatches = [...clean.matchAll(/\[TOOL:(\w+)\]([^:\]]*?)(?:(?:::|\])([\s\S]*?))?\[\/TOOL\]/g)];
+var BT = String.fromCharCode(96);
 
-    if (toolMatches.length === 0) break;
+// ─── State ────────────────────────────────────────────────────
+var state = {
+  cwd: '',
+  currentFile: null,    // workspace-relative path currently in preview
+  fileOnDisk: '',       // last loaded content from server
+  editing: false,
+  expanded: { '': true },
+  fsWS: null,
+  marks: {},            // path -> { kind, count, ts }
+  activity: [],         // ordered list of {kind, path, isDir, ts}
+  activityOpen: false,
+};
 
-    rounds++;
-    if (rounds >= MAX_TOOL_ROUNDS) {
-      messages.push({ role: 'user', content: 'STOP using tools. Provide your answer now with what you have.' });
-      yield { type: 'system', data: `Tool limit reached (${MAX_TOOL_ROUNDS} rounds)` };
-      continue;
-    }
+function esc(s) {
+  if (s == null) return '';
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+    .replace(/"/g,'&quot;').replace(/'/g,'&#39;');
+}
 
-    for (const match of toolMatches) {
-      if (abortFlag) break;
-      const [, type, path, content] = match;
-      yield { type: 'tool_start', data: { tool: type.toUpperCase(), path } };
-
-      if (type.toLowerCase() === 'patch') {
-        const key = path.trim();
-        if ((patchFails[key] || 0) >= 3) {
-          const err = `Error: PATCH failed 3 times on ${key}. Use READ + LINE:number mode or WRITE instead.`;
-          messages.push({ role: 'user', content: `RESULT (${path}): ${err}` });
-          yield { type: 'tool_result', data: { tool: 'PATCH', path, result: err, blocked: true } };
-          continue;
+function showToast(msg, kind) {
+  var el = document.createElement('div');
+  el.className = 'tmsg' + (kind ? ' ' + kind : '');
+  el.textContent = msg;
+  document.getElementById('toast').appendChild(el);
+  setTimeout(function(){ el.style.opacity = '0'; el.style.transition = 'opacity .3s'; }, 2200);
+  setTimeout(function(){ el.remove(); }, 2700);
+}
+
+// ─── Terminal & pty WS ───────────────────────────────────────
+var term = new Terminal({
+  fontFamily: '"SF Mono","Fira Code","JetBrains Mono",Menlo,ui-monospace,monospace',
+  fontSize: 13, lineHeight: 1.25, cursorBlink: true, cursorStyle: 'bar',
+  scrollback: 10000, allowProposedApi: true, macOptionIsMeta: true,
+  theme: {
+    background:'#0a0e14', foreground:'#e6edf3', cursor:'#58a6ff', cursorAccent:'#0a0e14',
+    selectionBackground:'rgba(88,166,255,0.35)',
+    black:'#484f58', red:'#ff7b72', green:'#3fb950', yellow:'#d29922',
+    blue:'#58a6ff', magenta:'#bc8cff', cyan:'#39c5cf', white:'#e6edf3',
+    brightBlack:'#6e7681', brightRed:'#ffa198', brightGreen:'#56d364',
+    brightYellow:'#e3b341', brightBlue:'#79c0ff', brightMagenta:'#d2a8ff',
+    brightCyan:'#56d4dd', brightWhite:'#f0f6fc'
+  }
+});
+var fit = new FitAddon.FitAddon();
+term.loadAddon(fit);
+try { term.loadAddon(new WebLinksAddon.WebLinksAddon()); } catch(e){}
+term.open(document.getElementById('term-wrap'));
+setTimeout(function(){ try { fit.fit(); } catch(e){} }, 30);
+
+var ws = null, reconnectTimer = null;
+
+function connectPty() {
+  var proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  ws = new WebSocket(proto + '//' + location.host + '/ws');
+  ws.binaryType = 'arraybuffer';
+  ws.onopen = function() {
+    document.getElementById('dot').className = 'dot on';
+    var d = fit.proposeDimensions() || { cols: 100, rows: 30 };
+    ws.send(JSON.stringify({ type:'init', cols:d.cols, rows:d.rows }));
+    term.focus();
+  };
+  ws.onmessage = function(ev) {
+    if (typeof ev.data === 'string') {
+      try {
+        var m = JSON.parse(ev.data);
+        if (m.type === 'cwd') { state.cwd = m.path; document.getElementById('cwd').textContent = m.path; }
+        else if (m.type === 'exit') {
+          term.writeln('\\r\\n\\x1b[33m[sapper exited — click "restart" to relaunch]\\x1b[0m');
+          document.getElementById('dot').className = 'dot err';
         }
-      }
-
-      const { result, blocked } = await executeTool(type, path, content, agentTools);
-
-      if (type.toLowerCase() === 'patch' && result.startsWith('Error:')) {
-        const key = path.trim();
-        patchFails[key] = (patchFails[key] || 0) + 1;
-      }
-
-      messages.push({ role: 'user', content: `RESULT (${path}): ${result}` });
-      yield { type: 'tool_result', data: { tool: type.toUpperCase(), path, result: result.substring(0, 3000), blocked } };
+      } catch(e){}
+    } else {
+      term.write(new Uint8Array(ev.data));
     }
-  }
-}
-
-// ─── Session Management ────────────────────────────────────
-
-function listSessions() {
-  ensureDir(SESSIONS_DIR);
+  };
+  ws.onclose = function() {
+    document.getElementById('dot').className = 'dot err';
+    clearTimeout(reconnectTimer);
+    reconnectTimer = setTimeout(connectPty, 1200);
+  };
+  ws.onerror = function(){};
+}
+term.onData(function(d){ if (ws && ws.readyState === 1) ws.send(d); });
+function doFit() {
   try {
-    return fs.readdirSync(SESSIONS_DIR)
-      .filter(f => f.endsWith('.json'))
-      .map(f => {
-        try {
-          const data = JSON.parse(fs.readFileSync(join(SESSIONS_DIR, f), 'utf8'));
-          return { id: f.replace('.json', ''), name: data.name || 'Unnamed', created: data.created, msgCount: (data.messages || []).filter(m => m.role === 'user').length };
-        } catch { return null; }
-      })
-      .filter(Boolean)
-      .sort((a, b) => new Date(b.created) - new Date(a.created));
-  } catch { return []; }
-}
-
-function saveSession(id, name, messages, model, agentKey) {
-  ensureDir(SESSIONS_DIR);
-  const data = { name, created: new Date().toISOString(), model, agent: agentKey, messages };
-  fs.writeFileSync(join(SESSIONS_DIR, `${id}.json`), JSON.stringify(data));
+    fit.fit();
+    var d = fit.proposeDimensions();
+    if (d && ws && ws.readyState === 1) ws.send(JSON.stringify({ type:'resize', cols:d.cols, rows:d.rows }));
+  } catch(e){}
+}
+var rTimer = null;
+window.addEventListener('resize', function(){ clearTimeout(rTimer); rTimer = setTimeout(doFit, 80); });
+
+window.sendCmd = function(cmd) { if (ws && ws.readyState === 1) ws.send(cmd + '\\r'); term.focus(); };
+window.restartSapper = function() { if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type:'restart' })); };
+document.getElementById('term-wrap').addEventListener('click', function(){ term.focus(); });
+
+// ─── FS events WS ────────────────────────────────────────────
+function connectEvents() {
+  var proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  state.fsWS = new WebSocket(proto + '//' + location.host + '/events');
+  state.fsWS.onmessage = function(ev) {
+    var msg = null;
+    try { msg = JSON.parse(ev.data); } catch(e) { return; }
+    if (msg.type === 'stats') { handleStats(msg); return; }
+    handleFsEvent(msg);
+  };
+  state.fsWS.onclose = function() { setTimeout(connectEvents, 2000); };
+}
+
+function fmtBytes(b) {
+  if (b == null) return '—';
+  var u = ['B','KB','MB','GB','TB']; var i = 0;
+  while (b >= 1024 && i < u.length - 1) { b /= 1024; i++; }
+  return (i >= 3 ? b.toFixed(1) : Math.round(b)) + ' ' + u[i];
+}
+
+function setBar(id, pct) {
+  var el = document.getElementById(id);
+  if (!el) return;
+  pct = Math.max(0, Math.min(100, pct || 0));
+  el.style.width = pct + '%';
+  el.classList.remove('warn', 'crit');
+  if (pct >= 85) el.classList.add('crit');
+  else if (pct >= 65) el.classList.add('warn');
+}
+
+function handleStats(msg) {
+  if (msg.cpu) {
+    setBar('bCpu', msg.cpu.percent);
+    document.getElementById('vCpu').textContent = msg.cpu.percent + '%';
+  }
+  if (msg.mem) {
+    setBar('bRam', msg.mem.percent);
+    document.getElementById('vRam').textContent = fmtBytes(msg.mem.used) + '/' + fmtBytes(msg.mem.total);
+  } else if (msg.totalMem) {
+    document.getElementById('vRam').textContent = fmtBytes(msg.totalMem);
+  }
+  if (msg.gpu) {
+    setBar('bGpu', msg.gpu.percent);
+    document.getElementById('vGpu').textContent = msg.gpu.percent + '%';
+  } else {
+    document.getElementById('vGpu').textContent = 'n/a';
+  }
 }
 
-function loadSessionData(id) {
-  try { return JSON.parse(fs.readFileSync(join(SESSIONS_DIR, `${id}.json`), 'utf8')); }
-  catch { return null; }
+function handleFsEvent(msg) {
+  if (!msg) return;
+  if (msg.type === 'activity-replay') {
+    if (Array.isArray(msg.items)) msg.items.forEach(applyActivityItem);
+    return;
+  }
+  if (!msg.path) return;
+  applyActivityItem(msg);
+  // Re-fetch tree (parent dir) for create/delete so the new/removed file appears
+  if (msg.kind === 'created' || msg.kind === 'deleted') {
+    var parent = msg.path.split('/').slice(0, -1).join('/');
+    refreshDir(parent);
+  }
+  // If the current preview file changed, auto-refresh (or show indicator if editing)
+  if (state.currentFile === msg.path) {
+    if (msg.kind === 'deleted') return; // file gone; leave preview state
+    if (state.editing) {
+      document.getElementById('pInd').classList.add('show');
+    } else {
+      openFile(msg.path, true);
+    }
+  }
 }
 
-function deleteSessionFile(id) {
-  try { fs.unlinkSync(join(SESSIONS_DIR, `${id}.json`)); return true; }
-  catch { return false; }
+function applyActivityItem(item) {
+  // bump persistent mark
+  var prev = state.marks[item.path];
+  var count = prev ? (prev.count + 1) : 1;
+  state.marks[item.path] = { kind: item.kind, count: count, ts: item.ts };
+  var row = document.querySelector('.row[data-path="' + cssEscape(item.path) + '"]');
+  if (row) applyMark(row, state.marks[item.path]);
+  // push into activity log (dedupe consecutive entries for same path)
+  var last = state.activity[state.activity.length - 1];
+  if (last && last.path === item.path && last.kind === item.kind && (item.ts - last.ts) < 1500) {
+    last.count = (last.count || 1) + 1;
+    last.ts = item.ts;
+  } else {
+    state.activity.push({ kind: item.kind, path: item.path, isDir: item.isDir, ts: item.ts, count: 1 });
+    if (state.activity.length > 100) state.activity.shift();
+  }
+  renderActivity();
+  // Highlight parent dirs subtly so user notices nested change even when collapsed
+  var parts = item.path.split('/');
+  for (var i = 1; i < parts.length; i++) {
+    var dirPath = parts.slice(0, i).join('/');
+    var dirRow = document.querySelector('.row[data-path="' + cssEscape(dirPath) + '"]');
+    if (dirRow && !dirRow.classList.contains('act-created') && !dirRow.classList.contains('act-modified') && !dirRow.classList.contains('act-deleted')) {
+      dirRow.classList.add('act-modified', 'act-fresh');
+      setTimeout((function(r){ return function(){ r.classList.remove('act-fresh'); }; })(dirRow), 1500);
+    }
+  }
 }
 
-function renameSession(id, newName) {
-  try {
-    const data = JSON.parse(fs.readFileSync(join(SESSIONS_DIR, `${id}.json`), 'utf8'));
-    data.name = newName;
-    fs.writeFileSync(join(SESSIONS_DIR, `${id}.json`), JSON.stringify(data));
-    return true;
-  } catch { return false; }
+function applyMark(row, mark) {
+  row.classList.remove('act-created', 'act-modified', 'act-deleted', 'act-multi', 'act-fresh');
+  row.classList.add('act-' + mark.kind, 'act-fresh');
+  if (mark.count > 1) {
+    row.classList.add('act-multi');
+    var cnt = row.querySelector('.actcount');
+    if (cnt) cnt.textContent = String(mark.count);
+  }
+  setTimeout(function(){ row.classList.remove('act-fresh'); }, 1500);
 }
 
-// ─── Agent/Skill CRUD ─────────────────────────────────────
-
-function createAgentFile(name, description, agentTools, content) {
-  ensureDir(AGENTS_DIR);
-  const filename = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') + '.md';
-  let fm = '---\n';
-  fm += `name: "${name}"\n`;
-  fm += `description: "${description}"\n`;
-  if (agentTools && agentTools.length > 0) {
-    fm += `tools: [${agentTools.map(t => '"' + t + '"').join(', ')}]\n`;
+function renderActivity() {
+  var host = document.getElementById('activityList');
+  if (!host) return;
+  if (!state.activity.length) {
+    host.innerHTML = '<div class="empty">No changes yet. Ask Sapper to edit something.</div>';
+    return;
   }
-  fm += '---\n\n';
-  fs.writeFileSync(join(AGENTS_DIR, filename), fm + content);
-  return filename;
+  var items = state.activity.slice(-30).reverse();
+  host.innerHTML = items.map(function(a){
+    var rel = relTime(a.ts);
+    var ct = a.count > 1 ? ' &times;' + a.count : '';
+    return '<div class="ai kind-' + a.kind + '" data-path="' + esc(a.path) + '">' +
+      '<span class="ak">' + a.kind + ct + '</span>' +
+      '<span class="ap">' + esc(a.path) + '</span>' +
+      '<span class="at">' + rel + '</span></div>';
+  }).join('');
+  Array.from(host.querySelectorAll('.ai')).forEach(function(el){
+    el.addEventListener('click', function(){
+      var p = el.dataset.path;
+      var mark = state.marks[p];
+      if (mark && mark.kind === 'deleted') { showToast(p + ' (deleted)'); return; }
+      // expand ancestor dirs then open
+      var parts = p.split('/');
+      var soFar = '';
+      for (var i = 0; i < parts.length - 1; i++) {
+        soFar = soFar ? soFar + '/' + parts[i] : parts[i];
+        state.expanded[soFar] = true;
+      }
+      loadTree();
+      setTimeout(function(){ openFile(p); }, 80);
+      // clear that file's mark since the user has acknowledged it
+      clearMark(p);
+    });
+  });
 }
 
-function deleteAgentFile(key) {
-  try { fs.unlinkSync(join(AGENTS_DIR, key + '.md')); return true; }
-  catch { return false; }
+function relTime(ts) {
+  var s = Math.floor((Date.now() - ts) / 1000);
+  if (s < 5) return 'now';
+  if (s < 60) return s + 's';
+  if (s < 3600) return Math.floor(s / 60) + 'm';
+  return Math.floor(s / 3600) + 'h';
 }
 
-function createSkillFile(name, description, content) {
-  ensureDir(SKILLS_DIR);
-  const filename = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') + '.md';
-  let fm = '---\n';
-  fm += `name: "${name}"\n`;
-  fm += `description: "${description}"\n`;
-  fm += '---\n\n';
-  fs.writeFileSync(join(SKILLS_DIR, filename), fm + content);
-  return filename;
+function clearMark(path) {
+  delete state.marks[path];
+  var row = document.querySelector('.row[data-path="' + cssEscape(path) + '"]');
+  if (row) row.classList.remove('act-created', 'act-modified', 'act-deleted', 'act-multi', 'act-fresh');
 }
 
-function deleteSkillFile(key) {
-  try { fs.unlinkSync(join(SKILLS_DIR, key + '.md')); return true; }
-  catch { return false; }
-}
+window.toggleActivity = function() {
+  state.activityOpen = !state.activityOpen;
+  document.getElementById('activityPanel').classList.toggle('on', state.activityOpen);
+  document.getElementById('ftbAct').classList.toggle('on', state.activityOpen);
+  if (state.activityOpen) renderActivity();
+};
 
-// ─── Directory Tree ────────────────────────────────────────
+window.clearActivity = function() {
+  state.activity = [];
+  renderActivity();
+};
 
-function getTreeEntries(dirPath) {
-  const safe = safePath(dirPath);
-  if (!safe) return [];
-  try {
-    const entries = fs.readdirSync(safe);
-    return entries
-      .filter(e => !shouldIgnore(e) && !e.startsWith('.'))
-      .map(e => {
-        try {
-          const stat = fs.statSync(join(safe, e));
-          return { name: e, isDir: stat.isDirectory(), size: stat.size, modified: stat.mtime.toISOString() };
-        } catch { return { name: e, isDir: false, size: 0 }; }
-      })
-      .sort((a, b) => {
-        if (a.isDir && !b.isDir) return -1;
-        if (!a.isDir && b.isDir) return 1;
-        return a.name.localeCompare(b.name);
-      });
-  } catch { return []; }
-}
+window.clearAllMarks = function() {
+  state.marks = {};
+  document.querySelectorAll('.row').forEach(function(r){
+    r.classList.remove('act-created', 'act-modified', 'act-deleted', 'act-multi', 'act-fresh');
+  });
+  showToast('Cleared change marks');
+};
 
-// ─── Server State ──────────────────────────────────────────
-
-let serverMessages = [];
-let serverModel = '';
-let serverAgent = null;
-let serverAgentKey = null;
-let serverAgentTools = null;
-let currentSessionId = null;
-
-function resetChat() {
-  const skills = loadSkills();
-  const skillContents = Object.values(skills).map(s => s.content);
-  serverMessages = [{
-    role: 'system',
-    content: buildSystemPrompt(serverAgent?.content || null, serverAgentTools, skillContents)
-  }];
-}
+// Periodically refresh "rel time" labels in the activity panel
+setInterval(function(){ if (state.activityOpen) renderActivity(); }, 30000);
 
-function getVersion() {
-  try { return JSON.parse(fs.readFileSync(join(__dirname, 'package.json'), 'utf8')).version; }
-  catch { return '0.0.0'; }
-}
+function cssEscape(s) { return s.replace(/(["\\\\])/g, '\\\\$1'); }
 
-function json(res, data, status = 200) {
-  res.writeHead(status, { 'Content-Type': 'application/json' });
-  res.end(JSON.stringify(data));
+// ─── Sidebar tabs ────────────────────────────────────────────
+window.switchTab = function(name) {
+  document.querySelectorAll('.tabs button').forEach(function(b){
+    b.classList.toggle('active', b.dataset.tab === name);
+  });
+  document.querySelectorAll('.pane').forEach(function(p){
+    p.classList.toggle('active', p.id === 'pane-' + name);
+  });
+  if (name === 'config' && !document.getElementById('cfgJson').value) reloadConfig();
+  if (name === 'agents') loadAgents();
+  if (name === 'skills') loadSkills();
+};
+window.toggleSide = function() {
+  var s = document.getElementById('side');
+  s.classList.toggle('hidden');
+  document.getElementById('btnSide').classList.toggle('on', !s.classList.contains('hidden'));
+  setTimeout(doFit, 50);
+};
+window.togglePreview = function() {
+  var p = document.getElementById('preview');
+  p.classList.toggle('hidden');
+  document.getElementById('btnPrev').classList.toggle('on', !p.classList.contains('hidden'));
+  setTimeout(doFit, 50);
+};
+
+// ─── File tree ───────────────────────────────────────────────
+function fileIcon(name, isDir) {
+  if (isDir) return '&#128193;';
+  var ext = name.split('.').pop().toLowerCase();
+  if (['md','markdown'].indexOf(ext) >= 0) return '&#128221;';
+  if (['png','jpg','jpeg','gif','svg','webp'].indexOf(ext) >= 0) return '&#128247;';
+  if (['json','yml','yaml','toml'].indexOf(ext) >= 0) return '&#9881;';
+  return '&#128196;';
+}
+
+function loadTree() {
+  fetch('/api/tree?path=').then(function(r){return r.json();}).then(function(d){
+    var root = document.getElementById('tree');
+    root.innerHTML = '';
+    renderDir(root, '', d.entries, 0);
+  }).catch(function(e){ showToast('Tree error: ' + e.message, 'err'); });
+}
+
+function refreshDir(path) {
+  // Re-fetch the directory contents and re-render in place if expanded
+  var key = path || '';
+  if (!state.expanded[key]) return;
+  fetch('/api/tree?path=' + encodeURIComponent(path)).then(function(r){return r.json();}).then(function(d){
+    // Find parent row, then rebuild its children
+    if (key === '') { loadTree(); return; }
+    var parentRow = document.querySelector('.row[data-path="' + cssEscape(key) + '"]');
+    if (!parentRow) return;
+    var depth = parseInt(parentRow.dataset.depth || '0', 10);
+    var next = parentRow.nextSibling;
+    while (next && parseInt(next.dataset.depth || '-1', 10) > depth) {
+      var rem = next; next = next.nextSibling; rem.remove();
+    }
+    // Re-insert children
+    var container = document.createDocumentFragment();
+    renderEntries(container, key, d.entries, depth + 1);
+    parentRow.parentNode.insertBefore(container, parentRow.nextSibling);
+  });
 }
 
-function readBody(req) {
-  const MAX_BODY_SIZE = 5 * 1024 * 1024; // 5MB limit
-  return new Promise((resolve, reject) => {
-    let body = '';
-    let size = 0;
-    req.on('data', c => {
-      size += c.length;
-      if (size > MAX_BODY_SIZE) {
-        req.destroy();
-        resolve({ _error: 'Request body too large' });
+function renderDir(container, basePath, entries, depth) {
+  renderEntries(container, basePath, entries, depth);
+}
+
+function renderEntries(container, basePath, entries, depth) {
+  entries.forEach(function(entry){
+    var path = basePath ? (basePath + '/' + entry.name) : entry.name;
+    var row = document.createElement('div');
+    row.className = 'row';
+    row.dataset.path = path;
+    row.dataset.depth = depth;
+    row.dataset.isdir = entry.isDir ? '1' : '0';
+    row.style.paddingLeft = (8 + depth * 14) + 'px';
+    var chev = entry.isDir ? (state.expanded[path] ? '&#9662;' : '&#9656;') : '';
+    row.innerHTML =
+      '<span class="chev">' + chev + '</span>' +
+      '<span class="ico">' + fileIcon(entry.name, entry.isDir) + '</span>' +
+      '<span class="name">' + esc(entry.name) + '</span>' +
+      '<span class="actdot"></span>' +
+      '<span class="actcount"></span>' +
+      '<span class="badge">&#9679;</span>' +
+      '<span class="rmenu" title="Options">&#8943;</span>';
+    row.addEventListener('click', function(ev){
+      if (ev.target && ev.target.classList && ev.target.classList.contains('rmenu')) {
+        ev.stopPropagation();
+        openRowMenu(ev.target, path, entry.isDir);
         return;
       }
-      body += c;
+      if (entry.isDir) toggleDir(row, path);
+      else openFile(path);
     });
-    req.on('error', () => resolve({}));
-    req.on('end', () => { try { resolve(JSON.parse(body)); } catch { resolve({}); } });
+    row.addEventListener('contextmenu', function(ev){
+      ev.preventDefault();
+      openRowMenu({ getBoundingClientRect: function(){ return { left: ev.clientX, bottom: ev.clientY, right: ev.clientX, top: ev.clientY }; } }, path, entry.isDir);
+    });
+    container.appendChild(row);
+    // Re-apply any persistent activity mark for this path
+    var m = state.marks[path];
+    if (m) applyMark(row, m);
+    if (entry.isDir && state.expanded[path]) {
+      // Load children if not already loaded
+      fetch('/api/tree?path=' + encodeURIComponent(path)).then(function(r){return r.json();}).then(function(d){
+        var frag = document.createDocumentFragment();
+        renderEntries(frag, path, d.entries, depth + 1);
+        row.parentNode.insertBefore(frag, row.nextSibling);
+      });
+    }
   });
 }
 
-// ─── HTML Builder ──────────────────────────────────────────
-
-function buildHTML() {
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Sapper</title>
-<style>
-:root {
-  --bg0: #0a0e14; --bg1: #0d1117; --bg2: #161b22; --bg3: #21262d; --bg4: #30363d; --bg5: #3d444d;
-  --fg0: #f0f6fc; --fg1: #e6edf3; --fg2: #8b949e; --fg3: #484f58;
-  --accent: #58a6ff; --accent2: #1f6feb; --green: #3fb950; --red: #f85149;
-  --orange: #d29922; --purple: #bc8cff; --cyan: #39d2c0; --pink: #f778ba;
-  --radius: 10px; --radius-sm: 6px;
+function toggleDir(row, path) {
+  var depth = parseInt(row.dataset.depth, 10);
+  var isExpanded = !!state.expanded[path];
+  if (isExpanded) {
+    // Collapse: remove all following rows with greater depth
+    var next = row.nextSibling;
+    while (next && parseInt(next.dataset.depth || '-1', 10) > depth) {
+      var rem = next; next = next.nextSibling; rem.remove();
+    }
+    delete state.expanded[path];
+    row.querySelector('.chev').innerHTML = '&#9656;';
+  } else {
+    state.expanded[path] = true;
+    row.querySelector('.chev').innerHTML = '&#9662;';
+    fetch('/api/tree?path=' + encodeURIComponent(path)).then(function(r){return r.json();}).then(function(d){
+      var frag = document.createDocumentFragment();
+      renderEntries(frag, path, d.entries, depth + 1);
+      row.parentNode.insertBefore(frag, row.nextSibling);
+    });
+  }
 }
-* { margin: 0; padding: 0; box-sizing: border-box; }
-body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; background: var(--bg1); color: var(--fg1); height: 100vh; display: flex; overflow: hidden; }
-
-/* ── Sidebar ── */
-.sidebar { width: 270px; background: var(--bg2); border-right: 1px solid var(--bg4); display: flex; flex-direction: column; flex-shrink: 0; }
-.sidebar-header { padding: 16px 18px; border-bottom: 1px solid var(--bg4); display: flex; align-items: center; gap: 10px; }
-.sidebar-header h1 { font-size: 18px; font-weight: 700; }
-.sidebar-header h1 span { color: var(--accent); }
-.sidebar-tabs { display: flex; border-bottom: 1px solid var(--bg4); }
-.sidebar-tabs button { flex: 1; padding: 10px 4px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--fg3); font-size: 11px; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: .5px; transition: all .15s; }
-.sidebar-tabs button:hover { color: var(--fg2); }
-.sidebar-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
-.tab-panel { display: none; flex: 1; overflow-y: auto; padding: 8px; }
-.tab-panel.active { display: flex; flex-direction: column; }
-.tab-panel::-webkit-scrollbar { width: 5px; }
-.tab-panel::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }
-.tab-create-btn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; margin: 4px; background: var(--bg3); border: 1px dashed var(--bg5); border-radius: var(--radius-sm); color: var(--fg2); font-size: 12px; cursor: pointer; transition: all .15s; }
-.tab-create-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,.08); }
-.s-item { padding: 10px 12px; margin: 2px 4px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg2); transition: all .12s; border-radius: var(--radius-sm); border: 1px solid transparent; }
-.s-item:hover { background: var(--bg3); color: var(--fg1); }
-.s-item.active { background: rgba(88,166,255,.1); color: var(--accent); border-color: rgba(88,166,255,.2); }
-.s-item .s-icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 14px; }
-.s-item .s-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.s-item .s-meta { font-size: 10px; color: var(--fg3); }
-.s-item .s-del { display: none; background: none; border: none; color: var(--fg3); cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 4px; }
-.s-item:hover .s-del { display: block; }
-.s-item .s-del:hover { color: var(--red); background: rgba(248,81,73,.15); }
-
-/* ── Quick Actions ── */
-.qa-section { padding: 4px 8px; margin-top: auto; border-top: 1px solid var(--bg4); }
-.qa-title { font-size: 10px; font-weight: 600; color: var(--fg3); text-transform: uppercase; letter-spacing: .8px; padding: 8px 8px 4px; }
-.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; }
-.qa-btn { padding: 7px 6px; background: var(--bg3); border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--fg2); font-size: 11px; cursor: pointer; transition: all .12s; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; }
-.qa-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,.06); }
-.qa-btn .qa-icon { font-size: 12px; flex-shrink: 0; }
-
-/* ── Sidebar Footer ── */
-.sidebar-footer { padding: 12px; border-top: 1px solid var(--bg4); }
-.sidebar-footer select { width: 100%; background: var(--bg3); color: var(--fg1); border: 1px solid var(--bg4); border-radius: var(--radius-sm); padding: 6px 8px; font-size: 12px; cursor: pointer; outline: none; }
-.sidebar-footer select:focus { border-color: var(--accent); }
-.sidebar-footer .sf-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 11px; color: var(--fg3); }
-.sidebar-footer .sf-model { background: var(--bg3); padding: 3px 8px; border-radius: 12px; font-size: 10px; color: var(--accent); }
-
-/* ── Main ── */
-.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-
-/* ── Topbar ── */
-.topbar { height: 48px; background: var(--bg2); border-bottom: 1px solid var(--bg4); display: flex; align-items: center; padding: 0 16px; gap: 10px; flex-shrink: 0; }
-.topbar .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
-.topbar .agent-badge { background: linear-gradient(135deg, var(--accent2), var(--purple)); color: #fff; padding: 3px 10px; border-radius: 14px; font-size: 11px; font-weight: 600; }
-.topbar .session-name { color: var(--fg2); font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
-.topbar .session-name:hover { background: var(--bg3); }
-.topbar .spacer { flex: 1; }
-.topbar .tb-btn { background: var(--bg3); border: 1px solid var(--bg4); border-radius: var(--radius-sm); color: var(--fg2); padding: 5px 10px; font-size: 11px; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all .12s; }
-.topbar .tb-btn:hover { border-color: var(--accent); color: var(--accent); }
-.topbar .cwd { color: var(--fg3); font-size: 11px; font-family: 'SF Mono', 'Fira Code', monospace; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-/* ── Chat ── */
-.chat { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 6px; scroll-behavior: smooth; }
-.chat::-webkit-scrollbar { width: 6px; }
-.chat::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }
-.msg { max-width: 82%; padding: 12px 16px; border-radius: var(--radius); font-size: 14px; line-height: 1.6; word-break: break-word; animation: fadeIn .2s; }
-@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
-.msg.user { background: var(--accent2); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; }
-.msg.ai { background: var(--bg2); border: 1px solid var(--bg4); align-self: flex-start; border-bottom-left-radius: 3px; }
-.msg.ai pre { background: var(--bg0); border: 1px solid var(--bg4); border-radius: var(--radius-sm); padding: 10px 12px; overflow-x: auto; margin: 8px 0; font-size: 13px; }
-.msg.ai code { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; }
-.msg.ai :not(pre) > code { background: var(--bg3); padding: 1px 5px; border-radius: 3px; font-size: 12px; }
-.msg.ai h1, .msg.ai h2, .msg.ai h3, .msg.ai h4 { margin: 10px 0 4px; color: var(--accent); }
-.msg.ai ul, .msg.ai ol { padding-left: 20px; margin: 4px 0; }
-.msg.ai li { margin: 2px 0; }
-.msg.ai blockquote { border-left: 3px solid var(--accent); padding-left: 12px; color: var(--fg2); margin: 6px 0; }
-.msg.ai a { color: var(--accent); }
-.msg.ai p { margin: 4px 0; }
-.msg.ai hr { border: none; border-top: 1px solid var(--bg4); margin: 8px 0; }
-.msg.ai table { border-collapse: collapse; margin: 8px 0; width: 100%; }
-.msg.ai th, .msg.ai td { border: 1px solid var(--bg4); padding: 5px 8px; text-align: left; font-size: 13px; }
-.msg.ai th { background: var(--bg3); }
-.msg.system { background: transparent; color: var(--fg3); font-size: 12px; align-self: center; padding: 3px 10px; }
-
-/* ── Thinking Block ── */
-.think-block { background: rgba(188,140,255,.07); border: 1px solid rgba(188,140,255,.18); border-radius: 8px; margin: 8px 0; overflow: hidden; }
-.think-header { padding: 7px 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--purple); user-select: none; }
-.think-header:hover { background: rgba(188,140,255,.05); }
-.think-chevron { font-size: 10px; transition: transform .15s; }
-.think-block.open .think-chevron { transform: rotate(90deg); }
-.think-content { padding: 8px 12px; font-size: 13px; color: var(--fg2); line-height: 1.5; border-top: 1px solid rgba(188,140,255,.12); max-height: 250px; overflow-y: auto; display: none; }
-.think-block.open .think-content { display: block; }
-.think-block.streaming .think-header .think-label { animation: pulse 1.5s infinite; }
-@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
-
-/* ── AI Exchange Container ── */
-.ai-exchange { display: flex; flex-direction: column; gap: 4px; width: 100%; }
-
-/* ── Tool Card ── */
-.tool-card { background: var(--bg3); border: 1px solid var(--bg4); border-radius: 8px; margin: 4px 0; overflow: hidden; font-size: 13px; align-self: flex-start; max-width: 82%; }
-.tool-card.done .tc-spinner { display: none; }
-.tool-card-header { padding: 8px 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: background .12s; }
-.tool-card-header:hover { background: var(--bg4); }
-.tc-icon { font-size: 13px; flex-shrink: 0; }
-.tc-name { color: var(--orange); font-weight: 600; font-family: 'SF Mono', monospace; font-size: 12px; }
-.tc-path { color: var(--fg2); font-family: 'SF Mono', monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
-.tc-status { margin-left: auto; font-size: 12px; flex-shrink: 0; }
-.tc-chevron { font-size: 10px; color: var(--fg3); transition: transform .15s; flex-shrink: 0; }
-.tool-card.expanded .tc-chevron { transform: rotate(90deg); }
-.tool-card-body { display: none; padding: 8px 12px; border-top: 1px solid var(--bg4); }
-.tool-card.expanded .tool-card-body { display: block; }
-.tool-card-body pre { background: var(--bg1); padding: 8px; border-radius: 4px; white-space: pre-wrap; word-break: break-all; font-size: 11px; max-height: 200px; overflow-y: auto; margin: 0; color: var(--fg2); }
-.tool-card.error { border-color: rgba(248,81,73,.3); }
-.tool-card.error .tc-name { color: var(--red); }
-
-/* ── Thinking Dots ── */
-.thinking-dots { align-self: flex-start; display: flex; gap: 4px; padding: 14px 16px; }
-.thinking-dots span { width: 7px; height: 7px; background: var(--fg3); border-radius: 50%; animation: bounce .6s ease-in-out infinite; }
-.thinking-dots span:nth-child(2) { animation-delay: .1s; }
-.thinking-dots span:nth-child(3) { animation-delay: .2s; }
-@keyframes bounce { 0%,80%,100% { transform: scale(.7); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
-
-/* ── Input ── */
-.input-area { background: var(--bg2); border-top: 1px solid var(--bg4); padding: 12px 16px; flex-shrink: 0; }
-.input-row { display: flex; gap: 8px; align-items: flex-end; }
-.input-row textarea { flex: 1; background: var(--bg1); border: 1px solid var(--bg4); border-radius: var(--radius); padding: 10px 14px; color: var(--fg1); font-size: 14px; font-family: inherit; resize: none; outline: none; min-height: 44px; max-height: 150px; line-height: 1.5; transition: border-color .15s; }
-.input-row textarea:focus { border-color: var(--accent); }
-.input-row textarea::placeholder { color: var(--fg3); }
-.in-btn { width: 42px; height: 42px; border-radius: var(--radius); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .12s; flex-shrink: 0; }
-.in-btn.send { background: var(--accent2); }
-.in-btn.send:hover { background: var(--accent); }
-.in-btn.send:disabled { opacity: .3; cursor: default; }
-.in-btn.stop { background: var(--red); display: none; }
-.in-btn.stop:hover { background: #da3633; }
-.in-btn.stop.visible { display: flex; }
-.input-hint { display: flex; gap: 14px; margin-top: 6px; font-size: 10px; color: var(--fg3); }
-.input-hint kbd { background: var(--bg3); padding: 1px 4px; border-radius: 3px; font-family: monospace; font-size: 9px; }
-
-/* ── Welcome ── */
-.welcome { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--fg3); gap: 10px; padding: 40px; text-align: center; }
-.welcome .logo { font-size: 44px; margin-bottom: 6px; }
-.welcome h2 { color: var(--fg1); font-size: 20px; }
-.welcome p { max-width: 380px; line-height: 1.5; font-size: 14px; }
-.welcome .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; justify-content: center; }
-.welcome .chip { background: var(--bg3); border: 1px solid var(--bg4); border-radius: 18px; padding: 7px 14px; font-size: 12px; color: var(--fg2); cursor: pointer; transition: all .12s; }
-.welcome .chip:hover { border-color: var(--accent); color: var(--accent); }
-
-/* ── Right Panel ── */
-.right-panel { width: 0; background: var(--bg2); border-left: 1px solid var(--bg4); display: flex; flex-direction: column; flex-shrink: 0; transition: width .2s; overflow: hidden; }
-.right-panel.open { width: 380px; }
-.rp-header { padding: 12px 16px; border-bottom: 1px solid var(--bg4); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
-.rp-header h3 { font-size: 13px; flex: 1; }
-.rp-close { background: none; border: none; color: var(--fg2); cursor: pointer; font-size: 16px; padding: 2px 6px; border-radius: 4px; }
-.rp-close:hover { background: var(--bg3); color: var(--fg1); }
-.rp-tabs { display: flex; border-bottom: 1px solid var(--bg4); flex-shrink: 0; }
-.rp-tabs button { flex: 1; padding: 8px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--fg3); font-size: 11px; cursor: pointer; }
-.rp-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
-.file-tree { flex: 1; overflow-y: auto; padding: 6px; font-size: 13px; }
-.file-tree::-webkit-scrollbar { width: 5px; }
-.file-tree::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }
-.ft-item { padding: 5px 8px; cursor: pointer; border-radius: 4px; color: var(--fg2); display: flex; align-items: center; gap: 6px; font-family: 'SF Mono', monospace; font-size: 12px; }
-.ft-item:hover { background: var(--bg3); color: var(--fg1); }
-.ft-item.dir { color: var(--accent); }
-.ft-item.active { background: rgba(88,166,255,.1); color: var(--accent); }
-.ft-indent { padding-left: 16px; }
-.ft-icon { flex-shrink: 0; font-size: 13px; }
-.ft-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-/* ── File Editor ── */
-.file-editor { display: none; flex-direction: column; border-top: 1px solid var(--bg4); }
-.file-editor.open { display: flex; flex: 1; min-height: 200px; }
-.fe-header { padding: 8px 12px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--bg4); background: var(--bg3); flex-shrink: 0; }
-.fe-path { font-family: 'SF Mono', monospace; font-size: 11px; color: var(--fg2); flex: 1; overflow: hidden; text-overflow: ellipsis; }
-.fe-btn { padding: 4px 10px; border: 1px solid var(--bg4); border-radius: 4px; background: var(--bg3); color: var(--fg2); font-size: 11px; cursor: pointer; }
-.fe-btn:hover { border-color: var(--accent); color: var(--accent); }
-.fe-btn.save { background: var(--accent2); border-color: var(--accent2); color: #fff; }
-.fe-btn.save:hover { background: var(--accent); }
-.fe-content { flex: 1; overflow: auto; }
-.fe-content pre { padding: 10px 12px; margin: 0; font-family: 'SF Mono', monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--fg1); min-height: 100%; }
-.fe-content textarea { width: 100%; height: 100%; padding: 10px 12px; background: var(--bg1); border: none; color: var(--fg1); font-family: 'SF Mono', monospace; font-size: 12px; line-height: 1.5; resize: none; outline: none; }
-
-/* ── Modal ── */
-.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 200; align-items: center; justify-content: center; }
-.modal-overlay.visible { display: flex; }
-.modal { background: var(--bg2); border: 1px solid var(--bg4); border-radius: 12px; width: 480px; max-width: 90vw; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,.5); }
-.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--bg4); display: flex; align-items: center; }
-.modal-header h3 { flex: 1; font-size: 15px; }
-.modal-close { background: none; border: none; color: var(--fg2); cursor: pointer; font-size: 18px; padding: 2px 6px; border-radius: 4px; }
-.modal-close:hover { background: var(--bg3); }
-.modal-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
-.modal-footer { padding: 12px 20px; border-top: 1px solid var(--bg4); display: flex; justify-content: flex-end; gap: 8px; }
-.m-field { margin-bottom: 14px; }
-.m-field label { display: block; font-size: 12px; color: var(--fg2); margin-bottom: 5px; font-weight: 500; }
-.m-field input, .m-field textarea { width: 100%; background: var(--bg1); border: 1px solid var(--bg4); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--fg1); font-size: 13px; outline: none; font-family: inherit; }
-.m-field input:focus, .m-field textarea:focus { border-color: var(--accent); }
-.m-field textarea { min-height: 120px; resize: vertical; font-family: 'SF Mono', monospace; font-size: 12px; }
-.m-field .checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; }
-.m-field .checkbox-group label { display: flex; align-items: center; gap: 4px; background: var(--bg3); padding: 4px 10px; border-radius: 14px; font-size: 12px; cursor: pointer; color: var(--fg2); border: 1px solid var(--bg4); }
-.m-field .checkbox-group label:has(input:checked) { background: rgba(88,166,255,.12); border-color: var(--accent); color: var(--accent); }
-.m-field .checkbox-group input { display: none; }
-.m-btn { padding: 8px 18px; border-radius: var(--radius-sm); border: 1px solid var(--bg4); font-size: 13px; cursor: pointer; font-weight: 500; }
-.m-btn.primary { background: var(--accent2); border-color: var(--accent2); color: #fff; }
-.m-btn.primary:hover { background: var(--accent); }
-.m-btn.secondary { background: var(--bg3); color: var(--fg2); }
-.m-btn.secondary:hover { background: var(--bg4); color: var(--fg1); }
-</style>
-</head>
-<body>
 
-<!-- Sidebar -->
-<div class="sidebar">
-  <div class="sidebar-header">
-    <h1>&#9889; <span>Sapper</span></h1>
-  </div>
-  <div class="sidebar-tabs">
-    <button class="active" onclick="switchTab('sessions')">Sessions</button>
-    <button onclick="switchTab('agents')">Agents</button>
-    <button onclick="switchTab('skills')">Skills</button>
-  </div>
-  <div class="tab-panel active" id="sessionsPanel">
-    <div class="tab-create-btn" onclick="createNewChat()">&#10010; New Chat</div>
-    <div id="sessionList"></div>
-  </div>
-  <div class="tab-panel" id="agentsPanel">
-    <div class="tab-create-btn" onclick="openCreateAgent()">&#10010; Create Agent</div>
-    <div id="agentList"></div>
-  </div>
-  <div class="tab-panel" id="skillsPanel">
-    <div class="tab-create-btn" onclick="openCreateSkill()">&#10010; Create Skill</div>
-    <div id="skillList"></div>
-  </div>
-  <div class="qa-section">
-    <div class="qa-title">Quick Actions</div>
-    <div class="qa-grid">
-      <div class="qa-btn" onclick="qaAction('list')"><span class="qa-icon">&#128194;</span> Browse Dir</div>
-      <div class="qa-btn" onclick="qaAction('read')"><span class="qa-icon">&#128196;</span> Read File</div>
-      <div class="qa-btn" onclick="qaAction('write')"><span class="qa-icon">&#9998;</span> Create File</div>
-      <div class="qa-btn" onclick="qaAction('search')"><span class="qa-icon">&#128269;</span> Search</div>
-      <div class="qa-btn" onclick="qaAction('shell')"><span class="qa-icon">&#9654;</span> Terminal</div>
-      <div class="qa-btn" onclick="qaAction('mkdir')"><span class="qa-icon">&#128193;</span> New Dir</div>
-      <div class="qa-btn" onclick="qaAction('review')"><span class="qa-icon">&#128270;</span> Review</div>
-      <div class="qa-btn" onclick="qaAction('scan')"><span class="qa-icon">&#128202;</span> Scan</div>
-    </div>
-  </div>
-  <div class="sidebar-footer">
-    <div class="sf-row"><span>Model</span><span class="sf-model" id="modelTag">loading...</span></div>
-    <select id="modelSelect" onchange="selectModel()"></select>
-  </div>
-</div>
-
-<!-- Main -->
-<div class="main">
-  <div class="topbar">
-    <div class="status-dot" id="statusDot"></div>
-    <div class="agent-badge" id="agentBadge">Sapper</div>
-    <div class="session-name" id="sessionName" onclick="renameCurrentSession()" title="Click to rename">New Chat</div>
-    <div class="spacer"></div>
-    <div class="cwd" id="cwdDisplay"></div>
-    <button class="tb-btn" onclick="toggleFilePanel()">&#128194; Files</button>
-  </div>
-  <div class="chat" id="chat">
-    <div class="welcome" id="welcome">
-      <div class="logo">&#9889;</div>
-      <h2>Sapper</h2>
-      <p>AI assistant with full filesystem access. Ask anything &mdash; code, write, analyze, build.</p>
-      <div class="chips">
-        <div class="chip" onclick="sendQuick('What files are in this project?')">&#128193; Explore project</div>
-        <div class="chip" onclick="sendQuick('Help me fix bugs in the codebase')">&#128027; Find bugs</div>
-        <div class="chip" onclick="sendQuick('Write a README for this project')">&#128221; Write docs</div>
-        <div class="chip" onclick="sendQuick('What are my tasks for today?')">&#128203; Today tasks</div>
-      </div>
-    </div>
-  </div>
-  <div class="input-area">
-    <div class="input-row">
-      <textarea id="input" placeholder="Message Sapper..." rows="1" onkeydown="handleKey(event)" oninput="autoResize(this)"></textarea>
-      <button class="in-btn send" id="sendBtn" onclick="send()" title="Send">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
-      </button>
-      <button class="in-btn stop" id="stopBtn" onclick="stopGeneration()" title="Stop">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="2"/></svg>
-      </button>
-    </div>
-    <div class="input-hint">
-      <span><kbd>Enter</kbd> send</span>
-      <span><kbd>Shift+Enter</kbd> new line</span>
-    </div>
-  </div>
-</div>
+window.collapseAll = function() {
+  state.expanded = {};
+  loadTree();
+};
 
-<!-- Right Panel -->
-<div class="right-panel" id="rightPanel">
-  <div class="rp-header">
-    <h3>&#128194; Files</h3>
-    <button class="rp-close" onclick="toggleFilePanel()">&#10005;</button>
-  </div>
-  <div class="file-tree" id="fileTree"></div>
-  <div class="file-editor" id="fileEditor">
-    <div class="fe-header">
-      <span class="fe-path" id="fePath"></span>
-      <button class="fe-btn" id="feEditBtn" onclick="startEditing()">Edit</button>
-      <button class="fe-btn save" id="feSaveBtn" onclick="saveFileEdit()" style="display:none">Save</button>
-      <button class="fe-btn" id="feCancelBtn" onclick="cancelEdit()" style="display:none">Cancel</button>
-    </div>
-    <div class="fe-content" id="feContent"></div>
-  </div>
-</div>
+// ─── Context menu + file actions ─────────────────────────────
+function closeCtxMenu() {
+  var m = document.getElementById('ctxMenu');
+  if (m) m.remove();
+  document.querySelectorAll('.rmenu.open').forEach(function(e){ e.classList.remove('open'); });
+}
 
-<!-- Modal -->
-<div class="modal-overlay" id="modalOverlay">
-  <div class="modal">
-    <div class="modal-header">
-      <h3 id="modalTitle">Modal</h3>
-      <button class="modal-close" onclick="closeModal()">&#10005;</button>
-    </div>
-    <div class="modal-body" id="modalBody"></div>
-    <div class="modal-footer" id="modalFooter"></div>
-  </div>
-</div>
+document.addEventListener('click', function(e){
+  if (e.target.closest && e.target.closest('#ctxMenu')) return;
+  closeCtxMenu();
+});
+document.addEventListener('keydown', function(e){
+  if (e.key === 'Escape') closeCtxMenu();
+});
 
-<script>
-// ─── State ─────────────────────────────────────────────────
-var currentModel = '';
-var currentAgent = null;
-var currentAgentKey = null;
-var currentSessionId = null;
-var currentSessionName = 'New Chat';
-var isStreaming = false;
-var editingFilePath = null;
-var editMode = false;
-var BT = String.fromCharCode(96);
-var NL = String.fromCharCode(10);
-var chatEl = document.getElementById('chat');
-var inputEl = document.getElementById('input');
-var welcomeEl = document.getElementById('welcome');
-
-// ─── Init ──────────────────────────────────────────────────
-function init() {
-  Promise.all([
-    fetch('/api/models').then(function(r){return r.json();}),
-    fetch('/api/agents').then(function(r){return r.json();}),
-    fetch('/api/info').then(function(r){return r.json();}),
-    fetch('/api/sessions').then(function(r){return r.json();}),
-    fetch('/api/skills').then(function(r){return r.json();})
-  ]).then(function(results) {
-    var modelsRes = results[0], agentsRes = results[1], infoRes = results[2], sessionsRes = results[3], skillsRes = results[4];
-    var sel = document.getElementById('modelSelect');
-    sel.innerHTML = '';
-    for (var i = 0; i < modelsRes.models.length; i++) {
-      var opt = document.createElement('option');
-      opt.value = modelsRes.models[i]; opt.textContent = modelsRes.models[i];
-      sel.appendChild(opt);
-    }
-    if (modelsRes.models.length > 0) {
-      currentModel = modelsRes.models[0];
-      document.getElementById('modelTag').textContent = shortModel(currentModel);
-    }
-    renderAgentList(agentsRes.agents);
-    renderSkillList(skillsRes.skills);
-    renderSessionList(sessionsRes.sessions);
-    document.getElementById('cwdDisplay').textContent = infoRes.cwd;
-    inputEl.focus();
+function openRowMenu(anchor, path, isDir) {
+  closeCtxMenu();
+  var rect = anchor.getBoundingClientRect();
+  if (anchor.classList) anchor.classList.add('open');
+  var menu = document.createElement('div');
+  menu.id = 'ctxMenu';
+  menu.className = 'ctx-menu';
+  var items = [];
+  if (isDir) {
+    items.push({ label: '&#128462; New file inside', fn: function(){ newItemPrompt('file', path); } });
+    items.push({ label: '&#128193; New folder inside', fn: function(){ newItemPrompt('folder', path); } });
+    items.push({ sep: true });
+    items.push({ label: 'Expand / Collapse', fn: function(){
+      var row = document.querySelector('.row[data-path="' + cssEscape(path) + '"]');
+      if (row) toggleDir(row, path);
+    }});
+  } else {
+    items.push({ label: 'Open', fn: function(){ openFile(path); } });
+  }
+  items.push({ sep: true });
+  items.push({ label: 'Rename\u2026', fn: function(){ renamePrompt(path); } });
+  items.push({ label: 'Duplicate', fn: function(){ duplicateItem(path); } });
+  items.push({ label: 'Copy path', fn: function(){ copyText(path); showToast('Path copied'); } });
+  items.push({ label: 'Copy name', fn: function(){ copyText(path.split('/').pop()); showToast('Name copied'); } });
+  items.push({ sep: true });
+  items.push({ label: 'Reveal in Finder', fn: function(){
+    fetch('/api/fs/reveal', { method: 'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ path: path }) });
+  }});
+  if (!isDir) {
+    items.push({ label: 'Send path to terminal', fn: function(){ sendCmd(path); } });
+    items.push({ label: 'Use as preview', fn: function(){ openFile(path); } });
+  }
+  items.push({ sep: true });
+  items.push({ label: 'Delete (move to .sapper/.trash)', danger: true, fn: function(){ deleteItem(path, false); } });
+
+  items.forEach(function(it){
+    if (it.sep) { var s = document.createElement('div'); s.className = 'sep'; menu.appendChild(s); return; }
+    var el = document.createElement('div');
+    el.className = 'ci' + (it.danger ? ' danger' : '');
+    el.innerHTML = '<span>' + it.label + '</span>';
+    el.addEventListener('click', function(e){ e.stopPropagation(); closeCtxMenu(); it.fn(); });
+    menu.appendChild(el);
   });
-}
 
-function shortModel(m) { return m.split(':')[0].substring(0, 18); }
-
-// ─── Tab Switching ─────────────────────────────────────────
-function switchTab(name) {
-  var tabs = document.querySelectorAll('.sidebar-tabs button');
-  var panels = document.querySelectorAll('.tab-panel');
-  for (var i = 0; i < tabs.length; i++) { tabs[i].classList.remove('active'); }
-  for (var i = 0; i < panels.length; i++) { panels[i].classList.remove('active'); }
-  document.getElementById(name + 'Panel').classList.add('active');
-  var tabNames = ['sessions', 'agents', 'skills'];
-  for (var i = 0; i < tabNames.length; i++) {
-    if (tabNames[i] === name) tabs[i].classList.add('active');
+  document.body.appendChild(menu);
+  // Position
+  var mw = menu.offsetWidth, mh = menu.offsetHeight;
+  var x = rect.right + 4, y = rect.top;
+  if (x + mw > window.innerWidth - 8) x = Math.max(8, rect.left - mw - 4);
+  if (y + mh > window.innerHeight - 8) y = Math.max(8, window.innerHeight - mh - 8);
+  menu.style.left = x + 'px';
+  menu.style.top = y + 'px';
+}
+
+function copyText(t) {
+  try { navigator.clipboard.writeText(t); }
+  catch(e) {
+    var ta = document.createElement('textarea');
+    ta.value = t; document.body.appendChild(ta); ta.select();
+    try { document.execCommand('copy'); } catch(_){}
+    ta.remove();
   }
-  if (name === 'sessions') refreshSessions();
-  if (name === 'agents') refreshAgents();
-  if (name === 'skills') refreshSkills();
 }
 
-// ─── Sessions ──────────────────────────────────────────────
-function renderSessionList(sessions) {
-  var el = document.getElementById('sessionList');
-  el.innerHTML = '';
-  for (var i = 0; i < sessions.length; i++) {
-    var s = sessions[i];
-    var item = document.createElement('div');
-    item.className = 's-item' + (s.id === currentSessionId ? ' active' : '');
-    item.innerHTML = '<span class="s-icon">&#128172;</span>' +
-      '<span class="s-label">' + esc(s.name) + '</span>' +
-      '<span class="s-meta">' + s.msgCount + '</span>' +
-      '<button class="s-del" onclick="event.stopPropagation(); deleteSession(&apos;' + esc(s.id) + '&apos;)" title="Delete">&#10005;</button>';
-    item.setAttribute('data-id', s.id);
-    item.onclick = (function(sid) { return function() { loadSessionById(sid); }; })(s.id);
-    el.appendChild(item);
-  }
-}
-function refreshSessions() {
-  fetch('/api/sessions').then(function(r){return r.json();}).then(function(d){renderSessionList(d.sessions);});
-}
-function createNewChat() {
-  currentSessionId = null;
-  currentSessionName = 'New Chat';
-  document.getElementById('sessionName').textContent = 'New Chat';
-  chatEl.innerHTML = '';
-  chatEl.appendChild(welcomeEl);
-  welcomeEl.style.display = 'flex';
-  fetch('/api/clear', {method: 'POST'});
-  refreshSessions();
-}
-function loadSessionById(id) {
-  fetch('/api/sessions/load', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({id:id})})
-  .then(function(r){return r.json();}).then(function(d) {
-    if (!d.session) return;
-    currentSessionId = id;
-    currentSessionName = d.session.name || 'Chat';
-    document.getElementById('sessionName').textContent = currentSessionName;
-    if (d.session.model) {
-      currentModel = d.session.model;
-      document.getElementById('modelSelect').value = currentModel;
-      document.getElementById('modelTag').textContent = shortModel(currentModel);
+// ─── Modal prompt ─────────────────────────────────────────────
+function showModal(opts) {
+  return new Promise(function(resolve){
+    var bd = document.createElement('div'); bd.className = 'modal-bd';
+    var html = '<div class="modal"><h3>' + esc(opts.title) + '</h3>';
+    if (opts.label) html += '<label>' + esc(opts.label) + '</label>';
+    if (opts.input !== false) {
+      html += '<input type="text" id="mdInput" value="' + esc(opts.value || '') + '" placeholder="' + esc(opts.placeholder || '') + '">';
     }
-    chatEl.innerHTML = '';
-    chatEl.appendChild(welcomeEl);
-    welcomeEl.style.display = 'none';
-    var msgs = d.session.messages || [];
-    for (var i = 0; i < msgs.length; i++) {
-      var m = msgs[i];
-      if (m.role === 'system') continue;
-      if (m.role === 'user' && m.content.indexOf('RESULT (') === 0) continue;
-      if (m.role === 'user' && m.content === 'STOP using tools. Provide your answer now with what you have.') continue;
-      if (m.role === 'user') addMsg('user', m.content);
-      else if (m.role === 'assistant') {
-        var el = addMsg('ai', '');
-        el.innerHTML = renderFullMessage(stripToolSyntax(m.content));
+    if (opts.hint) html += '<div class="hint">' + esc(opts.hint) + '</div>';
+    html += '<div class="actions">' +
+      '<button id="mdCancel">' + (opts.cancelLabel || 'Cancel') + '</button>' +
+      '<button id="mdOk" class="' + (opts.danger ? 'danger' : 'primary') + '">' + (opts.okLabel || 'OK') + '</button>' +
+      '</div></div>';
+    bd.innerHTML = html;
+    document.body.appendChild(bd);
+    var input = bd.querySelector('#mdInput');
+    var ok = function(){ var v = input ? input.value : ''; bd.remove(); resolve(v); };
+    var cancel = function(){ bd.remove(); resolve(null); };
+    bd.querySelector('#mdOk').addEventListener('click', ok);
+    bd.querySelector('#mdCancel').addEventListener('click', cancel);
+    bd.addEventListener('click', function(e){ if (e.target === bd) cancel(); });
+    if (input) {
+      input.focus();
+      // Select stem (before last dot) for renames
+      if (opts.selectStem && input.value) {
+        var dot = input.value.lastIndexOf('.');
+        if (dot > 0) input.setSelectionRange(0, dot);
+        else input.select();
+      } else if (input.value) {
+        input.select();
       }
+      input.addEventListener('keydown', function(e){
+        if (e.key === 'Enter') ok();
+        if (e.key === 'Escape') cancel();
+      });
     }
-    scrollDown();
-    refreshSessions();
   });
 }
-function deleteSession(id) {
-  fetch('/api/sessions/delete', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({id:id})})
-  .then(function() {
-    if (currentSessionId === id) createNewChat();
-    refreshSessions();
+
+window.newItemPrompt = async function(kind, parentDir) {
+  var defPath = parentDir ? (parentDir + '/') : '';
+  var v = await showModal({
+    title: kind === 'folder' ? 'New folder' : 'New file',
+    label: 'Path (relative to workspace)',
+    value: defPath,
+    placeholder: kind === 'folder' ? 'src/utils' : 'src/index.ts',
+    hint: 'Use "/" for subdirectories. Intermediate folders are created automatically.',
+    okLabel: 'Create',
   });
-}
-function autoSaveSession() {
-  if (!currentSessionId) currentSessionId = 'session_' + Date.now();
-  if (currentSessionName === 'New Chat') {
-    var firstUser = null;
-    var msgs = chatEl.querySelectorAll('.msg.user');
-    if (msgs.length > 0) firstUser = msgs[0].textContent;
-    if (firstUser) currentSessionName = firstUser.substring(0, 50);
-    document.getElementById('sessionName').textContent = currentSessionName;
-  }
-  fetch('/api/sessions/save', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({id: currentSessionId, name: currentSessionName})});
-}
-function renameCurrentSession() {
-  if (!currentSessionId) return;
-  showPromptModal('Rename Session', 'Session name', currentSessionName, function(val) {
-    if (!val) return;
-    currentSessionName = val;
-    document.getElementById('sessionName').textContent = val;
-    fetch('/api/sessions/rename', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({id: currentSessionId, name: val})})
-    .then(function() { refreshSessions(); });
+  if (v == null) return;
+  v = v.replace(/^[\\/]+/, '').trim();
+  if (!v) return;
+  var r = await fetch('/api/fs/new', {
+    method: 'POST', headers: {'Content-Type':'application/json'},
+    body: JSON.stringify({ path: v, kind: kind })
   });
-}
+  var d = await r.json();
+  if (d.error) { showToast('Create failed: ' + d.error, 'err'); return; }
+  showToast(kind === 'folder' ? 'Folder created' : 'File created');
+  // expand parent + refresh
+  if (parentDir) state.expanded[parentDir] = true;
+  loadTree();
+  if (kind === 'file') setTimeout(function(){ openFile(v); }, 200);
+};
 
-// ─── Agents ────────────────────────────────────────────────
-function renderAgentList(agents) {
-  var el = document.getElementById('agentList');
-  el.innerHTML = '';
-  var defItem = document.createElement('div');
-  defItem.className = 's-item' + (!currentAgentKey ? ' active' : '');
-  defItem.innerHTML = '<span class="s-icon">&#9889;</span><span class="s-label">Sapper</span><span class="s-meta">default</span>';
-  defItem.onclick = function() { switchAgent(null, 'Sapper'); };
-  el.appendChild(defItem);
-  var keys = Object.keys(agents);
-  for (var i = 0; i < keys.length; i++) {
-    var k = keys[i], a = agents[k];
-    var item = document.createElement('div');
-    item.className = 's-item' + (currentAgentKey === k ? ' active' : '');
-    item.innerHTML = '<span class="s-icon">&#129302;</span>' +
-      '<span class="s-label">' + esc(a.name) + '</span>' +
-      '<button class="s-del" onclick="event.stopPropagation(); deleteAgent(&apos;' + esc(k) + '&apos;)" title="Delete">&#10005;</button>';
-    item.title = a.description || '';
-    item.onclick = (function(key, name) { return function() { switchAgent(key, name); }; })(k, a.name);
-    el.appendChild(item);
-  }
-}
-function refreshAgents() {
-  fetch('/api/agents').then(function(r){return r.json();}).then(function(d){renderAgentList(d.agents);});
-}
-function switchAgent(key, name) {
-  currentAgentKey = key;
-  currentAgent = key;
-  document.getElementById('agentBadge').textContent = name;
-  fetch('/api/agent', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({agent: key})});
-  addSystem('Switched to ' + name);
-  refreshAgents();
-}
-function deleteAgent(key) {
-  if (!confirm('Delete agent "' + key + '"?')) return;
-  fetch('/api/agents/delete', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({key: key})})
-  .then(function() {
-    if (currentAgentKey === key) switchAgent(null, 'Sapper');
-    refreshAgents();
+async function renamePrompt(path) {
+  var name = path.split('/').pop();
+  var parent = path.split('/').slice(0, -1).join('/');
+  var v = await showModal({
+    title: 'Rename',
+    label: 'New name',
+    value: name,
+    selectStem: true,
+    okLabel: 'Rename',
   });
+  if (v == null) return;
+  v = v.trim();
+  if (!v || v === name) return;
+  var to = parent ? (parent + '/' + v) : v;
+  var r = await fetch('/api/fs/rename', {
+    method: 'POST', headers: {'Content-Type':'application/json'},
+    body: JSON.stringify({ from: path, to: to })
+  });
+  var d = await r.json();
+  if (d.error) { showToast('Rename failed: ' + d.error, 'err'); return; }
+  showToast('Renamed');
+  if (state.currentFile === path) state.currentFile = to;
+  loadTree();
 }
-function openCreateAgent() {
-  var allTools = ['read', 'write', 'patch', 'list', 'search', 'shell', 'mkdir'];
-  var body = '<div class="m-field"><label>Agent Name</label><input id="maName" placeholder="e.g. Code Reviewer"></div>' +
-    '<div class="m-field"><label>Description</label><input id="maDesc" placeholder="What does this agent do?"></div>' +
-    '<div class="m-field"><label>Allowed Tools</label><div class="checkbox-group" id="maTools">';
-  for (var i = 0; i < allTools.length; i++) {
-    body += '<label><input type="checkbox" value="' + allTools[i] + '" checked> ' + allTools[i].toUpperCase() + '</label>';
-  }
-  body += '</div></div>' +
-    '<div class="m-field"><label>Agent Instructions (Markdown)</label><textarea id="maContent" placeholder="# Agent Name' + NL + NL + 'Instructions for the agent..."></textarea></div>';
-  showModal('Create Agent', body,
-    '<button class="m-btn secondary" onclick="closeModal()">Cancel</button>' +
-    '<button class="m-btn primary" onclick="submitCreateAgent()">Create</button>');
-}
-function submitCreateAgent() {
-  var name = document.getElementById('maName').value.trim();
-  var desc = document.getElementById('maDesc').value.trim();
-  var content = document.getElementById('maContent').value;
-  if (!name) { alert('Name is required'); return; }
-  var checkboxes = document.querySelectorAll('#maTools input:checked');
-  var tools = [];
-  for (var i = 0; i < checkboxes.length; i++) tools.push(checkboxes[i].value);
-  fetch('/api/agents/create', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({name:name, description:desc, tools:tools, content:content})})
-  .then(function(r){return r.json();}).then(function() { closeModal(); refreshAgents(); });
-}
-
-// ─── Skills ────────────────────────────────────────────────
-function renderSkillList(skills) {
-  var el = document.getElementById('skillList');
-  el.innerHTML = '';
-  var keys = Object.keys(skills);
-  if (keys.length === 0) {
-    el.innerHTML = '<div style="padding:12px;color:var(--fg3);font-size:12px;">No skills yet</div>';
-    return;
-  }
-  for (var i = 0; i < keys.length; i++) {
-    var k = keys[i], s = skills[k];
-    var item = document.createElement('div');
-    item.className = 's-item';
-    item.innerHTML = '<span class="s-icon">&#128218;</span>' +
-      '<span class="s-label">' + esc(s.name) + '</span>' +
-      '<button class="s-del" onclick="event.stopPropagation(); deleteSkill(&apos;' + esc(k) + '&apos;)" title="Delete">&#10005;</button>';
-    item.title = s.description || '';
-    el.appendChild(item);
-  }
-}
-function refreshSkills() {
-  fetch('/api/skills').then(function(r){return r.json();}).then(function(d){renderSkillList(d.skills);});
-}
-function deleteSkill(key) {
-  if (!confirm('Delete skill "' + key + '"?')) return;
-  fetch('/api/skills/delete', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({key: key})})
-  .then(function() { refreshSkills(); });
-}
-function openCreateSkill() {
-  var body = '<div class="m-field"><label>Skill Name</label><input id="msName" placeholder="e.g. Testing"></div>' +
-    '<div class="m-field"><label>Description</label><input id="msDesc" placeholder="What does this skill teach?"></div>' +
-    '<div class="m-field"><label>Skill Content (Markdown)</label><textarea id="msContent" placeholder="# Skill Name' + NL + NL + 'Knowledge and instructions..."></textarea></div>';
-  showModal('Create Skill', body,
-    '<button class="m-btn secondary" onclick="closeModal()">Cancel</button>' +
-    '<button class="m-btn primary" onclick="submitCreateSkill()">Create</button>');
-}
-function submitCreateSkill() {
-  var name = document.getElementById('msName').value.trim();
-  var desc = document.getElementById('msDesc').value.trim();
-  var content = document.getElementById('msContent').value;
-  if (!name) { alert('Name is required'); return; }
-  fetch('/api/skills/create', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({name:name, description:desc, content:content})})
-  .then(function(r){return r.json();}).then(function() { closeModal(); refreshSkills(); });
-}
-
-// ─── Model ─────────────────────────────────────────────────
-function selectModel() {
-  currentModel = document.getElementById('modelSelect').value;
-  document.getElementById('modelTag').textContent = shortModel(currentModel);
-  fetch('/api/model', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({model: currentModel})});
-  addSystem('Model: ' + currentModel);
-}
-
-// ─── Chat ──────────────────────────────────────────────────
-function handleKey(e) {
-  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
-}
-function autoResize(el) {
-  el.style.height = 'auto';
-  el.style.height = Math.min(el.scrollHeight, 150) + 'px';
-}
-function send(text) {
-  var msg = text || inputEl.value.trim();
-  if (!msg || isStreaming) return;
-  inputEl.value = ''; inputEl.style.height = 'auto';
-  welcomeEl.style.display = 'none';
-  addMsg('user', msg);
-  isStreaming = true;
-  document.getElementById('sendBtn').disabled = true;
-  document.getElementById('stopBtn').classList.add('visible');
-  document.getElementById('statusDot').style.background = 'var(--orange)';
-
-  // Container holds all AI rounds + tool cards for this exchange
-  var container = document.createElement('div');
-  container.className = 'ai-exchange';
-  chatEl.appendChild(container);
-
-  var dots = document.createElement('div');
-  dots.className = 'thinking-dots';
-  dots.innerHTML = '<span></span><span></span><span></span>';
-  container.appendChild(dots);
-
-  fetch('/api/chat', {
-    method: 'POST',
-    headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify({message: msg})
-  }).then(function(res) {
-    var reader = res.body.getReader();
-    var decoder = new TextDecoder();
-    var buffer = '';
-    var removedDots = false;
-
-    // Track current AI text segment
-    var currentTextEl = null;
-    var currentText = '';
-    var renderTimer = null;
-    var thinkEl = null;
-    var thinkTextEl = null;
-    var inThink = false;
-    var thinkContent = '';
-    var doneThinkContent = '';
-    var lastRenderTime = 0;
-
-    function ensureTextEl() {
-      if (!currentTextEl) {
-        currentTextEl = document.createElement('div');
-        currentTextEl.className = 'msg ai';
-        container.appendChild(currentTextEl);
-        currentText = '';
-      }
-    }
 
-    function renderCurrentText() {
-      if (!currentTextEl) return;
-      var cleaned = stripToolSyntax(doneThinkContent + currentText);
-      if (cleaned) currentTextEl.innerHTML = renderMarkdown(cleaned);
-      lastRenderTime = Date.now();
+async function duplicateItem(path) {
+  var r = await fetch('/api/fs/duplicate', {
+    method: 'POST', headers: {'Content-Type':'application/json'},
+    body: JSON.stringify({ from: path })
+  });
+  var d = await r.json();
+  if (d.error) { showToast('Duplicate failed: ' + d.error, 'err'); return; }
+  showToast('Duplicated to ' + d.path);
+  loadTree();
+}
+
+async function deleteItem(path, hard) {
+  var v = await showModal({
+    title: 'Delete?',
+    label: path,
+    input: false,
+    hint: hard ? 'This permanently removes the item. This cannot be undone.'
+               : 'Item will be moved to .sapper/.trash/ so you can restore it manually.',
+    okLabel: 'Delete',
+    danger: true,
+  });
+  if (v == null) return;
+  var r = await fetch('/api/fs/delete', {
+    method: 'POST', headers: {'Content-Type':'application/json'},
+    body: JSON.stringify({ path: path, hard: !!hard })
+  });
+  var d = await r.json();
+  if (d.error) { showToast('Delete failed: ' + d.error, 'err'); return; }
+  showToast('Deleted');
+  if (state.currentFile === path) closePreview();
+  loadTree();
+}
+
+// ─── Preview / editor ────────────────────────────────────────
+function isTextLikeExt(ext) {
+  return /^(md|markdown|txt|json|jsonc|yml|yaml|toml|js|mjs|cjs|ts|tsx|jsx|css|scss|html|htm|xml|py|rb|go|rs|java|c|cpp|h|hpp|sh|bash|zsh|fish|env|gitignore|conf|ini|sql|graphql|svelte|vue|astro|lock|log)$/i.test(ext);
+}
+
+window.openFile = function(path, isReload) {
+  // Ensure preview is open
+  var prev = document.getElementById('preview');
+  if (prev.classList.contains('hidden')) togglePreview();
+  // Mark active row
+  document.querySelectorAll('.row.active').forEach(function(r){ r.classList.remove('active'); });
+  var row = document.querySelector('.row[data-path="' + cssEscape(path) + '"]');
+  if (row) row.classList.add('active');
+  // Clear any pending change-mark for this file since the user is acknowledging it
+  if (!isReload && state.marks[path]) clearMark(path);
+
+  state.currentFile = path;
+  state.editing = false;
+  state.showSource = false;
+  document.getElementById('pPath').textContent = path;
+  document.getElementById('pInd').classList.remove('show');
+  document.getElementById('pEdit').style.display = 'none';
+  document.getElementById('pSave').style.display = 'none';
+  document.getElementById('pCancel').style.display = 'none';
+  document.getElementById('pSrc').style.display = 'none';
+  document.getElementById('pReload').style.display = 'inline-block';
+  document.getElementById('pedit').classList.remove('show');
+  document.getElementById('pview').classList.remove('hide');
+
+  fetch('/api/file?path=' + encodeURIComponent(path)).then(function(r){return r.json();}).then(function(d){
+    if (d.error) {
+      document.getElementById('pview').innerHTML = '<div id="empty"><div class="lg">&#9888;</div>' + esc(d.error) + '</div>';
+      document.getElementById('pview').className = '';
+      return;
     }
-
-    function scheduleRender() {
-      var now = Date.now();
-      if (now - lastRenderTime > 80) {
-        renderCurrentText();
-      } else if (!renderTimer) {
-        renderTimer = setTimeout(function() { renderTimer = null; renderCurrentText(); }, 80);
+    state.fileOnDisk = d.content || '';
+    var ext = (path.split('.').pop() || '').toLowerCase();
+    var view = document.getElementById('pview');
+    if (d.binary) {
+      view.className = '';
+      if (/^(png|jpe?g|gif|webp|svg|bmp|ico)$/i.test(ext)) {
+        view.innerHTML = '<img src="/api/file/raw?path=' + encodeURIComponent(path) + '" alt="' + esc(path) + '">';
+      } else {
+        view.innerHTML = '<div id="empty"><div class="lg">&#128190;</div>Binary file (' + d.size + ' bytes)</div>';
+      }
+      document.getElementById('pEdit').style.display = 'none';
+    } else if (ext === 'md' || ext === 'markdown') {
+      view.className = '';
+      try {
+        marked.setOptions({ breaks: false, gfm: true });
+        view.innerHTML = marked.parse(d.content || '');
+        view.querySelectorAll('pre code').forEach(function(b){ try { hljs.highlightElement(b); } catch(e){} });
+      } catch(e) {
+        view.innerHTML = '<pre>' + esc(d.content || '') + '</pre>';
       }
+      document.getElementById('pEdit').style.display = 'inline-block';
+    } else if (ext === 'html' || ext === 'htm') {
+      renderHtmlPreview(d.content || '');
+      document.getElementById('pEdit').style.display = 'inline-block';
+      document.getElementById('pSrc').style.display = 'inline-block';
+      document.getElementById('pSrc').textContent = 'Source';
+    } else if (isTextLikeExt(ext) || d.text) {
+      view.className = 'code';
+      var langClass = ext ? ' class="language-' + esc(ext) + '"' : '';
+      view.innerHTML = '<pre><code' + langClass + '>' + esc(d.content || '') + '</code></pre>';
+      try { hljs.highlightElement(view.querySelector('code')); } catch(e){}
+      document.getElementById('pEdit').style.display = 'inline-block';
+    } else {
+      view.className = '';
+      view.innerHTML = '<pre>' + esc(d.content || '') + '</pre>';
+      document.getElementById('pEdit').style.display = 'inline-block';
     }
+    if (isReload) showToast('Reloaded ' + path);
+  }).catch(function(e){ showToast('Read failed: ' + e.message, 'err'); });
+};
 
-    function startThinkBlock() {
-      if (thinkEl) return;
-      inThink = true;
-      thinkContent = '';
-      thinkEl = document.createElement('div');
-      thinkEl.className = 'think-block open streaming';
-      thinkEl.innerHTML = '<div class="think-header" onclick="this.parentElement.classList.toggle(&apos;open&apos;)">' +
-        '<span class="think-chevron">&#9654;</span>' +
-        '<span class="think-label">&#129504; Thinking...</span></div>' +
-        '<div class="think-content"></div>';
-      container.appendChild(thinkEl);
-      thinkTextEl = thinkEl.querySelector('.think-content');
-    }
+function renderHtmlPreview(content) {
+  var view = document.getElementById('pview');
+  view.className = '';
+  view.innerHTML = '';
+  var iframe = document.createElement('iframe');
+  iframe.className = 'html-preview';
+  iframe.setAttribute('sandbox', 'allow-same-origin allow-popups');
+  iframe.srcdoc = content;
+  view.appendChild(iframe);
+}
+
+function renderHtmlSource(content) {
+  var view = document.getElementById('pview');
+  view.className = 'code';
+  view.innerHTML = '<pre><code class="language-html">' + esc(content) + '</code></pre>';
+  try { hljs.highlightElement(view.querySelector('code')); } catch(e){}
+}
+
+window.toggleSource = function() {
+  if (!state.currentFile) return;
+  state.showSource = !state.showSource;
+  var btn = document.getElementById('pSrc');
+  if (state.showSource) {
+    renderHtmlSource(state.fileOnDisk || '');
+    btn.textContent = 'Rendered';
+  } else {
+    renderHtmlPreview(state.fileOnDisk || '');
+    btn.textContent = 'Source';
+  }
+};
 
-    function updateThinkBlock(text) {
-      if (thinkTextEl) thinkTextEl.innerHTML = renderMarkdown(text);
-    }
+window.reloadPreview = function() { if (state.currentFile) openFile(state.currentFile, true); };
+window.closePreview = function() {
+  state.currentFile = null; state.editing = false;
+  document.getElementById('pview').innerHTML = '<div id="empty"><div class="lg">&#128196;</div>Open a file from the sidebar.</div>';
+  document.getElementById('pview').className = '';
+  document.getElementById('pPath').textContent = 'No file open';
+  document.getElementById('pEdit').style.display = 'none';
+  document.getElementById('pSave').style.display = 'none';
+  document.getElementById('pCancel').style.display = 'none';
+  document.getElementById('pSrc').style.display = 'none';
+  document.getElementById('pReload').style.display = 'none';
+  document.getElementById('pedit').classList.remove('show');
+  document.getElementById('pview').classList.remove('hide');
+};
+window.startEdit = function() {
+  if (!state.currentFile) return;
+  state.editing = true;
+  document.getElementById('pedit').value = state.fileOnDisk;
+  document.getElementById('pedit').classList.add('show');
+  document.getElementById('pview').classList.add('hide');
+  document.getElementById('pEdit').style.display = 'none';
+  document.getElementById('pSave').style.display = 'inline-block';
+  document.getElementById('pCancel').style.display = 'inline-block';
+};
+window.cancelEdit = function() {
+  state.editing = false;
+  document.getElementById('pedit').classList.remove('show');
+  document.getElementById('pview').classList.remove('hide');
+  document.getElementById('pEdit').style.display = 'inline-block';
+  document.getElementById('pSave').style.display = 'none';
+  document.getElementById('pCancel').style.display = 'none';
+  document.getElementById('pInd').classList.remove('show');
+};
+window.saveEdit = function() {
+  if (!state.currentFile) return;
+  var content = document.getElementById('pedit').value;
+  fetch('/api/file', {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ path: state.currentFile, content: content })
+  }).then(function(r){return r.json();}).then(function(d){
+    if (d.error) { showToast('Save failed: ' + d.error, 'err'); return; }
+    showToast('Saved ' + state.currentFile);
+    state.editing = false;
+    openFile(state.currentFile, false);
+  }).catch(function(e){ showToast('Save failed: ' + e.message, 'err'); });
+};
 
-    function endThinkBlock() {
-      if (thinkEl) {
-        thinkEl.classList.remove('streaming', 'open');
-        thinkEl.querySelector('.think-label').innerHTML = '&#129504; Thinking (done)';
-        updateThinkBlock(thinkContent);
-      }
-      inThink = false;
-      thinkEl = null;
-      thinkTextEl = null;
-    }
+// ─── Config tab ──────────────────────────────────────────────
+window.reloadConfig = function() {
+  fetch('/api/config').then(function(r){return r.json();}).then(function(d){
+    document.getElementById('cfgJson').value = JSON.stringify(d.config || {}, null, 2);
+    renderQuickConfig(d.config || {});
+  }).catch(function(e){ showToast('Config read failed: ' + e.message, 'err'); });
+};
+window.saveConfig = function() {
+  var raw = document.getElementById('cfgJson').value;
+  var parsed;
+  try { parsed = JSON.parse(raw); }
+  catch(e) { showToast('Invalid JSON: ' + e.message, 'err'); return; }
+  fetch('/api/config', {
+    method: 'POST', headers: {'Content-Type':'application/json'},
+    body: JSON.stringify({ config: parsed })
+  }).then(function(r){return r.json();}).then(function(d){
+    if (d.error) { showToast('Save failed: ' + d.error, 'err'); return; }
+    showToast('Config saved');
+    renderQuickConfig(parsed);
+  });
+};
 
-    function processToken(token) {
-      // Handle <think> and </think> tags that may come split across tokens
-      var remaining = token;
-      while (remaining.length > 0) {
-        if (inThink) {
-          var closeIdx = remaining.indexOf('</think>');
-          if (closeIdx !== -1) {
-            thinkContent += remaining.substring(0, closeIdx);
-            endThinkBlock();
-            remaining = remaining.substring(closeIdx + 8);
-            // Reset text element for content after thinking
-            currentTextEl = null;
-          } else {
-            // Check for partial </think> at end
-            var partial = false;
-            for (var pLen = 1; pLen < 8 && pLen <= remaining.length; pLen++) {
-              if ('</think>'.indexOf(remaining.substring(remaining.length - pLen)) === 0) {
-                thinkContent += remaining.substring(0, remaining.length - pLen);
-                remaining = remaining.substring(remaining.length - pLen);
-                partial = true;
-                break;
-              }
-            }
-            if (!partial) {
-              thinkContent += remaining;
-              remaining = '';
-            } else {
-              // Buffer partial tag, will resolve on next token
-              thinkContent += remaining;
-              remaining = '';
-            }
-            if (thinkContent.length > 0 && Date.now() - lastRenderTime > 120) {
-              updateThinkBlock(thinkContent);
-              lastRenderTime = Date.now();
-            }
-          }
-        } else {
-          var openIdx = remaining.indexOf('<think>');
-          if (openIdx !== -1) {
-            var before = remaining.substring(0, openIdx);
-            if (before.length > 0) {
-              ensureTextEl();
-              currentText += before;
-              scheduleRender();
-            }
-            // Save what we have so far as done text
-            if (currentText.length > 0) {
-              renderCurrentText();
-              doneThinkContent += currentText;
-              currentText = '';
-              currentTextEl = null;
-            }
-            startThinkBlock();
-            remaining = remaining.substring(openIdx + 7);
-          } else {
-            ensureTextEl();
-            currentText += remaining;
-            scheduleRender();
-            remaining = '';
-          }
-        }
-      }
-    }
+function renderQuickConfig(cfg) {
+  var host = document.getElementById('cfgQuickBody');
+  host.innerHTML = '';
+  function add(html) { host.insertAdjacentHTML('beforeend', html); }
+  add('<label>Default model</label><input type="text" id="qDefMod" placeholder="auto" value="' + esc(cfg.defaultModel || '') + '">');
+  add('<label>Default agent</label><input type="text" id="qDefAgent" placeholder="(none)" value="' + esc(cfg.defaultAgent || '') + '">');
+  add('<label>Context limit (tokens, blank = model default)</label><input type="number" id="qCtxLim" value="' + esc(cfg.contextLimit == null ? '' : cfg.contextLimit) + '">');
+  add('<label>Tool round limit</label><input type="number" id="qToolRnd" value="' + esc(cfg.toolRoundLimit != null ? cfg.toolRoundLimit : 40) + '">');
+  add('<div class="toggle-row"><span>Summary phases</span><div class="switch ' + (cfg.summaryPhases ? 'on' : '') + '" id="qSumPh"></div></div>');
+  add('<label>Summary trigger %</label><input type="number" id="qSumTr" value="' + esc(cfg.summarizeTriggerPercent != null ? cfg.summarizeTriggerPercent : 65) + '">');
+  add('<div class="toggle-row"><span>Debug mode</span><div class="switch ' + (cfg.debug ? 'on' : '') + '" id="qDebug"></div></div>');
+  add('<div class="toggle-row"><span>Auto-attach files</span><div class="switch ' + (cfg.autoAttach !== false ? 'on' : '') + '" id="qAutoAtt"></div></div>');
+  add('<div class="row-btns"><button class="primary" onclick="saveQuickConfig()">Apply quick changes</button></div>');
+
+  function bindSwitch(id) {
+    var el = document.getElementById(id);
+    if (el) el.addEventListener('click', function(){ el.classList.toggle('on'); });
+  }
+  bindSwitch('qSumPh'); bindSwitch('qDebug'); bindSwitch('qAutoAtt');
+}
+
+window.saveQuickConfig = function() {
+  var current;
+  try { current = JSON.parse(document.getElementById('cfgJson').value || '{}'); }
+  catch(e) { current = {}; }
+  function val(id) { var el = document.getElementById(id); return el ? el.value : ''; }
+  function on(id) { var el = document.getElementById(id); return el && el.classList.contains('on'); }
+  var v;
+  v = val('qDefMod').trim();  current.defaultModel = v || null;
+  v = val('qDefAgent').trim(); current.defaultAgent = v || null;
+  v = val('qCtxLim').trim();   current.contextLimit = v === '' ? null : parseInt(v, 10);
+  v = val('qToolRnd').trim();  current.toolRoundLimit = v === '' ? 40 : parseInt(v, 10);
+  v = val('qSumTr').trim();    current.summarizeTriggerPercent = v === '' ? 65 : parseInt(v, 10);
+  current.summaryPhases = on('qSumPh');
+  current.debug = on('qDebug');
+  current.autoAttach = on('qAutoAtt');
+  document.getElementById('cfgJson').value = JSON.stringify(current, null, 2);
+  saveConfig();
+};
 
-    function processStream() {
-      reader.read().then(function(result) {
-        if (result.done) { finishStream(); return; }
-        buffer += decoder.decode(result.value, {stream: true});
-        var lines = buffer.split(NL);
-        buffer = lines.pop();
-        for (var i = 0; i < lines.length; i++) {
-          var line = lines[i];
-          if (line.indexOf('data: ') !== 0) continue;
-          var raw = line.slice(6);
-          if (raw === '[DONE]') continue;
-          var evt;
-          try { evt = JSON.parse(raw); } catch(e) { continue; }
-          if (!removedDots) { dots.remove(); removedDots = true; }
-          if (evt.type === 'token') {
-            processToken(evt.data);
-            scrollDown();
-          } else if (evt.type === 'tool_start') {
-            // Finish current text segment before showing tool
-            if (currentText) { renderCurrentText(); doneThinkContent += currentText; currentText = ''; }
-            currentTextEl = null;
-            if (inThink) endThinkBlock();
-
-            var card = document.createElement('div');
-            card.className = 'tool-card';
-            card.setAttribute('data-tool', evt.data.tool);
-            card.setAttribute('data-path', evt.data.path);
-            card.innerHTML = '<div class="tool-card-header" onclick="this.parentElement.classList.toggle(&apos;expanded&apos;)">' +
-              '<span class="tc-icon">&#9881;</span>' +
-              '<span class="tc-name">' + esc(evt.data.tool) + '</span>' +
-              '<span class="tc-path">' + esc(evt.data.path) + '</span>' +
-              '<span class="tc-status tc-spinner">&#8987;</span>' +
-              '<span class="tc-chevron">&#9654;</span></div>' +
-              '<div class="tool-card-body"><pre>Running...</pre></div>';
-            container.appendChild(card);
-            scrollDown();
-          } else if (evt.type === 'tool_result') {
-            // Try to update the last pending tool card
-            var pendingCards = container.querySelectorAll('.tool-card:not(.done)');
-            var isErr = (evt.data.result && evt.data.result.indexOf('Error') !== -1) || evt.data.blocked;
-            if (pendingCards.length > 0) {
-              var lastCard = pendingCards[pendingCards.length - 1];
-              lastCard.classList.add('done');
-              if (isErr) lastCard.classList.add('error');
-              var hdr = lastCard.querySelector('.tool-card-header');
-              var statusSpan = lastCard.querySelector('.tc-status');
-              if (statusSpan) statusSpan.innerHTML = isErr ? '&#10060;' : '&#9989;';
-              var body = lastCard.querySelector('.tool-card-body pre');
-              if (body) body.textContent = evt.data.result || '(no output)';
-            } else {
-              // Fallback: create result card
-              var card = document.createElement('div');
-              card.className = 'tool-card done' + (isErr ? ' error' : '');
-              card.innerHTML = '<div class="tool-card-header" onclick="this.parentElement.classList.toggle(&apos;expanded&apos;)">' +
-                '<span class="tc-icon">' + (isErr ? '&#10060;' : '&#9989;') + '</span>' +
-                '<span class="tc-name">' + esc(evt.data.tool) + '</span>' +
-                '<span class="tc-path">' + esc(evt.data.path) + '</span>' +
-                '<span class="tc-chevron">&#9654;</span></div>' +
-                '<div class="tool-card-body"><pre>' + esc(evt.data.result || '') + '</pre></div>';
-              container.appendChild(card);
-            }
-            scrollDown();
-          } else if (evt.type === 'system') {
-            addSystem(evt.data);
-          }
-        }
-        processStream();
-      }).catch(function(e) {
-        if (!removedDots) dots.remove();
-        ensureTextEl();
-        currentTextEl.innerHTML = '<span style="color:var(--red)">Stream error: ' + esc(e.message) + '</span>';
-        finishStream();
-      });
+// ─── Agents & Skills tabs ────────────────────────────────────
+function loadAgents() {
+  fetch('/api/agents').then(function(r){return r.json();}).then(function(d){
+    var host = document.getElementById('agentsList');
+    host.innerHTML = '';
+    if (!d.agents || d.agents.length === 0) {
+      host.innerHTML = '<div class="pane-section"><p>No agents yet. Create one with <code>/newagent</code>.</p></div>';
+      return;
     }
+    d.agents.forEach(function(a){
+      var div = document.createElement('div');
+      div.className = 'item';
+      div.innerHTML = '<div class="ti">' + esc(a.name) + '</div>' +
+        (a.description ? '<div class="ds">' + esc(a.description) + '</div>' : '');
+      div.addEventListener('click', function(){
+        openFile(a.path);
+        sendCmd('/' + a.key);
+      });
+      host.appendChild(div);
+    });
+  });
+}
 
-    function finishStream() {
-      if (renderTimer) { clearTimeout(renderTimer); renderTimer = null; }
-      if (inThink) endThinkBlock();
-      if (currentText) {
-        renderCurrentText();
-      }
-      if (!removedDots) { dots.remove(); }
-      // If nothing was rendered at all
-      if (!container.querySelector('.msg.ai') && !container.querySelector('.tool-card') && !container.querySelector('.think-block')) {
-        var empty = document.createElement('div');
-        empty.className = 'msg ai';
-        empty.innerHTML = '<em style="color:var(--fg3)">No response</em>';
-        container.appendChild(empty);
-      }
-      isStreaming = false;
-      document.getElementById('sendBtn').disabled = false;
-      document.getElementById('stopBtn').classList.remove('visible');
-      document.getElementById('statusDot').style.background = 'var(--green)';
-      scrollDown();
-      inputEl.focus();
-      autoSaveSession();
+function loadSkills() {
+  fetch('/api/skills').then(function(r){return r.json();}).then(function(d){
+    var host = document.getElementById('skillsList');
+    host.innerHTML = '';
+    if (!d.skills || d.skills.length === 0) {
+      host.innerHTML = '<div class="pane-section"><p>No skills yet. Create one with <code>/newskill</code>.</p></div>';
+      return;
     }
-
-    processStream();
-  }).catch(function(e) {
-    if (dots.parentNode) dots.remove();
-    var errEl = document.createElement('div');
-    errEl.className = 'msg ai';
-    errEl.innerHTML = '<span style="color:var(--red)">Error: ' + esc(e.message) + '</span>';
-    container.appendChild(errEl);
-    isStreaming = false;
-    document.getElementById('sendBtn').disabled = false;
-    document.getElementById('stopBtn').classList.remove('visible');
-    document.getElementById('statusDot').style.background = 'var(--green)';
+    d.skills.forEach(function(s){
+      var div = document.createElement('div');
+      div.className = 'item';
+      div.innerHTML = '<div class="ti">' + esc(s.name) + '</div>' +
+        (s.description ? '<div class="ds">' + esc(s.description) + '</div>' : '');
+      div.addEventListener('click', function(){ openFile(s.path); });
+      host.appendChild(div);
+    });
   });
 }
-function sendQuick(text) { inputEl.value = text; send(); }
-function stopGeneration() {
-  fetch('/api/stop', {method: 'POST'});
-}
-function addMsg(role, text) {
-  welcomeEl.style.display = 'none';
-  var el = document.createElement('div');
-  el.className = 'msg ' + role;
-  if (role === 'user') el.textContent = text;
-  else el.innerHTML = renderFullMessage(text);
-  chatEl.appendChild(el);
-  scrollDown();
-  return el;
-}
-function addSystem(text) {
-  var el = document.createElement('div');
-  el.className = 'msg system';
-  el.textContent = text;
-  chatEl.appendChild(el);
-  scrollDown();
-}
-function scrollDown() { chatEl.scrollTop = chatEl.scrollHeight; }
-
-// ─── Rendering ─────────────────────────────────────────────
-function stripToolSyntax(text) {
-  var result = text;
-  while (true) {
-    var start = result.indexOf('[TOOL:');
-    if (start === -1) break;
-    var end = result.indexOf('[/TOOL]', start);
-    if (end === -1) break;
-    result = result.substring(0, start) + result.substring(end + 7);
-  }
-  return result.trim();
-}
 
-function renderFullMessage(text) {
-  if (!text) return '';
-  var parts = parseThinkBlocks(text);
-  var html = '';
-  for (var i = 0; i < parts.length; i++) {
-    var p = parts[i];
-    if (p.type === 'thinking') {
-      var cls = p.done ? 'think-block' : 'think-block open streaming';
-      html += '<div class="' + cls + '">';
-      html += '<div class="think-header" onclick="this.parentElement.classList.toggle(&apos;open&apos;)">';
-      html += '<span class="think-chevron">&#9654;</span>';
-      html += '<span class="think-label">&#129504; Thinking' + (p.done ? '' : '...') + '</span></div>';
-      html += '<div class="think-content">' + renderMarkdown(p.content) + '</div></div>';
-    } else {
-      html += renderMarkdown(p.content);
-    }
-  }
-  return html;
+// ─── Quick actions: upload + voice record ────────────────────
+
+function uploadBlob(blob, filename, targetDir) {
+  return fetch('/api/upload', {
+    method: 'POST',
+    headers: {
+      'Content-Type': blob.type || 'application/octet-stream',
+      'X-Filename': encodeURIComponent(filename),
+      'X-Target-Dir': encodeURIComponent(targetDir || 'uploads'),
+    },
+    body: blob,
+  }).then(function(r){ return r.json(); }).then(function(d){
+    if (d.error) throw new Error(d.error);
+    return d.path;
+  });
 }
 
-function parseThinkBlocks(text) {
-  var parts = [];
-  var remaining = text;
-  while (true) {
-    var s = remaining.indexOf('<think>');
-    if (s === -1) {
-      if (remaining.length > 0) parts.push({type: 'text', content: remaining});
-      break;
+window.pickAndUpload = function() {
+  var inp = document.getElementById('qaFile');
+  inp.value = '';
+  inp.onchange = function() {
+    var files = Array.from(inp.files || []);
+    if (!files.length) return;
+    uploadFileList(files, 'uploads');
+  };
+  inp.click();
+};
+
+async function uploadFileList(files, targetDir) {
+  var paths = [];
+  for (var i = 0; i < files.length; i++) {
+    var f = files[i];
+    showToast('Uploading ' + f.name + '…');
+    try {
+      var p = await uploadBlob(f, f.name, targetDir);
+      paths.push(p);
+    } catch (e) {
+      showToast('Upload failed: ' + e.message, 'err');
     }
-    if (s > 0) parts.push({type: 'text', content: remaining.substring(0, s)});
-    var e = remaining.indexOf('</think>', s + 7);
-    if (e === -1) {
-      parts.push({type: 'thinking', content: remaining.substring(s + 7), done: false});
-      break;
+  }
+  if (paths.length) {
+    loadTree();
+    // Send "@path1 @path2 " to terminal so user can keep typing
+    if (ws && ws.readyState === 1) {
+      ws.send(paths.map(function(p){ return '@' + p; }).join(' ') + ' ');
     }
-    parts.push({type: 'thinking', content: remaining.substring(s + 7, e), done: true});
-    remaining = remaining.substring(e + 8);
+    showToast(paths.length + ' file' + (paths.length > 1 ? 's' : '') + ' attached');
+    term.focus();
   }
-  return parts;
 }
 
-function renderMarkdown(text) {
-  if (!text) return '';
-  var lines = text.split(NL);
-  var html = '';
-  var inCode = false;
-  var codeLang = '';
-  var codeLines = [];
-  var inList = false;
-
-  for (var i = 0; i < lines.length; i++) {
-    var line = lines[i];
-    var trimmed = line.trim();
-
-    if (trimmed.indexOf(BT+BT+BT) === 0) {
-      if (!inCode) {
-        if (inList) { html += '</ul>'; inList = false; }
-        inCode = true;
-        codeLang = trimmed.slice(3).trim();
-        codeLines = [];
-      } else {
-        html += '<pre><code class="lang-' + esc(codeLang) + '">' + esc(codeLines.join(NL)) + '</code></pre>';
-        inCode = false;
-      }
-      continue;
-    }
-    if (inCode) { codeLines.push(line); continue; }
-
-    if (trimmed === '') {
-      if (inList) { html += '</ul>'; inList = false; }
-      html += '<br>';
-      continue;
-    }
-
-    var isLi = trimmed.length > 2 && (trimmed.charAt(0) === '-' || trimmed.charAt(0) === '*') && trimmed.charAt(1) === ' ';
-    var isOl = false;
-    var olMatch = trimmed.match(/^(\d+)\.\s/);
-    if (olMatch) isOl = true;
-
-    if (!isLi && !isOl && inList) { html += '</ul>'; inList = false; }
+// ─── Drag-drop on terminal area ──────────────────────────────
+(function setupDropZone(){
+  var center = document.getElementById('center');
+  var ov = document.getElementById('dropOverlay');
+  var depth = 0;
+  function show(){ ov.classList.add('on'); }
+  function hide(){ ov.classList.remove('on'); depth = 0; }
+  center.addEventListener('dragenter', function(e){
+    if (!e.dataTransfer || !e.dataTransfer.types || e.dataTransfer.types.indexOf('Files') < 0) return;
+    e.preventDefault(); depth++; show();
+  });
+  center.addEventListener('dragover', function(e){
+    if (!e.dataTransfer || !e.dataTransfer.types || e.dataTransfer.types.indexOf('Files') < 0) return;
+    e.preventDefault(); e.dataTransfer.dropEffect = 'copy';
+  });
+  center.addEventListener('dragleave', function(e){
+    depth--; if (depth <= 0) hide();
+  });
+  center.addEventListener('drop', function(e){
+    if (!e.dataTransfer || !e.dataTransfer.files || !e.dataTransfer.files.length) { hide(); return; }
+    e.preventDefault(); hide();
+    uploadFileList(Array.from(e.dataTransfer.files), 'uploads');
+  });
+})();
 
-    if (trimmed.indexOf('### ') === 0) { html += '<h3>' + inlineFmt(esc(trimmed.slice(4))) + '</h3>'; continue; }
-    if (trimmed.indexOf('## ') === 0) { html += '<h2>' + inlineFmt(esc(trimmed.slice(3))) + '</h2>'; continue; }
-    if (trimmed.indexOf('# ') === 0) { html += '<h1>' + inlineFmt(esc(trimmed.slice(2))) + '</h1>'; continue; }
-    if (trimmed.indexOf('> ') === 0) { html += '<blockquote>' + inlineFmt(esc(trimmed.slice(2))) + '</blockquote>'; continue; }
-    if (trimmed === '---' || trimmed === '***' || trimmed === '___') { html += '<hr>'; continue; }
+// ─── Audio recording (16 kHz mono WAV for Whisper) ───────────
+var recState = null;
 
-    if (isLi) {
-      if (!inList) { html += '<ul>'; inList = true; }
-      html += '<li>' + inlineFmt(esc(trimmed.slice(2))) + '</li>';
-      continue;
-    }
-    if (isOl) {
-      if (!inList) { html += '<ul>'; inList = true; }
-      var olText = trimmed.replace(/^\d+\.\s/, '');
-      html += '<li>' + inlineFmt(esc(olText)) + '</li>';
-      continue;
-    }
+window.toggleRecord = async function() {
+  if (recState) return stopRecording();
+  await startRecording();
+};
 
-    html += '<p>' + inlineFmt(esc(line)) + '</p>';
+async function startRecording() {
+  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+    showToast('Microphone API not available (use HTTPS or localhost)', 'err');
+    return;
   }
-  if (inCode) html += '<pre><code>' + esc(codeLines.join(NL)) + '</code></pre>';
-  if (inList) html += '</ul>';
-  return html;
-}
-
-function inlineFmt(text) {
-  var parts = text.split(BT);
-  var result = '';
-  for (var i = 0; i < parts.length; i++) {
-    if (i % 2 === 1) { result += '<code>' + parts[i] + '</code>'; }
-    else {
-      var s = parts[i];
-      s = replacePairs(s, '**', '<strong>', '</strong>');
-      s = replacePairs(s, '*', '<em>', '</em>');
-      result += s;
-    }
+  try {
+    var stream = await navigator.mediaDevices.getUserMedia({
+      audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true, autoGainControl: true }
+    });
+    var Ctx = window.AudioContext || window.webkitAudioContext;
+    var ctx = new Ctx({ sampleRate: 16000 });
+    // Resume in case of autoplay policy
+    if (ctx.state === 'suspended') { try { await ctx.resume(); } catch(_){} }
+    var src = ctx.createMediaStreamSource(stream);
+    var proc = ctx.createScriptProcessor(4096, 1, 1);
+    var chunks = [];
+    proc.onaudioprocess = function(e) {
+      var d = e.inputBuffer.getChannelData(0);
+      chunks.push(new Float32Array(d));
+    };
+    src.connect(proc);
+    proc.connect(ctx.destination);
+    var startedAt = Date.now();
+    recState = { stream: stream, ctx: ctx, src: src, proc: proc, chunks: chunks, sr: ctx.sampleRate, startedAt: startedAt };
+    document.getElementById('qaRec').classList.add('on');
+    document.getElementById('recDot').classList.add('on');
+    document.getElementById('recTime').classList.add('on');
+    recState.timer = setInterval(function(){
+      var sec = Math.floor((Date.now() - startedAt) / 1000);
+      var m = Math.floor(sec / 60), s = sec % 60;
+      document.getElementById('recTime').textContent = m + ':' + (s < 10 ? '0' : '') + s;
+    }, 250);
+    showToast('Recording… click again to stop');
+  } catch (e) {
+    showToast('Mic permission: ' + e.message, 'err');
   }
-  return result;
 }
 
-function replacePairs(text, marker, open, close) {
-  var r = '';
-  var idx = 0;
-  while (idx < text.length) {
-    var s = text.indexOf(marker, idx);
-    if (s === -1) { r += text.substring(idx); break; }
-    var e = text.indexOf(marker, s + marker.length);
-    if (e === -1) { r += text.substring(idx); break; }
-    r += text.substring(idx, s) + open + text.substring(s + marker.length, e) + close;
-    idx = e + marker.length;
+async function stopRecording() {
+  var r = recState; if (!r) return;
+  recState = null;
+  document.getElementById('qaRec').classList.remove('on');
+  document.getElementById('recDot').classList.remove('on');
+  document.getElementById('recTime').classList.remove('on');
+  document.getElementById('recTime').textContent = '';
+  clearInterval(r.timer);
+  try { r.proc.disconnect(); } catch(_){}
+  try { r.src.disconnect(); } catch(_){}
+  try { r.stream.getTracks().forEach(function(t){ t.stop(); }); } catch(_){}
+  try { await r.ctx.close(); } catch(_){}
+
+  var len = 0; for (var i = 0; i < r.chunks.length; i++) len += r.chunks[i].length;
+  if (len < r.sr / 4) { showToast('Too short (< 250 ms)', 'warn'); return; }
+  var merged = new Float32Array(len);
+  var off = 0;
+  for (var j = 0; j < r.chunks.length; j++) { merged.set(r.chunks[j], off); off += r.chunks[j].length; }
+  var wav = encodeWAV(merged, r.sr);
+  var stamp = new Date().toISOString().replace(/[:.]/g, '-').replace('T', '_').slice(0, 19);
+  showToast('Uploading recording…');
+  try {
+    var rel = await uploadBlob(new Blob([wav], { type: 'audio/wav' }),
+                               'rec-' + stamp + '.wav',
+                               '.sapper/voice/incoming');
+    loadTree();
+    sendCmd('/voice file ' + rel);
+    showToast('Sent to Sapper for transcription');
+  } catch (e) {
+    showToast('Upload failed: ' + e.message, 'err');
   }
-  return r;
 }
 
-function esc(s) {
-  if (!s) return '';
-  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+function encodeWAV(samples, sampleRate) {
+  var bytesPerSample = 2;
+  var buffer = new ArrayBuffer(44 + samples.length * bytesPerSample);
+  var view = new DataView(buffer);
+  function writeStr(o, s) { for (var i = 0; i < s.length; i++) view.setUint8(o + i, s.charCodeAt(i)); }
+  writeStr(0, 'RIFF');
+  view.setUint32(4, 36 + samples.length * bytesPerSample, true);
+  writeStr(8, 'WAVE');
+  writeStr(12, 'fmt ');
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true);    // PCM
+  view.setUint16(22, 1, true);    // mono
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * bytesPerSample, true);
+  view.setUint16(32, bytesPerSample, true);
+  view.setUint16(34, 16, true);
+  writeStr(36, 'data');
+  view.setUint32(40, samples.length * bytesPerSample, true);
+  var o = 44;
+  for (var i = 0; i < samples.length; i++) {
+    var s = Math.max(-1, Math.min(1, samples[i]));
+    view.setInt16(o, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
+    o += 2;
+  }
+  return buffer;
 }
 
-// ─── File Panel ────────────────────────────────────────────
-function toggleFilePanel() {
-  var rp = document.getElementById('rightPanel');
-  if (rp.classList.contains('open')) { rp.classList.remove('open'); }
-  else { rp.classList.add('open'); loadFileTree('.'); }
-}
-function closeFilePanel() { document.getElementById('rightPanel').classList.remove('open'); }
-
-function loadFileTree(dirPath) {
-  fetch('/api/tree?path=' + encodeURIComponent(dirPath)).then(function(r){return r.json();}).then(function(d) {
-    var el = document.getElementById('fileTree');
-    el.innerHTML = '';
-    if (dirPath !== '.') {
-      var up = document.createElement('div');
-      up.className = 'ft-item';
-      up.innerHTML = '<span class="ft-icon">&#11013;</span><span class="ft-name">..</span>';
-      var parent = dirPath.split('/').slice(0, -1).join('/') || '.';
-      up.onclick = function() { loadFileTree(parent); };
-      el.appendChild(up);
-    }
-    for (var i = 0; i < d.entries.length; i++) {
-      var entry = d.entries[i];
-      var item = document.createElement('div');
-      item.className = 'ft-item' + (entry.isDir ? ' dir' : '');
-      var icon = entry.isDir ? '&#128194;' : '&#128196;';
-      item.innerHTML = '<span class="ft-icon">' + icon + '</span><span class="ft-name">' + esc(entry.name) + '</span>';
-      if (entry.isDir) {
-        var subPath = (dirPath === '.' ? '' : dirPath + '/') + entry.name;
-        item.onclick = (function(p) { return function() { loadFileTree(p); }; })(subPath);
-      } else {
-        var filePath = (dirPath === '.' ? '' : dirPath + '/') + entry.name;
-        item.onclick = (function(p) { return function() { viewFile(p); }; })(filePath);
-      }
-      el.appendChild(item);
-    }
+window.sendOpenPrompt = async function() {
+  var v = await showModal({
+    title: 'Open file in Sapper',
+    label: 'Path',
+    placeholder: 'src/index.ts',
+    okLabel: 'Open',
   });
-}
+  if (v == null || !v.trim()) return;
+  sendCmd('/open ' + v.trim());
+};
 
-function viewFile(path) {
-  editMode = false;
-  editingFilePath = path;
-  fetch('/api/file/read?path=' + encodeURIComponent(path)).then(function(r){return r.json();}).then(function(d) {
-    var editor = document.getElementById('fileEditor');
-    editor.classList.add('open');
-    document.getElementById('fePath').textContent = path;
-    var content = document.getElementById('feContent');
-    content.innerHTML = '<pre>' + esc(d.content || '') + '</pre>';
-    document.getElementById('feEditBtn').style.display = '';
-    document.getElementById('feSaveBtn').style.display = 'none';
-    document.getElementById('feCancelBtn').style.display = 'none';
-  });
+// ─── Boot ────────────────────────────────────────────────────
+connectPty();
+connectEvents();
+loadTree();
+</script>
+</body>
+</html>`;
 }
 
-function startEditing() {
-  if (!editingFilePath) return;
-  editMode = true;
-  var content = document.getElementById('feContent');
-  var pre = content.querySelector('pre');
-  var text = pre ? pre.textContent : '';
-  content.innerHTML = '';
-  var ta = document.createElement('textarea');
-  ta.value = text;
-  ta.id = 'feTextarea';
-  content.appendChild(ta);
-  document.getElementById('feEditBtn').style.display = 'none';
-  document.getElementById('feSaveBtn').style.display = '';
-  document.getElementById('feCancelBtn').style.display = '';
-}
+// ─── HTTP routes ─────────────────────────────────────────────────
 
-function saveFileEdit() {
-  var ta = document.getElementById('feTextarea');
-  if (!ta || !editingFilePath) return;
-  fetch('/api/file/write', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({path: editingFilePath, content: ta.value})})
-  .then(function(r){return r.json();}).then(function(d) {
-    if (d.ok) { viewFile(editingFilePath); addSystem('Saved ' + editingFilePath); }
-    else addSystem('Error saving: ' + (d.error || 'unknown'));
-  });
+function json(res, data, code = 200) {
+  res.writeHead(code, { 'Content-Type': 'application/json' });
+  res.end(JSON.stringify(data));
 }
 
-function cancelEdit() { if (editingFilePath) viewFile(editingFilePath); }
-
-// ─── Quick Actions ─────────────────────────────────────────
-function qaAction(type) {
-  if (type === 'list') {
-    showPromptModal('Browse Directory', 'Directory path (e.g. src)', '.', function(v) {
-      sendQuick('List the contents of the directory: ' + v);
-    });
-  } else if (type === 'read') {
-    showPromptModal('Read File', 'File path (e.g. src/index.js)', '', function(v) {
-      if (v) sendQuick('Read and show me the file: ' + v);
-    });
-  } else if (type === 'write') {
-    showPromptModal('Create File', 'File path to create', '', function(v) {
-      if (v) sendQuick('Create a new file at ' + v + ' with appropriate starter content');
-    });
-  } else if (type === 'search') {
-    showPromptModal('Search Files', 'Search pattern', '', function(v) {
-      if (v) sendQuick('Search the codebase for: ' + v);
-    });
-  } else if (type === 'shell') {
-    showPromptModal('Run Command', 'Shell command', '', function(v) {
-      if (v) sendQuick('Run this command: ' + v);
-    });
-  } else if (type === 'mkdir') {
-    showPromptModal('Create Directory', 'Directory path', '', function(v) {
-      if (v) sendQuick('Create directory: ' + v);
-    });
-  } else if (type === 'review') {
-    sendQuick('Review the codebase for bugs, issues, and improvements');
-  } else if (type === 'scan') {
-    sendQuick('List the project files and give me a complete overview of the project structure and purpose');
-  }
+function readReqJSON(req) {
+  return new Promise((resolve) => {
+    let body = ''; let size = 0;
+    req.on('data', (c) => { size += c.length; if (size > 5 * 1024 * 1024) { req.destroy(); resolve({ _err: 'too large' }); return; } body += c; });
+    req.on('end', () => { try { resolve(JSON.parse(body || '{}')); } catch { resolve({}); } });
+    req.on('error', () => resolve({}));
+  });
 }
 
-// ─── Modal ─────────────────────────────────────────────────
-function showModal(title, bodyHtml, footerHtml) {
-  document.getElementById('modalTitle').textContent = title;
-  document.getElementById('modalBody').innerHTML = bodyHtml;
-  document.getElementById('modalFooter').innerHTML = footerHtml;
-  document.getElementById('modalOverlay').classList.add('visible');
-}
-function closeModal() {
-  document.getElementById('modalOverlay').classList.remove('visible');
-}
-function showPromptModal(title, placeholder, defaultVal, callback) {
-  var body = '<div class="m-field"><label>' + esc(placeholder) + '</label><input id="promptInput" value="' + esc(defaultVal || '') + '"></div>';
-  showModal(title, body,
-    '<button class="m-btn secondary" onclick="closeModal()">Cancel</button>' +
-    '<button class="m-btn primary" id="promptOk">OK</button>');
-  var inp = document.getElementById('promptInput');
-  inp.focus();
-  inp.select();
-  document.getElementById('promptOk').onclick = function() { closeModal(); callback(inp.value); };
-  inp.onkeydown = function(e) { if (e.key === 'Enter') { closeModal(); callback(inp.value); } };
+function listEntries(dirPath) {
+  try {
+    const entries = fs.readdirSync(dirPath, { withFileTypes: true });
+    return entries
+      .filter(e => !IGNORE_NAMES.has(e.name))
+      .map(e => ({ name: e.name, isDir: e.isDirectory() }))
+      .sort((a, b) => (a.isDir === b.isDir ? a.name.localeCompare(b.name) : (a.isDir ? -1 : 1)));
+  } catch { return []; }
 }
 
-// ─── Escape modal on Escape key ────────────────────────────
-document.addEventListener('keydown', function(e) {
-  if (e.key === 'Escape') closeModal();
-});
-
-init();
-</script>
-</body>
-</html>`;
+function looksBinary(buf) {
+  const len = Math.min(buf.length, 4096);
+  let nonText = 0;
+  for (let i = 0; i < len; i++) {
+    const c = buf[i];
+    if (c === 0) return true;
+    if ((c < 32 && c !== 9 && c !== 10 && c !== 13) || c >= 127) nonText++;
+  }
+  return nonText / Math.max(len, 1) > 0.3;
 }
 
-// ─── HTTP Server ───────────────────────────────────────────
-
 const server = http.createServer(async (req, res) => {
-  req.socket.setNoDelay(true);
-  const url = new URL(req.url, `http://localhost:${PORT}`);
+  try {
+    const url = new URL(req.url, 'http://localhost');
+    const path = url.pathname;
+
+    // Pages
+    if (req.method === 'GET' && (path === '/' || path === '/index.html')) {
+      res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+      res.end(buildHTML());
+      return;
+    }
+    if (req.method === 'GET' && path === '/health') return json(res, { ok: true, cwd: workingDir });
+
+    // ── Tree
+    if (req.method === 'GET' && path === '/api/tree') {
+      const rel = url.searchParams.get('path') || '';
+      const abs = safePath(rel);
+      if (!abs) return json(res, { error: 'invalid path' }, 400);
+      return json(res, { path: rel, entries: listEntries(abs) });
+    }
 
-  // ── Serve frontend ──
-  if (req.method === 'GET' && url.pathname === '/') {
-    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
-    res.end(buildHTML());
-    return;
-  }
+    // ── File read (text)
+    if (req.method === 'GET' && path === '/api/file') {
+      const rel = url.searchParams.get('path') || '';
+      const abs = safePath(rel);
+      if (!abs) return json(res, { error: 'invalid path' }, 400);
+      try {
+        const stat = fs.statSync(abs);
+        if (stat.isDirectory()) return json(res, { error: 'is a directory' }, 400);
+        if (stat.size > 2 * 1024 * 1024) return json(res, { error: 'file too large (>2MB)', size: stat.size, binary: true }, 200);
+        const buf = fs.readFileSync(abs);
+        if (looksBinary(buf)) return json(res, { binary: true, size: stat.size });
+        return json(res, { content: buf.toString('utf8'), size: stat.size });
+      } catch (e) { return json(res, { error: e.message }, 500); }
+    }
 
-  // ── API: models ──
-  if (req.method === 'GET' && url.pathname === '/api/models') {
-    try {
-      const list = await ollama.list();
-      const names = (list.models || []).map(m => m.name);
-      if (names.length > 0 && !serverModel) serverModel = names[0];
-      json(res, { models: names });
-    } catch (e) { json(res, { models: [], error: e.message }, 500); }
-    return;
-  }
+    // ── File raw (images)
+    if (req.method === 'GET' && path === '/api/file/raw') {
+      const rel = url.searchParams.get('path') || '';
+      const abs = safePath(rel);
+      if (!abs) { res.writeHead(400); return res.end('invalid path'); }
+      try {
+        const ext = (rel.split('.').pop() || '').toLowerCase();
+        const mime = { png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', gif: 'image/gif', webp: 'image/webp', svg: 'image/svg+xml', bmp: 'image/bmp', ico: 'image/x-icon' }[ext] || 'application/octet-stream';
+        const buf = fs.readFileSync(abs);
+        res.writeHead(200, { 'Content-Type': mime, 'Cache-Control': 'no-store' });
+        return res.end(buf);
+      } catch (e) { res.writeHead(500); return res.end(e.message); }
+    }
 
-  // ── API: agents ──
-  if (req.method === 'GET' && url.pathname === '/api/agents') {
-    json(res, { agents: loadAgents() });
-    return;
-  }
+    // ── File write
+    if (req.method === 'POST' && path === '/api/file') {
+      const body = await readReqJSON(req);
+      const abs = safePath(body.path);
+      if (!abs) return json(res, { error: 'invalid path' }, 400);
+      try {
+        ensureDir(dirname(abs));
+        fs.writeFileSync(abs, body.content == null ? '' : String(body.content));
+        return json(res, { ok: true });
+      } catch (e) { return json(res, { error: e.message }, 500); }
+    }
 
-  // ── API: skills ──
-  if (req.method === 'GET' && url.pathname === '/api/skills') {
-    json(res, { skills: loadSkills() });
-    return;
-  }
+    // ── Create file or folder
+    if (req.method === 'POST' && path === '/api/fs/new') {
+      const body = await readReqJSON(req);
+      const abs = safePath(body.path);
+      if (!abs) return json(res, { error: 'invalid path' }, 400);
+      try {
+        if (fs.existsSync(abs)) return json(res, { error: 'already exists' }, 409);
+        if (body.kind === 'folder') {
+          fs.mkdirSync(abs, { recursive: true });
+        } else {
+          ensureDir(dirname(abs));
+          fs.writeFileSync(abs, body.content == null ? '' : String(body.content));
+        }
+        return json(res, { ok: true, path: body.path });
+      } catch (e) { return json(res, { error: e.message }, 500); }
+    }
 
-  // ── API: info ──
-  if (req.method === 'GET' && url.pathname === '/api/info') {
-    json(res, { cwd: workingDir, version: getVersion() });
-    return;
-  }
+    // ── Rename / move
+    if (req.method === 'POST' && path === '/api/fs/rename') {
+      const body = await readReqJSON(req);
+      const from = safePath(body.from);
+      const to = safePath(body.to);
+      if (!from || !to) return json(res, { error: 'invalid path' }, 400);
+      try {
+        if (!fs.existsSync(from)) return json(res, { error: 'source not found' }, 404);
+        if (fs.existsSync(to)) return json(res, { error: 'destination exists' }, 409);
+        ensureDir(dirname(to));
+        fs.renameSync(from, to);
+        return json(res, { ok: true });
+      } catch (e) { return json(res, { error: e.message }, 500); }
+    }
 
-  // ── API: sessions list ──
-  if (req.method === 'GET' && url.pathname === '/api/sessions') {
-    json(res, { sessions: listSessions() });
-    return;
-  }
+    // ── Duplicate
+    if (req.method === 'POST' && path === '/api/fs/duplicate') {
+      const body = await readReqJSON(req);
+      const from = safePath(body.from);
+      if (!from) return json(res, { error: 'invalid path' }, 400);
+      try {
+        if (!fs.existsSync(from)) return json(res, { error: 'source not found' }, 404);
+        // build target name: foo.txt -> foo copy.txt, foo copy.txt -> foo copy 2.txt
+        const dir = dirname(from);
+        const base = from.slice(dir.length + 1);
+        const dot = base.lastIndexOf('.');
+        const stem = (dot > 0) ? base.slice(0, dot) : base;
+        const ext = (dot > 0) ? base.slice(dot) : '';
+        let target = '';
+        for (let i = 0; i < 1000; i++) {
+          const suffix = (i === 0) ? ' copy' : (' copy ' + (i + 1));
+          const candidate = dir + '/' + stem + suffix + ext;
+          if (!fs.existsSync(candidate)) { target = candidate; break; }
+        }
+        if (!target) return json(res, { error: 'too many copies' }, 500);
+        fs.cpSync(from, target, { recursive: true });
+        return json(res, { ok: true, path: relative(workingDir, target).split(sep).join('/') });
+      } catch (e) { return json(res, { error: e.message }, 500); }
+    }
 
-  // ── API: session save ──
-  if (req.method === 'POST' && url.pathname === '/api/sessions/save') {
-    const body = await readBody(req);
-    if (body.id) {
-      currentSessionId = body.id;
-      saveSession(body.id, body.name || 'Chat', serverMessages, serverModel, serverAgentKey);
+    // ── Delete (move to .sapper/.trash for safety)
+    if (req.method === 'POST' && path === '/api/fs/delete') {
+      const body = await readReqJSON(req);
+      const abs = safePath(body.path);
+      if (!abs) return json(res, { error: 'invalid path' }, 400);
+      if (abs === workingDir) return json(res, { error: 'cannot delete workspace root' }, 400);
+      try {
+        if (!fs.existsSync(abs)) return json(res, { error: 'not found' }, 404);
+        if (body.hard) {
+          fs.rmSync(abs, { recursive: true, force: true });
+        } else {
+          const trashDir = join(SAPPER_DIR, '.trash');
+          ensureDir(trashDir);
+          const stamp = new Date().toISOString().replace(/[:.]/g, '-');
+          const name = body.path.split('/').pop() || 'item';
+          const target = join(trashDir, stamp + '__' + name);
+          fs.renameSync(abs, target);
+        }
+        return json(res, { ok: true });
+      } catch (e) { return json(res, { error: e.message }, 500); }
     }
-    json(res, { ok: true });
-    return;
-  }
 
-  // ── API: session load ──
-  if (req.method === 'POST' && url.pathname === '/api/sessions/load') {
-    const body = await readBody(req);
-    const session = loadSessionData(body.id);
-    if (session) {
-      serverMessages = session.messages || [];
-      if (session.model) serverModel = session.model;
-      currentSessionId = body.id;
-      if (session.agent) {
-        const agents = loadAgents();
-        if (agents[session.agent]) {
-          serverAgent = agents[session.agent];
-          serverAgentKey = session.agent;
+    // ── Reveal in OS file manager
+    if (req.method === 'POST' && path === '/api/fs/reveal') {
+      const body = await readReqJSON(req);
+      const abs = safePath(body.path);
+      if (!abs) return json(res, { error: 'invalid path' }, 400);
+      try {
+        if (process.platform === 'darwin') spawn('open', ['-R', abs]);
+        else if (process.platform === 'win32') spawn('explorer', ['/select,' + abs]);
+        else spawn('xdg-open', [dirname(abs)]);
+        return json(res, { ok: true });
+      } catch (e) { return json(res, { error: e.message }, 500); }
+    }
+
+    // ── Upload (raw body; headers carry filename + target dir)
+    if (req.method === 'POST' && path === '/api/upload') {
+      try {
+        let name = decodeURIComponent(req.headers['x-filename'] || 'upload.bin');
+        let dir = decodeURIComponent(req.headers['x-target-dir'] || 'uploads');
+        // sanitize filename (strip slashes), keep extension
+        name = name.replace(/[\\/:*?"<>|]/g, '_').slice(0, 200) || 'upload.bin';
+        dir = dir.replace(/^[\\/]+/, '');
+        const absDir = safePath(dir);
+        if (!absDir) return json(res, { error: 'invalid target dir' }, 400);
+        ensureDir(absDir);
+        let target = join(absDir, name);
+        // de-dupe if exists
+        if (fs.existsSync(target)) {
+          const dot = name.lastIndexOf('.');
+          const stem = dot > 0 ? name.slice(0, dot) : name;
+          const ext = dot > 0 ? name.slice(dot) : '';
+          for (let i = 1; i < 1000; i++) {
+            const cand = join(absDir, stem + '-' + i + ext);
+            if (!fs.existsSync(cand)) { target = cand; break; }
+          }
         }
-      }
+        const ws = fs.createWriteStream(target);
+        let size = 0; let aborted = false;
+        const MAX = 50 * 1024 * 1024;
+        req.on('data', (c) => {
+          size += c.length;
+          if (size > MAX && !aborted) {
+            aborted = true;
+            ws.destroy();
+            try { fs.unlinkSync(target); } catch {}
+            json(res, { error: 'upload too large (>50MB)' }, 413);
+            req.destroy();
+          }
+        });
+        req.pipe(ws);
+        await new Promise((resolve, reject) => {
+          ws.on('finish', resolve);
+          ws.on('error', reject);
+          req.on('error', reject);
+        });
+        if (aborted) return;
+        const rel = relative(workingDir, target).split(sep).join('/');
+        return json(res, { ok: true, path: rel, size });
+      } catch (e) { return json(res, { error: e.message }, 500); }
     }
-    json(res, { session });
-    return;
-  }
 
-  // ── API: session delete ──
-  if (req.method === 'POST' && url.pathname === '/api/sessions/delete') {
-    const body = await readBody(req);
-    deleteSessionFile(body.id);
-    json(res, { ok: true });
-    return;
-  }
+    // ── Config read/write
+    if (req.method === 'GET' && path === '/api/config') {
+      return json(res, { config: readJSON(CONFIG_FILE, {}), path: relative(workingDir, CONFIG_FILE) });
+    }
+    if (req.method === 'POST' && path === '/api/config') {
+      const body = await readReqJSON(req);
+      try {
+        ensureDir(SAPPER_DIR);
+        fs.writeFileSync(CONFIG_FILE, JSON.stringify(body.config || {}, null, 2));
+        return json(res, { ok: true });
+      } catch (e) { return json(res, { error: e.message }, 500); }
+    }
 
-  // ── API: session rename ──
-  if (req.method === 'POST' && url.pathname === '/api/sessions/rename') {
-    const body = await readBody(req);
-    renameSession(body.id, body.name);
-    json(res, { ok: true });
-    return;
-  }
+    // ── Agents / Skills
+    if (req.method === 'GET' && path === '/api/agents') return json(res, { agents: listMdDir(AGENTS_DIR) });
+    if (req.method === 'GET' && path === '/api/skills') return json(res, { skills: listMdDir(SKILLS_DIR) });
 
-  // ── API: create agent ──
-  if (req.method === 'POST' && url.pathname === '/api/agents/create') {
-    const body = await readBody(req);
-    const file = createAgentFile(body.name, body.description, body.tools, body.content || '');
-    json(res, { ok: true, file });
-    return;
+    res.writeHead(404, { 'Content-Type': 'text/plain' });
+    res.end('Not found');
+  } catch (e) {
+    json(res, { error: e.message }, 500);
   }
+});
 
-  // ── API: delete agent ──
-  if (req.method === 'POST' && url.pathname === '/api/agents/delete') {
-    const body = await readBody(req);
-    deleteAgentFile(body.key);
-    json(res, { ok: true });
-    return;
-  }
+// ─── WebSockets: /ws (pty) and /events (fs watcher) ──────────────
 
-  // ── API: create skill ──
-  if (req.method === 'POST' && url.pathname === '/api/skills/create') {
-    const body = await readBody(req);
-    const file = createSkillFile(body.name, body.description, body.content || '');
-    json(res, { ok: true, file });
-    return;
-  }
+const wssPty = new WebSocketServer({ noServer: true });
+const wssEvents = new WebSocketServer({ noServer: true });
 
-  // ── API: delete skill ──
-  if (req.method === 'POST' && url.pathname === '/api/skills/delete') {
-    const body = await readBody(req);
-    deleteSkillFile(body.key);
-    json(res, { ok: true });
-    return;
+server.on('upgrade', (req, sock, head) => {
+  const url = new URL(req.url, 'http://localhost');
+  if (url.pathname === '/ws') {
+    wssPty.handleUpgrade(req, sock, head, (ws) => wssPty.emit('connection', ws, req));
+  } else if (url.pathname === '/events') {
+    wssEvents.handleUpgrade(req, sock, head, (ws) => wssEvents.emit('connection', ws, req));
+  } else {
+    sock.destroy();
   }
+});
 
-  // ── API: file tree ──
-  if (req.method === 'GET' && url.pathname === '/api/tree') {
-    const dirPath = url.searchParams.get('path') || '.';
-    json(res, { entries: getTreeEntries(dirPath) });
-    return;
-  }
+function spawnSapper(cols, rows) {
+  return ptySpawn(process.execPath, [SAPPER_BIN], {
+    name: 'xterm-256color',
+    cols: cols || 100, rows: rows || 30,
+    cwd: workingDir,
+    env: { ...process.env, TERM: 'xterm-256color', FORCE_COLOR: '1', COLORTERM: 'truecolor' },
+  });
+}
 
-  // ── API: file read ──
-  if (req.method === 'GET' && url.pathname === '/api/file/read') {
-    const filePath = url.searchParams.get('path');
-    const safe = safePath(filePath);
-    if (!safe) { json(res, { error: 'Invalid path' }, 400); return; }
-    try {
-      const content = fs.readFileSync(safe, 'utf8');
-      json(res, { content, path: filePath });
-    } catch (e) { json(res, { error: e.message }, 500); }
-    return;
-  }
+wssPty.on('connection', (ws) => {
+  dbg('pty client connected');
+  let pty = null; let initialized = false;
 
-  // ── API: file write ──
-  if (req.method === 'POST' && url.pathname === '/api/file/write') {
-    const body = await readBody(req);
-    const safe = safePath(body.path);
-    if (!safe) { json(res, { error: 'Invalid path' }, 400); return; }
-    try {
-      fs.mkdirSync(dirname(safe), { recursive: true });
-      fs.writeFileSync(safe, body.content);
-      json(res, { ok: true });
-    } catch (e) { json(res, { error: e.message }, 500); }
-    return;
+  function start(cols, rows) {
+    if (pty) { try { pty.kill(); } catch {} }
+    try { pty = spawnSapper(cols, rows); }
+    catch (e) {
+      console.error('[ui] spawn failed:', e.message);
+      try { ws.send(Buffer.from('\x1b[31mFailed to spawn sapper: ' + e.message + '\x1b[0m\r\n', 'utf8')); } catch {}
+      return;
+    }
+    dbg('pty pid=' + pty.pid + ' ' + cols + 'x' + rows);
+    pty.onData((d) => { if (ws.readyState === ws.OPEN) ws.send(Buffer.from(d, 'utf8')); });
+    pty.onExit(({ exitCode, signal }) => {
+      dbg('pty exit code=' + exitCode);
+      if (ws.readyState === ws.OPEN) { try { ws.send(JSON.stringify({ type: 'exit', code: exitCode, signal })); } catch {} }
+    });
+    try { ws.send(JSON.stringify({ type: 'cwd', path: workingDir })); } catch {}
   }
 
-  // ── API: select model ──
-  if (req.method === 'POST' && url.pathname === '/api/model') {
-    const body = await readBody(req);
-    serverModel = body.model || serverModel;
-    json(res, { ok: true, model: serverModel });
-    return;
-  }
+  ws.on('message', (raw, isBinary) => {
+    const str = raw.toString('utf8');
+    if (!isBinary && str.startsWith('{')) {
+      try {
+        const m = JSON.parse(str);
+        if (m.type === 'init') { if (!initialized) { initialized = true; start(m.cols, m.rows); } return; }
+        if (m.type === 'resize' && pty) { try { pty.resize(m.cols || 100, m.rows || 30); } catch {} return; }
+        if (m.type === 'restart') { initialized = true; start(100, 30); return; }
+      } catch {}
+    }
+    if (pty) pty.write(str);
+  });
 
-  // ── API: select agent ──
-  if (req.method === 'POST' && url.pathname === '/api/agent') {
-    const body = await readBody(req);
-    const agentKey = body.agent;
-    if (agentKey === null) {
-      serverAgent = null;
-      serverAgentKey = null;
-      serverAgentTools = null;
-    } else {
-      const agents = loadAgents();
-      if (agents[agentKey]) {
-        serverAgent = agents[agentKey];
-        serverAgentKey = agentKey;
-        const toolMap = { read: 'READ', write: 'WRITE', edit: 'PATCH', patch: 'PATCH', list: 'LIST', search: 'SEARCH', shell: 'SHELL', mkdir: 'MKDIR' };
-        serverAgentTools = serverAgent.tools
-          ? (Array.isArray(serverAgent.tools) ? serverAgent.tools : [serverAgent.tools])
-              .map(t => toolMap[t.toLowerCase()] || t.toUpperCase()).filter(Boolean)
-          : null;
+  ws.on('close', () => { if (pty) { try { pty.kill(); } catch {} pty = null; } });
+});
+
+// ── FS watcher: broadcast to all /events clients ─────────────────
+
+let watcher = null;
+const eventsClients = new Set();
+const recentEvents = new Map(); // path -> timestamp (dedupe burst events)
+const knownPaths = new Set(); // paths we have seen exist (for create vs delete detection)
+const recentActivity = []; // last N classified events for late-joining clients
+
+function classifyEvent(rawEvent, rel, abs) {
+  // fs.watch only gives 'rename' or 'change'
+  const exists = fs.existsSync(abs);
+  if (rawEvent === 'change') return exists ? 'modified' : 'deleted';
+  // 'rename' = created, deleted, or moved-in/out
+  if (!exists) return 'deleted';
+  return knownPaths.has(rel) ? 'modified' : 'created';
+}
+
+function seedKnownPaths(dir, rel = '') {
+  try {
+    for (const ent of fs.readdirSync(dir, { withFileTypes: true })) {
+      if (IGNORE_NAMES.has(ent.name)) continue;
+      const sub = rel ? rel + '/' + ent.name : ent.name;
+      knownPaths.add(sub);
+      if (ent.isDirectory() && knownPaths.size < 20000) {
+        seedKnownPaths(join(dir, ent.name), sub);
       }
     }
-    resetChat();
-    json(res, { ok: true });
-    return;
-  }
+  } catch {}
+}
 
-  // ── API: clear chat ──
-  if (req.method === 'POST' && url.pathname === '/api/clear') {
-    resetChat();
-    currentSessionId = null;
-    json(res, { ok: true });
-    return;
+function startWatcher() {
+  seedKnownPaths(workingDir);
+  try {
+    watcher = fs.watch(workingDir, { recursive: true }, (event, filename) => {
+      if (!filename) return;
+      // Normalize to forward slashes, skip ignored
+      const rel = filename.split(sep).join('/');
+      const top = rel.split('/')[0];
+      if (IGNORE_NAMES.has(top)) return;
+      const now = Date.now();
+      const last = recentEvents.get(rel) || 0;
+      if (now - last < 250) return; // dedupe
+      recentEvents.set(rel, now);
+      if (recentEvents.size > 500) { // bounded
+        const cutoff = now - 10000;
+        for (const [k, t] of recentEvents) if (t < cutoff) recentEvents.delete(k);
+      }
+      const abs = pathResolve(workingDir, rel);
+      const kind = classifyEvent(event, rel, abs);
+      if (kind === 'deleted') knownPaths.delete(rel);
+      else knownPaths.add(rel);
+      let isDir = false;
+      try { isDir = fs.statSync(abs).isDirectory(); } catch {}
+      const enriched = { event, kind, path: rel, isDir, ts: now };
+      // remember for new clients (cap at 50)
+      recentActivity.push(enriched);
+      if (recentActivity.length > 50) recentActivity.shift();
+      const payload = JSON.stringify(enriched);
+      for (const c of eventsClients) {
+        if (c.readyState === c.OPEN) { try { c.send(payload); } catch {} }
+      }
+    });
+    dbg('fs.watch started on', workingDir);
+  } catch (e) {
+    console.error('[ui] fs.watch failed:', e.message);
   }
+}
 
-  // ── API: stop generation ──
-  if (req.method === 'POST' && url.pathname === '/api/stop') {
-    abortFlag = true;
-    json(res, { ok: true });
-    return;
+wssEvents.on('connection', (ws) => {
+  eventsClients.add(ws);
+  dbg('events client connected (total=' + eventsClients.size + ')');
+  // Replay last activity so the new tab sees recent changes
+  if (recentActivity.length) {
+    try { ws.send(JSON.stringify({ type: 'activity-replay', items: recentActivity.slice(-25) })); } catch {}
   }
+  if (lastStats) { try { ws.send(lastStats); } catch {} }
+  ws.on('close', () => { eventsClients.delete(ws); });
+});
 
-  // ── API: chat (SSE streaming) ──
-  if (req.method === 'POST' && url.pathname === '/api/chat') {
-    const body = await readBody(req);
-    const userMsg = body.message;
-    if (!userMsg) { json(res, { error: 'No message' }, 400); return; }
-    if (!serverModel) { json(res, { error: 'No model selected' }, 400); return; }
-
-    if (serverMessages.length === 0) resetChat();
-    serverMessages.push({ role: 'user', content: userMsg });
-
-    res.writeHead(200, {
-      'Content-Type': 'text/event-stream',
-      'Cache-Control': 'no-cache, no-transform',
-      'Connection': 'keep-alive',
-      'X-Accel-Buffering': 'no',
-    });
-    res.flushHeaders();
+// ── System stats poller (RAM + GPU on macOS) ─────────────────────
 
+let lastStats = null;
+let statsTimer = null;
+let lastCpuSample = null;
+
+function broadcastEvents(payload) {
+  for (const c of eventsClients) {
+    if (c.readyState === c.OPEN) { try { c.send(payload); } catch {} }
+  }
+}
+
+function runCmd(cmd, args, timeoutMs = 1500) {
+  return new Promise((resolve) => {
+    let out = ''; let done = false;
     try {
-      const stream = chatStream(serverMessages, serverModel, serverAgentTools);
-      let clientClosed = false;
-      res.on('close', () => { clientClosed = true; });
-      for await (const evt of stream) {
-        if (clientClosed) break;
-        const ok = res.write(`data: ${JSON.stringify(evt)}\n\n`);
-        if (!ok && !clientClosed) await new Promise(r => {
-          res.once('drain', r);
-          res.once('close', r);
-        });
-      }
-    } catch (e) {
-      try { res.write(`data: ${JSON.stringify({ type: 'system', data: 'Error: ' + e.message })}\n\n`); } catch {}
-    }
-    res.write('data: [DONE]\n\n');
-    res.end();
-    return;
+      const p = spawn(cmd, args);
+      const t = setTimeout(() => { if (!done) { done = true; try { p.kill(); } catch {} resolve(''); } }, timeoutMs);
+      p.stdout.on('data', (d) => { out += d.toString(); });
+      p.on('error', () => { if (!done) { done = true; clearTimeout(t); resolve(''); } });
+      p.on('close', () => { if (!done) { done = true; clearTimeout(t); resolve(out); } });
+    } catch { resolve(''); }
+  });
+}
+
+async function readMemMac() {
+  // Parse vm_stat. On Apple Silicon page size = 16384, on Intel = 4096.
+  const out = await runCmd('vm_stat', []);
+  if (!out) return null;
+  const pageMatch = out.match(/page size of (\d+)/);
+  const pageSize = pageMatch ? parseInt(pageMatch[1], 10) : 4096;
+  function pages(name) {
+    const m = out.match(new RegExp(name + '[^\\d]+(\\d+)'));
+    return m ? parseInt(m[1], 10) : 0;
+  }
+  const wired = pages('Pages wired down');
+  const active = pages('Pages active');
+  const compressed = pages('Pages occupied by compressor');
+  const used = (wired + active + compressed) * pageSize;
+  const total = os.totalmem();
+  return { used, total, percent: total > 0 ? Math.round((used / total) * 100) : 0 };
+}
+
+async function readGPUMac() {
+  // ioreg dumps GPU performance stats including "Device Utilization %"
+  const out = await runCmd('ioreg', ['-r', '-c', 'IOAccelerator', '-d', '1', '-w', '0']);
+  if (!out) return null;
+  const m = out.match(/"Device Utilization %"\s*=\s*(\d+)/);
+  if (!m) return null;
+  const memMatch = out.match(/"In use system memory"\s*=\s*(\d+)/);
+  return {
+    percent: parseInt(m[1], 10),
+    memBytes: memMatch ? parseInt(memMatch[1], 10) : null,
+  };
+}
+
+function readCPU() {
+  const cpus = os.cpus();
+  let idle = 0; let total = 0;
+  for (const c of cpus) {
+    for (const k of Object.keys(c.times)) total += c.times[k];
+    idle += c.times.idle;
   }
+  if (!lastCpuSample) { lastCpuSample = { idle, total }; return null; }
+  const di = idle - lastCpuSample.idle;
+  const dt = total - lastCpuSample.total;
+  lastCpuSample = { idle, total };
+  if (dt <= 0) return null;
+  return { percent: Math.max(0, Math.min(100, Math.round((1 - di / dt) * 100))), cores: cpus.length };
+}
+
+async function pollStats() {
+  const isMac = process.platform === 'darwin';
+  const [mem, gpu] = await Promise.all([
+    isMac ? readMemMac() : null,
+    isMac ? readGPUMac() : null,
+  ]);
+  const cpu = readCPU();
+  const payload = JSON.stringify({
+    type: 'stats', ts: Date.now(),
+    platform: process.platform,
+    cpu, mem, gpu,
+    totalMem: os.totalmem(),
+  });
+  lastStats = payload;
+  if (eventsClients.size > 0) broadcastEvents(payload);
+}
 
-  // ── 404 ──
-  res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
-  res.end('Not found');
-});
+function startStatsPoll() {
+  pollStats(); // first sample primes cpu delta
+  statsTimer = setInterval(pollStats, 1500);
+}
 
-// ─── Launch ────────────────────────────────────────────────
+// ─── Launch ──────────────────────────────────────────────────────
 
 server.listen(PORT, () => {
   const url = `http://localhost:${PORT}`;
-  console.log(`\n  ⚡ Sapper UI running at ${url}\n`);
+  console.log(`\n  \x1b[36m⚡ Sapper Web\x1b[0m running at \x1b[1m${url}\x1b[0m`);
+  console.log(`  Working dir: ${workingDir}\n`);
+  startWatcher();
+  startStatsPoll();
+
+  if (process.env.SAPPER_UI_NO_OPEN) return;
 
   const browsers = [
     ['open', ['-na', 'Google Chrome', '--args', `--app=${url}`, '--new-window']],
@@ -2019,16 +2231,15 @@ server.listen(PORT, () => {
     ['open', ['-na', 'Brave Browser', '--args', `--app=${url}`]],
     ['open', [url]],
   ];
-
-  let opened = false;
   for (const [cmd, args] of browsers) {
-    if (opened) break;
     try {
-      const proc = spawn(cmd, args, { stdio: 'ignore', detached: true });
-      proc.unref();
-      proc.on('error', () => {});
-      opened = true;
+      const p = spawn(cmd, args, { stdio: 'ignore', detached: true });
+      p.unref();
+      p.on('error', () => {});
+      break;
     } catch {}
   }
-  if (!opened) console.log(`  Open manually: ${url}`);
 });
+
+process.on('SIGINT', () => { console.log('\nShutting down…'); try { watcher && watcher.close(); } catch {} process.exit(0); });
+process.on('SIGTERM', () => process.exit(0));