ai-agentmanager 1.0.1 → 1.1.0

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
 
@@ -556,6 +573,11 @@ const copyBtn = (value) => `<button class="link" data-copy="${esc(value)}" title
 /** Agents waiting on you first, then running ones, then the rest. */
 const rank = (a) => (a.runtime.attention ? 0 : a.runtime.running ? 1 : 2);
 
+// Agents with no work and no input from you for a day sink below the active ones.
+const ACTIVE_MS = 24 * 3600 * 1000;
+const isActive = (a) =>
+  Boolean(a.runtime.attention || a.runtime.busy || a.status === 'preparing' || (a.activeAt && Date.now() - Date.parse(a.activeAt) < ACTIVE_MS));
+
 // Projects the user collapsed in the tree (kept per browser).
 const collapsed = new Set(
   (() => {
@@ -578,12 +600,14 @@ const prioChip = (p, { always = false } = {}) =>
 
 function agentItem(a) {
   const st = statusOf(a);
-  return `<li data-id="${a.id}" class="agent pr${a.priority ?? 2} ${a.id === selectedId ? 'selected' : ''}">
+  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>
     ${a.status === 'preparing' && a.progress ? `<div class="progress-line">${esc(progressText(a.progress))}</div>` : ''}
     <div class="meta">
       <span class="mono">${a.id}</span>
+      ${idle && a.activeAt ? `<span title="Idle: no work and no input from you for over a day">💤 ${ago(a.activeAt)}</span>` : ''}
       ${a.git?.branch ? `<span class="branch" title="${esc(a.git.branch)}">⎇ ${esc(a.git.branch)}</span>` : ''}
       ${a.prs.length ? `<span>${a.prs.length} PR</span>` : ''}
       ${a.bugs.length ? `<span>${a.bugs.length} bug</span>` : ''}
@@ -608,8 +632,15 @@ function projectGroups(list) {
   }
   const out = [...groups.values()];
   for (const g of out) {
-    // Highest priority first, then agents needing you, then running ones, then newest.
-    g.agents.sort((a, b) => (a.priority ?? 2) - (b.priority ?? 2) || rank(a) - rank(b) || b.createdAt.localeCompare(a.createdAt));
+    // Active in the last day first; then highest priority, agents needing you, running ones, most recent.
+    g.agents.sort(
+      (a, b) =>
+        isActive(b) - isActive(a) ||
+        (a.priority ?? 2) - (b.priority ?? 2) ||
+        rank(a) - rank(b) ||
+        (b.activeAt ?? b.createdAt).localeCompare(a.activeAt ?? a.createdAt),
+    );
+    g.active = g.agents.filter(isActive).length;
     g.top = Math.min(...g.agents.map((a) => a.priority ?? 2));
     g.running = g.agents.filter((a) => a.runtime.running).length;
     g.waiting = g.agents.filter((a) => a.runtime.attention).length;
@@ -623,7 +654,13 @@ function projectGroups(list) {
   }
   const special = (g) => (g.key === 'general' ? 1 : g.key === 'other' ? 2 : 0);
   return out.sort(
-    (a, b) => special(a) - special(b) || a.top - b.top || b.waiting - a.waiting || b.running - a.running || a.label.localeCompare(b.label),
+    (a, b) =>
+      special(a) - special(b) ||
+      (b.active > 0) - (a.active > 0) ||
+      a.top - b.top ||
+      b.waiting - a.waiting ||
+      b.running - a.running ||
+      a.label.localeCompare(b.label),
   );
 }
 
@@ -641,6 +678,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()];
@@ -652,8 +696,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' : ''}">
@@ -664,7 +714,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>` : ''}
@@ -824,12 +875,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 = [];
@@ -842,13 +894,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 } = {}) {
@@ -887,6 +945,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>
@@ -1002,6 +1065,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':
@@ -1075,6 +1140,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) {
@@ -1090,6 +1157,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) {
@@ -1104,6 +1374,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}`)));
 }
@@ -1292,6 +1563,7 @@ function renderDetail() {
         <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="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>
@@ -1302,6 +1574,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>
@@ -1319,6 +1592,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 });
@@ -1424,6 +1698,7 @@ function render() {
   renderBacklog();
   renderInbox();
   renderRace();
+  renderTeam();
   renderDocDialog();
   renderDetail();
   term.syncOverlay();
@@ -1725,11 +2000,107 @@ const term = {
     this.agentId = null;
     $('#term-wrap').hidden = true;
     $('#detail').classList.remove('with-term');
+    if (document.body.classList.contains('term-max')) setExpanded(false);
+    if (document.fullscreenElement) document.exitFullscreen();
   },
 };
 
 $('#term-close').onclick = () => term.close();
 $('#term-fit').onclick = () => term.refit();
