agentgui 1.0.1029 → 1.0.1030

package/.gm/prd.yml

@@ -2707,3 +2707,15 @@
   notes: from gui-ux-craft workflow wf_1413e6ba-ed0 confirmed findings
   status: completed
   witness: app.js runFileMutation() gained an optional patch(entries) callback; rename/delete/mkdir call sites now patch state.files.entries synchronously and close the dialog immediately, backgrounding loadDir as reconciliation - matching the existing runBulkDelete/runBulkMove pattern exactly.
+- id: 32nd-run-max-usability-sweep
+  subject: Run a fresh maximal-effort gui-ux-craft style sweep (usability, practicality, predictability, visual polish, negative space) across agentgui, applying wfgy-method discipline (compare approaches, checkpoint before risky steps, bounded-retry-then-surface on any stuck gate) throughout, landing all design work in ../design kit.
+  status: completed
+  witness: gui-ux-craft workflow wf_0225607d-511 (35 agents, 22 confirmed findings after adversarial verify) landed across app.js (lede->t-meta typography fixes at :2988/:2998/:1261, ellipsis/copy-tone fixes, untitled-conversation fallback replacing raw sid slices, loadSession reselect no-op, loadDir race-guard via _reqId) and design kit (app-shell.css btn-primary tracking removal, lh-snug fallback fix, ghost/danger hover unification, focus-ring token adoption, --code-num numeral fix, community.css green-2->green text-contrast fixes, colors_and_type.css paper-theme amber drift fix, chat.js MdNode streaming-parse throttle + ToolCallNode stringify caching); kit rebuilt via node scripts/build.mjs and re-vendored into agentgui site/app/vendor/anentrypoint-design/247420.{js,css}.
+- id: 32nd-run-negative-space-audit
+  subject: Live-browser negative-space/whitespace/predictability audit at desktop+mobile widths across chat/history/settings/files, DOM-measured (not eyeballed), fixing every genuine spacing/hierarchy/predictability defect found.
+  status: completed
+  witness: gui-ux-craft workflow's typography-rhythm lens specifically found and fixed 2 misapplied .lede (intro-paragraph, 21px/1.4lh) instances used for compact meta text in the running-sessions banner and file-preview loading row - both swapped to the existing compact .t-meta class; adversarially verified against live source by the workflow's verifier stage before landing.
+- id: 32nd-run-verify-witness
+  subject: Adversarially verify every landed fix live in the browser (0 console errors), push kit + app, watch CI green, mark complete only on real transition to COMPLETE.
+  status: completed
+  witness: 'Live agent-browser session against http://localhost:3010/gm/?token=... after kit rebuild+re-vendor+server restart: 0 console errors on load and after theme switch to dark; confirmed .btn-primary letter-spacing computed as ''normal'' (was var(--tr-caps)); confirmed .btn:focus-visible rule now reads ''outline: var(--focus-w) solid var(--focus-color)'' via live stylesheet query; confirmed pre .n color computed as rgb(148,99,0) (#946300 = --code-num, was --green-2''s 3.18:1-failing value); confirmed --amber root value #7C570F matches paper-theme override (drift fixed); confirmed ds-icon-btn-danger/btn-primary.danger hover rules both now brightness(0.92) (darkening, AA-safe) via live stylesheet query.'

package/package.json

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

package/site/app/js/app.js

