gsd-pi 2.76.0-dev.fe143342a → 2.77.0-dev.538325aea

package/packages/gsd-agent-modes/src/modes/interactive/components/assistant-message.ts

@@ -0,0 +1,178 @@
+import type { AssistantMessage } from "@gsd/pi-ai";
+import { Container, Markdown, type MarkdownTheme, Spacer, Text } from "@gsd/pi-tui";
+import { getMarkdownTheme } from "@gsd/pi-coding-agent";
+import { isServerToolUseBlock } from "@gsd/agent-types";
+import { theme } from "../../../theme.js";
+import { type TimestampFormat } from "./timestamp.js";
+import { renderChatFrame } from "./chat-frame.js";
+
+export interface ContentRange {
+	startIndex: number;
+	endIndex: number;
+}
+
+/**
+ * Component that renders a complete assistant message, or a sub-range of its content[].
+ * When `range` is provided, only content[startIndex..endIndex] (inclusive) is rendered.
+ * Non-text/thinking blocks within the range are silently skipped.
+ */
+export class AssistantMessageComponent extends Container {
+	private contentContainer: Container;
+	private hideThinkingBlock: boolean;
+	private markdownTheme: MarkdownTheme;
+	private lastMessage?: AssistantMessage;
+	private timestampFormat: TimestampFormat;
+	private range?: ContentRange;
+	private showMetadata: boolean;
+
+	constructor(
+		message?: AssistantMessage,
+		hideThinkingBlock = false,
+		markdownTheme: MarkdownTheme = getMarkdownTheme(),
+		timestampFormat: TimestampFormat = "date-time-iso",
+		range?: ContentRange,
+	) {
+		super();
+
+		this.hideThinkingBlock = hideThinkingBlock;
+		this.markdownTheme = markdownTheme;
+		this.timestampFormat = timestampFormat;
+		this.range = range;
+		// No range = legacy full-message rendering; show metadata by default.
+		// Ranged (interleaved) instances start with metadata hidden; chat-controller
+		// calls setShowMetadata(true) on the last segment at message_end.
+		this.showMetadata = !range;
+
+		// Container for text/thinking content
+		this.contentContainer = new Container();
+		this.addChild(this.contentContainer);
+
+		if (message) {
+			this.updateContent(message);
+		}
+	}
+
+	setRange(range: ContentRange | undefined): void {
+		this.range = range;
+		if (this.lastMessage) {
+			this.updateContent(this.lastMessage);
+		}
+	}
+
+	setShowMetadata(show: boolean): void {
+		this.showMetadata = show;
+		if (this.lastMessage) {
+			this.updateContent(this.lastMessage);
+		}
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		if (this.lastMessage) {
+			this.updateContent(this.lastMessage);
+		}
+	}
+
+	setHideThinkingBlock(hide: boolean): void {
+		this.hideThinkingBlock = hide;
+	}
+
+	updateContent(message: AssistantMessage): void {
+		this.lastMessage = message;
+
+		// Clear content container
+		this.contentContainer.clear();
+
+		const start = this.range?.startIndex ?? 0;
+		const end = this.range?.endIndex ?? message.content.length - 1;
+		const slice = message.content.slice(start, end + 1);
+
+		const hasVisibleContent = slice.some(
+			(c) => (c.type === "text" && c.text.trim()) || (c.type === "thinking" && c.thinking.trim()),
+		);
+		const hasTextContent = message.content.some((c) => c.type === "text" && c.text.trim().length > 0);
+		const hasToolContent = message.content.some((c) => c.type === "toolCall" || isServerToolUseBlock(c));
+		// Claude Code often emits long reasoning blocks ahead of user-visible text/tool
+		// output in the same lifecycle. Keep chat output visible without requiring a
+		// manual thinking toggle every turn.
+		const _shouldCapThinking = hasTextContent || hasToolContent || message.provider === "claude-code";
+
+		// Render content in order; non-text/thinking blocks are silently skipped
+		for (let i = 0; i < slice.length; i++) {
+			const content = slice[i];
+			if (content.type === "text" && content.text.trim()) {
+				// Assistant text messages with no background - trim the text
+				// Set paddingY=0 to avoid extra spacing before tool executions
+				this.contentContainer.addChild(new Markdown(content.text.trim(), 1, 0, this.markdownTheme));
+			} else if (content.type === "thinking" && content.thinking.trim()) {
+				// Add spacing only when another visible assistant content block follows.
+				// This avoids a superfluous blank line before separately-rendered tool execution blocks.
+				const hasVisibleContentAfter = slice
+					.slice(i + 1)
+					.some((c) => (c.type === "text" && c.text.trim()) || (c.type === "thinking" && c.thinking.trim()));
+
+				if (this.hideThinkingBlock) {
+					// Show static "Thinking..." label when hidden
+					this.contentContainer.addChild(new Text(theme.italic(theme.fg("thinkingText", "Thinking...")), 1, 0));
+					if (hasVisibleContentAfter) {
+						this.contentContainer.addChild(new Spacer(1));
+					}
+				} else {
+					// Thinking traces in thinkingText color, italic
+					const thinkingMarkdown = new Markdown(content.thinking.trim(), 1, 0, this.markdownTheme, {
+						color: (text: string) => theme.fg("thinkingText", text),
+						italic: true,
+					});
+					// maxLines removed in pi-tui 0.67.2 — thinking blocks render at full height.
+					this.contentContainer.addChild(thinkingMarkdown);
+					if (hasVisibleContentAfter) {
+						this.contentContainer.addChild(new Spacer(1));
+					}
+				}
+			}
+		}
+
+		// Metadata (errors, timestamp): gated on showMetadata so ranged instances stay clean
+		// until chat-controller explicitly enables it on the last segment at message_end.
+		if (this.showMetadata) {
+			// Check if aborted - show after partial content
+			// But only if there are no tool calls (tool execution components will show the error)
+			const hasToolCalls = message.content.some((c) => c.type === "toolCall");
+			if (!hasToolCalls) {
+				if (message.stopReason === "aborted") {
+					const abortMessage =
+						message.errorMessage && message.errorMessage !== "Request was aborted"
+							? message.errorMessage
+							: "Operation aborted";
+					if (hasVisibleContent) {
+						this.contentContainer.addChild(new Spacer(1));
+					}
+					this.contentContainer.addChild(new Text(theme.fg("error", abortMessage), 1, 0));
+				} else if (message.stopReason === "error") {
+					const errorMsg = message.errorMessage || "Unknown error";
+					this.contentContainer.addChild(new Spacer(1));
+					this.contentContainer.addChild(new Text(theme.fg("error", `Error: ${errorMsg}`), 1, 0));
+				}
+			}
+
+		}
+	}
+
+	override render(width: number): string[] {
+		const frameWidth = Math.max(20, width);
+		const contentWidth = Math.max(1, frameWidth - 4);
+		const lines = super.render(contentWidth);
+		const headerLabel = this.lastMessage?.model ? `GSD - ${this.lastMessage.model}` : "GSD";
+		const framed = renderChatFrame(lines, frameWidth, {
+			label: headerLabel,
+			tone: "assistant",
+			timestamp: this.lastMessage?.timestamp,
+			timestampFormat: this.timestampFormat,
+			showTimestamp: this.showMetadata,
+		});
+		if (framed.length === 0) {
+			return framed;
+		}
+		return ["", ...framed];
+	}
+}

