@contraagent/ui 0.6.2 → 0.7.1

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

@@ -1,6 +1,6 @@
-import type { JournalRow, Plan } from '@contraagent/api';
+import type { Forecast, JournalRow, Plan } from '@contraagent/api';
 import '@contraagent/elements/graph/define';
-import { NARROW, arrange, extentOf, type CaeLayeredGraph, type GraphInput, type GraphOrder } from '@contraagent/elements/graph';
+import { NARROW, arrange, extentOf, type CaeLayeredGraph, type EdgeStyle, type GraphInput, type GraphOrder, type LitMarks } from '@contraagent/elements/graph';
 import type { MarkMatrixInput } from '@contraagent/elements/matrix';
 import type { StateStyles } from '@contraagent/elements/primitives';
 import { localized, msg } from '@lit/localize';
@@ -12,16 +12,16 @@ import { related, taskLinks, type TaskLinks } from '../../adapters/graph/highlig
 import { graphInput, matrixFromPlan } from '../../adapters/graph/input.js';
 import { autoLayer, parentLayer, resolveLayer, splitLayer } from '../../adapters/graph/layer.js';
 import type { MatrixSort, PassMatrix } from '../../adapters/graph/matrix.js';
-import { arranged, project, type Projection } from '../../adapters/graph/project.js';
+import { arranged, edgeStyle, project, type Projection } from '../../adapters/graph/project.js';
 import { markSel, parseSelection } from '../../adapters/graph/selection.js';
-import type { LayerGraph, LayerMark } from '../../adapters/graph/types.js';
+import { EDGE_TYPES, type LayerGraph, type LayerMark } from '../../adapters/graph/types.js';
 import { taskStateStyles } from '../../adapters/graph/words.js';
 import { emit } from '../../core/events.js';
 import { getLocale } from '../../core/i18n.js';
 import { flushMemory, RememberedSet } from '../../core/memory.js';
 import { executorIcon } from '../../words/executor.js';
 import { go, leavePasses, open, primary, select, tasksOf } from './pipeline-graph/actions.js';
-import { crumbs, missingLine, openControls, type OpenMode } from './pipeline-graph/crumbs.js';
+import { crumbs, forecastNote, missingLine, openControls, unawaitedLine, type OpenMode } from './pipeline-graph/crumbs.js';
 import type { PipelineHost } from './pipeline-graph/host.js';
 import { inspector } from './pipeline-graph/inspector.js';
 import { outline, outlineTree, type OutlineHost, type OutlineItem } from './pipeline-graph/outline.js';
