ralph-cli-sandboxed 0.4.1 → 0.4.2

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

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

package/dist/tui/components/RespondersEditor.js

@@ -0,0 +1,437 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useCallback, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+/**
+ * Responder type options for dropdown.
+ */
+const RESPONDER_TYPES = ["llm", "claude-code", "cli"];
+/**
+ * Type descriptions for display.
+ */
+const TYPE_DESCRIPTIONS = {
+    llm: "LLM provider",
+    "claude-code": "Claude Code agent",
+    cli: "CLI command",
+};
+/**
+ * Default timeouts by responder type.
+ */
+const DEFAULT_TIMEOUTS = {
+    llm: 60000,
+    "claude-code": 300000,
+    cli: 60000,
+};
+/**
+ * Suggested responder names/presets.
+ */
+const SUGGESTED_NAMES = ["default", "qa", "reviewer", "code", "lint"];
+/**
+ * RespondersEditor component for editing chat responder configurations.
+ * Provides a user-friendly interface for adding, editing, and removing responders.
+ */
+export function RespondersEditor({ label, responders, onConfirm, onCancel, isFocused = true, maxHeight = 15, }) {
+    const [editResponders, setEditResponders] = useState({ ...responders });
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const [mode, setMode] = useState("list");
+    const [editText, setEditText] = useState("");
+    const [editingResponder, setEditingResponder] = useState(null);
+    const [typeIndex, setTypeIndex] = useState(0);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    // Get sorted responder names
+    const responderNames = useMemo(() => Object.keys(editResponders).sort(), [editResponders]);
+    // Total options includes all responders plus "+ Add responder" option
+    const totalOptions = responderNames.length + 1;
+    // Calculate visible range for scrolling
+    const visibleCount = Math.min(maxHeight - 6, totalOptions); // Reserve lines for header, footer, hints
+    const visibleResponders = useMemo(() => {
+        const endIndex = Math.min(scrollOffset + visibleCount, responderNames.length);
+        return responderNames.slice(scrollOffset, endIndex);
+    }, [scrollOffset, visibleCount, responderNames]);
+    // 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 responder
+    const handleDelete = useCallback(() => {
+        if (highlightedIndex < responderNames.length) {
+            const nameToDelete = responderNames[highlightedIndex];
+            const newResponders = { ...editResponders };
+            delete newResponders[nameToDelete];
+            setEditResponders(newResponders);
+            // Adjust highlighted index if needed
+            const newNames = Object.keys(newResponders);
+            if (highlightedIndex >= newNames.length && newNames.length > 0) {
+                setHighlightedIndex(newNames.length - 1);
+            }
+            else if (newNames.length === 0) {
+                setHighlightedIndex(0);
+            }
+        }
+    }, [highlightedIndex, responderNames, editResponders]);
+    // Start editing or adding a responder
+    const handleStartEdit = useCallback(() => {
+        if (highlightedIndex < responderNames.length) {
+            // Edit existing responder
+            const name = responderNames[highlightedIndex];
+            const config = editResponders[name];
+            setEditingResponder({ name, config: { ...config } });
+            setMode("edit-responder");
+        }
+        else {
+            // Add new responder - start with name input
+            setEditText("");
+            setMode("add-name");
+        }
+    }, [highlightedIndex, responderNames, editResponders]);
+    // Handle name submission when adding new responder
+    const handleNameSubmit = useCallback(() => {
+        const trimmedName = editText.trim();
+        if (trimmedName) {
+            // Check if name already exists
+            if (editResponders[trimmedName]) {
+                // Edit existing instead
+                const config = editResponders[trimmedName];
+                setEditingResponder({ name: trimmedName, config: { ...config } });
+                setMode("edit-responder");
+            }
+            else {
+                // Create new responder with default values
+                const defaultTrigger = trimmedName === "default" ? undefined : `@${trimmedName}`;
+                setEditingResponder({
+                    name: trimmedName,
+                    config: {
+                        type: "llm",
+                        trigger: defaultTrigger,
+                    },
+                });
+                setTypeIndex(0);
+                setMode("select-type");
+            }
+        }
+        else {
+            setMode("list");
+        }
+        setEditText("");
+    }, [editText, editResponders]);
+    // Handle type selection
+    const handleTypeSelect = useCallback(() => {
+        if (editingResponder) {
+            const selectedType = RESPONDER_TYPES[typeIndex];
+            setEditingResponder({
+                ...editingResponder,
+                config: {
+                    ...editingResponder.config,
+                    type: selectedType,
+                    timeout: DEFAULT_TIMEOUTS[selectedType],
+                    maxLength: 2000,
+                },
+            });
+            setMode("edit-responder");
+        }
+    }, [editingResponder, typeIndex]);
+    // Save current editing responder
+    const saveEditingResponder = useCallback(() => {
+        if (editingResponder) {
+            const newResponders = {
+                ...editResponders,
+                [editingResponder.name]: { ...editingResponder.config },
+            };
+            // Clean up undefined values
+            const config = newResponders[editingResponder.name];
+            if (!config.trigger)
+                delete config.trigger;
+            if (!config.provider)
+                delete config.provider;
+            if (!config.systemPrompt)
+                delete config.systemPrompt;
+            if (!config.command)
+                delete config.command;
+            if (!config.timeout)
+                delete config.timeout;
+            if (!config.maxLength)
+                delete config.maxLength;
+            setEditResponders(newResponders);
+            setEditingResponder(null);
+            setMode("list");
+            setEditText("");
+            // Update highlighted index to the new/edited responder
+            const sortedNames = Object.keys(newResponders).sort();
+            const newIndex = sortedNames.indexOf(editingResponder.name);
+            if (newIndex >= 0) {
+                setHighlightedIndex(newIndex);
+            }
+        }
+    }, [editingResponder, editResponders]);
+    // Cancel editing
+    const handleCancel = useCallback(() => {
+        setMode("list");
+        setEditText("");
+        setEditingResponder(null);
+    }, []);
+    // Handle text field submission
+    const handleTextSubmit = useCallback(() => {
+        if (!editingResponder)
+            return;
+        const trimmedValue = editText.trim();
+        switch (mode) {
+            case "edit-trigger":
+                setEditingResponder({
+                    ...editingResponder,
+                    config: {
+                        ...editingResponder.config,
+                        trigger: trimmedValue || undefined,
+                    },
+                });
+                break;
+            case "edit-provider":
+                setEditingResponder({
+                    ...editingResponder,
+                    config: {
+                        ...editingResponder.config,
+                        provider: trimmedValue || undefined,
+                    },
+                });
+                break;
+            case "edit-system":
+                setEditingResponder({
+                    ...editingResponder,
+                    config: {
+                        ...editingResponder.config,
+                        systemPrompt: trimmedValue || undefined,
+                    },
+                });
+                break;
+            case "edit-command":
+                setEditingResponder({
+                    ...editingResponder,
+                    config: {
+                        ...editingResponder.config,
+                        command: trimmedValue || undefined,
+                    },
+                });
+                break;
+            case "edit-timeout":
+                setEditingResponder({
+                    ...editingResponder,
+                    config: {
+                        ...editingResponder.config,
+                        timeout: trimmedValue ? parseInt(trimmedValue, 10) || undefined : undefined,
+                    },
+                });
+                break;
+            case "edit-maxlength":
+                setEditingResponder({
+                    ...editingResponder,
+                    config: {
+                        ...editingResponder.config,
+                        maxLength: trimmedValue ? parseInt(trimmedValue, 10) || undefined : undefined,
+                    },
+                });
+                break;
+        }
+        setMode("edit-responder");
+        setEditText("");
+    }, [editingResponder, editText, mode]);
+    // 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(editResponders);
+        }
+    }, { 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 < RESPONDER_TYPES.length - 1 ? prev + 1 : 0));
+        }
+        else if (input === "k" || key.upArrow) {
+            setTypeIndex((prev) => (prev > 0 ? prev - 1 : RESPONDER_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) => {
+        const textModes = [
+            "add-name",
+            "edit-trigger",
+            "edit-provider",
+            "edit-system",
+            "edit-command",
+            "edit-timeout",
+            "edit-maxlength",
+        ];
+        if (!isFocused || !textModes.includes(mode))
+            return;
+        if (key.escape) {
+            if (mode === "add-name") {
+                handleCancel();
+            }
+            else {
+                setMode("edit-responder");
+                setEditText("");
+            }
+        }
+    }, {
+        isActive: isFocused &&
+            [
+                "add-name",
+                "edit-trigger",
+                "edit-provider",
+                "edit-system",
+                "edit-command",
+                "edit-timeout",
+                "edit-maxlength",
+            ].includes(mode),
+    });
+    // Handle keyboard input for edit-responder mode (viewing a responder)
+    useInput((input, key) => {
+        if (!isFocused || mode !== "edit-responder" || !editingResponder)
+            return;
+        if (key.escape) {
+            handleCancel();
+        }
+        else if (input === "t" || input === "T") {
+            // Edit type
+            setTypeIndex(RESPONDER_TYPES.indexOf(editingResponder.config.type));
+            setMode("select-type");
+        }
+        else if (input === "g" || input === "G") {
+            // Edit trigger
+            setEditText(editingResponder.config.trigger || "");
+            setMode("edit-trigger");
+        }
+        else if (input === "p" || input === "P") {
+            // Edit provider (only for llm type)
+            if (editingResponder.config.type === "llm") {
+                setEditText(editingResponder.config.provider || "");
+                setMode("edit-provider");
+            }
+        }
+        else if (input === "y" || input === "Y") {
+            // Edit system prompt (only for llm type)
+            if (editingResponder.config.type === "llm") {
+                setEditText(editingResponder.config.systemPrompt || "");
+                setMode("edit-system");
+            }
+        }
+        else if (input === "c" || input === "C") {
+            // Edit command (only for cli type)
+            if (editingResponder.config.type === "cli") {
+                setEditText(editingResponder.config.command || "");
+                setMode("edit-command");
+            }
+        }
+        else if (input === "o" || input === "O") {
+            // Edit timeout
+            setEditText(editingResponder.config.timeout?.toString() || "");
+            setMode("edit-timeout");
+        }
+        else if (input === "l" || input === "L") {
+            // Edit max length
+            setEditText(editingResponder.config.maxLength?.toString() || "");
+            setMode("edit-maxlength");
+        }
+        else if (input === "s" || input === "S") {
+            // Save and close
+            saveEditingResponder();
+        }
+    }, { isActive: isFocused && mode === "edit-responder" });
+    // 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 Responder Type" }), editingResponder && _jsxs(Text, { dimColor: true, children: [" for \"", editingResponder.name, "\""] })] }), RESPONDER_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_DESCRIPTIONS[type]] })] }, 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 Responder" }) }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Name: " }), _jsx(TextInput, { value: editText, onChange: setEditText, onSubmit: handleNameSubmit, focus: isFocused, placeholder: "e.g., qa, reviewer, code" })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Suggested: ", SUGGESTED_NAMES.join(", ")] }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next | Esc: cancel" }) })] }));
+    }
+    // Render trigger input mode
+    if (mode === "edit-trigger" && editingResponder) {
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "Edit Trigger Pattern" }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "Use @name for mentions, leave empty for default handler" }) }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Trigger: " }), _jsx(TextInput, { value: editText, onChange: setEditText, onSubmit: handleTextSubmit, focus: isFocused, placeholder: "e.g., @qa, @review (or empty for default)" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: save | Esc: cancel" }) })] }));
+    }
+    // Render provider input mode
+    if (mode === "edit-provider" && editingResponder) {
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "Edit LLM Provider" }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "Name from llmProviders config (e.g., anthropic, openai)" }) }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Provider: " }), _jsx(TextInput, { value: editText, onChange: setEditText, onSubmit: handleTextSubmit, focus: isFocused, placeholder: "e.g., anthropic" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: save | Esc: cancel" }) })] }));
+    }
+    // Render system prompt input mode
+    if (mode === "edit-system" && editingResponder) {
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "Edit System Prompt" }) }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { dimColor: true, children: ["Supports ", "{{project}}", " placeholder for project context"] }) }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "System: " }), _jsx(TextInput, { value: editText, onChange: setEditText, onSubmit: handleTextSubmit, focus: isFocused, placeholder: "You are a helpful assistant..." })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: save | Esc: cancel" }) })] }));
+    }
+    // Render command input mode
+    if (mode === "edit-command" && editingResponder) {
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "Edit CLI Command" }) }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { dimColor: true, children: ["Supports ", "{{message}}", " placeholder for the user message"] }) }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Command: " }), _jsx(TextInput, { value: editText, onChange: setEditText, onSubmit: handleTextSubmit, focus: isFocused, placeholder: "e.g., npm run lint" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: save | Esc: cancel" }) })] }));
+    }
+    // Render timeout input mode
+    if (mode === "edit-timeout" && editingResponder) {
+        const defaultTimeout = DEFAULT_TIMEOUTS[editingResponder.config.type];
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "Edit Timeout" }) }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { dimColor: true, children: ["Timeout in milliseconds (default: ", defaultTimeout, ")"] }) }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Timeout: " }), _jsx(TextInput, { value: editText, onChange: setEditText, onSubmit: handleTextSubmit, focus: isFocused, placeholder: defaultTimeout.toString() })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: save | Esc: cancel" }) })] }));
+    }
+    // Render max length input mode
+    if (mode === "edit-maxlength" && editingResponder) {
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "Edit Max Response Length" }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "Maximum characters to send back to chat (default: 2000)" }) }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Max Length: " }), _jsx(TextInput, { value: editText, onChange: setEditText, onSubmit: handleTextSubmit, focus: isFocused, placeholder: "2000" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: save | Esc: cancel" }) })] }));
+    }
+    // Render edit-responder mode (viewing/editing a single responder)
+    if (mode === "edit-responder" && editingResponder) {
+        const config = editingResponder.config;
+        const isLLM = config.type === "llm";
+        const isCLI = config.type === "cli";
+        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 Responder: ", editingResponder.name] }) }), _jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "[T] Type: " }), _jsx(Text, { children: config.type })] }), _jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "[G] Trigger: " }), _jsx(Text, { dimColor: !config.trigger, children: config.trigger || "(default handler)" })] }), isLLM && (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "[P] Provider: " }), _jsx(Text, { dimColor: !config.provider, children: config.provider || "(not set)" })] }), _jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "[Y] System: " }), _jsx(Text, { dimColor: !config.systemPrompt, children: config.systemPrompt
+                                        ? config.systemPrompt.length > 40
+                                            ? config.systemPrompt.substring(0, 40) + "..."
+                                            : config.systemPrompt
+                                        : "(not set)" })] })] })), isCLI && (_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "[C] Command: " }), _jsx(Text, { dimColor: !config.command, children: config.command || "(not set)" })] })), _jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "[O] Timeout: " }), _jsxs(Text, { dimColor: !config.timeout, children: [config.timeout || DEFAULT_TIMEOUTS[config.type], "ms"] })] }), _jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "[L] Max Length: " }), _jsx(Text, { dimColor: !config.maxLength, children: config.maxLength || 2000 })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: ["[T]ype [G]trigger", isLLM ? " [P]rovider [Y]system" : "", isCLI ? " [C]ommand" : "", " [O]timeout [L]ength"] }), _jsx(Text, { dimColor: true, children: "S: save | Esc: cancel" })] })] }));
+    }
+    // Calculate scroll indicators
+    const canScrollUp = scrollOffset > 0;
+    const canScrollDown = scrollOffset + visibleCount < responderNames.length;
+    const hasOverflow = responderNames.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: [" (", responderNames.length, " responders)"] })] }), hasOverflow && (_jsx(Box, { children: _jsx(Text, { color: canScrollUp ? "cyan" : "gray", dimColor: !canScrollUp, children: canScrollUp ? "  ▲ more" : "" }) })), responderNames.length === 0 ? (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, italic: true, children: "No responders configured" }) })) : (visibleResponders.map((name) => {
+                const actualIndex = responderNames.indexOf(name);
+                const isHighlighted = actualIndex === highlightedIndex;
+                const config = editResponders[name];
+                // Format display: type abbreviation and trigger
+                const typeAbbrev = config.type === "claude-code" ? "claude" : config.type;
+                const trigger = config.trigger || "(default)";
+                return (_jsxs(Box, { children: [_jsx(Text, { color: isHighlighted ? "cyan" : undefined, children: isHighlighted ? "▸ " : "  " }), _jsx(Text, { bold: isHighlighted, color: isHighlighted ? "cyan" : "yellow", inverse: isHighlighted, children: name.padEnd(12) }), _jsx(Text, { color: "magenta", children: typeAbbrev.padEnd(8) }), _jsx(Text, { dimColor: true, children: trigger })] }, name));
+            })), hasOverflow && (_jsx(Box, { children: _jsx(Text, { color: canScrollDown ? "cyan" : "gray", dimColor: !canScrollDown, children: canScrollDown ? "  ▼ more" : "" }) })), _jsxs(Box, { children: [_jsx(Text, { color: highlightedIndex === responderNames.length ? "green" : undefined, children: highlightedIndex === responderNames.length ? "▸ " : "  " }), _jsx(Text, { bold: highlightedIndex === responderNames.length, color: highlightedIndex === responderNames.length ? "green" : "gray", inverse: highlightedIndex === responderNames.length, children: "+ Add responder" })] }), _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 RespondersEditor;

