@contentful/experience-design-system-cli 2.6.2-dev-build-ea30bad.0 → 2.7.0

package/dist/package.json

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

package/dist/src/analyze/command.js

@@ -9,6 +9,7 @@ import { registerAnalyzeSelectAgentCommand } from './select-agent/command.js';
 import { openPipelineDb, getOrCreateSession, createStep, updateStep, storeRawComponents } from '../session/db.js';
 import { preClassifyComponent } from './pre-classify.js';
 import { isNonAuthorableComponent } from './extract/non-authorable-filter.js';
+import { computeExtractionScore, deriveNeedsReview } from './extract/scoring.js';
 const SCANNED_FILE_EXTENSIONS = new Set(['.astro', '.js', '.jsx', '.ts', '.tsx', '.vue']);
 const IGNORED_DIRECTORY_NAMES = new Set([
     '.git',
@@ -130,7 +131,13 @@ export function registerAnalyzeCommand(program) {
                 filterWarnings.push(`Skipped non-authorable component: ${component.name} (${verdict.reason})`);
                 continue;
             }
-            filteredComponents.push(component);
+            const { confidence, reasons } = computeExtractionScore(component);
+            filteredComponents.push({
+                ...component,
+                extractionConfidence: confidence,
+                reviewReasons: reasons,
+                needsReview: deriveNeedsReview(confidence),
+            });
         }
         storeRawComponents(db, sessionId, filteredComponents);
         updateStep(db, stepId, 'complete', { sessionId });
@@ -146,6 +153,8 @@ export function registerAnalyzeCommand(program) {
                 propCount: c.props.length,
                 slotCount: c.slots.length,
                 warnings: allWarnings.filter((w) => w.startsWith(c.name + ':')),
+                extractionConfidence: c.extractionConfidence ?? null,
+                needsReview: c.needsReview ?? false,
             })),
             totalWarnings: allWarnings.length,
         };

package/dist/src/analyze/extract/scoring.d.ts

@@ -0,0 +1,8 @@
+import type { RawComponentDefinition } from '../../types.js';
+export type ExtractionConfidence = 1 | 2 | 3 | 4 | 5;
+export type ExtractionScore = {
+    confidence: ExtractionConfidence;
+    reasons: string[];
+};
+export declare function computeExtractionScore(component: RawComponentDefinition): ExtractionScore;
+export declare function deriveNeedsReview(confidence: ExtractionConfidence): boolean;

package/dist/src/analyze/extract/scoring.js

@@ -0,0 +1,104 @@
+// Prop type strings that indicate the extractor couldn't resolve a concrete type
+const OPAQUE_TYPES = new Set(['any', 'unknown', 'object', 'Record<string, unknown>', 'Record<string, any>']);
+// Prop names that are non-obvious and benefit from a description
+const OBVIOUS_PROP_NAMES = new Set([
+    'className',
+    'style',
+    'id',
+    'children',
+    'disabled',
+    'hidden',
+    'onClick',
+    'onChange',
+    'onSubmit',
+    'onBlur',
+    'onFocus',
+    'href',
+    'src',
+    'alt',
+    'type',
+    'value',
+    'checked',
+    'placeholder',
+    'label',
+    'title',
+    'name',
+    'required',
+    'readOnly',
+    'autoFocus',
+    'tabIndex',
+    'role',
+    'aria-label',
+    'aria-describedby',
+]);
+// A union is "wide" if it mixes 3+ distinct base primitive types (ignoring nullability modifiers).
+// e.g. "string | number | boolean" → wide. "string | null | undefined" → NOT wide (just nullable string).
+function isWidePrimitiveUnion(type) {
+    const parts = type.split('|').map((p) => p.trim());
+    if (parts.length < 3)
+        return false;
+    const basePrimitives = new Set(['string', 'number', 'boolean']);
+    const nullability = new Set(['null', 'undefined']);
+    const baseCount = parts.filter((p) => basePrimitives.has(p)).length;
+    const nullabilityCount = parts.filter((p) => nullability.has(p)).length;
+    return baseCount >= 3 || (baseCount >= 2 && nullabilityCount > 0 && baseCount + nullabilityCount >= 3);
+}
+// Count the number of issues found for scoring
+function countIssues(component) {
+    let count = 0;
+    const reasons = [];
+    if (component.props.length === 0 && component.slots.length === 0) {
+        count++;
+        reasons.push('no-props-or-slots');
+    }
+    if (component.props.length > 50) {
+        count++;
+        reasons.push(`high-prop-count:${component.props.length}`);
+    }
+    for (const prop of component.props) {
+        if (OPAQUE_TYPES.has(prop.type.trim())) {
+            count++;
+            reasons.push(`opaque-type:${prop.name}`);
+            break;
+        }
+        if (isWidePrimitiveUnion(prop.type)) {
+            count++;
+            reasons.push(`wide-union:${prop.name}`);
+            break;
+        }
+        if (!prop.description && !OBVIOUS_PROP_NAMES.has(prop.name)) {
+            count++;
+            reasons.push('props-missing-description');
+            break;
+        }
+    }
+    return { count, reasons: [...new Set(reasons)] };
+}
+// Maps issue count to a 1–5 confidence scale:
+//   0 issues → 5 (clean)
+//   1 issue  → 4 (minor concern)
+//   2 issues → 3 (moderate concern)
+//   3 issues → 2 (significant concern)
+//   4+ issues → 1 (likely wrong)
+function issueCountToConfidence(count) {
+    if (count === 0)
+        return 5;
+    if (count === 1)
+        return 4;
+    if (count === 2)
+        return 3;
+    if (count === 3)
+        return 2;
+    return 1;
+}
+export function computeExtractionScore(component) {
+    const { count, reasons } = countIssues(component);
+    return {
+        confidence: issueCountToConfidence(count),
+        reasons,
+    };
+}
+// Flag components scoring 2 or below for human review
+export function deriveNeedsReview(confidence) {
+    return confidence <= 2;
+}

