@contentful/experience-design-system-cli 2.12.0 → 2.12.1-dev-build-589b615.0

package/dist/src/import/tui/steps/PushDecisionGateStep.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text } from 'ink';
+import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
+const OPTIONS = [
+    { value: 'both', label: 'Save AND push', shortcut: 'b' },
+    { value: 'push-only', label: 'Push only', shortcut: 'p' },
+    { value: 'save-only', label: 'Save only', shortcut: 's' },
+];
+const SAVE_ONLY_INDEX = OPTIONS.findIndex((o) => o.value === 'save-only');
+export function PushDecisionGateStep({ summary, context, onChoice, onQuit, pushDisabled = false, }) {
+    // When push is disabled, the cursor defaults to "Save only" (the only
+    // selectable row). When push is enabled, "Save AND push" is the default —
+    // matches the existing scope-gate UX.
+    const [cursor, setCursor] = useState(pushDisabled ? SAVE_ONLY_INDEX : 0);
+    function isSelectable(index) {
+        if (!pushDisabled)
+            return true;
+        return OPTIONS[index].value === 'save-only';
+    }
+    useImmediateInput((input, key) => {
+        if (key.return) {
+            if (!isSelectable(cursor))
+                return;
+            onChoice(OPTIONS[cursor].value);
+            return;
+        }
+        if (input === 'b') {
+            if (pushDisabled)
+                return;
+            onChoice('both');
+            return;
+        }
+        if (input === 'p') {
+            if (pushDisabled)
+                return;
+            onChoice('push-only');
+            return;
+        }
+        if (input === 's') {
+            onChoice('save-only');
+            return;
+        }
+        if (input === 'j' || key.downArrow) {
+            setCursor((c) => {
+                // Walk forward to the next selectable row. If none, stay put.
+                for (let i = c + 1; i < OPTIONS.length; i++) {
+                    if (isSelectable(i))
+                        return i;
+                }
+                return c;
+            });
+            return;
+        }
+        if (input === 'k' || key.upArrow) {
+            setCursor((c) => {
+                for (let i = c - 1; i >= 0; i--) {
+                    if (isSelectable(i))
+                        return i;
+                }
+                return c;
+            });
+            return;
+        }
+        if (input === 'q' || key.escape) {
+            onQuit();
+            return;
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsx(Text, { color: "green", children: "\u2713 Generation complete" }), _jsx(Text, { dimColor: true, children: summary }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { children: context }) }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: OPTIONS.map((opt, i) => {
+                    const selected = i === cursor;
+                    const disabled = pushDisabled && opt.value !== 'save-only';
+                    const suffix = disabled ? ' (unavailable — credentials skipped)' : '';
+                    return (_jsxs(Text, { color: selected ? 'cyan' : undefined, dimColor: disabled, children: [selected ? '›' : ' ', " [", opt.shortcut, "] ", opt.label, suffix] }, opt.value));
+                }) }), _jsxs(Box, { gap: 3, marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "[Enter] Confirm" }), _jsx(Text, { dimColor: true, children: "[j/k] Move" }), _jsx(Text, { dimColor: true, children: "[q] Quit" })] })] }));
+}

package/dist/src/import/tui/steps/PushingStep.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { PushExpected, PushProgress } from '../push-progress.js';
+type PushingStepProps = {
+    stepNumber: number;
+    totalSteps: number;
+    expected: PushExpected | null;
+    progress: PushProgress;
+};
+export declare function PushingStep({ stepNumber, totalSteps, expected, progress }: PushingStepProps): React.ReactElement;
+export {};

package/dist/src/import/tui/steps/PushingStep.js

