gsd-pi 2.75.0-dev.063e5a3 → 2.75.0-dev.96d4bb599

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

@@ -27,10 +27,10 @@ export function renderChatFrame(
 	const contentWidth = Math.max(1, outerWidth - 2); // "│ " + content
 	const borderColor =
 		opts.tone === "user"
-			? "borderAccent"
+			? "border"
 			: opts.tone === "compaction"
 				? "customMessageLabel"
-				: "border";
+				: "borderAccent";
 	const borderMuted =
 		opts.tone === "compaction" ? "customMessageLabel" : "borderMuted";
 	const border = (s: string) => theme.fg(borderColor, s);
@@ -44,12 +44,18 @@ export function renderChatFrame(
 		? Math.max(1, outerWidth - visibleWidth(rightRaw) - 1)
 		: outerWidth;
 	const left = truncateToWidth(leftRaw, leftBudget, "");
-	const leftStyled =
+	const labelColor =
 		opts.tone === "user"
-			? theme.fg("accent", theme.bold(left))
+			? "border"
 			: opts.tone === "compaction"
-				? theme.fg("customMessageLabel", theme.bold(left))
-				: theme.fg("muted", theme.bold(left));
+				? "customMessageLabel"
+				: "borderAccent";
+	const dashIdx = left.indexOf(" - ");
+	const leftStyled =
+		dashIdx >= 0
+			? theme.fg(labelColor, theme.bold(left.slice(0, dashIdx))) +
+				theme.fg("dim", left.slice(dashIdx))
+			: theme.fg(labelColor, theme.bold(left));
 	const rightStyled = rightRaw ? theme.fg("dim", rightRaw) : "";
 	const gap =
 		rightRaw.length > 0
@@ -62,9 +68,15 @@ export function renderChatFrame(
 	const headerPad = Math.max(0, outerWidth - visibleWidth(headerRow));
 
 	const sourceLines = trimOuterBlankLines(contentLines);
+	const bodyColor =
+		opts.tone === "user"
+			? "userMessageText"
+			: opts.tone === "compaction"
+				? "customMessageText"
+				: "assistantMessageText";
 	const bodyLines = (sourceLines.length > 0 ? sourceLines : [""]).map((line) => {
 		const clipped = truncateToWidth(line, contentWidth, "");
-		return border("│ ") + clipped;
+		return border("│ ") + theme.fg(bodyColor, clipped);
 	});
 
 	return [

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

@@ -114,15 +114,20 @@ export class FooterComponent implements Component {
 		// Build stats line as separate groups joined by a dim middle-dot separator
 		const sep = ` ${theme.fg("dim", "\u00B7")} `;
 
-		// Group 1: token I/O
+		// Group 1: total tokens.
 		const tokenGroup: string[] = [];
-		if (totalInput) tokenGroup.push(`↑${formatTokens(totalInput)}`);
-		if (totalOutput) tokenGroup.push(`↓${formatTokens(totalOutput)}`);
+		const totalTokens = totalInput + totalOutput + totalCacheRead + totalCacheWrite;
+		if (totalTokens > 0) tokenGroup.push(formatTokens(totalTokens));
 
-		// Group 2: cache metrics
+		// Group 2: cache efficiency — cacheRead / all input-side tokens.
+		// Collapses the old cr/cw pair into a single "how much was served
+		// from cache" signal. cr/cw breakdown moved to `/stats`.
 		const cacheGroup: string[] = [];
-		if (totalCacheRead) cacheGroup.push(`cr:${formatTokens(totalCacheRead)}`);
-		if (totalCacheWrite) cacheGroup.push(`cw:${formatTokens(totalCacheWrite)}`);
+		const inputSide = totalInput + totalCacheRead + totalCacheWrite;
+		if (totalCacheRead > 0 && inputSide > 0) {
+			const cachedPct = Math.round((totalCacheRead / inputSide) * 100);
+			cacheGroup.push(`${cachedPct}% cached`);
+		}
 
 		// Group 3: cost
 		const costGroup: string[] = [];
@@ -140,20 +145,27 @@ export class FooterComponent implements Component {
 			}
 		}
 
-		// Group 4: context percentage (colorized)
-		let contextPercentStr: string;
+		// Group 4: context bar + percentage (mirrors /gsd auto dashboard style).
+		// Bar colors track the same thresholds as the percent text.
 		const autoIndicator = this.autoCompactEnabled ? " (auto)" : "";
-		const contextPercentDisplay =
-			contextPercent === "?"
-				? `?/${formatTokens(contextWindow)}${autoIndicator}`
-				: `${contextPercent}%/${formatTokens(contextWindow)}${autoIndicator}`;
-		if (contextPercentValue > 90) {
-			contextPercentStr = theme.fg("error", contextPercentDisplay);
-		} else if (contextPercentValue > 70) {
-			contextPercentStr = theme.fg("warning", contextPercentDisplay);
-		} else {
-			contextPercentStr = contextPercentDisplay;
-		}
+		const barColor: "error" | "warning" | "success" =
+			contextPercentValue > 90 ? "error" : contextPercentValue > 70 ? "warning" : "success";
+		const BAR_WIDTH = 8;
+		const filled = contextUsage?.percent !== null
+			? Math.max(0, Math.min(BAR_WIDTH, Math.round((contextPercentValue / 100) * BAR_WIDTH)))
+			: 0;
+		const bar =
+			theme.fg(barColor, "━".repeat(filled)) +
+			theme.fg("dim", "─".repeat(Math.max(0, BAR_WIDTH - filled)));
+		const pctText = contextPercent === "?" ? "?" : `${contextPercent}%`;
+		const suffix = `/${formatTokens(contextWindow)}${autoIndicator}`;
+		const colorizedPct =
+			contextPercentValue > 90
+				? theme.fg("error", pctText)
+				: contextPercentValue > 70
+					? theme.fg("warning", pctText)
+					: pctText;
+		const contextPercentStr = `${bar} ${colorizedPct}${suffix}`;
 
 		// Assemble groups: items within a group are space-separated,
 		// groups are separated by a dim middle-dot
@@ -226,21 +238,31 @@ export class FooterComponent implements Component {
 		const remainder = statsLine.slice(statsLeft.length); // padding + rightSide
 		const dimRemainder = theme.fg("dim", remainder);
 
-		const pwdLine = truncateToWidth(theme.fg("dim", pwd), width, theme.fg("dim", "..."));
-		const lines = [pwdLine, dimStatsLeft + dimRemainder];
-
-		// Add extension statuses on a single line, sorted by key alphabetically
+		// Extension statuses right-aligned on the pwd line (sorted by key).
+		// Keeps the footer compact by avoiding a dedicated row when the content
+		// fits alongside pwd. Falls back to pwd-only if the combined line would
+		// exceed width.
 		const extensionStatuses = this.footerData.getExtensionStatuses();
-		if (extensionStatuses.size > 0) {
-			const sortedStatuses = Array.from(extensionStatuses.entries())
-				.sort(([a], [b]) => a.localeCompare(b))
-				.map(([, text]) => sanitizeStatusText(text));
-			const statusLine = sortedStatuses.join(" ");
-			// Match the rest of the footer styling: extension statuses should render
-			// in the same dim color as pwd/stats, with a dim ellipsis on truncation.
-			lines.push(truncateToWidth(theme.fg("dim", statusLine), width, theme.fg("dim", "...")));
+		const extStatusText =
+			extensionStatuses.size > 0
+				? Array.from(extensionStatuses.entries())
+						.sort(([a], [b]) => a.localeCompare(b))
+						.map(([, text]) => sanitizeStatusText(text))
+						.join(" ")
+				: "";
+
+		const pwdWidth = visibleWidth(pwd);
+		const extWidth = visibleWidth(extStatusText);
+		let pwdLine: string;
+		if (extStatusText && pwdWidth + 2 + extWidth <= width) {
+			const padding = " ".repeat(width - pwdWidth - extWidth);
+			pwdLine = theme.fg("dim", pwd + padding + extStatusText);
+		} else {
+			pwdLine = truncateToWidth(theme.fg("dim", pwd), width, theme.fg("dim", "..."));
 		}
 
+		const lines = [pwdLine, dimStatsLeft + dimRemainder];
+
 		return lines;
 	}
 }

package/packages/pi-coding-agent/src/modes/interactive/controllers/chat-controller.ts

@@ -43,11 +43,12 @@ function hasAssistantToolBlocks(message: { content: Array<any> }): boolean {
 	return message.content.some((c) => c.type === "toolCall" || c.type === "serverToolUse");
 }
 
-// Pick the latest non-empty text block that appears strictly before the most
-// recent tool call. Text blocks that come after the last tool call are still
-// streaming live into the chat container, so mirroring them into the pinned
-// "Latest Output" zone would render the same tokens twice.
-export function findLatestPinnableText(contentBlocks: Array<any>): string {
+// Pinnable text candidates: non-empty text blocks that appear strictly before
+// the most recent tool call, returned newest-first. Text blocks after the last
+// tool call are still streaming live into the chat container.
+export function findLatestPinnableCandidates(
+	contentBlocks: Array<any>,
+): Array<{ text: string; contentIndex: number }> {
 	let lastToolIdx = -1;
 	for (let i = contentBlocks.length - 1; i >= 0; i--) {
 		const c = contentBlocks[i];
@@ -56,13 +57,38 @@ export function findLatestPinnableText(contentBlocks: Array<any>): string {
 			break;
 		}
 	}
+	const out: Array<{ text: string; contentIndex: number }> = [];
 	for (let i = lastToolIdx - 1; i >= 0; i--) {
 		const c = contentBlocks[i];
 		if (c?.type === "text" && typeof c.text === "string" && c.text.trim()) {
-			return c.text.trim();
+			out.push({ text: c.text.trim(), contentIndex: i });
+		}
+	}
+	return out;
+}
+
+export function findLatestPinnableText(contentBlocks: Array<any>): string {
+	return findLatestPinnableCandidates(contentBlocks)[0]?.text ?? "";
+}
+
+// Sum rendered line counts of segments that appear strictly after the given
+// content-block index. Used to decide whether a pinnable text block has
+// scrolled out of the viewport and therefore warrants mirroring.
+function rowsRenderedAfterContentIndex(contentIndex: number, width: number): number {
+	let rows = 0;
+	for (const seg of renderedSegments) {
+		try {
+			if (seg.kind === "text-run" && seg.startIndex > contentIndex) {
+				rows += seg.component.render(width).length;
+			} else if (seg.kind === "tool" && seg.contentIndex > contentIndex) {
+				rows += seg.component.render(width).length;
+			}
+		} catch {
+			// Defensive: a component that throws during measurement shouldn't
+			// destabilize pinned-zone logic. Skip it.
 		}
 	}
-	return "";
+	return rows;
 }
 
 // Tracks the latest assistant text for the pinned message zone
@@ -523,39 +549,65 @@ export async function handleAgentEvent(host: InteractiveModeStateHost & {
 				if (hasTools) hasToolsInTurn = true;
 
 				if (hasToolsInTurn) {
-					const latestText = findLatestPinnableText(contentBlocks);
+					const candidates = findLatestPinnableCandidates(contentBlocks);
+					const termRows = host.ui.terminal.rows;
+					const termCols = host.ui.terminal.columns;
+					const pinnedMax = Math.max(3, Math.floor(termRows * 0.4));
+					// Reserve rows for pinned zone + its border + editor + footer chrome.
+					// Anything below this row budget is still in the viewport.
+					const offscreenThreshold = Math.max(1, termRows - pinnedMax - 8);
+
+					// Walk candidates newest→oldest; pick the first whose following
+					// segments have pushed enough rows to scroll it off-screen.
+					let picked: { text: string; contentIndex: number } | undefined;
+					for (const c of candidates) {
+						if (rowsRenderedAfterContentIndex(c.contentIndex, termCols) >= offscreenThreshold) {
+							picked = c;
+							break;
+						}
+					}
 
-					if (latestText && latestText !== lastPinnedText) {
-						lastPinnedText = latestText;
+					if (picked) {
+						if (picked.text !== lastPinnedText) {
+							lastPinnedText = picked.text;
 
-						if (!pinnedBorder) {
-							// First time: create border + text component
-							host.pinnedMessageContainer.clear();
-							pinnedBorder = new DynamicBorder(
-								(str: string) => theme.fg("dim", str),
-								"Working · Latest Output",
-							);
-							pinnedBorder.startSpinner(host.ui, (str: string) => theme.fg("accent", str));
-							host.pinnedMessageContainer.addChild(pinnedBorder);
-							pinnedTextComponent = new Markdown(latestText, 1, 0, host.getMarkdownThemeWithSettings());
-							// Cap pinned content to ~40% of terminal height so tall output
-							// doesn't exceed the viewport and cause render flashing.
-							pinnedTextComponent.maxLines = Math.max(3, Math.floor(host.ui.terminal.rows * 0.4));
-							host.pinnedMessageContainer.addChild(pinnedTextComponent);
-							// Hide the separate status loader — the pinned zone replaces it
-							if (host.loadingAnimation) {
-								host.loadingAnimation.stop();
-								host.loadingAnimation = undefined;
-							}
-							host.statusContainer.clear();
-						} else {
-							// Update existing markdown component in-place
-							pinnedTextComponent?.setText(latestText);
-							// Refresh maxLines in case terminal was resized
-							if (pinnedTextComponent) {
-								pinnedTextComponent.maxLines = Math.max(3, Math.floor(host.ui.terminal.rows * 0.4));
+							if (!pinnedBorder) {
+								// First time: create border + text component
+								host.pinnedMessageContainer.clear();
+								pinnedBorder = new DynamicBorder(
+									(str: string) => theme.fg("dim", str),
+									"Working · Latest Output",
+								);
+								pinnedBorder.startSpinner(host.ui, (str: string) => theme.fg("accent", str));
+								host.pinnedMessageContainer.addChild(pinnedBorder);
+								pinnedTextComponent = new Markdown(picked.text, 1, 0, host.getMarkdownThemeWithSettings());
+								// Cap pinned content to ~40% of terminal height so tall output
+								// doesn't exceed the viewport and cause render flashing.
+								pinnedTextComponent.maxLines = pinnedMax;
+								host.pinnedMessageContainer.addChild(pinnedTextComponent);
+								// Hide the separate status loader — the pinned zone replaces it
+								if (host.loadingAnimation) {
+									host.loadingAnimation.stop();
+									host.loadingAnimation = undefined;
+								}
+								host.statusContainer.clear();
+							} else {
+								// Update existing markdown component in-place
+								pinnedTextComponent?.setText(picked.text);
+								// Refresh maxLines in case terminal was resized
+								if (pinnedTextComponent) {
+									pinnedTextComponent.maxLines = pinnedMax;
+								}
 							}
 						}
+					} else if (pinnedBorder) {
+						// Every candidate is still visible in the chat scrollback —
+						// tear down the pinned zone so we don't duplicate on-screen text.
+						pinnedBorder.stopSpinner();
+						pinnedBorder = undefined;
+						pinnedTextComponent = undefined;
+						host.pinnedMessageContainer.clear();
+						lastPinnedText = "";
 					}
 				}
 

package/packages/pi-coding-agent/src/modes/interactive/theme/theme-schema.ts

@@ -0,0 +1,83 @@
+import { Type, type Static } from "@sinclair/typebox";
+
+const ColorValueSchema = Type.Union([
+  Type.String(), // hex "#ff0000", var ref "primary", or empty ""
+  Type.Integer({ minimum: 0, maximum: 255 }), // 256-color index
+]);
+export type ColorValue = Static<typeof ColorValueSchema>;
+
+export const ThemeJsonSchema = Type.Object({
+  $schema: Type.Optional(Type.String()),
+  name: Type.String(),
+  vars: Type.Optional(Type.Record(Type.String(), ColorValueSchema)),
+  colors: Type.Object({
+    // Core UI (10 colors)
+    accent: ColorValueSchema,
+    border: ColorValueSchema,
+    borderAccent: ColorValueSchema,
+    borderMuted: ColorValueSchema,
+    success: ColorValueSchema,
+    error: ColorValueSchema,
+    warning: ColorValueSchema,
+    muted: ColorValueSchema,
+    dim: ColorValueSchema,
+    text: ColorValueSchema,
+    thinkingText: ColorValueSchema,
+    // Backgrounds & Content Text (11 colors)
+    selectedBg: ColorValueSchema,
+    userMessageBg: ColorValueSchema,
+    userMessageText: ColorValueSchema,
+    assistantMessageText: ColorValueSchema,
+    customMessageBg: ColorValueSchema,
+    customMessageText: ColorValueSchema,
+    customMessageLabel: ColorValueSchema,
+    toolPendingBg: ColorValueSchema,
+    toolSuccessBg: ColorValueSchema,
+    toolErrorBg: ColorValueSchema,
+    toolTitle: ColorValueSchema,
+    toolOutput: ColorValueSchema,
+    // Markdown (10 colors)
+    mdHeading: ColorValueSchema,
+    mdLink: ColorValueSchema,
+    mdLinkUrl: ColorValueSchema,
+    mdCode: ColorValueSchema,
+    mdCodeBlock: ColorValueSchema,
+    mdCodeBlockBorder: ColorValueSchema,
+    mdQuote: ColorValueSchema,
+    mdQuoteBorder: ColorValueSchema,
+    mdHr: ColorValueSchema,
+    mdListBullet: ColorValueSchema,
+    // Tool Diffs (3 colors)
+    toolDiffAdded: ColorValueSchema,
+    toolDiffRemoved: ColorValueSchema,
+    toolDiffContext: ColorValueSchema,
+    // Syntax Highlighting (9 colors)
+    syntaxComment: ColorValueSchema,
+    syntaxKeyword: ColorValueSchema,
+    syntaxFunction: ColorValueSchema,
+    syntaxVariable: ColorValueSchema,
+    syntaxString: ColorValueSchema,
+    syntaxNumber: ColorValueSchema,
+    syntaxType: ColorValueSchema,
+    syntaxOperator: ColorValueSchema,
+    syntaxPunctuation: ColorValueSchema,
+    // Thinking Level Borders (6 colors)
+    thinkingOff: ColorValueSchema,
+    thinkingMinimal: ColorValueSchema,
+    thinkingLow: ColorValueSchema,
+    thinkingMedium: ColorValueSchema,
+    thinkingHigh: ColorValueSchema,
+    thinkingXhigh: ColorValueSchema,
+    // Bash Mode (1 color)
+    bashMode: ColorValueSchema,
+  }),
+  export: Type.Optional(
+    Type.Object({
+      pageBg: Type.Optional(ColorValueSchema),
+      cardBg: Type.Optional(ColorValueSchema),
+      infoBg: Type.Optional(ColorValueSchema),
+    }),
+  ),
+});
+
+export type ThemeJson = Static<typeof ThemeJsonSchema>;

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

@@ -1,7 +1,6 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
 import type { EditorTheme, MarkdownTheme, SelectListTheme } from "@gsd/pi-tui";
-import { type Static, Type } from "@sinclair/typebox";
 import { TypeCompiler } from "@sinclair/typebox/compiler";
 import chalk from "chalk";
 import {
@@ -10,6 +9,7 @@ import {
 	type HighlightColors,
 } from "@gsd/native";
 import { getCustomThemesDir } from "../../../config.js";
+import { ThemeJsonSchema, type ColorValue, type ThemeJson } from "./theme-schema.js";
 import { builtinThemes } from "./themes.js";
 
 // Issue #453: native preview highlighting can wedge the entire interactive
@@ -21,88 +21,6 @@ const NATIVE_TUI_HIGHLIGHT_ENABLED = process.env.GSD_ENABLE_NATIVE_TUI_HIGHLIGHT
 // Types & Schema
 // ============================================================================
 
-const ColorValueSchema = Type.Union([
-	Type.String(), // hex "#ff0000", var ref "primary", or empty ""
-	Type.Integer({ minimum: 0, maximum: 255 }), // 256-color index
-]);
-
-type ColorValue = Static<typeof ColorValueSchema>;
-
-const ThemeJsonSchema = Type.Object({
-	$schema: Type.Optional(Type.String()),
-	name: Type.String(),
-	vars: Type.Optional(Type.Record(Type.String(), ColorValueSchema)),
-	colors: Type.Object({
-		// Core UI (10 colors)
-		accent: ColorValueSchema,
-		border: ColorValueSchema,
-		borderAccent: ColorValueSchema,
-		borderMuted: ColorValueSchema,
-		success: ColorValueSchema,
-		error: ColorValueSchema,
-		warning: ColorValueSchema,
-		muted: ColorValueSchema,
-		dim: ColorValueSchema,
-		text: ColorValueSchema,
-		thinkingText: ColorValueSchema,
-		// Backgrounds & Content Text (11 colors)
-		selectedBg: ColorValueSchema,
-		userMessageBg: ColorValueSchema,
-		userMessageText: ColorValueSchema,
-		customMessageBg: ColorValueSchema,
-		customMessageText: ColorValueSchema,
-		customMessageLabel: ColorValueSchema,
-		toolPendingBg: ColorValueSchema,
-		toolSuccessBg: ColorValueSchema,
-		toolErrorBg: ColorValueSchema,
-		toolTitle: ColorValueSchema,
-		toolOutput: ColorValueSchema,
-		// Markdown (10 colors)
-		mdHeading: ColorValueSchema,
-		mdLink: ColorValueSchema,
-		mdLinkUrl: ColorValueSchema,
-		mdCode: ColorValueSchema,
-		mdCodeBlock: ColorValueSchema,
-		mdCodeBlockBorder: ColorValueSchema,
-		mdQuote: ColorValueSchema,
-		mdQuoteBorder: ColorValueSchema,
-		mdHr: ColorValueSchema,
-		mdListBullet: ColorValueSchema,
-		// Tool Diffs (3 colors)
-		toolDiffAdded: ColorValueSchema,
-		toolDiffRemoved: ColorValueSchema,
-		toolDiffContext: ColorValueSchema,
-		// Syntax Highlighting (9 colors)
-		syntaxComment: ColorValueSchema,
-		syntaxKeyword: ColorValueSchema,
-		syntaxFunction: ColorValueSchema,
-		syntaxVariable: ColorValueSchema,
-		syntaxString: ColorValueSchema,
-		syntaxNumber: ColorValueSchema,
-		syntaxType: ColorValueSchema,
-		syntaxOperator: ColorValueSchema,
-		syntaxPunctuation: ColorValueSchema,
-		// Thinking Level Borders (6 colors)
-		thinkingOff: ColorValueSchema,
-		thinkingMinimal: ColorValueSchema,
-		thinkingLow: ColorValueSchema,
-		thinkingMedium: ColorValueSchema,
-		thinkingHigh: ColorValueSchema,
-		thinkingXhigh: ColorValueSchema,
-		// Bash Mode (1 color)
-		bashMode: ColorValueSchema,
-	}),
-	export: Type.Optional(
-		Type.Object({
-			pageBg: Type.Optional(ColorValueSchema),
-			cardBg: Type.Optional(ColorValueSchema),
-			infoBg: Type.Optional(ColorValueSchema),
-		}),
-	),
-});
-
-export type ThemeJson = Static<typeof ThemeJsonSchema>;
-
 const validateThemeJson = TypeCompiler.Compile(ThemeJsonSchema);
 
 export type ThemeColor =
@@ -118,6 +36,7 @@ export type ThemeColor =
 	| "text"
 	| "thinkingText"
 	| "userMessageText"
+	| "assistantMessageText"
 	| "customMessageText"
 	| "customMessageLabel"
 	| "toolTitle"