@shanepadgett/tau-tui 0.33.0 → 0.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@shanepadgett/tau-tui",
-	"version": "0.33.0",
+	"version": "0.34.0",
 	"description": "Shared TUI components and helpers for Tau Agent",
 	"type": "module",
 	"license": "MIT",

package/src/index.ts

@@ -1,6 +1,7 @@
 export { editorTheme } from "./editor-theme.ts";
 export { bindingHint, bindingsHint, rawHint, type ToolKeyHint } from "./key-hints.ts";
 export { Marker, type MarkerState } from "./marker.ts";
+export { ScrollableMarkdown } from "./scrollable-markdown.ts";
 export {
 	SelectableList,
 	type SelectableListActionResult,

package/src/scrollable-markdown.ts

@@ -0,0 +1,37 @@
+import { getMarkdownTheme } from "@earendil-works/pi-coding-agent";
+import { type Component, Markdown, truncateToWidth, type TUI } from "@earendil-works/pi-tui";
+
+/**
+ * Scrolling markdown body for a `ToolPanel`. The panel owns key handling and
+ * calls `scroll`; this component owns the viewport window.
+ */
+export class ScrollableMarkdown implements Component {
+	private readonly tui: TUI;
+	private readonly markdown: Markdown;
+	private readonly chromeLines: number;
+	private offset = 0;
+	private maxOffset = 0;
+
+	constructor(tui: TUI, content: string, chromeLines: number) {
+		this.tui = tui;
+		this.markdown = new Markdown(content, 0, 0, getMarkdownTheme());
+		this.chromeLines = chromeLines;
+	}
+
+	scroll(delta: number): void {
+		this.offset = Math.max(0, Math.min(this.maxOffset, this.offset + delta));
+		this.tui.requestRender();
+	}
+
+	render(width: number): string[] {
+		const lines = this.markdown.render(width);
+		const height = Math.max(4, Math.floor(this.tui.terminal.rows * 0.9) - this.chromeLines);
+		this.maxOffset = Math.max(0, lines.length - height);
+		this.offset = Math.min(this.offset, this.maxOffset);
+		return lines.slice(this.offset, this.offset + height).map((line) => truncateToWidth(line, width, ""));
+	}
+
+	invalidate(): void {
+		this.markdown.invalidate();
+	}
+}

package/src/selectable-list.ts

@@ -183,61 +183,62 @@ export class SelectableList<T extends SelectableListItem> implements Component,
 		];
 	}
 
-	handleInput(data: string): void {
+	private handleMultiFilterKey(data: string): boolean {
+		if (this.config.selection.kind !== "multi" || !this.filterActive) return false;
 		const keybindings = getKeybindings();
-		if (this.config.selection.kind === "multi" && this.filterActive && matchesKey(data, Key.ctrl("c"))) {
+		if (matchesKey(data, Key.ctrl("c"))) {
 			this.clearFilter();
-			return;
+			return true;
 		}
-		if (
-			this.config.selection.kind === "multi" &&
-			this.filterActive &&
-			keybindings.matches(data, "tui.select.cancel")
-		) {
+		if (keybindings.matches(data, "tui.select.cancel")) {
 			this.clearFilterFocus();
-			return;
+			return true;
 		}
-		if (
-			this.config.selection.kind === "multi" &&
-			this.filterActive &&
-			keybindings.matches(data, "tui.select.confirm")
-		) {
+		if (keybindings.matches(data, "tui.select.confirm")) {
 			this.blurFilter();
-			return;
+			return true;
+		}
+		return false;
+	}
+
+	private handleMultiFilterMode(data: string): boolean {
+		if (this.config.selection.kind !== "multi") return false;
+		if (this.config.filter && !this.filterActive && matchesKey(data, Key.slash)) {
+			this.activateFilter();
+			return true;
+		}
+		if (this.filterActive) {
+			this.handleFilterInput(data);
+			return true;
+		}
+		return false;
+	}
+
+	private handleConfiguredAction(data: string): boolean {
+		for (const action of this.config.actions) {
+			if (!matchesKey(data, action.key)) continue;
+			this.runAction(action);
+			return true;
 		}
+		return false;
+	}
+
+	handleInput(data: string): void {
+		if (this.handleMultiFilterKey(data)) return;
+
+		const keybindings = getKeybindings();
 		if (keybindings.matches(data, "tui.select.cancel")) {
 			this.config.onResult({ kind: "cancel" });
 			return;
 		}
-
 		if (keybindings.matches(data, "tui.select.confirm")) {
 			this.primary();
 			return;
 		}
-
 		if (this.handleListKey(data)) return;
 		if (this.config.selection.kind === "multi" && this.handleMultiSelectKey(data)) return;
-		if (
-			this.config.selection.kind === "multi" &&
-			this.config.filter &&
-			!this.filterActive &&
-			matchesKey(data, Key.slash)
-		) {
-			this.activateFilter();
-			return;
-		}
-		if (this.config.selection.kind === "multi" && this.filterActive) {
-			this.handleFilterInput(data);
-			return;
-		}
-
-		for (const action of this.config.actions) {
-			if (matchesKey(data, action.key)) {
-				this.runAction(action);
-				return;
-			}
-		}
-
+		if (this.handleMultiFilterMode(data)) return;
+		if (this.handleConfiguredAction(data)) return;
 		if (this.config.filter && this.config.selection.kind === "single") this.handleFilterInput(data);
 	}