agentgui 1.0.941 → 1.0.942

package/AGENTS.md

@@ -144,3 +144,7 @@ The GUI runs fully offline. `site/app/vendor/cdn/` holds marked, dompurify, pris
 - `agents.list` (WS) returns `available` + `npxInstallable` per agent; `agents.models` returns model choices (claude-code → sonnet/opus/haiku). The chat picker is **agent-then-model**, not a flat model list. Unavailable agents are disabled/gated.
 - `chat.sendMessage` accepts `cwd` (defaults to STARTUP_CWD) and `model`/`agentId` separately. `chat.active` (WS) lists in-flight chats with agentId/model/cwd/startedAt/pid; the history tab polls it (3s) and shows a running panel with per-session stop.
 - Client (`app.js`): chat transcript persists to `localStorage[agentgui.chat]` and restores on load; tool_use/result events render as chat parts; keyboard shortcuts (g+c/h/s, n, /, ?); settings has an agents-status panel from `health.acp[]`.
+
+## DS CSS cascade — overriding component styles (2026-05-28)
+
+**`installStyles()` injects DS CSS into a runtime `<style>` after the head `<style>`, so local overrides need `!important` or higher specificity than the DS's `.ds-247420`-prefixed rules.** Full detail (font vars `--ff-display`/`--ff-mono`, the `.chat-head .sub` "00 msgs" quirk, EventList `.row[role=button]`, `[data-prog-focus]` focus suppression, `projectLabel()` for cwd slugs) is in rs-learn (recall "agentgui GUI styling DS cascade installStyles").

package/package.json

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

package/site/app/index.html

@@ -21,11 +21,39 @@
       height: 100%;
       background: var(--bg, var(--agentgui-bg));
       color: var(--fg, var(--agentgui-fg));
-      font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
+      /* The DS exposes --ff-display / --ff-mono (there is no --font-sans), so the
+         old reference fell through to the system font. Use the DS display face. */
+      font-family: var(--ff-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
     }
     #app { height: 100vh; height: 100dvh; }
     #app > * { height: 100%; }
 
+    /* Themed thin scrollbars — the native chrome scrollbar is chunky/light and
+       clashes with the dark theme on the history sidebar and settings column. */
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: color-mix(in srgb, var(--fg, var(--agentgui-fg)) 22%, transparent) transparent;
+    }
+    *::-webkit-scrollbar { width: 9px; height: 9px; }
+    *::-webkit-scrollbar-track { background: transparent; }
+    *::-webkit-scrollbar-thumb {
+      background: color-mix(in srgb, var(--fg, var(--agentgui-fg)) 20%, transparent);
+      border-radius: 999px;
+      border: 2px solid transparent;
+      background-clip: padding-box;
+    }
+    *::-webkit-scrollbar-thumb:hover {
+      background: color-mix(in srgb, var(--fg, var(--agentgui-fg)) 34%, transparent);
+      background-clip: padding-box;
+    }
+
+    /* We move focus to the page heading on tab change for AT users; suppress the
+       resulting green outline box on those programmatically-focused elements.
+       !important + .ds-247420 prefix to beat the runtime-injected DS focus rule. */
+    .ds-247420 [data-prog-focus]:focus,
+    .ds-247420 [data-prog-focus]:focus-visible,
+    [data-prog-focus]:focus, [data-prog-focus]:focus-visible { outline: none !important; box-shadow: none !important; }
+
     /* skip link for keyboard/AT users */
     .skip-link {
       position: absolute; left: -9999px; top: 0; z-index: 1000;
@@ -127,6 +155,92 @@
       outline: 2px solid var(--accent, var(--agentgui-accent)); outline-offset: 2px;
     }
 
