@contraagent/ui 0.0.0-stage → 0.2.0

package/dist/elements/lists/ca-journal-table.js

@@ -0,0 +1,170 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { deriveRun, isBad, isLaunched, isPython, rowId } 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 } 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'`)
+ */
+let CaJournalTable = class CaJournalTable extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.rows = [];
+        /** The run's plan: with the rows, why a task did not start, as the tasks list says it. Optional. */
+        this.plan = null;
+        /** Rows (by `rowId`) that just arrived: they flash once. */
+        this.fresh = new Set();
+        this.kind = '';
+        /** A stop; 'bad' (every attempt that did not complete), 'fixup' (output sent back) or 'retried' (tasks retried after a failed try). */
+        this.stop = '';
+        this.q = '';
+        /** The run id: paths inside the run directory are shown relative to it. */
+        this.run = '';
+        /** The pipeline's own journal columns (`RunSummary.row_extras`): a column each. */
+        this.extras = [];
+        /** The run is a replay that also launched (`mixedReplay`): each attempt played from its recording is marked, and counted in a filter. */
+        this.replayMarks = false;
+    }
+    static { this.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); }
+    `,
+    ]; }
+    open(rows, id) {
+        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 });
+    }
+    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, label, n, tip, 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) => (isLaunched(e) && isBad(e) ? 'failed' : undefined)}
+        .rowAttrs=${(e) => ({
+            '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) => this.open(rows, e.detail.id)}
+      ></cae-data-table>`;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], CaJournalTable.prototype, "rows", void 0);
+__decorate([
+    property({ attribute: false })
+], CaJournalTable.prototype, "plan", void 0);
+__decorate([
+    property({ attribute: false })
+], CaJournalTable.prototype, "fresh", void 0);
+__decorate([
+    property()
+], CaJournalTable.prototype, "kind", void 0);
+__decorate([
+    property()
+], CaJournalTable.prototype, "stop", void 0);
+__decorate([
+    property()
+], CaJournalTable.prototype, "q", void 0);
+__decorate([
+    property()
+], CaJournalTable.prototype, "run", void 0);
+__decorate([
+    property({ attribute: false })
+], CaJournalTable.prototype, "extras", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'replay-marks' })
+], CaJournalTable.prototype, "replayMarks", void 0);
+CaJournalTable = __decorate([
+    customElement('ca-journal-table'),
+    localized()
+], CaJournalTable);
+export { CaJournalTable };
+//# sourceMappingURL=ca-journal-table.js.map

package/dist/elements/lists/ca-journal-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ca-journal-table.js","sourceRoot":"","sources":["../../../src/elements/lists/ca-journal-table.ts"],"names":[],"mappings":"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"}

package/dist/elements/lists/ca-panel-body.d.ts

