@posthog/wizard 2.18.0 → 2.20.0

package/dist/{slides-DwvXZ8iS.js → slides-BEshbXqG.js}

@@ -1,12 +1,13 @@
-import { g as SERVICE_LABELS, s as logToFile } from "./debug-BorYMfpE.js";
+import { g as SERVICE_LABELS, s as logToFile } from "./debug-BJu_sS4l.js";
 import { n as isTaskStatus } from "./wizard-ui-YdGFRyu_.js";
-import { r as sessionProperties, t as analytics } from "./analytics-C-zcTO6g.js";
-import { i as buildSession } from "./wizard-session-d27JGRGi.js";
-import { v as AUDIT_SEVERITY_STYLE } from "./agent-interface-C2VEF-BD.js";
-import { c as computeVisibleRange, d as isObjectBlock, f as Colors, l as isClearBlock, p as Icons, s as TextBlock, u as isLinesBlock } from "./posthog-integration-B_DLodqr.js";
+import { r as sessionProperties, t as analytics } from "./analytics-C8lJzXjY.js";
+import { i as buildSession } from "./wizard-session-G3VWD6hv.js";
+import { y as AUDIT_SEVERITY_STYLE } from "./agent-interface-B-LAvrNL.js";
+import { c as computeVisibleRange, d as isObjectBlock, f as Colors, l as isClearBlock, p as Icons, s as TextBlock, u as isLinesBlock } from "./posthog-integration-8iTgqy2J.js";
 import { a as getProgramConfig, i as Program, l as getKindMeta, r as PROGRAM_REGISTRY } from "./bin.js";
-import { n as AVAILABLE_FEATURES, t as ALL_FEATURE_VALUES } from "./defaults-DA3-9dHT.js";
+import { n as AVAILABLE_FEATURES, o as isAllFeaturesSelected, t as ALL_FEATURE_VALUES } from "./defaults-BNWIWzjc.js";
 import * as fs$1 from "fs";
+import opn from "opn";
 import { Box, Text, measureElement, useInput, useStdout } from "ink";
 import { Component, Fragment, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -159,8 +160,7 @@ var WizardStore = class {
 		this._initFromProgram(program);
 	}
 	/**
-	* Scan program steps for gate predicates and onInit callbacks.
-	* Creates gate promises and fires init work.
+	* Scan program steps for gate predicates and create gate promises.
 	*/
 	_initFromProgram(program) {
 		const steps = getProgramConfig(program).steps;
@@ -176,6 +176,15 @@ var WizardStore = class {
 				resolved: false
 			});
 		}
