@dfsramos/foreman 0.0.0-stage → 0.2.0

package/public/app.js

@@ -0,0 +1,1200 @@
+// Foreman console. Plain ES module, no dependencies and no build step.
+// All text that originates from the tracker or the agent is inserted as text nodes, never as HTML.
+
+import { agentsTab, resetAgentsDraft, updateAgentsUsage } from './agents.js';
+import { importsTab, resetImports } from './imports.js';
+import { isEditingProject, projectsTab, resetProjectForm } from './projects.js';
+import { resetTasks, tasksTab } from './tasks.js';
+import {
+  $,
+  api,
+  banner,
+  button,
+  currentWindows,
+  dayLabel,
+  externalLink,
+  fill,
+  fmtClock,
+  fmtCountdown,
+  fmtDateTime,
+  fmtDuration,
+  fmtPercent,
+  fmtReset,
+  fmtTime,
+  h,
+  icon,
+  prLabel,
+  runDurationMs,
+  windowLabel,
+} from './ui.js';
+
+const PAGE_SIZE = 50;
+const MAX_LOG_LINES = 2000;
+const STEPS = [
+  ['claim', 'Claim'],
+  ['worktree', 'Worktree'],
+  ['agent', 'Agent running'],
+  ['pull_request', 'Pull request'],
+  ['report', 'Report'],
+];
+const OUTCOMES = {
+  running: { label: 'Running', tone: 'run', icon: 'spinner' },
+  succeeded: { label: 'Succeeded', tone: 'ok', icon: 'check' },
+  failed: { label: 'Failed', tone: 'fail', icon: 'cross' },
+  aborted: { label: 'Aborted', tone: 'muted', icon: 'slash' },
+  blocked: { label: 'Needs input', tone: 'warn', icon: 'warning' },
+};
+const LOG_KINDS = {
+  foreman: 'system',
+  assistant: 'agent',
+  tool_use: 'tool',
+  tool_result: 'result',
+  result: 'result',
+};
+const state = {
+  status: null,
+  projects: null,
+  agents: null,
+  viewRunId: null,
+  connected: true,
+  loadError: null,
+  recent: [],
+  counts: { running: 0, succeeded: 0, failed: 0, aborted: 0, blocked: 0 },
+  history: { filter: 'all', projectId: null, runs: [], total: 0 },
+  tab: 'run',
+  selectedId: null,
+  detail: null,
+  live: { runId: null, events: [], follow: true, unseen: 0 },
+  actionError: null,
+};
+
+// References to elements that are patched in place between full renders.
+let ui = {};
+let mainKey = '';
+
+/* ---------- API ---------- */
+
+async function loadAll() {
+  try {
+    const [status, projects, agents] = await Promise.all([
+      api('GET', '/api/status'),
+      api('GET', '/api/projects'),
+      api('GET', '/api/agents'),
+    ]);
+    if (!status.ok || !projects.ok || !agents.ok) {
+      throw new Error(status.data?.error ?? projects.data?.error ?? agents.data?.error ?? 'request failed');
+    }
+    state.status = status.data;
+    state.projects = projects.data;
+    state.agents = agents.data;
+    state.loadError = null;
+    await loadRuns();
+  } catch (error) {
+    state.loadError = error instanceof Error ? error.message : String(error);
+  }
+  render();
+}
+
+async function loadRuns() {
+  const recent = await api('GET', `/api/runs?limit=${PAGE_SIZE}`);
+  if (recent.ok) {
+    state.recent = recent.data.runs;
+    state.counts = recent.data.counts;
+  }
+  await loadHistory(false);
+}
+
+async function loadHistory(more) {
+  const { filter, runs } = state.history;
+  const offset = more ? runs.length : 0;
+  const limit = more ? PAGE_SIZE : Math.max(PAGE_SIZE, runs.length);
+  const project = state.history.projectId === null ? '' : `&project=${state.history.projectId}`;
+  const query = `limit=${limit}&offset=${offset}${filter === 'all' ? '' : `&status=${filter}`}${project}`;
+  const response = await api('GET', `/api/runs?${query}`);
+  if (!response.ok) return;
+  state.history.runs = more ? [...runs, ...response.data.runs] : response.data.runs;
+  state.history.total = response.data.total;
+  state.counts = response.data.counts;
+}
+
+async function loadDetail(id) {
+  const [run, events] = await Promise.all([api('GET', `/api/runs/${id}`), api('GET', `/api/runs/${id}/events`)]);
+  if (state.selectedId !== id) return;
+  state.detail = run.ok ? { run: run.data, events: events.data?.events ?? [] } : { missing: true };
+  renderMain(true);
+}
+
+async function runnerAction(path) {
+  state.actionError = null;
+  const response = await api('POST', path);
+  if (response.ok) {
+    // The response is a snapshot from before the action took effect (an abort finishes moments later),
+    // and the event stream may already have delivered something newer, so ask again rather than apply it.
+    const status = await api('GET', '/api/status');
+    if (status.ok) applyStatus(status.data);
+  } else {
+    state.actionError = response.data?.error ?? `Request failed (${response.status})`;
+    renderHeader();
+  }
+}
+
+/* ---------- state updates ---------- */
+
+const projectOf = (id) => state.projects?.projects.find((project) => project.id === id) ?? null;
+const projectName = (run) => run.projectName ?? '—';
+const projectStatus = (id) => state.status?.projects.find((project) => project.id === id) ?? null;
+
+const agentName = (id) => state.agents?.agents.find((agent) => agent.id === id)?.name ?? id;
+
+/** The active run shown on the Run tab: the one the user picked, or the oldest still running. */
+function viewedRun() {
+  const runs = state.status?.activeRuns ?? [];
+  const picked = runs.find((run) => run.id === state.viewRunId) ?? runs[0] ?? null;
+  state.viewRunId = picked?.id ?? null;
+  return picked;
+}
+
+function applyStatus(status) {
+  state.status = status;
+  for (const run of status.activeRuns) upsertRun(run);
+  const viewed = viewedRun();
+  if (viewed && viewed.id !== state.live.runId) startLive(viewed.id);
+  renderHeader();
+  renderBanner();
+  renderTabs();
+  renderMain();
+}
+
+function upsertRun(run) {
+  for (const list of [state.recent, state.history.runs]) {
+    const index = list.findIndex((item) => item.id === run.id);
+    if (index >= 0) list[index] = run;
+    else if (
+      list === state.recent ||
+      ((state.history.filter === 'all' || state.history.filter === run.status) &&
+        (state.history.projectId === null || state.history.projectId === run.projectId))
+    ) {
+      list.unshift(run);
+    }
+  }
+  const active = state.status?.activeRuns ?? [];
+  const position = active.findIndex((item) => item.id === run.id);
+  if (position >= 0) active[position] = run;
+  if (state.detail?.run?.id === run.id) state.detail.run = run;
+}
+
+function applyRun(run) {
+  const known = state.recent.find((item) => item.id === run.id);
+  const finished = run.status !== 'running' && known?.status !== run.status;
+  upsertRun(run);
+  if (finished || !known) {
+    // Counts and filtered lists change when a run starts or ends.
+    void loadRuns().then(() => {
+      renderTabs();
+      if (!isFormTab()) renderMain(true);
+    });
+  }
+  if (state.tab === 'run' && ui.runHead && state.viewRunId === run.id) {
+    fill(ui.runHead, runHeadContent(run));
+  } else if (state.tab === 'run' && ui.strip && (state.status?.activeRuns ?? []).some((item) => item.id === run.id)) {
+    fill(ui.strip, stripContent());
+  } else if (!isFormTab()) {
+    renderMain(true);
+  }
+}
+
+// The Agents, Import and Tasks tabs, and the Projects tab while a project is being edited, hold unsaved input, so live updates never rebuild them.
+const isFormTab = () => state.tab === 'agents' || state.tab === 'import' || state.tab === 'tasks' || (state.tab === 'projects' && isEditingProject());
+
+function startLive(runId) {
+  state.live = { runId, events: [], follow: true, unseen: 0 };
+  void api('GET', `/api/runs/${runId}/events`).then((response) => {
+    if (!response.ok || state.live.runId !== runId) return;
+    const seen = new Set(state.live.events.map((event) => event.id));
+    state.live.events = [...response.data.events.filter((event) => !seen.has(event.id)), ...state.live.events].sort(
+      (a, b) => a.id - b.id,
+    );
+    if (state.tab === 'run') renderMain(true);
+  });
+}
+
+function applyLog(event) {
+  if (event.runId === state.live.runId && !state.live.events.some((known) => known.id === event.id)) {
+    state.live.events.push(event);
+    if (ui.liveLog) {
+      appendLogLine(ui.liveLog, event);
+      if (state.live.follow) ui.liveLog.scrollTop = ui.liveLog.scrollHeight;
+      else state.live.unseen += 1;
+      updateLogToolbar();
+    }
+  }
+  if (state.detail?.run?.id === event.runId && !state.detail.events.some((known) => known.id === event.id)) {
+    state.detail.events.push(event);
+    if (ui.detailLog) appendLogLine(ui.detailLog, event);
+  }
+}
+
+/* ---------- routing ---------- */
+
+function readHash() {
+  const [tab, id] = location.hash.replace(/^#/, '').split('/');
+  state.tab = ['run', 'history', 'projects', 'tasks', 'import', 'agents'].includes(tab) ? tab : 'run';
+  const selected = state.tab === 'history' && /^\d+$/.test(id ?? '') ? Number(id) : null;
+  if (selected !== state.selectedId) {
+    state.selectedId = selected;
+    state.detail = null;
+    if (selected !== null) void loadDetail(selected);
+  }
+}
+
+function go(hash) {
+  if (location.hash === hash) return;
+  location.hash = hash;
+}
+
+/* ---------- shared components ---------- */
+
+function outcomeBadge(status, large = false) {
+  const outcome = OUTCOMES[status];
+  return h('span', { class: `badge tone-${outcome.tone} ${large ? 'large' : ''}` }, icon(outcome.icon, 12), outcome.label);
+}
+
+const outcomeIcon = (status) =>
+  h('span', { class: `text-${OUTCOMES[status].tone}` }, icon(OUTCOMES[status].icon, 14, OUTCOMES[status].label));
+
+function stateBadge(state, detail, large = false) {
+  const cls = `badge ${large ? 'large' : ''}`;
+  const extra = detail ? h('span', { class: 'detail' }, `· ${detail}`) : null;
+  if (state === 'idle') return h('span', { class: `${cls} tone-ok` }, h('span', { class: 'pulse-dot' }), 'Idle', extra);
+  if (state === 'working') return h('span', { class: `${cls} tone-run` }, icon('spinner', 12), 'Working', extra);
+  if (state === 'stopping') return h('span', { class: `${cls} tone-warn` }, icon('pause', 12), 'Stopping', extra);
+  return h('span', { class: `${cls} tone-muted` }, icon('square', 12), 'Stopped', extra);
+}
+
+function runnerBadge(status) {
+  const runs = status.activeRuns.length;
+  const runsText = runs === 1 ? status.activeRuns[0].identifier : runs > 1 ? `${runs} runs` : null;
+  if (status.state === 'idle') return stateBadge('idle', 'polling', true);
+  if (status.state === 'working') return stateBadge('working', runsText, true);
+  if (status.state === 'stopping') return stateBadge('stopping', runsText ? `halts after ${runsText}` : null, true);
+  return stateBadge('stopped', null, true);
+}
+
+function stepper(run, bare = false) {
+  const current = STEPS.findIndex(([key]) => key === run.step);
+  return h(
+    'div',
+    { class: `stepper ${bare ? 'bare' : ''}` },
+    STEPS.map(([, label], index) => {
+      let kind = 'pending';
+      if (run.status === 'succeeded' || index < current) kind = 'done';
+      else if (index === current) kind = { running: 'active', failed: 'fail', aborted: 'abort', blocked: 'abort' }[run.status];
+      const mark = { done: 'tick', active: 'spinner', fail: 'x', abort: 'line' }[kind];
+      return h(
+        'div',
+        { class: `step ${kind}` },
+        h('div', { class: 'track' }, h('span', { class: 'dot' }, mark ? icon(mark, 11) : String(index + 1)), h('span', { class: 'line' })),
+        h('div', { class: 'label', title: label }, label),
+      );
+    }),
+  );
+}
+
+function logLine(event) {
+  const kind = LOG_KINDS[event.kind] ?? 'system';
+  let text = event.text;
+  let lead = null;
+  if (event.kind === 'tool_use') {
+    const space = text.indexOf(' ');
+    lead = h('b', null, space < 0 ? text : text.slice(0, space));
+    text = space < 0 ? '' : text.slice(space);
+  }
+  return h(
+    'div',
+    { class: `log-line kind-${kind}` },
+    h('span', { class: 'time' }, fmtTime(event.ts)),
+    h('span', { class: 'kind' }, kind),
+    h('span', { class: 'text' }, lead, text),
+  );
+}
+
+function appendLogLine(body, event) {
+  body.querySelector('.log-empty')?.remove();
+  body.append(logLine(event));
+  while (body.childElementCount > MAX_LOG_LINES) body.firstElementChild.remove();
+}
+
+function logBody(events, extraClass = '') {
+  const shown = events.slice(-MAX_LOG_LINES);
+  return h(
+    'div',
+    { class: `log-body ${extraClass}`, tabindex: '0' },
+    shown.length > 0 ? shown.map(logLine) : h('div', { class: 'log-empty' }, 'No events yet.'),
+  );
+}
+
+/** Marks a run that addressed review feedback or reviewed the pull request, as opposed to one that implemented the issue. */
+const reviewTag = (run) => {
+  if (run.kind === 'agent_review') {
+    return h('span', { class: 'badge tone-muted review-tag', title: `Reviewing the pull request, round ${run.round}` }, `agent review ${run.round}`);
+  }
+  return run.kind === 'review' ? h('span', { class: 'badge tone-muted review-tag', title: `Addressing review feedback, round ${run.round}` }, `review ${run.round}`) : null;
+};
+
+function runRow(run) {
+  let result = null;
+  if (run.status === 'succeeded' && run.prUrl) {
+    result = h('a', { href: run.prUrl, target: '_blank', rel: 'noopener noreferrer', onclick: (e) => e.stopPropagation() }, prLabel(run.prUrl), ' ↗');
+  } else if (run.status === 'failed') {
+    result = h('span', { class: 'text-fail' }, run.failureReason ?? 'Failed');
+  } else if (run.status === 'aborted') {
+    result = h('span', { class: 'muted' }, run.failureReason ?? 'Aborted');
+  } else if (run.status === 'blocked') {
+    result = h('span', { class: 'text-warn' }, run.failureReason ?? 'Needs input');
+  } else if (run.status === 'running') {
+    result = h('span', { class: 'muted' }, STEPS.find(([key]) => key === run.step)?.[1] ?? '');
+  }
+  return h(
+    'button',
+    { class: `run-row ${run.status === 'failed' ? 'failed' : ''}`, type: 'button', onclick: () => go(`#history/${run.id}`) },
+    h('span', null, outcomeBadge(run.status)),
+    h('span', { class: 'issue' }, h('span', { class: 'id' }, run.identifier), reviewTag(run), h('span', { class: 'ellipsis' }, run.title)),
+    h('span', { class: 'num ellipsis', title: projectName(run) }, projectName(run)),
+    h('span', { class: 'num ellipsis' }, agentName(run.agent)),
+    h('span', { class: 'num' }, fmtClock(run.startedAt)),
+    h('span', { class: 'num' }, fmtDuration(runDurationMs(run))),
+    h('span', { class: 'result ellipsis', title: run.failureReason ?? '' }, result),
+  );
+}
+
+function compactRow(run) {
+  const outcome = OUTCOMES[run.status];
+  const parts = [outcome.label, projectName(run), agentName(run.agent), fmtClock(run.startedAt), fmtDuration(runDurationMs(run))];
+  if (run.failureReason) parts.push(run.failureReason);
+  const selected = state.selectedId === run.id;
+  return h(
+    'button',
+    {
+      class: `compact-row ${run.status === 'failed' ? 'failed' : ''} ${selected ? 'selected' : ''}`,
+      type: 'button',
+      'aria-current': selected ? 'true' : null,
+      onclick: () => go(`#history/${run.id}`),
+    },
+    h('span', { class: 'line1' }, outcomeIcon(run.status), h('span', { class: 'id' }, run.identifier), h('span', { class: 'ellipsis' }, run.title)),
+    h('span', { class: 'line2 ellipsis' }, parts.join(' · ')),
+  );
+}
+
+function copyButton(text, label) {
+  const control = h(
+    'button',
+    {
+      class: 'icon-btn tiny',
+      type: 'button',
+      title: label,
+      'aria-label': label,
+      onclick: async () => {
+        try {
+          await navigator.clipboard.writeText(text);
+          control.title = 'Copied';
+        } catch {
+          control.title = 'Copy failed';
+        }
+      },
+    },
+    icon('copy', 12),
+  );
+  return control;
+}
+
+/* ---------- header, banner, tabs ---------- */
+
+/** Countdown to a project's next poll, or what stands in for it. */
+function nextPollText(project) {
+  if (!project || project.state === 'stopped') return '—';
+  if (project.state === 'stopping') return 'none · stopping';
+  if (!project.nextPollAt) return 'now';
+  return fmtCountdown(new Date(project.nextPollAt) - Date.now());
+}
+
+/** Plan usage of each enabled agent that reports it, for the header. */
+function planUsage() {
+  return (state.agents?.agents ?? [])
+    .filter((agent) => agent.enabled && currentWindows(agent.usage).length > 0)
+    .map((agent) => {
+      const windows = currentWindows(agent.usage);
+      const title = [
+        ...windows.map(([key, window]) => `${windowLabel(key, true)}: ${fmtPercent(window.utilization)}, resets ${fmtReset(window.resetsAt)}`),
+        agent.paused ? `Paused: ${agent.paused}` : null,
+      ]
+        .filter(Boolean)
+        .join('\n');
+      return h(
+        'span',
+        { class: `nowrap ${agent.paused ? 'text-fail' : ''}`, title },
+        `${agent.name} `,
+        windows.map(([key, window], index) => [
+          index > 0 ? ' · ' : null,
+          `${windowLabel(key)} `,
+          h('span', { class: agent.paused ? '' : 'value' }, fmtPercent(window.utilization)),
+        ]),
+        agent.paused ? ' · paused' : null,
+      );
+    });
+}
+
+function runUsage(run) {
+  if (!run.usageDelta) return '—';
+  const parts = Object.entries(run.usageDelta.windows)
+    .filter(([, change]) => change !== null)
+    .map(([key, change]) => `+${fmtPercent(change)} of ${windowLabel(key)}`);
+  if (parts.length === 0) return '—';
+  return `≈ ${parts.join(' · ')}${run.usageDelta.shared ? ' (shared with overlapping runs)' : ''}`;
+}
+
+function renderHeader() {
+  const status = state.status;
+  if (!status) {
+    fill($('#header'), h('span', { class: 'wordmark' }, 'foreman'));
+    return;
+  }
+  const started = status.projects.filter((project) => project.state === 'idle' || project.state === 'working').length;
+  const stopped = status.projects.filter((project) => project.state === 'stopped').length;
+  const controls = [];
+  if (state.actionError) controls.push(h('span', { class: 'action-error', role: 'alert' }, state.actionError));
+  if (stopped > 0) {
+    controls.push(
+      button(status.projects.length > 1 ? 'Start all' : 'Start', {
+        variant: started === 0 ? 'primary' : '',
+        iconName: 'play',
+        onclick: () => runnerAction('/api/runner/start'),
+      }),
+    );
+  }
+  if (started > 0) {
+    controls.push(
+      button(status.projects.length > 1 ? 'Stop all' : 'Stop', {
+        iconName: 'square',
+        title: 'Stop polling; runs in progress are allowed to finish',
+        onclick: () => runnerAction('/api/runner/stop'),
+      }),
+    );
+  }
+
+  fill(
+    $('#header'),
+    h('span', { class: 'wordmark' }, 'foreman'),
+    h(
+      'div',
+      { class: 'header-mid' },
+      runnerBadge(status),
+      h(
+        'div',
+        { class: 'poll-info' },
+        h(
+          'span',
+          { class: 'nowrap' },
+          status.projects.length === 0
+            ? 'No projects'
+            : [h('span', { class: 'value' }, String(started)), ` of ${status.projects.length} ${status.projects.length === 1 ? 'project' : 'projects'} started`],
+        ),
+        planUsage(),
+      ),
+    ),
+    h('div', { class: 'controls' }, controls),
+  );
+}
+
+function renderBanner() {
+  const items = [];
+  if (state.loadError) {
+    items.push(banner('fail', 'Could not load foreman', state.loadError));
+  } else if (!state.connected) {
+    items.push(banner('warn', 'Disconnected from foreman', 'Live updates are paused. Retrying…'));
+  }
+  for (const project of state.status?.projects ?? []) {
+    if (!project.lastError) continue;
+    const split = project.lastError.indexOf(': ');
+    const title = split > 0 ? project.lastError.slice(0, split) : 'Error';
+    const detail = split > 0 ? project.lastError.slice(split + 2) : project.lastError;
+    const polling =
+      project.state === 'idle' ? `${/[.!?]$/.test(detail) ? '' : '.'} Foreman keeps polling this project; nothing is picked up from it until this clears.` : '';
+    const agentRelated = project.lastError.startsWith('No agent can take work');
+    const target = agentRelated ? 'agents' : 'projects';
+    items.push(
+      banner(
+        'fail',
+        `${project.name}: ${title}`,
+        detail + polling,
+        state.tab !== target ? button(agentRelated ? 'Open agents' : 'Open projects', { onclick: () => go(`#${target}`) }) : null,
+      ),
+    );
+  }
+  fill($('#banner'), items);
+}
+
+function renderTabs() {
+  const total = Object.values(state.counts).reduce((sum, n) => sum + n, 0);
+  const historyExtra =
+    state.counts.failed > 0
+      ? h('span', { class: 'pill' }, `✕ ${state.counts.failed} failed`)
+      : h('span', { class: 'count' }, String(total));
+  const tab = (id, label, extra) =>
+    h(
+      'button',
+      { class: 'tab', type: 'button', role: 'tab', 'aria-selected': String(state.tab === id), onclick: () => go(`#${id}`) },
+      label,
+      extra,
+    );
+  $('#tabs').setAttribute('role', 'tablist');
+  const installed = (state.agents?.agents ?? []).filter((agent) => agent.available).length;
+  const agentsExtra = state.agents ? h('span', { class: 'count' }, String(installed)) : null;
+  fill(
+    $('#tabs'),
+    tab('run', 'Run'),
+    tab('history', 'History', historyExtra),
+    tab('projects', 'Projects', state.projects ? h('span', { class: 'count' }, String(state.projects.projects.length)) : null),
+    tab('tasks', 'Tasks'),
+    tab('import', 'Import'),
+    tab('agents', 'Agents', agentsExtra),
+  );
+}
+
+/* ---------- run tab ---------- */
+
+function runHeadContent(run) {
+  const timeoutMinutes = projectOf(run.projectId)?.agentTimeoutMinutes ?? 30;
+  const timeoutMs = timeoutMinutes * 60_000;
+  ui.elapsed = h('span', { class: 'figure' }, fmtCountdown(runDurationMs(run)));
+  ui.elapsedTimeoutMs = timeoutMs;
+  ui.elapsedBar = h('i', { style: `width:${Math.min(100, (runDurationMs(run) / timeoutMs) * 100)}%` });
+  ui.elapsedRun = run;
+  return [
+    h(
+      'div',
+      { class: 'top' },
+      h('div', { class: 'issue' }, externalLink(run.url, run.identifier, 'issue-link'), h('h1', { class: 'title-l' }, run.title)),
+      h(
+        'div',
+        { class: 'elapsed' },
+        ui.elapsed,
+        h('span', { class: 'caption' }, `elapsed · timeout ${timeoutMinutes}m`),
+        h('span', { class: 'bar thin' }, ui.elapsedBar),
+      ),
+    ),
+    h(
+      'div',
+      { class: 'meta' },
+      run.branch
+        ? h('span', { class: 'item' }, icon('branch', 12), run.branch, copyButton(run.branch, 'Copy branch name'))
+        : null,
+      h('span', { class: 'item' }, `started ${fmtTime(run.startedAt)}`),
+      h('span', { class: 'item' }, `agent ${agentName(run.agent)}`),
+      h('span', { class: 'item' }, `project ${projectName(run)}`),
+      run.kind === 'review' ? h('span', { class: 'item' }, `review round ${run.round}`) : null,
+      run.kind === 'agent_review' ? h('span', { class: 'item' }, `agent review, round ${run.round}`) : null,
+      h('span', { class: 'spacer' }),
+      button('Abort run', { variant: 'danger small', iconName: 'cross', iconSize: 12, onclick: () => openAbortDialog(run) }),
+    ),
+    stepper(run),
+  ];
+}
+
+/** One button per active run, to choose which one the Run tab shows. */
+function stripContent() {
+  return state.status.activeRuns.map((run) =>
+    h(
+      'button',
+      {
+        class: 'strip-item',
+        type: 'button',
+        'aria-pressed': String(run.id === state.viewRunId),
+        onclick: () => {
+          if (state.viewRunId === run.id) return;
+          state.viewRunId = run.id;
+          startLive(run.id);
+          renderMain(true);
+        },
+      },
+      icon('spinner', 12),
+      h('span', { class: 'mono' }, run.identifier),
+      h('span', { class: 'ellipsis' }, run.title),
+      h('span', { class: 'faint nowrap' }, `${projectName(run)} · ${agentName(run.agent)} · ${STEPS.find(([key]) => key === run.step)?.[1] ?? ''}`),
+    ),
+  );
+}
+
+function updateLogToolbar() {
+  if (!ui.logControls) return;
+  const { follow, unseen, events } = state.live;
+  ui.logCount.textContent = `${events.length} events`;
+  fill(
+    ui.logControls,
+    follow
+      ? button('Auto-scroll on', {
+          variant: 'small',
+          iconName: 'pause',
+          onclick: () => {
+            state.live.follow = false;
+            updateLogToolbar();
+          },
+        })
+      : [
+          h('span', { class: 'badge tone-warn' }, icon('pause', 10), `Paused · ${unseen} new ${unseen === 1 ? 'line' : 'lines'}`),
+          button('Jump to latest ↓', {
+            variant: 'small primary',
+            onclick: () => {
+              state.live.follow = true;
+              state.live.unseen = 0;
+              ui.liveLog.scrollTop = ui.liveLog.scrollHeight;
+              updateLogToolbar();
+            },
+          }),
+        ],
+  );
+}
+
+/** Which agents can take work right now and how many of each one's slots are in use. */
+function agentsRow() {
+  const agents = state.agents?.agents ?? [];
+  const chip = (agent) => {
+    const inUse = (state.status?.activeRuns ?? []).filter((run) => run.agent === agent.id).length;
+    let tone = 'muted';
+    let mark = icon('square', 10);
+    let text;
+    let title;
+    if (!agent.available) {
+      text = 'not installed';
+      title = `${agent.name} was not found on this machine`;
+    } else if (!agent.enabled) {
+      text = 'off';
+      title = `${agent.name} is installed but not enabled`;
+    } else if (agent.paused) {
+      tone = 'fail';
+      mark = icon('pause', 10);
+      text = `paused · ${inUse}/${agent.maxConcurrent}`;
+      title = `Paused: ${agent.paused}`;
+    } else if (agent.maxConcurrent === 0) {
+      mark = icon('pause', 10);
+      text = 'no slots';
+      title = `${agent.name} is enabled with a concurrency of 0`;
+    } else {
+      const free = agent.maxConcurrent - inUse;
+      tone = inUse > 0 ? 'run' : 'ok';
+      mark = inUse > 0 ? icon('spinner', 11) : icon('tick', 11);
+      text = `${inUse}/${agent.maxConcurrent} in use`;
+      title = `${agent.name}: ${free} of ${agent.maxConcurrent} ${agent.maxConcurrent === 1 ? 'slot' : 'slots'} free`;
+    }
+    return h('span', { class: `badge tone-${tone} agent-chip`, title }, mark, h('b', null, agent.name), text);
+  };
+  return h(
+    'div',
+    { class: 'card agents-row', role: 'group', 'aria-label': 'Agents' },
+    h('h2', { class: 'heading' }, 'Agents'),
+    agents.length > 0 ? agents.map(chip) : h('span', { class: 'faint' }, 'Loading…'),
+    h('span', { class: 'spacer' }),
+    h('a', { href: '#agents' }, 'Manage →'),
+  );
+}
+
+/** One row per project: what it is doing and a button to start or stop it. */
+function projectsCard() {
+  const projects = state.status.projects;
+  ui.countdowns = [];
+  const priorityTone = { high: 'run', normal: 'muted', low: 'muted' };
+  const row = (project) => {
+    const countdown = h('span', { class: 'mono' }, nextPollText(project));
+    ui.countdowns.push({ el: countdown, id: project.id });
+    const started = project.state === 'idle' || project.state === 'working';
+    const runs = project.activeRunIds.length;
+    return h(
+      'div',
+      { class: 'project-row' },
+      h('span', { class: 'name ellipsis', title: project.name }, project.name),
+      h('span', { class: `badge tone-${priorityTone[project.priority]}`, title: 'Priority when projects compete for an agent' }, project.priority),
+      stateBadge(project.state, runs > 0 ? `${runs} ${runs === 1 ? 'run' : 'runs'}` : null),
+      h(
+        'span',
+        { class: 'ellipsis muted', title: project.lastError ?? '' },
+        project.lastError
+          ? h('span', { class: 'text-fail' }, project.lastError)
+          : project.state === 'stopped'
+            ? 'Not polling'
+            : [
+                project.waiting ? 'Work waiting for a free agent · ' : null,
+                'next poll ',
+                countdown,
+                project.inReview + project.awaitingApproval > 0 ? ` · ${project.inReview} in review · ${project.awaitingApproval} pending approval` : null,
+              ],
+      ),
+      project.state === 'stopped'
+        ? button('Start', { variant: 'small', iconName: 'play', onclick: () => runnerAction(`/api/projects/${project.id}/start`) })
+        : started
+          ? button('Stop', { variant: 'small', iconName: 'square', onclick: () => runnerAction(`/api/projects/${project.id}/stop`) })
+          : h('span'),
+    );
+  };
+  return h(
+    'div',
+    { class: 'card' },
+    h('div', { class: 'card-head' }, h('h2', null, 'Projects'), h('span', { class: 'spacer' }), h('a', { href: '#projects' }, 'Manage →')),
+    projects.map(row),
+  );
+}
+
+function workingView(run) {
+  ui.runHead = h('div', { class: 'card run-head' }, runHeadContent(run));
+  ui.liveLog = logBody(state.live.events);
+  ui.liveLog.addEventListener('scroll', () => {
+    const distance = ui.liveLog.scrollHeight - ui.liveLog.scrollTop - ui.liveLog.clientHeight;
+    const follow = distance <= 40;
+    if (follow !== state.live.follow) {
+      state.live.follow = follow;
+      if (follow) state.live.unseen = 0;
+      updateLogToolbar();
+    }
+  });
+  ui.logCount = h('span', { class: 'count' });
+  ui.logControls = h('span', { class: 'actions' });
+  const others = state.recent.filter((item) => item.status !== 'running').slice(0, 5);
+  const several = state.status.activeRuns.length > 1;
+  ui.strip = several ? h('div', { class: 'strip', role: 'group', 'aria-label': 'Active runs' }, stripContent()) : null;
+
+  const view = h(
+    'div',
+    { class: 'columns' },
+    h(
+      'div',
+      { class: 'col-main' },
+      ui.strip,
+      ui.runHead,
+      h(
+        'div',
+        { class: 'card log-card' },
+        h('div', { class: 'log-toolbar' }, h('h2', { class: 'heading' }, 'Agent log'), ui.logCount, h('span', { class: 'spacer' }), ui.logControls),
+        ui.liveLog,
+      ),
+    ),
+    h(
+      'div',
+      { class: 'col-aside' },
+      projectsCard(),
+      others.length > 0
+        ? h(
+            'div',
+            { class: 'card' },
+            h('div', { class: 'card-head' }, h('h2', null, 'Recent runs'), h('span', { class: 'spacer' }), h('a', { href: '#history' }, 'All →')),
+            others.map(compactRow),
+          )
+        : null,
+    ),
+  );
+  queueMicrotask(() => {
+    updateLogToolbar();
+    if (state.live.follow && ui.liveLog) ui.liveLog.scrollTop = ui.liveLog.scrollHeight;
+  });
+  return [agentsRow(), view];
+}
+
+function recentRunsCard() {
+  const runs = state.recent.slice(0, 6);
+  if (runs.length === 0) {
+    return h(
+      'div',
+      { class: 'empty' },
+      h('strong', null, 'No runs yet'),
+      'Each issue foreman picks up appears here with its outcome, duration and pull request.',
+    );
+  }
+  return h(
+    'div',
+    { class: 'card' },
+    h('div', { class: 'card-head' }, h('h2', null, 'Recent runs'), h('span', { class: 'spacer' }), h('a', { href: '#history' }, 'View history →')),
+    runs.map(runRow),
+  );
+}
+
+/** Nothing is running: either there is nothing configured yet, or the projects are idle or stopped. */
+function quietView() {
+  if (state.status.projects.length === 0) {
+    return [
+      agentsRow(),
+      h(
+        'div',
+        { class: 'narrow' },
+        h(
+          'div',
+          { class: 'card stopped-card' },
+          h('h1', { class: 'title-l' }, 'No projects yet'),
+          h(
+            'p',
+            null,
+            'A project connects a tracker to a repository. Foreman polls the tracker for waiting issues and hands each one to an agent that works in that repository.',
+          ),
+          h('div', { class: 'actions' }, button('Add a project', { variant: 'primary tall', onclick: () => go('#projects') })),
+        ),
+      ),
+    ];
+  }
+  return [agentsRow(), projectsCard(), recentRunsCard()];
+}
+
+function runTab() {
+  const viewed = viewedRun();
+  return viewed ? workingView(viewed) : quietView();
+}
+
+/* ---------- history tab ---------- */
+
+function setProjectFilter(projectId) {
+  state.history.projectId = projectId;
+  state.history.runs = [];
+  void loadHistory(false).then(() => renderMain(true));
+}
+
+function projectFilter() {
+  const projects = state.projects?.projects ?? [];
+  if (projects.length < 2 && state.history.projectId === null) return null;
+  const select = h(
+    'select',
+    { class: 'input project-filter', 'aria-label': 'Filter by project' },
+    h('option', { value: '', selected: state.history.projectId === null }, 'All projects'),
+    projects.map((project) => h('option', { value: String(project.id), selected: state.history.projectId === project.id }, project.name)),
+  );
+  select.addEventListener('change', () => setProjectFilter(select.value === '' ? null : Number(select.value)));
+  return select;
+}
+
+function setFilter(filter) {
+  state.history.filter = filter;
+  state.history.runs = [];
+  void loadHistory(false).then(() => renderMain(true));
+}
+
+function filterBar() {
+  const total = Object.values(state.counts).reduce((sum, n) => sum + n, 0);
+  const segment = (id, label, count, mark) =>
+    h(
+      'button',
+      { class: 'segment', type: 'button', 'aria-pressed': String(state.history.filter === id), onclick: () => setFilter(id) },
+      mark,
+      label,
+      h('span', { class: 'count' }, String(count)),
+    );
+  return h(
+    'div',
+    { class: 'segmented', role: 'group', 'aria-label': 'Filter by outcome' },
+    segment('all', 'All', total),
+    segment('succeeded', 'Succeeded', state.counts.succeeded, '✓ '),
+    segment('failed', 'Failed', state.counts.failed, '✕ '),
+    segment('aborted', 'Aborted', state.counts.aborted, '⊘ '),
+    segment('blocked', 'Needs input', state.counts.blocked, '? '),
+  );
+}
+
+function loadMoreFoot() {
+  if (state.history.runs.length >= state.history.total) return null;
+  return h(
+    'div',
+    { class: 'list-foot' },
+    button(`Load more (${state.history.total - state.history.runs.length} older)`, {
+      onclick: () => void loadHistory(true).then(() => renderMain(true)),
+    }),
+  );
+}
+
+function historyTable() {
+  const rows = [];
+  let lastDay = null;
+  for (const run of state.history.runs) {
+    const day = dayLabel(run.startedAt);
+    if (day !== lastDay) {
+      rows.push(h('div', { class: 'day-row' }, day));
+      lastDay = day;
+    }
+    rows.push(runRow(run));
+  }
+  return h(
+    'div',
+    { class: 'card' },
+    h('div', { class: 'toolbar' }, filterBar(), h('span', { class: 'spacer' }), projectFilter()),
+    h('div', { class: 'runs-head' }, ...['Outcome', 'Issue', 'Project', 'Agent', 'Started', 'Duration', 'Result'].map((label) => h('span', null, label))),
+    rows.length > 0
+      ? rows
+      : h('div', { class: 'list-empty' }, state.history.filter === 'all' ? 'No runs yet.' : `No ${state.history.filter} runs.`),
+    loadMoreFoot(),
+  );
+}
+
+function detailCard() {
+  const close = h('button', { class: 'icon-btn', type: 'button', 'aria-label': 'Close details', onclick: () => go('#history') }, icon('x', 14));
+  if (!state.detail) return h('div', { class: 'card detail-head' }, h('span', { class: 'muted' }, 'Loading…'));
+  if (state.detail.missing) {
+    return h('div', { class: 'card detail-head' }, h('div', { class: 'top' }, h('span', { class: 'muted' }, 'Run not found.'), h('span', { class: 'spacer' }), close));
+  }
+  const { run, events } = state.detail;
+
+  let outcomeBox = null;
+  if (run.status === 'blocked') {
+    outcomeBox = h(
+      'div',
+      { class: 'failure-box blocked' },
+      h('div', { class: 'title' }, run.failureReason ?? OUTCOMES.blocked.label),
+      h('div', { class: 'text' }, 'The agent stopped to ask for this. The question is on the issue, which stays claimed; add the answer to its description and move it back to retry.'),
+    );
+  } else if (run.status === 'failed' || run.status === 'aborted') {
+    const actions = [];
+    if (run.worktreePath) {
+      actions.push(
+        button('Copy cd to worktree', {
+          iconName: 'copy',
+          iconSize: 12,
+          onclick: (event) => {
+            const label = event.currentTarget.lastChild;
+            void navigator.clipboard.writeText(`cd ${run.worktreePath}`).then(
+              () => (label.textContent = 'Copied'),
+              () => (label.textContent = 'Copy failed'),
+            );
+          },
+        }),
+      );
+    }
+    outcomeBox = h(
+      'div',
+      { class: `failure-box ${run.status === 'aborted' ? 'aborted' : ''}` },
+      h('div', { class: 'title' }, run.failureReason ?? OUTCOMES[run.status].label),
+      h(
+        'div',
+        { class: 'text' },
+        'The issue was left claimed in its tracker, with a comment.',
+        run.worktreePath ? ' The worktree is kept for inspection; remove it and its branch before retrying.' : '',
+      ),
+      actions.length > 0 ? h('div', { class: 'actions' }, actions) : null,
+    );
+  }
+
+  const facts = [
+    ['Kind', run.kind === 'agent_review' ? `Agent review, round ${run.round}` : run.kind === 'review' ? `Review feedback, round ${run.round}` : 'Implementation'],
+    ['Project', projectName(run)],
+    ['Agent', agentName(run.agent)],
+    ['Branch', run.branch ?? '—'],
+    ['Worktree', run.worktreePath ? `${run.worktreePath}${run.status === 'succeeded' ? '' : ' (kept)'}` : '—'],
+    ['Started', fmtDateTime(run.startedAt)],
+    ['Ended', run.finishedAt ? `${fmtDateTime(run.finishedAt)} · ${fmtDuration(runDurationMs(run))}` : 'still running'],
+    ['Pull request', run.prUrl ? externalLink(run.prUrl, prLabel(run.prUrl)) : 'None'],
+    ['Turns', run.numTurns ?? '—'],
+    ['Plan usage (estimate)', runUsage(run)],
+    ['Cost', run.costUsd === null ? '—' : `$${run.costUsd.toFixed(2)}`],
+  ];
+
+  ui.detailLog = logBody(events, 'fixed');
+  queueMicrotask(() => {
+    if (ui.detailLog) ui.detailLog.scrollTop = ui.detailLog.scrollHeight;
+  });
+  return h(
+    'div',
+    { class: 'card' },
+    h(
+      'div',
+      { class: 'detail-head' },
+      h('div', { class: 'top' }, outcomeBadge(run.status), externalLink(run.url, `${run.identifier} · open in the tracker`, 'issue-link'), h('span', { class: 'spacer' }), close),
+      h('h2', null, run.title),
+    ),
+    outcomeBox,
+    h('div', { class: 'section' }, stepper(run, true)),
+    h('div', { class: 'section kv-grid' }, facts.map(([key, value]) => h('div', null, h('div', { class: 'k' }, key), h('div', { class: 'v' }, value)))),
+    h(
+      'div',
+      { class: 'section' },
+      h('div', { class: 'log-toolbar' }, h('h3', { class: 'heading' }, 'Full log'), h('span', { class: 'count' }, `${events.length} events`)),
+      ui.detailLog,
+    ),
+  );
+}
+
+function historyTab() {
+  if (state.selectedId === null) return historyTable();
+  return h(
+    'div',
+    { class: 'split' },
+    h('div', { class: 'card split-list' }, h('div', { class: 'toolbar' }, filterBar()), state.history.runs.map(compactRow), loadMoreFoot()),
+    h('div', { class: 'split-detail' }, detailCard()),
+  );
+}
+
+/* ---------- abort dialog ---------- */
+
+function openAbortDialog(run) {
+  const dialog = $('#dialog');
+  const close = () => dialog.close();
+  dialog.setAttribute('aria-labelledby', 'dialog-title');
+  fill(
+    dialog,
+    h(
+      'div',
+      { class: 'body' },
+      h('span', { class: 'mark' }, icon('warning', 15)),
+      h(
+        'div',
+        null,
+        h('h2', { id: 'dialog-title' }, `Abort run for ${run.identifier}?`),
+        h(
+          'p',
+          null,
+          'The agent is killed immediately. The issue stays claimed in its tracker, with a comment',
+          run.worktreePath ? [', and the worktree is kept at ', h('span', { class: 'mono' }, run.worktreePath)] : null,
+          '.',
+        ),
+        h('p', null, 'To let it finish instead, stop its project: runs in progress are allowed to complete.'),
+      ),
+    ),
+    h(
+      'div',
+      { class: 'foot' },
+      button('Cancel', { variant: 'tall', onclick: close, autofocus: true }),
+      button('Abort run', {
+        variant: 'tall danger-solid',
+        onclick: () => {
+          close();
+          void runnerAction(`/api/runs/${run.id}/abort`);
+        },
+      }),
+    ),
+  );
+  dialog.showModal();
+}
+
+/* ---------- rendering ---------- */
+
+function renderMain(force = false) {
+  const main = $('#main');
+  if (!state.status || !state.projects) {
+    fill(main, state.loadError ? null : h('span', { class: 'muted' }, 'Loading…'));
+    return;
+  }
+  const { status } = state;
+  const projectsSignature = status.projects.map((p) => `${p.id}${p.state}${p.waiting}${p.lastError ?? ''}${p.activeRunIds.length}`).join('|');
+  // The run tab is only rebuilt when its shape changes; timers, steps and log lines are patched in place.
+  const key =
+    state.tab === 'run'
+      ? `run:${state.viewRunId ?? 'quiet'}:${status.activeRuns.length}:${projectsSignature}`
+      : state.tab === 'projects' && !isEditingProject()
+        ? // The project list shows live state; the form, once open, is left alone.
+          `projects:${projectsSignature}`
+        : `${state.tab}:${state.selectedId}`;
+  if (!force && key === mainKey) return;
+  mainKey = key;
+  ui = {};
+  const views = { run: runTab, history: historyTab, projects: projectsView, tasks: tasksView, import: importView, agents: agentsView };
+  fill(main, views[state.tab]());
+}
+
+function agentsView() {
+  return agentsTab({
+    data: state.agents,
+    onChange: (data) => {
+      state.agents = data;
+      renderTabs();
+      renderMain(true);
+    },
+    rerender: () => renderMain(true),
+  });
+}
+
+function importView() {
+  return importsTab({ projects: state.projects.projects, rerender: () => renderMain(true) });
+}
+
+function tasksView() {
+  return tasksTab({ projects: state.projects.projects, rerender: () => renderMain(true) });
+}
+
+function projectsView() {
+  return projectsTab({
+    data: state.projects,
+    status: state.status,
+    agents: state.agents?.agents ?? [],
+    stateBadge,
+    nextPollText,
+    countdowns: (ui.countdowns = []),
+    onChange: (data) => {
+      state.projects = data;
+      // Creating or deleting a project changes the status list too.
+      void api('GET', '/api/status').then((status) => {
+        if (status.ok) applyStatus(status.data);
+        renderTabs();
+        renderMain(true);
+      });
+    },
+    action: runnerAction,
+    rerender: () => renderMain(true),
+  });
+}
+
+function render() {
+  renderHeader();
+  renderBanner();
+  renderTabs();
+  renderMain(true);
+}
+
+function tick() {
+  const status = state.status;
+  if (!status) return;
+  for (const { el, id } of ui.countdowns ?? []) {
+    el.textContent = nextPollText(projectStatus(id));
+  }
+  if (ui.elapsed && ui.elapsedRun) {
+    const elapsed = runDurationMs(ui.elapsedRun);
+    const timeoutMs = ui.elapsedTimeoutMs ?? 30 * 60_000;
+    ui.elapsed.textContent = fmtCountdown(elapsed);
+    ui.elapsedBar.style.width = `${Math.min(100, (elapsed / timeoutMs) * 100)}%`;
+  }
+}
+
+/* ---------- live updates ---------- */
+
+function connect() {
+  const source = new EventSource('/api/stream');
+  source.addEventListener('open', () => {
+    if (!state.connected) {
+      state.connected = true;
+      void loadAll();
+    }
+  });
+  source.addEventListener('error', () => {
+    if (state.connected) {
+      state.connected = false;
+      renderBanner();
+    }
+  });
+  source.addEventListener('status', (event) => applyStatus(JSON.parse(event.data)));
+  source.addEventListener('run', (event) => applyRun(JSON.parse(event.data)));
+  source.addEventListener('log', (event) => applyLog(JSON.parse(event.data)));
+  source.addEventListener('agents', (event) => {
+    state.agents = JSON.parse(event.data);
+    renderHeader();
+    renderBanner();
+    // The Agents tab holds unsaved input, so only its usage lines are refreshed.
+    if (state.tab === 'agents') updateAgentsUsage(state.agents);
+  });
+}
+
+window.addEventListener('hashchange', () => {
+  const previous = state.tab;
+  readHash();
+  if (previous === 'agents' && state.tab !== 'agents') resetAgentsDraft();
+  if (previous === 'projects' && state.tab !== 'projects') resetProjectForm();
+  if (previous === 'import' && state.tab !== 'import') resetImports();
+  if (previous === 'tasks' && state.tab !== 'tasks') resetTasks();
+  renderBanner();
+  renderTabs();
+  renderMain();
+});
+
+readHash();
+render();
+await loadAll();
+if (viewedRun()) startLive(state.viewRunId);
+connect();
+setInterval(tick, 1000);