@@ -0,0 +1,42 @@
+import { type PanelBody } 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 { LitElement, type TemplateResult } from 'lit';
+/**
+ * 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
+ */
+export declare class CaPanelBody extends LitElement {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    body: PanelBody | undefined;
+    /** The order of each table's rows, by the table's place in the body. */
+    private sorts;
+    /** The node the reader selected in each tree, by the tree's place in the body. */
+    private picks;
+    render(): TemplateResult;
+    /** One body, under its title; `at` is its place in the body, which keeps a table's order. */
+    private draw;
+    private 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;
+    private choose;
+    /** 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;
+    private content;
+    private table;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ca-panel-body': CaPanelBody;
+    }
+}
+//# sourceMappingURL=ca-panel-body.d.ts.map

package/dist/elements/lists/ca-panel-body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ca-panel-body.d.ts","sourceRoot":"","sources":["../../../src/elements/lists/ca-panel-body.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,SAAS,EAAqE,MAAM,kBAAkB,CAAC;AAC/I,OAAO,qCAAqC,CAAC;AAC7C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,yCAAyC,CAAC;AACjD,OAAO,wCAAwC,CAAC;AAChD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mCAAmC,CAAC;AAK3C,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAwB1E;;;;;;;;GAQG;AACH,qBAEa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0DA0BpB;IAE8B,IAAI,EAAE,SAAS,GAAG,SAAS,CAAC;IAE5D,wEAAwE;IAC/D,OAAO,CAAC,KAAK,CAAgC;IACtD,kFAAkF;IACzE,OAAO,CAAC,KAAK,CAA6B;IAE1C,MAAM;IAKf,6FAA6F;IAC7F,OAAO,CAAC,IAAI;IASZ,OAAO,CAAC,IAAI;IAKZ,qHAAqH;IACrH,OAAO,CAAC,IAAI;IAeZ,OAAO,CAAC,MAAM;IAOd,+GAA+G;IAC/G,OAAO,CAAC,MAAM;IAYd,OAAO,CAAC,OAAO;IAoCf,OAAO,CAAC,KAAK;CAmBd;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/elements/lists/ca-panel-body.js

@@ -0,0 +1,210 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { typedBody } 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 } 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 } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { bodyColumns, bodyTiles, bodyTree, rowTone } 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
+ */
+let CaPanelBody = class CaPanelBody extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The order of each table's rows, by the table's place in the body. */
+        this.sorts = new Map();
+        /** The node the reader selected in each tree, by the tree's place in the body. */
+        this.picks = new Map();
+    }
+    static { this.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; } }
+    `,
+    ]; }
+    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. */
+    draw(b, at) {
+        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>`;
+    }
+    code(c, path) {
+        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. */
+    tree(b, at) {
+        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) => 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>`;
+    }
+    choose(at, id, nodes) {
+        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. */
+    follow(link) {
+        if (link.anchor) {
+            const to = this.renderRoot.querySelector(`[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 });
+    }
+    content(b, at) {
+        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}`;
+        }
+    }
+    table(b, at) {
+        const columns = bodyColumns(b);
+        const rows = b.rows;
+        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) => keys.get(r) ?? ''}
+      .rowTone=${rowTone}
+      .activatable=${false}
+      .sort=${sort}
+      .cellStyles=${CELLS}
+      .caption=${b.title ?? ''}
+      .strings=${tableStrings(msg('No rows'))}
+      @cae-sort=${(e) => (this.sorts = new Map(this.sorts).set(at, e.detail))}
+    ></cae-data-table>`;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], CaPanelBody.prototype, "body", void 0);
+__decorate([
+    state()
+], CaPanelBody.prototype, "sorts", void 0);
+__decorate([
+    state()
+], CaPanelBody.prototype, "picks", void 0);
+CaPanelBody = __decorate([
+    customElement('ca-panel-body'),
+    localized()
+], CaPanelBody);
+export { CaPanelBody };
+//# sourceMappingURL=ca-panel-body.js.map

package/dist/elements/lists/ca-panel-body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ca-panel-body.js","sourceRoot":"","sources":["../../../src/elements/lists/ca-panel-body.ts"],"names":[],"mappings":"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"}

package/dist/elements/lists/ca-panel-view.d.ts

@@ -0,0 +1,21 @@
+import { type PanelBody, type PanelInfo } from '@contraagent/api';
+import { LitElement } from 'lit';
+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. */
+export declare class CaPanelView extends LitElement {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /** The panel's registered name. */
+    name: string;
+    /** Its title, description and icon from `/api/info`. */
+    panel: PanelInfo | undefined;
+    /** Its body; undefined until the feed has sent it. */
+    data: PanelBody | undefined;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ca-panel-view': CaPanelView;
+    }
+}
+//# sourceMappingURL=ca-panel-view.d.ts.map

package/dist/elements/lists/ca-panel-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ca-panel-view.d.ts","sourceRoot":"","sources":["../../../src/elements/lists/ca-panel-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7E,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,wCAAwC,CAAC;AAChD,OAAO,oBAAoB,CAAC;AAE5B,uIAAuI;AACvI,qBAEa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0DAOpB;IAEF,mCAAmC;IACvB,IAAI,SAAM;IACtB,wDAAwD;IACxB,KAAK,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7D,sDAAsD;IACtB,IAAI,EAAE,SAAS,GAAG,SAAS,CAAC;IAEnD,MAAM;CAehB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/elements/lists/ca-panel-view.js

