@amplitude/wizard 1.0.0-beta.2 → 1.0.0-beta.5

package/dist/src/ui/tui/screens/IntroScreen.js

@@ -1,79 +1,170 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * IntroScreen — Welcome, framework detection, and continue/cancel prompt.
+ * IntroScreen (v2) — Clean, minimal welcome with framework detection.
  *
- * Three states:
+ * Four states:
+ *   0. Checkpoint restored: resume / start fresh / cancel picker
  *   1. Detecting: spinner while bin.ts runs detection
  *   2. Detection failed: auto-selects Generic, then continue/cancel
  *   3. Detection succeeded: show result, then continue/cancel
  *
- * Calls store.completeSetup() which unblocks bin.ts to start runWizard.
+ * Shows the AmplitudeTextLogo when terminal is wide/tall enough (>=75x20).
+ * Calls store.concludeIntro() to advance past this screen.
  */
 import path from 'path';
 import { Box, Text } from 'ink';
-import { useState, useEffect, useSyncExternalStore } from 'react';
-import { OutroKind } from '../../../lib/wizard-session.js';
+import { useState, useEffect } from 'react';
+import { useWizardStore } from '../hooks/useWizardStore.js';
+import { OutroKind } from '../session-constants.js';
 import { Integration } from '../../../lib/constants.js';
-import { PickerMenu, LoadingBox } from '../primitives/index.js';
+import { clearCheckpoint } from '../../../lib/session-checkpoint.js';
+import { PickerMenu } from '../primitives/index.js';
+import { Colors, Icons } from '../styles.js';
+import { BrailleSpinner } from '../components/BrailleSpinner.js';
 import { AmplitudeTextLogo } from '../components/AmplitudeTextLogo.js';
-import { Colors } from '../styles.js';
+import { useStdoutDimensions } from '../hooks/useStdoutDimensions.js';
 import { analytics } from '../../../utils/analytics.js';
+const LOGO_MIN_COLS = 75;
+const LOGO_MIN_ROWS = 20;
 export const IntroScreen = ({ store }) => {
-    useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+    useWizardStore(store);
+    const [cols, rows] = useStdoutDimensions();
     const [pickingFramework, setPickingFramework] = useState(false);
     const [manuallySelected, setManuallySelected] = useState(false);
+    const [showResume, setShowResume] = useState(() => store.session._restoredFromCheckpoint);
     const { session } = store;
     const config = session.frameworkConfig;
     const frameworkLabel = session.detectedFrameworkLabel ?? config?.metadata.name;
     const detecting = !session.detectionComplete;
     const needsFrameworkPick = session.detectionComplete && !session.frameworkConfig;
+    // Hide logo when framework picker is open — the long list overlaps in Ink.
+    const pickerVisible = pickingFramework || (session.menu && needsFrameworkPick);
+    const showLogo = cols >= LOGO_MIN_COLS && rows >= LOGO_MIN_ROWS && !pickerVisible;
     // When detection fails and the user hasn't explicitly opened the picker,
     // auto-select the generic integration so the wizard can proceed.
     useEffect(() => {
-        if (needsFrameworkPick && !session.menu) {
+        if (needsFrameworkPick && !session.menu && !showResume) {
             void import('../../../lib/registry.js').then(({ FRAMEWORK_REGISTRY }) => {
                 const genericConfig = FRAMEWORK_REGISTRY[Integration.generic];
                 store.setFrameworkConfig(Integration.generic, genericConfig);
                 store.setDetectedFramework(genericConfig.metadata.name);
             });
         }
-    }, [needsFrameworkPick, session.menu]);
+    }, [needsFrameworkPick, session.menu, showResume]);
     const showContinue = session.frameworkConfig !== null && !detecting && !pickingFramework;
