@firstpick/pi-package-webui 0.1.4 → 0.1.6

package/bin/pi-webui.mjs

@@ -4,10 +4,11 @@ import { randomUUID } from "node:crypto";
 import { createServer } from "node:http";
 import { createRequire } from "node:module";
 import { access, mkdir, readFile, readdir, rename, stat, writeFile } from "node:fs/promises";
-import { homedir, networkInterfaces } from "node:os";
+import { homedir, networkInterfaces, tmpdir } from "node:os";
 import path from "node:path";
 import { StringDecoder } from "node:string_decoder";
 import { fileURLToPath } from "node:url";
+import { SessionManager } from "@earendil-works/pi-coding-agent";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const require = createRequire(import.meta.url);
@@ -19,6 +20,14 @@ 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 PROMPT_BODY_LIMIT_BYTES = 24 * 1024 * 1024;
+const UPLOAD_BODY_LIMIT_BYTES = 96 * 1024 * 1024;
+const ATTACHMENT_UPLOAD_MAX_FILES = 12;
+const ATTACHMENT_UPLOAD_MAX_FILE_BYTES = 64 * 1024 * 1024;
+const ATTACHMENT_UPLOAD_MAX_TOTAL_BYTES = 64 * 1024 * 1024;
+const INLINE_IMAGE_MAX_BYTES = 8 * 1024 * 1024;
+const INLINE_IMAGE_TOTAL_MAX_BYTES = 16 * 1024 * 1024;
+const RPC_IMAGE_MIME_TYPES = new Set(["image/png", "image/jpeg", "image/webp", "image/gif"]);
 const EVENT_HISTORY_LIMIT = 200;
 const EXTENSION_UI_BLOCKING_METHODS = new Set(["select", "confirm", "input", "editor"]);
 const STATUS_RPC_TIMEOUT_MS = 1_800;
@@ -29,6 +38,8 @@ 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 SESSION_SELECTOR_LIMIT = 200;
+const TREE_SELECTOR_TEXT_LIMIT = 260;
 const NETWORK_REBIND_DELAY_MS = 100;
 const NETWORK_REBIND_FORCE_CLOSE_MS = 750;
 const AUTO_TAB_TITLE_MAX_LENGTH = 44;
@@ -77,6 +88,7 @@ const MIME_TYPES = new Map([
   [".css", "text/css; charset=utf-8"],
   [".svg", "image/svg+xml"],
   [".png", "image/png"],
+  [".webp", "image/webp"],
   [".webmanifest", "application/manifest+json; charset=utf-8"],
 ]);
 
@@ -104,6 +116,15 @@ const NATIVE_SLASH_COMMANDS = [
   { 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));
