@amplitude/wizard 1.0.0-beta.0

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

@@ -0,0 +1,212 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * RunScreen — Tabbed observational view of the agent run.
+ *
+ * Two tabs:
+ *   - Status: SplitView with TipsCard (left) + ProgressList (right)
+ *   - Logs: LogViewer tailing the wizard log file
+ *
+ * No prompts — the agent runs headlessly.
+ * TipsCard reactively shows tips based on discovered features.
+ */
+import { Box, Text } from 'ink';
+import { useState, useEffect } 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 { Colors, Icons } from '../styles.js';
+import { AnimatedAmplitudeLogo } from '../components/AmplitudeLogo.js';
+import { DiscoveredFeature, AdditionalFeature, ADDITIONAL_FEATURE_LABELS, } from '../../../lib/wizard-session.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);
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setPageIndex((prev) => (prev + 1) % TIP_PAGES.length);
+            setVisibleCount(0);
+        }, TIP_ROTATION_INTERVAL);
+        return () => clearInterval(timer);
+    }, []);
+    // 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]);
+    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);
+            }
+        }
+    });
+    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,
+        status: t.status,
+    }));
+    // When all tasks are done but the queue has features, show a transitional item
+    const queue = store.session.additionalFeatureQueue;
+    const allDone = progressItems.length > 0 &&
+        progressItems.every((t) => t.status === 'completed');
+    if (allDone && queue.length > 0) {
+        const nextLabel = ADDITIONAL_FEATURE_LABELS[queue[0]];
+        progressItems.push({
+            label: `Set up ${nextLabel}`,
+            activeForm: `Setting up ${nextLabel}...`,
+            status: 'in_progress',
+        });
+    }
+    const lastStatus = store.statusMessages.length > 0
+        ? store.statusMessages[store.statusMessages.length - 1]
+        : undefined;
+    const tabs = [
+        {
+            id: 'status',
+            label: 'Status',
+            component: (_jsx(SplitView, { left: _jsx(TipsCard, { store: store }), right: _jsx(ProgressList, { items: progressItems, title: "Tasks" }) })),
+        },
+        ...(store.eventPlan.length > 0
+            ? [
+                {
+                    id: 'events',
+                    label: 'Event plan',
+                    component: _jsx(EventPlanViewer, { events: store.eventPlan }),
+                },
+            ]
+            : []),
+        {
+            id: 'logs',
+            label: 'All logs',
+            component: _jsx(LogViewer, { filePath: LOG_FILE }),
+        },
+        {
+            id: 'smallweb',
+            label: 'Small Web',
+            component: _jsx(KagiSmallWebViewer, {}),
+        },
+        {
+            id: 'snake',
+            label: 'Snake',
+            component: _jsx(SnakeGame, {}),
+        },
+    ];
+    return (_jsx(TabContainer, { tabs: tabs, statusMessage: lastStatus, requestedTab: store.requestedTab, onTabConsumed: () => store.clearRequestedTab() }));
+};

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

@@ -0,0 +1,10 @@
+/**
+ * SettingsOverrideScreen — Modal when .claude/settings.json contains env overrides
+ * that block the Wizard from reaching the Amplitude LLM Gateway.
+ */
+import type { WizardStore } from '../store.js';
+interface SettingsOverrideScreenProps {
+    store: WizardStore;
+}
+export declare const SettingsOverrideScreen: ({ store, }: SettingsOverrideScreenProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,23 @@
+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.
+ */
+import { Box, Text } from 'ink';
+import { useState, useSyncExternalStore } from 'react';
+import { ConfirmationInput } from '../primitives/index.js';
+import { Colors, Icons } from '../styles.js';
+export const SettingsOverrideScreen = ({ store, }) => {
+    useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+    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: () => {
+                        const ok = store.backupAndFixSettingsOverride();
+                        if (!ok) {
+                            setFeedback('Could not back up the settings file.');
+                        }
+                    }, onCancel: () => process.exit(1) })] }) }));
+};

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

