@oh-my-pi/pi-tui 18.2.3 → 18.2.5

package/src/chrome/selector-helpers.ts

@@ -0,0 +1,119 @@
+/**
+ * Shared scaffolding for the TUI selector/list/dashboard components: viewport
+ * windowing, scrollbar-aware row widths, ScrollView rendering, selection
+ * clamping, search-character classification, tab-cycling keys, and full-screen
+ * padding. Behaviour is identical to the per-component copies these helpers
+ * replace.
+ */
+import { centeredViewportRange, scrollOffsetForRow, viewportOverflows } from "../components/scroll-viewport";
+import { extractPrintableText, matchesKey } from "../keys";
+import { ScrollView } from "../components/scroll-view";
+import { theme } from "../theme/index";
+/**
+ * Render `rows` through a {@link ScrollView} with the shared list theme (muted
+ * track / accent thumb) and an "auto" scrollbar, positioned at `scrollOffset`.
+ * Returns the rendered lines for the caller to append to its output.
+ */
+export function renderScrollableList(
+	rows: readonly string[],
+	options: { width: number; totalRows: number; scrollOffset: number },
+): readonly string[] {
+	const sv = new ScrollView(rows, {
+		height: rows.length,
+		scrollbar: "auto",
+		totalRows: options.totalRows,
+		theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
+	});
+	sv.setScrollOffset(options.scrollOffset);
+	return sv.render(options.width);
+}
+
+/**
+ * Center a viewport window of `maxVisible` rows on `selectedIndex` within a
+ * list of `total` rows, clamped to valid bounds. Used by the selection-centered
+ * list panes (history search, tree selector).
+ */
+export function centeredWindow(
+	selectedIndex: number,
+	total: number,
+	maxVisible: number,
+): { startIndex: number; endIndex: number } {
+	const range = centeredViewportRange(selectedIndex, total, maxVisible);
+	return { startIndex: range.start, endIndex: range.end };
+}
+
+/**
+ * Width available for row content, reserving the rightmost column for the
+ * scrollbar when the list overflows its visible window.
+ */
+export function contentRowWidth(width: number, total: number, maxVisible: number): number {
+	return Math.max(0, width - (viewportOverflows(total, maxVisible) ? 1 : 0));
+}
+
+/**
+ * Clamp `selectedIndex` into `[0, total)` and nudge `scrollOffset` so the
+ * selection stays within the visible window of `maxVisible` rows. Returns the
+ * adjusted pair; on an empty list both reset to 0.
+ */
+export function clampSelection(
+	selectedIndex: number,
+	scrollOffset: number,
+	total: number,
+	maxVisible: number,
+): { selectedIndex: number; scrollOffset: number } {
+	if (total === 0) {
+		return { selectedIndex: 0, scrollOffset: 0 };
+	}
+
+	const selected = Math.max(0, Math.min(selectedIndex, total - 1));
+
+	const scroll = scrollOffsetForRow(scrollOffset, selected, total, maxVisible, "nearest");
+
+	return { selectedIndex: selected, scrollOffset: scroll };
+}
+
+/**
+ * Classify a key event for search-query text entry. Returns the single
+ * printable character to append to the query, or `null` when the key is not a
+ * searchable character: non-printable or multi-byte.
+ */
+export function searchableChar(data: string): string | null {
+	const printableText = extractPrintableText(data);
+	if (printableText && printableText.length === 1) {
+		const printableCharCode = printableText.charCodeAt(0);
+		if (printableCharCode > 32 && printableCharCode < 127) {
+			return printableText;
+		}
+	}
+	return null;
+}
+
+/**
+ * Handle the shared tab-cycling keys: Tab/Right advance to the next tab,
+ * Shift+Tab/Left to the previous. Invokes `switchTab` with the direction and
+ * returns true when the key was consumed.
+ */
+export function handleTabSwitchKey(data: string, switchTab: (direction: 1 | -1) => void): boolean {
+	if (matchesKey(data, "tab") || matchesKey(data, "right")) {
+		switchTab(1);
+		return true;
+	}
+	if (matchesKey(data, "shift+tab") || matchesKey(data, "left")) {
+		switchTab(-1);
+		return true;
+	}
+	return false;
+}
+
+/**
+ * Pad `lines` with blank rows up to `rows` so a full-screen overlay covers the
+ * viewport instead of letting the transcript peek through below it. Copies
+ * before padding — the source array may be component-owned and must not be
+ * mutated.
+ */
+export function padLinesToHeight(lines: readonly string[], rows: number): readonly string[] {
+	if (lines.length >= rows) return lines;
+	const padded = lines.slice();
+	while (padded.length < rows) padded.push("");
+	return padded;
+}

package/src/chrome/shared.ts