package/dist/src/analyze/select/tui/App.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Box, Text, useStdout } from 'ink';
 import { readFile } from 'node:fs/promises';
 import { createReviewSessionDetail } from '../types.js';
+import { stripScoringFields } from '../../../types.js';
 import { TopBar } from './components/TopBar.js';
 import { Sidebar } from './components/Sidebar.js';
 import { ComponentDetail } from './components/ComponentDetail.js';
@@ -40,6 +41,11 @@ export function App({ sessionId, artifactsRoot, reviewRoot }) {
     const [finalizedResult, setFinalizedResult] = useState(null);
     const [sidebarScrollOffset, setSidebarScrollOffset] = useState(0);
     const [jsonScrollOffset, setJsonScrollOffset] = useState(0);
+    // Keeps the visual sort order in sync for use inside keymap handlers (which close over a stale render)
+    const sortedIdsRef = useRef([]);
+    // Source code kept separate from session state so lazy loading never mutates
+    // session.components — that would invalidate useMemo(sessionSummary) and flash the sidebar
+    const [sourceCodeById, setSourceCodeById] = useState({});
     const [previewAnnotations, setPreviewAnnotations] = useState(() => {
         const raw = process.env['EDS_PREVIEW_ANNOTATIONS'];
         if (!raw)
@@ -138,13 +144,22 @@ export function App({ sessionId, artifactsRoot, reviewRoot }) {
                 clearTimeout(previewDebounceRef.current);
         };
     }, []);
-    // Sync loaded session into local state
+    // Sync loaded session into local state; selectedId is set to null here
+    // and will be corrected to the first sorted item on first render via the effect below
     useEffect(() => {
         if (loadedSession && !session) {
             setSession(loadedSession);
-            setSelectedId(loadedSession.components[0]?.id ?? null);
+            setSelectedId(null);
         }
     }, [loadedSession]);
+    // Once the sort order is known (after first render), select the first sorted item.
+    // Runs only when session transitions from null → loaded.
+    const sessionLoaded = session !== null;
+    useEffect(() => {
+        if (sessionLoaded && selectedId === null && sortedIdsRef.current.length > 0) {
+            setSelectedId(sortedIdsRef.current[0]);
+        }
+    }, [sessionLoaded]);
     useEffect(() => {
         if (session && !previewResponse) {
             const raw = process.env['EDS_PREVIEW_COUNTS'];
@@ -172,26 +187,22 @@ export function App({ sessionId, artifactsRoot, reviewRoot }) {
             }
         }
     }, [session]);
-    // Lazy source code loading
+    // Lazy source code loading — writes to sourceCodeById, NOT session.components,
+    // so it doesn't invalidate useMemo(sessionSummary) and cause a sidebar flash
     useEffect(() => {
         if (!session || !selectedId)
             return;
+        if (sourceCodeById[selectedId] !== undefined)
+            return; // already loaded
         const selectedComponent = session.components.find((c) => c.id === selectedId);
-        if (!selectedComponent || selectedComponent.sourceCode !== null)
+        if (!selectedComponent)
             return;
         readFile(selectedComponent.resolvedSourcePath, 'utf8')
             .then((code) => {
-            setSession((prev) => {
-                if (!prev)
-                    return prev;
-                return {
-                    ...prev,
-                    components: prev.components.map((c) => (c.id === selectedComponent.id ? { ...c, sourceCode: code } : c)),
-                };
-            });
+            setSourceCodeById((prev) => ({ ...prev, [selectedId]: code }));
         })
             .catch(() => {
-            // Leave as null; SourcePanel shows [No source available]
+            setSourceCodeById((prev) => ({ ...prev, [selectedId]: '' }));
         });
     }, [selectedId]);
     // SIGINT handler
@@ -235,9 +246,10 @@ export function App({ sessionId, artifactsRoot, reviewRoot }) {
         onSidebarUp: () => {
             if (!session)
                 return;
-            const idx = session.components.findIndex((c) => c.id === selectedId);
+            const ids = sortedIdsRef.current;
+            const idx = ids.indexOf(selectedId ?? '');
             if (idx > 0) {
-                setSelectedId(session.components[idx - 1].id);
+                setSelectedId(ids[idx - 1]);
                 setJsonScrollOffset(0);
                 setSidebarScrollOffset((prev) => Math.min(prev, idx - 1));
             }
@@ -245,9 +257,10 @@ export function App({ sessionId, artifactsRoot, reviewRoot }) {
         onSidebarDown: () => {
             if (!session)
                 return;
-            const idx = session.components.findIndex((c) => c.id === selectedId);
-            if (idx < session.components.length - 1) {
-                setSelectedId(session.components[idx + 1].id);
+            const ids = sortedIdsRef.current;
+            const idx = ids.indexOf(selectedId ?? '');
+            if (idx < ids.length - 1) {
+                setSelectedId(ids[idx + 1]);
                 setJsonScrollOffset(0);
                 setSidebarScrollOffset((prev) => {
                     const newIdx = idx + 1;
@@ -273,7 +286,7 @@ export function App({ sessionId, artifactsRoot, reviewRoot }) {
             setEditMode(true);
             setDraftsByComponentId((prev) => ({
                 ...prev,
-                [selectedId]: prev[selectedId] ?? JSON.stringify(component.editedProposal, null, 2),
+                [selectedId]: prev[selectedId] ?? JSON.stringify(stripScoringFields(component.editedProposal), null, 2),
             }));
         },
         onToggleSource: () => {
@@ -315,6 +328,31 @@ export function App({ sessionId, artifactsRoot, reviewRoot }) {
         },
         onToggleHelp: () => setShowHelp((prev) => !prev),
     });
+    // Sorted order: flagged+unresolved first, then ascending confidence.
+    // Memoised above early returns (React rules of hooks) so the array reference
+    // is stable between renders — prevents Sidebar repainting on scroll/select.
+    const sessionSummary = useMemo(() => (session?.components ?? [])
+        .map((c) => ({
+        id: c.id,
+        name: c.name,
+        status: c.status,
+        previewAnnotation: previewAnnotations[c.name],
+        extractionConfidence: c.originalProposal.extractionConfidence ?? null,
+        needsReview: c.originalProposal.needsReview ?? false,
+    }))
+        .sort((a, b) => {
+        const aFlagged = a.needsReview && a.status === 'needs-review' ? 0 : 1;
+        const bFlagged = b.needsReview && b.status === 'needs-review' ? 0 : 1;
+        if (aFlagged !== bFlagged)
+            return aFlagged - bFlagged;
+        // null (unscored) sorts last; lower numeric score sorts first (most concerning)
+        const aConf = a.extractionConfidence ?? 6;
+        const bConf = b.extractionConfidence ?? 6;
+        return aConf - bConf;
+    }), [session?.components, previewAnnotations]);
+    // Stable ID order — kept in a ref for use inside keymap handlers
+    const sortedIds = useMemo(() => sessionSummary.map((c) => c.id), [sessionSummary]);
+    sortedIdsRef.current = sortedIds;
     if (loading) {
         return _jsx(Text, { children: "Loading session..." });
     }
@@ -327,12 +365,6 @@ export function App({ sessionId, artifactsRoot, reviewRoot }) {
     if (finalizedResult) {
         return _jsx(FinalizedScreen, { result: finalizedResult });
     }
-    const sessionSummary = session.components.map((c) => ({
-        id: c.id,
-        name: c.name,
-        status: c.status,
-        previewAnnotation: previewAnnotations[c.name],
-    }));
     const selectedRecord = session.components.find((c) => c.id === selectedId) ?? null;
     const sessionDetail = selectedRecord ? createReviewSessionDetail({ ...session, components: [selectedRecord] }) : null;
     const selectedDetail = sessionDetail?.components[0] ?? null;
@@ -352,7 +384,10 @@ export function App({ sessionId, artifactsRoot, reviewRoot }) {
                 { key: 'q', label: 'quit' },
             ];
     const collapsed = terminalWidth < 80;
-    const visibleCount = 20;
+    // TopBar(1) + statusbar(1) + footer(1) + border padding(2) = ~5 chrome rows
+    const CHROME_ROWS = 5;
+    const terminalRows = stdout?.rows ?? 24;
+    const visibleCount = Math.max(1, terminalRows - CHROME_ROWS);
     const longestName = session.components.reduce((max, c) => Math.max(max, c.name.length), 0);
     // icon + space + name + 2 border chars; min 14, max 22
     const sidebarWidth = collapsed ? 3 : Math.min(Math.max(longestName + 4, 14), 22);
@@ -468,7 +503,7 @@ export function App({ sessionId, artifactsRoot, reviewRoot }) {
                 }, onCancel: () => setShowQuitDialog(false) })), !showHelp && !showFinalizeDialog && !showQuitDialog && (_jsxs(Box, { flexGrow: 1, children: [_jsx(Sidebar, { components: sessionSummary, selectedId: selectedId, focused: sidebarFocused, scrollOffset: sidebarScrollOffset, visibleCount: visibleCount, onSelect: (id) => {
                             setSelectedId(id);
                             setJsonScrollOffset(0);
-                        }, onScrollChange: setSidebarScrollOffset, collapsed: collapsed, width: sidebarWidth }), _jsx(Box, { flexGrow: 1, paddingLeft: 1, children: selectedDetail ? (_jsx(ComponentDetail, { component: selectedDetail, sourceCode: selectedRecord?.sourceCode ?? null, draftValue: selectedId ? (draftsByComponentId[selectedId] ?? '') : '', editMode: editMode, sourceVisible: sourceVisible, jsonScrollOffset: jsonScrollOffset, sourceScrollX: 0, sourceScrollY: 0, terminalWidth: terminalWidth, previewAnnotation: selectedRecord ? previewAnnotations[selectedRecord.name] : undefined, onDraftChange: (value) => {
+                        }, onScrollChange: setSidebarScrollOffset, collapsed: collapsed, width: sidebarWidth }), _jsx(Box, { flexGrow: 1, paddingLeft: 1, children: selectedDetail ? (_jsx(ComponentDetail, { component: selectedDetail, sourceCode: selectedId ? (sourceCodeById[selectedId] ?? null) : null, draftValue: selectedId ? (draftsByComponentId[selectedId] ?? '') : '', editMode: editMode, sourceVisible: sourceVisible, jsonScrollOffset: jsonScrollOffset, sourceScrollX: 0, sourceScrollY: 0, terminalWidth: terminalWidth, previewAnnotation: selectedRecord ? previewAnnotations[selectedRecord.name] : undefined, onDraftChange: (value) => {
                                 if (!selectedId)
                                     return;
                                 setDraftsByComponentId((prev) => ({

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+import { stripScoringFields } from '../../../../types.js';
 import { JsonPanel } from './JsonPanel.js';
 import { FieldEditor } from './FieldEditor.js';
 import { SourcePanel } from './SourcePanel.js';
@@ -34,10 +35,14 @@ export function ComponentDetail({ component, sourceCode, draftValue, editMode, s
         editWidth = availableWidth - originalWidth - 3;
         sourceWidth = 0;
     }
-    const originalJson = JSON.stringify(component.originalProposal, null, 2);
-    const editedJson = JSON.stringify(component.editedProposal, null, 2);
+    const originalJson = JSON.stringify(stripScoringFields(component.originalProposal), null, 2);
+    const editedJson = JSON.stringify(stripScoringFields(component.editedProposal), null, 2);
+    const conf = component.originalProposal.extractionConfidence ?? null;
+    const nr = component.originalProposal.needsReview ?? false;
+    const confColor = conf === null ? 'gray' : nr ? 'red' : conf >= 4 ? 'white' : conf >= 3 ? 'yellow' : 'red';
+    const confLabel = conf === null ? 'confidence: —' : (nr ? '⚑ ' : '') + 'confidence: ' + String(conf) + '/5';
     return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: component.name }), (() => {
                         const ann = annotationLabel(previewAnnotation);
                         return ann ? _jsx(Text, { color: ann.color, children: ann.text }) : null;
-                    })(), _jsx(Box, { flexGrow: 1 }), _jsxs(Text, { dimColor: true, children: [sourceVisible ? '[s] hide src' : '[s] src', editMode ? '' : '  [e] edit'] })] }), _jsxs(Box, { children: [_jsx(JsonPanel, { label: "ORIGINAL (read-only)", value: originalJson, scrollOffset: jsonScrollOffset, width: originalWidth, height: panelHeight, active: false }), _jsx(Text, { children: " " }), editMode ? (_jsx(FieldEditor, { value: draftValue || editedJson, width: editWidth, height: panelHeight, onChange: onDraftChange, onSave: onSaveDraft, onDiscard: onDiscardDraft })) : (_jsx(JsonPanel, { label: "EDIT (draft)", value: draftValue || editedJson, scrollOffset: jsonScrollOffset, width: editWidth, height: panelHeight, active: true })), sourceVisible && sourceWidth > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(SourcePanel, { sourceCode: sourceCode, filePath: component.originalProposal.source, width: sourceWidth, height: panelHeight, scrollX: sourceScrollX, scrollY: sourceScrollY })] }))] }), !editMode && _jsx(Text, { dimColor: true, children: '  [a] accept  [r] reject  [e] edit  [A] accept all  [↑↓] scroll' })] }));
+                    })(), _jsx(Text, { color: confColor, children: ' — ' + confLabel }), _jsx(Box, { flexGrow: 1 }), _jsxs(Text, { dimColor: true, children: [sourceVisible ? '[s] hide src' : '[s] src', editMode ? '' : '  [e] edit'] })] }), _jsxs(Box, { children: [_jsx(JsonPanel, { label: "ORIGINAL (read-only)", value: originalJson, scrollOffset: jsonScrollOffset, width: originalWidth, height: panelHeight, active: false }), _jsx(Text, { children: " " }), editMode ? (_jsx(FieldEditor, { value: draftValue || editedJson, width: editWidth, height: panelHeight, onChange: onDraftChange, onSave: onSaveDraft, onDiscard: onDiscardDraft })) : (_jsx(JsonPanel, { label: "EDIT (draft)", value: draftValue || editedJson, scrollOffset: jsonScrollOffset, width: editWidth, height: panelHeight, active: true })), sourceVisible && sourceWidth > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(SourcePanel, { sourceCode: sourceCode, filePath: component.originalProposal.source, width: sourceWidth, height: panelHeight, scrollX: sourceScrollX, scrollY: sourceScrollY })] }))] }), !editMode && _jsx(Text, { dimColor: true, children: '  [a] accept  [r] reject  [e] edit  [A] accept all  [↑↓] scroll' })] }));
 }

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

