agenter-app 1.0.2 → 1.1.0

package/lib/transcript.js

@@ -0,0 +1,238 @@
+'use strict';
+// Reading Claude Code transcripts and Codex rollouts: pure parsing plus the incremental file reader.
+const fs = require('node:fs');
+const crypto = require('node:crypto');
+
+const truncate = (s, n) => {
+  s = String(s ?? '');
+  return s.length > n ? s.slice(0, n) + `\n… (${s.length - n} more chars)` : s;
+};
+
+function describeTool(name, input = {}) {
+  if (!input || typeof input !== 'object') return '';
+  if (input.command) return input.command;
+  if (name === 'AskUserQuestion' && Array.isArray(input.questions)) return input.questions.map((q) => q.question).join(' / ');
+  if (input.file_path) return input.file_path;
+  if (input.notebook_path) return input.notebook_path;
+  if (input.pattern) return input.pattern + (input.path ? `  in ${input.path}` : '');
+  if (input.url) return input.url;
+  if (input.query) return input.query;
+  if (input.description) return input.description;
+  if (input.prompt) return input.prompt;
+  return JSON.stringify(input);
+}
+
+function readTail(file, maxBytes) {
+  const fd = fs.openSync(file, 'r');
+  try {
+    const size = fs.fstatSync(fd).size;
+    const start = Math.max(0, size - maxBytes);
+    const buf = Buffer.alloc(size - start);
+    fs.readSync(fd, buf, 0, buf.length, start);
+    let text = buf.toString('utf8');
+    if (start > 0) text = text.slice(text.indexOf('\n') + 1); // drop the partial first line
+    return text;
+  } finally {
+    fs.closeSync(fd);
+  }
+}
+
+const resultText = (content) =>
+  typeof content === 'string'
+    ? content
+    : Array.isArray(content)
+      ? content.map((c) => (c.type === 'text' ? c.text : `[${c.type}]`)).join('\n')
+      : '';
+
+const isNoise = (text) => /^\s*<(system-reminder|ide_|command-|local-command)/.test(text);
+
+// Appends the messages in these transcript lines to out (metadata and noise skipped).
+// Reads both Claude Code transcripts and Codex rollouts.
+function parseLines(text, out) {
+  for (const line of text.split('\n')) {
+    if (!line.trim()) continue;
+    let e;
+    try {
+      e = JSON.parse(line);
+    } catch {
+      continue;
+    }
+    if (e.type === 'response_item') {
+      parseCodexItem(e, out);
+      continue;
+    }
+    if ((e.type !== 'user' && e.type !== 'assistant') || e.isMeta || !e.message) continue;
+    const ts = e.timestamp;
+    const content = e.message.content;
+    if (typeof content === 'string') {
+      if (!isNoise(content)) out.push({ role: e.type, kind: 'text', text: content, ts });
+      continue;
+    }
+    if (!Array.isArray(content)) continue;
+    for (const b of content) {
+      if (b.type === 'text' && b.text?.trim() && !isNoise(b.text)) out.push({ role: e.type, kind: 'text', text: b.text, ts });
+      else if (b.type === 'tool_use') out.push({ role: 'assistant', kind: 'tool', id: b.id, name: b.name, text: describeTool(b.name, b.input), ts });
+      else if (b.type === 'tool_result') out.push({ role: 'tool', kind: 'result', toolUseId: b.tool_use_id, text: resultText(b.content), isError: !!b.is_error, ts });
+    }
+  }
+  return out;
+}
+
+// Codex's exec tool takes a small script; the shell command inside it is what's worth showing.
+function describeCodexCall(name, input) {
+  const raw = String(input ?? '');
+  if (name === 'wait') return 'Waiting for the running command';
+  const m = raw.match(/\bcmd\s*:\s*(["'`])((?:\\.|(?!\1)[^\\])*)\1/);
+  if (m) return m[2].replace(/\\(.)/g, (_, c) => ({ n: '\n', t: '\t' })[c] ?? c);
+  // Other built-in tools called from the script: name them, plus the search query if any.
+  const call = raw.match(/\btools\.(\w+)\(/)?.[1];
+  if (call === 'write_stdin') return 'Sending input to the running command';
+  if (call) {
+    const q = raw.match(/\bq\s*:\s*(["'`])((?:\\.|(?!\1)[^\\])*)\1/)?.[2];
+    return call.replace(/__/g, ' ') + (q ? `: ${q}` : '');
+  }
+  try {
+    const args = JSON.parse(raw);
+    if (args && typeof args === 'object') return describeTool(name, args);
+  } catch {}
+  return raw.split('\n')[0];
+}
+
+const codexOutput = (o) => (typeof o === 'string' ? o : Array.isArray(o) ? o.map((c) => c.text ?? `[${c.type}]`).join('\n') : '');
+
+function parseCodexItem(e, out) {
+  const p = e.payload || {};
+  const ts = e.timestamp;
+  if (p.type === 'message' && (p.role === 'user' || p.role === 'assistant')) {
+    // Only what you typed: Codex also sends context (environment, open pages) as user messages.
+    const kinds = p.internal_chat_message_metadata_passthrough?.content_item_kinds;
+    (p.content || []).forEach((c, i) => {
+      const text = c.text?.trim();
+      if (!text) return;
+      if (p.role === 'user' && (kinds ? kinds[i] !== 'user.text' : text.startsWith('<'))) return;
+      // The VS Code extension wraps what you typed in IDE context (open tabs etc.).
+      const typed = p.role === 'user' ? c.text.match(/^#+ My request:\s*\n([\s\S]*)$/m)?.[1] : null;
+      out.push({ role: p.role, kind: 'text', text: typed?.trim() || c.text, ts });
+    });
+  } else if (p.type === 'function_call' || p.type === 'custom_tool_call') {
+    out.push({ role: 'assistant', kind: 'tool', id: p.call_id, name: p.name, text: describeCodexCall(p.name, p.arguments ?? p.input), ts });
+  } else if (p.type === 'function_call_output' || p.type === 'custom_tool_call_output') {
+    out.push({ role: 'tool', kind: 'result', toolUseId: p.call_id, text: codexOutput(p.output), isError: false, ts });
+  }
+}
+
+const clipMessage = (m) => ({ ...m, text: truncate(m.text, m.kind === 'result' ? 4000 : 20000) });
+
+function parseTranscript(file, limit = 120) {
+  if (!file || !fs.existsSync(file)) return [];
+  return parseLines(readTail(file, TRANSCRIPT_TAIL), []).slice(-limit).map(clipMessage);
+}
+
+// The conversation open on the dashboard is read incrementally: each request parses
+// only the bytes appended since the last one. Messages get increasing seq numbers so
+// the dashboard can ask for just the new ones; epoch changes if the file is replaced.
+const TRANSCRIPT_TAIL = 2 * 1024 * 1024;
+const TRANSCRIPT_KEEP = 400;
+const TRANSCRIPT_FILES = 8;
+const transcriptCache = new Map(); // file -> { epoch, offset, rest, dropFirstLine, seq, messages }
+
+function readTranscript(file) {
+  let size;
+  try {
+    size = fs.statSync(file).size;
+  } catch {
+    return null;
+  }
+  let c = transcriptCache.get(file);
+  if (!c || size < c.offset) {
+    const offset = Math.max(0, size - TRANSCRIPT_TAIL);
+    c = { epoch: crypto.randomUUID(), offset, rest: Buffer.alloc(0), dropFirstLine: offset > 0, seq: 0, messages: [] };
+  }
+  transcriptCache.delete(file); // most recently used goes last
+  transcriptCache.set(file, c);
+  if (transcriptCache.size > TRANSCRIPT_FILES) transcriptCache.delete(transcriptCache.keys().next().value);
+  if (size === c.offset) return c;
+
+  const fd = fs.openSync(file, 'r');
+  let buf;
+  try {
+    buf = Buffer.alloc(size - c.offset);
+    fs.readSync(fd, buf, 0, buf.length, c.offset);
+  } finally {
+    fs.closeSync(fd);
+  }
+  c.offset = size;
+  buf = Buffer.concat([c.rest, buf]);
+  let start = 0;
+  if (c.dropFirstLine) {
+    start = buf.indexOf(10) + 1; // we started mid-file: skip the partial first line
+    if (start) c.dropFirstLine = false;
+  }
+  // Only complete lines. Splitting on the newline byte never cuts a UTF-8 character.
+  const end = Math.max(start, buf.lastIndexOf(10) + 1);
+  c.rest = Buffer.from(buf.subarray(end));
+  for (const m of parseLines(buf.toString('utf8', start, end), [])) c.messages.push({ ...clipMessage(m), seq: ++c.seq });
+  if (c.messages.length > TRANSCRIPT_KEEP) c.messages.splice(0, c.messages.length - TRANSCRIPT_KEEP);
+  return c;
+}
+
+function lastAssistantText(file) {
+  const msgs = parseTranscript(file, 400);
+  for (let i = msgs.length - 1; i >= 0; i--) if (msgs[i].role === 'assistant' && msgs[i].kind === 'text') return msgs[i].text;
+  return '';
+}
+
+function readHead(file, maxBytes) {
+  const fd = fs.openSync(file, 'r');
+  try {
+    const buf = Buffer.alloc(Math.min(maxBytes, fs.fstatSync(fd).size));
+    fs.readSync(fd, buf, 0, buf.length, 0);
+    return buf.toString('utf8');
+  } finally {
+    fs.closeSync(fd);
+  }
+}
+
+const firstText = (content) =>
+  typeof content === 'string' ? content : Array.isArray(content) ? content.find((b) => b.type === 'text' && !isNoise(b.text || ''))?.text || '' : '';
+
+// cwd and a title (Claude's summary, else the first prompt) from the start of a transcript.
+function transcriptInfo(file) {
+  let cwd = '';
+  let prompt = '';
+  let summary = '';
+  for (const line of readHead(file, 256 * 1024).split('\n')) {
+    let e;
+    try {
+      e = JSON.parse(line);
+    } catch {
+      continue;
+    }
+    if (!cwd && e.cwd) cwd = e.cwd;
+    if (e.type === 'summary' && e.summary && !summary) summary = e.summary;
+    if (!prompt && e.type === 'user' && !e.isMeta) {
+      const t = firstText(e.message?.content);
+      if (t && !isNoise(t)) prompt = t;
+    }
+    if (cwd && prompt) break;
+  }
+  return { cwd, title: (summary || prompt).split('\n')[0].slice(0, 140) };
+}
+
+module.exports = {
+  truncate,
+  describeTool,
+  describeCodexCall,
+  readTail,
+  readHead,
+  parseLines,
+  parseCodexItem,
+  parseTranscript,
+  readTranscript,
+  lastAssistantText,
+  transcriptInfo,
+  isNoise,
+  TRANSCRIPT_TAIL,
+  TRANSCRIPT_KEEP,
+  TRANSCRIPT_FILES,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agenter-app",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "One local dashboard to watch, approve and steer every Claude Code and Codex session on your machine.",
   "keywords": [
     "claude",
@@ -38,6 +38,7 @@
   "scripts": {
     "start": "node server.js",
     "open": "node open.js",
+    "test": "node --test",
     "shortcuts": "powershell -NoProfile -ExecutionPolicy Bypass -File scripts/install-shortcuts.ps1",
     "shortcuts:startup": "powershell -NoProfile -ExecutionPolicy Bypass -File scripts/install-shortcuts.ps1 -Startup",
     "install-hooks": "node install.js",

package/public/app.js

@@ -44,7 +44,25 @@ function ago(t) {
   return `${Math.floor(s / 86400)}d`;
 }
 
-const post = (url, body) => fetch(url, { method: 'POST', headers: { 'content-type': 'application/json', 'x-agenter': '1' }, body: JSON.stringify(body) });
+// The launchers open the dashboard with #token=…; it's kept here, out of the address bar.
+const TOKEN = (() => {
+  const key = 'agenter.token';
+  const m = location.hash.match(/^#token=([0-9a-f]+)$/);
+  if (m) {
+    history.replaceState(null, '', location.pathname + location.search);
+    try {
+      localStorage.setItem(key, m[1]);
+    } catch {}
+    return m[1];
+  }
+  try {
+    return localStorage.getItem(key) || '';
+  } catch {
+    return '';
+  }
+})();
+const authHeaders = { 'x-agenter-token': TOKEN };
+const post = (url, body) => fetch(url, { method: 'POST', headers: { 'content-type': 'application/json', ...authHeaders }, body: JSON.stringify(body) });
 
 const STATUS_LABEL = { working: 'Working', waiting: 'Needs you', vscode: 'Waiting in VS Code', idle: 'Idle', dormant: 'Not connected', ended: 'Ended' };
 const isLive = (s) => s.status !== 'dormant' && s.status !== 'ended';
@@ -190,10 +208,18 @@ window.addEventListener('blur', () => setTimeout(reportFocus));
 document.addEventListener('visibilitychange', () => reportFocus());
 
 function connect() {
-  const es = new EventSource(`/events?client=${CLIENT_ID}&focused=${hasAttention() ? 1 : 0}`);
+  const es = new EventSource(`/events?client=${CLIENT_ID}&focused=${hasAttention() ? 1 : 0}&token=${encodeURIComponent(TOKEN)}`);
   es.addEventListener('state', (e) => apply(JSON.parse(e.data)));
+  es.addEventListener('quit', () => window.close());
   es.onopen = () => (setConn(true), reportFocus(true)); // after a reconnect the URL's focus flag may be stale
-  es.onerror = () => setConn(false);
+  es.onerror = async () => {
+    setConn(false);
+    // EventSource doesn't say why it failed, and it gives up for good on a refused request.
+    const refused = await post('/api/focus', {}).then((r) => r.status === 401, () => false);
+    if (!refused) return;
+    es.close();
+    if (!$('#authLost')) document.body.insertAdjacentHTML('afterbegin', '<div class="auth-lost" id="authLost" role="alert">This window isn\'t signed in to Agenter. Open it from the Agenter shortcut, or run <code>agenter</code>.</div>');
+  };
 }
 
 function setConn(ok) {
@@ -632,7 +658,7 @@ async function scanApps() {
   loadFrame();
   let r = null;
   try {
-    r = await fetch(`/api/preview/apps?session=${encodeURIComponent(sid)}`).then((res) => res.json());
+    r = await fetch(`/api/preview/apps?session=${encodeURIComponent(sid)}`, { headers: authHeaders }).then((res) => res.json());
   } catch {}
   if (cwd !== preview.cwd) return; // switched project meanwhile; that one has its own scan
   preview.scanning = false;
@@ -748,13 +774,23 @@ const sortPending = (list) => [...list].sort((a, b) => a.createdAt - b.createdAt
 
 // ---------- session view ----------
 
+// Messages you sent that the agent's transcript hasn't recorded yet, by session.
+const sentEchoes = new Map();
+
+function clearEchoes(sid, messages) {
+  const left = (sentEchoes.get(sid) || []).filter((text) => !messages.some((m) => m.role === 'user' && m.text.trim() === text));
+  if (left.length) sentEchoes.set(sid, left);
+  else sentEchoes.delete(sid);
+}
+
 function renderLiveRow() {
   const s = sessionById(state.selected);
   const el = $('#liveRow');
   if (!s || !el) return;
-  let html = '';
-  if (s.status === 'working') html = `<div class="live-row"><span class="dots"><i></i><i></i><i></i></span><span class="targ">${esc(s.lastAction || 'Working…')}</span></div>`;
-  else if (s.status === 'vscode') html = `<div class="live-row">${icon('info')}<span>Waiting for you in VS Code</span></div>`;
+  if (!s.running) sentEchoes.delete(s.id); // The turn is over, so the transcript has the last word.
+  let html = (sentEchoes.get(s.id) || []).map((text) => `<div class="live-echo"><div class="msg-user">${esc(text)}</div></div>`).join('');
+  if (s.status === 'working') html += `<div class="live-row"><span class="dots"><i></i><i></i><i></i></span><span class="targ">${esc(s.lastAction || 'Working…')}</span></div>`;
+  else if (s.status === 'vscode') html += `<div class="live-row">${icon('info')}<span>Waiting for you in VS Code</span></div>`;
   if (el.innerHTML !== html) {
     const stick = nearBottom();
     el.innerHTML = html;
@@ -793,7 +829,7 @@ function renderSteer(s) {
     .join('');
   let when;
   if (isCodex(s)) {
-    if (agenter && busy) when = 'Codex gets this as its next turn, when the current one ends.';
+    if (s.running || (agenter && busy)) when = 'Codex gets this as its next turn, when the current one ends.';
     else if (agenter) when = 'Runs here in Agenter, sandboxed to the project folder (no network).';
     else when = `Queued in Codex: it runs as the next turn when this session is open in Codex (VS Code or the desktop app). Or <button class="link" type="button" data-drive="agenter">drive from Agenter</button>.`;
   } else if (busy) when = 'Claude gets this after its current step.';
@@ -827,6 +863,11 @@ async function steer(card) {
     return toast("Couldn't send that");
   }
   const { result } = await r.json();
+  // A turn Agenter just started: show your message now, ahead of the transcript.
+  if (result === 'started') {
+    sentEchoes.set(state.selected, [...(sentEchoes.get(state.selected) || []), message]);
+    renderLiveRow();
+  }
   const FAILED = {
     'no-claude': "Couldn't find Claude Code. Install the VS Code extension, or set AGENTER_CLAUDE to claude.exe",
     'no-codex': "Couldn't find Codex. Install the Codex VS Code extension, or set AGENTER_CODEX_BIN to codex.exe",
@@ -994,8 +1035,23 @@ function keyAct(action) {
   act(card, action);
 }
 
-function renderToolBody(tool, input = {}) {
+// One file's changes, as built by the server (lib/diff.js): unchanged lines around each change.
+function renderDiff(d) {
+  const sign = { ctx: ' ', del: '−', add: '+' };
+  const rows = d.rows
+    .map((r) => {
+      if (r.type === 'skip') return `<div class="skip">⋯ ${r.count} unchanged line${r.count === 1 ? '' : 's'}</div>`;
+      if (r.type === 'more') return `<div class="skip">⋯ ${r.count} more lines not shown</div>`;
+      return `<div class="${r.type}">${sign[r.type]} ${esc(r.text)}</div>`;
+    })
+    .join('');
+  const stats = `<span class="add-n">+${d.added}</span> <span class="del-n">−${d.removed}</span>`;
+  return `<div class="diff-head"><span class="path mono">${esc(d.file)}</span>${d.isNew ? '<span class="pill plain">New file</span>' : ''}<span class="diff-stats">${stats}</span></div><div class="diff mono">${rows || '<div class="skip">No changes</div>'}</div>`;
+}
+
+function renderToolBody(tool, input = {}, diffs = null) {
   input = input || {};
+  if (diffs?.length) return diffs.map(renderDiff).join('');
   if (['Bash', 'PowerShell'].includes(tool) || typeof input.command === 'string') {
     return `${input.description ? `<div class="desc">${esc(input.description)}</div>` : ''}<pre class="cmd shell">${esc(input.command)}</pre>`;
   }
@@ -1029,7 +1085,7 @@ function renderCard(p, showSession) {
     const risky = isDestructive(p);
     return `<div class="card kind-permission ${risky ? 'risky' : ''}" data-id="${p.id}">${sessionBar}<div class="card-body">
       ${head(toolIcon(p.tool), `Allow <span class="mono">${esc(toolName(p.tool))}</span>?`, 'Claude is asking for permission')}
-      <div class="tool-body">${renderToolBody(p.tool, p.input)}</div>
+      <div class="tool-body">${renderToolBody(p.tool, p.input, p.diffs)}</div>
       ${risky ? `<div class="risk-note">${icon('shield')}<span>This looks destructive, so the <kbd>A</kbd> shortcut is off. Read it, then click Allow if it's fine.</span></div>` : ''}
       <div class="actions">
         <button class="btn primary" data-act="allow">${icon('check')}Allow${risky ? '' : ' <kbd>A</kbd>'}</button>
@@ -1119,7 +1175,7 @@ function loadTranscript(sid) {
       const have = state.transcript.sessionId === sid && state.transcript.messages ? state.transcript : null;
       const lastSeq = () => have?.messages.at(-1)?.seq ?? 0;
       const since = have ? `&epoch=${encodeURIComponent(have.epoch)}&after=${lastSeq()}` : '';
-      const r = await fetch(`/api/transcript?session=${encodeURIComponent(sid)}${since}`);
+      const r = await fetch(`/api/transcript?session=${encodeURIComponent(sid)}${since}`, { headers: authHeaders });
       if (!r.ok) return;
       const { epoch, reset, messages } = await r.json();
       if (sid !== state.selected) return;
@@ -1127,7 +1183,9 @@ function loadTranscript(sid) {
       // A request that overlapped another may repeat messages; seq tells them apart.
       const merged = reset || !have ? messages : [...have.messages, ...messages.filter((m) => m.seq > lastSeq())].slice(-KEEP_MESSAGES);
       state.transcript = { sessionId: sid, epoch, messages: merged };
+      clearEchoes(sid, messages);
       renderConvo(same);
+      renderLiveRow();
     } catch {}
   }, 150);
 }

package/public/index.html

@@ -11,17 +11,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap">
   <link rel="stylesheet" href="/style.css">
-  <script>
-    // Applied before first paint so there's no flash of the wrong theme.
-    (() => {
-      const read = (k) => { try { return JSON.parse(localStorage.getItem('agenter.' + k)); } catch { return null; } };
-      const theme = read('theme') || 'system';
-      const dark = theme === 'dark' || (theme === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);
-      document.documentElement.dataset.theme = dark ? 'dark' : 'light';
-      const accent = read('accent');
-      if (accent && accent !== 'sage') document.documentElement.dataset.accent = accent;
-    })();
-  </script>
+  <script src="/theme.js"></script>
 </head>
 <body>
   <div class="app" id="app">

package/public/style.css

@@ -363,6 +363,7 @@ dialog.new-dialog { max-width: 520px; }
 .convo { display: flex; flex-direction: column; gap: 10px; }
 .msg-user { align-self: flex-end; max-width: 78%; background: var(--accent-soft); border: 1px solid transparent; padding: 9px 14px; border-radius: 14px 14px 4px 14px; white-space: pre-wrap; word-break: break-word; }
 .msg-user.from-dash { border-color: var(--accent-ink); }
+.live-echo { display: flex; justify-content: flex-end; margin-top: 12px; }
 .msg-claude { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
 .claude-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border); display: grid; place-items: center; color: var(--accent-ink); }
 .claude-mark .ic { width: 14px; height: 14px; }
@@ -457,6 +458,12 @@ dialog.new-dialog { max-width: 520px; }
 .diff div { padding: 0 10px; white-space: pre-wrap; word-break: break-word; }
 .diff .del { background: var(--del-bg); }
 .diff .add { background: var(--add-bg); }
+.diff .skip { color: var(--muted); font-size: 11.5px; padding-top: 2px; padding-bottom: 2px; background: var(--panel-2); user-select: none; }
+.diff-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+.diff-head .path { margin-bottom: 0; min-width: 0; }
+.diff-stats { margin-left: auto; flex: none; font-size: 12px; font-weight: 600; }
+.diff-stats .add-n { color: var(--ok, #2e7d32); }
+.diff-stats .del-n { color: var(--danger); }
 
 .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
 .actions .grow { flex: 1; min-width: 180px; }
@@ -549,3 +556,5 @@ dialog form { text-align: right; }
   .splitter { display: none; }
   .preview { order: -1; width: auto; max-width: none; min-width: 0; height: 48vh; border-bottom: 1px solid var(--border); }
 }
+
+.auth-lost { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1000; max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: 10px; background: #5c2a26; color: #fff; font-size: 13px; }

package/public/theme.js

@@ -0,0 +1,9 @@
+// Applied before first paint so there's no flash of the wrong theme.
+(() => {
+  const read = (k) => { try { return JSON.parse(localStorage.getItem('agenter.' + k)); } catch { return null; } };
+  const theme = read('theme') || 'system';
+  const dark = theme === 'dark' || (theme === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);
+  document.documentElement.dataset.theme = dark ? 'dark' : 'light';
+  const accent = read('accent');
+  if (accent && accent !== 'sage') document.documentElement.dataset.accent = accent;
+})();

package/scripts/install-shortcuts.ps1

@@ -1,5 +1,5 @@
 # Creates "Agenter" shortcuts on the Desktop and in the Start Menu (pin it to the taskbar from there).
-# -Startup also starts the Agenter server silently when you log in to Windows.
+# -Startup also starts Agenter in the system tray when you log in to Windows.
 param([switch]$Startup, [switch]$Remove)
 
 $root = Split-Path -Parent $PSScriptRoot
@@ -31,6 +31,7 @@ if ($Startup) {
   $lnk.TargetPath = "$env:SystemRoot\System32\wscript.exe"
   $lnk.Arguments = "`"$root\Agenter.vbs`" server"
   $lnk.WorkingDirectory = $root
+  $lnk.IconLocation = "$root\public\agenter.ico,0"
   $lnk.Save()
-  "Created $startupLink (server starts at login)"
+  "Created $startupLink (Agenter starts in the tray at login)"
 }

package/scripts/tray.ps1

@@ -0,0 +1,40 @@
+# The Agenter icon in the Windows system tray. server.js starts this, and it lives exactly as
+# long as the server does. Open shows the dashboard; Quit stops the server, and with it this.
+param([int]$ServerPid, [string]$Node, [int]$Port)
+
+Add-Type -AssemblyName System.Windows.Forms, System.Drawing
+
+$root = Split-Path -Parent $PSScriptRoot
+
+$open = {
+  Start-Process -FilePath $Node -ArgumentList "`"$root\open.js`"" -WindowStyle Hidden
+}
+$quit = {
+  $token = (Get-Content (Join-Path $env:USERPROFILE '.agenter\token') -Raw).Trim()
+  Invoke-RestMethod -Method Post -Uri "http://127.0.0.1:$Port/api/quit" -Headers @{ 'x-agenter-token' = $token } -ContentType 'application/json' -Body '{}' | Out-Null
+}
+
+$menu = New-Object System.Windows.Forms.ContextMenuStrip
+$menu.Items.Add('Open Agenter').add_Click($open)
+$menu.Items.Add('Quit Agenter').add_Click($quit)
+
+$tray = New-Object System.Windows.Forms.NotifyIcon
+$tray.Icon = New-Object System.Drawing.Icon (Join-Path $root 'public\agenter.ico')
+$tray.Text = 'Agenter'
+$tray.ContextMenuStrip = $menu
+$tray.add_MouseClick({ if ($_.Button -eq 'Left') { & $open } })
+$tray.Visible = $true
+
+# However the server ended, don't leave a dead icon behind.
+$watch = New-Object System.Windows.Forms.Timer
+$watch.Interval = 1000
+$watch.add_Tick({
+  if (-not (Get-Process -Id $ServerPid -ErrorAction SilentlyContinue)) {
+    $tray.Visible = $false
+    [System.Windows.Forms.Application]::Exit()
+  }
+})
+$watch.Start()
+
+[System.Windows.Forms.Application]::Run()
+$tray.Dispose()