@firstpick/pi-package-webui 0.1.1 → 0.1.3

package/bin/pi-webui.mjs

@@ -2,13 +2,15 @@
 import { spawn } from "node:child_process";
 import { randomUUID } from "node:crypto";
 import { createServer } from "node:http";
-import { access, readFile, readdir, stat } from "node:fs/promises";
-import { networkInterfaces } from "node:os";
+import { createRequire } from "node:module";
+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";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
 const packageRoot = path.resolve(__dirname, "..");
 const publicDir = path.join(packageRoot, "public");
 const packageJson = JSON.parse(await readFile(path.join(packageRoot, "package.json"), "utf8"));
@@ -17,14 +19,92 @@ 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 EXTENSION_UI_BLOCKING_METHODS = new Set(["select", "confirm", "input", "editor"]);
+const STATUS_RPC_TIMEOUT_MS = 1_800;
+const FAST_PICK_LIMIT = 30;
+const PATH_SUGGESTION_LIMIT = 20;
+const PATH_SUGGESTION_QUERY_LIMIT = 512;
+const PATH_SUGGESTION_SCAN_LIMIT = 5000;
+const PATH_SUGGESTION_MAX_OUTPUT_LENGTH = 300000;
+const PATH_SUGGESTION_EXCLUDED_DIRS = new Set([".git", "node_modules"]);
+const RESTORE_TAB_LIMIT = 30;
+const NETWORK_REBIND_DELAY_MS = 100;
+const NETWORK_REBIND_FORCE_CLOSE_MS = 750;
+const AUTO_TAB_TITLE_MAX_LENGTH = 44;
+const AUTO_TAB_TITLE_WORD_LIMIT = 8;
+const AUTO_TAB_TITLE_STOP_WORDS = new Set([
+  "a",
+  "an",
+  "and",
+  "are",
+  "as",
+  "at",
+  "be",
+  "best",
+  "by",
+  "for",
+  "from",
+  "how",
+  "in",
+  "is",
+  "it",
+  "its",
+  "me",
+  "my",
+  "of",
+  "on",
+  "or",
+  "please",
+  "s",
+  "should",
+  "that",
+  "the",
+  "this",
+  "to",
+  "way",
+  "what",
+  "whats",
+  "when",
+  "with",
+  "you",
+  "your",
+]);
 
 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}
 
@@ -314,12 +394,13 @@ class PiRpcProcess {
   }
 }
 
