@contraagent/ui 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contraagent/ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Web components for the contraagent monitor: transcripts, task tables, the journal, plans, contracts. Framework-free (Lit), typed by @contraagent/api",
   "license": "MIT",
   "keywords": [
@@ -109,8 +109,8 @@
     "./dist/elements/**"
   ],
   "dependencies": {
-    "@contraagent/api": "0.8.0",
-    "@contraagent/elements": "0.8.0"
+    "@contraagent/api": "0.9.0",
+    "@contraagent/elements": "0.9.0"
   },
   "peerDependencies": {
     "@lit/localize": "^0.12.2",

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>`,
     },
     {
@@ -196,7 +210,7 @@ export function journalColumns(ctx: JournalColumnsContext): DataColumn<JournalRo
               >${safetyStopCount(stops.length)}</span
             >`
           : nothing}${unread
-          ? html` <span class="unread nw" title=${msg(str`Event types this contraagent version does not know (unread_events): ${unread}`)}
+          ? html` <span class="unread nw" title=${msg(str`Events this contraagent version could not read (unread_events): ${unread}`)}
               ><span aria-hidden="true">⚠</span> ${msg('Unrecognized events')}</span
             >`
           : nothing}${unknown

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>