@posthog/wizard 2.37.0 → 2.38.1

package/dist/{terminal-Bd6q58zn.js → terminal-BTQSAkC-.js}

@@ -1,15 +1,16 @@
-import { $ as getSkillsBaseUrl, P as POSTHOG_APP_URL, g as SERVICE_LABELS, s as logToFile } from "./debug-CZwmzyDx.js";
-import { t as analytics } from "./analytics-Du8Z_3oX.js";
-import { i as withUtm, n as openTrackedLink } from "./telemetry-DJNpvkYP.js";
-import { t as getOrAskForProjectData } from "./setup-utils-CR8X8Fmf.js";
-import { t as HostResolution } from "./host-resolution-DrOzdKdY.js";
-import { a as fetchUserData, i as fetchSlackConnected } from "./api-BqKMQVhj.js";
-import "./wizard-session-CqihOtk3.js";
-import { A as AUDIT_SEVERITY_STYLE, x as fetchSkillMenu } from "./agent-interface-D8jnkEnB.js";
-import { c as TextBlock, d as isLinesBlock, f as isObjectBlock, l as computeVisibleRange, m as Icons, p as Colors, u as isClearBlock } from "./posthog-integration-Cx4RvC7E.js";
+import { dt as getSkillsBaseUrl, g as SERVICE_LABELS, s as logToFile, z as POSTHOG_APP_URL } from "./debug-CaRHQrDY.js";
+import { n as analytics } from "./analytics-Z_2kCTpB.js";
+import { i as withUtm, n as openTrackedLink } from "./telemetry-BJAHymMq.js";
+import { t as getOrAskForProjectData } from "./setup-utils-v9I6PQyP.js";
+import { t as HostResolution } from "./host-resolution-C18FwVrM.js";
+import { a as fetchUserData, i as fetchSlackConnected } from "./api-CwhOyprf.js";
+import "./wizard-session-BoXAZEOf.js";
+import { a as formatTokenCount, i as formatCostUsd } from "./agent-runner-DZhaiwD5.js";
+import { g as AUDIT_SEVERITY_STYLE, i as fetchSkillMenu } from "./wizard-tools-C8nVWLeI.js";
+import { c as TextBlock, d as isLinesBlock, f as isObjectBlock, l as computeVisibleRange, m as Icons, p as Colors, u as isClearBlock } from "./posthog-integration-6vdi4wRB.js";
 import { a as ConfirmButton, d as Program, i as useKeyboardHintsContext, n as useKeyBindings, o as PromptLabel, r as KeyboardHintsProvider, t as PickerMenu, v as getKindMeta } from "./bin.js";
-import "./store-0uzey9Am.js";
-import { n as AVAILABLE_FEATURES, o as isAllFeaturesSelected, t as ALL_FEATURE_VALUES } from "./defaults-UswXMiTx.js";
+import { r as totalTokenCount } from "./store-Db0X2V5D.js";
+import { n as AVAILABLE_FEATURES, o as isAllFeaturesSelected, t as ALL_FEATURE_VALUES } from "./defaults-a0e6IRjP.js";
 import opn from "opn";
 import * as fs$1 from "fs";
 import { Box, Text, measureElement, useInput, useStdout } from "ink";
@@ -787,6 +788,92 @@ const TitleBar = ({ version, width }) => {
 	});
 };
 //#endregion
