pi-compact-tools 0.5.9 → 0.6.1

package/README.md

@@ -6,7 +6,7 @@ Compact, expandable rendering for Pi's built-in tools, with a polished GitHub Da
 
 ## Demo
 
-The recordings below use the optional [Nerd Font](#nerd-font-preset) preset. **The default configuration does not require a Nerd Font**: it uses portable emoji and standard Unicode icons instead, with the same spinner, timing, and expansion behavior.
+The recordings below use the optional [Nerd Font](#nerd-font-spinner-preset) spinner preset. **The default configuration does not require a Nerd Font**.
 
 ### Compact tool workflow
 
@@ -14,11 +14,11 @@ Active, successful, and failed tool calls stay compact while preserving useful s
 
 ![Compact tool workflow with Nerd Font](https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/nerd-font-workflow-optimized.gif)
 
-### Spinner and duration indicators
+### Spinner and duration display
 
-The spinner animates during execution, then changes to a duration-aware completion icon.
+The spinner animates during execution, then returns to a green success circle or red failure circle. Elapsed time remains visible in the neutral control color.
 
-![Spinner and duration indicators](https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/spinner-duration-optimized.gif)
+![Spinner and elapsed-time display](https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/spinner-duration-optimized.gif)
 
 ### Initially visible edit diffs
 
@@ -30,11 +30,13 @@ Completed `edit` rows show their full diff initially by default. The per-tool `a
 
 - Compact rendering for `read`, `write`, `edit`, `bash`, `powershell`, `grep`, `find`, and `ls`
 - Animated configurable spinner in fullscreen TUI mode
-- Millisecond-precision duration and configurable completion icons
+- Four-step `Ctrl+T` thinking cycle: summary, detail, summary, then hidden
+- Millisecond-precision duration with neutral status text
 - Per-tool initial compaction and global-toggle participation with `auto_compact: true` or `false`
 - Tool invocation details are always fully visible
 - Click toggles one result between hidden and fully visible; `Ctrl+O` toggles all participating rows
 - Full output on expansion and initially visible edit diffs by default
+- Width-cached expanded results and edit-diff processing for responsive fullscreen scrolling
 - Dark `│` and `└─` visual grouping
 - Distinct cool-blue thinking text
 - Windows, Unix, and classic Mac line-ending support
@@ -90,19 +92,13 @@ Default configuration:
   "spinner": {
     "frames": ["◐", "◓", "◑", "◒"],
     "intervalMs": 120
-  },
-  "durationIndicators": [
-    { "underMs": 1000, "icon": "⚡️", "color": "warning" },
-    { "underMs": 10000, "icon": "🔥", "color": "#D95C3F" },
-    { "underMs": 30000, "icon": "○", "color": "#79C0FF" },
-    { "icon": "⏳", "color": "#D2A8FF" }
-  ]
+  }
 }
 ```
 
-These defaults use emoji and standard Unicode, so they work without a Nerd Font. Fast tools finish immediately; no artificial spinner delay is added.
+Successful call titles use a green `●`, while failed call titles use a red `●`. `Done`, `Failed`, and elapsed time use the same neutral control color. Fast tools finish immediately; no artificial spinner delay is added.
 
-For a minimal blinking spinner that reuses the successful-tool circle, copy [`examples/compact-tools-2.json`](examples/compact-tools-2.json). Its frames use `● ● (blank) ● ●` at 120 ms intervals. The renderer's built-in frame dimming turns this into a fade-out/fade-in animation without Nerd Font glyphs. Duration indicators use a small `•` whose color changes by elapsed time; the fast tier uses the theme's warning color value `#E0A052` directly. Rename it to `compact-tools.json` or copy its contents to the active configuration path.
+For a minimal blinking spinner, copy [`examples/compact-tools-2.json`](examples/compact-tools-2.json). Its frames use `● ● (blank) ● ●` at 120 ms intervals. The renderer's built-in frame dimming turns this into a fade-out/fade-in animation. Rename it to `compact-tools.json` or copy its contents to the active configuration path.
 
 `auto_compact` controls each tool's initial state and whether it participates in the global `Ctrl+O` toggle:
 
@@ -112,8 +108,6 @@ For a minimal blinking spinner that reuses the successful-tool circle, copy [`ex
 
 Unspecified entries inherit the previous configuration layer. By default, `read`, `write`, and `bash` start compact and participate in the global toggle, while `edit` starts expanded and remains unaffected so code diffs stay visible.
 
-`durationIndicators` must have ascending `underMs` values, with a final fallback entry that omits `underMs`. `color` is optional and accepts a supported theme color or six-digit hex value. Existing icon-only configurations remain compatible.
-
 To enable all Unix-compatible tools:
 
 ```json
@@ -124,9 +118,9 @@ To enable all Unix-compatible tools:
 
 Add `"powershell"` on Windows if desired.
 
-## Nerd Font preset
+## Nerd Font spinner preset
 
-If your terminal uses a [Nerd Font](https://www.nerdfonts.com/), this preset enables all eight tools and the icons shown in the demos:
+If your terminal uses a [Nerd Font](https://www.nerdfonts.com/), this preset enables all eight tools and the spinner shown in the demos:
 
 ```json
 {
@@ -135,21 +129,23 @@ If your terminal uses a [Nerd Font](https://www.nerdfonts.com/), this preset ena
   "spinner": {
     "frames": ["✽", "✻", "✲", "✢", "✲", "✻"],
     "intervalMs": 80
-  },
-  "durationIndicators": [
-    { "underMs": 1000, "icon": "\uf0e7", "color": "warning" },
-    { "underMs": 10000, "icon": "\uf490", "color": "#D95C3F" },
-    { "underMs": 30000, "icon": "\udb81\udde3", "color": "#79C0FF" },
-    { "icon": "\udb81\udd1f", "color": "#D2A8FF" }
-  ]
+  }
 }
 ```
 
-The escaped code points remain readable on GitHub and are decoded to Nerd Font icons when JSON is loaded. Remove `"powershell"` on systems where it is unavailable.
+Remove `"powershell"` on systems where it is unavailable.
 
 ## Controls
 
-Relevant invocation details stay visible, including paths, patterns, shell commands, and auxiliary arguments. Read calls omit offset and limit noise, then report the number of lines read after completion. Large payloads represented as results, such as write content and edit diffs, follow the result toggle.
+`Ctrl+T` cycles every thinking block through:
+
+```text
+one-line summary → summary + │-indented detail → one-line summary → Thinking...
+```
+
+Standalone bold lines and Markdown headings split one provider thinking run into logical sections. Each section gets its own summary, optional `│`-indented detail, and control row; `Ctrl+T` cycles all sections together. While thinking streams, a text-color highlight sweeps across summaries using streaming updates; no spinner glyph or title circle is shown. The transformation is display-only; complete thinking remains unchanged in the session and model context.
+
+Relevant invocation details stay visible, including paths, patterns, shell commands, and auxiliary arguments. After `grep`, `find`, or `ls` completes, auxiliary arguments appear in parentheses beside the `Done in …s` status instead of in the invocation line or a JSON block. Read calls omit offset and limit noise, then report the number of lines read after completion. Large payloads represented as results, such as write content and edit diffs, follow the result toggle.
 
 A mouse click toggles one row's result:
 

package/examples/compact-tools-2.json

@@ -10,11 +10,5 @@
   "spinner": {
     "frames": ["●", "●", " ", "●", "●"],
     "intervalMs": 120
-  },
-  "durationIndicators": [
-    { "underMs": 1000, "icon": "•", "color": "#E0A052" },
-    { "underMs": 10000, "icon": "•", "color": "#D95C3F" },
-    { "underMs": 30000, "icon": "•", "color": "#79C0FF" },
-    { "icon": "•", "color": "#D2A8FF" }
-  ]
+  }
 }

package/examples/compact-tools.json

@@ -10,11 +10,5 @@
   "spinner": {
     "frames": ["◐", "◓", "◑", "◒"],
     "intervalMs": 120
-  },
-  "durationIndicators": [
-    { "underMs": 1000, "icon": "⚡️", "color": "warning" },
-    { "underMs": 10000, "icon": "🔥", "color": "#D95C3F" },
-    { "underMs": 30000, "icon": "○", "color": "#79C0FF" },
-    { "icon": "⏳", "color": "#D2A8FF" }
-  ]
+  }
 }

package/extensions/compact-tools-config.ts

@@ -1,7 +1,6 @@
 import { existsSync, readFileSync } from "node:fs";
 import { join } from "node:path";
 import { CONFIG_DIR_NAME, getAgentDir } from "@earendil-works/pi-coding-agent";
-import { parseDurationIndicators } from "./compact-tools-core.ts";
 import {
 	SUPPORTED_TOOL_SET,
 	type CompactToolName,
@@ -27,12 +26,6 @@ export const DEFAULT_CONFIG: CompactToolsConfig = {
 		frames: ["◐", "◓", "◑", "◒"],
 		intervalMs: 120,
 	},
-	durationIndicators: [
-		{ underMs: 1_000, icon: "⚡️", color: "warning" },
-		{ underMs: 10_000, icon: "🔥", color: "#D95C3F" },
-		{ underMs: 30_000, icon: "○", color: "#79C0FF" },
-		{ icon: "⏳", color: "#D2A8FF" },
-	],
 };
 
 function isObject(value: unknown): value is JsonObject {
@@ -120,18 +113,7 @@ export function mergeConfig(base: CompactToolsConfig, value: unknown, path: stri
 	const tools = value.tools === undefined ? base.tools : (parseTools(value.tools, path) ?? base.tools);
 	const auto_compact = parseAutoCompact(base.auto_compact, value.auto_compact, path);
 	const spinner = parseSpinner(base.spinner, value.spinner, path);
-	const parsedIndicators = value.durationIndicators === undefined
-		? undefined
-		: parseDurationIndicators(value.durationIndicators);
-	if (value.durationIndicators !== undefined && !parsedIndicators) {
-		warn(path, "invalid durationIndicators; using previous values");
-	}
-	return {
-		tools,
-		auto_compact,
-		spinner,
-		durationIndicators: parsedIndicators ?? base.durationIndicators,
-	};
+	return { tools, auto_compact, spinner };
 }
 
 function readJson(path: string): unknown {

package/extensions/compact-tools-core.ts

@@ -1,58 +1,11 @@
-/** Pure configuration, timing, text, and color helpers for compact tool rendering. */
+/** Pure timing and text helpers for compact tool rendering. */
 
-const DURATION_INDICATOR_COLORS = [
-	"accent", "border", "borderAccent", "borderMuted", "success", "error", "warning", "muted", "dim", "text",
-	"thinkingText", "toolTitle", "toolOutput", "toolDiffAdded", "toolDiffRemoved", "toolDiffContext", "bashMode",
-] as const;
-
-export type ThemeDurationIndicatorColor = (typeof DURATION_INDICATOR_COLORS)[number];
-export type DurationIndicatorColor = ThemeDurationIndicatorColor | `#${string}`;
-export type DurationIndicatorConfig = {
-	underMs?: number;
-	icon: string;
-	color?: DurationIndicatorColor;
-};
 export type RowStatus = "pending" | "running" | "success" | "error";
-const DURATION_INDICATOR_COLOR_SET = new Set<string>(DURATION_INDICATOR_COLORS);
-export const HEX_COLOR_PATTERN = /^#[0-9a-f]{6}$/i;
-
-type JsonObject = Record<string, unknown>;
-
-function isObject(value: unknown): value is JsonObject {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-
-function isPositiveInteger(value: unknown, minimum: number): value is number {
-	return typeof value === "number" && Number.isInteger(value) && value >= minimum;
-}
-
-export function parseDurationIndicators(value: unknown): DurationIndicatorConfig[] | undefined {
-	if (!Array.isArray(value) || value.length === 0) return undefined;
-	const rules: DurationIndicatorConfig[] = [];
-	let previousLimit = 0;
-	for (const [index, item] of value.entries()) {
-		if (!isObject(item) || typeof item.icon !== "string" || item.icon.length === 0) return undefined;
-		if (
-			item.color !== undefined &&
-			(typeof item.color !== "string" ||
-				(!DURATION_INDICATOR_COLOR_SET.has(item.color) && !HEX_COLOR_PATTERN.test(item.color)))
-		) return undefined;
-		const color = item.color as DurationIndicatorColor | undefined;
-		const isLast = index === value.length - 1;
-		if (isLast && item.underMs === undefined) rules.push({ icon: item.icon, color });
-		else if (isPositiveInteger(item.underMs, previousLimit + 1)) {
-			previousLimit = item.underMs;
-			rules.push({ underMs: item.underMs, icon: item.icon, color });
-		} else return undefined;
-	}
-	return rules.at(-1)?.underMs === undefined ? rules : undefined;
-}
 
 export function normalizeLineEndings(value: string): string {
 	return value.replace(/\r\n?|\n/g, "\n");
 }
 
-
 export function classifyCallStatus(isError: boolean, executionStarted: boolean, completed: boolean): RowStatus {
 	if (isError) return "error";
 	if (completed) return "success";
@@ -62,28 +15,3 @@ export function classifyCallStatus(isError: boolean, executionStarted: boolean,
 export function formatDurationMs(elapsedMs: number): string {
 	return `${(elapsedMs / 1000).toFixed(3)}s`;
 }
-
-export function selectDurationIndicator(
-	rules: readonly DurationIndicatorConfig[],
-	elapsedMs: number | undefined,
-): DurationIndicatorConfig | undefined {
-	if (elapsedMs === undefined) return rules[0];
-	return rules.find((rule) => rule.underMs === undefined || elapsedMs < rule.underMs);
-}
-
-function colorDistanceSquared(red: number, green: number, blue: number, candidate: readonly number[]): number {
-	return (red - candidate[0]!) ** 2 + (green - candidate[1]!) ** 2 + (blue - candidate[2]!) ** 2;
-}
-
-export function rgbToAnsi256(red: number, green: number, blue: number): number {
-	const cube = [red, green, blue].map((channel) => Math.round(channel / 51));
-	const cubeRgb = cube.map((channel) => channel * 51);
-	const cubeIndex = 16 + 36 * cube[0]! + 6 * cube[1]! + cube[2]!;
-	const average = (red + green + blue) / 3;
-	const grayStep = Math.max(0, Math.min(23, Math.round((average - 8) / 10)));
-	const grayLevel = 8 + grayStep * 10;
-	const grayRgb = [grayLevel, grayLevel, grayLevel];
-	return colorDistanceSquared(red, green, blue, grayRgb) < colorDistanceSquared(red, green, blue, cubeRgb)
-		? 232 + grayStep
-		: cubeIndex;
-}

package/extensions/compact-tools-invocation.ts

@@ -7,13 +7,7 @@ function pathFrom(args: ToolArgs): string {
 	return typeof value === "string" ? normalizeLineEndings(value) : "";
 }
 
-export function getCallDetails(name: string, args: ToolArgs): string {
-	const path = pathFrom(args) || (name === "grep" || name === "find" || name === "ls" ? "." : "");
-	if (name === "read") return path;
-	if (name !== "grep" && name !== "find") return path;
-	const pattern = typeof args.pattern === "string" ? normalizeLineEndings(args.pattern) : "…";
-	return name === "grep" ? `/${pattern}/ in ${path}` : `${pattern} in ${path}`;
-}
+const INLINE_ARGUMENT_TOOLS = new Set(["grep", "find", "ls"]);
 
 function omitArgument(name: string, key: string): boolean {
 	if (key === "path" || key === "file_path") return true;
@@ -22,8 +16,7 @@ function omitArgument(name: string, key: string): boolean {
 	return (name === "grep" || name === "find") && key === "pattern";
 }
 
-export function getArgumentDetails(name: string, args: ToolArgs): ToolArgs {
-	if (name === "edit") return {};
+function collectArgumentDetails(name: string, args: ToolArgs): ToolArgs {
 	const details: ToolArgs = {};
 	for (const [key, value] of Object.entries(args)) {
 		if (value !== undefined && !omitArgument(name, key)) details[key] = value;
@@ -31,6 +24,37 @@ export function getArgumentDetails(name: string, args: ToolArgs): ToolArgs {
 	return details;
 }
 
+function formatInlineValue(value: unknown): string {
+	if (typeof value === "string") {
+		const compact = normalizeLineEndings(value).replace(/\s+/gu, " ").trim();
+		return compact || '""';
+	}
+	if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") {
+		return String(value);
+	}
+	return JSON.stringify(value) ?? String(value);
+}
+
+export function formatArgumentSummary(name: string, args: ToolArgs): string | undefined {
+	if (!INLINE_ARGUMENT_TOOLS.has(name)) return undefined;
+	const arguments_ = Object.entries(collectArgumentDetails(name, args));
+	if (arguments_.length === 0) return undefined;
+	return arguments_.map(([key, value]) => `${key} ${formatInlineValue(value)}`).join(" · ");
+}
+
+export function getCallDetails(name: string, args: ToolArgs): string {
+	const path = pathFrom(args) || (INLINE_ARGUMENT_TOOLS.has(name) ? "." : "");
+	if (name === "read") return path;
+	if (name !== "grep" && name !== "find") return path;
+	const pattern = typeof args.pattern === "string" ? normalizeLineEndings(args.pattern) : "…";
+	return name === "grep" ? `/${pattern}/ in ${path}` : `${pattern} in ${path}`;
+}
+
+export function getArgumentDetails(name: string, args: ToolArgs): ToolArgs {
+	if (name === "edit" || INLINE_ARGUMENT_TOOLS.has(name)) return {};
+	return collectArgumentDetails(name, args);
+}
+
 export function getTextResult(result: AgentToolResult<unknown>): string {
 	const parts: string[] = [];
 	for (const item of result.content) {

package/extensions/compact-tools-layout.ts

@@ -1,6 +1,7 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import type { Component } from "@earendil-works/pi-tui";
 import {
+	Container,
 	sliceByColumn,
 	stripTerminalSequences,
 	visibleWidth,
@@ -13,7 +14,10 @@ class CachedComponent implements Component {
 	private cachedWidth?: number;
 	private cachedLines?: string[];
 
-	constructor(private readonly renderLines: (width: number) => string[]) {}
+	constructor(
+		private readonly renderLines: (width: number) => string[],
+		private readonly invalidateSource?: () => void,
+	) {}
 
 	render(width: number): string[] {
 		if (this.cachedWidth !== width || !this.cachedLines) {
@@ -24,11 +28,51 @@ class CachedComponent implements Component {
 	}
 
 	invalidate(): void {
+		this.invalidateSource?.();
 		this.cachedWidth = undefined;
 		this.cachedLines = undefined;
 	}
 }
 
+/** A Container that does not re-copy all child lines on every fullscreen scroll frame. */
+export class CachedContainer extends Container {
+	private cachedWidth?: number;
+	private cachedLines?: string[];
+
+	private clearRenderCache(): void {
+		this.cachedWidth = undefined;
+		this.cachedLines = undefined;
+	}
+
+	override addChild(component: Component): void {
+		super.addChild(component);
+		this.clearRenderCache();
+	}
+
+	override removeChild(component: Component): void {
+		super.removeChild(component);
+		this.clearRenderCache();
+	}
+
+	override clear(): void {
+		super.clear();
+		this.clearRenderCache();
+	}
+
+	override render(width: number): string[] {
+		if (this.cachedWidth !== width || !this.cachedLines) {
+			this.cachedWidth = width;
+			this.cachedLines = super.render(width);
+		}
+		return this.cachedLines;
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		this.clearRenderCache();
+	}
+}
+
 export function prefixedText(text: string, firstPrefix: string, continuationPrefix = firstPrefix): Component {
 	const prefixWidth = Math.max(visibleWidth(firstPrefix), visibleWidth(continuationPrefix));
 	const normalized = text.replace(/\t/g, "   ");
@@ -74,45 +118,36 @@ export function renderToolCall(title: string, details: string | undefined, theme
 }
 
 export function wrapEditResult(component: Component, theme: Theme): Component {
-	return {
-		render(width: number) {
-			const lines = component.render(Math.max(1, width - 3));
-			const first = lines.findIndex((line) => visibleWidth(line.trim()) > 0);
-			if (first < 0) return [];
-			const contentLines = lines.slice(first);
-			const commonIndent = Math.min(
-				...contentLines
-					.filter((line) => visibleWidth(line.trim()) > 0)
-					.map((line) => stripTerminalSequences(line).match(/^ */)?.[0].length ?? 0),
-			);
-			const prefix = theme.fg("border", " │ ");
-			return contentLines.map((line) => {
-				const content = sliceByColumn(line, commonIndent, visibleWidth(line) - commonIndent, true);
-				return `${prefix}${content}`;
-			});
-		},
-		invalidate() {
-			component.invalidate?.();
-		},
-	};
+	return new CachedComponent((width) => {
+		const lines = component.render(Math.max(1, width - 3));
+		const first = lines.findIndex((line) => visibleWidth(line.trim()) > 0);
+		if (first < 0) return [];
+		const contentLines = lines.slice(first);
+		let commonIndent = Number.POSITIVE_INFINITY;
+		for (const line of contentLines) {
+			const plain = stripTerminalSequences(line);
+			if (plain.trim().length === 0) continue;
+			commonIndent = Math.min(commonIndent, plain.match(/^ */)?.[0].length ?? 0);
+			if (commonIndent === 0) break;
+		}
+		if (!Number.isFinite(commonIndent)) commonIndent = 0;
+		const prefix = theme.fg("border", " │ ");
+		return contentLines.map((line) => {
+			const content = sliceByColumn(line, commonIndent, Math.max(0, visibleWidth(line) - commonIndent), true);
+			return `${prefix}${content}`;
+		});
+	}, () => component.invalidate?.());
 }
 
 export function styleMultiline(text: string, style: (line: string) => string): string {
 	return normalizeLineEndings(text).split("\n").map(style).join("\n");
 }
 
-function styleOutputLine(text: string, theme: Theme, isError: boolean): string {
-	const color = isError ? "error" : "toolOutput";
-	return text
-		.split(/(⚡️?)/u)
-		.map((part) => theme.fg(!isError && part.startsWith("⚡") ? "warning" : color, part))
-		.join("");
-}
-
 export function renderOutput(output: string, theme: Theme, isError: boolean): Component | undefined {
 	const normalized = normalizeLineEndings(output).trimEnd();
 	if (!normalized) return undefined;
-	const styled = normalized.split("\n").map((line) => styleOutputLine(line, theme, isError)).join("\n");
+	const color = isError ? "error" : "toolOutput";
+	const styled = normalized.split("\n").map((line) => theme.fg(color, line)).join("\n");
 	return prefixedText(styled, theme.fg("border", " │ "));
 }
 

package/extensions/compact-tools-thinking.ts

@@ -0,0 +1,319 @@
+import { getAgentDir, type ExtensionAPI, type ExtensionContext, type Theme } from "@earendil-works/pi-coding-agent";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import {
+	isKeyRelease,
+	isKeyRepeat,
+	Key,
+	matchesKey,
+	stripTerminalSequences,
+	truncateToWidth,
+	wrapTextWithAnsi,
+} from "@earendil-works/pi-tui";
+
+export type ThinkingView = "summary" | "detail" | "hidden";
+export type ThinkingPhase = "summary" | "detail" | "summary-after-detail" | "hidden";
+
+type ThinkingRenderOptions = {
+	styleSummary?: (summary: string, sectionIndex: number) => string;
+	styleDetailPrefix?: (prefix: string) => string;
+	controls?: string;
+	styleControlPrefix?: (prefix: string) => string;
+};
+
+const NEXT_PHASE: Record<ThinkingPhase, ThinkingPhase> = {
+	summary: "detail",
+	detail: "summary-after-detail",
+	"summary-after-detail": "hidden",
+	hidden: "summary",
+};
+
+export function thinkingViewForPhase(phase: ThinkingPhase): ThinkingView {
+	return phase === "summary-after-detail" ? "summary" : phase;
+}
+
+export function nextThinkingPhase(phase: ThinkingPhase): ThinkingPhase {
+	return NEXT_PHASE[phase];
+}
+
+export type ThinkingToggleInput = "toggle" | "repeat" | "release";
+
+export function classifyThinkingToggleInput(data: string): ThinkingToggleInput | undefined {
+	if (!matchesKey(data, Key.ctrl("t"))) return undefined;
+	if (isKeyRelease(data)) return "release";
+	return isKeyRepeat(data) ? "repeat" : "toggle";
+}
+
+function plainSummary(line: string): string {
+	return line
+		.replace(/^\s{0,3}#{1,6}\s+/u, "")
+		.replace(/^\s*[-*+]\s+/u, "")
+		.replace(/\[([^\]]+)\]\([^)]*\)/gu, "$1")
+		.replace(/[*_~`]/gu, "")
+		.replace(/\s+/gu, " ")
+		.trim();
+}
+
+type ThinkingSection = { summary: string; detail: string };
+
+function splitThinkingSections(markdown: string, includeDetail: boolean): ThinkingSection[] {
+	const normalized = markdown.includes("\r") ? markdown.replace(/\r\n?/gu, "\n") : markdown;
+	const lines = normalized.split("\n");
+	let first = -1;
+	let summary = "";
+	for (let index = 0; index < lines.length; index++) {
+		summary = plainSummary(lines[index]!);
+		if (summary) {
+			first = index;
+			break;
+		}
+	}
+	if (first < 0) return [{ summary: "Thinking...", detail: "" }];
+	const sections: ThinkingSection[] = [];
+	let detail: string[] = [];
+	let inFence = false;
+	const flush = () => {
+		sections.push({ summary, detail: includeDetail ? detail.join("\n").trim() : "" });
+		detail = [];
+	};
+	for (let index = first + 1; index < lines.length; index++) {
+		const line = lines[index]!;
+		const fence = /^\s*(```|~~~)/u.test(line);
+		if (!inFence) {
+			const boldHeading = line.match(/^\s*\*\*(.+?)\*\*\s*$/u)?.[1];
+			const markdownHeading = line.match(/^\s{0,3}#{1,6}\s+(.+?)\s*$/u)?.[1];
+			const heading = boldHeading ?? markdownHeading;
+			if (heading) {
+				flush();
+				summary = plainSummary(heading);
+				continue;
+			}
+		}
+		if (includeDetail) detail.push(line);
+		if (fence) inFence = !inFence;
+	}
+	flush();
+	return sections;
+}
+
+function compactDetail(
+	detail: string,
+	availableWidth: number,
+	stylePrefix: (prefix: string) => string,
+): string {
+	const output: string[] = [];
+	let inFence = false;
+	for (const logicalLine of detail.replace(/\t/gu, "   ").split("\n")) {
+		const fence = /^\s*(```|~~~)/u.test(logicalLine);
+		if (!inFence && fence) {
+			// Fences need a real blockquote and blank delimiter to remain valid Markdown.
+			output.push("", `> ${logicalLine}`);
+			inFence = true;
+			continue;
+		}
+		if (inFence) {
+			output.push(logicalLine ? `> ${logicalLine}` : ">");
+			if (fence) {
+				inFence = false;
+				output.push("");
+			}
+			continue;
+		}
+		if (!logicalLine) {
+			output.push(`${stylePrefix("│")}  `);
+			continue;
+		}
+		const wrapped = wrapTextWithAnsi(logicalLine, Math.max(1, availableWidth - 2));
+		for (const line of wrapped) {
+			output.push(`${stylePrefix("│ ")}${stripTerminalSequences(line)}  `);
+		}
+	}
+	return output.join("\n");
+}
+
+function hardBreak(lines: string[]): string {
+	return lines.map((line, index) => (index < lines.length - 1 ? `${line}  ` : line)).join("\n");
+}
+
+/** Display-only transformation; the original thinking remains unchanged in session/model context. */
+export function renderThinkingView(
+	markdown: string,
+	view: ThinkingView,
+	availableWidth: number,
+	options: ThinkingRenderOptions = {},
+): string {
+	if (view === "hidden") return "Thinking...";
+	const controls = options.controls ?? "ctrl+t toggle • click to hide";
+	const styleControlPrefix = options.styleControlPrefix ?? ((prefix: string) => prefix);
+	return splitThinkingSections(markdown, view === "detail")
+		.map(({ summary, detail }, sectionIndex) => {
+			const fittedSummary = stripTerminalSequences(
+				truncateToWidth(summary, Math.max(1, availableWidth), "…"),
+			);
+			const title = options.styleSummary?.(fittedSummary, sectionIndex) ?? fittedSummary;
+			const controlLines = wrapTextWithAnsi(controls, Math.max(1, availableWidth - 3)).map(
+				(line, index) => `${index === 0 ? styleControlPrefix("└─ ") : "   "}${line}`,
+			);
+			if (view === "detail" && detail) {
+				const styleDetailPrefix = options.styleDetailPrefix ?? ((prefix: string) => prefix);
+				const connector = `${styleDetailPrefix("│")}  `;
+				return `${title}  \n${connector}\n${compactDetail(detail, availableWidth, styleDetailPrefix)}\n${hardBreak(controlLines)}`;
+			}
+			return hardBreak([title, ...controlLines]);
+		})
+		.join("\n\n");
+}
+
+function getInitialThinkingPhase(): ThinkingPhase {
+	try {
+		const settings = JSON.parse(readFileSync(join(getAgentDir(), "settings.json"), "utf8")) as {
+			hideThinkingBlock?: unknown;
+		};
+		return settings.hideThinkingBlock === true ? "hidden" : "summary";
+	} catch {
+		return "summary";
+	}
+}
+
+export function isThinkingStreamEvent(eventType: string): boolean {
+	return eventType === "thinking_start" || eventType === "thinking_delta";
+}
+
+const SHIMMER_FRAME_INTERVAL_MS = 80;
+
+function shimmer(summary: string, theme: Theme, startedAt: number): string {
+	const characters = [...summary];
+	if (characters.length === 0) return summary;
+	const sweepTail = 5;
+	// Each logical section receives its own start time. The highlight therefore
+	// enters at its first character instead of inheriting another section's
+	// wall-clock phase.
+	const elapsed = Math.max(0, Date.now() - startedAt);
+	const center = Math.floor(elapsed / SHIMMER_FRAME_INTERVAL_MS) % (characters.length + sweepTail);
+	let currentColor: Parameters<Theme["fg"]>[0] | undefined;
+	let chunk = "";
+	let output = "";
+	for (let index = 0; index < characters.length; index++) {
+		const distance = Math.abs(index - center);
+		// Stay entirely in the sky-blue family: the active baseline is blue,
+		// and the sweep fades through light blue into a near-white core.
+		const color = distance === 0
+			? "userMessageText"
+			: distance === 1
+				? "text"
+				: distance === 2
+					? "thinkingMax"
+					: "thinkingXhigh";
+		if (currentColor !== undefined && color !== currentColor) {
+			output += theme.fg(currentColor, theme.bold(chunk));
+			chunk = "";
+		}
+		currentColor = color;
+		chunk += characters[index];
+	}
+	return currentColor === undefined ? output : output + theme.fg(currentColor, theme.bold(chunk));
+}
+
+export class ThinkingCycleController {
+	private phase: ThinkingPhase = "summary";
+	private unsubscribe: (() => void) | undefined;
+	private theme: Theme | undefined;
+	private thinkingStreamActive = false;
+	private refreshThinking: (() => void) | undefined;
+	private readonly summarySweepStartedAt = new Map<number, number>();
+
+	constructor(pi: ExtensionAPI) {
+		pi.on("message_start", () => this.resetSweep());
+		pi.on("message_update", (event) => {
+			// `context.isStreaming` describes the whole assistant message. Tool-call
+			// argument streaming therefore remains true after thinking has ended.
+			// Track the actual provider event so the sweep ends on thinking_end.
+			const eventType = event.assistantMessageEvent.type;
+			if (eventType === "thinking_start") this.summarySweepStartedAt.clear();
+			this.thinkingStreamActive = isThinkingStreamEvent(eventType);
+		});
+		pi.on("message_end", () => this.resetSweep());
+		pi.on("tool_call", () => this.resetSweep());
+
+		pi.registerMarkdownTransformer((markdown, context) => {
+			if (context.messageType !== "assistant-thinking") return markdown;
+			const theme = this.theme;
+			const detailTextPrefix = theme?.getFgAnsi("thinkingText");
+			return renderThinkingView(markdown, thinkingViewForPhase(this.phase), context.availableWidth, {
+				styleSummary: theme
+					? context.isStreaming && this.thinkingStreamActive
+						? (summary, sectionIndex) => {
+								let startedAt = this.summarySweepStartedAt.get(sectionIndex);
+								if (startedAt === undefined) {
+									startedAt = Date.now();
+									this.summarySweepStartedAt.set(sectionIndex, startedAt);
+								}
+								return shimmer(summary, theme, startedAt);
+							}
+						: (summary) => theme.fg("thinkingMax", theme.bold(summary))
+					: undefined,
+				// border styling resets the foreground; resume detail gray immediately.
+				styleDetailPrefix: theme && detailTextPrefix
+					? (prefix) => theme.fg("border", prefix) + detailTextPrefix
+					: undefined,
+				controls: theme
+					? theme.fg(
+							"borderAccent",
+							`${theme.italic("ctrl+t")} toggle • ${theme.italic("click")} to hide`,
+						)
+					: undefined,
+				styleControlPrefix: theme ? (prefix) => theme.fg("border", prefix) : undefined,
+			});
+		});
+	}
+
+	private resetSweep(): void {
+		this.thinkingStreamActive = false;
+		this.summarySweepStartedAt.clear();
+	}
+
+	bind(ctx: ExtensionContext): void {
+		this.unsubscribe?.();
+		this.theme = ctx.ui.theme;
+		this.thinkingStreamActive = false;
+		this.summarySweepStartedAt.clear();
+		// Match Pi's persisted host visibility after startup or /reload. When the
+		// host is hidden, Markdown transformers are not invoked at all. Pi wraps
+		// this label in thinkingText, so an inner thinkingMax span is required to
+		// keep it consistent with completed summary titles.
+		this.phase = getInitialThinkingPhase();
+		const hiddenLabel = this.theme.fg("thinkingMax", this.theme.bold("Thinking..."));
+		// Pi does not currently expose transcript invalidation directly. Updating
+		// this label rebuilds assistant Markdown and requests a render without
+		// changing the message or its hidden/visible state.
+		this.refreshThinking = () => ctx.ui.setHiddenThinkingLabel(hiddenLabel);
+		this.refreshThinking();
+		this.unsubscribe = ctx.ui.onTerminalInput((data) => {
+			const input = classifyThinkingToggleInput(data);
+			if (input === undefined) return undefined;
+			// Kitty-capable macOS terminals report held keys as repeat events. Treating
+			// those as presses can skip detail before the user sees it.
+			if (input === "release" || input === "repeat") return { consume: true };
+			this.phase = nextThinkingPhase(this.phase);
+			if (this.phase === "detail" || this.phase === "summary-after-detail") {
+				// Visible-to-visible transitions are owned by this extension. Rebuild the
+				// Markdown and prevent Pi's built-in two-state toggle from hiding it.
+				this.refreshThinking?.();
+				return { consume: true };
+			}
+			// summary-after-detail -> hidden and hidden -> summary intentionally reach
+			// Pi's existing two-state handler. This keeps visibility/settings in sync
+			// and clears built-in per-block click overrides.
+			return undefined;
+		});
+	}
+
+	dispose(): void {
+		this.unsubscribe?.();
+		this.unsubscribe = undefined;
+		this.refreshThinking = undefined;
+		this.thinkingStreamActive = false;
+		this.summarySweepStartedAt.clear();
+		this.theme = undefined;
+	}
+}

package/extensions/compact-tools-types.ts

@@ -1,6 +1,5 @@
 import type { ToolDefinition } from "@earendil-works/pi-coding-agent";
 import type { Component } from "@earendil-works/pi-tui";
-import type { DurationIndicatorConfig } from "./compact-tools-core.ts";
 
 export const SUPPORTED_TOOLS = ["read", "write", "edit", "bash", "powershell", "grep", "find", "ls"] as const;
 export const SUPPORTED_TOOL_SET = new Set<string>(SUPPORTED_TOOLS);
@@ -17,7 +16,6 @@ export interface CompactToolsConfig {
 		frames: string[];
 		intervalMs: number;
 	};
-	durationIndicators: DurationIndicatorConfig[];
 }
 
 export interface RowState {

package/extensions/compact-tools.ts

@@ -18,22 +18,17 @@ import {
 	createReadToolDefinition,
 	createWriteToolDefinition,
 } from "@earendil-works/pi-coding-agent";
-import type { Component } from "@earendil-works/pi-tui";
-import { Container } from "@earendil-works/pi-tui";
+import type { Component, Container } from "@earendil-works/pi-tui";
 import {
 	classifyCallStatus,
 	formatDurationMs,
-	HEX_COLOR_PATTERN,
 	normalizeLineEndings,
-	rgbToAnsi256,
-	selectDurationIndicator,
-	type DurationIndicatorConfig,
 	type RowStatus,
-	type ThemeDurationIndicatorColor,
 } from "./compact-tools-core.ts";
 import { isFullscreenMode, loadConfig } from "./compact-tools-config.ts";
 import { classifyToggleInput } from "./compact-tools-input.ts";
 import {
+	formatArgumentSummary,
 	formatReadResultSummary,
 	getArgumentDetails,
 	getCallDetails,
@@ -41,6 +36,7 @@ import {
 	getTextResult,
 } from "./compact-tools-invocation.ts";
 import {
+	CachedContainer,
 	prefixedText,
 	renderArguments,
 	renderOutput,
@@ -49,6 +45,7 @@ import {
 	wrapEditResult,
 } from "./compact-tools-layout.ts";
 import { ToolRuntime } from "./compact-tools-runtime.ts";
+import { ThinkingCycleController } from "./compact-tools-thinking.ts";
 import type {
 	BuiltInDefinition,
 	CompactToolName,
@@ -86,7 +83,7 @@ function callStatus(ctx: RenderContext, state: RowState): RowStatus {
 }
 
 function renderIndicator(theme: Theme, state: RowState, status: RowStatus): string {
-	if (status === "error") return theme.fg("error", "⊗");
+	if (status === "error") return theme.fg("error", "●");
 	if (status === "success") return theme.fg("success", "●");
 	const frames = runtime.config.spinner.frames;
 	const frameIndex = state.frame ?? 0;
@@ -98,42 +95,20 @@ function formatDuration(state: RowState): string | undefined {
 	return formatDurationMs((state.endedAt ?? Date.now()) - state.startedAt);
 }
 
-function durationIndicator(state: RowState): DurationIndicatorConfig | undefined {
-	const elapsed = state.startedAt !== undefined && state.endedAt !== undefined
-		? state.endedAt - state.startedAt
-		: undefined;
-	return selectDurationIndicator(runtime.config.durationIndicators, elapsed);
-}
-
-function styleDurationIcon(theme: Theme, indicator: DurationIndicatorConfig): string {
-	const color = indicator.color ?? "dim";
-	if (!HEX_COLOR_PATTERN.test(color)) {
-		return theme.fg(color as ThemeDurationIndicatorColor, indicator.icon);
-	}
-	const red = Number.parseInt(color.slice(1, 3), 16);
-	const green = Number.parseInt(color.slice(3, 5), 16);
-	const blue = Number.parseInt(color.slice(5, 7), 16);
-	const ansi = theme.getColorMode() === "truecolor"
-		? `\x1b[38;2;${red};${green};${blue}m`
-		: `\x1b[38;5;${rgbToAnsi256(red, green, blue)}m`;
-	return `${ansi}${indicator.icon}\x1b[39m`;
-}
-
 function renderControls(
 	theme: Theme,
 	state: RowState,
 	running: boolean,
 	isError: boolean,
 	summary?: string,
+	argumentSummary?: string,
 ): Component {
 	const duration = running && !runtime.animatesRows ? undefined : formatDuration(state);
-	const indicator = !running && !isError ? durationIndicator(state) : undefined;
 	const status = running
 		? (duration ?? "Running")
 		: `${isError ? "Failed" : "Done"}${duration ? ` in ${duration}` : ""}`;
-	let details = indicator
-		? `${styleDurationIcon(theme, indicator)} ${theme.fg("borderAccent", status)}`
-		: theme.fg("borderAccent", status);
+	let details = theme.fg("borderAccent", status);
+	if (argumentSummary && !running) details += theme.fg("borderAccent", ` (${argumentSummary})`);
 	if (summary) details += theme.fg("borderAccent", ` • ${summary}`);
 	if (state.hasResult) {
 		const clickAction = state.expanded ? "to hide" : "for result";
@@ -163,7 +138,7 @@ function renderFileCall(
 	const details = callDetails
 		? styleMultiline(callDetails, (line) => theme.fg("toolOutput", line))
 		: undefined;
-	const container = new Container();
+	const container = new CachedContainer();
 	container.addChild(renderToolCall(renderCallTitle(name, theme, ctx, state), details, theme));
 	const arguments_ = getArgumentDetails(name, args);
 	if (Object.keys(arguments_).length > 0) container.addChild(renderArguments(arguments_, theme));
@@ -217,10 +192,11 @@ function renderFileResult(
 	const output = getFileOutput(name, ctx.args, result, ctx.isError);
 	runtime.setResultAvailable(state, name, name === "edit" || output.length > 0);
 	updateEditResult(definition, result, options, theme, ctx, state);
-	const container = new Container();
+	const container = new CachedContainer();
 	appendFileResult(container, definition, state, output, theme, ctx.isError);
 	const summary = name === "read" && !ctx.isError ? formatReadResultSummary(result) : undefined;
-	container.addChild(renderControls(theme, state, options.isPartial, ctx.isError, summary));
+	const argumentSummary = formatArgumentSummary(name, ctx.args);
+	container.addChild(renderControls(theme, state, options.isPartial, ctx.isError, summary, argumentSummary));
 	return container;
 }
 
@@ -250,7 +226,7 @@ function renderShellResult(
 	const output = getTextResult(result);
 	runtime.setResultAvailable(state, name, output.length > 0);
 	if (!state.expanded) return renderControls(theme, state, options.isPartial, ctx.isError);
-	const container = new Container();
+	const container = new CachedContainer();
 	const component = renderOutput(output, theme, ctx.isError);
 	if (component) container.addChild(component);
 	container.addChild(renderControls(theme, state, options.isPartial, ctx.isError));
@@ -324,14 +300,17 @@ function configure(pi: ExtensionAPI, cwd?: string, projectTrusted = false): void
 }
 
 export default function compactTools(pi: ExtensionAPI): void {
+	const thinkingCycle = new ThinkingCycleController(pi);
 	configure(pi);
 	pi.on("session_start", (event, ctx) => {
 		if (event.reason !== "reload") runtime.clearTimings();
 		configure(pi, ctx.cwd, ctx.isProjectTrusted());
 		bindTerminalInput(ctx);
+		thinkingCycle.bind(ctx);
 	});
 	pi.on("resources_discover", (_event, ctx) => configure(pi, ctx.cwd, ctx.isProjectTrusted()));
 	pi.on("session_shutdown", (event) => {
+		thinkingCycle.dispose();
 		unsubscribeTerminalInput?.();
 		unsubscribeTerminalInput = undefined;
 		runtime.reset(event.reason !== "reload");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-compact-tools",
-  "version": "0.5.9",
+  "version": "0.6.1",
   "description": "Compact, expandable UI for pi's built-in tools, bundled with a polished GitHub Dark theme.",
   "type": "module",
   "license": "MIT",

package/schemas/compact-tools.schema.json

@@ -61,44 +61,6 @@
           "default": 120
         }
       }
-    },
-    "durationIndicators": {
-      "description": "Ordered duration thresholds. The final item must omit underMs and acts as the fallback.",
-      "type": "array",
-      "minItems": 1,
-      "items": {
-        "type": "object",
-        "additionalProperties": false,
-        "required": ["icon"],
-        "properties": {
-          "underMs": {
-            "type": "integer",
-            "minimum": 1
-          },
-          "icon": {
-            "type": "string",
-            "minLength": 1
-          },
-          "color": {
-            "description": "Optional semantic theme color or six-digit hex color used only for this duration icon.",
-            "anyOf": [
-              {
-                "type": "string",
-                "enum": [
-                  "accent", "border", "borderAccent", "borderMuted", "success", "error", "warning",
-                  "muted", "dim", "text", "thinkingText", "toolTitle", "toolOutput", "toolDiffAdded",
-                  "toolDiffRemoved", "toolDiffContext", "bashMode"
-                ]
-              },
-              {
-                "type": "string",
-                "pattern": "^#[0-9A-Fa-f]{6}$"
-              }
-            ],
-            "default": "dim"
-          }
-        }
-      }
     }
   }
 }

package/scripts/check-resources.mjs

@@ -23,8 +23,11 @@ if (theme.name !== "github-dark-pro" || !theme.colors || typeof theme.colors !==
 if (!theme.colors.border || !theme.colors.dim || !theme.colors.muted) {
   throw new Error("github-dark-pro must define spinner and separator colors");
 }
-if (!theme.vars?.thinkingText) {
-  throw new Error("github-dark-pro must define a distinct thinking text color");
+if (!theme.vars?.thinkingText || !theme.colors.thinkingMax) {
+  throw new Error("github-dark-pro must define thinking text and summary colors");
+}
+if (!theme.colors.mdQuote || !theme.colors.mdCodeBlockBorder) {
+  throw new Error("github-dark-pro must define thinking detail and code fence colors");
 }
 
 const example = JSON.parse(
@@ -51,31 +54,17 @@ const blinkExample = JSON.parse(
 if (JSON.stringify(blinkExample.spinner?.frames) !== JSON.stringify(["●", "●", " ", "●", "●"])) {
   throw new Error("compact-tools-2 spinner must fade through repeated circles and a blank frame");
 }
-if (
-  !Array.isArray(blinkExample.durationIndicators) ||
-  blinkExample.durationIndicators.some((indicator) => indicator.icon !== "•") ||
-  blinkExample.durationIndicators[0]?.color !== "#E0A052"
-) {
-  throw new Error("compact-tools-2 must use bullet duration indicators and the explicit warning hex color");
-}
-const indicators = example.durationIndicators;
-if (!Array.isArray(indicators) || indicators.length === 0 || indicators.at(-1)?.underMs !== undefined) {
-  throw new Error("example durationIndicators must end with a fallback rule");
-}
-for (let index = 0; index < indicators.length - 1; index++) {
-  if (!(indicators[index].underMs > (indicators[index - 1]?.underMs ?? 0))) {
-    throw new Error("example durationIndicators thresholds must be ascending");
+for (const [name, config] of [["compact-tools", example], ["compact-tools-2", blinkExample]]) {
+  if ("durationIndicators" in config) {
+    throw new Error(`${name} must not contain the removed durationIndicators setting`);
   }
 }
-if (indicators.some((indicator) => indicator.color !== undefined && typeof indicator.color !== "string")) {
-  throw new Error("example duration indicator colors must be strings");
-}
 
 const schema = JSON.parse(
   await readFile(new URL("../schemas/compact-tools.schema.json", import.meta.url), "utf8"),
 );
-if (!schema.properties?.durationIndicators?.items?.properties?.color) {
-  throw new Error("schema must describe durationIndicators.color");
+if (schema.properties?.durationIndicators) {
+  throw new Error("schema must not expose the removed durationIndicators setting");
 }
 if (!schema.properties?.auto_compact?.properties?.edit) {
   throw new Error("schema must describe per-tool auto_compact policies");

package/themes/github-dark-pro.json

@@ -36,7 +36,7 @@
     "muted": "muted",
     "dim": "dim",
     "text": "text",
-    "thinkingText": "thinkingText",
+    "thinkingText": "toolText",
 
     "selectedBg": "surfaceMuted",
     "searchMatchBg": "#3B2E10",
@@ -59,8 +59,8 @@
     "mdLinkUrl": "dim",
     "mdCode": "inlineCode",
     "mdCodeBlock": "text",
-    "mdCodeBlockBorder": "#484F58",
-    "mdQuote": "quoteText",
+    "mdCodeBlockBorder": "#0D1117",
+    "mdQuote": "toolText",
     "mdQuoteBorder": "border",
     "mdHr": "borderSubtle",
     "mdListBullet": "muted",
@@ -85,7 +85,7 @@
     "thinkingMedium": "muted",
     "thinkingHigh": "blue",
     "thinkingXhigh": "blueSoft",
-    "thinkingMax": "blueSoft",
+    "thinkingMax": "#9FCFF8",
     "bashMode": "green"
   },
   "export": {