@posthog/wizard 2.24.1 → 2.26.0

package/dist/{AiOptInRequiredScreen-_33FOcVo.js → terminal-BSiupnOQ.js}

@@ -1,14 +1,14 @@
-import { M as POSTHOG_APP_URL, Q as getSkillsBaseUrl, g as SERVICE_LABELS, s as logToFile, y as getBlockingServiceKeys } from "./debug-DxA_f5QT.js";
-import { n as isTaskStatus } from "./wizard-ui-YdGFRyu_.js";
-import { r as sessionProperties, t as analytics } from "./analytics-CUr82BDl.js";
-import { i as withUtm, n as openTrackedLink } from "./telemetry-ycqCpNPr.js";
-import { t as getOrAskForProjectData } from "./setup-utils-0U-_Md2G.js";
-import { n as getCloudUrlFromRegion } from "./urls-C8aJWvgh.js";
-import { a as fetchUserData, i as fetchSlackConnected } from "./api-CI3Z74NG.js";
+import { $ as getSkillsBaseUrl, M as POSTHOG_APP_URL, g as SERVICE_LABELS, s as logToFile, y as getBlockingServiceKeys } from "./debug-BizeRFR0.js";
+import { n as isTaskStatus } from "./wizard-ui-WZ48rUgr.js";
+import { r as sessionProperties, t as analytics } from "./analytics-BX3LKPch.js";
+import { i as withUtm, n as openTrackedLink } from "./telemetry-BH-MgWPT.js";
+import { t as getOrAskForProjectData } from "./setup-utils-CNWIMZ-d.js";
+import { n as getCloudUrlFromRegion } from "./urls-BuEABcmF.js";
+import { a as fetchUserData, i as fetchSlackConnected } from "./api-DCHci5SD.js";
 import { i as buildSession } from "./wizard-session-G3VWD6hv.js";
-import { m as fetchSkillMenu, y as AUDIT_SEVERITY_STYLE } from "./agent-interface-D1vtN6Wn.js";
-import { c as computeVisibleRange, d as isObjectBlock, f as Colors, l as isClearBlock, p as Icons, s as TextBlock, u as isLinesBlock } from "./posthog-integration-DexZ2uHU.js";
-import { a as PromptLabel, c as PROGRAM_REGISTRY, i as useKeyboardHintsContext, l as Program, m as getKindMeta, n as useKeyBindings, r as KeyboardHintsProvider, t as PickerMenu, u as getProgramConfig } from "./bin.js";
+import { C as AUDIT_SEVERITY_STYLE, h as fetchSkillMenu } from "./agent-interface-Dq_4h2eN.js";
+import { c as computeVisibleRange, d as isObjectBlock, f as Colors, l as isClearBlock, p as Icons, s as TextBlock, u as isLinesBlock } from "./posthog-integration-CAYZdk0r.js";
+import { a as ConfirmButton, d as getProgramConfig, i as useKeyboardHintsContext, l as PROGRAM_REGISTRY, m as getKindMeta, n as useKeyBindings, o as PromptLabel, r as KeyboardHintsProvider, t as PickerMenu, u as Program } from "./bin.js";
 import { n as AVAILABLE_FEATURES, o as isAllFeaturesSelected, t as ALL_FEATURE_VALUES } from "./defaults-BNWIWzjc.js";
 import opn from "opn";
 import * as fs$1 from "fs";
@@ -205,6 +205,7 @@ var WizardStore = class {
 	$learnCardBlockIdx = atom(0);
 	$learnCardComplete = atom(false);
 	$version = atom(0);
+	$currentStage = atom(null);
 	_onTasksChanged = null;
 	/** Last screen seen — used to detect screen transitions for analytics. */
 	_lastScreen = null;
@@ -337,6 +338,19 @@ var WizardStore = class {
 	get eventPlan() {
 		return this.$eventPlan.get();
 	}
+	get currentStage() {
+		return this.$currentStage.get();
+	}
+	/** No-op when the stage hasn't changed, so `startedAt` survives across
+	*  re-renders and tab switches and measures real stage time. */
+	setCurrentStage(stage) {
+		if (this.$currentStage.get()?.stage === stage) return;
+		this.$currentStage.set({
+			stage,
+			startedAt: Date.now()
+		});
+		this.emitChange();
+	}
 	get statusExpanded() {
 		return this.$statusExpanded.get();
 	}
@@ -804,7 +818,7 @@ const LoadingBox = ({ message }) => {
 * Extracted from StatusTab logic.
 */
 const ProgressList = ({ items, title }) => {
-	const completed = items.filter((t) => t.status === "completed").length;
+	const resolved = items.filter((t) => t.status === "completed" || t.status === "skipped").length;
 	const total = items.length;
 	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
@@ -815,14 +829,16 @@ const ProgressList = ({ items, title }) => {
 			}), /* @__PURE__ */ jsx(Text, { children: " " })] }),
 			items.length === 0 && /* @__PURE__ */ jsx(LoadingBox, { message: "Analyzing project..." }),
 			items.map((item, i) => {
+				const skipped = item.status === "skipped";
 				const icon = item.status === "completed" ? Icons.squareFilled : item.status === "in_progress" ? Icons.triangleRight : Icons.squareOpen;
 				const color = item.status === "completed" ? Colors.success : item.status === "in_progress" ? Colors.primary : Colors.muted;
-				const label = item.status === "in_progress" && item.activeForm ? item.activeForm : item.label;
+				const label = skipped ? `${item.label} (skipped)` : item.status === "in_progress" && item.activeForm ? item.activeForm : item.label;
 				return /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
 					color,
 					children: icon
 				}), /* @__PURE__ */ jsxs(Text, {
-					dimColor: item.status === "pending",
+					dimColor: item.status === "pending" || skipped,
+					strikethrough: skipped,
 					children: [" ", label]
 				})] }, i);
 			}),
@@ -831,7 +847,7 @@ const ProgressList = ({ items, title }) => {
 				gap: 1,
 				children: [/* @__PURE__ */ jsx(Spinner, {}), /* @__PURE__ */ jsx(Text, {
 					dimColor: true,
-					children: completed < total ? `Progress: ${completed}/${total} completed` : "Cleaning up..."
+					children: resolved < total ? `Progress: ${resolved}/${total} completed` : "Cleaning up..."
 				})]
 			})
 		]
