@contraagent/ui 0.8.0 → 0.8.1

package/src/adapters/journal-columns.ts

@@ -36,9 +36,19 @@ 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))];
+/** The identities an attempt authenticated as, in order; both when a model switch changed it. */
+const identities = (e: JournalRow): string[] => [...new Set([...(e.hops ?? []).map((h) => h.credential), e.credential].filter((c): c is string => !!c))];
+
+/** The one identity every attempt that ran authenticated as alone; '' when they differ or none is known. */
+export function sharedIdentity(journal: readonly JournalRow[]): string {
+  const seen = new Set(journal.filter(isLaunched).map((e) => identities(e).join('\n')));
+  const [only] = seen;
+  return seen.size === 1 && only && !only.includes('\n') ? only : '';
+}
+
+/** The identity the attempt authenticated as (both when a model switch changed it), unless `shared`: then the column's header names it. */
+function identity(e: JournalRow, shared: string) {
+  const ids = identities(e);
   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];
@@ -47,6 +57,7 @@ function identity(e: JournalRow) {
   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');
+  if (shared) return start ? html`<span class="sub" title=${tips || nothing}><span class="q">${shown}</span></span>` : nothing;
   return html`<span class="sub" title=${tips || nothing}>${ids.map((c) => credentialLabel(c)).join(' → ')}${start ? html` <span class="q">${shown}</span>` : nothing}</span>`;
 }
 
@@ -55,6 +66,8 @@ export function journalColumns(ctx: JournalColumnsContext): DataColumn<JournalRo
   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]));