@@ -0,0 +1,40 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const ACTION_LABELS = {
+    create: 'Creating',
+    update: 'Updating',
+    remove: 'Deleting',
+};
+function ActionRow({ label, expectedCount, progress, }) {
+    // Per spec: do NOT fake proportional tallies. Left side stays "?/N" until
+    // terminal status surfaces real per-action counts.
+    const left = progress && progress.kind === 'progress' ? '?' : '?';
+    return (_jsxs(Box, { gap: 1, children: [_jsxs(Text, { children: [" ", label] }), _jsxs(Text, { dimColor: true, children: [left, "/", expectedCount] })] }));
+}
+function EntitySection({ title, counts, progress, }) {
+    const visibleActions = ['create', 'update', 'remove'].filter((k) => counts[k] > 0);
+    if (visibleActions.length === 0)
+        return null;
+    return (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(Text, { bold: true, children: title }), visibleActions.map((k) => (_jsx(ActionRow, { label: ACTION_LABELS[k], expectedCount: counts[k], progress: progress }, k)))] }));
+}
+export function PushingStep({ stepNumber, totalSteps, expected, progress }) {
+    const [frame, setFrame] = useState(0);
+    const [elapsed, setElapsed] = useState(0);
+    useEffect(() => {
+        const spinner = setInterval(() => setFrame((f) => (f + 1) % SPINNER_FRAMES.length), 80);
+        const timer = setInterval(() => setElapsed((s) => s + 1), 1000);
+        return () => {
+            clearInterval(spinner);
+            clearInterval(timer);
+        };
+    }, []);
+    const mins = Math.floor(elapsed / 60);
+    const secs = elapsed % 60;
+    const elapsedStr = mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
+    const operationId = progress && progress.kind === 'queued' ? progress.operationId : null;
+    const showGlobal = progress && progress.kind === 'progress';
+    const showCurrent = progress && progress.kind === 'progress' && progress.current ? progress.current : null;
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(Text, { dimColor: true, children: '─'.repeat(40) }), _jsxs(Box, { gap: 1, children: [_jsxs(Text, { bold: true, children: ["Step ", stepNumber, " of ", totalSteps] }), _jsx(Text, { bold: true, children: "\u2014" }), _jsx(Text, { bold: true, children: "Push to Contentful" })] }), _jsx(Text, { dimColor: true, children: '─'.repeat(40) })] }), _jsx(Text, { children: "Writing component types and design tokens to your Contentful space..." }), operationId && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { dimColor: true, children: "Operation:" }), _jsx(Text, { children: operationId })] })), expected && (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(EntitySection, { title: "Component types", counts: expected.componentTypes, progress: progress }), _jsx(EntitySection, { title: "Design tokens", counts: expected.designTokens, progress: progress })] })), showGlobal && progress && progress.kind === 'progress' && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "cyan", children: SPINNER_FRAMES[frame] }), _jsxs(Text, { dimColor: true, children: [progress.processed, "/", progress.total, " entities"] })] })), showCurrent && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { dimColor: true, children: "Now processing:" }), _jsx(Text, { children: showCurrent })] })), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Elapsed: ", elapsedStr] }) })] }));
+}

package/dist/src/import/tui/steps/ScopeGateStep.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export type ScopeComponent = {
+    name: string;
+    componentId: string;
+    aiDecision?: 'accepted' | 'rejected' | null;
+    aiReason?: string | null;
+};
+export type ScopeGateStepProps = {
+    components: ScopeComponent[];
+    onConfirm: (decisions: {
+        accepted: string[];
+        rejected: string[];
+    }) => void;
+    onQuit: () => void;
+    aiFilterStatus?: 'idle' | 'running' | 'complete' | 'cancelled' | 'failed';
+    aiFilterProgress?: {
+        done: number;
+        total: number;
+    } | null;
+    aiFilterError?: string | null;
+    onCancelAutoFilter?: () => void;
+};
+export declare function ScopeGateStep({ components, onConfirm, onQuit, aiFilterStatus, aiFilterProgress, aiFilterError, onCancelAutoFilter, }: ScopeGateStepProps): React.ReactElement;

package/dist/src/import/tui/steps/ScopeGateStep.js

