@firstpick/pi-package-webui 0.3.7 → 0.3.9

package/public/index.html

@@ -144,8 +144,8 @@
                 type="button"
                 hidden
                 title="Guided Git workflow"
-                aria-label="Start guided Git workflow: git add dot, run git-staged-msg, preview messages, commit short or long, then git push. Cancel is available at each step."
-                data-tooltip="GitHub workflow:
1. Run git add .
2. Run /git-staged-msg
3. Preview short + long messages
4. Commit with short or long message
5. Run git push
Cancel is available at each step."
+                aria-label="Start guided Git workflow: stage all changes, generate and preview staged commit messages, optionally create a PR branch, commit short or long, then push or create a pull request. Cancel is available at each step."
+                data-tooltip="Guided Git workflow:
1. Stage all changes with git add .
2. Generate and preview staged commit messages.
3. Optional: create or type a PR branch before committing.
4. Commit with the short or long message.
5. Push normally, or push the PR branch, generate/review /pr, and create the PR.
Cancel is available at each step."
               ><svg class="composer-icon composer-icon-github" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg></button>
               <div class="composer-publish-menu" hidden>
                 <button

package/public/service-worker.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = "pi-webui-pwa-v25";
+const CACHE_NAME = "pi-webui-pwa-v26";
 const APP_SHELL = [
   "/",
   "/index.html",
@@ -37,6 +37,26 @@ self.addEventListener("notificationclick", (event) => {
   );
 });
 
