@posthog/wizard 2.9.0 → 2.10.0

package/dist/McpScreen-BmHapIaP.js

@@ -0,0 +1,3357 @@
+import { n as analytics, r as sessionProperties } from "./analytics-C4jO5Qda.js";
+import { r as buildSession } from "./wizard-session-Db6R023m.js";
+import { t as SERVICE_LABELS } from "./readiness-Dn7eq8NE.js";
+import { n as AVAILABLE_FEATURES, t as ALL_FEATURE_VALUES } from "./defaults-DoVkE0gW.js";
+import { i as WORKFLOW_STEPS, t as WizardRouter } from "./router-D5A1Sb4p.js";
+import * as fs$1 from "fs";
+import { Box, Text, measureElement, useInput, useStdout } from "ink";
+import { Component, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { atom, map } from "nanostores";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Spinner } from "@inkjs/ui";
+//#region src/ui/tui/store.ts
+/**
+* WizardStore — Nanostore-backed reactive store for the TUI.
+* React components subscribe via useSyncExternalStore.
+*
+* The active screen is derived from session state — WizardRouter walks
+* the flow and shows the first step whose `isComplete` is still false.
+*
+* Define a step `gate` if your screen needs to await user interactions.
+* bin.ts calls `await store.getGate(stepId)` to pause until the gate
+* predicate becomes true.
+*
+* All session mutations that affect screen resolution go through
+* explicit setters so emitChange() is always called.
+*/
+var WizardStore = class {
+	$session = map(buildSession({}));
+	$statusMessages = atom([]);
+	$statusExpanded = atom(false);
+	$tasks = atom([]);
+	$eventPlan = atom([]);
+	$learnCardBlockIdx = atom(0);
+	$learnCardComplete = atom(false);
+	$version = atom(0);
+	/** Last screen seen — used to detect screen transitions for analytics. */
+	_lastScreen = null;
+	/** Hooks run when transitioning onto a screen. */
+	_enterScreenHooks = /* @__PURE__ */ new Map();
+	/** Gate promises derived from workflow step definitions. */
+	_gates = /* @__PURE__ */ new Map();
+	version = "";
+	/** Navigation router — resolves active screen from session state. */
+	router;
+	/** Blocks agent execution until the settings-override overlay is dismissed. */
+	_resolveSettingsOverride = null;
+	_backupAndFixSettings = null;
+	/** Blocks OAuth flow until the port-conflict overlay is dismissed. */
+	_resolvePortConflict = null;
+	constructor(flow = "posthog-integration") {
+		this.router = new WizardRouter(flow);
+		this._initFromWorkflow(flow);
+	}
+	/**
+	* Scan workflow steps for gate predicates and onInit callbacks.
+	* Creates gate promises and fires init work.
+	*/
+	_initFromWorkflow(flow) {
+		const steps = WORKFLOW_STEPS[flow];
+		if (!steps) return;
+		for (const step of steps) if (step.gate) {
+			let resolve;
+			const promise = new Promise((r) => {
+				resolve = r;
+			});
+			this._gates.set(step.id, {
+				predicate: step.gate,
+				promise,
+				resolve,
+				resolved: false
+			});
+		}
+		const getSession = () => this.session;
+		const ctx = {
+			get session() {
+				return getSession();
+			},
+			setReadinessResult: (r) => this.setReadinessResult(r),
+			setFrameworkContext: (k, v) => this.setFrameworkContext(k, v),
+			emitChange: () => this.emitChange()
+		};
+		for (const step of steps) step.onInit?.(ctx);
+	}
+	/**
+	* Run all `onReady` hooks declared by the current flow's steps, in
+	* order. Must be called after `store.session = session` so hooks see
+	* the real installDir. bin.ts calls this generically — it doesn't
+	* need to know which workflow has which pre-flow work.
+	*/
+	async runReadyHooks() {
+		const steps = WORKFLOW_STEPS[this.router.activeFlow];
+		if (!steps) return;
+		const ctx = {
+			session: this.session,
+			setFrameworkContext: (k, v) => this.setFrameworkContext(k, v),
+			setFrameworkConfig: (i, c) => this.setFrameworkConfig(i, c),
+			setDetectedFramework: (l) => this.setDetectedFramework(l),
+			setUnsupportedVersion: (info) => this.setUnsupportedVersion(info),
+			addDiscoveredFeature: (f) => this.addDiscoveredFeature(f),
+			setDetectionComplete: () => this.setDetectionComplete()
+		};
+		for (const step of steps) if (step.onReady) await step.onReady(ctx);
+	}
+	/**
+	* Get a gate promise by step ID — the primary blocking checkpoint API
+	* for bin.ts. `await store.getGate('...')` parks the caller until the
+	* corresponding workflow step's gate predicate flips to true (if the
+	* predicate stays false, the caller stays parked indefinitely — the
+	* TUI keeps rendering so the user can resolve whatever is blocking).
+	*
+	* If the workflow doesn't define a step with this ID, or the step
+	* has no `gate` predicate, this returns an already-resolved promise
+	* so bin.ts flows straight through. This lets workflows opt in to
+	* gates on a per-step basis without bin.ts needing to know which
+	* gates exist in which flow.
+	*/
+	getGate(stepId) {
+		return this._gates.get(stepId)?.promise ?? Promise.resolve();
+	}
+	/**
+	* Re-evaluate every gate predicate against the current session and
+	* resolve any whose predicate now returns true. Called after every
+	* emitChange(), so gates unblock as soon as the session mutation
+	* that satisfies them lands. Gates only resolve once — a predicate
+	* that goes true → false → true will NOT re-block a caller that
+	* already awaited through.
+	*/
+	_checkGates() {
+		for (const [, gate] of this._gates) if (!gate.resolved && gate.predicate(this.session)) {
+			gate.resolved = true;
+			gate.resolve();
+		}
+	}
+	get session() {
+		return this.$session.get();
+	}
+	set session(value) {
+		this.$session.set(value);
+		this.emitChange();
+	}
+	get statusMessages() {
+		return this.$statusMessages.get();
+	}
+	get tasks() {
+		return this.$tasks.get();
+	}
+	get eventPlan() {
+		return this.$eventPlan.get();
+	}
+	get statusExpanded() {
+		return this.$statusExpanded.get();
+	}
+	toggleStatusExpanded() {
+		this.$statusExpanded.set(!this.$statusExpanded.get());
+		this.emitChange();
+	}
+	setStatusExpanded(expanded) {
+		if (this.$statusExpanded.get() !== expanded) {
+			this.$statusExpanded.set(expanded);
+			this.emitChange();
+		}
+	}
+	/** Sets setupConfirmed. Gate resolves via _checkGates(). */
+	completeSetup() {
+		this.$session.setKey("setupConfirmed", true);
+		analytics.wizardCapture("setup confirmed", sessionProperties(this.session));
+		this.emitChange();
+	}
+	setRunPhase(phase) {
+		this.$session.setKey("runPhase", phase);
+		this.emitChange();
+	}
+	setCredentials(credentials) {
+		this.$session.setKey("credentials", credentials);
+		analytics.wizardCapture("auth complete", { project_id: credentials?.projectId });
+		this.emitChange();
+	}
+	setFrameworkConfig(integration, config) {
+		this.$session.setKey("integration", integration);
+		this.$session.setKey("frameworkConfig", config);
+		this.$session.setKey("unsupportedVersion", null);
+		this.emitChange();
+	}
+	setDetectionComplete() {
+		this.$session.setKey("detectionComplete", true);
+		this.emitChange();
+	}
+	setDetectedFramework(label) {
+		this.$session.setKey("detectedFrameworkLabel", label);
+		this.emitChange();
+	}
+	setUnsupportedVersion(info) {
+		this.$session.setKey("unsupportedVersion", info);
+		this.emitChange();
+	}
+	setLoginUrl(url) {
+		this.$session.setKey("loginUrl", url);
+		this.emitChange();
+	}
+	setReadinessResult(result) {
+		this.$session.setKey("readinessResult", result);
+		this.emitChange();
+	}
+	/** User dismissed the blocking outage screen. Gate resolves via _checkGates(). */
+	dismissOutage() {
+		this.$session.setKey("outageDismissed", true);
+		this.emitChange();
+	}
+	/**
+	* Push the settings-override overlay and return a promise that blocks
+	* until the user dismisses it via backupAndFixSettingsOverride().
+	*/
+	showSettingsOverride(conflicts, backupAndFix) {
+		const allKeys = conflicts.flatMap((c) => c.keys);
+		this.$session.setKey("settingsOverrideKeys", allKeys);
+		this.$session.setKey("settingsConflicts", conflicts);
+		this._backupAndFixSettings = backupAndFix;
+		if (conflicts.some((c) => !c.writable)) this.pushOverlay("managed-settings");
+		else this.pushOverlay("settings-override");
+		return new Promise((resolve) => {
+			this._resolveSettingsOverride = resolve;
+		});
+	}
+	/**
+	* Push the port-conflict overlay and return a promise that blocks
+	* until the user frees the ports and retries, or exits.
+	*/
+	showPortConflict(processInfo) {
+		this.$session.setKey("portConflictProcess", processInfo);
+		this.pushOverlay("port-conflict");
+		return new Promise((resolve) => {
+			this._resolvePortConflict = resolve;
+		});
+	}
+	/** Dismiss the port-conflict overlay and retry the OAuth port loop. */
+	resolvePortConflict() {
+		this.$session.setKey("portConflictProcess", null);
+		this.popOverlay();
+		this._resolvePortConflict?.();
+		this._resolvePortConflict = null;
+	}
+	/**
+	* Back up .claude/settings.json. Dismisses the overlay on success.
+	*/
+	backupAndFixSettingsOverride() {
+		const ok = this._backupAndFixSettings?.() ?? false;
+		if (ok) {
+			this.$session.setKey("settingsOverrideKeys", null);
+			this.$session.setKey("settingsConflicts", null);
+			this.popOverlay();
+			this._resolveSettingsOverride?.();
+			this._resolveSettingsOverride = null;
+			this._backupAndFixSettings = null;
+		}
+		return ok;
+	}
+	/** Push the auth-error overlay (no dismiss — user must exit). */
+	showAuthError() {
+		this.pushOverlay("auth-error");
+	}
+	addDiscoveredFeature(feature) {
+		if (!this.session.discoveredFeatures.includes(feature)) {
+			this.session.discoveredFeatures.push(feature);
+			this.emitChange();
+		}
+	}
+	/**
+	* Enable an additional feature: enqueue it for the stop hook
+	* and set any feature-specific session flags.
+	*/
+	enableFeature(feature) {
+		if (!this.session.additionalFeatureQueue.includes(feature)) this.session.additionalFeatureQueue.push(feature);
+		if (feature === "llm") this.session.llmOptIn = true;
+		analytics.wizardCapture("feature enabled", { feature });
+		this.emitChange();
+	}
+	setMcpComplete(outcome = "skipped", installedClients = []) {
+		this.$session.setKey("mcpComplete", true);
+		this.$session.setKey("mcpOutcome", outcome);
+		this.$session.setKey("mcpInstalledClients", installedClients);
+		analytics.wizardCapture("mcp complete", {
+			mcp_outcome: outcome,
+			mcp_installed_clients: installedClients,
+			...sessionProperties(this.session)
+		});
+		this.emitChange();
+	}
+	setSkillsComplete(kept) {
+		this.$session.setKey("skillsComplete", true);
+		analytics.wizardCapture("skills complete", {
+			skills_kept: kept,
+			...sessionProperties(this.session)
+		});
+		this.emitChange();
+	}
+	setOutroDismissed() {
+		this.$session.setKey("outroDismissed", true);
+		this.emitChange();
+	}
+	setOutroData(data) {
+		this.$session.setKey("outroData", data);
+		this.emitChange();
+	}
+	setFrameworkContext(key, value) {
+		const ctx = {
+			...this.$session.get().frameworkContext,
+			[key]: value
+		};
+		this.$session.setKey("frameworkContext", ctx);
+		this.emitChange();
+	}
+	/**
+	* The screen that should be rendered right now.
+	* Derived from session state via the router.
+	*/
+	get currentScreen() {
+		return this.router.resolve(this.session);
+	}
+	/** Direction hint for screen transitions. */
+	get lastNavDirection() {
+		return this.router.lastNavDirection;
+	}
+	getVersion() {
+		return this.$version.get();
+	}
+	/**
+	* Notify React that state has changed.
+	* The router re-resolves the active screen on next render.
+	* Gate predicates are checked and resolved if ready.
+	*/
+	emitChange() {
+		this.router._setDirection("push");
+		this.$version.set(this.$version.get() + 1);
+		this._checkGates();
+		this._detectTransition();
+	}
+	pushOverlay(overlay) {
+		this.router._setDirection("push");
+		this.router.pushOverlay(overlay);
+		this.$version.set(this.$version.get() + 1);
+		this._detectTransition();
+	}
+	popOverlay() {
+		this.router._setDirection("pop");
+		this.router.popOverlay();
+		this.$version.set(this.$version.get() + 1);
+		this._detectTransition();
+	}
+	/**
+	* Register a callback to run when transitioning onto the given screen.
+	* Fires after every transition that lands on this screen.
+	*/
+	onEnterScreen(screen, fn) {
+		const list = this._enterScreenHooks.get(screen) ?? [];
+		list.push(fn);
+		this._enterScreenHooks.set(screen, list);
+	}
+	/**
+	* Detect screen transitions, run enter-screen hooks, and fire analytics.
+	* Called at the end of emitChange/pushOverlay/popOverlay.
+	*/
+	_detectTransition() {
+		const next = this.router.resolve(this.session);
+		const prev = this._lastScreen;
+		if (prev !== null && next !== prev) {
+			const hooks = this._enterScreenHooks.get(next);
+			if (hooks) for (const fn of hooks) fn();
+			analytics.wizardCapture(`screen ${next}`, {
+				from_screen: prev,
+				workflow: this.router.activeFlow,
+				...sessionProperties(this.session)
+			});
+		}
+		this._lastScreen = next;
+	}
+	pushStatus(message) {
+		const msgs = this.$statusMessages.get();
+		if (msgs.length > 0 && msgs[msgs.length - 1] === message) return;
+		this.$statusMessages.set([...msgs, message]);
+		this.emitChange();
+	}
+	setTasks(tasks) {
+		this.$tasks.set(tasks);
+		this.emitChange();
+	}
+	updateTask(index, done) {
+		const tasks = this.$tasks.get();
+		if (tasks[index]) {
+			const updated = [...tasks];
+			updated[index] = {
+				...updated[index],
+				done,
+				status: done ? "completed" : "pending"
+			};
+			this.$tasks.set(updated);
+			this.emitChange();
+		}
+	}
+	setEventPlan(events) {
+		this.$eventPlan.set(events);
+		this.emitChange();
+	}
+	get learnCardBlockIdx() {
+		return this.$learnCardBlockIdx.get();
+	}
+	setLearnCardBlockIdx(idx) {
+		this.$learnCardBlockIdx.set(idx);
+	}
+	get learnCardComplete() {
+		return this.$learnCardComplete.get();
+	}
+	setLearnCardComplete() {
+		this.$learnCardComplete.set(true);
+		this.emitChange();
+	}
+	syncTodos(todos) {
+		const incoming = todos.map((t) => ({
+			label: t.content,
+			activeForm: t.activeForm,
+			status: t.status || "pending",
+			done: t.status === "completed"
+		}));
+		const incomingLabels = new Set(incoming.map((t) => t.label));
+		const retained = this.$tasks.get().filter((t) => t.done && !incomingLabels.has(t.label));
+		this.$tasks.set([...retained, ...incoming]);
+		this.emitChange();
+	}
+	subscribe(callback) {
+		return this.$version.listen(() => callback());
+	}
+	getSnapshot() {
+		return this.$version.get();
+	}
+};
+//#endregion
+//#region src/ui/tui/styles.ts
+const Colors = {
+	primary: "cyan",
+	accent: "#DC9300",
+	titleColor: "#3D2800",
+	success: "green",
+	error: "red",
+	muted: "gray"
+};
+const Icons = {
+	diamond: "◆",
+	diamondOpen: "◇",
+	check: "✔",
+	warning: "⚠",
+	squareFilled: "◼",
+	squareOpen: "◻",
+	triangleRight: "▶",
+	triangleSmallRight: "▸",
+	bullet: "•"
+};
+//#endregion
+//#region src/ui/tui/primitives/CardLayout.tsx
+/**
+* CardLayout — Aligns a single child within available space.
+*/
+const CardLayout = ({ hAlign = "flex-start", vAlign = "flex-start", children }) => {
+	return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		justifyContent: vAlign,
+		alignItems: hAlign,
+		children
+	});
+};
+//#endregion
+//#region src/ui/tui/primitives/SplitView.tsx
+/**
+* SplitView — Two-pane horizontal layout: 50/50.
+*/
+const SplitView = ({ left, right, gap = 2 }) => {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "row",
+		flexGrow: 1,
+		flexShrink: 1,
+		gap,
+		children: [/* @__PURE__ */ jsx(Box, {
+			width: "50%",
+			flexDirection: "column",
+			overflow: "hidden",
+			children: left
+		}), /* @__PURE__ */ jsx(Box, {
+			width: "50%",
+			flexDirection: "column",
+			overflow: "hidden",
+			children: right
+		})]
+	});
+};
+//#endregion
+//#region src/ui/tui/primitives/LoadingBox.tsx
+/**
+* LoadingBox — Spinner with message.
+*/
+const LoadingBox = ({ message }) => {
+	return /* @__PURE__ */ jsxs(Box, {
+		gap: 1,
+		children: [/* @__PURE__ */ jsx(Spinner, {}), /* @__PURE__ */ jsx(Text, { children: message })]
+	});
+};
+//#endregion
+//#region src/ui/tui/primitives/ProgressList.tsx
+/**
+* ProgressList — Reusable task checklist with status icons.
+* Extracted from StatusTab logic.
+*/
+const ProgressList = ({ items, title }) => {
+	const completed = items.filter((t) => t.status === "completed").length;
+	const total = items.length;
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			title && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				children: title
+			}), /* @__PURE__ */ jsx(Text, { children: " " })] }),
+			items.length === 0 && /* @__PURE__ */ jsx(LoadingBox, { message: "Analyzing project..." }),
+			items.map((item, i) => {
+				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;
+				return /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
+					color,
+					children: icon
+				}), /* @__PURE__ */ jsxs(Text, {
+					dimColor: item.status === "pending",
+					children: [" ", label]
+				})] }, i);
+			}),
+			total > 0 && /* @__PURE__ */ jsxs(Box, {
+				marginTop: 1,
+				gap: 1,
+				children: [/* @__PURE__ */ jsx(Spinner, {}), /* @__PURE__ */ jsx(Text, {
+					dimColor: true,
+					children: completed < total ? `Progress: ${completed}/${total} completed` : "Cleaning up..."
+				})]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/ui/tui/primitives/PromptLabel.tsx
+/**
+* PromptLabel — Compact inline label for input prompts.
+*
+* Renders: [!] message
+* where [!] is black text on accent background.
+*/
+const PromptLabel = ({ message }) => {
+	return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, {
+		bold: true,
+		color: Colors.accent,
+		children: [" ", message]
+	}) });
+};
+//#endregion
+//#region src/ui/tui/hooks/keyboard-hints-utils.ts
+/** Default priorities by key type. */
+const DEFAULT_PRIORITY = {
+	["upArrow"]: 0,
+	["downArrow"]: 0,
+	["leftArrow"]: 1,
+	["rightArrow"]: 1,
+	["space"]: 10,
+	["escape"]: 20,
+	["return"]: 21
+};
+/** Get the default display priority for a key match. */
+function getDefaultPriority(match) {
+	return DEFAULT_PRIORITY[Array.isArray(match) ? match[0] : match] ?? 15;
+}
+/** Check if a KeyMatchOrChar matches the given input string and key flags. */
+function matchesKey(m, input, key) {
+	switch (m) {
+		case "upArrow": return !!key.upArrow;
+		case "downArrow": return !!key.downArrow;
+		case "leftArrow": return !!key.leftArrow;
+		case "rightArrow": return !!key.rightArrow;
+		case "return": return !!key.return;
+		case "escape": return !!key.escape;
+		case "space": return input === " ";
+		default: return input === m;
+	}
+}
+/** Serialize hints for comparison. */
+function hintsKey(hints) {
+	return hints.map((h) => `${h.label}:${h.action}`).join("|");
+}
+/** Deduplicate hints by label+action and sort by priority. */
+function deduplicateAndSort(hints) {
+	const seen = /* @__PURE__ */ new Set();
+	const deduped = [];
+	for (const hint of hints) {
+		const k = `${hint.label}:${hint.action}`;
+		if (!seen.has(k)) {
+			seen.add(k);
+			deduped.push(hint);
+		}
+	}
+	deduped.sort((a, b) => a.priority - b.priority);
+	return deduped;
+}
+//#endregion
+//#region src/ui/tui/hooks/useKeyboardHints.tsx
+/**
+* KeyboardHintsProvider — Context for collecting and displaying keyboard hints.
+*
+* Input components register their hints via useKeyBindings. The provider
+* flattens, deduplicates, and sorts them. It auto-dismisses 3s after the
+* first keypress and resets when the hint set changes (screen navigation).
+*/
+const KeyboardHintsContext = createContext({
+	register: () => void 0,
+	unregister: () => void 0,
+	hints: [],
+	visible: false
+});
+const useKeyboardHintsContext = () => useContext(KeyboardHintsContext);
+const DISMISS_DELAY = 3e3;
+const KeyboardHintsProvider = ({ children }) => {
+	const registrationsRef = useRef(/* @__PURE__ */ new Map());
+	const [hints, setHints] = useState([]);
+	const [visible, setVisible] = useState(true);
+	const timerRef = useRef(null);
+	const prevHintsKeyRef = useRef("");
+	const recompute = useCallback(() => {
+		const all = [];
+		for (const h of registrationsRef.current.values()) all.push(...h);
+		const deduped = deduplicateAndSort(all);
+		const newKey = hintsKey(deduped);
+		if (newKey !== prevHintsKeyRef.current) {
+			prevHintsKeyRef.current = newKey;
+			setHints(deduped);
+			if (newKey.length > 0) {
+				setVisible(true);
+				if (timerRef.current) {
+					clearTimeout(timerRef.current);
+					timerRef.current = null;
+				}
+			}
+		}
+	}, []);
+	const register = useCallback((id, h) => {
+		registrationsRef.current.set(id, h);
+		recompute();
+	}, [recompute]);
+	const unregister = useCallback((id) => {
+		registrationsRef.current.delete(id);
+		recompute();
+	}, [recompute]);
+	useInput(() => {
+		if (!visible) return;
+		if (timerRef.current) return;
+		timerRef.current = setTimeout(() => {
+			setVisible(false);
+			timerRef.current = null;
+		}, DISMISS_DELAY);
+	});
+	useEffect(() => {
+		return () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(KeyboardHintsContext.Provider, {
+		value: {
+			register,
+			unregister,
+			hints,
+			visible
+		},
+		children
+	});
+};
+//#endregion
+//#region src/ui/tui/hooks/useKeyBindings.ts
+/**
+* useKeyBindings — Declarative keyboard input + automatic hint registration.
+*
+* Replaces raw `useInput` in input components. Define bindings as data;
+* the hook wires up the Ink input handler AND registers hints in the
+* KeyboardHintsProvider. One source of truth for keys and their labels.
+*/
+/**
+* Declarative key bindings hook. Replaces `useInput` in input components.
+* Registers hints automatically with the KeyboardHintsProvider.
+*
+* @param id Unique identifier for this component's hints registration
+* @param bindings Array of key binding definitions
+*/
+function useKeyBindings(id, bindings) {
+	const ctx = useKeyboardHintsContext();
+	const hintsRef = useRef("");
+	const hints = bindings.map((b) => ({
+		label: b.label,
+		action: b.action,
+		priority: b.priority ?? getDefaultPriority(b.match)
+	}));
+	const serialized = hints.map((h) => `${h.label}:${h.action}:${h.priority}`).join("|");
+	useEffect(() => {
+		if (serialized !== hintsRef.current) {
+			hintsRef.current = serialized;
+			ctx.register(id, hints);
+		}
+		return () => ctx.unregister(id);
+	}, [id, serialized]);
+	useInput((input, key) => {
+		for (const binding of bindings) if ((Array.isArray(binding.match) ? binding.match : [binding.match]).some((m) => matchesKey(m, input, key))) {
+			binding.handler(input, key);
+			return;
+		}
+	});
+}
+//#endregion
+//#region src/ui/tui/primitives/PickerMenu.tsx
+/**
+* PickerMenu — Single and multi select.
+* Single mode: custom renderer with small triangle indicator.
+* Multi mode: checkbox glyphs with space to toggle.
+*
+* Key bindings are declared via useKeyBindings, which auto-registers
+* hints in the KeyboardHintsBar.
+*/
+const PickerMenu = ({ message, options, mode = "single", centered = false, columns = 1, onSelect }) => {
+	if (mode === "multi") return /* @__PURE__ */ jsx(MultiPickerMenu, {
+		message,
+		options,
+		centered,
+		columns,
+		onSelect
+	});
+	return /* @__PURE__ */ jsx(SinglePickerMenu, {
+		message,
+		options,
+		centered,
+		columns,
+		onSelect
+	});
+};
+/** Custom single-select with triangle indicator and accent highlight. */
+const SinglePickerMenu = ({ message, options, centered = false, columns = 1, onSelect }) => {
+	const [focused, setFocused] = useState(0);
+	const rows = Math.ceil(options.length / columns);
+	const bindings = [{
+		match: ["upArrow", "downArrow"],
+		label: "↑↓",
+		action: "navigate",
+		handler: (_input, key) => {
+			const col = Math.floor(focused / rows);
+			const row = focused % rows;
+			if (key.upArrow) if (row > 0) setFocused(col * rows + row - 1);
+			else setFocused(Math.min(col * rows + rows - 1, options.length - 1));
+			if (key.downArrow) {
+				const next = col * rows + row + 1;
+				if (next < options.length && row + 1 < rows) setFocused(next);
+				else setFocused(col * rows);
+			}
+		}
+	}, {
+		match: "return",
+		label: "enter",
+		action: "select",
+		handler: () => {
+			const selected = options[focused];
+			if (selected) onSelect(selected.value);
+		}
+	}];
+	if (columns > 1) bindings.splice(1, 0, {
+		match: ["leftArrow", "rightArrow"],
+		label: "←→",
+		action: "navigate",
+		handler: (_input, key) => {
+			const col = Math.floor(focused / rows);
+			const row = focused % rows;
+			if (key.leftArrow) {
+				const prevCol = col > 0 ? col - 1 : columns - 1;
+				setFocused(Math.min(prevCol * rows + row, options.length - 1));
+			}
+			if (key.rightArrow) {
+				const nextCol = col < columns - 1 ? col + 1 : 0;
+				setFocused(Math.min(nextCol * rows + row, options.length - 1));
+			}
+		}
+	});
+	useKeyBindings("single-picker", bindings);
+	const columnArrays = [];
+	for (let c = 0; c < columns; c++) columnArrays.push(options.slice(c * rows, c * rows + rows));
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		alignItems: centered ? "center" : void 0,
+		children: [/* @__PURE__ */ jsx(PromptLabel, { message }), /* @__PURE__ */ jsx(Box, {
+			flexDirection: "row",
+			gap: 4,
+			children: columnArrays.map((colOpts, colIdx) => /* @__PURE__ */ jsx(Box, {
+				flexDirection: "column",
+				children: colOpts.map((opt, rowIdx) => {
+					const flatIdx = colIdx * rows + rowIdx;
+					const isFocused = flatIdx === focused;
+					const label = opt.hint ? `${opt.label} (${opt.hint})` : opt.label;
+					return /* @__PURE__ */ jsxs(Box, {
+						gap: 1,
+						children: [/* @__PURE__ */ jsx(Text, {
+							color: isFocused ? Colors.accent : void 0,
+							dimColor: !isFocused,
+							children: isFocused ? Icons.triangleSmallRight : " "
+						}), /* @__PURE__ */ jsx(Text, {
+							color: isFocused ? Colors.accent : void 0,
+							bold: isFocused,
+							dimColor: !isFocused,
+							children: label
+						})]
+					}, flatIdx);
+				})
+			}, colIdx))
+		})]
+	});
+};
+/** Custom multi-select with checkbox glyphs and accent highlight. */
+const MultiPickerMenu = ({ message, options, centered = false, columns = 1, onSelect }) => {
+	const [focused, setFocused] = useState(0);
+	const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
+	const rows = Math.ceil(options.length / columns);
+	const bindings = [
+		{
+			match: ["upArrow", "downArrow"],
+			label: "↑↓",
+			action: "navigate",
+			handler: (_input, key) => {
+				const col = Math.floor(focused / rows);
+				const row = focused % rows;
+				if (key.upArrow) if (row > 0) setFocused(col * rows + row - 1);
+				else setFocused(Math.min(col * rows + rows - 1, options.length - 1));
+				if (key.downArrow) {
+					const next = col * rows + row + 1;
+					if (next < options.length && row + 1 < rows) setFocused(next);
+					else setFocused(col * rows);
+				}
+			}
+		},
+		{
+			match: "space",
+			label: "space",
+			action: "toggle",
+			handler: () => {
+				setSelected((prev) => {
+					const next = new Set(prev);
+					if (next.has(focused)) next.delete(focused);
+					else next.add(focused);
+					return next;
+				});
+			}
+		},
+		{
+			match: "return",
+			label: "enter",
+			action: "confirm",
+			handler: () => {
+				if (selected.size === 0) {
+					const hovered = options[focused];
+					if (hovered) onSelect(hovered.value);
+				} else onSelect([...selected].sort().map((i) => options[i].value));
+			}
+		}
+	];
+	if (columns > 1) bindings.splice(1, 0, {
+		match: ["leftArrow", "rightArrow"],
+		label: "←→",
+		action: "navigate",
+		handler: (_input, key) => {
+			const col = Math.floor(focused / rows);
+			const row = focused % rows;
+			if (key.leftArrow) {
+				const prevCol = col > 0 ? col - 1 : columns - 1;
+				setFocused(Math.min(prevCol * rows + row, options.length - 1));
+			}
+			if (key.rightArrow) {
+				const nextCol = col < columns - 1 ? col + 1 : 0;
+				setFocused(Math.min(nextCol * rows + row, options.length - 1));
+			}
+		}
+	});
+	useKeyBindings("multi-picker", bindings);
+	const columnArrays = [];
+	for (let c = 0; c < columns; c++) columnArrays.push(options.slice(c * rows, c * rows + rows));
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		alignItems: centered ? "center" : void 0,
+		children: [/* @__PURE__ */ jsx(PromptLabel, { message }), /* @__PURE__ */ jsx(Box, {
+			flexDirection: "row",
+			gap: 4,
+			marginLeft: centered ? 0 : 2,
+			marginTop: 1,
+			children: columnArrays.map((colOpts, colIdx) => /* @__PURE__ */ jsx(Box, {
+				flexDirection: "column",
+				children: colOpts.map((opt, rowIdx) => {
+					const flatIdx = colIdx * rows + rowIdx;
+					const isFocused = flatIdx === focused;
+					const isSelected = selected.has(flatIdx);
+					const label = opt.hint ? `${opt.label} (${opt.hint})` : opt.label;
+					const checkbox = isSelected ? Icons.squareFilled : Icons.squareOpen;
+					return /* @__PURE__ */ jsxs(Box, {
+						gap: 1,
+						children: [/* @__PURE__ */ jsx(Text, {
+							color: isSelected ? "white" : Colors.muted,
+							dimColor: !isFocused && !isSelected,
+							children: checkbox
+						}), /* @__PURE__ */ jsx(Text, {
+							color: isFocused ? Colors.accent : void 0,
+							bold: isFocused,
+							dimColor: !isFocused,
+							children: label
+						})]
+					}, flatIdx);
+				})
+			}, colIdx))
+		})]
+	});
+};
+//#endregion
+//#region src/ui/tui/hooks/useStdoutDimensions.ts
+/**
+* useStdoutDimensions — Returns [columns, rows] and re-renders on terminal resize.
+*
+* Ink's useStdout() does not subscribe to resize events, so layout only updates
+* when something else causes a re-render. This hook listens to the stream's
+* 'resize' event (Node TTY) and updates state so the component re-renders
+* with the new dimensions.
+*/
+function useStdoutDimensions() {
+	const { stdout } = useStdout();
+	const [size, setSize] = useState(() => [stdout.columns || 80, stdout.rows || 24]);
+	useEffect(() => {
+		setSize([stdout.columns || 80, stdout.rows || 24]);
+		const stream = stdout;
+		if (typeof stream.on !== "function") return;
+		const onResize = () => {
+			const c = stdout.columns || 80;
+			const r = stdout.rows || 24;
+			if (c > 0 && r > 0) setSize([c, r]);
+		};
+		stream.on("resize", onResize);
+		return () => {
+			stream.off?.("resize", onResize);
+		};
+	}, [stdout]);
+	return size;
+}
+//#endregion
+//#region src/ui/tui/primitives/GroupedPickerMenu.tsx
+/**
+* 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.
+*
+* When content exceeds available terminal height, the list scrolls
+* to keep the focused item visible with up/down indicators.
+*
+* Key bindings are declared via useKeyBindings, which auto-registers
+* hints in the KeyboardHintsBar.
+*/
+/** Truncate text with "\u2026" if it exceeds maxWidth. */
+function truncateWithEllipsis(text, maxWidth) {
+	if (text.length <= maxWidth) return text;
+	return text.slice(0, maxWidth - 1) + "…";
+}
+/** 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;
+/** Count the visual rows occupied by rows[start..end), accounting for header margins. */
+function countVisualRows(rows, start, end) {
+	let count = 0;
+	for (let i = start; i < end && i < rows.length; i++) {
+		if (rows[i].kind === "header" && i > start) count += 1;
+		count += 1;
+	}
+	return count;
+}
+/** From scrollOffset, find how many flat rows fit in the visual budget. */
+function computeVisibleEnd(rows, scrollOffset, budget) {
+	let visualCount = 0;
+	let i = scrollOffset;
+	while (i < rows.length) {
+		const cost = rows[i].kind === "header" && i > scrollOffset ? 2 : 1;
+		if (visualCount + cost > budget) break;
+		visualCount += cost;
+		i++;
+	}
+	return i;
+}
+/** Adjust scroll offset to keep focusedRowIdx visible within the viewport. */
+function adjustScrollOffset(currentOffset, focusedRowIdx, rows, viewportBudget) {
+	const visibleEnd = computeVisibleEnd(rows, currentOffset, viewportBudget);
+	if (focusedRowIdx >= currentOffset && focusedRowIdx < visibleEnd) return currentOffset;
+	if (focusedRowIdx < currentOffset) {
+		let newOffset = focusedRowIdx;
+		if (newOffset > 0 && rows[newOffset - 1]?.kind === "header") newOffset--;
+		return Math.max(0, newOffset);
+	}
+	let newOffset = currentOffset + 1;
+	while (newOffset < rows.length) {
+		if (focusedRowIdx < computeVisibleEnd(rows, newOffset, viewportBudget)) break;
+		newOffset++;
+	}
+	return Math.min(newOffset, Math.max(0, rows.length - 1));
+}
+const GroupedPickerMenu = ({ message, groups, initialSelected, onSelect }) => {
+	const [termCols, termRows] = useStdoutDimensions();
+	const labelWidth = Math.max(10, Math.min(termCols, 120) - 8);
+	const rows = useMemo(() => {
+		const result = [];
+		for (const [groupName, options] of Object.entries(groups)) {
+			result.push({
+				kind: "header",
+				label: groupName
+			});
+			for (const opt of options) result.push({
+				kind: "option",
+				...opt
+			});
+		}
+		return result;
+	}, [groups]);
+	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 [selected, setSelected] = useState(() => new Set(initialSelected ?? allValues));
+	const [scrollOffset, setScrollOffset] = useState(0);
+	const focusedRowIdx = selectableIndices[focusedSelectable] ?? 0;
+	const viewportBudget = Math.max(5, termRows - CHROME_OVERHEAD - MENU_CHROME);
+	const needsScroll = countVisualRows(rows, 0, rows.length) > viewportBudget;
+	const effectiveBudget = needsScroll ? viewportBudget - 2 : viewportBudget;
+	useKeyBindings("grouped-picker", [
+		{
+			match: ["upArrow", "downArrow"],
+			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);
+					if (needsScroll) {
+						const newFocusedRowIdx = selectableIndices[newFocused] ?? 0;
+						setScrollOffset((prev) => adjustScrollOffset(prev, newFocusedRowIdx, rows, effectiveBudget));
+					}
+				}
+			}
+		},
+		{
+			match: "space",
+			label: "space",
+			action: "toggle",
+			handler: () => {
+				const row = rows[selectableIndices[focusedSelectable] ?? 0];
+				if (row?.kind === "option") setSelected((prev) => {
+					const next = new Set(prev);
+					if (next.has(row.value)) next.delete(row.value);
+					else next.add(row.value);
+					return next;
+				});
+			}
+		},
+		{
+			match: "a",
+			label: "a",
+			action: "toggle all",
+			priority: 11,
+			handler: () => {
+				setSelected((prev) => {
+					if (prev.size === allValues.length) return /* @__PURE__ */ new Set();
+					return new Set(allValues);
+				});
+			}
+		},
+		{
+			match: "return",
+			label: "enter",
+			action: "confirm",
+			handler: () => {
+				onSelect([...selected]);
+			}
+		}
+	]);
+	const visibleStart = needsScroll ? scrollOffset : 0;
+	const visibleEnd = needsScroll ? computeVisibleEnd(rows, visibleStart, effectiveBudget) : rows.length;
+	const visibleRows = rows.slice(visibleStart, visibleEnd);
+	const hiddenAbove = needsScroll ? selectableIndices.filter((s) => s < visibleStart).length : 0;
+	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(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` : " "
+				})
+			]
+		})]
+	});
+};
+//#endregion
+//#region src/ui/tui/primitives/ConfirmationInput.tsx
+/**
+* ConfirmationInput — Continue/cancel prompt.
+* Enter confirms, escape cancels. Arrow keys toggle focus.
+*
+* Key bindings are declared via useKeyBindings, which auto-registers
+* hints in the KeyboardHintsBar.
+*/
+const ConfirmationInput = ({ message, onConfirm, onCancel, confirmLabel = "Continue", cancelLabel = "Cancel" }) => {
+	const [focused, setFocused] = useState("continue");
+	useKeyBindings("confirmation", [
+		{
+			match: ["leftArrow", "rightArrow"],
+			label: "←→",
+			action: "switch",
+			handler: () => {
+				setFocused((f) => f === "continue" ? "cancel" : "continue");
+			}
+		},
+		{
+			match: "return",
+			label: "enter",
+			action: "confirm",
+			handler: () => {
+				if (focused === "continue") onConfirm();
+				else onCancel();
+			}
+		},
+		{
+			match: "escape",
+			label: "esc",
+			action: "cancel",
+			handler: () => {
+				onCancel();
+			}
+		}
+	]);
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [/* @__PURE__ */ jsx(PromptLabel, { message }), /* @__PURE__ */ jsxs(Box, {
+			gap: 2,
+			marginTop: 1,
+			marginLeft: 2,
+			children: [/* @__PURE__ */ jsxs(Text, {
+				bold: focused === "continue",
+				color: focused === "continue" ? Colors.accent : Colors.muted,
+				children: [
+					focused === "continue" ? Icons.triangleSmallRight : " ",
+					" ",
+					confirmLabel
+				]
+			}), /* @__PURE__ */ jsxs(Text, {
+				bold: focused === "cancel",
+				color: focused === "cancel" ? Colors.accent : Colors.muted,
+				children: [
+					focused === "cancel" ? Icons.triangleSmallRight : " ",
+					" ",
+					cancelLabel
+				]
+			})]
+		})]
+	});
+};
+//#endregion
+//#region src/ui/tui/primitives/Divider.tsx
+const Divider = ({ dimColor = true, char = "─" }) => {
+	const ref = useRef(null);
+	const [width, setWidth] = useState(0);
+	useEffect(() => {
+		if (ref.current) {
+			const { width: measured } = measureElement(ref.current);
+			setWidth(measured);
+		}
+	}, []);
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		width: "100%",
+		children: /* @__PURE__ */ jsx(Text, {
+			dimColor,
+			children: width > 0 ? char.repeat(width) : ""
+		})
+	});
+};
+//#endregion
+//#region src/ui/tui/primitives/ModalOverlay.tsx
+const ModalOverlay = ({ borderColor, title, titleColor, width = 68, children, feedback, footer }) => {
+	return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		alignItems: "center",
+		justifyContent: "center",
+		children: /* @__PURE__ */ jsxs(Box, {
+			flexDirection: "column",
+			borderStyle: "round",
+			borderColor,
+			paddingX: 3,
+			paddingY: 1,
+			width,
+			children: [
+				/* @__PURE__ */ jsx(Box, {
+					justifyContent: "center",
+					marginBottom: 1,
+					children: /* @__PURE__ */ jsx(Text, {
+						color: titleColor ?? borderColor,
+						bold: true,
+						children: title
+					})
+				}),
+				children,
+				feedback && /* @__PURE__ */ jsx(Box, {
+					marginTop: 1,
+					children: /* @__PURE__ */ jsx(Text, {
+						color: "yellow",
+						children: feedback
+					})
+				}),
+				footer && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Box, {
+					marginY: 1,
+					children: /* @__PURE__ */ jsx(Divider, {})
+				}), footer] })
+			]
+		})
+	});
+};
+//#endregion
+//#region src/ui/tui/primitives/LogViewer.tsx
+/**
+* LogViewer — Real-time log tail, pinned to available terminal height.
+* Only renders the last N lines that fit on screen.
+*/
+/** Rows consumed by TitleBar + spacer + ScreenContainer padding + status bar + tab bar */
+const CHROME_ROWS = 8;
+const LogViewer = ({ filePath, height }) => {
+	const [, rows] = useStdoutDimensions();
+	const visibleLines = height ?? Math.max(5, rows - CHROME_ROWS);
+	const [lines, setLines] = useState([]);
+	useEffect(() => {
+		const readTail = () => {
+			try {
+				setLines(fs$1.readFileSync(filePath, "utf-8").split("\n").slice(-visibleLines));
+			} catch {
+				setLines(["(No log file found)"]);
+			}
+		};
+		readTail();
+		let watcher;
+		try {
+			watcher = fs$1.watch(filePath, () => {
+				readTail();
+			});
+		} catch {
+			const interval = setInterval(() => {
+				try {
+					fs$1.accessSync(filePath);
+					readTail();
+					clearInterval(interval);
+					watcher = fs$1.watch(filePath, () => readTail());
+				} catch {}
+			}, 1e3);
+			return () => clearInterval(interval);
+		}
+		return () => {
+			watcher?.close();
+		};
+	}, [filePath, visibleLines]);
+	return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		height: visibleLines,
+		children: lines.map((line, i) => /* @__PURE__ */ jsx(Text, {
+			dimColor: true,
+			wrap: "truncate",
+			children: line
+		}, i))
+	});
+};
+//#endregion
+//#region src/ui/tui/primitives/EventPlanViewer.tsx
+/**
+* EventPlanViewer — Renders a table of planned analytics events.
+*/
+const EventPlanViewer = ({ events }) => {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		paddingX: 1,
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				children: "Event plan"
+			}),
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			events.map((event) => /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				children: event.name
+			}), /* @__PURE__ */ jsxs(Text, {
+				dimColor: true,
+				children: [" ", event.description]
+			})] }, event.name))
+		]
+	});
+};
+//#endregion
+//#region src/ui/tui/components/TitleBar.tsx
+const FEEDBACK = "Feedback: wizard@posthog.com ";
+const FEEDBACK_SHORT = " wizard@posthog.com ";
+const TitleBar = ({ version, width }) => {
+	const fullTitle = ` PostHog Wizard v${version}`;
+	const needShort = width < fullTitle.length + 29;
+	const feedback = needShort ? FEEDBACK_SHORT : FEEDBACK;
+	const title = needShort && fullTitle.length + feedback.length > width ? ` Wizard v${version}` : fullTitle;
+	const gap = Math.max(0, width - title.length - feedback.length);
+	const padding = " ".repeat(gap);
+	return /* @__PURE__ */ jsx(Box, {
+		width,
+		overflow: "hidden",
+		children: /* @__PURE__ */ jsxs(Text, {
+			backgroundColor: Colors.accent,
+			color: Colors.titleColor,
+			children: [
+				title,
+				padding,
+				feedback
+			]
+		})
+	});
+};
+//#endregion
+//#region src/ui/tui/primitives/DissolveTransition.tsx
+/**
+* DissolveTransition — Column-sweep inspired by TTE's Sweep effect.
+*
+* Uses a SequenceEaser (in_out_circ) to activate columns with eased pacing.
+* Each activated column cycles through shade characters (░▒▓█) independently.
+*
+* Out phase: columns sweep, building up shade chars until solid █ (covers old content).
+* In phase: columns sweep in reverse, dissolving █ back through shades to empty (reveals new content).
+*/
+/** Shade characters in build-up order (light → solid). */
+const SHADES = [
+	"░",
+	"▒",
+	"▓",
+	"█"
+];
+/** How many ticks each shade character displays before advancing. */
+const TICKS_PER_SHADE = 2;
+/** Total ticks a column needs to complete its shade cycle. */
+const SHADE_CYCLE_TICKS = SHADES.length * TICKS_PER_SHADE;
+function easeInOutCirc(t) {
+	if (t < .5) return (1 - Math.sqrt(1 - 4 * t * t)) / 2;
+	return (Math.sqrt(1 - (2 * t - 2) ** 2) + 1) / 2;
+}
+const DissolveTransition = ({ transitionKey, width, height, children, direction = "left", duration = 2 }) => {
+	const [phase, setPhase] = useState("idle");
+	const [tick, setTick] = useState(0);
+	const [activeDir, setActiveDir] = useState(direction);
+	const prevKey = useRef(transitionKey);
+	const pendingChildren = useRef(children);
+	const [displayChildren, setDisplayChildren] = useState(children);
+	const columnActivationTick = useRef([]);
+	useEffect(() => {
+		if (transitionKey !== prevKey.current) {
+			prevKey.current = transitionKey;
+			pendingChildren.current = children;
+			setActiveDir(direction);
+			setPhase("out");
+			setTick(0);
+			columnActivationTick.current = new Array(width).fill(-1);
+		} else if (phase !== "idle") {
+			setPhase("idle");
+			setDisplayChildren(children);
+		} else setDisplayChildren(children);
+	}, [
+		transitionKey,
+		children,
+		width,
+		height,
+		phase,
+		direction
+	]);
+	useEffect(() => {
+		if (phase === "idle") return;
+		const timer = setInterval(() => {
+			setTick((prev) => prev + 1);
+		}, duration);
+		return () => clearInterval(timer);
+	}, [phase, duration]);
+	const easerSteps = width;
+	const maxTicks = easerSteps + SHADE_CYCLE_TICKS;
+	useEffect(() => {
+		if (phase === "idle") return;
+		if (tick >= maxTicks) if (phase === "out") {
+			setDisplayChildren(pendingChildren.current);
+			setPhase("in");
+			setTick(0);
+			columnActivationTick.current = new Array(width).fill(-1);
+		} else setPhase("idle");
+	}, [
+		tick,
+		phase,
+		maxTicks,
+		width
+	]);
+	if (phase === "idle") return /* @__PURE__ */ jsx(Fragment, { children: displayChildren });
+	const easedValue = easeInOutCirc(Math.min(tick / easerSteps, 1));
+	const activatedCount = Math.floor(easedValue * width);
+	const columnOrder = [];
+	if (activeDir === "left") for (let c = width - 1; c >= 0; c--) columnOrder.push(c);
+	else for (let c = 0; c < width; c++) columnOrder.push(c);
+	for (let i = 0; i < activatedCount && i < columnOrder.length; i++) {
+		const col = columnOrder[i];
+		if (columnActivationTick.current[col] === -1) columnActivationTick.current[col] = tick;
+	}
+	const rows = [];
+	for (let r = 0; r < height; r++) {
+		let row = "";
+		for (let c = 0; c < width; c++) {
+			const activatedAt = columnActivationTick.current[c];
+			let char;
+			if (activatedAt === -1) char = phase === "out" ? " " : "█";
+			else {
+				const age = tick - activatedAt;
+				const shadeIndex = Math.min(Math.floor(age / TICKS_PER_SHADE), SHADES.length - 1);
+				if (phase === "out") char = SHADES[shadeIndex];
+				else if (shadeIndex >= SHADES.length - 1 && age >= SHADE_CYCLE_TICKS) char = " ";
+				else char = SHADES[SHADES.length - 1 - shadeIndex];
+			}
+			row += char;
+		}
+		rows.push(row);
+	}
+	return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: rows.map((row, i) => /* @__PURE__ */ jsx(Text, {
+			dimColor: true,
+			children: row
+		}, i))
+	});
+};
+//#endregion
+//#region src/ui/tui/primitives/KeyboardHintsBar.tsx
+/**
+* KeyboardHintsBar — Row showing active keyboard shortcuts.
+*
+* Always reserves its row to prevent layout shift. When hints are
+* visible, renders them in dimmed grey text. When dismissed, renders
+* an empty reserved row.
+*/
+const KeyboardHintsBar = () => {
+	const { hints, visible } = useKeyboardHintsContext();
+	return /* @__PURE__ */ jsx(Box, {
+		height: 1,
+		paddingX: 1,
+		children: visible && hints.length > 0 && hints.map((hint, i) => /* @__PURE__ */ jsxs(Box, {
+			marginRight: i < hints.length - 1 ? 2 : 0,
+			children: [/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: Colors.muted,
+				children: hint.label
+			}), /* @__PURE__ */ jsxs(Text, {
+				dimColor: true,
+				children: [" ", hint.action]
+			})]
+		}, `${hint.label}-${hint.action}`))
+	});
+};
+//#endregion
+//#region src/ui/tui/primitives/ScreenErrorBoundary.tsx
+/**
+* ScreenErrorBoundary — catches React render errors in screens
+* and routes to the outro screen with an error message.
+*
+* Without this, a screen crash silently hangs the TUI.
+*/
+var ScreenErrorBoundary = class extends Component {
+	state = { error: null };
+	static getDerivedStateFromError(error) {
+		return { error };
+	}
+	componentDidCatch(error) {
+		const { store } = this.props;
+		console.error("[ScreenErrorBoundary]", error.message, error.stack);
+		store.setOutroData({
+			kind: "error",
+			message: `A screen crashed: ${error.message}`
+		});
+		store.setRunPhase("error");
+	}
+	render() {
+		if (this.state.error) return /* @__PURE__ */ jsxs(Box, {
+			flexDirection: "column",
+			children: [/* @__PURE__ */ jsx(Text, {
+				color: "red",
+				bold: true,
+				children: "Something went wrong."
+			}), /* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: this.state.error.message
+			})]
+		});
+		return this.props.children;
+	}
+};
+//#endregion
+//#region src/ui/tui/primitives/ScreenContainer.tsx
+/**
+* ScreenContainer — Renders TitleBar + routes between screens with transitions.
+* Takes a screens map and renders the one matching store.currentScreen.
+* Horizontal wipe plays on push (left) or pop (right).
+*
+* Each screen is wrapped in a ScreenErrorBoundary so that render crashes
+* route to the outro screen with an error message instead of hanging.
+*
+* Provides KeyboardHintsProvider context. The hints bar is rendered below
+* screen content (inside the transition area) so all screens get it.
+*/
+const MIN_WIDTH = 80;
+const MAX_WIDTH = 120;
+/** Use terminal width when small so we don't overflow; otherwise clamp to [MIN_WIDTH, MAX_WIDTH]. */
+function getContentWidth(terminalColumns) {
+	if (terminalColumns < MIN_WIDTH) return terminalColumns;
+	return Math.min(MAX_WIDTH, terminalColumns);
+}
+const ScreenContainer = ({ store, screens }) => {
+	const [columns, rows] = useStdoutDimensions();
+	useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+	const terminalWidth = columns;
+	const width = getContentWidth(terminalWidth);
+	const contentHeight = Math.max(5, rows - 3);
+	const contentAreaWidth = Math.max(10, width - 2);
+	const direction = store.lastNavDirection === "pop" ? "right" : "left";
+	const activeScreen = screens[store.currentScreen] ?? null;
+	return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		height: rows,
+		width: terminalWidth,
+		alignItems: "center",
+		justifyContent: "flex-start",
+		children: /* @__PURE__ */ jsx(KeyboardHintsProvider, { children: /* @__PURE__ */ jsxs(Box, {
+			flexDirection: "column",
+			height: rows,
+			width,
+			children: [
+				/* @__PURE__ */ jsx(TitleBar, {
+					version: store.version,
+					width
+				}),
+				/* @__PURE__ */ jsx(Box, { height: 1 }),
+				/* @__PURE__ */ jsx(Box, {
+					flexDirection: "column",
+					flexGrow: 1,
+					paddingX: 1,
+					children: /* @__PURE__ */ jsx(DissolveTransition, {
+						transitionKey: store.currentScreen,
+						width: contentAreaWidth,
+						height: contentHeight,
+						direction,
+						children: /* @__PURE__ */ jsx(ScreenErrorBoundary, {
+							store,
+							children: /* @__PURE__ */ jsxs(Box, {
+								flexDirection: "column",
+								height: contentHeight,
+								children: [
+									/* @__PURE__ */ jsx(Box, {
+										flexDirection: "column",
+										flexGrow: 1,
+										flexShrink: 1,
+										overflow: "hidden",
+										children: activeScreen
+									}),
+									/* @__PURE__ */ jsx(Box, { height: 1 }),
+									/* @__PURE__ */ jsx(KeyboardHintsBar, {})
+								]
+							})
+						})
+					})
+				})
+			]
+		}) })
+	});
+};
+const TabContainer = ({ tabs, statusMessage, expandableStatus = false, store }) => {
+	const [activeTab, setActiveTab] = useState(0);
+	const [localExpanded, setLocalExpanded] = useState(false);
+	const statusExpanded = store ? store.statusExpanded : localExpanded;
+	useKeyBindings("tab-container", useMemo(() => {
+		const b = [{
+			match: ["leftArrow", "rightArrow"],
+			label: "←→",
+			action: "switch tab",
+			handler: (_input, key) => {
+				if (key.leftArrow) setActiveTab((prev) => Math.max(0, prev - 1));
+				if (key.rightArrow) setActiveTab((prev) => Math.min(tabs.length - 1, prev + 1));
+			}
+		}];
+		if (expandableStatus) b.push({
+			match: "s",
+			label: "s",
+			action: "toggle status",
+			priority: 12,
+			handler: () => {
+				if (store) store.toggleStatusExpanded();
+				else setLocalExpanded((prev) => !prev);
+			}
+		});
+		return b;
+	}, [
+		tabs.length,
+		expandableStatus,
+		store
+	]));
+	const current = tabs[activeTab];
+	const allMessages = statusMessage ? Array.isArray(statusMessage) ? statusMessage : [statusMessage] : [];
+	const visibleCount = expandableStatus && statusExpanded ? 10 : 2;
+	const visibleMessages = allMessages.slice(-visibleCount);
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ jsx(Box, {
+				flexDirection: "column",
+				flexGrow: 1,
+				flexShrink: 1,
+				overflow: "hidden",
+				children: current?.component
+			}),
+			visibleMessages.length > 0 && /* @__PURE__ */ jsx(Box, {
+				flexDirection: "column",
+				borderStyle: "single",
+				borderTop: true,
+				borderBottom: false,
+				borderLeft: false,
+				borderRight: false,
+				borderColor: Colors.muted,
+				paddingX: 1,
+				overflow: "hidden",
+				children: visibleMessages.map((msg, i, arr) => {
+					const isCurrent = i === arr.length - 1;
+					return /* @__PURE__ */ jsxs(Text, {
+						color: Colors.muted,
+						dimColor: !isCurrent,
+						children: [
+							isCurrent ? Icons.diamond : "┊",
+							" ",
+							msg
+						]
+					}, i);
+				})
+			}),
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			/* @__PURE__ */ jsx(Box, {
+				gap: 1,
+				paddingX: 1,
+				children: tabs.map((tab, i) => /* @__PURE__ */ jsx(Text, {
+					inverse: i === activeTab,
+					color: i === activeTab ? Colors.accent : Colors.muted,
+					bold: i === activeTab,
+					children: ` ${tab.label} `
+				}, tab.id))
+			})
+		]
+	});
+};
+//#endregion
+//#region src/ui/tui/primitives/HNViewer.tsx
+/**
+* HNViewer — Top 10 Hacker News stories.
+*
+* Fetches from the HN Firebase API on mount.
+* Each story has a [1]–[0] numeral; typing it opens the HN comments page.
+*/
+const HN_API = "https://hacker-news.firebaseio.com/v0";
+const HNViewer = () => {
+	const [stories, setStories] = useState([]);
+	const [loading, setLoading] = useState(true);
+	useEffect(() => {
+		(async () => {
+			try {
+				const top10 = (await (await fetch(`${HN_API}/topstories.json`)).json()).slice(0, 10);
+				setStories(await Promise.all(top10.map(async (id) => {
+					return (await fetch(`${HN_API}/item/${id}.json`)).json();
+				})));
+			} catch {}
+			setLoading(false);
+		})();
+	}, []);
+	useKeyBindings("hn-viewer", [{
+		match: [
+			"1",
+			"2",
+			"3",
+			"4",
+			"5",
+			"6",
+			"7",
+			"8",
+			"9",
+			"0"
+		],
+		label: "number keys",
+		action: "open story",
+		priority: 5,
+		handler: (input) => openStory(input, stories)
+	}]);
+	if (loading) return /* @__PURE__ */ jsx(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ jsx(Text, {
+			dimColor: true,
+			children: "Loading Hacker News..."
+		})
+	});
+	if (stories.length === 0) return /* @__PURE__ */ jsx(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ jsx(Text, {
+			dimColor: true,
+			children: "Could not load Hacker News."
+		})
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		paddingX: 1,
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: Colors.accent,
+				children: "Hacker News — Top 10"
+			}),
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			stories.map((story, i) => {
+				const key = i === 9 ? "0" : String(i + 1);
+				const dateStr = (/* @__PURE__ */ new Date(story.time * 1e3)).toLocaleDateString("en-US", {
+					month: "short",
+					day: "numeric"
+				});
+				return /* @__PURE__ */ jsxs(Box, {
+					flexDirection: "column",
+					children: [/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsxs(Text, {
+						color: Colors.accent,
+						bold: true,
+						children: [
+							"[",
+							key,
+							"]"
+						]
+					}), /* @__PURE__ */ jsxs(Text, {
+						bold: true,
+						children: [" ", story.title]
+					})] }), /* @__PURE__ */ jsx(Box, {
+						marginLeft: 4,
+						children: /* @__PURE__ */ jsxs(Text, {
+							dimColor: true,
+							children: [
+								story.score,
+								"pts • ",
+								story.by,
+								", ",
+								dateStr
+							]
+						})
+					})]
+				}, story.id);
+			})
+		]
+	});
+};
+function openStory(input, stories) {
+	const num = parseInt(input, 10);
+	if (isNaN(num)) return;
+	const story = stories[num === 0 ? 9 : num - 1];
+	if (!story) return;
+	const url = `https://news.ycombinator.com/item?id=${story.id}`;
+	import("child_process").then(({ exec }) => {
+		exec(`open "${url}" 2>/dev/null || xdg-open "${url}" 2>/dev/null`);
+	});
+}
+//#endregion
+//#region src/ui/tui/primitives/text-helpers.ts
+/**
+* Text-splitting helpers for sentence boundary detection.
+* Used by TextBlock for animation pauses at punctuation.
+*/
+/** Split text into sentences (keeps the delimiter attached) */
+function splitSentences(text) {
+	const parts = [];
+	const re = /[^.!?]*[.!?]+\s*/g;
+	let match;
+	let lastIndex = 0;
+	while ((match = re.exec(text)) !== null) {
+		parts.push(match[0]);
+		lastIndex = re.lastIndex;
+	}
+	if (lastIndex < text.length) parts.push(text.slice(lastIndex));
+	return parts;
+}
+/** Build a set of character indices where sentences end (for typewriter pause) */
+function sentenceEndChars(text) {
+	const ends = /* @__PURE__ */ new Set();
+	const sentences = splitSentences(text);
+	let pos = 0;
+	for (const s of sentences) {
+		pos += s.length;
+		ends.add(pos - 1);
+	}
+	return ends;
+}
+/** Build a set of word indices where sentences end (for word-by-word pause) */
+function sentenceEndWords(text) {
+	const ends = /* @__PURE__ */ new Set();
+	const sentences = splitSentences(text);
+	let wordCount = 0;
+	for (const s of sentences) {
+		const words = s.trim().split(/\s+/).filter(Boolean);
+		wordCount += words.length;
+		ends.add(wordCount - 1);
+	}
+	return ends;
+}
+//#endregion
+//#region src/ui/tui/primitives/content-types.ts
+/** Type guard for lines blocks. */
+function isLinesBlock(block) {
+	return typeof block !== "string" && "type" in block && block.type === "lines";
+}
+/** Type guard for clear blocks. */
+function isClearBlock(block) {
+	return typeof block !== "string" && "type" in block && block.type === "clear";
+}
+/** Type guard for object blocks (text or node content). */
+function isObjectBlock(block) {
+	return typeof block !== "string" && !("type" in block);
+}
+//#endregion
+//#region src/ui/tui/primitives/layout-helpers.ts
+/**
+* Estimate the number of terminal rows a content block will occupy,
+* including 1 row of marginBottom.
+*/
+function estimateBlockHeight(block, availableWidth) {
+	if (typeof block === "string") return wordWrap(block, availableWidth).length + 1;
+	if (isClearBlock(block)) return 0;
+	if (isLinesBlock(block)) return block.lines.length + 1;
+	if (isObjectBlock(block)) {
+		if (typeof block.content === "string") return wordWrap(block.content, availableWidth).length + 1;
+		return 4;
+	}
+	return 1;
+}
+/**
+* Given all blocks, the active index, available width, and a row budget,
+* return [startIdx, endIdx] — the range of blocks to render.
+*
+* Always includes activeIdx. Walks backward to include as many completed
+* blocks as fit within maxHeight.
+*/
+function computeVisibleRange(blocks, activeIdx, availableWidth, maxHeight) {
+	const budget = Math.max(4, maxHeight - 2);
+	let totalHeight = estimateBlockHeight(blocks[activeIdx], availableWidth);
+	let start = activeIdx;
+	for (let i = activeIdx - 1; i >= 0; i--) {
+		if (isClearBlock(blocks[i])) break;
+		const h = estimateBlockHeight(blocks[i], availableWidth);
+		if (totalHeight + h > budget) break;
+		totalHeight += h;
+		start = i;
+	}
+	return [start, activeIdx];
+}
+/**
+* Word-wrap text at clean word boundaries. Always returns pre-wrapped text
+* joined with \n — this avoids Ink's native wrap which can leave leading
+* spaces on continuation lines.
+*
+* Uses a 1-char safety margin so slight width estimate mismatches don't
+* cause Ink to re-wrap our already-wrapped lines.
+*/
+function wordWrap(text, availableWidth) {
+	const safeWidth = Math.max(10, availableWidth - 1);
+	const words = text.split(/\s+/);
+	const lines = [];
+	let currentLine = "";
+	for (const word of words) if (currentLine.length + word.length + 1 > safeWidth && currentLine.length > 0) {
+		lines.push(currentLine);
+		currentLine = word;
+	} else currentLine += (currentLine.length > 0 ? " " : "") + word;
+	if (currentLine.length > 0) lines.push(currentLine);
+	return lines;
+}
+/**
+* Word-wrap text and return only the last `maxRows` lines.
+* Used for intra-block truncation when a single text block exceeds the viewport.
+* Also used for normal rendering to avoid Ink's leading-space wrap artifacts.
+*/
+function wrapAndTruncate(text, availableWidth, maxRows) {
+	const lines = wordWrap(text, availableWidth);
+	if (lines.length <= maxRows) return lines.join("\n");
+	return lines.slice(-maxRows).join("\n");
+}
+//#endregion
+//#region src/ui/tui/primitives/TextBlock.tsx
+/**
+* TextBlock — Animates a single string paragraph.
+*
+* Self-contained: owns its own animIdx and timer.
+* Calls onComplete() when the animation finishes.
+*
+* Five animation modes:
+*   1. Typewriter           — character-by-character reveal
+*   2. Word by word         — each word appears in order
+*   3. Sentence by sentence — sentences appear one at a time
+*   4. Paragraph fade       — paragraph appears at full opacity immediately
+*   5. Sentence fade        — paragraph dim, sentences light up in order
+*/
+/** Default interval per mode (ms) */
+const TEXT_REVEAL_MODE_DEFAULTS = {
+	[1]: 240,
+	[0]: 32,
+	[2]: 1800,
+	[3]: 4800,
+	[4]: 2400
+};
+const TextBlock = ({ text, active, completed, onComplete, mode, bullet, animationInterval, sentenceInterval = 1600, maxHeight, availableWidth }) => {
+	const speed = animationInterval ?? TEXT_REVEAL_MODE_DEFAULTS[mode];
+	const [animIdx, setAnimIdx] = useState(mode === 4 ? 1 : 0);
+	const resetRef = useRef(0);
+	const prevMode = useRef(mode);
+	if (prevMode.current !== mode) {
+		prevMode.current = mode;
+		resetRef.current += 1;
+		setAnimIdx(mode === 4 ? 1 : 0);
+	}
+	const words = text.split(/\s+/);
+	const sentences = splitSentences(text);
+	const sentenceCharEnds = useMemo(() => sentenceEndChars(text), [text]);
+	const sentenceWordEnds = useMemo(() => sentenceEndWords(text), [text]);
+	const isDone = mode === 0 ? animIdx >= text.length : mode === 3 ? true : mode === 1 ? animIdx >= words.length : mode === 4 || mode === 2 ? animIdx >= sentences.length : true;
+	useEffect(() => {
+		if (isDone && active) onComplete();
+	}, [
+		isDone,
+		active,
+		onComplete
+	]);
+	useEffect(() => {
+		if (!active || mode === 3 || isDone) return;
+		const token = resetRef.current;
+		const isFirstTick = animIdx === 0;
+		let delay = isFirstTick ? 0 : speed;
+		if (!isFirstTick && mode === 0 && animIdx > 0 && sentenceCharEnds.has(animIdx - 1)) delay = sentenceInterval;
+		else if (!isFirstTick && mode === 1 && animIdx > 0 && sentenceWordEnds.has(animIdx - 1)) delay = sentenceInterval;
+		const timer = setTimeout(() => {
+			if (token !== resetRef.current) return;
+			setAnimIdx((c) => c + 1);
+		}, delay);
+		return () => clearTimeout(timer);
+	}, [
+		active,
+		mode,
+		animIdx,
+		isDone,
+		speed,
+		sentenceInterval,
+		sentenceCharEnds,
+		sentenceWordEnds
+	]);
+	const wrap = (visibleText) => {
+		if (availableWidth == null) return visibleText;
+		if (maxHeight == null) return wrapAndTruncate(visibleText, availableWidth, Infinity);
+		return wrapAndTruncate(visibleText, availableWidth, maxHeight);
+	};
+	if (completed) return /* @__PURE__ */ jsxs(Text, {
+		dimColor: true,
+		children: [bullet, wrap(text)]
+	});
+	if (mode === 0) {
+		const revealed = text.slice(0, animIdx);
+		return /* @__PURE__ */ jsxs(Text, { children: [
+			bullet,
+			wrap(/[.!?]\s*$/.test(revealed) ? revealed.trimEnd() : revealed),
+			/* @__PURE__ */ jsx(Text, {
+				color: Colors.muted,
+				children: "▌"
+			})
+		] });
+	}
+	if (mode === 1) return /* @__PURE__ */ jsxs(Text, { children: [bullet, wrap(words.slice(0, animIdx).join(" "))] });
+	if (mode === 3) return /* @__PURE__ */ jsxs(Text, { children: [bullet, wrap(text)] });
+	if (mode === 2) return /* @__PURE__ */ jsxs(Text, { children: [bullet, wrap(sentences.slice(0, animIdx).join(""))] });
+	return /* @__PURE__ */ jsxs(Text, { children: [bullet, sentences.map((s, si) => /* @__PURE__ */ jsx(Text, {
+		dimColor: si >= animIdx,
+		children: s
+	}, si))] });
+};
+//#endregion
+//#region src/ui/tui/primitives/LinesBlock.tsx
+/**
+* LinesBlock — Reveals ReactNode lines one at a time.
+* Each line can contain colors, bold, ASCII art — any JSX.
+*/
+const LinesBlock = ({ lines, interval, active, completed, onComplete, maxHeight }) => {
+	const [revealedCount, setRevealedCount] = useState(0);
+	useEffect(() => {
+		if (!active || revealedCount >= lines.length) return;
+		const timer = setTimeout(() => setRevealedCount((c) => c + 1), revealedCount === 0 ? 0 : interval);
+		return () => clearTimeout(timer);
+	}, [
+		active,
+		revealedCount,
+		lines.length,
+		interval
+	]);
+	useEffect(() => {
+		if (active && revealedCount >= lines.length) onComplete();
+	}, [
+		active,
+		revealedCount,
+		lines.length,
+		onComplete
+	]);
+	const visibleStart = maxHeight != null ? Math.max(0, (completed ? lines.length : revealedCount) - maxHeight) : 0;
+	return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		children: lines.map((line, li) => {
+			if (completed) {
+				if (li < visibleStart) return null;
+				return /* @__PURE__ */ jsx(Box, { children: line }, li);
+			}
+			if (li >= revealedCount || li < visibleStart) return null;
+			return /* @__PURE__ */ jsx(Box, { children: line }, li);
+		})
+	});
+};
+//#endregion
+//#region src/ui/tui/primitives/NodeBlock.tsx
+/**
+* NodeBlock — Renders static JSX, fires onComplete immediately.
+* The sequencer's blockInterval handles dwell time.
+*/
+const NodeBlock = ({ content, active, completed, onComplete }) => {
+	useEffect(() => {
+		if (active) onComplete();
+	}, [active, onComplete]);
+	if (completed) return /* @__PURE__ */ jsx(Text, {
+		dimColor: true,
+		children: content
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children: content });
+};
+//#endregion
+//#region src/ui/tui/primitives/ContentSequencer.tsx
+/**
+* ContentSequencer — Plays content blocks in order.
+*
+* Each block is a self-animating component that fires onComplete() when done.
+* The sequencer waits blockInterval ms between blocks, then advances.
+*
+* Block types:
+*   - string            → TextBlock  (animated text, sugar for { content: '...' })
+*   - { content: str }  → TextBlock  (animated text with per-block overrides)
+*   - { content: JSX }  → NodeBlock  (static JSX)
+*   - { type: 'lines' } → LinesBlock (line-by-line reveal)
+*   - { type: 'clear' } → ClearBlock (page break — hides all prior blocks)
+*/
+/** Resolve the pause after a block completes. */
+function getBlockPause(block, blockInterval) {
+	if (typeof block === "string") return blockInterval;
+	return block.pause ?? blockInterval;
+}
+const ContentSequencer = ({ blocks, mode, maxHeight, availableWidth, bullet, animationInterval, sentenceInterval, lineInterval = 200, blockInterval = 3200, startDelay = 0, initialBlockIdx = 0, onBlockChange, onSequenceComplete }) => {
+	const resuming = initialBlockIdx > 0;
+	const [activeIdx, setActiveIdx] = useState(resuming ? initialBlockIdx : startDelay > 0 ? -1 : 0);
+	const transitionTimer = useRef(null);
+	useEffect(() => {
+		if (resuming || startDelay <= 0 || activeIdx !== -1) return;
+		const timer = setTimeout(() => setActiveIdx(0), startDelay);
+		return () => clearTimeout(timer);
+	}, [startDelay, activeIdx]);
+	const [visibleStart, visibleEnd] = useMemo(() => {
+		if (activeIdx < 0) return [0, -1];
+		if (maxHeight == null || availableWidth == null) return [0, activeIdx];
+		return computeVisibleRange(blocks, activeIdx, availableWidth, maxHeight);
+	}, [
+		blocks,
+		activeIdx,
+		maxHeight,
+		availableWidth
+	]);
+	const handleComplete = useCallback((blockIndex) => {
+		if (blockIndex !== activeIdx) return;
+		if (activeIdx >= blocks.length - 1) {
+			if (onSequenceComplete && !transitionTimer.current) {
+				const pause = getBlockPause(blocks[blockIndex], blockInterval);
+				transitionTimer.current = setTimeout(() => {
+					transitionTimer.current = null;
+					onSequenceComplete();
+				}, pause);
+			}
+			return;
+		}
+		if (transitionTimer.current) return;
+		const pause = getBlockPause(blocks[blockIndex], blockInterval);
+		transitionTimer.current = setTimeout(() => {
+			transitionTimer.current = null;
+			setActiveIdx((i) => {
+				const next = i + 1;
+				onBlockChange?.(next);
+				return next;
+			});
+		}, pause);
+	}, [
+		activeIdx,
+		blocks,
+		blockInterval,
+		onBlockChange,
+		onSequenceComplete
+	]);
+	const clearFloor = useMemo(() => {
+		if (activeIdx >= 0 && isClearBlock(blocks[activeIdx])) return activeIdx;
+		for (let i = activeIdx - 1; i >= 0; i--) if (isClearBlock(blocks[i])) return i + 1;
+		return 0;
+	}, [blocks, activeIdx]);
+	return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		children: blocks.map((block, i) => {
+			if (i > activeIdx) return null;
+			if (i < clearFloor) return null;
+			if (isClearBlock(block) && i < activeIdx) return null;
+			if (i < visibleStart || i > visibleEnd) return null;
+			const active = i === activeIdx;
+			const completed = i < activeIdx;
+			if (completed && isObjectBlock(block)) {
+				const isText = typeof block.content === "string";
+				if (!(block.persist ?? isText)) return null;
+			}
+			return /* @__PURE__ */ jsx(Box, {
+				flexDirection: "column",
+				marginBottom: 1,
+				children: /* @__PURE__ */ jsx(BlockRenderer, {
+					block,
+					active,
+					completed,
+					onComplete: () => handleComplete(i),
+					mode,
+					bullet,
+					animationInterval,
+					sentenceInterval,
+					lineInterval,
+					maxHeight,
+					availableWidth
+				})
+			}, i);
+		})
+	});
+};
+const BlockRenderer = ({ block, active, completed, onComplete, mode, bullet, animationInterval, sentenceInterval, lineInterval, maxHeight, availableWidth }) => {
+	if (isClearBlock(block)) {
+		useEffect(() => {
+			if (active) onComplete();
+		}, [active, onComplete]);
+		return null;
+	}
+	if (typeof block === "string") return /* @__PURE__ */ jsx(TextBlock, {
+		text: block,
+		active,
+		completed,
+		onComplete,
+		mode,
+		bullet,
+		animationInterval,
+		sentenceInterval,
+		maxHeight,
+		availableWidth
+	});
+	if (isLinesBlock(block)) return /* @__PURE__ */ jsx(LinesBlock, {
+		lines: block.lines,
+		interval: block.interval ?? lineInterval,
+		active,
+		completed,
+		onComplete,
+		maxHeight
+	});
+	if (typeof block.content === "string") return /* @__PURE__ */ jsx(TextBlock, {
+		text: block.content,
+		active,
+		completed,
+		onComplete,
+		mode: block.mode ?? mode,
+		bullet,
+		animationInterval: block.animationInterval ?? animationInterval,
+		sentenceInterval: block.sentenceInterval ?? sentenceInterval,
+		maxHeight,
+		availableWidth
+	});
+	return /* @__PURE__ */ jsx(NodeBlock, {
+		content: block.content,
+		active,
+		completed,
+		onComplete
+	});
+};
+//#endregion
+//#region src/ui/tui/components/LearnCard.tsx
+/**
+* LearnCard — PostHog educational content with animated text reveal.
+*/
+/**
+* StatusPeekTrigger — Fires the status bar expansion once, renders nothing.
+* The peek is guarded by peekedRef so re-mounts are safe.
+*/
+const StatusPeekTrigger = ({ store, duration = 1e4, peekedRef }) => {
+	useEffect(() => {
+		if (peekedRef.current) return;
+		peekedRef.current = true;
+		store?.setStatusExpanded(true);
+		setTimeout(() => {
+			store?.setStatusExpanded(false);
+		}, duration);
+	}, [
+		store,
+		duration,
+		peekedRef
+	]);
+	return /* @__PURE__ */ jsx(Text, { children: "You can view the Wizard's status below." });
+};
+const POSTHOG_DATA_FLOW = {
+	type: "lines",
+	interval: 500,
+	pause: 8e3,
+	lines: [
+		/* @__PURE__ */ jsx(Text, {
+			color: "gray",
+			children: "  ┌──────────────────────────────┐"
+		}),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "  │ "
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: "cyan",
+				children: "Your App"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "                     │"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "  │   │ "
+			}),
+			/* @__PURE__ */ jsx(Text, { children: "posthog.capture()" }),
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "        │"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "  │   │  "
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "custom events"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "           │"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "  │   │  "
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "custom properties"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "       │"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "  │   │  "
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "person profiles"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "         │"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "  │   ↓  "
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "groups"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "                  │"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "  │ "
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: Colors.accent,
+				children: "PostHog SDK"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "                  │"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "  │   ↓ "
+			}),
+			/* @__PURE__ */ jsx(Text, { children: "HTTP" }),
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "                     │"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "  │ "
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: Colors.accent,
+				children: "PostHog Cloud"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "                │"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "  │   ↓ "
+			}),
+			/* @__PURE__ */ jsx(Text, { children: "query + visualize" }),
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "        │"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "  │ "
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: "green",
+				children: "Dashboards & Insights"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "        │"
+			})
+		] }),
+		/* @__PURE__ */ jsx(Text, {
+			color: "gray",
+			children: "  └──────────────────────────────┘"
+		})
+	]
+};
+const PRODUCT_SUITE_BLOCK = {
+	type: "lines",
+	interval: 1e3,
+	pause: 15e3,
+	lines: [
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "  ◆ "
+			}),
+			"Product Analytics     ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "◆ "
+			}),
+			"Error Tracking"
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "  ◆ "
+			}),
+			"Web Analytics         ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "◆ "
+			}),
+			"Session Replay"
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "  ◆ "
+			}),
+			"Feature Flags         ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "◆ "
+			}),
+			"Data Pipelines"
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "  ◆ "
+			}),
+			"Experiments           ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "◆ "
+			}),
+			"Data Warehouse"
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "  ◆ "
+			}),
+			"LLM Analytics         ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "◆ "
+			}),
+			"Surveys"
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "  ◆ "
+			}),
+			"Workflows             ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "◆ "
+			}),
+			"Logs"
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "  ◆ "
+			}),
+			"Product Tours         ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "◆ "
+			}),
+			"Support"
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "  ◆ "
+			}),
+			"Revenue Analytics     ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "◆ "
+			}),
+			"Endpoints"
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
+			color: "cyan",
+			children: "  ◆ "
+		}), "Customer Analytics"] })
+	]
+};
+const LINE_CHART_BLOCK = {
+	type: "lines",
+	interval: 300,
+	pause: 6e3,
+	lines: [
+		/* @__PURE__ */ jsx(Text, {
+			bold: true,
+			children: "  Trends · user signups (monthly)"
+		}),
+		/* @__PURE__ */ jsx(Text, { children: " " }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "  10k ┤"
+			}),
+			"                          ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "╭──"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: " 9,575"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "      │"
+			}),
+			"                         ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "╭╯"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: " 7.5k ┤"
+			}),
+			"                        ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "╭╯"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "      │"
+			}),
+			"                      ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "╭─╯"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "   5k ┤"
+			}),
+			"                    ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "╭─╯"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "      │"
+			}),
+			"                 ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "╭──╯"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: " 2.5k ┤"
+			}),
+			"             ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "╭───╯"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "gray",
+				children: "      │"
+			}),
+			"      ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "╭──────╯"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
+			color: "gray",
+			children: "    0 ┤"
+		}), /* @__PURE__ */ jsx(Text, {
+			color: "cyan",
+			children: "──────╯"
+		})] }),
+		/* @__PURE__ */ jsx(Text, {
+			color: "gray",
+			children: "      └┬─────┬─────┬─────┬─────┬──"
+		}),
+		/* @__PURE__ */ jsx(Text, {
+			dimColor: true,
+			children: "       May   Aug   Nov   Feb   May"
+		})
+	]
+};
+const FUNNEL_BLOCK = {
+	type: "lines",
+	interval: 200,
+	pause: 8e3,
+	lines: [
+		/* @__PURE__ */ jsx(Text, {
+			bold: true,
+			children: "  Funnel · ride conversion"
+		}),
+		/* @__PURE__ */ jsx(Text, { children: " " }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			"  ",
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				children: "1"
+			}),
+			"  app_launched",
+			"                     ",
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: "green",
+				children: "100.00%"
+			})
+		] }),
+		/* @__PURE__ */ jsx(Text, {
+			color: "cyan",
+			children: "     ██████████████████████████████"
+		}),
+		/* @__PURE__ */ jsx(Text, {
+			dimColor: true,
+			children: "     → 1,200 users"
+		}),
+		/* @__PURE__ */ jsx(Text, { children: " " }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			"  ",
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				children: "2"
+			}),
+			"  ride_requested",
+			"       ",
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "avg 2m 30s"
+			}),
+			"   ",
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: "green",
+				children: "72.00%"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			"     ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "██████████████████████"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "░░░░░░░░░"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			"     ",
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "→ 864 users"
+			}),
+			"  ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "red",
+				children: "↘"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: " 336 (28%)"
+			})
+		] }),
+		/* @__PURE__ */ jsx(Text, { children: " " }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			"  ",
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				children: "3"
+			}),
+			"  ride_accepted",
+			"        ",
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "avg 5m 12s"
+			}),
+			"   ",
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: "green",
+				children: "51.00%"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			"     ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "██████████████████"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "░░░░░░░░░░░░░"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			"     ",
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "→ 612 users"
+			}),
+			"  ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "red",
+				children: "↘"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: " 252 (29%)"
+			})
+		] }),
+		/* @__PURE__ */ jsx(Text, { children: " " }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			"  ",
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				children: "4"
+			}),
+			"  ride_started",
+			"         ",
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "avg 1m 45s"
+			}),
+			"   ",
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: "green",
+				children: "38.00%"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			"     ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				children: "█████████████"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "░░░░░░░░░░░░░░░░░░"
+			})
+		] }),
+		/* @__PURE__ */ jsxs(Text, { children: [
+			"     ",
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "→ 456 users"
+			}),
+			"  ",
+			/* @__PURE__ */ jsx(Text, {
+				color: "red",
+				children: "↘"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: " 156 (25%)"
+			})
+		] })
+	]
+};
+/** Fixed chrome: ScreenContainer (3) + TabContainer tab bar (2) */
+const FIXED_CHROME = 5;
+const HEADER_ROWS = 2;
+const MIN_CONTENT_ROWS = 6;
+const LearnCard = ({ store, onComplete }) => {
+	const peekedRef = useRef(false);
+	const [columns, rows] = useStdoutDimensions();
+	const blocks = useMemo(() => [
+		{
+			content: "Welcome.",
+			pause: 3e3,
+			mode: 0,
+			animationInterval: 160
+		},
+		{
+			content: "The Wizard is an agent.",
+			pause: 4e3
+		},
+		{
+			content: "It handles the entire PostHog setup process on your behalf.",
+			pause: 5e3
+		},
+		{
+			content: "As we speak, it's building a plan to set up PostHog in your project.",
+			pause: 6e3
+		},
+		{
+			type: "clear",
+			pause: 2e3
+		},
+		{
+			pause: 5e3,
+			persist: true,
+			content: /* @__PURE__ */ jsx(StatusPeekTrigger, {
+				store,
+				peekedRef
+			})
+		},
+		{
+			pause: 6e3,
+			content: /* @__PURE__ */ jsxs(Text, { children: [
+				"Press",
+				" ",
+				/* @__PURE__ */ jsx(Text, {
+					color: Colors.accent,
+					bold: true,
+					children: "S"
+				}),
+				" ",
+				"to expand or collapse the status."
+			] })
+		},
+		{
+			type: "clear",
+			pause: 2e3
+		},
+		{
+			content: "It takes about eight minutes.",
+			pause: 2e3
+		},
+		{
+			content: "So grab some coffee ☕️.",
+			pause: 2e3
+		},
+		{
+			content: "Or stick around and learn about PostHog.",
+			pause: 5e3
+		},
+		{
+			type: "clear",
+			pause: 3e3
+		},
+		{
+			content: "Events are the foundation of the PostHog platform.",
+			pause: 4e3
+		},
+		{
+			content: "Every time an action is performed in your codebase — like button clicks, function calls, or thrown errors — we can capture an event.",
+			pause: 6e3
+		},
+		{
+			content: "Events are sent to PostHog and joined with other product data.",
+			pause: 6e3
+		},
+		{
+			type: "clear",
+			pause: 1e3
+		},
+		{
+			content: "Here's the flow.",
+			pause: 1e3
+		},
+		POSTHOG_DATA_FLOW,
+		{
+			type: "clear",
+			pause: 2e3
+		},
+		{
+			content: "With enough event data, you can answer powerful questions about your product.",
+			pause: 4e3
+		},
+		{
+			content: "And create insights.",
+			pause: 4e3
+		},
+		{
+			type: "clear",
+			pause: 500
+		},
+		{
+			content: "Like trends to measure growth.",
+			pause: 2500
+		},
+		LINE_CHART_BLOCK,
+		{
+			type: "clear",
+			pause: 500
+		},
+		{
+			content: "Or funnels to reveal bottlenecks.",
+			pause: 2500
+		},
+		FUNNEL_BLOCK,
+		{
+			type: "clear",
+			pause: 1e3
+		},
+		{
+			content: "Use those signals to decide what to build next.",
+			pause: 4e3
+		},
+		{
+			content: "PostHog has all the dev tools you need.",
+			pause: 3e3
+		},
+		PRODUCT_SUITE_BLOCK
+	], [store]);
+	const statusBarRows = (store ? store.statusMessages.length > 0 : false) ? (store?.statusExpanded ? 10 : 2) + 1 : 0;
+	const contentHeight = rows - FIXED_CHROME - statusBarRows;
+	const tooSmall = contentHeight < MIN_CONTENT_ROWS;
+	const maxHeight = Math.max(1, contentHeight - HEADER_ROWS);
+	const paneWidth = Math.floor((Math.min(120, columns) - 2) / 2) - 2;
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		paddingX: 1,
+		display: tooSmall ? "none" : "flex",
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: Colors.accent,
+				children: "Learn"
+			}),
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			/* @__PURE__ */ jsx(ContentSequencer, {
+				blocks,
+				mode: 2,
+				maxHeight,
+				availableWidth: paneWidth,
+				startDelay: 2e3,
+				initialBlockIdx: store?.learnCardBlockIdx ?? 0,
+				onBlockChange: (idx) => store?.setLearnCardBlockIdx(idx),
+				onSequenceComplete: onComplete
+			})
+		]
+	});
+};
+//#endregion
+//#region src/ui/tui/components/TipsCard.tsx
+/**
+* TipsCard — Shows PostHog tips during the agent run.
+* Reactively shows/hides tips based on discovered features.
+* Supports toggling additional features via key bindings.
+*/
+const TIPS = [
+	{
+		id: "persons",
+		title: "You can also track people and groups with PostHog",
+		description: "Events can be associated with the humans who generate them, letting you understand a specific user or customer's situation."
+	},
+	{
+		id: "properties",
+		title: "Get way more detail using properties",
+		description: "Events and person records can have any properties you want. Track things like how they found your website, what subscription tier they choose, and much more."
+	},
+	{
+		id: "stripe",
+		title: "You can track Stripe revenue with PostHog",
+		description: "Add Stripe as a data source while you wait:",
+		url: "https://app.posthog.com/project/data-warehouse/new-source?kind=Stripe",
+		visible: (store) => store.session.discoveredFeatures.includes("stripe")
+	},
+	{
+		id: "llm",
+		title: "PostHog can also help you track your LLM costs",
+		description: "",
+		visible: (store) => store.session.discoveredFeatures.includes("llm"),
+		toggle: {
+			key: "l",
+			feature: "llm",
+			enabledLabel: "LLM analytics setup queued next",
+			prompt: "We detected LLM dependencies in your project.",
+			isEnabled: (store) => store.session.llmOptIn
+		}
+	}
+];
+const TipsCard = ({ store }) => {
+	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);
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		paddingX: 1,
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: Colors.accent,
+				children: "Tips"
+			}),
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			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, {
+					color: Colors.accent,
+					children: [Icons.diamond, " "]
+				}), /* @__PURE__ */ jsx(Text, {
+					bold: true,
+					children: tip.title
+				})] }), tip.toggle ? tip.toggle.isEnabled(store) ? /* @__PURE__ */ jsxs(Text, {
+					color: Colors.success,
+					children: [
+						Icons.check,
+						" ",
+						tip.toggle.enabledLabel
+					]
+				}) : /* @__PURE__ */ jsxs(Text, {
+					dimColor: true,
+					children: [
+						tip.toggle.prompt,
+						" Press",
+						" ",
+						/* @__PURE__ */ jsx(Text, {
+							bold: true,
+							color: Colors.accent,
+							children: tip.toggle.key.toUpperCase()
+						}),
+						" ",
+						"to enable."
+					]
+				}) : /* @__PURE__ */ jsxs(Text, {
+					dimColor: true,
+					children: [tip.description, tip.url && /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx(Text, {
+						color: "cyan",
+						children: tip.url
+					})] })]
+				})]
+			}, tip.id))
+		]
+	});
+};
+//#endregion
+//#region src/ui/tui/components/ServiceHealthList.tsx
+/**
+* ServiceHealthList — Shared component for displaying service health status.
+*
+* Used by HealthCheckScreen (blocking services only) and HealthWarningsTab (all services).
+*/
+/** Keys that are component-level detail — shown inline under their parent. */
+const COMPONENT_KEYS = [
+	"posthogComponents",
+	"npmComponents",
+	"cloudflareComponents"
+];
+/** Map component key → its parent "overall" key */
+const COMPONENT_PARENT = {
+	posthogComponents: "posthogOverall",
+	npmComponents: "npmOverall",
+	cloudflareComponents: "cloudflareOverall"
+};
+function statusIcon(status) {
+	switch (status) {
+		case "down": return {
+			icon: Icons.squareFilled,
+			color: "red"
+		};
+		case "degraded": return {
+			icon: Icons.squareFilled,
+			color: "#DC9300"
+		};
+		case "healthy": return {
+			icon: Icons.check,
+			color: "green"
+		};
+	}
+}
+const ServiceHealthList = ({ health, filterKeys, showHealthy = true }) => {
+	const topLevelKeys = Object.keys(health).filter((k) => !COMPONENT_KEYS.includes(k));
+	return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		paddingLeft: 1,
+		children: (filterKeys ? topLevelKeys.filter((k) => filterKeys.includes(k)) : topLevelKeys).map((key) => {
+			const result = health[key];
+			if (!showHealthy && result.status === "healthy") return null;
+			const { icon, color } = statusIcon(result.status);
+			const label = SERVICE_LABELS[key];
+			const componentKey = Object.entries(COMPONENT_PARENT).find(([, parent]) => parent === key)?.[0];
+			const affectedComponents = (componentKey ? health[componentKey] : void 0)?.degradedOrDownComponents ?? [];
+			return /* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				children: [/* @__PURE__ */ jsxs(Text, { children: [
+					/* @__PURE__ */ jsx(Text, {
+						color,
+						children: icon
+					}),
+					" ",
+					/* @__PURE__ */ jsx(Text, {
+						bold: result.status !== "healthy",
+						children: label
+					})
+				] }), affectedComponents.length > 0 && /* @__PURE__ */ jsxs(Box, {
+					flexDirection: "column",
+					paddingLeft: 3,
+					children: [affectedComponents.slice(0, 5).map((c) => {
+						const ci = statusIcon(c.status);
+						return /* @__PURE__ */ jsxs(Text, {
+							dimColor: true,
+							children: [
+								/* @__PURE__ */ jsx(Text, {
+									color: ci.color,
+									children: ci.icon
+								}),
+								" ",
+								c.name
+							]
+						}, c.name);
+					}), affectedComponents.length > 5 && /* @__PURE__ */ jsxs(Text, {
+						dimColor: true,
+						children: [
+							"+",
+							affectedComponents.length - 5,
+							" more"
+						]
+					})]
+				})]
+			}, key);
+		})
+	});
+};
+//#endregion
+//#region src/ui/tui/screens/McpScreen.tsx
+/**
+* McpScreen — MCP server install/remove flow.
+*
+* Uses an McpInstaller service (passed via props) instead of
+* importing business logic directly. Testable, no dynamic imports.
+*
+* Supports two modes via the `mode` prop:
+*   - 'install': detect clients → confirm → [pick clients] → pick features → install
+*   - 'remove': detect installed clients → confirm → remove
+*
+* When done, calls store.setMcpComplete(). The router resolves to outro.
+*/
+const markDone = (store, outcome, clients = [], standalone = false) => {
+	store.setMcpComplete(outcome, clients);
+	if (standalone) process.exit(0);
+};
+const McpScreen = ({ store, installer, mode = "install", standalone = false }) => {
+	useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+	useInput(() => void 0);
+	const isRemove = mode === "remove";
+	const [phase, setPhase] = useState("detecting");
+	const [clients, setClients] = useState([]);
+	const [selectedClientNames, setSelectedClientNames] = useState([]);
+	const [resultClients, setResultClients] = useState([]);
+	useEffect(() => {
+		(async () => {
+			try {
+				const detected = await installer.detectClients();
+				if (detected.length === 0) {
+					setPhase("none");
+					setTimeout(() => markDone(store, "no_clients", [], standalone), 1500);
+				} else {
+					setClients(detected);
+					setPhase("ask");
+				}
+			} catch {
+				setPhase("none");
+				setTimeout(() => markDone(store, "failed", [], standalone), 1500);
+			}
+		})();
+	}, [installer]);
+	const proceedToFeatureSelectOrInstall = (clientNames) => {
+		setSelectedClientNames(clientNames);
+		if (store.session.mcpFeatures) doInstall(clientNames, store.session.mcpFeatures);
+		else setPhase("feature-select");
+	};
+	const handleConfirm = () => {
+		if (isRemove) doRemove();
+		else if (clients.length === 1) proceedToFeatureSelectOrInstall(clients.map((c) => c.name));
+		else setPhase("pick");
+	};
+	const handleSkip = () => {
+		markDone(store, "skipped", [], standalone);
+	};
+	const doInstall = async (names, features) => {
+		setPhase("working");
+		let result = [];
+		try {
+			result = await installer.install(names, features, store.session.apiKey);
+			setResultClients(result);
+		} catch {
+			setResultClients([]);
+		}
+		setPhase("done");
+		const outcome = result.length > 0 ? "installed" : "failed";
+		setTimeout(() => markDone(store, outcome, result, standalone), 2e3);
+	};
+	const doRemove = async () => {
+		setPhase("working");
+		let result = [];
+		try {
+			result = await installer.remove();
+			setResultClients(result);
+		} catch {
+			setResultClients([]);
+		}
+		setPhase("done");
+		const outcome = result.length > 0 ? "installed" : "failed";
+		setTimeout(() => markDone(store, outcome, result, standalone), 2e3);
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: [/* @__PURE__ */ jsxs(Text, {
+			bold: true,
+			color: Colors.accent,
+			children: ["MCP Server ", isRemove ? "Removal" : "Setup"]
+		}), /* @__PURE__ */ jsxs(Box, {
+			marginTop: 1,
+			flexDirection: "column",
+			children: [
+				phase === "detecting" && /* @__PURE__ */ jsx(Text, {
+					dimColor: true,
+					children: "Detecting supported editors..."
+				}),
+				phase === "none" && /* @__PURE__ */ jsxs(Text, {
+					dimColor: true,
+					children: [
+						"No ",
+						isRemove ? "installed" : "supported",
+						" MCP clients detected. Skipping..."
+					]
+				}),
+				phase === "ask" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Text, {
+					dimColor: true,
+					children: ["Detected: ", clients.map((c) => c.name).join(", ")]
+				}), /* @__PURE__ */ jsx(Box, {
+					marginTop: 1,
+					children: /* @__PURE__ */ jsx(ConfirmationInput, {
+						message: isRemove ? "Remove the PostHog MCP server from your editor?" : "Install the PostHog MCP server to your editor?",
+						confirmLabel: isRemove ? "Remove MCP" : "Install MCP",
+						cancelLabel: "No thanks",
+						onConfirm: handleConfirm,
+						onCancel: handleSkip
+					})
+				})] }),
+				phase === "pick" && /* @__PURE__ */ jsx(PickerMenu, {
+					message: "Select editor to install MCP server",
+					options: clients.map((c) => ({
+						label: c.name,
+						value: c.name
+					})),
+					mode: "multi",
+					onSelect: (selected) => {
+						proceedToFeatureSelectOrInstall(Array.isArray(selected) ? selected : [selected]);
+					}
+				}),
+				phase === "feature-select" && /* @__PURE__ */ jsx(GroupedPickerMenu, {
+					message: "Select features to enable",
+					groups: AVAILABLE_FEATURES,
+					initialSelected: [...ALL_FEATURE_VALUES],
+					onSelect: (features) => {
+						doInstall(selectedClientNames, features);
+					}
+				}),
+				phase === "working" && /* @__PURE__ */ jsxs(Text, {
+					dimColor: true,
+					children: [isRemove ? "Removing" : "Installing", " MCP server..."]
+				}),
+				phase === "done" && /* @__PURE__ */ jsx(Box, {
+					flexDirection: "column",
+					children: resultClients.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Text, {
+						color: "green",
+						bold: true,
+						children: [
+							"✔",
+							" MCP server",
+							" ",
+							isRemove ? "removed from" : "installed for",
+							":"
+						]
+					}), resultClients.map((name, i) => /* @__PURE__ */ jsxs(Text, { children: [
+						" ",
+						"•",
+						" ",
+						name
+					] }, i))] }) : /* @__PURE__ */ jsxs(Text, {
+						dimColor: true,
+						children: [isRemove ? "Removal" : "Installation", " skipped."]
+					})
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { SplitView as _, HNViewer as a, Icons as b, EventPlanViewer as c, ConfirmationInput as d, GroupedPickerMenu as f, LoadingBox as g, ProgressList as h, LearnCard as i, LogViewer as l, PickerMenu as m, ServiceHealthList as n, TabContainer as o, useStdoutDimensions as p, TipsCard as r, ScreenContainer as s, McpScreen as t, ModalOverlay as u, CardLayout as v, WizardStore as x, Colors as y };
+
+//# sourceMappingURL=McpScreen-BmHapIaP.js.map