ai-agentmanager 1.1.0 → 1.3.0

package/public/index.html

@@ -22,6 +22,8 @@
       </div>
       <div class="top-actions">
         <input id="filter" type="search" placeholder="Filter agents" aria-label="Filter agents" />
+        <button id="assistant-btn" title="An always-on session that finds new work and starts agents for it">Assistant <span id="assistant-dot" class="assistant-dot" hidden></span></button>
+        <button id="spend-btn" title="Results across agents (merge rate, time to PR, cost per merged PR), what they cost, and spending limits">Results <span id="spend-today" class="spend-today"></span></button>
         <button id="cleanup-btn" title="Close agents idle for a while, and delete old closed ones">Clean up</button>
         <button id="alerts-btn" class="local-only" title="Slack alerts when an agent needs you">Alerts</button>
         <button id="remote-btn" class="local-only" title="Open AI Agent Manager from your phone">Remote access</button>
@@ -36,6 +38,7 @@
           <button class="side-tab active" data-tab="agents" role="tab">Agents</button>
           <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>
         </div>
         <div id="agents-view">
           <div class="counts" id="counts"></div>
@@ -50,6 +53,7 @@
         </div>
         <div id="backlog-view" hidden></div>
         <div id="inbox-view" hidden></div>
+        <div id="land-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>
@@ -268,6 +272,8 @@
         </label>
         <p id="new-error" class="error" hidden></p>
         <div class="dialog-actions">
+          <button type="button" id="new-playbook" class="ghost" title="Keep this request to run again, in several projects or on a schedule">Save as playbook…</button>
+          <span class="spacer"></span>
           <button type="button" id="new-cancel" class="ghost">Cancel</button>
           <button type="submit" class="primary">Create agents</button>
         </div>
@@ -354,6 +360,15 @@
       <div id="team-body" class="race-body team-body"></div>
     </dialog>
 
+    <dialog id="review-dialog" class="doc-dialog review-dialog">
+      <div class="doc-head">
+        <h2 id="review-title">Review</h2>
+        <span class="spacer"></span>
+        <button type="button" id="review-close" class="small ghost">Close</button>
+      </div>
+      <div id="review-body" class="review-body"></div>
+    </dialog>
+
     <dialog id="race-dialog" class="doc-dialog">
       <div class="doc-head">
         <h2 id="race-title">Race</h2>
@@ -383,6 +398,8 @@
           <label class="check"><input type="checkbox" name="ev_stuck" /> seems stuck (same failure, undoing its edits, no progress)</label>
           <label class="check"><input type="checkbox" name="ev_conflict" /> changes the same files as another agent</label>
           <label class="check"><input type="checkbox" name="ev_question" /> asks a question in the inbox</label>
+          <label class="check"><input type="checkbox" name="ev_assistant" /> is started for new work (by the assistant, a GitHub label or a webhook)</label>
+          <label class="check"><input type="checkbox" name="ev_budget" /> nears or reaches its budget, or today's spend reaches the daily limit</label>
           <label class="check"><input type="checkbox" name="ev_waiting" /> finished its turn and is idle after <input name="waitingDelaySec" type="number" min="0" class="num" />s</label>
           <label class="check"><input type="checkbox" name="skipWhenWatching" /> not while I have its terminal open</label>
           <label class="check"><input type="checkbox" name="includeIntent" /> include the intent text in the message</label>
@@ -399,6 +416,187 @@
       </form>
     </dialog>
 
