@pat-lewczuk/cezar 0.1.0

package/web/app.js

@@ -0,0 +1,634 @@
+'use strict';
+
+/* cez cockpit — vanilla JS, no build step. Talks to the local server via
+   fetch + Server-Sent Events. */
+
+const $ = (sel, el = document) => el.querySelector(sel);
+
+const state = {
+  runs: new Map(),        // id -> RunRecord
+  selectedId: null,
+  runEs: null,            // per-run EventSource
+  lastSeq: 0,             // dedup across SSE reconnect replays
+  autoScroll: true,
+  workflows: [],
+  pendingImages: [],      // [{mediaType, data, preview}] queued for the next message
+  listView: 'active',     // 'active' | 'archived'
+};
+
+const STATUS_ORDER = { waiting: 0, review: 1, running: 2, queued: 3 };
+
+// ---- helpers ---------------------------------------------------------------
+
+function esc(s) {
+  return String(s ?? '')
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;');
+}
+
+function timeAgo(iso) {
+  if (!iso) return '';
+  const s = Math.max(0, (Date.now() - new Date(iso).getTime()) / 1000);
+  if (s < 60) return `${Math.floor(s)}s ago`;
+  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+  return `${Math.floor(s / 86400)}d ago`;
+}
+
+function fmtTokens(n) {
+  if (!n) return '0 tok';
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M tok`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k tok`;
+  return `${n} tok`;
+}
+
+function fmtCost(usd) {
+  if (!usd) return '';
+  return `$${usd >= 10 ? usd.toFixed(0) : usd.toFixed(2)}`;
+}
+
+function prBadge(run) {
+  if (!run.pullRequestUrl) return '';
+  const num = run.pullRequestUrl.split('/').pop();
+  return `<a class="pr-badge" href="${esc(run.pullRequestUrl)}" target="_blank" rel="noopener">PR #${esc(num)}</a>`;
+}
+
+function badge(status) {
+  return `<span class="badge ${esc(status)}">${esc(status)}</span>`;
+}
+
+async function getJson(url) {
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`${url} → ${res.status}`);
+  return res.json();
+}
+
+// ---- boot ------------------------------------------------------------------
+
+async function init() {
+  bindUi();
+  const [health, workflowsRes, runs] = await Promise.all([
+    getJson('/api/health'),
+    getJson('/api/workflows'),
+    getJson('/api/runs'),
+  ]);
+  renderHeader(health);
+  state.workflows = workflowsRes.workflows;
+  const select = $('#new-task select[name=workflow]');
+  select.innerHTML = state.workflows
+    .map((w) => `<option value="${esc(w.name)}" title="${esc(w.description ?? '')}">${esc(w.name)}</option>`)
+    .join('');
+  for (const run of runs) state.runs.set(run.id, run);
+  renderRunList();
+  connectGlobal();
+  const latest = sortedRuns()[0];
+  if (latest) selectRun(latest.id);
+}
+
+function renderHeader(health) {
+  const repoChip = $('#repo-chip');
+  if (health.repo) {
+    repoChip.hidden = false;
+    repoChip.textContent = `${health.repo.root.split('/').pop()} · ${health.repo.branch}`;
+  }
+  $('#env-chips').innerHTML = health.checks
+    .map((c) => `<span class="chip ${c.available ? 'ok' : 'bad'}" title="${esc(c.hint ?? c.version ?? '')}">${c.available ? '✓' : '✗'} ${esc(c.name)}</span>`)
+    .join('');
+}
+
+function connectGlobal() {
+  const es = new EventSource('/api/events');
+  es.addEventListener('run', (e) => {
+    const run = JSON.parse(e.data);
+    state.runs.set(run.id, run);
+    renderRunList();
+    if (run.id === state.selectedId) updateDetail(run);
+  });
+  es.addEventListener('run-deleted', (e) => {
+    const { id } = JSON.parse(e.data);
+    state.runs.delete(id);
+    renderRunList();
+    if (id === state.selectedId) {
+      state.selectedId = null;
+      $('#detail').innerHTML = '<div class="empty">Select a run — or start one.</div>';
+    }
+  });
+}
+
+// ---- UI events -------------------------------------------------------------
+
+function bindUi() {
+  $('#tabs').addEventListener('click', (e) => {
+    const btn = e.target.closest('button[data-view]');
+    if (!btn) return;
+    for (const b of $('#tabs').children) b.classList.toggle('active', b === btn);
+    for (const view of document.querySelectorAll('.view')) view.hidden = true;
+    const view = $(`#view-${btn.dataset.view}`);
+    view.hidden = false;
+    if (btn.dataset.view === 'repo') loadRepo();
+    if (btn.dataset.view === 'skills') loadSkills();
+  });
+
+  $('#new-task').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const form = e.target;
+    const errorBox = $('#form-error');
+    errorBox.hidden = true;
+    const body = {
+      task: form.task.value.trim(),
+      workflow: form.workflow.value,
+      model: form.model.value.trim() || undefined,
+    };
+    if (!body.task) return;
+    form.querySelector('button').disabled = true;
+    try {
+      const res = await fetch('/api/runs', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);
+      form.task.value = '';
+      state.runs.set(data.id, data);
+      renderRunList();
+      selectRun(data.id);
+    } catch (err) {
+      errorBox.textContent = err.message;
+      errorBox.hidden = false;
+    } finally {
+      form.querySelector('button').disabled = false;
+    }
+  });
+
+  $('#run-list').addEventListener('click', (e) => {
+    if (e.target.closest('a')) return; // PR links navigate, not select
+    const item = e.target.closest('.run-item');
+    if (item) selectRun(item.dataset.id);
+  });
+
+  $('#list-tabs').addEventListener('click', async (e) => {
+    const btn = e.target.closest('button[data-list]');
+    if (!btn) return;
+    if (btn.dataset.list === 'archive-finished') {
+      await fetch('/api/runs/archive-finished', { method: 'POST' });
+      return; // SSE run updates re-render the list
+    }
+    state.listView = btn.dataset.list;
+    renderRunList();
+  });
+
+  $('#detail').addEventListener('click', async (e) => {
+    const btn = e.target.closest('button[data-action]');
+    if (!btn) return;
+    const id = state.selectedId;
+    if (!id) return;
+    if (btn.dataset.action === 'cancel') {
+      await fetch(`/api/runs/${id}/cancel`, { method: 'POST' });
+    } else if (btn.dataset.action === 'delete') {
+      if (!confirm('Delete this run and its log?')) return;
+      await fetch(`/api/runs/${id}`, { method: 'DELETE' });
+    } else if (btn.dataset.action === 'finish') {
+      await fetch(`/api/runs/${id}/finish`, { method: 'POST' });
+    } else if (btn.dataset.action === 'archive') {
+      const run = state.runs.get(id);
+      await fetch(`/api/runs/${id}/archive`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ archived: !run?.archived }),
+      });
+    } else if (btn.dataset.action === 'continue') {
+      const res = await fetch(`/api/runs/${id}/continue`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({}),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        alertBar(data.error ?? 'cannot continue');
+      }
+    } else if (btn.dataset.action === 'open-cli') {
+      const res = await fetch(`/api/runs/${id}/open-in-cli`, { method: 'POST' });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        if (data.command) {
+          try {
+            await navigator.clipboard.writeText(data.command);
+            alertBar('No terminal found — command copied to clipboard.');
+          } catch {
+            alertBar(`Run manually: ${data.command}`);
+          }
+        } else {
+          alertBar(data.error ?? 'cannot open terminal');
+        }
+      }
+    } else if (btn.dataset.action === 'jump-bottom') {
+      state.autoScroll = true;
+      const log = $('#log');
+      if (log) log.scrollTop = log.scrollHeight;
+      btn.hidden = true;
+    }
+  });
+
+  // Quick replies for agent questions (janitor-style): Alt+A approve, Alt+C continue.
+  document.addEventListener('keydown', (e) => {
+    if (!e.altKey || !state.selectedId) return;
+    if (e.code === 'KeyA') void sendMessage(state.selectedId, 'Yes, approved.', []);
+    if (e.code === 'KeyC') void sendMessage(state.selectedId, 'Continue.', []);
+  });
+}
+
+// ---- live-session message bar ------------------------------------------------
+
+function bindMessageBar(runId) {
+  const form = $('#msg-form');
+  const textarea = $('#msg-text');
+  const fileInput = $('#msg-file');
+
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const text = textarea.value.trim();
+    const images = state.pendingImages.map((i) => ({ mediaType: i.mediaType, data: i.data }));
+    if (!text && images.length === 0) return;
+    const ok = await sendMessage(runId, text, images);
+    if (ok) {
+      textarea.value = '';
+      state.pendingImages = [];
+      renderThumbs();
+    }
+  });
+
+  textarea.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      form.requestSubmit();
+    }
+  });
+
+  textarea.addEventListener('paste', (e) => {
+    const items = [...(e.clipboardData?.items ?? [])].filter((i) => i.type.startsWith('image/'));
+    if (!items.length) return;
+    e.preventDefault();
+    for (const item of items) {
+      const file = item.getAsFile();
+      if (file) void addImage(file);
+    }
+  });
+
+  $('#msg-attach').addEventListener('click', () => fileInput.click());
+  fileInput.addEventListener('change', () => {
+    for (const file of fileInput.files ?? []) void addImage(file);
+    fileInput.value = '';
+  });
+
+  $('#msg-thumbs').addEventListener('click', (e) => {
+    const thumb = e.target.closest('[data-idx]');
+    if (!thumb) return;
+    state.pendingImages.splice(Number(thumb.dataset.idx), 1);
+    renderThumbs();
+  });
+}
+
+async function addImage(file) {
+  if (state.pendingImages.length >= 4) return;
+  if (file.size > 5 * 1024 * 1024) {
+    alertBar('Image too large (max 5 MB)');
+    return;
+  }
+  const buf = await file.arrayBuffer();
+  let binary = '';
+  const bytes = new Uint8Array(buf);
+  for (let i = 0; i < bytes.length; i += 0x8000) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
+  }
+  const data = btoa(binary);
+  state.pendingImages.push({ mediaType: file.type, data, preview: `data:${file.type};base64,${data}` });
+  renderThumbs();
+}
+
+function renderThumbs() {
+  const box = $('#msg-thumbs');
+  if (!box) return;
+  box.hidden = state.pendingImages.length === 0;
+  box.innerHTML = state.pendingImages
+    .map((img, idx) => `<span class="thumb" data-idx="${idx}" title="Click to remove"><img src="${img.preview}"></span>`)
+    .join('');
+}
+
+async function sendMessage(runId, text, images) {
+  try {
+    const res = await fetch(`/api/runs/${runId}/messages`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ text, images }),
+    });
+    if (res.status === 409) {
+      alertBar('Session closed — the agent is no longer listening.');
+      return false;
+    }
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      alertBar(data.error ?? `HTTP ${res.status}`);
+      return false;
+    }
+    return true;
+  } catch (err) {
+    alertBar(err.message);
+    return false;
+  }
+}
+
+function alertBar(message) {
+  const existing = $('#toast');
+  if (existing) existing.remove();
+  const el = document.createElement('div');
+  el.id = 'toast';
+  el.textContent = message;
+  document.body.appendChild(el);
+  setTimeout(() => el.remove(), 4000);
+}
+
+// ---- run list --------------------------------------------------------------
+
+function sortedRuns() {
+  // Needs-you-first: waiting/review, then running/queued, then by recency.
+  return [...state.runs.values()]
+    .filter((r) => (state.listView === 'archived' ? r.archived : !r.archived))
+    .sort((a, b) => {
+      const pa = STATUS_ORDER[a.status] ?? 9;
+      const pb = STATUS_ORDER[b.status] ?? 9;
+      if (pa !== pb) return pa - pb;
+      return b.createdAt.localeCompare(a.createdAt);
+    });
+}
+
+function renderRunList() {
+  const all = [...state.runs.values()];
+  const activeCount = all.filter((r) => !r.archived).length;
+  const archivedCount = all.length - activeCount;
+  const finishedCount = all.filter(
+    (r) => !r.archived && ['done', 'failed', 'cancelled'].includes(r.status),
+  ).length;
+  const waitingCount = all.filter((r) => !r.archived && r.status === 'waiting').length;
+
+  $('#list-tabs').innerHTML = `
+    <button data-list="active" class="${state.listView === 'active' ? 'active' : ''}">
+      Active ${activeCount ? `(${activeCount})` : ''}${waitingCount ? ' <span class="dot"></span>' : ''}
+    </button>
+    <button data-list="archived" class="${state.listView === 'archived' ? 'active' : ''}">
+      Archived ${archivedCount ? `(${archivedCount})` : ''}
+    </button>
+    ${state.listView === 'active' && finishedCount ? `<button data-list="archive-finished" title="Archive all finished runs">📥 ${finishedCount}</button>` : ''}`;
+
+  $('#run-list').innerHTML = sortedRuns()
+    .map(
+      (r) => `
+      <div class="run-item ${r.id === state.selectedId ? 'selected' : ''}" data-id="${r.id}">
+        <div class="title" title="${esc(r.task)}">${esc(r.title)}</div>
+        <div class="meta">${badge(r.status)} ${prBadge(r)} <span>${esc(r.workflow)}</span> <span>${fmtTokens(r.tokensUsed)}</span> ${r.costUsd ? `<span>${fmtCost(r.costUsd)}</span>` : ''} <span>${timeAgo(r.createdAt)}</span></div>
+      </div>`,
+    )
+    .join('');
+}
+
+// ---- run detail ------------------------------------------------------------
+
+function selectRun(id) {
+  const run = state.runs.get(id);
+  if (!run) return;
+  state.selectedId = id;
+  state.lastSeq = 0;
+  state.autoScroll = true;
+  if (state.runEs) {
+    state.runEs.close();
+    state.runEs = null;
+  }
+  renderRunList();
+  renderDetailShell(run);
+
+  const es = new EventSource(`/api/runs/${id}/events`);
+  state.runEs = es;
+  es.addEventListener('run-event', (e) => {
+    const evt = JSON.parse(e.data);
+    if (evt.seq <= state.lastSeq) return; // reconnect replay dedup
+    state.lastSeq = evt.seq;
+    appendLog(evt);
+  });
+  es.addEventListener('run', (e) => updateDetail(JSON.parse(e.data)));
+}
+
+function renderDetailShell(run) {
+  state.pendingImages = [];
+  $('#detail').innerHTML = `
+    <div class="detail-header" id="detail-header"></div>
+    <div class="steps-rail" id="steps-rail"></div>
+    <div class="log-wrap">
+      <div id="log"></div>
+      <button id="jump-bottom" data-action="jump-bottom" hidden>↓ jump to bottom</button>
+    </div>
+    <form id="msg-form">
+      <div id="msg-thumbs" hidden></div>
+      <div class="msg-row">
+        <button type="button" id="msg-attach" title="Attach an image">📎</button>
+        <textarea id="msg-text" rows="1" placeholder="Message the agent… (Enter to send, ⌘V to paste a screenshot)"></textarea>
+        <button type="submit" id="msg-send" class="primary">➤</button>
+      </div>
+      <input type="file" id="msg-file" accept="image/*" multiple hidden>
+    </form>`;
+  bindMessageBar(run.id);
+  updateDetail(run);
+  $('#log').addEventListener('scroll', () => {
+    const log = $('#log');
+    const nearBottom = log.scrollHeight - log.scrollTop - log.clientHeight < 80;
+    state.autoScroll = nearBottom;
+    $('#jump-bottom').hidden = nearBottom;
+  });
+}
+
+function updateDetail(run) {
+  state.runs.set(run.id, run);
+  const active = run.status === 'running' || run.status === 'queued' || run.status === 'waiting';
+  const lastSession = [...run.steps].reverse().find((s) => s.sessionId)?.sessionId;
+  $('#detail-header').innerHTML = `
+    ${badge(run.status)}
+    <h2 title="${esc(run.task)}">${esc(run.title)}</h2>
+    ${run.status === 'waiting' ? '<button data-action="finish">✓ Finish</button>' : ''}
+    ${!active && lastSession ? '<button data-action="continue">▶ Continue</button><button data-action="open-cli">⌨ Open in terminal</button>' : ''}
+    ${!active ? `<button data-action="archive" title="${run.archived ? 'Unarchive' : 'Archive'}">${run.archived ? '📤' : '📥'}</button>` : ''}
+    ${active
+      ? '<button data-action="cancel" class="danger">■ Cancel</button>'
+      : '<button data-action="delete" class="danger">🗑 Delete</button>'}
+    <div class="sub">
+      ${esc(run.workflow)} ${prBadge(run)} · ${fmtTokens(run.tokensUsed)}${run.costUsd ? ` · ${fmtCost(run.costUsd)}` : ''} · started ${timeAgo(run.startedAt ?? run.createdAt)}${run.finishedAt ? ` · finished ${timeAgo(run.finishedAt)}` : ''}${run.model ? ` · model ${esc(run.model)}` : ''}
+      ${run.error ? `<br>✗ ${esc(run.error)}` : ''}
+      ${!active && lastSession ? `<br>take over interactively: claude --resume ${esc(lastSession)}` : ''}
+    </div>`;
+  const msgForm = $('#msg-form');
+  if (msgForm) {
+    const sessionOpen = run.status === 'running' || run.status === 'waiting';
+    msgForm.classList.toggle('disabled', !sessionOpen);
+    $('#msg-text').disabled = !sessionOpen;
+    $('#msg-send').disabled = !sessionOpen;
+    $('#msg-attach').disabled = !sessionOpen;
+    $('#msg-text').placeholder = sessionOpen
+      ? run.status === 'waiting'
+        ? 'The agent is waiting for you… (Enter to send)'
+        : 'Message the agent… (Enter to send, ⌘V to paste a screenshot)'
+      : 'Session closed.';
+  }
+  $('#steps-rail').innerHTML = run.steps
+    .map(
+      (s) => `
+      <div class="step-card" title="${esc(s.error ?? '')}${s.sessionId ? `\nsession: ${esc(s.sessionId)}` : ''}">
+        ${badge(s.status)}
+        <span class="name">${esc(s.name)}</span>
+        <span class="dim">${s.kind}${s.iterations > 1 ? ` ×${s.iterations}` : ''}</span>
+        <span class="tok">${fmtTokens(s.tokensUsed)}</span>
+      </div>`,
+    )
+    .join('');
+}
+
+function appendLog(evt) {
+  const log = $('#log');
+  if (!log) return;
+  const el = document.createElement('div');
+  el.className = `ev ${evt.type}${evt.isError ? ' error' : ''}`;
+
+  switch (evt.type) {
+    case 'text':
+      el.textContent = evt.text ?? '';
+      break;
+    case 'tool-call': {
+      const input = JSON.stringify(evt.input ?? {}, null, 2);
+      const preview = input.length > 100 ? `${input.slice(0, 97).replaceAll('\n', ' ')}…` : input.replaceAll('\n', ' ');
+      el.innerHTML =
+        input.length > 100
+          ? `→ ${esc(evt.tool)} <details><summary>${esc(preview)}</summary><pre>${esc(input)}</pre></details>`
+          : `→ ${esc(evt.tool)} ${esc(preview)}`;
+      break;
+    }
+    case 'tool-result': {
+      const result = String(evt.result ?? '');
+      const first = result.split('\n')[0] ?? '';
+      el.innerHTML =
+        result.length > first.length
+          ? `← <details><summary>${esc(first.slice(0, 140))}${result.length > 140 ? '…' : ''}</summary><pre>${esc(result.slice(0, 10_000))}</pre></details>`
+          : `← ${esc(first)}`;
+      break;
+    }
+    case 'check-output':
+      el.textContent = `${evt.text ?? ''}\n(exit ${evt.exitCode})`;
+      break;
+    case 'step-start':
+      el.textContent = `▸ ${evt.name}${evt.iteration > 1 ? ` (attempt ${evt.iteration})` : ''}`;
+      break;
+    case 'step-end':
+      el.className = 'ev note';
+      el.textContent = `step ${evt.stepId}: ${evt.status}${evt.error ? ` — ${evt.error}` : ''}`;
+      break;
+    case 'note':
+    case 'lifecycle':
+      el.textContent = `· ${evt.message ?? ''}`;
+      break;
+    case 'user-message': {
+      const imgs = evt.imageCount > 0 ? ` [${evt.imageCount} image${evt.imageCount > 1 ? 's' : ''}]` : '';
+      el.textContent = `you: ${evt.text ?? ''}${imgs}`;
+      break;
+    }
+    case 'error':
+      el.textContent = `✗ ${evt.message ?? ''}`;
+      break;
+    case 'token-usage':
+    case 'cost':
+    case 'turn-end':
+      return; // reflected in the header/steps already
+    case 'done':
+      return;
+    default:
+      el.textContent = JSON.stringify(evt);
+  }
+
+  log.appendChild(el);
+  if (state.autoScroll) log.scrollTop = log.scrollHeight;
+}
+
+// ---- repo view ---------------------------------------------------------------
+
+async function loadRepo() {
+  const view = $('#view-repo');
+  view.innerHTML = '<div class="dim">Loading…</div>';
+  try {
+    const [repo, diff] = await Promise.all([
+      getJson('/api/repo'),
+      fetch('/api/repo/diff').then((r) => r.text()),
+    ]);
+    if (!repo.info) {
+      view.innerHTML = '<div class="panel">Not a git repository.</div>';
+      return;
+    }
+    view.innerHTML = `
+      <div class="panel">
+        <h3>Repository</h3>
+        <div class="mono">${esc(repo.info.root)} · <b>${esc(repo.info.branch)}</b>${repo.info.remote ? ` · ${esc(repo.info.remote)}` : ''}</div>
+      </div>
+      <div class="panel">
+        <h3>Working tree (${repo.status.length} changed)</h3>
+        ${repo.status.length
+          ? `<table>${repo.status.map((s) => `<tr><td class="mono dim">${esc(s.status)}</td><td class="mono">${esc(s.path)}</td></tr>`).join('')}</table>`
+          : '<div class="dim">clean</div>'}
+      </div>
+      <div class="panel">
+        <h3>Diff vs HEAD</h3>
+        ${diff.trim() ? `<pre>${esc(diff)}</pre>` : '<div class="dim">no changes</div>'}
+      </div>
+      <div class="panel">
+        <h3>Recent commits</h3>
+        <table>${repo.log.map((l) => `<tr><td class="mono dim">${esc(l.hash)}</td><td>${esc(l.subject)}</td><td class="dim">${esc(l.author)}</td><td class="dim">${esc(l.when)}</td></tr>`).join('')}</table>
+      </div>`;
+  } catch (err) {
+    view.innerHTML = `<div class="panel">✗ ${esc(err.message)}</div>`;
+  }
+}
+
+// ---- skills view ---------------------------------------------------------------
+
+async function loadSkills() {
+  const view = $('#view-skills');
+  view.innerHTML = '<div class="dim">Loading…</div>';
+  try {
+    const skills = await getJson('/api/skills');
+    if (!skills.length) {
+      view.innerHTML = `
+        <div class="panel">
+          <h3>Skills</h3>
+          <div>No skills yet. Drop Markdown files into <span class="mono">.ai/skills/</span> or <span class="mono">.ai/cezar/skills/</span> —
+          optional frontmatter: <span class="mono">name</span>, <span class="mono">description</span>.
+          Reference one from a workflow step via <span class="mono">skill: &lt;name&gt;</span>.</div>
+        </div>`;
+      return;
+    }
+    view.innerHTML = skills
+      .map(
+        (s) => `
+        <div class="panel skill-card">
+          <h3>${esc(s.name)} <span class="dim">(${esc(s.source)})</span></h3>
+          ${s.description ? `<div>${esc(s.description)}</div>` : ''}
+          <div class="path mono dim">${esc(s.path)}</div>
+          <details><summary class="dim">show body</summary><pre>${esc(s.body)}</pre></details>
+        </div>`,
+      )
+      .join('');
+  } catch (err) {
+    view.innerHTML = `<div class="panel">✗ ${esc(err.message)}</div>`;
+  }
+}
+
+init().catch((err) => {
+  document.body.insertAdjacentHTML(
+    'beforeend',
+    `<div style="position:fixed;bottom:12px;left:12px;color:#f85149">init failed: ${esc(err.message)}</div>`,
+  );
+});