+	}
+	/**
+	* Run the program steps' onInit callbacks. startTUI calls this once
+	* the screens are actually rendering — constructing a store alone
+	* (tests, playground) must not fire init work like the health-check
+	* pre-flight, whose probes belong only to flows that show its screen.
+	*/
+	runInitHooks() {
+		const steps = getProgramConfig(this.router.activeProgram).steps;
 		const getSession = () => this.session;
 		const ctx = {
 			get session() {
@@ -320,6 +329,7 @@ var WizardStore = class {
 	}
 	/** User dismissed the blocking outage screen. Gate resolves via _checkGates(). */
 	dismissOutage() {
+		logToFile("[health-checks] user dismissed outage screen, continuing");
 		this.$session.setKey("outageDismissed", true);
 		this.emitChange();
 	}
@@ -461,13 +471,15 @@ var WizardStore = class {
 		analytics.wizardCapture("feature enabled", { feature });
 		this.emitChange();
 	}
-	setMcpComplete(outcome = "skipped", installedClients = []) {
+	setMcpComplete(outcome = "skipped", installedClients = [], featuresSelected) {
 		this.$session.setKey("mcpComplete", true);
 		this.$session.setKey("mcpOutcome", outcome);
 		this.$session.setKey("mcpInstalledClients", installedClients);
+		const featuresPayload = outcome === "installed" && featuresSelected !== void 0 ? { mcp_features_selected: featuresSelected } : {};
 		analytics.wizardCapture("mcp complete", {
 			mcp_outcome: outcome,
 			mcp_installed_clients: installedClients,
+			...featuresPayload,
 			...sessionProperties(this.session)
 		});
 		this.emitChange();
@@ -484,6 +496,14 @@ var WizardStore = class {
 		this.$session.setKey("mcpSuggestedPromptsDismissed", true);
 		this.emitChange();
 	}
+	setSlackStepDismissed() {
+		this.$session.setKey("slackStepDismissed", true);
+		this.emitChange();
+	}
+	setSlackConnected(connected) {
+		this.$session.setKey("slackConnected", connected);
+		this.emitChange();
+	}
 	setOutroDismissed() {
 		this.$session.setKey("outroDismissed", true);
 		this.emitChange();
@@ -888,6 +908,27 @@ function useKeyBindings(id, bindings) {
 * Key bindings are declared via useKeyBindings, which auto-registers
 * hints in the KeyboardHintsBar.
 */
+/**
+* Step through a column's options in `dir`, wrapping, until an enabled
+* option is found. Returns `from` unchanged if the column is entirely
+* disabled.
+*/
+function stepEnabled(options, rows, from, dir) {
+	const colStart = Math.floor(from / rows) * rows;
+	const colLen = Math.min(rows, options.length - colStart);
+	let row = from % rows;
+	for (let i = 0; i < colLen; i++) {
+		row = (row + dir + colLen) % colLen;
+		const idx = colStart + row;
+		if (!options[idx]?.disabled) return idx;
+	}
+	return from;
+}
+/** Index of the first enabled option, for the initial focus. */
+function firstEnabled(options) {
+	const idx = options.findIndex((o) => !o.disabled);
+	return idx === -1 ? 0 : idx;
+}
 const PickerMenu = ({ message, options, mode = "single", centered = false, columns = 1, optionMarginBottom = 0, onSelect }) => {
 	if (mode === "multi") return /* @__PURE__ */ jsx(MultiPickerMenu, {
 		message,
@@ -908,22 +949,18 @@ const PickerMenu = ({ message, options, mode = "single", centered = false, colum
 };
 /** Custom single-select with triangle indicator and accent highlight. */
 const SinglePickerMenu = ({ message, options, centered = false, columns = 1, optionMarginBottom = 0, onSelect }) => {
-	const [focused, setFocused] = useState(0);
+	const [focused, setFocused] = useState(() => firstEnabled(options));
 	const rows = Math.ceil(options.length / columns);
+	useEffect(() => {
+		if (focused >= options.length || options[focused]?.disabled) setFocused(firstEnabled(options));
+	}, [options, focused]);
 	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);
-			}
+			if (key.upArrow) setFocused(stepEnabled(options, rows, focused, -1));
+			if (key.downArrow) setFocused(stepEnabled(options, rows, focused, 1));
 		}
 	}, {
 		match: "return",
@@ -931,7 +968,7 @@ const SinglePickerMenu = ({ message, options, centered = false, columns = 1, opt
 		action: "select",
 		handler: () => {
 			const selected = options[focused];
-			if (selected) onSelect(selected.value);
+			if (selected && !selected.disabled) onSelect(selected.value);
 		}
 	}];
 	if (columns > 1) bindings.splice(1, 0, {
@@ -941,14 +978,17 @@ const SinglePickerMenu = ({ message, options, centered = false, columns = 1, opt
 		handler: (_input, key) => {
 			const col = Math.floor(focused / rows);
 			const row = focused % rows;
+			let next = focused;
 			if (key.leftArrow) {
 				const prevCol = col > 0 ? col - 1 : columns - 1;
-				setFocused(Math.min(prevCol * rows + row, options.length - 1));
+				next = 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));
+				next = Math.min(nextCol * rows + row, options.length - 1);
 			}
+			if (options[next]?.disabled) next = stepEnabled(options, rows, next, 1);
+			setFocused(next);
 		}
 	});
 	useKeyBindings("single-picker", bindings);
@@ -969,16 +1009,23 @@ const SinglePickerMenu = ({ message, options, centered = false, columns = 1, opt
 					return /* @__PURE__ */ jsxs(Box, {
 						gap: 1,
 						marginBottom: optionMarginBottom,
-						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
-						})]
+						children: [
+							/* @__PURE__ */ jsx(Text, {
+								color: isFocused ? Colors.accent : void 0,
+								dimColor: !isFocused,
+								children: isFocused ? Icons.triangleSmallRight : " "
+							}),
+							opt.icon && /* @__PURE__ */ jsx(Text, {
+								color: opt.icon.color,
+								children: opt.icon.glyph
+							}),
+							/* @__PURE__ */ jsx(Text, {
+								color: opt.disabled ? Colors.muted : isFocused ? Colors.accent : void 0,
+								bold: isFocused && !opt.disabled,
+								dimColor: !isFocused || opt.disabled,
+								children: label
+							})
+						]
 					}, flatIdx);
 				})
 			}, colIdx))
@@ -987,24 +1034,20 @@ const SinglePickerMenu = ({ message, options, centered = false, columns = 1, opt
 };
 /** Custom multi-select with checkbox glyphs and accent highlight. */
 const MultiPickerMenu = ({ message, options, centered = false, columns = 1, optionMarginBottom = 0, onSelect }) => {
-	const [focused, setFocused] = useState(0);
+	const [focused, setFocused] = useState(() => firstEnabled(options));
 	const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
 	const rows = Math.ceil(options.length / columns);
+	useEffect(() => {
+		if (focused >= options.length || options[focused]?.disabled) setFocused(firstEnabled(options));
+	}, [options, focused]);
 	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);
-				}
+				if (key.upArrow) setFocused(stepEnabled(options, rows, focused, -1));
+				if (key.downArrow) setFocused(stepEnabled(options, rows, focused, 1));
 			}
 		},
 		{
@@ -1012,10 +1055,16 @@ const MultiPickerMenu = ({ message, options, centered = false, columns = 1, opti
 			label: "space",
 			action: "toggle",
 			handler: () => {
+				if (options[focused]?.disabled) return;
 				setSelected((prev) => {
 					const next = new Set(prev);
-					if (next.has(focused)) next.delete(focused);
-					else next.add(focused);
+					if (next.has(focused)) {
+						next.delete(focused);
+						return next;
+					}
+					if (options[focused]?.exclusive) return new Set([focused]);
+					for (const i of next) if (options[i]?.exclusive) next.delete(i);
+					next.add(focused);
 					return next;
 				});
 			}
@@ -1027,7 +1076,7 @@ const MultiPickerMenu = ({ message, options, centered = false, columns = 1, opti
 			handler: () => {
 				if (selected.size === 0) {
 					const hovered = options[focused];
-					if (hovered) onSelect(hovered.value);
+					if (hovered && !hovered.disabled) onSelect(hovered.value);
 				} else onSelect([...selected].sort().map((i) => options[i].value));
 			}
 		}
@@ -1039,14 +1088,17 @@ const MultiPickerMenu = ({ message, options, centered = false, columns = 1, opti
 		handler: (_input, key) => {
 			const col = Math.floor(focused / rows);
 			const row = focused % rows;
+			let next = focused;
 			if (key.leftArrow) {
 				const prevCol = col > 0 ? col - 1 : columns - 1;
-				setFocused(Math.min(prevCol * rows + row, options.length - 1));
+				next = 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));
+				next = Math.min(nextCol * rows + row, options.length - 1);
 			}
+			if (options[next]?.disabled) next = stepEnabled(options, rows, next, 1);
+			setFocused(next);
 		}
 	});
 	useKeyBindings("multi-picker", bindings);
@@ -1071,16 +1123,23 @@ const MultiPickerMenu = ({ message, options, centered = false, columns = 1, opti
 					return /* @__PURE__ */ jsxs(Box, {
 						gap: 1,
 						marginBottom: optionMarginBottom,
-						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
-						})]
+						children: [
+							/* @__PURE__ */ jsx(Text, {
+								color: isSelected ? "white" : Colors.muted,
+								dimColor: !isFocused && !isSelected,
+								children: checkbox
+							}),
+							opt.icon && /* @__PURE__ */ jsx(Text, {
+								color: opt.icon.color,
+								children: opt.icon.glyph
+							}),
+							/* @__PURE__ */ jsx(Text, {
+								color: opt.disabled ? Colors.muted : isFocused ? Colors.accent : void 0,
+								bold: isFocused && !opt.disabled,
+								dimColor: !isFocused || opt.disabled,
+								children: label
+							})
+						]
 					}, flatIdx);
 				})
 			}, colIdx))
