@contentful/experience-design-system-cli 2.12.4-dev-build-9c819d8.0 → 2.12.4-dev-build-ff57340.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.12.4-dev-build-9c819d8.0",
+  "version": "2.12.4-dev-build-ff57340.0",
   "description": "Contentful Experiences design system import CLI",
   "license": "MIT",
   "type": "module",

package/dist/src/analyze/cycle-detection.d.ts

@@ -64,5 +64,30 @@ export declare function suggestCycleBreakEdge(cycle: SlotCycle, allCycles: SlotC
  * Truncates at `maxHops` edges (default 8), inserting `…` mid-path so the
  * beginning and end remain visible. A hop is one edge; the returned string
  * for an n-edge cycle contains n+1 component names.
+ *
+ * Kept for backend/log/error use where a single string is required (see
+ * `assertNoSlotCycles` in `apply/command.ts`). The TUI banner + detail panel
+ * use `formatCyclePathSegments` instead so slot names can be visually
+ * distinguished from component names.
  */
 export declare function formatCyclePath(cycle: SlotCycle, maxHops?: number): string;
+/**
+ * A single token in the rendered cycle path — either a component name, a
+ * slot name (wrapped in brackets for monochrome legibility), or the arrow
+ * separator between them. The TUI colorizes each kind independently.
+ *
+ * Slots are rendered as `[slotName]` so the visual distinction survives when
+ * ANSI colors are stripped (log files, redirection, dumb terminals).
+ */
+export interface CyclePathSegment {
+    kind: 'component' | 'slot' | 'arrow';
+    text: string;
+}
+/**
+ * Segment-oriented counterpart to `formatCyclePath`. Preserves the same
+ * 8-hop truncation semantics but returns each token classified so the
+ * renderer can color slots (cyan) and components (default) independently.
+ * The truncation marker `…` is emitted as a bare component segment because
+ * it stands in for one or more component nodes.
+ */
+export declare function formatCyclePathSegments(cycle: SlotCycle, maxHops?: number): CyclePathSegment[];

package/dist/src/analyze/cycle-detection.js

@@ -260,6 +260,11 @@ export function suggestCycleBreakEdge(cycle, allCycles) {
  * Truncates at `maxHops` edges (default 8), inserting `…` mid-path so the
  * beginning and end remain visible. A hop is one edge; the returned string
  * for an n-edge cycle contains n+1 component names.
+ *
+ * Kept for backend/log/error use where a single string is required (see
+ * `assertNoSlotCycles` in `apply/command.ts`). The TUI banner + detail panel
+ * use `formatCyclePathSegments` instead so slot names can be visually
+ * distinguished from component names.
  */
 export function formatCyclePath(cycle, maxHops = 8) {
     const arrow = ' → ';
@@ -283,3 +288,39 @@ export function formatCyclePath(cycle, maxHops = 8) {
     const tail = parts[parts.length - 1];
     return `${head}${arrow}…${arrow}${tail}`;
 }
+/**
+ * Segment-oriented counterpart to `formatCyclePath`. Preserves the same
+ * 8-hop truncation semantics but returns each token classified so the
+ * renderer can color slots (cyan) and components (default) independently.
+ * The truncation marker `…` is emitted as a bare component segment because
+ * it stands in for one or more component nodes.
+ */
+export function formatCyclePathSegments(cycle, maxHops = 8) {
+    // Interleaved [component, slot, component, slot, ..., component] token list
+    // matching `formatCyclePath`'s parts array, but classified.
+    const raw = [];
+    for (let i = 0; i < cycle.edges.length; i += 1) {
+        raw.push({ kind: 'component', text: cycle.path[i] });
+        raw.push({ kind: 'slot', text: `[${cycle.edges[i].slotName}]` });
+    }
+    raw.push({ kind: 'component', text: cycle.path[cycle.path.length - 1] });
+    const withArrows = (segs) => {
+        const out = [];
+        for (let i = 0; i < segs.length; i += 1) {
+            if (i > 0)
+                out.push({ kind: 'arrow', text: ' → ' });
+            out.push(segs[i]);
+        }
+        return out;
+    };
+    if (cycle.edges.length <= maxHops) {
+        return withArrows(raw);
+    }
+    // Match `formatCyclePath` truncation: keep the first (maxHops-1)*2 tokens
+    // plus a "…" placeholder plus the trailing component.
+    const keepHops = Math.max(1, maxHops - 1);
+    const keepTokens = keepHops * 2;
+    const head = raw.slice(0, keepTokens);
+    const tail = raw[raw.length - 1];
+    return withArrows([...head, { kind: 'component', text: '…' }, tail]);
+}

package/dist/src/analyze/select/tui/components/FieldEditor.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { findSlotCycles, type ComponentSlotInfo } from '../../../cycle-detection.js';
 /** Per-prop / per-component metadata captured by the extractor + generate phase.
  * Optional; when omitted, the FieldEditor renders without rationale/source
  * affordances (backwards-compatible with mounts that pre-date Feature 1). */
@@ -63,6 +64,28 @@ type FieldEditorProps = {
      * description editors, string default editors, and value-list text entry.
      */
     onTextEntryActiveChange?: (active: boolean) => void;
+    /**
+     * INTEG-4401: project-wide slot graph. When supplied, the
+     * $allowedComponents add-mode shows a cycle-filtered picker. Optional.
+     */
+    projectSlotGraph?: ComponentSlotInfo[];
+    /**
+     * INTEG-4401: name of the component being edited. Self-loop guard +
+     * self-entry replacement in the cycle simulation.
+     */
+    currentComponentName?: string;
 };
-export declare function FieldEditor({ value, width, height, active, onChange, onSave, onDiscard, onExit, metadata, onTogglePropRationale, onToggleComponentRationale, onToggleSourceExternal, onTextEntryActiveChange, }: FieldEditorProps): React.ReactElement;
+/** Simulate adding a candidate to a slot; replaces self-entry with live edits. */
+export declare function simulateGraphWithCandidate(projectSlotGraph: ComponentSlotInfo[], selfName: string, currentSlots: {
+    name: string;
+    allowedComponents: string[];
+}[], targetSlotName: string, candidate: string): ComponentSlotInfo[];
+/** True iff `next` contains a cycle whose canonical edge set is absent in `before`. */
+export declare function introducesNewCycle(before: ReturnType<typeof findSlotCycles>, next: ReturnType<typeof findSlotCycles>): boolean;
+/** Candidate names that can be added to a slot without creating a new cycle. */
+export declare function computeAllowedComponentCandidates(projectSlotGraph: ComponentSlotInfo[], selfName: string, currentSlots: {
+    name: string;
+    allowedComponents: string[];
+}[], targetSlotName: string): string[];
+export declare function FieldEditor({ value, width, height, active, onChange, onSave, onDiscard, onExit, metadata, onTogglePropRationale, onToggleComponentRationale, onToggleSourceExternal, onTextEntryActiveChange, projectSlotGraph, currentComponentName, }: FieldEditorProps): React.ReactElement;
 export {};

package/dist/src/analyze/select/tui/components/FieldEditor.js

@@ -4,6 +4,7 @@ import { Box, Text } from 'ink';
 import { CDF_PROPERTY_TYPES, CDF_PROPERTY_CATEGORIES, DESIGN_TOKEN_TYPES, } from '@contentful/experience-design-system-types';
 import { useImmediateInput } from '../hooks/useImmediateInput.js';
 import { computeNextScrollOffset } from '../hooks/scroll-offset.js';
+import { findSlotCycles } from '../../../cycle-detection.js';
 // Section indices for top-level navigation
 // 0 = component $description row
 // 1 = $properties header (then props[0..n-1])
@@ -201,18 +202,34 @@ function PropRow({ prop, selected, activeField, textCursor, valueCursor, cursorV
                         return (_jsx(Box, { gap: 1, paddingLeft: 2, children: _jsx(Text, { color: isActiveCursor ? 'cyan' : 'white', children: isActiveCursor ? `▶ ${v}` : `  ${v}` }) }, i));
                     }), editingValue?.mode === 'add' && (_jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: "cyan", children: '+ ' }), _jsx(Text, { children: valueText }), _jsx(Text, { inverse: cursorVisible, children: " " })] }))] }))] }));
 }
