ralph-cli-sandboxed 0.3.0 → 0.4.0

package/dist/tui/components/KeyValueEditor.js

@@ -0,0 +1,261 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+/**
+ * Built-in hints for known notification providers.
+ */
+export const PROVIDER_HINTS = {
+    ntfy: [
+        { key: "topic", description: "ntfy topic name", required: true },
+        { key: "server", description: "ntfy server URL (default: https://ntfy.sh)" },
+        { key: "priority", description: "Message priority (1-5)" },
+        { key: "tags", description: "Comma-separated tags/emojis" },
+    ],
+    pushover: [
+        { key: "user", description: "Pushover user key", required: true },
+        { key: "token", description: "Pushover app token", required: true },
+        { key: "device", description: "Target device name" },
+        { key: "priority", description: "Message priority (-2 to 2)" },
+        { key: "sound", description: "Notification sound name" },
+    ],
+    gotify: [
+        { key: "server", description: "Gotify server URL", required: true },
+        { key: "token", description: "Gotify app token", required: true },
+        { key: "priority", description: "Message priority (0-10)" },
+    ],
+};
+/**
+ * KeyValueEditor component for editing key-value pairs with provider-specific hints.
+ * Enhanced version of ObjectEditor with support for common key suggestions.
+ */
+export function KeyValueEditor({ label, entries, onConfirm, onCancel, isFocused = true, providerName, }) {
+    const [editEntries, setEditEntries] = useState({ ...entries });
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const [mode, setMode] = useState("list");
+    const [editText, setEditText] = useState("");
+    const [newKey, setNewKey] = useState("");
+    const [expandedKeys, setExpandedKeys] = useState(new Set());
+    const [hintIndex, setHintIndex] = useState(0);
+    // Get hints for the current provider
+    const providerHints = useMemo(() => {
+        if (!providerName)
+            return [];
+        return PROVIDER_HINTS[providerName] || [];
+    }, [providerName]);
+    // Get hints that are not already in entries
+    const availableHints = useMemo(() => {
+        return providerHints.filter(hint => !(hint.key in editEntries));
+    }, [providerHints, editEntries]);
+    // Get sorted keys for consistent ordering
+    const keys = Object.keys(editEntries).sort();
+    // Total options includes all keys plus "+ Add entry" option (and "+ Add from hints" if available)
+    const hasHints = availableHints.length > 0;
+    const totalOptions = keys.length + (hasHints ? 2 : 1);
+    // 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]);
+    // Toggle expansion of a key to show its value
+    const handleToggleExpand = useCallback(() => {
+        if (highlightedIndex < keys.length) {
+            const key = keys[highlightedIndex];
+            setExpandedKeys((prev) => {
+                const newSet = new Set(prev);
+                if (newSet.has(key)) {
+                    newSet.delete(key);
+                }
+                else {
+                    newSet.add(key);
+                }
+                return newSet;
+            });
+        }
+    }, [highlightedIndex, keys]);
+    // Delete the highlighted entry
+    const handleDelete = useCallback(() => {
+        if (highlightedIndex < keys.length) {
+            const keyToDelete = keys[highlightedIndex];
+            const newEntries = { ...editEntries };
+            delete newEntries[keyToDelete];
+            setEditEntries(newEntries);
+            // Remove from expanded set if present
+            setExpandedKeys((prev) => {
+                const newSet = new Set(prev);
+                newSet.delete(keyToDelete);
+                return newSet;
+            });
+            // Adjust highlighted index if needed
+            const newKeys = Object.keys(newEntries);
+            if (highlightedIndex >= newKeys.length && newKeys.length > 0) {
+                setHighlightedIndex(newKeys.length - 1);
+            }
+            else if (newKeys.length === 0) {
+                setHighlightedIndex(0);
+            }
+        }
+    }, [highlightedIndex, keys, editEntries]);
+    // Start editing a value
+    const handleStartEdit = useCallback(() => {
+        if (highlightedIndex < keys.length) {
+            const key = keys[highlightedIndex];
+            setEditText(editEntries[key] || "");
+            setNewKey(key);
+            setMode("edit-value");
+        }
+        else if (hasHints && highlightedIndex === keys.length) {
+            // "+ Add from hints" option
+            setHintIndex(0);
+            setMode("select-hint");
+        }
+        else {
+            // "+ Add entry" option - start with key input
+            setEditText("");
+            setNewKey("");
+            setMode("add-key");
+        }
+    }, [highlightedIndex, keys, editEntries, hasHints]);
+    // Confirm key input when adding
+    const handleKeySubmit = useCallback(() => {
+        const trimmedKey = editText.trim();
+        if (trimmedKey) {
+            // Check if key already exists
+            if (editEntries[trimmedKey] !== undefined) {
+                // Edit existing key instead
+                setNewKey(trimmedKey);
+                setEditText(editEntries[trimmedKey]);
+                setMode("edit-value");
+            }
+            else {
+                setNewKey(trimmedKey);
+                setEditText("");
+                setMode("add-value");
+            }
+        }
+        else {
+            // Empty key - cancel
+            setMode("list");
+            setEditText("");
+        }
+    }, [editText, editEntries]);
+    // Confirm value input
+    const handleValueSubmit = useCallback(() => {
+        const trimmedValue = editText.trim();
+        if (newKey) {
+            const newEntries = { ...editEntries };
+            newEntries[newKey] = trimmedValue;
+            setEditEntries(newEntries);
+            // Update highlighted index to the new/edited key
+            const sortedKeys = Object.keys(newEntries).sort();
+            const newIndex = sortedKeys.indexOf(newKey);
+            if (newIndex >= 0) {
+                setHighlightedIndex(newIndex);
+            }
+        }
+        setMode("list");
+        setEditText("");
+        setNewKey("");
+    }, [editText, newKey, editEntries]);
+    // Cancel text input
+    const handleTextCancel = useCallback(() => {
+        setMode("list");
+        setEditText("");
+        setNewKey("");
+    }, []);
+    // Handle hint selection
+    const handleSelectHint = useCallback(() => {
+        if (availableHints.length > 0 && hintIndex < availableHints.length) {
+            const hint = availableHints[hintIndex];
+            setNewKey(hint.key);
+            setEditText("");
+            setMode("add-value");
+        }
+    }, [availableHints, hintIndex]);
+    // 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.return || input === "e") {
+            // Enter or 'e' to edit/add
+            handleStartEdit();
+        }
+        else if (input === "d" || key.delete) {
+            // 'd' or Delete to remove
+            handleDelete();
+        }
+        else if (key.tab || input === " ") {
+            // Tab or Space to expand/collapse value
+            handleToggleExpand();
+        }
+        else if (key.escape) {
+            onCancel();
+        }
+        else if (input === "s" || input === "S") {
+            // 's' to save and confirm
+            onConfirm(editEntries);
+        }
+    }, { isActive: isFocused && mode === "list" });
+    // Handle keyboard input for hint selection mode
+    useInput((input, key) => {
+        if (!isFocused || mode !== "select-hint")
+            return;
+        if (input === "j" || key.downArrow) {
+            setHintIndex((prev) => (prev < availableHints.length - 1 ? prev + 1 : 0));
+        }
+        else if (input === "k" || key.upArrow) {
+            setHintIndex((prev) => (prev > 0 ? prev - 1 : availableHints.length - 1));
+        }
+        else if (key.return) {
+            handleSelectHint();
+        }
+        else if (key.escape) {
+            setMode("list");
+        }
+    }, { isActive: isFocused && mode === "select-hint" });
+    // Handle keyboard input for text editing modes
+    useInput((_input, key) => {
+        if (!isFocused || mode === "list" || mode === "select-hint")
+            return;
+        if (key.escape) {
+            handleTextCancel();
+        }
+    }, { isActive: isFocused && mode !== "list" && mode !== "select-hint" });
+    // Render hint selection mode
+    if (mode === "select-hint") {
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "Select a Common Key" }), providerName && _jsxs(Text, { dimColor: true, children: [" (", providerName, ")"] })] }), availableHints.map((hint, index) => {
+                    const isHighlighted = index === hintIndex;
+                    return (_jsxs(Box, { children: [_jsx(Text, { color: isHighlighted ? "cyan" : undefined, children: isHighlighted ? "▸ " : "  " }), _jsx(Text, { bold: isHighlighted, color: hint.required ? "yellow" : isHighlighted ? "cyan" : undefined, inverse: isHighlighted, children: hint.key }), hint.required && _jsx(Text, { color: "red", children: " *" }), _jsxs(Text, { dimColor: true, children: [" - ", hint.description] })] }, hint.key));
+                }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "j/k: navigate | Enter: select | Esc: cancel" }) })] }));
+    }
+    // Render key input mode
+    if (mode === "add-key") {
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "Add New Entry - Enter Key" }) }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Key: " }), _jsx(TextInput, { value: editText, onChange: setEditText, onSubmit: handleKeySubmit, focus: isFocused })] }), availableHints.length > 0 && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: ["Common keys for ", providerName, ":"] }), availableHints.slice(0, 4).map((hint) => (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: hint.required ? "yellow" : "gray", children: [hint.key, hint.required && " *"] }) }, hint.key)))] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next | Esc: cancel" }) })] }));
+    }
+    // Render value input mode (for add or edit)
+    if (mode === "add-value" || mode === "edit-value") {
+        // Find hint description for the current key
+        const currentHint = providerHints.find(h => h.key === newKey);
+        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-value" ? "Add New Entry - Enter Value" : `Edit Value for "${newKey}"` }) }), mode === "add-value" && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Key: " }), _jsx(Text, { color: "yellow", children: newKey }), currentHint && currentHint.required && _jsx(Text, { color: "red", children: " (required)" })] })), currentHint && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: currentHint.description }) })), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Value: " }), _jsx(TextInput, { value: editText, onChange: setEditText, onSubmit: handleValueSubmit, focus: isFocused })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: confirm | Esc: cancel" }) })] }));
+    }
+    // Check for missing required keys
+    const missingRequired = providerHints.filter(h => h.required && !(h.key in editEntries));
+    // 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: [" (", keys.length, " entries)"] }), providerName && _jsxs(Text, { dimColor: true, children: [" - ", providerName] })] }), missingRequired.length > 0 && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: "yellow", children: "\u26A0 Missing required: " }), _jsx(Text, { color: "yellow", children: missingRequired.map(h => h.key).join(", ") })] })), keys.length === 0 ? (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, italic: true, children: "No entries" }) })) : (keys.map((key, index) => {
+                const isHighlighted = index === highlightedIndex;
+                const isExpanded = expandedKeys.has(key);
+                const value = editEntries[key];
+                const hint = providerHints.find(h => h.key === key);
+                return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: isHighlighted ? "cyan" : undefined, children: isHighlighted ? "▸ " : "  " }), _jsx(Text, { dimColor: true, children: isExpanded ? "▼ " : "▶ " }), _jsx(Text, { bold: isHighlighted, color: isHighlighted ? "cyan" : hint?.required ? "yellow" : "yellow", inverse: isHighlighted, children: key }), hint?.required && _jsx(Text, { color: "red", children: " *" }), !isExpanded && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: ": " }), _jsx(Text, { dimColor: true, children: value.length > 30 ? value.substring(0, 30) + "..." : value })] }))] }), isExpanded && (_jsx(Box, { marginLeft: 6, children: _jsx(Text, { color: "green", children: value || "(empty)" }) }))] }, `entry-${key}`));
+            })), hasHints && (_jsxs(Box, { children: [_jsx(Text, { color: highlightedIndex === keys.length ? "green" : undefined, children: highlightedIndex === keys.length ? "▸ " : "  " }), _jsx(Text, { dimColor: true, children: "  " }), _jsx(Text, { bold: highlightedIndex === keys.length, color: highlightedIndex === keys.length ? "green" : "gray", inverse: highlightedIndex === keys.length, children: "+ Add from hints" })] })), _jsxs(Box, { children: [_jsx(Text, { color: highlightedIndex === (hasHints ? keys.length + 1 : keys.length) ? "green" : undefined, children: highlightedIndex === (hasHints ? keys.length + 1 : keys.length) ? "▸ " : "  " }), _jsx(Text, { dimColor: true, children: "  " }), _jsx(Text, { bold: highlightedIndex === (hasHints ? keys.length + 1 : keys.length), color: highlightedIndex === (hasHints ? keys.length + 1 : keys.length) ? "green" : "gray", inverse: highlightedIndex === (hasHints ? keys.length + 1 : keys.length), children: "+ Add custom entry" })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "j/k: navigate | Tab/Space: expand | Enter/e: edit" }), _jsx(Text, { dimColor: true, children: "d: delete | s: save | Esc: cancel" })] })] }));
+}
+export default KeyValueEditor;

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