@@ -1748,6 +1807,7 @@ var ScreenErrorBoundary = class extends Component {
 	}
 	componentDidCatch(error) {
 		const { store } = this.props;
+		logToFile("[screen-error-boundary]", error);
 		console.error("[ScreenErrorBoundary]", error.message, error.stack);
 		store.setOutroData({
 			kind: "error",
@@ -2321,6 +2381,12 @@ const TIPS = [
 		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: "slack",
+		title: "Use PostHog in Slack",
+		description: "Connect the PostHog Slack app to analyze data and ship product changes — deploy flags, open PRs, run queries — just by tagging @PostHog:",
+		url: "https://posthog.com/slack-app"
+	},
 	{
 		id: "stripe",
 		title: "You can track Stripe revenue with PostHog",
@@ -2613,8 +2679,22 @@ const IssueRow = ({ issue, docsWidth }) => {
 *
 * When done, calls store.setMcpComplete(). The router resolves to outro.
 */
-const markDone = (store, outcome, clients = []) => {
-	store.setMcpComplete(outcome, clients);
+const markDone = (store, outcome, clients = [], featuresSelected) => {
+	store.setMcpComplete(outcome, clients, featuresSelected);
+};
+const reportFeatures = (features) => isAllFeaturesSelected(features) ? "all" : features;
+/**
+* Connector step prompt — Enter continues (opens the connector page). There's
+* no skip: picking the connector commits to opening it.
+*/
+const ConnectorContinue = ({ onContinue }) => {
+	useInput((_input, key) => {
+		if (key.return) onContinue();
+	});
+	return /* @__PURE__ */ jsxs(Text, {
+		color: Colors.primary,
+		children: ["Press enter to continue ", Icons.triangleRight]
+	});
 };
 const McpScreen = ({ store, installer, mode = "install" }) => {
 	useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
@@ -2625,6 +2705,7 @@ const McpScreen = ({ store, installer, mode = "install" }) => {
 	const [selectedClientNames, setSelectedClientNames] = useState([]);
 	const [resultClients, setResultClients] = useState([]);
 	const [pluginClients, setPluginClients] = useState([]);
+	const [installMode, setInstallMode] = useState("custom");
 	useEffect(() => {
 		(async () => {
 			try {
@@ -2642,23 +2723,34 @@ const McpScreen = ({ store, installer, mode = "install" }) => {
 			}
 		})();
 	}, [installer]);
-	const proceedToFeatureSelectOrInstall = (clientNames) => {
+	const proceedAfterClientPick = (clientNames, chosenMode) => {
 		setSelectedClientNames(clientNames);
+		if (chosenMode === "all") {
+			doInstall(clientNames, [...ALL_FEATURE_VALUES]);
+			return;
+		}
 		if (store.session.mcpFeatures) {
 			doInstall(clientNames, store.session.mcpFeatures);
 			return;
 		}
-		if (!clientNames.some((name) => {
-			return !clients.find((c) => c.name === name)?.finish;
-		})) {
-			doInstall(clientNames, []);
+		if (clientNames.some((name) => clients.find((c) => c.name === name)?.finish)) {
+			setPhase("connector");
 			return;
 		}
 		setPhase("feature-select");
 	};
 	const handleConfirm = () => {
 		if (isRemove) doRemove();
-		else if (clients.length === 1) proceedToFeatureSelectOrInstall(clients.map((c) => c.name));
+		else if (clients.length === 1) proceedAfterClientPick([clients[0].name], "custom");
+		else setPhase("pick");
+	};
+	const handleTriStateChoice = (choice) => {
+		if (choice === "skip") {
+			handleSkip();
+			return;
+		}
+		setInstallMode(choice);
+		if (clients.length === 1) proceedAfterClientPick([clients[0].name], choice);
 		else setPhase("pick");
 	};
 	const handleSkip = () => {
@@ -2668,17 +2760,25 @@ const McpScreen = ({ store, installer, mode = "install" }) => {
 		setPhase("working");
 		let mcpResult = [];
 		let pluginResult = [];
-		try {
+		const pluginCapableSet = new Set(clients.filter((c) => c.supportsPlugin).map((c) => c.name));
+		const pluginCapableNames = names.filter((n) => pluginCapableSet.has(n));
+		const directNames = names.filter((n) => !pluginCapableSet.has(n));
+		if (installMode === "all") {
+			try {
+				mcpResult = await installer.install(directNames, features, store.session.apiKey);
+			} catch {}
+			try {
+				pluginResult = await installer.installPlugins(pluginCapableNames);
+			} catch {}
+		} else try {
 			mcpResult = await installer.install(names, features, store.session.apiKey);
 		} catch {}
-		try {
-			pluginResult = await installer.installPlugins(names);
-		} catch {}
 		setResultClients(mcpResult);
 		setPluginClients(pluginResult);
 		setPhase("done");
-		const outcome = mcpResult.length > 0 ? "installed" : "failed";
-		setTimeout(() => markDone(store, outcome, mcpResult), 2e3);
+		const outcome = mcpResult.length + pluginResult.length > 0 ? "installed" : "failed";
+		const featuresReport = reportFeatures(features ?? [...ALL_FEATURE_VALUES]);
+		setTimeout(() => markDone(store, outcome, [...mcpResult, ...pluginResult], featuresReport), 2e3);
 	};
 	const doRemove = async () => {
 		setPhase("working");
@@ -2746,7 +2846,26 @@ const McpScreen = ({ store, installer, mode = "install" }) => {
 					}),
 					/* @__PURE__ */ jsx(Box, {
 						marginTop: 1,
-						children: /* @__PURE__ */ jsx(ConfirmationInput, {
+						children: !isRemove && !store.session.mcpFeatures ? /* @__PURE__ */ jsx(PickerMenu, {
+							message: `Install the PostHog MCP server${clients.some((c) => c.supportsPlugin) ? " and plugin" : ""}?`,
+							options: [
+								{
+									label: "Install with all features",
+									value: "all",
+									hint: "recommended"
+								},
+								{
+									label: "Customize features",
+									value: "custom"
+								},
+								{
+									label: "No thanks",
+									value: "skip"
+								}
+							],
+							mode: "single",
+							onSelect: (choice) => handleTriStateChoice(choice)
+						}) : /* @__PURE__ */ jsx(ConfirmationInput, {
 							message: `${isRemove ? "Remove" : "Install"} the PostHog MCP server${clients.some((c) => c.supportsPlugin) ? " and plugin" : ""}?`,
 							confirmLabel: isRemove ? "Remove" : "Install",
 							cancelLabel: "No thanks",
@@ -2756,76 +2875,107 @@ const McpScreen = ({ store, installer, mode = "install" }) => {
 					})
 				] }),
 				phase === "pick" && /* @__PURE__ */ jsx(PickerMenu, {
-					message: "Select editor to install MCP server",
+					message: installMode === "all" ? "Select editor to install" : "Select editor to install MCP server",
 					options: clients.map((c) => ({
 						label: c.name,
-						value: c.name
+						value: c.name,
+						exclusive: Boolean(c.finish),
+						hint: installMode === "all" ? c.finish ? "connector" : c.supportsPlugin ? "plugin" : "MCP" : void 0
 					})),
 					mode: "multi",
 					onSelect: (selected) => {
-						proceedToFeatureSelectOrInstall(Array.isArray(selected) ? selected : [selected]);
+						proceedAfterClientPick(Array.isArray(selected) ? selected : [selected], installMode);
 					}
 				}),
 				phase === "feature-select" && /* @__PURE__ */ jsx(GroupedPickerMenu, {
 					message: "Select features to enable",
 					groups: AVAILABLE_FEATURES,
-					initialSelected: [...ALL_FEATURE_VALUES],
+					initialSelected: [],
 					onSelect: (features) => {
 						doInstall(selectedClientNames, features);
 					}
 				}),
+				phase === "connector" && /* @__PURE__ */ jsxs(Box, {
+					flexDirection: "column",
+					children: [/* @__PURE__ */ jsx(Box, {
+						marginBottom: 1,
+						children: /* @__PURE__ */ jsx(Text, {
+							dimColor: true,
+							children: "You'll choose which features and tools to enable in Claude's UI after connecting."
+						})
+					}), /* @__PURE__ */ jsx(ConnectorContinue, { onContinue: () => void doInstall(selectedClientNames, []) })]
+				}),
 				phase === "working" && /* @__PURE__ */ jsxs(Text, {
 					dimColor: true,
 					children: [isRemove ? "Removing" : "Installing", " MCP server..."]
 				}),
 				phase === "done" && /* @__PURE__ */ jsx(Box, {
 					flexDirection: "column",
-					children: installedNow.length === 0 && finishNotes.length === 0 ? /* @__PURE__ */ jsxs(Text, {
+					children: installedNow.length + pluginClients.length + finishNotes.length === 0 ? /* @__PURE__ */ jsxs(Text, {
 						dimColor: true,
 						children: [isRemove ? "Removal" : "Installation", " skipped."]
-					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [installedNow.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Text, {
-						color: "green",
-						bold: true,
-						children: [
-							"✔",
-							" MCP server",
-							!isRemove && pluginClients.length > 0 ? " and plugin" : "",
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						pluginClients.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Text, {
+							color: "green",
+							bold: true,
+							children: ["✔", " Plugin installed for:"]
+						}), pluginClients.map((name, i) => /* @__PURE__ */ jsxs(Text, { children: [
 							" ",
-							isRemove ? "removed from" : "installed for",
-							":"
-						]
-					}), installedNow.map((name, i) => /* @__PURE__ */ jsxs(Text, { children: [
-						" ",
-						"•",
-						" ",
-						name
-					] }, i))] }), finishNotes.map((note) => /* @__PURE__ */ jsxs(Box, {
-						flexDirection: "column",
-						marginTop: 1,
-						children: [
-							/* @__PURE__ */ jsxs(Text, {
-								color: "green",
-								bold: true,
-								children: [note.name, " \\u2014 finish in your browser:"]
-							}),
-							/* @__PURE__ */ jsxs(Text, { children: [
-								"  ",
-								"Opened ",
-								/* @__PURE__ */ jsx(Text, {
-									color: "cyan",
-									children: note.url
+							"•",
+							" ",
+							name
+						] }, `p-${i}`))] }),
+						installedNow.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Text, {
+							color: "green",
+							bold: true,
+							children: [
+								"✔",
+								" MCP server",
+								" ",
+								isRemove ? "removed from" : "installed for",
+								":"
+							]
+						}), installedNow.map((name, i) => /* @__PURE__ */ jsxs(Text, { children: [
+							" ",
+							"•",
+							" ",
+							name
+						] }, `m-${i}`))] }),
+						finishNotes.map((note) => /* @__PURE__ */ jsxs(Box, {
+							flexDirection: "column",
+							marginTop: 1,
+							children: [
+								/* @__PURE__ */ jsxs(Text, {
+									color: "green",
+									bold: true,
+									children: [
+										"✔",
+										" ",
+										note.name,
+										" ",
+										"—",
+										" installs a PostHog connector:"
+									]
+								}),
+								/* @__PURE__ */ jsxs(Text, { children: [
+									"  ",
+									"Opened ",
+									/* @__PURE__ */ jsx(Text, {
+										color: "cyan",
+										children: note.url
+									})
+								] }),
+								/* @__PURE__ */ jsxs(Text, {
+									dimColor: true,
+									children: ["  ", note.instruction]
+								}),
+								/* @__PURE__ */ jsxs(Text, {
+									dimColor: true,
+									children: ["  ", "(If it didn't open, paste the URL above.)"]
 								})
-							] }),
-							/* @__PURE__ */ jsxs(Text, {
-								dimColor: true,
-								children: ["  ", note.instruction]
-							}),
-							/* @__PURE__ */ jsxs(Text, {
-								dimColor: true,
-								children: ["  ", "(If it didn't open, paste the URL above.)"]
-							})
-						]
-					}, note.name))] })
+							]
+						}, note.name))
+					] })
 				})
 			]
 		})]
