@maxiaochao/pi-toolkit 0.2.4 → 0.2.6

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 2026-09-09 - v0.2.6
+
+- fix cache export: segment-view tooltip and event markers now show global request numbers (aligned with the x-axis) instead of relative 1-based; e2e asserts real tooltip values
+
+## 2026-09-09 - v0.2.5
+
+- fix cache export: segment views lost the hover tooltip (it rendered inside the hidden all-history section); move to one page-level tooltip; e2e now asserts real rendering
+
 ## 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

package/extensions/cache-export/render.ts

@@ -205,8 +205,12 @@ function lineChart(title, series, opts = {}) {
   ];
 
   const tsAttr = timestamps ? ` data-timestamps="${esc(timestamps.join("|"), true)}"` : "";
+  // Global per-request numbers (same length as the series) so a small page
+  // script can rewrite tau's relative "Request N" tooltip line to the global
+  // number inside segment views (tau hardcodes index + 1).
+  const reqAttr = requestNumbers ? ` data-requestnumbers="${esc(requestNumbers.join("|"), true)}"` : "";
   const parts = [
-    `<svg class="usage-chart" viewBox="0 0 ${width} ${height}" role="img" aria-label="${esc(title, true)}" data-left="${left}" data-right="${right}" data-count="${count}"${tsAttr}>`,
+    `<svg class="usage-chart" viewBox="0 0 ${width} ${height}" role="img" aria-label="${esc(title, true)}" data-left="${left}" data-right="${right}" data-count="${count}"${tsAttr}${reqAttr}>`,
     `<text class="chart-title" x="${left}" y="24">${esc(title)}</text>`,
   ];
   for (let tick = 0; tick < 6; tick++) {
@@ -233,7 +237,10 @@ function lineChart(title, series, opts = {}) {
     .forEach((event, eventIndex) => {
       const [x] = point(Math.max(0, Math.min(count - 1, event.requestNumber - 1)), 0);
       const markerY = top + 7 + (eventIndex % 3) * 9;
-      const description = `${event.label} before request ${event.requestNumber} at ${event.timestamp}`;
+      // data-request stays RELATIVE (tau's tooltip matches index + 1); the human
+      // description shows the GLOBAL request number (chartEvents keeps it).
+      const shown = event.globalRequestNumber ?? event.requestNumber;
+      const description = `${event.label} before request ${shown} at ${event.timestamp}`;
       parts.push(
         `<g class="usage-event usage-event-${esc(event.kind, true)}" data-request="${event.requestNumber}" ` +
           `data-event-info="${esc(description, true)}" role="img" aria-label="${esc(description, true)}">` +
@@ -542,10 +549,14 @@ function eventsForRequests(events, requests) {
   return events.filter((event) => event.requestNumber >= from && event.requestNumber <= to);
 }
 
-function chartEvents(events, requests) {
+export function chartEvents(events, requests) {
   if (!requests.length) return [];
   const first = requests[0].number;
-  return events.map((event) => ({ ...event, requestNumber: event.requestNumber - first + 1 }));
+  return events.map((event) => ({
+    ...event,
+    requestNumber: event.requestNumber - first + 1, // relative, for tau's data-request matching
+    globalRequestNumber: event.requestNumber,        // absolute, for readable labels
+  }));
 }
 
 function renderDashboardView(requests, events, toolCalls, compactions, scopeLabel) {
@@ -657,7 +668,7 @@ function renderDashboardView(requests, events, toolCalls, compactions, scopeLabe
     `<th>Fresh</th><th>Cached</th><th>Written</th><th>Prompt</th><th>Hit rate</th><th>Output</th>` +
     `<th>Stop</th></tr></thead><tbody>${rows}</tbody></table></div></div>` +
     `<div class="usage-panel"><h2>Tool calls</h2>${toolRows}</div>` +
-    `</div><div class="usage-tooltip" role="status" aria-live="polite"></div>`
+    `</div>`
   );
 }
 
@@ -697,10 +708,16 @@ export function renderDashboard(data) {
     ...segmentViews.map((view) => `<section class="usage-context-view" data-context-view="${view.id}"${view.id === `segment-${latest.number}` ? "" : " hidden"}>${view.html}</section>`),
   ].join("");
 
+  // ONE shared tooltip for the whole page. tau's script grabs the first
+  // `.usage-tooltip` in the document; with one per view that element lived in
+  // the (hidden) all-history section, so segment views set text on an element
+  // whose ancestor was display:none -> nothing painted. A single tooltip
+  // outside the view sections renders under every view.
   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;
+    views +
+    `<div class="usage-tooltip" role="status" aria-live="polite"></div>`;
 }
 
 // ---------------------------------------------------------------------------
@@ -750,6 +767,23 @@ for (const select of document.querySelectorAll("[data-context-segment-select]"))
   select.addEventListener("change", show);
   show();
 }
+// tau's tooltip hardcodes "Request " + (index + 1), which is relative inside a
+// segment view while the x-axis shows global request numbers. Rewrite the
+// tooltip's leading request number to the chart's global number on hover.
+// Registered after tau's own pointermove listener, so it runs after tau writes.
+document.querySelectorAll(".usage-chart").forEach((chart) => {
+  const nums = (chart.dataset.requestnumbers || "").split("|").map(Number);
+  chart.addEventListener("pointermove", () => {
+    const tooltip = document.querySelector(".usage-tooltip");
+    if (!tooltip) return;
+    const m = tooltip.textContent.match(/^Request (\\d+)/);
+    if (!m) return;
+    const global = nums[Number(m[1]) - 1];
+    if (global && global !== Number(m[1])) {
+      tooltip.textContent = tooltip.textContent.replace(/^Request \\d+/, "Request " + global);
+    }
+  });
+});
 </script>
 </main></body></html>`;
 }

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

@@ -158,7 +158,10 @@ const HOVER_SCRIPT = `
         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 || "" };
+      // Actually-rendered check: getClientRects() returns 0 when the element or
+      // any ancestor is display:none, even if the element's own computed
+      // display is block (the old per-view tooltip blind spot).
+      return { visible: t.getClientRects().length > 0 && getComputedStyle(t).display !== "none", text: t.textContent || "" };
     }
     const requestOf = (r) => {
       const m = (r.text || "").match(/Request (\\d+)/);
@@ -266,7 +269,8 @@ async function run() {
     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
+    // 3. latest segment view (no internal breaks): full-width tooltips aligned
+    //    to GLOBAL request numbers (fixture segment-4 = requests 40..45)
     await evalJs(`window.__probe.setView("segment-4")`);
     const seg4 = await evalJs(`
       (() => {
@@ -278,9 +282,28 @@ async function run() {
     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-4 tooltip aligns to GLOBAL request numbers (40..45, not 1..6)",
+      seg4.nearReq === 40 && seg4.farReq === 45,
+      JSON.stringify(seg4));
     check("e2e segment view has no uncaught errors",
       !seg4.errs.some((e) => /IndexSizeError|Uncaught/i.test(e)), JSON.stringify(seg4.errs));
 
+    // 4. event markers in a segment view keep relative data-request for tau
+    //    matching but describe the GLOBAL request number
+    await evalJs(`window.__probe.setView("segment-2")`);
+    const ev = await evalJs(`
+      (() => {
+        const chart = [...document.querySelectorAll("svg.usage-chart")]
+          .find((s) => s.getAttribute("aria-label") === "Prompt input by request" &&
+            s.closest(".usage-context-view") && !s.closest(".usage-context-view").hidden);
+        const g = chart.querySelector(".usage-event");
+        return g ? { dataRequest: g.getAttribute("data-request"), info: g.getAttribute("data-event-info") } : null;
+      })()
+    `);
+    check("e2e segment event marker: data-request relative, description global",
+      ev && ev.dataRequest === "1" && ev.info.includes("before request 25"),
+      JSON.stringify(ev));
+
     cdp.close();
     if (usesWindowsChrome && windowsPid) {
       try { execFileSync("taskkill.exe", ["/PID", String(windowsPid), "/T", "/F"]); } catch { /* best effort */ }

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, buildContextSegments, lineChartForTest, renderDashboard } from "../render.ts";
+import { parseEntries, analyzeStreaks, analyzeMisses, buildContextSegments, lineChartForTest, renderDashboard, chartEvents } from "../render.ts";
 
 let pass = 0, fail = 0;
 function check(name, cond, detail = "") {
@@ -346,6 +346,23 @@ const hitOf = (r) => r.cached / (r.fresh + r.cached + r.cacheWrite);
     dashboard.slice(0, 500));
 }
 
+// P3. segment-view request numbers align to global (tooltip override + event labels)
+{
+  const chart = lineChartForTest("seg", [["cached", [1, 2, 3]]], { requestNumbers: [40, 41, 42] });
+  check("P3 chart carries global data-requestnumbers", chart.includes('data-requestnumbers="40|41|42"'), chart.slice(0, 220));
+  const ev = chartEvents([{ kind: "model", requestNumber: 310, label: "Model changed to b", timestamp: "12:00:00" }], [{ number: 310 }, { number: 311 }, { number: 312 }]);
+  check("P3 chartEvents keeps relative requestNumber (tau matching) and global label number",
+    ev[0].requestNumber === 1 && ev[0].globalRequestNumber === 310,
+    JSON.stringify(ev[0]));
+  const labeled = lineChartForTest("seg", [["cached", [1, 2, 3]]], {
+    requestNumbers: [310, 311, 312],
+    events: [{ kind: "model", requestNumber: 1, label: "Model changed to b", timestamp: "12:00:00", globalRequestNumber: 310 }],
+  });
+  check("P3 event description shows global request while data-request stays relative",
+    labeled.includes("before request 310 at 12:00:00") && labeled.includes('data-request="1"'),
+    labeled.slice(0, 700));
+}
+
 // Q. subagent results remain visible as main-session tool input -----------
 {
   const entries = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxiaochao/pi-toolkit",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Personal pi coding agent toolkit: /todos, /btw, /cache_export extensions, browser automation, and bundled theme/skills.",
   "type": "module",
   "keywords": [