@@ -38,7 +38,7 @@ export function Sidebar({ components, selectedId, focused, scrollOffset, visible
                 const isSelected = component.id === selectedId;
                 const icon = statusIcon(component.status);
                 const color = statusColor(component.status);
-                const maxNameLen = Math.max(1, width - 5);
+                const maxNameLen = Math.max(1, width - 4);
                 const name = truncateName(component.name, maxNameLen);
                 if (collapsed) {
                     return (_jsx(Box, { children: _jsx(Text, { color: color, inverse: isSelected && focused, underline: isSelected && !focused, children: icon }) }, component.id));

package/dist/src/analyze/select/types.d.ts

@@ -22,6 +22,8 @@ export type ReviewComponentSummary = {
     name: string;
     status: ReviewComponentStatus;
     previewAnnotation?: PreviewAnnotation;
+    extractionConfidence: number | null;
+    needsReview: boolean;
 };
 export type ReviewSessionSnapshot = {
     components: ReviewComponentRecord[];

package/dist/src/analyze/select/types.js

@@ -4,6 +4,8 @@ export function createReviewSessionSummary(session) {
             id: component.id,
             name: component.name,
             status: component.status,
+            extractionConfidence: component.originalProposal.extractionConfidence ?? null,
+            needsReview: component.originalProposal.needsReview ?? false,
         })),
     };
 }