@@ -3656,6 +3806,13 @@ var neutralCrossSell = [{
 	"prompt": "List the top errors my users hit this week.",
 	"description": "Built-in error tracking — no separate tool."
 }];
+var slackApp = {
+	"learnMoreUrl": "https://posthog.com/slack-app",
+	"setupUrl": "https://app.posthog.com/settings/project-integrations#integration-slack",
+	"headline": "Take PostHog to Slack",
+	"pitch": "You can also analyze product data and ship changes.",
+	"capabilities": ["Tag @PostHog with a bug, edit, or a feature idea. It will spin up a sandboxed environment, plan, edit files, run tests, and open a draft PR.", "Tag @PostHog with any data question. It's the same SQL-writing, statistically-minded assistant as PostHog AI, but it responds where you send work memes."]
+};
 //#endregion
 //#region src/lib/mcp-role-prompts.ts
 /**
@@ -3690,6 +3847,7 @@ const GENERIC_FOLLOW_UPS = genericFollowUps;
 const DEEP_DIVE_FOLLOW_UPS = deepDiveFollowUps;
 const CROSS_SELL_BY_ROLE = crossSellByRole;
 const NEUTRAL_CROSS_SELL = neutralCrossSell;
+const SLACK_APP = slackApp;
 const INTEGRATION_FAMILY = {
 	nextjs: "fullstack",
 	nuxt: "fullstack",
@@ -3803,6 +3961,20 @@ function getCrossSellPrompts(role) {
 	if (!isTailoredRole(role)) return NEUTRAL_CROSS_SELL;
 	return CROSS_SELL_BY_ROLE[role];
 }
+/**
+* Resolve the "Take PostHog to Slack" card. Role-independent — the Slack
+* agent's two capabilities (code/PR + data) describe the product itself,
+* not role-specific examples.
+*/
+function getSlackAppCard() {
+	return {
+		headline: SLACK_APP.headline,
+		pitch: SLACK_APP.pitch,
+		learnMoreUrl: SLACK_APP.learnMoreUrl,
+		setupUrl: SLACK_APP.setupUrl,
+		capabilities: SLACK_APP.capabilities
+	};
+}
 //#endregion
 //#region src/ui/tui/screens/McpSuggestedPromptsScreen.tsx
 /**
@@ -3843,6 +4015,25 @@ function getCrossSellPrompts(role) {
 * forces a successful login first). A defensive throw protects the
 * Running useEffect against a state-machine bug.
 */
