@contraagent/ui 0.0.0-stage → 0.2.0

package/src/elements/lists/ca-definitions.ts

@@ -0,0 +1,170 @@
+import { deriveRun, isPython, type JournalRow, type MonitorClient, type Plan, type TaskDefinition, type TaskOutcome } from '@contraagent/api';
+import { localized, msg, str } from '@lit/localize';
+import { LitElement, css, html, nothing, type PropertyValues } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { emit } from '../../core/events.js';
+import { factList } from '../../words/format.js';
+import { implementationOfText } from '../../words/task-definition.js';
+import { factLine } from '@contraagent/elements/primitives';
+import { base } from '@contraagent/elements/styles';
+import '../shared/ca-definition.js';
+
+/** How long to wait before asking again for definitions that have not been recorded yet. */
+const REFETCH_MS = 3000;
+
+/**
+ * What defines each kind of task in a run: a list of kinds, and the selected
+ * one's definition. Fetches `/definitions` itself; while the run is live and a
+ * kind has not recorded its definition yet, it asks again. A pick sends
+ * `ca-navigate` {def}.
+ *
+ * @fires ca-navigate - `{def}`: another kind was selected
+ */
+@customElement('ca-definitions')
+@localized()
+export class CaDefinitions extends LitElement {
+  static override styles = [
+    base,
+    css`
+      /* A container: the list of kinds goes above the definition when the element is narrow, whatever the window's width. */
+      :host { display: block; container-type: inline-size; }
+      .defs { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; align-items: start; }
+      .deflist { display: flex; flex-direction: column; gap: 6px; }
+      .defitem { padding: 9px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; color: inherit; text-align: start;
+        display: flex; flex-direction: column; gap: 2px; }
+      .defitem:hover { border-color: var(--line2); }
+      .defitem.sel { border-color: var(--accent); background: var(--accent-bg); }
+      @container (max-width: 720px) {
+        .defs { grid-template-columns: minmax(0, 1fr); }
+      }
+    `,
+  ];
+
+  @property({ attribute: false }) client!: MonitorClient;
+  @property() run = '';
+  /** The run is live: definitions may still appear. */
+  @property({ type: Boolean }) live = false;
+  /** The run's journal and plan: tasks and attempts per kind, and which kinds should have a definition. */
+  @property({ attribute: false }) journal: JournalRow[] = [];
+  @property({ attribute: false }) plan: Plan | null = null;
+  /** The selected kind (null: the first with a plugin, else the first). */
+  @property({ attribute: false }) selected: string | null = null;
+
+  @state() private defs: TaskDefinition[] = [];
+  private defsRun = '';
+  private timer: ReturnType<typeof setTimeout> | null = null;
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.clearTimer();
+    this.defsRun = '';
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    if (this.run && this.defsRun !== this.run) void this.load();
+  }
+
+  protected override willUpdate(changed: PropertyValues<this>): void {
+    if ((changed.has('run') || changed.has('client')) && this.run && this.client && this.defsRun !== this.run) {
+      this.defs = [];
+      void this.load();
+    }
+  }
+
+  protected override updated(): void {
+    // A definition appears when the first task of its kind launches: ask again while the run is live and one is missing.
+    const kinds = new Set(this.tasks().filter((t) => !isPython(t) && (t.tries.length || t.outcome === 'running')).map((t) => t.kind)).size;
+    if (this.live && this.defsRun === this.run && this.defs.length < kinds && !this.timer) {
+      this.timer = setTimeout(() => {
+        this.timer = null;
+        void this.load();
+      }, REFETCH_MS);
+    }
+  }
+
+  /** Every task of the run: the plan joined with the journal. */
+  private tasks(): TaskOutcome[] {
+    return [...deriveRun(this.journal, this.plan).outcomes.values()];
+  }
+
+  private clearTimer(): void {
+    if (this.timer) clearTimeout(this.timer);
+    this.timer = null;
+  }
+
+  private async load(): Promise<void> {
+    if (!this.client || !this.run) return;
+    const run = this.run;
+    this.defsRun = run;
+    let defs: TaskDefinition[] = [];
+    try {
+      defs = await this.client.definitions(run);
+    } catch {
+      defs = [];
+    }
+    if (run === this.run) this.defs = defs;
+  }
+
+  override render() {
+    const defs = this.defs;
+    // Python kinds record no definition: they are listed from the tasks so the list matches the tasks tab.
+    const tasks = this.tasks();
+    const pyKinds = [...new Set(tasks.filter((t) => isPython(t)).map((t) => t.kind))].filter((k) => !defs.some((d) => d.kind === k));
+    if (!defs.length && !pyKinds.length) {
+      return html`<div class="blank"><span class="ic" aria-hidden="true">⌘</span><b>${this.live ? msg('No definitions yet') : msg('No definitions')}</b></div>`;
+    }
+    const pySel = this.selected !== null && pyKinds.includes(this.selected) ? this.selected : null;
+    const sel = pySel ? undefined : (defs.find((d) => d.kind === this.selected) ?? defs.find((d) => d.plugin) ?? defs[0]);
+    const selKind = pySel ?? sel?.kind ?? pyKinds[0] ?? '';
+    const counts = (k: string) => {
+      const ts = tasks.filter((t) => t.kind === k);
+      const n = ts.length;
+      // A task refused before it started has a journal row but no attempt.
+      const a = ts.reduce((x, t) => x + t.tries.length, 0);
+      return factList(n === 1 ? msg('1 task') : msg(str`${n} tasks`), a === 1 ? msg('1 attempt') : msg(str`${a} attempts`));
+    };
+    return html`<div class="defs">
+      <div class="deflist">
+        ${repeat(
+          defs,
+          (d) => d.kind,
+          (d) => html`<button type="button" class="defitem ${d.kind === selKind ? 'sel' : ''}" aria-current=${d.kind === selKind ? 'true' : nothing}
+            @click=${() => emit(this, 'ca-navigate', { def: d.kind })}>
+            <b class="jmono">${d.kind}</b>
+            <span class="meta words">${factLine([
+              ...(d.base_kind ? [implementationOfText(d.base_kind)] : []),
+              d.executor === 'python' ? 'Python' : d.role ? msg(str`Role ${d.role}`) : msg('No role'),
+              ...counts(d.kind),
+            ])}</span>
+          </button>`,
+        )}
+        ${repeat(
+          pyKinds,
+          (k) => k,
+          (k) => html`<button type="button" class="defitem ${k === selKind ? 'sel' : ''}" aria-current=${k === selKind ? 'true' : nothing}
+            @click=${() => emit(this, 'ca-navigate', { def: k })}>
+            <b class="jmono">${k}</b>
+            <span class="meta words">${factLine(['Python', ...counts(k)])}</span>
+          </button>`,
+        )}
+      </div>
+      <section class="panel">
+        ${sel
+          ? html`<h3 title=${msg('As recorded when its first task started (definitions/<kind>.json)')}>
+                ${sel.kind}<span class="r">${sel.executor === 'python' ? msg('Python task') : sel.plugin ? msg(str`Plugin ${sel.name || ''}`) : msg('Defined in Python code')}</span>
+              </h3>
+              <ca-definition .definition=${sel} memory="definition:${sel.kind}"></ca-definition>`
+          : html`<h3>${selKind}<span class="r">${msg('Python task')}</span></h3>
+              <ca-definition .definition=${null}></ca-definition>`}
+      </section>
+    </div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-definitions': CaDefinitions;
+  }
+}

package/src/elements/lists/ca-journal-table.ts

@@ -0,0 +1,141 @@
+import { deriveRun, isBad, isLaunched, isPython, rowId, type JournalRow, type Plan } from '@contraagent/api';
+import '@contraagent/elements/data-table/define';
+import { localized, msg } from '@lit/localize';
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { emit } from '../../core/events.js';
+import { stopTone, type Tone } from '../../lib/tone.js';
+import { toneAttr } from '@contraagent/elements';
+import { markOf } from '@contraagent/elements/primitives';
+import { base, meterStyles } from '@contraagent/elements/styles';
+import { executorIconStyles } from '../../words/executor.js';
+import { tableStrings } from '../../words/table.js';
+import { replayedTip } from '../../words/run-line.js';
+import { retryTip } from '../../words/attempts.js';
+import { correctionTip } from '../../words/contract.js';
+import { filterJournal, hadFixup, journalTally, retriedKeys } from '../../adapters/filters.js';
+import { journalColumns, shortStop } from '../../adapters/journal-columns.js';
+
+/** The look of the rows and of what their cells draw, inside `<cae-data-table>`. */
+const CELLS = [
+  meterStyles,
+  executorIconStyles,
+  css`
+    caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+    tr { column-gap: 12px; row-gap: 2px; padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: 12px; min-width: 980px; }
+    th, td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    tbody [data-col='outcome'], tbody [data-col='agent'], tbody [data-col='tokens'], tbody [data-col='reason'] { white-space: normal; }
+    /* a cell takes the size of the one line it draws, so the line sits where it did as the cell itself */
+    tbody [data-col='ended'], tbody [data-col='task'] { font-family: var(--mono); font-size: 11.5px; }
+    thead { position: sticky; top: 0; z-index: 1; }
+    thead tr { color: var(--text-muted); font-size: 11px; background: var(--bg); }
+    tbody tr[data-key]:hover { background: var(--card); }
+    tbody tr[data-executor='python'] { opacity: 0.85; }
+    tbody tr[data-executor='python']:hover, tbody tr[data-executor='python'][data-tone='failed'] { opacity: 1; }
+    tbody tr[data-ran='false'] { opacity: 0.8; }
+    tbody tr[data-fresh] { animation: rowin 1.6s var(--ease); }
+    tr.empty { min-width: 0; }
+    tr.empty td { font-size: var(--font-size-sm); }
+    .jwhy { color: var(--text-2); overflow-wrap: anywhere; }
+    .later { color: var(--status-done); }
+    .nw { white-space: nowrap; }
+    .unread { color: var(--status-attention); }
+    .two { display: flex; flex-direction: column; line-height: 1.35; }
+    /* the status mark stays beside its word, the lines under it align with the word */
+    .jstop.two { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; }
+    .jstop.two > * { grid-column: 2; }
+    .jstop.two::before { grid-row: 1; }
+    .two .sub { color: var(--text-muted); font-size: 11px; white-space: normal; overflow-wrap: anywhere; }
+    [data-col='tokens'] .two > span { white-space: nowrap; }
+    .sub .q { color: var(--text-2); font-family: var(--mono); white-space: nowrap; }
+    .jstop .sub { font-weight: 400; }
+    .cost { font-variant-numeric: tabular-nums; color: var(--text-2); }
+  `,
+];
+
+/**
+ * The run's history: every finished attempt, newest first (`journal.jsonl`),
+ * with a chip per outcome that filters by it (`ca-filter`). A row opens the
+ * task's detail, with a click or with Enter.
+ *
+ * @fires ca-filter - `{stop}`: a chip was toggled: a stop value, 'fixup' or 'retried' ('' clears)
+ * @fires ca-open-task - `{key}`: an attempt's row was opened (its task's key; a Python task with `view: 'output'`)
+ */
+@customElement('ca-journal-table')
+@localized()
+export class CaJournalTable extends LitElement {
+  static override styles = [
+    base,
+    css`
+      :host { display: block; }
+      .jtally { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 12px; }
+      .jchip { border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; font-size: 11.5px; color: var(--text-muted);
+        cursor: pointer; transition: all 0.15s; background: none; }
+      .jchip b { color: var(--text); }
+      .jchip:hover { border-color: var(--line2); color: var(--text); }
+      .jchip.on { background: var(--accent-bg); border-color: var(--accent); color: var(--text); }
+      /* a stop's chip: marked by its status (data-mark: done quiet with a ✓, a failure red with a ✕, not started ◌) */
+      .jchip[data-tone='failed'], .jchip[data-tone='attention'] { color: var(--tone); border-color: color-mix(in srgb, var(--tone) 40%, transparent); }
+    `,
+  ];
+
+  @property({ attribute: false }) rows: JournalRow[] = [];
+  /** The run's plan: with the rows, why a task did not start, as the tasks list says it. Optional. */
+  @property({ attribute: false }) plan: Plan | null = null;
+  /** Rows (by `rowId`) that just arrived: they flash once. */
+  @property({ attribute: false }) fresh: ReadonlySet<string> = new Set();
+  @property() kind = '';
+  /** A stop; 'bad' (every attempt that did not complete), 'fixup' (output sent back) or 'retried' (tasks retried after a failed try). */
+  @property() stop = '';
+  @property() q = '';
+  /** The run id: paths inside the run directory are shown relative to it. */
+  @property() run = '';
+  /** The pipeline's own journal columns (`RunSummary.row_extras`): a column each. */
+  @property({ attribute: false }) extras: readonly string[] = [];
+  /** The run is a replay that also launched (`mixedReplay`): each attempt played from its recording is marked, and counted in a filter. */
+  @property({ type: Boolean, attribute: 'replay-marks' }) replayMarks = false;
+
+  private open(rows: readonly JournalRow[], id: string): void {
+    const e = rows.find((r) => rowId(r) === id);
+    if (e) emit(this, 'ca-open-task', isPython(e) ? { key: e.key, view: 'output' } : { key: e.key });
+  }
+
+  override render() {
+    const rows = filterJournal(this.rows, this.kind, this.stop, this.q).reverse();
+    const fixups = this.rows.filter(hadFixup).length;
+    const retried = retriedKeys(this.rows).size;
+    const replayed = this.replayMarks ? this.rows.filter((r) => r.replayed).length : 0;
+    const chip = (k: string, label: string, n: number, tip: string, tone: Tone = 'neutral') =>
+      html`<button type="button" class="jchip ${this.stop === k ? 'on' : ''}" data-tone=${toneAttr(tone)} data-mark=${markOf(tone) ?? nothing}
+        aria-pressed=${this.stop === k} title=${tip}
+        @click=${() => emit(this, 'ca-filter', { stop: this.stop === k ? '' : k })}>${label} <b>${n}</b></button>`;
+    const columns = journalColumns({ run: this.run, outcomes: deriveRun(this.rows, this.plan).outcomes, journal: this.rows, rows, extras: this.extras, replayMarks: this.replayMarks });
+    return html`<div class="jtally">
+        ${journalTally(this.rows).map(([k, c]) => chip(k, shortStop(k), c, k, stopTone(k)))}
+        ${fixups ? chip('fixup', msg('attempts with corrections'), fixups, correctionTip()) : nothing}
+        ${retried ? chip('retried', msg('tasks retried'), retried, retryTip()) : nothing}
+        ${replayed ? chip('replayed', msg('attempts replayed'), replayed, replayedTip()) : nothing}
+      </div>
+      <cae-data-table
+        .columns=${columns}
+        .rows=${rows}
+        .rowKey=${rowId}
+        .rowTone=${(e: JournalRow) => (isLaunched(e) && isBad(e) ? 'failed' : undefined)}
+        .rowAttrs=${(e: JournalRow) => ({
+          'data-executor': isPython(e) ? 'python' : 'agent',
+          ...(isLaunched(e) ? {} : { 'data-ran': 'false' }),
+          ...(this.fresh.has(rowId(e)) ? { 'data-fresh': '' } : {}),
+        })}
+        .cellStyles=${CELLS}
+        .caption=${msg('History')}
+        .strings=${tableStrings(msg('No finished attempts'))}
+        @cae-activate=${(e: CustomEvent<{ id: string }>) => this.open(rows, e.detail.id)}
+      ></cae-data-table>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-journal-table': CaJournalTable;
+  }
+}