+    <dialog id="edit-dialog">
+      <form id="edit-form" method="dialog" class="alerts-body">
+        <h2>Edit agent</h2>
+        <label>Name <input name="name" required maxlength="80" /></label>
+        <label>Request <span class="hint">what the agent was asked to do</span>
+          <textarea name="intent" rows="4"></textarea>
+        </label>
+        <label class="check" id="edit-tell-row"><input type="checkbox" name="tell" /> Also tell the agent about the changed request</label>
+        <label id="edit-project-row">Project
+          <select name="project"></select>
+        </label>
+        <label id="edit-newproject-row" hidden>New project name <input name="newProject" maxlength="60" /></label>
+        <div class="row three">
+          <label>Priority
+            <select name="priority"><option value="0">P0 urgent</option><option value="1">P1 high</option><option value="2">P2 normal</option><option value="3">P3 low</option></select>
+          </label>
+          <label>Permission mode <select name="permissionMode"></select></label>
+          <label>Model <input name="model" placeholder="as configured" /></label>
+        </div>
+        <label>Budget <span class="hint">US dollars; empty for the default limit</span><input name="budgetUsd" type="number" min="0.01" step="0.01" placeholder="default" /></label>
+        <p class="hint" id="edit-hint">Moving changes only where the agent is listed; its code stays in its own repo and branch. Permission mode and model apply from its next launch.</p>
+        <p id="edit-error" class="error" hidden></p>
+        <div class="dialog-actions">
+          <span class="spacer"></span>
+          <button type="button" id="edit-close" class="ghost">Cancel</button>
+          <button class="primary">Save</button>
+        </div>
+      </form>
+    </dialog>
+
+    <dialog id="assistant-dialog">
+      <form id="assistant-form" method="dialog" class="alerts-body">
+        <h2>Assistant</h2>
+        <p class="hint">An always-on Claude session that works on your behalf. Every few minutes it checks for new work with its own Jira, GitHub and Slack tools, and starts an agent for each new item, or passes news to the agent already on it. It never merges, approves, comments or sends messages as you.</p>
+        <div id="assistant-status" class="assistant-status"></div>
+        <fieldset>
+          <legend>Watch</legend>
+          <label class="check"><input type="checkbox" name="src_jira" /> Jira issues newly assigned to me</label>
+          <label class="check"><input type="checkbox" name="src_comments" /> New comments and mentions on my Jira issues (passed to the agent on it)</label>
+          <label class="check"><input type="checkbox" name="src_reviews" /> GitHub pull requests waiting for my review</label>
+          <label class="check"><input type="checkbox" name="src_ci" /> Failing checks on my open pull requests</label>
+          <label class="check"><input type="checkbox" name="src_slack" /> Slack messages to me that ask for work</label>
+          <label class="check"><input type="checkbox" name="src_linear" /> Linear issues newly assigned to me</label>
+        </fieldset>
+        <div class="row three">
+          <label>Check every <span class="hint">minutes</span><input name="everyMin" type="number" min="1" /></label>
+          <label>New agents a day <span class="hint">at most</span><input name="maxPerDay" type="number" min="0" /></label>
+          <label>Running at once <span class="hint">at most</span><input name="maxRunning" type="number" min="0" /></label>
+        </div>
+        <label>Notes for the assistant <span class="hint">e.g. "Jira project OPS is the @cc repo; skip issues labeled design"</span>
+          <textarea name="notes" rows="3"></textarea>
+        </label>
+        <div id="assistant-activity" class="assistant-activity"></div>
+        <p id="assistant-error" class="error" hidden></p>
+        <div class="dialog-actions">
+          <button type="button" id="assistant-start" class="primary">Start</button>
+          <button type="button" id="assistant-check">Check now</button>
+          <button type="button" id="assistant-pause">Pause</button>
+          <button type="button" id="assistant-open" class="ghost">Open its session</button>
+          <button type="button" id="triggers-open" class="ghost" title="Start agents from GitHub labels, /agent PR comments and a webhook, with no session watching">Triggers…</button>
+          <span class="spacer"></span>
+          <button type="button" id="assistant-close" class="ghost">Close</button>
+          <button id="assistant-save">Save</button>
+        </div>
+      </form>
+    </dialog>
+
+    <dialog id="triggers-dialog">
+      <form id="triggers-form" method="dialog" class="alerts-body">
+        <h2>Triggers</h2>
+        <p class="hint">Start agents from where the work is, with no model watching (no tokens spent on it). Agents started this way are marked <b>⚡ GitHub</b> or <b>⚡ webhook</b>.</p>
+        <fieldset>
+          <legend>GitHub label</legend>
+          <label class="check"><input type="checkbox" name="gh_enabled" /> Start an agent for each open issue with this label</label>
+          <div class="row">
+            <label>Label <input name="gh_label" placeholder="agentmgr" /></label>
+            <label>Check every <span class="hint">minutes</span><input name="gh_everyMin" type="number" min="1" /></label>
+          </div>
+          <label>In these repos <span class="hint">owner/name, comma or space separated</span><input name="gh_repos" placeholder="acme/web acme/api" /></label>
+          <label>Or any repo of these owners <input name="gh_owners" placeholder="acme" /></label>
+          <label class="check"><input type="checkbox" name="gh_comment" /> Comment on the issue that an agent is on it</label>
+        </fieldset>
+        <fieldset>
+          <legend>Pull request comments</legend>
+          <label class="check"><input type="checkbox" name="pc_enabled" /> Pass comments that start with <input name="pc_prefix" class="inline" placeholder="/agent" /> on an agent's pull request to that agent</label>
+          <p class="hint">Only from the repo's owners, members and collaborators.</p>
+        </fieldset>
+        <fieldset>
+          <legend>Webhook</legend>
+          <label class="check"><input type="checkbox" name="wh_enabled" /> Accept <code>POST /api/hooks/agents</code> with the token</label>
+          <div id="triggers-token" class="hint"></div>
+          <button type="button" id="triggers-newtoken" class="small">New token</button>
+          <label>Only these repos <span class="hint">optional</span><input name="wh_repos" /></label>
+        </fieldset>
+        <label>Agents started by triggers a day <span class="hint">at most</span><input name="maxPerDay" type="number" min="0" /></label>
+        <div id="triggers-status" class="hint"></div>
+        <p id="triggers-error" class="error" hidden></p>
+        <div class="dialog-actions">
+          <button type="button" id="triggers-poll">Check now</button>
+          <span class="spacer"></span>
+          <button type="button" id="triggers-close" class="ghost">Close</button>
+          <button class="primary">Save</button>
+        </div>
+      </form>
+    </dialog>
+
+    <dialog id="memory-dialog">
+      <form id="memory-form" method="dialog" class="alerts-body">
+        <h2>Repo memory</h2>
+        <p class="hint">What agents learned working in <b id="memory-repo"></b>. Every agent in this repo gets it when it starts, and adds to it with <code>agentmgr learn</code>. Tidy it here: keep it short and true.</p>
+        <textarea name="text" rows="14" class="memory-text" placeholder="- npm test needs a running Postgres: docker compose up db (you, 2026-10-31)"></textarea>
+        <p id="memory-meta" class="hint"></p>
+        <p id="memory-error" class="error" hidden></p>
+        <div class="dialog-actions">
+          <span class="spacer"></span>
+          <button type="button" id="memory-close" class="ghost">Cancel</button>
+          <button class="primary">Save</button>
+        </div>
+      </form>
+    </dialog>
+
+    <dialog id="playbooks-dialog" class="doc-dialog">
+      <div class="doc-head">
+        <h2>Playbooks</h2>
+        <span class="spacer"></span>
+        <button type="button" id="pb-new" class="small">+ New playbook</button>
+        <button type="button" id="pb-close" class="small ghost">Close</button>
+      </div>
+      <div class="race-body">
+        <p class="hint">Saved requests you run again, in one or more projects (one agent each), by hand or on a schedule. Write <code>{{name}}</code> for a value you fill in when it runs.</p>
+        <div id="pb-list"></div>
+        <form id="pb-form" class="alerts-body pb-form" hidden>
+          <input type="hidden" name="id" />
+          <label>Name <input name="name" required maxlength="80" placeholder="Upgrade a dependency" /></label>
+          <label>Request <textarea name="intent" rows="4" required placeholder="Upgrade {{package}} to the latest version, fix what breaks, run the tests and open a pull request."></textarea></label>
+          <label>Run in these projects <span class="hint">shortcuts, comma or space separated; one agent each</span><input name="projects" placeholder="web api" list="project-options" /></label>
+          <div id="pb-defaults"></div>
+          <div class="row three">
+            <label>Model <input name="model" placeholder="as configured" /></label>
+            <label>Permission mode <select name="permissionMode"><option value="">As configured</option><option value="acceptEdits">Accept edits</option><option value="plan">Plan</option><option value="auto">Auto</option><option value="bypassPermissions">Bypass permissions</option></select></label>
+            <label>Priority <select name="priority"><option value="0">P0</option><option value="1">P1</option><option value="2" selected>P2</option><option value="3">P3</option></select></label>
+          </div>
+          <div class="row three">
+            <label>Schedule <select name="every"><option value="">By hand only</option><option value="hour">Every hour</option><option value="day">Every day</option><option value="weekday">Every weekday</option><option value="week">Every week</option></select></label>
+            <label>At <input name="at" type="time" value="09:00" /></label>
+            <label>On <select name="day"><option value="mon">Monday</option><option value="tue">Tuesday</option><option value="wed">Wednesday</option><option value="thu">Thursday</option><option value="fri">Friday</option><option value="sat">Saturday</option><option value="sun">Sunday</option></select></label>
+          </div>
+          <label class="check"><input type="checkbox" name="enabled" checked /> Schedule on</label>
+          <p id="pb-error" class="error" hidden></p>
+          <div class="dialog-actions">
+            <button type="button" id="pb-delete" class="danger ghost">Delete</button>
+            <span class="spacer"></span>
+            <button type="button" id="pb-cancel" class="ghost">Cancel</button>
+            <button class="primary">Save</button>
+          </div>
+        </form>
+      </div>
+    </dialog>
+
+    <dialog id="spend-dialog">
+      <form id="spend-form" method="dialog" class="alerts-body">
+        <h2>Results <select id="stats-days" class="inline-select"><option value="7">last 7 days</option><option value="30" selected>last 30 days</option><option value="90">last 90 days</option><option value="0">all time</option></select></h2>
+        <div id="stats-body"></div>
+        <h3 class="spend-h">Spend</h3>
+        <div id="spend-summary"></div>
+        <div class="row">
+          <label>Each agent at most <span class="hint">US dollars; empty for no limit</span><input name="perAgentUsd" type="number" min="0.01" step="0.01" placeholder="no limit" /></label>
+          <label>All agents a day at most <span class="hint">US dollars</span><input name="perDayUsd" type="number" min="0.01" step="0.01" placeholder="no limit" /></label>
+        </div>
+        <p class="hint">At 80% of an agent's budget you get an alert; at its budget its session is closed until you raise it (Edit on the agent). At the daily limit no new agents start or resume until tomorrow; running ones go on.</p>
+        <div id="spend-agents"></div>
+        <p id="spend-note" class="hint"></p>
+        <p id="spend-error" class="error" hidden></p>
+        <div class="dialog-actions">
+          <span class="spacer"></span>
+          <button type="button" id="spend-close" class="ghost">Close</button>
+          <button class="primary">Save limits</button>
+        </div>
+      </form>
+    </dialog>
+
     <dialog id="cleanup-dialog">
       <form id="cleanup-form" method="dialog" class="alerts-body">
         <h2>Clean up old agents</h2>

