@amplitude/wizard 1.0.0-beta.2 → 1.0.0

package/dist/src/ui/tui/components/AmplitudeLogo.js

@@ -13,17 +13,17 @@ const LINES = [
     "    `-ΦΦΦµµΦΦΦ'''    ",
 ];
 const TEXT = LINES.join('\n');
-/** Amplitude blue gradient — bright core fading to dim. */
+/** Amplitude brand gradient — deep purple to bright blue (from brand guide). */
 const WAVE_COLORS = [
-    '#6b9af7', // light blue
-    '#4478f2', // mid blue
-    '#1e61f0', // Amplitude blue (brand)
-    '#1a55d4', // deeper blue
-    '#1549b8', // deep blue
-    '#1a55d4', // deeper blue
-    '#1e61f0', // Amplitude blue
-    '#4478f2', // mid blue
-    '#6b9af7', // light blue
+    '#311b8e', // deep purple (brand)
+    '#2a1da0', // mid purple-blue
+    '#2020b2', // transitional
+    '#1522c4', // mid blue
+    '#0c19df', // bright blue (brand)
+    '#1522c4', // mid blue
+    '#2020b2', // transitional
+    '#2a1da0', // mid purple-blue
+    '#311b8e', // deep purple
 ];
 /**
  * Characters substituted at each distance from the wave centre.
@@ -51,12 +51,12 @@ function applyHorizWave(line, rowWaveX) {
     })
         .join('');
 }
-export const AmplitudeLogo = ({ color = 'white' }) => (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: color, children: TEXT }) }));
+export const AmplitudeLogo = ({ color = '#0c19df' }) => (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: color, children: TEXT }) }));
 /** AmplitudeLogo with a colour wave (vertical) and a horizontal dissolve wave. */
 export const AnimatedAmplitudeLogo = () => {
-    // Vertical colour wave — advances every 110 ms
+    // Vertical colour wave — advances every 110ms
     const [colorFrame, setColorFrame] = useState(0);
-    // Horizontal dissolve wave — tick advances every 50 ms
+    // Horizontal dissolve wave — tick advances every 50ms
     const [waveTick, setWaveTick] = useState(0);
     useEffect(() => {
         const id = setInterval(() => setColorFrame((f) => (f + 1) % WAVE_COLORS.length), 110);
@@ -66,11 +66,10 @@ export const AnimatedAmplitudeLogo = () => {
         const id = setInterval(() => setWaveTick((t) => t + 1), 50);
         return () => clearInterval(id);
     }, []);
-    // One dissolve wave every 4 s (80 ticks). The wave travels for the first
-    // 36 ticks (~1.8 s), sweeping from left edge to right edge; the remaining
-    // 44 ticks the logo rests at full resolution.
+    // One dissolve sweep every 4s (80 ticks at 50ms). The wave travels for
+    // the first 54 ticks (~2.7s), then rests at full resolution for ~1.3s.
     const TICKS_PER_CYCLE = 80;
-    const ACTIVE_TICKS = 54; // extra ticks to cover diagonal travel + right overshoot
+    const ACTIVE_TICKS = 54;
     const frameInCycle = waveTick % TICKS_PER_CYCLE;
     const waveX = frameInCycle < ACTIVE_TICKS
         ? Math.round((frameInCycle / (ACTIVE_TICKS - 1)) *

package/dist/src/ui/tui/components/AmplitudeTextLogo.d.ts

@@ -1,3 +1 @@
-export declare const AMP_BLUE = "#1E61F0";
-export declare const AMP_CYAN = "#00D4AA";
 export declare const AmplitudeTextLogo: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/tui/components/AmplitudeTextLogo.js

@@ -8,24 +8,59 @@ const LOGO_LINES = [
     '██║  ██║██║ ╚═╝ ██║██║     ███████╗██║   ██║   ╚██████╔╝██████╔╝███████╗',
     '╚═╝  ╚═╝╚═╝     ╚═╝╚═╝     ╚══════╝╚═╝   ╚═╝    ╚═════╝ ╚═════╝ ╚══════╝',
 ];
-export const AMP_BLUE = '#1E61F0';
-export const AMP_CYAN = '#00D4AA';
+/**
+ * Number of color segments per line. Each segment is a single <Text> element
+ * sharing one interpolated color. 10 segments x 6 lines = 60 elements total
+ * (vs ~430 with per-character rendering).
+ */
+const SEGMENTS_PER_LINE = 10;
+/**
+ * Brand gradient endpoints per row.
+ * Top rows: bright blue range. Bottom rows: deep purple to blue.
+ * Each entry is [leftColor, rightColor].
+ */
+const ROW_GRADIENT = [
+    ['#0c19df', '#5533ff'], // row 0 — brightest
+    ['#1420d4', '#4a2df5'], // row 1
+    ['#1c22c8', '#3f27eb'], // row 2
+    ['#2420b8', '#3421e0'], // row 3
+    ['#2c1ea8', '#291bd6'], // row 4
+    ['#311b8e', '#0c19df'], // row 5 — deepest
+];
+/** Linearly interpolate between two hex colors. t ∈ [0, 1]. */
 function lerpColor(a, b, t) {
-    const ar = parseInt(a.slice(1, 3), 16), ag = parseInt(a.slice(3, 5), 16), ab = parseInt(a.slice(5, 7), 16);
-    const br = parseInt(b.slice(1, 3), 16), bg = parseInt(b.slice(3, 5), 16), bb = parseInt(b.slice(5, 7), 16);
-    const r = Math.round(ar + (br - ar) * t)
-        .toString(16)
-        .padStart(2, '0');
-    const g = Math.round(ag + (bg - ag) * t)
-        .toString(16)
-        .padStart(2, '0');
-    const bv = Math.round(ab + (bb - ab) * t)
+    const ar = parseInt(a.slice(1, 3), 16);
+    const ag = parseInt(a.slice(3, 5), 16);
+    const ab = parseInt(a.slice(5, 7), 16);
+    const br = parseInt(b.slice(1, 3), 16);
+    const bg = parseInt(b.slice(3, 5), 16);
+    const bb = parseInt(b.slice(5, 7), 16);
+    const r = Math.round(ar + (br - ar) * t);
+    const g = Math.round(ag + (bg - ag) * t);
+    const bl = Math.round(ab + (bb - ab) * t);
+    return `#${r.toString(16).padStart(2, '0')}${g
         .toString(16)
-        .padStart(2, '0');
-    return `#${r}${g}${bv}`;
+        .padStart(2, '0')}${bl.toString(16).padStart(2, '0')}`;
 }
-export const AmplitudeTextLogo = () => (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: LOGO_LINES.map((line, i) => {
-        const chars = line.split('');
-        const last = chars.length - 1;
-        return (_jsx(Box, { flexDirection: "row", alignItems: "flex-start", children: chars.map((char, j) => (_jsx(Text, { color: lerpColor(AMP_BLUE, AMP_CYAN, last > 0 ? j / last : 0), children: char }, j))) }, i));
-    }) }));
+/**
+ * Pre-computed gradient lines. Built once at module load so React never
+ * recalculates colors during renders.
+ */
+const GRADIENT_LINES = LOGO_LINES.map((line, rowIndex) => {
+    const [leftColor, rightColor] = ROW_GRADIENT[rowIndex];
+    const charsPerSegment = Math.ceil(line.length / SEGMENTS_PER_LINE);
+    const segments = [];
+    for (let s = 0; s < SEGMENTS_PER_LINE; s++) {
+        const start = s * charsPerSegment;
+        const end = Math.min(start + charsPerSegment, line.length);
+        const chars = line.slice(start, end);
+        if (!chars)
+            continue;
+        // Horizontal position for color interpolation
+        const t = line.length > 1 ? start / (line.length - 1) : 0;
+        const color = lerpColor(leftColor, rightColor, t);
+        segments.push({ chars, color });
+    }
+    return segments;
+});
+export const AmplitudeTextLogo = () => (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: GRADIENT_LINES.map((segments, rowIndex) => (_jsx(Box, { flexDirection: "row", children: segments.map((seg, s) => (_jsx(Text, { color: seg.color, children: seg.chars }, s))) }, rowIndex))) }));

package/dist/src/ui/tui/components/BrailleSpinner.d.ts

@@ -0,0 +1,8 @@
+/**
+ * BrailleSpinner — compact animated spinner using braille characters.
+ */
+interface BrailleSpinnerProps {
+    color?: string;
+}
+export declare const BrailleSpinner: ({ color, }: BrailleSpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/ui/tui/components/BrailleSpinner.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * BrailleSpinner — compact animated spinner using braille characters.
+ */
+import { Text } from 'ink';
+import { useState, useEffect } from 'react';
+import { SPINNER_FRAMES, SPINNER_INTERVAL, Colors } from '../styles.js';
+export const BrailleSpinner = ({ color = Colors.active, }) => {
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        const id = setInterval(() => setFrame((f) => (f + 1) % SPINNER_FRAMES.length), SPINNER_INTERVAL);
+        return () => clearInterval(id);
+    }, []);
+    return _jsx(Text, { color: color, children: SPINNER_FRAMES[frame] });
+};

package/dist/src/ui/tui/components/ConsoleView.d.ts

@@ -1,23 +1,20 @@
 /**
- * ConsoleView — Full-screen bordered box.
+ * ConsoleView — Full-screen wrapper without outer border.
  *
- * Renders arbitrary children in the content area, with a persistent
- * slash-command / Claude-query input at the bottom.
- *
- * The input is dormant by default. Activation:
- *   - "/" → activate in slash-command mode
- *   - Tab → activate for free-text Claude query
- * Deactivation: Enter (submit) or Escape. Backspacing to empty also deactivates.
- *
- * While active, commandMode=true on the store disables all useScreenInput handlers.
+ * Layout: content area + separator + console input with ❯ prompt.
+ * Handles slash commands, AI queries, pending prompts, and error banners.
+ * KeyHintBar integrated above the input line.
  */
 import type { ReactNode } from 'react';
 import type { WizardStore } from '../store.js';
+import { type KeyHint } from './KeyHintBar.js';
 interface ConsoleViewProps {
     store: WizardStore;
     width: number;
     height: number;
+    /** Extra key hints from the active screen. */
+    screenHints?: KeyHint[];
     children?: ReactNode;
 }
-export declare const ConsoleView: ({ store, width, height, children, }: ConsoleViewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ConsoleView: ({ store, width, height, screenHints, children, }: ConsoleViewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/ui/tui/components/ConsoleView.js

@@ -1,29 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * ConsoleView — Full-screen bordered box.
+ * ConsoleView — Full-screen wrapper without outer border.
  *
- * Renders arbitrary children in the content area, with a persistent
- * slash-command / Claude-query input at the bottom.
- *
- * The input is dormant by default. Activation:
- *   - "/" → activate in slash-command mode
- *   - Tab → activate for free-text Claude query
- * Deactivation: Enter (submit) or Escape. Backspacing to empty also deactivates.
- *
- * While active, commandMode=true on the store disables all useScreenInput handlers.
+ * Layout: content area + separator + console input with ❯ prompt.
+ * Handles slash commands, AI queries, pending prompts, and error banners.
+ * KeyHintBar integrated above the input line.
  */
 import { Box, Text, useInput } from 'ink';
-import { useState, useEffect, useSyncExternalStore } from 'react';
+import { useState, useEffect } from 'react';
 import { Spinner } from '@inkjs/ui';
-import { OutroKind } from '../../../lib/wizard-session.js';
-import { SlashCommandInput } from '../primitives/SlashCommandInput.js';
-import { PickerMenu } from '../primitives/PickerMenu.js';
-import { Colors, Icons } from '../styles.js';
+import { OutroKind } from '../session-constants.js';
+import { SlashCommandInput } from '../primitives/index.js';
+import { PickerMenu } from '../primitives/index.js';
+import { Colors, Icons, Layout } from '../styles.js';
+import { useWizardStore } from '../hooks/useWizardStore.js';
 import { Overlay } from '../router.js';
 import { queryConsole, resolveConsoleCredentials, buildSessionContext, } from '../../../lib/console-query.js';
-import { COMMANDS, getWhoamiText, parseFeedbackSlashInput, TEST_PROMPT, } from '../console-commands.js';
+import { COMMANDS, getWhoamiText, parseFeedbackSlashInput, } from '../console-commands.js';
 import { analytics } from '../../../utils/analytics.js';
 import { trackWizardFeedback } from '../../../utils/track-wizard-feedback.js';
+import { KeyHintBar } from './KeyHintBar.js';
 function executeCommand(raw, store) {
     const [cmd] = raw.trim().split(/\s+/);
     switch (cmd) {
@@ -37,7 +33,27 @@ function executeCommand(raw, store) {
             store.showLogoutOverlay();
             break;
         case '/whoami':
-            store.setCommandFeedback(getWhoamiText(store.session));
+            // Show current data immediately, then refresh from API
+            store.setCommandFeedback(getWhoamiText(store.session), 30_000);
+            if (store.session.credentials?.idToken && store.session.region) {
+                void import('../../../lib/api.js').then(({ fetchAmplitudeUser }) => {
+                    fetchAmplitudeUser(store.session.credentials.idToken, store.session.region)
+                        .then((userInfo) => {
+                        if (userInfo.email)
+                            store.session.userEmail = userInfo.email;
+                        const orgId = store.session.selectedOrgId;
+                        if (orgId) {
+                            const org = userInfo.orgs.find((o) => o.id === orgId);
+                            if (org)
+                                store.session.selectedOrgName = org.name;
+                        }
+                        store.setCommandFeedback(getWhoamiText(store.session), 30_000);
+                    })
+                        .catch(() => {
+                        // Non-fatal — keep showing what we have
+                    });
+                });
+            }
             break;
         case '/slack':
             store.showSlackOverlay();
@@ -55,8 +71,6 @@ function executeCommand(raw, store) {
             });
             break;
         }
-        case '/test':
-            return TEST_PROMPT;
         case '/mcp':
             store.showMcpOverlay();
             break;
@@ -71,7 +85,7 @@ function executeCommand(raw, store) {
                 store.setCommandFeedback(`Unknown command: ${cmd}. Type / to see available commands.`);
     }
 }
-export const ConsoleView = ({ store, width, height, children, }) => {
+export const ConsoleView = ({ store, width, height, screenHints, children, }) => {
     const [inputActive, setInputActive] = useState(false);
     const [initialValue, setInitialValue] = useState('');
     const [inputKey, setInputKey] = useState(0);
@@ -82,10 +96,10 @@ export const ConsoleView = ({ store, width, height, children, }) => {
     const [planInputMode, setPlanInputMode] = useState('options');
     const [planFeedbackText, setPlanFeedbackText] = useState('');
     const [planCursorVisible, setPlanCursorVisible] = useState(true);
-    useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+    useWizardStore(store);
     const activate = (seed = '') => {
         setInitialValue(seed);
-        setInputKey((k) => k + 1); // remount so initialValue takes effect
+        setInputKey((k) => k + 1);
         setInputActive(true);
         store.setCommandMode(true);
     };
@@ -97,13 +111,12 @@ export const ConsoleView = ({ store, width, height, children, }) => {
     const screenError = store.screenError;
     const showResponse = loading || !!response;
     const showFeedback = !showResponse && !!feedback;
-    const innerWidth = width - 2;
-    const separator = '─'.repeat(Math.max(0, innerWidth));
+    const innerWidth = width;
+    const separator = Layout.separatorChar.repeat(Math.max(0, innerWidth - 2));
     const responseIsLong = !!response && response.split('\n').length > 3;
     const pendingPrompt = store.pendingPrompt;
     // Watch for activation keys while the input is dormant
     useInput((char, key) => {
-        // Escape or Q dismisses overlays: pending prompt (skip) or long response
         if (key.escape || char === 'q' || char === 'Q') {
             if (pendingPrompt && pendingPrompt.kind !== 'event-plan') {
                 store.resolvePrompt(pendingPrompt.kind === 'confirm' ? false : '');
@@ -121,7 +134,9 @@ export const ConsoleView = ({ store, width, height, children, }) => {
         if (char === '/') {
             activate('/');
         }
-        else if (key.tab) {
+        else if (key.tab &&
+            store.session.credentials !== null &&
+            store.session.introConcluded) {
             activate('');
         }
     }, { isActive: !inputActive });
@@ -147,7 +162,7 @@ export const ConsoleView = ({ store, width, height, children, }) => {
             .then((text) => {
             setResponse(text);
             setHistory((h) => [
-                ...h,
+                ...h.slice(-8),
                 { role: 'user', content: value },
                 { role: 'assistant', content: text },
             ]);
@@ -165,7 +180,7 @@ export const ConsoleView = ({ store, width, height, children, }) => {
         const id = setInterval(() => setPlanCursorVisible((v) => !v), 530);
         return () => clearInterval(id);
     }, [planInputMode]);
-    // Reset plan input state when the prompt clears (agent got the answer)
+    // Reset plan input state when the prompt clears
     useEffect(() => {
         if (!pendingPrompt) {
             setPlanInputMode('options');
@@ -200,9 +215,10 @@ export const ConsoleView = ({ store, width, height, children, }) => {
             }
             return;
         }
-        // options mode
+        // options mode — require explicit Y to approve (Enter alone is too easy
+        // to hit accidentally while the plan is pending in the background)
         const lc = char.toLowerCase();
-        if (lc === 'y' || key.return) {
+        if (lc === 'y') {
             store.resolveEventPlan({ decision: 'approved' });
         }
         else if (lc === 's') {
@@ -214,18 +230,19 @@ export const ConsoleView = ({ store, width, height, children, }) => {
     }, {
         isActive: !inputActive && !!pendingPrompt && pendingPrompt.kind === 'event-plan',
     });
-    // Show the latest status message when an overlay is active — RunScreen's
-    // own TabContainer handles this for the non-overlay case.
+    // Show the latest status message when an overlay is active
     const overlayValues = Object.values(Overlay);
     const isOverlay = overlayValues.includes(store.currentScreen);
     const lastStatus = isOverlay && store.statusMessages.length > 0
         ? store.statusMessages[store.statusMessages.length - 1]
         : null;
-    return (_jsxs(Box, { width: width, height: height, flexDirection: "column", borderStyle: "round", borderColor: Colors.muted, children: [_jsx(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children: pendingPrompt ? (_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingX: 1, paddingY: 1, children: [pendingPrompt.kind === 'confirm' ? (_jsx(PickerMenu, { message: pendingPrompt.message, options: [
+    return (_jsxs(Box, { width: width, height: height, flexDirection: "column", children: [_jsx(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children: pendingPrompt ? (_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingX: Layout.paddingX, paddingY: 1, children: [pendingPrompt.kind === 'confirm' ? (_jsx(PickerMenu, { message: pendingPrompt.message, options: [
                                 { label: 'Yes', value: 'yes' },
                                 { label: 'No', value: 'no' },
                             ], onSelect: (v) => store.resolvePrompt(v === 'yes') })) : pendingPrompt.kind === 'choice' ? (_jsx(PickerMenu, { message: pendingPrompt.message, options: pendingPrompt.options.map((o) => ({
                                 label: o,
                                 value: o,
-                            })), onSelect: (v) => store.resolvePrompt(v) })) : (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { color: Colors.primary, bold: true, children: "Instrumentation Plan" }), pendingPrompt.events.map((e) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: Colors.accent, bold: true, children: e.name }), _jsx(Text, { color: Colors.muted, children: e.description })] }, e.name))), planInputMode === 'feedback' ? (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: Colors.muted, children: "Feedback: " }), _jsxs(Text, { children: [planFeedbackText, planCursorVisible ? '▎' : ' '] }), _jsx(Text, { color: Colors.muted, children: "[Enter] send [Esc] cancel" })] })) : (_jsx(Text, { color: Colors.muted, children: "[Y] approve [S] skip [F] give feedback" }))] })), pendingPrompt.kind !== 'event-plan' && (_jsx(Text, { color: Colors.muted, children: " [Q / Esc] skip" }))] })) : responseIsLong ? (_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingX: 1, paddingY: 1, children: [_jsx(Box, { justifyContent: "flex-end", children: _jsx(Text, { color: Colors.muted, children: "[Q / Esc] close" }) }), _jsx(Text, { color: Colors.primary, children: response })] })) : (children) }), lastStatus && (_jsxs(Box, { paddingX: 1, overflow: "hidden", children: [_jsxs(Text, { color: Colors.muted, children: [Icons.diamondOpen, " "] }), _jsx(Text, { color: Colors.muted, wrap: "truncate-end", children: lastStatus })] })), screenError && (_jsxs(Box, { paddingX: 1, gap: 1, children: [_jsx(Text, { color: Colors.error, bold: true, children: "\u26A0" }), _jsx(Box, { flexGrow: 1, overflow: "hidden", children: _jsx(Text, { color: Colors.error, wrap: "truncate-end", children: screenError.message }) }), _jsx(Text, { color: Colors.muted, children: "[R] retry" })] })), _jsx(Text, { color: Colors.muted, children: separator }), showFeedback && (_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { color: Colors.accent, bold: true, children: ' ' }), _jsx(Text, { color: Colors.muted, children: feedback })] })), showResponse && !responseIsLong && (_jsx(Box, { paddingX: 1, paddingY: 1, gap: 1, flexDirection: "column", children: loading ? (_jsx(Spinner, {})) : (_jsx(Text, { color: Colors.primary, children: response })) })), loading && responseIsLong && (_jsx(Box, { paddingX: 1, children: _jsx(Spinner, {}) })), _jsx(Box, { paddingX: 1, children: _jsx(SlashCommandInput, { commands: COMMANDS, isActive: inputActive, initialValue: initialValue, onSubmit: handleSubmit, onDeactivate: deactivate }, inputKey) })] }));
+                            })), onSelect: (v) => store.resolvePrompt(v) })) : (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { color: Colors.muted, children: "Suggested events for your app:" }), _jsx(Text, { color: Colors.heading, bold: true, children: "Instrumentation Plan" }), pendingPrompt.events.map((e, i) => (_jsxs(Text, { wrap: "wrap", children: [_jsxs(Text, { color: Colors.accent, bold: true, children: [Icons.bullet, " ", e.name] }), e.description ? (_jsxs(Text, { color: Colors.secondary, children: [" \u2014 ", e.description] })) : null] }, e.name || i))), planInputMode === 'feedback' ? (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: Colors.muted, children: "Feedback: " }), _jsxs(Text, { children: [planFeedbackText, planCursorVisible ? '▎' : ' '] }), _jsx(Text, { color: Colors.muted, children: "[Enter] send [Esc] cancel" })] })) : (_jsx(Text, { color: Colors.muted, children: "[Y] approve [S] skip [F] give feedback" }))] })), pendingPrompt.kind !== 'event-plan' && (_jsx(Text, { color: Colors.muted, children: " [Q / Esc] skip" }))] })) : responseIsLong ? (_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingX: Layout.paddingX, paddingY: 1, overflow: "hidden", children: [_jsx(Text, { color: Colors.accent, children: response }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: Colors.muted, children: "[Q / Esc] close" }) })] })) : (children) }), lastStatus && (_jsxs(Box, { paddingX: Layout.paddingX, overflow: "hidden", children: [_jsxs(Text, { color: Colors.muted, children: [Icons.diamondOpen, " "] }), _jsx(Text, { color: Colors.muted, wrap: "truncate-end", children: lastStatus })] })), screenError && (_jsxs(Box, { paddingX: Layout.paddingX, gap: 1, children: [_jsx(Text, { color: Colors.error, bold: true, children: Icons.cross }), _jsx(Box, { flexGrow: 1, overflow: "hidden", children: _jsx(Text, { color: Colors.error, wrap: "truncate-end", children: screenError.message }) }), _jsx(Text, { color: Colors.muted, children: "[R] retry" })] })), _jsx(Box, { paddingX: 1, children: _jsx(Text, { color: Colors.border, children: separator }) }), showFeedback && (_jsxs(Box, { paddingX: Layout.paddingX, children: [_jsxs(Text, { color: Colors.accent, children: [Icons.prompt, " "] }), _jsx(Text, { color: Colors.secondary, children: feedback })] })), showResponse && !responseIsLong && (_jsx(Box, { paddingX: Layout.paddingX, paddingY: 1, gap: 1, flexDirection: "column", children: loading ? (_jsx(Spinner, {})) : (_jsx(Text, { color: Colors.accent, children: response })) })), loading && responseIsLong && (_jsx(Box, { paddingX: Layout.paddingX, children: _jsx(Spinner, {}) })), _jsx(KeyHintBar, { hints: screenHints, width: innerWidth, showAskHint: store.session.credentials !== null && store.session.introConcluded }), _jsxs(Box, { paddingX: Layout.paddingX, children: [_jsxs(Text, { color: inputActive ? Colors.accent : Colors.muted, children: [Icons.prompt, ' '] }), inputActive ? (_jsx(SlashCommandInput, { commands: COMMANDS, isActive: inputActive, initialValue: initialValue, onSubmit: handleSubmit, onDeactivate: deactivate }, inputKey)) : (_jsx(Text, { color: Colors.disabled, children: store.session.credentials !== null && store.session.introConcluded
+                            ? 'Press / for commands or Tab to ask a question'
+                            : 'Press / for commands' }))] })] }));
 };

package/dist/src/ui/tui/components/HeaderBar.d.ts

@@ -0,0 +1,12 @@
+/**
+ * HeaderBar — minimal header line.
+ *
+ * "Amplitude Wizard" left, org/project right with dot separator.
+ */
+interface HeaderBarProps {
+    width: number;
+    orgName?: string | null;
+    projectName?: string | null;
+}
+export declare const HeaderBar: ({ width, orgName, projectName }: HeaderBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/ui/tui/components/HeaderBar.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * HeaderBar — minimal header line.
+ *
+ * "Amplitude Wizard" left, org/project right with dot separator.
+ */
+import { Box, Text } from 'ink';
+import { Colors, Icons } from '../styles.js';
+export const HeaderBar = ({ width, orgName, projectName }) => {
+    const contextParts = [];
+    if (orgName)
+        contextParts.push(orgName);
+    if (projectName)
+        contextParts.push(projectName);
+    const context = contextParts.join(' / ');
+    return (_jsxs(Box, { width: width, paddingX: 1, children: [_jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: Colors.heading, bold: true, children: "Amplitude Wizard" }) }), context && (_jsxs(Box, { flexGrow: 1, justifyContent: "flex-end", overflow: "hidden", children: [_jsxs(Text, { color: Colors.muted, children: [" ", Icons.dot, " "] }), _jsx(Text, { color: Colors.secondary, wrap: "truncate-end", children: context })] }))] }));
+};

package/dist/src/ui/tui/components/JourneyStepper.d.ts

@@ -0,0 +1,16 @@
+/**
+ * JourneyStepper — persistent 1-line progress indicator.
+ *
+ * Shows where the user is in the wizard flow:
+ *   ✓ Welcome  ✓ Auth  ● Setup  ○ Verify  ○ Done
+ *
+ * Adapts to terminal width: shows labels on wide terminals,
+ * dots-only on narrow ones.
+ */
+import type { WizardStore } from '../store.js';
+interface JourneyStepperProps {
+    store: WizardStore;
+    width: number;
+}
+export declare const JourneyStepper: ({ store, width }: JourneyStepperProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/src/ui/tui/components/JourneyStepper.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * JourneyStepper — persistent 1-line progress indicator.
+ *
+ * Shows where the user is in the wizard flow:
+ *   ✓ Welcome  ✓ Auth  ● Setup  ○ Verify  ○ Done
+ *
+ * Adapts to terminal width: shows labels on wide terminals,
+ * dots-only on narrow ones.
+ */
+import { Box, Text } from 'ink';
+import { useWizardStore } from '../hooks/useWizardStore.js';
+import { Screen, Flow } from '../router.js';
+import { Colors, Icons, Brand } from '../styles.js';
+/** Human-readable labels for wizard flow steps. */
+const WIZARD_STEPS = [
+    { screen: Screen.Intro, label: 'Welcome' },
+    { screen: Screen.Auth, label: 'Auth' },
+    { screen: Screen.Run, label: 'Setup' },
+    { screen: Screen.DataIngestionCheck, label: 'Verify' },
+    { screen: Screen.Checklist, label: 'Explore' },
+    { screen: Screen.Outro, label: 'Done' },
+];
+/** Screens that belong to each step (for grouping substeps). */
+const STEP_SCREENS = {
+    Welcome: [Screen.Intro],
+    Auth: [Screen.RegionSelect, Screen.Auth, Screen.DataSetup],
+    Setup: [Screen.ActivationOptions, Screen.Setup, Screen.Run, Screen.Mcp],
+    Verify: [Screen.DataIngestionCheck],
+    Explore: [Screen.Checklist, Screen.Slack],
+    Done: [Screen.Outro],
+};
+function getStepState(stepLabel, currentScreen, completedScreens) {
+    const screens = STEP_SCREENS[stepLabel] ?? [];
+    const isCurrent = screens.some((s) => s === currentScreen);
+    if (isCurrent)
+        return 'active';
+    // A step is completed if all its screens are completed
+    const allDone = screens.every((s) => completedScreens.has(s));
+    if (allDone)
+        return 'completed';
+    return 'future';
+}
+/** Build set of screens the flow has already passed. */
+function getCompletedScreens(currentScreen) {
+    const completed = new Set();
+    const allScreensInOrder = WIZARD_STEPS.flatMap((step) => STEP_SCREENS[step.label] ?? []);
+    for (const screen of allScreensInOrder) {
+        if (screen === currentScreen)
+            break;
+        completed.add(screen);
+    }
+    return completed;
+}
+export const JourneyStepper = ({ store, width }) => {
+    useWizardStore(store);
+    // Only show stepper for the main wizard flow
+    if (store.router.activeFlow !== Flow.Wizard)
+        return null;
+    const currentScreen = store.currentScreen;
+    const completedScreens = getCompletedScreens(currentScreen);
+    // Determine if we have room for labels (need ~50 chars for all labels)
+    const showLabels = width >= 60;
+    const steps = WIZARD_STEPS.map((step) => {
+        const state = getStepState(step.label, currentScreen, completedScreens);
+        return { ...step, state };
+    });
+    return (_jsx(Box, { paddingX: 1, children: steps.map((step, i) => {
+            const icon = step.state === 'completed'
+                ? Icons.checkmark
+                : step.state === 'active'
+                    ? Icons.bullet
+                    : Icons.bulletOpen;
+            const color = step.state === 'completed'
+                ? Brand.lilac
+                : step.state === 'active'
+                    ? Colors.accent
+                    : Colors.muted;
+            return (_jsxs(Box, { children: [_jsx(Text, { color: color, bold: step.state === 'active', children: icon }), showLabels && (_jsx(Text, { color: color, bold: step.state === 'active', children: step.state === 'active'
+                            ? ` ${step.label} ←`
+                            : ` ${step.label}` })), i < steps.length - 1 && (_jsx(Text, { color: Colors.border, children: showLabels ? ` ${Icons.dash} ` : ` ${Icons.dot} ` }))] }, step.label));
+        }) }));
+};

package/dist/src/ui/tui/components/KeyHintBar.d.ts

@@ -0,0 +1,19 @@
+/**
+ * KeyHintBar — context-sensitive keyboard shortcut display.
+ *
+ * Each screen declares its available keys; the bar renders them.
+ * Always shows / and Tab hints so users discover commands and questions.
+ */
+export interface KeyHint {
+    key: string;
+    label: string;
+}
+interface KeyHintBarProps {
+    hints?: KeyHint[];
+    width: number;
+    showDefaults?: boolean;
+    /** When false, hides the "Tab → Ask a question" hint (e.g. before auth). */
+    showAskHint?: boolean;
+}
+export declare const KeyHintBar: ({ hints, width, showDefaults, showAskHint, }: KeyHintBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/ui/tui/components/KeyHintBar.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * KeyHintBar — context-sensitive keyboard shortcut display.
+ *
+ * Each screen declares its available keys; the bar renders them.
+ * Always shows / and Tab hints so users discover commands and questions.
+ */
+import { Box, Text } from 'ink';
+import { Colors } from '../styles.js';
+const COMMANDS_HINT = { key: '/', label: 'Commands' };
+const ASK_HINT = { key: 'Tab', label: 'Ask a question' };
+export const KeyHintBar = ({ hints = [], width, showDefaults = true, showAskHint = true, }) => {
+    const defaults = showDefaults
+        ? showAskHint
+            ? [COMMANDS_HINT, ASK_HINT]
+            : [COMMANDS_HINT]
+        : [];
+    const allHints = [...hints, ...defaults];
+    return (_jsx(Box, { width: width, paddingX: 1, gap: 2, children: allHints.map((hint) => (_jsxs(Box, { children: [_jsx(Text, { color: Colors.muted, children: "[" }), _jsx(Text, { color: Colors.body, bold: true, children: hint.key }), _jsxs(Text, { color: Colors.muted, children: ["] ", hint.label] })] }, hint.key + hint.label))) }));
+};

package/dist/src/ui/tui/console-commands.d.ts

@@ -9,9 +9,8 @@ export declare const COMMANDS: {
     cmd: string;
     desc: string;
 }[];
-export declare const TEST_PROMPT: string;
 /** Returns the feedback text for the /whoami command. */
-export declare function getWhoamiText(session: Pick<WizardSession, 'selectedOrgName' | 'selectedWorkspaceName' | 'region'>): string;
+export declare function getWhoamiText(session: Pick<WizardSession, 'selectedOrgId' | 'selectedOrgName' | 'selectedWorkspaceName' | 'selectedProjectName' | 'region' | 'credentials' | 'userEmail'>): string;
 /**
  * Parses `/feedback <message>` from a slash command line.
  * Returns `undefined` if the line is not a feedback command or the message is empty.