@contentful/experience-design-system-cli 2.11.4-dev-build-d47ab65.0 → 2.12.1-dev-build-589b615.0

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

@@ -11,5 +11,5 @@ export function FinalizeDialog({ accepted, rejected, needsReview, onConfirm, onC
         }
     });
     const allResolved = needsReview === 0;
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", padding: 1, width: 58, children: [_jsx(Text, { bold: true, children: '─'.repeat(17) + ' Finalize ' + '─'.repeat(17) }), _jsx(Text, { children: " " }), _jsxs(Text, { children: [_jsxs(Text, { color: "green", children: [accepted, " accepted"] }), _jsx(Text, { children: " \u00B7 " }), _jsxs(Text, { color: "red", children: [rejected, " rejected"] }), _jsx(Text, { children: " \u00B7 " }), _jsxs(Text, { dimColor: true, children: [needsReview, " unresolved"] })] }), _jsx(Text, { children: " " }), !allResolved && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "yellow", children: '⚠ ' + needsReview + ' component' + (needsReview === 1 ? ' is' : 's are') + ' unresolved and will be' }), _jsx(Text, { color: "yellow", children: '  excluded from the output.' }), _jsx(Text, { children: " " })] })), _jsx(Text, { children: allResolved ? 'Save decisions and exit? All components resolved.' : 'Save decisions and exit?' }), _jsx(Text, { children: " " }), _jsx(Text, { children: '  [y / Enter]  Confirm    [n / Esc]  Cancel' })] }));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", padding: 1, width: 58, children: [_jsx(Text, { bold: true, children: '─'.repeat(17) + ' Finalize ' + '─'.repeat(17) }), _jsx(Text, { children: " " }), _jsxs(Text, { children: [_jsxs(Text, { color: "green", children: [accepted, " accepted"] }), _jsx(Text, { children: " \u00B7 " }), _jsxs(Text, { color: "red", children: [rejected, " rejected"] }), _jsx(Text, { children: " \u00B7 " }), _jsxs(Text, { dimColor: true, children: [needsReview, " unresolved"] })] }), _jsx(Text, { children: " " }), !allResolved && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "yellow", children: '⚠ ' + needsReview + ' unresolved component' + (needsReview === 1 ? '' : 's') + ' will not be pushed.' }), _jsx(Text, { color: "yellow", children: '  Only explicitly accepted components ship.' }), _jsx(Text, { children: " " })] })), _jsx(Text, { children: allResolved ? 'Save decisions and exit? All components resolved.' : 'Save decisions and exit?' }), _jsx(Text, { children: " " }), _jsx(Text, { children: '  [y / Enter]  Confirm    [n / Esc]  Cancel' })] }));
 }

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

@@ -55,7 +55,11 @@ export function JsonPanel({ label, value, scrollOffset, width, height, active })
     const allLines = value.split('\n');
     const visibleLines = allLines.slice(scrollOffset, scrollOffset + height);
     const innerWidth = Math.max(1, width - 2); // subtract border
-    return (_jsxs(Box, { flexDirection: "column", width: width, height: height + 2, borderStyle: "single", borderColor: active ? 'white' : undefined, children: [_jsx(Text, { bold: true, dimColor: !active, children: label }), visibleLines.map((line, i) => {
+    const totalLines = allLines.length;
+    const truncated = totalLines > height;
+    const visibleStart = totalLines === 0 ? 0 : scrollOffset + 1;
+    const visibleEnd = Math.min(totalLines, scrollOffset + height);
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: height + 2, borderStyle: "single", borderColor: active ? 'white' : undefined, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, dimColor: !active, children: label }), truncated && (_jsxs(_Fragment, { children: [_jsx(Box, { flexGrow: 1 }), _jsx(Text, { dimColor: !active, children: `↕ ${visibleStart}-${visibleEnd}/${totalLines}` })] }))] }), visibleLines.map((line, i) => {
                 const truncated = truncateLine(line, innerWidth);
                 return _jsx(Box, { children: highlightJson(truncated) }, i);
             })] }));

package/dist/src/analyze/select/tui/components/RationalePanel.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+export type RationaleRow = {
+    name: string;
+    kind: 'prop' | 'slot';
+    rationale: string;
+};
+export type RationalePanelProps = {
+    componentName: string;
+    rows: RationaleRow[];
+    scrollOffset: number;
+    width: number;
+    height: number;
+    active: boolean;
+};
+type RenderedLine = {
+    kind: 'name';
+    text: string;
+    isSlot: boolean;
+} | {
+    kind: 'text';
+    text: string;
+} | {
+    kind: 'blank';
+};
+/**
+ * Flatten `rows` to a list of rendered lines so scrollOffset slicing matches
+ * what the operator sees. Layout per row:
+ *   <name>           ← bold
+ *   <wrapped text>   ← one or more lines
+ *   <blank>          ← spacer (omitted after the final row)
+ */
+export declare function renderRationaleLines(rows: RationaleRow[], innerWidth: number): RenderedLine[];
+export declare function RationalePanel({ componentName, rows, scrollOffset, width, height, active, }: RationalePanelProps): React.ReactElement;
+export {};

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

