@contentful/experience-design-system-cli 2.14.2 → 2.15.0

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

@@ -1,86 +1,267 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { PALETTE } from '../../../analyze/select/tui/theme.js';
 import { Box, Text, useStdout } from 'ink';
-import { Sidebar } from '../../../analyze/select/tui/components/Sidebar.js';
+import { GroupedSidebar, buildVisibleRows, } from '../../../analyze/select/tui/components/GroupedSidebar.js';
+import { computeAllClosures } from '../../../analyze/composite-closure.js';
+import { buildComponentGraph } from '../../../analyze/slot-graph.js';
+import { computeCycleView } from '../../../analyze/cycle-view.js';
+import { computeRenderStatuses, pickDrillTarget } from '../../../analyze/issue-inheritance.js';
 import { JsonPanel } from '../../../analyze/select/tui/components/JsonPanel.js';
 import { FieldEditor } from '../../../analyze/select/tui/components/FieldEditor.js';
 import { StatusBar } from '../../../analyze/select/tui/components/StatusBar.js';
 import { FinalizeDialog } from '../../../analyze/select/tui/components/FinalizeDialog.js';
+import { removedComponentsHeader, removedComponentLine, } from '../../../analyze/select/tui/components/removed-components-text.js';
 import { QuitDialog } from '../../../analyze/select/tui/components/QuitDialog.js';
 import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
-import { openPipelineDb, loadCDFComponents, storeCDFComponents, loadComponentReviewMetadata, loadComponentRationale, } from '../../../session/db.js';
+import { openPipelineDb, loadCDFComponents, storeCDFComponents, loadComponentReviewMetadata, loadComponentRationale, loadSlotCycles, storeSlotCycles, } from '../../../session/db.js';
+import { formatCyclePathSegments, findSlotCycles, suggestCycleBreakEdge } from '../../../analyze/cycle-detection.js';
+import { followCycleScroll } from '../cycle-panel-scroll.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';
 import { useLivePreview } from '../useLivePreview.js';
+import { useFinalizePreview } from '../useFinalizePreview.js';
 import { computeNextScrollOffset } from '../../../analyze/select/tui/hooks/scroll-offset.js';
