ralph-cli-sandboxed 0.3.0 → 0.4.0

package/dist/tui/components/Preview.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Box, Text } from "ink";
+import { CONFIG_SECTIONS } from "./SectionNav.js";
+import { getValueAtPath } from "./EditorPanel.js";
+/**
+ * Get the color for a token type.
+ */
+function getTokenColor(type) {
+    switch (type) {
+        case "key":
+            return "cyan";
+        case "string":
+            return "green";
+        case "number":
+            return "yellow";
+        case "boolean":
+            return "magenta";
+        case "null":
+            return "gray";
+        case "bracket":
+            return undefined; // default color
+        case "colon":
+            return "gray";
+        case "comma":
+            return "gray";
+        default:
+            return undefined;
+    }
+}
+/**
+ * Parse JSON string into highlighted tokens.
+ * Returns an array of lines, each containing tokens with type information.
+ */
+function highlightJson(jsonString) {
+    const lines = [];
+    const rawLines = jsonString.split("\n");
+    for (const line of rawLines) {
+        const tokens = [];
+        let remaining = line;
+        let indent = 0;
+        // Count leading spaces for indent
+        const leadingSpaces = line.match(/^(\s*)/);
+        if (leadingSpaces) {
+            indent = leadingSpaces[1].length;
+            remaining = line.slice(indent);
+        }
+        // Tokenize the line
+        while (remaining.length > 0) {
+            // Skip whitespace
+            const wsMatch = remaining.match(/^(\s+)/);
+            if (wsMatch) {
+                remaining = remaining.slice(wsMatch[1].length);
+                continue;
+            }
+            // Match key (quoted string followed by colon)
+            const keyMatch = remaining.match(/^"([^"\\]|\\.)*"(?=\s*:)/);
+            if (keyMatch) {
+                tokens.push({ type: "key", value: keyMatch[0] });
+                remaining = remaining.slice(keyMatch[0].length);
+                continue;
+            }
+            // Match string value
+            const stringMatch = remaining.match(/^"([^"\\]|\\.)*"/);
+            if (stringMatch) {
+                tokens.push({ type: "string", value: stringMatch[0] });
+                remaining = remaining.slice(stringMatch[0].length);
+                continue;
+            }
+            // Match number
+            const numberMatch = remaining.match(/^-?\d+(\.\d+)?([eE][+-]?\d+)?/);
+            if (numberMatch) {
+                tokens.push({ type: "number", value: numberMatch[0] });
+                remaining = remaining.slice(numberMatch[0].length);
+                continue;
+            }
+            // Match boolean
+            const boolMatch = remaining.match(/^(true|false)/);
+            if (boolMatch) {
+                tokens.push({ type: "boolean", value: boolMatch[0] });
+                remaining = remaining.slice(boolMatch[0].length);
+                continue;
+            }
+            // Match null
+            const nullMatch = remaining.match(/^null/);
+            if (nullMatch) {
+                tokens.push({ type: "null", value: nullMatch[0] });
+                remaining = remaining.slice(nullMatch[0].length);
+                continue;
+            }
+            // Match brackets
+            const bracketMatch = remaining.match(/^[\[\]{}]/);
+            if (bracketMatch) {
+                tokens.push({ type: "bracket", value: bracketMatch[0] });
+                remaining = remaining.slice(1);
+                continue;
+            }
+            // Match colon
+            if (remaining.startsWith(":")) {
+                tokens.push({ type: "colon", value: ":" });
+                remaining = remaining.slice(1);
+                continue;
+            }
+            // Match comma
+            if (remaining.startsWith(",")) {
+                tokens.push({ type: "comma", value: "," });
+                remaining = remaining.slice(1);
+                continue;
+            }
+            // Unknown character - add as-is
+            tokens.push({ type: "bracket", value: remaining[0] });
+            remaining = remaining.slice(1);
+        }
+        lines.push({ tokens, indent });
+    }
+    return lines;
+}
+/**
+ * Render a single highlighted line.
+ */
+function HighlightedLineComponent({ line }) {
+    return (_jsxs(Box, { children: [_jsx(Text, { children: " ".repeat(line.indent) }), line.tokens.map((token, index) => (_jsx(Text, { color: getTokenColor(token.type), children: token.value }, index)))] }));
+}
+/**
+ * Preview component displays the current section's config as syntax-highlighted JSON.
+ * Updates live as edits are made.
+ */
+export function Preview({ config, selectedSection, visible = true, maxHeight = 20, }) {
+    // Don't render if not visible
+    if (!visible) {
+        return null;
+    }
+    // Get the current section's data
+    const sectionData = useMemo(() => {
+        if (!config)
+            return null;
+        const section = CONFIG_SECTIONS.find((s) => s.id === selectedSection);
+        if (!section)
+            return null;
+        // Build an object with just the section's fields
+        const data = {};
+        for (const fieldPath of section.fields) {
+            const value = getValueAtPath(config, fieldPath);
+            if (value !== undefined) {
+                // Store with the full path for clarity
+                const parts = fieldPath.split(".");
+                let current = data;
+                for (let i = 0; i < parts.length - 1; i++) {
+                    const part = parts[i];
+                    if (!current[part]) {
+                        current[part] = {};
+                    }
+                    current = current[part];
+                }
+                current[parts[parts.length - 1]] = value;
+            }
+        }
+        return data;
+    }, [config, selectedSection]);
+    // Generate highlighted JSON
+    const highlightedLines = useMemo(() => {
+        if (!sectionData)
+            return [];
+        try {
+            const jsonString = JSON.stringify(sectionData, null, 2);
+            return highlightJson(jsonString);
+        }
+        catch {
+            return [];
+        }
+    }, [sectionData]);
+    // Limit lines if needed
+    const displayLines = useMemo(() => {
+        if (highlightedLines.length <= maxHeight) {
+            return highlightedLines;
+        }
+        // Show first (maxHeight - 1) lines plus a "..." indicator
+        return highlightedLines.slice(0, maxHeight - 1);
+    }, [highlightedLines, maxHeight]);
+    const isOverflowing = highlightedLines.length > maxHeight;
+    // Get section info for header
+    const currentSection = useMemo(() => {
+        return CONFIG_SECTIONS.find((s) => s.id === selectedSection);
+    }, [selectedSection]);
+    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" }) })] }));
+}
+export default Preview;

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

