ralph-cli-sandboxed 0.4.1 → 0.4.2

package/dist/tui/components/ArrayEditor.js

@@ -177,7 +177,7 @@ export function ArrayEditor({ label, items, onConfirm, onCancel, isFocused = tru
         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) => {
+    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;

package/dist/tui/components/EditorPanel.js

@@ -213,7 +213,7 @@ export function EditorPanel({ config, selectedSection, selectedField, onSelectFi
     if (!currentSection || fields.length === 0) {
         return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, flexGrow: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: breadcrumb }) }), _jsx(Text, { dimColor: true, children: "No fields in this section" })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, flexGrow: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: breadcrumb }), hasOverflow && (_jsxs(Text, { dimColor: true, children: [" (", highlightedIndex + 1, "/", totalFields, ")"] }))] }), hasOverflow && (_jsx(Box, { children: _jsx(Text, { color: canScrollUp ? "cyan" : "gray", dimColor: !canScrollUp, children: canScrollUp ? "▲ more" : "" }) })), visibleFields.map((field) => {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, flexGrow: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: breadcrumb }), hasOverflow && (_jsxs(Text, { dimColor: true, children: [" ", "(", highlightedIndex + 1, "/", totalFields, ")"] }))] }), hasOverflow && (_jsx(Box, { children: _jsx(Text, { color: canScrollUp ? "cyan" : "gray", dimColor: !canScrollUp, children: canScrollUp ? "▲ more" : "" }) })), visibleFields.map((field) => {
                 const actualIndex = fields.findIndex((f) => f.path === field.path);
                 const isHighlighted = actualIndex === highlightedIndex;
                 const value = getValueAtPath(config, field.path);
@@ -221,12 +221,16 @@ export function EditorPanel({ config, selectedSection, selectedField, onSelectFi
                 const fieldHasError = hasFieldError(validationErrors, field.path);
                 const fieldErrors = getFieldErrors(validationErrors, field.path);
                 // Color based on field type, but red if there's an error
-                const typeColor = fieldHasError ? "red"
-                    : field.type === "array" ? "yellow"
-                        : field.type === "object" ? "magenta"
-                            : field.type === "boolean" ? "blue"
+                const typeColor = fieldHasError
+                    ? "red"
+                    : field.type === "array"
+                        ? "yellow"
+                        : field.type === "object"
+                            ? "magenta"
+                            : field.type === "boolean"
+                                ? "blue"
                                 : undefined;
-                return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: isHighlighted ? "cyan" : fieldHasError ? "red" : undefined, children: isHighlighted ? "▸ " : fieldHasError ? "✗ " : "  " }), _jsx(Text, { bold: isHighlighted, color: fieldHasError ? "red" : isHighlighted ? "cyan" : undefined, inverse: isHighlighted, children: field.label }), _jsx(Text, { dimColor: true, children: ": " }), _jsx(Text, { color: typeColor, dimColor: value === undefined || value === null, children: displayValue }), (field.type === "array" || field.type === "object") && (_jsx(Text, { dimColor: true, children: " \u2192" }))] }), fieldHasError && fieldErrors.length > 0 && (_jsx(Box, { marginLeft: 4, children: _jsx(Text, { color: "red", dimColor: true, children: fieldErrors[0].message }) }))] }, field.path));
+                return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: isHighlighted ? "cyan" : fieldHasError ? "red" : undefined, children: isHighlighted ? "▸ " : fieldHasError ? "✗ " : "  " }), _jsx(Text, { bold: isHighlighted, color: fieldHasError ? "red" : isHighlighted ? "cyan" : undefined, inverse: isHighlighted, children: field.label }), _jsx(Text, { dimColor: true, children: ": " }), _jsx(Text, { color: typeColor, dimColor: value === undefined || value === null, children: displayValue }), (field.type === "array" || field.type === "object") && _jsx(Text, { dimColor: true, children: " \u2192" })] }), fieldHasError && fieldErrors.length > 0 && (_jsx(Box, { marginLeft: 4, children: _jsx(Text, { color: "red", dimColor: true, children: fieldErrors[0].message }) }))] }, field.path));
             }), hasOverflow && (_jsx(Box, { children: _jsx(Text, { color: canScrollDown ? "cyan" : "gray", dimColor: !canScrollDown, children: canScrollDown ? "▼ more" : "" }) })), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["j/k: navigate | Enter: edit | J: edit as JSON", hasOverflow && " | PgUp/Dn: scroll", " | Esc: back"] }) })] }));
 }
 export default EditorPanel;

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

