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

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

@@ -1,18 +1,8 @@
 /**
- * ChecklistScreen — Post-setup checklist for first chart and first dashboard.
+ * ChecklistScreen — Post-setup checklist for first chart and dashboard.
  *
  * Shown after DataIngestionCheckScreen confirms events are flowing.
- *
- * Items:
- *   [ ] Taxonomy agent   — @todo (in progress in parallel work)
- *   [ ] First chart      — opens Amplitude in browser; marks complete on return
- *   [ ] First dashboard  — unlocked after chart; opens Amplitude in browser
- *
- * The user can "Continue" at any time to skip remaining items and advance
- * to Slack setup.
- *
- * Chart/dashboard creation via direct GraphQL API call is planned as a
- * follow-up; for now the action opens the Amplitude web UI.
+ * Celebration header: "Your events are flowing!" in success green.
  */
 import type { WizardStore } from '../store.js';
 interface ChecklistScreenProps {

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

@@ -1,47 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
- * ChecklistScreen — Post-setup checklist for first chart and first dashboard.
+ * ChecklistScreen — Post-setup checklist for first chart and dashboard.
  *
  * Shown after DataIngestionCheckScreen confirms events are flowing.
- *
- * Items:
- *   [ ] Taxonomy agent   — @todo (in progress in parallel work)
- *   [ ] First chart      — opens Amplitude in browser; marks complete on return
- *   [ ] First dashboard  — unlocked after chart; opens Amplitude in browser
- *
- * The user can "Continue" at any time to skip remaining items and advance
- * to Slack setup.
- *
- * Chart/dashboard creation via direct GraphQL API call is planned as a
- * follow-up; for now the action opens the Amplitude web UI.
+ * Celebration header: "Your events are flowing!" in success green.
  */
 import { Box, Text } from 'ink';
-import { useEffect, useState, useSyncExternalStore } from 'react';
-import { PickerMenu } from '../primitives/index.js';
+import { useEffect, useState } from 'react';
+import { useWizardStore } from '../hooks/useWizardStore.js';
 import { Colors, Icons } from '../styles.js';
+import { PickerMenu } from '../primitives/index.js';
 import { OUTBOUND_URLS } from '../../../lib/constants.js';
 import opn from 'opn';
 import { analytics } from '../../../utils/analytics.js';
 import { fetchOwnedDashboards } from '../../../lib/api.js';
 export const ChecklistScreen = ({ store }) => {
-    useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+    useWizardStore(store);
     const { session } = store;
     const { checklistChartComplete, checklistDashboardComplete, region, selectedOrgId, } = session;
     const [opening, setOpening] = useState(null);
     const zone = (region ?? 'us');
-    // On mount, detect any charts/dashboards the user already owns in their org
-    // so a returning user sees the correct state without re-doing completed steps.
-    // Detection is org-scoped (Thunder has no project-level listing API); for a
-    // new-project user this is equivalent.
+    // On mount, detect charts/dashboards the user already owns so returning
+    // users see the correct state without re-doing completed steps.
     useEffect(() => {
         const { credentials, selectedOrgId, checklistChartComplete, checklistDashboardComplete, } = store.session;
         if (!credentials || !selectedOrgId)
             return;
         if (checklistChartComplete && checklistDashboardComplete)
             return;
-        const idToken = credentials.idToken ?? credentials.accessToken;
+        const accessToken = credentials.accessToken;
         const sessionZone = (store.session.region ?? 'us');
-        fetchOwnedDashboards(idToken, sessionZone, selectedOrgId)
+        fetchOwnedDashboards(accessToken, sessionZone, selectedOrgId)
             .then(({ hasCharts, hasDashboards }) => {
             if (hasCharts)
                 store.setChecklistChartComplete();
@@ -87,36 +76,36 @@ export const ChecklistScreen = ({ store }) => {
         {
             value: 'chart',
             label: checklistChartComplete
-                ? `${Icons.check} First chart — done`
-                : `${Icons.squareOpen} Create your first chart`,
+                ? `${Icons.checkmark} Build a chart — done`
+                : `${Icons.bulletOpen} Build your first chart`,
             hint: checklistChartComplete ? undefined : 'opens in browser',
             disabled: checklistChartComplete,
         },
         {
             value: 'dashboard',
             label: checklistDashboardComplete
-                ? `${Icons.check} First dashboard — done`
-                : checklistChartComplete
-                    ? `${Icons.squareOpen} Create your first dashboard`
-                    : `${Icons.squareOpen} Create your first dashboard`,
+                ? `${Icons.checkmark} Create a dashboard — done`
+                : `${Icons.bulletOpen} Create your first dashboard`,
             hint: checklistDashboardComplete
                 ? undefined
                 : checklistChartComplete
                     ? 'opens in browser'
-                    : 'create a chart first',
+                    : 'build a chart first',
             disabled: checklistDashboardComplete || !checklistChartComplete,
         },
         {
             value: 'taxonomy',
-            label: `${Icons.squareOpen} Set up taxonomy`,
+            label: `${Icons.bulletOpen} Set up taxonomy`,
             hint: 'coming soon',
             disabled: true,
         },
         {
             value: 'continue',
-            label: allDone ? 'Done — continue' : 'Skip remaining and continue',
-            hint: allDone ? undefined : 'you can always do these in Amplitude later',
+            label: allDone
+                ? `${Icons.arrowRight} Done — continue`
+                : `${Icons.arrowRight} Skip and continue`,
+            hint: allDone ? undefined : 'you can always do these later',
         },
     ];
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingX: 2, paddingY: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: Colors.accent, children: "Set up your analytics" }) }), _jsxs(Box, { flexDirection: "column", gap: 1, marginBottom: 2, children: [_jsx(Text, { children: "Your events are flowing. Now let's build some views of your data." }), opening && (_jsx(Text, { color: Colors.muted, children: "Opening Amplitude in your browser..." }))] }), _jsx(PickerMenu, { options: options, onSelect: (v) => handleSelect(v) })] }));
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingX: 2, paddingY: 1, children: [_jsxs(Box, { marginBottom: 1, flexDirection: "column", children: [_jsxs(Text, { bold: true, color: Colors.success, children: [Icons.checkmark, " Your events are flowing!"] }), _jsx(Text, { color: Colors.body, children: "Here's what to explore next:" })] }), opening && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: Colors.muted, children: ["Opening Amplitude in your browser", Icons.ellipsis] }) })), _jsx(PickerMenu, { options: options, onSelect: (v) => handleSelect(v) })] }));
 };

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