@@ -0,0 +1,38 @@
+import React from "react";
+export interface ScrollableContainerProps {
+    /** The content items to display */
+    children: React.ReactNode[];
+    /** Maximum height in lines (excluding header/footer) */
+    maxHeight: number;
+    /** Current highlighted/selected index (for auto-scrolling to selection) */
+    highlightedIndex?: number;
+    /** Whether this component has focus for keyboard input (for Page Up/Down) */
+    isFocused?: boolean;
+    /** Callback when scroll position changes via Page Up/Down */
+    onScroll?: (direction: "up" | "down", amount: number) => void;
+    /** Header element to display above scrollable content */
+    header?: React.ReactNode;
+    /** Footer element to display below scrollable content */
+    footer?: React.ReactNode;
+    /** Show scroll indicators on the right side */
+    showScrollIndicators?: boolean;
+    /** Border style for the container */
+    borderStyle?: "single" | "double" | "round" | "bold" | "singleDouble" | "doubleSingle" | "classic";
+    /** Border color */
+    borderColor?: string;
+    /** Padding on the X axis */
+    paddingX?: number;
+    /** Width of the container */
+    width?: number;
+    /** Flex grow value */
+    flexGrow?: number;
+}
+/**
+ * ScrollableContainer provides a viewport for content that may overflow.
+ * Features:
+ * - Auto-scroll to keep highlighted item visible
+ * - Page Up/Down keyboard shortcuts for faster scrolling
+ * - Scroll indicators (arrows) when content overflows
+ */
+export declare function ScrollableContainer({ children, maxHeight, highlightedIndex, isFocused, onScroll, header, footer, showScrollIndicators, borderStyle, borderColor, paddingX, width, flexGrow, }: ScrollableContainerProps): React.ReactElement;
+export default ScrollableContainer;

