@amplitude/wizard 1.0.0-beta.2 → 1.0.0

package/dist/src/ui/tui/console-commands.js

@@ -13,19 +13,60 @@ export const COMMANDS = [
     { cmd: '/slack', desc: 'Set up Amplitude Slack integration' },
     {
         cmd: '/feedback',
-        desc: 'Send product feedback (event: wizard: feedback submitted)',
+        desc: 'Send product feedback',
     },
-    { cmd: '/test', desc: 'Run a prompt-skill demo (confirm + choose)' },
     { cmd: '/snake', desc: 'Play Snake' },
     { cmd: '/exit', desc: 'Exit the wizard' },
 ];
-export const TEST_PROMPT = 'Demo the wizard prompt tools. ' +
-    'First, use the wizard-tools:confirm tool to ask if I want to continue. ' +
-    'Then use the wizard-tools:choose tool to let me pick my favorite color from: Red, Blue, Green, Purple. ' +
-    'Finally, summarize what I chose in one sentence.';
 /** Returns the feedback text for the /whoami command. */
 export function getWhoamiText(session) {
-    return `org: ${session.selectedOrgName ?? '(none)'}  workspace: ${session.selectedWorkspaceName ?? '(none)'}  region: ${session.region ?? '(none)'}`;
+    const loggedIn = session.credentials !== null && session.credentials !== undefined;
+    const hasAnyIdentity = loggedIn ||
+        session.userEmail ||
+        session.selectedOrgName ||
+        session.selectedOrgId;
+    if (!hasAnyIdentity) {
+        return 'Not logged in. Run /login to authenticate.';
+    }
+    const parts = [];
+    if (session.userEmail)
+        parts.push(session.userEmail);
+    if (session.selectedOrgName || session.selectedOrgId) {
+        const orgLabel = session.selectedOrgName ?? session.selectedOrgId ?? '(none)';
+        parts.push(`org: ${orgLabel}`);
+    }
+    // Show project (Amplitude calls this "workspace" internally, but users
+    // think of it as their project). Then show environment name + numeric ID.
+    if (session.selectedWorkspaceName) {
+        parts.push(`project: ${session.selectedWorkspaceName}`);
+    }
+    const envName = session.selectedProjectName;
+    const envId = session.credentials?.projectId && session.credentials.projectId !== 0
+        ? String(session.credentials.projectId)
+        : null;
+    if (envName && envId) {
+        parts.push(`env: ${envName} (${envId})`);
+    }
+    else if (envName) {
+        parts.push(`env: ${envName}`);
+    }
+    else if (envId) {
+        parts.push(`env: ${envId}`);
+    }
+    if (session.region) {
+        parts.push(`region: ${session.region}`);
+    }
+    // Show masked API key so the user knows which key is active
+    if (session.credentials?.projectApiKey) {
+        const key = session.credentials.projectApiKey;
+        const masked = key.length > 8 ? key.slice(0, 4) + '…' + key.slice(-4) : '****';
+        parts.push(`key: ${masked}`);
+    }
+    // If we have some identity but no credentials yet, hint that setup is in progress
+    if (!loggedIn && parts.length > 0) {
+        parts.push('(authenticating…)');
+    }
+    return parts.join('  ');
 }
 /**
  * Parses `/feedback <message>` from a slash command line.

package/dist/src/ui/tui/flows.d.ts

@@ -8,7 +8,7 @@
  * optional completion predicate. The router walks the active flow
  * to resolve which screen to show.
  */