-    const showDescription = showContinue;
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, alignItems: "center", justifyContent: "center", children: [_jsxs(Box, { flexDirection: "column", alignItems: "center", marginBottom: 1, children: [_jsx(Box, { flexDirection: "row", gap: 2, alignItems: "center", children: _jsx(AmplitudeTextLogo, {}) }), _jsx(Box, { marginBottom: 1 }), _jsx(Text, { bold: true, children: detecting ? 'Amplitude Wizard starting up' : 'Amplitude Wizard' }), _jsx(Box, { marginBottom: 1 }), showDescription && (_jsxs(Box, { flexDirection: "column", alignItems: "center", marginTop: 1, children: [_jsx(Text, { color: Colors.muted, children: "We'll use AI to analyze your project and integrate Amplitude." }), _jsx(Text, { color: Colors.muted, children: ".env* file contents will not leave your machine." }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { children: "From zero to first tracked event in 5 minutes." }) })] }))] }), detecting && (_jsx(Box, { marginY: 1, children: _jsx(LoadingBox, { message: "Detecting project framework..." }) })), config?.metadata.preRunNotice && (_jsx(Text, { color: "yellow", children: config.metadata.preRunNotice })), (pickingFramework || (session.menu && needsFrameworkPick)) && (_jsx(FrameworkPicker, { store: store, onComplete: () => setPickingFramework(false) })), !detecting && !pickingFramework && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsxs(Text, { children: ["Directory ", _jsx(Text, { color: "green", children: '\u2714' }), ' '] }), _jsxs(Text, { children: ['/', path.basename(session.installDir), ' '] })] }), frameworkLabel && (_jsxs(Text, { children: [_jsxs(Text, { children: ["Framework ", _jsx(Text, { color: "green", children: '\u2714' }), ' '] }), _jsxs(Text, { children: [frameworkLabel, !manuallySelected && ' (detected)', ' ', config?.metadata.beta && '[BETA]'] })] })), showContinue && (_jsx(PickerMenu, { options: [
-                            { label: 'Continue', value: 'continue' },
-                            { label: 'Change framework', value: 'framework' },
-                            { label: 'Cancel', value: 'cancel' },
-                        ], onSelect: (value) => {
-                            const choice = Array.isArray(value) ? value[0] : value;
-                            analytics.wizardCapture('Intro Action', {
-                                action: choice,
-                                integration: session.integration,
-                                detected_framework: session.detectedFrameworkLabel,
-                            });
-                            if (choice === 'cancel') {
-                                store.setOutroData({
-                                    kind: OutroKind.Cancel,
-                                    message: 'Setup cancelled.',
+    // ── Resume-from-checkpoint prompt ─────────────────────────────────
+    if (showResume) {
+        const orgLabel = session.selectedOrgName ?? session.selectedWorkspaceName ?? null;
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, alignItems: "center", justifyContent: "flex-start", paddingTop: 2, children: [showLogo && _jsx(AmplitudeTextLogo, {}), _jsx(Box, { flexDirection: "column", alignItems: "center", marginBottom: 1, children: _jsx(Text, { bold: true, color: Colors.heading, children: "Amplitude Wizard" }) }), _jsxs(Box, { flexDirection: "column", alignItems: "flex-start", children: [_jsx(Text, { color: Colors.body, children: "A previous session was interrupted." }), frameworkLabel && (_jsxs(Text, { children: [_jsx(Text, { color: Colors.body, children: " Framework: " }), _jsx(Text, { color: Colors.secondary, children: frameworkLabel })] })), orgLabel && (_jsxs(Text, { children: [_jsx(Text, { color: Colors.body, children: " Organization: " }), _jsx(Text, { color: Colors.secondary, children: orgLabel })] })), _jsx(Box, { marginTop: 1, children: _jsx(PickerMenu, { options: [
+                                    { label: 'Resume where you left off', value: 'resume' },
+                                    { label: 'Start fresh', value: 'fresh' },
+                                    { label: 'Cancel', value: 'cancel', hint: 'exit wizard' },
+                                ], onSelect: (value) => {
+                                    const choice = Array.isArray(value) ? value[0] : value;
+                                    analytics.wizardCapture('Checkpoint Resume Action', {
+                                        action: choice,
+                                        integration: session.integration,
+                                        detected_framework: session.detectedFrameworkLabel,
+                                    });
+                                    if (choice === 'resume') {
+                                        store.concludeIntro();
+                                    }
+                                    else if (choice === 'fresh') {
+                                        // Clear checkpoint and reset restored flag so normal flow takes over
+                                        clearCheckpoint(store.session.installDir);
+                                        store.session = {
+                                            ...store.session,
+                                            _restoredFromCheckpoint: false,
+                                            introConcluded: false,
+                                            detectionComplete: false,
+                                            detectedFrameworkLabel: null,
+                                            integration: null,
+                                            frameworkConfig: null,
+                                            frameworkContext: {},
+                                            region: null,
+                                            selectedOrgId: null,
+                                            selectedOrgName: null,
+                                            selectedWorkspaceId: null,
+                                            selectedWorkspaceName: null,
+                                            selectedProjectName: null,
+                                        };
+                                        setShowResume(false);
+                                    }
+                                    else {
+                                        store.setOutroData({
+                                            kind: OutroKind.Cancel,
+                                            message: 'Setup cancelled.',
+                                        });
+                                    }
+                                } }) })] })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, alignItems: "center", justifyContent: "flex-start", paddingTop: 2, children: [showLogo && _jsx(AmplitudeTextLogo, {}), _jsxs(Box, { flexDirection: "column", alignItems: "center", marginBottom: 1, children: [_jsx(Text, { bold: true, color: Colors.heading, children: "Amplitude Wizard" }), _jsx(Text, { color: Colors.muted, children: "AI-powered analytics setup in minutes" }), _jsx(Text, { color: Colors.secondary, children: "Installs the SDK, adds events, and verifies data is flowing." })] }), detecting && (_jsxs(Box, { marginY: 1, gap: 1, children: [_jsx(BrailleSpinner, {}), _jsxs(Text, { color: Colors.secondary, children: ["Detecting project framework", Icons.ellipsis] })] })), config?.metadata.preRunNotice && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: Colors.warning, children: config.metadata.preRunNotice }) })), (pickingFramework || (session.menu && needsFrameworkPick)) && (_jsx(FrameworkPicker, { store: store, onComplete: () => setPickingFramework(false) })), !detecting && !pickingFramework && (_jsxs(Box, { flexDirection: "column", alignItems: "flex-start", children: [_jsxs(Text, { children: [_jsx(Text, { color: Colors.body, children: "Directory " }), _jsxs(Text, { color: Colors.secondary, children: ["/", path.basename(session.installDir)] }), _jsxs(Text, { color: Colors.success, children: [" ", Icons.checkmark] })] }), frameworkLabel && (_jsxs(Text, { children: [_jsx(Text, { color: Colors.body, children: "Framework " }), _jsxs(Text, { color: Colors.secondary, children: [frameworkLabel, !manuallySelected && ' (detected)', config?.metadata.beta && ' [BETA]'] }), _jsxs(Text, { color: Colors.success, children: [" ", Icons.checkmark] })] })), showContinue && (_jsx(Box, { marginTop: 1, children: _jsx(PickerMenu, { options: [
+                                { label: 'Continue', value: 'continue' },
+                                {
+                                    label: 'Change framework',
+                                    value: 'framework',
+                                    hint: 'pick manually',
+                                },
+                                { label: 'Cancel', value: 'cancel', hint: 'exit wizard' },
+                            ], onSelect: (value) => {
+                                const choice = Array.isArray(value) ? value[0] : value;
+                                analytics.wizardCapture('Intro Action', {
+                                    action: choice,
+                                    integration: session.integration,
+                                    detected_framework: session.detectedFrameworkLabel,
                                 });
-                            }
-                            else if (choice === 'framework') {
-                                setPickingFramework(true);
-                                setManuallySelected(true);
-                            }
-                            else {
-                                store.concludeIntro();
-                            }
-                        } }))] }))] }));
+                                if (choice === 'cancel') {
+                                    store.setOutroData({
+                                        kind: OutroKind.Cancel,
+                                        message: 'Setup cancelled.',
+                                    });
+                                }
+                                else if (choice === 'framework') {
+                                    setPickingFramework(true);
+                                    setManuallySelected(true);
+                                }
+                                else {
+                                    store.concludeIntro();
+                                }
+                            } }) }))] }))] }));
 };