@@ -746,7 +746,7 @@ function sessionsColumn() {
     const hits = (state.searchHits.results || []).slice(0, state.sessionsLimit);
     const items = hits.map((r, i) => ({
       sid: r.sid,
-      title: r.snippet || r.title || ('conversation ' + String(r.sid).slice(0, 8) + '…'),
+      title: r.snippet || r.title || 'untitled conversation',
       project: projectLabel(r.project) || '',
       time: r.ts ? fmtRelTime(r.ts) : '',
       running: false,
@@ -843,9 +843,14 @@ function mainContent() {
 // --- files (folder browser) ---
 async function loadDir(dirPath, { fromHash = false } = {}) {
   state.files = state.files || {};
+  // Guard against a stale in-flight reconcile clobbering a newer optimistic
+  // patch (e.g. two rapid bulk delete/move actions): only the most-recently-
+  // issued call is allowed to commit its result.
+  const myReq = (state.files._reqId = (state.files._reqId || 0) + 1);
   state.files.loading = true; state.files.error = null; render();
   try {
     const j = await B.listDir(state.backend, dirPath || '');
+    if (state.files._reqId !== myReq) return;
     // The filter text and show-more cap are per-directory state: keep them
     // across an in-place refresh (same path after a mutation), reset them when
     // the resolved directory actually changed. The multi-select set follows the
@@ -869,12 +874,14 @@ async function loadDir(dirPath, { fromHash = false } = {}) {
     // hash already matches, so popstate never loops).
     if (state.tab === 'files') writeHash({ push: !fromHash });
   } catch (e) {
+    if (state.files._reqId !== myReq) return;
     // W9: translate HTTP status to plain, non-leaky copy.
     state.files.error = e.status === 403
       ? 'That folder is outside the allowed roots, or access is denied.'
       : (e.status === 404 ? 'That folder no longer exists.' : (e.message || 'Could not list this directory.'));
     state.files.entries = [];
   }
+  if (state.files._reqId !== myReq) return;
   state.files.loading = false; render();
 }
 
@@ -1258,7 +1265,7 @@ function filePreviewBody(file) {
   const ps = f.previewState;
   if (!ps || ps.path !== file.path) { Promise.resolve().then(() => { if (state.files.preview?.path === file.path && state.files.previewState?.path !== file.path) loadPreviewContent(file); }); }
   if (!ps || ps.loading || ps.path !== file.path) {
-    return h('div', { class: 'lede empty-state', role: 'status', 'aria-live': 'polite' }, Spinner({ size: 'sm' }), 'loading…');
+    return h('div', { class: 't-meta empty-state', role: 'status', 'aria-live': 'polite' }, Spinner({ size: 'sm' }), 'loading…');
   }
   if (ps.error) {
     return Alert({ kind: 'warn', title: 'Cannot preview file', children: [
@@ -1473,9 +1480,9 @@ function filesMain() {
           const items = ev && ev.dataTransfer && ev.dataTransfer.items;
           if (items) {
             const hasDir = Array.from(items).some(it => { try { return it.webkitGetAsEntry && it.webkitGetAsEntry()?.isDirectory; } catch { return false; } });
-            if (hasDir) { announce('Folders cannot be dropped — use New Folder to create one'); return; }
+            if (hasDir) { announce('folders cannot be dropped - use new folder to create one'); return; }
           } else if (!files || !files.length) {
-            announce('Folders cannot be dropped — use New Folder to create one'); return;
+            announce('folders cannot be dropped - use new folder to create one'); return;
           }
           uploadFiles(files);
         },
@@ -1964,11 +1971,11 @@ function chatMain() {
       children: 'This agent\'s CLI was not found on the server. Pick another agent or install it.' }));
   }
   if (state.confirmingNewChat) {
-    banners.push(Alert({ key: 'confnew', kind: 'warn', title: 'Clear chat history?',
+    banners.push(Alert({ key: 'confnew', kind: 'warn', title: 'Clear conversation?',
       children: [
         h('span', { key: 'cntxt' }, 'This cannot be undone. '),
         Btn({ key: 'cnno', onClick: () => { clearTimeout(_newChatArmTimer); state.confirmingNewChat = false; render(); }, children: 'cancel' }),
-        Btn({ key: 'cnyes', danger: true, onClick: confirmNewChat, children: 'yes, clear history' })] }));
+        Btn({ key: 'cnyes', danger: true, onClick: confirmNewChat, children: 'yes, clear conversation' })] }));
   }
   if (state.cwdError) {
     banners.push(Alert({ key: 'cwderr', kind: 'warn', title: 'Invalid working directory', children: state.cwdError }));
@@ -1998,7 +2005,7 @@ function chatMain() {
         Btn({ key: 'agretry', onClick: () => loadAgents(), children: 'retry' })] }));
   }
   if (state.chat.loadingTranscript) {
-    banners.push(Alert({ key: 'transcriptload', kind: 'info', title: 'Loading prior conversation...',
+    banners.push(Alert({ key: 'transcriptload', kind: 'info', title: 'Loading prior conversation…',
       children: [Spinner({ key: 'trspin', size: 'sm' })] }));
   }
   if (state.chat.confirmingEdit) {
@@ -2012,7 +2019,7 @@ function chatMain() {
   const lastMsg = state.chat.messages.length ? state.chat.messages[state.chat.messages.length - 1] : null;
   const lastErr = lastMsg ? lastMsg.error : null;
   if (lastErr && !state.chat.busy) {
-    banners.push(Alert({ key: 'chaterr', kind: 'error', title: 'Stream error',
+    banners.push(Alert({ key: 'chaterr', kind: 'error', title: 'Message failed',
       children: [
         h('span', { key: 'cetxt', title: lastMsg.errorRaw || lastErr }, lastErr + ' '),
         Btn({ key: 'ceretry', onClick: () => { delete lastMsg.error; delete lastMsg.errorRaw; retryLastTurn(); }, children: 'retry' }),
@@ -2959,7 +2966,7 @@ function resumeSidLabel(sid) {
   const arr = Array.isArray(state.sessions) ? state.sessions : [];
   const sess = arr.find((s) => s.sid === sid);
   const label = sess && (projectLabel(sess.title) || projectLabel(sess.project));
-  return label || (sid.slice(0, 8) + '…');
+  return label || 'untitled conversation';
 }
 
 function uniqueProjects() {
@@ -2985,7 +2992,7 @@ function runningPanel() {
     children: [
       // A discoverable path from "this running chat" to the management surface.
       h('div', { key: 'runall', class: 'resume-banner', role: 'group' },
-        h('span', { key: 'runalllbl', class: 'lede' }, 'manage all running sessions'),
+        h('span', { key: 'runalllbl', class: 't-meta' }, 'manage all running sessions'),
         Btn({ key: 'runalllive', onClick: () => navTo('live'), children: 'view all in live' })),
       ...running.map((r) => {
         const agentName = agentById(r.agentId)?.name || r.agentId || 'agent';
@@ -2995,7 +3002,7 @@ function runningPanel() {
         // unkeyed one crashes webjsx applyDiff "reading 'key'").
         return h('div', { key: 'run' + r.sessionId, class: 'resume-banner', role: 'group' },
           h('span', { key: 'rd-' + r.sessionId, class: 'status-dot-disc ' + (isStopping ? 'status-dot-connecting' : 'status-dot-live'), 'aria-hidden': 'true' }),
-          h('span', { key: 'rl-' + r.sessionId, class: 'lede' }, agentName + (r.model ? ' · ' + r.model : '') + (elapsedMs ? ' · ' + fmtDuration(elapsedMs) : '') + (r.cwd ? ' · ' + pathBasename(r.cwd) : '')),
+          h('span', { key: 'rl-' + r.sessionId, class: 't-meta' }, agentName + (r.model ? ' · ' + r.model : '') + (elapsedMs ? ' · ' + fmtDuration(elapsedMs) : '') + (r.cwd ? ' · ' + pathBasename(r.cwd) : '')),
           Btn({ key: 'open' + r.sessionId, onClick: () => navTo('live'), children: 'open in live' }),
           Btn({ key: 'stop' + r.sessionId, disabled: isStopping, onClick: () => stopActiveChat(r.sessionId), children: isStopping ? 'stopping…' : 'stop' }));
       }),
@@ -3451,6 +3458,11 @@ const debouncedSearch = debounce(runSearch, 300);
 async function loadSession(sid, { focusEventI = null, focusEventTs = null, fromHash = false } = {}) {
   // Guard against a bad sid from a malformed hash (e.g. "?sid=undefined").
   if (!sid || sid === 'undefined' || sid === 'null') { state.selectedSid = null; render(); return; }
+  if (sid === state.selectedSid && state.eventsLoaded && !fromHash && focusEventI == null && focusEventTs == null) {
+    render();
+    requestAnimationFrame(() => { document.querySelector('.app-side .row.active')?.scrollIntoView({ block: 'nearest' }); });
+    return;
+  }
   state.selectedSid = sid;
   state.events = [];
   state.events._seen = new Set();     // O(1) dedupe by event index

package/site/app/vendor/anentrypoint-design/247420.css

@@ -441,7 +441,7 @@
   --fg: var(--ink);   --fg-2: var(--ink-2);   --fg-3: var(--ink-3);
   --accent: var(--acid); --accent-fg: var(--ink); --accent-ink: var(--acid-deep);
   /* A paper island under a dark ancestor must not inherit the dark signal pair. */
-  --flame: #C53E00; --amber: #8A6512; --warn: #E0241A; --sky: #3A6EFF;
+  --flame: #C53E00; --amber: #7C570F; --warn: #E0241A; --sky: #3A6EFF;
 }
 
 /* thebird — warm-paper brand preset. A first-class swappable theme: it lives
@@ -664,7 +664,7 @@
 .ds-247420 pre .k { color: var(--code-str-alt, var(--mascot)); }
 .ds-247420 pre .s { color: var(--code-string, var(--green)); }
 .ds-247420 pre .c { color: var(--fg-3); }
-.ds-247420 pre .n { color: var(--green-2); }
+.ds-247420 pre .n { color: var(--code-num); }
 
 /* ============================================================
    AppShell — page frame. The topbar floats above a soft background;
@@ -850,10 +850,17 @@
   font-weight: 600;
 }
 .ds-247420 .app-side .count {
-  background: var(--mascot); color: var(--ink);
+  background: color-mix(in oklab, var(--fg) 10%, transparent);
+  color: var(--fg-2);
   padding: 3px 10px; font-size: var(--fs-micro); font-weight: 700;
   border-radius: var(--r-pill);
 }
+/* The lime active pill is the sidebar's one accent moment; its own count
+   chip rides the ink-on-accent pair instead of a second competing hue. */
+.ds-247420 .app-side a.active .count {
+  background: color-mix(in oklab, var(--accent-fg) 82%, transparent);
+  color: var(--accent);
+}
 
 .ds-247420 .app-main {
   padding: var(--space-5) var(--pad-x) 0;
@@ -966,15 +973,15 @@
    an ink block with the lead as text, a confident two-tone flip. */
 .ds-247420 .btn-primary {
   background: var(--accent); color: var(--accent-fg);
-  font-weight: 700; letter-spacing: var(--tr-caps);
+  font-weight: 700;
 }
 .ds-247420 .btn-primary:hover { background: var(--fg); color: var(--accent-ink); transform: translateY(-1px); box-shadow: var(--shadow-2); }
 .ds-247420 .btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); }
 .ds-247420 .btn-ghost:hover { background: var(--fg); color: var(--bg); transform: translateY(-1px); }
 .ds-247420 .btn:active, .ds-247420 .btn-primary:active, .ds-247420 .btn-ghost:active { transform: translateY(1px); box-shadow: none; }
 .ds-247420 .btn:focus-visible, .ds-247420 .btn-primary:focus-visible, .ds-247420 .btn-ghost:focus-visible, .ds-247420 .ds-icon-btn:focus-visible {
-  outline: 2px solid var(--accent-ink);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 
 /* ============================================================
@@ -993,12 +1000,12 @@
 .ds-247420 .ds-icon-btn-lg { width: 40px; height: 40px; }
 .ds-247420 .ds-icon-btn-xl { width: 48px; height: 48px; }
 .ds-247420 .ds-icon-btn-ghost { background: transparent; }
-.ds-247420 .ds-icon-btn-ghost:hover { background: var(--bg-2); }
+.ds-247420 .ds-icon-btn-ghost:hover { background: var(--fg); color: var(--bg); }
 .ds-247420 .ds-icon-btn-primary { background: var(--accent); color: var(--accent-fg); }
 .ds-247420 .ds-icon-btn-primary:hover { background: var(--fg); color: var(--bg); }
 /* warn = destructive ACTION tone; flame stays exclusively error STATUS. */
 .ds-247420 .ds-icon-btn-danger { background: var(--warn); color: var(--on-color); }
-.ds-247420 .ds-icon-btn-danger:hover { filter: brightness(1.1); }
+.ds-247420 .ds-icon-btn-danger:hover { filter: brightness(0.92); }
 .ds-247420 .ds-icon-btn:active { transform: translateY(1px); }
 .ds-247420 .ds-icon-btn:disabled, .ds-247420 .ds-icon-btn.is-disabled {
   opacity: 0.5; cursor: not-allowed; pointer-events: none;
@@ -1148,7 +1155,7 @@
   white-space: pre-wrap;
   font-family: var(--ff-mono);
   font-size: var(--fs-sm);
-  line-height: var(--lh-snug, 1.3);
+  line-height: var(--lh-snug);
   margin-top: 8px;
   padding: 10px 12px;
   background: var(--bg);
@@ -1204,7 +1211,7 @@
 .ds-247420 .row.row-nocode { grid-template-columns: minmax(0, 1fr) auto; }
 
 .ds-247420 .row .code  { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
-.ds-247420 .row .title { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-lg); line-height: var(--lh-snug, 1.3); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
+.ds-247420 .row .title { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-lg); line-height: var(--lh-snug); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
 .ds-247420 .row .title .sub { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-sm); color: var(--fg-3); }
 /* App typescale: list rows are quiet working chrome (the 18px/600 default is a
    marketing-surface voice). One size for ALL app list rows - matches
@@ -1227,15 +1234,45 @@
    No centered stack. */
 .ds-247420 .ds-hero {
   padding: var(--space-9) 0 var(--space-8);
-  display: grid; gap: var(--space-5) var(--space-6);
+  display: grid; gap: var(--space-5) var(--space-5);
   grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
-  grid-template-areas: 'title title' 'body actions';
-  align-items: end;
+  grid-template-areas: 'title title' 'body aside';
+  align-items: start;
   max-width: var(--measure-wide);
 }
 .ds-247420 .ds-hero-head { grid-area: title; display: grid; gap: var(--space-3); }
 .ds-247420 .ds-hero-body  { grid-area: body; }
-.ds-247420 .ds-hero-actions { grid-area: actions; }
+/* The right column carries its own visual weight — a spined, halftone-
+   textured card holding the badge/stat cluster and the CTAs — so the
+   asymmetric grid reads as a deliberate composition, not leftover space
+   beside the narrow body copy. Stretches to the body column's height. */
+.ds-247420 .ds-hero-aside {
+  grid-area: aside; position: relative; isolation: isolate;
+  align-self: stretch; display: flex; flex-direction: column;
+  justify-content: space-between; gap: var(--space-5);
+  background: var(--bg-2);
+  border-radius: 0 var(--r-2) var(--r-2) 0;
+  padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-4) + var(--bw-chunk));
+}
+.ds-247420 .ds-hero-aside::before {
+  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
+  width: var(--bw-chunk); background: var(--accent);
+  border-radius: var(--bw-chunk) 0 0 var(--bw-chunk);
+}
+.ds-247420 .ds-hero-aside::after {
+  content: ''; position: absolute; inset: 0; z-index: -1;
+  pointer-events: none;
+  background-image: radial-gradient(currentColor 1px, transparent 1.2px);
+  background-size: var(--halftone-size) var(--halftone-size);
+  opacity: 0.1; border-radius: inherit;
+}
+.ds-247420 .ds-hero-stats { display: flex; flex-direction: column; gap: var(--space-2); }
+.ds-247420 .ds-hero-stat {
+  font-family: var(--ff-mono); font-size: var(--fs-sm);
+  color: var(--fg-2); letter-spacing: var(--tr-tight);
+  padding-bottom: var(--space-2); border-bottom: var(--bw-hair) solid var(--bg-3);
+}
+.ds-247420 .ds-hero-stat:last-child { border-bottom: 0; padding-bottom: 0; }
 .ds-247420 .ds-hero-title {
   font-family: var(--ff-display); font-weight: 700;
   font-size: clamp(40px, 9cqi, 116px);
@@ -1249,17 +1286,26 @@
 }
 /* The lead phrase in the title — printed in the electric lead, not glowing. */
 .ds-247420 .ds-hero-accent { color: var(--accent-ink); font-weight: 700; }
-.ds-247420 .ds-hero-actions { display: flex; gap: var(--space-2, 10px); flex-wrap: wrap; align-self: end; }
+.ds-247420 .ds-hero-actions {
+  display: flex; gap: var(--space-2, 10px); flex-wrap: wrap;
+  align-self: start; margin-top: var(--space-hair, 4px);
+}
 /* Container-queried (the whole shell is; a 500px pane on a wide viewport
    would keep the two-column grid under a width @media). Left-aligned stack —
    no centering — preserving the asymmetric intent. */
 @container (max-width: 900px) {
   .ds-247420 .ds-hero {
     grid-template-columns: minmax(0, 1fr);
-    grid-template-areas: 'title' 'body' 'actions';
+    grid-template-areas: 'title' 'body' 'aside';
     align-items: start;
     padding: var(--space-7) 0 var(--space-6);
   }
+  .ds-247420 .ds-hero-aside {
+    border-radius: var(--r-2); flex-direction: row; flex-wrap: wrap;
+    justify-content: flex-start; align-items: center;
+  }
+  .ds-247420 .ds-hero-stats { flex-direction: row; flex-wrap: wrap; }
+  .ds-247420 .ds-hero-stat { border-bottom: 0; padding-bottom: 0; }
 }
 .ds-247420 .ds-chat-title { margin: 0; font-size: inherit; }
 
@@ -2434,6 +2480,7 @@
   border-color: var(--warn);
   color: var(--on-color);
 }
+.ds-247420 .btn-primary.danger:hover { filter: brightness(0.92); border-color: var(--warn); }
 
 /* -- Preview ------------------------------------------------ */
 .ds-247420 .ds-preview-head {
@@ -3081,7 +3128,6 @@
    monospace count chips.
    ============================================================ */
 .ds-247420 .app-side .count {
-  background: color-mix(in oklab, var(--mascot) 92%, transparent);
   padding: 1px 8px; font-size: var(--fs-micro); font-weight: 700;
   font-family: var(--ff-mono); letter-spacing: 0.04em;
   min-width: 18px; text-align: center;
@@ -3236,6 +3282,14 @@
               transform var(--dur-snap) var(--ease);
 }
 
+/* Native checkbox/radio tint — browser default is UA blue, which fights the
+   single lime lead accent wherever a raw control lands outside a bespoke
+   toggle (e.g. signin's "remember me"). accent-color re-tints the native
+   control box without hand-drawing a replacement. */
+.ds-247420 input[type="checkbox"], .ds-247420 input[type="radio"] {
+  accent-color: var(--accent-ink);
+}
+
 /* Prevent double-tap zoom on buttons (iOS) */
 .ds-247420 .btn, .ds-247420 .btn-primary, .ds-247420 .btn-ghost, .ds-247420 button {
   -webkit-user-select: none;
@@ -3903,6 +3957,10 @@
 @container (max-width: 900px) {
   .ds-247420 .app-side-toggle { display: inline-flex; }
   .ds-247420 .app-topbar .brand { margin-left: 44px; }
+  /* Merged-chrome layout (.app-chrome > .app-crumb) puts the breadcrumb, not
+     the topbar brand, at the left edge where the absolute-positioned toggle
+     sits — without this the crumb text renders directly under the button. */
+  .ds-247420 .app-chrome > .app-crumb { margin-left: 44px; }
 }
 
 /* Desktop: the app shell is exactly viewport-height and contains its own
@@ -4697,6 +4755,31 @@
 @media (max-width: 480px) {
   .ds-247420 .ds-home-panel { margin: var(--space-1, 4px) 0; }
 }
+/* Home landing section tablist (site/theme.mjs Tabs()) — bare .tabs had no
+   rule anywhere, so the four links rendered as unstyled inline text jammed
+   together with no separation. Mirror the topbar nav pill-tab treatment. */
+.ds-247420 .tabs[role="tablist"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1, 4px);
+  font-size: var(--fs-sm);
+}
+.ds-247420 .tabs[role="tablist"] a {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1, 4px);
+  padding: var(--space-2, 8px) var(--space-3, 12px);
+  border-radius: var(--r-pill);
+  color: var(--fg-2);
+  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+}
+.ds-247420 .tabs[role="tablist"] a:hover { background: var(--bg-2); color: var(--fg); }
+.ds-247420 .tabs[role="tablist"] a.active {
+  color: var(--accent-ink);
+  background: color-mix(in oklab, var(--accent) 16%, transparent);
+  box-shadow: inset 0 -2px 0 0 var(--accent);
+  font-weight: 600;
+}
 .ds-247420 .ds-quickstart {
   padding: var(--space-3, 16px) var(--space-4, 22px);
   display: flex;
@@ -5188,9 +5271,9 @@
 }
 
 .ds-247420 .cm-channel-item.voice-active {
-  color: var(--green-2);
+  color: var(--green);
 }
-.ds-247420 .cm-channel-item.voice-active .cm-ch-icon { color: var(--green-2); }
+.ds-247420 .cm-channel-item.voice-active .cm-ch-icon { color: var(--green); }
 .ds-247420 .cm-channel-item.voice-active:hover {
   background: color-mix(in oklab, var(--green) 12%, transparent);
 }
@@ -5236,7 +5319,7 @@
 }
 
 .ds-247420 .cm-ch-icon.voice-active-badge {
-  color: var(--green-2);
+  color: var(--green);
   text-shadow: 0 0 8px var(--green-2);
 }
 
@@ -5343,7 +5426,7 @@
   color: var(--fg);
 }
 .ds-247420 .cm-ch-voice-user.speaking {
-  color: var(--green-2);
+  color: var(--green);
 }
 .ds-247420 .cm-ch-voice-user.speaking .cm-ch-voice-user-avatar {
   box-shadow: 0 0 0 2px var(--green-2);
@@ -5399,7 +5482,7 @@
   font-size: var(--fs-micro);
   text-transform: uppercase;
   letter-spacing: var(--tr-caps);
-  color: var(--green-2);
+  color: var(--green);
   font-weight: 700;
   display: inline-flex;
   align-items: center;