@contentful/experience-design-system-cli 2.6.2-dev-build-3f849e3.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-3f849e3.0",
+  "version": "2.6.2-dev-build-864e323.0",
   "description": "Contentful Experiences design system import CLI",
   "license": "MIT",
   "type": "module",

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

@@ -31,14 +31,18 @@ const OBVIOUS_PROP_NAMES = new Set([
     'aria-label',
     'aria-describedby',
 ]);
-// A union is "wide" if it mixes primitive base types with no additional narrowing
+// 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) {
-    // 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;
+    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;

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,19 +330,10 @@ export function App({ sessionId, artifactsRoot, reviewRoot }) {
         },
         onToggleHelp: () => setShowHelp((prev) => !prev),
     });
-    if (loading) {
-        return _jsx(Text, { children: "Loading session..." });
-    }
-    if (sessionError) {
-        return (_jsxs(Text, { color: "red", children: [sessionError, '\nPress q to exit.'] }));
-    }
-    if (!session || !paths) {
-        return _jsx(Text, { color: "red", children: "Session unavailable." });
-    }
-    if (finalizedResult) {
-        return _jsx(FinalizedScreen, { result: finalizedResult });
-    }
-    const sessionSummary = session.components
+    // 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,
@@ -337,13 +343,27 @@ export function App({ sessionId, artifactsRoot, reviewRoot }) {
         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;
-    });
+    }), [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..." });
+    }
+    if (sessionError) {
+        return (_jsxs(Text, { color: "red", children: [sessionError, '\nPress q to exit.'] }));
+    }
+    if (!session || !paths) {
+        return _jsx(Text, { color: "red", children: "Session unavailable." });
+    }
+    if (finalizedResult) {
+        return _jsx(FinalizedScreen, { result: finalizedResult });
+    }
     const selectedRecord = session.components.find((c) => c.id === selectedId) ?? null;
     const sessionDetail = selectedRecord ? createReviewSessionDetail({ ...session, components: [selectedRecord] }) : null;
     const selectedDetail = sessionDetail?.components[0] ?? null;
@@ -363,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);
@@ -479,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

@@ -29,24 +29,6 @@ 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;
@@ -56,16 +38,11 @@ export function Sidebar({ components, selectedId, focused, scrollOffset, visible
                 const isSelected = component.id === selectedId;
                 const icon = statusIcon(component.status);
                 const color = statusColor(component.status);
-                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 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));
                 }
-                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));
+                return (_jsx(Box, { children: _jsx(Text, { color: color, inverse: isSelected && focused, underline: isSelected && !focused, wrap: "truncate", children: icon + ' ' + name }) }, component.id));
             }), showScrollDown && !collapsed && _jsx(Text, { dimColor: true, children: "\u25BC" })] }));
 }

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,24 +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, { 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 ? '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
+                        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/package.json

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