package/dist/tui/components/ScrollableContainer.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+/**
+ * ScrollableContainer provides a viewport for content that may overflow.
+ * Features:
+ * - Auto-scroll to keep highlighted item visible
+ * - Page Up/Down keyboard shortcuts for faster scrolling
+ * - Scroll indicators (arrows) when content overflows
+ */
+export function ScrollableContainer({ children, maxHeight, highlightedIndex = 0, isFocused = true, onScroll, header, footer, showScrollIndicators = true, borderStyle = "single", borderColor = "gray", paddingX = 1, width, flexGrow, }) {
+    const totalItems = children.length;
+    const [scrollOffset, setScrollOffset] = useState(0);
+    // Calculate visible range
+    const visibleItems = useMemo(() => {
+        const startIndex = scrollOffset;
+        const endIndex = Math.min(scrollOffset + maxHeight, totalItems);
+        return children.slice(startIndex, endIndex);
+    }, [children, scrollOffset, maxHeight, totalItems]);
+    // Check if we can scroll
+    const canScrollUp = scrollOffset > 0;
+    const canScrollDown = scrollOffset + maxHeight < totalItems;
+    const hasOverflow = totalItems > maxHeight;
+    // Auto-scroll to keep highlighted item visible
+    useEffect(() => {
+        if (highlightedIndex < scrollOffset) {
+            // Item is above viewport - scroll up
+            setScrollOffset(highlightedIndex);
+        }
+        else if (highlightedIndex >= scrollOffset + maxHeight) {
+            // Item is below viewport - scroll down
+            setScrollOffset(highlightedIndex - maxHeight + 1);
+        }
+    }, [highlightedIndex, scrollOffset, maxHeight]);
+    // Handle Page Up/Down keys
+    const handlePageUp = useCallback(() => {
+        const newOffset = Math.max(0, scrollOffset - maxHeight);
+        setScrollOffset(newOffset);
+        if (onScroll) {
+            onScroll("up", maxHeight);
+        }
+    }, [scrollOffset, maxHeight, onScroll]);
+    const handlePageDown = useCallback(() => {
+        const maxOffset = Math.max(0, totalItems - maxHeight);
+        const newOffset = Math.min(maxOffset, scrollOffset + maxHeight);
+        setScrollOffset(newOffset);
+        if (onScroll) {
+            onScroll("down", maxHeight);
+        }
+    }, [scrollOffset, maxHeight, totalItems, onScroll]);
+    // Handle keyboard input for Page Up/Down
+    useInput((_input, key) => {
+        if (!isFocused)
+            return;
+        if (key.pageUp) {
+            handlePageUp();
+        }
+        else if (key.pageDown) {
+            handlePageDown();
+        }
+    }, { isActive: isFocused });
+    // Build the container with optional scroll indicators
+    const containerProps = {
+        flexDirection: "column",
+        borderStyle,
+        borderColor,
+        paddingX,
+    };
+    if (width !== undefined) {
+        containerProps.width = width;
+    }
+    if (flexGrow !== undefined) {
+        containerProps.flexGrow = flexGrow;
+    }
+    return (_jsxs(Box, { ...containerProps, children: [header, _jsxs(Box, { flexDirection: "column", children: [showScrollIndicators && hasOverflow && (_jsx(Box, { justifyContent: "flex-end", children: _jsx(Text, { color: canScrollUp ? "cyan" : "gray", dimColor: !canScrollUp, children: canScrollUp ? "▲ more" : "" }) })), visibleItems, showScrollIndicators && hasOverflow && (_jsx(Box, { justifyContent: "flex-end", children: _jsx(Text, { color: canScrollDown ? "cyan" : "gray", dimColor: !canScrollDown, children: canScrollDown ? "▼ more" : "" }) }))] }), footer] }));
+}
+export default ScrollableContainer;

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

