@contraagent/ui 0.0.0-stage → 0.2.0

package/dist/elements/shell/ca-toasts.js

@@ -0,0 +1,88 @@
+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 { isBad, runRelative } from '@contraagent/api';
+import { msg, str } from '@lit/localize';
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { base } from '@contraagent/elements/styles';
+import { facts, fmtDur, kindUnit } from '../../words/format.js';
+import { modelSwitch, stopLabel } from '../../words/index.js';
+/** The notice for a journal row that just arrived: its kind, title and line (`CaToasts.show`'s arguments). */
+export function rowToast(row, run) {
+    const name = kindUnit(row);
+    const reason = runRelative(row.reason, run).slice(0, 110);
+    if (row.stop === 'invalid_input')
+        return ['attention', msg(str `${name}: not started`), reason];
+    if (isBad(row))
+        return ['failed', msg(str `${name}: ${stopLabel(row.stop)}`), reason];
+    if (row.stop === 'partial')
+        return ['attention', msg(str `${name}: ${stopLabel(row.stop)}`), reason];
+    const sw = modelSwitch(row.hops, row.wall_s, row.skipped_hops);
+    if (sw)
+        return ['agent', msg(str `${name}: model switch`), sw.slice(0, 110)];
+    return ['done', msg(str `${name}: done`), facts(fmtDur(row.wall_s), row.model)];
+}
+const ICON = { done: '✓', failed: '✕', attention: '◌', running: '●', agent: '✦' };
+const SHOW_MS = 5200;
+const MAX = 4;
+/**
+ * Short notices in a corner; each leaves on its own after a few seconds. A
+ * screen reader hears each one: a failure at once, the others when it is idle.
+ */
+let CaToasts = class CaToasts extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.toasts = [];
+        this.next = 0;
+    }
+    static { this.styles = [
+        base,
+        css `
+      :host { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 60; pointer-events: none; }
+      .toast { pointer-events: auto; min-width: 240px; max-width: 380px; padding: 10px 14px; border-radius: 11px;
+        background: var(--panel2); border: 1px solid var(--line2); box-shadow: 0 18px 40px color-mix(in srgb, var(--shadow) 60%, transparent);
+        display: flex; gap: 10px; align-items: flex-start; animation: toast-in 0.35s var(--ease) both; }
+      .toast.out { animation: toast-out 0.35s var(--ease) both; }
+      .ti { font-size: 16px; line-height: 1.2; }
+      b { display: block; font-size: 12.5px; }
+      span.sub { font-size: 11.5px; color: var(--text-muted); }
+      .ti { color: var(--text-muted); }
+      .toast[data-tone] .ti { color: var(--tone); }
+      .toast[data-tone='failed'], .toast[data-tone='attention'] { border-color: color-mix(in srgb, var(--tone) 50%, var(--line2)); }
+      .agent .ti { color: var(--agent); }
+    `,
+    ]; }
+    show(kind, title, sub = '') {
+        const t = { id: this.next++, kind, title, sub, out: false };
+        this.toasts = [...this.toasts, t].slice(-MAX);
+        setTimeout(() => {
+            this.toasts = this.toasts.map((x) => (x.id === t.id ? { ...x, out: true } : x));
+            setTimeout(() => (this.toasts = this.toasts.filter((x) => x.id !== t.id)), 400);
+        }, SHOW_MS);
+    }
+    render() {
+        // The notices as a screen reader hears them: failures at once (`role="alert"`), the others when it is idle (`role="status"`).
+        const said = (urgent) => repeat(this.toasts.filter((t) => !t.out && (t.kind === 'failed') === urgent), (t) => t.id, (t) => html `<p>${facts(t.title, t.sub)}</p>`);
+        return html `<div class="sr" role="status" aria-live="polite">${said(false)}</div>
+      <div class="sr" role="alert" aria-live="assertive">${said(true)}</div>
+      <div aria-hidden="true" style="display:contents">
+        ${repeat(this.toasts, (t) => t.id, (t) => html `<div class="toast ${t.kind === 'agent' ? 'agent' : ''} ${t.out ? 'out' : ''}" data-tone=${t.kind === 'agent' ? nothing : t.kind}>
+            <span class="ti">${ICON[t.kind]}</span>
+            <div><b>${t.title}</b>${t.sub ? html `<span class="sub">${t.sub}</span>` : nothing}</div>
+          </div>`)}
+      </div>`;
+    }
+};
+__decorate([
+    state()
+], CaToasts.prototype, "toasts", void 0);
+CaToasts = __decorate([
+    customElement('ca-toasts')
+], CaToasts);
+export { CaToasts };
+//# sourceMappingURL=ca-toasts.js.map

