@contraagent/ui 0.0.0-stage → 0.1.0

package/src/adapters/graph/words.ts

@@ -0,0 +1,146 @@
+// What the pipeline graph says about its nodes and marks. Pure: each depends only on
+// its arguments (`live`: the run is running, so a pending task waits rather than did
+// not run).
+import { planOutcome, type PlanNode, type TaskState } from '@contraagent/api';
+import type { StateStyle, StateStyles } from '@contraagent/elements/primitives';
+import { msg, str } from '@lit/localize';
+import { facts, fmtDur, kindUnit, listText } from '../../words/format.js';
+import { passesRan, stateCount, taskStatusLabel } from '../../words/index.js';
+import { SEVERITY } from './states.js';
+import type { GraphNode, LayerGraph, LayerMark, NodeCounts } from './types.js';
+
+/** The states the legend can show, in this order; it shows the ones the view has. */
+export const LEGEND: readonly TaskState[] = ['done', 'partial', 'running', 'pending', 'failed', 'blocked', 'skipped'];
+
+/** How each task state looks: done round, partly done half filled, running round and breathing, waiting a ring, failed square, not started hatched, skipped muted. */
+const LOOKS: Record<TaskState, Pick<StateStyle, 'tone' | 'shape'>> = {
+  done: { tone: 'done', shape: 'round' },
+  partial: { tone: 'attention', shape: 'half' },
+  running: { tone: 'running', shape: 'round' },
+  pending: { tone: 'neutral', shape: 'ring' },
+  failed: { tone: 'failed', shape: 'square' },
+  blocked: { tone: 'attention', shape: 'hatched' },
+  skipped: { tone: 'muted', shape: 'round' },
+};
+
+/** The task states as the graph draws them, in the legend's order (`live`: a pending task waits; else it did not run). */
+export function taskStateStyles(live: boolean): StateStyles {
+  return Object.fromEntries(
+    LEGEND.map((s): [string, StateStyle] => [s, { ...LOOKS[s], label: stateWord(s, live), rank: SEVERITY[s], count: (n) => countOf(s, n, live) }]),
+  );
+}
+
+/** A pending task waits while the run runs; once the run is over, it did not run. */
+export function stateWord(s: TaskState, live: boolean): string {
+  return taskStatusLabel(planOutcome(s), live);
+}
+
+/** How many marks are in a state, number first: "3 failed". */
+export function countOf(s: TaskState, n: number, live: boolean): string {
+  const o = planOutcome(s);
+  return stateCount(o === 'waiting' && !live ? 'not_run' : o, n);
+}
+
+/** How many tasks are in each state, in words: "2 done | 1 failed". */
+export function stateCounts(c: NodeCounts, live: boolean): string {
+  return facts(...LEGEND.filter((s) => c[s]).map((s) => countOf(s, c[s], live)));
+}
+
+/** How many tasks are done (plan state done: done, and done after retrying): "5 of 6 tasks done". Skipped tasks are counted apart. */
+export function doneOf(c: NodeCounts): string {
+  return msg(str`${c.done} of ${c.total} tasks done`);
+}
+
+/** The tasks that are not done, by state, most severe first: "1 failed", "1 not started", "1 partly done". */
+export function notDone(c: NodeCounts, live: boolean): string[] {
+  return (['failed', 'blocked', 'partial', 'running', 'pending', 'skipped'] as const).filter((s) => c[s]).map((s) => countOf(s, c[s], live));
+}
+
+/** A fact's class: failed, not started or partly done, running, or muted (waiting, not run, skipped). */
+export type ExceptionClass = 'err' | 'warn' | 'live' | 'mut';
+
+/** What a node needs a word for: its tasks that are not done, by state, and its flow calls that stopped with an error. */
+export function exceptions(n: Pick<GraphNode, 'counts' | 'errors'>, live: boolean): [ExceptionClass, string][] {
+  const c = n.counts;
+  const out: [ExceptionClass, string][] = [];
+  if (c.failed) out.push(['err', countOf('failed', c.failed, live)]);
+  if (n.errors) out.push(['err', n.errors === 1 ? msg('1 flow call stopped with an error') : msg(str`${n.errors} flow calls stopped with an error`)]);
+  if (c.blocked) out.push(['warn', countOf('blocked', c.blocked, live)]);
+  if (c.partial) out.push(['warn', countOf('partial', c.partial, live)]);
+  if (c.running) out.push(['live', countOf('running', c.running, live)]);
+  if (c.pending) out.push(['mut', countOf('pending', c.pending, live)]);
+  if (c.skipped) out.push(['mut', countOf('skipped', c.skipped, live)]);
+  return out;
+}
+
+/** Where a loop is: `flow.py:130` (the file's name and the loop's first line), or `line 130` when the file is not known. */
+export function where(line: number | string, file?: string): string {
+  const name = file ? file.slice(file.lastIndexOf('/') + 1) : '';
+  return name ? `${name}:${line}` : msg(str`line ${line}`);
+}
+
+/** Who runs a kind node's tasks, in the words the Tasks list uses. */
+export function executorWord(n: Pick<GraphNode, 'executor'>): string {
+  if (n.executor === 'agent') return msg('Agent task');
+  if (n.executor === 'python') return msg('Python task');
+  return n.executor === 'mixed' ? facts(msg('Agent task'), msg('Python task')) : '';
+}
+
+/** A node's tooltip: what it is, and its tasks done. */
+export function nodeTip(n: GraphNode): string {
+  if (n.type !== 'flow') return facts(n.label, executorWord(n), doneOf(n.counts));
+  return facts(msg(str`Function ${n.name}`), n.timeBox ? msg(str`Deadline ${fmtDur(n.timeBox.deadline_s)}`) : '', doneOf(n.counts));
+}
+
+/** The names of the nodes `n` waits for, was created after, and feeds. */
+export function neighbours(n: GraphNode, g: Pick<LayerGraph, 'nodes' | 'edges' | 'stubs'>): { waits: string[]; after: string[]; feeds: string[] } {
+  const label = (id: string) => {
+    const x = g.nodes.find((y) => y.id === id);
+    return !x ? id : x.box ? msg(str`${x.label} in the loop`) : x.label;
+  };
+  const into = (type: 'after' | 'created') => [
+    ...g.stubs.filter((s) => s.to === n.id && s.type === type).map((s) => s.label),
+    ...g.edges.filter((e) => e.to === n.id && e.type === type).map((e) => label(e.from)),
+  ];
+  return { waits: into('after'), after: into('created'), feeds: [...new Set(g.edges.filter((e) => e.from === n.id).map((e) => label(e.to)))] };
+}
+
+/** The node for a screen reader: its counts, and the nodes it waits for, was created after and feeds. */
+export function nodeLabel(n: GraphNode, g: Pick<LayerGraph, 'nodes' | 'edges' | 'stubs'>, live: boolean): string {
+  const c = n.counts;
+  const { waits, after, feeds } = neighbours(n, g);
+  return [
+    n.type === 'flow' ? facts(msg(str`Function ${n.label}`), doneOf(c)) : facts(n.label, executorWord(n), doneOf(c)),
+    ...exceptions(n, live).map(([, t]) => t),
+    waits.length ? msg(str`Waits for: ${listText(waits)}`) : '',
+    after.length ? msg(str`Created after: ${listText(after)}`) : '',
+    feeds.length ? msg(str`Later tasks: ${listText(feeds)}`) : '',
+  ]
+    .filter(Boolean)
+    .join('. ');
+}
+
+/** What a mark's words come from: its task (none for a flow call's mark), why a task did not start, and the run being live. */
+export interface MarkContext {
+  task: PlanNode | undefined;
+  causeOf: (key: string) => string;
+  live: boolean;
+}
+
+/** What a mark says: its name, state, passes, attempts, tasks and time, for its tooltip and its label. */
+export function markText(label: string, m: LayerMark, x: MarkContext, pass = ''): { name: string; parts: string[]; id: string } {
+  const t = m.flow ? undefined : x.task;
+  // A mark of one task is named by its kind: a group's node holds several kinds (the implementations of a base kind).
+  const name = kindUnit({ kind: m.count === 1 && t ? t.kind : label, unit: m.unit });
+  const cause = !m.flow && m.state === 'blocked' ? x.causeOf(m.key) : '';
+  const state = cause ? msg(str`Not started: ${cause}`) : stateWord(m.state, x.live);
+  const attempts = t?.attempts ?? 1;
+  const tries = attempts > 1 ? msg(str`${attempts} attempts`) : '';
+  const passes = m.passes ? passesRan(m.passes) : '';
+  const many = m.flow || m.count > 1 ? msg(str`${m.count} tasks`) : '';
+  // A flow call's tasks that are not done, and its own error: what its state comes from.
+  const not = m.counts ? notDone(m.counts, x.live) : [];
+  const error = m.error === undefined ? [] : [msg('Flow call stopped with an error'), m.error];
+  const time = !m.flow && (m.state === 'done' || m.state === 'partial' || m.state === 'failed') && t?.wall_s ? fmtDur(t.wall_s) : '';
+  return { name, parts: [state, pass, passes, tries, many, ...not, ...error, time].filter(Boolean), id: m.flow ? msg(str`Flow call ${m.key}`) : m.key };
+}

