ralph-cli-sandboxed 0.2.9 → 0.4.0

package/dist/tui/ConfigEditor.js

@@ -0,0 +1,313 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import { Box, Text, useApp, useInput } from "ink";
+import { useConfig } from "./hooks/useConfig.js";
+import { useTerminalSize } from "./hooks/useTerminalSize.js";
+import { SectionNav } from "./components/SectionNav.js";
+import { EditorPanel, getValueAtPath, inferFieldType } from "./components/EditorPanel.js";
+import { StringEditor } from "./components/StringEditor.js";
+import { BooleanToggle } from "./components/BooleanToggle.js";
+import { ArrayEditor } from "./components/ArrayEditor.js";
+import { ObjectEditor } from "./components/ObjectEditor.js";
+import { KeyValueEditor } from "./components/KeyValueEditor.js";
+import { JsonSnippetEditor } from "./components/JsonSnippetEditor.js";
+import { Preview } from "./components/Preview.js";
+import { HelpPanel } from "./components/HelpPanel.js";
+import { PresetSelector } from "./components/PresetSelector.js";
+import { validateConfig } from "./utils/validation.js";
+import { sectionHasPresets, applyPreset } from "./utils/presets.js";
+/**
+ * Set a value at a dot-notation path in an object (immutably).
+ */
+function setValueAtPath(obj, path, value) {
+    const parts = path.split(".");
+    const result = JSON.parse(JSON.stringify(obj));
+    let current = result;
+    for (let i = 0; i < parts.length - 1; i++) {
+        const part = parts[i];
+        if (current[part] === undefined || current[part] === null) {
+            current[part] = {};
+        }
+        current = current[part];
+    }
+    const lastPart = parts[parts.length - 1];
+    current[lastPart] = value;
+    return result;
+}
+/**
+ * ConfigEditor is the main TUI application component.
+ * It provides a two-panel layout with section navigation and field editing.
+ */
+export function ConfigEditor() {
+    const { exit } = useApp();
+    const terminalSize = useTerminalSize();
+    const { config, loading, error, hasChanges, saveConfig, updateConfig, } = useConfig();
+    // Calculate available height for scrollable content
+    // Reserve lines for: header (2), status message (1), footer (2), borders (2)
+    const availableHeight = Math.max(8, terminalSize.rows - 7);
+    // Nav panel gets slightly less height for its content
+    const navMaxHeight = Math.max(4, availableHeight - 4);
+    // Editor panel gets full available height
+    const editorMaxHeight = Math.max(6, availableHeight - 2);
+    // Navigation state
+    const [selectedSection, setSelectedSection] = useState("basic");
+    const [selectedField, setSelectedField] = useState(undefined);
+    const [focusPane, setFocusPane] = useState("nav");
+    // Preview panel visibility
+    const [previewVisible, setPreviewVisible] = useState(true);
+    // Help panel visibility
+    const [helpVisible, setHelpVisible] = useState(false);
+    // JSON edit mode - when true, use JsonSnippetEditor for complex fields
+    const [jsonEditMode, setJsonEditMode] = useState(false);
+    // Status message for feedback
+    const [statusMessage, setStatusMessage] = useState(null);
+    // Track which sections have shown preset selector (to avoid repeat prompts)
+    const [visitedSections, setVisitedSections] = useState(new Set(["basic"]));
+    // Validation errors
+    const validationErrors = useMemo(() => {
+        if (!config)
+            return [];
+        return validateConfig(config).errors;
+    }, [config]);
+    // Get the current field value and type for the field editor
+    const currentFieldValue = useMemo(() => {
+        if (!config || !selectedField)
+            return undefined;
+        return getValueAtPath(config, selectedField);
+    }, [config, selectedField]);
+    const currentFieldType = useMemo(() => {
+        return inferFieldType(currentFieldValue);
+    }, [currentFieldValue]);
+    // Get the label for the current field
+    const currentFieldLabel = useMemo(() => {
+        if (!selectedField)
+            return "";
+        const parts = selectedField.split(".");
+        const lastPart = parts[parts.length - 1];
+        return lastPart
+            .replace(/([A-Z])/g, " $1")
+            .replace(/^./, (str) => str.toUpperCase())
+            .trim();
+    }, [selectedField]);
+    // Handle section selection
+    const handleSelectSection = useCallback((sectionId) => {
+        setSelectedSection(sectionId);
+        setSelectedField(undefined);
+        // Check if this section has presets and hasn't been visited yet
+        if (sectionHasPresets(sectionId) && !visitedSections.has(sectionId)) {
+            setFocusPane("preset-selector");
+        }
+        else {
+            setFocusPane("editor");
+        }
+    }, [visitedSections]);
+    // Handle preset selection
+    const handleSelectPreset = useCallback((preset) => {
+        if (!config)
+            return;
+        // Apply the preset to the config
+        updateConfig((currentConfig) => {
+            return applyPreset(currentConfig, preset);
+        });
+        // Mark section as visited
+        setVisitedSections((prev) => new Set([...prev, selectedSection]));
+        // Show status message
+        setStatusMessage(`Applied "${preset.name}" preset`);
+        setTimeout(() => setStatusMessage(null), 2000);
+        // Move to editor
+        setFocusPane("editor");
+    }, [config, updateConfig, selectedSection]);
+    // Handle skipping preset selection
+    const handleSkipPreset = useCallback(() => {
+        // Mark section as visited
+        setVisitedSections((prev) => new Set([...prev, selectedSection]));
+        setFocusPane("editor");
+    }, [selectedSection]);
+    // Handle canceling preset selection (go back to nav)
+    const handleCancelPreset = useCallback(() => {
+        setFocusPane("nav");
+    }, []);
+    // Handle field selection
+    const handleSelectField = useCallback((fieldPath, useJsonEditor = false) => {
+        setSelectedField(fieldPath);
+        setJsonEditMode(useJsonEditor);
+        setFocusPane("field-editor");
+    }, []);
+    // Handle going back from editor to nav
+    const handleBack = useCallback(() => {
+        if (focusPane === "field-editor") {
+            setSelectedField(undefined);
+            setFocusPane("editor");
+        }
+        else if (focusPane === "editor") {
+            setFocusPane("nav");
+        }
+    }, [focusPane]);
+    // Handle field value confirmation
+    const handleFieldConfirm = useCallback((newValue) => {
+        if (!selectedField)
+            return;
+        updateConfig((currentConfig) => {
+            return setValueAtPath(currentConfig, selectedField, newValue);
+        });
+        setSelectedField(undefined);
+        setJsonEditMode(false);
+        setFocusPane("editor");
+        setStatusMessage("Field updated");
+        setTimeout(() => setStatusMessage(null), 2000);
+    }, [selectedField, updateConfig]);
+    // Handle field edit cancel
+    const handleFieldCancel = useCallback(() => {
+        setSelectedField(undefined);
+        setJsonEditMode(false);
+        setFocusPane("editor");
+    }, []);
+    // Handle save
+    const handleSave = useCallback(() => {
+        // Validate before saving
+        if (!config) {
+            setStatusMessage("No configuration to save");
+            setTimeout(() => setStatusMessage(null), 2000);
+            return;
+        }
+        const validation = validateConfig(config);
+        if (!validation.valid) {
+            const errorCount = validation.errors.length;
+            setStatusMessage(`Validation failed: ${errorCount} error${errorCount > 1 ? "s" : ""} found`);
+            setTimeout(() => setStatusMessage(null), 3000);
+            return;
+        }
+        const success = saveConfig();
+        if (success) {
+            setStatusMessage("Configuration saved!");
+        }
+        else {
+            setStatusMessage("Failed to save configuration");
+        }
+        setTimeout(() => setStatusMessage(null), 2000);
+    }, [saveConfig, config]);
+    // Handle quit
+    const handleQuit = useCallback(() => {
+        exit();
+    }, [exit]);
+    // Toggle preview visibility
+    const togglePreview = useCallback(() => {
+        setPreviewVisible((prev) => !prev);
+    }, []);
+    // Toggle help visibility
+    const toggleHelp = useCallback(() => {
+        setHelpVisible((prev) => !prev);
+    }, []);
+    // Global keyboard shortcuts (S for Save, Q for Quit, Tab for preview toggle, ? for help)
+    useInput((input, key) => {
+        // Only handle global shortcuts when not in field editor or preset selector
+        if (focusPane === "field-editor" || focusPane === "preset-selector")
+            return;
+        // ? key toggles help panel (takes priority when help is visible)
+        if (input === "?") {
+            toggleHelp();
+            return;
+        }
+        // When help panel is visible, don't process other shortcuts
+        if (helpVisible)
+            return;
+        if (input.toUpperCase() === "S") {
+            handleSave();
+        }
+        else if (input.toUpperCase() === "Q") {
+            handleQuit();
+        }
+        else if (key.tab) {
+            // Tab to toggle JSON preview visibility
+            togglePreview();
+        }
+        else if (input === "l" || key.rightArrow) {
+            // l or right arrow to move focus to editor
+            if (focusPane === "nav") {
+                setFocusPane("editor");
+            }
+        }
+        else if (input === "h" || key.leftArrow) {
+            // h or left arrow to move focus to nav
+            if (focusPane === "editor") {
+                setFocusPane("nav");
+            }
+        }
+        else if (input === "p") {
+            // p to open preset selector if available for current section
+            if (focusPane === "editor" && sectionHasPresets(selectedSection)) {
+                setFocusPane("preset-selector");
+            }
+        }
+    }, { isActive: focusPane !== "field-editor" && focusPane !== "preset-selector" });
+    // Render loading state
+    if (loading) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: "ralph config" }), _jsx(Text, { dimColor: true, children: "Loading configuration..." })] }));
+    }
+    // Render error state
+    if (error || !config) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: "ralph config" }), _jsxs(Text, { color: "red", children: ["Error: ", error || "Failed to load configuration"] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press Q to quit" }) })] }));
+    }
+    // Render field editor overlay if a field is selected
+    const renderFieldEditor = () => {
+        if (!selectedField || focusPane !== "field-editor")
+            return null;
+        // Use JsonSnippetEditor for complex fields when J key was pressed or for certain field types
+        if (jsonEditMode) {
+            return (_jsx(JsonSnippetEditor, { label: currentFieldLabel, value: currentFieldValue, onConfirm: handleFieldConfirm, onCancel: handleFieldCancel, isFocused: true, maxHeight: editorMaxHeight, maxWidth: terminalSize.columns }));
+        }
+        switch (currentFieldType) {
+            case "string":
+                return (_jsx(StringEditor, { label: currentFieldLabel, value: currentFieldValue || "", onConfirm: handleFieldConfirm, onCancel: handleFieldCancel, isFocused: true }));
+            case "boolean":
+                return (_jsx(BooleanToggle, { label: currentFieldLabel, value: currentFieldValue, onConfirm: handleFieldConfirm, onCancel: handleFieldCancel, isFocused: true }));
+            case "number":
+                return (_jsx(StringEditor, { label: currentFieldLabel, value: String(currentFieldValue || ""), onConfirm: (val) => handleFieldConfirm(Number(val) || 0), onCancel: handleFieldCancel, isFocused: true, placeholder: "Enter a number" }));
+            case "array":
+                return (_jsx(ArrayEditor, { label: currentFieldLabel, items: currentFieldValue || [], onConfirm: handleFieldConfirm, onCancel: handleFieldCancel, isFocused: true, maxHeight: editorMaxHeight }));
+            case "object":
+                // Handle object type - flatten to string key-value pairs
+                const objValue = (currentFieldValue || {});
+                const stringEntries = {};
+                for (const [k, v] of Object.entries(objValue)) {
+                    stringEntries[k] = typeof v === "string" ? v : JSON.stringify(v);
+                }
+                // Check if this is a notification provider config field
+                const isNotificationProvider = selectedField &&
+                    (selectedField === "notifications.ntfy" ||
+                        selectedField === "notifications.pushover" ||
+                        selectedField === "notifications.gotify");
+                if (isNotificationProvider) {
+                    // Extract provider name from field path
+                    const providerName = selectedField.split(".").pop() || "";
+                    return (_jsx(KeyValueEditor, { label: currentFieldLabel, entries: stringEntries, providerName: providerName, onConfirm: (entries) => {
+                            // For notification providers, keep values as strings
+                            handleFieldConfirm(entries);
+                        }, onCancel: handleFieldCancel, isFocused: true }));
+                }
+                return (_jsx(ObjectEditor, { label: currentFieldLabel, entries: stringEntries, onConfirm: (entries) => {
+                        // Try to parse JSON values back if they look like objects
+                        const parsedEntries = {};
+                        for (const [k, v] of Object.entries(entries)) {
+                            try {
+                                if (v.startsWith("{") || v.startsWith("[")) {
+                                    parsedEntries[k] = JSON.parse(v);
+                                }
+                                else {
+                                    parsedEntries[k] = v;
+                                }
+                            }
+                            catch {
+                                parsedEntries[k] = v;
+                            }
+                        }
+                        handleFieldConfirm(parsedEntries);
+                    }, onCancel: handleFieldCancel, isFocused: true, maxHeight: editorMaxHeight }));
+            default:
+                // Unknown type - use string editor
+                return (_jsx(StringEditor, { label: currentFieldLabel, value: String(currentFieldValue || ""), onConfirm: handleFieldConfirm, onCancel: handleFieldCancel, isFocused: true }));
+        }
+    };
+    return (_jsxs(Box, { flexDirection: "column", children: [helpVisible && (_jsx(HelpPanel, { visible: helpVisible, onClose: toggleHelp })), _jsxs(Box, { marginBottom: 1, justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { color: "cyan", bold: true, children: "ralph config" }), hasChanges && _jsx(Text, { color: "yellow", children: " (unsaved changes)" })] }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "[S] Save" }), _jsx(Text, { dimColor: true, children: " | " }), _jsx(Text, { dimColor: true, children: "[Q] Quit" }), _jsx(Text, { dimColor: true, children: " | " }), _jsx(Text, { dimColor: true, children: "[?] Help" })] })] }), statusMessage && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: statusMessage.includes("Failed") || statusMessage.includes("Validation") ? "red" : "green", children: statusMessage }) })), focusPane === "field-editor" ? (_jsx(Box, { children: renderFieldEditor() })) : focusPane === "preset-selector" ? (_jsx(Box, { children: _jsx(PresetSelector, { sectionId: selectedSection, config: config, onSelectPreset: handleSelectPreset, onSkip: handleSkipPreset, onCancel: handleCancelPreset, isFocused: true }) })) : (_jsxs(Box, { children: [_jsx(Box, { width: 20, children: _jsx(SectionNav, { selectedSection: selectedSection, onSelectSection: handleSelectSection, isFocused: focusPane === "nav", maxHeight: navMaxHeight }) }), _jsx(Box, { flexGrow: 1, children: _jsx(EditorPanel, { config: config, selectedSection: selectedSection, selectedField: selectedField, onSelectField: handleSelectField, onBack: handleBack, isFocused: focusPane === "editor", validationErrors: validationErrors, maxHeight: editorMaxHeight }) }), _jsx(Preview, { config: config, selectedSection: selectedSection, visible: previewVisible })] })), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: [focusPane === "nav" && "j/k: navigate | Enter: select | l/→: editor | Tab: toggle preview", focusPane === "editor" && "j/k: navigate | Enter: edit | J: JSON | h/←: nav | Tab: preview | p: presets", focusPane === "field-editor" && "Follow editor hints", focusPane === "preset-selector" && "j/k: navigate | Enter: select | Esc: back"] }) })] }));
+}
+export default ConfigEditor;

