@contentful/experience-design-system-cli 2.7.1-dev-build-02830eb.0 → 2.7.1

package/dist/package.json

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

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

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useReducer, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Box, Text, useStdout } from 'ink';
+import { readFile } from 'node:fs/promises';
+import { createReviewSessionDetail } from '../types.js';
+import { stripScoringFields } from '../../../types.js';
 import { TopBar } from './components/TopBar.js';
 import { Sidebar } from './components/Sidebar.js';
 import { ComponentDetail } from './components/ComponentDetail.js';
@@ -9,69 +12,367 @@ import { HelpOverlay } from './components/HelpOverlay.js';
 import { FinalizeDialog } from './components/FinalizeDialog.js';
 import { QuitDialog } from './components/QuitDialog.js';
 import { PreviewSummaryBar } from './components/PreviewSummaryBar.js';
+import { useKeymap } from './hooks/useKeymap.js';
 import { useImmediateInput } from './hooks/useImmediateInput.js';
-import { useRawMode } from './hooks/useRawMode.js';
 import { useSession } from './hooks/useSession.js';
-import { useSideEffects } from './hooks/useSideEffects.js';
-import { reducer, initialState } from './state.js';
-import { inputToAction } from './inputToAction.js';
-import { createReviewSessionDetail } from '../types.js';
+import { openPipelineDb, storeRawComponents, loadCDFComponents } from '../../../session/db.js';
+import { ImportApiClient } from '../../../apply/api-client.js';
+import { readTokensFromPath } from '../../../apply/manifest.js';
+import { buildManifest } from '@contentful/experience-design-system-types';
 export function App({ sessionId, artifactsRoot, reviewRoot }) {
     const { stdout } = useStdout();
     const terminalWidth = stdout?.columns ?? 80;
-    const visibleCount = Math.max(1, (stdout?.rows ?? 24) - 5);
-    useRawMode();
     const { session: loadedSession, paths, loading, error: sessionError, saveState, appendEvent, } = useSession({
         sessionId,
         artifactsRoot,
         reviewRoot,
     });
-    const [state, dispatch] = useReducer(reducer, initialState);
-    // Refs so the single stdin listener always reads the latest committed values
-    const stateRef = useRef(state);
-    const visibleCountRef = useRef(visibleCount);
-    const terminalWidthRef = useRef(terminalWidth);
-    stateRef.current = state;
-    visibleCountRef.current = visibleCount;
-    terminalWidthRef.current = terminalWidth;
-    // ── Single stdin listener ─────────────────────────────────────────────────
-    useImmediateInput((input, key) => {
-        const action = inputToAction(input, key, stateRef.current, visibleCountRef.current, terminalWidthRef.current);
-        if (action)
-            dispatch(action);
+    const [session, setSession] = useState(null);
+    const [selectedId, setSelectedId] = useState(null);
+    const [draftsByComponentId, setDraftsByComponentId] = useState({});
+    const [sidebarFocused, setSidebarFocused] = useState(true);
+    const [editMode, setEditMode] = useState(false);
+    const [sourceVisible, setSourceVisible] = useState(false);
+    const [showHelp, setShowHelp] = useState(false);
+    const [showFinalizeDialog, setShowFinalizeDialog] = useState(false);
+    const [showQuitDialog, setShowQuitDialog] = useState(false);
+    const [isSaving] = useState(false);
+    const [saveError, setSaveError] = useState(null);
+    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)
+            return {};
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return {};
+        }
     });