package/src/adapters/index.ts

@@ -0,0 +1,22 @@
+// Pure functions from contraagent's run data to what the generic elements of
+// `@contraagent/elements` take: the lists' filters, the columns of the tasks
+// list and the history, the figures' tiles, the timeline's lanes, a checked
+// file's rows, the pipeline graph's layers and loops' passes, and a transcript's
+// sections.
+export * from './filters.js';
+export * from './task-columns.js';
+export * from './journal-columns.js';
+export * from './kpi-tiles.js';
+export * from './lanes.js';
+export * from './check-rows.js';
+export * from './model-shares.js';
+export * from './trends.js';
+export { graphFromPlan, graphInput, matrixFromPlan, matrixInput, type GraphWordsContext } from './graph/input.js';
+export { autoLayer, layerGraph, parentLayer, resolveLayer, splitLayer } from './graph/layer.js';
+export { passMatrix, sortRows as sortPassRows, type MatrixSort, type PassMatrix } from './graph/matrix.js';
+export { markSel, parseSelection, type Selected } from './graph/selection.js';
+export { taskStateStyles } from './graph/words.js';
+export { compound, chooseOpen, doi, interest, notable, placeKey, placeStats, towardOf, type Compound, type OpenChoice, type PlaceStats } from './graph/compound.js';
+export { LOOP_SEGMENT, type FlowBox, type GraphNode, type LayerGraph, type LayerMark, type LayerModel, type LoopBox } from './graph/types.js';
+export * from './transcript/index.js';
+export * from './preflight.js';