@@ -0,0 +1,92 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+/**
+ * Word-wrap a single rationale paragraph to fit within `innerWidth` columns.
+ * Returns an array of wrapped lines. Empty input → single empty line so the
+ * row still occupies vertical space.
+ */
+function wrapText(text, innerWidth) {
+    if (!text)
+        return [''];
+    const width = Math.max(1, innerWidth);
+    const words = text.split(/\s+/).filter((w) => w.length > 0);
+    if (words.length === 0)
+        return [''];
+    const lines = [];
+    let current = '';
+    for (const w of words) {
+        if (current.length === 0) {
+            // Word longer than width — hard-break.
+            if (w.length > width) {
+                let rest = w;
+                while (rest.length > width) {
+                    lines.push(rest.slice(0, width));
+                    rest = rest.slice(width);
+                }
+                current = rest;
+            }
+            else {
+                current = w;
+            }
+            continue;
+        }
+        if (current.length + 1 + w.length <= width) {
+            current += ' ' + w;
+        }
+        else {
+            lines.push(current);
+            if (w.length > width) {
+                let rest = w;
+                while (rest.length > width) {
+                    lines.push(rest.slice(0, width));
+                    rest = rest.slice(width);
+                }
+                current = rest;
+            }
+            else {
+                current = w;
+            }
+        }
+    }
+    if (current.length > 0)
+        lines.push(current);
+    return lines.length > 0 ? lines : [''];
+}
+/**
+ * Flatten `rows` to a list of rendered lines so scrollOffset slicing matches
+ * what the operator sees. Layout per row:
+ *   <name>           ← bold
+ *   <wrapped text>   ← one or more lines
+ *   <blank>          ← spacer (omitted after the final row)
+ */
+export function renderRationaleLines(rows, innerWidth) {
+    const out = [];
+    rows.forEach((row, idx) => {
+        out.push({ kind: 'name', text: row.name, isSlot: row.kind === 'slot' });
+        for (const line of wrapText(row.rationale, innerWidth)) {
+            out.push({ kind: 'text', text: line });
+        }
+        if (idx < rows.length - 1) {
+            out.push({ kind: 'blank' });
+        }
+    });
+    return out;
+}
+export function RationalePanel({ componentName, rows, scrollOffset, width, height, active, }) {
+    const innerWidth = Math.max(1, width - 2); // subtract border
+    const allLines = renderRationaleLines(rows, innerWidth);
+    const totalLines = allLines.length;
+    const visible = allLines.slice(scrollOffset, scrollOffset + height);
+    const overflowed = totalLines > height;
+    const visibleStart = totalLines === 0 ? 0 : scrollOffset + 1;
+    const visibleEnd = Math.min(totalLines, scrollOffset + height);
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: height + 2, borderStyle: "single", borderColor: active ? 'white' : undefined, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, dimColor: !active, children: `RATIONALE — ${componentName}` }), overflowed && (_jsxs(_Fragment, { children: [_jsx(Box, { flexGrow: 1 }), _jsx(Text, { dimColor: !active, children: `↕ ${visibleStart}-${visibleEnd}/${totalLines}` })] }))] }), visible.map((line, i) => {
+                if (line.kind === 'blank') {
+                    return (_jsx(Box, { children: _jsx(Text, { children: " " }) }, i));
+                }
+                if (line.kind === 'name') {
+                    return (_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", dimColor: !active, children: line.text }), line.isSlot && _jsx(Text, { dimColor: true, children: " (slot)" })] }, i));
+                }
+                return (_jsx(Box, { children: _jsx(Text, { dimColor: !active, children: line.text }) }, i));
+            })] }));
+}

package/dist/src/analyze/select/tui/components/Sidebar.d.ts

@@ -1,5 +1,17 @@
 import React from 'react';