+//#region src/ui/tui/components/TokenCostHud.tsx
+/**
+* TokenCostHud — Ctrl+T panel showing the running (then final) LLM
+* token/cost estimate for this wizard run. Toggled from `ScreenContainer`;
+* deliberately not registered via `useKeyBindings`, so the shortcut never
+* shows in the `KeyboardHintsBar` in production. Defaults visible for
+* local/dev/test runs (`WizardStore`'s `$tokenHudVisible` initial value),
+* so contributors see it without needing to know the shortcut; defaults
+* hidden in the published build. Once shown, the panel itself names the
+* shortcut, so it's self-documenting either way.
+*
+* One row when "Ctrl+T to hide" fits on the same row as the cost line
+* (right-aligned, with a minimum gap), two when the terminal is too narrow
+* for both — see `tokenCostHudRowCount`, which `ScreenContainer` calls with
+* the same inputs so its height budget always matches what actually renders
+* (plus the blank spacer `ScreenContainer` renders below either way).
+*/
+/** Self-documents the hidden shortcut once the panel is showing. */
+const HINT_TEXT = "Ctrl+T to hide";
+/** Minimum blank columns between the cost line and the hint when they
+*  share a row, so they never visually run together. */
+const MIN_GAP = 2;
+function tokenCostLineParts(usage) {
+	const costPart = `${usage.costIsFinal ? "Final cost" : "Cost (running)"}: ${formatCostUsd(usage.costUsd)}`;
+	if (totalTokenCount(usage) === 0) return {
+		costPart,
+		breakdownPart: " · no agent turns yet"
+	};
+	return {
+		costPart,
+		breakdownPart: ` · in ${formatTokenCount(usage.inputTokens)} · out ${formatTokenCount(usage.outputTokens)} · cache read ${formatTokenCount(usage.cacheReadTokens)} · cache write ${formatTokenCount(usage.cacheCreationTokens)}`
+	};
+}
+/** Single source of truth for both `tokenCostHudRowCount` (so
+*  `ScreenContainer`'s height budget can never disagree with what renders)
+*  and the component's own render — computed once per call rather than
+*  separately in each. */
+function layoutTokenCostLine(usage, width) {
+	const { costPart, breakdownPart } = tokenCostLineParts(usage);
+	const lineLength = costPart.length + breakdownPart.length;
+	return {
+		costPart,
+		breakdownPart,
+		hintFitsInline: lineLength + MIN_GAP + 14 <= width,
+		gap: Math.max(MIN_GAP, width - lineLength - 14)
+	};
+}
+/**
+* How many rows `TokenCostHud` renders for `usage` at `width` columns of
+* available text space — 1 when the hint fits on the cost line's row, 2
+* when it needs its own row below. `ScreenContainer` calls this with the
+* exact same `usage`/`width` it passes to the component.
+*/
+function tokenCostHudRowCount(usage, width) {
+	return layoutTokenCostLine(usage, width).hintFitsInline ? 1 : 2;
+}
+const TokenCostHud = ({ usage, width }) => {
+	const { costPart, breakdownPart, hintFitsInline, gap } = layoutTokenCostLine(usage, width);
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		paddingX: 1,
+		children: [/* @__PURE__ */ jsxs(Text, {
+			wrap: "truncate",
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					color: Colors.accent,
+					children: costPart
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					dimColor: true,
+					children: breakdownPart
+				}),
+				hintFitsInline && /* @__PURE__ */ jsx(Text, { children: " ".repeat(gap) }),
+				hintFitsInline && /* @__PURE__ */ jsx(Text, {
+					dimColor: true,
+					children: HINT_TEXT
+				})
+			]
+		}), !hintFitsInline && /* @__PURE__ */ jsx(Text, {
+			dimColor: true,
+			wrap: "truncate",
+			children: HINT_TEXT
+		})]
+	});
+};
+//#endregion
 //#region src/ui/tui/primitives/DissolveTransition.tsx
 /**
 * DissolveTransition — Column-sweep inspired by TTE's Sweep effect.
@@ -986,9 +1073,15 @@ function getContentWidth(terminalColumns) {
 const ScreenContainer = ({ store, screens }) => {
 	const [columns, rows] = useStdoutDimensions();
 	useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+	useInput((input, key) => {
+		if (key.ctrl && input === "t") store.toggleTokenHud();
+	});
 	const terminalWidth = columns;
 	const width = getContentWidth(terminalWidth);
-	const contentHeight = Math.max(5, rows - 3);
+	const hudVisible = store.tokenHudVisible;
+	const hudContentWidth = Math.max(1, width - 2);
+	const hudRows = hudVisible ? tokenCostHudRowCount(store.tokenUsage, hudContentWidth) + 1 : 0;
+	const contentHeight = Math.max(5, rows - 3 - hudRows);
 	const contentAreaWidth = Math.max(10, width - 2);
 	const direction = store.lastNavDirection === "pop" ? "right" : "left";
 	const activeScreen = screens[store.currentScreen] ?? null;
@@ -1008,6 +1101,10 @@ const ScreenContainer = ({ store, screens }) => {
 					width
 				}),
 				/* @__PURE__ */ jsx(Box, { height: 1 }),
