gsd-pi 2.81.0 → 2.82.0

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

@@ -1,8 +1,12 @@
+// Project/App: GSD-2
+// File Purpose: Interactive terminal footer renderer for workspace, model, usage, context, and extension status.
+
 import { type Component, truncateToWidth, visibleWidth } from "@gsd/pi-tui";
 import type { AgentSession } from "../../../core/agent-session.js";
 import type { ReadonlyFooterDataProvider } from "../../../core/footer-data-provider.js";
 import { theme } from "../theme/theme.js";
 import { providerAuthBadge, providerDisplayName } from "./model-selector.js";
+import { renderFooterStrip } from "./transcript-design.js";
 
 /**
  * Sanitize text for display in a single-line status.
@@ -155,8 +159,8 @@ export class FooterComponent implements Component {
 			? 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)));
+			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 =
@@ -218,34 +222,9 @@ export class FooterComponent implements Component {
 			}
 		}
 
-		const rightSideWidth = visibleWidth(rightSide);
-		const totalNeeded = statsLeftWidth + minPadding + rightSideWidth;
-
-		let statsLine: string;
-		if (totalNeeded <= width) {
-			// Both fit - add padding to right-align model
-			const padding = " ".repeat(width - statsLeftWidth - rightSideWidth);
-			statsLine = statsLeft + padding + rightSide;
-		} else {
-			// Need to truncate right side
-			const availableForRight = width - statsLeftWidth - minPadding;
-			if (availableForRight > 0) {
-				const truncatedRight = truncateToWidth(rightSide, availableForRight, "");
-				const truncatedRightWidth = visibleWidth(truncatedRight);
-				const padding = " ".repeat(Math.max(0, width - statsLeftWidth - truncatedRightWidth));
-				statsLine = statsLeft + padding + truncatedRight;
-			} else {
-				// Not enough space for right side at all
-				statsLine = statsLeft;
-			}
-		}
-
-		// Apply dim to each part separately. statsLeft may contain color codes (for context %)
-		// that end with a reset, which would clear an outer dim wrapper. So we dim the parts
-		// before and after the colored section independently.
+		// Apply dim to the stats group before handing it to the shared footer strip.
+		// statsLeft may contain color codes for context %, so keep coloring local to the group.
 		const dimStatsLeft = theme.fg("dim", statsLeft);
-		const remainder = statsLine.slice(statsLeft.length); // padding + rightSide
-		const dimRemainder = theme.fg("dim", remainder);
 
 		// Extension statuses right-aligned on the pwd line (sorted by key).
 		// Keeps the footer compact by avoiding a dedicated row when the content
@@ -260,18 +239,12 @@ export class FooterComponent implements Component {
 						.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;
+		const leftSegments = [
+			theme.fg("accent", "● GSD"),
+			theme.fg("dim", pwd),
+			dimStatsLeft,
+		];
+		const footerRight = [rightSide, extStatusText].filter(Boolean).join(" ");
+		return renderFooterStrip(leftSegments, footerRight, width);
 	}
 }

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

@@ -1,4 +1,5 @@
-// GSD-2 Interactive Tool Execution Rendering
+// Project/App: GSD-2
+// File Purpose: Interactive terminal tool execution renderer for commands, tool calls, diffs, images, and summaries.
 import {
 	Box,
 	Container,
@@ -24,6 +25,7 @@ import { getLanguageFromPath, highlightCode, theme } from "../theme/theme.js";
 import { shortenPath } from "../utils/shorten-path.js";
 import { renderDiff } from "./diff.js";
 import { keyHint } from "./keybinding-hints.js";
+import { renderCommandCard, renderToolLineCard, renderTranscriptCard, type StatusTone } from "./transcript-design.js";
 import { truncateToVisualLines } from "./visual-truncate.js";
 
 // Preview line limit for bash when not expanded
@@ -83,73 +85,6 @@ function prettifyToolName(name: string, label?: string): string {
 		.join(" ");
 }
 
-type ToolFrameTone = "pending" | "success" | "error";
-
-function trimOuterBlankLines(lines: string[]): string[] {
-	let start = 0;
-	let end = lines.length;
-	while (start < end && lines[start].trim().length === 0) start++;
-	while (end > start && lines[end - 1].trim().length === 0) end--;
-	return lines.slice(start, end);
-}
-
-function renderToolFrame(
-	contentLines: string[],
-	width: number,
-	opts: {
-		label: string;
-		status: string;
-		tone: ToolFrameTone;
-	},
-): string[] {
-	const outerWidth = Math.max(20, width);
-	const contentWidth = Math.max(1, outerWidth - 2); // "│ " + content
-
-	const borderColor = opts.tone === "error" ? "toolError" : opts.tone === "pending" ? "toolRunning" : "toolSuccess";
-	const topColor = borderColor;
-	const labelColor = opts.tone === "error" ? "toolError" : opts.tone === "pending" ? "toolRunning" : "toolSuccess";
-	const statusColor = opts.tone === "error" ? "toolError" : opts.tone === "pending" ? "toolRunning" : "toolSuccess";
-	const leftStyled = theme.fg(labelColor, theme.bold(opts.label));
-	const rightStyled = theme.fg(statusColor, opts.status);
-	const titleWidth = Math.max(1, outerWidth - 4);
-	const gap = Math.max(1, titleWidth - visibleWidth(leftStyled) - visibleWidth(rightStyled));
-	const headerRow = `${leftStyled}${" ".repeat(gap)}${rightStyled}`;
-	const headerPad = Math.max(0, titleWidth - visibleWidth(headerRow));
-
-	const sourceLines = trimOuterBlankLines(contentLines);
-	const bodyLines = (sourceLines.length > 0 ? sourceLines : [""]).map((line) => {
-		const clipped = truncateToWidth(line, contentWidth, "");
-		return clipped;
-	});
-
-	return style()
-		.border("rounded")
-		.borderColor((line) => theme.fg(line.startsWith("─") ? topColor : borderColor, line))
-		.title(headerRow + " ".repeat(headerPad))
-		.render(bodyLines, outerWidth);
-}
-
-function renderCollapsedToolRow(
-	label: string,
-	status: string,
-	width: number,
-	tone: Extract<ToolFrameTone, "success">,
-): string[] {
-	const outerWidth = Math.max(20, width);
-	const contentWidth = Math.max(1, outerWidth - 2);
-	const statusColor = tone === "success" ? "toolSuccess" : "toolMuted";
-	const labelStyled = theme.fg(statusColor, label);
-	const statusStyled = theme.fg(statusColor, status);
-	const labelWidth = Math.max(1, contentWidth - visibleWidth(statusStyled) - 1);
-	const clippedLabel = truncateToWidth(labelStyled, labelWidth, "");
-	const gap = Math.max(1, contentWidth - visibleWidth(clippedLabel) - visibleWidth(statusStyled));
-	const line = `${clippedLabel}${" ".repeat(gap)}${statusStyled}`;
-	return style()
-		.border("minimal")
-		.borderColor((text) => theme.fg(statusColor, text))
-		.render([line], outerWidth);
-}
-
 const COMPACT_ARG_VALUE_LIMIT = 60;
 const GENERIC_OUTPUT_PREVIEW_LINES = 10;
 const GENERIC_ARGS_JSON_PREVIEW_LINES = 10;
@@ -213,6 +148,40 @@ function formatToolTarget(target: ToolTargetMetadata): string | undefined {
 	return appendLineOrRange(displayPath, target);
 }
 
+function directDetailsTarget(details: unknown, action: string): ToolTargetMetadata | undefined {
+	if (!details || typeof details !== "object") return undefined;
+	const record = details as Record<string, unknown>;
+	const rawPath = record.resolvedPath ?? record.inputPath ?? record.file_path ?? record.path;
+	if (typeof rawPath !== "string" || rawPath.trim().length === 0) return undefined;
+	const target: ToolTargetMetadata = {
+		kind: "file",
+		action,
+		resolvedPath: typeof record.resolvedPath === "string" ? record.resolvedPath : rawPath,
+		inputPath: typeof record.inputPath === "string" ? record.inputPath : rawPath,
+	};
+	if (typeof record.line === "number") {
+		target.line = record.line;
+	}
+	const range = record.range;
+	if (range && typeof range === "object") {
+		const rangeRecord = range as Record<string, unknown>;
+		target.range = {
+			start: typeof rangeRecord.start === "number" ? rangeRecord.start : undefined,
+			end: typeof rangeRecord.end === "number" ? rangeRecord.end : undefined,
+		};
+	}
+	return target;
+}
+
+function firstStringArg(args: Record<string, unknown>, keys: string[]): string | null {
+	for (const key of keys) {
+		const value = str(args[key]);
+		if (value === null) continue;
+		if (value) return value;
+	}
+	return "";
+}
+
 function formatArgsPathTarget(path: string | null, args: Record<string, unknown>): string | undefined {
 	if (!path) return undefined;
 	const start = typeof args.offset === "number" ? args.offset : undefined;
@@ -692,22 +661,47 @@ export class ToolExecutionComponent extends Container {
 		}
 		const frameWidth = Math.max(20, width);
 		const contentWidth = Math.max(1, frameWidth - 4);
-		const frameTone: ToolFrameTone =
+		const frameTone: "pending" | "success" | "error" =
 			this.result?.isError ? "error" : this.isPartial || !this.result ? "pending" : "success";
 		const elapsed = formatElapsed((this.endedAt ?? Date.now()) - this.startedAt);
-		const frameStatus = `${this.isPartial || !this.result ? "running" : this.result.isError ? "failed" : "success"} · ${elapsed}`;
+		const statusWord = this.isPartial || !this.result ? "running" : this.result.isError ? "failed" : "success";
+		const frameStatus = `${statusWord} · ${elapsed}`;
 		const parsed = parseMcpToolName(this.toolName);
 		const frameLabel = parsed
 			? `${parsed.server}·${parsed.tool}`
 			: prettifyToolName(this.toolName, this.toolDefinition?.label) || "unknown";
-		if (this.shouldRenderCompactSuccess()) {
-			return ["", ...renderCollapsedToolRow(this.getCompactSummary(frameLabel), frameStatus, frameWidth, "success")];
+		const recommendedTone: StatusTone =
+			frameTone === "pending" ? "running" : frameTone === "error" ? "error" : "success";
+
+		if (this.normalizedToolName === "bash" && !this.expanded && !this.result?.isError) {
+			const command = str(this.args?.command);
+			return [
+				"",
+				...renderCommandCard(command && command.length > 0 ? formatCommandPreview(command) : frameLabel, frameWidth, {
+					status: frameStatus,
+					tone: recommendedTone,
+				}),
+			];
+		}
+		const hasImages = this.result?.content?.some((block) => block.type === "image") ?? false;
+		if (!this.expanded && !this.result?.isError && !hasImages) {
+			const compactTarget = this.getCompactTarget();
+			return [
+				"",
+				...renderToolLineCard(frameLabel, compactTarget, frameWidth, {
+					status: frameStatus,
+					tone: recommendedTone,
+					hidden: !this.isPartial && !!this.result,
+				}),
+			];
 		}
 		const lines = super.render(contentWidth);
-		const framed = renderToolFrame(lines, frameWidth, {
-			label: frameLabel,
-			status: frameStatus,
-			tone: frameTone,
+		const framed = renderTranscriptCard(lines, frameWidth, {
+			title: frameLabel,
+			right: frameStatus,
+			tone: recommendedTone,
+			footerLeft: this.expanded ? "output expanded" : undefined,
+			footerRight: this.expanded ? "ctrl+o collapse" : undefined,
 		});
 		return framed.length > 0 ? ["", ...framed] : framed;
 	}
@@ -748,15 +742,6 @@ export class ToolExecutionComponent extends Container {
 		return "Other tool actions";
 	}
 
-	private getCompactSummary(frameLabel: string): string {
-		if (this.normalizedToolName === "bash") {
-			const command = str(this.args?.command);
-			return command ? `bash ${formatCommandPreview(command)}` : frameLabel;
-		}
-		const target = this.getCompactTarget();
-		return target ? `${this.getCompactAction()} ${target}` : frameLabel;
-	}
-
 	private getCompactAction(): string {
 		const target = this.getTargetMetadata();
 		if (target?.action) return target.action === "list" ? "ls" : target.action;
@@ -765,7 +750,8 @@ export class ToolExecutionComponent extends Container {
 
 	private getTargetMetadata(): ToolTargetMetadata | undefined {
 		const target = this.result?.details?.target;
-		return target && typeof target === "object" ? target : undefined;
+		if (target && typeof target === "object") return target;
+		return directDetailsTarget(this.result?.details, this.normalizedToolName);
 	}
 
 	private getCompactTarget(): string | undefined {
@@ -773,7 +759,7 @@ export class ToolExecutionComponent extends Container {
 		const metadataTarget = metadata ? formatToolTarget(metadata) : undefined;
 		if (metadataTarget) return metadataTarget;
 
-		const path = str(this.args?.file_path ?? this.args?.path);
+		const path = firstStringArg(this.args ?? {}, ["file_path", "path", "notebook_path"]);
 		if (path === null) return undefined;
 		if (this.normalizedToolName === "read" || this.normalizedToolName === "hashline_read") {
 			return formatArgsPathTarget(path, this.args);
@@ -782,16 +768,18 @@ export class ToolExecutionComponent extends Container {
 			return path ? shortenPath(path) : undefined;
 		}
 		if (this.normalizedToolName === "ls") {
-			return shortenPath(path || ".");
+			return path ? shortenPath(path) : undefined;
 		}
 		if (this.normalizedToolName === "find") {
 			const pattern = str(this.args?.pattern);
-			return pattern ? `${pattern} in ${shortenPath(path || ".")}` : shortenPath(path || ".");
+			if (pattern) return path ? `${pattern} in ${shortenPath(path)}` : pattern;
+			return path ? shortenPath(path) : undefined;
 		}
 		if (this.normalizedToolName === "grep") {
 			const pattern = str(this.args?.pattern);
 			const glob = str(this.args?.glob);
-			const label = pattern ? `${pattern} in ${shortenPath(path || ".")}` : shortenPath(path || ".");
+			const label = pattern ? (path ? `${pattern} in ${shortenPath(path)}` : pattern) : path ? shortenPath(path) : undefined;
+			if (!label) return glob || undefined;
 			return glob ? `${label} (${glob})` : label;
 		}
 		return undefined;
@@ -1410,23 +1398,14 @@ export class ToolExecutionComponent extends Container {
 			}
 		} else {
 			// Generic tool / MCP tool without a registered renderer.
-			// MCP tool names from Claude Code arrive as `mcp__<server>__<tool>`;
-			// render the server prefix in muted style so the tool name reads
-			// cleanly. GSD-registered MCP tools have already had their prefix
-			// stripped upstream in partial-builder.ts and won't reach this branch.
-			const parsed = parseMcpToolName(this.toolName);
-			const displayName = parsed
-				? parsed.tool
-				: prettifyToolName(this.toolName, this.toolDefinition?.label);
-			const serverPrefix = parsed ? theme.fg("muted", `${parsed.server}\u00b7`) : "";
-			text = serverPrefix + theme.fg("toolTitle", theme.bold(displayName));
-
+			// The frame header already contains the tool identity, so the body
+			// should show only arguments and output.
 			const argsText = formatCompactArgs(this.args, this.expanded);
 			if (argsText) {
 				if (argsText.includes("\n")) {
-					text += `\n\n${theme.fg("toolOutput", argsText)}`;
+					text = theme.fg("toolOutput", argsText);
 				} else {
-					text += " " + theme.fg("toolOutput", argsText);
+					text = theme.fg("toolOutput", argsText);
 				}
 			}
 
@@ -1437,7 +1416,8 @@ export class ToolExecutionComponent extends Container {
 					const maxLines = this.expanded ? lines.length : GENERIC_OUTPUT_PREVIEW_LINES;
 					const displayLines = lines.slice(0, maxLines);
 					const remaining = lines.length - maxLines;
-					text += `\n\n${displayLines.map((line: string) => theme.fg("toolOutput", line)).join("\n")}`;
+					const outputText = displayLines.map((line: string) => theme.fg("toolOutput", line)).join("\n");
+					text += `${text ? "\n\n" : ""}${outputText}`;
 					if (remaining > 0) {
 						text += `${theme.fg("muted", `\n... (${remaining} more lines,`)} ${keyHint("expandTools", "to expand")})`;
 					}

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

@@ -0,0 +1,196 @@
+// Project/App: GSD-2
+// File Purpose: Shared recommended transcript rendering primitives for assistant, tool, command, footer, and auto-mode TUI surfaces.
+
+import { truncateToWidth, visibleWidth } from "@gsd/pi-tui";
+import { theme, type ThemeBg, type ThemeColor } from "../theme/theme.js";
+import { alignRight, padRight, roundedPanel } from "./tui-style-kit.js";
+
+export type StatusTone = "running" | "success" | "error" | "warning" | "muted";
+
+export function chatMessageWidth(width: number): number {
+	return Math.max(24, Math.min(width, Math.floor(width * 0.72)));
+}
+
+function trimOuterBlankLines(lines: string[]): string[] {
+	let start = 0;
+	let end = lines.length;
+	while (start < end && lines[start].trim().length === 0) start++;
+	while (end > start && lines[end - 1].trim().length === 0) end--;
+	return lines.slice(start, end);
+}
+
+function toneColor(tone: StatusTone): ThemeColor {
+	switch (tone) {
+		case "running": return "toolRunning";
+		case "success": return "border";
+		case "error": return "toolError";
+		case "warning": return "warning";
+		case "muted":
+		default: return "toolMuted";
+	}
+}
+
+export function rightAlign(left: string, right: string, width: number): string {
+	return alignRight(left, right, width);
+}
+
+export function renderAssistantRail(
+	lines: string[],
+	width: number,
+	opts: { label: string; meta?: string; railColor?: ThemeColor } = { label: "GSD" },
+): string[] {
+	const outerWidth = Math.max(20, width);
+	const indent = "  ";
+	const rail = theme.fg(opts.railColor ?? "borderAccent", "┃");
+	const blockWidth = Math.max(1, outerWidth - visibleWidth(indent));
+	const contentWidth = Math.max(1, blockWidth - 2);
+	const header = opts.meta
+		? `${theme.fg("borderAccent", theme.bold(opts.label))} ${theme.fg("dim", opts.meta)}`
+		: theme.fg("borderAccent", theme.bold(opts.label));
+	const source = lines.length > 0 ? lines : [""];
+	const row = (line: string) => `${indent}${theme.bg("customMessageBg", padRight(`${rail} ${line}`, blockWidth))}`;
+	return [
+		row(""),
+		row(truncateToWidth(header, contentWidth, "")),
+		...source.map((line) => row(truncateToWidth(line, contentWidth, ""))),
+		row(""),
+	];
+}
+
+export function renderUserRail(
+	lines: string[],
+	width: number,
+	opts: { label: string; meta?: string },
+): string[] {
+	const outerWidth = Math.max(20, width);
+	const maxMessageWidth = chatMessageWidth(outerWidth);
+	const rawBodyLines = trimOuterBlankLines(lines).length > 0 ? trimOuterBlankLines(lines) : [""];
+	const rail = theme.fg("border", "┃");
+	const contentWidth = Math.max(1, Math.min(maxMessageWidth, outerWidth - 2));
+	const header = opts.meta
+		? `${theme.fg("border", theme.bold(opts.label))} ${theme.fg("dim", opts.meta)}`
+		: theme.fg("border", theme.bold(opts.label));
+	const bodyLines = rawBodyLines.map((line) =>
+		theme.fg("userMessageText", truncateToWidth(line.trimEnd(), contentWidth, ""))
+	);
+	const row = (line: string) => theme.bg("userMessageBg", padRight(`${rail} ${line}`, outerWidth));
+	return [
+		row(""),
+		row(truncateToWidth(header, contentWidth, "")),
+		...bodyLines.map((line) => row(truncateToWidth(line, contentWidth, ""))),
+		row(""),
+	];
+}
+
+function cardRow(line: string, contentWidth: number, paddingX: number, border: (text: string) => string): string {
+	const padded = " ".repeat(paddingX) + padRight(line, contentWidth) + " ".repeat(paddingX);
+	return `${border("│")}${padded}${border("│")}`;
+}
+
+export function renderTranscriptCard(
+	lines: string[],
+	width: number,
+	opts: {
+		title: string;
+		right?: string;
+		tone: StatusTone;
+		footerLeft?: string;
+		footerRight?: string;
+	},
+): string[] {
+	const outerWidth = Math.max(20, width);
+	const innerWidth = Math.max(1, outerWidth - 2);
+	const paddingX = 2;
+	const contentWidth = Math.max(1, innerWidth - paddingX * 2);
+	const borderColor = toneColor(opts.tone);
+	const border = (text: string) => theme.fg(borderColor, text);
+	const title = theme.fg("borderAccent", opts.title);
+	const right = opts.right ? theme.fg(toneColor(opts.tone), opts.right) : "";
+	const header = rightAlign(title, right, contentWidth);
+	const body = lines.map((line) => padRight(line, contentWidth));
+	const footer =
+		opts.footerLeft || opts.footerRight
+			? [rightAlign(theme.fg("dim", opts.footerLeft ?? ""), theme.fg("dim", opts.footerRight ?? ""), contentWidth)]
+			: [];
+	return [
+		border("╭" + "─".repeat(outerWidth - 2) + "╮"),
+		cardRow(header, contentWidth, paddingX, border),
+		...body.map((line) => cardRow(line, contentWidth, paddingX, border)),
+		...footer.map((line) => cardRow(line, contentWidth, paddingX, border)),
+		border("╰" + "─".repeat(outerWidth - 2) + "╯"),
+	];
+}
+
+export function renderToolLineCard(
+	title: string,
+	target: string | undefined,
+	width: number,
+	opts: { status: string; tone: StatusTone; hidden?: boolean; titlePrefix?: string; bg?: ThemeBg },
+): string[] {
+	const outerWidth = Math.max(20, width);
+	const innerWidth = Math.max(1, outerWidth - 2);
+	const paddingX = 2;
+	const contentWidth = Math.max(1, innerWidth - paddingX * 2);
+	const borderColor = toneColor(opts.tone);
+	const border = (text: string) => theme.fg(borderColor, text);
+	const titleText = `${opts.titlePrefix ?? ""}${theme.fg("borderAccent", title)}`;
+	const targetText = target ? ` ${theme.fg("text", target)}` : "";
+	const left = `${titleText}${targetText}`;
+	const statusText = opts.hidden
+		? `${opts.status} · output hidden · ctrl+o expand`
+		: opts.status;
+	const right = theme.fg(opts.tone === "success" ? "success" : borderColor, statusText);
+	const line = rightAlign(left, right, contentWidth);
+	const row = cardRow(line, contentWidth, paddingX, border);
+	return [
+		border("╭" + "─".repeat(outerWidth - 2) + "╮"),
+		opts.bg ? theme.bg(opts.bg, row) : row,
+		border("╰" + "─".repeat(outerWidth - 2) + "╯"),
+	];
+}
+
+export function renderCommandCard(
+	command: string,
+	width: number,
+	opts: { status: string; tone: StatusTone; progress?: string },
+): string[] {
+	const outerWidth = Math.max(20, width);
+	const innerWidth = Math.max(1, outerWidth - 2);
+	const paddingX = 2;
+	const contentWidth = Math.max(1, innerWidth - paddingX * 2);
+	const borderColor = toneColor(opts.tone);
+	const left = `${theme.fg("accent", "$")} ${theme.fg("text", command)}`;
+	const statusText = opts.progress
+		? `${opts.progress} ${opts.status}`
+		: `${opts.status} · output hidden · ctrl+o expand`;
+	const right = theme.fg(opts.tone === "success" ? "success" : borderColor, statusText);
+	const line = rightAlign(left, right, contentWidth);
+	const border = (text: string) => theme.fg(borderColor, text);
+	return [
+		border("╭" + "─".repeat(outerWidth - 2) + "╮"),
+		cardRow(line, contentWidth, paddingX, border),
+		border("╰" + "─".repeat(outerWidth - 2) + "╯"),
+	];
+}
+
+export function renderProgressBar(done: number, total: number, width: number, tone: StatusTone = "success"): string {
+	const clampedWidth = Math.max(0, width);
+	const pct = total > 0 ? Math.max(0, Math.min(1, done / total)) : 0;
+	const filled = Math.round(pct * clampedWidth);
+	return (
+		theme.fg(toneColor(tone), "█".repeat(filled)) +
+		theme.fg("dim", "░".repeat(clampedWidth - filled))
+	);
+}
+
+export function renderFooterStrip(leftSegments: string[], right: string, width: number): string[] {
+	const outerWidth = Math.max(20, width);
+	const innerWidth = Math.max(1, outerWidth - 2);
+	const sep = theme.fg("dim", "  │  ");
+	const rightStyled = theme.fg("dim", right);
+	const rightWidth = visibleWidth(rightStyled);
+	const leftBudget = right ? Math.max(1, innerWidth - rightWidth - 3) : innerWidth;
+	const left = truncateToWidth(leftSegments.filter(Boolean).join(sep), leftBudget, "");
+	const content = rightAlign(left, rightStyled, innerWidth);
+	return roundedPanel([content], outerWidth);
+}

package/packages/pi-coding-agent/src/modes/interactive/components/tui-style-kit.ts

@@ -0,0 +1,94 @@
+// Project/App: GSD-2
+// File Purpose: Lip Gloss-inspired terminal layout primitives for GSD interactive TUI surfaces.
+
+import { truncateToWidth, visibleWidth } from "@gsd/pi-tui";
+import { theme, type ThemeColor } from "../theme/theme.js";
+
+export type TuiTone = "default" | "accent" | "success" | "warning" | "error" | "muted";
+
+export type TuiBreakpoint = "compact" | "regular" | "wide";
+
+export function breakpoint(width: number): TuiBreakpoint {
+	if (width < 72) return "compact";
+	if (width < 112) return "regular";
+	return "wide";
+}
+
+export function padRight(text: string, width: number): string {
+	const clipped = truncateToWidth(text, Math.max(0, width), "");
+	return clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
+}
+
+export function alignRight(left: string, right: string, width: number): string {
+	if (width <= 0) return "";
+	if (!right) return truncateToWidth(left, width, "");
+	const gap = Math.max(1, width - visibleWidth(left) - visibleWidth(right));
+	return truncateToWidth(left + " ".repeat(gap) + right, width, "");
+}
+
+export function toneColor(tone: TuiTone): ThemeColor {
+	switch (tone) {
+		case "accent": return "borderAccent";
+		case "success": return "success";
+		case "warning": return "warning";
+		case "error": return "error";
+		case "muted": return "borderMuted";
+		case "default":
+		default: return "border";
+	}
+}
+
+export function badge(text: string, tone: TuiTone = "default"): string {
+	return theme.fg(toneColor(tone), text);
+}
+
+export function keyValue(label: string, value: string, valueColor: ThemeColor = "text", labelWidth = 10): string {
+	return `${theme.fg("dim", label.padEnd(labelWidth))}${theme.fg(valueColor, value)}`;
+}
+
+export function roundedPanel(
+	lines: string[],
+	width: number,
+	opts: {
+		tone?: TuiTone;
+		title?: string;
+		rightTitle?: string;
+		paddingX?: number;
+	} = {},
+): string[] {
+	const outerWidth = Math.max(1, width);
+	const paddingX = Math.max(0, opts.paddingX ?? 0);
+	const borderColor = toneColor(opts.tone ?? "default");
+	const border = (text: string) => theme.fg(borderColor, text);
+	const title = opts.title ? theme.fg("borderAccent", opts.title) : "";
+	const rightTitle = opts.rightTitle ? theme.fg("dim", opts.rightTitle) : "";
+	const body = lines.length > 0 ? lines : [""];
+
+	if (outerWidth < 3) {
+		return body.map((line) => truncateToWidth(line, outerWidth, ""));
+	}
+
+	const innerWidth = Math.max(1, outerWidth - 2);
+	const contentWidth = Math.max(1, innerWidth - paddingX * 2);
+
+	const renderedBody = body.map((line) => {
+		const padded = " ".repeat(paddingX) + padRight(line, contentWidth) + " ".repeat(paddingX);
+		return `${border("│")}${padRight(padded, innerWidth)}${border("│")}`;
+	});
+
+	if (!title && !rightTitle) {
+		return [
+			border("╭" + "─".repeat(outerWidth - 2) + "╮"),
+			...renderedBody,
+			border("╰" + "─".repeat(outerWidth - 2) + "╯"),
+		];
+	}
+
+	const header = alignRight(title, rightTitle, innerWidth);
+	return [
+		border("╭" + "─".repeat(outerWidth - 2) + "╮"),
+		`${border("│")}${padRight(header, innerWidth)}${border("│")}`,
+		...renderedBody,
+		border("╰" + "─".repeat(outerWidth - 2) + "╯"),
+	];
+}