-import { type WizardSession } from '../../lib/wizard-session.js';
+import type { WizardSession } from '../../lib/wizard-session.js';
 /** Screens that participate in linear flows */
 export declare enum Screen {
     Intro = "intro",

package/dist/src/ui/tui/flows.js

@@ -8,7 +8,7 @@
  * optional completion predicate. The router walks the active flow
  * to resolve which screen to show.
  */
-import { RunPhase } from '../../lib/wizard-session.js';
+import { RunPhase } from './session-constants.js';
 // ── Screen + Flow enums ──────────────────────────────────────────────
 /** Screens that participate in linear flows */
 export var Screen;

package/dist/src/ui/tui/hooks/useAsyncEffect.d.ts

@@ -0,0 +1,15 @@
+/**
+ * useAsyncEffect — AbortController-based async effect hook.
+ *
+ * Automatically aborts in-flight async work when the effect re-runs
+ * or the component unmounts. Prevents stale state writes from
+ * completed promises that arrive after the component has moved on.
+ *
+ * Usage:
+ *   useAsyncEffect(async (signal) => {
+ *     const data = await fetch(url, { signal });
+ *     if (!signal.aborted) setData(data);
+ *   }, [url]);
+ */
+import { type DependencyList } from 'react';
+export declare function useAsyncEffect(effect: (signal: AbortSignal) => Promise<void>, deps: DependencyList): void;

package/dist/src/ui/tui/hooks/useAsyncEffect.js

@@ -0,0 +1,35 @@
+/**
+ * useAsyncEffect — AbortController-based async effect hook.
+ *
+ * Automatically aborts in-flight async work when the effect re-runs
+ * or the component unmounts. Prevents stale state writes from
+ * completed promises that arrive after the component has moved on.
+ *
+ * Usage:
+ *   useAsyncEffect(async (signal) => {
+ *     const data = await fetch(url, { signal });
+ *     if (!signal.aborted) setData(data);
+ *   }, [url]);
+ */
+import { useEffect, useRef } from 'react';
+import { logToFile } from '../../../utils/debug.js';
+export function useAsyncEffect(effect, deps) {
+    // Use a ref to always call the latest effect without re-subscribing
+    const effectRef = useRef(effect);
+    effectRef.current = effect;
+    useEffect(() => {
+        const controller = new AbortController();
+        void effectRef.current(controller.signal).catch((err) => {
+            // Silently ignore abort errors — they're expected on cleanup
+            if (err instanceof DOMException && err.name === 'AbortError')
+                return;
+            if (err instanceof Error && err.name === 'AbortError')
+                return;
+            if (controller.signal.aborted)
+                return;
+            // Log other errors but don't crash — screen error boundary handles display
+            logToFile(`[useAsyncEffect] ${err instanceof Error ? err.message : String(err)}`);
+        });
+        return () => controller.abort();
+    }, deps);
+}

package/dist/src/ui/tui/hooks/useWizardStore.d.ts

@@ -0,0 +1,9 @@
+/**
+ * useWizardStore — eliminates repeated useSyncExternalStore boilerplate.
+ *
+ * Every screen had the same 4-line subscription pattern. This hook
+ * replaces it with a single call. Uses .bind() for stable references
+ * to avoid unnecessary resubscription on render.
+ */
+import type { WizardStore } from '../store.js';
+export declare function useWizardStore(store: WizardStore): void;

package/dist/src/ui/tui/hooks/useWizardStore.js

@@ -0,0 +1,11 @@
+/**
+ * useWizardStore — eliminates repeated useSyncExternalStore boilerplate.
+ *
+ * Every screen had the same 4-line subscription pattern. This hook
+ * replaces it with a single call. Uses .bind() for stable references
+ * to avoid unnecessary resubscription on render.
+ */
+import { useSyncExternalStore } from 'react';
+export function useWizardStore(store) {
+    useSyncExternalStore(store.subscribe.bind(store), store.getSnapshot.bind(store));
+}

package/dist/src/ui/tui/ink-ui.js

@@ -6,7 +6,7 @@
  * The router derives the active screen from session state.
  */
 import { Overlay } from './router.js';
-import { RunPhase, OutroKind } from '../../lib/wizard-session.js';
+import { RunPhase, OutroKind } from './session-constants.js';
 // Strip ANSI escape codes (chalk formatting) from strings
 // eslint-disable-next-line no-control-regex
 const ANSI_RE = /\x1b\[[0-9;]*m/g;

package/dist/src/ui/tui/primitives/DissolveTransition.js

@@ -13,7 +13,7 @@ import { useState, useEffect, useRef } from 'react';
 /** Shade characters in build-up order (light → solid). */
 const SHADES = ['░', '▒', '▓', '█'];
 /** How many ticks each shade character displays before advancing. */
-const TICKS_PER_SHADE = 2;
+const TICKS_PER_SHADE = 1;
 /** Total ticks a column needs to complete its shade cycle. */
 const SHADE_CYCLE_TICKS = SHADES.length * TICKS_PER_SHADE;
 function easeInOutCirc(t) {
@@ -28,7 +28,7 @@ var TransitionPhase;
     TransitionPhase["Out"] = "out";
     TransitionPhase["In"] = "in";
 })(TransitionPhase || (TransitionPhase = {}));
-export const DissolveTransition = ({ transitionKey, width, height, children, direction = 'left', duration = 2, }) => {
+export const DissolveTransition = ({ transitionKey, width, height, children, direction = 'left', duration = 16, }) => {
     const [phase, setPhase] = useState(TransitionPhase.Idle);
     const [tick, setTick] = useState(0);
     const [activeDir, setActiveDir] = useState(direction);
@@ -58,9 +58,8 @@ export const DissolveTransition = ({ transitionKey, width, height, children, dir
         }, duration);
         return () => clearInterval(timer);
     }, [phase, duration]);
-    // Easer steps = width: roughly one column activates per tick.
-    // This keeps the sweep front tight (only a few columns in-flight at once).
-    const easerSteps = width;
+    // Easer steps = width / 3: ~3 columns activate per tick for a fast sweep.
+    const easerSteps = Math.max(Math.ceil(width / 3), 10);
     // A phase ends when the easer has completed AND all columns have finished their shade cycle.
     const maxTicks = easerSteps + SHADE_CYCLE_TICKS;
     useEffect(() => {

package/dist/src/ui/tui/primitives/EventPlanViewer.d.ts

@@ -1,5 +1,7 @@
 /**
- * EventPlanViewer — Renders a table of planned analytics events.
+ * EventPlanViewer — Renders a list of planned analytics events.
+ *
+ * Each event shows as: ● event name — description
  */
 import type { PlannedEvent } from '../store.js';
 interface EventPlanViewerProps {

package/dist/src/ui/tui/primitives/EventPlanViewer.js

@@ -1,9 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * EventPlanViewer — Renders a table of planned analytics events.
+ * EventPlanViewer — Renders a list of planned analytics events.
+ *
+ * Each event shows as: ● event name — description
  */
 import { Box, Text } from 'ink';
-import { Colors } from '../styles.js';
+import { Colors, Icons } from '../styles.js';
 export const EventPlanViewer = ({ events }) => {
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, children: "Event plan" }), _jsx(Box, { height: 1 }), events.map((event) => (_jsxs(Box, { children: [_jsx(Text, { bold: true, children: event.name }), _jsxs(Text, { color: Colors.muted, children: [" ", event.description] })] }, event.name)))] }));
+    if (events.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, children: "Event plan" }), _jsx(Box, { height: 1 }), _jsx(Text, { color: Colors.muted, children: "Waiting for the agent to propose events..." })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, children: "Event plan" }), _jsx(Box, { height: 1 }), events.map((event) => (_jsxs(Text, { color: Colors.muted, children: [Icons.bullet, ' ', _jsx(Text, { color: Colors.accent, bold: true, children: event.name }), event.description ? ` — ${event.description}` : ''] }, event.name)))] }));
 };

