ai-agentmanager 1.1.0 → 1.3.0

package/public/app.js

@@ -4,6 +4,12 @@ import { marked } from '/vendor/marked/marked.esm.js';
 import DOMPurify from '/vendor/dompurify/purify.es.mjs';
 import { touchScroll } from '/touchscroll.js';
 import { openStream, post, REMOTE } from '/transport.js';
+import { initReview } from '/review.js';
+import { initLand, prChips } from '/land.js';
+import { initTriggers } from '/triggers.js';
+import { initSpend } from '/spend.js';
+import { initPlaybooks } from '/playbooks.js';
+import { initSetup } from '/setup.js';
 
 const $ = (sel) => document.querySelector(sel);
 const agents = new Map();
@@ -93,6 +99,19 @@ async function act(fn, okMsg) {
   }
 }
 
+const reviewUi = initReview({ api, esc, toast, agents, $ });
+const triggersUi = initTriggers({ api, esc, toast, $ });
+initSpend({ api, esc, toast, $ });
+initSetup({ api, esc, $ });
+const playbooksUi = initPlaybooks({ api, esc, toast, $, select: (id) => (showTab('agents'), select(id)) });
+$('#new-playbook').onclick = () => {
+  const f = $('#new-form');
+  $('#new-dialog').close();
+  playbooksUi.open({ intent: f.intents.value.trim(), projects: f.project.value.trim() ? [f.project.value.trim()] : [], model: f.model.value.trim(), permissionMode: f.permissionMode.value });
+};
+$('#triggers-open').onclick = () => triggersUi.open();
+const landUi = initLand({ api, esc, toast, agents, $, select: (id) => (showTab('agents'), select(id)), openReview: (id) => reviewUi.open(id), isOpen: () => sideTab === 'land' });
+
 function statusOf(a) {
   if (a.runtime.planning) return a.runtime.attention ? 'attention' : 'planning';
   if (a.status === 'running') {
@@ -200,7 +219,7 @@ function explainBox(a) {
 const REVIEW_VERDICT = { complete: '✓ Complete', partial: '≈ Partly done', not_done: '✗ Not done' };
 /** The AI judge's review of the work against the intent and brief: button, and the last result once handled. */
 function reviewBox(a) {
-  if (a.kind === 'general') return { button: '', box: '' };
+  if (noRepo(a)) return { button: '', box: '' };
   const r = a.aiReview;
   const button = `<button class="small" data-act="review" ${r?.pending ? 'disabled' : ''}
     title="Check the work against the intent and brief: what is met, missing or risky. A separate one-off model call; runs by itself when the agent says it is done">${r?.pending ? 'Reviewing…' : 'Review with AI'}</button>`;
@@ -429,7 +448,7 @@ function openPlan(agentId) {
 const PLAN_LABEL = { writing: 'being written', review: 'waiting for your review', changes: 'changes requested', approved: 'approved' };
 /** The plan-review row in the brief card: status, open, approve; or the switch to turn review on. */
 function planRow(a) {
-  if (a.kind === 'general') return '';
+  if (noRepo(a)) return '';
   const p = a.planReview;
   if (!p) {
     return a.status === 'done' ? '' : `<div class="plan-row"><button class="small ghost" data-act="plan-on" title="The agent writes an implementation plan and waits for your approval before changing anything">Review its plan first</button></div>`;
@@ -489,7 +508,7 @@ function resultsCard(a) {
 }
 
 function briefPanel(a) {
-  if (a.kind === 'general') return '';
+  if (noRepo(a)) return '';
   const b = a.brief;
   const ex = explainBox(a);
   const rv = reviewBox(a);
@@ -598,12 +617,14 @@ function saveCollapsed() {
 const prioChip = (p, { always = false } = {}) =>
   p === 2 && !always ? '' : `<span class="prio p${p}" title="Priority P${p}">P${p}</span>`;
 
+const noRepo = (a) => a.kind === 'general' || a.kind === 'assistant';
+
 function agentItem(a) {
   const st = statusOf(a);
   const idle = !isActive(a);
   return `<li data-id="${a.id}" class="agent pr${a.priority ?? 2} ${a.id === selectedId ? 'selected' : ''} ${idle ? 'idle' : ''}">
     <div class="line1">${prioChip(a.priority ?? 2)}${a.results?.outcome === 'blocked' ? '<span class="outcome-mark" title="Blocked">⛔</span>' : a.results?.outcome === 'done' ? '<span class="outcome-mark" title="Done">✅</span>' : ''}<span class="name">${esc(a.name)}</span>${flags(a)}<span class="pill ${st}">${pillText(st)}</span></div>
-    <div class="intent">${a.kind === 'general' ? '<span class="tag">general</span> ' : ''}${a.engine && a.engine !== 'claude' ? `<span class="tag engine">${esc(ENGINE_LABEL[a.engine] ?? a.engine)}</span> ` : ''}${esc(a.intent || 'General session')}</div>
+    <div class="intent">${a.kind === 'general' ? '<span class="tag">general</span> ' : a.kind === 'assistant' ? '<span class="tag assistant">assistant</span> ' : a.startedBy ? '<span class="tag assistant" title="Started by the assistant">🤖 by assistant</span> ' : a.trigger ? `<span class="tag assistant" title="Started from ${a.trigger.source === 'github' ? 'a labeled GitHub issue' : 'the webhook'}${a.trigger.url ? `: ${esc(a.trigger.url)}` : ''}">⚡ ${a.trigger.source === 'github' ? 'GitHub' : 'webhook'}</span> ` : a.playbook ? `<span class="tag assistant" title="Started by the playbook ${esc(a.playbook.name)}">▶ ${esc(a.playbook.name)}</span> ` : ''}${a.engine && a.engine !== 'claude' ? `<span class="tag engine">${esc(ENGINE_LABEL[a.engine] ?? a.engine)}</span> ` : ''}${esc(a.intent || (a.kind === 'assistant' ? 'Finds new work and starts agents for it' : 'General session'))}</div>
     ${a.status === 'preparing' && a.progress ? `<div class="progress-line">${esc(progressText(a.progress))}</div>` : ''}
     <div class="meta">
       <span class="mono">${a.id}</span>
@@ -652,7 +673,7 @@ function projectGroups(list) {
     const same = byName ? byName.get(g.name).length : out.filter((x) => x.name === g.name).length;
     g.label = same > 1 && g.full ? g.full : g.name;
   }
-  const special = (g) => (g.key === 'general' ? 1 : g.key === 'other' ? 2 : 0);
+  const special = (g) => (g.key === 'assistant' ? -1 : g.key === 'general' ? 1 : g.key === 'other' ? 2 : 0);
   return out.sort(
     (a, b) =>
       special(a) - special(b) ||
@@ -757,6 +778,7 @@ function renderBacklog() {
       <span class="spacer"></span>
       <button class="link" data-bl="toggle-run" title="${backlogState.autoRun ? 'Stop starting new items (running ones continue)' : 'Start picking up queued items again'}">${backlogState.autoRun ? '⏸ Pause' : '▶ Resume'}</button>
       <button class="link" data-bl="add">+ Add</button>
+      <button class="link" data-bl="playbooks" title="Saved requests you run again, by hand or on a schedule">Playbooks</button>
     </div>
     ${!backlogState.autoRun ? '<p class="hint bl-paused">Paused: queued items wait until you resume.</p>' : ''}
     ${items.length
@@ -805,7 +827,9 @@ function showTab(tab) {
   $('#agents-view').hidden = tab !== 'agents';
   $('#backlog-view').hidden = tab !== 'backlog';
   $('#inbox-view').hidden = tab !== 'inbox';
+  $('#land-view').hidden = tab !== 'land';
   if (tab === 'inbox') loadJudge();
+  if (tab === 'land') landUi.load();
   renderBacklog();
   renderInbox();
 }
@@ -828,6 +852,8 @@ $('#backlog-view').addEventListener('click', async (e) => {
       return blApi('POST', '/backlog/settings', { autoRun: !backlogState.autoRun });
     case 'add':
       return openNewDialog('backlog');
+    case 'playbooks':
+      return playbooksUi.open();
     case 'limit': {
       const n = prompt(`How many "${el.dataset.name}" items should agents work on at once?`, el.textContent.split(' ')[0]);
       if (n === null) return;
@@ -1119,7 +1145,7 @@ for (const root of [$('#inbox-view'), $('#detail-body')]) {
 // ------------------------------------------------------------------ checkpoints and forks
 
 function checkpointsCard(a) {
-  if (a.kind === 'general' || !a.git?.branch) return '';
+  if (noRepo(a) || !a.git?.branch) return '';
   const cps = [...(a.checkpoints ?? [])].reverse();
   const forks = [...agents.values()].filter((x) => x.forkOf?.agentId === a.id);
   return `<div class="card">
@@ -1506,6 +1532,7 @@ function prRow(a, p) {
     <a class="grow" href="${esc(p.url)}" target="_blank" rel="noopener" title="${esc(p.url)}">${label} ${esc(p.title ?? p.repo ?? p.url)}</a>
     <span class="tag" title="How this was found">${esc(p.source)}</span>
     <button class="link" data-unlink="pr" data-key="${esc(p.url)}" title="Remove">✕</button>
+    ${p.state === 'OPEN' && (p.checks || p.review || p.mergeState) ? `<div class="pr-chips">${prChips(p, esc)}</div>` : ''}
   </li>`;
 }
 
@@ -1545,7 +1572,7 @@ function renderDetail() {
             ${[0, 1, 2, 3].map((p) => `<option value="${p}" ${p === (a.priority ?? 2) ? 'selected' : ''}>P${p}</option>`).join('')}
           </select>
           <span class="d-name">${esc(a.name)}</span> <span class="pill ${st}">${pillText(st)}</span>${a.kind === 'general' ? ' <span class="tag">general</span>' : ''}</h2>
-        <p class="intent">${esc(a.intent || (a.kind === 'general' ? 'General session: ask Claude anything in the terminal.' : ''))}</p>
+        <p class="intent">${esc(a.intent || (a.kind === 'general' ? 'General session: ask Claude anything in the terminal.' : a.kind === 'assistant' ? 'Your assistant: it checks for new work every few minutes and starts agents for it. Settings and activity: Assistant in the top bar.' : ''))}</p>
       </div>
       <div class="d-actions">
         ${a.status === 'error' && !a.workdir
@@ -1561,7 +1588,9 @@ function renderDetail() {
             : `<button data-act="start" ${a.status === 'preparing' ? 'disabled' : ''}>Resume in background</button>`}
         <button data-act="fresh" ${running || a.status === 'preparing' ? 'disabled' : ''} title="Start over with a new session ID (old ones are kept)">New session</button>
         <button data-act="shell" ${a.workdir && a.status !== 'preparing' ? '' : 'disabled'} title="A separate terminal in this agent's folder for running commands by hand">Open shell</button>
+        ${noRepo(a) ? '' : `<button data-act="changes" ${a.workdir && a.status !== 'preparing' ? '' : 'disabled'} title="Read its changes, comment on lines for the agent, commit and open a pull request">Review changes${a.git?.dirtyFiles ? ` <span class="count">${a.git.dirtyFiles}</span>` : ''}</button>`}
         <button data-act="fork" ${a.workdir && a.git?.branch ? '' : 'disabled'} title="A new agent with this one's code and conversation, in its own worktree, to try another approach">Fork</button>
+        <button data-act="edit" title="Change its name, request, project, priority, permission mode or model">Edit</button>
         <button data-act="refresh" title="Re-scan git, PRs and transcripts">Refresh</button>
         <button data-act="keep" class="${a.keep ? 'on' : ''}" title="${a.keep ? 'Kept: clean up never closes or deletes it. Click to let clean up handle it again' : 'Clean up never closes or deletes an agent marked Keep'}">${a.keep ? '📌 Kept' : 'Keep'}</button>
         <button class="danger" data-act="delete">Delete</button>
@@ -1617,7 +1646,7 @@ function renderDetail() {
                     <br>${fmtTokens(u.total)} total incl. cache · ${u.requests} requests</div>`
                  : ''}`
             : '—'}</dd>
-          <dt>Cost</dt><dd>${totalCost ? `$${totalCost.toFixed(2)} <span class="hint">(reported by Claude Code)</span>` : '—'}</dd>
+          <dt>Cost</dt><dd>${totalCost ? `$${totalCost.toFixed(2)}${a.budgetUsd ? ` of its $${a.budgetUsd.toFixed(2)} budget` : ''} <span class="hint">(reported by Claude Code)</span>` : a.budgetUsd ? `— <span class="hint">budget $${a.budgetUsd.toFixed(2)}</span>` : '—'}${a.budgetHit ? ' <span class="tag fail" title="Its session was closed at its budget; raise it in Edit to continue">budget reached</span>' : ''}</dd>
           <dt>Mode</dt><dd>${esc(a.permissionMode)}${a.model ? ` · ${esc(a.model)}` : ''}</dd>
         </dl>
       </div>
@@ -1626,12 +1655,13 @@ function renderDetail() {
         <h3>Workspace</h3>
         <dl class="kv">
           <dt>Folder</dt><dd><code>${esc(a.workdir ?? (a.status === 'preparing' ? 'preparing…' : '—'))}</code>${a.workdir ? copyBtn(a.workdir) : ''}</dd>
-          <dt>Project</dt><dd>${esc(a.projectInfo?.full || a.projectInfo?.name || '—')} <button class="link" data-act="project" title="Group this agent under a different project name">✎</button></dd>
+          <dt>Project</dt><dd>${esc(a.projectInfo?.full || a.projectInfo?.name || '—')} ${noRepo(a) ? '' : '<button class="link" data-act="project" title="Move this agent under another project">✎ Move</button>'}</dd>
           <dt>Repo</dt><dd>${a.repo ? `<code>${esc(a.repo)}</code>` : '—'}</dd>
           <dt>Branch</dt><dd>${a.git?.branch ? `<code>${esc(a.git.branch)}</code>` : '—'}${a.git?.dirtyFiles ? ` <span class="tag">${a.git.dirtyFiles} changed</span>` : ''}</dd>
           <dt>Head</dt><dd>${a.git?.head ? `<code>${esc(a.git.head.sha)}</code> ${esc(a.git.head.subject)}` : '—'}</dd>
           ${a.baseRef ? `<dt>Branched from</dt><dd><code>${esc(a.baseRef)}</code></dd>` : ''}
           ${a.worktree ? `<dt>Worktree of</dt><dd><code>${esc(a.sourceDir)}</code></dd>` : ''}
+          ${noRepo(a) ? '' : `<dt>Repo memory</dt><dd><button class="link" data-act="memory" title="What agents learned working in this repo; every agent here gets it">View and edit</button></dd>`}
         </dl>
       </div>
 
@@ -1696,6 +1726,7 @@ function renderDetail() {
 function render() {
   renderList();
   renderBacklog();
+  landUi.render();
   renderInbox();
   renderRace();
   renderTeam();
@@ -2875,12 +2906,10 @@ $('#detail-body').addEventListener('click', async (e) => {
         term.open(a.id);
       }, 'Moved into the repository');
       break;
-    case 'project': {
-      const name = prompt('Project name for this agent (leave empty to use its repo):', a.project ?? a.projectInfo?.name ?? '');
-      if (name === null) return;
-      act(async () => upsert(await api('PATCH', `/agents/${a.id}`, { project: name })));
-      break;
-    }
+    case 'project':
+      return openEdit(a, 'project');
+    case 'edit':
+      return openEdit(a);
     case 'plan-open':
       return openPlan(a.id);
     case 'plan-on':
@@ -2905,6 +2934,10 @@ $('#detail-body').addEventListener('click', async (e) => {
     case 'shell':
       term.open(a.id, 'shell:1');
       break;
+    case 'changes':
+      return reviewUi.open(a.id);
+    case 'memory':
+      return openMemory(a);
     case 'fork':
       forkAgent(a.id);
       break;
@@ -3503,6 +3536,217 @@ $('#cleanup-plan').addEventListener('click', (e) => {
   select(go.dataset.cleanupGoto);
 });
 
+// ------------------------------------------------------------------ edit an agent
+
+let editing = null;
+let enginesCache = null;
+// The project picked in the dialog: "" while it is listed under its own repo or folder.
+const editProject = (a) => (a.projectMove || a.project ? (a.projectInfo?.shortcut ?? '') : '');
+
+let memoryAgent = null;
+async function openMemory(a) {
+  memoryAgent = a.id;
+  const f = $('#memory-form');
+  $('#memory-error').hidden = true;
+  try {
+    const m = await api('GET', `/agents/${a.id}/memory`);
+    $('#memory-repo').textContent = a.projectInfo?.full || a.projectInfo?.name || a.repo || 'this repo';
+    f.text.value = m.text;
+    $('#memory-meta').textContent = `${m.entries} learning${m.entries === 1 ? '' : 's'} · ${(m.bytes / 1000).toFixed(1)} of ${m.max / 1000} KB`;
+    $('#memory-dialog').showModal();
+  } catch (err) {
+    toast(`Error: ${err.message}`, 5000);
+  }
+}
+$('#memory-form').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  try {
+    await api('PUT', `/agents/${memoryAgent}/memory`, { text: $('#memory-form').text.value });
+    $('#memory-dialog').close();
+    toast('Saved; agents get it from their next start');
+  } catch (err) {
+    $('#memory-error').hidden = false;
+    $('#memory-error').textContent = err.message;
+  }
+});
+$('#memory-close').onclick = () => $('#memory-dialog').close();
+
+async function openEdit(a, focus) {
+  editing = a;
+  const f = $('#edit-form');
+  f.name.value = a.name;
+  f.intent.value = a.intent ?? '';
+  f.tell.checked = false;
+  f.priority.value = String(a.priority ?? 2);
+  f.model.value = a.model ?? '';
+  f.budgetUsd.value = a.budgetUsd ?? '';
+  $('#edit-project-row').hidden = noRepo(a);
+  $('#edit-tell-row').hidden = !a.intent;
+  // Its own repo or folder, every known project, or a new name.
+  f.project.innerHTML = [
+    '<option value="">Its own repo or folder</option>',
+    ...projectsState.map((p) => `<option value="${esc(p.shortcut)}">${esc(p.name)} (@${esc(p.shortcut)})</option>`),
+    '<option value="__new">New project name…</option>',
+  ].join('');
+  f.project.value = editProject(a);
+  $('#edit-newproject-row').hidden = true;
+  f.newProject.value = '';
+  enginesCache ??= await api('GET', '/engines').catch(() => []);
+  const modes = enginesCache.find((e) => e.id === (a.engine ?? 'claude'))?.permissionModes ?? [];
+  f.permissionMode.innerHTML = ['<option value="">As configured</option>', ...modes.map((m) => `<option value="${esc(m)}">${esc(m)}</option>`)].join('');
+  f.permissionMode.value = a.permissionMode ?? '';
+  $('#edit-error').hidden = true;
+  $('#edit-dialog').showModal();
+  (focus === 'project' ? f.project : f.name).focus();
+}
+
+$('#edit-form').project.addEventListener('change', (e) => {
+  $('#edit-newproject-row').hidden = e.target.value !== '__new';
+  if (e.target.value === '__new') $('#edit-form').newProject.focus();
+});
+$('#edit-close').onclick = () => $('#edit-dialog').close();
+$('#edit-form').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const a = editing;
+  const f = e.target;
+  const patch = {};
+  if (f.name.value.trim() !== a.name) patch.name = f.name.value.trim();
+  if (f.intent.value.trim() !== (a.intent ?? '')) patch.intent = f.intent.value.trim();
+  if (Number(f.priority.value) !== (a.priority ?? 2)) patch.priority = Number(f.priority.value);
+  if ((f.permissionMode.value || null) !== (a.permissionMode ?? null)) patch.permissionMode = f.permissionMode.value || null;
+  if ((f.model.value.trim() || null) !== (a.model ?? null)) patch.model = f.model.value.trim() || null;
+  if ((f.budgetUsd.value === '' ? null : Number(f.budgetUsd.value)) !== (a.budgetUsd ?? null)) patch.budgetUsd = f.budgetUsd.value === '' ? null : Number(f.budgetUsd.value);
+  if (!noRepo(a)) {
+    const target = f.project.value === '__new' ? f.newProject.value.trim() : f.project.value;
+    const was = editProject(a);
+    if (f.project.value === '__new' && !target) {
+      $('#edit-error').textContent = 'Give the new project a name';
+      $('#edit-error').hidden = false;
+      return;
+    }
+    if (target !== was) patch.project = target;
+  }
+  try {
+    if (Object.keys(patch).length) upsert(await api('PATCH', `/agents/${a.id}`, patch));
+    if (patch.intent && f.tell.checked) await api('POST', `/agents/${a.id}/tell`, { text: `The request changed. It is now:\n${patch.intent}` });
+    $('#edit-dialog').close();
+    const relaunch = 'permissionMode' in patch || 'model' in patch;
+    toast(!Object.keys(patch).length ? 'Nothing changed' : `Saved${patch.project !== undefined ? '; moved' : ''}${relaunch ? '. Permission mode and model apply from its next launch' : ''}`);
+  } catch (err) {
+    $('#edit-error').textContent = err.message;
+    $('#edit-error').hidden = false;
+  }
+});
+
+// ------------------------------------------------------------------ assistant
+
+const ASSISTANT_SOURCES = ['jira', 'comments', 'reviews', 'ci', 'slack', 'linear'];
+let assistantState = null;
+
+function renderAssistantDot() {
+  const a = assistantState;
+  const dot = $('#assistant-dot');
+  dot.hidden = !a?.agentId;
+  if (a) {
+    dot.className = `assistant-dot ${a.on ? (a.busy ? 'busy' : 'on') : 'off'}`;
+    dot.title = a.on ? (a.busy ? 'Checking now' : 'On') : 'Paused';
+  }
+}
+
+async function loadAssistant({ fill = true } = {}) {
+  const a = await api('GET', '/assistant');
+  assistantState = a;
+  renderAssistantDot();
+  const f = $('#assistant-form');
+  if (fill) {
+    for (const k of ASSISTANT_SOURCES) f[`src_${k}`].checked = a.sources.includes(k);
+    f.everyMin.value = a.everyMin;
+    f.maxPerDay.value = a.maxPerDay;
+    f.maxRunning.value = a.maxRunning;
+    f.notes.value = a.notes ?? '';
+  }
+  const state = !a.agentId ? 'Not set up yet. Start it to create its session.' : a.on ? (a.busy ? 'On: checking now.' : 'On.') : 'Paused: not checking.';
+  $('#assistant-status').innerHTML = `<p><b>${esc(state)}</b>
+    ${a.lastCheckAt ? ` Last check ${ago(a.lastCheckAt)}.` : ''}${a.nextAt && a.on ? ` Next ${new Date(a.nextAt) <= new Date() ? 'when it is free' : `at ${new Date(a.nextAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`}.` : ''}
+    ${a.agentId ? ` Started ${a.startedToday} agent${a.startedToday === 1 ? '' : 's'} today, ${a.startedTotal} in all.` : ''}</p>
+    ${a.started.length ? `<ul class="assistant-started">${a.started.slice(0, 8).map((x) => `<li><a href="#${x.id}" data-assistant-goto="${x.id}">${esc(x.name)}</a> <span class="hint">${ago(x.createdAt)} · ${esc(x.intent.slice(0, 90))}</span></li>`).join('')}</ul>` : ''}`;
+  $('#assistant-activity').innerHTML = a.activity ? `<h4>Activity</h4><div class="md">${md(a.activity.split(/\n(?=## )/).reverse().slice(0, 10).join('\n').replace(/([^\n])\n(?=[^\n#\-*])/g, '$1  \n'))}</div>` : a.agentId ? '<p class="hint">No activity yet. Its first check writes here.</p>' : '';
+  $('#assistant-start').hidden = Boolean(a.on);
+  $('#assistant-start').textContent = a.agentId ? 'Turn on' : 'Start';
+  $('#assistant-pause').hidden = !a.on;
+  $('#assistant-check').hidden = !a.on;
+  $('#assistant-open').hidden = !a.agentId;
+  $('#assistant-error').hidden = true;
+  return a;
+}
+
+const assistantPatch = (f) => ({
+  sources: ASSISTANT_SOURCES.filter((k) => f[`src_${k}`].checked),
+  everyMin: Number(f.everyMin.value),
+  maxPerDay: Number(f.maxPerDay.value),
+  maxRunning: Number(f.maxRunning.value),
+  notes: f.notes.value,
+});
+const assistantError = (err) => {
+  $('#assistant-error').textContent = err.message;
+  $('#assistant-error').hidden = false;
+};
+$('#assistant-btn').onclick = async () => {
+  $('#assistant-dialog').showModal();
+  await loadAssistant().catch(assistantError);
+};
+$('#assistant-close').onclick = () => $('#assistant-dialog').close();
+$('#assistant-form').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  try {
+    await api('PUT', '/assistant', assistantPatch(e.target));
+    toast(assistantState?.running ? 'Saved. A running assistant uses the new watch list and notes after Pause and Turn on.' : 'Assistant settings saved');
+    await loadAssistant();
+  } catch (err) {
+    assistantError(err);
+  }
+});
+$('#assistant-start').onclick = async () => {
+  try {
+    if (!assistantState?.agentId) await api('PUT', '/assistant', assistantPatch($('#assistant-form')));
+    await api('POST', '/assistant/start');
+    toast('Assistant on: its first check starts in a moment');
+    await loadAssistant({ fill: false });
+  } catch (err) {
+    assistantError(err);
+  }
+};
+$('#assistant-pause').onclick = async () => {
+  try {
+    await api('POST', '/assistant/pause');
+    await loadAssistant({ fill: false });
+  } catch (err) {
+    assistantError(err);
+  }
+};
+$('#assistant-check').onclick = async () => {
+  try {
+    await api('POST', '/assistant/check');
+    toast('Asked the assistant to check now');
+    await loadAssistant({ fill: false });
+  } catch (err) {
+    assistantError(err);
+  }
+};
+$('#assistant-open').onclick = () => {
+  $('#assistant-dialog').close();
+  if (assistantState?.agentId) select(assistantState.agentId);
+};
+$('#assistant-dialog').addEventListener('click', (e) => {
+  const go = e.target.closest('[data-assistant-goto]');
+  if (!go) return;
+  e.preventDefault();
+  $('#assistant-dialog').close();
+  select(go.dataset.assistantGoto);
+});
+loadAssistant({ fill: false }).catch(() => {});
+setInterval(() => loadAssistant({ fill: false }).catch(() => {}), 60_000);
+
 // ------------------------------------------------------------------ Slack alerts (from this computer)
 
 async function loadAlerts() {