@@ -115,6 +115,7 @@ export class CaPipelineGraph extends LitElement {
   static override styles = graphStyles;
   static override properties = {
     plan: { attribute: false },
+    forecast: { attribute: false },
     journal: { attribute: false },
     run: {},
     live: { type: Boolean },
@@ -130,6 +131,8 @@ export class CaPipelineGraph extends LitElement {
   };
 
   plan: Plan = { nodes: [], groups: [] };
+  /** The run's forecast (`Forecast`): a kind node shows the tasks it is expected to have beyond its own; null for none. */
+  forecast: Forecast | null = null;
   /** The finished attempts: they tell why a task did not start. */
   journal: JournalRow[] = [];
   /** The run id: paths in a cause are shown relative to it. */
@@ -195,7 +198,7 @@ export class CaPipelineGraph extends LitElement {
   private wide = true;
   private readonly oh: OutlineHost = this.outlineHost();
   /** What a hovered or selected mark lights, for this layer. */
-  private lights: (key: string) => ReadonlySet<string> = () => new Set();
+  private lights: (key: string) => LitMarks = () => new Set();
   /** After this update, the focus goes into the new layer: on the item it came from (`cameFrom`), else the first. */
   private refocus = false;
   private cameFrom = '';
@@ -265,7 +268,7 @@ export class CaPipelineGraph extends LitElement {
       this.prevOrder = this.orders.get(path.join('/'));
     }
     const locale = getLocale();
-    const words = structure || changed.has('journal') || changed.has('live') || locale !== this.locale;
+    const words = structure || changed.has('journal') || changed.has('live') || changed.has('forecast') || locale !== this.locale;
     if (words || changed.has('sort')) this.build(words, locale);
   }
 
@@ -275,7 +278,7 @@ export class CaPipelineGraph extends LitElement {
     if (!model) return;
     const proj = this.proj;
     const { path, loop } = splitLayer(this.segments);
-    const x = { plan: this.plan, journal: this.journal, run: this.run, live: this.live, links: this.links };
+    const x = { plan: this.plan, journal: this.journal, run: this.run, live: this.live, links: this.links, forecast: this.forecast };
     if (words) {
       this.locale = locale;
       this.states = taskStateStyles(this.live);
@@ -429,12 +432,17 @@ export class CaPipelineGraph extends LitElement {
     if (!this.plan.nodes.length) {
       return html`<div class="blank" style="padding:24px">${this.live ? msg('No tasks scheduled yet') : msg('No tasks scheduled')}</div>`;
     }
-    const graph = this.renderGraph();
-    if (!this.tree.length) return graph;
     // The outline: a column beside the graph, or, on a narrow frame, a part above it that opens.
-    return this.wide
-      ? html`<div class="whole">${outline(this.oh, this.tree)}<div class="g">${graph}</div></div>`
-      : html`<details class="odet"><summary>${msg('Outline of the flow')}</summary>${outline(this.oh, this.tree)}</details>${graph}`;
+    // The graph keeps its place in one template whichever it is, and whether there is an
+    // outline: a change between them (the first size report, a resize, a plan that gains a
+    // function) keeps the graph's element, and with it the focus, the zoom and the pan.
+    const side = this.wide && this.tree.length > 0;
+    const part = !this.tree.length
+      ? nothing
+      : side
+        ? outline(this.oh, this.tree)
+        : html`<details class="odet"><summary>${msg('Outline of the flow')}</summary>${outline(this.oh, this.tree)}</details>`;
+    return html`<div class="whole ${side ? 'side' : ''}">${part}<div class="g">${this.renderGraph()}</div></div>`;
   }
 
   private renderGraph() {
@@ -446,7 +454,7 @@ export class CaPipelineGraph extends LitElement {
         .renderIcon=${renderIcon} .iconStyles=${iconStyles}
         @cae-select=${this.onSelect} @cae-activate=${this.onActivate} @cae-drill=${this.onDrill} @cae-view-change=${this.onView} @cae-toggle=${this.onToggle}
         @cae-sort=${(e: CustomEvent<{ id: string }>) => (this.sort = e.detail.id as MatrixSort)}>
-      <div slot="crumbs">${crumbs(this.h, splitLayer(this.segments).loop ? null : openControls(this.openMode(), (m) => this.setMode(m)))}${missingLine(this.missing)}</div>
+      <div slot="crumbs">${crumbs(this.h, splitLayer(this.segments).loop ? null : openControls(this.openMode(), (m) => this.setMode(m)))}${missingLine(this.missing)}${this.segments.join('/') === this.auto.join('/') ? html`${forecastNote(this.plan, this.forecast)}${unawaitedLine(this.h)}` : nothing}</div>
       ${s ? inspector(this.h, s) : nothing}
     </cae-layered-graph>`;
   }
@@ -582,19 +590,27 @@ const renderIcon = (name: string) => executorIcon(name === 'python');
 
 /**
  * What a hovered or selected mark lights in a layer: for a unit (or the key of a mark
- * without one), the marks of the tasks joined to its tasks upstream or downstream.
+ * without one), the marks of the tasks joined to its tasks upstream or downstream, each
+ * with the style of the edge of its link (a mark of several tasks, the strongest), none
+ * for a mark of the unit's own tasks.
  */
-function lightsOf(plan: Plan, links: TaskLinks, g: LayerGraph): (key: string) => ReadonlySet<string> {
+function lightsOf(plan: Plan, links: TaskLinks, g: LayerGraph): (key: string) => LitMarks {
   const marks: [string, LayerMark][] = g.nodes.flatMap((n) =>
     [...n.units, ...n.single].filter((m): m is LayerMark => m !== null).map((m): [string, LayerMark] => [markSel(n.id, m), m]),
   );
   const keyOf = new Map(marks.map(([id, m]) => [id, m.key]));
-  const memo = new Map<string, ReadonlySet<string>>();
+  const memo = new Map<string, LitMarks>();
   return (key) => {
     const had = memo.get(key);
     if (had) return had;
     const on = related(plan.nodes, links, keyOf.get(key) ?? key);
-    const lit = new Set(marks.filter(([, m]) => m.keys.some((k) => on.has(k))).map(([id]) => id));
+    const lit = new Map<string, EdgeStyle | null>();
+    for (const [id, m] of marks) {
+      const types = m.keys.filter((k) => on.has(k)).map((k) => on.get(k) ?? null);
+      if (!types.length) continue;
+      const strongest = EDGE_TYPES.find((t) => types.includes(t));
+      lit.set(id, types.includes(null) || !strongest ? null : edgeStyle(strongest));
+    }
     memo.set(key, lit);
     return lit;
   };

package/src/elements/overview/pipeline-graph/crumbs.ts

@@ -1,11 +1,17 @@
 // The line above the frame: where the layer is, the pinned unit, and a layer the run does not have.
+import type { Forecast, Plan } from '@contraagent/api';
 import { msg, str } from '@lit/localize';
+import { forecastShown, notInPlan } from '../../../adapters/forecast.js';
+import { forecastLine, forecastTip, notInPlanLine } from '../../../words/forecast.js';
 import { html, nothing, type TemplateResult } from 'lit';
 import { shortName } from '../../../adapters/graph/flow-index.js';
 import { splitLayer } from '../../../adapters/graph/layer.js';
 import { LOOP_SEGMENT } from '../../../adapters/graph/types.js';
 import { where } from '../../../adapters/graph/words.js';
 import { emit } from '../../../core/events.js';
+import { kindUnit } from '../../../words/format.js';
+import { unawaitedCount, unawaitedTip } from '../../../words/flow-calls.js';
+import { taskChip } from '../../shared/task-chip.js';
 import { go } from './actions.js';
 import type { PipelineHost } from './host.js';
 
@@ -73,3 +79,25 @@ export function missingLine(missing: string) {
   const name = segs[segs.length - 1] || missing;
   return html`<div class="missing" role="status" title=${missing}>${msg(html`No layer <code>${name}</code> in this run`)}</div>`;
 }
+
+/** The tasks a top flow call created that no flow awaited (`FlowCallNode.unawaited`): a count and their names, each a chip that opens it. */
+export function unawaitedLine(h: PipelineHost) {
+  const keys = [...new Set((h.plan.flow_calls ?? []).filter((f) => f.parent === null).flatMap((f) => f.unawaited ?? []))];
+  if (!keys.length) return nothing;
+  return html`<div class="unawaited" title=${unawaitedTip()}>
+    <span class="meta">${unawaitedCount(keys.length)}</span>
+    ${keys.map((k) => {
+      const n = h.links.byKey.get(k);
+      return taskChip(h.el, n ? kindUnit(n) : k, n ?? { key: k });
+    })}
+  </div>`;
+}
+
+/** The forecast, when it expects tasks this run has not created: their count, time and cost, and the kinds not in the plan yet. */
+export function forecastNote(plan: Plan, forecast: Forecast | null) {
+  if (!forecastShown(forecast)) return nothing;
+  const missing = notInPlanLine(notInPlan(forecast, plan));
+  return html`<div class="forecast" title=${forecastTip(forecast)}><span class="expected-mark" aria-hidden="true"></span>${forecastLine(forecast)}${missing
+    ? html`<span class="sep" aria-hidden="true"> | </span>${missing}`
+    : nothing}</div>`;
+}

package/src/elements/overview/pipeline-graph/inspector.ts

@@ -12,6 +12,8 @@ import { doneOf, exceptions, executorWord, neighbours, notDone, stateWord, taskS
 import { executorIcon } from '../../../words/executor.js';
 import { fmtDur, kindUnit, listText, usd } from '../../../words/format.js';
 import { deadlineAtText, passCount, passLabel, passSpread, passesRan, timeBoxFacts, timeBoxTip } from '../../../words/index.js';
+import { stoppedAt, stoppedHere } from '../../../words/flow-calls.js';
+import { taskChip } from '../../shared/task-chip.js';
 import { primary, select, tasksOf } from './actions.js';
 import type { PipelineHost } from './host.js';
 
@@ -39,7 +41,8 @@ function inspect(h: PipelineHost, s: Selected) {
   if (s.type === 'node') {
     const n = s.node;
     const c = n.counts;
-    const { waits, after, feeds } = neighbours(n, h.graph);
+    const { given, order, created, feeds } = neighbours(n, h.graph);
+    const earlier = edgeRows(row, list, given, order, created);
     const states = exceptions(n, h.live).map(([cls, t]) => html`<div class=${cls}>${t}</div>`);
     if (n.type === 'flow') {
       return html`<h4 title=${n.name}>${innerIcon()}${n.label}</h4>
@@ -48,8 +51,7 @@ function inspect(h: PipelineHost, s: Selected) {
           ${row(msg('Flow calls'), n.calls)}
           ${n.timeBox ? row(msg('Deadline'), html`<span title=${timeBoxTip()}>${timeBoxFacts(n.timeBox)}</span>`) : nothing}
           ${row(msg('Tasks', { id: 'tasks', desc: 'A count of tasks' }), html`${doneOf(c)}${states}`)}
-          ${row(msg('Waits for'), list(waits))}
-          ${after.length ? row(msg('Created after'), list(after)) : nothing}
+          ${earlier}
           ${row(msg('Later tasks'), list(feeds))}
         </dl>
         <div class="acts">${link(msg(str`Inside ${n.label}`), () => primary(h, s), true)}${clear}</div>`;
@@ -59,8 +61,7 @@ function inspect(h: PipelineHost, s: Selected) {
       <dl>
         ${n.kinds.length > 1 ? row(msg('Kinds'), listText(n.kinds)) : nothing}
         ${row(msg('Tasks', { id: 'tasks', desc: 'A count of tasks' }), html`${doneOf(c)}${states}`)}
-        ${row(msg('Waits for'), list(waits))}
-        ${after.length ? row(msg('Created after'), list(after)) : nothing}
+        ${earlier}
         ${row(msg('Later tasks'), list(feeds))}
       </dl>
       <div class="acts">${link(msg(str`Tasks of ${n.label}`), () => primary(h, s), true)}${clear}</div>`;
@@ -82,6 +83,7 @@ function inspect(h: PipelineHost, s: Selected) {
         ${m.deadlineAt ? row(msg('Deadline'), html`<span title=${timeBoxTip()}>${deadlineAtText(m.deadlineAt)}</span>`) : nothing}
         ${c ? row(msg('Tasks', { id: 'tasks', desc: 'A count of tasks' }), html`${doneOf(c)}${notDone(c, h.live).map((t) => html`<div>${t}</div>`)}`) : nothing}
         ${m.error !== undefined ? row(msg('Error'), html`<span class="err">${m.error || msg('Flow call stopped with an error')}</span>`) : nothing}
+        ${stopRow(h, row, m.key)}
       </dl>
       <div class="acts">${link(msg(str`Inside ${shortName(m.flow)}`), () => primary(h, s), true)}${clear}</div>`;
   }
@@ -97,8 +99,46 @@ function inspect(h: PipelineHost, s: Selected) {
       ${row(msg('Attempts'), ran.length || msg('none', { id: 'none', desc: 'An empty value' }))}
       ${row(msg('Time'), ran.length ? fmtDur(wall) : msg('none', { id: 'none', desc: 'An empty value' }))}
       ${row(msg('Cost'), costs.length ? usd(costs.reduce((a, x) => a + x, 0)) : '—')}
+      ${task ? stoppedRow(h, row, task.key) : nothing}
     </dl>
     <div class="acts">${link(msg('Task detail'), () => primary(h, s), true)}${node.kinds.length === 1
         ? link(msg(str`Tasks of ${node.label}`), () => tasksOf(h, node))
         : nothing}${clear}</div>`;
 }
+
+/**
+ * The nodes a node comes after, one row per lineage it has: given their output, run after
+ * them (order only), created after their results; "Given output of: none" when it has none.
+ */
+function edgeRows(
+  row: (dt: string, dd: unknown) => unknown,
+  list: (xs: string[]) => string,
+  given: string[],
+  order: string[],
+  created: string[],
+) {
+  const none = !given.length && !order.length && !created.length;
+  return html`${given.length || none ? row(msg('Given output of'), list(given)) : nothing}
+    ${order.length ? row(msg('Runs after'), list(order)) : nothing}
+    ${created.length ? row(msg('Created after'), list(created)) : nothing}`;
+}
+
+/** A flow call's mark that raised: where it stopped and the failed task it stopped for, which opens. */
+function stopRow(h: PipelineHost, row: (dt: string, dd: unknown) => unknown, id: string) {
+  const call = h.plan.flow_calls?.find((f) => f.id === id);
+  if (!call || call.state !== 'raised') return nothing;
+  const by = call.raised_by ? h.links.byKey.get(call.raised_by) : undefined;
+  const name = by ? kindUnit(by) : (call.raised_by ?? '');
+  const text = stoppedHere(call, name, h.run);
+  if (!text) return nothing;
+  return row(msg('Stopped', { id: 'flow-call-stopped', desc: 'Where a flow call stopped, and the failure that stopped it' }), html`<div>${text}</div>${call.raised_by
+    ? html`<div class="down">${taskChip(h.el, name, by ?? { key: call.raised_by })}</div>`
+    : nothing}`);
+}
+
+/** A task's mark whose failure stopped flow calls (`raised_by`): each, with where it stopped. */
+function stoppedRow(h: PipelineHost, row: (dt: string, dd: unknown) => unknown, key: string) {
+  const calls = (h.plan.flow_calls ?? []).filter((f) => f.raised_by === key);
+  if (!calls.length) return nothing;
+  return row(msg('Stopped', { id: 'flow-call-stopped', desc: 'Where a flow call stopped, and the failure that stopped it' }), calls.map((f) => html`<div>${stoppedAt(f, h.run)}</div>`));
+}

package/src/elements/overview/pipeline-graph/outline.ts

@@ -32,7 +32,7 @@ export interface OutlineItem {
   parts: { id: string; layer: string[]; name: string }[];
 }
 
-const ZERO = (): NodeCounts => ({ total: 0, done: 0, partial: 0, failed: 0, running: 0, pending: 0, skipped: 0, blocked: 0 });
+const ZERO = (): NodeCounts => ({ total: 0, done: 0, partial: 0, failed: 0, running: 0, pending: 0, skipped: 0, blocked: 0, cancelled: 0 });
 
 /** The outline of the flow: the places of `stats` (from the top of the flow) as a tree, a loop an item around the places in it. */
 export function outlineTree(stats: ReadonlyMap<string, PlaceStats>): OutlineItem[] {

package/src/elements/overview/pipeline-graph/strings.ts

@@ -3,6 +3,7 @@ import type { LayeredGraphStrings } from '@contraagent/elements/graph';
 import type { MarkMatrixStrings } from '@contraagent/elements/matrix';
 import { msg, str } from '@lit/localize';
 import { listText } from '../../../words/format.js';
+import { lineageWord } from '../../../words/lineage.js';
 
 /**
  * Every word of the graph (`up`: Escape's hint without a selection, '' at the top;
@@ -29,8 +30,9 @@ export function graphStrings(up: boolean, functions: boolean): Omit<LayeredGraph
     stubTip: msg('Outside this layer'),
     more: (n) => msg(str`+${n}`),
     badge: msg('number of passes'),
-    solidEdge: msg('waits for output'),
-    dashedEdge: msg('created after result'),
+    solidEdge: lineageWord('given_from'),
+    dottedEdge: lineageWord('after'),
+    dashedEdge: lineageWord('created_from'),
     cycle: msg('next pass'),
     drill: msg('has a level below'),
     open: msg('Show inside'),
@@ -38,7 +40,8 @@ export function graphStrings(up: boolean, functions: boolean): Omit<LayeredGraph
     iconNames: { agent: msg('agent task'), python: msg('Python task') },
     nameHeader: functions ? msg('Kind or function') : msg('Kind'),
     statusHeader: msg('Status', { id: 'status', desc: 'The status of a task: done, failed, not started' }),
-    solidHeader: msg('Waits for'),
+    solidHeader: msg('Given output of'),
+    dottedHeader: msg('Runs after'),
     dashedHeader: msg('Created after'),
     laterHeader: msg('Later tasks'),
     none: msg('none', { id: 'none', desc: 'An empty value' }),

package/src/elements/overview/pipeline-graph/styles.ts

@@ -54,10 +54,14 @@ export const graphStyles = [
     .switch:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 1px; }
     .switch[aria-pressed='true'] { color: var(--text); background: var(--accent-bg); border-color: var(--accent); }
     .opens { display: inline-flex; gap: 6px; margin-left: auto; }
+    .forecast { font-size: 12px; color: var(--text-muted); margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
+    .forecast .expected-mark { display: inline-block; width: 18px; height: 10px; border: 1.5px dotted var(--line2); border-radius: 999px; margin-right: 4px; }
+    .unawaited { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
+    .card .down { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
 
     /* The outline: a column beside the graph, or a part above it on a narrow frame. */
-    .whole { display: grid; grid-template-columns: minmax(200px, 282px) minmax(0, 1fr); gap: 14px; align-items: start; }
-    .whole > .g { min-width: 0; }
+    .whole, .whole > .g { display: flex; flex-direction: column; flex: auto; min-height: 0; min-width: 0; }
+    .whole.side { display: grid; grid-template-columns: minmax(200px, 282px) minmax(0, 1fr); gap: 14px; align-items: start; }
     .outline { font-size: 12px; max-height: 70vh; overflow: auto; padding: 2px 6px 2px 0; border-right: 1px solid var(--line); }
     .otree, .otree ul { list-style: none; margin: 0; padding: 0; }
     .otree ul { padding-left: 10px; }

package/src/elements/shell/ca-monitor.ts

@@ -374,6 +374,15 @@ export class CaMonitor extends LitElement {
       else this.mainScroll.restore();
       this.pendingScroll = null;
     }
+    if (this.snap && this.viewRoute) this.mainScroll.update(this.complete());
+  }
+
+  /** Whether all of what the place shows has arrived: the run's replay, the trends asked for, the hosts. */
+  private complete(): boolean {
+    const { snap, viewRoute } = this;
+    if (viewRoute.page === 'hosts') return snap.hosts !== null;
+    if (viewRoute.page === 'trends') return !!snap.trends?.data && !snap.trends.loading;
+    return snap.run === viewRoute.run && snap.state.ready;
   }
 
   /** Move the line under the selected tab when the tab bar changes size. */

package/src/elements/shell/ca-run-picker.ts

@@ -231,6 +231,7 @@ export class CaRunPicker extends LitElement {
     if (t.not_started) parts.push(stateCount('not_started', t.not_started));
     if (t.partial) parts.push(stateCount('partial', t.partial));
     if (t.skipped) parts.push(stateCount('skipped', t.skipped));
+    if (t.cancelled) parts.push(stateCount('cancelled', t.cancelled));
     if (t.running) parts.push(stateCount('running', t.running));
     if (t.waiting) parts.push(stateCount('waiting', t.waiting));
     if (t.not_run) parts.push(stateCount('not_run', t.not_run));

package/src/elements/task/ca-task-view.ts

@@ -1,4 +1,4 @@
-import { deriveRun, type JournalRow, type LaunchEvent, type MonitorClient, type Plan, type TaskDetail, type TaskOutcome } from '@contraagent/api';
+import { deriveRun, type JournalRow, type LaunchEvent, type MonitorClient, type Plan, type TaskDetail, type TaskOutcome, type UpstreamTask } from '@contraagent/api';
 import { localized, msg } from '@lit/localize';
 import { LitElement, html, nothing, type PropertyValues } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
@@ -129,7 +129,9 @@ export class CaTaskView extends LitElement {
     const io = d.io;
     const py = isPy(d) && !d.stream;
     const n: Partial<Record<TaskView, number>> = {
-      input: new Set([...io.inputs.map((o) => o.path), ...io.upstream.flatMap((u) => u.outputs.map((o) => o.path))]).size + Object.keys(io.params).length,
+      input:
+        new Set([...io.inputs.map((o) => o.path), ...(io.input_files ?? []).map((f) => f.path), ...io.upstream.filter(readsFrom).flatMap((u) => u.outputs.map((o) => o.path))]).size +
+        Object.keys(io.params).length,
       output: io.outputs.length,
     };
     return html`<div class="tviews" role="tablist">
@@ -155,3 +157,6 @@ declare global {
     'ca-task-view': CaTaskView;
   }
 }
+
+/** An earlier task this one reads from or waits for (not one it was only created after); every one of an export written before lineage. */
+const readsFrom = (u: UpstreamTask): boolean => !u.lineage?.length || u.lineage.some((l) => l !== 'created_from');

package/src/elements/task/header.ts

@@ -5,12 +5,14 @@ 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 { facts, fmtDur, kindUnit, listText, localTime, tokenCount, unreadEvents, usageUnknown, usageUnknownWords, 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 { safetyStopCount, safetyStopLine, safetyStopTip } from '../../words/safety.js';
 import { customColumnTip, customValues } from '../../words/row-extras.js';
+import { divergenceTip, divergenceWord, rerunLine, rerunOf } from '../../words/rerun.js';
+import { stoppedAt } from '../../words/flow-calls.js';
 import { isStop, type Tone } from '../../lib/tone.js';
 import { executorIcon } from '../../words/executor.js';
 import '@contraagent/elements/json-tree/define';
@@ -120,6 +122,7 @@ export function taskHeader(c: TaskContext, key: string, onSearch: (query: string
   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 unknownUsage = usageUnknownWords(usageUnknown(tries));
   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');
@@ -136,7 +139,8 @@ export function taskHeader(c: TaskContext, key: string, onSearch: (query: string
               </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}
+          ${rerunMeta(rows, node?.rerun)}
+          ${stoppedFlowCalls(c)}
           ${session
             ? html`<div class="whos">
                 ${tagChips([...whoTags(who), ...identityTags(tries)])}
@@ -166,6 +170,9 @@ export function taskHeader(c: TaskContext, key: string, onSearch: (query: string
             <span aria-hidden="true">⚠</span> ${msg(str`Unrecognized events: ${unreadEvents(tries)}`)}
           </div>`
         : nothing}
+      ${unknownUsage
+        ? html`<div class="meta unread" title=${unknownUsage.tip}><span aria-hidden="true">⚠</span> ${unknownUsage.label}</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">
@@ -286,6 +293,8 @@ function quotaLine(c: TaskContext, tries: JournalRow[]) {
 /** One finished attempt: how it ended, how long, its cost, its safety stops; 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 rows = c.detail.rows;
+  const rerun = rerunOf(rows, rows.indexOf(r));
   const played = !!c.replayMarks && !!r.replayed;
   const reason = runRelative(r.reason, c.run);
   const sw = modelSwitch(r.hops, null, r.skipped_hops);
@@ -300,12 +309,34 @@ function runChip(c: TaskContext, r: JournalRow, name: string, session: boolean,
     reason,
     r.route || '',
     played ? replayedTip() : '',
+    rerun ? rerunLine(rerun) : '',
     ...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, safety, played ? replayedLabel() : '')}
+    ${mark(r)} ${facts(name, stopLabel(r.stop, r.reason), fmtDur(r.wall_s), cost, safety, played ? replayedLabel() : '', rerun?.divergence ? divergenceWord() : '')}
   </span>`;
 }
+
+/**
+ * Why a resume ran the task again, from its latest journal row with a `rerun`: the parts
+ * of its fingerprint that changed, and a divergence; the plan's `rerun` before its row
+ * arrives. The recorded reason is the tooltip.
+ */
+function rerunMeta(rows: readonly JournalRow[], planned: string | undefined) {
+  const i = rows.map((r) => !!r.rerun).lastIndexOf(true);
+  const r = i >= 0 ? rerunOf(rows, i) : planned ? { text: planned, changed: [], divergence: planned.startsWith('divergence') } : null;
+  if (!r) return nothing;
+  return html`<div class="meta rerun" title=${r.text}>${rerunLine(r)}${r.divergence
+    ? html` <span class="divergence" title=${divergenceTip()}>${pill({ text: divergenceWord(), tone: 'attention' })}</span>`
+    : nothing}</div>`;
+}
+
+/** The flow calls this task's failure stopped (`FlowCallNode.raised_by`), each with where: "This failure stopped review_loop at flow.py:42". */
+function stoppedFlowCalls(c: TaskContext) {
+  const calls = (c.plan?.flow_calls ?? []).filter((f) => f.raised_by === c.detail.key);
+  if (!calls.length) return nothing;
+  return html`${calls.map((f) => html`<div class="meta stopped" title=${f.error ?? ''}>${stoppedAt(f, c.run)}</div>`)}`;
+}

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

@@ -1,7 +1,20 @@
 // 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 {
+  isLaunched,
+  isPython,
+  runReadings,
+  runRelative,
+  runStarts,
+  tryQuota,
+  type DownstreamTask,
+  type JournalRow,
+  type Lineage,
+  type Outcome,
+  type SourcedReading,
+  type TaskInputFile,
+} from '@contraagent/api';
 import { msg, str } from '@lit/localize';
 import { html, nothing, type TemplateResult } from 'lit';
 import { pill } from '@contraagent/elements/primitives';
@@ -17,6 +30,7 @@ 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 { inputFileCheckWord, lineageTip, lineageWord } from '../../../words/lineage.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));
@@ -31,7 +45,11 @@ const sameJson = (a: unknown, b: unknown): boolean => {
 /** 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. */
+/**
+ * What the task read: its parameters, its input files (`InputFile` params), the files
+ * an input contract checks before it starts, the earlier tasks, and (for an agent task)
+ * its prompt.
+ */
 export function inputPane(c: TaskContext): TemplateResult {
   const d = c.detail;
   const io = d.io;
@@ -52,13 +70,37 @@ export function inputPane(c: TaskContext): TemplateResult {
         </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>`}
+    ${io.input_files?.length ? io.input_files.map((f) => inputFileCard(c, f)) : html`<div class="meta">${msg('No input files')}</div>`}
+    ${files.length
+      ? html`<h4 class="sect-h">${msg('Checked files it reads')}</h4>
+          ${files.map((f) => inputCard(c, f))}`
+      : nothing}
     <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. */
+/**
+ * One input file of the task (an `InputFile` param): its check at the start, its path,
+ * the param that holds it, its hash, and the earlier task whose output file it is.
+ */
+function inputFileCard(c: TaskContext, f: TaskInputFile) {
+  const tone = f.check === 'passed' ? 'done' : f.check === 'refused' ? 'failed' : 'neutral';
+  const mark = f.check === 'passed' ? 'done' : f.check === 'refused' ? 'failed' : 'pending';
+  const writer = f.writer ? (c.detail.io.upstream.find((u) => u.key === f.writer) ?? c.outcomes.get(f.writer)) : undefined;
+  const origin = f.writer
+    ? html`<span>${msg(html`Output of ${taskLink(c, writer ?? { key: f.writer, kind: f.writer, unit: '' })}`)}</span>`
+    : nothing;
+  return html`<div class="io-card one infile">
+    <div class="io-hd">${pill({ text: inputFileCheckWord(f.check), tone, mark })}<span class="jmono ct-path" title=${f.path}>${runRelative(f.path, c.run)}</span></div>
+    <div class="meta io-from"><span title=${f.sha256}>${facts(msg(str`Param ${f.param}`), `sha256 ${f.sha256.slice(0, 12)}`)}</span>${f.writer
+      ? html` | ${origin}`
+      : nothing}</div>
+    ${f.reason ? html`<div class="meta err">${f.reason}</div>` : nothing}
+  </div>`;
+}
+
+/** One file an input contract checks before the task starts: 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;
@@ -72,7 +114,11 @@ function inputCard(c: TaskContext, f: InputFile) {
   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). */
+/**
+ * One earlier task: its status, how this task is joined to it (its lineage, in the words of
+ * the graph's edges), 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');
@@ -85,6 +131,7 @@ function earlierTask(c: TaskContext, e: EarlierTask) {
     ${executorIcon(isPython(u), kindName)}
     ${taskLink(c, u)}
     ${state ? outcomeChip(state) : nothing}
+    ${lineageTags(u.lineage ?? [])}
     <span class="meta">${summary}</span>
   </div>`;
   if (!e.rest.length) return html`<div class="upstream">${head}</div>`;
@@ -184,7 +231,24 @@ export function outputPane(c: TaskContext): TemplateResult {
       : 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>`}`;
+    ${io.downstream.length ? laterTasks(c, io.downstream) : html`<div class="meta">${msg('No later tasks')}</div>`}`;
+}
+
+/** A task's lineage as tags, in the words of the graph's edges, each with the field it comes from as its tooltip. */
+function lineageTags(lineage: readonly Lineage[]) {
+  return lineage.map((l) => html`<span class="lineage" data-lineage=${l} title=${lineageTip(l)}>${lineageWord(l)}</span>`);
+}
+
+/**
+ * The later tasks, a row of chips per lineage (by the strongest each has): given output,
+ * runs after, created after result; one row without a tag for those an export written
+ * before lineage holds.
+ */
+function laterTasks(c: TaskContext, down: readonly DownstreamTask[]) {
+  const order: Lineage[] = ['given_from', 'after', 'created_from'];
+  const first = (x: DownstreamTask): Lineage | null => order.find((l) => (x.lineage ?? []).includes(l)) ?? null;
+  return [...order, null]
+    .map((l) => [l, down.filter((x) => first(x) === l)] as const)
+    .filter(([, xs]) => xs.length)
+    .map(([l, xs]) => html`<div class="down">${l ? lineageTags([l]) : nothing}${xs.map((x) => taskChip(c.host, kindUnit(x), x))}</div>`);
 }

package/src/elements/task/styles.ts

@@ -56,8 +56,12 @@ export const taskViewStyles = css`
   /* A positioned box: what is placed in it (a screen reader's text) scrolls with it, not past the view's end. */
   .pane { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; }
   .upstream { margin-bottom: 12px; }
-  .up-hd { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; }
-  .down { display: flex; flex-wrap: wrap; gap: 8px; }
+  .up-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 2px 0 6px; }
+  .down { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
+  /* How a task is joined to an earlier one, drawn as the graph draws its edge: given output solid, runs after dotted, created after result dashed. */
+  .lineage { font-size: 11px; color: var(--text-2); border: 1.5px solid var(--line2); border-radius: 999px; padding: 0 7px; white-space: nowrap; }
+  .lineage[data-lineage='after'] { border-style: dotted; }
+  .lineage[data-lineage='created_from'] { border-style: dashed; }
   .notrans { flex: 1 1 auto; border: 1px solid var(--line); border-radius: 14px; }
   details.upstream > summary { cursor: pointer; list-style: none; }
   details.upstream > summary::-webkit-details-marker { display: none; }

package/src/lib/tone.ts

@@ -37,6 +37,7 @@ const STOP_TONE: Readonly<Record<Stop, Tone>> = {
   partial: 'attention',
   invalid_input: 'attention',
   skipped: 'muted',
+  cancelled: 'muted',
   timeout: 'failed',
   max_turns: 'failed',
   budget: 'failed',
@@ -81,6 +82,7 @@ export function outcomeTone(o: Outcome): Tone {
       return 'running';
     case 'waiting':
     case 'skipped':
+    case 'cancelled':
       return 'muted';
   }
 }