@@ -0,0 +1,13 @@
+/**
+ * SetupScreen — Generic framework disambiguation.
+ *
+ * Iterates unresolved setup questions from the FrameworkConfig
+ * and renders a PickerMenu for each. If all questions are auto-resolved,
+ * this screen is skipped entirely (the router skips it via its show() predicate).
+ */
+import type { WizardStore } from '../store.js';
+interface SetupScreenProps {
+    store: WizardStore;
+}
+export declare const SetupScreen: ({ store }: SetupScreenProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SetupScreen — Generic framework disambiguation.
+ *
+ * Iterates unresolved setup questions from the FrameworkConfig
+ * and renders a PickerMenu for each. If all questions are auto-resolved,
+ * this screen is skipped entirely (the router skips it via its show() predicate).
+ */
+import { Box, Text } from 'ink';
+import { useState, useEffect } from 'react';
+import { useSyncExternalStore } from 'react';
+import { PickerMenu } from '../primitives/index.js';
+import { Colors } from '../styles.js';
+export const SetupScreen = ({ store }) => {
+    useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+    const config = store.session.frameworkConfig;
+    const questions = config?.metadata.setup?.questions ?? [];
+    // Track which question index we're currently showing
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [resolving, setResolving] = useState(true);
+    // On mount, run auto-detection for all questions
+    useEffect(() => {
+        void (async () => {
+            for (const q of questions) {
+                // Skip if already resolved (e.g. by CLI arg)
+                if (q.key in store.session.frameworkContext)
+                    continue;
+                try {
+                    const detected = await q.detect({
+                        installDir: store.session.installDir,
+                    });
+                    if (detected !== null) {
+                        store.setFrameworkContext(q.key, detected);
+                    }
+                }
+                catch {
+                    // Detection failed — will ask the user
+                }
+            }
+            setResolving(false);
+            // If all resolved, the router's isComplete predicate will
+            // resolve past this screen on the next render cycle.
+        })();
+    }, []);
+    if (resolving) {
+        return (_jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(Text, { color: Colors.muted, children: "Detecting project configuration..." }) }));
+    }
+    // Get unresolved questions
+    const unresolved = questions.filter((q) => !(q.key in store.session.frameworkContext));
+    if (unresolved.length === 0) {
+        // All resolved — should have already advanced
+        return null;
+    }
+    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) => ({
+                    label: o.label,
+                    value: o.value,
+                    hint: o.hint,
+                })), onSelect: (value) => {
+                    const selected = Array.isArray(value) ? value[0] : value;
+                    store.setFrameworkContext(question.key, selected);
+                    // Check if more unresolved questions remain
+                    const remaining = unresolved.filter((q) => q.key !== question.key &&
+                        !(q.key in store.session.frameworkContext));
+                    if (remaining.length > 0) {
+                        setCurrentIndex((i) => i + 1);
+                    }
+                    // When no remaining questions, setFrameworkContext already
+                    // triggered emitChange — router resolves past this screen.
+                } })] }));
+};

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