package/dist/src/ui/tui/primitives/ProgressList.js

@@ -10,7 +10,7 @@ import { LoadingBox } from './LoadingBox.js';
 export const ProgressList = ({ items, title }) => {
     const completed = items.filter((t) => t.status === 'completed').length;
     const total = items.length;
-    return (_jsxs(Box, { flexDirection: "column", children: [title && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: title }), _jsx(Text, { children: " " })] })), items.length === 0 && _jsx(LoadingBox, { message: "Analyzing project..." }), items.map((item, i) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [title && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: title }), _jsx(Box, { height: 1 })] })), items.length === 0 && _jsx(LoadingBox, { message: "Analyzing project..." }), items.map((item, i) => {
                 const icon = item.status === 'completed'
                     ? Icons.squareFilled
                     : item.status === 'in_progress'

package/dist/src/ui/tui/primitives/SlashCommandInput.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * SlashCommandInput — Text input with slash-command picker.
  *
@@ -34,6 +34,7 @@ export const SlashCommandInput = ({ commands = [], isActive, initialValue = '',
         })
         : [];
     const clampedIndex = Math.min(selectedIndex, Math.max(0, filtered.length - 1));
+    const maxCmdLen = filtered.reduce((m, c) => Math.max(m, c.cmd.length), 0);
     useInput((char, key) => {
         if (key.upArrow && isSlashMode) {
             setSelectedIndex((i) => Math.max(0, i - 1));
@@ -79,7 +80,21 @@ export const SlashCommandInput = ({ commands = [], isActive, initialValue = '',
     if (!isActive) {
         return (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: Colors.muted, children: '>' }), _jsx(Text, { color: Colors.muted, inverse: false, children: ' ' })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: Colors.muted, children: '>' }), _jsxs(Text, { children: [value, cursorVisible ? _jsx(Text, { inverse: true, children: " " }) : _jsx(Text, { children: " " })] })] }), isSlashMode && filtered.length > 0 && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: filtered.map((c, i) => (_jsxs(Box, { gap: 2, children: [_jsx(Text, { color: i === clampedIndex ? Colors.primary : undefined, bold: i === clampedIndex, children: i === clampedIndex
-                                ? Icons.triangleSmallRight + ' ' + c.cmd
-                                : '  ' + c.cmd }), _jsx(Text, { color: i !== clampedIndex ? Colors.muted : undefined, children: c.desc })] }, c.cmd))) }))] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: Colors.muted, children: '>' }), _jsxs(Text, { children: [value, cursorVisible ? _jsx(Text, { inverse: true, children: " " }) : _jsx(Text, { children: " " })] })] }), isSlashMode && filtered.length > 0 && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: (() => {
+                    // Show at most MAX_VISIBLE commands, scrolling to keep selection visible
+                    const MAX_VISIBLE = 6;
+                    const total = filtered.length;
+                    let startIdx = 0;
+                    if (total > MAX_VISIBLE) {
+                        // Keep selected item in the middle of the visible window
+                        startIdx = Math.max(0, Math.min(clampedIndex - Math.floor(MAX_VISIBLE / 2), total - MAX_VISIBLE));
+                    }
+                    const visible = filtered.slice(startIdx, startIdx + MAX_VISIBLE);
+                    const hasMore = total > MAX_VISIBLE;
+                    return (_jsxs(_Fragment, { children: [hasMore && startIdx > 0 && (_jsxs(Text, { color: Colors.muted, children: ['  ', "\u2191 ", startIdx, " more"] })), visible.map((c, vi) => {
+                                const i = startIdx + vi;
+                                const isFocused = i === clampedIndex;
+                                return (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: isFocused ? Colors.primary : undefined, bold: isFocused, children: isFocused ? Icons.triangleSmallRight : ' ' }), _jsx(Text, { color: isFocused ? Colors.primary : undefined, bold: isFocused, children: c.cmd.padEnd(maxCmdLen) }), _jsx(Text, { color: !isFocused ? Colors.muted : undefined, children: c.desc })] }, c.cmd));
+                            }), hasMore && startIdx + MAX_VISIBLE < total && (_jsxs(Text, { color: Colors.muted, children: ['  ', "\u2193 ", total - startIdx - MAX_VISIBLE, " more"] }))] }));
+                })() }))] }));
 };