@@ -0,0 +1,31 @@
+import React from "react";
+/**
+ * Configuration section definition for navigation tree.
+ */
+export interface ConfigSection {
+    id: string;
+    label: string;
+    icon?: string;
+    fields: string[];
+}
+/**
+ * Default sections for ralph configuration.
+ * Each section groups related configuration fields.
+ */
+export declare const CONFIG_SECTIONS: ConfigSection[];
+export interface SectionNavProps {
+    /** Currently selected section ID */
+    selectedSection: string;
+    /** Callback when section is selected */
+    onSelectSection: (sectionId: string) => void;
+    /** Whether this component has focus for keyboard input */
+    isFocused?: boolean;
+    /** Maximum height for the navigation list (for scrolling) */
+    maxHeight?: number;
+}
+/**
+ * SectionNav component provides a vertical navigation menu for config sections.
+ * Supports j/k keyboard navigation, Enter to select, and Page Up/Down for scrolling.
+ */
+export declare function SectionNav({ selectedSection, onSelectSection, isFocused, maxHeight, }: SectionNavProps): React.ReactElement;
+export default SectionNav;

package/dist/tui/components/SectionNav.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+/**
+ * Default sections for ralph configuration.
+ * Each section groups related configuration fields.
+ */
+export const CONFIG_SECTIONS = [
+    {
+        id: "basic",
+        label: "Basic",
+        icon: "⚙",
+        fields: ["language", "checkCommand", "testCommand", "imageName", "technologies", "javaVersion"],
+    },
+    {
+        id: "docker",
+        label: "Docker",
+        icon: "🐳",
+        fields: ["docker.ports", "docker.volumes", "docker.environment", "docker.packages", "docker.git", "docker.buildCommands", "docker.startCommand", "docker.firewall", "docker.autoStart", "docker.restartCount"],
+    },
+    {
+        id: "daemon",
+        label: "Daemon",
+        icon: "👹",
+        fields: ["daemon.enabled", "daemon.actions", "daemon.events"],
+    },
+    {
+        id: "claude",
+        label: "Claude",
+        icon: "🤖",
+        fields: ["claude.mcpServers", "claude.skills"],
+    },
+    {
+        id: "chat",
+        label: "Chat",
+        icon: "💬",
+        fields: ["chat.enabled", "chat.provider", "chat.telegram"],
+    },
+    {
+        id: "notifications",
+        label: "Notifications",
+        icon: "🔔",
+        fields: ["notifications.provider", "notifications.ntfy", "notifications.pushover", "notifications.gotify", "notifications.command", "notifyCommand"],
+    },
+];
+/**
+ * SectionNav component provides a vertical navigation menu for config sections.
+ * Supports j/k keyboard navigation, Enter to select, and Page Up/Down for scrolling.
+ */
+export function SectionNav({ selectedSection, onSelectSection, isFocused = true, maxHeight = 10, }) {
+    const [highlightedIndex, setHighlightedIndex] = useState(() => {
+        const idx = CONFIG_SECTIONS.findIndex((s) => s.id === selectedSection);
+        return idx >= 0 ? idx : 0;
+    });
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const totalSections = CONFIG_SECTIONS.length;
+    // Sync highlighted index when selectedSection changes externally
+    useEffect(() => {
+        const idx = CONFIG_SECTIONS.findIndex((s) => s.id === selectedSection);
+        if (idx >= 0) {
+            setHighlightedIndex(idx);
+        }
+    }, [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]);
+    const handleNavigateUp = useCallback(() => {
+        setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : totalSections - 1));
+    }, [totalSections]);
+    const handleNavigateDown = useCallback(() => {
+        setHighlightedIndex((prev) => (prev < totalSections - 1 ? prev + 1 : 0));
+    }, [totalSections]);
+    const handlePageUp = useCallback(() => {
+        const newIndex = Math.max(0, highlightedIndex - maxHeight);
+        setHighlightedIndex(newIndex);
+    }, [highlightedIndex, maxHeight]);
+    const handlePageDown = useCallback(() => {
+        const newIndex = Math.min(totalSections - 1, highlightedIndex + maxHeight);
+        setHighlightedIndex(newIndex);
+    }, [highlightedIndex, maxHeight, totalSections]);
+    const handleSelect = useCallback(() => {
+        const section = CONFIG_SECTIONS[highlightedIndex];
+        if (section) {
+            onSelectSection(section.id);
+        }
+    }, [highlightedIndex, onSelectSection]);
+    // 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();
+        }
+    }, { isActive: isFocused });
+    // Calculate visible sections based on scroll offset
+    const visibleSections = useMemo(() => {
+        const endIndex = Math.min(scrollOffset + maxHeight, totalSections);
+        return CONFIG_SECTIONS.slice(scrollOffset, endIndex);
+    }, [scrollOffset, maxHeight, totalSections]);
+    // Check if we have overflow
+    const canScrollUp = scrollOffset > 0;
+    const canScrollDown = scrollOffset + maxHeight < totalSections;
+    const hasOverflow = totalSections > maxHeight;
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "Sections" }) }), hasOverflow && (_jsx(Box, { children: _jsx(Text, { color: canScrollUp ? "cyan" : "gray", dimColor: !canScrollUp, children: canScrollUp ? "  ▲ more" : "" }) })), visibleSections.map((section) => {
+                const actualIndex = CONFIG_SECTIONS.findIndex((s) => s.id === section.id);
+                const isHighlighted = actualIndex === highlightedIndex;
+                const isSelected = section.id === selectedSection;
+                return (_jsxs(Box, { children: [_jsx(Text, { color: isHighlighted ? "cyan" : undefined, children: isHighlighted ? "▸ " : "  " }), _jsx(Text, { bold: isSelected, color: isHighlighted ? "cyan" : isSelected ? "green" : undefined, inverse: isHighlighted, children: section.label })] }, section.id));
+            }), hasOverflow && (_jsx(Box, { children: _jsx(Text, { color: canScrollDown ? "cyan" : "gray", dimColor: !canScrollDown, children: canScrollDown ? "  ▼ more" : "" }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "j/k: navigate" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "Enter: select" }) }), hasOverflow && (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: "PgUp/Dn: scroll" }) }))] }));
+}
+export default SectionNav;

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