package/src/elements/lists/ca-panel-body.ts

@@ -0,0 +1,200 @@
+import { typedBody, type CodeBody, type PanelBody, type TableBody, type TreeBody, type TreeLink, type TypedPanelBody } from '@contraagent/api';
+import '@contraagent/elements/charts/define';
+import '@contraagent/elements/code/define';
+import '@contraagent/elements/data-table/define';
+import '@contraagent/elements/json-tree/define';
+import '@contraagent/elements/tiles/define';
+import '@contraagent/elements/tree/define';
+import { sortRows, type SortState } from '@contraagent/elements/data-table';
+import { md } from '@contraagent/elements/markdown';
+import { base, meterStyles, prose } from '@contraagent/elements/styles';
+import { localized, msg } from '@lit/localize';
+import { LitElement, css, html, nothing, type TemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { bodyColumns, bodyTiles, bodyTree, rowTone, type BodyRow } from '../../adapters/panel-body.js';
+import { emit } from '../../core/events.js';
+import { chartStrings, codeStrings, numberText, treeStrings } from '../../words/panels.js';
+import { tableStrings } from '../../words/table.js';
+
+/** The look of a table body's cells, inside `<cae-data-table>`. */
+const CELLS = [
+  meterStyles,
+  css`
+    caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+    /* a narrow screen scrolls the table sideways rather than cutting every cell */
+    tr { column-gap: 12px; padding: 6px 12px; border-bottom: 1px solid var(--line); font-size: 12px; min-width: 560px; }
+    th, td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    thead tr { color: var(--text-muted); font-size: 11px; }
+    tbody [data-align='end'] { font-variant-numeric: tabular-nums; }
+    tbody tr[data-tone='failed'], tbody tr[data-tone='attention'] { box-shadow: inset 2px 0 0 var(--tone); }
+    td a, th a { color: var(--accent); text-decoration: none; }
+    td a:hover, th a:hover, td a:focus-visible, th a:focus-visible { text-decoration: underline; }
+  `,
+];
+
+/**
+ * A pipeline's own view drawn from its typed body (`PanelBody`): tiles, a table, charts,
+ * a status grid, notes, code, trees, and blocks of them one under another, each under its title
+ * (folded when the body says `collapsed`). A tree whose nodes hold code shows the selected
+ * node's code beside it; a node with a link leads to a body of the panel (its `anchor`), a
+ * run panel's tab or a task. A body of another shape, inside blocks, is shown as a JSON tree.
+ *
+ * @fires ca-navigate - a tree node's link to a run panel's tab or a task was chosen
+ */
+@customElement('ca-panel-body')
+@localized()
+export class CaPanelBody extends LitElement {
+  static override styles = [
+    base,
+    prose,
+    css`
+      :host { display: block; }
+      /* a note reads as text beside the figures; a tone puts a rule beside it, the words say why */
+      .note { font-size: var(--font-size-sm); color: var(--text-2); line-height: 1.55; max-width: 78ch; }
+      .note > :first-child { margin-top: 0; }
+      .note > :last-child { margin-bottom: 0; }
+      .note[data-tone] { padding-left: 10px; border-left: 3px solid var(--line2); }
+      .note[data-tone='failed'] { border-left-color: var(--status-failed); }
+      .note[data-tone='attention'] { border-left-color: var(--status-attention); }
+      .note[data-tone='done'] { border-left-color: var(--status-done); }
+      .note[data-tone='running'] { border-left-color: var(--status-running); }
+      .block + .block { margin-top: 18px; }
+      h4 { margin: 0 0 8px; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-2); }
+      details > summary { cursor: pointer; margin-bottom: 8px; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-2); }
+      details:not([open]) > summary { margin-bottom: 0; }
+      .block[data-anchor] { scroll-margin-top: 12px; }
+      .block[data-anchor]:focus { outline: none; }
+      /* a tree beside the code of its selected node; one under the other on a narrow screen */
+      .pair { display: grid; grid-template-columns: minmax(180px, 30%) minmax(0, 1fr); gap: 12px; align-items: start; }
+      .pair > .tree { border: 1px solid var(--line); border-radius: var(--radius-md); max-height: 70vh; overflow: auto; }
+      .pane { min-width: 0; }
+      @media (max-width: 720px) { .pair { grid-template-columns: minmax(0, 1fr); } .pair > .tree { max-height: 40vh; } }
+    `,
+  ];
+
+  @property({ attribute: false }) body: PanelBody | undefined;
+
+  /** The order of each table's rows, by the table's place in the body. */
+  @state() private sorts = new Map<string, SortState>();
+  /** The node the reader selected in each tree, by the tree's place in the body. */
+  @state() private picks = new Map<string, string>();
+
+  override render() {
+    const typed = typedBody(this.body);
+    return typed ? this.draw(typed, '0') : html`<cae-json-tree .value=${this.body ?? {}}></cae-json-tree>`;
+  }
+
+  /** One body, under its title; `at` is its place in the body, which keeps a table's order. */
+  private draw(b: TypedPanelBody, at: string): TemplateResult {
+    const inner = this.content(b, at);
+    const anchor = b.anchor || nothing;
+    if (!b.title) return html`<div class="block" data-anchor=${anchor} tabindex=${b.anchor ? -1 : nothing}>${inner}</div>`;
+    return b.collapsed
+      ? html`<details class="block" data-anchor=${anchor} tabindex=${b.anchor ? -1 : nothing}><summary>${b.title}</summary>${inner}</details>`
+      : html`<div class="block" data-anchor=${anchor} tabindex=${b.anchor ? -1 : nothing}><h4>${b.title}</h4>${inner}</div>`;
+  }
+
+  private code(c: CodeBody, path?: string): TemplateResult {
+    return html`<cae-code .code=${c.text} .language=${c.language ?? ''} .start=${c.start ?? 1} .highlight=${c.highlight ?? []}
+      .path=${c.path ?? path ?? ''} .label=${c.title ?? c.path ?? path ?? ''} ?wrap=${!!c.wrap} .strings=${codeStrings()}></cae-code>`;
+  }
+
+  /** A tree, and the selected node's code beside it: the texts come with the body, so a selection sends no request. */
+  private tree(b: TreeBody, at: string): TemplateResult {
+    const { items, nodes, first } = bodyTree(b);
+    const picked = this.picks.get(at);
+    const selected = picked !== undefined && nodes.has(picked) ? picked : first;
+    const node = selected ? nodes.get(selected) : undefined;
+    const paired = [...nodes.values()].some((n) => n.code);
+    const tree = html`<cae-tree class="tree" .items=${items} .selected=${node?.code ? selected : null} .label=${b.title ?? ''}
+      .strings=${treeStrings()} @cae-select=${(e: CustomEvent<{ id: string | null }>) => this.choose(at, e.detail.id, nodes)}></cae-tree>`;
+    if (!paired) return tree;
+    return html`<div class="pair">
+      ${tree}
+      <div class="pane">${node?.code ? this.code(node.code, selected ?? '') : html`<div class="meta">${msg('No selection')}</div>`}</div>
+    </div>`;
+  }
+
+  private choose(at: string, id: string | null, nodes: ReadonlyMap<string, { code?: CodeBody | null; link?: TreeLink | null }>): void {
+    const node = id === null ? undefined : nodes.get(id);
+    if (!node || id === null) return;
+    if (node.code) this.picks = new Map(this.picks).set(at, id);
+    else if (node.link) this.follow(node.link);
+  }
+
+  /** Goes where a node leads: a body of this panel, a run panel's tab or a task, in its run or the one shown. */
+  private follow(link: TreeLink): void {
+    if (link.anchor) {
+      const to = this.renderRoot.querySelector<HTMLElement>(`[data-anchor="${CSS.escape(link.anchor)}"]`);
+      to?.scrollIntoView?.({ block: 'start' });
+      to?.focus({ preventScroll: true });
+      return;
+    }
+    const run = link.run ? { run: link.run } : {};
+    if (link.panel) emit(this, 'ca-navigate', { page: '', ...run, tab: `panel:${link.panel}` });
+    else if (link.task) emit(this, 'ca-navigate', { page: '', ...run, tab: 'stream', key: link.task, view: 'transcript', round: null });
+  }
+
+  private content(b: TypedPanelBody, at: string): TemplateResult {
+    const s = chartStrings();
+    switch (b.type) {
+      case 'blocks':
+        return html`${(b).blocks.map((x, i) => {
+          const t = typedBody(x);
+          return t ? this.draw(t, `${at}.${i}`) : html`<div class="block"><cae-json-tree .value=${x}></cae-json-tree></div>`;
+        })}`;
+      case 'tiles':
+        return html`<cae-stat-tiles .tiles=${bodyTiles(b.tiles)} .bump=${false}></cae-stat-tiles>`;
+      case 'table':
+        return this.table(b, at);
+      case 'columns':
+        return html`<cae-column-chart .label=${b.title ?? ''} .x=${b.x} .series=${b.series} ?stacked=${!!b.stacked}
+          .format=${numberText(b.unit)} .strings=${s}></cae-column-chart>`;
+      case 'lines':
+        return html`<cae-line-chart .label=${b.title ?? ''} .x=${b.x} .series=${b.series} .format=${numberText(b.unit)} .strings=${s}></cae-line-chart>`;
+      case 'heatmap':
+        return html`<cae-heatmap .label=${b.title ?? ''} .x=${b.x} .y=${b.y} .values=${b.values} .format=${numberText(b.unit)} .strings=${s}></cae-heatmap>`;
+      case 'hbars':
+        return html`<cae-bar-chart .label=${b.title ?? ''} .bars=${b.bars.map((x) => ({ label: x.label, value: x.value, tone: x.tone ?? undefined }))}
+          .format=${numberText(b.unit)} .strings=${s}></cae-bar-chart>`;
+      case 'status_grid':
+        return html`<cae-state-grid .label=${b.title ?? ''} .x=${b.x} .y=${b.y} .cells=${b.cells} .strings=${s}></cae-state-grid>`;
+      case 'note':
+        // Escaped markdown: any markup the text holds is shown as text; links keep only http(s).
+        return html`<div class="note" data-tone=${b.tone && b.tone !== 'neutral' ? b.tone : nothing}>${unsafeHTML(md(b.text))}</div>`;
+      case 'code':
+        return this.code(b);
+      case 'tree':
+        return this.tree(b, at);
+      default:
+        return html`${nothing}`;
+    }
+  }
+
+  private table(b: TableBody, at: string): TemplateResult {
+    const columns = bodyColumns(b);
+    const rows = b.rows as BodyRow[];
+    const keys = new Map(rows.map((r, i) => [r, String(i)]));
+    const sort = this.sorts.get(at) ?? null;
+    const shown = sort ? sortRows(rows, columns, sort) : rows;
+    return html`<cae-data-table
+      .columns=${columns}
+      .rows=${shown}
+      .rowKey=${(r: BodyRow) => keys.get(r) ?? ''}
+      .rowTone=${rowTone}
+      .activatable=${false}
+      .sort=${sort}
+      .cellStyles=${CELLS}
+      .caption=${b.title ?? ''}
+      .strings=${tableStrings(msg('No rows'))}
+      @cae-sort=${(e: CustomEvent<SortState>) => (this.sorts = new Map(this.sorts).set(at, e.detail))}
+    ></cae-data-table>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-panel-body': CaPanelBody;
+  }
+}

package/src/elements/lists/ca-panel-view.ts

@@ -0,0 +1,50 @@
+import { typedBody, type PanelBody, type PanelInfo } from '@contraagent/api';
+import { localized, msg, str } from '@lit/localize';
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { base } from '@contraagent/elements/styles';
+import '@contraagent/elements/json-tree/define';
+import './ca-panel-body.js';
+
+/** A view the pipeline added (`monitor.Panel`), updating live: a typed body as tiles, a table and charts, any other as a JSON tree. */
+@customElement('ca-panel-view')
+@localized()
+export class CaPanelView extends LitElement {
+  static override styles = [
+    base,
+    css`
+      :host { display: block; }
+      .tab-ic { opacity: 1; margin-right: 6px; font-size: 12px; }
+      .desc { margin: -4px 0 12px; }
+    `,
+  ];
+
+  /** The panel's registered name. */
+  @property() name = '';
+  /** Its title, description and icon from `/api/info`. */
+  @property({ attribute: false }) panel: PanelInfo | undefined;
+  /** Its body; undefined until the feed has sent it. */
+  @property({ attribute: false }) data: PanelBody | undefined;
+
+  override render() {
+    if (this.data === undefined) {
+      // A panel that /api/info does not list never sends anything: say so instead of loading forever.
+      return this.panel
+        ? html`<div class="blank"><span class="ic" aria-hidden="true">…</span>${msg('Loading…')}</div>`
+        : html`<div class="blank"><span class="ic" aria-hidden="true">▤</span>${msg(str`No custom view named ${this.name}`)}</div>`;
+    }
+    const info = this.panel;
+    return html`<section class="panel">
+      <h3><span class="tab-ic" aria-hidden="true">${info?.icon || '▤'}</span>${info?.title || this.name}
+        <span class="r">${msg('Custom view')}</span></h3>
+      ${info?.description ? html`<div class="meta desc">${info.description}</div>` : nothing}
+      ${typedBody(this.data) ? html`<ca-panel-body .body=${this.data}></ca-panel-body>` : html`<cae-json-tree .value=${this.data}></cae-json-tree>`}
+    </section>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-panel-view': CaPanelView;
+  }
+}

package/src/elements/lists/ca-proc-tree.ts

@@ -0,0 +1,57 @@
+import type { ProcNode, Procs } from '@contraagent/api';
+import { localized, msg } from '@lit/localize';
+import { LitElement, css, html, nothing, type TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { starts } from '@contraagent/elements';
+import { kindUnit } from '../../words/format.js';
+import { base } from '@contraagent/elements/styles';
+import '@contraagent/elements/count/define';
+
+/** The run's live process tree (its first root): pid, command, and how long each has run. */
+@customElement('ca-proc-tree')
+@localized()
+export class CaProcTree extends LitElement {
+  static override styles = [
+    base,
+    css`
+      :host { display: block; }
+      .ptree2 { font-family: var(--mono); font-size: 11.5px; max-height: 220px; overflow: auto; }
+      .pt-n { display: flex; gap: 10px; align-items: center; padding: 3px 6px 3px calc(6px + var(--d) * 18px); border-radius: 6px; position: relative; }
+      .pt-n:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
+      .pt-n::before { content: ''; position: absolute; left: calc(var(--d) * 18px - 8px); top: 0; bottom: 50%; width: 8px;
+        border-left: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
+      .pt-n.root::before { display: none; }
+      .pt-pid { color: var(--text-muted); min-width: 58px; }
+      .pt-cmd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; color: var(--text-2); }
+      .pt-n.llm .pt-cmd { color: var(--text); }
+      .pt-n.llm .pt-pid { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--agent) 70%, transparent); padding-left: 6px; }
+      .pt-age { color: var(--text-muted); }
+    `,
+  ];
+
+  @property({ attribute: false }) procs: Procs | null = null;
+
+  override render() {
+    const root = this.procs?.tree[0];
+    if (!root) return html`<div class="meta">${msg('No running processes')}</div>`;
+    return html`<div class="ptree2">${this.node(root, 0)}</div>`;
+  }
+
+  private node(n: ProcNode, d: number): TemplateResult {
+    const cmd = n.full_cmd || n.cmd || '';
+    const label = (n.cmd || cmd).split(' ').slice(0, 3).join(' ');
+    const llm = /\b(claude|omp)\b/.test(cmd);
+    return html`<div class="pt-n ${llm ? 'llm' : ''} ${d ? '' : 'root'}" style="--d:${d}" title=${cmd}>
+        <span class="pt-pid">${n.pid}</span>
+        <span class="pt-cmd">${n.key ? html`<b>${kindUnit(n)}</b> ` : nothing}${label.length > 70 ? `${label.slice(0, 70)}…` : label}</span>
+        <cae-elapsed class="pt-age" .since=${starts.at(`p:${n.pid}`, n.age_s)}></cae-elapsed>
+      </div>
+      ${(n.children ?? []).map((c) => this.node(c, d + 1))}`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-proc-tree': CaProcTree;
+  }
+}