+// Network-first keeps the app shell fresh after deploys regardless of
+// CACHE_NAME or ?v= cache-buster drift; the cache only serves offline clients.
+function fetchThenCache(request) {
+  return fetch(request).then((response) => {
+    if (response.ok) {
+      const copy = response.clone();
+      caches.open(CACHE_NAME).then((cache) => cache.put(request, copy));
+    }
+    return response;
+  });
+}
+
+// ignoreSearch lets precached bare paths satisfy ?v= cache-busted requests offline.
+function cachedAppShell(request, fallbackPath) {
+  return caches.match(request, { ignoreSearch: true }).then((cached) => {
+    if (cached || !fallbackPath) return cached;
+    return caches.match(fallbackPath, { ignoreSearch: true });
+  });
+}
+
 self.addEventListener("fetch", (event) => {
   const { request } = event;
   if (request.method !== "GET") return;
@@ -45,16 +65,10 @@ self.addEventListener("fetch", (event) => {
   if (url.origin !== self.location.origin || url.pathname.startsWith("/api/")) return;
 
   if (request.mode === "navigate") {
-    event.respondWith(fetch(request).catch(() => caches.match("/index.html")));
+    event.respondWith(fetchThenCache(request).catch(() => cachedAppShell(request, "/index.html")));
     return;
   }
 
   if (!APP_SHELL.includes(url.pathname)) return;
-  event.respondWith(
-    caches.match(request).then((cached) => cached || fetch(request).then((response) => {
-      const copy = response.clone();
-      caches.open(CACHE_NAME).then((cache) => cache.put(request, copy));
-      return response;
-    })),
-  );
+  event.respondWith(fetchThenCache(request).catch(() => cachedAppShell(request)));
 });

package/public/styles.css

@@ -1878,6 +1878,7 @@ button.footer-tui-item {
   padding: 0.28rem 0.52rem;
   border-radius: 0.7rem;
 }
+button.footer-metric,
 button.footer-meta {
   appearance: none;
   color: inherit;
@@ -1885,18 +1886,26 @@ button.footer-meta {
   text-align: left;
   cursor: pointer;
 }
+.footer-metric-action,
 .footer-meta-action {
   position: relative;
   border-color: rgba(148, 226, 213, 0.26);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), inset 0 0 0 1px rgba(148, 226, 213, 0.055), 0 0.45rem 1rem rgba(0, 0, 0, 0.10);
   transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
 }
+.footer-metric-action:hover,
+.footer-metric-action:focus-visible,
 .footer-meta-action:hover,
 .footer-meta-action:focus-visible {
   border-color: rgba(166, 227, 161, 0.46);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 0 1rem rgba(166, 227, 161, 0.16);
   outline: none;
 }
+.footer-metric-action[aria-busy="true"],
+.footer-meta-action[aria-busy="true"] {
+  cursor: progress;
+  opacity: 0.9;
+}
 .footer-workspace.footer-meta-action .footer-meta-value {
   color: var(--ctp-green);
 }
@@ -2066,6 +2075,32 @@ button.footer-meta {
   border-color: rgba(249, 226, 175, 0.36);
   background: transparent;
 }
+.footer-changes-with-files {
+  position: relative;
+  cursor: default;
+}
+.footer-changes-with-files:hover,
+.footer-changes-with-files:focus,
+.footer-changes-with-files:focus-within {
+  z-index: 50;
+}
+.footer-changes-with-files:focus-visible {
+  outline: 1px solid rgba(249, 226, 175, 0.48);
+  outline-offset: 2px;
+}
+.footer-changes-with-files::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  display: none;
+  height: 0.62rem;
+}
+.footer-changes-with-files:hover::after,
+.footer-changes-with-files:focus-within::after {
+  display: block;
+}
 .footer-changes .footer-meta-label {
   color: rgba(249, 226, 175, 0.88);
   text-shadow: 0 0 0.52rem rgba(249, 226, 175, 0.20);
@@ -2076,6 +2111,82 @@ button.footer-meta {
   letter-spacing: 0.01em;
   text-shadow: 0 0 0.72rem rgba(249, 226, 175, 0.28);
 }
+.footer-changed-files-popover {
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 0.48rem);
+  z-index: 60;
+  display: none;
+  gap: 0.44rem;
+  width: min(32rem, calc(100vw - 2rem));
+  max-height: min(42dvh, 28rem);
+  overflow: auto;
+  padding: 0.68rem;
+  border: 1px solid rgba(249, 226, 175, 0.32);
+  border-radius: 0.85rem;
+  background:
+    radial-gradient(circle at 8% 0%, rgba(249, 226, 175, 0.13), transparent 12rem),
+    linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.98), rgba(var(--ctp-base-rgb), 0.96));
+  box-shadow: 0 1rem 2.4rem rgba(var(--ctp-crust-rgb), 0.64), 0 0 1.2rem rgba(249, 226, 175, 0.12), inset 0 1px 0 rgba(255,255,255,0.055);
+}
+.footer-changes-with-files:hover .footer-changed-files-popover,
+.footer-changes-with-files:focus .footer-changed-files-popover,
+.footer-changes-with-files:focus-within .footer-changed-files-popover {
+  display: grid;
+}
+.footer-changed-files-title,
+.footer-changed-files-heading {
+  color: var(--ctp-yellow);
+  font-size: 0.7rem;
+  font-weight: 950;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.footer-changed-files-group {
+  display: grid;
+  gap: 0.28rem;
+}
+.footer-changed-files-list {
+  display: grid;
+  gap: 0.22rem;
+}
+.footer-changed-file {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 0.42rem;
+  width: 100%;
+  padding: 0.34rem 0.45rem;
+  border: 1px solid rgba(180, 190, 254, 0.15);
+  border-radius: 0.52rem;
+  color: rgba(var(--ctp-text-rgb), 0.92);
+  background: rgba(var(--ctp-crust-rgb), 0.42);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.footer-changed-file:hover,
+.footer-changed-file:focus-visible {
+  border-color: rgba(249, 226, 175, 0.44);
+  background: rgba(249, 226, 175, 0.10);
+  outline: none;
+}
+.footer-changed-file-status {
+  color: rgba(var(--ctp-subtext-rgb), 0.72);
+  font-weight: 950;
+}
+.footer-changed-file-path {
+  min-width: 0;
+  overflow: hidden;
+  color: rgba(var(--ctp-text-rgb), 0.94);
+  font-weight: 760;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.footer-changed-file.modified .footer-changed-file-status { color: var(--ctp-yellow); }
+.footer-changed-file.staged .footer-changed-file-status { color: var(--ctp-green); }
+.footer-changed-file.untracked .footer-changed-file-status { color: var(--ctp-blue); }
+.footer-changed-file.conflicted .footer-changed-file-status { color: var(--ctp-red); }
 .footer-git-extra {
   border-color: rgba(137, 180, 250, 0.34);
   background: transparent;

package/start-webui.sh

@@ -196,6 +196,8 @@ http_ok() {
     curl -fsS --max-time 2 "$url" >/dev/null 2>&1
   elif command -v wget >/dev/null 2>&1; then
     wget -q --timeout=2 --tries=1 --spider "$url" >/dev/null 2>&1
+  elif command -v node >/dev/null 2>&1; then
+    node -e 'fetch(process.argv[1], { signal: AbortSignal.timeout(2000) }).then((r) => process.exit(r.ok ? 0 : 1), () => process.exit(1));' "$url" >/dev/null 2>&1
   else
     return 1
   fi
@@ -214,6 +216,8 @@ http_get() {
     curl -fsS --max-time 5 "$url"
   elif command -v wget >/dev/null 2>&1; then
     wget -q --timeout=5 --tries=1 -O - "$url"
+  elif command -v node >/dev/null 2>&1; then
+    node -e 'fetch(process.argv[1], { signal: AbortSignal.timeout(5000) }).then(async (r) => { if (!r.ok) process.exit(1); process.stdout.write(await r.text()); }, () => process.exit(1));' "$url"
   else
     return 1
   fi
@@ -225,6 +229,8 @@ http_post_json() {
 
   if command -v curl >/dev/null 2>&1; then
     curl -fsS --max-time 10 -X POST "$url" -H "Content-Type: application/json" --data "$body"
+  elif command -v node >/dev/null 2>&1; then
+    node -e 'fetch(process.argv[1], { method: "POST", headers: { "Content-Type": "application/json" }, body: process.argv[2], signal: AbortSignal.timeout(10000) }).then(async (r) => { if (!r.ok) process.exit(1); process.stdout.write(await r.text()); }, () => process.exit(1));' "$url" "$body"
   else
     return 1
   fi
@@ -336,11 +342,6 @@ wait_until_ready() {
   local url="$1"
   local pid="$2"
 
-  if ! command -v curl >/dev/null 2>&1 && ! command -v wget >/dev/null 2>&1; then
-    sleep 1
-    return 0
-  fi
-
   for _ in {1..50}; do
     if ! kill -0 "$pid" 2>/dev/null; then
       return 2

package/tests/fixtures/fake-pi.mjs

@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+// Minimal JSONL RPC stub standing in for the pi coding agent so HTTP endpoint
+// tests can boot the real pi-webui server without a model provider.
+import { createInterface } from "node:readline";
+
+const sessionIndex = process.argv.indexOf("--session");
+const sessionFile = sessionIndex !== -1 ? process.argv[sessionIndex + 1] : undefined;
+
+let activeBash = 0;
+let peakBash = 0;
+
+function respond(payload) {
+  process.stdout.write(`${JSON.stringify(payload)}\n`);
+}
+
+const rl = createInterface({ input: process.stdin });
+rl.on("line", (line) => {
+  if (!line.trim()) return;
+  let command;
+  try {
+    command = JSON.parse(line);
+  } catch {
+    return;
+  }
+  const { id, type } = command || {};
+  if (!id || !type) return;
+  const base = { type: "response", id, command: type, success: true };
+
+  switch (type) {
+    case "get_state":
+      respond({
+        ...base,
+        data: {
+          model: { provider: "fake", id: "fake-model" },
+          thinkingLevel: "off",
+          isStreaming: false,
+          isCompacting: false,
+          steeringMode: "one-at-a-time",
+          followUpMode: "one-at-a-time",
+          sessionFile,
+          sessionId: "fake-session",
+          sessionName: "fake",
+          autoCompactionEnabled: false,
+          messageCount: 0,
+          pendingMessageCount: 0,
+        },
+      });
+      return;
+    case "get_messages":
+      respond({ ...base, data: { messages: [] } });
+      return;
+    case "get_available_models":
+      respond({ ...base, data: { models: [{ provider: "fake", id: "fake-model", name: "Fake Model" }] } });
+      return;
+    case "get_session_stats":
+      respond({ ...base, data: { tokens: 0 } });
+      return;
+    case "get_last_assistant_text":
+      respond({ ...base, data: { text: "fake last text" } });
+      return;
+    case "bash": {
+      activeBash += 1;
+      peakBash = Math.max(peakBash, activeBash);
+      setTimeout(() => {
+        activeBash -= 1;
+        respond({ ...base, data: { output: `peak:${peakBash}`, exitCode: 0, cancelled: false } });
+      }, 150);
+      return;
+    }
+    default:
+      respond({ ...base, data: {} });
+  }
+});

package/tests/http-endpoints-harness.test.mjs

@@ -0,0 +1,146 @@
+import assert from "node:assert/strict";
+import { spawn } from "node:child_process";
+import { chmod, mkdtemp, rm } from "node:fs/promises";
+import { networkInterfaces, tmpdir } from "node:os";
+import path from "node:path";
+import { setTimeout as delay } from "node:timers/promises";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+const serverScript = join(root, "bin", "pi-webui.mjs");
+const fakePi = join(root, "tests", "fixtures", "fake-pi.mjs");
+const port = 30000 + Math.floor(Math.random() * 20000);
+
+function lanAddress() {
+  for (const entries of Object.values(networkInterfaces())) {
+    for (const entry of entries || []) {
+      if (entry.family === "IPv4" && !entry.internal) return entry.address;
+    }
+  }
+  return undefined;
+}
+
+async function request(host, pathname, { method = "GET", body, timeoutMs = 5_000 } = {}) {
+  const response = await fetch(`http://${host}:${port}${pathname}`, {
+    method,
+    headers: body === undefined ? undefined : { "Content-Type": "application/json" },
+    body: body === undefined ? undefined : JSON.stringify(body),
+    signal: AbortSignal.timeout(timeoutMs),
+  });
+  let payload;
+  try {
+    payload = await response.json();
+  } catch {
+    payload = undefined;
+  }
+  return { status: response.status, body: payload };
+}
+
+const cwd = await mkdtemp(path.join(tmpdir(), "pi-webui-http-harness-"));
+await chmod(fakePi, 0o755);
+
+const child = spawn(process.execPath, [serverScript, "--cwd", cwd, "--host", "0.0.0.0", "--port", String(port), "--pi", fakePi], {
+  stdio: ["ignore", "pipe", "pipe"],
+});
+let serverOutput = "";
+child.stdout.on("data", (chunk) => {
+  serverOutput += String(chunk);
+});
+child.stderr.on("data", (chunk) => {
+  serverOutput += String(chunk);
+});
+
+try {
+  // Wait for the HTTP server to accept requests.
+  let health;
+  for (let attempt = 0; attempt < 100; attempt++) {
+    if (child.exitCode !== null) break;
+    try {
+      health = await request("127.0.0.1", "/api/health", { timeoutMs: 1_000 });
+      if (health.status === 200) break;
+    } catch {
+      // Server not listening yet.
+    }
+    await delay(200);
+  }
+  assert.equal(health?.status, 200, `server should become healthy, output:\n${serverOutput}`);
+  assert.equal(health.body.ok, true);
+  assert.equal(health.body.piRunning, true, "fake pi RPC process should be attached and running");
+
+  const tabsResponse = await request("127.0.0.1", "/api/tabs");
+  assert.equal(tabsResponse.status, 200);
+  const tabList = tabsResponse.body?.data?.tabs || tabsResponse.body?.tabs || [];
+  assert.equal(tabList.length, 1, "startup should create one tab for --cwd");
+  const tabId = tabList[0].id;
+  assert.ok(tabId, "tab should have an id");
+
+  const state = await request("127.0.0.1", `/api/state?tab=${encodeURIComponent(tabId)}`);
+  assert.equal(state.status, 200);
+  assert.equal(state.body?.data?.model?.provider, "fake", "state should come from the fake pi RPC");
+
+  // Native slash command routed through the adapter (/copy → get_last_assistant_text).
+  const copy = await request("127.0.0.1", "/api/prompt", {
+    method: "POST",
+    body: { message: "/copy", tab: tabId },
+  });
+  assert.equal(copy.status, 200);
+  assert.equal(copy.body?.data?.status, "succeeded", "native /copy should succeed through the adapter");
+  assert.equal(copy.body?.data?.copyText, "fake last text");
+
+  // Bash FIFO queue: concurrent requests must execute serially on the RPC.
+  const [bashA, bashB] = await Promise.all([
+    request("127.0.0.1", "/api/bash", { method: "POST", body: { command: "echo a", tab: tabId }, timeoutMs: 10_000 }),
+    request("127.0.0.1", "/api/bash", { method: "POST", body: { command: "echo b", tab: tabId }, timeoutMs: 10_000 }),
+  ]);
+  assert.equal(bashA.status, 200);
+  assert.equal(bashB.status, 200);
+  for (const result of [bashA, bashB]) {
+    assert.equal(result.body?.data?.output, "peak:1", "bash queue must never run two commands concurrently");
+  }
+
+  // Session-dir confinement: traversal targets are rejected even from localhost.
+  const traversalDelete = await request("127.0.0.1", "/api/session-delete", {
+    method: "POST",
+    body: { sessionPath: path.join(cwd, "outside.jsonl"), confirmed: true, tab: tabId },
+  });
+  assert.equal(traversalDelete.status, 403, "session delete outside the session dir must return 403");
+  assert.match(String(traversalDelete.body?.error || ""), /session directory/i);
+
+  const lan = lanAddress();
+  if (lan) {
+    const remoteDelete = await request(lan, "/api/session-delete", {
+      method: "POST",
+      body: { sessionPath: path.join(cwd, "outside.jsonl"), confirmed: true, tab: tabId },
+    });
+    assert.equal(remoteDelete.status, 403, "session delete must be localhost-only");
+
+    const remoteExport = await request(lan, "/api/prompt", {
+      method: "POST",
+      body: { message: "/export", tab: tabId },
+    });
+    assert.equal(remoteExport.status, 200, "guarded slash commands return blocked adapter cards, not raw HTTP errors");
+    assert.equal(remoteExport.body?.data?.status, "blocked", "guards-driven dispatch must block /export for LAN clients");
+
+    const remoteClose = await request(lan, "/api/network/close", { method: "POST" });
+    assert.equal(remoteClose.status, 403, "network close must be localhost-only");
+  } else {
+    console.log("http-endpoints-harness: no LAN address detected; skipping remote-client checks");
+  }
+
+  const localClose = await request("127.0.0.1", "/api/network/close", { method: "POST" });
+  assert.equal(localClose.status, 202, "network close from localhost should be accepted");
+
+  const shutdownResponse = await request("127.0.0.1", "/api/shutdown", { method: "POST" });
+  assert.equal(shutdownResponse.status, 200);
+
+  for (let attempt = 0; attempt < 50 && child.exitCode === null; attempt++) {
+    await delay(100);
+  }
+  assert.notEqual(child.exitCode, null, "server should exit after /api/shutdown");
+} finally {
+  if (child.exitCode === null) child.kill("SIGKILL");
+  await rm(cwd, { recursive: true, force: true });
+}
+
+console.log("http-endpoints-harness.test.mjs passed");