-function sendJson(res, statusCode, payload) {
+function sendJson(res, statusCode, payload, headers = {}) {
   const body = JSON.stringify(payload, null, 2);
   res.writeHead(statusCode, {
     "content-type": "application/json; charset=utf-8",
     "cache-control": "no-store",
     "x-content-type-options": "nosniff",
+    ...headers,
   });
   res.end(body);
 }
@@ -352,7 +433,175 @@ function sendSse(res, event) {
   res.write(`data: ${JSON.stringify(event)}\n\n`);
 }
 
-function runCommand(command, args, { cwd, timeoutMs = 2000 } = {}) {
+function rpcSuccess(command, data = {}) {
+  return { type: "response", command, success: true, data };
+}
+
+const ACTION_FEEDBACK_REACTIONS = new Set(["up", "down", "question"]);
+
+function trimFeedbackField(value, maxLength) {
+  const text = String(value || "").trim();
+  return text.length > maxLength ? `${text.slice(0, maxLength - 1)}…` : text;
+}
+
+function normalizeActionFeedbackItems(body) {
+  const rawItems = Array.isArray(body?.feedback) ? body.feedback : Array.isArray(body?.items) ? body.items : [];
+  if (rawItems.length === 0) throw new Error("feedback is required");
+  if (rawItems.length > 20) throw new Error("feedback is limited to 20 reactions per submission");
+  return rawItems.map((item, index) => {
+    const reaction = String(item?.reaction || "").trim();
+    if (!ACTION_FEEDBACK_REACTIONS.has(reaction)) throw new Error(`Invalid feedback reaction at item ${index + 1}`);
+    return {
+      reaction,
+      comment: trimFeedbackField(item?.comment, 800),
+      kind: trimFeedbackField(item?.kind || "action", 80),
+      title: trimFeedbackField(item?.title || `item ${index + 1}`, 240),
+      snippet: trimFeedbackField(item?.snippet, 2000),
+      messageIndex: Number.isFinite(Number(item?.messageIndex)) ? Number(item.messageIndex) : index,
+      createdAt: trimFeedbackField(item?.createdAt, 80),
+    };
+  });
+}
+
+function actionFeedbackReactionLabel(reaction) {
+  if (reaction === "up") return "👍 thumbs up — Good job; repeat this pattern when appropriate.";
+  if (reaction === "down") return "👎 thumbs down — avoid or reconsider this target/pattern; prioritize the user comment.";
+  return "? question mark — explain this target in detail in the final output.";
+}
+
+function formatActionFeedbackLearningPrompt(items) {
+  const lines = [
+    "The user submitted direct feedback on specific Web UI action or final-output cards from your last run.",
+    "Use it to steer future behavior and create or update a concise LEARNING note from this feedback.",
+    "Reaction semantics:",
+    "- 👍 thumbs up: treat as 'Good job!' and reinforce the action/pattern.",
+    "- 👎 thumbs down: avoid or reconsider this target/pattern; include any user comment.",
+    "- ? question mark: explain the target in detail in your final output.",
+    "",
+    "Feedback items:",
+  ];
+
+  items.forEach((item, index) => {
+    lines.push(
+      `${index + 1}. ${actionFeedbackReactionLabel(item.reaction)}`,
+      `   Target (${item.kind}): ${item.title}`,
+      item.comment ? `   User comment: ${item.comment}` : undefined,
+      item.snippet ? `   Action excerpt:\n${item.snippet.split(/\r?\n/).map((line) => `     ${line}`).join("\n")}` : undefined,
+    );
+  });
+
+  lines.push(
+    "",
+    "After processing this feedback, report which LEARNING was created or updated. If any item used '?', include the requested detailed explanation in the final response.",
+  );
+  return lines.filter((line) => line !== undefined).join("\n");
+}
+
+async function handleActionFeedback(tab, body) {
+  const feedbackItems = normalizeActionFeedbackItems(body);
+  const state = await tab.rpc.send({ type: "get_state" });
+  if (state.success === false) return state;
+  if (state.data?.isStreaming || state.data?.isCompacting) {
+    throw makeHttpError(409, "Wait for the current agent run or compaction to finish before sending feedback.");
+  }
+
+  const command = { type: "prompt", message: formatActionFeedbackLearningPrompt(feedbackItems) };
+  markTabWorking(tab);
+  const response = await tab.rpc.send(command);
+  if (response.success === false) markTabIdle(tab);
+  return response;
+}
+
+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 };
+}
+
+function truncateTabTitle(title, maxLength = AUTO_TAB_TITLE_MAX_LENGTH) {
+  const text = String(title || "").replace(/\s+/g, " ").trim();
+  if (!maxLength || text.length <= maxLength) return text;
+  return `${text.slice(0, Math.max(1, maxLength - 1)).trimEnd()}…`;
+}
+
+function titleCaseTabTitle(title) {
+  return title ? `${title.charAt(0).toUpperCase()}${title.slice(1)}` : "";
+}
+
+function generatedTabTitleFromPrompt(message) {
+  const line = String(message || "")
+    .split(/\r?\n/)
+    .map((item) => item.trim())
+    .find((item) => item && !item.startsWith("```"));
+  if (!line) return "";
+
+  const cleaned = line
+    .replace(/https?:\/\/\S+/gi, "link")
+    .replace(/^\/+/, "")
+    .replace(/[-_]+/g, " ")
+    .replace(/[`*_~#>{}\[\]()<>'"“”‘’,;:!?]+/g, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+    .replace(/^(?:please\s+)?(?:can|could|would)\s+you\s+/i, "")
+    .replace(/^(?:please\s+)?(?:help\s+me\s+|i\s+(?:need|want)\s+(?:you\s+to\s+)?)/i, "")
+    .replace(/^(?:for|in|on)\s+the\s+/i, "");
+  if (!cleaned) return "";
+
+  const words = cleaned.split(/\s+/).map((word) => word.replace(/^[^\w]+|[^\w]+$/g, "")).filter(Boolean);
+  const meaningfulWords = words.filter((word) => !AUTO_TAB_TITLE_STOP_WORDS.has(word.toLowerCase()));
+  const selectedWords = (meaningfulWords.length >= 3 ? meaningfulWords : words).slice(0, AUTO_TAB_TITLE_WORD_LIMIT);
+  return truncateTabTitle(titleCaseTabTitle(selectedWords.join(" ")));
+}
+
+function uniqueTabTitle(title, currentTab, maxLength = AUTO_TAB_TITLE_MAX_LENGTH) {
+  const base = truncateTabTitle(title, maxLength);
+  if (!base) return "";
+  const existing = new Set([...tabs.values()].filter((tab) => tab.id !== currentTab?.id).map((tab) => tab.title));
+  if (!existing.has(base)) return base;
+  for (let suffix = 2; suffix < 100; suffix++) {
+    const suffixText = ` ${suffix}`;
+    const candidate = `${truncateTabTitle(base, Math.max(1, maxLength - suffixText.length))}${suffixText}`;
+    if (!existing.has(candidate)) return candidate;
+  }
+  return `${truncateTabTitle(base, Math.max(1, maxLength - 4))} ${currentTab?.index || 1}`;
+}
+
+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 ["id", "tabId", "tabTitle", "previousTabTitle", "titleSource", "pid", "cwd", "code", "signal", "command", "method", "replayed", "queueLength", "pendingMessageCount", "pendingExtensionUiRequestCount"]) {
+    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, maxOutputLength = 20000 } = {}) {
   return new Promise((resolve) => {
     const child = spawn(command, args, {
       cwd,
@@ -374,11 +623,11 @@ function runCommand(command, args, { cwd, timeoutMs = 2000 } = {}) {
     }, timeoutMs);
     child.stdout.on("data", (chunk) => {
       stdout += String(chunk);
-      if (stdout.length > 20000) stdout = stdout.slice(-20000);
+      if (stdout.length > maxOutputLength) stdout = stdout.slice(-maxOutputLength);
     });
     child.stderr.on("data", (chunk) => {
       stderr += String(chunk);
-      if (stderr.length > 20000) stderr = stderr.slice(-20000);
+      if (stderr.length > maxOutputLength) stderr = stderr.slice(-maxOutputLength);
     });
     child.on("error", (error) => finish({ exitCode: undefined, stdout, stderr: sanitizeError(error), error: sanitizeError(error) }));
     child.on("exit", (exitCode) => finish({ exitCode, stdout, stderr, timedOut: false }));
@@ -434,6 +683,137 @@ function uniquePathItems(items) {
   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([
@@ -472,6 +852,199 @@ async function getDirectoryPickerData(viewPath, activeCwd) {
   };
 }
 
+function normalizeSuggestionPath(value) {
+  return String(value || "").replace(/\\/g, "/");
+}
+
+function cleanPathSuggestionQuery(value) {
+  return normalizeSuggestionPath(value).replace(/\0/g, "").slice(0, PATH_SUGGESTION_QUERY_LIMIT);
+}
+
+function splitSuggestionPathQuery(query) {
+  const normalized = normalizeSuggestionPath(query);
+  if (normalized === "~") return { displayBase: "~", prefix: "" };
+  if (!normalized || normalized.endsWith("/")) return { displayBase: normalized, prefix: "" };
+  const slashIndex = normalized.lastIndexOf("/");
+  if (slashIndex === -1) return { displayBase: "", prefix: normalized };
+  return { displayBase: normalized.slice(0, slashIndex + 1), prefix: normalized.slice(slashIndex + 1) };
+}
+
+function resolveSuggestionBase(displayBase, cwd) {
+  const base = displayBase || ".";
+  if (base === "~" || base.startsWith("~/")) return path.resolve(expandUserPath(base));
+  if (base.startsWith("/")) return path.resolve(base);
+  return path.resolve(cwd, base);
+}
+
+function joinSuggestionDisplayPath(displayBase, name) {
+  const base = normalizeSuggestionPath(displayBase);
+  if (!base || base === ".") return name;
+  if (base === "/") return `/${name}`;
+  return `${base.replace(/\/+$/, "")}/${name}`;
+}
+
+function pathSuggestionLabel(pathText) {
+  const normalized = normalizeSuggestionPath(pathText).replace(/\/+$/, "");
+  const name = normalized ? path.posix.basename(normalized) : pathText;
+  return `${name || pathText}${pathText.endsWith("/") ? "/" : ""}`;
+}
+
+function sortPathSuggestions(items) {
+  return items.sort((a, b) => {
+    if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
+    return a.path.localeCompare(b.path, undefined, { numeric: true, sensitivity: "base" });
+  });
+}
+
+async function getDirectPathSuggestions(query, cwd) {
+  const { displayBase, prefix } = splitSuggestionPathQuery(query);
+  const searchDir = resolveSuggestionBase(displayBase, cwd);
+  let entries;
+  try {
+    entries = await readdir(searchDir, { withFileTypes: true });
+  } catch {
+    return [];
+  }
+
+  const normalizedPrefix = prefix.toLowerCase();
+  const suggestions = [];
+  for (const entry of entries) {
+    if (entry.name === ".git" || (!normalizedPrefix && PATH_SUGGESTION_EXCLUDED_DIRS.has(entry.name))) continue;
+    if (normalizedPrefix && !entry.name.toLowerCase().startsWith(normalizedPrefix)) continue;
+    let isDirectory = entry.isDirectory();
+    if (!isDirectory && entry.isSymbolicLink()) {
+      try {
+        isDirectory = (await stat(path.join(searchDir, entry.name))).isDirectory();
+      } catch {
+        isDirectory = false;
+      }
+    }
+    const pathText = normalizeSuggestionPath(`${joinSuggestionDisplayPath(displayBase, entry.name)}${isDirectory ? "/" : ""}`);
+    suggestions.push({
+      path: pathText,
+      label: `${entry.name}${isDirectory ? "/" : ""}`,
+      type: isDirectory ? "directory" : "file",
+      description: pathText,
+    });
+  }
+  return sortPathSuggestions(suggestions).slice(0, PATH_SUGGESTION_LIMIT);
+}
+
+function addSuggestionEntry(entries, pathText, isDirectory) {
+  const normalized = normalizeSuggestionPath(pathText).replace(/^\.\//, "");
+  if (!normalized || normalized === ".git" || normalized.startsWith(".git/")) return;
+  const value = isDirectory && !normalized.endsWith("/") ? `${normalized}/` : normalized;
+  if (!entries.has(value)) entries.set(value, { path: value, isDirectory });
+}
+
+function addSuggestionPathWithParents(entries, pathText) {
+  const normalized = normalizeSuggestionPath(pathText).replace(/^\.\//, "");
+  if (!normalized || normalized.startsWith(".git/")) return;
+  const parts = normalized.split("/").filter(Boolean);
+  let parent = "";
+  for (let index = 0; index < parts.length - 1; index++) {
+    parent = parent ? `${parent}/${parts[index]}` : parts[index];
+    addSuggestionEntry(entries, `${parent}/`, true);
+  }
+  addSuggestionEntry(entries, normalized, false);
+}
+
+async function getGitPathSuggestionEntries(cwd) {
+  const result = await runCommand("git", ["-C", cwd, "ls-files", "-co", "--exclude-standard"], {
+    timeoutMs: 1200,
+    maxOutputLength: PATH_SUGGESTION_MAX_OUTPUT_LENGTH,
+  });
+  if (result.exitCode !== 0 || !result.stdout.trim()) return null;
+  const entries = new Map();
+  for (const line of result.stdout.split("\n")) addSuggestionPathWithParents(entries, line.trim());
+  return [...entries.values()];
+}
+
+async function getFilesystemPathSuggestionEntries(cwd) {
+  const entries = new Map();
+  async function walk(dir, relativeDir = "", depth = 0) {
+    if (entries.size >= PATH_SUGGESTION_SCAN_LIMIT || depth > 6) return;
+    let dirEntries;
+    try {
+      dirEntries = await readdir(dir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    dirEntries.sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: "base" }));
+    for (const entry of dirEntries) {
+      if (entries.size >= PATH_SUGGESTION_SCAN_LIMIT) return;
+      const relativePath = normalizeSuggestionPath(relativeDir ? `${relativeDir}/${entry.name}` : entry.name);
+      let isDirectory = entry.isDirectory();
+      if (!isDirectory && entry.isSymbolicLink()) {
+        try {
+          isDirectory = (await stat(path.join(dir, entry.name))).isDirectory();
+        } catch {
+          isDirectory = false;
+        }
+      }
+      if (isDirectory) {
+        addSuggestionEntry(entries, `${relativePath}/`, true);
+        if (!PATH_SUGGESTION_EXCLUDED_DIRS.has(entry.name)) await walk(path.join(dir, entry.name), relativePath, depth + 1);
+      } else {
+        addSuggestionEntry(entries, relativePath, false);
+      }
+    }
+  }
+  await walk(cwd);
+  return [...entries.values()];
+}
+
+function isSubsequence(needle, haystack) {
+  let index = 0;
+  for (const char of haystack) {
+    if (char === needle[index]) index++;
+    if (index >= needle.length) return true;
+  }
+  return needle.length === 0;
+}
+
+function scorePathSuggestion(entry, query) {
+  const q = normalizeSuggestionPath(query).replace(/^\.\//, "").replace(/\/+$/, "").toLowerCase();
+  if (!q) return entry.isDirectory ? 2 : 1;
+  const entryPath = entry.path.replace(/\/+$/, "").toLowerCase();
+  const name = path.posix.basename(entryPath);
+  let score = 0;
+  if (name === q) score = 100;
+  else if (name.startsWith(q)) score = 90;
+  else if (entryPath.startsWith(q)) score = 80;
+  else if (name.includes(q)) score = 70;
+  else if (entryPath.includes(q)) score = 55;
+  else if (isSubsequence(q, name)) score = 40;
+  else if (isSubsequence(q, entryPath)) score = 25;
+  if (entry.isDirectory && score > 0) score += 5;
+  return score;
+}
+
+function formatRankedPathSuggestions(entries, query) {
+  return entries
+    .map((entry) => ({ ...entry, score: scorePathSuggestion(entry, query) }))
+    .filter((entry) => entry.score > 0)
+    .sort((a, b) => b.score - a.score || a.path.length - b.path.length || a.path.localeCompare(b.path))
+    .slice(0, PATH_SUGGESTION_LIMIT)
+    .map((entry) => ({
+      path: entry.path,
+      label: pathSuggestionLabel(entry.path),
+      type: entry.isDirectory ? "directory" : "file",
+      description: entry.path,
+    }));
+}
+
+async function getPathSuggestionData(tab, rawQuery) {
+  const query = cleanPathSuggestionQuery(rawQuery);
+  const shouldUseDirect = !query || query.includes("/") || query.startsWith(".") || query.startsWith("~");
+  let suggestions = shouldUseDirect ? await getDirectPathSuggestions(query, tab.cwd) : [];
+  if (suggestions.length === 0 && query) {
+    const entries = (await getGitPathSuggestionEntries(tab.cwd)) ?? (await getFilesystemPathSuggestionEntries(tab.cwd));
+    suggestions = formatRankedPathSuggestions(entries, query);
+  }
+  return { cwd: tab.cwd, displayCwd: displayPath(tab.cwd), query, suggestions };
+}
+
 async function getWorkspaceInfo(cwd, startedAt) {
   const info = {
     cwd,
@@ -647,10 +1220,86 @@ async function handleGitWorkflowRequest(pathname, body = {}, cwd = options.cwd)
   }
 }
 
+function themeLabel(name) {
+  return String(name || "")
+    .split(/[-_]+/)
+    .filter(Boolean)
+    .map((part) => part.length <= 3 ? part.toUpperCase() : `${part.slice(0, 1).toUpperCase()}${part.slice(1)}`)
+    .join(" ");
+}
+
+function stringRecord(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return {};
+  const record = {};
+  for (const [key, item] of Object.entries(value)) {
+    if (typeof item === "string" || typeof item === "number" || typeof item === "boolean") record[key] = String(item);
+  }
+  return record;
+}
+
+async function directoryExists(dir) {
+  try {
+    const info = await stat(dir);
+    return info.isDirectory();
+  } catch {
+    return false;
+  }
+}
+
+async function resolveBundledThemesDir() {
+  const candidates = [];
+  try {
+    const manifestPath = require.resolve("@firstpick/pi-themes-bundle/package.json");
+    const root = path.dirname(manifestPath);
+    const manifest = JSON.parse(await readFile(manifestPath, "utf8"));
+    const declaredThemes = Array.isArray(manifest.pi?.themes) ? manifest.pi.themes : ["./themes"];
+    for (const entry of declaredThemes) {
+      if (typeof entry === "string" && entry.trim()) candidates.push(path.resolve(root, entry));
+    }
+  } catch {
+    // In repo development the bundle may be a sibling package rather than an installed dependency.
+  }
+  candidates.push(path.resolve(packageRoot, "..", "pi-package-themes-bundle", "themes"));
+
+  for (const candidate of candidates) {
+    if (await directoryExists(candidate)) return candidate;
+  }
+  return null;
+}
+
+function sanitizeBundledTheme(theme, fileName) {
+  const name = typeof theme?.name === "string" && theme.name.trim() ? theme.name.trim() : path.basename(fileName, ".json");
+  return {
+    name,
+    label: themeLabel(name),
+    vars: stringRecord(theme?.vars),
+    colors: stringRecord(theme?.colors),
+    export: stringRecord(theme?.export),
+  };
+}
+
+async function readBundledThemes() {
+  const dir = await resolveBundledThemesDir();
+  if (!dir) return { source: "@firstpick/pi-themes-bundle", themes: [] };
+
+  const files = (await readdir(dir)).filter((file) => file.endsWith(".json")).sort((a, b) => a.localeCompare(b));
+  const themes = [];
+  for (const file of files) {
+    try {
+      const raw = await readFile(path.join(dir, file), "utf8");
+      themes.push(sanitizeBundledTheme(JSON.parse(raw), file));
+    } catch (error) {
+      console.error(`Skipping invalid theme ${file}: ${sanitizeError(error)}`);
+    }
+  }
+  themes.sort((a, b) => a.label.localeCompare(b.label));
+  return { source: "@firstpick/pi-themes-bundle", themes };
+}
+
 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;
 }
 
@@ -753,6 +1402,49 @@ if (options.version) {
   process.exit(0);
 }
 
+const restoreTabs = readRestoreTabsFromEnv();
+
+function normalizedRestoreString(value, maxLength) {
+  const text = typeof value === "string" ? value.trim() : "";
+  return text ? text.slice(0, maxLength) : undefined;
+}
+
+function normalizeRestoreTabDescriptor(item, seenIds) {
+  if (!item || typeof item !== "object") return null;
+  const state = item.state && typeof item.state === "object" ? item.state : {};
+  const rawId = normalizedRestoreString(item.id, 128);
+  const id = rawId && /^[A-Za-z0-9._:-]+$/.test(rawId) && !seenIds.has(rawId) ? rawId : undefined;
+  if (id) seenIds.add(id);
+
+  const descriptor = {
+    id,
+    title: normalizedRestoreString(item.title, 160),
+    titleSource: ["explicit", "auto", "default"].includes(item.titleSource) ? item.titleSource : undefined,
+    cwd: normalizedRestoreString(item.cwd || item.workspace?.cwd, 4096),
+    conversationStarted: item.conversationStarted === true,
+    sessionFile: normalizedRestoreString(item.sessionFile || state.sessionFile, 4096),
+  };
+
+  if (Number.isInteger(item.index) && item.index > 0) descriptor.index = item.index;
+  return descriptor;
+}
+
+function readRestoreTabsFromEnv() {
+  const raw = process.env.PI_WEBUI_RESTORE_TABS;
+  delete process.env.PI_WEBUI_RESTORE_TABS;
+  if (!raw) return [];
+
+  try {
+    const parsed = JSON.parse(raw);
+    const items = Array.isArray(parsed) ? parsed : [];
+    const seenIds = new Set();
+    return items.map((item) => normalizeRestoreTabDescriptor(item, seenIds)).filter(Boolean).slice(0, RESTORE_TAB_LIMIT);
+  } catch (error) {
+    console.warn(`failed to parse PI_WEBUI_RESTORE_TABS: ${sanitizeError(error)}`);
+    return [];
+  }
+}
+
 function buildPiArgsForTab(tabIndex, title) {
   const args = ["--mode", "rpc"];
   if (options.noSession) args.push("--no-session");
@@ -783,7 +1475,254 @@ async function resolvePiCommand(piArgs) {
 }
 
 const tabs = new Map();
+const closedRestorableTabs = [];
 let nextTabIndex = 1;
+const TAB_ACTIVITY_IDLE_RECONCILE_GRACE_MS = 1200;
+const TAB_ACTIVITY_STATE_RECONCILE_INTERVAL_MS = 2500;
+const TAB_ACTIVITY_STATE_RECONCILE_TIMEOUT_MS = 1200;
+
+function sessionFileFromState(state) {
+  return state && typeof state === "object" ? normalizedRestoreString(state.sessionFile, 4096) : undefined;
+}
+
+function rememberTabState(tab, state) {
+  if (!tab || !state || typeof state !== "object") return;
+  tab.lastState = state;
+  if (!options.noSession && Object.prototype.hasOwnProperty.call(state, "sessionFile")) tab.sessionFile = sessionFileFromState(state);
+}
+
+function forgetTabState(tab) {
+  if (!tab) return;
+  tab.lastState = null;
+  tab.sessionFile = undefined;
+}
+
+function tabRestorableSessionFile(tab) {
+  if (options.noSession) return undefined;
+  return normalizedRestoreString(tab?.sessionFile || tab?.lastState?.sessionFile, 4096);
+}
+
+function createTabActivity(now = new Date().toISOString()) {
+  return {
+    status: "idle",
+    isWorking: false,
+    completionSerial: 0,
+    lastChangedAt: now,
+    lastStartedAt: null,
+    lastCompletedAt: null,
+  };
+}
+
+function resetTabActivity(tab) {
+  tab.activity = createTabActivity();
+}
+
+function tabActivitySnapshot(tab) {
+  return { ...(tab.activity || createTabActivity(tab.createdAt)) };
+}
+
+function pendingExtensionUiMap(tab) {
+  if (!tab.pendingExtensionUiRequests) tab.pendingExtensionUiRequests = new Map();
+  return tab.pendingExtensionUiRequests;
+}
+
+function isPendingExtensionUiRequest(event) {
+  return event?.type === "extension_ui_request" && EXTENSION_UI_BLOCKING_METHODS.has(event.method) && event.id;
+}
+
+function pruneExpiredPendingExtensionUiRequests(tab, nowMs = Date.now()) {
+  const pending = tab?.pendingExtensionUiRequests;
+  if (!pending) return;
+  for (const [id, request] of pending) {
+    const expiresAtMs = Date.parse(request.expiresAt || "");
+    if (Number.isFinite(expiresAtMs) && expiresAtMs <= nowMs) pending.delete(id);
+  }
+}
+
+function pendingExtensionUiRequests(tab) {
+  pruneExpiredPendingExtensionUiRequests(tab);
+  return [...(tab?.pendingExtensionUiRequests?.values() || [])];
+}
+
+function pendingExtensionUiRequestSummaries(tab) {
+  return pendingExtensionUiRequests(tab).map((request) => ({
+    id: request.id,
+    method: request.method,
+    title: truncateStatusText(request.title || request.placeholder || "", 120),
+    message: request.message ? truncateStatusText(request.message, 180) : undefined,
+    receivedAt: request.receivedAt,
+    expiresAt: request.expiresAt,
+  }));
+}
+
+function trackPendingExtensionUiRequest(tab, event) {
+  if (!isPendingExtensionUiRequest(event)) return;
+  const receivedAt = new Date().toISOString();
+  const timeoutMs = Number(event.timeout);
+  const expiresAt = Number.isFinite(timeoutMs) && timeoutMs > 0 ? new Date(Date.parse(receivedAt) + timeoutMs + 1000).toISOString() : undefined;
+  pendingExtensionUiMap(tab).set(String(event.id), { ...event, receivedAt, expiresAt });
+  if (!tab.activity?.isWorking) markTabWorking(tab, receivedAt);
+}
+
+function resolvePendingExtensionUiRequest(tab, id) {
+  if (!id) return false;
+  return !!tab?.pendingExtensionUiRequests?.delete(String(id));
+}
+
+function clearPendingExtensionUiRequests(tab) {
+  tab?.pendingExtensionUiRequests?.clear();
+}
+
+function replayPendingExtensionUiRequests(tab, res) {
+  const pending = pendingExtensionUiRequests(tab);
+  for (const request of pending) {
+    sendSse(res, {
+      ...request,
+      type: "extension_ui_request",
+      replayed: true,
+      tabId: tab.id,
+      tabTitle: tab.title,
+      pendingExtensionUiRequestCount: pending.length,
+      tabActivity: tabActivitySnapshot(tab),
+    });
+  }
+}
+
+async function cancelPendingExtensionUiRequests(tab) {
+  const pending = pendingExtensionUiRequests(tab);
+  if (!pending.length) return 0;
+  const ids = [];
+  for (const request of pending) {
+    ids.push(String(request.id));
+    try {
+      await tab.rpc.writeRaw({ type: "extension_ui_response", id: request.id, cancelled: true });
+    } catch {
+      // Abort should remain best-effort even if the RPC process already exited.
+    }
+    resolvePendingExtensionUiRequest(tab, request.id);
+  }
+  broadcastTabEvent(tab, {
+    type: "webui_extension_ui_cancelled",
+    tabId: tab.id,
+    tabTitle: tab.title,
+    ids,
+    pendingExtensionUiRequestCount: pendingExtensionUiRequests(tab).length,
+    tabActivity: tabActivitySnapshot(tab),
+  });
+  return ids.length;
+}
+
+function markTabWorking(tab, timestamp = new Date().toISOString()) {
+  const activity = tab.activity || createTabActivity(timestamp);
+  activity.status = "working";
+  activity.isWorking = true;
+  activity.lastStartedAt = timestamp;
+  activity.lastChangedAt = timestamp;
+  tab.activity = activity;
+}
+
+function markTabDone(tab, timestamp = new Date().toISOString()) {
+  const activity = tab.activity || createTabActivity(timestamp);
+  activity.status = "done";
+  activity.isWorking = false;
+  activity.completionSerial = (Number(activity.completionSerial) || 0) + 1;
+  activity.lastCompletedAt = timestamp;
+  activity.lastChangedAt = timestamp;
+  tab.activity = activity;
+}
+
+function markTabIdle(tab, timestamp = new Date().toISOString()) {
+  const activity = tab.activity || createTabActivity(timestamp);
+  activity.status = "idle";
+  activity.isWorking = false;
+  activity.lastChangedAt = timestamp;
+  tab.activity = activity;
+}
+
+function commandStartsVisibleWork(command) {
+  return command?.type === "compact" || (command?.type === "prompt" && !command.streamingBehavior);
+}
+
+function commandStartsConversation(command) {
+  return command?.type === "prompt" && !command.streamingBehavior;
+}
+
+function stateHasVisibleWork(state) {
+  return !!state?.isStreaming || !!state?.isCompacting || Number(state?.pendingMessageCount || 0) > 0;
+}
+
+function activityRecentlyStarted(activity, nowMs = Date.now()) {
+  const startedMs = Date.parse(activity?.lastStartedAt || activity?.lastChangedAt || "");
+  return Number.isFinite(startedMs) && nowMs - startedMs < TAB_ACTIVITY_IDLE_RECONCILE_GRACE_MS;
+}
+
+function reconcileTabActivityFromState(tab, state, timestamp = new Date().toISOString()) {
+  if (!tab) return createTabActivity(timestamp);
+  if (!state || typeof state !== "object") return tabActivitySnapshot(tab);
+  if (pendingExtensionUiRequests(tab).length > 0) {
+    if (!tab.activity?.isWorking) markTabWorking(tab, timestamp);
+    return tabActivitySnapshot(tab);
+  }
+  if (stateHasVisibleWork(state)) {
+    if (!tab.activity?.isWorking) markTabWorking(tab, timestamp);
+    return tabActivitySnapshot(tab);
+  }
+  if (tab.activity?.isWorking && !activityRecentlyStarted(tab.activity)) {
+    markTabDone(tab, timestamp);
+  }
+  return tabActivitySnapshot(tab);
+}
+
+async function reconcileWorkingTabActivity(tab) {
+  if (!tab?.activity?.isWorking) return;
+  if (activityRecentlyStarted(tab.activity)) return;
+  const now = Date.now();
+  if (now - (tab.activityStateReconcileAt || 0) < TAB_ACTIVITY_STATE_RECONCILE_INTERVAL_MS) return;
+  tab.activityStateReconcileAt = now;
+  try {
+    const response = await tab.rpc.send({ type: "get_state" }, TAB_ACTIVITY_STATE_RECONCILE_TIMEOUT_MS);
+    if (response?.success !== false) {
+      rememberTabState(tab, response.data);
+      reconcileTabActivityFromState(tab, response.data);
+    }
+  } catch {
+    // Ignore reconciliation failures; normal RPC events will still update activity.
+  }
+}
+
+async function listTabsWithReconciledActivity() {
+  await Promise.all([...tabs.values()].map(reconcileWorkingTabActivity));
+  return listTabs();
+}
+
+function updateTabActivityFromEvent(tab, event) {
+  const timestamp = new Date().toISOString();
+  switch (event?.type) {
+    case "agent_start":
+    case "compaction_start":
+      markTabWorking(tab, timestamp);
+      break;
+    case "agent_end":
+    case "compaction_end":
+      markTabDone(tab, timestamp);
+      break;
+    case "pi_process_exit":
+    case "pi_process_error":
+      if (tab.activity?.isWorking) markTabDone(tab, timestamp);
+      else markTabIdle(tab, timestamp);
+      break;
+    case "response":
+      if (event.command === "get_state" && event.success !== false) {
+        rememberTabState(tab, event.data);
+        reconcileTabActivityFromState(tab, event.data, timestamp);
+      } else if (!tab.activity) tab.activity = createTabActivity(timestamp);
+      break;
+    default:
+      if (!tab.activity) tab.activity = createTabActivity(timestamp);
+      break;
+  }
+  return tabActivitySnapshot(tab);
+}
 
 function defaultTabTitle(tabIndex) {
   if (options.name) return tabIndex === 1 ? options.name : `${options.name} ${tabIndex}`;
@@ -794,25 +1733,42 @@ function attachRpcToTab(tab, rpc) {
   tab.rpcUnsubscribe?.();
   tab.rpc = rpc;
   tab.rpcUnsubscribe = rpc.onEvent((event) => {
-    const scopedEvent = { ...event, tabId: tab.id, tabTitle: tab.title };
+    updateTabActivityFromEvent(tab, event);
+    let scopedEvent = { ...event, tabId: tab.id, tabTitle: tab.title, tabActivity: tabActivitySnapshot(tab) };
+    if (event?.type === "pi_process_exit" || event?.type === "pi_process_error") clearPendingExtensionUiRequests(tab);
+    else trackPendingExtensionUiRequest(tab, scopedEvent);
+    scopedEvent = { ...scopedEvent, tabActivity: tabActivitySnapshot(tab), pendingExtensionUiRequestCount: pendingExtensionUiRequests(tab).length };
+    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);
+async function createTab({ id: requestedId, index, title, titleSource, conversationStarted, cwd, sessionFile } = {}) {
+  const tabIndex = Number.isInteger(index) && index > 0 ? index : nextTabIndex;
+  nextTabIndex = Math.max(nextTabIndex, tabIndex + 1);
+  const explicitTitle = String(title || "").trim();
+  const tabTitle = explicitTitle || defaultTabTitle(tabIndex);
+  const titleIsExplicit = Boolean(explicitTitle || (options.name && tabIndex === 1));
+  const resolvedTitleSource = ["explicit", "auto", "default"].includes(titleSource) ? titleSource : titleIsExplicit ? "explicit" : "default";
   const tabCwd = cwd ? await resolveCwd(cwd, options.cwd) : options.cwd;
-  const id = randomUUID();
+  const id = requestedId && !tabs.has(requestedId) ? requestedId : randomUUID();
   const piArgs = buildPiArgsForTab(tabIndex, tabTitle);
+  if (sessionFile && !options.noSession) piArgs.push("--session", sessionFile);
   const piCommand = await resolvePiCommand(piArgs);
   const rpc = new PiRpcProcess({ ...piCommand, cwd: tabCwd });
+  const createdAt = new Date().toISOString();
   const tab = {
     id,
     index: tabIndex,
     title: tabTitle,
+    titleSource: resolvedTitleSource,
+    conversationStarted: conversationStarted === true,
     cwd: tabCwd,
-    createdAt: new Date().toISOString(),
+    createdAt,
+    sessionFile: options.noSession ? undefined : normalizedRestoreString(sessionFile, 4096),
+    lastState: null,
+    activity: createTabActivity(createdAt),
+    pendingExtensionUiRequests: new Map(),
     rpc: undefined,
     rpcUnsubscribe: undefined,
     sseClients: new Set(),
@@ -821,6 +1777,9 @@ async function createTab({ title, cwd } = {}) {
   attachRpcToTab(tab, rpc);
   tabs.set(id, tab);
   rpc.start();
+  if (sessionFile && !options.noSession) {
+    recordEvent({ type: "webui_tab_restored", tabId: tab.id, tabTitle: tab.title, cwd: tab.cwd });
+  }
   return tab;
 }
 
@@ -833,13 +1792,18 @@ function tabMeta(tab) {
     id: tab.id,
     index: tab.index,
     title: tab.title,
+    titleSource: tab.titleSource || "default",
+    conversationStarted: !!tab.conversationStarted,
     cwd: tab.cwd,
+    sessionFile: tabRestorableSessionFile(tab),
     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,
+    pendingExtensionUiRequestCount: pendingExtensionUiRequests(tab).length,
+    activity: tabActivitySnapshot(tab),
   };
 }
 
@@ -847,6 +1811,96 @@ function listTabs() {
   return [...tabs.values()].map(tabMeta);
 }
 
+function restorableTabDescriptor(tab, state = null) {
+  return normalizeRestoreTabDescriptor({
+    id: tab.id,
+    index: tab.index,
+    title: tab.title,
+    titleSource: tab.titleSource,
+    conversationStarted: tab.conversationStarted,
+    cwd: tab.cwd,
+    sessionFile: sessionFileFromState(state) || tabRestorableSessionFile(tab),
+  }, new Set());
+}
+
+function restorableTabKey(tab) {
+  if (tab.id) return `id:${tab.id}`;
+  if (tab.sessionFile) return `session:${tab.sessionFile}`;
+  return `tab:${tab.index || "?"}:${tab.title || ""}:${tab.cwd || ""}`;
+}
+
+function restorableTabSortIndex(tab) {
+  return Number.isInteger(tab.index) && tab.index > 0 ? tab.index : Number.MAX_SAFE_INTEGER;
+}
+
+function mergeRestorableTabDescriptors(...sources) {
+  const merged = [];
+  const seen = new Set();
+  for (const source of sources) {
+    for (const item of Array.isArray(source) ? source : []) {
+      const descriptor = normalizeRestoreTabDescriptor(item, new Set());
+      if (!descriptor) continue;
+      const key = restorableTabKey(descriptor);
+      if (seen.has(key)) continue;
+      seen.add(key);
+      merged.push(descriptor);
+    }
+  }
+  return merged
+    .sort((a, b) => restorableTabSortIndex(a) - restorableTabSortIndex(b) || String(a.title || "").localeCompare(String(b.title || "")))
+    .slice(0, RESTORE_TAB_LIMIT);
+}
+
+function rememberClosedRestorableTab(tab, state = null) {
+  const descriptor = restorableTabDescriptor(tab, state);
+  if (!descriptor) return;
+  const key = restorableTabKey(descriptor);
+  const existingIndex = closedRestorableTabs.findIndex((item) => restorableTabKey(item) === key);
+  if (existingIndex !== -1) closedRestorableTabs.splice(existingIndex, 1);
+  closedRestorableTabs.push(descriptor);
+  while (closedRestorableTabs.length > RESTORE_TAB_LIMIT) closedRestorableTabs.shift();
+}
+
+function broadcastTabEvent(tab, event) {
+  recordEvent(event);
+  for (const client of tab.sseClients) sendSse(client, event);
+}
+
+function renameTab(tab, title, { source = "explicit", maxLength, unique = source === "auto" } = {}) {
+  if (!tab) return false;
+  const rawTitle = maxLength ? truncateTabTitle(title, maxLength) : String(title || "").replace(/\s+/g, " ").trim();
+  const nextTitle = unique ? uniqueTabTitle(rawTitle, tab, maxLength || AUTO_TAB_TITLE_MAX_LENGTH) : rawTitle;
+  if (!nextTitle) return false;
+
+  const previousTitle = tab.title;
+  tab.title = nextTitle;
+  tab.titleSource = source;
+  if (previousTitle === nextTitle) return false;
+
+  broadcastTabEvent(tab, {
+    type: "webui_tab_renamed",
+    tabId: tab.id,
+    tabTitle: tab.title,
+    previousTabTitle: previousTitle,
+    titleSource: source,
+    tab: tabMeta(tab),
+    tabActivity: tabActivitySnapshot(tab),
+  });
+  return true;
+}
+
+function maybeNameTabForConversation(tab, command) {
+  if (!tab || !commandStartsConversation(command) || tab.conversationStarted || tab.titleSource === "explicit") return false;
+  tab.conversationStarted = true;
+  const title = generatedTabTitleFromPrompt(command.message) || `Conversation ${tab.index}`;
+  return renameTab(tab, title, { source: "auto", maxLength: AUTO_TAB_TITLE_MAX_LENGTH });
+}
+
+function responseWithTab(response, tab) {
+  if (!response || typeof response !== "object") return response;
+  return { ...response, tab: tabMeta(tab) };
+}
+
 async function updateTabCwd(id, cwd) {
   const tab = tabs.get(id);
   if (!tab) throw makeHttpError(404, `Unknown Pi tab: ${id}`);
@@ -856,8 +1910,10 @@ async function updateTabCwd(id, cwd) {
 
   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, { type: "webui_tab_restarting", tabId: tab.id, tabTitle: tab.title, cwd: nextCwd });
+    sendSse(client, restartingEvent);
   }
 
   const oldRpc = tab.rpc;
@@ -866,23 +1922,155 @@ async function updateTabCwd(id, cwd) {
   oldRpc.stop();
 
   tab.cwd = nextCwd;
+  forgetTabState(tab);
+  resetTabActivity(tab);
+  clearPendingExtensionUiRequests(tab);
   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, tabActivity: tabActivitySnapshot(tab) };
+  recordEvent(changedEvent);
   for (const client of tab.sseClients) {
-    sendSse(client, { type: "webui_cwd_changed", tabId: tab.id, tabTitle: tab.title, cwd: tab.cwd, pid: tab.rpc.child?.pid });
+    sendSse(client, changedEvent);
   }
   return { tab, changed: true };
 }
 
-function closeTab(id) {
+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");
+  rememberTabState(tab, state.data);
+  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();
+
+  resetTabActivity(tab);
+  clearPendingExtensionUiRequests(tab);
+  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, tabActivity: tabActivitySnapshot(tab) };
+  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 or @path suggestion",
+    "Arrow up/down: move through slash-command or @path 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" });
+      if (response.success === false) return response;
+      tab.conversationStarted = false;
+      return rpcSuccess("native_slash_command", { command: "new", tab: tabMeta(tab), 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 });
+      if (response.success === false) return response;
+      renameTab(tab, parsed.args, { source: "explicit" });
+      return rpcSuccess("native_slash_command", { command: "name", tab: tabMeta(tab), message: `Session and tab name set to: ${tab.title}` });
+    }
+    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.`);
+  }
+}
+
+async 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");
 
