@contraagent/ui 0.0.0-stage → 0.2.0

package/src/elements/task/context.ts

@@ -0,0 +1,105 @@
+// What the parts of `ca-task-view` (its header and its panes) render from: the
+// task's detail, the run around it and what its transcript reported, plus the
+// facts they share about the task.
+import {
+  inputProblems,
+  isLaunched,
+  isPython,
+  outcomeOf,
+  runRelative,
+  type JournalRow,
+  type LaunchEvent,
+  type Outcome,
+  type Plan,
+  type TaskDetail,
+  type TaskOutcome,
+  type UpstreamTask,
+} from '@contraagent/api';
+import { html } from 'lit';
+import { emit, type RoundInfo } from '../../core/events.js';
+import { kindUnit } from '../../words/format.js';
+import { correctionsText, inputCause, notStartedCause } from '../../words/index.js';
+import { type Producer } from '../../words/contract.js';
+
+export interface TaskContext {
+  /** The element: it sends the events. */
+  host: HTMLElement;
+  run: string;
+  detail: TaskDetail;
+  /** The task is running now. */
+  live: boolean;
+  /** The whole run's journal; may be empty. */
+  journal: JournalRow[];
+  plan: Plan | null;
+  /** What happened to every task of the run, by key (empty without a plan). */
+  outcomes: ReadonlyMap<string, TaskOutcome>;
+  /** From the transcript: each round's launch, the round shown, the rounds. */
+  launches: (LaunchEvent | null)[];
+  shownRound: number;
+  rounds: RoundInfo[];
+  /** Read from an export (`Info.export`): it holds no transcript. */
+  exported?: boolean;
+  /** The run is a replay that also launched (`mixedReplay`): each attempt played from its recording is marked. */
+  replayMarks?: boolean;
+}
+
+/** A Python task: it runs in the pipeline's process, so it has no agent session and no transcript. */
+export const isPy = (d: TaskDetail): boolean => isPython(d.io) || d.rows.some(isPython);
+
+/** The coding agent ran for this task at least once. */
+export const hadSession = (d: TaskDetail): boolean => !isPy(d) && (!!d.stream || d.launches.length > 0 || d.rows.some(isLaunched));
+
+/** The task's state in the run: running, waiting, not started, done ... */
+export const stateOf = (c: TaskContext): Outcome =>
+  c.live ? 'running' : (c.outcomes.get(c.detail.key)?.outcome ?? outcomeOf(undefined, c.detail.rows));
+
+/** The earlier task that writes `path`, by the task's own upstream list. */
+export const writerOf = (c: TaskContext, path: string): UpstreamTask | undefined =>
+  c.detail.io.upstream.find((u) => u.outputs.some((o) => o.path === path));
+
+/** For a contract card: who writes a file, and what happened to that task. */
+export const producerOf =
+  (c: TaskContext) =>
+  (path: string): Producer | undefined => {
+    const u = writerOf(c, path);
+    if (!u) return undefined;
+    const o = u.outputs.find((x) => x.path === path);
+    return { name: kindUnit(u), written: !!o?.file.exists, outcome: c.outcomes.get(u.key)?.outcome };
+  };
+
+/**
+ * Why a task did not start, as a phrase after "Not started: ": the input its
+ * refusal names and why it is not ready, or the earlier task that failed; '' when unknown.
+ */
+export function notStartedWhy(c: TaskContext): string {
+  const d = c.detail;
+  const own = c.outcomes.get(d.key) ?? { attempts: d.rows, cause: null };
+  const cause = notStartedCause(own, c.outcomes, c.run, (path) => writerOf(c, path)?.key);
+  if (cause) return cause;
+  // A task the plan does not list (no outcomes): name the earlier task by its upstream entry.
+  const p = inputProblems(d.rows[d.rows.length - 1]?.reason)[0];
+  const w = p ? writerOf(c, p.path) : undefined;
+  return p ? inputCause(runRelative(p.path, c.run), p.problem, w ? { name: kindUnit(w) } : undefined) : '';
+}
+
+/** The earlier task a task that did not start waits for: the one its refusal names, or the failed one upstream. */
+export function culprit(c: TaskContext): { key: string; kind: string; unit: string; executor?: string } | undefined {
+  const d = c.detail;
+  const p = inputProblems(d.rows[d.rows.length - 1]?.reason)[0];
+  const byKey = p?.producer ? c.outcomes.get(p.producer) : undefined;
+  if (byKey) return byKey;
+  const w = p ? writerOf(c, p.path) : undefined;
+  if (w) return w;
+  const cause = c.outcomes.get(d.key)?.cause;
+  return cause ? c.outcomes.get(cause) : undefined;
+}
+
+/** `N corrections` for a journal row whose attempt needed them ('' when none). */
+export const correctionsOf = (r: { rounds?: number | null }): string => correctionsText((r.rounds || 1) - 1);
+
+/** A task's name as a link that sends `ca-open-task`. */
+export const taskLink = (c: TaskContext, u: { key: string; kind: string; unit: string }) =>
+  html`<a class="lnk" href="#" @click=${(e: Event) => {
+    e.preventDefault();
+    emit(c.host, 'ca-open-task', { key: u.key });
+  }}>${kindUnit(u)}</a>`;

