@iowarp/clio-coder 0.4.5 → 0.4.7

package/src/interactive/view/view-overlay.ts

@@ -1,6 +1,7 @@
 import {
 	type Component,
 	fuzzyFilter,
+	Input,
 	Markdown,
 	matchesKey,
 	type OverlayHandle,
@@ -10,6 +11,7 @@ import {
 	wrapTextWithAnsi,
 } from "../../engine/tui.js";
 import { clockLocal } from "../format-time.js";
+import { localKey } from "../keyboard-owner.js";
 import { buildHint, showClioOverlayFrame } from "../overlay-frame.js";
 import { clioTheme, GLYPH, markdownTheme, padAnsi } from "../theme/index.js";
 import {
@@ -102,6 +104,8 @@ function artifactKey(artifact: ViewArtifact): string {
 
 function categoryLabel(category: ViewArtifactCategory): string {
 	switch (category) {
+		case "transcript":
+			return "Transcript details";
 		case "accountability":
 			return "Accountability";
 		case "evidence":
@@ -129,6 +133,7 @@ function categoryLabel(category: ViewArtifactCategory): string {
 
 const VIEW_ARTIFACT_CATEGORY_SET = new Set<ViewArtifactCategory>(VIEW_ARTIFACT_CATEGORIES);
 const BARE_CATEGORY_FILTERS = new Set<ViewArtifactCategory>([
+	"transcript",
 	"task-ledger",
 	"workspace",
 	"protected-artifact",
@@ -275,11 +280,8 @@ function groupedViewRows(artifacts: ReadonlyArray<ViewArtifact>): RenderedViewRo
 	const rows: RenderedViewRow[] = [];
 	for (const category of VIEW_ARTIFACT_CATEGORIES) {
 		const items = artifacts.filter((artifact) => artifact.category === category);
+		if (items.length === 0) continue;
 		rows.push({ type: "group", category });
-		if (items.length === 0) {
-			rows.push({ type: "empty", category });
-			continue;
-		}
 		for (const item of items) {
 			rows.push({ type: "item", category, item, itemIndex: artifacts.indexOf(item) });
 		}
@@ -393,11 +395,11 @@ function viewFooterHint(focus: ViewPaneFocus, canVerify: boolean, innerWidth?: n
 		const tiers =
 			focus === "list"
 				? [
-						"[↑↓] select · [type] filter · [Tab] detail · [Esc] close",
-						"[↑↓] select · [Tab] detail · [Esc] close",
-						"[↑↓] select · [Tab] detail",
+						"[↑↓] select · [type] filter · [Enter] detail · [Esc] close",
+						"[↑↓] select · [Enter] detail · [Esc] close",
+						"[↑↓] select · [Enter] detail",
 					]
-				: ["[↑↓] scroll · [Tab] list · [Esc] close", "[↑↓] scroll · [Tab] list"];
+				: ["[↑↓] scroll · [Esc] back", "[↑↓] scroll · [Tab] list"];
 		return tiers.find((tier) => visibleWidth(tier) <= budget) ?? (tiers.at(-1) as string);
 	}
 	if (focus === "list") {
@@ -405,25 +407,37 @@ function viewFooterHint(focus: ViewPaneFocus, canVerify: boolean, innerWidth?: n
 			{ key: "↑↓", verb: "select" },
 			{ key: "←→", verb: "category" },
 			{ key: "type", verb: "filter" },
-			{ key: "Tab", verb: "content" },
-			...(canVerify ? [{ key: "v", verb: "verify" }] : []),
-			{ key: "o", verb: "path" },
+			{ key: "Enter", verb: "content" },
+			{ key: "Ctrl+U", verb: "clear filter" },
 		]);
 	}
-	return buildHint([
-		{ key: "↑↓", verb: "scroll" },
-		{ key: "←→", verb: "category" },
-		{ key: "PgUp/PgDn", verb: "page" },
-		{ key: "g/G", verb: "top/bottom" },
-		{ key: "Tab", verb: "list" },
-		...(canVerify ? [{ key: "v", verb: "verify" }] : []),
-		{ key: "o", verb: "path" },
-	]);
+	return buildHint(
+		[
+			{ key: "↑↓", verb: "scroll" },
+			{ key: "←→", verb: "category" },
+			{ key: "PgUp/PgDn", verb: "page" },
+			{ key: "g/G", verb: "top/bottom" },
+			...(canVerify ? [{ key: "v", verb: "verify" }] : []),
+			{ key: "o", verb: "path" },
+		],
+		"back",
+	);
 }
 
 export class ViewOverlayView implements Component {
 	private artifacts: ViewArtifact[] = [];
 	private filterText = "";
+	private readonly filterInput = new Input();
+	get keyboardScope(): "edit" | "review" {
+		return this.focus === "list" ? "edit" : "review";
+	}
+	undoInput(): boolean {
+		if (this.focus !== "list") return false;
+		this.filterInput.applyEdit("undo");
+		this.filterText = this.filterInput.getValue();
+		this.selectInitialFilterMatch();
+		return true;
+	}
 	private selectedIndex = 0;
 	private listScrollOffset = 0;
 	private contentScrollOffset = 0;
@@ -438,6 +452,7 @@ export class ViewOverlayView implements Component {
 
 	constructor(private readonly options: ViewOverlayOptions) {
 		this.filterText = options.initialFilter ?? "";
+		this.filterInput.setValue(this.filterText);
 	}
 
 	refresh(): void {
@@ -528,10 +543,11 @@ export class ViewOverlayView implements Component {
 		const content = this.content;
 		if (!content) return [];
 		if (content.status === "error") return content.lines.flatMap((line) => wrapTextWithAnsi(line, Math.max(1, width)));
-		if (content.format !== "markdown") return content.lines;
 		if (content.renderedLines && content.renderWidth === width) return content.renderedLines;
-		const md = new Markdown(content.lines.join("\n"), 0, 0, markdownTheme(clioTheme()));
-		const rendered = md.render(width);
+		const rendered =
+			content.format === "markdown"
+				? new Markdown(content.lines.join("\n"), 0, 0, markdownTheme(clioTheme())).render(width)
+				: content.lines.flatMap((line) => wrapTextWithAnsi(line, Math.max(1, width)));
 		content.renderWidth = width;
 		content.renderedLines = rendered;
 		return rendered;
@@ -556,6 +572,7 @@ export class ViewOverlayView implements Component {
 		}
 
 		const filtered = this.filteredArtifacts();
+		if (filtered.length === 0) return this.fixedLines([...lines, theme.fg("dim", "No matching details.")], width, height);
 		const rows = groupedViewRows(filtered);
 		const selectedRow = rows.findIndex((row) => row.type === "item" && row.itemIndex === this.selectedIndex);
 		const rowHeight = Math.max(1, height - 1);
@@ -634,7 +651,12 @@ export class ViewOverlayView implements Component {
 	}
 
 	handleInput(data: string): void {
-		if (matchesKey(data, "tab") || matchesKey(data, "shift+tab")) {
+		data = localKey(data);
+		if (
+			matchesKey(data, "tab") ||
+			matchesKey(data, "shift+tab") ||
+			(this.focus === "list" && matchesKey(data, "enter"))
+		) {
 			this.focus = this.focus === "list" ? "content" : "list";
 			this.options.requestRender?.();
 			return;
@@ -647,21 +669,19 @@ export class ViewOverlayView implements Component {
 			this.selectCategory(1);
 			return;
 		}
-		if (data === "v") {
+		if (this.focus === "content" && data === "v") {
 			this.verifySelected();
 			return;
 		}
-		if (data === "o") {
+		if (this.focus === "content" && data === "o") {
 			this.openPathNotice();
 			return;
 		}
 		if (matchesKey(data, "esc")) {
-			if (this.focus === "list" && this.filterText.length > 0) {
-				this.filterText = "";
-				this.selectInitialFilterMatch();
-				return;
-			}
-			this.options.onClose();
+			if (this.focus === "content") {
+				this.focus = "list";
+				this.options.requestRender?.();
+			} else this.options.onClose();
 			return;
 		}
 		if (this.focus === "content") {
@@ -675,23 +695,18 @@ export class ViewOverlayView implements Component {
 
 	private handleListInput(data: string): boolean {
 		const filtered = this.filteredArtifacts();
-		if (matchesKey(data, "up") || data === "k") {
+		if (matchesKey(data, "up")) {
 			if (filtered.length > 0) this.selectIndex(this.selectedIndex - 1);
 			return true;
 		}
-		if (matchesKey(data, "down") || data === "j") {
+		if (matchesKey(data, "down")) {
 			if (filtered.length > 0) this.selectIndex(this.selectedIndex + 1);
 			return true;
 		}
-		if (matchesKey(data, "backspace")) {
-			if (this.filterText.length > 0) {
-				this.filterText = this.filterText.slice(0, -1);
-				this.selectInitialFilterMatch();
-			}
-			return true;
-		}
-		if (data.length === 1 && data >= " " && data !== "\x7f") {
-			this.filterText += data;
+		const previous = this.filterText;
+		this.filterInput.handleInput(data);
+		this.filterText = this.filterInput.getValue();
+		if (previous !== this.filterText) {
 			this.selectInitialFilterMatch();
 			return true;
 		}