@@ -0,0 +1,27 @@
+import type { TabBarTheme } from "../components/tab-bar";
+import { sanitizeDisplaySingleLine } from "../overlays/extensions/display-text";
+import { theme } from "../theme/index";
+// ═══════════════════════════════════════════════════════════════════════════
+// Text Sanitization
+// ═══════════════════════════════════════════════════════════════════════════
+
+/** Compact single-line display text for statuses; unlike titles, collapse padding and trim. */
+export function sanitizeStatusText(text: string): string {
+	return sanitizeDisplaySingleLine(text).replace(/ +/g, " ").trim();
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Tab Bar Theme
+// ═══════════════════════════════════════════════════════════════════════════
+
+/** Shared tab bar theme used by fullscreen overlays (settings, agent hub). */
+export function getTabBarTheme(): TabBarTheme {
+	return {
+		label: (text: string) => theme.bold(theme.fg("accent", text)),
+		activeTab: (text: string) => theme.bold(theme.bg("selectedBg", theme.fg("text", text))),
+		inactiveTab: (text: string) => theme.fg("muted", text),
+		mutedTab: (text: string) => theme.fg("dim", text),
+		hoverTab: (text: string) => theme.bg("selectedBg", theme.fg("text", text)),
+		hint: (text: string) => theme.fg("dim", text),
+	};
+}

package/src/chrome/streaming-panel.ts

@@ -0,0 +1,72 @@
+import { Spacer } from "../components/spacer";
+import { Text } from "../components/text";
+import { type Component, Container } from "../tui";
+
+/** One refresh of a streaming overlay's presentation. */
+export interface StreamingPanelPresentation {
+	/** Non-empty sections separated by one blank row. */
+	readonly sections: readonly (Component | readonly Component[] | undefined)[];
+	/** Use a provider when action availability may change without a controller transition. */
+	readonly footer: string | (() => string);
+}
+
+function isComponentList(value: Component | readonly Component[]): value is readonly Component[] {
+	return Array.isArray(value);
+}
+
+class StreamingPanelFooter implements Component {
+	readonly #line: string | (() => string);
+	#renderedLine: string | undefined;
+	#text: Text | undefined;
+
+	constructor(line: string | (() => string)) {
+		this.#line = line;
+	}
+
+	render(width: number): readonly string[] {
+		const line = typeof this.#line === "function" ? this.#line() : this.#line;
+		if (!this.#text || line !== this.#renderedLine) {
+			this.#renderedLine = line;
+			this.#text = new Text(line, 0, 0);
+		}
+		return this.#text.render(width);
+	}
+
+	invalidate(): void {
+		this.#renderedLine = undefined;
+		this.#text = undefined;
+	}
+}
+
+/**
+ * Shared body/footer shell for streaming overlays. The overlay controller keeps
+ * its own state machine and calls {@link refresh} after each transition.
+ */
+export class StreamingPanelContent extends Container {
+	readonly #presentation: () => StreamingPanelPresentation;
+
+	constructor(presentation: () => StreamingPanelPresentation) {
+		super();
+		this.#presentation = presentation;
+		this.refresh();
+	}
+
+	/** Rebuild sections and the footer from controller-owned state. */
+	refresh(): void {
+		this.disposeChildren();
+		this.addChild(new Spacer(1));
+		const presentation = this.#presentation();
+		for (const section of presentation.sections) {
+			if (!section) continue;
+			const children = isComponentList(section) ? section : [section];
+			if (children.length === 0) continue;
+			for (const child of children) this.addChild(child);
+			this.addChild(new Spacer(1));
+		}
+		this.addChild(new StreamingPanelFooter(presentation.footer));
+	}
+
+	override invalidate(): void {
+		this.refresh();
+	}
+}

package/src/chrome/tool-activity.ts

@@ -0,0 +1,44 @@
+import { type Component, Container } from "../tui";
+export interface ToolActivityComponent {
+	setToolActivityVisible(visible: boolean): void;
+}
+
+export function isToolActivityComponent(component: Component): component is Component & ToolActivityComponent {
+	return typeof (component as Partial<ToolActivityComponent>).setToolActivityVisible === "function";
+}
+
+export class ToolActivityContainer extends Container implements ToolActivityComponent {
+	#visible = true;
+
+	constructor(component: Component | Component[]) {
+		super();
+		if (Array.isArray(component)) {
+			for (const child of component) this.addChild(child);
+		} else {
+			this.addChild(component);
+		}
+	}
+
+	setToolActivityVisible(visible: boolean): void {
+		if (this.#visible === visible) return;
+		this.#visible = visible;
+		this.invalidate();
+	}
+
+	/**
+	 * Forward Ctrl+O expansion to wrapped children. The transcript's expansion
+	 * traversal only visits top-level children, so the wrapper must proxy or
+	 * wrapped renderers would freeze at their insertion-time expansion state.
+	 */
+	setExpanded(expanded: boolean): void {
+		for (const child of this.children) {
+			const expandable = child as Partial<{ setExpanded(expanded: boolean): void }>;
+			if (typeof expandable.setExpanded === "function") expandable.setExpanded(expanded);
+		}
+	}
+
+	override render(width: number): readonly string[] {
+		if (!this.#visible) return [];
+		return super.render(width);
+	}
+}