-import type { ReviewComponentSummary, ReviewComponentStatus } from '../../types.js';
+import type { PreviewAnnotation, ReviewComponentSummary, ReviewComponentStatus } from '../../types.js';
+/**
+ * Pilot-2026-06-23 R2: render a single-character preview-diff badge directly
+ * before each component name in the sidebar so operators can scan the diff
+ * shape at a glance without opening each row. Returns null for unannotated
+ * rows so the row falls back to its existing single-space layout.
+ */
+export declare function previewBadge(annotation: PreviewAnnotation | undefined): {
+    char: string;
+    color: string;
+    bold?: boolean;
+    dim?: boolean;
+} | null;
 type SidebarProps = {
     components: ReviewComponentSummary[];
     selectedId: string | null;

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

@@ -1,5 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+/**
+ * Pilot-2026-06-23 R2: render a single-character preview-diff badge directly
+ * before each component name in the sidebar so operators can scan the diff
+ * shape at a glance without opening each row. Returns null for unannotated
+ * rows so the row falls back to its existing single-space layout.
+ */
+export function previewBadge(annotation) {
+    switch (annotation) {
+        case 'new':
+            return { char: '+', color: 'green' };
+        case 'changed':
+            return { char: '~', color: 'yellow' };
+        case 'removed':
+            return { char: '-', color: 'red', dim: true };
+        case 'breaking':
+            return { char: '!', color: 'red', bold: true };
+        default:
+            return null;
+    }
+}
 export function statusIcon(status, validationErrorCount, 
 // Warnings deliberately do NOT override the icon — the user's accept/reject
 // decision must remain visible. Color is already yellow via statusColor for
@@ -70,15 +90,19 @@ export function Sidebar({ components, selectedId, focused, scrollOffset, visible
     const showScrollUp = scrollOffset > 0;
     const showScrollDown = scrollOffset + visibleCount < sorted.length;
     const width = collapsed ? 3 : (widthProp ?? 18);
-    return (_jsxs(Box, { flexDirection: "column", width: width, borderStyle: "single", borderColor: focused ? 'white' : undefined, children: [showScrollUp && !collapsed && _jsx(Text, { dimColor: true, children: "\u25B2" }), visible.map((component) => {
+    return (_jsxs(Box, { flexDirection: "column", width: width, flexShrink: 0, borderStyle: "single", borderColor: focused ? 'white' : undefined, children: [showScrollUp && !collapsed && _jsx(Text, { dimColor: true, children: "\u25B2" }), visible.map((component) => {
                 const isSelected = component.id === selectedId;
                 const icon = statusIcon(component.status, component.validationErrorCount, component.validationWarningCount);
                 const color = statusColor(component.status, component.validationErrorCount, component.validationWarningCount);
-                const maxNameLen = Math.max(1, width - 4);
+                const badge = previewBadge(component.previewAnnotation);
+                // Reserve one column for the preview badge regardless of whether this
+                // row has one — keeps name truncation stable across rows so the column
+                // width doesn't jitter as annotations flip in/out.
+                const maxNameLen = Math.max(1, width - 5);
                 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, children: icon }), badge ? (_jsx(Text, { color: badge.color, bold: badge.bold, dimColor: badge.dim, children: badge.char })) : (_jsx(Text, { children: " " })), _jsx(Text, { color: color, inverse: isSelected && focused, underline: isSelected && !focused, wrap: "truncate", children: ' ' + name })] }, component.id));
             }), showScrollDown && !collapsed && _jsx(Text, { dimColor: true, children: "\u25BC" })] }));
 }

package/dist/src/analyze/select/tui/hooks/scroll-offset.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Pure helper for computing the next scroll offset when the operator presses
+ * a navigation key inside a scrollable TUI panel (JSON view, rationale view,
+ * etc.). Extracted as a shared module so multiple panels can reuse the same
+ * scroll bindings without duplicating logic.
+ *
+ * Returns the new offset, or `null` if the input doesn't match any scroll
+ * binding (caller should NOT update state in that case).
+ *
+ * Supported bindings:
+ * - j / downArrow      → +1 line
+ * - k / upArrow        → -1 line
+ * - Ctrl+d             → +half-page (floor(panelHeight / 2))
+ * - Ctrl+u             → -half-page
+ * - PageDown           → +panelHeight
+ * - PageUp             → -panelHeight
+ * - G                  → jump to maxOffset
+ *
+ * `g` (single-tap) and `gg` (double-tap → jump to 0) are handled separately
+ * by the caller via a pending-flag ref, since they need transient state.
+ */
+export type ScrollKeyState = {
+    upArrow?: boolean;
+    downArrow?: boolean;
+    pageUp?: boolean;
+    pageDown?: boolean;
+    ctrl?: boolean;
+};
+export declare function computeNextScrollOffset(current: number, input: string, key: ScrollKeyState, totalLines: number, panelHeight: number): number | null;

package/dist/src/analyze/select/tui/hooks/scroll-offset.js

@@ -0,0 +1,26 @@
+export function computeNextScrollOffset(current, input, key, totalLines, panelHeight) {
+    const maxOffset = Math.max(0, totalLines - panelHeight);
+    const halfPage = Math.max(1, Math.floor(panelHeight / 2));
+    if (key.ctrl && input === 'd') {
+        return Math.min(maxOffset, current + halfPage);
+    }
+    if (key.ctrl && input === 'u') {
+        return Math.max(0, current - halfPage);
+    }
+    if (key.downArrow || input === 'j') {
+        return Math.min(maxOffset, current + 1);
+    }
+    if (key.upArrow || input === 'k') {
+        return Math.max(0, current - 1);
+    }
+    if (key.pageDown) {
+        return Math.min(maxOffset, current + panelHeight);
+    }
+    if (key.pageUp) {
+        return Math.max(0, current - panelHeight);
+    }
+    if (input === 'G') {
+        return maxOffset;
+    }
+    return null;
+}

package/dist/src/analyze/select-agent/command.d.ts

@@ -1,2 +1,4 @@
 import type { Command } from 'commander';
+export declare const DEFAULT_CONCURRENCY = 10;
+export declare const DEFAULT_BATCH_SIZE = 5;
 export declare function registerAnalyzeSelectAgentCommand(program: Command): void;