-    // ── Load session ──────────────────────────────────────────────────────────
+    const [previewLoading, setPreviewLoading] = useState(false);
+    const [previewError, setPreviewError] = useState(null);
+    const [previewResponse, setPreviewResponse] = useState(null);
+    const refreshPreview = useCallback(async () => {
+        const cmaToken = process.env['EDS_CMA_TOKEN'];
+        const spaceId = process.env['EDS_SPACE_ID'];
+        const environmentId = process.env['EDS_ENVIRONMENT_ID'];
+        const tokensPath = process.env['EDS_TOKENS_PATH'];
+        if (!cmaToken || !spaceId || !environmentId)
+            return;
+        setPreviewLoading(true);
+        try {
+            const db = openPipelineDb();
+            let components = [];
+            try {
+                components = loadCDFComponents(db, sessionId);
+            }
+            finally {
+                db.close();
+            }
+            let tokens = [];
+            if (tokensPath)
+                tokens = await readTokensFromPath('tokens', tokensPath);
+            const manifest = buildManifest(components, tokens);
+            if (!manifest.componentsManifest)
+                manifest.componentsManifest = {};
+            const client = new ImportApiClient({ cmaToken, spaceId, environmentId });
+            const preview = await client.previewImport(manifest);
+            const annotations = {};
+            for (const item of preview.components.new) {
+                const name = item.name ?? '';
+                if (name)
+                    annotations[name] = 'new';
+            }
+            for (const item of preview.components.removed) {
+                annotations[item.name] = 'removed';
+            }
+            for (const item of preview.components.changed) {
+                if (item.changeClassification?.classification === 'breaking') {
+                    annotations[item.current.name] = 'breaking';
+                }
+                else {
+                    annotations[item.current.name] = 'changed';
+                }
+            }
+            setPreviewAnnotations(annotations);
+            setPreviewResponse(preview);
+            setPreviewError(null);
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            setPreviewError(msg.includes('token') ? 'Preview request failed' : msg);
+        }
+        finally {
+            setPreviewLoading(false);
+        }
+    }, [sessionId]);
+    const syncSessionToDb = useCallback((currentSession) => {
+        const db = openPipelineDb();
+        try {
+            db.prepare(`UPDATE raw_components SET status = 'extracted' WHERE session_id = ?`).run(sessionId);
+            const acceptedNames = currentSession.components
+                .filter((c) => c.status === 'accepted' || c.status === 'reviewed')
+                .map((c) => c.name);
+            if (acceptedNames.length > 0) {
+                db.prepare(`UPDATE raw_components SET status = 'generated' WHERE session_id = ? AND name IN (${acceptedNames.map(() => '?').join(',')})`).run(sessionId, ...acceptedNames);
+            }
+        }
+        finally {
+            db.close();
+        }
+    }, [sessionId]);
+    const previewDebounceRef = useRef(null);
+    const debouncedRefreshPreview = useCallback((currentSession) => {
+        if (previewDebounceRef.current)
+            clearTimeout(previewDebounceRef.current);
+        previewDebounceRef.current = setTimeout(() => {
+            syncSessionToDb(currentSession);
+            void refreshPreview();
+        }, 500);
+    }, [syncSessionToDb, refreshPreview]);
     useEffect(() => {
-        if (loadedSession && !state.session) {
-            dispatch({ type: 'SESSION_LOADED', session: loadedSession, paths });
+        return () => {
+            if (previewDebounceRef.current)
+                clearTimeout(previewDebounceRef.current);
+        };
+    }, []);
+    // 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(null);
         }
     }, [loadedSession]);
