@firstpick/pi-package-webui 0.3.4 → 0.3.6

package/README.md

@@ -125,11 +125,12 @@ Environment variables:
 - Streaming chat transcript with Markdown, thinking output, tool/bash cards, queue and compaction events, and abort controls.
 - Prompt composer with uploads, drag/drop/paste, inline image support, slash-command autocomplete, and `@` file/path references with live suggestions.
 - Browser dialogs for common Pi selectors such as `/model`, `/settings`, `/theme`, `/fork`, `/clone`, `/resume`, `/tree`, `/scoped-models`, `/tools`, and `/skills`.
-- Model, thinking, session, workspace, theme, optional-feature, Codex usage, network, event, and notification controls in the side panel.
+- Model, thinking, session, workspace, theme, optional-feature, Codex usage, network, update/restart, event, and notification controls in the side panel.
 - Side-panel theme picker backed by optional `@firstpick/pi-themes-bundle` themes when loaded.
 - Per-tab cwd changes, a clickable footer cwd picker, saved path fast picks, server-persisted fast picks, and restart-safe restoration of open tabs.
 - Detected app runner dropdown for the active tab cwd, including Cargo, Bun, npm/npx/pnpm, Python/uv, Go/Golang, Zig, C/C++, Docker Compose, root/dev/scripts shell scripts, and other common project runners with live output pinned at the top of the terminal. Projects can add browseable custom runners in `.pi-webui-runners.json` with a command (default `./`) plus a relative path to the file to run.
 - Browser support for Pi extension UI prompts, widgets, status updates, browser notifications when a tab needs an extension UI response and an optional side-panel toggle for agent-done notifications.
+- Localhost-only Pi update checks with a top-right update notification and a confirmed **Update & restart** action that runs `pi update`, then restarts the Web UI server.
 - Feedback reactions (`👍`, `👎`, `?`) on final assistant output plus tool/bash action cards, which can ask Pi to create or update a LEARNING.
 - Mobile-friendly layout and PWA install support where the browser allows it.
 
@@ -138,6 +139,7 @@ Useful browser endpoints exposed by the local server include:
 - `GET /api/path-suggestions?tab=<tabId>&query=<path>` for `@` file/path references with live suggestions.
 - `POST /api/action-feedback?tab=<tabId>` for feedback on final assistant output and action cards.
 - `POST /api/optional-feature-install` for installing known optional companion packages from the side panel.
+- `GET /api/update-status` and localhost-only `POST /api/update` for checking Pi/Web UI updates and running `pi update` followed by a Web UI server restart.
 
 For local development, run the checkout helper directly, for example:
 
@@ -191,6 +193,7 @@ This requires `/git-staged-msg` and `/pr` from `@firstpick/pi-prompts-git-pr`; b
 - The side-panel **Open to network** button rebinds the server to `0.0.0.0`, shows LAN URLs when available, and toggles to "Close for network".
 - `--host 0.0.0.0` also exposes the Web UI to the local network.
 - Any connected browser client can control Pi and run Web UI bash actions as the Web UI process user.
+- The Web UI update endpoint is restricted to localhost, because it runs `pi update` and restarts the server.
 - Treat Pi Web UI as a local companion, not a hardened multi-user web service.
 
 ## Troubleshooting

package/bin/pi-webui.mjs

@@ -19,6 +19,13 @@ const webuiHelperExtensionPath = path.join(packageRoot, "webui-rpc-helper.mjs");
 const agentDir = process.env.PI_CODING_AGENT_DIR || path.join(homedir(), ".pi", "agent");
 const OPTIONAL_FEATURE_INSTALL_ROOT_ENV = "PI_WEBUI_OPTIONAL_FEATURE_INSTALL_ROOT";
 const packageJson = JSON.parse(await readFile(path.join(packageRoot, "package.json"), "utf8"));