@@ -1,20 +1,11 @@
 /**
- * DataIngestionCheckScreen — "Waiting for your events..." polling screen.
+ * DataIngestionCheckScreen — "Start your app and trigger some actions" polling screen.
  *
  * Shown after MCP setup. Polls the activation API every 30 seconds until the
  * project starts receiving events, then auto-advances to the Checklist.
  *
- * For users who were already fully activated (activationLevel === 'full') when
- * the wizard started, this screen confirms immediately on mount without polling.
- *
- * The user can exit and come back later — next time through, DataSetupScreen
- * will re-check activation and this screen will confirm immediately if events
- * have arrived.
- *
- * When the activation API is unavailable (e.g. external users hitting Thunder
- * endpoints that require browser session auth), the screen falls back to showing
- * cataloged event types from the data API so the user can verify events arrived,
- * then manually confirms with Enter.
+ * Active guidance as prominent instruction with framework-aware hint.
+ * BrailleSpinner while waiting. Success celebration when events arrive.
  */
 import type { WizardStore } from '../store.js';
 interface DataIngestionCheckScreenProps {

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

@@ -1,75 +1,119 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
- * DataIngestionCheckScreen — "Waiting for your events..." polling screen.
+ * DataIngestionCheckScreen — "Start your app and trigger some actions" polling screen.
  *
  * Shown after MCP setup. Polls the activation API every 30 seconds until the
  * project starts receiving events, then auto-advances to the Checklist.
  *
- * For users who were already fully activated (activationLevel === 'full') when
- * the wizard started, this screen confirms immediately on mount without polling.
- *
- * The user can exit and come back later — next time through, DataSetupScreen
- * will re-check activation and this screen will confirm immediately if events
- * have arrived.
- *
- * When the activation API is unavailable (e.g. external users hitting Thunder
- * endpoints that require browser session auth), the screen falls back to showing
- * cataloged event types from the data API so the user can verify events arrived,
- * then manually confirms with Enter.
+ * Active guidance as prominent instruction with framework-aware hint.
+ * BrailleSpinner while waiting. Success celebration when events arrive.
  */
 import { Box, Text } from 'ink';
-import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { useWizardStore } from '../hooks/useWizardStore.js';
 import { Colors, Icons } from '../styles.js';
+import { BrailleSpinner } from '../components/BrailleSpinner.js';
+import { useScreenInput } from '../hooks/useScreenInput.js';
 import { fetchProjectActivationStatus, fetchWorkspaceEventTypes, } from '../../../lib/api.js';
+import { Integration } from '../../../lib/constants.js';
+import { OutroKind } from '../session-constants.js';
 import { logToFile } from '../../../utils/debug.js';
-import { OutroKind } from '../../../lib/wizard-session.js';
-import { useScreenInput } from '../hooks/useScreenInput.js';
 const POLL_INTERVAL_MS = 30_000;
 const MAX_EVENTS_SHOWN = 8;
+const CELEBRATION_DELAY_MS = 3_000;
+/** Framework-specific hints for what the user should do to generate events. */
+const FRAMEWORK_HINTS = {
+    [Integration.nextjs]: 'Visit localhost:3000 and click around',
+    [Integration.vue]: 'Visit localhost:5173 and interact with your app',
+    [Integration.reactRouter]: 'Visit localhost:3000 and navigate between pages',
+    [Integration.django]: 'Visit localhost:8000 and browse a few pages',
+    [Integration.flask]: 'Visit localhost:5000 and trigger some requests',
+    [Integration.fastapi]: 'Visit localhost:8000/docs and try some endpoints',
+    [Integration.reactNative]: 'Open your app on a device or emulator and tap around',
+    [Integration.swift]: 'Build and run your app, then interact with it',
+    [Integration.android]: 'Build and run your app, then interact with it',
+    [Integration.flutter]: 'Run your app and navigate through a few screens',
+};
 export const DataIngestionCheckScreen = ({ store, }) => {
-    useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+    useWizardStore(store);
     const { session } = store;
-    const { credentials, region, activationLevel } = session;
+    const { activationLevel } = session;
     const pollingRef = useRef(null);
+    const celebrationTimerRef = useRef(null);
     const [apiUnavailable, setApiUnavailable] = useState(false);
     const [eventTypes, setEventTypes] = useState(null);
+    const [celebrating, setCelebrating] = useState(false);
+    const [celebrationReady, setCelebrationReady] = useState(false);
+    const [arrivedEvents, setArrivedEvents] = useState([]);
+    const [lastChecked, setLastChecked] = useState(null);
+    const [secondsSince, setSecondsSince] = useState(0);
+    const [pollingStartTime] = useState(() => Date.now());
+    const [elapsedSeconds, setElapsedSeconds] = useState(0);
+    /** Confirm ingestion with a celebration, then wait for user to press Enter. */
+    function confirmWithCelebration(events) {
+        if (pollingRef.current !== null)
+            clearInterval(pollingRef.current);
+        setCelebrating(true);
+        if (events && events.length > 0)
+            setArrivedEvents(events);
+        celebrationTimerRef.current = setTimeout(() => {
+            setCelebrationReady(true);
+        }, CELEBRATION_DELAY_MS);
+    }
     async function checkIngestion() {
-        if (!credentials) {
+        // Read from store.session at call time to avoid stale closures
+        const currentSession = store.session;
+        const currentCredentials = currentSession.credentials;
+        const currentRegion = currentSession.region;
+        if (!currentCredentials) {
             setApiUnavailable(true);
             return;
         }
-        // credentials.projectId is 0 for OAuth users; fall back to workspace UUID
-        const appId = credentials.projectId || session.selectedWorkspaceId;
+        const appId = currentCredentials.projectId || currentSession.selectedWorkspaceId;
         if (!appId) {
             setApiUnavailable(true);
             return;
         }
-        const zone = (region ?? 'us');
-        const idToken = credentials.idToken ?? credentials.accessToken;
+        const zone = (currentRegion ?? 'us');
+        const dataApiToken = currentCredentials.idToken ?? currentCredentials.accessToken;
+        if (!currentSession.selectedOrgId) {
+            setApiUnavailable(true);
+            return;
+        }
         try {
-            const status = await fetchProjectActivationStatus(idToken, zone, appId, session.selectedOrgId);
+            const status = await fetchProjectActivationStatus({
+                accessToken: currentCredentials.accessToken,
+                zone,
+                appId,
+                orgId: currentSession.selectedOrgId,
+            });
+            setLastChecked(Date.now());
             logToFile(`[DataIngestionCheck] poll result: hasAnyEvents=${status.hasAnyEvents} hasDetSource=${status.hasDetSource}`);
             if (status.hasAnyEvents) {
-                store.setDataIngestionConfirmed();
+                confirmWithCelebration();
                 return;
             }
-            // The activation API only checks autocapture events (page_viewed,
-            // session_start, session_end). Custom track() calls won't appear there.
-            // Fall back to the event catalog which includes all event types.
-            if (session.selectedOrgId && session.selectedWorkspaceId) {
-                const catalogEvents = await fetchWorkspaceEventTypes(idToken, zone, session.selectedOrgId, session.selectedWorkspaceId);
+            // Activation API only checks autocapture events. Fall back to the
+            // event catalog which includes all event types.
+            if (currentSession.selectedOrgId && currentSession.selectedWorkspaceId) {
+                const catalogEvents = await fetchWorkspaceEventTypes(dataApiToken, zone, currentSession.selectedOrgId, currentSession.selectedWorkspaceId);
                 logToFile(`[DataIngestionCheck] catalog fallback: ${catalogEvents.length} event types found`);
                 if (catalogEvents.length > 0) {
-                    store.setDataIngestionConfirmed();
+                    confirmWithCelebration(catalogEvents);
                 }
             }
         }
         catch (err) {
             logToFile(`[DataIngestionCheck] poll error: ${err instanceof Error ? err.message : String(err)}`);
+            // Clear the polling interval so it stops firing against the failing API
+            if (pollingRef.current !== null) {
+                clearInterval(pollingRef.current);
+                pollingRef.current = null;
+            }
             setApiUnavailable(true);
-            // Fetch cataloged event types from the data API as a proxy for "events arrived"
-            if (session.selectedOrgId && session.selectedWorkspaceId) {
-                fetchWorkspaceEventTypes(idToken, zone, session.selectedOrgId, session.selectedWorkspaceId)
+            // Fetch cataloged event types as a proxy for "events arrived"
+            if (currentSession.selectedOrgId && currentSession.selectedWorkspaceId) {
+                fetchWorkspaceEventTypes(dataApiToken, zone, currentSession.selectedOrgId, currentSession.selectedWorkspaceId)
                     .then((names) => {
                     setEventTypes(names);
                 })
@@ -88,7 +132,6 @@ export const DataIngestionCheckScreen = ({ store, }) => {
             store.setDataIngestionConfirmed();
             return;
         }
-        // Run once immediately, then set up the interval
         void checkIngestion();
         pollingRef.current = setInterval(() => {
             void checkIngestion();
@@ -97,15 +140,35 @@ export const DataIngestionCheckScreen = ({ store, }) => {
             if (pollingRef.current !== null) {
                 clearInterval(pollingRef.current);
             }
+            if (celebrationTimerRef.current !== null) {
+                clearTimeout(celebrationTimerRef.current);
+            }
         };
     }, []);
+    // Update seconds-since counter and elapsed timer — every 5s to reduce re-renders
+    useEffect(() => {
+        const id = setInterval(() => {
+            if (lastChecked) {
+                setSecondsSince(Math.floor((Date.now() - lastChecked) / 1000));
+            }
+            setElapsedSeconds(Math.floor((Date.now() - pollingStartTime) / 1000));
+        }, 5000);
+        return () => clearInterval(id);
+    }, [lastChecked, pollingStartTime]);
     useScreenInput((_char, key) => {
+        // During celebration, wait for Enter to advance
+        if (celebrating) {
+            if (celebrationReady && key.return) {
+                store.setDataIngestionConfirmed();
+            }
+            return;
+        }
         if (key.escape || _char === 'q') {
             if (pollingRef.current !== null)
                 clearInterval(pollingRef.current);
             store.setOutroData({
                 kind: OutroKind.Cancel,
-                message: 'Come back once your app is running and sending events. Your SDK is installed — you just need to trigger some actions.',
+                message: 'Come back once your app is running and sending events. Your SDK is installed — just trigger some actions.',
             });
             return;
         }
@@ -116,9 +179,16 @@ export const DataIngestionCheckScreen = ({ store, }) => {
             store.setDataIngestionConfirmed();
         }
     });
+    // Derive framework-specific hint
+    const frameworkHint = session.integration
+        ? FRAMEWORK_HINTS[session.integration]
+        : undefined;
     const shown = eventTypes?.slice(0, MAX_EVENTS_SHOWN) ?? [];
     const overflow = (eventTypes?.length ?? 0) - MAX_EVENTS_SHOWN;
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingX: 2, paddingY: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: Colors.accent, children: "Waiting for your events" }) }), _jsxs(Box, { flexDirection: "column", gap: 1, marginBottom: 2, children: [_jsx(Text, { children: "Your SDK is installed. Once you run your app and trigger some actions, events will start flowing into Amplitude." }), !apiUnavailable && (_jsx(Text, { color: Colors.muted, children: "Checking every 30 seconds \u2014 this screen will advance automatically." }))] }), apiUnavailable && eventTypes === null && (_jsxs(Box, { gap: 2, alignItems: "center", children: [_jsx(Text, { color: Colors.accent, children: Icons.diamond }), _jsx(Text, { color: Colors.muted, children: "Checking your event catalog..." })] })), apiUnavailable && eventTypes !== null && eventTypes.length > 0 && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: Colors.muted, dimColor: true, children: "Events cataloged in your workspace:" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, marginLeft: 2, children: [shown.map((name) => (_jsxs(Box, { gap: 2, children: [_jsx(Text, { color: Colors.accent, children: Icons.diamond }), _jsx(Text, { children: name })] }, name))), overflow > 0 && (_jsxs(Text, { color: Colors.muted, dimColor: true, children: ["... and ", overflow, " more"] }))] })] })), apiUnavailable && eventTypes !== null && eventTypes.length === 0 && (_jsxs(Box, { gap: 2, alignItems: "center", marginBottom: 1, children: [_jsx(Text, { color: Colors.accent, children: Icons.diamond }), _jsx(Text, { color: Colors.muted, children: "Waiting for your events..." })] })), !apiUnavailable && (_jsxs(Box, { gap: 2, alignItems: "center", children: [_jsx(Text, { color: Colors.accent, children: Icons.diamond }), _jsx(Text, { color: Colors.muted, children: "Waiting for your events..." })] })), _jsxs(Box, { marginTop: 2, flexDirection: "column", gap: 1, children: [apiUnavailable && (_jsxs(Text, { color: Colors.muted, dimColor: true, children: ["Press", ' ', _jsx(Text, { bold: true, color: Colors.muted, children: "Enter" }), ' ', eventTypes && eventTypes.length > 0
-                                ? 'to continue'
-                                : 'once you see events in your Amplitude dashboard'] })), _jsxs(Text, { color: Colors.muted, dimColor: true, children: ["Press", ' ', _jsx(Text, { bold: true, color: Colors.muted, children: "q" }), ' ', "or", ' ', _jsx(Text, { bold: true, color: Colors.muted, children: "Esc" }), ' ', "to exit and resume later"] })] })] }));
+    // ── Celebration state ──────────────────────────────────────────────────
+    if (celebrating) {
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingX: 2, paddingY: 1, children: [_jsxs(Text, { bold: true, color: Colors.success, children: [Icons.checkmark, " Events detected!"] }), arrivedEvents.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, marginLeft: 2, children: [arrivedEvents.slice(0, MAX_EVENTS_SHOWN).map((name) => (_jsxs(Text, { color: Colors.success, children: [Icons.diamond, " ", name] }, name))), arrivedEvents.length > MAX_EVENTS_SHOWN && (_jsxs(Text, { color: Colors.muted, children: [Icons.ellipsis, " and ", arrivedEvents.length - MAX_EVENTS_SHOWN, ' ', "more"] }))] })), _jsx(Box, { marginTop: 1, children: celebrationReady ? (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: Colors.muted, children: "[" }), _jsx(Text, { color: Colors.body, bold: true, children: "Enter" }), _jsx(Text, { color: Colors.muted, children: "] Continue" })] })) : (_jsxs(Text, { color: Colors.body, children: ["Verifying", Icons.ellipsis] })) })] }));
+    }
+    // ── Waiting state ──────────────────────────────────────────────────────
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingX: 2, paddingY: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: Colors.heading, children: "Start your app and trigger some user actions" }) }), frameworkHint && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: Colors.accent, children: [Icons.arrowRight, " ", frameworkHint] }) })), _jsx(Text, { color: Colors.body, children: "Your SDK is installed. Once you interact with your app, events will start flowing into Amplitude." }), !apiUnavailable && (_jsxs(Box, { marginTop: 1, gap: 1, alignItems: "center", children: [_jsx(BrailleSpinner, { color: Colors.accent }), _jsxs(Text, { color: Colors.secondary, children: ["Listening for events", Icons.ellipsis, lastChecked && (_jsxs(Text, { color: Colors.muted, children: [" (checked ", secondsSince, "s ago)"] }))] })] })), !apiUnavailable && !celebrating && elapsedSeconds >= 60 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, marginLeft: 2, children: [_jsxs(Text, { color: Colors.secondary, children: [Icons.arrowRight, " Make sure your dev server is running"] }), elapsedSeconds >= 90 && (_jsxs(Text, { color: Colors.secondary, children: [Icons.arrowRight, " Try visiting your app and clicking around"] })), elapsedSeconds >= 120 && (_jsxs(Text, { color: Colors.secondary, children: [Icons.arrowRight, " Check your terminal for errors \u2014 the SDK may not have initialized"] }))] })), apiUnavailable && eventTypes === null && (_jsxs(Box, { marginTop: 1, gap: 1, alignItems: "center", children: [_jsx(BrailleSpinner, { color: Colors.accent }), _jsxs(Text, { color: Colors.secondary, children: ["Checking your event catalog", Icons.ellipsis] })] })), apiUnavailable && eventTypes !== null && eventTypes.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: Colors.secondary, children: "Events cataloged in your workspace:" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, marginLeft: 2, children: [shown.map((name) => (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: Colors.success, children: Icons.diamond }), _jsx(Text, { color: Colors.body, children: name })] }, name))), overflow > 0 && (_jsxs(Text, { color: Colors.muted, children: [Icons.ellipsis, " and ", overflow, " more"] }))] })] })), apiUnavailable && eventTypes !== null && eventTypes.length === 0 && (_jsxs(Box, { marginTop: 1, gap: 1, alignItems: "center", children: [_jsx(BrailleSpinner, { color: Colors.accent }), _jsxs(Text, { color: Colors.secondary, children: ["Waiting for events", Icons.ellipsis] })] })), _jsxs(Box, { marginTop: 2, gap: 2, children: [apiUnavailable && (_jsxs(Box, { children: [_jsx(Text, { color: Colors.muted, children: "[" }), _jsx(Text, { color: Colors.body, bold: true, children: "Enter" }), _jsxs(Text, { color: Colors.muted, children: ["] ", eventTypes && eventTypes.length > 0 ? 'Continue' : 'Confirm'] })] })), _jsxs(Box, { children: [_jsx(Text, { color: Colors.muted, children: "[" }), _jsx(Text, { color: Colors.body, bold: true, children: "q" }), _jsx(Text, { color: Colors.muted, children: "] Exit and resume later" })] })] })] }));
 };

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

