lsd-pi 1.3.2 → 1.3.7

package/packages/pi-coding-agent/src/modes/interactive/components/btw-overlay.ts

@@ -0,0 +1,402 @@
+import type { AssistantMessage, Context, Message, Model, SimpleStreamOptions, StopReason, Usage } from "@gsd/pi-ai";
+import { streamSimple } from "@gsd/pi-ai";
+import {
+    Input,
+    Markdown,
+    type MarkdownTheme,
+    parseKey,
+    truncateToWidth,
+    type Component,
+    type Focusable,
+    type TUI,
+    visibleWidth,
+} from "@gsd/pi-tui";
+import { theme } from "../theme/theme.js";
+
+const EMPTY_USAGE: Usage = {
+    input: 0,
+    output: 0,
+    cacheRead: 0,
+    cacheWrite: 0,
+    totalTokens: 0,
+    cost: {
+        input: 0,
+        output: 0,
+        cacheRead: 0,
+        cacheWrite: 0,
+        total: 0,
+    },
+};
+
+interface BtwTurn {
+    role: "user" | "assistant";
+    text: string;
+    isError?: boolean;
+    isStreaming?: boolean;
+}
+
+function clamp(value: number, min: number, max: number): number {
+    return Math.max(min, Math.min(max, value));
+}
+
+function fitWidth(text: string, width: number): string {
+    if (width <= 0) return "";
+    const visible = visibleWidth(text);
+    if (visible === width) return text;
+    if (visible < width) return text + " ".repeat(width - visible);
+    return truncateToWidth(text, width, "");
+}
+
+function formatAssistantError(message: AssistantMessage): string {
+    if (message.errorMessage?.trim()) {
+        return message.errorMessage.trim();
+    }
+
+    const text = message.content
+        .map((part) => (part.type === "text" ? part.text.trim() : ""))
+        .filter(Boolean)
+        .join("\n")
+        .trim();
+
+    return text || `Request failed (${message.stopReason})`;
+}
+
+export class BtwOverlayComponent implements Component, Focusable {
+    private _focused = false;
+
+    private readonly markdownTheme: MarkdownTheme;
+    private readonly model: Model<any>;
+    private readonly systemPrompt: string | undefined;
+    private readonly baseMessages: Message[];
+    private readonly ui: TUI;
+    private readonly input = new Input();
+    private readonly onDismiss: () => void;
+    private readonly requestRender: () => void;
+    private readonly streamFn: typeof streamSimple;
+    private readonly streamOptions: Pick<SimpleStreamOptions, "apiKey" | "sessionId">;
+
+    private readonly btwHistory: Message[] = [];
+    private readonly turns: BtwTurn[] = [];
+    private currentAbortController: AbortController | undefined;
+    private disposed = false;
+    private isStreaming = false;
+    private scrollOffset = 0;
+    private followTail = true;
+    private lastWidth = 0;
+
+    get focused(): boolean {
+        return this._focused;
+    }
+
+    set focused(value: boolean) {
+        this._focused = value;
+        this.input.focused = value;
+    }
+
+    constructor(
+        question: string,
+        model: Model<any>,
+        systemPrompt: string | undefined,
+        messages: Message[],
+        markdownTheme: MarkdownTheme,
+        ui: TUI,
+        onDismiss: () => void,
+        requestRender: () => void,
+        streamer: typeof streamSimple = streamSimple,
+        streamOptions: Pick<SimpleStreamOptions, "apiKey" | "sessionId"> = {},
+    ) {
+        this.model = model;
+        this.systemPrompt = systemPrompt;
+        this.baseMessages = messages;
+        this.markdownTheme = markdownTheme;
+        this.ui = ui;
+        this.onDismiss = onDismiss;
+        this.requestRender = requestRender;
+        this.streamFn = streamer;
+        this.streamOptions = streamOptions;
+
+        this.input.placeholder = "Ask follow-up...";
+        this.input.onEscape = () => this.dismiss();
+        this.input.onSubmit = (value) => {
+            void this.submitTurn(value);
+        };
+
+        void this.submitTurn(question);
+    }
+
+    handleInput(data: string): void {
+        const key = parseKey(data);
+        switch (key) {
+            case "up":
+                this.scrollBy(-1);
+                return;
+            case "down":
+                this.scrollBy(1);
+                return;
+            case "pageUp":
+                this.scrollBy(-(this.getBodyHeight() - 1));
+                return;
+            case "pageDown":
+                this.scrollBy(this.getBodyHeight() - 1);
+                return;
+        }
+
+        this.input.handleInput(data);
+        if (!this.disposed) {
+            this.requestRender();
+        }
+    }
+
+    invalidate(): void {
+        // No cached subtree state to invalidate.
+    }
+
+    dispose(): void {
+        if (this.disposed) return;
+        this.disposed = true;
+        this.currentAbortController?.abort();
+    }
+
+    render(width: number): string[] {
+        this.lastWidth = width;
+
+        const totalHeight = this.getTotalHeight();
+        const bodyHeight = Math.max(1, totalHeight - 4);
+        const contentWidth = Math.max(1, width - 4);
+        const bodyLines = this.getBodyLines(contentWidth);
+        const maxOffset = Math.max(0, bodyLines.length - bodyHeight);
+        if (this.followTail) {
+            this.scrollOffset = maxOffset;
+        } else {
+            this.scrollOffset = clamp(this.scrollOffset, 0, maxOffset);
+        }
+
+        const visibleBody = bodyLines.slice(this.scrollOffset, this.scrollOffset + bodyHeight);
+        while (visibleBody.length < bodyHeight) {
+            visibleBody.push("");
+        }
+
+        const inputLines = this.input.render(contentWidth);
+        const inputLine = inputLines[0] ?? "";
+
+        return [
+            this.renderTopBorder(width),
+            ...visibleBody.map((line) => this.renderBodyLine(line, width)),
+            this.renderBodyLine(inputLine, width),
+            this.renderFooterLine(width, bodyLines.length > bodyHeight),
+            this.renderBottomBorder(width),
+        ];
+    }
+
+    private dismiss(): void {
+        this.dispose();
+        this.onDismiss();
+    }
+
+    private async submitTurn(rawQuestion: string): Promise<void> {
+        const question = rawQuestion.trim();
+        if (!question || this.disposed || this.isStreaming) {
+            return;
+        }
+
+        const userMessage = this.createUserMessage(question);
+        const context: Context = {
+            systemPrompt: this.systemPrompt,
+            messages: [...this.baseMessages, ...this.btwHistory, userMessage],
+        };
+
+        this.btwHistory.push(userMessage);
+        this.turns.push({ role: "user", text: question });
+        const assistantTurn: BtwTurn = { role: "assistant", text: "", isStreaming: true };
+        this.turns.push(assistantTurn);
+        this.input.setValue("");
+        this.isStreaming = true;
+        this.followTail = true;
+        this.requestRender();
+
+        const abortController = new AbortController();
+        this.currentAbortController = abortController;
+
+        try {
+            const eventStream = this.streamFn(this.model, context, {
+                signal: abortController.signal,
+                apiKey: this.streamOptions.apiKey,
+                sessionId: this.streamOptions.sessionId,
+            });
+
+            for await (const event of eventStream) {
+                if (this.disposed || this.currentAbortController !== abortController) {
+                    break;
+                }
+
+                if (event.type === "text_delta") {
+                    assistantTurn.text += event.delta;
+                    this.requestRender();
+                    continue;
+                }
+
+                if (event.type === "done") {
+                    this.finishAssistantTurn(assistantTurn, "stop");
+                    this.requestRender();
+                    break;
+                }
+
+                if (event.type === "error") {
+                    if (event.reason === "aborted") {
+                        continue;
+                    }
+
+                    assistantTurn.isError = true;
+                    if (!assistantTurn.text.trim()) {
+                        assistantTurn.text = formatAssistantError(event.error);
+                    }
+                    this.finishAssistantTurn(assistantTurn, "error");
+                    this.requestRender();
+                    break;
+                }
+            }
+        } catch (error: unknown) {
+            if (this.disposed || abortController.signal.aborted || this.currentAbortController !== abortController) {
+                return;
+            }
+
+            assistantTurn.isError = true;
+            assistantTurn.text = error instanceof Error ? error.message : "Unknown error";
+            this.finishAssistantTurn(assistantTurn, "error");
+            this.requestRender();
+        } finally {
+            if (this.currentAbortController === abortController) {
+                this.currentAbortController = undefined;
+                this.isStreaming = false;
+                assistantTurn.isStreaming = false;
+                this.requestRender();
+            }
+        }
+    }
+
+    private finishAssistantTurn(turn: BtwTurn, stopReason: StopReason): void {
+        turn.isStreaming = false;
+        if (!turn.text.trim()) {
+            return;
+        }
+
+        this.btwHistory.push({
+            role: "assistant",
+            content: [{ type: "text", text: turn.text }],
+            api: this.model.api,
+            provider: this.model.provider,
+            model: this.model.id,
+            usage: EMPTY_USAGE,
+            stopReason,
+            errorMessage: turn.isError ? turn.text : undefined,
+            timestamp: Date.now(),
+        });
+    }
+
+    private createUserMessage(question: string): Message {
+        return {
+            role: "user",
+            content: [{ type: "text", text: question }],
+            timestamp: Date.now(),
+        };
+    }
+
+    private getTotalHeight(): number {
+        return Math.max(6, Math.floor(this.ui.terminal.rows * 0.7));
+    }
+
+    private getBodyHeight(): number {
+        return Math.max(1, this.getTotalHeight() - 4);
+    }
+
+    private scrollBy(delta: number): void {
+        const bodyHeight = this.getBodyHeight();
+        const bodyLines = this.getBodyLines(Math.max(1, this.lastWidth - 4));
+        const maxOffset = Math.max(0, bodyLines.length - bodyHeight);
+        this.scrollOffset = clamp(this.scrollOffset + delta, 0, maxOffset);
+        this.followTail = this.scrollOffset >= maxOffset;
+        this.requestRender();
+    }
+
+    private getBodyLines(contentWidth: number): string[] {
+        const lines: string[] = [];
+
+        for (const [index, turn] of this.turns.entries()) {
+            if (index > 0) {
+                lines.push("");
+            }
+            lines.push(turn.role === "user" ? theme.fg("accent", "You") : theme.fg("muted", "btw"));
+            lines.push(...this.renderTurnContent(turn, Math.max(1, contentWidth - 2)).map((line) => `  ${line}`));
+        }
+
+        if (lines.length === 0) {
+            lines.push(theme.fg("dim", "Awaiting response…"));
+        }
+
+        return lines;
+    }
+
+    private renderTurnContent(turn: BtwTurn, contentWidth: number): string[] {
+        if (!turn.text.trim()) {
+            return [theme.fg("dim", turn.isStreaming ? "Awaiting response…" : "No response received.")];
+        }
+
+        if (turn.isError) {
+            return [theme.fg("error", `Error: ${turn.text}`)];
+        }
+
+        const markdown = new Markdown(turn.text, 0, 0, this.markdownTheme, {
+            color: (text: string) => theme.fg("text", text),
+        });
+        return markdown.render(contentWidth);
+    }
+
+    private renderTopBorder(width: number): string {
+        if (width <= 2) {
+            return "┌┐".slice(0, width);
+        }
+
+        const innerWidth = width - 2;
+        const title = theme.fg("accent", " btw ");
+        const titleWidth = visibleWidth(title);
+
+        if (innerWidth <= titleWidth) {
+            return fitWidth(`┌${truncateToWidth(title, innerWidth, "")}┐`, width);
+        }
+
+        const dashCount = innerWidth - titleWidth;
+        const leftDashes = Math.floor(dashCount / 2);
+        const rightDashes = dashCount - leftDashes;
+        const border = theme.fg("border", "─");
+        return `┌${border.repeat(leftDashes)}${title}${border.repeat(rightDashes)}┐`;
+    }
+
+    private renderBottomBorder(width: number): string {
+        if (width <= 2) {
+            return "└┘".slice(0, width);
+        }
+        return `└${theme.fg("border", "─").repeat(width - 2)}┘`;
+    }
+
+    private renderBodyLine(text: string, width: number): string {
+        const innerWidth = Math.max(1, width - 4);
+        const fitted = fitWidth(truncateToWidth(text, innerWidth, ""), innerWidth);
+        return fitWidth(`│ ${fitted} │`, width);
+    }
+
+    private renderFooterLine(width: number, canScroll: boolean): string {
+        const innerWidth = Math.max(1, width - 4);
+        const parts: string[] = ["Enter send", "Esc dismiss"];
+        if (canScroll) {
+            parts.push("↑↓/PgUp/PgDn scroll");
+        }
+
+        const status = this.isStreaming
+            ? theme.fg("muted", "Streaming...")
+            : theme.fg("success", "Ready");
+
+        const footer = `${theme.fg("muted", parts.join(" • "))}  ${status}`;
+        const fitted = fitWidth(truncateToWidth(footer, innerWidth, ""), innerWidth);
+        return fitWidth(`│ ${fitted} │`, width);
+    }
+}

