@bastani/atomic 0.9.12 → 0.9.13-alpha.2

package/dist/builtin/workflows/src/tui/graph-view-layout.ts

@@ -0,0 +1,266 @@
+import { type Component, ScrollView, VStack } from "@earendil-works/pi-tui";
+import {
+	getScrollbarGeometry,
+	getScrollViewBox,
+	type LayoutBox,
+	type LayoutFrame,
+	renderLayoutFrame,
+	type ScrollbarGeometry,
+} from "@earendil-works/pi-tui/dist/layout.js";
+import { isTerminalLeftMousePress, parseTerminalMouseInput } from "./mouse-input.js";
+import { sliceColumns, visibleWidth } from "./text-helpers.js";
+
+const EMPTY_RENDER: () => void = () => {};
+export const GRAPH_HEADER_ROWS = 3;
+export const GRAPH_FOOTER_ROWS = 3;
+
+export function graphLayoutMarginRows(height: number): number {
+	return Math.max(1, Math.floor(height)) >= 9 ? 1 : 0;
+}
+
+export function graphLayoutBodyRows(height: number): number {
+	const safeHeight = Math.max(1, Math.floor(height));
+	return Math.max(0, safeHeight - GRAPH_HEADER_ROWS - GRAPH_FOOTER_ROWS - graphLayoutMarginRows(safeHeight) * 2);
+}
+
+export function graphLayoutNaturalHeight(bodyRows: number): number {
+	const safeBodyRows = Math.max(1, Math.floor(bodyRows));
+	const base = GRAPH_HEADER_ROWS + GRAPH_FOOTER_ROWS + safeBodyRows;
+	return base >= GRAPH_HEADER_ROWS + GRAPH_FOOTER_ROWS + 3 ? base + 2 : base;
+}
+
+export interface GraphViewLayoutCallbacks {
+	renderHeader: (width: number) => string[];
+	renderBody: (width: number, top: number, rows: number, contentRows: number) => string[];
+	renderFooter: (width: number) => string[];
+	bodyContentHeight: (width: number, viewportRows: number) => number;
+	beforeFrame?: (scrollView: ScrollView, viewportRows: number, contentRows: number, width: number) => void;
+	requestRender?: () => void;
+}
+
+export interface GraphViewLayoutFrame {
+	frame: LayoutFrame;
+	bodyBox: LayoutBox | undefined;
+	topMarginRows: number;
+	bottomMarginRows: number;
+	wrappedRows: boolean[];
+	scrollbar: ScrollbarGeometry | undefined;
+}
+
+function collectWrappedRows(box: LayoutBox, height: number, wrappedRows: boolean[]): void {
+	if (box.lines) {
+		const offset = box.lineOffset ?? 0;
+		const firstRow = Math.max(box.rect.y, box.clip.y, 0);
+		const lastRow = Math.min(box.rect.y + box.rect.height, box.clip.y + box.clip.height, height);
+		for (let row = firstRow; row < lastRow; row++) {
+			if (box.lines[offset + row - box.rect.y] !== undefined) wrappedRows[row] = true;
+		}
+	}
+	for (const child of box.children) collectWrappedRows(child, height, wrappedRows);
+}
+
+class CallbackComponent implements Component {
+	constructor(private readonly renderLines: (width: number) => string[]) {}
+
+	render(width: number): string[] {
+		return this.renderLines(width);
+	}
+
+	invalidate(): void {}
+}
+
+/**
+ * Layout root for the graph overlay.
+ *
+ * pi-tui mounts extension overlays as ordinary components, while its
+ * ScrollView/VStack sizing pass belongs to TuiAltScreen. This small bridge
+ * runs that same installed pi-tui layout pass for the overlay component, so
+ * the graph body still gets a real constrained ScrollView without changing
+ * the host TUI or the transcript surface.
+ */
+export class GraphViewLayout {
+	readonly scrollView: ScrollView;
+
+	private readonly root: VStack;
+	private readonly callbacks: GraphViewLayoutCallbacks;
+	private bodyViewportRows = 0;
+	private bodyContentRows = 0;
+	private scrollbar: ScrollbarGeometry | undefined;
+	private draggingScrollbar: { grabOffset: number } | undefined;
+
+	constructor(callbacks: GraphViewLayoutCallbacks) {
+		this.callbacks = callbacks;
+
+		const margin = new CallbackComponent(() => [""]);
+		const header = new CallbackComponent((width) => this.callbacks.renderHeader(width));
+		const body = new CallbackComponent((width) => this.renderBody(width));
+		const footer = new CallbackComponent((width) => this.callbacks.renderFooter(width));
+		this.scrollView = new ScrollView(body, {
+			axis: "vertical",
+			follow: "none",
+			overscroll: "contain",
+			scrollbar: "hidden",
+		});
+
+		const marginVisible = ({ height }: { height: number }): boolean => graphLayoutMarginRows(height) > 0;
+		this.root = new VStack([
+			{ component: margin, basis: 1, grow: 0, shrink: 0, minSize: 0, visible: marginVisible },
+			{ component: header, basis: GRAPH_HEADER_ROWS, grow: 0, shrink: 1, minSize: 0 },
+			{ component: this.scrollView, basis: 0, grow: 1, shrink: 1, minSize: 0 },
+			{ component: footer, basis: GRAPH_FOOTER_ROWS, grow: 0, shrink: 1, minSize: 1 },
+			{ component: margin, basis: 1, grow: 0, shrink: 0, minSize: 0, visible: marginVisible },
+		]);
+	}
+
+	render(width: number, height: number): GraphViewLayoutFrame {
+		const safeWidth = Math.max(1, Math.floor(width));
+		const safeHeight = Math.max(1, Math.floor(height));
+		const marginRows = graphLayoutMarginRows(safeHeight);
+		this.bodyViewportRows = graphLayoutBodyRows(safeHeight);
+		this.bodyContentRows = Math.max(
+			0,
+			Math.floor(this.callbacks.bodyContentHeight(safeWidth, this.bodyViewportRows)),
+		);
+		const requestRender = this.callbacks.requestRender ?? EMPTY_RENDER;
+		this.scrollView.updateLayout(this.bodyContentRows, this.bodyViewportRows, requestRender);
+		this.scrollView.setScrollbar(this.bodyContentRows > this.bodyViewportRows ? "always" : "hidden");
+		this.callbacks.beforeFrame?.(this.scrollView, this.bodyViewportRows, this.bodyContentRows, safeWidth);
+
+		const frame = renderLayoutFrame(this.root, safeWidth, safeHeight, requestRender);
+		const bodyBox = getScrollViewBox(frame, this.scrollView);
+		this.scrollbar = bodyBox ? getScrollbarGeometry(bodyBox) : undefined;
+		if (!this.scrollbar) this.draggingScrollbar = undefined;
+		const wrappedRows = Array.from({ length: safeHeight }, () => false);
+		collectWrappedRows(frame.root, safeHeight, wrappedRows);
+		return {
+			frame,
+			bodyBox,
+			topMarginRows: marginRows,
+			bottomMarginRows: marginRows,
+			wrappedRows,
+			scrollbar: this.scrollbar,
+		};
+	}
+
+	/** Repaint the thumb after overlays that cover the body rows. */
+	paintScrollbar(lines: string[], width: number): void {
+		const geometry = this.scrollbar;
+		if (!geometry) return;
+		for (let offset = 0; offset < geometry.thumbHeight; offset++) {
+			const row = geometry.thumbTop + offset;
+			if (row < 0 || row >= lines.length || geometry.column < 0 || geometry.column >= width) continue;
+			const line = lines[row] ?? " ".repeat(width);
+			const before = sliceColumns(line, 0, geometry.column, true);
+			const after = sliceColumns(line, geometry.column + 1, width - geometry.column - 1, true);
+			const beforePad = " ".repeat(Math.max(0, geometry.column - visibleWidth(before)));
+			const afterPad = " ".repeat(Math.max(0, width - geometry.column - 1 - visibleWidth(after)));
+			lines[row] = `${before}${beforePad}${this.scrollView.scrollbarStyle(" ")}${after}${afterPad}`;
+		}
+	}
+
+	dispose(): void {
+		this.draggingScrollbar = undefined;
+		this.scrollbar = undefined;
+		this.scrollView.updateLayout(this.bodyContentRows, this.bodyViewportRows, EMPTY_RENDER);
+		this.scrollView.setScrollbarActive(false);
+		this.scrollView.setScrollbar("hidden");
+	}
+
+	get viewportRows(): number {
+		return this.bodyViewportRows;
+	}
+
+	get contentRows(): number {
+		return this.bodyContentRows;
+	}
+
+	get scrollbarGeometry(): ScrollbarGeometry | undefined {
+		return this.scrollbar;
+	}
+	/** Return whether an event belongs to the graph scrollbar without mutating it. */
+	isScrollbarInput(data: string): boolean {
+		const event = parseTerminalMouseInput(data);
+		if (!event) return false;
+		if (this.draggingScrollbar) {
+			return event.action === "release" || ((event.buttonCode & 32) !== 0 && (event.buttonCode & 3) === 0);
+		}
+		const geometry = this.scrollbar;
+		return (
+			geometry !== undefined &&
+			event.action === "press" &&
+			(event.buttonCode & 64) === 0 &&
+			(event.buttonCode & 32) === 0 &&
+			(event.buttonCode & 3) === 0 &&
+			event.col === geometry.column &&
+			event.row >= geometry.trackTop &&
+			event.row < geometry.trackTop + geometry.trackHeight
+		);
+	}
+
+	/** Route a scrollbar press, drag, or release to the graph ScrollView. */
+	handleScrollbarInput(data: string): boolean {
+		const event = parseTerminalMouseInput(data);
+		if (!event) return false;
+
+		if (event.action === "release") {
+			if (!this.draggingScrollbar) return false;
+			this.draggingScrollbar = undefined;
+			return true;
+		}
+
+		const moving = (event.buttonCode & 32) !== 0;
+		const leftButton = (event.buttonCode & 3) === 0;
+		if (this.draggingScrollbar && moving && leftButton) {
+			this.scrollToScrollbarRow(event.row);
+			return true;
+		}
+
+		const geometry = this.scrollbar;
+		if (!geometry) return false;
+		if (!isTerminalLeftMousePress(event) || event.col !== geometry.column) return false;
+		if (event.row < geometry.trackTop || event.row >= geometry.trackTop + geometry.trackHeight) return false;
+
+		if (event.row >= geometry.thumbTop && event.row < geometry.thumbTop + geometry.thumbHeight) {
+			this.draggingScrollbar = { grabOffset: event.row - geometry.thumbTop };
+		} else {
+			this.scrollToScrollbarRow(event.row - Math.floor(geometry.thumbHeight / 2));
+		}
+		return true;
+	}
+
+	invalidate(): void {
+		this.root.invalidate();
+	}
+
+	private renderBody(width: number): string[] {
+		const contentRows = this.bodyContentRows;
+		const lines = new Array<string>(contentRows);
+		const top = Math.max(0, Math.min(contentRows, this.scrollView.scrollTop));
+		const rows = Math.max(0, Math.min(this.bodyViewportRows, contentRows - top));
+		const visible = this.callbacks.renderBody(width, top, rows, contentRows);
+		for (let index = 0; index < visible.length && index < rows; index++) {
+			lines[top + index] = visible[index]!;
+		}
+		// pi-tui scans upward from scrollTop for an image that crosses the
+		// viewport edge. A non-empty sentinel stops that scan at the first
+		// hidden row instead of making every frame walk the whole graph.
+		if (top > 0) lines[top - 1] = " ";
+		return lines;
+	}
+
+	private scrollToScrollbarRow(row: number): void {
+		const geometry = this.scrollbar;
+		if (!geometry || geometry.maxScrollTop <= 0) return;
+		const maxThumbTop = Math.max(0, geometry.trackHeight - geometry.thumbHeight);
+		if (maxThumbTop === 0) {
+			this.scrollView.scrollTo(0);
+			return;
+		}
+		const thumbTop = Math.max(
+			geometry.trackTop,
+			Math.min(geometry.trackTop + maxThumbTop, row - (this.draggingScrollbar?.grabOffset ?? 0)),
+		);
+		const ratio = (thumbTop - geometry.trackTop) / maxThumbTop;
+		this.scrollView.scrollTo(Math.round(ratio * geometry.maxScrollTop));
+	}
+}