package/public/land.js

@@ -0,0 +1,149 @@
+// Land tab: every agent's open pull request, grouped by what it needs to get merged, with
+// Review, Update, Ask to fix and Merge. Settings for sending failures back to agents at the bottom.
+
+const SHORT = { ready: 'ready', fix: 'to fix', behind: 'behind', waiting: 'waiting', draft: 'draft' };
+const GROUPS = [
+  ['ready', 'Ready to merge'],
+  ['fix', 'Needs fixes'],
+  ['behind', 'Behind its base'],
+  ['waiting', 'Waiting for checks or review'],
+  ['draft', 'Drafts'],
+];
+
+/** Checks, review and merge state of an open pull request, as small tags. */
+export function prChips(pr, esc) {
+  const c = pr.checks;
+  const out = [];
+  if (c?.state === 'failed') out.push(`<span class="tag fail" title="${esc(c.failed.join(', '))}">✗ ${c.failed.length} failing</span>`);
+  else if (c?.state === 'running') out.push(`<span class="tag">◔ ${c.running} running</span>`);
+  else if (c?.state === 'passed') out.push('<span class="tag open">✓ checks</span>');
+  if (pr.review === 'APPROVED') out.push('<span class="tag open">Approved</span>');
+  else if (pr.review === 'CHANGES_REQUESTED') out.push('<span class="tag fail">Changes requested</span>');
+  else if (pr.review === 'REVIEW_REQUIRED') out.push('<span class="tag">Review required</span>');
+  if (pr.mergeable === 'CONFLICTING' || pr.mergeState === 'DIRTY') out.push('<span class="tag fail">Conflicts</span>');
+  else if (pr.mergeState === 'BEHIND') out.push('<span class="tag">Behind</span>');
+  return out.join(' ');
+}
+
+export function initLand({ api, esc, toast, agents, $, select, openReview, isOpen }) {
+  const view = $('#land-view');
+  let settings = null;
+
+  const rows = () => {
+    const out = [];
+    for (const a of agents.values()) {
+      for (const pr of a.prs ?? []) {
+        if (pr.state !== 'OPEN' || pr.source === 'mentioned') continue;
+        out.push({ a, pr, land: pr.land ?? 'waiting' });
+      }
+    }
+    return out.sort((x, y) => (x.a.priority ?? 2) - (y.a.priority ?? 2));
+  };
+
+  function rowHtml({ a, pr, land }) {
+    const canFix = land === 'fix' || land === 'behind';
+    return `<li class="agent land-row" data-agent="${a.id}" data-url="${esc(pr.url)}">
+      <div class="line1"><span class="prio p${a.priority ?? 2}">P${a.priority ?? 2}</span>
+        <a class="name" href="${esc(pr.url)}" target="_blank" rel="noopener" title="${esc(pr.title ?? pr.url)}">#${esc(pr.number ?? '')} ${esc(pr.title ?? pr.url)}</a></div>
+      <div class="line2"><button class="link" data-land="goto">${esc(a.name)}</button>${a.runtime?.busy ? ' <span class="hint">working</span>' : ''}</div>
+      <div class="land-chips">${prChips(pr, esc)}</div>
+      <div class="bl-actions">
+        <button class="small" data-land="review" title="Its diff, line comments for the agent, commit and push">Review</button>
+        ${land === 'behind' || pr.mergeable === 'CONFLICTING' ? '<button class="small" data-land="update" title="Merge the base branch in here (when the agent is idle and its work is committed) and push; otherwise, or on conflicts, ask the agent">Update</button>' : ''}
+        ${canFix ? '<button class="small" data-land="fix" title="Send the failures, requested changes or conflicts to the agent">Ask to fix</button>' : ''}
+        ${land === 'ready' ? '<button class="small primary" data-land="merge">Merge</button>' : ''}
+        ${land === 'waiting' || land === 'behind' ? '<button class="small" data-land="auto" title="GitHub merges it once checks and reviews allow">Auto-merge</button>' : ''}
+      </div>
+    </li>`;
+  }
+
+  function render() {
+    const list = rows();
+    const need = list.filter((r) => r.land === 'ready' || r.land === 'fix').length;
+    $('#land-count').textContent = list.length ? String(list.length) : '';
+    $('#land-count').className = `badge ${list.some((r) => r.land === 'ready') ? 'ready' : ''}`;
+    $('#land-count').title = need ? `${need} ready or needing fixes` : '';
+    if (!isOpen()) return;
+    const s = settings;
+    view.innerHTML = `
+      <div class="counts">${GROUPS.map(([k, label]) => {
+        const n = list.filter((r) => r.land === k).length;
+        return n ? `<span class="${k === 'fix' ? 'fail' : ''}">${n} ${SHORT[k]}</span>` : '';
+      }).join('')}<span class="spacer"></span><button class="link" data-land="refresh" title="Ask GitHub again for every open pull request">↻ Refresh</button></div>
+      ${list.length
+        ? `<ul class="agent-list">${GROUPS.map(([k, label]) => {
+            const g = list.filter((r) => r.land === k);
+            return g.length ? `<li class="project open"><div class="project-head bl-head"><span class="pname">${label}</span><span class="pcount">${g.length}</span></div><ul>${g.map(rowHtml).join('')}</ul></li>` : '';
+          }).join('')}</ul>`
+        : '<p class="hint land-empty">No open pull requests from agents. Open one from <b>Review changes</b> on an agent, or let the agent open it.</p>'}
+      ${s ? `<details class="land-settings"><summary>When checks fail or changes are requested</summary>
+        <label class="check"><input type="checkbox" data-set="fixChecks" ${s.fixChecks ? 'checked' : ''}> Send failing checks to the agent</label>
+        <label class="check"><input type="checkbox" data-set="fixReviews" ${s.fixReviews ? 'checked' : ''}> Send requested changes to the agent</label>
+        <label>At most <input type="number" min="0" max="20" data-set="maxFixes" value="${s.maxFixes}"> times per pull request</label>
+        <label>Merge with <select data-set="mergeMethod">${['squash', 'merge', 'rebase'].map((m) => `<option ${m === s.mergeMethod ? 'selected' : ''}>${m}</option>`).join('')}</select></label>
+        <label class="check"><input type="checkbox" data-set="deleteBranch" ${s.deleteBranch ? 'checked' : ''}> Delete the branch on GitHub after merging</label>
+      </details>` : ''}`;
+  }
+
+  async function load() {
+    try {
+      settings = (await api('GET', '/landing')).settings;
+    } catch {}
+    render();
+  }
+
+  view.addEventListener('click', async (e) => {
+    const b = e.target.closest('[data-land]');
+    if (!b) return;
+    const row = b.closest('[data-agent]');
+    const id = row?.dataset.agent;
+    const url = row?.dataset.url;
+    const run = async (fn, ok) => {
+      b.disabled = true;
+      try {
+        const r = await fn();
+        const msg = typeof ok === 'function' ? ok(r) : ok;
+        if (msg) toast(msg, 4000);
+      } catch (err) {
+        toast(`Error: ${err.message}`, 6000);
+      } finally {
+        b.disabled = false;
+      }
+    };
+    switch (b.dataset.land) {
+      case 'goto':
+        return select(id);
+      case 'review':
+        return openReview(id);
+      case 'refresh':
+        return run(async () => {
+          const ids = [...new Set(rows().map((r) => r.a.id))];
+          await Promise.all(ids.map((x) => api('POST', `/agents/${x}/refresh`).catch(() => null)));
+        }, 'Asked GitHub again');
+      case 'update':
+        return run(() => api('POST', `/agents/${id}/land/update`, {}), (r) =>
+          r.upToDate ? `Already up to date with ${r.target}` : r.merged ? `Merged ${r.merged} commit${r.merged === 1 ? '' : 's'} from ${r.target}${r.pushed ? ' and pushed' : ''}` : `Asked the agent to update (${r.why})`);
+      case 'fix':
+        return run(() => api('POST', `/agents/${id}/land/fix`, { url }), 'Sent to the agent');
+      case 'merge':
+        if (!confirm(`Merge this pull request with ${settings?.mergeMethod ?? 'squash'}?`)) return;
+        return run(() => api('POST', `/agents/${id}/land/merge`, { url }), 'Merged');
+      case 'auto':
+        return run(() => api('POST', `/agents/${id}/land/merge`, { url, auto: true }), 'Auto-merge is on: GitHub merges it once it may');
+    }
+  });
+
+  view.addEventListener('change', async (e) => {
+    const k = e.target.dataset.set;
+    if (!k) return;
+    const v = e.target.type === 'checkbox' ? e.target.checked : e.target.type === 'number' ? Number(e.target.value) : e.target.value;
+    try {
+      settings = (await api('PUT', '/landing', { [k]: v })).settings;
+      toast('Saved');
+    } catch (err) {
+      toast(`Error: ${err.message}`, 5000);
+    }
+  });
+
+  return { render, load };
+}