package/web/index.html

@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>cezar</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚡</text></svg>">
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+  <header>
+    <div class="brand">⚡ cezar</div>
+    <div id="repo-chip" class="chip" hidden></div>
+    <div id="env-chips"></div>
+    <nav id="tabs">
+      <button data-view="runs" class="active">Runs</button>
+      <button data-view="repo">Repo</button>
+      <button data-view="skills">Skills</button>
+    </nav>
+  </header>
+
+  <main>
+    <section id="view-runs" class="view">
+      <aside id="sidebar">
+        <form id="new-task" autocomplete="off">
+          <textarea name="task" rows="3" placeholder="What should the agent do in this repo?" required></textarea>
+          <div class="row">
+            <select name="workflow" title="workflow"></select>
+            <input name="model" placeholder="model (optional)" title="model override, e.g. sonnet / opus">
+          </div>
+          <button type="submit" class="primary">▶ Run</button>
+          <div id="form-error" class="error-text" hidden></div>
+        </form>
+        <div id="list-tabs"></div>
+        <div id="run-list"></div>
+      </aside>
+      <section id="detail">
+        <div class="empty">Select a run — or start one.</div>
+      </section>
+    </section>
+
+    <section id="view-repo" class="view" hidden></section>
+    <section id="view-skills" class="view" hidden></section>
+  </main>
+
+  <script src="/app.js"></script>
+</body>
+</html>