pi-midcompact 0.3.0 → 0.5.0

package/src/projection.ts

@@ -1,4 +1,10 @@
-import type { CompressionBlock, CompressionState, MessageLike } from "./types.js";
+// Projection: replaces an exact persisted messageKeys subsequence with a
+// midcompact summary message and fails open when a sequence cannot be resolved.
+// Owns factual replacement-size calculation based on the actual summary message
+// wrapper text, not a fixed token heuristic.
+
+import type { CompressionBlock, CompressionState, ContentMetrics, MessageLike } from "./types.js";
+import { aggregateMetrics, measureMessage } from "./content-metrics.js";
 import { approxTokens, messageKey } from "./messages.js";
 
 export function summaryMessage(block: CompressionBlock, timestamp = Date.now()): MessageLike {
@@ -56,6 +62,42 @@ function findSubsequence(haystack: string[], needle: string[]): { start: number;
   return undefined;
 }
 
+/**
+ * Measure the actual replacement message produced for a block, so callers can
+ * report factual replacement content chars (midcompact wrapper + summary).
+ */
+export function replacementMetrics(block: CompressionBlock): ContentMetrics {
+  return measureMessage(summaryMessage(block));
+}
+
+/**
+ * Factual replacement content chars for a range, given its topic and summary.
+ * Computed from the actual summary message wrapper text that projection emits.
+ */
+export function replacementContentChars(summary: string, topic?: string): number {
+  const block: CompressionBlock = {
+    id: "draft",
+    summary,
+    topic,
+    entryIds: [],
+    messageKeys: [],
+    createdAt: new Date().toISOString(),
+    originalContentChars: 0,
+    originalImageCount: 0,
+    originalImagePayloadBytes: 0,
+    replacementContentChars: 0,
+    originalApproxTokens: 0,
+    compressedApproxTokens: 0,
+  };
+  return replacementMetrics(block).contentChars;
+}
+
+/** @deprecated legacy heuristic; kept only for old approximate-token field compat. */
 export function estimateCompressedTokens(summary: string, topic?: string): number {
   return approxTokens(`${topic ?? ""}\n${summary}`) + 40;
 }
+
+/** Factual metrics for a set of atoms that a range/block would replace. */
+export function rangeMetricsForAtoms(atoms: readonly { metrics: ContentMetrics }[]): ContentMetrics {
+  return aggregateMetrics(atoms.map((atom) => atom.metrics));
+}

package/src/renderers.ts

@@ -14,28 +14,27 @@ export function registerStateRenderer(pi: ExtensionAPI): void {
       return box;
     }
     const commit = state.lastCommit;
-    const saved = state.blocks.reduce(
-      (sum, block) => sum + Math.max(0, block.originalApproxTokens - block.compressedApproxTokens),
-      0,
-    );
+    const originalChars = state.blocks.reduce((sum, block) => sum + (block.originalContentChars ?? 0), 0);
+    const replacementChars = state.blocks.reduce((sum, block) => sum + (block.replacementContentChars ?? 0), 0);
+    const imageCount = state.blocks.reduce((sum, block) => sum + (block.originalImageCount ?? 0), 0);
     const added = commit?.addedRangeCount ?? 0;
     const headline = [
       theme.fg("success", "✓ MIDCOMPACT"),
       added ? `+${added} range${added === 1 ? "" : "s"}` : `${state.blocks.length} active block${state.blocks.length === 1 ? "" : "s"}`,
       `${state.blocks.length} active`,
-      `~${formatTokenCount(saved)} saved`,
-    ].join(" · ");
+      `${originalChars} → ${replacementChars} content chars`,
+      imageCount ? `${imageCount} images` : "",
+    ].filter(Boolean).join(" · ");
     box.addChild(new Text(headline, 0, 0));
 