+var Phase = /* @__PURE__ */ function(Phase) {
+	Phase["Choose"] = "choose";
+	Phase["Authenticating"] = "authenticating";
+	Phase["Greeting"] = "greeting";
+	Phase["PromptPicker"] = "prompt-picker";
+	Phase["Running"] = "running";
+	Phase["FollowUp"] = "follow-up";
+	/** Final beat on every dismissal — reminds the user how to keep
+	*  talking to PostHog after the tutorial ends. */
+	Phase["Goodbye"] = "goodbye";
+	Phase["Done"] = "done";
+	return Phase;
+}(Phase || {});
+var ChoiceValue = /* @__PURE__ */ function(ChoiceValue) {
+	ChoiceValue["Login"] = "login";
+	ChoiceValue["ConnectSlack"] = "connect-slack";
+	ChoiceValue["Exit"] = "exit";
+	return ChoiceValue;
+}(ChoiceValue || {});
 const MAX_PROMPT_RUNS = 5;
 const FOLLOW_UP_DELAY_MS = 3e3;
 const McpSuggestedPromptsScreen = ({ store, services }) => {
@@ -3851,8 +4042,9 @@ const McpSuggestedPromptsScreen = ({ store, services }) => {
 	const kit = getRolePrompts(session.roleAtOrganization, session.integration);
 	const crossSell = useMemo(() => getCrossSellPrompts(session.roleAtOrganization), [session.roleAtOrganization]);
 	const greeting = useMemo(() => getRoleGreeting(session.roleAtOrganization), [session.roleAtOrganization]);
-	const [phase, setPhase] = useState("choose");
+	const [phase, setPhase] = useState(() => store.session.credentials ? "choose" : "authenticating");
 	const [loginError, setLoginError] = useState(null);
+	const startedTutorialRef = useRef(false);
 	const [runningPrompt, setRunningPrompt] = useState(null);
 	const [runChunks, setRunChunks] = useState([]);
 	const [runStartedAt, setRunStartedAt] = useState(null);
@@ -3874,7 +4066,7 @@ const McpSuggestedPromptsScreen = ({ store, services }) => {
 				store.setRoleAtOrganization(roleAtOrganization);
 				store.setApiUser(user);
 				store.setLoginUrl(null);
-				setPhase("greeting");
+				setPhase(startedTutorialRef.current ? "greeting" : "choose");
 			} catch (err) {
 				if (cancelled) return;
 				const message = err instanceof Error ? err.message : String(err);
@@ -3892,6 +4084,28 @@ const McpSuggestedPromptsScreen = ({ store, services }) => {
 		services,
 		store
 	]);
+	const credentials = session.credentials;
+	const slackConnected = session.slackConnected;
+	useEffect(() => {
+		if (!credentials || slackConnected !== null) return;
+		let cancelled = false;
+		const controller = new AbortController();
+		services.checkSlackConnected(credentials, controller.signal).then((connected) => {
+			if (!cancelled) store.setSlackConnected(connected);
+		}).catch((err) => {
+			if (cancelled) return;
+			analytics.captureException(err instanceof Error ? err : new Error(String(err)), { step: "slack_connected_check" });
+		});
+		return () => {
+			cancelled = true;
+			controller.abort();
+		};
+	}, [
+		credentials,
+		slackConnected,
+		services,
+		store
+	]);
 	useEffect(() => {
 		if (phase !== "running") return;
 		if (!runningPrompt) return;
@@ -3977,7 +4191,11 @@ const McpSuggestedPromptsScreen = ({ store, services }) => {
 		setLoginError(null);
 		if (choice === "login") {
 			analytics.wizardCapture("mcp suggested prompts choose", { choice: "login" });
-			setPhase("authenticating");
+			startedTutorialRef.current = true;
+			setPhase(session.credentials ? "greeting" : "authenticating");
+		} else if (choice === "connect-slack") {
+			analytics.wizardCapture("mcp suggested prompts choose", { choice: "connect-slack" });
+			opn(getSlackAppCard().setupUrl, { wait: false }).catch(() => {});
 		} else {
 			analytics.wizardCapture("mcp suggested prompts choose", { choice: "exit" });
 			enterGoodbye();
@@ -4013,9 +4231,10 @@ const McpSuggestedPromptsScreen = ({ store, services }) => {
 		{
 			match: "escape",
 			label: "esc",
-			action: phase === "goodbye" ? "close" : "exit",
+			action: phase === "goodbye" ? "close" : phase === "authenticating" ? "cancel" : "exit",
 			handler: () => {
 				if (phase === "goodbye") closeWizard();
+				else if (phase === "authenticating") setPhase("choose");
 				else if (phase === "running" || phase === "prompt-picker" || phase === "follow-up" || phase === "greeting") enterGoodbye();
 			}
 		},
@@ -4049,6 +4268,7 @@ const McpSuggestedPromptsScreen = ({ store, services }) => {
 			children: [
 				phase === "choose" && /* @__PURE__ */ jsx(ChoosePhase, {
 					error: loginError,
+					slackConnected,
 					onSelect: handleChoice
 				}),
 				phase === "authenticating" && /* @__PURE__ */ jsx(AuthenticatingPhase, { loginUrl: session.loginUrl }),
@@ -4111,71 +4331,112 @@ const McpSuggestedPromptsScreen = ({ store, services }) => {
 		})
 	});
 };
-const ChoosePhase = ({ error, onSelect }) => /* @__PURE__ */ jsxs(Box, {
-	flexDirection: "column",
-	children: [
-		/* @__PURE__ */ jsx(Text, {
-			bold: true,
-			color: Colors.accent,
-			children: "PostHog MCP"
-		}),
-		/* @__PURE__ */ jsx(Box, {
-			marginTop: 1,
-			children: /* @__PURE__ */ jsx(Text, { children: "With MCP your agent works directly with the PostHog platform. You can prompt it to:" })
-		}),
-		/* @__PURE__ */ jsxs(Box, {
-			marginTop: 1,
-			flexDirection: "column",
-			children: [
-				/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
-					color: "cyan",
-					children: Icons.diamond
-				}), " Build dashboards"] }),
-				/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
-					color: "cyan",
-					children: Icons.diamond
-				}), " Run SQL queries"] }),
-				/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
-					color: "cyan",
-					children: Icons.diamond
-				}), " Deploy feature flags"] }),
-				/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
-					color: "cyan",
-					children: Icons.diamond
-				}), " Debug exceptions and errors"] }),
-				/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
-					color: "cyan",
-					children: Icons.diamond
-				}), " And lots more..."] })
-			]
-		}),
-		/* @__PURE__ */ jsx(Box, {
-			marginTop: 1,
-			children: /* @__PURE__ */ jsx(Text, { children: "Want a live demo using real data from your project?" })
-		}),
-		/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(PickerMenu, {
-			options: [{
-				label: "Start MCP tutorial",
-				value: "login"
-			}, {
-				label: "Exit",
-				value: "exit"
-			}],
-			onSelect
-		}) }),
-		error && /* @__PURE__ */ jsx(Box, {
-			marginTop: 1,
-			children: /* @__PURE__ */ jsxs(Text, {
-				color: "red",
+const ChoosePhase = ({ error, slackConnected, onSelect }) => {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: Colors.accent,
+				children: "PostHog MCP"
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				children: /* @__PURE__ */ jsx(Text, { children: "With MCP your agent works directly with the PostHog platform. You can prompt it to:" })
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				marginTop: 1,
+				flexDirection: "column",
 				children: [
-					"Login failed: ",
-					error,
-					". Try again or exit."
+					/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
+						color: "cyan",
+						children: Icons.diamond
+					}), " Build dashboards"] }),
+					/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
+						color: "cyan",
+						children: Icons.diamond
+					}), " Run SQL queries"] }),
+					/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
+						color: "cyan",
+						children: Icons.diamond
+					}), " Deploy feature flags"] }),
+					/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
+						color: "cyan",
+						children: Icons.diamond
+					}), " Debug exceptions and errors"] }),
+					/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
+						color: "cyan",
+						children: Icons.diamond
+					}), " And lots more..."] })
 				]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				flexDirection: "column",
