agentgui 1.0.938 → 1.0.939

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.938",
+  "version": "1.0.939",
   "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 — multi-agent client with same-origin server, in-process ccsniff history, and ACP chat.">
-  <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@0.0.145/dist/247420.css">
+  <link rel="stylesheet" href="vendor/anentrypoint-design/247420.css">
   <script type="importmap">
-    { "imports": { "anentrypoint-design": "https://unpkg.com/anentrypoint-design@0.0.145/dist/247420.js" } }
+    { "imports": { "anentrypoint-design": "./vendor/anentrypoint-design/247420.js" } }
   </script>
   <style>
     :root {
@@ -23,8 +23,8 @@
       color: var(--fg, var(--agentgui-fg));
       font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
     }
-    #app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
-    #app > * { flex: 1 1 auto; min-height: 0; }
+    #app { height: 100vh; height: 100dvh; }
+    #app > * { height: 100%; }
 
     /* skip link for keyboard/AT users */
     .skip-link {
@@ -90,6 +90,65 @@
 
     .field-error { color: var(--warn, var(--agentgui-warn)); }
 
+    /* chat control cluster in the crumb bar: keep model picker, +new, status
+       on one tidy baseline-aligned row instead of wrapping under the nav. */
+    .chat-controls { display: flex; align-items: center; gap: .6em; flex-wrap: nowrap; }
+    .chat-controls > * { flex: 0 0 auto; }
+    .chat-controls select,
+    .chat-controls .select,
+    .chat-controls [role="combobox"] { min-width: 150px; max-width: 220px; }
+    .chat-controls .status-dot { white-space: nowrap; }
+
+    /* Tame the design-system hero-sized PageHeader h1 to a sensible page title.
+       The DS default (--fs-h1, cqi-scaled to ~64-80px) overpowers app content. */
+    .agentgui-main .ds-section > h1 {
+      font-size: clamp(22px, 2.2vw, 30px);
+      line-height: 1.15;
+      margin-bottom: .35em;
+    }
+    .agentgui-main .ds-section { margin: 0 0 var(--space-4, 16px); }
+
+    /* TextField: stack label above the input so the label can't overlap it. */
+    .agentgui-main .ds-field {
+      display: flex; flex-direction: column; gap: .35em; align-items: stretch;
+    }
+    .agentgui-main .ds-field-label { font-size: .8rem; color: var(--fg-2, #ccc); }
+    .agentgui-main .ds-field input,
+    .agentgui-main .ds-field textarea { width: 100%; }
+
+    /* readable backend health summary (replaces raw JSON dump) */
+    .health-summary { display: flex; flex-wrap: wrap; gap: .4em; margin: .6em 0; }
+    .health-chip {
+      font-family: var(--ff-mono, ui-monospace, monospace);
+      font-size: .8rem; padding: .15em .55em; border-radius: 6px;
+      background: color-mix(in srgb, var(--fg, var(--agentgui-fg)) 8%, transparent);
+      color: var(--fg-2, var(--agentgui-fg));
+      border: 1px solid color-mix(in srgb, var(--fg, var(--agentgui-fg)) 12%, transparent);
+    }
+    .health-summary.health-ok .health-chip:first-child {
+      color: var(--accent, var(--agentgui-accent));
+      border-color: color-mix(in srgb, var(--accent, var(--agentgui-accent)) 40%, transparent);
+    }
+
+    /* search input: match the dark theme instead of a bare white box */
+    .app input[type="search"],
+    .app .search-input input,
+    .app input.search,
+    input[type="search"] {
+      background: color-mix(in srgb, var(--fg, var(--agentgui-fg)) 6%, transparent);
+      color: var(--fg, var(--agentgui-fg));
+      border: 1px solid color-mix(in srgb, var(--fg, var(--agentgui-fg)) 16%, transparent);
+      border-radius: 8px; padding: .5em .7em;
+    }
+    .app input[type="search"]::placeholder { color: var(--fg-3, #888); }
+    .app input[type="search"]:focus-visible {
+      outline: 2px solid var(--accent, var(--agentgui-accent)); outline-offset: 1px;
+    }
+
+    /* empty-state: keep it from wrapping awkwardly in the narrow sidebar */
+    .empty-state { white-space: normal; }
+    p.empty-state { text-align: left; padding: .6em 0; color: var(--fg-3, #888); }
+
     /* generic interactive focus ring */
     button:focus-visible, [tabindex]:focus-visible, a:focus-visible {
       outline: 2px solid var(--accent, var(--agentgui-accent)); outline-offset: 2px;

package/site/app/js/app.js

@@ -172,7 +172,7 @@ function view() {
   });
 
   const crumbRight = state.tab === 'chat'
-    ? [
+    ? [h('div', { key: 'cc', class: 'chat-controls' },
         Select({
           key: 'modelsel',
           value: state.selectedModel,
@@ -185,39 +185,32 @@ function view() {
           ? 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];
 
+  // 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.
   const crumb = Crumb({
-    trail: ['agentgui'],
-    leaf: state.tab,
+    trail: [],
+    leaf: '',
     right: crumbRight,
   });
 
-  const navSide = Side({
-    sections: [
-      {
-        group: 'navigate',
-        items: [
-          { glyph: '▣', label: 'chat',     key: 'chat',     active: state.tab === 'chat',
-            onClick: (e) => { e.preventDefault(); navTo('chat'); } },
-          { glyph: '§', label: 'history',  key: 'history',  active: state.tab === 'history',
-            onClick: (e) => { e.preventDefault(); navTo('history'); } },
-          { glyph: '⌘', label: 'settings', key: 'settings', active: state.tab === 'settings',
-            onClick: (e) => { e.preventDefault(); navTo('settings'); } },
-        ],
-      },
-    ],
-  });
-  const side = state.tab === 'history' ? historySide() : navSide;
+  // Sidebar is contextual: history shows the session list; chat/settings have no
+  // sidebar (the topbar already provides primary nav) so main content gets full width.
+  const side = state.tab === 'history' ? historySide() : null;
 
   const status = Status({
-    left: [state.backend, ok ? '● live' : '○ offline'],
+    left: [state.backend || 'same-origin', ok ? '● live' : '○ offline'],
     right: [state.selectedModel ? '⌘ ' + state.selectedModel : '○ no model'],
   });
 
-  const main = h('div', { id: 'agentgui-main', role: 'main', 'data-chat-scroll': '', style: 'min-height:0;height:100%;overflow:auto' }, mainContent());
-  return AppShell({ topbar, crumb, side, main, status });
+  const mainStyle = state.tab === 'chat'
+    ? 'min-height:0;height:100%;display:flex;flex-direction:column'
+    : 'min-height:0;height:100%;overflow:auto';
+  const main = h('div', { id: 'agentgui-main', role: 'main', 'data-chat-scroll': '', class: 'agentgui-main agentgui-main-' + state.tab, style: mainStyle }, mainContent());
+  // settings reads better centered in a measure; chat + history use full width.
+  return AppShell({ topbar, crumb, side, main, status, narrow: state.tab === 'settings' });
 }
 
 function mainContent() {
@@ -262,7 +255,7 @@ function chatMain() {
     resumeBanner,
     Chat({
       title: (state.selectedModel || 'agent') + (state.chat.resumeSid ? ' · resume' : ''),
-      sub: state.chat.busy ? 'streaming…' : (state.chat.messages.length + ' messages'),
+      sub: state.chat.busy ? 'streaming…' : undefined,
       messages: msgs,
       composer,
     }),
@@ -436,18 +429,6 @@ function historySide() {
   const projects = uniqueProjects();
 
   return [
-    Side({
-      sections: [
-        {
-          group: 'navigate',
-          items: [
-            { glyph: '▣', label: 'chat',     key: 'chat',     onClick: (e) => { e.preventDefault(); navTo('chat'); } },
-            { glyph: '§', label: 'history',  key: 'history',  active: true },
-            { glyph: '⌘', label: 'settings', key: 'settings', onClick: (e) => { e.preventDefault(); navTo('settings'); } },
-          ],
-        },
-      ],
-    }),
     Panel({
       title: searching
         ? 'matches · ' + (state.searchHits.results?.length || 0)
@@ -505,6 +486,20 @@ function saveBackend() {
   init();
 }
 
+function healthSummary() {
+  const hh = state.health || {};
+  const ok = hh.status === 'ok';
+  const dot = ok ? '●' : (hh.status === 'unknown' ? '◌' : '○');
+  const bits = [];
+  bits.push(dot + ' ' + (hh.status || 'unknown'));
+  if (hh.version) bits.push('v' + hh.version);
+  if (typeof hh.agents === 'number') bits.push(hh.agents + ' agents');
+  if (typeof hh.activeExecutions === 'number') bits.push(hh.activeExecutions + ' active');
+  if (hh.db) bits.push('db ' + (hh.db.ok ? 'ok' : 'down'));
+  return h('div', { key: 'hp', class: 'health-summary' + (ok ? ' health-ok' : '') },
+    ...bits.map((b, i) => h('span', { key: 'hb' + i, class: 'health-chip' }, b)));
+}
+
 function settingsMain() {
   const ok = state.health.status === 'ok';
   const isValid = isValidUrl(state.backendDraft);
@@ -530,7 +525,7 @@ function settingsMain() {
           onInput: (v) => { state.backendDraft = v; render(); },
         }),
         !isValid ? h('p', { key: 'err', id: 'backend-url-error', class: 'lede field-error', role: 'alert' }, '⚠ Invalid URL format') : null,
-        h('p', { key: 'hp', class: 'lede' }, (ok ? '● ' : '○ ') + JSON.stringify(state.health)),
+        healthSummary(),
         Btn({
           key: 'savebtn',
           type: 'submit',