ai-agentmanager 1.3.1 → 1.5.0

package/public/machine.js

@@ -0,0 +1,120 @@
+// Open Terminal: shells on this computer, in your home folder, not tied to any agent. Works from
+// any signed-in device (over remote access it streams like an agent's shell). The shells keep
+// running when the window is hidden; × ends one.
+import { openStream } from '/transport.js';
+
+const MACHINE = '__machine__';
+
+export function initMachine({ api, esc, toast, $, Terminal, FitAddon }) {
+  const dialog = $('#machine-dialog');
+  let xterm = null;
+  let replaying = false; // writing the backlog (see onData)
+  let fit = null;
+  let conn = null;
+  let current = null;
+  let shells = [];
+
+  function ensure() {
+    if (xterm) return;
+    xterm = new Terminal({ cursorBlink: true, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: 13, scrollback: 10000, theme: { background: '#0f1117' } });
+    fit = new FitAddon();
+    xterm.loadAddon(fit);
+    xterm.open($('#machine-term'));
+    // Answers xterm gives to queries in the replayed backlog are stale; don't send them as typing.
+    xterm.onData((d) => !replaying && conn?.send({ t: 'i', d }));
+    xterm.onResize(({ cols, rows }) => conn?.send({ t: 'r', cols, rows }));
+    new ResizeObserver(() => dialog.open && fit.fit()).observe($('#machine-term'));
+  }
+
+  function renderTabs() {
+    const nums = [...new Set([...shells, current].filter(Boolean))].sort((a, b) => a - b);
+    $('#machine-tabs').innerHTML = nums
+      .map((n) => `<button class="term-tab ${n === current ? 'active' : ''}" data-n="${n}" role="tab">Terminal ${n}<span class="x" data-drop="${n}" title="End this terminal">×</span></button>`)
+      .join('');
+  }
+
+  function connect(n) {
+    conn?.close();
+    current = n;
+    xterm.reset();
+    renderTabs();
+    conn = openStream(
+      { agentId: MACHINE, kind: `shell:${n}` },
+      {
+        onOpen: () => {
+          fit.fit();
+          conn.send({ t: 'r', cols: xterm.cols, rows: xterm.rows });
+          xterm.focus();
+        },
+        onMessage: (msg) => {
+          if (msg.t === 'hello' && msg.backlog) {
+            replaying = true;
+            xterm.write(msg.backlog, () => (replaying = false));
+          }
+          else if (msg.t === 'o') xterm.write(msg.d);
+          else if (msg.t === 'exit') xterm.write('\r\n\x1b[2m[terminal ended; reopen it with + Terminal]\x1b[0m\r\n');
+          else if (msg.t === 'error') xterm.write(`\r\n\x1b[31m${msg.error}\x1b[0m\r\n`);
+        },
+        onClose: ({ reason }) => reason && xterm.write(`\r\n\x1b[2m[${reason}]\x1b[0m\r\n`),
+        onInputLost: () => xterm.write('\r\n\x1b[33m[some typing did not reach the computer (connection lost); check before going on]\x1b[0m\r\n'),
+      },
+    );
+    xterm.focus();
+  }
+
+  async function refresh() {
+    const r = await api('GET', '/machine/shells');
+    shells = r.shells;
+    $('#machine-title').textContent = r.home;
+    return r;
+  }
+
+  $('#machine-btn').onclick = async () => {
+    try {
+      dialog.showModal();
+      ensure();
+      await refresh();
+      const n = current && shells.includes(current) ? current : shells[0] ?? (await api('POST', '/machine/shell/new')).n;
+      requestAnimationFrame(() => connect(n));
+    } catch (err) {
+      dialog.close();
+      toast(`Error: ${err.message}`, 5000);
+    }
+  };
+  $('#machine-new').onclick = async () => {
+    const { n } = await api('POST', '/machine/shell/new');
+    shells = [...new Set([...shells, n])];
+    connect(n);
+  };
+  $('#machine-close').onclick = () => {
+    conn?.close();
+    conn = null;
+    dialog.close();
+  };
+  dialog.addEventListener('close', () => {
+    conn?.close();
+    conn = null;
+  });
+  $('#machine-tabs').addEventListener('click', async (e) => {
+    const drop = e.target.closest('[data-drop]');
+    if (drop) {
+      e.stopPropagation();
+      const n = Number(drop.dataset.drop);
+      await api('POST', '/machine/shell/drop', { n });
+      await refresh();
+      shells = shells.filter((x) => x !== n);
+      if (n === current) {
+        if (shells.length) connect(shells[0]);
+        else {
+          current = null;
+          conn?.close();
+          dialog.close();
+        }
+      } else renderTabs();
+      return;
+    }
+    const tab = e.target.closest('[data-n]');
+    if (tab && Number(tab.dataset.n) !== current) connect(Number(tab.dataset.n));
+  });
+  return {};
+}