package/dist/builtin/workflows/src/tui/graph-view-render-helpers.ts

@@ -1,12 +1,6 @@
 import { BOLD, hexBg, hexToAnsi, RESET } from "./color-utils.js";
 import type { GraphCanvas } from "./graph-canvas.js";
-import {
-	COMPACT_HINT_KEYS,
-	HINT_KEYS,
-	MODE_PILL_LABEL,
-	OVERLAY_LINE_COUNT,
-	OVERLAY_VERTICAL_MARGIN_ROWS,
-} from "./graph-view-constants.js";
+import { COMPACT_HINT_KEYS, HINT_KEYS, MODE_PILL_LABEL } from "./graph-view-constants.js";
 import { GraphViewState } from "./graph-view-state.js";
 import { renderOutlinePill } from "./header.js";
 import { NODE_H, NODE_W } from "./layout.js";
@@ -15,62 +9,6 @@ import { OVERLAY_HIDDEN_STATUS_KEYS, WORKFLOW_STATUS_KEY } from "./workflow-stat
 
 /** Low-level overlay geometry, chrome, ANSI canvas, and edge helpers. */
 export abstract class GraphViewRenderHelpers extends GraphViewState {
-	/**
-	 * Number of rows the overlay frame must paint. Pi-tui anchors the
-	 * overlay vertically by counting rendered lines, so to truly fill the
-	 * terminal under `maxHeight: "100%"` the component must emit
-	 * approximately `terminal.rows` lines. When a host reports fewer
-	 * than the legacy 32 rows, honour that shorter viewport where the
-	 * graph chrome can still fit so the bottom status controls are not
-	 * clipped by pi-tui's overlay max-height slicing. A host that doesn't
-	 * surface terminal dimensions keeps the previous stable rectangle.
-	 */
-	protected _overlayLineCount(): number {
-		const reported = this.getViewportRows?.();
-		if (typeof reported !== "number" || !Number.isFinite(reported)) {
-			return OVERLAY_LINE_COUNT;
-		}
-		// Header (3) + one body row + statusline (3) is the absolute
-		// minimum useful frame. Margins are dropped automatically at this
-		// size by `_overlayVerticalMarginRows`.
-		return Math.max(7, Math.floor(reported));
-	}
-
-	/** Rows available for the graph body (between header and statusline). */
-	protected _overlayBodyRows(lineCount: number): number {
-		return Math.max(1, lineCount - 3 /* header */ - 3 /* statusline */);
-	}
-
-	protected _overlayVerticalMarginRows(lineCount = this._overlayLineCount()): number {
-		return lineCount >= 9 ? OVERLAY_VERTICAL_MARGIN_ROWS : 0;
-	}
-
-	protected _overlayPanelLineCount(): number {
-		const lineCount = this._overlayLineCount();
-		const margins = this._overlayVerticalMarginRows(lineCount) * 2;
-		return Math.max(7, lineCount - margins);
-	}
-
-	protected _marginRow(width: number): string {
-		return " ".repeat(width);
-	}
-
-	protected _withVerticalMargins(panelLines: string[], width: number): string[] {
-		const expected = this._overlayLineCount();
-		const marginRows = this._overlayVerticalMarginRows(expected);
-		const panelTarget = this._overlayPanelLineCount();
-		const body = panelLines.slice(0, panelTarget);
-		while (body.length < panelTarget) body.push(this._blankRow(width));
-		const margins = Array.from({ length: marginRows }, () => this._marginRow(width));
-		const lines = [...margins, ...body, ...margins];
-		if (lines.length > expected) return lines.slice(0, expected);
-		while (lines.length < expected) {
-			const insertAt = marginRows > 0 ? Math.max(0, lines.length - marginRows) : lines.length;
-			lines.splice(insertAt, 0, this._blankRow(width));
-		}
-		return lines;
-	}
-
 	/**
 	 * Three-row statusline pinned to the bottom of the overlay. Mirrors
 	 * the header band: `backgroundPanel` chrome, outlined accent pill
@@ -182,11 +120,6 @@ export abstract class GraphViewRenderHelpers extends GraphViewState {
 		return `${bg}${" ".repeat(leftPad)}${RESET}${cardLine}${bg}${" ".repeat(rightPadLen)}${RESET}`;
 	}
 
-	protected _clampGraphScroll(totalRows: number, bodyRows: number): void {
-		const maxOffset = Math.max(0, totalRows - bodyRows);
-		this.graphScrollOffset = Math.max(0, Math.min(maxOffset, this.graphScrollOffset));
-	}
-
 	protected _clampGraphHorizontalScroll(totalCols: number, viewportCols: number): void {
 		const maxOffset = Math.max(0, totalCols - viewportCols);
 		this.graphScrollColOffset = Math.max(0, Math.min(maxOffset, this.graphScrollColOffset));
@@ -204,24 +137,6 @@ export abstract class GraphViewRenderHelpers extends GraphViewState {
 		}
 		this._clampGraphHorizontalScroll(totalCols, viewportCols);
 	}
-
-	protected _scrollFocusedIntoView(frameWidth: number, bodyRows: number, totalRows: number): void {
-		const range = this._focusedGraphRowRange(frameWidth);
-		if (!range) return;
-		if (range.start < this.graphScrollOffset) {
-			this.graphScrollOffset = range.start;
-		} else if (range.end >= this.graphScrollOffset + bodyRows) {
-			this.graphScrollOffset = range.end - bodyRows + 1;
-		}
-		this._clampGraphScroll(totalRows, bodyRows);
-	}
-
-	protected _focusedGraphRowRange(_frameWidth: number): { start: number; end: number } | null {
-		const node = this.cachedLayout[this.focusedIndex];
-		if (!node) return null;
-		return { start: node.y, end: node.y + NODE_H - 1 };
-	}
-
 	/**
 	 * Plot a parent → child edge for the vertical orientation. The edge
 	 * exits from the parent's bottom-centre, runs through a horizontal