+				children: slackConnected ? /* @__PURE__ */ jsxs(Text, { children: [
+					/* @__PURE__ */ jsx(Text, {
+						color: Colors.success,
+						children: Icons.check
+					}),
+					" Slack is connected — analyze data and ship product changes there by tagging",
+					" ",
+					/* @__PURE__ */ jsx(Text, {
+						bold: true,
+						children: "@PostHog"
+					}),
+					"."
+				] }) : /* @__PURE__ */ jsxs(Text, { children: [
+					"You can also connect PostHog to Slack, so you can analyze data and ship product changes there by tagging ",
+					/* @__PURE__ */ jsx(Text, {
+						bold: true,
+						children: "@PostHog"
+					}),
+					"."
+				] })
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				children: /* @__PURE__ */ jsx(Text, { children: "Want a live demo using real data from your project?" })
+			}),
+			/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(PickerMenu, {
+				options: [
+					{
+						label: "Start MCP tutorial",
+						value: "login"
+					},
+					slackConnected ? {
+						label: "Already connected to Slack",
+						value: "connect-slack",
+						icon: {
+							glyph: Icons.check,
+							color: Colors.success
+						},
+						disabled: true
+					} : {
+						label: "Connect Slack now",
+						value: "connect-slack"
+					},
+					{
+						label: "Exit",
+						value: "exit"
+					}
+				],
+				onSelect
+			}) }),
+			error && /* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				children: /* @__PURE__ */ jsxs(Text, {
+					color: "red",
+					children: [
+						"Login failed: ",
+						error,
+						". Try again or exit."
+					]
+				})
 			})