+const OPTIONAL_FEATURE_PACKAGES = new Map([
+  ["gitWorkflow", "@firstpick/pi-prompts-git-pr"],
+  ["releaseNpm", "@firstpick/pi-extension-release-npm"],
+  ["releaseAur", "@firstpick/pi-extension-release-aur"],
+  ["todoProgressWidget", "@firstpick/pi-extension-todo-progress"],
+  ["gitFooterStatus", "@firstpick/pi-extension-git-footer-status"],
+  ["statsCommand", "@firstpick/pi-extension-stats"],
+  ["themeBundle", "@firstpick/pi-themes-bundle"],
+]);
 
 function usage() {
   console.log(`pi-webui ${packageJson.version}
@@ -119,7 +140,7 @@ Options:
   --cwd <path>        Working directory for the Pi session (default: current dir)
   --pi <command>      Pi executable to spawn (default: bundled dependency, then "pi")
   --no-session        Start Pi RPC with --no-session
-  --name <name>       Initial Pi session name
+  --name <name>       Initial Web UI tab display name
   -h, --help          Show this help
   -v, --version       Print version
 
@@ -232,6 +253,10 @@ function sanitizeError(error) {
   return error.stack || error.message || String(error);
 }
 
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
 class PiRpcProcess {
   constructor({ command, args, displayCommand, cwd }) {
     this.command = command;
@@ -274,6 +299,10 @@ class PiRpcProcess {
     this.emit({ type: "pi_process_start", pid: this.child.pid, cwd: this.cwd, command: this.displayCommand, args: this.args });
   }
 
+  isRunning() {
+    return !!this.child && this.child.exitCode === null && !this.child.killed;
+  }
+
   onEvent(listener) {
     this.listeners.add(listener);
     return () => this.listeners.delete(listener);
@@ -344,7 +373,7 @@ class PiRpcProcess {
   }
 
   send(command, timeoutMs = REQUEST_TIMEOUT_MS) {
-    if (!this.child || !this.child.stdin || this.child.exitCode !== null) {
+    if (!this.isRunning() || !this.child?.stdin) {
       return Promise.reject(new Error("Pi RPC process is not running"));
     }
 
@@ -367,7 +396,7 @@ class PiRpcProcess {
   }
 
   async writeRaw(command) {
-    if (!this.child || !this.child.stdin || this.child.exitCode !== null) {
+    if (!this.isRunning() || !this.child?.stdin) {
       throw new Error("Pi RPC process is not running");
     }
 
@@ -415,12 +444,24 @@ function sendError(res, statusCode, error) {
   sendJson(res, statusCode, { ok: false, error: sanitizeError(error) });
 }
 
-async function readJsonBody(req) {
+function formatBytes(bytes) {
+  const value = Number(bytes) || 0;
+  if (value < 1024) return `${value} B`;
+  const units = ["KB", "MB", "GB"];
+  let scaled = value / 1024;
+  for (const unit of units) {
+    if (scaled < 1024 || unit === units[units.length - 1]) return `${scaled.toFixed(scaled >= 10 ? 1 : 2)} ${unit}`;
+    scaled /= 1024;
+  }
+  return `${value} B`;
+}
+
+async function readJsonBody(req, { limitBytes = BODY_LIMIT_BYTES } = {}) {
   const chunks = [];
   let size = 0;
   for await (const chunk of req) {
     size += chunk.length;
-    if (size > BODY_LIMIT_BYTES) throw new Error("Request body too large");
+    if (size > limitBytes) throw makeHttpError(413, `Request body too large (limit ${formatBytes(limitBytes)})`);
     chunks.push(chunk);
   }
   if (chunks.length === 0) return {};
@@ -634,6 +675,49 @@ function runCommand(command, args, { cwd, timeoutMs = 2000, maxOutputLength = 20
   });
 }
 
+function optionalDependencyInstallRoot() {
+  const parts = packageRoot.split(path.sep);
+  const nodeModulesIndex = parts.lastIndexOf("node_modules");
+  if (nodeModulesIndex >= 0) {
+    const root = parts.slice(0, nodeModulesIndex).join(path.sep);
+    return root || path.parse(packageRoot).root;
+  }
+  return packageRoot;
+}
+
+function formatCommandForDisplay(command, args) {
+  return [command, ...args].map((part) => (/\s/.test(part) ? JSON.stringify(part) : part)).join(" ");
+}
+
+async function installOptionalFeaturePackage(featureId) {
+  const packageName = OPTIONAL_FEATURE_PACKAGES.get(featureId);
+  if (!packageName) throw makeHttpError(400, `Unknown optional feature: ${featureId}`);
+
+  const installRoot = optionalDependencyInstallRoot();
+  const npmCommand = process.env.PI_WEBUI_NPM_BIN || "npm";
+  const args = ["install", "--prefix", installRoot, packageName];
+  const result = await runCommand(npmCommand, args, {
+    cwd: installRoot,
+    timeoutMs: 5 * 60 * 1000,
+    maxOutputLength: 80000,
+  });
+  const command = formatCommandForDisplay(npmCommand, args);
+  const ok = result.exitCode === 0 && !result.timedOut && !result.error;
+  if (!ok) {
+    const details = [result.error, result.timedOut ? "timed out" : undefined, result.stderr?.trim(), result.stdout?.trim()].filter(Boolean).join("\n");
+    throw makeHttpError(500, `Optional feature install failed: ${command}${details ? `\n${details}` : ""}`);
+  }
+  return {
+    featureId,
+    packageName,
+    installRoot,
+    command,
+    stdout: result.stdout,
+    stderr: result.stderr,
+    message: `Installed optional feature package ${packageName}. Reload the active Pi tab to load new resources.`,
+  };
+}
+
 function displayPath(cwd) {
   const normalized = cwd.replace(/\\/g, "/");
   const home = (process.env.USERPROFILE || process.env.HOME || "").replace(/\\/g, "/");
@@ -809,9 +893,9 @@ function resolveScopedModelsFromPatterns(patterns, models) {
 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" });
+  const response = await safeRpcResponse(tab, { 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 };
+  return { models: resolveScopedModelsFromPatterns(patterns, response.data?.models || []), patterns, source, rpcRunning: response.rpcRunning !== false };
 }
 
 function pathPickerRoots(activeCwd, viewedCwd) {
@@ -1299,7 +1383,7 @@ async function readBundledThemes() {
 function normalizeStaticPath(urlPath) {
   if (urlPath === "/") return "index.html";
   const name = urlPath.startsWith("/") ? urlPath.slice(1) : urlPath;
-  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;
+  if (!["index.html", "app.js", "styles.css", "favicon.svg", "apple-touch-icon.png", "icon-192.png", "icon-512.png", "catppuccin-mocha-background.png", "matrix-background.webp", "manifest.webmanifest", "service-worker.js"].includes(name)) return undefined;
   return name;
 }
 
@@ -1320,6 +1404,97 @@ async function serveStatic(req, res, url) {
   return true;
 }
 
+function requestBodyLimitForPath(pathname) {
+  if (pathname === "/api/attachments") return UPLOAD_BODY_LIMIT_BYTES;
+  if (["/api/prompt", "/api/steer", "/api/follow-up"].includes(pathname)) return PROMPT_BODY_LIMIT_BYTES;
+  return BODY_LIMIT_BYTES;
+}
+
+function sanitizeUploadFileName(name) {
+  const base = path.basename(String(name || "attachment").replace(/\0/g, ""));
+  const safe = base.replace(/[^A-Za-z0-9._ -]+/g, "_").replace(/\s+/g, " ").trim().slice(0, 180);
+  return safe && safe !== "." && safe !== ".." ? safe : "attachment";
+}
+
+function normalizeMimeType(value) {
+  const mimeType = String(value || "application/octet-stream").split(";", 1)[0].trim().toLowerCase();
+  return mimeType || "application/octet-stream";
+}
+
+function stripDataUrlPrefix(data) {
+  const text = String(data || "").trim();
+  if (!text.toLowerCase().startsWith("data:")) return text;
+  const comma = text.indexOf(",");
+  return comma === -1 ? text : text.slice(comma + 1);
+}
+
+function decodeAttachmentData(data) {
+  const base64 = stripDataUrlPrefix(data).replace(/\s+/g, "");
+  if (!base64) throw new Error("attachment data is required");
+  if (!/^[A-Za-z0-9+/]*={0,2}$/.test(base64)) throw new Error("attachment data must be base64 encoded");
+  return Buffer.from(base64, "base64");
+}
+
+async function saveUploadedAttachments(body) {
+  const rawFiles = Array.isArray(body?.files) ? body.files : [];
+  if (rawFiles.length === 0) throw new Error("files are required");
+  if (rawFiles.length > ATTACHMENT_UPLOAD_MAX_FILES) throw new Error(`attachments are limited to ${ATTACHMENT_UPLOAD_MAX_FILES} files`);
+
+  const decoded = [];
+  let totalBytes = 0;
+  for (const [index, file] of rawFiles.entries()) {
+    const buffer = decodeAttachmentData(file?.data);
+    if (buffer.length === 0) throw new Error(`attachment ${index + 1} is empty`);
+    if (buffer.length > ATTACHMENT_UPLOAD_MAX_FILE_BYTES) throw new Error(`attachment ${index + 1} exceeds ${formatBytes(ATTACHMENT_UPLOAD_MAX_FILE_BYTES)}`);
+    totalBytes += buffer.length;
+    if (totalBytes > ATTACHMENT_UPLOAD_MAX_TOTAL_BYTES) throw new Error(`attachments exceed ${formatBytes(ATTACHMENT_UPLOAD_MAX_TOTAL_BYTES)} total`);
+    decoded.push({
+      id: String(file?.id || `attachment-${index + 1}`).slice(0, 120),
+      name: sanitizeUploadFileName(file?.name),
+      mimeType: normalizeMimeType(file?.mimeType || file?.type),
+      size: buffer.length,
+      buffer,
+    });
+  }
+
+  const uploadDir = path.join(tmpdir(), "pi-webui-uploads", randomUUID());
+  await mkdir(uploadDir, { recursive: true });
+  const saved = [];
+  for (const [index, file] of decoded.entries()) {
+    const fileName = `${String(index + 1).padStart(2, "0")}-${file.name}`;
+    const filePath = path.join(uploadDir, fileName);
+    await writeFile(filePath, file.buffer);
+    saved.push({ id: file.id, name: file.name, mimeType: file.mimeType, size: file.size, path: filePath });
+  }
+  return { files: saved, uploadDir };
+}
+
+function normalizeRpcImages(value) {
+  if (!Array.isArray(value) || value.length === 0) return undefined;
+  if (value.length > ATTACHMENT_UPLOAD_MAX_FILES) throw new Error(`images are limited to ${ATTACHMENT_UPLOAD_MAX_FILES} files`);
+  const images = [];
+  let totalBytes = 0;
+  for (const [index, image] of value.entries()) {
+    const mimeType = normalizeMimeType(image?.mimeType);
+    if (!RPC_IMAGE_MIME_TYPES.has(mimeType)) throw new Error(`image ${index + 1} has unsupported MIME type ${mimeType}`);
+    const data = stripDataUrlPrefix(image?.data).replace(/\s+/g, "");
+    if (!data) throw new Error(`image ${index + 1} data is required`);
+    if (!/^[A-Za-z0-9+/]*={0,2}$/.test(data)) throw new Error(`image ${index + 1} data must be base64 encoded`);
+    const approxBytes = Math.floor((data.length * 3) / 4);
+    if (approxBytes > INLINE_IMAGE_MAX_BYTES) throw new Error(`image ${index + 1} exceeds ${formatBytes(INLINE_IMAGE_MAX_BYTES)} inline limit`);
+    totalBytes += approxBytes;
+    if (totalBytes > INLINE_IMAGE_TOTAL_MAX_BYTES) throw new Error(`inline images exceed ${formatBytes(INLINE_IMAGE_TOTAL_MAX_BYTES)} total`);
+    images.push({ type: "image", data, mimeType });
+  }
+  return images.length ? images : undefined;
+}
+
+function attachImages(command, body) {
+  const images = normalizeRpcImages(body?.images);
+  if (images) command.images = images;
+  return command;
+}
+
 function commandFromPost(pathname, body) {
   switch (pathname) {
     case "/api/prompt": {
@@ -1329,17 +1504,17 @@ function commandFromPost(pathname, body) {
       if (body.streamingBehavior === "steer" || body.streamingBehavior === "followUp") {
         command.streamingBehavior = body.streamingBehavior;
       }
-      return command;
+      return attachImages(command, body);
     }
     case "/api/steer": {
       const message = String(body.message || "").trim();
       if (!message) throw new Error("message is required");
-      return { type: "steer", message };
+      return attachImages({ type: "steer", message }, body);
     }
     case "/api/follow-up": {
       const message = String(body.message || "").trim();
       if (!message) throw new Error("message is required");
-      return { type: "follow_up", message };
+      return attachImages({ type: "follow_up", message }, body);
     }
     case "/api/abort":
       return { type: "abort" };
@@ -1358,6 +1533,18 @@ function commandFromPost(pathname, body) {
       }
       return { type: "set_thinking_level", level };
     }
+    case "/api/steering-mode": {
+      const mode = String(body.mode || "").trim();
+      if (!["all", "one-at-a-time"].includes(mode)) throw new Error("Invalid steering mode");
+      return { type: "set_steering_mode", mode };
+    }
+    case "/api/follow-up-mode": {
+      const mode = String(body.mode || "").trim();
+      if (!["all", "one-at-a-time"].includes(mode)) throw new Error("Invalid follow-up mode");
+      return { type: "set_follow_up_mode", mode };
+    }
+    case "/api/auto-compaction":
+      return { type: "set_auto_compaction", enabled: body.enabled === true };
     case "/api/compact":
       return body.customInstructions ? { type: "compact", customInstructions: String(body.customInstructions) } : { type: "compact" };
     default:
@@ -1449,9 +1636,9 @@ 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);
-
+  // Keep tab naming inside Web UI metadata. Some bundled Pi CLI versions do not
+  // support --name, and passing Web UI-generated tab titles through to child
+  // RPC processes makes every tab after the first exit immediately.
   args.push(...options.piArgs);
   return args;
 }
@@ -1729,6 +1916,18 @@ function defaultTabTitle(tabIndex) {
   return `Terminal ${tabIndex}`;
 }
 
+async function primeTabRpc(tab) {
+  try {
+    const response = await tab.rpc.send({ type: "get_state" }, 1500);
+    if (response.success !== false) {
+      rememberTabState(tab, response.data);
+      reconcileTabActivityFromState(tab, response.data);
+    }
+  } catch (error) {
+    if (!/Timed out waiting for RPC response/i.test(sanitizeError(error))) throw error;
+  }
+}
+
 function attachRpcToTab(tab, rpc) {
   tab.rpcUnsubscribe?.();
   tab.rpc = rpc;
@@ -1777,6 +1976,15 @@ async function createTab({ id: requestedId, index, title, titleSource, conversat
   attachRpcToTab(tab, rpc);
   tabs.set(id, tab);
   rpc.start();
+  try {
+    await primeTabRpc(tab);
+  } catch (error) {
+    if (!tab.rpc.isRunning()) {
+      tab.rpcUnsubscribe?.();
+      tabs.delete(id);
+      throw new Error(`Pi RPC process failed while starting ${tabTitle}: ${sanitizeError(error)}`);
+    }
+  }
   if (sessionFile && !options.noSession) {
     recordEvent({ type: "webui_tab_restored", tabId: tab.id, tabTitle: tab.title, cwd: tab.cwd });
   }
@@ -1799,7 +2007,7 @@ function tabMeta(tab) {
     createdAt: tab.createdAt,
     startedAt: tab.rpc.startedAt,
     pid: tab.rpc.child?.pid,
-    running: !!tab.rpc.child && tab.rpc.child.exitCode === null,
+    running: tab.rpc.isRunning(),
     command: tab.rpc.displayCommand,
     clientCount: tab.sseClients.size,
     pendingExtensionUiRequestCount: pendingExtensionUiRequests(tab).length,
@@ -1968,10 +2176,296 @@ async function restartTabRpc(tab, reason = "reload") {
   return tab;
 }
 
+function rpcUnavailableMessage(tab) {
+  return `Pi RPC process for ${tab?.title || "terminal"} is not running`;
+}
+
+function fallbackRpcResponse(tab, command, error) {
+  const message = sanitizeError(error) || rpcUnavailableMessage(tab);
+  const base = { type: "response", command: command.type, success: true, rpcRunning: false, error: message };
+  switch (command.type) {
+    case "get_state":
+      return {
+        ...base,
+        data: {
+          model: null,
+          thinkingLevel: "off",
+          isStreaming: false,
+          isCompacting: false,
+          steeringMode: "one-at-a-time",
+          followUpMode: "one-at-a-time",
+          sessionFile: tab?.sessionFile,
+          sessionId: tab?.id,
+          sessionName: tab?.title,
+          autoCompactionEnabled: false,
+          messageCount: 0,
+          pendingMessageCount: 0,
+          rpcRunning: false,
+          rpcError: message,
+        },
+      };
+    case "get_messages":
+      return { ...base, data: { messages: [] } };
+    case "get_available_models":
+      return { ...base, data: { models: [] } };
+    case "get_session_stats":
+      return { ...base, data: null };
+    case "get_last_assistant_text":
+      return { ...base, data: { text: "" } };
+    default:
+      return { ...base, success: false, error: message };
+  }
+}
+
+async function safeRpcResponse(tab, command, timeoutMs = REQUEST_TIMEOUT_MS) {
+  try {
+    return await tab.rpc.send(command, timeoutMs);
+  } catch (error) {
+    const message = sanitizeError(error);
+    if (/Pi RPC process is not running/i.test(message)) return fallbackRpcResponse(tab, command, error);
+    throw error;
+  }
+}
+
 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 || [])] };
+  try {
+    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 || [])], rpcRunning: true };
+  } catch (error) {
+    const message = sanitizeError(error);
+    if (!/Pi RPC process is not running/i.test(message)) throw error;
+    return { commands: [...NATIVE_SLASH_COMMANDS], rpcRunning: false, error: message };
+  }
+}
+
+function resolveCliPath(value) {
+  const text = String(value || "").trim();
+  if (!text) return "";
+  return path.isAbsolute(text) ? text : path.resolve(options.cwd, text);
+}
+
+function resolveTabPath(tab, value) {
+  const text = String(value || "").trim();
+  if (!text) return "";
+  return path.isAbsolute(text) ? text : path.resolve(tab?.cwd || options.cwd, text);
+}
+
+function configuredSessionDir() {
+  for (let index = 0; index < options.piArgs.length; index++) {
+    const arg = options.piArgs[index];
+    if (arg === "--session-dir" && options.piArgs[index + 1]) return resolveCliPath(options.piArgs[index + 1]);
+    if (arg.startsWith("--session-dir=")) return resolveCliPath(arg.slice("--session-dir=".length));
+  }
+  return undefined;
+}
+
+function requirePersistentSessions() {
+  if (options.noSession) throw makeHttpError(400, "Session selectors are unavailable when Web UI was started with --no-session.");
+}
+
+function isoDate(value) {
+  const date = value instanceof Date ? value : new Date(value || 0);
+  return Number.isNaN(date.getTime()) ? undefined : date.toISOString();
+}
+
+function normalizeSessionInfo(info, currentSessionFile) {
+  const sessionPath = String(info.path || "");
+  return {
+    path: sessionPath,
+    id: String(info.id || ""),
+    name: info.name || undefined,
+    cwd: String(info.cwd || ""),
+    created: isoDate(info.created),
+    modified: isoDate(info.modified),
+    messageCount: Number.isFinite(info.messageCount) ? info.messageCount : 0,
+    firstMessage: truncateStatusText(info.firstMessage || "(no messages)", 220),
+    parentSessionPath: info.parentSessionPath || undefined,
+    current: !!currentSessionFile && path.resolve(sessionPath) === path.resolve(currentSessionFile),
+  };
+}
+
+async function currentSessionState(tab) {
+  const response = await safeRpcResponse(tab, { type: "get_state" }, STATUS_RPC_TIMEOUT_MS);
+  if (response.success === false) throw makeHttpError(400, response.error || "failed to load current session state");
+  rememberTabState(tab, response.data);
+  return response.data || {};
+}
+
+async function getSessionSelectorData(tab, scope = "current") {
+  requirePersistentSessions();
+  const state = await currentSessionState(tab).catch(() => tab.lastState || {});
+  const sessionDir = configuredSessionDir();
+  const listAll = String(scope || "current").toLowerCase() === "all";
+  const sessions = listAll ? await SessionManager.listAll(sessionDir) : await SessionManager.list(tab.cwd, sessionDir);
+  return {
+    scope: listAll ? "all" : "current",
+    sessionDir: sessionDir || undefined,
+    currentSessionFile: state.sessionFile || tabRestorableSessionFile(tab),
+    sessions: sessions.slice(0, SESSION_SELECTOR_LIMIT).map((info) => normalizeSessionInfo(info, state.sessionFile || tabRestorableSessionFile(tab))),
+    limited: sessions.length > SESSION_SELECTOR_LIMIT,
+  };
+}
+
+function extractSessionTextContent(content) {
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return "";
+  return content
+    .map((part) => {
+      if (typeof part === "string") return part;
+      if (part?.type === "text" && typeof part.text === "string") return part.text;
+      if (part?.type === "toolCall") return `[tool call: ${part.toolName || "tool"}]`;
+      if (part?.type === "thinking") return "[thinking]";
+      if (part?.type === "image") return "[image]";
+      return "";
+    })
+    .filter(Boolean)
+    .join(" ");
+}
+
+function sessionTreeEntryLabel(entry) {
+  if (!entry || typeof entry !== "object") return "entry";
+  if (entry.type === "message") return entry.message?.role || "message";
+  if (entry.type === "branch_summary") return "branch summary";
+  if (entry.type === "compaction") return "compaction";
+  if (entry.type === "model_change") return "model";
+  if (entry.type === "thinking_level_change") return "thinking";
+  if (entry.type === "custom_message") return entry.customType || "custom";
+  return entry.type || "entry";
+}
+
+function sessionTreeEntryText(entry) {
+  if (!entry || typeof entry !== "object") return "";
+  if (entry.type === "message") return extractSessionTextContent(entry.message?.content);
+  if (entry.type === "custom_message") return extractSessionTextContent(entry.content);
+  if (entry.type === "branch_summary") return entry.summary || "branch summary";
+  if (entry.type === "compaction") return entry.summary || "compaction summary";
+  if (entry.type === "model_change") return [entry.provider, entry.modelId].filter(Boolean).join("/");
+  if (entry.type === "thinking_level_change") return entry.thinkingLevel || "";
+  return "";
+}
+
+function flattenSessionTree(nodes, { depth = 0, leafId, result = [] } = {}) {
+  for (const node of nodes || []) {
+    const entry = node.entry || {};
+    result.push({
+      id: entry.id,
+      parentId: entry.parentId ?? null,
+      depth,
+      type: entry.type || "entry",
+      role: entry.message?.role || undefined,
+      label: node.label || undefined,
+      timestamp: entry.timestamp || undefined,
+      title: sessionTreeEntryLabel(entry),
+      text: truncateStatusText(sessionTreeEntryText(entry), TREE_SELECTOR_TEXT_LIMIT),
+      childCount: Array.isArray(node.children) ? node.children.length : 0,
+      currentLeaf: !!leafId && entry.id === leafId,
+    });
+    flattenSessionTree(node.children || [], { depth: depth + 1, leafId, result });
+  }
+  return result;
+}
+
+async function getSessionTreeData(tab) {
+  requirePersistentSessions();
+  const state = await currentSessionState(tab).catch(() => tab.lastState || {});
+  const sessionFile = state.sessionFile || tabRestorableSessionFile(tab);
+  if (!sessionFile) throw makeHttpError(400, "No persisted session file is available for /tree.");
+  const manager = SessionManager.open(sessionFile, configuredSessionDir(), tab.cwd);
+  const leafId = manager.getLeafId();
+  return {
+    sessionFile: manager.getSessionFile(),
+    sessionId: manager.getSessionId(),
+    cwd: manager.getCwd(),
+    leafId,
+    nodes: flattenSessionTree(manager.getTree(), { leafId }),
+  };
+}
+
+async function getForkMessagesData(tab) {
+  const response = await safeRpcResponse(tab, { type: "get_fork_messages" });
+  if (response.success === false) throw makeHttpError(400, response.error || "failed to load fork points");
+  return { messages: Array.isArray(response.data?.messages) ? response.data.messages : [] };
+}
+
+async function requireIdleForSessionAction(tab, actionLabel) {
+  const state = await currentSessionState(tab);
+  if (state.isStreaming || state.isCompacting) throw makeHttpError(409, `Wait for the current agent run or compaction to finish before ${actionLabel}.`);
+}
+
+async function runForkCommand(tab, entryId) {
+  await requireIdleForSessionAction(tab, "forking the session");
+  const targetEntryId = String(entryId || "").trim();
+  if (!targetEntryId) throw makeHttpError(400, "entryId is required");
+  const response = await tab.rpc.send({ type: "fork", entryId: targetEntryId });
+  if (response.success === false) return response;
+  const state = await safeRpcData(tab, { type: "get_state" }, STATUS_RPC_TIMEOUT_MS);
+  if (state.ok) rememberTabState(tab, state.data);
+  return rpcSuccess("fork", {
+    message: response.data?.cancelled ? "Fork cancelled." : "Forked the current session.",
+    text: response.data?.text || "",
+    result: response.data,
+    tab: tabMeta(tab),
+  });
+}
+
+async function runCloneCommand(tab) {
+  await requireIdleForSessionAction(tab, "cloning the session");
+  const response = await tab.rpc.send({ type: "clone" });
+  if (response.success === false) return response;
+  const state = await safeRpcData(tab, { type: "get_state" }, STATUS_RPC_TIMEOUT_MS);
+  if (state.ok) rememberTabState(tab, state.data);
+  return rpcSuccess("clone", {
+    message: response.data?.cancelled ? "Clone cancelled." : "Cloned the current session.",
+    result: response.data,
+    tab: tabMeta(tab),
+  });
+}
+
+async function switchTabSession(tab, sessionPath) {
+  requirePersistentSessions();
+  await requireIdleForSessionAction(tab, "switching sessions");
+  const targetPath = resolveTabPath(tab, sessionPath);
+  if (!targetPath) throw makeHttpError(400, "sessionPath is required");
+  if (!targetPath.endsWith(".jsonl")) throw makeHttpError(400, "sessionPath must point to a .jsonl session file");
+  const targetStats = await stat(targetPath).catch(() => null);
+  if (!targetStats?.isFile()) throw makeHttpError(404, `Session file not found: ${targetPath}`);
+  const manager = SessionManager.open(targetPath, configuredSessionDir());
+  const response = await tab.rpc.send({ type: "switch_session", sessionPath: manager.getSessionFile() });
+  if (response.success === false) return response;
+  if (!response.data?.cancelled) {
+    tab.cwd = manager.getCwd();
+    const state = await safeRpcData(tab, { type: "get_state" }, STATUS_RPC_TIMEOUT_MS);
+    if (state.ok) rememberTabState(tab, state.data);
+  }
+  return rpcSuccess("switch_session", {
+    message: response.data?.cancelled ? "Resume cancelled." : "Resumed selected session.",
+    result: response.data,
+    tab: tabMeta(tab),
+  });
+}
+
+async function navigateSessionTree(tab, body) {
+  requirePersistentSessions();
+  await requireIdleForSessionAction(tab, "navigating the session tree");
+  const entryId = String(body.entryId || body.targetId || "").trim();
+  if (!entryId) throw makeHttpError(400, "entryId is required");
+  const payload = {
+    entryId,
+    summarize: body.summarize === true,
+    customInstructions: typeof body.customInstructions === "string" ? body.customInstructions : undefined,
+    replaceInstructions: body.replaceInstructions === true,
+    label: typeof body.label === "string" ? body.label : undefined,
+  };
+  const response = await tab.rpc.send({ type: "prompt", message: `/webui-tree-navigate ${JSON.stringify(payload)}` });
+  if (response.success === false) return response;
+  const state = await safeRpcData(tab, { type: "get_state" }, STATUS_RPC_TIMEOUT_MS);
+  if (state.ok) rememberTabState(tab, state.data);
+  return rpcSuccess("tree", {
+    message: "Navigated the session tree.",
+    result: response.data,
+    tab: tabMeta(tab),
+  });
 }
 
 function formatSessionOutput(tab, state, stats) {
@@ -2047,8 +2541,8 @@ async function handleNativeSlashCommand(tab, body) {
       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 });
+      const response = await runCloneCommand(tab);
+      return response.success === false ? response : rpcSuccess("native_slash_command", { command: "clone", message: response.data?.message || "Cloned the current session.", result: response.data?.result });
     }
     default:
       throw makeHttpError(400, `/${parsed.name} is a native Pi TUI command, but this Web UI cannot run that interactive command yet.`);
@@ -2080,6 +2574,23 @@ async function closeTab(id) {
   return tab;
 }
 
+async function closeTabs(ids) {
+  const uniqueIds = [...new Set((Array.isArray(ids) ? ids : []).map((id) => String(id || "").trim()).filter(Boolean))];
+  const targetTabs = uniqueIds.map((id) => tabs.get(id)).filter(Boolean);
+  if (!targetTabs.length) return [];
+
+  if (targetTabs.length >= tabs.size) {
+    await createTab({ cwd: targetTabs[0]?.cwd || options.cwd });
+  }
+
+  const closed = [];
+  for (const tab of targetTabs) {
+    if (!tabs.has(tab.id)) continue;
+    closed.push(await closeTab(tab.id));
+  }
+  return closed;
+}
+
 function requestedTabId(req, url, body) {
   const header = req.headers["x-pi-webui-tab"];
   const headerValue = Array.isArray(header) ? header[0] : header;
@@ -2332,13 +2843,13 @@ async function webuiStatus({ detailed = false, eventLimit = 40 } = {}) {
     piPid: tab?.rpc.child?.pid,
     piRunning: !!tab?.rpc.child && tab.rpc.child.exitCode === null,
     tabs: statusTabs,
-    restorableTabs: mergeRestorableTabDescriptors(statusTabs, closedRestorableTabs),
+    restorableTabs: mergeRestorableTabDescriptors(statusTabs),
   };
 
   if (detailed) {
     const detailedTabs = await Promise.all([...tabs.values()].map((item) => tabStatusDetails(item)));
     data.tabs = detailedTabs;
-    data.restorableTabs = mergeRestorableTabDescriptors(detailedTabs, closedRestorableTabs);
+    data.restorableTabs = mergeRestorableTabDescriptors(detailedTabs);
     data.closedTabs = closedRestorableTabs.slice();
     data.events = latestEvents(eventLimit);
   }
@@ -2362,6 +2873,13 @@ const server = createServer(async (req, res) => {
       return;
     }
 
+    if (url.pathname === "/api/tabs/close" && req.method === "POST") {
+      const body = await readJsonBody(req);
+      const closed = await closeTabs(body.ids || body.tabIds || []);
+      sendJson(res, 200, { ok: true, data: { closedIds: closed.map((tab) => tab.id), tabs: listTabs(), activeTabId: firstTab()?.id || null } });
+      return;
+    }
+
     if (url.pathname.startsWith("/api/tabs/") && req.method === "PATCH") {
       const id = decodeURIComponent(url.pathname.slice("/api/tabs/".length));
       const body = await readJsonBody(req);
@@ -2505,12 +3023,76 @@ const server = createServer(async (req, res) => {
       return;
     }
 
+    if (url.pathname === "/api/attachments" && req.method === "POST") {
+      const body = await readJsonBody(req, { limitBytes: requestBodyLimitForPath(url.pathname) });
+      sendJson(res, 201, { ok: true, data: await saveUploadedAttachments(body) });
+      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/fork-messages" && req.method === "GET") {
+      const tab = getRequestedTab(req, url);
+      sendJson(res, 200, { ok: true, data: await getForkMessagesData(tab) });
+      return;
+    }
+
+    if (url.pathname === "/api/sessions" && req.method === "GET") {
+      const tab = getRequestedTab(req, url);
+      sendJson(res, 200, { ok: true, data: await getSessionSelectorData(tab, url.searchParams.get("scope") || "current") });
+      return;
+    }
+
+    if (url.pathname === "/api/session-tree" && req.method === "GET") {
+      const tab = getRequestedTab(req, url);
+      sendJson(res, 200, { ok: true, data: await getSessionTreeData(tab) });
+      return;
+    }
+
+    if (url.pathname === "/api/fork" && req.method === "POST") {
+      const body = await readJsonBody(req);
+      const tab = getRequestedTab(req, url, body);
+      const response = await runForkCommand(tab, body.entryId);
+      sendJson(res, response.success === false ? 400 : 200, responseWithTab(response, tab));
+      return;
+    }
+
+    if (url.pathname === "/api/clone" && req.method === "POST") {
+      const body = await readJsonBody(req);
+      const tab = getRequestedTab(req, url, body);
+      const response = await runCloneCommand(tab);
+      sendJson(res, response.success === false ? 400 : 200, responseWithTab(response, tab));
+      return;
+    }
+
+    if (url.pathname === "/api/switch-session" && req.method === "POST") {
+      const body = await readJsonBody(req);
+      const tab = getRequestedTab(req, url, body);
+      const response = await switchTabSession(tab, body.sessionPath || body.path);
+      sendJson(res, response.success === false ? 400 : 200, responseWithTab(response, tab));
+      return;
+    }
+
+    if (url.pathname === "/api/tree-navigate" && req.method === "POST") {
+      const body = await readJsonBody(req);
+      const tab = getRequestedTab(req, url, body);
+      const response = await navigateSessionTree(tab, body);
+      sendJson(res, response.success === false ? 400 : 200, responseWithTab(response, tab));
+      return;
+    }
+
+    if (url.pathname === "/api/optional-feature-install" && req.method === "POST") {
+      if (!isLocalAddress(req.socket.remoteAddress)) throw makeHttpError(403, "Installing optional Web UI features is only allowed from localhost");
+      const body = await readJsonBody(req);
+      const data = await installOptionalFeaturePackage(String(body.featureId || ""));
+      sendJson(res, 200, { ok: true, data });
+      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) });
@@ -2526,7 +3108,7 @@ const server = createServer(async (req, res) => {
     }
 
     if (url.pathname === "/api/prompt" && req.method === "POST") {
-      const body = await readJsonBody(req);
+      const body = await readJsonBody(req, { limitBytes: requestBodyLimitForPath(url.pathname) });
       const tab = getRequestedTab(req, url, body);
       const nativeResponse = await handleNativeSlashCommand(tab, body);
       if (nativeResponse) {
@@ -2558,7 +3140,7 @@ const server = createServer(async (req, res) => {
     const getCommand = req.method === "GET" ? commandFromGet(url.pathname) : undefined;
     if (getCommand) {
       const tab = getRequestedTab(req, url);
-      const response = await tab.rpc.send(getCommand);
+      const response = await safeRpcResponse(tab, getCommand);
       sendJson(res, response.success === false ? 400 : 200, response);
       return;
     }
@@ -2586,7 +3168,7 @@ const server = createServer(async (req, res) => {
     }
 
     if (req.method === "POST") {
-      const body = await readJsonBody(req);
+      const body = await readJsonBody(req, { limitBytes: requestBodyLimitForPath(url.pathname) });
       const command = commandFromPost(url.pathname, body);
       if (command) {
         const tab = getRequestedTab(req, url, body);