@@ -2,9 +2,9 @@
  * DataSetupScreen — Checks whether the connected Amplitude project has event data.
  *
  * Calls the Amplitude Data API to determine the project's activation level:
- *   'full'    — 50+ events / well-established data → Options menu
- *   'partial' — snippet installed but few events   → ActivationOptions screen
- *   'none'    — no events, no snippet              → Framework Detection
+ *   'full'    — 50+ events / well-established data
+ *   'partial' — snippet installed but few events
+ *   'none'    — no events, no snippet
  *
  * The router's isComplete predicate (projectHasData !== null) advances past
  * this screen automatically once the value is set.

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

@@ -1,23 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * DataSetupScreen — Checks whether the connected Amplitude project has event data.
  *
  * Calls the Amplitude Data API to determine the project's activation level:
- *   'full'    — 50+ events / well-established data → Options menu
- *   'partial' — snippet installed but few events   → ActivationOptions screen
- *   'none'    — no events, no snippet              → Framework Detection
+ *   'full'    — 50+ events / well-established data
+ *   'partial' — snippet installed but few events
+ *   'none'    — no events, no snippet
  *
  * The router's isComplete predicate (projectHasData !== null) advances past
  * this screen automatically once the value is set.
  */
-import { Box } from 'ink';
-import { useEffect, useSyncExternalStore } from 'react';
-import { LoadingBox } from '../primitives/index.js';
+import { Box, Text } from 'ink';
+import { useEffect } from 'react';
+import { useWizardStore } from '../hooks/useWizardStore.js';
+import { Colors, Icons } from '../styles.js';
+import { BrailleSpinner } from '../components/BrailleSpinner.js';
 import { fetchProjectActivationStatus } from '../../../lib/api.js';
 import { detectAmplitudeInProject } from '../../../lib/detect-amplitude.js';
 import { logToFile } from '../../../utils/debug.js';
 export const DataSetupScreen = ({ store }) => {
-    useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+    useWizardStore(store);
     useEffect(() => {
         if (store.session.projectHasData !== null)
             return;
@@ -35,7 +37,12 @@ export const DataSetupScreen = ({ store }) => {
         // Run local static check in parallel with the API call.
         const localDetection = detectAmplitudeInProject(store.session.installDir);
         logToFile(`[DataSetup] local detection: confidence=${localDetection.confidence} reason=${localDetection.reason ?? 'none'}`);
-        void fetchProjectActivationStatus(credentials.idToken ?? credentials.accessToken, zone, appId, selectedOrgId)
+        void fetchProjectActivationStatus({
+            accessToken: credentials.accessToken,
+            zone,
+            appId,
+            orgId: selectedOrgId,
+        })
             .then((status) => {
             logToFile(`[DataSetup] activation status: ${JSON.stringify(status)}`);
             store.setSnippetConfigured(status.hasDetSource);
@@ -69,5 +76,5 @@ export const DataSetupScreen = ({ store }) => {
             store.setActivationLevel(localDetection.confidence !== 'none' ? 'partial' : 'none');
         });
     }, []);
-    return (_jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(LoadingBox, { message: "Checking project setup\u2026" }) }));
+    return (_jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: Colors.heading, children: "Checking project setup" }), _jsxs(Box, { marginTop: 1, gap: 1, children: [_jsx(BrailleSpinner, { color: Colors.accent }), _jsxs(Text, { color: Colors.body, children: ["Analyzing your Amplitude project", Icons.ellipsis] })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: Colors.muted, children: "Looking for existing SDK installation and event data" }) })] }) }));
 };

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

@@ -1,12 +1,14 @@
 /**
- * IntroScreen — Welcome, framework detection, and continue/cancel prompt.
+ * IntroScreen (v2) — Clean, minimal welcome with framework detection.
  *
- * Three states:
+ * Four states:
+ *   0. Checkpoint restored: resume / start fresh / cancel picker
  *   1. Detecting: spinner while bin.ts runs detection
  *   2. Detection failed: auto-selects Generic, then continue/cancel
  *   3. Detection succeeded: show result, then continue/cancel
  *
- * Calls store.completeSetup() which unblocks bin.ts to start runWizard.
+ * Shows the AmplitudeTextLogo when terminal is wide/tall enough (>=75x20).
+ * Calls store.concludeIntro() to advance past this screen.
  */
 import type { WizardStore } from '../store.js';
 interface IntroScreenProps {