@bastani/atomic 0.9.16-alpha.2 → 0.9.16-alpha.3

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

@@ -1,297 +0,0 @@
-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 lastBodyWidth: number | undefined;
-	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) => {
-			// The ScrollView reserves its scrollbar column from the width it hands
-			// the body, so this is the only place the real body width is known.
-			this.lastBodyWidth = width;
-			return 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);
-		// Content height can depend on the width the body is laid out at, and that
-		// is narrower than the frame whenever the ScrollView reserves its
-		// scrollbar column. Measuring at the frame width clamps the scroll range
-		// to a height the body never produced, which strands its tail rows for
-		// every input path. Measure at the width the body actually received last
-		// time, then reconcile if this frame disagrees; when no column is
-		// reserved the two are already the same width and nothing re-runs.
-		const requestedTop = this.scrollView.scrollTop;
-		const expectedWidth = this.lastBodyWidth ?? safeWidth;
-		let frame = this.renderPass(safeWidth, safeHeight, expectedWidth);
-		const measuredWidth = this.lastBodyWidth ?? safeWidth;
-		if (measuredWidth !== expectedWidth && this.contentRowsFor(measuredWidth) !== this.bodyContentRows) {
-			frame = this.renderPass(safeWidth, safeHeight, measuredWidth, requestedTop);
-		}
-		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,
-		};
-	}
-
-	private contentRowsFor(width: number): number {
-		return Math.max(0, Math.floor(this.callbacks.bodyContentHeight(width, this.bodyViewportRows)));
-	}
-
-	/**
-	 * One full layout pass whose scroll range is measured at `measureWidth`.
-	 *
-	 * `restoreTop` re-applies a scroll position that a previous pass' stale,
-	 * shorter content height clamped away, so reconciling never scrolls the
-	 * user back up a frame.
-	 */
-	private renderPass(safeWidth: number, safeHeight: number, measureWidth: number, restoreTop?: number): LayoutFrame {
-		const requestRender = this.callbacks.requestRender ?? EMPTY_RENDER;
-		this.bodyContentRows = this.contentRowsFor(measureWidth);
-		this.scrollView.updateLayout(this.bodyContentRows, this.bodyViewportRows, requestRender);
-		if (restoreTop !== undefined && this.scrollView.scrollTop < restoreTop) this.scrollView.scrollTo(restoreTop);
-		this.scrollView.setScrollbar(this.bodyContentRows > this.bodyViewportRows ? "always" : "hidden");
-		this.callbacks.beforeFrame?.(this.scrollView, this.bodyViewportRows, this.bodyContentRows, safeWidth);
-		return renderLayoutFrame(this.root, safeWidth, safeHeight, requestRender);
-	}
-
-	/** 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,294 +0,0 @@
-import { BOLD, hexBg, hexToAnsi, RESET } from "./color-utils.js";
-import type { GraphCanvas } from "./graph-canvas.js";
-import {
-	COMPACT_HINT_KEYS,
-	COMPACT_TOOL_DETAIL_HINT_KEYS,
-	HINT_KEYS,
-	MODE_PILL_LABEL,
-	TOOL_DETAIL_HINT_KEYS,
-} from "./graph-view-constants.js";
-import { GraphViewState } from "./graph-view-state.js";
-import { renderOutlinePill } from "./header.js";
-import { APP_ACTION, isKeybindingsLike } from "./keybindings-adapter.js";
-import { NODE_H, NODE_W } from "./layout.js";
-import { sliceColumns, truncateToWidth, visibleWidth } from "./text-helpers.js";
-import { OVERLAY_HIDDEN_STATUS_KEYS, WORKFLOW_STATUS_KEY } from "./workflow-status.js";
-
-export function toolExpandKey(piKeybindings: unknown): string {
-	const keybindings = isKeybindingsLike(piKeybindings) ? piKeybindings : undefined;
-	const keys = keybindings?.getKeys?.(APP_ACTION.toolsExpand);
-	// Missing manager → default. Empty list → explicitly unbound; do not
-	// invent a keyless `expand` label the way `"".join` used to.
-	if (keys === undefined) return "ctrl+o";
-	return keys.filter((key) => key.length > 0).join("/");
-}
-/** Low-level overlay geometry, chrome, ANSI canvas, and edge helpers. */
-export abstract class GraphViewRenderHelpers extends GraphViewState {
-	/**
-	 * Three-row statusline pinned to the bottom of the overlay. Mirrors
-	 * the header band: `backgroundPanel` chrome, outlined accent pill
-	 * flush-left, hints flowing right on the centre row.
-	 */
-	protected _externalStatusText(): string | null {
-		const entries = Array.from(this.footerData?.getExtensionStatuses() ?? [])
-			.filter(
-				([key, value]) =>
-					value.trim().length > 0 &&
-					key !== WORKFLOW_STATUS_KEY &&
-					!key.startsWith(`${WORKFLOW_STATUS_KEY}:`) &&
-					!OVERLAY_HIDDEN_STATUS_KEYS.has(key),
-			)
-			.sort(([a], [b]) => a.localeCompare(b));
-		if (entries.length === 0) return null;
-		return entries.map(([, value]) => value.trim()).join(" · ");
-	}
-
-	protected _renderStatusline(width: number): string[] {
-		const t = this.graphTheme;
-		const chromeBg = hexBg(t.backgroundPanel);
-		const text = hexToAnsi(t.text);
-		const muted = hexToAnsi(t.textMuted);
-		const dim = hexToAnsi(t.dim);
-		const accent = hexToAnsi(t.accent);
-
-		const { top, mid, bot, visibleWidth: pillW } = renderOutlinePill(MODE_PILL_LABEL, t.accent, chromeBg);
-		// Hints use `<key> <label>` segments. Keep the hierarchy transition first,
-		// followed by extension status and secondary graph controls, so width
-		// pressure never hides the way back to main chat.
-		const sep = `${chromeBg}  ${dim}·${RESET}${chromeBg}  `;
-		const leftEdgePad = 1;
-		const rightEdgePad = 2;
-		const hintsBudget = Math.max(0, width - leftEdgePad - pillW - rightEdgePad);
-		const fullHierarchyHint = "ctrl+x return to main chat";
-		// A focused tool node has no stage chat, but Enter now opens its read-only
-		// detail, so it keeps an activation hint of its own instead of losing the
-		// `↵` affordance entirely the way an unfocusable node does. Both lookups
-		// resolve once per frame: the two hint lists below are built eagerly, and
-		// re-resolving focus inside each would double this frame's layout reads.
-		const chatTarget = this.toolDetail === null ? this._focusedStageChatTarget() : undefined;
-		const focusedToolNode = this.toolDetail === null && this._focusedTool() !== undefined;
-		const relabelActivation = (
-			keys: ReadonlyArray<{ key: string; label: string }>,
-			label: string,
-		): Array<{ key: string; label: string }> =>
-			keys.map((hint) => (hint.key === "↵" ? { key: hint.key, label } : hint));
-		const toolDetailExpandKey = toolExpandKey(this.piKeybindings);
-		const expandHint =
-			toolDetailExpandKey.length > 0
-				? [{ key: toolDetailExpandKey, label: this.toolDetailExpanded ? "collapse" : "expand" }]
-				: [];
-		const toolDetailHintKeys = this.toolDetail === null ? [] : [...TOOL_DETAIL_HINT_KEYS, ...expandHint];
-		const compactToolDetailHintKeys =
-			this.toolDetail === null ? [] : [...COMPACT_TOOL_DETAIL_HINT_KEYS, ...expandHint];
-		const availableHintKeys =
-			this.toolDetail !== null
-				? toolDetailHintKeys
-				: focusedToolNode
-					? relabelActivation(HINT_KEYS, "open tool detail")
-					: chatTarget === undefined
-						? HINT_KEYS.filter(({ key }) => key !== "↵")
-						: HINT_KEYS;
-		const availableCompactHintKeys =
-			this.toolDetail !== null
-				? compactToolDetailHintKeys
-				: focusedToolNode
-					? relabelActivation(COMPACT_HINT_KEYS, "tool detail")
-					: chatTarget === undefined
-						? COMPACT_HINT_KEYS.filter(({ key }) => key !== "↵")
-						: COMPACT_HINT_KEYS;
-		const fullHintWidth =
-			this.toolDetail !== null
-				? toolDetailHintKeys.map(({ key, label }) => `${key} ${label}`).join("  ·  ")
-				: fullHierarchyHint;
-		const hintKeys = hintsBudget >= visibleWidth(fullHintWidth) ? availableHintKeys : availableCompactHintKeys;
-		const statusText = this._externalStatusText();
-		const statusSegment = statusText ? [`${accent}${statusText}${RESET}${chromeBg}`] : [];
-		const hintSegments = hintKeys.map(
-			({ key, label }) => `${text}${BOLD}${key}${RESET}${chromeBg} ${muted}${label}${RESET}${chromeBg}`,
-		);
-		const hintsStyledRaw = [hintSegments[0], ...statusSegment, ...hintSegments.slice(1)]
-			.filter((segment): segment is string => segment !== undefined)
-			.join(sep);
-		const hintsStyled = truncateToWidth(hintsStyledRaw, hintsBudget, "");
-		const hintsVisibleLen = visibleWidth(hintsStyled);
-		const fillerVisible = Math.max(0, hintsBudget - hintsVisibleLen);
-		const filler = " ".repeat(fillerVisible);
-		const blankAcross = " ".repeat(Math.max(0, width - leftEdgePad - pillW));
-
-		return [
-			`${chromeBg} ${RESET}${top}${chromeBg}${blankAcross}${RESET}`,
-			`${chromeBg} ${RESET}${mid}${chromeBg}${filler}${hintsStyled}${chromeBg}${" ".repeat(rightEdgePad)}${RESET}`,
-			`${chromeBg} ${RESET}${bot}${chromeBg}${blankAcross}${RESET}`,
-		];
-	}
-
-	/** Blank canvas row — single line of `bg`. */
-	protected _blankRow(width: number): string {
-		return `${hexBg(this.graphTheme.bg)}${" ".repeat(width)}${RESET}`;
-	}
-
-	protected _centerCanvasContent(content: string, width: number): string {
-		const truncated = truncateToWidth(content, width, "…", true);
-		const leftPad = Math.max(0, Math.floor((width - visibleWidth(truncated)) / 2));
-		return `${" ".repeat(leftPad)}${truncated}`;
-	}
-
-	/** Wrap content in a canvas-bg row, padded to `width`. Re-emits the
-	 * bg ANSI right before the trailing fill so any internal `RESET`
-	 * from cards/edges doesn't let the terminal default bleed through. */
-	protected _canvasRow(content: string, width: number): string {
-		const bg = hexBg(this.graphTheme.bg);
-		const truncated = truncateToWidth(content, width, "…", true);
-		const padLen = Math.max(0, width - visibleWidth(truncated));
-		return `${bg}${truncated}${bg}${" ".repeat(padLen)}${RESET}`;
-	}
-
-	/** Pad pre-styled content out to canvas width without truncation.
-	 * Re-emits the body bg ANSI right before the trailing fill so any
-	 * internal RESET inside `content` doesn't leak the terminal default. */
-	protected _padCanvas(content: string, width: number): string {
-		const bg = hexBg(this.graphTheme.bg);
-		const padLen = Math.max(0, width - visibleWidth(content));
-		return `${bg}${content}${bg}${" ".repeat(padLen)}${RESET}`;
-	}
-
-	/**
-	 * Compose a pre-styled card line over a canvas row at `leftPad` columns.
-	 * The base row keeps its `bg` (so background colour matches canvas);
-	 * the card slice replaces the cells starting at `leftPad`, and the
-	 * residual columns to the right are repainted with bg.
-	 *
-	 * We don't try to keep the parts of `base` that fall *under* the card
-	 * — pi-tui paints flat lines, not z-buffered cells, so the card's panel
-	 * background winning is fine.
-	 */
-	protected _overlayCard(_base: string, cardLine: string, leftPad: number, totalWidth: number): string {
-		const bg = hexBg(this.graphTheme.bg);
-		const cardW = visibleWidth(cardLine);
-		const rightPadLen = Math.max(0, totalWidth - leftPad - cardW);
-		return `${bg}${" ".repeat(leftPad)}${RESET}${cardLine}${bg}${" ".repeat(rightPadLen)}${RESET}`;
-	}
-
-	protected _clampGraphHorizontalScroll(totalCols: number, viewportCols: number): void {
-		const maxOffset = Math.max(0, totalCols - viewportCols);
-		this.graphScrollColOffset = Math.max(0, Math.min(maxOffset, this.graphScrollColOffset));
-	}
-
-	protected _scrollFocusedColumnIntoView(viewportCols: number, totalCols: number): void {
-		const node = this.cachedLayout[this.focusedIndex];
-		if (!node) return;
-		const start = node.x;
-		const end = node.x + NODE_W - 1;
-		if (start < this.graphScrollColOffset) {
-			this.graphScrollColOffset = start;
-		} else if (end >= this.graphScrollColOffset + viewportCols) {
-			this.graphScrollColOffset = end - viewportCols + 1;
-		}
-		this._clampGraphHorizontalScroll(totalCols, viewportCols);
-	}
-	/**
-	 * Plot a parent → child edge for the vertical orientation. The edge
-	 * exits from the parent's bottom-centre, runs through a horizontal
-	 * spine half-way down the gap, and re-enters from the child's
-	 * top-centre. Cells are merged by direction set so fan-out, fan-in,
-	 * and crossings produce stable orthogonal junctions instead of
-	 * stacked rounded corners.
-	 */
-	protected _plotEdge(canvas: GraphCanvas, px: number, py: number, cx: number, cy: number, color: string): void {
-		const parentCol = px + Math.floor(NODE_W / 2);
-		const childCol = cx + Math.floor(NODE_W / 2);
-		const parentExitRow = py + NODE_H; // first row below parent's bottom border
-		const childEntryRow = cy - 1; // last row above child's top border
-		if (childEntryRow < parentExitRow) return;
-
-		if (parentCol === childCol) {
-			canvas.vline(parentCol, parentExitRow, childEntryRow, color);
-			return;
-		}
-
-		const spineRow = Math.max(
-			parentExitRow,
-			Math.min(childEntryRow, Math.floor((parentExitRow + childEntryRow) / 2)),
-		);
-
-		// Down stub from parent into the spine row.
-		if (spineRow > parentExitRow) {
-			canvas.vline(parentCol, parentExitRow, spineRow - 1, color);
-		}
-		this._placeJunction(canvas, spineRow, parentCol, ["u", childCol > parentCol ? "r" : "l"], color);
-
-		// Horizontal spine segment.
-		const hloCol = Math.min(parentCol, childCol) + 1;
-		const hhiCol = Math.max(parentCol, childCol) - 1;
-		if (hhiCol >= hloCol) {
-			canvas.hline(spineRow, hloCol, hhiCol, color);
-		}
-		this._placeJunction(canvas, spineRow, childCol, [childCol > parentCol ? "l" : "r", "d"], color);
-
-		// Down stub from spine into child.
-		if (childEntryRow > spineRow) {
-			canvas.vline(childCol, spineRow + 1, childEntryRow, color);
-		}
-	}
-
-	protected _placeJunction(
-		canvas: GraphCanvas,
-		row: number,
-		col: number,
-		newDirs: Array<"u" | "d" | "l" | "r">,
-		color: string,
-	): void {
-		canvas.mergeCell(row, col, newDirs, color);
-	}
-
-	/**
-	 * Split the canvas-rendered edge row at card boundaries into spans of
-	 * `{ startCol, visibleWidth, content }` so the composer can interleave
-	 * cards without colliding.
-	 */
-	protected _edgeRowToCells(line: string): string {
-		return line;
-	}
-
-	/**
-	 * Interleave a single edge row with the node cards that cross it.
-	 * Cards take precedence at their column ranges; edge characters fill
-	 * the gaps. Returns one composed line padded with spaces.
-	 */
-	protected _composeRow(
-		edgeRow: string,
-		cards: Array<{ startCol: number; width: number; line: string }>,
-		_edgeColor: string,
-	): string {
-		const bg = hexBg(this.graphTheme.bg);
-		const sorted = cards.slice().sort((a, b) => a.startCol - b.startCol);
-		let cursor = 0;
-		let out = "";
-		for (const card of sorted) {
-			if (card.startCol > cursor) {
-				// Edge segment up to card start — prepend bg so empty cells
-				// in this stretch keep the body bg instead of falling back
-				// to the terminal default once any prior RESET fired.
-				out += `${bg}${this._edgeSegment(edgeRow, cursor, card.startCol)}`;
-				cursor = card.startCol;
-			}
-			out += card.line;
-			cursor += card.width;
-		}
-		// Trailing edge tail — same bg re-priming.
-		out += `${bg}${this._edgeSegment(edgeRow, cursor, Math.max(cursor, visibleWidth(edgeRow)))}`;
-		return out;
-	}
-
-	protected _edgeSegment(line: string, fromCol: number, toCol: number): string {
-		if (fromCol >= toCol) return "";
-		const segment = this._sliceColumns(line, fromCol, toCol);
-		const visible = visibleWidth(segment);
-		return `${segment}${" ".repeat(Math.max(0, toCol - fromCol - visible))}`;
-	}
-
-	protected _sliceColumns(line: string, fromCol: number, toCol: number): string {
-		if (fromCol >= toCol) return "";
-		return sliceColumns(line, fromCol, toCol - fromCol, true);
-	}
-}