@@ -0,0 +1,21 @@
+import React from "react";
+export interface StringEditorProps {
+    /** The label to display for this field */
+    label: string;
+    /** The current value of the string */
+    value: string;
+    /** Called when the user confirms the edit (Enter) */
+    onConfirm: (newValue: string) => void;
+    /** Called when the user cancels the edit (Esc) */
+    onCancel: () => void;
+    /** Optional placeholder text */
+    placeholder?: string;
+    /** Whether this editor has focus */
+    isFocused?: boolean;
+}
+/**
+ * StringEditor component provides an inline text editor for string fields.
+ * Uses ink-text-input for text editing with Enter to confirm and Esc to cancel.
+ */
+export declare function StringEditor({ label, value, onConfirm, onCancel, placeholder, isFocused, }: StringEditorProps): React.ReactElement;
+export default StringEditor;

package/dist/tui/components/StringEditor.js

@@ -0,0 +1,29 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+/**
+ * StringEditor component provides an inline text editor for string fields.
+ * Uses ink-text-input for text editing with Enter to confirm and Esc to cancel.
+ */
+export function StringEditor({ label, value, onConfirm, onCancel, placeholder = "", isFocused = true, }) {
+    const [editValue, setEditValue] = useState(value);
+    // Handle text input changes
+    const handleChange = useCallback((newValue) => {
+        setEditValue(newValue);
+    }, []);
+    // Handle submit (Enter key in TextInput)
+    const handleSubmit = useCallback(() => {
+        onConfirm(editValue);
+    }, [editValue, onConfirm]);
+    // Handle keyboard input for Esc key
+    useInput((_input, key) => {
+        if (!isFocused)
+            return;
+        if (key.escape) {
+            onCancel();
+        }
+    }, { isActive: isFocused });
+    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: ", label] }) }), _jsxs(Box, { children: [_jsxs(Text, { dimColor: true, children: [">", " "] }), _jsx(TextInput, { value: editValue, onChange: handleChange, onSubmit: handleSubmit, placeholder: placeholder, focus: isFocused })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: confirm | Esc: cancel" }) })] }));
+}
+export default StringEditor;

