ralph-cli-sandboxed 0.3.0 → 0.4.0

package/dist/tui/components/EditorPanel.js

@@ -0,0 +1,232 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import { CONFIG_SECTIONS } from "./SectionNav.js";
+import { getFieldErrors, hasFieldError } from "../utils/validation.js";
+/**
+ * Get the value at a dot-notation path from an object.
+ */
+export function getValueAtPath(obj, path) {
+    const parts = path.split(".");
+    let current = obj;
+    for (const part of parts) {
+        if (current === null || current === undefined) {
+            return undefined;
+        }
+        if (typeof current === "object") {
+            current = current[part];
+        }
+        else {
+            return undefined;
+        }
+    }
+    return current;
+}
+/**
+ * Determine the type of a field based on its current value.
+ */
+export function inferFieldType(value) {
+    if (value === null || value === undefined) {
+        return "unknown";
+    }
+    if (typeof value === "string") {
+        return "string";
+    }
+    if (typeof value === "boolean") {
+        return "boolean";
+    }
+    if (typeof value === "number") {
+        return "number";
+    }
+    if (Array.isArray(value)) {
+        return "array";
+    }
+    if (typeof value === "object") {
+        return "object";
+    }
+    return "unknown";
+}
+/**
+ * Get the display value for a field.
+ */
+function getDisplayValue(value, type) {
+    if (value === undefined || value === null) {
+        return "(not set)";
+    }
+    switch (type) {
+        case "string":
+            return value || "(empty)";
+        case "boolean":
+            return value ? "true" : "false";
+        case "number":
+            return String(value);
+        case "array":
+            const arr = value;
+            return `[${arr.length} items]`;
+        case "object":
+            const keys = Object.keys(value);
+            return `{${keys.length} keys}`;
+        default:
+            return String(value);
+    }
+}
+/**
+ * Convert a field path to a human-readable label.
+ */
+function pathToLabel(path) {
+    const parts = path.split(".");
+    const lastPart = parts[parts.length - 1];
+    // Convert camelCase to Title Case with spaces
+    return lastPart
+        .replace(/([A-Z])/g, " $1")
+        .replace(/^./, (str) => str.toUpperCase())
+        .trim();
+}
+/**
+ * EditorPanel component displays fields for the selected config section.
+ * It shows a breadcrumb of the current path and lists editable fields.
+ * Supports scrolling for long content with Page Up/Down and scroll indicators.
+ */
+export function EditorPanel({ config, selectedSection, selectedField, onSelectField, onBack, isFocused = true, validationErrors = [], maxHeight = 12, }) {
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    // Get the current section definition
+    const currentSection = useMemo(() => {
+        return CONFIG_SECTIONS.find((s) => s.id === selectedSection);
+    }, [selectedSection]);
+    // Build field schemas from section definition
+    const fields = useMemo(() => {
+        if (!currentSection || !config) {
+            return [];
+        }
+        return currentSection.fields.map((fieldPath) => {
+            const value = getValueAtPath(config, fieldPath);
+            const type = inferFieldType(value);
+            return {
+                path: fieldPath,
+                label: pathToLabel(fieldPath),
+                type,
+            };
+        });
+    }, [currentSection, config]);
+    const totalFields = fields.length;
+    // Reset highlighted index and scroll when section changes
+    useEffect(() => {
+        setHighlightedIndex(0);
+        setScrollOffset(0);
+    }, [selectedSection]);
+    // 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 : totalFields - 1));
+    }, [totalFields]);
+    const handleNavigateDown = useCallback(() => {
+        setHighlightedIndex((prev) => (prev < totalFields - 1 ? prev + 1 : 0));
+    }, [totalFields]);
+    const handlePageUp = useCallback(() => {
+        const newIndex = Math.max(0, highlightedIndex - maxHeight);
+        setHighlightedIndex(newIndex);
+    }, [highlightedIndex, maxHeight]);
+    const handlePageDown = useCallback(() => {
+        const newIndex = Math.min(totalFields - 1, highlightedIndex + maxHeight);
+        setHighlightedIndex(newIndex);
+    }, [highlightedIndex, maxHeight, totalFields]);
+    const handleSelect = useCallback(() => {
+        const field = fields[highlightedIndex];
+        if (field) {
+            onSelectField(field.path, false);
+        }
+    }, [highlightedIndex, fields, onSelectField]);
+    // Handle selecting field with JSON editor
+    const handleSelectJson = useCallback(() => {
+        const field = fields[highlightedIndex];
+        if (field) {
+            // JSON editor is useful for arrays, objects, and unknown types
+            const isComplexType = field.type === "array" || field.type === "object" || field.type === "unknown";
+            onSelectField(field.path, isComplexType);
+        }
+    }, [highlightedIndex, fields, onSelectField]);
+    // 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.pageUp) {
+            handlePageUp();
+        }
+        else if (key.pageDown) {
+            handlePageDown();
+        }
+        else if (key.return) {
+            handleSelect();
+        }
+        else if (input === "J") {
+            // J (uppercase) to edit as JSON
+            handleSelectJson();
+        }
+        else if (key.escape) {
+            onBack();
+        }
+    }, { isActive: isFocused });
+    // Build breadcrumb path
+    const breadcrumb = useMemo(() => {
+        const parts = [currentSection?.label || selectedSection];
+        if (selectedField) {
+            // Add nested path components
+            const fieldParts = selectedField.split(".");
+            // Skip the first part if it matches section (e.g., "docker" in "docker.ports")
+            const startIdx = fieldParts[0] === selectedSection ? 1 : 0;
+            for (let i = startIdx; i < fieldParts.length; i++) {
+                parts.push(pathToLabel(fieldParts[i]));
+            }
+        }
+        return parts.join(" > ");
+    }, [currentSection, selectedSection, selectedField]);
+    // Calculate visible fields based on scroll offset
+    const visibleFields = useMemo(() => {
+        const endIndex = Math.min(scrollOffset + maxHeight, totalFields);
+        return fields.slice(scrollOffset, endIndex);
+    }, [fields, scrollOffset, maxHeight, totalFields]);
+    // Check if we have overflow
+    const canScrollUp = scrollOffset > 0;
+    const canScrollDown = scrollOffset + maxHeight < totalFields;
+    const hasOverflow = totalFields > maxHeight;
+    // Render loading state
+    if (!config) {
+        return (_jsx(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, flexGrow: 1, children: _jsx(Text, { dimColor: true, children: "Loading configuration..." }) }));
+    }
+    // Render empty section
+    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) => {
+                const actualIndex = fields.findIndex((f) => f.path === field.path);
+                const isHighlighted = actualIndex === highlightedIndex;
+                const value = getValueAtPath(config, field.path);
+                const displayValue = getDisplayValue(value, field.type);
+                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"
+                                : 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));
+            }), 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