-/**
- * Sort components for the final-review sidebar so the underlying data array
- * matches the visual order. Empty components (zero classified $properties)
- * surface at the top via the warning-tier path in Sidebar.tsx; we mirror that
- * here so `selectedIdx` indexes into the same order the user sees. Without
- * this, j/k navigation lands on different rows than the visually-selected
- * one (INTEG-4259).
- *
- * Within each tier (empty / non-empty) we tie-break alphabetically by `key`.
- */
-export function sortComponentsForSidebar(components) {
+import { fuzzyMatches } from '../../../analyze/fuzzy-search.js';
+import { computeDirectNeighborhood, findAllAncestors as findAllAncestorsInclusive, } from '../../../analyze/search-neighborhood.js';
+import { computeSidebarWidth } from '../sidebar-width.js';
+import { computeAcceptCascade, computeRejectCascade } from '../../../analyze/selection-cascade.js';
+import { useLineage } from '../hooks/useLineage.js';
+import { computeCycleAutoRejectTargets } from '../../cycle-auto-reject.js';
+import { useOverlayPanel } from '../hooks/useOverlayPanel.js';
+import { LineagePanel } from '../../../analyze/select/tui/components/LineagePanel.js';
+import { GotoBanner } from '../../../analyze/select/tui/components/GotoBanner.js';
+import { computeSidebarBudget, FALLBACK_ROWS } from '../lineage-layout.js';
+import { HelpOverlay } from '../../../analyze/select/tui/components/HelpOverlay.js';
+import { legendEntry } from '../components/LegendEntry.js';
+import { computeAutoRejectDecision } from './auto-reject-decision.js';
+import { formatBreakingChange } from './breaking-change-format.js';
+import { enumerateCycleBreaks, shouldBreakOverlayGoFullScreen } from './enumerate-cycle-breaks.js';
+import { createHistoryStack } from '../history.js';
+import { computeAutocomplete } from '../autocomplete.js';
+import { resolveGroupRoot } from '../group-collapse.js';
+import { buildFlatDimPredicate, computeFilterKeys, intersectFilterKeys } from '../step-filters.js';
+export function sortComponentsForSidebar(components, cycleParticipants) {
+    const isEmpty = (entry) => Object.keys(entry.$properties ?? {}).length === 0 && Object.keys(entry.$slots ?? {}).length === 0;
+    const tier = (c) => {
+        if (cycleParticipants?.has(c.key))
+            return 0;
+        if (isEmpty(c.entry))
+            return 1;
+        return 2;
+    };
     return [...components].sort((a, b) => {
-        const aEmpty = Object.keys(a.entry.$properties ?? {}).length === 0;
-        const bEmpty = Object.keys(b.entry.$properties ?? {}).length === 0;
-        if (aEmpty !== bEmpty)
-            return aEmpty ? -1 : 1;
+        const at = tier(a);
+        const bt = tier(b);
+        if (at !== bt)
+            return at - bt;
         return a.key.localeCompare(b.key);
     });
 }
-const VISIBLE_COUNT = 20;
 const PANEL_HEIGHT = 22;
+const HELP_SECTIONS = [
+    {
+        title: 'Navigation',
+        entries: [
+            { keys: 'j / k / ↑ / ↓', label: 'Move cursor' },
+            { keys: 'Tab', label: 'Toggle sidebar/panel' },
+            { keys: 'Enter', label: 'Drill to source' },
+        ],
+    },
+    {
+        title: 'Selection',
+        entries: [
+            { keys: 'a', label: 'Accept' },
+            { keys: 'r', label: 'Reject' },
+            { keys: 'A', label: 'Accept all' },
+            { keys: 'F', label: 'Finalize' },
+        ],
+    },
+    {
+        title: 'Sidebar views',
+        entries: [
+            { keys: 'L', label: 'Flat view' },
+            { keys: 'l', label: 'Lineage' },
+            { keys: 'i', label: 'Focus lineage' },
+            { keys: 'w', label: 'Only breaking' },
+            { keys: 'o', label: 'Only cycles' },
+            { keys: 'space', label: 'Expand/collapse group' },
+            { keys: 'E / C', label: 'Expand/collapse all' },
+        ],
+    },
+    {
+        title: 'Panels',
+        entries: [
+            { keys: 'c', label: 'Cycle list' },
+            { keys: 'p', label: 'Prop rationale' },
+            { keys: 'P', label: 'Component rationale' },
+            { keys: 's', label: 'Source' },
+            { keys: 'J', label: 'Toggle JSON' },
+        ],
+    },
+    {
+        title: 'Resolving cycles',
+        entries: [
+            { keys: 'r', label: 'Reject a cycle member (drops it from the push), or' },
+            { keys: '', label: "break the cycle by removing a slot's" },
+            { keys: '', label: '$allowedComponents edge (see [c] suggested fix).' },
+            { keys: 'x', label: 'Break cycle (from [c]): delete a slot edge.' },
+        ],
+    },
+    {
+        title: 'Search',
+        entries: [{ keys: '/', label: 'Search' }],
+    },
+    {
+        title: 'History',
+        entries: [
+            { keys: 'Ctrl+Z', label: 'Undo' },
+            { keys: 'Ctrl+Y', label: 'Redo' },
+            { keys: 'Ctrl+R', label: 'Reload from save' },
+        ],
+    },
+    {
+        title: 'General',
+        entries: [
+            { keys: '?', label: 'Close help' },
+            { keys: 'q', label: 'Quit' },
+        ],
+    },
+];
+export { computeCycleAutoRejectTargets } from '../../cycle-auto-reject.js';
+export function buildBreakingRows(breakingChanges) {
+    const out = [];
+    for (const b of breakingChanges) {
+        if (b.changes.length === 0) {
+            out.push({ label: `${b.componentName} — breaking`, componentName: b.componentName });
+            continue;
+        }
+        for (const change of b.changes) {
+            const label = formatBreakingChange(change, b.current);
+            if ('slotId' in change) {
+                out.push({
+                    label,
+                    componentName: b.componentName,
+                    focusTarget: { kind: 'slot', name: change.slotId },
+                });
+            }
+            else {
+                out.push({
+                    label,
+                    componentName: b.componentName,
+                    focusTarget: { kind: 'prop', name: change.propertyId },
+                });
+            }
+        }
+    }
+    return out;
+}
+export function deriveBreakingChanges(response) {
+    const out = [];
+    for (const item of response.components.changed ?? []) {
+        if (item.changeClassification?.classification !== 'breaking')
+            continue;
+        const componentName = item.current?.name;
+        if (typeof componentName !== 'string')
+            continue;
+        out.push({
+            componentName,
+            changes: item.changeClassification.breakingChanges ?? [],
+            impact: item.impact,
+            current: item.current,
+        });
+    }
+    return out;
+}
 export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, livePreview = true, spaceId = '', environmentId = '', cmaToken = '', host = '', tokensPath = '', initialFinalizeError = null, }) {
     const { stdout } = useStdout();
     const terminalWidth = stdout?.columns ?? 80;
     const [components, setComponents] = useState([]);
     const [loading, setLoading] = useState(true);
     const [loadError, setLoadError] = useState(null);
-    const [selectedIdx, setSelectedIdx] = useState(0);
-    const [sidebarScrollOffset, setSidebarScrollOffset] = useState(0);
+    const [nav, setNav] = useState({
+        cursorRowIdx: 0,
+        sidebarScrollOffset: 0,
+    });
+    const cursorRowIdx = nav.cursorRowIdx;
+    const sidebarScrollOffset = nav.sidebarScrollOffset;
     const [jsonScrollOffset, setJsonScrollOffset] = useState(0);
     const [sidebarFocused, setSidebarFocused] = useState(true);
     const [showFinalize, setShowFinalize] = useState(false);
     const [showQuit, setShowQuit] = useState(false);
-    // FieldEditor is the default editor. JSON view is an opt-in read-only toggle.
     const [showJson, setShowJson] = useState(false);
     const [draftValue, setDraftValue] = useState('');
     const [saveError, setSaveError] = useState(null);
-    // INTEG-4411: inline banner shown when the operator tries to finalize
-    // with zero accepted components. Cleared on the next 'a' or 'A' press.
     const [finalizeError, setFinalizeError] = useState(initialFinalizeError);
-    // Feature 1: per-component review metadata (rationale + source location)
-    // for the currently-selected component. Reloaded when selection changes.
     const [reviewMetadata, setReviewMetadata] = useState(null);
-    // Feature 2: per-component preview annotations refreshed after every
-    // FieldEditor save via the useLivePreview hook below. Empty when live
-    // preview is disabled, when creds are missing, or before the first response.
     const [previewAnnotations, setPreviewAnnotations] = useState(new Map());
-    // Pilot-2026-06-24: raw removed list for the `d` detail panel. The
-    // annotation map only carries kind, not the rich summaries we need to list
-    // names/ids when the operator asks "which ones?".
     const [removedComponents, setRemovedComponents] = useState([]);
-    const [showRemovedPanel, setShowRemovedPanel] = useState(false);
-    // Lifted rationale + source panels (replaces FieldEditor's right pane).
-    // Mutually exclusive states.
+    const [removedBannerCollapsed, setRemovedBannerCollapsed] = useState(false);
+    const removedBannerDefaultedRef = useRef(false);
     const [panelOpen, setPanelOpen] = useState('none');
     const [panelScrollOffset, setPanelScrollOffset] = useState(0);
     const [textEntryActive, setTextEntryActive] = useState(false);
     const [componentRationale, setComponentRationale] = useState(null);
-    // Tracks the first `g` of a potential `gg` double-tap (jumps to top in
-    // JSON-view + panel-focused state). Reset on any non-`g` key.
     const pendingGRef = useRef(false);
+    const [slotCycles, setSlotCycles] = useState([]);
+    const [cyclePanelScroll, setCyclePanelScroll] = useState(0);
+    const [cyclesCursor, setCyclesCursor] = useState(0);
+    const cyclePanel = useOverlayPanel({
+        toggleKey: 'c',
+        onClose: () => {
+            setCyclePanelScroll(0);
+            setCyclesCursor(0);
+        },
+    });
+    const breakPanel = useOverlayPanel({
+        toggleKey: 'x',
+        onClose: () => {
+            setBreakCursor(0);
+            setBreakConfirm(false);
+        },
+    });
+    const [breakCursor, setBreakCursor] = useState(0);
+    const [breakConfirm, setBreakConfirm] = useState(false);
+    const [expandedGroups, setExpandedGroups] = useState(new Set());
+    const seededGroupsRef = useRef(false);
+    const [searchOpen, setSearchOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [autocompleteCandidates, setAutocompleteCandidates] = useState([]);
+    const [jumpFilterTarget, setJumpFilterTarget] = useState(null);
+    const lineagePanel = useOverlayPanel({ toggleKey: 'l' });
+    const [lineageCursor, setLineageCursor] = useState(0);
+    const breakingPanel = useOverlayPanel({ toggleKey: 'b', onClose: () => setBreakingDetailOpen(false) });
+    const [breakingChanges, setBreakingChanges] = useState([]);
+    const [breakingCursor, setBreakingCursor] = useState(0);
+    const [breakingDetailOpen, setBreakingDetailOpen] = useState(false);
+    const [pendingEditorFocus, setPendingEditorFocus] = useState(null);
+    const [columnOneView, setColumnOneView] = useState('grouped');
+    const [activeFilters, setActiveFilters] = useState(new Set());
+    const [autoRejected, setAutoRejected] = useState([]);
+    const [undoSnapshot, setUndoSnapshot] = useState(null);
+    const autoRejectFiredRef = useRef(false);
+    const [editorDirty, setEditorDirty] = useState(false);
+    const [showUnsavedWarning, setShowUnsavedWarning] = useState(false);
+    const [pendingFocusAway, setPendingFocusAway] = useState(null);
+    const [discardTrigger, setDiscardTrigger] = useState(0);
+    const historyRef = useRef(null);
+    const historySeededRef = useRef(false);
+    const [showReloadDialog, setShowReloadDialog] = useState(false);
+    const [showHelp, setShowHelp] = useState(false);
     const handleLivePreviewResult = (response) => {
         if (!response)
             return;
         setPreviewAnnotations(applyPreviewAnnotations(response, components.map((c) => c.key)));
-        setRemovedComponents(response.components.removed ?? []);
+        const nextRemoved = response.components.removed ?? [];
+        setRemovedComponents(nextRemoved);
+        if (!removedBannerDefaultedRef.current && nextRemoved.length > 0) {
+            removedBannerDefaultedRef.current = true;
+            setRemovedBannerCollapsed(nextRemoved.length > 5);
+        }
+        setBreakingChanges(deriveBreakingChanges(response));
     };
+    const acceptedCountForPreview = components.filter((c) => c.status === 'accepted').length;
     const livePreviewHook = useLivePreview({
         enabled: livePreview,
         sessionId: extractSessionId,
@@ -90,9 +271,10 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
         cmaToken,
         host,
         onResult: handleLivePreviewResult,
+        // With nothing accepted, preview the delete-all diff so the review UI shows
+        // which existing components a push would remove (instead of an empty preview).
+        deleteAllComponents: acceptedCountForPreview === 0,
     });
-    // Manual spinner cycling (no extra dep) for the sidebar status-row
-    // indicator. Runs only while the live-preview hook reports `running`.
     const SPINNER_FRAMES = '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
     const [spinnerTick, setSpinnerTick] = useState(0);
     useEffect(() => {
@@ -102,39 +284,56 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
         return () => clearInterval(id);
     }, [livePreviewHook.status]);
     const livePreviewSpinner = SPINNER_FRAMES[spinnerTick % SPINNER_FRAMES.length];
+    const loadSessionState = () => {
+        const db = openPipelineDb();
+        let cdfComponents = [];
+        let cycles = [];
+        try {
+            cdfComponents = loadCDFComponents(db, extractSessionId);
+            cycles = loadSlotCycles(db, extractSessionId);
+        }
+        finally {
+            db.close();
+        }
+        if (cdfComponents.length === 0) {
+            return {
+                entries: [],
+                cycles: [],
+                error: 'No generated definitions found for this session. Try re-running generate.',
+            };
+        }
+        const cycleParticipants = new Set();
+        for (const c of cycles)
+            for (const p of c.path)
+                cycleParticipants.add(p);
+        const reviewEntries = cdfComponents.map(({ key, entry }) => ({
+            key,
+            entry,
+            status: 'needs-review',
+        }));
+        return {
+            entries: sortComponentsForSidebar(reviewEntries, cycleParticipants),
+            cycles,
+            error: null,
+        };
+    };
     useEffect(() => {
-        async function load() {
-            const db = openPipelineDb();
-            let cdfComponents;
-            try {
-                cdfComponents = loadCDFComponents(db, extractSessionId);
-            }
-            finally {
-                db.close();
-            }
-            if (cdfComponents.length === 0) {
-                setLoadError('No generated definitions found for this session. Try re-running generate.');
+        try {
+            const { entries, cycles, error } = loadSessionState();
+            if (error) {
+                setLoadError(error);
                 setLoading(false);
                 return;
             }
-            const reviewEntries = cdfComponents.map(({ key, entry }) => ({
-                key,
-                entry,
-                status: 'needs-review',
-            }));
-            setComponents(sortComponentsForSidebar(reviewEntries));
+            setSlotCycles(cycles);
+            setComponents(entries);
             setLoading(false);
         }
-        load().catch((e) => {
+        catch (e) {
             setLoadError(String(e));
             setLoading(false);
-        });
+        }
     }, []);
-    // Pilot-2026-06-23 R2: fire the live preview once on entry to final-review
-    // so diff badges populate before the operator's first save. We gate on the
-    // livePreview prop to honor --no-live-preview without depending on the
-    // hook's internal short-circuit. Cred-missing is still handled by the
-    // hook's own no-op path.
     useEffect(() => {
         if (loading)
             return;
@@ -143,12 +342,279 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
         if (components.length === 0)
             return;
         livePreviewHook.trigger();
-        // Intentionally only on load completion — subsequent fires happen via
-        // handleEditSave. Adding livePreviewHook to deps would re-fire on every
-        // hook re-creation.
     }, [loading]);
-    // Feature 1: load review metadata (rationale + source location) for the
-    // selected component when selection changes.
+    const finalizePreview = useFinalizePreview({
+        open: showFinalize,
+        extractSessionId,
+        tokensPath,
+        spaceId,
+        environmentId,
+        cmaToken,
+        host,
+        acceptedKeys: new Set(components.filter((c) => c.status === 'accepted').map((c) => c.key)),
+    });
+    const handleFinalizeConfirm = () => {
+        const acceptedCount = components.filter((c) => c.status === 'accepted').length;
+        const explicitlyRejected = components.filter((c) => c.status === 'rejected').map((c) => c.key);
+        const unresolved = components.filter((c) => c.status === 'needs-review').map((c) => c.key);
+        const toReject = [...explicitlyRejected, ...unresolved];
+        if (toReject.length > 0) {
+            const db = openPipelineDb();
+            try {
+                const stmt = db.prepare(`UPDATE raw_components SET status = 'generate-rejected' WHERE session_id = ? AND name = ?`);
+                db.exec('BEGIN');
+                try {
+                    for (const name of toReject) {
+                        stmt.run(extractSessionId, name);
+                    }
+                    db.exec('COMMIT');
+                }
+                catch (e) {
+                    db.exec('ROLLBACK');
+                    throw e;
+                }
+            }
+            finally {
+                db.close();
+            }
+        }
+        onFinalize(acceptedCount, explicitlyRejected.length, unresolved.length);
+    };
+    const recomputeCycles = (currentComponents) => {
+        try {
+            const view = computeCycleView(currentComponents);
+            const rawCycles = view.pushBlocking;
+            const next = rawCycles.map((cycle) => ({
+                path: cycle.path,
+                edges: cycle.edges,
+                suggestedBreak: cycle.edges.length > 0 ? suggestCycleBreakEdge(cycle, rawCycles) : null,
+            }));
+            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 (next.length === 0)
+                setFinalizeError(null);
+        }
+        catch {
+            // Defensive: swallow — never let cycle detection crash the review UI.
+        }
+    };
+    const componentGraph = useMemo(() => buildComponentGraph(components), [components]);
+    const sidebarGraph = useMemo(() => buildComponentGraph(components, { stripRejectedEdges: true }), [components]);
+    const closures = useMemo(() => computeAllClosures(componentGraph), [componentGraph]);
+    useEffect(() => {
+        if (seededGroupsRef.current)
+            return;
+        if (closures.size === 0 && slotCycles.length === 0)
+            return;
+        seededGroupsRef.current = true;
+        const seed = new Set(closures.keys());
+        for (const cyc of slotCycles)
+            for (const p of cyc.path)
+                seed.add(p);
+        setExpandedGroups(seed);
+    }, [closures, slotCycles]);
+    const directIssues = useMemo(() => {
+        const m = new Map();
+        for (const c of components) {
+            if (c.status === 'rejected')
+                m.set(c.key, 'error');
+        }
+        return m;
+    }, [components]);
+    const cycleView = useMemo(() => computeCycleView(components), [components]);
+    useEffect(() => {
+        const decision = computeAutoRejectDecision({
+            loading,
+            autoRejectFired: autoRejectFiredRef.current,
+            hasCycle: cycleView.structural.size > 0,
+        });
+        if (decision === 'skip')
+            return;
+        autoRejectFiredRef.current = true;
+        const targets = computeCycleAutoRejectTargets(slotCycles, componentGraph);
+        if (targets.size === 0)
+            return;
+        const snapshot = new Map();
+        const flipped = [];
+        for (const c of components) {
+            if (!targets.has(c.key))
+                continue;
+            snapshot.set(c.key, c.status);
+            if (c.status !== 'rejected')
+                flipped.push(c.key);
+        }
+        setComponents((prev) => prev.map((c) => (targets.has(c.key) ? { ...c, status: 'rejected' } : c)));
+        setAutoRejected(flipped.length > 0 ? flipped : [...targets].sort());
+        setUndoSnapshot(flipped.length > 0 ? snapshot : null);
+    }, [loading, cycleView, componentGraph, slotCycles]);
+    useEffect(() => {
+        if (loading)
+            return;
+        if (historySeededRef.current)
+            return;
+        historySeededRef.current = true;
+        historyRef.current = createHistoryStack({
+            components: components.map((c) => ({ key: c.key, entry: c.entry, status: c.status })),
+            autoRejected: [],
+            undoSnapshot: null,
+        });
+    }, [loading, components]);
+    const pushHistorySnapshot = (entries, autoRej, undoSnap, label) => {
+        if (!historyRef.current)
+            return;
+        historyRef.current.push({
+            components: entries.map((c) => ({ key: c.key, entry: c.entry, status: c.status })),
+            autoRejected: [...autoRej],
+            undoSnapshot: undoSnap === null ? null : new Map(undoSnap),
+        }, label);
+    };
+    const autoRejectPushedRef = useRef(false);
+    useEffect(() => {
+        if (loading)
+            return;
+        if (!historySeededRef.current)
+            return;
+        if (!autoRejectFiredRef.current)
+            return;
+        if (autoRejectPushedRef.current)
+            return;
+        autoRejectPushedRef.current = true;
+        pushHistorySnapshot(components, autoRejected, undoSnapshot, 'mount-auto-reject');
+    }, [autoRejected]);
+    const applyHistorySnapshot = (snap) => {
+        const restored = snap.components.map((c) => ({
+            key: c.key,
+            entry: c.entry,
+            status: c.status,
+        }));
+        setComponents(restored);
+        setAutoRejected(snap.autoRejected);
+        setUndoSnapshot(snap.undoSnapshot);
+        recomputeCycles(restored);
+    };
+    const handleUndo = () => {
+        const snap = historyRef.current?.undo();
+        if (!snap)
+            return;
+        applyHistorySnapshot(snap);
+    };
+    const handleRedo = () => {
+        const snap = historyRef.current?.redo();
+        if (!snap)
+            return;
+        applyHistorySnapshot(snap);
+    };
+    const reloadFromSave = () => {
+        try {
+            const { entries, cycles, error } = loadSessionState();
+            if (error) {
+                setLoadError(error);
+                return;
+            }
+            setSlotCycles(cycles);
+            setComponents(entries);
+            const reloadGraph = buildComponentGraph(entries);
+            const reloadClosures = computeAllClosures(reloadGraph);
+            const reloadCycleView = computeCycleView(entries);
+            const reloadSeed = new Set();
+            for (const [name, closure] of reloadClosures.entries()) {
+                if (closure.nodes.length > 1)
+                    reloadSeed.add(name);
+            }
+            for (const name of reloadCycleView.structural)
+                reloadSeed.add(name);
+            setExpandedGroups(reloadSeed);
+            seededGroupsRef.current = true;
+            setAutoRejected([]);
+            setUndoSnapshot(null);
+            autoRejectFiredRef.current = false;
+            autoRejectPushedRef.current = false;
+            historyRef.current?.reset({
+                components: entries.map((c) => ({ key: c.key, entry: c.entry, status: c.status })),
+                autoRejected: [],
+                undoSnapshot: null,
+            });
+            setNav({ cursorRowIdx: 0, sidebarScrollOffset: 0 });
+            setSaveError(null);
+            setFinalizeError(null);
+        }
+        catch (e) {
+            setLoadError(String(e));
+        }
+    };
+    const groupedItemsMemo = useMemo(() => components.map((c) => ({
+        key: c.key,
+        entry: c.entry,
+        status: (directIssues.get(c.key) ?? 'ok'),
+    })), [components, directIssues]);
+    const brokenKeys = useMemo(() => new Set(breakingChanges.map((b) => b.componentName)), [breakingChanges]);
+    const breakingRows = useMemo(() => buildBreakingRows(breakingChanges), [breakingChanges]);
+    const filterVisibleKeys = useMemo(() => {
+        if (jumpFilterTarget) {
+            return findAllAncestorsInclusive(jumpFilterTarget, sidebarGraph);
+        }
+        const categoryKeys = computeFilterKeys({
+            filters: activeFilters,
+            data: { cycles: cycleView.structural, broken: brokenKeys },
+        });
+        const searchKeys = (() => {
+            if (!searchQuery)
+                return undefined;
+            const matches = groupedItemsMemo.map((it) => it.key).filter((k) => fuzzyMatches(searchQuery, k));
+            if (matches.length === 0)
+                return undefined;
+            return computeDirectNeighborhood(matches, sidebarGraph);
+        })();
+        return intersectFilterKeys(categoryKeys, searchKeys);
+    }, [jumpFilterTarget, activeFilters, cycleView, brokenKeys, searchQuery, groupedItemsMemo, sidebarGraph]);
+    const visibleRowsMemo = useMemo(() => buildVisibleRows({
+        items: groupedItemsMemo,
+        cycleParticipants: cycleView.structural,
+        expandedGroups,
+        viewMode: columnOneView,
+        graph: sidebarGraph,
+        filterVisibleKeys,
+    }), [groupedItemsMemo, cycleView, expandedGroups, columnOneView, sidebarGraph, filterVisibleKeys]);
+    const selectableRowPositions = useMemo(() => {
+        const out = [];
+        for (let i = 0; i < visibleRowsMemo.length; i++) {
+            if (visibleRowsMemo[i].itemIdx >= 0)
+                out.push(i);
+        }
+        return out;
+    }, [visibleRowsMemo]);
+    const selectedIdx = visibleRowsMemo[cursorRowIdx]?.itemIdx ?? -1;
+    const focusedComponentKey = components[selectedIdx]?.key ?? null;
+    const { entries: lineageEntries, jumpables: lineageJumpables } = useLineage(focusedComponentKey, componentGraph);
+    const { sidebarVisibleCount: visibleCount, panelMaxRows } = computeSidebarBudget({
+        rows: stdout?.rows ?? FALLBACK_ROWS,
+        panelOpen: lineagePanel.isOpen,
+        entryCount: lineageEntries.length,
+    });
+    useEffect(() => {
+        if (selectableRowPositions.length === 0)
+            return;
+        const cursorInRange = selectableRowPositions.includes(cursorRowIdx);
+        const maxScroll = Math.max(0, visibleRowsMemo.length - visibleCount);
+        const scrollNeedsClamp = sidebarScrollOffset > maxScroll;
+        if (cursorInRange && !scrollNeedsClamp)
+            return;
+        const nextCursor = cursorInRange ? cursorRowIdx : selectableRowPositions[0];
+        setNav(() => ({
+            cursorRowIdx: nextCursor,
+            sidebarScrollOffset: Math.min(sidebarScrollOffset, maxScroll),
+        }));
+    }, [selectableRowPositions, cursorRowIdx, sidebarScrollOffset, visibleRowsMemo.length, visibleCount]);
     useEffect(() => {
         const current = components[selectedIdx];
         if (!current) {
@@ -166,9 +632,6 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
             db.close();
         }
     }, [selectedIdx, components, extractSessionId]);
-    // Load component-level rationale for the selected component (drives the
-    // `I` ComponentRationalePanel). Decoupled from review metadata so the data
-    // contracts can evolve independently.
     useEffect(() => {
         const current = components[selectedIdx];
         if (!current) {
@@ -186,48 +649,85 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
             db.close();
         }
     }, [selectedIdx, components, extractSessionId]);
-    const updateStatus = (idx, status) => {
-        setComponents((prev) => prev.map((c, i) => (i === idx ? { ...c, status } : c)));
-    };
-    const handleFinalizeConfirm = () => {
-        // Strict opt-in: only EXPLICITLY ACCEPTED components ship. Anything left
-        // in 'needs-review' OR explicitly 'rejected' is downgraded to
-        // 'generate-rejected' so loadCDFComponents excludes it from the manifest.
-        // The operator told us they want accept-to-ship semantics — leaving a
-        // component unresolved should NOT silently push it (Pilot-2026-06-24 R2).
-        const acceptedCount = components.filter((c) => c.status === 'accepted').length;
-        // INTEG-4411 refined: DO NOT block on `acceptedCount === 0` up-front.
-        // A push with zero accepted but one or more rejections targeting a
-        // component that exists server-side still produces REMOVALS — a valid
-        // push, not a no-op. Same for token-only diffs. The load-bearing no-op
-        // check lives downstream in WizardApp.runPreview, which consults the
-        // preview response and only blocks when every diff bucket is empty.
-        // We keep the `finalizeError` state so the wizard can route back here
-        // with an inline banner when that downstream check fires.
-        const explicitlyRejected = components.filter((c) => c.status === 'rejected').map((c) => c.key);
-        const unresolved = components.filter((c) => c.status === 'needs-review').map((c) => c.key);
-        const toReject = [...explicitlyRejected, ...unresolved];
-        if (toReject.length > 0) {
-            const db = openPipelineDb();
-            try {
-                const stmt = db.prepare(`UPDATE raw_components SET status = 'generate-rejected' WHERE session_id = ? AND name = ?`);
-                db.exec('BEGIN');
-                try {
-                    for (const name of toReject) {
-                        stmt.run(extractSessionId, name);
-                    }
-                    db.exec('COMMIT');
-                }
-                catch (e) {
-                    db.exec('ROLLBACK');
-                    throw e;
+    const renderStatusByKey = useMemo(() => {
+        const merged = new Map();
+        for (const closure of closures.values()) {
+            const per = computeRenderStatuses(closure, directIssues);
+            for (const [name, rs] of per.entries()) {
+                const existing = merged.get(name);
+                if (!existing || (!existing.isOwn && rs.isOwn)) {
+                    merged.set(name, rs);
                 }
             }
-            finally {
-                db.close();
+        }
+        return merged;
+    }, [closures, directIssues]);
+    const selectionStateByKey = useMemo(() => {
+        const map = new Map();
+        for (const c of components) {
+            if (c.status === 'accepted')
+                map.set(c.key, 'accepted');
+            else if (c.status === 'rejected')
+                map.set(c.key, 'rejected');
+            else
+                map.set(c.key, 'undecided');
+        }
+        return map;
+    }, [components]);
+    const searchMatches = useMemo(() => {
+        if (!searchQuery)
+            return [];
+        const out = [];
+        for (const pos of selectableRowPositions) {
+            const row = visibleRowsMemo[pos];
+            const key = row ? components[row.itemIdx]?.key : undefined;
+            if (key && fuzzyMatches(searchQuery, key))
+                out.push(pos);
+        }
+        return out;
+    }, [searchQuery, selectableRowPositions, visibleRowsMemo, components]);
+    const searchMatchCount = useMemo(() => {
+        if (searchMatches.length === 0)
+            return 0;
+        const seen = new Set();
+        for (const pos of searchMatches) {
+            const itemIdx = visibleRowsMemo[pos]?.itemIdx;
+            if (itemIdx != null && itemIdx >= 0)
+                seen.add(itemIdx);
+        }
+        return seen.size;
+    }, [searchMatches, visibleRowsMemo]);
+    const dimPredicate = useMemo(() => buildFlatDimPredicate({
+        viewMode: columnOneView,
+        searchQuery,
+        filterVisibleKeys,
+    }), [columnOneView, searchQuery, filterVisibleKeys]);
+    const jumpCursorToRow = (rowIdx) => {
+        if (rowIdx < 0 || rowIdx >= visibleRowsMemo.length)
+            return;
+        setNav(({ sidebarScrollOffset: prev }) => {
+            let nextOff = prev;
+            if (rowIdx < prev)
+                nextOff = rowIdx;
+            else if (rowIdx >= prev + visibleCount)
+                nextOff = rowIdx - visibleCount + 1;
+            return { cursorRowIdx: rowIdx, sidebarScrollOffset: nextOff };
+        });
+        setJsonScrollOffset(0);
+        setDraftValue('');
+        setSaveError(null);
+        setPendingEditorFocus(null);
+    };
+    const jumpCursorToName = (name) => {
+        for (let i = 0; i < visibleRowsMemo.length; i++) {
+            const row = visibleRowsMemo[i];
+            if (row.itemIdx < 0)
+                continue;
+            if (components[row.itemIdx]?.key === name) {
+                jumpCursorToRow(i);
+                return;
             }
         }
-        onFinalize(acceptedCount, explicitlyRejected.length, unresolved.length);
     };
     const handleEditSave = () => {
         const current = components[selectedIdx];
@@ -235,7 +735,6 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
             return;
         try {
             const parsed = JSON.parse(draftValue);
-            // Accept both bare entry and wrapped { [key]: entry } forms
             const keys = Object.keys(parsed);
             const entry = keys.length === 1 && typeof parsed[keys[0]] === 'object' && parsed[keys[0]] !== null
                 ? parsed[keys[0]]
@@ -244,7 +743,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();
@@ -254,9 +757,9 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
             finally {
                 db.close();
             }
-            // Feature 2: re-fire the live preview now that pipeline.db reflects
-            // the new state. The hook owns debounce + cred-missing short-circuit.
+            recomputeCycles(updatedComponents);
             livePreviewHook.trigger();
+            pushHistorySnapshot(updatedComponents, autoRejected, undoSnapshot, 'edit-save');
         }
         catch (e) {
             setSaveError(String(e));
@@ -266,34 +769,343 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
         setDraftValue('');
         setSaveError(null);
     };
+    const breakEdges = useMemo(() => {
+        const cycle = slotCycles[cyclesCursor];
+        if (!cycle)
+            return [];
+        return enumerateCycleBreaks(cycle, components);
+    }, [slotCycles, cyclesCursor, components]);
+    const handleBreakEdge = (edge) => {
+        const idx = components.findIndex((c) => c.key === edge.fromComponent);
+        if (idx < 0)
+            return;
+        const target = components[idx];
+        const slot = target.entry.$slots?.[edge.slotName];
+        if (!slot || !Array.isArray(slot.$allowedComponents))
+            return;
+        const nextAllowed = slot.$allowedComponents.filter((v) => v !== edge.toComponent);
+        const nextEntry = {
+            ...target.entry,
+            $slots: {
+                ...target.entry.$slots,
+                [edge.slotName]: { ...slot, $allowedComponents: nextAllowed },
+            },
+        };
+        const next = components.map((c, i) => (i === idx ? { ...c, entry: nextEntry } : c));
+        setComponents(next);
+        const db = openPipelineDb();
+        try {
+            storeCDFComponents(db, extractSessionId, [{ key: target.key, entry: nextEntry }]);
+        }
+        finally {
+            db.close();
+        }
+        recomputeCycles(next);
+        livePreviewHook.trigger();
+        pushHistorySnapshot(next, autoRejected, undoSnapshot, 'break-cycle-edge');
+    };
+    const handleRejectComponent = (key) => {
+        const rejectCascade = computeRejectCascade(key, componentGraph);
+        const acceptCascade = computeAcceptCascade(key, componentGraph);
+        const next = components.map((c) => {
+            if (rejectCascade.has(c.key)) {
+                return { ...c, status: 'rejected' };
+            }
+            if (acceptCascade.has(c.key) && c.key !== key) {
+                return { ...c, status: 'needs-review' };
+            }
+            return c;
+        });
+        setComponents(next);
+        recomputeCycles(next);
+        pushHistorySnapshot(next, autoRejected, undoSnapshot, 'reject-cascade');
+    };
     const dialogOpen = showFinalize || showQuit;
     useImmediateInput((input, key) => {
-        if (loading || loadError)
+        if (loading)
+            return;
+        // On a load error there's nothing to review — still let the operator quit
+        // (q / Esc / Enter) instead of trapping them on the error screen.
+        if (loadError) {
+            if (input === 'q' || key.escape || key.return)
+                onQuit();
+            return;
+        }
+        if (showFinalize) {
+            // The dialog owns y/n/Enter/Esc; here we own j/k scroll of its deletion list.
+            if (input === 'j' || key.downArrow) {
+                finalizePreview.scrollBy(1);
+                return;
+            }
+            if (input === 'k' || key.upArrow) {
+                finalizePreview.scrollBy(-1);
+                return;
+            }
             return;
+        }
         if (dialogOpen)
             return;
-        // Pilot-2026-06-24: removed-detail panel. When open, only `d` (toggle)
-        // and Esc (close) respond — all other input is swallowed so j/k/Enter/
-        // Ctrl+S can't move state behind the modal. Mirrors the `?` overlay
-        // pattern from 8f0c62e in FieldEditor.
-        if (showRemovedPanel) {
-            if (input === 'd' || key.escape) {
-                setShowRemovedPanel(false);
+        if (showHelp)
+            return;
+        if (showReloadDialog) {
+            if (key.return) {
+                reloadFromSave();
+                setShowReloadDialog(false);
+                return;
+            }
+            if (key.escape) {
+                setShowReloadDialog(false);
+                return;
             }
             return;
         }
-        // `d` opens the panel only when live-preview is enabled and there is at
-        // least one removed component to display. Sidebar-focused only so it
-        // doesn't collide with FieldEditor input.
-        if (input === 'd' && sidebarFocused && livePreview && removedComponents.length > 0) {
-            setShowRemovedPanel(true);
+        if (key.ctrl && input === 'z') {
+            handleUndo();
+            return;
+        }
+        if (key.ctrl && input === 'y') {
+            handleRedo();
+            return;
+        }
+        if (key.ctrl && input === 'r') {
+            setShowReloadDialog(true);
+            return;
+        }
+        if (showUnsavedWarning) {
+            if (key.return) {
+                handleEditSave();
+                setShowUnsavedWarning(false);
+                if (pendingFocusAway === 'tab-to-sidebar')
+                    setSidebarFocused(true);
+                setPendingFocusAway(null);
+                return;
+            }
+            if (key.escape) {
+                setDiscardTrigger((n) => n + 1);
+                setShowUnsavedWarning(false);
+                if (pendingFocusAway === 'tab-to-sidebar')
+                    setSidebarFocused(true);
+                setPendingFocusAway(null);
+                return;
+            }
+            setShowUnsavedWarning(false);
+            setPendingFocusAway(null);
+            return;
+        }
+        if (searchOpen) {
+            if (key.escape) {
+                setSearchOpen(false);
+                setSearchQuery('');
+                setAutocompleteCandidates([]);
+                return;
+            }
+            if (key.return) {
+                setAutocompleteCandidates([]);
+                if (!searchQuery || searchMatches.length === 0) {
+                    setSearchOpen(false);
+                    setSearchQuery('');
+                    return;
+                }
+                let jumped = false;
+                for (let i = cursorRowIdx + 1; i < visibleRowsMemo.length; i++) {
+                    const row = visibleRowsMemo[i];
+                    if (row.itemIdx < 0)
+                        continue;
+                    const key2 = components[row.itemIdx]?.key;
+                    if (key2 && fuzzyMatches(searchQuery, key2)) {
+                        jumpCursorToRow(i);
+                        jumped = true;
+                        break;
+                    }
+                }
+                if (!jumped) {
+                    jumpCursorToRow(searchMatches[0]);
+                }
+                setSearchOpen(false);
+                return;
+            }
+            if (key.tab) {
+                const { completion, candidates } = computeAutocomplete(searchQuery, components.map((c) => c.key));
+                setSearchQuery(completion);
+                setAutocompleteCandidates(candidates);
+                return;
+            }
+            if (key.backspace) {
+                setAutocompleteCandidates([]);
+                setSearchQuery((q) => q.slice(0, -1));
+                return;
+            }
+            if (input && input.length === 1 && input >= ' ' && input !== '\r' && input !== '\n') {
+                setAutocompleteCandidates([]);
+                setSearchQuery((q) => q + input);
+                return;
+            }
+            return;
+        }
+        if (breakingPanel.isOpen) {
+            if (breakingPanel.handleInput(input, key))
+                return;
+            if (input === 'D') {
+                setBreakingDetailOpen((prev) => !prev);
+                return;
+            }
+            if (key.upArrow || input === 'k') {
+                setBreakingDetailOpen(false);
+                setBreakingCursor((c) => Math.max(0, c - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setBreakingDetailOpen(false);
+                setBreakingCursor((c) => Math.min(Math.max(0, breakingRows.length - 1), c + 1));
+                return;
+            }
+            if (key.return) {
+                const row = breakingRows[breakingCursor];
+                if (row) {
+                    jumpCursorToName(row.componentName);
+                    if (row.focusTarget) {
+                        setPendingEditorFocus({ componentName: row.componentName, target: row.focusTarget });
+                        setSidebarFocused(false);
+                    }
+                }
+                breakingPanel.close();
+                return;
+            }
+            return;
+        }
+        if (lineagePanel.isOpen) {
+            if (lineagePanel.handleInput(input, key))
+                return;
+            if (key.upArrow || input === 'k') {
+                setLineageCursor((c) => Math.max(0, c - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setLineageCursor((c) => Math.min(Math.max(0, lineageJumpables.length - 1), c + 1));
+                return;
+            }
+            if (key.tab) {
+                setLineageCursor((c) => (lineageJumpables.length === 0 ? 0 : (c + 1) % lineageJumpables.length));
+                return;
+            }
+            if (key.return) {
+                const target = lineageJumpables[lineageCursor];
+                if (target && (target.entry.kind === 'ancestor' || target.entry.kind === 'descendant')) {
+                    jumpCursorToName(target.entry.jumpTarget);
+                }
+                lineagePanel.close();
+                return;
+            }
+            return;
+        }
+        if (breakPanel.isOpen) {
+            if (breakConfirm) {
+                if (input === 'y') {
+                    const edge = breakEdges[breakCursor];
+                    if (edge)
+                        handleBreakEdge(edge);
+                    setBreakConfirm(false);
+                    breakPanel.close();
+                    return;
+                }
+                if (input === 'n' || key.escape) {
+                    setBreakConfirm(false);
+                    return;
+                }
+                return;
+            }
+            if (breakPanel.handleInput(input, key))
+                return;
+            if (key.upArrow || input === 'k') {
+                setBreakCursor((c) => Math.max(0, c - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setBreakCursor((c) => Math.min(Math.max(0, breakEdges.length - 1), c + 1));
+                return;
+            }
+            if (key.return) {
+                if (breakEdges[breakCursor])
+                    setBreakConfirm(true);
+                return;
+            }
+            return;
+        }
+        if (cyclePanel.isOpen) {
+            if (input === 'x' && breakEdges.length > 0) {
+                breakPanel.open();
+                setBreakCursor(0);
+                setBreakConfirm(false);
+                return;
+            }
+            if (cyclePanel.handleInput(input, key))
+                return;
+            if (input === 'q') {
+                cyclePanel.close();
+                return;
+            }
+            if (key.upArrow || input === 'k') {
+                setCyclesCursor((c) => {
+                    const next = Math.max(0, c - 1);
+                    setCyclePanelScroll((scroll) => followCycleScroll(scroll, next, slotCycles, 20));
+                    return next;
+                });
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setCyclesCursor((c) => {
+                    const next = Math.min(Math.max(0, slotCycles.length - 1), c + 1);
+                    setCyclePanelScroll((scroll) => followCycleScroll(scroll, next, slotCycles, 20));
+                    return next;
+                });
+                return;
+            }
+            if (key.return) {
+                const target = slotCycles[cyclesCursor];
+                if (target && target.path.length > 0)
+                    jumpCursorToName(target.path[0]);
+                cyclePanel.close();
+                return;
+            }
+            return;
+        }
+        if (input === 'c' && sidebarFocused && slotCycles.length > 0) {
+            cyclePanel.open();
+            setCyclePanelScroll(0);
+            setCyclesCursor(0);
+            return;
+        }
+        if (input === 'l' && sidebarFocused && focusedComponentKey) {
+            lineagePanel.open();
+            setLineageCursor(0);
+            return;
+        }
+        if (input === 'b' && sidebarFocused && breakingChanges.length > 0) {
+            breakingPanel.open();
+            setBreakingCursor(0);
+            return;
+        }
+        if (input === 'd' && sidebarFocused && removedComponents.length > 0) {
+            setRemovedBannerCollapsed((prev) => !prev);
+            return;
+        }
+        if (sidebarFocused && (input === 'o' || input === 'w')) {
+            const category = input === 'o' ? 'cycles' : 'broken';
+            setActiveFilters((prev) => {
+                const next = new Set(prev);
+                if (next.has(category))
+                    next.delete(category);
+                else
+                    next.add(category);
+                return next;
+            });
+            return;
+        }
+        if (input === 'i' && sidebarFocused && !key.tab && !key.ctrl && !key.meta && focusedComponentKey) {
+            const t = focusedComponentKey;
+            setJumpFilterTarget((prev) => (prev === t ? null : t));
             return;
         }
-        // Lifted rationale + source panels: i/I/s fire from anywhere (sidebar OR
-        // panel focus). Gated against text-entry surfaces inside FieldEditor
-        // (description editors, string-default editor, value-list text entry)
-        // via the `onTextEntryActiveChange` callback, plus the help/finalize/quit
-        // overlays and the JSON view.
         if (panelOpen !== 'none') {
             const PANEL_HEIGHT_LOCAL = 12;
             const next = computeNextScrollOffset(panelScrollOffset, input, key, 9999, PANEL_HEIGHT_LOCAL);
@@ -306,15 +1118,13 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
                 setPanelScrollOffset(() => 0);
                 return;
             }
-            // Guard against Ctrl-letter aliases (Tab is Ctrl+I in ASCII, Ctrl+S would
-            // collide with save in nested editors). Only react to bare keystrokes.
             const togglable = !key.ctrl && !key.tab && !key.meta && !key.return;
-            if (togglable && input === 'i' && panelOpen === 'prop-rationale') {
+            if (togglable && input === 'p' && panelOpen === 'prop-rationale') {
                 setPanelOpen('none');
                 setPanelScrollOffset(() => 0);
                 return;
             }
-            if (togglable && input === 'I' && panelOpen === 'component-rationale') {
+            if (togglable && input === 'P' && panelOpen === 'component-rationale') {
                 setPanelOpen('none');
                 setPanelScrollOffset(() => 0);
                 return;
@@ -324,13 +1134,12 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
                 setPanelScrollOffset(() => 0);
                 return;
             }
-            // Cross-panel toggles while one is open.
-            if (togglable && input === 'i') {
+            if (togglable && input === 'p') {
                 setPanelOpen('prop-rationale');
                 setPanelScrollOffset(() => 0);
                 return;
             }
-            if (togglable && input === 'I') {
+            if (togglable && input === 'P') {
                 setPanelOpen('component-rationale');
                 setPanelScrollOffset(() => 0);
                 return;
@@ -344,39 +1153,53 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
         }
         const rationaleKeyOk = !textEntryActive && !showJson && !key.ctrl && !key.tab && !key.meta && !key.return;
         if (rationaleKeyOk) {
-            if (input === 'i') {
+            if (input === 'p') {
                 setPanelOpen('prop-rationale');
                 setPanelScrollOffset(() => 0);
                 return;
             }
-            if (input === 'I') {
+            if (input === 'P') {
                 setPanelOpen('component-rationale');
                 setPanelScrollOffset(() => 0);
                 return;
             }
+            if (input === 's') {
+                setPanelOpen('source');
+                setPanelScrollOffset(() => 0);
+                return;
+            }
         }
-        // Tab toggles focus bidirectionally between sidebar and panel. `e` is a
-        // sidebar-only alias for crossing INTO the panel — gating it to the
-        // sidebar-focused state prevents collision with FieldEditor's enum-values
-        // `e` binding (INTEG-4254) when the panel is focused. Crossing back from
-        // panel to sidebar is Tab-only.
         if (key.tab) {
+            if (!sidebarFocused && editorDirty) {
+                setPendingFocusAway('tab-to-sidebar');
+                setShowUnsavedWarning(true);
+                return;
+            }
             setSidebarFocused((prev) => !prev);
             return;
         }
-        if (input === 'e' && sidebarFocused) {
-            setSidebarFocused(false);
+        if (input === ' ' && sidebarFocused && !showJson) {
+            const current = components[selectedIdx];
+            if (!current)
+                return;
+            const rootName = resolveGroupRoot(current.key, closures, cycleView.structural);
+            if (!rootName)
+                return;
+            setExpandedGroups((prev) => {
+                const next = new Set(prev);
+                if (next.has(rootName))
+                    next.delete(rootName);
+                else
+                    next.add(rootName);
+                return next;
+            });
             return;
         }
-        // JSON view + panel focused: own j/k/arrows/PageUp/PageDown/Ctrl+u/d/gg/G
-        // for scrolling. Computed against the live `selectedJson` so the
-        // viewport math matches what JsonPanel renders.
         if (!sidebarFocused && showJson) {
             const current = components[selectedIdx];
             const currentJson = current ? JSON.stringify({ [current.key]: current.entry }, null, 2) : '';
             const totalLines = currentJson.split('\n').length;
             const maxOffset = Math.max(0, totalLines - PANEL_HEIGHT);
-            // `gg` double-tap to jump to top; single `g` arms the pending flag.
             if (input === 'g' && !key.ctrl) {
                 if (pendingGRef.current) {
                     pendingGRef.current = false;
@@ -389,129 +1212,300 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
             const next = computeNextScrollOffset(jsonScrollOffset, input, key, totalLines, PANEL_HEIGHT);
             if (next !== null) {
                 pendingGRef.current = false;
-                // Functional setState mirrors the cursor-stutter fix (commit 5d11e60).
-                // Clamp against maxOffset re-computed at apply time in case totalLines
-                // shifted between events (defensive — helper already clamps).
                 const clamped = Math.min(maxOffset, Math.max(0, next));
                 setJsonScrollOffset(() => clamped);
                 return;
             }
-            // Any other key in this slice resets the gg-pending flag, then falls
-            // through to the early-return below so the panel-focused state still
-            // swallows non-scroll input.
             pendingGRef.current = false;
         }
-        // When the panel is focused, FieldEditor (or JsonPanel) owns the keys.
-        // Only Tab (handled above) should escape from the panel-focused state.
         if (!sidebarFocused)
             return;
-        // Sidebar-focused keymap.
+        if (input === '/') {
+            setSearchOpen(true);
+            return;
+        }
+        if (key.escape && jumpFilterTarget) {
+            setJumpFilterTarget(null);
+            return;
+        }
+        if (key.escape && searchQuery) {
+            setSearchQuery('');
+            setAutocompleteCandidates([]);
+            return;
+        }
+        if (input === '?') {
+            setShowHelp(true);
+            return;
+        }
         if (input === 'q') {
             setShowQuit(true);
             return;
         }
-        if (input === 'F') {
+        if (input === 'F' || input === 'f') {
+            const acceptedNames = new Set(components.filter((c) => c.status === 'accepted').map((c) => c.key));
+            const acceptedSubgraph = componentGraph.filter((n) => acceptedNames.has(n.name));
+            const acceptedCycles = (() => {
+                try {
+                    return findSlotCycles(acceptedSubgraph);
+                }
+                catch {
+                    return [];
+                }
+            })();
+            if (acceptedCycles.length > 0) {
+                const participants = new Set();
+                for (const c of acceptedCycles)
+                    for (const p of c.path)
+                        participants.add(p);
+                setFinalizeError(`Cannot finalize — accepted set still contains a cycle (${[...participants].sort().join(', ')}). Reject a cycle member to break it.`);
+                return;
+            }
             setShowFinalize(true);
             return;
         }
+        if (input === 'L') {
+            const currentKey = cursorRowIdx >= 0 && cursorRowIdx < visibleRowsMemo.length
+                ? (components[visibleRowsMemo[cursorRowIdx]?.itemIdx ?? -1]?.key ?? null)
+                : null;
+            const nextView = columnOneView === 'grouped' ? 'flat' : 'grouped';
+            const nextRows = buildVisibleRows({
+                items: groupedItemsMemo,
+                cycleParticipants: cycleView.structural,
+                expandedGroups,
+                viewMode: nextView,
+                graph: sidebarGraph,
+            });
+            let nextCursor = 0;
+            if (currentKey) {
+                for (let i = 0; i < nextRows.length; i++) {
+                    const r = nextRows[i];
+                    if (r.itemIdx < 0)
+                        continue;
+                    if (components[r.itemIdx]?.key === currentKey) {
+                        nextCursor = i;
+                        break;
+                    }
+                }
+            }
+            const nextScroll = nextCursor < sidebarScrollOffset
+                ? nextCursor
+                : nextCursor >= sidebarScrollOffset + visibleCount
+                    ? nextCursor - visibleCount + 1
+                    : sidebarScrollOffset;
+            setColumnOneView(nextView);
+            setNav({ cursorRowIdx: nextCursor, sidebarScrollOffset: nextScroll });
+            return;
+        }
         if (input === 'a') {
-            updateStatus(selectedIdx, 'accepted');
+            const current = components[selectedIdx];
+            if (!current)
+                return;
+            const cascade = computeAcceptCascade(current.key, componentGraph);
+            const next = components.map((c) => cascade.has(c.key) ? { ...c, status: 'accepted' } : c);
+            setComponents(next);
             setFinalizeError(null);
+            recomputeCycles(next);
+            pushHistorySnapshot(next, autoRejected, undoSnapshot, 'accept-cascade');
             return;
         }
         if (input === 'r') {
-            updateStatus(selectedIdx, 'rejected');
+            const current = components[selectedIdx];
+            if (!current)
+                return;
+            handleRejectComponent(current.key);
             return;
         }
         if (input === 'A') {
-            setComponents((prev) => prev.map((c) => (c.status === 'needs-review' ? { ...c, status: 'accepted' } : c)));
+            const next = components.map((c) => c.status === 'needs-review' ? { ...c, status: 'accepted' } : c);
+            setComponents(next);
             setFinalizeError(null);
+            pushHistorySnapshot(next, autoRejected, undoSnapshot, 'bulk-accept');
+            return;
+        }
+        if (input === 'E') {
+            const roots = new Set();
+            for (const [name, closure] of closures.entries()) {
+                if (closure.nodes.length > 1)
+                    roots.add(name);
+            }
+            for (const name of cycleView.structural)
+                roots.add(name);
+            setExpandedGroups(roots);
+            return;
+        }
+        if (input === 'C') {
+            setExpandedGroups(new Set());
             return;
         }
         if (input === 'J') {
-            // Toggle read-only JSON view.
             setShowJson((prev) => !prev);
             setJsonScrollOffset(0);
             pendingGRef.current = false;
             return;
         }
+        if (key.return) {
+            const current = components[selectedIdx];
+            if (!current)
+                return;
+            const rs = renderStatusByKey.get(current.key);
+            if (!rs || rs.isOwn)
+                return;
+            for (const closure of closures.values()) {
+                if (!closure.nodes.some((n) => n.name === current.key))
+                    continue;
+                const target = pickDrillTarget(current.key, closure, directIssues);
+                if (target && target !== current.key) {
+                    jumpCursorToName(target);
+                }
+                break;
+            }
+            return;
+        }
         if (key.upArrow || input === 'k') {
-            // Pilot-2026-06-23 bug: rapid k/j bursts could lose cursor position
-            // because the previous implementation read `selectedIdx` from the
-            // handler's closure. Under high keyboard-repeat rate multiple key
-            // events fire between Ink render flushes, so every invocation saw the
-            // same stale value and recomputed the same `newIdx`. Using functional
-            // setState chains the updates correctly: each pending update sees the
-            // post-update value of the previous one. The viewport offset update is
-            // nested inside the cursor updater so it always reflects the same
-            // newIdx that selectedIdx is being set to.
-            setSelectedIdx((prev) => {
-                const newIdx = Math.max(0, prev - 1);
-                setSidebarScrollOffset((off) => Math.min(off, newIdx));
-                return newIdx;
+            setNav(({ cursorRowIdx: prev, sidebarScrollOffset: off }) => {
+                const positions = selectableRowPositions;
+                if (positions.length === 0)
+                    return { cursorRowIdx: prev, sidebarScrollOffset: off };
+                const pos = positions.indexOf(prev);
+                const currentSelectableIdx = pos >= 0
+                    ? pos
+                    : Math.max(0, positions.reduce((acc, p, i) => (p <= prev ? i : acc), 0));
+                const nextSelectableIdx = Math.max(0, currentSelectableIdx - 1);
+                const newRow = positions[nextSelectableIdx] ?? prev;
+                return { cursorRowIdx: newRow, sidebarScrollOffset: Math.min(off, newRow) };
             });
             setJsonScrollOffset(0);
             setDraftValue('');
             setSaveError(null);
+            setPendingEditorFocus(null);
         }
         else if (key.downArrow || input === 'j') {
-            setSelectedIdx((prev) => {
-                const newIdx = Math.min(components.length - 1, prev + 1);
-                setSidebarScrollOffset((off) => (newIdx >= off + VISIBLE_COUNT ? newIdx - VISIBLE_COUNT + 1 : off));
-                return newIdx;
+            setNav(({ cursorRowIdx: prev, sidebarScrollOffset: off }) => {
+                const positions = selectableRowPositions;
+                if (positions.length === 0)
+                    return { cursorRowIdx: prev, sidebarScrollOffset: off };
+                const pos = positions.indexOf(prev);
+                const currentSelectableIdx = pos >= 0
+                    ? pos
+                    : Math.max(0, positions.reduce((acc, p, i) => (p <= prev ? i : acc), 0));
+                const nextSelectableIdx = Math.min(positions.length - 1, currentSelectableIdx + 1);
+                const newRow = positions[nextSelectableIdx] ?? prev;
+                const nextOff = newRow >= off + visibleCount ? newRow - visibleCount + 1 : off;
+                return { cursorRowIdx: newRow, sidebarScrollOffset: nextOff };
             });
             setJsonScrollOffset(0);
             setDraftValue('');
             setSaveError(null);
+            setPendingEditorFocus(null);
         }
     });
     if (loading) {
         return (_jsx(Box, { paddingX: 2, paddingY: 1, children: _jsx(Text, { dimColor: true, children: "Loading generated definitions..." }) }));
     }
     if (loadError) {
-        return (_jsx(Box, { paddingX: 2, paddingY: 1, children: _jsx(Text, { color: "red", children: loadError }) }));
+        return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsx(Text, { color: PALETTE.error, children: loadError }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "[q / Enter / Esc] Quit" })] }));
+    }
+    if (showHelp) {
+        return _jsx(HelpOverlay, { sections: HELP_SECTIONS, onClose: () => setShowHelp(false) });
+    }
+    const renderBreakOverlay = (width) => {
+        const highlightedCycle = slotCycles[cyclesCursor];
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, width: width, children: [_jsx(Text, { bold: true, color: PALETTE.warning, children: `BREAK CYCLE ${cyclesCursor + 1} — remove a slot edge or reject a member` }), highlightedCycle &&
+                    (() => {
+                        const segs = formatCyclePathSegments(highlightedCycle);
+                        return (_jsxs(Text, { children: ['  ', segs.map((seg, si) => seg.kind === 'slot' ? (_jsx(Text, { color: PALETTE.info, children: seg.text }, si)) : seg.kind === 'arrow' ? (_jsx(Text, { dimColor: true, children: seg.text }, si)) : (_jsx(Text, { color: PALETTE.warning, children: seg.text }, si)))] }));
+                    })(), _jsx(Text, { dimColor: true, children: highlightedCycle
+                        ? 'Deleting an edge removes it from $allowedComponents (undo with Ctrl+Z).'
+                        : 'No cycle highlighted.' }), _jsx(Text, { children: " " }), breakEdges.length > 0 && _jsx(Text, { dimColor: true, children: 'remove slot edge:' }), breakEdges.map((edge, idx) => {
+                    const isCursor = idx === breakCursor;
+                    return (_jsx(Text, { inverse: isCursor, children: `${isCursor ? '▶' : ' '} remove '${edge.toComponent}' from ${edge.fromComponent}.$slots.${edge.slotName}.$allowedComponents` }, `break-${idx}`));
+                }), breakConfirm ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { bold: true, color: PALETTE.warning, children: 'Delete this slot edge? [y] confirm  [n] cancel' })] })) : (_jsx(Text, { dimColor: true, children: '[↑↓/j/k] move  [Enter] delete  [x/Esc] close' }))] }));
+    };
+    const breakOverlayFullScreen = breakPanel.isOpen &&
+        shouldBreakOverlayGoFullScreen({
+            rows: stdout?.rows ?? FALLBACK_ROWS,
+            edgeCount: breakEdges.length,
+        });
+    if (breakOverlayFullScreen) {
+        return renderBreakOverlay();
     }
     const selected = components[selectedIdx] ?? null;
     const selectedJson = selected ? JSON.stringify({ [selected.key]: selected.entry }, null, 2) : '';
-    // A component with zero classified $properties is a real defensibility issue —
-    // it can't be pushed to Contentful (no fields). Surface it in the sidebar via
-    // the existing warning-color path (yellow) and a "(empty)" suffix so the user
-    // can see what went wrong. They can manually add props in FieldEditor or
-    // explicitly reject the component.
-    const isEmpty = (c) => Object.keys(c.entry.$properties).length === 0;
+    const isEmpty = (c) => Object.keys(c.entry.$properties).length === 0 && Object.keys(c.entry.$slots ?? {}).length === 0;
     const emptyCount = components.filter(isEmpty).length;
-    const sidebarItems = components.map((c) => ({
-        id: c.key,
-        name: isEmpty(c) ? `${c.key} (empty)` : c.key,
-        status: c.status,
-        previewAnnotation: previewAnnotations.get(c.key),
-        extractionConfidence: null,
-        needsReview: false,
-        validationErrorCount: 0,
-        validationWarningCount: isEmpty(c) ? 1 : 0,
-    }));
-    // Account for the "(empty)" suffix added to zero-prop component names so the
-    // sidebar doesn't truncate it.
-    const longestName = components.reduce((m, c) => Math.max(m, c.key.length + (isEmpty(c) ? ' (empty)'.length : 0)), 0);
-    // +5 = border (1) + status icon (1) + badge column (1) + space (1) + border (1).
-    // The badge column is reserved even when no annotation is present so the
-    // sidebar width doesn't jitter as live-preview annotations flip in/out.
-    const sidebarWidth = Math.min(Math.max(longestName + 5, 14), 30);
+    const cycleParticipantSet = cycleView.structural;
+    const sidebarSuffix = (c) => {
+        if (cycleParticipantSet.has(c.key))
+            return ' (cycle)';
+        if (isEmpty(c))
+            return ' (empty)';
+        return '';
+    };
+    const groupedItems = groupedItemsMemo;
+    const previewAnnotationByKey = previewAnnotations;
+    const longestName = components.reduce((m, c) => {
+        const suffixLen = sidebarSuffix(c).length;
+        const groupOverhead = 12; // "▸  (99 deps) ✗"
+        return Math.max(m, c.key.length + Math.max(suffixLen, groupOverhead));
+    }, 0);
+    const sidebarWidthCap = computeSidebarWidth(terminalWidth);
+    const sidebarWidth = Math.min(Math.max(longestName + 9, 18), sidebarWidthCap);
     const panelWidth = Math.max(10, terminalWidth - sidebarWidth - 4);
+    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 hasGroupRoots = (() => {
+        for (const c of closures.values())
+            if (c.nodes.length > 1)
+                return true;
+        return false;
+    })();
     const accepted = components.filter((c) => c.status === 'accepted').length;
     const rejected = components.filter((c) => c.status === 'rejected').length;
     const needsReview = components.filter((c) => c.status === 'needs-review').length;
     const propCount = selected ? Object.keys(selected.entry.$properties).length : 0;
     const slotCount = selected?.entry.$slots ? Object.keys(selected.entry.$slots).length : 0;
-    return (_jsxs(Box, { flexDirection: "column", children: [showFinalize && (_jsx(FinalizeDialog, { accepted: accepted, rejected: rejected, needsReview: needsReview, onConfirm: handleFinalizeConfirm, onCancel: () => setShowFinalize(false) })), showQuit && _jsx(QuitDialog, { hasUnsavedDrafts: false, onConfirm: onQuit, onCancel: () => setShowQuit(false) }), showRemovedPanel && !dialogOpen && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: `Removed components (${removedComponents.length})` }), _jsx(Text, { dimColor: true, children: "these will be DELETED from the target space" }), _jsx(Text, { children: " " }), removedComponents.map((rc) => (_jsx(Text, { children: `- ${rc.name}${rc.id ? `  (${rc.id})` : ''}` }, rc.id))), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "press d or Esc to close" })] })), !dialogOpen &&
+    return (_jsxs(Box, { flexDirection: "column", children: [showFinalize && (_jsx(FinalizeDialog, { accepted: accepted, rejected: rejected, needsReview: needsReview, removed: finalizePreview.removed, previewStatus: finalizePreview.status, removedScrollOffset: finalizePreview.scrollOffset, onConfirm: handleFinalizeConfirm, onCancel: () => setShowFinalize(false) })), showQuit && _jsx(QuitDialog, { hasUnsavedDrafts: false, onConfirm: onQuit, onCancel: () => setShowQuit(false) }), showUnsavedWarning && !dialogOpen && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [_jsx(Text, { bold: true, color: PALETTE.warning, children: "Unsaved changes" }), _jsx(Text, { children: "You have unsaved edits in the current field editor." }), _jsx(Text, { children: " " }), _jsx(Text, { children: '  [Enter]  Save and continue' }), _jsx(Text, { children: '  [Esc]    Discard changes and continue' }), _jsx(Text, { children: '  [Tab]    Stay in the panel' })] })), showReloadDialog && !dialogOpen && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [_jsx(Text, { bold: true, color: PALETTE.warning, children: "Reload from saved state?" }), _jsx(Text, { children: "Unsaved in-memory changes will be lost." }), _jsx(Text, { children: " " }), _jsx(Text, { children: '  [Enter]  Confirm' }), _jsx(Text, { children: '  [Esc]    Cancel' })] })), removedComponents.length > 0 && !dialogOpen && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.error, paddingX: 1, children: [_jsx(Text, { bold: true, color: PALETTE.error, children: removedComponentsHeader(removedComponents.length, true) }), !removedBannerCollapsed && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), removedComponents.map((rc) => (_jsx(Text, { children: removedComponentLine(rc) }, rc.id)))] }))] })), breakingChanges.length > 0 && !dialogOpen && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: PALETTE.warning, children: `[b] ${breakingChanges.length} breaking change${breakingChanges.length === 1 ? '' : 's'}` }) })), breakingPanel.isOpen &&
+                breakingDetailOpen &&
+                !dialogOpen &&
+                (() => {
+                    const row = breakingRows[breakingCursor];
+                    const comp = row ? breakingChanges.find((b) => b.componentName === row.componentName) : undefined;
+                    if (!comp)
+                        return null;
+                    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [_jsx(Text, { bold: true, color: PALETTE.warning, children: `Breaking changes — ${comp.componentName}` }), comp.impact && (_jsx(Text, { dimColor: true, children: `  affects ${comp.impact.affectedExperiences} experience${comp.impact.affectedExperiences === 1 ? '' : 's'}, ${comp.impact.affectedFragments} fragment${comp.impact.affectedFragments === 1 ? '' : 's'}` })), comp.changes.length === 0 ? (_jsx(Text, { dimColor: true, children: '  (no enumerated changes)' })) : (comp.changes.map((change, ci) => (_jsx(Text, { children: `  • ${formatBreakingChange(change, comp.current)}` }, `bd-detail-${ci}`)))), _jsx(Text, { dimColor: true, children: '[D/Esc] close detail' })] }));
+                })(), cyclePanel.isOpen &&
+                !dialogOpen &&
+                (() => {
+                    const PANEL_H = 20;
+                    const lines = [];
+                    lines.push(_jsx(Text, { bold: true, color: PALETTE.warning, children: `SLOT DEPENDENCY CYCLES (${slotCycles.length})` }, "cyc-title"));
+                    lines.push(_jsx(Text, { dimColor: true, children: 'push will fail until these are resolved' }, "cyc-sub"));
+                    lines.push(_jsx(Text, { dimColor: true, children: 'To fix: reject a cycle member, or break the cycle by removing a slot edge.' }, "cyc-guide"));
+                    lines.push(_jsx(Text, { children: " " }, "cyc-space"));
+                    slotCycles.forEach((cycle, idx) => {
+                        const nodeCount = new Set(cycle.path).size;
+                        const isCursor = idx === cyclesCursor;
+                        lines.push(_jsx(Text, { bold: true, inverse: isCursor, children: `${isCursor ? '▶' : ' '} Cycle ${idx + 1} (${nodeCount} component${nodeCount === 1 ? '' : 's'}):` }, `cyc-h-${idx}`));
+                        const segs = formatCyclePathSegments(cycle, 16);
+                        lines.push(_jsxs(Text, { children: ['    ', segs.map((seg, si) => seg.kind === 'slot' ? (_jsx(Text, { color: PALETTE.info, children: seg.text }, si)) : seg.kind === 'arrow' ? (_jsx(Text, { dimColor: true, children: seg.text }, si)) : (_jsx(Text, { children: seg.text }, si)))] }, `cyc-p-${idx}`));
+                        if (cycle.suggestedBreak) {
+                            const b = cycle.suggestedBreak;
+                            lines.push(_jsx(Text, { dimColor: true, children: `    Suggested fix: remove '${b.toComponent}' from ${b.fromComponent}.$slots.${b.slotName}.$allowedComponents` }, `cyc-f-${idx}`));
+                        }
+                        lines.push(_jsx(Text, { children: " " }, `cyc-s-${idx}`));
+                    });
+                    const visible = lines.slice(cyclePanelScroll, cyclePanelScroll + PANEL_H);
+                    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [visible, _jsx(Text, { dimColor: true, children: '[↑↓/j/k] move  [Enter] jump  [x] break cycle  [c/q/Esc] close' })] }));
+                })(), !dialogOpen &&
                 livePreview &&
                 (() => {
-                    // Pilot-2026-06-23 R2: at-a-glance diff summary at the top of the
-                    // step. Mutually exclusive states:
-                    //   - hook running (and we don't yet have annotations) → spinner.
-                    //   - hook disabled (creds rejected) → static disabled hint.
-                    //   - annotations populated → counts.
-                    //   - idle, no annotations, not disabled → render nothing.
                     const counts = { new: 0, changed: 0, removed: 0, breaking: 0 };
                     for (const v of previewAnnotations.values()) {
                         counts[v] = (counts[v] ?? 0) + 1;
@@ -525,14 +1519,43 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
                     }
                     if (!hasCounts)
                         return null;
-                    return (_jsxs(Box, { children: [_jsx(Text, { children: 'Preview: ' }), _jsx(Text, { color: "green", children: `${counts.new} new` }), _jsx(Text, { children: ' · ' }), _jsx(Text, { color: "yellow", children: `${counts.changed} changed` }), _jsx(Text, { children: ' · ' }), _jsx(Text, { dimColor: true, children: `${counts.removed} removed` }), removedComponents.length > 0 && _jsx(Text, { dimColor: true, children: ' ([d] removed list)' }), _jsx(Text, { children: ' · ' }), _jsx(Text, { color: "red", bold: true, children: `${counts.breaking} breaking` })] }));
-                })(), !dialogOpen && emptyCount > 0 && (_jsx(Text, { color: "yellow", children: `⚠ ${emptyCount} component${emptyCount === 1 ? '' : 's'} had no classifiable props — review with care` })), !dialogOpen && finalizeError && _jsx(Text, { color: "red", children: `⚠ ${finalizeError}` }), !dialogOpen && (_jsxs(Box, { children: [_jsx(Sidebar, { components: sidebarItems, selectedId: selected?.key ?? null, focused: sidebarFocused, scrollOffset: sidebarScrollOffset, visibleCount: VISIBLE_COUNT, onSelect: (id) => {
-                            const idx = components.findIndex((c) => c.key === id);
-                            if (idx >= 0) {
-                                setSelectedIdx(idx);
-                                setJsonScrollOffset(0);
+                    return (_jsxs(Box, { children: [_jsx(Text, { children: 'Preview: ' }), _jsx(Text, { color: PALETTE.success, children: `${counts.new} new` }), _jsx(Text, { children: ' · ' }), _jsx(Text, { color: PALETTE.warning, children: `${counts.changed} changed` }), _jsx(Text, { children: ' · ' }), _jsx(Text, { dimColor: true, children: `${counts.removed} removed` }), _jsx(Text, { children: ' · ' }), _jsx(Text, { color: PALETTE.error, bold: true, children: `${counts.breaking} breaking` })] }));
+                })(), !dialogOpen &&
+                autoRejected.length > 0 &&
+                (() => {
+                    const stillRejected = autoRejected.filter((name) => {
+                        const c = components.find((x) => x.key === name);
+                        return c?.status === 'rejected';
+                    });
+                    if (stillRejected.length === 0)
+                        return null;
+                    const participantSet = cycleView.structural;
+                    const members = stillRejected.filter((n) => participantSet.has(n)).sort();
+                    const ancestors = stillRejected.filter((n) => !participantSet.has(n)).sort();
+                    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: PALETTE.error, paddingX: 1, children: [_jsx(Text, { color: PALETTE.error, bold: true, children: `Cyclic manifest — auto-rejected ${stillRejected.length} component${stillRejected.length === 1 ? '' : 's'}:` }), members.length > 0 && _jsx(Text, { color: PALETTE.error, children: `  Cycle members: ${members.join(', ')}` }), ancestors.length > 0 && _jsx(Text, { color: PALETTE.error, children: `  Ancestors: ${ancestors.join(', ')}` }), _jsx(Text, { dimColor: true, children: undoSnapshot
+                                    ? '  [Ctrl+Z] undo · [r]/[a] manually toggle · [F] continue'
+                                    : '  [r]/[a] manually toggle · [F] continue' })] }));
+                })(), !dialogOpen && emptyCount > 0 && (_jsx(Text, { color: PALETTE.warning, children: `⚠ ${emptyCount} component${emptyCount === 1 ? '' : 's'} had no classifiable props — review with care` })), !dialogOpen && finalizeError && _jsx(Text, { color: PALETTE.error, children: `⚠ ${finalizeError}` }), !dialogOpen && (_jsxs(Box, { children: [breakingPanel.isOpen ? (_jsx(GotoBanner, { title: "Breaking changes", rows: breakingRows.map((r) => ({
+                            label: r.label,
+                            jumpTarget: r.componentName,
+                        })), cursor: breakingCursor, maxRows: panelMaxRows, width: sidebarWidth, footerHint: "[\u2191/\u2193] move \u00B7 [Enter] jump \u00B7 [D] detail \u00B7 [Esc] close" })) : lineagePanel.isOpen && focusedComponentKey ? (_jsx(LineagePanel, { focusedComponentKey: focusedComponentKey, entries: lineageEntries, cursor: lineageCursor, jumpables: lineageJumpables, maxRows: panelMaxRows, width: sidebarWidth })) : (_jsx(GroupedSidebar, { items: groupedItems, cycleParticipants: cycleParticipantSet, selectedIdx: selectedIdx, selectedRowIdx: cursorRowIdx, onSelect: (idx) => {
+                            for (let i = 0; i < visibleRowsMemo.length; i++) {
+                                if (visibleRowsMemo[i].itemIdx === idx) {
+                                    jumpCursorToRow(i);
+                                    return;
+                                }
                             }
-                        }, onScrollChange: setSidebarScrollOffset, width: sidebarWidth }), _jsx(Box, { flexGrow: 1, paddingLeft: 1, flexDirection: "column", children: selected ? (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: selected.key }), _jsx(Box, { flexGrow: 1 }), _jsxs(Text, { dimColor: true, children: [propCount, " prop", propCount !== 1 ? 's' : '', slotCount > 0 ? ` · ${slotCount} slot${slotCount !== 1 ? 's' : ''}` : '', '  ', sidebarFocused ? '[e/Tab] focus panel' : '[Tab] focus list'] })] }), panelOpen === 'prop-rationale' ? ((() => {
+                            setJsonScrollOffset(0);
+                        }, expandedGroups: expandedGroups, onToggleExpanded: (rootName) => {
+                            setExpandedGroups((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(rootName))
+                                    next.delete(rootName);
+                                else
+                                    next.add(rootName);
+                                return next;
+                            });
+                        }, width: sidebarWidth, focused: sidebarFocused, renderStatusByKey: renderStatusByKey, previewAnnotationByKey: previewAnnotationByKey, selectionStateByKey: selectionStateByKey, scrollOffset: sidebarScrollOffset, visibleCount: visibleCount, dimPredicate: dimPredicate, visibleRows: visibleRowsMemo, viewMode: columnOneView, graph: sidebarGraph })), _jsx(Box, { flexGrow: 1, paddingLeft: 1, flexDirection: "column", children: selected ? (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: selected.key }), _jsx(Box, { flexGrow: 1 }), _jsxs(Text, { dimColor: true, children: [propCount, " prop", propCount !== 1 ? 's' : '', slotCount > 0 ? ` · ${slotCount} slot${slotCount !== 1 ? 's' : ''}` : '', '  ', sidebarFocused ? '[Tab] focus panel' : '[Tab] focus list'] })] }), panelOpen === 'prop-rationale' ? ((() => {
                                     const rows = [
                                         ...(componentRationale?.props ?? []).map((p) => ({
                                             name: p.name,
@@ -569,21 +1592,27 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
                                         : undefined, onTogglePropRationale: () => {
                                         setPanelOpen('prop-rationale');
                                         setPanelScrollOffset(() => 0);
-                                    }, onToggleComponentRationale: () => {
+                                    }, propRationaleKey: "p", componentRationaleKey: "P", onToggleComponentRationale: () => {
                                         setPanelOpen('component-rationale');
                                         setPanelScrollOffset(() => 0);
                                     }, onToggleSourceExternal: () => {
                                         setPanelOpen('source');
                                         setPanelScrollOffset(() => 0);
-                                    }, onTextEntryActiveChange: setTextEntryActive }, selected.key)), saveError && _jsx(Text, { color: "red", children: '✗ ' + saveError }), _jsxs(Text, { dimColor: true, children: [sidebarFocused
-                                            ? '  [a] accept  [r] reject  [A] accept all  [J] ' +
-                                                (showJson ? 'hide JSON' : 'show JSON') +
-                                                '  [F] finalize  [e/Tab] focus panel' +
-                                                (livePreview && removedComponents.length > 0 ? '  [d] removed list' : '') +
-                                                '  [q] quit'
+                                    }, onTextEntryActiveChange: setTextEntryActive, projectSlotGraph: projectSlotGraph, currentComponentName: selected.key, onDirtyChange: setEditorDirty, discardTrigger: discardTrigger, initialFocusTarget: pendingEditorFocus && pendingEditorFocus.componentName === selected.key
+                                        ? pendingEditorFocus.target
+                                        : undefined }, pendingEditorFocus && pendingEditorFocus.componentName === selected.key
+                                    ? `${selected.key}::${pendingEditorFocus.target.kind}:${pendingEditorFocus.target.name}`
+                                    : selected.key)), saveError && _jsx(Text, { color: PALETTE.error, children: '✗ ' + saveError }), _jsxs(Text, { dimColor: true, children: [sidebarFocused
+                                            ? hasGroupRoots
+                                                ? '  [Space] expand/collapse group  [E/C] expand/collapse all'
+                                                : ''
                                             : showJson
                                                 ? '  [j/k] scroll  [Ctrl+u/d] half-page  [gg/G] top/bottom  [Tab] focus list'
-                                                : '  [Tab] focus list  (edit fields)', livePreviewHook.status === 'running' && _jsx(Text, { children: `  ${livePreviewSpinner} live preview` }), livePreviewHook.disabled && _jsx(Text, { children: '  · live preview disabled' })] })] })) : (_jsx(Text, { dimColor: true, children: "No component selected" })) })] })), !dialogOpen && (_jsx(StatusBar, { accepted: accepted, rejected: rejected, reviewed: 0, needsReview: needsReview, onApproveAll: () => {
+                                                : '  [Tab] focus list  (edit fields)', livePreviewHook.status === 'running' && _jsx(Text, { children: `  ${livePreviewSpinner} live preview` }), livePreviewHook.disabled && _jsx(Text, { children: '  · live preview disabled' })] })] })) : (_jsx(Text, { dimColor: true, children: "No component selected" })) })] })), breakPanel.isOpen && !breakOverlayFullScreen && !dialogOpen && renderBreakOverlay(), !dialogOpen && slotCycles.length > 0 && !cyclePanel.isOpen && !breakPanel.isOpen && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: PALETTE.warning, 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: PALETTE.warning, children: ['  Cycle: ', segs.map((seg, si) => seg.kind === 'slot' ? (_jsx(Text, { color: PALETTE.info, children: seg.text }, si)) : seg.kind === 'arrow' ? (_jsx(Text, { dimColor: true, children: seg.text }, si)) : (_jsx(Text, { color: PALETTE.warning, children: seg.text }, si)))] }, `cyc-banner-${idx}`));
+                    }), slotCycles.length > 3 && _jsx(Text, { color: PALETTE.warning, children: `  …${slotCycles.length - 3} more` }), _jsx(Text, { dimColor: true, children: '  press [c] for detail' })] })), !dialogOpen && searchOpen && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [`/${searchQuery}`, _jsx(Text, { color: PALETTE.info, children: '▎' }), searchQuery && _jsx(Text, { dimColor: true, children: `  (${searchMatchCount}/${components.length} matches)` })] }), autocompleteCandidates.length > 1 && (_jsx(Text, { dimColor: true, children: `  possibilities: ${autocompleteCandidates.join(' · ').slice(0, 120)}` }))] })), !dialogOpen && !searchOpen && searchQuery && (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: `/${searchQuery}  (${searchMatchCount}/${components.length} matches) · [Esc] clear` }) })), !dialogOpen && sidebarFocused && (_jsxs(Box, { columnGap: 2, flexWrap: "wrap", children: [legendEntry('[j/k]', 'move'), legendEntry('[a]', 'accept'), legendEntry('[r]', 'reject'), legendEntry('[A]', 'accept all'), legendEntry('[F]', 'finalize'), legendEntry('[L]', 'flat', columnOneView === 'flat'), legendEntry('[l]', 'lineage', lineagePanel.isOpen), legendEntry('[i]', 'focus lineage', jumpFilterTarget !== null), legendEntry('[w]', 'only breaking', activeFilters.has('broken')), slotCycles.length > 0 && legendEntry('[o]', 'only cycles', activeFilters.has('cycles')), slotCycles.length > 0 && legendEntry('[c]', 'cycle list', cyclePanel.isOpen), legendEntry('[p]', 'prop rationale', panelOpen === 'prop-rationale'), legendEntry('[P]', 'component rationale', panelOpen === 'component-rationale'), legendEntry('[s]', 'source', panelOpen === 'source'), legendEntry('[J]', showJson ? 'hide JSON' : 'show JSON', showJson), breakingChanges.length > 0 && legendEntry('[b]', 'see breaking changes', breakingPanel.isOpen), removedComponents.length > 0 &&
+                        legendEntry('[d]', removedBannerCollapsed ? 'show removed' : 'hide removed', !removedBannerCollapsed), legendEntry('[/]', 'search', searchOpen || searchQuery.length > 0), legendEntry('[Tab]', 'focus panel'), legendEntry('[Ctrl+Z]', 'undo'), legendEntry('[Ctrl+Y]', 'redo'), legendEntry('[Ctrl+R]', 'reload'), legendEntry('[?]', 'help'), legendEntry('[q]', 'quit')] })), !dialogOpen && (_jsx(StatusBar, { accepted: accepted, rejected: rejected, reviewed: 0, needsReview: needsReview, onApproveAll: () => {
                     setComponents((prev) => prev.map((c) => (c.status === 'needs-review' ? { ...c, status: 'accepted' } : c)));
                 }, onFinalize: () => setShowFinalize(true) }))] }));
 }