agentgui 1.0.944 → 1.0.945

package/AGENTS.md

@@ -6,9 +6,11 @@ One surface. `server.js` serves `site/app/` under `BASE_URL` (default `/gm`) and
 
 When `PASSWORD` env var is set, every HTTP route is gated by `lib/http-handler.js` accepting **Basic auth**, **`Authorization: Bearer <pwd>`**, OR **`?token=<pwd>`** query param (added 2026-05-26 so `EventSource` and direct deep-links work — neither can set headers). WS `/sync` requires `?token=` only. The HTML head script injects `window.__BASE_URL`, `window.__SERVER_VERSION`, and `window.__WS_TOKEN`; `site/app/js/backend.js` reads `__WS_TOKEN` and threads it onto every fetch (Bearer header) / EventSource (qs) / WebSocket (qs).
 
-- `site/app/index.html` — shell + CSS, imports `anentrypoint-design` from unpkg
-- `site/app/js/backend.js` — same-origin client (`DEFAULT_BACKEND = ''`); `?backend=` query override for cross-origin debugging
-- `site/app/js/app.js` — webjsx view + state, kits-only rendering (PageHeader, SearchInput, TextField, EventList, Panel, Row, Section); exposes `window.__agentgui`
+- `site/app/index.html` — shell + CSS; imports `anentrypoint-design` from `https://unpkg.com/anentrypoint-design@latest` at runtime (always-latest; requires network — the prior offline guarantee is intentionally dropped)
+- `site/app/js/backend.js` — same-origin WS/HTTP client (`DEFAULT_BACKEND = ''`); the transport glue that wires the kit; `?backend=` query override for cross-origin debugging
+- `site/app/js/app.js` — webjsx view + state; renders the `AgentChat` kit (from `anentrypoint-design`) for the chat surface and wires agentgui's WS/ccsniff state as kit callbacks; history/settings remain agentgui-local. Exposes `window.__agentgui`
+
+The chat GUI lives in the design kit, not in agentgui. The reusable multi-agent chat surface is the `AgentChat` component in `anentrypoint-design` (`src/components/agent-chat.js`); agentgui keeps only the transport glue (WS `backend.js`, ccsniff history wiring, agent orchestration) and passes state + callbacks into the kit. To change chat UI, edit the kit and push it (CI publishes to npm → unpkg `@latest`), not agentgui.
 - `server.js` — boots ACP/agents/websocket plugins, mounts `createHistoryRouter()` from `ccsniff` at `/`, serves `site/app/` as static root
 - Plugins kept (lib/plugins/): acp, agents, database, files, stream, websocket, workflow
 
@@ -145,9 +147,9 @@ Throttle renders via `requestAnimationFrame` to avoid event storm during burst l
 
 The endpoints are served by ccsniff's Express router mounted in-process from `server.js`. No external proxy.
 
-## Zero-runtime-CDN: vendored DS deps (2026-05-28)
+## Runtime CDN: GUI loaded from unpkg (2026-05-29)
 
