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

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

@@ -1,250 +1,907 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
-import React, { useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text, useStdout } from 'ink';
+import { PALETTE } from '../../../analyze/select/tui/theme.js';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
-const VISIBLE_COUNT = 10;
-const REASON_DISPLAY_MAX = 60;
-// Pilot-2026-06-25 R2: AI-flagged rows render a subtle cyan `*` glyph before
-// the name (in place of the Round-1 `[AI]` text badge). The marker persists
-// regardless of whether the operator later toggles the row INCLUDED — manual
-// decision wins; the marker is informational only.
-const AI_MARKER = '*';
-// Indentation prefix for the wrapped reason on the focused AI row. Aligns
-// the reason under the row label so the eye reads it as a continuation.
-const REASON_WRAP_INDENT = '      ';
-function truncateReason(reason) {
-    if (reason === null || reason === undefined || reason === '')
-        return '<no reason given>';
-    if (reason.length <= REASON_DISPLAY_MAX)
+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 { findSlotCycles } from '../../../analyze/cycle-detection.js';
+import { computeAutocomplete } from '../autocomplete.js';
+import { buildFlatDimPredicate, computeFilterKeys, intersectFilterKeys } from '../step-filters.js';
+import { useLineage } from '../hooks/useLineage.js';
+import { useOverlayPanel } from '../hooks/useOverlayPanel.js';
+import { computeSidebarBudget, FALLBACK_ROWS } from '../lineage-layout.js';
+import { LineagePanel } from '../../../analyze/select/tui/components/LineagePanel.js';
+import { GotoBanner } from '../../../analyze/select/tui/components/GotoBanner.js';
+import { HelpOverlay } from '../../../analyze/select/tui/components/HelpOverlay.js';
+import { legendEntry } from '../components/LegendEntry.js';
+import { AutoFilterBanner } from '../components/AutoFilterBanner.js';
+import { CounterStrip } from '../components/CounterStrip.js';
+import { isAiFlagged } from '../ai-flag.js';
+import { resolveGroupRoot } from '../group-collapse.js';
+import { buildCycleUnits, collectReachableCycleUnits, computeCycleAwareAcceptCascade, computeCycleAwareRejectCascade, } from '../../../analyze/scope-gate-cascade.js';
+import { fuzzyMatches } from '../../../analyze/fuzzy-search.js';
+import { computeDirectNeighborhood, findAllAncestors } from '../../../analyze/search-neighborhood.js';
+import { buildAddedComponentsList, buildAddedGroupsList, computeColumnWidths, computeCounters, } from '../scope-gate-columns.js';
+const FOCUSED_REASON_MAX_LINES = 4;
+const HELP_SECTIONS = [
+    {
+        title: 'Navigation',
+        entries: [
+            { keys: 'j / k / ↑ / ↓', label: 'Move cursor' },
+            { keys: 'Tab / Shift-Tab', label: 'Switch column' },
+            { keys: 'Enter', label: 'Jump to main' },
+        ],
+    },
+    {
+        title: 'Selection',
+        entries: [
+            { keys: 'a', label: 'Accept' },
+            { keys: 'r', label: 'Reject' },
+            { keys: 'A', label: 'Toggle all' },
+            { keys: 'Y', label: 'Accept non-flagged' },
+        ],
+    },
+    {
+        title: 'Sidebar views',
+        entries: [
+            { keys: 'L', label: 'Flat view' },
+            { keys: 'l', label: 'Lineage' },
+            { keys: 'i', label: 'Focus lineage' },
+            { 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: 'x', label: 'AI exclusions' },
+        ],
+    },
+    {
+        title: 'Search',
+        entries: [{ keys: '/', label: 'Search' }],
+    },
+    {
+        title: 'General',
+        entries: [
+            { keys: 'f', label: 'Continue' },
+            { keys: '?', label: 'Close help' },
+            { keys: 'q', label: 'Quit' },
+        ],
+    },
+];
+function capReasonForFocusedRow(reason, width) {
+    const safeWidth = Math.max(20, width);
+    const budget = safeWidth * FOCUSED_REASON_MAX_LINES;
+    if (reason.length <= budget)
         return reason;
-    return reason.slice(0, REASON_DISPLAY_MAX - 1).trimEnd() + '…';
+    return reason.slice(0, budget - 1).trimEnd() + '…';
 }
-function isAiFlagged(row) {
-    // INTEG-4318: `failed` means the LLM omitted a decision for this component
-    // (e.g. batch under-emit). Surface these in the AI-recommended-exclusions
-    // section so the operator sees them and can override — silent inclusion was
-    // the bug.
-    return row.aiDecision === 'rejected' || row.aiDecision === 'failed';
+function toSidebarEntry(c) {
+    const $slots = {};
+    if (c.slots) {
+        for (const s of c.slots) {
+            $slots[s.name] = { $allowedComponents: s.allowedComponents };
+        }
+    }
+    const entry = {
+        $type: 'component',
+        $properties: { __scopeGate: { $type: 'string', $category: 'content' } },
+    };
+    if (Object.keys($slots).length > 0)
+        entry.$slots = $slots;
+    return entry;
 }
 export function ScopeGateStep({ components, onConfirm, onQuit, aiFilterStatus = 'idle', aiFilterProgress = null, aiFilterError = null, onCancelAutoFilter, }) {
-    // Pilot-2026-06-25: scope-gate UX overhaul — single unified list.
-    //
-    // Inverted mental model: we now track which rows are INCLUDED rather than
-    // which are EXCLUDED. The underlying delta-on-prop pattern survives so
-    // operator decisions stay sticky across streaming AI updates:
-    //   - userExcluded: rows the operator explicitly toggled OFF
-    //   - userUnExcluded: rows the operator explicitly toggled ON
-    // Effective INCLUDED for a row:
-    //   if userExcluded.has(name): false
-    //   else if userUnExcluded.has(name): true
-    //   else: row.aiDecision !== 'rejected'   // default: follow AI, default true if AI silent
-    const [userExcluded, setUserExcluded] = useState(new Set());
-    const [userUnExcluded, setUserUnExcluded] = useState(new Set());
-    const [cursor, setCursor] = useState(0);
-    const [scrollOffset, setScrollOffset] = useState(0);
-    // Pilot-2026-06-23: `s` opens a side panel showing the full reject_reason
-    // (untruncated) for an AI-flagged row under the cursor. With the focused-row
-    // wrap landed, the panel is mostly redundant — kept for screen-reader /
-    // overflow cases per spec.
-    const [reasonPanelOpen, setReasonPanelOpen] = useState(false);
-    // Pilot-2026-06-25 R2: two-section render. AI-flagged rows go to a top
-    // section ("AI recommended exclusions"); the rest fall into "Components".
-    // Within each section we preserve prop (extraction) order. Cursor walks
-    // the unified flat list [...aiList, ...componentsList].
-    const aiList = components.filter(isAiFlagged);
-    const componentsList = components.filter((c) => !isAiFlagged(c));
-    const flatList = [...aiList, ...componentsList];
-    const isIncluded = (row) => {
-        // Pilot-2026-06-25 invariant: operator decisions are ALWAYS sticky over
-        // streaming AI updates. If the operator explicitly toggled this row
-        // (userExcluded or userUnExcluded), that wins regardless of any later
-        // aiDecision the auto-filter writes via prop updates. The [AI] badge
-        // still appears on the row — it's informational, not authoritative.
-        if (userExcluded.has(row.name))
-            return false;
-        if (userUnExcluded.has(row.name))
+    const { stdout } = useStdout();
+    const totalWidth = stdout?.columns ?? 80;
+    const columnPlan = useMemo(() => computeColumnWidths(totalWidth), [totalWidth]);
+    const sidebarWidth = columnPlan.main;
+    const [userDecisions, setUserDecisions] = useState(new Map());
+    const [nav, setNav] = useState({ cursor: 0, scrollOffset: 0 });
+    const [focusedColumn, setFocusedColumn] = useState('main');
+    const [addedComponentsCursor, setAddedComponentsCursor] = useState(0);
+    const [addedGroupsCursor, setAddedGroupsCursor] = useState(0);
+    const cursor = nav.cursor;
+    const scrollOffset = nav.scrollOffset;
+    const lineagePanel = useOverlayPanel({ toggleKey: 'l' });
+    const [lineageCursor, setLineageCursor] = useState(0);
+    const [cyclesPanelOpen, setCyclesPanelOpen] = useState(false);
+    const [cyclesCursor, setCyclesCursor] = useState(0);
+    const aiRationalePanel = useOverlayPanel({ toggleKey: 'x' });
+    const [aiCursor, setAiCursor] = useState(0);
+    const [pendingRejectCascade, setPendingRejectCascade] = useState(null);
+    const [searchOpen, setSearchOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [autocompleteCandidates, setAutocompleteCandidates] = useState([]);
+    const [jumpFilterTarget, setJumpFilterTarget] = useState(null);
+    const [columnOneView, setColumnOneView] = useState('grouped');
+    const [activeFilters, setActiveFilters] = useState(new Set());
+    const [showHelp, setShowHelp] = useState(false);
+    const getState = (name) => {
+        const v = userDecisions.get(name);
+        return v ?? 'undecided';
+    };
+    const isIncluded = (name) => getState(name) === 'accepted';
+    const applyDecisions = (entries) => {
+        setUserDecisions((prev) => {
+            const next = new Map(prev);
+            for (const [name, decision] of entries)
+                next.set(name, decision);
+            return next;
+        });
+    };
+    const groupedItems = useMemo(() => components.map((c) => ({
+        key: c.name,
+        entry: toSidebarEntry(c),
+        status: isAiFlagged(c) ? 'warning' : 'ok',
+    })), [components]);
+    const graph = useMemo(() => buildComponentGraph(groupedItems), [groupedItems]);
+    const slotCycles = useMemo(() => {
+        try {
+            return findSlotCycles(graph);
+        }
+        catch {
+            return [];
+        }
+    }, [graph]);
+    const cycleParticipants = useMemo(() => {
+        const set = new Set();
+        for (const c of slotCycles)
+            for (const n of c.path)
+                set.add(n);
+        return set;
+    }, [slotCycles]);
+    const cycleUnits = useMemo(() => buildCycleUnits(slotCycles), [slotCycles]);
+    const cyclesJumpables = useMemo(() => slotCycles.map((c, i) => ({
+        cycleIndex: i,
+        jumpTarget: c.path[0],
+    })), [slotCycles]);
+    const hasCycles = slotCycles.length > 0;
+    const closures = useMemo(() => computeAllClosures(graph), [graph]);
+    const [expandedGroups, setExpandedGroups] = useState(() => {
+        const seed = new Set(closures.keys());
+        for (const p of cycleParticipants)
+            seed.add(p);
+        return seed;
+    });
+    const seededGroupsRef = useRef(closures.size > 0 || cycleParticipants.size > 0);
+    useEffect(() => {
+        if (seededGroupsRef.current)
+            return;
+        if (closures.size === 0 && cycleParticipants.size === 0)
+            return;
+        seededGroupsRef.current = true;
+        const seed = new Set(closures.keys());
+        for (const p of cycleParticipants)
+            seed.add(p);
+        setExpandedGroups(seed);
+    }, [closures, cycleParticipants]);
+    const hasGroupRoots = useMemo(() => {
+        if (cycleParticipants.size > 0)
             return true;
-        // INTEG-4318: exclude on 'rejected' AND 'failed'. Missing/null aiDecision
-        // (auto-filter not run, or component never seen) still defaults to
-        // included so --no-auto-filter and skip-credentials flows are unchanged.
-        return row.aiDecision !== 'rejected' && row.aiDecision !== 'failed';
+        for (const c of closures.values())
+            if (c.nodes.length > 1)
+                return true;
+        return false;
+    }, [closures, cycleParticipants]);
+    const toggleExpanded = (rootName) => {
+        setExpandedGroups((prev) => {
+            const next = new Set(prev);
+            if (next.has(rootName))
+                next.delete(rootName);
+            else
+                next.add(rootName);
+            return next;
+        });
+    };
+    const brokenKeys = useMemo(() => {
+        const set = new Set();
+        for (const c of components)
+            if (isAiFlagged(c))
+                set.add(c.name);
+        return set;
+    }, [components]);
+    const filterVisibleKeys = useMemo(() => {
+        if (jumpFilterTarget) {
+            return findAllAncestors(jumpFilterTarget, graph);
+        }
+        const categoryKeys = computeFilterKeys({
+            filters: activeFilters,
+            data: { cycles: cycleParticipants, broken: brokenKeys },
+        });
+        const searchKeys = (() => {
+            if (!searchQuery)
+                return undefined;
+            const matches = groupedItems.map((it) => it.key).filter((k) => fuzzyMatches(searchQuery, k));
+            if (matches.length === 0)
+                return undefined;
+            return computeDirectNeighborhood(matches, graph);
+        })();
+        return intersectFilterKeys(categoryKeys, searchKeys);
+    }, [jumpFilterTarget, activeFilters, cycleParticipants, brokenKeys, searchQuery, groupedItems, graph]);
+    const visibleRows = useMemo(() => buildVisibleRows({
+        items: groupedItems,
+        cycleParticipants,
+        expandedGroups,
+        showFlatTier: false,
+        viewMode: columnOneView,
+        graph,
+        filterVisibleKeys,
+    }), [groupedItems, cycleParticipants, expandedGroups, columnOneView, graph, filterVisibleKeys]);
+    const total = visibleRows.length;
+    const safeCursor = Math.min(cursor, Math.max(0, total - 1));
+    const currentRow = visibleRows[safeCursor];
+    const currentRowKey = currentRow && currentRow.itemIdx >= 0 ? groupedItems[currentRow.itemIdx]?.key : undefined;
+    const focusedComponent = currentRowKey ? components.find((c) => c.name === currentRowKey) : undefined;
+    const selectionStateByKey = useMemo(() => {
+        const map = new Map();
+        for (const c of components) {
+            map.set(c.name, getState(c.name));
+        }
+        return map;
+    }, [components, userDecisions]);
+    const aiFlaggedByKey = useMemo(() => {
+        const map = new Map();
+        for (const c of components)
+            map.set(c.name, isAiFlagged(c));
+        return map;
+    }, [components]);
+    const dimPredicate = useMemo(() => buildFlatDimPredicate({
+        viewMode: columnOneView,
+        searchQuery,
+        filterVisibleKeys,
+    }), [columnOneView, searchQuery, filterVisibleKeys]);
+    const applyReject = (target) => {
+        const { toReject, toDeselect } = computeCycleAwareRejectCascade(target, graph, cycleUnits);
+        const entries = [];
+        for (const n of toReject)
+            entries.push([n, 'rejected']);
+        for (const n of toDeselect)
+            entries.push([n, 'undecided']);
+        applyDecisions(entries);
+    };
+    const applyAccept = (target) => {
+        const cascade = computeCycleAwareAcceptCascade(target, graph, cycleUnits);
+        applyDecisions([...cascade].map((n) => [n, 'accepted']));
+    };
+    const requestAccept = (name) => {
+        if (getState(name) === 'accepted')
+            return;
+        applyAccept(name);
+    };
+    const requestReject = (name) => {
+        if (getState(name) === 'rejected')
+            return;
+        const { toReject, toDeselect } = computeCycleAwareRejectCascade(name, graph, cycleUnits);
+        const ancestors = [...toReject].filter((n) => n !== name).sort();
+        const descendants = [...toDeselect].sort();
+        if (ancestors.length + descendants.length >= 2) {
+            setPendingRejectCascade({ target: name, ancestors, descendants });
+            return;
+        }
+        applyReject(name);
+    };
+    const focusedRowKey = () => {
+        const row = visibleRows[safeCursor];
+        if (!row)
+            return undefined;
+        switch (row.kind) {
+            case 'standalone':
+            case 'empty':
+            case 'group-root':
+            case 'group-child':
+            case 'flat':
+            case 'cycle':
+                return row.itemIdx >= 0 ? groupedItems[row.itemIdx]?.key : undefined;
+            default:
+                return undefined;
+        }
     };
     const partition = () => {
         const accepted = [];
         const rejected = [];
-        for (const c of flatList) {
-            if (isIncluded(c))
+        for (const c of components) {
+            if (getState(c.name) === 'accepted')
                 accepted.push(c.name);
             else
                 rejected.push(c.name);
         }
         return { accepted, rejected };
     };
-    const toggleFocused = () => {
-        const target = flatList[cursor];
-        if (!target)
-            return;
-        const currentlyIn = isIncluded(target);
-        if (currentlyIn) {
-            // Flip to EXCLUDED.
-            setUserExcluded((prev) => {
-                if (prev.has(target.name))
-                    return prev;
-                const next = new Set(prev);
-                next.add(target.name);
-                return next;
-            });
-            setUserUnExcluded((prev) => {
-                if (!prev.has(target.name))
-                    return prev;
-                const next = new Set(prev);
-                next.delete(target.name);
-                return next;
-            });
-        }
-        else {
-            // Flip to INCLUDED.
-            setUserUnExcluded((prev) => {
-                if (prev.has(target.name))
-                    return prev;
-                const next = new Set(prev);
-                next.add(target.name);
-                return next;
-            });
-            setUserExcluded((prev) => {
-                if (!prev.has(target.name))
-                    return prev;
-                const next = new Set(prev);
-                next.delete(target.name);
-                return next;
-            });
+    const { entries: lineageEntries, jumpables: lineageJumpables } = useLineage(focusedComponent?.name ?? null, graph);
+    const { sidebarVisibleCount: visibleCount, panelMaxRows } = computeSidebarBudget({
+        rows: stdout?.rows ?? FALLBACK_ROWS,
+        panelOpen: lineagePanel.isOpen,
+        entryCount: lineageEntries.length,
+    });
+    useEffect(() => {
+        setNav((prev) => {
+            const maxIdx = Math.max(0, visibleRows.length - 1);
+            const nextCursor = Math.min(prev.cursor, maxIdx);
+            const nextScroll = Math.min(prev.scrollOffset, maxIdx);
+            if (nextCursor === prev.cursor && nextScroll === prev.scrollOffset)
+                return prev;
+            return { cursor: nextCursor, scrollOffset: nextScroll };
+        });
+    }, [visibleRows]);
+    const searchMatches = useMemo(() => {
+        if (!searchQuery)
+            return [];
+        return components.filter((c) => fuzzyMatches(searchQuery, c.name)).map((c) => c.name);
+    }, [components, searchQuery]);
+    const findRowIndexForName = (name) => {
+        for (let i = 0; i < visibleRows.length; i++) {
+            const row = visibleRows[i];
+            if (row.itemIdx < 0)
+                continue;
+            if (groupedItems[row.itemIdx]?.key === name)
+                return i;
         }
+        return -1;
+    };
+    const jumpCursorTo = (name) => {
+        const idx = findRowIndexForName(name);
+        if (idx < 0)
+            return;
+        setNav(({ scrollOffset: prev }) => {
+            let nextScroll = prev;
+            if (idx < prev)
+                nextScroll = idx;
+            else if (idx >= prev + visibleCount)
+                nextScroll = idx - visibleCount + 1;
+            return { cursor: idx, scrollOffset: nextScroll };
+        });
     };
     useImmediateInput((input, key) => {
+        if (showHelp)
+            return;
+        if (pendingRejectCascade) {
+            if (input === 'y' || input === 'Y') {
+                applyReject(pendingRejectCascade.target);
+                setPendingRejectCascade(null);
+                return;
+            }
+            if (input === 'n' || input === 'N' || key.escape) {
+                setPendingRejectCascade(null);
+                return;
+            }
+            return;
+        }
+        if (searchOpen) {
+            if (key.escape) {
+                setSearchOpen(false);
+                setSearchQuery('');
+                setAutocompleteCandidates([]);
+                return;
+            }
+            if (key.return) {
+                if (!searchQuery || searchMatches.length === 0) {
+                    setSearchOpen(false);
+                    setSearchQuery('');
+                    setAutocompleteCandidates([]);
+                    return;
+                }
+                const cursorRow = visibleRows[safeCursor];
+                const cursorItemName = cursorRow && cursorRow.itemIdx >= 0 ? groupedItems[cursorRow.itemIdx]?.key : undefined;
+                let jumped = false;
+                for (let i = safeCursor; i < visibleRows.length; i++) {
+                    const r = visibleRows[i];
+                    if (r.itemIdx < 0)
+                        continue;
+                    const n = groupedItems[r.itemIdx]?.key;
+                    if (n && n !== cursorItemName && fuzzyMatches(searchQuery, n)) {
+                        jumpCursorTo(n);
+                        jumped = true;
+                        break;
+                    }
+                }
+                if (!jumped) {
+                    for (let i = 0; i < visibleRows.length; i++) {
+                        const r = visibleRows[i];
+                        if (r.itemIdx < 0)
+                            continue;
+                        const n = groupedItems[r.itemIdx]?.key;
+                        if (n && fuzzyMatches(searchQuery, n)) {
+                            jumpCursorTo(n);
+                            break;
+                        }
+                    }
+                }
+                setSearchOpen(false);
+                return;
+            }
+            if (key.tab) {
+                const { completion, candidates } = computeAutocomplete(searchQuery, components.map((c) => c.name));
+                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 (cyclesPanelOpen) {
+            if (key.escape || input === 'c') {
+                setCyclesPanelOpen(false);
+                return;
+            }
+            if (key.upArrow || input === 'k') {
+                setCyclesCursor((c) => Math.max(0, c - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setCyclesCursor((c) => Math.min(Math.max(0, cyclesJumpables.length - 1), c + 1));
+                return;
+            }
+            if (key.return) {
+                const target = cyclesJumpables[cyclesCursor];
+                if (target)
+                    jumpCursorTo(target.jumpTarget);
+                setCyclesPanelOpen(false);
+                return;
+            }
+            return;
+        }
+        if (lineagePanel.isOpen) {
+            if (input === 'c' && hasCycles) {
+                lineagePanel.close();
+                setCyclesPanelOpen(true);
+                setCyclesCursor(0);
+                return;
+            }
+            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.return) {
+                const target = lineageJumpables[lineageCursor];
+                if (target && (target.entry.kind === 'ancestor' || target.entry.kind === 'descendant')) {
+                    jumpCursorTo(target.entry.jumpTarget);
+                }
+                lineagePanel.close();
+                return;
+            }
+            return;
+        }
+        if (aiRationalePanel.isOpen) {
+            if (aiRationalePanel.handleInput(input, key))
+                return;
+            if (key.upArrow || input === 'k') {
+                setAiCursor((c) => Math.max(0, c - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setAiCursor((c) => Math.min(Math.max(0, aiRows.length - 1), c + 1));
+                return;
+            }
+            if (key.return) {
+                const row = aiRows[aiCursor];
+                if (row)
+                    jumpCursorTo(row.jumpTarget);
+                aiRationalePanel.close();
+                return;
+            }
+            return;
+        }
         if (input === 'q' || key.escape) {
-            // Feature 3: while auto-filter is running, q cancels the LLM run instead
-            // of quitting the wizard. After completion (or if no auto-filter ran), q
-            // falls back to the existing wizard-quit behavior.
             if (aiFilterStatus === 'running' && onCancelAutoFilter) {
                 onCancelAutoFilter();
                 return;
             }
-            // Esc also closes the reason panel without quitting.
-            if (key.escape && reasonPanelOpen) {
-                setReasonPanelOpen(false);
+            if (key.escape && jumpFilterTarget) {
+                setJumpFilterTarget(null);
+                return;
+            }
+            if (key.escape && searchQuery) {
+                setSearchQuery('');
+                setAutocompleteCandidates([]);
                 return;
             }
             onQuit();
             return;
         }
+        if (input === '?') {
+            setShowHelp(true);
+            return;
+        }
         if (input === 'f' || input === 'F') {
             onConfirm(partition());
             return;
         }
-        if (input === 's') {
-            setReasonPanelOpen((prev) => !prev);
+        if (input === 'l') {
+            if (focusedColumn === 'added-components') {
+                const entry = addedComponents[safeAddedComponentsCursor];
+                if (entry)
+                    jumpCursorTo(entry.name);
+            }
+            else if (focusedColumn === 'added-groups') {
+                const g = addedGroups[safeAddedGroupsCursor];
+                if (g)
+                    jumpCursorTo(g.name);
+            }
+            lineagePanel.open();
+            setLineageCursor(0);
+            setCyclesPanelOpen(false);
+            aiRationalePanel.close();
+            return;
+        }
+        if (input === 'c') {
+            if (!hasCycles)
+                return;
+            setCyclesPanelOpen(true);
+            setCyclesCursor(0);
+            lineagePanel.close();
+            aiRationalePanel.close();
+            return;
+        }
+        if (input === 'x') {
+            if (aiRows.length === 0)
+                return;
+            aiRationalePanel.open();
+            setAiCursor(0);
+            lineagePanel.close();
+            setCyclesPanelOpen(false);
+            return;
+        }
+        if (input === '/') {
+            setSearchOpen(true);
+            return;
+        }
+        if (input === 'o') {
+            if (!hasCycles)
+                return;
+            setActiveFilters((prev) => {
+                const next = new Set(prev);
+                if (next.has('cycles'))
+                    next.delete('cycles');
+                else
+                    next.add('cycles');
+                return next;
+            });
+            return;
+        }
+        if (input === 'i' && !key.tab && !key.ctrl) {
+            const targetKey = focusedColumn === 'main'
+                ? focusedRowKey()
+                : focusedColumn === 'added-components'
+                    ? addedComponents[safeAddedComponentsCursor]?.name
+                    : addedGroups[safeAddedGroupsCursor]?.name;
+            if (!targetKey)
+                return;
+            setJumpFilterTarget((prev) => (prev === targetKey ? null : targetKey));
+            return;
+        }
+        if (input === ' ') {
+            if (focusedColumn !== 'main')
+                return;
+            const key = focusedRowKey();
+            if (!key)
+                return;
+            const rootName = resolveGroupRoot(key, closures, cycleParticipants);
+            if (!rootName)
+                return;
+            toggleExpanded(rootName);
+            return;
+        }
+        if (input === 'E' && focusedColumn === 'main') {
+            const roots = new Set();
+            for (const [name, closure] of closures.entries()) {
+                if (closure.nodes.length > 1)
+                    roots.add(name);
+            }
+            for (const p of cycleParticipants)
+                roots.add(p);
+            setExpandedGroups(roots);
             return;
         }
-        // `a`, space, and `r` are all aliases for "toggle focused row INCLUDED ↔ EXCLUDED".
-        // `r` kept for muscle-memory; it no longer means "reject".
-        if (input === 'a' || input === ' ' || input === 'r') {
-            toggleFocused();
+        if (input === 'C' && focusedColumn === 'main') {
+            setExpandedGroups(new Set());
+            return;
+        }
+        if (input === 'a' || input === 'r') {
+            const isReject = input === 'r';
+            if (focusedColumn === 'added-components') {
+                if (!isReject)
+                    return;
+                const entry = addedComponents[safeAddedComponentsCursor];
+                if (entry)
+                    requestReject(entry.name);
+                return;
+            }
+            if (focusedColumn === 'added-groups') {
+                if (!isReject)
+                    return;
+                const g = addedGroups[safeAddedGroupsCursor];
+                if (g)
+                    requestReject(g.name);
+                return;
+            }
+            const key = focusedRowKey();
+            if (!key)
+                return;
+            if (isReject)
+                requestReject(key);
+            else
+                requestAccept(key);
+            return;
+        }
+        if (input === 'L') {
+            const currentKey = currentRowKey;
+            const nextView = columnOneView === 'grouped' ? 'flat' : 'grouped';
+            const nextRows = buildVisibleRows({
+                items: groupedItems,
+                cycleParticipants,
+                expandedGroups,
+                showFlatTier: false,
+                viewMode: nextView,
+                graph,
+            });
+            let nextCursor = 0;
+            if (currentKey) {
+                for (let i = 0; i < nextRows.length; i++) {
+                    const r = nextRows[i];
+                    if (r.itemIdx < 0)
+                        continue;
+                    if (groupedItems[r.itemIdx]?.key === currentKey) {
+                        nextCursor = i;
+                        break;
+                    }
+                }
+            }
+            const nextScroll = nextCursor < scrollOffset
+                ? nextCursor
+                : nextCursor >= scrollOffset + visibleCount
+                    ? nextCursor - visibleCount + 1
+                    : scrollOffset;
+            setColumnOneView(nextView);
+            setNav({ cursor: nextCursor, scrollOffset: nextScroll });
             return;
         }
         if (input === 'A') {
-            // Pilot-2026-06-25 R2: toggle-all operates ONLY on the Components
-            // section. The AI section's defaults stay put — operators rarely want
-            // a mass-include of AI-flagged rows via one keystroke. Toggle behavior:
-            // if any Components row is excluded, include them all; else exclude all.
-            const compNames = componentsList.map((c) => c.name);
-            const anyCompExcluded = componentsList.some((c) => !isIncluded(c));
-            if (anyCompExcluded) {
-                setUserUnExcluded((prev) => {
-                    const next = new Set(prev);
-                    for (const n of compNames)
-                        next.add(n);
-                    return next;
-                });
-                setUserExcluded((prev) => {
-                    const next = new Set(prev);
-                    for (const n of compNames)
-                        next.delete(n);
-                    return next;
-                });
+            const nonCycle = components.filter((c) => !cycleParticipants.has(c.name)).map((c) => c.name);
+            const anyNotAccepted = nonCycle.some((n) => getState(n) !== 'accepted');
+            const target = anyNotAccepted ? 'accepted' : 'rejected';
+            if (target === 'accepted') {
+                const cyclesToInclude = collectReachableCycleUnits(nonCycle, graph, cycleUnits);
+                const entries = nonCycle.map((n) => [n, 'accepted']);
+                for (const n of cyclesToInclude)
+                    entries.push([n, 'accepted']);
+                applyDecisions(entries);
             }
             else {
-                setUserExcluded((prev) => {
-                    const next = new Set(prev);
-                    for (const n of compNames)
-                        next.add(n);
-                    return next;
-                });
-                setUserUnExcluded((prev) => {
-                    const next = new Set(prev);
-                    for (const n of compNames)
-                        next.delete(n);
-                    return next;
-                });
+                const entries = nonCycle.map((n) => [n, 'rejected']);
+                for (const c of components) {
+                    if (cycleParticipants.has(c.name) && getState(c.name) === 'accepted') {
+                        entries.push([c.name, 'undecided']);
+                    }
+                }
+                applyDecisions(entries);
+            }
+            return;
+        }
+        if (input === 'Y') {
+            const seeds = components.filter((c) => !cycleParticipants.has(c.name) && !isAiFlagged(c)).map((c) => c.name);
+            const cyclesToInclude = collectReachableCycleUnits(seeds, graph, cycleUnits);
+            const entries = seeds.map((n) => [n, 'accepted']);
+            for (const n of cyclesToInclude)
+                entries.push([n, 'accepted']);
+            applyDecisions(entries);
+            return;
+        }
+        if (key.tab) {
+            if (columnPlan.layout !== 'three-column')
+                return;
+            const forward = ['main', 'added-components', 'added-groups'];
+            const curIdx = forward.indexOf(focusedColumn);
+            const delta = key.shiftTab ? -1 : 1;
+            setFocusedColumn(forward[(curIdx + delta + forward.length) % forward.length]);
+            return;
+        }
+        if (key.return) {
+            if (focusedColumn === 'added-components') {
+                const entry = addedComponents[safeAddedComponentsCursor];
+                if (entry)
+                    jumpCursorTo(entry.name);
+                setFocusedColumn('main');
+                return;
+            }
+            if (focusedColumn === 'added-groups') {
+                const g = addedGroups[safeAddedGroupsCursor];
+                if (g)
+                    jumpCursorTo(g.name);
+                setFocusedColumn('main');
+                return;
             }
             return;
         }
         if (key.upArrow || input === 'k') {
-            const len = flatList.length;
-            if (len === 0)
+            if (focusedColumn === 'added-components') {
+                if (addedComponents.length === 0)
+                    return;
+                setAddedComponentsCursor((c) => Math.max(0, c - 1));
+                return;
+            }
+            if (focusedColumn === 'added-groups') {
+                if (addedGroups.length === 0)
+                    return;
+                setAddedGroupsCursor((c) => Math.max(0, c - 1));
                 return;
-            setCursor((c) => {
+            }
+            if (total === 0)
+                return;
+            setNav(({ cursor: c, scrollOffset: prev }) => {
                 const next = c <= 0 ? 0 : c - 1;
-                setScrollOffset((prev) => Math.min(prev, next));
-                return next;
+                return { cursor: next, scrollOffset: Math.min(prev, next) };
             });
             return;
         }
         if (key.downArrow || input === 'j') {
-            const len = flatList.length;
-            if (len === 0)
+            if (focusedColumn === 'added-components') {
+                if (addedComponents.length === 0)
+                    return;
+                setAddedComponentsCursor((c) => Math.min(addedComponents.length - 1, c + 1));
                 return;
-            setCursor((c) => {
-                const next = c >= len - 1 ? len - 1 : c + 1;
-                setScrollOffset((prev) => (next >= prev + VISIBLE_COUNT ? next - VISIBLE_COUNT + 1 : prev));
-                return next;
+            }
+            if (focusedColumn === 'added-groups') {
+                if (addedGroups.length === 0)
+                    return;
+                setAddedGroupsCursor((c) => Math.min(addedGroups.length - 1, c + 1));
+                return;
+            }
+            if (total === 0)
+                return;
+            setNav(({ cursor: c, scrollOffset: prev }) => {
+                const next = c >= total - 1 ? total - 1 : c + 1;
+                const nextScroll = next >= prev + visibleCount ? next - visibleCount + 1 : prev;
+                return { cursor: next, scrollOffset: nextScroll };
             });
             return;
         }
     });
-    const total = flatList.length;
-    const includedCount = useMemo(() => flatList.filter((c) => isIncluded(c)).length, [components, userExcluded, userUnExcluded]);
-    const hasAnyAi = flatList.some(isAiFlagged);
-    const visibleEnd = Math.min(scrollOffset + VISIBLE_COUNT, total);
-    const visible = flatList.slice(scrollOffset, visibleEnd);
-    const above = scrollOffset;
-    const below = Math.max(0, total - visibleEnd);
-    // ── Banner / status helpers ───────────────────────────────────────────────
-    const showRunningHeader = aiFilterStatus === 'running' && aiFilterProgress !== null && aiFilterProgress.total > 0;
-    const showCancelledBanner = aiFilterStatus === 'cancelled';
-    const showFailedBanner = aiFilterStatus === 'failed';
-    const allRejected = aiFilterStatus === 'complete' && total > 0 && flatList.every((c) => !isIncluded(c));
-    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsx(Text, { color: "green", children: "\u2713 Extraction complete" }), _jsxs(Text, { dimColor: true, children: ["Found ", total, " component", total === 1 ? '' : 's', ". Pick which ones to import. Generation runs only on the included set."] }), showRunningHeader && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsxs(Text, { color: "cyan", children: ["[AI filtering (", aiFilterProgress.done, "/", aiFilterProgress.total, ")\u2026] ", _jsx(Text, { dimColor: true, children: "[q] cancels" })] }) })), showCancelledBanner && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "yellow", children: ["AI auto-filter cancelled", aiFilterProgress ? ` at ${aiFilterProgress.done}/${aiFilterProgress.total}` : '', ". Review remaining manually."] }) })), showFailedBanner && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "yellow", children: ["AI auto-filter failed: ", aiFilterError ?? 'unknown error', ". Continuing without AI suggestions."] }) })), reasonPanelOpen && flatList[cursor] !== undefined && isAiFlagged(flatList[cursor]) && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, marginTop: 1, children: [_jsx(Text, { dimColor: true, bold: true, children: `AI rejection reason: ${flatList[cursor].name}` }), _jsx(Text, { children: flatList[cursor].aiReason ?? '<no reason given>' }), _jsx(Text, { dimColor: true, children: "[s] close \u00B7 [Esc] close" })] })), allRejected ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellow", children: "AI excluded all components \u2014 press [a] to override or [q] to quit" }) })) : (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [above > 0 && _jsxs(Text, { dimColor: true, children: ["\u2191 ", above, " above"] }), visible.map((c, vi) => {
-                        const i = vi + scrollOffset;
-                        const isCursor = i === cursor;
-                        const included = isIncluded(c);
-                        const aiFlagged = isAiFlagged(c);
-                        const prefix = isCursor ? '›' : ' ';
-                        // R2: color-glyphs replace word labels. Green [✓] for included,
-                        // red [✗] for excluded. The component name follows the same
-                        // color UNLESS the row is the cursor row, in which case the
-                        // name flips to cyan (state glyph keeps its red/green).
-                        const stateGlyph = included ? '[✓]' : '[✗]';
-                        const stateColor = included ? 'green' : 'red';
-                        // R2: cyan `*` glyph replaces the verbose `[AI]` badge.
-                        const aiMarkerNode = aiFlagged ? _jsx(Text, { color: "cyan", children: `${AI_MARKER} ` }) : null;
-                        const inlineReason = !isCursor && aiFlagged ? ` ${truncateReason(c.aiReason)}` : '';
-                        const showAiHeader = aiList.length > 0 && i === 0;
-                        const showComponentsHeader = componentsList.length > 0 && i === aiList.length;
-                        const header = showAiHeader ? (_jsx(Text, { bold: true, children: `AI recommended exclusions (${aiList.length})` }, `hdr-ai-${i}`)) : showComponentsHeader ? (_jsx(Text, { bold: true, children: `Components (${componentsList.length})` }, `hdr-comp-${i}`)) : null;
-                        if (isCursor) {
-                            const wrapReason = aiFlagged && c.aiReason !== null && c.aiReason !== undefined && c.aiReason.length > 0;
-                            return (_jsxs(React.Fragment, { children: [header, _jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: `${prefix} ` }), aiMarkerNode, _jsx(Text, { color: stateColor, children: stateGlyph }), _jsx(Text, { color: "cyan", children: ` ${c.name}` })] }), wrapReason && _jsx(Text, { dimColor: true, children: `${REASON_WRAP_INDENT}${c.aiReason}` })] }, c.componentId));
+    const includedCount = useMemo(() => components.filter((c) => isIncluded(c.name)).length, [components, userDecisions]);
+    const hasAnyAi = components.some(isAiFlagged);
+    const aiExcludedCount = components.filter(isAiFlagged).length;
+    const aiExcludedWithReasons = components.filter((c) => isAiFlagged(c) && c.aiReason !== null && c.aiReason !== undefined && c.aiReason !== '');
+    const aiRows = useMemo(() => aiExcludedWithReasons.map((c) => ({
+        label: `${c.name} — ${c.aiReason}`,
+        jumpTarget: c.name,
+    })), [aiExcludedWithReasons]);
+    const selectedItemIdx = currentRow && currentRow.itemIdx >= 0 ? currentRow.itemIdx : -1;
+    const nothingIncluded = components.length > 0 && components.every((c) => !isIncluded(c.name));
+    const totalComponents = components.length;
+    const totalMatches = searchQuery ? searchMatches.length : 0;
+    const addedComponents = useMemo(() => buildAddedComponentsList(components, selectionStateByKey, cycleParticipants), [components, selectionStateByKey, cycleParticipants]);
+    const addedGroups = useMemo(() => buildAddedGroupsList(closures, selectionStateByKey, cycleParticipants, cycleUnits), [closures, selectionStateByKey, cycleParticipants, cycleUnits]);
+    const counters = useMemo(() => computeCounters(components, closures, selectionStateByKey), [components, closures, selectionStateByKey]);
+    const safeAddedComponentsCursor = Math.min(addedComponentsCursor, Math.max(0, addedComponents.length - 1));
+    const safeAddedGroupsCursor = Math.min(addedGroupsCursor, Math.max(0, addedGroups.length - 1));
+    if (showHelp) {
+        return _jsx(HelpOverlay, { sections: HELP_SECTIONS, onClose: () => setShowHelp(false) });
+    }
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, children: [_jsx(Text, { color: PALETTE.success, children: "\u2713 Extraction complete" }), _jsxs(Text, { dimColor: true, children: ["Found ", totalComponents, " component", totalComponents === 1 ? '' : 's', ". Pick which ones to import. Generation runs only on the included set."] }), _jsx(AutoFilterBanner, { status: aiFilterStatus, progress: aiFilterProgress, error: aiFilterError }), hasAnyAi && (_jsx(Box, { children: _jsxs(Text, { dimColor: true, children: [`AI recommended exclusions (${aiExcludedCount})`, aiRows.length > 0 && _jsx(Text, { color: PALETTE.info, children: ' — [x] review & jump' })] }) })), _jsx(CounterStrip, { counters: counters, totalWidth: totalWidth }), hasCycles && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "If you must have components with cycles, select them together into the generate step and then use the editor to fix them." }) })), nothingIncluded && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: PALETTE.warning, children: ["nothing selected \u2014 press ", _jsx(Text, { color: PALETTE.info, children: "[Y]" }), " to accept all non-flagged,", ' ', _jsx(Text, { color: PALETTE.info, children: "[A]" }), " to toggle all, or ", _jsx(Text, { color: PALETTE.info, children: "[a]" }), " to accept the highlighted row"] }) })), _jsxs(Box, { flexDirection: "row", children: [aiRationalePanel.isOpen ? (_jsx(GotoBanner, { title: `AI recommended exclusions (${aiExcludedCount})`, rows: aiRows, cursor: aiCursor, maxRows: panelMaxRows, width: sidebarWidth, footerHint: "[\u2191/\u2193] move \u00B7 [Enter] jump \u00B7 [x/Esc] close" })) : lineagePanel.isOpen && focusedComponent ? (_jsx(LineagePanel, { focusedComponentKey: focusedComponent.name, entries: lineageEntries, cursor: lineageCursor, jumpables: lineageJumpables, maxRows: panelMaxRows, width: sidebarWidth })) : (_jsx(GroupedSidebar, { items: groupedItems, cycleParticipants: cycleParticipants, selectedIdx: selectedItemIdx, selectedRowIdx: safeCursor, onSelect: () => { }, expandedGroups: expandedGroups, onToggleExpanded: toggleExpanded, width: sidebarWidth, focused: focusedColumn === 'main', scrollOffset: scrollOffset, visibleCount: visibleCount, showFlatTier: false, selectionStateByKey: selectionStateByKey, aiFlaggedByKey: aiFlaggedByKey, dimPredicate: dimPredicate, visibleRows: visibleRows, viewMode: columnOneView, graph: graph })), columnPlan.layout === 'three-column' && (_jsxs(_Fragment, { children: [_jsx(Box, { width: 2, flexShrink: 0 }), _jsx(AddedComponentsColumn, { width: columnPlan.added, entries: addedComponents, cursor: safeAddedComponentsCursor, focused: focusedColumn === 'added-components', aiFlaggedByKey: aiFlaggedByKey, visibleCount: visibleCount }), _jsx(Box, { width: 2, flexShrink: 0 }), _jsx(AddedGroupsColumn, { width: columnPlan.groups, entries: addedGroups, cursor: safeAddedGroupsCursor, focused: focusedColumn === 'added-groups', aiFlaggedByKey: aiFlaggedByKey, visibleCount: visibleCount })] }))] }), focusedComponent && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: PALETTE.info, children: focusedComponent.name }), _jsx(Text, { dimColor: true, children: ' — ' }), isIncluded(focusedComponent.name) ? (_jsx(Text, { color: PALETTE.success, children: "included" })) : (_jsx(Text, { color: PALETTE.error, children: "excluded" })), isAiFlagged(focusedComponent) && (_jsx(Text, { color: PALETTE.warning, bold: true, children: ' [×]' }))] }), isAiFlagged(focusedComponent) &&
+                        focusedComponent.aiReason !== null &&
+                        focusedComponent.aiReason !== undefined &&
+                        focusedComponent.aiReason !== '' && (_jsx(Box, { width: totalWidth, height: FOCUSED_REASON_MAX_LINES, flexShrink: 0, children: _jsx(Text, { dimColor: true, wrap: "wrap", children: capReasonForFocusedRow(focusedComponent.aiReason, totalWidth) }) }))] })), cyclesPanelOpen && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: PALETTE.warning, paddingX: 1, marginTop: 1, children: [_jsx(Text, { bold: true, color: PALETTE.warning, children: `Cycles detected (${slotCycles.length}):` }), _jsx(Text, { children: " " }), slotCycles.map((cycle, i) => {
+                        const isCursor = i === cyclesCursor;
+                        const parts = [];
+                        for (let idx = 0; idx < cycle.edges.length; idx++) {
+                            parts.push(cycle.path[idx]);
+                            parts.push(`[${cycle.edges[idx].slotName}]`);
                         }
-                        return (_jsxs(React.Fragment, { children: [header, _jsxs(Text, { children: [_jsx(Text, { children: `${prefix} ` }), aiMarkerNode, _jsx(Text, { color: stateColor, children: stateGlyph }), _jsx(Text, { color: stateColor, children: ` ${c.name}` }), inlineReason !== '' && _jsx(Text, { dimColor: true, children: inlineReason })] })] }, c.componentId));
-                    }), below > 0 && _jsxs(Text, { dimColor: true, children: ["\u2193 ", below, " below"] })] })), _jsxs(Box, { gap: 3, marginTop: 1, children: [includedCount > 0 ? (_jsxs(Text, { children: [_jsx(Text, { color: "green", children: includedCount }), _jsxs(Text, { dimColor: true, children: ["/", total, " included"] })] })) : (_jsx(Text, { color: "yellow", children: "none included" })), _jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "[j/k]" }), " ", _jsx(Text, { dimColor: true, children: "move" })] }), _jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "[a/space]" }), " ", _jsx(Text, { dimColor: true, children: "toggle" })] }), _jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "[A]" }), " ", _jsx(Text, { dimColor: true, children: "toggle all" })] }), _jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "[f]" }), " ", _jsx(Text, { dimColor: true, children: "continue" })] }), _jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "[q]" }), " ", _jsx(Text, { dimColor: true, children: "quit" })] }), hasAnyAi && (_jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "[s]" }), " ", _jsx(Text, { dimColor: true, children: "AI reason" })] })), hasAnyAi && (_jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "*" }), " ", _jsx(Text, { dimColor: true, children: "originally excluded by AI" })] }))] })] }));
+                        parts.push(cycle.path[cycle.path.length - 1]);
+                        const label = `Cycle ${i + 1}: ${parts.join(' → ')}`;
+                        return (_jsxs(Text, { children: [isCursor ? (_jsx(Text, { color: PALETTE.info, bold: true, children: '▶' })) : (_jsx(Text, { children: " " })), _jsx(Text, { color: PALETTE.warning, inverse: isCursor, children: ' ' + label })] }, i));
+                    }), _jsx(Text, { dimColor: true, children: "[\u2191/\u2193] move \u00B7 [Enter] jump \u00B7 [c/Esc] close" })] })), pendingRejectCascade && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: PALETTE.warning, paddingX: 1, marginTop: 1, children: [_jsx(Text, { bold: true, color: PALETTE.warning, children: `Rejecting ${pendingRejectCascade.target} will:` }), pendingRejectCascade.ancestors.length > 0 && (_jsx(Text, { children: `- Reject ancestors: ${pendingRejectCascade.ancestors.join(', ')}` })), pendingRejectCascade.descendants.length > 0 && (_jsx(Text, { children: `- Deselect descendants: ${pendingRejectCascade.descendants.join(', ')}` })), _jsx(Text, { dimColor: true, children: "[y] confirm \u00B7 [n]/[Esc] cancel" })] })), searchOpen && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { children: [`/${searchQuery}`, _jsx(Text, { color: PALETTE.info, children: '▎' }), searchQuery && _jsx(Text, { dimColor: true, children: `  (${totalMatches}/${totalComponents} matches)` })] }), autocompleteCandidates.length > 1 && (_jsx(Text, { dimColor: true, children: `  possibilities: ${autocompleteCandidates.join(' · ').slice(0, 120)}` }))] })), !searchOpen && searchQuery && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: `/${searchQuery}  (${totalMatches}/${totalComponents} matches) · [Esc] clear` }) })), _jsxs(Box, { columnGap: 2, marginTop: 1, flexWrap: "wrap", children: [includedCount > 0 ? (_jsxs(Text, { children: [_jsx(Text, { color: PALETTE.success, children: includedCount }), _jsxs(Text, { dimColor: true, children: ["/", totalComponents, " included"] })] })) : (_jsx(Text, { color: PALETTE.warning, children: "none included" })), legendEntry('[j/k]', 'move'), legendEntry('[a]', 'accept'), legendEntry('[r]', 'reject'), hasGroupRoots && legendEntry('[space]', 'expand/collapse group'), hasGroupRoots && legendEntry('[E/C]', 'expand/collapse all'), legendEntry('[A]', 'toggle all'), legendEntry('[Y]', 'accept non-flagged'), legendEntry('[L]', 'flat', columnOneView === 'flat'), legendEntry('[l]', 'lineage', lineagePanel.isOpen), legendEntry('[i]', 'focus lineage', jumpFilterTarget !== null), hasCycles && legendEntry('[o]', 'only cycles', activeFilters.has('cycles')), hasCycles && legendEntry('[c]', 'cycle list', cyclesPanelOpen), legendEntry('[/]', 'search', searchOpen || searchQuery.length > 0), legendEntry('[f]', 'continue'), legendEntry('[?]', 'help'), legendEntry('[q]', 'quit'), columnPlan.layout === 'three-column' && legendEntry('[Tab/Shift-Tab]', 'switch column'), columnPlan.layout === 'three-column' && legendEntry('[Enter]', 'jump to main'), hasAnyAi && legendEntry('[x]', 'AI exclusions', aiRationalePanel.isOpen), hasAnyAi && (_jsxs(Text, { children: [_jsx(Text, { color: PALETTE.warning, bold: true, children: "[\u00D7]" }), ' ', _jsx(Text, { dimColor: true, children: "AI recommends excluding" })] }))] })] }));
+}
+function ColumnHeader(props) {
+    const { title, width, focused } = props;
+    const sep = '─'.repeat(Math.max(0, width - 2));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: focused ? PALETTE.inverse : PALETTE.info, inverse: focused, children: title }), _jsx(Text, { dimColor: true, children: sep })] }));
+}
+export function sideColumnLabelStyle(input) {
+    const { isCycle, isSelected, focused } = input;
+    const isCursor = isSelected && focused;
+    if (isCursor) {
+        return {
+            nameColor: PALETTE.inverse,
+            nameBold: true,
+            nameInverse: true,
+            nameUnderline: false,
+            suffixColor: PALETTE.inverse,
+            suffixDim: false,
+            suffixInverse: true,
+            suffixUnderline: false,
+        };
+    }
+    const underline = isSelected && !focused;
+    if (isCycle) {
+        return {
+            nameColor: PALETTE.warning,
+            nameBold: false,
+            nameInverse: false,
+            nameUnderline: underline,
+            suffixColor: PALETTE.warning,
+            suffixDim: false,
+            suffixInverse: false,
+            suffixUnderline: underline,
+        };
+    }
+    return {
+        nameColor: PALETTE.success,
+        nameBold: false,
+        nameInverse: false,
+        nameUnderline: underline,
+        suffixColor: PALETTE.info,
+        suffixDim: true,
+        suffixInverse: false,
+        suffixUnderline: underline,
+    };
+}
+export function computeColumnWindow(total, cursor, visibleCount) {
+    if (total <= visibleCount)
+        return { start: 0, end: total, above: 0, below: 0 };
+    let start = Math.max(0, cursor - Math.floor(visibleCount / 2));
+    start = Math.min(start, total - visibleCount);
+    const end = start + visibleCount;
+    return { start, end, above: start, below: total - end };
+}
+function AddedComponentsColumn(props) {
+    const { width, entries, cursor, focused, aiFlaggedByKey, visibleCount } = props;
+    const reserveAiBadge = entries.some((e) => aiFlaggedByKey?.get(e.name) === true);
+    const firstNonCycleIdx = entries.findIndex((e) => !e.isCycle);
+    const window = computeColumnWindow(entries.length, cursor, Math.max(1, visibleCount));
+    return (_jsxs(Box, { flexDirection: "column", width: width, flexShrink: 0, borderStyle: "single", borderColor: focused ? PALETTE.inverse : undefined, children: [_jsx(ColumnHeader, { title: "Added components", width: width, focused: focused }), entries.length === 0 ? (_jsx(Text, { dimColor: true, children: "(none)" })) : (_jsxs(_Fragment, { children: [window.above > 0 && _jsx(Text, { dimColor: true, children: `↑ ${window.above} more` }), entries.slice(window.start, window.end).map((entry, vi) => {
+                        const i = window.start + vi;
+                        const isSelected = i === cursor;
+                        const isCursor = focused && isSelected;
+                        const aiFlagged = aiFlaggedByKey?.get(entry.name) === true;
+                        const showSeparator = firstNonCycleIdx > 0 && i === firstNonCycleIdx;
+                        const style = sideColumnLabelStyle({
+                            isCycle: entry.isCycle,
+                            isSelected,
+                            focused,
+                        });
+                        return (_jsxs(React.Fragment, { children: [showSeparator && _jsx(Text, { dimColor: true, children: '─'.repeat(Math.max(0, width - 2)) }), _jsxs(Box, { children: [isCursor ? (_jsx(Text, { color: PALETTE.info, bold: true, children: '▶' })) : (_jsx(Text, { children: " " })), reserveAiBadge &&
+                                            (aiFlagged ? (_jsx(Text, { color: PALETTE.warning, bold: true, children: ' [×]' })) : (_jsx(Text, { children: '    ' }))), entry.isCycle && (_jsx(Text, { color: isCursor ? PALETTE.inverse : PALETTE.warning, bold: true, inverse: isCursor, underline: style.nameUnderline, children: ' ⚠' })), _jsx(Text, { color: style.nameColor, bold: style.nameBold, inverse: style.nameInverse, underline: style.nameUnderline, wrap: "truncate", children: ' ' + entry.name })] })] }, entry.name));
+                    }), window.below > 0 && _jsx(Text, { dimColor: true, children: `↓ ${window.below} more` })] }))] }));
+}
+function AddedGroupsColumn(props) {
+    const { width, entries, cursor, focused, aiFlaggedByKey, visibleCount } = props;
+    const reserveAiBadge = entries.some((g) => aiFlaggedByKey?.get(g.name) === true);
+    const firstNonCycleIdx = entries.findIndex((e) => !e.isCycle);
+    const window = computeColumnWindow(entries.length, cursor, Math.max(1, visibleCount));
+    return (_jsxs(Box, { flexDirection: "column", width: width, flexShrink: 0, borderStyle: "single", borderColor: focused ? PALETTE.inverse : undefined, children: [_jsx(ColumnHeader, { title: "Added groups", width: width, focused: focused }), entries.length === 0 ? (_jsx(Text, { dimColor: true, children: "(none)" })) : (_jsxs(_Fragment, { children: [window.above > 0 && _jsx(Text, { dimColor: true, children: `↑ ${window.above} more` }), entries.slice(window.start, window.end).map((g, vi) => {
+                        const i = window.start + vi;
+                        const isSelected = i === cursor;
+                        const isCursor = focused && isSelected;
+                        const suffix = ` (${g.depCount} dep${g.depCount === 1 ? '' : 's'})`;
+                        const aiFlagged = aiFlaggedByKey?.get(g.name) === true;
+                        const showSeparator = firstNonCycleIdx > 0 && i === firstNonCycleIdx;
+                        const style = sideColumnLabelStyle({
+                            isCycle: g.isCycle,
+                            isSelected,
+                            focused,
+                        });
+                        return (_jsxs(React.Fragment, { children: [showSeparator && _jsx(Text, { dimColor: true, children: '─'.repeat(Math.max(0, width - 2)) }), _jsxs(Box, { children: [isCursor ? (_jsx(Text, { color: PALETTE.info, bold: true, children: '▶' })) : (_jsx(Text, { children: " " })), reserveAiBadge &&
+                                            (aiFlagged ? (_jsx(Text, { color: PALETTE.warning, bold: true, children: ' [×]' })) : (_jsx(Text, { children: '    ' }))), g.isCycle && (_jsx(Text, { color: isCursor ? PALETTE.inverse : PALETTE.warning, bold: true, inverse: isCursor, underline: style.nameUnderline, children: ' ⚠' })), _jsx(Text, { color: style.nameColor, bold: style.nameBold, inverse: style.nameInverse, underline: style.nameUnderline, wrap: "truncate", children: ' ' + g.name }), _jsx(Text, { color: style.suffixColor, dimColor: style.suffixDim, inverse: style.suffixInverse, underline: style.suffixUnderline, bold: style.nameBold, wrap: "truncate", children: suffix })] })] }, g.name));
+                    }), window.below > 0 && _jsx(Text, { dimColor: true, children: `↓ ${window.below} more` })] }))] }));
 }