package/packages/gsd-agent-modes/src/modes/interactive/components/bash-execution.ts

@@ -0,0 +1,212 @@
+/**
+ * Component for displaying bash command execution with streaming output.
+ */
+
+import { Container, Loader, Spacer, Text, type TUI } from "@gsd/pi-tui";
+import stripAnsi from "strip-ansi";
+import {
+	DEFAULT_MAX_BYTES,
+	DEFAULT_MAX_LINES,
+	type TruncationResult,
+	truncateTail,
+} from "@gsd/pi-coding-agent";
+import { theme } from "../../../theme.js";
+import { DynamicBorder } from "./dynamic-border.js";
+import { editorKey, keyHint } from "./keybinding-hints.js";
+import { truncateToVisualLines } from "./visual-truncate.js";
+
+// Preview line limit when not expanded (matches tool execution behavior)
+const PREVIEW_LINES = 20;
+
+export class BashExecutionComponent extends Container {
+	private command: string;
+	private outputLines: string[] = [];
+	private status: "running" | "complete" | "cancelled" | "error" = "running";
+	private exitCode: number | undefined = undefined;
+	private loader: Loader;
+	private truncationResult?: TruncationResult;
+	private fullOutputPath?: string;
+	private expanded = false;
+	private contentContainer: Container;
+	private ui: TUI;
+	private _borderColorKey: "dim" | "bashMode";
+
+	constructor(command: string, ui: TUI, excludeFromContext = false) {
+		super();
+		this.command = command;
+		this.ui = ui;
+
+		// Use dim border for excluded-from-context commands (!! prefix)
+		const colorKey = excludeFromContext ? "dim" : "bashMode";
+		this._borderColorKey = colorKey;
+		const borderColor = (str: string): string => theme.fg(colorKey, str);
+
+		// Add spacer
+		this.addChild(new Spacer(1));
+
+		// Top border
+		this.addChild(new DynamicBorder(borderColor));
+
+		// Content container (holds dynamic content between borders)
+		this.contentContainer = new Container();
+		this.addChild(this.contentContainer);
+
+		// Command header
+		const header = new Text(theme.fg(colorKey, theme.bold(`$ ${command}`)), 1, 0);
+		this.contentContainer.addChild(header);
+
+		// Loader
+		this.loader = new Loader(
+			ui,
+			(spinner) => theme.fg(colorKey, spinner),
+			(text) => theme.fg("muted", text),
+			`Running... (${editorKey("selectCancel")} to cancel)`, // Plain text for loader
+		);
+		this.contentContainer.addChild(this.loader);
+
+		// Bottom border
+		this.addChild(new DynamicBorder(borderColor));
+	}
+
+	/**
+	 * Set whether the output is expanded (shows full output) or collapsed (preview only).
+	 */
+	setExpanded(expanded: boolean): void {
+		this.expanded = expanded;
+		this.updateDisplay();
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		this.updateDisplay();
+	}
+
+	appendOutput(chunk: string): void {
+		// Strip ANSI codes and normalize line endings
+		// Note: binary data is already sanitized in tui-renderer.ts executeBashCommand
+		const clean = stripAnsi(chunk).replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+
+		// Append to output lines
+		const newLines = clean.split("\n");
+		if (this.outputLines.length > 0 && newLines.length > 0) {
+			// Append first chunk to last line (incomplete line continuation)
+			this.outputLines[this.outputLines.length - 1] += newLines[0];
+			this.outputLines.push(...newLines.slice(1));
+		} else {
+			this.outputLines.push(...newLines);
+		}
+
+		this.updateDisplay();
+	}
+
+	setComplete(
+		exitCode: number | undefined,
+		cancelled: boolean,
+		truncationResult?: TruncationResult,
+		fullOutputPath?: string,
+	): void {
+		this.exitCode = exitCode;
+		this.status = cancelled
+			? "cancelled"
+			: exitCode !== 0 && exitCode !== undefined && exitCode !== null
+				? "error"
+				: "complete";
+		this.truncationResult = truncationResult;
+		this.fullOutputPath = fullOutputPath;
+
+		// Stop loader
+		this.loader.stop();
+
+		this.updateDisplay();
+	}
+
+	private updateDisplay(): void {
+		// Apply truncation for LLM context limits (same limits as bash tool)
+		const fullOutput = this.outputLines.join("\n");
+		const contextTruncation = truncateTail(fullOutput, {
+			maxLines: DEFAULT_MAX_LINES,
+			maxBytes: DEFAULT_MAX_BYTES,
+		});
+
+		// Get the lines to potentially display (after context truncation)
+		const availableLines = contextTruncation.content ? contextTruncation.content.split("\n") : [];
+
+		// Apply preview truncation based on expanded state
+		const previewLogicalLines = availableLines.slice(-PREVIEW_LINES);
+		const hiddenLineCount = availableLines.length - previewLogicalLines.length;
+
+		// Rebuild content container
+		this.contentContainer.clear();
+
+		// Command header
+		const header = new Text(theme.fg(this._borderColorKey, theme.bold(`$ ${this.command}`)), 1, 0);
+		this.contentContainer.addChild(header);
+
+		// Output
+		if (availableLines.length > 0) {
+			if (this.expanded) {
+				// Show all lines
+				const displayText = availableLines.map((line) => theme.fg("muted", line)).join("\n");
+				this.contentContainer.addChild(new Text(`\n${displayText}`, 1, 0));
+			} else {
+				// Use shared visual truncation utility
+				const styledOutput = previewLogicalLines.map((line) => theme.fg("muted", line)).join("\n");
+				const { visualLines } = truncateToVisualLines(
+					`\n${styledOutput}`,
+					PREVIEW_LINES,
+					this.ui.terminal.columns,
+					1, // padding
+				);
+				this.contentContainer.addChild({ render: () => visualLines, invalidate: () => {} });
+			}
+		}
+
+		// Loader or status
+		if (this.status === "running") {
+			this.contentContainer.addChild(this.loader);
+		} else {
+			const statusParts: string[] = [];
+
+			// Show how many lines are hidden (collapsed preview)
+			if (hiddenLineCount > 0) {
+				if (this.expanded) {
+					statusParts.push(`(${keyHint("expandTools", "to collapse")})`);
+				} else {
+					statusParts.push(
+						`${theme.fg("muted", `... ${hiddenLineCount} more lines`)} (${keyHint("expandTools", "to expand")})`,
+					);
+				}
+			}
+
+			if (this.status === "cancelled") {
+				statusParts.push(theme.fg("warning", "(cancelled)"));
+			} else if (this.status === "error") {
+				statusParts.push(theme.fg("error", `(exit ${this.exitCode})`));
+			}
+
+			// Add truncation warning (context truncation, not preview truncation)
+			const wasTruncated = this.truncationResult?.truncated || contextTruncation.truncated;
+			if (wasTruncated && this.fullOutputPath) {
+				statusParts.push(theme.fg("warning", `Output truncated. Full output: ${this.fullOutputPath}`));
+			}
+
+			if (statusParts.length > 0) {
+				this.contentContainer.addChild(new Text(`\n${statusParts.join("\n")}`, 1, 0));
+			}
+		}
+	}
+
+	/**
+	 * Get the raw output for creating BashExecutionMessage.
+	 */
+	getOutput(): string {
+		return this.outputLines.join("\n");
+	}
+
+	/**
+	 * Get the command that was executed.
+	 */
+	getCommand(): string {
+		return this.command;
+	}
+}