+let piPackageJson = {};
+try {
+  const piPackageJsonPath = require.resolve("@earendil-works/pi-coding-agent/package.json", { paths: [packageRoot] });
+  piPackageJson = JSON.parse(await readFile(piPackageJsonPath, "utf8"));
+} catch {
+  piPackageJson = {};
+}
 const nativeParityMatrix = JSON.parse(await readFile(path.join(packageRoot, "WEBUI_TUI_NATIVE_PARITY.json"), "utf8"));
 const webuiDevServer = isTruthyEnv(process.env.PI_WEBUI_DEV) || isSourceCheckout(packageRoot);
 
@@ -28,11 +35,20 @@ const REQUEST_TIMEOUT_MS = 5 * 60 * 1000;
 const WEBUI_HELPER_TIMEOUT_MS = 8 * 1000;
 const WEBUI_HELPER_COMMAND = "webui-helper";
 const WEBUI_HELPER_RESPONSE_PREFIX = "__PI_WEBUI_HELPER_RESPONSE__:";
+const PI_CODING_AGENT_PACKAGE = "@earendil-works/pi-coding-agent";
+const WEBUI_PACKAGE = packageJson.name || "@firstpick/pi-package-webui";
+const PI_LATEST_VERSION_URL = process.env.PI_WEBUI_PI_LATEST_VERSION_URL || "https://pi.dev/api/latest-version";
+const NPM_REGISTRY_URL = (process.env.PI_WEBUI_NPM_REGISTRY_URL || "https://registry.npmjs.org").replace(/\/+$/, "");
+const UPDATE_STATUS_CACHE_MS = 10 * 60 * 1000;
+const UPDATE_STATUS_TIMEOUT_MS = 10 * 1000;
+const PI_UPDATE_TIMEOUT_MS = 15 * 60 * 1000;
+const PI_UPDATE_OUTPUT_MAX_CHARS = 120_000;
 const CODEX_USAGE_TIMEOUT_MS = 15 * 1000;
 const CODEX_TOKEN_REFRESH_SKEW_MS = 5 * 60 * 1000;
 const OPENAI_CODEX_PROVIDER_ID = "openai-codex";
 const OPENAI_CODEX_USAGE_ENDPOINT = process.env.PI_WEBUI_CODEX_USAGE_URL || "https://chatgpt.com/backend-api/wham/usage";
 const BODY_LIMIT_BYTES = 1024 * 1024;
+const SKILL_FILE_BODY_LIMIT_BYTES = 2 * 1024 * 1024;
 const PROMPT_BODY_LIMIT_BYTES = 24 * 1024 * 1024;
 const UPLOAD_BODY_LIMIT_BYTES = 96 * 1024 * 1024;
 const ATTACHMENT_UPLOAD_MAX_FILES = 12;