@@ -9,5 +9,5 @@ export interface HelpPanelProps {
  * HelpPanel displays all keyboard shortcuts for the config editor.
  * Toggle with the ? key.
  */
-export declare function HelpPanel({ visible, onClose, }: HelpPanelProps): React.ReactElement | null;
+export declare function HelpPanel({ visible, onClose }: HelpPanelProps): React.ReactElement | null;
 export default HelpPanel;

package/dist/tui/components/HelpPanel.js

@@ -54,7 +54,7 @@ const SHORTCUT_GROUPS = [
  * HelpPanel displays all keyboard shortcuts for the config editor.
  * Toggle with the ? key.
  */
-export function HelpPanel({ visible, onClose, }) {
+export function HelpPanel({ visible, onClose }) {
     // Handle keyboard input to close help
     useInput((input, key) => {
         if (input === "?" || key.escape) {

package/dist/tui/components/JsonSnippetEditor.js

@@ -75,13 +75,16 @@ function validateJsonStructure(value, label) {
             if (serverConfig.args && !Array.isArray(serverConfig.args)) {
                 warnings.push(`Server "${name}": "args" should be an array`);
             }
-            if (serverConfig.env && (typeof serverConfig.env !== "object" || Array.isArray(serverConfig.env))) {
+            if (serverConfig.env &&
+                (typeof serverConfig.env !== "object" || Array.isArray(serverConfig.env))) {
                 warnings.push(`Server "${name}": "env" should be an object`);
             }
         }
     }
     // Daemon Actions validation
-    if (label.toLowerCase().includes("action") && typeof value === "object" && !Array.isArray(value)) {
+    if (label.toLowerCase().includes("action") &&
+        typeof value === "object" &&
+        !Array.isArray(value)) {
         const actions = value;
         for (const [name, config] of Object.entries(actions)) {
             if (typeof config !== "object" || config === null) {
@@ -227,7 +230,7 @@ function highlightJson(json, maxLines, maxLineWidth = 60) {
         elements.push(_jsxs(Box, { children: [_jsxs(Text, { dimColor: true, children: [lineNum, " "] }), tokens] }, i));
     }
     if (hasMore) {
-        elements.push(_jsx(Box, { children: _jsxs(Text, { dimColor: true, children: ["    ... (", lines.length - maxLines, " more lines)"] }) }, "more"));
+        elements.push(_jsx(Box, { children: _jsxs(Text, { dimColor: true, children: [" ... (", lines.length - maxLines, " more lines)"] }) }, "more"));
     }
     return elements;
 }
@@ -373,8 +376,8 @@ export function JsonSnippetEditor({ label, value, onConfirm, onCancel, isFocused
     // Account for border (2) and padding (2) when calculating preview width
     const previewWidth = Math.max(40, maxWidth - 4);
     const previewLines = highlightJson(editText, previewMaxLines, previewWidth);
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsxs(Box, { marginBottom: 1, justifyContent: "space-between", children: [_jsxs(Text, { bold: true, color: "cyan", children: ["Edit as JSON: ", label] }), copied && _jsx(Text, { color: "green", children: " Copied!" })] }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: previewLines }), _jsx(Box, { marginBottom: 1, flexDirection: "column", children: parseError ? (_jsx(Box, { children: _jsxs(Text, { color: "red", bold: true, children: ["Error: ", parseError.line && parseError.column
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsxs(Box, { marginBottom: 1, justifyContent: "space-between", children: [_jsxs(Text, { bold: true, color: "cyan", children: ["Edit as JSON: ", label] }), copied && _jsx(Text, { color: "green", children: " Copied!" })] }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: previewLines }), _jsx(Box, { marginBottom: 1, flexDirection: "column", children: parseError ? (_jsx(Box, { children: _jsxs(Text, { color: "red", bold: true, children: ["Error:", " ", parseError.line && parseError.column
                                 ? `Line ${parseError.line}:${parseError.column} - `
-                                : "", parseError.message] }) })) : warningCount > 0 ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "yellow", bold: true, children: [warningCount, " warning", warningCount > 1 ? "s" : "", ":"] }), warnings.slice(0, 3).map((w, i) => (_jsxs(Text, { color: "yellow", dimColor: true, children: [" - ", w] }, i))), warningCount > 3 && (_jsxs(Text, { dimColor: true, children: [" ... and ", warningCount - 3, " more"] }))] })) : (_jsx(Text, { color: "green", children: "Valid JSON" })) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "e/Enter: edit | s: save | c: copy | f: format" }), _jsx(Text, { dimColor: true, children: "j/k: scroll | PgUp/Dn: page | Esc: cancel" })] })] }));
+                                : "", parseError.message] }) })) : warningCount > 0 ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "yellow", bold: true, children: [warningCount, " warning", warningCount > 1 ? "s" : "", ":"] }), warnings.slice(0, 3).map((w, i) => (_jsxs(Text, { color: "yellow", dimColor: true, children: [" ", "- ", w] }, i))), warningCount > 3 && _jsxs(Text, { dimColor: true, children: [" ... and ", warningCount - 3, " more"] })] })) : (_jsx(Text, { color: "green", children: "Valid JSON" })) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "e/Enter: edit | s: save | c: copy | f: format" }), _jsx(Text, { dimColor: true, children: "j/k: scroll | PgUp/Dn: page | Esc: cancel" })] })] }));
 }
 export default JsonSnippetEditor;

