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

package/dist/src/lib/wizard-session.js

@@ -11,15 +11,58 @@
  * Business logic reads from the session. Never calls a prompt.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OutroKind = exports.SlackOutcome = exports.McpOutcome = exports.ADDITIONAL_FEATURE_PROMPTS = exports.ADDITIONAL_FEATURE_LABELS = exports.AdditionalFeature = exports.DiscoveredFeature = exports.RunPhase = void 0;
+exports.OutroKind = exports.SlackOutcome = exports.McpOutcome = exports.ADDITIONAL_FEATURE_PROMPTS = exports.ADDITIONAL_FEATURE_LABELS = exports.AdditionalFeature = exports.DiscoveredFeature = exports.RunPhase = exports.CredentialsSchema = exports.CliArgsSchema = void 0;
 exports.buildSession = buildSession;
+const zod_1 = require("zod");
+/**
+ * Zod schema for CLI args passed to `buildSession()`.
+ * Coerces `projectId` from string to positive integer.
+ * All boolean flags default to false; `installDir` defaults to cwd.
+ */
+exports.CliArgsSchema = zod_1.z.object({
+    projectId: zod_1.z
+        .union([zod_1.z.string(), zod_1.z.number()])
+        .optional()
+        .transform((v) => {
+        if (v === undefined || v === '')
+            return undefined;
+        const n = Number(v);
+        return Number.isInteger(n) && n > 0 ? n : undefined;
+    }),
+    installDir: zod_1.z.string().default(process.cwd()),
+    debug: zod_1.z.boolean().default(false),
+    verbose: zod_1.z.boolean().default(false),
+    ci: zod_1.z.boolean().default(false),
+    forceInstall: zod_1.z.boolean().default(false),
+    signup: zod_1.z.boolean().default(false),
+    localMcp: zod_1.z.boolean().default(false),
+    menu: zod_1.z.boolean().default(false),
+    benchmark: zod_1.z.boolean().default(false),
+    apiKey: zod_1.z.string().optional(),
+    integration: zod_1.z.string().optional(),
+});
+/**
+ * Zod schema for validated Amplitude credentials.
+ * Exported for incremental adoption at credential-construction sites.
+ */
+exports.CredentialsSchema = zod_1.z.object({
+    accessToken: zod_1.z.string().min(1, 'accessToken is required'),
+    idToken: zod_1.z.string().optional(),
+    projectApiKey: zod_1.z.string().min(1, 'projectApiKey is required'),
+    host: zod_1.z.string().url('host must be a valid URL'),
+    projectId: zod_1.z.number(),
+});
 function parseProjectIdArg(value) {
     if (value === undefined || value === '')
         return undefined;
     const n = Number(value);
     return Number.isInteger(n) && n > 0 ? n : undefined;
 }
