agentgui 1.0.942 → 1.0.944

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).
+
+`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").
+
+**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").
 
-## Learning audit
+**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").
 
-- 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)
+**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
 

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [Unreleased] - live e2e chat verified + composer caret fix + ccsniff memory cap
+
+- verified the full GUI chat round-trip end-to-end in a real browser: compose -> WS chat.sendMessage -> claude-code -> streaming_progress -> transcript renders the streamed reply (not just the runner harness).
+- site/app/js/app.js: composer onInput re-renders only on the empty<->non-empty draft transition (the only change that toggles the send button), not on every keystroke. Why: a synchronous re-render per character fought the caret on the controlled textarea.
+- vendored anentrypoint-design DS rebuilt: ChatComposer reads the live textarea value on send and syncs the controlled value into the DOM only when it differs, so a mid-type re-render no longer resets the caret or drops keystrokes. Why: DS override belongs in the kit; the composer is shared.
+- ccsniff (sibling repo, pushed): bounded the in-memory history store (event cap + eviction + per-event text cap) and bounded loadOnce to read newest events first up to the cap. Why: the store grew unbounded to 6GB+ (OOM) and parsed the entire JSONL backlog at load (~2.4GB transient peak); heap now settles ~47MB and load peak ~570MB.
+
+- 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.942",
+  "version": "1.0.944",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "electron/main.js",

package/site/app/index.html

@@ -63,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 */

package/site/app/js/app.js

@@ -263,21 +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;
-  // 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' },
-    (!dotLive && 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({
@@ -288,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'
@@ -316,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,
       )]
@@ -335,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],
   });
 
@@ -374,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) {
@@ -419,15 +434,24 @@ function chatMain() {
     value: state.chat.draft,
     disabled: !canSend(),
     placeholder,
-    onInput: (v) => { state.chat.draft = v; render(); },
+    // The DS textarea is controlled and reads its live DOM value on send, so we
+    // do NOT re-render on every keystroke (that fights the cursor and is wasteful).
+    // Re-render only when the draft crosses empty<->non-empty, since that is the
+    // only transition that changes the send button's disabled state.
+    onInput: (v) => {
+      const was = !!(state.chat.draft && state.chat.draft.trim());
+      const now = !!(v && v.trim());
+      state.chat.draft = v;
+      if (was !== now) render();
+    },
     onSend: (v) => { state.chat.draft = v; sendChat(); },
   });
 
   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 }));
     }
@@ -488,9 +512,9 @@ function cwdBanner() {
   }
   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'),
+      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(); } }, '× default') : null);
+    state.chatCwd ? h('button', { key: 'cwdclr', type: 'button', class: 'cwd-bar-btn', onClick: () => { state.chatCwd = ''; lsRemove('agentgui.cwd'); render(); } }, 'use default') : null);
 }
 
 function newChat() {
@@ -553,7 +577,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(); }
     }
@@ -585,11 +609,10 @@ function historyMain() {
     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('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' },
@@ -605,13 +628,13 @@ function historyMain() {
     : state.selectedSid;
 
   const head = PageHeader({
-    title: '§ ' + truncate(projectLabel(sess?.title) || projectLabel(sess?.project) || 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) {
@@ -641,8 +664,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);
@@ -664,9 +687,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 {
@@ -674,7 +697,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); }
   }
 }
 
@@ -746,7 +769,7 @@ function historySide() {
         Row({
           key: 'sess' + s.sid,
           rank: String(i + 1).padStart(3, '0'),
-          title: (s.isSubagent ? '↳ ' : '') + (projectLabel(s.title) || projectLabel(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,
@@ -761,13 +784,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,
@@ -796,7 +820,7 @@ 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' },
@@ -810,10 +834,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,
       ],
     }),
@@ -842,9 +866,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');
@@ -858,7 +881,7 @@ 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' }, [
@@ -878,10 +901,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',

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

@@ -518,14 +518,43 @@
 
 .ds-247420 .app-topbar {
   position: sticky; top: 0; z-index: var(--z-header);
-  display: grid; grid-template-columns: auto 1fr auto;
+  display: flex; flex-wrap: wrap;
   align-items: center; gap: var(--space-4);
   min-height: var(--app-topbar-h);
   padding: 10px var(--pad-x);
   background: color-mix(in oklab, var(--bg) 88%, transparent);
   backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
 }
-.ds-247420 .app-topbar nav { display: flex; gap: 4px; font-size: var(--fs-sm); }
+
+/* Merged chrome: when AppShell gets both a topbar and a crumb it wraps them
+   in .app-chrome and they share ONE sticky band instead of stacking as two
+   bars. The breadcrumb provides the left identity (it already begins with the
+   brand), so the topbar's standalone brand is hidden to avoid showing the name
+   twice; nav and the crumb's right slot sit together on the right. */
+.ds-247420 .app-chrome {
+  position: sticky; top: 0; z-index: var(--z-header);
+  display: flex; flex-wrap: wrap; align-items: center;
+  gap: var(--space-2) var(--space-4);
+  padding: 8px var(--pad-x);
+  background: color-mix(in oklab, var(--bg) 88%, transparent);
+  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+}
+.ds-247420 .app-chrome > .app-topbar,
+.ds-247420 .app-chrome > .app-crumb {
+  position: static; background: none; backdrop-filter: none;
+  -webkit-backdrop-filter: none; padding: 0; min-height: 0;
+  flex: 1 1 auto;
+}
+.ds-247420 .app-chrome > .app-crumb { order: 1; flex: 1 1 auto; }
+.ds-247420 .app-chrome > .app-topbar { order: 2; flex: 0 0 auto; }
+.ds-247420 .app-chrome > .app-topbar > .brand { display: none; }
+.ds-247420 .app-chrome > .app-topbar > nav { margin-left: 0; }
+.ds-247420 .app-chrome > .app-crumb > .crumb-right { margin-left: auto; }
+.ds-247420 .app-topbar > .brand { flex: 0 0 auto; }
+.ds-247420 .app-topbar > .app-search { flex: 1 1 auto; }
+.ds-247420 .app-topbar > nav { margin-left: auto; }
+.ds-247420 .app-topbar nav { display: flex; gap: 4px; font-size: var(--fs-sm); flex-wrap: wrap; }
+.ds-247420 .app-topbar nav a { flex: 0 0 auto; }
 .ds-247420 .app-topbar nav a {
   color: var(--fg-2);
   padding: 12px 14px;
@@ -1083,25 +1112,21 @@
   /* App Layout: single-column + drawer is handled once in the ≤900px block;
      no need to re-declare grid-template-columns here (was a redundant !important). */
 
-  /* Topbar Navigation */
+  /* Topbar Navigation: stack the nav onto its own full-width row below the
+     brand and let it scroll horizontally. The brand stays on the first row;
+     nav wraps to a second row at 100% width (flex-wrap on .app-topbar). */
   .ds-247420 .app-topbar {
-    grid-template-columns: 1fr auto;
     gap: var(--space-2); padding: 12px var(--space-3);
   }
-  .ds-247420 .app-topbar nav a {
-    padding: 12px 10px;
-    min-height: 44px;
-  }
-  /* Keep primary nav reachable on small screens (apps without a sidebar have
-     no other entry point). Compact it and let it scroll horizontally rather
-     than hiding it entirely. */
-  .ds-247420 .app-topbar nav {
-    display: flex; gap: 2px;
+  .ds-247420 .app-topbar > nav {
+    flex: 1 1 100%; margin-left: 0; order: 3;
+    display: flex; gap: 2px; flex-wrap: nowrap;
     overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
-    max-width: 60vw;
   }
   .ds-247420 .app-topbar nav::-webkit-scrollbar { display: none; }
-  .ds-247420 .app-topbar nav a { padding: 10px 8px; white-space: nowrap; }
+  .ds-247420 .app-topbar nav a {
+    flex: 0 0 auto; padding: 10px 12px; min-height: 44px; white-space: nowrap;
+  }
   .ds-247420 .brand { font-size: var(--fs-tiny); font-weight: 600; }
 
   /* Search */