ai-agentmanager 1.11.1 → 1.13.0

package/public/built.js

@@ -0,0 +1,332 @@
+// The Built tab: agents made with the builder (agentkit agents, docs/agentkit.md). Each one is
+// developed in an agent session working in its folder: building one starts that session, and the
+// person keeps shaping the agent there. Here (and in a panel on that session) they review its
+// analysis, spec and tests, test it, run it here, open its chat, package and download it.
+import { attachBox } from '/attach.js';
+
+const STATUS = { designing: 'designing…', designed: 'designed', 'needs-fixing': 'needs fixing', testing: 'testing…', tested: 'tests pass', failing: 'tests fail', running: 'running' };
+
+const ago = (iso) => {
+  const s = Math.max(0, (Date.now() - Date.parse(iso)) / 1000);
+  return s < 60 ? 'just now' : s < 3600 ? `${Math.round(s / 60)} min ago` : s < 86400 ? `${Math.round(s / 3600)} h ago` : `${Math.round(s / 86400)} d ago`;
+};
+
+const sessionText = (s) => (!s ? 'no session' : s.attention ? 'session waiting for you' : s.busy ? 'session working' : s.running ? 'session idle' : 'session closed');
+const tagClass = (b) => (b.status === 'tested' ? 'open' : b.status === 'failing' || b.status === 'needs-fixing' ? 'fail' : '');
+const later = (a, b) => Boolean(a && b && Date.parse(a) > Date.parse(b) + 1000);
+
+/** `openSession(id)`: show an agent session (the agents view). `onPanel()`: a session's panel has new data. */
+export function initBuilt({ api, esc, toast, $, isOpen, setCount, reports = () => [], openSession = () => {}, onPanel = () => {} }) {
+  const view = $('#built-view');
+  const dlg = $('#built-dialog');
+  const body = $('#built-body');
+  let list = [];
+  let open = null; // the built agent shown in the dialog
+  let poll = null;
+
+  async function load() {
+    try {
+      list = await api('GET', '/builder');
+    } catch {
+      list = [];
+    }
+    setCount(list.length || '');
+    if (isOpen()) render();
+  }
+
+  function render() {
+    view.innerHTML = `<div class="built-head"><button class="small primary" data-bt="new">+ Build an agent</button><span class="hint">An agent for a task or workflow: it plans, acts, checks itself and keeps working in the background. Each is developed in its own agent session.</span></div>
+      ${list.length ? `<ul class="built-list">${list.map((b) => `<li data-bt-open="${esc(b.name)}"><div class="line1"><b>${esc(b.title ?? b.name)}</b>${b.running ? ' <span class="dot-run" title="Running">●</span>' : ''}<span class="spacer"></span>${b.session ? `<a href="#${esc(b.session.id)}" class="button small ghost" data-bt-session="${esc(b.session.id)}" title="Its session: where you shape it">Session${b.session.busy ? ' ●' : ''}</a>` : ''}<span class="tag ${tagClass(b)}">${esc(b.pending ?? STATUS[b.status] ?? b.status)}</span></div>
+        <div class="hint">${esc(b.name)} · ${esc(b.engine ?? '')} · ${sessionText(b.session)}${b.results?.total ? ` · tests ${b.results.passed}/${b.results.total}` : ''}${b.triggers.length ? ` · ${esc(b.triggers.join(', '))}` : ''}</div></li>`).join('')}</ul>` : '<p class="hint built-empty">No agents built yet.</p>'}
+      ${reporting()}`;
+  }
+
+  // ------------------------------------------------------------ agents reporting in (here or elsewhere)
+  function reporting() {
+    const rs = reports();
+    const head = `<div class="built-head reporting-head"><b>Reporting in</b><span class="hint">Agents running here or on other computers: their runs, cost and the tools they wait to have approved.</span><span class="spacer"></span><button class="small ghost" data-bt="connect">Connect one from elsewhere</button></div><div id="built-connect" ${connectHtml ? '' : 'hidden'}>${connectHtml ?? ''}</div>`;
+    if (!rs.length) return `${head}<p class="hint built-empty">None yet. Agents you start here report automatically.</p>`;
+    return `${head}<ul class="built-list reports">${rs.map((r) => `<li data-report="${esc(r.key)}">
+      <div class="line1"><span class="dot-run ${r.online ? '' : 'off'}" title="${r.online ? 'Online' : 'Not heard from'}">●</span> <b>${esc(r.title)}</b> <span class="hint">${esc(r.host)}</span><span class="spacer"></span>
+        ${r.chat && r.online ? `<a class="button small ghost" href="${esc(r.chat)}" target="_blank" rel="noopener">Chat ↗</a>` : ''}
+        <button class="small ghost" data-rp="forget" title="Remove it from this list (it shows up again when it reports)">Forget</button></div>
+      <div class="hint">${esc(r.engine)} · ${r.online ? (r.current ? `working on a run (${esc(r.current.source)})` : 'idle') : `last seen ${ago(r.lastSeen)}`} · ${r.totals.runs} run${r.totals.runs === 1 ? '' : 's'}${r.totals.failed ? `, ${r.totals.failed} failed` : ''}${r.totals.costUsd ? ` · $${r.totals.costUsd.toFixed(2)}` : ''}${r.triggers.length ? ` · ${esc(r.triggers.join(', '))}` : ''}</div>
+      ${r.pending.map((p) => `<div class="report-approval" data-ap="${esc(p.id)}"><b>Wants to run <code>${esc(p.tool)}</code></b> <span class="hint">${ago(p.at)}</span><pre>${esc(JSON.stringify(p.input, null, 2).slice(0, 1500))}</pre><button class="small primary" data-rp="approve">Approve</button> <button class="small" data-rp="deny">Deny</button></div>`).join('')}
+      ${r.runs.length ? `<details><summary class="hint">Recent runs</summary><ul class="built-runs">${r.runs.map((x) => `<li><span class="tag ${x.status === 'failed' ? 'fail' : x.status === 'done' ? 'open' : ''}">${esc(x.status)}</span> <span class="hint">${esc(x.source)} · ${x.at ? ago(x.at) : ''}${x.costUsd ? ` · $${x.costUsd.toFixed(3)}` : ''}${x.ms ? ` · ${Math.round(x.ms / 1000)}s` : ''}</span><div>${esc(x.result.slice(0, 400))}</div></li>`).join('')}</ul></details>` : ''}
+    </li>`).join('')}</ul>`;
+  }
+
+  let connectHtml = null; // the connection details, kept open across live re-renders
+  async function connect() {
+    const box = $('#built-connect');
+    if (connectHtml) return (connectHtml = null), (box.hidden = true);
+    try {
+      const c = await api('GET', '/agentkit/connect');
+      const lines = (url, cert) => [`AGENTKIT_REPORT_URL=${url}`, `AGENTKIT_REPORT_TOKEN=${c.token}`, ...(cert ? [`AGENTKIT_REPORT_CERT=${cert}`] : [])].join('\n');
+      box.innerHTML = `<p class="hint">Set these where the agent runs (in its environment, or in its service), then start it. It reports here and asks here for approvals.</p>
+        ${c.remote.length ? c.remote.map((u) => `<p><b>From another computer</b> <span class="hint">(over remote access)</span></p><pre class="code-area">${esc(lines(u.replace(/\/$/, ''), c.cert))}</pre>`).join('') : '<p class="hint">Turn on remote access (Settings) to connect agents on other computers.</p>'}
+        <p><b>On this computer</b></p><pre class="code-area">${esc(lines(c.local))}</pre>`;
+    } catch (err) {
+      box.innerHTML = `<p class="hint">${esc(err.message)}. Open AI Agent Manager on this computer to see the connection details.</p>`;
+    }
+    connectHtml = box.innerHTML;
+    box.hidden = false;
+  }
+
+  // ------------------------------------------------------------ build
+  const buildDlg = $('#build-dialog');
+  const files = attachBox({ slot: $('#build-attach'), form: $('#build-form'), paste: $('#build-form textarea'), esc, toast });
+  async function openBuild() {
+    const sel = $('#build-form').engine;
+    if (sel.options.length <= 1) {
+      const engines = await api('GET', '/engines').catch(() => []);
+      for (const e of engines.filter((x) => x.installed && x.id !== 'claude')) sel.append(Object.assign(document.createElement('option'), { value: e.id.startsWith('acp-') ? `acp:${e.id.slice(4)}` : e.id, textContent: e.label }));
+    }
+    $('#build-error').hidden = true;
+    buildDlg.showModal();
+    $('#build-form textarea').focus();
+  }
+  $('#build-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const f = e.target;
+    if (files.pending()) return toast('Still uploading the attached files');
+    const btn = f.querySelector('button[type=submit]');
+    btn.disabled = true;
+    btn.textContent = 'Starting its session…';
+    try {
+      const b = await api('POST', '/builder', { task: f.task.value, engine: f.engine.value, name: f.name.value.trim() || undefined, attachments: files.paths().length ? files.paths() : undefined });
+      buildDlg.close();
+      f.reset();
+      files.clear();
+      cache.set(b.name, b);
+      await load();
+      // Building happens in its session: go there.
+      if (b.session) openSession(b.session.id);
+      else show(b);
+    } catch (err) {
+      $('#build-error').textContent = err.message;
+      $('#build-error').hidden = false;
+    } finally {
+      btn.disabled = false;
+      btn.textContent = 'Start building';
+    }
+  });
+  $('#build-cancel').onclick = () => buildDlg.close();
+
+  // ------------------------------------------------------------ one agent
+  function show(b) {
+    open = b;
+    $('#built-title').textContent = b.title ?? b.name;
+    const a = b.analysis ?? {};
+    const li = (xs) => (xs?.length ? `<ul>${xs.map((x) => `<li>${esc(x)}</li>`).join('')}</ul>` : '<p class="hint">—</p>');
+    const r = b.results;
+    const failed = (r?.list ?? []).filter((t) => t.pass === false);
+    body.innerHTML = `
+      ${sessionBlock(b)}
+      <div class="built-actions">
+        <span class="tag ${tagClass(b)}">${esc(b.pending ?? STATUS[b.status] ?? b.status)}</span>
+        ${b.running ? `<span class="hint">running since ${new Date(b.running.since).toLocaleTimeString()}</span>${b.running.url ? ` <a href="${esc(b.running.url)}" target="_blank" rel="noopener">Open its chat ↗</a>` : ''}` : ''}
+        <span class="spacer"></span>
+        <button class="small" data-bt="test" ${b.pending || b.specError || b.status === 'designing' ? 'disabled' : ''} title="Run each test through the real engine and judge the results">${b.pending === 'testing' ? 'Testing…' : 'Run tests'}</button>
+        <button class="small ${b.running ? '' : 'primary'}" data-bt="${b.running ? 'stop' : 'start'}" ${b.specError || b.status === 'designing' ? 'disabled' : ''} title="${b.running ? 'Stop it' : 'Run it continuously on this computer: its triggers, chat page and API'}">${b.running ? 'Stop' : 'Start'}</button>
+        <a class="button small ghost" href="/api/builder/${esc(b.name)}/download" title="Its folder (agent.yaml, instructions, tests) to run anywhere with agentkit">Download folder</a>
+        <button class="small ghost" data-bt="delete">Delete</button>
+      </div>
+      <div class="built-exe"><b>Single executable</b> <span class="hint">one file that runs this agent anywhere, no Node or agentkit needed (its engine's CLI must be installed and signed in)</span>
+        <div class="built-exe-row"><select id="built-platform">${(b.platforms ?? []).map((p) => `<option value="${esc(p)}" ${p === b.host ? 'selected' : ''}>${esc(p)}${p === b.host ? ' (this computer)' : ''}</option>`).join('')}</select>
+        <button class="small" data-bt="package" ${b.pending || b.specError || b.status === 'designing' ? 'disabled' : ''}>${b.pending?.startsWith('packaging') ? 'Building… (a minute or two)' : 'Build executable'}</button>
+        ${Object.entries(b.executables ?? {}).map(([p, x]) => `<a class="button small ghost" href="/api/builder/${esc(b.name)}/executable/${esc(p)}" title="Built ${esc(new Date(x.at).toLocaleString())}${later(b.changedAt, x.at) ? ', before its latest change: build it again' : ''}">⬇ ${esc(p)} · ${Math.round(x.size / 1e6)} MB${later(b.changedAt, x.at) ? ' (older)' : ''}</a>`).join('')}</div>
+        ${b.packageError ? `<p class="error">${esc(b.packageError)}</p>` : ''}</div>
+      ${b.specError ? `<p class="error">${esc(b.specError)}</p>` : ''}
+      ${b.missingEnv.length ? `<p class="hint warn">Set these in the environment before running it: ${esc(b.missingEnv.join(', '))}</p>` : ''}
+      <details open><summary><b>Analysis</b></summary>${b.status === 'designing' && !a.problem ? '<p class="hint">Its session is working it out; this fills in as it writes the files.</p>' : ''}<p>${esc(a.problem ?? '')}</p><div class="row three"><div><b>Inputs</b>${li(a.inputs)}</div><div><b>Outputs</b>${li(a.outputs)}</div><div><b>Risks</b>${li(a.risks)}</div></div>
+        ${b.tools?.length ? `<p><b>Tools</b></p><ul>${b.tools.map((t) => `<li><code>${esc(t.name)}</code> ${esc(t.why)}</li>`).join('')}</ul>` : ''}</details>
+      <details ${r ? 'open' : ''}><summary><b>Tests</b> ${r?.total ? `<span class="hint">${r.passed}/${r.total} pass · ${new Date(r.at).toLocaleString()}</span>` : '<span class="hint">not run yet</span>'}</summary>
+        ${r?.error ? `<p class="error">${esc(r.error)}</p>` : ''}
+        ${r?.at && later(b.changedAt, r.at) ? '<p class="hint warn">The agent changed after these results; run the tests again.</p>' : ''}
+        ${failed.length && b.session ? `<button class="small" data-bt="fix">Ask its session to fix the ${failed.length} failing test${failed.length > 1 ? 's' : ''}</button>` : ''}
+        <ol class="built-tests">${(r?.list?.length ? r.list : b.tests ?? []).map((t) => `<li class="${t.pass === true ? 'pass' : t.pass === false ? 'fail' : ''}"><div><b>${t.pass === true ? '✓' : t.pass === false ? '✗' : '·'}</b> ${esc(t.input)}</div><div class="hint">Expect: ${esc(t.expect)}</div>${t.why ? `<div class="hint">${esc(t.why)}</div>` : ''}${t.files?.length ? `<div class="hint">Wrote: ${t.files.map((f) => `<code>${esc(f)}</code>`).join(', ')}</div>` : ''}${t.result ? `<details><summary class="hint">Result</summary><pre>${esc(t.result)}</pre></details>` : ''}</li>`).join('')}</ol></details>
+      <details><summary><b>agent.yaml</b> and instructions</summary>
+        <textarea id="built-yaml" class="code-area" rows="16" spellcheck="false">${esc(b.yaml)}</textarea>
+        <textarea id="built-instr" class="code-area" rows="10" spellcheck="false">${esc(b.instructionsText)}</textarea>
+        <div class="dialog-actions"><button class="small primary" data-bt="save">Save</button></div></details>
+      ${b.runs.length ? `<details><summary><b>Recent runs</b></summary><ul class="built-runs">${b.runs.map((x) => `<li><span class="tag">${esc(x.status)}</span> <span class="hint">${esc(x.source ?? '')} · ${x.startedAt ? new Date(x.startedAt).toLocaleString() : ''}</span><div>${esc(String(x.result ?? '').slice(0, 300))}</div></li>`).join('')}</ul></details>` : ''}
+      <p class="hint">Task: ${esc(b.task ?? '')}</p>`;
+    if (!dlg.open) dlg.showModal();
+    clearInterval(poll);
+    if (b.pending || b.status === 'designing') poll = setInterval(refresh, 3000);
+  }
+
+  // Where the agent is developed: its session, and a box to ask it for a change.
+  function sessionBlock(b) {
+    if (!b.session)
+      return `<div class="built-session"><b>No session</b> <span class="hint">Open an agent session in its folder to keep shaping it with you.</span><span class="spacer"></span><button class="small primary" data-bt="session-new">Open a session for it</button></div>`;
+    return `<div class="built-session"><div class="line1"><b>Developed in its session</b> <span class="hint">${sessionText(b.session)}</span><span class="spacer"></span><a href="#${esc(b.session.id)}" class="button small primary" data-bt-session="${esc(b.session.id)}">Open session</a></div>
+      <div class="built-change"><textarea id="built-change" rows="2" placeholder="Ask its session for a change: “also post a summary to #support every evening”, “never reassign tickets”…"></textarea><button class="small" data-bt="change">Send</button></div></div>`;
+  }
+
+  function failuresText(b) {
+    const failed = (b.results?.list ?? []).filter((t) => t.pass === false);
+    return `These tests failed. Change the agent so they pass (or fix a test if its expectation is wrong), check it, and tell me what you changed.\n\n${failed.map((t, i) => `${i + 1}. Input: ${t.input}\n   Expected: ${t.expect}\n   Judge: ${t.why}\n   Result: ${String(t.result ?? '').slice(0, 600)}`).join('\n\n')}`;
+  }
+
+  async function refresh() {
+    if (!open || !dlg.open) return clearInterval(poll);
+    try {
+      const b = await api('GET', `/builder/${open.name}`);
+      cache.set(b.name, b);
+      onPanel();
+      const typing = document.activeElement?.closest?.('#built-body textarea');
+      if (!typing && JSON.stringify(b) !== JSON.stringify(open)) show(b);
+      if (!b.pending && b.status !== 'designing') clearInterval(poll), load();
+    } catch {}
+  }
+
+  async function act(what) {
+    const name = open?.name;
+    try {
+      if (what === 'test') show(await api('POST', `/builder/${name}/test`));
+      else if (what === 'package') show(await api('POST', `/builder/${name}/package`, { platform: $('#built-platform').value }));
+      else if (what === 'start') {
+        show(await api('POST', `/builder/${name}/start`));
+        setTimeout(refresh, 1500);
+      } else if (what === 'stop') show(await api('POST', `/builder/${name}/stop`));
+      else if (what === 'change' || what === 'fix') {
+        const text = what === 'fix' ? failuresText(open) : $('#built-change').value.trim();
+        if (!text) return toast('Say what to change');
+        show(await api('POST', `/builder/${name}/change`, { text }));
+        toast('Sent to its session');
+      } else if (what === 'session-new') {
+        const b = await api('POST', `/builder/${name}/change`, {});
+        dlg.close();
+        if (b.session) openSession(b.session.id);
+      }
+      else if (what === 'save') {
+        show(await api('PUT', `/builder/${name}`, { yaml: $('#built-yaml').value, instructions: $('#built-instr').value }));
+        toast('Saved');
+      } else if (what === 'delete') {
+        if (!confirm(`Delete ${name} and its folder?`)) return;
+        await api('DELETE', `/builder/${name}`);
+        dlg.close();
+      }
+      load();
+    } catch (err) {
+      toast(`Error: ${err.message}`, 6000);
+    }
+  }
+
+  view.addEventListener('click', async (e) => {
+    if (e.target.closest('[data-bt="new"]')) return openBuild();
+    if (e.target.closest('[data-bt="connect"]')) return connect();
+    const rp = e.target.closest('[data-rp]');
+    if (rp) {
+      const key = rp.closest('[data-report]').dataset.report;
+      try {
+        if (rp.dataset.rp === 'forget') await api('DELETE', `/agentkit/agents/${encodeURIComponent(key)}`);
+        else {
+          rp.disabled = true;
+          await api('POST', `/agentkit/agents/${encodeURIComponent(key)}/approvals/${encodeURIComponent(rp.closest('[data-ap]').dataset.ap)}`, { allow: rp.dataset.rp === 'approve' });
+          toast(rp.dataset.rp === 'approve' ? 'Approved; the agent goes on' : 'Declined');
+        }
+      } catch (err) {
+        toast(`Error: ${err.message}`, 6000);
+      }
+      return;
+    }
+    const ses = e.target.closest('[data-bt-session]');
+    if (ses) return e.preventDefault(), openSession(ses.dataset.btSession);
+    const li = e.target.closest('[data-bt-open]');
+    if (li) show(await api('GET', `/builder/${li.dataset.btOpen}`));
+  });
+  body.addEventListener('click', (e) => {
+    const ses = e.target.closest('[data-bt-session]');
+    if (ses) return e.preventDefault(), dlg.close(), openSession(ses.dataset.btSession);
+    const b = e.target.closest('[data-bt]');
+    if (b) act(b.dataset.bt);
+  });
+  $('#built-close').onclick = () => (clearInterval(poll), dlg.close());
+
+  // ------------------------------------------------------------ the panel on its session
+  const cache = new Map(); // name -> its latest view (or { missing: true })
+  const fetching = new Set();
+  async function fetchOne(name) {
+    if (fetching.has(name)) return;
+    fetching.add(name);
+    try {
+      cache.set(name, await api('GET', `/builder/${encodeURIComponent(name)}`));
+    } catch (err) {
+      cache.set(name, /No built agent|Unknown agent/.test(err.message) ? { missing: true, name } : { error: err.message, name });
+    } finally {
+      fetching.delete(name);
+      onPanel();
+    }
+  }
+
+  /** The panel shown on a session that builds an agent (agent `a`, with a.builds). */
+  function panel(a) {
+    const name = a.builds.name;
+    const b = cache.get(name);
+    if (!b) {
+      fetchOne(name);
+      return `<div class="built-panel"><b>⚙ Builds the agent ${esc(name)}</b> <span class="hint">loading…</span></div>`;
+    }
+    if (b.error) return `<div class="built-panel"><b>⚙ Builds the agent ${esc(name)}</b> <span class="hint">· ${esc(b.error)}</span></div>`;
+    if (b.missing) return `<div class="built-panel"><b>⚙ Built the agent ${esc(name)}</b> <span class="hint">· deleted from the Built tab</span></div>`;
+    const r = b.results;
+    const failed = (r?.list ?? []).filter((t) => t.pass === false);
+    const stale = r?.at && later(b.changedAt, r.at);
+    return `<div class="built-panel" data-bp-name="${esc(name)}">
+      <div class="line1"><b>⚙ ${esc(b.title ?? name)}</b> <span class="tag ${tagClass(b)}">${esc(b.pending ?? STATUS[b.status] ?? b.status)}</span>
+        <span class="hint">${esc(b.engine ?? '')}${b.triggers.length ? ` · ${esc(b.triggers.join(', '))}` : ''}${r?.total ? ` · tests ${r.passed}/${r.total}${stale ? ' (before the latest change)' : ''}` : b.tests.length ? ` · ${b.tests.length} tests, not run` : ''}${b.running ? ' · running here' : ''}</span>
+        <span class="spacer"></span>
+        <button class="small" data-bp="test" ${b.pending || b.specError || b.status === 'designing' ? 'disabled' : ''} title="Run each test through the real engine and judge the results">${b.pending === 'testing' ? 'Testing…' : 'Run tests'}</button>
+        <button class="small" data-bp="${b.running ? 'stop' : 'start'}" ${b.specError || b.status === 'designing' ? 'disabled' : ''} title="${b.running ? 'Stop it' : 'Run it continuously on this computer: its triggers, chat page and API'}">${b.running ? 'Stop' : 'Start'}</button>
+        ${b.running?.url ? `<a class="button small ghost" href="${esc(b.running.url)}" target="_blank" rel="noopener">Chat ↗</a>` : ''}
+        <button class="small ghost" data-bp="open" title="Analysis, spec, tests, executables, downloads">Details</button></div>
+      ${b.specError ? `<p class="error">${esc(b.specError)}</p>` : ''}
+      ${b.missingEnv.length ? `<p class="hint warn">Needs in the environment before it runs: ${esc(b.missingEnv.join(', '))}</p>` : ''}
+      ${b.description ? `<div class="hint">${esc(b.description)}</div>` : ''}
+      ${failed.length && !stale ? `<div class="hint">Failing: ${failed.map((t) => esc(t.input.slice(0, 60))).join(' · ')} <button class="small" data-bp="fix">Ask this session to fix them</button></div>` : ''}
+    </div>`;
+  }
+
+  document.addEventListener('click', async (e) => {
+    const el = e.target.closest('[data-bp]');
+    if (!el) return;
+    const name = el.closest('[data-bp-name]').dataset.bpName;
+    try {
+      if (el.dataset.bp === 'open') return show(await api('GET', `/builder/${name}`));
+      if (el.dataset.bp === 'fix') {
+        await api('POST', `/builder/${name}/change`, { text: failuresText(cache.get(name)) });
+        return toast('Sent to this session');
+      }
+      el.disabled = true;
+      cache.set(name, await api('POST', `/builder/${name}/${el.dataset.bp}`));
+      onPanel();
+      // Tests and starting finish in the background; follow them.
+      const follow = setInterval(async () => {
+        await fetchOne(name);
+        const b = cache.get(name);
+        if (!b || b.missing || (!b.pending && (el.dataset.bp !== 'start' || b.running?.url || !b.running))) clearInterval(follow), load();
+      }, 2000);
+    } catch (err) {
+      toast(`Error: ${err.message}`, 6000);
+    }
+  });
+
+  // Its session changed (it edits the files as it goes): fetch the agent again, a moment later.
+  const timers = new Map();
+  function sessionChanged(a) {
+    const name = a.builds?.name;
+    if (!name) return;
+    clearTimeout(timers.get(name));
+    timers.set(name, setTimeout(() => {
+      fetchOne(name);
+      if (open?.name === name && dlg.open) refresh();
+      if (isOpen()) load();
+    }, 1000));
+  }
+
+  load();
+  return { load, render, panel, sessionChanged, openAgent: async (name) => show(await api('GET', `/builder/${name}`)) };
+}

