ralph-cli-sandboxed 0.3.0 → 0.4.0

package/dist/tui/components/JsonSnippetEditor.js

@@ -0,0 +1,380 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+/**
+ * Parse JSON with detailed error information including line and column.
+ */
+function parseJsonWithLineInfo(jsonStr) {
+    try {
+        const value = JSON.parse(jsonStr);
+        return { value };
+    }
+    catch (err) {
+        const message = err instanceof Error ? err.message : "Invalid JSON";
+        // Try to extract line/column from error message
+        // Format: "... at position N" or "... at line X column Y"
+        const posMatch = message.match(/at position (\d+)/);
+        const lineColMatch = message.match(/at line (\d+) column (\d+)/);
+        if (lineColMatch) {
+            return {
+                error: {
+                    message: message.replace(/at line \d+ column \d+/, "").trim(),
+                    line: parseInt(lineColMatch[1], 10),
+                    column: parseInt(lineColMatch[2], 10),
+                },
+            };
+        }
+        if (posMatch) {
+            const position = parseInt(posMatch[1], 10);
+            // Calculate line and column from position
+            const lines = jsonStr.substring(0, position).split("\n");
+            const line = lines.length;
+            const column = lines[lines.length - 1].length + 1;
+            return {
+                error: {
+                    message: message.replace(/at position \d+/, "").trim(),
+                    line,
+                    column,
+                },
+            };
+        }
+        return { error: { message } };
+    }
+}
+/**
+ * Format JSON with indentation for display.
+ */
+function formatJson(value) {
+    if (value === undefined) {
+        return "null";
+    }
+    return JSON.stringify(value, null, 2);
+}
+/**
+ * Validate JSON structure against known config schemas.
+ * Returns warnings for common issues.
+ */
+function validateJsonStructure(value, label) {
+    const warnings = [];
+    if (value === null || value === undefined) {
+        return warnings;
+    }
+    // MCP Servers validation
+    if (label.toLowerCase().includes("mcp") && typeof value === "object" && !Array.isArray(value)) {
+        const servers = value;
+        for (const [name, config] of Object.entries(servers)) {
+            if (typeof config !== "object" || config === null) {
+                warnings.push(`Server "${name}": expected object with command field`);
+                continue;
+            }
+            const serverConfig = config;
+            if (!serverConfig.command || typeof serverConfig.command !== "string") {
+                warnings.push(`Server "${name}": missing or invalid "command" field`);
+            }
+            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))) {
+                warnings.push(`Server "${name}": "env" should be an object`);
+            }
+        }
+    }
+    // Daemon Actions validation
+    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) {
+                warnings.push(`Action "${name}": expected object with command field`);
+                continue;
+            }
+            const actionConfig = config;
+            if (!actionConfig.command || typeof actionConfig.command !== "string") {
+                warnings.push(`Action "${name}": missing or invalid "command" field`);
+            }
+        }
+    }
+    // Skills validation
+    if (label.toLowerCase().includes("skill") && Array.isArray(value)) {
+        for (let i = 0; i < value.length; i++) {
+            const skill = value[i];
+            if (typeof skill !== "object" || skill === null) {
+                warnings.push(`Skill [${i}]: expected object`);
+                continue;
+            }
+            const skillConfig = skill;
+            if (!skillConfig.name || typeof skillConfig.name !== "string") {
+                warnings.push(`Skill [${i}]: missing or invalid "name" field`);
+            }
+            if (!skillConfig.description || typeof skillConfig.description !== "string") {
+                warnings.push(`Skill [${i}]: missing or invalid "description" field`);
+            }
+            if (!skillConfig.instructions || typeof skillConfig.instructions !== "string") {
+                warnings.push(`Skill [${i}]: missing or invalid "instructions" field`);
+            }
+        }
+    }
+    // Daemon Events validation
+    if (label.toLowerCase().includes("event") && typeof value === "object" && !Array.isArray(value)) {
+        const validEventTypes = ["task_complete", "ralph_complete", "iteration_complete", "error"];
+        const events = value;
+        for (const [eventType, handlers] of Object.entries(events)) {
+            if (!validEventTypes.includes(eventType)) {
+                warnings.push(`Unknown event type: "${eventType}". Valid: ${validEventTypes.join(", ")}`);
+            }
+            if (!Array.isArray(handlers)) {
+                warnings.push(`Event "${eventType}": handlers should be an array`);
+                continue;
+            }
+            for (let i = 0; i < handlers.length; i++) {
+                const handler = handlers[i];
+                if (typeof handler !== "object" || handler === null) {
+                    warnings.push(`Event "${eventType}"[${i}]: expected object`);
+                    continue;
+                }
+                const eventConfig = handler;
+                if (!eventConfig.action || typeof eventConfig.action !== "string") {
+                    warnings.push(`Event "${eventType}"[${i}]: missing or invalid "action" field`);
+                }
+            }
+        }
+    }
+    return warnings;
+}
+/**
+ * Truncate a JSON string value if it's too long.
+ * Keeps the quotes and adds "..." before the closing quote.
+ */
+function truncateJsonString(str, maxLen) {
+    // str includes the surrounding quotes, so we need to account for that
+    if (str.length <= maxLen) {
+        return str;
+    }
+    // Truncate the content (excluding quotes) and add ellipsis
+    // Leave room for the ellipsis (3 chars) and closing quote
+    const truncated = str.slice(0, maxLen - 4) + '..."';
+    return truncated;
+}
+/**
+ * Simple syntax highlighting for JSON preview.
+ */
+function highlightJson(json, maxLines, maxLineWidth = 60) {
+    const lines = json.split("\n");
+    const displayLines = lines.slice(0, maxLines);
+    const hasMore = lines.length > maxLines;
+    const elements = [];
+    // Calculate max string length based on available width (account for line number, indentation)
+    const maxStringLen = Math.max(20, Math.min(50, maxLineWidth - 15));
+    for (let i = 0; i < displayLines.length; i++) {
+        const line = displayLines[i];
+        const lineNum = String(i + 1).padStart(3, " ");
+        // Simple tokenization for highlighting
+        const tokens = [];
+        let remaining = line;
+        let tokenKey = 0;
+        let lineLength = 0;
+        const effectiveMaxWidth = maxLineWidth - 6; // Account for line number prefix "123 "
+        while (remaining.length > 0 && lineLength < effectiveMaxWidth) {
+            // Match string (key or value)
+            const stringMatch = remaining.match(/^("(?:[^"\\]|\\.)*")/);
+            if (stringMatch) {
+                let str = stringMatch[1];
+                // Check if this is a key (followed by :)
+                const afterStr = remaining.slice(str.length).trim();
+                const isKey = afterStr.startsWith(":");
+                // Truncate long string values (not keys)
+                if (!isKey && str.length > maxStringLen) {
+                    str = truncateJsonString(str, maxStringLen);
+                }
+                tokens.push(_jsx(Text, { color: isKey ? "cyan" : "green", children: str }, tokenKey++));
+                lineLength += str.length;
+                remaining = remaining.slice(stringMatch[1].length);
+                continue;
+            }
+            // Match number
+            const numMatch = remaining.match(/^(-?\d+\.?\d*(?:[eE][+-]?\d+)?)/);
+            if (numMatch) {
+                tokens.push(_jsx(Text, { color: "yellow", children: numMatch[1] }, tokenKey++));
+                lineLength += numMatch[1].length;
+                remaining = remaining.slice(numMatch[1].length);
+                continue;
+            }
+            // Match boolean or null
+            const boolNullMatch = remaining.match(/^(true|false|null)/);
+            if (boolNullMatch) {
+                tokens.push(_jsx(Text, { color: "magenta", children: boolNullMatch[1] }, tokenKey++));
+                lineLength += boolNullMatch[1].length;
+                remaining = remaining.slice(boolNullMatch[1].length);
+                continue;
+            }
+            // Match whitespace or punctuation
+            const otherMatch = remaining.match(/^([\s{}[\]:,]+)/);
+            if (otherMatch) {
+                tokens.push(_jsx(Text, { dimColor: true, children: otherMatch[1] }, tokenKey++));
+                lineLength += otherMatch[1].length;
+                remaining = remaining.slice(otherMatch[1].length);
+                continue;
+            }
+            // Fallback: single character
+            tokens.push(_jsx(Text, { children: remaining[0] }, tokenKey++));
+            lineLength += 1;
+            remaining = remaining.slice(1);
+        }
+        // If line was truncated due to length
+        if (remaining.length > 0) {
+            tokens.push(_jsx(Text, { dimColor: true, children: "..." }, tokenKey++));
+        }
+        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"));
+    }
+    return elements;
+}
+/**
+ * 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 function JsonSnippetEditor({ label, value, onConfirm, onCancel, isFocused = true, maxHeight = 15, maxWidth = 80, }) {
+    // Format the value as JSON for editing
+    const initialJson = useMemo(() => formatJson(value), [value]);
+    const [mode, setMode] = useState("view");
+    const [editText, setEditText] = useState(initialJson);
+    const [parseError, setParseError] = useState(null);
+    const [warnings, setWarnings] = useState([]);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const [copied, setCopied] = useState(false);
+    // Validate JSON as user types
+    useEffect(() => {
+        const result = parseJsonWithLineInfo(editText);
+        if (result.error) {
+            setParseError(result.error);
+            setWarnings([]);
+        }
+        else {
+            setParseError(null);
+            const structureWarnings = validateJsonStructure(result.value, label);
+            setWarnings(structureWarnings);
+        }
+    }, [editText, label]);
+    // Reset edit text when value changes externally
+    useEffect(() => {
+        const newJson = formatJson(value);
+        if (mode === "view") {
+            setEditText(newJson);
+        }
+    }, [value, mode]);
+    // Calculate content lines for scrolling
+    const contentLines = useMemo(() => {
+        return editText.split("\n").length;
+    }, [editText]);
+    // Max visible lines for preview (accounting for header, errors, footer)
+    const previewMaxLines = Math.max(3, maxHeight - 6);
+    // Handle saving
+    const handleSave = useCallback(() => {
+        const result = parseJsonWithLineInfo(editText);
+        if (result.error) {
+            // Cannot save with parse errors
+            return;
+        }
+        onConfirm(result.value);
+    }, [editText, onConfirm]);
+    // Handle entering edit mode
+    const handleEdit = useCallback(() => {
+        setMode("edit");
+    }, []);
+    // Handle canceling edit
+    const handleCancelEdit = useCallback(() => {
+        setEditText(initialJson);
+        setMode("view");
+        setParseError(null);
+        setWarnings([]);
+    }, [initialJson]);
+    // Handle copying to clipboard
+    const handleCopy = useCallback(() => {
+        // Use process.stdout.write with OSC 52 escape sequence for clipboard
+        // This works in most modern terminals
+        const base64 = Buffer.from(editText).toString("base64");
+        process.stdout.write(`\x1b]52;c;${base64}\x07`);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+    }, [editText]);
+    // Handle formatting JSON
+    const handleFormat = useCallback(() => {
+        const result = parseJsonWithLineInfo(editText);
+        if (!result.error && result.value !== undefined) {
+            setEditText(formatJson(result.value));
+        }
+    }, [editText]);
+    // Scroll handlers
+    const handleScrollUp = useCallback(() => {
+        setScrollOffset((prev) => Math.max(0, prev - 1));
+    }, []);
+    const handleScrollDown = useCallback(() => {
+        setScrollOffset((prev) => Math.min(contentLines - previewMaxLines, prev + 1));
+    }, [contentLines, previewMaxLines]);
+    const handlePageUp = useCallback(() => {
+        setScrollOffset((prev) => Math.max(0, prev - previewMaxLines));
+    }, [previewMaxLines]);
+    const handlePageDown = useCallback(() => {
+        setScrollOffset((prev) => Math.min(contentLines - previewMaxLines, prev + previewMaxLines));
+    }, [contentLines, previewMaxLines]);
+    // Handle keyboard input for view mode
+    useInput((input, key) => {
+        if (!isFocused || mode !== "view")
+            return;
+        if (key.return || input === "e") {
+            handleEdit();
+        }
+        else if (input === "s" || input === "S") {
+            handleSave();
+        }
+        else if (key.escape) {
+            onCancel();
+        }
+        else if (input === "c" || input === "C") {
+            handleCopy();
+        }
+        else if (input === "f" || input === "F") {
+            handleFormat();
+        }
+        else if (input === "j" || key.downArrow) {
+            handleScrollDown();
+        }
+        else if (input === "k" || key.upArrow) {
+            handleScrollUp();
+        }
+        else if (key.pageUp) {
+            handlePageUp();
+        }
+        else if (key.pageDown) {
+            handlePageDown();
+        }
+    }, { isActive: isFocused && mode === "view" });
+    // Handle keyboard input for edit mode
+    useInput((_input, key) => {
+        if (!isFocused || mode !== "edit")
+            return;
+        if (key.escape) {
+            handleCancelEdit();
+        }
+    }, { isActive: isFocused && mode === "edit" });
+    // Count errors and warnings for status bar
+    const errorCount = parseError ? 1 : 0;
+    const warningCount = warnings.length;
+    // Render edit mode with text input
+    if (mode === "edit") {
+        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 JSON: ", label] }) }), _jsxs(Box, { children: [_jsxs(Text, { dimColor: true, children: [">", " "] }), _jsx(TextInput, { value: editText, onChange: setEditText, onSubmit: handleSave, focus: isFocused })] }), parseError && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "red", bold: true, children: "Syntax Error:" }), _jsxs(Text, { color: "red", children: [parseError.line && parseError.column
+                                    ? `Line ${parseError.line}, Column ${parseError.column}: `
+                                    : "", parseError.message] })] })), _jsx(Box, { marginTop: 1, children: errorCount > 0 ? (_jsxs(Text, { color: "red", children: [errorCount, " error", errorCount > 1 ? "s" : ""] })) : warningCount > 0 ? (_jsxs(Text, { color: "yellow", children: [warningCount, " warning", warningCount > 1 ? "s" : ""] })) : (_jsx(Text, { color: "green", children: "Valid JSON" })) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: save (if valid) | Esc: cancel" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "Tip: Paste multi-line JSON, then press Enter" }) })] }));
+    }
+    // Render view mode with syntax-highlighted preview
+    // 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
+                                ? `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" })] })] }));
+}
+export default JsonSnippetEditor;

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

@@ -0,0 +1,34 @@
+import React from "react";
+/**
+ * Provider-specific hint configuration.
+ * Shows common keys and their descriptions based on the notification provider.
+ */
+export interface ProviderHint {
+    key: string;
+    description: string;
+    required?: boolean;
+}
+/**
+ * Built-in hints for known notification providers.
+ */
+export declare const PROVIDER_HINTS: Record<string, ProviderHint[]>;
+export interface KeyValueEditorProps {
+    /** The label to display for this object field */
+    label: string;
+    /** The current object entries as key-value pairs */
+    entries: Record<string, string>;
+    /** Called when the user confirms the edit */
+    onConfirm: (newEntries: Record<string, string>) => void;
+    /** Called when the user cancels the edit (Esc) */
+    onCancel: () => void;
+    /** Whether this editor has focus */
+    isFocused?: boolean;
+    /** Provider name for showing hints (e.g., "ntfy", "pushover", "gotify") */
+    providerName?: string;
+}
+/**
+ * KeyValueEditor component for editing key-value pairs with provider-specific hints.
+ * Enhanced version of ObjectEditor with support for common key suggestions.
+ */
+export declare function KeyValueEditor({ label, entries, onConfirm, onCancel, isFocused, providerName, }: KeyValueEditorProps): React.ReactElement;
+export default KeyValueEditor;