@tuan_son.dinh/gsd 2.6.2 → 2.7.0

package/packages/pi-coding-agent/src/modes/interactive/components/user-message-selector.ts

@@ -0,0 +1,143 @@
+import { type Component, Container, getEditorKeybindings, Spacer, Text, truncateToWidth } from "@gsd/pi-tui";
+import { theme } from "../theme/theme.js";
+import { DynamicBorder } from "./dynamic-border.js";
+
+interface UserMessageItem {
+	id: string; // Entry ID in the session
+	text: string; // The message text
+	timestamp?: string; // Optional timestamp if available
+}
+
+/**
+ * Custom user message list component with selection
+ */
+class UserMessageList implements Component {
+	private messages: UserMessageItem[] = [];
+	private selectedIndex: number = 0;
+	public onSelect?: (entryId: string) => void;
+	public onCancel?: () => void;
+	private maxVisible: number = 10; // Max messages visible
+
+	constructor(messages: UserMessageItem[]) {
+		// Store messages in chronological order (oldest to newest)
+		this.messages = messages;
+		// Start with the last (most recent) message selected
+		this.selectedIndex = Math.max(0, messages.length - 1);
+	}
+
+	invalidate(): void {
+		// No cached state to invalidate currently
+	}
+
+	render(width: number): string[] {
+		const lines: string[] = [];
+
+		if (this.messages.length === 0) {
+			lines.push(theme.fg("muted", "  No user messages found"));
+			return lines;
+		}
+
+		// Calculate visible range with scrolling
+		const startIndex = Math.max(
+			0,
+			Math.min(this.selectedIndex - Math.floor(this.maxVisible / 2), this.messages.length - this.maxVisible),
+		);
+		const endIndex = Math.min(startIndex + this.maxVisible, this.messages.length);
+
+		// Render visible messages (2 lines per message + blank line)
+		for (let i = startIndex; i < endIndex; i++) {
+			const message = this.messages[i];
+			const isSelected = i === this.selectedIndex;
+
+			// Normalize message to single line
+			const normalizedMessage = message.text.replace(/\n/g, " ").trim();
+
+			// First line: cursor + message
+			const cursor = isSelected ? theme.fg("accent", "› ") : "  ";
+			const maxMsgWidth = width - 2; // Account for cursor (2 chars)
+			const truncatedMsg = truncateToWidth(normalizedMessage, maxMsgWidth);
+			const messageLine = cursor + (isSelected ? theme.bold(truncatedMsg) : truncatedMsg);
+
+			lines.push(messageLine);
+
+			// Second line: metadata (position in history)
+			const position = i + 1;
+			const metadata = `  Message ${position} of ${this.messages.length}`;
+			const metadataLine = theme.fg("muted", metadata);
+			lines.push(metadataLine);
+			lines.push(""); // Blank line between messages
+		}
+
+		// Add scroll indicator if needed
+		if (startIndex > 0 || endIndex < this.messages.length) {
+			const scrollInfo = theme.fg("muted", `  (${this.selectedIndex + 1}/${this.messages.length})`);
+			lines.push(scrollInfo);
+		}
+
+		return lines;
+	}
+
+	handleInput(keyData: string): void {
+		const kb = getEditorKeybindings();
+		// Up arrow - go to previous (older) message, wrap to bottom when at top
+		if (kb.matches(keyData, "selectUp")) {
+			this.selectedIndex = this.selectedIndex === 0 ? this.messages.length - 1 : this.selectedIndex - 1;
+		}
+		// Down arrow - go to next (newer) message, wrap to top when at bottom
+		else if (kb.matches(keyData, "selectDown")) {
+			this.selectedIndex = this.selectedIndex === this.messages.length - 1 ? 0 : this.selectedIndex + 1;
+		}
+		// Enter - select message and branch
+		else if (kb.matches(keyData, "selectConfirm")) {
+			const selected = this.messages[this.selectedIndex];
+			if (selected && this.onSelect) {
+				this.onSelect(selected.id);
+			}
+		}
+		// Escape - cancel
+		else if (kb.matches(keyData, "selectCancel")) {
+			if (this.onCancel) {
+				this.onCancel();
+			}
+		}
+	}
+}
+
+/**
+ * Component that renders a user message selector for branching
+ */
+export class UserMessageSelectorComponent extends Container {
+	private messageList: UserMessageList;
+
+	constructor(messages: UserMessageItem[], onSelect: (entryId: string) => void, onCancel: () => void) {
+		super();
+
+		// Add header
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.bold("Branch from Message"), 1, 0));
+		this.addChild(new Text(theme.fg("muted", "Select a message to create a new branch from that point"), 1, 0));
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder());
+		this.addChild(new Spacer(1));
+
+		// Create message list
+		this.messageList = new UserMessageList(messages);
+		this.messageList.onSelect = onSelect;
+		this.messageList.onCancel = onCancel;
+
+		this.addChild(this.messageList);
+
+		// Add bottom border
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder());
+
+		// Auto-cancel if no messages
+		if (messages.length === 0) {
+			setTimeout(() => onCancel(), 100);
+		}
+	}
+
+	getMessageList(): UserMessageList {
+		return this.messageList;
+	}
+}

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