package/dist/elements/shell/ca-toasts.js.map

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

package/dist/elements/shell/header.d.ts

@@ -0,0 +1,13 @@
+import type { Activity } from '@contraagent/api';
+import { type TemplateResult } from 'lit';
+/**
+ * The brand mark (braces around a spark, the favicon's drawing) and the monitor's title.
+ * The braces take the text colour and the spark goes from the accent to the agent colour,
+ * so the mark follows the theme; the gradient's id is unique in the element's shadow root.
+ */
+export declare const brand: (title: string) => TemplateResult;
+/** The tasks running now, the first three by name; each chip opens its task (sent from `host`). */
+export declare const nowLine: (host: EventTarget, acts: readonly Activity[]) => TemplateResult;
+/** Whether the feed is connected: a dot, with its words as its accessible name and its tooltip. */
+export declare const connection: (connected: boolean) => TemplateResult;
+//# sourceMappingURL=header.d.ts.map

package/dist/elements/shell/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/elements/shell/header.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIzD;;;;GAIG;AACH,eAAO,MAAM,KAAK,GAAI,OAAO,MAAM,KAAG,cAmB7B,CAAC;AAEV,mGAAmG;AACnG,eAAO,MAAM,OAAO,GAAI,MAAM,WAAW,EAAE,MAAM,SAAS,QAAQ,EAAE,KAAG,cAGjD,CAAC;AAEvB,mGAAmG;AACnG,eAAO,MAAM,UAAU,GAAI,WAAW,OAAO,KAAG,cAG/C,CAAC"}

package/dist/elements/shell/header.js

@@ -0,0 +1,38 @@
+import { msg } from '@lit/localize';
+import { html, nothing } from 'lit';
+import { kindUnit } from '../../words/format.js';
+import { taskChip } from '../shared/task-chip.js';
+/**
+ * The brand mark (braces around a spark, the favicon's drawing) and the monitor's title.
+ * The braces take the text colour and the spark goes from the accent to the agent colour,
+ * so the mark follows the theme; the gradient's id is unique in the element's shadow root.
+ */
+export const brand = (title) => html `<div class="brand">
+    <svg viewBox="12 12 96 96" aria-hidden="true">
+      <defs>
+        <linearGradient id="brand-spark" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0" class="spark-a" />
+          <stop offset="1" class="spark-b" />
+        </linearGradient>
+      </defs>
+      <g class="logo-braces" fill="none" stroke-width="14" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M48 22 C36 22 36 30 36 38 L36 50 C36 56 32 60 26 60 C32 60 36 64 36 70 L36 82 C36 90 36 98 48 98" />
+        <path d="M72 22 C84 22 84 30 84 38 L84 50 C84 56 88 60 94 60 C88 60 84 64 84 70 L84 82 C84 90 84 98 72 98" />
+      </g>
+      <g class="logo-spark">
+        <path d="M60 45 C61.6 56 64 58.4 75 60 C64 61.6 61.6 64 60 75 C58.4 64 56 61.6 45 60 C56 58.4 58.4 56 60 45 Z"
+          fill="url(#brand-spark)" transform="translate(60 60) scale(1.15) translate(-60 -60)" />
+      </g>
+    </svg>
+    <span title=${title}>${title}</span>
+  </div>`;
+/** The tasks running now, the first three by name; each chip opens its task (sent from `host`). */
+export const nowLine = (host, acts) => html `<span class="nowline">${acts.length
+    ? msg(html `Running ${acts.slice(0, 3).map((a) => taskChip(host, kindUnit(a), { key: a.key }))}${acts.length > 3 ? html ` <span>+${acts.length - 3}</span>` : nothing}`)
+    : nothing}</span>`;
+/** Whether the feed is connected: a dot, with its words as its accessible name and its tooltip. */
+export const connection = (connected) => {
+    const words = connected ? msg('Connected to the monitor server') : msg('Not connected to the monitor server');
+    return html `<span role="img" aria-label=${words} title=${words}><span class="live-dot ${connected ? '' : 'off'}"></span></span>`;
+};
+//# sourceMappingURL=header.js.map