@@ -0,0 +1,243 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import React, { useMemo, useState } from 'react';
+import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
+const VISIBLE_COUNT = 10;
+const REASON_DISPLAY_MAX = 60;
+// Pilot-2026-06-25 R2: AI-flagged rows render a subtle cyan `*` glyph before
+// the name (in place of the Round-1 `[AI]` text badge). The marker persists
+// regardless of whether the operator later toggles the row INCLUDED — manual
+// decision wins; the marker is informational only.
+const AI_MARKER = '*';
+// Indentation prefix for the wrapped reason on the focused AI row. Aligns
+// the reason under the row label so the eye reads it as a continuation.
+const REASON_WRAP_INDENT = '      ';
+function truncateReason(reason) {
+    if (reason === null || reason === undefined || reason === '')
+        return '<no reason given>';
+    if (reason.length <= REASON_DISPLAY_MAX)
+        return reason;
+    return reason.slice(0, REASON_DISPLAY_MAX - 1).trimEnd() + '…';
+}
+function isAiFlagged(row) {
+    return row.aiDecision === 'rejected';
+}
+export function ScopeGateStep({ components, onConfirm, onQuit, aiFilterStatus = 'idle', aiFilterProgress = null, aiFilterError = null, onCancelAutoFilter, }) {
+    // Pilot-2026-06-25: scope-gate UX overhaul — single unified list.
+    //
+    // Inverted mental model: we now track which rows are INCLUDED rather than
+    // which are EXCLUDED. The underlying delta-on-prop pattern survives so
+    // operator decisions stay sticky across streaming AI updates:
+    //   - userExcluded: rows the operator explicitly toggled OFF
+    //   - userUnExcluded: rows the operator explicitly toggled ON
+    // Effective INCLUDED for a row:
+    //   if userExcluded.has(name): false
+    //   else if userUnExcluded.has(name): true
+    //   else: row.aiDecision !== 'rejected'   // default: follow AI, default true if AI silent
+    const [userExcluded, setUserExcluded] = useState(new Set());
+    const [userUnExcluded, setUserUnExcluded] = useState(new Set());
+    const [cursor, setCursor] = useState(0);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    // Pilot-2026-06-23: `s` opens a side panel showing the full reject_reason
+    // (untruncated) for an AI-flagged row under the cursor. With the focused-row
+    // wrap landed, the panel is mostly redundant — kept for screen-reader /
+    // overflow cases per spec.
+    const [reasonPanelOpen, setReasonPanelOpen] = useState(false);
+    // Pilot-2026-06-25 R2: two-section render. AI-flagged rows go to a top
+    // section ("AI recommended exclusions"); the rest fall into "Components".
+    // Within each section we preserve prop (extraction) order. Cursor walks
+    // the unified flat list [...aiList, ...componentsList].
+    const aiList = components.filter(isAiFlagged);
+    const componentsList = components.filter((c) => !isAiFlagged(c));
+    const flatList = [...aiList, ...componentsList];
+    const isIncluded = (row) => {
+        // Pilot-2026-06-25 invariant: operator decisions are ALWAYS sticky over
+        // streaming AI updates. If the operator explicitly toggled this row
+        // (userExcluded or userUnExcluded), that wins regardless of any later
+        // aiDecision the auto-filter writes via prop updates. The [AI] badge
+        // still appears on the row — it's informational, not authoritative.
+        if (userExcluded.has(row.name))
+            return false;
+        if (userUnExcluded.has(row.name))
+            return true;
+        return row.aiDecision !== 'rejected';
+    };
+    const partition = () => {
+        const accepted = [];
+        const rejected = [];
+        for (const c of flatList) {
+            if (isIncluded(c))
+                accepted.push(c.name);
+            else
+                rejected.push(c.name);
+        }
+        return { accepted, rejected };
+    };
+    const toggleFocused = () => {
+        const target = flatList[cursor];
+        if (!target)
+            return;
+        const currentlyIn = isIncluded(target);
+        if (currentlyIn) {
+            // Flip to EXCLUDED.
+            setUserExcluded((prev) => {
+                if (prev.has(target.name))
+                    return prev;
+                const next = new Set(prev);
+                next.add(target.name);
+                return next;
+            });
+            setUserUnExcluded((prev) => {
+                if (!prev.has(target.name))
+                    return prev;
+                const next = new Set(prev);
+                next.delete(target.name);
+                return next;
+            });
+        }
+        else {
+            // Flip to INCLUDED.
+            setUserUnExcluded((prev) => {
+                if (prev.has(target.name))
+                    return prev;
+                const next = new Set(prev);
+                next.add(target.name);
+                return next;
+            });
+            setUserExcluded((prev) => {
+                if (!prev.has(target.name))
+                    return prev;
+                const next = new Set(prev);
+                next.delete(target.name);
+                return next;
+            });
+        }
+    };
+    useImmediateInput((input, key) => {
+        if (input === 'q' || key.escape) {
+            // Feature 3: while auto-filter is running, q cancels the LLM run instead
+            // of quitting the wizard. After completion (or if no auto-filter ran), q
+            // falls back to the existing wizard-quit behavior.
+            if (aiFilterStatus === 'running' && onCancelAutoFilter) {
+                onCancelAutoFilter();
+                return;
+            }
+            // Esc also closes the reason panel without quitting.
+            if (key.escape && reasonPanelOpen) {
+                setReasonPanelOpen(false);
+                return;
+            }
+            onQuit();
+            return;
+        }
+        if (input === 'f' || input === 'F') {
+            onConfirm(partition());
+            return;
+        }
+        if (input === 's') {
+            setReasonPanelOpen((prev) => !prev);
+            return;
+        }
+        // `a`, space, and `r` are all aliases for "toggle focused row INCLUDED ↔ EXCLUDED".
+        // `r` kept for muscle-memory; it no longer means "reject".
+        if (input === 'a' || input === ' ' || input === 'r') {
+            toggleFocused();
+            return;
+        }
+        if (input === 'A') {
+            // Pilot-2026-06-25 R2: toggle-all operates ONLY on the Components
+            // section. The AI section's defaults stay put — operators rarely want
+            // a mass-include of AI-flagged rows via one keystroke. Toggle behavior:
+            // if any Components row is excluded, include them all; else exclude all.
+            const compNames = componentsList.map((c) => c.name);
+            const anyCompExcluded = componentsList.some((c) => !isIncluded(c));
+            if (anyCompExcluded) {
+                setUserUnExcluded((prev) => {
+                    const next = new Set(prev);
+                    for (const n of compNames)
+                        next.add(n);
+                    return next;
+                });
+                setUserExcluded((prev) => {
+                    const next = new Set(prev);
+                    for (const n of compNames)
+                        next.delete(n);
+                    return next;
+                });
+            }
+            else {
+                setUserExcluded((prev) => {
+                    const next = new Set(prev);
+                    for (const n of compNames)
+                        next.add(n);
+                    return next;
+                });
+                setUserUnExcluded((prev) => {
+                    const next = new Set(prev);
+                    for (const n of compNames)
+                        next.delete(n);
+                    return next;
+                });
+            }
+            return;
+        }
+        if (key.upArrow || input === 'k') {
+            const len = flatList.length;
+            if (len === 0)
+                return;
+            setCursor((c) => {
+                const next = c <= 0 ? 0 : c - 1;
+                setScrollOffset((prev) => Math.min(prev, next));
+                return next;
+            });
+            return;
+        }
+        if (key.downArrow || input === 'j') {
+            const len = flatList.length;
+            if (len === 0)
+                return;
+            setCursor((c) => {
+                const next = c >= len - 1 ? len - 1 : c + 1;
+                setScrollOffset((prev) => (next >= prev + VISIBLE_COUNT ? next - VISIBLE_COUNT + 1 : prev));
+                return next;
+            });
+            return;
+        }
+    });
+    const total = flatList.length;
+    const includedCount = useMemo(() => flatList.filter((c) => isIncluded(c)).length, [components, userExcluded, userUnExcluded]);
+    const hasAnyAi = flatList.some(isAiFlagged);
+    const visibleEnd = Math.min(scrollOffset + VISIBLE_COUNT, total);
+    const visible = flatList.slice(scrollOffset, visibleEnd);
+    const above = scrollOffset;
+    const below = Math.max(0, total - visibleEnd);
+    // ── Banner / status helpers ───────────────────────────────────────────────
+    const showRunningHeader = aiFilterStatus === 'running' && aiFilterProgress !== null && aiFilterProgress.total > 0;
+    const showCancelledBanner = aiFilterStatus === 'cancelled';
+    const showFailedBanner = aiFilterStatus === 'failed';
+    const allRejected = aiFilterStatus === 'complete' && total > 0 && flatList.every((c) => !isIncluded(c));
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsx(Text, { color: "green", children: "\u2713 Extraction complete" }), _jsxs(Text, { dimColor: true, children: ["Found ", total, " component", total === 1 ? '' : 's', ". Pick which ones to import. Generation runs only on the included set."] }), showRunningHeader && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsxs(Text, { color: "cyan", children: ["[AI filtering (", aiFilterProgress.done, "/", aiFilterProgress.total, ")\u2026] ", _jsx(Text, { dimColor: true, children: "[q] cancels" })] }) })), showCancelledBanner && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "yellow", children: ["AI auto-filter cancelled", aiFilterProgress ? ` at ${aiFilterProgress.done}/${aiFilterProgress.total}` : '', ". Review remaining manually."] }) })), showFailedBanner && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "yellow", children: ["AI auto-filter failed: ", aiFilterError ?? 'unknown error', ". Continuing without AI suggestions."] }) })), reasonPanelOpen && flatList[cursor]?.aiDecision === 'rejected' && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, marginTop: 1, children: [_jsx(Text, { dimColor: true, bold: true, children: `AI rejection reason: ${flatList[cursor].name}` }), _jsx(Text, { children: flatList[cursor].aiReason ?? '<no reason given>' }), _jsx(Text, { dimColor: true, children: "[s] close \u00B7 [Esc] close" })] })), allRejected ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellow", children: "AI excluded all components \u2014 press [a] to override or [q] to quit" }) })) : (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [above > 0 && _jsxs(Text, { dimColor: true, children: ["\u2191 ", above, " above"] }), visible.map((c, vi) => {
+                        const i = vi + scrollOffset;
+                        const isCursor = i === cursor;
+                        const included = isIncluded(c);
+                        const aiFlagged = isAiFlagged(c);
+                        const prefix = isCursor ? '›' : ' ';
+                        // R2: color-glyphs replace word labels. Green [✓] for included,
+                        // red [✗] for excluded. The component name follows the same
+                        // color UNLESS the row is the cursor row, in which case the
+                        // name flips to cyan (state glyph keeps its red/green).
+                        const stateGlyph = included ? '[✓]' : '[✗]';
+                        const stateColor = included ? 'green' : 'red';
+                        // R2: cyan `*` glyph replaces the verbose `[AI]` badge.
+                        const aiMarkerNode = aiFlagged ? _jsx(Text, { color: "cyan", children: `${AI_MARKER} ` }) : null;
+                        const inlineReason = !isCursor && aiFlagged ? ` ${truncateReason(c.aiReason)}` : '';
+                        const showAiHeader = aiList.length > 0 && i === 0;
+                        const showComponentsHeader = componentsList.length > 0 && i === aiList.length;
+                        const header = showAiHeader ? (_jsx(Text, { bold: true, children: `AI recommended exclusions (${aiList.length})` }, `hdr-ai-${i}`)) : showComponentsHeader ? (_jsx(Text, { bold: true, children: `Components (${componentsList.length})` }, `hdr-comp-${i}`)) : null;
+                        if (isCursor) {
+                            const wrapReason = aiFlagged && c.aiReason !== null && c.aiReason !== undefined && c.aiReason.length > 0;
+                            return (_jsxs(React.Fragment, { children: [header, _jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: `${prefix} ` }), aiMarkerNode, _jsx(Text, { color: stateColor, children: stateGlyph }), _jsx(Text, { color: "cyan", children: ` ${c.name}` })] }), wrapReason && _jsx(Text, { dimColor: true, children: `${REASON_WRAP_INDENT}${c.aiReason}` })] }, c.componentId));
+                        }
+                        return (_jsxs(React.Fragment, { children: [header, _jsxs(Text, { children: [_jsx(Text, { children: `${prefix} ` }), aiMarkerNode, _jsx(Text, { color: stateColor, children: stateGlyph }), _jsx(Text, { color: stateColor, children: ` ${c.name}` }), inlineReason !== '' && _jsx(Text, { dimColor: true, children: inlineReason })] })] }, c.componentId));
+                    }), below > 0 && _jsxs(Text, { dimColor: true, children: ["\u2193 ", below, " below"] })] })), _jsxs(Box, { gap: 3, marginTop: 1, children: [includedCount > 0 ? (_jsxs(Text, { children: [_jsx(Text, { color: "green", children: includedCount }), _jsxs(Text, { dimColor: true, children: ["/", total, " included"] })] })) : (_jsx(Text, { color: "yellow", children: "none included" })), _jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "[j/k]" }), " ", _jsx(Text, { dimColor: true, children: "move" })] }), _jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "[a/space]" }), " ", _jsx(Text, { dimColor: true, children: "toggle" })] }), _jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "[A]" }), " ", _jsx(Text, { dimColor: true, children: "toggle all" })] }), _jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "[f]" }), " ", _jsx(Text, { dimColor: true, children: "continue" })] }), _jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "[q]" }), " ", _jsx(Text, { dimColor: true, children: "quit" })] }), hasAnyAi && (_jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "[s]" }), " ", _jsx(Text, { dimColor: true, children: "AI reason" })] })), hasAnyAi && (_jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "*" }), " ", _jsx(Text, { dimColor: true, children: "originally excluded by AI" })] }))] })] }));
+}