package/dist/src/ui/tui/primitives/SplitView.d.ts

@@ -1,5 +1,6 @@
 /**
- * SplitView — Two-pane horizontal layout: 50/50.
+ * SplitView — Two-pane layout that adapts to terminal width.
+ * Side-by-side at ≥80 cols, stacked vertically below that.
  */
 import type { ReactNode } from 'react';
 interface SplitViewProps {

package/dist/src/ui/tui/primitives/SplitView.js

@@ -1,8 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * SplitView — Two-pane horizontal layout: 50/50.
+ * SplitView — Two-pane layout that adapts to terminal width.
+ * Side-by-side at ≥80 cols, stacked vertically below that.
  */
 import { Box } from 'ink';
+import { useStdoutDimensions } from '../hooks/useStdoutDimensions.js';
+const STACK_THRESHOLD = 80;
 export const SplitView = ({ left, right, gap = 2 }) => {
-    return (_jsxs(Box, { flexDirection: "row", flexGrow: 1, gap: gap, children: [_jsx(Box, { width: "50%", flexDirection: "column", children: left }), _jsx(Box, { width: "50%", flexDirection: "column", children: right })] }));
+    const [columns] = useStdoutDimensions();
+    const stacked = columns < STACK_THRESHOLD;
+    if (stacked) {
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, gap: 1, children: [_jsx(Box, { flexDirection: "column", children: right }), _jsx(Box, { flexDirection: "column", children: left })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "row", flexGrow: 1, gap: gap, children: [_jsx(Box, { width: "50%", flexDirection: "column", overflow: "hidden", children: left }), _jsx(Box, { width: "50%", flexDirection: "column", overflow: "hidden", children: right })] }));
 };

package/dist/src/ui/tui/primitives/TabContainer.js

@@ -17,14 +17,22 @@ export const TabContainer = ({ tabs, statusMessage, requestedTab, onTabConsumed,
             setActiveTab(idx);
         onTabConsumed?.();
     }, [requestedTab]);
-    useScreenInput((_input, key) => {
+    useScreenInput((input, key) => {
+        // Arrow keys always switch tabs (Snake uses WASD for movement)
         if (key.leftArrow) {
             setActiveTab((prev) => Math.max(0, prev - 1));
+            return;
         }
         if (key.rightArrow) {
             setActiveTab((prev) => Math.min(tabs.length - 1, prev + 1));
+            return;
+        }
+        // Number keys also work for tab switching (1-indexed)
+        const num = parseInt(input, 10);
+        if (!isNaN(num) && num >= 1 && num <= tabs.length) {
+            setActiveTab(num - 1);
         }
     });
     const current = tabs[activeTab];
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Box, { flexDirection: "column", flexGrow: 1, children: current?.component }), statusMessage && (_jsx(Box, { borderStyle: "single", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, borderColor: Colors.muted, paddingX: 1, overflow: "hidden", children: _jsxs(Text, { color: Colors.muted, children: [Icons.diamondOpen, " ", statusMessage] }) })), _jsx(Box, { height: 1 }), _jsxs(Box, { gap: 1, paddingX: 1, justifyContent: "space-between", children: [_jsx(Box, { gap: 1, children: tabs.map((tab, i) => (_jsx(Text, { inverse: i === activeTab, color: i === activeTab ? Colors.accent : Colors.muted, bold: i === activeTab, children: ` ${tab.label} ` }, tab.id))) }), _jsx(Text, { color: Colors.muted, children: "\u2190 \u2192 to browse tabs while the wizard runs" })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children: current?.component }), _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [statusMessage && (_jsx(Box, { borderStyle: "single", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, borderColor: Colors.muted, paddingX: 1, overflow: "hidden", children: _jsxs(Text, { color: Colors.muted, children: [Icons.diamondOpen, " ", statusMessage] }) })), _jsx(Box, { height: 1 }), _jsxs(Box, { gap: 1, paddingX: 1, justifyContent: "space-between", children: [_jsx(Box, { gap: 1, children: tabs.map((tab, i) => (_jsx(Text, { inverse: i === activeTab, color: i === activeTab ? Colors.accent : Colors.muted, bold: i === activeTab, children: ` ${tab.label} ` }, tab.id))) }), _jsx(Text, { color: Colors.muted, children: "\u2190 \u2192 to switch tabs" })] })] })] }));
 };