+  let restorableState = null;
+  if (!options.noSession) {
+    const stateResult = await safeRpcData(tab, { type: "get_state" }, STATUS_RPC_TIMEOUT_MS);
+    if (stateResult.ok) restorableState = stateResult.data;
+  }
+  rememberClosedRestorableTab(tab, restorableState);
+
+  const closingEvent = { type: "webui_tab_closing", tabId: tab.id, tabTitle: tab.title };
+  recordEvent(closingEvent);
   for (const client of tab.sseClients) {
-    sendSse(client, { type: "webui_tab_closing", tabId: tab.id, tabTitle: tab.title });
+    sendSse(client, closingEvent);
     client.end();
   }
   tab.sseClients.clear();
@@ -910,9 +2098,27 @@ function getRequestedTab(req, url, body = {}) {
   return tab;
 }
 
-const initialTab = await createTab();
+async function createInitialTabs() {
+  if (!restoreTabs.length) return [await createTab()];
+
+  const created = [];
+  for (const descriptor of restoreTabs) {
+    try {
+      created.push(await createTab(descriptor));
+    } catch (error) {
+      console.warn(`failed to restore Web UI tab ${descriptor.title || descriptor.id || "unknown"}: ${sanitizeError(error)}`);
+    }
+  }
+
+  return created.length ? created : [await createTab()];
+}
+
+const serverStartedAt = new Date().toISOString();
+const initialTabs = await createInitialTabs();
+const initialTab = initialTabs[0];
 let currentHost = options.host;
 let networkRebindInProgress = false;
