@firstpick/pi-package-webui 0.5.4 → 0.5.6

package/README.md

@@ -133,7 +133,7 @@ Environment variables:
 - Multi-tab Pi sessions with isolated processes, working directories, prompt drafts, activity state, per-tab settings, and a workspace dashboard for common actions.
 - Unified command palette (`Ctrl/Cmd+K`) for commands, tabs, models, sessions, settings, app controls, and frequent Web UI actions.
 - Automatic tab naming from the first prompt, with `--name <name>` still available for an explicit initial tab name.
-- Streaming chat transcript with Markdown, thinking output, tool/bash cards, queue and compaction events, edit-and-retry from user prompts, transcript search, copy buttons, and guarded abort controls that require holding Esc or the Abort button for 3 seconds.
+- Streaming chat transcript with Markdown, copy buttons for fenced code blocks, rendered Mermaid diagrams from fenced `mermaid`/`mmd` code blocks, thinking output, tool/bash cards, queue and compaction events, edit-and-retry from user prompts, transcript search, copy buttons, and guarded abort controls that require holding Esc or the Abort button for 3 seconds.
 - Prompt composer with uploads, drag/drop/paste, inline image support, generated text attachments for long input or clipboard text, editable text attachments, slash-command autocomplete, and `@` file/path references with live suggestions.
 - Leading `!` and `!!` user-bash commands from the composer, serialized per tab; `!` keeps output in the next model context and `!!` excludes it.
 - Browser-native Pi dialogs for `/model`, `/settings`, `/theme`, `/fork`, `/clone`, `/name`, `/resume`, `/tree`, `/login`, `/logout`, `/scoped-models`, `/tools`, and `/skills`, plus native-command adapter output for `/copy`, `/session`, `/new`, `/compact`, `/reload`, and `/export`.

package/bin/pi-webui.mjs