-function SlotRow({ slot, selected, activeField, textCursor, valueCursor, cursorVisible, editingValue, valueText, width, }) {
+function SlotRow({ slot, selected, activeField, textCursor, valueCursor, cursorVisible, editingValue, valueText, width, pickerCandidates, pickerCursor, }) {
     const cursor = cursorVisible ? '█' : ' ';
     const bg = selected ? 'blue' : undefined;
     const nameDisplay = slot.name.length > 14 ? slot.name.slice(0, 13) + '…' : slot.name.padEnd(14);
-    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsxs(Box, { gap: 1, children: [_jsxs(Text, { color: selected ? 'white' : 'cyan', bold: selected, backgroundColor: bg, children: [' ', nameDisplay, ' '] }), _jsx(Text, { dimColor: !selected, children: "req:" }), activeField === 'required' ? (_jsx(Toggle, { value: slot.required, active: true })) : (_jsx(Toggle, { value: slot.required, active: false }))] }), selected && (_jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "allowed:" }), activeField === 'allowedComponents' && (_jsx(Text, { dimColor: true, children: '  [a]dd  [e]dit  [r]emove  [↑↓] navigate  [K/J] reorder' }))] }), slot.allowedComponents.length === 0 && !editingValue && (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, children: activeField === 'allowedComponents' ? '(any — press [a] to add)' : '(any)' }) })), slot.allowedComponents.map((v, i) => {
+    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsxs(Box, { gap: 1, children: [_jsxs(Text, { color: selected ? 'white' : 'cyan', bold: selected, backgroundColor: bg, children: [' ', nameDisplay, ' '] }), _jsx(Text, { dimColor: !selected, children: "req:" }), activeField === 'required' ? (_jsx(Toggle, { value: slot.required, active: true })) : (_jsx(Toggle, { value: slot.required, active: false }))] }), !selected && (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { dimColor: true, children: "allowed:" }), slot.allowedComponents.length === 0 ? (_jsx(Text, { dimColor: true, children: "(any)" })) : (_jsx(Text, { color: "cyan", children: slot.allowedComponents.join(', ') }))] })), selected && (_jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "allowed:" }), activeField === 'allowedComponents' && (_jsx(Text, { dimColor: true, children: '  [a]dd  [e]dit  [r]emove  [↑↓] navigate  [K/J] reorder' }))] }), slot.allowedComponents.length === 0 && !editingValue && (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, children: activeField === 'allowedComponents' ? '(any — press [a] to add)' : '(any)' }) })), slot.allowedComponents.map((v, i) => {
                         const isActiveCursor = activeField === 'allowedComponents' && valueCursor === i;
                         const isBeingEdited = editingValue?.mode === 'edit' && editingValue.index === i;
                         if (isBeingEdited) {
                             return (_jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: "cyan", children: '✎ ' }), _jsx(Text, { children: valueText }), _jsx(Text, { inverse: cursorVisible, children: " " })] }, i));
                         }
                         return (_jsx(Box, { gap: 1, paddingLeft: 2, children: _jsx(Text, { color: isActiveCursor ? 'cyan' : 'white', children: isActiveCursor ? `▶ ${v}` : `  ${v}` }) }, i));