package/public/menu.js

@@ -0,0 +1,92 @@
+// The menu at the right of the top bar: who this runs as (Claude account, git identity, computer)
+// and the settings and preferences: Settings…, Clean up, Alerts, Remote access, About.
+
+export function initMenu({ api, esc, toast, $ }) {
+  const btn = $('#menu-btn');
+  const menu = $('#menu');
+  const remote = () => document.body.classList.contains('remote');
+
+  const open = (on) => {
+    menu.hidden = !on;
+    btn.setAttribute('aria-expanded', String(on));
+  };
+  btn.onclick = (e) => {
+    e.stopPropagation();
+    open(menu.hidden);
+  };
+  document.addEventListener('click', (e) => {
+    if (!menu.hidden && !menu.contains(e.target)) open(false);
+  });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && !menu.hidden) open(false);
+  });
+  // Any item closes the menu; its own handler does the rest.
+  menu.addEventListener('click', (e) => {
+    if (e.target.closest('button')) open(false);
+  });
+  $('#menu-about').onclick = () => $('#about-btn').click();
+
+  async function loadMe() {
+    try {
+      const me = await api('GET', '/me');
+      const initials = me.display
+        .split(/[\s@._-]+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((w) => w[0].toUpperCase())
+        .join('');
+      $('#me-avatar').textContent = initials || '·';
+      $('#me-name').textContent = me.display;
+      $('#me-display').textContent = me.display;
+      $('#me-email').textContent = me.email ?? '';
+      $('#me-email').hidden = !me.email;
+      const where = [me.claude ? `Claude account${me.claude.organization && !me.claude.organization.includes(me.claude.email) ? ` · ${me.claude.organization}` : ''}` : null, me.user && me.host ? `${me.user} on ${me.host}` : null, me.remote ? 'signed in from this device' : null].filter(Boolean);
+      $('#me-where').innerHTML = where.map(esc).join('<br>');
+      btn.title = `${me.display}${me.email ? ` (${me.email})` : ''}: settings and preferences`;
+    } catch {
+      // An older daemon has no /me: the menu still works.
+      $('#me-display').textContent = 'Settings';
+    }
+  }
+
+  // ------------------------------------------------------------ Settings dialog
+  const dialog = $('#settings-dialog');
+  const form = $('#settings-form');
+  $('#settings-btn').onclick = async () => {
+    $('#settings-error').hidden = true;
+    try {
+      const c = await api('GET', '/cleanup');
+      form.maxRunning.value = c.maxRunning ?? '';
+      $('#settings-running').textContent = `Open now: ${c.running}.`;
+      if (!remote()) {
+        const u = await api('GET', '/update').catch(() => null);
+        form.updateCheck.checked = u?.check !== false;
+      }
+      dialog.showModal();
+    } catch (err) {
+      toast(`Error: ${err.message}`, 5000);
+    }
+  };
+  $('#settings-cancel').onclick = () => dialog.close();
+  dialog.addEventListener('click', (e) => {
+    const go = e.target.closest('[data-open]');
+    if (!go) return;
+    dialog.close();
+    $(`#${go.dataset.open}`).click();
+  });
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    try {
+      const c = await api('PUT', '/cleanup', { maxRunning: form.maxRunning.value.trim() || null });
+      if (!remote()) await api('PUT', '/update', { check: form.updateCheck.checked }).catch(() => {});
+      dialog.close();
+      toast(c.maxRunning ? `At most ${c.maxRunning} agents open; the ones idle longest close above that` : 'No limit on open agents');
+    } catch (err) {
+      $('#settings-error').textContent = err.message;
+      $('#settings-error').hidden = false;
+    }
+  });
+
+  loadMe();
+  return { loadMe };
+}