package/packages/gsd-agent-modes/src/modes/interactive/components/bordered-loader.ts

@@ -0,0 +1,66 @@
+import { CancellableLoader, Container, Loader, Spacer, Text, type TUI } from "@gsd/pi-tui";
+import type { Theme } from "@gsd/agent-types";
+import { DynamicBorder } from "./dynamic-border.js";
+import { keyHint } from "./keybinding-hints.js";
+
+/** Loader wrapped with borders for extension UI */
+export class BorderedLoader extends Container {
+	private loader: CancellableLoader | Loader;
+	private cancellable: boolean;
+	private signalController?: AbortController;
+
+	constructor(tui: TUI, theme: Theme, message: string, options?: { cancellable?: boolean }) {
+		super();
+		this.cancellable = options?.cancellable ?? true;
+		const borderColor = (s: string): string => theme.fg("border", s);
+		this.addChild(new DynamicBorder(borderColor));
+		if (this.cancellable) {
+			this.loader = new CancellableLoader(
+				tui,
+				(s) => theme.fg("accent", s),
+				(s) => theme.fg("muted", s),
+				message,
+			);
+		} else {
+			this.signalController = new AbortController();
+			this.loader = new Loader(
+				tui,
+				(s) => theme.fg("accent", s),
+				(s) => theme.fg("muted", s),
+				message,
+			);
+		}
+		this.addChild(this.loader);
+		if (this.cancellable) {
+			this.addChild(new Spacer(1));
+			this.addChild(new Text(keyHint("selectCancel", "cancel"), 1, 0));
+			this.addChild(new Spacer(1));
+		}
+		this.addChild(new DynamicBorder(borderColor));
+	}
+
+	get signal(): AbortSignal {
+		if (this.cancellable) {
+			return (this.loader as CancellableLoader).signal;
+		}
+		return this.signalController?.signal ?? new AbortController().signal;
+	}
+
+	set onAbort(fn: (() => void) | undefined) {
+		if (this.cancellable) {
+			(this.loader as CancellableLoader).onAbort = fn;
+		}
+	}
+
+	handleInput(data: string): void {
+		if (this.cancellable) {
+			(this.loader as CancellableLoader).handleInput(data);
+		}
+	}
+
+	dispose(): void {
+		if ("dispose" in this.loader && typeof this.loader.dispose === "function") {
+			this.loader.dispose();
+		}
+	}
+}