@@ -200,6 +200,7 @@ const MIME_TYPES = new Map([
   [".html", "text/html; charset=utf-8"],
   [".jsonl", "application/x-ndjson; charset=utf-8"],
   [".js", "text/javascript; charset=utf-8"],
+  [".mjs", "text/javascript; charset=utf-8"],
   [".css", "text/css; charset=utf-8"],
   [".svg", "image/svg+xml"],
   [".png", "image/png"],
@@ -4056,6 +4057,15 @@ function normalizeStaticPath(urlPath) {
   return name;
 }
 
+function mermaidStaticPath(urlPath) {
+  const prefix = "/vendor/mermaid/";
+  if (!String(urlPath || "").startsWith(prefix)) return undefined;
+  const relative = urlPath.slice(prefix.length);
+  if (relative === "mermaid.esm.min.mjs") return path.join(packageRoot, "node_modules", "mermaid", "dist", relative);
+  if (/^chunks\/mermaid\.esm\.min\/[A-Za-z0-9._-]+\.mjs$/.test(relative)) return path.join(packageRoot, "node_modules", "mermaid", "dist", relative);
+  return undefined;
+}
+
 const compressWithBrotli = promisify(brotliCompress);
 const compressWithGzip = promisify(gzip);
 const STATIC_COMPRESSIBLE_EXTENSIONS = new Set([".html", ".css", ".js", ".mjs", ".svg", ".json", ".webmanifest"]);
@@ -4096,9 +4106,8 @@ function requestEtagMatches(req, etag) {
 async function serveStatic(req, res, url) {
   if (req.method !== "GET") return false;
   const staticName = normalizeStaticPath(url.pathname);
-  if (!staticName) return false;
-
-  const filePath = path.join(publicDir, staticName);
+  const filePath = staticName ? path.join(publicDir, staticName) : mermaidStaticPath(url.pathname);
+  if (!filePath) return false;
   const ext = path.extname(filePath);
   const asset = await loadStaticAsset(filePath);
   const headers = {
@@ -4697,6 +4706,11 @@ function extensionStatusMap(tab) {
   return tab.extensionStatuses;
 }
 
+function extensionWidgetMap(tab) {
+  if (!tab.extensionWidgets) tab.extensionWidgets = new Map();
+  return tab.extensionWidgets;
+}
+
 function rememberExtensionStatusEvent(tab, event) {
   if (event?.type !== "extension_ui_request" || event.method !== "setStatus" || !event.statusKey) return;
   const statuses = extensionStatusMap(tab);
@@ -4704,10 +4718,23 @@ function rememberExtensionStatusEvent(tab, event) {
   else statuses.delete(String(event.statusKey));
 }
 
+function rememberExtensionWidgetEvent(tab, event) {
+  if (event?.type !== "extension_ui_request" || event.method !== "setWidget") return;
+  const widgetKey = event.widgetKey || event.id;
+  if (!widgetKey) return;
+  const widgets = extensionWidgetMap(tab);
+  if (Array.isArray(event.widgetLines)) widgets.set(String(widgetKey), { ...event, widgetKey: String(widgetKey), widgetLines: event.widgetLines.map((line) => String(line)) });
+  else widgets.delete(String(widgetKey));
+}
+
 function clearExtensionStatuses(tab) {
   tab?.extensionStatuses?.clear();
 }
 
+function clearExtensionWidgets(tab) {
+  tab?.extensionWidgets?.clear();
+}
+
 function replayExtensionStatuses(tab, res) {
   for (const [statusKey, statusText] of extensionStatusMap(tab)) {
     sendSse(res, {
@@ -4725,6 +4752,24 @@ function replayExtensionStatuses(tab, res) {
   }
 }
 
+function replayExtensionWidgets(tab, res) {
+  const pendingExtensionUiRequestCount = pendingExtensionUiRequests(tab).length;
+  for (const [widgetKey, request] of extensionWidgetMap(tab)) {
+    sendSse(res, {
+      ...request,
+      type: "extension_ui_request",
+      id: randomUUID(),
+      method: "setWidget",
+      widgetKey,
+      tabId: tab.id,
+      tabTitle: tab.title,
+      replayed: true,
+      tabActivity: tabActivitySnapshot(tab),
+      pendingExtensionUiRequestCount,
+    });
+  }
+}
+
 function bashQueueForTab(tab) {
   if (!tab.bashQueue) tab.bashQueue = [];
   return tab.bashQueue;
@@ -5021,8 +5066,10 @@ function attachRpcToTab(tab, rpc) {
     if (event?.type === "pi_process_exit" || event?.type === "pi_process_error") {
       clearPendingExtensionUiRequests(tab);
       clearExtensionStatuses(tab);
+      clearExtensionWidgets(tab);
     } else {
       rememberExtensionStatusEvent(tab, scopedEvent);
+      rememberExtensionWidgetEvent(tab, scopedEvent);
       trackPendingExtensionUiRequest(tab, scopedEvent);
     }
     scopedEvent = { ...scopedEvent, tabActivity: tabActivitySnapshot(tab), pendingExtensionUiRequestCount: pendingExtensionUiRequests(tab).length };
@@ -5059,6 +5106,7 @@ async function createTab({ id: requestedId, index, title, titleSource, conversat
     activity: createTabActivity(createdAt),
     pendingExtensionUiRequests: new Map(),
     extensionStatuses: new Map(),
+    extensionWidgets: new Map(),
     webuiHelperRequests: new Map(),
     webuiHelperResponseIds: new Set(),
     bashQueue: [],
@@ -5648,6 +5696,7 @@ async function updateTabCwd(id, cwd) {
   resetTabActivity(tab);
   clearPendingExtensionUiRequests(tab);
   clearExtensionStatuses(tab);
+  clearExtensionWidgets(tab);
   const rpc = new PiRpcProcess({ ...piCommand, cwd: tab.cwd });
   attachRpcToTab(tab, rpc);
   rpc.start();
@@ -5685,6 +5734,7 @@ async function restartTabRpc(tab, reason = "reload") {
   resetTabActivity(tab);
   clearPendingExtensionUiRequests(tab);
   clearExtensionStatuses(tab);
+  clearExtensionWidgets(tab);
   const rpc = new PiRpcProcess({ ...piCommand, cwd: tab.cwd });
   attachRpcToTab(tab, rpc);
   rpc.start();
@@ -7373,6 +7423,7 @@ const server = createServer(async (req, res) => {
         activeRun: publicAppRunnerState(tab.appRunner),
       });
       replayExtensionStatuses(tab, res);
+      replayExtensionWidgets(tab, res);
       replayPendingExtensionUiRequests(tab, res);
       const keepAlive = setInterval(() => res.write(": keepalive\n\n"), 15000);
       req.on("close", () => {
@@ -7933,6 +7984,7 @@ const server = createServer(async (req, res) => {
           rememberTabState(tab, response.data);
           clearPendingExtensionUiRequests(tab);
           clearExtensionStatuses(tab);
+          clearExtensionWidgets(tab);
         }
         sendJson(res, response.success === false ? 400 : 200, responseWithTab(response, tab));
         return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstpick/pi-package-webui",
-  "version": "0.5.4",
+  "version": "0.5.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",
@@ -53,7 +53,8 @@
     "test": "node tests/run-all.mjs"
   },
   "dependencies": {
-    "@earendil-works/pi-coding-agent": "^0.79.8"
+    "@earendil-works/pi-coding-agent": "^0.79.8",
+    "mermaid": "^11.15.0"
   },
   "optionalDependencies": {
     "@firstpick/pi-extension-btw": "^0.1.0",
@@ -63,7 +64,7 @@
     "@firstpick/pi-extension-safety-guard": "^0.2.3",
     "@firstpick/pi-extension-setup-skills": "^0.1.8",
     "@firstpick/pi-extension-stats": "^0.2.6",
-    "@firstpick/pi-extension-todo-progress": "^0.2.4",
+    "@firstpick/pi-extension-todo-progress": "^0.2.5",
     "@firstpick/pi-extension-tools": "^0.1.6",
     "@firstpick/pi-extension-workflows": "^0.1.0",
     "@firstpick/pi-package-remote-webui": "^0.1.2",