ralph-cli-sandboxed 0.4.0 → 0.4.2

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"],
+        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/tui/utils/presets.js

@@ -24,21 +24,34 @@ export const CHAT_PRESETS = [
     {
         id: "slack",
         name: "Slack",
-        description: "Slack App for chat control (coming soon)",
+        description: "Slack App for chat control via Socket Mode",
         category: "chat",
         fields: {
             "chat.enabled": true,
             "chat.provider": "slack",
+            "chat.slack": {
+                enabled: true,
+                botToken: "", // xoxb-... from OAuth & Permissions
+                appToken: "", // xapp-... from Basic Information > App-Level Tokens
+                signingSecret: "", // From Basic Information > App Credentials
+                allowedChannelIds: [],
+            },
         },
     },
     {
         id: "discord",
         name: "Discord",
-        description: "Discord Bot for chat control (coming soon)",
+        description: "Discord Bot for chat control via Discord Gateway",
         category: "chat",
         fields: {
             "chat.enabled": true,
             "chat.provider": "discord",
+            "chat.discord": {
+                enabled: true,
+                botToken: "", // Bot token from Discord Developer Portal > Bot > Token
+                allowedGuildIds: [], // Server/guild IDs to restrict access (optional)
+                allowedChannelIds: [], // Channel IDs to restrict access (optional)
+            },
         },
     },
 ];

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

@@ -29,10 +29,10 @@ export interface ChatCommand {
 export interface ChatClientConfig {
     /** Whether the chat client is enabled */
     enabled: boolean;
-    /** The chat provider type (e.g., "telegram") */
-    provider: "telegram";
+    /** The chat provider type (e.g., "telegram", "slack", "discord") */
+    provider: ChatProvider;
     /** Provider-specific settings */
-    settings: TelegramSettings;
+    settings: TelegramSettings | SlackSettings | DiscordSettings;
 }
 export interface TelegramSettings {
     /** Telegram Bot API token */
@@ -40,7 +40,25 @@ export interface TelegramSettings {
     /** Allowed chat IDs (for security - only respond in these chats) */
     allowedChatIds?: string[];
 }
-export type ChatProvider = "telegram";
+export interface SlackSettings {
+    /** Slack Bot Token (xoxb-...) - for Web API calls */
+    botToken: string;
+    /** Slack App Token (xapp-...) - for Socket Mode connection */
+    appToken: string;
+    /** Slack Signing Secret - for verifying request signatures */
+    signingSecret: string;
+    /** Allowed channel IDs (for security - only respond in these channels) */
+    allowedChannelIds?: string[];
+}
+export interface DiscordSettings {
+    /** Discord Bot Token (from Developer Portal) */
+    botToken: string;
+    /** Allowed guild (server) IDs (for security - only respond in these servers) */
+    allowedGuildIds?: string[];
+    /** Allowed channel IDs (for security - only respond in these channels) */
+    allowedChannelIds?: string[];
+}
+export type ChatProvider = "telegram" | "slack" | "discord";
 /**
  * Callback for handling incoming chat commands.
  */
@@ -55,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.
@@ -127,6 +149,13 @@ export declare function generateProjectId(): string;
  * - "/add Fix the login bug" -> { command: "add", args: ["Fix", "the", "login", "bug"] }
  */
 export declare function parseCommand(text: string, message: ChatMessage): ChatCommand | null;
+/**
+ * Escape HTML special characters in a string.
+ * This is required for Telegram messages since they use parse_mode: "HTML".
+ * Characters like <, >, & in command output (e.g., git status showing <file>)
+ * would otherwise be interpreted as HTML tags and cause API errors.
+ */
+export declare function escapeHtml(text: string): string;
 /**
  * Strip ANSI escape codes from a string.
  * This is useful for cleaning output before sending to chat services

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+/);
@@ -57,6 +67,15 @@ export function parseCommand(text, message) {
     }
     return null;
 }
+/**
+ * Escape HTML special characters in a string.
+ * This is required for Telegram messages since they use parse_mode: "HTML".
+ * Characters like <, >, & in command output (e.g., git status showing <file>)
+ * would otherwise be interpreted as HTML tags and cause API errors.
+ */
+export function escapeHtml(text) {
+    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
 /**
  * Strip ANSI escape codes from a string.
  * This is useful for cleaning output before sending to chat services