+  // Every attempt ran as one identity: the header names it once, the rows do not.
+  const shared = sharedIdentity(ctx.journal);
   /** The attempt that later did the task, after this one failed (0: none). */
   const laterTry = (e: JournalRow): number => {
     const f = tries.get(e.key);
@@ -133,11 +146,12 @@ export function journalColumns(ctx: JournalColumnsContext): DataColumn<JournalRo
     },
     {
       id: 'agent',
-      header: msg('Agent, model, identity'),
+      header: shared ? msg('Agent, model') : msg('Agent, model, identity'),
+      ...(shared ? { tip: [msg(str`Identity: ${credentialLabel(shared)}`), credentialTip(shared)].filter(Boolean).join('\n') } : {}),
       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)}`
+          ? html`<span>${[e.agent, e.model].filter(Boolean).join(' / ') || '—'}</span>${identity(e, shared)}`
           : '—'}</span>`,
     },
     {

package/src/adapters/kpi-tiles.ts

@@ -31,9 +31,10 @@ export interface Kpis {
   /** 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). */
+  /** The keys of the tasks that were retried / had fix-ups / switched models (to name or open one directly when it is the only one). */
   retriedKeys: string[];
   fixupKeys: string[];
+  switchKeys: string[];
   /** Fix-ups (sessions resumed with check errors), and the tasks that had any. */
   fixups: number;
   fixupTasks: number;
@@ -67,6 +68,7 @@ export function kpis(journal: readonly JournalRow[]): Kpis {
     fixupTasks: tasks(fixed),
     switches: switched.reduce((a, e) => a + (e.hops || []).length - 1, 0),
     switchTasks: tasks(switched),
+    switchKeys: keys(switched),
   };
 }
 
@@ -100,21 +102,40 @@ function notStartedCauses(outcomes: Iterable<TaskOutcome>): string[] {
 /** 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'] {
+/** The one task behind a count, by key and name; undefined when there are several. */
+function onlyTask(journal: readonly JournalRow[], keys: readonly string[]): { key: string; name: string } | undefined {
   const only = keys.length === 1 ? keys[0] : undefined;
-  if (!only) return history(stop, label);
+  if (!only) return undefined;
   const row = journal.find((r) => r.key === only);
-  return { id: `task:${only}`, label: row ? kindUnit(row) : only };
+  return { key: only, name: row ? kindUnit(row) : only };
+}
+
+/** 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 one = onlyTask(journal, keys);
+  return one ? { id: `task:${one.key}`, label: one.name } : history(stop, label);
+}
+
+/**
+ * The line under a count of events: the one task they belong to by name, else the
+ * count of tasks (`many`) when it differs from the count of events; none at 0.
+ */
+function tasksLine(journal: readonly JournalRow[], count: number, keys: readonly string[], many: (n: number) => string): string[][] {
+  if (!count) return [];
+  const one = onlyTask(journal, keys);
+  if (one) return [[one.name]];
+  return keys.length === count ? [] : [[many(keys.length)]];
 }
 
 /**
  * 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`).
+ * only a problem count above 0 takes its tone (`problemTone`). A tile's lines
+ * add facts the value does not give: a 0 has none. `highestCost: false` leaves
+ * the kind with the highest cost out of the cost tile.
  */
-export function kpiTiles(journal: readonly JournalRow[], d: Pick<RunDerived, 'outcomes' | 'counts'>): StatTile[] {
+export function kpiTiles(journal: readonly JournalRow[], d: Pick<RunDerived, 'outcomes' | 'counts'>, opts: { highestCost?: boolean } = {}): StatTile[] {
   const k = kpis(journal);
   const { outcomes, counts: c } = d;
   // The total is neutral; the parts that are problems carry their own status.
@@ -135,13 +156,13 @@ export function kpiTiles(journal: readonly JournalRow[], d: Pick<RunDerived, 'ou
       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),
+    ...spendTiles(journal, opts.highestCost ?? true),
     {
       id: 'bad',
       tone: problemTone(k.bad, 'failed'),
       label: msg('Failed attempts'),
       value: k.bad,
-      sub: [k.bad ? [] : [msg('All attempts done')]],
+      sub: [],
       ...(k.bad ? { action: history('bad', msg('Failed attempts in history')) } : {}),
     },
     {
@@ -149,7 +170,7 @@ export function kpiTiles(journal: readonly JournalRow[], d: Pick<RunDerived, 'ou
       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')]],
+      sub: c.not_started ? [notStartedCauses(outcomes.values())] : [],
       ...(c.not_started ? { action: history('invalid_input', msg('Tasks not started in history')) } : {}),
     },
     {
@@ -163,7 +184,7 @@ export function kpiTiles(journal: readonly JournalRow[], d: Pick<RunDerived, 'ou
       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`)]],
+      sub: tasksLine(journal, k.retries, k.retriedKeys, (n) => msg(str`${n} tasks retried`)),
       tip: retryTip(),
       ...(k.retries ? { action: show(journal, k.retriedKeys, 'retried', msg('Retried tasks in history')) } : {}),
     },
@@ -171,7 +192,7 @@ export function kpiTiles(journal: readonly JournalRow[], d: Pick<RunDerived, 'ou
       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`)]],
+      sub: tasksLine(journal, k.fixups, k.fixupKeys, (n) => msg(str`${n} tasks with corrections`)),
       tip: correctionTip(),
       ...(k.fixups ? { action: show(journal, k.fixupKeys, 'fixup', msg('Attempts with corrections in history')) } : {}),
     },
@@ -179,14 +200,14 @@ export function kpiTiles(journal: readonly JournalRow[], d: Pick<RunDerived, 'ou
       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`)]],
+      sub: tasksLine(journal, k.switches, k.switchKeys, (n) => msg(str`${n} tasks with model switches`)),
       tip: modelSwitchTip(),
     },
   ];
 }
 
-/** Cost and tokens, when any attempt reported them. */
-function spendTiles(journal: readonly JournalRow[]): StatTile[] {
+/** Cost and tokens, when any attempt reported them; the cost tile names the kind with the highest cost when `highest`. */
+function spendTiles(journal: readonly JournalRow[], highest: boolean): StatTile[] {
   const s = spendOf(journal);
   if (!s) return [];
   const top = spendByKind(journal)[0];
@@ -195,7 +216,7 @@ function spendTiles(journal: readonly JournalRow[]): StatTile[] {
       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`))] : [[]],
+      sub: highest && 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'),
     },
     {

package/src/adapters/transcript/sections.ts

@@ -9,7 +9,7 @@ import { attemptNames } from '../../words/attempts.js';
 import { roundLabel, roundMark, switchText } from '../../words/rounds.js';
 import { stopLabel } from '../../words/stop.js';
 import type { Transcript } from './model.js';
-import { whoTags } from './who.js';
+import { whoTags, type Who } from './who.js';
 
 export interface SectionsContext {
   /** The run id: paths in a reason are shown relative to it. */
@@ -18,6 +18,14 @@ export interface SectionsContext {
   rows: readonly JournalRow[];
   /** The latest round is still being written (the task runs and its transcript is tailed). */
   active: boolean;
+  /** Who the page names already (the task's header): a section's head shows only what differs from it. */
+  shownWho?: Who | null;
+}
+
+/** What of `who` differs from `shown`: the agent, model and role the reader has not seen yet. */
+export function whoBeyond(who: Who | null | undefined, shown: Who | null | undefined): Who | null {
+  if (!who || !shown) return who ?? null;
+  return { agent: who.agent === shown.agent ? '' : who.agent, model: who.model === shown.model ? '' : who.model, role: who.role === shown.role ? '' : who.role };
 }
 
 /** The command line, and the prompt with what was not saved of it. */
@@ -72,7 +80,7 @@ export function transcriptSections(t: Transcript, rounds: readonly RoundInfo[],
       facts: model ? [model.replace(/^claude-/, '')] : [],
       verdict: mark ? { tone: mark === '✓' ? 'done' : 'failed', text: word, tip } : undefined,
       active: i === last && ctx.active,
-      tags: r.launch ? whoTags(r.who) : [],
+      tags: r.launch ? whoTags(whoBeyond(r.who, ctx.shownWho)) : [],
       details: r.launch ? launchDetails(r.launch) : [],
       // the model leaves an event's title to the reader's words: the only event is an API request sent again
       items: r.items.map((it): TranscriptItem => (it.type === 'event' ? { ...it, title: msg('API request sent again') } : it)),

package/src/elements/lists/ca-contracts.ts

@@ -8,19 +8,16 @@ import { RememberedSet } from '../../core/memory.js';
 import type { TaskView } from '../../core/view-route.js';
 import { base } from '@contraagent/elements/styles';
 import { executorIcon, executorIconStyles } from '../../words/executor.js';
-import { kindUnit } from '../../words/format.js';
-import { correctionRoundTip, correctionRoundsLabel, notRunText, type Producer } from '../../words/contract.js';
+import { facts, kindUnit } from '../../words/format.js';
+import { contractStatusLabel, correctionRoundTip, correctionRoundsLabel, notRunText, type Producer } from '../../words/contract.js';
 import { contractChip, contractStyles, fieldCheckTable, fileConditions, inputChip } from '../shared/contract-parts.js';
 
 const CT_ORDER: readonly ContractStatus[] = ['invalid', 'refused', 'failed', 'running', 'pending', 'valid'];
 
-/** Output contracts per status, worst first; a line of text when none is declared. */
-export function ctChips(outputs: Outputs | null) {
+/** Output contracts per status that is not passed, worst first: the passed ones head their own group. */
+function ctChips(outputs: Outputs | null) {
   const t = outputs?.tally;
-  const chips = t ? CT_ORDER.filter((k) => t[k]) : [];
-  return chips.length
-    ? chips.map((k) => contractChip(k, t?.[k]))
-    : html`<span class="meta">${msg('No checked files')}</span>`;
+  return (t ? CT_ORDER.filter((k) => k !== 'valid' && t[k]) : []).map((k) => contractChip(k, t?.[k]));
 }
 
 const shortPath = (p: string) => p.split('/').slice(-2).join('/');
@@ -34,8 +31,9 @@ const rank = (s: ContractStatus | null | undefined) => (s ? CT_ORDER.indexOf(s)
 
 /**
  * The files each task must write (`OutputContract`) and read (`InputContract`),
- * problems first, each checked field by field against its schema. Links open
- * the task (`ca-open-task`).
+ * problems first, each with the chip of its status, then the passed ones under
+ * one chip; each checked field by field against its schema. Links open the
+ * task (`ca-open-task`).
  *
  * @fires ca-open-task - `{key, view}`: a link to the task's input, output or transcript
  */
@@ -49,6 +47,8 @@ export class CaContracts extends LitElement {
     css`
       :host { display: block; container-type: inline-size; }
       .ct-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
+      /* the passed outputs: one chip heads them, their rows carry none */
+      .passed { margin: 6px 0 0; padding: 10px 0 8px; font: inherit; border-top: 1px solid var(--line); }
       details.ct { border-top: 1px solid var(--line); }
       details.ct > summary { list-style: none; cursor: pointer; padding: 7px 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
       details.ct > summary > * { min-width: 0; overflow-wrap: anywhere; }
@@ -85,24 +85,30 @@ export class CaContracts extends LitElement {
     const cs = this.outputs?.contracts ?? [];
     this.outcomes = this.plan ? deriveRun(this.journal, this.plan).outcomes : new Map<string, TaskOutcome>();
     if (!cs.length) {
-      return html`<div class="blank"><span class="ic" aria-hidden="true">▣</span><b>${msg('No checked files')}</b>
-        <span>${msg('No task declares an OutputContract or an InputContract')}</span></div>`;
+      return html`<div class="blank"><span class="ic" aria-hidden="true">▣</span><b>${facts(msg('No checked files'), msg('no task declares an OutputContract or an InputContract'))}</b></div>`;
     }
     const outs = cs
       .flatMap((c) => (c.outputs ?? []).map((o) => [c, o] as const))
       .sort(([a, x], [b, y]) => rank(x.status) - rank(y.status) || a.key.localeCompare(b.key));
     const ins = cs.flatMap((c) => (c.inputs ?? []).map((i) => [c, i] as const));
+    const others = outs.filter(([, o]) => o.status !== 'valid');
+    const passed = outs.filter(([, o]) => o.status === 'valid');
+    const chips = ctChips(this.outputs);
     return html`<div class="g12">
       <section class="panel c12">
-        <h3 title=${msg('OutputContract')}>${msg('Outputs')}
-          <span class="r">${msg('Files each task must write')}</span></h3>
-        <div class="ct-row">${ctChips(this.outputs)}</div>
-        ${repeat(outs, ([c, o]) => `out|${c.key}|${o.path}`, ([c, o]) => this.outRow(c, o))}
+        <h3 title=${msg('Files each task must write (OutputContract)')}>${msg('Outputs')}</h3>
+        ${chips.length ? html`<div class="ct-row">${chips}</div>` : nothing}
+        ${repeat(others, ([c, o]) => `out|${c.key}|${o.path}`, ([c, o]) => this.outRow(c, o))}
+        ${passed.length
+          ? html`<h4 class="passed">${contractChip('valid', passed.length)}</h4>
+              <div role="group" aria-label=${contractStatusLabel('valid')}>
+                ${repeat(passed, ([c, o]) => `out|${c.key}|${o.path}`, ([c, o]) => this.outRow(c, o))}
+              </div>`
+          : nothing}
       </section>
       ${ins.length
         ? html`<section class="panel c12">
-            <h3 title=${msg('InputContract')}>${msg('Inputs')}
-              <span class="r">${msg('Files each task reads')}</span></h3>
+            <h3 title=${msg('Files each task reads (InputContract)')}>${msg('Inputs')}</h3>
             ${repeat(ins, ([c, i]) => `in|${c.key}|${i.path}`, ([c, i]) => this.inRow(c, i))}
           </section>`
         : nothing}
@@ -165,7 +171,7 @@ export class CaContracts extends LitElement {
     // The chip says why there is no file; the size column shows a size only when there is one.
     return this.details(
       `out|${c.key}|${o.path}`,
-      html`${contractChip(status)}
+      html`${status === 'valid' ? nothing : contractChip(status)}
         ${rounds > 1 ? html`<span class="meta" title=${correctionRoundTip()}>${correctionRoundsLabel(rounds, status === 'valid')}</span>` : nothing}
         ${this.who(c)}
         <span class="jmono jdim ct-path" title=${o.path}>${shortPath(o.path)}</span>

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

@@ -19,7 +19,7 @@ import { emit } from '../../core/events.js';
  * @csspart label - a tile's label
  * @csspart value - a tile's value
  * @csspart sub - each line under the value
- * @csspart action - a tile's link
+ * @csspart action - a tile's link, over the whole tile
  */
 @customElement('ca-kpis')
 @localized()
@@ -31,6 +31,8 @@ export class CaKpis extends LitElement {
   @property({ attribute: false }) journal: JournalRow[] = [];
   /** The scheduled tasks; without it, tasks are counted from the journal. */
   @property({ attribute: false }) plan: Plan = { nodes: [], groups: [] };
+  /** Leaves the kind with the highest cost out of the cost tile, for a page that shows the cost by kind beside it. */
+  @property({ type: Boolean, attribute: 'no-highest-cost' }) noHighestCost = false;
 
   private readonly onAction = (e: CustomEvent<{ action: string }>): void => {
     e.stopPropagation();
@@ -40,7 +42,7 @@ export class CaKpis extends LitElement {
   };
 
   override render() {
-    return html`<cae-stat-tiles exportparts="tiles, tile, label, value, sub, action" .tiles=${kpiTiles(this.journal, deriveRun(this.journal, this.plan))} @cae-action=${this.onAction}></cae-stat-tiles>`;
+    return html`<cae-stat-tiles exportparts="tiles, tile, label, value, sub, action" .tiles=${kpiTiles(this.journal, deriveRun(this.journal, this.plan), { highestCost: !this.noHighestCost })} @cae-action=${this.onAction}></cae-stat-tiles>`;
   }
 }
 

package/src/elements/overview/ca-model-usage.ts

@@ -16,7 +16,8 @@ const COLUMNS: readonly ModelMeasure[] = ['cost', 'tokens', 'time', 'sessions'];
 
 /**
  * What each model was used for in a run (`Plan.models`): the share of each model in
- * the chosen measure (cost, tokens, time or agent sessions) as one bar, and a table
+ * the chosen measure (cost, tokens, time or agent sessions) as one bar (the table
+ * names each segment, so the bar has no names under it), and a table
  * of every model with its share and every measure, and its peak context when
  * a session on it reported one. A model keeps its colour, and
  * its place, in the order it was first used, whatever the measure; past six models
@@ -74,7 +75,7 @@ export class CaModelUsage extends LitElement {
               @cae-change=${(e: CustomEvent<{ value: string }>) => (this.measure = e.detail.value as ModelMeasure)}></cae-segmented>
           </div>`
         : nothing}
-      ${shareBar(shareParts(this.models, measure), { label: measureLabel(measure) })}
+      ${shareBar(shareParts(this.models, measure), { label: measureLabel(measure), names: false })}
       <div class="wrap" data-scroll="x" tabindex="0" role="region" aria-label=${msg('Models')}>
         <table>
           <thead>

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

@@ -7,7 +7,6 @@ import {
   type TypedPanelBody,
   liveActivities,
   progress,
-  result,
   runAccounts,
   runRelative,
   spendOf,
@@ -29,9 +28,9 @@ import { facts, kindUnit, localTime, sentence } from '../../words/format.js';
 import { notStartedCause, outcomeLabel, stateCount, stopLabel } from '../../words/index.js';
 import { base } from '@contraagent/elements/styles';
 import { pill, statusWord } from '@contraagent/elements/primitives';
-import { contractTone, outcomeTone } from '../../lib/tone.js';
+import { outcomeTone } from '../../lib/tone.js';
 import { contractChip, formatOf } from '../shared/contract-parts.js';
-import { contractStatusLabel, contractStatusWhy } from '../../words/contract.js';
+import { contractStatusLabel } from '../../words/contract.js';
 import { taskChip } from '../shared/task-chip.js';
 import '../lists/ca-proc-tree.js';
 import './ca-kpis.js';
@@ -132,11 +131,15 @@ export class CaOverview extends LitElement {
       }
       .ok { display: flex; align-items: baseline; gap: 6px; color: var(--text-2); }
       .ok span[aria-hidden] { color: var(--status-done); }
-      /* a failed output: its status and its task on one line, what it is and where under them */
-      .ofl { grid-template-columns: max-content minmax(0, 1fr); }
-      .ofl > .jstop { white-space: nowrap; }
+      /* a failed output, under the chip of its status: its task and what it is on one line, where under them */
+      .ofl { grid-template-columns: minmax(0, 1fr) auto; }
       .ofl > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-      .ofl > .meta { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; }
+      .ofl > .meta { overflow: hidden; text-overflow: ellipsis; }
+      .ofl > .meta:last-child { grid-column: 1 / -1; }
+      .ogroup + .ogroup, .ogroup + .ct-row { margin-top: 10px; }
+      /* a heading that is a link to its tab */
+      h3 a.hl { color: inherit; text-decoration: none; }
+      h3 a.hl:hover { color: var(--accent); text-decoration: underline; }
       .ct-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
       .pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; }
       .pcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px 14px; border-radius: 10px;
@@ -158,10 +161,8 @@ export class CaOverview extends LitElement {
       .ofl > .meta { white-space: nowrap; }
       .stopped { grid-column: 1 / 4; color: var(--text-muted); font-size: 11px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
       .fl.muted { opacity: 0.7; }
-      .problems h4.sub { margin: 10px 0 2px; font-size: 11px; font-weight: 600; color: var(--text-muted); display: flex; }
-      .problems h4.sub .r { margin-left: auto; font-weight: 400; }
-      .next { margin: 10px 2px 2px; font-size: 12px; color: var(--text-2); }
-      .next code { font-family: var(--mono); }
+      /* the tasks done after retrying: a group of their own under a rule, after the problems */
+      .recovered { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
       .more { font-size: 12px; margin: 6px 10px 0; }
     `,
   ];
@@ -211,29 +212,27 @@ export class CaOverview extends LitElement {
         <section class="panel enter problems">
           <h3>${msg('Problems')}
             <span class="r"><a class="lnk" href="#" @click=${(e: Event) => this.nav(e, () => emit(this, 'ca-navigate', { tab: 'journal', stop: 'bad' }))}>${msg('Failed attempts in history')}</a></span></h3>
-          ${this.problems(live)}
+          ${this.problems()}
         </section>
         <section class="panel enter outputs">
-          <h3 title=${msg('Checked files (OutputContract, InputContract)')}>${msg('Outputs')}
-            <span class="r"><a class="lnk" href="#" @click=${(e: Event) => this.nav(e, () => this.go('outputs'))}>${msg('All outputs')}</a></span></h3>
+          <h3 title=${msg('Checked files (OutputContract, InputContract)')}><a class="hl" href="#" @click=${(e: Event) => this.nav(e, () => this.go('outputs'))}>${msg('Outputs')}</a></h3>
           ${this.outputs()}
         </section>
         ${running ? html`<div class="row">${this.runningCard(live, busy, max)}</div>` : nothing}
       </div>
       <section class="panel enter">
         <h3 title=${msg('Every task the run scheduled, by kind (plan.jsonl)')}>${msg('Pipeline')}
-          <span class="r">${this.progressLine(live)}</span></h3>
+          ${live ? html`<span class="r">${this.progressLine()}</span>` : nothing}</h3>
         <ca-pipeline-graph .plan=${s.plan} .forecast=${s.forecast} .journal=${s.journal} .run=${this.run} .layer=${this.layer} .unit=${this.unit} .sel=${this.sel} ?live=${live}></ca-pipeline-graph>
       </section>
       <section class="panel enter">
         <h3 title=${msg('Counted from every finished attempt (journal.jsonl)')}>${msg('Totals')}</h3>
-        <ca-kpis .journal=${s.journal} .plan=${s.plan}></ca-kpis>
+        <ca-kpis .journal=${s.journal} .plan=${s.plan} no-highest-cost></ca-kpis>
       </section>
       <div class="band parts">
         ${live
           ? html`<section class="panel enter">
-              <h3>${msg('Process tree')}
-                <span class="r"><a class="lnk" href="#" @click=${(e: Event) => this.nav(e, () => this.go('procs'))}>${msg('All processes')}</a></span></h3>
+              <h3><a class="hl" href="#" @click=${(e: Event) => this.nav(e, () => this.go('procs'))}>${msg('Process tree')}</a></h3>
               <ca-proc-tree .procs=${s.procs}></ca-proc-tree>
             </section>`
           : nothing}
@@ -245,15 +244,13 @@ export class CaOverview extends LitElement {
           : nothing}
         ${s.plan.models?.length
           ? html`<section class="panel enter">
-              <h3 title=${msg('What the agent sessions spent on each model, each model of a model switch counted separately (Plan.models)')}>${msg('Models')}
-                <span class="r">${s.plan.models.length === 1 ? msg('1 model') : msg(str`${s.plan.models.length} models`)}</span></h3>
+              <h3 title=${msg('What the agent sessions spent on each model, each model of a model switch counted separately (Plan.models)')}>${msg('Models')}</h3>
               <ca-model-usage .models=${s.plan.models}></ca-model-usage>
             </section>`
           : nothing}
         ${runAccounts(s.journal).length || s.plan.rests?.length
           ? html`<section class="panel enter">
-              <h3 title=${msg('Account-wide | read at each agent session start')}>
-                ${msg('Subscription usage')}<span class="r">${msg('Per account, first → last reading')}</span></h3>
+              <h3 title=${msg('Account-wide | first and last reading per account | read at each agent session start')}>${msg('Subscription usage')}</h3>
               <ca-quota .journal=${s.journal} .caps=${s.plan.quota_caps ?? []} .rests=${s.plan.rests ?? []} .rule=${s.plan.quota_rule ?? ''} ?live=${live}></ca-quota>
             </section>`
           : nothing}
@@ -277,8 +274,7 @@ export class CaOverview extends LitElement {
           </section>`
         : nothing}
       <section class="panel enter">
-        <h3>${msg('Timeline')}
-          <span class="r">${this.triesLine()}</span></h3>
+        <h3>${msg('Timeline')}</h3>
         <ca-timeline .journal=${s.journal} .plan=${s.plan} .procs=${s.procs} .live=${live} .run=${this.run}></ca-timeline>
       </section>
     </div>`;
@@ -298,60 +294,44 @@ export class CaOverview extends LitElement {
     if (!contracts.length) {
       return html`<div class="meta">${msg('No output files')}</div>`;
     }
-    const chips = CT_ORDER.filter((k) => tally[k]);
     // Only what went wrong with a file; tasks that never started are the problems section's.
     const bad = contracts
       .flatMap((c) => (c.outputs ?? []).map((o): [ContractRecord, ContractSpec] => [c, o]))
       .filter(([, o]) => o.status === 'invalid' || o.status === 'failed');
     const shown = bad.slice(0, OUTPUTS_SHOWN);
-    const refused = tally.refused;
-    return html`<div class="ct-row">
-        ${chips.length
-          ? chips.map((k) => contractChip(k, tally[k]))
-          : html`<span class="meta">${msg('No checked files')}</span>`}
-      </div>
-      ${shown.map(
-        ([c, o]) => html`<button type="button" class="fl ofl" @click=${() => this.go('outputs')}>
-          ${statusWord({ text: o.status ? contractStatusLabel(o.status) : '—', tone: contractTone(o.status), title: o.status ? contractStatusWhy(o.status) : null })}
-          <b class="jmono" title=${c.key}>${kindUnit({ kind: c.kind, unit: c.unit === c.key ? '' : c.unit })}</b>
-          <span class="meta">${formatOf(o)}</span>
-          <span class="meta" title=${runRelative(o.errors?.[0] || o.path, this.run)}>${runRelative(o.errors?.[0] || o.path, this.run)}</span>
-        </button>`,
+    // The rows shown sit under the chip of their status; the other statuses are a row of chips after them.
+    const groups = CT_ORDER.filter((k) => tally[k] && shown.some(([, o]) => o.status === k));
+    const chips = CT_ORDER.filter((k) => tally[k] && !groups.includes(k));
+    return html`${groups.map(
+        (k) => html`<div class="ogroup" role="group" aria-label=${contractStatusLabel(k)}>
+          <div class="ct-row">${contractChip(k, tally[k])}</div>
+          ${shown
+            .filter(([, o]) => o.status === k)
+            .map(
+              ([c, o]) => html`<button type="button" class="fl ofl" @click=${() => this.go('outputs')}>
+                <b class="jmono" title=${c.key}>${kindUnit({ kind: c.kind, unit: c.unit === c.key ? '' : c.unit })}</b>
+                <span class="meta">${formatOf(o)}</span>
+                <span class="meta" title=${runRelative(o.errors?.[0] || o.path, this.run)}>${runRelative(o.errors?.[0] || o.path, this.run)}</span>
+              </button>`,
+            )}
+        </div>`,
       )}
       ${bad.length > shown.length
         ? html`<div class="more"><a class="lnk" href="#" @click=${(e: Event) => this.nav(e, () => this.go('outputs'))}>${bad.length - shown.length === 1
             ? msg('1 more output')
             : msg(str`${bad.length - shown.length} more outputs`)}</a></div>`
         : nothing}
-      ${refused
-        ? html`<div class="meta more">${refused === 1
-            ? msg('1 output not written (task not started)')
-            : msg(str`${refused} outputs not written (tasks not started)`)}</div>`
+      ${chips.length || !groups.length
+        ? html`<div class="ct-row">
+            ${chips.length ? chips.map((k) => contractChip(k, tally[k])) : html`<span class="meta">${msg('No checked files')}</span>`}
+          </div>`
         : nothing}`;
   }
 
-  /** While running, how far the run is; once over, how its tasks ended. */
-  private progressLine(live: boolean): string {
-    const plan = this.state.plan;
-    const r = result(plan);
-    if (live || r.left) {
-      const p = progress(plan);
-      return facts(msg(str`${p.pct}%`), msg(str`${p.done} of ${p.total} tasks done`), p.partial ? stateCount('partial', p.partial) : '', p.skipped ? stateCount('skipped', p.skipped) : '', p.cancelled ? stateCount('cancelled', p.cancelled) : '');
-    }
-    return facts(
-      stateCount('done', r.done),
-      r.skipped ? stateCount('skipped', r.skipped) : '',
-      r.failed ? stateCount('failed', r.failed) : '',
-      r.notStarted ? stateCount('not_started', r.notStarted) : '',
-      r.partial ? stateCount('partial', r.partial) : '',
-      r.cancelled ? stateCount('cancelled', r.cancelled) : '',
-    );
-  }
-
-  /** "23 attempts | 4 not started": a task that never started has no attempt. */
-  private triesLine(): string {
-    const { tries, notStarted } = deriveRun(this.state.journal, this.state.plan).tries;
-    return facts(tries === 1 ? msg('1 attempt') : msg(str`${tries} attempts`), notStarted ? stateCount('not_started', notStarted) : '');
+  /** While running, how far the run is; once over, the run's state and the tiles tell how its tasks ended. */
+  private progressLine(): string {
+    const p = progress(this.state.plan);
+    return facts(msg(str`${p.pct}%`), msg(str`${p.done} of ${p.total} tasks done`), p.partial ? stateCount('partial', p.partial) : '', p.skipped ? stateCount('skipped', p.skipped) : '', p.cancelled ? stateCount('cancelled', p.cancelled) : '');
   }
 
   /** A link's click: no navigation of the page's own, then `go`. */
@@ -425,7 +405,7 @@ export class CaOverview extends LitElement {
     return kindUnit(t);
   }
 
-  private problems(live: boolean) {
+  private problems() {
     const { outcomes, problems } = deriveRun(this.state.journal, this.state.plan);
     const { failed, notStarted, partial, recovered } = problems;
     const issues = failed.length + notStarted.length + partial.length;
@@ -482,8 +462,8 @@ export class CaOverview extends LitElement {
         </div>`,
       )}
       ${rest(partial.length, PROBLEMS_SHOWN, 'partial')}
-      ${recovered.length ? html`<h4 class="sub">${sentence(outcomeLabel('recovered'))} <span class="r">${recovered.length}</span></h4>` : nothing}
-      ${repeat(
+      ${recovered.length
+        ? html`<div class="recovered" role="group" aria-label=${sentence(outcomeLabel('recovered'))}>${repeat(
         recovered.slice(0, RECOVERED_SHOWN),
         (t) => t.key,
         (t) => {
@@ -498,24 +478,14 @@ export class CaOverview extends LitElement {
           </div>`;
         },
       )}
-      ${rest(recovered.length, RECOVERED_SHOWN, 'retried')}
-      ${this.nextStep(live, issues)}`;
+      ${rest(recovered.length, RECOVERED_SHOWN, 'retried')}</div>`
+        : nothing}`;
   }
 
   /** A row's second line: one line, the whole of it in its tooltip. */
   private metaLine(text: string) {
     return html`<div class="meta" title=${text}>${text}</div>`;
   }
-
-  /** For a finished run with problems: how many tasks are not done (the tasks resume=True runs again). */
-  private nextStep(live: boolean, problemCount: number) {
-    if (live || !problemCount) return nothing;
-    const c = deriveRun(this.state.journal, this.state.plan).counts;
-    // A partly done task is finished in this run, and not done: a resume runs it again.
-    const again = c.total - c.finished + c.partial;
-    if (!again) return nothing;
-    return html`<div class="next" title="resume=True">${msg(str`${again} of ${c.total} tasks not done`)}</div>`;
-  }
 }
 
 declare global {