package/dist/src/analyze/tui/AnalyzeView.d.ts

@@ -9,6 +9,8 @@ export type AnalyzeViewResult = {
         propCount: number;
         slotCount: number;
         warnings: string[];
+        extractionConfidence: number | null;
+        needsReview: boolean;
     }>;
     totalWarnings: number;
 };

package/dist/src/analyze/tui/AnalyzeView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Box, Text } from 'ink';
+import { Box, Text, useStdout } from 'ink';
 import { TopBar } from '../select/tui/components/TopBar.js';
 import { useImmediateInput } from '../select/tui/hooks/useImmediateInput.js';
 function truncateName(name, maxLen = 30) {
@@ -10,6 +10,12 @@ function truncateName(name, maxLen = 30) {
 }
 export function AnalyzeView({ result, onExit }) {
     const [scrollOffset, setScrollOffset] = useState(0);
+    const { stdout } = useStdout();
+    // Header lines: TopBar(1) + summary(3) + blank(1) + dividers+header(3) + blank(1) + footer(1) + footer-bar(1) = ~12
+    const HEADER_ROWS = 12;
+    const terminalRows = stdout?.rows ?? 24;
+    const visibleCount = Math.max(1, terminalRows - HEADER_ROWS);
+    const maxOffset = Math.max(0, result.components.length - visibleCount);
     useImmediateInput((input, key) => {
         if (input === 'q' || key.return) {
             onExit();
@@ -19,19 +25,36 @@ export function AnalyzeView({ result, onExit }) {
             setScrollOffset((o) => Math.max(0, o - 1));
         }
         else if (key.downArrow || input === 'j') {
-            setScrollOffset((o) => o + 1);
+            setScrollOffset((o) => Math.min(maxOffset, o + 1));
         }
         else if (input === 'g') {
             setScrollOffset(0);
         }
         else if (input === 'G') {
-            setScrollOffset(Math.max(0, result.components.length + 10));
+            setScrollOffset(maxOffset);
         }
     });
+    const visible = result.components.slice(scrollOffset, scrollOffset + visibleCount);
+    const showScrollUp = scrollOffset > 0;
+    const showScrollDown = scrollOffset + visibleCount < result.components.length;
     return (_jsxs(Box, { flexDirection: "column", children: [_jsx(TopBar, { subcommand: "analyze", hints: [
                     { key: '?', label: 'help' },
                     { key: 'q', label: 'quit' },
-                ] }), _jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsx(Text, { children: 'Scanned ' + result.fileCount + ' source files in ' + result.sourceDirectory }), _jsx(Text, { children: 'Extracted ' + result.components.length + ' components' }), _jsx(Text, { dimColor: true, children: 'Session: ' + result.sessionId }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: '─'.repeat(70) }), _jsx(Text, { bold: true, children: "Components" }), _jsx(Text, { dimColor: true, children: '─'.repeat(70) }), _jsx(Text, { children: " " }), result.components.slice(scrollOffset).map((component) => (_jsxs(Box, { children: [component.warnings.length > 0 && _jsx(Text, { color: "yellow", children: "\u26A0 " }), component.warnings.length === 0 && _jsx(Text, { children: " " }), _jsx(Text, { children: truncateName(component.name).padEnd(20) }), _jsx(Text, { dimColor: true, children: component.framework.padEnd(10) }), _jsx(Text, { children: (component.propCount + ' props').padEnd(10) }), _jsx(Text, { children: component.slotCount + ' ' + (component.slotCount === 1 ? 'slot' : 'slots') }), component.warnings.length > 0 && (_jsx(Text, { color: "yellow", children: '  ' + component.warnings.length + ' warning' + (component.warnings.length === 1 ? '' : 's') }))] }, component.name))), result.totalWarnings > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: '─'.repeat(70) }), _jsx(Text, { bold: true, color: "yellow", children: 'Warnings (' + result.totalWarnings + ')' }), _jsx(Text, { dimColor: true, children: '─'.repeat(70) }), _jsx(Text, { children: " " }), result.components
+                ] }), _jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsx(Text, { children: 'Scanned ' + result.fileCount + ' source files in ' + result.sourceDirectory }), _jsx(Text, { children: 'Extracted ' + result.components.length + ' components' }), _jsx(Text, { dimColor: true, children: 'Session: ' + result.sessionId }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: '─'.repeat(70) }), _jsx(Text, { bold: true, children: 'Components' +
+                            (showScrollUp || showScrollDown
+                                ? '  (' +
+                                    (scrollOffset + 1) +
+                                    '–' +
+                                    Math.min(scrollOffset + visibleCount, result.components.length) +
+                                    ' of ' +
+                                    result.components.length +
+                                    ')'
+                                : '') }), _jsx(Text, { dimColor: true, children: '─'.repeat(70) }), _jsx(Text, { children: " " }), showScrollUp && _jsx(Text, { dimColor: true, children: " \u25B2 scroll up" }), visible.map((component) => {
+                        const conf = component.extractionConfidence;
+                        const confColor = conf === null ? 'gray' : component.needsReview ? 'red' : conf >= 4 ? 'white' : conf >= 3 ? 'yellow' : 'red';
+                        const confLabel = conf === null ? '—' : (component.needsReview ? '⚑ ' : '') + String(conf);
+                        return (_jsxs(Box, { children: [component.warnings.length > 0 && _jsx(Text, { color: "yellow", children: "\u26A0 " }), component.warnings.length === 0 && _jsx(Text, { children: " " }), _jsx(Text, { children: truncateName(component.name).padEnd(20) }), _jsx(Text, { dimColor: true, children: component.framework.padEnd(10) }), _jsx(Text, { children: (component.propCount + ' props').padEnd(10) }), _jsx(Text, { children: (component.slotCount + ' ' + (component.slotCount === 1 ? 'slot' : 'slots')).padEnd(8) }), _jsx(Text, { color: confColor, children: confLabel }), component.warnings.length > 0 && (_jsx(Text, { color: "yellow", children: '  ⚠ ' + component.warnings.length + ' warning' + (component.warnings.length === 1 ? '' : 's') }))] }, component.name));
+                    }), showScrollDown && _jsx(Text, { dimColor: true, children: " \u25BC scroll down" }), result.totalWarnings > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: '─'.repeat(70) }), _jsx(Text, { bold: true, color: "yellow", children: 'Warnings (' + result.totalWarnings + ')' }), _jsx(Text, { dimColor: true, children: '─'.repeat(70) }), _jsx(Text, { children: " " }), result.components
                                 .filter((c) => c.warnings.length > 0)
                                 .flatMap((c) => c.warnings.map((w) => ({ component: c.name, warning: w })))
                                 .map((w, i) => (_jsx(Text, { color: "yellow", children: '  ⚠ ' + w.component + ': ' + w.warning }, i)))] })), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: 'Run: analyze select --session ' + result.sessionId }), _jsx(Text, { children: " " })] }), _jsx(Box, { borderStyle: "single", paddingX: 1, children: _jsx(Text, { dimColor: true, children: "Press Enter or q to exit" }) })] }));