package/dist/src/import/tui/steps/TokenInputStep.js

@@ -9,6 +9,7 @@ export function TokenInputStep({ onConfirm, onSkip, onQuit }) {
     const [cursorVisible, setCursorVisible] = useState(true);
     const [error, setError] = useState(null);
     const [resolvedPath, setResolvedPath] = useState(null);
+    const [typingMode, setTypingMode] = useState(false);
     useEffect(() => {
         const interval = setInterval(() => setCursorVisible((v) => !v), 500);
         return () => clearInterval(interval);
@@ -45,11 +46,26 @@ export function TokenInputStep({ onConfirm, onSkip, onQuit }) {
             onConfirm(normalized);
             return;
         }
-        if (input === 's') {
+        if (key.tab) {
+            setTypingMode(false);
+            return;
+        }
+        if (key.escape) {
+            if (typingMode) {
+                setTypingMode(false);
+                setInputValue('');
+                setError(null);
+                setResolvedPath(null);
+                return;
+            }
+            onQuit();
+            return;
+        }
+        if (!typingMode && input === 's') {
             onSkip();
             return;
         }
-        if (key.escape || input === 'q') {
+        if (!typingMode && input === 'q') {
             onQuit();
             return;
         }
@@ -60,11 +76,12 @@ export function TokenInputStep({ onConfirm, onSkip, onQuit }) {
             return;
         }
         if (input && !key.ctrl && !key.meta) {
+            setTypingMode(true);
             setInputValue((v) => v + input);
             setError(null);
             setResolvedPath(null);
         }
     });
     const displayValue = inputValue + (cursorVisible ? '█' : ' ');
-    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, children: "Design tokens" }), _jsx(Text, { dimColor: true, children: "Point me to your raw token file (e.g. ~/design-tokens/tokens.json). You can use ~, relative, or absolute paths. Claude will map it to DTCG format." }), _jsxs(Box, { flexDirection: "column", marginTop: 1, gap: 0, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "cyan", children: "?" }), _jsx(Text, { children: "Token path (file or directory):" }), _jsx(Text, { children: displayValue })] }), resolvedPath && resolvedPath !== inputValue.trim() && !error && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["\u2192 ", resolvedPath] }) })), error && (_jsxs(Box, { marginTop: 0, flexDirection: "column", children: [_jsxs(Text, { color: "red", children: ["\u2717 ", error] }), resolvedPath && _jsxs(Text, { dimColor: true, children: [" Resolved to: ", resolvedPath] })] }))] }), _jsxs(Box, { gap: 3, marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "[Enter] Confirm path" }), _jsx(Text, { dimColor: true, children: "[s] Skip tokens" }), _jsx(Text, { dimColor: true, children: "[q] Quit" })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, children: "Design tokens" }), _jsx(Text, { dimColor: true, children: "Point me to your raw token file (e.g. ~/design-tokens/tokens.json). You can use ~, relative, or absolute paths. Claude will map it to DTCG format." }), _jsxs(Box, { flexDirection: "column", marginTop: 1, gap: 0, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "cyan", children: "?" }), _jsx(Text, { children: "Token path (file or directory):" }), _jsx(Text, { children: displayValue })] }), resolvedPath && resolvedPath !== inputValue.trim() && !error && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["\u2192 ", resolvedPath] }) })), error && (_jsxs(Box, { marginTop: 0, flexDirection: "column", children: [_jsxs(Text, { color: "red", children: ["\u2717 ", error] }), resolvedPath && _jsxs(Text, { dimColor: true, children: [" Resolved to: ", resolvedPath] })] }))] }), _jsxs(Box, { gap: 3, marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "[Enter] Submit / Skip if empty" }), _jsx(Text, { dimColor: true, children: "[Tab] Exit typing" }), _jsx(Text, { dimColor: true, children: "[Esc] Clear & exit" }), _jsx(Text, { dimColor: true, children: "[s] Skip" }), _jsx(Text, { dimColor: true, children: "[q] Quit" })] })] }));
 }