package/public/setup.js

@@ -1,5 +1,5 @@
-// 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.
+// The home page, where an agent's details go while none is selected: Getting started until every
+// step is done or it is hidden (steps open the dialog that does them), then what the app can do.
 
 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'],
@@ -9,6 +9,21 @@ const STEPS = [
   ['budget', 'Set a budget', 'An alert at 80% of an agent budget, and a daily limit.', '#spend-btn', 'Results'],
 ];
 
+// What the app can do, each with where to find it: a button to click, a sidebar tab, or a link.
+const FEATURES = [
+  ['Agents side by side', 'Each works on its own branch in its own folder; the list shows which need you.', { btn: '#new-btn', label: 'New agents' }],
+  ['Teams and races', 'A team (analyst, critics, implementer, tester, reviewer) solves one problem; a race tries variants and you keep the best.', { btn: '#new-btn', label: 'New agents' }],
+  ['Inbox', 'Every question, permission prompt, stuck agent and overlap between agents, in one place.', { tab: 'inbox', label: 'Inbox' }],
+  ['Code', "Every agent has a Code tab: its files in the editor from VS Code, with search and a diff against where it started. Or open the folder in VS Code or Cursor."],
+  ['Shells and browser', "+ Shell opens a terminal in an agent's folder; + Browser shows a page as this computer sees it (a dev server on localhost), from your phone too."],
+  ['Terminal', 'A shell on this computer in your home folder, from any device you are signed in on.', { btn: '#machine-btn', label: 'Terminal' }],
+  ['Review and land', "Review an agent's changes and send comments back; Land shows each pull request and what it needs to merge.", { tab: 'land', label: 'Land' }],
+  ['Backlog and assistant', 'Queue work to start as agents finish; the assistant and triggers (a GitHub label, a webhook) bring in new work.', { tab: 'backlog', label: 'Backlog' }],
+  ['Results', 'Merge rate, time to PR and cost per merged PR, with budgets and a daily limit.', { btn: '#spend-btn', label: 'Results' }],
+  ['From your phone', 'Answer agents, review and use the terminals from anywhere on your network.', { btn: '#remote-btn', label: 'Remote access' }],
+  ['Several machines', 'Link your computers to a hub to see every agent in one place, and move an agent to another machine to carry on there.', { href: 'https://github.com/jdmunta/ai-agentmanager-core/blob/main/docs/distributed.md', label: 'How it works' }],
+];
+
 export function initSetup({ api, esc, $ }) {
   const el = $('#placeholder');
   const plain = el.innerHTML;
@@ -21,30 +36,41 @@ export function initSetup({ api, esc, $ }) {
     }
   };
 
-  function render() {
-    if (!data || hidden()) {
-      el.innerHTML = plain;
-      return;
-    }
+  // A feature's button, unless what it opens isn't available here (local-only, on a phone).
+  function action(f) {
+    if (f.href) return `<a href="${f.href}" target="_blank" rel="noopener">${f.label} ↗</a>`;
+    if (f.btn && document.body.classList.contains('remote') && document.querySelector(f.btn)?.classList.contains('local-only')) return '';
+    if (f.btn) return `<button class="small ghost" data-setup-open="${f.btn}">${f.label}</button>`;
+    if (f.tab) return `<button class="small ghost" data-setup-tab="${f.tab}">${f.label}</button>`;
+    return '';
+  }
+
+  function steps() {
+    if (!data || hidden()) 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>
+    if (done === STEPS.length && !data.checks.length) return '';
+    return `<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>
+        ${data.steps[k] ? '' : `<button class="small" data-setup-open="${btn}">${label}</button>`}</li>`).join('')}</ol>`;
+  }
+
+  function render() {
+    el.innerHTML = `<div class="setup">
       <p class="hint">${plain}</p>