package/dist/tui/components/SectionNav.js

@@ -16,7 +16,18 @@ export const CONFIG_SECTIONS = [
         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"],
+        fields: [
+            "docker.ports",
+            "docker.volumes",
+            "docker.environment",
+            "docker.packages",
+            "docker.git",
+            "docker.buildCommands",
+            "docker.startCommand",
+            "docker.firewall",
+            "docker.autoStart",
+            "docker.restartCount",
+        ],
     },
     {
         id: "daemon",
@@ -34,13 +45,26 @@ export const CONFIG_SECTIONS = [
         id: "chat",
         label: "Chat",
         icon: "💬",
-        fields: ["chat.enabled", "chat.provider", "chat.telegram", "chat.slack", "chat.discord"],
+        fields: ["chat.enabled", "chat.provider", "chat.telegram", "chat.slack", "chat.discord", "chat.responders"],
     },
     {
         id: "notifications",
         label: "Notifications",
         icon: "🔔",
-        fields: ["notifications.provider", "notifications.ntfy", "notifications.pushover", "notifications.gotify", "notifications.command", "notifyCommand"],
+        fields: [
+            "notifications.provider",
+            "notifications.ntfy",
+            "notifications.pushover",
+            "notifications.gotify",
+            "notifications.command",
+            "notifyCommand",
+        ],
+    },
+    {
+        id: "llm",
+        label: "LLM Providers",
+        icon: "🧠",
+        fields: ["llmProviders"],
     },
 ];
 /**

package/dist/utils/chat-client.d.ts

@@ -73,6 +73,10 @@ export type ChatMessageHandler = (message: ChatMessage) => Promise<void>;
 export interface SendMessageOptions {
     /** Inline keyboard buttons (Telegram-specific) */
     inlineKeyboard?: InlineButton[][];