-/** Lifecycle phase of the main work (agent run, MCP install, etc.) */
+/**
+ * Lifecycle phase of the main work (agent run, MCP install, etc.)
+ * NOTE: Duplicated in src/ui/tui/session-constants.ts (ESM/CJS workaround).
+ * If you change these values, update that file too — a test enforces sync.
+ */
 exports.RunPhase = {
     /** Still gathering input (intro, setup screens) */
     Idle: 'idle',
@@ -69,20 +112,31 @@ exports.OutroKind = {
  * Build a WizardSession from CLI args, pre-populating whatever is known.
  */
 function buildSession(args) {
+    // Validate CLI args via Zod — warn on bad input but fall back to defaults
+    const parsed = exports.CliArgsSchema.safeParse(args);
+    if (!parsed.success) {
+        console.warn(`[wizard] Invalid CLI args (falling back to defaults): ${parsed.error.issues
+            .map((i) => `${i.path.join('.')}: ${i.message}`)
+            .join(', ')}`);
+    }
+    // Use Zod-validated data (with coerced projectId and defaults) when available
+    const validated = parsed.success ? parsed.data : args;
     return {
-        debug: args.debug ?? false,
-        verbose: args.verbose ?? false,
-        forceInstall: args.forceInstall ?? false,
-        installDir: args.installDir ?? process.cwd(),
-        ci: args.ci ?? false,
-        signup: args.signup ?? false,
-        localMcp: args.localMcp ?? false,
-        apiKey: args.apiKey,
-        menu: args.menu ?? false,
-        benchmark: args.benchmark ?? false,
-        projectId: parseProjectIdArg(args.projectId),
+        debug: validated.debug ?? false,
+        verbose: validated.verbose ?? false,
+        forceInstall: validated.forceInstall ?? false,
+        installDir: validated.installDir ?? process.cwd(),
+        ci: validated.ci ?? false,
+        signup: validated.signup ?? false,
+        localMcp: validated.localMcp ?? false,
+        apiKey: validated.apiKey,
+        menu: validated.menu ?? false,
+        benchmark: validated.benchmark ?? false,
+        projectId: parsed.success
+            ? parsed.data.projectId
+            : parseProjectIdArg(args.projectId),
         setupConfirmed: false,
-        integration: args.integration ?? null,
+        integration: validated.integration ?? null,
         frameworkContext: {},
         typescript: false,
         detectedFrameworkLabel: null,
@@ -125,5 +179,7 @@ function buildSession(args) {
         checklistChartComplete: false,
         checklistDashboardComplete: false,
         checklistComplete: false,
+        userEmail: null,
+        _restoredFromCheckpoint: false,
     };
 }

package/dist/src/lib/wizard-tools.js

@@ -450,16 +450,31 @@ If the user gives feedback, revise your plan and call this tool again — loop u
 Returns: "approved", "skipped", or "feedback: <user message>"`, {
         events: zod_1.z
             .array(zod_1.z.object({
-            name: zod_1.z.string().describe('Event name, e.g. "Button Clicked"'),
+            name: zod_1.z
+                .string()
+                .describe('Short lowercase event name using spaces for separators, e.g. "user signed up", "product added to cart", "search performed". This is displayed as a bold label — keep it concise (2-5 words). Do NOT put descriptions or file paths here.'),
             description: zod_1.z
                 .string()
-                .describe('When this event fires and what it tracks'),
+                .describe('When this event fires, what properties it includes, and where it will be placed (file path + function/component).'),
         }))
             .min(1)
             .describe('The list of events you plan to instrument'),
     }, async (args) => {
-        (0, debug_1.logToFile)(`confirm_event_plan: ${args.events.length} events`);
-        const decision = await (0, ui_1.getUI)().promptEventPlan(args.events);
+        const { DEMO_MODE } = await import('./constants.js');
+        // Light normalization — truncate overly long names but don't try to
+        // extract names from descriptions. The UI reads proper event names
+        // from store.eventPlan (populated from the JSON file the agent writes).
+        const normalizedEvents = args.events.map((e) => ({
+            name: e.name.trim().length > 50
+                ? e.name.trim().slice(0, 45) + '…'
+                : e.name.trim(),
+            description: e.description?.trim() || '',
+        }));
+        const events = DEMO_MODE && normalizedEvents.length > 5
+            ? normalizedEvents.slice(0, 5)
+            : normalizedEvents;
+        (0, debug_1.logToFile)(`confirm_event_plan: ${events.length} events${DEMO_MODE ? ' (demo mode)' : ''}`);
+        const decision = await (0, ui_1.getUI)().promptEventPlan(events);
         let text;
         if (decision.decision === 'revised') {
             text = `feedback: ${decision.feedback}`;

package/dist/src/steps/add-mcp-server-to-clients/clients/claude.d.ts

@@ -17,4 +17,7 @@ export declare class ClaudeMCPClient extends DefaultMCPClient {
     constructor();
     isClientSupported(): Promise<boolean>;
     getConfigPath(): Promise<string>;
+    addServer(apiKey?: string, selectedFeatures?: string[], local?: boolean): Promise<{
+        success: boolean;
+    }>;
 }

package/dist/src/steps/add-mcp-server-to-clients/clients/claude.js

@@ -59,5 +59,11 @@ class ClaudeMCPClient extends MCPClient_1.DefaultMCPClient {
         }
         throw new Error(`Unsupported platform: ${process.platform}`);
     }
+    async addServer(apiKey, selectedFeatures, local) {
+        // Claude Desktop config uses stdio transport, so we need mcp-remote
+        // to bridge to the remote streamable-http server. Use 'streamable-http'
+        // type so the URL points to /mcp (the documented endpoint), not /sse.
+        return this._addServerType(apiKey, 'streamable-http', selectedFeatures, local);
+    }
 }
 exports.ClaudeMCPClient = ClaudeMCPClient;

package/dist/src/steps/add-mcp-server-to-clients/clients/cursor.js

@@ -51,7 +51,9 @@ class CursorMCPClient extends MCPClient_1.DefaultMCPClient {
         return Promise.resolve(path.join(os.homedir(), '.cursor', 'mcp.json'));
     }
     getServerConfig(apiKey, type, selectedFeatures, local) {
-        return (0, defaults_1.getNativeHTTPServerConfig)(apiKey, type, selectedFeatures, local);
+        const config = (0, defaults_1.getNativeHTTPServerConfig)(apiKey, type, selectedFeatures, local);
+        // Cursor requires an explicit transport field to use streamable-http
+        return { ...config, transport: 'streamable-http' };
     }
     async addServer(apiKey, selectedFeatures, local) {
         return this._addServerType(apiKey, 'streamable-http', selectedFeatures, local);

package/dist/src/ui/agent-ui.d.ts

@@ -0,0 +1,91 @@
+/**
+ * AgentUI — NDJSON implementation of WizardUI for --agent mode.
+ * Every method emits one JSON line to stdout for machine consumption.
+ * Prompts auto-approve; no interactivity.
+ */
+import type { WizardUI, SpinnerHandle, EventPlanDecision } from './wizard-ui';
+export declare class AgentUI implements WizardUI {
+    intro(message: string): void;
+    outro(message: string): void;
+    cancel(message: string, options?: {
+        docsUrl?: string;
+    }): void;
+    log: {
+        info(message: string): void;
+        warn(message: string): void;
+        error(message: string): void;
+        success(message: string): void;
+        step(message: string): void;
+    };
+    note(message: string): void;
+    pushStatus(message: string): void;
+    heartbeat(statuses: string[]): void;
+    spinner(): SpinnerHandle;
+    startRun(): void;
+    setRunError(error: Error): Promise<boolean>;
+    setCredentials(credentials: {
+        accessToken: string;
+        projectApiKey: string;
+        host: string;
+        projectId: number;
+    }): void;
+    setRegion(region: string): void;
+    setProjectHasData(value: boolean): void;
+    setDetectedFramework(label: string): void;
+    setLoginUrl(url: string | null): void;
+    onEnterScreen(_screen: string, _fn: () => void): void;
+    showServiceStatus(data: {
+        description: string;
+        statusPageUrl: string;
+    }): void;
+    showSettingsOverride(keys: string[], backupAndFix: () => boolean): Promise<void>;
+    promptConfirm(message: string): Promise<boolean>;
+    promptChoice(message: string, options: string[]): Promise<string>;
+    promptEventPlan(events: Array<{
+        name: string;
+        description: string;
+    }>): Promise<EventPlanDecision>;
+    syncTodos(todos: Array<{
+        content: string;
+        status: string;
+        activeForm?: string;
+    }>): void;
+    setEventPlan(events: Array<{
+        name: string;
+        description: string;
+    }>): void;
+    /**
+     * Prompt the agent caller to select an environment from pendingOrgs.
+     *
+     * Emits an NDJSON `prompt` event with all available orgs/workspaces/environments,
+     * then reads one JSON line from stdin with the selection.
+     *
+     * Expected stdin response:
+     * ```json
+     * { "orgId": "...", "workspaceId": "...", "env": "Production" }
+     * ```
+     *
+     * Falls back to auto-selecting the first environment if stdin is closed
+     * or no response is received within 60 seconds.
+     */
+    promptEnvironmentSelection(orgs: Array<{
+        id: string;
+        name: string;
+        workspaces: Array<{
+            id: string;
+            name: string;
+            environments?: Array<{
+                name: string;
+                rank: number;
+                app: {
+                    id: string;
+                    apiKey?: string | null;
+                } | null;
+            }> | null;
+        }>;
+    }>): Promise<{
+        orgId: string;
+        workspaceId: string;
+        env: string;
+    }>;
+}

package/dist/src/ui/agent-ui.js

@@ -0,0 +1,277 @@
+"use strict";
+/**
+ * AgentUI — NDJSON implementation of WizardUI for --agent mode.
+ * Every method emits one JSON line to stdout for machine consumption.
+ * Prompts auto-approve; no interactivity.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AgentUI = void 0;
+const readline_1 = require("readline");
+// ── Helpers ─────────────────────────────────────────────────────────
+function emit(type, message, extra) {
+    const event = {
+        v: 1,
+        '@timestamp': new Date().toISOString(),
+        type,
+        message,
+        ...extra,
+    };
+    process.stdout.write(JSON.stringify(event) + '\n');
+}
+// ── Implementation ──────────────────────────────────────────────────
+class AgentUI {
+    // ── Lifecycle ───────────────────────────────────────────────────────
+    intro(message) {
+        emit('lifecycle', message, { data: { event: 'intro' } });
+    }
+    outro(message) {
+        emit('lifecycle', message, { data: { event: 'outro' } });
+    }
+    cancel(message, options) {
+        emit('lifecycle', message, {
+            data: { event: 'cancel', docsUrl: options?.docsUrl },
+        });
+    }
+    // ── Logging ─────────────────────────────────────────────────────────
+    log = {
+        info(message) {
+            emit('log', message, { level: 'info' });
+        },
+        warn(message) {
+            emit('log', message, { level: 'warn' });
+        },
+        error(message) {
+            emit('log', message, { level: 'error' });
+        },
+        success(message) {
+            emit('log', message, { level: 'success' });
+        },
+        step(message) {
+            emit('log', message, { level: 'step' });
+        },
+    };
+    note(message) {
+        emit('status', message, { data: { kind: 'note' } });
+    }
+    pushStatus(message) {
+        emit('status', message, { data: { kind: 'push' } });
+    }
+    heartbeat(statuses) {
+        if (statuses.length === 0)
+            return;
+        emit('status', `heartbeat: ${statuses.length} active`, {
+            data: { kind: 'heartbeat', statuses },
+        });
+    }
+    // ── Spinner ─────────────────────────────────────────────────────────
+    spinner() {
+        return {
+            start(message) {
+                if (message) {
+                    emit('status', message, {
+                        data: { kind: 'spinner', state: 'start' },
+                    });
+                }
+            },
+            stop(message) {
+                if (message) {
+                    emit('status', message, { data: { kind: 'spinner', state: 'stop' } });
+                }
+            },
+            message(msg) {
+                if (msg) {
+                    emit('status', msg, { data: { kind: 'spinner', state: 'update' } });
+                }
+            },
+        };
+    }
+    // ── Session state ───────────────────────────────────────────────────
+    startRun() {
+        emit('lifecycle', 'run_started', { data: { event: 'start_run' } });
+    }
+    // Security: stack traces redacted from NDJSON output to prevent path/secret leakage
+    setRunError(error) {
+        // Sanitize: strip URLs that may contain auth tokens in query params,
+        // and redact file paths that leak internal directory structure.
+        const sanitized = error.message
+            .replace(/https?:\/\/[^\s]+/g, '[URL redacted]')
+            .replace(/\/(?:Users|home|var|tmp)\/[^\s:]+/g, '[path redacted]');
+        emit('error', sanitized, {
+            data: { name: error.name },
+        });
+        return Promise.resolve(false);
+    }
+    // Security: accessToken and projectApiKey intentionally redacted from NDJSON output
+    setCredentials(credentials) {
+        emit('session_state', 'credentials_set', {
+            data: {
+                field: 'credentials',
+                host: credentials.host,
+                projectId: credentials.projectId,
+            },
+        });
+    }
+    setRegion(region) {
+        emit('session_state', `region: ${region}`, {
+            data: { field: 'region', value: region },
+        });
+    }
+    setProjectHasData(value) {
+        emit('session_state', `project_has_data: ${value}`, {
+            data: { field: 'projectHasData', value },
+        });
+    }
+    setDetectedFramework(label) {
+        emit('session_state', `framework: ${label}`, {
+            data: { field: 'detectedFramework', value: label },
+        });
+    }
+    setLoginUrl(url) {
+        emit('session_state', url ? `login_url: ${url}` : 'login_url_cleared', {
+            data: { field: 'loginUrl', value: url },
+        });
+    }
+    // ── Display state ───────────────────────────────────────────────────
+    onEnterScreen(_screen, _fn) {
+        // No screens in agent mode
+    }
+    // ── Service status ──────────────────────────────────────────────────
+    showServiceStatus(data) {
+        emit('diagnostic', data.description, {
+            data: { statusPageUrl: data.statusPageUrl },
+        });
+    }
+    showSettingsOverride(keys, backupAndFix) {
+        backupAndFix();
+        emit('status', 'settings_override auto-fixed', {
+            data: { kind: 'settings_override', keys },
+        });
+        return Promise.resolve();
+    }
+    // ── Prompts (auto-approve) ──────────────────────────────────────────
+    promptConfirm(message) {
+        emit('prompt', message, {
+            data: { promptType: 'confirm', autoResult: true },
+        });
+        return Promise.resolve(true);
+    }
+    promptChoice(message, options) {
+        const selected = options[0] ?? '';
+        emit('prompt', message, {
+            data: { promptType: 'choice', options, autoResult: selected },
+        });
+        return Promise.resolve(selected);
+    }
+    promptEventPlan(events) {
+        emit('result', 'event_plan auto-approved', {
+            data: { event: 'event_plan', events },
+        });
+        return Promise.resolve({ decision: 'approved' });
+    }
+    // ── Todos ───────────────────────────────────────────────────────────
+    syncTodos(todos) {
+        emit('progress', `todos: ${todos.length} total`, {
+            data: { todos },
+        });
+    }
+    // ── Event plan ──────────────────────────────────────────────────────
+    setEventPlan(events) {
+        emit('result', `event_plan: ${events.length} events`, {
+            data: { event: 'event_plan_set', events },
+        });
+    }
+    /**
+     * Prompt the agent caller to select an environment from pendingOrgs.
+     *
+     * Emits an NDJSON `prompt` event with all available orgs/workspaces/environments,
+     * then reads one JSON line from stdin with the selection.
+     *
+     * Expected stdin response:
+     * ```json
+     * { "orgId": "...", "workspaceId": "...", "env": "Production" }
+     * ```
+     *
+     * Falls back to auto-selecting the first environment if stdin is closed
+     * or no response is received within 60 seconds.
+     */
+    async promptEnvironmentSelection(orgs) {
+        // Build a sanitized view (no API keys exposed)
+        const sanitizedOrgs = orgs.map((org) => ({
+            id: org.id,
+            name: org.name,
+            workspaces: org.workspaces.map((ws) => ({
+                id: ws.id,
+                name: ws.name,
+                environments: (ws.environments ?? [])
+                    .filter((e) => e.app?.apiKey)
+                    .sort((a, b) => a.rank - b.rank)
+                    .map((e) => ({ name: e.name, rank: e.rank })),
+            })),
+        }));
+        emit('prompt', 'Select an environment', {
+            data: {
+                promptType: 'environment_selection',
+                orgs: sanitizedOrgs,
+            },
+        });
+        // Read one line from stdin
+        try {
+            const line = await readStdinLine(60_000);
+            if (line) {
+                const parsed = JSON.parse(line);
+                if (parsed.orgId && parsed.workspaceId && parsed.env) {
+                    return {
+                        orgId: parsed.orgId,
+                        workspaceId: parsed.workspaceId,
+                        env: parsed.env,
+                    };
+                }
+            }
+        }
+        catch {
+            // Stdin closed, timeout, or invalid JSON — fall through to auto-select
+        }
+        // Fallback: auto-select the first environment
+        for (const org of orgs) {
+            for (const ws of org.workspaces) {
+                const env = (ws.environments ?? [])
+                    .filter((e) => e.app?.apiKey)
+                    .sort((a, b) => a.rank - b.rank)[0];
+                if (env) {
+                    emit('log', `Auto-selected environment: ${org.name} / ${ws.name} / ${env.name}`, {
+                        level: 'warn',
+                    });
+                    return { orgId: org.id, workspaceId: ws.id, env: env.name };
+                }
+            }
+        }
+        throw new Error('No environments with API keys found');
+    }
+}
+exports.AgentUI = AgentUI;
+/**
+ * Read a single line from stdin with a timeout.
+ * Returns null if stdin is not readable or times out.
+ */
+function readStdinLine(timeoutMs) {
+    return new Promise((resolve) => {
+        if (!process.stdin.readable) {
+            resolve(null);
+            return;
+        }
+        const rl = (0, readline_1.createInterface)({ input: process.stdin });
+        const timer = setTimeout(() => {
+            rl.close();
+            resolve(null);
+        }, timeoutMs);
+        rl.once('line', (line) => {
+            clearTimeout(timer);
+            rl.close();
+            resolve(line.trim());
+        });
+        rl.once('close', () => {
+            clearTimeout(timer);
+            resolve(null);
+        });
+    });
+}

package/dist/src/ui/logging-ui.js

@@ -98,7 +98,7 @@ class LoggingUI {
         }
     }
     showServiceStatus(data) {
-        console.log(`▲  Claude/Anthropic services are experiencing issues.`);
+        console.log(`▲  The setup agent is temporarily unavailable.`);
         console.log(`│  Status: ${data.description}`);
         console.log(`│  Status page: ${data.statusPageUrl}`);
         console.log(`│  The wizard may not work reliably while services are affected.`);

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

@@ -1,3 +1,15 @@
+/**
+ * App — Root component.
+ *
+ * Layout (top to bottom):
+ *   1. JourneyStepper (1 line) — progress through the flow
+ *   2. HeaderBar (1 line) — title + org/project context
+ *   3. Separator
+ *   4. Content area (flex grow) — active screen
+ *   5. ConsoleView bottom area — separator + hints + input
+ *
+ * No outer border. Full terminal width (capped at 120).
+ */
 import type { WizardStore } from './store.js';
 interface AppProps {
     store: WizardStore;

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

@@ -1,34 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useSyncExternalStore } from 'react';
-import { Box } from 'ink';
+/**
+ * App — Root component.
+ *
+ * Layout (top to bottom):
+ *   1. JourneyStepper (1 line) — progress through the flow
+ *   2. HeaderBar (1 line) — title + org/project context
+ *   3. Separator
+ *   4. Content area (flex grow) — active screen
+ *   5. ConsoleView bottom area — separator + hints + input
+ *
+ * No outer border. Full terminal width (capped at 120).
+ */
+import { useMemo } from 'react';
+import { Box, Text } from 'ink';
 import { createScreens, createServices } from './screen-registry.js';
 import { CommandModeContext } from './context/CommandModeContext.js';
 import { ConsoleView } from './components/ConsoleView.js';
-import { TitleBar } from './components/TitleBar.js';
+import { HeaderBar } from './components/HeaderBar.js';
+import { JourneyStepper } from './components/JourneyStepper.js';
 import { useStdoutDimensions } from './hooks/useStdoutDimensions.js';
-import { DissolveTransition } from './primitives/DissolveTransition.js';
-import { ScreenErrorBoundary } from './primitives/ScreenErrorBoundary.js';
-const MIN_WIDTH = 80;
-const MAX_WIDTH = 120;
-/** Height reserved for separator + response line + input + up to 5 picker items. */
-const CONSOLE_INPUT_HEIGHT = 8;
+import { useWizardStore } from './hooks/useWizardStore.js';
+import { DissolveTransition } from './primitives/index.js';
+import { ScreenErrorBoundary } from './primitives/index.js';
+import { Colors, Layout } from './styles.js';
+/** Height reserved for stepper + header + separators + hint bar + input. */
+const CHROME_HEIGHT = 8;
 function getContentWidth(terminalColumns) {
-    if (terminalColumns < MIN_WIDTH)
+    if (terminalColumns < Layout.minWidth)
         return terminalColumns;
-    return Math.min(MAX_WIDTH, terminalColumns);
+    return Math.min(Layout.maxWidth, terminalColumns);
 }
 export const App = ({ store }) => {
     const [columns, rows] = useStdoutDimensions();
     const services = useMemo(() => createServices(store.session.localMcp), []);
     const screens = useMemo(() => createScreens(store, services), [store, services]);
-    useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+    useWizardStore(store);
     const width = getContentWidth(columns);
-    const innerWidth = width - 2;
-    // border(2) + titlebar(1) + gap(1) + console input area
-    const contentHeight = Math.max(5, rows - 4 - CONSOLE_INPUT_HEIGHT);
-    // innerWidth minus paddingX(1) on each side
-    const contentAreaWidth = Math.max(10, innerWidth - 2);
+    const contentHeight = Math.max(5, rows - CHROME_HEIGHT);
+    const contentAreaWidth = Math.max(10, width - Layout.paddingX * 2);
     const direction = store.lastNavDirection === 'pop' ? 'right' : 'left';
     const activeScreen = screens[store.currentScreen] ?? null;
-    return (_jsx(CommandModeContext.Provider, { value: store.commandMode, children: _jsx(Box, { flexDirection: "column", height: rows, width: columns, alignItems: "center", justifyContent: "flex-start", children: _jsxs(ConsoleView, { store: store, width: width, height: rows, children: [_jsx(TitleBar, { version: store.version, width: innerWidth, orgName: store.session.selectedOrgName, projectName: store.session.selectedProjectName }), _jsx(Box, { height: 1 }), _jsx(Box, { flexDirection: "column", flexGrow: 1, paddingX: 1, overflow: "hidden", children: _jsx(DissolveTransition, { transitionKey: store.currentScreen, width: contentAreaWidth, height: contentHeight, direction: direction, children: _jsx(ScreenErrorBoundary, { store: store, retryToken: store.screenErrorRetry, children: activeScreen }) }) })] }) }) }));
+    const separator = Layout.separatorChar.repeat(Math.max(0, width - 2));
+    return (_jsx(CommandModeContext.Provider, { value: store.commandMode, children: _jsxs(Box, { flexDirection: "column", height: rows, width: columns, alignItems: "center", justifyContent: "flex-start", children: [_jsxs(Box, { flexDirection: "column", width: width, children: [_jsx(JourneyStepper, { store: store, width: width }), _jsx(HeaderBar, { width: width, orgName: store.session.selectedOrgName, projectName: store.session.selectedProjectName }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { color: Colors.border, children: separator }) })] }), _jsx(ConsoleView, { store: store, width: width, height: rows - 3, children: _jsx(Box, { flexDirection: "column", flexGrow: 1, paddingX: Layout.paddingX, overflow: "hidden", children: _jsx(DissolveTransition, { transitionKey: store.currentScreen, width: contentAreaWidth, height: contentHeight, direction: direction, children: _jsx(ScreenErrorBoundary, { store: store, retryToken: store.screenErrorRetry, children: activeScreen }) }) }) })] }) }));
 };