ralph-cli-sandboxed 0.4.0 → 0.4.2

package/dist/tui/components/LLMProvidersEditor.js

@@ -0,0 +1,357 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useCallback, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+/**
+ * Provider type options for dropdown.
+ */
+const PROVIDER_TYPES = ["anthropic", "openai", "ollama"];
+/**
+ * Default models for each provider type.
+ */
+const DEFAULT_MODELS = {
+    anthropic: "claude-sonnet-4-20250514",
+    openai: "gpt-4o",
+    ollama: "llama3",
+};
+/**
+ * Model suggestions for each provider type.
+ */
+const MODEL_SUGGESTIONS = {
+    anthropic: ["claude-sonnet-4-20250514", "claude-opus-4-20250514", "claude-3-5-haiku-20241022"],
+    openai: ["gpt-4o", "gpt-4-turbo", "gpt-3.5-turbo", "o1-preview", "o1-mini"],
+    ollama: ["llama3", "llama3.1", "mistral", "codellama", "mixtral", "phi"],
+};
+/**
+ * LLMProvidersEditor component for editing LLM provider configurations.
+ * Provides a user-friendly interface for adding, editing, and removing LLM providers.
+ */
+export function LLMProvidersEditor({ label, providers, onConfirm, onCancel, isFocused = true, maxHeight = 15, }) {
+    const [editProviders, setEditProviders] = useState({ ...providers });
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const [mode, setMode] = useState("list");
+    const [editText, setEditText] = useState("");
+    const [editingProvider, setEditingProvider] = useState(null);
+    const [typeIndex, setTypeIndex] = useState(0);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    // Get sorted provider names
+    const providerNames = useMemo(() => Object.keys(editProviders).sort(), [editProviders]);
+    // Total options includes all providers plus "+ Add provider" option
+    const totalOptions = providerNames.length + 1;
+    // Calculate visible range for scrolling
+    const visibleCount = Math.min(maxHeight - 6, totalOptions); // Reserve lines for header, footer, hints
+    const visibleProviders = useMemo(() => {
+        const endIndex = Math.min(scrollOffset + visibleCount, providerNames.length);
+        return providerNames.slice(scrollOffset, endIndex);
+    }, [scrollOffset, visibleCount, providerNames]);
+    // Auto-scroll to keep highlighted item visible
+    React.useEffect(() => {
+        if (highlightedIndex < scrollOffset) {
+            setScrollOffset(highlightedIndex);
+        }
+        else if (highlightedIndex >= scrollOffset + visibleCount) {
+            setScrollOffset(Math.max(0, highlightedIndex - visibleCount + 1));
+        }
+    }, [highlightedIndex, scrollOffset, visibleCount]);
+    // 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]);
+    // Delete the highlighted provider
+    const handleDelete = useCallback(() => {
+        if (highlightedIndex < providerNames.length) {
+            const nameToDelete = providerNames[highlightedIndex];
+            const newProviders = { ...editProviders };
+            delete newProviders[nameToDelete];
+            setEditProviders(newProviders);
+            // Adjust highlighted index if needed
+            const newNames = Object.keys(newProviders);
+            if (highlightedIndex >= newNames.length && newNames.length > 0) {
+                setHighlightedIndex(newNames.length - 1);
+            }
+            else if (newNames.length === 0) {
+                setHighlightedIndex(0);
+            }
+        }
+    }, [highlightedIndex, providerNames, editProviders]);
+    // Start editing or adding a provider
+    const handleStartEdit = useCallback(() => {
+        if (highlightedIndex < providerNames.length) {
+            // Edit existing provider
+            const name = providerNames[highlightedIndex];
+            const config = editProviders[name];
+            setEditingProvider({ name, config: { ...config } });
+            setMode("edit-provider");
+        }
+        else {
+            // Add new provider - start with name input
+            setEditText("");
+            setMode("add-name");
+        }
+    }, [highlightedIndex, providerNames, editProviders]);
+    // Handle name submission when adding new provider
+    const handleNameSubmit = useCallback(() => {
+        const trimmedName = editText.trim();
+        if (trimmedName) {
+            // Check if name already exists
+            if (editProviders[trimmedName]) {
+                // Edit existing instead
+                const config = editProviders[trimmedName];
+                setEditingProvider({ name: trimmedName, config: { ...config } });
+                setMode("edit-provider");
+            }
+            else {
+                // Create new provider with default values
+                setEditingProvider({
+                    name: trimmedName,
+                    config: {
+                        type: "anthropic",
+                        model: DEFAULT_MODELS.anthropic,
+                    },
+                });
+                setTypeIndex(0);
+                setMode("select-type");
+            }
+        }
+        else {
+            setMode("list");
+        }
+        setEditText("");
+    }, [editText, editProviders]);
+    // Handle type selection
+    const handleTypeSelect = useCallback(() => {
+        if (editingProvider) {
+            const selectedType = PROVIDER_TYPES[typeIndex];
+            setEditingProvider({
+                ...editingProvider,
+                config: {
+                    ...editingProvider.config,
+                    type: selectedType,
+                    model: DEFAULT_MODELS[selectedType],
+                },
+            });
+            setEditText(DEFAULT_MODELS[selectedType]);
+            setMode("edit-model");
+        }
+    }, [editingProvider, typeIndex]);
+    // Handle model submission
+    const handleModelSubmit = useCallback(() => {
+        if (editingProvider) {
+            const trimmedModel = editText.trim() || DEFAULT_MODELS[editingProvider.config.type];
+            setEditingProvider({
+                ...editingProvider,
+                config: {
+                    ...editingProvider.config,
+                    model: trimmedModel,
+                },
+            });
+            // For ollama, skip API key and go to baseUrl
+            if (editingProvider.config.type === "ollama") {
+                setEditText(editingProvider.config.baseUrl || "http://localhost:11434");
+                setMode("edit-baseurl");
+            }
+            else {
+                setEditText(editingProvider.config.apiKey || "");
+                setMode("edit-apikey");
+            }
+        }
+    }, [editingProvider, editText]);
+    // Handle API key submission
+    const handleApiKeySubmit = useCallback(() => {
+        if (editingProvider) {
+            const apiKey = editText.trim() || undefined;
+            setEditingProvider({
+                ...editingProvider,
+                config: {
+                    ...editingProvider.config,
+                    apiKey,
+                },
+            });
+            setEditText(editingProvider.config.baseUrl || "");
+            setMode("edit-baseurl");
+        }
+    }, [editingProvider, editText]);
+    // Handle base URL submission and save provider
+    const handleBaseUrlSubmit = useCallback(() => {
+        if (editingProvider) {
+            const baseUrl = editText.trim() || undefined;
+            const newProviders = {
+                ...editProviders,
+                [editingProvider.name]: {
+                    ...editingProvider.config,
+                    baseUrl,
+                },
+            };
+            // Clean up undefined values
+            if (!newProviders[editingProvider.name].apiKey) {
+                delete newProviders[editingProvider.name].apiKey;
+            }
+            if (!newProviders[editingProvider.name].baseUrl) {
+                delete newProviders[editingProvider.name].baseUrl;
+            }
+            setEditProviders(newProviders);
+            setEditingProvider(null);
+            setMode("list");
+            setEditText("");
+            // Update highlighted index to the new/edited provider
+            const sortedNames = Object.keys(newProviders).sort();
+            const newIndex = sortedNames.indexOf(editingProvider.name);
+            if (newIndex >= 0) {
+                setHighlightedIndex(newIndex);
+            }
+        }
+    }, [editingProvider, editText, editProviders]);
+    // Cancel editing
+    const handleCancel = useCallback(() => {
+        setMode("list");
+        setEditText("");
+        setEditingProvider(null);
+    }, []);
+    // Handle keyboard input for list mode
+    useInput((input, key) => {
+        if (!isFocused || mode !== "list")
+            return;
+        if (input === "j" || key.downArrow) {
+            handleNavigateDown();
+        }
+        else if (input === "k" || key.upArrow) {
+            handleNavigateUp();
+        }
+        else if (key.return || input === "e") {
+            handleStartEdit();
+        }
+        else if (input === "d" || key.delete) {
+            handleDelete();
+        }
+        else if (key.escape) {
+            onCancel();
+        }
+        else if (input === "s" || input === "S") {
+            onConfirm(editProviders);
+        }
+    }, { isActive: isFocused && mode === "list" });
+    // Handle keyboard input for type selection
+    useInput((input, key) => {
+        if (!isFocused || mode !== "select-type")
+            return;
+        if (input === "j" || key.downArrow) {
+            setTypeIndex((prev) => (prev < PROVIDER_TYPES.length - 1 ? prev + 1 : 0));
+        }
+        else if (input === "k" || key.upArrow) {
+            setTypeIndex((prev) => (prev > 0 ? prev - 1 : PROVIDER_TYPES.length - 1));
+        }
+        else if (key.return) {
+            handleTypeSelect();
+        }
+        else if (key.escape) {
+            handleCancel();
+        }
+    }, { isActive: isFocused && mode === "select-type" });
+    // Handle keyboard input for text editing modes
+    useInput((_input, key) => {
+        if (!isFocused ||
+            mode === "list" ||
+            mode === "select-type" ||
+            mode === "edit-provider")
+            return;
+        if (key.escape) {
+            handleCancel();
+        }
+    }, {
+        isActive: isFocused &&
+            mode !== "list" &&
+            mode !== "select-type" &&
+            mode !== "edit-provider",
+    });
+    // Handle keyboard input for edit-provider mode (viewing a provider)
+    useInput((input, key) => {
+        if (!isFocused || mode !== "edit-provider" || !editingProvider)
+            return;
+        if (key.escape) {
+            handleCancel();
+        }
+        else if (input === "t" || input === "T") {
+            // Edit type
+            setTypeIndex(PROVIDER_TYPES.indexOf(editingProvider.config.type));
+            setMode("select-type");
+        }
+        else if (input === "m" || input === "M") {
+            // Edit model
+            setEditText(editingProvider.config.model);
+            setMode("edit-model");
+        }
+        else if (input === "a" || input === "A") {
+            // Edit API key
+            setEditText(editingProvider.config.apiKey || "");
+            setMode("edit-apikey");
+        }
+        else if (input === "b" || input === "B") {
+            // Edit base URL
+            setEditText(editingProvider.config.baseUrl || "");
+            setMode("edit-baseurl");
+        }
+        else if (input === "s" || input === "S") {
+            // Save and close
+            const newProviders = {
+                ...editProviders,
+                [editingProvider.name]: { ...editingProvider.config },
+            };
+            // Clean up undefined values
+            if (!newProviders[editingProvider.name].apiKey) {
+                delete newProviders[editingProvider.name].apiKey;
+            }
+            if (!newProviders[editingProvider.name].baseUrl) {
+                delete newProviders[editingProvider.name].baseUrl;
+            }
+            setEditProviders(newProviders);
+            setEditingProvider(null);
+            setMode("list");
+        }
+    }, { isActive: isFocused && mode === "edit-provider" });
+    // Render type selection mode
+    if (mode === "select-type") {
+        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 Provider Type" }), editingProvider && _jsxs(Text, { dimColor: true, children: [" for \"", editingProvider.name, "\""] })] }), PROVIDER_TYPES.map((type, index) => {
+                    const isHighlighted = index === typeIndex;
+                    return (_jsxs(Box, { children: [_jsx(Text, { color: isHighlighted ? "cyan" : undefined, children: isHighlighted ? "▸ " : "  " }), _jsx(Text, { bold: isHighlighted, color: isHighlighted ? "cyan" : undefined, inverse: isHighlighted, children: type }), _jsxs(Text, { dimColor: true, children: [" - ", type === "anthropic" ? "Claude models" : type === "openai" ? "GPT models" : "Local models"] })] }, type));
+                }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "j/k: navigate | Enter: select | Esc: cancel" }) })] }));
+    }
+    // Render name input mode
+    if (mode === "add-name") {
+        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 LLM Provider" }) }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Name: " }), _jsx(TextInput, { value: editText, onChange: setEditText, onSubmit: handleNameSubmit, focus: isFocused, placeholder: "e.g., claude, gpt4, local" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Common names: anthropic, openai, ollama, claude, gpt4, local" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next | Esc: cancel" }) })] }));
+    }
+    // Render model input mode
+    if (mode === "edit-model" && editingProvider) {
+        const suggestions = MODEL_SUGGESTIONS[editingProvider.config.type] || [];
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "Enter Model Name" }), _jsxs(Text, { dimColor: true, children: [" for ", editingProvider.config.type] })] }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Model: " }), _jsx(TextInput, { value: editText, onChange: setEditText, onSubmit: handleModelSubmit, focus: isFocused })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "Suggested models:" }), suggestions.slice(0, 4).map((model) => (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", children: model }) }, model)))] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next | Esc: cancel" }) })] }));
+    }
+    // Render API key input mode
+    if (mode === "edit-apikey" && editingProvider) {
+        const envVar = editingProvider.config.type === "anthropic" ? "ANTHROPIC_API_KEY" : "OPENAI_API_KEY";
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "Enter API Key" }), _jsx(Text, { dimColor: true, children: " (optional)" })] }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { dimColor: true, children: ["Leave empty to use ", envVar, " environment variable"] }) }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "API Key: " }), _jsx(TextInput, { value: editText, onChange: setEditText, onSubmit: handleApiKeySubmit, focus: isFocused, mask: "*" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next | Esc: cancel" }) })] }));
+    }
+    // Render base URL input mode
+    if (mode === "edit-baseurl" && editingProvider) {
+        const defaultUrl = editingProvider.config.type === "ollama" ? "http://localhost:11434" : "";
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "Enter Base URL" }), _jsx(Text, { dimColor: true, children: " (optional)" })] }), editingProvider.config.type === "ollama" && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { dimColor: true, children: ["Default: ", defaultUrl] }) })), editingProvider.config.type === "openai" && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "Use custom URL for OpenAI-compatible APIs" }) })), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Base URL: " }), _jsx(TextInput, { value: editText, onChange: setEditText, onSubmit: handleBaseUrlSubmit, focus: isFocused, placeholder: defaultUrl || "Leave empty for default" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: save provider | Esc: cancel" }) })] }));
+    }
+    // Render edit-provider mode (viewing/editing a single provider)
+    if (mode === "edit-provider" && editingProvider) {
+        const config = editingProvider.config;
+        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 Provider: ", editingProvider.name] }) }), _jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "[T] Type: " }), _jsx(Text, { children: config.type })] }), _jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "[M] Model: " }), _jsx(Text, { children: config.model })] }), _jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "[A] API Key: " }), _jsx(Text, { dimColor: true, children: config.apiKey ? "********" : "(uses env var)" })] }), _jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "[B] Base URL: " }), _jsx(Text, { dimColor: true, children: config.baseUrl || "(default)" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "T/M/A/B: edit field | S: save | Esc: cancel" }) })] }));
+    }
+    // Calculate scroll indicators
+    const canScrollUp = scrollOffset > 0;
+    const canScrollDown = scrollOffset + visibleCount < providerNames.length;
+    const hasOverflow = providerNames.length > visibleCount;
+    // Render list mode
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: label }), _jsxs(Text, { dimColor: true, children: [" (", providerNames.length, " providers)"] })] }), hasOverflow && (_jsx(Box, { children: _jsx(Text, { color: canScrollUp ? "cyan" : "gray", dimColor: !canScrollUp, children: canScrollUp ? "  ▲ more" : "" }) })), providerNames.length === 0 ? (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, italic: true, children: "No LLM providers configured" }) })) : (visibleProviders.map((name) => {
+                const actualIndex = providerNames.indexOf(name);
+                const isHighlighted = actualIndex === highlightedIndex;
+                const config = editProviders[name];
+                return (_jsx(Box, { flexDirection: "column", children: _jsxs(Box, { children: [_jsx(Text, { color: isHighlighted ? "cyan" : undefined, children: isHighlighted ? "▸ " : "  " }), _jsx(Text, { bold: isHighlighted, color: isHighlighted ? "cyan" : "yellow", inverse: isHighlighted, children: name }), _jsx(Text, { dimColor: true, children: ": " }), _jsx(Text, { color: "magenta", children: config.type }), _jsx(Text, { dimColor: true, children: " / " }), _jsx(Text, { children: config.model })] }) }, name));
+            })), hasOverflow && (_jsx(Box, { children: _jsx(Text, { color: canScrollDown ? "cyan" : "gray", dimColor: !canScrollDown, children: canScrollDown ? "  ▼ more" : "" }) })), _jsxs(Box, { children: [_jsx(Text, { color: highlightedIndex === providerNames.length ? "green" : undefined, children: highlightedIndex === providerNames.length ? "▸ " : "  " }), _jsx(Text, { bold: highlightedIndex === providerNames.length, color: highlightedIndex === providerNames.length ? "green" : "gray", inverse: highlightedIndex === providerNames.length, children: "+ Add provider" })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "j/k: navigate | Enter/e: edit | d: delete" }), _jsx(Text, { dimColor: true, children: "s: save all | Esc: cancel" })] })] }));
+}
+export default LLMProvidersEditor;