+/**
+ * Popularity-ordered list for the manual framework picker.
+ * Excludes `generic` — the wizard auto-selects it when detection fails.
+ */
+const PICKER_ORDER = [
+    Integration.nextjs,
+    Integration.reactRouter,
+    Integration.vue,
+    Integration.reactNative,
+    Integration.python,
+    Integration.django,
+    Integration.flask,
+    Integration.fastapi,
+    Integration.javascript_web,
+    Integration.javascriptNode,
+    Integration.swift,
+    Integration.android,
+    Integration.flutter,
+    Integration.go,
+    Integration.java,
+    Integration.unity,
+    Integration.unreal,
+];
 /** Framework picker shown when auto-detection fails. */
 const FrameworkPicker = ({ store, onComplete, }) => {
-    // Build options from the framework registry (loaded dynamically to avoid circular deps)
-    const options = Object.values(Integration).map((value) => ({
-        label: value,
-        value,
-    }));
-    return (_jsx(PickerMenu, { centered: true, columns: 2, message: "Select your framework", options: options, onSelect: (value) => {
+    const [options, setOptions] = useState([]);
+    useEffect(() => {
+        void import('../../../lib/registry.js').then(({ FRAMEWORK_REGISTRY }) => {
+            setOptions(PICKER_ORDER.map((integration) => ({
+                label: FRAMEWORK_REGISTRY[integration].metadata.name,
+                value: integration,
+            })));
+        });
+    }, []);
+    if (options.length === 0)
+        return null;
+    return (_jsx(PickerMenu, { centered: true, message: "Select your framework", options: options, onSelect: (value) => {
             const integration = Array.isArray(value) ? value[0] : value;
             analytics.wizardCapture('Framework Manually Selected', { integration });
             void import('../../../lib/registry.js').then(({ FRAMEWORK_REGISTRY }) => {

package/dist/src/ui/tui/screens/LoginScreen.d.ts

@@ -1,5 +1,5 @@
 /**
- * LoginScreen — Silent token refresh overlay for the /login slash command.
+ * LoginScreen — Silent token refresh overlay for the /login slash command (v2).
  *
  * On mount, reads the stored refresh token from ~/.ampli.json and exchanges
  * it for a new access token via the Amplitude OAuth2 token endpoint.

package/dist/src/ui/tui/screens/LoginScreen.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * LoginScreen — Silent token refresh overlay for the /login slash command.
+ * LoginScreen — Silent token refresh overlay for the /login slash command (v2).
  *
  * On mount, reads the stored refresh token from ~/.ampli.json and exchanges
  * it for a new access token via the Amplitude OAuth2 token endpoint.
@@ -9,8 +9,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Box, Text } from 'ink';
 import { useState, useEffect } from 'react';
-import { Spinner } from '@inkjs/ui';
-import { Colors } from '../styles.js';
+import { Colors, Icons } from '../styles.js';
+import { BrailleSpinner } from '../components/BrailleSpinner.js';
 var Phase;
 (function (Phase) {
     Phase["Refreshing"] = "refreshing";
@@ -61,5 +61,5 @@ export const LoginScreen = ({ store, onComplete }) => {
             }
         })();
     }, []);
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Text, { bold: true, color: Colors.accent, children: "Re-authenticate" }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [phase === Phase.Refreshing && (_jsxs(Box, { gap: 1, children: [_jsx(Spinner, {}), _jsx(Text, { color: Colors.muted, children: "Refreshing credentials..." })] })), phase === Phase.Success && (_jsxs(Text, { color: "green", children: ['\u2714', " Credentials refreshed."] })), phase === Phase.NoToken && (_jsx(Text, { color: Colors.muted, children: "No stored credentials found. Restart the wizard to re-authenticate." })), phase === Phase.Error && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: Colors.error, children: ["Refresh failed: ", errorMsg] }), _jsx(Text, { color: Colors.muted, children: "Restart the wizard to re-authenticate." })] }))] })] }));
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Text, { bold: true, color: Colors.accent, children: "Re-authenticate" }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [phase === Phase.Refreshing && (_jsxs(Box, { gap: 1, children: [_jsx(BrailleSpinner, {}), _jsxs(Text, { color: Colors.active, children: ["Refreshing credentials", Icons.ellipsis] })] })), phase === Phase.Success && (_jsxs(Text, { color: Colors.success, children: [Icons.checkmark, " Credentials refreshed."] })), phase === Phase.NoToken && (_jsx(Text, { color: Colors.secondary, children: "No stored credentials found. Restart the wizard to re-authenticate." })), phase === Phase.Error && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: Colors.error, children: ["Refresh failed: ", errorMsg] }), _jsx(Text, { color: Colors.secondary, children: "Restart the wizard to re-authenticate." })] }))] })] }));
 };

package/dist/src/ui/tui/screens/LogoutScreen.d.ts

@@ -1,5 +1,5 @@
 /**
- * LogoutScreen — Confirms and clears stored OAuth credentials.
+ * LogoutScreen — Confirms and clears stored OAuth credentials (v2).
  *
  * Used as an overlay triggered by the /logout slash command.
  * Calls clearStoredCredentials() on confirm, then pops the overlay.
@@ -7,6 +7,8 @@
 interface LogoutScreenProps {
     onComplete: () => void;
     installDir: string;
+    /** Called to clear in-memory session state after disk credentials are wiped. */
+    onLoggedOut?: () => void;
 }
-export declare const LogoutScreen: ({ onComplete, installDir }: LogoutScreenProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LogoutScreen: ({ onComplete, installDir, onLoggedOut, }: LogoutScreenProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/ui/tui/screens/LogoutScreen.js

@@ -1,28 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * LogoutScreen — Confirms and clears stored OAuth credentials.
+ * LogoutScreen — Confirms and clears stored OAuth credentials (v2).
  *
  * Used as an overlay triggered by the /logout slash command.
  * Calls clearStoredCredentials() on confirm, then pops the overlay.
  */
 import { Box, Text } from 'ink';
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { ConfirmationInput } from '../primitives/index.js';
 import { Colors } from '../styles.js';
 import { clearStoredCredentials } from '../../../utils/ampli-settings.js';
 import { clearApiKey } from '../../../utils/api-key-store.js';
+import { clearCheckpoint } from '../../../lib/session-checkpoint.js';
 var Phase;
 (function (Phase) {
     Phase["Confirm"] = "confirm";
     Phase["Done"] = "done";
 })(Phase || (Phase = {}));
-export const LogoutScreen = ({ onComplete, installDir }) => {
+export const LogoutScreen = ({ onComplete, installDir, onLoggedOut, }) => {
     const [phase, setPhase] = useState(Phase.Confirm);
+    const timerRef = useRef(null);
+    // Clear any pending timer on unmount
+    useEffect(() => {
+        return () => {
+            if (timerRef.current !== null)
+                clearTimeout(timerRef.current);
+        };
+    }, []);
     const handleConfirm = () => {
         clearStoredCredentials();
         clearApiKey(installDir);
+        clearCheckpoint(installDir);
+        onLoggedOut?.();
         setPhase(Phase.Done);
-        setTimeout(onComplete, 1500);
+        // Exit after a short delay so the user sees the confirmation
+        timerRef.current = setTimeout(() => process.exit(0), 1500);
     };
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Text, { bold: true, color: Colors.accent, children: "Log Out" }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [phase === Phase.Confirm && (_jsx(ConfirmationInput, { message: "Clear stored Amplitude credentials from ~/.ampli.json?", confirmLabel: "Log out", cancelLabel: "Cancel", onConfirm: handleConfirm, onCancel: onComplete })), phase === Phase.Done && (_jsx(Text, { color: Colors.muted, children: "Logged out. Restart the wizard to re-authenticate." }))] })] }));
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Text, { bold: true, color: Colors.accent, children: "Log Out" }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [phase === Phase.Confirm && (_jsx(ConfirmationInput, { message: "Clear stored Amplitude credentials from ~/.ampli.json?", confirmLabel: "Log out", cancelLabel: "Cancel", onConfirm: handleConfirm, onCancel: onComplete })), phase === Phase.Done && (_jsx(Text, { color: Colors.secondary, children: "Logged out. Restart the wizard to re-authenticate." }))] })] }));
 };

package/dist/src/ui/tui/screens/McpScreen.d.ts

@@ -1,16 +1,16 @@
 /**
- * McpScreen — MCP server install/remove flow.
+ * McpScreen — MCP server install/remove flow (v2).
  *
  * 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 → install
- *   - 'remove': detect installed clients → confirm → remove
+ *   - 'install': detect clients -> confirm -> install
+ *   - 'remove': detect installed clients -> confirm -> remove
  *
  * When done, calls store.setMcpComplete(). The router resolves to outro.
  */
-import { type WizardStore } from '../store.js';
+import type { WizardStore } from '../store.js';
 import type { McpInstaller } from '../services/mcp-installer.js';
 export type McpMode = 'install' | 'remove';
 interface McpScreenProps {

package/dist/src/ui/tui/screens/McpScreen.js

@@ -1,22 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * McpScreen — MCP server install/remove flow.
+ * McpScreen — MCP server install/remove flow (v2).
  *
  * 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 → install
- *   - 'remove': detect installed clients → confirm → remove
+ *   - 'install': detect clients -> confirm -> install
+ *   - 'remove': detect installed clients -> confirm -> remove
  *
  * When done, calls store.setMcpComplete(). The router resolves to outro.
  */
 import { Box, Text } from 'ink';
-import { useState, useEffect } from 'react';
-import { useSyncExternalStore } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { McpOutcome, RunPhase } from '../store.js';
+import { useWizardStore } from '../hooks/useWizardStore.js';
 import { ConfirmationInput, PickerMenu } from '../primitives/index.js';
-import { Colors } from '../styles.js';
+import { Colors, Icons } from '../styles.js';
 import { analytics, captureWizardError } from '../../../utils/analytics.js';
 var Phase;
 (function (Phase) {
@@ -39,8 +39,16 @@ const markDone = (store, outcome, clients = [], standalone = false, onComplete)
     }
 };
 export const McpScreen = ({ store, installer, mode = 'install', standalone = false, onComplete, }) => {
-    useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+    useWizardStore(store);
     const isRemove = mode === 'remove';
+    const timerRef = useRef(null);
+    // Clear any pending timer on unmount
+    useEffect(() => {
+        return () => {
+            if (timerRef.current !== null)
+                clearTimeout(timerRef.current);
+        };
+    }, []);
     const { runPhase, amplitudePreDetected, amplitudePreDetectedChoicePending } = store.session;
     const dataSetupComplete = runPhase === RunPhase.Completed;
     const [phase, setPhase] = useState(Phase.Detecting);
@@ -56,7 +64,7 @@ export const McpScreen = ({ store, installer, mode = 'install', standalone = fal
                 if (detected.length === 0) {
                     analytics.wizardCapture('MCP No Clients Detected', { mode });
                     setPhase(Phase.None);
-                    setTimeout(() => markDone(store, McpOutcome.NoClients, [], standalone, onComplete), 1500);
+                    timerRef.current = setTimeout(() => markDone(store, McpOutcome.NoClients, [], standalone, onComplete), 1500);
                 }
                 else {
                     analytics.wizardCapture('MCP Clients Detected', {
@@ -71,7 +79,7 @@ export const McpScreen = ({ store, installer, mode = 'install', standalone = fal
             catch {
                 captureWizardError('MCP Client Detection', 'Editor client detection failed', 'McpScreen', { mode });
                 setPhase(Phase.None);
-                setTimeout(() => markDone(store, McpOutcome.Failed, [], standalone, onComplete), 1500);
+                timerRef.current = setTimeout(() => markDone(store, McpOutcome.Failed, [], standalone, onComplete), 1500);
             }
         })();
     }, [installer, amplitudePreDetectedChoicePending]);
@@ -114,7 +122,7 @@ export const McpScreen = ({ store, installer, mode = 'install', standalone = fal
         });
         setPhase(Phase.Done);
         const outcome = result.length > 0 ? McpOutcome.Installed : McpOutcome.Failed;
-        setTimeout(() => markDone(store, outcome, result, standalone, onComplete), 2000);
+        timerRef.current = setTimeout(() => markDone(store, outcome, result, standalone, onComplete), 2000);
     };
     const doRemove = async () => {
         setPhase(Phase.Working);
@@ -129,11 +137,11 @@ export const McpScreen = ({ store, installer, mode = 'install', standalone = fal
         analytics.wizardCapture('MCP Remove Complete', { removed: result });
         setPhase(Phase.Done);
         const outcome = result.length > 0 ? McpOutcome.Installed : McpOutcome.Failed;
-        setTimeout(() => markDone(store, outcome, result, standalone, onComplete), 2000);
+        timerRef.current = setTimeout(() => markDone(store, outcome, result, standalone, onComplete), 2000);
     };
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [dataSetupComplete && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "green", bold: true, children: amplitudePreDetected
-                        ? '\u2714 Amplitude is already configured in this project!'
-                        : '\u2714 Data setup complete!' }) })), amplitudePreDetectedChoicePending && !isRemove && (_jsxs(Box, { marginBottom: 1, flexDirection: "column", children: [_jsx(Text, { color: Colors.muted, children: "The installer skipped the automated setup step because Amplitude is already present. You can continue to editor MCP setup, or run the full setup wizard if you want to review or change the integration." }), _jsx(Box, { marginTop: 1, children: _jsx(PickerMenu, { message: "How would you like to proceed?", options: [
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [dataSetupComplete && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: Colors.success, bold: true, children: [Icons.checkmark, ' ', amplitudePreDetected
+                            ? 'Amplitude is already configured in this project!'
+                            : 'Data setup complete!'] }) })), amplitudePreDetectedChoicePending && !isRemove && (_jsxs(Box, { marginBottom: 1, flexDirection: "column", children: [_jsx(Text, { color: Colors.secondary, children: "The installer skipped the automated setup step because Amplitude is already present. You can continue to editor MCP setup, or run the full setup wizard if you want to review or change the integration." }), _jsx(Box, { marginTop: 1, children: _jsx(PickerMenu, { message: "How would you like to proceed?", options: [
                                 { label: 'Continue to MCP setup', value: 'continue' },
                                 {
                                     label: 'Run setup wizard anyway',
@@ -145,7 +153,7 @@ export const McpScreen = ({ store, installer, mode = 'install', standalone = fal
                                     run_wizard_anyway: runWizard,
                                 });
                                 store.resolvePreDetectedChoice(runWizard);
-                            } }) })] })), !amplitudePreDetectedChoicePending && (_jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, color: Colors.accent, children: ["MCP Server ", isRemove ? 'Removal' : 'Setup'] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [phase === Phase.Detecting && (_jsx(Text, { color: Colors.muted, children: "Detecting supported editors..." })), phase === Phase.None && (_jsxs(Text, { color: Colors.muted, children: ["No ", isRemove ? 'installed' : 'supported', " MCP clients detected. Skipping..."] })), phase === Phase.Ask && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: Colors.muted, children: ["Detected: ", clients.map((c) => c.name).join(', ')] }), _jsx(Box, { marginTop: 1, children: _jsx(ConfirmationInput, { message: isRemove
+                            } }) })] })), !amplitudePreDetectedChoicePending && (_jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, color: Colors.accent, children: ["MCP Server ", isRemove ? 'Removal' : 'Setup'] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [phase === Phase.Detecting && (_jsxs(Text, { color: Colors.muted, children: ["Detecting supported editors", Icons.ellipsis] })), phase === Phase.None && (_jsxs(Text, { color: Colors.muted, children: ["No ", isRemove ? 'installed' : 'supported', " MCP clients detected. Skipping", Icons.ellipsis] })), phase === Phase.Ask && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: Colors.secondary, children: ["Detected: ", clients.map((c) => c.name).join(', ')] }), _jsx(Box, { marginTop: 1, children: _jsx(ConfirmationInput, { message: isRemove
                                                 ? 'Remove the Amplitude MCP server from your editor?'
                                                 : 'Install the Amplitude MCP server to your editor?', confirmLabel: isRemove ? 'Remove MCP' : 'Install MCP', cancelLabel: "No thanks", onConfirm: handleConfirm, onCancel: handleSkip }) })] })), phase === Phase.Pick && (_jsx(PickerMenu, { message: "Select editor to install MCP server", options: clients.map((c) => ({
                                     label: c.name,
@@ -159,5 +167,5 @@ export const McpScreen = ({ store, installer, mode = 'install', standalone = fal
                                         available_clients: clients.map((c) => c.name),
                                     });
                                     void doInstall(names);
-                                } })), phase === Phase.Working && (_jsxs(Text, { color: Colors.muted, children: [isRemove ? 'Removing' : 'Installing', " MCP server..."] })), phase === Phase.Done && (_jsx(Box, { flexDirection: "column", children: resultClients.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Text, { color: "green", bold: true, children: ['\u2714', " MCP server", ' ', isRemove ? 'removed from' : 'installed for', ":"] }), resultClients.map((name, i) => (_jsxs(Text, { children: [' ', '\u2022', " ", name] }, i)))] })) : (_jsxs(Text, { color: Colors.muted, children: [isRemove ? 'Removal' : 'Installation', " skipped."] })) }))] })] }))] }));
+                                } })), phase === Phase.Working && (_jsxs(Text, { color: Colors.active, children: [isRemove ? 'Removing' : 'Installing', " MCP server", Icons.ellipsis] })), phase === Phase.Done && (_jsx(Box, { flexDirection: "column", children: resultClients.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Text, { color: Colors.success, bold: true, children: [Icons.checkmark, " MCP server", ' ', isRemove ? 'removed from' : 'installed for', ":"] }), resultClients.map((name, i) => (_jsxs(Text, { color: Colors.body, children: [' ', Icons.bullet, " ", name] }, i)))] })) : (_jsxs(Text, { color: Colors.muted, children: [isRemove ? 'Removal' : 'Installation', " skipped."] })) }))] })] }))] }));
 };

