@bastani/atomic 0.9.11-alpha.8 → 0.9.11

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

@@ -1,366 +1,330 @@
-import { GraphCanvas } from "./graph-canvas.js";
+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,
+	COMPACT_HINT_KEYS,
+	HINT_KEYS,
+	MODE_PILL_LABEL,
+	OVERLAY_LINE_COUNT,
+	OVERLAY_VERTICAL_MARGIN_ROWS,
 } from "./graph-view-constants.js";
-import { OVERLAY_HIDDEN_STATUS_KEYS, WORKFLOW_STATUS_KEY } from "./workflow-status.js";
 import { GraphViewState } from "./graph-view-state.js";
 import { renderOutlinePill } from "./header.js";
 import { NODE_H, NODE_W } from "./layout.js";
-import {
-  sliceColumns,
-  truncateToWidth,
-  visibleWidth,
-} from "./text-helpers.js";
-import { BOLD, hexBg, hexToAnsi, RESET } from "./color-utils.js";
+import { sliceColumns, truncateToWidth, visibleWidth } from "./text-helpers.js";
+import { OVERLAY_HIDDEN_STATUS_KEYS, WORKFLOW_STATUS_KEY } from "./workflow-status.js";
 
 /** 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));
-  }
+	/**
+	 * 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 */);
-  }
+	/** 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 _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 _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 _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;
-  }
+	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
-   * 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(" · ");
-  }
+	/**
+	 * 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);
+	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";
-    const availableHintKeys = this._focusedStageChatTarget() === undefined
-      ? HINT_KEYS.filter(({ key }) => key !== "↵")
-      : HINT_KEYS;
-    const availableCompactHintKeys = this._focusedStageChatTarget() === undefined
-      ? COMPACT_HINT_KEYS.filter(({ key }) => key !== "↵")
-      : COMPACT_HINT_KEYS;
-    const hintKeys = hintsBudget >= visibleWidth(fullHierarchyHint)
-      ? 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));
+		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";
+		const availableHintKeys =
+			this._focusedStageChatTarget() === undefined ? HINT_KEYS.filter(({ key }) => key !== "↵") : HINT_KEYS;
+		const availableCompactHintKeys =
+			this._focusedStageChatTarget() === undefined
+				? COMPACT_HINT_KEYS.filter(({ key }) => key !== "↵")
+				: COMPACT_HINT_KEYS;
+		const hintKeys = hintsBudget >= visibleWidth(fullHierarchyHint) ? 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}`,
-    ];
-  }
+		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}`;
-  }
+	/** 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}`;
-  }
+	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}`;
-  }
+	/** 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}`;
-  }
+	/** 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}`;
-  }
+	/**
+	 * 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 _clampGraphScroll(totalRows: number, bodyRows: number): void {
-    const maxOffset = Math.max(0, totalRows - bodyRows);
-    this.graphScrollOffset = Math.max(
-      0,
-      Math.min(maxOffset, this.graphScrollOffset),
-    );
-  }
+	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),
-    );
-  }
+	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);
-  }
+	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);
+	}
 
-  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 _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 };
-  }
+	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
-   * 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;
+	/**
+	 * 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;
-    }
+		if (parentCol === childCol) {
+			canvas.vline(parentCol, parentExitRow, childEntryRow, color);
+			return;
+		}
 
-    const spineRow = Math.max(
-      parentExitRow,
-      Math.min(childEntryRow, Math.floor((parentExitRow + childEntryRow) / 2)),
-    );
+		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);
+		// 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);
+		// 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);
-    }
-  }
+		// 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);
-  }
+	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;
-  }
+	/**
+	 * 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;
-  }
+	/**
+	 * 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 _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);
-  }
+	protected _sliceColumns(line: string, fromCol: number, toCol: number): string {
+		if (fromCol >= toCol) return "";
+		return sliceColumns(line, fromCol, toCol - fromCol, true);
+	}
 }