+      ${steps()}
+      <h3 class="setup-features-head">What you can do</h3>
+      <ul class="setup-features">${FEATURES.map(([title, why, f = {}]) => `<li><div><b>${title}</b><div class="hint">${why}</div></div>${action(f)}</li>`).join('')}</ul>
     </div>`;
   }
 
   el.addEventListener('click', (e) => {
     const open = e.target.closest('[data-setup-open]');
     if (open) return document.querySelector(open.dataset.setupOpen)?.click();
+    const tab = e.target.closest('[data-setup-tab]');
+    if (tab) return document.querySelector(`.side-tab[data-tab="${tab.dataset.setupTab}"]`)?.click();
     if (e.target.closest('[data-setup-hide]')) {
       try {
         localStorage.setItem('agentmgr.setupHidden', '1');

package/public/style.css

@@ -55,6 +55,12 @@ a:hover { text-decoration: underline; }
 .brand { display: flex; align-items: center; gap: 10px; }
 .brand h1 { font-size: 16px; margin: 0; font-weight: 600; }
 .logo { color: var(--accent); }
+.update-btn { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-text); border: none; cursor: pointer; }
+.update-btn:disabled { opacity: 0.6; cursor: progress; }
+.about-auto { display: flex; align-items: center; gap: 6px; margin-right: auto; font-size: 13px; }
+.home-link { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; border-radius: 6px; }
+.home-link:hover h1 { text-decoration: underline; text-underline-offset: 3px; }
+.home-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .conn { font-size: 12px; color: var(--muted); }
 .about-btn { font-size: 12px; padding: 2px 8px; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 999px; font-variant-numeric: tabular-nums; }
 .about-btn:hover, .about-btn:focus-visible { color: var(--text); border-color: var(--accent); }
@@ -149,6 +155,10 @@ body.term-max .layout { grid-template-columns: 1fr; }
 .recent-bar input[type="number"] { width: 56px; flex: none; padding: 2px 6px; font-size: 12px; }
 .agent-list { list-style: none; margin: 0; padding: 0; }
 .agent-list li.project { border-bottom: 1px solid var(--border); }
+.agent-list li.agent[draggable='true'] { cursor: grab; }
+.agent-list li.agent.dragging { opacity: 0.45; }
+.agent-list li.project.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
+.agent-list li.project.drop-target .project-head .pname::after { content: '  ← move here'; color: var(--accent); font-weight: 500; }
 .project-head {
   width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 0;
   background: var(--panel-2); font-weight: 600; text-align: left; position: sticky; top: 0; z-index: 1;
@@ -197,7 +207,7 @@ body.term-max .layout { grid-template-columns: 1fr; }
 
 /* ---------- detail */
 .detail { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
-.placeholder { margin: auto; color: var(--muted); padding: 24px; text-align: center; }
+.placeholder { margin: auto; color: var(--muted); padding: 24px; text-align: center; max-height: 100%; overflow-y: auto; box-sizing: border-box; min-height: 0; width: 100%; }
 #detail-body { padding: 16px 20px; overflow-y: auto; flex: 0 1 auto; max-height: 100%; }
 .detail.with-term #detail-body { max-height: var(--brief-h, 42%); border-bottom: 1px solid var(--border); }
 .detail.with-term.brief-sized #detail-body { height: var(--brief-h); flex: none; }
@@ -333,6 +343,11 @@ body.term-max .layout { grid-template-columns: 1fr; }
 .term-wrap.browsing .browser { display: flex; }
 .term-wrap.browsing .terminal, .term-wrap.browsing .keybar, .term-wrap.browsing .compose,
 .term-wrap.browsing #term-attach, .term-wrap.browsing #term-fit, .term-wrap.browsing .term-drop { display: none !important; }
+/* Code replaces the terminal the same way. */
+.code { display: none; flex: 1; min-height: 0; background: #1e1e1e; color: #d4d4d4; }
+.term-wrap.coding .code { display: flex; }
+.term-wrap.coding .terminal, .term-wrap.coding .keybar, .term-wrap.coding .compose, .term-wrap.coding .browser,
+.term-wrap.coding #term-attach, .term-wrap.coding #term-fit, .term-wrap.coding .term-drop { display: none !important; }
 .browser-bar { display: flex; gap: 6px; align-items: center; padding: 6px 10px; background: #161a22; border-top: 1px solid #30363d; }
 .browser-bar input { flex: 1; min-width: 0; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
 .browser-bar button, .browser-bar a { color: #c9d1d9; border-color: #30363d; }
@@ -720,7 +735,7 @@ input.inline { display: inline-block; width: 80px; padding: 1px 4px; }
 .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 { max-width: 820px; 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; }
@@ -728,4 +743,89 @@ input.inline { display: inline-block; width: 80px; padding: 1px 4px; }
 .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 > .hint:first-child { text-align: center; margin: 0 0 16px; }
+.setup-features-head { margin: 22px 0 8px; font-size: 16px; }
+.setup-features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
+.setup-features li { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
+.setup-features li > :last-child:not(div) { align-self: flex-start; }
 .setup-check.fail { border-left-color: var(--red); }
+
+/* ---------------------------------------------------------------- menu and settings */
+.menu-wrap { position: relative; }
+.menu-btn { display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 4px; border-radius: 999px; }
+.avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 11px; font-weight: 600; }
+.me-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
+.burger { font-size: 15px; line-height: 1; opacity: 0.8; }
+.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 240px; padding: 6px; background: var(--panel, var(--bg)); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; }
+.menu[hidden] { display: none; }
+.menu > button { text-align: left; background: none; border: none; padding: 7px 10px; border-radius: 6px; cursor: pointer; color: inherit; font: inherit; }
+.menu > button:hover, .menu > button:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); }
+.menu-me { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
+.menu-sep { height: 1px; background: var(--border); margin: 4px 0; }
+.settings-dialog .hint { margin: 0; }
+.settings-dialog input.num { width: 7em; }
+@media (max-width: 720px) {
+  .me-name { display: none; }
+  .menu-btn { padding: 3px 8px 3px 4px; }
+}
+
+/* ---------------------------------------------------------------- code (studio editor) */
+.code-side { width: 240px; flex: 0 0 240px; display: flex; flex-direction: column; min-height: 0; background: #181818; border-right: 1px solid #2b2b2b; }
+.code.no-side .code-side { display: none; }
+.code-side-bar, .code-tabs-bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; background: #181818; border-bottom: 1px solid #2b2b2b; min-height: 32px; }
+.code-side-bar .spacer, .code-tabs-bar .spacer { flex: 1; }
+.code button { background: none; border: none; color: #cccccc; font: inherit; font-size: 12px; cursor: pointer; border-radius: 4px; padding: 3px 7px; }
+.code button:hover { background: #2a2d2e; }
+.code button.active { background: #37373d; color: #fff; }
+.code .code-icon { padding: 3px 5px; }
+.code .code-btn { border: 1px solid #3c3c3c; }
+.code-tree { flex: 1; overflow: auto; padding: 4px 0; font-size: 13px; }
+.code-node { padding: 2px 8px; white-space: nowrap; cursor: pointer; overflow: hidden; text-overflow: ellipsis; user-select: none; }
+.code-node:hover { background: #2a2d2e; }
+.code-node.selected { background: #37373d; }
+.code-node.active { color: #fff; }
+.code-node.dim { opacity: 0.55; }
+.code-node .caret { display: inline-block; width: 14px; color: #8b8b8b; }
+.code-search { display: flex; flex-direction: column; gap: 6px; padding: 6px; min-height: 0; flex: 1; }
+.code-search[hidden] { display: none; }
+.code-search input { background: #252526; color: #ddd; border: 1px solid #3c3c3c; border-radius: 4px; padding: 5px 7px; font-size: 13px; }
+.code-hits { overflow: auto; flex: 1; font-size: 12px; }
+.code-hit { padding: 4px 6px; border-radius: 4px; cursor: pointer; overflow-wrap: anywhere; }
+.code-hit:hover { background: #2a2d2e; }
+.code-hit div { color: #9d9d9d; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
+.code-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
+.code-tabs { display: flex; gap: 2px; overflow-x: auto; min-width: 0; scrollbar-width: none; }
+.code .code-tab { white-space: nowrap; border-radius: 4px 4px 0 0; padding: 4px 8px; }
+.code-tab .x { margin-left: 6px; opacity: 0.6; }
+.code-tab .x:hover { opacity: 1; }
+.code-editor { flex: 1; min-height: 0; position: relative; }
+.code-editor[hidden], .code-empty[hidden] { display: none; }
+.code-diff { position: absolute; inset: 0; }
+.code-empty { flex: 1; display: grid; place-items: center; padding: 24px; color: #8b8b8b; text-align: center; font-size: 13px; }
+.code-plain { width: 100%; height: 100%; resize: none; border: none; outline: none; background: #1e1e1e; color: #d4d4d4; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 8px 12px; tab-size: 2; }
+.code-status { padding: 2px 10px; font-size: 11px; color: #9d9d9d; background: #181818; border-top: 1px solid #2b2b2b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 18px; }
+@media (max-width: 720px) {
+  .code-side { position: absolute; z-index: 3; inset: 0 auto 0 0; width: min(82vw, 300px); }
+}
+.code { position: relative; }
+
+/* ---------------------------------------------------------------- machine terminal */
+.machine-dialog { width: min(1100px, calc(100vw - 24px)); height: min(720px, calc(100vh - 24px)); max-height: none; background: #0f1117; color: #c9d1d9; border-color: #30363d; }
+.machine-dialog[open] { display: flex; flex-direction: column; }
+.machine-dialog .terminal { flex: 1; min-height: 0; }
+.machine-dialog #machine-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8b93a7; margin-left: 8px; }
+
+/* Diagrams: big pictures, one under another, for a quick grasp. */
+#doc-body.diagrams-view h2 { margin: 26px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); }
+#doc-body.diagrams-view h2:first-of-type { border-top: 0; padding-top: 0; }
+#doc-body.diagrams-view .diagram { display: flex; justify-content: center; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); overflow-x: auto; }
+#doc-body.diagrams-view .diagram svg { max-width: 100%; height: auto; }
+@media (prefers-reduced-motion: reduce) { .diagram svg * { animation: none !important; } }
+
+.row.intent-split { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 4px; }
+.intent-split > span:first-child { font-weight: 600; }
+.intent-split .check { margin: 0; }
+.intent-split[hidden] { display: none; }
+.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.hint.warn { display: block; margin-top: 4px; color: var(--yellow); }
+.hint.warn[hidden] { display: none; }

package/public/transport.js

@@ -14,7 +14,8 @@ export const post = (url, body) =>
 
 /**
  * Open the event stream (`{ events: true }`) or a terminal (`{ agentId, kind }`).
- * Handlers: onOpen(), onMessage(msg), onClose({ code, reason }) when it ends for good.
+ * Handlers: onOpen(), onMessage(msg), onClose({ code, reason }) when it ends for good, and
+ * onInputLost(text) when typing could not be delivered (remote only).
  * Returns { send(msg), close() } where msg is { t: 'i', d } (input) or { t: 'r', cols, rows } (resize).
  */
 export function openStream({ events = false, agentId, kind = 'claude' }, h) {
@@ -43,16 +44,31 @@ export function openStream({ events = false, agentId, kind = 'claude' }, h) {
     }
   };
 
-  // Keystrokes: coalesced and sent strictly in order, one request at a time.
+  // Keystrokes: coalesced and sent strictly in order, one request at a time. A request that fails
+  // (a network blip, a phone waking up) is retried, not dropped: losing a line of a paste would run
+  // the rest without it.
   let queue = '';
   let inflight = false;
+  const deliver = async (d) => {
+    for (let attempt = 0; attempt < 6 && !closed; attempt++) {
+      try {
+        const res = await post(`/api/agents/${agentId}/term/input`, { d, kind });
+        // A refusal (signed out, terminal gone) won't change on a retry.
+        if (res.ok || (res.status >= 400 && res.status < 500 && res.status !== 408 && res.status !== 429)) return res.ok;
+      } catch {
+        // Offline for a moment; try again.
+      }
+      await new Promise((r) => setTimeout(r, 250 * 2 ** attempt));
+    }
+    return false;
+  };
   const pump = async () => {
     if (inflight || !queue) return;
     inflight = true;
     const d = queue;
     queue = '';
     try {
-      await post(`/api/agents/${agentId}/term/input`, { d, kind });
+      if (!(await deliver(d)) && !closed) h.onInputLost?.(d);
     } finally {
       inflight = false;
       if (queue) pump();

package/public/update.js

@@ -0,0 +1,88 @@
+// Updating from the app: a button in the top bar when a newer release is out, and "Update and
+// restart" in About. The daemon installs it (git checkout of the release tag, or npm install -g)
+// and restarts onto it; this page then waits for it to come back and reloads.
+
+export function initUpdate({ api, esc, toast, $ }) {
+  const remote = () => document.body.classList.contains('remote');
+  let state = null;
+
+  function show(s) {
+    state = s;
+    const btn = $('#update-btn');
+    const ready = s?.newer && !s.blocker && !s.updating;
+    btn.hidden = !ready;
+    if (ready) {
+      btn.textContent = `Update to ${s.latest}`;
+      btn.title = `Version ${s.latest} is out (you have ${s.current}). Installs it and restarts; running agents resume.`;
+    }
+    $('#about-auto').checked = s?.check !== false;
+    $('#about-install').hidden = !ready;
+  }
+
+  async function load() {
+    if (remote()) return;
+    try {
+      show(await api('GET', '/update'));
+    } catch {
+      // An older daemon has no /update.
+    }
+  }
+
+  async function waitForRestart(from) {
+    for (let i = 0; i < 300; i++) {
+      await new Promise((r) => setTimeout(r, 2000));
+      try {
+        const a = await api('GET', '/about');
+        if (a.daemon.pid !== from) return location.reload();
+      } catch {
+        // Down while it restarts.
+      }
+    }
+    toast('The daemon has not come back yet; check ~/.agentmanager/daemon.log', 8000);
+  }
+
+  async function install() {
+    if (!state?.newer) return;
+    if (!confirm(`Update to ${state.latest} and restart?\n\nRunning agents are closed and resume on the new version. This takes a minute or two with many agents.`)) return;
+    const before = (await api('GET', '/about')).daemon.pid;
+    $('#update-btn').disabled = $('#about-install').disabled = true;
+    toast(`Installing ${state.latest}…`, 60_000);
+    try {
+      const r = await api('POST', '/update');
+      if (r.upToDate) {
+        toast(`${r.current} is the newest release`);
+        return load();
+      }
+      toast(`Installed ${r.to}; restarting… (agents resume)`, 600_000);
+      await waitForRestart(before);
+    } catch (err) {
+      toast(`Update failed: ${err.message}`, 10_000);
+    } finally {
+      $('#update-btn').disabled = $('#about-install').disabled = false;
+    }
+  }
+
+  /** "Check for updates" in About: the daemon's check where it can update itself. */
+  async function check() {
+    if (remote()) return null;
+    const s = await api('POST', '/update/check');
+    show(s);
+    if (!s.newer) return `You have the newest release (${esc(s.current)}).`;
+    if (s.blocker) return `Version ${esc(s.latest)} is out. ${esc(s.blocker)}.`;
+    return `Version ${esc(s.latest)} is out (you have ${esc(s.current)}). <b>Update and restart</b> installs it; running agents resume.`;
+  }
+
+  $('#update-btn').onclick = install;
+  $('#about-install').onclick = install;
+  $('#about-auto').onchange = async (e) => {
+    try {
+      show(await api('PUT', '/update', { check: e.target.checked }));
+    } catch (err) {
+      toast(`Error: ${err.message}`, 5000);
+    }
+  };
+  load();
+  // The daemon checks twice a day; look at what it found now and then.
+  setInterval(load, 30 * 60_000);
+  return { load, check };
+}

package/src/brief.js

@@ -342,6 +342,75 @@ export function docPrompt(kind, { intent, status, digest, repo, briefMarkdown, a
   ].join('\n');
 }
 
+// ------------------------------------------------------------------ Diagrams
+
+const DIAGRAM_SET = [
+  ['The problem', 'a flowchart of the situation today and where it goes wrong (the root cause, from the analysis)'],
+  ['Architecture', 'a flowchart of the components and how they connect, grouped with subgraphs; mark the components this work adds or changes with class "changed"'],
+  ['Design', 'a classDiagram (or erDiagram for data) of the key modules, types or records and their relationships'],
+  ['Data flow', 'a flowchart LR of how data moves through the system, with the main path animated'],
+  ['Key interaction', 'a sequenceDiagram (with autonumber) of the most important exchange between components, services or the user'],
+  ['Plan', 'a flowchart of the delivery steps or a stateDiagram-v2 of the main lifecycle, whichever the work is about'],
+];
+
+/**
+ * Diagrams only: the problem and its solution drawn for a quick grasp, from the documents
+ * already written for this work (analysis, design, flow, plan) and the agent's live context.
+ */
+export function diagramsPrompt({ intent, status, digest, repo, briefMarkdown, documents, repoMap }) {
+  return [
+    "Draw diagrams that let a person grasp an AI coding agent's work at a glance: the problem and how it is being solved.",
+    'Diagrams only. No paragraphs, bullets, captions, notes or explanations outside the diagrams.',
+    '',
+    'Output Markdown in exactly this shape: a level-1 title "# Diagrams: <short name of the work>", then for each diagram a',
+    'level-2 heading with its name followed by one ```mermaid code block. Nothing else.',
+    '',
+    'The diagrams, in this order (leave one out only when the context has nothing for it):',
+    ...DIAGRAM_SET.map(([name, what], i) => `${i + 1}. "${name}": ${what}.`),
+    '',
+    'Rules:',
+    '- Valid Mermaid syntax. At most about 15 nodes per diagram; labels of five words or fewer; quote labels with punctuation, e.g. A["Parse (JSON)"]. No HTML in labels.',
+    '- Animate the main path in every flowchart: give its edges ids and animate them, e.g.',
+    '    A e1@--> B',
+    '    B e2@-->|"saves"| C',
+    '    e1@{ animate: true }',
+    '    e2@{ animate: true }',
+    '- In the architecture diagram, style what this work adds or changes: `classDef changed stroke-width:3px,stroke:#22c55e` then `class X,Y changed`.',
+    '- Use the real names of files, modules, services and data from the context. Prefer what the documents below say; do not invent components.',
+    '- Output only the Markdown.',
+    '',
+    contextBlock({ intent, status, digest, repo, briefMarkdown }).join('\n'),
+    '<documents_already_written>',
+    documents || '(none yet: draw from the context above)',
+    '</documents_already_written>',
+    '<repository_layout>',
+    repoMap || '(no repository)',
+    '</repository_layout>',
+  ].join('\n');
+}
+
+/** Keep only the title, the diagram headings and the Mermaid blocks of a reply. */
+export function diagramsOnly(markdown) {
+  const out = [];
+  let block = null;
+  for (const line of String(markdown ?? '').split('\n')) {
+    if (block) {
+      if (/^\s*```\s*$/.test(line)) {
+        if (block.length) out.push('```mermaid', ...block, '```', '');
+        block = null;
+      } else block.push(line);
+    } else if (/^\s*```\s*mermaid\s*$/i.test(line)) block = [];
+    else if (/^#{1,2} \S/.test(line)) out.push(line, '');
+  }
+  if (!out.some((l) => l === '```mermaid')) throw new Error('The reply had no diagrams');
+  // A heading left with no diagram under it says nothing.
+  return out
+    .filter((l, i) => !/^## /.test(l) || out.slice(i + 1).find((x) => x !== '') === '```mermaid')
+    .join('\n')
+    .replace(/\n{3,}/g, '\n\n')
+    .trim();
+}
+
 // ------------------------------------------------------------------ Human vs AI
 
 export const contextBlock = ({ intent, status, digest, repo, briefMarkdown }) => [