accrete-kit 0.1.1 → 0.2.0

package/dist/ui/page/panels/agents.js

@@ -0,0 +1,173 @@
+// The agents panel: which sessions exist for this Workspace and what each is doing.
+// Liveness is worded as the evidence for it. Transcript text is untrusted, so
+// everything goes in through textContent.
+
+function duration(ms) {
+  const s = Math.max(0, Math.round(ms / 1000));
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m`;
+  const h = Math.floor(m / 60);
+  if (h < 48) return `${h}h ${m % 60}m`;
+  return `${Math.floor(h / 24)}d`;
+}
+
+function time(value) {
+  return typeof value === 'number' ? value : Date.parse(value);
+}
+
+// A span that keeps its age current; see the ticker in mount.
+function ago(at) {
+  const span = document.createElement('span');
+  span.dataset.since = time(at);
+  span.textContent = `${duration(Date.now() - time(at))} ago`;
+  return span;
+}
+
+function node(tag, className, ...parts) {
+  const element = document.createElement(tag);
+  if (className) element.className = className;
+  element.append(...parts.filter((part) => part !== null && part !== undefined));
+  return element;
+}
+
+function shortPath(path, state) {
+  if (!path) return 'unknown';
+  return path.startsWith(`${state.home}/`) ? `~${path.slice(state.home.length)}` : path;
+}
+
+function programOf(command) {
+  if (!command) return null;
+  const [program, ...rest] = command.split(/\s+/);
+  const name = program.split('/').pop();
+  return rest[0] && !rest[0].startsWith('-') ? `${name} ${rest[0]}` : name;
+}
+
+function evidence(session) {
+  const parts = [];
+  const { process: proc, sessionFile: file } = session;
+  if (proc?.via === 'open rollout') {
+    parts.push(`process ${proc.pid} (${programOf(proc.command) ?? 'unknown'}) has this rollout open, written `);
+  } else if (proc) {
+    const says = file?.status ? `, session file says ${file.status}` : '';
+    parts.push(`process ${proc.pid} present${says}, `);
+    parts.push(session.mtimeMs ? 'transcript written ' : 'no transcript yet');
+  } else if (file) {
+    parts.push(`session file names process ${file.pid}, which is not running, last written `);
+  } else if (session.missingParent) {
+    parts.push('no rollout found for this thread, only its subagents; ');
+    parts.push('no process found');
+  } else {
+    parts.push('no process found, last written ');
+  }
+  if (session.mtimeMs) parts.push(ago(session.mtimeMs));
+  if (session.turnEndedAt) parts.push(', turn ended ', ago(session.turnEndedAt));
+  return parts;
+}
+
+function toolLine(tool) {
+  if (!tool) return node('div', 'tool quiet', 'last tool unknown');
+  const summary = node('code', null, tool.summary ?? 'unknown');
+  summary.title = tool.summary ?? '';
+  const when = node('span', 'quiet', tool.pending ? 'no result yet' : null);
+  if (tool.at && Number.isFinite(Date.parse(tool.at))) when.append(tool.pending ? ', ' : '', ago(tool.at));
+  return node('div', 'tool', node('span', 'tool-name', tool.name ?? 'unknown'), summary, when);
+}
+
+function subagentRow(child, parent, state) {
+  const label = [child.kind, child.nickname].filter(Boolean).join(' ') || 'subagent';
+  const facts = [];
+  if (child.process) facts.push(`rollout open in process ${child.process.pid}, `);
+  if (child.mtimeMs) facts.push('written ', ago(child.mtimeMs));
+  if (child.turnEndedAt) facts.push(', turn ended ', ago(child.turnEndedAt));
+  return node(
+    'div',
+    'subagent',
+    node('div', 'row', node('span', 'kind', label), ' ', node('span', 'title', child.title ?? 'unknown')),
+    child.cwd && child.cwd !== parent.cwd ? node('div', 'cwd', shortPath(child.cwd, state)) : null,
+    node('div', 'evidence', ...facts),
+    toolLine(child.tool),
+  );
+}
+
+function subagentsBlock(session, state, opened) {
+  const { total, active, shown } = session.subagents;
+  if (total === 0) return null;
+  const summary = `${total} subagent${total === 1 ? '' : 's'}, ${active} written in the last 10 min`;
+  const details = node('details', 'subagents', node('summary', null, summary));
+  details.open = opened.get(session.id) ?? active > 0;
+  details.addEventListener('toggle', () => opened.set(session.id, details.open));
+  for (const child of shown) details.append(subagentRow(child, session, state));
+  if (total > shown.length) details.append(node('div', 'quiet', `and ${total - shown.length} older`));
+  return details;
+}
+
+function sessionRow(session, state, opened) {
+  const title = session.title ?? `unknown title, ${session.id.slice(0, 8)}`;
+  return node(
+    'article',
+    session.process ? 'session has-process' : 'session',
+    node('div', 'row', node('span', 'agent', session.agent), ' ', node('span', 'title', title)),
+    node('div', 'cwd', shortPath(session.cwd, state)),
+    node('div', 'evidence', ...evidence(session)),
+    toolLine(session.tool),
+    subagentsBlock(session, state, opened),
+  );
+}
+
+function footer(state) {
+  const { claude, codex } = state.sources;
+  const lines = [`Read ${claude.transcripts} Claude transcripts, ${claude.sessionFiles} session files, ${codex.rollouts} Codex rollouts`];
+  if (claude.noCwd) lines.push(`no working directory found in ${claude.noCwd} of the transcripts`);
+  if (codex.notUnderstood) lines.push(`${codex.notUnderstood} of the rollouts not understood`);
+  if (codex.scanning) lines.push('still indexing Codex rollouts');
+  return node('div', 'quiet foot', lines.join('; '));
+}
+
+function render(el, state, opened) {
+  const parts = [];
+  if (!state.loading) {
+    const withProcess = state.sessions.filter((session) => session.process).length;
+    const count = state.sessions.length + (state.hiddenSessions ?? 0);
+    parts.push(node('div', 'quiet head', `${count} session${count === 1 ? '' : 's'}, ${withProcess} with a process. Scope: ${state.scope.map((path) => shortPath(path, state)).join(', ')}`));
+    for (const session of state.sessions) parts.push(sessionRow(session, state, opened));
+    if (state.hiddenSessions) parts.push(node('div', 'quiet', `and ${state.hiddenSessions} older sessions`));
+    for (const proc of state.unattached) {
+      parts.push(
+        node('div', 'unattached', `process ${proc.pid} (${programOf(proc.command)}) is in ${shortPath(proc.cwd, state)}; no session file or open rollout ties it to a session`),
+      );
+    }
+    parts.push(footer(state));
+  } else {
+    parts.push(node('div', 'quiet head', 'Reading sessions.'));
+  }
+  el.replaceChildren(...parts);
+}
+
+export function mount(el, events) {
+  const opened = new Map(); // session id -> whether its subagents are shown
+  let waiting = null;
+
+  // Do not pull text out from under someone selecting it.
+  const selecting = () => {
+    const selection = getSelection();
+    return selection && !selection.isCollapsed && el.contains(selection.anchorNode);
+  };
+
+  events.addEventListener('agents', (event) => {
+    waiting = JSON.parse(event.data);
+    if (selecting()) return;
+    render(el, waiting, opened);
+    waiting = null;
+  });
+
+  setInterval(() => {
+    if (waiting && !selecting()) {
+      render(el, waiting, opened);
+      waiting = null;
+    }
+    for (const span of el.querySelectorAll('[data-since]')) {
+      span.textContent = `${duration(Date.now() - Number(span.dataset.since))} ago`;
+    }
+  }, 5000);
+}

package/dist/ui/page/panels/objects.css

@@ -0,0 +1,155 @@
+/* Each panel scrolls itself, so moving between tabs keeps each one's place. */
+#panels > #panel-objects {
+  height: 100%;
+  overflow: auto;
+  padding: 0;
+}
+
+#panel-objects .head {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+}
+#panel-objects .types {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  padding: 6px 8px 4px;
+}
+#panel-objects .type {
+  padding: 2px 6px;
+  border: 0;
+  border-radius: 3px;
+  background: none;
+  color: var(--muted);
+  font: inherit;
+  cursor: pointer;
+}
+#panel-objects .type:hover { color: var(--fg); }
+#panel-objects .type.current {
+  background: var(--bg-raised);
+  color: var(--fg);
+}
+#panel-objects .count { font-variant-numeric: tabular-nums; opacity: 0.8; }
+
+#panel-objects .notice {
+  padding: 0 12px 5px;
+  font-size: 12px;
+  color: var(--muted);
+}
+#panel-objects .notice:empty { display: none; }
+#panel-objects .behind {
+  margin: 2px 0 4px;
+  padding: 3px 0 3px 8px;
+  border-left: 2px solid var(--accent);
+  color: var(--fg);
+}
+#panel-objects .sample {
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+#panel-objects code {
+  font: 12px ui-monospace, Menlo, monospace;
+  color: var(--fg);
+  user-select: all;
+}
+
+#panel-objects .body { padding: 8px 8px 16px; }
+#panel-objects .empty {
+  padding: 4px 4px;
+  color: var(--muted);
+}
+
+#panel-objects .rows { display: flex; flex-direction: column; }
+#panel-objects .row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: 8px;
+  width: 100%;
+  padding: 2px 4px;
+  border: 0;
+  border-radius: 3px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+#panel-objects button.row:hover { background: var(--bg-raised); }
+#panel-objects .row.plain { cursor: default; }
+#panel-objects .primary {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+#panel-objects .row.absent .primary { color: var(--muted); }
+#panel-objects .id,
+#panel-objects .facts,
+#panel-objects .status,
+#panel-objects .time,
+#panel-objects .tag,
+#panel-objects .detail {
+  color: var(--muted);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+#panel-objects .time {
+  margin-left: auto;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+#panel-objects .tag { font-style: italic; }
+
+#panel-objects .more,
+#panel-objects .back {
+  margin: 4px 0;
+  padding: 2px 4px;
+  border: 0;
+  background: none;
+  color: var(--accent);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+#panel-objects .more:hover,
+#panel-objects .back:hover { text-decoration: underline; }
+
+#panel-objects h2 {
+  margin: 4px 4px 2px;
+  font-size: 14px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+#panel-objects h2 .kind {
+  color: var(--muted);
+  font-weight: 400;
+}
+#panel-objects .meta {
+  margin: 0 4px;
+  color: var(--muted);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+#panel-objects .body .behind { margin: 4px; font-size: 12px; }
+
+#panel-objects .relation { margin-top: 12px; }
+#panel-objects h3 {
+  margin: 0 4px 2px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+#panel-objects .document {
+  margin: 4px;
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  background: var(--bg-raised);
+  font: 12px/1.45 ui-monospace, Menlo, monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}

package/dist/ui/page/panels/objects.js

@@ -0,0 +1,309 @@
+// The objects panel: browse the types, open a whole document, follow its relations.
+// Workspace text is untrusted, so everything goes in through text nodes.
+const TYPES = [
+  ['model', 'Models', 'Model'],
+  ['iteration', 'Iterations', 'Iteration'],
+  ['tool', 'Tools', 'Tool'],
+  ['data', 'Data', 'Data'],
+  ['result', 'Results', 'Result'],
+  ['memory', 'Memory', 'Memory'],
+];
+const SINGULAR = Object.fromEntries(TYPES.map(([kind, , one]) => [kind, one]));
+const labelOf = (kind) => TYPES.find(([type]) => type === kind)?.[1];
+const PAGE = 100;
+const RELATION_PAGE = 50;
+const REFRESH = '.accrete/bin/accrete index refresh';
+
+function h(tag, props, ...children) {
+  const node = Object.assign(document.createElement(tag), props);
+  node.append(...children.filter((child) => child !== null && child !== undefined));
+  return node;
+}
+
+function when(iso) {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return String(iso);
+  const time = date.toLocaleTimeString([], { hour12: false });
+  return date.toDateString() === new Date().toDateString() ? time : `${date.toLocaleDateString('en-CA')} ${time.slice(0, 5)}`;
+}
+
+const shortRevision = (revision) => (revision.length > 12 ? revision.slice(0, 8) : revision);
+
+async function fetchData(rest) {
+  const response = await fetch(`/data/objects/${rest}`);
+  if (!response.ok) throw new Error(`${response.status}`);
+  return response.json();
+}
+
+export function mount(el, events) {
+  const types = h('div', { className: 'types' });
+  const notice = h('div', { className: 'notice' });
+  const body = h('div', { className: 'body' });
+  el.replaceChildren(h('div', { className: 'head' }, types, notice), body);
+
+  let state = null;
+  let view = null; // { type: 'list', kind, items, total } or { type: 'object', id, data }
+  let back = []; // Views to return to, each with its scroll position.
+  let token = 0; // Only the latest request may draw.
+
+  function renderTypes() {
+    types.replaceChildren(
+      ...TYPES.map(([kind, label]) =>
+        h(
+          'button',
+          {
+            className: view?.kind === kind && view.type === 'list' ? 'type current' : 'type',
+            onclick: () => {
+              back = [];
+              showList(kind);
+            },
+          },
+          label,
+          ' ',
+          h('span', { className: 'count', textContent: state?.counts[kind] ?? 0 }),
+        ),
+      ),
+    );
+  }
+
+  function samples(group, label) {
+    if (!group.count) return [];
+    const more = group.count > group.sample.length ? ` and ${group.count - group.sample.length} more` : '';
+    return [h('div', { className: 'sample', textContent: `${label}: ${group.sample.join(', ')}${more}` })];
+  }
+
+  function renderNotice() {
+    const parts = [];
+    if (state.install) {
+      parts.push(
+        h('div', {}, 'No Kernel on this host. Documents list and open. Run ', h('code', { textContent: state.install }), ' in the terminal.'),
+        state.kernel_error ? h('div', { className: 'sample', textContent: state.kernel_error }) : null,
+      );
+    }
+    const index = state.index;
+    if (index.error) {
+      parts.push(h('div', {}, 'Could not read the index: ', index.error));
+    } else if (!index.present) {
+      if (!state.install) {
+        parts.push(h('div', {}, 'No index on this host. Documents list and open. Relations appear after ', h('code', { textContent: REFRESH }), ' in the terminal.'));
+      }
+    } else {
+      const behind = index.changed.count + index.missing.count + index.gone.count;
+      if (behind) {
+        const counts = [
+          index.changed.count && `${index.changed.count} changed since`,
+          index.missing.count && `${index.missing.count} not in it`,
+          index.gone.count && `${index.gone.count} in it but gone from disk`,
+        ].filter(Boolean);
+        parts.push(
+          h(
+            'div',
+            { className: 'behind' },
+            h('div', {}, `The index is behind the documents: ${counts.join(', ')}. Relations may be out of date. Run `, h('code', { textContent: REFRESH }), ' in the terminal.'),
+            ...samples(index.changed, 'Changed'),
+            ...samples(index.missing, 'Not in the index'),
+            ...samples(index.gone, 'Gone from disk'),
+          ),
+        );
+      }
+      parts.push(h('div', { className: 'refreshed', textContent: `Index refreshed ${when(index.refreshed_at)}, ${index.object_count} objects` }));
+    }
+    notice.replaceChildren(...parts);
+  }
+
+  function row(item) {
+    return h(
+      'button',
+      { className: 'row', onclick: () => openObject(item.id) },
+      h('span', { className: 'primary', textContent: item.name ?? item.id }),
+      item.name && item.name !== item.id ? h('span', { className: 'id', textContent: item.id }) : null,
+      item.problem ? h('span', { className: 'tag', textContent: item.problem }) : null,
+      item.status ? h('span', { className: 'status', textContent: item.status }) : null,
+      item.time ? h('span', { className: 'time', textContent: when(item.time) }) : null,
+    );
+  }
+
+  function renderList() {
+    const nodes = view.items.length
+      ? [h('div', { className: 'rows' }, ...view.items.map(row))]
+      : [h('div', { className: 'empty', textContent: `No ${labelOf(view.kind)} in this Workspace.` })];
+    const left = view.total - view.items.length;
+    if (left > 0) nodes.push(h('button', { className: 'more', textContent: `${left} more`, onclick: loadMore }));
+    body.replaceChildren(...nodes);
+  }
+
+  async function loadMore() {
+    const mine = ++token;
+    const page = await fetchData(`list/${view.kind}/${view.items.length}/${PAGE}`);
+    if (mine !== token) return;
+    view.items.push(...page.items);
+    view.total = page.total;
+    renderList();
+  }
+
+  async function showList(kind) {
+    view = { type: 'list', kind, items: [], total: 0 };
+    renderTypes();
+    await refresh();
+    el.scrollTop = 0;
+  }
+
+  function relationRow(relation) {
+    const facts = [
+      relation.direction,
+      relation.role,
+      relation.commit ? `commit ${shortRevision(relation.commit)}` : null,
+      relation.revision ? `${relation.kind === 'tool' || relation.section === 'Results' ? 'revision' : 'starts at'} ${shortRevision(relation.revision)}` : null,
+    ].filter(Boolean);
+    const notes = [];
+    if (relation.id === null) notes.push(h('span', { className: 'detail', textContent: relation.detail ?? '' }));
+    if (!relation.present && relation.id !== null) notes.push(h('span', { className: 'tag', textContent: 'not present here' }));
+    if (relation.commit_available === false) notes.push(h('span', { className: 'tag', textContent: 'commit not present here' }));
+    if (relation.commit_available === null) notes.push(h('span', { className: 'tag', textContent: 'no checkout here' }));
+    const title = [relation.commit, relation.revision].filter(Boolean).join(' ');
+    const content = [
+      h('span', { className: 'primary', textContent: relation.name ?? relation.id ?? '(no id)' }),
+      relation.name && relation.name !== relation.id ? h('span', { className: 'id', textContent: relation.id }) : null,
+      facts.length ? h('span', { className: 'facts', textContent: facts.join(' · '), title }) : null,
+      ...notes,
+    ];
+    if (relation.id === null) return h('div', { className: 'row plain' }, ...content);
+    return h('button', { className: relation.present ? 'row' : 'row absent', onclick: () => openObject(relation.id) }, ...content);
+  }
+
+  function relationSections(relations) {
+    const sections = new Map();
+    for (const relation of relations) {
+      if (!sections.has(relation.section)) sections.set(relation.section, []);
+      sections.get(relation.section).push(relation);
+    }
+    return [...sections].map(([section, rows]) => {
+      const list = h('div', { className: 'rows' });
+      const node = h('div', { className: 'relation' }, h('h3', { textContent: section }), list);
+      let shown = 0;
+      const more = h('button', { className: 'more' });
+      const showMore = () => {
+        const next = rows.slice(shown, shown + RELATION_PAGE);
+        list.append(...next.map(relationRow));
+        shown += next.length;
+        more.textContent = `${rows.length - shown} more`;
+        if (shown >= rows.length) more.remove();
+      };
+      more.onclick = showMore;
+      node.append(more);
+      showMore();
+      return node;
+    });
+  }
+
+  function renderRelations(data) {
+    if (data.relations_error) return [h('div', { className: 'empty', textContent: `Could not read relations from the index: ${data.relations_error}` })];
+    if (!data.relations) return [h('div', { className: 'empty', textContent: 'Relations come from the index, which is not on this host.' })];
+    if (!data.relations.length) return [h('div', { className: 'empty', textContent: 'No relations in the index.' })];
+    return relationSections(data.relations);
+  }
+
+  function renderObject() {
+    const { data, id } = view;
+    const previous = back.at(-1);
+    const backTo = previous?.type === 'object' ? previous.data?.name ?? previous.id : labelOf(previous?.kind ?? data.kind) ?? 'Objects';
+    const backButton = h('button', { className: 'back', textContent: `← ${backTo}`, onclick: goBack });
+    if (!data.present) {
+      body.replaceChildren(
+        backButton,
+        h('h2', { textContent: id }),
+        h('div', { className: 'meta', textContent: 'Not present on this host. Other objects name it, and it may exist elsewhere.' }),
+        ...renderRelations(data),
+      );
+      return;
+    }
+    const times = [
+      data.created_at && `created ${when(data.created_at)}`,
+      data.updated_at && `updated ${when(data.updated_at)}`,
+      data.authored_at && `authored ${when(data.authored_at)}`,
+    ].filter(Boolean);
+    const meta = [
+      h('div', { className: 'meta', textContent: [data.id, data.status].filter(Boolean).join(' · ') }),
+      h('div', { className: 'meta', textContent: data.rel }),
+      h('div', { className: 'meta', title: data.revision, textContent: [`revision ${shortRevision(data.revision)}`, ...times].join(' · ') }),
+    ];
+    for (const [key, value] of Object.entries(data.binding ?? {})) {
+      meta.push(h('div', { className: 'meta', textContent: `${key} on this host: ${typeof value === 'string' ? value : JSON.stringify(value)}` }));
+    }
+    if (data.kind === 'model' && !data.binding) meta.push(h('div', { className: 'meta', textContent: 'No checkout bound on this host.' }));
+    if (data.problem) meta.push(h('div', { className: 'behind', textContent: `This document: ${data.problem}.` }));
+    if (data.in_index === false) {
+      meta.push(h('div', { className: 'behind', textContent: 'This document is not in the index.' }));
+    } else if (data.in_index && data.index_revision !== data.revision) {
+      meta.push(h('div', { className: 'behind', textContent: `The index has revision ${shortRevision(data.index_revision)} of this document.` }));
+    }
+    body.replaceChildren(
+      backButton,
+      h('h2', {}, h('span', { className: 'kind', textContent: SINGULAR[data.kind] }), ' ', data.name ?? data.id),
+      ...meta,
+      ...renderRelations(data),
+      h('div', { className: 'relation' }, h('h3', { textContent: 'Document' }), h('pre', { className: 'document', textContent: data.text })),
+    );
+  }
+
+  function remember() {
+    if (view) back.push({ ...view, scroll: el.scrollTop });
+  }
+
+  async function openObject(id) {
+    remember();
+    view = { type: 'object', id, data: null };
+    renderTypes();
+    await refresh();
+    el.scrollTop = 0;
+  }
+
+  async function goBack() {
+    const previous = back.pop();
+    if (!previous) return showList(view.data?.kind ?? 'model');
+    view = previous;
+    renderTypes();
+    if (view.type === 'list') renderList();
+    else renderObject();
+    el.scrollTop = previous.scroll;
+    await refresh();
+  }
+
+  // Refetch what is on screen, and redraw only if it changed, so scrolling and any
+  // text selection survive a change elsewhere in the Workspace.
+  async function refresh() {
+    const mine = ++token;
+    const current = view;
+    try {
+      if (current.type === 'list') {
+        const page = await fetchData(`list/${current.kind}/0/${Math.max(current.items.length, PAGE)}`);
+        if (mine !== token) return;
+        const same = current.drawn && JSON.stringify(page.items) === JSON.stringify(current.items) && page.total === current.total;
+        Object.assign(current, { items: page.items, total: page.total, drawn: true });
+        if (!same) renderList();
+      } else {
+        const data = await fetchData(`object/${encodeURIComponent(current.id)}`);
+        if (mine !== token) return;
+        const same = current.data && JSON.stringify(data) === JSON.stringify(current.data);
+        current.data = data;
+        if (!same) renderObject();
+      }
+    } catch (err) {
+      if (mine === token) body.replaceChildren(h('div', { className: 'empty', textContent: `Could not read this from the server: ${err.message}` }));
+    }
+  }
+
+  events.addEventListener('objects', (event) => {
+    state = JSON.parse(event.data);
+    if (!view) view = { type: 'list', kind: TYPES.find(([kind]) => state.counts[kind])?.[0] ?? 'model', items: [], total: 0 };
+    renderTypes();
+    renderNotice();
+    refresh();
+  });
+
+  // Activity asks for an object here, since the panels are separate modules.
+  document.addEventListener('accrete:open-object', (event) => {
+    document.querySelector('#tabs [data-panel="objects"]')?.click();
+    openObject(event.detail.id);
+  });
+}

package/dist/ui/page/panels/running.css

@@ -0,0 +1,35 @@
+/* Styles for the running panel. Scope them under #panel-running. */
+#panel-running .head { margin-bottom: 8px; }
+#panel-running .quiet { color: var(--muted); }
+
+#panel-running .tree {
+  padding: 8px 0;
+  border-top: 1px solid var(--border);
+}
+#panel-running .process { min-width: 0; }
+#panel-running .process .process {
+  margin: 4px 0 0 4px;
+  padding-left: 8px;
+  border-left: 1px solid var(--border);
+}
+#panel-running .command {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font: 12px ui-monospace, Menlo, monospace;
+}
+#panel-running .evidence {
+  color: var(--muted);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+#panel-running .file { margin-top: 6px; }
+#panel-running .path { color: var(--fg); }
+#panel-running pre {
+  margin: 2px 0 0;
+  padding: 4px 6px;
+  overflow-x: auto;
+  background: var(--bg-raised);
+  border: 1px solid var(--border);
+  font: 12px/1.4 ui-monospace, Menlo, monospace;
+}