package/dist/src/ui/tui/screens/OutageScreen.d.ts

@@ -1,5 +1,5 @@
 /**
- * OutageScreen — Shown when Claude/Anthropic services are degraded.
+ * OutageScreen — Shown when AI services are degraded (v2).
  * Reads session.serviceStatus and provides a ConfirmationInput to continue or exit.
  */
 import type { WizardStore } from '../store.js';

package/dist/src/ui/tui/screens/OutageScreen.js

@@ -1,17 +1,17 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
- * OutageScreen — Shown when Claude/Anthropic services are degraded.
+ * OutageScreen — Shown when AI services are degraded (v2).
  * Reads session.serviceStatus and provides a ConfirmationInput to continue or exit.
  */
 import { Box, Text } from 'ink';
-import { useSyncExternalStore } from 'react';
+import { useWizardStore } from '../hooks/useWizardStore.js';
 import { ConfirmationInput } from '../primitives/index.js';
-import { Colors } from '../styles.js';
+import { Colors, Icons } from '../styles.js';
 export const OutageScreen = ({ store }) => {
-    useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+    useWizardStore(store);
     const serviceStatus = store.session.serviceStatus;
     if (!serviceStatus) {
         return null;
     }
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: "yellow", bold: true, children: ['\u26A0', " Claude/Anthropic services are experiencing issues."] }), _jsx(Text, { children: " " }), _jsxs(Text, { children: [_jsx(Text, { color: "yellow", children: "Status:" }), " ", serviceStatus.description] }), _jsxs(Text, { children: [_jsx(Text, { color: "yellow", children: "Status page:" }), ' ', _jsx(Text, { color: "cyan", children: serviceStatus.statusPageUrl })] }), _jsx(Text, { children: " " }), _jsx(Text, { color: Colors.muted, children: "The wizard may not work reliably while services are affected." })] }), _jsx(ConfirmationInput, { message: "Continue anyway?", onConfirm: () => store.popOverlay(), onCancel: () => process.exit(0) })] }));
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: Colors.warning, bold: true, children: [Icons.diamond, " The setup agent is temporarily unavailable."] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: Colors.body, children: [_jsx(Text, { color: Colors.warning, children: "Status:" }), ' ', serviceStatus.description] }), _jsxs(Text, { color: Colors.body, children: [_jsx(Text, { color: Colors.warning, children: "Status page:" }), ' ', _jsx(Text, { color: Colors.accent, children: serviceStatus.statusPageUrl })] }), _jsx(Text, { children: " " }), _jsx(Text, { color: Colors.secondary, children: "The wizard may not work reliably while services are affected." })] }), _jsx(ConfirmationInput, { message: "Continue anyway?", onConfirm: () => store.popOverlay(), onCancel: () => process.exit(0) })] }));
 };