-                    }), editingValue?.mode === 'add' && activeField === 'allowedComponents' && (_jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: "cyan", children: '+ ' }), _jsx(Text, { children: valueText }), _jsx(Text, { inverse: cursorVisible, children: " " })] }))] })), selected && activeField === 'description' && (_jsxs(Box, { paddingLeft: 2, flexDirection: "row", children: [_jsx(Text, { dimColor: true, children: "desc:" }), _jsxs(Box, { flexGrow: 1, borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsx(Text, { children: slot.description.slice(0, textCursor) }), _jsx(Text, { inverse: cursorVisible, children: slot.description[textCursor] ?? cursor }), _jsx(Text, { children: slot.description.slice(textCursor + 1) })] })] })), selected && activeField !== 'description' && (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { dimColor: true, children: "desc:" }), _jsx(Text, { color: "green", children: slot.description || '—' })] }))] }));
+                    }), editingValue?.mode === 'add' && activeField === 'allowedComponents' && (_jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: "cyan", children: '+ ' }), _jsx(Text, { children: valueText }), _jsx(Text, { inverse: cursorVisible, children: " " })] })), editingValue?.mode === 'add' && activeField === 'allowedComponents' && pickerCandidates !== null && (_jsx(Box, { paddingLeft: 2, flexDirection: "column", children: pickerCandidates.length === 0 ? (_jsx(Text, { dimColor: true, children: '(no valid components to add — all remaining candidates would create cycles)' })) : ((() => {
+                            const filtered = valueText.length === 0
+                                ? pickerCandidates
+                                : pickerCandidates.filter((n) => n.toLowerCase().includes(valueText.toLowerCase()));
+                            if (filtered.length === 0) {
+                                return _jsx(Text, { dimColor: true, children: '(no candidates match — Enter to add as free text)' });
+                            }
+                            const cursor = pickerCursor % filtered.length;
+                            const MAX_VISIBLE = 5;
+                            const start = Math.max(0, Math.min(filtered.length - MAX_VISIBLE, cursor - 2));
+                            const slice = filtered.slice(start, start + MAX_VISIBLE);
+                            return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: '  candidates (↑↓ cycle, Enter to add):' }), slice.map((name, i) => {
+                                        const absIdx = start + i;
+                                        const isCursor = absIdx === cursor;
+                                        return (_jsx(Text, { color: isCursor ? 'cyan' : undefined, dimColor: !isCursor, children: isCursor ? `  ▶ ${name}` : `    ${name}` }, name));
+                                    })] }));
+                        })()) }))] })), selected && activeField === 'description' && (_jsxs(Box, { paddingLeft: 2, flexDirection: "row", children: [_jsx(Text, { dimColor: true, children: "desc:" }), _jsxs(Box, { flexGrow: 1, borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsx(Text, { children: slot.description.slice(0, textCursor) }), _jsx(Text, { inverse: cursorVisible, children: slot.description[textCursor] ?? cursor }), _jsx(Text, { children: slot.description.slice(textCursor + 1) })] })] })), selected && activeField !== 'description' && (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { dimColor: true, children: "desc:" }), _jsx(Text, { color: "green", children: slot.description || '—' })] }))] }));
 }
 // Field order is intentional: description is LAST so it's the "edge" of the
 // field cycle. The user reaches description by walking through type → category
