@bastani/atomic 0.9.11-alpha.9 → 0.9.11

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

@@ -5,17 +5,18 @@ import {
 	type ExpandedWorkflowStageTarget,
 	expandedStageTarget,
 	expandWorkflowGraph,
+	refreshExpandedWorkflowGraph,
+	sameExpandedWorkflowTopology,
 } from "../shared/expanded-workflow-graph.js";
 import type { Store } from "../shared/store.js";
+import { readGraphStoreSnapshot, subscribeStoreInvalidation } from "../shared/store-observation.js";
 import type { PendingPrompt, RunSnapshot, StageSnapshot, StoreSnapshot } from "../shared/store-types.js";
 import type { GraphTheme } from "./graph-theme.js";
 import { ANIMATION_TICK_MS } from "./graph-view-constants.js";
 import type { GraphViewMode, GraphViewOpts } from "./graph-view-types.js";
-import type { LayoutNode } from "./layout.js";
-import { computeLayout } from "./layout.js";
+import { computeLayout, type LayoutNode, NODE_H, NODE_W } from "./layout.js";
 import { createPromptCardState, type PromptCardState } from "./prompt-card.js";
 import type { SwitcherState } from "./switcher.js";
-import { createToastManager } from "./toast.js";
 
 export interface GraphStageCounts {
 	pending: number;
@@ -41,6 +42,30 @@ interface GraphViewportGeometry {
 	viewportWidth: number;
 }
 
+interface GraphLayoutBand {
+	top: number;
+	bottom: number;
+	nodeIndices: number[];
+}
+
+interface GraphRenderEdge {
+	parentX: number;
+	parentY: number;
+	childX: number;
+	childY: number;
+	top: number;
+	bottom: number;
+	left: number;
+	right: number;
+}
+
+interface GraphRenderGeometry {
+	canvasWidth: number;
+	totalRows: number;
+	bands: GraphLayoutBand[];
+	edges: GraphRenderEdge[];
+}
+
 /** Expansion, focus, prompt, and store-backed layout state for GraphView. */
 export abstract class GraphViewState {
 	protected mode: GraphViewMode;
@@ -66,9 +91,10 @@ export abstract class GraphViewState {
 	protected focusedIndex = 0;
 	protected switcherOpen = false;
 	protected switcherState: SwitcherState = { query: "", selectedIndex: 0 };
-	protected toastManager = createToastManager();
 	protected detailsExpanded = true;
 	protected cachedLayout: LayoutNode[] = [];
+	/** Stages mirrored from `cachedLayout` — shared across card renders. */
+	protected cachedDisplayStages: StageSnapshot[] = [];
 	protected expandedGraph: ExpandedWorkflowGraph = {
 		stages: [],
 		renderStages: [],
@@ -81,9 +107,14 @@ export abstract class GraphViewState {
 	protected graphScrollColOffset = 0;
 	protected graphNodeHitRects: GraphNodeHitRect[] = [];
 	protected lastGraphViewport: GraphViewportGeometry | null = null;
+	protected lastGraphTotalRows = 0;
 	protected lastOverlayFrameWidth = 80;
 	protected pendingEnsureFocusedVisible = true;
 	protected lastAutoFocusedAwaitingInputKey: string | null = null;
+	protected lastBuiltSnapshotVersion: number | null = null;
+	protected topologySnapshot: StoreSnapshot | null = null;
+	protected hasAnimatingStages = false;
+	protected cachedRenderGeometry: GraphRenderGeometry = { canvasWidth: 0, totalRows: 0, bands: [], edges: [] };
 
 	protected _intervalId: ReturnType<typeof setInterval> | null = null;
 	protected _lastGTime: number | null = null;
@@ -107,11 +138,11 @@ export abstract class GraphViewState {
 		this.footerData = opts.footerData;
 		this.getStageQueuedMessageCount = opts.getStageQueuedMessageCount;
 
-		this._unsubscribe = this.store.subscribe((snap) => {
-			this.currentSnapshot = snap;
+		this._unsubscribe = subscribeStoreInvalidation(this.store, () => {
+			this.currentSnapshot = readGraphStoreSnapshot(this.store);
 			this._rebuildLayout();
 		});
-		this.currentSnapshot = this.store.snapshot();
+		this.currentSnapshot = readGraphStoreSnapshot(this.store);
 		this._rebuildLayout();
 
 		// Animation tick: while the overlay is mounted, fire a render
@@ -125,18 +156,35 @@ export abstract class GraphViewState {
 		// gate in place the previous tmux scrollback "ghost overlay"
 		// failure mode does not apply: pi-tui owns the screen buffer
 		// and diff-blits frames in place.
+		//
+		// Skip ticks when nothing is animating (#2100): a large completed
+		// or pending-only graph must not burn ~10 full paints/sec.
 		if (this.mode === "overlay" && this.requestRender) {
 			this._intervalId = setInterval(() => {
+				if (!this._needsAnimationTick()) return;
 				this.requestRender?.();
 			}, ANIMATION_TICK_MS);
 			(this._intervalId as { unref?: () => void }).unref?.();
 		}
 	}
 
+	protected _needsAnimationTick(): boolean {
+		return this.promptState !== null || this.hasAnimatingStages;
+	}
+
 	protected _rebuildLayout(): void {
+		const version = this.currentSnapshot?.version ?? null;
+		// Overlay adapter calls `invalidate()` after GraphView's own store
+		// subscriber already rebuilt for this snapshot — skip the duplicate.
+		if (version !== null && version === this.lastBuiltSnapshotVersion) {
+			return;
+		}
+
 		const run = this._getCurrentRun();
 		if (!run) {
 			this.cachedLayout = [];
+			this.cachedDisplayStages = [];
+			this.cachedRenderGeometry = { canvasWidth: 0, totalRows: 0, bands: [], edges: [] };
 			this.expandedGraph = { stages: [], renderStages: [], tools: [], nodes: [], targets: new Map() };
 			this.focusedIndex = 0;
 			this.graphScrollOffset = 0;
@@ -145,16 +193,109 @@ export abstract class GraphViewState {
 			this.lastGraphViewport = null;
 			this.pendingEnsureFocusedVisible = true;
 			this.promptState = null;
+			this.topologySnapshot = this.currentSnapshot;
+			this.hasAnimatingStages = false;
+			this.lastBuiltSnapshotVersion = version;
 			return;
 		}
 
 		const previousFocusedStageId = this.cachedLayout[this.focusedIndex]?.stage.id;
 		const graphStages = this._graphStages(run);
+		const sameTopology =
+			this.cachedLayout.length === graphStages.length &&
+			this.cachedLayout.length > 0 &&
+			this.cachedLayout.every((node, index) => {
+				const next = graphStages[index];
+				if (!next || node.stage.id !== next.id || node.stage.nodeKind !== next.nodeKind) return false;
+				if (node.stage.parentIds.length !== next.parentIds.length) return false;
+				return node.stage.parentIds.every((parentId, parentIndex) => parentId === next.parentIds[parentIndex]);
+			});
+
+		if (sameTopology) {
+			for (let index = 0; index < this.cachedLayout.length; index++) {
+				this.cachedLayout[index]!.stage = graphStages[index]!;
+			}
+			this.cachedDisplayStages = [...graphStages];
+			this.hasAnimatingStages = graphStages.some(
+				(stage) => stage.status === "running" || stage.status === "awaiting_input",
+			);
+			this._finalizeFocusAndPrompt(run, previousFocusedStageId, true);
+			this.lastBuiltSnapshotVersion = version;
+			return;
+		}
+
 		const nextLayout = computeLayout(graphStages, { orientation: "vertical" });
 		this.cachedLayout = nextLayout;
+		this.cachedDisplayStages = nextLayout.map((node) => node.stage);
+		this.cachedRenderGeometry = this._buildRenderGeometry(nextLayout);
+		this.hasAnimatingStages = graphStages.some(
+			(stage) => stage.status === "running" || stage.status === "awaiting_input",
+		);
 		this.graphNodeHitRects = [];
 		this.lastGraphViewport = null;
+		this._finalizeFocusAndPrompt(run, previousFocusedStageId, false);
+		this.lastBuiltSnapshotVersion = version;
+	}
+
+	private _buildRenderGeometry(layout: readonly LayoutNode[]): GraphRenderGeometry {
+		let canvasWidth = 0;
+		let totalRows = 0;
+		const nodeByStageId = new Map<string, LayoutNode>();
+		const bandsByTop = new Map<number, GraphLayoutBand>();
+		for (let index = 0; index < layout.length; index++) {
+			const node = layout[index]!;
+			canvasWidth = Math.max(canvasWidth, node.x + NODE_W);
+			totalRows = Math.max(totalRows, node.y + NODE_H);
+			nodeByStageId.set(node.stage.id, node);
+			const band = bandsByTop.get(node.y);
+			if (band) band.nodeIndices.push(index);
+			else bandsByTop.set(node.y, { top: node.y, bottom: node.y + NODE_H, nodeIndices: [index] });
+		}
 
+		const edges: GraphRenderEdge[] = [];
+		for (const node of layout) {
+			for (const parentId of node.stage.parentIds) {
+				const parent = nodeByStageId.get(parentId);
+				if (!parent) continue;
+				const parentCol = parent.x + Math.floor(NODE_W / 2);
+				const childCol = node.x + Math.floor(NODE_W / 2);
+				edges.push({
+					parentX: parent.x,
+					parentY: parent.y,
+					childX: node.x,
+					childY: node.y,
+					top: parent.y + NODE_H,
+					bottom: node.y,
+					left: Math.min(parentCol, childCol),
+					right: Math.max(parentCol, childCol) + 1,
+				});
+			}
+		}
+		return {
+			canvasWidth,
+			totalRows,
+			bands: [...bandsByTop.values()].sort((left, right) => left.top - right.top),
+			edges,
+		};
+	}
+
+	protected _firstVisibleLayoutBand(viewportTop: number): number {
+		const bands = this.cachedRenderGeometry.bands;
+		let low = 0;
+		let high = bands.length;
+		while (low < high) {
+			const middle = Math.floor((low + high) / 2);
+			if (bands[middle]!.bottom <= viewportTop) low = middle + 1;
+			else high = middle;
+		}
+		return low;
+	}
+
+	protected _finalizeFocusAndPrompt(
+		run: RunSnapshot,
+		previousFocusedStageId: string | undefined,
+		preserveHitRects: boolean,
+	): void {
 		let focusNeedsReveal = this.pendingEnsureFocusedVisible;
 		// One-shot: if the host passed `initialFocusedStageId`, snap the
 		// cursor to that stage now that the layout exists. The attach shell
@@ -206,6 +347,10 @@ export abstract class GraphViewState {
 			focusNeedsReveal = true;
 		}
 		this.pendingEnsureFocusedVisible = focusNeedsReveal;
+		if (!preserveHitRects && focusNeedsReveal) {
+			this.graphNodeHitRects = [];
+			this.lastGraphViewport = null;
+		}
 		this._syncPromptState(run.pendingPrompt);
 	}
 
@@ -247,9 +392,13 @@ export abstract class GraphViewState {
 	}
 
 	protected _graphStages(run: RunSnapshot): ExpandedWorkflowStage[] {
-		this.expandedGraph = this.currentSnapshot
-			? expandWorkflowGraph(this.currentSnapshot, run.id)
-			: { stages: [], renderStages: [], tools: [], nodes: [], targets: new Map() };
+		const snapshot = this.currentSnapshot;
+		if (!snapshot) return [];
+		const canRefresh =
+			this.topologySnapshot !== null && sameExpandedWorkflowTopology(this.topologySnapshot, snapshot);
+		const refreshed = canRefresh ? refreshExpandedWorkflowGraph(this.expandedGraph, snapshot) : undefined;
+		this.expandedGraph = refreshed ?? expandWorkflowGraph(snapshot, run.id);
+		this.topologySnapshot = snapshot;
 		const stages = [...this.expandedGraph.renderStages];
 		const hasStagePrompt = stages.some(
 			(stage) =>
@@ -258,8 +407,6 @@ export abstract class GraphViewState {
 		);
 		if (!hasStagePrompt) return stages;
 		return stages.filter((stage) => {
-			// Prompt-node injection can leave unstarted author stages in the store
-			// while the prompt node owns focus; hide only these inert placeholders.
 			const isUnstartedPlaceholder =
 				stage.status === "pending" &&
 				stage.startedAt === undefined &&
@@ -324,7 +471,7 @@ export abstract class GraphViewState {
 	}
 
 	protected _displayStages(run: RunSnapshot): StageSnapshot[] {
-		return this.cachedLayout.length > 0 ? this.cachedLayout.map((layoutNode) => layoutNode.stage) : [...run.stages];
+		return this.cachedDisplayStages.length > 0 ? this.cachedDisplayStages : [...run.stages];
 	}
 
 	protected _counts(stages: readonly StageSnapshot[]): GraphStageCounts {

package/dist/builtin/workflows/src/tui/layout.ts

@@ -129,11 +129,17 @@ export function computeLayout(stages: readonly StageSnapshot[], opts: LayoutOpts
 		centreShift.set(depth, Math.round(widestCentre - centre));
 	}
 
+	const rowIndex = new Map<string, number>();
+	for (const ids of colGroups.values()) {
+		for (let i = 0; i < ids.length; i++) {
+			rowIndex.set(ids[i]!, i);
+		}
+	}
+
 	const nodes: LayoutNode[] = [];
 	for (const s of stages) {
 		const col = colMap.get(s.id) ?? 0;
-		const group = colGroups.get(col) ?? [];
-		const row = group.indexOf(s.id);
+		const row = rowIndex.get(s.id) ?? 0;
 		const x =
 			orientation === "vertical" ? row * (NODE_W + colGap) + (centreShift.get(col) ?? 0) : col * (NODE_W + colGap);
 		const y = orientation === "vertical" ? col * (NODE_H + rowGap) : row * (NODE_H + rowGap);

package/dist/builtin/workflows/src/tui/node-card.ts

@@ -30,6 +30,7 @@ import { elapsedStageMs } from "../shared/timing.js";
 import { BOLD, hexBg, hexToAnsi, lerpColor, paint, RESET } from "./color-utils.js";
 import type { GraphTheme } from "./graph-theme.js";
 import { NODE_H, NODE_W } from "./layout.js";
+import { wrapIdentifierLines } from "./run-identity-rows.js";
 import { fmtDuration, statusIcon } from "./status-helpers.js";
 import { truncateToWidth, visibleWidth } from "./text-helpers.js";
 
@@ -131,28 +132,29 @@ function metaText(stage: StageSnapshot): string {
 	return stage.fastMode === true ? `${dependencyText} · fast` : dependencyText;
 }
 
-function shortRunId(runId: string): string {
-	return runId.length <= 8 ? runId : runId.slice(0, 8);
-}
-
-function workflowChildSummaryText(stage: StageSnapshot): string {
+function workflowChildRunRows(stage: StageSnapshot, width: number): string[] {
 	const child = stage.workflowChild ?? stage.workflowChildRun;
-	if (child === undefined) return durationText(stage);
-	return `↳ ${child.workflow}`;
+	if (child === undefined) return [];
+	return wrapIdentifierLines(child.runId, Math.max(1, width), "run ", "").map((row) => `${row.prefix}${row.chunk}`);
 }
 
-function workflowChildMetaText(stage: StageSnapshot): string {
+function workflowChildMetaText(stage: StageSnapshot): string | undefined {
 	const completed = stage.workflowChild;
 	if (completed !== undefined) {
-		const outputCount = Object.keys(completed.outputs).length;
-		const outputs = outputCount === 1 ? "1 out" : `${outputCount} outs`;
-		return `run ${shortRunId(completed.runId)} · ${outputs}`;
+		// #2140 moved the child run id onto its own wrapped row, so the meta
+		// line carries only the output count. Prefer the payload-free
+		// `outputCount` the compact graph projection supplies; fall back to
+		// counting a full `outputs` map on the legacy snapshot path.
+		const outputCount = completed.outputCount ?? Object.keys(completed.outputs).length;
+		return outputCount === 1 ? "1 out" : `${outputCount} outs`;
 	}
+	if (stage.workflowChildRun !== undefined) return "live";
+	return undefined;
+}
 
-	const live = stage.workflowChildRun;
-	if (live !== undefined) return `run ${shortRunId(live.runId)} · live`;
-
-	return metaText(stage);
+function joinCompactStatusMeta(status: string, meta: string, width: number): string {
+	const candidates = [`${status} · ${meta}`, `${status} ·${meta}`, `${status}· ${meta}`, `${status}·${meta}`];
+	return candidates.find((candidate) => visibleWidth(candidate) <= width) ?? meta;
 }
 
 function statusLabel(status: StageStatus): string {
@@ -210,22 +212,23 @@ function buildTitleSlot(
 	focused: boolean,
 	theme: GraphTheme,
 	cardBg: string,
+	compact = false,
 ): { slot: string; visibleWidth: number } {
-	const maxName = Math.max(2, innerWidth - 4);
+	const maxName = Math.max(2, compact ? innerWidth - 1 : innerWidth - 4);
 	const safeName = truncate(name, maxName);
 	if (focused) {
 		// Flanking spaces sit on the accent tab so the pill reads as a
 		// single coloured run. Use `paint` to combine bg + fg + bold +
 		// RESET in one ANSI sequence, then re-prime the card stratum so
 		// the dashes outside the slot stay on the body bg.
-		const tabText = ` ${safeName} `;
+		const tabText = compact ? safeName : ` ${safeName} `;
 		const styled = `${paint(tabText, theme.surface, {
 			bg: theme.accent,
 			bold: true,
 		})}${cardBg}`;
 		return { slot: styled, visibleWidth: visibleWidth(tabText) };
 	}
-	const titleRaw = ` ${safeName} `;
+	const titleRaw = compact ? safeName : ` ${safeName} `;
 	const styled = `${BOLD}${titleRaw}${RESET}${cardBg}`;
 	return { slot: styled, visibleWidth: visibleWidth(titleRaw) };
 }
@@ -251,14 +254,16 @@ export function renderNodeCard(stage: StageSnapshot, opts: NodeCardOpts): string
 	const bg = hexBg(theme.bg);
 	const innerWidth = Math.max(2, width - 2);
 
-	// Title sits inside the top border. Focus adds an accent-coloured
-	// pill to the name slot without adding an extra glyph.
+	// Child workflow boundaries use the compact title path so their workflow
+	// identity remains visible without changing the fixed card geometry.
+	const child = stage.workflowChild ?? stage.workflowChildRun;
 	const { slot: titleSlot, visibleWidth: titleVisibleWidth } = buildTitleSlot(
-		stage.name,
+		child === undefined ? stage.name : `↳ ${child.workflow}`,
 		innerWidth,
 		focused,
 		theme,
 		bg,
+		child !== undefined,
 	);
 	const titleStart = Math.max(1, Math.floor((innerWidth - titleVisibleWidth) / 2));
 	const titleEnd = titleStart + titleVisibleWidth;
@@ -267,17 +272,12 @@ export function renderNodeCard(stage: StageSnapshot, opts: NodeCardOpts): string
 	const top = `${bg}${bc}╭${topMiddle}╮${RESET}`;
 	const bottom = `${bg}${bc}╰${"─".repeat(innerWidth)}╯${RESET}`;
 
-	// Interior — compact status + duration. Child workflow boundary
-	// stages otherwise look like empty completed nodes, so use the first
-	// body row for the child workflow identity and the final row for a
-	// terse child-run summary. This keeps the graph dense while making
-	// the boundary explain what actually ran.
 	const bodyText =
 		stage.nodeKind === "tool"
 			? (stage.error ?? stage.result ?? "durable tool")
 			: stage.status === "blocked"
 				? blockedBadgeText(stage, opts.stages, innerWidth)
-				: workflowChildSummaryText(stage);
+				: durationText(stage);
 	const bodyHex = durationColor(stage.status, theme);
 	const statusText = `${statusIcon(stage.status)} ${stage.toolStatus ?? statusLabel(stage.status)}`;
 	const statusLine =
@@ -292,10 +292,26 @@ export function renderNodeCard(stage: StageSnapshot, opts: NodeCardOpts): string
 			bold: stage.status === "blocked",
 		}) +
 		`${bg}${bc}│${RESET}`;
-	const metaLine =
-		`${bg}${bc}│${RESET}` +
-		centreColored(workflowChildMetaText(stage), innerWidth, theme.dim, bg) +
-		`${bg}${bc}│${RESET}`;
+
+	const contentRows = Math.max(0, height - 2);
+	const metaLine = `${bg}${bc}│${RESET}${centreColored(metaText(stage), innerWidth, theme.dim, bg)}${bg}${bc}│${RESET}`;
+	const childRunLines = workflowChildRunRows(stage, innerWidth).map(
+		(row) => `${bg}${bc}│${RESET}${centreColored(row, innerWidth, theme.dim, bg)}${bg}${bc}│${RESET}`,
+	);
+	const queuedCount = queuedBadgeCount(opts.queuedMessageCount);
+	const childMeta = workflowChildMetaText(stage);
+	const childSummary =
+		childMeta === undefined
+			? undefined
+			: joinCompactStatusMeta(statusText, queuedCount > 0 ? queuedBadgeText(queuedCount) : childMeta, innerWidth);
+	const childSummaryLine =
+		childSummary === undefined
+			? undefined
+			: `${bg}${bc}│${RESET}` +
+				centreColored(childSummary, innerWidth, bodyHex, bg, {
+					bold: stage.status === "running" || stage.status === "awaiting_input",
+				}) +
+				`${bg}${bc}│${RESET}`;
 
 	const interior: string[] =
 		stage.status === "awaiting_input"
@@ -308,29 +324,25 @@ export function renderNodeCard(stage: StageSnapshot, opts: NodeCardOpts): string
 						centreColored("↵ enter to respond", innerWidth, theme.dim, bg) +
 						`${bg}${bc}│${RESET}`,
 				]
-			: [durLine, statusLine, metaLine];
+			: childSummaryLine === undefined
+				? [durLine, statusLine, metaLine]
+				: [...childRunLines, childSummaryLine];
 
 	// A queued steer/follow-up is invisible once the user leaves the stage chat,
 	// so it claims one existing body row rather than competing for space inside a
-	// line that would truncate. Card geometry is unchanged: the row is replaced,
-	// not added. Pick the least useful row: the dim metadata row on an ordinary
-	// card, and the redundant "waiting for response" row on an awaiting-input
-	// card, which keeps its status row and its `↵ enter to respond` action hint.
-	const queuedCount = queuedBadgeCount(opts.queuedMessageCount);
-	const preferredBadgeRow = stage.status === "awaiting_input" ? 1 : interior.length - 1;
+	// line that would truncate. Child boundaries pack it beside status except when
+	// the awaiting-input interior leaves its redundant response row available.
+	const preferredBadgeRow =
+		stage.status === "awaiting_input" ? 1 : childSummaryLine === undefined ? interior.length - 1 : -1;
 
 	// Pad / clip to exactly `height` lines.
-	const contentRows = Math.max(0, height - 2);
 	while (interior.length < contentRows) {
 		interior.push(`${bg}${bc}│${RESET}${bg}${" ".repeat(innerWidth)}${bg}${bc}│${RESET}`);
 	}
-	if (interior.length > contentRows) {
-		interior.length = contentRows;
-	}
+	if (interior.length > contentRows) interior.length = contentRows;
 
-	if (queuedCount > 0 && interior.length > 0) {
-		const badgeRow =
-			preferredBadgeRow >= 0 && preferredBadgeRow < interior.length ? preferredBadgeRow : interior.length - 1;
+	if (queuedCount > 0 && interior.length > 0 && preferredBadgeRow >= 0) {
+		const badgeRow = preferredBadgeRow < interior.length ? preferredBadgeRow : interior.length - 1;
 		interior[badgeRow] =
 			`${bg}${bc}│${RESET}` +
 			centreColored(queuedBadgeText(queuedCount), innerWidth, theme.info, bg, { bold: true }) +

package/dist/builtin/workflows/src/tui/overlay-adapter.ts

@@ -34,6 +34,7 @@ import type { StageControlRegistry } from "../runs/foreground/stage-control-regi
 import { stageControlRegistry as defaultStageControlRegistry } from "../runs/foreground/stage-control-registry.js";
 import type { StageUiBroker } from "../shared/stage-ui-broker.js";
 import type { Store } from "../shared/store.js";
+import { readGraphStoreSnapshot, subscribeStoreInvalidation } from "../shared/store-observation.js";
 import type { StoreSnapshot } from "../shared/store-types.js";
 import { deriveGraphThemeFromPiTheme } from "./graph-theme.js";
 import type { OverlayTerminalOutput } from "./overlay-terminal-modes.js";
@@ -274,7 +275,8 @@ export function buildGraphOverlayAdapter(
 
 	function makeComponent(view: WorkflowAttachPane, tui: PiCustomOverlayFactoryTui): PiCustomComponent {
 		requestMountedRender = () => tui.requestRender?.();
-		const onStoreUpdate = (snapshot: StoreSnapshot): void => {
+		const onStoreUpdate = (): void => {
+			const snapshot = readGraphStoreSnapshot(store);
 			// Always invalidate retained view state so a later reopen renders the
 			// current snapshot — but while the overlay is hidden, never ask the
 			// host to render (#1856): each hidden-overlay render request became
@@ -285,7 +287,7 @@ export function buildGraphOverlayAdapter(
 			refocusVisibleOverlayForAwaitingInput(snapshot);
 			tui.requestRender?.();
 		};
-		const unsubscribe = store.subscribe(onStoreUpdate);
+		const unsubscribe = subscribeStoreInvalidation(store, onStoreUpdate);
 		return {
 			render: (width: number) => view.render(width),
 			handleInput: (data: string) => {