@@ -0,0 +1,13 @@
+import React from "react";
+export interface HelpPanelProps {
+    /** Whether the help panel is visible */
+    visible: boolean;
+    /** Callback to close the help panel */
+    onClose: () => void;
+}
+/**
+ * HelpPanel displays all keyboard shortcuts for the config editor.
+ * Toggle with the ? key.
+ */
+export declare function HelpPanel({ visible, onClose, }: HelpPanelProps): React.ReactElement | null;
+export default HelpPanel;

package/dist/tui/components/HelpPanel.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from "ink";
+/**
+ * All keyboard shortcuts organized by category.
+ */
+const SHORTCUT_GROUPS = [
+    {
+        title: "Navigation",
+        shortcuts: [
+            { keys: "j / ↓", description: "Move down" },
+            { keys: "k / ↑", description: "Move up" },
+            { keys: "h / ←", description: "Move to nav panel" },
+            { keys: "l / →", description: "Move to editor panel" },
+            { keys: "PgUp / PgDn", description: "Scroll page up/down" },
+            { keys: "Enter", description: "Select / Edit" },
+            { keys: "J", description: "Edit as JSON (complex fields)" },
+            { keys: "Esc", description: "Go back / Cancel" },
+        ],
+    },
+    {
+        title: "Actions",
+        shortcuts: [
+            { keys: "S", description: "Save configuration" },
+            { keys: "Q", description: "Quit editor" },
+            { keys: "Tab", description: "Toggle JSON preview" },
+            { keys: "p", description: "Open presets (Chat/Notifications)" },
+            { keys: "?", description: "Toggle this help panel" },
+        ],
+    },
+    {
+        title: "JSON Editor",
+        shortcuts: [
+            { keys: "e / Enter", description: "Enter edit mode" },
+            { keys: "s", description: "Save changes" },
+            { keys: "c", description: "Copy to clipboard" },
+            { keys: "f", description: "Format JSON" },
+            { keys: "j/k", description: "Scroll preview" },
+            { keys: "PgUp / PgDn", description: "Page scroll" },
+            { keys: "Esc", description: "Cancel" },
+        ],
+    },
+    {
+        title: "Array/Object Editor",
+        shortcuts: [
+            { keys: "e / Enter", description: "Edit selected item" },
+            { keys: "d / Delete", description: "Delete item/entry" },
+            { keys: "Space / Tab", description: "Expand (objects)" },
+            { keys: "J/K (Shift)", description: "Reorder (arrays)" },
+            { keys: "s", description: "Save changes" },
+        ],
+    },
+];
+/**
+ * HelpPanel displays all keyboard shortcuts for the config editor.
+ * Toggle with the ? key.
+ */
+export function HelpPanel({ visible, onClose, }) {
+    // Handle keyboard input to close help
+    useInput((input, key) => {
+        if (input === "?" || key.escape) {
+            onClose();
+        }
+    }, { isActive: visible });
+    if (!visible) {
+        return null;
+    }
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "double", borderColor: "cyan", paddingX: 2, paddingY: 1, children: [_jsx(Box, { marginBottom: 1, justifyContent: "center", children: _jsx(Text, { bold: true, color: "cyan", children: "Keyboard Shortcuts" }) }), _jsx(Box, { flexDirection: "row", gap: 4, children: SHORTCUT_GROUPS.map((group, groupIndex) => (_jsxs(Box, { flexDirection: "column", marginRight: 2, children: [_jsx(Text, { bold: true, color: "yellow", underline: true, children: group.title }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: group.shortcuts.map((shortcut, index) => (_jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { color: "green", children: shortcut.keys }) }), _jsx(Text, { children: shortcut.description })] }, index))) })] }, groupIndex))) }), _jsx(Box, { marginTop: 1, justifyContent: "center", children: _jsx(Text, { dimColor: true, children: "Press ? or Esc to close" }) })] }));
+}
+export default HelpPanel;

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

@@ -0,0 +1,24 @@
+import React from "react";
+export interface JsonSnippetEditorProps {
+    /** The label to display for this field */
+    label: string;
+    /** The current JSON value (will be stringified for editing) */
+    value: unknown;
+    /** Called when the user confirms the edit */
+    onConfirm: (newValue: unknown) => void;
+    /** Called when the user cancels the edit (Esc) */
+    onCancel: () => void;
+    /** Whether this editor has focus */
+    isFocused?: boolean;
+    /** Maximum height for the content area (for scrolling) */
+    maxHeight?: number;
+    /** Maximum width for the preview (terminal columns) */
+    maxWidth?: number;
+}
+/**
+ * JsonSnippetEditor component for editing complex nested JSON sections.
+ * Supports copy/paste and live JSON validation with syntax highlighting.
+ * Used for MCP servers, actions, skills, and other complex configs.
+ */
+export declare function JsonSnippetEditor({ label, value, onConfirm, onCancel, isFocused, maxHeight, maxWidth, }: JsonSnippetEditorProps): React.ReactElement;
+export default JsonSnippetEditor;