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

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

@@ -1,8 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useReducer, useRef } from 'react';
 import { Box, Text, useStdout } from 'ink';
-import { readFile } from 'node:fs/promises';
-import { createReviewSessionDetail } from '../types.js';
 import { TopBar } from './components/TopBar.js';
 import { Sidebar } from './components/Sidebar.js';
 import { ComponentDetail } from './components/ComponentDetail.js';
@@ -11,367 +9,69 @@ 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 { 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';
+import { useSideEffects } from './hooks/useSideEffects.js';
+import { reducer, initialState } from './state.js';
+import { inputToAction } from './inputToAction.js';
+import { createReviewSessionDetail } from '../types.js';
 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 [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 {};
-        }
+    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 [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]);
+    // ── Load session ──────────────────────────────────────────────────────────
     useEffect(() => {
-        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);
+        if (loadedSession && !state.session) {
+            dispatch({ type: 'SESSION_LOADED', session: loadedSession, paths });
         }
     }, [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'];
-            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]: (() => {
-                    const { extractionConfidence: _c, reviewReasons: _r, needsReview: _n, ...rest } = component.editedProposal;
-                    return prev[selectedId] ?? JSON.stringify(rest, 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 ?? 100,
-        needsReview: c.originalProposal.needsReview ?? false,
-    }))
-        .sort((a, b) => {
-        const aFlagged = a.needsReview && a.status === 'needs-review' ? 0 : 1;
-        const bFlagged = b.needsReview && b.status === 'needs-review' ? 0 : 1;
-        if (aFlagged !== bFlagged)
-            return aFlagged - bFlagged;
-        return a.extractionConfidence - b.extractionConfidence;
-    }), [session?.components, previewAnnotations]);
-    // Stable ID order — kept in a ref for use inside keymap handlers
-    const sortedIds = useMemo(() => sessionSummary.map((c) => c.id), [sessionSummary]);
-    sortedIdsRef.current = sortedIds;
-    if (loading) {
+    // ── All side effects in one hook ──────────────────────────────────────────
+    useSideEffects(state, dispatch, { sessionId, saveState, appendEvent });
+    // ── Render ────────────────────────────────────────────────────────────────
+    if (loading)
         return _jsx(Text, { children: "Loading session..." });
-    }
-    if (sessionError) {
+    if (sessionError)
         return (_jsxs(Text, { color: "red", children: [sessionError, '\nPress q to exit.'] }));
-    }
-    if (!session || !paths) {
+    if (!state.session)
         return _jsx(Text, { color: "red", children: "Session unavailable." });
-    }
-    if (finalizedResult) {
-        return _jsx(FinalizedScreen, { result: finalizedResult });
-    }
+    const { mode, session, selectedId, sidebarScrollOffset, jsonScrollOffset, editor } = state;
+    if (mode.type === 'finalized')
+        return _jsx(FinalizedScreen, { result: mode });
     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 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
+    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
         ? [
             { key: 'Ctrl+S', label: 'save' },
             { key: 'Esc', label: 'discard' },
@@ -383,141 +83,21 @@ export function App({ sessionId, artifactsRoot, reviewRoot }) {
                 { key: 'q', label: 'quit' },
             ];
     const collapsed = terminalWidth < 80;
-    // 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 longestName = session.components.reduce((m, c) => Math.max(m, c.name.length), 0);
     const sidebarWidth = collapsed ? 3 : Math.min(Math.max(longestName + 4, 14), 22);
-    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' },
-                        });
-                    }
+    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' } });
                     process.exit(1);
-                }, 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) }))] }));
+                }, 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 }))] }));
 }
 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 (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" }) })] }));
+    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" }) })] }));
 }

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

@@ -1,20 +1,18 @@
 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, sourceVisible, jsonScrollOffset, sourceScrollX, sourceScrollY, terminalWidth, previewAnnotation, onDraftChange, onSaveDraft, onDiscardDraft, }: ComponentDetailProps): React.ReactElement;
+export declare function ComponentDetail({ component, sourceCode, draftValue, editMode, editorState, sourceVisible, jsonScrollOffset, sourceScrollX, sourceScrollY, terminalWidth, previewAnnotation, }: ComponentDetailProps): React.ReactElement;
 export {};

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+import { stripScoringFields } from '../../../../types.js';
 import { JsonPanel } from './JsonPanel.js';
-import { FieldEditor } from './FieldEditor.js';
+import { JsonEditor } from './JsonEditor.js';
 import { SourcePanel } from './SourcePanel.js';
 function annotationLabel(annotation) {
     switch (annotation) {
@@ -17,7 +18,7 @@ function annotationLabel(annotation) {
             return null;
     }
 }
-export function ComponentDetail({ component, sourceCode, draftValue, editMode, sourceVisible, jsonScrollOffset, sourceScrollX, sourceScrollY, terminalWidth, previewAnnotation, onDraftChange, onSaveDraft, onDiscardDraft, }) {
+export function ComponentDetail({ component, sourceCode, draftValue, editMode, editorState, sourceVisible, jsonScrollOffset, sourceScrollX, sourceScrollY, terminalWidth, previewAnnotation, }) {
     const sidebarWidth = terminalWidth < 80 ? 5 : 20;
     const availableWidth = terminalWidth - sidebarWidth - 2;
     const panelHeight = 20;
@@ -34,16 +35,14 @@ export function ComponentDetail({ component, sourceCode, draftValue, editMode, s
         editWidth = availableWidth - originalWidth - 3;
         sourceWidth = 0;
     }
-    // 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 originalJson = JSON.stringify(stripScoringFields(component.originalProposal), null, 2);
+    const editedJson = JSON.stringify(stripScoringFields(component.editedProposal), null, 2);
+    const conf = component.originalProposal.extractionConfidence ?? null;
     const nr = component.originalProposal.needsReview ?? false;
-    const confColor = nr ? 'red' : conf >= 80 ? 'white' : conf >= 50 ? 'yellow' : 'red';
-    const confLabel = (nr ? '⚑ ' : '') + 'confidence: ' + String(conf);
+    const confColor = conf === null ? 'gray' : nr ? 'red' : conf >= 4 ? 'white' : conf >= 3 ? 'yellow' : 'red';
+    const confLabel = conf === null ? 'confidence: —' : (nr ? '⚑ ' : '') + 'confidence: ' + String(conf) + '/5';
     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 ? (_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 && 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' })] }));
 }