ai-agentmanager 1.0.2 → 1.2.1

package/public/app.js

@@ -14,6 +14,9 @@ let showCompleted = false;
 const races = new Map(); // race id -> scoreboard
 let openRaceId = null;
 let raceDiff = null; // { agentId, text }
+const teams = new Map(); // team id -> team view
+let openTeamId = null;
+let teamFile = null; // { name, markdown } shown in the team view
 // #<id> selects an agent; #<id>/term also opens its terminal.
 const loginHash = location.hash.match(/(?:^#|&)login=([\w-]+)/)?.[1] ?? null;
 // From the hub: #ticket=<one-time ticket>&go=<agent>/term
@@ -23,6 +26,20 @@ const [hashId, hashView] = loginHash ? [null, null] : (ticketHash ? goHash : loc
 let selectedId = hashId || null;
 let openTermOnLoad = hashView === 'term' || isShell(hashView) || isBrowser(hashView);
 let filterText = '';
+// "Only agents created in the last N days": remembered in this browser.
+const recent = (() => {
+  try {
+    return { on: localStorage.getItem('agentmgr.recentOn') === '1', days: Number(localStorage.getItem('agentmgr.recentDays')) || 7 };
+  } catch {
+    return { on: false, days: 7 };
+  }
+})();
+const saveRecent = () => {
+  try {
+    localStorage.setItem('agentmgr.recentOn', recent.on ? '1' : '0');
+    localStorage.setItem('agentmgr.recentDays', String(recent.days));
+  } catch {}
+};
 
 // ------------------------------------------------------------------ helpers
 
@@ -183,7 +200,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>`;
@@ -412,7 +429,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>`;
@@ -472,7 +489,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);
@@ -581,12 +598,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.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>
@@ -635,7 +654,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) ||
@@ -661,6 +680,13 @@ function renderList() {
             .toLowerCase()
             .includes(filterText),
   );
+  // The open agent stays in the list even when it's older.
+  const since = recent.on ? Date.now() - recent.days * 86_400_000 : 0;
+  const shown = since ? list.filter((a) => a.id === selectedId || (Date.parse(a.createdAt) || 0) >= since) : list;
+  const hidden = list.length - shown.length;
+  $('#recent-bar').hidden = agents.size === 0;
+  $('#recent-on').checked = recent.on;
+  $('#recent-hidden').innerHTML = hidden ? `${hidden} older ${hidden === 1 ? 'agent' : 'agents'} hidden · <button class="link" id="recent-off">Show all</button>` : '';
   $('#empty').hidden = agents.size > 0;
 
   const all = [...agents.values()];
@@ -672,8 +698,14 @@ function renderList() {
        <span class="spacer"></span><button class="link" id="import-btn" title="Continue Claude sessions you started in a terminal on this machine">Import</button><button class="link" id="flush-btn" title="Save session IDs, terminal scrollback and state to disk now (also automatic every 30s)">Save now</button>`
     : '';
 
-  $('#agent-list').innerHTML = projectGroups(list)
+  // Every agent a project has, also the ones a filter hides.
+  const totals = new Map();
+  for (const a of all) totals.set(a.projectInfo?.key ?? 'other', (totals.get(a.projectInfo?.key ?? 'other') ?? 0) + 1);
+
+  $('#agent-list').innerHTML = projectGroups(shown)
     .map((g) => {
+      const total = totals.get(g.key) ?? g.agents.length;
+      const n = g.agents.length;
       // While filtering, show every match; otherwise respect collapsed projects.
       const open = filterText || !collapsed.has(g.key) || g.agents.some((a) => a.id === selectedId);
       return `<li class="project ${open ? 'open' : ''}">
@@ -684,7 +716,8 @@ function renderList() {
           <span class="pcounts">
             ${g.top <= 1 ? prioChip(g.top) : ''}
             ${g.waiting ? `<span class="pill attention" title="needs input">${g.waiting}</span>` : ''}
-            <span title="running / agents">${g.running}/${g.agents.length}</span>
+            ${g.running ? `<span class="prun" title="${g.running} running">● ${g.running}</span>` : ''}
+            <span class="pcount" title="${total} agent${total === 1 ? '' : 's'} in this project${n < total ? `, ${n} shown` : ''}">${n < total ? `${n} of ${total}` : total} agent${total === 1 ? '' : 's'}</span>
           </span>
         </button>
         ${open ? `<ul class="project-agents">${g.agents.map(agentItem).join('')}</ul>` : ''}
@@ -844,12 +877,13 @@ function flags(a) {
     a.conflicts?.length ? `<span class="flag warn" title="Changes the same files as ${esc(a.conflicts.map((c) => c.agent.name).join(', '))}">⚔</span>` : '',
     q ? `<span class="flag ask" title="${q} open question${q > 1 ? 's' : ''}">?${q > 1 ? q : ''}</span>` : '',
     a.raceId ? `<span class="flag" title="Race attempt${a.variant?.label ? `: ${esc(a.variant.label)}` : ''}">🏁</span>` : '',
+    a.team ? `<span class="flag role" title="Team ${esc(teams.get(a.team.id)?.name ?? '')}: ${esc(a.team.role)}">👥 ${esc(a.team.role)}${a.team.n && teams.get(a.team.id)?.settings.critics > 1 ? ` ${a.team.n}` : ''}</span>` : '',
     a.forkOf ? `<span class="flag" title="Fork of ${esc(a.forkOf.name)}">⑂</span>` : '',
   ].join('');
 }
 
 const TRIAGED = { now: 'sent (AI: urgent)', digest: 'held for the digest', skip: 'dropped by the AI judge' };
-const NEED_ORDER = { prompt: 0, waiting: 1, plan: 1, question: 1, review: 2, stuck: 3, conflict: 4 };
+const NEED_ORDER = { prompt: 0, waiting: 1, plan: 1, question: 1, team: 1, review: 2, stuck: 3, conflict: 4 };
 /** What an agent needs from the user. `both`: overlaps on both agents (detail), else only the one that should rebase (inbox). */
 function needsFor(a, { both = false } = {}) {
   const items = [];
@@ -862,13 +896,19 @@ function needsFor(a, { both = false } = {}) {
   for (const g of a.conflicts ?? []) if (both || g.mergeFirst !== a.id) items.push({ a, kind: 'conflict', key: `conflict:${a.id}:${g.agent.id}`, g });
   return items;
 }
+/** Teams waiting on you (approved, or stuck on a disagreement), shown on the lead or the implementer. */
+const teamOwner = (t) => t.members.find((m) => m.role === 'lead' || m.role === 'implementer')?.id;
+function teamNeeds() {
+  return [...teams.values()]
+    .filter((t) => ['ready', 'blocked'].includes(t.stage) && agents.has(teamOwner(t)))
+    .map((t) => ({ a: agents.get(teamOwner(t)), kind: 'team', key: `team:${t.id}`, t }));
+}
 function inboxItems() {
-  return [...agents.values()]
-    .flatMap((a) => needsFor(a))
+  return [...[...agents.values()].flatMap((a) => needsFor(a)), ...teamNeeds()]
     .sort((x, y) => NEED_ORDER[x.kind] - NEED_ORDER[y.kind] || (x.a.priority ?? 2) - (y.a.priority ?? 2));
 }
 
-const NEED_LABEL = { prompt: 'Needs input', waiting: 'Waiting on you', plan: 'Plan review', question: 'Question', review: 'AI review', stuck: 'Stuck?', conflict: 'Overlap' };
+const NEED_LABEL = { team: 'Team', prompt: 'Needs input', waiting: 'Waiting on you', plan: 'Plan review', question: 'Question', review: 'AI review', stuck: 'Stuck?', conflict: 'Overlap' };
 /** Why the AI judge thinks so, as a small tag. */
 const aiTag = (confidence, what = 'AI') => `<span class="tag ai" title="Judged by a model from the agent's activity; your reactions tune later calls">🤖 ${what}${confidence != null ? ` ${Math.round(confidence * 100)}%` : ''}</span>`;
 function needCard(it, { inDetail = false } = {}) {
@@ -907,6 +947,11 @@ function needCard(it, { inDetail = false } = {}) {
         ${r.missing.length ? '<button class="small primary" data-ib="review-finish" title="Send the missing items to the agent">Send back to finish</button>' : ''}
         <button class="small ${r.missing.length ? '' : 'primary'}" data-ib="review-accept">Looks good</button>
       </div>`;
+  } else if (it.kind === 'team') {
+    const t = it.t;
+    body = `<p class="need-title">${t.stage === 'ready' ? `✓ The reviewer approved <b>${esc(t.name)}</b>${t.gaps ? ', with parts still missing: run a gap round?' : ''}` : `<b>${esc(t.name)}</b> needs a decision: ${esc(t.blocked?.reason ?? '')}`}</p>
+      <p class="hint">${esc(t.intent.split('\n')[0].slice(0, 140))}</p>
+      <div class="need-actions"><button class="small primary" data-ib="team-open" data-team="${t.id}">${t.stage !== 'ready' ? 'Decide' : t.gaps ? 'See the gaps' : 'Review and finalize'}</button></div>`;
   } else if (it.kind === 'plan') {
     const title = a.planReview.markdown?.match(/^#\s+(.+)$/m)?.[1] ?? 'Implementation plan';
     body = `<p class="need-title">${esc(title)}</p>
@@ -1022,6 +1067,8 @@ async function onNeed(e) {
       const q = key.split(':')[2];
       return act(async () => upsert(await api('POST', `/agents/${id}/answer`, { question: q, text: el.dataset.text })), 'Answer sent');
     }
+    case 'team-open':
+      return openTeam(el.dataset.team);
     case 'plan-open':
       return openPlan(id);
     case 'plan-approve':
@@ -1074,7 +1121,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">
@@ -1095,6 +1142,8 @@ $('#detail-body').addEventListener('click', (e) => {
   if (cp) forkAgent(selectedId, Number(cp.dataset.forkCp));
   const race = e.target.closest('[data-race-open]');
   if (race) openRace(race.dataset.raceOpen);
+  const team = e.target.closest('[data-team-open]');
+  if (team) openTeam(team.dataset.teamOpen);
 });
 
 function forkAgent(id, checkpoint) {
@@ -1110,6 +1159,209 @@ function forkAgent(id, checkpoint) {
   }, 'Fork created');
 }
 
+// ------------------------------------------------------------------ teams
+
+const TEAM_STEPS = [['analyze', 'Analyze'], ['discuss', 'Discuss'], ['implement', 'Implement'], ['test', 'Test'], ['review', 'Review'], ['ready', 'Your call'], ['done', 'Done']];
+const STAGE_TEXT = { analyze: 'analyzing', discuss: 'discussing the analysis', implement: 'implementing', test: 'testing', review: 'reviewing', ready: 'approved, waiting for you', gaps: 'starting a round for the gaps', finalizing: 'opening the PR', done: 'done; ready for the next request', blocked: 'waiting for your decision', stopped: 'stopped' };
+const GOOD = new Set(['ready', 'agree', 'done', 'pass', 'approve']);
+const ROLE_NAME = (m) => `${m.role[0].toUpperCase()}${m.role.slice(1)}${m.n && teams.get(openTeamId)?.settings.critics > 1 ? ` ${m.n}` : ''}`;
+
+function teamBanner(a) {
+  if (!a.team) return '';
+  const t = teams.get(a.team.id);
+  const turn = t?.waiting?.some((w) => w.member === a.id && !w.verdict);
+  return `<div class="bl-banner team">👥 <b>${esc(a.team.role)}</b> on team <b>${esc(t?.name ?? a.team.id)}</b>${t?.mode === 'lead' ? ` · quest ${t.quest ?? 1}` : ''}${t ? ` · ${esc(STAGE_TEXT[t.stage] ?? t.stage)}${t.loop > 1 ? ` · round ${t.loop}` : ''}` : ''}${turn ? ' · <b>its turn</b>' : ''}
+    <span class="spacer"></span><button class="small primary" data-team-open="${a.team.id}">Open team</button></div>`;
+}
+
+function openTeam(id) {
+  openTeamId = id;
+  teamFile = null;
+  renderTeam();
+  if (!$('#team-dialog').open) $('#team-dialog').showModal();
+  act(async () => teams.set(id, await api('GET', `/teams/${id}`)));
+}
+
+function teamSteps(t) {
+  const at = ['finalizing', 'gaps'].includes(t.stage) ? 'ready' : t.stage;
+  const idx = TEAM_STEPS.findIndex(([k]) => k === at);
+  const stopped = ['blocked', 'stopped'].includes(t.stage);
+  // Where a blocked or stopped team got to: the last step anyone finished.
+  const reached = stopped ? Math.max(0, ...t.history.map((h) => TEAM_STEPS.findIndex(([k]) => k === h.stage))) : idx;
+  return TEAM_STEPS.filter(([k]) => k !== 'discuss' || t.settings.critics)
+    .map(([k, label]) => {
+      const i = TEAM_STEPS.findIndex(([x]) => x === k);
+      const cls = stopped ? (i < reached ? 'done' : i === reached ? 'stop' : '') : i < idx || t.stage === 'done' ? 'done' : i === idx ? 'now' : '';
+      return `<span class="team-step ${cls}">${label}</span>`;
+    })
+    .join('<span class="team-arrow">→</span>');
+}
+
+function renderTeam() {
+  const dlg = $('#team-dialog');
+  if (!dlg.open && !openTeamId) return;
+  const t = teams.get(openTeamId);
+  if (!t) {
+    $('#team-body').innerHTML = '<p class="hint">Loading…</p>';
+    return;
+  }
+  if ($('#team-body').contains(document.activeElement) && document.activeElement.tagName === 'TEXTAREA') return;
+  const openQuests = new Set([...$('#team-body').querySelectorAll('details.team-quest[open] summary b')].map((b) => b.textContent));
+  $('#team-title').textContent = `Team: ${t.name}`;
+  $('#team-stop').hidden = ['done', 'stopped'].includes(t.stage);
+  const memberOf = (id) => t.members.find((m) => m.id === id);
+  const gate =
+    t.stage === 'ready'
+      ? `<div class="team-gate">${t.gaps
+          ? `<b>✓ The reviewer approved the work so far, but parts of the request aren't built yet:</b>
+             ${t.gapList ? `<article class="md team-gaps">${md(t.gapList)}</article>` : ''}
+             <div class="need-actions"><button class="small primary" data-team-act="fix-gaps" title="Another round, from analysis to review, for what is missing (and your note below)">Run a gap round</button></div>
+             <p class="hint">Or take the work as it is:</p>`
+          : '<b>✓ The reviewer approved it.</b> Look at the review and the changes, then:'}
+          <div class="need-actions">${t.remote
+            ? `<button class="small${t.gaps ? '' : ' primary'}" data-team-act="pr">Open a pull request</button>`
+            : `<button class="small${t.gaps ? '' : ' primary'}" data-team-act="merge" title="Fast-forward ${esc(t.folder ?? '')} to the team's branch">Merge into main</button>
+               <button class="small" data-team-act="publish" title="The implementer creates a private GitHub repository, pushes and opens a pull request">Publish to GitHub</button>`}
+            <button class="small" data-team-act="keep">Keep the branch${t.remote ? ', no PR' : ''}</button></div>
+          <textarea id="team-note" rows="2" placeholder="${t.gaps ? 'A note for the gap round, or' : 'Or say'} what should change; the implementer fixes it and it goes through test and review again"></textarea>
+          <div class="need-actions"><button class="small" data-team-act="send-back">Send back</button></div></div>`
+      : t.stage === 'blocked'
+        ? `<div class="team-gate blocked"><b>${esc(t.blocked.reason)}</b>
+            <textarea id="team-note" rows="2" placeholder="Optional note for the next round"></textarea>
+            <div class="need-actions">
+              ${t.blocked.at !== 'member' ? `<button class="small primary" data-team-act="continue">${t.blocked.at === 'discuss' ? 'One more round' : 'One more fix round'}</button>` : ''}
+              ${t.blocked.at === 'discuss' ? '<button class="small" data-team-act="skip" title="Implement the latest analysis as it is">Implement the latest analysis</button>' : ''}
+              ${t.blocked.at === 'loops' ? '<button class="small" data-team-act="skip" title="Move to your final review without another round">Accept as is</button>' : ''}
+            </div></div>`
+        : t.stage === 'done' && t.gaps
+          ? `<div class="team-gate"><b>The last review lists parts of the request that aren't built yet:</b>
+              ${t.gapList ? `<article class="md team-gaps">${md(t.gapList)}</article>` : ''}
+              <textarea id="team-note" rows="2" placeholder="Optional note for the gap round"></textarea>
+              <div class="need-actions"><button class="small primary" data-team-act="fix-gaps">Run a gap round</button></div></div>`
+          : '';
+  const quest = t.mode === 'lead' || t.quest > 1 ? `<p class="hint">Quest ${t.quest ?? 1}${t.gapRound ? ` · gap round ${t.gapRound}` : ''}${t.quests?.length ? ` · ${t.quests.length} earlier` : ''}</p>` : '';
+  const handoffs = (list) =>
+    `<ul class="team-timeline">${list.slice().reverse().map((h) => {
+      const m = memberOf(h.member);
+      const who = t.mode === 'lead' ? `${h.role[0].toUpperCase()}${h.role.slice(1)}${h.n && t.settings.critics > 1 ? ` ${h.n}` : ''}` : m ? ROLE_NAME(m) : esc(h.role);
+      return `<li><span><b>${who}</b> <span class="hint">${ago(h.at)}${h.loop > 1 && ['implement', 'test', 'review'].includes(h.stage) ? ` · r${h.loop}` : ''}</span></span>
+        <span><span class="verdict-word ${GOOD.has(h.verdict) ? 'good' : 'bad'}">${esc(h.verdict)}</span></span>
+        <span><a href="#" data-team-file="${esc(h.file)}">${esc(h.file.split('/').pop())}</a> <span class="summary">${esc(h.summary)}</span></span></li>`;
+    }).join('')}</ul>`;
+  const asking = t.mode === 'lead' && t.stage !== 'stopped'
+    ? `<form class="team-ask" id="team-ask"><b>New request</b> <span class="hint">The lead runs it through the team as the next quest. You can also just type it in the lead's terminal.</span>
+        <textarea id="team-ask-text" rows="2" placeholder="Now add a --json flag to the output"></textarea>
+        <div class="need-actions"><button class="small${['ready', 'done'].includes(t.stage) ? ' primary' : ''}">Give to the team</button></div></form>`
+    : '';
+  $('#team-body').innerHTML = `
+    ${quest}
+    <p>${esc(t.request ?? t.intent)}</p>
+    <div class="team-steps">${teamSteps(t)}</div>
+    <p class="hint">${esc(STAGE_TEXT[t.stage] ?? t.stage)}${t.settings.critics ? ` · analysis round ${t.round}` : ''} · build round ${t.loop}${t.newProject ? ` · new project in <code>${esc(t.newProject)}</code>` : ''}${t.branch ? ` · branch <code>${esc(t.branch)}</code>` : ''}${t.outcome === 'merged' ? ' · merged into main' : ''}${t.costUsd ? ` · ${fmtCost(t.costUsd)}` : ''}
+      ${t.prs.map((p) => ` · <a href="${esc(p.url)}" target="_blank" rel="noopener">PR #${p.number ?? ''}</a>`).join('')}</p>
+    ${gate}
+    <div class="race-table-wrap"><table class="race-table">
+      <tr><th>Role</th><th>Agent</th><th>Status</th><th>Model</th><th>Cost</th></tr>
+      ${t.members.map((m) => {
+        const a = agents.get(m.id);
+        const st = a ? statusOf(a) : m.status;
+        return `<tr class="${m.turn ? 'diffing' : ''}"><td><b>${ROLE_NAME(m)}</b>${m.turn ? ' <span class="tag open">its turn</span>' : ''}</td>
+          <td>${a ? `<a href="#${m.id}" data-team-goto="${m.id}">${esc(m.name)}</a>` : '<span class="hint">deleted</span>'}</td>
+          <td><span class="pill ${st}">${pillText(st)}</span></td><td>${m.model ? esc(m.model) : '<span class="hint">default</span>'}</td><td>${fmtCost(m.costUsd)}${t.mode === 'lead' ? ' <span class="hint">with sub-agents</span>' : ''}</td></tr>`;
+      }).join('')}
+      ${t.subagents.map((r) => {
+        const last = t.history.findLast((h) => h.role === r.role);
+        return `<tr><td>${r.role[0].toUpperCase()}${r.role.slice(1)}</td><td><span class="hint">sub-agent of the lead</span></td>
+          <td>${last ? `<span class="verdict-word ${GOOD.has(last.verdict) ? 'good' : 'bad'}">${esc(last.verdict)}</span> <span class="hint">${ago(last.at)}</span>` : '<span class="hint">—</span>'}</td>
+          <td>${r.model ? esc(r.model) : '<span class="hint">lead\'s</span>'}</td><td></td></tr>`;
+      }).join('')}
+    </table></div>
+    <h3>Handoffs</h3>
+    ${t.history.length ? handoffs(t.history) : '<p class="hint">Nothing handed off yet. The analyst is reading the code.</p>'}
+    ${asking}
+    ${t.quests?.length
+      ? `<h3>Earlier requests</h3>${t.quests.slice().reverse().map((q) => `<details class="team-quest"><summary><b>Quest ${q.n}</b> ${esc(q.request.split('\n')[0].slice(0, 100))} <span class="hint">· ${esc(q.outcome)}</span></summary>${q.history.length ? handoffs(q.history) : '<p class="hint">No handoffs.</p>'}</details>`).join('')}`
+      : ''}
+    ${teamFile ? `<div class="need-head"><b>${esc(teamFile.name.split('/').pop())}</b><span class="spacer"></span><button class="small ghost" data-team-file-close>Close</button></div><article class="md team-file">${md(teamFile.markdown)}</article>` : ''}`;
+  for (const d of $('#team-body').querySelectorAll('details.team-quest')) if (openQuests.has(d.querySelector('summary b').textContent)) d.open = true;
+}
+
+$('#team-body').addEventListener('submit', (e) => {
+  if (e.target.id !== 'team-ask') return;
+  e.preventDefault();
+  const text = $('#team-ask-text').value.trim();
+  if (!text) return;
+  const id = openTeamId;
+  act(async () => {
+    teams.set(id, await api('POST', `/teams/${id}/ask`, { text }));
+    $('#team-ask-text').value = '';
+    renderTeam();
+  }, 'Given to the lead');
+});
+
+$('#team-close').onclick = () => {
+  openTeamId = null;
+  $('#team-dialog').close();
+};
+$('#team-stop').onclick = () => {
+  if (!confirm("Stop the team? Its agents close (you can resume them); nothing is deleted.")) return;
+  act(async () => teams.set(openTeamId, await api('POST', `/teams/${openTeamId}/stop`)), 'Team stopped');
+};
+$('#team-delete').onclick = () => {
+  const id = openTeamId;
+  const all = confirm('Also delete the team\'s agents and its worktree?\n\nOK: delete them too. Cancel: keep the agents, forget only the team.');
+  act(async () => {
+    await api('DELETE', `/teams/${id}${all ? '?agents=1' : ''}`);
+    teams.delete(id);
+    openTeamId = null;
+    $('#team-dialog').close();
+    render();
+  });
+};
+$('#team-body').addEventListener('click', (e) => {
+  const t = e.target;
+  const go = t.closest('[data-team-goto]');
+  if (go) {
+    e.preventDefault();
+    openTeamId = null;
+    $('#team-dialog').close();
+    showTab('agents');
+    return select(go.dataset.teamGoto);
+  }
+  const file = t.closest('[data-team-file]');
+  if (file) {
+    e.preventDefault();
+    return act(async () => {
+      teamFile = await api('GET', `/teams/${openTeamId}/files/${encodeURIComponent(file.dataset.teamFile)}`);
+      renderTeam();
+      $('#team-body .team-file')?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    });
+  }
+  if (t.closest('[data-team-file-close]')) {
+    teamFile = null;
+    return renderTeam();
+  }
+  const b = t.closest('[data-team-act]');
+  if (!b) return;
+  const note = $('#team-note')?.value.trim() || undefined;
+  const id = openTeamId;
+  const calls = {
+    pr: () => api('POST', `/teams/${id}/finalize`, { mode: 'pr' }),
+    publish: () => api('POST', `/teams/${id}/finalize`, { mode: 'publish' }),
+    merge: () => api('POST', `/teams/${id}/finalize`, { mode: 'merge' }),
+    keep: () => api('POST', `/teams/${id}/finalize`, { mode: 'keep' }),
+    'send-back': () => api('POST', `/teams/${id}/send-back`, { note }),
+    'fix-gaps': () => api('POST', `/teams/${id}/fix-gaps`, { note }),
+    continue: () => api('POST', `/teams/${id}/resume`, { action: 'continue', note }),
+    skip: () => api('POST', `/teams/${id}/resume`, { action: 'skip', note }),
+  };
+  const done = { pr: 'The implementer is opening the PR', publish: 'The implementer is publishing it to GitHub', merge: 'Merged into main', keep: 'Done; the branch is kept', 'send-back': 'Sent back to the implementer', 'fix-gaps': 'A gap round started', continue: 'Another round started', skip: 'Moving on' };
+  act(async () => {
+    teams.set(id, await calls[b.dataset.teamAct]());
+    renderTeam();
+  }, done[b.dataset.teamAct]);
+});
+
 // ------------------------------------------------------------------ races
 
 function raceBanner(a) {
@@ -1124,6 +1376,7 @@ function openRace(id) {
   openRaceId = id;
   raceDiff = null;
   renderRace();
+  renderTeam();
   if (!$('#race-dialog').open) $('#race-dialog').showModal();
   act(async () => races.set(id, await api('GET', `/races/${id}`)));
 }
@@ -1294,7 +1547,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
@@ -1311,7 +1564,9 @@ function renderDetail() {
         <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>
         <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>
       </div>
     </div>
@@ -1322,6 +1577,7 @@ function renderDetail() {
         ${it.status === 'review' ? `<span class="spacer"></span><button class="small primary" data-backlog-accept="${it.id}">Accept</button> <button class="small" data-backlog-reopen="${it.id}">Reopen</button>` : ''}</div>`;
     })()}
     ${a.error ? `<div class="error-box">${esc(a.error)}</div>` : ''}
+    ${!running && a.closedBy === 'cleanup' ? `<p class="hint">Closed by clean up ${ago(a.closedAt)}, after a while with no activity. Resume it any time${a.keep ? '' : ', or mark it Keep'}.</p>` : ''}
     ${a.status === 'preparing'
       ? `<div class="progress-box">
           <div>${esc(progressText(a.progress) || 'Preparing workspace…')}</div>
@@ -1339,6 +1595,7 @@ function renderDetail() {
       : ''}
     ${a.runtime.attention ? `<div class="error-box">${esc(a.runtime.attention)}: the agent is waiting for an answer. Open its terminal to respond.</div>` : ''}
     ${raceBanner(a)}
+    ${teamBanner(a)}
     ${a.forkOf ? `<div class="bl-banner">⑂ Forked from <a href="#${a.forkOf.agentId}" data-goto="${a.forkOf.agentId}">${esc(a.forkOf.name)}</a>${a.forkOf.checkpoint ? ` at checkpoint ${a.forkOf.checkpoint}` : ''} ${ago(a.forkOf.at)}</div>` : ''}
     ${(() => {
       const items = needsFor(a, { both: true });
@@ -1372,7 +1629,7 @@ 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>
@@ -1444,6 +1701,7 @@ function render() {
   renderBacklog();
   renderInbox();
   renderRace();
+  renderTeam();
   renderDocDialog();
   renderDetail();
   term.syncOverlay();
@@ -2620,12 +2878,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':
@@ -2676,6 +2932,9 @@ $('#detail-body').addEventListener('click', async (e) => {
     case 'refresh':
       act(async () => upsert(await api('POST', `/agents/${a.id}/refresh`)), 'Refreshed');
       break;
+    case 'keep':
+      act(async () => upsert(await api('PATCH', `/agents/${a.id}`, { keep: !a.keep })), a.keep ? 'Clean up may close or delete it again' : 'Kept: clean up leaves it alone');
+      break;
     case 'delete': {
       const cancelNote = a.status === 'preparing' ? '\n\nThis also cancels the workspace setup (clone / checkout) in progress.' : '';
       if (!confirm(`Delete agent "${a.name}"? Its session IDs will be forgotten by AI Agent Manager.${cancelNote}`)) return;
@@ -2722,6 +2981,27 @@ $('#filter').addEventListener('input', (e) => {
   renderList();
 });
 
+$('#recent-days').value = recent.days;
+$('#recent-on').addEventListener('change', (e) => {
+  recent.on = e.target.checked;
+  saveRecent();
+  renderList();
+});
+$('#recent-days').addEventListener('input', (e) => {
+  const n = Math.floor(Number(e.target.value));
+  if (!(n >= 1)) return;
+  recent.days = Math.min(3650, n);
+  recent.on = true;
+  saveRecent();
+  renderList();
+});
+$('#recent-bar').addEventListener('click', (e) => {
+  if (e.target.id !== 'recent-off') return;
+  recent.on = false;
+  saveRecent();
+  renderList();
+});
+
 // ------------------------------------------------------------------ new agents dialog
 
 const dialog = $('#new-dialog');
@@ -2743,7 +3023,8 @@ function syncWhen() {
   const when = dialog.querySelector('input[name="when"]:checked').value;
   dialog.querySelector('.now-only').hidden = when !== 'now';
   dialog.querySelector('.race-only').hidden = when !== 'race';
-  dialog.querySelector('button[type=submit]').textContent = when === 'backlog' ? 'Add to backlog' : when === 'race' ? 'Start race' : 'Create agents';
+  dialog.querySelector('.team-only').hidden = when !== 'team';
+  dialog.querySelector('button[type=submit]').textContent = { backlog: 'Add to backlog', race: 'Start race', team: 'Start team' }[when] ?? 'Create agents';
 }
 for (const r of dialog.querySelectorAll('input[name="when"]')) r.addEventListener('change', syncWhen);
 $('#new-btn').onclick = () => openNewDialog('now');
@@ -2755,6 +3036,44 @@ $('#new-form').addEventListener('submit', async (e) => {
     .split('\n')
     .map((s) => s.trim())
     .filter(Boolean);
+  if (f.get('when') === 'team') {
+    // "analyst=opus reviewer=opus"
+    const models = Object.fromEntries(
+      String(f.get('roleModels') || '')
+        .split(/[\s,]+/)
+        .map((p) => p.split('='))
+        .filter(([k, v]) => k && v),
+    );
+    try {
+      const team = await api('POST', '/teams', {
+        intent: intents.join('\n'),
+        critics: Number(f.get('critics')),
+        mode: f.get('teamMode') || undefined,
+        testCommand: f.get('teamTest') || undefined,
+        // Empty: the defaults (3 rounds each; gap rounds 0, so it asks first).
+        ...Object.fromEntries(['maxRounds', 'maxLoops', 'gapRounds'].filter((k) => String(f.get(k) ?? '') !== '').map((k) => [k, Number(f.get(k))])),
+        models,
+        repo: f.get('repo') || undefined,
+        dir: f.get('dir') || undefined,
+        base: f.get('base') || undefined,
+        project: f.get('project') || undefined,
+        permissionMode: f.get('permissionMode') || undefined,
+        model: f.get('model') || undefined,
+        engine: f.get('engine') || undefined,
+        priority: Number(f.get('priority')),
+      });
+      teams.set(team.id, team);
+      dialog.close();
+      e.target.reset();
+      syncWhen();
+      openTeam(team.id);
+      toast(team.mode === 'lead' ? 'Team started: one lead session with sub-agents' : `Team started: ${team.members.length} agents`);
+    } catch (err) {
+      $('#new-error').textContent = err.message;
+      $('#new-error').hidden = false;
+    }
+    return;
+  }
   if (f.get('when') === 'race') {
     // "model", "model | approach" or "| approach", one attempt per line.
     const variants = String(f.get('variants') || '')
@@ -2948,6 +3267,8 @@ function handleEvent(msg) {
     if (msg.projects) projectsState = msg.projects;
     races.clear();
     for (const r of msg.races ?? []) races.set(r.id, r);
+    teams.clear();
+    for (const t of msg.teams ?? []) teams.set(t.id, t);
     msg.agents.forEach(watchDocs);
     if (selectedId && !agents.has(selectedId)) selectedId = null;
     if (openTermOnLoad && selectedId) {
@@ -2966,6 +3287,10 @@ function handleEvent(msg) {
     races.set(msg.race.id, msg.race);
   } else if (msg.t === 'race-removed') {
     races.delete(msg.id);
+  } else if (msg.t === 'team') {
+    teams.set(msg.team.id, msg.team);
+  } else if (msg.t === 'team-removed') {
+    teams.delete(msg.id);
   } else if (msg.t === 'backlog') {
     backlogState = msg.backlog;
   } else if (msg.t === 'projects') {
@@ -3112,6 +3437,254 @@ $('#remote-content').addEventListener('click', async (e) => {
   renderRemote();
 });
 
+// ------------------------------------------------------------------ clean up old agents
+
+const CLEANUP_TEXT = {
+  'close-delete': 'Checked every few hours: idle agents are closed, and closed ones deleted, on their own.',
+  close: 'Checked every few hours: idle agents are closed on their own. Deleting waits for you.',
+  manual: 'Nothing happens on its own. Use the buttons below when you want to clean up.',
+  off: 'Nothing happens on its own.',
+};
+
+async function loadCleanup() {
+  const c = await api('GET', '/cleanup');
+  const f = $('#cleanup-form');
+  f.strategy.value = c.strategy;
+  f.closeAfterDays.value = c.closeAfterDays;
+  f.deleteAfterDays.value = c.deleteAfterDays;
+  const list = (rows, age) => `<ul>${rows.map((x) => `<li><a href="#${x.id}" data-cleanup-goto="${x.id}">${esc(x.name)}</a><span class="hint">${age(x)}${x.reason ? ` · ${esc(x.reason)}` : ''}</span></li>`).join('')}</ul>`;
+  $('#cleanup-plan').innerHTML = `<p class="hint" id="cleanup-what">${CLEANUP_TEXT[c.strategy]}</p>
+    ${c.close.length ? `<h4>Due to close (${c.close.length})</h4>${list(c.close, (x) => `idle ${x.idleDays} days`)}` : ''}
+    ${c.delete.length ? `<h4>Due to delete (${c.delete.length})</h4>${list(c.delete, (x) => `closed ${x.closedDays} days`)}` : ''}
+    ${c.kept.length ? `<h4>Old, but left alone (${c.kept.length})</h4>${list(c.kept, (x) => (x.closedDays != null ? `closed ${x.closedDays} days` : `idle ${x.idleDays} days`))}` : ''}
+    ${!c.close.length && !c.delete.length && !c.kept.length ? '<p>Nothing is due.</p>' : ''}
+    ${c.lastRun ? `<p class="hint">Last run ${ago(c.lastRun.at)} (${c.lastRun.by === 'schedule' ? 'on its own' : 'by you'}): closed ${c.lastRun.closed.length}, deleted ${c.lastRun.deleted.length}${c.lastRun.failed?.length ? `, ${c.lastRun.failed.length} failed` : ''}.</p>` : ''}`;
+  $('#cleanup-run-close').disabled = !c.close.length;
+  $('#cleanup-run').disabled = !c.close.length && !c.delete.length;
+  $('#cleanup-error').hidden = true;
+  return c;
+}
+
+$('#cleanup-btn').onclick = async () => {
+  $('#cleanup-dialog').showModal();
+  await loadCleanup().catch((err) => toast(err.message));
+};
+$('#cleanup-close').onclick = () => $('#cleanup-dialog').close();
+$('#cleanup-form').strategy.addEventListener('change', (e) => {
+  if ($('#cleanup-what')) $('#cleanup-what').textContent = `${CLEANUP_TEXT[e.target.value]} (Save to apply.)`;
+});
+$('#cleanup-form').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const f = e.target;
+  try {
+    await api('PUT', '/cleanup', { strategy: f.strategy.value, closeAfterDays: Number(f.closeAfterDays.value), deleteAfterDays: Number(f.deleteAfterDays.value) });
+    toast('Clean up settings saved');
+    await loadCleanup();
+  } catch (err) {
+    $('#cleanup-error').textContent = err.message;
+    $('#cleanup-error').hidden = false;
+  }
+});
+async function runCleanup(del) {
+  const c = await loadCleanup();
+  const n = c.close.length + (del ? c.delete.length : 0);
+  if (!n) return;
+  if (del && c.delete.length && !confirm(`Delete ${c.delete.length} agent${c.delete.length > 1 ? 's' : ''} and their worktrees${c.close.length ? `, and close ${c.close.length}` : ''}?\n\n${c.delete.map((x) => x.name).join('\n')}`)) return;
+  const r = await api('POST', '/cleanup/run', { delete: del });
+  toast(`Closed ${r.closed.length}, deleted ${r.deleted.length}${r.failed.length ? `; ${r.failed.length} failed: ${r.failed[0].reason}` : ''}`);
+  await loadCleanup();
+}
+$('#cleanup-run-close').onclick = () => runCleanup(false).catch((err) => toast(err.message));
+$('#cleanup-run').onclick = () => runCleanup(true).catch((err) => toast(err.message));
+$('#cleanup-plan').addEventListener('click', (e) => {
+  const go = e.target.closest('[data-cleanup-goto]');
+  if (!go) return;
+  e.preventDefault();
+  $('#cleanup-dialog').close();
+  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 ?? '') : '');
+
+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 ?? '';
+  $('#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 (!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'];
+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() {