@@ -0,0 +1,23 @@
+import React from "react";
+export interface ObjectEditorProps {
+    /** The label to display for this object field */
+    label: string;
+    /** The current object entries as key-value pairs */
+    entries: Record<string, string>;
+    /** Called when the user confirms the edit */
+    onConfirm: (newEntries: Record<string, string>) => void;
+    /** Called when the user cancels the edit (Esc) */
+    onCancel: () => void;
+    /** Whether this editor has focus */
+    isFocused?: boolean;
+    /** Maximum height for the entries list (for scrolling) */
+    maxHeight?: number;
+}
+/**
+ * ObjectEditor component for editing key-value pairs.
+ * Used for environment variables, mcpServers, actions, and similar objects.
+ * Shows keys with expandable values, supports adding and deleting entries.
+ * Supports scrolling for long lists with Page Up/Down.
+ */
+export declare function ObjectEditor({ label, entries, onConfirm, onCancel, isFocused, maxHeight, }: ObjectEditorProps): React.ReactElement;
+export default ObjectEditor;

package/dist/tui/components/ObjectEditor.js

@@ -0,0 +1,227 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+/**
+ * ObjectEditor component for editing key-value pairs.
+ * Used for environment variables, mcpServers, actions, and similar objects.
+ * Shows keys with expandable values, supports adding and deleting entries.
+ * Supports scrolling for long lists with Page Up/Down.
+ */
+export function ObjectEditor({ label, entries, onConfirm, onCancel, isFocused = true, maxHeight = 10, }) {
+    const [editEntries, setEditEntries] = useState({ ...entries });
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const [mode, setMode] = useState("list");
+    const [editText, setEditText] = useState("");
+    const [newKey, setNewKey] = useState("");
+    const [expandedKeys, setExpandedKeys] = useState(new Set());
+    // Get sorted keys for consistent ordering
+    const keys = Object.keys(editEntries).sort();
+    // Total options includes all keys plus "+ Add entry" option
+    const totalOptions = keys.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]);
+    // Toggle expansion of a key to show its value
+    const handleToggleExpand = useCallback(() => {
+        if (highlightedIndex < keys.length) {
+            const key = keys[highlightedIndex];
+            setExpandedKeys((prev) => {
+                const newSet = new Set(prev);
+                if (newSet.has(key)) {
+                    newSet.delete(key);
+                }
+                else {
+                    newSet.add(key);
+                }
+                return newSet;
+            });
+        }
+    }, [highlightedIndex, keys]);
+    // Delete the highlighted entry
+    const handleDelete = useCallback(() => {
+        if (highlightedIndex < keys.length) {
+            const keyToDelete = keys[highlightedIndex];
+            const newEntries = { ...editEntries };
+            delete newEntries[keyToDelete];
+            setEditEntries(newEntries);
+            // Remove from expanded set if present
+            setExpandedKeys((prev) => {
+                const newSet = new Set(prev);
+                newSet.delete(keyToDelete);
+                return newSet;
+            });
+            // Adjust highlighted index if needed
+            const newKeys = Object.keys(newEntries);
+            if (highlightedIndex >= newKeys.length && newKeys.length > 0) {
+                setHighlightedIndex(newKeys.length - 1);
+            }
+            else if (newKeys.length === 0) {
+                setHighlightedIndex(0);
+            }
+        }
+    }, [highlightedIndex, keys, editEntries]);
+    // Start editing a value
+    const handleStartEdit = useCallback(() => {
+        if (highlightedIndex < keys.length) {
+            const key = keys[highlightedIndex];
+            setEditText(editEntries[key] || "");
+            setNewKey(key);
+            setMode("edit-value");
+        }
+        else {
+            // Add new entry - start with key input
+            setEditText("");
+            setNewKey("");
+            setMode("add-key");
+        }
+    }, [highlightedIndex, keys, editEntries]);
+    // Confirm key input when adding
+    const handleKeySubmit = useCallback(() => {
+        const trimmedKey = editText.trim();
+        if (trimmedKey) {
+            // Check if key already exists
+            if (editEntries[trimmedKey] !== undefined) {
+                // Edit existing key instead
+                setNewKey(trimmedKey);
+                setEditText(editEntries[trimmedKey]);
+                setMode("edit-value");
+            }
+            else {
+                setNewKey(trimmedKey);
+                setEditText("");
+                setMode("add-value");
+            }
+        }
+        else {
+            // Empty key - cancel
+            setMode("list");
+            setEditText("");
+        }
+    }, [editText, editEntries]);
+    // Confirm value input
+    const handleValueSubmit = useCallback(() => {
+        const trimmedValue = editText.trim();
+        if (newKey) {
+            const newEntries = { ...editEntries };
+            newEntries[newKey] = trimmedValue;
+            setEditEntries(newEntries);
+            // Update highlighted index to the new/edited key
+            const sortedKeys = Object.keys(newEntries).sort();
+            const newIndex = sortedKeys.indexOf(newKey);
+            if (newIndex >= 0) {
+                setHighlightedIndex(newIndex);
+            }
+        }
+        setMode("list");
+        setEditText("");
+        setNewKey("");
+    }, [editText, newKey, editEntries]);
+    // Cancel text input
+    const handleTextCancel = useCallback(() => {
+        setMode("list");
+        setEditText("");
+        setNewKey("");
+    }, []);
+    // 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 (key.tab || input === " ") {
+            // Tab or Space to expand/collapse value
+            handleToggleExpand();
+        }
+        else if (key.escape) {
+            onCancel();
+        }
+        else if (input === "s" || input === "S") {
+            // 's' to save and confirm
+            onConfirm(editEntries);
+        }
+    }, { isActive: isFocused && mode === "list" });
+    // Handle keyboard input for text editing modes
+    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 allKeys = [...keys, "__add_entry__"];
+        const endIndex = Math.min(scrollOffset + maxHeight, allKeys.length);
+        return allKeys.slice(scrollOffset, endIndex);
+    }, [keys, scrollOffset, maxHeight]);
+    // Check if we have overflow
+    const canScrollUp = scrollOffset > 0;
+    const canScrollDown = scrollOffset + maxHeight < totalOptions;
+    const hasOverflow = totalOptions > maxHeight;
+    // Render key input mode
+    if (mode === "add-key") {
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "Add New Entry - Enter Key" }) }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Key: " }), _jsx(TextInput, { value: editText, onChange: setEditText, onSubmit: handleKeySubmit, focus: isFocused })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next | Esc: cancel" }) })] }));
+    }
+    // Render value input mode (for add or edit)
+    if (mode === "add-value" || mode === "edit-value") {
+        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-value" ? "Add New Entry - Enter Value" : `Edit Value for "${newKey}"` }) }), mode === "add-value" && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Key: " }), _jsx(Text, { color: "yellow", children: newKey })] })), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Value: " }), _jsx(TextInput, { value: editText, onChange: setEditText, onSubmit: handleValueSubmit, 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: [" (", keys.length, " entries)"] }), hasOverflow && (_jsxs(Text, { dimColor: true, children: [" [", highlightedIndex + 1, "/", totalOptions, "]"] }))] }), hasOverflow && (_jsx(Box, { children: _jsx(Text, { color: canScrollUp ? "cyan" : "gray", dimColor: !canScrollUp, children: canScrollUp ? "  ▲ more" : "" }) })), keys.length === 0 && scrollOffset === 0 ? (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, italic: true, children: "No entries" }) })) : (visibleItems.map((key, visibleIndex) => {
+                // Check if this is the "Add entry" option
+                if (key === "__add_entry__") {
+                    const actualIndex = keys.length;
+                    const isHighlighted = actualIndex === highlightedIndex;
+                    return (_jsxs(Box, { children: [_jsx(Text, { color: isHighlighted ? "green" : undefined, children: isHighlighted ? "▸ " : "  " }), _jsx(Text, { dimColor: true, children: "  " }), _jsx(Text, { bold: isHighlighted, color: isHighlighted ? "green" : "gray", inverse: isHighlighted, children: "+ Add entry" })] }, "add-entry"));
+                }
+                // Regular entry
+                const actualIndex = scrollOffset + visibleIndex;
+                const isHighlighted = actualIndex === highlightedIndex;
+                const isExpanded = expandedKeys.has(key);
+                const value = editEntries[key];
+                return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: isHighlighted ? "cyan" : undefined, children: isHighlighted ? "▸ " : "  " }), _jsx(Text, { dimColor: true, children: isExpanded ? "▼ " : "▶ " }), _jsx(Text, { bold: isHighlighted, color: isHighlighted ? "cyan" : "yellow", inverse: isHighlighted, children: key }), !isExpanded && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: ": " }), _jsx(Text, { dimColor: true, children: value.length > 30 ? value.substring(0, 30) + "..." : value })] }))] }), isExpanded && (_jsx(Box, { marginLeft: 6, children: _jsx(Text, { color: "green", children: value || "(empty)" }) }))] }, `entry-${key}`));
+            })), 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 | Tab/Space: expand | Enter/e: edit" }), _jsxs(Text, { dimColor: true, children: ["d: delete | s: save | Esc: cancel", hasOverflow && " | PgUp/Dn: scroll"] })] })] }));
+}
+export default ObjectEditor;

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