package/dist/src/import/tui/useLivePreview.d.ts

@@ -0,0 +1,35 @@
+import type { ServerPreviewResponse } from '@contentful/experience-design-system-types';
+export type UseLivePreviewOptions = {
+    enabled: boolean;
+    sessionId: string;
+    tokensPath: string;
+    spaceId: string;
+    environmentId: string;
+    cmaToken: string;
+    host: string;
+    onResult: (response: ServerPreviewResponse | null) => void;
+    debounceMs?: number;
+};
+export type LivePreviewStatus = 'idle' | 'running';
+export type UseLivePreviewReturn = {
+    trigger: () => void;
+    status: LivePreviewStatus;
+    disabled: boolean;
+};
+/**
+ * Hook that owns the post-save live-preview side effect for the wizard's
+ * final-review step. Centralizes:
+ *
+ * - 500ms debounce so rapid Ctrl+S spam collapses to a single API call.
+ * - Generation tag on every fire so a stale in-flight call's response is
+ *   discarded if a newer fire has already kicked off (in lieu of an
+ *   AbortController for v1).
+ * - Disable-for-session on 401/403: subsequent triggers no-op until the
+ *   wizard exits. One-line stderr warning. No modal, no re-prompt — the
+ *   operator is mid-edit and we must not interrupt the flow.
+ * - Status state for the sidebar spinner (`'idle' | 'running'`).
+ *
+ * Cred-missing / disabled / not-enabled cases short-circuit BEFORE the timer
+ * is set so we don't accumulate dead timers.
+ */
+export declare function useLivePreview(opts: UseLivePreviewOptions): UseLivePreviewReturn;

