chels-code 0.0.0-stage → 0.5.1

package/dist/src/ui/App.js

@@ -0,0 +1,259 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Static, Text, useApp, useInput } from "ink";
+import { collectModels, createEngine } from "../engine.js";
+import { fetchAvailableCredits } from "../providers.js";
+import { saveSession } from "../session.js";
+import { DEFAULT_EFFORT, DEFAULT_MODE } from "../types.js";
+import { ActionConfirmation, PlanConfirmation } from "./ConfirmPanel.js";
+import { CommandPalette } from "./CommandPalette.js";
+import { Spinner } from "./Spinner.js";
+import { TextArea } from "./TextArea.js";
+import { TranscriptEntryView } from "./Transcript.js";
+import { ASSISTANT_NAME, EFFORT_COLORS, formatTokenCount, MODE_LABELS, PLAN_NAME, theme } from "./theme.js";
+import { useTerminalSize } from "./useTerminalSize.js";
+function initialEntries(workspace, version, resume) {
+    const header = {
+        id: 0,
+        kind: "header",
+        workspace,
+        version,
+        ...(resume ? { resumedFrom: resume.id } : {}),
+    };
+    if (!resume)
+        return [header];
+    const restored = resume.entries
+        .filter((entry) => entry.kind !== "header")
+        .map((entry, index) => ({ ...entry, id: index + 1 }));
+    return [header, ...restored];
+}
+export function App({ apiKeys, workspace, version, sessionId, resume, sessionsDir, missingKeys = false, }) {
+    const { exit } = useApp();
+    const { columns, rows } = useTerminalSize();
+    const [entries, setEntries] = useState(() => (initialEntries(workspace, version, resume)));
+    const nextEntryId = useRef(entries.reduce((max, entry) => Math.max(max, entry.id), 0) + 1);
+    const createdAt = useRef(resume?.createdAt ?? new Date().toISOString());
+    const [status, setStatus] = useState("Connecting to OpenRouter, NVIDIA, and Groq…");
+    const [tokensUsed, setTokensUsed] = useState(resume?.tokensUsed ?? 0);
+    const [creditsUsed, setCreditsUsed] = useState(resume?.creditsUsed ?? 0);
+    const [creditsAvailable, setCreditsAvailable] = useState(resume?.creditsAvailable ?? null);
+    const [commandsOpen, setCommandsOpen] = useState(false);
+    const [effort, setEffort] = useState(resume?.effort ?? DEFAULT_EFFORT);
+    const [mode, setMode] = useState(resume?.mode ?? DEFAULT_MODE);
+    const [models, setModels] = useState(null);
+    const [startupError, setStartupError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [pendingPlan, setPendingPlan] = useState(null);
+    const [pendingAction, setPendingAction] = useState(null);
+    const planResolver = useRef(null);
+    const actionResolver = useRef(null);
+    const busyRef = useRef(false);
+    const saveErrorShown = useRef(false);
+    const pushEntry = useCallback((entry) => {
+        setEntries((current) => [
+            ...current,
+            { ...entry, id: nextEntryId.current++ },
+        ]);
+    }, []);
+    useEffect(() => {
+        if (!sessionId)
+            return;
+        const snapshot = {
+            schema: 1,
+            id: sessionId,
+            workspace,
+            createdAt: createdAt.current,
+            updatedAt: new Date().toISOString(),
+            mode,
+            effort,
+            tokensUsed,
+            creditsUsed,
+            creditsAvailable,
+            entries: entries.filter((entry) => entry.kind !== "header"),
+        };
+        try {
+            saveSession(snapshot, sessionsDir);
+        }
+        catch (error) {
+            if (saveErrorShown.current)
+                return;
+            saveErrorShown.current = true;
+            pushEntry({
+                kind: "error",
+                title: "Session not saved",
+                message: `This session cannot be resumed: ${error instanceof Error ? error.message : String(error)}`,
+            });
+        }
+    }, [
+        sessionId,
+        workspace,
+        mode,
+        effort,
+        tokensUsed,
+        creditsUsed,
+        creditsAvailable,
+        entries,
+        sessionsDir,
+        pushEntry,
+    ]);
+    const resolvePlan = useCallback((approved) => {
+        const resolve = planResolver.current;
+        planResolver.current = null;
+        setPendingPlan(null);
+        resolve?.(approved);
+    }, []);
+    const resolveAction = useCallback((approved) => {
+        const resolve = actionResolver.current;
+        actionResolver.current = null;
+        setPendingAction(null);
+        resolve?.(approved);
+    }, []);
+    const hooks = useMemo(() => ({
+        onStatus: (text) => setStatus(text),
+        onUsage: (usage) => {
+            setTokensUsed((current) => current + usage.totalTokens);
+            const cost = usage.cost;
+            if (usage.provider === "openrouter" && cost) {
+                setCreditsUsed((current) => current + cost);
+            }
+        },
+        onEntry: pushEntry,
+        confirmPlan: (tasks) => new Promise((resolve) => {
+            planResolver.current = resolve;
+            setCommandsOpen(false);
+            setStatus(null);
+            setPendingPlan(tasks);
+        }),
+        confirmAction: (action) => new Promise((resolve) => {
+            actionResolver.current = resolve;
+            setCommandsOpen(false);
+            setStatus(null);
+            setPendingAction(action);
+        }),
+    }), [pushEntry]);
+    useEffect(() => {
+        let cancelled = false;
+        void (async () => {
+            try {
+                const discovered = await collectModels(apiKeys, (text) => {
+                    if (!cancelled)
+                        setStatus(text);
+                });
+                if (cancelled)
+                    return;
+                setModels(discovered);
+            }
+            catch (error) {
+                if (cancelled)
+                    return;
+                const message = error instanceof Error ? error.message : String(error);
+                setStartupError(message);
+                pushEntry({ kind: "error", title: "Setup failed", message });
+            }
+            finally {
+                if (!cancelled)
+                    setStatus(null);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [apiKeys, pushEntry]);
+    useEffect(() => {
+        let cancelled = false;
+        void (async () => {
+            const credits = await fetchAvailableCredits(apiKeys.openrouter);
+            if (!cancelled && credits)
+                setCreditsAvailable(credits.remaining);
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [apiKeys.openrouter]);
+    const engine = useMemo(() => (models ? createEngine({ apiKeys, models, workspace, hooks, effort }) : null), [apiKeys, models, workspace, hooks, effort]);
+    const endSession = useCallback(() => {
+        setTimeout(() => exit(), 60);
+    }, [exit]);
+    const runCommand = useCallback((command) => {
+        setCommandsOpen(false);
+        if (command === "exit") {
+            endSession();
+            return;
+        }
+        pushEntry({
+            kind: "note",
+            text: "enter send · shift+enter newline · tab / shift+tab mode · ctrl+p commands · /exit quit",
+        });
+    }, [endSession, pushEntry]);
+    useInput((input, key) => {
+        if (key.eventType === "release")
+            return;
+        if ((key.tab || (key.ctrl && input === "t"))
+            && !busyRef.current
+            && !pendingPlan
+            && !pendingAction
+            && !commandsOpen) {
+            setMode((current) => (current === "build" ? "plan" : "build"));
+            return;
+        }
+        if (key.ctrl && input === "p" && !pendingPlan && !pendingAction) {
+            setCommandsOpen((open) => !open);
+        }
+    });
+    const handleSubmit = useCallback((raw) => {
+        const request = raw.trim();
+        if (!request || busyRef.current)
+            return;
+        if (request === "/exit" || request === "/quit") {
+            endSession();
+            return;
+        }
+        if (missingKeys) {
+            pushEntry({
+                kind: "note",
+                text: "API keys are not configured. Add OPENROUTER_API_KEY, NVIDIA_API_KEY, and GROQ_API_KEY to your .env or environment before continuing.",
+            });
+            return;
+        }
+        if (!engine)
+            return;
+        busyRef.current = true;
+        setBusy(true);
+        pushEntry({ kind: "user", text: request });
+        void (async () => {
+            try {
+                await engine.runTask(request);
+            }
+            catch (error) {
+                pushEntry({
+                    kind: "error",
+                    title: "Task failed",
+                    message: error instanceof Error ? error.message : String(error),
+                });
+            }
+            finally {
+                busyRef.current = false;
+                setBusy(false);
+                setStatus(null);
+            }
+        })();
+    }, [endSession, engine, pushEntry]);
+    const width = Math.max(20, columns);
+    const inputColumns = Math.max(16, width - 4);
+    const contextCeiling = models
+        ? Math.max(0, ...Object.values(models).map((model) => model.contextLength))
+        : 0;
+    const percent = creditsAvailable !== null
+        ? creditsUsed <= 0
+            ? 0
+            : creditsAvailable <= 0
+                ? 100
+                : Math.min(100, Math.round((creditsUsed / creditsAvailable) * 100))
+        : contextCeiling > 0
+            ? Math.min(100, Math.round((tokensUsed / contextCeiling) * 100))
+            : 0;
+    const tokenLabel = `${formatTokenCount(tokensUsed)} (${percent}%)`;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: entries, children: (entry) => (_jsx(TranscriptEntryView, { entry: entry, columns: width }, entry.id)) }), _jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, children: [status ? (_jsx(Spinner, { active: true, label: "Thinking" })) : null, pendingPlan ? (_jsx(PlanConfirmation, { tasks: pendingPlan, onResolve: resolvePlan })) : null, pendingAction ? (_jsx(ActionConfirmation, { action: pendingAction, onResolve: resolveAction })) : null, startupError ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.red, children: "Setup failed. Fix the error above, then restart ChelsCode." }) })) : null, commandsOpen ? (_jsx(CommandPalette, { columns: inputColumns, mode: mode, onMode: setMode, effort: effort, onEffort: setEffort, onRun: runCommand, onClose: () => setCommandsOpen(false) })) : null, _jsxs(Box, { flexDirection: "column", marginTop: status || pendingPlan || pendingAction || startupError ? 1 : 0, children: [_jsx(TextArea, { onSubmit: handleSubmit, disabled: busy || !engine || startupError !== null || commandsOpen, columns: inputColumns, rows: rows, placeholder: mode === "plan"
+                                    ? "Describe what you want to plan…"
+                                    : "Describe what you want to build…" }), _jsx(Box, { width: inputColumns, children: _jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: theme.blue, children: MODE_LABELS[mode] }), _jsx(Text, { color: theme.faint, children: " \u00B7 " }), _jsxs(Text, { color: theme.white, children: [ASSISTANT_NAME, "  ", PLAN_NAME] }), _jsx(Text, { color: theme.faint, children: " \u00B7 " }), _jsx(Text, { color: EFFORT_COLORS[effort], children: effort })] }) }), _jsx(Box, { width: inputColumns, justifyContent: "flex-end", children: _jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { color: theme.faint, children: [tokenLabel, "  "] }), _jsx(Text, { color: theme.white, children: "shift+tab" }), _jsxs(Text, { color: theme.faint, children: [" mode", "  "] }), _jsx(Text, { color: theme.white, children: "ctrl+p" }), _jsx(Text, { color: theme.faint, children: " commands" })] }) })] })] })] }));
+}

