@contraagent/ui 0.6.2 → 0.7.1

package/src/adapters/graph/compound.ts

@@ -16,8 +16,8 @@
 import { isPython, type FlowCallNode, type Plan } from '@contraagent/api';
 import { cmpPasses, indexOf, loopsAt, passesAt, placeOf, push, shortName, startsWith, type FlowIndex, type FlowTask } from './flow-index.js';
 import { arrange, extentOf } from '@contraagent/elements/graph';
-import { projectTasks, shapeOf, type Projection } from './project.js';
-import type { FlowBox, GraphEdge, GraphNode, GraphStub, LayerModel, LoopBox, NodeCounts } from './types.js';
+import { projectTasks, shapeOf, stronger, type Projection } from './project.js';
+import type { EdgeType, FlowBox, GraphEdge, GraphNode, GraphStub, LayerModel, LoopBox, NodeCounts } from './types.js';
 
 /** Between a function's place and the id of an item drawn inside it. */
 export const IN_SEP = '::';
@@ -95,7 +95,7 @@ export function placeStats(ix: FlowIndex, focus: readonly string[], live = false
       const key = placeKey(layer, p.id);
       let s = out.get(key);
       if (!s) {
-        const counts: NodeCounts = { total: 0, done: 0, partial: 0, failed: 0, running: 0, pending: 0, skipped: 0, blocked: 0 };
+        const counts: NodeCounts = { total: 0, done: 0, partial: 0, failed: 0, running: 0, pending: 0, skipped: 0, blocked: 0, cancelled: 0 };
         const file = d > 0 ? (t.frames[d - 1]?.file ?? '') : '';
         s = { key, layer, id: p.id, name: p.name, depth: d - d0, loops: p.loops, file, counts, tasks: 0, agent: 0, failed: 0, running: 0, stuck: 0, errors: false, kids: new Set(), fns: new Set(), parent };
         out.set(key, s);
@@ -308,17 +308,17 @@ function assemble(ix: FlowIndex, focus: readonly string[], inside: readonly Flow
   };
   const layerAt = (t: FlowTask): string[] => t.path.slice(0, (containerOf.get(t.n.key) as { depth: number }).depth);
   const inOrder = new Set<string>();
-  const pairs = new Map<string, { from: string; to: string; type: 'after' | 'created'; tasks: Set<string>; samePass: boolean }>();
-  const stubs = new Map<string, { id: string; label: string; to: string; type: 'after' | 'created'; tasks: Set<string> }>();
+  const pairs = new Map<string, { from: string; to: string; type: EdgeType; tasks: Set<string>; samePass: boolean }>();
+  const stubs = new Map<string, { id: string; label: string; to: string; type: EdgeType; tasks: Set<string> }>();
   for (const t of inside) {
     const to = drawnOf(t);
-    const link = (dep: string, type: 'after' | 'created') => {
+    const link = (dep: string, type: EdgeType) => {
       const o = ix.byKey.get(dep);
       if (!o) return;
       if (startsWith(o.path, focus)) {
         const from = drawnOf(o);
         if (from === to) {
-          if (type === 'after') inOrder.add(to);
+          if (type !== 'created') inOrder.add(to);
           return;
         }
         // The loops that matter are those of the deepest layer both are drawn in.
@@ -344,15 +344,16 @@ function assemble(ix: FlowIndex, focus: readonly string[], inside: readonly Flow
       const sk = `${s.id}\u0000${to}\u0000${type}`;
       (stubs.get(sk) ?? stubs.set(sk, { ...s, to, type, tasks: new Set() }).get(sk))?.tasks.add(t.n.key);
     };
+    for (const dep of t.n.given_from ?? []) link(dep, 'given');
     for (const dep of t.n.after ?? []) link(dep, 'after');
     for (const dep of t.from) link(dep, 'created');
   }
   for (const n of nodes) n.inOrder = inOrder.has(n.id);
   const edges: GraphEdge[] = [...pairs.values()]
-    .filter((e) => e.type === 'after' || !pairs.has(`${e.from}\u0000${e.to}\u0000after`))
+    .filter((e) => !stronger(e.type).some((x) => pairs.has(`${e.from}\u0000${e.to}\u0000${x}`)))
     .map((e) => ({ from: e.from, to: e.to, tasks: e.tasks.size, type: e.type, samePass: e.samePass, back: false }));
   const stubList: GraphStub[] = [...stubs.values()]
-    .filter((s) => s.type === 'after' || !stubs.has(`${s.id}\u0000${s.to}\u0000after`))
+    .filter((s) => !stronger(s.type).some((x) => stubs.has(`${s.id}\u0000${s.to}\u0000${x}`)))
     .map((s) => ({ id: s.id, label: s.label, to: s.to, tasks: s.tasks.size, type: s.type }));
 
   return { path: [...focus], nodes, boxes, fns: [...fns.values()], edges, stubs: stubList, units };

package/src/adapters/graph/highlight.ts

@@ -1,40 +1,71 @@
 // What a hovered, focused or selected mark highlights: its unit's tasks and every
-// task joined to them.
+// task joined to them, each with how it is joined.
 import type { PlanNode } from '@contraagent/api';
+import { EDGE_TYPES, type EdgeType } from './types.js';
 
-/** The plan's tasks by key, and the tasks that wait for each task. */
+/** One link of a task to an earlier one: the earlier task's key, and how they are joined. */
+interface Link {
+  key: string;
+  type: EdgeType;
+}
+
+/** The plan's tasks by key, and the links of each task to its earlier and to its later tasks. */
 export interface TaskLinks {
   byKey: ReadonlyMap<string, PlanNode>;
-  waiters: ReadonlyMap<string, readonly string[]>;
+  earlier: ReadonlyMap<string, readonly Link[]>;
+  later: ReadonlyMap<string, readonly Link[]>;
 }
 
 export function taskLinks(nodes: readonly PlanNode[]): TaskLinks {
-  const waiters = new Map<string, string[]>();
-  for (const n of nodes) for (const d of n.after ?? []) (waiters.get(d) ?? waiters.set(d, []).get(d))?.push(n.key);
-  return { byKey: new Map(nodes.map((n) => [n.key, n])), waiters };
+  const earlier = new Map<string, Link[]>();
+  const later = new Map<string, Link[]>();
+  for (const n of nodes) {
+    const ls = linksOf(n);
+    earlier.set(n.key, ls);
+    for (const l of ls) (later.get(l.key) ?? later.set(l.key, []).get(l.key))?.push({ key: n.key, type: l.type });
+  }
+  return { byKey: new Map(nodes.map((n) => [n.key, n])), earlier, later };
 }
 
 /**
  * The tasks to highlight for `hl` (a unit, or the key of a task without one): the
- * unit's own, and every task joined to them upstream or downstream (a task without a
- * unit, another unit's).
+ * unit's own (null), and every task joined to them upstream or downstream (a task
+ * without a unit, another unit's), each with the weakest link on the strongest path
+ * that joins it: `given` when outputs alone lead to it, `after` when order does,
+ * `created` when it takes a task created after a result.
  */
-export function related(nodes: readonly PlanNode[], links: TaskLinks, hl: string): Set<string> {
+export function related(nodes: readonly PlanNode[], links: TaskLinks, hl: string): Map<string, EdgeType | null> {
   const seeds = nodes.filter((n) => (n.unit ? n.unit === hl : n.key === hl)).map((n) => n.key);
-  const on = new Set(seeds);
-  const walk = (next: (key: string) => readonly string[]) => {
-    const seen = new Set(seeds);
-    const queue = [...seeds];
-    for (let k = queue.pop(); k !== undefined; k = queue.pop()) {
-      for (const x of next(k)) {
-        if (seen.has(x)) continue;
-        seen.add(x);
-        on.add(x);
-        queue.push(x);
+  const on = new Map<string, EdgeType | null>(seeds.map((k) => [k, null]));
+  // One walk per type, the strongest first, each over the links of that type and the stronger
+  // ones: what a walk reaches first is joined by that type.
+  for (const [i, type] of EDGE_TYPES.entries()) {
+    const allowed = new Set(EDGE_TYPES.slice(0, i + 1));
+    for (const next of [links.earlier, links.later]) {
+      const seen = new Set(seeds);
+      const queue = [...seeds];
+      for (let k = queue.pop(); k !== undefined; k = queue.pop()) {
+        for (const l of next.get(k) ?? []) {
+          if (!allowed.has(l.type) || seen.has(l.key)) continue;
+          seen.add(l.key);
+          if (!on.has(l.key)) on.set(l.key, type);
+          queue.push(l.key);
+        }
       }
     }
-  };
-  walk((k) => links.waiters.get(k) ?? []);
-  walk((k) => links.byKey.get(k)?.after ?? []);
+  }
   return on;
 }
+
+/**
+ * A task's links to the tasks it comes after, each key once by its strongest link: given
+ * their outputs (`given_from`), waiting for them only (`after`), created after their
+ * results (`created_from`).
+ */
+export function linksOf(n: PlanNode): Link[] {
+  const out = new Map<string, EdgeType>();
+  for (const k of n.given_from ?? []) out.set(k, 'given');
+  for (const k of n.after ?? []) if (!out.has(k)) out.set(k, 'after');
+  for (const k of n.created_from ?? []) if (!out.has(k)) out.set(k, 'created');
+  return [...out].map(([key, type]) => ({ key, type }));
+}

package/src/adapters/graph/input.ts

@@ -1,12 +1,14 @@
 // A layer of the run's flow as `<cae-layered-graph>` takes it, and a loop's passes
 // as `<cae-mark-matrix>` takes them: the pipeline graph's words on the generic model.
-import { deriveRun, type JournalRow, type Plan } from '@contraagent/api';
+import { deriveRun, type Forecast, type JournalRow, type Plan } from '@contraagent/api';
 import type { GraphClusterInput, GraphInput, GraphMark, GraphNodeInput, GraphOrder } from '@contraagent/elements/graph';
 import type { MarkMatrixInput, MatrixHeadCell, MatrixMark } from '@contraagent/elements/matrix';
 import type { Fact } from '@contraagent/elements/primitives';
 import { msg, str } from '@lit/localize';
 import { facts, listText } from '../../words/format.js';
 import { loopLabel, notStartedCause, passCount, passLabel, passSpread } from '../../words/index.js';
+import { expectedByNode } from '../forecast.js';
+import { expectedPill } from '../../words/forecast.js';
 import type { TaskLinks } from './highlight.js';
 import { passMatrix, sortRows, type MatrixSort, type PassMatrix } from './matrix.js';
 import { edgeStyle, project, type Projection } from './project.js';
@@ -22,6 +24,8 @@ export interface GraphWordsContext {
   run: string;
   live: boolean;
   links: TaskLinks;
+  /** The run's forecast: a kind node shows the tasks it is expected to have beyond its own. */
+  forecast?: Forecast | null;
 }
 
 /** A note's tone by the class of a node's fact. */
@@ -71,13 +75,17 @@ export function graphInput(m: LayerModel, x: GraphWordsContext, open = false): G
       drill: !!mk.flow,
     };
   };
+  const expected = expectedByNode(x.forecast, m);
   const nodes = m.nodes.map((n): GraphNodeInput => {
     const c = n.counts;
+    const more = expected.get(n.id);
+    const pill = more ? expectedPill(more) : null;
     return {
       id: n.id,
       label: n.label,
       tip: nodeTip(n),
-      summary: nodeLabel(n, m, x.live),
+      summary: pill ? facts(nodeLabel(n, m, x.live), pill.label) : nodeLabel(n, m, x.live),
+      ...(pill ? { expected: pill } : {}),
       cluster: n.box,
       icons: iconsOf(n),
       accent: n.executor === 'agent',

package/src/adapters/graph/plans.fixture.ts

@@ -1,6 +1,6 @@
 // Synthetic plans for the graph's tests, as a run writes them: a task's flow path
-// (outermost first) with the loops around each call site, what its flow call had
-// received when it was created, and its flow call. Test code only: the build leaves
+// (outermost first) with the loops around each call site, the results that reached
+// its flow call just before it was created, and its flow call. Test code only: the build leaves
 // `*.fixture.ts` out.
 import type { FlowCallNode, Frame, Plan, PlanNode } from '@contraagent/api';
 

package/src/adapters/graph/project.ts

@@ -8,7 +8,7 @@
 // The same rule applies at every depth. Nodes whose call sites sit in the same
 // loop of the layer's function are drawn in one loop box, a nested loop's box
 // inside it; each box counts its own loop's passes (`flow[].loops[].pass`). Edges
-// are the tasks' `after` (data) and `created_from` (created after those results),
+// are the tasks' `given_from` (data), `after` (order only) and `created_from` (created after those results),
 // projected onto the layer's nodes; an edge from a task outside the layer is an
 // incoming stub. Inside each node, one mark per unit, in the same unit order
 // everywhere in the layer.
@@ -19,7 +19,7 @@ import { isPython, type FlowCallNode, type Plan, type PlanNode, type TaskState,
 import type { Arrangement, EdgeStyle, GraphShape } from '@contraagent/elements/graph';
 import { boxChain, cmpPasses, indexOf, instanceOf, loopsAt, passesAt, placeOf, push, shortName, startsWith, type FlowIndex, type FlowTask } from './flow-index.js';
 import { worstOf, worstState } from './states.js';
-import { LOOP_SEGMENT, type GraphNode, type LayerGraph, type LayerMark, type LayerModel, type LoopBox, type NodeCounts } from './types.js';
+import { EDGE_TYPES, LOOP_SEGMENT, type EdgeType, type GraphNode, type LayerGraph, type LayerMark, type LayerModel, type LoopBox, type NodeCounts } from './types.js';
 
 /** Who runs a kind node's tasks: a coding agent, Python, or both (`mixed`). */
 function executorOf(ns: readonly PlanNode[]): 'agent' | 'python' | 'mixed' {
@@ -124,7 +124,7 @@ export function deadlineOf(box: TimeBoxRecord): string {
 
 /** Tasks by state. */
 function taskCounts(ts: readonly FlowTask[]): NodeCounts {
-  const c: NodeCounts = { total: ts.length, done: 0, partial: 0, failed: 0, running: 0, pending: 0, skipped: 0, blocked: 0 };
+  const c: NodeCounts = { total: ts.length, done: 0, partial: 0, failed: 0, running: 0, pending: 0, skipped: 0, blocked: 0, cancelled: 0 };
   for (const t of ts) c[t.n.state] += 1;
   return c;
 }
@@ -231,8 +231,8 @@ export function projectTasks(ix: FlowIndex, path: readonly string[], inside: rea
   // Edges, projected onto the layer's nodes; from outside it, stubs. An edge whose
   // every task joins a later pass of a loop around both ends goes back to the next pass.
   const inOrder = new Set<string>();
-  const pairs = new Map<string, { from: string; to: string; type: 'after' | 'created'; tasks: Set<string>; samePass: boolean }>();
-  const stubs = new Map<string, { id: string; label: string; to: string; type: 'after' | 'created'; tasks: Set<string> }>();
+  const pairs = new Map<string, { from: string; to: string; type: EdgeType; tasks: Set<string>; samePass: boolean }>();
+  const stubs = new Map<string, { id: string; label: string; to: string; type: EdgeType; tasks: Set<string> }>();
   const outside = (o: FlowTask): { id: string; label: string } => {
     let c = 0;
     while (c < d && o.path[c] === path[c]) c++;
@@ -241,10 +241,10 @@ export function projectTasks(ix: FlowIndex, path: readonly string[], inside: rea
   };
   for (const t of inside) {
     const to = nodeOfKey.get(t.n.key) as string;
-    const link = (dep: string, type: 'after' | 'created') => {
+    const link = (dep: string, type: EdgeType) => {
       const from = nodeOfKey.get(dep);
       if (from === to) {
-        if (type === 'after') inOrder.add(to);
+        if (type !== 'created') inOrder.add(to);
         return;
       }
       if (from !== undefined) {
@@ -266,18 +266,19 @@ export function projectTasks(ix: FlowIndex, path: readonly string[], inside: rea
       const k = `${s.id}\u0000${to}\u0000${type}`;
       (stubs.get(k) ?? stubs.set(k, { ...s, to, type, tasks: new Set() }).get(k))?.tasks.add(t.n.key);
     };
+    for (const dep of t.n.given_from ?? []) link(dep, 'given');
     for (const dep of t.n.after ?? []) link(dep, 'after');
     for (const dep of t.from) link(dep, 'created');
   }
-  // A created_from edge is drawn only where no after edge joins the same two. In the order
+  // An edge is drawn only where no stronger one joins the same two (`EDGE_TYPES`). In the order
   // of their ends, not of the tasks that made them: the same plan draws the same graph,
   // whichever of its tasks ran first.
   const byEnds = (a: string, b: string): number => (a < b ? -1 : a > b ? 1 : 0);
   const all = [...pairs.values()]
-    .filter((e) => e.type === 'after' || !pairs.has(`${e.from}\u0000${e.to}\u0000after`))
+    .filter((e) => !stronger(e.type).some((x) => pairs.has(`${e.from}\u0000${e.to}\u0000${x}`)))
     .sort((x, y) => byEnds(`${x.from}\u0000${x.to}\u0000${x.type}`, `${y.from}\u0000${y.to}\u0000${y.type}`));
   const stubList = [...stubs.values()]
-    .filter((s) => s.type === 'after' || !stubs.has(`${s.id}\u0000${s.to}\u0000after`))
+    .filter((s) => !stronger(s.type).some((x) => stubs.has(`${s.id}\u0000${s.to}\u0000${x}`)))
     .sort((x, y) => byEnds(`${x.id}\u0000${x.to}\u0000${x.type}`, `${y.id}\u0000${y.to}\u0000${y.type}`));
 
   const boxes: LoopBox[] = [...boxParent.keys()].map((id) => {
@@ -332,8 +333,11 @@ export function projectTasks(ix: FlowIndex, path: readonly string[], inside: rea
   };
 }
 
-/** How an edge of the layer is drawn: an `after` edge solid, a `created` one dashed. */
-export const edgeStyle = (type: 'after' | 'created'): EdgeStyle => (type === 'after' ? 'solid' : 'dashed');
+/** How an edge of the layer is drawn: a `given` edge solid (data), an `after` one dotted (order only), a `created` one dashed. */
+export const edgeStyle = (type: EdgeType): EdgeStyle => (type === 'given' ? 'solid' : type === 'after' ? 'dotted' : 'dashed');
+
+/** The edge types stronger than `type`: one of them joining the same two leaves `type` undrawn. */
+export const stronger = (type: EdgeType): readonly EdgeType[] => EDGE_TYPES.slice(0, EDGE_TYPES.indexOf(type));
 
 /** What `arrange` reads of a layer: its nodes in their loop boxes, the boxes (each a loop: it cycles), and the links. */
 export function shapeOf(m: LayerModel): GraphShape {

package/src/adapters/graph/selection.ts

@@ -48,7 +48,7 @@ export function parseSelection(g: LayerGraph, matrix: PassMatrix | null, sel: st
 
 /** The tasks of a layer's nodes by state, added up. */
 export function layerCounts(nodes: readonly Pick<GraphNode, 'counts'>[]): NodeCounts {
-  const c: NodeCounts = { total: 0, done: 0, partial: 0, failed: 0, running: 0, pending: 0, skipped: 0, blocked: 0 };
+  const c: NodeCounts = { total: 0, done: 0, partial: 0, failed: 0, running: 0, pending: 0, skipped: 0, blocked: 0, cancelled: 0 };
   for (const n of nodes) for (const k of Object.keys(c) as (keyof NodeCounts)[]) c[k] += n.counts[k];
   return c;
 }

package/src/adapters/graph/states.ts

@@ -1,7 +1,7 @@
 // A task's states by severity: the one a mark of several tasks shows.
 import type { PlanNode, TaskState } from '@contraagent/api';
 
-export const SEVERITY: Record<TaskState, number> = { failed: 6, running: 5, blocked: 4, partial: 3, pending: 2, skipped: 1, done: 0 };
+export const SEVERITY: Record<TaskState, number> = { failed: 7, running: 6, blocked: 5, partial: 4, pending: 3, cancelled: 2, skipped: 1, done: 0 };
 
 /** The state a mark of several tasks shows: the most severe of them. */
 export const worstState = (nodes: readonly PlanNode[]): TaskState =>

package/src/adapters/graph/types.ts

@@ -27,7 +27,7 @@ export interface LayerMark {
   deadlineAt?: string;
 }
 
-export type NodeCounts = Required<Pick<PlanGroup, 'total' | 'done' | 'partial' | 'failed' | 'running' | 'pending' | 'skipped' | 'blocked'>>;
+export type NodeCounts = Required<Pick<PlanGroup, 'total' | 'done' | 'partial' | 'failed' | 'running' | 'pending' | 'skipped' | 'blocked' | 'cancelled'>>;
 
 export interface GraphNode {
   id: string;
@@ -96,13 +96,23 @@ export interface FlowBox {
   parts: { id: string; key: string; node: GraphNode }[];
 }
 
+/** How tasks of two nodes are joined (`GraphEdge.type`), the strongest first. */
+export type EdgeType = 'given' | 'after' | 'created';
+
+/** The edge types, the strongest first: an edge is drawn only where no stronger one joins the same two. */
+export const EDGE_TYPES: readonly EdgeType[] = ['given', 'after', 'created'];
+
 export interface GraphEdge {
   from: string;
   to: string;
   /** Tasks of `to` joined to a task of `from`. */
   tasks: number;
-  /** `after`: waits for its output; `created`: created after its result (and does not wait for its output). */
-  type: 'after' | 'created';
+  /**
+   * `given`: given its output (`given_from`, data); `after`: waits for it and is not given its output (order
+   * only); `created`: created after its result (`created_from`). Two nodes are joined by the first of these any of
+   * their tasks are.
+   */
+  type: EdgeType;
   /** Some task of it joins a task in the same pass of every loop around both ends: it sets the layers (else it goes back to a loop's next pass). */
   samePass: boolean;
   /** It goes back to a loop's next pass (or otherwise closes a cycle): the loop box stands for it, it is not drawn. */
@@ -115,7 +125,7 @@ export interface GraphStub {
   label: string;
   to: string;
   tasks: number;
-  type: 'after' | 'created';
+  type: EdgeType;
 }
 
 /** A layer as the plan has it, before it is arranged: its nodes in the plan's order, its loop boxes without their layers. */

package/src/adapters/graph/words.ts

@@ -7,12 +7,12 @@ import { msg, str } from '@lit/localize';
 import { facts, fmtDur, kindUnit, listText } from '../../words/format.js';
 import { passesRan, stateCount, taskStatusLabel } from '../../words/index.js';
 import { SEVERITY } from './states.js';
-import type { GraphNode, LayerGraph, LayerMark, NodeCounts } from './types.js';
+import type { EdgeType, GraphNode, LayerGraph, LayerMark, NodeCounts } from './types.js';
 
 /** The states the legend can show, in this order; it shows the ones the view has. */
-export const LEGEND: readonly TaskState[] = ['done', 'partial', 'running', 'pending', 'failed', 'blocked', 'skipped'];
+export const LEGEND: readonly TaskState[] = ['done', 'partial', 'running', 'pending', 'failed', 'blocked', 'skipped', 'cancelled'];
 
-/** How each task state looks: done round, partly done half filled, running round and breathing, waiting a ring, failed square, not started hatched, skipped muted. */
+/** How each task state looks: done round, partly done half filled, running round and breathing, waiting a ring, failed square, not started hatched, skipped muted, cancelled a muted ring. */
 const LOOKS: Record<TaskState, Pick<StateStyle, 'tone' | 'shape'>> = {
   done: { tone: 'done', shape: 'round' },
   partial: { tone: 'attention', shape: 'half' },
@@ -21,6 +21,7 @@ const LOOKS: Record<TaskState, Pick<StateStyle, 'tone' | 'shape'>> = {
   failed: { tone: 'failed', shape: 'square' },
   blocked: { tone: 'attention', shape: 'hatched' },
   skipped: { tone: 'muted', shape: 'round' },
+  cancelled: { tone: 'muted', shape: 'ring' },
 };
 
 /** The task states as the graph draws them, in the legend's order (`live`: a pending task waits; else it did not run). */
@@ -53,7 +54,7 @@ export function doneOf(c: NodeCounts): string {
 
 /** The tasks that are not done, by state, most severe first: "1 failed", "1 not started", "1 partly done". */
 export function notDone(c: NodeCounts, live: boolean): string[] {
-  return (['failed', 'blocked', 'partial', 'running', 'pending', 'skipped'] as const).filter((s) => c[s]).map((s) => countOf(s, c[s], live));
+  return (['failed', 'blocked', 'partial', 'running', 'pending', 'cancelled', 'skipped'] as const).filter((s) => c[s]).map((s) => countOf(s, c[s], live));
 }
 
 /** A fact's class: failed, not started or partly done, running, or muted (waiting, not run, skipped). */
@@ -92,28 +93,32 @@ export function nodeTip(n: GraphNode): string {
   return facts(msg(str`Function ${n.name}`), n.timeBox ? msg(str`Deadline ${fmtDur(n.timeBox.deadline_s)}`) : '', doneOf(n.counts));
 }
 
-/** The names of the nodes `n` waits for, was created after, and feeds. */
-export function neighbours(n: GraphNode, g: Pick<LayerGraph, 'nodes' | 'edges' | 'stubs'>): { waits: string[]; after: string[]; feeds: string[] } {
+/** The names of the nodes whose outputs `n`'s tasks are given, that they only run after, that they were created after, and that `n` feeds. */
+export function neighbours(
+  n: GraphNode,
+  g: Pick<LayerGraph, 'nodes' | 'edges' | 'stubs'>,
+): { given: string[]; order: string[]; created: string[]; feeds: string[] } {
   const label = (id: string) => {
     const x = g.nodes.find((y) => y.id === id);
     return !x ? id : x.box ? msg(str`${x.label} in the loop`) : x.label;
   };
-  const into = (type: 'after' | 'created') => [
+  const into = (type: EdgeType) => [
     ...g.stubs.filter((s) => s.to === n.id && s.type === type).map((s) => s.label),
     ...g.edges.filter((e) => e.to === n.id && e.type === type).map((e) => label(e.from)),
   ];
-  return { waits: into('after'), after: into('created'), feeds: [...new Set(g.edges.filter((e) => e.from === n.id).map((e) => label(e.to)))] };
+  return { given: into('given'), order: into('after'), created: into('created'), feeds: [...new Set(g.edges.filter((e) => e.from === n.id).map((e) => label(e.to)))] };
 }
 
-/** The node for a screen reader: its counts, and the nodes it waits for, was created after and feeds. */
+/** The node for a screen reader: its counts, and the nodes it is given the outputs of, runs after, was created after and feeds. */
 export function nodeLabel(n: GraphNode, g: Pick<LayerGraph, 'nodes' | 'edges' | 'stubs'>, live: boolean): string {
   const c = n.counts;
-  const { waits, after, feeds } = neighbours(n, g);
+  const { given, order, created, feeds } = neighbours(n, g);
   return [
     n.type === 'flow' ? facts(msg(str`Function ${n.label}`), doneOf(c)) : facts(n.label, executorWord(n), doneOf(c)),
     ...exceptions(n, live).map(([, t]) => t),
-    waits.length ? msg(str`Waits for: ${listText(waits)}`) : '',
-    after.length ? msg(str`Created after: ${listText(after)}`) : '',
+    given.length ? msg(str`Given output of: ${listText(given)}`) : '',
+    order.length ? msg(str`Runs after: ${listText(order)}`) : '',
+    created.length ? msg(str`Created after: ${listText(created)}`) : '',
     feeds.length ? msg(str`Later tasks: ${listText(feeds)}`) : '',
   ]
     .filter(Boolean)

package/src/adapters/index.ts

@@ -20,3 +20,4 @@ export { compound, chooseOpen, doi, interest, notable, placeKey, placeStats, tow
 export { LOOP_SEGMENT, type FlowBox, type GraphNode, type LayerGraph, type LayerMark, type LayerModel, type LoopBox } from './graph/types.js';
 export * from './transcript/index.js';
 export * from './preflight.js';
+export * from './forecast.js';

package/src/adapters/journal-columns.ts

@@ -8,7 +8,7 @@ import { msg, str } from '@lit/localize';
 import { html, nothing } from 'lit';
 import { stopTone } from '../lib/tone.js';
 import { executorIcon } from '../words/executor.js';
-import { facts, fmtDur, kindUnit, localTime, sentence, tokenCount, unreadEvents, usd } from '../words/format.js';
+import { facts, fmtDur, kindUnit, localTime, sentence, tokenCount, unreadEvents, usageUnknown, usageUnknownWords, usd } from '../words/format.js';
 import { attemptLabel, correctionsText, credentialLabel, credentialTip, modelSwitch, notStartedCause, outcomeLabel, replayedLabel, replayedTip, stopLabel } from '../words/index.js';
 import { accountReading, readingShort } from '../words/quota.js';
 import { customColumnTip, customValue } from '../words/row-extras.js';
@@ -189,6 +189,7 @@ export function journalColumns(ctx: JournalColumnsContext): DataColumn<JournalRo
       width: 'minmax(200px,2.2fr)',
       cell: (e) => {
         const unread = unreadEvents([e]);
+        const unknown = usageUnknownWords(usageUnknown([e]));
         const stops = e.safety_stops ?? [];
         return html`<span class="jwhy" title=${e.reason || nothing}>${reason(e)}${stops.length
           ? html` <span class="tone-text nw" data-tone="attention" title=${[safetyStopTip(), ...stops.map(safetyStopLine)].join('\n')}
@@ -198,6 +199,8 @@ export function journalColumns(ctx: JournalColumnsContext): DataColumn<JournalRo
           ? html` <span class="unread nw" title=${msg(str`Event types this contraagent version does not know (unread_events): ${unread}`)}
               ><span aria-hidden="true">⚠</span> ${msg('Unrecognized events')}</span
             >`
+          : nothing}${unknown
+          ? html` <span class="unread nw" title=${unknown.tip}><span aria-hidden="true">⚠</span> ${unknown.label}</span>`
           : nothing}</span>`;
       },
     },

package/src/adapters/kpi-tiles.ts

@@ -123,6 +123,7 @@ export function kpiTiles(journal: readonly JournalRow[], d: Pick<RunDerived, 'ou
     { text: c.failed ? stateCount('failed', c.failed) : '', tone: problemTone(c.failed, 'failed') },
     { text: c.not_started ? stateCount('not_started', c.not_started) : '', tone: problemTone(c.not_started, 'attention') },
     { text: c.partial ? stateCount('partial', c.partial) : '', tone: problemTone(c.partial, 'attention') },
+    { text: c.cancelled ? stateCount('cancelled', c.cancelled) : '', tone: 'neutral' },
   ];
   return [
     { id: 'tasks', label: msg('Tasks', { id: 'tasks', desc: 'A count of tasks' }), value: c.total, sub: [parts] },

package/src/core/scroll.ts

@@ -1,9 +1,11 @@
 // A scroller that comes back where the reader left it. The position is
 // remembered in a memory (`memory.ts`: the history entry, or an embedded
-// monitor's own); restoring waits until the content, which arrives over the
-// network, is tall enough to scroll there.
+// monitor's own). It is a position in the whole content, which arrives over the
+// network, in parts on a slow connection or machine: restoring holds it until all
+// of the content has arrived and is tall enough to scroll there.
 import { pageMemory, type Memory } from './memory.js';
 
+/** How long restoring goes on once the content is complete: for what a view draws later (its own fetch), or content now shorter. */
 const GIVE_UP_MS = 6000;
 const INPUT_EVENTS = ['wheel', 'touchstart', 'pointerdown', 'keydown'] as const;
 
@@ -11,6 +13,9 @@ export class ScrollMemory {
   private el: HTMLElement | null = null;
   private frame = 0;
   private restoring = false;
+  private target = 0;
+  /** When restoring ends at the latest: counted from when the content is complete, null before. */
+  private until: number | null = null;
 
   constructor(
     private readonly id: string,
@@ -31,7 +36,11 @@ export class ScrollMemory {
     this.el = null;
   }
 
-  /** Go back to the remembered position, as soon as the content allows; to the top when none is remembered. */
+  /**
+   * Go back to the remembered position, to the top when none is remembered. The
+   * position is held until `update` reports the content complete and it is tall
+   * enough, or until the reader scrolls.
+   */
   restore(): void {
     const el = this.el;
     if (!el) return;
@@ -41,16 +50,22 @@ export class ScrollMemory {
       el.scrollTop = 0;
       return;
     }
-    const until = performance.now() + GIVE_UP_MS;
+    this.target = target;
+    this.until = null;
     this.restoring = true;
+    // Rows that arrive above the position (a list with the newest first) would move it
+    // down by their height (the browser's scroll anchoring); the position is one in the
+    // whole list, so it stays.
+    el.style.overflowAnchor = 'none';
     for (const t of INPUT_EVENTS) el.addEventListener(t, this.cancel, { passive: true, once: true });
-    const step = () => {
-      const max = el.scrollHeight - el.clientHeight;
-      el.scrollTop = Math.min(target, max);
-      if (max >= target || performance.now() > until) return this.cancel();
-      this.frame = requestAnimationFrame(step);
-    };
-    step();
+    this.place();
+  }
+
+  /** The content changed, `complete` once all of it has arrived: while restoring, the position is set again at the next frame. */
+  update(complete: boolean): void {
+    if (!this.restoring) return;
+    if (complete) this.until ??= performance.now() + GIVE_UP_MS;
+    this.frame ||= requestAnimationFrame(this.step);
   }
 
   /** Start at the top (a new place). */
@@ -59,11 +74,28 @@ export class ScrollMemory {
     if (this.el) this.el.scrollTop = 0;
   }
 
+  /** Scroll as near the position as the content allows; true once restoring is over. */
+  private place(): boolean {
+    const el = this.el!;
+    const max = el.scrollHeight - el.clientHeight;
+    el.scrollTop = Math.min(this.target, max);
+    // While the content is still arriving, each update places it again.
+    return this.until !== null && (max >= this.target || performance.now() > this.until);
+  }
+
+  private readonly step = (): void => {
+    this.frame = 0;
+    if (!this.restoring || !this.el) return;
+    if (this.place()) return this.cancel();
+    if (this.until !== null) this.frame = requestAnimationFrame(this.step);
+  };
+
   private readonly cancel = (): void => {
     cancelAnimationFrame(this.frame);
     this.frame = 0;
     if (!this.restoring) return;
     this.restoring = false;
+    if (this.el) this.el.style.overflowAnchor = '';
     for (const t of INPUT_EVENTS) this.el?.removeEventListener(t, this.cancel);
   };
 

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

@@ -223,7 +223,7 @@ export class CaOverview extends LitElement {
       <section class="panel enter">
         <h3 title=${msg('Every task the run scheduled, by kind (plan.jsonl)')}>${msg('Pipeline')}
           <span class="r">${this.progressLine(live)}</span></h3>
-        <ca-pipeline-graph .plan=${s.plan} .journal=${s.journal} .run=${this.run} .layer=${this.layer} .unit=${this.unit} .sel=${this.sel} ?live=${live}></ca-pipeline-graph>
+        <ca-pipeline-graph .plan=${s.plan} .forecast=${s.forecast} .journal=${s.journal} .run=${this.run} .layer=${this.layer} .unit=${this.unit} .sel=${this.sel} ?live=${live}></ca-pipeline-graph>
       </section>
       <section class="panel enter">
         <h3 title=${msg('Counted from every finished attempt (journal.jsonl)')}>${msg('Totals')}</h3>
@@ -336,7 +336,7 @@ export class CaOverview extends LitElement {
     const r = result(plan);
     if (live || r.left) {
       const p = progress(plan);
-      return facts(msg(str`${p.pct}%`), msg(str`${p.done} of ${p.total} tasks done`), p.partial ? stateCount('partial', p.partial) : '', p.skipped ? stateCount('skipped', p.skipped) : '');
+      return facts(msg(str`${p.pct}%`), msg(str`${p.done} of ${p.total} tasks done`), p.partial ? stateCount('partial', p.partial) : '', p.skipped ? stateCount('skipped', p.skipped) : '', p.cancelled ? stateCount('cancelled', p.cancelled) : '');
     }
     return facts(
       stateCount('done', r.done),
@@ -344,6 +344,7 @@ export class CaOverview extends LitElement {
       r.failed ? stateCount('failed', r.failed) : '',
       r.notStarted ? stateCount('not_started', r.notStarted) : '',
       r.partial ? stateCount('partial', r.partial) : '',
+      r.cancelled ? stateCount('cancelled', r.cancelled) : '',
     );
   }