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

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,6 +1,39 @@
 import type { Command } from 'commander';
-import type { DTCGTokenEntry } from '@contentful/experience-design-system-types';
+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

@@ -5,6 +5,7 @@ import { join } from 'node:path';
 import { validateCDF, flattenDTCG, validateDTCG, buildManifest, buildFilteredManifest, } from '@contentful/experience-design-system-types';
 import { ApiError, ImportApiClient } from './api-client.js';
 import { openPipelineDb, loadCDFComponents } from '../session/db.js';
+import { findSlotCycles, suggestCycleBreakEdge, formatCyclePath } from '../analyze/cycle-detection.js';
 import { isEmptyPreview } from './preview-utils.js';
 import { ServerPreviewApp, ServerPreviewConfirm, ServerApplyProgress, ServerApplyDone } from './tui/ServerApplyView.js';
 import { SelectView, makeSelectKey } from './tui/SelectView.js';
@@ -170,6 +171,75 @@ async function resolveSharedInputs(opts) {
     });
     return { components, tokens, client };
 }
+// --- INTEG-4401: pre-push slot-cycle hard block ---
+//
+// The backend apply worker rejects cyclic slot graphs at topo-sort time, but
+// 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 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).
+/**
+ * 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]) => ({
+            name: slotName,
+            allowedComponents: slotDef.$allowedComponents ?? [],
+        })),
+    }));
+    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) {
+        const cycle = cycles[i];
+        lines.push(`  Cycle ${i + 1}: ${formatCyclePath(cycle)}`);
+        const suggested = suggestCycleBreakEdge(cycle, cycles);
+        lines.push(`    Fix: remove '${suggested.toComponent}' from ${suggested.fromComponent}.$slots.${suggested.slotName}.$allowedComponents`);
+    }
+    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];
@@ -445,6 +515,12 @@ export function registerApplyCommand(program) {
             throw e;
         }
         const { components, tokens, client } = inputs;
+        // INTEG-4401: refuse before spending any credentials or bytes on a
+        // manifest the backend will reject. Cycle detection is deterministic
+        // and cheap so we run it here (not just at extract time) — this also
+        // guards `apply push --components` where extract-time cycles are not
+        // in the session DB.
+        assertNoSlotCycles(components);
         try {
             await client.validateToken();
         }
@@ -623,6 +699,11 @@ export function registerApplyCommand(program) {
             throw e;
         }
         const { components, tokens, client } = inputs;
+        // INTEG-4401: same pre-push cycle block as `apply push`. Running the
+        // check on the FULL component set (not the filtered selection) is
+        // deliberate: partial selection cannot resolve a cycle whose
+        // participants are all still present in the target space.
+        assertNoSlotCycles(components);
         try {
             await client.validateToken();
         }

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');
+}