@contentful/experience-design-system-cli 2.17.1-dev-build-c40b4d2.0 → 2.17.1-dev-build-36625f3.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.17.1-dev-build-c40b4d2.0",
+  "version": "2.17.1-dev-build-36625f3.0",
   "description": "Contentful Experiences design system import CLI",
   "license": "MIT",
   "type": "module",

package/dist/src/analyze/command.js

@@ -238,9 +238,9 @@ export function registerAnalyzeCommand(program) {
         for (const { component, inspection } of inspectedComponents) {
             const verdict = isNonAuthorableComponent(component);
             const keepDespiteZeroSurface = verdict.skip && verdict.reason === 'component has no props and no slots' && inspection.keepDespiteZeroSurface;
-            if (verdict.skip && !keepDespiteZeroSurface) {
-                filterWarnings.push(`Skipped non-authorable component: ${component.name} (${verdict.reason})`);
-                continue;
+            const retainedForReview = verdict.skip && !keepDespiteZeroSurface;
+            if (retainedForReview) {
+                filterWarnings.push(`${component.name}: requires operator review (${verdict.reason})`);
             }
             if (keepDespiteZeroSurface) {
                 filterWarnings.push(`${component.name}: retained despite 0 props/slots because the source renders visible or compositional UI`);
@@ -257,9 +257,12 @@ export function registerAnalyzeCommand(program) {
             // from the Svelte parser) by merging them into the post-processing recompute.
             // Without this, recomputing here clobbers the per-extractor signal.
             const extractorReasons = component.reviewReasons ?? [];
+            const nonAuthorableReason = retainedForReview ? [`non-authorable:${verdict.reason}`] : [];
             const { confidence, reasons } = computeExtractionScore(component, {
-                additionalIssueCount: wrapperConfidenceToIssueCount(inspection.wrapperConfidence) + extractorReasons.length,
-                additionalReasons: [...extractorReasons, ...inspection.reviewReasons],
+                additionalIssueCount: wrapperConfidenceToIssueCount(inspection.wrapperConfidence) +
+                    extractorReasons.length +
+                    nonAuthorableReason.length,
+                additionalReasons: [...extractorReasons, ...inspection.reviewReasons, ...nonAuthorableReason],
             });
             filteredComponents.push({
                 ...component,
@@ -268,6 +271,7 @@ export function registerAnalyzeCommand(program) {
                 needsReview: deriveNeedsReview(confidence) ||
                     inspection.wrapperConfidence >= 4 ||
                     inspection.keepDespiteZeroSurface ||
+                    retainedForReview ||
                     // An extractor-level type-resolution failure is a strong signal regardless
                     // of the otherwise-derived confidence threshold; force review.
                     extractorReasons.includes('props-type-unresolved') ||

package/dist/src/import/tui/ai-flag.d.ts

@@ -1,5 +1,6 @@
 export type AiFlaggable = {
     aiDecision?: 'accepted' | 'rejected' | 'failed' | null;
+    needsReview?: boolean;
 };
 export declare function isAiFlagged(row: AiFlaggable): boolean;
 export declare function isDefaultIncluded(row: AiFlaggable): boolean;

package/dist/src/import/tui/ai-flag.js

@@ -1,5 +1,5 @@
 export function isAiFlagged(row) {
-    return row.aiDecision === 'rejected' || row.aiDecision === 'failed';
+    return row.needsReview === true || row.aiDecision === 'rejected' || row.aiDecision === 'failed';
 }
 export function isDefaultIncluded(row) {
     return !isAiFlagged(row);

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

@@ -40,8 +40,7 @@ export function AtomicScopeGateStep({ components, onConfirm, onQuit, aiFilterSta
             return false;
         if (userUnExcluded.has(row.name))
             return true;
-        // INTEG-4318: exclude on 'rejected' AND 'failed'.
-        return row.aiDecision !== 'rejected' && row.aiDecision !== 'failed';
+        return !isAiFlagged(row);
     };
     const partition = () => {
         const accepted = [];
@@ -189,7 +188,7 @@ export function AtomicScopeGateStep({ components, onConfirm, onQuit, aiFilterSta
         groups: 0,
         total,
     };
-    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsx(Text, { color: PALETTE.success, 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."] }), _jsx(AutoFilterBanner, { status: aiFilterStatus, progress: aiFilterProgress, error: aiFilterError }), _jsx(CounterStrip, { counters: counters, totalWidth: totalWidth }), reasonPanelOpen && flatList[cursor] !== undefined && isAiFlagged(flatList[cursor]) && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: PALETTE.border, 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: PALETTE.warning, 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) => {
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsx(Text, { color: PALETTE.success, 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."] }), _jsx(AutoFilterBanner, { status: aiFilterStatus, progress: aiFilterProgress, error: aiFilterError }), _jsx(CounterStrip, { counters: counters, totalWidth: totalWidth }), reasonPanelOpen && flatList[cursor] !== undefined && isAiFlagged(flatList[cursor]) && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: PALETTE.border, paddingX: 1, marginTop: 1, children: [_jsx(Text, { dimColor: true, bold: true, children: `Review 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: PALETTE.warning, 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);
@@ -201,11 +200,11 @@ export function AtomicScopeGateStep({ components, onConfirm, onQuit, aiFilterSta
                         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;
+                        const header = showAiHeader ? (_jsx(Text, { bold: true, children: `Review flags (${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: PALETTE.info, children: `${prefix} ` }), aiMarkerNode, _jsx(Text, { color: stateColor, children: stateGlyph }), _jsx(Text, { color: PALETTE.info, children: ` ${c.name}` })] }), wrapReason && _jsx(Text, { dimColor: true, children: `${REASON_WRAP_INDENT}${c.aiReason}` })] }, c.componentId));
                         }
                         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: PALETTE.success, children: includedCount }), _jsxs(Text, { dimColor: true, children: ["/", total, " included"] })] })) : (_jsx(Text, { color: PALETTE.warning, children: "none included" })), _jsxs(Text, { children: [_jsx(Text, { color: PALETTE.info, children: "[j/k]" }), " ", _jsx(Text, { dimColor: true, children: "move" })] }), _jsxs(Text, { children: [_jsx(Text, { color: PALETTE.info, children: "[a/space]" }), " ", _jsx(Text, { dimColor: true, children: "toggle" })] }), _jsxs(Text, { children: [_jsx(Text, { color: PALETTE.info, children: "[A]" }), " ", _jsx(Text, { dimColor: true, children: "toggle all" })] }), _jsxs(Text, { children: [_jsx(Text, { color: PALETTE.info, children: "[f]" }), " ", _jsx(Text, { dimColor: true, children: "continue" })] }), _jsxs(Text, { children: [_jsx(Text, { color: PALETTE.info, children: "[q]" }), " ", _jsx(Text, { dimColor: true, children: "quit" })] }), hasAnyAi && (_jsxs(Text, { children: [_jsx(Text, { color: PALETTE.info, children: "[s]" }), " ", _jsx(Text, { dimColor: true, children: "AI reason" })] })), hasAnyAi && (_jsxs(Text, { children: [_jsx(Text, { color: PALETTE.info, children: "*" }), " ", _jsx(Text, { dimColor: true, children: "originally excluded by AI" })] }))] })] }));
+                    }), 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: PALETTE.success, children: includedCount }), _jsxs(Text, { dimColor: true, children: ["/", total, " included"] })] })) : (_jsx(Text, { color: PALETTE.warning, children: "none included" })), _jsxs(Text, { children: [_jsx(Text, { color: PALETTE.info, children: "[j/k]" }), " ", _jsx(Text, { dimColor: true, children: "move" })] }), _jsxs(Text, { children: [_jsx(Text, { color: PALETTE.info, children: "[a/space]" }), " ", _jsx(Text, { dimColor: true, children: "toggle" })] }), _jsxs(Text, { children: [_jsx(Text, { color: PALETTE.info, children: "[A]" }), " ", _jsx(Text, { dimColor: true, children: "toggle all" })] }), _jsxs(Text, { children: [_jsx(Text, { color: PALETTE.info, children: "[f]" }), " ", _jsx(Text, { dimColor: true, children: "continue" })] }), _jsxs(Text, { children: [_jsx(Text, { color: PALETTE.info, children: "[q]" }), " ", _jsx(Text, { dimColor: true, children: "quit" })] }), hasAnyAi && (_jsxs(Text, { children: [_jsx(Text, { color: PALETTE.info, children: "[s]" }), " ", _jsx(Text, { dimColor: true, children: "review reason" })] })), hasAnyAi && (_jsxs(Text, { children: [_jsx(Text, { color: PALETTE.info, children: "*" }), " ", _jsx(Text, { dimColor: true, children: "requires review" })] }))] })] }));
 }

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

@@ -4,6 +4,7 @@ export type ScopeComponent = {
     componentId: string;
     aiDecision?: 'accepted' | 'rejected' | 'failed' | null;
     aiReason?: string | null;
+    needsReview?: boolean;
     slots?: Array<{
         name: string;
         allowedComponents: string[];

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

@@ -58,7 +58,7 @@ const HELP_SECTIONS = [
         title: 'Panels',
         entries: [
             { keys: 'c', label: 'Cycle list' },
-            { keys: 'x', label: 'AI exclusions' },
+            { keys: 'x', label: 'Review flags' },
         ],
     },
     {
@@ -797,7 +797,7 @@ export function ScopeGateStep({ components, onConfirm, onQuit, aiFilterStatus =
     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) &&
+    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: [`Review flags (${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: `Review flags (${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) => {
@@ -810,7 +810,7 @@ export function ScopeGateStep({ components, onConfirm, onQuit, aiFilterStatus =
                         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" })] }))] })] }));
+                    }), _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]', 'review flags', aiRationalePanel.isOpen), hasAnyAi && (_jsxs(Text, { children: [_jsx(Text, { color: PALETTE.warning, bold: true, children: "[\u00D7]" }), ' ', _jsx(Text, { dimColor: true, children: "requires review" })] }))] })] }));
 }
 function ColumnHeader(props) {
     const { title, width, focused } = props;

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

@@ -103,6 +103,7 @@ export type ScopeComponentRow = {
     componentId: string;
     aiDecision: 'accepted' | 'rejected' | null;
     aiReason: string | null;
+    needsReview: boolean;
     slots: Array<{
         name: string;
         allowedComponents: string[];

package/dist/src/session/db.js

@@ -683,14 +683,7 @@ export function loadRawComponents(db, sessionId, allowedNames) {
         source: c.source,
         framework: c.framework,
         extractionConfidence: c.extraction_confidence ?? null,
-        reviewReasons: (() => {
-            try {
-                return JSON.parse(c.review_reasons ?? '[]');
-            }
-            catch {
-                return [];
-            }
-        })(),
+        reviewReasons: parseReviewReasons(c.review_reasons),
         needsReview: Boolean(c.needs_review),
         sourcePath: c.source_path ?? undefined,
         props: (propsByComponent.get(c.component_id) ?? []).map((p) => {
@@ -757,6 +750,16 @@ export function renameEmptySlots(db, sessionId, componentId, componentName, slot
     }
     return { renames, warnings };
 }
+function parseReviewReasons(raw) {
+    try {
+        const parsed = JSON.parse(raw ?? '[]');
+        return Array.isArray(parsed) ? parsed.filter((reason) => typeof reason === 'string') : [];
+    }
+    catch {
+        // A malformed historical value should not prevent callers from loading.
+        return [];
+    }
+}
 function groupBy(items, key) {
     const map = new Map();
     for (const item of items) {
@@ -930,7 +933,7 @@ export function loadCDFComponents(db, sessionId) {
 }
 export function loadScopeComponents(db, sessionId) {
     const rows = db
-        .prepare(`SELECT name, component_id, status, reject_reason FROM raw_components
+        .prepare(`SELECT name, component_id, status, reject_reason, review_reasons, needs_review FROM raw_components
        WHERE session_id = ? AND status IN ('extracted', 'accepted', 'rejected')
        ORDER BY name`)
         .all(sessionId);
@@ -946,16 +949,21 @@ export function loadScopeComponents(db, sessionId) {
         .all(sessionId);
     const slotsByComponent = groupBy(slotRows, (s) => s.component_id);
     const allowedBySlot = groupBy(allowedRows, (a) => `${a.component_id}::${a.slot_name}`);
-    return rows.map((r) => ({
-        name: r.name,
-        componentId: r.component_id,
-        aiDecision: r.status === 'accepted' ? 'accepted' : r.status === 'rejected' ? 'rejected' : null,
-        aiReason: r.reject_reason,
-        slots: (slotsByComponent.get(r.component_id) ?? []).map((s) => ({
-            name: s.name,
-            allowedComponents: (allowedBySlot.get(`${r.component_id}::${s.name}`) ?? []).map((a) => a.allowed_component),
-        })),
-    }));
+    return rows.map((r) => {
+        const reviewReasons = parseReviewReasons(r.review_reasons);
+        const nonAuthorableReason = reviewReasons.find((reason) => reason.startsWith('non-authorable:'));
+        return {
+            name: r.name,
+            componentId: r.component_id,
+            aiDecision: r.status === 'accepted' ? 'accepted' : r.status === 'rejected' ? 'rejected' : null,
+            aiReason: r.reject_reason ?? nonAuthorableReason?.slice('non-authorable:'.length) ?? null,
+            needsReview: Boolean(r.needs_review),
+            slots: (slotsByComponent.get(r.component_id) ?? []).map((s) => ({
+                name: s.name,
+                allowedComponents: (allowedBySlot.get(`${r.component_id}::${s.name}`) ?? []).map((a) => a.allowed_component),
+            })),
+        };
+    });
 }
 export function applyScopeDecisions(db, sessionId, decisions) {
     const now = new Date().toISOString();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.17.1-dev-build-c40b4d2.0",
+  "version": "2.17.1-dev-build-36625f3.0",
   "description": "Contentful Experiences design system import CLI",
   "license": "MIT",
   "type": "module",
@@ -34,8 +34,8 @@
     "react": "^18.3.1",
     "react-devtools-core": "^4.19.1",
     "react-dom": "^18.3.1",
-    "@contentful/experience-design-system-extraction": "2.17.1-dev-build-c40b4d2.0",
-    "@contentful/experience-design-system-types": "2.17.1-dev-build-c40b4d2.0"
+    "@contentful/experience-design-system-extraction": "2.17.1-dev-build-36625f3.0",
+    "@contentful/experience-design-system-types": "2.17.1-dev-build-36625f3.0"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.3",

package/skills/generate-components.md

@@ -147,7 +147,7 @@ For each `RawPropDefinition`, apply in order:
 
 1. **Framework / DOM / accessibility pass-through?** → `exclude_prop`. These are escape hatches for developers, not configurable surfaces for marketers. Exposing them in the ExO editor adds noise that obscures the props that actually carry intent. Always exclude:
    - Framework internals: `ref`, `innerRef`, event handlers (any `onSomething`), `testId`, `data-testid`, `key`
-   - DOM pass-through: `className`, `class`, `classes`, `classNames`, `rootClassName`, `prefixCls`, `style`, `styles`, `id`, `role`, `tabIndex`, `name` (the bare HTML form `name` attribute), `htmlFor`, `for`, `slot`, `is`, `lang`, `dir`, `hidden`, `draggable`, `spellCheck`, `contentEditable`, `inputMode`, `autoComplete`, `autoFocus`, `translate`, `part`, `exportparts`
+   - DOM pass-through: `className`, `class`, `classes`, `classNames`, `rootClassName`, `prefixCls`, `style`, `styles`, `id`, `role`, `tabIndex`, `htmlFor`, `for`, `slot`, `is`, `lang`, `dir`, `hidden`, `draggable`, `spellCheck`, `contentEditable`, `inputMode`, `autoComplete`, `autoFocus`, `translate`, `part`, `exportparts`
    - Accessibility pass-through: any `aria-*` or `ariaSomething` prop (including bare `aria` as an aria-attributes object), `aria-label`, `aria-hidden`, `aria-describedby`, `aria-controls`
    - Data attributes: any `data-*` prop
    - **Polymorphic component props**: `as`, `element`, `component` (when typed as an HTML tag string or component reference) — these change rendered HTML, not marketer-visible behavior
@@ -157,6 +157,7 @@ For each `RawPropDefinition`, apply in order:
    - `icon` / `leftIcon` / `rightIcon` / `prefixIcon` / `suffixIcon` — slot or `string` (icon name); see slot guidance below
    - `items` / `options` / `actions` / `links` — usually array content; if the element shape is simple, classify as `string` (comma-separated names/IDs) and note in `description`. Only exclude when elements are deep nested objects with no flat representation.
    - `value` (the bare prop, not `modelValue`) — content prop, usually `string` (or `enum` if from a fixed set). Note: Vue's `modelValue` / `modelModifiers` are excluded by pre-classify because they're v-model framework wiring.
+   - `name` — content prop, usually `string`. Treat it as semantic component data, not as a DOM pass-through.
    - `form` (when not the literal `<form>` HTML attribute) — typically content; classify as `string` unless it's a complex form-config object
    - `inputId` / `componentId` — these CAN be content (anchor IDs, marketer-set tracking refs). Classify as `string`, `cdf_category: "content"` when the type is a plain string. Only exclude if the prop is clearly internal (e.g. typed as a generated React ID).
    - `accessibleNameRef` / `accessibleDescriptionRef` (web components) — these are ID references for a11y wiring; classify as `string`, `cdf_category: "state"` (behavioral wiring, not design or content).
@@ -397,7 +398,7 @@ Before emitting any tool calls, verify:
 5. Every `cdf_type: "token"` has `token_kind` (or a warning in `description` if lookup failed)
 6. No `cdf_type: "link"` — all href/url props use `string`
 7. `required` values are JSON booleans, not strings
-8. Framework, DOM, accessibility, and data-* pass-through props are excluded — `className`/`classes`/`classNames`/`rootClassName`/`prefixCls`, `style`, `id`, `role`, `tabIndex`, `name` (bare HTML form attribute), `aria-*` (and bare `aria`), `data-*`, polymorphic `as`/`element`/`component`, framework theming `dt`/`pt`/`ptOptions`/`unstyled`/`sx`. Discrete positional/geometric props (`top`, `bottom`, `left`, `right`, `rotation`, etc.) ARE classified as `string` design props. Common semantic props (`icon`, `items`, `actions`, `options`, `value`, `form`, `inputId`, `componentId`) are NOT excluded — classify them per their content/design/state nature.
+8. Framework, DOM, accessibility, and data-* pass-through props are excluded — `className`/`classes`/`classNames`/`rootClassName`/`prefixCls`, `style`, `id`, `role`, `tabIndex`, `aria-*` (and bare `aria`), `data-*`, polymorphic `as`/`element`/`component`, framework theming `dt`/`pt`/`ptOptions`/`unstyled`/`sx`. Discrete positional/geometric props (`top`, `bottom`, `left`, `right`, `rotation`, etc.) ARE classified as `string` design props. Common semantic props (`icon`, `items`, `actions`, `options`, `value`, `name`, `form`, `inputId`, `componentId`) are NOT excluded — classify them per their content/design/state nature.
 9. No `cdf_type: "link"` used — `link` is reserved and rejected by the CLI parser
 10. No `cdf_type: "number"` used — this is not a supported type; use `"string"` with numeric defaults. `cdf_type: "boolean"` IS valid — use it for boolean toggle props.
 11. `classify_component` includes a `rationale` object with all three sub-fields (`rationale.description`, `rationale.props`, `rationale.slots`) populated as non-empty strings.