@contentful/experience-design-system-cli 2.2.1

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

@@ -0,0 +1,491 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } 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';
+import { StatusBar } from './components/StatusBar.js';
+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 { 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';
+export function App({ sessionId, artifactsRoot, reviewRoot }) {
+    const { stdout } = useStdout();
+    const terminalWidth = stdout?.columns ?? 80;
+    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);
+    const [previewAnnotations, setPreviewAnnotations] = useState(() => {
+        const raw = process.env['EDS_PREVIEW_ANNOTATIONS'];
+        if (!raw)
+            return {};
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return {};
+        }
+    });
+    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 orgId = await client.resolveOrganizationId();
+            client.setOrganizationId(orgId);
+            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(() => {
+        return () => {
+            if (previewDebounceRef.current)
+                clearTimeout(previewDebounceRef.current);
+        };
+    }, []);
+    // Sync loaded session into local state
+    useEffect(() => {
+        if (loadedSession && !session) {
+            setSession(loadedSession);
+            setSelectedId(loadedSession.components[0]?.id ?? null);
+        }
+    }, [loadedSession]);
+    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
+    useEffect(() => {
+        if (!session || !selectedId)
+            return;
+        const selectedComponent = session.components.find((c) => c.id === selectedId);
+        if (!selectedComponent || selectedComponent.sourceCode !== null)
+            return;
+        readFile(selectedComponent.resolvedSourcePath, 'utf8')
+            .then((code) => {
+            setSession((prev) => {
+                if (!prev)
+                    return prev;
+                return {
+                    ...prev,
+                    components: prev.components.map((c) => (c.id === selectedComponent.id ? { ...c, sourceCode: code } : c)),
+                };
+            });
+        })
+            .catch(() => {
+            // Leave as null; SourcePanel shows [No source available]
+        });
+    }, [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 idx = session.components.findIndex((c) => c.id === selectedId);
+            if (idx > 0) {
+                setSelectedId(session.components[idx - 1].id);
+                setJsonScrollOffset(0);
+                setSidebarScrollOffset((prev) => Math.min(prev, idx - 1));
+            }
+        },
+        onSidebarDown: () => {
+            if (!session)
+                return;
+            const idx = session.components.findIndex((c) => c.id === selectedId);
+            if (idx < session.components.length - 1) {
+                setSelectedId(session.components[idx + 1].id);
+                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(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),
+    });
+    if (loading) {
+        return _jsx(Text, { children: "Loading session..." });
+    }
+    if (sessionError) {
+        return (_jsxs(Text, { color: "red", children: [sessionError, '\nPress q to exit.'] }));
+    }
+    if (!session || !paths) {
+        return _jsx(Text, { color: "red", children: "Session unavailable." });
+    }
+    if (finalizedResult) {
+        return _jsx(FinalizedScreen, { result: finalizedResult });
+    }
+    const sessionSummary = session.components.map((c) => ({
+        id: c.id,
+        name: c.name,
+        status: c.status,
+        previewAnnotation: previewAnnotations[c.name],
+    }));
+    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
+        ? [
+            { key: 'Ctrl+S', label: 'save' },
+            { key: 'Esc', label: 'discard' },
+        ]
+        : dialogOpen
+            ? []
+            : [
+                { key: '?', label: 'help' },
+                { key: 'q', label: 'quit' },
+            ];
+    const collapsed = terminalWidth < 80;
+    const visibleCount = 20;
+    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 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: () => setShowQuitDialog(false) })), !showHelp && !showFinalizeDialog && !showQuitDialog && (_jsxs(Box, { flexGrow: 1, children: [_jsx(Sidebar, { components: sessionSummary, selectedId: selectedId, focused: sidebarFocused, scrollOffset: sidebarScrollOffset, visibleCount: visibleCount, onSelect: (id) => {
+                            setSelectedId(id);
+                            setJsonScrollOffset(0);
+                        }, onScrollChange: setSidebarScrollOffset, collapsed: collapsed, width: sidebarWidth }), _jsx(Box, { flexGrow: 1, paddingLeft: 1, children: selectedDetail ? (_jsx(ComponentDetail, { component: selectedDetail, sourceCode: selectedRecord?.sourceCode ?? null, draftValue: selectedId ? (draftsByComponentId[selectedId] ?? '') : '', editMode: editMode, sourceVisible: sourceVisible, jsonScrollOffset: jsonScrollOffset, sourceScrollX: 0, sourceScrollY: 0, terminalWidth: terminalWidth, previewAnnotation: selectedRecord ? previewAnnotations[selectedRecord.name] : undefined, onDraftChange: (value) => {
+                                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) {
+            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" }) })] }));
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { PreviewAnnotation, ReviewComponentDetail } from '../../types.js';
+type ComponentDetailProps = {
+    component: ReviewComponentDetail;
+    sourceCode: string | null;
+    draftValue: string;
+    editMode: boolean;
+    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 {};

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { JsonPanel } from './JsonPanel.js';
+import { FieldEditor } from './FieldEditor.js';
+import { SourcePanel } from './SourcePanel.js';
+function annotationLabel(annotation) {
+    switch (annotation) {
+        case 'breaking':
+            return { text: ' ⚠ breaking', color: 'red' };
+        case 'changed':
+            return { text: ' ~ changed', color: 'yellow' };
+        case 'new':
+            return { text: ' + new', color: 'green' };
+        case 'removed':
+            return { text: ' ✗ removed', color: 'red' };
+        default:
+            return null;
+    }
+}
+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;
+    let originalWidth;
+    let editWidth;
+    let sourceWidth;
+    if (sourceVisible && terminalWidth >= 120) {
+        originalWidth = Math.floor((availableWidth - 4) / 3);
+        editWidth = originalWidth;
+        sourceWidth = availableWidth - originalWidth * 2 - 4;
+    }
+    else {
+        originalWidth = Math.floor((availableWidth - 3) / 2);
+        editWidth = availableWidth - originalWidth - 3;
+        sourceWidth = 0;
+    }
+    const originalJson = JSON.stringify(component.originalProposal, null, 2);
+    const editedJson = JSON.stringify(component.editedProposal, null, 2);
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: component.name }), (() => {
+                        const ann = annotationLabel(previewAnnotation);
+                        return ann ? _jsx(Text, { color: ann.color, children: ann.text }) : null;
+                    })(), _jsx(Box, { flexGrow: 1 }), _jsxs(Text, { dimColor: true, children: [sourceVisible ? '[s] hide src' : '[s] src', editMode ? '' : '  [e] edit'] })] }), _jsxs(Box, { children: [_jsx(JsonPanel, { label: "ORIGINAL (read-only)", value: originalJson, scrollOffset: jsonScrollOffset, width: originalWidth, height: panelHeight, active: false }), _jsx(Text, { children: " " }), editMode ? (_jsx(FieldEditor, { value: draftValue || editedJson, width: editWidth, height: panelHeight, onChange: onDraftChange, onSave: onSaveDraft, onDiscard: onDiscardDraft })) : (_jsx(JsonPanel, { label: "EDIT (draft)", value: draftValue || editedJson, scrollOffset: jsonScrollOffset, width: editWidth, height: panelHeight, active: true })), sourceVisible && sourceWidth > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(SourcePanel, { sourceCode: sourceCode, filePath: component.originalProposal.source, width: sourceWidth, height: panelHeight, scrollX: sourceScrollX, scrollY: sourceScrollY })] }))] }), !editMode && _jsx(Text, { dimColor: true, children: '  [a] accept  [r] reject  [e] edit  [A] accept all  [↑↓] scroll' })] }));
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+type FieldEditorProps = {
+    value: string;
+    width: number;
+    height: number;
+    onChange: (value: string) => void;
+    onSave: () => void;
+    onDiscard: () => void;
+};
+export declare function FieldEditor({ value, width, height, onChange, onSave, onDiscard, }: FieldEditorProps): React.ReactElement;
+export {};