package/src/adapters/journal-columns.ts

@@ -0,0 +1,200 @@
+// The history's columns (`ca-journal-table`): a row per finished attempt
+// (`JournalRow`), when it ended, the task, its stop, the agent and model, tokens,
+// cost, time and the reason, then the pipeline's own columns (`row_extras`).
+import { isBad, isLaunched, isPython, runRelative, type JournalRow, type TaskOutcome } from '@contraagent/api';
+import type { DataColumn } from '@contraagent/elements/data-table';
+import { statusWord } from '@contraagent/elements/primitives';
+import { msg, str } from '@lit/localize';
+import { html, nothing } from 'lit';
+import { stopTone } from '../lib/tone.js';
+import { executorIcon } from '../words/executor.js';
+import { facts, fmtDur, kindUnit, localTime, sentence, tokenCount, unreadEvents, usd } from '../words/format.js';
+import { attemptLabel, correctionsText, credentialLabel, credentialTip, modelSwitch, notStartedCause, outcomeLabel, replayedLabel, replayedTip, stopLabel } from '../words/index.js';
+import { accountReading, readingShort } from '../words/quota.js';
+import { customColumnTip, customValue } from '../words/row-extras.js';
+import { contextWarnedText, contextWarnedTip, peakContextLine } from '../words/context.js';
+import { attemptFacts } from './filters.js';
+
+export interface JournalColumnsContext {
+  /** The run id: paths inside the run directory are shown relative to it. */
+  run: string;
+  /** What happened to each task (`deriveRun`): a refused row names its cause in words. */
+  outcomes: ReadonlyMap<string, TaskOutcome>;
+  /** Every row of the journal, in order: the attempts of a task, and the one that later did it. */
+  journal: readonly JournalRow[];
+  /** The rows shown: the time bars are relative to their longest. */
+  rows: readonly JournalRow[];
+  /** The pipeline's own columns (`RunSummary.row_extras`): one column each, after the reason. */
+  extras?: readonly string[];
+  /** Mark each attempt played from its recording (`JournalRow.replayed`): the run is a replay that also launched (`mixedReplay`). */
+  replayMarks?: boolean;
+}
+
+/** A stop as a short column label: a task that never ran is just "not started"; the cause goes to the reason. */
+export function shortStop(stop: string | null | undefined): string {
+  return stop === 'invalid_input' ? outcomeLabel('not_started') : stopLabel(stop);
+}
+
+/** The identity the attempt authenticated as; both when a model switch changed it. */
+function identity(e: JournalRow) {
+  const ids = [...new Set([...(e.hops ?? []).map((h) => h.credential), e.credential].filter(Boolean))];
+  if (!ids.length) return nothing;
+  // The subscription usage the attempt's first session started at, when the agent reported one.
+  const start = (e.quota ?? [])[0];
+  const tip = start ? msg(str`Usage at session start (account-wide): ${accountReading(start)}`) : '';
+  // The reading belongs to one account: name it when the row has more than one, or a different one.
+  const own = start && ids.length === 1 && (start.credential ?? '') === ids[0];
+  const shown = start ? (own ? readingShort(start) : accountReading(start)) : '';
+  const tips = [tip, ...ids.map(credentialTip)].filter(Boolean).join('\n');
+  return html`<span class="sub" title=${tips || nothing}>${ids.map((c) => credentialLabel(c)).join(' → ')}${start ? html` <span class="q">${shown}</span>` : nothing}</span>`;
+}
+
+/** The columns of the history. */
+export function journalColumns(ctx: JournalColumnsContext): DataColumn<JournalRow>[] {
+  const maxWall = Math.max(1, ...ctx.rows.map((e) => e.wall_s || 0));
+  const tries = attemptFacts(ctx.journal);
+  const index = new Map(ctx.journal.map((r, i) => [r, i]));
+  /** The attempt that later did the task, after this one failed (0: none). */
+  const laterTry = (e: JournalRow): number => {
+    const f = tries.get(e.key);
+    return !e.ok && isLaunched(e) && (f?.lastOk ?? -1) > (index.get(e) ?? 0) ? (f?.lastOkTry ?? 0) : 0;
+  };
+
+  /**
+   * What the reason column says: the model switch, then (for a row that failed,
+   * never ran, or was partly done) the reason, run-relative, then the attempt that later did the task,
+   * then its peak context when it passed the warning threshold of the context limit.
+   */
+  const reason = (e: JournalRow) => {
+    const ran = isLaunched(e);
+    const sw = modelSwitch(e.hops, null, e.skipped_hops);
+    const run = ctx.run || e.run_id || '';
+    const own = ctx.outcomes.get(e.key);
+    const cause = e.stop === 'invalid_input' && own ? notStartedCause({ attempts: [e], cause: null }, ctx.outcomes, run) : '';
+    const why = cause ? sentence(cause) : (!e.ok || !ran || e.stop === 'partial') && e.reason ? runRelative(e.reason, run) : '';
+    const n = laterTry(e);
+    const later = n ? msg(str`Task done on attempt ${n}`) : '';
+    const warned = e.context_warned ? contextWarnedText(e) : '';
+    if (!sw && !why && !later && !warned) return html`<span class="jdim">—</span>`;
+    return html`${sw ? html`<span class="nw" title=${msg('Model switch')}>${sw}</span><br />` : nothing}${why ? html`${why}<br />` : nothing}${later
+      ? html`<span class="later">${later}</span>${warned ? html`<br />` : nothing}`
+      : nothing}${warned
+      ? html`<span class="tone-text" data-tone="attention" title=${[contextWarnedTip(), peakContextLine(e)].filter(Boolean).join('\n')}>${warned}</span>`
+      : nothing}`;
+  };
+
+  /** A pipeline's own column: its name as the pipeline wrote it, its value as text. */
+  const custom = (name: string): DataColumn<JournalRow> => ({
+    id: `x:${name}`,
+    header: name,
+    tip: customColumnTip(),
+    width: 'minmax(80px,0.6fr)',
+    text: (e) => customValue((e as Record<string, unknown>)[name]),
+    cell: (e) => {
+      const v = customValue((e as Record<string, unknown>)[name]);
+      return v === '—' ? html`<span class="jdim">—</span>` : html`<span class="jmono" title=${v}>${v}</span>`;
+    },
+  });
+
+  return [
+    { id: 'ended', header: msg('Ended'), width: '64px', cell: (e) => html`<span class="jmono" title=${localTime(e.ts, true)}>${localTime(e.ts)}</span>` },
+    {
+      id: 'task',
+      header: msg('Task'),
+      width: 'minmax(130px,0.8fr)',
+      rowHeader: true,
+      text: (e) => e.key,
+      cell: (e) => {
+        const py = isPython(e);
+        return html`<span class="jmono" title=${e.key}>${executorIcon(py, py ? msg('Python task') : msg('Agent task'), '')}
+          ${kindUnit(e)}</span>`;
+      },
+    },
+    {
+      id: 'outcome',
+      header: msg('Outcome'),
+      tip: msg('How the attempt ended (stop)'),
+      width: 'minmax(150px,0.7fr)',
+      cell: (e) => {
+        const ran = isLaunched(e);
+        const numbered = ran && (tries.get(e.key)?.count ?? 1) > 1;
+        const corrections = ran ? correctionsText((e.rounds ?? 1) - 1) : '';
+        const played = ctx.replayMarks && e.replayed ? replayedLabel() : '';
+        return statusWord({
+          text: html`<span class="nw">${shortStop(e.stop)}</span>${numbered || corrections || played
+            ? html`<span class="sub" title=${played ? replayedTip() : nothing}>${facts(numbered ? attemptLabel(e.attempt) : '', corrections, played)}</span>`
+            : nothing}`,
+          tone: stopTone(e.stop),
+          cls: 'two',
+          title: e.stop,
+        });
+      },
+    },
+    {
+      id: 'agent',
+      header: msg('Agent, model, identity'),
+      width: 'minmax(150px,1fr)',
+      cell: (e) =>
+        html`<span class="jmono jdim two" title=${facts(e.route, modelSwitch(e.hops, null, e.skipped_hops)) || nothing}>${isLaunched(e)
+          ? html`<span>${[e.agent, e.model].filter(Boolean).join(' / ') || '—'}</span>${identity(e)}`
+          : '—'}</span>`,
+    },
+    {
+      id: 'tokens',
+      header: msg('Tokens'),
+      tip: msg('Input / output | cache read / cache write'),
+      align: 'end',
+      width: '92px',
+      cell: (e) => {
+        const u = e.usage;
+        const tip = [u?.resident != null ? msg(str`Input of the first API call: ${tokenCount(u.resident)}`) : '', peakContextLine(e)].filter(Boolean).join('\n');
+        const first = tip || nothing;
+        return html`<span class="two" title=${first}>${u
+          ? html`<span>${tokenCount(u.input)} / ${tokenCount(u.output)}</span><span class="sub">${tokenCount(u.cache_read)} / ${tokenCount(u.cache_creation)}</span>`
+          : html`<span class="jdim">—</span>`}</span>`;
+      },
+    },
+    {
+      id: 'cost',
+      header: msg('Cost'),
+      tip: msg('Reported by the coding agent'),
+      align: 'end',
+      width: '60px',
+      cell: (e) => {
+        const hops = e.hops ?? [];
+        const perHop =
+          hops.length > 1
+            ? hops.map((h) => facts(h.model || h.route || '—', credentialLabel(h.credential) || '—', usd(h.cost_usd), stopLabel(h.stop))).join('\n')
+            : '';
+        return html`<span class="cost" title=${perHop || msg('Reported by the coding agent')}>${usd(e.cost_usd)}</span>`;
+      },
+    },
+    {
+      id: 'time',
+      header: msg('Time'),
+      align: 'end',
+      width: '76px',
+      cell: (e) => {
+        const py = isPython(e);
+        return isLaunched(e)
+          ? html`${fmtDur(e.wall_s)}<span class="jdur"><i class=${isBad(e) ? 'bad' : py ? '' : 'llm'}
+              style="width:${Math.max(2, Math.round((100 * (e.wall_s || 0)) / maxWall))}%"></i></span>`
+          : '—';
+      },
+    },
+    {
+      id: 'reason',
+      header: msg('Reason'),
+      width: 'minmax(200px,2.2fr)',
+      cell: (e) => {
+        const unread = unreadEvents([e]);
+        return html`<span class="jwhy" title=${e.reason || nothing}>${reason(e)}${unread
+          ? html` <span class="unread nw" title=${msg(str`Event types this contraagent version does not know (unread_events): ${unread}`)}
+              ><span aria-hidden="true">⚠</span> ${msg('Unrecognized events')}</span
+            >`
+          : nothing}</span>`;
+      },
+    },
+    ...(ctx.extras ?? []).map(custom),
+  ];
+}

