@firstpick/pi-package-webui 0.1.0 → 0.1.2

package/bin/pi-webui.mjs

@@ -2,7 +2,8 @@
 import { spawn } from "node:child_process";
 import { randomUUID } from "node:crypto";
 import { createServer } from "node:http";
-import { access, readFile, stat } from "node:fs/promises";
+import { access, mkdir, readFile, readdir, rename, stat, writeFile } from "node:fs/promises";
+import { homedir, networkInterfaces } from "node:os";
 import path from "node:path";
 import { StringDecoder } from "node:string_decoder";
 import { fileURLToPath } from "node:url";
@@ -16,14 +17,44 @@ const DEFAULT_HOST = "127.0.0.1";
 const DEFAULT_PORT = 31415;
 const REQUEST_TIMEOUT_MS = 5 * 60 * 1000;
 const BODY_LIMIT_BYTES = 1024 * 1024;
+const EVENT_HISTORY_LIMIT = 200;
+const STATUS_RPC_TIMEOUT_MS = 1_800;
+const FAST_PICK_LIMIT = 30;
 
 const MIME_TYPES = new Map([
   [".html", "text/html; charset=utf-8"],
   [".js", "text/javascript; charset=utf-8"],
   [".css", "text/css; charset=utf-8"],
   [".svg", "image/svg+xml"],
+  [".png", "image/png"],
+  [".webmanifest", "application/manifest+json; charset=utf-8"],
 ]);
 