package/packages/gsd-agent-modes/src/modes/interactive/components/branch-summary-message.ts

@@ -0,0 +1,59 @@
+import { Box, Markdown, type MarkdownTheme, Spacer, Text } from "@gsd/pi-tui";
+import type { BranchSummaryMessage } from "@gsd/agent-types";
+import { getMarkdownTheme } from "@gsd/pi-coding-agent";
+import { theme } from "../../../theme.js";
+import { editorKey } from "./keybinding-hints.js";
+
+/**
+ * Component that renders a branch summary message with collapsed/expanded state.
+ * Uses same background color as custom messages for visual consistency.
+ */
+export class BranchSummaryMessageComponent extends Box {
+	private expanded = false;
+	private message: BranchSummaryMessage;
+	private markdownTheme: MarkdownTheme;
+
+	constructor(message: BranchSummaryMessage, markdownTheme: MarkdownTheme = getMarkdownTheme()) {
+		super(1, 1, (t) => theme.bg("customMessageBg", t));
+		this.message = message;
+		this.markdownTheme = markdownTheme;
+		this.updateDisplay();
+	}
+
+	setExpanded(expanded: boolean): void {
+		this.expanded = expanded;
+		this.updateDisplay();
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		this.updateDisplay();
+	}
+
+	private updateDisplay(): void {
+		this.clear();
+
+		const label = theme.fg("customMessageLabel", theme.bold("[branch]"));
+		this.addChild(new Text(label, 0, 0));
+		this.addChild(new Spacer(1));
+
+		if (this.expanded) {
+			const header = "**Branch Summary**\n\n";
+			this.addChild(
+				new Markdown(header + this.message.summary, 0, 0, this.markdownTheme, {
+					color: (text: string) => theme.fg("customMessageText", text),
+				}),
+			);
+		} else {
+			this.addChild(
+				new Text(
+					theme.fg("customMessageText", "Branch summary (") +
+						theme.fg("dim", editorKey("expandTools")) +
+						theme.fg("customMessageText", " to expand)"),
+					0,
+					0,
+				),
+			);
+		}
+	}
+}

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