package/src/adapters/kpi-tiles.ts

@@ -0,0 +1,211 @@
+// The run in numbers, as the tiles of `<cae-stat-tiles>` (`ca-kpis`): tasks and
+// how they ended, attempts, failed attempts, agent time, retries, corrections
+// and model switches, from the journal. Pure.
+import { inputProblems, isLaunched, isPython, retries, spendByKind, spendOf, totalTokens, type JournalRow, type RunDerived, type TaskOutcome } from '@contraagent/api';
+import type { Fact } from '@contraagent/elements/primitives';
+import type { StatTile } from '@contraagent/elements/tiles';
+import { msg, str } from '@lit/localize';
+import { problemTone } from '../lib/tone.js';
+import { factList, facts, fmtDur, kindUnit, tokenCount, usd } from '../words/format.js';
+import { stateCount } from '../words/index.js';
+import { retryTip } from '../words/attempts.js';
+import { correctionTip } from '../words/contract.js';
+import { modelSwitchTip } from '../words/hops.js';
+
+/**
+ * The run's figures, from the journal. Only tries that ran count: a task
+ * refused before launch (`invalid_input`) has a row but is not a try, not an
+ * agent session and not a failed attempt; tasks are counted by `deriveRun`.
+ */
+export interface Kpis {
+  /** Tries that ran. */
+  attempts: number;
+  python: number;
+  /** Agent sessions: tries an agent ran. */
+  launches: number;
+  /** Tries that ran and failed. */
+  bad: number;
+  launchWall: number;
+  pythonWall: number;
+  /** Tries after a task's first, and the tasks they belong to. */
+  retries: number;
+  retriedTasks: number;
+  /** The keys of the tasks that were retried / had fix-ups (to open one directly when it is the only one). */
+  retriedKeys: string[];
+  fixupKeys: string[];
+  /** Fix-ups (sessions resumed with check errors), and the tasks that had any. */
+  fixups: number;
+  fixupTasks: number;
+  /** Model switches after a rate limit, and the tasks that switched. */
+  switches: number;
+  switchTasks: number;
+}
+
+export function kpis(journal: readonly JournalRow[]): Kpis {
+  const ran = journal.filter(isLaunched);
+  const py = ran.filter(isPython);
+  const llm = ran.filter((e) => !isPython(e));
+  const wall = (xs: readonly JournalRow[]) => xs.reduce((a, e) => a + (e.wall_s || 0), 0);
+  const keys = (xs: readonly JournalRow[]) => [...new Set(xs.map((e) => e.key))];
+  const tasks = (xs: readonly JournalRow[]) => keys(xs).length;
+  const retried = retries(journal);
+  const fixed = ran.filter((e) => (e.rounds || 1) > 1);
+  const switched = ran.filter((e) => (e.hops || []).length > 1);
+  return {
+    attempts: ran.length,
+    python: py.length,
+    launches: llm.length,
+    bad: ran.filter((e) => !e.ok).length,
+    launchWall: wall(llm),
+    pythonWall: wall(py),
+    retries: retried.length,
+    retriedTasks: tasks(retried),
+    retriedKeys: keys(retried),
+    fixupKeys: keys(fixed),
+    fixups: fixed.reduce((a, e) => a + (e.rounds || 1) - 1, 0),
+    fixupTasks: tasks(fixed),
+    switches: switched.reduce((a, e) => a + (e.hops || []).length - 1, 0),
+    switchTasks: tasks(switched),
+  };
+}
+
+/** What a tile's link opens: one task (`key`), or the history filtered by `stop` (`bad`, `invalid_input`, `retried`, `fixup`). */
+export type KpiAction = { key: string } | { stop: string };
+
+/** A tile's action id (`StatTile.action.id`) as what it opens. */
+export function kpiAction(id: string): KpiAction {
+  return id.startsWith('task:') ? { key: id.slice(5) } : { stop: id.replace(/^history:/, '') };
+}
+
+/**
+ * Why the tasks that did not start did not start, as the data names it: an
+ * input missing, an input that failed checks, an earlier task that failed.
+ */
+function notStartedCauses(outcomes: Iterable<TaskOutcome>): string[] {
+  let missing = false;
+  let checks = false;
+  let earlier = false;
+  for (const t of outcomes) {
+    if (t.outcome !== 'not_started') continue;
+    const last = t.attempts[t.attempts.length - 1];
+    const ps = last?.stop === 'invalid_input' ? inputProblems(last.reason) : [];
+    if (ps.some((p) => p.problem === 'missing')) missing = true;
+    if (ps.some((p) => p.problem === 'checks')) checks = true;
+    if (ps.some((p) => p.problem === 'failed') || (!ps.length && t.cause)) earlier = true;
+  }
+  return factList(earlier ? msg('Earlier task failed') : '', missing ? msg('Input missing') : '', checks ? msg('Input failed checks') : '');
+}
+
+/** The history filtered by `stop`, named `label`. */
+const history = (stop: string, label: string): StatTile['action'] => ({ id: `history:${stop}`, label });
+
+/** The tasks behind a count: the task itself when it is one (named), else the history filtered to them (`label`). */
+function show(journal: readonly JournalRow[], keys: readonly string[], stop: string, label: string): StatTile['action'] {
+  const only = keys.length === 1 ? keys[0] : undefined;
+  if (!only) return history(stop, label);
+  const row = journal.find((r) => r.key === only);
+  return { id: `task:${only}`, label: row ? kindUnit(row) : only };
+}
+
+/**
+ * The tiles: tasks (with `d` from the plan; from the journal alone otherwise),
+ * attempts, cost and tokens (when reported), failed attempts, not started,
+ * agent time, retries, corrections and model switches. Neutral by default:
+ * only a problem count above 0 takes its tone (`problemTone`).
+ */
+export function kpiTiles(journal: readonly JournalRow[], d: Pick<RunDerived, 'outcomes' | 'counts'>): StatTile[] {
+  const k = kpis(journal);
+  const { outcomes, counts: c } = d;
+  // The total is neutral; the parts that are problems carry their own status.
+  const parts: Fact[] = [
+    { text: stateCount('done', c.doneTotal), tone: 'neutral' },
+    { text: c.skipped ? stateCount('skipped', c.skipped) : '', tone: 'neutral' },
+    { text: c.failed ? stateCount('failed', c.failed) : '', tone: problemTone(c.failed, 'failed') },
+    { text: c.not_started ? stateCount('not_started', c.not_started) : '', tone: problemTone(c.not_started, 'attention') },
+    { text: c.partial ? stateCount('partial', c.partial) : '', tone: problemTone(c.partial, 'attention') },
+  ];
+  return [
+    { id: 'tasks', label: msg('Tasks', { id: 'tasks', desc: 'A count of tasks' }), value: c.total, sub: [parts] },
+    {
+      id: 'attempts',
+      label: msg('Attempts'),
+      value: k.attempts,
+      sub: [factList(k.launches === 1 ? msg('1 agent session') : msg(str`${k.launches} agent sessions`), k.python === 1 ? msg('1 Python task attempt') : msg(str`${k.python} Python task attempts`))],
+      tip: msg('Attempts that ran, retries included (journal.jsonl)'),
+    },
+    ...spendTiles(journal),
+    {
+      id: 'bad',
+      tone: problemTone(k.bad, 'failed'),
+      label: msg('Failed attempts'),
+      value: k.bad,
+      sub: [k.bad ? [] : [msg('All attempts done')]],
+      ...(k.bad ? { action: history('bad', msg('Failed attempts in history')) } : {}),
+    },
+    {
+      id: 'notstarted',
+      tone: problemTone(c.not_started, 'attention'),
+      label: msg('Not started'),
+      value: c.not_started,
+      sub: [c.not_started ? notStartedCauses(outcomes.values()) : [msg('All tasks started')]],
+      ...(c.not_started ? { action: history('invalid_input', msg('Tasks not started in history')) } : {}),
+    },
+    {
+      id: 'wall',
+      label: msg('Agent session time'),
+      value: fmtDur(k.launchWall),
+      sub: [[msg(str`Python tasks: ${fmtDur(k.pythonWall)}`)]],
+      tip: msg('Summed over agent sessions, including sessions that ran at once'),
+    },
+    {
+      id: 'retry',
+      label: msg('Retries'),
+      value: k.retries,
+      sub: [[!k.retries ? msg('No retries') : k.retriedTasks === 1 ? msg('1 task retried') : msg(str`${k.retriedTasks} tasks retried`)]],
+      tip: retryTip(),
+      ...(k.retries ? { action: show(journal, k.retriedKeys, 'retried', msg('Retried tasks in history')) } : {}),
+    },
+    {
+      id: 'ct',
+      label: msg('Corrections'),
+      value: k.fixups,
+      sub: [[!k.fixups ? msg('No corrections') : k.fixupTasks === 1 ? msg('1 task with a correction') : msg(str`${k.fixupTasks} tasks with corrections`)]],
+      tip: correctionTip(),
+      ...(k.fixups ? { action: show(journal, k.fixupKeys, 'fixup', msg('Attempts with corrections in history')) } : {}),
+    },
+    {
+      id: 'fo',
+      label: msg('Model switches'),
+      value: k.switches,
+      sub: [[!k.switches ? msg('No model switches') : k.switchTasks === 1 ? msg('1 task with a model switch') : msg(str`${k.switchTasks} tasks with model switches`)]],
+      tip: modelSwitchTip(),
+    },
+  ];
+}
+
+/** Cost and tokens, when any attempt reported them. */
+function spendTiles(journal: readonly JournalRow[]): StatTile[] {
+  const s = spendOf(journal);
+  if (!s) return [];
+  const top = spendByKind(journal)[0];
+  return [
+    {
+      id: 'cost',
+      label: msg('Cost'),
+      value: usd(s.cost),
+      sub: top && top.share !== null ? [[msg(str`Highest cost: ${top.kind}`)], factList(usd(top.spend.cost), msg(str`${Math.round(top.share * 100)}% of the total`))] : [[]],
+      tip: msg('Reported by the coding agent'),
+    },
+    {
+      id: 'tokens',
+      label: msg('Tokens'),
+      value: tokenCount(totalTokens(s)),
+      sub: [factList(msg(str`${tokenCount(s.input)} input`), msg(str`${tokenCount(s.output)} output`), msg(str`${tokenCount(s.cache_read + s.cache_creation)} cache`))],
+      tip: facts(
+        msg(str`${tokenCount(s.cache_read)} cache read`),
+        msg(str`${tokenCount(s.cache_creation)} cache write`),
+        s.calls === 1 ? msg('1 API call') : msg(str`${s.calls} API calls`),
+      ),
+    },
+  ];
+}