pi-claude-code-ui 1.0.93 → 1.0.95

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 > [!IMPORTANT]
 > **1.0.69 — package rename (permanent).** Canonical npm name is now [`pi-claude-code-ui`](https://www.npmjs.com/package/pi-claude-code-ui). `pi-claude-style-tools` is legacy and will not receive further releases. Install with `pi install npm:pi-claude-code-ui` or `npm i pi-claude-code-ui`.
 
+## 1.0.95 — 2026-10-25
+
+### Changed
+
+- **The working line's token count climbs as the model writes**, like pi-polish: `↓ N tokens` now includes thinking and tool-call arguments while they stream (it only counted visible text, so it sat near zero while the model thought), each finished message adds the provider's real output-token count, and the count keeps going across the turns of one request instead of starting over after every tool call.
+- **Running bash commands no longer repeat their script under the row** by default. Set `bashCommandPreviewLines` (for example to `8`) to bring the preview back, for running and failed commands; `Ctrl+O` still shows the whole command.
+
+## 1.0.94 — 2026-10-25
+
+### Changed
+
+- **Connectors hang under the tool name** - `├ └ │` start under the first letter of the label (`● Edit stats.py` / `  └ +1 -1 at line 4`) instead of under the `●`, in tool rows, expanded groups, subagent notices and the Agents widget. Expanded groups keep each call's own indentation, so output sits after its `└`.
+- **Status lines are dim** - the line under a command (`Done (3 lines)`, `2 matches`, `+1 -1 • 1 hunk at line 4`) is drawn in the theme's `dim` color, as pi-polish does; errors stay red. The colored `[━━━━]` bar is gone from diff summaries, since it carries nothing in one color.
+
+### Fixed
+
+- **A failed read said "1 lines loaded"**; it now shows the error.
+
 ## 1.0.93 — 2026-10-25
 
 ### Added

package/README.md

@@ -19,7 +19,7 @@ Claude Code inspired tool rendering for Pi — Shiki-powered diffs, status dots,
 - **Claude-style OpenAI tool rendering** for `apply_patch` plus common Pi/OpenAI-style tools like `webfetch`, `web_search`, `fetch_content`, task tools, and context tools
 - **`apply_patch` diff previews** that render parsed file patches in the call phase, similar to `edit`/`write`
 - **Adaptive edit/write diffs** with split or unified layouts, syntax highlighting, and inline word-level emphasis
-- **Diff stat bar** with colored add/remove summary and hunk metadata
+- **Diff summary** under each edit: added/removed line counts and hunk metadata, in the same quiet color as every other status line
 - **Progressive collapsed diff hints** that shorten on narrow terminals
 - **Live-only thinking** (default) — only the actively-streaming thinking renders expanded; finished thinking collapses to a one-line `Thought for Xs` row (`/cc-tools thinking full` restores always-expanded, `Ctrl+O` still expands anything)
 - **MCP-aware rendering** with hidden, summary, and preview modes
@@ -31,7 +31,7 @@ Claude Code inspired tool rendering for Pi — Shiki-powered diffs, status dots,
 - **Transparent tool backgrounds** in `transparent` or `border` mode
 - **Terminal colors** (default, pi 1.4+) — pi's theme follows the terminal's own palette (Ghostty, Rex, kitty, WezTerm, …), including switches between two dark or two light themes; `/cc-theme terminal off` keeps a theme of your choice
 - **Theme-adaptive palette** — dim text, spinner accent, diff highlighting, and diff backgrounds automatically follow the active pi theme (set `themeAdaptive: false` to keep the fixed Claude-style palette)
-- **Faint branch connectors** — `├ └ │` keep the same faint contrast on every terminal background, dark or light
+- **Faint branch connectors** — `├ └ │` hang under the first letter of the tool name, keep the same faint contrast on every terminal background, and the status line after them (`Done`, `2 matches`, `+1 -1`) is drawn in the theme's dim color, as in pi-polish
 - **Transparent edit/write diffs** tinted with the theme's own diff colors
 - **Grouped consecutive tool calls** read as one sentence: `Read 2 files, ran 1 shell command`, or while they run `Reading 2 files, running 1 shell command… · 3s` with the call in progress underneath. `Ctrl+O` shows every call (set `groupToolCalls: false` to disable)
 - **Activity status line** — while a tool runs, the working line says what it is doing (`Running npm test…`, `Reading stats.py…`, `Searching for TODO…`); the playful verbs stay for the time the model is thinking
@@ -57,7 +57,7 @@ Set in `.pi/settings.json` or the active Pi agent settings file (`$PI_CODING_AGE
   "thinkingMode": "live",
   "bashOutputMode": "opencode",
   "bashCollapsedLines": 10,
-  "bashCommandPreviewLines": 8,
+  "bashCommandPreviewLines": 0,
   "liveToolPreview": true,
   "liveToolPreviewLines": 5,
   "diffCollapsedLines": 24,
@@ -120,7 +120,7 @@ The selection is persisted to the active Pi agent settings file and applied to t
 
 #### Repaint the spinner with `/cc-spinner`
 
-While a tool runs, the verb names what it is doing (`Running npm test…`); otherwise it is a playful verb. The spinner glyph itself is still colored by pi's loader using `accent`, while the verb text (e.g. `Cooking…`) follows `borderAccent` by default so it stays lively without being the exact same color as the glyph. The status suffix (e.g. `(thinking · ↓ 10 tokens · 2s)`) follows `muted`. Use `/cc-spinner` to bind either text element to any other theme color key:
+While a tool runs, the verb names what it is doing (`Running npm test…`); otherwise it is a playful verb. The spinner glyph itself is still colored by pi's loader using `accent`, while the verb text (e.g. `Cooking…`) follows `borderAccent` by default so it stays lively without being the exact same color as the glyph. The status suffix (e.g. `(thinking · ↓ 331 tokens · 6s)`) follows `muted`; its token count covers everything the model has written for the current request, thinking and tool calls included, and climbs as it streams. Use `/cc-spinner` to bind either text element to any other theme color key:
 
 ```text
 /cc-spinner preview          # list every common theme key with a colored sample
@@ -171,7 +171,7 @@ Use `/cc-tools` to control tool UI at runtime:
 | `groupToolCalls` | `true` | Group adjacent/concurrent calls, collapsing repeated targets into one row |
 | `thinkingMode` | `live` | `live` = only streaming thinking expands (finished collapse to `Thought for Xs`); `full` = always expanded |
 | `bashCollapsedLines` | `10` | Lines for collapsed bash output |
-| `bashCommandPreviewLines` | `8` | Verbatim script lines shown while bash runs or after failure; `0` disables them |
+| `bashCommandPreviewLines` | `0` | Script lines of a multi-line command shown under the row while bash runs or after it fails (for example `8`); `0` shows none. `Ctrl+O` always shows the whole command |
 | `liveToolPreview` | `true` | Show a small live output preview while tools are still running |
 | `liveToolPreviewLines` | `5` | Lines shown in the collapsed live preview |
 | `diffCollapsedLines` | `24` | Diff lines before collapsing |

package/config/config.example.json

@@ -11,7 +11,7 @@
   "thinkingMode": "live",
   "bashOutputMode": "opencode",
   "bashCollapsedLines": 10,
-  "bashCommandPreviewLines": 8,
+  "bashCommandPreviewLines": 0,
   "liveToolPreview": true,
   "liveToolPreviewLines": 5,
   "diffCollapsedLines": 24,

package/extensions/index.ts

@@ -795,6 +795,17 @@ function stripLeadingToolStatus(line: string): string {
 	);
 }
 
+/** Remove up to `count` leading spaces, keeping any escape codes in front of them. */
+function trimAnsiLeftBy(text: string, count: number): string {
+	let current = text;
+	for (let i = 0; i < count; i++) {
+		const next = current.replace(/^((?:\x1b\[[0-9;]*m)*) /, "$1");
+		if (next === current) break;
+		current = next;
+	}
+	return current;
+}
+
 function trimAnsiLeft(text: string): string {
 	let current = text;
 	while (true) {
@@ -898,9 +909,14 @@ function getCollapsedToolEntryLine(entry: CollapsedToolEntry, width: number, gro
 }
 
 function getExpandedToolGroupLines(tool: any, width: number, groupedLabel?: string): string[] {
-	const lines = stripToolChrome(tool.render(Math.max(1, width)))
-		.map((line) => removeGroupedToolPrefix(line, groupedLabel))
-		.map((line) => tintGroupedToolLine(line, groupedLabel));
+	const rendered = stripToolChrome(tool.render(Math.max(1, width)));
+	// The child row's own padding is its first line's leading spaces. The header loses its
+	// marker and padding; the lines below lose only the padding, so the child's └ and the
+	// output under it keep their indent.
+	const childPad = /^ */.exec(stripAnsi(rendered[0] ?? ""))?.[0].length ?? 0;
+	const lines = rendered.map((line, index) =>
+		index === 0 ? tintGroupedToolLine(removeGroupedToolPrefix(line, groupedLabel), groupedLabel) : trimAnsiLeftBy(line, childPad),
+	);
 	return lines.length > 0 ? lines : [`${FG_DIM}${String(tool?.toolName ?? "tool")}${TRANSPARENT_RESET}`];
 }
 
@@ -908,13 +924,13 @@ function branchPrefix(index: number, total: number, theme?: Theme): string {
 	// Bare tee/corner only — no horizontal ─ arm.
 	const branch = index === total - 1 ? "└" : "├";
 	const rule = currentToolBranchAnsi(theme);
-	return ` ${rule}${branch}${TRANSPARENT_RESET} `;
+	return ` ${BRANCH_INDENT}${rule}${branch}${TRANSPARENT_RESET} `;
 }
 
 function branchContinuation(index: number, total: number, theme?: Theme): string {
 	const rule = currentToolBranchAnsi(theme);
 	// Match lead width of ` X ` (3 cols of structure + spaces handled outside).
-	return index === total - 1 ? "   " : ` ${rule}│${TRANSPARENT_RESET} `;
+	return index === total - 1 ? `   ${BRANCH_INDENT}` : ` ${BRANCH_INDENT}${rule}│${TRANSPARENT_RESET} `;
 }
 
 function formatBranchedToolLines(
@@ -938,8 +954,8 @@ function formatBranchedToolLines(
 		// Always strip any leftover status marker from the child call line before
 		// re-prefixing. Agent breathe used · which the old stripper missed, so the
 		// title walked sideways as size changed inside groups.
-		const body = lineIndex === 0 ? removeGroupedToolPrefix(line) : trimAnsiLeft(line);
-		const prefix = lineIndex === 0 ? `${branchPrefix(index, total)}${light} ` : `${branchContinuation(index, total)}  `;
+		const body = lineIndex === 0 ? removeGroupedToolPrefix(line) : line;
+		const prefix = lineIndex === 0 ? `${branchPrefix(index, total)}${light} ` : `${branchContinuation(index, total)}`;
 		output.push(clampLineWidth(`${prefix}${body}`, width));
 	}
 	return output;
@@ -1200,12 +1216,13 @@ class ToolGroupComponent extends Container {
 					const activeLine = stripAnsi(getCompactToolLine(active, Math.max(1, safeWidth - 3), undefined, false))
 						.trim()
 						.replace(/\s+\(\d+ lines?\)$/, "");
-					header.push(clampLineWidth(` ${currentToolBranchAnsi()}└${TRANSPARENT_RESET} ${FG_DIM}${activeLine}${TRANSPARENT_RESET}`, safeWidth));
+					const dim = safeFgAnsi(getGlobalPiTheme(), "dim") ?? FG_DIM;
+					header.push(clampLineWidth(` ${BRANCH_INDENT}${currentToolBranchAnsi()}└${TRANSPARENT_RESET} ${dim}${activeLine}${TRANSPARENT_RESET}`, safeWidth));
 				}
 			}
 			recordLines(header, undefined);
 			lines.push(...header);
-			const childWidth = Math.max(1, safeWidth - 6);
+			const childWidth = Math.max(1, safeWidth - 6 - BRANCH_INDENT.length);
 			if (this.expanded) {
 				for (let index = 0; index < total; index++) {
 					const tool = this.tools[index];
@@ -1439,7 +1456,7 @@ function formatTodoOverlayLines(lines: string[], width: number): string[] {
 		const withoutTodoHash = line.replace(/#(?=[A-Za-z0-9_-]+)/, "");
 		const bare = withoutTodoHash.replace(/([├└])─/, "$1");
 		const colored = bare.replace(/[├└]/, (branch) => `${currentToolBranchAnsi()}${branch}${TRANSPARENT_RESET}`);
-		return clampLineWidth(` ${colored}`, width);
+		return clampLineWidth(` ${BRANCH_INDENT}${colored}`, width);
 	});
 }
 
@@ -2671,7 +2688,7 @@ function renderSubagentNotificationLines(details: any, expanded: boolean, width:
 		const header = ` ${dot} ${theme.fg("toolTitle", theme.bold("Agent"))} ${theme.fg("accent", String(agent.description ?? "agent"))} ${theme.fg(failed ? "error" : "muted", statusLabel)}`;
 		const body: string[] = [];
 		const stats = agentStatsText(agent);
-		if (stats) body.push(theme.fg("muted", stats));
+		if (stats) body.push(theme.fg("dim", stats));
 		const preview = String(agent.resultPreview ?? "").trim();
 		if (preview) {
 			const previewLines = preview.split("\n");
@@ -2682,7 +2699,7 @@ function renderSubagentNotificationLines(details: any, expanded: boolean, width:
 			body.push(theme.fg("muted", `transcript: ${agent.outputFile}`));
 		}
 		const lines = [header];
-		body.forEach((line, index) => lines.push(` ${branchGlyph(index === body.length - 1 ? "└" : "├")} ${line}`));
+		body.forEach((line, index) => lines.push(` ${BRANCH_INDENT}${branchGlyph(index === body.length - 1 ? "└" : "├")} ${line}`));
 		blocks.push(lines.map((line) => clampLineWidth(line, width)));
 	}
 	return blocks.flatMap((block, index) => (index === 0 ? block : ["", ...block]));
@@ -2712,12 +2729,13 @@ function restyleAgentWidgetLines(lines: string[], width: number): string[] {
 			// The running spinner becomes the breathing dot running agent rows use.
 			rest = rest.replace(AGENT_WIDGET_SPINNER_RE, () => paintAgentBreatheDot(TOOL_STATUS_SUCCESS));
 			rest = normalizeLeadingCheckGlyph(rest);
-			return clampLineWidth(` ${branchGlyph(item[2] as "├" | "└")} ${rest}`, width);
+			return clampLineWidth(` ${BRANCH_INDENT}${branchGlyph(item[2] as "├" | "└")} ${rest}`, width);
 		}
 		const activity = AGENT_WIDGET_ACTIVITY_RE.exec(line);
 		if (activity) {
 			const bar = activity[2] === "│" ? branchGlyph("│") : " ";
-			return clampLineWidth(` ${bar}   ${FG_DIM}${stripAnsi(activity[5])}${TRANSPARENT_RESET}`, width);
+			const dim = safeFgAnsi(getGlobalPiTheme(), "dim") ?? FG_DIM;
+			return clampLineWidth(` ${BRANCH_INDENT}${bar}   ${dim}${stripAnsi(activity[5])}${TRANSPARENT_RESET}`, width);
 		}
 		return line;
 	});
@@ -3810,36 +3828,75 @@ function toolStatusDot(ctx: any, theme: Theme): string {
 // Branch connector — visual tree from header to output
 // ---------------------------------------------------------------------------
 
+// Connectors hang under the first letter of the tool's label, two columns in from its ●
+// (`● Edit stats.py` / `  └ +1 -1 at line 4`), like Claude Code and pi-polish.
+const BRANCH_INDENT = "  ";
+
 function branchIndent(text: string, continued = false, theme?: Theme): string {
 	const rule = currentToolBranchAnsi(theme);
 	// Align under bare `├ `/`└ ` (│ + one space, or two spaces when closed).
 	const prefix = continued ? `${rule}│${TRANSPARENT_RESET} ` : "  ";
-	return `${prefix}${WRAP_MARK}${text}`;
+	return `${BRANCH_INDENT}${prefix}${WRAP_MARK}${text}`;
 }
 
 function branchLead(text: string, continued = false, theme?: Theme): string {
 	const rule = currentToolBranchAnsi(theme);
 	// Bare tee/corner only — no horizontal ─ arm.
-	return `${rule}${continued ? "├" : "└"}${TRANSPARENT_RESET} ${WRAP_MARK}${text}`;
+	return `${BRANCH_INDENT}${rule}${continued ? "├" : "└"}${TRANSPARENT_RESET} ${WRAP_MARK}${text}`;
+}
+
+// SGR parameters that set a foreground color: 30–37, 39, 90–97, 38;5;n, 38;2;r;g;b.
+function stripForegroundAnsi(text: string): string {
+	return text.replace(/\x1b\[([0-9;]*)m/g, (match, paramsText: string) => {
+		if (paramsText === "") return match;
+		const params = paramsText.split(";");
+		const kept: string[] = [];
+		for (let i = 0; i < params.length; i++) {
+			const code = Number(params[i] || "0");
+			if (code === 38) {
+				const mode = Number(params[i + 1] || "0");
+				i += mode === 2 ? 4 : mode === 5 ? 2 : 1;
+				continue;
+			}
+			if ((code >= 30 && code <= 37) || code === 39 || (code >= 90 && code <= 97)) continue;
+			kept.push(params[i]);
+		}
+		return kept.length === 0 ? "" : `\x1b[${kept.join(";")}m`;
+	});
 }
 
-function withBranch(content: string, theme: Theme, _isError = false, continued = false): string {
+/**
+ * The status line under a tool's label ("Done (3 lines)", "2 matches", "+1 -1 at line 4")
+ * in the theme's dim color, as pi-polish draws it. Errors keep their red.
+ */
+function toneStatusLine(text: string, theme?: Theme): string {
+	const t = (theme ?? getGlobalPiTheme()) as any;
+	const dim = safeFgAnsi(t, "dim");
+	if (!dim || !text.trim()) return text;
+	const error = safeFgAnsi(t, "error");
+	if ((error && text.includes(error)) || text.includes(TOOL_STATUS_ERROR)) return text;
+	const body = stripForegroundAnsi(text).replace(/\x1b\[0?m/g, (reset) => `${reset}${dim}`);
+	return `${dim}${body}\x1b[39m`;
+}
+
+/** `tone`: the first line is a status line (dim); pass false when it is content (a command, a path). */
+function withBranch(content: string, theme: Theme, _isError = false, continued = false, tone = true): string {
 	if (!content || !content.trim()) return "";
 	const lines = content.split("\n");
-	const first = lines[0] ?? "";
+	const first = tone ? toneStatusLine(lines[0] ?? "", theme) : lines[0] ?? "";
 	if (lines.length === 1) return branchLead(first, continued, theme);
 	const rest = lines.slice(1).map((line) => branchIndent(line, continued, theme));
 	return `${branchLead(first, continued, theme)}\n${rest.join("\n")}`;
 }
 
-function withClippedBranch(content: string, theme: Theme, continued = false): string {
-	return withBranch(content, theme, false, continued).replaceAll(WRAP_MARK, CLIP_MARK);
+function withClippedBranch(content: string, theme: Theme, continued = false, tone = true): string {
+	return withBranch(content, theme, false, continued, tone).replaceAll(WRAP_MARK, CLIP_MARK);
 }
 
-function withFinalBranchBlock(content: string, theme: Theme, isError = false): string {
+function withFinalBranchBlock(content: string, theme: Theme, isError = false, tone = true): string {
 	if (!content || !content.trim()) return "";
 	const lines = content.split("\n");
-	const first = lines[0] ?? "";
+	const first = tone ? toneStatusLine(lines[0] ?? "", theme) : lines[0] ?? "";
 	if (lines.length === 1) return branchLead(first, false, theme);
 	const middle = lines.slice(1, -1).map((line) => branchIndent(line, true, theme));
 	const last = lines[lines.length - 1] ?? "";
@@ -4239,9 +4296,11 @@ function bashOutputMode(): "opencode" | "summary" | "preview" {
 	return getMode(readSettings().bashOutputMode, ["opencode", "summary", "preview"] as const, "opencode");
 }
 
+// Off by default: the header already names the command, and repeating a long script under
+// it while it runs made the transcript busy. Ctrl+O still shows the whole command.
 function bashCommandPreviewLimit(): number {
 	const value = readSettings().bashCommandPreviewLines;
-	return typeof value === "number" && Number.isFinite(value) && value >= 0 ? Math.floor(value) : 8;
+	return typeof value === "number" && Number.isFinite(value) && value >= 0 ? Math.floor(value) : 0;
 }
 
 function renderBashCommandBlock(
@@ -4259,7 +4318,8 @@ function renderBashCommandBlock(
 		lines.push(`... ${presentation.sourceLines.length - sourceLimit} more command lines`);
 	}
 	const body = lines.map((line) => theme.fg("accent", line || " ")).join("\n");
-	return expanded ? withBranch(body, theme, false, true) : withClippedBranch(body, theme, true);
+	// The command itself, not a status line: keep its color.
+	return expanded ? withBranch(body, theme, false, true, false) : withClippedBranch(body, theme, true, false);
 }
 
 function liveToolPreviewEnabled(): boolean {
@@ -5220,7 +5280,7 @@ function termW(): number {
 	return Math.max(40, Math.min(raw - 4, MAX_TERM_WIDTH));
 }
 
-function branchDiffWidth(componentWidth?: number, chromeWidth = 2): number {
+function branchDiffWidth(componentWidth?: number, chromeWidth = 2 + BRANCH_INDENT.length): number {
 	const width = typeof componentWidth === "number" && Number.isFinite(componentWidth)
 		? Math.floor(componentWidth)
 		: termW();
@@ -5230,7 +5290,7 @@ function branchDiffWidth(componentWidth?: number, chromeWidth = 2): number {
 // Diff preview cache keys also carry _toolBranchVisualEpoch, which applyThemePaletteIfNeeded
 // bumps when the theme palette changes: otherwise rows rendered before a /theme or light/dark
 // switch kept the old diff backgrounds and stat colors while new rows used the new ones.
-function contextDiffWidth(ctx: any, chromeWidth = 2): number {
+function contextDiffWidth(ctx: any, chromeWidth = 2 + BRANCH_INDENT.length): number {
 	return branchDiffWidth(ctx.state?._diffComponentWidth, chromeWidth);
 }
 
@@ -5390,26 +5450,12 @@ function stripes(width: number): string {
 	return BG_BASE + FG_STRIPE + "╱".repeat(width) + D_RST;
 }
 
-function renderDiffStatBar(added: number, removed: number, width = termW()): string {
-	const total = added + removed;
-	if (total === 0 || width < 20) return "";
-	const slots = Math.max(8, Math.min(20, Math.floor(width / 14)));
-	let addSlots = Math.max(0, Math.min(slots, Math.round((added / total) * slots)));
-	if (added > 0 && addSlots === 0) addSlots = 1;
-	if (removed > 0 && addSlots >= slots) addSlots = slots - 1;
-	const removeSlots = Math.max(0, slots - addSlots);
-	const addBar = addSlots > 0 ? `${FG_ADD}${"━".repeat(addSlots)}${D_RST}` : "";
-	const removeBar = removeSlots > 0 ? `${FG_DEL}${"━".repeat(removeSlots)}${D_RST}` : "";
-	return `${FG_DIM}[${D_RST}${addBar}${removeBar}${FG_DIM}]${D_RST}`;
-}
-
 function summarizeDiff(added: number, removed: number): string {
 	const parts: string[] = [];
 	if (added > 0) parts.push(`${FG_ADD}+${added}${D_RST}`);
 	if (removed > 0) parts.push(`${FG_DEL}-${removed}${D_RST}`);
 	if (!parts.length) return `${FG_DIM}no changes${D_RST}`;
-	const bar = renderDiffStatBar(added, removed);
-	return bar ? `${parts.join(" ")} ${bar}` : parts.join(" ");
+	return parts.join(" ");
 }
 
 function diffSummaryWithMeta(added: number, removed: number, hunks: number, mode: string): string {
@@ -7570,7 +7616,8 @@ function renderBashFileEditResult(edit: BashFileEdit, records: BashFileEditRecor
 		const block = bashFileEditDiffBlock(record, index, theme, ctx);
 		return records!.length > 1 ? `${theme.fg("accent", sp(resolveBashEditPath(ctx.cwd ?? process.cwd(), edit, record.path)))}\n${block}` : block;
 	});
-	return makeResponsiveDiffText(ctx, ctx.lastComponent, withFinalBranchBlock(blocks.join("\n"), theme));
+	// With several files the first line is a path, not a status line.
+	return makeResponsiveDiffText(ctx, ctx.lastComponent, withFinalBranchBlock(blocks.join("\n"), theme, false, records.length === 1));
 }
 
 // ===========================================================================
@@ -8075,6 +8122,11 @@ export default function (pi: ExtensionAPI) {
 			const details = result.details as ReadToolDetails | undefined;
 			const content = result.content.find((block: any) => block?.type === "text");
 			if (content?.type !== "text") return makeText(ctx.lastComponent, withBranch(theme.fg("error", "No text content"), theme));
+			// A failed read (missing file, permission) said "1 lines loaded"; show the error instead.
+			if (ctx.isError) {
+				const message = content.text.trim().split("\n");
+				return makeText(ctx.lastComponent, withBranch(theme.fg("error", expanded ? message.join("\n") : message[0] ?? "Error"), theme));
+			}
 			const lines = content.text.split("\n");
 			let text = theme.fg("muted", `${lines.length} lines loaded`);
 			if (details?.truncation?.truncated) text += theme.fg("warning", " (truncated)");

package/extensions/spinner.ts

@@ -545,22 +545,26 @@ function formatCount(value: number): string {
 	return new Intl.NumberFormat("en-US").format(value);
 }
 
-function estimateResponseLength(message: any): number {
-	if (!Array.isArray(message?.content)) return 0;
-	return message.content.reduce((sum: number, block: any) =>
-		sum + (block?.type === "text" && typeof block.text === "string" ? block.text.length : 0), 0);
-}
-
-function textBlockLengths(message: any): number[] {
-	if (!Array.isArray(message?.content)) return [];
-	const lengths: number[] = [];
-	for (let i = 0; i < message.content.length; i++) {
-		const block = message.content[i];
-		if (block?.type === "text" && typeof block.text === "string") {
-			lengths[i] = block.text.length;
+/** Characters the model produced in one content block: text, thinking, or tool-call arguments. */
+function contentBlockLength(block: any): number {
+	if (block?.type === "text" && typeof block.text === "string") return block.text.length;
+	if (block?.type === "thinking" && typeof block.thinking === "string") return block.thinking.length;
+	if (block?.type === "toolCall") {
+		try {
+			return JSON.stringify(block.arguments ?? {}).length;
+		} catch {
+			return 0;
 		}
 	}
-	return lengths;
+	return 0;
+}
+
+/** Output tokens of a finished assistant message: the provider's count, or an estimate (chars / 4). */
+function messageOutputTokens(message: any): number {
+	const reported = message?.usage?.output;
+	if (typeof reported === "number" && Number.isFinite(reported) && reported > 0) return reported;
+	if (!Array.isArray(message?.content)) return 0;
+	return Math.round(message.content.reduce((sum: number, block: any) => sum + contentBlockLength(block), 0) / 4);
 }
 
 function statusText(text: string): string {
@@ -776,8 +780,12 @@ export default function (pi: ExtensionAPI) {
 	let completionTimer: ReturnType<typeof setTimeout> | null = null;
 	let thoughtStatusTimer: ReturnType<typeof setTimeout> | null = null;
 	let currentVerb = "";
-	let responseLength = 0;
-	let responseTextBlockLengths: number[] = [];
+	// Output tokens for the whole run, like pi-polish: finished messages add their real
+	// usage.output; the message still streaming adds an estimate (chars / 4) of its text,
+	// thinking and tool-call arguments, so the count climbs as the model writes.
+	let runOutputTokens = 0;
+	let streamedChars = 0;
+	let streamedBlockLengths: number[] = [];
 	let thinkingStatus: "thinking" | number /* duration ms */ | null = null;
 	let thinkingStartTime = 0;
 	let thoughtForSetAt = 0;
@@ -803,7 +811,7 @@ export default function (pi: ExtensionAPI) {
 
 	function buildWorkingMessage(): string {
 		const elapsed = Date.now() - (agentStartTime || turnStartTime);
-		const tokenCount = Math.max(0, Math.round(responseLength / 4));
+		const tokenCount = outputTokenCount();
 		const statusParts: string[] = [];
 
 		if (thinkingStatus === "thinking") {
@@ -832,15 +840,27 @@ export default function (pi: ExtensionAPI) {
 		return message;
 	}
 
-	function setResponseTextBlockLength(index: number, length: number): void {
-		const previous = responseTextBlockLengths[index] ?? 0;
-		responseTextBlockLengths[index] = Math.max(0, length);
-		responseLength = Math.max(0, responseLength + responseTextBlockLengths[index] - previous);
+	function setStreamedBlockLength(index: number, length: number): void {
+		const previous = streamedBlockLengths[index] ?? 0;
+		streamedBlockLengths[index] = Math.max(0, length);
+		streamedChars = Math.max(0, streamedChars + streamedBlockLengths[index] - previous);
+	}
+
+	function resetStreamed(): void {
+		streamedBlockLengths = [];
+		streamedChars = 0;
 	}
 
-	function resetResponseTracking(message?: any): void {
-		responseTextBlockLengths = message ? textBlockLengths(message) : [];
-		responseLength = message ? estimateResponseLength(message) : 0;
+	function outputTokenCount(): number {
+		return runOutputTokens + Math.round(streamedChars / 4);
+	}
+
+	/** Start of a top-level request (not steering or follow-ups inside it). */
+	function beginRun(now = Date.now()): void {
+		if (agentStartTime) return;
+		agentStartTime = now;
+		runOutputTokens = 0;
+		resetStreamed();
 	}
 
 	function syncWorkingMessage(force = false): void {
@@ -877,7 +897,7 @@ export default function (pi: ExtensionAPI) {
 
 	function getWorkingMessageIntervalMs(): number {
 		const elapsed = Date.now() - (agentStartTime || turnStartTime);
-		const tokenCount = Math.max(0, Math.round(responseLength / 4));
+		const tokenCount = outputTokenCount();
 		// Keep ticking once per second even when idle so /cc-spinner changes
 		// take effect within ~1s and elapsed-time crossover into the timer-on
 		// state still fires close to 30s. syncWorkingMessage short-circuits
@@ -964,7 +984,8 @@ export default function (pi: ExtensionAPI) {
 		turnStartTime = 0;
 		thinkingStatus = null;
 		thoughtForSetAt = 0;
-		resetResponseTracking();
+		runOutputTokens = 0;
+		resetStreamed();
 		restoreDefaultWorkingMessage();
 	}
 
@@ -1008,12 +1029,12 @@ export default function (pi: ExtensionAPI) {
 
 	pi.on("before_agent_start", async () => {
 		// Start once per top-level request. Steering/follow-up messages while the
-		// agent is active must not reset the timer.
-		if (!agentStartTime) agentStartTime = Date.now();
+		// agent is active must not reset the timer or the token count.
+		beginRun();
 	});
 
 	pi.on("agent_start", async (_event, ctx) => {
-		if (!agentStartTime) agentStartTime = Date.now();
+		beginRun();
 		herdrMarkWorking(ctx);
 	});
 
@@ -1023,9 +1044,9 @@ export default function (pi: ExtensionAPI) {
 		activeCtx = ctx;
 		applyThemeColors(ctx.ui?.theme);
 		turnStartTime = Date.now();
-		if (!agentStartTime) agentStartTime = turnStartTime;
+		beginRun(turnStartTime);
 		currentVerb = pickVerb();
-		resetResponseTracking();
+		resetStreamed();
 		clearCompletionTimer();
 		if (typeof thinkingStatus !== "number" || Date.now() - thoughtForSetAt >= THOUGHT_DISPLAY_MS) {
 			thinkingStatus = null;
@@ -1044,21 +1065,19 @@ export default function (pi: ExtensionAPI) {
 		applyThemeColors(ctx.ui?.theme);
 		const evt = event.assistantMessageEvent;
 		let statusChanged = false;
-		const previousTokenCount = Math.max(0, Math.round(responseLength / 4));
+		const previousTokenCount = outputTokenCount();
 
 		if (evt.type === "start") {
-			resetResponseTracking();
-		} else if (evt.type === "text_start") {
-			setResponseTextBlockLength(evt.contentIndex, 0);
-		} else if (evt.type === "text_delta") {
-			const previous = responseTextBlockLengths[evt.contentIndex] ?? 0;
-			setResponseTextBlockLength(evt.contentIndex, previous + (typeof evt.delta === "string" ? evt.delta.length : 0));
-		} else if (evt.type === "text_end") {
-			setResponseTextBlockLength(evt.contentIndex, typeof evt.content === "string" ? evt.content.length : 0);
-		} else if (evt.type === "done") {
-			resetResponseTracking(evt.message);
-		} else if (evt.type === "error") {
-			resetResponseTracking(evt.error);
+			resetStreamed();
+		} else if (evt.type === "text_start" || evt.type === "thinking_start" || evt.type === "toolcall_start") {
+			setStreamedBlockLength(evt.contentIndex, 0);
+		} else if (evt.type === "text_delta" || evt.type === "thinking_delta" || evt.type === "toolcall_delta") {
+			const previous = streamedBlockLengths[evt.contentIndex] ?? 0;
+			setStreamedBlockLength(evt.contentIndex, previous + (typeof evt.delta === "string" ? evt.delta.length : 0));
+		} else if (evt.type === "text_end" || evt.type === "thinking_end") {
+			setStreamedBlockLength(evt.contentIndex, typeof evt.content === "string" ? evt.content.length : 0);
+		} else if (evt.type === "toolcall_end") {
+			setStreamedBlockLength(evt.contentIndex, contentBlockLength({ type: "toolCall", arguments: evt.toolCall?.arguments }));
 		}
 
 		if (evt.type === "thinking_start") {
@@ -1081,12 +1100,20 @@ export default function (pi: ExtensionAPI) {
 			return;
 		}
 
-		const nextTokenCount = Math.max(0, Math.round(responseLength / 4));
+		const nextTokenCount = outputTokenCount();
 		if (previousTokenCount === 0 && nextTokenCount > 0) {
 			rescheduleRefreshLoop();
 		}
 	});
 
+	// A finished message swaps its estimate for the provider's real output-token count.
+	pi.on("message_end", async (event: any) => {
+		if (event?.message?.role !== "assistant") return;
+		runOutputTokens += messageOutputTokens(event.message);
+		resetStreamed();
+		if (turnActive) syncWorkingMessage();
+	});
+
 	pi.on("tool_execution_start", async (event: any, ctx) => {
 		if (typeof event?.toolCallId !== "string") return;
 		activeCtx = ctx;
@@ -1135,8 +1162,7 @@ export default function (pi: ExtensionAPI) {
 			return;
 		}
 
-		responseLength = 0;
-		responseTextBlockLengths = [];
+		resetStreamed();
 	});
 
 	pi.on("agent_end", async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-claude-code-ui",
-  "version": "1.0.93",
+  "version": "1.0.95",
   "description": "Claude Code-style grouped tool rows for pi with Ctrl+O/Ctrl+Shift+O previews, math rendering, and consistent built-in, MCP, and custom tool rendering",
   "keywords": [
     "pi-package",