@@ -0,0 +1,25 @@
+/**
+ * SlackScreen — Amplitude Slack integration setup.
+ *
+ * Guides the user to connect their Slack workspace to Amplitude.
+ * Since the OAuth handshake happens in the browser (Amplitude Settings),
+ * this screen opens the right settings URL and lets the user confirm
+ * once connected or skip.
+ *
+ * Region-aware: EU users need the "Amplitude - EU" Slack app.
+ */
+import { type WizardStore } from '../store.js';
+interface SlackScreenProps {
+    store: WizardStore;
+    /** When true, exit the process after completion instead of routing to outro. */
+    standalone?: boolean;
+    /** When provided, called on completion instead of setSlackComplete (overlay mode). */
+    onComplete?: () => void;
+}
+/**
+ * Build the Amplitude settings URL for Slack connection.
+ * Uses the org name from the API; falls back to base URL.
+ */
+export declare function slackSettingsUrl(baseUrl: string, orgName: string | null): string;
+export declare const SlackScreen: ({ store, standalone, onComplete, }: SlackScreenProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SlackScreen — Amplitude Slack integration setup.
+ *
+ * Guides the user to connect their Slack workspace to Amplitude.
+ * Since the OAuth handshake happens in the browser (Amplitude Settings),
+ * this screen opens the right settings URL and lets the user confirm
+ * once connected or skip.
+ *
+ * Region-aware: EU users need the "Amplitude - EU" Slack app.
+ */
+import { Box, Text } from 'ink';
+import { useState, useEffect } from 'react';
+import { useSyncExternalStore } from 'react';
+import { SlackOutcome } from '../store.js';
+import { ConfirmationInput } from '../primitives/index.js';
+import { Colors } from '../styles.js';
+import { fetchAmplitudeUser } from '../../../lib/api.js';
+import { OUTBOUND_URLS } from '../../../lib/constants.js';
+import { logToFile } from '../../../utils/debug.js';
+import opn from 'opn';
+var Phase;
+(function (Phase) {
+    Phase["Prompt"] = "prompt";
+    Phase["Opening"] = "opening";
+    Phase["Waiting"] = "waiting";
+    Phase["Done"] = "done";
+})(Phase || (Phase = {}));
+/**
+ * Build the Amplitude settings URL for Slack connection.
+ * Uses the org name from the API; falls back to base URL.
+ */
+export function slackSettingsUrl(baseUrl, orgName) {
+    if (orgName) {
+        return `${baseUrl}/analytics/${encodeURIComponent(orgName)}/settings/profile`;
+    }
+    return `${baseUrl}/settings/profile`;
+}
+const markDone = (store, outcome, standalone, onComplete) => {
+    if (onComplete) {
+        onComplete();
+    }
+    else {
+        store.setSlackComplete(outcome);
+        if (standalone) {
+            process.exit(0);
+        }
+    }
+};
+export const SlackScreen = ({ store, standalone = false, onComplete, }) => {
+    useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+    const [phase, setPhase] = useState(Phase.Prompt);
+    const [resolvedOrgName, setResolvedOrgName] = useState(store.session.selectedOrgName);
+    const region = store.session.region ?? 'us';
+    const isEu = region === 'eu';
+    const appName = isEu ? 'Amplitude - EU' : 'Amplitude';
+    // Fetch org name from the API if it wasn't populated during the SUSI flow
+    // (e.g. returning users, or the standalone `slack` command).
+    useEffect(() => {
+        logToFile(`[SlackScreen] selectedOrgName=${store.session.selectedOrgName ?? ''} credentials=${store.session.credentials ? 'present' : 'null'} region=${region}`);
+        if (resolvedOrgName) {
+            logToFile(`[SlackScreen] using existing orgName=${resolvedOrgName}`);
+            return;
+        }
+        const credentials = store.session.credentials;
+        if (!credentials) {
+            logToFile(`[SlackScreen] no credentials — falling back to base URL`);
+            return;
+        }
+        logToFile(`[SlackScreen] fetching org name via API`);
+        void fetchAmplitudeUser(credentials.idToken ?? credentials.accessToken, region)
+            .then((info) => {
+            const name = info.orgs[0]?.name ?? null;
+            logToFile(`[SlackScreen] API returned orgs=${JSON.stringify(info.orgs.map((o) => o.name))} using=${name}`);
+            setResolvedOrgName(name);
+        })
+            .catch((err) => {
+            logToFile(`[SlackScreen] API fetch failed: ${err instanceof Error ? err.message : String(err)}`);
+        });
+    }, []);
+    const settingsUrl = slackSettingsUrl(OUTBOUND_URLS.overview[(region ?? 'us')], resolvedOrgName);
+    const handleConnect = () => {
+        setPhase(Phase.Opening);
+        opn(settingsUrl, { wait: false }).catch(() => {
+            /* fire-and-forget */
+        });
+        setTimeout(() => setPhase(Phase.Waiting), 800);
+    };
+    const handleSkip = () => {
+        markDone(store, SlackOutcome.Skipped, standalone, onComplete);
+    };
+    const handleDone = () => {
+        setPhase(Phase.Done);
+        setTimeout(() => markDone(store, SlackOutcome.Configured, standalone, onComplete), 1500);
+    };
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Text, { bold: true, color: Colors.accent, children: "Slack Integration" }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: Colors.muted, children: "Connect Amplitude to Slack for chart previews, dashboard sharing," }), _jsx(Text, { color: Colors.muted, children: "and real-time tracking plan notifications." }), isEu && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellow", children: "EU region: install the \"Amplitude - EU\" app from the Slack App Directory." }) })), phase === Phase.Prompt && (_jsx(Box, { marginTop: 1, children: _jsx(ConfirmationInput, { message: `Open Amplitude Settings to connect the "${appName}" Slack app?`, confirmLabel: "Open settings", cancelLabel: "Skip for now", onConfirm: handleConnect, onCancel: handleSkip }) })), phase === Phase.Opening && (_jsx(Text, { color: Colors.muted, children: "Opening browser..." })), phase === Phase.Waiting && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: ["Browser opened to ", _jsx(Text, { color: "cyan", children: settingsUrl })] }), _jsx(Text, { color: Colors.muted, children: "Go to Settings > Personal Settings > Profile and click \"Connect to Slack\"." }), _jsx(Box, { marginTop: 1, children: _jsx(ConfirmationInput, { message: "Connected to Slack?", confirmLabel: "Yes, connected", cancelLabel: "Skip for now", onConfirm: handleDone, onCancel: handleSkip }) })] })), phase === Phase.Done && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsxs(Text, { color: "green", bold: true, children: ['\u2714', " Slack connected! You'll get chart previews and notifications in Slack."] }) }))] })] }));
+};

