anentrypoint-design 0.0.458 → 0.0.459

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.458",
+  "version": "0.0.459",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/chat-message-parts/agent-nodes.js

@@ -89,6 +89,35 @@ export function ToolCallNode(p) {
     );
 }
 
+// Approval-request card for the freddie wire protocol's approval.request event
+// (plugins/gui/gui-agent): a gated tool call pauses mid-turn until the user
+// resolves it here. p.onResolve({approved, always?}) sends the decision back
+// over the same channel; once resolved the card renders the settled state.
+export function ApprovalNode(p) {
+    const status = p.status || 'pending';
+    const argsText = typeof p.args === 'string' ? p.args : JSON.stringify(p.args || {}, null, 2);
+    const iconName = status === 'pending' ? 'warn' : (status === 'approved' ? 'check' : 'warn');
+    const decide = (decision) => (e) => { e.preventDefault(); if (p.onResolve) p.onResolve(decision); };
+    return h('div', { class: 'chat-bubble chat-tool chat-approval tool-' + (status === 'pending' ? 'running' : status) },
+        h('div', { class: 'chat-tool-head' },
+            h('span', { class: 'chat-tool-icon', 'aria-hidden': 'true' }, Icon(iconName, { size: 14 })),
+            h('span', { class: 'chat-tool-name' }, 'approval: ' + (p.name || 'tool')),
+            h('span', { class: 'chat-tool-status' }, status)
+        ),
+        h('div', { class: 'chat-tool-body' },
+            h('div', { class: 'chat-tool-section' },
+                h('div', { class: 'chat-tool-section-label' }, h('span', {}, 'args')),
+                h('pre', { class: 'chat-tool-pre' }, h('code', {}, argsText))),
+            status === 'pending'
+                ? h('div', { class: 'chat-approval-actions' },
+                    h('button', { type: 'button', class: 'chat-code-copy chat-approval-btn', onclick: decide({ approved: true }) }, 'approve'),
+                    h('button', { type: 'button', class: 'chat-code-copy chat-approval-btn', onclick: decide({ approved: true, always: true }) }, 'always'),
+                    h('button', { type: 'button', class: 'chat-code-copy chat-approval-btn', onclick: decide({ approved: false }) }, 'reject'))
+                : h('div', { class: 'chat-approval-note' }, status === 'approved' ? (p.always ? 'approved (always, this turn)' : 'approved') : 'rejected')
+        )
+    );
+}
+
 export function ThinkingNode(p) {
     if (p.settled) {
         return h('details', { class: 'chat-bubble chat-thinking-settled' },

package/src/components/chat-message-parts/renderers.js

@@ -7,7 +7,7 @@ import { Icon } from '../shell.js';
 import { fmtFileSize } from '../files.js';
 import { safeUrl, renderInline, fileIconName } from './inline.js';
 import { MdNode, CodeNode } from './prose-nodes.js';
-import { ToolCallNode, ThinkingNode } from './agent-nodes.js';
+import { ToolCallNode, ThinkingNode, ApprovalNode } from './agent-nodes.js';
 
 const h = webjsx.createElement;
 
@@ -35,6 +35,7 @@ export const PART_RENDERERS = {
     tool_call:   (p) => ToolCallNode(p),
     tool_result: (p) => ToolCallNode({ ...p, name: p.name || 'tool_result', result: p.text != null ? p.text : p.result }),
     thinking:    (p) => ThinkingNode(p),
+    approval:    (p) => ApprovalNode(p),
     image: (p) => {
         // Guard both the wrapping link and the img src against unsafe schemes
         // (e.g. a data:text/html src) so an embedded-image part from untrusted

package/src/components/freddie/pages-chat.js

@@ -1,5 +1,19 @@
-// Freddie conversational pages: the streaming `chat` page (SSE over POST,
-// offline outbox queueing, abortable turns) and the `voice` backend probe.
+// Freddie conversational pages: the `chat` agent-workspace page (WebSocket
+// over the freddie wire protocol — replay + live turn events + prompt/steer/
+// cancel/approve, no more 120s POST ceiling) and the `voice` backend probe.
+//
+// Transport: WS /api/agent/stream?sessionId=<id> (plugins/gui/gui-agent).
+// The page owns the session id (generated client-side so the socket can
+// subscribe BEFORE the first prompt) and rebuilds its transcript from the
+// server's wire log on (re)connect, so a refresh mid-turn loses nothing.
+// The legacy POST /api/chat path remains only for the offline outbox flush.
+//
+// Event -> transcript mapping (freddie wire envelope {v,event,sessionId,ts,data}):
+//   message.append(user|assistant)  -> thread messages
+//   tool.start / tool.end           -> interleaved tool cards (running -> done/error)
+//   approval.request / .resolved    -> ApprovalNode cards (approve/always/reject)
+//   steer.append                    -> user message (mid-turn injection)
+//   session.error                   -> error pinned to the live assistant turn
 
 import * as webjsx from '../../../vendor/webjsx/index.js';
 import { makePage, api, loadingState, emptyState } from './runtime.js';
@@ -9,20 +23,73 @@ import { formatTime } from '../../locale.js';
 import { queueMessage, watchReconnect, isOnline } from '../../idb-outbox.js';
 import { AgentChat } from '../agent-chat.js';
 import { section, noteAlert } from './shared.js';
-import { parseSseStream, toolProgressPart, partsFromMessages } from './sse.js';
 
 const h = webjsx.createElement;
 
+function newSessionId() {
+    return (crypto.randomUUID ? crypto.randomUUID() : 's' + Date.now().toString(36) + Math.random().toString(16).slice(2));
+}
+
+// Apply one wire envelope to a messages array (shared by replay rebuild and
+// the live stream). `sendApprove` is only needed for live approval cards.
+function applyEnvelope(msgs, env, sendApprove) {
+    const { event, data } = env;
+    const ts = new Date(env.ts).getTime();
+    const lastAssistant = () => { for (let i = msgs.length - 1; i >= 0; i--) if (msgs[i].role === 'assistant') return msgs[i]; return null; };
+    // The page echoes its own sends into the thread optimistically; the server
+    // then emits the SAME user/steer text as an authoritative event. The local
+    // echo is followed by the placeholder assistant bubble, so scan back past
+    // it (and any parts) for a matching user message before appending a dupe.
+    const isDupUser = (text) => {
+        for (let i = msgs.length - 1; i >= 0 && i >= msgs.length - 3; i--) {
+            if (msgs[i].role === 'user' && msgs[i].content === (text || '')) return true;
+        }
+        return false;
+    };
+    if (event === 'message.append') {
+        if (data.role === 'user') { if (!isDupUser(data.content)) msgs.push({ id: 'u' + msgs.length + env.ts, role: 'user', content: data.content || '', time: formatTime(ts) }); }
+        else if (data.role === 'assistant') {
+            const last = msgs[msgs.length - 1];
+            // A new assistant turn starts after a user message; consecutive
+            // assistant appends within one turn update the SAME bubble.
+            if (last && last.role === 'assistant' && last._live) { if (data.content) last.content = data.content; }
+            else msgs.push({ id: 'a' + msgs.length + env.ts, role: 'assistant', content: data.content || '', parts: [], time: formatTime(ts), _live: true });
+        }
+    } else if (event === 'steer.append') {
+        if (!isDupUser(data.text)) msgs.push({ id: 'u' + msgs.length + env.ts, role: 'user', content: data.text || '', time: formatTime(ts) });
+    } else if (event === 'assistant.delta') {
+        // Progressive text mid-turn: accumulate into the live bubble; the
+        // settled message.append at turn end overwrites with the authoritative
+        // full content, so a dropped delta never corrupts the transcript.
+        const a = lastAssistant(); if (a && a._live) a.content = (a.content || '') + (data.text || '');
+    } else if (event === 'tool.start') {
+        const a = lastAssistant(); if (a) (a.parts || (a.parts = [])).push({ kind: 'tool', name: data.name || 'tool', args: data.args || {}, status: 'running', _tcid: data.toolCallId });
+    } else if (event === 'tool.end') {
+        const a = lastAssistant(); if (a) {
+            const p = (a.parts || []).find(p => p.kind === 'tool' && p._tcid === data.toolCallId);
+            if (p) {
+                p.status = data.denied ? 'error' : 'done';
+                p.result = data.denied ? 'denied by user' : (typeof data.result === 'string' ? data.result : JSON.stringify(data.result ?? '', null, 2));
+                if (data.denied) p.error = true;
+            }
+        }
+    } else if (event === 'approval.request') {
+        const a = lastAssistant(); if (a) (a.parts || (a.parts = [])).push({ kind: 'approval', id: data.id, name: data.name, args: data.args || {}, status: 'pending', onResolve: sendApprove ? (d) => sendApprove(data.id, d) : null });
+    } else if (event === 'approval.resolved') {
+        const a = lastAssistant(); if (a) {
+            const p = (a.parts || []).find(p => p.kind === 'approval' && p.id === data.id);
+            if (p) { p.status = data.approved ? 'approved' : 'rejected'; p.always = !!data.always; }
+        }
+    }
+}
+
 export const chat = makePage((ctx) => {
-    Object.assign(ctx.state, { loading: false, messages: [], draft: '', busy: false, error: null, abort: null });
+    Object.assign(ctx.state, { loading: false, messages: [], draft: '', busy: false, error: null, sessionId: null, ws: null, conn: 'closed' });
 
     // Offline outbox: a prompt sent while genuinely offline queues to
-    // IndexedDB and auto-flushes on the real 'online' event, rather than
-    // surfacing a hard error the user can't act on. True offline LLM
-    // response generation is impossible by definition -- a queued message
-    // only gets a reply once connectivity actually returns. Reconnect-flush
-    // still goes through the single-shot JSON path (no live UI to stream
-    // into for a message sent while this page may not even be mounted).
+    // IndexedDB and auto-flushes on the real 'online' event via the legacy
+    // single-shot POST path (no live UI to stream into for a message sent
+    // while this page may not even be mounted).
     async function sendQueuedToServer(body) {
         const r = await api('/api/chat', { method: 'POST', body });
         const reply = r.result || r.content || r.message || (r.messages && r.messages.at(-1)?.content) || JSON.stringify(r);
@@ -31,97 +98,130 @@ export const chat = makePage((ctx) => {
     }
     watchReconnect('chat', sendQueuedToServer);
 
+    const s = () => ctx.state;
+    const cur = () => s().messages[s().messages.length - 1];
+
+    function sendFrame(obj) {
+        const ws = s().ws;
+        if (!ws) return false;
+        if (ws.readyState === 1) { ws.send(JSON.stringify(obj)); return true; }
+        if (ws.readyState === 0) { ws.addEventListener('open', () => ws.send(JSON.stringify(obj)), { once: true }); return true; }
+        return false;
+    }
+
+    function ensureWs() {
+        const st = s();
+        if (!st.sessionId) st.sessionId = newSessionId();
+        if (st.ws && (st.ws.readyState === 1 || st.ws.readyState === 0)) return st.ws;
+        try {
+            const proto = location.protocol === 'https:' ? 'wss' : 'ws';
+            const ws = new WebSocket(proto + '://' + location.host + '/api/agent/stream?sessionId=' + encodeURIComponent(st.sessionId));
+            st.ws = ws;
+            ws.onopen = () => { st.conn = 'open'; ctx.rerender(); };
+            ws.onmessage = (e) => {
+                let f; try { f = JSON.parse(e.data); } catch { return; }
+                if (f.type === 'replay') {
+                    // Rebuild from the server's wire log only when the local
+                    // thread is empty (first mount / refresh), never clobber a
+                    // live thread with a reconnect's replay.
+                    if (!st.messages.length && f.events && f.events.length) {
+                        const msgs = [];
+                        for (const env of f.events) applyEnvelope(msgs, env, null);
+                        // Settled replay: turns are complete, drop the _live marker.
+                        for (const m of msgs) delete m._live;
+                        st.messages = msgs;
+                    }
+                    ctx.rerender();
+                } else if (f.type === 'event') {
+                    applyEnvelope(st.messages, f, (id, d) => sendFrame({ type: 'approve', id, approved: d.approved, always: !!d.always }));
+                    ctx.rerender();
+                } else if (f.type === 'prompt.done') {
+                    const c = cur();
+                    if (c && c.role === 'assistant') {
+                        delete c._live;
+                        if (f.error && !c.error) c.error = f.error;
+                    }
+                    ctx.set({ busy: false });
+                } else if (f.type === 'error') {
+                    const c = cur();
+                    if (c && c.role === 'assistant') c.error = f.error;
+                    ctx.set({ busy: false });
+                }
+            };
+            ws.onclose = () => {
+                st.conn = 'closed';
+                if (st.busy) {
+                    const c = cur();
+                    if (c && c.role === 'assistant') { delete c._live; c.incomplete = true; }
+                    ctx.set({ busy: false });
+                }
+                ctx.rerender();
+            };
+            ws.onerror = () => { st.conn = 'closed'; };
+            return ws;
+        } catch { return null; }
+    }
+
     async function send(text) {
-        const t = (typeof text === 'string' ? text : ctx.state.draft || '').trim();
-        if (!t || ctx.state.busy) return;
+        const t = (typeof text === 'string' ? text : s().draft || '').trim();
+        if (!t) return;
+
+        // Mid-turn send = STEER (kimi's steering): injected at the next step
+        // boundary instead of starting a parallel turn.
+        if (s().busy) {
+            if (sendFrame({ type: 'steer', text: t })) {
+                s().messages = [...s().messages, { id: 'u' + Date.now(), role: 'user', content: t, time: formatTime(Date.now()) }];
+                ctx.set({ draft: '' });
+            }
+            return;
+        }
+
         const userMsg = { id: 'u' + Date.now(), role: 'user', content: t, time: formatTime(Date.now()) };
-        const curMsg = { id: 'a' + (Date.now() + 1), role: 'assistant', content: '', time: formatTime(Date.now()), parts: [] };
-        ctx.state.messages = [...ctx.state.messages, userMsg, curMsg];
+        const curMsg = { id: 'a' + (Date.now() + 1), role: 'assistant', content: '', time: formatTime(Date.now()), parts: [], _live: true };
+        s().messages = [...s().messages, userMsg, curMsg];
         ctx.set({ draft: '', busy: true, error: null });
 
         if (!isOnline()) {
             await queueMessage('chat', { prompt: t });
-            ctx.state.messages = ctx.state.messages.slice(0, -1);
-            ctx.state.messages.push({ id: curMsg.id, role: 'assistant', content: '(offline -- queued, will send when connection returns)', time: formatTime(Date.now()) });
+            s().messages = s().messages.slice(0, -1);
+            s().messages.push({ id: curMsg.id, role: 'assistant', content: '(offline -- queued, will send when connection returns)', time: formatTime(Date.now()) });
             ctx.set({ busy: false });
             return;
         }
 
-        const ctrl = new AbortController();
-        ctx.state.abort = ctrl;
-        const cur = ctx.state.messages[ctx.state.messages.length - 1];
-        try {
-            const res = await fetch('/api/chat', {
-                method: 'POST',
-                headers: { 'content-type': 'application/json', accept: 'text/event-stream' },
-                body: JSON.stringify({ prompt: t, sessionId: ctx.state.sessionId || undefined }),
-                signal: ctrl.signal,
-            });
-            if (!res.ok || !res.body) {
-                const txt = await res.text().catch(() => '');
-                throw new Error(txt || ('HTTP ' + res.status));
-            }
-            let finalMessages = null;
-            for await (const { event, data } of parseSseStream(res)) {
-                if (ctrl.signal.aborted) break;
-                if (event === 'start') {
-                    if (data && data.sessionId) ctx.state.sessionId = data.sessionId;
-                } else if (event === 'tool_progress') {
-                    cur.parts.push(toolProgressPart(data || {}));
-                    ctx.rerender();
-                } else if (event === 'message') {
-                    // Buffered per-message events land right before `done` -- accumulate
-                    // rather than rerender per-message; the final rebuild below is O(1)
-                    // extra work and avoids a flurry of rerenders in the same tick.
-                    (finalMessages || (finalMessages = [])).push(data);
-                } else if (event === 'error') {
-                    cur.error = String((data && data.error) || 'stream error');
-                    ctx.rerender();
-                } else if (event === 'done') {
-                    if (finalMessages && finalMessages.length) {
-                        cur.parts = partsFromMessages(finalMessages);
-                        // Prefer the settled assistant text as plain content when the
-                        // rebuilt parts carry exactly one md part (the common no-tool-call
-                        // case) -- keeps AgentChat's md-vs-content dedup path simple.
-                        cur.content = '';
-                    } else if (data && data.result) {
-                        cur.content = String(data.result);
-                    }
-                    ctx.rerender();
-                }
-            }
-        } catch (e) {
-            if (e && e.name === 'AbortError') {
-                cur.stopped = true;
-            } else {
-                cur.error = String(e && e.message || e);
-            }
-        } finally {
-            ctx.state.abort = null;
+        if (!ensureWs() || !sendFrame({ type: 'prompt', text: t })) {
+            curMsg.error = 'agent workspace connection unavailable';
+            delete curMsg._live;
             ctx.set({ busy: false });
         }
     }
 
     function stop() {
-        if (ctx.state.abort) { try { ctx.state.abort.abort(); } catch { /* swallow: already settled */ } }
+        sendFrame({ type: 'cancel' });
+        const c = cur();
+        if (c && c.role === 'assistant') c.stopped = true;
+        ctx.rerender();
     }
 
     return () => {
-        const s = ctx.state;
+        const st = s();
         return h('div', { class: 'fd-chat' },
             AgentChat({
-                messages: s.messages,
-                busy: s.busy,
-                draft: s.draft,
-                status: s.busy ? 'streaming…' : 'ready',
+                messages: st.messages,
+                busy: st.busy,
+                draft: st.draft,
+                status: st.busy ? 'streaming…' : (st.conn === 'open' ? 'ready' : 'connecting…'),
                 agentName: 'freddie',
-                placeholder: s.busy ? 'waiting for reply…' : 'message…',
+                placeholder: st.busy ? 'steer the turn… (or stop)' : 'message…',
                 showMinimap: true,
-                banners: s.error ? [noteAlert({ kind: 'error', msg: s.error })] : [],
-                onInput: (v) => { s.draft = v; },
+                banners: st.error ? [noteAlert({ kind: 'error', msg: st.error })] : [],
+                onInput: (v) => { st.draft = v; },
                 onSend: send,
                 onStop: stop,
-                onNewChat: () => ctx.set({ messages: [], draft: '', error: null, sessionId: null }),
+                onNewChat: () => {
+                    try { st.ws && st.ws.close(); } catch { /* already closed */ }
+                    ctx.set({ messages: [], draft: '', error: null, sessionId: null, ws: null, conn: 'closed' });
+                },
             }));
     };
 });

package/src/kits/os/shell.js

@@ -26,18 +26,44 @@ export function createDesktopShell({ root = document.body, wm, registry, brand =
     const { drawer, drawerClose, drawerGrid } = buildDrawer();
     const taskbar = buildTaskbar();
 
-    const apps = typeof registry.list === 'function' ? registry.list() : [...registry.values()];
-
-    for (const app of apps) {
-        const { menuBtn, railBtn, tile } = buildAppEntries(app, {
-            onMenuClick: () => { closeMenu(); openApp(app.id); },
-            onRailClick: () => openApp(app.id),
-            onTileClick: () => { closeDrawer(); openApp(app.id); },
-        });
-        appsMenu.appendChild(menuBtn);
-        sideRail.appendChild(railBtn);
-        drawerGrid.appendChild(tile);
+    // The registry is not frozen at shell creation — hosts can register and
+    // unregister apps later (thebird's per-instance user-* apps come and go on
+    // instance switch and fs edits). refreshApps() re-syncs the three launcher
+    // surfaces (apps menu / side rail / drawer grid) surgically: entries for
+    // newly registered apps are appended, entries whose app was unregistered
+    // are removed, and already-rendered entries keep their nodes (listeners,
+    // focus, and any host-side regrouping of the menu intact). The initial
+    // render is the same call. Buttons are tagged data-app-id so removal can
+    // find them again.
+    const renderedAppIds = new Set();
+    function refreshApps() {
+        const apps = typeof registry.list === 'function' ? registry.list() : [...registry.values()];
+        const live = new Set(apps.map(a => a.id));
+        for (const id of renderedAppIds) {
+            if (live.has(id)) continue;
+            for (const container of [appsMenu, sideRail, drawerGrid]) {
+                const stale = container.querySelector('[data-app-id="' + id + '"]');
+                if (stale) stale.remove();
+            }
+            renderedAppIds.delete(id);
+        }
+        for (const app of apps) {
+            if (renderedAppIds.has(app.id)) continue;
+            const { menuBtn, railBtn, tile } = buildAppEntries(app, {
+                onMenuClick: () => { closeMenu(); openApp(app.id); },
+                onRailClick: () => openApp(app.id),
+                onTileClick: () => { closeDrawer(); openApp(app.id); },
+            });
+            menuBtn.dataset.appId = app.id;
+            railBtn.dataset.appId = app.id;
+            tile.dataset.appId = app.id;
+            appsMenu.appendChild(menuBtn);
+            sideRail.appendChild(railBtn);
+            drawerGrid.appendChild(tile);
+            renderedAppIds.add(app.id);
+        }
     }
+    refreshApps();
 
     osRoot.append(menubar, appsMenu, taskbar);
     document.body.append(sideRail, drawer);
@@ -193,7 +219,11 @@ export function createDesktopShell({ root = document.body, wm, registry, brand =
         refreshTaskbar();
         const finish = (r) => {
             if (isAsync && typeof win.setBody === 'function') win.setBody(r.node);
-            win._app = { id: appId, dispose: r.dispose };
+            // Keep the FULL factory result on _app (only id is overridden with
+            // the registry's appId): hosts persist/restore per-window view
+            // state through getViewState/restoreViewState hooks on the factory
+            // result — a lossy {id, dispose} wrap silently dropped them.
+            win._app = { ...r, id: appId };
             refreshTaskbar();
             return win;
         };
@@ -210,7 +240,7 @@ export function createDesktopShell({ root = document.body, wm, registry, brand =
 
     const api = {
         wm, registry, openApp, setContext, refreshTaskbar, setActiveInstance,
-        openDrawer, closeDrawer, openMenu, closeMenu,
+        openDrawer, closeDrawer, openMenu, closeMenu, refreshApps,
         get activeInstanceId() { return activeInstanceId; },
         elements: { osRoot, menubar, taskbar, appsMenu, sideRail, drawer, instSwitch, homeBtn, appsBtn },
         dispose() { clearInterval(clockTimer); clearInterval(taskTimer); window.removeEventListener('resize', onViewportResize); osRoot.remove(); sideRail.remove(); drawer.remove(); },