package/src/elements/task/header.ts

@@ -0,0 +1,296 @@
+// The top of `ca-task-view`: the task's name and status, who ran it, what it
+// spent, and a chip per finished attempt.
+import { deferredIn, isLaunched, runReadings, runRelative, spendOf, tryQuota, type JournalRow, type Spend } from '@contraagent/api';
+import { msg, str } from '@lit/localize';
+import { html, nothing, type TemplateResult } from 'lit';
+import { toneAttr } from '@contraagent/elements';
+import { pill } from '@contraagent/elements/primitives';
+import { facts, fmtDur, kindUnit, listText, localTime, tokenCount, unreadEvents, usd } from '../../words/format.js';
+import { attemptNames, deferredText, changedFiles, changedFilesTip, changeLabel, credentialLabel, credentialTip, locksLabel, locksTip, modelSwitch, outcomeLabel, priorityText, priorityTip, replayedLabel, replayedTip, stopLabel, type ChangeKind } from '../../words/index.js';
+import { contextWarnedText, contextWarnedTip, peakContextLine, peakContextTip, peakTry } from '../../words/context.js';
+import { readingShort, readingTip } from '../../words/quota.js';
+import { customColumnTip, customValues } from '../../words/row-extras.js';
+import { isStop, type Tone } from '../../lib/tone.js';
+import { executorIcon } from '../../words/executor.js';
+import '@contraagent/elements/json-tree/define';
+import { tagChips, type TranscriptTag } from '@contraagent/elements/transcript';
+import { checkMessage } from '../../adapters/transcript/rounds.js';
+import { agentLabel, launchWho, whoTags, type Who } from '../../adapters/transcript/who.js';
+import { correctionsOf, hadSession, isPy, notStartedWhy, stateOf, type TaskContext } from './context.js';
+
+/** Keys of `TaskDetail` the header shows itself; any other key (a `task_detail` callback's) is shown as JSON. */
+const SHOWN_KEYS = new Set(['key', 'rows', 'launches', 'stream', 'task_detail_error', 'definition', 'io', 'row_extras']);
+
+/** The status mark and the word a screen reader says for it: a partly done attempt is ok, with the mark of a state needing attention. */
+const mark = (r: JournalRow) =>
+  r.stop === 'partial'
+    ? html`<span aria-hidden="true">◌</span><span class="sr">${outcomeLabel('partial')}</span>`
+    : html`<span aria-hidden="true">${r.ok ? '✓' : '✕'}</span><span class="sr">${r.ok ? msg('passed') : msg('failed')}</span>`;
+
+/** One line under the title: what happened to the task, in words, and its tone (`failed`, `attention`, `muted`, or none). */
+function verdict(c: TaskContext): [text: string, tone: Tone] {
+  const rows = c.detail.rows;
+  const tries = rows.filter(isLaunched);
+  const last = rows[rows.length - 1];
+  const state = stateOf(c);
+  switch (state) {
+    case 'running':
+      return [msg('Running'), 'neutral'];
+    case 'waiting': {
+      const node = c.plan?.nodes.find((n) => n.key === c.detail.key);
+      const why = node?.deferred ? deferredText(node.deferred_cause, node.deferred, deferredIn(c.plan, node.deferred_cause)) : '';
+      return why ? [msg(str`Not run: ${why}`), 'attention'] : [msg('Waiting'), 'muted'];
+    }
+    case 'skipped':
+      return [msg('Skipped'), 'muted'];
+    case 'not_started': {
+      const cause = notStartedWhy(c);
+      return [cause ? msg(str`Not started: ${cause}`) : msg('Not started'), 'attention'];
+    }
+    case 'partial': {
+      // An agent task's partial reason is the stop its launch ended on (`partial_on`): said in words.
+      const why = last?.reason && isStop(last.reason) ? stopLabel(last.reason) : runRelative(last?.reason, c.run);
+      return [why ? msg(str`Partly done: ${why}`) : msg('Partly done'), 'attention'];
+    }
+    case 'failed': {
+      const why = runRelative(last?.reason, c.run) || stopLabel(last?.stop);
+      return [tries.length > 1 ? msg(str`Failed on all ${tries.length} attempts: ${why}`) : msg(str`Failed: ${why}`), 'failed'];
+    }
+    default:
+      break;
+  }
+  if (!last) return [outcomeLabel(state), 'neutral'];
+  const fails = tries.filter((r) => !r.ok);
+  if (fails.length) {
+    const why = runRelative(fails[0]?.reason, c.run) || stopLabel(fails[0]?.stop);
+    return [
+      fails.length === 1
+        ? msg(str`Done on attempt ${tries.length} | 1 failed attempt | first failure: ${why}`)
+        : msg(str`Done on attempt ${tries.length} | ${fails.length} failed attempts | first failure: ${why}`),
+      'neutral',
+    ];
+  }
+  const corrections = (last.rounds || 1) - 1 + (last.hook_errors ?? []).length;
+  if (corrections > 0) {
+    const errors = [...(last.hook_errors ?? []).flat(), ...(last.round_errors ?? []).flat(), ...c.rounds.flatMap((r) => r.rejectedWith)];
+    const first = errors[0] ? checkMessage(runRelative(errors[0], c.run)) : '';
+    if (!first) return [corrections === 1 ? msg('Done after 1 correction') : msg(str`Done after ${corrections} corrections`), 'neutral'];
+    return [
+      corrections === 1
+        ? msg(str`Done after 1 correction | first failed check: ${first}`)
+        : msg(str`Done after ${corrections} corrections | first failed check: ${first}`),
+      'neutral',
+    ];
+  }
+  const sw = modelSwitch(last.hops, null, last.skipped_hops);
+  if (sw) return [msg(str`Done after a model switch: ${sw}`), 'neutral'];
+  return [msg('Done'), 'neutral'];
+}
+
+/** The model of the latest round, as its launch named it (`--model`). */
+function streamModel(c: TaskContext): string {
+  for (let i = c.launches.length - 1; i >= 0; i--) {
+    const l = c.launches[i];
+    const m = l ? launchWho(l).model : '';
+    if (m) return m;
+  }
+  return '';
+}
+
+/**
+ * The header of task `key`. `onSearch(query, nth)` is called when the reader
+ * picks one of its web searches (the nth with that query).
+ */
+export function taskHeader(c: TaskContext, key: string, onSearch: (query: string, nth: number) => void): TemplateResult {
+  const d = c.detail;
+  const live = c.live;
+  const { rows, launches } = d;
+  const py = isPy(d);
+  const session = hadSession(d);
+  const byTs = rows.slice().sort((a, b) => String(a.ts).localeCompare(String(b.ts)));
+  const lastRow = byTs[byTs.length - 1];
+  const lc0 = launches[0];
+  const who: Who = {
+    agent: agentLabel(lc0?.cmd ? lc0.cmd.split(' ')[0] : lastRow?.agent),
+    // The journal may not name the model (an agent that does not report it): fall back to the one the transcript shows.
+    model: lc0?.model || lastRow?.model || streamModel(c),
+    role: lc0?.role || '',
+  };
+  const otherModels = session ? [...new Set(byTs.map((r) => r.model).filter((x): x is string => !!x && x !== who.model))] : [];
+  const first = rows[0];
+  const tries = rows.filter(isLaunched);
+  const extras = Object.entries(d).filter(([k]) => !SHOWN_KEYS.has(k));
+  const [verdictText, tone] = verdict(c);
+  const kindName = py ? msg('Python task') : msg('Agent task');
+  const node = c.plan?.nodes.find((n) => n.key === d.key);
+  return html`<div class="taskmeta">
+      <div class="tm-head">
+        ${executorIcon(py, kindName, `tm-av ${py ? 'py' : ''}`)}
+        <div style="min-width:0">
+          <div class="tm-name" title=${key}>${first ? kindUnit(first) : node ? kindUnit(node) : key.replace(/^python:/, '')} ${live ? pill({ text: msg('running'), tone: 'running' }) : nothing}</div>
+          <div class="verdict" data-tone=${toneAttr(tone)}>${verdictText}</div>
+          ${node?.claims?.length
+            ? html`<div class="meta" title=${locksTip()}>
+                ${locksLabel()} ${node.claims.map((text) => pill({ text }))}
+              </div>`
+            : nothing}
+          ${node?.priority ? html`<div class="meta" title=${priorityTip()}>${priorityText(node.priority)}</div>` : nothing}
+          ${node?.rerun ? html`<div class="meta">${msg(str`Ran again after a resume: ${node.rerun}`)}</div>` : nothing}
+          ${session
+            ? html`<div class="whos">
+                ${tagChips([...whoTags(who), ...identityTags(tries)])}
+                ${otherModels.length
+                  ? html`<span class="meta">${otherModels.length === 1
+                      ? msg(str`Earlier attempts used model ${otherModels[0] ?? ''}`)
+                      : msg(str`Earlier attempts used models ${listText(otherModels)}`)}</span>`
+                  : nothing}
+              </div>`
+            : nothing}
+          ${launches.length
+            ? html`<div class="meta">${launches.length === 1 ? msg('1 agent session running') : msg(str`${launches.length} agent sessions running`)}</div>`
+            : nothing}
+          ${spendLine(spendOf(rows), tries)}
+          ${quotaLine(c, tries)}
+        </div>
+      </div>
+      ${tries.length
+        ? html`<div class="runchips">${attemptNames(tries).map((name, i) => runChip(c, tries[i] as JournalRow, name, session, d.row_extras ?? []))}</div>`
+        : nothing}
+      ${customLine(tries, d.row_extras ?? [])}
+      ${searchFold(tries, onSearch)}
+      ${changesFold(tries)}
+      ${unreadEvents(tries)
+        ? html`<div class="meta unread" title=${msg('Event types this contraagent version does not know (unread_events)')}>
+            <span aria-hidden="true">⚠</span> ${msg(str`Unrecognized events: ${unreadEvents(tries)}`)}
+          </div>`
+        : nothing}
+      ${d.task_detail_error ? html`<div class="meta v-bad">${msg(str`The task_detail callback failed: ${d.task_detail_error ?? ''}`)}</div>` : nothing}
+      ${launches.map(
+        (lc) => html`<details class="launch">
+          <summary>${facts(msg(str`Process ${lc.pid ?? '—'}`), lc.key || '')}</summary>
+          <div class="meta">${facts(msg(str`Plugin ${lc.plugin || msg('none', { id: 'none', desc: 'An empty value' })}`), msg(str`Model ${lc.model || '—'}`), msg(str`Role ${lc.role || msg('none', { id: 'none', desc: 'An empty value' })}`))}</div>
+        </details>`,
+      )}
+      ${extras.map(
+        ([k, v]) => html`<details class="io-fold"><summary>${k}</summary><cae-json-tree .value=${v}></cae-json-tree></details>`,
+      )}
+    </div>`;
+}
+
+/** The identities the task's attempts authenticated as (each hop's, when a model switch changed it). */
+function identityTags(tries: JournalRow[]): TranscriptTag[] {
+  const ids = [...new Set(tries.flatMap((r) => [...(r.hops ?? []).map((h) => h.credential), r.credential]).filter((x): x is string => !!x))];
+  if (!ids.length) return [];
+  const tip = [msg('Account or API key the coding agent used (credential)'), ...ids.map(credentialTip)].filter(Boolean).join('\n');
+  return [{ label: msg('identity'), value: listText(ids.map(credentialLabel)), tip, look: 'quiet' }];
+}
+
+/** The queries of the web searches the task's attempts made, in call order; each opens its card in the transcript. */
+function searchFold(tries: JournalRow[], onSearch: (query: string, nth: number) => void) {
+  const queries = tries.flatMap((r) => r.web_queries ?? []);
+  const seen = new Map<string, number>();
+  return queries.length
+    ? html`<details class="io-fold">
+        <summary>${queries.length === 1 ? msg('1 web search') : msg(str`${queries.length} web searches`)}</summary>
+        <ol class="meta searches">
+          ${queries.map((q) => {
+            const nth = seen.get(q) ?? 0;
+            seen.set(q, nth + 1);
+            return html`<li><button class="qlink jmono" @click=${() => onSearch(q, nth)}>
+              ${q}
+            </button></li>`;
+          })}
+        </ol>
+      </details>`
+    : nothing;
+}
+
+/** The files each attempt changed under the task's `changes` patterns (the attempt named when more than one has them); nothing for a task that declares none. */
+function changesFold(tries: JournalRow[]) {
+  const names = attemptNames(tries);
+  const withChanges = tries.filter((r) => r.changes).length;
+  const files = tries.flatMap((r, i) => {
+    const c = r.changes;
+    if (!c) return [];
+    const at = withChanges > 1 ? (names[i] ?? '') : '';
+    const gone = new Set(c.removed);
+    const kept = new Set(c.kept);
+    const after = (p: string, kind: ChangeKind): ChangeKind => (gone.has(p) ? 'removed' : kept.has(p) ? 'kept' : kind);
+    const of = (paths: string[] | undefined, kind: ChangeKind) => (paths ?? []).map((p) => facts(at, p, changeLabel(after(p, kind))));
+    return [...of(c.created, 'created'), ...of(c.modified, 'modified'), ...of(c.deleted, 'deleted')];
+  });
+  if (!withChanges) return nothing;
+  if (!files.length) return html`<div class="meta">${msg('No changed files')}</div>`;
+  return html`<details class="io-fold">
+    <summary title=${changedFilesTip()}>${changedFiles(files.length)}</summary>
+    <ul class="meta searches jmono">${files.map((f) => html`<li>${f}</li>`)}</ul>
+  </details>`;
+}
+
+/** The latest attempt's custom columns (`row_extras`), name and value; each attempt's are in its chip's tooltip. */
+function customLine(tries: JournalRow[], extras: readonly string[]) {
+  const last = tries[tries.length - 1];
+  const values = last ? customValues(last, extras) : [];
+  if (!values.length) return nothing;
+  const tip = customColumnTip();
+  return html`<div class="whos">${tagChips(values.map(([label, value]) => ({ label, value, tip, look: 'quiet' as const })))}</div>`;
+}
+
+/**
+ * The task's spend over all its attempts: cost, then tokens, then the largest peak
+ * context of its attempts (with its share of the context limit, and its state when
+ * an attempt passed the warning threshold). Nothing when none was reported.
+ */
+function spendLine(s: Spend | null, tries: JournalRow[]) {
+  if (!s) return nothing;
+  const peak = peakTry(tries);
+  const warned = tries.find((r) => r.context_warned);
+  return html`<div class="spend">
+    <b title=${msg('Reported by the coding agent')}>${usd(s.cost)}</b>
+    <span>${msg(str`Tokens: ${tokenCount(s.input)} input, ${tokenCount(s.output)} output, ${tokenCount(s.cache_read)} cache read, ${tokenCount(s.cache_creation)} cache write`)}</span>
+    <span>${s.calls === 1 ? msg('1 API call') : msg(str`${s.calls} API calls`)}</span>
+    ${peak ? html`<span title=${peakContextTip()}>${peakContextLine(peak)}</span>` : nothing}
+    ${warned ? html`<span class="tone-text" data-tone="attention" title=${contextWarnedTip()}>${contextWarnedText(warned)}</span>` : nothing}
+  </div>`;
+}
+
+/** The task's subscription usage: at its first session start, and the next reading the run took after it ended. */
+function quotaLine(c: TaskContext, tries: JournalRow[]) {
+  const readings = runReadings(c.journal.length ? c.journal : tries);
+  const first = tries[0];
+  const last = tries[tries.length - 1];
+  const start = first ? tryQuota(first, readings).start : null;
+  if (!start || !last) return nothing;
+  const next = tryQuota(last, readings).next;
+  // The identity chip names the account; both readings are that account's.
+  return html`<div class="spend quota">
+    <span title=${readingTip(start)}>${msg(str`Usage at session start: ${readingShort(start)}`)}</span>
+    ${next ? html`<span title=${readingTip(next)}>${msg(str`Usage after this task: ${readingShort(next)}`)}</span>` : nothing}
+  </div>`;
+}
+
+/** One finished attempt: how it ended, how long, its cost; the rest (when, corrections, model, model switch) in its tooltip. */
+function runChip(c: TaskContext, r: JournalRow, name: string, session: boolean, extras: readonly string[]) {
+  const look = r.stop === 'partial' ? 'part' : r.ok ? 'ok' : 'bad';
+  const played = !!c.replayMarks && !!r.replayed;
+  const reason = runRelative(r.reason, c.run);
+  const sw = modelSwitch(r.hops, null, r.skipped_hops);
+  const tip = [
+    msg(str`Ended ${localTime(r.ts, true)}`),
+    correctionsOf(r),
+    session && r.model ? msg(str`Model ${r.model}`) : '',
+    sw ? msg(str`Model switch: ${sw}`) : '',
+    peakContextLine(r),
+    r.context_warned ? contextWarnedText(r) : '',
+    reason,
+    r.route || '',
+    played ? replayedTip() : '',
+    ...customValues(r, extras).map(([k, v]) => `${k}: ${v}`),
+  ]
+    .filter(Boolean)
+    .join('\n');
+  const cost = r.cost_usd !== null && r.cost_usd !== undefined ? usd(r.cost_usd) : '';
+  return html`<span class="runchip ${look}" title=${tip}>
+    ${mark(r)} ${facts(name, stopLabel(r.stop, r.reason), fmtDur(r.wall_s), cost, played ? replayedLabel() : '')}
+  </span>`;
+}