@@ -0,0 +1,59 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { typedBody } 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. */
+let CaPanelView = class CaPanelView extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The panel's registered name. */
+        this.name = '';
+    }
+    static { this.styles = [
+        base,
+        css `
+      :host { display: block; }
+      .tab-ic { opacity: 1; margin-right: 6px; font-size: 12px; }
+      .desc { margin: -4px 0 12px; }
+    `,
+    ]; }
+    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>`;
+    }
+};
+__decorate([
+    property()
+], CaPanelView.prototype, "name", void 0);
+__decorate([
+    property({ attribute: false })
+], CaPanelView.prototype, "panel", void 0);
+__decorate([
+    property({ attribute: false })
+], CaPanelView.prototype, "data", void 0);
+CaPanelView = __decorate([
+    customElement('ca-panel-view'),
+    localized()
+], CaPanelView);
+export { CaPanelView };
+//# sourceMappingURL=ca-panel-view.js.map

package/dist/elements/lists/ca-panel-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ca-panel-view.js","sourceRoot":"","sources":["../../../src/elements/lists/ca-panel-view.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAkC,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,wCAAwC,CAAC;AAChD,OAAO,oBAAoB,CAAC;AAE5B,uIAAuI;AAGhI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAUL,mCAAmC;QACvB,SAAI,GAAG,EAAE,CAAC;IAqBxB,CAAC;aA/BiB,WAAM,GAAG;QACvB,IAAI;QACJ,GAAG,CAAA;;;;KAIF;KACF,AAPqB,CAOpB;IASO,MAAM;QACb,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAC5B,gGAAgG;YAChG,OAAO,IAAI,CAAC,KAAK;gBACf,CAAC,CAAC,IAAI,CAAA,kEAAkE,GAAG,CAAC,UAAU,CAAC,QAAQ;gBAC/F,CAAC,CAAC,IAAI,CAAA,kEAAkE,GAAG,CAAC,GAAG,CAAA,wBAAwB,IAAI,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC;QAChI,CAAC;QACD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;QACxB,OAAO,IAAI,CAAA;oDACqC,IAAI,EAAE,IAAI,IAAI,GAAG,UAAU,IAAI,EAAE,KAAK,IAAI,IAAI,CAAC,IAAI;0BAC7E,GAAG,CAAC,aAAa,CAAC;QACpC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,0BAA0B,IAAI,CAAC,WAAW,QAAQ,CAAC,CAAC,CAAC,OAAO;QACpF,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,wBAAwB,IAAI,CAAC,IAAI,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,IAAI,mBAAmB;eACpI,CAAC;IACd,CAAC;;AApBW;IAAX,QAAQ,EAAE;yCAAW;AAEU;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0CAA8B;AAE7B;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yCAA6B;AAfjD,WAAW;IAFvB,aAAa,CAAC,eAAe,CAAC;IAC9B,SAAS,EAAE;GACC,WAAW,CAgCvB"}

package/dist/elements/lists/ca-proc-tree.d.ts

@@ -0,0 +1,16 @@
+import type { Procs } from '@contraagent/api';
+import { LitElement, type TemplateResult } from 'lit';
+import '@contraagent/elements/count/define';
+/** The run's live process tree (its first root): pid, command, and how long each has run. */
+export declare class CaProcTree extends LitElement {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    procs: Procs | null;
+    render(): TemplateResult<1>;
+    private node;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ca-proc-tree': CaProcTree;
+    }
+}
+//# sourceMappingURL=ca-proc-tree.d.ts.map

package/dist/elements/lists/ca-proc-tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ca-proc-tree.d.ts","sourceRoot":"","sources":["../../../src/elements/lists/ca-proc-tree.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1E,OAAO,oCAAoC,CAAC;AAE5C,6FAA6F;AAC7F,qBAEa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0DAgBpB;IAE8B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAQ;IAElD,MAAM;IAMf,OAAO,CAAC,IAAI;CAWb;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/dist/elements/lists/ca-proc-tree.js

@@ -0,0 +1,63 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { localized, msg } from '@lit/localize';
+import { LitElement, css, html, nothing } 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. */
+let CaProcTree = class CaProcTree extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.procs = null;
+    }
+    static { this.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); }
+    `,
+    ]; }
+    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>`;
+    }
+    node(n, d) {
+        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))}`;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], CaProcTree.prototype, "procs", void 0);
+CaProcTree = __decorate([
+    customElement('ca-proc-tree'),
+    localized()
+], CaProcTree);
+export { CaProcTree };
+//# sourceMappingURL=ca-proc-tree.js.map