@oh-my-pi/pi-coding-agent 8.0.16 → 8.1.0

package/src/tui/code-cell.ts

@@ -0,0 +1,115 @@
+/**
+ * Render a code cell with optional output section.
+ */
+
+import { highlightCode, type Theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
+import {
+	formatDuration,
+	formatExpandHint,
+	formatMoreItems,
+	replaceTabs,
+} from "@oh-my-pi/pi-coding-agent/tools/render-utils";
+import { renderOutputBlock } from "./output-block";
+import type { State } from "./types";
+import { getStateIcon } from "./utils";
+
+export interface CodeCellOptions {
+	code: string;
+	language?: string;
+	index?: number;
+	total?: number;
+	title?: string;
+	status?: "pending" | "running" | "complete" | "error";
+	spinnerFrame?: number;
+	duration?: number;
+	output?: string;
+	outputMaxLines?: number;
+	codeMaxLines?: number;
+	expanded?: boolean;
+	width: number;
+}
+
+function getState(status?: CodeCellOptions["status"]): State | undefined {
+	if (!status) return undefined;
+	if (status === "complete") return "success";
+	if (status === "error") return "error";
+	if (status === "running") return "running";
+	return "pending";
+}
+
+function formatHeader(options: CodeCellOptions, theme: Theme): { title: string; meta?: string } {
+	const { index, total, title, status, spinnerFrame, duration } = options;
+	const parts: string[] = [];
+	if (index !== undefined && total !== undefined) {
+		parts.push(theme.fg("accent", `[${index + 1}/${total}]`));
+	}
+	if (title) {
+		parts.push(theme.fg("toolTitle", title));
+	}
+	const headerTitle = parts.length > 0 ? parts.join(" ") : theme.fg("toolTitle", "Code");
+
+	const metaParts: string[] = [];
+	if (duration !== undefined) {
+		metaParts.push(theme.fg("dim", `(${formatDuration(duration)})`));
+	}
+	if (status) {
+		const icon = getStateIcon(
+			status === "complete"
+				? "success"
+				: status === "error"
+					? "error"
+					: status === "running"
+						? "running"
+						: "pending",
+			theme,
+			spinnerFrame,
+		);
+		if (status === "pending" || status === "running") {
+			metaParts.push(`${icon} ${theme.fg("muted", status)}`);
+		} else {
+			metaParts.push(icon);
+		}
+	}
+
+	if (metaParts.length === 0) return { title: headerTitle };
+	return { title: headerTitle, meta: metaParts.join(theme.fg("dim", theme.sep.dot)) };
+}
+
+export function renderCodeCell(options: CodeCellOptions, theme: Theme): string[] {
+	const { code, language, output, expanded = false, outputMaxLines = 6, codeMaxLines = 12, width } = options;
+	const { title, meta } = formatHeader(options, theme);
+	const state = getState(options.status);
+
+	const rawCodeLines = highlightCode(replaceTabs(code ?? ""), language);
+	const maxCodeLines = expanded ? rawCodeLines.length : Math.min(rawCodeLines.length, codeMaxLines);
+	const codeLines = rawCodeLines.slice(0, maxCodeLines);
+	const hiddenCodeLines = rawCodeLines.length - codeLines.length;
+	if (hiddenCodeLines > 0) {
+		const hint = formatExpandHint(theme, expanded, hiddenCodeLines > 0);
+		const moreLine = `${formatMoreItems(hiddenCodeLines, "line", theme)}${hint ? ` ${hint}` : ""}`;
+		codeLines.push(theme.fg("dim", moreLine));
+	}
+
+	const outputLines: string[] = [];
+	if (output?.trim()) {
+		const rawLines = output.split("\n");
+		const maxLines = expanded ? rawLines.length : Math.min(rawLines.length, outputMaxLines);
+		const displayLines = rawLines
+			.slice(0, maxLines)
+			.map((line) => (line.includes("\x1b[") ? line : theme.fg("toolOutput", line)));
+		outputLines.push(...displayLines);
+		const remaining = rawLines.length - maxLines;
+		if (remaining > 0) {
+			const hint = formatExpandHint(theme, expanded, remaining > 0);
+			const moreLine = `${formatMoreItems(remaining, "line", theme)}${hint ? ` ${hint}` : ""}`;
+			outputLines.push(theme.fg("dim", moreLine));
+		}
+	}
+
+	const sections: Array<{ label?: string; lines: string[] }> = [{ lines: codeLines }];
+	if (outputLines.length > 0) {
+		sections.push({ label: theme.fg("toolTitle", "Output"), lines: outputLines });
+	}
+
+	return renderOutputBlock({ header: title, headerMeta: meta, state, sections, width }, theme);
+}

package/src/tui/file-list.ts

@@ -0,0 +1,48 @@
+/**
+ * Render file listings with optional icons and metadata.
+ */
+
+import type { Theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
+import { getLanguageFromPath } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
+import { renderTreeList } from "./tree-list";
+
+export interface FileEntry {
+	path: string;
+	isDirectory?: boolean;
+	meta?: string;
+}
+
+export interface FileListOptions {
+	files: FileEntry[];
+	expanded?: boolean;
+	maxCollapsed?: number;
+	showIcons?: boolean;
+}
+
+export function renderFileList(options: FileListOptions, theme: Theme): string[] {
+	const { files, expanded = false, maxCollapsed = 8, showIcons = true } = options;
+
+	return renderTreeList(
+		{
+			items: files,
+			expanded,
+			maxCollapsed,
+			itemType: "file",
+			renderItem: (entry) => {
+				const isDirectory = entry.isDirectory ?? entry.path.endsWith("/");
+				const displayPath = isDirectory && entry.path.endsWith("/") ? entry.path : entry.path;
+				const lang = isDirectory ? undefined : getLanguageFromPath(displayPath);
+				const icon = !showIcons
+					? ""
+					: isDirectory
+						? theme.fg("accent", theme.icon.folder)
+						: theme.fg("muted", theme.getLangIcon(lang));
+				const labelColor = isDirectory ? "accent" : "toolOutput";
+				const meta = entry.meta ? ` ${theme.fg("dim", entry.meta)}` : "";
+				const iconPrefix = icon ? `${icon} ` : "";
+				return `${iconPrefix}${theme.fg(labelColor, displayPath)}${meta}`;
+			},
+		},
+		theme,
+	);
+}

package/src/tui/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Public exports for shared TUI components.
+ */
+
+export * from "./code-cell";
+export * from "./file-list";
+export * from "./output-block";
+export * from "./status-line";
+export * from "./tree-list";
+export * from "./types";
+export * from "./utils";

package/src/tui/output-block.ts

@@ -0,0 +1,73 @@
+/**
+ * Bordered output container with optional header and sections.
+ */
+
+import type { Theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
+import { visibleWidth } from "@oh-my-pi/pi-tui";
+import type { State } from "./types";
+import { getStateBgColor, padToWidth, truncateToWidth } from "./utils";
+
+export interface OutputBlockOptions {
+	header?: string;
+	headerMeta?: string;
+	state?: State;
+	sections?: Array<{ label?: string; lines: string[] }>;
+	width: number;
+}
+
+export function renderOutputBlock(options: OutputBlockOptions, theme: Theme): string[] {
+	const { header, headerMeta, state, sections = [], width } = options;
+	const h = theme.boxSharp.horizontal;
+	const v = theme.boxSharp.vertical;
+	const cap = h.repeat(3);
+	const lineWidth = Math.max(0, width);
+	// Border colors: running/pending use accent, success uses dim (gray), error/warning keep their colors
+	const borderColor: "error" | "warning" | "accent" | "dim" =
+		state === "error"
+			? "error"
+			: state === "warning"
+				? "warning"
+				: state === "running" || state === "pending"
+					? "accent"
+					: "dim";
+	const border = (text: string) => theme.fg(borderColor, text);
+	const bgFn = state ? (text: string) => theme.bg(getStateBgColor(state), text) : undefined;
+
+	const buildBarLine = (leftChar: string, label?: string, meta?: string): string => {
+		const left = border(`${leftChar}${cap}`);
+		if (lineWidth <= 0) return left;
+		const labelText = [label, meta].filter(Boolean).join(theme.sep.dot);
+		const rawLabel = labelText ? ` ${labelText} ` : " ";
+		const maxLabelWidth = Math.max(0, lineWidth - visibleWidth(left));
+		const trimmedLabel = truncateToWidth(rawLabel, maxLabelWidth, theme.format.ellipsis);
+		const fillCount = Math.max(0, lineWidth - visibleWidth(left + trimmedLabel));
+		return `${left}${trimmedLabel}${border(h.repeat(fillCount))}`;
+	};
+
+	const contentPrefix = border(`${v} `);
+	const contentWidth = Math.max(0, lineWidth - visibleWidth(contentPrefix));
+	const lines: string[] = [];
+
+	lines.push(padToWidth(buildBarLine(theme.boxSharp.topLeft, header, headerMeta), lineWidth, bgFn));
+
+	const hasSections = sections.length > 0;
+	const normalizedSections = hasSections ? sections : [{ lines: [] }];
+
+	for (let i = 0; i < normalizedSections.length; i++) {
+		const section = normalizedSections[i];
+		if (section.label) {
+			lines.push(padToWidth(buildBarLine(theme.boxSharp.teeRight, section.label), lineWidth, bgFn));
+		}
+		for (const line of section.lines) {
+			const text = truncateToWidth(line, contentWidth, theme.format.ellipsis);
+			lines.push(padToWidth(`${contentPrefix}${text}`, lineWidth, bgFn));
+		}
+	}
+
+	const bottomLeft = border(`${theme.boxSharp.bottomLeft}${cap}`);
+	const bottomFillCount = Math.max(0, lineWidth - visibleWidth(bottomLeft));
+	const bottomLine = `${bottomLeft}${border(h.repeat(bottomFillCount))}`;
+	lines.push(padToWidth(bottomLine, lineWidth, bgFn));
+
+	return lines;
+}

package/src/tui/status-line.ts

@@ -0,0 +1,40 @@
+/**
+ * Standardized status header rendering for tool output.
+ */
+
+import type { Theme, ThemeColor } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
+import type { IconType } from "./types";
+import { getStateIcon } from "./utils";
+
+export interface StatusLineOptions {
+	icon?: IconType;
+	spinnerFrame?: number;
+	title: string;
+	titleColor?: ThemeColor;
+	description?: string;
+	badge?: { label: string; color: ThemeColor };
+	meta?: string[];
+}
+
+export function renderStatusLine(options: StatusLineOptions, theme: Theme): string {
+	const icon = options.icon ? getStateIcon(options.icon, theme, options.spinnerFrame) : "";
+	const titleColor = options.titleColor ?? "accent";
+	const title = theme.fg(titleColor, options.title);
+	let line = icon ? `${icon} ${title}` : title;
+
+	if (options.description) {
+		line += `: ${theme.fg("muted", options.description)}`;
+	}
+
+	if (options.badge) {
+		const { label, color } = options.badge;
+		line += ` ${theme.fg(color, `${theme.format.bracketLeft}${label}${theme.format.bracketRight}`)}`;
+	}
+
+	const meta = options.meta?.filter((value) => value.trim().length > 0) ?? [];
+	if (meta.length > 0) {
+		line += ` ${theme.fg("dim", meta.join(theme.sep.dot))}`;
+	}
+
+	return line;
+}

package/src/tui/tree-list.ts

@@ -0,0 +1,56 @@
+/**
+ * Hierarchical tree list rendering helper.
+ */
+
+import type { Theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
+import { formatMoreItems } from "@oh-my-pi/pi-coding-agent/tools/render-utils";
+import type { TreeContext } from "./types";
+import { getTreeBranch, getTreeContinuePrefix } from "./utils";
+
+export interface TreeListOptions<T> {
+	items: T[];
+	expanded?: boolean;
+	maxCollapsed?: number;
+	itemType?: string;
+	renderItem: (item: T, context: TreeContext) => string | string[];
+}
+
+export function renderTreeList<T>(options: TreeListOptions<T>, theme: Theme): string[] {
+	const { items, expanded = false, maxCollapsed = 8, itemType = "item", renderItem } = options;
+	const lines: string[] = [];
+	const maxItems = expanded ? items.length : Math.min(items.length, maxCollapsed);
+
+	for (let i = 0; i < maxItems; i++) {
+		const isLast = i === maxItems - 1 && (expanded || items.length <= maxCollapsed);
+		const branch = getTreeBranch(isLast, theme);
+		const prefix = `${theme.fg("dim", branch)} `;
+		const continuePrefix = `${theme.fg("dim", getTreeContinuePrefix(isLast, theme))}`;
+		const context: TreeContext = {
+			index: i,
+			isLast,
+			depth: 0,
+			theme,
+			prefix,
+			continuePrefix,
+		};
+		const rendered = renderItem(items[i], context);
+		if (Array.isArray(rendered)) {
+			if (rendered.length === 0) continue;
+			lines.push(`${prefix}${rendered[0]}`);
+			for (let j = 1; j < rendered.length; j++) {
+				lines.push(`${continuePrefix}${rendered[j]}`);
+			}
+		} else {
+			lines.push(`${prefix}${rendered}`);
+		}
+	}
+
+	if (!expanded && items.length > maxItems) {
+		const remaining = items.length - maxItems;
+		lines.push(
+			`${theme.fg("dim", theme.tree.last)} ${theme.fg("muted", formatMoreItems(remaining, itemType, theme))}`,
+		);
+	}
+
+	return lines;
+}

package/src/tui/types.ts

@@ -0,0 +1,17 @@
+/**
+ * Shared types for TUI rendering components.
+ */
+
+import type { Theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
+
+export type State = "pending" | "running" | "success" | "error" | "warning";
+export type IconType = "success" | "error" | "running" | "pending" | "warning" | "info";
+
+export interface TreeContext {
+	index: number;
+	isLast: boolean;
+	depth: number;
+	theme: Theme;
+	prefix: string;
+	continuePrefix: string;
+}

package/src/tui/utils.ts

@@ -0,0 +1,49 @@
+/**
+ * Shared helpers for tool-rendered UI components.
+ */
+
+import type { Theme, ThemeBg } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
+import { truncateToWidth as truncateToWidthBase, visibleWidth } from "@oh-my-pi/pi-tui";
+import type { IconType, State } from "./types";
+
+export function buildTreePrefix(ancestors: boolean[], theme: Theme): string {
+	return ancestors.map((hasNext) => (hasNext ? `${theme.tree.vertical}  ` : "   ")).join("");
+}
+
+export function getTreeBranch(isLast: boolean, theme: Theme): string {
+	return isLast ? theme.tree.last : theme.tree.branch;
+}
+
+export function getTreeContinuePrefix(isLast: boolean, theme: Theme): string {
+	return isLast ? "   " : `${theme.tree.vertical}  `;
+}
+
+export function truncateToWidth(text: string, width: number, ellipsis: string): string {
+	return truncateToWidthBase(text, width, ellipsis);
+}
+
+export function padToWidth(text: string, width: number, bgFn?: (s: string) => string): string {
+	if (width <= 0) return bgFn ? bgFn(text) : text;
+	const paddingNeeded = Math.max(0, width - visibleWidth(text));
+	const padded = paddingNeeded > 0 ? text + " ".repeat(paddingNeeded) : text;
+	return bgFn ? bgFn(padded) : padded;
+}
+
+export function getStateBgColor(state: State): ThemeBg {
+	if (state === "success") return "toolSuccessBg";
+	if (state === "error") return "toolErrorBg";
+	return "toolPendingBg";
+}
+
+export function getStateIcon(icon: IconType, theme: Theme, spinnerFrame?: number): string {
+	if (icon === "success") return theme.styledSymbol("status.success", "success");
+	if (icon === "error") return theme.styledSymbol("status.error", "error");
+	if (icon === "warning") return theme.styledSymbol("status.warning", "warning");
+	if (icon === "info") return theme.styledSymbol("status.info", "accent");
+	if (icon === "pending") return theme.styledSymbol("status.pending", "accent");
+	if (spinnerFrame !== undefined) {
+		const frames = theme.spinnerFrames;
+		return frames[spinnerFrame % frames.length];
+	}
+	return theme.styledSymbol("status.running", "accent");
+}