@posthog/wizard 2.37.0 → 2.38.0

package/dist/{playground-DDYYs2ub.js → playground-CmKFAlCE.js}

@@ -1,14 +1,14 @@
-import { et as VERSION, l as WIZARD_LOG_FILE, y as getBlockingServiceKeys } from "./debug-CZwmzyDx.js";
+import { ft as VERSION, l as WIZARD_LOG_FILE, y as getBlockingServiceKeys } from "./debug-CgdI7Rd-.js";
 import "./wizard-ui-WZ48rUgr.js";
-import "./wizard-session-CqihOtk3.js";
-import { m as Icons, p as Colors } from "./posthog-integration-Cx4RvC7E.js";
+import "./wizard-session-DWeUEncV.js";
+import { m as Icons, p as Colors } from "./posthog-integration-CcJWXPDa.js";
 import { a as ConfirmButton, f as getProgramConfig, t as PickerMenu, u as PROGRAM_REGISTRY, x as getContentBlocks } from "./bin.js";
-import { t as WizardStore } from "./store-0uzey9Am.js";
-import { A as ConfirmationInput, C as TabContainer, E as LogViewer, F as SplitView, I as CardLayout, N as ProgressList, P as LoadingBox, S as HNViewer, T as EventPlanViewer, _ as ServiceHealthList, b as LearnCard, c as AUDIT_AREA_SLIDES, d as McpSuggestedPromptsScreen, f as TAILORED_ROLES, j as GroupedPickerMenu, k as ModalOverlay, m as IssueTable, n as releaseTerminal, o as OutroScreen, p as McpScreen, r as AiOptInRequiredScreen, s as SlackConnectScreen, t as enterDarkTerminal, u as AuditChecksViewer, v as VisualizerTab, w as ScreenContainer, x as ContentSequencer, y as TipsCard } from "./terminal-Bd6q58zn.js";
+import { t as WizardStore } from "./store-BV1a-8Wp.js";
+import { A as ConfirmationInput, C as TabContainer, E as LogViewer, F as SplitView, I as CardLayout, N as ProgressList, P as LoadingBox, S as HNViewer, T as EventPlanViewer, b as LearnCard, c as SlackConnectScreen, d as AuditChecksViewer, f as McpSuggestedPromptsScreen, h as IssueTable, j as GroupedPickerMenu, k as ModalOverlay, l as AUDIT_AREA_SLIDES, m as McpScreen, n as releaseTerminal, o as OutroScreen, p as TAILORED_ROLES, r as AiOptInRequiredScreen, t as enterDarkTerminal, v as ServiceHealthList, w as ScreenContainer, x as ContentSequencer, y as TipsCard } from "./terminal-IAHPQoAT.js";
 import * as fs$1 from "fs";
 import * as path$1 from "path";
 import * as os from "os";
-import { Box, Text, render, useInput } from "ink";
+import { Box, Text, measureElement, render, useInput } from "ink";
 import { createElement, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/tui/playground/demos/WelcomeDemo.tsx
@@ -422,6 +422,782 @@ const LogDemo = () => {
 	});
 };
 //#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/playground/demos/RunScreenDemo.tsx
 /**
 * RunScreenDemo — Playground demo for the agent run view.
@@ -2063,4 +2839,4 @@ function runPlayground() {
 //#endregion
 export { runPlayground };
 
-//# sourceMappingURL=playground-DDYYs2ub.js.map
+//# sourceMappingURL=playground-CmKFAlCE.js.map