package/dist/src/import/tui/useLivePreview.js

@@ -0,0 +1,120 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ApiError } from '../../apply/api-client.js';
+import { runLivePreview } from './runLivePreview.js';
+const DEFAULT_DEBOUNCE_MS = 500;
+/**
+ * Hook that owns the post-save live-preview side effect for the wizard's
+ * final-review step. Centralizes:
+ *
+ * - 500ms debounce so rapid Ctrl+S spam collapses to a single API call.
+ * - Generation tag on every fire so a stale in-flight call's response is
+ *   discarded if a newer fire has already kicked off (in lieu of an
+ *   AbortController for v1).
+ * - Disable-for-session on 401/403: subsequent triggers no-op until the
+ *   wizard exits. One-line stderr warning. No modal, no re-prompt — the
+ *   operator is mid-edit and we must not interrupt the flow.
+ * - Status state for the sidebar spinner (`'idle' | 'running'`).
+ *
+ * Cred-missing / disabled / not-enabled cases short-circuit BEFORE the timer
+ * is set so we don't accumulate dead timers.
+ */
+export function useLivePreview(opts) {
+    const debounceMs = opts.debounceMs ?? DEFAULT_DEBOUNCE_MS;
+    const [status, setStatus] = useState('idle');
+    const [disabled, setDisabled] = useState(false);
+    const timerRef = useRef(null);
+    const generationRef = useRef(0);
+    const latestRef = useRef(0);
+    const inflightRef = useRef(0);
+    // Mirror props in a ref so the trigger callback can stay stable.
+    const optsRef = useRef(opts);
+    useEffect(() => {
+        optsRef.current = opts;
+    });
+    // Mirror disabled into a ref so the timer callback sees the latest value
+    // without redefining `trigger` (which would defeat its memoization).
+    const disabledRef = useRef(disabled);
+    useEffect(() => {
+        disabledRef.current = disabled;
+    }, [disabled]);
+    // Clear any pending timer on unmount.
+    useEffect(() => {
+        return () => {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+        };
+    }, []);
+    const trigger = useCallback(() => {
+        const current = optsRef.current;
+        if (!current.enabled)
+            return;
+        if (disabledRef.current)
+            return;
+        if (!current.spaceId || !current.environmentId || !current.cmaToken)
+            return;
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        timerRef.current = setTimeout(() => {
+            timerRef.current = null;
+            void fire();
+        }, debounceMs);
+    }, [debounceMs]);
+    const fire = async () => {
+        const current = optsRef.current;
+        if (disabledRef.current)
+            return;
+        generationRef.current += 1;
+        const generation = generationRef.current;
+        latestRef.current = generation;
+        inflightRef.current += 1;
+        setStatus('running');
+        try {
+            const result = await runLivePreview({
+                sessionId: current.sessionId,
+                tokensPath: current.tokensPath,
+                spaceId: current.spaceId,
+                environmentId: current.environmentId,
+                cmaToken: current.cmaToken,
+                host: current.host,
+                generation,
+            });
+            // Discard stale responses (generation tag).
+            if (result.generation !== latestRef.current)
+                return;
+            current.onResult(result.response);
+        }
+        catch (err) {
+            if (err instanceof ApiError && (err.status === 401 || err.status === 403)) {
+                setDisabled(true);
+                disabledRef.current = true;
+                try {
+                    process.stderr.write(`live-preview: ${err.status}, disabling for this session\n`);
+                }
+                catch {
+                    // best-effort
+                }
+            }
+            else {
+                const msg = err instanceof Error ? err.message : String(err);
+                try {
+                    process.stderr.write(`live-preview: ${msg}\n`);
+                }
+                catch {
+                    // best-effort
+                }
+            }
+        }
+        finally {
+            inflightRef.current -= 1;
+            if (inflightRef.current <= 0) {
+                inflightRef.current = 0;
+                setStatus('idle');
+            }
+        }
+    };
+    return { trigger, status, disabled };
+}

