agentgui 1.0.941 → 1.0.943

package/AGENTS.md

@@ -16,13 +16,23 @@ Dependencies:
 - `ccsniff` (>=1.1.0) — exports `createHistoryRouter({projectsDir})` mountable on Express; serves `/v1/history/{sessions,sessions/:sid/events,search,snapshot,reindex,stream}`. Reads `~/.claude/projects` (override via `CLAUDE_PROJECTS_DIR`).
 - `anentrypoint-design` (>=0.0.119) — kit library, single-file ESM from unpkg
 
-## Browser Witness
+## Orchestration agents
 
-`bun server.js`. Default `PORT=3000` (server.js); the SPA is served under `BASE_URL` (default `/gm/`), so the live app is **http://localhost:3000/gm/** — `/health` and `/` answer at root, the app is under `/gm/`. First request to `/gm/` or `/v1/history/*` triggers a 30-90s ccsniff JSONL walk (curl with a short timeout returns 000 during warmup). AppShell renders nav=[chat,history,settings], SSE `hello`, 0 console errors, backend resolves to `''` (same origin).
+The four flagship agents the GUI drives are **Claude Code, OpenCode, Kilo, and Antigravity (`agy`)**; the agent picker (`site/app/js/app.js`, `PRIMARY_AGENTS`) sorts these first, then other-available, then npx-installable, then not-installed.
+
+Two runner protocols exist. **Direct** (`lib/claude-runner-direct.js`): claude-code and agy — spawn the CLI per turn, parse stdout. **ACP** (`lib/acp-sdk-manager.js`): opencode/kilo/codex — an on-demand long-lived server on ports 18100/18101/18102, health-checked via `/provider`. The on-demand start + restart-backoff is correct even when an ACP agent lacks provider auth (it reports running-not-healthy rather than crashing).
 
-## Learning audit
+`agy` (Antigravity) is a Gemini-backed Go CLI. Its invocation is `agy --print "<prompt>" --dangerously-skip-permissions [--continue]` — `--print` is a **value flag** (the prompt is its argument; a positional prompt exits 2). It emits **plain text** (not stream-json) and prints no session id, so its `parseOutput` wraps each line into an assistant-text event and resume is `--continue`-only. A live model response needs an authenticated Antigravity session; without it `agy` returns empty (the direct runner resolves gracefully, no hang). Detail in rs-learn (recall "agentgui agy Antigravity agent").
 
-- 2026-05-02 session: 5 items audited (CI bun, stream imports, windows fallback, GM blocker, ACP history), 0 removed (rs-learn retrieval not yet confirmed; safety default kept all), 1 new fact ingested (in-process ccsniff history integration)
+**The direct runner spawns with `shell:false` against a resolved binary path — never `shell:true`.** `shell:true` on Windows concatenates argv without escaping, so a chat prompt containing `&`/`|`/`>`/backticks executes as shell commands (arbitrary command execution). `lib/claude-runner.js` `resolveBinaryPath` resolves the command to an absolute `.exe`; `getSpawnOptions` only defaults `shell:true` when a caller passes no explicit `shell`. Detail in rs-learn (recall "agentgui SECURITY direct runner shell:false").
+
+**Agent availability comes from `registry.isAvailable(id)`** (`lib/ws-handlers-util.js`, `agents.list`), which runs `where`/`which`. A binary installed outside the system PATH reads as "(not installed)"; the fix is an `npxPackage` on the registry entry so it falls back to bun/npx presence. Detail in rs-learn (recall "agentgui agent availability where npxPackage").
+
+**Output and source carry no decorative glyphs.** The GUI uses ASCII words and CSS-drawn discs (`.status-dot-disc`) for status, never `●/◌/○/⌘/§/▶` etc. Convert any decorative glyph to its ASCII equivalent on sight.
+
+## Browser Witness
+
+`bun server.js`. Default `PORT=3000` (server.js); the SPA is served under `BASE_URL` (default `/gm/`), so the live app is **http://localhost:3000/gm/** — `/health` and `/` answer at root, the app is under `/gm/`. First request to `/gm/` or `/v1/history/*` triggers a 30-90s ccsniff JSONL walk (curl with a short timeout returns 000 during warmup). AppShell renders nav=[chat,history,settings], SSE `hello`, 0 console errors, backend resolves to `''` (same origin).
 
 ## CI / GitHub Actions
 