+let networkRebindTargetHost = null;
 
 function localNetworkAddresses() {
   const addresses = [];
@@ -927,10 +2133,14 @@ function localNetworkAddresses() {
 
 function networkStatus() {
   const open = !isLocalHost(currentHost);
+  const targetHost = networkRebindTargetHost || currentHost;
+  const opening = networkRebindInProgress && !isLocalHost(targetHost);
+  const closing = networkRebindInProgress && isLocalHost(targetHost);
   const networkUrls = open ? localNetworkAddresses().map((address) => `http://${address}:${options.port}/`) : [];
   return {
     open,
-    opening: networkRebindInProgress,
+    opening,
+    closing,
     host: currentHost,
     port: options.port,
     localUrl: `http://127.0.0.1:${options.port}/`,
@@ -940,8 +2150,18 @@ function networkStatus() {
 
 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,
+      opening: !isLocalHost(nextHost),
+      closing: isLocalHost(nextHost),
+    };
+    recordEvent(rebindEvent);
     for (const client of tab.sseClients) {
-      sendSse(client, { type: "webui_network_rebinding", tabId: tab.id, tabTitle: tab.title, host: nextHost, port: options.port });
+      sendSse(client, rebindEvent);
       client.end();
     }
     tab.sseClients.clear();
@@ -954,10 +2174,18 @@ function closeServerListener() {
       resolve();
       return;
     }
+    const forceCloseTimer = setTimeout(() => {
+      // Rebinding is intentionally disruptive. Long-poll/SSE/keep-alive clients can
+      // otherwise keep server.close() pending and leave currentHost stuck on 0.0.0.0.
+      server.closeAllConnections?.();
+    }, NETWORK_REBIND_FORCE_CLOSE_MS);
+    forceCloseTimer.unref?.();
     server.close((error) => {
+      clearTimeout(forceCloseTimer);
       if (error) reject(error);
       else resolve();
     });
+    server.closeIdleConnections?.();
   });
 }
 
@@ -986,6 +2214,7 @@ async function openToLocalNetwork() {
   if (!isLocalHost(currentHost) || networkRebindInProgress) return networkStatus();
 
   networkRebindInProgress = true;
+  networkRebindTargetHost = nextHost;
   closeSseClientsForRebind(nextHost);
   const previousHost = currentHost;
   try {
@@ -1006,7 +2235,115 @@ async function openToLocalNetwork() {
     throw error;
   } finally {
     networkRebindInProgress = false;
+    networkRebindTargetHost = null;
+  }
+}
+
+async function closeNetworkAccess() {
+  const nextHost = "127.0.0.1";
+  if (isLocalHost(currentHost) || networkRebindInProgress) return networkStatus();
+
+  networkRebindInProgress = true;
+  networkRebindTargetHost = nextHost;
+  closeSseClientsForRebind(nextHost);
+  const previousHost = currentHost;
+  try {
+    await closeServerListener();
+    await listenOn(nextHost);
+    currentHost = nextHost;
+    console.warn("Web UI network access closed; listening on localhost only.");
+    return networkStatus();
+  } catch (error) {
+    console.error("Failed to close Web UI network access:", 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;
+    networkRebindTargetHost = null;
+  }
+}
+
+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` };
+    if (command?.type === "get_state") rememberTabState(tab, response?.data);
+    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 || [] : [];
+  const stateData = stateResult.ok ? stateResult.data : tab.lastState || null;
+  return {
+    ...tabMeta(tab),
+    state: stateData,
+    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,
+    pendingExtensionUiRequests: pendingExtensionUiRequestSummaries(tab),
+    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 statusTabs = listTabs();
+  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: statusTabs,
+    restorableTabs: mergeRestorableTabDescriptors(statusTabs, closedRestorableTabs),
+  };
+
+  if (detailed) {
+    const detailedTabs = await Promise.all([...tabs.values()].map((item) => tabStatusDetails(item)));
+    data.tabs = detailedTabs;
+    data.restorableTabs = mergeRestorableTabDescriptors(detailedTabs, closedRestorableTabs);
+    data.closedTabs = closedRestorableTabs.slice();
+    data.events = latestEvents(eventLimit);
   }
+
+  return data;
 }
 
 const server = createServer(async (req, res) => {
@@ -1014,7 +2351,7 @@ const server = createServer(async (req, res) => {
     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() } });
+      sendJson(res, 200, { ok: true, data: { tabs: await listTabsWithReconciledActivity() } });
       return;
     }
 
@@ -1035,7 +2372,7 @@ const server = createServer(async (req, res) => {
 
     if (url.pathname.startsWith("/api/tabs/") && req.method === "DELETE") {
       const id = decodeURIComponent(url.pathname.slice("/api/tabs/".length));
-      closeTab(id);
+      await closeTab(id);
       sendJson(res, 200, { ok: true, data: { tabs: listTabs(), activeTabId: firstTab()?.id || null } });
       return;
     }
@@ -1058,7 +2395,10 @@ const server = createServer(async (req, res) => {
         pid: tab.rpc.child?.pid,
         cwd: tab.cwd,
         startedAt: tab.rpc.startedAt,
+        tabActivity: tabActivitySnapshot(tab),
+        pendingExtensionUiRequestCount: pendingExtensionUiRequests(tab).length,
       });
+      replayPendingExtensionUiRequests(tab, res);
       const keepAlive = setInterval(() => res.write(": keepalive\n\n"), 15000);
       req.on("close", () => {
         clearInterval(keepAlive);
@@ -1068,20 +2408,34 @@ const server = createServer(async (req, res) => {
     }
 
     if (url.pathname === "/api/health" && req.method === "GET") {
-      const tab = firstTab();
+      const status = await webuiStatus();
       sendJson(res, 200, {
         ok: true,
-        webuiVersion: packageJson.version,
-        webuiPid: process.pid,
-        piPid: tab?.rpc.child?.pid,
-        piRunning: !!tab?.rpc.child && tab.rpc.child.exitCode === null,
-        cwd: options.cwd,
-        network: networkStatus(),
-        tabs: listTabs(),
+        webuiVersion: status.webuiVersion,
+        webuiPid: status.webuiPid,
+        piPid: status.piPid,
+        piRunning: status.piRunning,
+        cwd: status.cwd,
+        network: status.network,
+        tabs: status.tabs,
+        restorableTabs: status.restorableTabs,
       });
       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/themes" && req.method === "GET") {
+      sendJson(res, 200, { ok: true, data: await readBundledThemes() });
+      return;
+    }
+
     if (url.pathname === "/api/network" && req.method === "GET") {
       sendJson(res, 200, { ok: true, data: networkStatus() });
       return;
@@ -1090,9 +2444,20 @@ const server = createServer(async (req, res) => {
     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();
+      const shouldOpen = !before.open && !networkRebindInProgress;
+      sendJson(res, 202, { ok: true, data: { ...before, opening: shouldOpen || before.opening, closing: before.closing } }, { connection: "close" });
+      if (shouldOpen) {
+        setTimeout(() => openToLocalNetwork().catch((error) => console.error("network open failed:", sanitizeError(error))), NETWORK_REBIND_DELAY_MS).unref();
+      }
+      return;
+    }
+
+    if (url.pathname === "/api/network/close" && req.method === "POST") {
+      const before = networkStatus();
+      const shouldClose = before.open && !networkRebindInProgress;
+      sendJson(res, 202, { ok: true, data: { ...before, opening: before.opening, closing: shouldClose || before.closing } }, { connection: "close" });
+      if (shouldClose) {
+        setTimeout(() => closeNetworkAccess().catch((error) => console.error("network close failed:", sanitizeError(error))), NETWORK_REBIND_DELAY_MS).unref();
       }
       return;
     }
@@ -1122,6 +2487,64 @@ const server = createServer(async (req, res) => {
       return;
     }
 
+    if (url.pathname === "/api/path-suggestions" && req.method === "GET") {
+      const tab = getRequestedTab(req, url);
+      sendJson(res, 200, { ok: true, data: await getPathSuggestionData(tab, url.searchParams.get("query")) });
+      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/action-feedback" && req.method === "POST") {
+      const body = await readJsonBody(req);
+      const tab = getRequestedTab(req, url, body);
+      const response = await handleActionFeedback(tab, body);
+      sendJson(res, response.success === false ? 400 : 200, response);
+      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, responseWithTab(nativeResponse, tab));
+        return;
+      }
+      const command = commandFromPost(url.pathname, body);
+      const startsVisibleWork = commandStartsVisibleWork(command);
+      if (startsVisibleWork) {
+        maybeNameTabForConversation(tab, command);
+        markTabWorking(tab);
+      }
+      const response = await tab.rpc.send(command);
+      if (response.success === false && startsVisibleWork) markTabIdle(tab);
+      sendJson(res, response.success === false ? 400 : 200, responseWithTab(response, tab));
+      return;
+    }
+
     if (url.pathname.startsWith("/api/git-workflow/")) {
       const body = req.method === "POST" ? await readJsonBody(req) : {};
       const tab = getRequestedTab(req, url, body);
@@ -1147,7 +2570,18 @@ const server = createServer(async (req, res) => {
       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 });
+      const resolved = resolvePendingExtensionUiRequest(tab, payload.id);
+      if (resolved) {
+        broadcastTabEvent(tab, {
+          type: "webui_extension_ui_resolved",
+          tabId: tab.id,
+          tabTitle: tab.title,
+          id: String(payload.id),
+          pendingExtensionUiRequestCount: pendingExtensionUiRequests(tab).length,
+          tabActivity: tabActivitySnapshot(tab),
+        });
+      }
+      sendJson(res, 200, { ok: true, tab: tabMeta(tab) });
       return;
     }
 
@@ -1156,8 +2590,21 @@ const server = createServer(async (req, res) => {
       const command = commandFromPost(url.pathname, body);
       if (command) {
         const tab = getRequestedTab(req, url, body);
+        if (command.type === "abort") await cancelPendingExtensionUiRequests(tab);
+        const startsVisibleWork = commandStartsVisibleWork(command);
+        if (startsVisibleWork) {
+          maybeNameTabForConversation(tab, command);
+          markTabWorking(tab);
+        }
         const response = await tab.rpc.send(command);
-        sendJson(res, response.success === false ? 400 : 200, response);
+        if (response.success === false && startsVisibleWork) markTabIdle(tab);
+        if (response.success !== false && command.type === "new_session") {
+          tab.conversationStarted = false;
+          forgetTabState(tab);
+          rememberTabState(tab, response.data);
+          clearPendingExtensionUiRequests(tab);
+        }
+        sendJson(res, response.success === false ? 400 : 200, responseWithTab(response, tab));
         return;
       }
     }
@@ -1185,6 +2632,7 @@ server.listen(options.port, currentHost, () => {
   console.log(`Pi Web UI: http://${urlHost}:${options.port}/`);
   console.log(`Working directory: ${options.cwd}`);
   console.log(`Pi RPC: ${initialTab.rpc.displayCommand}`);
+  if (restoreTabs.length) console.log(`Restored Web UI tabs: ${initialTabs.length}`);
   if (!isLocalHost(currentHost)) {
     console.warn("WARNING: Web UI has no authentication. Only expose it on trusted networks.");
   }