@contraagent/ui 0.0.0-stage → 0.2.0

package/src/elements/overview/ca-quota.ts

@@ -0,0 +1,164 @@
+import { runAccounts, type AccountUsage, type CredentialRest, type JournalRow, type QuotaCap, type QuotaReading } 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 { ClockController } from '@contraagent/elements';
+import { localTime } from '../../words/format.js';
+import { capLabel, capsLine, credentialLabel, restFacts, restSpan } from '../../words/index.js';
+import { accountLabel, pct, quotaStatusLabel, resetsIn } from '../../words/quota.js';
+import { pill } from '@contraagent/elements/primitives';
+import { base } from '@contraagent/elements/styles';
+
+type Window = 'five_hour' | 'seven_day';
+
+/**
+ * Subscription usage over the run, per account (credential): for the weekly and
+ * the 5-hour window, the account's first reading and its last, and when each
+ * window resets. Readings come at session starts and are account-wide. The
+ * accounts are the run's (`journal`), or given (`accounts`: a hub's, over every
+ * run of every host, `Hosts.quota`). With the run's quota caps and rests
+ * (`caps`, `rests`, `rule`: `Plan.quota_caps`, `.rests`, `.quota_rule`), each
+ * window shows its cap, and each account whether it is paused and its rests.
+ */
+@customElement('ca-quota')
+@localized()
+export class CaQuota extends LitElement {
+  static override styles = [
+    base,
+    css`
+      :host { display: block; container-type: inline-size; }
+      /* the bar keeps a width of its own, and ends near its figures on a wide card */
+      .rows { display: grid; grid-template-columns: max-content minmax(70px, 420px) max-content max-content; justify-content: start; gap: 10px 14px; align-items: center; }
+      .name { font-size: 12px; color: var(--text-2); white-space: nowrap; }
+      .bar { position: relative; height: 12px; border-radius: 4px; background: var(--track); overflow: hidden; }
+      .bar i { position: absolute; top: 0; bottom: 0; }
+      /* usage measures, it does not judge: neutral, attention from 80% (the number says it too) */
+      .bar .before { left: 0; background: var(--meter); opacity: 0.45; }
+      .bar .during { background: var(--meter); }
+      .bar.hot .during, .bar.full .during, .bar.hot .before, .bar.full .before { background: var(--status-attention); }
+      /* the cap: a line across the bar where the account is paused */
+      .bar .cap { width: 2px; margin-left: -1px; background: var(--text); opacity: 0.7; }
+      .val.hot b, .val.full b { color: var(--status-attention); }
+      .val { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+      .val b { color: var(--text); }
+      .val .lim { color: var(--text-muted); }
+      .reset { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
+      /* a narrow card: the reset time goes under its bar */
+      @container (max-width: 460px) {
+        .rows { grid-template-columns: max-content minmax(70px, 1fr) max-content; row-gap: 2px; }
+        .reset { grid-column: 2 / -1; margin-bottom: 6px; }
+      }
+      .status { margin-top: 8px; }
+      .acct { padding: 10px 0; border-top: 1px solid var(--line); }
+      .acct:first-child { border-top: 0; padding-top: 0; }
+      .acct-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; font-size: 12px; }
+      .acct-h i { font-style: normal; color: var(--text-muted); font-size: 11px; }
+      .acct-h b { font-family: var(--mono); color: var(--text); font-weight: 600; }
+      .rests { margin: 8px 0 0; padding: 0; list-style: none; font-size: 11.5px; color: var(--text-2); }
+      .rests li { padding: 2px 0; }
+      .rule { margin-bottom: 10px; font-size: 12px; color: var(--text-2); }
+      .rule code { font-family: var(--mono); color: var(--text); }
+    `,
+  ];
+
+  @property({ attribute: false }) journal: JournalRow[] = [];
+  /** Each account's first and last reading, highest weekly use first; null: from `journal`. */
+  @property({ attribute: false }) accounts: readonly AccountUsage[] | null = null;
+  /** The run's quota caps, by credential (`Plan.quota_caps`). */
+  @property({ attribute: false }) caps: readonly QuotaCap[] = [];
+  /** Each rest of a credential in the run, in start order (`Plan.rests`). */
+  @property({ attribute: false }) rests: readonly CredentialRest[] = [];
+  /** The run's quota rule, `module.qualname` (`Plan.quota_rule`); '' for none. */
+  @property() rule = '';
+  /** The run is live: a rest with no reset time (a rule's) stands only while it is. */
+  @property({ type: Boolean }) live = false;
+
+  constructor() {
+    super();
+    new ClockController(this); // "resets in" counts down
+  }
+
+  private row(w: Window, name: string, first: QuotaReading, last: QuotaReading, cap: number | null | undefined) {
+    const a = first[`${w}_pct`];
+    const b = last[`${w}_pct`];
+    if (a == null && b == null) return nothing;
+    const from = Math.max(0, Math.min(100, a ?? b ?? 0));
+    const to = Math.max(from, Math.min(100, b ?? from));
+    const resets = last[`${w}_resets_at`];
+    const cls = to >= 100 || (cap != null && to >= cap) ? 'full' : to >= 80 ? 'hot' : '';
+    const limit = cap != null ? capLabel(cap) : '';
+    return html`<span class="name">${name}</span>
+      <span class="bar ${cls}" title=${limit ? `${pct(a)} → ${pct(b)} | ${limit}` : `${pct(a)} → ${pct(b)}`}>
+        <i class="before" style="width:${from}%"></i>
+        <i class="during" style="left:${from}%;width:${to - from}%"></i>
+        ${cap != null ? html`<i class="cap" style="left:${Math.min(100, cap)}%" aria-hidden="true"></i>` : nothing}
+      </span>
+      <span class="val ${cls}">${pct(a)} → <b>${pct(b)}</b>${limit ? html` <span class="lim">| ${limit}</span>` : nothing}</span>
+      <span class="reset" title=${resets ? localTime(resets, true) : ''}>${resetsIn(resets)}</span>`;
+  }
+
+  /**
+   * An account's pill while it is paused: `paused until 10/14 14:30`; nothing otherwise. A rest
+   * stands until it ended, until its window reset, and (a rule's, with no reset) while the run is live.
+   */
+  private paused(rests: readonly CredentialRest[]) {
+    const at = Date.now();
+    const now = rests.find((r) => !r.ended && (r.until ? Date.parse(r.until) > at : this.live));
+    if (!now) return nothing;
+    const text = now.until ? msg(str`paused until ${localTime(now.until, true)}`) : msg('paused');
+    return pill({ text, tone: 'attention', title: restFacts(now) });
+  }
+
+  override render() {
+    const accounts = this.accounts ?? runAccounts(this.journal);
+    if (!accounts.length && !this.rests.length) return nothing;
+    const caps = new Map(this.caps.map((c) => [c.credential, c]));
+    return html`${this.rule
+        ? html`<div class="rule" title="quota_rule">${msg('Usage rule')} <code>${this.rule}</code></div>`
+        : nothing}${accounts.map((a) => {
+      const status = quotaStatusLabel(a.last.status, a.last.status_window);
+      const cap = caps.get(a.credential);
+      const rests = this.rests.filter((r) => r.credential === a.credential && (!r.account || !a.account || r.account === a.account));
+      // One identity on two accounts (`default` on two coding agents, a replaced token): each named.
+      const twice = !!a.account && accounts.some((o) => o !== a && o.credential === a.credential);
+      return html`<div class="acct">
+        <div class="acct-h"><i>${msg('Identity')}</i><b>${credentialLabel(a.credential) || '—'}</b>${twice
+            ? html`<i title=${msg(str`Account: ${a.account ?? ''}`)}>${accountLabel(a.account ?? '')}</i>`
+            : nothing}${status
+            ? pill({ text: status, tone: 'attention', title: a.last.status, mark: null })
+            : nothing}${this.paused(rests)}${cap ? html`<i title="max_five_hour_pct, max_seven_day_pct">${capsLine(cap)}</i>` : nothing}</div>
+        <div class="rows">
+          ${this.row('seven_day', msg('Weekly usage'), a.first, a.last, cap?.seven_day_pct)}
+          ${this.row('five_hour', msg('5-hour usage'), a.first, a.last, cap?.five_hour_pct)}
+        </div>
+        ${this.restList(rests)}
+      </div>`;
+    })}${this.unread(accounts, caps)}`;
+  }
+
+  private restList(rests: readonly CredentialRest[]) {
+    return rests.length ? html`<ul class="rests" title="rests.jsonl">${rests.map((r) => html`<li>${restSpan(r)}</li>`)}</ul>` : nothing;
+  }
+
+  /** The accounts paused in the run with no reading in its journal (their reading came from an earlier run). */
+  private unread(accounts: readonly AccountUsage[], caps: ReadonlyMap<string, QuotaCap>) {
+    const shown = new Set(accounts.map((a) => a.credential));
+    const others = [...new Set(this.rests.map((r) => r.credential))].filter((c) => !shown.has(c));
+    return others.map((credential) => {
+      const rests = this.rests.filter((r) => r.credential === credential);
+      const cap = caps.get(credential);
+      return html`<div class="acct">
+        <div class="acct-h"><i>${msg('Identity')}</i><b>${credentialLabel(credential)}</b>${this.paused(rests)}${cap
+            ? html`<i title="max_five_hour_pct, max_seven_day_pct">${capsLine(cap)}</i>`
+            : nothing}</div>
+        ${this.restList(rests)}
+      </div>`;
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-quota': CaQuota;
+  }
+}

package/src/elements/overview/ca-run-driver.ts

@@ -0,0 +1,140 @@
+import { elapsedS, result, runActivity, type HostSummary, type Plan, type Procs, type RunSummary } 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 { starts } from '@contraagent/elements';
+import { facts, fmtDur, localTime, sentence } from '../../words/format.js';
+import { hostFact, lastReport, noReportLabel } from '../../words/hosts.js';
+import { preflightLabel, preflightStoppedCause, preflightStoppedTitle, preflightTip } from '../../words/preflight.js';
+import { preflightRows } from '../../adapters/preflight.js';
+import { toneAttr, type Tone } from '@contraagent/elements';
+import { base, factStyles } from '@contraagent/elements/styles';
+import '@contraagent/elements/count/define';
+
+/** The mark of how a run ended (■ for a run with no tasks). */
+const MARK: Record<Tone, string> = { failed: '✕', attention: '◌', done: '✓', running: '', muted: '■', neutral: '■' };
+
+/**
+ * The run's own process: running (pid, run group, how many tasks at once,
+ * command line), or not running, and then how it finished: with errors, or with
+ * tasks not done (from `plan`). On a hub, a run whose host stopped reporting
+ * (`summary.unresponsive`) is neither: no report from its host, since `host.last_seen`.
+ * Under it, the models the run's preflight found available, replaced or not
+ * available (`plan.preflight`); a run its preflight ended names the kinds that did it.
+ */
+@customElement('ca-run-driver')
+@localized()
+export class CaRunDriver extends LitElement {
+  static override styles = [
+    base,
+    factStyles,
+    css`
+      :host { display: block; }
+      .drv { display: flex; gap: 14px; align-items: flex-start; }
+      .drv-ic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 16px;
+        background: var(--raise); color: var(--text-muted); }
+      .drv.on .drv-ic { background: var(--status-running-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-running) 35%, transparent), 0 0 22px var(--status-running-bg); }
+      /* how a run ended: the mark's shape and the title's words carry it; the colour only where a status applies */
+      .drv-ic[data-tone] { color: var(--tone); font-weight: 700; }
+      .drv-ic[data-tone='failed'], .drv-ic[data-tone='attention'] { background: var(--tone-bg); }
+      .drv.on .drv-ic .spin { width: 18px; height: 18px; }
+      .drv-t { font-size: 15px; font-weight: 600; }
+      .drv-up { font-family: var(--mono); font-size: 12px; color: var(--status-running); margin-left: 6px; font-weight: 400; }
+      .drv-cmd { margin-top: 8px; }
+      .drv-cmd summary { cursor: pointer; font-size: 11px; color: var(--text-muted); }
+      .pf { margin-top: 10px; font-size: 12px; }
+      .pf-h { color: var(--text-muted); font-size: 11px; margin-bottom: 4px; }
+      /* a label, then its fact: one row each, the facts in one column */
+      .pf-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 0; }
+      .pf-rows dt { color: var(--text-muted); }
+      .pf-rows dt[data-tone] { color: var(--tone); }
+      .pf-rows dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
+      .drv-cmd code { display: block; margin-top: 4px; white-space: pre-wrap; word-break: break-all; color: var(--text-2); max-height: 120px; overflow: auto; }
+    `,
+  ];
+
+  @property({ attribute: false }) procs: Procs | null = null;
+  @property({ attribute: false }) summary: RunSummary | undefined;
+  @property({ attribute: false }) plan: Plan = { nodes: [], groups: [] };
+  /** The run's host (a hub): when it last reported. */
+  @property({ attribute: false }) host: HostSummary | undefined;
+
+  /**
+   * How a run that is not running ended, as its title: everything scheduled ran
+   * (finished), with or without failed or not-started tasks, or some tasks never got their turn (stopped).
+   */
+  private stateTitle(): [text: string, tone: Tone] {
+    if (this.plan.preflight?.stopped?.length) return [preflightStoppedTitle(), 'failed'];
+    if (!this.plan.nodes.length) return [msg('Not running'), 'neutral'];
+    const r = result(this.plan);
+    if (r.failed) return [r.failed === 1 ? msg('Finished with 1 task failed') : msg(str`Finished with ${r.failed} tasks failed`), 'failed'];
+    if (r.left) return [r.left === 1 ? msg('Finished with 1 task not done') : msg(str`Finished with ${r.left} tasks not done`), 'attention'];
+    if (r.notStarted) return [r.notStarted === 1 ? msg('Finished with 1 task not started') : msg(str`Finished with ${r.notStarted} tasks not started`), 'attention'];
+    return [msg('Finished'), 'done'];
+  }
+
+  override render() {
+    const p = this.procs;
+    const r = this.summary;
+    if (!p?.alive) {
+      // Its host stopped reporting (a hub): not known to run, not known to have ended.
+      const quiet = runActivity(r) === 'unresponsive';
+      const [title, tone]: [string, Tone] = quiet ? [sentence(noReportLabel()), 'attention'] : this.stateTitle();
+      const took = quiet ? null : elapsedS(r);
+      return html`<div class="drv off">
+        <div class="drv-ic" data-tone=${toneAttr(tone)} aria-hidden="true">${MARK[tone]}</div>
+        <div>
+          <div class="drv-t tone-text" data-tone=${tone === 'done' ? nothing : toneAttr(tone)}>${title}</div>
+          <div class="meta">${facts(
+            this.plan.preflight?.stopped?.length ? preflightStoppedCause(this.plan.preflight.stopped) : '',
+            quiet ? lastReport(this.host) : '',
+            !r?.last_ts ? msg('No activity') : quiet ? msg(str`Last activity ${localTime(r.last_ts, true)}`) : msg(str`Ended ${localTime(r.last_ts, true)}`),
+            took == null ? '' : msg(str`Took ${fmtDur(took)}`),
+            r?.run_group ? msg(str`Run group ${r.run_group}`) : '',
+            quiet ? hostFact(r?.host_id ?? '') : '',
+          )}</div>
+          ${this.preflight()}
+        </div>
+      </div>`;
+    }
+    const started = Date.parse(p.started_at);
+    const since = starts.at(`drv:${p.pid ?? ''}`, Number.isNaN(started) ? 1 : (Date.now() - started) / 1000);
+    const rows: [string, string | number][] = [
+      [msg('PID'), p.pid ?? '—'],
+      [msg('Run group'), p.run_group],
+      [msg('Running at once (limit)'), p.max_workers || '—'],
+      [msg('Started'), localTime(p.started_at, true)],
+    ];
+    return html`<div class="drv on">
+      <div class="drv-ic"><span class="spin"></span></div>
+      <div style="min-width:0">
+        <div class="drv-t">${msg('Running')} <cae-elapsed class="drv-up" .since=${since}></cae-elapsed></div>
+        <div class="drv-facts">${rows.map(([k, v]) => html`<span><i>${k}</i>${v}</span>`)}</div>
+        ${this.preflight()}
+        <details class="drv-cmd"><summary>${msg('Command line')}</summary><code>${p.argv.join(' ')}</code></details>
+      </div>
+    </div>`;
+  }
+
+  /** The preflight's rows under their label; nothing for a run with no preflight. */
+  private preflight() {
+    const pf = this.plan.preflight;
+    const rows = preflightRows(pf);
+    if (!pf || !rows.length) return nothing;
+    return html`<div class="pf">
+      <div class="pf-h" title=${preflightTip(pf.policy)}>${preflightLabel()}</div>
+      <dl class="pf-rows">
+        ${rows.map(
+          (r) => html`<dt data-tone=${toneAttr(r.tone)} title=${r.tip || nothing}>${r.label}</dt><dd class="jmono">${r.text}</dd>`,
+        )}
+      </dl>
+    </div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-run-driver': CaRunDriver;
+  }
+}
+

package/src/elements/overview/ca-services.ts

@@ -0,0 +1,66 @@
+import type { PlanNode, ServiceSpan } from '@contraagent/api';
+import { localized, msg } from '@lit/localize';
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { statusWord } from '@contraagent/elements/primitives';
+import { base } from '@contraagent/elements/styles';
+import type { Tone } from '@contraagent/elements';
+import { kindUnit } from '../../words/format.js';
+import { serviceFacts, serviceState, serviceStateLabel, type ServiceState } from '../../words/services.js';
+import { taskChip } from '../shared/task-chip.js';
+
+const TONE: Record<ServiceState, Tone> = { running: 'running', stopped: 'done', failed: 'failed', unknown: 'muted' };
+
+/**
+ * The run's services (`Plan.services`): each start of the long-lived helper a claim
+ * name stands for, one per row, with its state, its claim name, its address, when it
+ * started and stopped and why, and the task whose claim started it.
+ *
+ * @fires ca-open-task - the task chip of the task that started a service was clicked
+ */
+@customElement('ca-services')
+@localized()
+export class CaServices extends LitElement {
+  static override styles = [
+    base,
+    css`
+      :host { display: block; }
+      ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
+      li { display: grid; grid-template-columns: max-content 1fr; column-gap: 10px; row-gap: 2px; align-items: baseline; font-size: 12px; }
+      .name { font-family: var(--mono); color: var(--text); overflow-wrap: anywhere; }
+      .addr { font-family: var(--mono); color: var(--text-2); overflow-wrap: anywhere; }
+      .facts { grid-column: 2; color: var(--text-2); overflow-wrap: anywhere; }
+      .by { grid-column: 2; }
+    `,
+  ];
+
+  /** Each start of a service, in start order (`Plan.services`). */
+  @property({ attribute: false }) services: readonly ServiceSpan[] = [];
+  /** The run's tasks (`Plan.nodes`): the task that started a service is named by its kind and unit. */
+  @property({ attribute: false }) nodes: readonly PlanNode[] = [];
+  /** Whether the run still runs: a service with no stop recorded is running only then. */
+  @property({ type: Boolean }) live = false;
+
+  override render() {
+    if (!this.services.length) return html`<div class="meta">${msg('No services')}</div>`;
+    const byKey = new Map(this.nodes.map((n) => [n.key, n]));
+    return html`<ul>
+      ${this.services.map((s) => {
+        const state = serviceState(s, this.live);
+        const node = s.key ? byKey.get(s.key) : undefined;
+        return html`<li>
+          ${statusWord({ text: serviceStateLabel(state), tone: TONE[state] })}
+          <div><span class="name" title="services.jsonl">${s.name}</span>${s.address ? html` <span class="addr">${s.address}</span>` : nothing}</div>
+          <div class="facts">${serviceFacts(s)}</div>
+          ${s.key ? html`<div class="by">${taskChip(this, node ? kindUnit(node) : s.key, node ?? { key: s.key })}</div>` : nothing}
+        </li>`;
+      })}
+    </ul>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-services': CaServices;
+  }
+}

package/src/elements/overview/ca-spend-breakdown.ts

@@ -0,0 +1,107 @@
+import { spendByKind, spendByTask, spendOf, totalTokens, type JournalRow, type Spend } 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 { facts, kindUnit, tokenCount, usd } from '../../words/format.js';
+import { base } from '@contraagent/elements/styles';
+import { legend, legendStyles } from '@contraagent/elements/primitives';
+
+type Part = 'input' | 'cache_read' | 'cache_creation' | 'output';
+const PARTS: readonly Part[] = ['input', 'cache_read', 'cache_creation', 'output'];
+
+/**
+ * Where a run's tokens and cost went: per kind, a bar of its tokens (input,
+ * cache read, cache write, output) with its cost and share of the run's cost,
+ * most expensive first; then the most expensive tasks.
+ *
+ * @fires ca-open-task - `{key}`: one of the most expensive tasks was clicked
+ */
+@customElement('ca-spend-breakdown')
+@localized()
+export class CaSpendBreakdown extends LitElement {
+  static override styles = [
+    base,
+    legendStyles,
+    css`
+      :host { display: block; }
+      /* the bar's track is bounded, so its figures stay beside it on a wide card */
+      .kinds { display: grid; grid-template-columns: minmax(70px, max-content) minmax(0, 420px) max-content max-content; justify-content: start; gap: 8px 14px; align-items: center; }
+      .kind { font-family: var(--mono); font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .bar { display: flex; height: 12px; border-radius: 4px; overflow: hidden; background: var(--track); }
+      .bar i { display: block; height: 100%; }
+      .num { font-variant-numeric: tabular-nums; text-align: right; font-size: 12px; white-space: nowrap; }
+      .share { color: var(--text-muted); min-width: 3.5em; }
+      .seg-input { background: var(--tok-input); }
+      .seg-cache_read { background: var(--tok-cache-read); }
+      .seg-cache_creation { background: var(--tok-cache-write); }
+      .seg-output { background: var(--tok-output); }
+      .legend { margin-top: 10px; }
+      h4 { margin: 16px 0 6px; font-size: 12px; color: var(--text-2); font-weight: 600; }
+      .top { display: grid; grid-template-columns: minmax(0, max-content) 64px 64px max-content; column-gap: 20px; row-gap: 4px; align-items: baseline; }
+      .top a { font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    `,
+  ];
+
+  @property({ attribute: false }) journal: JournalRow[] = [];
+  /** How many of the most expensive tasks to list. */
+  @property({ type: Number }) top = 5;
+
+  private partLabel(p: Part): string {
+    switch (p) {
+      case 'input':
+        return msg('input');
+      case 'cache_read':
+        return msg('cache read');
+      case 'cache_creation':
+        return msg('cache write');
+      case 'output':
+        return msg('output');
+    }
+  }
+
+  private bar(s: Spend, max: number) {
+    const total = totalTokens(s);
+    const width = max ? (100 * total) / max : 0;
+    const tip = facts(...PARTS.map((p) => `${this.partLabel(p)} ${tokenCount(s[p])}`));
+    return html`<div class="bar" title=${tip} style="width:${Math.max(width, 0.5).toFixed(2)}%">
+      ${PARTS.map((p) => (s[p] && total ? html`<i class="seg-${p}" style="width:${((100 * s[p]) / total).toFixed(2)}%"></i>` : nothing))}
+    </div>`;
+  }
+
+  override render() {
+    if (!spendOf(this.journal)) return html`<div class="meta">${msg('No tokens reported')}</div>`;
+    const kinds = spendByKind(this.journal);
+    const max = Math.max(1, ...kinds.map((k) => totalTokens(k.spend)));
+    const tasks = spendByTask(this.journal).slice(0, this.top);
+    return html`<div class="kinds">
+        ${repeat(
+          kinds,
+          (k) => k.id,
+          (k) => html`<span class="kind" title=${k.id}>${k.id}</span>${this.bar(k.spend, max)}
+            <span class="num">${facts(tokenCount(totalTokens(k.spend)), usd(k.spend.cost))}</span>
+            <span class="num share">${k.share !== null ? `${Math.round(k.share * 100)}%` : ''}</span>`,
+        )}
+      </div>
+      ${legend(PARTS.map((p) => ({ label: this.partLabel(p), cls: `seg-${p}` })))}
+      <h4>${msg('Most expensive tasks')}</h4>
+      <div class="top">
+        ${tasks.map(
+          (t) => html`<a class="lnk" href="#" title=${t.id} @click=${(e: Event) => {
+              e.preventDefault();
+              emit(this, 'ca-open-task', { key: t.id });
+            }}>${kindUnit(t)}</a>
+            <span class="num">${tokenCount(totalTokens(t.spend))}</span>
+            <span class="num">${usd(t.spend.cost)}</span>
+            <span class="num share">${t.share !== null ? msg(str`${Math.round(t.share * 100)}%`) : ''}</span>`,
+        )}
+      </div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-spend-breakdown': CaSpendBreakdown;
+  }
+}

package/src/elements/overview/ca-timeline.ts

@@ -0,0 +1,57 @@
+import { deriveRun, liveActivities, type JournalRow, type Plan, type Procs } from '@contraagent/api';
+import { localized, msg, str } from '@lit/localize';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { starts } from '@contraagent/elements';
+import { base } from '@contraagent/elements/styles';
+import '@contraagent/elements/lanes/define';
+import type { LanesStrings } from '@contraagent/elements/lanes';
+import { laneStyles, lanesFromJournal } from '../../adapters/lanes.js';
+import { getLocale } from '../../core/i18n.js';
+
+/**
+ * Every finished attempt as a bar as long as it took, on its kind's lane, the
+ * running ones growing until now (the last six hours of the run), as
+ * `<cae-lanes>` (`lanesFromJournal`).
+ */
+@customElement('ca-timeline')
+@localized()
+export class CaTimeline extends LitElement {
+  static override styles = [base, css`:host { display: block; }`];
+
+  @property({ attribute: false }) journal: JournalRow[] = [];
+  /** The run's plan: with the journal, why a task did not start, as the tasks list says it. Optional. */
+  @property({ attribute: false }) plan: Plan | null = null;
+  @property({ attribute: false }) procs: Procs | null = null;
+  /** The run is live: its running tasks are drawn, growing every second. */
+  @property({ type: Boolean }) live = false;
+  /** The run drawn; the bars grow in when a run is first drawn, not on every update. */
+  @property() run = '';
+
+  override render() {
+    const now = Date.now();
+    const live = this.live
+      ? liveActivities(this.procs).map((a) => ({ kind: a.kind, cls: a.cls, t0: starts.at(a.id, a.ageS, now) }))
+      : [];
+    const tl = lanesFromJournal(this.journal, live, deriveRun(this.journal, this.plan).outcomes, this.run);
+    if (!tl)
+      return html`<div class="blank" style="padding:28px"><span class="ic" aria-hidden="true">⏱</span>${this.live
+        ? msg('No finished attempts yet')
+        : msg('No finished attempts')}</div>`;
+    const strings: Partial<LanesStrings> = {
+      omitted: (n) => (n === 1 ? msg('1 older attempt not shown') : msg(str`${n} older attempts not shown`)),
+    };
+    return keyed(
+      this.run,
+      html`<cae-lanes .lanes=${tl.lanes} .barStyles=${laneStyles()} .omitted=${tl.omitted} ?live=${this.live}
+        locale=${getLocale()} .strings=${strings}></cae-lanes>`,
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-timeline': CaTimeline;
+  }
+}

package/src/elements/overview/ca-workers.ts

@@ -0,0 +1,82 @@
+import { liveActivities, type Procs } from '@contraagent/api';
+import { localized, msg } from '@lit/localize';
+import { LitElement, css, html } 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 { base } from '@contraagent/elements/styles';
+import '@contraagent/elements/count/define';
+import { executorIcon } from '../../words/executor.js';
+
+/**
+ * What runs now: one card per running task (an agent session opens its
+ * transcript), the rest idle, up to the number of tasks the run runs at once
+ * (`max_concurrent`). Sends `ca-open-task`.
+ *
+ * @fires ca-open-task - `{key}`: a running agent launch was clicked
+ */
+@customElement('ca-workers')
+@localized()
+export class CaWorkers extends LitElement {
+  static override styles = [
+    base,
+    css`
+      :host { display: block; container-type: inline-size; }
+      .wks { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px; }
+      @container (max-width: 860px) { .wks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+      @container (max-width: 360px) { .wks { grid-template-columns: minmax(0, 1fr); } }
+      .wk { border-radius: 11px; padding: 10px 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 2.5%, transparent); min-width: 0;
+        position: relative; overflow: hidden; display: block; width: 100%; color: inherit; text-align: start; }
+      .wk > .meta { display: block; }
+      .wk.py, .wk.llm { border-color: var(--line2); }
+      .wk.llm { box-shadow: inset 3px 0 0 -1px color-mix(in srgb, var(--agent) 60%, transparent); cursor: pointer; }
+      .wk.llm:hover { border-color: var(--accent); }
+      .wk.idle { opacity: 0.45; border-style: dashed; }
+      .wk-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
+      .wk-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .wk-ic { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center; background: var(--raise); font-size: 12px; }
+      .wk.llm .wk-ic { color: var(--agent); }
+      .wk.py .wk-ic { color: var(--text-muted); }
+      .wk-el { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--status-running); }
+      .wk-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; }
+      .wk-bar i { position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, var(--status-running), transparent);
+        animation: scan 1.8s linear infinite; }
+    `,
+  ];
+
+  @property({ attribute: false }) procs: Procs | null = null;
+  /** The run is live; when not, every slot is idle. */
+  @property({ type: Boolean }) live = false;
+
+  override render() {
+    const work = this.live ? liveActivities(this.procs) : [];
+    const max = Math.max(this.procs?.max_workers || 1, work.length);
+    const free = Array.from({ length: max - work.length }, (_, i) => i);
+    return html`<div class="wks" style="--n:${Math.min(max, 6)}">
+      ${repeat(
+        work,
+        (a) => a.id,
+        (a) => {
+          const body = html`<span class="wk-top">${executorIcon(a.cls !== 'llm', a.cls === 'llm' ? msg('Agent task') : msg('Python task'), 'wk-ic')}<b>${a.kind}</b>
+              <cae-elapsed class="wk-el" .since=${starts.at(a.id, a.ageS)}></cae-elapsed></span>
+            <span class="meta">${a.detail}</span>
+            <span class="wk-bar"><i></i></span>`;
+          // A slot with a task opens it: a button.
+          return a.key
+            ? html`<button type="button" class="wk ${a.cls}" @click=${() => emit(this, 'ca-open-task', { key: a.key })}>${body}</button>`
+            : html`<div class="wk ${a.cls}">${body}</div>`;
+        },
+      )}
+      ${free.map(
+        () => html`<div class="wk idle"><div class="wk-top"><b>${msg('Idle')}</b></div></div>`,
+      )}
+    </div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-workers': CaWorkers;
+  }
+}

package/src/elements/overview/index.ts

@@ -0,0 +1,10 @@
+export * from './ca-overview.js';
+export * from './ca-run-driver.js';
+export * from './ca-workers.js';
+export * from './ca-pipeline-graph.js';
+export * from './ca-kpis.js';
+export * from './ca-timeline.js';
+export * from './ca-spend-breakdown.js';
+export * from './ca-model-usage.js';
+export * from './ca-quota.js';
+export * from './ca-services.js';