package/dist/src/ui/tui/primitives/index.d.ts

@@ -15,7 +15,6 @@ export { EventPlanViewer } from './EventPlanViewer.js';
 export { ScreenErrorBoundary } from './ScreenErrorBoundary.js';
 export { TabContainer } from './TabContainer.js';
 export type { TabDefinition } from './TabContainer.js';
-export { KagiSmallWebViewer } from './KagiSmallWebViewer.js';
 export { SnakeGame } from './SnakeGame.js';
 export { DissolveTransition } from './DissolveTransition.js';
 export type { WipeDirection } from './DissolveTransition.js';

package/dist/src/ui/tui/primitives/index.js

@@ -13,7 +13,6 @@ export { ReportViewer } from './ReportViewer.js';
 export { EventPlanViewer } from './EventPlanViewer.js';
 export { ScreenErrorBoundary } from './ScreenErrorBoundary.js';
 export { TabContainer } from './TabContainer.js';
-export { KagiSmallWebViewer } from './KagiSmallWebViewer.js';
 export { SnakeGame } from './SnakeGame.js';
 export { DissolveTransition } from './DissolveTransition.js';
 export { SlashCommandInput } from './SlashCommandInput.js';

package/dist/src/ui/tui/router.js

@@ -11,7 +11,7 @@
  * Adding an overlay = call pushOverlay() from anywhere.
  * No switch statements, no hardcoded transitions in business logic.
  */
-import { OutroKind } from '../../lib/wizard-session.js';
+import { OutroKind } from './session-constants.js';
 import { FLOWS, Screen, Flow } from './flows.js';
 // Re-export so existing imports from './router.js' keep working
 export { Screen, Flow };

package/dist/src/ui/tui/screen-registry.d.ts

@@ -1,12 +1,5 @@
 /**
  * Screen registry — maps screen names to React components.
- *
- * Adding a new screen:
- *   1. Create the component in screens/
- *   2. Add an entry here
- *   3. Add the screen name to the router flow (router.ts)
- *
- * App.tsx never needs to change.
  */
 import type { ReactNode } from 'react';
 import type { WizardStore } from './store.js';

package/dist/src/ui/tui/screen-registry.js

@@ -17,7 +17,7 @@ import { LogoutScreen } from './screens/LogoutScreen.js';
 import { LoginScreen } from './screens/LoginScreen.js';
 import { OutroScreen } from './screens/OutroScreen.js';
 import { createMcpInstaller } from './services/mcp-installer.js';