package/public/playbooks.js

@@ -0,0 +1,132 @@
+// Playbooks dialog: list, edit, run now (asking for {{placeholders}}), schedule.
+
+const placeholders = (text) => [...new Set([...String(text ?? '').matchAll(/\{\{\s*([\w-]+)\s*\}\}/g)].map((m) => m[1]))];
+const EVERY = { hour: 'every hour', day: 'every day', weekday: 'every weekday', week: 'every week' };
+
+export function initPlaybooks({ api, esc, toast, $, select }) {
+  const dlg = $('#playbooks-dialog');
+  const f = $('#pb-form');
+  let list = [];
+
+  const when = (iso) => (iso ? new Date(iso).toLocaleString([], { weekday: 'short', hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }) : '');
+
+  function renderList() {
+    $('#pb-list').innerHTML = list.length
+      ? `<table class="spend-table pb-table"><tr><th>Playbook</th><th>Projects</th><th>Schedule</th><th>Last run</th><th></th></tr>${list
+          .map(
+            (p) => `<tr data-pb="${p.id}"><td><b>${esc(p.name)}</b><div class="hint pb-intent">${esc(p.intent.slice(0, 140))}</div></td>
+            <td>${p.projects.map((x) => `<code>${esc(x)}</code>`).join(' ')}</td>
+            <td>${p.schedule ? `${EVERY[p.schedule.every]}${p.schedule.every === 'hour' ? ` at :${p.schedule.at.slice(3)}` : ` at ${p.schedule.at}`}${p.schedule.day ? ` (${p.schedule.day})` : ''}${p.enabled ? `<div class="hint">next ${when(p.nextRunAt)}</div>` : ' <span class="tag">off</span>'}` : '<span class="hint">by hand</span>'}</td>
+            <td>${p.lastRunAt ? `${when(p.lastRunAt)}<div class="hint">${(p.runs?.at(-1)?.agents ?? []).map((a) => `<a href="#${a.id}" data-pb-goto="${a.id}">${esc(a.name)}</a>`).join(', ')}${p.runs?.at(-1)?.failed?.length ? ` <span class="error">${p.runs.at(-1).failed.length} failed</span>` : ''}</div>` : '—'}</td>
+            <td class="pb-actions"><button type="button" class="small primary" data-pb-run>Run now</button> <button type="button" class="small" data-pb-edit>Edit</button></td></tr>`,
+          )
+          .join('')}</table>`
+      : '<p class="hint">No playbooks yet. <b>+ New playbook</b>, or <b>Save as playbook</b> in New agents.</p>';
+  }
+
+  async function load() {
+    list = await api('GET', '/playbooks');
+    renderList();
+  }
+
+  function fillDefaults(values = {}) {
+    const keys = placeholders(f.intent.value);
+    $('#pb-defaults').innerHTML = keys.length
+      ? `<div class="row">${keys.map((k) => `<label>Default for <code>{{${esc(k)}}}</code> <span class="hint">needed for a schedule</span><input data-default="${esc(k)}" value="${esc(values[k] ?? '')}" /></label>`).join('')}</div>`
+      : '';
+  }
+
+  function edit(p = {}) {
+    f.hidden = false;
+    $('#pb-error').hidden = true;
+    f.id.value = p.id ?? '';
+    f.name.value = p.name ?? '';
+    f.intent.value = p.intent ?? '';
+    f.projects.value = (p.projects ?? []).join(' ');
+    f.model.value = p.model ?? '';
+    f.permissionMode.value = p.permissionMode ?? '';
+    f.priority.value = String(p.priority ?? 2);
+    f.every.value = p.schedule?.every ?? '';
+    f.at.value = p.schedule?.at ?? '09:00';
+    f.day.value = p.schedule?.day ?? 'mon';
+    f.enabled.checked = p.enabled ?? true;
+    $('#pb-delete').hidden = !p.id;
+    fillDefaults(p.defaults);
+    f.name.focus();
+  }
+
+  f.intent.addEventListener('input', () => {
+    const cur = Object.fromEntries([...f.querySelectorAll('[data-default]')].map((el) => [el.dataset.default, el.value]));
+    fillDefaults(cur);
+  });
+
+  f.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const body = {
+      name: f.name.value,
+      intent: f.intent.value,
+      projects: f.projects.value,
+      model: f.model.value.trim(),
+      permissionMode: f.permissionMode.value,
+      priority: Number(f.priority.value),
+      defaults: Object.fromEntries([...f.querySelectorAll('[data-default]')].map((el) => [el.dataset.default, el.value.trim()]).filter(([, v]) => v)),
+      schedule: f.every.value ? { every: f.every.value, at: f.at.value, day: f.day.value } : null,
+      enabled: f.enabled.checked,
+    };
+    try {
+      await api(f.id.value ? 'PUT' : 'POST', f.id.value ? `/playbooks/${f.id.value}` : '/playbooks', body);
+      f.hidden = true;
+      toast('Playbook saved');
+      await load();
+    } catch (err) {
+      $('#pb-error').hidden = false;
+      $('#pb-error').textContent = err.message;
+    }
+  });
+
+  $('#pb-list').addEventListener('click', async (e) => {
+    const go = e.target.closest('[data-pb-goto]');
+    if (go) {
+      e.preventDefault();
+      dlg.close();
+      return select(go.dataset.pbGoto);
+    }
+    const row = e.target.closest('[data-pb]');
+    const p = row && list.find((x) => x.id === row.dataset.pb);
+    if (!p) return;
+    if (e.target.closest('[data-pb-edit]')) return edit(p);
+    if (e.target.closest('[data-pb-run]')) {
+      const vars = {};
+      for (const k of p.placeholders) {
+        const v = prompt(`${p.name}: value for {{${k}}}`, p.defaults?.[k] ?? '');
+        if (v === null) return;
+        vars[k] = v;
+      }
+      try {
+        const r = await api('POST', `/playbooks/${p.id}/run`, { vars });
+        toast(`Started ${r.agents.length} agent${r.agents.length === 1 ? '' : 's'}${r.failed.length ? `; ${r.failed.length} failed: ${r.failed[0].reason}` : ''}`, 5000);
+        await load();
+      } catch (err) {
+        toast(`Error: ${err.message}`, 5000);
+      }
+    }
+  });
+
+  $('#pb-new').onclick = () => edit();
+  $('#pb-cancel').onclick = () => (f.hidden = true);
+  $('#pb-delete').onclick = async () => {
+    if (!confirm(`Delete the playbook "${f.name.value}"? Agents it started stay.`)) return;
+    await api('DELETE', `/playbooks/${f.id.value}`).catch((err) => toast(`Error: ${err.message}`));
+    f.hidden = true;
+    await load();
+  };
+  $('#pb-close').onclick = () => dlg.close();
+
+  async function open(prefill) {
+    f.hidden = true;
+    if (!dlg.open) dlg.showModal();
+    await load();
+    if (prefill) edit(prefill);
+  }
+  return { open };
+}