-    // ── All side effects in one hook ──────────────────────────────────────────
-    useSideEffects(state, dispatch, { sessionId, saveState, appendEvent });
-    // ── Render ────────────────────────────────────────────────────────────────
-    if (loading)
+    // 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'];
+            if (raw) {
+                try {
+                    const counts = JSON.parse(raw);
+                    setPreviewResponse({
+                        components: {
+                            new: Array(counts.compNew).fill({}),
+                            changed: Array(counts.compChanged).fill({}),
+                            removed: Array(counts.compRemoved).fill({}),
+                            unchanged: Array(counts.compUnchanged).fill({}),
+                        },
+                        tokens: {
+                            new: Array(counts.tokNew).fill({}),
+                            changed: Array(counts.tokChanged).fill({}),
+                            removed: Array(counts.tokRemoved).fill({}),
+                            unchanged: Array(counts.tokUnchanged).fill({}),
+                        },
+                    });
+                }
+                catch (err) {
+                    process.stderr.write(`[eds] failed to parse EDS_PREVIEW_COUNTS: ${err instanceof Error ? err.message : String(err)}\n`);
+                }
+            }
+        }
+    }, [session]);
+    // 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)
+            return;
+        readFile(selectedComponent.resolvedSourcePath, 'utf8')
+            .then((code) => {
+            setSourceCodeById((prev) => ({ ...prev, [selectedId]: code }));
+        })
+            .catch(() => {
+            setSourceCodeById((prev) => ({ ...prev, [selectedId]: '' }));
+        });
+    }, [selectedId]);
+    // SIGINT handler
+    useEffect(() => {
+        const handler = () => {
+            if (Object.keys(draftsByComponentId).length > 0) {
+                setShowQuitDialog(true);
+            }
+            else {
+                process.exit(1);
+            }
+        };
+        process.on('SIGINT', handler);
+        return () => {
+            process.off('SIGINT', handler);
+        };
+    }, [draftsByComponentId]);
+    const updateStatus = async (componentId, newStatus) => {
+        if (!session || !paths)
+            return;
+        const updatedSession = {
+            ...session,
+            components: session.components.map((c) => (c.id === componentId ? { ...c, status: newStatus } : c)),
+        };
+        setSession(updatedSession);
+        await saveState(updatedSession);
+        const component = session.components.find((c) => c.id === componentId);
+        await appendEvent({
+            type: 'status_changed',
+            payload: { componentId, from: component?.status, to: newStatus },
+        });
+        debouncedRefreshPreview(updatedSession);
+    };
+    const dialogOpen = showHelp || showFinalizeDialog || showQuitDialog;
+    useKeymap({
+        sidebarFocused,
+        editMode,
+        dialogOpen,
+        disabled: isSaving,
+    }, {
+        onSidebarUp: () => {
+            if (!session)
+                return;
+            const ids = sortedIdsRef.current;
+            const idx = ids.indexOf(selectedId ?? '');
+            if (idx > 0) {
+                setSelectedId(ids[idx - 1]);
+                setJsonScrollOffset(0);
+                setSidebarScrollOffset((prev) => Math.min(prev, idx - 1));
+            }
+        },
+        onSidebarDown: () => {
+            if (!session)
+                return;
+            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;
+                    return newIdx >= prev + visibleCount ? newIdx - visibleCount + 1 : prev;
+                });
+            }
+        },
+        onSidebarSelect: () => { },
+        onAccept: () => {
+            if (selectedId)
+                void updateStatus(selectedId, 'accepted');
+        },
+        onReject: () => {
+            if (selectedId)
+                void updateStatus(selectedId, 'rejected');
+        },
+        onEnterEditMode: () => {
+            if (!session || !selectedId)
+                return;
+            const component = session.components.find((c) => c.id === selectedId);
+            if (!component)
+                return;
+            setEditMode(true);
+            setDraftsByComponentId((prev) => ({
+                ...prev,
+                [selectedId]: prev[selectedId] ?? JSON.stringify(stripScoringFields(component.editedProposal), null, 2),
+            }));
+        },
+        onToggleSource: () => {
+            if (terminalWidth < 120) {
+                setSaveError('Terminal too narrow for source panel (need 120+ cols)');
+                setTimeout(() => setSaveError(null), 3000);
+                return;
+            }
+            setSourceVisible((prev) => !prev);
+        },
+        onScrollUp: () => {
+            setJsonScrollOffset((prev) => Math.max(0, prev - 1));
+        },
+        onScrollDown: () => {
+            setJsonScrollOffset((prev) => prev + 1);
+        },
+        onToggleFocus: () => setSidebarFocused((prev) => !prev),
+        onApproveAll: async () => {
+            if (!session || !paths)
+                return;
+            const updatedComponents = session.components.map((c) => c.status === 'needs-review' ? { ...c, status: 'accepted' } : c);
+            const affected = updatedComponents.filter((c) => c.status === 'accepted').length -
+                session.components.filter((c) => c.status === 'accepted').length;
+            const updatedSession = { ...session, components: updatedComponents };
+            setSession(updatedSession);
+            await saveState(updatedSession);
+            await appendEvent({ type: 'approve_all', payload: { affected } });
+            syncSessionToDb(updatedSession);
+            void refreshPreview();
+        },
+        onFinalize: () => setShowFinalizeDialog(true),
+        onQuit: () => {
+            if (Object.keys(draftsByComponentId).length > 0) {
+                setShowQuitDialog(true);
+            }
+            else {
+                process.exit(1);
+            }
+        },
+        onToggleHelp: () => setShowHelp((prev) => !prev),
+    });
+    // Sorted order: flagged+unresolved first, then ascending confidence.
+    // Memoised above early returns (React rules of hooks) so the array reference
+    // is stable between renders — prevents Sidebar repainting on scroll/select.
+    const sessionSummary = useMemo(() => (session?.components ?? [])
+        .map((c) => ({
+        id: c.id,
+        name: c.name,
+        status: c.status,
+        previewAnnotation: previewAnnotations[c.name],
+        extractionConfidence: c.originalProposal.extractionConfidence ?? null,
+        needsReview: c.originalProposal.needsReview ?? false,
+    }))
+        .sort((a, b) => {
+        const aFlagged = a.needsReview && a.status === 'needs-review' ? 0 : 1;
+        const bFlagged = b.needsReview && b.status === 'needs-review' ? 0 : 1;
+        if (aFlagged !== bFlagged)
+            return aFlagged - bFlagged;
+        // null (unscored) sorts last; lower numeric score sorts first (most concerning)
+        const aConf = a.extractionConfidence ?? 6;
+        const bConf = b.extractionConfidence ?? 6;
+        return aConf - bConf;
+    }), [session?.components, previewAnnotations]);
+    // Stable ID order — kept in a ref for use inside keymap handlers
+    const sortedIds = useMemo(() => sessionSummary.map((c) => c.id), [sessionSummary]);
+    sortedIdsRef.current = sortedIds;
+    if (loading) {
         return _jsx(Text, { children: "Loading session..." });
-    if (sessionError)
+    }
+    if (sessionError) {
         return (_jsxs(Text, { color: "red", children: [sessionError, '\nPress q to exit.'] }));
-    if (!state.session)
+    }
+    if (!session || !paths) {
         return _jsx(Text, { color: "red", children: "Session unavailable." });
-    const { mode, session, selectedId, sidebarScrollOffset, jsonScrollOffset, editor } = state;
-    if (mode.type === 'finalized')
-        return _jsx(FinalizedScreen, { result: mode });
+    }
+    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;
-    const counts = {
-        accepted: session.components.filter((c) => c.status === 'accepted').length,
-        rejected: session.components.filter((c) => c.status === 'rejected').length,
-        reviewed: session.components.filter((c) => c.status === 'reviewed').length,
-        needsReview: session.components.filter((c) => c.status === 'needs-review').length,
-    };
-    const dialogOpen = mode.type === 'dialog';
-    const isEditing = mode.type === 'editing';
-    const sourceVisible = mode.type === 'browsing' && mode.sourceVisible;
-    const sidebarFocused = mode.type === 'browsing' && mode.sidebarFocused;
-    const hints = isEditing
+    const acceptedCount = session.components.filter((c) => c.status === 'accepted').length;
+    const rejectedCount = session.components.filter((c) => c.status === 'rejected').length;
+    const reviewedCount = session.components.filter((c) => c.status === 'reviewed').length;
+    const needsReviewCount = session.components.filter((c) => c.status === 'needs-review').length;
+    const hints = editMode
         ? [
             { key: 'Ctrl+S', label: 'save' },
             { key: 'Esc', label: 'discard' },
@@ -83,21 +384,141 @@ export function App({ sessionId, artifactsRoot, reviewRoot }) {
                 { key: 'q', label: 'quit' },
             ];
     const collapsed = terminalWidth < 80;
-    const longestName = session.components.reduce((m, c) => Math.max(m, c.name.length), 0);
+    // 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);
-    const { sessionSummary } = state; // stable reference — only changes when data changes, never on scroll/select
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(TopBar, { subcommand: "analyze select", hints: hints }), mode.type === 'dialog' && mode.which === 'help' && (_jsx(HelpOverlay, { mode: "review", onClose: () => dispatch({ type: 'CLOSE_DIALOG' }) })), mode.type === 'dialog' && mode.which === 'finalize' && (_jsx(FinalizeDialog, { accepted: counts.accepted, rejected: counts.rejected, needsReview: counts.needsReview, onConfirm: () => dispatch({ type: 'FINALIZE_CONFIRM' }), onCancel: () => dispatch({ type: 'CLOSE_DIALOG' }) })), mode.type === 'dialog' && mode.which === 'quit' && (_jsx(QuitDialog, { hasUnsavedDrafts: Object.keys(state.draftsByComponentId).length > 0, onConfirm: async () => {
-                    if (paths)
-                        await appendEvent({ type: 'session_quit', payload: { reason: 'user_quit' } });
+    const handleDraftSave = async () => {
+        if (!selectedId || !session || !paths)
+            return;
+        const draft = draftsByComponentId[selectedId];
+        if (!draft)
+            return;
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const parsed = JSON.parse(draft);
+            const currentStatus = session.components.find((c) => c.id === selectedId)?.status;
+            const newStatus = currentStatus === 'needs-review' ? 'reviewed' : currentStatus;
+            const updatedSession = {
+                ...session,
+                components: session.components.map((c) => c.id === selectedId
+                    ? {
+                        ...c,
+                        editedProposal: parsed,
+                        status: newStatus,
+                    }
+                    : c),
+            };
+            const { [selectedId]: _removed, ...remainingDrafts } = draftsByComponentId;
+            setSession(updatedSession);
+            setDraftsByComponentId(remainingDrafts);
+            setEditMode(false);
+            await saveState(updatedSession);
+            await appendEvent({
+                type: 'draft_saved',
+                payload: { componentId: selectedId },
+            });
+            // Sync all edited proposals to pipeline DB (keep 'generated' for preview)
+            const allEdited = updatedSession.components.map((c) => c.editedProposal);
+            const syncDb = openPipelineDb();
+            try {
+                storeRawComponents(syncDb, sessionId, allEdited, {
+                    status: 'generated',
+                    preserveCDF: true,
+                });
+            }
+            finally {
+                syncDb.close();
+            }
+            void refreshPreview();
+        }
+        catch {
+            // JSON parse error — JsonEditor already shows the error inline
+        }
+    };
+    const handleDraftDiscard = () => {
+        if (!selectedId)
+            return;
+        const { [selectedId]: _removed, ...remainingDrafts } = draftsByComponentId;
+        setDraftsByComponentId(remainingDrafts);
+        setEditMode(false);
+    };
+    const handleFinalize = async () => {
+        if (!session || !paths)
+            return;
+        try {
+            await appendEvent({
+                type: 'finalized',
+                payload: {
+                    accepted: acceptedCount,
+                    rejected: rejectedCount,
+                    excluded: needsReviewCount,
+                },
+            });
+            // Write all components back to DB, marking accepted as 'generated'
+            // so loadCDFComponents (push/preview) only picks up accepted ones,
+            // but loadRawComponents (editor re-entry) still finds all of them
+            const acceptedNames = new Set(session.components.filter((c) => c.status === 'accepted').map((c) => c.name));
+            const db = openPipelineDb();
+            try {
+                storeRawComponents(db, sessionId, session.components.map((c) => c.editedProposal), { status: 'extracted', preserveCDF: true });
+                if (acceptedNames.size > 0) {
+                    db.prepare(`UPDATE raw_components SET status = 'generated' WHERE session_id = ? AND name IN (${[...acceptedNames].map(() => '?').join(',')})`).run(sessionId, ...acceptedNames);
+                }
+            }
+            finally {
+                db.close();
+            }
+            const output = JSON.stringify({
+                status: 'finalized',
+                sessionDir: paths.sessionDir,
+                accepted: acceptedCount,
+                rejected: rejectedCount,
+                excluded: needsReviewCount,
+            }, null, 2) + '\n';
+            process.stdout.write(output);
+            setFinalizedResult({
+                accepted: acceptedCount,
+                rejected: rejectedCount,
+                excluded: needsReviewCount,
+            });
+        }
+        catch (err) {
+            setSaveError(String(err));
+        }
+    };
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(TopBar, { subcommand: "analyze select", hints: hints }), showHelp && _jsx(HelpOverlay, { mode: "review", onClose: () => setShowHelp(false) }), showFinalizeDialog && (_jsx(FinalizeDialog, { accepted: acceptedCount, rejected: rejectedCount, needsReview: needsReviewCount, onConfirm: () => {
+                    void handleFinalize();
+                }, onCancel: () => setShowFinalizeDialog(false) })), showQuitDialog && (_jsx(QuitDialog, { hasUnsavedDrafts: Object.keys(draftsByComponentId).length > 0, onConfirm: async () => {
+                    if (paths) {
+                        await appendEvent({
+                            type: 'session_quit',
+                            payload: { reason: 'user_quit' },
+                        });
+                    }
                     process.exit(1);
-                }, onCancel: () => dispatch({ type: 'CLOSE_DIALOG' }) })), !dialogOpen && (_jsxs(Box, { flexGrow: 1, children: [_jsx(Sidebar, { components: sessionSummary, selectedId: selectedId, focused: sidebarFocused, scrollOffset: sidebarScrollOffset, visibleCount: visibleCount, collapsed: collapsed, width: sidebarWidth }), _jsx(Box, { flexGrow: 1, paddingLeft: 1, children: selectedDetail ? (_jsx(ComponentDetail, { component: selectedDetail, sourceCode: selectedId ? (state.sourceCodeById[selectedId] ?? null) : null, draftValue: selectedId ? (state.draftsByComponentId[selectedId] ?? '') : '', editMode: isEditing, editorState: isEditing ? editor : null, sourceVisible: sourceVisible, jsonScrollOffset: jsonScrollOffset, sourceScrollX: 0, sourceScrollY: 0, terminalWidth: terminalWidth, previewAnnotation: selectedRecord
-                                ? state.previewAnnotations[selectedRecord.name]
-                                : undefined })) : (_jsx(Text, { dimColor: true, children: "No component selected" })) })] })), _jsx(PreviewSummaryBar, { preview: state.previewResponse, loading: state.previewLoading }), state.previewError && _jsx(Text, { color: "yellow", children: '⚠ Preview: ' + state.previewError }), state.saveError && _jsx(Text, { color: "red", children: '⚠ ' + state.saveError }), !dialogOpen && (_jsx(StatusBar, { accepted: counts.accepted, rejected: counts.rejected, reviewed: counts.reviewed, needsReview: counts.needsReview }))] }));
+                }, 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: 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) => ({
+                                    ...prev,
+                                    [selectedId]: value,
+                                }));
+                            }, onSaveDraft: () => {
+                                void handleDraftSave();
+                            }, onDiscardDraft: handleDraftDiscard, onScrollChange: setJsonScrollOffset })) : (_jsx(Text, { dimColor: true, children: "No component selected" })) })] })), _jsx(PreviewSummaryBar, { preview: previewResponse, loading: previewLoading }), previewError && _jsx(Text, { color: "yellow", children: '⚠ Preview: ' + previewError }), saveError && _jsx(Text, { color: "red", children: '⚠ ' + saveError }), !dialogOpen && (_jsx(StatusBar, { accepted: acceptedCount, rejected: rejectedCount, reviewed: reviewedCount, needsReview: needsReviewCount, onApproveAll: () => { }, onFinalize: () => setShowFinalizeDialog(true) }))] }));
 }
 function FinalizedScreen({ result, }) {
     useImmediateInput((_input, key) => {
-        if (key.return || _input === 'q' || key.escape)
+        if (key.return || _input === 'q' || key.escape) {
             process.exit(0);
+        }
     });
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, gap: 1, children: [_jsx(Text, { bold: true, color: "green", children: "\u2713 Finalized" }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "green", children: "\u2713" }), _jsxs(Text, { children: [result.accepted, " accepted"] })] }), result.rejected > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "red", children: "\u2717" }), _jsxs(Text, { children: [result.rejected, " rejected"] })] })), result.excluded > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { dimColor: true, children: "\u00B7" }), _jsxs(Text, { dimColor: true, children: [result.excluded, " excluded"] })] }))] }), _jsx(Text, { dimColor: true, children: "Decisions saved. Ready for the next step." }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "[Enter / q] Exit" }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, gap: 1, children: [_jsx(Text, { bold: true, color: "green", children: "\u2713 Finalized" }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "green", children: "\u2713" }), _jsxs(Text, { children: [result.accepted, " accepted"] })] }), result.rejected > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "red", children: "\u2717" }), _jsxs(Text, { children: [result.rejected, " rejected"] })] })), result.excluded > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { dimColor: true, children: "\u00B7" }), _jsxs(Text, { dimColor: true, children: [result.excluded, " excluded (unresolved)"] })] }))] }), _jsx(Text, { dimColor: true, children: "Decisions saved. Ready for the next step." }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "[Enter / q] Exit" }) })] }));
 }

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

