@rotriz/pi-web-ui 1.0.0

package/server.mjs

@@ -0,0 +1,1398 @@
+// pi-web-ui — a DeepSeek-Harness-style Web UI for the pi coding agent.
+// Layout replicated from deepseek-harness `dsh web`:
+//   sidebar | conversation (view tabs, disclosure rows, stats dock) | details
+// Run:  node ~/pi-web-ui/server.mjs   ->  http://localhost:3123
+//
+// PARALLEL SESSIONS: Multiple sessions can run concurrently, each in its own
+// "tab" identified by a unique tabId. SSE streams are per-tab. The UI manages
+// tabs client-side and routes all API calls through ?tab=<tabId> or JSON body.
+
+import { createServer } from "node:http";
+import { readFileSync, existsSync, readdirSync, renameSync, statSync } from "node:fs";
+import { basename, join, dirname, relative, resolve } from "node:path";
+import { homedir } from "node:os";
+import { fileURLToPath } from "node:url";
+import { randomUUID } from "node:crypto";
+import { execFile } from "node:child_process";
+
+const PORT = process.env.PORT || 3123;
+const CWD = process.cwd();
+const HERE = dirname(fileURLToPath(import.meta.url));
+
+// Resolve the pi-coding-agent module: env override → bare specifier → relative to pi entry
+async function resolvePiModule() {
+  const attempts = [];
+  if (process.env.PI_WEB_PI_MODULE) attempts.push(process.env.PI_WEB_PI_MODULE);
+  attempts.push("@earendil-works/pi-coding-agent");
+  const entry = process.argv[1];
+  if (entry) {
+    const dir = dirname(entry);
+    attempts.push(join(dir, "..", "dist", "index.js"));
+    attempts.push(join(dir, "index.js"));
+  }
+  // Try global node_modules as last resort
+  const globalPrefix = process.env.NODE_PATH?.split(":")[0];
+  if (globalPrefix) attempts.push(join(globalPrefix, "@earendil-works/pi-coding-agent/dist/index.js"));
+  for (const attempt of attempts) {
+    try { return await import(attempt); } catch {}
+  }
+  throw new Error("Could not resolve @earendil-works/pi-coding-agent. Install it globally or set PI_WEB_PI_MODULE.");
+}
+const pi = await resolvePiModule();
+
+const {
+  createAgentSessionRuntime,
+  createAgentSessionFromServices,
+  createAgentSessionServices,
+  DefaultResourceLoader,
+  SessionManager,
+  SettingsManager,
+  getAgentDir,
+} = pi;
+
+const AGENT_DIR = getAgentDir();
+
+const createRuntime = async ({ cwd, sessionManager, sessionStartEvent }) => {
+  const services = await createAgentSessionServices({ cwd });
+  return {
+    ...(await createAgentSessionFromServices({ services, sessionManager, sessionStartEvent })),
+    services,
+    diagnostics: services.diagnostics,
+  };
+};
+
+// ---------------------------------------------------------------------------
+// Shared workspace state (settings, loader) — common across all tabs
+// ---------------------------------------------------------------------------
+
+const shared = {};
+
+async function buildShared(cwd) {
+  const settingsManager = SettingsManager.create(cwd);
+  const loader = new DefaultResourceLoader({ cwd, agentDir: AGENT_DIR, settingsManager });
+  await loader.reload();
+  Object.assign(shared, { cwd, settingsManager, loader });
+}
+
+await buildShared(CWD);
+
+// ---------------------------------------------------------------------------
+// Tab / parallel session management
+// ---------------------------------------------------------------------------
+
+// Each tab is an independent session with its own runtime, stats, and SSE clients
+const tabs = new Map(); // tabId -> TabState
+
+class TabState {
+  constructor(id, runtime, tabName) {
+    this.id = id;
+    this.runtime = runtime;
+    this.tabName = tabName || null; // persistent tab name (null = use session subject)
+    this.clients = new Set(); // SSE response objects
+    this.stats = { turns: 0, steps: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, cost: 0 };
+    this.createdAt = Date.now();
+    this.bindEvents();
+  }
+
+  get session() { return this.runtime.session; }
+
+  broadcast(event) {
+    const data = `data: ${JSON.stringify(event)}\n\n`;
+    for (const res of this.clients) res.write(data);
+  }
+
+  resetStats() {
+    this.stats = { turns: 0, steps: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, cost: 0 };
+  }
+
+  cachePct() {
+    const billed = this.stats.input + this.stats.cacheRead + this.stats.cacheWrite;
+    return billed ? Math.round((this.stats.cacheRead / billed) * 100) : 0;
+  }
+
+  statsSnapshot() {
+    const context = this.session.getContextUsage();
+    const contextWindow = context?.contextWindow ?? this.session.model?.contextWindow ?? null;
+    const contextTokens = context?.tokens ?? null;
+    const contextPercent = context?.percent ?? null;
+    return {
+      ...this.stats,
+      cachePct: this.cachePct(),
+      contextTokens,
+      contextWindow,
+      contextPercent,
+      contextRemaining: contextTokens == null || contextWindow == null
+        ? null
+        : Math.max(0, contextWindow - contextTokens),
+    };
+  }
+
+  bindEvents() {
+    const s = this.session;
+    s.subscribe((event) => {
+      switch (event.type) {
+        case "message_update": {
+          const update = event.assistantMessageEvent;
+          if (update.type === "text_delta" && typeof update.delta === "string" && update.delta.length > 0)
+            this.broadcast({ type: "delta", delta: update.delta });
+          if (update.type === "thinking_delta" && typeof update.delta === "string" && update.delta.length > 0)
+            this.broadcast({ type: "thinking_delta", delta: update.delta });
+          break;
+        }
+        case "message_end": {
+          const m = event.message;
+          if (m.role === "assistant") {
+            this.stats.steps += 1;
+            const u = m.usage ?? {};
+            this.stats.input += u.input ?? 0;
+            this.stats.output += u.output ?? 0;
+            this.stats.cacheRead += u.cacheRead ?? 0;
+            this.stats.cacheWrite += u.cacheWrite ?? 0;
+            this.stats.cost += u.cost?.total ?? 0;
+            const text = renderContent(m.content);
+            const thinking = renderThinking(m.content);
+            if (text.trim() || thinking.trim())
+              this.broadcast({
+                type: "message_end", role: "assistant", text, thinking,
+                usage: { input: u.input ?? 0, output: u.output ?? 0, cost: u.cost?.total ?? 0 },
+              });
+            this.broadcast({ type: "stats", stats: this.statsSnapshot() });
+          } else if (m.role === "user") {
+            const text = renderContent(m.content);
+            if (text.trim()) this.broadcast({ type: "message_end", role: "user", text });
+          }
+          break;
+        }
+        case "turn_end":
+          this.stats.turns += 1;
+          this.broadcast({ type: "stats", stats: this.statsSnapshot() });
+          break;
+        case "tool_execution_start":
+          this.broadcast({
+            type: "tool_start", toolCallId: event.toolCallId,
+            toolName: event.toolName, args: event.args,
+          });
+          break;
+        case "tool_execution_update":
+          this.broadcast({
+            type: "tool_output", toolCallId: event.toolCallId,
+            chunk: String(event.partialResult ?? "").slice(-2000),
+          });
+          break;
+        case "tool_execution_end": {
+          let text = "";
+          const r = event.result;
+          if (typeof r === "string") text = r;
+          else if (Array.isArray(r)) text = r.map((b) => b.text ?? `[${b.type}]`).join("\n");
+          else if (r?.content) text = r.content.map((b) => b.text ?? `[${b.type}]`).join("\n");
+          else text = JSON.stringify(r ?? {});
+          this.broadcast({
+            type: "tool_end", toolCallId: event.toolCallId,
+            isError: !!event.isError, output: String(text).slice(0, 50000),
+          });
+          break;
+        }
+        case "agent_start": this.broadcast({ type: "status", status: "running" }); break;
+        case "agent_settled": this.broadcast({ type: "status", status: "idle" }); break;
+        case "auto_retry_start": this.broadcast({ type: "status", status: "retrying" }); break;
+      }
+    });
+  }
+
+  async replaceSession(setup) {
+    await setup();
+    this.resetStats();
+    this.bindEvents();
+    this.broadcast({
+      type: "init",
+      messages: transcriptSnapshot(this.session),
+      cwd: shared.cwd,
+      sessionFile: this.session.sessionFile,
+      sessionName: sessionSubject(this.session),
+      stats: this.statsSnapshot(),
+    });
+  }
+
+  initPayload() {
+    return {
+      type: "init",
+      tabId: this.id,
+      messages: transcriptSnapshot(this.session),
+      cwd: shared.cwd,
+      sessionFile: this.session.sessionFile,
+      sessionName: sessionSubject(this.session),
+      stats: this.statsSnapshot(),
+    };
+  }
+}
+
+async function createTab(cwd, { resumeSessionFile } = {}) {
+  cwd = cwd || shared.cwd;
+  const id = randomUUID().slice(0, 8);
+  const sessionManager = SessionManager.create(cwd);
+  const runtime = await createAgentSessionRuntime(createRuntime, {
+    cwd,
+    agentDir: AGENT_DIR,
+    sessionManager,
+  });
+  // If a session file was provided, resume it after the runtime is ready
+  if (resumeSessionFile && existsSync(resumeSessionFile)) {
+    try {
+      await runtime.switchSession(resumeSessionFile);
+    } catch (err) {
+      console.warn(`[pi-web-ui] Could not resume session ${resumeSessionFile}: ${err.message}`);
+    }
+  }
+  const tabName = `Tab ${tabs.size + 1}`;
+  const tab = new TabState(id, runtime, tabName);
+  tabs.set(id, tab);
+  // Broadcast to global listeners that a new tab exists
+  broadcastGlobal({ type: "tabs_changed", tabs: listTabs() });
+  return tab;
+}
+
+function removeTab(id) {
+  const tab = tabs.get(id);
+  if (!tab) return false;
+  // Close all SSE connections for this tab
+  for (const res of tab.clients) {
+    res.write(`data: ${JSON.stringify({ type: "tab_closed" })}\n\n`);
+    res.end();
+  }
+  tab.clients.clear();
+  tabs.delete(id);
+  broadcastGlobal({ type: "tabs_changed", tabs: listTabs() });
+  return true;
+}
+
+function listTabs() {
+  return [...tabs.values()].map((tab) => ({
+    id: tab.id,
+    sessionFile: tab.session.sessionFile,
+    name: tab.tabName || `Tab ${[...tabs.keys()].indexOf(tab.id) + 1}`,
+    sessionName: sessionSubject(tab.session),
+    streaming: tab.session.isStreaming,
+    cwd: shared.cwd,
+    createdAt: tab.createdAt,
+  }));
+}
+
+// Global SSE clients (for tab list updates, etc.)
+const globalClients = new Set();
+function broadcastGlobal(event) {
+  const data = `data: ${JSON.stringify(event)}\n\n`;
+  for (const res of globalClients) res.write(data);
+}
+
+// Create initial default tab — resume the most recent session if one exists
+let lastSessionFile = null;
+try {
+  const allSessions = await SessionManager.listAll().catch(() => []);
+  const projectSessions = await SessionManager.list(CWD).catch(() => []);
+  const candidates = [...projectSessions, ...allSessions]
+    .map((entry) => typeof entry === "string" ? { file: entry } : { file: entry.file ?? entry.path, modified: entry.modified ?? entry.mtime })
+    .filter((s) => s.file && existsSync(s.file));
+  // Prefer the most recently modified session
+  if (candidates.length > 0) {
+    candidates.sort((a, b) => {
+      const ma = a.modified ?? statSync(a.file).mtimeMs;
+      const mb = b.modified ?? statSync(b.file).mtimeMs;
+      return mb - ma;
+    });
+    lastSessionFile = candidates[0].file;
+  }
+} catch (err) {
+  console.warn(`[pi-web-ui] Could not find last session: ${err.message}`);
+}
+
+// Switch workspace to match the resumed session's workspace
+let startupCwd = CWD;
+if (lastSessionFile) {
+  const sessionWs = extractWorkspacePath(lastSessionFile);
+  if (sessionWs && existsSync(sessionWs)) {
+    startupCwd = sessionWs;
+    if (startupCwd !== CWD) await buildShared(startupCwd);
+  }
+}
+
+const defaultTab = await createTab(startupCwd, { resumeSessionFile: lastSessionFile });
+
+console.log(`[pi-web-ui] cwd: ${shared.cwd}`);
+console.log(`[pi-web-ui] default tab: ${defaultTab.id}`);
+console.log(`[pi-web-ui] session: ${defaultTab.session.sessionFile ?? "in-memory"}`);
+console.log(`[pi-web-ui] model: ${defaultTab.session.model ? `${defaultTab.session.model.provider}/${defaultTab.session.model.id}` : "(none)"}`);
+
+// ---------------------------------------------------------------------------
+// Helpers (content rendering, session naming, transcript)
+// ---------------------------------------------------------------------------
+
+function renderContent(content) {
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return "";
+  return content
+    .filter((block) => block?.type === "text" && typeof block.text === "string")
+    .map((block) => block.text)
+    .join("\n");
+}
+
+function renderThinking(content) {
+  if (!Array.isArray(content)) return "";
+  return content
+    .filter((b) => b.type === "thinking")
+    .map((b) => b.thinking ?? b.text ?? "")
+    .filter((text) => String(text).trim())
+    .join("\n\n");
+}
+
+function deriveSubject(text, maxLength = 64) {
+  const clean = String(text ?? "")
+    .replace(/```[\s\S]*?```/g, " code ")
+    .replace(/[`*_#>~[\]()]/g, " ")
+    .replace(/^\s*(?:[-+]|\d+[.)])\s+/, "")
+    .replace(/\s+/g, " ")
+    .trim();
+  if (!clean) return "New session";
+  const firstSentence = clean.match(/^.*?[.!?](?:\s|$)/)?.[0]?.trim();
+  const subject = firstSentence && firstSentence.length >= 12 ? firstSentence : clean;
+  if (subject.length <= maxLength) return subject.replace(/[.!?]+$/, "");
+  const clipped = subject.slice(0, maxLength - 1);
+  const boundary = clipped.lastIndexOf(" ");
+  return `${clipped.slice(0, boundary >= 24 ? boundary : clipped.length).trimEnd()}…`;
+}
+
+function persistedSessionName(s) {
+  const file = s.sessionFile;
+  if (!file || !existsSync(file)) return null;
+  let name = null;
+  try {
+    for (const line of readFileSync(file, "utf8").split("\n")) {
+      if (!line) continue;
+      const entry = JSON.parse(line);
+      if (entry.type === "session_info" && typeof entry.name === "string" && entry.name.trim()) {
+        name = entry.name.trim();
+      }
+    }
+  } catch {}
+  return name;
+}
+
+function sessionSubject(s) {
+  const explicitName = persistedSessionName(s);
+  if (explicitName) return explicitName;
+  const firstUserMessage = s.messages.find((message) => message.role === "user");
+  return firstUserMessage ? deriveSubject(renderContent(firstUserMessage.content)) : "New session";
+}
+
+function assignInitialSessionSubject(s, text) {
+  const hasUserMessage = s.messages.some((message) => message.role === "user");
+  if (hasUserMessage || persistedSessionName(s)) return null;
+  const name = deriveSubject(text);
+  s.setSessionName(name);
+  return name;
+}
+
+function transcriptSnapshot(s) {
+  const items = [];
+  const toolsById = new Map();
+
+  const pushMessage = (role, text) => {
+    if (typeof text === "string" && text.trim()) items.push({ type: "message", role, text });
+  };
+
+  for (const message of s.messages) {
+    if (message.role === "user") {
+      pushMessage("user", renderContent(message.content));
+      continue;
+    }
+
+    if (message.role === "assistant") {
+      if (typeof message.content === "string") {
+        pushMessage("assistant", message.content);
+      } else if (Array.isArray(message.content)) {
+        for (const block of message.content) {
+          if (block?.type === "thinking") {
+            const text = block.thinking ?? block.text ?? "";
+            if (String(text).trim()) items.push({ type: "thinking", text: String(text) });
+          } else if (block?.type === "text") {
+            pushMessage("assistant", block.text);
+          } else if (["toolCall", "tool_call", "tool_use"].includes(block?.type)) {
+            const toolCallId = block.id ?? block.toolCallId ?? "";
+            const tool = {
+              type: "tool",
+              toolCallId,
+              toolName: block.name ?? block.toolName ?? "tool",
+              args: block.arguments ?? block.input ?? {},
+              output: null,
+              isError: false,
+            };
+            items.push(tool);
+            if (toolCallId) toolsById.set(toolCallId, tool);
+          }
+        }
+      }
+      if (message.stopReason === "error" && message.errorMessage) {
+        items.push({ type: "error", text: message.errorMessage });
+      }
+      continue;
+    }
+
+    if (message.role === "toolResult") {
+      const toolCallId = message.toolCallId ?? "";
+      const output = renderContent(message.content);
+      const existing = toolsById.get(toolCallId);
+      if (existing) {
+        existing.output = output;
+        existing.isError = !!message.isError;
+        existing.toolName ||= message.toolName ?? "tool";
+      } else {
+        items.push({
+          type: "tool",
+          toolCallId,
+          toolName: message.toolName ?? "tool",
+          args: {},
+          output,
+          isError: !!message.isError,
+        });
+      }
+    }
+  }
+  return items;
+}
+
+// ---------------------------------------------------------------------------
+// Tab data / utilities
+// ---------------------------------------------------------------------------
+
+const readJsonSafe = (path) => {
+  try {
+    return existsSync(path) ? JSON.parse(readFileSync(path, "utf8")) : null;
+  } catch {
+    return { error: "could not parse file" };
+  }
+};
+
+async function logsData(url, s) {
+  const lines = Math.min(parseInt(url.searchParams.get("lines") ?? "200", 10) || 200, 2000);
+  const file = s.sessionFile;
+  if (!file || !existsSync(file)) return { file, entries: [] };
+  const raw = readFileSync(file, "utf8").split("\n").filter(Boolean);
+  const entries = raw.slice(-lines).map((line) => {
+    try {
+      const e = JSON.parse(line);
+      const m = e.message ?? {};
+      const contentText = typeof m.content === "string" ? m.content
+        : Array.isArray(m.content)
+          ? m.content.map((b) =>
+              b.text ?? (b.thinking ? "[thinking] " + b.thinking : b.name ? `[${b.type}: ${b.name}]` : `[${b.type}]`)).join("\n")
+          : e.summary ?? e.customType ?? "";
+      return {
+        id: e.id?.slice(0, 8), type: e.type,
+        ts: e.timestamp ? new Date(e.timestamp).toLocaleTimeString() : undefined,
+        role: m.role ?? m.type,
+        preview: contentText.slice(0, 800),
+        usage: m.usage ? `${m.usage.input ?? 0}/${m.usage.output ?? 0}` : undefined,
+      };
+    } catch {
+      return { type: "unparsed", preview: line.slice(0, 200) };
+    }
+  });
+  return { file, totalLines: raw.length, entries };
+}
+
+function skillsData() {
+  const skillsResult = shared.loader.getSkills();
+  const promptsResult = shared.loader.getPrompts();
+  const extResult = shared.loader.getExtensions();
+  return {
+    skills: skillsResult.skills ?? [],
+    prompts: promptsResult.prompts ?? [],
+    extensions: extResult.extensions ?? [],
+  };
+}
+
+function configData() {
+  const cwd = shared.cwd;
+  const projectSettings = join(cwd, ".pi", "settings.json");
+  return {
+    agentDir: AGENT_DIR,
+    files: [
+      { label: `Global (${join(AGENT_DIR, "settings.json")})`, data: readJsonSafe(join(AGENT_DIR, "settings.json")) },
+      { label: `Project (${projectSettings})`, data: readJsonSafe(projectSettings) },
+      { label: `Custom models (${join(AGENT_DIR, "models.json")})`, data: readJsonSafe(join(AGENT_DIR, "models.json")) },
+    ],
+  };
+}
+
+async function availableModels(tab) {
+  const runtime = tab.runtime.services.modelRuntime;
+  await runtime.refresh({ allowNetwork: false });
+  return runtime.getAvailable();
+}
+
+async function modelsData(tab) {
+  const available = await availableModels(tab);
+  return {
+    current: tab.session.model
+      ? { provider: tab.session.model.provider, id: tab.session.model.id, contextWindow: tab.session.model.contextWindow }
+      : null,
+    thinkingLevel: tab.session.thinkingLevel,
+    available: available.map((m) => ({
+      provider: m.provider, id: m.id, name: m.name,
+      reasoning: !!m.reasoning, contextWindow: m.contextWindow,
+    })),
+  };
+}
+
+function extractWorkspacePath(filePath) {
+  if (!filePath) return null;
+  // Decode the full workspace path from the session directory name
+  const sessionsMatch = filePath.match(/\/sessions\/(--.*?--)(?:\/|$)/);
+  if (sessionsMatch) {
+    const encoded = sessionsMatch[1];
+    const inner = encoded.slice(2, -2); // e.g. "Users-username-Documents-Projects-Time"
+    const home = homedir().replace(/\//g, "-").replace(/^-/, "");
+    if (inner === home) return homedir();
+    if (inner.startsWith(home + "-")) {
+      const rest = inner.slice(home.length + 1);
+      const homePath = homedir();
+      const parts = rest.split("-");
+      let resolved = homePath;
+      for (let i = 0; i < parts.length; i++) {
+        let found = false;
+        for (let j = parts.length; j > i; j--) {
+          const candidate = parts.slice(i, j).join("-");
+          const testPath = join(resolved, candidate);
+          if (existsSync(testPath) && statSync(testPath).isDirectory()) {
+            resolved = testPath;
+            i = j - 1;
+            found = true;
+            break;
+          }
+        }
+        if (!found) break;
+      }
+      return resolved;
+    }
+  }
+  return null;
+}
+
+function extractWorkspace(filePath) {
+  if (!filePath) return null;
+  // Session files are stored under ~/.pi/agent/sessions/--<encoded-path>--/<file>.jsonl
+  // The encoded path replaces / with - (e.g., /Users/name/Documents/Projects/Time → --Users-name-Documents-Projects-Time--)
+  const sessionsMatch = filePath.match(/\/sessions\/(--.*?--)(?:\/|$)/);
+  if (sessionsMatch) {
+    const encoded = sessionsMatch[1]; // "--Users-name-Documents-Projects-Time--"
+    const inner = encoded.slice(2, -2); // "Users-name-Documents-Projects-Time"
+    // Strip the home dir prefix to get the project-relative portion
+    const home = homedir().replace(/\//g, "-").replace(/^-/, ""); // "Users-name"
+    if (inner === home) return "Home";
+    if (inner.startsWith(home + "-")) {
+      const rest = inner.slice(home.length + 1); // "Documents-Projects-Time"
+      // Try to resolve against actual filesystem to get the deepest valid directory
+      const homePath = homedir();
+      const parts = rest.split("-");
+      let resolved = homePath;
+      let lastValid = "Home";
+      for (let i = 0; i < parts.length; i++) {
+        // Try progressively joining segments (handles multi-word dir names with dashes)
+        let found = false;
+        for (let j = parts.length; j > i; j--) {
+          const candidate = parts.slice(i, j).join("-");
+          const testPath = join(resolved, candidate);
+          if (existsSync(testPath) && statSync(testPath).isDirectory()) {
+            resolved = testPath;
+            lastValid = candidate;
+            i = j - 1; // skip the consumed segments
+            found = true;
+            break;
+          }
+        }
+        if (!found) {
+          // Can't resolve further; use remaining as-is
+          lastValid = parts.slice(i).join("-");
+          break;
+        }
+      }
+      return lastValid;
+    }
+    // Non-home path: just use the last segment
+    const parts = inner.split("-");
+    return parts[parts.length - 1] || inner;
+  }
+  // Fallback: look for /.pi/ in the path (project-local sessions)
+  const piIndex = filePath.indexOf("/.pi/");
+  if (piIndex > 0) {
+    const projectDir = filePath.slice(0, piIndex);
+    return basename(projectDir);
+  }
+  return null;
+}
+
+async function sessionsData(tab) {
+  const [projectSessions, allSessions] = await Promise.all([
+    SessionManager.list(shared.cwd).catch(() => []),
+    SessionManager.listAll().catch(() => []),
+  ]);
+  const fmt = (entry) => {
+    if (typeof entry === "string") {
+      return { file: entry, subject: deriveSubject(entry.split("/").pop()), workspace: extractWorkspace(entry) };
+    }
+    return {
+      file: entry.file ?? entry.path,
+      name: entry.name,
+      firstMessage: entry.firstMessage,
+      subject: entry.name?.trim() || deriveSubject(entry.firstMessage),
+      created: entry.created,
+      modified: entry.modified ?? entry.mtime,
+      messageCount: entry.messageCount,
+      workspace: extractWorkspace(entry.file ?? entry.path),
+    };
+  };
+  const activeTab = tab || defaultTab;
+  return {
+    current: activeTab.session.sessionFile,
+    currentName: sessionSubject(activeTab.session),
+    project: projectSessions.map(fmt),
+    all: allSessions.map(fmt),
+  };
+}
+
+async function moveSessionToTrash(file, tab) {
+  if (typeof file !== "string" || !file.trim()) throw new Error("session file is required");
+  const target = resolve(file);
+  const indexed = await sessionsData();
+  const allowed = new Set(
+    [...indexed.project, ...indexed.all]
+      .map((item) => item.file)
+      .filter(Boolean)
+      .map((item) => resolve(item)),
+  );
+  if (!allowed.has(target)) throw new Error("session not found");
+  if (!existsSync(target) || !statSync(target).isFile()) throw new Error("session file is unavailable");
+
+  const activeFile = tab.session.sessionFile ? resolve(tab.session.sessionFile) : null;
+  const wasActive = activeFile === target;
+  if (wasActive) {
+    if (tab.session.isStreaming) throw new Error("stop the active response before deleting this session");
+    await tab.replaceSession(async () => {
+      const result = await tab.runtime.newSession();
+      if (result?.cancelled) throw new Error("new session was cancelled; nothing was deleted");
+    });
+  }
+
+  const trashDir = join(homedir(), ".Trash");
+  if (!existsSync(trashDir) || !statSync(trashDir).isDirectory()) {
+    throw new Error("macOS Trash is unavailable");
+  }
+  const originalName = basename(target);
+  let destination = join(trashDir, originalName);
+  if (existsSync(destination)) {
+    const stem = originalName.endsWith(".jsonl") ? originalName.slice(0, -6) : originalName;
+    let suffix = Date.now();
+    do destination = join(trashDir, `${stem}-${suffix++}.jsonl`);
+    while (existsSync(destination));
+  }
+  renameSync(target, destination);
+  tab.broadcast({ type: "sessions_changed" });
+  return { ok: true, wasActive, trashedAs: basename(destination) };
+}
+
+const WEB_COMMANDS = [
+  { name: "settings", description: "Open Web UI settings", action: "settings" },
+  { name: "model", description: "Search or switch models", argumentHint: "<provider/model>", action: "model" },
+  { name: "new", description: "Start a new session", action: "new" },
+  { name: "resume", description: "Browse saved sessions", action: "resume" },
+  { name: "name", description: "Set the current session name", argumentHint: "<name>", action: "server" },
+  { name: "session", description: "Show current session statistics", action: "server" },
+  { name: "compact", description: "Compact the current context", argumentHint: "[instructions]", action: "server" },
+  { name: "reload", description: "Reload extensions, skills, prompts, and context", action: "server" },
+  { name: "newtab", description: "Open a new parallel session tab", action: "newtab" },
+];
+
+function commandsData(tab) {
+  const prompts = shared.loader.getPrompts().prompts ?? [];
+  const skills = shared.loader.getSkills().skills ?? [];
+  let extensions = [];
+  try {
+    extensions = tab.session.extensionRunner.getRegisteredCommands()
+      .filter((command) => !WEB_COMMANDS.some((builtin) => builtin.name === command.name))
+      .map((command) => ({
+        name: command.invocationName ?? command.name,
+        description: command.description ?? "Extension command",
+        source: "extension",
+      }));
+  } catch {}
+  return {
+    commands: [
+      ...WEB_COMMANDS.map((command) => ({ ...command, source: "builtin" })),
+      ...prompts.map((prompt) => ({
+        name: prompt.name, description: prompt.description ?? "Prompt template",
+        argumentHint: prompt.argumentHint, source: "prompt",
+      })),
+      ...extensions,
+      ...skills.map((skill) => ({
+        name: `skill:${skill.name}`, description: skill.description ?? "Skill", source: "skill",
+      })),
+    ],
+    skills: skills.map((skill) => ({ name: skill.name, description: skill.description ?? "", command: `/skill:${skill.name}` })),
+  };
+}
+
+function workspaceSearch(url) {
+  const query = (url.searchParams.get("q") ?? "").trim().toLowerCase();
+  const limit = Math.min(Math.max(parseInt(url.searchParams.get("limit") ?? "80", 10) || 80, 1), 200);
+  const maxDepth = 7;
+  const maxVisited = 6000;
+  const skipped = new Set([".git", "node_modules", ".next", ".cache", "dist", "build", "coverage"]);
+  const items = [];
+  let visited = 0;
+
+  const walk = (directory, depth) => {
+    if (depth > maxDepth || visited >= maxVisited || items.length >= limit) return;
+    let entries;
+    try {
+      entries = readdirSync(directory, { withFileTypes: true })
+        .filter((entry) => !entry.isSymbolicLink())
+        .sort((a, b) => Number(b.isDirectory()) - Number(a.isDirectory()) || a.name.localeCompare(b.name));
+    } catch { return; }
+
+    for (const entry of entries) {
+      if (visited++ >= maxVisited || items.length >= limit) break;
+      if (entry.isDirectory() && skipped.has(entry.name)) continue;
+      if (entry.name.startsWith(".") && !query.startsWith(".")) continue;
+      const absolute = join(directory, entry.name);
+      const path = relative(shared.cwd, absolute).split("\\").join("/");
+      if (!query || path.toLowerCase().includes(query)) {
+        items.push({ path, name: entry.name, type: entry.isDirectory() ? "directory" : "file" });
+      }
+      if (entry.isDirectory()) walk(absolute, depth + 1);
+    }
+  };
+
+  walk(shared.cwd, 0);
+  return { cwd: shared.cwd, query, items };
+}
+
+async function runWebCommand(command, args, tab) {
+  switch (command) {
+    case "new":
+      await tab.replaceSession(() => tab.runtime.newSession());
+      return { ok: true, action: "new", sessionFile: tab.session.sessionFile };
+    case "newtab": {
+      const newTab = await createTab();
+      return { ok: true, action: "newtab", tabId: newTab.id, tabs: listTabs() };
+    }
+    case "settings": return { ok: true, action: "settings" };
+    case "resume": return { ok: true, action: "resume" };
+    case "model": {
+      if (!args) return { ok: true, action: "model" };
+      const available = await availableModels(tab);
+      const normalized = args.toLowerCase();
+      const exact = available.find((model) =>
+        `${model.provider}/${model.id}`.toLowerCase() === normalized || model.id.toLowerCase() === normalized);
+      if (!exact) return { ok: true, action: "model", query: args };
+      await tab.session.setModel(exact);
+      tab.broadcast({ type: "info", text: `model switched to ${exact.provider}/${exact.id}` });
+      tab.broadcast({ type: "stats", stats: tab.statsSnapshot() });
+      return { ok: true, action: "model-set", model: `${exact.provider}/${exact.id}` };
+    }
+    case "name":
+      if (!args) throw new Error("usage: /name <name>");
+      tab.session.setSessionName(args);
+      tab.broadcast({ type: "session_meta", name: args });
+      tab.broadcast({ type: "info", text: `session named ${args}` });
+      broadcastGlobal({ type: "tabs_changed", tabs: listTabs() });
+      return { ok: true, action: "named", name: args };
+    case "session": return { ok: true, action: "session-info", info: tab.session.getSessionStats() };
+    case "compact":
+      if (tab.session.isStreaming) throw new Error("wait for the current response before compacting");
+      await tab.session.compact(args || undefined);
+      tab.broadcast({ type: "info", text: "context compacted" });
+      return { ok: true, action: "compacted" };
+    case "reload":
+      if (tab.session.isStreaming) throw new Error("wait for the current response before reloading");
+      await tab.session.reload();
+      tab.broadcast({ type: "info", text: "extensions, skills, prompts, and context reloaded" });
+      return { ok: true, action: "reloaded" };
+    default: throw new Error(`unsupported Web UI command: /${command}`);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Resolve tab from request (query param ?tab=<id> or JSON body .tabId)
+// Falls back to the first tab.
+// ---------------------------------------------------------------------------
+
+function resolveTab(tabId) {
+  if (tabId && tabs.has(tabId)) return tabs.get(tabId);
+  // Fallback to first tab
+  return tabs.values().next().value;
+}
+
+function getTabIdFromUrl(url) {
+  return url.searchParams.get("tab") ?? null;
+}
+
+// ---------------------------------------------------------------------------
+// HTTP server
+// ---------------------------------------------------------------------------
+
+function gitRun(cwd, args, { timeout = 10_000 } = {}) {
+  return new Promise((resolve) => {
+    execFile("git", args, { cwd, timeout, maxBuffer: 4 * 1024 * 1024 }, (err, stdout, stderr) => {
+      resolve({ err, stdout: stdout ?? "", stderr: stderr ?? "" });
+    });
+  });
+}
+
+const json = (res, code, body) => {
+  res.writeHead(code, { "content-type": "application/json" });
+  res.end(JSON.stringify(body));
+};
+
+function readBody(req) {
+  return new Promise((resolve) => {
+    let body = "";
+    req.on("data", (c) => (body += c));
+    req.on("end", () => resolve(body));
+  });
+}
+
+const server = createServer(async (req, res) => {
+  const url = new URL(req.url, `http://localhost:${PORT}`);
+  const path = url.pathname;
+
+  try {
+    if (path === "/vendor/marked.js") {
+      res.writeHead(200, {
+        "content-type": "text/javascript; charset=utf-8",
+        "cache-control": "public, max-age=31536000, immutable",
+      });
+      res.end(readFileSync(join(HERE, "node_modules", "marked", "lib", "marked.umd.js"), "utf8"));
+      return;
+    }
+
+    if (path === "/vendor/purify.js") {
+      res.writeHead(200, {
+        "content-type": "text/javascript; charset=utf-8",
+        "cache-control": "public, max-age=31536000, immutable",
+      });
+      res.end(readFileSync(join(HERE, "node_modules", "dompurify", "dist", "purify.min.js"), "utf8"));
+      return;
+    }
+
+    if (path === "/") {
+      res.writeHead(200, {
+        "content-type": "text/html; charset=utf-8",
+        "cache-control": "no-store",
+      });
+      res.end(readFileSync(join(HERE, "index.html"), "utf8"));
+      return;
+    }
+
+    // --- Tab management APIs ---
+
+    if (path === "/api/tabs") {
+      json(res, 200, { tabs: listTabs(), defaultTab: defaultTab.id });
+      return;
+    }
+
+    if (path === "/api/tabs/create" && req.method === "POST") {
+      const body = await readBody(req);
+      const { cwd: tabCwd } = JSON.parse(body || "{}");
+      const tab = await createTab(tabCwd || shared.cwd);
+      json(res, 200, { ok: true, tabId: tab.id, tabs: listTabs() });
+      return;
+    }
+
+    if (path === "/api/tabs/close" && req.method === "POST") {
+      const body = await readBody(req);
+      const { tabId } = JSON.parse(body);
+      if (!tabId || !tabs.has(tabId)) {
+        json(res, 400, { ok: false, error: "tab not found" });
+        return;
+      }
+      if (tabs.size <= 1) {
+        json(res, 400, { ok: false, error: "cannot close the last tab" });
+        return;
+      }
+      const tab = tabs.get(tabId);
+      if (tab.session.isStreaming) {
+        json(res, 400, { ok: false, error: "stop the active response before closing this tab" });
+        return;
+      }
+      removeTab(tabId);
+      json(res, 200, { ok: true, tabs: listTabs() });
+      return;
+    }
+
+    // --- Global SSE (for tab list updates) ---
+    if (path === "/api/events/global") {
+      res.writeHead(200, {
+        "content-type": "text/event-stream",
+        "cache-control": "no-cache",
+        connection: "keep-alive",
+      });
+      res.write(`data: ${JSON.stringify({ type: "tabs_changed", tabs: listTabs() })}\n\n`);
+      globalClients.add(res);
+      req.on("close", () => globalClients.delete(res));
+      return;
+    }
+
+    // --- Per-tab SSE ---
+    if (path === "/api/events") {
+      const tabId = getTabIdFromUrl(url);
+      const tab = resolveTab(tabId);
+      if (!tab) { json(res, 400, { error: "no active tab" }); return; }
+      res.writeHead(200, {
+        "content-type": "text/event-stream",
+        "cache-control": "no-cache",
+        connection: "keep-alive",
+      });
+      res.write(`data: ${JSON.stringify(tab.initPayload())}\n\n`);
+      tab.clients.add(res);
+      req.on("close", () => tab.clients.delete(res));
+      return;
+    }
+
+    // --- All other APIs resolve a tab from ?tab= or body.tabId ---
+
+    if (path === "/api/prompt" && req.method === "POST") {
+      const body = await readBody(req);
+      try {
+        const { text, mode, tabId } = JSON.parse(body);
+        const tab = resolveTab(tabId ?? getTabIdFromUrl(url));
+        if (!tab) throw new Error("tab not found");
+        if (!text?.trim()) throw new Error("empty prompt");
+        const name = assignInitialSessionSubject(tab.session, text);
+        if (name) {
+          tab.broadcast({ type: "session_meta", name });
+          broadcastGlobal({ type: "tabs_changed", tabs: listTabs() });
+        }
+        const opts = {};
+        if (mode === "steer") opts.streamingBehavior = "steer";
+        else if (tab.session.isStreaming) opts.streamingBehavior = "followUp";
+        tab.session.prompt(text, opts).catch((err) =>
+          tab.broadcast({ type: "error", error: String(err?.message ?? err) }));
+        json(res, 200, { ok: true });
+      } catch (err) {
+        json(res, 400, { ok: false, error: String(err.message) });
+      }
+      return;
+    }
+
+    if (path === "/api/abort" && req.method === "POST") {
+      const body = await readBody(req);
+      const { tabId } = JSON.parse(body || "{}");
+      const tab = resolveTab(tabId ?? getTabIdFromUrl(url));
+      if (tab) await tab.session.abort();
+      json(res, 200, { ok: true });
+      return;
+    }
+
+    if (path === "/api/info") {
+      const tab = resolveTab(getTabIdFromUrl(url));
+      if (!tab) { json(res, 400, { error: "no active tab" }); return; }
+      json(res, 200, {
+        cwd: shared.cwd, sessionFile: tab.session.sessionFile,
+        model: tab.session.model ? `${tab.session.model.provider}/${tab.session.model.id}` : null,
+        streaming: tab.session.isStreaming,
+        contextUsage: tab.session.getContextUsage(),
+        tabId: tab.id,
+      });
+      return;
+    }
+
+    // --- Git APIs (run in the shared workspace cwd; UI hides itself when
+    //     the workspace is not a repository or these routes are absent) ---
+
+    if (path === "/api/git/status") {
+      const root = await gitRun(shared.cwd, ["rev-parse", "--show-toplevel"]);
+      if (root.err) { json(res, 200, { ok: true, isRepo: false }); return; }
+      const repoRoot = root.stdout.trim();
+      const [branchRes, porcelain, numstat] = await Promise.all([
+        gitRun(repoRoot, ["branch", "--show-current"]),
+        gitRun(repoRoot, ["status", "--porcelain"]),
+        gitRun(repoRoot, ["diff", "HEAD", "--numstat"]),
+      ]);
+      const numstatMap = new Map();
+      let totalAdditions = 0;
+      let totalDeletions = 0;
+      for (const line of numstat.stdout.split("\n")) {
+        if (!line.trim()) continue;
+        const parts = line.split("\t");
+        let file = parts.slice(2).join("\t");
+        if (!file) continue;
+        if (file.includes(" -> ")) file = file.split(" -> ").pop(); // renames: keep new path
+        const additions = parseInt(parts[0], 10) || 0;
+        const deletions = parseInt(parts[1], 10) || 0;
+        numstatMap.set(file.replace(/^\"|\"$/g, ""), { additions, deletions });
+        totalAdditions += additions;
+        totalDeletions += deletions;
+      }
+      const changes = porcelain.stdout.split("\n").filter(Boolean).map((line) => {
+        const status = line.slice(0, 2).trim() || "M";
+        let file = line.slice(3);
+        if (file.startsWith('"') && file.endsWith('"')) file = file.slice(1, -1);
+        if (file.includes(" -> ")) file = file.split(" -> ").pop().replace(/\"/g, "");
+        const counts = numstatMap.get(file) ?? {};
+        return { path: file, status, additions: counts.additions ?? 0, deletions: counts.deletions ?? 0 };
+      });
+      const branch = branchRes.stdout.trim() || "HEAD";
+      let ahead = null, behind = null;
+      if (branch && branch !== "HEAD") {
+        const revList = await gitRun(repoRoot, ["rev-list", "--left-right", "--count", `${branch}...@{upstream}`]);
+        if (!revList.err && revList.stdout.trim()) {
+          const parts = revList.stdout.trim().split(/\s+/).map(Number);
+          ahead = parts[0] ?? 0;
+          behind = parts[1] ?? 0;
+        }
+      }
+      json(res, 200, {
+        ok: true,
+        isRepo: true,
+        repo: basename(repoRoot),
+        branch,
+        changes,
+        totalAdditions,
+        totalDeletions,
+        ahead,
+        behind,
+      });
+      return;
+    }
+
+    if (path === "/api/git/branches") {
+      const root = await gitRun(shared.cwd, ["rev-parse", "--show-toplevel"]);
+      if (root.err) { json(res, 200, { ok: false, error: "not a git repository" }); return; }
+      const repoRoot = root.stdout.trim();
+      const [list, current] = await Promise.all([
+        gitRun(repoRoot, ["for-each-ref", "refs/heads", "--format=%(refname:short)"]),
+        gitRun(repoRoot, ["branch", "--show-current"]),
+      ]);
+      const cur = current.stdout.trim();
+      json(res, 200, {
+        ok: true,
+        branches: list.stdout.split("\n").filter(Boolean).map((name) => ({ name, current: name === cur })),
+      });
+      return;
+    }
+
+    if (path === "/api/git/checkout" && req.method === "POST") {
+      const body = await readBody(req);
+      const branch = String(JSON.parse(body || "{}").branch ?? "").trim();
+      if (!/^[\w./-]+$/.test(branch)) { json(res, 400, { ok: false, error: "invalid branch name" }); return; }
+      const result = await gitRun(shared.cwd, ["checkout", branch]);
+      if (result.err) { json(res, 400, { ok: false, error: (result.stderr || result.err.message).trim() }); return; }
+      json(res, 200, { ok: true });
+      return;
+    }
+
+    if (path === "/api/git/stage" && req.method === "POST") {
+      const body = await readBody(req);
+      const { files, action: stageAction } = JSON.parse(body || "{}");
+      if (!Array.isArray(files) || files.length === 0) { json(res, 400, { ok: false, error: "files array is required" }); return; }
+      if (stageAction === "unstage") {
+        const result = await gitRun(shared.cwd, ["reset", "HEAD", "--", ...files]);
+        if (result.err) { json(res, 400, { ok: false, error: (result.stderr || result.err.message).trim() }); return; }
+      } else {
+        const result = await gitRun(shared.cwd, ["add", "--", ...files]);
+        if (result.err) { json(res, 400, { ok: false, error: (result.stderr || result.err.message).trim() }); return; }
+      }
+      json(res, 200, { ok: true });
+      return;
+    }
+
+    if (path === "/api/git/commit" && req.method === "POST") {
+      const body = await readBody(req);
+      const { message: msg, stageAll } = JSON.parse(body || "{}");
+      const message = String(msg ?? "").trim();
+      if (!message) { json(res, 400, { ok: false, error: "commit message is required" }); return; }
+      if (stageAll !== false) {
+        const add = await gitRun(shared.cwd, ["add", "-A"]);
+        if (add.err) { json(res, 400, { ok: false, error: (add.stderr || add.err.message).trim() }); return; }
+      }
+      const commit = await gitRun(shared.cwd, ["commit", "-m", message]);
+      if (commit.err) { json(res, 400, { ok: false, error: (commit.stderr || commit.err.message).trim() }); return; }
+      const hash = await gitRun(shared.cwd, ["rev-parse", "--short", "HEAD"]);
+      json(res, 200, { ok: true, hash: hash.stdout.trim() });
+      return;
+    }
+
+    if (path === "/api/git/branches/create" && req.method === "POST") {
+      const body = await readBody(req);
+      const { name, checkout } = JSON.parse(body || "{}");
+      const branch = String(name ?? "").trim();
+      if (!branch || !/^[\w./-]+$/.test(branch)) { json(res, 400, { ok: false, error: "invalid branch name" }); return; }
+      const args = checkout ? ["checkout", "-b", branch] : ["branch", branch];
+      const result = await gitRun(shared.cwd, args);
+      if (result.err) { json(res, 400, { ok: false, error: (result.stderr || result.err.message).trim() }); return; }
+      json(res, 200, { ok: true, branch });
+      return;
+    }
+
+    if (path === "/api/git/branches/delete" && req.method === "POST") {
+      const body = await readBody(req);
+      const { name } = JSON.parse(body || "{}");
+      const branch = String(name ?? "").trim();
+      if (!branch || !/^[\w./-]+$/.test(branch)) { json(res, 400, { ok: false, error: "invalid branch name" }); return; }
+      const result = await gitRun(shared.cwd, ["branch", "-d", branch]);
+      if (result.err) {
+        // If not fully merged, try force delete only if stderr mentions it
+        if (result.stderr && result.stderr.includes("not fully merged")) {
+          json(res, 400, { ok: false, error: `Branch "${branch}" is not fully merged. Use git branch -D to force delete.` });
+          return;
+        }
+        json(res, 400, { ok: false, error: (result.stderr || result.err.message).trim() });
+        return;
+      }
+      json(res, 200, { ok: true });
+      return;
+    }
+
+    if (path === "/api/git/diff") {
+      const file = (url.searchParams.get("file") ?? "").trim();
+      if (!file) { json(res, 400, { ok: false, error: "file parameter is required" }); return; }
+      const result = await gitRun(shared.cwd, ["diff", "HEAD", "--", file]);
+      if (result.err) {
+        // If the file is untracked, show it as a full new-file diff
+        const untracked = await gitRun(shared.cwd, ["diff", "--no-index", "/dev/null", file]);
+        if (untracked.stdout) { json(res, 200, { ok: true, diff: untracked.stdout }); return; }
+        json(res, 400, { ok: false, error: (result.stderr || result.err.message).trim() }); return;
+      }
+      json(res, 200, { ok: true, diff: result.stdout });
+      return;
+    }
+
+    if (path === "/api/git/commit-diff") {
+      const hash = (url.searchParams.get("hash") ?? "").trim();
+      if (!hash || !/^[\da-f]+$/i.test(hash)) { json(res, 400, { ok: false, error: "invalid commit hash" }); return; }
+      const result = await gitRun(shared.cwd, ["show", "--format=", "--patch", hash]);
+      if (result.err) { json(res, 400, { ok: false, error: (result.stderr || result.err.message).trim() }); return; }
+      json(res, 200, { ok: true, diff: result.stdout });
+      return;
+    }
+
+    if (path === "/api/git/sync" && req.method === "POST") {
+      const body = await readBody(req);
+      const { action: syncAction } = JSON.parse(body || "{}");
+      const root = await gitRun(shared.cwd, ["rev-parse", "--show-toplevel"]);
+      if (root.err) { json(res, 400, { ok: false, error: "not a git repository" }); return; }
+      const repoRoot = root.stdout.trim();
+      if (syncAction === "push") {
+        const result = await gitRun(repoRoot, ["push"], { timeout: 60_000 });
+        if (result.err) {
+          // Try push with --set-upstream for new branches
+          const branch = (await gitRun(repoRoot, ["branch", "--show-current"])).stdout.trim();
+          if (branch) {
+            const retry = await gitRun(repoRoot, ["push", "-u", "origin", branch], { timeout: 60_000 });
+            if (retry.err) { json(res, 400, { ok: false, error: (retry.stderr || retry.err.message).trim() }); return; }
+            json(res, 200, { ok: true, output: (retry.stderr || retry.stdout || "Pushed with upstream set.").trim() });
+            return;
+          }
+          json(res, 400, { ok: false, error: (result.stderr || result.err.message).trim() });
+          return;
+        }
+        json(res, 200, { ok: true, output: (result.stderr || result.stdout || "Push complete.").trim() });
+        return;
+      }
+      if (syncAction === "pull") {
+        const result = await gitRun(repoRoot, ["pull", "--rebase"], { timeout: 60_000 });
+        if (result.err) { json(res, 400, { ok: false, error: (result.stderr || result.err.message).trim() }); return; }
+        json(res, 200, { ok: true, output: (result.stdout || result.stderr || "Pull complete.").trim() });
+        return;
+      }
+      json(res, 400, { ok: false, error: "action must be 'push' or 'pull'" });
+      return;
+    }
+
+    // --- Sessions ---
+    if (path === "/api/session/new" && req.method === "POST") {
+      const body = await readBody(req);
+      const { tabId } = JSON.parse(body || "{}");
+      const tab = resolveTab(tabId ?? getTabIdFromUrl(url));
+      if (!tab) { json(res, 400, { error: "tab not found" }); return; }
+      await tab.replaceSession(() => tab.runtime.newSession());
+      broadcastGlobal({ type: "tabs_changed", tabs: listTabs() });
+      json(res, 200, { ok: true, sessionFile: tab.session.sessionFile });
+      return;
+    }
+    if (path === "/api/session/switch" && req.method === "POST") {
+      const body = await readBody(req);
+      try {
+        const { file, tabId } = JSON.parse(body);
+        const tab = resolveTab(tabId ?? getTabIdFromUrl(url));
+        if (!tab) throw new Error("tab not found");
+        // If the session belongs to a different workspace, switch workspace + rebuild runtime
+        const sessionWs = extractWorkspacePath(file);
+        if (sessionWs && sessionWs !== shared.cwd && existsSync(sessionWs)) {
+          await buildShared(sessionWs);
+          const runtime = await createAgentSessionRuntime(createRuntime, {
+            cwd: sessionWs,
+            agentDir: AGENT_DIR,
+            sessionManager: SessionManager.create(sessionWs),
+          });
+          tab.runtime = runtime;
+        }
+        await tab.replaceSession(() => tab.runtime.switchSession(file));
+        broadcastGlobal({ type: "tabs_changed", tabs: listTabs() });
+        json(res, 200, { ok: true, sessionFile: tab.session.sessionFile });
+      } catch (err) {
+        json(res, 400, { ok: false, error: String(err.message) });
+      }
+      return;
+    }
+    if (path === "/api/session/delete" && req.method === "POST") {
+      const body = await readBody(req);
+      try {
+        const { file, tabId } = JSON.parse(body);
+        const tab = resolveTab(tabId ?? getTabIdFromUrl(url));
+        if (!tab) throw new Error("tab not found");
+        json(res, 200, await moveSessionToTrash(file, tab));
+      } catch (err) {
+        json(res, 400, { ok: false, error: String(err?.message ?? err) });
+      }
+      return;
+    }
+
+    if (path === "/api/session/logs") {
+      const tab = resolveTab(getTabIdFromUrl(url));
+      if (!tab) { json(res, 400, { error: "tab not found" }); return; }
+      return void json(res, 200, await logsData(url, tab.session));
+    }
+    if (path === "/api/logs") {
+      const tab = resolveTab(getTabIdFromUrl(url));
+      if (!tab) { json(res, 400, { error: "tab not found" }); return; }
+      return void json(res, 200, await logsData(url, tab.session));
+    }
+    if (path === "/api/skills") return void json(res, 200, skillsData());
+    if (path === "/api/commands") {
+      const tab = resolveTab(getTabIdFromUrl(url));
+      if (!tab) { json(res, 400, { error: "tab not found" }); return; }
+      return void json(res, 200, commandsData(tab));
+    }
+    if (path === "/api/context/search") return void json(res, 200, workspaceSearch(url));
+    if (path === "/api/command" && req.method === "POST") {
+      const body = await readBody(req);
+      try {
+        const input = JSON.parse(body);
+        const command = String(input.command ?? "").replace(/^\//, "").trim();
+        if (!command) throw new Error("command is required");
+        const tab = resolveTab(input.tabId ?? getTabIdFromUrl(url));
+        if (!tab) throw new Error("tab not found");
+        json(res, 200, await runWebCommand(command, String(input.args ?? "").trim(), tab));
+      } catch (err) {
+        json(res, 400, { ok: false, error: String(err?.message ?? err) });
+      }
+      return;
+    }
+    if (path === "/api/config") return void json(res, 200, configData());
+    if (path === "/api/models") {
+      const tab = resolveTab(getTabIdFromUrl(url));
+      if (!tab) { json(res, 400, { error: "tab not found" }); return; }
+      return void json(res, 200, await modelsData(tab));
+    }
+    if (path === "/api/sessions") {
+      const tab = resolveTab(getTabIdFromUrl(url));
+      return void json(res, 200, await sessionsData(tab));
+    }
+
+    // --- Workspace ---
+    if (path === "/api/workspace/list") {
+      const reqPath = resolve((url.searchParams.get("path") ?? "").trim() || shared.cwd);
+      if (!existsSync(reqPath) || !statSync(reqPath).isDirectory()) {
+        json(res, 400, { error: "directory-unreadable", path: reqPath });
+        return;
+      }
+      let entries = [];
+      try {
+        entries = readdirSync(reqPath)
+          .filter((name) => {
+            try { return statSync(join(reqPath, name)).isDirectory(); } catch { return false; }
+          })
+          .sort((a, b) => a.localeCompare(b))
+          .map((name) => ({ name, hidden: name.startsWith("."), path: join(reqPath, name) }));
+      } catch {}
+      const ancestry = [];
+      for (let p = reqPath; ; p = dirname(p)) {
+        ancestry.unshift({ name: p === "/" ? "/" : p.split("/").pop(), path: p });
+        if (p === "/") break;
+      }
+      json(res, 200, { current: reqPath, home: homedir(), ancestry, entries });
+      return;
+    }
+
+    if (path === "/api/workspace/set" && req.method === "POST") {
+      const body = await readBody(req);
+      try {
+        const wsPath = resolve(JSON.parse(body).path);
+        if (!existsSync(wsPath) || !statSync(wsPath).isDirectory())
+          throw new Error("directory-unreadable");
+        if (wsPath === shared.cwd) {
+          json(res, 200, { ok: true, cwd: wsPath });
+          return;
+        }
+        await buildShared(wsPath);
+        // Rebuild all tabs for new workspace
+        for (const tab of tabs.values()) {
+          const runtime = await createAgentSessionRuntime(createRuntime, {
+            cwd: wsPath,
+            agentDir: AGENT_DIR,
+            sessionManager: SessionManager.create(wsPath),
+          });
+          tab.runtime = runtime;
+          tab.resetStats();
+          tab.bindEvents();
+          tab.broadcast(tab.initPayload());
+        }
+        broadcastGlobal({ type: "tabs_changed", tabs: listTabs() });
+        broadcastGlobal({ type: "info", text: `workspace switched to ${wsPath}` });
+        json(res, 200, { ok: true, cwd: wsPath });
+      } catch (err) {
+        json(res, 400, { ok: false, error: String(err.message) });
+      }
+      return;
+    }
+
+    if (path === "/api/model/set" && req.method === "POST") {
+      const body = await readBody(req);
+      try {
+        const { provider, id, tabId } = JSON.parse(body);
+        const tab = resolveTab(tabId ?? getTabIdFromUrl(url));
+        if (!tab) throw new Error("tab not found");
+        const model = (await availableModels(tab)).find((item) => item.provider === provider && item.id === id);
+        if (!model) throw new Error(`model not found or unavailable: ${provider}/${id}`);
+        await tab.session.setModel(model);
+        tab.broadcast({ type: "info", text: `model switched to ${provider}/${id}` });
+        tab.broadcast({ type: "stats", stats: tab.statsSnapshot() });
+        json(res, 200, { ok: true });
+      } catch (err) {
+        json(res, 400, { ok: false, error: String(err.message) });
+      }
+      return;
+    }
+
+    if (path === "/api/thinking/set" && req.method === "POST") {
+      const body = await readBody(req);
+      try {
+        const { level, tabId } = JSON.parse(body);
+        const tab = resolveTab(tabId ?? getTabIdFromUrl(url));
+        if (!tab) throw new Error("tab not found");
+        tab.session.setThinkingLevel(level);
+        json(res, 200, { ok: true, level: tab.session.thinkingLevel });
+      } catch (err) {
+        json(res, 400, { ok: false, error: String(err.message) });
+      }
+      return;
+    }
+
+    res.writeHead(404);
+    res.end("not found");
+  } catch (err) {
+    json(res, 500, { error: String(err?.stack ?? err) });
+  }
+});
+
+server.listen(PORT, () => console.log(`[pi-web-ui] listening on http://localhost:${PORT}`));