@contentful/experience-design-system-cli 2.6.2-dev-build-ea30bad.0 → 2.6.2-dev-build-864e323.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.6.2-dev-build-864e323.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 ?? 100,
+                needsReview: c.needsReview ?? false,
             })),
             totalWarnings: allWarnings.length,
         };

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

@@ -0,0 +1,7 @@
+import type { RawComponentDefinition } from '../../types.js';
+export type ExtractionScore = {
+    confidence: number;
+    reasons: string[];
+};
+export declare function computeExtractionScore(component: RawComponentDefinition): ExtractionScore;
+export declare function deriveNeedsReview(confidence: number): boolean;

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

@@ -0,0 +1,87 @@
+// 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;
+    // Wide only when there are 3+ base primitives, or 2+ base primitives combined with nullability modifiers
+    return baseCount >= 3 || (baseCount >= 2 && nullabilityCount > 0 && baseCount + nullabilityCount >= 3);
+}
+export function computeExtractionScore(component) {
+    let confidence = 100;
+    const reasons = [];
+    // No props and no slots — extractor likely missed something or component is a wrapper
+    if (component.props.length === 0 && component.slots.length === 0) {
+        confidence -= 15;
+        reasons.push('no-props-or-slots');
+    }
+    for (const prop of component.props) {
+        // Opaque types — extractor couldn't resolve the real type
+        if (OPAQUE_TYPES.has(prop.type.trim())) {
+            confidence -= 20;
+            reasons.push(`opaque-type:${prop.name}`);
+            break; // only penalise once per component
+        }
+        // Wide primitive union — hard for the AI agent to classify meaningfully
+        if (isWidePrimitiveUnion(prop.type)) {
+            confidence -= 10;
+            reasons.push(`wide-union:${prop.name}`);
+            break; // only penalise once
+        }
+        // Non-obvious prop name with no description
+        if (!prop.description && !OBVIOUS_PROP_NAMES.has(prop.name)) {
+            confidence -= 10;
+            reasons.push('props-missing-description');
+            break; // only penalise once
+        }
+    }
+    // High prop count — possible DOM inflation near-miss or overly broad extraction
+    if (component.props.length > 50) {
+        confidence -= 20;
+        reasons.push(`high-prop-count:${component.props.length}`);
+    }
+    return {
+        confidence: Math.max(0, Math.min(100, confidence)),
+        reasons: [...new Set(reasons)], // deduplicate
+    };
+}
+export function deriveNeedsReview(confidence) {
+    return confidence < 70;
+}

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

@@ -1,5 +1,5 @@
 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';
@@ -40,6 +40,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 +143,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 +186,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 +245,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 +256,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 +285,10 @@ export function App({ sessionId, artifactsRoot, reviewRoot }) {
             setEditMode(true);
             setDraftsByComponentId((prev) => ({
                 ...prev,
-                [selectedId]: prev[selectedId] ?? JSON.stringify(component.editedProposal, null, 2),
+                [selectedId]: (() => {
+                    const { extractionConfidence: _c, reviewReasons: _r, needsReview: _n, ...rest } = component.editedProposal;
+                    return prev[selectedId] ?? JSON.stringify(rest, null, 2);
+                })(),
             }));
         },
         onToggleSource: () => {
@@ -315,6 +330,28 @@ 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 ?? 100,
+        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;
+        return a.extractionConfidence - b.extractionConfidence;
+    }), [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 +364,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 +383,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 +502,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

@@ -34,10 +34,16 @@ 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);
+    // Strip internal scoring fields — they're metadata, not part of the component definition
+    const stripScoring = ({ extractionConfidence: _c, reviewReasons: _r, needsReview: _n, ...rest }) => rest;
+    const originalJson = JSON.stringify(stripScoring(component.originalProposal), null, 2);
+    const editedJson = JSON.stringify(stripScoring(component.editedProposal), null, 2);
+    const conf = component.originalProposal.extractionConfidence ?? 100;
+    const nr = component.originalProposal.needsReview ?? false;
+    const confColor = nr ? 'red' : conf >= 80 ? 'white' : conf >= 50 ? 'yellow' : 'red';
+    const confLabel = (nr ? '⚑ ' : '') + 'confidence: ' + String(conf);
     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;
+    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 ?? 100,
+            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;
+        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 ?? 100;
+                        const confColor = component.needsReview ? 'red' : conf >= 80 ? 'white' : conf >= 50 ? 'yellow' : 'red';
+                        const confLabel = (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,9 @@ export function parseSelectToolCallLines(stdout) {
         };
         if (typeof rec.reason === 'string')
             call.reason = rec.reason;
+        if (typeof rec.confidence === 'number' && rec.confidence >= 0 && rec.confidence <= 100) {
+            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: 100,
+        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 NOT NULL DEFAULT 100,
+  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 NOT NULL DEFAULT 100');
+    }
+    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 ?? 100, 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 ?? 100,
+        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;
+    reviewReasons?: string[];
+    needsReview?: boolean;
 }
 export interface ComponentExtractionResult {
     components: RawComponentDefinition[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.6.2-dev-build-ea30bad.0",
+  "version": "2.6.2-dev-build-864e323.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.6.2-dev-build-864e323.0"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.3",

package/skills/select-components.md

@@ -70,15 +70,16 @@ 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":<0-100>}
 
-{"tool":"reject_component","name":"<ComponentName>","reason":"<brief reason>"}
+{"tool":"reject_component","name":"<ComponentName>","reason":"<brief reason>","confidence":<0-100>}
 ```
 
 **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 (0–100) that the decision is correct. Use 90–100 for obvious cases (clear UI atom or obvious infrastructure), 60–80 for borderline cases (few props, ambiguous purpose), and below 60 when you're genuinely unsure.
 - Emit prose lines (not starting with `{`) to log your reasoning before the final tool call.
 
 ---