@@ -872,8 +888,11 @@ function useStdoutDimensions() {
 * GroupedPickerMenu — Multi-select with category headers.
 *
 * Renders groups of options with bold category labels.
-* Arrow keys navigate selectable items (headers are skipped),
-* space toggles, "a" toggles all, enter submits.
+* Arrow keys navigate selectable items (headers are skipped) and the Confirm
+* button below them; enter toggles the focused option, "a" toggles all, and
+* moving onto the Confirm button and pressing enter submits. Space is kept as
+* an undocumented alias for enter. Shares the interaction model with
+* PickerMenu mode="multi".
 *
 * When content exceeds available terminal height, the list scrolls
 * to keep the focused item visible with up/down indicators.
@@ -888,8 +907,12 @@ function truncateWithEllipsis(text, maxWidth) {
 }
 /** Rows consumed by chrome outside this component (title bar, screen padding, etc.) */
 const CHROME_OVERHEAD = 10;
-/** Rows used by the prompt label + marginTop before content (hint text moved to KeyboardHintsBar). */
-const MENU_CHROME = 2;
+/**
+* Rows used by the prompt label + marginTop before content (hint text moved to
+* KeyboardHintsBar) plus the Confirm button below the list: marginTop (1) +
+* single border top/bottom (2) + button text (1).
+*/
+const MENU_CHROME = 6;
 /** Count the visual rows occupied by rows[start..end), accounting for header margins. */
 function countVisualRows(rows, start, end) {
 	let count = 0;
@@ -947,6 +970,7 @@ const GroupedPickerMenu = ({ message, groups, initialSelected, onSelect }) => {
 	const selectableIndices = useMemo(() => rows.map((r, i) => r.kind === "option" ? i : -1).filter((i) => i >= 0), [rows]);
 	const allValues = useMemo(() => rows.filter((r) => r.kind === "option").map((r) => r.value), [rows]);
 	const [focusedSelectable, setFocusedSelectable] = useState(0);
+	const [onButton, setOnButton] = useState(false);
 	const [selected, setSelected] = useState(() => new Set(initialSelected ?? allValues));
 	const [scrollOffset, setScrollOffset] = useState(0);
 	const focusedRowIdx = selectableIndices[focusedSelectable] ?? 0;
@@ -959,23 +983,32 @@ const GroupedPickerMenu = ({ message, groups, initialSelected, onSelect }) => {
 			label: "↑↓",
 			action: "navigate",
 			handler: (_input, key) => {
-				let newFocused = focusedSelectable;
-				if (key.upArrow) newFocused = focusedSelectable > 0 ? focusedSelectable - 1 : selectableIndices.length - 1;
-				if (key.downArrow) newFocused = focusedSelectable < selectableIndices.length - 1 ? focusedSelectable + 1 : 0;
-				if (newFocused !== focusedSelectable) {
-					setFocusedSelectable(newFocused);
+				const last = selectableIndices.length - 1;
+				const moveTo = (target) => {
+					setOnButton(false);
+					setFocusedSelectable(target);
 					if (needsScroll) {
-						const newFocusedRowIdx = selectableIndices[newFocused] ?? 0;
-						setScrollOffset((prev) => adjustScrollOffset(prev, newFocusedRowIdx, rows, effectiveBudget));
+						const rowIdx = selectableIndices[target] ?? 0;
+						setScrollOffset((prev) => adjustScrollOffset(prev, rowIdx, rows, effectiveBudget));
 					}
-				}
+				};
+				if (key.upArrow) if (onButton) moveTo(last);
+				else if (focusedSelectable > 0) moveTo(focusedSelectable - 1);
+				else setOnButton(true);
+				if (key.downArrow) if (onButton) moveTo(0);
+				else if (focusedSelectable < last) moveTo(focusedSelectable + 1);
+				else setOnButton(true);
 			}
 		},
 		{
-			match: "space",
-			label: "space",
-			action: "toggle",
+			match: ["space", "return"],
+			label: "enter",
+			action: "select",
 			handler: () => {
+				if (onButton) {
+					onSelect([...selected]);
+					return;
+				}
 				const row = rows[selectableIndices[focusedSelectable] ?? 0];
 				if (row?.kind === "option") setSelected((prev) => {
 					const next = new Set(prev);
@@ -996,14 +1029,6 @@ const GroupedPickerMenu = ({ message, groups, initialSelected, onSelect }) => {
 					return new Set(allValues);
 				});
 			}
-		},
-		{
-			match: "return",
-			label: "enter",
-			action: "confirm",
-			handler: () => {
-				onSelect([...selected]);
-			}
 		}
 	]);
 	const visibleStart = needsScroll ? scrollOffset : 0;
@@ -1013,56 +1038,67 @@ const GroupedPickerMenu = ({ message, groups, initialSelected, onSelect }) => {
 	const hiddenBelow = needsScroll ? selectableIndices.filter((s) => s >= visibleEnd).length : 0;
 	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
-		children: [/* @__PURE__ */ jsx(PromptLabel, { message }), /* @__PURE__ */ jsxs(Box, {
-			flexDirection: "column",
-			marginTop: 1,
-			marginLeft: 2,
-			children: [
-				needsScroll && /* @__PURE__ */ jsx(Text, {
-					dimColor: true,
-					children: hiddenAbove > 0 ? `\u2191 ${hiddenAbove} more` : " "
-				}),
-				visibleRows.map((row, relIdx) => {
-					const absIdx = visibleStart + relIdx;
-					if (row.kind === "header") return /* @__PURE__ */ jsx(Box, {
-						marginTop: relIdx > 0 && absIdx > 0 ? 1 : 0,
-						children: /* @__PURE__ */ jsx(Text, {
-							bold: true,
-							dimColor: true,
-							children: row.label
-						})
-					}, `h-${absIdx}`);
-					const isFocused = focusedRowIdx === absIdx;
-					const isSelected = selected.has(row.value);
-					const checkbox = isSelected ? Icons.squareFilled : Icons.squareOpen;
-					const label = truncateWithEllipsis(row.hint ? `${row.label} (${row.hint})` : row.label, labelWidth);
-					return /* @__PURE__ */ jsxs(Box, {
-						gap: 1,
-						marginLeft: 1,
-						children: [/* @__PURE__ */ jsx(Text, {
-							color: isSelected ? "white" : Colors.muted,
-							dimColor: !isFocused && !isSelected,
-							children: checkbox
-						}), /* @__PURE__ */ jsx(Box, {
-							flexGrow: 1,
-							flexShrink: 1,
-							overflow: "hidden",
+		children: [
+			/* @__PURE__ */ jsx(PromptLabel, { message }),
+			/* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				marginTop: 1,
+				marginLeft: 2,
+				children: [
+					needsScroll && /* @__PURE__ */ jsx(Text, {
+						dimColor: true,
+						children: hiddenAbove > 0 ? `\u2191 ${hiddenAbove} more` : " "
+					}),
+					visibleRows.map((row, relIdx) => {
+						const absIdx = visibleStart + relIdx;
+						if (row.kind === "header") return /* @__PURE__ */ jsx(Box, {
+							marginTop: relIdx > 0 && absIdx > 0 ? 1 : 0,
 							children: /* @__PURE__ */ jsx(Text, {
-								color: isFocused ? Colors.accent : void 0,
-								bold: isFocused,
-								dimColor: !isFocused,
-								wrap: "truncate",
-								children: label
+								bold: true,
+								dimColor: true,
+								children: row.label
 							})
-						})]
-					}, row.value);
-				}),
-				needsScroll && /* @__PURE__ */ jsx(Text, {
-					dimColor: true,
-					children: hiddenBelow > 0 ? `\u2193 ${hiddenBelow} more` : " "
+						}, `h-${absIdx}`);
+						const isFocused = !onButton && focusedRowIdx === absIdx;
+						const isSelected = selected.has(row.value);
+						const checkbox = isSelected ? Icons.squareFilled : Icons.squareOpen;
+						const label = truncateWithEllipsis(row.hint ? `${row.label} (${row.hint})` : row.label, labelWidth);
+						return /* @__PURE__ */ jsxs(Box, {
+							gap: 1,
+							marginLeft: 1,
+							children: [/* @__PURE__ */ jsx(Text, {
+								color: isSelected ? "white" : Colors.muted,
+								dimColor: !isFocused && !isSelected,
+								children: checkbox
+							}), /* @__PURE__ */ jsx(Box, {
+								flexGrow: 1,
+								flexShrink: 1,
+								overflow: "hidden",
+								children: /* @__PURE__ */ jsx(Text, {
+									color: isFocused ? Colors.accent : void 0,
+									bold: isFocused,
+									dimColor: !isFocused,
+									wrap: "truncate",
+									children: label
+								})
+							})]
+						}, row.value);
+					}),
+					needsScroll && /* @__PURE__ */ jsx(Text, {
+						dimColor: true,
+						children: hiddenBelow > 0 ? `\u2193 ${hiddenBelow} more` : " "
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				marginLeft: 2,
+				children: /* @__PURE__ */ jsx(ConfirmButton, {
+					focused: onButton,
+					count: selected.size
 				})
-			]
-		})]
+			})
+		]
 	});
 };
 //#endregion
@@ -1191,6 +1227,107 @@ const ModalOverlay = ({ borderColor, title, titleColor, width = 68, children, fe
 	});
 };
 //#endregion
+//#region src/ui/tui/primitives/link-helpers.ts
+/**
+* Link-rendering helpers for terminal prompts.
+*
+* Terminals that auto-linkify text scan *visual* lines, so a URL the TUI wraps
+* across lines — or pads with box-border characters — gets a wrong click
+* target: the terminal opens half a URL, or one stitched back together with
+* border glyphs and padding.
+*
+* The fix is an explicit OSC 8 hyperlink: the escape carries the exact target
+* out of band, independent of the visible layout, and Ink's wrap re-emits it on
+* every wrapped line — so the click target stays correct even when the URL
+* wraps to fit the overlay. Each standalone URL gets its own line so the escape
+* brackets exactly one URL. Terminals without OSC 8 support ignore the escape
+* and show the visible text.
+*/
+const ESC = String.fromCharCode(27);
+const BEL = String.fromCharCode(7);
+const OSC_8 = `${ESC}]8;;`;
+/** Matches an http(s) URL run (no surrounding whitespace). */
+const URL_RUN = /https?:\/\/[^\s]+/g;
+/** A line whose entire (trimmed) content is a single URL. */
+const STANDALONE_URL_LINE = /^https?:\/\/\S+$/;
+/** Trailing characters that are punctuation around a URL, not part of it. */
+const TRAILING_PUNCTUATION = /[.,;:!?)\]}>'"]+$/;
+function trimTrailingPunctuation(url) {
+	return url.replace(TRAILING_PUNCTUATION, "");
+}
+/**
+* Wrap `label` (defaults to the URL) in an OSC 8 hyperlink escape pointing
+* at `url`. Terminals that support OSC 8 make the whole run clickable to the
+* exact `url`; terminals that don't render `label` as plain text.
+*/
+function osc8Hyperlink(url, label = url) {
+	return `${OSC_8}${url}${BEL}${label}${OSC_8}${BEL}`;
+}
+/** Extract every http(s) URL in `text`, trailing punctuation removed. */
+function extractUrls(text) {
+	return (text.match(URL_RUN) ?? []).map(trimTrailingPunctuation);
+}
+/**
+* Split prompt text into renderable segments, breaking out any line that is
+* *solely* a URL into its own `url` segment. Consecutive non-URL lines stay
+* grouped in one `text` segment (newlines preserved) so paragraph spacing is
+* unchanged. URLs that appear inline within prose are left in the text
+* segment — only standalone-line URLs are special-cased, which is how the
+* wizard's prompts present links a user is meant to open.
+*/
+function splitPromptIntoSegments(text) {
+	const segments = [];
+	let buffer = [];
+	const flush = () => {
+		if (buffer.length > 0) {
+			segments.push({
+				type: "text",
+				value: buffer.join("\n")
+			});
+			buffer = [];
+		}
+	};
+	for (const line of text.split("\n")) {
+		const trimmed = line.trim();
+		if (STANDALONE_URL_LINE.test(trimmed)) {
+			flush();
+			segments.push({
+				type: "url",
+				value: trimTrailingPunctuation(trimmed)
+			});
+		} else buffer.push(line);
+	}
+	flush();
+	return segments;
+}
+//#endregion
+//#region src/ui/tui/primitives/LinkText.tsx
+/**
+* LinkText — renders prompt text with standalone URLs as OSC 8 hyperlinks.
+*
+* Each URL gets its own line, wrapped (`wrap="wrap"`) so the full URL is shown
+* within the overlay instead of truncated — the user can read and select all of
+* it. Ink's wrap (wrap-ansi) re-emits the OSC 8 escape on every wrapped visual
+* line, so the click target stays the exact, full URL no matter where the
+* visible text breaks. A manual selection of a wrapped line still picks up the
+* line break, so for a clean copy `WizardAskScreen` auto-copies a sole URL to
+* the clipboard. Prose renders unchanged.
+*
+* Used by the `wizard_ask` overlay only for programs that opt into rich link
+* rendering (see `PendingQuestion.richLinks`). Other flows are untouched.
+*/
+const LinkText = ({ text }) => {
+	return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		children: splitPromptIntoSegments(text).map((segment, i) => segment.type === "url" ? /* @__PURE__ */ jsx(Text, {
+			color: Colors.accent,
+			underline: true,
+			wrap: "wrap",
+			children: osc8Hyperlink(segment.value)
+		}, i) : /* @__PURE__ */ jsx(Text, { children: segment.value }, i))
+	});
+};
+//#endregion
 //#region src/ui/tui/primitives/LogViewer.tsx
 /**
 * LogViewer — Real-time log tail, pinned to available terminal height.
@@ -1203,8 +1340,10 @@ const ModalOverlay = ({ borderColor, title, titleColor, width = 68, children, fe
 * a log that grows into the hundreds of MB, producing OOM-grade allocation
 * pressure on V8's heap.
 */