package/dist/src/generate/agent-runner.d.ts

@@ -37,11 +37,13 @@ export interface SelectComponentCall {
     tool: 'select_component';
     name: string;
     reason?: string;
+    confidence?: number;
 }
 export interface RejectComponentCall {
     tool: 'reject_component';
     name: string;
     reason?: string;
+    confidence?: number;
 }
 export type SelectToolCall = SelectComponentCall | RejectComponentCall;
 export interface ParsedSelectToolCalls {

package/dist/src/generate/agent-runner.js

@@ -30,6 +30,14 @@ export function parseSelectToolCallLines(stdout) {
         };
         if (typeof rec.reason === 'string')
             call.reason = rec.reason;
+        if (typeof rec.confidence === 'number' && rec.confidence >= 1 && rec.confidence <= 5) {
+            if (call.tool === 'select_component') {
+                call.confidence = rec.confidence;
+            }
+            else {
+                call.confidence = rec.confidence;
+            }
+        }
         calls.push(call);
     }
     return { calls, warnings };

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

@@ -185,6 +185,8 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, }) {
         id: c.key,
         name: c.key,
         status: c.status,
+        extractionConfidence: null,
+        needsReview: false,
     }));
     const longestName = components.reduce((m, c) => Math.max(m, c.key.length), 0);
     const sidebarWidth = Math.min(Math.max(longestName + 4, 14), 22);