@@ -1,18 +1,20 @@
 import React from 'react';
 import type { PreviewAnnotation, ReviewComponentDetail } from '../../types.js';
-import type { EditorState } from '../state.js';
 type ComponentDetailProps = {
     component: ReviewComponentDetail;
     sourceCode: string | null;
     draftValue: string;
     editMode: boolean;
-    editorState: EditorState | null;
     sourceVisible: boolean;
     jsonScrollOffset: number;
     sourceScrollX: number;
     sourceScrollY: number;
     terminalWidth: number;
     previewAnnotation?: PreviewAnnotation;
+    onDraftChange: (value: string) => void;
+    onSaveDraft: () => void;
+    onDiscardDraft: () => void;
+    onScrollChange: (offset: number) => void;
 };
-export declare function ComponentDetail({ component, sourceCode, draftValue, editMode, editorState, sourceVisible, jsonScrollOffset, sourceScrollX, sourceScrollY, terminalWidth, previewAnnotation, }: ComponentDetailProps): React.ReactElement;
+export declare function ComponentDetail({ component, sourceCode, draftValue, editMode, sourceVisible, jsonScrollOffset, sourceScrollX, sourceScrollY, terminalWidth, previewAnnotation, onDraftChange, onSaveDraft, onDiscardDraft, }: ComponentDetailProps): React.ReactElement;
 export {};

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Box, Text } from 'ink';
 import { stripScoringFields } from '../../../../types.js';
 import { JsonPanel } from './JsonPanel.js';