package/dist/tui/components/ArrayEditor.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+export interface ArrayEditorProps {
+    /** The label to display for this array field */
+    label: string;
+    /** The current array items */
+    items: string[];
+    /** Called when the user confirms the edit (Enter) */
+    onConfirm: (newItems: string[]) => void;
+    /** Called when the user cancels the edit (Esc) */
+    onCancel: () => void;
+    /** Whether this editor has focus */
+    isFocused?: boolean;
+    /** Maximum height for the items list (for scrolling) */
+    maxHeight?: number;
+}
+/**
+ * ArrayEditor component for editing arrays of strings.
+ * Shows numbered list with edit/delete options.
+ * Supports adding new items, reordering with move up/down keys, and scrolling for long lists.
+ */
+export declare function ArrayEditor({ label, items, onConfirm, onCancel, isFocused, maxHeight, }: ArrayEditorProps): React.ReactElement;
+export default ArrayEditor;

package/dist/tui/components/ArrayEditor.js

@@ -0,0 +1,193 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+/**
+ * ArrayEditor component for editing arrays of strings.
+ * Shows numbered list with edit/delete options.
+ * Supports adding new items, reordering with move up/down keys, and scrolling for long lists.
+ */
+export function ArrayEditor({ label, items, onConfirm, onCancel, isFocused = true, maxHeight = 10, }) {
+    const [editItems, setEditItems] = useState([...items]);
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const [mode, setMode] = useState("list");
+    const [editText, setEditText] = useState("");
+    const [editingIndex, setEditingIndex] = useState(-1);
+    // Total items including "+ Add item" option
+    const totalOptions = editItems.length + 1;
+    // Auto-scroll to keep highlighted item visible
+    useEffect(() => {
+        if (highlightedIndex < scrollOffset) {
+            setScrollOffset(highlightedIndex);
+        }
+        else if (highlightedIndex >= scrollOffset + maxHeight) {
+            setScrollOffset(highlightedIndex - maxHeight + 1);
+        }
+    }, [highlightedIndex, scrollOffset, maxHeight]);
+    // Navigation handlers
+    const handleNavigateUp = useCallback(() => {
+        setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : totalOptions - 1));
+    }, [totalOptions]);
+    const handleNavigateDown = useCallback(() => {
+        setHighlightedIndex((prev) => (prev < totalOptions - 1 ? prev + 1 : 0));
+    }, [totalOptions]);
+    const handlePageUp = useCallback(() => {
+        const newIndex = Math.max(0, highlightedIndex - maxHeight);
+        setHighlightedIndex(newIndex);
+    }, [highlightedIndex, maxHeight]);
+    const handlePageDown = useCallback(() => {
+        const newIndex = Math.min(totalOptions - 1, highlightedIndex + maxHeight);
+        setHighlightedIndex(newIndex);
+    }, [highlightedIndex, maxHeight, totalOptions]);
+    // Move item up in the list
+    const handleMoveUp = useCallback(() => {
+        if (highlightedIndex > 0 && highlightedIndex < editItems.length) {
+            const newItems = [...editItems];
+            const temp = newItems[highlightedIndex - 1];
+            newItems[highlightedIndex - 1] = newItems[highlightedIndex];
+            newItems[highlightedIndex] = temp;
+            setEditItems(newItems);
+            setHighlightedIndex(highlightedIndex - 1);
+        }
+    }, [highlightedIndex, editItems]);
+    // Move item down in the list
+    const handleMoveDown = useCallback(() => {
+        if (highlightedIndex < editItems.length - 1) {
+            const newItems = [...editItems];
+            const temp = newItems[highlightedIndex + 1];
+            newItems[highlightedIndex + 1] = newItems[highlightedIndex];
+            newItems[highlightedIndex] = temp;
+            setEditItems(newItems);
+            setHighlightedIndex(highlightedIndex + 1);
+        }
+    }, [highlightedIndex, editItems]);
+    // Delete the highlighted item
+    const handleDelete = useCallback(() => {
+        if (highlightedIndex < editItems.length) {
+            const newItems = editItems.filter((_, i) => i !== highlightedIndex);
+            setEditItems(newItems);
+            // Adjust highlighted index if needed
+            if (highlightedIndex >= newItems.length && newItems.length > 0) {
+                setHighlightedIndex(newItems.length - 1);
+            }
+            else if (newItems.length === 0) {
+                setHighlightedIndex(0);
+            }
+        }
+    }, [highlightedIndex, editItems]);
+    // Start editing an item
+    const handleStartEdit = useCallback(() => {
+        if (highlightedIndex < editItems.length) {
+            setEditText(editItems[highlightedIndex]);
+            setEditingIndex(highlightedIndex);
+            setMode("edit");
+        }
+        else {
+            // Add new item
+            setEditText("");
+            setMode("add");
+        }
+    }, [highlightedIndex, editItems]);
+    // Confirm edit/add
+    const handleTextSubmit = useCallback(() => {
+        const trimmedText = editText.trim();
+        if (trimmedText) {
+            if (mode === "add") {
+                setEditItems([...editItems, trimmedText]);
+                setHighlightedIndex(editItems.length);
+            }
+            else if (mode === "edit") {
+                const newItems = [...editItems];
+                newItems[editingIndex] = trimmedText;
+                setEditItems(newItems);
+            }
+        }
+        setMode("list");
+        setEditText("");
+        setEditingIndex(-1);
+    }, [editText, mode, editItems, editingIndex]);
+    // Cancel edit/add
+    const handleTextCancel = useCallback(() => {
+        setMode("list");
+        setEditText("");
+        setEditingIndex(-1);
+    }, []);
+    // Handle keyboard input for list mode
+    useInput((input, key) => {
+        if (!isFocused || mode !== "list")
+            return;
+        // j/k or arrow keys for navigation
+        if (input === "j" || key.downArrow) {
+            handleNavigateDown();
+        }
+        else if (input === "k" || key.upArrow) {
+            handleNavigateUp();
+        }
+        else if (key.pageUp) {
+            handlePageUp();
+        }
+        else if (key.pageDown) {
+            handlePageDown();
+        }
+        else if (key.return || input === "e") {
+            // Enter or 'e' to edit/add
+            handleStartEdit();
+        }
+        else if (input === "d" || key.delete) {
+            // 'd' or Delete to remove
+            handleDelete();
+        }
+        else if (input === "K" || (key.shift && key.upArrow)) {
+            // Shift+K or Shift+Up to move up
+            handleMoveUp();
+        }
+        else if (input === "J" || (key.shift && key.downArrow)) {
+            // Shift+J or Shift+Down to move down
+            handleMoveDown();
+        }
+        else if (key.escape) {
+            onCancel();
+        }
+        else if (input === "s" || input === "S") {
+            // 's' to save and confirm
+            onConfirm(editItems);
+        }
+    }, { isActive: isFocused && mode === "list" });
+    // Handle keyboard input for text editing mode
+    useInput((_input, key) => {
+        if (!isFocused || mode === "list")
+            return;
+        if (key.escape) {
+            handleTextCancel();
+        }
+    }, { isActive: isFocused && mode !== "list" });
+    // Calculate visible items based on scroll offset
+    const visibleItems = useMemo(() => {
+        const allItems = [...editItems, { isAddOption: true }];
+        const endIndex = Math.min(scrollOffset + maxHeight, allItems.length);
+        return allItems.slice(scrollOffset, endIndex);
+    }, [editItems, scrollOffset, maxHeight]);
+    // Check if we have overflow
+    const canScrollUp = scrollOffset > 0;
+    const canScrollDown = scrollOffset + maxHeight < totalOptions;
+    const hasOverflow = totalOptions > maxHeight;
+    // Render text input mode (add or edit)
+    if (mode === "add" || mode === "edit") {
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: mode === "add" ? "Add New Item" : `Edit Item ${editingIndex + 1}` }) }), _jsxs(Box, { children: [_jsxs(Text, { dimColor: true, children: [">", " "] }), _jsx(TextInput, { value: editText, onChange: setEditText, onSubmit: handleTextSubmit, focus: isFocused })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: confirm | Esc: cancel" }) })] }));
+    }
+    // Render list mode
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { bold: true, color: "cyan", children: ["Edit: ", label] }), _jsxs(Text, { dimColor: true, children: [" (", editItems.length, " items)"] }), hasOverflow && (_jsxs(Text, { dimColor: true, children: [" [", highlightedIndex + 1, "/", totalOptions, "]"] }))] }), hasOverflow && (_jsx(Box, { children: _jsx(Text, { color: canScrollUp ? "cyan" : "gray", dimColor: !canScrollUp, children: canScrollUp ? "  ▲ more" : "" }) })), editItems.length === 0 && scrollOffset === 0 ? (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, italic: true, children: "No items" }) })) : (visibleItems.map((item, visibleIndex) => {
+                // Check if this is the "Add item" option
+                if (typeof item === "object" && "isAddOption" in item) {
+                    const actualIndex = editItems.length;
+                    const isHighlighted = actualIndex === highlightedIndex;
+                    return (_jsxs(Box, { children: [_jsx(Text, { color: isHighlighted ? "green" : undefined, children: isHighlighted ? "▸ " : "  " }), _jsx(Text, { bold: isHighlighted, color: isHighlighted ? "green" : "gray", inverse: isHighlighted, children: "+ Add item" })] }, "add-item"));
+                }
+                // Regular item
+                const actualIndex = scrollOffset + visibleIndex;
+                const isHighlighted = actualIndex === highlightedIndex;
+                return (_jsxs(Box, { children: [_jsx(Text, { color: isHighlighted ? "cyan" : undefined, children: isHighlighted ? "▸ " : "  " }), _jsxs(Text, { dimColor: true, children: [String(actualIndex + 1).padStart(2, " "), ". "] }), _jsx(Text, { bold: isHighlighted, color: isHighlighted ? "cyan" : undefined, inverse: isHighlighted, children: item })] }, `item-${actualIndex}`));
+            })), hasOverflow && (_jsx(Box, { children: _jsx(Text, { color: canScrollDown ? "cyan" : "gray", dimColor: !canScrollDown, children: canScrollDown ? "  ▼ more" : "" }) })), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "j/k: navigate | Enter/e: edit | d: delete" }), _jsxs(Text, { dimColor: true, children: ["J/K: reorder | s: save | Esc: cancel", hasOverflow && " | PgUp/Dn: scroll"] })] })] }));
+}
+export default ArrayEditor;