@@ -362,6 +378,51 @@ function delay(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
+function truncateLongText(value, maxLength = 8000) {
+  const text = String(value || "");
+  if (text.length <= maxLength) return text;
+  return `${text.slice(0, Math.max(0, maxLength - 1))}…`;
+}
+
+function parsePackageVersion(version) {
+  const match = String(version || "").trim().match(/^v?(\d+)\.(\d+)\.(\d+)(?:-([0-9A-Za-z.-]+))?(?:\+.*)?$/);
+  if (!match) return undefined;
+  return {
+    major: Number.parseInt(match[1], 10),
+    minor: Number.parseInt(match[2], 10),
+    patch: Number.parseInt(match[3], 10),
+    prerelease: match[4],
+  };
+}
+
+function comparePackageVersions(leftVersion, rightVersion) {
+  const left = parsePackageVersion(leftVersion);
+  const right = parsePackageVersion(rightVersion);
+  if (!left || !right) return undefined;
+  if (left.major !== right.major) return left.major - right.major;
+  if (left.minor !== right.minor) return left.minor - right.minor;
+  if (left.patch !== right.patch) return left.patch - right.patch;
+  if (left.prerelease === right.prerelease) return 0;
+  if (!left.prerelease) return 1;
+  if (!right.prerelease) return -1;
+  return left.prerelease.localeCompare(right.prerelease);
+}
+
+function isNewerPackageVersion(candidateVersion, currentVersion) {
+  const comparison = comparePackageVersions(candidateVersion, currentVersion);
+  if (comparison !== undefined) return comparison > 0;
+  return String(candidateVersion || "").trim() !== String(currentVersion || "").trim();
+}
+
+async function fetchJsonWithTimeout(url, { timeoutMs = UPDATE_STATUS_TIMEOUT_MS, headers = {} } = {}) {
+  const response = await fetch(url, {
+    headers,
+    signal: AbortSignal.timeout(timeoutMs),
+  });
+  if (!response.ok) throw new Error(`${response.status}${response.statusText ? ` ${response.statusText}` : ""}`);
+  return response.json();
+}
+
 class PiRpcProcess {
   constructor({ command, args, displayCommand, cwd }) {
     this.command = command;
@@ -3911,6 +3972,173 @@ function spawnRestartServer(restorableTabs) {
   return child;
 }
 
+let updateStatusCache = null;
+let updateStatusCacheAt = 0;
+let piUpdateInProgress = false;
+
+function updateChecksSkippedReason() {
+  if (process.env.PI_OFFLINE) return "PI_OFFLINE is set";
+  if (process.env.PI_SKIP_VERSION_CHECK) return "PI_SKIP_VERSION_CHECK is set";
+  return "";
+}
+
+function basePackageUpdateStatus(packageName, currentVersion) {
+  return {
+    packageName,
+    currentVersion: String(currentVersion || ""),
+    latestVersion: null,
+    updateAvailable: false,
+    checked: false,
+    skipped: false,
+    skippedReason: "",
+    error: "",
+  };
+}
+
+async function checkLatestPiReleaseStatus() {
+  const status = basePackageUpdateStatus(PI_CODING_AGENT_PACKAGE, piPackageJson.version);
+  const skippedReason = updateChecksSkippedReason();
+  if (skippedReason) {
+    status.skipped = true;
+    status.skippedReason = skippedReason;
+    return status;
+  }
+  try {
+    const data = await fetchJsonWithTimeout(PI_LATEST_VERSION_URL, {
+      headers: {
+        "User-Agent": `pi-webui/${packageJson.version} pi/${piPackageJson.version || "unknown"}`,
+        accept: "application/json",
+      },
+    });
+    const latestVersion = typeof data.version === "string" ? data.version.trim() : "";
+    if (!latestVersion) throw new Error("latest-version response did not include a version");
+    status.latestVersion = latestVersion;
+    status.packageName = typeof data.packageName === "string" && data.packageName.trim() ? data.packageName.trim() : PI_CODING_AGENT_PACKAGE;
+    status.note = typeof data.note === "string" && data.note.trim() ? data.note.trim() : "";
+    status.updateAvailable = status.currentVersion ? isNewerPackageVersion(latestVersion, status.currentVersion) : false;
+    status.checked = true;
+  } catch (error) {
+    status.error = sanitizeError(error);
+  }
+  return status;
+}
+
+function npmLatestPackageUrl(packageName) {
+  return `${NPM_REGISTRY_URL}/${encodeURIComponent(packageName)}/latest`;
+}
+
+async function checkLatestNpmPackageStatus(packageName, currentVersion) {
+  const status = basePackageUpdateStatus(packageName, currentVersion);
+  const skippedReason = updateChecksSkippedReason();
+  if (skippedReason) {
+    status.skipped = true;
+    status.skippedReason = skippedReason;
+    return status;
+  }
+  try {
+    const data = await fetchJsonWithTimeout(npmLatestPackageUrl(packageName), {
+      headers: {
+        "User-Agent": `pi-webui/${packageJson.version}`,
+        accept: "application/json",
+      },
+    });
+    const latestVersion = typeof data.version === "string" ? data.version.trim() : "";
+    if (!latestVersion) throw new Error(`${packageName} latest metadata did not include a version`);
+    status.latestVersion = latestVersion;
+    status.updateAvailable = status.currentVersion ? isNewerPackageVersion(latestVersion, status.currentVersion) : false;
+    status.checked = true;
+  } catch (error) {
+    status.error = sanitizeError(error);
+  }
+  return status;
+}
+
+function updateStatusForRequest(status, req) {
+  return {
+    ...status,
+    canRunUpdate: isLocalAddress(req?.socket?.remoteAddress),
+    updateInProgress: piUpdateInProgress,
+  };
+}
+
+async function getUpdateStatus({ force = false } = {}) {
+  const now = Date.now();
+  if (!force && updateStatusCache && now - updateStatusCacheAt < UPDATE_STATUS_CACHE_MS) return updateStatusCache;
+  const [piStatus, webuiStatus] = await Promise.all([
+    checkLatestPiReleaseStatus(),
+    checkLatestNpmPackageStatus(WEBUI_PACKAGE, packageJson.version),
+  ]);
+  const updateAvailable = !!(piStatus.updateAvailable || webuiStatus.updateAvailable);
+  updateStatusCache = {
+    checkedAt: new Date(now).toISOString(),
+    updateAvailable,
+    restartRequired: true,
+    command: "pi update",
+    webuiDev: webuiDevServer,
+    pi: piStatus,
+    webui: webuiStatus,
+    packages: {
+      checked: false,
+      note: "pi update will also update configured unpinned Pi packages.",
+    },
+  };
+  updateStatusCacheAt = now;
+  return updateStatusCache;
+}
+
+async function resolvePiUpdateCommand() {
+  if (options.piBinExplicit) {
+    return { command: options.piBin, args: ["update"], displayCommand: formatCommandForDisplay(options.piBin, ["update"]) };
+  }
+
+  const pathPi = await runCommand(options.piBin, ["--version"], { timeoutMs: 3000, maxOutputLength: 4000 });
+  if (pathPi.exitCode === 0 && !pathPi.timedOut && !pathPi.error) {
+    return { command: options.piBin, args: ["update"], displayCommand: formatCommandForDisplay(options.piBin, ["update"]) };
+  }
+
+  return resolvePiCommand(["update"]);
+}
+
+async function runPiUpdateAndPrepareRestart() {
+  if (piUpdateInProgress) throw makeHttpError(409, "A Pi update is already running.");
+  piUpdateInProgress = true;
+  let restartPrepared = false;
+  try {
+    const restorableTabs = await restorableTabsForRestart();
+    const piCommand = await resolvePiUpdateCommand();
+    const command = piCommand.displayCommand || formatCommandForDisplay(piCommand.command, piCommand.args || []);
+    recordEvent({ type: "webui_update_started", command, restorableTabCount: restorableTabs.length });
+    const result = await runCommand(piCommand.command, piCommand.args || [], {
+      cwd: process.cwd(),
+      timeoutMs: PI_UPDATE_TIMEOUT_MS,
+      maxOutputLength: PI_UPDATE_OUTPUT_MAX_CHARS,
+    });
+    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");
+      recordEvent({ type: "webui_update_failed", command, error: truncateStatusText(details || `exit code ${result.exitCode ?? "unknown"}`) });
+      throw makeHttpError(500, truncateLongText(`Pi update failed: ${command}${details ? `\n${details}` : ""}`));
+    }
+
+    updateStatusCache = null;
+    updateStatusCacheAt = 0;
+    const child = spawnRestartServer(restorableTabs);
+    restartPrepared = true;
+    recordEvent({ type: "webui_update_restarting", command, nextWebuiPid: child.pid, restorableTabCount: restorableTabs.length });
+    return {
+      message: "Pi update completed. Pi Web UI is restarting.",
+      command,
+      stdout: result.stdout,
+      stderr: result.stderr,
+      webuiPid: process.pid,
+      nextWebuiPid: child.pid,
+      restorableTabCount: restorableTabs.length,
+    };
+  } finally {
+    if (!restartPrepared) piUpdateInProgress = false;
+  }
+}
+
 function rememberClosedRestorableTab(tab, state = null) {
   const descriptor = restorableTabDescriptor(tab, state);
   if (!descriptor) return;
@@ -4242,6 +4470,109 @@ async function getMergedSkillConfigData(tab) {
   return { skills: mergeRuntimeAndResolvedSkills(runtime.skills || [], resolved.skills || []) };
 }
 
+function normalizeSkillRequestName(value) {
+  return String(value || "").trim().replace(/^skill:/i, "").toLowerCase();
+}
+
+function skillFileRequestParts(source = {}) {
+  return {
+    name: normalizeSkillRequestName(source.name || source.skillName),
+    filePath: String(source.path || source.filePath || "").trim(),
+  };
+}
+
+function sameResolvedPath(left, right) {
+  if (!left || !right) return false;
+  return path.resolve(left) === path.resolve(right);
+}
+
+function skillFilePathInside(root, target) {
+  if (!root || !target) return false;
+  const relative = path.relative(path.resolve(root), path.resolve(target));
+  return !relative || (!relative.startsWith("..") && !path.isAbsolute(relative));
+}
+
+function skillNameFromSkillFilePath(filePath) {
+  const normalized = String(filePath || "").replace(/\\/g, "/");
+  const match = normalized.match(/\/skills\/([^/]+)\/SKILL\.md$/i);
+  return normalizeSkillRequestName(match?.[1] || "");
+}
+
+async function resolveExplicitSkillFilePath(tab, filePath, requestedName = "") {
+  const resolvedPath = path.resolve(filePath || "");
+  const pathSkillName = skillNameFromSkillFilePath(resolvedPath);
+  if (!pathSkillName) throw makeHttpError(400, "Skill path must point to /skills/<name>/SKILL.md");
+  if (requestedName && requestedName !== pathSkillName) throw makeHttpError(400, "Skill name does not match the requested SKILL.md path");
+  const allowedRoots = [agentDir, path.join(tab?.cwd || options.cwd, ".pi")];
+  if (!allowedRoots.some((root) => skillFilePathInside(root, resolvedPath))) {
+    throw makeHttpError(403, "Skill path is outside allowed Pi skill locations");
+  }
+  const info = await stat(resolvedPath).catch(() => null);
+  if (!info?.isFile()) throw makeHttpError(404, `Skill file not found: ${resolvedPath}`);
+  return {
+    name: pathSkillName,
+    description: "",
+    filePath: resolvedPath,
+    enabled: true,
+    fileStats: info,
+  };
+}
+
+async function resolveEditableSkillFile(tab, request = {}) {
+  const { name, filePath } = skillFileRequestParts(request);
+  if (!name && !filePath) throw makeHttpError(400, "Skill name or path is required");
+  const { skills } = await resolveSkillResources(tab);
+  const skill = skills.find((item) => (
+    filePath ? sameResolvedPath(item.filePath, filePath) : name && normalizeSkillRequestName(item.name) === name
+  ));
+  if (skill?.filePath) {
+    if (path.basename(skill.filePath) !== "SKILL.md") throw makeHttpError(400, "Only SKILL.md files can be edited from skill tags");
+    const info = await stat(skill.filePath).catch(() => null);
+    if (!info?.isFile()) throw makeHttpError(404, `Skill file not found: ${skill.filePath}`);
+    return { ...skill, filePath: path.resolve(skill.filePath), fileStats: info };
+  }
+  if (filePath) return resolveExplicitSkillFilePath(tab, filePath, name);
+  throw makeHttpError(404, "Skill is not configured in this Pi tab");
+}
+
+async function getSkillFileData(tab, request = {}) {
+  const skill = await resolveEditableSkillFile(tab, request);
+  const content = await readFile(skill.filePath, "utf8");
+  return {
+    name: parseSkillFrontmatter(content, skill.filePath).name || skill.name,
+    description: skill.description || "",
+    path: skill.filePath,
+    content,
+    mtimeMs: skill.fileStats.mtimeMs,
+    size: skill.fileStats.size,
+    enabled: skill.enabled === true,
+  };
+}
+
+async function saveSkillFileData(tab, body = {}) {
+  if (typeof body.content !== "string") throw makeHttpError(400, "Skill content must be a string");
+  if (body.content.includes("\0")) throw makeHttpError(400, "Skill content cannot contain null bytes");
+  if (Buffer.byteLength(body.content, "utf8") > SKILL_FILE_BODY_LIMIT_BYTES) throw makeHttpError(413, `Skill file is too large (limit ${formatBytes(SKILL_FILE_BODY_LIMIT_BYTES)})`);
+  const skill = await resolveEditableSkillFile(tab, body);
+  const expectedMtimeMs = Number(body.mtimeMs);
+  if (Number.isFinite(expectedMtimeMs) && Math.abs(skill.fileStats.mtimeMs - expectedMtimeMs) > 5) {
+    throw makeHttpError(409, "Skill file changed on disk after it was opened. Reopen it before saving.");
+  }
+  const tmpFile = `${skill.filePath}.${process.pid}.${Date.now()}.tmp`;
+  await writeFile(tmpFile, body.content, { encoding: "utf8", mode: skill.fileStats.mode & 0o777 });
+  await rename(tmpFile, skill.filePath);
+  const nextStats = await stat(skill.filePath);
+  const metadata = parseSkillFrontmatter(body.content, skill.filePath);
+  return {
+    name: metadata.name || skill.name,
+    description: metadata.description || skill.description || "",
+    path: skill.filePath,
+    mtimeMs: nextStats.mtimeMs,
+    size: nextStats.size,
+    enabled: skill.enabled === true,
+  };
+}
+
 function getResourcePatternForSkill(tab, skill) {
   const info = skill.sourceInfo || {};
   const baseDir = info.baseDir || (info.scope === "project" ? path.join(tab?.cwd || options.cwd, ".pi") : agentDir);
@@ -5413,6 +5744,13 @@ const server = createServer(async (req, res) => {
       return;
     }
 
+    if (url.pathname === "/api/update-status" && req.method === "GET") {
+      const force = ["1", "true", "yes", "refresh"].includes(String(url.searchParams.get("refresh") || "").toLowerCase());
+      const status = await getUpdateStatus({ force });
+      sendJson(res, 200, { ok: true, data: updateStatusForRequest(status, req) });
+      return;
+    }
+
     if (url.pathname === "/api/native-parity" && req.method === "GET") {
       sendJson(res, 200, { ok: true, data: nativeParityMatrix });
       return;
@@ -5473,6 +5811,14 @@ const server = createServer(async (req, res) => {
       return;
     }
 
+    if (url.pathname === "/api/update" && req.method === "POST") {
+      if (!isLocalAddress(req.socket.remoteAddress)) throw makeHttpError(403, "Updating Pi from the Web UI is only allowed from localhost");
+      const data = await runPiUpdateAndPrepareRestart();
+      sendJson(res, 200, { ok: true, data });
+      setTimeout(() => shutdown("api update"), 20).unref();
+      return;
+    }
+
     if (url.pathname === "/api/shutdown" && req.method === "POST") {
       if (!isLocalAddress(req.socket.remoteAddress)) throw makeHttpError(403, "Shutdown is only allowed from localhost");
       sendJson(res, 200, { ok: true, message: "Pi Web UI shutting down", webuiPid: process.pid });
@@ -5685,6 +6031,20 @@ const server = createServer(async (req, res) => {
       return;
     }
 
+    if (url.pathname === "/api/skill-file" && req.method === "GET") {
+      const tab = getRequestedTab(req, url);
+      sendJson(res, 200, { ok: true, data: await getSkillFileData(tab, { name: url.searchParams.get("name"), path: url.searchParams.get("path") }) });
+      return;
+    }
+
+    if (url.pathname === "/api/skill-file" && req.method === "POST") {
+      if (!isLocalAddress(req.socket.remoteAddress)) throw makeHttpError(403, "Saving skill files is only allowed from localhost");
+      const body = await readJsonBody(req, { limitBytes: SKILL_FILE_BODY_LIMIT_BYTES });
+      const tab = getRequestedTab(req, url, body);
+      sendJson(res, 200, { ok: true, data: await saveSkillFileData(tab, body) });
+      return;
+    }
+
     if (url.pathname === "/api/settings" && req.method === "GET") {
       const tab = getRequestedTab(req, url);
       sendJson(res, 200, { ok: true, data: nativeSettingsPayload(settingsManagerForTab(tab)) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstpick/pi-package-webui",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "Pi Web UI companion package with a local browser UI CLI plus /webui-start and /webui-status commands.",
   "license": "MIT",
   "homepage": "https://github.com/Firstp1ck/npm-packages/tree/main/pi-package-webui#readme",