@maxiaochao/pi-toolkit 0.2.2 → 0.2.4

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 2026-09-09 - v0.2.4
+
+- fix cache export: hover tooltips now work across segment breaks; context segments also break on model changes; add headless-browser e2e tests
+
+## 2026-09-08 - v0.2.3
+
+- add cache export Context segment views
+
 ## 2026-09-03 - v0.2.2
 
 - let the focused `/btw` overlay scroll its full transcript with Up/Down and PageUp/PageDown
@@ -51,7 +59,11 @@
 
 - tbd
 
-# Changelog
+## Unreleased
+
+- let `/cache_export` switch between all history and individual compaction-defined Context segments, defaulting to the latest segment; cache-hit cumulative lines reset at compaction or model boundaries
+- add the independent `@maxiaochao/pi-codex-edit` package with model-aware Codex-style `apply_patch`
+- include the benchmark summary and interactive HTML architecture explainer
 
 ## 2026-08-18 - v0.1.0
 

package/README.md

@@ -40,6 +40,8 @@ bash scripts/install.sh
 
 The `/btw` side chat is a separate agent session. It can inspect the main conversation and repository, and its thread stays out of the main context until you close it and choose to inject a summary. Use `/btw` to open it or `/btw <question>` to ask directly. While the BTW overlay has focus, use `Up` / `Down` to scroll its transcript one line at a time and `PageUp` / `PageDown` to move by one transcript page.
 
+Use `/cache_export [path]` to write an interactive per-request cache dashboard. It defaults to the latest Context segment for current-state diagnosis, and the View selector can show any earlier segment or all session history. Compaction and model changes both break context charts into segments; cache-hit accumulation also resets at model changes, while TTL and other inferred interruptions remain diagnostic events rather than segment boundaries.
+
 The bundled `nightowl` theme is available to Pi through the package manifest and is selected automatically on npm installation only when no theme is already configured.
 
 The bundled `web-browser` skill provides reusable scripts for starting Chrome/Chromium with remote debugging, navigating tabs, evaluating JavaScript, emulating devices, taking screenshots, dismissing cookie dialogs, and inspecting browser logs. It auto-detects common Chrome/Chromium installations on macOS and Linux, including Windows Chrome when Pi runs under WSL; set `BROWSER_BIN` when the binary is elsewhere.
@@ -68,6 +70,22 @@ pi update npm:@maxiaochao/pi-tiny-subagent
 
 See [packages/tiny-subagent/README.md](packages/tiny-subagent/README.md) for personas, model selection, child isolation, live transcript rendering, and diagnostics.
 
+## Codex Edit
+
+The Codex edit package is a separate npm package. Install it when you want GPT/Codex models to use the freeform `apply_patch` protocol while other models keep Pi's native `edit` tool:
+
+```bash
+pi install npm:@maxiaochao/pi-codex-edit
+```
+
+It includes the extension implementation plus the benchmark summary and interactive architecture explainer. Its versions, release workflow, and tag are independent from the root package and tiny subagent:
+
+```bash
+pi update npm:@maxiaochao/pi-codex-edit
+```
+
+See [packages/codex-edit/README.md](packages/codex-edit/README.md) for the routing rules and [packages/codex-edit/summary.md](packages/codex-edit/summary.md) for the measured tradeoffs.
+
 ## Development
 
 Repository development and release rules are documented in [AGENTS.md](AGENTS.md).

package/extensions/cache-export/index.ts

