pi-sdk-web 0.5.1 → 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
@@ -200,54 +235,11 @@ export class WebUIContext {
     setHeader() { }
     custom() {
         // Pi's custom() shows an extension-drawn TUI component. Web has no TUI
-        // renderer, so the component can't be *displayed* - but the factory is
-        // still invoked with no-op stubs so the extension's own logic runs
-        // (e.g. /usage starts its data collection inside the factory), then we
-        // settle immediately: display-only panels (user-driven close) would
-        // otherwise hang the command forever, and data-producing panels
-        // (loader -> done(value)) have their result read from the extension's
-        // own cache file afterwards when needed (see usage-render.ts). So
-        // custom() never blocks the command.
-        // Extensions that branch on hasUI before custom (magic-context
-        // ctx-status) are routed to their text fallback by executeCommand
-        // (hasUI:false) and never reach this.
-        try {
-            // Arguments are (factory, options) at runtime; the declared
-            // signature stays interface-compatible, read them dynamically.
-            const args = arguments;
-            const factory = args[0];
-            const options = args[1];
-            if (typeof factory === "function") {
-                // No-op TUI stub: enough surface for factories that need a render
-                // handle; rendering itself is never performed on Web.
-                const stubTui = {
-                    requestRender: () => { },
-                    invalidate: () => { },
-                    setFocus: () => { },
-                    getWidth: () => 100,
-                };
-                // Theme stub: color helpers degrade to plain text.
-                const stubTheme = {
-                    fg: (_k, s) => s,
-                    bold: (s) => s,
-                    dim: (s) => s,
-                    get theme() {
-                        return undefined;
-                    },
-                };
-                const component = factory(stubTui, stubTheme, {}, () => { });
-                // Component built and its logic ran (data collection started);
-                // NOT disposed - async work inside may still be running and own
-                // its resources. settle immediately.
-                void component;
-            }
-            if (options && typeof options.onHandle === "function") {
-                options.onHandle({ setHidden: () => { }, focus: () => { } });
-            }
-        }
-        catch {
-            // factory threw - ignore, still settle
-        }
+        // renderer, so the component can't be displayed - same headless stub as
+        // Pi's RPC mode (rpc-mode.ts: "Custom UI not supported in RPC mode"):
+        // settle immediately so commands awaiting the panel don't hang. This is
+        // now purely internal: /usage (which used to collect data inside the
+        // factory) collects natively from Pi session files instead.
         return Promise.resolve(undefined);
     }
     pasteToEditor() { }

package/dist/usage-render.js

@@ -14,7 +14,7 @@
  * (5 time tabs x provider/model x metrics + insights + global hourly
  * series + tab windows); the frontend renders.
  */
-import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
+import { existsSync, readdirSync, readFileSync } from "node:fs";
 import { join } from "node:path";
 import { homedir } from "node:os";
 const SESSIONS_DIRS = [
@@ -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;
@@ -193,111 +186,6 @@ export function collectUsage() {
     }
     return out;
 }
-/** A coarse freshness stamp: sum of session-file mtimes, for cheap invalidation. */
-export function sessionsStamp() {
-    const root = sessionsDir();
-    if (!root)
-        return 0;
-    const files = [];
-    collectSessionFiles(root, files);
-    let sum = 0;
-    for (const f of files) {
-        try {
-            sum += statSync(f).mtimeMs;
-        }
-        catch {
-            // ignore
-        }
-    }
-    return sum;
-}
-function startOfDay(ts) {
-    const d = new Date(ts);
-    d.setHours(0, 0, 0, 0);
-    return d.getTime();
-}
-function startOfWeek(ts) {
-    const d = new Date(ts);
-    const day = d.getDay() === 0 ? 6 : d.getDay() - 1;
-    d.setHours(0, 0, 0, 0);
-    d.setDate(d.getDate() - day);
-    return d.getTime();
-}
-function emptyTotals() {
-    return { cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, messages: 0, sessions: new Set() };
-}
-function fmt(n) {
-    return n >= 1e9
-        ? `${(n / 1e9).toFixed(2)}B`
-        : n >= 1e6
-            ? `${(n / 1e6).toFixed(2)}M`
-            : n >= 1e3
-                ? `${(n / 1e3).toFixed(1)}K`
-                : `${Math.round(n)}`;
-}
-function fmtCost(n) {
-    return `$${n.toFixed(n >= 1 ? 2 : 4)}`;
-}
-/** Render a Markdown usage summary (today / this week / all time). */
-export function renderUsageSummary() {
-    const files = collectUsage();
-    if (files.length === 0) {
-        return "## Usage\n\nNo usage data found yet.";
-    }
-    const now = Date.now();
-    const todayStart = startOfDay(now);
-    const weekStart = startOfWeek(now);
-    const today = emptyTotals();
-    const week = emptyTotals();
-    const all = emptyTotals();
-    const byModel = new Map();
-    for (const file of files) {
-        for (const m of file.messages) {
-            const t = m.timestamp;
-            const targets = [all];
-            if (t >= todayStart)
-                targets.push(today);
-            if (t >= weekStart)
-                targets.push(week);
-            for (const target of targets) {
-                target.cost += m.cost;
-                target.input += m.input;
-                target.output += m.output;
-                target.cacheRead += m.cacheRead;
-                target.cacheWrite += m.cacheWrite;
-                target.messages += 1;
-                target.sessions.add(file.sessionId);
-            }
-            const key = `${m.provider}/${m.model}`;
-            const byModelEntry = byModel.get(key) ?? emptyTotals();
-            byModelEntry.cost += m.cost;
-            byModelEntry.input += m.input;
-            byModelEntry.output += m.output;
-            byModelEntry.cacheRead += m.cacheRead;
-            byModelEntry.cacheWrite += m.cacheWrite;
-            byModelEntry.messages += 1;
-            byModel.set(key, byModelEntry);
-        }
-    }
-    const row = (label, t) => `| ${label} | ${fmt(t.input)} | ${fmt(t.output)} | ${fmt(t.cacheRead)} | ${fmt(t.cacheWrite)} | $${t.cost.toFixed(4)} | ${t.messages} | ${t.sessions.size} |`;
-    const lines = [
-        "## Usage",
-        "",
-        "| Period | Input | Output | Cache R | Cache W | Cost | Msgs | Sessions |",
-        "| --- | --- | --- | --- | --- | --- | --- | --- |",
-        row("Today", today),
-        row("This week", week),
-        row("All time", all),
-    ];
-    if (byModel.size > 0) {
-        const sorted = [...byModel.entries()].sort((a, b) => b[1].cost - a[1].cost).slice(0, 10);
-        lines.push("", "### By model (all time)", "", "| Model | Input | Output | Cost | Msgs |", "| --- | --- | --- | --- | --- |");
-        for (const [key, t] of sorted) {
-            lines.push(`| ${key} | ${fmt(t.input)} | ${fmt(t.output)} | $${t.cost.toFixed(4)} | ${t.messages} |`);
-        }
-    }
-    return lines.join("\n");
-}
 const TAB_KEYS = ["today", "thisWeek", "lastWeek", "last30Days", "allTime"];
 function emptyTokens() {
     return { total: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };
@@ -310,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)
@@ -324,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)
@@ -436,7 +324,7 @@ export function buildUsageData(sessionId) {
             }
         }
     }
-    const payload = { tabs: {}, hourly: [], tabWindow: {}, collectedAt: sessionsStamp() };
+    const payload = { tabs: {}, hourly: [], tabWindow: {}, collectedAt: Date.now() };
     // Graph x-axis windows per tab: [start, end]. today: midnight->now;
     // thisWeek: monday->now; lastWeek: monday->next Monday; last30Days:
     // start->now; allTime: 0 -> now (frontend clips to first data).
@@ -494,7 +382,9 @@ export function buildUsageData(sessionId) {
                     insights.push({
                         kind: "alarm",
                         stat: formatUsageCost(topModel.cost),
-                        headline: `${topModel.name} is the costliest model (${((topModel.cost / totalCost) * 100).toFixed(0)}% of total)`,
+                        // Model names can repeat across providers (e.g. deepseek-v4-
+                        // flash on several providers) - show provider/model.
+                        headline: `${top.name}/${topModel.name} is the costliest model (${((topModel.cost / totalCost) * 100).toFixed(0)}% of total)`,
                         advice: "Check whether its output quality justifies the price.",
                     });
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-sdk-web",
-  "version": "0.5.1",
+  "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": {