@amplitude/wizard 1.0.0-beta.2 → 1.0.0

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * RegionSelectScreen — Choose Amplitude data-center region (US or EU).
  *
@@ -11,13 +11,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * US is focused by default — pressing Enter selects it without navigating.
  */
 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 { Colors, Icons } from '../styles.js';
 const REGIONS = [
     {
         label: 'United States',
-        hint: 'app.amplitude.com · default',
+        hint: 'app.amplitude.com',
         value: 'us',
     },
     {
@@ -27,14 +27,16 @@ const REGIONS = [
     },
 ];
 export const RegionSelectScreen = ({ store }) => {
-    useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+    useWizardStore(store);
     const { session } = store;
-    return (_jsx(_Fragment, { children: _jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingTop: 1, children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: Colors.accent, children: session.regionForced
-                                ? 'Switch data-center region'
-                                : 'Where is your Amplitude organization?' }), _jsx(Text, { color: Colors.muted, children: session.regionForced
-                                ? `Current: ${session.region?.toUpperCase() ?? 'US'} — pick a new region below`
-                                : 'Press Enter to use US (default), or select EU if your org is on the EU data center.' })] }), _jsx(PickerMenu, { options: REGIONS, onSelect: (value) => {
-                        const region = Array.isArray(value) ? value[0] : value;
-                        store.setRegion(region);
-                    } })] }) }));
+    const heading = session.regionForced
+        ? 'Switch data-center region'
+        : 'Select your data region';
+    const hint = session.regionForced
+        ? `Current: ${session.region?.toUpperCase() ?? 'US'} ${Icons.dash} pick a new region below`
+        : 'Select the region for your Amplitude project. This should match the region your organization uses.';
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: Colors.heading, children: heading }), _jsx(Text, { color: Colors.muted, children: hint })] }), _jsx(PickerMenu, { options: REGIONS, onSelect: (value) => {
+                    const region = Array.isArray(value) ? value[0] : value;
+                    store.setRegion(region);
+                } }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: Colors.muted, children: [Icons.dot, " Data residency affects API endpoints and compliance. You can change this later with", ' ', _jsx(Text, { color: Colors.secondary, children: "/region" }), "."] }) })] }));
 };

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

@@ -1,12 +1,14 @@
 /**
- * RunScreen — Tabbed observational view of the agent run.
+ * RunScreen — Agent dashboard focused on tasks and progress.
  *
- * Two tabs:
- *   - Status: SplitView with TipsCard (left) + ProgressList (right)
+ * Tabs:
+ *   - Progress (default): full-width ProgressList, elapsed timer, currently
+ *     editing file, inline event plan, and compact conditional tips
  *   - Logs: LogViewer tailing the wizard log file
+ *   - Snake: easter egg game
  *
- * No prompts — the agent runs headlessly.
- * TipsCard reactively shows tips based on discovered features.
+ * No marketing tips carousel. Conditional feature tips (Stripe, LLM) are
+ * shown as single compact lines when relevant.
  */
 import type { WizardStore } from '../store.js';
 interface RunScreenProps {

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

@@ -1,162 +1,93 @@
-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";
 /**
- * RunScreen — Tabbed observational view of the agent run.
+ * RunScreen — Agent dashboard focused on tasks and progress.
  *
- * Two tabs:
- *   - Status: SplitView with TipsCard (left) + ProgressList (right)
+ * Tabs:
+ *   - Progress (default): full-width ProgressList, elapsed timer, currently
+ *     editing file, inline event plan, and compact conditional tips
  *   - Logs: LogViewer tailing the wizard log file
+ *   - Snake: easter egg game
  *
- * No prompts — the agent runs headlessly.
- * TipsCard reactively shows tips based on discovered features.
+ * No marketing tips carousel. Conditional feature tips (Stripe, LLM) are
+ * shown as single compact lines when relevant.
  */
 import { Box, Text } from 'ink';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useScreenInput } from '../hooks/useScreenInput.js';
-import { useStdoutDimensions } from '../hooks/useStdoutDimensions.js';
-import { useSyncExternalStore } from 'react';
-import { TabContainer, SplitView, ProgressList, LogViewer, EventPlanViewer, KagiSmallWebViewer, SnakeGame, } from '../primitives/index.js';
+import { useWizardStore } from '../hooks/useWizardStore.js';
+import { TabContainer, ProgressList, LogViewer, SnakeGame, EventPlanViewer, } from '../primitives/index.js';
 import { Colors, Icons } from '../styles.js';