package/dist/tui/components/BooleanToggle.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface BooleanToggleProps {
+    /** The label to display for this field */
+    label: string;
+    /** The current value of the boolean */
+    value: boolean;
+    /** Called when the user confirms the edit (Enter) */
+    onConfirm: (newValue: boolean) => void;
+    /** Called when the user cancels the edit (Esc) */
+    onCancel: () => void;
+    /** Whether this editor has focus */
+    isFocused?: boolean;
+}
+/**
+ * BooleanToggle component provides a toggle UI for boolean fields.
+ * Space or arrow keys to toggle, Enter to confirm, Esc to cancel.
+ */
+export declare function BooleanToggle({ label, value, onConfirm, onCancel, isFocused, }: BooleanToggleProps): React.ReactElement;
+export default BooleanToggle;

package/dist/tui/components/BooleanToggle.js

@@ -0,0 +1,43 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Box, Text, useInput } from "ink";
+/**
+ * BooleanToggle component provides a toggle UI for boolean fields.
+ * Space or arrow keys to toggle, Enter to confirm, Esc to cancel.
+ */
+export function BooleanToggle({ label, value, onConfirm, onCancel, isFocused = true, }) {
+    const [editValue, setEditValue] = useState(value);
+    // Toggle the value
+    const handleToggle = useCallback(() => {
+        setEditValue((prev) => !prev);
+    }, []);
+    // Confirm the value
+    const handleConfirm = useCallback(() => {
+        onConfirm(editValue);
+    }, [editValue, onConfirm]);
+    // Handle keyboard input
+    useInput((input, key) => {
+        if (!isFocused)
+            return;
+        // Space, left/right arrows, or 't'/'f' to toggle
+        if (input === " " || key.leftArrow || key.rightArrow || input === "t" || input === "f") {
+            if (input === "t") {
+                setEditValue(true);
+            }
+            else if (input === "f") {
+                setEditValue(false);
+            }
+            else {
+                handleToggle();
+            }
+        }
+        else if (key.return) {
+            handleConfirm();
+        }
+        else if (key.escape) {
+            onCancel();
+        }
+    }, { isActive: isFocused });
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, color: "cyan", children: ["Edit: ", label] }) }), _jsxs(Box, { children: [_jsxs(Text, { dimColor: true, children: [">", " "] }), _jsxs(Box, { marginRight: 2, children: [_jsx(Text, { color: !editValue ? "red" : undefined, bold: !editValue, inverse: !editValue, children: !editValue ? " ● " : " ○ " }), _jsx(Text, { color: !editValue ? "red" : "gray", bold: !editValue, children: "false" })] }), _jsxs(Box, { children: [_jsx(Text, { color: editValue ? "green" : undefined, bold: editValue, inverse: editValue, children: editValue ? " ● " : " ○ " }), _jsx(Text, { color: editValue ? "green" : "gray", bold: editValue, children: "true" })] })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Space/\u2190/\u2192: toggle | t/f: set | Enter: confirm | Esc: cancel" }) })] }));
+}
+export default BooleanToggle;

package/dist/tui/components/EditorPanel.d.ts

@@ -0,0 +1,50 @@
+import React from "react";
+import type { RalphConfig } from "../../utils/config.js";
+import type { ValidationError } from "../utils/validation.js";
+/**
+ * Field types for determining which editor to render.
+ */
+export type FieldType = "string" | "boolean" | "number" | "array" | "object" | "unknown";
+/**
+ * Field schema describes a configuration field for editing.
+ */
+export interface FieldSchema {
+    path: string;
+    label: string;
+    type: FieldType;
+    description?: string;
+    required?: boolean;
+}
+/**
+ * Get the value at a dot-notation path from an object.
+ */
+export declare function getValueAtPath(obj: unknown, path: string): unknown;
+/**
+ * Determine the type of a field based on its current value.
+ */
+export declare function inferFieldType(value: unknown): FieldType;
+export interface EditorPanelProps {
+    /** The current configuration */
+    config: RalphConfig | null;
+    /** Currently selected section ID */
+    selectedSection: string;
+    /** Currently selected field path (for nested editing) */
+    selectedField?: string;
+    /** Callback when a field is selected for editing (useJsonEditor=true for J shortcut) */
+    onSelectField: (fieldPath: string, useJsonEditor?: boolean) => void;
+    /** Callback when navigating back (Esc) */
+    onBack: () => void;
+    /** Whether this component has focus for keyboard input */
+    isFocused?: boolean;
+    /** Validation errors to display inline */
+    validationErrors?: ValidationError[];
+    /** Maximum height for the fields list (for scrolling) */
+    maxHeight?: number;
+}
+/**
+ * EditorPanel component displays fields for the selected config section.
+ * It shows a breadcrumb of the current path and lists editable fields.
+ * Supports scrolling for long content with Page Up/Down and scroll indicators.
+ */
+export declare function EditorPanel({ config, selectedSection, selectedField, onSelectField, onBack, isFocused, validationErrors, maxHeight, }: EditorPanelProps): React.ReactElement;
+export default EditorPanel;