+    /* Topbar nav: the DS renders the active tab as a large filled green pill that
+       sits taller than the inactive text links and reads as misaligned. Make all
+       tabs consistent — equal padding, the active one a subtle tinted underline-pill
+       rather than an oversized oval. */
+    /* Prefix with .ds-247420 (the <html> class) to match the DS selector's
+       specificity; source order then lets these win. */
+    .ds-247420 .app-topbar nav { display: flex; align-items: center; gap: .15em; }
+    .ds-247420 .app-topbar nav a {
+      padding: .35em .75em; border-radius: 8px; line-height: 1.4;
+      color: var(--fg-2, color-mix(in srgb, var(--fg, var(--agentgui-fg)) 75%, transparent));
+      text-decoration: none; background: transparent;
+      transition: background-color .15s ease, color .15s ease;
+    }
+    .ds-247420 .app-topbar nav a:hover { background: color-mix(in srgb, var(--fg, var(--agentgui-fg)) 8%, transparent); color: var(--fg, var(--agentgui-fg)); }
+    /* installStyles() injects the DS CSS into a runtime <style> appended after
+       this block, so equal-specificity rules lose on source order; !important is
+       the targeted override for the few props we reshape on the active tab. */
+    .ds-247420 .app-topbar nav a.active {
+      background: color-mix(in srgb, var(--accent, var(--agentgui-accent)) 16%, transparent) !important;
+      color: var(--accent, var(--agentgui-accent)) !important;
+      box-shadow: inset 0 -2px 0 0 var(--accent, var(--agentgui-accent)) !important;
+      border-radius: 8px !important;
+      font-weight: 600;
+    }
+
+    /* Compact working-directory bar (replaces the full-width tall banner box). */
+    .cwd-bar {
+      display: flex; align-items: center; gap: .5em; flex-wrap: wrap;
+      padding: .15em 0 .5em; font-size: .85rem;
+    }
+    .cwd-bar-text {
+      font-family: var(--ff-mono, ui-monospace, monospace);
+      color: var(--fg-3, #999); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw;
+    }
+    .cwd-bar-btn {
+      cursor: pointer; font: inherit; line-height: 1.3;
+      padding: .15em .55em; border-radius: 6px;
+      background: color-mix(in srgb, var(--fg, var(--agentgui-fg)) 8%, transparent);
+      border: 1px solid color-mix(in srgb, var(--fg, var(--agentgui-fg)) 14%, transparent);
+      color: var(--fg-2, var(--agentgui-fg));
+    }
+    .cwd-bar-btn:hover { background: color-mix(in srgb, var(--fg, var(--agentgui-fg)) 14%, transparent); }
+    .cwd-bar-btn:focus-visible { outline: 2px solid var(--accent, var(--agentgui-accent)); outline-offset: 2px; }
+
+    /* History no-session empty state: fill the void with a centered prompt. */
+    .history-empty {
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      gap: .4em; text-align: center; min-height: 50vh; color: var(--fg-3, #888);
+    }
+    .history-empty-glyph { font-size: 3rem; opacity: .25; line-height: 1; }
+    .history-empty-title { margin: 0; font-size: 1.05rem; color: var(--fg-2, var(--agentgui-fg)); }
+    .history-empty-sub { margin: 0; max-width: 42ch; }
+
+    /* Settings: two-column on wide screens (backend + agents) so it uses the
+       full width instead of a cramped centered measure with empty margins. */
+    .settings-grid {
+      display: grid; gap: var(--space-4, 16px);
+      grid-template-columns: minmax(0, 1fr);
+      align-items: start;
+    }
+    @media (min-width: 900px) {
+      .settings-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
+    }
+    /* The DS PageHeader carries large vertical margins that leave a big empty
+       band above the heading and between the lede and the panels. Neutralize
+       them so settings/history read as normal top-aligned scrolling pages. */
+    .agentgui-main [class*="page-header"],
+    .agentgui-main .ds-page-header { margin-top: 0 !important; margin-bottom: var(--space-4, 16px) !important; }
+    .agentgui-main > :first-child { margin-top: 0 !important; }
+    .agentgui-main-settings .settings-grid { margin-top: 0; }
+
+    /* The DS Chat head computes its own zero-padded count ("00 msgs") and ignores
+       our sub prop; it reads as a bug. Hide the DS sub — streaming state shows via
+       the title and the busy banner. Also hide the DS's empty decorative head dot. */
+    .chat-head .sub { display: none; }
+    .chat-head .dot { display: none; }
+
+    /* EventList rows are role=button (click to expand) but the DS doesn't give
+       them a pointer cursor, so the affordance is invisible. */
+    .ds-event-list .row[role="button"] { cursor: pointer; }
+    .ds-event-list .row[role="button"]:hover { background: color-mix(in srgb, var(--fg, var(--agentgui-fg)) 5%, transparent); }
+
+    /* Chat composer: hide the idle scrollbar on the (empty/short) textarea. */
+    .chat-composer textarea { overflow-y: auto; scrollbar-width: thin; }
+    .chat-composer textarea:not(:focus) { overflow-y: hidden; }
+
     /* touch targets on small screens */
     @media (max-width: 640px) {
       .pill { min-height: 36px; padding: .4em .8em; }

package/site/app/js/app.js

@@ -150,12 +150,31 @@ function navTo(tab) {
   render();
   // Move focus into the new region for keyboard/AT users.
   requestAnimationFrame(() => {
+    syncAriaCurrent();
     const region = document.querySelector('#agentgui-main');
     if (!region) return;
     const heading = region.querySelector('h1, h2');
     const target = heading || region;
     if (!target.hasAttribute('tabindex')) target.setAttribute('tabindex', '-1');
+    // Mark as programmatically focused so CSS can suppress the focus ring — we
+    // move focus here for AT, but a visible green outline box around the heading
+    // reads as an accidental border to sighted users.
+    target.setAttribute('data-prog-focus', '');
     try { target.focus({ preventScroll: true }); } catch {}
+    const clear = () => { target.removeAttribute('data-prog-focus'); target.removeEventListener('blur', clear); };
+    target.addEventListener('blur', clear);
+  });
+}
+
+// The DS Topbar derives aria-current from href↔location.hash matching, which
+// drifts from our hash-based active tab (e.g. aria-current lands on "settings"
+// while we're on "chat"). Re-assert aria-current on the actually-active tab.
+function syncAriaCurrent() {
+  const links = document.querySelectorAll('.app-topbar nav a');
+  links.forEach((a) => {
+    const isActive = a.classList.contains('active');
+    if (isActive) a.setAttribute('aria-current', 'page');
+    else a.removeAttribute('aria-current');
   });
 }
 
@@ -255,8 +274,10 @@ function view() {
   const glyphMatch = dotText.match(/^([●◌○])\s*(.*)$/);
   const dotGlyph = glyphMatch ? glyphMatch[1] : '';
   const dotLabel = glyphMatch ? glyphMatch[2] : dotText;
+  // When live, the CSS .status-dot-live::before draws the (pulsing) dot, so the
+  // literal glyph would render a second dot — only emit the glyph when NOT live.
   const dot = h('span', { key: 'dot', class: 'status-dot' + (dotLive ? ' status-dot-live' : ''), role: 'status', 'aria-live': 'polite' },
-    dotGlyph ? h('span', { key: 'dg', 'aria-hidden': 'true' }, dotGlyph + ' ') : null,
+    (!dotLive && dotGlyph) ? h('span', { key: 'dg', 'aria-hidden': 'true' }, dotGlyph + ' ') : null,
     h('span', { key: 'dl' }, dotLabel));
 
   const topbar = Topbar({
@@ -331,8 +352,7 @@ function view() {
         children: 'g then c/h/s — chat/history/settings · n — new chat · / — focus search/composer · ? — toggle this · Esc — blur field' })
     : null;
   const main = h('div', { id: 'agentgui-main', role: 'main', 'data-chat-scroll': '', class: 'agentgui-main agentgui-main-' + state.tab, style: mainStyle }, [shortcutsHint, ...mainContent()].filter(Boolean));
-  // settings reads better centered in a measure; chat + history use full width.
-  return AppShell({ topbar, crumb, side, main, status, narrow: state.tab === 'settings' });
+  return AppShell({ topbar, crumb, side, main, status, narrow: false });
 }
 
 function mainContent() {
@@ -434,7 +454,14 @@ function chatMain() {
     ...banners,
     Chat({
       title: agentName + (state.selectedModel ? ' · ' + state.selectedModel : '') + (state.chat.resumeSid ? ' · resume' : ''),
-      sub: state.chat.busy ? 'streaming…' : undefined,
+      // 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,
     }),
@@ -459,10 +486,11 @@ function cwdBanner() {
       }, children: 'save' }),
       Btn({ key: 'cwdcancel', onClick: () => { state.cwdEditing = false; state.cwdDraft = undefined; render(); }, children: 'cancel' }));
   }
-  return h('div', { key: 'cwdb', class: 'resume-banner', role: 'group', 'aria-label': 'Working directory' },
-    h('span', { class: 'lede' }, state.chatCwd ? '▣ cwd: ' + state.chatCwd : '▣ cwd: server default'),
-    Btn({ key: 'cwdset', onClick: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; render(); }, children: state.chatCwd ? 'change' : 'set' }),
-    state.chatCwd ? Btn({ key: 'cwdclr', onClick: () => { state.chatCwd = ''; lsRemove('agentgui.cwd'); render(); }, children: '× default' }) : null);
+  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 ? '▣ ' + 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(); } }, '× default') : null);
 }
 
 function newChat() {
@@ -553,22 +581,31 @@ function reconnectAlert() {
 
 function historyMain() {
   if (!state.selectedSid) {
+    const count = (Array.isArray(state.sessions) ? state.sessions : []).length;
     return [
       reconnectAlert(),
       PageHeader({
         title: '§ history',
         lede: 'pick a session from the sidebar — events stream live from ccsniff /v1/history.',
       }),
+      h('div', { key: 'histempty', class: 'history-empty', role: 'status' },
+        h('div', { key: 'ge', class: 'history-empty-glyph', 'aria-hidden': 'true' }, '§'),
+        h('p', { key: 'gt', class: 'history-empty-title' },
+          count ? 'Select a session to view its events' : 'No sessions yet'),
+        h('p', { key: 'gs', class: 'lede history-empty-sub' },
+          count
+            ? count + ' session' + (count === 1 ? '' : 's') + ' available · use the search box or press / to filter'
+            : 'Start a chat or run a local coding agent — its session will appear here live.')),
     ].filter(Boolean);
   }
 
   const sess = (Array.isArray(state.sessions) ? state.sessions : []).find(s => s.sid === state.selectedSid);
   const lede = sess
-    ? (sess.project || sess.cwd || '?') + ' · ' + (sess.events || 0) + ' events · ' + (sess.userTurns || 0) + ' turns · ' + fmtRelTime(sess.last)
+    ? (projectLabel(sess.project) || sess.cwd || '?') + ' · ' + (sess.events || 0) + ' events · ' + (sess.userTurns || 0) + ' turns · ' + fmtRelTime(sess.last)
     : state.selectedSid;
 
   const head = PageHeader({
-    title: '§ ' + truncate(sess?.title || state.selectedSid, 40, 80),
+    title: '§ ' + truncate(projectLabel(sess?.title) || projectLabel(sess?.project) || state.selectedSid, 40, 80),
     lede,
   });
 
@@ -668,6 +705,16 @@ function visibleSessions() {
   return filtered.slice().sort((a, b) => (b.last || 0) - (a.last || 0));
 }
 
+// ccsniff derives `project` from the ~/.claude/projects dir name, which encodes
+// the cwd as a dash-joined path (e.g. "-config-workspace-agentgui"). Show the
+// last meaningful segment ("agentgui") rather than the raw slug.
+function projectLabel(project) {
+  if (!project) return '';
+  if (/[/\\]/.test(project)) return project.split(/[/\\]/).filter(Boolean).pop() || project;
+  const segs = project.split('-').filter(Boolean);
+  return segs.length ? segs[segs.length - 1] : project;
+}
+
 function uniqueProjects() {
   const arr = Array.isArray(state.sessions) ? state.sessions : [];
   const seen = new Map();
@@ -699,7 +746,7 @@ function historySide() {
         Row({
           key: 'sess' + s.sid,
           rank: String(i + 1).padStart(3, '0'),
-          title: (s.isSubagent ? '↳ ' : '') + (s.title || s.project || s.sid),
+          title: (s.isSubagent ? '↳ ' : '') + (projectLabel(s.title) || projectLabel(s.project) || s.sid),
           sub: fmtRelTime(s.last) + ' · ' + (s.events || 0) + ' ev · ' + (s.tools || 0) + ' tools' + (s.errors ? ' · ' + s.errors + ' err' : ''),
           rail: s.errors ? 'flame' : (s.isSubagent ? 'purple' : 'green'),
           active: s.sid === state.selectedSid,
@@ -755,7 +802,7 @@ function historySide() {
           ? h('div', { key: 'projfilter', class: 'pill-row', role: 'group', 'aria-label': 'Filter sessions by project' },
               pillButton('allp', 'all', !state.projectFilter, 'Show all projects', () => { state.projectFilter = ''; render(); }),
               ...projects.slice(0, 8).map(([name, count]) =>
-                pillButton('p'+name, truncate(name, 14, 20) + ' (' + count + ')', state.projectFilter === name, name, () => { state.projectFilter = state.projectFilter === name ? '' : name; render(); })))
+                pillButton('p'+name, truncate(projectLabel(name), 14, 20) + ' (' + count + ')', state.projectFilter === name, name, () => { state.projectFilter = state.projectFilter === name ? '' : name; render(); })))
           : null,
         !searching && subagentCount
           ? h('label', { key: 'subtog', class: 'lede subagent-toggle' },
@@ -814,6 +861,7 @@ function settingsMain() {
       title: '⌘ settings',
       lede: 'point agentgui at any backend. blank = same-origin (ccsniff in-process). ?backend=… or the field below persists via localStorage.',
     }),
+    h('div', { key: 'settings-grid', class: 'settings-grid' }, [
     Panel({
       title: 'backend',
       children: h('form', {
@@ -847,6 +895,7 @@ function settingsMain() {
       ]),
     }),
     agentsPanel(),
+    ]),
   ];
 }
 
@@ -914,6 +963,8 @@ async function runSearch() {
 const debouncedSearch = debounce(runSearch, 300);
 
 async function loadSession(sid) {
+  // Guard against a bad sid from a malformed hash (e.g. "?sid=undefined").
+  if (!sid || sid === 'undefined' || sid === 'null') { state.selectedSid = null; render(); return; }
   state.selectedSid = sid;
   state.events = [];
   state.eventsLoaded = false;
@@ -984,6 +1035,7 @@ function registerWsStatusOnce() {
 
 restoreChat();
 render = mount(document.getElementById('app'), view);
+requestAnimationFrame(syncAriaCurrent);
 
 // Re-render on resize so isNarrow()/truncate() reflect the current width
 // (they read window.innerWidth only at render time).