package/dist/tui/components/KeyValueEditor.js

@@ -26,9 +26,21 @@ export const PROVIDER_HINTS = {
     ],
     // Chat provider hints
     slack: [
-        { key: "botToken", description: "Slack Bot Token (xoxb-...) from OAuth & Permissions", required: true },
-        { key: "appToken", description: "Slack App Token (xapp-...) from Basic Information > App-Level Tokens", required: true },
-        { key: "signingSecret", description: "Slack Signing Secret from Basic Information > App Credentials", required: true },
+        {
+            key: "botToken",
+            description: "Slack Bot Token (xoxb-...) from OAuth & Permissions",
+            required: true,
+        },
+        {
+            key: "appToken",
+            description: "Slack App Token (xapp-...) from Basic Information > App-Level Tokens",
+            required: true,
+        },
+        {
+            key: "signingSecret",
+            description: "Slack Signing Secret from Basic Information > App Credentials",
+            required: true,
+        },
         { key: "allowedChannelIds", description: "Only respond in these channel IDs (security)" },
         { key: "enabled", description: "Enable/disable Slack integration" },
     ],
@@ -38,11 +50,44 @@ export const PROVIDER_HINTS = {
         { key: "enabled", description: "Enable/disable Telegram integration" },
     ],
     discord: [
-        { key: "botToken", description: "Discord Bot Token from Developer Portal > Bot > Token", required: true },
+        {
+            key: "botToken",
+            description: "Discord Bot Token from Developer Portal > Bot > Token",
+            required: true,
+        },
         { key: "allowedGuildIds", description: "Only respond in these server/guild IDs (security)" },
         { key: "allowedChannelIds", description: "Only respond in these channel IDs (security)" },
         { key: "enabled", description: "Enable/disable Discord integration" },
     ],
+    // LLM provider hints
+    anthropic: [
+        { key: "type", description: "Provider type (anthropic)", required: true },
+        {
+            key: "model",
+            description: "Model name (e.g., claude-sonnet-4-20250514, claude-opus-4-20250514)",
+            required: true,
+        },
+        { key: "apiKey", description: "API key (defaults to ANTHROPIC_API_KEY env var)" },
+        { key: "baseUrl", description: "Custom API base URL (optional)" },
+    ],
+    openai: [
+        { key: "type", description: "Provider type (openai)", required: true },
+        { key: "model", description: "Model name (e.g., gpt-4o, gpt-4-turbo, gpt-3.5-turbo)", required: true },
+        { key: "apiKey", description: "API key (defaults to OPENAI_API_KEY env var)" },
+        { key: "baseUrl", description: "Custom API base URL (for OpenAI-compatible services)" },
+    ],
+    ollama: [
+        { key: "type", description: "Provider type (ollama)", required: true },
+        { key: "model", description: "Model name (e.g., llama3, mistral, codellama)", required: true },
+        { key: "baseUrl", description: "Ollama server URL (default: http://localhost:11434)" },
+    ],
+    // Generic LLM provider hint for unknown providers
+    llmprovider: [
+        { key: "type", description: "Provider type (anthropic, openai, or ollama)", required: true },
+        { key: "model", description: "Model name", required: true },
+        { key: "apiKey", description: "API key (optional, uses env var if not set)" },
+        { key: "baseUrl", description: "Custom API base URL (optional)" },
+    ],
 };
 /**
  * KeyValueEditor component for editing key-value pairs with provider-specific hints.
@@ -64,7 +109,7 @@ export function KeyValueEditor({ label, entries, onConfirm, onCancel, isFocused
     }, [providerName]);
     // Get hints that are not already in entries
     const availableHints = useMemo(() => {
-        return providerHints.filter(hint => !(hint.key in editEntries));
+        return providerHints.filter((hint) => !(hint.key in editEntries));
     }, [providerHints, editEntries]);
     // Get sorted keys for consistent ordering
     const keys = Object.keys(editEntries).sort();
@@ -263,17 +308,17 @@ export function KeyValueEditor({ label, entries, onConfirm, onCancel, isFocused
     // 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);
+        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));
+    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) => {
+    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);
+                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" })] })] }));
 }

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

@@ -0,0 +1,22 @@
+import React from "react";
+import type { LLMProvidersConfig } from "../../utils/config.js";
+export interface LLMProvidersEditorProps {
+    /** The label to display for this field */
+    label: string;
+    /** The current LLM providers config */
+    providers: LLMProvidersConfig;
+    /** Called when the user confirms the edit */
+    onConfirm: (newProviders: LLMProvidersConfig) => 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;
+}
+/**
+ * LLMProvidersEditor component for editing LLM provider configurations.
+ * Provides a user-friendly interface for adding, editing, and removing LLM providers.
+ */
+export declare function LLMProvidersEditor({ label, providers, onConfirm, onCancel, isFocused, maxHeight, }: LLMProvidersEditorProps): React.ReactElement;
+export default LLMProvidersEditor;

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;