@contentful/experience-design-system-cli 2.6.1-dev-build-385cf1a.0 → 2.6.2-dev-build-3f849e3.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.6.1-dev-build-385cf1a.0",
+  "version": "2.6.2-dev-build-3f849e3.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,83 @@
+// 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 primitive base types with no additional narrowing
+function isWidePrimitiveUnion(type) {
+    // e.g. "string | number | boolean" — three or more base primitives
+    const parts = type.split('|').map((p) => p.trim());
+    if (parts.length < 3)
+        return false;
+    const primitives = new Set(['string', 'number', 'boolean', 'null', 'undefined']);
+    return parts.filter((p) => primitives.has(p)).length >= 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

@@ -327,12 +327,23 @@ export function App({ sessionId, artifactsRoot, reviewRoot }) {
     if (finalizedResult) {
         return _jsx(FinalizedScreen, { result: finalizedResult });
     }
-    const sessionSummary = session.components.map((c) => ({
+    const sessionSummary = 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) => {
+        // Unresolved flagged items first, then by ascending confidence
+        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;
+    });
     const selectedRecord = session.components.find((c) => c.id === selectedId) ?? null;
     const sessionDetail = selectedRecord ? createReviewSessionDetail({ ...session, components: [selectedRecord] }) : null;
     const selectedDetail = sessionDetail?.components[0] ?? null;

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

@@ -29,6 +29,24 @@ function truncateName(name, maxLen) {
         return name;
     return name.slice(0, maxLen) + '…';
 }
+function confidenceColor(confidence, needsReview) {
+    if (needsReview)
+        return 'red';
+    if (confidence >= 80)
+        return 'green';
+    if (confidence >= 50)
+        return 'yellow';
+    return 'red';
+}
+function confidenceDot(confidence, needsReview) {
+    if (needsReview)
+        return '⚑';
+    if (confidence >= 80)
+        return '●';
+    if (confidence >= 50)
+        return '◐';
+    return '○';
+}
 export function Sidebar({ components, selectedId, focused, scrollOffset, visibleCount, collapsed = false, width: widthProp, }) {
     const visible = components.slice(scrollOffset, scrollOffset + visibleCount);
     const showScrollUp = scrollOffset > 0;
@@ -38,11 +56,16 @@ 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 conf = component.extractionConfidence ?? 100;
+                const nr = component.needsReview ?? false;
+                const dot = confidenceDot(conf, nr);
+                const dotColor = confidenceColor(conf, nr);
+                // reserve 2 chars for dot + space on top of existing icon + space
+                const maxNameLen = Math.max(1, width - 7);
                 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));
                 }
-                return (_jsx(Box, { children: _jsx(Text, { color: color, inverse: isSelected && focused, underline: isSelected && !focused, wrap: "truncate", children: icon + ' ' + name }) }, component.id));
+                return (_jsxs(Box, { children: [_jsx(Text, { color: color, inverse: isSelected && focused, underline: isSelected && !focused, wrap: "truncate", children: icon + ' ' + name + ' ' }), _jsx(Text, { color: dotColor, children: dot })] }, component.id));
             }), showScrollDown && !collapsed && _jsx(Text, { dimColor: true, children: "\u25BC" })] }));
 }

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

@@ -31,7 +31,12 @@ export function AnalyzeView({ result, onExit }) {
     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" }), _jsx(Text, { dimColor: true, children: '─'.repeat(70) }), _jsx(Text, { children: " " }), result.components.slice(scrollOffset).map((component) => {
+                        const conf = component.extractionConfidence ?? 100;
+                        const confColor = component.needsReview ? 'red' : conf >= 80 ? 'green' : conf >= 50 ? 'yellow' : 'red';
+                        const confDot = component.needsReview ? '⚑' : conf >= 80 ? '●' : conf >= 50 ? '◐' : '○';
+                        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: confDot + ' ' + String(conf).padStart(3) }), 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
                                 .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.1-dev-build-385cf1a.0",
+  "version": "2.6.2-dev-build-3f849e3.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.1-dev-build-385cf1a.0"
+    "@contentful/experience-design-system-types": "2.6.2-dev-build-3f849e3.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.
 
 ---