package/public/index.html

@@ -64,6 +64,7 @@
           <button class="side-tab" data-tab="inbox" role="tab" title="Everything waiting on you: prompts, questions, stuck agents, overlaps">Inbox <span id="inbox-count" class="badge"></span></button>
           <button class="side-tab" data-tab="backlog" role="tab">Backlog <span id="backlog-count" class="badge"></span></button>
           <button class="side-tab" data-tab="land" role="tab" title="Agents' open pull requests: what each needs to get merged">Land <span id="land-count" class="badge"></span></button>
+          <button class="side-tab" data-tab="built" role="tab" title="Agents you build for a task or workflow: they plan, act, check themselves and run in the background">Built <span id="built-count" class="badge"></span></button>
         </div>
         <div id="agents-view">
           <div class="counts" id="counts"></div>
@@ -79,6 +80,7 @@
         <div id="backlog-view" hidden></div>
         <div id="inbox-view" hidden></div>
         <div id="land-view" hidden></div>
+        <div id="built-view" hidden></div>
         <div id="empty" class="empty" hidden>
           <p>No agents yet.</p>
           <p>Add one or more intents and a repo or folder to get started.</p>
@@ -377,6 +379,26 @@
       </form>
     </dialog>
 
+    <dialog id="build-dialog">
+      <form id="build-form" method="dialog">
+        <h2>Build an agent</h2>
+        <p class="hint">Describe the task or workflow it takes over: what comes in, what it should do, what it must never do. An agent session works it out with you in the agent's own folder (analysis, spec, instructions, test cases); you keep shaping it there, then test, run and package it.</p>
+        <label>Task or workflow
+          <textarea name="task" rows="8" required placeholder="Every morning, look at new support tickets in Jira, label each by product area, route it to the right team, and draft a first reply for a person to send. Never close or reply to tickets on its own."></textarea>
+        </label>
+        <div id="build-attach"></div>
+        <div class="row"><label>Engine it runs on <select name="engine"><option value="claude">Claude Code</option></select></label>
+        <label>Name <input name="name" placeholder="from the task" pattern="[a-z][a-z0-9-]{1,40}" title="lowercase letters, digits and dashes"></label></div>
+        <p id="build-error" class="error" hidden></p>
+        <div class="dialog-actions"><button type="button" id="build-cancel" class="ghost">Cancel</button><button type="submit" class="primary">Start building</button></div>
+      </form>
+    </dialog>
+
+    <dialog id="built-dialog" class="doc-dialog">
+      <div class="doc-head"><h2 id="built-title"></h2><span class="spacer"></span><button type="button" id="built-close" class="small ghost">Close</button></div>
+      <div id="built-body" class="built-body"></div>
+    </dialog>
+
     <dialog id="doc-dialog" class="doc-dialog">
       <div class="doc-head">
         <h2 id="doc-title"></h2>

