@firstpick/pi-package-webui 0.4.8 → 0.5.0

package/README.md

@@ -2,7 +2,7 @@
 
 Local browser UI for [Pi coding agent](https://www.npmjs.com/package/@earendil-works/pi-coding-agent).
 
-![Pi Web UI main window showing multi-tab chat, controls, theme picker, and local status](https://unpkg.com/@firstpick/pi-package-webui/images/WebUI_v0.3.7.png)
+![Pi Web UI workspace dashboard showing the active project, model, session state, and quick actions](https://unpkg.com/@firstpick/pi-package-webui/images/Webui_Workspace_v0.4.8.png)
 
 Pi Web UI gives you a local browser companion for Pi: multi-tab chat, streaming output, model controls, uploads, slash-command helpers, workspace navigation, and optional extension widgets.
 
@@ -138,12 +138,128 @@ Environment variables:
 - Persistent context-window meter with manual compact and auto-compaction controls near the composer.
 - 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.
+- 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. Running app runners expose line-oriented stdin in the widget for interactive scripts. 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, `/btw` side-question output widgets with optional context transfer/live steering, browser notifications when a tab needs an extension UI response, and an optional side-panel toggle for agent-done notifications.
 - Localhost-only Pi/Web UI update checks with a top-right update notification and confirmed restart actions: **Update Pi & restart** runs `pi update` for Pi-only updates, while **Update Pi + Packages & Restart** runs `pi update --all` for Pi plus configured packages.
 - 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.
 
+## v0.4.8 feature gallery
+
+These screenshots show the v0.4.8 Web UI surfaces. Unless noted otherwise, actions apply to the active tab and its current working directory.
+
+### Workspace dashboard
+
+![Pi Web UI workspace dashboard showing the active project, model, session cards, and quick actions](https://unpkg.com/@firstpick/pi-package-webui/images/Webui_Workspace_v0.4.8.png)
+
+- **What it is:** The project home base for an active Web UI tab, combining cwd, model, context, git, queue, session, and activity status.
+- **What you can do:** Start or resume work, verify the tab is pointed at the right project, jump into common session/workspace actions, and spot queued or active work before prompting.
+
+### Control panel
+
+![Pi Web UI side control panel with model, session, workspace, theme, update, optional feature, and usage controls](https://unpkg.com/@firstpick/pi-package-webui/images/Webui_ControlPanel_v0.4.8.png)
+
+- **What it is:** The side rail for Web UI state and settings, including model, thinking effort, session/workspace controls, theme, optional companions, Remote WebUI, updates, notifications, and usage widgets.
+- **What you can do:** Change model or effort, compact/manage sessions, toggle notifications, check or install optional packages, run confirmed updates/restarts, and manage remote/PIN controls when the remote companion is loaded.
+
+### Working-directory picker
+
+![Pi Web UI working-directory picker with recent paths, saved directories, and create-directory action](https://unpkg.com/@firstpick/pi-package-webui/images/Webui_CWDpicker_v0.4.8.png)
+
+- **What it is:** A browser-native cwd chooser used at first launch and for per-tab working-directory changes.
+- **What you can do:** Search and browse project paths, choose recent or saved directories, create a new directory, and start or move a Pi tab into the selected workspace.
+
+### App runners
+
+![Pi Web UI app runner selector showing detected project runners and custom runner creation](https://unpkg.com/@firstpick/pi-package-webui/images/Webui_AppRunner_v0.4.8.png)
+
+- **What it is:** A project runner detector for common stacks plus browseable custom runners from `.pi-webui-runners.json`.
+- **What you can do:** Launch dev servers, tests, builds, scripts, and custom commands from the active cwd, pass arguments, watch pinned live output, and send line-oriented stdin to interactive runners.
+
+### Queue manager
+
+![Pi Web UI queue panel with prompt-list controls and queued-message status](https://unpkg.com/@firstpick/pi-package-webui/images/Webui_Queues_v0.4.8.png)
+
+- **What it is:** The queue surface for follow-up prompts, steering messages, user bash work, and loaded prompt lists while a tab is busy or ready.
+- **What you can do:** Create or load prompt lists, run batches when supported, see pending queued messages, and decide whether prompts sent during an active run should steer the current agent or wait as follow-ups.
+
+### Thinking effort picker
+
+![Pi Web UI thinking effort picker showing off, minimal, low, medium, high, and xhigh choices](https://unpkg.com/@firstpick/pi-package-webui/images/Webui_Effort_v0.4.8.png)
+
+- **What it is:** A browser picker for Pi's model thinking/reasoning effort setting.
+- **What you can do:** Switch between `off`, `minimal`, `low`, `medium`, `high`, and `xhigh`, confirm the effective effort in the footer, and tune speed/cost/quality before sending a prompt.
+
+### Scoped models
+
+![Pi Web UI scoped models picker listing provider models and the current effective model](https://unpkg.com/@firstpick/pi-package-webui/images/Webui_ScopedModels_v0.4.8.png)
+
+- **What it is:** A Web UI editor for `/scoped-models`, project/global model scope rules, and model cycling order.
+- **What you can do:** Search available models, enable or disable scoped entries, inspect the effective model source, and save model choices so future prompts and tabs use the intended provider/model.
+
+### Tools setup
+
+![Pi Web UI tools setup dialog listing available tools with enable and disable controls](https://unpkg.com/@firstpick/pi-package-webui/images/Webui_ToolsSetup_v0.4.8.png)
+
+- **What it is:** A browser-native `/tools` setup dialog for active and available Pi tools.
+- **What you can do:** Search tools, inspect descriptions and availability, enable or disable tool access for the active session, and adjust capability exposure without leaving the browser.
+
+### Skills setup
+
+![Pi Web UI skills setup dialog listing installed skills and activation controls](https://unpkg.com/@firstpick/pi-package-webui/images/Webui_SkillSetup_v0.4.8.png)
+
+- **What it is:** A browser-native `/skills` setup dialog for installed Pi skills.
+- **What you can do:** Find skills by name or description, review what each skill is for, enable or disable skills for the active session, and make skill activation more transparent before asking Pi to work.
+
+### Optional features
+
+![Pi Web UI optional features list showing companion packages and install or update states](https://unpkg.com/@firstpick/pi-package-webui/images/Webui_OptionalFeatures_v0.4.8.png)
+
+- **What it is:** A companion-package manager for Web UI-aware extensions, prompts, themes, and optional dashboards.
+- **What you can do:** See whether each companion is enabled, disabled, installed-but-not-loaded, missing, or updateable; install/update known packages from localhost; and reload affected tabs when a feature becomes available.
+
+### `/btw` side questions
+
+![Pi Web UI BTW widget showing a side-question input and live side-thread output](https://unpkg.com/@firstpick/pi-package-webui/images/Webui_BTW_v0.4.8.png)
+
+- **What it is:** A Web UI widget for the optional `/btw` side-question extension, keeping quick questions separate from the main agent flow.
+- **What you can do:** Ask short side questions without derailing the main chat, inspect live output, steer or stop the side thread, and transfer useful context back into the main prompt when needed.
+
+### Guided Git workflow
+
+![Pi Web UI guided Git workflow showing staged changes, generated commit messages, and PR controls](https://unpkg.com/@firstpick/pi-package-webui/images/Webui_GitWorkflow_v0.4.8.png)
+
+- **What it is:** A guided browser workflow for staging changes, generating commit messages, committing, pushing, and optionally creating a pull request.
+- **What you can do:** Run the stage/message/commit/push steps, choose generated short or long commit messages, type a manual message, create or confirm PR branch names, review generated PR text, and push only after confirmation.
+
+### Git branch picker
+
+![Pi Web UI git branch picker showing the current branch and create-branch action](https://unpkg.com/@firstpick/pi-package-webui/images/Webui_GitBranches_v0.4.8.png)
+
+- **What it is:** A footer branch picker backed by the active tab's current Git repository.
+- **What you can do:** View the current branch/repo, switch local branches, create and switch to a new branch, and get warnings when a branch change could affect active agent work.
+
+### Git diff viewer
+
+![Pi Web UI Git Changes dialog showing repository status, file list, and side-by-side diff rows](https://unpkg.com/@firstpick/pi-package-webui/images/Webui_GitDiff_v0.4.8.png)
+
+- **What it is:** A browser diff dialog for current Git changes in the active workspace.
+- **What you can do:** Review staged, unstaged, untracked, and incoming changes; jump between files; see additions/deletions with line numbers; and inspect text previews before asking Pi to edit, commit, or create a PR.
+
+### Codex usage
+
+![Pi Web UI Codex usage widget showing subscription usage windows and reset timers](https://unpkg.com/@firstpick/pi-package-webui/images/Webui_CodexUsage_v0.4.8.png)
+
+- **What it is:** A side-panel usage widget for Codex-family subscription-backed models.
+- **What you can do:** Refresh usage, monitor short-window and weekly limits, see reset timing, and decide whether to switch models or delay large prompts.
+
+### Pi stats dashboard
+
+![Pi Web UI stats dashboard showing token, cost, cache, model, and daily usage analytics](https://unpkg.com/@firstpick/pi-package-webui/images/Webui_Pistats_v0.4.8.png)
+
+- **What it is:** The browser overlay from the optional stats companion, summarizing token, cost, cache, prompt/context, model, session, and command usage.
+- **What you can do:** Filter by time range, refresh analytics, review daily/model/session breakdowns, inspect cost and cache behavior, and calibrate prompt estimates for more accurate local usage visibility.
+
 Useful browser endpoints exposed by the local server include:
 
 - `GET /api/path-suggestions?tab=<tabId>&query=<path>` for `@` file/path references with live suggestions.

package/bin/pi-webui.mjs

@@ -177,6 +177,7 @@ const APP_RUNNER_DETECTION_TIMEOUT_MS = 1_200;
 const APP_RUNNER_COMMAND_CACHE_TTL_MS = 30_000;
 const APP_RUNNER_OUTPUT_LINE_LIMIT = 1_000;
 const APP_RUNNER_OUTPUT_MAX_CHARS = 240_000;
+const APP_RUNNER_INPUT_MAX_CHARS = 16_000;
 const APP_RUNNER_STOP_GRACE_MS = 2_500;
 const APP_RUNNER_PYTHON_ENTRIES = ["Main.py", "main.py", "src/main.py", "src/Main.py", "app.py", "src/app.py"];
 const APP_RUNNER_JS_ENTRIES = ["main.js", "src/main.js", "index.js", "src/index.js", "server.js", "src/server.js", "app.js", "src/app.js"];
@@ -838,10 +839,18 @@ function safeDownloadFileName(name, fallback = "pi-export") {
   return (text || fallback).slice(0, 180);
 }
 
-function contentDispositionAttachment(fileName) {
+function contentDispositionHeader(fileName, disposition = "attachment") {
   const safeName = safeDownloadFileName(fileName);
   const asciiName = safeName.replace(/[^\x20-\x7e]/g, "_").replace(/["\\]/g, "_");
-  return `attachment; filename="${asciiName}"; filename*=UTF-8''${encodeURIComponent(safeName)}`;
+  return `${disposition}; filename="${asciiName}"; filename*=UTF-8''${encodeURIComponent(safeName)}`;
+}
+
+function contentDispositionAttachment(fileName) {
+  return contentDispositionHeader(fileName, "attachment");
+}
+
+function contentDispositionInline(fileName) {
+  return contentDispositionHeader(fileName, "inline");
 }
 
 function registerNativeDownload(filePath, { fileName, contentType, command = "native" } = {}) {
@@ -856,15 +865,17 @@ function registerNativeDownload(filePath, { fileName, contentType, command = "na
     expiresAt,
   };
   nativeDownloadTokens.set(token, record);
+  const url = `/api/native-download/${encodeURIComponent(token)}`;
   return {
-    url: `/api/native-download/${encodeURIComponent(token)}`,
+    url,
+    openUrl: record.contentType === MIME_TYPES.get(".html") ? `${url}?disposition=inline` : undefined,
     fileName: record.fileName,
     contentType: record.contentType,
     expiresAt: new Date(expiresAt).toISOString(),
   };
 }
 
-async function sendNativeDownload(res, token) {
+async function sendNativeDownload(res, token, { inline = false } = {}) {
   pruneNativeDownloadTokens();
   const item = nativeDownloadTokens.get(token);
   if (!item) throw makeHttpError(404, "Download token expired or not found");
@@ -873,10 +884,11 @@ async function sendNativeDownload(res, token) {
     nativeDownloadTokens.delete(token);
     throw makeHttpError(404, "Download file expired or not found");
   }
+  const canRenderInline = inline === true && item.contentType === MIME_TYPES.get(".html");
   res.writeHead(200, {
     "content-type": item.contentType,
     "content-length": String(fileStats.size),
-    "content-disposition": contentDispositionAttachment(item.fileName),
+    "content-disposition": canRenderInline ? contentDispositionInline(item.fileName) : contentDispositionAttachment(item.fileName),
     "cache-control": "no-store",
     "x-content-type-options": "nosniff",
   });
@@ -2274,6 +2286,11 @@ async function detectAppRunners(tab) {
     .map(publicAppRunner);
 }
 
+function appRunnerPendingLine(run) {
+  if (!run || run.status !== "running") return "";
+  return [run.stdoutRemainder, run.stderrRemainder].map((part) => String(part || "")).filter(Boolean).join("");
+}
+
 function publicAppRunnerState(run) {
   if (!run) return null;
   return {
@@ -2295,6 +2312,11 @@ function publicAppRunnerState(run) {
     truncated: run.truncated === true,
     lineCount: run.lineCount || run.lines?.length || 0,
     lines: Array.isArray(run.lines) ? [...run.lines] : [],
+    pendingLine: appRunnerPendingLine(run),
+    stdinClosed: run.stdinClosed === true,
+    stdinError: run.stdinError || "",
+    stdinWrites: run.stdinWrites || 0,
+    lastStdinAt: run.lastStdinAt || "",
   };
 }
 
@@ -2398,6 +2420,7 @@ function finishAppRunner(tab, run, patch = {}) {
   run.error = patch.error;
   run.status = patch.error ? "error" : patch.exitCode === 0 ? "done" : "failed";
   run.child = null;
+  run.stdinClosed = true;
   run.stopping = false;
   appendAppRunnerLine(run, `# ${appRunnerStatusLabel(run)} after ${Math.max(0, Math.round((Date.parse(run.endedAt) - Date.parse(run.startedAt)) / 1000))}s`);
   if (patch.error) appendAppRunnerLine(run, `# ${patch.error}`);
@@ -2407,6 +2430,45 @@ function finishAppRunner(tab, run, patch = {}) {
   broadcastAppRunnerState(tab);
 }
 
+function normalizeAppRunnerInputText(value) {
+  const text = String(value ?? "");
+  if (text.includes("\0")) throw makeHttpError(400, "App runner input cannot contain null bytes");
+  if (text.length > APP_RUNNER_INPUT_MAX_CHARS) throw makeHttpError(413, `App runner input is too long; limit is ${APP_RUNNER_INPUT_MAX_CHARS} characters`);
+  return text;
+}
+
+function sendAppRunnerInput(tab, value, { appendNewline = true, closeStdin = false } = {}) {
+  const run = tab?.appRunner;
+  if (!run || run.status !== "running") throw makeHttpError(409, "No app runner is running in this tab");
+  const stdin = run.child?.stdin;
+  if (!stdin || stdin.destroyed || stdin.writableEnded || run.stdinClosed === true) throw makeHttpError(409, "App runner stdin is closed");
+  const text = normalizeAppRunnerInputText(value);
+  const chunk = `${text}${appendNewline === false ? "" : "\n"}`;
+  if (!chunk && !closeStdin) throw makeHttpError(400, "App runner input is empty");
+  let buffered = false;
+  try {
+    if (closeStdin) {
+      if (chunk) stdin.end(chunk, "utf8");
+      else stdin.end();
+      run.stdinClosed = true;
+    } else {
+      buffered = stdin.write(chunk, "utf8") === false;
+    }
+  } catch (error) {
+    run.stdinClosed = true;
+    run.stdinError = sanitizeError(error);
+    throw makeHttpError(409, `App runner stdin write failed: ${run.stdinError}`);
+  }
+  run.stdinWrites = (run.stdinWrites || 0) + 1;
+  run.lastStdinAt = new Date().toISOString();
+  const closeSuffix = closeStdin ? " and closed" : "";
+  if (chunk) appendAppRunnerLine(run, text ? `# stdin sent (${text.length} char${text.length === 1 ? "" : "s"})${closeSuffix}` : `# stdin sent (Enter)${closeSuffix}`);
+  else appendAppRunnerLine(run, "# stdin closed (EOF)");
+  recordEvent({ type: "webui_app_runner_stdin", tabId: tab.id, tabTitle: tab.title, command: run.displayCommand, chars: text.length, newline: appendNewline !== false, closed: closeStdin === true });
+  scheduleAppRunnerBroadcast(tab);
+  return { cwd: tab.cwd, activeRun: publicAppRunnerState(run), inputBuffered: buffered };
+}
+
 async function startAppRunner(tab, runnerId) {
   if (tab.appRunner?.status === "running") throw makeHttpError(409, `App runner already running: ${tab.appRunner.displayCommand}`);
   const runners = await detectAppRunners(tab);
@@ -2427,12 +2489,14 @@ async function startAppRunner(tab, runnerId) {
     lines: [],
     lineCount: 0,
     outputChars: 0,
+    stdinClosed: false,
+    stdinWrites: 0,
   };
   appendAppRunnerLine(run, `$ ${run.displayCommand}`);
   const child = spawn(run.command, run.args, {
     cwd: run.cwd,
     env: process.env,
-    stdio: ["ignore", "pipe", "pipe"],
+    stdio: ["pipe", "pipe", "pipe"],
     windowsHide: true,
     detached: process.platform !== "win32",
   });
@@ -2440,6 +2504,18 @@ async function startAppRunner(tab, runnerId) {
   run.pid = child.pid;
   tab.appRunner = run;
 
+  child.stdin?.on("error", (error) => {
+    run.stdinClosed = true;
+    run.stdinError = sanitizeError(error);
+    if (run.status === "running") {
+      appendAppRunnerLine(run, `# stdin error: ${run.stdinError}`);
+      scheduleAppRunnerBroadcast(tab);
+    }
+  });
+  child.stdin?.on("close", () => {
+    run.stdinClosed = true;
+    if (run.status === "running") scheduleAppRunnerBroadcast(tab);
+  });
   child.stdout.on("data", (chunk) => appendAppRunnerChunk(tab, run, chunk, "stdout"));
   child.stderr.on("data", (chunk) => appendAppRunnerChunk(tab, run, chunk, "stderr"));
   child.on("error", (error) => finishAppRunner(tab, run, { error: sanitizeError(error) }));
@@ -6544,7 +6620,7 @@ async function handleNativeExportCommand(tab, args, req) {
     return respondNative("export", {
       status: "succeeded",
       level: "info",
-      message: `Exported current session to HTML.\nDownload: ${download.fileName}\nLink expires: ${download.expiresAt}`,
+      message: `Exported current session to HTML.\nDownload: ${download.fileName}\nOpen it in your browser when prompted.\nOpen URL: ${download.openUrl || download.url}\nDownload URL: ${download.url}\nLink expires: ${download.expiresAt}`,
       download,
       result: response.data,
       refresh: ["state"],
@@ -7304,7 +7380,9 @@ const server = createServer(async (req, res) => {
     }
 
     if (url.pathname.startsWith("/api/native-download/") && req.method === "GET") {
-      await sendNativeDownload(res, decodeURIComponent(url.pathname.slice("/api/native-download/".length)));
+      await sendNativeDownload(res, decodeURIComponent(url.pathname.slice("/api/native-download/".length)), {
+        inline: url.searchParams.get("disposition") === "inline",
+      });
       return;
     }
 
@@ -7399,6 +7477,14 @@ const server = createServer(async (req, res) => {
       return;
     }
 
+    if (url.pathname === "/api/app-runner/input" && req.method === "POST") {
+      const body = await readJsonBody(req);
+      const tab = getRequestedTab(req, url, body);
+      const text = Object.prototype.hasOwnProperty.call(body, "text") ? body.text : body.input;
+      sendJson(res, 200, { ok: true, data: sendAppRunnerInput(tab, text, { appendNewline: body.newline !== false, closeStdin: body.closeStdin === true || body.close === true }) });
+      return;
+    }
+
     if (url.pathname === "/api/app-runner/stop" && req.method === "POST") {
       const body = await readJsonBody(req);
       const tab = getRequestedTab(req, url, body);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstpick/pi-package-webui",
-  "version": "0.4.8",
+  "version": "0.5.0",
   "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",
@@ -53,7 +53,7 @@
     "test": "node tests/run-all.mjs"
   },
   "dependencies": {
-    "@earendil-works/pi-coding-agent": "^0.79.7"
+    "@earendil-works/pi-coding-agent": "^0.79.8"
   },
   "optionalDependencies": {
     "@firstpick/pi-extension-btw": "^0.1.0",