package/dist/src/ui/CommandPalette.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { EFFORT_LEVELS, MODE_OPTIONS, } from "../types.js";
+import { EFFORT_COLORS, MODE_LABELS, theme } from "./theme.js";
+export const COMMANDS = [
+    { id: "mode", label: "Mode", description: "Switch between Build and Plan" },
+    { id: "effort", label: "Effort", description: "Change the effort level" },
+    { id: "help", label: "Help", description: "Show keys and commands" },
+    { id: "exit", label: "Exit", description: "End the session" },
+];
+export function CommandPalette({ columns, mode, onMode, effort, onEffort, onRun, onClose, }) {
+    const [view, setView] = useState("commands");
+    const [selected, setSelected] = useState(0);
+    const options = view === "commands"
+        ? COMMANDS
+        : view === "mode"
+            ? MODE_OPTIONS
+            : EFFORT_LEVELS;
+    const optionCount = options.length;
+    useInput((input, key) => {
+        if (key.eventType === "release")
+            return;
+        if (key.escape) {
+            if (view !== "commands") {
+                setView("commands");
+                setSelected(0);
+                return;
+            }
+            onClose();
+            return;
+        }
+        if (key.upArrow || input === "k") {
+            setSelected((current) => (current - 1 + optionCount) % optionCount);
+            return;
+        }
+        if (key.downArrow || input === "j") {
+            setSelected((current) => (current + 1) % optionCount);
+            return;
+        }
+        if (key.return) {
+            if (view === "mode") {
+                onMode(MODE_OPTIONS[selected]);
+                onClose();
+                return;
+            }
+            if (view === "effort") {
+                onEffort(EFFORT_LEVELS[selected]);
+                onClose();
+                return;
+            }
+            const command = COMMANDS[selected];
+            if (command.id === "mode") {
+                setView("mode");
+                setSelected(Math.max(0, MODE_OPTIONS.indexOf(mode)));
+                return;
+            }
+            if (command.id === "effort") {
+                setView("effort");
+                setSelected(Math.max(0, EFFORT_LEVELS.indexOf(effort)));
+                return;
+            }
+            onRun(command.id);
+        }
+    });
+    const title = view === "commands" ? "Commands" : view === "mode" ? "Mode" : "Effort";
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.primary, paddingX: 1, marginTop: 1, width: Math.min(64, Math.max(16, columns)), children: [_jsx(Text, { bold: true, children: title }), view === "commands" ? COMMANDS.map((command, index) => (_jsxs(Text, { children: [_jsx(Text, { color: index === selected ? theme.primary : theme.faint, children: index === selected ? "› " : "  " }), _jsx(Text, { bold: index === selected, color: index === selected ? theme.white : theme.dim, children: command.label }), _jsx(Text, { color: theme.faint, children: "  " }), command.id === "mode"
+                        ? _jsx(Text, { color: theme.blue, children: MODE_LABELS[mode] })
+                        : command.id === "effort"
+                            ? _jsx(Text, { color: EFFORT_COLORS[effort], children: effort })
+                            : _jsx(Text, { color: theme.faint, children: command.description })] }, command.id))) : view === "mode" ? MODE_OPTIONS.map((option, index) => (_jsxs(Text, { children: [_jsx(Text, { color: index === selected ? theme.primary : theme.faint, children: index === selected ? "› " : "  " }), _jsx(Text, { bold: index === selected, color: theme.blue, children: MODE_LABELS[option] }), option === mode ? _jsx(Text, { color: theme.faint, children: "  current" }) : null] }, option))) : EFFORT_LEVELS.map((level, index) => (_jsxs(Text, { children: [_jsx(Text, { color: index === selected ? theme.primary : theme.faint, children: index === selected ? "› " : "  " }), _jsx(Text, { bold: index === selected, color: EFFORT_COLORS[level], children: level }), level === effort ? _jsx(Text, { color: theme.faint, children: "  current" }) : null] }, level))), _jsx(Text, { color: theme.faint, children: view === "effort"
+                    ? "↑↓ select  ·  enter apply  ·  esc back"
+                    : view === "mode"
+                        ? "↑↓ select  ·  enter switch  ·  esc back"
+                        : "↑↓ select  ·  enter run  ·  esc close" })] }));
+}