package/dist/tui/hooks/useConfig.d.ts

@@ -0,0 +1,16 @@
+import { RalphConfig } from "../../utils/config.js";
+export interface UseConfigResult {
+    config: RalphConfig | null;
+    loading: boolean;
+    error: string | null;
+    hasChanges: boolean;
+    loadConfig: () => void;
+    saveConfig: () => boolean;
+    updateConfig: (updater: (config: RalphConfig) => RalphConfig) => void;
+    resetChanges: () => void;
+}
+/**
+ * React hook for loading and saving ralph configuration.
+ * Provides state management for the config editor with dirty state tracking.
+ */
+export declare function useConfig(): UseConfigResult;

package/dist/tui/hooks/useConfig.js

@@ -0,0 +1,89 @@
+import { useState, useCallback, useEffect } from "react";
+import { readFileSync, writeFileSync, existsSync } from "fs";
+import { getPaths } from "../../utils/config.js";
+/**
+ * React hook for loading and saving ralph configuration.
+ * Provides state management for the config editor with dirty state tracking.
+ */
+export function useConfig() {
+    const [config, setConfig] = useState(null);
+    const [originalConfig, setOriginalConfig] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [hasChanges, setHasChanges] = useState(false);
+    const loadConfigFromFile = useCallback(() => {
+        setLoading(true);
+        setError(null);
+        try {
+            const paths = getPaths();
+            if (!existsSync(paths.config)) {
+                throw new Error(".ralph/config.json not found. Run 'ralph init' first.");
+            }
+            const content = readFileSync(paths.config, "utf-8");
+            const parsedConfig = JSON.parse(content);
+            setConfig(parsedConfig);
+            setOriginalConfig(JSON.parse(content)); // Deep copy for comparison
+            setHasChanges(false);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : "Unknown error loading config";
+            setError(message);
+            setConfig(null);
+            setOriginalConfig(null);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    const saveConfig = useCallback(() => {
+        if (!config) {
+            setError("No config to save");
+            return false;
+        }
+        try {
+            const paths = getPaths();
+            const jsonContent = JSON.stringify(config, null, 2);
+            writeFileSync(paths.config, jsonContent, "utf-8");
+            // Update original config after successful save
+            setOriginalConfig(JSON.parse(jsonContent));
+            setHasChanges(false);
+            setError(null);
+            return true;
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : "Unknown error saving config";
+            setError(message);
+            return false;
+        }
+    }, [config]);
+    const updateConfig = useCallback((updater) => {
+        setConfig((currentConfig) => {
+            if (!currentConfig)
+                return null;
+            const newConfig = updater(currentConfig);
+            return newConfig;
+        });
+        setHasChanges(true);
+    }, []);
+    const resetChanges = useCallback(() => {
+        if (originalConfig) {
+            // Deep copy to avoid reference issues
+            setConfig(JSON.parse(JSON.stringify(originalConfig)));
+            setHasChanges(false);
+        }
+    }, [originalConfig]);
+    // Load config on mount
+    useEffect(() => {
+        loadConfigFromFile();
+    }, [loadConfigFromFile]);
+    return {
+        config,
+        loading,
+        error,
+        hasChanges,
+        loadConfig: loadConfigFromFile,
+        saveConfig,
+        updateConfig,
+        resetChanges,
+    };
+}

package/dist/tui/hooks/useTerminalSize.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Terminal size dimensions.
+ */
+export interface TerminalSize {
+    columns: number;
+    rows: number;
+}
+/**
+ * Default terminal size (standard VT100 terminal dimensions).
+ */
+export declare const DEFAULT_TERMINAL_SIZE: TerminalSize;
+/**
+ * Minimum terminal size for the config editor.
+ */
+export declare const MIN_TERMINAL_SIZE: TerminalSize;
+/**
+ * Hook that returns the current terminal size and updates on resize.
+ * Falls back to default dimensions if terminal size cannot be determined.
+ */
+export declare function useTerminalSize(): TerminalSize;
+export default useTerminalSize;