castle-web-cli 0.4.63 → 0.4.65

package/dist/chat-client.js

@@ -1,538 +0,0 @@
-// Browser-side agent chat for the `castle-web serve` panel, as a React app.
-// React + ReactDOM + marked arrive as UMD globals (served from node_modules
-// like xterm); tsc compiles this file's JSX with the classic runtime, so it
-// ships straight from dist with no bundler.
-//
-// Talks to the agent WebSocket at /__castle/agent: replays the conversation +
-// tasks on connect, streams router replies, and live-updates the task board.
-// The panel chrome shared with the terminal (Chat | Terminal view switch,
-// progress-style setting) stays plain DOM on the static header elements.
-// Reflect server-side agent settings onto the static popover segs. Plain DOM
-// because the popover lives outside the React root.
-function applyBackendSegs(settings) {
-    const segs = [
-        ["agent-router-seg", settings.router],
-        ["agent-tasks-seg", settings.tasks],
-        ["agent-model-seg", settings.claudeModel],
-    ];
-    for (const [segId, value] of segs) {
-        if (!value)
-            continue;
-        for (const button of document.querySelectorAll(`#${segId} button`)) {
-            button.classList.toggle("active", (button.dataset.backend ?? button.dataset.model) === value);
-        }
-    }
-}
-const TERMINAL_TASK_STATUSES = ["done", "failed", "interrupted"];
-const ATTACHMENT_URL_PREFIX = "/__castle/agent/attachments/";
-function renderMarkdown(text) {
-    try {
-        return { __html: marked.parse(text, { breaks: true }) };
-    }
-    catch {
-        return { __html: "" };
-    }
-}
-//
-// Panel chrome: Chat | Terminal switch + progress-style setting. Plain DOM on
-// the server-rendered header; ide-client listens for the same view events to
-// run the terminal side (lazy PTY spawn, focus).
-//
-function focusChatInput() {
-    document.getElementById("chat-input")?.focus();
-}
-function initPanelChrome() {
-    const viewButtons = Array.from(document.querySelectorAll("#panel-view-seg button"));
-    const applyView = (view) => {
-        document.body.classList.toggle("term-view", view === "terminal");
-        for (const button of viewButtons) {
-            button.classList.toggle("active", button.dataset.view === view);
-        }
-        try {
-            localStorage.setItem("castle-panel-view", view);
-        }
-        catch {
-            /* storage disabled */
-        }
-    };
-    document.addEventListener("castle-panel-view", (event) => {
-        const detail = event
-            .detail;
-        if (!detail)
-            return;
-        const view = detail.view === "terminal" ? "terminal" : "chat";
-        applyView(view);
-        if (view === "chat" && detail.focus)
-            focusChatInput();
-    });
-    for (const button of viewButtons) {
-        button.addEventListener("click", () => {
-            const view = button.dataset.view === "terminal" ? "terminal" : "chat";
-            document.dispatchEvent(new CustomEvent("castle-panel-view", { detail: { view, focus: true } }));
-        });
-    }
-    let storedView = "chat";
-    try {
-        storedView =
-            localStorage.getItem("castle-panel-view") === "terminal"
-                ? "terminal"
-                : "chat";
-    }
-    catch {
-        /* storage disabled */
-    }
-    applyView(storedView);
-    // When the panel is toggled open onto the chat view, focus the input.
-    // ide-client's own click handler runs first and flips term-open; check the
-    // final state a tick later.
-    document.getElementById("term-toggle")?.addEventListener("click", () => {
-        window.setTimeout(() => {
-            if (document.body.classList.contains("term-open") &&
-                !document.body.classList.contains("term-view")) {
-                focusChatInput();
-            }
-        }, 0);
-    });
-    const progressButtons = Array.from(document.querySelectorAll("#chat-progress-seg button"));
-    const applyProgressStyle = (style) => {
-        document.body.classList.toggle("progress-bars", style === "bar");
-        for (const button of progressButtons) {
-            button.classList.toggle("active", button.dataset.progress === style);
-        }
-        try {
-            localStorage.setItem("castle-progress-style", style);
-        }
-        catch {
-            /* storage disabled */
-        }
-    };
-    for (const button of progressButtons) {
-        button.addEventListener("click", () => {
-            applyProgressStyle(button.dataset.progress === "bar" ? "bar" : "pie");
-        });
-    }
-    let storedStyle = "pie";
-    try {
-        storedStyle =
-            localStorage.getItem("castle-progress-style") === "bar" ? "bar" : "pie";
-    }
-    catch {
-        /* storage disabled */
-    }
-    applyProgressStyle(storedStyle);
-    // Backend / model segs: clicks become events the React app forwards to the
-    // server (the state lives in .castle/agent/settings.json).
-    const serverSegs = [
-        ["agent-router-seg", "router"],
-        ["agent-tasks-seg", "tasks"],
-        ["agent-model-seg", "claudeModel"],
-    ];
-    for (const [segId, segKey] of serverSegs) {
-        for (const button of document.querySelectorAll(`#${segId} button`)) {
-            button.addEventListener("click", () => {
-                const value = button.dataset.backend ?? button.dataset.model;
-                if (!value)
-                    return;
-                document.dispatchEvent(new CustomEvent("castle-set-backend", {
-                    detail: { key: segKey, value },
-                }));
-            });
-        }
-    }
-}
-//
-// React app.
-//
-function applyServerEvent(ev, setMessages, setTasks, setFeeds) {
-    if (ev.type === "hello") {
-        const messages = ev.messages ?? [];
-        const tasks = ev.tasks ?? [];
-        const feeds = ev.feeds ?? {};
-        setMessages(() => messages);
-        setTasks(() => tasks);
-        setFeeds(() => feeds);
-        if (ev.settings)
-            applyBackendSegs(ev.settings);
-    }
-    else if (ev.type === "task-feed" && ev.id) {
-        const id = ev.id;
-        const entry = ev.entry ?? "";
-        setFeeds((prev) => ({
-            ...prev,
-            [id]: [...(prev[id] ?? []).slice(-79), entry],
-        }));
-    }
-    else if (ev.type === "settings" && ev.settings) {
-        applyBackendSegs(ev.settings);
-    }
-    else if (ev.type === "message-add" && ev.message) {
-        const message = ev.message;
-        setMessages((prev) => [...prev, message]);
-    }
-    else if (ev.type === "message-delta" && ev.id) {
-        setMessages((prev) => prev.map((m) => m.id === ev.id ? { ...m, text: m.text + (ev.delta ?? "") } : m));
-    }
-    else if (ev.type === "message-activity" && ev.id) {
-        setMessages((prev) => prev.map((m) => m.id === ev.id ? { ...m, activity: ev.activity ?? null } : m));
-    }
-    else if (ev.type === "message-done" && ev.id) {
-        setMessages((prev) => prev.map((m) => m.id === ev.id
-            ? {
-                ...m,
-                text: ev.text ?? "",
-                status: ev.status ?? "done",
-                activity: null,
-                interrupted: ev.interrupted === true,
-            }
-            : m));
-    }
-    else if (ev.type === "task-update" && ev.task) {
-        const task = ev.task;
-        setTasks((prev) => {
-            const known = prev.some((t) => t.id === task.id);
-            const next = known
-                ? prev.map((t) => (t.id === task.id ? task : t))
-                : [...prev, task];
-            return next.sort((a, b) => a.createdAt.localeCompare(b.createdAt));
-        });
-        if (TERMINAL_TASK_STATUSES.includes(task.status)) {
-            setFeeds((prev) => {
-                if (!(task.id in prev))
-                    return prev;
-                const next = { ...prev };
-                delete next[task.id];
-                return next;
-            });
-        }
-    }
-}
-// Drop "[Reading X]" lines whose file is edited anywhere -- a read that's later
-// followed by an edit of the same file is redundant; just show the edit.
-function rollupFeed(lines) {
-    const editRe = /^\[Editing (.+)\]$/;
-    const readRe = /^\[Reading (.+)\]$/;
-    const edited = new Set();
-    for (const line of lines) {
-        const m = editRe.exec(line.trim());
-        if (m)
-            for (const f of m[1].split(", "))
-                edited.add(f);
-    }
-    const out = [];
-    for (const line of lines) {
-        const r = readRe.exec(line.trim());
-        if (r) {
-            const keep = r[1].split(", ").filter((f) => !edited.has(f));
-            if (keep.length === 0)
-                continue;
-            out.push(`[Reading ${keep.join(", ")}]`);
-            continue;
-        }
-        out.push(line);
-    }
-    return out;
-}
-// Collapse consecutive same-verb tool actions into one comma-separated line:
-// "[Editing A]" then "[Editing B]" -> "[Editing A, B]". Only word verbs merge
-// (Editing/Reading/...), so prose stays separate.
-function coalesceFeed(lines) {
-    const toolRe = /^\[([A-Za-z]+)\s+(.+)\]$/;
-    const out = [];
-    for (const line of lines) {
-        const m = toolRe.exec(line.trim());
-        if (m) {
-            const prev = out.length ? toolRe.exec(out[out.length - 1].trim()) : null;
-            if (prev && prev[1] === m[1]) {
-                if (!prev[2].split(", ").includes(m[2])) {
-                    out[out.length - 1] = `[${m[1]} ${prev[2]}, ${m[2]}]`;
-                }
-                continue;
-            }
-        }
-        out.push(line);
-    }
-    return out;
-}
-function TaskFeed(props) {
-    const hostRef = React.useRef(null);
-    React.useLayoutEffect(() => {
-        const host = hostRef.current;
-        if (host)
-            host.scrollTop = host.scrollHeight;
-    }, [props.lines]);
-    return (React.createElement("div", { className: "task-feed", ref: hostRef, onClick: (event) => event.stopPropagation() }, coalesceFeed(rollupFeed(props.lines)).map((line, index) => {
-        // Tool actions arrive bracketed (e.g. "[Editing Ball.jsx]"); render
-        // those as indented monospace. Everything else is the agent's prose --
-        // markdown-render it so **bold** / `code` show through.
-        const tool = /^\[(.+)\]$/.exec(line.trim());
-        if (tool) {
-            return (React.createElement("div", { key: index, className: "task-feed-tool" }, tool[1]));
-        }
-        return (React.createElement("div", { key: index, className: "task-feed-msg", dangerouslySetInnerHTML: renderMarkdown(line) }));
-    })));
-}
-// Stopwatch label: "7m 23s" (or just "23s" under a minute). Counts whole seconds.
-function fmtDuration(ms) {
-    const total = Math.max(0, Math.round(ms / 1000));
-    const m = Math.floor(total / 60);
-    const s = total % 60;
-    return m > 0 ? `${m}m ${s}s` : `${s}s`;
-}
-function TaskRow(props) {
-    const { task, onAck } = props;
-    const [expanded, setExpanded] = React.useState(false);
-    // Live stopwatch: re-render every second while running so the elapsed time
-    // ticks up; on finish the effect clears and the time freezes at the total.
-    const [nowMs, setNowMs] = React.useState(() => Date.now());
-    React.useEffect(() => {
-        if (task.status !== "running")
-            return undefined;
-        const timer = setInterval(() => setNowMs(Date.now()), 1000);
-        return () => clearInterval(timer);
-    }, [task.status]);
-    const startedMs = task.startedAt ? Date.parse(task.startedAt) : null;
-    const finishedMs = task.finishedAt ? Date.parse(task.finishedAt) : null;
-    const finished = TERMINAL_TASK_STATUSES.includes(task.status);
-    // A full circle means "click me to check off". A still-running task never
-    // fills completely, even if its agent already reports 100.
-    const pct = task.status === "done"
-        ? 100
-        : finished
-            ? task.progress
-            : Math.min(task.progress, 95);
-    const notes = task.notes.trim() || task.resultSummary?.trim() || "";
-    return (React.createElement("div", { className: `task-card${task.status === "waiting" ? " waiting" : ""}`, onClick: () => setExpanded(!expanded) },
-        React.createElement("div", { className: "task-row" },
-            React.createElement("span", { className: `task-pie${finished ? " task-ack-pie" : ""}`, title: finished ? "tested -- check off" : undefined, style: { background: `conic-gradient(#000000 ${pct}%, #eaeef2 0)` }, onClick: finished
-                    ? (event) => {
-                        event.stopPropagation();
-                        onAck(task.id, false);
-                    }
-                    : undefined }),
-            React.createElement("span", { className: "task-title" }, task.title),
-            task.status === "running" && startedMs != null ? (React.createElement("span", { className: "task-time" }, fmtDuration(nowMs - startedMs))) : task.status === "done" &&
-                startedMs != null &&
-                finishedMs != null ? (React.createElement("span", { className: "task-time" }, fmtDuration(finishedMs - startedMs))) : task.status !== "done" ? (React.createElement("span", { className: `task-status ${task.status}` }, task.status)) : null),
-        React.createElement("div", { className: "task-bar" },
-            React.createElement("div", { style: { width: `${pct}%` } })),
-        expanded &&
-            task.status === "running" &&
-            props.feed &&
-            props.feed.length > 0 ? (React.createElement(TaskFeed, { lines: props.feed })) : null,
-        expanded && task.status !== "running" && notes ? (React.createElement("div", { className: "task-notes", dangerouslySetInnerHTML: renderMarkdown(notes) })) : null));
-}
-function TaskBoard(props) {
-    // Hide only tasks that are acknowledged AND finished. An active
-    // (running/waiting) task always shows, even if somehow acked -- a running
-    // task must never go invisible while it (and its dependents) are live.
-    const visible = props.tasks.filter((t) => !(t.acknowledged && TERMINAL_TASK_STATUSES.includes(t.status)));
-    if (visible.length === 0)
-        return null;
-    return (React.createElement("div", { id: "chat-strip" }, visible.map((task) => (React.createElement(TaskRow, { key: task.id, task: task, feed: props.feeds[task.id], onAck: props.onAck })))));
-}
-function Message(props) {
-    const { msg } = props;
-    // A reply that was nothing but task directives strips to empty -- the board
-    // already shows the spawn, so don't render an empty husk of a card.
-    if (msg.role === "assistant" &&
-        msg.status !== "streaming" &&
-        !msg.text.trim()) {
-        return null;
-    }
-    if (msg.role === "log") {
-        return React.createElement("div", { className: "msg msg-log" }, msg.text);
-    }
-    if (msg.role === "user") {
-        return (React.createElement("div", { className: "msg msg-user" },
-            (msg.attachments ?? []).map((name) => (React.createElement("img", { key: name, className: "msg-image", src: `${ATTACHMENT_URL_PREFIX}${name}`, alt: "" }))),
-            msg.text ? React.createElement("div", { className: "msg-text" }, msg.text) : null));
-    }
-    const classes = ["msg", "msg-assistant"];
-    if (msg.status === "streaming")
-        classes.push("streaming");
-    if (msg.status === "error")
-        classes.push("msg-error");
-    return (React.createElement("div", { className: classes.join(" ") },
-        React.createElement("div", { className: "msg-text", dangerouslySetInnerHTML: renderMarkdown(msg.text) }),
-        msg.status === "streaming" && msg.activity ? (React.createElement("div", { className: "msg-activity" },
-            msg.activity,
-            "...")) : null,
-        msg.interrupted ? (React.createElement("div", { className: "msg-interrupted" }, "interrupted by your next message")) : null));
-}
-function MessageList(props) {
-    const hostRef = React.useRef(null);
-    // Distance from the bottom of the scroll region -- the value to preserve.
-    // The list is bottom-anchored: when the viewport resizes (task board grows
-    // or a card expands above), keep the same content at the bottom instead of
-    // letting the chat get pushed around.
-    const fromBottomRef = React.useRef(0);
-    const pinnedRef = React.useRef(true);
-    React.useLayoutEffect(() => {
-        const host = hostRef.current;
-        if (host && pinnedRef.current)
-            host.scrollTop = host.scrollHeight;
-    }, [props.messages]);
-    React.useEffect(() => {
-        const host = hostRef.current;
-        if (!host)
-            return;
-        const observer = new ResizeObserver(() => {
-            host.scrollTop =
-                host.scrollHeight - host.clientHeight - fromBottomRef.current;
-        });
-        observer.observe(host);
-        return () => observer.disconnect();
-    }, []);
-    const handleScroll = () => {
-        const host = hostRef.current;
-        if (!host)
-            return;
-        fromBottomRef.current =
-            host.scrollHeight - host.scrollTop - host.clientHeight;
-        pinnedRef.current = fromBottomRef.current < 48;
-    };
-    return (React.createElement("div", { id: "chat-messages", ref: hostRef, onScroll: handleScroll },
-        props.messages.length === 0 ? (React.createElement("div", { id: "chat-empty" }, "Tell the agent what you want to make.")) : null,
-        props.messages.map((msg) => (React.createElement(Message, { key: msg.id, msg: msg })))));
-}
-function readImageFiles(files, add) {
-    for (const file of Array.from(files)) {
-        if (!file.type.startsWith("image/"))
-            continue;
-        const reader = new FileReader();
-        reader.onload = () => {
-            if (typeof reader.result === "string")
-                add({ name: file.name, dataUrl: reader.result });
-        };
-        reader.readAsDataURL(file);
-    }
-}
-function InputRow(props) {
-    const [value, setValue] = React.useState("");
-    const [pending, setPending] = React.useState([]);
-    const inputRef = React.useRef(null);
-    const autosize = () => {
-        const el = inputRef.current;
-        if (!el)
-            return;
-        el.style.height = "auto";
-        el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
-    };
-    React.useLayoutEffect(autosize, [value]);
-    const addImage = (img) => {
-        setPending((prev) => (prev.length >= 6 ? prev : [...prev, img]));
-    };
-    const send = () => {
-        const text = value.trim();
-        if (!text && pending.length === 0)
-            return;
-        props.onSend(text, pending);
-        setValue("");
-        setPending([]);
-    };
-    return (React.createElement(React.Fragment, null,
-        pending.length > 0 ? (React.createElement("div", { id: "chat-pending" }, pending.map((img, index) => (React.createElement("img", { key: `${img.name}-${index}`, src: img.dataUrl, alt: img.name, title: "remove", onClick: () => setPending((prev) => prev.filter((_, i) => i !== index)) }))))) : null,
-        React.createElement("div", { id: "chat-input-row" },
-            React.createElement("textarea", { id: "chat-input", ref: inputRef, rows: 1, placeholder: "Message the agent...", value: value, onChange: (event) => setValue(event.target.value), onPaste: (event) => {
-                    const files = event.clipboardData?.files;
-                    if (files && files.length > 0) {
-                        event.preventDefault();
-                        readImageFiles(files, addImage);
-                    }
-                }, onKeyDown: (event) => {
-                    if (event.key === "Enter" &&
-                        !event.shiftKey &&
-                        !event.metaKey &&
-                        !event.altKey) {
-                        event.preventDefault();
-                        send();
-                    }
-                } }),
-            React.createElement("button", { id: "chat-send", type: "button", tabIndex: -1, onClick: send }, "Send"))));
-}
-function App() {
-    const [messages, setMessages] = React.useState([]);
-    const [tasks, setTasks] = React.useState([]);
-    const [feeds, setFeeds] = React.useState({});
-    const sendRef = React.useRef(() => undefined);
-    React.useEffect(() => {
-        const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-        const wsUrl = `${wsProtocol}//${window.location.host}/__castle/agent`;
-        let ws = null;
-        let alive = true;
-        let retryMs = 500;
-        const outbox = [];
-        sendRef.current = (payload) => {
-            const data = JSON.stringify(payload);
-            if (ws && ws.readyState === WebSocket.OPEN)
-                ws.send(data);
-            else
-                outbox.push(data);
-        };
-        const connect = () => {
-            if (!alive || document.visibilityState === "hidden")
-                return;
-            const sock = new WebSocket(wsUrl);
-            ws = sock;
-            sock.addEventListener("open", () => {
-                retryMs = 500;
-                while (outbox.length > 0 && sock.readyState === sock.OPEN) {
-                    const queued = outbox.shift();
-                    if (queued)
-                        sock.send(queued);
-                }
-            });
-            sock.addEventListener("message", (event) => {
-                try {
-                    applyServerEvent(JSON.parse(String(event.data)), setMessages, setTasks, setFeeds);
-                }
-                catch {
-                    /* malformed frame */
-                }
-            });
-            sock.addEventListener("close", () => {
-                if (ws !== sock)
-                    return;
-                ws = null;
-                if (!alive)
-                    return;
-                window.setTimeout(connect, retryMs);
-                retryMs = Math.min(retryMs * 2, 15000);
-            });
-        };
-        const onVisibility = () => {
-            if (document.visibilityState !== "hidden" && !ws)
-                connect();
-        };
-        const onSetBackend = (event) => {
-            const detail = event
-                .detail;
-            if (!detail?.key || !detail.value)
-                return;
-            sendRef.current({ type: "set-settings", [detail.key]: detail.value });
-        };
-        document.addEventListener("visibilitychange", onVisibility);
-        document.addEventListener("castle-set-backend", onSetBackend);
-        connect();
-        return () => {
-            alive = false;
-            document.removeEventListener("visibilitychange", onVisibility);
-            document.removeEventListener("castle-set-backend", onSetBackend);
-            ws?.close();
-        };
-    }, []);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TaskBoard, { tasks: tasks, feeds: feeds, onAck: (id, rejected) => sendRef.current({ type: "task-ack", id, rejected }) }),
-        React.createElement(MessageList, { messages: messages }),
-        React.createElement(InputRow, { onSend: (text, images) => sendRef.current({ type: "user-message", text, images }) })));
-}
-initPanelChrome();
-const chatHost = document.getElementById("chat-host");
-if (chatHost) {
-    ReactDOM.createRoot(chatHost).render(React.createElement(App, null));
-    if (document.body.classList.contains("term-open") &&
-        !document.body.classList.contains("term-view")) {
-        window.setTimeout(focusChatInput, 0);
-    }
-}
-export {};

package/dist/ide-client.d.ts

@@ -1 +0,0 @@
-export {};