package/dist/src/ui/ConfirmPanel.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Box, Text, useInput } from "ink";
+import { formatBytes, plural, sanitize, theme } from "./theme.js";
+function useDecision(onResolve) {
+    const resolved = useRef(false);
+    useInput((input, key) => {
+        if (resolved.current || key.eventType === "release")
+            return;
+        if (key.escape || key.return) {
+            resolved.current = true;
+            onResolve(false);
+            return;
+        }
+        const answer = input.trim().toLowerCase();
+        if (answer === "y") {
+            resolved.current = true;
+            onResolve(true);
+        }
+        else if (answer === "n") {
+            resolved.current = true;
+            onResolve(false);
+        }
+    });
+}
+export function PlanConfirmation({ tasks, onResolve, }) {
+    useDecision(onResolve);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.primary, paddingX: 1, marginTop: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: theme.primary, children: "?" }), _jsx(Text, { bold: true, children: " Proceed with this plan?" })] }), _jsxs(Text, { color: theme.dim, children: [tasks.length, " ", plural(tasks.length, "task"), " will run one at a time. Every file write and command asks for confirmation again."] }), _jsxs(Text, { children: [_jsx(Text, { color: theme.green, children: "y" }), _jsx(Text, { color: theme.dim, children: " proceed  \u00B7  " }), _jsx(Text, { color: theme.dim, children: "n / enter cancel" })] })] }));
+}
+export function ActionConfirmation({ action, onResolve, }) {
+    useDecision(onResolve);
+    if (action.kind === "write") {
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.yellow, paddingX: 1, marginTop: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: theme.yellow, children: "?" }), _jsx(Text, { bold: true, children: " Write this file?" })] }), _jsx(Text, { color: theme.bright, wrap: "hard", children: sanitize(action.path) }), _jsxs(Text, { color: theme.dim, children: [action.lines, " ", plural(action.lines, "line"), "  \u00B7  ", formatBytes(action.bytes)] }), action.preview ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: theme.faint, children: "preview" }), _jsx(Text, { color: theme.dim, wrap: "hard", children: sanitize(action.preview) }), action.truncated ? _jsx(Text, { color: theme.faint, children: "\u2026 preview truncated" }) : null] })) : null, _jsxs(Text, { children: [_jsx(Text, { color: theme.green, children: "y" }), _jsx(Text, { color: theme.dim, children: " write  \u00B7  " }), _jsx(Text, { color: theme.dim, children: "n / enter skip" })] })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.yellow, paddingX: 1, marginTop: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: theme.yellow, children: "?" }), _jsx(Text, { bold: true, children: " Run this PowerShell command?" })] }), _jsx(Text, { color: theme.yellow, wrap: "hard", children: sanitize(action.command) }), _jsxs(Text, { children: [_jsx(Text, { color: theme.green, children: "y" }), _jsx(Text, { color: theme.dim, children: " run  \u00B7  " }), _jsx(Text, { color: theme.dim, children: "n / enter skip" })] })] }));
+}