+    /** Thread timestamp for reply context (Slack-specific) */
+    threadTs?: string;
+    /** Message ID to reply to (Telegram-specific) */
+    replyToMessageId?: number;
 }
 /**
  * Inline button for chat messages.

package/dist/utils/chat-client.js

@@ -28,7 +28,17 @@ export function parseCommand(text, message) {
     if (!trimmed)
         return null;
     // Valid commands
-    const validCommands = ["run", "status", "add", "exec", "stop", "help", "start", "action", "claude"];
+    const validCommands = [
+        "run",
+        "status",
+        "add",
+        "exec",
+        "stop",
+        "help",
+        "start",
+        "action",
+        "claude",
+    ];
     // Check for slash command format: /command [args...]
     if (trimmed.startsWith("/")) {
         const parts = trimmed.slice(1).split(/\s+/);
@@ -64,10 +74,7 @@ export function parseCommand(text, message) {
  * would otherwise be interpreted as HTML tags and cause API errors.
  */
 export function escapeHtml(text) {
-    return text
-        .replace(/&/g, "&")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;");
+    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 /**
  * Strip ANSI escape codes from a string.

package/dist/utils/config.d.ts

@@ -6,6 +6,34 @@ export interface CliConfig {
     modelArgs?: string[];
     fileArgs?: string[];
 }
+/**
+ * LLM Provider Types
+ * - anthropic: Anthropic Claude API
+ * - openai: OpenAI API (GPT models)
+ * - ollama: Local Ollama server
+ */
+export type LLMProviderType = "anthropic" | "openai" | "ollama";
+/**
+ * Configuration for a single LLM provider.
+ */
+export interface LLMProviderConfig {
+    type: LLMProviderType;
+    model: string;
+    apiKey?: string;
+    baseUrl?: string;
+}
+/**
+ * Named LLM providers configuration.
+ * Providers can be referenced by name in responder configs.
+ *
+ * Example:
+ * {
+ *   "claude": { "type": "anthropic", "model": "claude-sonnet-4-20250514" },
+ *   "gpt4": { "type": "openai", "model": "gpt-4o" },
+ *   "local": { "type": "ollama", "model": "llama3", "baseUrl": "http://localhost:11434" }
+ * }
+ */
+export type LLMProvidersConfig = Record<string, LLMProviderConfig>;
 export interface McpServerConfig {
     command: string;
     args?: string[];
@@ -82,12 +110,46 @@ export interface DiscordChatSettings {
     allowedGuildIds?: string[];
     allowedChannelIds?: string[];
 }
+/**
+ * Chat responder types.
+ * - llm: Send message to an LLM provider and return response
+ * - claude-code: Run Claude Code CLI with the message as prompt
+ * - cli: Execute a custom CLI command with the message
+ */
+export type ResponderType = "llm" | "claude-code" | "cli";
+/**
+ * Configuration for a single chat responder.
+ * Responders handle incoming chat messages based on trigger patterns.
+ */
+export interface ResponderConfig {
+    type: ResponderType;
+    trigger?: string;
+    provider?: string;
+    systemPrompt?: string;
+    command?: string;
+    timeout?: number;
+    maxLength?: number;
+}
+/**
+ * Named responders configuration.
+ * The special name "default" handles messages that don't match any trigger.
+ *
+ * Example:
+ * {
+ *   "default": { "type": "llm", "provider": "anthropic", "systemPrompt": "You are a helpful assistant." },
+ *   "qa": { "type": "llm", "trigger": "@qa", "provider": "anthropic", "systemPrompt": "Answer questions about {{project}}." },
+ *   "code": { "type": "claude-code", "trigger": "@code" },
+ *   "lint": { "type": "cli", "trigger": "!lint", "command": "npm run lint" }
+ * }
+ */
+export type RespondersConfig = Record<string, ResponderConfig>;
 export interface ChatConfig {
     enabled?: boolean;
     provider?: "telegram" | "slack" | "discord";
     telegram?: TelegramChatSettings;
     slack?: SlackChatSettings;
     discord?: DiscordChatSettings;
+    responders?: RespondersConfig;
 }
 export interface RalphConfig {
     language: string;
@@ -100,6 +162,7 @@ export interface RalphConfig {
     javaVersion?: number;
     cli?: CliConfig;
     cliProvider?: string;
+    llmProviders?: LLMProvidersConfig;
     docker?: {
         ports?: string[];
         volumes?: string[];
@@ -150,3 +213,24 @@ export declare function isRunningInContainer(): boolean;
  * Require container execution. Exits with error if not in container.
  */
 export declare function requireContainer(commandName: string): void;
+/**
+ * Default LLM provider configurations.
+ * These are used when llmProviders is not specified in config.
+ * API keys are resolved from environment variables at runtime.
+ */
+export declare const DEFAULT_LLM_PROVIDERS: LLMProvidersConfig;
+/**
+ * Get the API key for an LLM provider.
+ * First checks the provider config, then falls back to environment variables.
+ */
+export declare function getLLMProviderApiKey(provider: LLMProviderConfig): string | undefined;
+/**
+ * Get the base URL for an LLM provider.
+ * Returns the configured baseUrl or the default for the provider type.
+ */
+export declare function getLLMProviderBaseUrl(provider: LLMProviderConfig): string;
+/**
+ * Get LLM providers from config, merging with defaults.
+ * User-defined providers override defaults with the same name.
+ */
+export declare function getLLMProviders(config: RalphConfig): LLMProvidersConfig;