@@ -238,8 +255,59 @@ function propFields(prop) {
 // components is a list-typed field that swallows j/k similarly to enum $values
 // — placing it before description preserves description-as-last.
 const SLOT_FIELDS = ['required', 'allowedComponents', 'description'];
+// ── INTEG-4401: cycle-aware $allowedComponents picker helpers ─────────────
+/** Simulate adding a candidate to a slot; replaces self-entry with live edits. */
+export function simulateGraphWithCandidate(projectSlotGraph, selfName, currentSlots, targetSlotName, candidate) {
+    const selfEntry = {
+        name: selfName,
+        slots: currentSlots.map((s) => ({
+            name: s.name,
+            allowedComponents: s.name === targetSlotName ? [...s.allowedComponents, candidate] : [...s.allowedComponents],
+        })),
+    };
+    const withoutSelf = projectSlotGraph.filter((c) => c.name !== selfName);
+    return [...withoutSelf, selfEntry];
+}
+/** True iff `next` contains a cycle whose canonical edge set is absent in `before`. */
+export function introducesNewCycle(before, next) {
+    const key = (edges) => {
+        if (edges.length === 0)
+            return '';
+        const encoded = edges.map((e) => `${e.fromComponent}|${e.slotName}|${e.toComponent}`);
+        let minIdx = 0;
+        for (let i = 1; i < encoded.length; i += 1)
+            if (encoded[i] < encoded[minIdx])
+                minIdx = i;
+        return [...encoded.slice(minIdx), ...encoded.slice(0, minIdx)].join(';');
+    };
+    const beforeSet = new Set(before.map((c) => key(c.edges)));
+    for (const cycle of next)
+        if (!beforeSet.has(key(cycle.edges)))
+            return true;
+    return false;
+}
+/** Candidate names that can be added to a slot without creating a new cycle. */
+export function computeAllowedComponentCandidates(projectSlotGraph, selfName, currentSlots, targetSlotName) {
+    const targetSlot = currentSlots.find((s) => s.name === targetSlotName);
+    const alreadyAdded = new Set(targetSlot?.allowedComponents ?? []);
+    const universe = new Set();
+    for (const c of projectSlotGraph)
+        universe.add(c.name);
+    universe.delete(selfName);
+    for (const added of alreadyAdded)
+        universe.delete(added);
+    const baseline = findSlotCycles(simulateGraphWithCandidate(projectSlotGraph, selfName, currentSlots, '', ''));
+    const safe = [];
+    for (const candidate of universe) {
+        const nextCycles = findSlotCycles(simulateGraphWithCandidate(projectSlotGraph, selfName, currentSlots, targetSlotName, candidate));
+        if (!introducesNewCycle(baseline, nextCycles))
+            safe.push(candidate);
+    }
+    safe.sort((a, b) => a.localeCompare(b));
+    return safe;
+}
 // ── Main component ────────────────────────────────────────────────────────────
-export function FieldEditor({ value, width, height, active = true, onChange, onSave, onDiscard, onExit, metadata, onTogglePropRationale, onToggleComponentRationale, onToggleSourceExternal, onTextEntryActiveChange, }) {
+export function FieldEditor({ value, width, height, active = true, onChange, onSave, onDiscard, onExit, metadata, onTogglePropRationale, onToggleComponentRationale, onToggleSourceExternal, onTextEntryActiveChange, projectSlotGraph, currentComponentName, }) {
     const { state: initialState, error: parseError } = parseToState(value);
     const [editorState, setEditorState] = useState(initialState);
     const [parseErr] = useState(parseError);
@@ -291,6 +359,8 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
     // mode='add' — append on Enter; mode='edit' — replace at index on Enter.
     const [editingValue, setEditingValue] = useState(null);
     const [valueText, setValueText] = useState('');
+    // INTEG-4401: picker cursor for the cycle-filtered $allowedComponents list.
+    const [pickerCursor, setPickerCursor] = useState(0);
     const [validationError, setValidationError] = useState(null);
     const [cursorVisible] = useState(true);
     // Feature 1: source-view panel toggle. Opens with `s`, closes with `s` or Esc.
@@ -359,11 +429,57 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
         // same add/edit/remove/reorder list shape.
         const isPropValuesEntry = editingValue && currentProp && activeField === 'values' && !inSlots;
         const isSlotAllowedEntry = editingValue && currentSlot && activeField === 'allowedComponents' && inSlots;
+        // INTEG-4401: cycle-filtered candidates for slot-add.
+        const slotAddCandidates = isSlotAllowedEntry && editingValue?.mode === 'add' && projectSlotGraph && currentSlot && currentComponentName
+            ? computeAllowedComponentCandidates(projectSlotGraph, currentComponentName, slots, currentSlot.name)
+            : null;
+        const filteredCandidates = slotAddCandidates
+            ? valueText.length === 0
+                ? slotAddCandidates
+                : slotAddCandidates.filter((n) => n.toLowerCase().includes(valueText.toLowerCase()))
+            : null;
         if (isPropValuesEntry || isSlotAllowedEntry) {
             const vals = isPropValuesEntry ? currentProp.values : currentSlot.allowedComponents;
+            const pickerActive = isSlotAllowedEntry && editingValue?.mode === 'add' && slotAddCandidates !== null;
+            if (pickerActive && (key.upArrow || key.downArrow)) {
+                const len = filteredCandidates.length;
+                if (len > 0) {
+                    setPickerCursor((c) => (key.upArrow ? (c - 1 + len) % len : (c + 1) % len));
+                }
+                return;
+            }
             if (key.return) {
-                const trimmed = valueText.trim();
+                let chosen = null;
+                if (pickerActive && filteredCandidates && filteredCandidates.length > 0) {
+                    if (valueText.trim() === '') {
+                        chosen = filteredCandidates[pickerCursor % filteredCandidates.length] ?? null;
+                    }
+                    else {
+                        const exact = filteredCandidates.find((n) => n === valueText.trim());
+                        if (exact)
+                            chosen = exact;
+                    }
+                }
+                const trimmed = chosen ?? valueText.trim();
                 if (trimmed) {
+                    // Cycle-aware free-text validation. Picker path is safe by construction.
+                    if (isSlotAllowedEntry &&
+                        editingValue?.mode === 'add' &&
+                        projectSlotGraph &&
+                        currentSlot &&
+                        currentComponentName &&
+                        chosen === null) {
+                        if (trimmed === currentComponentName) {
+                            setValidationError(`"${trimmed}" cannot be added to its own slot (self-loop).`);
+                            return;
+                        }
+                        const baseline = findSlotCycles(simulateGraphWithCandidate(projectSlotGraph, currentComponentName, slots, '', ''));
+                        const next = findSlotCycles(simulateGraphWithCandidate(projectSlotGraph, currentComponentName, slots, currentSlot.name, trimmed));
+                        if (introducesNewCycle(baseline, next)) {
+                            setValidationError(`Adding "${trimmed}" to slot "${currentSlot.name}" would create a slot-dependency cycle. Choose a different component.`);
+                            return;
+                        }
+                    }
                     let nextVals;
                     let cursorAfter;
                     if (editingValue.mode === 'add') {
@@ -384,22 +500,28 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                         commit({ ...editorState, slots: nextSlots });
                     }
                     setValueCursor(cursorAfter);
+                    setValidationError(null);
                 }
                 setEditingValue(null);
                 setValueText('');
+                setPickerCursor(0);
                 return;
             }
             if (key.escape) {
                 setEditingValue(null);
                 setValueText('');
+                setPickerCursor(0);
+                setValidationError(null);
                 return;
             }
             if (key.backspace) {
                 setValueText((t) => t.slice(0, -1));
+                setPickerCursor(0);
                 return;
             }
             if (input && input.length === 1 && !key.ctrl && !key.meta) {
                 setValueText((t) => t + input);
+                setPickerCursor(0);
                 return;
             }
             return;
@@ -985,7 +1107,15 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                     // slot row
                     const s = slots[row.idx];
                     const isSelected = inSlots && row.idx === slotIdx;
-                    return (_jsx(SlotRow, { slot: s, selected: isSelected, activeField: isSelected && focusLevel === 'field' ? activeField : null, textCursor: textCursor, valueCursor: valueCursor, cursorVisible: cursorVisible, editingValue: isSelected ? editingValue : null, valueText: isSelected ? valueText : '', width: innerWidth }, `slot-${row.idx}`));
+                    // INTEG-4401: compute picker candidates for selected slot in add-mode.
+                    const slotPickerCandidates = isSelected &&
+                        editingValue?.mode === 'add' &&
+                        activeField === 'allowedComponents' &&
+                        projectSlotGraph &&
+                        currentComponentName
+                        ? computeAllowedComponentCandidates(projectSlotGraph, currentComponentName, slots, s.name)
+                        : null;
+                    return (_jsx(SlotRow, { slot: s, selected: isSelected, activeField: isSelected && focusLevel === 'field' ? activeField : null, textCursor: textCursor, valueCursor: valueCursor, cursorVisible: cursorVisible, editingValue: isSelected ? editingValue : null, valueText: isSelected ? valueText : '', width: innerWidth, pickerCandidates: slotPickerCandidates, pickerCursor: pickerCursor }, `slot-${row.idx}`));
                 }) }), sourceOpen &&
                 !onToggleSourceExternal &&
                 (() => {

package/dist/src/apply/command.d.ts

@@ -1,10 +1,39 @@
 import type { Command } from 'commander';
 import type { CDFComponentEntry, DTCGTokenEntry } from '@contentful/experience-design-system-types';
+import { findSlotCycles } from '../analyze/cycle-detection.js';
 import type { ServerPreviewResponse } from '@contentful/experience-design-system-types';
 export declare function readTokensFromPath(flag: string, p: string): Promise<DTCGTokenEntry[]>;
+/**
+ * Pure cycle detection — returns [] when the graph is acyclic. Callers own
+ * how to react (CLI standalone uses `assertNoSlotCycles` which exits 1; the
+ * wizard uses `detectSlotCycles` directly to route to an in-TUI error step
+ * without ever POSTing to EDSI).
+ */
+export declare function detectSlotCycles(components: Array<{
+    key: string;
+    entry: CDFComponentEntry;
+}>): ReturnType<typeof findSlotCycles>;
+/**
+ * Build a stderr-style message block for a set of cycles. Extracted so the
+ * wizard can render the same text in an in-TUI error panel and any future
+ * headless surface can log identical output.
+ */
+export declare function formatSlotCycleReport(cycles: ReturnType<typeof findSlotCycles>): string[];
 export declare function assertNoSlotCycles(components: Array<{
     key: string;
     entry: CDFComponentEntry;
 }>): void;
+/**
+ * Reconstruct the `{key, entry}` shape from a built `ManifestPayload`. The
+ * wizard's push path holds a serialized manifest rather than the underlying
+ * CDF records, so we unwrap it here to feed `detectSlotCycles`. Skips the
+ * `$schema` sentinel key. Safe on undefined/empty manifests (returns []).
+ */
+export declare function extractComponentsFromManifest(manifest: {
+    componentsManifest?: Record<string, unknown>;
+} | null | undefined): Array<{
+    key: string;
+    entry: CDFComponentEntry;
+}>;
 export declare function hasBreakingChangesWithImpact(preview: ServerPreviewResponse): boolean;
 export declare function registerApplyCommand(program: Command): void;

package/dist/src/apply/command.js

@@ -177,10 +177,17 @@ async function resolveSharedInputs(opts) {
 // by then the request has already been serialized, transported, and partially
 // applied — leading to confusing partial-failure states. Detecting the same
 // violation locally lets us fail fast with a clear message and zero
-// side-effects. Called from the `apply push` and `apply select` flows only;
+// side-effects. Called from the `apply push` and `apply select` flows AND
+// from the wizard's `experiences import` push path (via `detectSlotCycles`).
 // `apply preview` is read-only and still runs (its diff is used to warn but
 // not to block).
-export function assertNoSlotCycles(components) {
+/**
+ * Pure cycle detection — returns [] when the graph is acyclic. Callers own
+ * how to react (CLI standalone uses `assertNoSlotCycles` which exits 1; the
+ * wizard uses `detectSlotCycles` directly to route to an in-TUI error step
+ * without ever POSTing to EDSI).
+ */
+export function detectSlotCycles(components) {
     const cycleInput = components.map(({ key, entry }) => ({
         name: key,
         slots: Object.entries(entry.$slots ?? {}).map(([slotName, slotDef]) => ({
@@ -188,9 +195,14 @@ export function assertNoSlotCycles(components) {
             allowedComponents: slotDef.$allowedComponents ?? [],
         })),
     }));
-    const cycles = findSlotCycles(cycleInput);
-    if (cycles.length === 0)
-        return;
+    return findSlotCycles(cycleInput);
+}
+/**
+ * Build a stderr-style message block for a set of cycles. Extracted so the
+ * wizard can render the same text in an in-TUI error panel and any future
+ * headless surface can log identical output.
+ */
+export function formatSlotCycleReport(cycles) {
     const lines = [];
     lines.push(`Error: manifest:components/slot-cycles — ${cycles.length} slot dependency cycle(s) detected. Push refused.`);
     for (let i = 0; i < cycles.length; i += 1) {
@@ -199,9 +211,35 @@ export function assertNoSlotCycles(components) {
         const suggested = suggestCycleBreakEdge(cycle, cycles);
         lines.push(`    Fix: remove '${suggested.toComponent}' from ${suggested.fromComponent}.$slots.${suggested.slotName}.$allowedComponents`);
     }
-    process.stderr.write(lines.join('\n') + '\n');
+    return lines;
+}
+export function assertNoSlotCycles(components) {
+    const cycles = detectSlotCycles(components);
+    if (cycles.length === 0)
+        return;
+    process.stderr.write(formatSlotCycleReport(cycles).join('\n') + '\n');
     process.exit(1);
 }
+/**
+ * Reconstruct the `{key, entry}` shape from a built `ManifestPayload`. The
+ * wizard's push path holds a serialized manifest rather than the underlying
+ * CDF records, so we unwrap it here to feed `detectSlotCycles`. Skips the
+ * `$schema` sentinel key. Safe on undefined/empty manifests (returns []).
+ */
+export function extractComponentsFromManifest(manifest) {
+    const componentsManifest = manifest?.componentsManifest;
+    if (!componentsManifest)
+        return [];
+    const out = [];
+    for (const [key, value] of Object.entries(componentsManifest)) {
+        if (key === '$schema')
+            continue;
+        if (!value || typeof value !== 'object')
+            continue;
+        out.push({ key, entry: value });
+    }
+    return out;
+}
 // --- Output helpers ---
 export function hasBreakingChangesWithImpact(preview) {
     const allChanged = [...preview.components.changed, ...preview.tokens.changed];

package/dist/src/apply/error-parser.d.ts

@@ -0,0 +1,43 @@
+/**
+ * INTEG-4401 Fix C — parse EDSI failure bodies into a structured shape the
+ * TUI can render without dumping timestamps + trace ids at operators.
+ *
+ * EDSI failure bodies come in three broad shapes today:
+ *
+ *   1. Plain JSON error:
+ *      `{"code":"TopoSortCycleError","message":"...","cycle":["CycleA","CycleB"]}`
+ *
+ *   2. Wrapper JSON with `details`:
+ *      `{"sys":{"type":"Error"},"message":"...","details":{"code":"...","cycle":[...]}}`
+ *
+ *   3. Lambda log-line spill (the response body is the CloudWatch log
+ *      formatting the worker's uncaught exception):
+ *      `2026-07-07T22:26:26.479Z\t<request-id>\tERROR\t[dd.trace_id=... dd.span_id=...] <message> {\n  operationId: '...',\n  code: 'TopoSortCycleError',\n  cycle: [ 'CycleA', 'CycleB' ]\n}`
+ *
+ * We parse each shape best-effort and fall back to a cleaned raw message so
+ * the ErrorStep never has to show the operator a timestamp + trace id.
+ */
+export interface ParsedEdsiError {
+    /** Server-side error code, if we could extract one. */
+    code: string | null;
+    /** Human-readable message, stripped of log/trace decoration. */
+    message: string;
+    /** Cycle participants, when `code === 'TopoSortCycleError'`. */
+    cycle: string[] | null;
+    /** True when the message survived cleaning as-is (no parseable structure). */
+    raw: boolean;
+}
+/**
+ * Strip the Lambda/CloudWatch log-line decoration from the head of a body so
+ * the operator-facing message reads as an error sentence, not a log entry.
+ */
+export declare function stripLambdaLogPrefix(body: string): string;
+export declare function parseEdsiError(rawInput: string | undefined | null): ParsedEdsiError;
+/**
+ * Render a parsed error into a short multi-line block for the ErrorStep.
+ * Callers can pass `verbose: true` to include the raw body underneath.
+ */
+export declare function formatParsedEdsiError(parsed: ParsedEdsiError, opts?: {
+    verbose?: boolean;
+    raw?: string;
+}): string;

package/dist/src/apply/error-parser.js

@@ -0,0 +1,163 @@
+/**
+ * INTEG-4401 Fix C — parse EDSI failure bodies into a structured shape the
+ * TUI can render without dumping timestamps + trace ids at operators.
+ *
+ * EDSI failure bodies come in three broad shapes today:
+ *
+ *   1. Plain JSON error:
+ *      `{"code":"TopoSortCycleError","message":"...","cycle":["CycleA","CycleB"]}`
+ *
+ *   2. Wrapper JSON with `details`:
+ *      `{"sys":{"type":"Error"},"message":"...","details":{"code":"...","cycle":[...]}}`
+ *
+ *   3. Lambda log-line spill (the response body is the CloudWatch log
+ *      formatting the worker's uncaught exception):
+ *      `2026-07-07T22:26:26.479Z\t<request-id>\tERROR\t[dd.trace_id=... dd.span_id=...] <message> {\n  operationId: '...',\n  code: 'TopoSortCycleError',\n  cycle: [ 'CycleA', 'CycleB' ]\n}`
+ *
+ * We parse each shape best-effort and fall back to a cleaned raw message so
+ * the ErrorStep never has to show the operator a timestamp + trace id.
+ */
+const LAMBDA_LOG_PREFIX_RE = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z\s+[0-9a-f-]+\s+ERROR\s+(?:\[dd\.[^\]]*\]\s*)?/;
+const DD_TAG_RE = /\[dd\.(?:trace_id|span_id)=[^\]]*\]\s*/g;
+/**
+ * Strip the Lambda/CloudWatch log-line decoration from the head of a body so
+ * the operator-facing message reads as an error sentence, not a log entry.
+ */
+export function stripLambdaLogPrefix(body) {
+    let out = body.replace(LAMBDA_LOG_PREFIX_RE, '');
+    out = out.replace(DD_TAG_RE, '');
+    return out.trim();
+}
+/**
+ * Extract a JS-object-literal tail like `{ operationId: '...', code: '...', cycle: [ 'A', 'B' ] }`
+ * that Lambda-spilled errors trail with. Returns `null` if no such structure
+ * is present or the fields we care about can't be recovered.
+ */
+function parseObjectLiteralTail(body) {
+    const braceStart = body.lastIndexOf('{');
+    if (braceStart === -1)
+        return null;
+    const tail = body.slice(braceStart);
+    const codeMatch = tail.match(/code:\s*['"]([^'"]+)['"]/);
+    const cycleMatch = tail.match(/cycle:\s*\[\s*([^\]]*)\s*\]/);
+    if (!codeMatch && !cycleMatch)
+        return null;
+    const code = codeMatch ? codeMatch[1] : null;
+    let cycle = null;
+    if (cycleMatch) {
+        cycle = cycleMatch[1]
+            .split(',')
+            .map((s) => s.trim().replace(/^['"]|['"]$/g, ''))
+            .filter((s) => s.length > 0);
+        if (cycle.length === 0)
+            cycle = null;
+    }
+    return { code, cycle };
+}
+/**
+ * Best-effort JSON parse walking one level deep into `details`. Fields we
+ * accept anywhere in the top-level or `details` object: `code`, `message`,
+ * `cycle`. Returns `null` when the input isn't JSON.
+ */
+function parseJsonBody(body) {
+    let parsed;
+    try {
+        parsed = JSON.parse(body);
+    }
+    catch {
+        return null;
+    }
+    if (!parsed || typeof parsed !== 'object')
+        return null;
+    const p = parsed;
+    const details = (p.details && typeof p.details === 'object' ? p.details : {});
+    const pick = (k) => (p[k] !== undefined ? p[k] : details[k]);
+    const codeRaw = pick('code');
+    const messageRaw = pick('message');
+    const cycleRaw = pick('cycle');
+    const out = {};
+    if (typeof codeRaw === 'string')
+        out.code = codeRaw;
+    if (typeof messageRaw === 'string')
+        out.message = messageRaw;
+    if (Array.isArray(cycleRaw)) {
+        const strs = cycleRaw.filter((x) => typeof x === 'string');
+        if (strs.length > 0)
+            out.cycle = strs;
+    }
+    return out;
+}
+/**
+ * Parse an EDSI error body (the raw response body, or an `ApiError.message`
+ * that has the body appended). Always returns a value — the fallback is the
+ * cleaned raw message with `code: null`.
+ */
+// ApiError.message shape: `${phasePrefix}\n${body}` where phasePrefix looks
+// like `apply failed: 400`, `preview failed: 422`, `poll failed: 500`. We
+// only strip the prefix line when the first line matches this shape —
+// otherwise a raw body that happens to contain a newline (e.g. a Lambda log
+// spill with a multi-line object literal) gets truncated mid-structure.
+const API_ERROR_PREFIX_RE = /^(?:apply|preview|poll) failed: \d+$/;
+export function parseEdsiError(rawInput) {
+    if (!rawInput)
+        return { code: null, message: '', cycle: null, raw: true };
+    const nlIndex = rawInput.indexOf('\n');
+    let body = rawInput;
+    let prefix = '';
+    if (nlIndex !== -1) {
+        const firstLine = rawInput.slice(0, nlIndex);
+        if (API_ERROR_PREFIX_RE.test(firstLine)) {
+            prefix = firstLine;
+            body = rawInput.slice(nlIndex + 1);
+        }
+    }
+    const cleaned = stripLambdaLogPrefix(body);
+    const json = parseJsonBody(cleaned) ?? parseJsonBody(body);
+    if (json && (json.code || json.message || json.cycle)) {
+        return {
+            code: json.code ?? null,
+            message: json.message ?? (cleaned || prefix),
+            cycle: json.cycle ?? null,
+            raw: false,
+        };
+    }
+    const literal = parseObjectLiteralTail(cleaned);
+    if (literal && (literal.code || literal.cycle)) {
+        // Grab the human-readable head — text before the trailing `{`. This is
+        // the sentence part of a Lambda log-line spill (e.g. "Apply operation
+        // <id> rejected: ComponentType slot dependency cycle detected among:
+        // CycleA, CycleB. Break the cycle by...").
+        const braceStart = cleaned.lastIndexOf('{');
+        const head = braceStart === -1 ? cleaned : cleaned.slice(0, braceStart).trim();
+        return {
+            code: literal.code ?? null,
+            message: head || cleaned,
+            cycle: literal.cycle ?? null,
+            raw: false,
+        };
+    }
+    return { code: null, message: cleaned || prefix || rawInput, cycle: null, raw: true };
+}
+/**
+ * Render a parsed error into a short multi-line block for the ErrorStep.
+ * Callers can pass `verbose: true` to include the raw body underneath.
+ */
+export function formatParsedEdsiError(parsed, opts = {}) {
+    const lines = [];
+    if (parsed.code) {
+        lines.push(`[${parsed.code}]`);
+    }
+    if (parsed.message) {
+        lines.push(parsed.message);
+    }
+    if (parsed.cycle && parsed.cycle.length > 0) {
+        lines.push(`Cycle: ${parsed.cycle.join(' → ')} → ${parsed.cycle[0]}`);
+        lines.push('Break the cycle by removing at least one $allowedComponents entry.');
+    }
+    if (opts.verbose && opts.raw) {
+        lines.push('');
+        lines.push('--- raw ---');
+        lines.push(opts.raw);
+    }
+    return lines.filter(Boolean).join('\n');
+}

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.js

@@ -8,8 +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, loadSlotCycles, } from '../../../session/db.js';
-import { formatCyclePath } from '../../../analyze/cycle-detection.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';
@@ -253,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)
@@ -268,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();
@@ -278,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();
@@ -460,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;
         }
@@ -469,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') {
@@ -555,6 +640,21 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
     // 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;
@@ -575,7 +675,12 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
                     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}`));
-                        lines.push(_jsx(Text, { children: `    ${formatCyclePath(cycle, 16)}` }, `cyc-p-${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}`));
@@ -607,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 && 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) => (_jsx(Text, { color: "yellow", children: `  Cycle: ${formatCyclePath(cycle)}` }, `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) => {
+                })(), !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);
@@ -656,7 +764,7 @@ 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' +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.12.4-dev-build-9c819d8.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-9c819d8.0"
+    "@contentful/experience-design-system-types": "2.12.4-dev-build-ff57340.0"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.3",