@contraagent/ui 0.0.0-stage → 0.1.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,139 @@
+import { typedBody, type PanelBody, type TableBody, type TypedPanelBody } from '@contraagent/api';
+import '@contraagent/elements/charts/define';
+import '@contraagent/elements/data-table/define';
+import '@contraagent/elements/json-tree/define';
+import '@contraagent/elements/tiles/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, rowTone, type BodyRow } from '../../adapters/panel-body.js';
+import { chartStrings, numberText } 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, and blocks of them one under another, each under its title
+ * (folded when the body says `collapsed`). A body of another shape, inside blocks, is
+ * shown as a JSON tree.
+ */
+@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; }
+    `,
+  ];
+
+  @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>();
+
+  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);
+    if (!b.title) return html`<div class="block">${inner}</div>`;
+    return b.collapsed
+      ? html`<details class="block"><summary>${b.title}</summary>${inner}</details>`
+      : html`<div class="block"><h4>${b.title}</h4>${inner}</div>`;
+  }
+
+  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>`;
+      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;
+  }
+}

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

@@ -0,0 +1,89 @@
+import type { Procs } 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 { repeat } from 'lit/directives/repeat.js';
+import { emit } from '../../core/events.js';
+import { starts } from '@contraagent/elements';
+import { facts, kindUnit } from '../../words/format.js';
+import { noReportLabel } from '../../words/hosts.js';
+import { notInExport } from '../../words/export.js';
+import { base } from '@contraagent/elements/styles';
+import '@contraagent/elements/count/define';
+import './ca-proc-tree.js';
+
+/**
+ * A live run's processes: each coding-agent launch (opens its transcript with
+ * `ca-open-task`), each Python task, and the process tree.
+ *
+ * @fires ca-open-task - `{key}`: a launch was clicked
+ */
+@customElement('ca-procs-view')
+@localized()
+export class CaProcsView extends LitElement {
+  static override styles = [
+    base,
+    css`
+      :host { display: block; }
+      .cmd { word-break: break-all; }
+    `,
+  ];
+
+  @property({ attribute: false }) procs: Procs | null = null;
+  /** The run's host stopped reporting (a hub): whether it runs is not known. */
+  @property({ type: Boolean }) unresponsive = false;
+  /** Read from an export (`Info.export`): it holds no processes. */
+  @property({ type: Boolean }) exported = false;
+
+  /** Open a launch's task. A launch's row opens it on a click; its name is the button for the keyboard. */
+  private open(key: string): void {
+    emit(this, 'ca-open-task', { key });
+  }
+
+
+  override render() {
+    const p = this.procs;
+    if (!p?.alive) {
+      const why = this.exported ? notInExport() : this.unresponsive ? noReportLabel() : msg('not running');
+      return html`<div class="blank"><span class="ic" aria-hidden="true">⚙</span><b>${facts(msg('No processes'), why)}</b></div>`;
+    }
+    const pys = p.python_tasks;
+    return html`<div class="g12">
+      <section class="panel c12">
+        <h3 title=${msg('One per task (Backend.run)')}>${msg('Agent sessions running')} <span class="r">${p.launches.length}</span></h3>
+        ${p.launches.length
+          ? repeat(
+              p.launches,
+              (c) => c.key,
+              (c) => html`<div class="fl" @click=${(e: MouseEvent) => !(e.target as Element).closest('button') && this.open(c.key)}>
+                <button type="button" class="fl-name jmono" @click=${() => this.open(c.key)}>${kindUnit(c)}</button>
+                <span class="meta">${facts(msg(str`PID ${c.pid}`), msg(str`Model ${c.model || '—'}`), c.role ? msg(str`Role ${c.role}`) : '')} |
+                  <cae-elapsed .since=${starts.at(`c:${c.key}`, c.age_s)}></cae-elapsed></span>
+                <div class="meta mono cmd">${(c.full_cmd || msg('In the pipeline process')).slice(0, 400)}</div>
+              </div>`,
+            )
+          : html`<div class="meta">${msg('No agent sessions')}</div>`}
+      </section>
+      ${pys.length
+        ? html`<section class="panel c12">
+            <h3 title=${msg('Functions in the pipeline process')}>${msg('Python tasks running')} <span class="r">${pys.length}</span></h3>
+            ${repeat(
+              pys,
+              (pt) => pt.key,
+              (pt) => html`<div class="fl">
+                <b class="jmono">${kindUnit(pt)}</b>
+                <span class="meta">${msg(str`PID ${pt.pid}`)} | <cae-elapsed .since=${starts.at(`p:${pt.key}`, pt.age_s)}></cae-elapsed></span>
+              </div>`,
+            )}
+          </section>`
+        : nothing}
+      <section class="panel c12"><h3>${msg('Process tree')}</h3><ca-proc-tree .procs=${p}></ca-proc-tree></section>
+    </div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-procs-view': CaProcsView;
+  }
+}