@contentful/experience-design-system-cli 2.12.4-dev-build-5aa6a69.0 → 2.12.4-dev-build-ff57340.0

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

@@ -33,6 +33,8 @@ import { nextStateAfterPrint } from './run-print-files-helpers.js';
 import { PushDecisionGateStep } from './steps/PushDecisionGateStep.js';
 import { chooseGateAction } from './push-decision-gate-helpers.js';
 import { ImportApiClient, ApiError } from '../../apply/api-client.js';
+import { detectSlotCycles, extractComponentsFromManifest, formatSlotCycleReport } from '../../apply/command.js';
+import { parseEdsiError, formatParsedEdsiError } from '../../apply/error-parser.js';
 import { handlePreview422, applySkipValidationErrors, clearedValidationErrorState } from './wizard-422-helpers.js';
 import { parseGenerateStderrChunk } from './wizard-generate-progress.js';
 import { spawnGenerateChild } from './spawn-generate.js';
@@ -1034,6 +1036,23 @@ export function WizardApp({ initialSpaceId = '', initialEnvironmentId = 'master'
                 return;
             }
         }
+        // INTEG-4401 Fix A — pre-push slot-cycle hard block for the wizard's
+        // direct-API push path. The standalone `apply push` / `apply select`
+        // commands run `assertNoSlotCycles` before ever constructing an API
+        // client, but `experiences import` calls `client.applyImport` from here
+        // without shelling out — so the guard has to run again on this path.
+        // Otherwise a cyclic graph reaches EDSI and the operator sees a raw
+        // Lambda error dump (see Fix C) instead of the clear local report.
+        const cycles = detectSlotCycles(extractComponentsFromManifest(manifest));
+        if (cycles.length > 0) {
+            update({
+                step: 'error',
+                errorStep: 'apply push',
+                errorMessage: formatSlotCycleReport(cycles).join('\n'),
+                errorAllowCredentialRetry: false,
+            });
+            return;
+        }
         update({ step: 'pushing', pushProgress: null });
         try {
             const resolvedHost = resolveWizardHost(host);
@@ -1124,27 +1143,57 @@ export function WizardApp({ initialSpaceId = '', initialEnvironmentId = 'master'
                 };
             }
             else {
-                // API didn't return items — fall back to summary + preview counts
+                // API didn't return items. INTEG-4401 Fix B — do NOT report preview
+                // counts as "created": if the server said something failed, echo it
+                // truthfully so the summary can't lie. Historically this branch used
+                // preview.new/changed/removed as success counts and only surfaced
+                // failed:0, which meant a cycle rejection (summary: 0 succeeded /
+                // 11 failed, empty items) rendered as "Done ✓ 2 Component Types
+                // created" — the exact regression this fix guards against.
+                const summary = operation.summary ?? { total: 0, pending: 0, succeeded: 0, failed: 0 };
+                const anyFailure = summary.failed > 0 || operation.sys.status === 'failed' || operation.sys.status === 'partial';
                 pushResult = {
                     componentTypes: {
-                        created: preview?.components.new.length ?? 0,
-                        updated: preview?.components.changed.length ?? 0,
-                        removed: preview?.components.removed.length ?? 0,
-                        failed: 0,
+                        created: anyFailure ? 0 : (preview?.components.new.length ?? 0),
+                        updated: anyFailure ? 0 : (preview?.components.changed.length ?? 0),
+                        removed: anyFailure ? 0 : (preview?.components.removed.length ?? 0),
+                        // Attribute failures to component types by default — without a
+                        // per-item breakdown we can't split components vs tokens, and
+                        // components are the dominant entity in an import.
+                        failed: summary.failed,
                     },
                     designTokens: {
-                        created: preview?.tokens.new.length ?? 0,
-                        updated: preview?.tokens.changed.length ?? 0,
-                        removed: preview?.tokens.removed.length ?? 0,
+                        created: anyFailure ? 0 : (preview?.tokens.new.length ?? 0),
+                        updated: anyFailure ? 0 : (preview?.tokens.changed.length ?? 0),
+                        removed: anyFailure ? 0 : (preview?.tokens.removed.length ?? 0),
                         failed: 0,
                     },
-                    summary: operation.summary,
+                    summary,
                 };
             }
             update({ step: 'done', pushResult });
         }
         catch (e) {
-            const msg = e instanceof ApiError ? e.message : e instanceof Error ? e.message : 'Push failed';
+            // INTEG-4401 Fix C — parse EDSI error bodies into a `[CODE] message`
+            // block before handing off to ErrorStep, so cycle rejections and other
+            // structured failures don't render as raw Lambda log lines
+            // (timestamp / request-id / dd.trace_id / etc.).
+            let msg;
+            if (e instanceof ApiError) {
+                const parsed = parseEdsiError(e.body || e.message);
+                msg = formatParsedEdsiError(parsed, {
+                    verbose: process.env['EDSI_VERBOSE_ERRORS'] === '1',
+                    raw: e.body,
+                });
+                if (!msg)
+                    msg = e.message;
+            }
+            else if (e instanceof Error) {
+                msg = e.message;
+            }
+            else {
+                msg = 'Push failed';
+            }
             update({
                 step: 'error',
                 errorStep: 'apply push',

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

@@ -37,6 +37,6 @@ type GenerateReviewStepProps = {
 export declare function sortComponentsForSidebar<T extends {
     key: string;
     entry: CDFComponentEntry;
-}>(components: T[]): T[];
+}>(components: T[], cycleParticipants?: Set<string>): T[];
 export declare function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, livePreview, spaceId, environmentId, cmaToken, host, tokensPath, initialFinalizeError, }: GenerateReviewStepProps): React.ReactElement;
 export {};

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

@@ -8,7 +8,8 @@ import { StatusBar } from '../../../analyze/select/tui/components/StatusBar.js';
 import { FinalizeDialog } from '../../../analyze/select/tui/components/FinalizeDialog.js';
 import { QuitDialog } from '../../../analyze/select/tui/components/QuitDialog.js';
 import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
-import { openPipelineDb, loadCDFComponents, storeCDFComponents, loadComponentReviewMetadata, loadComponentRationale, } from '../../../session/db.js';
+import { openPipelineDb, loadCDFComponents, storeCDFComponents, loadComponentReviewMetadata, loadComponentRationale, loadSlotCycles, storeSlotCycles, } from '../../../session/db.js';
+import { formatCyclePathSegments, findSlotCycles, suggestCycleBreakEdge } from '../../../analyze/cycle-detection.js';
 import { RationalePanel } from '../../../analyze/select/tui/components/RationalePanel.js';
 import { ComponentRationalePanel } from '../../../analyze/select/tui/components/ComponentRationalePanel.js';
 import { applyPreviewAnnotations } from '../../../analyze/select/preview-annotations.js';
@@ -24,13 +25,22 @@ import { computeNextScrollOffset } from '../../../analyze/select/tui/hooks/scrol
  *
  * Within each tier (empty / non-empty) we tie-break alphabetically by `key`.
  */
-export function sortComponentsForSidebar(components) {
+export function sortComponentsForSidebar(components, cycleParticipants) {
     const isEmpty = (entry) => Object.keys(entry.$properties ?? {}).length === 0 && Object.keys(entry.$slots ?? {}).length === 0;
+    // Tier order: cycle members first (they block push — surface loudest),
+    // then empty (soft warning), then everything else. Ties broken alpha.
+    const tier = (c) => {
+        if (cycleParticipants?.has(c.key))
+            return 0;
+        if (isEmpty(c.entry))
+            return 1;
+        return 2;
+    };
     return [...components].sort((a, b) => {
-        const aEmpty = isEmpty(a.entry);
-        const bEmpty = isEmpty(b.entry);
-        if (aEmpty !== bEmpty)
-            return aEmpty ? -1 : 1;
+        const at = tier(a);
+        const bt = tier(b);
+        if (at !== bt)
+            return at - bt;
         return a.key.localeCompare(b.key);
     });
 }
@@ -76,6 +86,12 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
     // Tracks the first `g` of a potential `gg` double-tap (jumps to top in
     // JSON-view + panel-focused state). Reset on any non-`g` key.
     const pendingGRef = useRef(false);
+    // INTEG-4401: slot-dependency cycles loaded from the session DB. Non-empty
+    // triggers sidebar (cycle) badges, banner + [c] detail-panel affordance,
+    // and (at push time) a hard block.
+    const [slotCycles, setSlotCycles] = useState([]);
+    const [showCyclePanel, setShowCyclePanel] = useState(false);
+    const [cyclePanelScroll, setCyclePanelScroll] = useState(0);
     const handleLivePreviewResult = (response) => {
         if (!response)
             return;
@@ -107,8 +123,10 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
         async function load() {
             const db = openPipelineDb();
             let cdfComponents;
+            let cycles = [];
             try {
                 cdfComponents = loadCDFComponents(db, extractSessionId);
+                cycles = loadSlotCycles(db, extractSessionId);
             }
             finally {
                 db.close();
@@ -123,7 +141,12 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
                 entry,
                 status: 'needs-review',
             }));
-            setComponents(sortComponentsForSidebar(reviewEntries));
+            const cycleParticipants = new Set();
+            for (const c of cycles)
+                for (const p of c.path)
+                    cycleParticipants.add(p);
+            setSlotCycles(cycles);
+            setComponents(sortComponentsForSidebar(reviewEntries, cycleParticipants));
             setLoading(false);
         }
         load().catch((e) => {
@@ -230,6 +253,66 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
         }
         onFinalize(acceptedCount, explicitlyRejected.length, unresolved.length);
     };
+    /**
+     * INTEG-4401 (Fix 3/4): re-run cycle detection against the current in-memory
+     * component state and, if the result differs from the persisted `slotCycles`
+     * state, update both React state and the session DB. Called from:
+     *  - `handleEditSave` after a FieldEditor save mutates a slot's
+     *    `$allowedComponents`, so the banner / sidebar badges / [c] panel reflect
+     *    reality instead of the stale extract-time snapshot.
+     *  - The `r` reject keystroke, since dropping a component from the manifest
+     *    can collapse cycles that routed through it.
+     *
+     * Rejected components are excluded from the graph — they will never ship, so
+     * they cannot contribute to a real push-time cycle even if their slot config
+     * still references other components locally.
+     *
+     * Cheap for typical N: findSlotCycles is O((V+E)(C+1)) and most manifests
+     * have zero or a handful of cycles. Wrapped in try/catch so a malformed
+     * $slots shape can't crash the render pipeline.
+     */
+    const recomputeCycles = (currentComponents) => {
+        try {
+            const graph = currentComponents
+                .filter((c) => c.status !== 'rejected')
+                .map((c) => ({
+                name: c.key,
+                slots: Object.entries(c.entry.$slots ?? {}).map(([slotName, slotDef]) => ({
+                    name: slotName,
+                    allowedComponents: Array.isArray(slotDef?.$allowedComponents)
+                        ? slotDef.$allowedComponents.filter((v) => typeof v === 'string')
+                        : [],
+                })),
+            }));
+            const rawCycles = findSlotCycles(graph);
+            const next = rawCycles.map((cycle) => ({
+                path: cycle.path,
+                edges: cycle.edges,
+                suggestedBreak: cycle.edges.length > 0 ? suggestCycleBreakEdge(cycle, rawCycles) : null,
+            }));
+            // Cheap structural equality via JSON.stringify — cycle count is tiny and
+            // this only fires on user actions, not on every render.
+            const prevSerialized = JSON.stringify(slotCycles);
+            const nextSerialized = JSON.stringify(next);
+            if (prevSerialized === nextSerialized)
+                return;
+            setSlotCycles(next);
+            const db = openPipelineDb();
+            try {
+                storeSlotCycles(db, extractSessionId, next);
+            }
+            finally {
+                db.close();
+            }
+            // If the new cycle set is empty, clear any lingering finalize error the
+            // [F] guard may have surfaced. Otherwise leave it alone.
+            if (next.length === 0)
+                setFinalizeError(null);
+        }
+        catch {
+            // Defensive: swallow — never let cycle detection crash the review UI.
+        }
+    };
     const handleEditSave = () => {
         const current = components[selectedIdx];
         if (!current)
@@ -245,7 +328,11 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
                 setSaveError('Invalid CDF entry: must have $type: "component" and $properties object');
                 return;
             }
-            setComponents((prev) => prev.map((c, i) => i === selectedIdx ? { ...c, entry, status: c.status === 'needs-review' ? 'accepted' : c.status } : c));
+            let updatedComponents = [];
+            setComponents((prev) => {
+                updatedComponents = prev.map((c, i) => i === selectedIdx ? { ...c, entry, status: c.status === 'needs-review' ? 'accepted' : c.status } : c);
+                return updatedComponents;
+            });
             setDraftValue('');
             setSaveError(null);
             const db = openPipelineDb();
@@ -255,6 +342,12 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
             finally {
                 db.close();
             }
+            // INTEG-4401 (Fix 3/4): recompute cycles against the freshly-edited
+            // component set so banner/badges/[c]-panel stay in sync. The FieldEditor
+            // picker filters cycle-forming candidates, but free-text edits + JSON
+            // pastes still slip through, and edits that BREAK an existing cycle
+            // won't propagate without this call.
+            recomputeCycles(updatedComponents);
             // Feature 2: re-fire the live preview now that pipeline.db reflects
             // the new state. The hook owns debounce + cred-missing short-circuit.
             livePreviewHook.trigger();
@@ -283,6 +376,31 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
             }
             return;
         }
