agentgui 1.0.932 → 1.0.933

package/package.json

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

package/site/app/index.html

@@ -5,9 +5,9 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>agentgui</title>
   <meta name="description" content="agentgui — live client for any acptoapi backend.">
-  <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@latest/dist/247420.css">
+  <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@0.0.127/dist/247420.css">
   <script type="importmap">
-    { "imports": { "anentrypoint-design": "https://unpkg.com/anentrypoint-design@latest/dist/247420.js" } }
+    { "imports": { "anentrypoint-design": "https://unpkg.com/anentrypoint-design@0.0.127/dist/247420.js" } }
   </script>
   <style>
     html, body { margin: 0; height: 100%; }

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, EventList } = C;
+const { AppShell, Topbar, Crumb, Side, Status, Chat, ChatComposer, Row, Panel, PageHeader, SearchInput, TextField, Select, Btn, EventList } = C;
 
 const state = {
   backend: B.getBackend(),
@@ -114,18 +114,16 @@ function view() {
 
   const crumbRight = state.tab === 'chat'
     ? [
-        h('select', {
-            key: 'modelsel',
-            onchange: (e) => { state.selectedModel = e.target.value; render(); },
-          },
-          h('option', { key: '__', value: '' }, '— model —'),
-          ...state.models.map(m =>
-            h('option', { key: m.id, value: m.id, selected: m.id === state.selectedModel }, m.id)
-          ),
-        ),
+        Select({
+          key: 'modelsel',
+          value: state.selectedModel,
+          placeholder: '— model —',
+          options: state.models.map(m => ({ value: m.id, label: m.id })),
+          onChange: (v) => { state.selectedModel = v; render(); },
+        }),
         state.chat.busy
-          ? h('a', { key: 'stop', onclick: cancelChat, style: 'cursor:pointer' }, '◼ stop')
-          : h('a', { key: 'new',  onclick: newChat,    style: 'cursor:pointer' }, '+ new'),
+          ? Btn({ key: 'stop', onClick: cancelChat, children: '◼ stop' })
+          : Btn({ key: 'new',  onClick: newChat,    children: '+ new' }),
         dot,
       ]
     : [dot];
@@ -169,13 +167,22 @@ function mainContent() {
 
 // ── chat ───────────────────────────────────────────────────────────────────
 function chatMain() {
-  const msgs = state.chat.messages.map((m, i) => ({
-    key: String(i),
-    who: m.role === 'user' ? 'you' : 'them',
-    name: m.role === 'assistant' ? (state.selectedModel || 'agent') : 'you',
-    time: m.time || '',
-    parts: [{ kind: 'text', text: m.content || '' }],
-  }));
+  const lastIdx = state.chat.messages.length - 1;
+  const msgs = state.chat.messages.map((m, i) => {
+    const isAssistant = m.role === 'assistant';
+    const isStreaming = state.chat.busy && i === lastIdx && isAssistant;
+    const isEmptyStreaming = isStreaming && !m.content;
+    return {
+      key: String(i),
+      who: isAssistant ? 'them' : 'you',
+      name: isAssistant ? (state.selectedModel || 'agent') : 'you',
+      time: m.time || '',
+      typing: isEmptyStreaming,
+      parts: isEmptyStreaming
+        ? undefined
+        : [{ kind: isAssistant ? 'md' : 'text', text: m.content || '' }],
+    };
+  });
 
   const composer = ChatComposer({
     value: state.chat.draft,
@@ -250,12 +257,11 @@ function historyMain() {
     Panel({
       title: state.events.length + ' events',
       children: EventList({
-        events: state.events.map((e, i) => ({
+        items: state.events.map((e, i) => ({
           key: 'ev' + i,
-          rank: String(i + 1).padStart(3, '0'),
+          code: String(i + 1).padStart(3, '0'),
           title: (e.text || '').slice(0, 200) || '(empty)',
           sub: new Date(e.ts).toLocaleString() + ' · ' + (e.role || '?') + ' · ' + (e.type || '?') + (e.tool ? ' · ⌘ ' + e.tool : ''),
-          rail: e.role === 'error' ? 'flame' : (e.role === 'user' ? 'green' : 'purple'),
         })),
       }),
     }),
@@ -334,16 +340,19 @@ function settingsMain() {
           onInput: (v) => { state.backendDraft = v; render(); },
         }),
         h('p', { key: 'hp', class: 'lede' }, (ok ? '● ' : '○ ') + JSON.stringify(state.health)),
-        h('button', {
+        Btn({
           key: 'savebtn',
-          onclick: () => {
+          primary: true,
+          onClick: (e) => {
+            e.preventDefault();
             B.setBackend(state.backendDraft);
             state.backend = state.backendDraft;
             state.health = { status: 'unknown' };
             render();
             init();
           },
-        }, 'save + reconnect'),
+          children: 'save + reconnect',
+        }),
       ],
     }),
     Panel({