castle-web-cli 0.4.10 → 0.4.12

package/dist/chat-client.d.ts

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

package/dist/chat-client.js

@@ -0,0 +1,398 @@
+// 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) {
+    if (ev.type === 'hello') {
+        const messages = ev.messages ?? [];
+        const tasks = ev.tasks ?? [];
+        setMessages(() => messages);
+        setTasks(() => tasks);
+        if (ev.settings)
+            applyBackendSegs(ev.settings);
+    }
+    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));
+        });
+    }
+}
+function TaskRow(props) {
+    const { task, onAck } = props;
+    const [expanded, setExpanded] = React.useState(false);
+    const pct = task.status === 'done' ? 100 : task.progress;
+    const finished = TERMINAL_TASK_STATUSES.includes(task.status);
+    const notes = task.notes.trim() || task.resultSummary?.trim() || '(no notes from the agent yet)';
+    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(#0969da ${pct}%, #eaeef2 0)` }, onClick: finished
+                    ? (event) => {
+                        event.stopPropagation();
+                        onAck(task.id, false);
+                    }
+                    : undefined }),
+            React.createElement("span", { className: "task-title" }, task.title),
+            task.status !== 'done' ? (React.createElement("span", { className: `task-status ${task.status}` }, task.status === 'running' ? `${pct}%` : task.status)) : null),
+        React.createElement("div", { className: "task-bar" },
+            React.createElement("div", { style: { width: `${pct}%` } })),
+        expanded ? (React.createElement("div", { className: "task-notes", dangerouslySetInnerHTML: renderMarkdown(notes) })) : null));
+}
+function TaskBoard(props) {
+    const visible = props.tasks.filter((t) => !t.acknowledged);
+    if (visible.length === 0)
+        return null;
+    return (React.createElement("div", { id: "chat-strip" }, visible.map((task) => (React.createElement(TaskRow, { key: task.id, task: task, onAck: props.onAck })))));
+}
+function Message(props) {
+    const { msg } = props;
+    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 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);
+                }
+                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, 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/commonInstructions.d.ts

@@ -0,0 +1 @@
+export declare const COMMON_INSTRUCTIONS = "## Touch controls (every deck)\n\n- **Build for touch from the start.** Every deck must be fully playable on a touchscreen with no physical keyboard \u2014 design the touch controls first, not as an afterthought. Keyboard input is still fine on top, for shortcuts or typing. A touch control that only mirrors keys (e.g. a d-pad over the arrow keys) may hide itself when a hardware keyboard is present. Use good judgement.\n";

package/dist/commonInstructions.js

@@ -0,0 +1,8 @@
+// Common agent guidance appended by `castle-web init` to every scaffolded
+// deck's CLAUDE.md, regardless of kit (or no kit). Single source of truth —
+// edit here, not in the kits. Keep it truly kit-agnostic; kit-specific rules
+// (e.g. Space being reserved for play/stop) live in each kit's own CLAUDE.md.
+export const COMMON_INSTRUCTIONS = `## Touch controls (every deck)
+
+- **Build for touch from the start.** Every deck must be fully playable on a touchscreen with no physical keyboard — design the touch controls first, not as an afterthought. Keyboard input is still fine on top, for shortcuts or typing. A touch control that only mirrors keys (e.g. a d-pad over the arrow keys) may hide itself when a hardware keyboard is present. Use good judgement.
+`;

package/dist/ide-client.js

@@ -124,11 +124,13 @@
     //
     const openStorageKey = 'castle-terminal-open';
     function storedOpen() {
+        // The panel (chat by default) is open unless the user closed it.
         try {
-            return localStorage.getItem(openStorageKey) === '1';
+            const value = localStorage.getItem(openStorageKey);
+            return value === null ? true : value === '1';
         }
         catch {
-            return false;
+            return true;
         }
     }
     function persistOpen(open) {
@@ -159,10 +161,27 @@
                 document.body.classList.remove('term-settings-open');
                 return;
             }
-            activateTerminal();
-            term.focus();
+            // Only the terminal view needs the PTY; the chat client handles its own
+            // focus when the panel opens onto the chat view.
+            if (document.body.classList.contains('term-view')) {
+                activateTerminal();
+                term.focus();
+            }
         });
     }
