ai-agentmanager 1.1.0 → 1.3.0

package/public/review.js

@@ -0,0 +1,368 @@
+// Review screen: an agent's changes file by file, line comments sent back to the agent as one
+// message, and Commit / Push & open PR. Comments not sent yet are kept per agent in this browser.
+
+/** Unified diff -> [{ path, status, binary, hunks: [{ head, lines: [{ t, old, new, text }] }] }] */
+export function parseDiff(text) {
+  const files = [];
+  let f = null;
+  let h = null;
+  let o = 0;
+  let n = 0;
+  let left = 0; // lines the hunk header still promises (old side + new side)
+  for (const line of String(text ?? '').split('\n')) {
+    if (line.startsWith('diff --git ')) {
+      const m = / b\/(.*)$/.exec(line);
+      f = { path: m ? m[1] : line.slice(11), status: 'modified', binary: false, hunks: [] };
+      files.push(f);
+      h = null;
+      continue;
+    }
+    if (!f) continue;
+    if (!h) {
+      if (line.startsWith('new file')) f.status = 'added';
+      else if (line.startsWith('deleted file')) f.status = 'deleted';
+      else if (line.startsWith('rename to ')) {
+        f.status = 'renamed';
+        f.path = line.slice(10);
+      } else if (line.startsWith('Binary files')) f.binary = true;
+      else if (line.startsWith('+++ ') && line !== '+++ /dev/null') f.path = line.slice(6);
+    }
+    const hm = /^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@(.*)$/.exec(line);
+    if (hm) {
+      o = Number(hm[1]);
+      n = Number(hm[3]);
+      left = Number(hm[2] ?? 1) + Number(hm[4] ?? 1);
+      h = { head: line, lines: [] };
+      f.hunks.push(h);
+      continue;
+    }
+    if (!h || left <= 0 || line.startsWith('\\')) continue;
+    if (line.startsWith('+')) {
+      h.lines.push({ t: 'add', old: null, new: n++, text: line.slice(1) });
+      left -= 1;
+    } else if (line.startsWith('-')) {
+      h.lines.push({ t: 'del', old: o++, new: null, text: line.slice(1) });
+      left -= 1;
+    } else if (line.startsWith(' ') || line === '') {
+      h.lines.push({ t: 'ctx', old: o++, new: n++, text: line.slice(1) });
+      left -= 2;
+    }
+  }
+  return files;
+}
+
+const BIG = 600; // files with more changed lines start collapsed
+
+export function initReview({ api, esc, toast, agents, $ }) {
+  const dlg = $('#review-dialog');
+  const body = $('#review-body');
+  const st = { id: null, data: null, files: [], comments: [], collapsed: new Set(), editing: null, loading: false };
+
+  const key = (id) => `agentmgr.review.${id}`;
+  const loadDrafts = (id) => {
+    try {
+      return JSON.parse(localStorage.getItem(key(id)) || '[]');
+    } catch {
+      return [];
+    }
+  };
+  const saveDrafts = () => {
+    try {
+      if (st.comments.length) localStorage.setItem(key(st.id), JSON.stringify(st.comments));
+      else localStorage.removeItem(key(st.id));
+    } catch {}
+  };
+  const lineKey = (file, side, line) => `${file}\t${side}\t${line}`;
+
+  async function open(id) {
+    st.id = id;
+    st.comments = loadDrafts(id);
+    st.collapsed = new Set();
+    st.editing = null;
+    st.data = null;
+    $('#review-title').textContent = `Review: ${agents.get(id)?.name ?? ''}`;
+    body.innerHTML = '<p class="hint">Loading changes…</p>';
+    if (!dlg.open) dlg.showModal();
+    await reload();
+  }
+
+  async function reload() {
+    st.loading = true;
+    try {
+      st.data = await api('GET', `/agents/${st.id}/changes`);
+      st.files = parseDiff(st.data.diff);
+      for (const f of st.files) {
+        const size = f.hunks.reduce((s, h) => s + h.lines.length, 0);
+        if (size > BIG) st.collapsed.add(f.path);
+      }
+    } catch (e) {
+      body.innerHTML = `<p class="error">${esc(e.message)}</p>`;
+      st.loading = false;
+      return;
+    }
+    st.loading = false;
+    render();
+  }
+
+  function commentHtml(c, i) {
+    return `<div class="rv-comment" data-ci="${i}"><div class="rv-comment-text">${esc(c.text)}</div>
+      <span class="spacer"></span><button type="button" class="link" data-rv-edit="${i}">Edit</button> <button type="button" class="link" data-rv-del="${i}">Remove</button></div>`;
+  }
+
+  function formHtml(value = '') {
+    return `<div class="rv-form"><textarea rows="3" placeholder="What should the agent change here?">${esc(value)}</textarea>
+      <div class="rv-form-actions"><span class="hint">⌘/Ctrl+Enter to add</span><span class="spacer"></span><button type="button" class="small ghost" data-rv-cancel>Cancel</button><button type="button" class="small primary" data-rv-save>Add comment</button></div></div>`;
+  }
+
+  function fileHtml(f) {
+    const meta = st.data.files.find((x) => x.path === f.path);
+    const collapsed = st.collapsed.has(f.path);
+    const count = st.comments.filter((c) => c.file === f.path).length;
+    const head = `<div class="rv-file-head" data-rv-toggle="${esc(f.path)}">
+        <span class="rv-caret">${collapsed ? '▸' : '▾'}</span>
+        <code>${esc(f.path)}</code> <span class="tag rv-${f.status}">${f.status}</span>
+        ${meta?.untracked ? '<span class="tag">not committed</span>' : ''}
+        ${count ? `<span class="tag open">💬 ${count}</span>` : ''}
+        <span class="spacer"></span>
+        ${meta?.added != null ? `<span class="rv-add">+${meta.added}</span> <span class="rv-del">−${meta.removed}</span>` : ''}
+      </div>`;
+    if (collapsed) return `<div class="rv-file" id="rv-${encodeURIComponent(f.path)}">${head}</div>`;
+    if (f.binary) return `<div class="rv-file" id="rv-${encodeURIComponent(f.path)}">${head}<p class="hint rv-pad">Binary file</p></div>`;
+    const rows = [];
+    for (const h of f.hunks) {
+      rows.push(`<tr class="rv-hunk"><td colspan="3">${esc(h.head)}</td></tr>`);
+      for (const l of h.lines) {
+        const side = l.t === 'del' ? 'old' : 'new';
+        const line = side === 'old' ? l.old : l.new;
+        const k = lineKey(f.path, side, line);
+        rows.push(`<tr class="rv-${l.t}" data-rv-line="${esc(k)}">
+          <td class="rv-no">${l.old ?? ''}</td><td class="rv-no">${l.new ?? ''}<button type="button" class="rv-plus" title="Comment on this line">+</button></td>
+          <td class="rv-code"><span class="rv-sign">${l.t === 'add' ? '+' : l.t === 'del' ? '−' : ' '}</span>${esc(l.text)}</td></tr>`);
+        st.comments.forEach((c, i) => {
+          if (c.file === f.path && c.side === side && c.line === line) {
+            rows.push(`<tr class="rv-note"><td colspan="3">${st.editing?.index === i ? formHtml(c.text) : commentHtml(c, i)}</td></tr>`);
+          }
+        });
+        if (st.editing && st.editing.index == null && st.editing.key === k) rows.push(`<tr class="rv-note"><td colspan="3">${formHtml()}</td></tr>`);
+      }
+    }
+    return `<div class="rv-file" id="rv-${encodeURIComponent(f.path)}">${head}<table class="rv-table">${rows.join('')}</table></div>`;
+  }
+
+  function render() {
+    const d = st.data;
+    if (!d) return;
+    const a = agents.get(st.id);
+    const adds = d.files.reduce((s, f) => s + (f.added ?? 0), 0);
+    const dels = d.files.reduce((s, f) => s + (f.removed ?? 0), 0);
+    const openPr = d.prs.find((p) => p.state === 'OPEN');
+    const general = st.comments.filter((c) => !c.file);
+    const n = st.comments.length;
+    const scroll = body.querySelector('.rv-diffs')?.scrollTop ?? 0;
+    body.innerHTML = `
+      <div class="rv-summary">
+        <span><code>${esc(d.branch)}</code>${d.base ? ` ← <code>${esc(d.base.ref)}</code>` : ''}</span>
+        <span>${d.files.length} file${d.files.length === 1 ? '' : 's'} <span class="rv-add">+${adds}</span> <span class="rv-del">−${dels}</span></span>
+        <span>${d.commits.length} commit${d.commits.length === 1 ? '' : 's'}</span>
+        ${d.uncommitted ? `<span class="tag">${d.uncommitted} uncommitted</span>` : ''}
+        ${d.unpushed ? `<span class="tag">${d.unpushed} not pushed</span>` : ''}
+        ${openPr ? `<a href="${esc(openPr.url)}" target="_blank" rel="noopener">PR #${esc(openPr.number ?? '')}</a>` : ''}
+        <span class="spacer"></span>
+        <button type="button" class="small ghost" data-rv-reload>${st.loading ? 'Loading…' : 'Reload'}</button>
+      </div>
+      ${d.busy ? '<p class="hint rv-warn">The agent is working, so the changes may still move. Reload when it is idle.</p>' : ''}
+      ${d.truncated ? '<p class="hint rv-warn">The diff is large and was cut short; open a shell for the rest.</p>' : ''}
+      <div class="rv-main">
+        <nav class="rv-files">
+          ${d.files.length ? d.files.map((f) => `<a href="#" data-rv-goto="${esc(f.path)}" title="${esc(f.path)}"><span class="rv-fname">${esc(f.path.split('/').pop())}</span><span class="rv-fdir">${esc(f.path.split('/').slice(0, -1).join('/'))}</span>
+            <span class="rv-fstat">${f.added != null ? `<span class="rv-add">+${f.added}</span> <span class="rv-del">−${f.removed}</span>` : ''}</span></a>`).join('') : '<p class="hint">No changes yet.</p>'}
+          ${d.commits.length ? `<details class="rv-commits"><summary>Commits</summary>${d.commits.map((c) => `<div><code>${esc(c.sha)}</code> ${esc(c.subject)}</div>`).join('')}</details>` : ''}
+        </nav>
+        <div class="rv-diffs">${st.files.map(fileHtml).join('') || '<p class="hint rv-pad">Nothing changed since the branch started.</p>'}</div>
+      </div>
+      <div class="rv-actions">
+        <div class="rv-send">
+          ${general.length ? `<div class="rv-general">${general.map((c) => commentHtml(c, st.comments.indexOf(c))).join('')}</div>` : ''}
+          <textarea id="rv-note" rows="2" placeholder="Overall comment for the agent (optional)">${esc(st.note ?? '')}</textarea>
+          <div class="rv-row">
+            <span class="hint">${n ? `${n} comment${n === 1 ? '' : 's'} not sent` : 'Click + next to a line to comment on it'}</span>
+            <span class="spacer"></span>
+            ${n ? '<button type="button" class="small ghost" data-rv-clear>Discard comments</button>' : ''}
+            <button type="button" class="small primary" data-rv-send ${a && !a.workdir ? 'disabled' : ''}>Send to agent</button>
+          </div>
+        </div>
+        <div class="rv-land">
+          <div class="rv-row">
+            <input id="rv-msg" placeholder="Commit message" value="${esc(st.msg ?? '')}" ${d.uncommitted ? '' : 'disabled'} />
+            <button type="button" class="small" data-rv-commit ${d.uncommitted ? '' : 'disabled'} title="git add -A and commit, as you">Commit all</button>
+          </div>
+          <div class="rv-row">
+            <input id="rv-prtitle" placeholder="${openPr ? 'Pull request already open' : 'PR title (empty: from the commits)'}" value="${esc(st.prTitle ?? '')}" ${openPr ? 'disabled' : ''} />
+            <label class="check"><input type="checkbox" id="rv-draft" ${openPr ? 'disabled' : ''} /> Draft</label>
+            <button type="button" class="small primary" data-rv-pr ${!d.hasRemote || d.uncommitted || !d.commits.length ? 'disabled' : ''}
+              title="${!d.hasRemote ? 'No origin remote' : d.uncommitted ? 'Commit first' : !d.commits.length ? 'No commits on this branch yet' : openPr ? 'Push the branch to the open pull request' : 'Push the branch and open a pull request on GitHub'}">${openPr ? 'Push' : 'Push & open PR'}</button>
+          </div>
+        </div>
+      </div>`;
+    const diffs = body.querySelector('.rv-diffs');
+    if (diffs) diffs.scrollTop = scroll;
+    body.querySelector('.rv-form textarea')?.focus();
+  }
+
+  const keepInputs = () => {
+    st.note = $('#rv-note')?.value ?? st.note;
+    st.msg = $('#rv-msg')?.value ?? st.msg;
+    st.prTitle = $('#rv-prtitle')?.value ?? st.prTitle;
+  };
+
+  function saveForm(form) {
+    const text = form.querySelector('textarea').value.trim();
+    if (st.editing?.index != null) {
+      if (text) st.comments[st.editing.index].text = text;
+      else st.comments.splice(st.editing.index, 1);
+    } else if (text && st.editing) {
+      const [file, side, line] = st.editing.key.split('\t');
+      const row = body.querySelector(`[data-rv-line="${CSS.escape(st.editing.key)}"] .rv-code`);
+      const code = row ? row.textContent.slice(1) : '';
+      st.comments.push({ file, side, line: Number(line), code, text });
+    }
+    st.editing = null;
+    saveDrafts();
+    keepInputs();
+    render();
+  }
+
+  body.addEventListener('click', async (e) => {
+    const t = e.target;
+    if (t.closest('[data-rv-reload]')) return keepInputs(), reload();
+    const go = t.closest('[data-rv-goto]');
+    if (go) {
+      e.preventDefault();
+      st.collapsed.delete(go.dataset.rvGoto);
+      keepInputs();
+      render();
+      document.getElementById(`rv-${encodeURIComponent(go.dataset.rvGoto)}`)?.scrollIntoView({ block: 'start' });
+      return;
+    }
+    const tog = t.closest('[data-rv-toggle]');
+    if (tog) {
+      const p = tog.dataset.rvToggle;
+      st.collapsed.has(p) ? st.collapsed.delete(p) : st.collapsed.add(p);
+      keepInputs();
+      return render();
+    }
+    if (t.closest('.rv-plus') || (t.closest('.rv-no') && t.closest('[data-rv-line]'))) {
+      st.editing = { key: t.closest('[data-rv-line]').dataset.rvLine, index: null };
+      keepInputs();
+      return render();
+    }
+    if (t.closest('[data-rv-cancel]')) {
+      st.editing = null;
+      keepInputs();
+      return render();
+    }
+    if (t.closest('[data-rv-save]')) return saveForm(t.closest('.rv-form'));
+    const ed = t.closest('[data-rv-edit]');
+    if (ed) {
+      const i = Number(ed.dataset.rvEdit);
+      if (!st.comments[i].file) {
+        // A general comment: move it back into the note box.
+        st.note = [st.comments[i].text, $('#rv-note').value].filter(Boolean).join('\n');
+        st.comments.splice(i, 1);
+        saveDrafts();
+        return render();
+      }
+      st.editing = { index: i };
+      keepInputs();
+      return render();
+    }
+    const del = t.closest('[data-rv-del]');
+    if (del) {
+      st.comments.splice(Number(del.dataset.rvDel), 1);
+      saveDrafts();
+      keepInputs();
+      return render();
+    }
+    if (t.closest('[data-rv-clear]')) {
+      if (!confirm('Discard every comment not sent yet?')) return;
+      st.comments = [];
+      saveDrafts();
+      keepInputs();
+      return render();
+    }
+    if (t.closest('[data-rv-send]')) {
+      keepInputs();
+      if (!st.comments.length && !st.note?.trim()) return toast('Add a comment first');
+      t.disabled = true;
+      try {
+        const r = await api('POST', `/agents/${st.id}/changes/comments`, { comments: st.comments, note: st.note ?? '' });
+        st.comments = [];
+        st.note = '';
+        saveDrafts();
+        toast(r.sent ? `Sent ${r.sent} comment${r.sent === 1 ? '' : 's'} to the agent` : 'Sent to the agent');
+        render();
+      } catch (err) {
+        toast(`Error: ${err.message}`, 5000);
+        t.disabled = false;
+      }
+      return;
+    }
+    if (t.closest('[data-rv-commit]')) {
+      keepInputs();
+      if (!st.msg?.trim()) return $('#rv-msg').focus();
+      t.disabled = true;
+      try {
+        const r = await api('POST', `/agents/${st.id}/changes/commit`, { message: st.msg });
+        st.msg = '';
+        toast(`Committed ${r.sha}`);
+        await reload();
+      } catch (err) {
+        toast(`Error: ${err.message}`, 5000);
+        t.disabled = false;
+      }
+      return;
+    }
+    if (t.closest('[data-rv-pr]')) {
+      keepInputs();
+      t.disabled = true;
+      t.textContent = 'Pushing…';
+      try {
+        const r = await api('POST', `/agents/${st.id}/changes/pr`, { title: st.prTitle ?? '', draft: $('#rv-draft')?.checked });
+        st.prTitle = '';
+        toast(r.existing ? 'Pushed to the open pull request' : r.url ? 'Pull request opened' : 'Pushed', 4000, r.url ? { label: 'Open', run: () => window.open(r.url, '_blank', 'noopener') } : undefined);
+        await reload();
+      } catch (err) {
+        toast(`Error: ${err.message}`, 6000);
+        t.disabled = false;
+        t.textContent = 'Push & open PR';
+      }
+    }
+  });
+
+  body.addEventListener('keydown', (e) => {
+    const form = e.target.closest?.('.rv-form');
+    if (form && e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      saveForm(form);
+    } else if (form && e.key === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      st.editing = null;
+      keepInputs();
+      render();
+    }
+  });
+
+  // Typing in the note or the inputs must survive re-renders; keep it on every keystroke.
+  body.addEventListener('input', (e) => {
+    if (['rv-note', 'rv-msg', 'rv-prtitle'].includes(e.target.id)) keepInputs();
+  });
+
+  $('#review-close').onclick = () => dlg.close();
+  dlg.addEventListener('close', () => {
+    st.id = null;
+    st.note = st.msg = st.prTitle = '';
+  });
+
+  return { open, get openId() { return dlg.open ? st.id : null; } };
+}

package/public/setup.js

@@ -0,0 +1,67 @@
+// Getting started: shown where an agent's details go while none is selected, until every step
+// is done or it is hidden. Steps open the dialog that does them.
+
+const STEPS = [
+  ['agent', 'Start your first agent', 'Give it a request and a repo or folder; it works in its own branch.', '#new-btn', 'New agents'],
+  ['alerts', 'Get Slack alerts', 'Hear when an agent needs you, is stuck or finished.', '#alerts-btn', 'Alerts'],
+  ['assistant', 'Let work come to you', 'The assistant, or triggers (a GitHub label, a webhook), start agents for new work.', '#assistant-btn', 'Assistant'],
+  ['remote', 'Use it from your phone', 'Answer agents from anywhere on your network.', '#remote-btn', 'Remote access'],
+  ['budget', 'Set a budget', 'An alert at 80% of an agent budget, and a daily limit.', '#spend-btn', 'Results'],
+];
+
+export function initSetup({ api, esc, $ }) {
+  const el = $('#placeholder');
+  const plain = el.innerHTML;
+  let data = null;
+  const hidden = () => {
+    try {
+      return localStorage.getItem('agentmgr.setupHidden') === '1';
+    } catch {
+      return false;
+    }
+  };
+
+  function render() {
+    if (!data || hidden()) {
+      el.innerHTML = plain;
+      return;
+    }
+    const done = STEPS.filter(([k]) => data.steps[k]).length;
+    if (done === STEPS.length && !data.checks.length) {
+      el.innerHTML = plain;
+      return;
+    }
+    el.innerHTML = `<div class="setup">
+      <div class="setup-head"><h3>Getting started</h3><span class="hint">${done} of ${STEPS.length} done</span><span class="spacer"></span><button class="link" data-setup-hide>Hide</button></div>
+      ${data.checks.length ? `<div class="setup-checks">${data.checks.map((c) => `<div class="setup-check ${c.status}"><b>${esc(c.name)}</b>: ${esc(c.detail)}${c.fix ? `<div class="hint">${esc(c.fix)}</div>` : ''}</div>`).join('')}</div>` : ''}
+      <ol class="setup-steps">${STEPS.map(([k, title, why, btn, label]) => `<li class="${data.steps[k] ? 'done' : ''}">
+        <span class="setup-mark">${data.steps[k] ? '✓' : ''}</span>
+        <div><b>${title}</b><div class="hint">${why}</div></div>
+        ${data.steps[k] ? '' : `<button class="small" data-setup-open="${btn}">${label}</button>`}</li>`).join('')}</ol>
+      <p class="hint">${plain}</p>
+    </div>`;
+  }
+
+  el.addEventListener('click', (e) => {
+    const open = e.target.closest('[data-setup-open]');
+    if (open) return document.querySelector(open.dataset.setupOpen)?.click();
+    if (e.target.closest('[data-setup-hide]')) {
+      try {
+        localStorage.setItem('agentmgr.setupHidden', '1');
+      } catch {}
+      render();
+    }
+  });
+
+  async function load() {
+    try {
+      data = await api('GET', '/setup');
+    } catch {
+      data = null;
+    }
+    render();
+  }
+  load();
+  window.addEventListener('focus', () => !hidden() && load());
+  return { load };
+}

package/public/spend.js

@@ -0,0 +1,82 @@
+// Spend dialog: today's cost, the last two weeks, the costliest agents, and the limits.
+
+export function initSpend({ api, esc, toast, $ }) {
+  const dlg = $('#spend-dialog');
+  const f = $('#spend-form');
+  const money = (n) => `$${Number(n ?? 0).toFixed(2)}`;
+
+  function fill(b) {
+    $('#spend-today').textContent = b.today.total ? money(b.today.total) : '';
+    if (!dlg.open) return;
+    f.perAgentUsd.value = b.perAgentUsd ?? '';
+    f.perDayUsd.value = b.perDayUsd ?? '';
+    const max = Math.max(...b.days.map((d) => d.total), 0.01);
+    $('#spend-summary').innerHTML = `
+      <p class="spend-big">${money(b.today.total)} <span class="hint">today${b.perDayUsd ? ` of ${money(b.perDayUsd)}` : ''}</span></p>
+      ${b.days.length > 1 ? `<div class="spend-bars" title="The last two weeks">${[...b.days].reverse().map((d) => `<span style="height:${Math.max(2, Math.round((d.total / max) * 40))}px" title="${esc(d.day)}: ${money(d.total)}"></span>`).join('')}</div>` : ''}`;
+    $('#spend-agents').innerHTML = b.agents.length
+      ? `<table class="spend-table"><tr><th>Agent</th><th>Spent</th><th>Today</th><th>Budget</th></tr>${b.agents.map((a) => `<tr class="${a.hit ? 'over' : ''}">
+          <td><a href="#${a.id}">${esc(a.name)}</a></td><td>${money(a.cost)}</td><td>${a.today ? money(a.today) : ''}</td>
+          <td>${a.limit ? `${money(a.limit)}${a.own ? '' : ' <span class="hint">default</span>'}${a.hit ? ' <span class="tag fail">reached</span>' : ''}` : '—'}</td></tr>`).join('')}</table>`
+      : '<p class="hint">No costs recorded yet.</p>';
+    $('#spend-note').textContent = b.note;
+  }
+
+  const hours = (h) => (h == null ? '—' : h < 1 ? `${Math.round(h * 60)} min` : h < 48 ? `${h.toFixed(1)} h` : `${(h / 24).toFixed(1)} days`);
+  const pct = (r) => (r == null ? '—' : `${Math.round(r * 100)}%`);
+
+  function table(title, rows) {
+    if (!rows.length) return '';
+    return `<details class="stats-table" ${title === 'By engine and model' ? 'open' : ''}><summary>${title}</summary><table class="spend-table">
+      <tr><th></th><th>Agents</th><th>Merged</th><th>Merge rate</th><th>To PR</th><th>Cost / merged</th></tr>
+      ${rows.map((r) => `<tr><td>${esc(r.key)}</td><td>${r.agents}</td><td>${r.merged}</td><td>${pct(r.mergeRate)}</td><td>${hours(r.medianHoursToPr)}</td><td>${r.costPerMerged == null ? '—' : money(r.costPerMerged)}</td></tr>`).join('')}
+    </table></details>`;
+  }
+
+  function fillStats(st) {
+    const t = st.total;
+    const kpi = (label, value, hint = '') => `<div class="kpi"><div class="kpi-v">${value}</div><div class="kpi-l">${label}</div>${hint ? `<div class="hint">${hint}</div>` : ''}</div>`;
+    $('#stats-body').innerHTML = t.agents
+      ? `<div class="kpis">
+          ${kpi('agents', t.agents, `${t.withPr} opened a PR`)}
+          ${kpi('PRs merged', t.merged, `${t.open} open, ${t.closed} closed`)}
+          ${kpi('merge rate', pct(t.mergeRate), 'of PRs merged or closed')}
+          ${kpi('to first PR', hours(t.medianHoursToPr), 'median')}
+          ${kpi('to merge', hours(t.medianHoursToMerge), 'median')}
+          ${kpi('per merged PR', t.costPerMerged == null ? '—' : money(t.costPerMerged), `${money(t.cost)} in all`)}
+        </div>
+        ${table('By engine and model', st.byEngine)}${table('By where they came from', st.bySource)}${table('By project', st.byProject)}`
+      : '<p class="hint">No agents in this period.</p>';
+  }
+
+  async function refresh() {
+    try {
+      fill(await api('GET', '/budgets'));
+      if (dlg.open) fillStats(await api('GET', `/stats?days=${$('#stats-days').value}`));
+    } catch {}
+  }
+  $('#stats-days').onchange = () => refresh();
+
+  $('#spend-btn').onclick = async () => {
+    $('#spend-error').hidden = true;
+    dlg.showModal();
+    await refresh();
+  };
+  $('#spend-close').onclick = () => dlg.close();
+  f.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    try {
+      fill(await api('PUT', '/budgets', { perAgentUsd: f.perAgentUsd.value || null, perDayUsd: f.perDayUsd.value || null }));
+      toast('Limits saved');
+    } catch (err) {
+      $('#spend-error').hidden = false;
+      $('#spend-error').textContent = err.message;
+    }
+  });
+  dlg.addEventListener('click', (e) => {
+    if (e.target.closest('a[href^="#"]')) dlg.close();
+  });
+  refresh();
+  setInterval(refresh, 120_000);
+  return { refresh };
+}

package/public/style.css

@@ -157,7 +157,7 @@ body.term-max .layout { grid-template-columns: 1fr; }
 .shortcut { flex: none; font: 600 11px/16px var(--mono); padding: 0 6px; border-radius: 4px; background: var(--accent); color: var(--accent-text); cursor: pointer; }
 .bl-head .shortcut { cursor: default; }
 .project-head .caret { width: 12px; color: var(--muted); flex: none; }
-.project-head .pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.project-head .pname { font-size: 16px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .project-head .pcounts { display: flex; gap: 6px; align-items: center; color: var(--muted); font-weight: 500; font-size: 12px; }
 .project-head .prun { color: var(--green); }
 .project-head .pcount { white-space: nowrap; }
@@ -384,6 +384,17 @@ body.remote .local-only { display: none; }
 .alerts-body .check { display: flex; gap: 8px; align-items: center; font-size: 13px; }
 .alerts-body .check input[type=checkbox] { width: auto; }
 .alerts-body .num { width: 64px; padding: 2px 6px; }
+.assistant-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 4px; vertical-align: middle; background: var(--muted); }
+.assistant-dot.on { background: var(--green); }
+.assistant-dot.busy { background: var(--yellow); }
+.assistant-status { font-size: 13px; }
+.assistant-status p { margin: 4px 0; }
+.assistant-started { margin: 4px 0; padding-left: 18px; font-size: 13px; }
+.assistant-activity { font-size: 13px; max-height: 240px; overflow: auto; }
+.assistant-activity h4 { margin: 8px 0 4px; }
+.assistant-activity .md h1, .assistant-activity .md h2, .assistant-activity .md h3 { font-size: 13px; margin: 10px 0 2px; color: var(--muted); }
+.assistant-activity .md p, .assistant-activity .md ul { margin: 2px 0; }
+.tag.assistant { background: var(--panel-2); }
 .cleanup-plan { font-size: 13px; max-height: 260px; overflow: auto; }
 .cleanup-plan h4 { margin: 8px 0 4px; font-size: 13px; }
 .cleanup-plan ul { margin: 0; padding-left: 18px; }
@@ -614,3 +625,107 @@ pre.diff .meta { color: var(--muted); font-weight: 600; }
 .team-quest { border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; }
 .team-quest summary { cursor: pointer; }
 .team-quest .team-timeline { margin-top: 8px; }
+
+/* Review changes */
+.review-dialog { width: min(1400px, calc(100vw - 24px)); height: calc(100vh - 32px); max-height: none; }
+.review-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px 18px 14px; }
+.rv-summary { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; }
+.rv-warn { margin: 0; color: var(--yellow); }
+.rv-add { color: var(--green); font-family: var(--mono); font-size: 12px; }
+.rv-del { color: var(--red); font-family: var(--mono); font-size: 12px; }
+.rv-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px 1fr; gap: 10px; }
+.rv-files { overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 4px; font-size: 12px; }
+.rv-files a { display: grid; grid-template-columns: 1fr auto; padding: 4px 6px; border-radius: 4px; color: var(--text); text-decoration: none; }
+.rv-files a:hover { background: var(--panel-2); }
+.rv-fname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rv-fdir { grid-column: 1; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rv-fstat { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
+.rv-commits { margin: 8px 4px 2px; color: var(--muted); }
+.rv-commits div { padding: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rv-diffs { overflow: auto; display: flex; flex-direction: column; gap: 10px; }
+.rv-file { border: 1px solid var(--border); border-radius: 6px; }
+.rv-file-head { position: sticky; top: 0; z-index: 1; display: flex; gap: 6px; align-items: center; padding: 6px 10px; background: var(--panel-2); border-radius: 6px 6px 0 0; cursor: pointer; font-size: 13px; }
+.rv-caret { color: var(--muted); width: 10px; }
+.tag.rv-added { color: var(--green); }
+.tag.rv-deleted { color: var(--red); }
+.rv-pad { padding: 8px 10px; margin: 0; }
+.rv-table { width: 100%; border-collapse: collapse; font: 12px/1.5 var(--mono); }
+.rv-table td { padding: 0 6px; vertical-align: top; }
+.rv-no { width: 1%; min-width: 38px; text-align: right; color: var(--muted); user-select: none; cursor: pointer; position: relative; white-space: nowrap; }
+.rv-code { white-space: pre-wrap; word-break: break-word; }
+.rv-sign { display: inline-block; width: 1.2em; color: var(--muted); user-select: none; }
+tr.rv-add td.rv-code, tr.rv-add td.rv-no { background: color-mix(in srgb, var(--green) 12%, transparent); }
+tr.rv-del td.rv-code, tr.rv-del td.rv-no { background: color-mix(in srgb, var(--red) 12%, transparent); }
+tr.rv-hunk td { color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); padding: 2px 8px; }
+.rv-plus { display: none; position: absolute; left: 2px; top: 1px; padding: 0 5px; font-size: 11px; line-height: 16px; border-radius: 3px; background: var(--accent); color: var(--accent-text); border: 0; cursor: pointer; }
+tr[data-rv-line]:hover .rv-plus { display: inline-block; }
+@media (hover: none) { .rv-plus { display: inline-block; opacity: .6; } }
+tr.rv-note td { padding: 6px 10px; background: var(--panel); font-family: inherit; }
+.rv-comment { display: flex; gap: 8px; align-items: flex-start; border-left: 3px solid var(--accent); padding: 4px 8px; background: var(--panel-2); border-radius: 4px; font: 13px/1.45 system-ui, sans-serif; }
+.rv-comment-text { white-space: pre-wrap; }
+.rv-form textarea { width: 100%; font: 13px/1.45 system-ui, sans-serif; }
+.rv-form-actions, .rv-row { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
+.rv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
+.rv-send textarea { width: 100%; }
+.rv-general { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
+.rv-land input:not([type]) { flex: 1; min-width: 0; }
+.d-actions .count { font-size: 11px; padding: 0 5px; border-radius: 8px; background: var(--accent); color: var(--accent-text); }
+@media (max-width: 760px) {
+  .rv-main { grid-template-columns: 1fr; }
+  .rv-files { max-height: 120px; }
+  .rv-actions { grid-template-columns: 1fr; }
+}
+.rv-land .check { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; margin: 0; }
+
+/* Land tab */
+.land-row { cursor: default; }
+.land-row .name { white-space: normal; color: var(--text); text-decoration: none; font-weight: 600; }
+.land-row .name:hover { text-decoration: underline; }
+.land-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
+.tag.fail { color: var(--red); }
+.badge.ready { background: var(--green); color: #fff; border-color: var(--green); }
+.land-empty { padding: 10px 14px; }
+.land-settings { padding: 8px 14px 14px; font-size: 13px; }
+.land-settings summary { cursor: pointer; color: var(--muted); margin-bottom: 6px; }
+.land-settings label { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
+.land-settings input[type="number"] { width: 56px; }
+.land-settings select { width: auto; }
+.links li:has(.pr-chips) { flex-wrap: wrap; }
+.pr-chips { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; padding-left: 2px; }
+.land-settings input[type="checkbox"] { width: auto; flex: none; margin: 0; }
+input.inline { display: inline-block; width: 80px; padding: 1px 4px; }
+#triggers-newtoken { width: auto; justify-self: start; align-self: flex-start; }
+.trig-recent { margin: 4px 0 0; padding-left: 18px; }
+.spend-today:empty { display: none; }
+.spend-today { font-size: 11px; color: var(--muted); margin-left: 2px; }
+.spend-big { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
+.spend-bars { display: flex; align-items: flex-end; gap: 3px; height: 42px; margin-bottom: 8px; }
+.spend-bars span { width: 12px; background: var(--accent); border-radius: 2px 2px 0 0; opacity: .8; }
+.spend-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.spend-table th, .spend-table td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--border); }
+.spend-table tr.over td { color: var(--red); }
+.inline-select { width: auto; font-size: 13px; font-weight: 400; margin-left: 6px; padding: 2px 4px; }
+.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
+.kpi { border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; }
+.kpi-v { font-size: 20px; font-weight: 700; }
+.kpi-l { font-size: 12px; color: var(--muted); }
+.stats-table { margin: 6px 0; }
+.stats-table summary { cursor: pointer; font-size: 13px; color: var(--muted); }
+.spend-h { margin: 14px 0 4px; font-size: 14px; }
+#spend-dialog { width: min(720px, calc(100vw - 32px)); }
+@media (max-width: 560px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
+.pb-table td { vertical-align: top; }
+.pb-intent { max-width: 360px; white-space: normal; }
+.pb-actions { white-space: nowrap; text-align: right; }
+.pb-form { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-top: 10px; }
+.memory-text { width: 100%; font: 12px/1.5 var(--mono); }
+#memory-dialog { width: min(760px, calc(100vw - 32px)); }
+.setup { max-width: 640px; margin: 24px auto; text-align: left; color: var(--text); }
+.setup-head { display: flex; gap: 10px; align-items: baseline; }
+.setup-head h3 { margin: 0; font-size: 16px; }
+.setup-steps { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
+.setup-steps li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
+.setup-steps li.done { opacity: .6; }
+.setup-mark { color: var(--green); font-weight: 700; }
+.setup-check { padding: 6px 10px; border-radius: 6px; margin: 6px 0; border-left: 3px solid var(--yellow); background: var(--panel-2); font-size: 13px; }
+.setup-check.fail { border-left-color: var(--red); }