package/src/elements/task/index.ts

@@ -0,0 +1,2 @@
+export * from './ca-task-view.js';
+export * from './ca-transcript.js';

package/src/elements/task/inputs.ts

@@ -0,0 +1,46 @@
+// What a task reads, file by file, and the earlier tasks it waits for: the
+// Input tab's arithmetic, apart from its templates. Pure.
+import type { ContractSpec, TaskIO, UpstreamTask } from '@contraagent/api';
+
+/** One file the task reads: its input contract, and the earlier task that writes it (with that task's output contract), if any. */
+export interface InputFile {
+  spec: ContractSpec;
+  from: UpstreamTask | null;
+  /** The earlier task's contract for the same file: whether it was written and passed its checks. */
+  out: ContractSpec | null;
+}
+
+/** One earlier task: how many of its output files this task reads, and the others. */
+export interface EarlierTask {
+  task: UpstreamTask;
+  read: number;
+  /** Its output files this task does not read. */
+  rest: ContractSpec[];
+}
+
+/** An output file that is missing, or did not pass its checks. */
+export const notPassed = (o: ContractSpec): boolean => !o.file.exists || (o.status != null && o.status !== 'valid');
+
+/**
+ * The Input tab of a task: every file it reads (its declared inputs), each with the
+ * earlier task that writes it; then the earlier tasks it waits for, each with the
+ * output files it does not read. An earlier task with an output that is missing or did
+ * not pass comes first.
+ */
+export function inputView(io: Pick<TaskIO, 'inputs' | 'upstream'>): { files: InputFile[]; earlier: EarlierTask[] } {
+  const reads = new Set(io.inputs.map((o) => o.path));
+  const files = io.inputs.map((spec): InputFile => {
+    for (const u of io.upstream) {
+      const out = u.outputs.find((o) => o.path === spec.path);
+      if (out) return { spec, from: u, out };
+    }
+    return { spec, from: null, out: null };
+  });
+  const earlier = io.upstream.map((task): EarlierTask => ({
+    task,
+    read: task.outputs.filter((o) => reads.has(o.path)).length,
+    rest: task.outputs.filter((o) => !reads.has(o.path)),
+  }));
+  const bad = (e: EarlierTask) => Number(e.task.outputs.some(notPassed));
+  return { files, earlier: [...earlier].sort((a, b) => bad(b) - bad(a)) };
+}

