agentgui 1.0.919 → 1.0.920

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## [Unreleased] - site/app live client migrated to 247420 SDK components
+
+- site/app/index.html: removed 35 lines of bespoke CSS overriding design tokens; now uses SDK panel/font tokens with only structural overrides (chat flex layout, history pane grid)
+- site/app/js/app.js: replaced raw h() + applyDiff loop with AppShell, Topbar, Crumb, Side, Chat, ChatComposer, Row, Status from anentrypoint-design; uses mount() so motion system fires; font resolves to Nunito via SDK
+
 ## [1.0.908] - manual audit fixes: server retry idempotency, cli-version detection, cleanup FK ordering, refresh-all path
 
 - server.js: `onServerListenStart` one-shot guard prevents `onServerReady` + `loadPluginExtensions` from re-firing when EADDRINUSE retry succeeds — previously every retry re-ran autoProvision/installGMAgentConfigs/setIntervals causing 100+ duplicate provision passes and stacked timers

package/package.json

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

package/site/app/index.html

@@ -12,41 +12,20 @@
     } }
   </script>
   <style>
-    html,body { margin:0; height:100%; }
-    body { background: var(--app-bg, #0b0b0b); color: var(--text, #eee); font-family: var(--ff-body, system-ui); }
-    #app { height: 100vh; display: grid; grid-template-rows: auto 1fr; }
-    .topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
-    .topbar .brand { font-weight:600; letter-spacing:.04em; }
-    .topbar .right { display:flex; gap:10px; align-items:center; }
-    .topbar input { width: 320px; padding:6px 10px; border-radius:6px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.04); color:inherit; font:inherit; }
-    .tabs { display:flex; gap:4px; }
-    .tabs button { padding:6px 12px; border-radius:6px; border:1px solid transparent; background:transparent; color:inherit; cursor:pointer; font:inherit; }
-    .tabs button.active { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
-    .body { display:grid; grid-template-columns: 320px 1fr; min-height:0; }
-    .side { border-right:1px solid rgba(255,255,255,.08); overflow:auto; padding:8px; }
-    .main { overflow:auto; padding:16px; min-width:0; }
-    .empty { opacity:.6; padding:24px; text-align:center; }
-    .pill { display:inline-block; padding:1px 7px; border-radius:999px; background: rgba(255,255,255,.1); font-size:11px; margin-left:6px; }
-    .pill.ok { background: rgba(80,200,120,.18); color:#7fd; }
-    .pill.bad { background: rgba(255,80,80,.18); color:#f88; }
-    .row { display:block; padding:8px 10px; border-radius:6px; cursor:pointer; }
-    .row:hover { background: rgba(255,255,255,.04); }
-    .row.active { background: rgba(255,255,255,.08); }
-    .row .t { font-size:13px; }
-    .row .s { font-size:11px; opacity:.6; margin-top:2px; font-family: var(--ff-mono, ui-monospace, monospace); }
-    .ev { padding:6px 0; border-bottom: 1px dashed rgba(255,255,255,.06); font-family: var(--ff-mono, ui-monospace, monospace); font-size:12px; }
-    .ev .h { opacity:.55; margin-bottom:2px; }
-    .ev pre { white-space: pre-wrap; margin:0; }
-    .chat-host { height:100%; display:flex; flex-direction:column; }
-    .chat-msgs { flex:1; overflow:auto; padding:10px 4px; }
-    .msg { padding:8px 10px; border-radius:8px; margin:6px 0; max-width:80ch; }
-    .msg.user { background: rgba(120,180,255,.08); }
-    .msg.assistant { background: rgba(255,255,255,.04); }
-    .msg .role { font-size:11px; opacity:.6; margin-bottom:4px; text-transform:uppercase; letter-spacing:.08em; }
-    .composer { display:flex; gap:8px; padding:8px; border-top:1px solid rgba(255,255,255,.08); }
-    .composer textarea { flex:1; min-height:48px; max-height:200px; resize:vertical; padding:8px 10px; border-radius:6px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:inherit; font:inherit; }
-    .composer button { padding:8px 16px; border-radius:6px; border:1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color:inherit; cursor:pointer; }
-    .composer select { padding:6px 8px; border-radius:6px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:inherit; font:inherit; }
+    html, body { margin: 0; height: 100%; }
+    #app { height: 100vh; }
+    .app { height: 100vh; }
+    .app-main { display: flex; flex-direction: column; min-height: 0; }
+    .chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+    .chat-thread { flex: 1; overflow-y: auto; }
+    .agentgui-history-pane { display: grid; grid-template-columns: 300px 1fr; height: 100%; min-height: 0; overflow: hidden; }
+    .agentgui-history-list { overflow-y: auto; border-right: 1px solid var(--panel-3); padding: 8px; }
+    .agentgui-history-detail { overflow-y: auto; padding: 16px; }
+    .agentgui-ev { padding: 6px 0; border-bottom: 1px solid var(--panel-2); font-family: var(--ff-mono); font-size: 12px; }
+    .agentgui-ev .h { opacity: .55; margin-bottom: 2px; }
+    .agentgui-ev pre { white-space: pre-wrap; margin: 0; }
+    .agentgui-model-bar { display: flex; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--panel-3); align-items: center; }
+    .agentgui-model-bar select { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--panel-3); background: var(--panel-1); color: var(--ink); font-family: var(--ff-ui); font-size: 13px; }
   </style>
 </head>
 <body>

package/site/app/js/app.js

@@ -1,89 +1,157 @@
-import { h, applyDiff, installStyles } from 'anentrypoint-design';
+import { h, mount, installStyles, components as C } from 'anentrypoint-design';
 import * as B from './backend.js';
+
 installStyles().catch(() => {});
 
+const { AppShell, Topbar, Crumb, Side, Status, Chip, Btn } = C;
+const { Chat, ChatComposer, ChatMessage } = C;
+const { Row } = C;
+
 const state = {
   backend: B.getBackend(),
   health: { status: 'unknown' },
   tab: 'chat',
   models: [],
   selectedModel: '',
-  // chat
   chat: { messages: [], busy: false, abort: null, draft: '' },
-  // history
   sessions: [],
   selectedSid: null,
   events: [],
   searchQ: '',
   searchHits: null,
-  liveTail: [],
 };
 
-const root = document.getElementById('app');
+let render;
 
-function render() { applyDiff(root, view()); }
+function topbarItems() {
+  return [['chat', '#'], ['history', '#'], ['settings', '#']];
+}
 
 function view() {
-  return h('div', { class: 'app-root', style: 'display:grid;grid-template-rows:auto 1fr;height:100%' }, topbar(), bodyView());
+  const ok = state.health.status === 'ok';
+  const statusChip = ok
+    ? h('span', { key: 'hc', style: 'color:var(--live);font-size:12px' }, '● connected')
+    : h('span', { key: 'hc', style: 'color:var(--flame);font-size:12px' }, '○ offline');
+
+  const topbar = Topbar({
+    brand: 'agentgui',
+    leaf: state.tab,
+    items: topbarItems(),
+    active: state.tab,
+    onNav: (label) => { state.tab = label; if (label === 'history') refreshHistory(); render(); },
+  });
+
+  const crumb = Crumb({
+    trail: ['agentgui'],
+    leaf: state.tab,
+    right: [statusChip],
+  });
+
+  const side = state.tab === 'history' ? historySide() : null;
+  const main = mainContent();
+  const status = Status({
+    left: [state.backend],
+    right: [state.selectedModel || 'no model'],
+  });
+
+  return AppShell({ topbar, crumb, side, main, status });
 }
 
-function topbar() {
-  const ok = state.health.status === 'ok';
-  return h('div', { class: 'topbar' },
-    h('div', { class: 'brand' }, 'agentgui ', h('span', { class: 'pill ' + (ok ? 'ok' : 'bad') }, ok ? 'connected' : 'offline')),
-    h('div', { class: 'tabs' },
-      tabBtn('chat', 'chat'),
-      tabBtn('history', 'history'),
-      tabBtn('settings', 'settings'),
-    ),
-    h('div', { class: 'right' },
-      h('input', { value: state.backend, placeholder: 'backend url', onchange: e => { state.backend = e.target.value; B.setBackend(state.backend); init(); } }),
+function mainContent() {
+  if (state.tab === 'chat') return chatMain();
+  if (state.tab === 'history') return historyDetail();
+  return settingsMain();
+}
+
+function chatMain() {
+  const msgs = state.chat.messages.map((m, i) => ({
+    key: i,
+    who: m.role === 'user' ? 'you' : 'them',
+    text: m.content || '',
+  }));
+
+  const composer = ChatComposer({
+    value: state.chat.draft,
+    disabled: state.chat.busy,
+    placeholder: state.selectedModel ? 'message…' : 'choose a model first',
+    onInput: (v) => { state.chat.draft = v; render(); },
+    onSend: (v) => { state.chat.draft = v; sendChat(); },
+  });
+
+  const modelBar = h('div', { class: 'agentgui-model-bar' },
+    h('select', { onchange: (e) => { state.selectedModel = e.target.value; render(); } },
+      h('option', { value: '' }, '— choose model —'),
+      ...state.models.map(m => h('option', { value: m.id, selected: m.id === state.selectedModel }, m.id)),
     ),
+    state.chat.busy
+      ? h('a', { style: 'cursor:pointer;font-size:12px;color:var(--flame)', onclick: cancelChat }, 'stop ✕')
+      : null,
   );
-}
 
-function tabBtn(id, label) {
-  return h('button', { class: state.tab === id ? 'active' : '', onclick: () => { state.tab = id; render(); if (id === 'history') refreshHistory(); } }, label);
+  return [
+    modelBar,
+    Chat({ title: 'chat', sub: state.selectedModel || undefined, messages: msgs, composer }),
+  ];
 }
 
-function bodyView() {
-  if (state.tab === 'chat') return chatView();
-  if (state.tab === 'history') return historyView();
-  return settingsView();
+function historySide() {
+  const rows = state.searchHits
+    ? state.searchHits.results.slice(0, 30).map((r, i) =>
+        Row({
+          key: 'sr' + i,
+          title: r.snippet || '(no snippet)',
+          sub: r.project + ' · ' + r.role + (r.tool ? ' · ' + r.tool : ''),
+          active: false,
+          onClick: () => loadSession(r.sid),
+        })
+      )
+    : state.sessions.slice(0, 80).map((s, i) =>
+        Row({
+          key: 'sess' + i,
+          title: s.title || s.project || s.sid,
+          sub: s.events + ' ev · ' + s.tools + ' tools · ' + (s.errors ? s.errors + ' err' : 'ok'),
+          active: s.sid === state.selectedSid,
+          onClick: () => loadSession(s.sid),
+        })
+      );
+
+  return h('div', { style: 'display:flex;flex-direction:column;height:100%;overflow:hidden' },
+    h('div', { style: 'padding:8px' },
+      h('input', {
+        style: 'width:100%;padding:6px 10px;border-radius:8px;border:1px solid var(--panel-3);background:var(--panel-1);color:var(--ink);font-family:var(--ff-ui);font-size:13px',
+        placeholder: 'search…',
+        value: state.searchQ,
+        onchange: (e) => { state.searchQ = e.target.value; runSearch(); },
+      }),
+    ),
+    h('div', { style: 'flex:1;overflow-y:auto;padding:8px' }, ...rows,
+      rows.length === 0 ? h('div', { style: 'opacity:.6;padding:16px;font-size:13px' }, 'no sessions') : null,
+    ),
+  );
 }
 
-function settingsView() {
-  return h('div', { class: 'main' },
-    h('h2', {}, 'settings'),
-    h('p', {}, 'backend: ', h('code', {}, state.backend)),
-    h('p', {}, 'health: ', JSON.stringify(state.health)),
-    h('p', {}, 'tip: pass ', h('code', {}, '?backend=https://your-acptoapi-host'), ' to override'),
+function historyDetail() {
+  if (!state.selectedSid) return h('div', { style: 'padding:24px;opacity:.6' }, 'pick a session');
+  if (state.events.length === 0) return h('div', { style: 'padding:24px;opacity:.6' }, 'loading…');
+  return h('div', {},
+    ...state.events.map((e, i) =>
+      h('div', { key: 'ev' + i, class: 'agentgui-ev' },
+        h('div', { class: 'h' },
+          new Date(e.ts).toLocaleString() + ' · ' + (e.role || '?') + ' · ' + (e.type || '?') + (e.tool ? ' · ' + e.tool : ''),
+        ),
+        h('pre', {}, (e.text || '').slice(0, 4000)),
+      )
+    ),
   );
 }
 
-function chatView() {
-  return h('div', { class: 'body', style: 'grid-template-columns: 1fr' },
-    h('div', { class: 'main chat-host' },
-      h('div', { class: 'chat-msgs' },
-        ...state.chat.messages.map((m, i) => h('div', { class: 'msg ' + m.role },
-          h('div', { class: 'role' }, m.role),
-          h('div', { class: 'content' }, m.content || ''),
-        )),
-        state.chat.messages.length === 0 ? h('div', { class: 'empty' }, 'pick a model and start chatting') : null,
-      ),
-      h('div', { class: 'composer' },
-        h('select', { onchange: e => { state.selectedModel = e.target.value; render(); } },
-          h('option', { value: '' }, '— choose model —'),
-          ...state.models.map(m => h('option', { value: m.id, selected: m.id === state.selectedModel }, m.id)),
-        ),
-        h('textarea', {
-          placeholder: 'message…',
-          value: state.chat.draft,
-          oninput: e => { state.chat.draft = e.target.value; },
-          onkeydown: e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendChat(); } },
-        }),
-        h('button', { onclick: () => state.chat.busy ? cancelChat() : sendChat() }, state.chat.busy ? 'stop' : 'send'),
-      ),
+function settingsMain() {
+  return h('div', { style: 'padding:24px;max-width:480px' },
+    h('h2', {}, 'settings'),
+    h('p', {}, 'backend: ', h('code', {}, state.backend)),
+    h('p', {}, 'health: ', h('code', {}, JSON.stringify(state.health))),
+    h('p', { style: 'opacity:.7;font-size:13px' },
+      'pass ', h('code', {}, '?backend=https://your-acptoapi-host'), ' or set localStorage[\'agentgui.backend\'] to override',
     ),
   );
 }
@@ -119,42 +187,9 @@ async function sendChat() {
 
 function cancelChat() { state.chat.abort?.abort(); }
 
-function historyView() {
-  return h('div', { class: 'body' },
-    h('div', { class: 'side' },
-      h('input', { class: 'search', placeholder: 'search…', value: state.searchQ, onchange: e => { state.searchQ = e.target.value; runSearch(); } }),
-      state.searchHits ? h('div', {},
-        h('div', { style: 'font-size:11px;opacity:.6;padding:6px 10px' }, state.searchHits.results.length + ' hits for "' + state.searchHits.query + '"'),
-        ...state.searchHits.results.slice(0, 30).map(r => h('div', { class: 'row', onclick: () => loadSession(r.sid) },
-          h('div', { class: 't' }, r.snippet || '(no snippet)'),
-          h('div', { class: 's' }, r.project + ' · ' + r.role + (r.tool ? ' · ' + r.tool : '')),
-        )),
-      ) : h('div', {},
-        ...state.sessions.slice(0, 80).map(s => h('div', { class: 'row' + (s.sid === state.selectedSid ? ' active' : ''), onclick: () => loadSession(s.sid) },
-          h('div', { class: 't' }, s.title || s.project || s.sid),
-          h('div', { class: 's' }, s.events + ' ev · ' + s.tools + ' tools · ' + (s.errors ? s.errors + ' err' : 'ok')),
-        )),
-        state.sessions.length === 0 ? h('div', { class: 'empty' }, 'no sessions yet') : null,
-      ),
-    ),
-    h('div', { class: 'main' },
-      state.events.length === 0
-        ? h('div', { class: 'empty' }, state.selectedSid ? 'loading…' : 'pick a session')
-        : h('div', {},
-            ...state.events.map(e => h('div', { class: 'ev' },
-              h('div', { class: 'h' }, new Date(e.ts).toLocaleString() + ' · ' + (e.role || '?') + ' · ' + (e.type || '?') + (e.tool ? ' · ' + e.tool : '')),
-              h('pre', {}, (e.text || '').slice(0, 4000)),
-            )),
-          ),
-    ),
-  );
-}
-
 async function refreshHistory() {
-  try {
-    state.sessions = await B.listSessions(state.backend);
-    render();
-  } catch (e) { console.warn('history fetch failed:', e.message); }
+  try { state.sessions = await B.listSessions(state.backend); render(); }
+  catch (e) { console.warn('history fetch failed:', e.message); }
 }
 
 async function runSearch() {
@@ -170,12 +205,16 @@ async function loadSession(sid) {
 }
 
 async function init() {
-  state.health = await B.probeBackend(state.backend).then(r => r.ok ? { status: 'ok', ...r.info } : { status: 'down', ...r });
+  state.health = await B.probeBackend(state.backend)
+    .then(r => r.ok ? { status: 'ok', ...r.info } : { status: 'down', ...r });
   render();
-  try { state.models = await B.listModels(state.backend); if (!state.selectedModel && state.models[0]) state.selectedModel = state.models[0].id; render(); }
-  catch (e) { console.warn('models fetch failed:', e.message); }
-  if (state.tab === 'history') refreshHistory();
+  try {
+    state.models = await B.listModels(state.backend);
+    if (!state.selectedModel && state.models[0]) state.selectedModel = state.models[0].id;
+    render();
+  } catch (e) { console.warn('models fetch failed:', e.message); }
 }
 
+render = mount(document.getElementById('app'), view);
 window.__agentgui = { state, render };
 init();