@oh-my-pi/pi-tui 18.4.2 → 18.4.4

package/src/overlays/annotation-overlay.ts

@@ -37,6 +37,10 @@ import {
 	topBorderSplit,
 } from "../chrome/overlay-box";
 import { matchesAppExternalEditor } from "../keybinding-matchers";
+import type { KeyName } from "../key-hint-format";
+import { item, keyed, node, row as rowNode, span, text } from "../native/describe";
+import { leafKey, type NativeChild, type NativeNode, type NativeUiEvent } from "../native/node";
+import { hintsRow, itemIndex, type NativeHint, noteSpans, overlayCard, selectList } from "../native/overlay";
 
 function fit(text: string, width: number): string {
 	if (width <= 0) return "";
@@ -100,6 +104,13 @@ interface RenderedBody {
 
 type FocusRegion = "files" | "diff" | "actions";
 
+/** Described body rows of the current file (or text), rebuilt when the file or annotations change. */
+interface NativeBody {
+	fileIndex: number;
+	rev: number;
+	items: NativeNode[];
+}
+
 const SOURCE_SELECTION_GUTTER_WIDTH = 2;
 
 const OVERLAY_TITLE = "Code Review";
@@ -159,6 +170,13 @@ export class AnnotationOverlay implements Component {
 	#textViewportDriven = false;
 	#textRenderedRowBySource: readonly number[] = [];
 	#staticRenderedDiffBodies = new WeakMap<ReviewDiffFile, RenderedDiffBody>();
+	/** Bumped on every annotation change (each one pushes an undo snapshot) and on undo. */
+	#annotationRev = 0;
+	#nativeBody: NativeBody | undefined;
+	#nativeSig = "";
+	#nativeRoot: NativeNode | undefined;
+	/** Body the memoized root was built from. */
+	#nativeRootBody: NativeBody | undefined;
 
 	readonly #tui: TUI;
 	readonly #theme: Theme;
@@ -446,20 +464,26 @@ export class AnnotationOverlay implements Component {
 			}
 			return;
 		}
-		if (this.#keybindings.matches(data, "tui.select.confirm")) {
-			const disabled = this.#textSource ? !hasAnnotations : this.#actionIndex === 1 && !hasAnnotations;
-			if (disabled) return;
-			if (this.#textSource) {
-				this.#finish({
-					action: "paste",
-					annotations: this.getTextAnnotations(),
-				});
-			} else {
-				this.#finish({
-					action: this.#actionIndex === 0 ? "review" : "paste",
-					annotations: this.getAnnotations(),
-				});
-			}
+		if (this.#keybindings.matches(data, "tui.select.confirm")) this.#confirmAction();
+	}
+
+	#actionDisabled(index: number): boolean {
+		const hasAnnotations = this.#textSource ? this.#textAnnotations.length > 0 : this.#annotations.length > 0;
+		return this.#textSource ? !hasAnnotations : index === 1 && !hasAnnotations;
+	}
+
+	#confirmAction(): void {
+		if (this.#actionDisabled(this.#actionIndex)) return;
+		if (this.#textSource) {
+			this.#finish({
+				action: "paste",
+				annotations: this.getTextAnnotations(),
+			});
+		} else {
+			this.#finish({
+				action: this.#actionIndex === 0 ? "review" : "paste",
+				annotations: this.getAnnotations(),
+			});
 		}
 	}
 
@@ -708,7 +732,10 @@ export class AnnotationOverlay implements Component {
 			chooser.selected = (chooser.selected + 1) % chooser.entries.length;
 			return;
 		}