@@ -61,7 +61,7 @@ function defaultOutputPath(ctx) {
 
 export default function (pi) {
   pi.registerCommand("cache_export", {
-    description: "Export a tau-style interactive cache dashboard (hit-rate charts, per-request table, events)",
+    description: "Export an interactive cache dashboard (latest Context segment by default, all-history switch, per-request charts)",
     handler: async (args, ctx) => {
       const sessionManager = ctx.sessionManager;
       const entries = typeof sessionManager.getBranch === "function"

package/extensions/cache-export/render.ts

@@ -71,10 +71,12 @@ export function parseEntries(entries) {
     }
 
     // pi stores tool calls inside assistant content blocks
+    const calledTools = [];
     for (const blk of m.content || []) {
       if (blk && typeof blk === "object" && blk.type === "toolCall") {
         const name = blk.tool || blk.name || "?";
         toolCounts[name] = (toolCounts[name] || 0) + 1;
+        calledTools.push(name);
       }
     }
 
@@ -129,6 +131,7 @@ export function parseEntries(entries) {
       stopReason: m.stopReason || "",
       estimatedCost: cost,
       gapTools,
+      calledTools,
       prevOutput: requests.length ? requests[requests.length - 1].output : 0,
     });
     gapTools = [];
@@ -184,11 +187,12 @@ const fmtPct1 = (x) => (x * 100).toFixed(1) + "%";
 // ---------------------------------------------------------------------------
 
 function lineChart(title, series, opts = {}) {
-  const { yMax = null, percent = false, timestamps = null, events = [] } = opts;
+  const { yMax = null, percent = false, timestamps = null, events = [], breakBefore = [], requestNumbers = null } = opts;
   const width = 900, height = 330, left = 68, right = 20, top = 42, bottom = 52;
   const plotWidth = width - left - right, plotHeight = height - top - bottom;
   const count = Math.max(0, ...series.map(([, v]) => v.length));
-  const observedMax = Math.max(0, ...series.map(([, v]) => Math.max(0, ...v)));
+  const observedMax = Math.max(0, ...series.flatMap(([, values]) => values.filter(Number.isFinite)));
+  const breaks = new Set(breakBefore);
   let maximum = yMax || Math.max(observedMax, 1);
   if (!percent) {
     const magnitude = 10 ** Math.max(0, String(Math.trunc(maximum)).length - 1);
@@ -217,7 +221,7 @@ function lineChart(title, series, opts = {}) {
   for (let index = 0; index < count; index++) {
     if (count <= 20 || index % Math.max(1, Math.trunc(count / 12)) === 0 || index === count - 1) {
       const [x] = point(index, 0);
-      parts.push(`<text class="tick" x="${x.toFixed(1)}" y="${height - 22}" text-anchor="middle">${index + 1}</text>`);
+      parts.push(`<text class="tick" x="${x.toFixed(1)}" y="${height - 22}" text-anchor="middle">${requestNumbers?.[index] ?? index + 1}</text>`);
     }
   }
   parts.push(
@@ -240,11 +244,31 @@ function lineChart(title, series, opts = {}) {
     });
   series.forEach(([name, values], seriesIndex) => {
     const [dark, light] = seriesColor(name);
-    const points = values.map((value, i) => point(i, value).map((c) => c.toFixed(1)).join(",")).join(" ");
-    const labels = values.map((v) => (percent ? `${(v * 100).toFixed(1)}%` : fmtInt(Math.trunc(v)))).join("|");
+    const runs = [];
+    let run = [];
+    values.forEach((value, i) => {
+      if (breaks.has(i) || !Number.isFinite(value)) {
+        if (run.length) runs.push(run);
+        run = [];
+      }
+      if (Number.isFinite(value)) run.push(point(i, value).map((c) => c.toFixed(1)).join(","));
+    });
+    if (run.length) runs.push(run);
+    const broken = runs.map((points) =>
+      `<polyline class="series-line" data-dark="${dark}" data-light="${light}" points="${points.join(" ")}" fill="none" stroke="${dark}" stroke-width="3"/>`,
+    ).join("");
+    // tau's tooltip script reads `series.querySelector(".series-line").points.getItem(i)`,
+    // which returns only the FIRST polyline; with break splits that one is short and
+    // getItem(i) throws IndexSizeError past the first run, killing the tooltip. Keep a
+    // hidden full-coverage `.series-line` first in the group so the tooltip works at
+    // every index while the visible broken polylines still draw the gaps.
+    const full = `<polyline class="series-line" data-dark="${dark}" data-light="${light}" visibility="hidden" fill="none" stroke="${dark}" stroke-width="3" ` +
+      `points="${values.map((v, i) => point(i, Number.isFinite(v) ? v : 0).map((c) => c.toFixed(1)).join(",")).join(" ")}"/>`;
+    const labels = values.map((v) => !Number.isFinite(v) ? "N/A" : (percent ? `${(v * 100).toFixed(1)}%` : fmtInt(Math.trunc(v)))).join("|");
     parts.push(
       `<g class="series" data-series-id="${seriesIndex}" data-name="${esc(name, true)}" data-labels="${esc(labels, true)}">` +
-        `<polyline class="series-line" data-dark="${dark}" data-light="${light}" points="${points}" fill="none" stroke="${dark}" stroke-width="3"/>` +
+        full +
+        broken +
         `<circle class="hover-point" data-dark="${dark}" data-light="${light}" r="5" fill="${dark}" visibility="hidden"/></g>`,
     );
   });
@@ -488,60 +512,121 @@ function renderMissPanel(miss) {
 // render_usage_dashboard port
 // ---------------------------------------------------------------------------
 
-export function renderDashboard(data) {
-  const { requests, events, toolCalls, compactions } = data;
-  if (!requests.length) {
-    return `<p class="empty">No assistant responses with token usage were found in this session.</p>`;
+export function buildContextSegments(requests, events) {
+  const starts = new Set(events
+    .filter((event) => (event.kind === "compaction" || event.kind === "model") && event.requestNumber >= 1 && event.requestNumber <= requests.length)
+    .map((event) => event.requestNumber));
+  const segments = [];
+  let start = 0;
+  for (let index = 1; index < requests.length; index++) {
+    if (!starts.has(requests[index].number)) continue;
+    segments.push({ number: segments.length + 1, requests: requests.slice(start, index) });
+    start = index;
   }
+  segments.push({ number: segments.length + 1, requests: requests.slice(start) });
+  return segments;
+}
 
+function countToolCalls(requests) {
+  const counts = new Map();
+  for (const request of requests) {
+    for (const name of request.calledTools || []) counts.set(name, (counts.get(name) || 0) + 1);
+  }
+  return [...counts.entries()].sort((a, b) => b[1] - a[1]);
+}
+
+function eventsForRequests(events, requests) {
+  if (!requests.length) return [];
+  const from = requests[0].number;
+  const to = requests[requests.length - 1].number;
+  return events.filter((event) => event.requestNumber >= from && event.requestNumber <= to);
+}
+
+function chartEvents(events, requests) {
+  if (!requests.length) return [];
+  const first = requests[0].number;
+  return events.map((event) => ({ ...event, requestNumber: event.requestNumber - first + 1 }));
+}
+
+function renderDashboardView(requests, events, toolCalls, compactions, scopeLabel) {
   const timestamps = requests.map((r) => r.timestamp);
+  const requestNumbers = requests.map((r) => r.number);
   const cached = requests.map((r) => r.cached);
   const cacheWrites = requests.map((r) => r.cacheWrite);
   const fresh = requests.map((r) => r.fresh);
   const outputs = requests.map((r) => r.output);
   const reasoning = requests.map((r) => r.reasoning);
   const rates = requests.map((r) => (r.fresh + r.cached + r.cacheWrite > 0 ? r.cached / (r.fresh + r.cached + r.cacheWrite) : 0));
+  const contextBreakBefore = new Set();
+  const cacheBreakBefore = new Set();
+  const resetBefore = new Set(events
+    .filter((event) => event.kind === "compaction" || event.kind === "model")
+    .map((event) => event.requestNumber));
   const cumulativeRates = [];
   let runCached = 0, runPrompt = 0;
-  for (const r of requests) {
+  let previousKey = null;
+  let cacheWindows = 1;
+  let currentWindowStart = 0;
+  for (let index = 0; index < requests.length; index++) {
+    const r = requests[index];
+    const key = `${r.provider}/${r.model}`;
+    const contextReset = index > 0 && events.some((event) => (event.kind === "compaction" || event.kind === "model") && event.requestNumber === r.number);
+    const cacheReset = index > 0 && (resetBefore.has(r.number) || (previousKey !== null && key !== previousKey));
+    if (contextReset) contextBreakBefore.add(index);
+    if (cacheReset) {
+      cacheBreakBefore.add(index);
+      cacheWindows += 1;
+      currentWindowStart = index;
+      runCached = 0;
+      runPrompt = 0;
+    }
     runCached += r.cached;
     runPrompt += r.fresh + r.cached + r.cacheWrite;
     cumulativeRates.push(runPrompt > 0 ? runCached / runPrompt : 0);
+    previousKey = key;
   }
 
   const tot = (f) => requests.reduce((s, r) => s + f(r), 0);
   const totalFresh = tot((r) => r.fresh), totalCached = tot((r) => r.cached),
     totalWrite = tot((r) => r.cacheWrite), totalPrompt = totalFresh + totalCached + totalWrite,
     totalOutput = tot((r) => r.output);
-
   const cacheHitRate = totalPrompt > 0 && (totalCached > 0 || totalWrite > 0) ? totalCached / totalPrompt : null;
+  const windowRequests = requests.slice(currentWindowStart);
+  const windowPrompt = windowRequests.reduce((sum, r) => sum + r.fresh + r.cached + r.cacheWrite, 0);
+  const windowCached = windowRequests.reduce((sum, r) => sum + r.cached, 0);
+  const windowHitRate = windowPrompt > 0 && (windowCached > 0 || windowRequests.some((r) => r.cacheWrite > 0))
+    ? windowCached / windowPrompt
+    : null;
 
   const cards = [
+    ["Scope", scopeLabel],
     ["Model requests", fmtInt(requests.length)],
-    ["Cache hit rate", cacheHitRate !== null ? fmtPct1(cacheHitRate) : "N/A"],
+    ["View cache hit rate", cacheHitRate !== null ? fmtPct1(cacheHitRate) : "N/A"],
+    ["Latest cache window", `#${cacheWindows} · ${windowHitRate !== null ? fmtPct1(windowHitRate) : "N/A"}`],
     ["Cached input", fmtInt(totalCached)],
     ["Reported cache writes", fmtInt(totalWrite)],
     ["Fresh input", fmtInt(totalFresh)],
     ["Total prompt input", fmtInt(totalPrompt)],
     ["Output tokens", fmtInt(totalOutput)],
-    ["Compactions", String(compactions)],
+    ["Compactions in view", String(compactions)],
   ];
   const cardsHtml = cards
     .map(([l, v]) => `<div class="usage-card"><span>${esc(l)}</span><strong>${esc(v)}</strong></div>`)
     .join("");
 
+  const eventMarkers = chartEvents(events, requests);
   const charts = [
     figure(lineChart("Prompt input by request",
       [["cached", cached], ["cache writes", cacheWrites], ["fresh", fresh]],
-      { timestamps, events })),
+      { timestamps, requestNumbers, events: eventMarkers, breakBefore: contextBreakBefore })),
   ];
   if (cacheHitRate !== null) {
     charts.push(figure(lineChart("Cache hit rate",
       [["request", rates], ["cumulative", cumulativeRates]],
-      { yMax: 1.0, percent: true, timestamps })));
+      { yMax: 1.0, percent: true, timestamps, requestNumbers, events: eventMarkers, breakBefore: cacheBreakBefore })));
   }
   charts.push(figure(lineChart("Output and reasoning tokens",
-    [["output", outputs], ["reasoning", reasoning]], { timestamps })));
+    [["output", outputs], ["reasoning", reasoning]], { timestamps, requestNumbers, events: eventMarkers, breakBefore: contextBreakBefore })));
 
   const showHit = cacheHitRate !== null;
   const rows = requests
@@ -561,9 +646,8 @@ export function renderDashboard(data) {
 
   return (
     `<div class="usage-cards">${cardsHtml}</div>` +
-    `<p class="usage-note">Hover a request for exact values, ` +
-    `select a legend item to hide a series, and use PNG to save a chart. Event markers show ` +
-    `compactions, model or thinking changes. Some providers report cache reads but not cache writes.</p>` +
+    `<p class="usage-note">Prompt and output lines break at a Context segment boundary (compaction or model change). Cache-window cumulative hit rate also resets at a model change. ` +
+    `TTL and service interruptions are shown only when recorded or inferred by the miss analysis; they do not create a Context segment.</p>` +
     `<div class="usage-charts">${charts.join("")}</div>` +
     renderMissPanel(analyzeMisses(requests, events)) +
     renderStreakPanel(analyzeStreaks(requests, events)) +
@@ -577,6 +661,48 @@ export function renderDashboard(data) {
   );
 }
 
+export function renderDashboard(data) {
+  const { requests, events, toolCalls, compactions } = data;
+  if (!requests.length) {
+    return `<p class="empty">No assistant responses with token usage were found in this session.</p>`;
+  }
+
+  const segments = buildContextSegments(requests, events);
+  const latest = segments[segments.length - 1];
+  const allView = renderDashboardView(requests, events, toolCalls, compactions, `All ${segments.length} context segment${segments.length === 1 ? "" : "s"}`);
+  const segmentViews = segments.map((segment) => {
+    const segmentEvents = eventsForRequests(events, segment.requests);
+    const startsWithCompaction = segmentEvents.some((event) => event.kind === "compaction" && event.requestNumber === segment.requests[0].number);
+    const first = segment.requests[0];
+    const model = first ? `${first.provider}/${first.model}` : "";
+    const label = `Context segment ${segment.number}${model ? ` · ${model}` : ""}${segment.number === latest.number ? " (latest)" : ""}`;
+    return {
+      id: `segment-${segment.number}`,
+      label,
+      html: renderDashboardView(
+        segment.requests,
+        segmentEvents,
+        countToolCalls(segment.requests),
+        startsWithCompaction ? 1 : 0,
+        label,
+      ),
+    };
+  });
+  const options = [
+    `<option value="all">All context segments</option>`,
+    ...segmentViews.map((view) => `<option value="${view.id}"${view.id === `segment-${latest.number}` ? " selected" : ""}>${esc(view.label)}</option>`),
+  ].join("");
+  const views = [
+    `<section class="usage-context-view" data-context-view="all" hidden>${allView}</section>`,
+    ...segmentViews.map((view) => `<section class="usage-context-view" data-context-view="${view.id}"${view.id === `segment-${latest.number}` ? "" : " hidden"}>${view.html}</section>`),
+  ].join("");
+
+  return `<div class="usage-view-controls"><label for="context-segment-select">View</label>` +
+    `<select id="context-segment-select" data-context-segment-select>${options}</select>` +
+    `<span>Default: latest Context segment. All-history values remain available; cache metrics reset where compaction rewrites the prefix or the model changes.</span></div>` +
+    views;
+}
+
 // ---------------------------------------------------------------------------
 // Full page
 // ---------------------------------------------------------------------------
@@ -602,6 +728,10 @@ main { max-width: 1080px; margin: 0 auto; padding: 40px 24px 80px; }
 h1 { color: var(--bright); font-size: 1.6rem; font-weight: 500; margin: 6px 0 4px; }
 .sub { color: var(--muted); font-size: .78rem; margin: 0 0 30px; }
 .usage-shell { margin-top: 18px; }
+.usage-view-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 12px; margin-bottom: 18px; color: var(--muted); font-size: .78rem; }
+.usage-view-controls label { color: var(--bright); }
+.usage-view-controls select { background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--text); font: inherit; padding: 5px 8px; }
+.usage-context-view[hidden] { display: none; }
 /* keep hover points visible on dark page chrome for both chart palettes */
 .hover-point { stroke: #ffffff; stroke-width: 2; }
 ${USAGE_STYLES}
@@ -611,6 +741,15 @@ ${USAGE_STYLES}
 <h1>${esc(title)}</h1>
 <p class="sub">tau-style dashboard rendered by pi-cache-dashboard · ${n} requests · times in ${esc(tzLabel())}${opts.sessionId ? " · session " + esc(opts.sessionId) : ""}</p>
 <section class="usage-shell" id="panel-usage">${renderDashboard(data)}</section>
-<script>${USAGE_SCRIPT}</script>
+<script>${USAGE_SCRIPT}
+for (const select of document.querySelectorAll("[data-context-segment-select]")) {
+  const shell = select.closest(".usage-shell");
+  const show = () => shell.querySelectorAll("[data-context-view]").forEach((view) => {
+    view.hidden = view.dataset.contextView !== select.value;
+  });
+  select.addEventListener("change", show);
+  show();
+}
+</script>
 </main></body></html>`;
 }

package/extensions/cache-export/tests/e2e-browser.mjs

@@ -0,0 +1,295 @@
+// Real-browser end-to-end test for the cache dashboard.
+// Drives actual pointer events in headless Chromium via raw CDP (Node 22
+// built-ins only: fetch + WebSocket) and asserts the hover tooltip keeps
+// working across polyline break boundaries and inside segment views.
+//
+// Chrome discovery mirrors the web-browser skill (BROWSER_BIN, common Linux
+// paths, Playwright cache, WSL Windows Chrome). If no browser is found the
+// test prints SKIP and exits 0 so CI without Chrome still passes; if a
+// browser IS found, failing assertions exit 1.
+//
+// Run: node tests/e2e-browser.mjs        (from extensions/cache-export)
+
+import { spawn, execFileSync } from "node:child_process";
+import { existsSync, mkdtempSync, readdirSync, rmSync } from "node:fs";
+import net from "node:net";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { parseEntries, buildCacheExportHtml } from "../render.ts";
+
+let pass = 0, fail = 0, skipped = 0;
+function check(name, cond, detail = "") {
+  if (cond) { pass++; console.log(`  PASS ${name}`); }
+  else { fail++; console.log(`  FAIL ${name} ${detail}`); }
+}
+
+// --- Chrome discovery (mirrors the web-browser skill) ---------------------
+
+const IS_WSL = Boolean(process.env.WSL_DISTRO_NAME || process.env.WSL_INTEROP);
+
+function commandOutput(command, args) {
+  return execFileSync(command, args, { encoding: "utf8" }).trim();
+}
+
+function findChrome() {
+  if (process.env.BROWSER_BIN && existsSync(process.env.BROWSER_BIN)) return process.env.BROWSER_BIN;
+  // Prefer Linux binaries (also run fine under WSL2 and CI). Windows Chrome is
+  // a last resort: its launch interacts with any already-running Chrome
+  // singleton and can silently skip binding the debugging port.
+  const candidates = [
+    "/usr/bin/google-chrome", "/usr/bin/google-chrome-stable",
+    "/usr/bin/chromium", "/usr/bin/chromium-browser",
+  ];
+  for (const p of candidates) if (existsSync(p)) return p;
+  // Playwright-managed Chromium builds
+  const pwRoot = join(process.env.HOME || tmpdir(), ".cache", "ms-playwright");
+  if (existsSync(pwRoot)) {
+    for (const dir of readdirSync(pwRoot)) {
+      const p = join(pwRoot, dir, "chrome-linux", "chrome");
+      if (existsSync(p)) return p;
+    }
+  }
+  for (const p of [
+    "/mnt/c/Program Files/Google/Chrome/Application/chrome.exe",
+    "/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe",
+  ]) if (existsSync(p)) return p;
+  return null;
+}
+
+// --- tiny CDP client ------------------------------------------------------
+
+async function cdpConnect(wsUrl, timeoutMs = 5000) {
+  const ws = new WebSocket(wsUrl);
+  const pending = new Map();
+  let nextId = 1;
+  await new Promise((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error("ws connect timeout")), timeoutMs);
+    ws.onopen = () => { clearTimeout(timer); resolve(); };
+    ws.onerror = () => { clearTimeout(timer); reject(new Error("ws connect error")); };
+  });
+  ws.onmessage = (event) => {
+    const msg = JSON.parse(event.data);
+    if (msg.id && pending.has(msg.id)) {
+      const { resolve, reject } = pending.get(msg.id);
+      pending.delete(msg.id);
+      if (msg.error) reject(new Error(msg.error.message));
+      else resolve(msg.result);
+    }
+  };
+  return {
+    send(method, params = {}) {
+      const id = nextId++;
+      return new Promise((resolve, reject) => {
+        pending.set(id, { resolve, reject });
+        ws.send(JSON.stringify({ id, method, params }));
+      });
+    },
+    close() { ws.close(); },
+  };
+}
+
+function freePort() {
+  return new Promise((resolve) => {
+    const srv = net.createServer();
+    srv.listen(0, "127.0.0.1", () => {
+      const port = srv.address().port;
+      srv.close(() => resolve(port));
+    });
+  });
+}
+
+async function waitForEndpoint(port, timeoutMs = 15000) {
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    try {
+      const resp = await fetch(`http://127.0.0.1:${port}/json/version`);
+      if (resp.ok) return true;
+    } catch { /* not up yet */ }
+    await new Promise((r) => setTimeout(r, 250));
+  }
+  return false;
+}
+
+// --- fixture --------------------------------------------------------------
+
+function entry(i, model) {
+  const mm = String(i % 60).padStart(2, "0");
+  const ss = String(Math.floor(i / 60)).padStart(2, "0");
+  return {
+    type: "message",
+    timestamp: `2026-02-01T00:${mm}:${ss}Z`,
+    message: {
+      role: "assistant", provider: "p", model, api: "openai-responses",
+      stopReason: "stop", content: [],
+      usage: { input: 2000, cacheRead: i % 7 === 0 ? 3000 : 90000, cacheWrite: 0, output: 200 },
+    },
+  };
+}
+
+function fixtureEntries() {
+  const entries = [];
+  for (let i = 1; i <= 24; i++) entries.push(entry(i, "m1"));
+  entries.push({ type: "model_change", timestamp: "2026-02-01T00:24:30Z", provider: "p", modelId: "m2" });
+  entries.push({ type: "compaction", timestamp: "2026-02-01T00:24:45Z" });
+  for (let i = 25; i <= 32; i++) entries.push(entry(i, "m2"));
+  entries.push({ type: "model_change", timestamp: "2026-02-01T00:32:30Z", provider: "p", modelId: "m3" });
+  for (let i = 33; i <= 39; i++) entries.push(entry(i, "m3"));
+  entries.push({ type: "compaction", timestamp: "2026-02-01T00:39:30Z" });
+  for (let i = 40; i <= 45; i++) entries.push(entry(i, "m3"));
+  return entries;
+}
+
+const HOVER_SCRIPT = `
+  (() => {
+    window.__errs = [];
+    window.addEventListener("error", (e) => __errs.push(String(e.message)));
+    const sel = document.querySelector("[data-context-segment-select]");
+    function setView(value) {
+      sel.value = value; sel.dispatchEvent(new Event("change"));
+    }
+    function hover(label, frac) {
+      // Only the chart inside the currently visible context view can be hovered.
+      const chart = [...document.querySelectorAll("svg.usage-chart")]
+        .find((s) => s.getAttribute("aria-label") === label &&
+          s.closest(".usage-context-view") && !s.closest(".usage-context-view").hidden);
+      if (!chart) return { visible: false, text: "no visible chart" };
+      const r = chart.getBoundingClientRect();
+      chart.dispatchEvent(new PointerEvent("pointermove", {
+        clientX: r.left + 30 + r.width * frac, clientY: r.top + r.height / 2, bubbles: true,
+      }));
+      const t = document.querySelector(".usage-tooltip");
+      return { visible: getComputedStyle(t).display !== "none", text: t.textContent || "" };
+    }
+    const requestOf = (r) => {
+      const m = (r.text || "").match(/Request (\\d+)/);
+      return m ? Number(m[1]) : null;
+    };
+    window.__probe = { setView, hover, requestOf, errs: () => window.__errs };
+    return "ready";
+  })();
+`;
+
+async function run() {
+  const html = buildCacheExportHtml(parseEntries(fixtureEntries()), { title: "e2e fixture", sessionId: "e2e" });
+
+  const chrome = findChrome();
+  if (!chrome) {
+    console.log("  SKIP browser e2e (no Chrome/Chromium found; set BROWSER_BIN to enable)");
+    skipped++;
+    return;
+  }
+  const usesWindowsChrome = IS_WSL && /\.exe$/i.test(chrome);
+  let windowsPid = 0;
+  const port = await freePort();
+  const userDataDir = usesWindowsChrome
+    ? commandOutput("powershell.exe", ["-NoProfile", "-NonInteractive", "-Command",
+        "[Environment]::GetFolderPath('LocalApplicationData')"]) + `\\agent-web\\e2e-${process.pid}`
+    : mkdtempSync(join(tmpdir(), "cache-export-e2e-"));
+
+  const chromeArgs = [
+    `--remote-debugging-port=${port}`,
+    `--user-data-dir=${userDataDir}`,
+    "--headless", "--disable-graphics", "--no-sandbox", "--disable-gpu",
+    "--no-first-run", "--no-default-browser-check", "--disable-extensions",
+  ];
+  if (usesWindowsChrome) {
+    const winPath = commandOutput("wslpath", ["-w", chrome]);
+    const quoted = chromeArgs.map((a) => `'${a.replaceAll("'", "''")}'`).join(", ");
+    const out = commandOutput("powershell.exe", ["-NoProfile", "-NonInteractive", "-Command",
+      `$p = Start-Process -FilePath '${winPath}' -ArgumentList @(${quoted}) -PassThru; $p.Id`]);
+    windowsPid = Number(out.trim());
+  } else {
+    spawn(chrome, chromeArgs, { stdio: "ignore", detached: true }).unref();
+  }
+
+  try {
+    if (!(await waitForEndpoint(port))) {
+      check("browser endpoint comes up", false, "chrome did not expose :" + port);
+      return;
+    }
+    const list = await (await fetch(`http://127.0.0.1:${port}/json/list`)).json();
+    const page = list.find((t) => t.type === "page");
+    const cdp = await cdpConnect(page.webSocketDebuggerUrl);
+    await cdp.send("Page.enable");
+    await cdp.send("Emulation.setDeviceMetricsOverride", { width: 1600, height: 1200, deviceScaleFactor: 1, mobile: false });
+    await cdp.send("Page.navigate", { url: "data:text/html;charset=utf-8," + encodeURIComponent(html) });
+    await cdp.send("Runtime.enable");
+
+    const evalJs = async (expression) => {
+      const res = await cdp.send("Runtime.evaluate", { expression, returnByValue: true, awaitPromise: true });
+      if (res.exceptionDetails) throw new Error(res.exceptionDetails.text || "eval failed");
+      return res.result.value;
+    };
+
+    // wait for load + the dashboard IIFE
+    for (let i = 0; i < 40; i++) {
+      if (await evalJs(`document.readyState === "complete" && !!document.querySelector(".usage-chart")`)) break;
+      await new Promise((r) => setTimeout(r, 250));
+    }
+    await evalJs(HOVER_SCRIPT);
+
+    // 1. segmentation: model switches create context segments
+    const segInfo = await evalJs(`
+      (() => {
+        const opts = [...document.querySelectorAll("[data-context-segment-select] option")]
+          .map((o) => ({ value: o.value, text: o.textContent }));
+        return { count: opts.length - 1, selected: document.querySelector("[data-context-segment-select]").value, opts };
+      })()
+    `);
+    check("e2e segments split at compactions AND model switches (4 expected)",
+      segInfo.count === 4, JSON.stringify(segInfo.opts.map((o) => o.text)));
+    check("e2e segment labels carry the model", segInfo.opts.some((o) => o.text.includes("· p/m2")), JSON.stringify(segInfo.opts));
+    check("e2e defaults to the latest segment", segInfo.selected === "segment-4", segInfo.selected);
+
+    // 2. All view: tooltip must work past every break, on every chart
+    await evalJs(`window.__probe.setView("all")`);
+    const allCharts = await evalJs(`
+      (() => {
+        const labels = [...document.querySelectorAll("svg.usage-chart")].map((s) => s.getAttribute("aria-label"));
+        const out = {};
+        for (const label of labels) {
+          const near = window.__probe.hover(label, 0.05);
+          const far = window.__probe.hover(label, 0.9);
+          out[label] = { near, far, nearReq: window.__probe.requestOf(near), farReq: window.__probe.requestOf(far) };
+        }
+        return { out, errs: window.__probe.errs() };
+      })()
+    `);
+    const labels = Object.keys(allCharts.out);
+    check("e2e All view has 3 charts", labels.length === 3, labels.join(","));
+    for (const label of labels) {
+      const { near, far, nearReq, farReq } = allCharts.out[label];
+      check(`e2e All "${label}" tooltip visible near start`, near.visible && nearReq !== null, JSON.stringify(near));
+      check(`e2e All "${label}" tooltip works past the last break`, far.visible && farReq !== null && farReq > 39, JSON.stringify(far));
+      check(`e2e All "${label}" tooltip tracks the cursor across breaks`, farReq !== nearReq, `${farReq} vs ${nearReq}`);
+    }
+    check("e2e no IndexSizeError / uncaught errors in All view",
+      !allCharts.errs.some((e) => /IndexSizeError|Uncaught/i.test(e)), JSON.stringify(allCharts.errs));
+
+    // 3. latest segment view (no internal breaks): full-width tooltips
+    await evalJs(`window.__probe.setView("segment-4")`);
+    const seg4 = await evalJs(`
+      (() => {
+        const near = window.__probe.hover("Prompt input by request", 0.05);
+        const far = window.__probe.hover("Prompt input by request", 0.9);
+        return { near, far, nearReq: window.__probe.requestOf(near), farReq: window.__probe.requestOf(far), errs: window.__probe.errs() };
+      })()
+    `);
+    check("e2e segment-4 tooltip works at start and end",
+      seg4.near.visible && seg4.far.visible && seg4.farReq !== seg4.nearReq,
+      JSON.stringify(seg4));
+    check("e2e segment view has no uncaught errors",
+      !seg4.errs.some((e) => /IndexSizeError|Uncaught/i.test(e)), JSON.stringify(seg4.errs));
+
+    cdp.close();
+    if (usesWindowsChrome && windowsPid) {
+      try { execFileSync("taskkill.exe", ["/PID", String(windowsPid), "/T", "/F"]); } catch { /* best effort */ }
+    }
+  } finally {
+    if (!usesWindowsChrome) rmSync(userDataDir, { recursive: true, force: true });
+  }
+}
+
+await run();
+console.log(`\n${pass} passed, ${fail} failed, ${skipped} skipped (browser e2e)`);
+process.exit(fail ? 1 : 0);

package/extensions/cache-export/tests/run-tests.mjs

@@ -4,7 +4,7 @@ import { mkdtempSync, readFileSync, rmSync } from "node:fs";
 import { join } from "node:path";
 import { tmpdir } from "node:os";
 import registerCacheExport from "../index.ts";
-import { parseEntries, analyzeStreaks, analyzeMisses, lineChartForTest } from "../render.ts";
+import { parseEntries, analyzeStreaks, analyzeMisses, buildContextSegments, lineChartForTest, renderDashboard } from "../render.ts";
 
 let pass = 0, fail = 0;
 function check(name, cond, detail = "") {
@@ -318,6 +318,34 @@ const hitOf = (r) => r.cached / (r.fresh + r.cached + r.cacheWrite);
     s.length === 2 && s.every((x) => x.hits.length === 3), JSON.stringify(s.map((x) => [x.from, x.to])));
 }
 