-		})
-	]
-});
+		]
+	});
+};
 const AuthenticatingPhase = ({ loginUrl }) => /* @__PURE__ */ jsxs(Box, {
 	flexDirection: "column",
 	children: [/* @__PURE__ */ jsx(LoadingBox, { message: "Waiting for authentication..." }), loginUrl && /* @__PURE__ */ jsx(Box, {
@@ -4513,7 +4774,7 @@ const GoodbyePhase = ({ installedClients, role, integration, engaged, onClose })
 					label: "Close",
 					value: "close"
 				}],
-				onSelect: onClose
+				onSelect: () => onClose()
 			})
 		]
 	});
@@ -5379,6 +5640,6 @@ const AUDIT_3000_AREA_SLIDES = [
 	}
 ];
 //#endregion
-export { WizardStore as A, useStdoutDimensions as C, LoadingBox as D, ProgressList as E, SplitView as O, GroupedPickerMenu as S, useKeyBindings as T, ScreenContainer as _, McpSuggestedPromptsScreen as a, ModalOverlay as b, IssueTable as c, ServiceHealthList as d, TipsCard as f, TabContainer as g, HNViewer as h, AuditChecksViewer as i, CardLayout as k, SEVERITY_LABEL as l, ContentSequencer as m, AUDIT_AREA_SLIDES as n, TAILORED_ROLES as o, LearnCard as p, VisualBox as r, McpScreen as s, AUDIT_3000_AREA_SLIDES as t, SEVERITY_ORDER as u, EventPlanViewer as v, PickerMenu as w, ConfirmationInput as x, LogViewer as y };
+export { CardLayout as A, GroupedPickerMenu as C, ProgressList as D, useKeyBindings as E, LoadingBox as O, ConfirmationInput as S, PickerMenu as T, TabContainer as _, McpSuggestedPromptsScreen as a, LogViewer as b, McpScreen as c, SEVERITY_ORDER as d, ServiceHealthList as f, HNViewer as g, ContentSequencer as h, AuditChecksViewer as i, WizardStore as j, SplitView as k, IssueTable as l, LearnCard as m, AUDIT_AREA_SLIDES as n, TAILORED_ROLES as o, TipsCard as p, VisualBox as r, getSlackAppCard as s, AUDIT_3000_AREA_SLIDES as t, SEVERITY_LABEL as u, ScreenContainer as v, useStdoutDimensions as w, ModalOverlay as x, EventPlanViewer as y };
 
-//# sourceMappingURL=slides-DwvXZ8iS.js.map
+//# sourceMappingURL=slides-BEshbXqG.js.map