-		if (!this.#keybindings.matches(data, "tui.select.confirm")) return;
+		if (this.#keybindings.matches(data, "tui.select.confirm")) this.#openChosenAnnotation(chooser);
+	}
+
+	#openChosenAnnotation(chooser: AnnotationChooser): void {
 		const index = chooser.entries[chooser.selected];
 		this.#annotationChooser = undefined;
 		if (index === undefined) return;
@@ -733,11 +760,13 @@ export class AnnotationOverlay implements Component {
 
 	#pushUndo(): void {
 		this.#undoStack.push({ annotations: [...this.#annotations], textAnnotations: [...this.#textAnnotations] });
+		this.#annotationRev++;
 	}
 
 	#undoAnnotation(): void {
 		const snapshot = this.#undoStack.pop();
 		if (!snapshot) return;
+		this.#annotationRev++;
 		this.#annotations = snapshot.annotations;
 		this.#textAnnotations = snapshot.textAnnotations;
 		if (this.#annotations.length === 0 && this.#actionIndex === 1) this.#actionIndex = 0;
@@ -1002,38 +1031,9 @@ export class AnnotationOverlay implements Component {
 			return this.#renderAnnotationChooser(width, maxChooserRows);
 		}
 		if (this.#annotating) {
-			let location: string;
-			let action: string;
-			if (this.#textSource) {
-				const label = sanitizeStatusText(this.#textSource.label);
-				location =
-					this.#annotationScope === "text" ? `${label} · text` : `${label} · line ${this.#sourceIndex + 1}`;
-				action =
-					this.#editingAnnotationIndex === undefined
-						? this.#annotationScope === "text"
-							? "Annotate text"
-							: "Annotate line"
-						: "Edit annotation";
-			} else {
-				const file = this.#currentFile();
-				const source = this.#currentSourceRows()[this.#sourceIndex];
-				location =
-					this.#annotationScope === "file"
-						? file
-							? `${displayFileLabel(file)} · file`
-							: "file"
-						: source && file
-							? `${displayFileLabel(file)} · ${source.oldLine ?? "-"}/${source.newLine ?? "-"}`
-							: "diff row";
-				action =
-					this.#editingAnnotationIndex === undefined
-						? this.#annotationScope === "file"
-							? "Annotate file"
-							: "Annotate line"
-						: "Edit annotation";
-			}
+			const { action, location } = this.#annotationCaption();
 			const caption = truncateToWidth(
-				`${this.#theme.fg("dim", action)} ${this.#theme.fg("accent", sanitizeStatusText(location))}`,
+				`${this.#theme.fg("dim", action)} ${this.#theme.fg("accent", location)}`,
 				width,
 				Ellipsis.Unicode,
 			);
@@ -1047,6 +1047,45 @@ export class AnnotationOverlay implements Component {
 			this.#editor.focused = true;
 			return [caption, ...this.#editor.render(width), this.#theme.fg("dim", hints.join(" · "))];
 		}
+		return [this.#theme.fg("dim", this.#helpText())];
+	}
+
+	/** What the active annotation draft does and where it lands. */
+	#annotationCaption(): { action: string; location: string } {
+		let location: string;
+		let action: string;
+		if (this.#textSource) {
+			const label = sanitizeStatusText(this.#textSource.label);
+			location = this.#annotationScope === "text" ? `${label} · text` : `${label} · line ${this.#sourceIndex + 1}`;
+			action =
+				this.#editingAnnotationIndex === undefined
+					? this.#annotationScope === "text"
+						? "Annotate text"
+						: "Annotate line"
+					: "Edit annotation";
+		} else {
+			const file = this.#currentFile();
+			const source = this.#currentSourceRows()[this.#sourceIndex];
+			location =
+				this.#annotationScope === "file"
+					? file
+						? `${displayFileLabel(file)} · file`
+						: "file"
+					: source && file
+						? `${displayFileLabel(file)} · ${source.oldLine ?? "-"}/${source.newLine ?? "-"}`
+						: "diff row";
+			action =
+				this.#editingAnnotationIndex === undefined
+					? this.#annotationScope === "file"
+						? "Annotate file"
+						: "Annotate line"
+					: "Edit annotation";
+		}
+		return { action, location: sanitizeStatusText(location) };
+	}
+
+	/** Footer help for the focused region. */
+	#helpText(): string {
 		const upDown = `${this.#key("tui.select.up")}/${this.#key("tui.select.down")}`;
 		const confirm = this.#key("tui.select.confirm");
 		const editNote = `${formatKeyHint("e")} edit note`;
@@ -1056,12 +1095,7 @@ export class AnnotationOverlay implements Component {
 				: this.#focus === "diff"
 					? `${upDown} line · ${formatKeyHint("shift")} faster · ${this.#key("tui.select.pageUp")}/${this.#key("tui.select.pageDown")} · ${formatKeyHints(["g", "shift+g"])} ends · ${formatKeyHint("a")} line note · ${formatKeyHint("shift+a")} ${this.#textSource ? "text" : "file"} note · ${editNote}`
 					: `${upDown} select · ${confirm} confirm`;
-		return [
-			this.#theme.fg(
-				"dim",
-				`${focusHelp} · ${formatKeyHint("u")} undo · ${formatKeyHint("tab")} regions · ${this.#key("tui.select.cancel")} cancel`,
-			),
-		];
+		return `${focusHelp} · ${formatKeyHint("u")} undo · ${formatKeyHint("tab")} regions · ${this.#key("tui.select.cancel")} cancel`;
 	}
 
 	#ensureCursorVisible(renderedRowBySource: readonly number[]): void {
@@ -1105,6 +1139,311 @@ export class AnnotationOverlay implements Component {
 		});
 	}
 
+	describe(): NativeNode {
+		// The terminal lays out the file sidebar; diffs always have one, text never does.
+		this.#sidebarShown = !this.#textSource;
+		if (!this.#sidebarShown && this.#focus === "files") this.#focus = "diff";
+		// Page size for PgUp/PgDn, matching the rendered body height.
+		this.#bodyHeight = Math.max(MIN_BODY_ROWS, (process.stdout.rows || 40) - (this.#actions.length + 8));
+		this.#editor.focused = this.#annotating;
+		const body = this.#describeBodyItems();
+		const chooser = this.#annotationChooser;
+		const sig = [
+			this.#focus,
+			this.#fileIndex,
+			this.#sourceIndex,
+			this.#actionIndex,
+			this.#annotating ? `annotating:${this.#annotationScope}:${this.#editingAnnotationIndex}` : "",
+			chooser ? `chooser:${chooser.selected}:${chooser.entries.join()}` : "",
+		].join("|");
+		if (this.#nativeRoot && sig === this.#nativeSig && body === this.#nativeRootBody) return this.#nativeRoot;
+
+		const children: NativeChild[] = [];
+		const lines = selectList("lines", body.items, {
+			selected: this.#focus === "diff" ? `l${this.#sourceIndex}` : null,
+			virtual: true,
+			empty: [span(this.#textSource ? "No text" : "No reviewable files", "dim")],
+			role: this.#textSource ? "omp.overlay.annotateText.lines" : "omp.overlay.codeReview.diff",
+			tone: this.#focus === "diff" ? "accent" : undefined,
+		});
+		const main = node("col", { grow: 1 }, [this.#describeHeader(), lines], "main");
+		if (this.#sidebarShown) {
+			const files = selectList(
+				"files",
+				this.#files.map((file, index) => {
+					const count = this.#annotationCount(index);
+					const value = [
+						span(`+${file.linesAdded}`, "ins"),
+						span("/", "dim"),
+						span(`-${file.linesRemoved}`, "del"),
+					];
+					if (count) value.push(span(` ✎${count}`, "warning"));
+					return item(`f${index}`, { label: [span(displayFileLabel(file), "path")], value });
+				}),
+				{
+					selected: this.#files.length > 0 ? `f${this.#fileIndex}` : null,
+					role: "omp.overlay.codeReview.files",
+					tone: this.#focus === "files" ? "accent" : undefined,
+				},
+			);
+			const sidebar = node("col", { max: { w: "34ch" }, shrink: 0 }, [files], "sidebar");
+			children.push(keyed(rowNode([sidebar, main], { gap: "md", align: "start" }), "split"));
+		} else {
+			children.push(main);
+		}
+		children.push(keyed(text([span(sanitizeStatusText(this.#mode), "accent strong")]), "mode"));
+		children.push(
+			selectList(
+				"actions",
+				this.#actions.map((label, index) =>
+					item(`a${index}`, { label, disabled: this.#actionDisabled(index) || undefined }),
+				),
+				{ selected: `a${this.#actionIndex}`, tone: this.#focus === "actions" ? "accent" : undefined },
+			),
+		);
+		children.push(...this.#describeFooter());
+
+		this.#nativeSig = sig;
+		this.#nativeRootBody = body;
+		this.#nativeRoot = overlayCard(
+			this.#textSource ? "omp.overlay.annotateText" : "omp.overlay.codeReview",
+			this.#textSource ? TEXT_OVERLAY_TITLE : OVERLAY_TITLE,
+			children,
+		);
+		return this.#nativeRoot;
+	}
+
+	handleNativeEvent(event: NativeUiEvent): void {
+		if (this.#finished || this.#externalOperation) return;
+		if (event.type !== "select" && event.type !== "activate") return;
+		const activate = event.type === "activate";
+		const leaf = leafKey(event.key);
+		const chooser = this.#annotationChooser;
+		if (leaf === "chooser") {
+			const index = itemIndex(event.item, "c");
+			if (!chooser || index < 0 || index >= chooser.entries.length) return;
+			chooser.selected = index;
+			if (activate) this.#openChosenAnnotation(chooser);
+			return;
+		}
+		// A draft commits against the current file/row, so the target stays put
+		// while the editor or the chooser is open.
+		if (chooser || this.#annotating) return;
+		switch (leaf) {
+			case "files": {
+				const index = itemIndex(event.item, "f");
+				if (index < 0 || index >= this.#files.length) return;
+				this.#focus = "files";
+				if (index !== this.#fileIndex) this.#selectFile(index);
+				if (activate) this.#focus = "diff";
+				return;
+			}
+			case "lines": {
+				const index = itemIndex(event.item, "l");
+				const rowCount = this.#textSource ? this.#textLines.length : this.#currentSourceRows().length;
+				if (index < 0 || index >= rowCount) return;
+				this.#focus = "diff";
+				this.#sourceIndex = index;
+				this.#textViewportDriven = false;
+				if (activate) this.#focus = "actions";
+				return;
+			}
+			case "actions": {
+				const index = itemIndex(event.item, "a");
+				if (index < 0 || index >= this.#actions.length || this.#actionDisabled(index)) return;
+				this.#focus = "actions";
+				this.#actionIndex = index;
+				if (activate) this.#confirmAction();
+				return;
+			}
+		}
+	}
+
+	/** One item per diff/text row; annotation callouts are disabled items before their row. */
+	#describeBodyItems(): NativeBody {
+		const cached = this.#nativeBody;
+		if (cached && cached.fileIndex === this.#fileIndex && cached.rev === this.#annotationRev) return cached;
+		const items: NativeNode[] = [];
+		const note = (key: string, label: string, body: string) =>
+			items.push(
+				item(key, {
+					label: noteSpans(label, sanitizeText(body)),
+					disabled: true,
+					tone: "warning",
+					role: "omp.overlay.codeReview.note",
+				}),
+			);
+		if (this.#textSource) {
+			for (const [index, entry] of this.#textAnnotations.entries()) {
+				if (entry.annotation.scope === "text") note(`n${index}`, "text note", entry.annotation.note);
+			}
+			for (const [sourceIndex, sourceLine] of this.#textLines.entries()) {
+				for (const [index, entry] of this.#textAnnotations.entries()) {
+					if (entry.annotation.scope === "line" && entry.sourceIndex === sourceIndex) {
+						note(`n${index}`, "note", entry.annotation.note);
+					}
+				}
+				items.push(item(`l${sourceIndex}`, { label: sanitizeText(sourceLine) }));
+			}
+		} else {
+			const file = this.#currentFile();
+			if (file) {
+				for (const [index, entry] of this.#annotations.entries()) {
+					if (entry.fileIndex === this.#fileIndex && entry.annotation.scope === "file") {
+						note(`n${index}`, "file note", entry.annotation.note);
+					}
+				}
+				if (file.isBinary) {
+					items.push(
+						item("binary", { label: [span("Binary diff; no annotatable source rows", "dim")], disabled: true }),
+					);
+				} else if (file.rows.length === 0) {
+					items.push(
+						item("empty", {
+							label: [span("No diff hunks; this may be a rename-only change", "dim")],
+							disabled: true,
+						}),
+					);
+				}
+				let sourceIndex = 0;
+				for (const [rowIndex, diffRow] of file.isBinary ? [] : file.rows.entries()) {
+					if (!isSourceRow(diffRow)) {
+						const s = diffRow.kind === "hunk" ? "accent" : "dim";
+						items.push(item(`r${rowIndex}`, { label: [span(sanitizeText(diffRow.raw), s)], disabled: true }));
+						continue;
+					}
+					for (const [index, entry] of this.#annotations.entries()) {
+						if (
+							entry.fileIndex === this.#fileIndex &&
+							entry.sourceIndex === sourceIndex &&
+							entry.annotation.scope === "line"
+						) {
+							note(`n${index}`, "note", entry.annotation.note);
+						}
+					}
+					const marker = diffRow.kind === "added" ? "+" : diffRow.kind === "removed" ? "-" : " ";
+					const lineNumber = diffRow.kind === "removed" ? diffRow.oldLine : (diffRow.newLine ?? diffRow.oldLine);
+					const color: DiffColor =
+						diffRow.kind === "added"
+							? "toolDiffAdded"
+							: diffRow.kind === "removed"
+								? "toolDiffRemoved"
+								: "toolDiffContext";
+					items.push(
+						item(`l${sourceIndex}`, {
+							label: [
+								span(marker, `${color} mono`),
+								span(`${lineNumber ?? ""} `, "num dim mono"),
+								span(sanitizeText(diffRow.content), `${color} mono`),
+							],
+						}),
+					);
+					sourceIndex++;
+				}
+			}
+		}
+		this.#nativeBody = { fileIndex: this.#fileIndex, rev: this.#annotationRev, items };
+		return this.#nativeBody;
+	}
+
+	#describeHeader(): NativeNode {
+		if (this.#textSource) {
+			const count = this.#textAnnotations.length;
+			const spans = [span(sanitizeStatusText(this.#textSource.label), "strong")];
+			if (count) spans.push(span(` ✎${count}`, "dim"));
+			return keyed(text(spans, { truncate: "end" }), "header");
+		}
+		const file = this.#currentFile();
+		if (!file) return keyed(text([span("No reviewable files", "dim")]), "header");
+		const count = this.#annotationCount(this.#fileIndex);
+		const spans = [
+			span(sanitizeStatusText(displayFileLabel(file)), "strong path"),
+			span(` +${file.linesAdded}`, "ins"),
+			span("/", "dim"),
+			span(`-${file.linesRemoved}`, "del"),
+		];
+		if (count) spans.push(span(` ✎${count}`, "dim"));
+		return keyed(text(spans, { truncate: "middle" }), "header");
+	}
+
+	#describeFooter(): NativeChild[] {
+		const chooser = this.#annotationChooser;
+		if (chooser) {
+			const entries = chooser.entries.map((index, i) => {
+				const entry = chooser.kind === "text" ? this.#textAnnotations[index] : this.#annotations[index];
+				const location = !entry
+					? ""
+					: "fileIndex" in entry
+						? this.#annotationLocation(entry)
+						: this.#textAnnotationLocation(entry);
+				return item(`c${i}`, {
+					label: sanitizeStatusText(entry?.annotation.note.split(/\r?\n/, 1)[0] ?? ""),
+					detail: location,
+				});
+			});
+			return [
+				keyed(text([span("Edit annotation", "accent strong")]), "chooserHead"),
+				selectList("chooser", entries, { selected: `c${chooser.selected}` }),
+				hintsRow(
+					[
+						this.#hint(["tui.select.up", "tui.select.down"], "choose"),
+						this.#hint("tui.select.confirm", "edit"),
+						this.#hint("tui.select.cancel", "cancel"),
+					],
+					"chooserHints",
+				),
+			];
+		}
+		if (this.#annotating) {
+			const { action, location } = this.#annotationCaption();
+			return [
+				keyed(text([span(`${action} `, "dim"), span(location, "accent")], { truncate: "end" }), "annotateHead"),
+				this.#editor,
+				hintsRow(
+					[
+						this.#hint("tui.input.submit", "save"),
+						this.#hint("tui.input.newLine", "newline"),
+						this.#hint("tui.select.cancel", "cancel"),
+						this.#hint("app.editor.external", "editor"),
+					],
+					"annotateHints",
+				),
+			];
+		}
+		const key = (keys: KeyName | readonly KeyName[], label: string): NativeHint => ({
+			keys: typeof keys === "string" ? [keys] : keys,
+			label,
+		});
+		const upDown = (label: string) => this.#hint(["tui.select.up", "tui.select.down"], label);
+		const editNote = key("e", "edit note");
+		const hints: (NativeHint | undefined)[] =
+			this.#focus === "files"
+				? [upDown("file"), this.#hint("tui.select.confirm", "diff"), key(["a", "shift+a"], "file note"), editNote]
+				: this.#focus === "diff"
+					? [
+							upDown("line"),
+							key("shift", "faster"),
+							this.#hint(["tui.select.pageUp", "tui.select.pageDown"], "page"),
+							key(["g", "shift+g"], "ends"),
+							key("a", "line note"),
+							key("shift+a", this.#textSource ? "text note" : "file note"),
+							editNote,
+						]
+					: [upDown("select"), this.#hint("tui.select.confirm", "confirm")];
+		hints.push(key("u", "undo"), key("tab", "regions"), this.#hint("tui.select.cancel", "cancel"));
+		return [hintsRow(hints)];
+	}
+
+	/** Keycap hint for the primary keys this overlay's keybindings bind to `actions`. */
+	#hint(actions: Keybinding | readonly Keybinding[], label: string): NativeHint | undefined {
+		const keys: KeyName[] = [];
+		for (const action of typeof actions === "string" ? [actions] : actions) {
+			const [key] = this.#keybindings.getKeys(action);
+			if (key) keys.push(key);
+		}
+		return keys.length > 0 ? { keys, label } : undefined;
+	}
+
 	render(width: number): readonly string[] {
 		const terminalHeight = process.stdout.rows || 40;
 		this.#sidebarShown = this.#textSource ? false : this.#canShowSidebar(width);