@@ -0,0 +1,23 @@
+import React from "react";
+import type { ConfigPreset } from "../utils/presets.js";
+import type { RalphConfig } from "../../utils/config.js";
+export interface PresetSelectorProps {
+    /** The section ID to show presets for */
+    sectionId: string;
+    /** Current configuration (to detect active preset) */
+    config: RalphConfig;
+    /** Called when a preset is selected */
+    onSelectPreset: (preset: ConfigPreset) => void;
+    /** Called when user skips preset selection */
+    onSkip: () => void;
+    /** Called when user cancels */
+    onCancel: () => void;
+    /** Whether this component has focus */
+    isFocused?: boolean;
+}
+/**
+ * PresetSelector component displays available presets for a config section.
+ * Allows the user to quickly apply a preset template or skip to manual editing.
+ */
+export declare function PresetSelector({ sectionId, config, onSelectPreset, onSkip, onCancel, isFocused, }: PresetSelectorProps): React.ReactElement;
+export default PresetSelector;

package/dist/tui/components/PresetSelector.js

@@ -0,0 +1,58 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import { getPresetsForSection, detectActivePreset } from "../utils/presets.js";
+/**
+ * PresetSelector component displays available presets for a config section.
+ * Allows the user to quickly apply a preset template or skip to manual editing.
+ */
+export function PresetSelector({ sectionId, config, onSelectPreset, onSkip, onCancel, isFocused = true, }) {
+    const presets = useMemo(() => getPresetsForSection(sectionId), [sectionId]);
+    const activePresetId = useMemo(() => detectActivePreset(config, sectionId), [config, sectionId]);
+    // Include "Skip" option at the end
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const totalOptions = presets.length + 1; // +1 for "Skip" option
+    // 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 handleSelect = useCallback(() => {
+        if (highlightedIndex < presets.length) {
+            const preset = presets[highlightedIndex];
+            onSelectPreset(preset);
+        }
+        else {
+            // Skip option selected
+            onSkip();
+        }
+    }, [highlightedIndex, presets, onSelectPreset, onSkip]);
+    // Handle keyboard input
+    useInput((input, key) => {
+        if (!isFocused)
+            return;
+        // j/k or arrow keys for navigation
+        if (input === "j" || key.downArrow) {
+            handleNavigateDown();
+        }
+        else if (input === "k" || key.upArrow) {
+            handleNavigateUp();
+        }
+        else if (key.return) {
+            handleSelect();
+        }
+        else if (key.escape) {
+            onCancel();
+        }
+    }, { isActive: isFocused });
+    // Get section title for display
+    const sectionTitle = sectionId.charAt(0).toUpperCase() + sectionId.slice(1);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, color: "cyan", children: ["Use Preset: ", sectionTitle] }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "Select a preset to auto-fill common settings, or skip to configure manually." }) }), presets.map((preset, index) => {
+                const isHighlighted = index === highlightedIndex;
+                const isActive = preset.id === activePresetId;
+                return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: isHighlighted ? "cyan" : undefined, children: isHighlighted ? "▸ " : "  " }), _jsx(Text, { bold: isHighlighted, color: isHighlighted ? "cyan" : isActive ? "green" : undefined, inverse: isHighlighted, children: preset.name }), isActive && _jsx(Text, { color: "green", children: " (active)" })] }), _jsx(Box, { marginLeft: 4, children: _jsx(Text, { dimColor: true, children: preset.description }) })] }, preset.id));
+            }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: highlightedIndex === presets.length ? "cyan" : undefined, children: highlightedIndex === presets.length ? "▸ " : "  " }), _jsx(Text, { bold: highlightedIndex === presets.length, color: highlightedIndex === presets.length ? "yellow" : "gray", inverse: highlightedIndex === presets.length, children: "Skip - Configure manually" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "j/k: navigate | Enter: select | Esc: back" }) })] }));
+}
+export default PresetSelector;

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

@@ -0,0 +1,18 @@
+import React from "react";
+import type { RalphConfig } from "../../utils/config.js";
+export interface PreviewProps {
+    /** The current configuration */
+    config: RalphConfig | null;
+    /** Currently selected section ID */
+    selectedSection: string;
+    /** Whether the preview panel is visible */
+    visible?: boolean;
+    /** Maximum height for the preview (lines) */
+    maxHeight?: number;
+}
+/**
+ * Preview component displays the current section's config as syntax-highlighted JSON.
+ * Updates live as edits are made.
+ */
+export declare function Preview({ config, selectedSection, visible, maxHeight, }: PreviewProps): React.ReactElement | null;
+export default Preview;