-/** Rows consumed by TitleBar + spacer + ScreenContainer padding + status bar + tab bar */
-const CHROME_ROWS$1 = 8;
+/** Rows consumed by TitleBar + spacer + ScreenContainer padding + status bar +
+*  tab bar, with a couple rows of headroom so the tail never crowds the status
+*  bar below it. */
+const CHROME_ROWS$1 = 10;
 /** Bytes read from the end of the log per refresh — large enough to contain
 *  any practical visible window of lines, small enough to allocate cheaply. */
 const TAIL_BYTES = 256 * 1024;
@@ -2063,7 +2202,14 @@ const LearnCard = ({ store, blocks, onComplete }) => {
 * Reactively shows/hides tips based on discovered features.
 * Supports toggling additional features via key bindings.
 */
-const TIPS = [
+/**
+* The default deck — generic PostHog onboarding tips, shown for any
+* program that doesn't supply its own via `ProgramConfig.getTips`.
+* Program-specific copy (e.g. the self-driving scout/source
+* explainers) lives in that program's content, not here — this stays the
+* neutral fallback.
+*/
+const DEFAULT_TIPS = [
 	{
 		id: "persons",
 		title: "You can also track people and groups with PostHog",
@@ -2101,9 +2247,9 @@ const TIPS = [
 		}
 	}
 ];
-const TipsCard = ({ store }) => {
+const TipsCard = ({ store, tips = DEFAULT_TIPS }) => {
 	useInput((input) => {
-		for (const tip of TIPS) if (tip.toggle && input.toLowerCase() === tip.toggle.key && (!tip.visible || tip.visible(store)) && !tip.toggle.isEnabled(store)) store.enableFeature(tip.toggle.feature);
+		for (const tip of tips) if (tip.toggle && input.toLowerCase() === tip.toggle.key && (!tip.visible || tip.visible(store)) && !tip.toggle.isEnabled(store)) store.enableFeature(tip.toggle.feature);
 	});
 	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
@@ -2115,7 +2261,7 @@ const TipsCard = ({ store }) => {
 				children: "Tips"
 			}),
 			/* @__PURE__ */ jsx(Box, { height: 1 }),
-			TIPS.filter((tip) => !tip.visible || tip.visible(store)).map((tip) => /* @__PURE__ */ jsxs(Box, {
+			tips.filter((tip) => !tip.visible || tip.visible(store)).map((tip) => /* @__PURE__ */ jsxs(Box, {
 				flexDirection: "column",
 				marginBottom: 1,
 				children: [/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsxs(Text, {
@@ -2157,6 +2303,782 @@ const TipsCard = ({ store }) => {
 	});
 };
 //#endregion
+//#region src/ui/tui/hooks/useTick.ts
+/**
+* useTick — forces a re-render every `intervalMs`. Returns a monotonically
+* increasing counter, which is rarely needed — most callers just want the
+* re-render side effect.
+*/
+function useTick(intervalMs) {
+	const [tick, setTick] = useState(0);
+	useEffect(() => {
+		const id = setInterval(() => setTick((t) => t + 1), intervalMs);
+		return () => clearInterval(id);
+	}, [intervalMs]);
+	return tick;
+}
+//#endregion
+//#region src/ui/tui/components/visualizer/palette.ts
+const VISUALIZER_PALETTE = {
+	fade: "#0E7A0E",
+	bright: "#7CFF7C",
+	mid: "#22D622",
+	head: "#E6FFE6",
+	book: [
+		"#22D622",
+		"#7CFF7C",
+		"#5BE05B",
+		"#A0F0A0",
+		"#36B536"
+	],
+	deleteRed: "#D63B22",
+	upGreen: "#7CFF7C"
+};
+//#endregion
+//#region src/ui/tui/components/visualizer/panel.tsx
+/**
+* Shared scaffolding for the phase visuals — Matrix-green color, common
+* VisualProps shape, and the rounded `Panel` shell every visual sits in.
+*
+* Visuals each render their own grid then wrap it in `<Panel>` so phase
+* transitions stay visually continuous.
+*/
+const MATRIX_FADE = VISUALIZER_PALETTE.fade;
+const Panel = ({ children }) => /* @__PURE__ */ jsx(Box, {
+	flexDirection: "column",
+	borderStyle: "round",
+	borderColor: MATRIX_FADE,
+	children
+});
+//#endregion
+//#region src/ui/tui/components/visualizer/MatrixRain.tsx
+/**
+* MatrixRain — code-rain visual used for the codebase-scan phase.
+*
+* Independent of the phase orchestrator so it can be reused elsewhere
+* (e.g. standalone in a demo). `bordered` toggles the rounded green frame.
+*/
+const { head: MATRIX_HEAD, bright: MATRIX_BRIGHT, mid: MATRIX_MID } = VISUALIZER_PALETTE;
+const DEFAULT_TICK_MS = 110;
+const DEFAULT_MAX_TAIL = 7;
+const RAIN_GLYPHS = "ｦｧｨｩｪｫｬｭｮｯｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ0123456789Z<>=*+:.";
+function pickGlyph() {
+	return RAIN_GLYPHS[Math.floor(Math.random() * 73)];
+}
+function makeRainColumn(height, maxTail) {
+	return {
+		headY: -Math.random() * height,
+		speed: .3 + Math.random() * .9,
+		tail: 3 + Math.floor(Math.random() * (maxTail - 2)),
+		glyphs: /* @__PURE__ */ new Map(),
+		dormant: Math.floor(Math.random() * 18)
+	};
+}
+function tickRainColumn(col, height, maxTail) {
+	if (col.dormant > 0) return {
+		...col,
+		dormant: col.dormant - 1
+	};
+	const next = col.headY + col.speed;
+	if (next > height + col.tail) return makeRainColumn(height, maxTail);
+	const glyphs = new Map(col.glyphs);
+	for (let y = Math.max(0, Math.ceil(col.headY)); y <= Math.min(Math.floor(next), height - 1); y++) glyphs.set(y, pickGlyph());
+	if (glyphs.size > 0 && Math.random() < .22) {
+		const keys = [...glyphs.keys()];
+		const k = keys[Math.floor(Math.random() * keys.length)];
+		glyphs.set(k, pickGlyph());
+	}
+	return {
+		...col,
+		headY: next,
+		glyphs
+	};
+}
+const MatrixRain = ({ width, height, tickMs = DEFAULT_TICK_MS, maxTail = DEFAULT_MAX_TAIL, bordered = true }) => {
+	const columnsRef = useRef(Array.from({ length: width }, () => makeRainColumn(height, maxTail)));
+	const [, setTick] = useState(0);
+	useEffect(() => {
+		const interval = setInterval(() => {
+			columnsRef.current = columnsRef.current.map((c) => tickRainColumn(c, height, maxTail));
+			setTick((t) => t + 1);
+		}, tickMs);
+		return () => clearInterval(interval);
+	}, [
+		height,
+		maxTail,
+		tickMs
+	]);
+	const columns = columnsRef.current;
+	const body = Array.from({ length: height }).map((_, y) => /* @__PURE__ */ jsx(Box, { children: columns.map((col, x) => {
+		const glyph = col.glyphs.get(y);
+		if (!glyph) return /* @__PURE__ */ jsx(Text, { children: " " }, x);
+		const dist = col.headY - y;
+		if (dist < 0 || dist > col.tail) return /* @__PURE__ */ jsx(Text, { children: " " }, x);
+		if (dist < 1) return /* @__PURE__ */ jsx(Text, {
+			bold: true,
+			color: MATRIX_HEAD,
+			children: glyph
+		}, x);
+		if (dist < 2) return /* @__PURE__ */ jsx(Text, {
+			color: MATRIX_BRIGHT,
+			children: glyph
+		}, x);
+		if (dist < col.tail * .55) return /* @__PURE__ */ jsx(Text, {
+			color: MATRIX_MID,
+			children: glyph
+		}, x);
+		return /* @__PURE__ */ jsx(Text, {
+			color: MATRIX_FADE,
+			dimColor: true,
+			children: glyph
+		}, x);
+	}) }, y));
+	if (!bordered) return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		children: body
+	});
+	return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		borderStyle: "round",
+		borderColor: MATRIX_FADE,
+		children: body
+	});
+};
+//#endregion
+//#region src/ui/tui/components/visualizer/LibraryShelf.tsx
+/**
+* LibraryShelf — skill-selection phase.
+*
+* A row of book spines. One spine peels forward each cycle, the chosen
+* title hovers next to it, then it slides home and the next one is picked.
+*/
+const BOOK_LABELS = [
+	"nx",
+	"rt",
+	"sv",
+	"fl",
+	"jg",
+	"rb",
+	"go",
+	"dj",
+	"fa",
+	"lv",
+	"ts",
+	"py"
+];
+const BOOK_COLORS = VISUALIZER_PALETTE.book;
+const LibraryShelf = ({ width, height }) => {
+	const tick = useTick(380);
+	const bookCount = Math.min(Math.floor((width - 2) / 2), BOOK_LABELS.length);
+	const cyclePos = tick % (bookCount * 4);
+	const selectedIdx = Math.floor(cyclePos / 4);
+	const phase = cyclePos % 4;
+	const offset = phase === 0 ? 0 : phase === 1 ? 1 : phase === 2 ? 2 : 1;
+	const wobble = phase === 2 && tick % 2 === 0 ? 1 : 0;
+	const shelfY = Math.floor(height / 2) - 1;
+	const rows = Array.from({ length: height }, () => new Array(width).fill(" "));
+	for (let i = 0; i < bookCount; i++) {
+		const x = 1 + i * 2;
+		const isSelected = i === selectedIdx;
+		const shift = isSelected ? offset : 0;
+		const wob = isSelected && wobble ? -1 : 0;
+		if (x + shift >= width) continue;
+		rows[shelfY - 1][x + shift] = "█";
+		rows[shelfY][x + shift] = BOOK_LABELS[i][0];
+		rows[shelfY + 1][x + shift] = BOOK_LABELS[i][1];
+		rows[shelfY + 2 + wob]?.[x + shift] !== void 0 && (rows[shelfY + 2 + wob][x + shift] = "█");
+	}
+	const boardY = shelfY + 3;
+	if (boardY < height) for (let x = 0; x < width; x++) rows[boardY][x] = "─";
+	if (phase === 2) {
+		const labelStartX = 1 + selectedIdx * 2 + 4;
+		const labelText = BOOK_LABELS[selectedIdx] + "-app";
+		for (let c = 0; c < labelText.length && labelStartX + c < width; c++) rows[shelfY][labelStartX + c] = labelText[c];
+		if (labelStartX - 1 < width && labelStartX - 1 >= 0) rows[shelfY][labelStartX - 1] = "▶";
+	}
+	return /* @__PURE__ */ jsx(Panel, { children: rows.map((row, y) => /* @__PURE__ */ jsx(Box, { children: row.map((ch, x) => {
+		if (ch === " ") return /* @__PURE__ */ jsx(Text, { children: " " }, x);
+		if (ch === "─") return /* @__PURE__ */ jsx(Text, {
+			color: MATRIX_FADE,
+			dimColor: true,
+			children: "─"
+		}, x);
+		if (ch === "▶") return /* @__PURE__ */ jsx(Text, {
+			bold: true,
+			color: VISUALIZER_PALETTE.head,
+			children: "▶"
+		}, x);
+		const booksColor = BOOK_COLORS[(Math.floor((x - 1) / 2) + 17 * y) % BOOK_COLORS.length];
+		const isSel = x === 1 + selectedIdx * 2 + offset;
+		return /* @__PURE__ */ jsx(Text, {
+			bold: isSel,
+			color: isSel ? VISUALIZER_PALETTE.head : booksColor,
+			children: ch
+		}, x);
+	}) }, y)) });
+};
+//#endregion
+//#region src/ui/tui/components/visualizer/CrateStack.tsx
+/**
+* CrateStack — dependency-install phase.
+*
+* Boxes drop from the top and stack at the bottom. Each new arrival lands
+* with a tiny shake.
+*/
+const PACKAGE_NAMES = [
+	"posthog-js",
+	"posthog-py",
+	"posthog-rb",
+	"posthog-go",
+	"posthog-node",
+	"react-ph",
+	"next-ph",
+	"svelte-ph",
+	"ph-mcp",
+	"ph-ai"
+];
+const CRATE_W = Math.max(...PACKAGE_NAMES.map((n) => n.length)) + 2;
+const CrateStack = ({ width, height }) => {
+	const tick = useTick(95);
+	const state = useRef({
+		stack: [],
+		falling: null,
+		spawnCooldown: 0
+	}).current;
+	const crateW = CRATE_W;
+	const crateH = 1;
+	const floorY = height - 1;
+	if (state.falling) {
+		state.falling.y += 1;
+		const collisionStackHeight = state.stack.filter((c) => Math.abs(c.x - state.falling.x) < crateW - 1).length * crateH;
+		if (state.falling.y >= floorY - collisionStackHeight) {
+			state.stack.push({
+				label: state.falling.label,
+				x: state.falling.x,
+				landedAt: tick
+			});
+			state.falling = null;
+			state.spawnCooldown = 3;
+		}
+	} else if (state.spawnCooldown > 0) state.spawnCooldown -= 1;
+	else if (state.stack.length < Math.floor(height / crateH) - 1) state.falling = {
+		label: PACKAGE_NAMES[Math.floor(Math.random() * PACKAGE_NAMES.length)],
+		x: 2 + Math.floor(Math.random() * Math.max(1, width - crateW - 4)),
+		y: -1
+	};
+	else if (tick % 20 === 0) state.stack = [];
+	const grid = Array.from({ length: height }, () => new Array(width).fill(" "));
+	const drawCrate = (cx, cy, label, shake) => {
+		const x = cx + shake;
+		if (cy < 0 || cy >= height) return;
+		const padded = `[${label.slice(0, crateW - 2)}]`.padEnd(crateW, " ");
+		for (let i = 0; i < crateW && x + i < width; i++) if (x + i >= 0) grid[cy][x + i] = padded[i];
+	};
+	state.stack.forEach((c, idx) => {
+		const cy = floorY - idx;
+		const shake = tick - c.landedAt === 0 ? 1 : tick - c.landedAt === 1 ? -1 : 0;
+		drawCrate(c.x, cy, c.label, shake);
+	});
+	if (state.falling) drawCrate(state.falling.x, state.falling.y, state.falling.label, 0);
+	return /* @__PURE__ */ jsx(Panel, { children: grid.map((row, y) => /* @__PURE__ */ jsx(Box, { children: row.map((ch, x) => {
+		if (ch === " ") return /* @__PURE__ */ jsx(Text, { children: " " }, x);
+		const isFalling = state.falling && y === state.falling.y && Math.abs(x - state.falling.x) < crateW;
+		return /* @__PURE__ */ jsx(Text, {
+			bold: isFalling,
+			color: isFalling ? VISUALIZER_PALETTE.head : VISUALIZER_PALETTE.mid,
+			children: ch
+		}, x);
+	}) }, y)) });
+};
+//#endregion
+//#region src/ui/tui/components/visualizer/DiffCascade.tsx
+/**
+* DiffCascade — code-edits phase.
+*
+* + and - code lines scroll upward continuously. Occasional comment-rewrite
+* gag: a "// hmm…" line appears, gets - struck out, then a + replaces it.
+*/
+const CODE_SNIPPETS = [
+	"import posthog from 'posthog-js'",
+	"posthog.init(KEY, { host: HOST })",
+	"<PostHogProvider client={posthog}>",
+	"  {children}",
+	"</PostHogProvider>",
+	"posthog.capture('page_viewed')",
+	"posthog.capture('signup_started')",
+	"posthog.identify(user.id, { email })",
+	"if (process.env.NODE_ENV !== 'test') posthog.init(KEY)",
+	"export const posthog = new PostHog(KEY)",
+	"// TODO: enable replay",
+	"window.posthog = posthog"
+];
+const WHIMSY_COMMENTS = [
+	"// hmm — that should be a hook",
+	"// wait, refactor incoming",
+	"// posthog says hi"
+];
+const DiffCascade = ({ width, height }) => {
+	const tick = useTick(280);
+	const linesRef = useRef([]);
+	if (linesRef.current.length === 0) for (let i = 0; i < height; i++) linesRef.current.push({
+		sign: Math.random() < .75 ? "+" : "-",
+		text: CODE_SNIPPETS[Math.floor(Math.random() * CODE_SNIPPETS.length)]
+	});
+	linesRef.current.shift();
+	const whimsy = tick % 23 === 0;
+	linesRef.current.push({
+		sign: whimsy ? "-" : Math.random() < .78 ? "+" : "-",
+		text: whimsy ? WHIMSY_COMMENTS[Math.floor(Math.random() * WHIMSY_COMMENTS.length)] : CODE_SNIPPETS[Math.floor(Math.random() * CODE_SNIPPETS.length)]
+	});
+	const lines = linesRef.current;
+	return /* @__PURE__ */ jsx(Panel, { children: Array.from({ length: height }).map((_, y) => {
+		const line = lines[y];
+		const cap = width - 2;
+		const text = `${line.sign} ${line.text}`.slice(0, cap);
+		return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, {
+			color: line.sign === "+" ? VISUALIZER_PALETTE.mid : line.sign === "-" ? VISUALIZER_PALETTE.deleteRed : MATRIX_FADE,
+			children: text.padEnd(cap, " ")
+		}) }, y);
+	}) });
+};
+//#endregion
+//#region src/ui/tui/components/visualizer/Tumblers.tsx
+/**
+* Tumblers — env-setup phase.
+*
+* Pins fall into a lock cylinder one by one; when all six align the bolt
+* pulses green for a beat, then the cycle restarts.
+*/
+const Tumblers = ({ width, height }) => {
+	const tick = useTick(80);
+	const pinCount = Math.min(Math.floor((width - 2) / 2), 6);
+	const state = useRef({
+		heights: new Array(pinCount).fill(0),
+		current: 0,
+		fallY: 0,
+		pulse: 0
+	}).current;
+	const cylinderTop = 1;
+	const cylinderBottom = height - 2;
+	const targetForPin = (i) => cylinderBottom - 1 - i % 3 - Math.floor(i / 2);
+	if (state.pulse > 0) {
+		state.pulse -= 1;
+		if (state.pulse === 0) {
+			state.heights = new Array(pinCount).fill(0);
+			state.current = 0;
+			state.fallY = 0;
+		}
+	} else if (state.current < pinCount) {
+		state.fallY += 1;
+		if (state.fallY >= targetForPin(state.current)) {
+			state.heights[state.current] = targetForPin(state.current);
+			state.current += 1;
+			state.fallY = cylinderTop;
+		}
+	} else state.pulse = 14;
+	const grid = Array.from({ length: height }, () => new Array(width).fill(" "));
+	for (let y = 0; y < height; y++) {
+		grid[y][0] = "│";
+		grid[y][width - 1] = "│";
+	}
+	for (let i = 0; i < pinCount; i++) {
+		const x = 1 + i * 2 + 1;
+		if (x < width) grid[0][x] = "▼";
+	}
+	for (let x = 1; x < width - 1; x++) grid[height - 1][x] = "─";
+	for (let i = 0; i < pinCount; i++) {
+		const pinX = 1 + i * 2 + 1;
+		if (pinX >= width) continue;
+		const top = state.heights[i] || cylinderTop;
+		for (let y = top; y <= cylinderBottom; y++) grid[y][pinX] = "█";
+	}
+	if (state.pulse === 0 && state.current < pinCount) {
+		const pinX = 1 + state.current * 2 + 1;
+		if (pinX < width) grid[state.fallY][pinX] = "█";
+	}
+	const pulsing = state.pulse > 0;
+	const pulseBright = pulsing && tick % 2 === 0;
+	return /* @__PURE__ */ jsx(Panel, { children: grid.map((row, y) => /* @__PURE__ */ jsx(Box, { children: row.map((ch, x) => {
+		if (ch === " ") return /* @__PURE__ */ jsx(Text, { children: " " }, x);
+		if (ch === "│" || ch === "─" || ch === "▼") return /* @__PURE__ */ jsx(Text, {
+			color: pulsing ? pulseBright ? VISUALIZER_PALETTE.bright : MATRIX_FADE : MATRIX_FADE,
+			dimColor: !pulsing,
+			children: ch
+		}, x);
+		const isFalling = state.pulse === 0 && state.current < pinCount && y === state.fallY && x === 1 + state.current * 2 + 1;
+		const color = pulsing ? pulseBright ? VISUALIZER_PALETTE.head : VISUALIZER_PALETTE.bright : isFalling ? VISUALIZER_PALETTE.head : VISUALIZER_PALETTE.mid;
+		return /* @__PURE__ */ jsx(Text, {
+			bold: pulsing || isFalling,
+			color,
+			children: ch
+		}, x);
+	}) }, y)) });
+};
+//#endregion
+//#region src/ui/tui/components/visualizer/DashboardGrid.tsx
+/**
+* DashboardGrid — dashboards phase.
+*
+* 2×2 grid of mini-charts to evoke a real PostHog dashboard. When the area
+* is too small, the layout collapses to 1×2 or 1×1 so something always
+* renders.
+*/
+const DASHBOARD_TILES = [
+	{
+		title: "Visitors",
+		kind: "bars"
+	},
+	{
+		title: "Sessions",
+		kind: "line"
+	},
+	{
+		title: "Revenue",
+		kind: "gauge"
+	},
+	{
+		title: "Errors",
+		kind: "pulse"
+	}
+];
+const SPARK_GLYPHS = "▁▂▃▄▅▆▇█";
+const DashboardGrid = ({ width, height }) => {
+	const tick = useTick(220);
+	const grid = Array.from({ length: height }, () => new Array(width).fill(" "));
+	const cols = width >= 22 ? 2 : 1;
+	const rows = height >= 7 ? 2 : 1;
+	const vSplit = cols === 2 ? Math.floor(width / 2) : -1;
+	const hSplit = rows === 2 ? Math.floor(height / 2) : -1;
+	if (vSplit >= 0) for (let y = 0; y < height; y++) grid[y][vSplit] = "│";
+	if (hSplit >= 0) {
+		for (let x = 0; x < width; x++) grid[hSplit][x] = "─";
+		if (vSplit >= 0) grid[hSplit][vSplit] = "┼";
+	}
+	const writeText = (x0, y0, maxW, text) => {
+		if (y0 < 0 || y0 >= height) return;
+		const slice = text.slice(0, Math.max(0, maxW));
+		for (let i = 0; i < slice.length; i++) if (x0 + i >= 0 && x0 + i < width) grid[y0][x0 + i] = slice[i];
+	};
+	for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) {
+		const tile = DASHBOARD_TILES[r * cols + c];
+		const tileX = c === 0 ? 0 : vSplit + 1;
+		const tileY = r === 0 ? 0 : hSplit + 1;
+		const tileW = cols === 2 ? c === 0 ? vSplit : width - vSplit - 1 : width;
+		const tileH = rows === 2 ? r === 0 ? hSplit : height - hSplit - 1 : height;
+		const innerX = tileX;
+		const innerW = Math.max(1, tileW);
+		const titleY = tileY;
+		const valueY = tileY + tileH - 1;
+		const chartY0 = tileY + 1;
+		const chartY1 = Math.max(chartY0, valueY - 1);
+		const chartH = Math.max(1, chartY1 - chartY0 + 1);
+		const seed = (r * cols + c) * 13;
+		writeText(innerX, titleY, innerW, tile.title);
+		renderTile(grid, tile.kind, innerX, chartY0, innerW, chartH, tick, seed, width);
+		writeText(innerX, valueY, innerW, tileValue(tile.kind, tick, seed));
+	}
+	return /* @__PURE__ */ jsx(Panel, { children: grid.map((row, y) => /* @__PURE__ */ jsx(Box, { children: row.map((ch, x) => {
+		if (ch === " ") return /* @__PURE__ */ jsx(Text, { children: " " }, x);
+		if (ch === "│" || ch === "─" || ch === "┼") return /* @__PURE__ */ jsx(Text, {
+			color: MATRIX_FADE,
+			dimColor: true,
+			children: ch
+		}, x);
+		if (SPARK_GLYPHS.includes(ch) || ch === "█") return /* @__PURE__ */ jsx(Text, {
+			color: VISUALIZER_PALETTE.mid,
+			children: ch
+		}, x);
+		if (ch === "●" || ch === "∙" || ch === "·") {
+			const color = ch === "●" ? VISUALIZER_PALETTE.head : ch === "∙" ? VISUALIZER_PALETTE.bright : VISUALIZER_PALETTE.mid;
+			return /* @__PURE__ */ jsx(Text, {
+				bold: ch === "●",
+				color,
+				children: ch
+			}, x);
+		}
+		if (ch === "▲" || ch === "▼") return /* @__PURE__ */ jsx(Text, {
+			bold: true,
+			color: ch === "▲" ? VISUALIZER_PALETTE.upGreen : VISUALIZER_PALETTE.deleteRed,
+			children: ch
+		}, x);
+		return /* @__PURE__ */ jsx(Text, {
+			color: VISUALIZER_PALETTE.bright,
+			children: ch
+		}, x);
+	}) }, y)) });
+};
+function renderTile(grid, kind, x0, y0, w, h, tick, seed, gridW) {
+	const set = (x, y, ch) => {
+		if (y < 0 || y >= grid.length) return;
+		if (x < 0 || x >= gridW) return;
+		grid[y][x] = ch;
+	};
+	if (kind === "bars") for (let i = 0; i < w; i++) {
+		const t = tick * .18 + (i + seed) * .6;
+		const level = .55 + .35 * Math.sin(t) + .1 * Math.sin(t * 2.7);
+		const filled = Math.max(0, Math.min(h, Math.round(level * h)));
+		for (let j = 0; j < filled; j++) set(x0 + i, y0 + h - 1 - j, "█");
+		if (filled > 0 && filled < h) {
+			const frac = level * h - Math.floor(level * h);
+			const glyph = SPARK_GLYPHS[Math.floor(frac * 7)];
+			set(x0 + i, y0 + h - filled, glyph);
+		}
+	}
+	else if (kind === "line") {
+		const spikeAt = ((tick / 12 | 0) + seed) % Math.max(1, w);
+		for (let i = 0; i < w; i++) {
+			const norm = i / Math.max(1, w - 1);
+			const base = h - 1 - norm * (h - 1);
+			let yf = base + .6 * Math.sin(i * .7 + seed + tick * .05);
+			if (i === spikeAt) yf = Math.max(0, base - 1.5);
+			const y = Math.max(0, Math.min(h - 1, Math.round(yf)));
+			const dist = Math.abs(i - (w - 1));
+			const ch = dist === 0 ? "●" : dist < 3 ? "∙" : "·";
+			set(x0 + i, y0 + y, ch);
+		}
+	} else if (kind === "gauge") {
+		const cycle = (tick + seed) % 40;
+		const pct = cycle < 30 ? cycle / 30 : 1 - (cycle - 30) / 10;
+		const midY = y0 + Math.floor(h / 2);
+		const filled = Math.max(0, Math.min(w, Math.round(pct * w)));
+		for (let i = 0; i < w; i++) set(x0 + i, midY, i < filled ? "█" : "·");
+	} else if (kind === "pulse") for (let i = 0; i < w; i++) {
+		const t = (i + seed + Math.floor(tick / 3)) % 17;
+		let level;
+		if (t === 0) level = .9;
+		else if (t === 1 || t === 16) level = .5;
+		else level = .12 + .06 * Math.sin((i + tick) * .5);
+		const filled = Math.max(1, Math.min(h, Math.round(level * h)));
+		for (let j = 0; j < filled; j++) set(x0 + i, y0 + h - 1 - j, "█");
+	}
+}
+function tileValue(kind, tick, seed) {
+	const wave = .5 + .5 * Math.sin(tick * .05 + seed);
+	if (kind === "bars") return `${(Math.round(8e3 + wave * 6e3) / 1e3).toFixed(1)}k ▲`;
+	if (kind === "line") return `${(2 + wave * 4).toFixed(1)}% ▲`;
+	if (kind === "gauge") return `$${Math.round(20 + wave * 60)}k`;
+	return `${Math.round(1 + wave * 5)} ▼`;
+}
+//#endregion
+//#region src/ui/tui/components/PhaseVisuals.tsx
+/**
+* Phase visuals — ambient ASCII visualizations of what the agent is currently
+* doing. The active phase is derived from the in-progress task labels (best-
+* effort heuristic). Each phase has its own component (under ./visualizer);
+* the orchestrator `PhaseVisual` picks which one to render.
+*
+* Width and height are passed in from the parent so visuals adapt to the
+* column they're placed in.
+*/
+const PHASE_LABELS = {
+	["codebase-scan"]: "Reading the Code",
+	["skill-install"]: "Picking the Right Skill",
+	["dep-install"]: "Installing Packages",
+	["code-edits"]: "Editing Source",
+	["env-setup"]: "Wiring Up Secrets",
+	["dashboards"]: "Building Dashboards"
+};
+/** Reads the active phase from the store. The agent loop pushes it in via
+*  `getUI().setStage(...)` whenever a new tool fires. */
+function useAgentPhase(store) {
+	useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+	return store.currentStage?.stage ?? "codebase-scan";
+}
+/**
+* VisualizerTab — Winamp-style fullscreen take on the phase visual.
+* "NOW PLAYING" header, centered visual, transport bar with elapsed time.
+*
+* Sizes itself off the *measured* container rather than the raw terminal so
+* the tab bar / hints / status panel above don't get pushed off-screen on
+* short terminals. When height runs out, chrome rows drop in order:
+* transport bar first, then track title, then the NOW PLAYING header.
+*/
+const VisualizerTab = ({ store }) => {
+	const phase = useAgentPhase(store);
+	const containerRef = useRef(null);
+	const [size, setSize] = useState({
+		width: 0,
+		height: 0
+	});
+	useEffect(() => {
+		if (!containerRef.current) return;
+		const m = measureElement(containerRef.current);
+		if (m.width !== size.width || m.height !== size.height) setSize({
+			width: m.width,
+			height: m.height
+		});
+	}, [
+		useTick(EQ_TICK_MS),
+		size.width,
+		size.height
+	]);
+	const HEADER_ROWS = 2;
+	const TITLE_ROWS = 2;
+	const TRANSPORT_ROWS = 2;
+	const BORDER_ROWS = 2;
+	const MIN_VISUAL_H = 5;
+	const availH = size.height;
+	const availW = size.width;
+	let chromeBudget = BORDER_ROWS + HEADER_ROWS + TITLE_ROWS + TRANSPORT_ROWS;
+	let showHeader = true;
+	let showTitle = true;
+	let showTransport = true;
+	if (availH > 0 && availH - chromeBudget < MIN_VISUAL_H) {
+		showTransport = false;
+		chromeBudget -= TRANSPORT_ROWS;
+	}
+	if (availH > 0 && availH - chromeBudget < MIN_VISUAL_H) {
+		showTitle = false;
+		chromeBudget -= TITLE_ROWS;
+	}
+	if (availH > 0 && availH - chromeBudget < MIN_VISUAL_H) {
+		showHeader = false;
+		chromeBudget -= HEADER_ROWS;
+	}
+	const visualH = availH > 0 ? Math.max(MIN_VISUAL_H, Math.min(18, availH - chromeBudget)) : MIN_VISUAL_H;
+	const visualW = availW > 0 ? Math.max(20, Math.min(64, availW - 12)) : 40;
+	const now = Date.now();
+	const beatTimeMs = now - (store.currentStage?.startedAt ?? now);
+	const timeStr = formatElapsed(Math.max(0, Math.floor(beatTimeMs / 1e3)));
+	const equalizer = renderMiniEqualizer(beatTimeMs, useRef(new Array(EQ_BARS).fill(0)).current);
+	return /* @__PURE__ */ jsxs(Box, {
+		ref: containerRef,
+		flexDirection: "column",
+		flexGrow: 1,
+		alignItems: "center",
+		justifyContent: "center",
+		overflow: "hidden",
+		children: [
+			showHeader && /* @__PURE__ */ jsxs(Box, {
+				flexDirection: "row",
+				marginBottom: 1,
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						color: MATRIX_FADE,
+						children: "┌─"
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						bold: true,
+						color: VISUALIZER_PALETTE.bright,
+						children: " ► NOW PLAYING "
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						color: MATRIX_FADE,
+						children: "─┐"
+					})
+				]
+			}),
+			showTitle && /* @__PURE__ */ jsx(Box, {
+				marginBottom: 1,
+				children: /* @__PURE__ */ jsxs(Text, {
+					bold: true,
+					color: VISUALIZER_PALETTE.head,
+					children: [PHASE_LABELS[phase], " - PostHog"]
+				})
+			}),
+			/* @__PURE__ */ jsx(PhaseBody, {
+				phase,
+				width: visualW,
+				height: visualH
+			}),
+			showTransport && /* @__PURE__ */ jsxs(Box, {
+				flexDirection: "row",
+				marginTop: 1,
+				gap: 2,
+				children: [
+					/* @__PURE__ */ jsxs(Text, {
+						color: VISUALIZER_PALETTE.mid,
+						children: [
+							"[",
+							timeStr,
+							"]"
+						]
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						color: MATRIX_FADE,
+						children: equalizer
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						color: VISUALIZER_PALETTE.mid,
+						children: "WizardAmp"
+					})
+				]
+			})
+		]
+	});
+};
+function formatElapsed(totalSec) {
+	const m = Math.floor(totalSec / 60);
+	const s = totalSec % 60;
+	return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}
+const BEAT_MS = 60 / 120 * 1e3;
+const EQ_BARS = 12;
+const EQ_TICK_MS = 67;
+const EQ_FALL_PER_FRAME = .08;
+function pulse(t, periodMs, decay, phaseMs = 0) {
+	const since = (t - phaseMs + periodMs * 100) % periodMs;
+	return Math.exp(-decay * since / periodMs);
+}
+const EQ_GLYPHS = "▁▂▃▄▅▆▇█";
+function renderMiniEqualizer(beatTimeMs, levels) {
+	const kick = pulse(beatTimeMs, BEAT_MS, 4);
+	const bass = pulse(beatTimeMs, BEAT_MS, 1.5);
+	const clap = pulse(beatTimeMs, BEAT_MS * 2, 5, BEAT_MS);
+	const hat8 = pulse(beatTimeMs, BEAT_MS / 2, 8);
+	const hat16 = pulse(beatTimeMs, BEAT_MS / 4, 12);
+	const pad = .2 + .15 * Math.sin(2 * Math.PI * beatTimeMs / 4e3);
+	const mix = [
+		bass * .7 + kick * .5 + pad,
+		bass * .6 + kick * .6 + pad * .9,
+		bass * .4 + kick * .7 + pad * .8,
+		kick * .6 + clap * .3 + pad * .7,
+		kick * .4 + clap * .5 + pad * .7,
+		clap * .7 + hat8 * .3 + pad * .6,
+		clap * .6 + hat8 * .5 + pad * .5,
+		hat8 * .7 + clap * .3 + pad * .5,
+		hat8 * .5 + hat16 * .4 + pad * .4,
+		hat8 * .4 + hat16 * .5 + pad * .4,
+		hat16 * .6 + hat8 * .3 + pad * .3,
+		hat16 * .7 + pad * .3
+	];
+	let out = "";
+	for (let i = 0; i < EQ_BARS; i++) {
+		const target = Math.min(1, mix[i]);
+		levels[i] = Math.max(target, levels[i] - EQ_FALL_PER_FRAME);
+		out += EQ_GLYPHS[Math.floor(levels[i] * 7)];
+	}
+	return out;
+}
+const PhaseBody = ({ phase, width, height }) => {
+	switch (phase) {
+		case "codebase-scan": return /* @__PURE__ */ jsx(MatrixRain, {
+			width,
+			height
+		});
+		case "skill-install": return /* @__PURE__ */ jsx(LibraryShelf, {
+			width,
+			height
+		});
+		case "dep-install": return /* @__PURE__ */ jsx(CrateStack, {
+			width,
+			height
+		});
+		case "code-edits": return /* @__PURE__ */ jsx(DiffCascade, {
+			width,
+			height
+		});
+		case "env-setup": return /* @__PURE__ */ jsx(Tumblers, {
+			width,
+			height
+		});
+		case "dashboards": return /* @__PURE__ */ jsx(DashboardGrid, {
+			width,
+			height
+		});
+	}
+};
+//#endregion
 //#region src/ui/tui/components/ServiceHealthList.tsx
 /**
 * ServiceHealthList — Shared component for displaying service health status.
@@ -5405,6 +6327,27 @@ const OutroScreen = ({ store }) => {
 						bold: true,
 						children: ["✔ ", outroData.message || "Done!"]
 					}),
+					outroData.primaryLink && /* @__PURE__ */ jsx(Box, {
+						marginTop: 1,
+						children: /* @__PURE__ */ jsxs(Text, { children: [
+							outroData.primaryLink.label,
+							":",
+							" ",
+							/* @__PURE__ */ jsx(Text, {
+								color: "cyan",
+								children: outroData.primaryLink.url
+							})
+						] })
+					}),
+					outroData.nextSteps && outroData.nextSteps.items.length > 0 && /* @__PURE__ */ jsxs(Box, {
+						flexDirection: "column",
+						marginTop: 1,
+						children: [/* @__PURE__ */ jsx(Text, {
+							color: "cyan",
+							bold: true,
+							children: outroData.nextSteps.heading
+						}), outroData.nextSteps.items.map((item, i) => /* @__PURE__ */ jsxs(Text, { children: ["• ", item] }, i))]
+					}),
 					outroData.dashboardUrl && /* @__PURE__ */ jsx(Box, {
 						marginTop: 1,
 						children: /* @__PURE__ */ jsxs(Text, { children: [
@@ -5850,6 +6793,29 @@ const AiOptInRequiredScreen = ({ store }) => {
 	});
 };
 //#endregion
-export { SplitView as A, LogViewer as C, useStdoutDimensions as D, GroupedPickerMenu as E, WizardStore as M, ProgressList as O, EventPlanViewer as S, ConfirmationInput as T, LearnCard as _, SlackConnectScreen as a, TabContainer as b, AuditChecksViewer as c, McpScreen as d, IssueTable as f, TipsCard as g, ServiceHealthList as h, OutroScreen as i, CardLayout as j, LoadingBox as k, McpSuggestedPromptsScreen as l, SEVERITY_ORDER as m, SkillSourceInfo as n, AUDIT_AREA_SLIDES as o, SEVERITY_LABEL as p, useSkillEntry as r, VisualBox as s, AiOptInRequiredScreen as t, TAILORED_ROLES as u, ContentSequencer as v, ModalOverlay as w, ScreenContainer as x, HNViewer as y };
+//#region src/ui/tui/terminal.ts
+/**
+* Terminal setup shared by the wizard TUI and the primitives playground.
+*
+* Both enter the alternate screen buffer and paint a black background so
+* Ink renders on a consistent dark canvas regardless of the user's terminal
+* theme (light mode profiles included).
+*/
+const RESET_ATTRS = "\x1B[0m";
+const CLEAR_SCREEN = "\x1B[2J";
+const CURSOR_HOME = "\x1B[H";
+const BG_BLACK = "\x1B[48;2;0;0;0m";
+const ENTER_ALT_SCREEN = "\x1B[?1049h";
+const LEAVE_ALT_SCREEN = "\x1B[?1049l";
+/** Enter alt screen and paint a black background. */
+function enterDarkTerminal() {
+	process.stdout.write(ENTER_ALT_SCREEN + BG_BLACK + CLEAR_SCREEN + CURSOR_HOME);
+}
+/** Leave alt screen and reset attributes. */
+function releaseTerminal() {
+	process.stdout.write(RESET_ATTRS + LEAVE_ALT_SCREEN);
+}
+//#endregion
+export { ConfirmationInput as A, TabContainer as C, LinkText as D, LogViewer as E, SplitView as F, CardLayout as I, WizardStore as L, useStdoutDimensions as M, ProgressList as N, extractUrls as O, LoadingBox as P, HNViewer as S, EventPlanViewer as T, ServiceHealthList as _, useSkillEntry as a, LearnCard as b, AUDIT_AREA_SLIDES as c, McpSuggestedPromptsScreen as d, TAILORED_ROLES as f, SEVERITY_ORDER as g, SEVERITY_LABEL as h, SkillSourceInfo as i, GroupedPickerMenu as j, ModalOverlay as k, VisualBox as l, IssueTable as m, releaseTerminal as n, OutroScreen as o, McpScreen as p, AiOptInRequiredScreen as r, SlackConnectScreen as s, enterDarkTerminal as t, AuditChecksViewer as u, VisualizerTab as v, ScreenContainer as w, ContentSequencer as x, TipsCard as y };
 
-//# sourceMappingURL=AiOptInRequiredScreen-_33FOcVo.js.map
+//# sourceMappingURL=terminal-BSiupnOQ.js.map