package/dist/tui/components/ObjectEditor.js

@@ -209,7 +209,7 @@ export function ObjectEditor({ label, entries, onConfirm, onCancel, isFocused =
         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) => {
+    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;

package/dist/tui/components/Preview.js

@@ -185,6 +185,6 @@ export function Preview({ config, selectedSection, visible = true, maxHeight = 2
     if (!config || !sectionData || Object.keys(sectionData).length === 0) {
         return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, width: 40, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "yellow", children: "JSON Preview" }) }), _jsx(Text, { dimColor: true, children: "No data to preview" })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, width: 40, children: [_jsxs(Box, { marginBottom: 1, justifyContent: "space-between", children: [_jsx(Text, { bold: true, color: "yellow", children: "JSON Preview" }), _jsx(Text, { dimColor: true, children: currentSection?.label || selectedSection })] }), _jsxs(Box, { flexDirection: "column", children: [displayLines.map((line, index) => (_jsx(HighlightedLineComponent, { line: line }, index))), isOverflowing && (_jsxs(Text, { dimColor: true, children: ["  ... (", highlightedLines.length - maxHeight + 1, " more lines)"] }))] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "[Tab] to hide" }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, width: 40, children: [_jsxs(Box, { marginBottom: 1, justifyContent: "space-between", children: [_jsx(Text, { bold: true, color: "yellow", children: "JSON Preview" }), _jsx(Text, { dimColor: true, children: currentSection?.label || selectedSection })] }), _jsxs(Box, { flexDirection: "column", children: [displayLines.map((line, index) => (_jsx(HighlightedLineComponent, { line: line }, index))), isOverflowing && (_jsxs(Text, { dimColor: true, children: [" ... (", highlightedLines.length - maxHeight + 1, " more lines)"] }))] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "[Tab] to hide" }) })] }));
 }
 export default Preview;

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

@@ -0,0 +1,22 @@
+import React from "react";
+import type { RespondersConfig } from "../../utils/config.js";
+export interface RespondersEditorProps {
+    /** The label to display for this field */
+    label: string;
+    /** The current responders config */
+    responders: RespondersConfig;
+    /** Called when the user confirms the edit */
+    onConfirm: (newResponders: RespondersConfig) => void;
+    /** Called when the user cancels the edit (Esc) */
+    onCancel: () => void;
+    /** Whether this editor has focus */
+    isFocused?: boolean;
+    /** Maximum height for the list (for scrolling) */
+    maxHeight?: number;
+}
+/**
+ * RespondersEditor component for editing chat responder configurations.
+ * Provides a user-friendly interface for adding, editing, and removing responders.
+ */
+export declare function RespondersEditor({ label, responders, onConfirm, onCancel, isFocused, maxHeight, }: RespondersEditorProps): React.ReactElement;
+export default RespondersEditor;