package/src/elements/task/panes/definition.ts

@@ -0,0 +1,7 @@
+// The definition pane of `ca-task-view`: the task's kind, as `ca-definition` shows it.
+import { html, type TemplateResult } from 'lit';
+import '../../shared/ca-definition.js';
+import type { TaskContext } from '../context.js';
+
+export const definitionPane = (c: TaskContext): TemplateResult =>
+  html`<ca-definition .definition=${c.detail.definition ?? null} memory="task-definition"></ca-definition>`;

package/src/elements/task/panes/io.ts

@@ -0,0 +1,190 @@
+// The input and output panes of `ca-task-view`: what the task read (parameters,
+// files, earlier tasks, the prompt) and what it wrote (files against their
+// contracts, the outcome, tokens and cost, later tasks).
+import { isLaunched, isPython, runReadings, runStarts, tryQuota, type JournalRow, type Outcome, type SourcedReading } from '@contraagent/api';
+import { msg, str } from '@lit/localize';
+import { html, nothing, type TemplateResult } from 'lit';
+import { pill } from '@contraagent/elements/primitives';
+import '@contraagent/elements/json-tree/define';
+import { facts, fmtDur, kindUnit, tokenCount, usd } from '../../../words/format.js';
+import { attemptLabel, attemptNames, credentialLabel, credentialTip, outcomeLabel, stopLabel } from '../../../words/index.js';
+import { accountReading, readingShort, readingTip } from '../../../words/quota.js';
+import { outcomeMark, outcomeTone, stopTone } from '../../../lib/tone.js';
+import { executorIcon } from '../../../words/executor.js';
+import { promptText } from '../../shared/prompt-text.js';
+import { contractChip } from '../../shared/contract-parts.js';
+import { ioFileCard } from '../../shared/file-card.js';
+import { taskChip } from '../../shared/task-chip.js';
+import { inputView, notPassed, type EarlierTask, type InputFile } from '../inputs.js';
+import { roundLabel, roundWhy } from '../../../words/rounds.js';
+import { correctionsOf, hadSession, isPy, producerOf, stateOf, taskLink, type TaskContext } from '../context.js';
+
+const valueText = (v: unknown): string => (typeof v === 'string' ? v : JSON.stringify(v) ?? String(v));
+const sameJson = (a: unknown, b: unknown): boolean => {
+  try {
+    return JSON.stringify(a) === JSON.stringify(b);
+  } catch {
+    return false;
+  }
+};
+
+/** A task's outcome as a pill, in its words. */
+const outcomeChip = (o: Outcome) => pill({ text: outcomeLabel(o), tone: outcomeTone(o), mark: outcomeMark(o) });
+
+/** What the task read: its parameters, its input files, the earlier tasks, and (for an agent task) its prompt. */
+export function inputPane(c: TaskContext): TemplateResult {
+  const d = c.detail;
+  const io = d.io;
+  const params = Object.entries(io.params);
+  const { files, earlier } = inputView(io);
+  const source = (v: unknown) => io.upstream.find((u) => u.outputs.some((o) => o.file.exists && sameJson(o.file.content, v)));
+  return html`<h4 class="sect-h">${msg('Parameters')}</h4>
+    ${params.length
+      ? html`<table class="ct-fields params">
+          ${params.map(([k, v]) => {
+            const from = source(v);
+            return html`<tr>
+              <td class="jmono">${k}</td>
+              <td>${v !== null && typeof v === 'object' ? html`<cae-json-tree .value=${v} .open=${0}></cae-json-tree>` : html`<span class="jmono">${valueText(v)}</span>`}</td>
+              <td>${from ? html`<span class="from">${msg(html`From ${taskLink(c, from)}`)}</span>` : nothing}</td>
+            </tr>`;
+          })}
+        </table>`
+      : html`<div class="meta">${msg('No parameters')}</div>`}
+    <h4 class="sect-h">${msg('Input files')}</h4>
+    ${files.length ? files.map((f) => inputCard(c, f)) : html`<div class="meta">${msg('No input files')}</div>`}
+    <h4 class="sect-h">${msg('Earlier tasks')}</h4>
+    ${earlier.length ? earlier.map((e) => earlierTask(c, e)) : html`<div class="meta">${msg('No earlier tasks')}</div>`}
+    ${isPy(d) ? nothing : promptSection(c)}`;
+}
+
+/** One file the task reads: its check, and the earlier task that writes it or that it is from before the run. */
+function inputCard(c: TaskContext, f: InputFile) {
+  const u = f.from;
+  const state = u ? c.outcomes.get(u.key)?.outcome : undefined;
+  const origin = u
+    ? html`<span>${msg(html`Output of ${taskLink(c, u)}`)}</span>${state && state !== 'done' ? outcomeChip(state) : nothing}`
+    : msg('File from before the run');
+  // Written by an earlier task: that task's check of it ("passed", "not written (task failed)").
+  const st = f.out?.status;
+  if (!st) return ioFileCard(f.spec, 'input', c.run, { origin });
+  const chip = contractChip(st);
+  return ioFileCard({ ...f.spec, status: st }, 'input', c.run, { origin, chip });
+}
+
+/** One earlier task: its status, how many of its output files this task reads, and the others folded under it (open when one did not pass). */
+function earlierTask(c: TaskContext, e: EarlierTask) {
+  const u = e.task;
+  const kindName = isPython(u) ? msg('Python task') : msg('Agent task');
+  const state = c.outcomes.get(u.key)?.outcome;
+  const n = u.outputs.length;
+  const summary = !n
+    ? msg('No output files')
+    : facts(n === 1 ? msg('1 output file') : msg(str`${n} output files`), e.read ? (e.read === 1 ? msg('1 read by this task') : msg(str`${e.read} read by this task`)) : '');
+  const head = html`<div class="up-hd">
+    ${executorIcon(isPython(u), kindName)}
+    ${taskLink(c, u)}
+    ${state ? outcomeChip(state) : nothing}
+    <span class="meta">${summary}</span>
+  </div>`;
+  if (!e.rest.length) return html`<div class="upstream">${head}</div>`;
+  const cards = e.rest.map((o) => ioFileCard(o, 'output', c.run, { producerOf: producerOf(c) }));
+  return e.rest.some(notPassed)
+    ? html`<div class="upstream">${head}${cards}</div>`
+    : html`<details class="upstream"><summary>${head}</summary>${cards}</details>`;
+}
+
+/** The prompt of the round chosen in the transcript, or why there is none. */
+function promptSection(c: TaskContext) {
+  const d = c.detail;
+  const n = c.launches.length;
+  const shown = c.shownRound;
+  const info = c.rounds[shown];
+  const tries = c.rounds[c.rounds.length - 1]?.tryNo ?? 1;
+  const ran = d.rows.filter(isLaunched);
+  const names = attemptNames(ran);
+  const starts = runStarts(ran);
+  const prompt = c.launches[shown]?.prompt ?? '';
+  const state = stateOf(c);
+  return html`<h4 class="sect-h">${msg('Prompt')}${n > 1 && info
+      ? html` <span class="meta">${roundLabel(info, tries, names[info.tryNo - 1])}: ${roundWhy(info, starts[info.tryNo - 1] !== starts[info.tryNo - 2])}</span>`
+      : nothing}</h4>
+    ${prompt
+      ? promptText(prompt)
+      : html`<div class="meta">${d.stream
+          ? msg('Loading…')
+          : hadSession(d)
+            ? facts(msg('No prompt'), msg('not saved (keep_transcripts = false)'))
+            : facts(msg('No prompt'), outcomeLabel(state))}</div>`}`;
+}
+
+/** Per attempt that reported any: tokens, API calls, cost and identity; per hop under a model switch. */
+function usageTable(c: TaskContext, rows: JournalRow[]) {
+  const spent = rows.filter((r) => isLaunched(r) && (r.usage || (r.cost_usd !== null && r.cost_usd !== undefined)));
+  if (!spent.length) return nothing;
+  const dash = html`<td class="jdim">—</td>`;
+  const readings: SourcedReading[] = runReadings(c.journal.length ? c.journal : rows);
+  const quota = spent.some((r) => (r.quota ?? []).length);
+  const dashL = html`<td class="l jdim">—</td>`;
+  // The identity column is next to it: name the account only when the reading is another one's.
+  const reading = (q: ReturnType<typeof tryQuota>['start'], cred: string | undefined) =>
+    q ? html`<td class="l" title=${readingTip(q)}>${(q.credential ?? '') === (cred ?? '') ? readingShort(q) : accountReading(q)}</td>` : dashL;
+  return html`<h4 class="sect-h">${msg('Tokens and cost')}</h4>
+    <div class="usage-wrap" data-scroll="x"><table class="usage">
+      <tr>
+        <th class="l"></th><th>${msg('Input')}</th><th>${msg('Output', { id: 'tokens-output', desc: 'Column: output tokens' })}</th><th>${msg('Cache read')}</th><th>${msg('Cache write')}</th>
+        <th>${msg('API calls')}</th><th title=${msg('Reported by the coding agent')}>${msg('Cost')}</th><th class="l">${msg('Identity')}</th>
+        ${quota
+          ? html`<th class="l" title=${msg('Subscription usage when the agent session started (account-wide)')}>${msg('Usage at start')}</th>
+              <th class="l" title=${msg('The first reading of the same account after this attempt ended')}>${msg('Usage after')}</th>`
+          : nothing}
+      </tr>
+      ${spent.map((r) => {
+        const u = r.usage;
+        const hops = r.hops ?? [];
+        return html`<tr>
+            <td class="l">${attemptLabel(r.attempt)}</td>
+            ${u
+              ? html`<td>${tokenCount(u.input)}</td><td>${tokenCount(u.output)}</td><td>${tokenCount(u.cache_read)}</td><td>${tokenCount(u.cache_creation)}</td><td>${u.calls}</td>`
+              : html`${dash}${dash}${dash}${dash}${dash}`}
+            <td>${usd(r.cost_usd)}</td><td class="l" title=${credentialTip(r.credential) || nothing}>${credentialLabel(r.credential) || '—'}</td>
+            ${quota ? html`${reading(tryQuota(r, readings).start, r.credential)}${reading(tryQuota(r, readings).next, r.credential)}` : nothing}
+          </tr>
+          ${hops.length > 1
+            ? hops.map(
+                (h) => html`<tr class="hop">
+                  <td class="l">${facts(h.model || h.route || '—', stopLabel(h.stop))}</td>
+                  <td></td><td></td><td></td><td></td><td></td>
+                  <td>${usd(h.cost_usd)}</td><td class="l" title=${credentialTip(h.credential) || nothing}>${credentialLabel(h.credential) || '—'}</td>
+                  ${quota ? html`<td></td><td></td>` : nothing}
+                </tr>`,
+              )
+            : nothing}`;
+      })}
+    </table></div>`;
+}
+
+/** What the task wrote: its output files, its outcome, tokens and cost, and the later tasks. */
+export function outputPane(c: TaskContext): TemplateResult {
+  const d = c.detail;
+  const io = d.io;
+  const last = d.rows[d.rows.length - 1];
+  // The reason, a refusal's cause and a model switch are in the verdict above, so they are not repeated here.
+  return html`<h4 class="sect-h">${msg('Output files')}</h4>
+    ${io.outputs.length
+      ? io.outputs.map((o) => ioFileCard(o, 'output', c.run, { producerOf: producerOf(c) }))
+      : html`<div class="meta">${msg('No output files')}</div>`}
+    ${last
+      ? html`<h4 class="sect-h">${msg('Outcome')}</h4>
+          <div class="ct-in">
+            ${pill({ text: stopLabel(last.stop, last.reason), tone: stopTone(last.stop) })}
+            ${isLaunched(last) ? html`<span class="meta">${facts(attemptLabel(last.attempt), fmtDur(last.wall_s), correctionsOf(last))}</span>` : nothing}
+
+          </div>`
+      : nothing}
+    ${usageTable(c, d.rows)}
+    <h4 class="sect-h">${msg('Later tasks')}</h4>
+    ${io.downstream.length
+      ? html`<div class="down">${io.downstream.map((x) => taskChip(c.host, kindUnit(x), x))}</div>`
+      : html`<div class="meta">${msg('No later tasks')}</div>`}`;
+}