+
+// ------------------------------------------------------------------ resizing, expanding, full screen
+
+const layoutPref = {
+  get(key) {
+    try {
+      return localStorage.getItem(`agentmgr.${key}`);
+    } catch {
+      return null;
+    }
+  },
+  set(key, value) {
+    try {
+      value == null ? localStorage.removeItem(`agentmgr.${key}`) : localStorage.setItem(`agentmgr.${key}`, value);
+    } catch {}
+  },
+};
+
+function applyLayout() {
+  const side = layoutPref.get('sideWidth');
+  const brief = layoutPref.get('briefHeight');
+  document.documentElement.style.setProperty('--side-w', side ? `${side}px` : '340px');
+  if (brief) document.documentElement.style.setProperty('--brief-h', `${brief}px`);
+  else document.documentElement.style.removeProperty('--brief-h');
+  $('#detail').classList.toggle('brief-sized', Boolean(brief));
+}
+applyLayout();
+
+/** Drag a handle; `move` gets the pointer position and returns the value to keep. */
+function dragHandle(el, axis, move, key) {
+  el.addEventListener('pointerdown', (e) => {
+    e.preventDefault();
+    el.setPointerCapture(e.pointerId);
+    el.classList.add('dragging');
+    document.body.classList.add('resizing', axis);
+    let value = null;
+    const onMove = (ev) => {
+      value = move(ev);
+      applyLayout();
+    };
+    const onUp = () => {
+      el.classList.remove('dragging');
+      document.body.classList.remove('resizing', axis);
+      el.removeEventListener('pointermove', onMove);
+      el.removeEventListener('pointerup', onUp);
+      if (value != null) layoutPref.set(key, Math.round(value));
+      term.refit();
+    };
+    el.addEventListener('pointermove', onMove);
+    el.addEventListener('pointerup', onUp);
+  });
+  el.addEventListener('dblclick', () => {
+    layoutPref.set(key, null);
+    applyLayout();
+    requestAnimationFrame(() => term.refit());
+  });
+}
+
+dragHandle($('#split-side'), 'cols', (ev) => {
+  const w = Math.min(Math.max(ev.clientX, 220), window.innerWidth * 0.6);
+  layoutPref.set('sideWidth', Math.round(w));
+  return w;
+}, 'sideWidth');
+
+dragHandle($('#split-term'), 'rows', (ev) => {
+  const top = $('#detail').getBoundingClientRect().top;
+  const h = Math.min(Math.max(ev.clientY - top, 60), $('#detail').clientHeight - 160);
+  layoutPref.set('briefHeight', Math.round(h));
+  return h;
+}, 'briefHeight');
+
+function setExpanded(on) {
+  document.body.classList.toggle('term-max', on);
+  $('#term-max').classList.toggle('on', on);
+  $('#term-max').textContent = on ? '⤡ Restore' : '⤢ Expand';
+  requestAnimationFrame(() => term.refit());
+}
+$('#term-max').onclick = () => setExpanded(!document.body.classList.contains('term-max'));
+$('#term-full').onclick = () => {
+  if (document.fullscreenElement) document.exitFullscreen();
+  else $('#term-wrap').requestFullscreen?.().catch(() => setExpanded(true));
+};
+document.addEventListener('fullscreenchange', () => {
+  const on = document.fullscreenElement === $('#term-wrap');
+  $('#term-full').classList.toggle('on', on);
+  $('#term-full').textContent = on ? '⛶ Exit full screen' : '⛶ Full screen';
+  requestAnimationFrame(() => term.refit());
+});
+document.addEventListener('keydown', (e) => {
+  if (e.ctrlKey && e.shiftKey && e.code === 'KeyE' && !$('#term-wrap').hidden) {
+    e.preventDefault();
+    setExpanded(!document.body.classList.contains('term-max'));
+  }
+}, true);
 $('#term-resume').onclick = () => {
   const id = term.agentId;
   if (isShell(term.kind)) {
@@ -2560,6 +2931,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;
@@ -2606,6 +2980,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');
@@ -2627,7 +3022,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');
@@ -2639,6 +3035,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') || '')
@@ -2832,6 +3266,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) {
@@ -2850,6 +3286,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') {
@@ -2996,6 +3436,73 @@ $('#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);
+});
+
 // ------------------------------------------------------------------ Slack alerts (from this computer)
 
 async function loadAlerts() {