+const NATIVE_SLASH_COMMANDS = [
+  { name: "settings", description: "Open settings menu" },
+  { name: "model", description: "Select model (opens selector UI)" },
+  { name: "scoped-models", description: "Enable/disable models for Ctrl+P cycling" },
+  { name: "export", description: "Export session (HTML default, or specify path: .html/.jsonl)" },
+  { name: "import", description: "Import and resume a session from a JSONL file" },
+  { name: "share", description: "Share session as a secret GitHub gist" },
+  { name: "copy", description: "Copy last agent message to clipboard" },
+  { name: "name", description: "Set session display name" },
+  { name: "session", description: "Show session info and stats" },
+  { name: "changelog", description: "Show changelog entries" },
+  { name: "hotkeys", description: "Show all keyboard shortcuts" },
+  { name: "fork", description: "Create a new fork from a previous user message" },
+  { name: "clone", description: "Duplicate the current session at the current position" },
+  { name: "tree", description: "Navigate session tree (switch branches)" },
+  { name: "login", description: "Configure provider authentication" },
+  { name: "logout", description: "Remove provider authentication" },
+  { name: "new", description: "Start a new session" },
+  { name: "compact", description: "Manually compact the session context" },
+  { name: "resume", description: "Resume a different session" },
+  { name: "reload", description: "Reload keybindings, extensions, skills, prompts, and themes" },
+  { name: "quit", description: "Quit Pi" },
+].map((command) => ({ ...command, source: "native", location: "Pi" }));
+const NATIVE_SLASH_COMMAND_NAMES = new Set(NATIVE_SLASH_COMMANDS.map((command) => command.name));
+
 function usage() {
   console.log(`pi-webui ${packageJson.version}
 
@@ -137,6 +168,14 @@ function isLocalHost(host) {
   return host === "localhost" || host === "::1" || host === "[::1]" || host.startsWith("127.");
 }
 
+function formatUrlHost(host) {
+  return host.includes(":") && !host.startsWith("[") ? `[${host}]` : host;
+}
+
+function isLocalAddress(address = "") {
+  return address === "::1" || address.startsWith("127.") || address === "::ffff:127.0.0.1" || address.startsWith("::ffff:127.");
+}
+
 function sanitizeError(error) {
   if (!error) return "Unknown error";
   if (typeof error === "string") return error;
@@ -315,6 +354,12 @@ function sendJson(res, statusCode, payload) {
   res.end(body);
 }
 
+function makeHttpError(statusCode, message) {
+  const error = new Error(message);
+  error.statusCode = statusCode;
+  return error;
+}
+
 function sendError(res, statusCode, error) {
   sendJson(res, statusCode, { ok: false, error: sanitizeError(error) });
 }
@@ -337,6 +382,51 @@ function sendSse(res, event) {
   res.write(`data: ${JSON.stringify(event)}\n\n`);
 }
 
+function rpcSuccess(command, data = {}) {
+  return { type: "response", command, success: true, data };
+}
+
+function parseSlashCommand(message) {
+  const text = String(message || "").trim();
+  if (!text.startsWith("/") || text.includes("\n")) return undefined;
+  const match = text.match(/^\/([^\s]+)(?:\s+([\s\S]*))?$/);
+  if (!match) return undefined;
+  const name = match[1].toLowerCase();
+  if (!NATIVE_SLASH_COMMAND_NAMES.has(name)) return undefined;
+  return { name, args: (match[2] || "").trim(), text };
+}
+
+const eventHistory = [];
+
+function truncateStatusText(value, maxLength = 240) {
+  const text = String(value || "").replace(/\s+/g, " ").trim();
+  return text.length > maxLength ? `${text.slice(0, maxLength - 1)}…` : text;
+}
+
+function statusEventSummary(event) {
+  const summary = {
+    timestamp: new Date().toISOString(),
+    type: String(event?.type || "event"),
+  };
+  for (const key of ["tabId", "tabTitle", "pid", "cwd", "code", "signal", "command", "queueLength", "pendingMessageCount"]) {
+    if (event?.[key] !== undefined) summary[key] = event[key];
+  }
+  if (event?.assistantMessageEvent?.type) summary.updateType = event.assistantMessageEvent.type;
+  if (event?.message?.role) summary.messageRole = event.message.role;
+  if (event?.error) summary.error = truncateStatusText(event.error);
+  if (event?.text && summary.type === "pi_stderr") summary.text = truncateStatusText(event.text);
+  return summary;
+}
+
+function recordEvent(event) {
+  eventHistory.push(statusEventSummary(event));
+  if (eventHistory.length > EVENT_HISTORY_LIMIT) eventHistory.splice(0, eventHistory.length - EVENT_HISTORY_LIMIT);
+}
+
+function latestEvents(limit = 40) {
+  return eventHistory.slice(-Math.max(0, Math.min(EVENT_HISTORY_LIMIT, limit)));
+}
+
 function runCommand(command, args, { cwd, timeoutMs = 2000 } = {}) {
   return new Promise((resolve) => {
     const child = spawn(command, args, {
@@ -379,6 +469,215 @@ function displayPath(cwd) {
   return normalized;
 }
 
+function expandUserPath(value) {
+  const input = String(value || "").trim();
+  if (input === "~") {
+    const home = process.env.HOME || process.env.USERPROFILE;
+    if (!home) throw makeHttpError(400, "Cannot expand ~ because no home directory is configured");
+    return home;
+  }
+  if (input.startsWith("~/") || input.startsWith("~\\")) {
+    const home = process.env.HOME || process.env.USERPROFILE;
+    if (!home) throw makeHttpError(400, "Cannot expand ~ because no home directory is configured");
+    return path.join(home, input.slice(2));
+  }
+  return input;
+}
+
+async function resolveCwd(value, baseCwd = options.cwd) {
+  const input = expandUserPath(value);
+  if (!input) throw makeHttpError(400, "cwd is required");
+  const cwd = path.resolve(baseCwd, input);
+  let info;
+  try {
+    info = await stat(cwd);
+  } catch {
+    throw makeHttpError(400, `cwd does not exist: ${cwd}`);
+  }
+  if (!info.isDirectory()) throw makeHttpError(400, `cwd is not a directory: ${cwd}`);
+  return cwd;
+}
+
+function uniquePathItems(items) {
+  const seen = new Set();
+  const result = [];
+  for (const item of items) {
+    if (!item?.cwd || seen.has(item.cwd)) continue;
+    seen.add(item.cwd);
+    result.push(item);
+  }
+  return result;
+}
+
+function normalizePathFastPicks(value) {
+  const items = Array.isArray(value) ? value : Array.isArray(value?.picks) ? value.picks : [];
+  const seen = new Set();
+  const picks = [];
+  for (const item of items) {
+    const rawCwd = typeof item === "string" ? item : item?.cwd;
+    if (!rawCwd) continue;
+    let cwd;
+    try {
+      cwd = path.resolve(options.cwd, expandUserPath(rawCwd));
+    } catch {
+      continue;
+    }
+    if (!cwd || seen.has(cwd)) continue;
+    seen.add(cwd);
+    const displayCwd = String(typeof item === "object" && item?.displayCwd ? item.displayCwd : displayPath(cwd)).slice(0, 4096);
+    picks.push({ cwd, displayCwd });
+    if (picks.length >= FAST_PICK_LIMIT) break;
+  }
+  return picks;
+}
+
+function fastPicksStorageFile() {
+  if (process.env.PI_WEBUI_FAST_PICKS_FILE) return path.resolve(expandUserPath(process.env.PI_WEBUI_FAST_PICKS_FILE));
+  const stateRoot = process.env.XDG_STATE_HOME || path.join(homedir(), ".local", "state");
+  return path.join(stateRoot, "pi-webui", "fast-picks.json");
+}
+
+let pathFastPicksCache = null;
+
+async function readPathFastPicks() {
+  if (pathFastPicksCache) return pathFastPicksCache;
+  try {
+    const parsed = JSON.parse(await readFile(fastPicksStorageFile(), "utf8"));
+    pathFastPicksCache = normalizePathFastPicks(parsed);
+  } catch (error) {
+    if (error?.code !== "ENOENT") console.warn(`failed to read path fast picks: ${sanitizeError(error)}`);
+    pathFastPicksCache = [];
+  }
+  return pathFastPicksCache;
+}
+
+async function writePathFastPicks(picks) {
+  const normalized = normalizePathFastPicks(picks);
+  const storageFile = fastPicksStorageFile();
+  await mkdir(path.dirname(storageFile), { recursive: true });
+  const tmpFile = `${storageFile}.${process.pid}.${Date.now()}.tmp`;
+  await writeFile(tmpFile, `${JSON.stringify({ version: 1, picks: normalized }, null, 2)}\n`, { mode: 0o600 });
+  await rename(tmpFile, storageFile);
+  pathFastPicksCache = normalized;
+  return normalized;
+}
+
+function parseCliScopedModelPatterns() {
+  for (let index = 0; index < options.piArgs.length; index++) {
+    const arg = options.piArgs[index];
+    if (arg === "--models" && options.piArgs[index + 1]) return options.piArgs[index + 1].split(",").map((item) => item.trim()).filter(Boolean);
+    if (arg.startsWith("--models=")) return arg.slice("--models=".length).split(",").map((item) => item.trim()).filter(Boolean);
+  }
+  return undefined;
+}
+
+async function readJsonFileIfExists(filePath) {
+  try {
+    return JSON.parse(await readFile(filePath, "utf8"));
+  } catch (error) {
+    if (error?.code === "ENOENT") return undefined;
+    console.warn(`failed to read ${filePath}: ${sanitizeError(error)}`);
+    return undefined;
+  }
+}
+
+async function configuredScopedModelPatterns(cwd = options.cwd) {
+  const cliPatterns = parseCliScopedModelPatterns();
+  if (cliPatterns !== undefined) return { patterns: cliPatterns, source: "cli" };
+
+  const agentDir = process.env.PI_CODING_AGENT_DIR ? path.resolve(expandUserPath(process.env.PI_CODING_AGENT_DIR)) : path.join(homedir(), ".pi", "agent");
+  const [globalSettings, projectSettings] = await Promise.all([
+    readJsonFileIfExists(path.join(agentDir, "settings.json")),
+    readJsonFileIfExists(path.join(cwd, ".pi", "settings.json")),
+  ]);
+
+  if (Array.isArray(projectSettings?.enabledModels)) return { patterns: projectSettings.enabledModels, source: "project" };
+  if (Array.isArray(globalSettings?.enabledModels)) return { patterns: globalSettings.enabledModels, source: "global" };
+  return { patterns: [], source: "none" };
+}
+
+function stripThinkingSuffix(pattern) {
+  const text = String(pattern || "").trim();
+  const slashIndex = text.indexOf("/");
+  const colonIndex = text.lastIndexOf(":");
+  if (colonIndex > (slashIndex === -1 ? -1 : slashIndex)) return text.slice(0, colonIndex);
+  return text;
+}
+
+function globToRegExp(pattern) {
+  const escaped = pattern.replace(/[.+^${}()|\\]/g, "\\$&").replace(/\*/g, ".*").replace(/\?/g, ".");
+  return new RegExp(`^${escaped}$`, "i");
+}
+
+function modelMatchesPattern(model, pattern) {
+  const clean = stripThinkingSuffix(pattern).toLowerCase();
+  if (!clean) return false;
+  const full = `${model.provider}/${model.id}`.toLowerCase();
+  const id = String(model.id || "").toLowerCase();
+  if (/[?*\[]/.test(clean)) return globToRegExp(clean).test(full) || globToRegExp(clean).test(id);
+  return full === clean || id === clean || full.includes(clean) || id.includes(clean);
+}
+
+function resolveScopedModelsFromPatterns(patterns, models) {
+  const scoped = [];
+  const seen = new Set();
+  for (const pattern of patterns || []) {
+    for (const model of models || []) {
+      const key = `${model.provider}/${model.id}`;
+      if (seen.has(key) || !modelMatchesPattern(model, pattern)) continue;
+      seen.add(key);
+      scoped.push(model);
+    }
+  }
+  return scoped;
+}
+
+async function getScopedModelData(tab) {
+  const { patterns, source } = await configuredScopedModelPatterns(tab.cwd);
+  if (!patterns.length) return { models: [], patterns, source };
+  const response = await tab.rpc.send({ type: "get_available_models" });
+  if (response.success === false) throw makeHttpError(400, response.error || "failed to load available models");
+  return { models: resolveScopedModelsFromPatterns(patterns, response.data?.models || []), patterns, source };
+}
+
+function pathPickerRoots(activeCwd, viewedCwd) {
+  const home = process.env.HOME || process.env.USERPROFILE;
+  return uniquePathItems([
+    { label: "Tab", cwd: activeCwd, displayCwd: displayPath(activeCwd) },
+    { label: "Default", cwd: options.cwd, displayCwd: displayPath(options.cwd) },
+    home ? { label: "Home", cwd: home, displayCwd: displayPath(home) } : undefined,
+    { label: "Root", cwd: path.parse(viewedCwd || activeCwd || options.cwd).root, displayCwd: path.parse(viewedCwd || activeCwd || options.cwd).root },
+  ]);
+}
+
+async function getDirectoryPickerData(viewPath, activeCwd) {
+  const cwd = await resolveCwd(viewPath || activeCwd, activeCwd);
+  let entries;
+  try {
+    entries = await readdir(cwd, { withFileTypes: true });
+  } catch (error) {
+    throw makeHttpError(error?.code === "EACCES" ? 403 : 400, `Cannot read directory ${cwd}: ${sanitizeError(error)}`);
+  }
+
+  const directoryEntries = entries
+    .filter((entry) => entry.isDirectory())
+    .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: "base" }));
+  const directories = directoryEntries.slice(0, 500).map((entry) => {
+    const entryPath = path.join(cwd, entry.name);
+    return { name: entry.name, cwd: entryPath, displayCwd: displayPath(entryPath), hidden: entry.name.startsWith(".") };
+  });
+  const parent = path.dirname(cwd);
+
+  return {
+    cwd,
+    displayCwd: displayPath(cwd),
+    parent: parent === cwd ? null : parent,
+    roots: pathPickerRoots(activeCwd, cwd),
+    directories,
+    truncated: directoryEntries.length > directories.length,
+  };
+}
+
 async function getWorkspaceInfo(cwd, startedAt) {
   const info = {
     cwd,
@@ -517,18 +816,18 @@ function gitWorkflowCommandPayload(result) {
   };
 }
 
-async function handleGitWorkflowRequest(pathname, body = {}) {
+async function handleGitWorkflowRequest(pathname, body = {}, cwd = options.cwd) {
   try {
     switch (pathname) {
       case "/api/git-workflow/message":
-        return { ok: true, data: await readGitWorkflowMessages(options.cwd) };
+        return { ok: true, data: await readGitWorkflowMessages(cwd) };
       case "/api/git-workflow/add":
-        await getGitRoot(options.cwd);
-        return gitWorkflowCommandPayload(await runGitWorkflowCommand(["add", "."], { cwd: options.cwd }));
+        await getGitRoot(cwd);
+        return gitWorkflowCommandPayload(await runGitWorkflowCommand(["add", "."], { cwd }));
       case "/api/git-workflow/commit": {
         const variant = String(body.variant || "").trim();
         if (!["short", "long"].includes(variant)) throw new Error("variant must be 'short' or 'long'");
-        const messages = await readGitWorkflowMessages(options.cwd);
+        const messages = await readGitWorkflowMessages(cwd);
         if (variant === "short") {
           const message = messages.short.trim();
           if (!message) throw new Error(`${messages.shortPath} is empty`);
@@ -538,7 +837,7 @@ async function handleGitWorkflowRequest(pathname, body = {}) {
         return gitWorkflowCommandPayload(await runGitWorkflowCommand(["commit", "-F", messages.longPath], { cwd: messages.root, label: "git commit -F dev/COMMIT/staged-commit-long.txt" }));
       }
       case "/api/git-workflow/push": {
-        const root = await getGitRoot(options.cwd);
+        const root = await getGitRoot(cwd);
         return gitWorkflowCommandPayload(await runGitWorkflowCommand(["push"], { cwd: root, timeoutMs: 15 * 60 * 1000 }));
       }
       case "/api/git-workflow/cancel": {
@@ -557,7 +856,7 @@ async function handleGitWorkflowRequest(pathname, body = {}) {
 function normalizeStaticPath(urlPath) {
   if (urlPath === "/") return "index.html";
   const name = urlPath.startsWith("/") ? urlPath.slice(1) : urlPath;
-  if (!["index.html", "app.js", "styles.css"].includes(name)) return undefined;
+  if (!["index.html", "app.js", "styles.css", "favicon.svg", "apple-touch-icon.png", "icon-192.png", "icon-512.png", "manifest.webmanifest", "service-worker.js"].includes(name)) return undefined;
   return name;
 }
 
@@ -660,12 +959,18 @@ if (options.version) {
   process.exit(0);
 }
 
-const piArgs = ["--mode", "rpc"];
-if (options.noSession) piArgs.push("--no-session");
-if (options.name) piArgs.push("--name", options.name);
-piArgs.push(...options.piArgs);
+function buildPiArgsForTab(tabIndex, title) {
+  const args = ["--mode", "rpc"];
+  if (options.noSession) args.push("--no-session");
+
+  const sessionName = tabIndex === 1 ? options.name : title;
+  if (sessionName) args.push("--name", sessionName);
+
+  args.push(...options.piArgs);
+  return args;
+}
 
-async function resolvePiCommand() {
+async function resolvePiCommand(piArgs) {
   if (options.piBinExplicit) {
     return { command: options.piBin, args: piArgs, displayCommand: `${options.piBin} ${piArgs.join(" ")}` };
   }
@@ -683,19 +988,456 @@ async function resolvePiCommand() {
   }
 }
 
-const piCommand = await resolvePiCommand();
-const rpc = new PiRpcProcess({ ...piCommand, cwd: options.cwd });
-const sseClients = new Set();
-rpc.onEvent((event) => {
-  for (const client of sseClients) sendSse(client, event);
-});
-rpc.start();
+const tabs = new Map();
+let nextTabIndex = 1;
+
+function defaultTabTitle(tabIndex) {
+  if (options.name) return tabIndex === 1 ? options.name : `${options.name} ${tabIndex}`;
+  return `Terminal ${tabIndex}`;
+}
+
+function attachRpcToTab(tab, rpc) {
+  tab.rpcUnsubscribe?.();
+  tab.rpc = rpc;
+  tab.rpcUnsubscribe = rpc.onEvent((event) => {
+    const scopedEvent = { ...event, tabId: tab.id, tabTitle: tab.title };
+    recordEvent(scopedEvent);
+    for (const client of tab.sseClients) sendSse(client, scopedEvent);
+  });
+}
+
+async function createTab({ title, cwd } = {}) {
+  const tabIndex = nextTabIndex++;
+  const tabTitle = String(title || "").trim() || defaultTabTitle(tabIndex);
+  const tabCwd = cwd ? await resolveCwd(cwd, options.cwd) : options.cwd;
+  const id = randomUUID();
+  const piArgs = buildPiArgsForTab(tabIndex, tabTitle);
+  const piCommand = await resolvePiCommand(piArgs);
+  const rpc = new PiRpcProcess({ ...piCommand, cwd: tabCwd });
+  const tab = {
+    id,
+    index: tabIndex,
+    title: tabTitle,
+    cwd: tabCwd,
+    createdAt: new Date().toISOString(),
+    rpc: undefined,
+    rpcUnsubscribe: undefined,
+    sseClients: new Set(),
+  };
+
+  attachRpcToTab(tab, rpc);
+  tabs.set(id, tab);
+  rpc.start();
+  return tab;
+}
+
+function firstTab() {
+  return tabs.values().next().value;
+}
+
+function tabMeta(tab) {
+  return {
+    id: tab.id,
+    index: tab.index,
+    title: tab.title,
+    cwd: tab.cwd,
+    createdAt: tab.createdAt,
+    startedAt: tab.rpc.startedAt,
+    pid: tab.rpc.child?.pid,
+    running: !!tab.rpc.child && tab.rpc.child.exitCode === null,
+    command: tab.rpc.displayCommand,
+    clientCount: tab.sseClients.size,
+  };
+}
+
+function listTabs() {
+  return [...tabs.values()].map(tabMeta);
+}
+
+async function updateTabCwd(id, cwd) {
+  const tab = tabs.get(id);
+  if (!tab) throw makeHttpError(404, `Unknown Pi tab: ${id}`);
+
+  const nextCwd = await resolveCwd(cwd, tab.cwd);
+  if (nextCwd === tab.cwd) return { tab, changed: false };
+
+  const piArgs = buildPiArgsForTab(tab.index, tab.title);
+  const piCommand = await resolvePiCommand(piArgs);
+  const restartingEvent = { type: "webui_tab_restarting", tabId: tab.id, tabTitle: tab.title, cwd: nextCwd };
+  recordEvent(restartingEvent);
+  for (const client of tab.sseClients) {
+    sendSse(client, restartingEvent);
+  }
+
+  const oldRpc = tab.rpc;
+  tab.rpcUnsubscribe?.();
+  tab.rpcUnsubscribe = undefined;
+  oldRpc.stop();
+
+  tab.cwd = nextCwd;
+  const rpc = new PiRpcProcess({ ...piCommand, cwd: tab.cwd });
+  attachRpcToTab(tab, rpc);
+  rpc.start();
+
+  const changedEvent = { type: "webui_cwd_changed", tabId: tab.id, tabTitle: tab.title, cwd: tab.cwd, pid: tab.rpc.child?.pid };
+  recordEvent(changedEvent);
+  for (const client of tab.sseClients) {
+    sendSse(client, changedEvent);
+  }
+  return { tab, changed: true };
+}
+
+async function restartTabRpc(tab, reason = "reload") {
+  const state = await tab.rpc.send({ type: "get_state" });
+  if (state.success === false) throw makeHttpError(400, state.error || "Unable to read Pi state before reload");
+  if (state.data?.isStreaming) throw makeHttpError(409, "Wait for the current response to finish before reloading.");
+  if (state.data?.isCompacting) throw makeHttpError(409, "Wait for compaction to finish before reloading.");
+
+  const piArgs = buildPiArgsForTab(tab.index, tab.title);
+  if (state.data?.sessionFile && !options.noSession) piArgs.push("--session", state.data.sessionFile);
+  const piCommand = await resolvePiCommand(piArgs);
+  const reloadingEvent = { type: "webui_tab_reloading", tabId: tab.id, tabTitle: tab.title, cwd: tab.cwd, reason, sessionFile: state.data?.sessionFile };
+  recordEvent(reloadingEvent);
+  for (const client of tab.sseClients) sendSse(client, reloadingEvent);
+
+  const oldRpc = tab.rpc;
+  tab.rpcUnsubscribe?.();
+  tab.rpcUnsubscribe = undefined;
+  oldRpc.stop();
+
+  const rpc = new PiRpcProcess({ ...piCommand, cwd: tab.cwd });
+  attachRpcToTab(tab, rpc);
+  rpc.start();
+
+  const reloadedEvent = { type: "webui_tab_reloaded", tabId: tab.id, tabTitle: tab.title, cwd: tab.cwd, pid: tab.rpc.child?.pid, reason, sessionFile: state.data?.sessionFile };
+  recordEvent(reloadedEvent);
+  for (const client of tab.sseClients) sendSse(client, reloadedEvent);
+  return tab;
+}
+
+async function getCommandData(tab) {
+  const response = await tab.rpc.send({ type: "get_commands" });
+  if (response.success === false) throw makeHttpError(400, response.error || "failed to load commands");
+  return { commands: [...NATIVE_SLASH_COMMANDS, ...(response.data?.commands || [])] };
+}
+
+function formatSessionOutput(tab, state, stats) {
+  return [
+    `Session: ${state.sessionName || state.sessionId || "unknown"}`,
+    `Tab: ${tab.title}`,
+    `CWD: ${tab.cwd}`,
+    `Model: ${state.model ? `${state.model.provider}/${state.model.id}` : "none"}`,
+    `Thinking: ${state.thinkingLevel || "unknown"}`,
+    `Status: ${state.isStreaming ? "running" : state.isCompacting ? "compacting" : "idle"}`,
+    `Messages: ${state.messageCount ?? "?"}`,
+    `Queue: ${state.pendingMessageCount ?? 0}`,
+    `Session file: ${state.sessionFile || "none"}`,
+    stats ? `Tokens: input ${stats.tokens?.input ?? 0}, output ${stats.tokens?.output ?? 0}, cache read ${stats.tokens?.cacheRead ?? 0}` : undefined,
+    stats?.cost !== undefined ? `Cost: ${stats.cost}` : undefined,
+  ].filter(Boolean).join("\n");
+}
+
+function webuiHotkeysOutput() {
+  return [
+    "Web UI hotkeys:",
+    "Enter: send on desktop; newline on mobile",
+    "Ctrl/Cmd+Enter: send from textarea",
+    "Tab: accept slash-command suggestion",
+    "Arrow up/down: move through slash-command suggestions",
+    "Escape: close actions, tabs, model picker, or mobile drawer",
+    "Mobile: Send button submits; Return inserts a newline",
+  ].join("\n");
+}
+
+async function handleNativeSlashCommand(tab, body) {
+  const parsed = parseSlashCommand(body.message);
+  if (!parsed) return undefined;
+
+  switch (parsed.name) {
+    case "reload": {
+      const reloaded = await restartTabRpc(tab, "slash-command");
+      return rpcSuccess("native_slash_command", { command: "reload", tab: tabMeta(reloaded), message: "Reloaded keybindings, extensions, skills, prompts, and themes." });
+    }
+    case "new": {
+      const response = await tab.rpc.send({ type: "new_session" });
+      return response.success === false ? response : rpcSuccess("native_slash_command", { command: "new", message: "Started a new session.", result: response.data });
+    }
+    case "compact": {
+      const response = await tab.rpc.send(parsed.args ? { type: "compact", customInstructions: parsed.args } : { type: "compact" });
+      return response.success === false ? response : rpcSuccess("native_slash_command", { command: "compact", message: "Compaction finished.", result: response.data });
+    }
+    case "name": {
+      if (!parsed.args) throw makeHttpError(400, "Usage: /name <session name>");
+      const response = await tab.rpc.send({ type: "set_session_name", name: parsed.args });
+      return response.success === false ? response : rpcSuccess("native_slash_command", { command: "name", message: `Session name set to: ${parsed.args}` });
+    }
+    case "session": {
+      const [state, stats] = await Promise.all([
+        tab.rpc.send({ type: "get_state" }),
+        tab.rpc.send({ type: "get_session_stats" }).catch((error) => ({ success: false, error: sanitizeError(error) })),
+      ]);
+      if (state.success === false) return state;
+      return rpcSuccess("native_slash_command", { command: "session", message: formatSessionOutput(tab, state.data || {}, stats.success === false ? null : stats.data) });
+    }
+    case "copy": {
+      const response = await tab.rpc.send({ type: "get_last_assistant_text" });
+      if (response.success === false) return response;
+      const text = String(response.data?.text || "");
+      if (!text.trim()) throw makeHttpError(400, "No assistant message to copy.");
+      return rpcSuccess("native_slash_command", { command: "copy", message: "Copied the last assistant message.", copyText: text });
+    }
+    case "hotkeys": {
+      return rpcSuccess("native_slash_command", { command: "hotkeys", message: webuiHotkeysOutput() });
+    }
+    case "clone": {
+      const response = await tab.rpc.send({ type: "clone" });
+      return response.success === false ? response : rpcSuccess("native_slash_command", { command: "clone", message: "Cloned the current session.", result: response.data });
+    }
+    default:
+      throw makeHttpError(400, `/${parsed.name} is a native Pi TUI command, but this Web UI cannot run that interactive command yet.`);
+  }
+}
+
+function closeTab(id) {
+  const tab = tabs.get(id);
+  if (!tab) throw makeHttpError(404, `Unknown Pi tab: ${id}`);
+  if (tabs.size <= 1) throw makeHttpError(400, "Cannot close the last Pi tab");
+
+  const closingEvent = { type: "webui_tab_closing", tabId: tab.id, tabTitle: tab.title };
+  recordEvent(closingEvent);
+  for (const client of tab.sseClients) {
+    sendSse(client, closingEvent);
+    client.end();
+  }
+  tab.sseClients.clear();
+  tab.rpcUnsubscribe?.();
+  tab.rpc.stop();
+  tabs.delete(id);
+  return tab;
+}
+
+function requestedTabId(req, url, body) {
+  const header = req.headers["x-pi-webui-tab"];
+  const headerValue = Array.isArray(header) ? header[0] : header;
+  return String(url.searchParams.get("tab") || url.searchParams.get("tabId") || body?.tabId || body?.tab || headerValue || "").trim();
+}
+
+function getRequestedTab(req, url, body = {}) {
+  const id = requestedTabId(req, url, body);
+  if (!id) {
+    const tab = firstTab();
+    if (!tab) throw makeHttpError(503, "No Pi tabs are available");
+    return tab;
+  }
+  const tab = tabs.get(id);
+  if (!tab) throw makeHttpError(404, `Unknown Pi tab: ${id}`);
+  return tab;
+}
+
+const serverStartedAt = new Date().toISOString();
+const initialTab = await createTab();
+let currentHost = options.host;
+let networkRebindInProgress = false;
+
+function localNetworkAddresses() {
+  const addresses = [];
+  for (const entries of Object.values(networkInterfaces())) {
+    for (const entry of entries || []) {
+      if (entry.internal || entry.family !== "IPv4") continue;
+      addresses.push(entry.address);
+    }
+  }
+  return [...new Set(addresses)].sort();
+}
+
+function networkStatus() {
+  const open = !isLocalHost(currentHost);
+  const networkUrls = open ? localNetworkAddresses().map((address) => `http://${address}:${options.port}/`) : [];
+  return {
+    open,
+    opening: networkRebindInProgress,
+    host: currentHost,
+    port: options.port,
+    localUrl: `http://127.0.0.1:${options.port}/`,
+    networkUrls,
+  };
+}
+
+function closeSseClientsForRebind(nextHost) {
+  for (const tab of tabs.values()) {
+    const rebindEvent = { type: "webui_network_rebinding", tabId: tab.id, tabTitle: tab.title, host: nextHost, port: options.port };
+    recordEvent(rebindEvent);
+    for (const client of tab.sseClients) {
+      sendSse(client, rebindEvent);
+      client.end();
+    }
+    tab.sseClients.clear();
+  }
+}
+
+function closeServerListener() {
+  return new Promise((resolve, reject) => {
+    if (!server.listening) {
+      resolve();
+      return;
+    }
+    server.close((error) => {
+      if (error) reject(error);
+      else resolve();
+    });
+  });
+}
+
+function listenOn(host) {
+  return new Promise((resolve, reject) => {
+    const cleanup = () => {
+      server.off("error", onError);
+      server.off("listening", onListening);
+    };
+    const onError = (error) => {
+      cleanup();
+      reject(error);
+    };
+    const onListening = () => {
+      cleanup();
+      resolve();
+    };
+    server.once("error", onError);
+    server.once("listening", onListening);
+    server.listen(options.port, host);
+  });
+}
+
+async function openToLocalNetwork() {
+  const nextHost = "0.0.0.0";
+  if (!isLocalHost(currentHost) || networkRebindInProgress) return networkStatus();
+
+  networkRebindInProgress = true;
+  closeSseClientsForRebind(nextHost);
+  const previousHost = currentHost;
+  try {
+    await closeServerListener();
+    await listenOn(nextHost);
+    currentHost = nextHost;
+    console.warn("WARNING: Web UI is now reachable from the local network and has no authentication.");
+    return networkStatus();
+  } catch (error) {
+    console.error("Failed to open Web UI to local network:", sanitizeError(error));
+    if (!server.listening) {
+      try {
+        await listenOn(previousHost);
+      } catch (restoreError) {
+        console.error("Failed to restore Web UI listener:", sanitizeError(restoreError));
+      }
+    }
+    throw error;
+  } finally {
+    networkRebindInProgress = false;
+  }
+}
+
+async function safeRpcData(tab, command, timeoutMs = STATUS_RPC_TIMEOUT_MS) {
+  try {
+    const response = await tab.rpc.send(command, timeoutMs);
+    if (response?.success === false) return { ok: false, error: response.error || `${command.type} failed` };
+    return { ok: true, data: response?.data ?? null };
+  } catch (error) {
+    return { ok: false, error: sanitizeError(error) };
+  }
+}
+
+function providerList(models) {
+  const providers = new Set();
+  for (const model of Array.isArray(models) ? models : []) {
+    if (model?.provider) providers.add(String(model.provider));
+  }
+  return [...providers].sort();
+}
+
+async function tabStatusDetails(tab) {
+  const [stateResult, modelsResult, statsResult, workspaceResult] = await Promise.all([
+    safeRpcData(tab, { type: "get_state" }),
+    safeRpcData(tab, { type: "get_available_models" }),
+    safeRpcData(tab, { type: "get_session_stats" }),
+    getWorkspaceInfo(tab.cwd, tab.rpc.startedAt).then((data) => ({ ok: true, data })).catch((error) => ({ ok: false, error: sanitizeError(error) })),
+  ]);
+  const models = modelsResult.ok ? modelsResult.data?.models || [] : [];
+  return {
+    ...tabMeta(tab),
+    state: stateResult.ok ? stateResult.data : null,
+    stateError: stateResult.ok ? undefined : stateResult.error,
+    stats: statsResult.ok ? statsResult.data : null,
+    statsError: statsResult.ok ? undefined : statsResult.error,
+    workspace: workspaceResult.ok ? workspaceResult.data : null,
+    workspaceError: workspaceResult.ok ? undefined : workspaceResult.error,
+    models: {
+      count: models.length,
+      providers: providerList(models),
+      error: modelsResult.ok ? undefined : modelsResult.error,
+    },
+  };
+}
+
+async function webuiStatus({ detailed = false, eventLimit = 40 } = {}) {
+  const tab = firstTab();
+  const network = networkStatus();
+  const data = {
+    online: true,
+    webuiVersion: packageJson.version,
+    webuiPid: process.pid,
+    startedAt: serverStartedAt,
+    cwd: options.cwd,
+    boundHost: currentHost,
+    port: options.port,
+    pageUrl: network.localUrl,
+    boundUrl: `http://${formatUrlHost(currentHost)}:${options.port}/`,
+    network,
+    piPid: tab?.rpc.child?.pid,
+    piRunning: !!tab?.rpc.child && tab.rpc.child.exitCode === null,
+    tabs: listTabs(),
+  };
+
+  if (detailed) {
+    data.tabs = await Promise.all([...tabs.values()].map((item) => tabStatusDetails(item)));
+    data.events = latestEvents(eventLimit);
+  }
+
+  return data;
+}
 
 const server = createServer(async (req, res) => {
   try {
     const url = new URL(req.url || "/", `http://${req.headers.host || "localhost"}`);
 
+    if (url.pathname === "/api/tabs" && req.method === "GET") {
+      sendJson(res, 200, { ok: true, data: { tabs: listTabs() } });
+      return;
+    }
+
+    if (url.pathname === "/api/tabs" && req.method === "POST") {
+      const body = await readJsonBody(req);
+      const tab = await createTab({ title: body.title, cwd: body.cwd });
+      sendJson(res, 201, { ok: true, data: { tab: tabMeta(tab), tabs: listTabs() } });
+      return;
+    }
+
+    if (url.pathname.startsWith("/api/tabs/") && req.method === "PATCH") {
+      const id = decodeURIComponent(url.pathname.slice("/api/tabs/".length));
+      const body = await readJsonBody(req);
+      const { tab, changed } = await updateTabCwd(id, body.cwd);
+      sendJson(res, 200, { ok: true, data: { tab: tabMeta(tab), tabs: listTabs(), changed } });
+      return;
+    }
+
+    if (url.pathname.startsWith("/api/tabs/") && req.method === "DELETE") {
+      const id = decodeURIComponent(url.pathname.slice("/api/tabs/".length));
+      closeTab(id);
+      sendJson(res, 200, { ok: true, data: { tabs: listTabs(), activeTabId: firstTab()?.id || null } });
+      return;
+    }
+
     if (url.pathname === "/api/events" && req.method === "GET") {
+      const tab = getRequestedTab(req, url);
       res.writeHead(200, {
         "content-type": "text/event-stream; charset=utf-8",
         "cache-control": "no-cache, no-transform",
@@ -703,44 +1445,129 @@ const server = createServer(async (req, res) => {
         "x-content-type-options": "nosniff",
       });
       res.write(": connected\n\n");
-      sseClients.add(res);
+      tab.sseClients.add(res);
       sendSse(res, {
         type: "webui_connected",
         version: packageJson.version,
-        pid: rpc.child?.pid,
-        cwd: options.cwd,
-        startedAt: rpc.startedAt,
+        tabId: tab.id,
+        tabTitle: tab.title,
+        pid: tab.rpc.child?.pid,
+        cwd: tab.cwd,
+        startedAt: tab.rpc.startedAt,
       });
       const keepAlive = setInterval(() => res.write(": keepalive\n\n"), 15000);
       req.on("close", () => {
         clearInterval(keepAlive);
-        sseClients.delete(res);
+        tab.sseClients.delete(res);
       });
       return;
     }
 
     if (url.pathname === "/api/health" && req.method === "GET") {
+      const status = await webuiStatus();
       sendJson(res, 200, {
         ok: true,
-        webuiVersion: packageJson.version,
-        piPid: rpc.child?.pid,
-        piRunning: !!rpc.child && rpc.child.exitCode === null,
-        cwd: options.cwd,
+        webuiVersion: status.webuiVersion,
+        webuiPid: status.webuiPid,
+        piPid: status.piPid,
+        piRunning: status.piRunning,
+        cwd: status.cwd,
+        network: status.network,
+        tabs: status.tabs,
       });
       return;
     }
 
+    if (url.pathname === "/api/webui-status" && req.method === "GET") {
+      const detailed = ["1", "true", "yes", "detailed"].includes(String(url.searchParams.get("detailed") || "").toLowerCase());
+      const parsedEventLimit = Number.parseInt(url.searchParams.get("events") || "40", 10);
+      const eventLimit = Number.isFinite(parsedEventLimit) ? parsedEventLimit : 40;
+      sendJson(res, 200, { ok: true, data: await webuiStatus({ detailed, eventLimit }) });
+      return;
+    }
+
+    if (url.pathname === "/api/network" && req.method === "GET") {
+      sendJson(res, 200, { ok: true, data: networkStatus() });
+      return;
+    }
+
+    if (url.pathname === "/api/network/open" && req.method === "POST") {
+      if (!isLocalAddress(req.socket.remoteAddress)) throw makeHttpError(403, "Opening to the network is only allowed from localhost");
+      const before = networkStatus();
+      sendJson(res, 202, { ok: true, data: { ...before, opening: true } });
+      if (!before.open && !networkRebindInProgress) {
+        setTimeout(() => openToLocalNetwork().catch((error) => console.error("network open failed:", sanitizeError(error))), 20).unref();
+      }
+      return;
+    }
+
+    if (url.pathname === "/api/shutdown" && req.method === "POST") {
+      if (!isLocalAddress(req.socket.remoteAddress)) throw makeHttpError(403, "Shutdown is only allowed from localhost");
+      sendJson(res, 200, { ok: true, message: "Pi Web UI shutting down", webuiPid: process.pid });
+      setTimeout(() => shutdown("api shutdown"), 20).unref();
+      return;
+    }
+
     if (url.pathname === "/api/workspace" && req.method === "GET") {
+      const tab = getRequestedTab(req, url);
+      sendJson(res, 200, {
+        ok: true,
+        data: await getWorkspaceInfo(tab.cwd, tab.rpc.startedAt),
+      });
+      return;
+    }
+
+    if (url.pathname === "/api/directories" && req.method === "GET") {
+      const tab = getRequestedTab(req, url);
       sendJson(res, 200, {
         ok: true,
-        data: await getWorkspaceInfo(options.cwd, rpc.startedAt),
+        data: await getDirectoryPickerData(url.searchParams.get("path"), tab.cwd),
       });
       return;
     }
 
+    if (url.pathname === "/api/path-fast-picks" && req.method === "GET") {
+      sendJson(res, 200, { ok: true, data: { picks: await readPathFastPicks() } });
+      return;
+    }
+
+    if (url.pathname === "/api/path-fast-picks" && req.method === "POST") {
+      const body = await readJsonBody(req);
+      const picks = await writePathFastPicks(body.picks ?? body);
+      sendJson(res, 200, { ok: true, data: { picks } });
+      return;
+    }
+
+    if (url.pathname === "/api/scoped-models" && req.method === "GET") {
+      const tab = getRequestedTab(req, url);
+      sendJson(res, 200, { ok: true, data: await getScopedModelData(tab) });
+      return;
+    }
+
+    if (url.pathname === "/api/commands" && req.method === "GET") {
+      const tab = getRequestedTab(req, url);
+      sendJson(res, 200, { type: "response", command: "get_commands", success: true, data: await getCommandData(tab) });
+      return;
+    }
+
+    if (url.pathname === "/api/prompt" && req.method === "POST") {
+      const body = await readJsonBody(req);
+      const tab = getRequestedTab(req, url, body);
+      const nativeResponse = await handleNativeSlashCommand(tab, body);
+      if (nativeResponse) {
+        sendJson(res, nativeResponse.success === false ? 400 : 200, nativeResponse);
+        return;
+      }
+      const command = commandFromPost(url.pathname, body);
+      const response = await tab.rpc.send(command);
+      sendJson(res, response.success === false ? 400 : 200, response);
+      return;
+    }
+
     if (url.pathname.startsWith("/api/git-workflow/")) {
       const body = req.method === "POST" ? await readJsonBody(req) : {};
-      const response = await handleGitWorkflowRequest(url.pathname, body);
+      const tab = getRequestedTab(req, url, body);
+      const response = await handleGitWorkflowRequest(url.pathname, body, tab.cwd);
       if (response) {
         sendJson(res, 200, response);
         return;
@@ -749,16 +1576,19 @@ const server = createServer(async (req, res) => {
 
     const getCommand = req.method === "GET" ? commandFromGet(url.pathname) : undefined;
     if (getCommand) {
-      const response = await rpc.send(getCommand);
+      const tab = getRequestedTab(req, url);
+      const response = await tab.rpc.send(getCommand);
       sendJson(res, response.success === false ? 400 : 200, response);
       return;
     }
 
     if (req.method === "POST" && url.pathname === "/api/extension-ui-response") {
       const body = await readJsonBody(req);
-      if (body.type !== "extension_ui_response") body.type = "extension_ui_response";
-      if (!body.id) throw new Error("id is required");
-      await rpc.writeRaw(body);
+      const tab = getRequestedTab(req, url, body);
+      const { tabId, tab: _tab, ...payload } = body;
+      if (payload.type !== "extension_ui_response") payload.type = "extension_ui_response";
+      if (!payload.id) throw new Error("id is required");
+      await tab.rpc.writeRaw(payload);
       sendJson(res, 200, { ok: true });
       return;
     }
@@ -767,7 +1597,8 @@ const server = createServer(async (req, res) => {
       const body = await readJsonBody(req);
       const command = commandFromPost(url.pathname, body);
       if (command) {
-        const response = await rpc.send(command);
+        const tab = getRequestedTab(req, url, body);
+        const response = await tab.rpc.send(command);
         sendJson(res, response.success === false ? 400 : 200, response);
         return;
       }
@@ -777,22 +1608,26 @@ const server = createServer(async (req, res) => {
 
     sendError(res, 404, "Not found");
   } catch (error) {
-    sendError(res, 500, error);
+    sendError(res, error?.statusCode || 500, error);
   }
 });
 
 server.on("error", (error) => {
+  if (networkRebindInProgress) {
+    console.error("Web UI network rebind failed:", sanitizeError(error));
+    return;
+  }
   console.error("Web UI server failed:", sanitizeError(error));
-  rpc.stop();
+  for (const tab of tabs.values()) tab.rpc.stop();
   process.exit(1);
 });
 
-server.listen(options.port, options.host, () => {
-  const urlHost = options.host.includes(":") && !options.host.startsWith("[") ? `[${options.host}]` : options.host;
+server.listen(options.port, currentHost, () => {
+  const urlHost = formatUrlHost(currentHost);
   console.log(`Pi Web UI: http://${urlHost}:${options.port}/`);
   console.log(`Working directory: ${options.cwd}`);
-  console.log(`Pi RPC: ${piCommand.displayCommand}`);
-  if (!isLocalHost(options.host)) {
+  console.log(`Pi RPC: ${initialTab.rpc.displayCommand}`);
+  if (!isLocalHost(currentHost)) {
     console.warn("WARNING: Web UI has no authentication. Only expose it on trusted networks.");
   }
 });
@@ -800,7 +1635,7 @@ server.listen(options.port, options.host, () => {
 function shutdown(signal) {
   console.log(`\n${signal}: shutting down Pi Web UI...`);
   server.close(() => process.exit(0));
-  rpc.stop();
+  for (const tab of tabs.values()) tab.rpc.stop();
   setTimeout(() => process.exit(0), 4000).unref();
 }