-    if (commit?.anchorUsage?.contextWindow && commit.projectedTokens !== null) {
+    if (commit?.anchorUsage?.contextWindow) {
+      // Pi-reported awareness only; no local projected token percentage claim.
       box.addChild(new Text(
         theme.fg(
           "dim",
-          `anchor ${formatPercent(commit.anchorUsage.percent)} → projected ${formatPercent(commit.projectedPercent, true)} ` +
-            `(~${formatTokenCount(commit.projectedTokens)}/${formatTokenCount(commit.anchorUsage.contextWindow)})`,
+          `anchor ${formatPercent(commit.anchorUsage.percent)} [Pi reported] · ${commit.selectedOriginalContentChars} → ${commit.selectedReplacementContentChars} chars · ${commit.selectedImageCount} images`,
         ),
-        0,
-        0,
+        0, 0,
       ));
     }
 
@@ -43,7 +42,7 @@ export function registerStateRenderer(pi: ExtensionAPI): void {
       const addedSet = new Set(commit?.addedBlockIds ?? []);
       const blocks = addedSet.size ? state.blocks.filter((block) => addedSet.has(block.id)) : state.blocks;
       for (const block of blocks) {
-        const title = `${block.id}${block.topic ? ` · ${block.topic}` : ""} · ~${formatTokenCount(block.originalApproxTokens)} → ~${formatTokenCount(block.compressedApproxTokens)}`;
+        const title = `${block.id}${block.topic ? ` · ${block.topic}` : ""} · ${block.originalContentChars ?? 0} → ${block.replacementContentChars ?? 0} chars${block.originalImageCount ? ` · ${block.originalImageCount} images` : ""}`;
         box.addChild(new Text(theme.fg("accent", title), 0, 0));
         box.addChild(new Text(theme.fg("dim", block.summary), 1, 0));
       }
@@ -56,12 +55,10 @@ export function registerStateRenderer(pi: ExtensionAPI): void {
 export function stateTreeLabel(state: CompressionState): string {
   const commit = state.lastCommit;
   const added = commit?.addedRangeCount ?? 0;
-  const saved = commit?.estimatedSavedTokens ?? state.blocks.reduce(
-    (sum, block) => sum + Math.max(0, block.originalApproxTokens - block.compressedApproxTokens),
-    0,
-  );
-  const projection = commit?.projectedPercent === null || commit?.projectedPercent === undefined
+  const replacementChars = state.blocks.reduce((sum, block) => sum + (block.replacementContentChars ?? 0), 0);
+  const originalChars = state.blocks.reduce((sum, block) => sum + (block.originalContentChars ?? 0), 0);
+  const anchor = commit?.anchorUsage?.percent === null || commit?.anchorUsage?.percent === undefined
     ? ""
-    : ` · →~${formatPercent(commit.projectedPercent, false)}`;
-  return `midcompact${added ? ` +${added}` : ""} · ~${formatTokenCount(saved)} saved${projection}`;
+    : ` · anchor ${formatPercent(commit.anchorUsage.percent)} [Pi]`;
+  return `midcompact${added ? ` +${added}` : ""} · ${originalChars} → ${replacementChars} chars${anchor}`;
 }

package/src/review-ui.ts

@@ -1,9 +1,14 @@
 import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
 import { Key, matchesKey, truncateToWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
 
-import { formatPercent, formatTokenCount } from "./telemetry.js";
 import type { Atom, DraftPlan, DraftRange, DraftTelemetry, ReviewAction } from "./types.js";
 
+/**
+ * Interactive TUI review. Rendered as a centered overlay (not a full-height
+ * editor replacement) so it never flattens the chat transcript. Ranges fold
+ * into single header lines; the selected range expands inline with its detail
+ * and edit affordances, removing the duplicate top "Selected" block.
+ */
 export async function showReviewUi(
   ctx: ExtensionCommandContext,
   atoms: Atom[],
@@ -12,148 +17,180 @@ export async function showReviewUi(
 ): Promise<ReviewAction> {
   if (ctx.mode !== "tui") return { action: "close" };
 
-  return ctx.ui.custom<ReviewAction>((tui, theme, _keybindings, done) => {
-    let scrollOffset = 0;
-    let selectedRange = draft.ranges.length ? 0 : -1;
-    let expandSelected = false;
-    let jumpToSelected = true;
-
-    const selected = (): DraftRange | undefined => selectedRange >= 0 ? draft.ranges[selectedRange] : undefined;
-
-    const component = {
-      render(width: number): string[] {
-        const w = Math.max(30, width);
-        const rows = Math.max(12, tui.terminal.rows);
-        const border = (text: string) => theme.fg("border", text);
-        const dim = (text: string) => theme.fg("dim", text);
-        const accent = (text: string) => theme.fg("accent", text);
-        const success = (text: string) => theme.fg("success", text);
-        const warning = (text: string) => theme.fg("warning", text);
-        const bodyWidth = Math.max(20, w - 4);
-        const framed = (text: string) => `${border("│")} ${truncateToWidth(text, bodyWidth, "…", true)} ${border("│")}`;
-        const horizontal = (left: string, mid = "─", right = "─") => border(`${left}${mid.repeat(Math.max(0, w - 2))}${right}`);
-
-        const header: string[] = [];
-        header.push(horizontal("╭", "─", "╮"));
-        header.push(framed(accent(theme.bold(`Midcompact Review · Draft v${draft.revision}`))));
-        header.push(framed(formatUsageLine(telemetry, theme)));
-        header.push(framed(dim("This is awareness, not a target. Review the linear anchor snapshot before /midcompact commit.")));
-        header.push(horizontal("├", "─", "┤"));
-
-        const range = selected();
-        const selectedInfo: string[] = [];
-        if (range) {
-          selectedInfo.push(framed(`${accent("Selected")} ${range.id}  ${range.startRef} → ${range.endRef}${range.topic ? `  ${range.topic}` : ""}`));
-          selectedInfo.push(framed(dim(`~${formatTokenCount(range.originalApproxTokens)} → ~${formatTokenCount(range.compressedApproxTokens)} tokens`)));
-          for (const line of wrapTextWithAnsi(`${accent("Summary:")} ${range.summary}`, bodyWidth)) selectedInfo.push(framed(line));
-          selectedInfo.push(horizontal("├", "─", "┤"));
-        }
-
-        const body: string[] = [];
-        const atomLineStarts = new Map<number, number>();
-        for (const atom of atoms) {
-          atomLineStarts.set(atom.index, body.length);
-          const owner = owningRange(atom.index, draft.ranges);
-          const isSelected = Boolean(range && owner?.id === range.id);
-          const isRangeStart = owner?.startIndex === atom.index;
-          const isRangeEnd = owner?.endIndex === atom.index;
-          const rangeMark = owner ? (isRangeStart ? "┌" : isRangeEnd ? "└" : "│") : " ";
-          const selectionMark = isSelected ? "▶" : " ";
-          const policy = owner ? warning(owner.id) : success("KEEP");
-          const token = dim(`~${formatTokenCount(atom.approxTokens)}`);
-          const oneLine = firstLine(atom.preview);
-          body.push(framed(`${selectionMark}${rangeMark} ${policy} ${atom.ref} [${atom.kind}] ${token}  ${oneLine}`));
-          if (expandSelected && isSelected) {
-            const detail = wrapTextWithAnsi(atom.preview, Math.max(10, bodyWidth - 4));
-            for (const detailLine of detail.slice(1, 8)) body.push(framed(dim(`    ${detailLine}`)));
+  return ctx.ui.custom<ReviewAction>(
+    (tui, theme, _keybindings, done) => {
+      let scrollOffset = 0;
+      let selectedRange = draft.ranges.length ? 0 : -1;
+      let expandSelected = true;
+      let jumpToSelected = true;
+
+      const selected = (): DraftRange | undefined =>
+        selectedRange >= 0 ? draft.ranges[selectedRange] : undefined;
+
+      const component = {
+        render(width: number): string[] {
+          const w = Math.max(40, width);
+          // Conservative height budget: stay under the overlay's maxHeight so
+          // the overlay never clips and the chat transcript is not crushed.
+          const totalBudget = Math.max(18, Math.floor(tui.terminal.rows * 0.8));
+          const border = (text: string) => theme.fg("border", text);
+          const dim = (text: string) => theme.fg("dim", text);
+          const accent = (text: string) => theme.fg("accent", text);
+          const success = (text: string) => theme.fg("success", text);
+          const warning = (text: string) => theme.fg("warning", text);
+          const inner = Math.max(20, w - 4);
+          const framed = (text: string) => `${border("│")} ${truncateToWidth(text, inner, "…", true)} ${border("│")}`;
+          const h = (l: string, m = "─", r = "─") => border(`${l}${m.repeat(Math.max(0, w - 2))}${r}`);
+
+          const range = selected();
+
+          const header: string[] = [
+            h("╭"),
+            framed(accent(theme.bold(`Midcompact Review · Draft v${draft.revision} · ${draft.ranges.length} range(s)`))),
+            framed(usageLine(telemetry, theme)),
+            h("├"),
+          ];
+
+          // Timeline: KEEP atoms always shown; ranges fold to a header line,
+          // except the selected range which expands with detail + its atoms.
+          const body: string[] = [];
+          const rangeStarts = new Map(draft.ranges.map((r) => [r.startIndex, r]));
+          const rangeLineStarts = new Map<string, number>();
+
+          for (const atom of atoms) {
+            const head = rangeStarts.get(atom.index);
+            if (head) {
+              rangeLineStarts.set(head.id, body.length);
+              const isSel = Boolean(range && range.id === head.id);
+              const savedChars = Math.max(0, head.originalContentChars - head.replacementContentChars);
+              const atomCount = head.endIndex - head.startIndex + 1;
+              const caret = isSel ? (expandSelected ? "▾" : "▸") : "▸";
+              const caretCol = isSel ? accent(caret) : dim(caret);
+              const idCol = isSel ? theme.bold(warning(head.id)) : warning(head.id);
+              const span = dim(`${head.startRef}→${head.endRef} · ${atomCount} atoms`);
+              const chars = dim(`${formatCount(head.originalContentChars)}→${formatCount(head.replacementContentChars)} chars`);
+              const saved = success(`−${formatCount(savedChars)}`);
+              const topicCol = head.topic ? `${accent(head.topic)} ` : "";
+              const sumCol = dim(firstLine(head.summary, 48));
+              const headText = `${caretCol} ${idCol} ${span} ${chars} ${saved} ${topicCol}${sumCol}`;
+              body.push(framed(isSel ? accent(headText) : headText));
+
+              if (isSel) {
+                body.push(framed(dim(`  topic: ${head.topic ?? "—"}`)));
+                body.push(framed(dim(`  chars: ${formatCount(head.originalContentChars)} → ${formatCount(head.replacementContentChars)} (−${formatCount(savedChars)}) · ${head.originalImageCount} images`)));
+                const wrapWidth = Math.max(10, inner - 6);
+                for (const line of wrapTextWithAnsi(`${accent("summary:")} ${head.summary}`, wrapWidth)) {
+                  body.push(framed(`  ${line}`));
+                }
+                body.push(framed(dim(`  [e] edit summary · [t] edit topic · [d] remove · [x] ${expandSelected ? "collapse" : "expand"} atoms`)));
+              }
+            }
+
+            const owner = owningRange(atom.index, draft.ranges);
+            const showAtom = !owner || (Boolean(range) && owner.id === range!.id && expandSelected);
+            if (!showAtom) continue;
+
+            const mark = owner
+              ? atom.index === owner.startIndex
+                ? "┌"
+                : atom.index === owner.endIndex
+                  ? "└"
+                  : "│"
+              : " ";
+            const policy = owner ? warning(owner.id) : success("KEEP");
+            const facts = dim(`${formatCount(atom.metrics.contentChars)} chars${atom.metrics.imageCount ? ` · ${atom.metrics.imageCount} img` : ""}`);
+            const oneLine = dim(firstLine(atom.preview, 80));
+            body.push(framed(`${mark} ${policy} ${atom.ref} [${atom.kind}] ${facts}  ${oneLine}`));
+          }
+          if (!body.length) body.push(framed(dim("(No atoms in anchor snapshot.)")));
+
+          const footer: string[] = [
+            h("├"),
+            framed(dim(`ranges ${hint("n/p", theme)} · scroll ${hint("↑↓ PgUp PgDn", theme)} · ${hint("Esc", theme)} close`)),
+            framed(dim(`selected: ${hint("e", theme)} summary · ${hint("t", theme)} topic · ${hint("d", theme)} remove · ${hint("x", theme)} expand`)),
+            h("╰"),
+          ];
+
+          const viewportHeight = Math.max(5, totalBudget - header.length - footer.length);
+          if (jumpToSelected && range) {
+            const target = rangeLineStarts.get(range.id) ?? 0;
+            scrollOffset = Math.max(0, target - 2);
+            jumpToSelected = false;
+          }
+          const maxOffset = Math.max(0, body.length - viewportHeight);
+          scrollOffset = Math.max(0, Math.min(scrollOffset, maxOffset));
+          const visible = body.slice(scrollOffset, scrollOffset + viewportHeight);
+          while (visible.length < viewportHeight) visible.push(framed(""));
+
+          return [...header, ...visible, ...footer];
+        },
+        invalidate(): void {},
+        handleInput(data: string): void {
+          if (matchesKey(data, Key.escape) || matchesKey(data, Key.enter) || data === "q") {
+            done({ action: "close" });
+            return;
           }
-        }
-        if (!body.length) body.push(framed(dim("(No atoms in anchor snapshot.)")));
-
-        const footerRows = 4;
-        const viewportHeight = Math.max(5, rows - header.length - selectedInfo.length - footerRows - 2);
-        if (jumpToSelected && range) {
-          scrollOffset = atomLineStarts.get(range.startIndex) ?? scrollOffset;
-          jumpToSelected = false;
-        }
-        const maxOffset = Math.max(0, body.length - viewportHeight);
-        scrollOffset = Math.max(0, Math.min(scrollOffset, maxOffset));
-        const visible = body.slice(scrollOffset, scrollOffset + viewportHeight);
-        while (visible.length < viewportHeight) visible.push(framed(""));
-
-        const top = body.length ? scrollOffset + 1 : 0;
-        const bottom = Math.min(body.length, scrollOffset + viewportHeight);
-        const footer = [
-          horizontal("├", "─", "┤"),
-          framed(dim(`Lines ${top}-${bottom} of ${body.length} · n/p select range · ↑↓/PgUp/PgDn scroll · x expand selected`)),
-          framed(dim("e edit summary · t edit topic · d remove selected range · Enter/Esc close")),
-          horizontal("╰", "─", "╯"),
-        ];
-        return [...header, ...selectedInfo, ...visible, ...footer];
-      },
-      invalidate(): void {},
-      handleInput(data: string): void {
-        if (matchesKey(data, Key.escape) || matchesKey(data, Key.enter) || data === "q") {
-          done({ action: "close" });
-          return;
-        }
-        if ((data === "n" || matchesKey(data, Key.right)) && draft.ranges.length) {
-          selectedRange = (selectedRange + 1 + draft.ranges.length) % draft.ranges.length;
-          jumpToSelected = true;
-          tui.requestRender();
-          return;
-        }
-        if ((data === "p" || matchesKey(data, Key.left)) && draft.ranges.length) {
-          selectedRange = (selectedRange - 1 + draft.ranges.length) % draft.ranges.length;
-          jumpToSelected = true;
-          tui.requestRender();
-          return;
-        }
-        if (matchesKey(data, Key.up) || data === "k") {
-          scrollOffset = Math.max(0, scrollOffset - 1);
-          tui.requestRender();
-          return;
-        }
-        if (matchesKey(data, Key.down) || data === "j") {
-          scrollOffset += 1;
-          tui.requestRender();
-          return;
-        }
-        if (matchesKey(data, Key.pageUp)) {
-          scrollOffset = Math.max(0, scrollOffset - 12);
-          tui.requestRender();
-          return;
-        }
-        if (matchesKey(data, Key.pageDown)) {
-          scrollOffset += 12;
-          tui.requestRender();
-          return;
-        }
-        if (matchesKey(data, Key.home)) {
-          scrollOffset = 0;
-          tui.requestRender();
-          return;
-        }
-        if (matchesKey(data, Key.end)) {
-          scrollOffset = Number.MAX_SAFE_INTEGER;
-          tui.requestRender();
-          return;
-        }
-        if (data === "x") {
-          expandSelected = !expandSelected;
-          jumpToSelected = true;
-          tui.requestRender();
-          return;
-        }
-        const range = selected();
-        if (!range) return;
-        if (data === "e") done({ action: "edit-summary", draftId: range.id });
-        else if (data === "t") done({ action: "edit-topic", draftId: range.id });
-        else if (data === "d") done({ action: "remove", draftId: range.id });
-      },
-    };
-    return component;
-  });
+          if ((data === "n" || matchesKey(data, Key.right)) && draft.ranges.length) {
+            selectedRange = (selectedRange + 1 + draft.ranges.length) % draft.ranges.length;
+            expandSelected = true;
+            jumpToSelected = true;
+            tui.requestRender();
+            return;
+          }
+          if ((data === "p" || matchesKey(data, Key.left)) && draft.ranges.length) {
+            selectedRange = (selectedRange - 1 + draft.ranges.length) % draft.ranges.length;
+            expandSelected = true;
+            jumpToSelected = true;
+            tui.requestRender();
+            return;
+          }
+          if (matchesKey(data, Key.up) || data === "k") {
+            scrollOffset = Math.max(0, scrollOffset - 1);
+            tui.requestRender();
+            return;
+          }
+          if (matchesKey(data, Key.down) || data === "j") {
+            scrollOffset += 1;
+            tui.requestRender();
+            return;
+          }
+          if (matchesKey(data, Key.pageUp)) {
+            scrollOffset = Math.max(0, scrollOffset - 12);
+            tui.requestRender();
+            return;
+          }
+          if (matchesKey(data, Key.pageDown)) {
+            scrollOffset += 12;
+            tui.requestRender();
+            return;
+          }
+          if (matchesKey(data, Key.home)) {
+            scrollOffset = 0;
+            tui.requestRender();
+            return;
+          }
+          if (matchesKey(data, Key.end)) {
+            scrollOffset = Number.MAX_SAFE_INTEGER;
+            tui.requestRender();
+            return;
+          }
+          if (data === "x") {
+            expandSelected = !expandSelected;
+            jumpToSelected = true;
+            tui.requestRender();
+            return;
+          }
+          const range = selected();
+          if (!range) return;
+          if (data === "e") done({ action: "edit-summary", draftId: range.id });
+          else if (data === "t") done({ action: "edit-topic", draftId: range.id });
+          else if (data === "d") done({ action: "remove", draftId: range.id });
+        },
+      };
+      return component;
+    },
+    { overlay: true, overlayOptions: { width: "92%", maxHeight: "86%", anchor: "center" } },
+  );
 }
 
 export function buildReviewText(atoms: Atom[], draft: DraftPlan, telemetry: DraftTelemetry): string {
@@ -165,7 +202,7 @@ export function buildReviewText(atoms: Atom[], draft: DraftPlan, telemetry: Draf
   ];
   for (const atom of atoms) {
     const owner = owningRange(atom.index, draft.ranges);
-    lines.push(`${owner ? owner.id : "KEEP"} ${atom.ref} [${atom.kind}] ~${formatTokenCount(atom.approxTokens)} ${firstLine(atom.preview)}`);
+    lines.push(`${owner ? owner.id : "KEEP"} ${atom.ref} [${atom.kind}] ${formatCount(atom.metrics.contentChars)} chars${atom.metrics.imageCount ? ` · ${atom.metrics.imageCount} images` : ""} ${firstLine(atom.preview, 120)}`);
   }
   if (draft.ranges.length) {
     lines.push("", "Proposed summaries:");
@@ -178,21 +215,28 @@ function owningRange(atomIndex: number, ranges: DraftRange[]): DraftRange | unde
   return ranges.find((range) => atomIndex >= range.startIndex && atomIndex <= range.endIndex);
 }
 
-function firstLine(text: string): string {
-  return text.replace(/\s+/g, " ").trim();
+function firstLine(text: string, limit = 120): string {
+  const normalized = text.replace(/\s+/g, " ").trim();
+  if (normalized.length <= limit) return normalized;
+  return `${normalized.slice(0, Math.max(0, limit - 1))}…`;
+}
+
+function hint(text: string, theme: ExtensionCommandContext["ui"]["theme"]): string {
+  return theme.fg("accent", text);
 }
 
 function plainUsageLine(telemetry: DraftTelemetry): string {
-  const anchor = telemetry.contextWindow === null
-    ? "anchor usage unavailable"
-    : `${formatTokenCount(telemetry.anchorTokens)}/${formatTokenCount(telemetry.contextWindow)} (${formatPercent(telemetry.anchorPercent)})`;
-  const projected = telemetry.projectedTokens === null || telemetry.contextWindow === null
-    ? "projected unavailable"
-    : `~${formatTokenCount(telemetry.projectedTokens)}/${formatTokenCount(telemetry.contextWindow)} (${formatPercent(telemetry.projectedPercent, true)})`;
-  return `Anchor ${anchor} · Draft selected ~${formatTokenCount(telemetry.selectedOriginalApproxTokens)}→~${formatTokenCount(telemetry.selectedCompressedApproxTokens)} · Projected ${projected}`;
+  const usage = telemetry.anchorUsage;
+  const anchor = usage
+    ? `${usage.tokens === null ? "unavailable" : formatCount(usage.tokens)}/${formatCount(usage.contextWindow)} tokens (${usage.percent === null ? "unavailable" : `${usage.percent}%`}, Pi reported)`
+    : "Pi reported anchor usage unavailable";
+  return `Anchor ${anchor} · Draft ${telemetry.rangeCount} ranges · ${formatCount(telemetry.selectedOriginalContentChars)}→${formatCount(telemetry.selectedReplacementContentChars)} chars · ${telemetry.selectedImageCount} images · ${telemetry.pendingSummaryCount} pending`;
+}
+
+function formatCount(value: number): string {
+  return value.toLocaleString("en-US");
 }
 
-function formatUsageLine(telemetry: DraftTelemetry, theme: ExtensionCommandContext["ui"]["theme"]): string {
-  const label = theme.fg("accent", "Context");
-  return `${label}: ${plainUsageLine(telemetry)}`;
+function usageLine(telemetry: DraftTelemetry, theme: ExtensionCommandContext["ui"]["theme"]): string {
+  return `${theme.fg("accent", "Context")}: ${plainUsageLine(telemetry)}`;
 }