+				hudVisible && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TokenCostHud, {
+					usage: store.tokenUsage,
+					width: hudContentWidth
+				}), /* @__PURE__ */ jsx(Box, { height: 1 })] }),
 				/* @__PURE__ */ jsx(Box, {
 					flexDirection: "column",
 					flexGrow: 1,
@@ -1607,782 +1704,6 @@ const TipsCard = ({ store, tips = DEFAULT_TIPS }) => {
 	});
 };
 //#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.
@@ -5597,6 +4918,37 @@ const SlackConnectScreen = ({ store }) => {
 	});
 };
 //#endregion
+//#region src/ui/tui/hooks/useDismissOnAnyKey.ts
+/**
+* useDismissOnAnyKey — "press any key to continue/exit" screens.
+*
+* Wraps `useInput` for the recurring "any key dismisses/exits this screen"
+* pattern (outro screens, terminal error/timeout screens, etc.), ignoring
+* modifier-combo keypresses (Ctrl/Meta) so a global hidden shortcut — e.g.
+* Ctrl+T toggling the token/cost HUD — can't also dismiss the screen
+* underneath it. Ink calls every mounted `useInput` callback for a given
+* keypress with no `stopPropagation`, so a bare `useInput(() => handler())`
+* would otherwise fire on every registered shortcut too, not just an
+* ordinary keypress.
+*
+* Use this instead of raw `useInput` for any screen where any ordinary
+* keypress should proceed, but a modifier combo shouldn't be able to.
+*/
+/**
+* True for a keypress that should NOT count as "any key" for a dismiss
+* handler — currently just modifier combos. Extracted as a pure predicate
+* so it's unit-testable without rendering through Ink.
+*/
+function isIgnoredForDismiss(key) {
+	return key.ctrl || key.meta;
+}
+function useDismissOnAnyKey(handler) {
+	useInput((_input, key) => {
+		if (isIgnoredForDismiss(key)) return;
+		handler();
+	});
+}
+//#endregion
 //#region src/ui/tui/screens/OutroScreen.tsx
 /**
 * OutroScreen — Default post-run summary.
@@ -5607,9 +4959,7 @@ const SlackConnectScreen = ({ store }) => {
 */
 const OutroScreen = ({ store }) => {
 	useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
-	useInput(() => {
-		store.setOutroDismissed();
-	});
+	useDismissOnAnyKey(() => store.setOutroDismissed());
 	const outroData = store.session.outroData;
 	if (!outroData) return /* @__PURE__ */ jsx(Box, {
 		flexDirection: "column",
@@ -6120,6 +5470,6 @@ 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, 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 };
+export { ConfirmationInput as A, TabContainer as C, LinkText as D, LogViewer as E, SplitView as F, CardLayout as I, useStdoutDimensions as M, ProgressList as N, extractUrls as O, LoadingBox as P, HNViewer as S, EventPlanViewer as T, SEVERITY_ORDER as _, useSkillEntry as a, LearnCard as b, SlackConnectScreen as c, AuditChecksViewer as d, McpSuggestedPromptsScreen as f, SEVERITY_LABEL as g, IssueTable as h, SkillSourceInfo as i, GroupedPickerMenu as j, ModalOverlay as k, AUDIT_AREA_SLIDES as l, McpScreen as m, releaseTerminal as n, OutroScreen as o, TAILORED_ROLES as p, AiOptInRequiredScreen as r, useDismissOnAnyKey as s, enterDarkTerminal as t, VisualBox as u, ServiceHealthList as v, ScreenContainer as w, ContentSequencer as x, TipsCard as y };
 
-//# sourceMappingURL=terminal-Bd6q58zn.js.map
+//# sourceMappingURL=terminal-BTQSAkC-.js.map