@@ -0,0 +1,67 @@
+import { truncateToWidth, visibleWidth } from "@gsd/pi-tui";
+import { theme } from "../../../theme.js";
+import { formatTimestamp, type TimestampFormat } from "./timestamp.js";
+
+type FrameTone = "assistant" | "user";
+
+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);
+}
+
+export function renderChatFrame(
+	contentLines: string[],
+	width: number,
+	opts: {
+		label: string;
+		tone: FrameTone;
+		timestamp?: number;
+		timestampFormat: TimestampFormat;
+		showTimestamp?: boolean;
+	},
+): string[] {
+	const outerWidth = Math.max(20, width);
+	const contentWidth = Math.max(1, outerWidth - 2); // "│ " + content
+	const borderColor = opts.tone === "user" ? "borderAccent" : "border";
+	const borderMuted = opts.tone === "user" ? "borderMuted" : "borderMuted";
+	const border = (s: string): string => theme.fg(borderColor, s);
+	const leftRaw = `• ${opts.label}`;
+	const rightRaw =
+		opts.showTimestamp === false || !opts.timestamp
+			? ""
+			: formatTimestamp(opts.timestamp, opts.timestampFormat);
+
+	const leftBudget = rightRaw
+		? Math.max(1, outerWidth - visibleWidth(rightRaw) - 1)
+		: outerWidth;
+	const left = truncateToWidth(leftRaw, leftBudget, "");
+	const leftStyled =
+		opts.tone === "user"
+			? theme.fg("accent", theme.bold(left))
+			: theme.fg("muted", theme.bold(left));
+	const rightStyled = rightRaw ? theme.fg("dim", rightRaw) : "";
+	const gap =
+		rightRaw.length > 0
+			? Math.max(
+					1,
+					outerWidth - visibleWidth(leftStyled) - visibleWidth(rightStyled),
+				)
+			: Math.max(0, outerWidth - visibleWidth(leftStyled));
+	const headerRow = `${leftStyled}${" ".repeat(gap)}${rightStyled}`;
+	const headerPad = Math.max(0, outerWidth - visibleWidth(headerRow));
+
+	const sourceLines = trimOuterBlankLines(contentLines);
+	const bodyLines = (sourceLines.length > 0 ? sourceLines : [""]).map((line) => {
+		const clipped = truncateToWidth(line, contentWidth, "");
+		return border("│ ") + clipped;
+	});
+
+	return [
+		theme.fg(borderMuted, "─".repeat(outerWidth)),
+		headerRow + " ".repeat(headerPad),
+		...bodyLines,
+	];
+}