package/dist/src/session/db.js

@@ -34,15 +34,18 @@ CREATE TABLE IF NOT EXISTS steps (
 );
 
 CREATE TABLE IF NOT EXISTS raw_components (
-  session_id    TEXT NOT NULL REFERENCES sessions(id) ON DELETE CASCADE,
-  component_id  TEXT NOT NULL,
-  name          TEXT NOT NULL,
-  source        TEXT NOT NULL,
-  framework     TEXT NOT NULL,
-  extracted_at  TEXT NOT NULL,
-  status        TEXT NOT NULL DEFAULT 'extracted',
-  cdf_schema    TEXT,
-  description   TEXT,
+  session_id             TEXT NOT NULL REFERENCES sessions(id) ON DELETE CASCADE,
+  component_id           TEXT NOT NULL,
+  name                   TEXT NOT NULL,
+  source                 TEXT NOT NULL,
+  framework              TEXT NOT NULL,
+  extracted_at           TEXT NOT NULL,
+  status                 TEXT NOT NULL DEFAULT 'extracted',
+  cdf_schema             TEXT,
+  description            TEXT,
+  extraction_confidence  INTEGER,
+  review_reasons         TEXT NOT NULL DEFAULT '[]',
+  needs_review           INTEGER NOT NULL DEFAULT 0,
   PRIMARY KEY (session_id, component_id)
 );
 