package/public/style.css

@@ -497,6 +497,7 @@ dialog::backdrop { background: rgba(0, 0, 0, .45); }
 .need-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
 .need-kind { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
 .need.prompt .need-kind { color: var(--red); }
+.need.approval .need-kind { color: var(--red); }
 .need.question .need-kind { color: var(--accent); }
 .need.stuck .need-kind { color: var(--yellow); }
 .need.conflict .need-kind { color: #8e59ff; }
@@ -949,3 +950,32 @@ body.remote .settings-links .local-only { display: none; }
 .clip-box { margin: 10px 12px; width: calc(100% - 24px); font: 13px var(--mono, ui-monospace, monospace); }
 .clip-foot { display: flex; align-items: center; gap: 8px; padding: 0 12px 12px; }
 .clip-foot .hint { flex: 1; }
+
+/* Built agents. */
+.built-head { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
+.built-list { list-style: none; margin: 0; padding: 0; }
+.built-list li { padding: 9px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
+.built-list li:hover { background: var(--panel-2); }
+.built-list .line1 { display: flex; align-items: center; gap: 6px; }
+.built-empty { padding: 0 12px; }
+.dot-run { color: var(--green); font-size: 10px; }
+.dot-run.off { color: var(--muted); }
+.reporting-head { margin-top: 18px; }
+.report-approval { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--yellow); border-radius: 8px; }
+.report-approval pre, .need-input { font-size: 12px; white-space: pre-wrap; max-height: 160px; overflow: auto; margin: 6px 0; }
+#built-connect { padding: 0 12px; } #built-connect pre { white-space: pre-wrap; word-break: break-all; padding: 8px; border: 1px solid var(--border); border-radius: 6px; }
+.built-body { padding: 0 4px 12px; display: flex; flex-direction: column; gap: 10px; }
+.built-body details > summary { cursor: pointer; padding: 4px 0; }
+.built-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.built-exe { margin: 10px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
+.built-session, .built-panel { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel, transparent); }
+.built-session .line1, .built-panel .line1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.built-panel { margin: 10px 0; }
+.built-panel p { margin: 6px 0 0; }
+.built-change { display: flex; gap: 6px; margin-top: 6px; align-items: flex-end; }
+.built-change textarea { flex: 1; min-width: 0; }
+.built-exe-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
+.built-tests li { margin-bottom: 8px; } .built-tests li.pass b { color: var(--green); } .built-tests li.fail b { color: var(--red); }
+.built-tests pre, .built-runs div { white-space: pre-wrap; font-size: 12.5px; }
+.code-area { width: 100%; font: 12.5px/1.45 var(--mono); margin-top: 6px; }
+.built-runs { list-style: none; padding: 0; } .built-runs li { padding: 6px 0; border-bottom: 1px solid var(--border); }

package/src/agentkit/agent.js

@@ -0,0 +1,171 @@
+// The agent at work: each input becomes a run of plan → act → check (→ act again on what's left)
+// → reflect, through the engine (engines.js), one run at a time. Runs are logged as JSONL; memory
+// carries lessons between runs; a conversation (a chat, an A2A context) keeps its engine session.
+import crypto from 'node:crypto';
+import { EventEmitter } from 'node:events';
+import fs from 'node:fs';
+import path from 'node:path';
+import { Approvals } from './approvals.js';
+import { agentPaths } from './spec.js';
+import { APPROVER, approverServer, turn, writeMcpConfig } from './engines.js';
+
+const now = () => new Date().toISOString();
+const readJson = (f, d) => {
+  try {
+    return JSON.parse(fs.readFileSync(f, 'utf8'));
+  } catch {
+    return d;
+  }
+};
+
+/** The check step's verdict, from a reply that should hold {"done": …, "remaining": …}. */
+export function verdictOf(text) {
+  const m = /\{[\s\S]*\}/.exec(String(text ?? ''));
+  try {
+    const j = JSON.parse(m?.[0] ?? '');
+    return { done: j.done === true, remaining: String(j.remaining ?? '').trim() };
+  } catch {
+    // No JSON: read "done" / "not done" in plain words, else assume done (don't loop on noise).
+    return { done: !/\bnot (yet )?(done|met|complete)\b/i.test(String(text)), remaining: '' };
+  }
+}
+
+export class Agent extends EventEmitter {
+  /** `approvals`: 'ask' (a person decides approval tools, where the engine can ask) or 'deny'. */
+  constructor(spec, { env = process.env, engineTurn = turn, approvals = 'ask' } = {}) {
+    super();
+    this.spec = spec;
+    this.env = env;
+    this.engineTurn = engineTurn;
+    this.paths = agentPaths(spec);
+    fs.mkdirSync(this.paths.runs, { recursive: true });
+    this.mcpFile = writeMcpConfig(spec, this.paths.mcp);
+    this.approvals = new Approvals(spec, { timeoutMs: spec.approveTimeoutMs ?? 30 * 60_000 });
+    this.approvals.on('change', () => this.emit('approvals', this.approvals.pending()));
+    // Only Claude can ask mid-run (the others get approval tools taken away instead).
+    this.asks = approvals === 'ask' && spec.engine === 'claude' && spec.approve.length > 0;
+    this.approverReady = false;
+    this.sessions = readJson(this.paths.sessions, {});
+    this.queue = Promise.resolve();
+    this.current = null;
+  }
+
+  memory() {
+    try {
+      return fs.readFileSync(this.paths.memory, 'utf8').trim();
+    } catch {
+      return '';
+    }
+  }
+
+  system() {
+    const s = this.spec;
+    return [
+      `You are "${s.title}", an autonomous agent that works on its own, without a person watching.`,
+      `Your goal:\n${s.goal}`,
+      s.instructions ? `How to do the job:\n${s.instructions}` : '',
+      s.memory && this.memory() ? `What you learned in earlier runs (keep using it):\n${this.memory().slice(-6000)}` : '',
+      'Work in your folder with your tools. Never invent results: if you could not do something, say so plainly.',
+    ]
+      .filter(Boolean)
+      .join('\n\n');
+  }
+
+  /** Queue a run; resolves with its result. `conversation` continues an engine session. */
+  run(input, { source = 'api', conversation = null } = {}) {
+    const job = this.queue.then(() => this.doRun(String(input ?? ''), { source, conversation }));
+    this.queue = job.catch(() => {});
+    return job;
+  }
+
+  async doRun(input, { source, conversation }) {
+    const id = `${Date.now().toString(36)}-${crypto.randomBytes(3).toString('hex')}`;
+    const file = path.join(this.paths.runs, `${id}.jsonl`);
+    const t0 = Date.now();
+    let cost = 0;
+    const log = (rec) => {
+      const r = { t: now(), ...rec };
+      fs.appendFileSync(file, JSON.stringify(r) + '\n');
+      this.emit('step', { run: id, ...r });
+    };
+    this.current = { id, source, startedAt: now() };
+    log({ type: 'start', input, source, conversation });
+    let session = conversation ? this.sessions[conversation] ?? null : null;
+    if (this.asks && !this.approverReady) {
+      const url = await this.approvals.address();
+      this.mcpFile = writeMcpConfig(this.spec, this.paths.mcp, { [APPROVER]: approverServer({ url, token: this.approvals.token }) });
+      this.approverReady = true;
+    }
+    this.approvals.run = id;
+    const ask = async (step, prompt) => {
+      const res = await this.engineTurn(this.spec, { prompt, system: this.system(), session, mcpFile: this.mcpFile, approver: this.asks, env: this.env });
+      session = res.session ?? session;
+      if (res.costUsd) cost += res.costUsd;
+      log({ type: step, text: res.text });
+      if (this.spec.loop.budgetUsd && cost > this.spec.loop.budgetUsd) throw new Error(`Over the run budget ($${cost.toFixed(2)} of $${this.spec.loop.budgetUsd})`);
+      return res.text;
+    };
+    let result = '';
+    let status = 'done';
+    try {
+      // Someone asked (chat, API, A2A, ACP, MCP, the command line), or a trigger fired ("every 10m", …).
+      const from = ['chat', 'api', 'a2a', 'acp', 'mcp', 'cli'].includes(source) ? 'a request' : `a trigger (${source})`;
+      // The goal goes in every step, not only the system prompt: the engine's own framing ("a coding
+      // agent") must not turn an input into a different job than this agent's.
+      const goal = `Your goal (this is your whole job): ${this.spec.goal}`;
+      const given = `New input, from ${from}:\n${input || '(none: do your scheduled work)'}`;
+      if (this.spec.loop.plan) await ask('plan', `${goal}\n\n${given}\n\nWrite a short numbered plan to achieve your goal for this input. Treat the input as material for your goal, not as a new assignment. Don't act yet.`);
+      result = await ask('act', this.spec.loop.plan ? `Carry out the plan now. ${goal}\nWhen you are done, reply with the result your goal calls for.` : `${goal}\n\n${given}\n\nTreat the input as material for your goal, not as a new assignment. Do what your goal calls for and reply with the result.`);
+      for (let step = 1; this.spec.loop.check && step < this.spec.loop.maxSteps; step++) {
+        const v = verdictOf(await ask('check', `Check your last result against your goal. ${goal}\nReply with JSON only: {"done": true|false, "remaining": "<what is still missing for the goal, if anything>"}.`));
+        if (v.done) break;
+        result = await ask('act', `Not done yet. Continue with what is left: ${v.remaining || 'finish the remaining work'}. Then reply with the full result.`);
+        if (step === this.spec.loop.maxSteps - 1) status = 'partial';
+      }
+      if (this.spec.memory) {
+        const lesson = (await ask('reflect', 'In at most two short bullet points, what should you remember for next time (about this kind of input, the tools, or the people)? Reply "nothing" if there is nothing new.')).trim();
+        if (lesson && !/^nothing\.?$/i.test(lesson)) fs.appendFileSync(this.paths.memory, `\n## ${now().slice(0, 10)}\n${lesson}\n`);
+      }
+    } catch (err) {
+      status = 'failed';
+      result = result || `The run failed: ${err.message}`;
+      log({ type: 'error', text: err.message });
+    }
+    if (conversation && session) {
+      this.sessions[conversation] = session;
+      fs.writeFileSync(this.paths.sessions, JSON.stringify(this.sessions, null, 2));
+    }
+    const summary = { id, status, result, source, conversation, costUsd: cost ? Math.round(cost * 1e6) / 1e6 : null, ms: Date.now() - t0 };
+    log({ type: 'end', ...summary });
+    this.current = null;
+    this.approvals.run = null;
+    this.emit('run', summary);
+    return summary;
+  }
+
+  close() {
+    this.approvals.close();
+  }
+
+  /** Recent runs, newest first: id, status, source, start time, result (from each log). */
+  runs(limit = 50) {
+    let names = [];
+    try {
+      names = fs.readdirSync(this.paths.runs).filter((n) => n.endsWith('.jsonl')).sort().reverse().slice(0, limit);
+    } catch {}
+    return names.map((n) => this.runLog(n.slice(0, -6))).filter(Boolean).map((steps) => {
+      const start = steps.find((s) => s.type === 'start');
+      const end = steps.find((s) => s.type === 'end');
+      return { id: start?.id ?? end?.id, startedAt: start?.t, source: start?.source, input: start?.input, status: end?.status ?? 'running', result: end?.result ?? null, costUsd: end?.costUsd ?? null };
+    }).map((r, i) => ({ ...r, id: r.id ?? names[i].slice(0, -6) }));
+  }
+
+  runLog(id) {
+    if (!/^[\w-]+$/.test(id)) return null;
+    try {
+      return fs.readFileSync(path.join(this.paths.runs, `${id}.jsonl`), 'utf8').trim().split('\n').map((l) => JSON.parse(l));
+    } catch {
+      return null;
+    }
+  }
+}