-import { AnimatedAmplitudeLogo } from '../components/AmplitudeLogo.js';
-import { DiscoveredFeature, AdditionalFeature, ADDITIONAL_FEATURE_LABELS, } from '../../../lib/wizard-session.js';
+import { BrailleSpinner } from '../components/BrailleSpinner.js';
+import { AmplitudeLogo } from '../components/AmplitudeLogo.js';
+import { useStdoutDimensions } from '../hooks/useStdoutDimensions.js';
+import { DiscoveredFeature } from '../../../lib/wizard-session.js';
+import { AdditionalFeature, ADDITIONAL_FEATURE_LABELS, } from '../session-constants.js';
 import { OUTBOUND_URLS } from '../../../lib/constants.js';
 const LOG_FILE = '/tmp/amplitude-wizard.log';
-/** Tips that rotate on a timer — each inner array is one "page". */
-const TIP_PAGES = [
-    [
-        {
-            id: 'events',
-            title: 'Events are the bedrock of your Amplitude data',
-            description: 'As people use your product, events build a picture of their behavior and satisfaction. Good events make great data.',
-        },
-        {
-            id: 'persons',
-            title: 'You can also track people and groups with Amplitude',
-            description: 'Events can be associated with the humans who generate them, letting you understand a specific customer problem if they email about it.',
-        },
-        {
-            id: 'properties',
-            title: 'Get way more detail using properties',
-            description: 'Events and person records can have any properties you want. Track things like how they found your website, what subscription tier they choose, and much more.',
-        },
-    ],
-    [
-        {
-            id: 'session-replay',
-            title: 'Watch real user sessions with Session Replay',
-            description: 'See exactly what users see — clicks, scrolls, rage clicks, and dead ends. Debug issues faster and build empathy for your users without scheduling a single call.',
-        },
-        {
-            id: 'experimentation',
-            title: 'Run experiments with confidence',
-            description: 'Amplitude supports both feature experiments and web experiments. Test hypotheses, roll out changes safely, and let data decide what ships.',
-        },
-        {
-            id: 'feature-flags',
-            title: 'Ship fearlessly with feature flags',
-            description: 'Control who sees what, when. Roll out features gradually, kill switches instantly, and decouple deployment from release.',
-        },
-    ],
-    [
-        {
-            id: 'guides-surveys',
-            title: 'Reach users in-product with Guides & Surveys',
-            description: 'Onboard new users, announce features, and collect feedback — all without a code deploy. Target the right audience using your Amplitude data.',
-        },
-        {
-            id: 'activation',
-            title: 'Unify your data with Amplitude Activation',
-            description: 'Collect, clean, and route data to every tool in your stack. One SDK, one source of truth, zero data silos.',
-        },
-        {
-            id: 'ai',
-            title: 'Ask questions in plain English',
-            description: 'Amplitude AI lets anyone on your team ask data questions in natural language and get instant charts and insights — no SQL required.',
-        },
-    ],
-    [
-        {
-            id: 'mcp',
-            title: 'Give your AI agents analytics superpowers with Amplitude MCP',
-            description: 'Connect any AI agent to your Amplitude data via MCP. Your agents can query metrics, build charts, and act on insights — no dashboard required.',
-        },
-        {
-            id: 'skills-marketplace',
-            title: 'Extend your agents with the Skills Marketplace',
-            description: 'Browse and install pre-built skills that teach your agents new tricks — from anomaly detection to automated reporting. Build once, share across your org.',
-        },
-        {
-            id: 'global-agent',
-            title: 'Meet your always-on analytics agent',
-            description: 'Ask questions in Amplitude or in Slack and get instant answers backed by your data. One agent that works wherever your team already lives.',
-        },
-    ],
-];
-/** How often (ms) to rotate to the next tip page. */
-const TIP_ROTATION_INTERVAL = 30_000;
-/** Conditional tips shown regardless of the current page. */
-const CONDITIONAL_TIPS = [
-    {
-        id: 'stripe',
-        title: 'You can track Stripe revenue with Amplitude',
-        description: 'Add Stripe as a data source while you wait:',
-        url: OUTBOUND_URLS.stripeDataSource,
-        visible: (store) => store.session.discoveredFeatures.includes(DiscoveredFeature.Stripe),
-    },
-    {
-        id: 'llm',
-        title: 'Amplitude can also help you track your LLM costs',
-        description: '',
-        visible: (store) => store.session.discoveredFeatures.includes(DiscoveredFeature.LLM),
-        toggle: {
-            key: 'l',
-            feature: AdditionalFeature.LLM,
-            enabledLabel: 'LLM analytics setup queued next',
-            prompt: 'We detected LLM dependencies in your project.',
-            isEnabled: (store) => store.session.llmOptIn,
-        },
-    },
-];
-/** Min terminal width to show the logo in the TipsCard. */
-const LOGO_MIN_COLS = 100;
-/** Delay (ms) between each tip appearing during a page transition. */
-const TIP_REVEAL_DELAY = 400;
-const TipsCard = ({ store }) => {
-    const [columns] = useStdoutDimensions();
-    const [pageIndex, setPageIndex] = useState(0);
-    /** Number of page tips currently visible (for staggered reveal). */
-    const [visibleCount, setVisibleCount] = useState(TIP_PAGES[0].length);
+/** File extensions used to detect "currently editing" from status messages. */
+const FILE_EXT_PATTERN = /\S+\.(?:tsx?|jsx?|py|swift|kt|java|go|dart|cs|cpp|vue|svelte|rb)\b/;
+/** Format elapsed seconds as "Xm Ys". */
+function formatElapsed(seconds) {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    if (m === 0)
+        return `${s}s`;
+    return `${m}m ${s}s`;
+}
+/** Extract a file path from the most recent status message, if any. */
+function extractCurrentFile(messages) {
+    for (let i = messages.length - 1; i >= 0; i--) {
+        const match = messages[i].match(FILE_EXT_PATTERN);
+        if (match)
+            return match[0];
+    }
+    return null;
+}
+/** Compact inline display of planned event names. */
+const InlineEventPlan = ({ store }) => {
+    const events = store.eventPlan.filter((e) => e.name);
+    if (events.length === 0)
+        return null;
+    return (_jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsxs(Text, { color: Colors.secondary, children: [_jsxs(Text, { bold: true, color: Colors.accent, children: [Icons.diamond, " Events:"] }), ' ', events.map((e) => e.name).join(', ')] }) }));
+};
+/** Compact conditional tips — Stripe link, LLM toggle. */
+const ConditionalTips = ({ store }) => {
+    const { discoveredFeatures } = store.session;
+    const tips = [];
+    if (discoveredFeatures.includes(DiscoveredFeature.Stripe)) {
+        tips.push(_jsxs(Text, { color: Colors.secondary, children: [_jsx(Text, { color: Colors.accent, children: Icons.diamond }), " Stripe detected", Icons.dash, " add as data source:", ' ', _jsx(Text, { color: Colors.accentSecondary, children: OUTBOUND_URLS.stripeDataSource })] }, "stripe"));
+    }
+    if (discoveredFeatures.includes(DiscoveredFeature.LLM)) {
+        const enabled = store.session.llmOptIn;
+        tips.push(_jsxs(Text, { color: Colors.secondary, children: [_jsx(Text, { color: Colors.accent, children: Icons.diamond }), ' ', enabled ? (_jsxs(Text, { color: Colors.success, children: [Icons.checkmark, " LLM analytics setup queued"] })) : (_jsxs(Text, { children: ["LLM dependencies detected ", Icons.dash, " press", ' ', _jsx(Text, { bold: true, color: Colors.accent, children: "L" }), ' ', "to enable LLM analytics"] }))] }, "llm"));
+    }
+    if (tips.length === 0)
+        return null;
+    return (_jsx(Box, { flexDirection: "column", marginTop: 1, children: tips }));
+};
+/** The main Progress tab content. */
+const MIN_COLS_FOR_LOGO = 90;
+const MIN_ROWS_FOR_LOGO = 22;
+const ProgressTab = ({ store }) => {
+    const [cols, rows] = useStdoutDimensions();
+    const showLogo = cols >= MIN_COLS_FOR_LOGO && rows >= MIN_ROWS_FOR_LOGO;
+    const [elapsed, setElapsed] = useState(0);
+    const startRef = useRef(Date.now());
+    // Elapsed time counter
     useEffect(() => {
-        const timer = setInterval(() => {
-            setPageIndex((prev) => (prev + 1) % TIP_PAGES.length);
-            setVisibleCount(0);
-        }, TIP_ROTATION_INTERVAL);
-        return () => clearInterval(timer);
+        const id = setInterval(() => {
+            setElapsed(Math.floor((Date.now() - startRef.current) / 1000));
+        }, 1000);
+        return () => clearInterval(id);
     }, []);
-    // Stagger reveal: increment visibleCount one at a time after each page change
-    useEffect(() => {
-        const pageLen = TIP_PAGES[pageIndex].length;
-        if (visibleCount >= pageLen)
-            return;
-        const timer = setTimeout(() => setVisibleCount((c) => c + 1), visibleCount === 0 ? 100 : TIP_REVEAL_DELAY);
-        return () => clearTimeout(timer);
-    }, [pageIndex, visibleCount]);
+    // Handle LLM toggle key
     useScreenInput((input) => {
-        for (const tip of CONDITIONAL_TIPS) {
-            if (tip.toggle &&
-                input.toLowerCase() === tip.toggle.key &&
-                (!tip.visible || tip.visible(store)) &&
-                !tip.toggle.isEnabled(store)) {
-                store.enableFeature(tip.toggle.feature);
-            }
+        if (input.toLowerCase() === 'l' &&
+            store.session.discoveredFeatures.includes(DiscoveredFeature.LLM) &&
+            !store.session.llmOptIn) {
+            store.enableFeature(AdditionalFeature.LLM);
         }
     });
-    const pageTips = TIP_PAGES[pageIndex].slice(0, visibleCount);
-    const visibleConditional = CONDITIONAL_TIPS.filter((tip) => !tip.visible || tip.visible(store));
-    const allTips = [...pageTips, ...visibleConditional];
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [columns >= LOGO_MIN_COLS && _jsx(AnimatedAmplitudeLogo, {}), _jsx(Text, { bold: true, color: Colors.accent, children: "Learn about Amplitude" }), _jsxs(Text, { color: Colors.muted, children: [Icons.diamond, " ", pageIndex + 1, "/", TIP_PAGES.length] }), _jsx(Box, { height: 1 }), allTips.map((tip) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { children: [_jsxs(Text, { color: Colors.accent, children: [Icons.diamond, " "] }), _jsx(Text, { bold: true, children: tip.title })] }), tip.toggle ? (tip.toggle.isEnabled(store) ? (_jsxs(Text, { color: Colors.success, children: [Icons.check, " ", tip.toggle.enabledLabel] })) : (_jsxs(Text, { color: Colors.muted, children: [tip.toggle.prompt, " Press", ' ', _jsx(Text, { bold: true, color: Colors.accent, children: tip.toggle.key.toUpperCase() }), ' ', "to enable."] }))) : (_jsxs(Text, { color: Colors.muted, children: [tip.description, tip.url && (_jsxs(_Fragment, { children: [' ', _jsx(Text, { color: "cyan", children: tip.url })] }))] }))] }, tip.id)))] }));
-};
-export const RunScreen = ({ store }) => {
-    useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
     const progressItems = store.tasks.map((t) => ({
         label: t.label,
         activeForm: t.activeForm,
@@ -174,38 +105,52 @@ export const RunScreen = ({ store }) => {
             status: 'in_progress',
         });
     }
+    const rawFile = extractCurrentFile(store.statusMessages);
+    const lastFileRef = useRef(null);
+    if (rawFile)
+        lastFileRef.current = rawFile;
+    const currentFile = lastFileRef.current;
+    const completed = progressItems.filter((t) => t.status === 'completed').length;
+    const total = progressItems.length;
+    return (_jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, paddingX: 1, children: [_jsxs(Box, { marginBottom: 1, justifyContent: "space-between", children: [_jsxs(Box, { gap: 1, children: [_jsx(BrailleSpinner, { color: Colors.active }), _jsx(Text, { color: Colors.body, bold: true, children: total > 0
+                                            ? `${completed}/${total} tasks complete`
+                                            : 'Agent running' }), _jsxs(Text, { color: Colors.muted, children: [Icons.dot, " ", formatElapsed(elapsed)] })] }), currentFile && (_jsx(Text, { color: Colors.muted, wrap: "truncate-end", children: currentFile }))] }), _jsx(ProgressList, { items: progressItems, title: "Tasks" }), _jsx(InlineEventPlan, { store: store }), _jsx(ConditionalTips, { store: store })] }), showLogo && (_jsx(Box, { flexShrink: 0, marginTop: 1, marginRight: 1, children: _jsx(AmplitudeLogo, {}) }))] }));
+};
+export const RunScreen = ({ store }) => {
+    useWizardStore(store);
     const lastStatus = store.statusMessages.length > 0
         ? store.statusMessages[store.statusMessages.length - 1]
         : undefined;
+    const hasEvents = store.eventPlan.length > 0;
     const tabs = [
         {
-            id: 'status',
-            label: 'Status',
-            component: (_jsx(SplitView, { left: _jsx(TipsCard, { store: store }), right: _jsx(ProgressList, { items: progressItems, title: "Tasks" }) })),
+            id: 'progress',
+            label: 'Progress',
+            component: _jsx(ProgressTab, { store: store }),
         },
-        ...(store.eventPlan.length > 0
+        ...(hasEvents
             ? [
                 {
                     id: 'events',
-                    label: 'Event plan',
+                    label: 'Events',
                     component: _jsx(EventPlanViewer, { events: store.eventPlan }),
                 },
             ]
             : []),
         {
             id: 'logs',
-            label: 'All logs',
+            label: 'Logs',
             component: _jsx(LogViewer, { filePath: LOG_FILE }),
         },
-        {
-            id: 'smallweb',
-            label: 'Small Web',
-            component: _jsx(KagiSmallWebViewer, {}),
-        },
         {
             id: 'snake',
-            label: 'Snake',
-            component: _jsx(SnakeGame, {}),
+            label: 'Snake (WASD)',
+            component: (_jsx(SnakeGame, { music: false, keybindings: {
+                    up: ['w'],
+                    down: ['s'],
+                    left: ['a'],
+                    right: ['d'],
+                } })),
         },
     ];
     return (_jsx(TabContainer, { tabs: tabs, statusMessage: lastStatus, requestedTab: store.requestedTab, onTabConsumed: () => store.clearRequestedTab() }));

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

@@ -1,6 +1,6 @@
 /**
  * SettingsOverrideScreen — Modal when .claude/settings.json contains env overrides
- * that block the Wizard from reaching the Amplitude LLM Gateway.
+ * that block the Wizard from reaching the Amplitude LLM Gateway (v2).
  */
 import type { WizardStore } from '../store.js';
 interface SettingsOverrideScreenProps {

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

@@ -1,20 +1,21 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
  * SettingsOverrideScreen — Modal when .claude/settings.json contains env overrides
- * that block the Wizard from reaching the Amplitude LLM Gateway.
+ * that block the Wizard from reaching the Amplitude LLM Gateway (v2).
  */
 import { Box, Text } from 'ink';
-import { useState, useSyncExternalStore } from 'react';
+import { useState } from 'react';
+import { useWizardStore } from '../hooks/useWizardStore.js';
 import { ConfirmationInput } from '../primitives/index.js';
-import { Colors, Icons } from '../styles.js';
+import { Colors, Icons, Layout } from '../styles.js';
 export const SettingsOverrideScreen = ({ store, }) => {
-    useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+    useWizardStore(store);
     const [feedback, setFeedback] = useState(null);
     const keys = store.session.settingsOverrideKeys;
     if (!keys || keys.length === 0) {
         return null;
     }
-    return (_jsx(Box, { flexDirection: "column", flexGrow: 1, alignItems: "center", justifyContent: "center", children: _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "red", paddingX: 3, paddingY: 1, width: 64, children: [_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsxs(Text, { color: "red", bold: true, children: [Icons.warning, " Settings Conflict"] }) }), _jsxs(Text, { children: ["Your project's ", _jsx(Text, { bold: true, children: ".claude/settings.json" }), " sets:"] }), _jsx(Box, { flexDirection: "column", marginY: 1, paddingLeft: 2, children: keys.map((key) => (_jsxs(Text, { children: [Icons.bullet, ' ', _jsx(Text, { color: "yellow", bold: true, children: key })] }, key))) }), _jsx(Text, { color: Colors.muted, children: "These overrides prevent the Wizard from reaching the Amplitude LLM Gateway. We can back up the file and continue." }), feedback && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "yellow", children: [Icons.warning, " ", feedback] }) })), _jsx(Box, { marginY: 1, children: _jsx(Text, { color: Colors.muted, children: '─'.repeat(56) }) }), _jsx(ConfirmationInput, { message: "Back up to .wizard-backup and continue?", confirmLabel: "Backup & continue [Enter]", cancelLabel: "Exit [Esc]", onConfirm: () => {
+    return (_jsx(Box, { flexDirection: "column", flexGrow: 1, alignItems: "center", justifyContent: "center", children: _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: Colors.error, paddingX: 3, paddingY: 1, width: 64, children: [_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsxs(Text, { color: Colors.error, bold: true, children: [Icons.diamond, " Settings Conflict"] }) }), _jsxs(Text, { color: Colors.body, children: ["Your project's", ' ', _jsx(Text, { bold: true, color: Colors.heading, children: ".claude/settings.json" }), ' ', "sets:"] }), _jsx(Box, { flexDirection: "column", marginY: 1, paddingLeft: 2, children: keys.map((key) => (_jsxs(Text, { color: Colors.body, children: [Icons.bullet, ' ', _jsx(Text, { color: Colors.warning, bold: true, children: key })] }, key))) }), _jsx(Text, { color: Colors.secondary, children: "These overrides prevent the Wizard from reaching the Amplitude LLM Gateway. We can back up the file and continue." }), feedback && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: Colors.warning, children: [Icons.diamond, " ", feedback] }) })), _jsx(Box, { marginY: 1, children: _jsx(Text, { color: Colors.border, children: Layout.separatorChar.repeat(56) }) }), _jsx(ConfirmationInput, { message: "Back up to .wizard-backup and continue?", confirmLabel: "Backup & continue [Enter]", cancelLabel: "Exit [Esc]", onConfirm: () => {
                         const ok = store.backupAndFixSettingsOverride();
                         if (!ok) {
                             setFeedback('Could not back up the settings file.');

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

@@ -1,5 +1,5 @@
 /**
- * SetupScreen — Generic framework disambiguation.
+ * SetupScreen — Generic framework disambiguation (v2).
  *
  * Iterates unresolved setup questions from the FrameworkConfig
  * and renders a PickerMenu for each. If all questions are auto-resolved,

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

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
- * SetupScreen — Generic framework disambiguation.
+ * SetupScreen — Generic framework disambiguation (v2).
  *
  * Iterates unresolved setup questions from the FrameworkConfig
  * and renders a PickerMenu for each. If all questions are auto-resolved,
@@ -8,11 +8,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Box, Text } from 'ink';
 import { useState, useEffect } from 'react';
-import { useSyncExternalStore } from 'react';
+import { useWizardStore } from '../hooks/useWizardStore.js';
 import { PickerMenu } from '../primitives/index.js';
-import { Colors } from '../styles.js';
+import { Colors, Icons } from '../styles.js';
 export const SetupScreen = ({ store }) => {
-    useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+    useWizardStore(store);
     const config = store.session.frameworkConfig;
     const questions = config?.metadata.setup?.questions ?? [];
     // Track which question index we're currently showing
@@ -43,7 +43,7 @@ export const SetupScreen = ({ store }) => {
         })();
     }, []);
     if (resolving) {
-        return (_jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(Text, { color: Colors.muted, children: "Detecting project configuration..." }) }));
+        return (_jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsxs(Text, { color: Colors.active, children: ["Detecting project configuration", Icons.ellipsis] }) }));
     }
     // Get unresolved questions
     const unresolved = questions.filter((q) => !(q.key in store.session.frameworkContext));
@@ -54,7 +54,7 @@ export const SetupScreen = ({ store }) => {
     const question = unresolved[currentIndex] ?? unresolved[0];
     if (!question)
         return null;
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: Colors.accent, children: "Project Setup" }), config && (_jsxs(Text, { color: Colors.muted, children: ["Configuring ", config.metadata.name, " integration"] }))] }), _jsx(PickerMenu, { message: question.message, options: question.options.map((o) => ({
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: Colors.accent, children: "Project Setup" }), config && (_jsxs(Text, { color: Colors.secondary, children: ["Configuring ", config.metadata.name, " integration"] }))] }), _jsx(PickerMenu, { message: question.message, options: question.options.map((o) => ({
                     label: o.label,
                     value: o.value,
                     hint: o.hint,

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

@@ -1,5 +1,5 @@
 /**
- * SlackScreen — Amplitude Slack integration setup.
+ * SlackScreen — Amplitude Slack integration setup (v2).
  *
  * Guides the user to connect their Slack workspace to Amplitude.
  * Since the OAuth handshake happens in the browser (Amplitude Settings),
@@ -8,7 +8,7 @@
  *
  * Region-aware: EU users need the "Amplitude - EU" Slack app.
  */
-import { type WizardStore } from '../store.js';
+import type { WizardStore } from '../store.js';
 interface SlackScreenProps {
     store: WizardStore;
     /** When true, exit the process after completion instead of routing to outro. */