@@ -144,3 +154,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/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [Unreleased] - Antigravity (agy) orchestration + glyph-to-ASCII sweep + spawn-injection fix
+
+- lib/agent-discovery.js + lib/claude-runner-agents.js + lib/agent-descriptors.js: added `agy` (Antigravity) as a direct-protocol CLI agent — `agy --print "<prompt>" --dangerously-skip-permissions [--continue]`, plain-text parseOutput, no model picker. Completes the four flagship orchestration targets (Claude Code, OpenCode, Kilo, Antigravity). Why: the GUI could not drive Antigravity at all.
+- lib/claude-runner.js + lib/claude-runner-direct.js: SECURITY — the direct runner now spawns a resolved binary with `shell:false`. Previously `shell:true` on Windows concatenated argv unescaped, so a prompt containing `&`/`|`/`>`/backticks executed as shell commands (verified injection). Why: arbitrary command execution from chat input.
+- lib/claude-runner-agents.js: claude-code registry entry gained `npxPackage` so it reports available via npx fallback when `where claude` misses a non-PATH install. Why: the flagship agent showed "(not installed)" despite being present.
+- site/app/js/app.js + site/app/index.html: removed every decorative glyph (status dots, cmd/section/box/arrow/check/cross marks) in favour of ASCII words and a CSS-drawn status disc; agent picker now sorts the four flagship targets first, then available, then npx-installable, then not-installed. Why: machine-shaped glyph tells and a flat 17-item list obscured the orchestration targets.
+
 ## [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)

package/lib/agent-descriptors.js

@@ -2,6 +2,7 @@ const agentDescriptorCache = new Map();
 
 const AGENT_DESCRIPTIONS = {
   'claude-code': 'Claude Code is an AI coding agent that can read, write, and execute code with streaming output support. It provides comprehensive code editing, file management, and terminal execution capabilities.',
+  'agy': 'Antigravity (agy) is a Gemini-backed coding agent CLI. It runs prompts non-interactively with plain-text streaming output, workspace directory scoping, and conversation resume.',
   'gemini': 'Gemini CLI is Google AI coding agent with streaming support, code execution, and file management capabilities.',
   'opencode': 'OpenCode is a multi-provider AI coding agent with streaming support and comprehensive code manipulation capabilities.',
 };

package/lib/agent-discovery.js