@@ -0,0 +1,32 @@
+import { Container, Markdown, type MarkdownTheme, Spacer } from "@gsd/pi-tui";
+import { getMarkdownTheme, theme } from "../theme/theme.js";
+
+const OSC133_ZONE_START = "\x1b]133;A\x07";
+const OSC133_ZONE_END = "\x1b]133;B\x07";
+
+/**
+ * Component that renders a user message
+ */
+export class UserMessageComponent extends Container {
+	constructor(text: string, markdownTheme: MarkdownTheme = getMarkdownTheme()) {
+		super();
+		this.addChild(new Spacer(1));
+		this.addChild(
+			new Markdown(text, 1, 1, markdownTheme, {
+				bgColor: (text: string) => theme.bg("userMessageBg", text),
+				color: (text: string) => theme.fg("userMessageText", text),
+			}),
+		);
+	}
+
+	override render(width: number): string[] {
+		const lines = super.render(width);
+		if (lines.length === 0) {
+			return lines;
+		}
+
+		lines[0] = OSC133_ZONE_START + lines[0];
+		lines[lines.length - 1] = lines[lines.length - 1] + OSC133_ZONE_END;
+		return lines;
+	}
+}

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

@@ -0,0 +1,50 @@
+/**
+ * Shared utility for truncating text to visual lines (accounting for line wrapping).
+ * Used by both tool-execution.ts and bash-execution.ts for consistent behavior.
+ */
+
+import { Text } from "@gsd/pi-tui";
+
+export interface VisualTruncateResult {
+	/** The visual lines to display */
+	visualLines: string[];
+	/** Number of visual lines that were skipped (hidden) */
+	skippedCount: number;
+}
+
+/**
+ * Truncate text to a maximum number of visual lines (from the end).
+ * This accounts for line wrapping based on terminal width.
+ *
+ * @param text - The text content (may contain newlines)
+ * @param maxVisualLines - Maximum number of visual lines to show
+ * @param width - Terminal/render width
+ * @param paddingX - Horizontal padding for Text component (default 0).
+ *                   Use 0 when result will be placed in a Box (Box adds its own padding).
+ *                   Use 1 when result will be placed in a plain Container.
+ * @returns The truncated visual lines and count of skipped lines
+ */
+export function truncateToVisualLines(
+	text: string,
+	maxVisualLines: number,
+	width: number,
+	paddingX: number = 0,
+): VisualTruncateResult {
+	if (!text) {
+		return { visualLines: [], skippedCount: 0 };
+	}
+
+	// Create a temporary Text component to render and get visual lines
+	const tempText = new Text(text, paddingX, 0);
+	const allVisualLines = tempText.render(width);
+
+	if (allVisualLines.length <= maxVisualLines) {
+		return { visualLines: allVisualLines, skippedCount: 0 };
+	}
+
+	// Take the last N visual lines
+	const truncatedLines = allVisualLines.slice(-maxVisualLines);
+	const skippedCount = allVisualLines.length - maxVisualLines;
+
+	return { visualLines: truncatedLines, skippedCount };
+}