package/dist/src/import/tui/wizard-generate-progress.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Pure parser for the generate-step stderr stream.
+ *
+ * Two line shapes can carry progress info:
+ *
+ * 1. `progress=generate:<done>/<total>:<name>` — emitted at terminal completion
+ *    of each component in `runAllComponents`. `done` is the count of completed
+ *    components and is monotonically non-decreasing.
+ * 2. `[<index+1>/<total>] <name>` — legacy line emitted at the START of each
+ *    component (and again on retry). With concurrency > 1, the index reflects
+ *    the worker's starting position, not completions, so it MUST NOT drive
+ *    `done` — only `current` (the name shown to the user).
+ *
+ * Given a chunk and the previous state, returns the updated state.
+ */
+export type GenerateProgressState = {
+    done: number;
+    total: number;
+    current: string;
+} | null;
+export declare function parseGenerateStderrChunk(chunk: string, prev: GenerateProgressState): GenerateProgressState;

package/dist/src/import/tui/wizard-generate-progress.js

@@ -0,0 +1,25 @@
+const PROGRESS_LINE = /^progress=generate:(\d+)\/(\d+):(.+)$/;
+const LEGACY_LINE = /\[(\d+)\/(\d+)\]\s+(.+)/;
+export function parseGenerateStderrChunk(chunk, prev) {
+    let state = prev;
+    for (const line of chunk.split('\n')) {
+        const progressMatch = PROGRESS_LINE.exec(line);
+        if (progressMatch) {
+            state = {
+                done: Number(progressMatch[1]),
+                total: Number(progressMatch[2]),
+                current: progressMatch[3].trim(),
+            };
+            continue;
+        }
+        const legacyMatch = LEGACY_LINE.exec(line);
+        if (legacyMatch) {
+            state = {
+                done: state?.done ?? 0,
+                total: Number(legacyMatch[2]),
+                current: legacyMatch[3].trim(),
+            };
+        }
+    }
+    return state;
+}