-The GUI runs fully offline. `site/app/vendor/cdn/` holds marked, dompurify, prismjs components, and JetBrains+Space Grotesk woff2. The DS bundle (`anentrypoint-design/247420.js`) had its CDN string constants rewritten to local paths, AND its gzip+base64-embedded CSS blob (`Ha`) regenerated to point at local fonts. Full mechanism is in rs-learn (recall "DS bundle gzip Ha vendoring"). Witness offline by browser route-abort of non-origin hosts.
+The GUI loads `anentrypoint-design` from `https://unpkg.com/anentrypoint-design@latest` at runtime (import map + CSS link in `index.html`) so agentgui always tracks the latest published kit with no hand-maintained vendored copy. This **requires a network connection** — the earlier offline guarantee was intentionally dropped in favour of always-latest. The DS itself fetches its fonts from `unpkg.com/anentrypoint-design@latest/dist/fonts/` (set in the kit's `scripts/build.mjs` `FONT_BASE`). The `site/app/vendor/` tree is no longer imported; the old vendored DS bundle + `vendor/cdn/` assets are dead and may be removed. Witness the live GUI by confirming the import map resolves to unpkg and `.agentchat` renders with 0 console errors.
 
 ## Agent/model/session management (2026-05-28)
 

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [Unreleased] - GUI moved into the anentrypoint-design kit, loaded from unpkg
+
+- the chat GUI now lives in the design kit: added a reusable `AgentChat` component to anentrypoint-design (agent-then-model picker + AICat auto-scroll/thinking + tool parts + cwd bar + caret-stable composer), pure props-in/vnode-out with all transport as host callbacks. Published via the kit's CI to npm -> unpkg.
+- site/app/index.html: imports anentrypoint-design from https://unpkg.com/anentrypoint-design@latest at runtime (always-latest), replacing the vendored bundle. Trades the offline guarantee for always-latest, per project decision.
+- site/app/js/app.js: chatMain renders the AgentChat kit and wires agentgui state + WS/ccsniff glue as callbacks; the agent/model picker, cwd bar, and composer moved out of agentgui into the kit. backend.js (WS client) stays as the transport glue.
+- verified end-to-end in a real browser: GUI sourced from unpkg, AgentChat renders, chat round-trips (reply streams into the kit's transcript), 0 console errors.
+
 ## [Unreleased] - live e2e chat verified + composer caret fix + ccsniff memory cap
 
 - verified the full GUI chat round-trip end-to-end in a real browser: compose -> WS chat.sendMessage -> claude-code -> streaming_progress -> transcript renders the streamed reply (not just the runner harness).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.944",
+  "version": "1.0.945",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "electron/main.js",

package/site/app/index.html

@@ -5,9 +5,13 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>agentgui</title>
   <meta name="description" content="agentgui — multi-agent client with same-origin server, in-process ccsniff history, and ACP chat.">
-  <link rel="stylesheet" href="vendor/anentrypoint-design/247420.css">
+  <!-- The GUI lives in the anentrypoint-design kit and is loaded from unpkg at
+       its latest published version, so agentgui always tracks the kit without a
+       hand-maintained vendored copy. (This trades the prior offline guarantee for
+       always-latest, per project decision; a network connection is required.) -->
+  <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@latest/dist/247420.css">
   <script type="importmap">
-    { "imports": { "anentrypoint-design": "./vendor/anentrypoint-design/247420.js" } }
+    { "imports": { "anentrypoint-design": "https://unpkg.com/anentrypoint-design@latest/dist/247420.js" } }
   </script>
   <style>
     :root {

package/site/app/js/app.js

@@ -3,7 +3,7 @@ import * as B from './backend.js';
 
 installStyles().catch(() => {});
 
-const { AppShell, Topbar, Crumb, Side, Status, Chat, ChatComposer, Row, Panel, PageHeader, SearchInput, TextField, Select, Btn, EventList, Spinner, Alert } = C;
+const { AppShell, Topbar, Crumb, Side, Status, Chat, ChatComposer, AgentChat, Row, Panel, PageHeader, SearchInput, TextField, Select, Btn, EventList, Spinner, Alert } = C;
 
 const state = {
   backend: B.getBackend(),
@@ -135,6 +135,27 @@ function selectModel(id) {
 function agentById(id) { return state.agents.find(a => a.id === id); }
 function agentAvailable(id) { const a = agentById(id); return !a || a.available !== false; }
 
+// The four flagship orchestration targets surface first, then other available
+// agents, then npx-installable, then not-installed — so the agents the GUI
+// exists to drive are reachable without scanning a flat 17-item list. This
+// ordering is agentgui's orchestration priority, so it stays in the host and is
+// passed pre-sorted to the (app-agnostic) AgentChat kit.
+const PRIMARY_AGENTS = ['claude-code', 'opencode', 'kilo', 'agy'];
+function sortedAgents() {
+  const rank = (a) => {
+    const primary = PRIMARY_AGENTS.indexOf(a.id);
+    const avail = a.available !== false;
+    if (primary !== -1 && avail) return primary;
+    if (avail) return 10;
+    if (a.npxInstallable) return 20;
+    return 30;
+  };
+  return state.agents
+    .map(a => ({ a, rank: rank(a) }))
+    .sort((x, y) => x.rank - y.rank || x.a.name.localeCompare(y.a.name))
+    .map(({ a }) => a);
+}
+
 function navTo(tab) {
   const prev = state.tab;
   state.tab = tab;
@@ -287,55 +308,9 @@ function view() {
     onNav: (label) => navTo(label),
   });
 
-  // The four flagship orchestration targets surface first, then the rest of the
-  // available agents, then unavailable ones — so the agents the GUI exists to
-  // drive are reachable without scanning a flat 17-item list. Ordering only;
-  // the DS Select renders a plain option list.
-  const PRIMARY_AGENTS = ['claude-code', 'opencode', 'kilo', 'agy'];
-  const agentRank = (a) => {
-    const primary = PRIMARY_AGENTS.indexOf(a.id);
-    const avail = a.available !== false;
-    if (primary !== -1 && avail) return primary;           // 0..3 flagship + available
-    if (avail) return 10;                                   // other available
-    if (a.npxInstallable) return 20;                        // installable via npx
-    return 30;                                              // not installed
-  };
-  const agentOptions = state.agents
-    .map(a => ({ a, rank: agentRank(a) }))
-    .sort((x, y) => x.rank - y.rank || x.a.name.localeCompare(y.a.name))
-    .map(({ a }) => ({
-      value: a.id,
-      label: a.name + (a.available === false ? (a.npxInstallable ? ' (via npx)' : ' (not installed)') : ''),
-      disabled: a.available === false && !a.npxInstallable,
-    }));
-  const showModelPicker = state.tab === 'chat' && state.agentModels.length > 0;
-
-  const crumbRight = state.tab === 'chat'
-    ? [h('div', { key: 'cc', class: 'chat-controls' },
-        Select({
-          key: 'agentsel',
-          value: state.selectedAgent,
-          placeholder: '— agent —',
-          title: 'Select coding agent',
-          options: agentOptions,
-          onChange: (v) => { selectAgent(v); },
-        }),
-        showModelPicker
-          ? Select({
-              key: 'modelsel',
-              value: state.selectedModel,
-              placeholder: '— model —',
-              title: 'Select model for this agent',
-              options: state.agentModels.map(m => ({ value: m.id, label: m.name || m.id })),
-              onChange: (v) => { selectModel(v); },
-            })
-          : null,
-        state.chat.busy
-          ? Btn({ key: 'stop', onClick: cancelChat, children: 'stop', title: 'Stop streaming' })
-          : Btn({ key: 'new',  onClick: newChat,    children: '+ new', title: 'Start new chat (clears history)' }),
-        dot,
-      )]
-    : [dot];
+  // The agent/model picker + new/stop now live inside the AgentChat kit (chat
+  // tab), so the crumb carries only the status dot on every tab.
+  const crumbRight = [dot];
 
   // Topbar already shows "agentgui / <tab>"; the crumb is reserved for contextual
   // controls (model picker, new/stop, live status) so it doesn't duplicate the path.
@@ -407,46 +382,11 @@ function errText(e) {
 }
 
 function chatMain() {
-  const lastIdx = state.chat.messages.length - 1;
   const agentName = agentById(state.selectedAgent)?.name || state.selectedAgent || 'agent';
-  const msgs = state.chat.messages.map((m, i) => {
-    const isAssistant = m.role === 'assistant';
-    const isStreaming = state.chat.busy && i === lastIdx && isAssistant;
-    const hasParts = Array.isArray(m.parts) && m.parts.length > 0;
-    const isEmptyStreaming = isStreaming && !m.content && !hasParts;
-    const parts = [];
-    if (m.content) parts.push({ kind: isAssistant ? 'md' : 'text', text: m.content });
-    if (hasParts) for (const p of m.parts) parts.push({ kind: 'text', text: p });
-    return {
-      key: m.id || String(i),
-      who: isAssistant ? 'them' : 'you',
-      name: isAssistant ? agentName : 'you',
-      time: m.time || '',
-      typing: isEmptyStreaming,
-      parts: isEmptyStreaming ? undefined : (parts.length ? parts : [{ kind: 'text', text: '' }]),
-    };
-  });
-
-  const placeholder = !state.selectedAgent
-    ? 'choose an agent first'
-    : (!agentAvailable(state.selectedAgent) ? agentName + ' is not installed' : 'message…');
-  const composer = ChatComposer({
-    value: state.chat.draft,
-    disabled: !canSend(),
-    placeholder,
-    // The DS textarea is controlled and reads its live DOM value on send, so we
-    // do NOT re-render on every keystroke (that fights the cursor and is wasteful).
-    // Re-render only when the draft crosses empty<->non-empty, since that is the
-    // only transition that changes the send button's disabled state.
-    onInput: (v) => {
-      const was = !!(state.chat.draft && state.chat.draft.trim());
-      const now = !!(v && v.trim());
-      state.chat.draft = v;
-      if (was !== now) render();
-    },
-    onSend: (v) => { state.chat.draft = v; sendChat(); },
-  });
 
+  // Banners agentgui owns (resume, agent-switched, unavailable, confirm-clear,
+  // stream error) are pre-built here and handed to the kit, which renders them
+  // above the thread. The kit holds no agentgui-specific banner logic.
   const banners = [];
   if (state.chat.resumeSid) {
     banners.push(h('div', { key: 'rb', class: 'resume-banner', role: 'status' },
@@ -456,7 +396,6 @@ function chatMain() {
       banners.push(Alert({ key: 'rnote', kind: 'info', title: 'Agent switched', children: state.chat.resumeNote }));
     }
   }
-  banners.push(cwdBanner());
   if (state.selectedAgent && !agentAvailable(state.selectedAgent)) {
     banners.push(Alert({ key: 'unavail', kind: 'warn', title: agentName + ' is not installed',
       children: 'This agent\'s CLI was not found on the server. Pick another agent or install it.' }));
@@ -468,26 +407,59 @@ function chatMain() {
         Btn({ key: 'cnyes', danger: true, onClick: newChat, children: 'clear' }),
         Btn({ key: 'cnno', onClick: () => { state.confirmingNewChat = false; render(); }, children: 'cancel' })] }));
   }
-  // Last stream error surfaced as a proper Alert instead of raw JSON in the bubble.
   const lastErr = state.chat.messages.length ? state.chat.messages[state.chat.messages.length - 1].error : null;
   if (lastErr && !state.chat.busy) {
     banners.push(Alert({ key: 'chaterr', kind: 'error', title: 'Stream error', children: lastErr }));
   }
+
+  const placeholder = !state.selectedAgent
+    ? 'choose an agent first'
+    : (!agentAvailable(state.selectedAgent) ? agentName + ' is not installed' : 'message…');
+
+  // The reusable AgentChat kit owns the agent/model picker, cwd bar, transcript
+  // (with AICat-style auto-scroll + thinking), and the caret-stable composer.
+  // agentgui supplies state and wires every server interaction as a callback.
   return [
     offlineBanner(),
-    ...banners,
-    Chat({
-      title: agentName + (state.selectedModel ? ' · ' + state.selectedModel : '') + (state.chat.resumeSid ? ' · resume' : ''),
-      // Explicit human-readable sub; the DS default ("NN msgs", zero-padded)
-      // leaks an event-list style into chat. Hide it when there are no messages
-      // (the empty-state already says "no messages yet").
-      sub: state.chat.busy
-        ? 'streaming…'
-        : (state.chat.messages.length
-            ? state.chat.messages.length + (state.chat.messages.length === 1 ? ' message' : ' messages')
-            : ''),
-      messages: msgs,
-      composer,
+    AgentChat({
+      agents: sortedAgents(),
+      selectedAgent: state.selectedAgent,
+      models: state.agentModels,
+      selectedModel: state.selectedModel,
+      messages: state.chat.messages,
+      busy: state.chat.busy,
+      draft: state.chat.draft,
+      status: state.chat.busy ? 'streaming…' : (state.chat.resumeSid ? 'resume' : 'ready'),
+      agentName,
+      placeholder,
+      canSend: canSend(),
+      banners,
+      cwd: state.chatCwd,
+      cwdEditing: !!state.cwdEditing,
+      cwdDraft: state.cwdDraft,
+      onSelectAgent: (v) => selectAgent(v),
+      onSelectModel: (v) => selectModel(v),
+      onNewChat: newChat,
+      onStop: cancelChat,
+      onInput: (v) => {
+        // The kit's textarea is controlled and reads its live DOM value on send,
+        // so re-render only when the draft crosses empty<->non-empty (the only
+        // transition that toggles the send button's disabled state).
+        const was = !!(state.chat.draft && state.chat.draft.trim());
+        const now = !!(v && v.trim());
+        state.chat.draft = v;
+        if (was !== now) render();
+      },
+      onSend: (v) => { state.chat.draft = v; sendChat(); },
+      onCwdEdit: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; render(); },
+      onCwdSave: () => {
+        state.chatCwd = (state.cwdDraft ?? '').trim();
+        if (state.chatCwd) lsSet('agentgui.cwd', state.chatCwd); else lsRemove('agentgui.cwd');
+        state.cwdEditing = false; state.cwdDraft = undefined; render();
+      },
+      onCwdCancel: () => { state.cwdEditing = false; state.cwdDraft = undefined; render(); },
+      onCwdClear: () => { state.chatCwd = ''; lsRemove('agentgui.cwd'); render(); },
+      onCwdDraft: (v) => { state.cwdDraft = v; },
     }),
   ].filter(Boolean);
 }
@@ -498,24 +470,8 @@ function offlineBanner() {
     children: 'agentgui can\'t reach the server (' + (state.health.error || state.health.status) + '). Chat and history actions will fail until it reconnects.' });
 }
 
-function cwdBanner() {
-  if (state.cwdEditing) {
-    return h('div', { key: 'cwdb', class: 'resume-banner', role: 'group', 'aria-label': 'Set working directory' },
-      TextField({ key: 'cwdfield', label: 'working directory (blank = server default)', value: state.cwdDraft ?? state.chatCwd ?? '',
-        placeholder: 'absolute path', onInput: (v) => { state.cwdDraft = v; } }),
-      Btn({ key: 'cwdsave', primary: true, onClick: () => {
-        state.chatCwd = (state.cwdDraft ?? '').trim();
-        if (state.chatCwd) lsSet('agentgui.cwd', state.chatCwd); else lsRemove('agentgui.cwd');
-        state.cwdEditing = false; state.cwdDraft = undefined; render();
-      }, children: 'save' }),
-      Btn({ key: 'cwdcancel', onClick: () => { state.cwdEditing = false; state.cwdDraft = undefined; render(); }, children: 'cancel' }));
-  }
-  return h('div', { key: 'cwdb', class: 'cwd-bar', role: 'group', 'aria-label': 'Working directory' },
-    h('span', { key: 'cwdtxt', class: 'lede cwd-bar-text', title: state.chatCwd || 'server default working directory' },
-      state.chatCwd ? 'cwd: ' + truncate(state.chatCwd, 28, 60) : 'cwd: server default'),
-    h('button', { key: 'cwdset', type: 'button', class: 'cwd-bar-btn', onClick: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; render(); } }, state.chatCwd ? 'change' : 'set'),
-    state.chatCwd ? h('button', { key: 'cwdclr', type: 'button', class: 'cwd-bar-btn', onClick: () => { state.chatCwd = ''; lsRemove('agentgui.cwd'); render(); } }, 'use default') : null);
-}
+// (The working-directory bar now lives in the AgentChat kit; agentgui wires its
+// cwd state + handlers as kit callbacks in chatMain.)
 
 function newChat() {
   if (state.chat.messages.length && !state.confirmingNewChat) {