-import { JsonEditor } from './JsonEditor.js';
+import { FieldEditor } from './FieldEditor.js';
 import { SourcePanel } from './SourcePanel.js';
 function annotationLabel(annotation) {
     switch (annotation) {
@@ -18,7 +18,7 @@ function annotationLabel(annotation) {
             return null;
     }
 }
-export function ComponentDetail({ component, sourceCode, draftValue, editMode, editorState, sourceVisible, jsonScrollOffset, sourceScrollX, sourceScrollY, terminalWidth, previewAnnotation, }) {
+export function ComponentDetail({ component, sourceCode, draftValue, editMode, sourceVisible, jsonScrollOffset, sourceScrollX, sourceScrollY, terminalWidth, previewAnnotation, onDraftChange, onSaveDraft, onDiscardDraft, }) {
     const sidebarWidth = terminalWidth < 80 ? 5 : 20;
     const availableWidth = terminalWidth - sidebarWidth - 2;
     const panelHeight = 20;
@@ -44,5 +44,5 @@ export function ComponentDetail({ component, sourceCode, draftValue, editMode, e
     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(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 && editorState ? (_jsx(JsonEditor, { editorState: editorState, width: editWidth, height: panelHeight })) : (_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/FinalizeDialog.d.ts

@@ -6,5 +6,5 @@ type FinalizeDialogProps = {
     onConfirm: () => void;
     onCancel: () => void;
 };
-export declare function FinalizeDialog({ accepted, rejected, needsReview, onConfirm: _onConfirm, onCancel: _onCancel, }: FinalizeDialogProps): React.ReactElement;
+export declare function FinalizeDialog({ accepted, rejected, needsReview, onConfirm, onCancel, }: FinalizeDialogProps): React.ReactElement;
 export {};