@@ -6,6 +6,7 @@ import { execSync } from 'child_process';
 
 const BINARIES = [
   { cmd: 'claude', id: 'claude-code', name: 'Claude Code', icon: 'C', protocol: 'cli' },
+  { cmd: 'agy', id: 'agy', name: 'Antigravity', icon: 'Y', protocol: 'cli' },
   { cmd: 'opencode', id: 'opencode', name: 'OpenCode', icon: 'O', protocol: 'acp', npxPackage: 'opencode-ai' },
   { cmd: 'gemini', id: 'gemini', name: 'Gemini CLI', icon: 'G', protocol: 'acp', npxPackage: '@google/gemini-cli' },
   { cmd: 'kilo', id: 'kilo', name: 'Kilo Code', icon: 'K', protocol: 'acp', npxPackage: '@kilocode/cli' },

package/lib/claude-runner-agents.js

@@ -97,6 +97,10 @@ function parseClaudeOutput(line) {
 registry.register({
   id: 'claude-code', name: 'Claude Code', command: 'claude', protocol: 'direct', supportsStdin: false, closeStdin: true,
   useJsonRpcStdin: false, supportedFeatures: ['streaming', 'resume', 'system-prompt', 'permissions-skip', 'steering'],
+  // claude has an npx fallback (matches agent-discovery), so when `where claude`
+  // misses a non-PATH install the agent still reports as runnable rather than
+  // "(not installed)".
+  npxPackage: '@anthropic-ai/claude-code',
   spawnEnv: { MAX_THINKING_TOKENS: '0', AGENTGUI_SUBPROCESS: '1' },
   buildArgs(prompt, config) {
     const { verbose = true, outputFormat = 'stream-json', print = true, resumeSessionId = null, systemPrompt = null, model = null } = config;
@@ -114,6 +118,29 @@ registry.register({
   parseOutput: parseClaudeOutput
 });
 
+// Antigravity (`agy`): a direct-protocol CLI like claude-code, but emits PLAIN
+// TEXT (no stream-json, no model flag, no printed session_id). Each stdout line
+// is wrapped into the assistant-text event the non-JSONL stream handler expects.
+// Resume uses --continue (most-recent conversation) since agy prints no session id.
+registry.register({
+  id: 'agy', name: 'Antigravity', command: 'agy', protocol: 'direct',
+  supportsStdin: false, closeStdin: true,
+  supportedFeatures: ['streaming', 'resume'],
+  spawnEnv: { AGENTGUI_SUBPROCESS: '1' },
+  buildArgs(prompt, config) {
+    const { resumeSessionId = null } = config;
+    // agy's --print is a VALUE flag (the prompt is its argument), not a boolean
+    // followed by a positional. A positional prompt exits with code 2.
+    const flags = ['--print', typeof prompt === 'string' ? prompt : String(prompt), '--dangerously-skip-permissions'];
+    if (resumeSessionId) flags.push('--continue');
+    return flags;
+  },
+  parseOutput(line) {
+    const text = line.replace(/\r$/, '');
+    if (!text.trim()) return null;
+    return { type: 'assistant', message: { content: [{ type: 'text', text }] } };
+  },
+});
 registry.register({ id: 'opencode', name: 'OpenCode', command: 'opencode', protocol: 'acp', supportsStdin: false, npxPackage: 'opencode-ai', supportedFeatures: ['streaming', 'resume', 'acp-protocol'], buildArgs: () => ['acp'], protocolHandler: acpProtocolHandler });
 registry.register({ id: 'gemini', name: 'Gemini CLI', command: 'gemini', protocol: 'acp', supportsStdin: false, npxPackage: '@google/gemini-cli', supportedFeatures: ['streaming', 'resume', 'acp-protocol'], buildArgs(prompt, config) { const args = ['--experimental-acp', '--yolo']; if (config?.model) args.push('--model', config.model); return args; }, protocolHandler: acpProtocolHandler });
 registry.register({ id: 'goose', name: 'Goose', command: 'goose', protocol: 'acp', supportsStdin: false, supportedFeatures: ['streaming', 'resume', 'acp-protocol'], buildArgs: () => ['acp'], protocolHandler: acpProtocolHandler });

package/lib/claude-runner-direct.js

@@ -1,14 +1,20 @@
 import { spawn } from 'child_process';
-import { AgentRunner, getSpawnOptions } from './claude-runner.js';
+import { AgentRunner, getSpawnOptions, resolveBinaryPath } from './claude-runner.js';
 
 AgentRunner.prototype.runDirect = function(prompt, cwd, config = {}) {
   return new Promise((resolve, reject) => {
     const { timeout = 300000, onEvent = null, onError = null, onRateLimit = null } = config;
     const args = this.buildArgs(prompt, config);
-    const spawnOpts = getSpawnOptions(cwd);
+    // The direct runner passes the untrusted user prompt as an argv element.
+    // Spawn with shell:false against a resolved binary so the prompt cannot be
+    // interpreted by a shell (shell:true would let "& cmd" inject). If the
+    // binary resolves to a .cmd/.bat shim, resolveBinaryPath returns the name
+    // unchanged and we fall back to the shell (npx-style fallback launchers).
+    const binary = resolveBinaryPath(this.command);
+    const spawnOpts = getSpawnOptions(cwd, { shell: false });
     if (Object.keys(this.spawnEnv).length > 0) spawnOpts.env = { ...spawnOpts.env, ...this.spawnEnv };
     if (this.closeStdin) spawnOpts.stdio = ['ignore', 'pipe', 'pipe'];
-    const proc = spawn(this.command, args, spawnOpts);
+    const proc = spawn(binary, args, spawnOpts);
     console.log(`[${this.id}] Spawned PID ${proc.pid} closeStdin=${this.closeStdin}`);
 
     if (config.onPid) { try { config.onPid(proc.pid); } catch (e) { console.error(`[${this.id}] onPid callback failed:`, e.message); } }

package/lib/claude-runner.js

@@ -4,12 +4,33 @@ const isWindows = process.platform === 'win32';
 
 export function getSpawnOptions(cwd, additionalOptions = {}) {
   const options = { cwd, ...additionalOptions };
-  if (isWindows) options.shell = true;
+  // shell:true on Windows concatenates argv WITHOUT escaping, so a user prompt
+  // containing &, |, >, or backticks executes as a shell command (verified
+  // injection). Callers that pass untrusted args (the direct runner) must set
+  // shell:false and spawn a resolved binary. Default keeps the legacy shell
+  // behaviour only when a caller has not already chosen.
+  if (isWindows && options.shell === undefined) options.shell = true;
   if (!options.env) options.env = { ...process.env };
   delete options.env.CLAUDECODE;
   return options;
 }
 
+// Resolve a bare command name to an absolute executable path so it can be
+// spawned with shell:false (no argv concatenation, no injection surface).
+// Returns the original command if resolution fails (Node will still PATH-resolve).
+export function resolveBinaryPath(command) {
+  try {
+    const whichCmd = isWindows ? 'where' : 'which';
+    const r = spawnSync(whichCmd, [command], { encoding: 'utf-8', timeout: 3000 });
+    if (r.status === 0) {
+      const first = (r.stdout || '').trim().split(/\r?\n/)[0].trim();
+      // A .cmd/.bat shim cannot be exec'd without a shell; leave it to the caller.
+      if (first && !/\.(cmd|bat)$/i.test(first)) return first;
+    }
+  } catch (_) {}
+  return command;
+}
+
 export function resolveCommand(command, npxPackage) {
   const whichCmd = isWindows ? 'where' : 'which';
   const check = spawnSync(whichCmd, [command], { encoding: 'utf-8', timeout: 3000 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.941",
+  "version": "1.0.943",
   "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;
@@ -35,21 +63,28 @@
     }
     .skip-link:focus { left: 8px; top: 8px; outline: 2px solid #fff; outline-offset: 2px; }
 
-    /* status connection dot */
-    .status-dot { display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; }
-    .status-dot-live::before {
-      content: ''; width: 8px; height: 8px; border-radius: 50%;
-      background: var(--accent, var(--agentgui-accent));
-      box-shadow: 0 0 0 0 rgba(80, 200, 120, .5);
+    /* status connection dot — a CSS-drawn disc (real UI affordance, not a text
+       glyph). The .status-dot-disc child is always present; the parent's state
+       class colours it, and only is-live pulses. */
+    .status-dot { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
+    .status-dot-disc {
+      flex: none; width: 8px; height: 8px; border-radius: 50%;
+      background: var(--muted, #8a8f98);
+    }
+    .status-dot.is-live .status-dot-disc,
+    .status-dot-live .status-dot-disc {
+      background: var(--accent, var(--agentgui-accent, #50c878));
       animation: agentgui-pulse 2s infinite;
     }
+    .status-dot.is-connecting .status-dot-disc { background: #d9a441; }
+    .status-dot.is-offline .status-dot-disc { background: #c0504d; animation: none; }
     @keyframes agentgui-pulse {
       0%   { box-shadow: 0 0 0 0 rgba(80, 200, 120, .5); }
       70%  { box-shadow: 0 0 0 6px rgba(80, 200, 120, 0); }
       100% { box-shadow: 0 0 0 0 rgba(80, 200, 120, 0); }
     }
     @media (prefers-reduced-motion: reduce) {
-      .status-dot-live::before { animation: none; }
+      .status-dot-disc { animation: none !important; }
     }
 
     /* resume banner */
@@ -127,6 +162,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');
   });
 }
 
@@ -244,19 +263,20 @@ function closeLiveStream() {
 function view() {
   const ok = state.health.status === 'ok';
   const liveActive = state.tab === 'history' && state.live.connected && (Date.now() - state.live.lastEventTs < 30000);
-  const dotText = state.tab === 'history'
+  const dotLabel = state.tab === 'history'
     ? (state.live.error
-        ? '◌ ' + state.live.error + (state.live.reconnects ? ' · ' + state.live.reconnects + ' reconnects' : '')
-        : (liveActive ? '● live · ' + state.live.eventCount : (state.live.connected ? '● live' : '◌ connecting…')))
-    : (ok ? (state.health.ws === 'reconnecting' ? '◌ ws reconnecting' : '● connected') : '○ offline');
+        ? state.live.error + (state.live.reconnects ? ' · ' + state.live.reconnects + ' reconnects' : '')
+        : (liveActive ? 'live · ' + state.live.eventCount : (state.live.connected ? 'live' : 'connecting…')))
+    : (ok ? (state.health.ws === 'reconnecting' ? 'ws reconnecting' : 'connected') : 'offline');
   const dotLive = state.tab === 'history' ? (liveActive || state.live.connected) : ok;
-  // Split the leading status glyph (● ◌ ○) from the words: glyph is decorative
-  // (aria-hidden), only the text is announced, so AT reads "live" not "black circle live".
-  const glyphMatch = dotText.match(/^([●◌○])\s*(.*)$/);
-  const dotGlyph = glyphMatch ? glyphMatch[1] : '';
-  const dotLabel = glyphMatch ? glyphMatch[2] : dotText;
-  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,
+  // The status dot is drawn entirely by CSS (.status-dot::before) — a small
+  // colored disc, real product design, not a text glyph. State drives its colour
+  // via the modifier class; the label carries only words so AT reads "live", and
+  // there are no literal status-glyph characters in the DOM.
+  const dotState = state.live.error || (!dotLive) ? 'is-offline'
+    : (dotLive && state.tab !== 'history' && state.health.ws === 'reconnecting' ? 'is-connecting' : 'is-live');
+  const dot = h('span', { key: 'dot', class: 'status-dot ' + dotState + (dotLive ? ' status-dot-live' : ''), role: 'status', 'aria-live': 'polite' },
+    h('span', { key: 'dd', class: 'status-dot-disc', 'aria-hidden': 'true' }),
     h('span', { key: 'dl' }, dotLabel));
 
   const topbar = Topbar({
@@ -267,11 +287,27 @@ function view() {
     onNav: (label) => navTo(label),
   });
 
-  const agentOptions = state.agents.map(a => ({
-    value: a.id,
-    label: a.name + (a.available === false ? (a.npxInstallable ? ' (via npx)' : ' (not installed)') : ''),
-    disabled: a.available === false && !a.npxInstallable,
-  }));
+  // The four flagship orchestration targets surface first, then the rest of the
+  // available agents, then unavailable ones — so the agents the GUI exists to
+  // drive are reachable without scanning a flat 17-item list. Ordering only;
+  // the DS Select renders a plain option list.
+  const PRIMARY_AGENTS = ['claude-code', 'opencode', 'kilo', 'agy'];
+  const agentRank = (a) => {
+    const primary = PRIMARY_AGENTS.indexOf(a.id);
+    const avail = a.available !== false;
+    if (primary !== -1 && avail) return primary;           // 0..3 flagship + available
+    if (avail) return 10;                                   // other available
+    if (a.npxInstallable) return 20;                        // installable via npx
+    return 30;                                              // not installed
+  };
+  const agentOptions = state.agents
+    .map(a => ({ a, rank: agentRank(a) }))
+    .sort((x, y) => x.rank - y.rank || x.a.name.localeCompare(y.a.name))
+    .map(({ a }) => ({
+      value: a.id,
+      label: a.name + (a.available === false ? (a.npxInstallable ? ' (via npx)' : ' (not installed)') : ''),
+      disabled: a.available === false && !a.npxInstallable,
+    }));
   const showModelPicker = state.tab === 'chat' && state.agentModels.length > 0;
 
   const crumbRight = state.tab === 'chat'
@@ -295,7 +331,7 @@ function view() {
             })
           : null,
         state.chat.busy
-          ? Btn({ key: 'stop', onClick: cancelChat, children: '◼ stop', title: 'Stop streaming' })
+          ? Btn({ key: 'stop', onClick: cancelChat, children: 'stop', title: 'Stop streaming' })
           : Btn({ key: 'new',  onClick: newChat,    children: '+ new', title: 'Start new chat (clears history)' }),
         dot,
       )]
@@ -314,10 +350,10 @@ function view() {
   const side = state.tab === 'history' ? historySide() : null;
 
   const agentLabel = state.selectedAgent
-    ? '⌘ ' + (agentById(state.selectedAgent)?.name || state.selectedAgent) + (state.selectedModel ? ' · ' + state.selectedModel : '')
-    : '○ no agent';
+    ? 'agent: ' + (agentById(state.selectedAgent)?.name || state.selectedAgent) + (state.selectedModel ? ' · ' + state.selectedModel : '')
+    : 'no agent';
   const status = Status({
-    left: [state.backend || 'same-origin', ok ? '● live' : '○ offline'],
+    left: [state.backend || 'same-origin', ok ? 'live' : 'offline'],
     right: [agentLabel],
   });
 
@@ -331,8 +367,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() {
@@ -354,14 +389,14 @@ function toolSummary(block) {
     arg = inp.command || inp.file_path || inp.path || inp.pattern || inp.query || inp.url || '';
     if (!arg) { try { arg = JSON.stringify(inp).slice(0, 120); } catch {} }
   }
-  return '⌘ ' + name + (arg ? ' · ' + String(arg).slice(0, 120) : '');
+  return 'tool: ' + name + (arg ? ' · ' + String(arg).slice(0, 120) : '');
 }
 
 function toolResultSummary(block) {
   const c = block?.content ?? block?.output ?? block;
   let s = typeof c === 'string' ? c : (() => { try { return JSON.stringify(c); } catch { return String(c); } })();
   s = s.replace(/\s+/g, ' ').trim();
-  return (block?.is_error ? '⚠ ' : '') + s.slice(0, 160);
+  return (block?.is_error ? '[error] ' : '') + s.slice(0, 160);
 }
 
 function errText(e) {
@@ -406,8 +441,8 @@ function chatMain() {
   const banners = [];
   if (state.chat.resumeSid) {
     banners.push(h('div', { key: 'rb', class: 'resume-banner', role: 'status' },
-      h('span', { key: 'rbtxt', class: 'lede' }, '▶ resuming session ' + state.chat.resumeSid.slice(0, 8) + '… via --resume'),
-      Btn({ key: 'rclr', onClick: () => { state.chat.resumeSid = null; state.chat.resumeNote = null; render(); }, children: '× clear' })));
+      h('span', { key: 'rbtxt', class: 'lede' }, 'resuming session ' + state.chat.resumeSid.slice(0, 8) + '… via --resume'),
+      Btn({ key: 'rclr', onClick: () => { state.chat.resumeSid = null; state.chat.resumeNote = null; render(); }, children: 'clear' })));
     if (state.chat.resumeNote) {
       banners.push(Alert({ key: 'rnote', kind: 'info', title: 'Agent switched', children: state.chat.resumeNote }));
     }
@@ -434,7 +469,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 +501,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 ? 'cwd: ' + 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(); } }, 'use default') : null);
 }
 
 function newChat() {
@@ -525,7 +568,7 @@ async function sendChat() {
     })) {
       if (ev.type === 'text')  { cur.content += ev.text; render(); scrollChatToBottom(); }
       else if (ev.type === 'tool') { cur.parts.push(toolSummary(ev.block)); render(); scrollChatToBottom(); }
-      else if (ev.type === 'tool_result') { cur.parts.push('↳ ' + toolResultSummary(ev.block)); render(); scrollChatToBottom(); }
+      else if (ev.type === 'tool_result') { cur.parts.push('-> ' + toolResultSummary(ev.block)); render(); scrollChatToBottom(); }
       else if (ev.type === 'result') { /* terminal usage/summary block — already reflected via text */ }
       else if (ev.type === 'error') { cur.error = errText(ev.error); render(); }
     }
@@ -553,28 +596,36 @@ function reconnectAlert() {
 
 function historyMain() {
   if (!state.selectedSid) {
+    const count = (Array.isArray(state.sessions) ? state.sessions : []).length;
     return [
       reconnectAlert(),
       PageHeader({
-        title: '§ history',
+        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('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,
   });
 
   const actions = h('div', { key: 'acts', class: 'history-actions' },
-    Btn({ key: 'resume', primary: true, onClick: () => resumeInChat(sess || { sid: state.selectedSid }), children: '▶ open in chat' }),
-    Btn({ key: 'copy', onClick: copySid, children: copyToast || '⎘ copy sid' }),
+    Btn({ key: 'resume', primary: true, onClick: () => resumeInChat(sess || { sid: state.selectedSid }), children: 'open in chat' }),
+    Btn({ key: 'copy', onClick: copySid, children: copyToast || 'copy sid' }),
   );
 
   if (state.events.length === 0) {
@@ -604,8 +655,8 @@ function historyMain() {
           const key = e.i != null ? 'ev' + e.i : 'ev-' + (e.ts || 0) + '-' + (total - shown.length + i);
           const role = e.role || '?';
           const type = e.type || '?';
-          const tool = e.tool ? ' · ⌘ ' + e.tool : '';
-          const errMark = e.isError ? ' · ⚠' : '';
+          const tool = e.tool ? ' · tool: ' + e.tool : '';
+          const errMark = e.isError ? ' · error' : '';
           const raw = e.text || '';
           const text = raw.replace(/\s+/g, ' ').trim();
           const expanded = state.expandedEvents.has(key);
@@ -627,9 +678,9 @@ let copyToast = null;
 function copySid() {
   const sid = state.selectedSid;
   if (!sid) return;
-  const done = () => { copyToast = '✓ copied'; render(); setTimeout(() => { copyToast = null; render(); }, 1500); };
+  const done = () => { copyToast = 'copied'; render(); setTimeout(() => { copyToast = null; render(); }, 1500); };
   if (navigator.clipboard?.writeText) {
-    navigator.clipboard.writeText(sid).then(done).catch(() => { copyToast = '⚠ copy failed'; render(); setTimeout(() => { copyToast = null; render(); }, 1500); });
+    navigator.clipboard.writeText(sid).then(done).catch(() => { copyToast = 'copy failed'; render(); setTimeout(() => { copyToast = null; render(); }, 1500); });
   } else {
     // Fallback for insecure (http) origins where navigator.clipboard is absent.
     try {
@@ -637,7 +688,7 @@ function copySid() {
       ta.value = sid; ta.style.position = 'fixed'; ta.style.opacity = '0';
       document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove();
       done();
-    } catch { copyToast = '⚠ copy failed'; render(); setTimeout(() => { copyToast = null; render(); }, 1500); }
+    } catch { copyToast = 'copy failed'; render(); setTimeout(() => { copyToast = null; render(); }, 1500); }
   }
 }
 
@@ -668,6 +719,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 +760,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,
@@ -714,13 +775,14 @@ function historySide() {
     running.length
       ? Panel({
           key: 'runningPanel',
-          title: '▶ running · ' + running.length,
+          title: 'running · ' + running.length,
           children: running.map((r, i) => {
             const agentName = agentById(r.agentId)?.name || r.agentId || 'agent';
             const elapsed = r.startedAt ? Math.round((Date.now() - r.startedAt) / 1000) : 0;
             return h('div', { key: 'run' + r.sessionId, class: 'resume-banner', role: 'group' },
-              h('span', { class: 'lede' }, '● ' + agentName + (r.model ? ' · ' + r.model : '') + ' · ' + elapsed + 's' + (r.cwd ? ' · ' + r.cwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : '')),
-              Btn({ key: 'stop' + r.sessionId, onClick: () => stopActiveChat(r.sessionId), children: '◼ stop' }));
+              h('span', { key: 'rd', class: 'status-dot-disc status-dot-live', 'aria-hidden': 'true' }),
+              h('span', { class: 'lede' }, agentName + (r.model ? ' · ' + r.model : '') + ' · ' + elapsed + 's' + (r.cwd ? ' · ' + r.cwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : '')),
+              Btn({ key: 'stop' + r.sessionId, onClick: () => stopActiveChat(r.sessionId), children: 'stop' }));
           }),
         })
       : null,
@@ -749,13 +811,13 @@ function historySide() {
           ? h('p', { key: 'min2', class: 'lede empty-state' }, 'type at least 2 characters to search')
           : null,
         state.searchQ
-          ? Btn({ key: 'clearq', onClick: () => { state.searchQ = ''; state.searchHits = null; state.searchBusy = false; render(); }, children: '× clear search' })
+          ? Btn({ key: 'clearq', onClick: () => { state.searchQ = ''; state.searchHits = null; state.searchBusy = false; render(); }, children: 'clear search' })
           : null,
         !searching && projects.length > 1
           ? 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' },
@@ -763,10 +825,10 @@ function historySide() {
               'show subagents (' + subagentCount + ')')
           : null,
         state.historyError
-          ? h('p', { key: 'err', class: 'lede field-error', role: 'alert' }, '⚠ ' + state.historyError)
+          ? h('p', { key: 'err', class: 'lede field-error', role: 'alert' }, state.historyError)
           : (rows.length ? h('div', { key: 'rows' }, ...rows) : h('p', { key: 'empty', class: 'lede empty-state' }, 'no sessions yet')),
         !searching && truncatedBy > 0
-          ? Btn({ key: 'more', onClick: () => { state.sessionsLimit += 60; render(); }, children: '↓ show '+Math.min(60, truncatedBy)+' more ('+truncatedBy+' hidden)' })
+          ? Btn({ key: 'more', onClick: () => { state.sessionsLimit += 60; render(); }, children: 'show '+Math.min(60, truncatedBy)+' more ('+truncatedBy+' hidden)' })
           : null,
       ],
     }),
@@ -795,9 +857,8 @@ async function saveBackend() {
 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'));
+  bits.push(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');
@@ -811,9 +872,10 @@ function settingsMain() {
   const isValid = isValidUrl(state.backendDraft);
   return [
     PageHeader({
-      title: '⌘ settings',
+      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', {
@@ -830,10 +892,10 @@ function settingsMain() {
           title: isValid ? 'Enter a valid URL or leave blank for same-origin' : 'Invalid URL format',
           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,
-        state.backendStatus === 'connecting' ? h('p', { key: 'bst', class: 'lede', role: 'status' }, '◌ connecting…') : null,
-        state.backendStatus === 'ok' ? h('p', { key: 'bst', class: 'lede', role: 'status' }, '● connected') : null,
-        state.backendStatus === 'failed' ? h('p', { key: 'bst', class: 'lede field-error', role: 'alert' }, '○ connection failed — check the URL') : null,
+        !isValid ? h('p', { key: 'err', id: 'backend-url-error', class: 'lede field-error', role: 'alert' }, 'Invalid URL format') : null,
+        state.backendStatus === 'connecting' ? h('p', { key: 'bst', class: 'lede', role: 'status' }, 'connecting…') : null,
+        state.backendStatus === 'ok' ? h('p', { key: 'bst', class: 'lede', role: 'status' }, 'connected') : null,
+        state.backendStatus === 'failed' ? h('p', { key: 'bst', class: 'lede field-error', role: 'alert' }, 'connection failed — check the URL') : null,
         healthSummary(),
         Btn({
           key: 'savebtn',
@@ -847,6 +909,7 @@ function settingsMain() {
       ]),
     }),
     agentsPanel(),
+    ]),
   ];
 }
 
@@ -914,6 +977,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 +1049,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).