package/dist/src/ui/Spinner.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Text } from "ink";
+import { theme } from "./theme.js";
+export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+export function Spinner({ active, label }) {
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        if (!active) {
+            setFrame(0);
+            return;
+        }
+        const timer = setInterval(() => {
+            setFrame((current) => (current + 1) % SPINNER_FRAMES.length);
+        }, 80);
+        return () => clearInterval(timer);
+    }, [active]);
+    if (!active)
+        return null;
+    return (_jsxs(Text, { children: [_jsx(Text, { color: theme.primary, children: SPINNER_FRAMES[frame] }), _jsxs(Text, { bold: true, children: [" ", label] })] }));
+}

package/dist/src/ui/TextArea.js

@@ -0,0 +1,243 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { sanitize, theme } from "./theme.js";
+function layoutLines(chars, width) {
+    const lines = [];
+    let lineStart = 0;
+    for (let index = 0; index <= chars.length; index += 1) {
+        if (index === chars.length || chars[index] === "\n") {
+            const length = index - lineStart;
+            if (length === 0) {
+                lines.push({ start: lineStart, text: "" });
+            }
+            else {
+                for (let offset = 0; offset < length; offset += width) {
+                    lines.push({
+                        start: lineStart + offset,
+                        text: chars.slice(lineStart + offset, lineStart + Math.min(offset + width, length)).join(""),
+                    });
+                }
+            }
+            lineStart = index + 1;
+        }
+    }
+    return lines;
+}
+function cursorPosition(lines, cursor) {
+    for (let index = 0; index < lines.length; index += 1) {
+        const line = lines[index];
+        if (cursor >= line.start && cursor < line.start + line.text.length) {
+            return { line: index, column: cursor - line.start };
+        }
+    }
+    let chosen = 0;
+    for (let index = 0; index < lines.length; index += 1) {
+        if (lines[index].start <= cursor)
+            chosen = index;
+        else
+            break;
+    }
+    return { line: chosen, column: cursor - lines[chosen].start };
+}
+function lineStartAt(chars, position) {
+    let index = Math.min(position, chars.length);
+    while (index > 0 && chars[index - 1] !== "\n")
+        index -= 1;
+    return index;
+}
+function lineEndAt(chars, position) {
+    let index = Math.min(position, chars.length);
+    while (index < chars.length && chars[index] !== "\n")
+        index += 1;
+    return index;
+}
+export function TextArea({ onSubmit, disabled = false, columns, rows, placeholder = "Describe what you want to build…", }) {
+    const [value, setValue] = useState("");
+    const [cursor, setCursor] = useState(0);
+    const [cursorOn, setCursorOn] = useState(true);
+    const valueRef = useRef(value);
+    const cursorRef = useRef(cursor);
+    const outerWidth = Math.max(16, columns);
+    const contentWidth = Math.max(8, outerWidth - 5);
+    const maxVisible = Math.max(3, Math.min(10, rows - 12));
+    const chars = useMemo(() => Array.from(value), [value]);
+    const visualLines = useMemo(() => layoutLines(chars, contentWidth), [chars, contentWidth]);
+    const position = cursorPosition(visualLines, Math.min(cursor, chars.length));
+    let windowStart = 0;
+    if (visualLines.length > maxVisible) {
+        windowStart = Math.max(0, Math.min(position.line - Math.floor(maxVisible / 2), visualLines.length - maxVisible));
+    }
+    const visibleLines = visualLines.slice(windowStart, windowStart + maxVisible);
+    const hiddenAbove = windowStart;
+    const hiddenBelow = visualLines.length - windowStart - visibleLines.length;
+    const update = (nextValue, nextCursor) => {
+        valueRef.current = nextValue;
+        cursorRef.current = nextCursor;
+        setValue(nextValue);
+        setCursor(nextCursor);
+    };
+    const insert = (text) => {
+        const cleaned = sanitize(text);
+        if (!cleaned)
+            return;
+        const current = Array.from(valueRef.current);
+        const at = Math.min(cursorRef.current, current.length);
+        const inserted = Array.from(cleaned);
+        update([...current.slice(0, at), ...inserted, ...current.slice(at)].join(""), at + inserted.length);
+    };
+    const removeBefore = () => {
+        const current = Array.from(valueRef.current);
+        const at = Math.min(cursorRef.current, current.length);
+        if (at === 0)
+            return;
+        update([...current.slice(0, at - 1), ...current.slice(at)].join(""), at - 1);
+    };
+    const removeAt = () => {
+        const current = Array.from(valueRef.current);
+        const at = Math.min(cursorRef.current, current.length);
+        if (at >= current.length)
+            return;
+        update([...current.slice(0, at), ...current.slice(at + 1)].join(""), at);
+    };
+    const removeWordBefore = () => {
+        const current = Array.from(valueRef.current);
+        const at = Math.min(cursorRef.current, current.length);
+        let start = at;
+        while (start > 0 && current[start - 1] === " ")
+            start -= 1;
+        while (start > 0 && current[start - 1] !== " " && current[start - 1] !== "\n")
+            start -= 1;
+        if (start === at)
+            return;
+        update([...current.slice(0, start), ...current.slice(at)].join(""), start);
+    };
+    const moveVertical = (delta) => {
+        const current = Array.from(valueRef.current);
+        const at = Math.min(cursorRef.current, current.length);
+        const lines = layoutLines(current, contentWidth);
+        const currentPosition = cursorPosition(lines, at);
+        const targetIndex = Math.max(0, Math.min(lines.length - 1, currentPosition.line + delta));
+        const target = lines[targetIndex];
+        update(current.join(""), target.start + Math.min(currentPosition.column, target.text.length));
+    };
+    useEffect(() => {
+        if (disabled) {
+            setCursorOn(true);
+            return;
+        }
+        setCursorOn(true);
+        const timer = setInterval(() => setCursorOn((visible) => !visible), 530);
+        return () => clearInterval(timer);
+    }, [disabled]);
+    useInput((input, key) => {
+        if (key.eventType === "release")
+            return;
+        if (key.return) {
+            if (key.shift || key.ctrl || key.meta) {
+                insert("\n");
+            }
+            else {
+                const request = valueRef.current;
+                update("", 0);
+                onSubmit(request);
+            }
+            return;
+        }
+        if (key.home) {
+            const current = Array.from(valueRef.current);
+            update(current.join(""), lineStartAt(current, cursorRef.current));
+            return;
+        }
+        if (key.end) {
+            const current = Array.from(valueRef.current);
+            update(current.join(""), lineEndAt(current, cursorRef.current));
+            return;
+        }
+        if (key.pageUp) {
+            moveVertical(-maxVisible);
+            return;
+        }
+        if (key.pageDown) {
+            moveVertical(maxVisible);
+            return;
+        }
+        if (key.ctrl || key.meta) {
+            if (input === "a") {
+                const current = Array.from(valueRef.current);
+                update(current.join(""), lineStartAt(current, cursorRef.current));
+                return;
+            }
+            if (input === "e") {
+                const current = Array.from(valueRef.current);
+                update(current.join(""), lineEndAt(current, cursorRef.current));
+                return;
+            }
+            if (input === "u") {
+                const current = Array.from(valueRef.current);
+                const start = lineStartAt(current, cursorRef.current);
+                const at = Math.min(cursorRef.current, current.length);
+                update([...current.slice(0, start), ...current.slice(at)].join(""), start);
+                return;
+            }
+            if (input === "k") {
+                const current = Array.from(valueRef.current);
+                const end = lineEndAt(current, cursorRef.current);
+                const at = Math.min(cursorRef.current, current.length);
+                update([...current.slice(0, at), ...current.slice(end)].join(""), at);
+                return;
+            }
+            if (input === "w") {
+                removeWordBefore();
+                return;
+            }
+            return;
+        }
+        if (key.tab) {
+            return;
+        }
+        if (key.backspace) {
+            removeBefore();
+            return;
+        }
+        if (key.delete) {
+            removeAt();
+            return;
+        }
+        if (key.leftArrow) {
+            const current = Array.from(valueRef.current);
+            update(current.join(""), Math.max(0, cursorRef.current - 1));
+            return;
+        }
+        if (key.rightArrow) {
+            const current = Array.from(valueRef.current);
+            update(current.join(""), Math.min(current.length, cursorRef.current + 1));
+            return;
+        }
+        if (key.upArrow) {
+            moveVertical(-1);
+            return;
+        }
+        if (key.downArrow) {
+            moveVertical(1);
+            return;
+        }
+        if (key.escape)
+            return;
+        if (input)
+            insert(input);
+    }, { isActive: !disabled });
+    const renderLine = (line, index) => {
+        const isCursorLine = index + windowStart === position.line && !disabled;
+        if (!isCursorLine) {
+            return _jsx(Text, { children: line.text || " " }, `${line.start}-${index}`);
+        }
+        const lineChars = Array.from(line.text);
+        const column = Math.min(position.column, lineChars.length);
+        const before = lineChars.slice(0, column).join("");
+        const at = lineChars[column] ?? " ";
+        const after = lineChars.slice(column + 1).join("");
+        return (_jsxs(Text, { children: [before, _jsx(Text, { inverse: cursorOn, children: at }), after] }, `${line.start}-${index}`));
+    };
+    return (_jsxs(Box, { flexDirection: "column", width: outerWidth, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { children: [_jsx(Text, { color: theme.primary, children: "\u25C6" }), _jsx(Text, { color: theme.dim, children: " Ask anything" })] }), outerWidth >= 50 && value.length > 0 ? (_jsxs(Text, { color: theme.faint, children: [chars.length, " ", chars.length === 1 ? "char" : "chars"] })) : null] }), hiddenAbove > 0 ? (_jsxs(Text, { color: theme.faint, children: ["  ", "\u2191 ", hiddenAbove, " more ", hiddenAbove === 1 ? "line" : "lines"] })) : null, _jsx(Box, { width: outerWidth, borderStyle: "round", borderColor: disabled ? theme.faint : theme.primary, paddingX: 1, flexDirection: "column", children: value.length === 0 ? (_jsxs(Text, { children: [!disabled ? _jsx(Text, { inverse: cursorOn, children: " " }) : null, _jsx(Text, { color: theme.faint, children: placeholder })] })) : (visibleLines.map(renderLine)) }), hiddenBelow > 0 ? (_jsxs(Text, { color: theme.faint, children: ["  ", "\u2193 ", hiddenBelow, " more ", hiddenBelow === 1 ? "line" : "lines"] })) : null] }));
+}