@raingor/pi-web-switch 0.4.0 → 0.4.2

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@raingor/pi-web-switch",
   "private": false,
-  "version": "0.4.0",
+  "version": "0.4.2",
   "type": "module",
-  "main": "dist-electron/main.js",
+  "main": "dist-electron/main/main.cjs",
   "description": "Web UI for pi coding agent — live configuration management, session browser, and memory viewer",
   "keywords": [
     "pi-package",
@@ -29,7 +29,8 @@
     "preview": "vite preview",
     "electron:dev": "node scripts/electron-dev.mjs",
     "electron:build": "tsc -b && vite build && vite build --config vite.electron.config.ts && vite build --config vite.preload.config.ts && electron-builder",
-    "electron:preview": "vite build && vite build --config vite.electron.config.ts && vite build --config vite.preload.config.ts && env -u ELECTRON_RUN_AS_NODE npx electron ."
+    "electron:preview": "vite build && vite build --config vite.electron.config.ts && vite build --config vite.preload.config.ts && env -u ELECTRON_RUN_AS_NODE npx electron .",
+    "tray:icon": "node scripts/generate-tray-icon.mjs"
   },
   "files": [
     "pi-package",
@@ -52,6 +53,10 @@
     ]
   },
   "dependencies": {
+    "@earendil-works/pi-agent-core": "^0.83.0",
+    "@earendil-works/pi-ai": "^0.83.0",
+    "@earendil-works/pi-coding-agent": "^0.83.0",
+    "@earendil-works/pi-tui": "^0.83.0",
     "lucide-react": "^0.487.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -85,8 +90,20 @@
       "dist-electron/**/*"
     ],
     "mac": {
-      "target": "dmg",
-      "icon": "build/icon.icns"
+      "target": [
+        {
+          "target": "dmg"
+        },
+        {
+          "target": "zip"
+        }
+      ],
+      "icon": "build/icon.icns",
+      "extendInfo": {
+        "LSMinimumSystemVersion": "11.0.0",
+        "CFBundleName": "pi-web-switch"
+      },
+      "category": "public.app-category.developer-tools"
     },
     "win": {
       "target": "nsis",

package/pi-package/index.ts

@@ -8,6 +8,7 @@ import { join, resolve, dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 
 const PI_SWITCH_DIR = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const PI_DIR = join(homedir(), ".pi", "agent");
 
 let serverProcess: ReturnType<typeof spawn> | null = null;
 
@@ -17,8 +18,188 @@ function getPackageManager(): "npm" | "pnpm" | "yarn" {
   return "npm";
 }
 
+// ─── Usage reader ────────────────────────────────────────
+// Reads ~/.pi/agent/sessions/*.jsonl directly and aggregates today / 7d stats,
+// so the user can see usage at a glance without launching the dashboard.
+
+interface UsageRecord {
+  date: string;
+  hour?: number;
+  providerId: string;
+  modelId: string;
+  inputTokens: number;
+  outputTokens: number;
+  cacheReadTokens: number;
+  cacheWriteTokens: number;
+  requests: number;
+  cost: number;
+}
+
+const CN_TZ = "Asia/Shanghai";
+
+function cnDateParts(ts: string | number): { date: string; hour: number } {
+  const d = new Date(ts);
+  if (isNaN(d.getTime())) return { date: "unknown", hour: 0 };
+  const date = new Intl.DateTimeFormat("en-CA", {
+    timeZone: CN_TZ,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).format(d);
+  const hour = Number(
+    new Intl.DateTimeFormat("en-US", {
+      timeZone: CN_TZ,
+      hour: "2-digit",
+      hour12: false,
+    }).format(d)
+  );
+  return { date, hour: hour === 24 ? 0 : hour };
+}
+
+function parseSessionFile(filePath: string): UsageRecord[] {
+  const records: UsageRecord[] = [];
+  try {
+    const raw = readFileSync(filePath, "utf-8");
+    const lines = raw.split("\n").filter((l) => l.trim());
+
+    let currentProvider = "unknown";
+    let currentModel = "unknown";
+
+    for (const line of lines) {
+      try {
+        const obj = JSON.parse(line);
+        const type = obj.type;
+
+        if (type === "model_change") {
+          currentProvider = obj.provider || currentProvider;
+          currentModel = obj.modelId || currentModel;
+          continue;
+        }
+
+        if (type === "message" && obj.message?.role === "assistant") {
+          const usage = obj.message.usage;
+          if (!usage || !usage.input) continue;
+
+          const timestamp = obj.timestamp || obj.message.timestamp;
+          const { date, hour } = cnDateParts(timestamp);
+
+          records.push({
+            date,
+            hour,
+            providerId: obj.message.provider || currentProvider,
+            modelId: obj.message.model || currentModel,
+            inputTokens: usage.input ?? 0,
+            outputTokens: usage.output ?? 0,
+            cacheReadTokens: usage.cacheRead ?? 0,
+            cacheWriteTokens: usage.cacheWrite ?? 0,
+            requests: 1,
+            cost: usage.cost?.total ?? 0,
+          });
+        }
+      } catch {
+        // skip malformed lines
+      }
+    }
+  } catch {
+    // skip unreadable files
+  }
+  return records;
+}
+
+function readAllUsage(): UsageRecord[] {
+  const sessionsPath = join(PI_DIR, "sessions");
+  const { readdirSync, existsSync: exists, statSync } = require("node:fs");
+  if (!exists(sessionsPath)) return [];
+
+  const dirs = readdirSync(sessionsPath)
+    .filter((name: string) => name.startsWith("--"))
+    .map((name: string) => join(sessionsPath, name))
+    .filter((dir: string) => statSync(dir).isDirectory());
+
+  const allRecords: UsageRecord[] = [];
+  for (const dir of dirs) {
+    try {
+      const files = readdirSync(dir).filter((f: string) => f.endsWith(".jsonl"));
+      for (const file of files) {
+        const records = parseSessionFile(join(dir, file));
+        allRecords.push(...records);
+      }
+    } catch {
+      // skip unreadable directories
+    }
+  }
+  return allRecords;
+}
+
+function aggregateSummary() {
+  const records = readAllUsage();
+  // pi-reader buckets dates in Asia/Shanghai (CN_TZ); use the same timezone
+  // so "today" lines up with the session data around midnight UTC.
+  const cnDate = (d: Date) =>
+    new Intl.DateTimeFormat("en-CA", {
+      timeZone: "Asia/Shanghai",
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    }).format(d);
+  const today = cnDate(new Date());
+  const sevenDaysAgo = cnDate(new Date(Date.now() - 6 * 24 * 60 * 60 * 1000));
+
+  const todayRecs = records.filter((r) => r.date === today);
+  const sevenDayRecs = records.filter((r) => r.date >= sevenDaysAgo);
+
+  const sum = (recs: UsageRecord[]) => {
+    let tokens = 0,
+      cost = 0,
+      requests = 0;
+    for (const r of recs) {
+      tokens += r.inputTokens + r.outputTokens + r.cacheReadTokens + r.cacheWriteTokens;
+      cost += r.cost;
+      requests += r.requests;
+    }
+    return { tokens, cost, requests };
+  };
+
+  // Per-day breakdown for last 7 days
+  const dailyMap = new Map<string, { tokens: number; cost: number; requests: number }>();
+  for (const r of sevenDayRecs) {
+    const d = dailyMap.get(r.date) ?? { tokens: 0, cost: 0, requests: 0 };
+    d.tokens += r.inputTokens + r.outputTokens + r.cacheReadTokens + r.cacheWriteTokens;
+    d.cost += r.cost;
+    d.requests += r.requests;
+    dailyMap.set(r.date, d);
+  }
+  const daily = Array.from(dailyMap.entries())
+    .map(([date, v]) => ({ date, ...v }))
+    .sort((a, b) => a.date.localeCompare(b.date));
+
+  return {
+    today: sum(todayRecs),
+    sevenDays: sum(sevenDayRecs),
+    daily,
+  };
+}
+
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(2)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return n.toLocaleString();
+}
+
+function formatCost(n: number): string {
+  if (n === 0) return "$0.00";
+  if (n < 0.01) return `$${n.toFixed(4)}`;
+  return `$${n.toFixed(2)}`;
+}
+
+function shortDate(iso: string): string {
+  const parts = iso.split("-");
+  if (parts.length !== 3) return iso;
+  return `${parts[1]}/${parts[2]}`;
+}
+
 export default function (api: ExtensionAPI, ctx: ExtensionContext) {
-  // Register a command to start/stop the web UI
+  // /pi-switch start|stop|status — launch the dashboard web UI
   api.registerCommand({
     name: "pi-switch",
     description: "Start or stop the pi-web-switch dashboard",
@@ -41,7 +222,7 @@ export default function (api: ExtensionAPI, ctx: ExtensionContext) {
           return ctx.say(
             <Box borderStyle="round" borderColor="yellow" paddingLeft={1} paddingRight={1}>
               <Text>pi-web-switch is not running.</Text>
-              <Text>Use `/pi-web-switch start` to launch the dashboard.</Text>
+              <Text>Use `/pi-switch start` to launch the dashboard.</Text>
             </Box>
           );
         }
@@ -84,14 +265,57 @@ export default function (api: ExtensionAPI, ctx: ExtensionContext) {
 
         serverProcess.unref();
 
-        // Wait a moment then check
         await new Promise((r) => setTimeout(r, 2000));
 
         return ctx.say(
           <Box borderStyle="round" borderColor="green" paddingLeft={1} paddingRight={1}>
             <Text>pi-web-switch started!</Text>
             <Text>Dashboard: http://localhost:{port}</Text>
-            <Text>Use `/pi-web-switch stop` to stop the server.</Text>
+            <Text>Use `/pi-switch stop` to stop the server.</Text>
+          </Box>
+        );
+      }
+    },
+  });
+
+  // /pi-usage — quick usage summary (today + 7d) in the terminal
+  api.registerCommand({
+    name: "pi-usage",
+    description: "Show pi usage summary (today / 7 days) without launching the dashboard",
+    params: Type.Object({}),
+    execute: async () => {
+      try {
+        const s = aggregateSummary();
+        const spark = s.daily
+          .map((d) => {
+            const max = Math.max(1, ...s.daily.map((x) => x.tokens));
+            const bars = Math.round((d.tokens / max) * 8);
+            return `${shortDate(d.date)} ${"█".repeat(bars)}${"░".repeat(8 - bars)} ${formatTokens(d.tokens)}`;
+          })
+          .join("\n");
+
+        return ctx.say(
+          <Box borderStyle="round" borderColor="green" paddingLeft={1} paddingRight={1}>
+            <Text bold>📊 pi usage summary</Text>
+            <Text> </Text>
+            <Text bold>Today ({new Date().toISOString().slice(0, 10)})</Text>
+            <Text>  Tokens:   {formatTokens(s.today.tokens)}</Text>
+            <Text>  Cost:     {formatCost(s.today.cost)}</Text>
+            <Text>  Requests: {s.today.requests}</Text>
+            <Text> </Text>
+            <Text bold>Last 7 days</Text>
+            <Text>  Tokens:   {formatTokens(s.sevenDays.tokens)}</Text>
+            <Text>  Cost:     {formatCost(s.sevenDays.cost)}</Text>
+            <Text>  Requests: {s.sevenDays.requests}</Text>
+            <Text> </Text>
+            <Text bold>Daily trend</Text>
+            <Text>{spark}</Text>
+          </Box>
+        );
+      } catch (err) {
+        return ctx.say(
+          <Box borderStyle="round" borderColor="red" paddingLeft={1} paddingRight={1}>
+            <Text>Failed to read usage: {String(err)}</Text>
           </Box>
         );
       }

package/public/pi.svg

@@ -1,47 +1,12 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" fill="none">
   <defs>
-    <!-- Brand blue diagonal gradient -->
-    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#6ba6fb"/>
-      <stop offset="0.5" stop-color="#2563eb"/>
-      <stop offset="1" stop-color="#1e40af"/>
+    <linearGradient id="bg" x1="0" y1="0" x2="0.3" y2="1">
+      <stop offset="0" stop-color="#3b82f6"/>
+      <stop offset="1" stop-color="#1d4ed8"/>
     </linearGradient>
-    <!-- Soft top gloss for a tactile, premium feel -->
-    <linearGradient id="gloss" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#ffffff" stop-opacity="0.28"/>
-      <stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
-    </linearGradient>
-    <!-- Subtle vertical shading on the pi glyph -->
-    <linearGradient id="piGrad" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#ffffff"/>
-      <stop offset="1" stop-color="#d9e6ff"/>
-    </linearGradient>
-    <!-- Toggle knob highlight -->
-    <radialGradient id="knob" cx="0.35" cy="0.3" r="0.85">
-      <stop offset="0" stop-color="#ffffff"/>
-      <stop offset="1" stop-color="#cdd9f2"/>
-    </radialGradient>
-    <filter id="softShadow" x="-30%" y="-30%" width="160%" height="160%">
-      <feDropShadow dx="0" dy="7" stdDeviation="11" flood-color="#0a2a6b" flood-opacity="0.38"/>
-    </filter>
-    <filter id="knobShadow" x="-60%" y="-60%" width="220%" height="220%">
-      <feDropShadow dx="0" dy="3" stdDeviation="5" flood-color="#0a2a6b" flood-opacity="0.35"/>
-    </filter>
   </defs>
-
-  <!-- Squircle background -->
-  <rect x="0" y="0" width="512" height="512" rx="115" fill="url(#bg)"/>
-  <!-- Top gloss highlight -->
-  <rect x="0" y="0" width="512" height="250" rx="115" fill="url(#gloss)"/>
-
-  <!-- Toggle switch track (behind the pi) -->
-  <rect x="92" y="217" width="328" height="78" rx="39" fill="#ffffff" opacity="0.20"/>
-  <rect x="92" y="217" width="328" height="78" rx="39" fill="none" stroke="#ffffff" stroke-opacity="0.25" stroke-width="2"/>
-  <!-- Toggle knob in the "on" position -->
-  <circle cx="378" cy="256" r="30" fill="url(#knob)" filter="url(#knobShadow)"/>
-
-  <!-- Pi glyph -->
-  <text x="256" y="256" text-anchor="middle" dominant-baseline="central"
+  <rect x="0" y="0" width="512" height="512" rx="113" fill="url(#bg)"/>
+  <text x="256" y="270" text-anchor="middle" dominant-baseline="central"
         font-family="-apple-system, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
-        font-size="258" font-weight="700" fill="url(#piGrad)" filter="url(#softShadow)">π</text>
+        font-size="240" font-weight="500" fill="#ffffff">π</text>
 </svg>

package/public/sw.js

@@ -1,14 +1,20 @@
 // ─── pi-web-switch Service Worker ───────────────────────
-// Cache-first for static assets, network-first for API calls.
-// Bump CACHE_VERSION to invalidate old caches on deploy.
+// Strategy:
+//   - HTML navigation (index.html / SPA routes): NETWORK-FIRST.
+//     Every refresh must hit the network so deploys show up on a plain
+//     Cmd+R reload; the cached copy is only a fallback for offline use.
+//   - Static assets (hashed js/css): CACHE-FIRST — safe because Vite
+//     fingerprints filenames, so a new deploy means new URLs.
+//   - API calls: NETWORK-FIRST, fallback to cache.
+// Bump CACHE_VERSION when the SW logic changes to purge old caches.
 
-const CACHE_VERSION = "pi-web-switch-v1";
+const CACHE_VERSION = "pi-web-switch-v2";
 const STATIC_CACHE = `${CACHE_VERSION}-static`;
 const RUNTIME_CACHE = `${CACHE_VERSION}-runtime`;
 
+// NOTE: index.html is intentionally NOT precached. Pre-caching it would
+// make Cmd+R reloads serve the stale page after a deploy.
 const PRECACHE_URLS = [
-  "/",
-  "/index.html",
   "/manifest.webmanifest",
   "/icon-192.png",
   "/icon-512.png",
@@ -64,6 +70,23 @@ self.addEventListener("fetch", (event) => {
     return;
   }
 
+  // HTML navigation: network-first so a plain refresh always gets the
+  // latest build. Fall back to the last cached copy only when offline.
+  if (request.mode === "navigate") {
+    event.respondWith(
+      fetch(request)
+        .then((response) => {
+          if (response && response.status === 200 && response.type === "basic") {
+            const copy = response.clone();
+            caches.open(RUNTIME_CACHE).then((cache) => cache.put("/index.html", copy));
+          }
+          return response;
+        })
+        .catch(() => caches.match("/index.html"))
+    );
+    return;
+  }
+
   // Static assets: cache-first, then network (and cache the result).
   event.respondWith(
     caches.match(request).then((cached) => {