package/dist/src/ui/tui/services/mcp-installer.d.ts

@@ -0,0 +1,25 @@
+/**
+ * McpInstaller — service layer between McpScreen and MCP business logic.
+ *
+ * Decouples the screen from step internals. Testable, swappable,
+ * no dynamic imports in React components.
+ */
+export interface McpClientInfo {
+    name: string;
+}
+export interface McpInstaller {
+    /** Detect which MCP-capable editors are available on this machine. */
+    detectClients(): Promise<McpClientInfo[]>;
+    /** Install the Amplitude MCP server to the given clients. Returns names of successfully installed clients. */
+    install(clientNames: string[]): Promise<string[]>;
+    /** Remove the Amplitude MCP server from all installed clients. Returns names of removed clients. */
+    remove(): Promise<string[]>;
+}
+/**
+ * Production McpInstaller backed by real MCP client detection and installation.
+ *
+ * @param local - When true, installs/removes the local development server
+ *   (http://localhost:8787) instead of the production server. Mirrors the
+ *   --local-mcp CLI flag and session.localMcp.
+ */
+export declare function createMcpInstaller(local?: boolean): McpInstaller;

package/dist/src/ui/tui/services/mcp-installer.js

@@ -0,0 +1,82 @@
+/**
+ * McpInstaller — service layer between McpScreen and MCP business logic.
+ *
+ * Decouples the screen from step internals. Testable, swappable,
+ * no dynamic imports in React components.
+ */
+import { z } from 'zod';
+import { getSupportedClients, removeMCPServer, getInstalledClients, } from '../../../steps/add-mcp-server-to-clients/index.js';
+import { ALL_FEATURE_VALUES } from '../../../steps/add-mcp-server-to-clients/defaults.js';
+import { logToFile } from '../../../utils/debug.js';
+const RawMCPClientSchema = z
+    .object({
+    name: z.string(),
+    addServer: z.unknown(),
+})
+    .refine((obj) => typeof obj.addServer === 'function', {
+    message: 'addServer must be a function',
+});
+/**
+ * Production McpInstaller backed by real MCP client detection and installation.
+ *
+ * @param local - When true, installs/removes the local development server
+ *   (http://localhost:8787) instead of the production server. Mirrors the
+ *   --local-mcp CLI flag and session.localMcp.
+ */
+export function createMcpInstaller(local = false) {
+    // Cache the raw MCPClient objects so install() can reference them by name
+    let cachedClients = [];
+    return {
+        async detectClients() {
+            const supported = await getSupportedClients();
+            cachedClients = supported.map((c) => ({ name: c.name, raw: c }));
+            return supported.map((c) => ({ name: c.name }));
+        },
+        async install(clientNames) {
+            const features = [...ALL_FEATURE_VALUES];
+            // No access token — write URL only and let each editor handle OAuth on
+            // first use. Pre-populating a token would break after 24 hours.
+            const accessToken = undefined;
+            const toInstall = [];
+            for (const c of cachedClients) {
+                if (!clientNames.includes(c.name))
+                    continue;
+                const parsed = RawMCPClientSchema.safeParse(c.raw);
+                if (!parsed.success) {
+                    logToFile(`[McpInstaller] Skipping invalid client ${c.name}: ${parsed.error.message}`);
+                    continue;
+                }
+                // Use the original instance, not parsed.data — Zod creates a plain-object
+                // copy which strips the prototype chain and breaks `this` inside class methods.
+                toInstall.push(c.raw);
+            }
+            if (toInstall.length === 0) {
+                logToFile(`[McpInstaller] No clients matched. clientNames=${JSON.stringify(clientNames)}, cached=${JSON.stringify(cachedClients.map((c) => c.name))}`);
+                return [];
+            }
+            const installed = [];
+            for (const client of toInstall) {
+                try {
+                    const result = await client.addServer(accessToken, features, local);
+                    if (result?.success) {
+                        installed.push(client.name);
+                    }
+                    else {
+                        logToFile(`[McpInstaller] addServer returned success=false for ${client.name}`);
+                    }
+                }
+                catch (err) {
+                    logToFile(`[McpInstaller] addServer threw for ${client.name}: ${err instanceof Error ? err.message : String(err)}`);
+                }
+            }
+            return installed;
+        },
+        async remove() {
+            const installed = await getInstalledClients(local);
+            if (installed.length === 0)
+                return [];
+            await removeMCPServer(installed, local);
+            return installed.map((c) => c.name);
+        },
+    };
+}

