pi-sdk-web 0.5.0 → 0.5.1

package/dist/server.js

@@ -359,6 +359,13 @@ export class PiWebServer {
             for (const s of this.session.resourceLoader.getSkills().skills) {
                 commands.push({ name: `skill:${s.name}`, description: s.description, source: "skill", sourceInfo: s.sourceInfo });
             }
+            // pi-sdk-web built-ins: commands provided by this package itself
+            // (not tied to any extension), e.g. /usage which collects Pi session
+            // usage natively (usage-render.ts) instead of running the extension's
+            // command. Source "maxdai" = the package author's npm identity.
+            if (!commands.some((c) => c.name === "usage")) {
+                commands.push({ name: "usage", description: "Show usage statistics (tokens/cost, all sessions)", source: "maxdai", sourceInfo: { path: "pi-sdk-web", source: "maxdai", scope: "global", origin: "cli" } });
+            }
             return commands;
         }
         catch {
@@ -622,6 +629,13 @@ export class PiWebServer {
                 await this.executeCommand(name, args);
                 break;
             }
+            case "usage": {
+                // /usage panel scope switch (session | all) - re-render with the
+                // chosen data range.
+                const scope = data.scope === "all" ? "all" : "session";
+                await this.handleUsageCommand(scope);
+                break;
+            }
             case "session":
                 // Read-only session info (TUI /session equivalent)
                 this.broadcastSessionInfo();
@@ -752,6 +766,13 @@ export class PiWebServer {
      * modal (mirroring the TUI dialog behavior).
      */
     async executeCommand(name, args) {
+        // /usage is now a pi-web-native feature: collect usage directly from
+        // Pi's session files (usage-render.ts) and show the panel - the
+        // pi-usage-extension is no longer required (it reads the same files).
+        if (name === "usage") {
+            await this.handleUsageCommand("session");
+            return;
+        }
         const cmd = this.session.extensionRunner.getCommand(name);
         if (!cmd)
             throw new Error(`Unknown command: ${name}`);
@@ -817,34 +838,39 @@ export class PiWebServer {
                 notifyType: "info",
             });
         }
-        // Usage extension: the /usage command collects data (via custom(), whose
-        // factory runs the collection) and keeps its cache file up to date.
-        // Aggregate the cache into structured data and send it as a dedicated
-        // message; the frontend renders its own usage panel (independent
-        // integration in usage-render.ts - no effect on other commands).
-        if (name === "usage") {
-            try {
-                const { buildUsageData } = await import("./usage-render.js");
-                const data = buildUsageData();
-                if (data) {
-                    this.broadcast({ type: "usage_data", data });
-                }
-                else {
-                    this.broadcast({
-                        type: "extension_ui_request",
-                        id: crypto.randomUUID(),
-                        method: "notify",
-                        title: "/usage",
-                        message: "No usage data found. Run `/usage` in the TUI first to build the usage cache.",
-                        notifyType: "info",
-                    });
-                }
+        // --- /usage (pi-web-native) handled early in executeCommand ---
+    }
+    /** Collect usage from Pi session files and broadcast the panel payload.
+     * scope "session" = current session only; "all" = every session. */
+    async handleUsageCommand(scope = "session") {
+        try {
+            const { buildUsageData } = await import("./usage-render.js");
+            const sessionId = scope === "session" ? String(this.session.sessionId ?? "") : undefined;
+            const data = buildUsageData(sessionId);
+            if (data) {
+                this.broadcast({ type: "usage_data", data });
             }
-            catch {
-                // integration failed silently - command output (if any) already
-                // broadcast above
+            else {
+                this.broadcast({
+                    type: "extension_ui_request",
+                    id: crypto.randomUUID(),
+                    method: "notify",
+                    title: "/usage",
+                    message: scope === "session" ? "No usage data for this session yet." : "No usage data found yet (no Pi session files with usage).",
+                    notifyType: "info",
+                });
             }
         }
+        catch (e) {
+            this.broadcast({
+                type: "extension_ui_request",
+                id: crypto.randomUUID(),
+                method: "notify",
+                title: "/usage",
+                message: `Usage collection failed: ${e instanceof Error ? e.message : String(e)}`,
+                notifyType: "error",
+            });
+        }
     }
     buildCommandContext(hasUI) {
         const sm = this.session.sessionManager;

package/dist/static/app.js

@@ -1972,10 +1972,15 @@ class PiWebClient {
 
   renderUsagePanel(data) {
     if (!data || !data.tabs) return;
+    // Preserve the user's current choices (tab/view/scope/expanded) across
+    // data refresh (e.g. scope switch Session|All must not reset them);
+    // defaults are set only on first open. usageExpanded must exist for the
+    // tab/provider click handlers (created once, kept afterwards).
+    if (!this.usageTab) this.usageTab = 'thisWeek';
+    if (!this.usageView) this.usageView = 'table';
+    if (!this.usageScope) this.usageScope = 'session';
+    if (!this.usageExpanded) this.usageExpanded = new Set();
     this.usageData = data;
-    this.usageTab = 'thisWeek';
-    this.usageView = 'table';
-    this.usageExpanded = new Set();
     const overlay = document.getElementById('usage-overlay');
     if (!overlay) return;
     overlay.style.display = 'flex';
@@ -1983,6 +1988,14 @@ class PiWebClient {
     this.renderUsageBody();
   }
 
+  // Switch the usage scope (session | all) - re-fetch from the server.
+  setUsageScope(scope) {
+    if (this.usageScope === scope) return;
+    this.usageScope = scope;
+    this.renderUsageTabs();
+    this.send({ type: 'usage', scope });
+  }
+
   closeUsagePanel() {
     const overlay = document.getElementById('usage-overlay');
     if (overlay) overlay.style.display = 'none';
@@ -2011,7 +2024,7 @@ class PiWebClient {
       });
       tabsEl.appendChild(tab);
     }
-    // View switcher: Table / Insights / Graph
+    // View switcher: Table / Insights / Graph + scope (Session | All)
     const viewsEl = document.getElementById('usage-views');
     if (viewsEl) {
       viewsEl.innerHTML = '';
@@ -2026,6 +2039,17 @@ class PiWebClient {
         });
         viewsEl.appendChild(v);
       }
+      const scopeSep = document.createElement('span');
+      scopeSep.className = 'usage-scope-sep';
+      scopeSep.textContent = '|';
+      viewsEl.appendChild(scopeSep);
+      for (const [key, label] of [['session', 'Session'], ['all', 'All']]) {
+        const s = document.createElement('span');
+        s.className = 'usage-view' + (key === this.usageScope ? ' active' : '');
+        s.textContent = label;
+        s.addEventListener('click', () => this.setUsageScope(key));
+        viewsEl.appendChild(s);
+      }
     }
   }
 

package/dist/usage-render.js

@@ -1,99 +1,215 @@
 /**
- * Usage extension integration (independent module).
+ * Usage statistics for the pi-web panel (standalone module).
  *
- * pi-usage-extension's `/usage` command draws a TUI dashboard via
- * ctx.ui.custom() which Web cannot render. However, running the command
- * (through WebUIContext.custom() which now executes the factory) makes the
- * extension collect usage data and write its cache file
- * (`~/.pi/agent/usage-extension-cache.json`). This module reads that cache
- * after the command runs and renders an equivalent summary as Markdown,
- * shown as a titled modal - without coupling into the main server flow.
+ * Data is collected directly from Pi's own session files
+ * (~/.pi/agent/sessions/**\/*.jsonl): each assistant message carries
+ * provider/model/timestamp/usage{input,output,cacheRead,cacheWrite,
+ * reasoning,cost}, and auxiliary entries (compaction/branch_summary)
+ * carry usage too. The collection mirrors the semantics used by the
+ * pi-usage-extension (which reads the same session files and normalizes
+ * them to a cache) - but this module is independent: it parses the
+ * session files itself, so /usage works without the extension installed.
  *
- * Cache format (v7): { version, names: string[], files: { [sessionFile]: {
- *   size, mtimeMs, sessionId, cwd, parentSession,
- *   messages: 13-tuple[][], toolUsages: 5-tuple[][] } } }
- * message tuple: [provider, model, cost, inputTokens, outputTokens,
- *   cacheReadTokens, cacheWriteTokens, timestampMs, thinkingLevel,
- *   reasoningTokens, afterCompaction(0|1), source(0 assistant|1 auxiliary),
- *   sourceId]
+ * The module aggregates the messages into the structured UsageDataPayload
+ * (5 time tabs x provider/model x metrics + insights + global hourly
+ * series + tab windows); the frontend renders.
  */
-import { existsSync, readFileSync, statSync } from "node:fs";
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
 import { join } from "node:path";
 import { homedir } from "node:os";
-export const USAGE_CACHE_FILE = "usage-extension-cache.json";
-const USAGE_CACHE_DIRS = [
-    join(process.env.PI_HOME?.replace(/^~/, homedir()) ?? homedir(), ".pi", "agent"),
-    join(homedir(), ".pi", "agent"),
+const SESSIONS_DIRS = [
+    join(process.env.PI_HOME?.replace(/^~/, homedir()) ?? homedir(), ".pi", "agent", "sessions"),
+    join(homedir(), ".pi", "agent", "sessions"),
 ];
-function findCachePath() {
-    for (const dir of USAGE_CACHE_DIRS) {
-        const p = join(dir, USAGE_CACHE_FILE);
-        if (existsSync(p))
-            return p;
+function sessionsDir() {
+    for (const dir of SESSIONS_DIRS) {
+        if (existsSync(dir))
+            return dir;
     }
     return null;
 }
-/** mtime of the usage cache file, or null when absent. */
-export function usageCacheMtime() {
-    const path = findCachePath();
-    if (!path)
-        return null;
+/** Recursively collect all .jsonl session files under dir (sorted). */
+function collectSessionFiles(dir, out) {
+    let entries;
     try {
-        return statSync(path).mtimeMs;
+        entries = readdirSync(dir, { withFileTypes: true });
     }
     catch {
-        return null;
+        return;
+    }
+    for (const e of entries) {
+        const p = join(dir, e.name);
+        if (e.isDirectory())
+            collectSessionFiles(p, out);
+        else if (e.isFile() && e.name.endsWith(".jsonl"))
+            out.push(p);
     }
 }
-/** Read and normalize the usage cache; null when absent/unreadable. */
-export function loadUsageCache() {
-    const path = findCachePath();
-    if (!path)
+function parseUsageAmount(value) {
+    const u = value;
+    if (!u || typeof u !== "object")
         return null;
+    return {
+        cost: Number(u.cost?.total) || 0,
+        input: Number(u.input) || 0,
+        output: Number(u.output) || 0,
+        cacheRead: Number(u.cacheRead) || 0,
+        cacheWrite: Number(u.cacheWrite) || 0,
+        reasoning: Number(u.reasoning) || 0,
+    };
+}
+function tsOf(messageTimestamp, entryTimestamp) {
+    if (typeof messageTimestamp === "number")
+        return messageTimestamp;
+    if (typeof messageTimestamp === "string") {
+        const n = new Date(messageTimestamp).getTime();
+        if (!Number.isNaN(n))
+            return n;
+    }
+    if (typeof entryTimestamp === "string") {
+        const n = new Date(entryTimestamp).getTime();
+        if (!Number.isNaN(n))
+            return n;
+    }
+    return 0;
+}
+function auxMessage(usage, ts, sourceId) {
+    return {
+        provider: "aux",
+        model: "auxiliary",
+        thinkingLevel: undefined,
+        cost: usage.cost,
+        input: usage.input,
+        output: usage.output,
+        cacheRead: usage.cacheRead,
+        cacheWrite: usage.cacheWrite,
+        timestamp: ts,
+        reasoning: usage.reasoning,
+        afterCompaction: false,
+        source: "auxiliary",
+    };
+}
+/**
+ * Parse one session jsonl into its usage messages (the same semantics as
+ * the pi-usage-extension: assistant messages contribute their own usage,
+ * compaction/branch_summary entries contribute auxiliary usage).
+ */
+function parseSessionFile(path) {
+    let sessionId = "";
+    let cwd = "";
+    let parentSession = "";
+    let thinkingLevel;
+    let compactionPending = false;
+    const messages = [];
+    let content;
     try {
-        const raw = JSON.parse(readFileSync(path, "utf8"));
-        const names = raw.names ?? [];
-        const files = [];
-        for (const file of Object.values(raw.files ?? {})) {
-            const f = file;
-            const messages = [];
-            if (Array.isArray(f.messages)) {
-                for (const tuple of f.messages) {
-                    if (!Array.isArray(tuple) || tuple.length !== 13)
-                        continue;
-                    const provider = names[tuple[0]];
-                    const model = names[tuple[1]];
-                    const thinkingLevel = names[tuple[8]];
-                    if (typeof provider !== "string" || typeof model !== "string")
-                        continue;
-                    messages.push({
-                        provider,
-                        model,
-                        thinkingLevel,
-                        cost: Number(tuple[2]) || 0,
-                        input: Number(tuple[3]) || 0,
-                        output: Number(tuple[4]) || 0,
-                        cacheRead: Number(tuple[5]) || 0,
-                        cacheWrite: Number(tuple[6]) || 0,
-                        timestamp: Number(tuple[7]) || 0,
-                        reasoning: Number(tuple[9]) || 0,
-                        afterCompaction: tuple[10] === 1,
-                        source: tuple[11] === 1 ? "auxiliary" : "assistant",
-                    });
+        content = readFileSync(path, "utf8");
+    }
+    catch {
+        return { sessionId, cwd, parentSession, messages };
+    }
+    for (const line of content.split("\n")) {
+        if (!line.trim())
+            continue;
+        let entry;
+        try {
+            entry = JSON.parse(line);
+        }
+        catch {
+            continue; // malformed line
+        }
+        switch (entry.type) {
+            case "session": {
+                if (typeof entry.id === "string")
+                    sessionId = entry.id;
+                if (typeof entry.cwd === "string")
+                    cwd = entry.cwd;
+                if (typeof entry.parentSession === "string")
+                    parentSession = entry.parentSession;
+                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 : ""));
+                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 : ""));
+                break;
+            }
+            case "message": {
+                const msg = entry.message;
+                if (!msg)
+                    break;
+                if (msg.role === "assistant" && msg.usage && msg.provider && msg.model) {
+                    const usage = parseUsageAmount(msg.usage);
+                    if (usage) {
+                        messages.push({
+                            provider: msg.provider,
+                            model: msg.model,
+                            thinkingLevel,
+                            cost: usage.cost,
+                            input: usage.input,
+                            output: usage.output,
+                            cacheRead: usage.cacheRead,
+                            cacheWrite: usage.cacheWrite,
+                            timestamp: tsOf(msg.timestamp, entry.timestamp),
+                            reasoning: usage.reasoning,
+                            afterCompaction: compactionPending,
+                            source: "assistant",
+                        });
+                        compactionPending = false;
+                    }
                 }
+                break;
             }
-            files.push({
-                messages,
-                sessionId: f.sessionId ?? "",
-                cwd: f.cwd ?? "",
-                parentSession: f.parentSession ?? "",
-            });
+            default:
+                break;
         }
-        return { files, names };
     }
-    catch {
-        return null;
+    return { sessionId, cwd, parentSession, messages };
+}
+/** Collect usage across all session files. Empty array when none found. */
+export function collectUsage() {
+    const root = sessionsDir();
+    if (!root)
+        return [];
+    const files = [];
+    collectSessionFiles(root, files);
+    const out = [];
+    for (const f of files) {
+        const parsed = parseSessionFile(f);
+        if (parsed.messages.length > 0 || parsed.sessionId)
+            out.push(parsed);
+    }
+    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);
@@ -124,9 +240,9 @@ function fmtCost(n) {
 }
 /** Render a Markdown usage summary (today / this week / all time). */
 export function renderUsageSummary() {
-    const cache = loadUsageCache();
-    if (!cache) {
-        return "## Usage\n\nNo usage data found. Run `/usage` in the TUI first to build the usage cache.";
+    const files = collectUsage();
+    if (files.length === 0) {
+        return "## Usage\n\nNo usage data found yet.";
     }
     const now = Date.now();
     const todayStart = startOfDay(now);
@@ -135,7 +251,7 @@ export function renderUsageSummary() {
     const week = emptyTotals();
     const all = emptyTotals();
     const byModel = new Map();
-    for (const file of cache.files) {
+    for (const file of files) {
         for (const m of file.messages) {
             const t = m.timestamp;
             const targets = [all];
@@ -237,12 +353,15 @@ function periodStart(key, now) {
     return 0; // allTime
 }
 /**
- * Aggregate the cache into the structured payload the web panel renders.
- * Returns null when no cache exists yet.
+ * Aggregate collected session usage into the structured payload the web
+ * panel renders. Returns null when no usage data exists. When sessionId
+ * is given, only that session's usage is aggregated (scope: current
+ * session); otherwise all sessions.
  */
-export function buildUsageData() {
-    const cache = loadUsageCache();
-    if (!cache)
+export function buildUsageData(sessionId) {
+    const files = collectUsage();
+    const scoped = sessionId ? files.filter((f) => f.sessionId === sessionId) : files;
+    if (scoped.length === 0)
         return null;
     const now = Date.now();
     // per-tab accumulators
@@ -253,7 +372,7 @@ export function buildUsageData() {
     // hourly buckets (all providers, global) - the render side filters per tab
     const hourly = new Map();
     const hourStart = (ts) => Math.floor(ts / 3600_000) * 3600_000;
-    for (const file of cache.files) {
+    for (const file of scoped) {
         for (const m of file.messages) {
             const ts = m.timestamp;
             {
@@ -317,7 +436,7 @@ export function buildUsageData() {
             }
         }
     }
-    const payload = { tabs: {}, hourly: [], tabWindow: {}, collectedAt: usageCacheMtime() };
+    const payload = { tabs: {}, hourly: [], tabWindow: {}, collectedAt: sessionsStamp() };
     // 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).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-sdk-web",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Browser Web access for Pi (AI coding agent) via the Pi SDK - standalone module, zero modification to Pi itself",
   "type": "module",
   "bin": {
@@ -11,7 +11,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json && node -e \"require('node:fs').cpSync('../static', 'dist/static', { recursive: true }); require('node:fs').mkdirSync('dist/pi-bin', { recursive: true }); require('node:fs').renameSync('dist/pii-cli.js', 'dist/pi-bin/pii-cli.js'); require('node:fs').chmodSync('dist/pi-bin/pii-cli.js', 0o755); require('node:fs').cpSync('../pii/pii', 'dist/pi-bin/pii'); require('node:fs').cpSync('../server', 'dist/pi-bin/server', { recursive: true, filter: (s) => !s.includes('__pycache__') })\"",
+    "build": "tsc -p tsconfig.json && node -e \"require('node:fs').cpSync('../static', 'dist/static', { recursive: true }); require('node:fs').mkdirSync('dist/pi-bin', { recursive: true }); require('node:fs').chmodSync('dist/cli.js', 0o755); require('node:fs').renameSync('dist/pii-cli.js', 'dist/pi-bin/pii-cli.js'); require('node:fs').chmodSync('dist/pi-bin/pii-cli.js', 0o755); require('node:fs').cpSync('../pii/pii', 'dist/pi-bin/pii'); require('node:fs').cpSync('../server', 'dist/pi-bin/server', { recursive: true, filter: (s) => !s.includes('__pycache__') })\"",
     "dev": "tsx src/cli.ts",
     "verify": "tsx src/verify-sdk.ts",
     "prepublishOnly": "npm run build"