+        // INTEG-4401: slot-cycle detail panel. Same modal-swallow rules as
+        // showRemovedPanel; q/Esc close, ↑↓ scroll.
+        if (showCyclePanel) {
+            if (input === 'c' || input === 'q' || key.escape) {
+                setShowCyclePanel(false);
+                setCyclePanelScroll(0);
+                return;
+            }
+            if (key.upArrow || input === 'k') {
+                setCyclePanelScroll((v) => Math.max(0, v - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setCyclePanelScroll((v) => v + 1);
+                return;
+            }
+            return;
+        }
+        // Open the cycle panel from sidebar-focused state when there is at
+        // least one cycle to display.
+        if (input === 'c' && sidebarFocused && slotCycles.length > 0) {
+            setShowCyclePanel(true);
+            setCyclePanelScroll(0);
+            return;
+        }
         // `d` opens the panel only when live-preview is enabled and there is at
         // least one removed component to display. Sidebar-focused only so it
         // doesn't collide with FieldEditor input.
@@ -412,6 +530,14 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
             return;
         }
         if (input === 'F') {
+            // INTEG-4401: refuse to open the finalize dialog while any slot cycle
+            // is unresolved. The push-time hard block (`assertNoSlotCycles`) would
+            // catch this downstream, but showing an inline banner here saves the
+            // operator from confirming the dialog only to hit a stderr crash.
+            if (slotCycles.length > 0) {
+                setFinalizeError('Cannot finalize — resolve slot dependency cycle(s) first (press [c] for detail)');
+                return;
+            }
             setShowFinalize(true);
             return;
         }
@@ -421,7 +547,14 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
             return;
         }
         if (input === 'r') {
-            updateStatus(selectedIdx, 'rejected');
+            // INTEG-4401 (Fix 4): rejecting removes the component from the effective
+            // manifest, so recompute cycles across the reduced graph — any cycle
+            // that routed through this component collapses. We build the "next"
+            // components array inline (mirroring updateStatus) so recomputeCycles
+            // sees the post-update graph without waiting for a render tick.
+            const next = components.map((c, i) => i === selectedIdx ? { ...c, status: 'rejected' } : c);
+            setComponents(next);
+            recomputeCycles(next);
             return;
         }
         if (input === 'A') {
@@ -476,30 +609,87 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
     const selectedJson = selected ? JSON.stringify({ [selected.key]: selected.entry }, null, 2) : '';
     const isEmpty = (c) => Object.keys(c.entry.$properties).length === 0 && Object.keys(c.entry.$slots ?? {}).length === 0;
     const emptyCount = components.filter(isEmpty).length;
+    // INTEG-4401: cycle-participant set drives sidebar `(cycle)` badges plus
+    // the banner counts. Recomputed on every render — cheap for typical N.
+    const cycleParticipantSet = new Set();
+    for (const cycle of slotCycles)
+        for (const p of cycle.path)
+            cycleParticipantSet.add(p);
+    const sidebarSuffix = (c) => {
+        if (cycleParticipantSet.has(c.key))
+            return ' (cycle)';
+        if (isEmpty(c))
+            return ' (empty)';
+        return '';
+    };
     const sidebarItems = components.map((c) => ({
         id: c.key,
-        name: isEmpty(c) ? `${c.key} (empty)` : c.key,
+        name: `${c.key}${sidebarSuffix(c)}`,
         status: c.status,
         previewAnnotation: previewAnnotations.get(c.key),
         extractionConfidence: null,
         needsReview: false,
         validationErrorCount: 0,
-        validationWarningCount: isEmpty(c) ? 1 : 0,
+        validationWarningCount: sidebarSuffix(c) !== '' ? 1 : 0,
     }));
-    // Account for the "(empty)" suffix added to zero-prop component names so the
-    // sidebar doesn't truncate it.
-    const longestName = components.reduce((m, c) => Math.max(m, c.key.length + (isEmpty(c) ? ' (empty)'.length : 0)), 0);
+    // Account for the "(cycle)" / "(empty)" suffix added to badged component
+    // names so the sidebar doesn't truncate them.
+    const longestName = components.reduce((m, c) => Math.max(m, c.key.length + sidebarSuffix(c).length), 0);
     // +5 = border (1) + status icon (1) + badge column (1) + space (1) + border (1).
     // The badge column is reserved even when no annotation is present so the
     // sidebar width doesn't jitter as live-preview annotations flip in/out.
     const sidebarWidth = Math.min(Math.max(longestName + 5, 14), 30);
     const panelWidth = Math.max(10, terminalWidth - sidebarWidth - 4);
+    // INTEG-4401: project-wide slot graph passed to FieldEditor so its
+    // $allowedComponents picker can filter out cycle-forming candidates. Built
+    // from every review entry's $slots — includes accepted, rejected, and
+    // needs-review components so the graph reflects what will actually be
+    // pushed. The FieldEditor replaces its own entry in-simulation with its
+    // live editor state, so pending edits are always reflected.
+    const projectSlotGraph = components.map((c) => ({
+        name: c.key,
+        slots: Object.entries(c.entry.$slots ?? {}).map(([slotName, slotDef]) => ({
+            name: slotName,
+            allowedComponents: Array.isArray(slotDef?.$allowedComponents)
+                ? slotDef.$allowedComponents.filter((v) => typeof v === 'string')
+                : [],
+        })),
+    }));
     const accepted = components.filter((c) => c.status === 'accepted').length;
     const rejected = components.filter((c) => c.status === 'rejected').length;
     const needsReview = components.filter((c) => c.status === 'needs-review').length;
     const propCount = selected ? Object.keys(selected.entry.$properties).length : 0;
     const slotCount = selected?.entry.$slots ? Object.keys(selected.entry.$slots).length : 0;
-    return (_jsxs(Box, { flexDirection: "column", children: [showFinalize && (_jsx(FinalizeDialog, { accepted: accepted, rejected: rejected, needsReview: needsReview, onConfirm: handleFinalizeConfirm, onCancel: () => setShowFinalize(false) })), showQuit && _jsx(QuitDialog, { hasUnsavedDrafts: false, onConfirm: onQuit, onCancel: () => setShowQuit(false) }), showRemovedPanel && !dialogOpen && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: `Removed components (${removedComponents.length})` }), _jsx(Text, { dimColor: true, children: "these will be DELETED from the target space" }), _jsx(Text, { children: " " }), removedComponents.map((rc) => (_jsx(Text, { children: `- ${rc.name}${rc.id ? `  (${rc.id})` : ''}` }, rc.id))), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "press d or Esc to close" })] })), !dialogOpen &&
+    return (_jsxs(Box, { flexDirection: "column", children: [showFinalize && (_jsx(FinalizeDialog, { accepted: accepted, rejected: rejected, needsReview: needsReview, onConfirm: handleFinalizeConfirm, onCancel: () => setShowFinalize(false) })), showQuit && _jsx(QuitDialog, { hasUnsavedDrafts: false, onConfirm: onQuit, onCancel: () => setShowQuit(false) }), showRemovedPanel && !dialogOpen && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: `Removed components (${removedComponents.length})` }), _jsx(Text, { dimColor: true, children: "these will be DELETED from the target space" }), _jsx(Text, { children: " " }), removedComponents.map((rc) => (_jsx(Text, { children: `- ${rc.name}${rc.id ? `  (${rc.id})` : ''}` }, rc.id))), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "press d or Esc to close" })] })), showCyclePanel &&
+                !dialogOpen &&
+                (() => {
+                    // Materialize the full panel body as a flat list of Text lines,
+                    // then slice by cyclePanelScroll so ↑↓ can walk arbitrarily long
+                    // content. Each cycle contributes 3-4 lines: heading, path,
+                    // suggested fix (if any), and a blank separator.
+                    const PANEL_H = 20;
+                    const lines = [];
+                    lines.push(_jsx(Text, { bold: true, color: "yellow", children: `SLOT DEPENDENCY CYCLES (${slotCycles.length})` }, "cyc-title"));
+                    lines.push(_jsx(Text, { dimColor: true, children: 'push will fail until these are resolved' }, "cyc-sub"));
+                    lines.push(_jsx(Text, { children: " " }, "cyc-space"));
+                    slotCycles.forEach((cycle, idx) => {
+                        const nodeCount = new Set(cycle.path).size;
+                        lines.push(_jsx(Text, { bold: true, children: `▸ Cycle ${idx + 1} (${nodeCount} component${nodeCount === 1 ? '' : 's'}):` }, `cyc-h-${idx}`));
+                        // Colorize slots (cyan, bracketed) distinctly from components so
+                        // the operator can visually parse the alternating structure.
+                        // Brackets on slot names ensure the distinction survives when
+                        // ANSI is stripped (logs, redirected output).
+                        const segs = formatCyclePathSegments(cycle, 16);
+                        lines.push(_jsxs(Text, { children: ['    ', segs.map((seg, si) => seg.kind === 'slot' ? (_jsx(Text, { color: "cyan", children: seg.text }, si)) : seg.kind === 'arrow' ? (_jsx(Text, { dimColor: true, children: seg.text }, si)) : (_jsx(Text, { children: seg.text }, si)))] }, `cyc-p-${idx}`));
+                        if (cycle.suggestedBreak) {
+                            const b = cycle.suggestedBreak;
+                            lines.push(_jsx(Text, { dimColor: true, children: `    Suggested fix: remove '${b.toComponent}' from ${b.fromComponent}.$slots.${b.slotName}.$allowedComponents` }, `cyc-f-${idx}`));
+                        }
+                        lines.push(_jsx(Text, { children: " " }, `cyc-s-${idx}`));
+                    });
+                    const visible = lines.slice(cyclePanelScroll, cyclePanelScroll + PANEL_H);
+                    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [visible, _jsx(Text, { dimColor: true, children: '[↑↓/j/k] scroll  [c/q/Esc] close' })] }));
+                })(), !dialogOpen &&
                 livePreview &&
                 (() => {
                     // Pilot-2026-06-23 R2: at-a-glance diff summary at the top of the
@@ -522,7 +712,10 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
                     if (!hasCounts)
                         return null;
                     return (_jsxs(Box, { children: [_jsx(Text, { children: 'Preview: ' }), _jsx(Text, { color: "green", children: `${counts.new} new` }), _jsx(Text, { children: ' · ' }), _jsx(Text, { color: "yellow", children: `${counts.changed} changed` }), _jsx(Text, { children: ' · ' }), _jsx(Text, { dimColor: true, children: `${counts.removed} removed` }), removedComponents.length > 0 && _jsx(Text, { dimColor: true, children: ' ([d] removed list)' }), _jsx(Text, { children: ' · ' }), _jsx(Text, { color: "red", bold: true, children: `${counts.breaking} breaking` })] }));
-                })(), !dialogOpen && emptyCount > 0 && (_jsx(Text, { color: "yellow", children: `⚠ ${emptyCount} component${emptyCount === 1 ? '' : 's'} had no classifiable props — review with care` })), !dialogOpen && finalizeError && _jsx(Text, { color: "red", children: `⚠ ${finalizeError}` }), !dialogOpen && (_jsxs(Box, { children: [_jsx(Sidebar, { components: sidebarItems, selectedId: selected?.key ?? null, focused: sidebarFocused, scrollOffset: sidebarScrollOffset, visibleCount: VISIBLE_COUNT, onSelect: (id) => {
+                })(), !dialogOpen && slotCycles.length > 0 && !showCyclePanel && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "yellow", children: `⚠ ${slotCycles.length} slot dependency cycle${slotCycles.length === 1 ? '' : 's'} detected — push will fail` }), slotCycles.slice(0, 3).map((cycle, idx) => {
+                        const segs = formatCyclePathSegments(cycle);
+                        return (_jsxs(Text, { color: "yellow", children: ['  Cycle: ', segs.map((seg, si) => seg.kind === 'slot' ? (_jsx(Text, { color: "cyan", children: seg.text }, si)) : seg.kind === 'arrow' ? (_jsx(Text, { dimColor: true, children: seg.text }, si)) : (_jsx(Text, { color: "yellow", children: seg.text }, si)))] }, `cyc-banner-${idx}`));
+                    }), slotCycles.length > 3 && _jsx(Text, { color: "yellow", children: `  …${slotCycles.length - 3} more` }), _jsx(Text, { dimColor: true, children: '  press [c] for detail' })] })), !dialogOpen && emptyCount > 0 && (_jsx(Text, { color: "yellow", children: `⚠ ${emptyCount} component${emptyCount === 1 ? '' : 's'} had no classifiable props — review with care` })), !dialogOpen && finalizeError && _jsx(Text, { color: "red", children: `⚠ ${finalizeError}` }), !dialogOpen && (_jsxs(Box, { children: [_jsx(Sidebar, { components: sidebarItems, selectedId: selected?.key ?? null, focused: sidebarFocused, scrollOffset: sidebarScrollOffset, visibleCount: VISIBLE_COUNT, onSelect: (id) => {
                             const idx = components.findIndex((c) => c.key === id);
                             if (idx >= 0) {
                                 setSelectedIdx(idx);
@@ -571,11 +764,12 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
                                     }, onToggleSourceExternal: () => {
                                         setPanelOpen('source');
                                         setPanelScrollOffset(() => 0);
-                                    }, onTextEntryActiveChange: setTextEntryActive }, selected.key)), saveError && _jsx(Text, { color: "red", children: '✗ ' + saveError }), _jsxs(Text, { dimColor: true, children: [sidebarFocused
+                                    }, onTextEntryActiveChange: setTextEntryActive, projectSlotGraph: projectSlotGraph, currentComponentName: selected.key }, selected.key)), saveError && _jsx(Text, { color: "red", children: '✗ ' + saveError }), _jsxs(Text, { dimColor: true, children: [sidebarFocused
                                             ? '  [a] accept  [r] reject  [A] accept all  [J] ' +
                                                 (showJson ? 'hide JSON' : 'show JSON') +
                                                 '  [F] finalize  [e/Tab] focus panel' +
                                                 (livePreview && removedComponents.length > 0 ? '  [d] removed list' : '') +
+                                                (slotCycles.length > 0 ? '  [c] cycles' : '') +
                                                 '  [q] quit'
                                             : showJson
                                                 ? '  [j/k] scroll  [Ctrl+u/d] half-page  [gg/G] top/bottom  [Tab] focus list'

package/dist/src/session/db.d.ts

@@ -3,6 +3,7 @@ import type { RawComponentDefinition } from '../types.js';
 import type { CDFComponentEntry, DTCGTokenEntry, DTCGTokenGroup } from '@contentful/experience-design-system-types';
 import type { ToolCall, TokenToolCall } from '../generate/agent-runner.js';
 import type { ComponentTypeSummary } from '@contentful/experience-design-system-types';
+import type { SlotCycle, SlotEdge } from '../analyze/cycle-detection.js';
 export type StepStatus = 'pending' | 'complete' | 'failed' | 'interrupted';
 export type CommandName = 'analyze extract' | 'analyze select' | 'generate components' | 'generate tokens' | 'generate edit' | 'apply preview' | 'apply select' | 'apply push' | 'print components' | 'print tokens' | 'import';
 export interface SessionRow {
@@ -176,6 +177,14 @@ export declare function lookupCacheByEntity(db: DatabaseSync, entityType: 'compo
 export declare function storeCache(db: DatabaseSync, inputHash: string, entityType: 'component' | 'token_set', entityId: string, sourceSessionId: string, humanEdited: boolean, promptHash?: string): void;
 export declare function storeScannedFiles(db: DatabaseSync, sessionId: string, filePaths: string[]): void;
 export declare function loadScannedFiles(db: DatabaseSync, sessionId: string): string[];
+export declare function storeSlotCycles(db: DatabaseSync, sessionId: string, cycles: Array<SlotCycle & {
+    suggestedBreak?: SlotEdge | null;
+}>): void;
+export interface StoredSlotCycle extends SlotCycle {
+    suggestedBreak: SlotEdge | null;
+}
+export declare function loadSlotCycles(db: DatabaseSync, sessionId: string): StoredSlotCycle[];
+export declare function clearSlotCycles(db: DatabaseSync, sessionId: string): void;
 export declare function markCacheHumanEdited(db: DatabaseSync, entityType: 'component' | 'token_set', entityId: string): void;
 export declare function copyComponentFromCache(db: DatabaseSync, sourceSessionId: string, targetSessionId: string, componentId: string): void;
 export declare function copyTokensFromCache(db: DatabaseSync, sourceSessionId: string, targetSessionId: string): void;

package/dist/src/session/db.js

@@ -138,6 +138,15 @@ CREATE TABLE IF NOT EXISTS scanned_files (
   PRIMARY KEY (session_id, path)
 );
 
+CREATE TABLE IF NOT EXISTS slot_cycles (
+  session_id             TEXT NOT NULL REFERENCES sessions(id) ON DELETE CASCADE,
+  cycle_index            INTEGER NOT NULL,
+  path_json              TEXT NOT NULL,
+  edges_json             TEXT NOT NULL,
+  suggested_break_json   TEXT,
+  PRIMARY KEY (session_id, cycle_index)
+);
+
 CREATE INDEX IF NOT EXISTS idx_steps_session            ON steps(session_id);
 CREATE INDEX IF NOT EXISTS idx_steps_command            ON steps(session_id, command);
 CREATE INDEX IF NOT EXISTS idx_raw_components_session   ON raw_components(session_id);
@@ -1388,6 +1397,43 @@ export function loadScannedFiles(db, sessionId) {
     const rows = db.prepare('SELECT path FROM scanned_files WHERE session_id = ? ORDER BY path').all(sessionId);
     return rows.map((r) => r.path);
 }
+// --- Slot-dependency cycle persistence (INTEG-4401) ---
+//
+// The `slot_cycles` table caches the result of running the cycle detector
+// over the extractor's slot output so the TUI can render sidebar badges,
+// a banner, and an expandable detail panel without re-running the analysis
+// on every render. Rows are session-scoped and rewritten wholesale on each
+// re-extract via `storeSlotCycles`.
+export function storeSlotCycles(db, sessionId, cycles) {
+    db.exec('BEGIN');
+    try {
+        db.prepare('DELETE FROM slot_cycles WHERE session_id = ?').run(sessionId);
+        const insert = db.prepare(`INSERT INTO slot_cycles (session_id, cycle_index, path_json, edges_json, suggested_break_json)
+       VALUES (?, ?, ?, ?, ?)`);
+        for (let i = 0; i < cycles.length; i += 1) {
+            const cycle = cycles[i];
+            insert.run(sessionId, i, JSON.stringify(cycle.path), JSON.stringify(cycle.edges), cycle.suggestedBreak ? JSON.stringify(cycle.suggestedBreak) : null);
+        }
+        db.exec('COMMIT');
+    }
+    catch (e) {
+        db.exec('ROLLBACK');
+        throw e;
+    }
+}
+export function loadSlotCycles(db, sessionId) {
+    const rows = db
+        .prepare('SELECT cycle_index, path_json, edges_json, suggested_break_json FROM slot_cycles WHERE session_id = ? ORDER BY cycle_index')
+        .all(sessionId);
+    return rows.map((r) => ({
+        path: JSON.parse(r.path_json),
+        edges: JSON.parse(r.edges_json),
+        suggestedBreak: r.suggested_break_json ? JSON.parse(r.suggested_break_json) : null,
+    }));
+}
+export function clearSlotCycles(db, sessionId) {
+    db.prepare('DELETE FROM slot_cycles WHERE session_id = ?').run(sessionId);
+}
 export function markCacheHumanEdited(db, entityType, entityId) {
     const now = new Date().toISOString();
     db.prepare(`UPDATE generation_cache SET human_edited = 1, updated_at = ? WHERE entity_type = ? AND entity_id = ?`).run(now, entityType, entityId);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.12.4-dev-build-5aa6a69.0",
+  "version": "2.12.4-dev-build-ff57340.0",
   "description": "Contentful Experiences design system import CLI",
   "license": "MIT",
   "type": "module",
@@ -37,7 +37,7 @@
     "svelte": "^5.56.4",
     "ts-morph": "^27.0.2",
     "typescript": "^5.9.3",
-    "@contentful/experience-design-system-types": "2.12.4-dev-build-5aa6a69.0"
+    "@contentful/experience-design-system-types": "2.12.4-dev-build-ff57340.0"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.3",