@@ -164,6 +167,18 @@ function applyDbMigrations(db) {
     if (!cols.some((c) => c.name === 'required')) {
         db.exec('ALTER TABLE raw_slots ADD COLUMN required INTEGER NOT NULL DEFAULT 1 CHECK (required IN (0, 1))');
     }
+    // Add extraction confidence scoring columns if they don't exist yet (added in v0.6.0).
+    const rawCompCols = db.prepare('PRAGMA table_info(raw_components)').all();
+    const rawCompColNames = new Set(rawCompCols.map((c) => c.name));
+    if (!rawCompColNames.has('extraction_confidence')) {
+        db.exec('ALTER TABLE raw_components ADD COLUMN extraction_confidence INTEGER');
+    }
+    if (!rawCompColNames.has('review_reasons')) {
+        db.exec("ALTER TABLE raw_components ADD COLUMN review_reasons TEXT NOT NULL DEFAULT '[]'");
+    }
+    if (!rawCompColNames.has('needs_review')) {
+        db.exec('ALTER TABLE raw_components ADD COLUMN needs_review INTEGER NOT NULL DEFAULT 0');
+    }
     // Add generation_cache table if it doesn't exist yet.
     const tables = db
         .prepare(`SELECT name FROM sqlite_master WHERE type='table' AND name='generation_cache'`)
@@ -352,8 +367,8 @@ export function updateStep(db, stepId, status, outputs, error) {
 }
 export function storeRawComponents(db, sessionId, components, options) {
     const now = new Date().toISOString();
-    const insertComp = db.prepare(`INSERT INTO raw_components (session_id, component_id, name, source, framework, extracted_at)
-     VALUES (?, ?, ?, ?, ?, ?)`);
+    const insertComp = db.prepare(`INSERT INTO raw_components (session_id, component_id, name, source, framework, extracted_at, extraction_confidence, review_reasons, needs_review)
+     VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`);
     const insertProp = db.prepare(`INSERT INTO raw_props
        (session_id, component_id, name, type, required, category, default_value, description, token_reference, position)
      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`);
@@ -387,7 +402,7 @@ export function storeRawComponents(db, sessionId, components, options) {
         db.prepare('DELETE FROM raw_components WHERE session_id = ?').run(sessionId);
         for (const comp of components) {
             const componentId = deriveComponentId(comp.name, comp.source);
-            insertComp.run(sessionId, componentId, comp.name, comp.source, comp.framework, now);
+            insertComp.run(sessionId, componentId, comp.name, comp.source, comp.framework, now, comp.extractionConfidence ?? null, JSON.stringify(comp.reviewReasons ?? []), comp.needsReview ? 1 : 0);
             for (let i = 0; i < comp.props.length; i++) {
                 const prop = comp.props[i];
                 insertProp.run(sessionId, componentId, prop.name, prop.type, prop.required ? 1 : 0, prop.category ?? null, prop.defaultValue ?? null, prop.description ?? null, prop.tokenReference ?? null, i);
@@ -467,7 +482,7 @@ export function storeRawComponents(db, sessionId, components, options) {
 }
 export function loadRawComponents(db, sessionId, allowedNames) {
     const all = db
-        .prepare('SELECT component_id, name, source, framework FROM raw_components WHERE session_id = ? ORDER BY rowid')
+        .prepare('SELECT component_id, name, source, framework, extraction_confidence, review_reasons, needs_review FROM raw_components WHERE session_id = ? ORDER BY rowid')
         .all(sessionId);
     const components = allowedNames ? all.filter((c) => allowedNames.has(c.name)) : all;
     if (components.length === 0)
@@ -498,6 +513,16 @@ export function loadRawComponents(db, sessionId, allowedNames) {
         name: c.name,
         source: c.source,
         framework: c.framework,
+        extractionConfidence: c.extraction_confidence ?? null,
+        reviewReasons: (() => {
+            try {
+                return JSON.parse(c.review_reasons ?? '[]');
+            }
+            catch {
+                return [];
+            }
+        })(),
+        needsReview: Boolean(c.needs_review),
         props: (propsByComponent.get(c.component_id) ?? []).map((p) => {
             const av = allowedValuesByProp.get(`${c.component_id}::${p.name}`);
             const prop = {

package/dist/src/types.d.ts

@@ -34,6 +34,9 @@ export interface RawComponentDefinition {
      * non-authorable context-provider components.
      */
     usesCreateContext?: boolean;
+    extractionConfidence?: number | null;
+    reviewReasons?: string[];
+    needsReview?: boolean;
 }
 export interface ComponentExtractionResult {
     components: RawComponentDefinition[];
@@ -52,3 +55,5 @@ export interface TokenExtractor {
     name: string;
     extract(projectRoot: string): Promise<RawTokenDefinition[]>;
 }
+/** Strip internal scoring fields before serialising a RawComponentDefinition for display or editing. */
+export declare function stripScoringFields({ extractionConfidence: _c, reviewReasons: _r, needsReview: _n, ...rest }: RawComponentDefinition): Omit<RawComponentDefinition, 'extractionConfidence' | 'reviewReasons' | 'needsReview'>;

package/dist/src/types.js

@@ -1 +1,4 @@
-export {};
+/** Strip internal scoring fields before serialising a RawComponentDefinition for display or editing. */
+export function stripScoringFields({ extractionConfidence: _c, reviewReasons: _r, needsReview: _n, ...rest }) {
+    return rest;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.6.2-dev-build-ea30bad.0",
+  "version": "2.7.0",
   "description": "Contentful Experiences design system import CLI",
   "license": "MIT",
   "type": "module",
@@ -36,7 +36,7 @@
     "react-dom": "^18.3.1",
     "ts-morph": "^27.0.2",
     "typescript": "^5.9.3",
-    "@contentful/experience-design-system-types": "2.6.2-dev-build-ea30bad.0"
+    "@contentful/experience-design-system-types": "2.7.0"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.3",

package/skills/select-components.md

@@ -70,15 +70,21 @@ Emit one JSON object on a single line. Lines not starting with `{` are ignored b
 **Two tool calls — emit exactly one:**
 
 ```
-{"tool":"select_component","name":"<ComponentName>","reason":"<brief reason>"}
+{"tool":"select_component","name":"<ComponentName>","reason":"<brief reason>","confidence":<1-5>}
 
-{"tool":"reject_component","name":"<ComponentName>","reason":"<brief reason>"}
+{"tool":"reject_component","name":"<ComponentName>","reason":"<brief reason>","confidence":<1-5>}
 ```
 
 **Rules:**
 - Emit exactly one JSON object, on one line. No multi-line JSON. No markdown fences.
 - The `name` must match the component name in the input.
 - `reason` is a brief phrase documenting your decision.
+- `confidence` is your certainty (1–5) that the decision is correct:
+  - **5** — obvious case, no doubt (clear UI atom, or clear infrastructure with no visual output)
+  - **4** — likely correct, minor ambiguity
+  - **3** — uncertain, borderline component (few props, ambiguous purpose, could go either way)
+  - **2** — low confidence, guessing
+  - **1** — very unsure, human review strongly recommended
 - Emit prose lines (not starting with `{`) to log your reasoning before the final tool call.
 
 ---