package/packages/gsd-agent-modes/src/modes/interactive/components/compaction-summary-message.ts

@@ -0,0 +1,60 @@
+import { Box, Markdown, type MarkdownTheme, Spacer, Text } from "@gsd/pi-tui";
+import type { CompactionSummaryMessage } from "@gsd/agent-types";
+import { getMarkdownTheme } from "@gsd/pi-coding-agent";
+import { theme } from "../../../theme.js";
+import { editorKey } from "./keybinding-hints.js";
+
+/**
+ * Component that renders a compaction message with collapsed/expanded state.
+ * Uses same background color as custom messages for visual consistency.
+ */
+export class CompactionSummaryMessageComponent extends Box {
+	private expanded = false;
+	private message: CompactionSummaryMessage;
+	private markdownTheme: MarkdownTheme;
+
+	constructor(message: CompactionSummaryMessage, markdownTheme: MarkdownTheme = getMarkdownTheme()) {
+		super(1, 1, (t) => theme.bg("customMessageBg", t));
+		this.message = message;
+		this.markdownTheme = markdownTheme;
+		this.updateDisplay();
+	}
+
+	setExpanded(expanded: boolean): void {
+		this.expanded = expanded;
+		this.updateDisplay();
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		this.updateDisplay();
+	}
+
+	private updateDisplay(): void {
+		this.clear();
+
+		const tokenStr = this.message.tokensBefore.toLocaleString();
+		const label = theme.fg("customMessageLabel", theme.bold("[compaction]"));
+		this.addChild(new Text(label, 0, 0));
+		this.addChild(new Spacer(1));
+
+		if (this.expanded) {
+			const header = `**Compacted from ${tokenStr} tokens**\n\n`;
+			this.addChild(
+				new Markdown(header + this.message.summary, 0, 0, this.markdownTheme, {
+					color: (text: string) => theme.fg("customMessageText", text),
+				}),
+			);
+		} else {
+			this.addChild(
+				new Text(
+					theme.fg("customMessageText", `Compacted from ${tokenStr} tokens (`) +
+						theme.fg("dim", editorKey("expandTools")) +
+						theme.fg("customMessageText", " to expand)"),
+					0,
+					0,
+				),
+			);
+		}
+	}
+}