package/dist/src/ui/tui/start-tui.d.ts

@@ -0,0 +1,10 @@
+/**
+ * start-tui.ts — Sets up the Ink TUI renderer and InkUI.
+ */
+import { WizardStore, Flow } from './store.js';
+import type { WizardSession } from '../../lib/wizard-session.js';
+export declare function startTUI(version: string, flow?: Flow, initialSession?: WizardSession): {
+    unmount: () => void;
+    store: WizardStore;
+    waitForSetup: () => Promise<void>;
+};

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

@@ -0,0 +1,50 @@
+/**
+ * start-tui.ts — Sets up the Ink TUI renderer and InkUI.
+ */
+import { render } from 'ink';
+import { createElement } from 'react';
+import { WizardStore, Flow } from './store.js';
+import { InkUI } from './ink-ui.js';
+import { setUI } from '../index.js';
+import { App } from './App.js';
+// ANSI escape sequences
+const RESET_ATTRS = '\x1b[0m';
+const CLEAR_SCREEN = '\x1b[2J';
+const CURSOR_HOME = '\x1b[H';
+const BG_BLACK = '\x1b[48;2;0;0;0m';
+// OSC 10/11: set terminal foreground/background colors (ignored by unsupporting terminals)
+const OSC_FG_BRIGHT = '\x1b]10;#f4f4ff\x07';
+const OSC_BG_DARK = '\x1b]11;#0d0d16\x07';
+// OSC 110/111: reset to user defaults
+const OSC_FG_RESET = '\x1b]110;\x07';
+const OSC_BG_RESET = '\x1b]111;\x07';
+/** Set foreground bright + background near-black, clear screen, cursor to top-left. */
+const FORCE_DARK = OSC_FG_BRIGHT + OSC_BG_DARK + BG_BLACK + CLEAR_SCREEN + CURSOR_HOME;
+export function startTUI(version, flow = Flow.Wizard, initialSession) {
+    // Force dark background regardless of terminal theme.
+    // The UI adapts to whatever size the terminal already is.
+    process.stdout.write(FORCE_DARK);
+    const store = new WizardStore(flow);
+    store.version = version;
+    if (initialSession) {
+        store.session = initialSession;
+    }
+    // Swap in the InkUI
+    const inkUI = new InkUI(store);
+    setUI(inkUI);
+    // Render the Ink app
+    const { unmount: inkUnmount } = render(createElement(App, { store }));
+    // Reset terminal colors on exit
+    const cleanup = () => {
+        process.stdout.write(OSC_FG_RESET + OSC_BG_RESET + RESET_ATTRS + CLEAR_SCREEN + CURSOR_HOME);
+    };
+    process.on('exit', cleanup);
+    return {
+        unmount: () => {
+            inkUnmount();
+            cleanup();
+        },
+        store,
+        waitForSetup: () => store.setupComplete,
+    };
+}