+// P2. Context segments break at compaction AND model switches -------------
+{
+  const entries = [
+    req({ cached: 90000, fresh: 10000, min: 1, model: "a" }),
+    { type: "model_change", timestamp: "2026-01-01T00:01:30Z", provider: "p", modelId: "b" },
+    req({ cached: 0, fresh: 100000, min: 2, model: "b" }),
+    { type: "compaction", timestamp: "2026-01-01T00:02:30Z" },
+    req({ cached: 0, fresh: 20000, min: 3, model: "b" }),
+  ];
+  const d = parseEntries(entries);
+  const segments = buildContextSegments(d.requests, d.events);
+  check("P2 model switch and compaction each create a Context segment",
+    segments.length === 3 && segments.every((segment) => segment.requests.length === 1),
+    JSON.stringify(segments.map((segment) => segment.requests.map((request) => request.number))));
+  const chart = lineChartForTest("segmented", [["cached", [10, 20, 30, 40]]], { breakBefore: new Set([2]) });
+  const polys = [...chart.matchAll(/<polyline ([^>]*)points="([^"]*)"/g)].map((m) => [m[1], m[2]]);
+  check("P2 chart boundary splits the visible polyline and keeps a hidden full one first (tooltip fix)",
+    polys.length === 3 &&
+      polys[0][0].includes('visibility="hidden"') && polys[0][1].split(" ").length === 4 &&
+      !polys[1][0].includes("visibility") && polys[1][1].split(" ").length === 2 &&
+      !polys[2][0].includes("visibility") && polys[2][1].split(" ").length === 2,
+    chart.slice(0, 900));
+  const dashboard = renderDashboard(d);
+  check("P2 dashboard defaults to latest segment and keeps an all-history view",
+    dashboard.includes('value="all"') && dashboard.includes('value="segment-3" selected') && dashboard.includes('data-context-view="all" hidden'),
+    dashboard.slice(0, 500));
+}
+
 // Q. subagent results remain visible as main-session tool input -----------
 {
   const entries = [

package/global/AGENTS.md

@@ -74,17 +74,7 @@ Before adding code to any file:
 - Check shared utilities in the same module.
 - If you're unsure why code is structured a certain way, ask before writing.
 
-## 6. Checkpoint Long-Running Work
-
-**Multi-step work needs checkpoints. Don't keep going from a state you can't describe.**
-
-After each significant step:
-- Summarize what was done.
-- State what was verified.
-- State what remains.
-- If you can't describe the current state back, stop and restate instead of continuing.
-
-## 7. Fail Visibly, Not Silently
+## 6. Fail Visibly, Not Silently
 
 **Silent skips are failures. Surface uncertainty instead of hiding it.**
 
@@ -93,14 +83,14 @@ After each significant step:
 - Default to surfacing uncertainty. When in doubt, over-communicate what you're unsure about.
 - If a required input, file, or tool is missing (or a step is impossible under the stated constraints), do NOT fabricate it to make a check pass. Report what is missing and what you need.
 
-## 8. Reuse Before Writing
+## 7. Reuse Before Writing
 
 **Before writing new code, check in order:**
 1. Does it already exist in this codebase? Reuse it - do not re-implement it yourself, even with the standard library. (If the existing helper is itself the bug, fix it once - see Rule 3.)
 2. Does the standard library cover it? Use it.
 3. Only then: write the minimum code that works.
 
-## 9. Use Available Editing Tools
+## 8. Use Available Editing Tools
 
 **Follow the current harness's tool surface; do not assume a shell patch helper exists.**
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxiaochao/pi-toolkit",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Personal pi coding agent toolkit: /todos, /btw, /cache_export extensions, browser automation, and bundled theme/skills.",
   "type": "module",
   "keywords": [
@@ -43,7 +43,7 @@
     "ws": "^8.19.0"
   },
   "scripts": {
-    "test": "cd extensions/cache-export && node --experimental-strip-types tests/run-tests.mjs && node --experimental-strip-types ../tests/btw-history.mjs",
+    "test": "cd extensions/cache-export && node --experimental-strip-types tests/run-tests.mjs && node --experimental-strip-types ../tests/btw-history.mjs && node tests/e2e-browser.mjs",
     "load-test": "pi -ne -e ./extensions/todo.ts && pi -ne -e ./extensions/cache-export/index.ts && pi -ne -e ./extensions/btw.ts",
     "eval:agents": "node evaluations/agents-md/run.mjs",
     "eval:agents:test": "node evaluations/agents-md/tests/run-tests.mjs",