-import { SnakeGame } from './primitives/SnakeGame.js';
+import { SnakeGame } from './primitives/index.js';
 export function createServices(localMcp = false) {
     return {
         mcpInstaller: createMcpInstaller(localMcp),
@@ -28,10 +28,19 @@ export function createScreens(store, services) {
         // Overlays
         [Overlay.Outage]: _jsx(OutageScreen, { store: store }),
         [Overlay.SettingsOverride]: _jsx(SettingsOverrideScreen, { store: store }),
-        [Overlay.Snake]: _jsx(SnakeGame, { onExit: () => store.hideSnakeOverlay() }),
+        [Overlay.Snake]: (_jsx(SnakeGame, { onExit: () => store.hideSnakeOverlay(), music: false })),
         [Overlay.Mcp]: (_jsx(McpScreen, { store: store, installer: services.mcpInstaller, onComplete: () => store.hideMcpOverlay() })),
         [Overlay.Slack]: (_jsx(SlackScreen, { store: store, onComplete: () => store.hideSlackOverlay() })),
-        [Overlay.Logout]: (_jsx(LogoutScreen, { onComplete: () => store.hideLogoutOverlay(), installDir: store.session.installDir })),
+        [Overlay.Logout]: (_jsx(LogoutScreen, { onComplete: () => store.hideLogoutOverlay(), installDir: store.session.installDir, onLoggedOut: () => {
+                store.session.credentials = null;
+                store.session.userEmail = null;
+                store.session.selectedOrgId = null;
+                store.session.selectedOrgName = null;
+                store.session.selectedWorkspaceId = null;
+                store.session.selectedWorkspaceName = null;
+                store.session.selectedProjectName = null;
+                store.emitChange();
+            } })),
         [Overlay.Login]: (_jsx(LoginScreen, { store: store, onComplete: () => store.hideLoginOverlay() })),
         // Wizard flow
         [Screen.Intro]: _jsx(IntroScreen, { store: store }),
@@ -49,7 +58,7 @@ export function createScreens(store, services) {
         // Standalone MCP flows
         [Screen.McpAdd]: (_jsx(McpScreen, { store: store, installer: services.mcpInstaller, standalone: true })),
         [Screen.McpRemove]: (_jsx(McpScreen, { store: store, installer: services.mcpInstaller, mode: "remove", standalone: true })),
-        // Slack integration (in-wizard step and standalone flow)
+        // Slack integration
         [Screen.Slack]: _jsx(SlackScreen, { store: store }),
         [Screen.SlackSetup]: _jsx(SlackScreen, { store: store, standalone: true }),
     };

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

@@ -1,8 +1,8 @@
 /**
- * ActivationOptionsScreen — "What would you like to do?" prompt.
+ * ActivationOptionsScreen — "What would you like to do?" prompt (v2).
  *
  * Shown when the user has the SDK installed but hasn't fully activated yet
- * (1–49 events). Offers next-step options without forcing a full re-run.
+ * (1-49 events). Offers next-step options without forcing a full re-run.
  */
 import type { WizardStore } from '../store.js';
 interface ActivationOptionsScreenProps {

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

@@ -1,20 +1,20 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
- * ActivationOptionsScreen — "What would you like to do?" prompt.
+ * ActivationOptionsScreen — "What would you like to do?" prompt (v2).
  *
  * Shown when the user has the SDK installed but hasn't fully activated yet
- * (1–49 events). Offers next-step options without forcing a full re-run.
+ * (1-49 events). Offers next-step options without forcing a full re-run.
  */
 import { Box, Text } from 'ink';
-import { useSyncExternalStore } from 'react';
+import { useWizardStore } from '../hooks/useWizardStore.js';
 import { PickerMenu } from '../primitives/index.js';
-import { Colors } from '../styles.js';
-import { OutroKind } from '../../../lib/wizard-session.js';
+import { Colors, Icons } from '../styles.js';
+import { OutroKind } from '../session-constants.js';
 import { OUTBOUND_URLS } from '../../../lib/constants.js';
 import opn from 'opn';
 const DOCS_URL = OUTBOUND_URLS.sdkDocs;
 export const ActivationOptionsScreen = ({ store, }) => {
-    useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+    useWizardStore(store);
     const { snippetConfigured } = store.session;
     const handleSelect = (value) => {
         switch (value) {
@@ -40,13 +40,13 @@ export const ActivationOptionsScreen = ({ store, }) => {
                 break;
         }
     };
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Text, { bold: true, color: Colors.accent, children: ["Your SDK is", snippetConfigured ? ' installed' : ' partially set up', " \u2014 waiting for events"] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: Colors.muted, children: "We can see your project is configured but hasn't received many events yet." }), _jsx(Text, { color: Colors.muted, children: "What would you like to do?" })] }), _jsx(Box, { marginTop: 1, children: _jsx(PickerMenu, { options: [
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Text, { bold: true, color: Colors.accent, children: ["Your SDK is", snippetConfigured ? ' installed' : ' partially set up', ' ', Icons.dash, " waiting for events"] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: Colors.secondary, children: "We can see your project is configured but hasn't received many events yet." }), _jsx(Text, { color: Colors.body, children: "What would you like to do?" })] }), _jsx(Box, { marginTop: 1, children: _jsx(PickerMenu, { options: [
                         {
                             value: 'test-locally',
                             label: 'Help me test locally',
                             hint: 'run the setup agent',
                         },
-                        { value: 'debug', label: "I'm blocked", hint: 'debug with Claude' },
+                        { value: 'debug', label: "I'm blocked", hint: 'get help' },
                         { value: 'docs', label: 'Take me to the docs', hint: DOCS_URL },
                         {
                             value: 'exit',

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
  * AuthScreen — Multi-step authentication and account setup (SUSI flow).
  *
@@ -13,10 +13,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * When credentials are set the router resolves past this screen.
  */
 import { Box, Text } from 'ink';
-import { useState, useEffect, useSyncExternalStore } from 'react';
+import { useState, useEffect } from 'react';
 import { TextInput } from '@inkjs/ui';
-import { LoadingBox, PickerMenu } from '../primitives/index.js';
-import { Colors } from '../styles.js';
+import { useWizardStore } from '../hooks/useWizardStore.js';
+import { PickerMenu } from '../primitives/index.js';
+import { Colors, Icons } from '../styles.js';
+import { BrailleSpinner } from '../components/BrailleSpinner.js';
 import { DEFAULT_HOST_URL, } from '../../../lib/constants.js';
 import { analytics } from '../../../utils/analytics.js';
 /**
@@ -30,7 +32,7 @@ function getSelectableEnvironments(workspace) {
         .sort((a, b) => a.rank - b.rank);
 }
 export const AuthScreen = ({ store }) => {
-    useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+    useWizardStore(store);
     const { session } = store;
     // Local step state — which org the user has selected in this render session
     const [selectedOrg, setSelectedOrg] = useState(null);
@@ -40,6 +42,18 @@ export const AuthScreen = ({ store }) => {
     const [apiKeyError, setApiKeyError] = useState('');
     const [savedKeySource, setSavedKeySource] = useState(null);
     const pendingOrgs = session.pendingOrgs;
+    // Validate pre-populated org/workspace IDs against live data.
+    // If the user's access changed (removed from org, switched accounts),
+    // stale IDs from ./ampli.json could silently select the wrong project.
+    useEffect(() => {
+        if (!pendingOrgs || pendingOrgs.length === 0)
+            return;
+        if (session.selectedOrgId &&
+            !pendingOrgs.some((o) => o.id === session.selectedOrgId)) {
+            // Stale org — clear pre-populated values so the picker shows
+            store.setOrgAndWorkspace({ id: '', name: '' }, { id: '', name: '' }, session.installDir);
+        }
+    }, [pendingOrgs]);
     // Resolve org: user-picked > single-org auto-select > pre-populated from session
     const prePopulatedOrg = session.selectedOrgId && pendingOrgs
         ? pendingOrgs.find((o) => o.id === session.selectedOrgId) ?? null
@@ -187,7 +201,7 @@ export const AuthScreen = ({ store }) => {
     const needsWorkspacePick = effectiveOrg !== null &&
         effectiveOrg.workspaces.length > 1 &&
         !selectedWorkspace;
-    const needsProjectPick = workspaceChosen && hasMultipleEnvs && !selectedEnv;
+    const needsProjectPick = workspaceChosen && hasMultipleEnvs && !selectedEnv && !needsWorkspacePick;
     const needsApiKey = effectiveOrg !== null &&
         workspaceChosen &&
         envResolved &&
@@ -221,27 +235,43 @@ export const AuthScreen = ({ store }) => {
             setSavedKeySource(source);
         });
     };
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: Colors.accent, children: "Amplitude Setup Wizard" }), session.detectedFrameworkLabel && (_jsxs(Text, { children: [_jsxs(Text, { color: "green", children: ['✔', " "] }), _jsxs(Text, { children: ["Framework: ", session.detectedFrameworkLabel] })] }))] }), pendingOrgs === null && (_jsxs(_Fragment, { children: [_jsx(LoadingBox, { message: "Waiting for authentication..." }), session.loginUrl && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: Colors.muted, children: "If the browser didn't open, copy and paste this URL:" }), _jsx(Text, { color: "cyan", children: session.loginUrl })] }))] })), needsOrgPick && pendingOrgs && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: Colors.muted, children: "Select your Amplitude organization:" }), _jsx(PickerMenu, { options: pendingOrgs.map((org) => ({
-                            label: org.name,
-                            value: org,
-                        })), onSelect: (value) => {
-                            const org = Array.isArray(value) ? value[0] : value;
-                            setSelectedOrg(org);
-                        } })] })), needsWorkspacePick && effectiveOrg && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: Colors.muted, children: ["Select a workspace in ", _jsx(Text, { color: "white", children: effectiveOrg.name }), ":"] }), _jsx(PickerMenu, { options: effectiveOrg.workspaces.map((ws) => ({
-                            label: ws.name,
-                            value: ws,
-                        })), onSelect: (value) => {
-                            const ws = Array.isArray(value) ? value[0] : value;
-                            setSelectedWorkspace(ws);
-                            store.setOrgAndWorkspace(effectiveOrg, ws, session.installDir);
-                        } })] })), needsProjectPick && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: Colors.muted, children: "Select a project:" }), _jsx(PickerMenu, { options: selectableEnvs.map((env) => ({
-                            label: env.name,
-                            value: env,
-                        })), onSelect: (value) => {
-                            const env = Array.isArray(value) ? value[0] : value;
-                            setSelectedEnv(env);
-                            store.setSelectedProjectName(env.name);
-                        } })] })), needsApiKey && (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["Enter your Amplitude project ", _jsx(Text, { bold: true, children: "API Key" })] }), _jsx(Text, { color: Colors.muted, children: "Amplitude \u2192 Settings \u2192 Projects \u2192 [your project] \u2192 API Keys" }), session.apiKeyNotice && (_jsx(Text, { color: "yellow", children: session.apiKeyNotice }))] }), _jsx(TextInput, { placeholder: "Paste API key here\u2026", onSubmit: handleApiKeySubmit }), apiKeyError && _jsx(Text, { color: "red", children: apiKeyError }), savedKeySource && (_jsxs(Text, { color: "green", children: ['✔ ', savedKeySource === 'keychain'
+    // Completed-step indicators shown above the active step
+    const completedSteps = [];
+    if (session.detectedFrameworkLabel) {
+        completedSteps.push({
+            label: `Framework: ${session.detectedFrameworkLabel}`,
+        });
+    }
+    if (effectiveOrg && !needsOrgPick) {
+        completedSteps.push({ label: `Organization: ${effectiveOrg.name}` });
+    }
+    if (effectiveWorkspace && !needsWorkspacePick) {
+        completedSteps.push({ label: `Workspace: ${effectiveWorkspace.name}` });
+    }
+    if (selectedEnv && !needsProjectPick) {
+        completedSteps.push({ label: `Project: ${selectedEnv.name}` });
+    }
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [completedSteps.length > 0 && (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: completedSteps.map((step, i) => (_jsxs(Text, { children: [_jsxs(Text, { color: Colors.success, children: [Icons.checkmark, " "] }), _jsx(Text, { color: Colors.body, children: step.label })] }, i))) })), pendingOrgs === null && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(BrailleSpinner, { color: Colors.accent }), _jsxs(Text, { color: Colors.body, children: ["Waiting for authentication", Icons.ellipsis] })] }), session.loginUrl && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: Colors.muted, children: "If the browser didn't open, copy and paste this URL:" }), _jsx(Text, { color: Colors.accent, children: session.loginUrl })] }))] })), needsOrgPick && pendingOrgs && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: Colors.heading, children: "Select your organization" }), _jsx(Box, { marginTop: 1, children: _jsx(PickerMenu, { options: pendingOrgs.map((org) => ({
+                                label: org.name,
+                                value: org,
+                            })), onSelect: (value) => {
+                                const org = Array.isArray(value) ? value[0] : value;
+                                setSelectedOrg(org);
+                            } }) })] })), needsWorkspacePick && effectiveOrg && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: Colors.heading, children: "Select a workspace" }), _jsxs(Text, { color: Colors.secondary, children: ["in ", _jsx(Text, { color: Colors.body, children: effectiveOrg.name })] }), _jsx(Box, { marginTop: 1, children: _jsx(PickerMenu, { options: effectiveOrg.workspaces.map((ws) => ({
+                                label: ws.name,
+                                value: ws,
+                            })), onSelect: (value) => {
+                                const ws = Array.isArray(value) ? value[0] : value;
+                                setSelectedWorkspace(ws);
+                                store.setOrgAndWorkspace(effectiveOrg, ws, session.installDir);
+                            } }) })] })), needsProjectPick && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: Colors.heading, children: "Select a project" }), _jsx(Box, { marginTop: 1, children: _jsx(PickerMenu, { options: selectableEnvs.map((env) => ({
+                                label: env.name,
+                                value: env,
+                            })), onSelect: (value) => {
+                                const env = Array.isArray(value) ? value[0] : value;
+                                setSelectedEnv(env);
+                                store.setSelectedProjectName(env.name);
+                            } }) })] })), needsApiKey && (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: Colors.heading, children: "Enter your project API key" }), _jsxs(Text, { color: Colors.muted, children: ["Amplitude ", Icons.arrowRight, " Settings ", Icons.arrowRight, " Projects", ' ', Icons.arrowRight, " [your project] ", Icons.arrowRight, " API Keys"] }), session.apiKeyNotice && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: Colors.warning, children: session.apiKeyNotice }) }))] }), _jsx(TextInput, { placeholder: "Paste API key here...", onSubmit: handleApiKeySubmit }), apiKeyError && _jsx(Text, { color: Colors.error, children: apiKeyError }), savedKeySource && (_jsxs(Text, { color: Colors.success, children: [Icons.checkmark, ' ', savedKeySource === 'keychain'
                                 ? 'API key saved to system keychain'
                                 : 'API key saved to .env.local'] }))] }))] }));
 };