+    // The chat client owns the chat | terminal view switch and dispatches
+    // `castle-panel-view`; the terminal side reacts here (lazy PTY spawn + fit).
+    document.addEventListener('castle-panel-view', (event) => {
+        const detail = event.detail;
+        if (!detail || detail.view !== 'terminal')
+            return;
+        if (!document.body.classList.contains('term-open'))
+            return;
+        activateTerminal();
+        fitAndSendResize();
+        if (detail.focus)
+            term.focus();
+    });
     //
     // Settings cog: a small popover with a light/dark theme switch for the
     // terminal. The choice persists in localStorage.
@@ -233,13 +252,16 @@
             /* storage disabled -- focus side just won't persist */
         }
         if (target === 'terminal') {
-            // Focusing the terminal implies revealing it.
+            // Focusing the panel implies revealing it. Focus lands on whichever
+            // view the panel is showing -- the chat input or the terminal. The
+            // chat client flips classes / focuses its input on this event; the
+            // listener above does the PTY activation + focus for the terminal.
             if (!document.body.classList.contains('term-open')) {
                 document.body.classList.add('term-open');
                 persistOpen(true);
-                activateTerminal();
             }
-            term.focus();
+            const view = document.body.classList.contains('term-view') ? 'terminal' : 'chat';
+            document.dispatchEvent(new CustomEvent('castle-panel-view', { detail: { view, focus: true } }));
         }
         else {
             deckFrame?.contentWindow?.focus();
@@ -248,7 +270,7 @@
     function toggleFocus() {
         setFocus(focusTarget === 'terminal' ? 'deck' : 'terminal');
     }
-    // Ctrl+T while the parent (terminal or shell chrome) holds focus. Capture
+    // Ctrl+T while the parent (panel or shell chrome) holds focus. Capture
     // phase + stopImmediatePropagation so xterm never receives the keystroke.
     document.addEventListener('keydown', (event) => {
         if (event.ctrlKey &&
@@ -269,12 +291,16 @@
             return;
         toggleFocus();
     });
-    // Keep focusTarget honest when focus moves by click rather than Ctrl+T.
+    // Keep focusTarget honest when focus moves by click rather than Tab/Ctrl+T.
     if (term.textarea) {
         term.textarea.addEventListener('focus', () => {
             focusTarget = 'terminal';
         });
     }
+    document.addEventListener('focusin', (event) => {
+        if (event.target?.id === 'chat-input')
+            focusTarget = 'terminal';
+    });
     window.addEventListener('blur', () => {
         if (deckFrame && document.activeElement === deckFrame)
             focusTarget = 'deck';
@@ -510,10 +536,14 @@
     }, { passive: false });
     const observer = new ResizeObserver(() => fitAndSendResize());
     observer.observe(host);
-    // Restore the persisted open state: if the terminal was open last visit,
-    // reveal it and reconnect (re-attaching, or spawning, the pty).
-    if (storedOpen()) {
-        document.body.classList.add('term-open');
+    // Restore the persisted open state. The server renders the panel open (the
+    // body ships with `term-open`); drop it if the user had closed it. The chat
+    // client runs first and restores the view class, so a terminal-view restore
+    // can spawn its PTY right away.
+    if (!storedOpen()) {
+        document.body.classList.remove('term-open');
+    }
+    else if (document.body.classList.contains('term-view')) {
         activateTerminal();
     }
     // Restore the persisted focus side. xterm needs a layout pass after
@@ -522,7 +552,9 @@
     // fails. Defer the terminal-focus restore behind a fit + two animation
     // frames so the grid has settled first (matching threads' post-layout
     // focus sequencing).
-    if (storedFocus() === 'terminal' && document.body.classList.contains('term-open')) {
+    if (storedFocus() === 'terminal' &&
+        document.body.classList.contains('term-open') &&
+        document.body.classList.contains('term-view')) {
         window.requestAnimationFrame(() => {
             fitNow();
             window.requestAnimationFrame(() => {

package/dist/ide.d.ts

@@ -1,8 +1,10 @@
 import * as http from 'http';
 import { Duplex } from 'stream';
+import { type RawData } from 'ws';
 export declare const IDE_ASSET_PREFIX = "/__castle/ide/";
 export declare const PTY_WS_PATH = "/__castle/pty";
 export declare const DECK_FOCUS_SCRIPT: string;
+export declare function rawDataToString(data: RawData): string;
 export interface IdeServer {
     /** Serve the IDE page + its static assets. Returns true if it handled the request. */
     handleHttpRequest(req: http.IncomingMessage, res: http.ServerResponse, reqPath: string): boolean;