package/packages/pi-coding-agent/src/modes/interactive/components/diff.ts

@@ -1,6 +1,15 @@
+import { visibleWidth, wrapTextWithAnsi } from "@gsd/pi-tui";
 import * as Diff from "diff";
+import chalk from "chalk";
 import { theme } from "../theme/theme.js";
 
+const DIFF_BG = {
+	addedLine: "#0f2f1a",
+	removedLine: "#3a1116",
+	addedToken: "#1b5e20",
+	removedToken: "#7f1d1d",
+} as const;
+
 /**
  * Parse diff line to extract prefix, line number, and content.
  * Format: "+123 content" or "-123 content" or " 123 content" or "     ..."
@@ -18,10 +27,52 @@ function replaceTabs(text: string): string {
 	return text.replace(/\t/g, "   ");
 }
 
+function formatLineNum(raw: string, width: number): string {
+	const trimmed = raw.trim();
+	if (!trimmed) return "".padStart(width, " ");
+	return trimmed.padStart(width, " ");
+}
+
+function padToWidth(text: string, width: number): string {
+	if (!Number.isFinite(width) || width > 10_000) {
+		return text;
+	}
+	const paddingNeeded = Math.max(0, width - visibleWidth(text));
+	return text + " ".repeat(paddingNeeded);
+}
+
+function styleRemovedPrefix(prefix: string): string {
+	return chalk.hex("#fb7185")(prefix);
+}
+
+function styleAddedPrefix(prefix: string): string {
+	return chalk.hex("#4ade80")(prefix);
+}
+
+function styleRemovedToken(value: string): string {
+	return chalk.bgHex(DIFF_BG.removedToken).whiteBright(value);
+}
+
+function styleAddedToken(value: string): string {
+	return chalk.bgHex(DIFF_BG.addedToken).whiteBright(value);
+}
+
+function styleAddedLine(text: string, width: number): string {
+	const prefix = text.startsWith("+") ? styleAddedPrefix("+") : "";
+	const rest = prefix ? text.slice(1) : text;
+	return chalk.bgHex(DIFF_BG.addedLine).whiteBright(padToWidth(`${prefix}${rest}`, width));
+}
+
+function styleRemovedLine(text: string, width: number): string {
+	const prefix = text.startsWith("-") ? styleRemovedPrefix("-") : "";
+	const rest = prefix ? text.slice(1) : text;
+	return chalk.bgHex(DIFF_BG.removedLine).whiteBright(padToWidth(`${prefix}${rest}`, width));
+}
+
 /**
- * Compute word-level diff and render with inverse on changed parts.
+ * Compute word-level diff and render changed tokens with subtle emphasis.
  * Uses diffWords which groups whitespace with adjacent words for cleaner highlighting.
- * Strips leading whitespace from inverse to avoid highlighting indentation.
+ * Strips leading whitespace from highlighted token spans.
  */
 function renderIntraLineDiff(oldContent: string, newContent: string): { removedLine: string; addedLine: string } {
 	const wordDiff = Diff.diffWords(oldContent, newContent);
@@ -34,7 +85,6 @@ function renderIntraLineDiff(oldContent: string, newContent: string): { removedL
 	for (const part of wordDiff) {
 		if (part.removed) {
 			let value = part.value;
-			// Strip leading whitespace from the first removed part
 			if (isFirstRemoved) {
 				const leadingWs = value.match(/^(\s*)/)?.[1] || "";
 				value = value.slice(leadingWs.length);
@@ -42,11 +92,10 @@ function renderIntraLineDiff(oldContent: string, newContent: string): { removedL
 				isFirstRemoved = false;
 			}
 			if (value) {
-				removedLine += theme.inverse(value);
+				removedLine += styleRemovedToken(value);
 			}
 		} else if (part.added) {
 			let value = part.value;
-			// Strip leading whitespace from the first added part
 			if (isFirstAdded) {
 				const leadingWs = value.match(/^(\s*)/)?.[1] || "";
 				value = value.slice(leadingWs.length);
@@ -54,7 +103,7 @@ function renderIntraLineDiff(oldContent: string, newContent: string): { removedL
 				isFirstAdded = false;
 			}
 			if (value) {
-				addedLine += theme.inverse(value);
+				addedLine += styleAddedToken(value);
 			}
 		} else {
 			removedLine += part.value;
@@ -70,29 +119,52 @@ export interface RenderDiffOptions {
 	filePath?: string;
 }
 
-/**
- * Render a diff string with colored lines and intra-line change highlighting.
- * - Context lines: dim/gray
- * - Removed lines: red, with inverse on changed tokens
- * - Added lines: green, with inverse on changed tokens
- */
-export function renderDiff(diffText: string, _options: RenderDiffOptions = {}): string {
+function renderStyledLine(
+	text: string,
+	width: number,
+	kind: "context" | "added" | "removed",
+): string[] {
+	const wrapWidth = Math.max(1, width);
+	const wrapped = wrapTextWithAnsi(text, wrapWidth);
+	if (kind === "added") {
+		return wrapped.map((line) => styleAddedLine(line, width));
+	}
+	if (kind === "removed") {
+		return wrapped.map((line) => styleRemovedLine(line, width));
+	}
+	return wrapped.map((line) => padToWidth(theme.fg("toolDiffContext", line), width));
+}
+
+export function renderDiffLines(diffText: string, width: number, _options: RenderDiffOptions = {}): string[] {
 	const lines = diffText.split("\n");
 	const result: string[] = [];
 
+	const parsedLines = lines.map(parseDiffLine).filter((p): p is { prefix: string; lineNum: string; content: string } => !!p);
+	const lineNumWidth = Math.max(
+		1,
+		...parsedLines
+			.map((p) => p.lineNum.trim())
+			.filter(Boolean)
+			.map((n) => n.length),
+	);
+
+	const formatLine = (prefix: "+" | "-" | " ", lineNum: string, content: string): string => {
+		const num = formatLineNum(lineNum, lineNumWidth);
+		return `${prefix}${num} ${replaceTabs(content)}`;
+	};
+
 	let i = 0;
 	while (i < lines.length) {
 		const line = lines[i];
 		const parsed = parseDiffLine(line);
 
 		if (!parsed) {
-			result.push(theme.fg("toolDiffContext", line));
+			result.push(...renderStyledLine(line, width, "context"));
 			i++;
 			continue;
 		}
 
 		if (parsed.prefix === "-") {
-			// Collect consecutive removed lines
 			const removedLines: { lineNum: string; content: string }[] = [];
 			while (i < lines.length) {
 				const p = parseDiffLine(lines[i]);
@@ -101,7 +173,6 @@ export function renderDiff(diffText: string, _options: RenderDiffOptions = {}):
 				i++;
 			}
 
-			// Collect consecutive added lines
 			const addedLines: { lineNum: string; content: string }[] = [];
 			while (i < lines.length) {
 				const p = parseDiffLine(lines[i]);
@@ -110,8 +181,6 @@ export function renderDiff(diffText: string, _options: RenderDiffOptions = {}):
 				i++;
 			}
 
-			// Only do intra-line diffing when there's exactly one removed and one added line
-			// (indicating a single line modification). Otherwise, show lines as-is.
 			if (removedLines.length === 1 && addedLines.length === 1) {
 				const removed = removedLines[0];
 				const added = addedLines[0];
@@ -121,27 +190,35 @@ export function renderDiff(diffText: string, _options: RenderDiffOptions = {}):
 					replaceTabs(added.content),
 				);
 
-				result.push(theme.fg("toolDiffRemoved", `-${removed.lineNum} ${removedLine}`));
-				result.push(theme.fg("toolDiffAdded", `+${added.lineNum} ${addedLine}`));
+				result.push(...renderStyledLine(formatLine("-", removed.lineNum, removedLine), width, "removed"));
+				result.push(...renderStyledLine(formatLine("+", added.lineNum, addedLine), width, "added"));
 			} else {
-				// Show all removed lines first, then all added lines
 				for (const removed of removedLines) {
-					result.push(theme.fg("toolDiffRemoved", `-${removed.lineNum} ${replaceTabs(removed.content)}`));
+					result.push(...renderStyledLine(formatLine("-", removed.lineNum, removed.content), width, "removed"));
 				}
 				for (const added of addedLines) {
-					result.push(theme.fg("toolDiffAdded", `+${added.lineNum} ${replaceTabs(added.content)}`));
+					result.push(...renderStyledLine(formatLine("+", added.lineNum, added.content), width, "added"));
 				}
 			}
 		} else if (parsed.prefix === "+") {
-			// Standalone added line
-			result.push(theme.fg("toolDiffAdded", `+${parsed.lineNum} ${replaceTabs(parsed.content)}`));
+			result.push(...renderStyledLine(formatLine("+", parsed.lineNum, parsed.content), width, "added"));
 			i++;
 		} else {
-			// Context line
-			result.push(theme.fg("toolDiffContext", ` ${parsed.lineNum} ${replaceTabs(parsed.content)}`));
+			result.push(...renderStyledLine(formatLine(" ", parsed.lineNum, parsed.content), width, "context"));
 			i++;
 		}
 	}
 
-	return result.join("\n");
+	return result;
+}
+
+/**
+ * Render a diff string with Claude-like colored lines.
+ * - Context lines: muted gray
+ * - Removed lines: red text on subtle red background
+ * - Added lines: green text on subtle green background
+ * - Changed tokens: slightly stronger background + bold
+ */
+export function renderDiff(diffText: string, options: RenderDiffOptions = {}): string {
+	return renderDiffLines(diffText, Number.MAX_SAFE_INTEGER, options).join("\n");
 }

package/packages/pi-coding-agent/src/modes/interactive/components/footer.ts

@@ -46,6 +46,8 @@ export function formatPromptCost(cost: number): string {
 export class FooterComponent implements Component {
 	private autoCompactEnabled = true;
 	private permissionMode: PermissionMode = "danger-full-access";
+	private notificationSoundEnabled = false;
+	private verboseFooterEnabled = false;
 
 	constructor(
 		private session: AgentSession,
@@ -60,6 +62,14 @@ export class FooterComponent implements Component {
 		this.permissionMode = mode;
 	}
 
+	setNotificationSoundEnabled(enabled: boolean): void {
+		this.notificationSoundEnabled = enabled;
+	}
+
+	setVerboseFooterEnabled(enabled: boolean): void {
+		this.verboseFooterEnabled = enabled;
+	}
+
 	/**
 	 * No-op: git branch caching now handled by provider.
 	 * Kept for compatibility with existing call sites in interactive-mode.
@@ -120,9 +130,12 @@ export class FooterComponent implements Component {
 		const extensionStatuses = this.footerData.getExtensionStatuses();
 		const cacheTimerStatusRaw = extensionStatuses.get("cache-timer");
 		const cacheTimerStatus = cacheTimerStatusRaw ? sanitizeStatusText(cacheTimerStatusRaw) : "";
-		const hotkeysHints = ["Ctrl+K • /hotkeys", "/hotkeys", "Ctrl+K"];
+		const hotkeysHints = ["/hotkeys"];
 		const firstLineMinPadding = 2;
 		const firstLineRightParts = cacheTimerStatus ? [cacheTimerStatus] : [];
+		if (this.notificationSoundEnabled) {
+			firstLineRightParts.push(theme.fg("success", "🔔"));
+		}
 		const firstLineRightBase = firstLineRightParts.join("  ");
 		const hotkeysHint = hotkeysHints.find((hint) => {
 			const candidate = firstLineRightBase ? `${firstLineRightBase}  ${hint}` : hint;
@@ -147,10 +160,12 @@ export class FooterComponent implements Component {
 
 		// Build stats line
 		const statsParts = [];
-		if (totalInput) statsParts.push(`↑${formatTokens(totalInput)}`);
-		if (totalOutput) statsParts.push(`↓${formatTokens(totalOutput)}`);
-		if (totalCacheRead) statsParts.push(`Cache ${formatTokens(totalCacheRead)}`);
-		if (totalCacheWrite) statsParts.push(`W${formatTokens(totalCacheWrite)}`);
+		if (this.verboseFooterEnabled) {
+			if (totalInput) statsParts.push(`↑${formatTokens(totalInput)}`);
+			if (totalOutput) statsParts.push(`↓${formatTokens(totalOutput)}`);
+			if (totalCacheRead) statsParts.push(`Cache ${formatTokens(totalCacheRead)}`);
+			if (totalCacheWrite) statsParts.push(`W${formatTokens(totalCacheWrite)}`);
+		}
 
 		// Show cost with "(sub)" indicator if using OAuth subscription
 		const usingSubscription = displayModel ? this.session.modelRegistry.isUsingOAuth(displayModel) : false;
@@ -160,7 +175,7 @@ export class FooterComponent implements Component {
 		}
 
 		// Per-prompt cost annotation (opt-in via show_token_cost preference, #1515)
-		if (process.env.GSD_SHOW_TOKEN_COST === "1") {
+		if (this.verboseFooterEnabled && process.env.GSD_SHOW_TOKEN_COST === "1") {
 			const lastTurnCost = this.session.getLastTurnCost();
 			if (lastTurnCost > 0) {
 				statsParts.push(`(last: ${formatPromptCost(lastTurnCost)})`);