package/dist/elements/shell/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/elements/shell/header.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD;;;;GAIG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAa,EAAkB,EAAE,CACrD,IAAI,CAAA;;;;;;;;;;;;;;;;;kBAiBY,KAAK,IAAI,KAAK;SACvB,CAAC;AAEV,mGAAmG;AACnG,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,IAAiB,EAAE,IAAyB,EAAkB,EAAE,CACtF,IAAI,CAAA,yBAAyB,IAAI,CAAC,MAAM;IACtC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAA,WAAW,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,WAAW,IAAI,CAAC,MAAM,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;IACtK,CAAC,CAAC,OAAO,SAAS,CAAC;AAEvB,mGAAmG;AACnG,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,SAAkB,EAAkB,EAAE;IAC/D,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,iCAAiC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,qCAAqC,CAAC,CAAC;IAC9G,OAAO,IAAI,CAAA,+BAA+B,KAAK,UAAU,KAAK,0BAA0B,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,kBAAkB,CAAC;AACnI,CAAC,CAAC"}

package/dist/elements/shell/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const monitorStyles: import("lit").CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/elements/shell/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/elements/shell/styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,aAAa,yBAiEzB,CAAC"}

package/dist/elements/shell/styles.js

@@ -0,0 +1,72 @@
+// The styles of `ca-monitor`: its header, the filter bar and the view below.
+// The tab list's are in `tabs.ts`. The monitor is a container (`ca-monitor`):
+// its parts follow the width it is given, not the window's, so it fits any box
+// of a page that embeds it.
+import { css } from 'lit';
+export const monitorStyles = css `
+  :host { display: flex; flex-direction: column; height: 100%; min-height: 0; font: 13px/1.5 var(--sans); color: var(--text);
+    background: var(--backdrop); container: ca-monitor / inline-size; }
+  header { flex: none; display: flex; gap: 14px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line);
+    background: color-mix(in srgb, var(--bg) 75%, transparent); backdrop-filter: blur(10px); position: relative; z-index: 20; }
+  .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; }
+  /* the name stays on one line and whole up to a third of the width; the run button gives up its width instead */
+  .brand { flex: none; max-width: 30cqi; white-space: nowrap; }
+  .brand span { overflow: hidden; text-overflow: ellipsis; }
+  .brand svg { width: 22px; height: 22px; flex: none; }
+  .logo-braces { stroke: var(--text); }
+  .spark-a { stop-color: var(--accent); }
+  .spark-b { stop-color: var(--agent); }
+  .logo-spark { transform-origin: 60px 60px; }
+  :host([live]) .logo-spark { animation: core-beat 1.8s var(--ease) infinite; }
+  .runbtn { display: flex; align-items: center; gap: 10px; min-width: min(150px, 100%); max-width: 52cqi; cursor: pointer; padding: 6px 13px;
+    border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--text); transition: border-color 0.2s, background 0.2s; }
+  .runbtn:hover { border-color: var(--line2); background: var(--panel2); }
+  .rn { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; max-width: 40%; }
+  .rs { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .chev { color: var(--text-muted); }
+  /* a hub: the run's host, after its name */
+  .hostchip { flex: none; font-family: var(--mono); font-size: 11px; color: var(--text-2); padding: 0 7px; border: 1px solid var(--line2);
+    border-radius: 999px; white-space: nowrap; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }
+  .runbtn .pill { flex: none; font-size: 11px; }
+  ca-run-picker { inset-inline-start: 110px; }
+  /* the controls keep their width; the name and the run button give theirs */
+  .hdr-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; white-space: nowrap; }
+  .nowline { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; max-width: 40cqi;
+    display: inline-flex; align-items: center; gap: 4px; }
+  .clock { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); }
+  .langs { --cae-segmented-radius: 999px; --cae-segmented-height: auto; --cae-segmented-padding: 2px 9px; --cae-segmented-font-size: 11px;
+    --cae-segmented-divider: 0; --cae-segmented-hover: var(--text-2); }
+  .live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--status-running); display: inline-block; animation: breathe 1.8s ease-in-out infinite; }
+  .live-dot.off { background: var(--line2); animation: none; box-shadow: none; }
+
+  .bar { flex: none; display: flex; gap: 8px; padding: 8px 18px; border-top: 1px solid var(--line); align-items: center; flex-wrap: wrap; }
+  .bar select, .bar input { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
+    padding: 5px 9px; outline: none; font: inherit; font-size: 12px; }
+  .bar input:focus, .bar select:focus { border-color: var(--focus); box-shadow: 0 0 0 calc(var(--focus-width) - 2px) var(--focus); }
+
+  .api-error { flex: none; margin: 0; padding: 8px 18px; color: var(--status-failed); font: 12px var(--mono); overflow-wrap: anywhere; }
+  .api-error:empty { padding: 0; }
+  main { border-top: 1px solid var(--line); flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 18px 48px; }
+  main.stream { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 16px; }
+  /* too narrow for one line: the controls go under the name and the run button */
+  @container ca-monitor (max-width: 1000px) {
+    header { flex-wrap: wrap; row-gap: 8px; }
+  }
+  @container ca-monitor (max-width: 760px) {
+    header { gap: 8px; padding: 8px 12px; }
+    /* the run button takes the rest of the first line; its run line gives up its width first */
+    .runbtn { flex: 1 1 0; min-width: 0; max-width: none; }
+    /* the run picker spans the header, 16px from each side */
+    ca-run-picker { inset-inline: 16px; width: auto; }
+    .hdr-right { width: 100%; margin-left: 0; flex-wrap: wrap; row-gap: 6px; }
+    .nowline { max-width: none; flex: 1 1 100%; }
+    main { padding: 12px 12px 40px; }
+    .bar { padding: 8px 12px; }
+    .bar input { flex: 1 1 10em; min-width: 0; }
+  }
+  @container ca-monitor (max-width: 420px) {
+    .brand { max-width: 40cqi; }
+    .runbtn { padding: 6px 10px; gap: 8px; }
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/elements/shell/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/elements/shell/styles.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,8EAA8E;AAC9E,+EAA+E;AAC/E,4BAA4B;AAC5B,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiE/B,CAAC"}

package/dist/elements/shell/tabs.d.ts

@@ -0,0 +1,32 @@
+import { type Info } from '@contraagent/api';
+import { type TemplateResult } from 'lit';
+import type { Tab } from '../../core/view-route.js';
+import type { Tone } from '../../lib/tone.js';
+export interface TabInfo {
+    id: Tab;
+    label: string;
+    icon: string;
+    tip?: string;
+    panel: boolean;
+}
+/** Every tab, in the current locale: the built-in ones, then one per custom view computed per run (`panels`; a trends panel is not a run's tab). */
+export declare function monitorTabs(panels: Info['panels']): TabInfo[];
+/** The id of tab `i` in the tab list, which the view below it (`role="tabpanel"`) names as its label. */
+export declare const tabId: (i: number) => string;
+/**
+ * The tab list: `current` selected, a count per tab from `badge` (none when it
+ * returns null or ''), and the key hints. `pick` is called with a tab clicked.
+ * Each tab controls the element with the id `panel`. The arrow keys, Home and
+ * End move the focus between the tabs (a `RovingFocusController` over `.tab`
+ * in the host); Enter and Space select one.
+ */
+export declare function tabBar(tabs: TabInfo[], current: Tab, badge: (id: Tab) => [string | number, Tone] | null, pick: (id: Tab) => void, panel: string, 
+/** Show the hint for the single-key shortcuts. */
+keys?: boolean): TemplateResult;
+/**
+ * Move the line under the selected tab to it (after a render, a resize); when
+ * the selection changed, scroll the tab list so the selected tab is in view.
+ */
+export declare function moveTabIndicator(root: ParentNode): void;
+export declare const tabStyles: import("lit").CSSResult;
+//# sourceMappingURL=tabs.d.ts.map

package/dist/elements/shell/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/elements/shell/tabs.ts"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAE9C,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,GAAG,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;CAChB;AAaD,oJAAoJ;AACpJ,wBAAgB,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,OAAO,EAAE,CAW7D;AAED,yGAAyG;AACzG,eAAO,MAAM,KAAK,GAAI,GAAG,MAAM,KAAG,MAAoB,CAAC;AAEvD;;;;;;GAMG;AACH,wBAAgB,MAAM,CACpB,IAAI,EAAE,OAAO,EAAE,EACf,OAAO,EAAE,GAAG,EACZ,KAAK,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,EAAE,IAAI,CAAC,GAAG,IAAI,EAClD,IAAI,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,EACvB,KAAK,EAAE,MAAM;AACb,kDAAkD;AAClD,IAAI,UAAO,GACV,cAAc,CAqBhB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAevD;AAED,eAAO,MAAM,SAAS,yBAoCrB,CAAC"}

package/dist/elements/shell/tabs.js

@@ -0,0 +1,125 @@
+// The monitor's tab list: the built-in views, then the custom views; each tab
+// with its count, and the line under the selected one. The selected tab is
+// bold and underlined, not only coloured. A list wider than the monitor
+// scrolls sideways, with a shade at each edge that has more tabs past it.
+import { isRunPanel } from '@contraagent/api';
+import { msg, str } from '@lit/localize';
+import { css, html, nothing } from 'lit';
+import { toneAttr } from '@contraagent/elements';
+/** The built-in tabs, in the current locale (call at render time). */
+const builtinTabs = () => [
+    { id: 'overview', label: msg('Overview'), icon: '◎' },
+    { id: 'tasks', label: msg('Tasks', { id: 'tab-tasks', desc: 'Tab: the list of tasks' }), icon: '≡' },
+    { id: 'journal', label: msg('History'), icon: '▤', tip: 'journal.jsonl' },
+    { id: 'outputs', label: msg('Outputs'), icon: '▣' },
+    { id: 'definitions', label: msg('Definitions'), icon: '⌘' },
+    { id: 'procs', label: msg('Processes'), icon: '⚙' },
+    { id: 'stream', label: msg('Task detail'), icon: '✦' },
+];
+/** Every tab, in the current locale: the built-in ones, then one per custom view computed per run (`panels`; a trends panel is not a run's tab). */
+export function monitorTabs(panels) {
+    return [
+        ...builtinTabs().map((t) => ({ ...t, panel: false })),
+        ...panels.filter(isRunPanel).map((p) => ({
+            id: `panel:${p.name}`,
+            label: p.title || p.name,
+            icon: p.icon || '▤',
+            tip: p.description ? msg(str `${p.description} (custom view)`) : msg('Custom view'),
+            panel: true,
+        })),
+    ];
+}
+/** The id of tab `i` in the tab list, which the view below it (`role="tabpanel"`) names as its label. */
+export const tabId = (i) => `tab-${i}`;
+/**
+ * The tab list: `current` selected, a count per tab from `badge` (none when it
+ * returns null or ''), and the key hints. `pick` is called with a tab clicked.
+ * Each tab controls the element with the id `panel`. The arrow keys, Home and
+ * End move the focus between the tabs (a `RovingFocusController` over `.tab`
+ * in the host); Enter and Space select one.
+ */
+export function tabBar(tabs, current, badge, pick, panel, 
+/** Show the hint for the single-key shortcuts. */
+keys = true) {
+    return html `<nav data-scroll="x">
+    <div class="tabs" role="tablist" aria-label=${msg('Views', { desc: 'The label of the list of tabs: Overview, Tasks, History, ...' })}>
+      ${tabs.map((t, i) => {
+        const b = badge(t.id);
+        const sel = t.id === current;
+        return html `${t.panel && !tabs[i - 1]?.panel ? html `<span class="tab-sep" aria-hidden="true" title=${msg('Custom views')}></span>` : nothing}
+          <button type="button" role="tab" id=${tabId(i)} aria-selected=${sel ? 'true' : 'false'} aria-controls=${panel}
+            class="tab ${t.panel ? 'panel-tab' : ''} ${sel ? 'sel' : ''}" title=${t.tip ?? nothing} @click=${() => pick(t.id)}>
+            <span class="tab-ic" aria-hidden="true">${t.icon}</span><span class="tab-label" data-label=${t.label}>${t.label}</span>${b && b[0] !== ''
+            ? html `<span class="badge" data-tone=${toneAttr(b[1])}>${b[0]}</span>`
+            : nothing}
+          </button>`;
+    })}
+    </div>
+    <span class="tab-ind init" aria-hidden="true"></span>
+    ${keys ? html `<span class="tabhint meta" role="note" aria-label=${msg('Keyboard shortcuts')}
+      ><span aria-hidden="true"><span class="kbd">1</span>–<span class="kbd">${Math.min(9, tabs.length)}</span> ${msg('Tabs')} |
+        <span class="kbd">r</span> ${msg('Runs')} | <span class="kbd">/</span> ${msg('Filter')}</span></span
+    >` : nothing}
+  </nav>`;
+}
+/**
+ * Move the line under the selected tab to it (after a render, a resize); when
+ * the selection changed, scroll the tab list so the selected tab is in view.
+ */
+export function moveTabIndicator(root) {
+    const sel = root.querySelector('.tab.sel');
+    const ind = root.querySelector('.tab-ind');
+    if (!sel || !ind)
+        return;
+    ind.style.left = `${sel.offsetLeft + 10}px`;
+    ind.style.width = `${Math.max(12, sel.offsetWidth - 20)}px`;
+    if (ind.classList.contains('init'))
+        requestAnimationFrame(() => ind.classList.remove('init'));
+    const nav = ind.parentElement;
+    if (nav && ind.dataset['tab'] !== sel.id) {
+        ind.dataset['tab'] = sel.id;
+        const edge = 24;
+        if (sel.offsetLeft - edge < nav.scrollLeft)
+            nav.scrollLeft = Math.max(0, sel.offsetLeft - edge);
+        else if (sel.offsetLeft + sel.offsetWidth + edge > nav.scrollLeft + nav.clientWidth)
+            nav.scrollLeft = sel.offsetLeft + sel.offsetWidth + edge - nav.clientWidth;
+    }
+}
+export const tabStyles = css `
+  /* Scroll shades: a cover at each end of the tabs (moves with them) over a shade at each edge of the list (stays):
+     the shade shows at an edge while more tabs lie past it. */
+  nav { flex: none; display: flex; gap: 2px; padding: 6px 18px 0; position: relative; overflow-x: auto; scrollbar-width: none; align-items: center;
+    --shade: color-mix(in srgb, var(--text) 22%, transparent);
+    background:
+      linear-gradient(to right, var(--backdrop) 40%, transparent) left / 32px 100% no-repeat local,
+      linear-gradient(to left, var(--backdrop) 40%, transparent) right / 32px 100% no-repeat local,
+      radial-gradient(farthest-side at 0 50%, var(--shade), transparent) left / 12px 100% no-repeat scroll,
+      radial-gradient(farthest-side at 100% 50%, var(--shade), transparent) right / 12px 100% no-repeat scroll; }
+  nav::-webkit-scrollbar { display: none; }
+  .tabs { flex: none; display: flex; gap: 2px; align-items: center; }
+  .tab { position: relative; background: none; border: none; padding: 8px 14px 11px; color: var(--text-muted); cursor: pointer;
+    font-weight: 500; white-space: nowrap; transition: color 0.2s; }
+  .tab:hover { color: var(--text-2); }
+  .tab.sel { color: var(--text); font-weight: 600; }
+  /* The label keeps the width of its bold form, so the tabs do not move when the selection does. */
+  .tab-label { display: inline-flex; flex-direction: column; }
+  .tab-label::after { content: attr(data-label); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; }
+  .tab-ic { opacity: 0.55; margin-right: 6px; font-size: 12px; }
+  .tab.sel .tab-ic { opacity: 1; color: var(--accent); }
+  .badge { margin-left: 6px; font-size: 10px; font-weight: 500; padding: 0 6px; border-radius: 999px; background: var(--raise); color: var(--text-2); font-variant-numeric: tabular-nums; }
+  .badge[data-tone] { background: var(--tone-bg); color: var(--tone); }
+  .tab-sep { width: 1px; height: 18px; background: var(--line2); margin: 0 8px 3px; flex: none; align-self: center; }
+  .tab-ind { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; border-radius: 2px;
+    background: var(--accent); transition: left 0.3s var(--ease), width 0.3s var(--ease); }
+  .tab-ind.init { transition: none; }
+  .tabhint { margin-left: auto; padding-left: 12px; white-space: nowrap; }
+  /* In a narrow monitor the tabs keep the line: no key hints. */
+  @container ca-monitor (max-width: 900px) {
+    .tabhint { display: none; }
+  }
+  @container ca-monitor (max-width: 760px) {
+    nav { padding: 4px 8px 0; }
+    .tab { padding: 8px 10px 11px; }
+  }
+`;
+//# sourceMappingURL=tabs.js.map

package/dist/elements/shell/tabs.js.map

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

package/dist/elements/shell/views.d.ts

@@ -0,0 +1,27 @@
+import { type MonitorClient, type MonitorSnapshot, type RunDerived } from '@contraagent/api';
+import { type TemplateResult } from 'lit';
+import type { ViewRoute } from '../../core/view-route.js';
+import '../overview/ca-overview.js';
+import '../lists/ca-task-table.js';
+import '../lists/ca-journal-table.js';
+import '../lists/ca-contracts.js';
+import '../lists/ca-definitions.js';
+import '../lists/ca-procs-view.js';
+import '../lists/ca-panel-view.js';
+import '../task/ca-task-view.js';
+export interface TabViewData {
+    snap: MonitorSnapshot;
+    viewRoute: ViewRoute;
+    /** `deriveRun` of the run's journal and plan. */
+    derived: RunDerived;
+    /** The text filter, as typed. */
+    q: string;
+    client: MonitorClient;
+    baseUrl: string;
+}
+/**
+ * The view of `viewRoute.tab`; with no run, a blank page that says there are no
+ * runs once the server's run list says so (the API's error is above it).
+ */
+export declare function tabView({ snap, viewRoute, derived, q, client, baseUrl }: TabViewData): TemplateResult;
+//# sourceMappingURL=views.d.ts.map

package/dist/elements/shell/views.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"views.d.ts","sourceRoot":"","sources":["../../../src/elements/shell/views.ts"],"names":[],"mappings":"AAEA,OAAO,EAAsD,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEjJ,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAE1D,OAAO,4BAA4B,CAAC;AACpC,OAAO,2BAA2B,CAAC;AACnC,OAAO,8BAA8B,CAAC;AACtC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AAEjC,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,eAAe,CAAC;IACtB,SAAS,EAAE,SAAS,CAAC;IACrB,iDAAiD;IACjD,OAAO,EAAE,UAAU,CAAC;IACpB,iCAAiC;IACjC,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,WAAW,GAAG,cAAc,CAmCrG"}

package/dist/elements/shell/views.js

@@ -0,0 +1,55 @@
+// The view under the monitor's tabs: the element the view route's tab shows, given
+// the data it reads.
+import { hostOf, isRunLive, latestTask, runActivity, runRow } from '@contraagent/api';
+import { msg } from '@lit/localize';
+import { html, nothing } from 'lit';
+import { mixedReplay } from '../../words/run-line.js';
+import '../overview/ca-overview.js';
+import '../lists/ca-task-table.js';
+import '../lists/ca-journal-table.js';
+import '../lists/ca-contracts.js';
+import '../lists/ca-definitions.js';
+import '../lists/ca-procs-view.js';
+import '../lists/ca-panel-view.js';
+import '../task/ca-task-view.js';
+/**
+ * The view of `viewRoute.tab`; with no run, a blank page that says there are no
+ * runs once the server's run list says so (the API's error is above it).
+ */
+export function tabView({ snap, viewRoute, derived, q, client, baseUrl }) {
+    const { state } = snap;
+    if (!viewRoute.run) {
+        return html `<div class="blank">${snap.runsLoaded && !snap.error
+            ? html `<span class="ic" aria-hidden="true">✦</span><b>${msg('No runs yet', { id: 'no-runs-yet' })}</b>`
+            : nothing}</div>`;
+    }
+    const summary = runRow(snap.runs, snap.run);
+    const live = isRunLive(state, summary);
+    switch (viewRoute.tab) {
+        case 'overview':
+            return html `<ca-overview .state=${state} .summary=${summary} .host=${hostOf(snap.hosts?.hosts, summary)} .info=${snap.info} .run=${viewRoute.run} .layer=${viewRoute.layer} .unit=${viewRoute.unit} .sel=${viewRoute.sel}></ca-overview>`;
+        case 'tasks':
+            return html `<ca-task-table .run=${viewRoute.run} .journal=${state.journal} .plan=${state.plan} .kind=${viewRoute.kind} .q=${q} ?live=${live}></ca-task-table>`;
+        case 'journal':
+            return html `<ca-journal-table .run=${viewRoute.run} .rows=${state.journal} .plan=${state.plan} .fresh=${snap.fresh} .kind=${viewRoute.kind} .stop=${viewRoute.stop} .q=${q}
+        .extras=${summary?.row_extras ?? []} ?replay-marks=${mixedReplay(summary)}></ca-journal-table>`;
+        case 'outputs':
+            return html `<ca-contracts .run=${viewRoute.run} .outputs=${state.outputs} .journal=${state.journal} .plan=${state.plan}></ca-contracts>`;
+        case 'definitions':
+            return html `<ca-definitions .client=${client} .run=${viewRoute.run} .journal=${state.journal} .plan=${state.plan} .live=${live}
+        .selected=${viewRoute.def}></ca-definitions>`;
+        case 'procs':
+            return html `<ca-procs-view .procs=${state.procs} ?unresponsive=${runActivity(summary, !!state.procs?.alive) === 'unresponsive'}
+        ?exported=${!!snap.info.export}></ca-procs-view>`;
+        case 'stream':
+            return html `<ca-task-view .client=${client} .journal=${state.journal} .plan=${state.plan} base-url=${baseUrl} .run=${viewRoute.run}
+        .taskKey=${viewRoute.key ?? latestTask(derived.rows)} .view=${viewRoute.view} .round=${viewRoute.round} .live=${live}
+        ?exported=${!!snap.info.export} ?replay-marks=${mixedReplay(summary)}></ca-task-view>`;
+        default: {
+            const name = viewRoute.tab.slice('panel:'.length);
+            const info = snap.info.panels.find((p) => p.name === name);
+            return html `<ca-panel-view .name=${name} .panel=${info} .data=${state.panels[name]}></ca-panel-view>`;
+        }
+    }
+}
+//# sourceMappingURL=views.js.map

package/dist/elements/shell/views.js.map

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

package/dist/elements/task/ca-task-view.d.ts

@@ -0,0 +1,55 @@
+import { type JournalRow, type MonitorClient, type Plan } from '@contraagent/api';
+import { LitElement, type PropertyValues } from 'lit';
+import { type TaskView } from '../../core/view-route.js';
+import './ca-transcript.js';
+/**
+ * One task: who ran it, every finished attempt, and four views of it: the
+ * transcript (live), its input (params, upstream outputs, declared inputs, the
+ * prompt), its output (files against their contracts, the result, who uses it)
+ * and its definition. Sends `ca-navigate` with `view` or `round`, and
+ * `ca-open-task` for a linked task.
+ *
+ * @fires ca-navigate - `{view}` or `{round}`: another view or round of this task
+ * @fires ca-open-task - `{key}`: an upstream or downstream task was clicked
+ */
+export declare class CaTaskView extends LitElement {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    client: MonitorClient;
+    baseUrl: string;
+    run: string;
+    /** A task key; null when there is no task to show. */
+    taskKey: string | null;
+    view: TaskView;
+    /** The round shown, 1-based; null follows the latest. */
+    round: number | null;
+    /** The run is live. */
+    live: boolean;
+    /** The whole run's journal: the subscription readings other tasks took after this one, and what happened to the tasks it reads from. Optional. */
+    journal: JournalRow[];
+    /** The run's plan: whether a task with no attempt is waiting or not started, and which earlier task stopped it. Optional. */
+    plan: Plan | null;
+    /** Read from an export (`Info.export`): it holds no transcript. */
+    exported: boolean;
+    /** The run is a replay that also launched (`mixedReplay`): each attempt played from its recording is marked. */
+    replayMarks: boolean;
+    private readonly detail;
+    private transcriptEl?;
+    private launches;
+    private shownRound;
+    private rounds;
+    /** What happened to every task of the run (`deriveRun` of `journal` and `plan`), by key. */
+    private outcomes;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    /** The view shown: a Python task has no transcript, so it opens on its output. */
+    private shownView;
+    private revealSearch;
+    render(): import("lit").TemplateResult<1>;
+    private renderViews;
+    private renderPane;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ca-task-view': CaTaskView;
+    }
+}
+//# sourceMappingURL=ca-task-view.d.ts.map

package/dist/elements/task/ca-task-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ca-task-view.d.ts","sourceRoot":"","sources":["../../../src/elements/task/ca-task-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,UAAU,EAAoB,KAAK,aAAa,EAAE,KAAK,IAAI,EAAqC,MAAM,kBAAkB,CAAC;AAElJ,OAAO,EAAE,UAAU,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAKrE,OAAO,oBAAoB,CAAC;AAkB5B;;;;;;;;;GASG;AACH,qBAEa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0DAAyE;IAE/D,MAAM,EAAG,aAAa,CAAC;IAClB,OAAO,SAAM;IACtC,GAAG,SAAM;IACrB,sDAAsD;IACtB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAQ;IAClD,IAAI,EAAE,QAAQ,CAAgB;IAC1C,yDAAyD;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC5D,uBAAuB;IACM,IAAI,UAAS;IAC1C,kJAAkJ;IAClH,OAAO,EAAE,UAAU,EAAE,CAAM;IAC3D,6HAA6H;IAC7F,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IACzD,mEAAmE;IACtC,QAAQ,UAAS;IAC9C,gHAAgH;IACxD,WAAW,UAAS;IAE5E,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAkC;IACjC,OAAO,CAAC,YAAY,CAAC,CAAe;IACnD,OAAO,CAAC,QAAQ,CAA8B;IAC9C,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,MAAM,CAAmB;IAC1C,4FAA4F;IAC5F,OAAO,CAAC,QAAQ,CAA+C;cAE5C,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAUlE,kFAAkF;IAClF,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,YAAY;IAKX,MAAM;IAqCf,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,UAAU;CAKnB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}