pi-sdk-web 0.5.2 → 0.5.3

package/dist/server.js

@@ -270,6 +270,19 @@ export class PiWebServer {
         if (Object.keys(extStatus).length > 0) {
             this.sendJson(ws, { type: "ext_status", data: extStatus });
         }
+        // Current widgets (setWidget may have fired before this client connected,
+        // e.g. magic-context's todos overlay) - replay as individual requests so
+        // the browser's extension_ui_request handler renders them.
+        for (const [key, w] of Object.entries(this.uiContext.getWidgetSnapshot())) {
+            this.sendJson(ws, {
+                type: "extension_ui_request",
+                id: crypto.randomUUID(),
+                method: "setWidget",
+                widgetKey: key,
+                widgetLines: w.lines,
+                widgetPlacement: w.placement,
+            });
+        }
     }
     sendJson(ws, obj) {
         if (ws.readyState === WebSocket.OPEN) {
@@ -792,31 +805,15 @@ export class PiWebServer {
         // (appendEntry -> modal), same as before.
         const cmdPath = (cmd.sourceInfo && cmd.sourceInfo.path) || "";
         const customOnly = /pi-magic-context|magic-context/.test(cmdPath);
-        const ui = this.uiContext;
-        const originalSink = ui.sink;
         try {
-            // While the command runs, notify() broadcasts are tagged with the
-            // command name as title, so the browser shows them as a titled modal
-            // (colored, Markdown-rendered) instead of a plain stream line.
-            ui.sink = (obj) => {
-                const req = obj;
-                if (req && req.method === "notify") {
-                    // Tag command-time notifies with the command name as title so the
-                    // browser renders them as a titled modal (colored, Markdown).
-                    originalSink({ ...obj, title: `/${name}` });
-                }
-                else {
-                    originalSink(obj);
-                }
-            };
+            // No sink wrapping: notify() broadcasts go through as-is (no title),
+            // so the frontend renders them as persistent status lines - the same
+            // as TUI's notify -> showStatus (a dim line appended to the chat),
+            // whether or not they come from a command. Command *results* (custom
+            // entries) still become titled modals via the captured entries below.
             await cmd.handler(args, this.buildCommandContext(customOnly ? false : true));
         }
-        catch (e) {
-            ui.sink = originalSink;
-            throw e;
-        }
         finally {
-            ui.sink = originalSink;
             unsubscribe();
         }
         // Show command output as a modal (TUI-like). The session entry remains

package/dist/static/app.js

@@ -1944,8 +1944,18 @@ class PiWebClient {
   }
 
   appendNotifyLine(message, type) {
+    // TUI's showStatus reuses the LAST status line: consecutive notifies
+    // update it in place (a sticky status); a new line starts only when
+    // something else (a message) was inserted in between. Mirror that here.
+    const last = this.contentEl.lastElementChild;
+    if (last && last.classList.contains('notify-line') && last.dataset.notifyType === (type || '')) {
+      last.innerHTML = ansiToHtml(String(message));
+      this.scrollToBottom();
+      return;
+    }
     const div = document.createElement('div');
     div.className = 'notify-line' + (type ? ` notify-${type}` : '');
+    div.dataset.notifyType = type || '';
     div.innerHTML = ansiToHtml(String(message));
     this.contentEl.appendChild(div);
     this.scrollToBottom();

package/dist/ui-context.js

@@ -66,6 +66,13 @@ export class WebUIContext {
     webTheme = createWebTheme();
     /** Latest setStatus values per key, so late-connecting browsers get current state */
     statusMap = new Map();
+    /** Latest setWidget lines per key (persistent widgets, e.g. TodoOverlay):
+     * replayed to late-connecting browsers like setStatus snapshots. */
+    widgetMap = new Map();
+    /** Current widget snapshot (key -> lines) for new connections. */
+    getWidgetSnapshot() {
+        return Object.fromEntries(this.widgetMap);
+    }
     constructor(sink) {
         this.sink = sink;
         // Pi's ExtensionRunner wraps the ui context with `{...ui}` (a shallow
@@ -106,6 +113,7 @@ export class WebUIContext {
         }
         this.pending.clear();
         this.statusMap.clear();
+        this.widgetMap.clear();
     }
     /** Handle a browser `extension_ui_response` message. */
     respond(id, response) {
@@ -177,14 +185,41 @@ export class WebUIContext {
         this.sink({ type: "extension_ui_request", id: crypto.randomUUID(), method: "setTitle", title });
     }
     setWidget(key, content, options) {
+        let lines;
+        if (Array.isArray(content)) {
+            lines = content.map((l) => String(l));
+        }
+        else if (typeof content === "function") {
+            // Some extensions (e.g. magic-context's TodoOverlay) pass a TUI
+            // component factory instead of string lines. Web has no TUI renderer,
+            // but the factory yields a render(width) -> string[] that we can
+            // evaluate with a no-op tui stub and broadcast as text lines - the
+            // browser renders them (with ANSI colors) in the widgets panel.
+            try {
+                const stubTui = { requestRender: () => { }, invalidate: () => { } };
+                const component = content(stubTui, this.webTheme);
+                const render = component && component.render;
+                if (typeof render === "function") {
+                    const width = 78;
+                    const out = render(width);
+                    if (Array.isArray(out))
+                        lines = out.map((l) => String(l));
+                }
+            }
+            catch {
+                // fall through with no lines - widget renders empty
+            }
+        }
         this.sink({
             type: "extension_ui_request",
             id: crypto.randomUUID(),
             method: "setWidget",
             widgetKey: key,
-            widgetLines: Array.isArray(content) ? content : undefined,
+            widgetLines: lines,
             widgetPlacement: options?.placement,
         });
+        // Store for late-connecting browsers (replayed on WS connect).
+        this.widgetMap.set(key, { lines, placement: options?.placement });
     }
     // ------------------------------------------------------------------
     // Terminal-specific features: no-op in web mode

package/dist/usage-render.js

@@ -73,11 +73,10 @@ function tsOf(messageTimestamp, entryTimestamp) {
     }
     return 0;
 }
-function auxMessage(usage, ts, sourceId) {
+function auxMessage(usage, ts) {
     return {
         provider: "aux",
         model: "auxiliary",
-        thinkingLevel: undefined,
         cost: usage.cost,
         input: usage.input,
         output: usage.output,
@@ -85,7 +84,6 @@ function auxMessage(usage, ts, sourceId) {
         cacheWrite: usage.cacheWrite,
         timestamp: ts,
         reasoning: usage.reasoning,
-        afterCompaction: false,
         source: "auxiliary",
     };
 }
@@ -98,7 +96,6 @@ function parseSessionFile(path) {
     let sessionId = "";
     let cwd = "";
     let parentSession = "";
-    let thinkingLevel;
     let compactionPending = false;
     const messages = [];
     let content;
@@ -129,21 +126,19 @@ function parseSessionFile(path) {
                 break;
             }
             case "thinking_level_change": {
-                if (typeof entry.thinkingLevel === "string")
-                    thinkingLevel = entry.thinkingLevel;
                 break;
             }
             case "compaction": {
                 const usage = parseUsageAmount(entry.usage);
                 if (usage)
-                    messages.push(auxMessage(usage, tsOf(undefined, entry.timestamp), typeof entry.id === "string" ? entry.id : ""));
+                    messages.push(auxMessage(usage, tsOf(undefined, entry.timestamp)));
                 compactionPending = true;
                 break;
             }
             case "branch_summary": {
                 const usage = parseUsageAmount(entry.usage);
                 if (usage)
-                    messages.push(auxMessage(usage, tsOf(undefined, entry.timestamp), typeof entry.id === "string" ? entry.id : ""));
+                    messages.push(auxMessage(usage, tsOf(undefined, entry.timestamp)));
                 break;
             }
             case "message": {
@@ -156,7 +151,6 @@ function parseSessionFile(path) {
                         messages.push({
                             provider: msg.provider,
                             model: msg.model,
-                            thinkingLevel,
                             cost: usage.cost,
                             input: usage.input,
                             output: usage.output,
@@ -164,7 +158,6 @@ function parseSessionFile(path) {
                             cacheWrite: usage.cacheWrite,
                             timestamp: tsOf(msg.timestamp, entry.timestamp),
                             reasoning: usage.reasoning,
-                            afterCompaction: compactionPending,
                             source: "assistant",
                         });
                         compactionPending = false;
@@ -205,7 +198,7 @@ function addTokens(a, b) {
     a.cacheWrite += b.cacheWrite;
 }
 /** Format a cost value the way the extension does (0 -> "-"). */
-export function formatUsageCost(cost) {
+function formatUsageCost(cost) {
     if (cost === 0)
         return "-";
     if (cost < 0.01)
@@ -219,7 +212,7 @@ export function formatUsageCost(cost) {
     return `$${Math.round(cost)}`;
 }
 /** Format a token count compactly (12.3K, 4.5M, ...). */
-export function formatUsageTokens(n) {
+function formatUsageTokens(n) {
     if (n >= 1e9)
         return `${(n / 1e9).toFixed(2)}B`;
     if (n >= 1e6)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-sdk-web",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Browser Web access for Pi (AI coding agent) via the Pi SDK - standalone module, zero modification to Pi itself",
   "type": "module",
   "bin": {