package/dist/src/ui/tui/screens/OutroScreen.d.ts

@@ -1,7 +1,12 @@
 /**
  * OutroScreen — Summary after the agent run.
+ *
  * Reads store.session.outroData to render success, error, or cancel view.
  * Keeps the process alive until the user presses a key to exit.
+ *
+ * Success: bold green heading, compact changes + events list, PickerMenu.
+ * Error: red heading with error message and suggested fixes.
+ * Cancel: clean warning-colored cancel message.
  */
 import type { WizardStore } from '../store.js';
 interface OutroScreenProps {

package/dist/src/ui/tui/screens/OutroScreen.js

@@ -1,27 +1,32 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
  * OutroScreen — Summary after the agent run.
+ *
  * Reads store.session.outroData to render success, error, or cancel view.
  * Keeps the process alive until the user presses a key to exit.
+ *
+ * Success: bold green heading, compact changes + events list, PickerMenu.
+ * Error: red heading with error message and suggested fixes.
+ * Cancel: clean warning-colored cancel message.
  */
 import { Box, Text } from 'ink';
 import { useState } from 'react';
-import { useScreenInput } from '../hooks/useScreenInput.js';
-import { useSyncExternalStore } from 'react';
-import { OutroKind } from '../../../lib/wizard-session.js';
-import { Colors } from '../styles.js';
+import { useWizardStore } from '../hooks/useWizardStore.js';
+import { OutroKind } from '../session-constants.js';
+import { Colors, Icons } from '../styles.js';
 import { PickerMenu, ReportViewer } from '../primitives/index.js';
+import { useScreenInput } from '../hooks/useScreenInput.js';
 import { OUTBOUND_URLS } from '../../../lib/constants.js';
 import opn from 'opn';
 import path from 'path';
 import { analytics } from '../../../utils/analytics.js';
 const REPORT_FILE = 'amplitude-setup-report.md';
 export const OutroScreen = ({ store }) => {
-    useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+    useWizardStore(store);
     const [showReport, setShowReport] = useState(false);
     const isSuccess = store.session.outroData?.kind === OutroKind.Success;
-    // Any-key-to-exit only for non-success states; success uses a picker.
-    useScreenInput((input, key) => {
+    // Any-key-to-exit for non-success states; success uses the picker.
+    useScreenInput((_input, key) => {
         if (!isSuccess)
             process.exit(0);
         if (showReport && key.escape)
@@ -29,19 +34,21 @@ export const OutroScreen = ({ store }) => {
     });
     const outroData = store.session.outroData;
     if (!outroData) {
-        return (_jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(Text, { color: Colors.muted, children: "Finishing up..." }) }));
+        return (_jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsxs(Text, { color: Colors.muted, children: ["Finishing up", Icons.ellipsis] }) }));
     }
-    // installDir comes from --install-dir CLI flag (defaults to process.cwd()).
-    // REPORT_FILE is a compile-time constant with no path separators, so string
-    // concatenation is safe and avoids path.join/path.resolve on user-supplied input.
+    // Build the report file path from the install directory.
     const installDir = store.session.installDir;
     const reportPath = installDir.endsWith(path.sep)
         ? `${installDir}${REPORT_FILE}`
         : `${installDir}${path.sep}${REPORT_FILE}`;
+    // ── Report sub-view ──────────────────────────────────────────────────
     if (showReport) {
-        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: Colors.accent, children: "Setup Report" }), _jsx(Text, { color: Colors.muted, children: " (Esc to go back)" })] }), _jsx(ReportViewer, { filePath: reportPath })] }));
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingX: 2, paddingY: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: Colors.accent, children: "Setup Report" }), _jsx(Text, { color: Colors.muted, children: " (Esc to go back)" })] }), _jsx(ReportViewer, { filePath: reportPath })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [outroData.kind === OutroKind.Success && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "green", bold: true, children: ['\u2714', " Successfully installed Amplitude!"] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["Check ", _jsx(Text, { bold: true, children: "./amplitude-setup-report.md" }), " for details about your integration"] }) }), outroData.changes && outroData.changes.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: "What the agent did:" }), outroData.changes.map((change, i) => (_jsxs(Text, { children: ['\u2022', " ", change] }, i)))] })), store.eventPlan.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: "Events added:" }), store.eventPlan.map((event) => (_jsxs(Text, { children: ['\u2022', " ", _jsx(Text, { bold: true, children: event.name }), _jsxs(Text, { color: Colors.muted, children: [" ", event.description] })] }, event.name)))] })), outroData.docsUrl && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["Learn more: ", _jsx(Text, { color: "cyan", children: outroData.docsUrl })] }) })), outroData.continueUrl && (_jsx(Box, { children: _jsxs(Text, { children: ["Continue onboarding:", ' ', _jsx(Text, { color: "cyan", children: outroData.continueUrl })] }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: Colors.muted, children: "Note: This wizard uses an LLM agent to analyze and modify your project. Please review the changes made." }) }), _jsx(Box, { children: _jsx(Text, { color: Colors.muted, children: "How did this work for you? Drop us a line: wizard@amplitude.com" }) })] })), outroData.kind === OutroKind.Error && (_jsx(Box, { flexDirection: "column", children: _jsxs(Text, { color: "red", bold: true, children: ['\u2718', " ", outroData.message || 'An error occurred'] }) })), outroData.kind === OutroKind.Cancel && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "yellow", bold: true, children: ['\u25A0', " ", outroData.message || 'Cancelled'] }), outroData.docsUrl && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["Manual setup guide:", ' ', _jsx(Text, { color: "cyan", children: outroData.docsUrl })] }) }))] })), _jsx(Box, { marginTop: 1, children: isSuccess ? (_jsx(PickerMenu, { options: [
+    // ── Main outro views ─────────────────────────────────────────────────
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingX: 2, paddingY: 1, children: [outroData.kind === OutroKind.Success && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: Colors.success, bold: true, children: [Icons.checkmark, " Amplitude is live!"] }), store.eventPlan.length > 0 && (_jsxs(Text, { color: Colors.body, children: [store.eventPlan.length, " event", store.eventPlan.length !== 1 ? 's' : '', " instrumented", store.session.selectedProjectName
+                                ? ` in ${store.session.selectedProjectName}`
+                                : '', "."] })), outroData.changes && outroData.changes.length > 0 && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: outroData.changes.map((change, i) => (_jsxs(Text, { color: Colors.body, children: [Icons.bullet, " ", change] }, i))) })), store.eventPlan.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: Colors.secondary, bold: true, children: "Events" }), store.eventPlan.map((event) => (_jsxs(Text, { color: Colors.body, children: [Icons.diamond, " ", _jsx(Text, { bold: true, children: event.name }), _jsxs(Text, { color: Colors.muted, children: [" ", event.description] })] }, event.name)))] })), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: Colors.muted, children: ["Review changes in", ' ', _jsx(Text, { bold: true, color: Colors.secondary, children: "./amplitude-setup-report.md" })] }) })] })), outroData.kind === OutroKind.Error && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: Colors.error, bold: true, children: [Icons.cross, " Setup failed"] }), outroData.message && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: Colors.body, children: outroData.message }) })), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: Colors.secondary, children: [Icons.arrowRight, " Check your API key and network connection"] }), _jsxs(Text, { color: Colors.secondary, children: [Icons.arrowRight, " Run the wizard again with", ' ', _jsx(Text, { bold: true, children: "--debug" }), " for more detail"] }), outroData.docsUrl && (_jsxs(Text, { color: Colors.secondary, children: [Icons.arrowRight, " Docs:", ' ', _jsx(Text, { color: Colors.accent, children: outroData.docsUrl })] }))] })] })), outroData.kind === OutroKind.Cancel && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: Colors.warning, bold: true, children: [Icons.dash, " Setup cancelled"] }), outroData.message && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: Colors.body, children: outroData.message }) })), outroData.docsUrl && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: Colors.secondary, children: ["Manual setup:", ' ', _jsx(Text, { color: Colors.accent, children: outroData.docsUrl })] }) }))] })), _jsx(Box, { marginTop: 1, children: isSuccess ? (_jsx(PickerMenu, { options: [
                         { label: 'View setup report', value: 'report' },
                         { label: 'Open Amplitude dashboard', value: 'dashboard' },
                         { label: 'Exit', value: 'exit' },